@juligc99/loro-ui 0.0.8 → 0.0.13

package/fesm2022/juligc99-loro-ui.mjs

@@ -1239,9 +1239,7 @@ class LoroHapticsService {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroHapticsService, decorators: [{
             type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
+            args: [{ providedIn: 'root' }]
         }] });
 
 class LoroButton {
@@ -1385,6 +1383,7 @@ class LoroAppNav {
     mobileSliderPosition = computed(() => this.draggedMobilePosition() ?? this.mobileItemIndexToVisualSlot(this.selectedMobileIndex()), ...(ngDevMode ? [{ debugName: "mobileSliderPosition" }] : /* istanbul ignore next */ []));
     isMobileDragging = computed(() => this.draggedMobilePosition() !== null, ...(ngDevMode ? [{ debugName: "isMobileDragging" }] : /* istanbul ignore next */ []));
     mobileItemCount = computed(() => this.mobileItems().length, ...(ngDevMode ? [{ debugName: "mobileItemCount" }] : /* istanbul ignore next */ []));
+    selectedMobileItemId = computed(() => this.mobileItems()[this.selectedMobileIndex()]?.id ?? '', ...(ngDevMode ? [{ debugName: "selectedMobileItemId" }] : /* istanbul ignore next */ []));
     isMobileItemVisualActive(index) {
         // Mientras se arrastra, ningún icono cambia visualmente.
         // El nuevo activo solo se refleja cuando el gesto termina y el padre
@@ -1529,11 +1528,11 @@ class LoroAppNav {
         this.activePointerId = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroAppNav, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroAppNav, isStandalone: true, selector: "loro-app-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, utilityItems: { classPropertyName: "utilityItems", publicName: "utilityItems", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, showUtilityItems: { classPropertyName: "showUtilityItems", publicName: "showUtilityItems", isSignal: true, isRequired: false, transformFunction: null }, compactDesktop: { classPropertyName: "compactDesktop", publicName: "compactDesktop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", utilityItemClick: "utilityItemClick", navItemClick: "navItemClick" }, ngImport: i0, template: "<aside class=\"loro-app-nav\">\n  <div class=\"loro-app-nav__desktop\">\n    <div class=\"loro-app-nav__surface\" [class.loro-app-nav__surface--compact]=\"compactDesktop()\">\n      <div class=\"loro-app-nav__brand\">\n        <loro-image\n          class=\"loro-app-nav__brand-image\"\n          name=\"image-loro-apaisado\"\n          alt=\"AlLoro\"\n          width=\"10rem\"\n          height=\"auto\"\n        />\n      </div>\n\n      <nav class=\"loro-app-nav__nav\" [attr.aria-label]=\"ariaLabel()\">\n        @for (item of desktopItems(); track item.id) {\n          <loro-button\n            class=\"loro-app-nav__item\"\n            [class.loro-app-nav__item--active]=\"item.active\"\n            [class.loro-app-nav__item--disabled]=\"item.disabled\"\n            [class.loro-app-nav__item--logout]=\"item.id === 'logout'\"\n            [text]=\"item.label\"\n            [icon]=\"item.icon\"\n            iconMode=\"with-icon\"\n            iconColor=\"default\"\n            variant=\"navigation\"\n            [selected]=\"!!item.active\"\n            [color]=\"item.id === 'logout' ? 'danger' : 'primary'\"\n            type=\"button\"\n            [fullWidth]=\"true\"\n            [ariaLabel]=\"item.label\"\n            [disabled]=\"!!item.disabled\"\n            (buttonClick)=\"onMainItemClick(item)\"\n          >\n            @if (item.badge !== null && item.badge !== undefined && item.badge !== '') {\n              <span class=\"loro-app-nav__badge\">{{ item.badge }}</span>\n            }\n          </loro-button>\n        }\n      </nav>\n\n      <div class=\"loro-app-nav__spacer\"></div>\n\n      @if (showUtilityItems() && utilityItems().length > 0) {\n        <div class=\"loro-app-nav__divider\" aria-hidden=\"true\"></div>\n\n        <nav\n          class=\"loro-app-nav__nav loro-app-nav__nav--utility\"\n          aria-label=\"Navegaci\u00F3n secundaria\"\n        >\n          @for (item of utilityItems(); track item.id) {\n            <loro-button\n              class=\"loro-app-nav__item\"\n              [class.loro-app-nav__item--active]=\"item.active\"\n              [class.loro-app-nav__item--disabled]=\"item.disabled\"\n              [class.loro-app-nav__item--logout]=\"item.id === 'logout'\"\n              [text]=\"item.label\"\n              [icon]=\"item.icon\"\n              iconMode=\"with-icon\"\n              iconColor=\"default\"\n              variant=\"navigation\"\n              [selected]=\"!!item.active\"\n              [color]=\"item.id === 'logout' ? 'danger' : 'primary'\"\n              type=\"button\"\n              [fullWidth]=\"true\"\n              [ariaLabel]=\"item.label\"\n              [disabled]=\"!!item.disabled\"\n              (buttonClick)=\"onUtilityItemClick(item)\"\n            >\n              @if (item.badge !== null && item.badge !== undefined && item.badge !== '') {\n                <span class=\"loro-app-nav__badge\">{{ item.badge }}</span>\n              }\n            </loro-button>\n          }\n        </nav>\n      }\n    </div>\n  </div>\n\n  <nav\n    ngToolbar\n    class=\"loro-app-nav__mobile\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [style.--loro-mobile-slider-position]=\"mobileSliderPosition()\"\n    [class.loro-app-nav__mobile--dragging]=\"isMobileDragging()\"\n    [class.loro-app-nav__mobile--with-labels]=\"true\"\n    [style.--loro-mobile-item-count]=\"mobileItemCount()\"\n    [style.--loro-mobile-visual-slot-count]=\"mobileVisualSlotCount()\"\n    (pointerdown)=\"onMobilePointerDown($event)\"\n    (pointermove)=\"onMobilePointerMove($event)\"\n    (pointerup)=\"onMobilePointerUp($event)\"\n    (pointercancel)=\"onMobilePointerCancel($event)\"\n  >\n    <span class=\"loro-app-nav__mobile-slider\" aria-hidden=\"true\"></span>\n\n    @for (item of mobileItems(); track item.id; let index = $index) {\n      <button\n        ngToolbarWidget\n        type=\"button\"\n        class=\"loro-app-nav__mobile-item\"\n        [style.grid-column]=\"mobileItemGridColumn(index)\"\n        [class.loro-app-nav__mobile-item--active]=\"isMobileItemVisualActive(index)\"\n        [class.loro-app-nav__mobile-item--disabled]=\"item.disabled\"\n        [attr.aria-label]=\"item.label\"\n        [attr.aria-current]=\"item.active ? 'page' : null\"\n        [value]=\"item.id\"\n        [disabled]=\"!!item.disabled\"\n        (click)=\"onMobileItemClick(item)\"\n      >\n        <loro-icon\n          class=\"loro-app-nav__mobile-icon\"\n          [name]=\"item.icon\"\n          [size]=\"24\"\n          color=\"default\"\n          [alt]=\"item.label\"\n        />\n        <span class=\"loro-app-nav__mobile-label\">{{ item.label }}</span>\n      </button>\n    }\n  </nav>\n</aside>\n", styles: [":host{display:block;width:100%;height:100%}.loro-app-nav{width:100%;height:100%}.loro-app-nav__desktop{display:none;height:100%}.loro-app-nav__surface{width:100%;max-width:none;display:flex;height:100%;flex-direction:column;gap:1.1rem;padding:1.75rem 1.35rem 1.5rem;background:var(--loro-nav-desktop-surface, var(--loro-shell-header-surface));border:1px solid var(--loro-nav-desktop-border, var(--loro-border-soft))}html[data-theme=dark] .loro-app-nav__surface{background:var(--loro-nav-desktop-surface, rgba(24, 28, 32, .78));border-color:var(--loro-nav-desktop-border, rgba(255, 255, 255, .08));box-shadow:var(--loro-nav-desktop-shadow, none)}.loro-app-nav__surface--compact{gap:.9rem;padding:1.25rem 1rem 1.15rem}.loro-app-nav__surface--compact .loro-app-nav__brand{min-height:3.65rem;padding-bottom:1.2rem}.loro-app-nav__surface--compact .loro-app-nav__item{--loro-button-min-height: 3.75rem}.loro-app-nav__brand{display:flex;align-items:center;min-height:4.25rem;padding:.35rem .55rem .85rem}.loro-app-nav__brand-image{display:block}.loro-app-nav__nav{display:flex;flex-direction:column;gap:.75rem}.loro-app-nav__item{--loro-button-min-height: 4.25rem;--loro-button-padding: 1rem 1.2rem;--loro-button-radius: 1rem;--loro-button-font-size: 1rem;--loro-button-background: var(--loro-nav-button-background, transparent);--loro-button-border-color: var(--loro-nav-button-border, transparent);--loro-button-color: var(--loro-nav-button-text, var(--loro-text-strong));--loro-button-hover-background: var(--loro-nav-button-hover-bg, var(--loro-nav-hover-bg));--loro-button-hover-border-color: var(--loro-nav-button-hover-border, transparent);--loro-button-hover-color: var(--loro-nav-button-hover-text, var(--loro-nav-button-text, var(--loro-text-strong)));--loro-button-hover-shadow: var(--loro-nav-button-hover-shadow, none);display:block;width:100%;color:var(--loro-nav-button-text, var(--loro-text-strong))}.loro-app-nav__item--active{--loro-button-selected-background: var(--loro-nav-button-active-bg, var(--loro-nav-active-bg));--loro-button-selected-border-color: var(--loro-nav-button-active-border, var(--loro-nav-active-border));--loro-button-selected-color: var(--loro-nav-button-active-text, var(--loro-primary-500));--loro-button-selected-shadow: var(--loro-nav-button-active-shadow, inset .35rem 0 0 var(--loro-primary-500))}.loro-app-nav__item--logout{--loro-button-background: var(--loro-nav-button-danger-bg, var(--loro-danger-surface));--loro-button-border-color: var(--loro-nav-button-danger-border, transparent);--loro-button-color: var(--loro-nav-button-danger-text, var(--loro-danger-text));--loro-button-hover-background: var(--loro-nav-button-danger-bg, var(--loro-danger-surface));--loro-button-hover-border-color: var(--loro-nav-button-danger-border, transparent);--loro-button-hover-color: var(--loro-nav-button-danger-text, var(--loro-danger-text));--loro-button-shadow: none;--loro-button-hover-shadow: none}.loro-app-nav__item--disabled,.loro-app-nav__mobile-item--disabled{cursor:not-allowed;opacity:.45}.loro-app-nav__label,.loro-app-nav__mobile-label{color:inherit}.loro-app-nav__label{font-size:.98rem;font-weight:700;color:inherit}.loro-app-nav__badge{margin-left:auto;min-width:1.5rem;padding:.125rem .5rem;border-radius:999px;background:#ffffff24;color:inherit;font-size:.75rem;font-weight:700;text-align:center;box-shadow:inset 0 1px #ffffff14}.loro-app-nav__spacer{flex:1}.loro-app-nav__divider{height:1px;margin:.65rem 0 .9rem;background:var(--loro-nav-divider)}.loro-app-nav__nav--utility{margin-top:auto}.loro-app-nav__mobile{position:fixed;left:50%;bottom:max(1.25rem,env(safe-area-inset-bottom,0px) * .28);z-index:70;display:grid;grid-template-columns:repeat(var(--loro-mobile-visual-slot-count, 4),minmax(0,1fr));width:min(76vw - max(1rem,var(--app-shell-mobile-gutter, 1rem) * .75),19rem);gap:0;margin:0;transform:translate(-50%);padding:0;overflow:hidden;border:1px solid var(--loro-nav-mobile-border, rgba(43, 35, 80, .08));border-radius:999px;isolation:isolate;background:var(--loro-nav-mobile-glass-surface, rgba(255, 255, 255, .68));box-shadow:var(--loro-nav-mobile-surface-shadow, 0 8px 24px rgba(28, 32, 48, .1));backdrop-filter:blur(var(--loro-nav-mobile-glass-blur, 24px)) saturate(1.32);-webkit-backdrop-filter:blur(var(--loro-nav-mobile-glass-blur, 24px)) saturate(1.32);touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:background .22s ease,border-color .22s ease,box-shadow .22s ease}.loro-app-nav__mobile-item{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:3.58rem;gap:.18rem;padding:.35rem .15rem;border:0;border-radius:999px;outline:0;background:transparent;color:var(--loro-nav-mobile-icon, var(--loro-text));cursor:pointer;appearance:none;-webkit-appearance:none;opacity:1;visibility:visible;transition:transform .22s cubic-bezier(.22,1,.36,1);-webkit-tap-highlight-color:transparent}.loro-app-nav__mobile-item:active,.loro-app-nav__mobile-item--active,.loro-app-nav__mobile-item:hover{background:transparent;color:var(--loro-nav-mobile-icon, var(--loro-text))}.loro-app-nav__mobile-item:focus-visible{outline:2px solid var(--loro-focus-ring);outline-offset:-4px}.loro-app-nav__mobile-item:disabled{cursor:not-allowed;opacity:.45}.loro-app-nav__mobile-icon{position:relative;z-index:3;display:inline-flex;align-items:center;justify-content:center;color:inherit!important;opacity:1!important;visibility:visible!important;pointer-events:none;mix-blend-mode:normal;transform:scale(.94);transform-origin:center}.loro-app-nav__mobile-item ::ng-deep .loro-icon,.loro-app-nav__mobile-item ::ng-deep svg{display:block!important;color:inherit!important;opacity:1!important;visibility:visible!important;pointer-events:none!important}.loro-app-nav__mobile-item ::ng-deep .loro-icon__mask{background-color:currentColor!important;opacity:1!important;visibility:visible!important}.loro-app-nav__mobile-item ::ng-deep svg [fill]:not([fill=none]){fill:currentColor!important}.loro-app-nav__mobile-item ::ng-deep svg [stroke]:not([stroke=none]){stroke:currentColor!important}.loro-app-nav__mobile-slider{position:absolute;inset-block:0;left:0;z-index:1;width:calc(100% / var(--loro-mobile-visual-slot-count, 4));border:0;border-radius:999px;background:var(--loro-nav-mobile-indicator, linear-gradient(180deg, rgba(227, 229, 233, .96) 0%, rgba(214, 217, 223, .92) 100%));box-shadow:var(--loro-nav-mobile-indicator-shadow, inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 5px rgba(21, 28, 42, .06));transform:translate3d(calc(var(--loro-mobile-slider-position, 0) * 100%),0,0);will-change:transform;transition:transform .26s cubic-bezier(.22,1,.36,1);pointer-events:none}.loro-app-nav__mobile--dragging .loro-app-nav__mobile-slider{transition:none}.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-icon,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item ::ng-deep .loro-icon,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item ::ng-deep svg{color:var(--loro-nav-mobile-icon, var(--loro-text))!important;opacity:1!important;visibility:visible!important}.loro-app-nav__mobile-label{display:block;max-width:100%;overflow:hidden;color:inherit;font-size:.625rem;font-weight:700;line-height:1.1;text-align:center;text-overflow:ellipsis;white-space:nowrap;opacity:0;transform:translateY(.08rem);transition:opacity .18s ease,transform .18s ease}.loro-app-nav__mobile--with-labels{width:min(92vw - max(1rem,var(--app-shell-mobile-gutter, 1rem) * .75),24rem)}.loro-app-nav__mobile--with-labels .loro-app-nav__mobile-item{min-height:4.4rem;padding-top:.7rem}.loro-app-nav__mobile--with-labels .loro-app-nav__mobile-label{opacity:1;transform:translateY(0)}@media(max-width:599.98px){:host{height:auto}.loro-app-nav{height:auto;padding:0}.loro-app-nav__desktop{height:auto}}@media(min-width:1024px){:host,.loro-app-nav,.loro-app-nav__desktop{height:100%}.loro-app-nav__desktop{display:block}.loro-app-nav__mobile{display:none}}@media(prefers-reduced-motion:reduce){.loro-app-nav__mobile-slider,.loro-app-nav__mobile-item,.loro-app-nav__mobile-item ::ng-deep .loro-icon{transition-duration:1ms}}\n"], dependencies: [{ kind: "directive", type: Toolbar, selector: "[ngToolbar]", inputs: ["orientation", "softDisabled", "disabled", "wrap", "values"], outputs: ["valuesChange"], exportAs: ["ngToolbar"] }, { kind: "directive", type: ToolbarWidget, selector: "[ngToolbarWidget]", inputs: ["id", "disabled", "value"], exportAs: ["ngToolbarWidget"] }, { kind: "component", type: LoroImage, selector: "loro-image", inputs: ["name", "alt", "size", "width", "height", "fit"] }, { kind: "component", type: LoroButton, selector: "loro-button", inputs: ["label", "text", "icon", "iconContent", "iconMode", "iconSize", "iconButtonSize", "iconColor", "socialMobileCompact", "selected", "variant", "typeButton", "color", "size", "fullWidth", "buttonWidth", "disabled", "loading", "type", "formId", "ariaLabel", "ariaDescription"], outputs: ["buttonClick", "change", "sanChange"] }, { kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroAppNav, isStandalone: true, selector: "loro-app-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, utilityItems: { classPropertyName: "utilityItems", publicName: "utilityItems", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, showUtilityItems: { classPropertyName: "showUtilityItems", publicName: "showUtilityItems", isSignal: true, isRequired: false, transformFunction: null }, compactDesktop: { classPropertyName: "compactDesktop", publicName: "compactDesktop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", utilityItemClick: "utilityItemClick", navItemClick: "navItemClick" }, ngImport: i0, template: "<aside class=\"loro-app-nav\">\n  <div class=\"loro-app-nav__desktop\">\n    <div class=\"loro-app-nav__surface\" [class.loro-app-nav__surface--compact]=\"compactDesktop()\">\n      <div class=\"loro-app-nav__brand\">\n        <loro-image\n          class=\"loro-app-nav__brand-image\"\n          name=\"image-loro-apaisado\"\n          alt=\"AlLoro\"\n          width=\"10rem\"\n          height=\"auto\"\n        />\n      </div>\n\n      <nav class=\"loro-app-nav__nav\" [attr.aria-label]=\"ariaLabel()\">\n        @for (item of desktopItems(); track item.id) {\n          <loro-button\n            class=\"loro-app-nav__item\"\n            [class.loro-app-nav__item--active]=\"item.active\"\n            [class.loro-app-nav__item--disabled]=\"item.disabled\"\n            [class.loro-app-nav__item--logout]=\"item.id === 'logout'\"\n            [text]=\"item.label\"\n            [icon]=\"item.icon\"\n            iconMode=\"with-icon\"\n            iconColor=\"default\"\n            variant=\"navigation\"\n            [selected]=\"!!item.active\"\n            [color]=\"item.id === 'logout' ? 'danger' : 'primary'\"\n            type=\"button\"\n            [fullWidth]=\"true\"\n            [ariaLabel]=\"item.label\"\n            [disabled]=\"!!item.disabled\"\n            (buttonClick)=\"onMainItemClick(item)\"\n          >\n            @if (item.badge !== null && item.badge !== undefined && item.badge !== '') {\n              <span class=\"loro-app-nav__badge\">{{ item.badge }}</span>\n            }\n          </loro-button>\n        }\n      </nav>\n\n      <div class=\"loro-app-nav__spacer\"></div>\n\n      @if (showUtilityItems() && utilityItems().length > 0) {\n        <div class=\"loro-app-nav__divider\" aria-hidden=\"true\"></div>\n\n        <nav\n          class=\"loro-app-nav__nav loro-app-nav__nav--utility\"\n          aria-label=\"Navegaci\u00F3n secundaria\"\n        >\n          @for (item of utilityItems(); track item.id) {\n            <loro-button\n              class=\"loro-app-nav__item\"\n              [class.loro-app-nav__item--active]=\"item.active\"\n              [class.loro-app-nav__item--disabled]=\"item.disabled\"\n              [class.loro-app-nav__item--logout]=\"item.id === 'logout'\"\n              [text]=\"item.label\"\n              [icon]=\"item.icon\"\n              iconMode=\"with-icon\"\n              iconColor=\"default\"\n              variant=\"navigation\"\n              [selected]=\"!!item.active\"\n              [color]=\"item.id === 'logout' ? 'danger' : 'primary'\"\n              type=\"button\"\n              [fullWidth]=\"true\"\n              [ariaLabel]=\"item.label\"\n              [disabled]=\"!!item.disabled\"\n              (buttonClick)=\"onUtilityItemClick(item)\"\n            >\n              @if (item.badge !== null && item.badge !== undefined && item.badge !== '') {\n                <span class=\"loro-app-nav__badge\">{{ item.badge }}</span>\n              }\n            </loro-button>\n          }\n        </nav>\n      }\n    </div>\n  </div>\n\n  <nav\n    ngToolbar\n    class=\"loro-app-nav__mobile\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [style.--loro-mobile-slider-position]=\"mobileSliderPosition()\"\n    [class.loro-app-nav__mobile--dragging]=\"isMobileDragging()\"\n    [class.loro-app-nav__mobile--with-labels]=\"true\"\n    [style.--loro-mobile-item-count]=\"mobileItemCount()\"\n    [style.--loro-mobile-visual-slot-count]=\"mobileVisualSlotCount()\"\n    (pointerdown)=\"onMobilePointerDown($event)\"\n    (pointermove)=\"onMobilePointerMove($event)\"\n    (pointerup)=\"onMobilePointerUp($event)\"\n    (pointercancel)=\"onMobilePointerCancel($event)\"\n  >\n    <span\n      class=\"loro-app-nav__mobile-slider\"\n      [class.loro-app-nav__mobile-slider--scan]=\"selectedMobileItemId() === 'scan'\"\n      aria-hidden=\"true\"></span>\n\n    @for (item of mobileItems(); track item.id; let index = $index) {\n      <button\n        ngToolbarWidget\n        type=\"button\"\n        class=\"loro-app-nav__mobile-item\"\n        [style.grid-column]=\"mobileItemGridColumn(index)\"\n        [class.loro-app-nav__mobile-item--active]=\"isMobileItemVisualActive(index)\"\n        [class.loro-app-nav__mobile-item--scan-active]=\"item.id === 'scan' && isMobileItemVisualActive(index)\"\n        [class.loro-app-nav__mobile-item--disabled]=\"item.disabled\"\n        [attr.aria-label]=\"item.label\"\n        [attr.aria-current]=\"item.active ? 'page' : null\"\n        [value]=\"item.id\"\n        [disabled]=\"!!item.disabled\"\n        (click)=\"onMobileItemClick(item)\"\n      >\n        <loro-icon\n          class=\"loro-app-nav__mobile-icon\"\n          [name]=\"item.icon\"\n          [size]=\"24\"\n          color=\"default\"\n          [alt]=\"item.label\"\n        />\n        <span class=\"loro-app-nav__mobile-label\">{{ item.label }}</span>\n      </button>\n    }\n  </nav>\n</aside>\n", styles: [":host{display:block;width:100%;height:100%}.loro-app-nav{width:100%;height:100%}.loro-app-nav__desktop{display:none;height:100%}.loro-app-nav__surface{width:100%;max-width:none;display:flex;height:100%;flex-direction:column;gap:1.1rem;padding:1.75rem 1.35rem 1.5rem;background:var(--loro-nav-desktop-surface, var(--loro-shell-header-surface));border:1px solid var(--loro-nav-desktop-border, var(--loro-border-soft))}html[data-theme=dark] .loro-app-nav__surface{background:var(--loro-nav-desktop-surface, rgba(24, 28, 32, .78));border-color:var(--loro-nav-desktop-border, rgba(255, 255, 255, .08));box-shadow:var(--loro-nav-desktop-shadow, none)}.loro-app-nav__surface--compact{gap:.9rem;padding:1.25rem 1rem 1.15rem}.loro-app-nav__surface--compact .loro-app-nav__brand{min-height:3.65rem;padding-bottom:1.2rem}.loro-app-nav__surface--compact .loro-app-nav__item{--loro-button-min-height: 3.75rem}.loro-app-nav__brand{display:flex;align-items:center;min-height:4.25rem;padding:.35rem .55rem .85rem}.loro-app-nav__brand-image{display:block}.loro-app-nav__nav{display:flex;flex-direction:column;gap:.75rem}.loro-app-nav__item{--loro-button-min-height: 4.25rem;--loro-button-padding: 1rem 1.2rem;--loro-button-radius: 1rem;--loro-button-font-size: 1rem;--loro-button-background: var(--loro-nav-button-background, transparent);--loro-button-border-color: var(--loro-nav-button-border, transparent);--loro-button-color: var(--loro-nav-button-text, var(--loro-text-strong));--loro-button-hover-background: var(--loro-nav-button-hover-bg, var(--loro-nav-hover-bg));--loro-button-hover-border-color: var(--loro-nav-button-hover-border, transparent);--loro-button-hover-color: var(--loro-nav-button-hover-text, var(--loro-nav-button-text, var(--loro-text-strong)));--loro-button-hover-shadow: var(--loro-nav-button-hover-shadow, none);display:block;width:100%;color:var(--loro-nav-button-text, var(--loro-text-strong))}.loro-app-nav__item--active{--loro-button-selected-background: var(--loro-nav-button-active-bg, var(--loro-nav-active-bg));--loro-button-selected-border-color: var(--loro-nav-button-active-border, var(--loro-nav-active-border));--loro-button-selected-color: var(--loro-nav-button-active-text, var(--loro-primary-500));--loro-button-selected-shadow: var(--loro-nav-button-active-shadow, inset .35rem 0 0 var(--loro-primary-500))}.loro-app-nav__item--logout{--loro-button-background: var(--loro-nav-button-danger-bg, var(--loro-danger-surface));--loro-button-border-color: var(--loro-nav-button-danger-border, transparent);--loro-button-color: var(--loro-nav-button-danger-text, var(--loro-danger-text));--loro-button-hover-background: var(--loro-nav-button-danger-bg, var(--loro-danger-surface));--loro-button-hover-border-color: var(--loro-nav-button-danger-border, transparent);--loro-button-hover-color: var(--loro-nav-button-danger-text, var(--loro-danger-text));--loro-button-shadow: none;--loro-button-hover-shadow: none}.loro-app-nav__item--disabled,.loro-app-nav__mobile-item--disabled{cursor:not-allowed;opacity:.45}.loro-app-nav__label,.loro-app-nav__mobile-label{color:inherit}.loro-app-nav__label{font-size:.98rem;font-weight:700;color:inherit}.loro-app-nav__badge{margin-left:auto;min-width:1.5rem;padding:.125rem .5rem;border-radius:999px;background:#ffffff24;color:inherit;font-size:.75rem;font-weight:700;text-align:center;box-shadow:inset 0 1px #ffffff14}.loro-app-nav__spacer{flex:1}.loro-app-nav__divider{height:1px;margin:.65rem 0 .9rem;background:var(--loro-nav-divider)}.loro-app-nav__nav--utility{margin-top:auto}.loro-app-nav__mobile{position:fixed;left:50%;bottom:max(1.25rem,env(safe-area-inset-bottom,0px) * .28);z-index:70;display:grid;grid-template-columns:repeat(var(--loro-mobile-visual-slot-count, 4),minmax(0,1fr));width:min(76vw - max(1rem,var(--app-shell-mobile-gutter, 1rem) * .75),19rem);gap:0;margin:0;transform:translate(-50%);padding:0;overflow:hidden;border:1px solid var(--loro-nav-mobile-border, rgba(43, 35, 80, .08));border-radius:999px;isolation:isolate;background:var(--loro-nav-mobile-glass-surface, rgba(255, 255, 255, .68));box-shadow:var(--loro-nav-mobile-surface-shadow, 0 8px 24px rgba(28, 32, 48, .1));backdrop-filter:blur(var(--loro-nav-mobile-glass-blur, 24px)) saturate(1.32);-webkit-backdrop-filter:blur(var(--loro-nav-mobile-glass-blur, 24px)) saturate(1.32);touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:background .22s ease,border-color .22s ease,box-shadow .22s ease}.loro-app-nav__mobile-item{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:3.58rem;gap:.18rem;padding:.35rem .15rem;border:0;border-radius:999px;outline:0;background:transparent;color:var(--loro-nav-mobile-icon, var(--loro-text));cursor:pointer;appearance:none;-webkit-appearance:none;opacity:1;visibility:visible;transition:transform .22s cubic-bezier(.22,1,.36,1);-webkit-tap-highlight-color:transparent}.loro-app-nav__mobile-item:active,.loro-app-nav__mobile-item--active,.loro-app-nav__mobile-item:hover{background:transparent;color:var(--loro-nav-mobile-icon, var(--loro-text))}.loro-app-nav__mobile-item:focus-visible{outline:2px solid var(--loro-focus-ring);outline-offset:-4px}.loro-app-nav__mobile-item:disabled{cursor:not-allowed;opacity:.45}.loro-app-nav__mobile-icon{position:relative;z-index:3;display:inline-flex;align-items:center;justify-content:center;color:inherit!important;opacity:1!important;visibility:visible!important;pointer-events:none;mix-blend-mode:normal;transform:scale(.94);transform-origin:center}.loro-app-nav__mobile-item ::ng-deep .loro-icon,.loro-app-nav__mobile-item ::ng-deep svg{display:block!important;color:inherit!important;opacity:1!important;visibility:visible!important;pointer-events:none!important}.loro-app-nav__mobile-item ::ng-deep .loro-icon__mask{background-color:currentColor!important;opacity:1!important;visibility:visible!important}.loro-app-nav__mobile-item ::ng-deep svg [fill]:not([fill=none]){fill:currentColor!important}.loro-app-nav__mobile-item ::ng-deep svg [stroke]:not([stroke=none]){stroke:currentColor!important}.loro-app-nav__mobile-slider{position:absolute;inset-block:0;left:0;z-index:1;width:calc(100% / var(--loro-mobile-visual-slot-count, 4));border:0;border-radius:999px;background:var(--loro-nav-mobile-indicator, linear-gradient(180deg, rgba(227, 229, 233, .96) 0%, rgba(214, 217, 223, .92) 100%));box-shadow:var(--loro-nav-mobile-indicator-shadow, inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 5px rgba(21, 28, 42, .06));transform:translate3d(calc(var(--loro-mobile-slider-position, 0) * 100%),0,0);will-change:transform;transition:transform .26s cubic-bezier(.22,1,.36,1);pointer-events:none}.loro-app-nav__mobile--dragging .loro-app-nav__mobile-slider{transition:none}.loro-app-nav__mobile-slider--scan{background:var(--loro-nav-mobile-scan-indicator, linear-gradient(180deg, rgba(132, 83, 255, .98) 0%, rgba(94, 47, 224, .96) 100%));box-shadow:var(--loro-nav-mobile-scan-indicator-shadow, inset 0 1px 0 rgba(255, 255, 255, .38), 0 .85rem 1.65rem rgba(108, 60, 255, .28))}.loro-app-nav__mobile-item--scan-active{color:var(--loro-nav-mobile-scan-active-color, #fff)!important}.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-icon,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item ::ng-deep .loro-icon,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item ::ng-deep svg{color:var(--loro-nav-mobile-icon, var(--loro-text))!important;opacity:1!important;visibility:visible!important}.loro-app-nav__mobile-label{display:block;max-width:100%;overflow:hidden;color:inherit;font-size:.625rem;font-weight:700;line-height:1.1;text-align:center;text-overflow:ellipsis;white-space:nowrap;opacity:0;transform:translateY(.08rem);transition:opacity .18s ease,transform .18s ease}.loro-app-nav__mobile--with-labels{width:min(92vw - max(1rem,var(--app-shell-mobile-gutter, 1rem) * .75),24rem)}.loro-app-nav__mobile--with-labels .loro-app-nav__mobile-item{min-height:4.4rem;padding-top:.7rem}.loro-app-nav__mobile--with-labels .loro-app-nav__mobile-label{opacity:1;transform:translateY(0)}@media(max-width:479.99px)and (orientation:portrait){:host{height:auto}.loro-app-nav{height:auto;padding:0}.loro-app-nav__desktop{height:auto}}@media(min-width:1024px){:host,.loro-app-nav,.loro-app-nav__desktop{height:100%}.loro-app-nav__desktop{display:block}.loro-app-nav__mobile{display:none}}@media(prefers-reduced-motion:reduce){.loro-app-nav__mobile-slider,.loro-app-nav__mobile-item,.loro-app-nav__mobile-item ::ng-deep .loro-icon{transition-duration:1ms}}\n"], dependencies: [{ kind: "directive", type: Toolbar, selector: "[ngToolbar]", inputs: ["orientation", "softDisabled", "disabled", "wrap", "values"], outputs: ["valuesChange"], exportAs: ["ngToolbar"] }, { kind: "directive", type: ToolbarWidget, selector: "[ngToolbarWidget]", inputs: ["id", "disabled", "value"], exportAs: ["ngToolbarWidget"] }, { kind: "component", type: LoroImage, selector: "loro-image", inputs: ["name", "alt", "size", "width", "height", "fit"] }, { kind: "component", type: LoroButton, selector: "loro-button", inputs: ["label", "text", "icon", "iconContent", "iconMode", "iconSize", "iconButtonSize", "iconColor", "socialMobileCompact", "selected", "variant", "typeButton", "color", "size", "fullWidth", "buttonWidth", "disabled", "loading", "type", "formId", "ariaLabel", "ariaDescription"], outputs: ["buttonClick", "change", "sanChange"] }, { kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroAppNav, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-app-nav', standalone: true, imports: [Toolbar, ToolbarWidget, LoroImage, LoroButton, LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<aside class=\"loro-app-nav\">\n  <div class=\"loro-app-nav__desktop\">\n    <div class=\"loro-app-nav__surface\" [class.loro-app-nav__surface--compact]=\"compactDesktop()\">\n      <div class=\"loro-app-nav__brand\">\n        <loro-image\n          class=\"loro-app-nav__brand-image\"\n          name=\"image-loro-apaisado\"\n          alt=\"AlLoro\"\n          width=\"10rem\"\n          height=\"auto\"\n        />\n      </div>\n\n      <nav class=\"loro-app-nav__nav\" [attr.aria-label]=\"ariaLabel()\">\n        @for (item of desktopItems(); track item.id) {\n          <loro-button\n            class=\"loro-app-nav__item\"\n            [class.loro-app-nav__item--active]=\"item.active\"\n            [class.loro-app-nav__item--disabled]=\"item.disabled\"\n            [class.loro-app-nav__item--logout]=\"item.id === 'logout'\"\n            [text]=\"item.label\"\n            [icon]=\"item.icon\"\n            iconMode=\"with-icon\"\n            iconColor=\"default\"\n            variant=\"navigation\"\n            [selected]=\"!!item.active\"\n            [color]=\"item.id === 'logout' ? 'danger' : 'primary'\"\n            type=\"button\"\n            [fullWidth]=\"true\"\n            [ariaLabel]=\"item.label\"\n            [disabled]=\"!!item.disabled\"\n            (buttonClick)=\"onMainItemClick(item)\"\n          >\n            @if (item.badge !== null && item.badge !== undefined && item.badge !== '') {\n              <span class=\"loro-app-nav__badge\">{{ item.badge }}</span>\n            }\n          </loro-button>\n        }\n      </nav>\n\n      <div class=\"loro-app-nav__spacer\"></div>\n\n      @if (showUtilityItems() && utilityItems().length > 0) {\n        <div class=\"loro-app-nav__divider\" aria-hidden=\"true\"></div>\n\n        <nav\n          class=\"loro-app-nav__nav loro-app-nav__nav--utility\"\n          aria-label=\"Navegaci\u00F3n secundaria\"\n        >\n          @for (item of utilityItems(); track item.id) {\n            <loro-button\n              class=\"loro-app-nav__item\"\n              [class.loro-app-nav__item--active]=\"item.active\"\n              [class.loro-app-nav__item--disabled]=\"item.disabled\"\n              [class.loro-app-nav__item--logout]=\"item.id === 'logout'\"\n              [text]=\"item.label\"\n              [icon]=\"item.icon\"\n              iconMode=\"with-icon\"\n              iconColor=\"default\"\n              variant=\"navigation\"\n              [selected]=\"!!item.active\"\n              [color]=\"item.id === 'logout' ? 'danger' : 'primary'\"\n              type=\"button\"\n              [fullWidth]=\"true\"\n              [ariaLabel]=\"item.label\"\n              [disabled]=\"!!item.disabled\"\n              (buttonClick)=\"onUtilityItemClick(item)\"\n            >\n              @if (item.badge !== null && item.badge !== undefined && item.badge !== '') {\n                <span class=\"loro-app-nav__badge\">{{ item.badge }}</span>\n              }\n            </loro-button>\n          }\n        </nav>\n      }\n    </div>\n  </div>\n\n  <nav\n    ngToolbar\n    class=\"loro-app-nav__mobile\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [style.--loro-mobile-slider-position]=\"mobileSliderPosition()\"\n    [class.loro-app-nav__mobile--dragging]=\"isMobileDragging()\"\n    [class.loro-app-nav__mobile--with-labels]=\"true\"\n    [style.--loro-mobile-item-count]=\"mobileItemCount()\"\n    [style.--loro-mobile-visual-slot-count]=\"mobileVisualSlotCount()\"\n    (pointerdown)=\"onMobilePointerDown($event)\"\n    (pointermove)=\"onMobilePointerMove($event)\"\n    (pointerup)=\"onMobilePointerUp($event)\"\n    (pointercancel)=\"onMobilePointerCancel($event)\"\n  >\n    <span class=\"loro-app-nav__mobile-slider\" aria-hidden=\"true\"></span>\n\n    @for (item of mobileItems(); track item.id; let index = $index) {\n      <button\n        ngToolbarWidget\n        type=\"button\"\n        class=\"loro-app-nav__mobile-item\"\n        [style.grid-column]=\"mobileItemGridColumn(index)\"\n        [class.loro-app-nav__mobile-item--active]=\"isMobileItemVisualActive(index)\"\n        [class.loro-app-nav__mobile-item--disabled]=\"item.disabled\"\n        [attr.aria-label]=\"item.label\"\n        [attr.aria-current]=\"item.active ? 'page' : null\"\n        [value]=\"item.id\"\n        [disabled]=\"!!item.disabled\"\n        (click)=\"onMobileItemClick(item)\"\n      >\n        <loro-icon\n          class=\"loro-app-nav__mobile-icon\"\n          [name]=\"item.icon\"\n          [size]=\"24\"\n          color=\"default\"\n          [alt]=\"item.label\"\n        />\n        <span class=\"loro-app-nav__mobile-label\">{{ item.label }}</span>\n      </button>\n    }\n  </nav>\n</aside>\n", styles: [":host{display:block;width:100%;height:100%}.loro-app-nav{width:100%;height:100%}.loro-app-nav__desktop{display:none;height:100%}.loro-app-nav__surface{width:100%;max-width:none;display:flex;height:100%;flex-direction:column;gap:1.1rem;padding:1.75rem 1.35rem 1.5rem;background:var(--loro-nav-desktop-surface, var(--loro-shell-header-surface));border:1px solid var(--loro-nav-desktop-border, var(--loro-border-soft))}html[data-theme=dark] .loro-app-nav__surface{background:var(--loro-nav-desktop-surface, rgba(24, 28, 32, .78));border-color:var(--loro-nav-desktop-border, rgba(255, 255, 255, .08));box-shadow:var(--loro-nav-desktop-shadow, none)}.loro-app-nav__surface--compact{gap:.9rem;padding:1.25rem 1rem 1.15rem}.loro-app-nav__surface--compact .loro-app-nav__brand{min-height:3.65rem;padding-bottom:1.2rem}.loro-app-nav__surface--compact .loro-app-nav__item{--loro-button-min-height: 3.75rem}.loro-app-nav__brand{display:flex;align-items:center;min-height:4.25rem;padding:.35rem .55rem .85rem}.loro-app-nav__brand-image{display:block}.loro-app-nav__nav{display:flex;flex-direction:column;gap:.75rem}.loro-app-nav__item{--loro-button-min-height: 4.25rem;--loro-button-padding: 1rem 1.2rem;--loro-button-radius: 1rem;--loro-button-font-size: 1rem;--loro-button-background: var(--loro-nav-button-background, transparent);--loro-button-border-color: var(--loro-nav-button-border, transparent);--loro-button-color: var(--loro-nav-button-text, var(--loro-text-strong));--loro-button-hover-background: var(--loro-nav-button-hover-bg, var(--loro-nav-hover-bg));--loro-button-hover-border-color: var(--loro-nav-button-hover-border, transparent);--loro-button-hover-color: var(--loro-nav-button-hover-text, var(--loro-nav-button-text, var(--loro-text-strong)));--loro-button-hover-shadow: var(--loro-nav-button-hover-shadow, none);display:block;width:100%;color:var(--loro-nav-button-text, var(--loro-text-strong))}.loro-app-nav__item--active{--loro-button-selected-background: var(--loro-nav-button-active-bg, var(--loro-nav-active-bg));--loro-button-selected-border-color: var(--loro-nav-button-active-border, var(--loro-nav-active-border));--loro-button-selected-color: var(--loro-nav-button-active-text, var(--loro-primary-500));--loro-button-selected-shadow: var(--loro-nav-button-active-shadow, inset .35rem 0 0 var(--loro-primary-500))}.loro-app-nav__item--logout{--loro-button-background: var(--loro-nav-button-danger-bg, var(--loro-danger-surface));--loro-button-border-color: var(--loro-nav-button-danger-border, transparent);--loro-button-color: var(--loro-nav-button-danger-text, var(--loro-danger-text));--loro-button-hover-background: var(--loro-nav-button-danger-bg, var(--loro-danger-surface));--loro-button-hover-border-color: var(--loro-nav-button-danger-border, transparent);--loro-button-hover-color: var(--loro-nav-button-danger-text, var(--loro-danger-text));--loro-button-shadow: none;--loro-button-hover-shadow: none}.loro-app-nav__item--disabled,.loro-app-nav__mobile-item--disabled{cursor:not-allowed;opacity:.45}.loro-app-nav__label,.loro-app-nav__mobile-label{color:inherit}.loro-app-nav__label{font-size:.98rem;font-weight:700;color:inherit}.loro-app-nav__badge{margin-left:auto;min-width:1.5rem;padding:.125rem .5rem;border-radius:999px;background:#ffffff24;color:inherit;font-size:.75rem;font-weight:700;text-align:center;box-shadow:inset 0 1px #ffffff14}.loro-app-nav__spacer{flex:1}.loro-app-nav__divider{height:1px;margin:.65rem 0 .9rem;background:var(--loro-nav-divider)}.loro-app-nav__nav--utility{margin-top:auto}.loro-app-nav__mobile{position:fixed;left:50%;bottom:max(1.25rem,env(safe-area-inset-bottom,0px) * .28);z-index:70;display:grid;grid-template-columns:repeat(var(--loro-mobile-visual-slot-count, 4),minmax(0,1fr));width:min(76vw - max(1rem,var(--app-shell-mobile-gutter, 1rem) * .75),19rem);gap:0;margin:0;transform:translate(-50%);padding:0;overflow:hidden;border:1px solid var(--loro-nav-mobile-border, rgba(43, 35, 80, .08));border-radius:999px;isolation:isolate;background:var(--loro-nav-mobile-glass-surface, rgba(255, 255, 255, .68));box-shadow:var(--loro-nav-mobile-surface-shadow, 0 8px 24px rgba(28, 32, 48, .1));backdrop-filter:blur(var(--loro-nav-mobile-glass-blur, 24px)) saturate(1.32);-webkit-backdrop-filter:blur(var(--loro-nav-mobile-glass-blur, 24px)) saturate(1.32);touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:background .22s ease,border-color .22s ease,box-shadow .22s ease}.loro-app-nav__mobile-item{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:3.58rem;gap:.18rem;padding:.35rem .15rem;border:0;border-radius:999px;outline:0;background:transparent;color:var(--loro-nav-mobile-icon, var(--loro-text));cursor:pointer;appearance:none;-webkit-appearance:none;opacity:1;visibility:visible;transition:transform .22s cubic-bezier(.22,1,.36,1);-webkit-tap-highlight-color:transparent}.loro-app-nav__mobile-item:active,.loro-app-nav__mobile-item--active,.loro-app-nav__mobile-item:hover{background:transparent;color:var(--loro-nav-mobile-icon, var(--loro-text))}.loro-app-nav__mobile-item:focus-visible{outline:2px solid var(--loro-focus-ring);outline-offset:-4px}.loro-app-nav__mobile-item:disabled{cursor:not-allowed;opacity:.45}.loro-app-nav__mobile-icon{position:relative;z-index:3;display:inline-flex;align-items:center;justify-content:center;color:inherit!important;opacity:1!important;visibility:visible!important;pointer-events:none;mix-blend-mode:normal;transform:scale(.94);transform-origin:center}.loro-app-nav__mobile-item ::ng-deep .loro-icon,.loro-app-nav__mobile-item ::ng-deep svg{display:block!important;color:inherit!important;opacity:1!important;visibility:visible!important;pointer-events:none!important}.loro-app-nav__mobile-item ::ng-deep .loro-icon__mask{background-color:currentColor!important;opacity:1!important;visibility:visible!important}.loro-app-nav__mobile-item ::ng-deep svg [fill]:not([fill=none]){fill:currentColor!important}.loro-app-nav__mobile-item ::ng-deep svg [stroke]:not([stroke=none]){stroke:currentColor!important}.loro-app-nav__mobile-slider{position:absolute;inset-block:0;left:0;z-index:1;width:calc(100% / var(--loro-mobile-visual-slot-count, 4));border:0;border-radius:999px;background:var(--loro-nav-mobile-indicator, linear-gradient(180deg, rgba(227, 229, 233, .96) 0%, rgba(214, 217, 223, .92) 100%));box-shadow:var(--loro-nav-mobile-indicator-shadow, inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 5px rgba(21, 28, 42, .06));transform:translate3d(calc(var(--loro-mobile-slider-position, 0) * 100%),0,0);will-change:transform;transition:transform .26s cubic-bezier(.22,1,.36,1);pointer-events:none}.loro-app-nav__mobile--dragging .loro-app-nav__mobile-slider{transition:none}.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-icon,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item ::ng-deep .loro-icon,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item ::ng-deep svg{color:var(--loro-nav-mobile-icon, var(--loro-text))!important;opacity:1!important;visibility:visible!important}.loro-app-nav__mobile-label{display:block;max-width:100%;overflow:hidden;color:inherit;font-size:.625rem;font-weight:700;line-height:1.1;text-align:center;text-overflow:ellipsis;white-space:nowrap;opacity:0;transform:translateY(.08rem);transition:opacity .18s ease,transform .18s ease}.loro-app-nav__mobile--with-labels{width:min(92vw - max(1rem,var(--app-shell-mobile-gutter, 1rem) * .75),24rem)}.loro-app-nav__mobile--with-labels .loro-app-nav__mobile-item{min-height:4.4rem;padding-top:.7rem}.loro-app-nav__mobile--with-labels .loro-app-nav__mobile-label{opacity:1;transform:translateY(0)}@media(max-width:599.98px){:host{height:auto}.loro-app-nav{height:auto;padding:0}.loro-app-nav__desktop{height:auto}}@media(min-width:1024px){:host,.loro-app-nav,.loro-app-nav__desktop{height:100%}.loro-app-nav__desktop{display:block}.loro-app-nav__mobile{display:none}}@media(prefers-reduced-motion:reduce){.loro-app-nav__mobile-slider,.loro-app-nav__mobile-item,.loro-app-nav__mobile-item ::ng-deep .loro-icon{transition-duration:1ms}}\n"] }]
+            args: [{ selector: 'loro-app-nav', standalone: true, imports: [Toolbar, ToolbarWidget, LoroImage, LoroButton, LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<aside class=\"loro-app-nav\">\n  <div class=\"loro-app-nav__desktop\">\n    <div class=\"loro-app-nav__surface\" [class.loro-app-nav__surface--compact]=\"compactDesktop()\">\n      <div class=\"loro-app-nav__brand\">\n        <loro-image\n          class=\"loro-app-nav__brand-image\"\n          name=\"image-loro-apaisado\"\n          alt=\"AlLoro\"\n          width=\"10rem\"\n          height=\"auto\"\n        />\n      </div>\n\n      <nav class=\"loro-app-nav__nav\" [attr.aria-label]=\"ariaLabel()\">\n        @for (item of desktopItems(); track item.id) {\n          <loro-button\n            class=\"loro-app-nav__item\"\n            [class.loro-app-nav__item--active]=\"item.active\"\n            [class.loro-app-nav__item--disabled]=\"item.disabled\"\n            [class.loro-app-nav__item--logout]=\"item.id === 'logout'\"\n            [text]=\"item.label\"\n            [icon]=\"item.icon\"\n            iconMode=\"with-icon\"\n            iconColor=\"default\"\n            variant=\"navigation\"\n            [selected]=\"!!item.active\"\n            [color]=\"item.id === 'logout' ? 'danger' : 'primary'\"\n            type=\"button\"\n            [fullWidth]=\"true\"\n            [ariaLabel]=\"item.label\"\n            [disabled]=\"!!item.disabled\"\n            (buttonClick)=\"onMainItemClick(item)\"\n          >\n            @if (item.badge !== null && item.badge !== undefined && item.badge !== '') {\n              <span class=\"loro-app-nav__badge\">{{ item.badge }}</span>\n            }\n          </loro-button>\n        }\n      </nav>\n\n      <div class=\"loro-app-nav__spacer\"></div>\n\n      @if (showUtilityItems() && utilityItems().length > 0) {\n        <div class=\"loro-app-nav__divider\" aria-hidden=\"true\"></div>\n\n        <nav\n          class=\"loro-app-nav__nav loro-app-nav__nav--utility\"\n          aria-label=\"Navegaci\u00F3n secundaria\"\n        >\n          @for (item of utilityItems(); track item.id) {\n            <loro-button\n              class=\"loro-app-nav__item\"\n              [class.loro-app-nav__item--active]=\"item.active\"\n              [class.loro-app-nav__item--disabled]=\"item.disabled\"\n              [class.loro-app-nav__item--logout]=\"item.id === 'logout'\"\n              [text]=\"item.label\"\n              [icon]=\"item.icon\"\n              iconMode=\"with-icon\"\n              iconColor=\"default\"\n              variant=\"navigation\"\n              [selected]=\"!!item.active\"\n              [color]=\"item.id === 'logout' ? 'danger' : 'primary'\"\n              type=\"button\"\n              [fullWidth]=\"true\"\n              [ariaLabel]=\"item.label\"\n              [disabled]=\"!!item.disabled\"\n              (buttonClick)=\"onUtilityItemClick(item)\"\n            >\n              @if (item.badge !== null && item.badge !== undefined && item.badge !== '') {\n                <span class=\"loro-app-nav__badge\">{{ item.badge }}</span>\n              }\n            </loro-button>\n          }\n        </nav>\n      }\n    </div>\n  </div>\n\n  <nav\n    ngToolbar\n    class=\"loro-app-nav__mobile\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [style.--loro-mobile-slider-position]=\"mobileSliderPosition()\"\n    [class.loro-app-nav__mobile--dragging]=\"isMobileDragging()\"\n    [class.loro-app-nav__mobile--with-labels]=\"true\"\n    [style.--loro-mobile-item-count]=\"mobileItemCount()\"\n    [style.--loro-mobile-visual-slot-count]=\"mobileVisualSlotCount()\"\n    (pointerdown)=\"onMobilePointerDown($event)\"\n    (pointermove)=\"onMobilePointerMove($event)\"\n    (pointerup)=\"onMobilePointerUp($event)\"\n    (pointercancel)=\"onMobilePointerCancel($event)\"\n  >\n    <span\n      class=\"loro-app-nav__mobile-slider\"\n      [class.loro-app-nav__mobile-slider--scan]=\"selectedMobileItemId() === 'scan'\"\n      aria-hidden=\"true\"></span>\n\n    @for (item of mobileItems(); track item.id; let index = $index) {\n      <button\n        ngToolbarWidget\n        type=\"button\"\n        class=\"loro-app-nav__mobile-item\"\n        [style.grid-column]=\"mobileItemGridColumn(index)\"\n        [class.loro-app-nav__mobile-item--active]=\"isMobileItemVisualActive(index)\"\n        [class.loro-app-nav__mobile-item--scan-active]=\"item.id === 'scan' && isMobileItemVisualActive(index)\"\n        [class.loro-app-nav__mobile-item--disabled]=\"item.disabled\"\n        [attr.aria-label]=\"item.label\"\n        [attr.aria-current]=\"item.active ? 'page' : null\"\n        [value]=\"item.id\"\n        [disabled]=\"!!item.disabled\"\n        (click)=\"onMobileItemClick(item)\"\n      >\n        <loro-icon\n          class=\"loro-app-nav__mobile-icon\"\n          [name]=\"item.icon\"\n          [size]=\"24\"\n          color=\"default\"\n          [alt]=\"item.label\"\n        />\n        <span class=\"loro-app-nav__mobile-label\">{{ item.label }}</span>\n      </button>\n    }\n  </nav>\n</aside>\n", styles: [":host{display:block;width:100%;height:100%}.loro-app-nav{width:100%;height:100%}.loro-app-nav__desktop{display:none;height:100%}.loro-app-nav__surface{width:100%;max-width:none;display:flex;height:100%;flex-direction:column;gap:1.1rem;padding:1.75rem 1.35rem 1.5rem;background:var(--loro-nav-desktop-surface, var(--loro-shell-header-surface));border:1px solid var(--loro-nav-desktop-border, var(--loro-border-soft))}html[data-theme=dark] .loro-app-nav__surface{background:var(--loro-nav-desktop-surface, rgba(24, 28, 32, .78));border-color:var(--loro-nav-desktop-border, rgba(255, 255, 255, .08));box-shadow:var(--loro-nav-desktop-shadow, none)}.loro-app-nav__surface--compact{gap:.9rem;padding:1.25rem 1rem 1.15rem}.loro-app-nav__surface--compact .loro-app-nav__brand{min-height:3.65rem;padding-bottom:1.2rem}.loro-app-nav__surface--compact .loro-app-nav__item{--loro-button-min-height: 3.75rem}.loro-app-nav__brand{display:flex;align-items:center;min-height:4.25rem;padding:.35rem .55rem .85rem}.loro-app-nav__brand-image{display:block}.loro-app-nav__nav{display:flex;flex-direction:column;gap:.75rem}.loro-app-nav__item{--loro-button-min-height: 4.25rem;--loro-button-padding: 1rem 1.2rem;--loro-button-radius: 1rem;--loro-button-font-size: 1rem;--loro-button-background: var(--loro-nav-button-background, transparent);--loro-button-border-color: var(--loro-nav-button-border, transparent);--loro-button-color: var(--loro-nav-button-text, var(--loro-text-strong));--loro-button-hover-background: var(--loro-nav-button-hover-bg, var(--loro-nav-hover-bg));--loro-button-hover-border-color: var(--loro-nav-button-hover-border, transparent);--loro-button-hover-color: var(--loro-nav-button-hover-text, var(--loro-nav-button-text, var(--loro-text-strong)));--loro-button-hover-shadow: var(--loro-nav-button-hover-shadow, none);display:block;width:100%;color:var(--loro-nav-button-text, var(--loro-text-strong))}.loro-app-nav__item--active{--loro-button-selected-background: var(--loro-nav-button-active-bg, var(--loro-nav-active-bg));--loro-button-selected-border-color: var(--loro-nav-button-active-border, var(--loro-nav-active-border));--loro-button-selected-color: var(--loro-nav-button-active-text, var(--loro-primary-500));--loro-button-selected-shadow: var(--loro-nav-button-active-shadow, inset .35rem 0 0 var(--loro-primary-500))}.loro-app-nav__item--logout{--loro-button-background: var(--loro-nav-button-danger-bg, var(--loro-danger-surface));--loro-button-border-color: var(--loro-nav-button-danger-border, transparent);--loro-button-color: var(--loro-nav-button-danger-text, var(--loro-danger-text));--loro-button-hover-background: var(--loro-nav-button-danger-bg, var(--loro-danger-surface));--loro-button-hover-border-color: var(--loro-nav-button-danger-border, transparent);--loro-button-hover-color: var(--loro-nav-button-danger-text, var(--loro-danger-text));--loro-button-shadow: none;--loro-button-hover-shadow: none}.loro-app-nav__item--disabled,.loro-app-nav__mobile-item--disabled{cursor:not-allowed;opacity:.45}.loro-app-nav__label,.loro-app-nav__mobile-label{color:inherit}.loro-app-nav__label{font-size:.98rem;font-weight:700;color:inherit}.loro-app-nav__badge{margin-left:auto;min-width:1.5rem;padding:.125rem .5rem;border-radius:999px;background:#ffffff24;color:inherit;font-size:.75rem;font-weight:700;text-align:center;box-shadow:inset 0 1px #ffffff14}.loro-app-nav__spacer{flex:1}.loro-app-nav__divider{height:1px;margin:.65rem 0 .9rem;background:var(--loro-nav-divider)}.loro-app-nav__nav--utility{margin-top:auto}.loro-app-nav__mobile{position:fixed;left:50%;bottom:max(1.25rem,env(safe-area-inset-bottom,0px) * .28);z-index:70;display:grid;grid-template-columns:repeat(var(--loro-mobile-visual-slot-count, 4),minmax(0,1fr));width:min(76vw - max(1rem,var(--app-shell-mobile-gutter, 1rem) * .75),19rem);gap:0;margin:0;transform:translate(-50%);padding:0;overflow:hidden;border:1px solid var(--loro-nav-mobile-border, rgba(43, 35, 80, .08));border-radius:999px;isolation:isolate;background:var(--loro-nav-mobile-glass-surface, rgba(255, 255, 255, .68));box-shadow:var(--loro-nav-mobile-surface-shadow, 0 8px 24px rgba(28, 32, 48, .1));backdrop-filter:blur(var(--loro-nav-mobile-glass-blur, 24px)) saturate(1.32);-webkit-backdrop-filter:blur(var(--loro-nav-mobile-glass-blur, 24px)) saturate(1.32);touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:background .22s ease,border-color .22s ease,box-shadow .22s ease}.loro-app-nav__mobile-item{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:3.58rem;gap:.18rem;padding:.35rem .15rem;border:0;border-radius:999px;outline:0;background:transparent;color:var(--loro-nav-mobile-icon, var(--loro-text));cursor:pointer;appearance:none;-webkit-appearance:none;opacity:1;visibility:visible;transition:transform .22s cubic-bezier(.22,1,.36,1);-webkit-tap-highlight-color:transparent}.loro-app-nav__mobile-item:active,.loro-app-nav__mobile-item--active,.loro-app-nav__mobile-item:hover{background:transparent;color:var(--loro-nav-mobile-icon, var(--loro-text))}.loro-app-nav__mobile-item:focus-visible{outline:2px solid var(--loro-focus-ring);outline-offset:-4px}.loro-app-nav__mobile-item:disabled{cursor:not-allowed;opacity:.45}.loro-app-nav__mobile-icon{position:relative;z-index:3;display:inline-flex;align-items:center;justify-content:center;color:inherit!important;opacity:1!important;visibility:visible!important;pointer-events:none;mix-blend-mode:normal;transform:scale(.94);transform-origin:center}.loro-app-nav__mobile-item ::ng-deep .loro-icon,.loro-app-nav__mobile-item ::ng-deep svg{display:block!important;color:inherit!important;opacity:1!important;visibility:visible!important;pointer-events:none!important}.loro-app-nav__mobile-item ::ng-deep .loro-icon__mask{background-color:currentColor!important;opacity:1!important;visibility:visible!important}.loro-app-nav__mobile-item ::ng-deep svg [fill]:not([fill=none]){fill:currentColor!important}.loro-app-nav__mobile-item ::ng-deep svg [stroke]:not([stroke=none]){stroke:currentColor!important}.loro-app-nav__mobile-slider{position:absolute;inset-block:0;left:0;z-index:1;width:calc(100% / var(--loro-mobile-visual-slot-count, 4));border:0;border-radius:999px;background:var(--loro-nav-mobile-indicator, linear-gradient(180deg, rgba(227, 229, 233, .96) 0%, rgba(214, 217, 223, .92) 100%));box-shadow:var(--loro-nav-mobile-indicator-shadow, inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 5px rgba(21, 28, 42, .06));transform:translate3d(calc(var(--loro-mobile-slider-position, 0) * 100%),0,0);will-change:transform;transition:transform .26s cubic-bezier(.22,1,.36,1);pointer-events:none}.loro-app-nav__mobile--dragging .loro-app-nav__mobile-slider{transition:none}.loro-app-nav__mobile-slider--scan{background:var(--loro-nav-mobile-scan-indicator, linear-gradient(180deg, rgba(132, 83, 255, .98) 0%, rgba(94, 47, 224, .96) 100%));box-shadow:var(--loro-nav-mobile-scan-indicator-shadow, inset 0 1px 0 rgba(255, 255, 255, .38), 0 .85rem 1.65rem rgba(108, 60, 255, .28))}.loro-app-nav__mobile-item--scan-active{color:var(--loro-nav-mobile-scan-active-color, #fff)!important}.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-icon,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item ::ng-deep .loro-icon,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item ::ng-deep svg{color:var(--loro-nav-mobile-icon, var(--loro-text))!important;opacity:1!important;visibility:visible!important}.loro-app-nav__mobile-label{display:block;max-width:100%;overflow:hidden;color:inherit;font-size:.625rem;font-weight:700;line-height:1.1;text-align:center;text-overflow:ellipsis;white-space:nowrap;opacity:0;transform:translateY(.08rem);transition:opacity .18s ease,transform .18s ease}.loro-app-nav__mobile--with-labels{width:min(92vw - max(1rem,var(--app-shell-mobile-gutter, 1rem) * .75),24rem)}.loro-app-nav__mobile--with-labels .loro-app-nav__mobile-item{min-height:4.4rem;padding-top:.7rem}.loro-app-nav__mobile--with-labels .loro-app-nav__mobile-label{opacity:1;transform:translateY(0)}@media(max-width:479.99px)and (orientation:portrait){:host{height:auto}.loro-app-nav{height:auto;padding:0}.loro-app-nav__desktop{height:auto}}@media(min-width:1024px){:host,.loro-app-nav,.loro-app-nav__desktop{height:100%}.loro-app-nav__desktop{display:block}.loro-app-nav__mobile{display:none}}@media(prefers-reduced-motion:reduce){.loro-app-nav__mobile-slider,.loro-app-nav__mobile-item,.loro-app-nav__mobile-item ::ng-deep .loro-icon{transition-duration:1ms}}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], utilityItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "utilityItems", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], showUtilityItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "showUtilityItems", required: false }] }], compactDesktop: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactDesktop", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], utilityItemClick: [{ type: i0.Output, args: ["utilityItemClick"] }], navItemClick: [{ type: i0.Output, args: ["navItemClick"] }] } });
 
 class LoroAssistantCard {
@@ -1544,8 +1543,9 @@ class LoroAssistantCard {
     actionLabel = input('', ...(ngDevMode ? [{ debugName: "actionLabel" }] : /* istanbul ignore next */ []));
     actionIcon = input('chat', ...(ngDevMode ? [{ debugName: "actionIcon" }] : /* istanbul ignore next */ []));
     actionVariant = input('primary', ...(ngDevMode ? [{ debugName: "actionVariant" }] : /* istanbul ignore next */ []));
+    action = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroAssistantCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroAssistantCard, isStandalone: true, selector: "loro-assistant-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: true, transformFunction: null }, imageName: { classPropertyName: "imageName", publicName: "imageName", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, actionIcon: { classPropertyName: "actionIcon", publicName: "actionIcon", isSignal: true, isRequired: false, transformFunction: null }, actionVariant: { classPropertyName: "actionVariant", publicName: "actionVariant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroAssistantCard, isStandalone: true, selector: "loro-assistant-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: true, transformFunction: null }, imageName: { classPropertyName: "imageName", publicName: "imageName", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, actionIcon: { classPropertyName: "actionIcon", publicName: "actionIcon", isSignal: true, isRequired: false, transformFunction: null }, actionVariant: { classPropertyName: "actionVariant", publicName: "actionVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, ngImport: i0, template: `
     <section class="loro-assistant-card">
       <div class="loro-assistant-card__media">
         @if (imageName()) {
@@ -1563,7 +1563,8 @@ class LoroAssistantCard {
           [label]="actionLabel()"
           [icon]="actionIcon()"
           [variant]="actionVariant()"
-          [fullWidth]="true" />
+          [fullWidth]="true"
+          (buttonClick)="action.emit()" />
       }
     </section>
   `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-assistant-card{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(12rem,auto);align-items:center;gap:1.5rem;padding:1.35rem 1.5rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-card);background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft)}.loro-assistant-card__media{display:grid;width:6rem;height:5rem;place-items:center;overflow:hidden}.loro-assistant-card__copy{min-width:0}h2,p{margin:0}h2{color:var(--loro-text-strong);font-size:1.2rem;font-weight:900;line-height:1.2}p{margin-top:.35rem;color:var(--loro-muted);font-weight:650;line-height:1.45}@media(max-width:680px){.loro-assistant-card{grid-template-columns:auto minmax(0,1fr)}loro-button{grid-column:1 / -1}}\n"], dependencies: [{ kind: "component", type: LoroButton, selector: "loro-button", inputs: ["label", "text", "icon", "iconContent", "iconMode", "iconSize", "iconButtonSize", "iconColor", "socialMobileCompact", "selected", "variant", "typeButton", "color", "size", "fullWidth", "buttonWidth", "disabled", "loading", "type", "formId", "ariaLabel", "ariaDescription"], outputs: ["buttonClick", "change", "sanChange"] }, { kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroImage, selector: "loro-image", inputs: ["name", "alt", "size", "width", "height", "fit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -1588,11 +1589,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
           [label]="actionLabel()"
           [icon]="actionIcon()"
           [variant]="actionVariant()"
-          [fullWidth]="true" />
+          [fullWidth]="true"
+          (buttonClick)="action.emit()" />
       }
     </section>
   `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-assistant-card{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(12rem,auto);align-items:center;gap:1.5rem;padding:1.35rem 1.5rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-card);background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft)}.loro-assistant-card__media{display:grid;width:6rem;height:5rem;place-items:center;overflow:hidden}.loro-assistant-card__copy{min-width:0}h2,p{margin:0}h2{color:var(--loro-text-strong);font-size:1.2rem;font-weight:900;line-height:1.2}p{margin-top:.35rem;color:var(--loro-muted);font-weight:650;line-height:1.45}@media(max-width:680px){.loro-assistant-card{grid-template-columns:auto minmax(0,1fr)}loro-button{grid-column:1 / -1}}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: true }] }], imageName: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageName", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], actionIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionIcon", required: false }] }], actionVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionVariant", required: false }] }] } });
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: true }] }], imageName: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageName", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], actionIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionIcon", required: false }] }], actionVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionVariant", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
 
 function isNativeSocialIcon(icon) {
     return icon === 'apple' || icon === 'google';
@@ -1929,38 +1931,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 class LoroToggle {
     checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
-    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
-    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
     errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
     ariaLabel = input('Cambiar estado', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    errorText = computed(() => this.errorMessage().trim() || this.errors()[0]?.message?.trim() || '', ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
-    showError = computed(() => this.errorText().length > 0 || (this.invalid() && this.touched()), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    checkedChange = output();
     toggle() {
-        if (this.disabled() || this.readonly()) {
+        if (this.disabled()) {
             return;
         }
-        this.checked.update((checked) => !checked);
+        const nextChecked = !this.checked();
+        this.checked.set(nextChecked);
         this.touched.set(true);
+        this.checkedChange.emit(nextChecked);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: LoroToggle, isStandalone: true, selector: "loro-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touched: "touchedChange" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: LoroToggle, isStandalone: true, selector: "loro-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touched: "touchedChange", checkedChange: "checkedChange" }, ngImport: i0, template: `
     <button
       type="button"
       class="loro-toggle"
       [class.loro-toggle--checked]="checked()"
-      [class.loro-toggle--invalid]="showError()"
       [disabled]="disabled()"
       [attr.aria-label]="ariaLabel()"
       [attr.aria-pressed]="checked()"
-      [attr.aria-invalid]="showError() ? 'true' : null"
-      (click)="toggle()"
-      (blur)="touched.set(true)">
+      (click)="toggle()">
       <span class="loro-toggle__thumb"></span>
     </button>
-  `, isInline: true, styles: [":host{display:inline-flex;flex:0 0 auto}.loro-toggle{position:relative;display:inline-flex;align-items:center;width:4rem;height:2.25rem;padding:.2rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-pill);background:var(--loro-surface-muted);cursor:pointer;transition:background .16s ease,border-color .16s ease,opacity .16s ease}.loro-toggle__thumb{display:block;width:1.85rem;height:1.85rem;border-radius:50%;background:var(--loro-surface);box-shadow:0 3px 10px #2219492e;transition:transform .16s ease}.loro-toggle--checked{border-color:color-mix(in srgb,var(--loro-primary-500) 54%,transparent);background:linear-gradient(135deg,var(--loro-primary-700),var(--loro-primary-500))}.loro-toggle--checked .loro-toggle__thumb{transform:translate(1.75rem)}.loro-toggle:disabled{cursor:not-allowed;opacity:.7}.loro-toggle--invalid{border-color:color-mix(in srgb,var(--loro-danger-text) 42%,var(--loro-border-subtle));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 8%,transparent)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:inline-flex;flex:0 0 auto}.loro-toggle{position:relative;display:inline-flex;align-items:center;width:4rem;height:2.25rem;padding:.2rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-pill);background:var(--loro-surface-muted);cursor:pointer;transition:background .16s ease,border-color .16s ease,opacity .16s ease}.loro-toggle__thumb{display:block;width:1.85rem;height:1.85rem;border-radius:50%;background:var(--loro-surface);box-shadow:0 3px 10px #2219492e;transition:transform .16s ease}.loro-toggle--checked{border-color:color-mix(in srgb,var(--loro-primary-500) 54%,transparent);background:linear-gradient(135deg,var(--loro-primary-700),var(--loro-primary-500))}.loro-toggle--checked .loro-toggle__thumb{transform:translate(1.75rem)}.loro-toggle:disabled{cursor:not-allowed;opacity:.7}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroToggle, decorators: [{
             type: Component,
@@ -1969,17 +1967,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       type="button"
       class="loro-toggle"
       [class.loro-toggle--checked]="checked()"
-      [class.loro-toggle--invalid]="showError()"
       [disabled]="disabled()"
       [attr.aria-label]="ariaLabel()"
       [attr.aria-pressed]="checked()"
-      [attr.aria-invalid]="showError() ? 'true' : null"
-      (click)="toggle()"
-      (blur)="touched.set(true)">
+      (click)="toggle()">
       <span class="loro-toggle__thumb"></span>
     </button>
-  `, styles: [":host{display:inline-flex;flex:0 0 auto}.loro-toggle{position:relative;display:inline-flex;align-items:center;width:4rem;height:2.25rem;padding:.2rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-pill);background:var(--loro-surface-muted);cursor:pointer;transition:background .16s ease,border-color .16s ease,opacity .16s ease}.loro-toggle__thumb{display:block;width:1.85rem;height:1.85rem;border-radius:50%;background:var(--loro-surface);box-shadow:0 3px 10px #2219492e;transition:transform .16s ease}.loro-toggle--checked{border-color:color-mix(in srgb,var(--loro-primary-500) 54%,transparent);background:linear-gradient(135deg,var(--loro-primary-700),var(--loro-primary-500))}.loro-toggle--checked .loro-toggle__thumb{transform:translate(1.75rem)}.loro-toggle:disabled{cursor:not-allowed;opacity:.7}.loro-toggle--invalid{border-color:color-mix(in srgb,var(--loro-danger-text) 42%,var(--loro-border-subtle));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 8%,transparent)}\n"] }]
-        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+  `, styles: [":host{display:inline-flex;flex:0 0 auto}.loro-toggle{position:relative;display:inline-flex;align-items:center;width:4rem;height:2.25rem;padding:.2rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-pill);background:var(--loro-surface-muted);cursor:pointer;transition:background .16s ease,border-color .16s ease,opacity .16s ease}.loro-toggle__thumb{display:block;width:1.85rem;height:1.85rem;border-radius:50%;background:var(--loro-surface);box-shadow:0 3px 10px #2219492e;transition:transform .16s ease}.loro-toggle--checked{border-color:color-mix(in srgb,var(--loro-primary-500) 54%,transparent);background:linear-gradient(135deg,var(--loro-primary-700),var(--loro-primary-500))}.loro-toggle--checked .loro-toggle__thumb{transform:translate(1.75rem)}.loro-toggle:disabled{cursor:not-allowed;opacity:.7}\n"] }]
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }] } });
 
 class LoroCardNav {
     router = inject(Router, { optional: true });
@@ -2065,7 +2060,7 @@ class LoroCardNav {
         }
       </span>
     </button>
-  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-card-nav{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;width:100%;min-height:4.8rem;padding:.95rem 1.1rem;border:0;border-bottom:1px solid var(--loro-border-subtle);background:transparent;color:var(--loro-text);font:inherit;text-align:left;cursor:pointer}.loro-card-nav:last-child{border-bottom:0}.loro-card-nav--soft,.loro-card-nav--danger{border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft)}.loro-card-nav--danger{border-color:color-mix(in srgb,var(--loro-danger-text) 30%,transparent);background:var(--loro-danger-surface);color:var(--loro-danger-text)}.loro-card-nav--selected{border-color:#6c3cff52;background:#6c3cff0a}.loro-card-nav__icon{display:grid;width:3.15rem;height:3.15rem;place-items:center;border-radius:.9rem;background:var(--loro-brand-tint-surface)}.loro-card-nav--danger .loro-card-nav__icon{background:color-mix(in srgb,var(--loro-danger-text) 12%,transparent)}.loro-card-nav__copy{display:grid;gap:.25rem;min-width:0}.loro-card-nav__title{color:currentColor;font-size:1rem;font-weight:900;line-height:1.2}.loro-card-nav__description{color:var(--loro-muted);font-size:.9rem;font-weight:600;line-height:1.35}.loro-card-nav--danger .loro-card-nav__description{color:color-mix(in srgb,var(--loro-danger-text) 72%,var(--loro-muted))}.loro-card-nav__trailing{display:inline-flex;align-items:center;justify-content:flex-end;min-width:0}.loro-card-nav__value{color:var(--loro-muted-strong);font-weight:800;white-space:nowrap}@media(max-width:520px){.loro-card-nav{gap:.85rem;min-height:5.2rem;padding-inline:1rem}.loro-card-nav__icon{width:3rem;height:3rem}}\n"], dependencies: [{ kind: "component", type: LoroBadge, selector: "loro-badge", inputs: ["label", "variant"] }, { kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroRadio, selector: "loro-radio", inputs: ["label", "value", "description", "checked", "variant"], outputs: ["selected"] }, { kind: "component", type: LoroToggle, selector: "loro-toggle", inputs: ["checked", "disabled", "readonly", "required", "invalid", "touched", "errorMessage", "errors", "ariaLabel"], outputs: ["checkedChange", "touchedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-card-nav{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;width:100%;min-height:4.8rem;padding:.95rem 1.1rem;border:0;border-bottom:1px solid var(--loro-border-subtle);background:transparent;color:var(--loro-text);font:inherit;text-align:left;cursor:pointer}.loro-card-nav:last-child{border-bottom:0}.loro-card-nav--soft,.loro-card-nav--danger{border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft)}.loro-card-nav--danger{border-color:color-mix(in srgb,var(--loro-danger-text) 30%,transparent);background:var(--loro-danger-surface);color:var(--loro-danger-text)}.loro-card-nav--selected{border-color:#6c3cff52;background:#6c3cff0a}.loro-card-nav__icon{display:grid;width:3.15rem;height:3.15rem;place-items:center;border-radius:.9rem;background:var(--loro-brand-tint-surface)}.loro-card-nav--danger .loro-card-nav__icon{background:color-mix(in srgb,var(--loro-danger-text) 12%,transparent)}.loro-card-nav__copy{display:grid;gap:.25rem;min-width:0}.loro-card-nav__title{color:currentColor;font-size:1rem;font-weight:900;line-height:1.2}.loro-card-nav__description{color:var(--loro-muted);font-size:.9rem;font-weight:600;line-height:1.35}.loro-card-nav--danger .loro-card-nav__description{color:color-mix(in srgb,var(--loro-danger-text) 72%,var(--loro-muted))}.loro-card-nav__trailing{display:inline-flex;align-items:center;justify-content:flex-end;min-width:0}.loro-card-nav__value{color:var(--loro-muted-strong);font-weight:800;white-space:nowrap}@media(max-width:520px){.loro-card-nav{gap:.85rem;min-height:5.2rem;padding-inline:1rem}.loro-card-nav__icon{width:3rem;height:3rem}}\n"], dependencies: [{ kind: "component", type: LoroBadge, selector: "loro-badge", inputs: ["label", "variant"] }, { kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroRadio, selector: "loro-radio", inputs: ["label", "value", "description", "checked", "variant"], outputs: ["selected"] }, { kind: "component", type: LoroToggle, selector: "loro-toggle", inputs: ["checked", "disabled", "required", "invalid", "errors", "touched", "ariaLabel"], outputs: ["checkedChange", "touchedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroCardNav, decorators: [{
             type: Component,
@@ -2181,14 +2176,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
   `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-divider{display:flex;align-items:center;gap:.9rem;color:var(--loro-muted)}.loro-divider__line{height:1px;flex:1;background:color-mix(in srgb,var(--loro-muted) 30%,transparent)}.loro-divider__text{margin:0;font-size:.9rem;font-weight:850;line-height:1;white-space:nowrap}.loro-divider--left .loro-divider__line:last-child{flex:999}.loro-divider--right .loro-divider__line:first-child{flex:999}\n"] }]
         }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }] } });
 
