@juligc99/loro-ui 0.0.8 → 0.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juligc99/loro-ui",
-  "version": "0.0.8",
+  "version": "0.0.13",
   "description": "Loro UI design system and Angular component library.",
   "author": "juligc99",
   "license": "MIT",
@@ -27,9 +27,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "peerDependencies": {
-    "@angular/animations": ">=21 <23",
     "@angular/aria": ">=21 <23",
-    "@angular/cdk": ">=21 <23",
     "@angular/common": ">=21 <23",
     "@angular/core": ">=21 <23",
     "@angular/forms": ">=21 <23",
@@ -38,29 +36,6 @@
     "@capacitor/haptics": ">=8 <9",
     "rxjs": "^7.8.0"
   },
-  "peerDependenciesMeta": {
-    "@angular/animations": {
-      "optional": true
-    },
-    "@angular/aria": {
-      "optional": true
-    },
-    "@angular/cdk": {
-      "optional": true
-    },
-    "@angular/forms": {
-      "optional": true
-    },
-    "@angular/router": {
-      "optional": true
-    },
-    "@capacitor/core": {
-      "optional": true
-    },
-    "@capacitor/haptics": {
-      "optional": true
-    }
-  },
   "dependencies": {
     "tslib": "^2.3.0"
   },
@@ -68,24 +43,9 @@
     "**/*.css",
     "**/*.scss"
   ],
+  "module": "fesm2022/juligc99-loro-ui.mjs",
+  "typings": "types/juligc99-loro-ui.d.ts",
   "exports": {
-    "./styles/breakpoints": {
-      "sass": "./styles/_breakpoints.scss",
-      "default": "./styles/_breakpoints.scss"
-    },
-    "./styles/breakpoints.scss": {
-      "sass": "./styles/_breakpoints.scss",
-      "default": "./styles/_breakpoints.scss"
-    },
-    "./design-tokens/loro-theme": {
-      "sass": "./design-tokens/loro-theme.scss",
-      "default": "./design-tokens/loro-theme.scss"
-    },
-    "./design-tokens/loro-theme.scss": {
-      "sass": "./design-tokens/loro-theme.scss",
-      "default": "./design-tokens/loro-theme.scss"
-    },
-    "./assets/*": "./assets/loro-ui/*",
     "./package.json": {
       "default": "./package.json"
     },
@@ -94,7 +54,5 @@
       "default": "./fesm2022/juligc99-loro-ui.mjs"
     }
   },
-  "module": "fesm2022/juligc99-loro-ui.mjs",
-  "typings": "types/juligc99-loro-ui.d.ts",
   "type": "module"
 }

package/styles/_breakpoints.scss

