@w2p-ui/kit 0.1.1 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@w2p-ui/kit",
-  "version": "0.1.1",
+  "version": "0.1.4",
   "peerDependencies": {
     "@angular/common": "^21.2.0",
     "@angular/core": "^21.2.0"
@@ -31,6 +31,26 @@
     "./components/button": {
       "types": "./types/w2p-ui-kit-components-button.d.ts",
       "default": "./fesm2022/w2p-ui-kit-components-button.mjs"
+    },
+    "./components/color-alert": {
+      "types": "./types/w2p-ui-kit-components-color-alert.d.ts",
+      "default": "./fesm2022/w2p-ui-kit-components-color-alert.mjs"
+    },
+    "./components/input": {
+      "types": "./types/w2p-ui-kit-components-input.d.ts",
+      "default": "./fesm2022/w2p-ui-kit-components-input.mjs"
+    },
+    "./components/label": {
+      "types": "./types/w2p-ui-kit-components-label.d.ts",
+      "default": "./fesm2022/w2p-ui-kit-components-label.mjs"
+    },
+    "./components/loader": {
+      "types": "./types/w2p-ui-kit-components-loader.d.ts",
+      "default": "./fesm2022/w2p-ui-kit-components-loader.mjs"
+    },
+    "./components/otp-input": {
+      "types": "./types/w2p-ui-kit-components-otp-input.d.ts",
+      "default": "./fesm2022/w2p-ui-kit-components-otp-input.mjs"
     }
   },
   "type": "module"

package/styles/fonts.scss

