Created template and component for v1.0.0

README.md

@@ -0,0 +1,93 @@
+# ngx-cryptic-text
+
+`@omnedia/ngx-cryptic-text` is an Angular library that provides a cryptic text animation effect. The component animates text by randomly switching letters until the correct characters appear, creating a mysterious or glitchy effect that can be used for titles, headings, or any text content in your Angular applications.
+
+## Features
+
+- Cryptic text animation effect that gradually resolves into the target text.
+- Customizable animation speed.
+- Lightweight and easy to integrate as a standalone component.
+
+## Installation
+
+Install the library using npm:
+
+```bash
+npm install @omnedia/ngx-cryptic-text
+
+Usage
+
+Import the NgxCrypticTextComponent in your Angular module or component:
+
+typescript
+
+import { NgxCrypticTextComponent } from '@omnedia/ngx-cryptic-text';
+
+@Component({
+  ...
+  imports: [
+    ...
+    NgxCrypticTextComponent,
+  ],
+  ...
+})
+```
+
+Use the component in your template:
+
+```html
+<om-cryptic-text
+  [text]="'Hello, World!'"
+  [animationSpeed]="1000"
+  styleClass="custom-cryptic-class"
+></om-cryptic-text>
+```
+
+## API
+
+```html
+<om-cryptic-text
+  [text]="text"
+  [animationSpeed]="animationSpeed"
+  styleClass="your-custom-class"
+>
+</om-cryptic-text>
+```
+
+- `text` (required): The target text to be revealed by the animation.
+- `animationSpeed` (optional): The duration of the entire animation in milliseconds. Defaults to 800ms.
+- `styleClass` (optional): A custom CSS class to apply to the text element for styling.
+
+## Example
+
+```html
+<om-cryptic-text
+  [text]="'Cryptic Text Effect!'"
+  [animationSpeed]="1200"
+  styleClass="cryptic-text-style"
+></om-cryptic-text>
+```
+
+This will create a cryptic text animation where the text "Cryptic Text Effect!" is gradually revealed over a duration of 1200ms.
+
+#Styling
+
+You can apply custom styles to the text using the styleClass input. For example:
+
+```css
+.cryptic-text-style {
+  font-size: 24px;
+  color: #ff69b4;
+  font-family: 'Courier New', Courier, monospace;
+}
+```
+
+This will style the cryptic text with a custom font size, color, and font family.
+
+## Contributing
+
+Contributions are welcome. Please submit a pull request or open an issue to discuss your ideas.
+
+## License
+
+This project is licensed under the MIT License.

ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ngx-cryptic-text",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@omnedia/ngx-cryptic-text",
+  "description": "A simple component library to animate text.",
+  "version": "1.0.0",
+  "peerDependencies": {
+    "@angular/common": "^18.2.0",
+    "@angular/core": "^18.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "keywords": [
+    "npm",
+    "text",
+    "cryptic",
+    "animation"
+  ],
+  "repository": {
+    "url": "https://github.com/omnedia/ngx-cryptic-text"
+  },
+  "author": "Markus Block (markus.block@omnedia.com)",
+  "license": "MIT"
+}

src/lib/ngx-cryptic-text.component.html

@@ -0,0 +1 @@
+<p [ngClass]="styleClass">{{ templateText }}</p>

src/lib/ngx-cryptic-text.component.ts

@@ -0,0 +1,54 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'om-cryptic-text',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: "./ngx-cryptic-text.component.html",
+  styles: '',
+})
+export class NgxCrypticTextComponent implements OnInit {
+  @Input("styleClass")
+  styleClass?: string;
+
+  @Input("text")
+  text!: string;
+
+  templateText = '';
+
+  @Input("animationSpeed")
+  animationSpeed = 800;
+
+  ngOnInit(): void {
+    if (!this.text) {
+      throw new Error('om-cryptic-text: No text provided!');
+    }
+
+    this.generateText();
+  }
+
+  generateText(): void {
+    const alphabets = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
+
+    const getRandomInt = (max: number) => Math.floor(Math.random() * max);
+
+    let interations = 0;
+
+    const interval = setInterval(
+      () => {
+        if (interations < this.text.length) {
+          let displayText = "";
+          this.text.split('').forEach((char, index) => {
+            displayText += char === " " ? char : index <= interations ? this.text[index] : alphabets[getRandomInt(26)];
+          });
+          this.templateText = displayText;
+          interations = interations + 0.1;
+        } else {
+          clearInterval(interval);
+        }
+      },
+      this.animationSpeed / (this.text.length * 10),
+    );
+  }
+}

src/public-api.ts

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of ngx-cryptic-text
+ */
+
+export * from './lib/ngx-cryptic-text.component';

tsconfig.lib.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

tsconfig.lib.prod.json

@@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

tsconfig.spec.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}