@@ -1,20 +1,16 @@
-// Public Loro UI Sass breakpoint API.
-// Import from apps with:
-// @use '@juligc99/loro-ui/styles/breakpoints' as bp;
-
-$phone-portrait-max: 599.98px !default;
-$tablet-min: 600px !default;
-$desktop-min: 1024px !default;
-$smart-tv-min: 1600px !default;
+$mobile-tablet-max: 1023.88px;
+$phone-max: 479.99px;
+$desktop-min: 1024px;
+$smart-tv-min: 1600px;
 
 @mixin on-phone-portrait {
-  @media (max-width: $phone-portrait-max) {
+  @media (max-width: $phone-max) and (orientation: portrait) {
     @content;
   }
 }
 
 @mixin on-mobile-tablet-landscape {
-  @media (min-width: $tablet-min) and (max-width: 1023.98px) and (orientation: landscape) {
+  @media (min-width: $phone-max) and (max-width: $mobile-tablet-max) and (orientation: landscape) {
     @content;
   }
 }

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

@@ -933,6 +933,7 @@ declare class LoroAppNav {
     protected readonly mobileSliderPosition: _angular_core.Signal<number>;
     protected readonly isMobileDragging: _angular_core.Signal<boolean>;
     protected readonly mobileItemCount: _angular_core.Signal<number>;
+    protected readonly selectedMobileItemId: _angular_core.Signal<string>;
     protected isMobileItemVisualActive(index: number): boolean;
     onMainItemClick(item: LoroAppNavItem): void;
     protected onMobileItemClick(item: LoroAppNavItem): void;
@@ -1028,8 +1029,9 @@ declare class LoroAssistantCard {
     actionLabel: _angular_core.InputSignal<string>;
     actionIcon: _angular_core.InputSignal<LoroIconName | null>;
     actionVariant: _angular_core.InputSignal<LoroButtonVariant>;
+    action: _angular_core.OutputEmitterRef<void>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroAssistantCard, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroAssistantCard, "loro-assistant-card", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": true; "isSignal": true; }; "imageName": { "alias": "imageName"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "actionIcon": { "alias": "actionIcon"; "required": false; "isSignal": true; }; "actionVariant": { "alias": "actionVariant"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroAssistantCard, "loro-assistant-card", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": true; "isSignal": true; }; "imageName": { "alias": "imageName"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "actionIcon": { "alias": "actionIcon"; "required": false; "isSignal": true; }; "actionVariant": { "alias": "actionVariant"; "required": false; "isSignal": true; }; }, { "action": "action"; }, never, never, true, never>;
 }
 
 declare class LoroAuthSocialButton {
@@ -1440,22 +1442,25 @@ declare class LoroAuthField implements FormValueControl<string> {
     autocomplete: _angular_core.InputSignal<string>;
     selected: _angular_core.InputSignal<boolean>;
     state: _angular_core.InputSignal<LoroAuthFieldState>;
+    errorMessage: _angular_core.InputSignal<string>;
+    errors: _angular_core.InputSignal<readonly WithOptionalFieldTree<ValidationError>[]>;
+    invalid: _angular_core.InputSignal<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>[]>;
+    valueChange: _angular_core.OutputEmitterRef<string>;
     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 updateValue(value: string): void;
+    protected markAsTouched(): void;
     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; }; "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>;
+    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; }; "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; }; }, { "value": "valueChange"; "touched": "touchedChange"; "valueChange": "valueChange"; }, never, never, true, never>;
 }
 
 declare class LoroCheckbox implements FormCheckboxControl {
@@ -1488,15 +1493,13 @@ declare class LoroDropdown implements FormValueControl<string> {
     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;
+    touched: _angular_core.ModelSignal<boolean>;
+    valueChange: _angular_core.OutputEmitterRef<string>;
+    protected updateValue(value: string): void;
+    protected markAsTouched(): 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; }; "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>;
+    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; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; "valueChange": "valueChange"; }, never, never, true, never>;
 }
 
 declare class LoroFilterChip {
@@ -1560,7 +1563,6 @@ 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>;
@@ -1587,15 +1589,14 @@ declare class LoroSegmentedControl implements FormValueControl<string> {
     value: _angular_core.ModelSignal<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 errorText: _angular_core.Signal<string>;
-    protected readonly showError: _angular_core.Signal<boolean>;
-    protected select(value: string): void;
+    touched: _angular_core.ModelSignal<boolean>;
+    valueChange: _angular_core.OutputEmitterRef<string>;
+    protected selectValue(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": 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>;
+    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; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; "valueChange": "valueChange"; }, never, never, true, never>;
 }
 
 declare class LoroSelect {
@@ -1616,36 +1617,32 @@ declare class LoroTextArea implements FormValueControl<string> {
     label: _angular_core.InputSignal<string>;
     placeholder: _angular_core.InputSignal<string>;
     value: _angular_core.ModelSignal<string>;
-    maxLength: _angular_core.InputSignal<number | undefined>;
+    maxLength: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
     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>;
+    touched: _angular_core.ModelSignal<boolean>;
+    valueChange: _angular_core.OutputEmitterRef<string>;
+    protected updateValue(value: string): void;
+    protected markAsTouched(): void;
     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; }; "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>;
+    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; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; "valueChange": "valueChange"; }, never, never, true, never>;
 }
 
 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>[]>;
+    touched: _angular_core.ModelSignal<boolean>;
     ariaLabel: _angular_core.InputSignal<string>;
-    protected readonly errorText: _angular_core.Signal<string>;
-    protected readonly showError: _angular_core.Signal<boolean>;
+    checkedChange: _angular_core.OutputEmitterRef<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; }; "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>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroToggle, "loro-toggle", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "touched": "touchedChange"; "checkedChange": "checkedChange"; }, never, never, true, never>;
 }
 
 declare class LoroUpload {