@juligc99/loro-ui 0.0.1 → 0.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/fesm2022/juligc99-loro-ui.mjs +194 -61
- package/fesm2022/juligc99-loro-ui.mjs.map +1 -1
- package/package.json +20 -3
- package/styles/_breakpoints.scss +10 -6
- package/types/juligc99-loro-ui.d.ts +64 -24
|
@@ -276,11 +276,11 @@ class LoroAppNav {
|
|
|
276
276
|
this.activePointerId = null;
|
|
277
277
|
}
|
|
278
278
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroAppNav, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
279
|
-
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: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$1, selector: "loro-image", inputs: ["name", "alt", "size", "width", "height", "fit"] }, { kind: "component", type: LoroButton$1, 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$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
279
|
+
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$1, selector: "loro-image", inputs: ["name", "alt", "size", "width", "height", "fit"] }, { kind: "component", type: LoroButton$1, 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$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
280
280
|
}
|
|
281
281
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroAppNav, decorators: [{
|
|
282
282
|
type: Component,
|
|
283
|
-
args: [{ selector: 'loro-app-nav', standalone: true, imports: [Toolbar, ToolbarWidget, LoroImage$1, LoroButton$1, LoroIcon$1], 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: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"] }]
|
|
283
|
+
args: [{ selector: 'loro-app-nav', standalone: true, imports: [Toolbar, ToolbarWidget, LoroImage$1, LoroButton$1, LoroIcon$1], 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"] }]
|
|
284
284
|
}], 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"] }] } });
|
|
285
285
|
|
|
286
286
|
class LoroAssistantCard {
|
|
@@ -806,7 +806,7 @@ class LoroCardNav {
|
|
|
806
806
|
}
|
|
807
807
|
</span>
|
|
808
808
|
</button>
|
|
809
|
-
`, 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$1, selector: "loro-badge", inputs: ["label", "variant"] }, { kind: "component", type: LoroIcon$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroRadio$1, selector: "loro-radio", inputs: ["label", "value", "description", "checked", "variant"], outputs: ["selected"] }, { kind: "component", type: LoroToggle$1, selector: "loro-toggle", inputs: ["checked", "disabled", "ariaLabel"], outputs: ["checkedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
809
|
+
`, 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$1, selector: "loro-badge", inputs: ["label", "variant"] }, { kind: "component", type: LoroIcon$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroRadio$1, selector: "loro-radio", inputs: ["label", "value", "description", "checked", "variant"], outputs: ["selected"] }, { kind: "component", type: LoroToggle$1, selector: "loro-toggle", inputs: ["checked", "disabled", "readonly", "required", "invalid", "touched", "errorMessage", "errors", "ariaLabel"], outputs: ["checkedChange", "touchedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
810
810
|
}
|
|
811
811
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroCardNav, decorators: [{
|
|
812
812
|
type: Component,
|
|
@@ -1140,11 +1140,11 @@ class LoroProductRow {
|
|
|
1140
1140
|
return target instanceof HTMLElement && !!target.closest('button, input, textarea, select, loro-input, a');
|
|
1141
1141
|
}
|
|
1142
1142
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroProductRow, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1143
|
-
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$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroImage$1, selector: "loro-image", inputs: ["name", "alt", "size", "width", "height", "fit"] }, { kind: "component", type: LoroInput$1, 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 });
|
|
1143
|
+
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$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroImage$1, selector: "loro-image", inputs: ["name", "alt", "size", "width", "height", "fit"] }, { kind: "component", type: LoroInput$1, 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 });
|
|
1144
1144
|
}
|
|
1145
1145
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroProductRow, decorators: [{
|
|
1146
1146
|
type: Component,
|
|
1147
|
-
args: [{ selector: 'loro-product-row', standalone: true, imports: [LoroIcon$1, LoroImage$1, LoroInput$1], 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"] }]
|
|
1147
|
+
args: [{ selector: 'loro-product-row', standalone: true, imports: [LoroIcon$1, LoroImage$1, LoroInput$1], 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"] }]
|
|
1148
1148
|
}], 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"] }] } });
|
|
1149
1149
|
|
|
1150
1150
|
class LoroProductSection {
|
|
@@ -2191,16 +2191,21 @@ class LoroAuthField {
|
|
|
2191
2191
|
icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
2192
2192
|
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
2193
2193
|
placeholder = input.required(...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
2194
|
-
value =
|
|
2194
|
+
value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
2195
2195
|
type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
2196
2196
|
autocomplete = input('off', ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
|
|
2197
2197
|
selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
|
|
2198
2198
|
state = input('default', ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
2199
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
2200
|
+
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
2201
|
+
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
2202
|
+
invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
2203
|
+
touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
2199
2204
|
errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
|
|
2200
|
-
|
|
2205
|
+
errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
|
|
2201
2206
|
errorId = `loro-auth-field-error-${++nextLoroAuthFieldId}`;
|
|
2202
|
-
errorText = computed(() => this.errorMessage().trim(), ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
|
|
2203
|
-
hasError = computed(() => this.state() === 'error' || this.errorText().length > 0, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
|
|
2207
|
+
errorText = computed(() => this.errorMessage().trim() || this.errors()[0]?.message?.trim() || '', ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
|
|
2208
|
+
hasError = computed(() => this.state() === 'error' || this.errorText().length > 0 || (this.invalid() && this.touched()), ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
|
|
2204
2209
|
passwordVisible = signal(false, ...(ngDevMode ? [{ debugName: "passwordVisible" }] : /* istanbul ignore next */ []));
|
|
2205
2210
|
showToggle() {
|
|
2206
2211
|
return this.type() === 'password';
|
|
@@ -2212,7 +2217,7 @@ class LoroAuthField {
|
|
|
2212
2217
|
this.passwordVisible.update((value) => !value);
|
|
2213
2218
|
}
|
|
2214
2219
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroAuthField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2215
|
-
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 } }, outputs: {
|
|
2220
|
+
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: `
|
|
2216
2221
|
<label
|
|
2217
2222
|
class="loro-auth-field"
|
|
2218
2223
|
[class.loro-auth-field--selected]="selected()"
|
|
@@ -2228,9 +2233,13 @@ class LoroAuthField {
|
|
|
2228
2233
|
[attr.autocomplete]="autocomplete()"
|
|
2229
2234
|
[placeholder]="placeholder()"
|
|
2230
2235
|
[value]="value()"
|
|
2236
|
+
[disabled]="disabled()"
|
|
2237
|
+
[readonly]="readonly()"
|
|
2238
|
+
[required]="required()"
|
|
2231
2239
|
[attr.aria-invalid]="hasError() ? 'true' : null"
|
|
2232
2240
|
[attr.aria-describedby]="hasError() && errorText() ? errorId : null"
|
|
2233
|
-
(input)="
|
|
2241
|
+
(input)="value.set(($any($event.target).value ?? '').toString())"
|
|
2242
|
+
(blur)="touched.set(true)"
|
|
2234
2243
|
/>
|
|
2235
2244
|
@if (showToggle()) {
|
|
2236
2245
|
<button
|
|
@@ -2269,9 +2278,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2269
2278
|
[attr.autocomplete]="autocomplete()"
|
|
2270
2279
|
[placeholder]="placeholder()"
|
|
2271
2280
|
[value]="value()"
|
|
2281
|
+
[disabled]="disabled()"
|
|
2282
|
+
[readonly]="readonly()"
|
|
2283
|
+
[required]="required()"
|
|
2272
2284
|
[attr.aria-invalid]="hasError() ? 'true' : null"
|
|
2273
2285
|
[attr.aria-describedby]="hasError() && errorText() ? errorId : null"
|
|
2274
|
-
(input)="
|
|
2286
|
+
(input)="value.set(($any($event.target).value ?? '').toString())"
|
|
2287
|
+
(blur)="touched.set(true)"
|
|
2275
2288
|
/>
|
|
2276
2289
|
@if (showToggle()) {
|
|
2277
2290
|
<button
|
|
@@ -2291,7 +2304,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2291
2304
|
</span>
|
|
2292
2305
|
}
|
|
2293
2306
|
`, 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"] }]
|
|
2294
|
-
}], 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: [{ 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 }] }],
|
|
2307
|
+
}], 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 }] }] } });
|
|
2295
2308
|
|
|
2296
2309
|
class LoroCheckbox {
|
|
2297
2310
|
checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
|
|
@@ -2385,20 +2398,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2385
2398
|
`, 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"] }]
|
|
2386
2399
|
}], 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 }] }] } });
|
|
2387
2400
|
|
|
2401
|
+
let nextLoroDropdownId = 0;
|
|
2388
2402
|
class LoroDropdown {
|
|
2389
2403
|
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
2390
2404
|
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
2391
|
-
value =
|
|
2405
|
+
value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
2392
2406
|
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
2393
|
-
|
|
2407
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
2408
|
+
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
2409
|
+
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
2410
|
+
invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
2411
|
+
touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
2412
|
+
errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
|
|
2413
|
+
errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
|
|
2414
|
+
errorId = `loro-dropdown-error-${++nextLoroDropdownId}`;
|
|
2415
|
+
errorText = computed(() => this.errorMessage().trim() || this.errors()[0]?.message?.trim() || '', ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
|
|
2416
|
+
showError = computed(() => this.errorText().length > 0 || (this.invalid() && this.touched()), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
|
|
2417
|
+
select(value) {
|
|
2418
|
+
if (this.disabled() || this.readonly()) {
|
|
2419
|
+
return;
|
|
2420
|
+
}
|
|
2421
|
+
this.value.set(value);
|
|
2422
|
+
this.touched.set(true);
|
|
2423
|
+
}
|
|
2394
2424
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2395
|
-
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 } }, outputs: {
|
|
2396
|
-
<label class="loro-dropdown">
|
|
2425
|
+
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: `
|
|
2426
|
+
<label class="loro-dropdown" [class.loro-dropdown--invalid]="showError()">
|
|
2397
2427
|
@if (label()) {
|
|
2398
2428
|
<span class="loro-dropdown__label">{{ label() }}</span>
|
|
2399
2429
|
}
|
|
2400
2430
|
<span class="loro-dropdown__control">
|
|
2401
|
-
<select
|
|
2431
|
+
<select
|
|
2432
|
+
[value]="value()"
|
|
2433
|
+
[disabled]="disabled() || readonly()"
|
|
2434
|
+
[required]="required()"
|
|
2435
|
+
[attr.aria-invalid]="showError() ? 'true' : null"
|
|
2436
|
+
[attr.aria-describedby]="showError() && errorText() ? errorId : null"
|
|
2437
|
+
(change)="select(($any($event.target).value ?? '').toString())"
|
|
2438
|
+
(blur)="touched.set(true)">
|
|
2402
2439
|
@if (placeholder()) {
|
|
2403
2440
|
<option value="" disabled>{{ placeholder() }}</option>
|
|
2404
2441
|
}
|
|
@@ -2408,18 +2445,28 @@ class LoroDropdown {
|
|
|
2408
2445
|
</select>
|
|
2409
2446
|
<loro-icon name="chevron-down" [size]="22" alt="Abrir opciones" color="primary" />
|
|
2410
2447
|
</span>
|
|
2448
|
+
@if (showError() && errorText()) {
|
|
2449
|
+
<span class="loro-dropdown__error" [id]="errorId">{{ errorText() }}</span>
|
|
2450
|
+
}
|
|
2411
2451
|
</label>
|
|
2412
|
-
`, 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$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2452
|
+
`, 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$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2413
2453
|
}
|
|
2414
2454
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroDropdown, decorators: [{
|
|
2415
2455
|
type: Component,
|
|
2416
2456
|
args: [{ selector: 'loro-dropdown', standalone: true, imports: [LoroIcon$1], changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
2417
|
-
<label class="loro-dropdown">
|
|
2457
|
+
<label class="loro-dropdown" [class.loro-dropdown--invalid]="showError()">
|
|
2418
2458
|
@if (label()) {
|
|
2419
2459
|
<span class="loro-dropdown__label">{{ label() }}</span>
|
|
2420
2460
|
}
|
|
2421
2461
|
<span class="loro-dropdown__control">
|
|
2422
|
-
<select
|
|
2462
|
+
<select
|
|
2463
|
+
[value]="value()"
|
|
2464
|
+
[disabled]="disabled() || readonly()"
|
|
2465
|
+
[required]="required()"
|
|
2466
|
+
[attr.aria-invalid]="showError() ? 'true' : null"
|
|
2467
|
+
[attr.aria-describedby]="showError() && errorText() ? errorId : null"
|
|
2468
|
+
(change)="select(($any($event.target).value ?? '').toString())"
|
|
2469
|
+
(blur)="touched.set(true)">
|
|
2423
2470
|
@if (placeholder()) {
|
|
2424
2471
|
<option value="" disabled>{{ placeholder() }}</option>
|
|
2425
2472
|
}
|
|
@@ -2429,9 +2476,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2429
2476
|
</select>
|
|
2430
2477
|
<loro-icon name="chevron-down" [size]="22" alt="Abrir opciones" color="primary" />
|
|
2431
2478
|
</span>
|
|
2479
|
+
@if (showError() && errorText()) {
|
|
2480
|
+
<span class="loro-dropdown__error" [id]="errorId">{{ errorText() }}</span>
|
|
2481
|
+
}
|
|
2432
2482
|
</label>
|
|
2433
|
-
`, 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"] }]
|
|
2434
|
-
}], 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 }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }],
|
|
2483
|
+
`, 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"] }]
|
|
2484
|
+
}], 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 }] }] } });
|
|
2435
2485
|
|
|
2436
2486
|
class LoroFilterChip {
|
|
2437
2487
|
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
@@ -2462,6 +2512,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2462
2512
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
|
|
2463
2513
|
|
|
2464
2514
|
let nextLoroInputId = 0;
|
|
2515
|
+
function optionalNumberAttribute(value) {
|
|
2516
|
+
if (value === undefined || value === null || value === '') {
|
|
2517
|
+
return undefined;
|
|
2518
|
+
}
|
|
2519
|
+
const parsed = Number(value);
|
|
2520
|
+
return Number.isFinite(parsed) ? parsed : undefined;
|
|
2521
|
+
}
|
|
2465
2522
|
class LoroInput {
|
|
2466
2523
|
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
2467
2524
|
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
@@ -2487,8 +2544,8 @@ class LoroInput {
|
|
|
2487
2544
|
touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
2488
2545
|
unit = input('ud', ...(ngDevMode ? [{ debugName: "unit" }] : /* istanbul ignore next */ []));
|
|
2489
2546
|
step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
|
|
2490
|
-
min = input(
|
|
2491
|
-
max = input(
|
|
2547
|
+
min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute });
|
|
2548
|
+
max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute });
|
|
2492
2549
|
trailingClick = output();
|
|
2493
2550
|
control = viewChild('control', ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
|
|
2494
2551
|
errorId = `loro-input-error-${++nextLoroInputId}`;
|
|
@@ -2529,7 +2586,7 @@ class LoroInput {
|
|
|
2529
2586
|
}
|
|
2530
2587
|
coerceNumber(value) {
|
|
2531
2588
|
const parsed = Number(value.replace(',', '.'));
|
|
2532
|
-
return Number.isFinite(parsed) ? parsed : (this.min()
|
|
2589
|
+
return Number.isFinite(parsed) ? parsed : this.coerceLimit(this.min(), 0);
|
|
2533
2590
|
}
|
|
2534
2591
|
formatValue(value) {
|
|
2535
2592
|
if (this.normalizedUnit() === 'ud') {
|
|
@@ -2566,10 +2623,20 @@ class LoroInput {
|
|
|
2566
2623
|
this.value.set(formatted);
|
|
2567
2624
|
}
|
|
2568
2625
|
clampValue(value) {
|
|
2569
|
-
const min = this.min()
|
|
2570
|
-
const max = this.max()
|
|
2626
|
+
const min = this.coerceLimit(this.min(), 0);
|
|
2627
|
+
const max = this.coerceLimit(this.max(), 100);
|
|
2571
2628
|
return Math.min(max, Math.max(min, value));
|
|
2572
2629
|
}
|
|
2630
|
+
coerceLimit(value, fallback) {
|
|
2631
|
+
if (typeof value === 'number') {
|
|
2632
|
+
return Number.isFinite(value) ? value : fallback;
|
|
2633
|
+
}
|
|
2634
|
+
if (typeof value === 'string' && value.trim()) {
|
|
2635
|
+
const parsed = Number(value.replace(',', '.'));
|
|
2636
|
+
return Number.isFinite(parsed) ? parsed : fallback;
|
|
2637
|
+
}
|
|
2638
|
+
return fallback;
|
|
2639
|
+
}
|
|
2573
2640
|
sanitizeValue(value) {
|
|
2574
2641
|
if (this.normalizedUnit() === 'ud') {
|
|
2575
2642
|
return value.replace(/\D/g, '').slice(0, this.stepperInputMaxLength());
|
|
@@ -2909,11 +2976,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2909
2976
|
|
|
2910
2977
|
class LoroSegmentedControl {
|
|
2911
2978
|
options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
2912
|
-
value =
|
|
2913
|
-
|
|
2979
|
+
value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
2980
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
2981
|
+
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
2982
|
+
invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
2983
|
+
touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
2984
|
+
errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
|
|
2985
|
+
errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
|
|
2986
|
+
errorText = computed(() => this.errorMessage().trim() || this.errors()[0]?.message?.trim() || '', ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
|
|
2987
|
+
showError = computed(() => this.errorText().length > 0 || (this.invalid() && this.touched()), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
|
|
2988
|
+
select(value) {
|
|
2989
|
+
if (this.disabled() || this.readonly()) {
|
|
2990
|
+
return;
|
|
2991
|
+
}
|
|
2992
|
+
this.value.set(value);
|
|
2993
|
+
this.touched.set(true);
|
|
2994
|
+
}
|
|
2914
2995
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroSegmentedControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2915
|
-
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: true, transformFunction: null } }, outputs: {
|
|
2916
|
-
<div
|
|
2996
|
+
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: `
|
|
2997
|
+
<div
|
|
2998
|
+
class="loro-segmented-control"
|
|
2999
|
+
role="tablist"
|
|
3000
|
+
[class.loro-segmented-control--invalid]="showError()"
|
|
3001
|
+
[attr.aria-invalid]="showError() ? 'true' : null">
|
|
2917
3002
|
@for (option of options(); track option.value) {
|
|
2918
3003
|
<button
|
|
2919
3004
|
type="button"
|
|
@@ -2921,17 +3006,22 @@ class LoroSegmentedControl {
|
|
|
2921
3006
|
[attr.aria-selected]="value() === option.value"
|
|
2922
3007
|
[class.loro-segmented-control__button--active]="value() === option.value"
|
|
2923
3008
|
class="loro-segmented-control__button"
|
|
2924
|
-
|
|
3009
|
+
[disabled]="disabled()"
|
|
3010
|
+
(click)="select(option.value)">
|
|
2925
3011
|
{{ option.label }}
|
|
2926
3012
|
</button>
|
|
2927
3013
|
}
|
|
2928
3014
|
</div>
|
|
2929
|
-
`, 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 });
|
|
3015
|
+
`, 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 });
|
|
2930
3016
|
}
|
|
2931
3017
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroSegmentedControl, decorators: [{
|
|
2932
3018
|
type: Component,
|
|
2933
3019
|
args: [{ selector: 'loro-segmented-control', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
2934
|
-
<div
|
|
3020
|
+
<div
|
|
3021
|
+
class="loro-segmented-control"
|
|
3022
|
+
role="tablist"
|
|
3023
|
+
[class.loro-segmented-control--invalid]="showError()"
|
|
3024
|
+
[attr.aria-invalid]="showError() ? 'true' : null">
|
|
2935
3025
|
@for (option of options(); track option.value) {
|
|
2936
3026
|
<button
|
|
2937
3027
|
type="button"
|
|
@@ -2939,15 +3029,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2939
3029
|
[attr.aria-selected]="value() === option.value"
|
|
2940
3030
|
[class.loro-segmented-control__button--active]="value() === option.value"
|
|
2941
3031
|
class="loro-segmented-control__button"
|
|
2942
|
-
|
|
3032
|
+
[disabled]="disabled()"
|
|
3033
|
+
(click)="select(option.value)">
|
|
2943
3034
|
{{ option.label }}
|
|
2944
3035
|
</button>
|
|
2945
3036
|
}
|
|
2946
3037
|
</div>
|
|
2947
3038
|
`, host: {
|
|
2948
3039
|
'[style.--loro-segmented-count]': 'options().length'
|
|
2949
|
-
}, 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"] }]
|
|
2950
|
-
}], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }],
|
|
3040
|
+
}, 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"] }]
|
|
3041
|
+
}], 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 }] }] } });
|
|
2951
3042
|
|
|
2952
3043
|
class LoroSelect {
|
|
2953
3044
|
title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
@@ -3005,15 +3096,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3005
3096
|
`, 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"] }]
|
|
3006
3097
|
}], 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"] }] } });
|
|
3007
3098
|
|
|
3099
|
+
let nextLoroTextAreaId = 0;
|
|
3008
3100
|
class LoroTextArea {
|
|
3009
3101
|
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
3010
3102
|
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
3011
|
-
value =
|
|
3012
|
-
maxLength = input(
|
|
3013
|
-
|
|
3103
|
+
value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
3104
|
+
maxLength = input(undefined, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
|
|
3105
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
3106
|
+
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
3107
|
+
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
3108
|
+
invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
3109
|
+
touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
3110
|
+
errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
|
|
3111
|
+
errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
|
|
3112
|
+
errorId = `loro-text-area-error-${++nextLoroTextAreaId}`;
|
|
3113
|
+
errorText = computed(() => this.errorMessage().trim() || this.errors()[0]?.message?.trim() || '', ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
|
|
3114
|
+
showError = computed(() => this.errorText().length > 0 || (this.invalid() && this.touched()), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
|
|
3014
3115
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroTextArea, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3015
|
-
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 } }, outputs: {
|
|
3016
|
-
<label class="loro-text-area">
|
|
3116
|
+
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: `
|
|
3117
|
+
<label class="loro-text-area" [class.loro-text-area--invalid]="showError()">
|
|
3017
3118
|
@if (label()) {
|
|
3018
3119
|
<span class="loro-text-area__label">{{ label() }}</span>
|
|
3019
3120
|
}
|
|
@@ -3021,19 +3122,28 @@ class LoroTextArea {
|
|
|
3021
3122
|
<textarea
|
|
3022
3123
|
[placeholder]="placeholder()"
|
|
3023
3124
|
[value]="value()"
|
|
3024
|
-
[attr.maxlength]="maxLength()"
|
|
3025
|
-
|
|
3125
|
+
[attr.maxlength]="maxLength() ?? null"
|
|
3126
|
+
[disabled]="disabled()"
|
|
3127
|
+
[readonly]="readonly()"
|
|
3128
|
+
[required]="required()"
|
|
3129
|
+
[attr.aria-invalid]="showError() ? 'true' : null"
|
|
3130
|
+
[attr.aria-describedby]="showError() && errorText() ? errorId : null"
|
|
3131
|
+
(input)="value.set(($any($event.target).value ?? '').toString())"
|
|
3132
|
+
(blur)="touched.set(true)"></textarea>
|
|
3026
3133
|
@if (maxLength()) {
|
|
3027
3134
|
<span class="loro-text-area__counter">{{ value().length }}/{{ maxLength() }}</span>
|
|
3028
3135
|
}
|
|
3029
3136
|
</span>
|
|
3137
|
+
@if (showError() && errorText()) {
|
|
3138
|
+
<span class="loro-text-area__error" [id]="errorId">{{ errorText() }}</span>
|
|
3139
|
+
}
|
|
3030
3140
|
</label>
|
|
3031
|
-
`, 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 });
|
|
3141
|
+
`, 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 });
|
|
3032
3142
|
}
|
|
3033
3143
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroTextArea, decorators: [{
|
|
3034
3144
|
type: Component,
|
|
3035
3145
|
args: [{ selector: 'loro-text-area', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
3036
|
-
<label class="loro-text-area">
|
|
3146
|
+
<label class="loro-text-area" [class.loro-text-area--invalid]="showError()">
|
|
3037
3147
|
@if (label()) {
|
|
3038
3148
|
<span class="loro-text-area__label">{{ label() }}</span>
|
|
3039
3149
|
}
|
|
@@ -3041,40 +3151,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3041
3151
|
<textarea
|
|
3042
3152
|
[placeholder]="placeholder()"
|
|
3043
3153
|
[value]="value()"
|
|
3044
|
-
[attr.maxlength]="maxLength()"
|
|
3045
|
-
|
|
3154
|
+
[attr.maxlength]="maxLength() ?? null"
|
|
3155
|
+
[disabled]="disabled()"
|
|
3156
|
+
[readonly]="readonly()"
|
|
3157
|
+
[required]="required()"
|
|
3158
|
+
[attr.aria-invalid]="showError() ? 'true' : null"
|
|
3159
|
+
[attr.aria-describedby]="showError() && errorText() ? errorId : null"
|
|
3160
|
+
(input)="value.set(($any($event.target).value ?? '').toString())"
|
|
3161
|
+
(blur)="touched.set(true)"></textarea>
|
|
3046
3162
|
@if (maxLength()) {
|
|
3047
3163
|
<span class="loro-text-area__counter">{{ value().length }}/{{ maxLength() }}</span>
|
|
3048
3164
|
}
|
|
3049
3165
|
</span>
|
|
3166
|
+
@if (showError() && errorText()) {
|
|
3167
|
+
<span class="loro-text-area__error" [id]="errorId">{{ errorText() }}</span>
|
|
3168
|
+
}
|
|
3050
3169
|
</label>
|
|
3051
|
-
`, 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"] }]
|
|
3052
|
-
}], 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 }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }],
|
|
3170
|
+
`, 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"] }]
|
|
3171
|
+
}], 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 }] }] } });
|
|
3053
3172
|
|
|
3054
3173
|
class LoroToggle {
|
|
3055
|
-
checked =
|
|
3174
|
+
checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
|
|
3056
3175
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
3176
|
+
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
3177
|
+
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
3178
|
+
invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
3179
|
+
touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
3180
|
+
errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
|
|
3181
|
+
errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
|
|
3057
3182
|
ariaLabel = input('Cambiar estado', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
3058
|
-
|
|
3183
|
+
errorText = computed(() => this.errorMessage().trim() || this.errors()[0]?.message?.trim() || '', ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
|
|
3184
|
+
showError = computed(() => this.errorText().length > 0 || (this.invalid() && this.touched()), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
|
|
3059
3185
|
toggle() {
|
|
3060
|
-
if (this.disabled()) {
|
|
3186
|
+
if (this.disabled() || this.readonly()) {
|
|
3061
3187
|
return;
|
|
3062
3188
|
}
|
|
3063
|
-
this.
|
|
3189
|
+
this.checked.update((checked) => !checked);
|
|
3190
|
+
this.touched.set(true);
|
|
3064
3191
|
}
|
|
3065
3192
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3066
|
-
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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: {
|
|
3193
|
+
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: `
|
|
3067
3194
|
<button
|
|
3068
3195
|
type="button"
|
|
3069
3196
|
class="loro-toggle"
|
|
3070
3197
|
[class.loro-toggle--checked]="checked()"
|
|
3198
|
+
[class.loro-toggle--invalid]="showError()"
|
|
3071
3199
|
[disabled]="disabled()"
|
|
3072
3200
|
[attr.aria-label]="ariaLabel()"
|
|
3073
3201
|
[attr.aria-pressed]="checked()"
|
|
3074
|
-
|
|
3202
|
+
[attr.aria-invalid]="showError() ? 'true' : null"
|
|
3203
|
+
(click)="toggle()"
|
|
3204
|
+
(blur)="touched.set(true)">
|
|
3075
3205
|
<span class="loro-toggle__thumb"></span>
|
|
3076
3206
|
</button>
|
|
3077
|
-
`, 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 });
|
|
3207
|
+
`, 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 });
|
|
3078
3208
|
}
|
|
3079
3209
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroToggle, decorators: [{
|
|
3080
3210
|
type: Component,
|
|
@@ -3083,14 +3213,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3083
3213
|
type="button"
|
|
3084
3214
|
class="loro-toggle"
|
|
3085
3215
|
[class.loro-toggle--checked]="checked()"
|
|
3216
|
+
[class.loro-toggle--invalid]="showError()"
|
|
3086
3217
|
[disabled]="disabled()"
|
|
3087
3218
|
[attr.aria-label]="ariaLabel()"
|
|
3088
3219
|
[attr.aria-pressed]="checked()"
|
|
3089
|
-
|
|
3220
|
+
[attr.aria-invalid]="showError() ? 'true' : null"
|
|
3221
|
+
(click)="toggle()"
|
|
3222
|
+
(blur)="touched.set(true)">
|
|
3090
3223
|
<span class="loro-toggle__thumb"></span>
|
|
3091
3224
|
</button>
|
|
3092
|
-
`, 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"] }]
|
|
3093
|
-
}], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }],
|
|
3225
|
+
`, 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"] }]
|
|
3226
|
+
}], 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 }] }] } });
|
|
3094
3227
|
|
|
3095
3228
|
class LoroUpload {
|
|
3096
3229
|
label = input('Adjuntar captura', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|