-let nextLoroInputId = 0;
-function optionalNumberAttribute(value) {
+function optionalNumberAttribute$1(value) {
     if (value === undefined || value === null || value === '') {
         return undefined;
     }
     const parsed = Number(value);
     return Number.isFinite(parsed) ? parsed : undefined;
 }
+let nextLoroInputId = 0;
 class LoroInput {
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
@@ -2214,8 +2209,8 @@ class LoroInput {
     touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
     unit = input('ud', ...(ngDevMode ? [{ debugName: "unit" }] : /* istanbul ignore next */ []));
     step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
-    min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute });
-    max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute });
+    min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute$1 });
+    max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute$1 });
     trailingClick = output();
     control = viewChild('control', ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
     errorId = `loro-input-error-${++nextLoroInputId}`;
@@ -2256,7 +2251,7 @@ class LoroInput {
     }
     coerceNumber(value) {
         const parsed = Number(value.replace(',', '.'));
-        return Number.isFinite(parsed) ? parsed : this.coerceLimit(this.min(), 0);
+        return Number.isFinite(parsed) ? parsed : (this.min() ?? 0);
     }
     formatValue(value) {
         if (this.normalizedUnit() === 'ud') {
@@ -2293,20 +2288,10 @@ class LoroInput {
         this.value.set(formatted);
     }
     clampValue(value) {
-        const min = this.coerceLimit(this.min(), 0);
-        const max = this.coerceLimit(this.max(), 100);
+        const min = this.min() ?? 0;
+        const max = this.max() ?? 100;
         return Math.min(max, Math.max(min, value));
     }
-    coerceLimit(value, fallback) {
-        if (typeof value === 'number') {
-            return Number.isFinite(value) ? value : fallback;
-        }
-        if (typeof value === 'string' && value.trim()) {
-            const parsed = Number(value.replace(',', '.'));
-            return Number.isFinite(parsed) ? parsed : fallback;
-        }
-        return fallback;
-    }
     sanitizeValue(value) {
         if (this.normalizedUnit() === 'ud') {
             return value.replace(/\D/g, '').slice(0, this.stepperInputMaxLength());
@@ -2805,11 +2790,11 @@ class LoroProductRow {
         return target instanceof HTMLElement && !!target.closest('button, input, textarea, select, loro-input, a');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroProductRow, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroProductRow, isStandalone: true, selector: "loro-product-row", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, imageName: { classPropertyName: "imageName", publicName: "imageName", isSignal: true, isRequired: false, transformFunction: null }, quantityLabel: { classPropertyName: "quantityLabel", publicName: "quantityLabel", isSignal: true, isRequired: false, transformFunction: null }, quantity: { classPropertyName: "quantity", publicName: "quantity", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, prices: { classPropertyName: "prices", publicName: "prices", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange", quantityChange: "quantityChange", increment: "increment", decrement: "decrement", rowRemove: "rowRemove" }, ngImport: i0, template: "<article\n  class=\"loro-product-row\"\n  [class.loro-product-row--basket]=\"variant() === 'basket'\"\n  [class.loro-product-row--pantry]=\"variant() === 'pantry'\"\n  [class.loro-product-row--compare]=\"variant() === 'compare'\"\n  [class.loro-product-row--divider]=\"divider()\"\n  [class.loro-product-row--checked]=\"checked()\"\n  [class.loro-product-row--dragging]=\"swipeDragging()\"\n  [class.loro-product-row--swipe-armed]=\"swipeArmed()\"\n  [class.loro-product-row--removing]=\"swipeRemoving()\"\n  [class.loro-product-row--swipe-removable]=\"isSwipeRemovable()\"\n  [class.loro-product-row--no-image]=\"!imageName()\"\n  [style.transform]=\"swipeTransform()\"\n  (touchstart)=\"onRowTouchStart($event)\"\n  (touchmove)=\"onRowTouchMove($event)\"\n  (touchend)=\"onRowTouchEnd($event)\"\n  (touchcancel)=\"onRowTouchCancel()\"\n  (click)=\"onBasketClick($event)\">\n  @if (variant() === 'basket') {\n    <button\n      type=\"button\"\n      class=\"loro-product-row__check\"\n      [class.loro-product-row__check--checked]=\"checked()\"\n      [attr.aria-label]=\"'Marcar ' + name()\"\n      (click)=\"checkedChange.emit(!checked())\">\n      @if (checked()) {\n        <loro-icon name=\"check\" [size]=\"18\" alt=\"Comprado\" color=\"inverse\" />\n      }\n    </button>\n    <span class=\"loro-product-row__selected-mark\" aria-hidden=\"true\">\n      <loro-icon name=\"tick-circle\" [size]=\"16\" alt=\"Seleccionado\" color=\"primary\" />\n    </span>\n  }\n\n  @if (imageName()) {\n    <span class=\"loro-product-row__image\">\n      <loro-image [name]=\"imageName()!\" [alt]=\"name()\" width=\"100%\" />\n    </span>\n  }\n\n  <span class=\"loro-product-row__copy\">\n    <strong>{{ name() }}</strong>\n    @if (variant() !== 'basket') {\n      <small>{{ meta() }}</small>\n    }\n  </span>\n\n  @if (variant() === 'basket') {\n    <loro-input\n      class=\"loro-product-row__stepper\"\n      variant=\"stepper\"\n      [label]=\"'Cantidad de ' + name()\"\n      [value]=\"quantityValue()\"\n      [unit]=\"unit()\"\n      [step]=\"unit() === 'kg' ? 0.5 : 1\"\n      [min]=\"unit() === 'kg' ? 0.5 : 1\"\n      [max]=\"100\"\n      (valueChange)=\"updateQuantity($event)\" />\n  }\n\n  @if (variant() === 'compare') {\n    <span class=\"loro-product-row__prices\">\n      @for (price of prices(); track price.store) {\n        <span [class.loro-product-row__price--best]=\"price.best\" class=\"loro-product-row__price\">\n          @if (price.logoName) {\n            <loro-image [name]=\"price.logoName\" [alt]=\"price.store\" width=\"100%\" height=\"100%\" fit=\"contain\" />\n          } @else {\n            <b>{{ price.store }}</b>\n          }\n          <span>{{ formatCurrency(price.value) }} \u20AC</span>\n        </span>\n      }\n    </span>\n  } @else if (variant() === 'basket') {\n    <span class=\"loro-product-row__total-stack\">\n      <small class=\"loro-product-row__unit-price\">{{ meta() }}</small>\n      <strong class=\"loro-product-row__total\">{{ formatCurrency(total()) }} \u20AC</strong>\n    </span>\n  } @else {\n    <strong class=\"loro-product-row__total\">{{ formatCurrency(total()) }} \u20AC</strong>\n  }\n\n  @if (variant() === 'pantry') {\n    <span\n      class=\"loro-product-row__status\"\n      [class.loro-product-row__status--warning]=\"status() === 'warning'\"\n      [class.loro-product-row__status--expiring]=\"status() === 'expiring'\">\n      <loro-icon\n        [name]=\"status() === 'ok' ? 'check' : 'warning'\"\n        [size]=\"status() === 'ok' ? 15 : 12\"\n        [alt]=\"status()\"\n        [color]=\"status() === 'ok' ? 'success' : status() === 'expiring' ? 'warning' : 'danger'\" />\n    </span>\n  } @else if (variant() === 'basket') {\n    <button\n      type=\"button\"\n      class=\"loro-product-row__delete-button\"\n      data-touch-hover\n      [attr.aria-label]=\"'Eliminar ' + name()\"\n      (click)=\"rowRemove.emit()\">\n      <loro-icon name=\"trash\" [size]=\"18\" alt=\"\" [decorative]=\"true\" color=\"danger\" />\n    </button>\n  }\n</article>\n@if (isSwipeRemovable()) {\n  <span class=\"loro-product-row__delete-action\" aria-hidden=\"true\" [style.transform]=\"deleteActionTransform()\">\n    <loro-icon name=\"trash-white\" [size]=\"24\" alt=\"Eliminar\" color=\"inverse\" />\n    <span>Eliminar</span>\n  </span>\n}\n", styles: [":host{display:block;position:relative;overflow:hidden;font-family:var(--loro-font-brand);--loro-product-row-selected-bg: #f4f0ff;--loro-product-row-selected-shadow: 0 .75rem 1.8rem rgba(77, 45, 183, .08)}:host-context([data-theme=dark]){--loro-product-row-selected-bg: color-mix(in srgb, var(--loro-primary-500) 18%, var(--loro-surface) 82%)}.loro-product-row{position:relative;z-index:1;display:grid;grid-template-columns:2.6rem 5.6rem minmax(0,1fr) minmax(7.8rem,auto) minmax(4.8rem,auto) 2rem;align-items:center;gap:1.2rem;min-width:0;min-height:5.35rem;padding:.55rem 1rem;background:var(--loro-surface-soft);color:var(--loro-text);transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;touch-action:pan-y;-webkit-user-select:none;user-select:none}.loro-product-row--dragging{transition:none}.loro-product-row--removing{opacity:.18;pointer-events:none;transform:translate3d(calc(-100% - 2rem),0,0)!important}.loro-product-row__delete-action{display:none}.loro-product-row--divider:after{position:absolute;right:0;bottom:0;left:0;height:1px;background:var(--loro-border-subtle);content:\"\"}.loro-product-row--pantry{grid-template-columns:4.6rem minmax(0,1fr) auto auto;gap:.9rem}.loro-product-row--compare{grid-template-columns:5.2rem minmax(8rem,1fr) minmax(14rem,2fr);border:1px solid var(--loro-border-subtle);border-radius:1rem;box-shadow:var(--loro-shadow-soft)}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:2.6rem minmax(0,1fr) minmax(7.8rem,auto) minmax(4.8rem,auto) 2rem}.loro-product-row--pantry.loro-product-row--no-image{grid-template-columns:minmax(0,1fr) auto auto}.loro-product-row--compare.loro-product-row--no-image{grid-template-columns:minmax(8rem,1fr) minmax(14rem,2fr)}.loro-product-row__check{display:grid;width:1.9rem;height:1.9rem;place-items:center;border:2px solid rgba(98,88,130,.45);border-radius:.45rem;background:var(--loro-surface);cursor:pointer}.loro-product-row__check--checked{border-color:transparent;background:var(--loro-primary-500)}.loro-product-row__selected-mark{display:none}.loro-product-row__image{display:grid;width:5.2rem;height:3.6rem;place-items:center;overflow:hidden;border-radius:.65rem;background:color-mix(in srgb,var(--loro-primary-500) 4%,var(--loro-surface-soft) 96%)}.loro-product-row__copy{display:grid;gap:.18rem;min-width:0;align-content:center}strong{color:var(--loro-text-strong);line-height:1.1;overflow-wrap:anywhere;font-weight:950}small{color:var(--loro-muted);line-height:1.2;font-weight:750}.loro-product-row__delete-button{display:grid;width:2.25rem;height:2.25rem;place-items:center;align-self:center;border:0;border-radius:.7rem;background:transparent;color:var(--loro-danger-text);font:inherit;font-weight:950;cursor:pointer;opacity:.64;transition:opacity .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease}.loro-product-row__delete-button:hover,.loro-product-row__delete-button.is-touch-hover,.loro-product-row__delete-button:focus-visible{opacity:1;background:color-mix(in srgb,var(--loro-danger-text) 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--loro-danger-text) 14%,transparent);transform:translateY(-1px)}.loro-product-row__delete-button:focus-visible{outline:3px solid color-mix(in srgb,var(--loro-danger-text) 22%,transparent);outline-offset:2px}.loro-product-row__delete-button:active{transform:translateY(0)}.loro-product-row__total{color:var(--loro-primary-700);font-size:1.2rem;text-align:right;white-space:nowrap;min-width:0}.loro-product-row__total-stack{display:grid;justify-items:end;gap:.08rem;min-width:0;align-content:center;text-align:right}.loro-product-row__unit-price{color:var(--loro-muted-strong);font-size:.78rem;line-height:1;white-space:nowrap;font-weight:850}.loro-product-row__prices{display:grid;grid-template-columns:repeat(3,minmax(4.5rem,1fr));gap:.5rem;align-items:center;justify-items:stretch}.loro-product-row__price{display:grid;justify-items:center;gap:.2rem;color:var(--loro-primary-700);min-width:0;text-align:center;font-weight:850}.loro-product-row__price loro-image{display:block;width:2.25rem;height:1.5rem}.loro-product-row__price ::ng-deep img{width:100%;height:100%;object-fit:contain}.loro-product-row__price span{overflow-wrap:anywhere;font-size:clamp(1rem,2vw,1.1rem);line-height:1.1}.loro-product-row__price--best span{padding:.25rem .85rem;border-radius:var(--loro-radius-pill);background:color-mix(in srgb,#15803d 12%,var(--loro-surface-soft) 88%);color:#15803d}.loro-product-row__status{display:grid;width:1.55rem;height:1.55rem;place-items:center;border:1.5px solid rgba(31,157,85,.42);border-radius:50%}.loro-product-row__status--warning{border-color:#dc262661}.loro-product-row__status--expiring{border-color:color-mix(in srgb,var(--loro-warning) 58%,transparent);background:color-mix(in srgb,var(--loro-warning) 7%,transparent)}@media(min-width:1024px){.loro-product-row--basket{border:1px solid transparent;cursor:pointer}.loro-product-row--basket.loro-product-row--checked{border-color:var(--loro-primary-500);background:var(--loro-product-row-selected-bg);box-shadow:var(--loro-product-row-selected-shadow)}.loro-product-row--basket .loro-product-row__check,.loro-product-row--basket .loro-product-row__delete-button,.loro-product-row--basket .loro-product-row__stepper{cursor:auto}.loro-product-row--basket .loro-product-row__check,.loro-product-row--basket .loro-product-row__delete-button{cursor:pointer}}@media(max-width:599.98px){.loro-product-row{grid-template-columns:2.4rem 6rem minmax(8rem,1fr) minmax(8.8rem,auto) minmax(4.9rem,auto) 1.8rem;gap:.9rem;min-height:4.8rem;padding:.55rem .85rem}.loro-product-row__image{width:5.4rem;height:3.65rem}.loro-product-row--basket{grid-template-columns:2.4rem 5.4rem minmax(0,1fr) minmax(4.9rem,auto) 1.8rem;grid-template-rows:auto auto;column-gap:.75rem;row-gap:.38rem}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:2.4rem minmax(0,1fr) minmax(4.9rem,auto) 1.8rem}.loro-product-row--basket .loro-product-row__check,.loro-product-row--basket .loro-product-row__selected-mark{grid-column:1;grid-row:1/span 2;align-self:center}.loro-product-row--basket .loro-product-row__image{grid-column:2;grid-row:1/span 2;align-self:center;width:5.4rem;height:3.65rem}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__copy{grid-column:2}.loro-product-row--basket .loro-product-row__copy{grid-column:3;grid-row:1;align-self:end}.loro-product-row--basket .loro-product-row__stepper{grid-column:3;grid-row:2;align-self:start;min-width:min(10rem,100%);width:min(10rem,100%);max-width:100%}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__stepper{grid-column:2}.loro-product-row--basket .loro-product-row__total-stack{grid-column:4;grid-row:1/span 2;align-self:center}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__total-stack{grid-column:3}.loro-product-row--basket .loro-product-row__delete-button{grid-column:5;grid-row:1/span 2}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__delete-button{grid-column:4}.loro-product-row--pantry{grid-template-columns:4.5rem minmax(0,1fr) auto auto}.loro-product-row--compare{grid-template-columns:4.5rem minmax(6rem,1fr) minmax(10rem,1.6fr)}.loro-product-row__stepper{min-width:8rem;width:8rem}.loro-product-row__total{font-size:1.25rem}}@media(max-width:640px){.loro-product-row{grid-template-columns:2.1rem 4.45rem minmax(5.6rem,1fr) minmax(8rem,auto) minmax(4.2rem,auto);gap:.65rem;min-height:4.8rem;padding:.55rem}.loro-product-row--basket{grid-template-columns:2.1rem 4.45rem minmax(0,1fr) minmax(4.2rem,auto);grid-template-rows:auto auto;border:1px solid var(--loro-surface);border-radius:.85rem;background:var(--loro-surface);overflow:hidden}.loro-product-row--basket .loro-product-row__check{display:grid;grid-column:1;grid-row:1/span 2;align-self:center;justify-self:center;width:1.8rem;height:1.8rem;border-radius:.55rem}.loro-product-row--basket .loro-product-row__selected-mark{display:none}.loro-product-row--basket .loro-product-row__image,.loro-product-row--basket .loro-product-row__copy,.loro-product-row--basket .loro-product-row__stepper,.loro-product-row--basket .loro-product-row__total-stack{grid-area:auto}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:2.1rem minmax(0,1fr) minmax(4.2rem,auto)}.loro-product-row--basket .loro-product-row__image{grid-column:2;grid-row:1/span 2;align-self:center}.loro-product-row--basket .loro-product-row__copy{grid-column:3;grid-row:1;align-self:end}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__copy{grid-column:2}.loro-product-row--basket .loro-product-row__stepper{grid-column:3;grid-row:2;align-self:start}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__stepper{grid-column:2}.loro-product-row--basket .loro-product-row__total-stack{grid-column:4;grid-row:1/span 2;align-self:center}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__total-stack{grid-column:3}.loro-product-row--basket .loro-product-row__delete-button{display:none}.loro-product-row--basket.loro-product-row--checked{border-color:var(--loro-primary-500);background:var(--loro-product-row-selected-bg);box-shadow:var(--loro-product-row-selected-shadow)}.loro-product-row--basket.loro-product-row--dragging{box-shadow:0 1rem 2.2rem #4d2db71f}.loro-product-row__delete-action{position:absolute;inset:0 0 0 auto;z-index:0;display:grid;width:10rem;align-content:center;justify-items:center;gap:.35rem;place-items:center;padding-inline-start:1.75rem;border-radius:0 .85rem .85rem 0;background:linear-gradient(135deg,#ff4d5f,#dc2626);color:#fff;font-size:.82rem;font-weight:900;opacity:0;transition:opacity .16s ease,transform .16s ease}.loro-product-row__delete-action span{color:inherit;line-height:1}.loro-product-row--dragging+.loro-product-row__delete-action,.loro-product-row--swipe-armed+.loro-product-row__delete-action,.loro-product-row--removing+.loro-product-row__delete-action{opacity:1}.loro-product-row__image{width:4.45rem;height:3.35rem}.loro-product-row--basket .loro-product-row__stepper{min-width:min(10rem,100%);width:min(10rem,100%)}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper{grid-template-columns:1.45rem minmax(3.15rem,1fr) 1.45rem;min-height:2.05rem;border-radius:.72rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input__stepper-value{min-width:0;overflow:hidden;gap:.14rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper input{min-width:1.75rem;max-width:2.35rem;overflow:hidden;text-overflow:clip;white-space:nowrap}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper-kg input{min-width:2.05rem;max-width:2.35rem}.loro-product-row__total{align-self:center;font-size:clamp(.92rem,3.4vw,1.05rem);letter-spacing:0}.loro-product-row__unit-price{font-size:clamp(.62rem,2.4vw,.72rem)}.loro-product-row--basket .loro-product-row__copy strong{overflow-wrap:normal;word-break:normal;font-size:clamp(.82rem,3.6vw,.95rem);line-height:1.05}.loro-product-row--basket .loro-product-row__copy small{font-size:clamp(.7rem,3vw,.82rem);line-height:1.05}.loro-product-row--pantry{grid-template-columns:4.8rem minmax(0,1fr) auto auto;gap:.7rem;min-height:5.8rem}.loro-product-row--pantry .loro-product-row__image{width:4.8rem;height:3.5rem}.loro-product-row--pantry .loro-product-row__copy strong{font-size:.96rem}.loro-product-row--pantry .loro-product-row__copy small{font-size:.82rem}.loro-product-row--pantry .loro-product-row__total{font-size:.98rem}.loro-product-row--compare{grid-template-columns:4.35rem minmax(6.2rem,1fr) minmax(9rem,1.55fr);gap:.6rem;min-height:5.8rem;padding:.75rem .8rem}.loro-product-row--compare .loro-product-row__image{width:4.35rem;height:3.35rem;border-radius:.8rem}.loro-product-row--compare .loro-product-row__copy strong{font-size:clamp(.88rem,3.6vw,1rem)}.loro-product-row--compare .loro-product-row__copy small{font-size:clamp(.74rem,2.9vw,.84rem)}.loro-product-row--compare .loro-product-row__prices{grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem;align-self:stretch;align-items:center}.loro-product-row--compare .loro-product-row__price{gap:.15rem;align-content:center}.loro-product-row--compare .loro-product-row__price loro-image{width:2rem;height:1.2rem}.loro-product-row--compare .loro-product-row__price span{font-size:clamp(.78rem,3.2vw,.92rem)}.loro-product-row--compare .loro-product-row__price--best span{padding:.22rem .5rem}}@media(max-width:430px){.loro-product-row--basket{grid-template-columns:1.9rem 3.3rem minmax(0,1fr) minmax(3.35rem,auto);gap:.45rem;min-height:4.3rem;padding:.45rem}.loro-product-row--basket .loro-product-row__check{width:1.6rem;height:1.6rem}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:1.9rem minmax(0,1fr) minmax(3.35rem,auto)}.loro-product-row--basket .loro-product-row__image{width:3.3rem;height:2.75rem;border-radius:.55rem}.loro-product-row--basket .loro-product-row__stepper{min-width:min(10rem,100%);width:min(10rem,100%)}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper{grid-template-columns:1.28rem minmax(3.05rem,1fr) 1.28rem;min-height:2rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input__stepper-value{min-width:0;gap:.1rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper input{min-width:1.65rem;max-width:2.2rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper-kg input{min-width:1.95rem;max-width:2.2rem}.loro-product-row--basket .loro-product-row__copy strong{font-size:.78rem}.loro-product-row--basket .loro-product-row__copy small{font-size:.68rem}.loro-product-row--basket .loro-product-row__total{font-size:.98rem}.loro-product-row--compare{grid-template-columns:4rem minmax(5.2rem,1fr) minmax(8.1rem,1.45fr);gap:.5rem;padding:.7rem}.loro-product-row--compare .loro-product-row__image{width:4rem;height:3.1rem}.loro-product-row--compare .loro-product-row__copy strong{font-size:clamp(.82rem,3.8vw,.94rem)}.loro-product-row--compare .loro-product-row__copy small{font-size:clamp(.7rem,3vw,.8rem)}.loro-product-row--compare .loro-product-row__price span{font-size:clamp(.74rem,3.2vw,.86rem)}.loro-product-row--compare .loro-product-row__price loro-image{width:1.9rem;height:1.1rem}}@media(max-width:380px){.loro-product-row--basket{grid-template-columns:1.85rem 3.15rem minmax(0,1fr) minmax(3.25rem,auto);grid-template-rows:auto auto;column-gap:.32rem;row-gap:.28rem;min-height:4.75rem;padding:.5rem}.loro-product-row--basket .loro-product-row__check{grid-column:1;grid-row:1/span 2;align-self:center;width:1.55rem;height:1.55rem}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:1.85rem minmax(0,1fr) minmax(3.25rem,auto)}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__copy,.loro-product-row--basket.loro-product-row--no-image .loro-product-row__stepper{grid-column:2}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__total-stack{grid-column:3}.loro-product-row--basket .loro-product-row__image{grid-column:2;grid-row:1/span 2;align-self:center;width:3.15rem;height:2.65rem}.loro-product-row--basket .loro-product-row__copy{grid-column:3;grid-row:1;align-self:end;padding-inline-end:.25rem}.loro-product-row--basket .loro-product-row__stepper{grid-column:3;grid-row:2;align-self:start;min-width:min(10rem,100%);width:min(10rem,100%)}.loro-product-row--basket .loro-product-row__total-stack{grid-column:4;grid-row:1/span 2;align-self:center}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper{grid-template-columns:1.35rem minmax(3.25rem,1fr) 1.35rem;min-height:1.85rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper input{min-width:1.55rem;max-width:2rem;font-size:.82rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input__stepper-value span{min-width:.95rem;font-size:.78rem}}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroImage, selector: "loro-image", inputs: ["name", "alt", "size", "width", "height", "fit"] }, { kind: "component", type: LoroInput, selector: "loro-input", inputs: ["label", "placeholder", "helperText", "value", "type", "name", "autocomplete", "inputmode", "icon", "iconSize", "trailingIcon", "trailingIconSize", "trailingAriaLabel", "variant", "state", "errorMessage", "errors", "invalid", "disabled", "readonly", "required", "touched", "unit", "step", "min", "max"], outputs: ["valueChange", "touchedChange", "trailingClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroProductRow, isStandalone: true, selector: "loro-product-row", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, imageName: { classPropertyName: "imageName", publicName: "imageName", isSignal: true, isRequired: false, transformFunction: null }, quantityLabel: { classPropertyName: "quantityLabel", publicName: "quantityLabel", isSignal: true, isRequired: false, transformFunction: null }, quantity: { classPropertyName: "quantity", publicName: "quantity", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, prices: { classPropertyName: "prices", publicName: "prices", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange", quantityChange: "quantityChange", increment: "increment", decrement: "decrement", rowRemove: "rowRemove" }, ngImport: i0, template: "<article\n  class=\"loro-product-row\"\n  [class.loro-product-row--basket]=\"variant() === 'basket'\"\n  [class.loro-product-row--pantry]=\"variant() === 'pantry'\"\n  [class.loro-product-row--compare]=\"variant() === 'compare'\"\n  [class.loro-product-row--divider]=\"divider()\"\n  [class.loro-product-row--checked]=\"checked()\"\n  [class.loro-product-row--dragging]=\"swipeDragging()\"\n  [class.loro-product-row--swipe-armed]=\"swipeArmed()\"\n  [class.loro-product-row--removing]=\"swipeRemoving()\"\n  [class.loro-product-row--swipe-removable]=\"isSwipeRemovable()\"\n  [class.loro-product-row--no-image]=\"!imageName()\"\n  [style.transform]=\"swipeTransform()\"\n  (touchstart)=\"onRowTouchStart($event)\"\n  (touchmove)=\"onRowTouchMove($event)\"\n  (touchend)=\"onRowTouchEnd($event)\"\n  (touchcancel)=\"onRowTouchCancel()\"\n  (click)=\"onBasketClick($event)\">\n  @if (variant() === 'basket') {\n    <button\n      type=\"button\"\n      class=\"loro-product-row__check\"\n      [class.loro-product-row__check--checked]=\"checked()\"\n      [attr.aria-label]=\"'Marcar ' + name()\"\n      (click)=\"checkedChange.emit(!checked())\">\n      @if (checked()) {\n        <loro-icon name=\"check\" [size]=\"18\" alt=\"Comprado\" color=\"inverse\" />\n      }\n    </button>\n    <span class=\"loro-product-row__selected-mark\" aria-hidden=\"true\">\n      <loro-icon name=\"tick-circle\" [size]=\"16\" alt=\"Seleccionado\" color=\"primary\" />\n    </span>\n  }\n\n  @if (imageName()) {\n    <span class=\"loro-product-row__image\">\n      <loro-image [name]=\"imageName()!\" [alt]=\"name()\" width=\"100%\" />\n    </span>\n  }\n\n  <span class=\"loro-product-row__copy\">\n    <strong>{{ name() }}</strong>\n    @if (variant() !== 'basket') {\n      <small>{{ meta() }}</small>\n    }\n  </span>\n\n  @if (variant() === 'basket') {\n    <loro-input\n      class=\"loro-product-row__stepper\"\n      variant=\"stepper\"\n      [label]=\"'Cantidad de ' + name()\"\n      [value]=\"quantityValue()\"\n      [unit]=\"unit()\"\n      [step]=\"unit() === 'kg' ? 0.5 : 1\"\n      [min]=\"unit() === 'kg' ? 0.5 : 1\"\n      [max]=\"100\"\n      (valueChange)=\"updateQuantity($event)\" />\n  }\n\n  @if (variant() === 'compare') {\n    <span class=\"loro-product-row__prices\">\n      @for (price of prices(); track price.store) {\n        <span [class.loro-product-row__price--best]=\"price.best\" class=\"loro-product-row__price\">\n          @if (price.logoName) {\n            <loro-image [name]=\"price.logoName\" [alt]=\"price.store\" width=\"100%\" height=\"100%\" fit=\"contain\" />\n          } @else {\n            <b>{{ price.store }}</b>\n          }\n          <span>{{ formatCurrency(price.value) }} \u20AC</span>\n        </span>\n      }\n    </span>\n  } @else if (variant() === 'basket') {\n    <span class=\"loro-product-row__total-stack\">\n      <small class=\"loro-product-row__unit-price\">{{ meta() }}</small>\n      <strong class=\"loro-product-row__total\">{{ formatCurrency(total()) }} \u20AC</strong>\n    </span>\n  } @else {\n    <strong class=\"loro-product-row__total\">{{ formatCurrency(total()) }} \u20AC</strong>\n  }\n\n  @if (variant() === 'pantry') {\n    <span\n      class=\"loro-product-row__status\"\n      [class.loro-product-row__status--warning]=\"status() === 'warning'\"\n      [class.loro-product-row__status--expiring]=\"status() === 'expiring'\">\n      <loro-icon\n        [name]=\"status() === 'ok' ? 'check' : 'warning'\"\n        [size]=\"status() === 'ok' ? 15 : 12\"\n        [alt]=\"status()\"\n        [color]=\"status() === 'ok' ? 'success' : status() === 'expiring' ? 'warning' : 'danger'\" />\n    </span>\n  } @else if (variant() === 'basket') {\n    <button\n      type=\"button\"\n      class=\"loro-product-row__delete-button\"\n      data-touch-hover\n      [attr.aria-label]=\"'Eliminar ' + name()\"\n      (click)=\"rowRemove.emit()\">\n      <loro-icon name=\"trash\" [size]=\"18\" alt=\"\" [decorative]=\"true\" color=\"danger\" />\n    </button>\n  }\n</article>\n@if (isSwipeRemovable()) {\n  <span class=\"loro-product-row__delete-action\" aria-hidden=\"true\" [style.transform]=\"deleteActionTransform()\">\n    <loro-icon name=\"trash-white\" [size]=\"24\" alt=\"Eliminar\" color=\"inverse\" />\n    <span>Eliminar</span>\n  </span>\n}\n", styles: [":host{display:block;position:relative;overflow:hidden;font-family:var(--loro-font-brand);--loro-product-row-selected-bg: #f4f0ff;--loro-product-row-selected-shadow: 0 .75rem 1.8rem rgba(77, 45, 183, .08)}:host-context([data-theme=dark]){--loro-product-row-selected-bg: color-mix(in srgb, var(--loro-primary-500) 18%, var(--loro-surface) 82%)}.loro-product-row{position:relative;z-index:1;display:grid;grid-template-columns:2.6rem 5.6rem minmax(0,1fr) minmax(7.8rem,auto) minmax(4.8rem,auto) 2rem;align-items:center;gap:1.2rem;min-width:0;min-height:5.35rem;padding:.55rem 1rem;background:var(--loro-surface-soft);color:var(--loro-text);transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;touch-action:pan-y;-webkit-user-select:none;user-select:none}.loro-product-row--dragging{transition:none}.loro-product-row--removing{opacity:.18;pointer-events:none;transform:translate3d(calc(-100% - 2rem),0,0)!important}.loro-product-row__delete-action{display:none}.loro-product-row--divider:after{position:absolute;right:0;bottom:0;left:0;height:1px;background:var(--loro-border-subtle);content:\"\"}.loro-product-row--pantry{grid-template-columns:4.6rem minmax(0,1fr) auto auto;gap:.9rem}.loro-product-row--compare{grid-template-columns:5.2rem minmax(8rem,1fr) minmax(14rem,2fr);border:1px solid var(--loro-border-subtle);border-radius:1rem;box-shadow:var(--loro-shadow-soft)}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:2.6rem minmax(0,1fr) minmax(7.8rem,auto) minmax(4.8rem,auto) 2rem}.loro-product-row--pantry.loro-product-row--no-image{grid-template-columns:minmax(0,1fr) auto auto}.loro-product-row--compare.loro-product-row--no-image{grid-template-columns:minmax(8rem,1fr) minmax(14rem,2fr)}.loro-product-row__check{display:grid;width:1.9rem;height:1.9rem;place-items:center;border:2px solid rgba(98,88,130,.45);border-radius:.45rem;background:var(--loro-surface);cursor:pointer}.loro-product-row__check--checked{border-color:transparent;background:var(--loro-primary-500)}.loro-product-row__selected-mark{display:none}.loro-product-row__image{display:grid;width:5.2rem;height:3.6rem;place-items:center;overflow:hidden;border-radius:.65rem;background:color-mix(in srgb,var(--loro-primary-500) 4%,var(--loro-surface-soft) 96%)}.loro-product-row__copy{display:grid;gap:.18rem;min-width:0;align-content:center}strong{color:var(--loro-text-strong);line-height:1.1;overflow-wrap:anywhere;font-weight:950}small{color:var(--loro-muted);line-height:1.2;font-weight:750}.loro-product-row__delete-button{display:grid;width:2.25rem;height:2.25rem;place-items:center;align-self:center;border:0;border-radius:.7rem;background:transparent;color:var(--loro-danger-text);font:inherit;font-weight:950;cursor:pointer;opacity:.64;transition:opacity .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease}.loro-product-row__delete-button:hover,.loro-product-row__delete-button.is-touch-hover,.loro-product-row__delete-button:focus-visible{opacity:1;background:color-mix(in srgb,var(--loro-danger-text) 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--loro-danger-text) 14%,transparent);transform:translateY(-1px)}.loro-product-row__delete-button:focus-visible{outline:3px solid color-mix(in srgb,var(--loro-danger-text) 22%,transparent);outline-offset:2px}.loro-product-row__delete-button:active{transform:translateY(0)}.loro-product-row__total{color:var(--loro-primary-700);font-size:1.2rem;text-align:right;white-space:nowrap;min-width:0}.loro-product-row__total-stack{display:grid;justify-items:end;gap:.08rem;min-width:0;align-content:center;text-align:right}.loro-product-row__unit-price{color:var(--loro-muted-strong);font-size:.78rem;line-height:1;white-space:nowrap;font-weight:850}.loro-product-row__prices{display:grid;grid-template-columns:repeat(3,minmax(4.5rem,1fr));gap:.5rem;align-items:center;justify-items:stretch}.loro-product-row__price{display:grid;justify-items:center;gap:.2rem;color:var(--loro-primary-700);min-width:0;text-align:center;font-weight:850}.loro-product-row__price loro-image{display:block;width:2.25rem;height:1.5rem}.loro-product-row__price ::ng-deep img{width:100%;height:100%;object-fit:contain}.loro-product-row__price span{overflow-wrap:anywhere;font-size:clamp(1rem,2vw,1.1rem);line-height:1.1}.loro-product-row__price--best span{padding:.25rem .85rem;border-radius:var(--loro-radius-pill);background:color-mix(in srgb,#15803d 12%,var(--loro-surface-soft) 88%);color:#15803d}.loro-product-row__status{display:grid;width:1.55rem;height:1.55rem;place-items:center;border:1.5px solid rgba(31,157,85,.42);border-radius:50%}.loro-product-row__status--warning{border-color:#dc262661}.loro-product-row__status--expiring{border-color:color-mix(in srgb,var(--loro-warning) 58%,transparent);background:color-mix(in srgb,var(--loro-warning) 7%,transparent)}@media(min-width:1024px){.loro-product-row--basket{border:1px solid transparent;cursor:pointer}.loro-product-row--basket.loro-product-row--checked{border-color:var(--loro-primary-500);background:var(--loro-product-row-selected-bg);box-shadow:var(--loro-product-row-selected-shadow)}.loro-product-row--basket .loro-product-row__check,.loro-product-row--basket .loro-product-row__delete-button,.loro-product-row--basket .loro-product-row__stepper{cursor:auto}.loro-product-row--basket .loro-product-row__check,.loro-product-row--basket .loro-product-row__delete-button{cursor:pointer}}@media(max-width:479.99px)and (orientation:portrait){.loro-product-row{grid-template-columns:2.4rem 6rem minmax(8rem,1fr) minmax(8.8rem,auto) minmax(4.9rem,auto) 1.8rem;gap:.9rem;min-height:4.8rem;padding:.55rem .85rem}.loro-product-row__image{width:5.4rem;height:3.65rem}.loro-product-row--basket{grid-template-columns:2.4rem 5.4rem minmax(0,1fr) minmax(4.9rem,auto) 1.8rem;grid-template-rows:auto auto;column-gap:.75rem;row-gap:.38rem}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:2.4rem minmax(0,1fr) minmax(4.9rem,auto) 1.8rem}.loro-product-row--basket .loro-product-row__check,.loro-product-row--basket .loro-product-row__selected-mark{grid-column:1;grid-row:1/span 2;align-self:center}.loro-product-row--basket .loro-product-row__image{grid-column:2;grid-row:1/span 2;align-self:center;width:5.4rem;height:3.65rem}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__copy{grid-column:2}.loro-product-row--basket .loro-product-row__copy{grid-column:3;grid-row:1;align-self:end}.loro-product-row--basket .loro-product-row__stepper{grid-column:3;grid-row:2;align-self:start;min-width:min(10rem,100%);width:min(10rem,100%);max-width:100%}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__stepper{grid-column:2}.loro-product-row--basket .loro-product-row__total-stack{grid-column:4;grid-row:1/span 2;align-self:center}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__total-stack{grid-column:3}.loro-product-row--basket .loro-product-row__delete-button{grid-column:5;grid-row:1/span 2}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__delete-button{grid-column:4}.loro-product-row--pantry{grid-template-columns:4.5rem minmax(0,1fr) auto auto}.loro-product-row--compare{grid-template-columns:4.5rem minmax(6rem,1fr) minmax(10rem,1.6fr)}.loro-product-row__stepper{min-width:8rem;width:8rem}.loro-product-row__total{font-size:1.25rem}}@media(max-width:640px){.loro-product-row{grid-template-columns:2.1rem 4.45rem minmax(5.6rem,1fr) minmax(8rem,auto) minmax(4.2rem,auto);gap:.65rem;min-height:4.8rem;padding:.55rem}.loro-product-row--basket{grid-template-columns:2.1rem 4.45rem minmax(0,1fr) minmax(4.2rem,auto);grid-template-rows:auto auto;border:1px solid var(--loro-surface);border-radius:.85rem;background:var(--loro-surface);overflow:hidden}.loro-product-row--basket .loro-product-row__check{display:grid;grid-column:1;grid-row:1/span 2;align-self:center;justify-self:center;width:1.8rem;height:1.8rem;border-radius:.55rem}.loro-product-row--basket .loro-product-row__selected-mark{display:none}.loro-product-row--basket .loro-product-row__image,.loro-product-row--basket .loro-product-row__copy,.loro-product-row--basket .loro-product-row__stepper,.loro-product-row--basket .loro-product-row__total-stack{grid-area:auto}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:2.1rem minmax(0,1fr) minmax(4.2rem,auto)}.loro-product-row--basket .loro-product-row__image{grid-column:2;grid-row:1/span 2;align-self:center}.loro-product-row--basket .loro-product-row__copy{grid-column:3;grid-row:1;align-self:end}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__copy{grid-column:2}.loro-product-row--basket .loro-product-row__stepper{grid-column:3;grid-row:2;align-self:start}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__stepper{grid-column:2}.loro-product-row--basket .loro-product-row__total-stack{grid-column:4;grid-row:1/span 2;align-self:center}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__total-stack{grid-column:3}.loro-product-row--basket .loro-product-row__delete-button{display:none}.loro-product-row--basket.loro-product-row--checked{border-color:var(--loro-primary-500);background:var(--loro-product-row-selected-bg);box-shadow:var(--loro-product-row-selected-shadow)}.loro-product-row--basket.loro-product-row--dragging{box-shadow:0 1rem 2.2rem #4d2db71f}.loro-product-row__delete-action{position:absolute;inset:0 0 0 auto;z-index:0;display:grid;width:10rem;align-content:center;justify-items:center;gap:.35rem;place-items:center;padding-inline-start:1.75rem;border-radius:0 .85rem .85rem 0;background:linear-gradient(135deg,#ff4d5f,#dc2626);color:#fff;font-size:.82rem;font-weight:900;opacity:0;transition:opacity .16s ease,transform .16s ease}.loro-product-row__delete-action span{color:inherit;line-height:1}.loro-product-row--dragging+.loro-product-row__delete-action,.loro-product-row--swipe-armed+.loro-product-row__delete-action,.loro-product-row--removing+.loro-product-row__delete-action{opacity:1}.loro-product-row__image{width:4.45rem;height:3.35rem}.loro-product-row--basket .loro-product-row__stepper{min-width:min(10rem,100%);width:min(10rem,100%)}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper{grid-template-columns:1.45rem minmax(3.15rem,1fr) 1.45rem;min-height:2.05rem;border-radius:.72rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input__stepper-value{min-width:0;overflow:hidden;gap:.14rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper input{min-width:1.75rem;max-width:2.35rem;overflow:hidden;text-overflow:clip;white-space:nowrap}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper-kg input{min-width:2.05rem;max-width:2.35rem}.loro-product-row__total{align-self:center;font-size:clamp(.92rem,3.4vw,1.05rem);letter-spacing:0}.loro-product-row__unit-price{font-size:clamp(.62rem,2.4vw,.72rem)}.loro-product-row--basket .loro-product-row__copy strong{overflow-wrap:normal;word-break:normal;font-size:clamp(.82rem,3.6vw,.95rem);line-height:1.05}.loro-product-row--basket .loro-product-row__copy small{font-size:clamp(.7rem,3vw,.82rem);line-height:1.05}.loro-product-row--pantry{grid-template-columns:4.8rem minmax(0,1fr) auto auto;gap:.7rem;min-height:5.8rem}.loro-product-row--pantry .loro-product-row__image{width:4.8rem;height:3.5rem}.loro-product-row--pantry .loro-product-row__copy strong{font-size:.96rem}.loro-product-row--pantry .loro-product-row__copy small{font-size:.82rem}.loro-product-row--pantry .loro-product-row__total{font-size:.98rem}.loro-product-row--compare{grid-template-columns:4.35rem minmax(6.2rem,1fr) minmax(9rem,1.55fr);gap:.6rem;min-height:5.8rem;padding:.75rem .8rem}.loro-product-row--compare .loro-product-row__image{width:4.35rem;height:3.35rem;border-radius:.8rem}.loro-product-row--compare .loro-product-row__copy strong{font-size:clamp(.88rem,3.6vw,1rem)}.loro-product-row--compare .loro-product-row__copy small{font-size:clamp(.74rem,2.9vw,.84rem)}.loro-product-row--compare .loro-product-row__prices{grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem;align-self:stretch;align-items:center}.loro-product-row--compare .loro-product-row__price{gap:.15rem;align-content:center}.loro-product-row--compare .loro-product-row__price loro-image{width:2rem;height:1.2rem}.loro-product-row--compare .loro-product-row__price span{font-size:clamp(.78rem,3.2vw,.92rem)}.loro-product-row--compare .loro-product-row__price--best span{padding:.22rem .5rem}}@media(max-width:430px){.loro-product-row--basket{grid-template-columns:1.9rem 3.3rem minmax(0,1fr) minmax(3.35rem,auto);gap:.45rem;min-height:4.3rem;padding:.45rem}.loro-product-row--basket .loro-product-row__check{width:1.6rem;height:1.6rem}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:1.9rem minmax(0,1fr) minmax(3.35rem,auto)}.loro-product-row--basket .loro-product-row__image{width:3.3rem;height:2.75rem;border-radius:.55rem}.loro-product-row--basket .loro-product-row__stepper{min-width:min(10rem,100%);width:min(10rem,100%)}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper{grid-template-columns:1.28rem minmax(3.05rem,1fr) 1.28rem;min-height:2rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input__stepper-value{min-width:0;gap:.1rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper input{min-width:1.65rem;max-width:2.2rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper-kg input{min-width:1.95rem;max-width:2.2rem}.loro-product-row--basket .loro-product-row__copy strong{font-size:.78rem}.loro-product-row--basket .loro-product-row__copy small{font-size:.68rem}.loro-product-row--basket .loro-product-row__total{font-size:.98rem}.loro-product-row--compare{grid-template-columns:4rem minmax(5.2rem,1fr) minmax(8.1rem,1.45fr);gap:.5rem;padding:.7rem}.loro-product-row--compare .loro-product-row__image{width:4rem;height:3.1rem}.loro-product-row--compare .loro-product-row__copy strong{font-size:clamp(.82rem,3.8vw,.94rem)}.loro-product-row--compare .loro-product-row__copy small{font-size:clamp(.7rem,3vw,.8rem)}.loro-product-row--compare .loro-product-row__price span{font-size:clamp(.74rem,3.2vw,.86rem)}.loro-product-row--compare .loro-product-row__price loro-image{width:1.9rem;height:1.1rem}}@media(max-width:380px){.loro-product-row--basket{grid-template-columns:1.85rem 3.15rem minmax(0,1fr) minmax(3.25rem,auto);grid-template-rows:auto auto;column-gap:.32rem;row-gap:.28rem;min-height:4.75rem;padding:.5rem}.loro-product-row--basket .loro-product-row__check{grid-column:1;grid-row:1/span 2;align-self:center;width:1.55rem;height:1.55rem}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:1.85rem minmax(0,1fr) minmax(3.25rem,auto)}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__copy,.loro-product-row--basket.loro-product-row--no-image .loro-product-row__stepper{grid-column:2}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__total-stack{grid-column:3}.loro-product-row--basket .loro-product-row__image{grid-column:2;grid-row:1/span 2;align-self:center;width:3.15rem;height:2.65rem}.loro-product-row--basket .loro-product-row__copy{grid-column:3;grid-row:1;align-self:end;padding-inline-end:.25rem}.loro-product-row--basket .loro-product-row__stepper{grid-column:3;grid-row:2;align-self:start;min-width:min(10rem,100%);width:min(10rem,100%)}.loro-product-row--basket .loro-product-row__total-stack{grid-column:4;grid-row:1/span 2;align-self:center}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper{grid-template-columns:1.35rem minmax(3.25rem,1fr) 1.35rem;min-height:1.85rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper input{min-width:1.55rem;max-width:2rem;font-size:.82rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input__stepper-value span{min-width:.95rem;font-size:.78rem}}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroImage, selector: "loro-image", inputs: ["name", "alt", "size", "width", "height", "fit"] }, { kind: "component", type: LoroInput, selector: "loro-input", inputs: ["label", "placeholder", "helperText", "value", "type", "name", "autocomplete", "inputmode", "icon", "iconSize", "trailingIcon", "trailingIconSize", "trailingAriaLabel", "variant", "state", "errorMessage", "errors", "invalid", "disabled", "readonly", "required", "touched", "unit", "step", "min", "max"], outputs: ["valueChange", "touchedChange", "trailingClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroProductRow, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-product-row', standalone: true, imports: [LoroIcon, LoroImage, LoroInput], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article\n  class=\"loro-product-row\"\n  [class.loro-product-row--basket]=\"variant() === 'basket'\"\n  [class.loro-product-row--pantry]=\"variant() === 'pantry'\"\n  [class.loro-product-row--compare]=\"variant() === 'compare'\"\n  [class.loro-product-row--divider]=\"divider()\"\n  [class.loro-product-row--checked]=\"checked()\"\n  [class.loro-product-row--dragging]=\"swipeDragging()\"\n  [class.loro-product-row--swipe-armed]=\"swipeArmed()\"\n  [class.loro-product-row--removing]=\"swipeRemoving()\"\n  [class.loro-product-row--swipe-removable]=\"isSwipeRemovable()\"\n  [class.loro-product-row--no-image]=\"!imageName()\"\n  [style.transform]=\"swipeTransform()\"\n  (touchstart)=\"onRowTouchStart($event)\"\n  (touchmove)=\"onRowTouchMove($event)\"\n  (touchend)=\"onRowTouchEnd($event)\"\n  (touchcancel)=\"onRowTouchCancel()\"\n  (click)=\"onBasketClick($event)\">\n  @if (variant() === 'basket') {\n    <button\n      type=\"button\"\n      class=\"loro-product-row__check\"\n      [class.loro-product-row__check--checked]=\"checked()\"\n      [attr.aria-label]=\"'Marcar ' + name()\"\n      (click)=\"checkedChange.emit(!checked())\">\n      @if (checked()) {\n        <loro-icon name=\"check\" [size]=\"18\" alt=\"Comprado\" color=\"inverse\" />\n      }\n    </button>\n    <span class=\"loro-product-row__selected-mark\" aria-hidden=\"true\">\n      <loro-icon name=\"tick-circle\" [size]=\"16\" alt=\"Seleccionado\" color=\"primary\" />\n    </span>\n  }\n\n  @if (imageName()) {\n    <span class=\"loro-product-row__image\">\n      <loro-image [name]=\"imageName()!\" [alt]=\"name()\" width=\"100%\" />\n    </span>\n  }\n\n  <span class=\"loro-product-row__copy\">\n    <strong>{{ name() }}</strong>\n    @if (variant() !== 'basket') {\n      <small>{{ meta() }}</small>\n    }\n  </span>\n\n  @if (variant() === 'basket') {\n    <loro-input\n      class=\"loro-product-row__stepper\"\n      variant=\"stepper\"\n      [label]=\"'Cantidad de ' + name()\"\n      [value]=\"quantityValue()\"\n      [unit]=\"unit()\"\n      [step]=\"unit() === 'kg' ? 0.5 : 1\"\n      [min]=\"unit() === 'kg' ? 0.5 : 1\"\n      [max]=\"100\"\n      (valueChange)=\"updateQuantity($event)\" />\n  }\n\n  @if (variant() === 'compare') {\n    <span class=\"loro-product-row__prices\">\n      @for (price of prices(); track price.store) {\n        <span [class.loro-product-row__price--best]=\"price.best\" class=\"loro-product-row__price\">\n          @if (price.logoName) {\n            <loro-image [name]=\"price.logoName\" [alt]=\"price.store\" width=\"100%\" height=\"100%\" fit=\"contain\" />\n          } @else {\n            <b>{{ price.store }}</b>\n          }\n          <span>{{ formatCurrency(price.value) }} \u20AC</span>\n        </span>\n      }\n    </span>\n  } @else if (variant() === 'basket') {\n    <span class=\"loro-product-row__total-stack\">\n      <small class=\"loro-product-row__unit-price\">{{ meta() }}</small>\n      <strong class=\"loro-product-row__total\">{{ formatCurrency(total()) }} \u20AC</strong>\n    </span>\n  } @else {\n    <strong class=\"loro-product-row__total\">{{ formatCurrency(total()) }} \u20AC</strong>\n  }\n\n  @if (variant() === 'pantry') {\n    <span\n      class=\"loro-product-row__status\"\n      [class.loro-product-row__status--warning]=\"status() === 'warning'\"\n      [class.loro-product-row__status--expiring]=\"status() === 'expiring'\">\n      <loro-icon\n        [name]=\"status() === 'ok' ? 'check' : 'warning'\"\n        [size]=\"status() === 'ok' ? 15 : 12\"\n        [alt]=\"status()\"\n        [color]=\"status() === 'ok' ? 'success' : status() === 'expiring' ? 'warning' : 'danger'\" />\n    </span>\n  } @else if (variant() === 'basket') {\n    <button\n      type=\"button\"\n      class=\"loro-product-row__delete-button\"\n      data-touch-hover\n      [attr.aria-label]=\"'Eliminar ' + name()\"\n      (click)=\"rowRemove.emit()\">\n      <loro-icon name=\"trash\" [size]=\"18\" alt=\"\" [decorative]=\"true\" color=\"danger\" />\n    </button>\n  }\n</article>\n@if (isSwipeRemovable()) {\n  <span class=\"loro-product-row__delete-action\" aria-hidden=\"true\" [style.transform]=\"deleteActionTransform()\">\n    <loro-icon name=\"trash-white\" [size]=\"24\" alt=\"Eliminar\" color=\"inverse\" />\n    <span>Eliminar</span>\n  </span>\n}\n", styles: [":host{display:block;position:relative;overflow:hidden;font-family:var(--loro-font-brand);--loro-product-row-selected-bg: #f4f0ff;--loro-product-row-selected-shadow: 0 .75rem 1.8rem rgba(77, 45, 183, .08)}:host-context([data-theme=dark]){--loro-product-row-selected-bg: color-mix(in srgb, var(--loro-primary-500) 18%, var(--loro-surface) 82%)}.loro-product-row{position:relative;z-index:1;display:grid;grid-template-columns:2.6rem 5.6rem minmax(0,1fr) minmax(7.8rem,auto) minmax(4.8rem,auto) 2rem;align-items:center;gap:1.2rem;min-width:0;min-height:5.35rem;padding:.55rem 1rem;background:var(--loro-surface-soft);color:var(--loro-text);transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;touch-action:pan-y;-webkit-user-select:none;user-select:none}.loro-product-row--dragging{transition:none}.loro-product-row--removing{opacity:.18;pointer-events:none;transform:translate3d(calc(-100% - 2rem),0,0)!important}.loro-product-row__delete-action{display:none}.loro-product-row--divider:after{position:absolute;right:0;bottom:0;left:0;height:1px;background:var(--loro-border-subtle);content:\"\"}.loro-product-row--pantry{grid-template-columns:4.6rem minmax(0,1fr) auto auto;gap:.9rem}.loro-product-row--compare{grid-template-columns:5.2rem minmax(8rem,1fr) minmax(14rem,2fr);border:1px solid var(--loro-border-subtle);border-radius:1rem;box-shadow:var(--loro-shadow-soft)}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:2.6rem minmax(0,1fr) minmax(7.8rem,auto) minmax(4.8rem,auto) 2rem}.loro-product-row--pantry.loro-product-row--no-image{grid-template-columns:minmax(0,1fr) auto auto}.loro-product-row--compare.loro-product-row--no-image{grid-template-columns:minmax(8rem,1fr) minmax(14rem,2fr)}.loro-product-row__check{display:grid;width:1.9rem;height:1.9rem;place-items:center;border:2px solid rgba(98,88,130,.45);border-radius:.45rem;background:var(--loro-surface);cursor:pointer}.loro-product-row__check--checked{border-color:transparent;background:var(--loro-primary-500)}.loro-product-row__selected-mark{display:none}.loro-product-row__image{display:grid;width:5.2rem;height:3.6rem;place-items:center;overflow:hidden;border-radius:.65rem;background:color-mix(in srgb,var(--loro-primary-500) 4%,var(--loro-surface-soft) 96%)}.loro-product-row__copy{display:grid;gap:.18rem;min-width:0;align-content:center}strong{color:var(--loro-text-strong);line-height:1.1;overflow-wrap:anywhere;font-weight:950}small{color:var(--loro-muted);line-height:1.2;font-weight:750}.loro-product-row__delete-button{display:grid;width:2.25rem;height:2.25rem;place-items:center;align-self:center;border:0;border-radius:.7rem;background:transparent;color:var(--loro-danger-text);font:inherit;font-weight:950;cursor:pointer;opacity:.64;transition:opacity .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease}.loro-product-row__delete-button:hover,.loro-product-row__delete-button.is-touch-hover,.loro-product-row__delete-button:focus-visible{opacity:1;background:color-mix(in srgb,var(--loro-danger-text) 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--loro-danger-text) 14%,transparent);transform:translateY(-1px)}.loro-product-row__delete-button:focus-visible{outline:3px solid color-mix(in srgb,var(--loro-danger-text) 22%,transparent);outline-offset:2px}.loro-product-row__delete-button:active{transform:translateY(0)}.loro-product-row__total{color:var(--loro-primary-700);font-size:1.2rem;text-align:right;white-space:nowrap;min-width:0}.loro-product-row__total-stack{display:grid;justify-items:end;gap:.08rem;min-width:0;align-content:center;text-align:right}.loro-product-row__unit-price{color:var(--loro-muted-strong);font-size:.78rem;line-height:1;white-space:nowrap;font-weight:850}.loro-product-row__prices{display:grid;grid-template-columns:repeat(3,minmax(4.5rem,1fr));gap:.5rem;align-items:center;justify-items:stretch}.loro-product-row__price{display:grid;justify-items:center;gap:.2rem;color:var(--loro-primary-700);min-width:0;text-align:center;font-weight:850}.loro-product-row__price loro-image{display:block;width:2.25rem;height:1.5rem}.loro-product-row__price ::ng-deep img{width:100%;height:100%;object-fit:contain}.loro-product-row__price span{overflow-wrap:anywhere;font-size:clamp(1rem,2vw,1.1rem);line-height:1.1}.loro-product-row__price--best span{padding:.25rem .85rem;border-radius:var(--loro-radius-pill);background:color-mix(in srgb,#15803d 12%,var(--loro-surface-soft) 88%);color:#15803d}.loro-product-row__status{display:grid;width:1.55rem;height:1.55rem;place-items:center;border:1.5px solid rgba(31,157,85,.42);border-radius:50%}.loro-product-row__status--warning{border-color:#dc262661}.loro-product-row__status--expiring{border-color:color-mix(in srgb,var(--loro-warning) 58%,transparent);background:color-mix(in srgb,var(--loro-warning) 7%,transparent)}@media(min-width:1024px){.loro-product-row--basket{border:1px solid transparent;cursor:pointer}.loro-product-row--basket.loro-product-row--checked{border-color:var(--loro-primary-500);background:var(--loro-product-row-selected-bg);box-shadow:var(--loro-product-row-selected-shadow)}.loro-product-row--basket .loro-product-row__check,.loro-product-row--basket .loro-product-row__delete-button,.loro-product-row--basket .loro-product-row__stepper{cursor:auto}.loro-product-row--basket .loro-product-row__check,.loro-product-row--basket .loro-product-row__delete-button{cursor:pointer}}@media(max-width:599.98px){.loro-product-row{grid-template-columns:2.4rem 6rem minmax(8rem,1fr) minmax(8.8rem,auto) minmax(4.9rem,auto) 1.8rem;gap:.9rem;min-height:4.8rem;padding:.55rem .85rem}.loro-product-row__image{width:5.4rem;height:3.65rem}.loro-product-row--basket{grid-template-columns:2.4rem 5.4rem minmax(0,1fr) minmax(4.9rem,auto) 1.8rem;grid-template-rows:auto auto;column-gap:.75rem;row-gap:.38rem}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:2.4rem minmax(0,1fr) minmax(4.9rem,auto) 1.8rem}.loro-product-row--basket .loro-product-row__check,.loro-product-row--basket .loro-product-row__selected-mark{grid-column:1;grid-row:1/span 2;align-self:center}.loro-product-row--basket .loro-product-row__image{grid-column:2;grid-row:1/span 2;align-self:center;width:5.4rem;height:3.65rem}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__copy{grid-column:2}.loro-product-row--basket .loro-product-row__copy{grid-column:3;grid-row:1;align-self:end}.loro-product-row--basket .loro-product-row__stepper{grid-column:3;grid-row:2;align-self:start;min-width:min(10rem,100%);width:min(10rem,100%);max-width:100%}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__stepper{grid-column:2}.loro-product-row--basket .loro-product-row__total-stack{grid-column:4;grid-row:1/span 2;align-self:center}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__total-stack{grid-column:3}.loro-product-row--basket .loro-product-row__delete-button{grid-column:5;grid-row:1/span 2}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__delete-button{grid-column:4}.loro-product-row--pantry{grid-template-columns:4.5rem minmax(0,1fr) auto auto}.loro-product-row--compare{grid-template-columns:4.5rem minmax(6rem,1fr) minmax(10rem,1.6fr)}.loro-product-row__stepper{min-width:8rem;width:8rem}.loro-product-row__total{font-size:1.25rem}}@media(max-width:640px){.loro-product-row{grid-template-columns:2.1rem 4.45rem minmax(5.6rem,1fr) minmax(8rem,auto) minmax(4.2rem,auto);gap:.65rem;min-height:4.8rem;padding:.55rem}.loro-product-row--basket{grid-template-columns:2.1rem 4.45rem minmax(0,1fr) minmax(4.2rem,auto);grid-template-rows:auto auto;border:1px solid var(--loro-surface);border-radius:.85rem;background:var(--loro-surface);overflow:hidden}.loro-product-row--basket .loro-product-row__check{display:grid;grid-column:1;grid-row:1/span 2;align-self:center;justify-self:center;width:1.8rem;height:1.8rem;border-radius:.55rem}.loro-product-row--basket .loro-product-row__selected-mark{display:none}.loro-product-row--basket .loro-product-row__image,.loro-product-row--basket .loro-product-row__copy,.loro-product-row--basket .loro-product-row__stepper,.loro-product-row--basket .loro-product-row__total-stack{grid-area:auto}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:2.1rem minmax(0,1fr) minmax(4.2rem,auto)}.loro-product-row--basket .loro-product-row__image{grid-column:2;grid-row:1/span 2;align-self:center}.loro-product-row--basket .loro-product-row__copy{grid-column:3;grid-row:1;align-self:end}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__copy{grid-column:2}.loro-product-row--basket .loro-product-row__stepper{grid-column:3;grid-row:2;align-self:start}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__stepper{grid-column:2}.loro-product-row--basket .loro-product-row__total-stack{grid-column:4;grid-row:1/span 2;align-self:center}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__total-stack{grid-column:3}.loro-product-row--basket .loro-product-row__delete-button{display:none}.loro-product-row--basket.loro-product-row--checked{border-color:var(--loro-primary-500);background:var(--loro-product-row-selected-bg);box-shadow:var(--loro-product-row-selected-shadow)}.loro-product-row--basket.loro-product-row--dragging{box-shadow:0 1rem 2.2rem #4d2db71f}.loro-product-row__delete-action{position:absolute;inset:0 0 0 auto;z-index:0;display:grid;width:10rem;align-content:center;justify-items:center;gap:.35rem;place-items:center;padding-inline-start:1.75rem;border-radius:0 .85rem .85rem 0;background:linear-gradient(135deg,#ff4d5f,#dc2626);color:#fff;font-size:.82rem;font-weight:900;opacity:0;transition:opacity .16s ease,transform .16s ease}.loro-product-row__delete-action span{color:inherit;line-height:1}.loro-product-row--dragging+.loro-product-row__delete-action,.loro-product-row--swipe-armed+.loro-product-row__delete-action,.loro-product-row--removing+.loro-product-row__delete-action{opacity:1}.loro-product-row__image{width:4.45rem;height:3.35rem}.loro-product-row--basket .loro-product-row__stepper{min-width:min(10rem,100%);width:min(10rem,100%)}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper{grid-template-columns:1.45rem minmax(3.15rem,1fr) 1.45rem;min-height:2.05rem;border-radius:.72rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input__stepper-value{min-width:0;overflow:hidden;gap:.14rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper input{min-width:1.75rem;max-width:2.35rem;overflow:hidden;text-overflow:clip;white-space:nowrap}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper-kg input{min-width:2.05rem;max-width:2.35rem}.loro-product-row__total{align-self:center;font-size:clamp(.92rem,3.4vw,1.05rem);letter-spacing:0}.loro-product-row__unit-price{font-size:clamp(.62rem,2.4vw,.72rem)}.loro-product-row--basket .loro-product-row__copy strong{overflow-wrap:normal;word-break:normal;font-size:clamp(.82rem,3.6vw,.95rem);line-height:1.05}.loro-product-row--basket .loro-product-row__copy small{font-size:clamp(.7rem,3vw,.82rem);line-height:1.05}.loro-product-row--pantry{grid-template-columns:4.8rem minmax(0,1fr) auto auto;gap:.7rem;min-height:5.8rem}.loro-product-row--pantry .loro-product-row__image{width:4.8rem;height:3.5rem}.loro-product-row--pantry .loro-product-row__copy strong{font-size:.96rem}.loro-product-row--pantry .loro-product-row__copy small{font-size:.82rem}.loro-product-row--pantry .loro-product-row__total{font-size:.98rem}.loro-product-row--compare{grid-template-columns:4.35rem minmax(6.2rem,1fr) minmax(9rem,1.55fr);gap:.6rem;min-height:5.8rem;padding:.75rem .8rem}.loro-product-row--compare .loro-product-row__image{width:4.35rem;height:3.35rem;border-radius:.8rem}.loro-product-row--compare .loro-product-row__copy strong{font-size:clamp(.88rem,3.6vw,1rem)}.loro-product-row--compare .loro-product-row__copy small{font-size:clamp(.74rem,2.9vw,.84rem)}.loro-product-row--compare .loro-product-row__prices{grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem;align-self:stretch;align-items:center}.loro-product-row--compare .loro-product-row__price{gap:.15rem;align-content:center}.loro-product-row--compare .loro-product-row__price loro-image{width:2rem;height:1.2rem}.loro-product-row--compare .loro-product-row__price span{font-size:clamp(.78rem,3.2vw,.92rem)}.loro-product-row--compare .loro-product-row__price--best span{padding:.22rem .5rem}}@media(max-width:430px){.loro-product-row--basket{grid-template-columns:1.9rem 3.3rem minmax(0,1fr) minmax(3.35rem,auto);gap:.45rem;min-height:4.3rem;padding:.45rem}.loro-product-row--basket .loro-product-row__check{width:1.6rem;height:1.6rem}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:1.9rem minmax(0,1fr) minmax(3.35rem,auto)}.loro-product-row--basket .loro-product-row__image{width:3.3rem;height:2.75rem;border-radius:.55rem}.loro-product-row--basket .loro-product-row__stepper{min-width:min(10rem,100%);width:min(10rem,100%)}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper{grid-template-columns:1.28rem minmax(3.05rem,1fr) 1.28rem;min-height:2rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input__stepper-value{min-width:0;gap:.1rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper input{min-width:1.65rem;max-width:2.2rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper-kg input{min-width:1.95rem;max-width:2.2rem}.loro-product-row--basket .loro-product-row__copy strong{font-size:.78rem}.loro-product-row--basket .loro-product-row__copy small{font-size:.68rem}.loro-product-row--basket .loro-product-row__total{font-size:.98rem}.loro-product-row--compare{grid-template-columns:4rem minmax(5.2rem,1fr) minmax(8.1rem,1.45fr);gap:.5rem;padding:.7rem}.loro-product-row--compare .loro-product-row__image{width:4rem;height:3.1rem}.loro-product-row--compare .loro-product-row__copy strong{font-size:clamp(.82rem,3.8vw,.94rem)}.loro-product-row--compare .loro-product-row__copy small{font-size:clamp(.7rem,3vw,.8rem)}.loro-product-row--compare .loro-product-row__price span{font-size:clamp(.74rem,3.2vw,.86rem)}.loro-product-row--compare .loro-product-row__price loro-image{width:1.9rem;height:1.1rem}}@media(max-width:380px){.loro-product-row--basket{grid-template-columns:1.85rem 3.15rem minmax(0,1fr) minmax(3.25rem,auto);grid-template-rows:auto auto;column-gap:.32rem;row-gap:.28rem;min-height:4.75rem;padding:.5rem}.loro-product-row--basket .loro-product-row__check{grid-column:1;grid-row:1/span 2;align-self:center;width:1.55rem;height:1.55rem}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:1.85rem minmax(0,1fr) minmax(3.25rem,auto)}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__copy,.loro-product-row--basket.loro-product-row--no-image .loro-product-row__stepper{grid-column:2}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__total-stack{grid-column:3}.loro-product-row--basket .loro-product-row__image{grid-column:2;grid-row:1/span 2;align-self:center;width:3.15rem;height:2.65rem}.loro-product-row--basket .loro-product-row__copy{grid-column:3;grid-row:1;align-self:end;padding-inline-end:.25rem}.loro-product-row--basket .loro-product-row__stepper{grid-column:3;grid-row:2;align-self:start;min-width:min(10rem,100%);width:min(10rem,100%)}.loro-product-row--basket .loro-product-row__total-stack{grid-column:4;grid-row:1/span 2;align-self:center}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper{grid-template-columns:1.35rem minmax(3.25rem,1fr) 1.35rem;min-height:1.85rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper input{min-width:1.55rem;max-width:2rem;font-size:.82rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input__stepper-value span{min-width:.95rem;font-size:.78rem}}\n"] }]
+            args: [{ selector: 'loro-product-row', standalone: true, imports: [LoroIcon, LoroImage, LoroInput], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article\n  class=\"loro-product-row\"\n  [class.loro-product-row--basket]=\"variant() === 'basket'\"\n  [class.loro-product-row--pantry]=\"variant() === 'pantry'\"\n  [class.loro-product-row--compare]=\"variant() === 'compare'\"\n  [class.loro-product-row--divider]=\"divider()\"\n  [class.loro-product-row--checked]=\"checked()\"\n  [class.loro-product-row--dragging]=\"swipeDragging()\"\n  [class.loro-product-row--swipe-armed]=\"swipeArmed()\"\n  [class.loro-product-row--removing]=\"swipeRemoving()\"\n  [class.loro-product-row--swipe-removable]=\"isSwipeRemovable()\"\n  [class.loro-product-row--no-image]=\"!imageName()\"\n  [style.transform]=\"swipeTransform()\"\n  (touchstart)=\"onRowTouchStart($event)\"\n  (touchmove)=\"onRowTouchMove($event)\"\n  (touchend)=\"onRowTouchEnd($event)\"\n  (touchcancel)=\"onRowTouchCancel()\"\n  (click)=\"onBasketClick($event)\">\n  @if (variant() === 'basket') {\n    <button\n      type=\"button\"\n      class=\"loro-product-row__check\"\n      [class.loro-product-row__check--checked]=\"checked()\"\n      [attr.aria-label]=\"'Marcar ' + name()\"\n      (click)=\"checkedChange.emit(!checked())\">\n      @if (checked()) {\n        <loro-icon name=\"check\" [size]=\"18\" alt=\"Comprado\" color=\"inverse\" />\n      }\n    </button>\n    <span class=\"loro-product-row__selected-mark\" aria-hidden=\"true\">\n      <loro-icon name=\"tick-circle\" [size]=\"16\" alt=\"Seleccionado\" color=\"primary\" />\n    </span>\n  }\n\n  @if (imageName()) {\n    <span class=\"loro-product-row__image\">\n      <loro-image [name]=\"imageName()!\" [alt]=\"name()\" width=\"100%\" />\n    </span>\n  }\n\n  <span class=\"loro-product-row__copy\">\n    <strong>{{ name() }}</strong>\n    @if (variant() !== 'basket') {\n      <small>{{ meta() }}</small>\n    }\n  </span>\n\n  @if (variant() === 'basket') {\n    <loro-input\n      class=\"loro-product-row__stepper\"\n      variant=\"stepper\"\n      [label]=\"'Cantidad de ' + name()\"\n      [value]=\"quantityValue()\"\n      [unit]=\"unit()\"\n      [step]=\"unit() === 'kg' ? 0.5 : 1\"\n      [min]=\"unit() === 'kg' ? 0.5 : 1\"\n      [max]=\"100\"\n      (valueChange)=\"updateQuantity($event)\" />\n  }\n\n  @if (variant() === 'compare') {\n    <span class=\"loro-product-row__prices\">\n      @for (price of prices(); track price.store) {\n        <span [class.loro-product-row__price--best]=\"price.best\" class=\"loro-product-row__price\">\n          @if (price.logoName) {\n            <loro-image [name]=\"price.logoName\" [alt]=\"price.store\" width=\"100%\" height=\"100%\" fit=\"contain\" />\n          } @else {\n            <b>{{ price.store }}</b>\n          }\n          <span>{{ formatCurrency(price.value) }} \u20AC</span>\n        </span>\n      }\n    </span>\n  } @else if (variant() === 'basket') {\n    <span class=\"loro-product-row__total-stack\">\n      <small class=\"loro-product-row__unit-price\">{{ meta() }}</small>\n      <strong class=\"loro-product-row__total\">{{ formatCurrency(total()) }} \u20AC</strong>\n    </span>\n  } @else {\n    <strong class=\"loro-product-row__total\">{{ formatCurrency(total()) }} \u20AC</strong>\n  }\n\n  @if (variant() === 'pantry') {\n    <span\n      class=\"loro-product-row__status\"\n      [class.loro-product-row__status--warning]=\"status() === 'warning'\"\n      [class.loro-product-row__status--expiring]=\"status() === 'expiring'\">\n      <loro-icon\n        [name]=\"status() === 'ok' ? 'check' : 'warning'\"\n        [size]=\"status() === 'ok' ? 15 : 12\"\n        [alt]=\"status()\"\n        [color]=\"status() === 'ok' ? 'success' : status() === 'expiring' ? 'warning' : 'danger'\" />\n    </span>\n  } @else if (variant() === 'basket') {\n    <button\n      type=\"button\"\n      class=\"loro-product-row__delete-button\"\n      data-touch-hover\n      [attr.aria-label]=\"'Eliminar ' + name()\"\n      (click)=\"rowRemove.emit()\">\n      <loro-icon name=\"trash\" [size]=\"18\" alt=\"\" [decorative]=\"true\" color=\"danger\" />\n    </button>\n  }\n</article>\n@if (isSwipeRemovable()) {\n  <span class=\"loro-product-row__delete-action\" aria-hidden=\"true\" [style.transform]=\"deleteActionTransform()\">\n    <loro-icon name=\"trash-white\" [size]=\"24\" alt=\"Eliminar\" color=\"inverse\" />\n    <span>Eliminar</span>\n  </span>\n}\n", styles: [":host{display:block;position:relative;overflow:hidden;font-family:var(--loro-font-brand);--loro-product-row-selected-bg: #f4f0ff;--loro-product-row-selected-shadow: 0 .75rem 1.8rem rgba(77, 45, 183, .08)}:host-context([data-theme=dark]){--loro-product-row-selected-bg: color-mix(in srgb, var(--loro-primary-500) 18%, var(--loro-surface) 82%)}.loro-product-row{position:relative;z-index:1;display:grid;grid-template-columns:2.6rem 5.6rem minmax(0,1fr) minmax(7.8rem,auto) minmax(4.8rem,auto) 2rem;align-items:center;gap:1.2rem;min-width:0;min-height:5.35rem;padding:.55rem 1rem;background:var(--loro-surface-soft);color:var(--loro-text);transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;touch-action:pan-y;-webkit-user-select:none;user-select:none}.loro-product-row--dragging{transition:none}.loro-product-row--removing{opacity:.18;pointer-events:none;transform:translate3d(calc(-100% - 2rem),0,0)!important}.loro-product-row__delete-action{display:none}.loro-product-row--divider:after{position:absolute;right:0;bottom:0;left:0;height:1px;background:var(--loro-border-subtle);content:\"\"}.loro-product-row--pantry{grid-template-columns:4.6rem minmax(0,1fr) auto auto;gap:.9rem}.loro-product-row--compare{grid-template-columns:5.2rem minmax(8rem,1fr) minmax(14rem,2fr);border:1px solid var(--loro-border-subtle);border-radius:1rem;box-shadow:var(--loro-shadow-soft)}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:2.6rem minmax(0,1fr) minmax(7.8rem,auto) minmax(4.8rem,auto) 2rem}.loro-product-row--pantry.loro-product-row--no-image{grid-template-columns:minmax(0,1fr) auto auto}.loro-product-row--compare.loro-product-row--no-image{grid-template-columns:minmax(8rem,1fr) minmax(14rem,2fr)}.loro-product-row__check{display:grid;width:1.9rem;height:1.9rem;place-items:center;border:2px solid rgba(98,88,130,.45);border-radius:.45rem;background:var(--loro-surface);cursor:pointer}.loro-product-row__check--checked{border-color:transparent;background:var(--loro-primary-500)}.loro-product-row__selected-mark{display:none}.loro-product-row__image{display:grid;width:5.2rem;height:3.6rem;place-items:center;overflow:hidden;border-radius:.65rem;background:color-mix(in srgb,var(--loro-primary-500) 4%,var(--loro-surface-soft) 96%)}.loro-product-row__copy{display:grid;gap:.18rem;min-width:0;align-content:center}strong{color:var(--loro-text-strong);line-height:1.1;overflow-wrap:anywhere;font-weight:950}small{color:var(--loro-muted);line-height:1.2;font-weight:750}.loro-product-row__delete-button{display:grid;width:2.25rem;height:2.25rem;place-items:center;align-self:center;border:0;border-radius:.7rem;background:transparent;color:var(--loro-danger-text);font:inherit;font-weight:950;cursor:pointer;opacity:.64;transition:opacity .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease}.loro-product-row__delete-button:hover,.loro-product-row__delete-button.is-touch-hover,.loro-product-row__delete-button:focus-visible{opacity:1;background:color-mix(in srgb,var(--loro-danger-text) 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--loro-danger-text) 14%,transparent);transform:translateY(-1px)}.loro-product-row__delete-button:focus-visible{outline:3px solid color-mix(in srgb,var(--loro-danger-text) 22%,transparent);outline-offset:2px}.loro-product-row__delete-button:active{transform:translateY(0)}.loro-product-row__total{color:var(--loro-primary-700);font-size:1.2rem;text-align:right;white-space:nowrap;min-width:0}.loro-product-row__total-stack{display:grid;justify-items:end;gap:.08rem;min-width:0;align-content:center;text-align:right}.loro-product-row__unit-price{color:var(--loro-muted-strong);font-size:.78rem;line-height:1;white-space:nowrap;font-weight:850}.loro-product-row__prices{display:grid;grid-template-columns:repeat(3,minmax(4.5rem,1fr));gap:.5rem;align-items:center;justify-items:stretch}.loro-product-row__price{display:grid;justify-items:center;gap:.2rem;color:var(--loro-primary-700);min-width:0;text-align:center;font-weight:850}.loro-product-row__price loro-image{display:block;width:2.25rem;height:1.5rem}.loro-product-row__price ::ng-deep img{width:100%;height:100%;object-fit:contain}.loro-product-row__price span{overflow-wrap:anywhere;font-size:clamp(1rem,2vw,1.1rem);line-height:1.1}.loro-product-row__price--best span{padding:.25rem .85rem;border-radius:var(--loro-radius-pill);background:color-mix(in srgb,#15803d 12%,var(--loro-surface-soft) 88%);color:#15803d}.loro-product-row__status{display:grid;width:1.55rem;height:1.55rem;place-items:center;border:1.5px solid rgba(31,157,85,.42);border-radius:50%}.loro-product-row__status--warning{border-color:#dc262661}.loro-product-row__status--expiring{border-color:color-mix(in srgb,var(--loro-warning) 58%,transparent);background:color-mix(in srgb,var(--loro-warning) 7%,transparent)}@media(min-width:1024px){.loro-product-row--basket{border:1px solid transparent;cursor:pointer}.loro-product-row--basket.loro-product-row--checked{border-color:var(--loro-primary-500);background:var(--loro-product-row-selected-bg);box-shadow:var(--loro-product-row-selected-shadow)}.loro-product-row--basket .loro-product-row__check,.loro-product-row--basket .loro-product-row__delete-button,.loro-product-row--basket .loro-product-row__stepper{cursor:auto}.loro-product-row--basket .loro-product-row__check,.loro-product-row--basket .loro-product-row__delete-button{cursor:pointer}}@media(max-width:479.99px)and (orientation:portrait){.loro-product-row{grid-template-columns:2.4rem 6rem minmax(8rem,1fr) minmax(8.8rem,auto) minmax(4.9rem,auto) 1.8rem;gap:.9rem;min-height:4.8rem;padding:.55rem .85rem}.loro-product-row__image{width:5.4rem;height:3.65rem}.loro-product-row--basket{grid-template-columns:2.4rem 5.4rem minmax(0,1fr) minmax(4.9rem,auto) 1.8rem;grid-template-rows:auto auto;column-gap:.75rem;row-gap:.38rem}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:2.4rem minmax(0,1fr) minmax(4.9rem,auto) 1.8rem}.loro-product-row--basket .loro-product-row__check,.loro-product-row--basket .loro-product-row__selected-mark{grid-column:1;grid-row:1/span 2;align-self:center}.loro-product-row--basket .loro-product-row__image{grid-column:2;grid-row:1/span 2;align-self:center;width:5.4rem;height:3.65rem}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__copy{grid-column:2}.loro-product-row--basket .loro-product-row__copy{grid-column:3;grid-row:1;align-self:end}.loro-product-row--basket .loro-product-row__stepper{grid-column:3;grid-row:2;align-self:start;min-width:min(10rem,100%);width:min(10rem,100%);max-width:100%}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__stepper{grid-column:2}.loro-product-row--basket .loro-product-row__total-stack{grid-column:4;grid-row:1/span 2;align-self:center}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__total-stack{grid-column:3}.loro-product-row--basket .loro-product-row__delete-button{grid-column:5;grid-row:1/span 2}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__delete-button{grid-column:4}.loro-product-row--pantry{grid-template-columns:4.5rem minmax(0,1fr) auto auto}.loro-product-row--compare{grid-template-columns:4.5rem minmax(6rem,1fr) minmax(10rem,1.6fr)}.loro-product-row__stepper{min-width:8rem;width:8rem}.loro-product-row__total{font-size:1.25rem}}@media(max-width:640px){.loro-product-row{grid-template-columns:2.1rem 4.45rem minmax(5.6rem,1fr) minmax(8rem,auto) minmax(4.2rem,auto);gap:.65rem;min-height:4.8rem;padding:.55rem}.loro-product-row--basket{grid-template-columns:2.1rem 4.45rem minmax(0,1fr) minmax(4.2rem,auto);grid-template-rows:auto auto;border:1px solid var(--loro-surface);border-radius:.85rem;background:var(--loro-surface);overflow:hidden}.loro-product-row--basket .loro-product-row__check{display:grid;grid-column:1;grid-row:1/span 2;align-self:center;justify-self:center;width:1.8rem;height:1.8rem;border-radius:.55rem}.loro-product-row--basket .loro-product-row__selected-mark{display:none}.loro-product-row--basket .loro-product-row__image,.loro-product-row--basket .loro-product-row__copy,.loro-product-row--basket .loro-product-row__stepper,.loro-product-row--basket .loro-product-row__total-stack{grid-area:auto}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:2.1rem minmax(0,1fr) minmax(4.2rem,auto)}.loro-product-row--basket .loro-product-row__image{grid-column:2;grid-row:1/span 2;align-self:center}.loro-product-row--basket .loro-product-row__copy{grid-column:3;grid-row:1;align-self:end}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__copy{grid-column:2}.loro-product-row--basket .loro-product-row__stepper{grid-column:3;grid-row:2;align-self:start}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__stepper{grid-column:2}.loro-product-row--basket .loro-product-row__total-stack{grid-column:4;grid-row:1/span 2;align-self:center}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__total-stack{grid-column:3}.loro-product-row--basket .loro-product-row__delete-button{display:none}.loro-product-row--basket.loro-product-row--checked{border-color:var(--loro-primary-500);background:var(--loro-product-row-selected-bg);box-shadow:var(--loro-product-row-selected-shadow)}.loro-product-row--basket.loro-product-row--dragging{box-shadow:0 1rem 2.2rem #4d2db71f}.loro-product-row__delete-action{position:absolute;inset:0 0 0 auto;z-index:0;display:grid;width:10rem;align-content:center;justify-items:center;gap:.35rem;place-items:center;padding-inline-start:1.75rem;border-radius:0 .85rem .85rem 0;background:linear-gradient(135deg,#ff4d5f,#dc2626);color:#fff;font-size:.82rem;font-weight:900;opacity:0;transition:opacity .16s ease,transform .16s ease}.loro-product-row__delete-action span{color:inherit;line-height:1}.loro-product-row--dragging+.loro-product-row__delete-action,.loro-product-row--swipe-armed+.loro-product-row__delete-action,.loro-product-row--removing+.loro-product-row__delete-action{opacity:1}.loro-product-row__image{width:4.45rem;height:3.35rem}.loro-product-row--basket .loro-product-row__stepper{min-width:min(10rem,100%);width:min(10rem,100%)}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper{grid-template-columns:1.45rem minmax(3.15rem,1fr) 1.45rem;min-height:2.05rem;border-radius:.72rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input__stepper-value{min-width:0;overflow:hidden;gap:.14rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper input{min-width:1.75rem;max-width:2.35rem;overflow:hidden;text-overflow:clip;white-space:nowrap}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper-kg input{min-width:2.05rem;max-width:2.35rem}.loro-product-row__total{align-self:center;font-size:clamp(.92rem,3.4vw,1.05rem);letter-spacing:0}.loro-product-row__unit-price{font-size:clamp(.62rem,2.4vw,.72rem)}.loro-product-row--basket .loro-product-row__copy strong{overflow-wrap:normal;word-break:normal;font-size:clamp(.82rem,3.6vw,.95rem);line-height:1.05}.loro-product-row--basket .loro-product-row__copy small{font-size:clamp(.7rem,3vw,.82rem);line-height:1.05}.loro-product-row--pantry{grid-template-columns:4.8rem minmax(0,1fr) auto auto;gap:.7rem;min-height:5.8rem}.loro-product-row--pantry .loro-product-row__image{width:4.8rem;height:3.5rem}.loro-product-row--pantry .loro-product-row__copy strong{font-size:.96rem}.loro-product-row--pantry .loro-product-row__copy small{font-size:.82rem}.loro-product-row--pantry .loro-product-row__total{font-size:.98rem}.loro-product-row--compare{grid-template-columns:4.35rem minmax(6.2rem,1fr) minmax(9rem,1.55fr);gap:.6rem;min-height:5.8rem;padding:.75rem .8rem}.loro-product-row--compare .loro-product-row__image{width:4.35rem;height:3.35rem;border-radius:.8rem}.loro-product-row--compare .loro-product-row__copy strong{font-size:clamp(.88rem,3.6vw,1rem)}.loro-product-row--compare .loro-product-row__copy small{font-size:clamp(.74rem,2.9vw,.84rem)}.loro-product-row--compare .loro-product-row__prices{grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem;align-self:stretch;align-items:center}.loro-product-row--compare .loro-product-row__price{gap:.15rem;align-content:center}.loro-product-row--compare .loro-product-row__price loro-image{width:2rem;height:1.2rem}.loro-product-row--compare .loro-product-row__price span{font-size:clamp(.78rem,3.2vw,.92rem)}.loro-product-row--compare .loro-product-row__price--best span{padding:.22rem .5rem}}@media(max-width:430px){.loro-product-row--basket{grid-template-columns:1.9rem 3.3rem minmax(0,1fr) minmax(3.35rem,auto);gap:.45rem;min-height:4.3rem;padding:.45rem}.loro-product-row--basket .loro-product-row__check{width:1.6rem;height:1.6rem}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:1.9rem minmax(0,1fr) minmax(3.35rem,auto)}.loro-product-row--basket .loro-product-row__image{width:3.3rem;height:2.75rem;border-radius:.55rem}.loro-product-row--basket .loro-product-row__stepper{min-width:min(10rem,100%);width:min(10rem,100%)}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper{grid-template-columns:1.28rem minmax(3.05rem,1fr) 1.28rem;min-height:2rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input__stepper-value{min-width:0;gap:.1rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper input{min-width:1.65rem;max-width:2.2rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper-kg input{min-width:1.95rem;max-width:2.2rem}.loro-product-row--basket .loro-product-row__copy strong{font-size:.78rem}.loro-product-row--basket .loro-product-row__copy small{font-size:.68rem}.loro-product-row--basket .loro-product-row__total{font-size:.98rem}.loro-product-row--compare{grid-template-columns:4rem minmax(5.2rem,1fr) minmax(8.1rem,1.45fr);gap:.5rem;padding:.7rem}.loro-product-row--compare .loro-product-row__image{width:4rem;height:3.1rem}.loro-product-row--compare .loro-product-row__copy strong{font-size:clamp(.82rem,3.8vw,.94rem)}.loro-product-row--compare .loro-product-row__copy small{font-size:clamp(.7rem,3vw,.8rem)}.loro-product-row--compare .loro-product-row__price span{font-size:clamp(.74rem,3.2vw,.86rem)}.loro-product-row--compare .loro-product-row__price loro-image{width:1.9rem;height:1.1rem}}@media(max-width:380px){.loro-product-row--basket{grid-template-columns:1.85rem 3.15rem minmax(0,1fr) minmax(3.25rem,auto);grid-template-rows:auto auto;column-gap:.32rem;row-gap:.28rem;min-height:4.75rem;padding:.5rem}.loro-product-row--basket .loro-product-row__check{grid-column:1;grid-row:1/span 2;align-self:center;width:1.55rem;height:1.55rem}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:1.85rem minmax(0,1fr) minmax(3.25rem,auto)}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__copy,.loro-product-row--basket.loro-product-row--no-image .loro-product-row__stepper{grid-column:2}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__total-stack{grid-column:3}.loro-product-row--basket .loro-product-row__image{grid-column:2;grid-row:1/span 2;align-self:center;width:3.15rem;height:2.65rem}.loro-product-row--basket .loro-product-row__copy{grid-column:3;grid-row:1;align-self:end;padding-inline-end:.25rem}.loro-product-row--basket .loro-product-row__stepper{grid-column:3;grid-row:2;align-self:start;min-width:min(10rem,100%);width:min(10rem,100%)}.loro-product-row--basket .loro-product-row__total-stack{grid-column:4;grid-row:1/span 2;align-self:center}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper{grid-template-columns:1.35rem minmax(3.25rem,1fr) 1.35rem;min-height:1.85rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper input{min-width:1.55rem;max-width:2rem;font-size:.82rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input__stepper-value span{min-width:.95rem;font-size:.78rem}}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], imageName: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageName", required: false }] }], quantityLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "quantityLabel", required: false }] }], quantity: [{ type: i0.Input, args: [{ isSignal: true, alias: "quantity", required: false }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], prices: [{ type: i0.Input, args: [{ isSignal: true, alias: "prices", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], quantityChange: [{ type: i0.Output, args: ["quantityChange"] }], increment: [{ type: i0.Output, args: ["increment"] }], decrement: [{ type: i0.Output, args: ["decrement"] }], rowRemove: [{ type: i0.Output, args: ["rowRemove"] }] } });
 
 class LoroProductSection {
@@ -3705,7 +3690,7 @@ class LoroNotificationPanel {
         </div>
       }
     </section>
-  `, isInline: true, styles: [":host{display:block;width:min(100%,24rem);min-height:0;font-family:var(--loro-font-brand)}.loro-notification-panel{overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;height:100%;min-height:0;isolation:isolate;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface);box-shadow:var(--loro-shadow-panel);color:var(--loro-text)}.loro-notification-panel__handle{display:none}.loro-notification-panel__header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;padding:.9rem 1rem;border-bottom:1px solid var(--loro-border-subtle)}.loro-notification-panel__actions{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:.75rem}h2{margin:0;color:var(--loro-text-strong);font-size:1rem;font-weight:950}button{border:0;background:transparent;color:var(--loro-primary-700);font:inherit;font-size:.82rem;font-weight:850;cursor:pointer}.loro-notification-panel__list{display:grid;align-content:start;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;background:var(--loro-surface)}.loro-notification-panel__empty{display:grid;min-height:18rem;place-items:center;align-content:center;gap:.75rem;padding:2rem;text-align:center;background:var(--loro-surface)}.loro-notification-panel__empty-icon{display:grid;width:6rem;height:6rem;place-items:center;border-radius:50%;background:#6c3cff0f}.loro-notification-panel__empty strong{color:var(--loro-text-strong);font-weight:950}.loro-notification-panel__empty p{max-width:16rem;margin:0;color:var(--loro-muted);font-weight:700;line-height:1.45}@media(min-width:1024px){.loro-notification-panel__list{max-height:min(28rem,60vh)}}@media(max-width:1023.88px){:host{display:grid;width:100%;height:100%;min-height:0}.loro-notification-panel,.loro-notification-panel--sheet{width:100%;height:100%;min-height:0;border-radius:1.15rem 1.15rem 0 0;background:var(--loro-surface)}.loro-notification-panel--sheet{display:grid;min-height:0;grid-template-rows:auto auto minmax(0,1fr)}.loro-notification-panel--sheet .loro-notification-panel__list{min-height:0;height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;background:var(--loro-surface);touch-action:pan-y}.loro-notification-panel--sheet .loro-notification-panel__header{position:sticky;top:0;z-index:2;background:var(--loro-surface);align-items:start;grid-template-columns:minmax(0,1fr);gap:.65rem}.loro-notification-panel--sheet.loro-notification-panel--empty .loro-notification-panel__header{border-bottom:0}.loro-notification-panel--sheet .loro-notification-panel__empty{min-height:0;height:100%;padding:1rem 1.15rem 1.4rem;background:var(--loro-surface)}.loro-notification-panel--sheet .loro-notification-panel__handle{display:block;width:3rem;height:.25rem;margin:.5rem auto .2rem;border-radius:999px;background:#62588259}.loro-notification-panel--sheet .loro-notification-panel__header{padding:.7rem .95rem}.loro-notification-panel__actions{display:flex;width:100%;justify-content:space-between;gap:.5rem}.loro-notification-panel__actions button{white-space:nowrap}}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroNotificationRow, selector: "loro-notification-row", inputs: ["title", "message", "time", "icon", "unread"], outputs: ["rowClick", "rowRemove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;width:min(100%,24rem);min-height:0;font-family:var(--loro-font-brand)}.loro-notification-panel{overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;height:100%;min-height:0;isolation:isolate;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface);box-shadow:var(--loro-shadow-panel);color:var(--loro-text)}.loro-notification-panel__handle{display:none}.loro-notification-panel__header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;padding:.9rem 1rem;border-bottom:1px solid var(--loro-border-subtle)}.loro-notification-panel__actions{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:.75rem}h2{margin:0;color:var(--loro-text-strong);font-size:1rem;font-weight:950}button{border:0;background:transparent;color:var(--loro-primary-700);font:inherit;font-size:.82rem;font-weight:850;cursor:pointer}.loro-notification-panel__list{display:grid;align-content:start;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;background:var(--loro-surface)}.loro-notification-panel__empty{display:grid;min-height:18rem;place-items:center;align-content:center;gap:.75rem;padding:2rem;text-align:center;background:var(--loro-surface)}.loro-notification-panel__empty-icon{display:grid;width:6rem;height:6rem;place-items:center;border-radius:50%;background:#6c3cff0f}.loro-notification-panel__empty strong{color:var(--loro-text-strong);font-weight:950}.loro-notification-panel__empty p{max-width:16rem;margin:0;color:var(--loro-muted);font-weight:700;line-height:1.45}@media(min-width:1024px){.loro-notification-panel__list{max-height:min(28rem,60vh)}}@media(max-width:1023.88px){:host{display:grid;width:100%;height:100%;min-height:0}.loro-notification-panel,.loro-notification-panel--sheet{width:100%;height:100%;min-height:0;border-radius:1.15rem 1.15rem 0 0;background:var(--loro-surface)}.loro-notification-panel--sheet{display:grid;min-height:0;grid-template-rows:auto auto minmax(0,1fr)}.loro-notification-panel--sheet .loro-notification-panel__list{min-height:0;height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;background:var(--loro-surface);touch-action:pan-y}.loro-notification-panel--sheet .loro-notification-panel__header{position:sticky;top:0;z-index:2;background:var(--loro-surface);align-items:center;grid-template-columns:minmax(0,1fr) auto;gap:.65rem}.loro-notification-panel--sheet.loro-notification-panel--empty .loro-notification-panel__header{border-bottom:0}.loro-notification-panel--sheet .loro-notification-panel__empty{min-height:0;height:100%;place-items:center;align-content:center;padding:1rem 1.15rem 1.4rem;background:var(--loro-surface)}.loro-notification-panel--sheet .loro-notification-panel__handle{display:block;width:3rem;height:.25rem;margin:.5rem auto .2rem;border-radius:999px;background:#62588259}.loro-notification-panel--sheet .loro-notification-panel__header{padding:.7rem .95rem}.loro-notification-panel__actions{display:inline-flex;width:auto;justify-content:flex-end;gap:.5rem}.loro-notification-panel__actions button{white-space:nowrap}}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroNotificationRow, selector: "loro-notification-row", inputs: ["title", "message", "time", "icon", "unread"], outputs: ["rowClick", "rowRemove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroNotificationPanel, decorators: [{
             type: Component,
@@ -3753,7 +3738,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         </div>
       }
     </section>
-  `, styles: [":host{display:block;width:min(100%,24rem);min-height:0;font-family:var(--loro-font-brand)}.loro-notification-panel{overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;height:100%;min-height:0;isolation:isolate;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface);box-shadow:var(--loro-shadow-panel);color:var(--loro-text)}.loro-notification-panel__handle{display:none}.loro-notification-panel__header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;padding:.9rem 1rem;border-bottom:1px solid var(--loro-border-subtle)}.loro-notification-panel__actions{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:.75rem}h2{margin:0;color:var(--loro-text-strong);font-size:1rem;font-weight:950}button{border:0;background:transparent;color:var(--loro-primary-700);font:inherit;font-size:.82rem;font-weight:850;cursor:pointer}.loro-notification-panel__list{display:grid;align-content:start;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;background:var(--loro-surface)}.loro-notification-panel__empty{display:grid;min-height:18rem;place-items:center;align-content:center;gap:.75rem;padding:2rem;text-align:center;background:var(--loro-surface)}.loro-notification-panel__empty-icon{display:grid;width:6rem;height:6rem;place-items:center;border-radius:50%;background:#6c3cff0f}.loro-notification-panel__empty strong{color:var(--loro-text-strong);font-weight:950}.loro-notification-panel__empty p{max-width:16rem;margin:0;color:var(--loro-muted);font-weight:700;line-height:1.45}@media(min-width:1024px){.loro-notification-panel__list{max-height:min(28rem,60vh)}}@media(max-width:1023.88px){:host{display:grid;width:100%;height:100%;min-height:0}.loro-notification-panel,.loro-notification-panel--sheet{width:100%;height:100%;min-height:0;border-radius:1.15rem 1.15rem 0 0;background:var(--loro-surface)}.loro-notification-panel--sheet{display:grid;min-height:0;grid-template-rows:auto auto minmax(0,1fr)}.loro-notification-panel--sheet .loro-notification-panel__list{min-height:0;height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;background:var(--loro-surface);touch-action:pan-y}.loro-notification-panel--sheet .loro-notification-panel__header{position:sticky;top:0;z-index:2;background:var(--loro-surface);align-items:start;grid-template-columns:minmax(0,1fr);gap:.65rem}.loro-notification-panel--sheet.loro-notification-panel--empty .loro-notification-panel__header{border-bottom:0}.loro-notification-panel--sheet .loro-notification-panel__empty{min-height:0;height:100%;padding:1rem 1.15rem 1.4rem;background:var(--loro-surface)}.loro-notification-panel--sheet .loro-notification-panel__handle{display:block;width:3rem;height:.25rem;margin:.5rem auto .2rem;border-radius:999px;background:#62588259}.loro-notification-panel--sheet .loro-notification-panel__header{padding:.7rem .95rem}.loro-notification-panel__actions{display:flex;width:100%;justify-content:space-between;gap:.5rem}.loro-notification-panel__actions button{white-space:nowrap}}\n"] }]
+  `, styles: [":host{display:block;width:min(100%,24rem);min-height:0;font-family:var(--loro-font-brand)}.loro-notification-panel{overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;height:100%;min-height:0;isolation:isolate;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface);box-shadow:var(--loro-shadow-panel);color:var(--loro-text)}.loro-notification-panel__handle{display:none}.loro-notification-panel__header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;padding:.9rem 1rem;border-bottom:1px solid var(--loro-border-subtle)}.loro-notification-panel__actions{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:.75rem}h2{margin:0;color:var(--loro-text-strong);font-size:1rem;font-weight:950}button{border:0;background:transparent;color:var(--loro-primary-700);font:inherit;font-size:.82rem;font-weight:850;cursor:pointer}.loro-notification-panel__list{display:grid;align-content:start;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;background:var(--loro-surface)}.loro-notification-panel__empty{display:grid;min-height:18rem;place-items:center;align-content:center;gap:.75rem;padding:2rem;text-align:center;background:var(--loro-surface)}.loro-notification-panel__empty-icon{display:grid;width:6rem;height:6rem;place-items:center;border-radius:50%;background:#6c3cff0f}.loro-notification-panel__empty strong{color:var(--loro-text-strong);font-weight:950}.loro-notification-panel__empty p{max-width:16rem;margin:0;color:var(--loro-muted);font-weight:700;line-height:1.45}@media(min-width:1024px){.loro-notification-panel__list{max-height:min(28rem,60vh)}}@media(max-width:1023.88px){:host{display:grid;width:100%;height:100%;min-height:0}.loro-notification-panel,.loro-notification-panel--sheet{width:100%;height:100%;min-height:0;border-radius:1.15rem 1.15rem 0 0;background:var(--loro-surface)}.loro-notification-panel--sheet{display:grid;min-height:0;grid-template-rows:auto auto minmax(0,1fr)}.loro-notification-panel--sheet .loro-notification-panel__list{min-height:0;height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;background:var(--loro-surface);touch-action:pan-y}.loro-notification-panel--sheet .loro-notification-panel__header{position:sticky;top:0;z-index:2;background:var(--loro-surface);align-items:center;grid-template-columns:minmax(0,1fr) auto;gap:.65rem}.loro-notification-panel--sheet.loro-notification-panel--empty .loro-notification-panel__header{border-bottom:0}.loro-notification-panel--sheet .loro-notification-panel__empty{min-height:0;height:100%;place-items:center;align-content:center;padding:1rem 1.15rem 1.4rem;background:var(--loro-surface)}.loro-notification-panel--sheet .loro-notification-panel__handle{display:block;width:3rem;height:.25rem;margin:.5rem auto .2rem;border-radius:999px;background:#62588259}.loro-notification-panel--sheet .loro-notification-panel__header{padding:.7rem .95rem}.loro-notification-panel__actions{display:inline-flex;width:auto;justify-content:flex-end;gap:.5rem}.loro-notification-panel__actions button{white-space:nowrap}}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], presentation: [{ type: i0.Input, args: [{ isSignal: true, alias: "presentation", required: false }] }], showMarkAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMarkAll", required: false }] }], markAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "markAllLabel", required: false }] }], showClearAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearAll", required: false }] }], clearAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAllLabel", required: false }] }], emptyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyIcon", required: false }] }], emptyTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTitle", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], itemRemove: [{ type: i0.Output, args: ["itemRemove"] }], markAllRead: [{ type: i0.Output, args: ["markAllRead"] }], clearAll: [{ type: i0.Output, args: ["clearAll"] }] } });
 
 class LoroSpinner {
@@ -3861,13 +3846,14 @@ class LoroAuthField {
     autocomplete = input('off', ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
     selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
     state = input('default', ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
-    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
     touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
-    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
-    errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    valueChange = output();
     errorId = `loro-auth-field-error-${++nextLoroAuthFieldId}`;
     errorText = computed(() => this.errorMessage().trim() || this.errors()[0]?.message?.trim() || '', ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
     hasError = computed(() => this.state() === 'error' || this.errorText().length > 0 || (this.invalid() && this.touched()), ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
@@ -3878,11 +3864,18 @@ class LoroAuthField {
     resolvedType() {
         return this.type() === 'password' && this.passwordVisible() ? 'text' : this.type();
     }
+    updateValue(value) {
+        this.value.set(value);
+        this.valueChange.emit(value);
+    }
+    markAsTouched() {
+        this.touched.set(true);
+    }
     toggleVisibility() {
         this.passwordVisible.update((value) => !value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroAuthField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroAuthField, isStandalone: true, selector: "loro-auth-field", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroAuthField, isStandalone: true, selector: "loro-auth-field", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", valueChange: "valueChange" }, ngImport: i0, template: `
     <label
       class="loro-auth-field"
       [class.loro-auth-field--selected]="selected()"
@@ -3898,13 +3891,13 @@ class LoroAuthField {
         [attr.autocomplete]="autocomplete()"
         [placeholder]="placeholder()"
         [value]="value()"
+        [attr.aria-invalid]="hasError() ? 'true' : null"
         [disabled]="disabled()"
         [readonly]="readonly()"
         [required]="required()"
-        [attr.aria-invalid]="hasError() ? 'true' : null"
         [attr.aria-describedby]="hasError() && errorText() ? errorId : null"
-        (input)="value.set(($any($event.target).value ?? '').toString())"
-        (blur)="touched.set(true)"
+        (input)="updateValue(($any($event.target).value ?? '').toString())"
+        (blur)="markAsTouched()"
       />
       @if (showToggle()) {
         <button
@@ -3943,13 +3936,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         [attr.autocomplete]="autocomplete()"
         [placeholder]="placeholder()"
         [value]="value()"
+        [attr.aria-invalid]="hasError() ? 'true' : null"
         [disabled]="disabled()"
         [readonly]="readonly()"
         [required]="required()"
-        [attr.aria-invalid]="hasError() ? 'true' : null"
         [attr.aria-describedby]="hasError() && errorText() ? errorId : null"
-        (input)="value.set(($any($event.target).value ?? '').toString())"
-        (blur)="touched.set(true)"
+        (input)="updateValue(($any($event.target).value ?? '').toString())"
+        (blur)="markAsTouched()"
       />
       @if (showToggle()) {
         <button
@@ -3969,7 +3962,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       </span>
     }
   `, styles: [":host{display:grid;gap:.35rem}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;padding:0}.loro-auth-field{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;align-items:center;border:1px solid var(--loro-border-strong);border-radius:.72rem;background:var(--loro-surface);padding:.48rem .65rem;box-shadow:var(--loro-shadow-soft);color:var(--loro-text);font-family:var(--loro-font-brand);transition:border-color .18s ease,box-shadow .18s ease}.loro-auth-field:hover,.loro-auth-field:focus-within,.loro-auth-field--selected{border-color:var(--loro-auth-field-active-border, var(--loro-primary-500));box-shadow:var(--loro-shadow-soft),0 0 0 3px color-mix(in srgb,var(--loro-primary-500) 14%,transparent)}.loro-auth-field--error{border-color:color-mix(in srgb,var(--loro-danger-text) 30%,var(--loro-border-strong));background:color-mix(in srgb,var(--loro-danger-surface) 34%,var(--loro-surface));box-shadow:var(--loro-shadow-soft),0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 7%,transparent)}.loro-auth-field--error:hover,.loro-auth-field--error:focus-within{border-color:color-mix(in srgb,var(--loro-danger-text) 44%,var(--loro-border-strong));box-shadow:var(--loro-shadow-soft),0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 10%,transparent)}.loro-auth-field__icon{display:grid;place-items:center;width:24px}.loro-auth-field__icon loro-icon{transform:scale(.62)}.loro-auth-field__input{width:100%;border:0;outline:none;background:transparent;color:var(--loro-text);font:inherit;font-size:.72rem;line-height:1.3}.loro-auth-field__input::placeholder{color:var(--loro-muted)}.loro-auth-field__toggle{border:0;background:transparent;padding:0;color:inherit;line-height:0;cursor:pointer}.loro-auth-field__toggle loro-icon{transform:scale(.62)}.loro-auth-field__error{display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.35rem;color:var(--loro-danger-text);font-size:.72rem;font-weight:750;line-height:1.3}\n"] }]
-        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }] } });
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 class LoroCheckbox {
     checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
@@ -4063,7 +4056,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
   `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-checkbox{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.65rem;color:var(--loro-muted);cursor:pointer}.loro-checkbox--disabled{opacity:.62;cursor:not-allowed}.loro-checkbox__native{position:absolute;opacity:0;pointer-events:none}.loro-checkbox__box{position:relative;width:1.15rem;height:1.15rem;margin-top:.08rem;border:1.5px solid color-mix(in srgb,var(--loro-primary-500) 78%,#ffffff 22%);border-radius:.35rem;background:var(--loro-surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--loro-surface) 70%,transparent);transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}.loro-checkbox--checked .loro-checkbox__box{background:linear-gradient(180deg,#8f6bff,#6d3dff);border-color:var(--loro-primary-500);box-shadow:inset 0 0 0 1px color-mix(in srgb,#ffffff 18%,transparent),0 0 0 3px color-mix(in srgb,var(--loro-primary-500) 12%,transparent)}.loro-checkbox--checked .loro-checkbox__box:after{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:.8rem;font-weight:900;line-height:1;content:\"\\2713\"}.loro-checkbox--invalid .loro-checkbox__box{border-color:color-mix(in srgb,var(--loro-danger-text) 44%,var(--loro-primary-500));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 10%,transparent)}.loro-checkbox__content{display:grid;gap:.22rem;min-width:0}.loro-checkbox__label{color:inherit;font-size:var(--loro-checkbox-label-font-size, .9rem);font-weight:var(--loro-checkbox-label-font-weight, 750);line-height:var(--loro-checkbox-label-line-height, 1.35)}.loro-checkbox__helper,.loro-checkbox__error{font-size:.78rem;font-weight:700;line-height:1.3}.loro-checkbox__helper{color:var(--loro-muted)}.loro-checkbox__error{color:var(--loro-danger-text)}\n"] }]
         }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }] } });
 
-let nextLoroDropdownId = 0;
 class LoroDropdown {
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
@@ -4073,34 +4065,24 @@ class LoroDropdown {
     readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
-    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
-    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
     errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
-    errorId = `loro-dropdown-error-${++nextLoroDropdownId}`;
-    errorText = computed(() => this.errorMessage().trim() || this.errors()[0]?.message?.trim() || '', ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
-    showError = computed(() => this.errorText().length > 0 || (this.invalid() && this.touched()), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
-    select(value) {
-        if (this.disabled() || this.readonly()) {
-            return;
-        }
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    updateValue(value) {
         this.value.set(value);
+        this.valueChange.emit(value);
+    }
+    markAsTouched() {
         this.touched.set(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroDropdown, isStandalone: true, selector: "loro-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, ngImport: i0, template: `
-    <label class="loro-dropdown" [class.loro-dropdown--invalid]="showError()">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroDropdown, isStandalone: true, selector: "loro-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", valueChange: "valueChange" }, ngImport: i0, template: `
+    <label class="loro-dropdown">
       @if (label()) {
         <span class="loro-dropdown__label">{{ label() }}</span>
       }
       <span class="loro-dropdown__control">
-        <select
-          [value]="value()"
-          [disabled]="disabled() || readonly()"
-          [required]="required()"
-          [attr.aria-invalid]="showError() ? 'true' : null"
-          [attr.aria-describedby]="showError() && errorText() ? errorId : null"
-          (change)="select(($any($event.target).value ?? '').toString())"
-          (blur)="touched.set(true)">
+        <select [value]="value()" [disabled]="disabled() || readonly()" [required]="required()" (change)="updateValue(($any($event.target).value ?? '').toString())" (blur)="markAsTouched()">
           @if (placeholder()) {
             <option value="" disabled>{{ placeholder() }}</option>
           }
@@ -4110,28 +4092,18 @@ class LoroDropdown {
         </select>
         <loro-icon name="chevron-down" [size]="22" alt="Abrir opciones" color="primary" />
       </span>
-      @if (showError() && errorText()) {
-        <span class="loro-dropdown__error" [id]="errorId">{{ errorText() }}</span>
-      }
     </label>
-  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-dropdown{display:grid;gap:.55rem}.loro-dropdown__label{color:var(--loro-muted-strong);font-size:.95rem;font-weight:800}.loro-dropdown__control{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;min-height:3.4rem;padding:0 1rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-input);background:var(--loro-surface)}select{width:100%;border:0;outline:0;appearance:none;background:transparent;color:var(--loro-text-strong);font:inherit;font-weight:700}.loro-dropdown--invalid .loro-dropdown__control{border-color:color-mix(in srgb,var(--loro-danger-text) 32%,var(--loro-border-subtle));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 8%,transparent)}.loro-dropdown__error{color:var(--loro-danger-text);font-size:.82rem;font-weight:750;line-height:1.3}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-dropdown{display:grid;gap:.55rem}.loro-dropdown__label{color:var(--loro-muted-strong);font-size:.95rem;font-weight:800}.loro-dropdown__control{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;min-height:3.4rem;padding:0 1rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-input);background:var(--loro-surface)}select{width:100%;border:0;outline:0;appearance:none;background:transparent;color:var(--loro-text-strong);font:inherit;font-weight:700}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroDropdown, decorators: [{
             type: Component,
             args: [{ selector: 'loro-dropdown', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <label class="loro-dropdown" [class.loro-dropdown--invalid]="showError()">
+    <label class="loro-dropdown">
       @if (label()) {
         <span class="loro-dropdown__label">{{ label() }}</span>
       }
       <span class="loro-dropdown__control">
-        <select
-          [value]="value()"
-          [disabled]="disabled() || readonly()"
-          [required]="required()"
-          [attr.aria-invalid]="showError() ? 'true' : null"
-          [attr.aria-describedby]="showError() && errorText() ? errorId : null"
-          (change)="select(($any($event.target).value ?? '').toString())"
-          (blur)="touched.set(true)">
+        <select [value]="value()" [disabled]="disabled() || readonly()" [required]="required()" (change)="updateValue(($any($event.target).value ?? '').toString())" (blur)="markAsTouched()">
           @if (placeholder()) {
             <option value="" disabled>{{ placeholder() }}</option>
           }
@@ -4141,12 +4113,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         </select>
         <loro-icon name="chevron-down" [size]="22" alt="Abrir opciones" color="primary" />
       </span>
-      @if (showError() && errorText()) {
-        <span class="loro-dropdown__error" [id]="errorId">{{ errorText() }}</span>
-      }
     </label>
-  `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-dropdown{display:grid;gap:.55rem}.loro-dropdown__label{color:var(--loro-muted-strong);font-size:.95rem;font-weight:800}.loro-dropdown__control{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;min-height:3.4rem;padding:0 1rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-input);background:var(--loro-surface)}select{width:100%;border:0;outline:0;appearance:none;background:transparent;color:var(--loro-text-strong);font:inherit;font-weight:700}.loro-dropdown--invalid .loro-dropdown__control{border-color:color-mix(in srgb,var(--loro-danger-text) 32%,var(--loro-border-subtle));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 8%,transparent)}.loro-dropdown__error{color:var(--loro-danger-text);font-size:.82rem;font-weight:750;line-height:1.3}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }] } });
+  `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-dropdown{display:grid;gap:.55rem}.loro-dropdown__label{color:var(--loro-muted-strong);font-size:.95rem;font-weight:800}.loro-dropdown__control{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;min-height:3.4rem;padding:0 1rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-input);background:var(--loro-surface)}select{width:100%;border:0;outline:0;appearance:none;background:transparent;color:var(--loro-text-strong);font:inherit;font-weight:700}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 class LoroFilterChip {
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
@@ -4181,26 +4150,22 @@ class LoroSegmentedControl {
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
-    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
-    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
     errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
-    errorText = computed(() => this.errorMessage().trim() || this.errors()[0]?.message?.trim() || '', ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
-    showError = computed(() => this.errorText().length > 0 || (this.invalid() && this.touched()), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
-    select(value) {
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    selectValue(value) {
         if (this.disabled() || this.readonly()) {
             return;
         }
         this.value.set(value);
         this.touched.set(true);
+        this.valueChange.emit(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroSegmentedControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroSegmentedControl, isStandalone: true, selector: "loro-segmented-control", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, host: { properties: { "style.--loro-segmented-count": "options().length" } }, ngImport: i0, template: `
-    <div
-      class="loro-segmented-control"
-      role="tablist"
-      [class.loro-segmented-control--invalid]="showError()"
-      [attr.aria-invalid]="showError() ? 'true' : null">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroSegmentedControl, isStandalone: true, selector: "loro-segmented-control", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", valueChange: "valueChange" }, host: { properties: { "style.--loro-segmented-count": "options().length" } }, ngImport: i0, template: `
+    <div class="loro-segmented-control" role="tablist">
       @for (option of options(); track option.value) {
         <button
           type="button"
@@ -4208,22 +4173,18 @@ class LoroSegmentedControl {
           [attr.aria-selected]="value() === option.value"
           [class.loro-segmented-control__button--active]="value() === option.value"
           class="loro-segmented-control__button"
-          [disabled]="disabled()"
-          (click)="select(option.value)">
+          [disabled]="disabled() || readonly()"
+          (click)="selectValue(option.value)">
           {{ option.label }}
         </button>
       }
     </div>
-  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-segmented-control{display:grid;grid-template-columns:repeat(var(--loro-segmented-count, 2),minmax(0,1fr));min-height:3.15rem;padding:.18rem;border:1px solid var(--loro-border-subtle);border-radius:.75rem;background:var(--loro-surface-muted);box-shadow:var(--loro-shadow-soft)}.loro-segmented-control__button{border:0;border-radius:.58rem;background:transparent;color:var(--loro-muted-strong);font:inherit;font-size:clamp(.95rem,3vw,1rem);font-weight:850;line-height:1.15;text-wrap:balance;cursor:pointer}.loro-segmented-control__button--active{background:var(--loro-surface);color:var(--loro-primary-700);box-shadow:0 6px 18px #22194914}.loro-segmented-control__button:disabled{cursor:not-allowed;opacity:.58}.loro-segmented-control--invalid{border-color:color-mix(in srgb,var(--loro-danger-text) 32%,var(--loro-border-subtle));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 8%,transparent)}@media(max-width:640px){.loro-segmented-control{min-height:3rem}.loro-segmented-control__button{padding-inline:.6rem}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-segmented-control{display:grid;grid-template-columns:repeat(var(--loro-segmented-count, 2),minmax(0,1fr));min-height:3.15rem;padding:.18rem;border:1px solid var(--loro-border-subtle);border-radius:.75rem;background:var(--loro-surface-muted);box-shadow:var(--loro-shadow-soft)}.loro-segmented-control__button{border:0;border-radius:.58rem;background:transparent;color:var(--loro-muted-strong);font:inherit;font-size:clamp(.95rem,3vw,1rem);font-weight:850;line-height:1.15;text-wrap:balance;cursor:pointer}.loro-segmented-control__button--active{background:var(--loro-surface);color:var(--loro-primary-700);box-shadow:0 6px 18px #22194914}@media(max-width:640px){.loro-segmented-control{min-height:3rem}.loro-segmented-control__button{padding-inline:.6rem}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroSegmentedControl, decorators: [{
             type: Component,
             args: [{ selector: 'loro-segmented-control', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div
-      class="loro-segmented-control"
-      role="tablist"
-      [class.loro-segmented-control--invalid]="showError()"
-      [attr.aria-invalid]="showError() ? 'true' : null">
+    <div class="loro-segmented-control" role="tablist">
       @for (option of options(); track option.value) {
         <button
           type="button"
@@ -4231,16 +4192,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
           [attr.aria-selected]="value() === option.value"
           [class.loro-segmented-control__button--active]="value() === option.value"
           class="loro-segmented-control__button"
-          [disabled]="disabled()"
-          (click)="select(option.value)">
+          [disabled]="disabled() || readonly()"
+          (click)="selectValue(option.value)">
           {{ option.label }}
         </button>
       }
     </div>
   `, host: {
                         '[style.--loro-segmented-count]': 'options().length'
-                    }, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-segmented-control{display:grid;grid-template-columns:repeat(var(--loro-segmented-count, 2),minmax(0,1fr));min-height:3.15rem;padding:.18rem;border:1px solid var(--loro-border-subtle);border-radius:.75rem;background:var(--loro-surface-muted);box-shadow:var(--loro-shadow-soft)}.loro-segmented-control__button{border:0;border-radius:.58rem;background:transparent;color:var(--loro-muted-strong);font:inherit;font-size:clamp(.95rem,3vw,1rem);font-weight:850;line-height:1.15;text-wrap:balance;cursor:pointer}.loro-segmented-control__button--active{background:var(--loro-surface);color:var(--loro-primary-700);box-shadow:0 6px 18px #22194914}.loro-segmented-control__button:disabled{cursor:not-allowed;opacity:.58}.loro-segmented-control--invalid{border-color:color-mix(in srgb,var(--loro-danger-text) 32%,var(--loro-border-subtle));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 8%,transparent)}@media(max-width:640px){.loro-segmented-control{min-height:3rem}.loro-segmented-control__button{padding-inline:.6rem}}\n"] }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }] } });
+                    }, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-segmented-control{display:grid;grid-template-columns:repeat(var(--loro-segmented-count, 2),minmax(0,1fr));min-height:3.15rem;padding:.18rem;border:1px solid var(--loro-border-subtle);border-radius:.75rem;background:var(--loro-surface-muted);box-shadow:var(--loro-shadow-soft)}.loro-segmented-control__button{border:0;border-radius:.58rem;background:transparent;color:var(--loro-muted-strong);font:inherit;font-size:clamp(.95rem,3vw,1rem);font-weight:850;line-height:1.15;text-wrap:balance;cursor:pointer}.loro-segmented-control__button--active{background:var(--loro-surface);color:var(--loro-primary-700);box-shadow:0 6px 18px #22194914}@media(max-width:640px){.loro-segmented-control{min-height:3rem}.loro-segmented-control__button{padding-inline:.6rem}}\n"] }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 class LoroSelect {
     title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
@@ -4298,25 +4259,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
   `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-select{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1.25rem;padding:1rem;border-top:1px solid var(--loro-border-subtle);background:transparent}.loro-select--selected{border:1px solid rgba(108,60,255,.28);border-radius:1rem;background:#6c3cff0a}.loro-select__icon{display:grid;width:5.2rem;height:5.2rem;place-items:center;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface-muted)}h3,p,small{margin:0}h3{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;color:var(--loro-text-strong);font-size:1.15rem;font-weight:900}p{margin-top:.35rem;color:var(--loro-muted-strong);font-weight:700}small,.loro-select__status{color:var(--loro-muted);font-weight:700}.loro-select__side{display:flex;align-items:center;justify-content:flex-end;gap:1rem}@media(max-width:680px){.loro-select{grid-template-columns:5rem minmax(0,1fr);border:1px solid var(--loro-border-subtle);border-radius:1rem}.loro-select__side{grid-column:2;justify-content:flex-start}}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
 
-let nextLoroTextAreaId = 0;
+function optionalNumberAttribute(value) {
+    if (value === undefined || value === null || value === '') {
+        return undefined;
+    }
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : undefined;
+}
 class LoroTextArea {
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    maxLength = input(undefined, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
+    maxLength = input(undefined, { ...(ngDevMode ? { debugName: "maxLength" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute });
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
-    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
-    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
     errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
-    errorId = `loro-text-area-error-${++nextLoroTextAreaId}`;
-    errorText = computed(() => this.errorMessage().trim() || this.errors()[0]?.message?.trim() || '', ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
-    showError = computed(() => this.errorText().length > 0 || (this.invalid() && this.touched()), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    updateValue(value) {
+        this.value.set(value);
+        this.valueChange.emit(value);
+    }
+    markAsTouched() {
+        this.touched.set(true);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroTextArea, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroTextArea, isStandalone: true, selector: "loro-text-area", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, ngImport: i0, template: `
-    <label class="loro-text-area" [class.loro-text-area--invalid]="showError()">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroTextArea, isStandalone: true, selector: "loro-text-area", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", valueChange: "valueChange" }, ngImport: i0, template: `
+    <label class="loro-text-area">
       @if (label()) {
         <span class="loro-text-area__label">{{ label() }}</span>
       }
@@ -4324,28 +4295,23 @@ class LoroTextArea {
         <textarea
           [placeholder]="placeholder()"
           [value]="value()"
-          [attr.maxlength]="maxLength() ?? null"
           [disabled]="disabled()"
           [readonly]="readonly()"
           [required]="required()"
-          [attr.aria-invalid]="showError() ? 'true' : null"
-          [attr.aria-describedby]="showError() && errorText() ? errorId : null"
-          (input)="value.set(($any($event.target).value ?? '').toString())"
-          (blur)="touched.set(true)"></textarea>
+          [attr.maxlength]="maxLength()"
+          (input)="updateValue(($any($event.target).value ?? '').toString())"
+          (blur)="markAsTouched()"></textarea>
         @if (maxLength()) {
           <span class="loro-text-area__counter">{{ value().length }}/{{ maxLength() }}</span>
         }
       </span>
-      @if (showError() && errorText()) {
-        <span class="loro-text-area__error" [id]="errorId">{{ errorText() }}</span>
-      }
     </label>
-  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-text-area{display:grid;gap:.55rem}.loro-text-area__label{color:var(--loro-muted-strong);font-size:.95rem;font-weight:800}.loro-text-area__control{display:grid;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-input);background:var(--loro-surface);overflow:hidden}textarea{width:100%;min-height:8rem;resize:vertical;border:0;outline:0;padding:1rem;background:transparent;color:var(--loro-text-strong);font:inherit;font-weight:650}textarea::placeholder{color:var(--loro-muted)}.loro-text-area__counter{justify-self:end;padding:0 1rem .75rem;color:var(--loro-muted);font-size:.85rem;font-weight:700}.loro-text-area--invalid .loro-text-area__control{border-color:color-mix(in srgb,var(--loro-danger-text) 32%,var(--loro-border-subtle));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 8%,transparent)}.loro-text-area__error{color:var(--loro-danger-text);font-size:.82rem;font-weight:750;line-height:1.3}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-text-area{display:grid;gap:.55rem}.loro-text-area__label{color:var(--loro-muted-strong);font-size:.95rem;font-weight:800}.loro-text-area__control{display:grid;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-input);background:var(--loro-surface);overflow:hidden}textarea{width:100%;min-height:8rem;resize:vertical;border:0;outline:0;padding:1rem;background:transparent;color:var(--loro-text-strong);font:inherit;font-weight:650}textarea::placeholder{color:var(--loro-muted)}.loro-text-area__counter{justify-self:end;padding:0 1rem .75rem;color:var(--loro-muted);font-size:.85rem;font-weight:700}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroTextArea, decorators: [{
             type: Component,
             args: [{ selector: 'loro-text-area', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <label class="loro-text-area" [class.loro-text-area--invalid]="showError()">
+    <label class="loro-text-area">
       @if (label()) {
         <span class="loro-text-area__label">{{ label() }}</span>
       }
@@ -4353,24 +4319,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         <textarea
           [placeholder]="placeholder()"
           [value]="value()"
-          [attr.maxlength]="maxLength() ?? null"
           [disabled]="disabled()"
           [readonly]="readonly()"
           [required]="required()"
-          [attr.aria-invalid]="showError() ? 'true' : null"
-          [attr.aria-describedby]="showError() && errorText() ? errorId : null"
-          (input)="value.set(($any($event.target).value ?? '').toString())"
-          (blur)="touched.set(true)"></textarea>
+          [attr.maxlength]="maxLength()"
+          (input)="updateValue(($any($event.target).value ?? '').toString())"
+          (blur)="markAsTouched()"></textarea>
         @if (maxLength()) {
           <span class="loro-text-area__counter">{{ value().length }}/{{ maxLength() }}</span>
         }
       </span>
-      @if (showError() && errorText()) {
-        <span class="loro-text-area__error" [id]="errorId">{{ errorText() }}</span>
-      }
     </label>
-  `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-text-area{display:grid;gap:.55rem}.loro-text-area__label{color:var(--loro-muted-strong);font-size:.95rem;font-weight:800}.loro-text-area__control{display:grid;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-input);background:var(--loro-surface);overflow:hidden}textarea{width:100%;min-height:8rem;resize:vertical;border:0;outline:0;padding:1rem;background:transparent;color:var(--loro-text-strong);font:inherit;font-weight:650}textarea::placeholder{color:var(--loro-muted)}.loro-text-area__counter{justify-self:end;padding:0 1rem .75rem;color:var(--loro-muted);font-size:.85rem;font-weight:700}.loro-text-area--invalid .loro-text-area__control{border-color:color-mix(in srgb,var(--loro-danger-text) 32%,var(--loro-border-subtle));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 8%,transparent)}.loro-text-area__error{color:var(--loro-danger-text);font-size:.82rem;font-weight:750;line-height:1.3}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }] } });
+  `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-text-area{display:grid;gap:.55rem}.loro-text-area__label{color:var(--loro-muted-strong);font-size:.95rem;font-weight:800}.loro-text-area__control{display:grid;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-input);background:var(--loro-surface);overflow:hidden}textarea{width:100%;min-height:8rem;resize:vertical;border:0;outline:0;padding:1rem;background:transparent;color:var(--loro-text-strong);font:inherit;font-weight:650}textarea::placeholder{color:var(--loro-muted)}.loro-text-area__counter{justify-self:end;padding:0 1rem .75rem;color:var(--loro-muted);font-size:.85rem;font-weight:700}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 class LoroUpload {
     label = input('Adjuntar captura', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));