@juligc99/loro-ui 0.0.1 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juligc99/loro-ui",
-  "version": "0.0.1",
+  "version": "0.0.6",
   "description": "Loro UI design system and Angular component library.",
   "author": "juligc99",
   "license": "MIT",

package/types/juligc99-loro-ui.d.ts

@@ -4,7 +4,7 @@ import { LoroButtonVariant as LoroButtonVariant$1 } from '@loro-ui/components/co
 import { LoroImageName } from '@loro-ui/components/resources/loro-image/loro-image';
 import { LoroBadgeVariant as LoroBadgeVariant$1 } from '@loro-ui/components/components/loro-badge/loro-badge';
 import * as _juligc99_loro_ui from '@juligc99/loro-ui';
-import { FormCheckboxControl, WithOptionalFieldTree, ValidationError, FormValueControl } from '@angular/forms/signals';
+import { FormValueControl, WithOptionalFieldTree, ValidationError, FormCheckboxControl } from '@angular/forms/signals';
 import { LoroIconName as LoroIconName$1, LoroImageName as LoroImageName$1 } from '@loro-ui/assets/loro-assets.generated';
 export { LORO_ICON_ASSETS, LORO_ICON_LEGACY_NAMES, LORO_ICON_PATHS, LORO_IMAGE_ASSETS, LORO_IMAGE_LEGACY_NAMES, LORO_IMAGE_PATHS, LoroIconAsset, LoroIconAssetName, LoroIconLegacyName, LoroIconName, LoroImageAsset, LoroImageAssetName, LoroImageLegacyName, LoroImageName } from '@loro-ui/assets/loro-assets.generated';
 
