@juligc99/loro-ui 0.0.6 → 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.
|
@@ -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 {
|
|
@@ -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 {
|