everipackage-reusable-components 1.0.0

package/README.md

@@ -0,0 +1,63 @@
+# ReusableComponents
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.1.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build reusable-components
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+   ```bash
+   cd dist/reusable-components
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/fesm2022/reusable-components.mjs

@@ -0,0 +1,485 @@
+import * as i0 from '@angular/core';
+import { input, Component, signal, EventEmitter, Output, Input, Directive, HostListener } from '@angular/core';
+import * as i1 from 'ng-primitives/button';
+import { NgpButton } from 'ng-primitives/button';
+import { NgFor, NgIf } from '@angular/common';
+
+class Button {
+    /**
+     * The size of the button.
+     */
+    size = input("md", ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /**
+     * The variant of the button.
+     */
+    variant = input("primary", ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: Button, isStandalone: true, selector: "button[app-button]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()", "attr.data-variant": "variant()" } }, hostDirectives: [{ directive: i1.NgpButton, inputs: ["disabled", "disabled"] }], ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [":host{border:none;border-radius:var(--radiusRound);width:100%;max-width:var(--width400);display:flex;align-items:center;justify-content:center;font-family:var(--fontFamily);font-weight:var(--semi);line-height:var(--line-height-large);cursor:pointer}:host[data-hover]{background-color:var(--ngp-background-hover)}:host[data-focus-visible]{outline:2px solid var(--ngp-focus-ring)}:host[data-press]{background-color:var(--ngp-background-active)}:host[data-size=sm]{font-size:var(--fontSize12);height:var(--height-height28, 28px);padding:var(--space0, 0) var(--space12, 12px)}:host[data-size=md],:host:not([data-size]){font-size:var(--fontSize14);height:var(--height-height36, 36px);padding:var(--space4, 4px) var(--space16, 16px)}:host[data-size=lg]{font-size:var(--fontSize16);height:var(--height-height48, 48px);padding:var(--space12, 12px) var(--space16, 16px)}:host[data-size=xl]{height:3.5rem;padding-left:1.5rem;padding-right:1.5rem;font-size:1.125rem;--ng-icon__size: 1.125rem}:host[data-variant=primary],:host:not([data-variant]){background-color:var(--button-primary-background-color);color:var(--button-primary-font-color)}:host[data-variant=primary][data-hover],:host:not([data-variant])[data-hover]{background-color:var(--button-primary-background-color)}:host[data-variant=primary][data-press],:host:not([data-variant])[data-press]{background-color:var(--button-primary-background-color)}:host[data-variant=secondary]{background-color:var(--button-secondary-background-color);color:var(--button-secondary-font-color);border:1px solid var(--button-secondary-border-color, var(--accent-color))}:host[data-variant=secondary][data-hover]{background-color:var(--button-secondary-background-color)}:host[data-variant=secondary][data-press]{background-color:var(--button-secondary-background-color)}:host[data-variant=destructive]{background-color:var(--ngp-destructive-background, #ef4444);color:var(--ngp-destructive-text, #ffffff);border:none}:host[data-variant=destructive][data-hover]{background-color:var(--ngp-destructive-background-hover, #dc2626)}:host[data-variant=destructive][data-press]{background-color:var(--ngp-destructive-background-active, #b91c1c)}:host[data-variant=outline]{background-color:transparent;color:var(--ngp-text-primary);border:1px solid var(--ngp-outline-border, #e2e8f0);box-shadow:none}:host[data-variant=outline][data-hover]{background-color:var(--ngp-background-hover);border-color:var(--ngp-outline-border-hover, #cbd5e1)}:host[data-variant=outline][data-press]{background-color:var( --ngp-outline-background-active, rgba(15, 23, 42, .1) )}:host[data-variant=ghost]{background-color:transparent;color:var(--ngp-text-primary);border:none;box-shadow:none}:host[data-variant=ghost][data-hover]{background-color:var(--ngp-background-hover)}:host[data-variant=ghost][data-press]{background-color:var(--ngp-background-active)}:host[data-variant=link]{background-color:transparent;color:var(--ngp-link-color, #3b82f6);border:none;box-shadow:none;text-decoration:underline;text-underline-offset:4px}:host[data-variant=link][data-hover]{text-decoration-thickness:2px}:host[data-variant=primary]:host[disabled]{background-color:var(--button-primary-disabled-background-color);cursor:not-allowed}:host[data-variant=secondary]:host[disabled]{background-color:var(--button-secondary-disabled-background-color);cursor:not-allowed}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: Button, decorators: [{
+            type: Component,
+            args: [{ selector: "button[app-button]", hostDirectives: [{ directive: NgpButton, inputs: ["disabled"] }], template: `
+    <ng-content />
+  `, host: {
+                        "[attr.data-size]": "size()",
+                        "[attr.data-variant]": "variant()",
+                    }, styles: [":host{border:none;border-radius:var(--radiusRound);width:100%;max-width:var(--width400);display:flex;align-items:center;justify-content:center;font-family:var(--fontFamily);font-weight:var(--semi);line-height:var(--line-height-large);cursor:pointer}:host[data-hover]{background-color:var(--ngp-background-hover)}:host[data-focus-visible]{outline:2px solid var(--ngp-focus-ring)}:host[data-press]{background-color:var(--ngp-background-active)}:host[data-size=sm]{font-size:var(--fontSize12);height:var(--height-height28, 28px);padding:var(--space0, 0) var(--space12, 12px)}:host[data-size=md],:host:not([data-size]){font-size:var(--fontSize14);height:var(--height-height36, 36px);padding:var(--space4, 4px) var(--space16, 16px)}:host[data-size=lg]{font-size:var(--fontSize16);height:var(--height-height48, 48px);padding:var(--space12, 12px) var(--space16, 16px)}:host[data-size=xl]{height:3.5rem;padding-left:1.5rem;padding-right:1.5rem;font-size:1.125rem;--ng-icon__size: 1.125rem}:host[data-variant=primary],:host:not([data-variant]){background-color:var(--button-primary-background-color);color:var(--button-primary-font-color)}:host[data-variant=primary][data-hover],:host:not([data-variant])[data-hover]{background-color:var(--button-primary-background-color)}:host[data-variant=primary][data-press],:host:not([data-variant])[data-press]{background-color:var(--button-primary-background-color)}:host[data-variant=secondary]{background-color:var(--button-secondary-background-color);color:var(--button-secondary-font-color);border:1px solid var(--button-secondary-border-color, var(--accent-color))}:host[data-variant=secondary][data-hover]{background-color:var(--button-secondary-background-color)}:host[data-variant=secondary][data-press]{background-color:var(--button-secondary-background-color)}:host[data-variant=destructive]{background-color:var(--ngp-destructive-background, #ef4444);color:var(--ngp-destructive-text, #ffffff);border:none}:host[data-variant=destructive][data-hover]{background-color:var(--ngp-destructive-background-hover, #dc2626)}:host[data-variant=destructive][data-press]{background-color:var(--ngp-destructive-background-active, #b91c1c)}:host[data-variant=outline]{background-color:transparent;color:var(--ngp-text-primary);border:1px solid var(--ngp-outline-border, #e2e8f0);box-shadow:none}:host[data-variant=outline][data-hover]{background-color:var(--ngp-background-hover);border-color:var(--ngp-outline-border-hover, #cbd5e1)}:host[data-variant=outline][data-press]{background-color:var( --ngp-outline-background-active, rgba(15, 23, 42, .1) )}:host[data-variant=ghost]{background-color:transparent;color:var(--ngp-text-primary);border:none;box-shadow:none}:host[data-variant=ghost][data-hover]{background-color:var(--ngp-background-hover)}:host[data-variant=ghost][data-press]{background-color:var(--ngp-background-active)}:host[data-variant=link]{background-color:transparent;color:var(--ngp-link-color, #3b82f6);border:none;box-shadow:none;text-decoration:underline;text-underline-offset:4px}:host[data-variant=link][data-hover]{text-decoration-thickness:2px}:host[data-variant=primary]:host[disabled]{background-color:var(--button-primary-disabled-background-color);cursor:not-allowed}:host[data-variant=secondary]:host[disabled]{background-color:var(--button-secondary-disabled-background-color);cursor:not-allowed}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+
+class InputComponent {
+    /**
+     * The floating label text.
+     */
+    label = input("Label", ...(ngDevMode ? [{ debugName: "label" }] : []));
+    /**
+     * Optional placeholder (kept for accessibility, primary label floats).
+     */
+    placeholder = input("", ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    /**
+     * Internal value signal for the input's value.
+     */
+    value = signal("", ...(ngDevMode ? [{ debugName: "value" }] : []));
+    /**
+     * Focus state signal used to float the label when focused.
+     */
+    focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : []));
+    onInput(e) {
+        const target = e.target;
+        this.value.set(target.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: InputComponent, isStandalone: true, selector: "app-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <label class="ngp-field">
+      <input
+        type="text"
+        [value]="value()"
+        (input)="onInput($event)"
+        (focus)="focused.set(true)"
+        (blur)="focused.set(false)"
+        class="ngp-input"
+        [attr.placeholder]="placeholder()"
+      />
+      <span class="ngp-label" [attr.data-active]="(value() || focused()) ? '' : null">{{ label() }}</span>
+    </label>
+  `, isInline: true, styles: [":host{display:block;width:100%;max-width:var(--width400);font-family:var(--fontFamily)}.ngp-field{position:relative;display:block}.ngp-input{width:100%;padding:1rem .75rem .5rem;font-size:var(--fontSize14, 14px);border:1px solid var(--ngp-outline-border, #e2e8f0);border-radius:8px;background:var(--ngp-input-background, #fff);box-sizing:border-box;transition:border-color .12s ease,box-shadow .12s ease,background .12s ease}.ngp-input:hover{border-color:var(--ngp-outline-border-hover, #cbd5e1)}.ngp-input:focus{outline:none;border-color:var(--shuttleGray);box-shadow:0 0 0 4px #3b82f614}.ngp-input:disabled{background:var(--ngp-disabled-background, #f8fafc);color:var(--ngp-text-muted, #9ca3af);cursor:not-allowed}.ngp-label{position:absolute;left:.75rem;top:.8rem;transform-origin:left top;transition:transform .12s ease,top .12s ease,font-size .12s ease,color .12s ease;color:var(--ngp-text-muted, #6b7280);pointer-events:none;background:transparent;padding:0 .125rem;font-weight:500}.ngp-label[data-active]{transform:translateY(-.85rem) scale(.82);top:.9rem;font-weight:600;color:var(--midnightGray);background:transparent}:host([data-invalid]) .ngp-input,.ngp-field[data-invalid] .ngp-input{border-color:var(--ngp-destructive-background, #ef4444)}:host([data-invalid]) .ngp-label,.ngp-field[data-invalid] .ngp-label{color:var(--ngp-destructive-background, #ef4444)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: InputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-input', template: `
+    <label class="ngp-field">
+      <input
+        type="text"
+        [value]="value()"
+        (input)="onInput($event)"
+        (focus)="focused.set(true)"
+        (blur)="focused.set(false)"
+        class="ngp-input"
+        [attr.placeholder]="placeholder()"
+      />
+      <span class="ngp-label" [attr.data-active]="(value() || focused()) ? '' : null">{{ label() }}</span>
+    </label>
+  `, styles: [":host{display:block;width:100%;max-width:var(--width400);font-family:var(--fontFamily)}.ngp-field{position:relative;display:block}.ngp-input{width:100%;padding:1rem .75rem .5rem;font-size:var(--fontSize14, 14px);border:1px solid var(--ngp-outline-border, #e2e8f0);border-radius:8px;background:var(--ngp-input-background, #fff);box-sizing:border-box;transition:border-color .12s ease,box-shadow .12s ease,background .12s ease}.ngp-input:hover{border-color:var(--ngp-outline-border-hover, #cbd5e1)}.ngp-input:focus{outline:none;border-color:var(--shuttleGray);box-shadow:0 0 0 4px #3b82f614}.ngp-input:disabled{background:var(--ngp-disabled-background, #f8fafc);color:var(--ngp-text-muted, #9ca3af);cursor:not-allowed}.ngp-label{position:absolute;left:.75rem;top:.8rem;transform-origin:left top;transition:transform .12s ease,top .12s ease,font-size .12s ease,color .12s ease;color:var(--ngp-text-muted, #6b7280);pointer-events:none;background:transparent;padding:0 .125rem;font-weight:500}.ngp-label[data-active]{transform:translateY(-.85rem) scale(.82);top:.9rem;font-weight:600;color:var(--midnightGray);background:transparent}:host([data-invalid]) .ngp-input,.ngp-field[data-invalid] .ngp-input{border-color:var(--ngp-destructive-background, #ef4444)}:host([data-invalid]) .ngp-label,.ngp-field[data-invalid] .ngp-label{color:var(--ngp-destructive-background, #ef4444)}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
+
+/**
+ * Simple select/dropdown component with floating label behavior similar to the input.
+ * Accepts `options` as an array of strings or objects { value, label }.
+ */
+class SelectComponent {
+    label = input('Select', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    /** Accepts Array<string> or Array<{value,label}> */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    onChange(e) {
+        const target = e.target;
+        const v = target.value;
+        this.value.set(v);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: SelectComponent, isStandalone: true, selector: "app-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <label class="ngp-field">
+      <select
+        class="ngp-select"
+        (change)="onChange($event)"
+        [value]="value()"
+      >
+      <!-- placeholder option shown inside the native select when no value is selected; fall back to label text -->
+        <option *ngIf="(placeholder() || label())" value="">{{ placeholder() || label() }}</option>
+        <option *ngFor="let opt of options()" [value]="opt.value ?? opt">{{ opt.label ?? opt }}</option>
+      </select>
+      <!-- floating label is hidden by default; it becomes visible only when a value exists -->
+      <!-- <span class="ngp-label" [attr.data-active]="(value()) ? '' : null">{{ label() }}</span> -->
+    </label>
+  `, isInline: true, styles: [":host{display:block;width:100%;max-width:var(--width400);font-family:var(--fontFamily)}.ngp-field{position:relative}.ngp-select{width:100%;padding:.875rem .75rem .5rem;font-size:var(--fontSize14, 14px);border:1px solid var(--ngp-outline-border, #e2e8f0);border-radius:8px;box-sizing:border-box;color:var(--shuttleGray);display:inline-flex;flex-direction:column;align-items:center;gap:var(--space16, 16px)}option{background-color:violet}.ngp-select:focus{outline:none;border-color:var(--shuttleGray);box-shadow:0 0 0 4px #3b82f614}// .ngp-label{// position: absolute;// left: .75rem;// top: .85rem;// transform-origin: left top;// transition: transform .12s ease,top .12s ease,font-size .12s ease;// color: var(--ngp-text-muted, #6b7280);// pointer-events: none;// padding: 0 .125rem;// font-weight: 500;//}// .ngp-label[data-active]{// transform: translateY(-.85rem) scale(.82);// top: .45rem;// font-weight: 600;// color: var(--accent-color, #3b82f6);//}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [NgFor, NgIf], selector: 'app-select', template: `
+    <label class="ngp-field">
+      <select
+        class="ngp-select"
+        (change)="onChange($event)"
+        [value]="value()"
+      >
+      <!-- placeholder option shown inside the native select when no value is selected; fall back to label text -->
+        <option *ngIf="(placeholder() || label())" value="">{{ placeholder() || label() }}</option>
+        <option *ngFor="let opt of options()" [value]="opt.value ?? opt">{{ opt.label ?? opt }}</option>
+      </select>
+      <!-- floating label is hidden by default; it becomes visible only when a value exists -->
+      <!-- <span class="ngp-label" [attr.data-active]="(value()) ? '' : null">{{ label() }}</span> -->
+    </label>
+  `, styles: [":host{display:block;width:100%;max-width:var(--width400);font-family:var(--fontFamily)}.ngp-field{position:relative}.ngp-select{width:100%;padding:.875rem .75rem .5rem;font-size:var(--fontSize14, 14px);border:1px solid var(--ngp-outline-border, #e2e8f0);border-radius:8px;box-sizing:border-box;color:var(--shuttleGray);display:inline-flex;flex-direction:column;align-items:center;gap:var(--space16, 16px)}option{background-color:violet}.ngp-select:focus{outline:none;border-color:var(--shuttleGray);box-shadow:0 0 0 4px #3b82f614}// .ngp-label{// position: absolute;// left: .75rem;// top: .85rem;// transform-origin: left top;// transition: transform .12s ease,top .12s ease,font-size .12s ease;// color: var(--ngp-text-muted, #6b7280);// pointer-events: none;// padding: 0 .125rem;// font-weight: 500;//}// .ngp-label[data-active]{// transform: translateY(-.85rem) scale(.82);// top: .45rem;// font-weight: 600;// color: var(--accent-color, #3b82f6);//}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
+
+class PinEntryDirective {
+    el;
+    renderer;
+    length = 4; // default 4 digits
+    theme = 'light'; // theme switch
+    pinEntered = new EventEmitter();
+    svgCircles = [];
+    values = [];
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+    }
+    ngOnInit() {
+        // Inject directive-specific CSS once
+        this.injectStyles();
+        const parent = this.renderer.createElement('div');
+        this.renderer.addClass(parent, 'pin-svg-container');
+        this.renderer.addClass(parent, this.theme === 'dark' ? 'dark-theme' : 'light-theme');
+        // Remove original input
+        const originalInput = this.el.nativeElement;
+        this.renderer.insertBefore(originalInput.parentNode, parent, originalInput);
+        this.renderer.removeChild(originalInput.parentNode, originalInput);
+        // Hidden input to capture actual value
+        const hiddenInput = this.renderer.createElement('input');
+        this.renderer.setAttribute(hiddenInput, 'type', 'tel');
+        this.renderer.setStyle(hiddenInput, 'opacity', '0');
+        this.renderer.setStyle(hiddenInput, 'position', 'absolute');
+        this.renderer.setStyle(hiddenInput, 'pointer-events', 'none');
+        this.renderer.appendChild(parent, hiddenInput);
+        // Create SVG circles
+        for (let i = 0; i < this.length; i++) {
+            const svg = this.renderer.createElement('svg', 'svg');
+            this.renderer.setAttribute(svg, 'xmlns', 'http://www.w3.org/2000/svg');
+            this.renderer.setAttribute(svg, 'width', '40');
+            this.renderer.setAttribute(svg, 'height', '40');
+            this.renderer.setAttribute(svg, 'viewBox', '0 0 24 24');
+            const circle = this.renderer.createElement('circle', 'svg');
+            this.renderer.setAttribute(circle, 'cx', '12');
+            this.renderer.setAttribute(circle, 'cy', '12');
+            this.renderer.setAttribute(circle, 'r', '9.5');
+            // Stroke color depends on theme
+            this.renderer.setAttribute(circle, 'stroke', this.theme === 'dark' ? 'white' : 'black');
+            this.renderer.setAttribute(circle, 'fill', 'transparent');
+            this.renderer.appendChild(svg, circle);
+            this.renderer.addClass(svg, 'pin-svg');
+            this.renderer.appendChild(parent, svg);
+            this.svgCircles.push(svg);
+        }
+        // Listen for input
+        this.renderer.listen(hiddenInput, 'input', (event) => {
+            const val = event.target.value.replace(/\D/g, '').slice(0, this.length);
+            this.values = val.split('');
+            // Update SVG fill
+            this.svgCircles.forEach((svg, idx) => {
+                const circle = svg.querySelector('circle');
+                if (circle) {
+                    if (this.values[idx]) {
+                        circle.setAttribute('fill', this.theme === 'dark' ? 'white' : 'black');
+                    }
+                    else {
+                        circle.setAttribute('fill', 'transparent');
+                    }
+                }
+            });
+            // Emit PIN when fully entered
+            if (this.values.length === this.length) {
+                this.pinEntered.emit(this.values.join(''));
+            }
+        });
+        // Focus hidden input when container clicked
+        this.renderer.listen(parent, 'click', () => {
+            hiddenInput.focus();
+        });
+    }
+    injectStyles() {
+        const style = this.renderer.createElement('style');
+        style.textContent = `
+    .pin-svg-container {
+        display: flex;
+        gap: 20px;
+        align-items: center;
+        justify-content: center;
+        margin: 20px;
+    }
+    .pin-svg {
+        cursor: pointer;
+    }
+    .light-theme {
+        color: #000;
+    }
+    .dark-theme {
+        background-color: #000;
+        color: #fff;
+    } `;
+        document.head.appendChild(style);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: PinEntryDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: PinEntryDirective, isStandalone: true, selector: "input[appPinEntry]", inputs: { length: "length", theme: "theme" }, outputs: { pinEntered: "pinEntered" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: PinEntryDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[appPinEntry]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { length: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], pinEntered: [{
+                type: Output
+            }] } });
+
+class FloatingLabelDirective {
+    el;
+    renderer;
+    label;
+    labelElement;
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+    }
+    ngOnInit() {
+        // Inject directive-specific CSS once
+        this.injectStyles();
+        const parent = this.renderer.createElement('div');
+        this.renderer.addClass(parent, 'floating-label-container');
+        const input = this.el.nativeElement;
+        this.renderer.insertBefore(input.parentNode, parent, input);
+        this.renderer.appendChild(parent, input);
+        this.labelElement = this.renderer.createElement('label');
+        this.renderer.addClass(this.labelElement, 'floating-label');
+        this.labelElement.innerText = this.label;
+        this.renderer.appendChild(parent, this.labelElement);
+        if (input.value) {
+            this.renderer.addClass(this.labelElement, 'active');
+        }
+    }
+    onFocus() {
+        this.renderer.addClass(this.labelElement, 'active');
+    }
+    onBlur() {
+        if (!this.el.nativeElement.value) {
+            this.renderer.removeClass(this.labelElement, 'active');
+        }
+    }
+    injectStyles() {
+        const style = this.renderer.createElement('style');
+        style.textContent = `
+
+      .floating-label-container {
+        position: relative;
+        width: var(--fullWidth);
+        display: flex;
+        align-items: center;
+      }
+
+      .floating-label-container input {
+        border: 1px solid var(--steelGray);
+        border-radius: 4px;
+        padding: 14px 10px 6px 10px; /* extra top padding for label space */
+        width: var(--fullWidth);
+        outline: none;
+        font-size: var(--fontSize16);
+      }
+
+      .floating-label-container input:focus {
+        border-color: var(--shuttleGray);
+      }
+
+      .floating-label {
+        position: absolute;
+        left: var(--space12);
+        top: auto;
+        color: #777;
+        font-size: var(--fontSize16);
+        transition: all 0.1s ease-out;
+        transition-property: transform;
+        pointer-events: none;
+
+      }
+
+      .floating-label.active {
+        top: 2px;
+        font-size: var(--fontSize12);
+        color: var(--midnightGray);
+      }
+
+
+    `;
+        document.head.appendChild(style);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: FloatingLabelDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: FloatingLabelDirective, isStandalone: true, selector: "input[appFloatingLabel]", inputs: { label: "label" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: FloatingLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[appFloatingLabel]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { label: [{
+                type: Input
+            }], onFocus: [{
+                type: HostListener,
+                args: ['focus']
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }] } });
+
+class FloatingLabelPinDirective {
+    el;
+    renderer;
+    label;
+    labelElement;
+    toggleButton;
+    isVisible = false;
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+    }
+    ngOnInit() {
+        // Inject directive-specific CSS once
+        this.injectStyles();
+        const parent = this.renderer.createElement('div');
+        this.renderer.addClass(parent, 'floating-label-pin-container');
+        const input = this.el.nativeElement;
+        input.type = 'password'; // default hidden
+        this.renderer.insertBefore(input.parentNode, parent, input);
+        this.renderer.appendChild(parent, input);
+        // Create label
+        this.labelElement = this.renderer.createElement('label');
+        this.renderer.addClass(this.labelElement, 'floating-label');
+        this.labelElement.innerText = this.label;
+        this.renderer.appendChild(parent, this.labelElement);
+        // Create toggle button
+        this.toggleButton = this.renderer.createElement('button');
+        this.renderer.addClass(this.toggleButton, 'pin-toggle');
+        this.toggleButton.type = 'button';
+        this.toggleButton.innerText = 'Show';
+        this.renderer.appendChild(parent, this.toggleButton);
+        // Toggle logic
+        this.renderer.listen(this.toggleButton, 'click', () => {
+            this.isVisible = !this.isVisible;
+            input.type = this.isVisible ? 'text' : 'password';
+            this.toggleButton.innerText = this.isVisible ? 'Hide' : 'Show';
+        });
+        // Initial state
+        if (input.value) {
+            this.renderer.addClass(this.labelElement, 'active');
+        }
+    }
+    onFocus() {
+        this.renderer.addClass(this.labelElement, 'active');
+    }
+    onBlur() {
+        if (!this.el.nativeElement.value) {
+            this.renderer.removeClass(this.labelElement, 'active');
+        }
+    }
+    injectStyles() {
+        const style = this.renderer.createElement('style');
+        style.textContent = `
+
+      .floating-label-pin-container {
+        position: relative;
+        width: var(--fullWidth);
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+      }
+
+      .floating-label-pin-container input {
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        padding: 14px 40px 6px 10px; /* space for toggle button */
+        /* width: 100%; */
+        font-size: var(--fontSize16);
+        outline: none;
+      }
+
+      .floating-label-pin-container input:focus {
+        border-color: var(--shuttleGray);
+      }
+
+      .floating-label {
+        position: absolute;
+        left: var(--fontSize12);
+        top: auto;
+        /* top: 12px; */
+        color: #777;
+        font-size: var(--fontSize16);
+        transition: all 0.1s ease-out;
+        transition-property: transform;
+        pointer-events: none;
+      }
+
+      .floating-label.active {
+        top: 2px;
+        font-size: var(--fontSize12);
+        color: var(--midnightGray);
+      }
+
+      .pin-toggle {
+        position: absolute;
+        background: none;
+        border: none;
+        color: var(--seaBlue);
+        cursor: pointer;
+        font-family: var(--fontFamily);
+        font-size: var(--fontSize14);
+        font-style: normal;
+        font-weight: var(--strong);
+      }
+
+
+    `;
+        document.head.appendChild(style);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: FloatingLabelPinDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: FloatingLabelPinDirective, isStandalone: true, selector: "input[appFloatingLabelPin]", inputs: { label: "label" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: FloatingLabelPinDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[appFloatingLabelPin]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { label: [{
+                type: Input
+            }], onFocus: [{
+                type: HostListener,
+                args: ['focus']
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }] } });
+
+/*
+ * Public API Surface of reusable-components
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Button, FloatingLabelDirective, FloatingLabelPinDirective, InputComponent, PinEntryDirective, SelectComponent };
+//# sourceMappingURL=reusable-components.mjs.map

package/fesm2022/reusable-components.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"reusable-components.mjs","sources":["../../../projects/reusable-components/src/lib/buttons/button.component.ts","../../../projects/reusable-components/src/lib/input/input.component.ts","../../../projects/reusable-components/src/lib/select/select.component.ts","../../../projects/reusable-components/src/lib/pin-entry/pin-entry.directive.ts","../../../projects/reusable-components/src/lib/floating-label/floating-label.directive.ts","../../../projects/reusable-components/src/lib/floating-label-pin/floating-label-pin.directive.ts","../../../projects/reusable-components/src/public-api.ts","../../../projects/reusable-components/src/reusable-components.ts"],"sourcesContent":["import { Component, input } from \"@angular/core\";\nimport { NgpButton } from \"ng-primitives/button\";\n\n/**\n * The size of the button.\n */\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n/**\n * The variant of the button.\n */\nexport type ButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"destructive\"\n  | \"outline\"\n  | \"ghost\"\n  | \"link\";\n@Component({\n  selector: \"button[app-button]\",\n  hostDirectives: [{ directive: NgpButton, inputs: [\"disabled\"] }],\n  template: `\n    <ng-content />\n  `,\n  host: {\n    \"[attr.data-size]\": \"size()\",\n    \"[attr.data-variant]\": \"variant()\",\n  },\n  styles: `\n    :host {\n        border: none;\n        border-radius: var(--radiusRound);\n        width: 100%;\n        max-width: var(--width400);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-family: var(--fontFamily);\n        font-weight: var(--semi);\n        line-height: var(--line-height-large);\n        cursor: pointer;\n    }\n    :host[data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n    :host[data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n    }\n    :host[data-press] {\n      background-color: var(--ngp-background-active);\n    }\n    /* Size variants */\n    :host[data-size=\"sm\"] {\n     font-size: var(--fontSize12);\n     height: var(--height-height28, 28px);\n     padding: var(--space0, 0) var(--space12, 12px);\n    }\n    :host[data-size=\"md\"],\n    :host:not([data-size]) {\n     font-size: var(--fontSize14);\n     height: var(--height-height36, 36px);\n     padding: var(--space4, 4px) var(--space16, 16px);\n    }\n    :host[data-size=\"lg\"] {\n     font-size: var(--fontSize16);\n     height: var(--height-height48, 48px);\n     padding: var(--space12, 12px) var(--space16, 16px);\n    }\n    :host[data-size=\"xl\"] {\n      height: 3.5rem;\n      padding-left: 1.5rem;\n      padding-right: 1.5rem;\n      font-size: 1.125rem;\n      --ng-icon__size: 1.125rem;\n    }\n    /* Variant styles */\n    :host[data-variant=\"primary\"],\n    :host:not([data-variant]) {\n        background-color: var(--button-primary-background-color);\n        color: var(--button-primary-font-color);\n    }\n    :host[data-variant=\"primary\"][data-hover],\n    :host:not([data-variant])[data-hover] {\n     background-color: var(--button-primary-background-color);\n    }\n    :host[data-variant=\"primary\"][data-press],\n    :host:not([data-variant])[data-press] {\n        background-color: var(--button-primary-background-color);\n    }\n    :host[data-variant=\"secondary\"] {\n      background-color: var(--button-secondary-background-color);\n      color: var(--button-secondary-font-color);\n       border: 1px solid var(--button-secondary-border-color, var(--accent-color));\n    }\n    :host[data-variant=\"secondary\"][data-hover] {\n      background-color: var(--button-secondary-background-color);\n    }\n    :host[data-variant=\"secondary\"][data-press] {\n      background-color: var(--button-secondary-background-color);\n    }\n    :host[data-variant=\"destructive\"] {\n      background-color: var(--ngp-destructive-background, #ef4444);\n      color: var(--ngp-destructive-text, #ffffff);\n      border: none;\n    }\n    :host[data-variant=\"destructive\"][data-hover] {\n      background-color: var(--ngp-destructive-background-hover, #dc2626);\n    }\n    :host[data-variant=\"destructive\"][data-press] {\n      background-color: var(--ngp-destructive-background-active, #b91c1c);\n    }\n    :host[data-variant=\"outline\"] {\n      background-color: transparent;\n      color: var(--ngp-text-primary);\n      border: 1px solid var(--ngp-outline-border, #e2e8f0);\n      box-shadow: none;\n    }\n    :host[data-variant=\"outline\"][data-hover] {\n      background-color: var(--ngp-background-hover);\n      border-color: var(--ngp-outline-border-hover, #cbd5e1);\n    }\n    :host[data-variant=\"outline\"][data-press] {\n      background-color: var(\n        --ngp-outline-background-active,\n        rgba(15, 23, 42, 0.1)\n      );\n    }\n    :host[data-variant=\"ghost\"] {\n      background-color: transparent;\n      color: var(--ngp-text-primary);\n      border: none;\n      box-shadow: none;\n    }\n    :host[data-variant=\"ghost\"][data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n    :host[data-variant=\"ghost\"][data-press] {\n      background-color: var(--ngp-background-active);\n    }\n    :host[data-variant=\"link\"] {\n      background-color: transparent;\n      color: var(--ngp-link-color, #3b82f6);\n      border: none;\n      box-shadow: none;\n      text-decoration: underline;\n      text-underline-offset: 4px;\n    }\n    :host[data-variant=\"link\"][data-hover] {\n      text-decoration-thickness: 2px;\n    }\n    :host[data-variant=\"primary\"]:host[disabled] {\n        background-color: var(--button-primary-disabled-background-color);\n        cursor: not-allowed;\n    }\n    :host[data-variant=\"secondary\"]:host[disabled] {\n        background-color: var(--button-secondary-disabled-background-color);\n        cursor: not-allowed;\n    }\n  `,\n})\nexport class Button {\n  /**\n   * The size of the button.\n   */\n  readonly size = input<ButtonSize>(\"md\");\n  /**\n   * The variant of the button.\n   */\n  readonly variant = input<ButtonVariant>(\"primary\");\n}","import { Component, input, signal } from \"@angular/core\";\n\n@Component({\n  selector: 'app-input',\n  template: `\n    <label class=\"ngp-field\">\n      <input\n        type=\"text\"\n        [value]=\"value()\"\n        (input)=\"onInput($event)\"\n        (focus)=\"focused.set(true)\"\n        (blur)=\"focused.set(false)\"\n        class=\"ngp-input\"\n        [attr.placeholder]=\"placeholder()\"\n      />\n      <span class=\"ngp-label\" [attr.data-active]=\"(value() || focused()) ? '' : null\">{{ label() }}</span>\n    </label>\n  `,\n  styles: `\n    :host { display: block; width: 100%; max-width: var(--width400); font-family: var(--fontFamily); }\n    .ngp-field { position: relative; display: block; }\n    .ngp-input {\n      width: 100%;\n      padding: 1rem 0.75rem 0.5rem 0.75rem;\n      font-size: var(--fontSize14, 14px);\n      border: 1px solid var(--ngp-outline-border, #e2e8f0);\n      border-radius: 8px;\n      background: var(--ngp-input-background, #fff);\n      box-sizing: border-box;\n      transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;\n    }\n    .ngp-input:hover {\n      border-color: var(--ngp-outline-border-hover, #cbd5e1);\n    }\n    .ngp-input:focus {\n      outline: none;\n      border-color: var(--shuttleGray);\n      box-shadow: 0 0 0 4px rgba(59,130,246,0.08);\n    }\n    .ngp-input:disabled {\n      background: var(--ngp-disabled-background, #f8fafc);\n      color: var(--ngp-text-muted, #9ca3af);\n      cursor: not-allowed;\n    }\n    .ngp-label {\n      position: absolute;\n      left: 0.75rem;\n      top: 0.8rem;\n      transform-origin: left top;\n      transition: transform 0.12s ease, top 0.12s ease, font-size 0.12s ease, color 0.12s ease;\n      color: var(--ngp-text-muted, #6b7280);\n      pointer-events: none;\n      background: transparent;\n      padding: 0 0.125rem;\n      font-weight: 500;\n    }\n    .ngp-label[data-active] {\n      transform: translateY(-0.85rem) scale(0.82);\n      top: 0.9rem;\n      font-weight: 600;\n      color: var(--midnightGray);\n      background: transparent;\n    }\n    /* error state when field has data-invalid attribute */\n    :host([data-invalid]) .ngp-input,\n    .ngp-field[data-invalid] .ngp-input {\n      border-color: var(--ngp-destructive-background, #ef4444);\n    }\n    :host([data-invalid]) .ngp-label,\n    .ngp-field[data-invalid] .ngp-label {\n      color: var(--ngp-destructive-background, #ef4444);\n    }\n  `,\n})\nexport class InputComponent {\n  /**\n   * The floating label text.\n   */\n  readonly label = input<string>(\"Label\");\n\n  /**\n   * Optional placeholder (kept for accessibility, primary label floats).\n   */\n  readonly placeholder = input<string>(\"\");\n\n  /**\n   * Internal value signal for the input's value.\n   */\n  readonly value = signal(\"\");\n\n  /**\n   * Focus state signal used to float the label when focused.\n   */\n  readonly focused = signal(false);\n\n  onInput(e: Event) {\n    const target = e.target as HTMLInputElement;\n    this.value.set(target.value);\n  }\n}\n","import { Component, input, signal } from \"@angular/core\";\nimport { NgFor, NgIf } from '@angular/common';\n\n/**\n * Simple select/dropdown component with floating label behavior similar to the input.\n * Accepts `options` as an array of strings or objects { value, label }.\n */\n@Component({\n  standalone: true,\n  imports: [NgFor, NgIf],\n  selector: 'app-select',\n  template: `\n    <label class=\"ngp-field\">\n      <select\n        class=\"ngp-select\"\n        (change)=\"onChange($event)\"\n        [value]=\"value()\"\n      >\n      <!-- placeholder option shown inside the native select when no value is selected; fall back to label text -->\n        <option *ngIf=\"(placeholder() || label())\" value=\"\">{{ placeholder() || label() }}</option>\n        <option *ngFor=\"let opt of options()\" [value]=\"opt.value ?? opt\">{{ opt.label ?? opt }}</option>\n      </select>\n      <!-- floating label is hidden by default; it becomes visible only when a value exists -->\n      <!-- <span class=\"ngp-label\" [attr.data-active]=\"(value()) ? '' : null\">{{ label() }}</span> -->\n    </label>\n  `,\n  styles: `\n    :host { display: block; width: 100%; max-width: var(--width400); font-family: var(--fontFamily); }\n    .ngp-field { position: relative;}\n    .ngp-select {\n      width: 100%;\n      padding: 0.875rem 0.75rem 0.5rem 0.75rem;\n      font-size: var(--fontSize14, 14px);\n      border: 1px solid var(--ngp-outline-border, #e2e8f0);\n      border-radius: 8px;\n      box-sizing: border-box;\n      color: var(--shuttleGray);\n      display: inline-flex;\n      flex-direction: column;\n      align-items: center;\n      gap: var(--space16, 16px);\n\n    }\n\n    option {\n      background-color: violet;\n    }\n\n    .ngp-select:focus { outline: none; border-color: var(--shuttleGray); box-shadow: 0 0 0 4px rgba(59,130,246,0.08); }\n    // .ngp-label {\n    //   position: absolute;\n    //   left: 0.75rem;\n    //   top: 0.85rem;\n    //   transform-origin: left top;\n    //   transition: transform 0.12s ease, top 0.12s ease, font-size 0.12s ease;\n    //   color: var(--ngp-text-muted, #6b7280);\n    //   pointer-events: none;\n    //   padding: 0 0.125rem;\n    //   font-weight: 500;\n    // }\n    // .ngp-label[data-active] {\n    //   transform: translateY(-0.85rem) scale(0.82);\n    //   top: 0.45rem;\n    //   font-weight: 600;\n    //   color: var(--accent-color, #3b82f6);\n    // }\n  `,\n})\nexport class SelectComponent {\n  readonly label = input<string>('Select');\n  readonly placeholder = input<string>('');\n  /** Accepts Array<string> or Array<{value,label}> */\n  readonly options = input<any[]>([]);\n  readonly value = signal('');\n\n  onChange(e: Event) {\n    const target = e.target as HTMLSelectElement;\n    const v = target.value;\n    this.value.set(v);\n  }\n}\n","import { Directive, Input, Output, EventEmitter, ElementRef, Renderer2, OnInit } from '@angular/core';\n\n@Directive({\n  selector: 'input[appPinEntry]',\n  standalone: true\n})\nexport class PinEntryDirective implements OnInit {\n  @Input() length: number = 4; // default 4 digits\n  @Input() theme: 'light' | 'dark' = 'light'; // theme switch\n  @Output() pinEntered = new EventEmitter<string>();\n\n  private svgCircles: SVGSVGElement[] = [];\n  private values: string[] = [];\n\n  constructor(private el: ElementRef, private renderer: Renderer2) {}\n\n  ngOnInit(): void {\n\n    // Inject directive-specific CSS once\n    this.injectStyles();\n\n    const parent = this.renderer.createElement('div');\n    this.renderer.addClass(parent, 'pin-svg-container');\n    this.renderer.addClass(parent, this.theme === 'dark' ? 'dark-theme' : 'light-theme');\n\n    // Remove original input\n    const originalInput = this.el.nativeElement;\n    this.renderer.insertBefore(originalInput.parentNode, parent, originalInput);\n    this.renderer.removeChild(originalInput.parentNode, originalInput);\n\n    // Hidden input to capture actual value\n    const hiddenInput = this.renderer.createElement('input');\n    this.renderer.setAttribute(hiddenInput, 'type', 'tel');\n    this.renderer.setStyle(hiddenInput, 'opacity', '0');\n    this.renderer.setStyle(hiddenInput, 'position', 'absolute');\n    this.renderer.setStyle(hiddenInput, 'pointer-events', 'none');\n    this.renderer.appendChild(parent, hiddenInput);\n\n    // Create SVG circles\n    for (let i = 0; i < this.length; i++) {\n      const svg = this.renderer.createElement('svg', 'svg');\n      this.renderer.setAttribute(svg, 'xmlns', 'http://www.w3.org/2000/svg');\n      this.renderer.setAttribute(svg, 'width', '40');\n      this.renderer.setAttribute(svg, 'height', '40');\n      this.renderer.setAttribute(svg, 'viewBox', '0 0 24 24');\n\n      const circle = this.renderer.createElement('circle', 'svg');\n      this.renderer.setAttribute(circle, 'cx', '12');\n      this.renderer.setAttribute(circle, 'cy', '12');\n      this.renderer.setAttribute(circle, 'r', '9.5');\n\n      // Stroke color depends on theme\n      this.renderer.setAttribute(circle, 'stroke', this.theme === 'dark' ? 'white' : 'black');\n      this.renderer.setAttribute(circle, 'fill', 'transparent');\n\n      this.renderer.appendChild(svg, circle);\n      this.renderer.addClass(svg, 'pin-svg');\n      this.renderer.appendChild(parent, svg);\n\n      this.svgCircles.push(svg);\n    }\n\n    // Listen for input\n    this.renderer.listen(hiddenInput, 'input', (event: any) => {\n      const val = event.target.value.replace(/\\D/g, '').slice(0, this.length);\n      this.values = val.split('');\n\n      // Update SVG fill\n      this.svgCircles.forEach((svg, idx) => {\n        const circle = svg.querySelector('circle');\n        if (circle) {\n          if (this.values[idx]) {\n            circle.setAttribute('fill', this.theme === 'dark' ? 'white' : 'black');\n          } else {\n            circle.setAttribute('fill', 'transparent');\n          }\n        }\n      });\n\n      // Emit PIN when fully entered\n      if (this.values.length === this.length) {\n        this.pinEntered.emit(this.values.join(''));\n      }\n    });\n\n    // Focus hidden input when container clicked\n    this.renderer.listen(parent, 'click', () => {\n      hiddenInput.focus();\n    });\n  }\n\n  private injectStyles() {\n    const style = this.renderer.createElement('style');\n    style.textContent = `\n    .pin-svg-container {\n        display: flex;\n        gap: 20px;\n        align-items: center;\n        justify-content: center;\n        margin: 20px;\n    }\n    .pin-svg {\n        cursor: pointer;\n    }\n    .light-theme {\n        color: #000;\n    }\n    .dark-theme {\n        background-color: #000;\n        color: #fff;\n    } `;\n    document.head.appendChild(style);\n  }\n}\n","import { Directive, Input, ElementRef, Renderer2, OnInit, HostListener } from '@angular/core';\n\n@Directive({\n  selector: 'input[appFloatingLabel]',\n  standalone: true\n})\nexport class FloatingLabelDirective implements OnInit {\n  @Input() label!: string;\n  private labelElement!: HTMLLabelElement;\n\n  constructor(private el: ElementRef, private renderer: Renderer2) {}\n\n  ngOnInit(): void {\n\n    // Inject directive-specific CSS once\n    this.injectStyles();\n\n    const parent = this.renderer.createElement('div');\n    this.renderer.addClass(parent, 'floating-label-container');\n\n    const input = this.el.nativeElement;\n    this.renderer.insertBefore(input.parentNode, parent, input);\n    this.renderer.appendChild(parent, input);\n\n    this.labelElement = this.renderer.createElement('label');\n    this.renderer.addClass(this.labelElement, 'floating-label');\n    this.labelElement.innerText = this.label;\n\n    this.renderer.appendChild(parent, this.labelElement);\n\n    if (input.value) {\n      this.renderer.addClass(this.labelElement, 'active');\n    }\n  }\n\n  @HostListener('focus')\n  onFocus() {\n    this.renderer.addClass(this.labelElement, 'active');\n  }\n\n  @HostListener('blur')\n  onBlur() {\n    if (!this.el.nativeElement.value) {\n      this.renderer.removeClass(this.labelElement, 'active');\n    }\n  }\n\n  private injectStyles() {\n    const style = this.renderer.createElement('style');\n    style.textContent = `\n\n      .floating-label-container {\n        position: relative;\n        width: var(--fullWidth);\n        display: flex;\n        align-items: center;\n      }\n\n      .floating-label-container input {\n        border: 1px solid var(--steelGray);\n        border-radius: 4px;\n        padding: 14px 10px 6px 10px; /* extra top padding for label space */\n        width: var(--fullWidth);\n        outline: none;\n        font-size: var(--fontSize16);\n      }\n\n      .floating-label-container input:focus {\n        border-color: var(--shuttleGray);\n      }\n\n      .floating-label {\n        position: absolute;\n        left: var(--space12);\n        top: auto;\n        color: #777;\n        font-size: var(--fontSize16);\n        transition: all 0.1s ease-out;\n        transition-property: transform;\n        pointer-events: none;\n\n      }\n\n      .floating-label.active {\n        top: 2px;\n        font-size: var(--fontSize12);\n        color: var(--midnightGray);\n      }\n\n\n    `;\n    document.head.appendChild(style);\n  }\n}\n","import { Directive, Input, ElementRef, Renderer2, OnInit, HostListener } from '@angular/core';\n\n@Directive({\n  selector: 'input[appFloatingLabelPin]',\n  standalone: true,\n})\nexport class FloatingLabelPinDirective implements OnInit {\n  @Input() label!: string;\n\n  private labelElement!: HTMLLabelElement;\n  private toggleButton!: HTMLButtonElement;\n  private isVisible = false;\n\n  constructor(private el: ElementRef, private renderer: Renderer2) {}\n\n  ngOnInit(): void {\n\n    // Inject directive-specific CSS once\n    this.injectStyles();\n    \n    const parent = this.renderer.createElement('div');\n    this.renderer.addClass(parent, 'floating-label-pin-container');\n\n    const input = this.el.nativeElement;\n    input.type = 'password'; // default hidden\n\n    this.renderer.insertBefore(input.parentNode, parent, input);\n    this.renderer.appendChild(parent, input);\n\n    // Create label\n    this.labelElement = this.renderer.createElement('label');\n    this.renderer.addClass(this.labelElement, 'floating-label');\n    this.labelElement.innerText = this.label;\n    this.renderer.appendChild(parent, this.labelElement);\n\n    // Create toggle button\n    this.toggleButton = this.renderer.createElement('button');\n    this.renderer.addClass(this.toggleButton, 'pin-toggle');\n    this.toggleButton.type = 'button';\n    this.toggleButton.innerText = 'Show';\n    this.renderer.appendChild(parent, this.toggleButton);\n\n    // Toggle logic\n    this.renderer.listen(this.toggleButton, 'click', () => {\n      this.isVisible = !this.isVisible;\n      input.type = this.isVisible ? 'text' : 'password';\n      this.toggleButton.innerText = this.isVisible ? 'Hide' : 'Show';\n    });\n\n    // Initial state\n    if (input.value) {\n      this.renderer.addClass(this.labelElement, 'active');\n    }\n  }\n\n  @HostListener('focus')\n  onFocus() {\n    this.renderer.addClass(this.labelElement, 'active');\n  }\n\n  @HostListener('blur')\n  onBlur() {\n    if (!this.el.nativeElement.value) {\n      this.renderer.removeClass(this.labelElement, 'active');\n    }\n  }\n\n  private injectStyles() {\n    const style = this.renderer.createElement('style');\n    style.textContent = `\n\n      .floating-label-pin-container {\n        position: relative;\n        width: var(--fullWidth);\n        display: flex;\n        justify-content: flex-end;\n        align-items: center;\n      }\n\n      .floating-label-pin-container input {\n        border: 1px solid #ccc;\n        border-radius: 4px;\n        padding: 14px 40px 6px 10px; /* space for toggle button */\n        /* width: 100%; */\n        font-size: var(--fontSize16);\n        outline: none;\n      }\n\n      .floating-label-pin-container input:focus {\n        border-color: var(--shuttleGray);\n      }\n\n      .floating-label {\n        position: absolute;\n        left: var(--fontSize12);\n        top: auto;\n        /* top: 12px; */\n        color: #777;\n        font-size: var(--fontSize16);\n        transition: all 0.1s ease-out;\n        transition-property: transform;\n        pointer-events: none;\n      }\n\n      .floating-label.active {\n        top: 2px;\n        font-size: var(--fontSize12);\n        color: var(--midnightGray);\n      }\n\n      .pin-toggle {\n        position: absolute;\n        background: none;\n        border: none;\n        color: var(--seaBlue);\n        cursor: pointer;\n        font-family: var(--fontFamily);\n        font-size: var(--fontSize14);\n        font-style: normal;\n        font-weight: var(--strong);\n      }\n\n\n    `;\n    document.head.appendChild(style);\n  }\n}\n","/*\n * Public API Surface of reusable-components\n */\n\nexport * from './lib/buttons/button.component';\nexport * from './lib/input/input.component';\nexport * from './lib/select/select.component';\nexport * from './lib/pin-entry/pin-entry.directive';\nexport * from './lib/floating-label/floating-label.directive';\nexport * from './lib/floating-label-pin/floating-label-pin.directive';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "everipackage-reusable-components",
+  "version": "1.0.0",
+  "peerDependencies": {
+    "@angular/common": "^21.1.0",
+    "@angular/core": "^21.1.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/reusable-components.mjs",
+  "typings": "types/reusable-components.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/reusable-components.d.ts",
+      "default": "./fesm2022/reusable-components.mjs"
+    }
+  }
+}

package/types/reusable-components.d.ts

@@ -0,0 +1,109 @@
+import * as i0 from '@angular/core';
+import { OnInit, EventEmitter, ElementRef, Renderer2 } from '@angular/core';
+import * as i1 from 'ng-primitives/button';
+
+/**
+ * The size of the button.
+ */
+type ButtonSize = "sm" | "md" | "lg" | "xl";
+/**
+ * The variant of the button.
+ */
+type ButtonVariant = "primary" | "secondary" | "destructive" | "outline" | "ghost" | "link";
+declare class Button {
+    /**
+     * The size of the button.
+     */
+    readonly size: i0.InputSignal<ButtonSize>;
+    /**
+     * The variant of the button.
+     */
+    readonly variant: i0.InputSignal<ButtonVariant>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Button, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Button, "button[app-button]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1.NgpButton; inputs: { "disabled": "disabled"; }; outputs: {}; }]>;
+}
+
+declare class InputComponent {
+    /**
+     * The floating label text.
+     */
+    readonly label: i0.InputSignal<string>;
+    /**
+     * Optional placeholder (kept for accessibility, primary label floats).
+     */
+    readonly placeholder: i0.InputSignal<string>;
+    /**
+     * Internal value signal for the input's value.
+     */
+    readonly value: i0.WritableSignal<string>;
+    /**
+     * Focus state signal used to float the label when focused.
+     */
+    readonly focused: i0.WritableSignal<boolean>;
+    onInput(e: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "app-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Simple select/dropdown component with floating label behavior similar to the input.
+ * Accepts `options` as an array of strings or objects { value, label }.
+ */
+declare class SelectComponent {
+    readonly label: i0.InputSignal<string>;
+    readonly placeholder: i0.InputSignal<string>;
+    /** Accepts Array<string> or Array<{value,label}> */
+    readonly options: i0.InputSignal<any[]>;
+    readonly value: i0.WritableSignal<string>;
+    onChange(e: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "app-select", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class PinEntryDirective implements OnInit {
+    private el;
+    private renderer;
+    length: number;
+    theme: 'light' | 'dark';
+    pinEntered: EventEmitter<string>;
+    private svgCircles;
+    private values;
+    constructor(el: ElementRef, renderer: Renderer2);
+    ngOnInit(): void;
+    private injectStyles;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PinEntryDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PinEntryDirective, "input[appPinEntry]", never, { "length": { "alias": "length"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; }, { "pinEntered": "pinEntered"; }, never, never, true, never>;
+}
+
+declare class FloatingLabelDirective implements OnInit {
+    private el;
+    private renderer;
+    label: string;
+    private labelElement;
+    constructor(el: ElementRef, renderer: Renderer2);
+    ngOnInit(): void;
+    onFocus(): void;
+    onBlur(): void;
+    private injectStyles;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FloatingLabelDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FloatingLabelDirective, "input[appFloatingLabel]", never, { "label": { "alias": "label"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+declare class FloatingLabelPinDirective implements OnInit {
+    private el;
+    private renderer;
+    label: string;
+    private labelElement;
+    private toggleButton;
+    private isVisible;
+    constructor(el: ElementRef, renderer: Renderer2);
+    ngOnInit(): void;
+    onFocus(): void;
+    onBlur(): void;
+    private injectStyles;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FloatingLabelPinDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FloatingLabelPinDirective, "input[appFloatingLabelPin]", never, { "label": { "alias": "label"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+export { Button, FloatingLabelDirective, FloatingLabelPinDirective, InputComponent, PinEntryDirective, SelectComponent };
+export type { ButtonSize, ButtonVariant };