@@ -91,7 +91,7 @@ declare class LoroAuthSocialButton {
     outline: _angular_core.InputSignal<boolean>;
     selected: _angular_core.InputSignal<boolean>;
     iconSize: _angular_core.InputSignal<number>;
-    protected readonly nativeIconSrc: _angular_core.Signal<"assets/loro-ui/icons/apple.svg" | "assets/loro-ui/icons/google.svg" | "">;
+    protected readonly nativeIconSrc: _angular_core.Signal<"" | "assets/loro-ui/icons/apple.svg" | "assets/loro-ui/icons/google.svg">;
     protected releaseFocus(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroAuthSocialButton, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroAuthSocialButton, "loro-auth-social-button", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "outline": { "alias": "outline"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
@@ -537,26 +537,31 @@ declare class LoroToast {
 }
 
 type LoroAuthFieldState = 'default' | 'error';
-declare class LoroAuthField {
+declare class LoroAuthField implements FormValueControl<string> {
     icon: _angular_core.InputSignal<LoroIconName>;
     label: _angular_core.InputSignal<string>;
     placeholder: _angular_core.InputSignal<string>;
-    value: _angular_core.InputSignal<string>;
-    type: _angular_core.InputSignal<"email" | "text" | "password">;
+    value: _angular_core.ModelSignal<string>;
+    type: _angular_core.InputSignal<"text" | "email" | "password">;
     autocomplete: _angular_core.InputSignal<string>;
     selected: _angular_core.InputSignal<boolean>;
     state: _angular_core.InputSignal<LoroAuthFieldState>;
+    disabled: _angular_core.InputSignal<boolean>;
+    readonly: _angular_core.InputSignal<boolean>;
+    required: _angular_core.InputSignal<boolean>;
+    invalid: _angular_core.InputSignal<boolean>;
+    touched: _angular_core.ModelSignal<boolean>;
     errorMessage: _angular_core.InputSignal<string>;
-    valueChange: _angular_core.OutputEmitterRef<string>;
+    errors: _angular_core.InputSignal<readonly WithOptionalFieldTree<ValidationError>[]>;
     protected readonly errorId: string;
     protected readonly errorText: _angular_core.Signal<string>;
     protected readonly hasError: _angular_core.Signal<boolean>;
     protected readonly passwordVisible: _angular_core.WritableSignal<boolean>;
     protected showToggle(): boolean;
-    protected resolvedType(): "email" | "text" | "password";
+    protected resolvedType(): "text" | "email" | "password";
     protected toggleVisibility(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroAuthField, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroAuthField, "loro-auth-field", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroAuthField, "loro-auth-field", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; }, never, never, true, never>;
 }
 
 declare class LoroCheckbox implements FormCheckboxControl {
@@ -580,14 +585,24 @@ interface LoroDropdownOption {
     label: string;
     value: string;
 }
-declare class LoroDropdown {
+declare class LoroDropdown implements FormValueControl<string> {
     label: _angular_core.InputSignal<string>;
     placeholder: _angular_core.InputSignal<string>;
-    value: _angular_core.InputSignal<string>;
+    value: _angular_core.ModelSignal<string>;
     options: _angular_core.InputSignal<readonly LoroDropdownOption[]>;
-    valueChange: _angular_core.OutputEmitterRef<string>;
+    disabled: _angular_core.InputSignal<boolean>;
+    readonly: _angular_core.InputSignal<boolean>;
+    required: _angular_core.InputSignal<boolean>;
+    invalid: _angular_core.InputSignal<boolean>;
+    touched: _angular_core.ModelSignal<boolean>;
+    errorMessage: _angular_core.InputSignal<string>;
+    errors: _angular_core.InputSignal<readonly WithOptionalFieldTree<ValidationError>[]>;
+    protected readonly errorId: string;
+    protected readonly errorText: _angular_core.Signal<string>;
+    protected readonly showError: _angular_core.Signal<boolean>;
+    protected select(value: string): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroDropdown, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroDropdown, "loro-dropdown", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroDropdown, "loro-dropdown", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; }, never, never, true, never>;
 }
 
 declare class LoroFilterChip {
@@ -608,10 +623,10 @@ declare class LoroInput implements FormValueControl<string> {
     placeholder: _angular_core.InputSignal<string>;
     helperText: _angular_core.InputSignal<string>;
     value: _angular_core.ModelSignal<string>;
-    type: _angular_core.InputSignal<"email" | "search" | "text" | "tel" | "password">;
+    type: _angular_core.InputSignal<"text" | "email" | "tel" | "password" | "search">;
     name: _angular_core.InputSignal<string>;
     autocomplete: _angular_core.InputSignal<string>;
-    inputmode: _angular_core.InputSignal<"" | "email" | "search" | "text" | "none" | "tel" | "url" | "numeric" | "decimal">;
+    inputmode: _angular_core.InputSignal<"" | "text" | "email" | "tel" | "search" | "none" | "url" | "numeric" | "decimal">;
     icon: _angular_core.InputSignal<LoroIconName | null>;
     iconSize: _angular_core.InputSignal<number>;
     trailingIcon: _angular_core.InputSignal<LoroIconName | null>;
@@ -628,8 +643,8 @@ declare class LoroInput implements FormValueControl<string> {
     touched: _angular_core.ModelSignal<boolean>;
     unit: _angular_core.InputSignal<string>;
     step: _angular_core.InputSignal<number>;
-    min: _angular_core.InputSignal<number | undefined>;
-    max: _angular_core.InputSignal<number | undefined>;
+    min: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    max: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
     trailingClick: _angular_core.OutputEmitterRef<void>;
     private readonly control;
     protected readonly errorId: string;
@@ -651,6 +666,7 @@ declare class LoroInput implements FormValueControl<string> {
     protected stepperInputMaxLength(): number;
     protected sanitizeStepperInput(event: Event): void;
     private clampValue;
+    private coerceLimit;
     private sanitizeValue;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroInput, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroInput, "loro-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "inputmode": { "alias": "inputmode"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; "isSignal": true; }; "trailingIconSize": { "alias": "trailingIconSize"; "required": false; "isSignal": true; }; "trailingAriaLabel": { "alias": "trailingAriaLabel"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; "trailingClick": "trailingClick"; }, never, never, true, never>;
@@ -672,12 +688,20 @@ interface LoroSegmentedOption {
     label: string;
     value: string;
 }
-declare class LoroSegmentedControl {
+declare class LoroSegmentedControl implements FormValueControl<string> {
     options: _angular_core.InputSignal<readonly LoroSegmentedOption[]>;
-    value: _angular_core.InputSignal<string>;
-    valueChange: _angular_core.OutputEmitterRef<string>;
+    value: _angular_core.ModelSignal<string>;
+    disabled: _angular_core.InputSignal<boolean>;
+    readonly: _angular_core.InputSignal<boolean>;
+    invalid: _angular_core.InputSignal<boolean>;
+    touched: _angular_core.ModelSignal<boolean>;
+    errorMessage: _angular_core.InputSignal<string>;
+    errors: _angular_core.InputSignal<readonly WithOptionalFieldTree<ValidationError>[]>;
+    protected readonly errorText: _angular_core.Signal<string>;
+    protected readonly showError: _angular_core.Signal<boolean>;
+    protected select(value: string): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroSegmentedControl, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroSegmentedControl, "loro-segmented-control", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroSegmentedControl, "loro-segmented-control", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; }, never, never, true, never>;
 }
 
 declare class LoroSelect {
@@ -694,24 +718,40 @@ declare class LoroSelect {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroSelect, "loro-select", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "meta": { "alias": "meta"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; }, { "action": "action"; }, never, never, true, never>;
 }
 
-declare class LoroTextArea {
+declare class LoroTextArea implements FormValueControl<string> {
     label: _angular_core.InputSignal<string>;
     placeholder: _angular_core.InputSignal<string>;
-    value: _angular_core.InputSignal<string>;
-    maxLength: _angular_core.InputSignal<number | null>;
-    valueChange: _angular_core.OutputEmitterRef<string>;
+    value: _angular_core.ModelSignal<string>;
+    maxLength: _angular_core.InputSignal<number | undefined>;
+    disabled: _angular_core.InputSignal<boolean>;
+    readonly: _angular_core.InputSignal<boolean>;
+    required: _angular_core.InputSignal<boolean>;
+    invalid: _angular_core.InputSignal<boolean>;
+    touched: _angular_core.ModelSignal<boolean>;
+    errorMessage: _angular_core.InputSignal<string>;
+    errors: _angular_core.InputSignal<readonly WithOptionalFieldTree<ValidationError>[]>;
+    protected readonly errorId: string;
+    protected readonly errorText: _angular_core.Signal<string>;
+    protected readonly showError: _angular_core.Signal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroTextArea, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroTextArea, "loro-text-area", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroTextArea, "loro-text-area", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; }, never, never, true, never>;
 }
 
-declare class LoroToggle {
-    checked: _angular_core.InputSignal<boolean>;
+declare class LoroToggle implements FormCheckboxControl {
+    checked: _angular_core.ModelSignal<boolean>;
     disabled: _angular_core.InputSignal<boolean>;
+    readonly: _angular_core.InputSignal<boolean>;
+    required: _angular_core.InputSignal<boolean>;
+    invalid: _angular_core.InputSignal<boolean>;
+    touched: _angular_core.ModelSignal<boolean>;
+    errorMessage: _angular_core.InputSignal<string>;
+    errors: _angular_core.InputSignal<readonly WithOptionalFieldTree<ValidationError>[]>;
     ariaLabel: _angular_core.InputSignal<string>;
-    checkedChange: _angular_core.OutputEmitterRef<boolean>;
+    protected readonly errorText: _angular_core.Signal<string>;
+    protected readonly showError: _angular_core.Signal<boolean>;
     protected toggle(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroToggle, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroToggle, "loro-toggle", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "checkedChange": "checkedChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroToggle, "loro-toggle", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "touched": "touchedChange"; }, never, never, true, never>;
 }
 
 declare class LoroUpload {