@@ -0,0 +1,62 @@
+@font-face {
+  font-family: 'Manrope';
+  src: url('/assets/fonts/manrope/Manrope-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Manrope';
+  src: url('/assets/fonts/manrope/Manrope-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Manrope';
+  src: url('/assets/fonts/manrope/Manrope-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Manrope';
+  src: url('/assets/fonts/manrope/Manrope-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'SF Pro Display';
+  font-style: normal;
+  font-weight: 100;
+  src: url('/assets/fonts/sf-pro/SF-Pro-Display-Light.otf') format('opentype');
+}
+
+@font-face {
+  font-family: 'SF Pro Display';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf') format('opentype');
+}
+
+@font-face {
+  font-family: 'SF Pro Display';
+  font-style: normal;
+  font-weight: 500;
+  src: url('/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf') format('opentype');
+}
+
+@font-face {
+  font-family: 'SF Pro Display';
+  font-style: normal;
+  font-weight: 600;
+  src: url('/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf') format('opentype');
+}
+
+@font-face {
+  font-family: 'SF Pro Display';
+  font-style: normal;
+  font-weight: 700;
+  src: url('/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf') format('opentype');
+}

package/styles/index.scss

@@ -0,0 +1 @@
+@import './fonts.scss';

package/types/w2p-ui-kit-components-color-alert.d.ts

@@ -0,0 +1,13 @@
+import * as _angular_core from '@angular/core';
+
+type W2pColorAlertVarinat = 'success' | 'info' | 'warning' | 'error' | 'warning' | 'default';
+declare class W2pColorAlert {
+    readonly label: _angular_core.InputSignal<string>;
+    readonly variant: _angular_core.InputSignal<W2pColorAlertVarinat>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<W2pColorAlert, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<W2pColorAlert, "w2p-color-alert", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["[icon]", "*"], true, never>;
+}
+
+export { W2pColorAlert };
+export type { W2pColorAlertVarinat };

package/types/w2p-ui-kit-components-input.d.ts

@@ -0,0 +1,31 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
+
+declare class W2pInput {
+    readonly inputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
+    readonly picture: _angular_core.InputSignal<string>;
+    readonly type: _angular_core.InputSignal<string>;
+    readonly trim: _angular_core.InputSignal<boolean>;
+    readonly inputMode: _angular_core.InputSignal<string>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly autofocus: _angular_core.InputSignal<boolean>;
+    readonly disabledInput: _angular_core.InputSignal<boolean>;
+    readonly invalid: _angular_core.InputSignal<boolean>;
+    readonly value: _angular_core.WritableSignal<string>;
+    readonly disabled: _angular_core.WritableSignal<boolean>;
+    readonly typeToggling: _angular_core.WritableSignal<string>;
+    private onChange;
+    private onTouched;
+    constructor();
+    protected toggleType(): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    onInput(event: Event): void;
+    writeValue(obj: string): void;
+    onBlur(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<W2pInput, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<W2pInput, "w2p-input", never, { "picture": { "alias": "picture"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "trim": { "alias": "trim"; "required": false; "isSignal": true; }; "inputMode": { "alias": "inputMode"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabledInput"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { W2pInput };

package/types/w2p-ui-kit-components-label.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from '@angular/core';
+
+declare class W2pLabel {
+    static ɵfac: i0.ɵɵFactoryDeclaration<W2pLabel, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<W2pLabel, "w2p-label", never, {}, {}, never, ["[icon]", "[label]"], true, never>;
+}
+
+export { W2pLabel };

package/types/w2p-ui-kit-components-loader.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from '@angular/core';
+
+declare class W2pLoader {
+    static ɵfac: i0.ɵɵFactoryDeclaration<W2pLoader, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<W2pLoader, "w2p-loader", never, {}, {}, never, never, true, never>;
+}
+
+export { W2pLoader };

package/types/w2p-ui-kit-components-otp-input.d.ts

@@ -0,0 +1,34 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
+
+declare class W2pOtpInput {
+    readonly length: _angular_core.InputSignal<number>;
+    readonly disabledInput: _angular_core.InputSignal<boolean>;
+    readonly invalidInput: _angular_core.InputSignal<boolean>;
+    readonly autofocus: _angular_core.InputSignal<boolean>;
+    readonly complete: _angular_core.OutputEmitterRef<string>;
+    readonly cells: _angular_core.Signal<readonly ElementRef<HTMLInputElement>[]>;
+    readonly digits: _angular_core.WritableSignal<string[]>;
+    readonly disabled: _angular_core.WritableSignal<boolean>;
+    readonly invalid: _angular_core.WritableSignal<boolean>;
+    private readonly ngControl;
+    private readonly controlStatus;
+    private onChange;
+    private onTouched;
+    constructor();
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    setInvalid(isInvalid: boolean): void;
+    writeValue(obj: string): void;
+    onInput(event: Event, index: number): void;
+    onKeydown(event: KeyboardEvent, index: number): void;
+    onPaste(event: ClipboardEvent, index: number): void;
+    onBlur(): void;
+    private focusCell;
+    private emitValue;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<W2pOtpInput, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<W2pOtpInput, "w2p-otp-input", never, { "length": { "alias": "length"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabledInput"; "required": false; "isSignal": true; }; "invalidInput": { "alias": "invalidInput"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; }, { "complete": "complete"; }, never, never, true, never>;
+}
+
+export { W2pOtpInput };

package/types/w2p-ui-kit-components.d.ts

@@ -1,4 +1,5 @@
 import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
 
 declare class W2pButton {
     readonly onClick: _angular_core.OutputEmitterRef<void>;
@@ -18,4 +19,81 @@ declare class W2pActionButton {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<W2pActionButton, "w2p-action-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, ["[icon]", "*"], true, never>;
 }
 
-export { W2pActionButton, W2pButton };
+declare class W2pInput {
+    readonly inputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
+    readonly picture: _angular_core.InputSignal<string>;
+    readonly type: _angular_core.InputSignal<string>;
+    readonly trim: _angular_core.InputSignal<boolean>;
+    readonly inputMode: _angular_core.InputSignal<string>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly autofocus: _angular_core.InputSignal<boolean>;
+    readonly disabledInput: _angular_core.InputSignal<boolean>;
+    readonly invalid: _angular_core.InputSignal<boolean>;
+    readonly value: _angular_core.WritableSignal<string>;
+    readonly disabled: _angular_core.WritableSignal<boolean>;
+    readonly typeToggling: _angular_core.WritableSignal<string>;
+    private onChange;
+    private onTouched;
+    constructor();
+    protected toggleType(): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    onInput(event: Event): void;
+    writeValue(obj: string): void;
+    onBlur(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<W2pInput, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<W2pInput, "w2p-input", never, { "picture": { "alias": "picture"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "trim": { "alias": "trim"; "required": false; "isSignal": true; }; "inputMode": { "alias": "inputMode"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabledInput"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class W2pLoader {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<W2pLoader, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<W2pLoader, "w2p-loader", never, {}, {}, never, never, true, never>;
+}
+
+type W2pColorAlertVarinat = 'success' | 'info' | 'warning' | 'error' | 'warning' | 'default';
+declare class W2pColorAlert {
+    readonly label: _angular_core.InputSignal<string>;
+    readonly variant: _angular_core.InputSignal<W2pColorAlertVarinat>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<W2pColorAlert, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<W2pColorAlert, "w2p-color-alert", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["[icon]", "*"], true, never>;
+}
+
+declare class W2pOtpInput {
+    readonly length: _angular_core.InputSignal<number>;
+    readonly disabledInput: _angular_core.InputSignal<boolean>;
+    readonly invalidInput: _angular_core.InputSignal<boolean>;
+    readonly autofocus: _angular_core.InputSignal<boolean>;
+    readonly complete: _angular_core.OutputEmitterRef<string>;
+    readonly cells: _angular_core.Signal<readonly ElementRef<HTMLInputElement>[]>;
+    readonly digits: _angular_core.WritableSignal<string[]>;
+    readonly disabled: _angular_core.WritableSignal<boolean>;
+    readonly invalid: _angular_core.WritableSignal<boolean>;
+    private readonly ngControl;
+    private readonly controlStatus;
+    private onChange;
+    private onTouched;
+    constructor();
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    setInvalid(isInvalid: boolean): void;
+    writeValue(obj: string): void;
+    onInput(event: Event, index: number): void;
+    onKeydown(event: KeyboardEvent, index: number): void;
+    onPaste(event: ClipboardEvent, index: number): void;
+    onBlur(): void;
+    private focusCell;
+    private emitValue;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<W2pOtpInput, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<W2pOtpInput, "w2p-otp-input", never, { "length": { "alias": "length"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabledInput"; "required": false; "isSignal": true; }; "invalidInput": { "alias": "invalidInput"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; }, { "complete": "complete"; }, never, never, true, never>;
+}
+
+declare class W2pLabel {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<W2pLabel, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<W2pLabel, "w2p-label", never, {}, {}, never, ["[icon]", "[label]"], true, never>;
+}
+
+export { W2pActionButton, W2pButton, W2pColorAlert, W2pInput, W2pLabel, W2pLoader, W2pOtpInput };
+export type { W2pColorAlertVarinat };

package/types/w2p-ui-kit.d.ts

@@ -1,4 +1,5 @@
 import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
 
 declare class W2pButton {
     readonly onClick: _angular_core.OutputEmitterRef<void>;
@@ -18,4 +19,81 @@ declare class W2pActionButton {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<W2pActionButton, "w2p-action-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, ["[icon]", "*"], true, never>;
 }
 
-export { W2pActionButton, W2pButton };
+declare class W2pInput {
+    readonly inputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
+    readonly picture: _angular_core.InputSignal<string>;
+    readonly type: _angular_core.InputSignal<string>;
+    readonly trim: _angular_core.InputSignal<boolean>;
+    readonly inputMode: _angular_core.InputSignal<string>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly autofocus: _angular_core.InputSignal<boolean>;
+    readonly disabledInput: _angular_core.InputSignal<boolean>;
+    readonly invalid: _angular_core.InputSignal<boolean>;
+    readonly value: _angular_core.WritableSignal<string>;
+    readonly disabled: _angular_core.WritableSignal<boolean>;
+    readonly typeToggling: _angular_core.WritableSignal<string>;
+    private onChange;
+    private onTouched;
+    constructor();
+    protected toggleType(): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    onInput(event: Event): void;
+    writeValue(obj: string): void;
+    onBlur(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<W2pInput, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<W2pInput, "w2p-input", never, { "picture": { "alias": "picture"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "trim": { "alias": "trim"; "required": false; "isSignal": true; }; "inputMode": { "alias": "inputMode"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabledInput"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class W2pLoader {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<W2pLoader, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<W2pLoader, "w2p-loader", never, {}, {}, never, never, true, never>;
+}
+
+type W2pColorAlertVarinat = 'success' | 'info' | 'warning' | 'error' | 'warning' | 'default';
+declare class W2pColorAlert {
+    readonly label: _angular_core.InputSignal<string>;
+    readonly variant: _angular_core.InputSignal<W2pColorAlertVarinat>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<W2pColorAlert, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<W2pColorAlert, "w2p-color-alert", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["[icon]", "*"], true, never>;
+}
+
+declare class W2pOtpInput {
+    readonly length: _angular_core.InputSignal<number>;
+    readonly disabledInput: _angular_core.InputSignal<boolean>;
+    readonly invalidInput: _angular_core.InputSignal<boolean>;
+    readonly autofocus: _angular_core.InputSignal<boolean>;
+    readonly complete: _angular_core.OutputEmitterRef<string>;
+    readonly cells: _angular_core.Signal<readonly ElementRef<HTMLInputElement>[]>;
+    readonly digits: _angular_core.WritableSignal<string[]>;
+    readonly disabled: _angular_core.WritableSignal<boolean>;
+    readonly invalid: _angular_core.WritableSignal<boolean>;
+    private readonly ngControl;
+    private readonly controlStatus;
+    private onChange;
+    private onTouched;
+    constructor();
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    setInvalid(isInvalid: boolean): void;
+    writeValue(obj: string): void;
+    onInput(event: Event, index: number): void;
+    onKeydown(event: KeyboardEvent, index: number): void;
+    onPaste(event: ClipboardEvent, index: number): void;
+    onBlur(): void;
+    private focusCell;
+    private emitValue;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<W2pOtpInput, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<W2pOtpInput, "w2p-otp-input", never, { "length": { "alias": "length"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabledInput"; "required": false; "isSignal": true; }; "invalidInput": { "alias": "invalidInput"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; }, { "complete": "complete"; }, never, never, true, never>;
+}
+
+declare class W2pLabel {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<W2pLabel, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<W2pLabel, "w2p-label", never, {}, {}, never, ["[icon]", "[label]"], true, never>;
+}
+
+export { W2pActionButton, W2pButton, W2pColorAlert, W2pInput, W2pLabel, W2pLoader, W2pOtpInput };
+export type { W2pColorAlertVarinat };