@juligc99/loro-ui 0.0.16 → 0.0.17

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.
Files changed (4) hide show
  1. package/fesm2022/juligc99-loro-ui.mjs +55 -32
  2. package/fesm2022/juligc99-loro-ui.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/juligc99-loro-ui.d.ts +54 -27
package/fesm2022/juligc99-loro-ui.mjs CHANGED
@@ -1511,11 +1511,11 @@ class LoroAppNav {
1511
1511
  this.mobilePointerActive.set(false);
1512
1512
  }
1513
1513
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroAppNav, deps: [], target: i0.ɵɵFactoryTarget.Component });
1514
- 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 data-horizontal-gesture\n [attr.aria-label]=\"ariaLabel()\"\n [style.--loro-mobile-slider-position]=\"mobileSliderPosition()\"\n [class.loro-app-nav__mobile--dragging]=\"isMobileDragging()\"\n [class.loro-app-nav__mobile--with-labels]=\"true\"\n [style.--loro-mobile-item-count]=\"mobileItemCount()\"\n [style.--loro-mobile-visual-slot-count]=\"mobileVisualSlotCount()\"\n (pointerdown)=\"onMobilePointerDown($event)\"\n (pointermove)=\"onMobilePointerMove($event)\"\n (pointerup)=\"onMobilePointerUp($event)\"\n (pointercancel)=\"onMobilePointerCancel($event)\"\n >\n <span\n class=\"loro-app-nav__mobile-slider\"\n [class.loro-app-nav__mobile-slider--scan]=\"selectedMobileItemId() === 'scan'\"\n aria-hidden=\"true\"></span>\n\n @for (item of mobileItems(); track item.id; let index = $index) {\n <button\n ngToolbarWidget\n type=\"button\"\n class=\"loro-app-nav__mobile-item\"\n [style.grid-column]=\"mobileItemGridColumn(index)\"\n [class.loro-app-nav__mobile-item--active]=\"isMobileItemVisualActive(index)\"\n [class.loro-app-nav__mobile-item--scan-active]=\"item.id === 'scan' && isMobileItemVisualActive(index)\"\n [class.loro-app-nav__mobile-item--disabled]=\"item.disabled\"\n [attr.aria-label]=\"item.label\"\n [attr.aria-current]=\"item.active ? 'page' : null\"\n [value]=\"item.id\"\n [disabled]=\"!!item.disabled\"\n (click)=\"onMobileItemClick(item)\"\n >\n <loro-icon\n class=\"loro-app-nav__mobile-icon\"\n [name]=\"item.icon\"\n [size]=\"24\"\n color=\"default\"\n [alt]=\"item.label\"\n />\n <span class=\"loro-app-nav__mobile-label\">{{ item.label }}</span>\n </button>\n }\n </nav>\n</aside>\n", styles: [":host{display:block;width:100%;height:100%}.loro-app-nav{width:100%;height:100%}.loro-app-nav__desktop{display:none;height:100%}.loro-app-nav__surface{width:100%;max-width:none;display:flex;height:100%;flex-direction:column;gap:1.1rem;padding:1.75rem 1.35rem 1.5rem;background:var(--loro-nav-desktop-surface, var(--loro-shell-header-surface));border:1px solid var(--loro-nav-desktop-border, var(--loro-border-soft))}html[data-theme=dark] .loro-app-nav__surface{background:var(--loro-nav-desktop-surface, rgba(24, 28, 32, .78));border-color:var(--loro-nav-desktop-border, rgba(255, 255, 255, .08));box-shadow:var(--loro-nav-desktop-shadow, none)}.loro-app-nav__surface--compact{gap:.9rem;padding:1.25rem 1rem 1.15rem}.loro-app-nav__surface--compact .loro-app-nav__brand{min-height:3.65rem;padding-bottom:1.2rem}.loro-app-nav__surface--compact .loro-app-nav__item{--loro-button-min-height: 3.75rem}.loro-app-nav__brand{display:flex;align-items:center;min-height:4.25rem;padding:.35rem .55rem .85rem}.loro-app-nav__brand-image{display:block}.loro-app-nav__nav{display:flex;flex-direction:column;gap:.75rem}.loro-app-nav__item{--loro-button-min-height: 4.25rem;--loro-button-padding: 1rem 1.2rem;--loro-button-radius: 1rem;--loro-button-font-size: 1rem;--loro-button-background: var(--loro-nav-button-background, transparent);--loro-button-border-color: var(--loro-nav-button-border, transparent);--loro-button-color: var(--loro-nav-button-text, var(--loro-text-strong));--loro-button-hover-background: var(--loro-nav-button-hover-bg, var(--loro-nav-hover-bg));--loro-button-hover-border-color: var(--loro-nav-button-hover-border, transparent);--loro-button-hover-color: var(--loro-nav-button-hover-text, var(--loro-nav-button-text, var(--loro-text-strong)));--loro-button-hover-shadow: var(--loro-nav-button-hover-shadow, none);display:block;width:100%;color:var(--loro-nav-button-text, var(--loro-text-strong))}.loro-app-nav__item--active{--loro-button-selected-background: var(--loro-nav-button-active-bg, var(--loro-nav-active-bg));--loro-button-selected-border-color: var(--loro-nav-button-active-border, var(--loro-nav-active-border));--loro-button-selected-color: var(--loro-nav-button-active-text, var(--loro-primary-500));--loro-button-selected-shadow: var(--loro-nav-button-active-shadow, inset .35rem 0 0 var(--loro-primary-500))}.loro-app-nav__item--logout{--loro-button-background: var(--loro-nav-button-danger-bg, var(--loro-danger-surface));--loro-button-border-color: var(--loro-nav-button-danger-border, transparent);--loro-button-color: var(--loro-nav-button-danger-text, var(--loro-danger-text));--loro-button-hover-background: var(--loro-nav-button-danger-bg, var(--loro-danger-surface));--loro-button-hover-border-color: var(--loro-nav-button-danger-border, transparent);--loro-button-hover-color: var(--loro-nav-button-danger-text, var(--loro-danger-text));--loro-button-shadow: none;--loro-button-hover-shadow: none}.loro-app-nav__item--disabled,.loro-app-nav__mobile-item--disabled{cursor:not-allowed;opacity:1}.loro-app-nav__item--disabled{--loro-button-disabled-bg: var(--loro-disabled-surface);--loro-button-disabled-border: var(--loro-disabled-border);--loro-button-disabled-text: var(--loro-disabled-text)}.loro-app-nav__mobile-item--disabled{color:var(--loro-disabled-text)}.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;contain:layout paint;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:hover:not(.loro-app-nav__mobile-item--active),.loro-app-nav__mobile-item:active:not(.loro-app-nav__mobile-item--active),.loro-app-nav__mobile-item:focus:not(.loro-app-nav__mobile-item--active){background:transparent;color:var(--loro-nav-mobile-icon, var(--loro-text))}.loro-app-nav__mobile-item--active{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:1;color:var(--loro-disabled-text)}.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:transform 1ms linear}.loro-app-nav__mobile-slider--scan{background:var(--loro-nav-mobile-scan-indicator, linear-gradient(180deg, rgba(132, 83, 255, .98) 0%, rgba(94, 47, 224, .96) 100%));box-shadow:var(--loro-nav-mobile-scan-indicator-shadow, inset 0 1px 0 rgba(255, 255, 255, .38), 0 .85rem 1.65rem rgba(108, 60, 255, .28))}.loro-app-nav__mobile-item--scan-active{color:var(--loro-nav-mobile-scan-active-color, #fff)!important}.loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active):hover,.loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active):active{color:var(--loro-nav-mobile-icon, var(--loro-text))!important}.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active),.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active) .loro-app-nav__mobile-icon,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active) ::ng-deep .loro-icon,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active) ::ng-deep svg{color:var(--loro-nav-mobile-icon, var(--loro-text))!important;opacity:1!important;visibility:visible!important}.loro-app-nav__mobile-label{display:block;max-width:100%;overflow:hidden;color:inherit;font-size:.625rem;font-weight:700;line-height:1.1;text-align:center;text-overflow:ellipsis;white-space:nowrap;opacity:0;transform:translateY(.08rem);transition:opacity .18s ease,transform .18s ease}.loro-app-nav__mobile--with-labels{width:min(92vw - max(1rem,var(--app-shell-mobile-gutter, 1rem) * .75),24rem)}.loro-app-nav__mobile--with-labels .loro-app-nav__mobile-item{min-height:4.4rem;padding-top:.7rem}.loro-app-nav__mobile--with-labels .loro-app-nav__mobile-label{opacity:1;transform:translateY(0)}@media(max-width:479.99px)and (orientation:portrait){:host{height:auto}.loro-app-nav{height:auto;padding:0}.loro-app-nav__desktop{height:auto}}@media(min-width:1024px){:host,.loro-app-nav,.loro-app-nav__desktop{height:100%}.loro-app-nav__desktop{display:block}.loro-app-nav__mobile{display:none}}@media(prefers-reduced-motion:reduce){.loro-app-nav__mobile-slider,.loro-app-nav__mobile-item,.loro-app-nav__mobile-item ::ng-deep .loro-icon{transition-duration:1ms}}\n"], dependencies: [{ kind: "directive", type: Toolbar, selector: "[ngToolbar]", inputs: ["orientation", "softDisabled", "disabled", "wrap", "values"], outputs: ["valuesChange"], exportAs: ["ngToolbar"] }, { kind: "directive", type: ToolbarWidget, selector: "[ngToolbarWidget]", inputs: ["id", "disabled", "value"], exportAs: ["ngToolbarWidget"] }, { kind: "component", type: LoroImage, selector: "loro-image", inputs: ["name", "alt", "size", "width", "height", "fit"] }, { kind: "component", type: LoroButton, selector: "loro-button", inputs: ["label", "text", "icon", "iconContent", "iconMode", "iconSize", "iconButtonSize", "iconColor", "socialMobileCompact", "selected", "variant", "typeButton", "color", "size", "fullWidth", "buttonWidth", "disabled", "loading", "type", "formId", "ariaLabel", "ariaDescription"], outputs: ["buttonClick", "change", "sanChange"] }, { kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1514
+ 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 data-horizontal-gesture\n [attr.aria-label]=\"ariaLabel()\"\n [style.--loro-mobile-slider-position]=\"mobileSliderPosition()\"\n [class.loro-app-nav__mobile--dragging]=\"isMobileDragging()\"\n [class.loro-app-nav__mobile--with-labels]=\"true\"\n [style.--loro-mobile-item-count]=\"mobileItemCount()\"\n [style.--loro-mobile-visual-slot-count]=\"mobileVisualSlotCount()\"\n (pointerdown)=\"onMobilePointerDown($event)\"\n (pointermove)=\"onMobilePointerMove($event)\"\n (pointerup)=\"onMobilePointerUp($event)\"\n (pointercancel)=\"onMobilePointerCancel($event)\"\n >\n <span\n class=\"loro-app-nav__mobile-slider\"\n [class.loro-app-nav__mobile-slider--scan]=\"selectedMobileItemId() === 'scan'\"\n aria-hidden=\"true\"></span>\n\n @for (item of mobileItems(); track item.id; let index = $index) {\n <button\n ngToolbarWidget\n type=\"button\"\n class=\"loro-app-nav__mobile-item\"\n [style.grid-column]=\"mobileItemGridColumn(index)\"\n [class.loro-app-nav__mobile-item--active]=\"isMobileItemVisualActive(index)\"\n [class.loro-app-nav__mobile-item--scan-active]=\"item.id === 'scan' && isMobileItemVisualActive(index)\"\n [class.loro-app-nav__mobile-item--disabled]=\"item.disabled\"\n [attr.aria-label]=\"item.label\"\n [attr.aria-current]=\"item.active ? 'page' : null\"\n [value]=\"item.id\"\n [disabled]=\"!!item.disabled\"\n (click)=\"onMobileItemClick(item)\"\n >\n <loro-icon\n class=\"loro-app-nav__mobile-icon\"\n [name]=\"item.icon\"\n [size]=\"24\"\n color=\"default\"\n [alt]=\"item.label\"\n />\n <span class=\"loro-app-nav__mobile-label\">{{ item.label }}</span>\n </button>\n }\n </nav>\n</aside>\n", styles: [":host{display:block;width:100%;height:100%}.loro-app-nav{width:100%;height:100%}.loro-app-nav__desktop{display:none;height:100%}.loro-app-nav__surface{width:100%;max-width:none;display:flex;height:100%;flex-direction:column;gap:1.1rem;padding:1.75rem 1.35rem 1.5rem;background:var(--loro-nav-desktop-surface, var(--loro-shell-header-surface));border:1px solid var(--loro-nav-desktop-border, var(--loro-border-soft))}html[data-theme=dark] .loro-app-nav__surface{background:var(--loro-nav-desktop-surface, rgba(24, 28, 32, .78));border-color:var(--loro-nav-desktop-border, rgba(255, 255, 255, .08));box-shadow:var(--loro-nav-desktop-shadow, none)}.loro-app-nav__surface--compact{gap:.9rem;padding:1.25rem 1rem 1.15rem}.loro-app-nav__surface--compact .loro-app-nav__brand{min-height:3.65rem;padding-bottom:1.2rem}.loro-app-nav__surface--compact .loro-app-nav__item{--loro-button-min-height: 3.75rem}.loro-app-nav__brand{display:flex;align-items:center;min-height:4.25rem;padding:.35rem .55rem .85rem}.loro-app-nav__brand-image{display:block}.loro-app-nav__nav{display:flex;flex-direction:column;gap:.75rem}.loro-app-nav__item{--loro-button-min-height: 4.25rem;--loro-button-padding: 1rem 1.2rem;--loro-button-radius: 1rem;--loro-button-font-size: 1rem;--loro-button-background: var(--loro-nav-button-background, transparent);--loro-button-border-color: var(--loro-nav-button-border, transparent);--loro-button-color: var(--loro-nav-button-text, var(--loro-text-strong));--loro-button-hover-background: var(--loro-nav-button-hover-bg, var(--loro-nav-hover-bg));--loro-button-hover-border-color: var(--loro-nav-button-hover-border, transparent);--loro-button-hover-color: var(--loro-nav-button-hover-text, var(--loro-nav-button-text, var(--loro-text-strong)));--loro-button-hover-shadow: var(--loro-nav-button-hover-shadow, none);display:block;width:100%;color:var(--loro-nav-button-text, var(--loro-text-strong))}.loro-app-nav__item--active{--loro-button-selected-background: var(--loro-nav-button-active-bg, var(--loro-nav-active-bg));--loro-button-selected-border-color: var(--loro-nav-button-active-border, var(--loro-nav-active-border));--loro-button-selected-color: var(--loro-nav-button-active-text, var(--loro-primary-500));--loro-button-selected-shadow: var(--loro-nav-button-active-shadow, inset .35rem 0 0 var(--loro-primary-500))}.loro-app-nav__item--logout{--loro-button-background: var(--loro-nav-button-danger-bg, var(--loro-danger-surface));--loro-button-border-color: var(--loro-nav-button-danger-border, transparent);--loro-button-color: var(--loro-nav-button-danger-text, var(--loro-danger-text));--loro-button-hover-background: var(--loro-nav-button-danger-bg, var(--loro-danger-surface));--loro-button-hover-border-color: var(--loro-nav-button-danger-border, transparent);--loro-button-hover-color: var(--loro-nav-button-danger-text, var(--loro-danger-text));--loro-button-shadow: none;--loro-button-hover-shadow: none}.loro-app-nav__item--disabled,.loro-app-nav__mobile-item--disabled{cursor:not-allowed;opacity:1}.loro-app-nav__item--disabled{--loro-button-disabled-bg: var(--loro-disabled-surface);--loro-button-disabled-border: var(--loro-disabled-border);--loro-button-disabled-text: var(--loro-disabled-text)}.loro-app-nav__mobile-item--disabled{color:var(--loro-disabled-text)}.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;contain:layout paint;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:hover:not(.loro-app-nav__mobile-item--active),.loro-app-nav__mobile-item:active:not(.loro-app-nav__mobile-item--active),.loro-app-nav__mobile-item:focus:not(.loro-app-nav__mobile-item--active){background:transparent;color:var(--loro-nav-mobile-icon, var(--loro-text))}.loro-app-nav__mobile-item--active{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:1;color:var(--loro-disabled-text)}.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:transform 1ms linear}.loro-app-nav__mobile-slider--scan{background:var(--loro-nav-mobile-scan-indicator, linear-gradient(180deg, rgba(132, 83, 255, .98) 0%, rgba(94, 47, 224, .96) 100%));box-shadow:var(--loro-nav-mobile-scan-indicator-shadow, inset 0 1px 0 rgba(255, 255, 255, .38), 0 .85rem 1.65rem rgba(108, 60, 255, .28))}.loro-app-nav__mobile-item--scan-active{color:var(--loro-nav-mobile-scan-active-color, #fff)!important}.loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active):hover,.loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active):active{color:var(--loro-nav-mobile-icon, var(--loro-text))!important}.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active),.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active) .loro-app-nav__mobile-icon,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active) ::ng-deep .loro-icon,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active) ::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:90vw}.loro-app-nav__mobile--with-labels .loro-app-nav__mobile-item{min-height:4.4rem;padding-top:.7rem}.loro-app-nav__mobile--with-labels .loro-app-nav__mobile-label{opacity:1;transform:translateY(0)}@media(max-width:479.99px)and (orientation:portrait){:host{height:auto}.loro-app-nav{height:auto;padding:0}.loro-app-nav__desktop{height:auto}}@media(min-width:1024px){:host,.loro-app-nav,.loro-app-nav__desktop{height:100%}.loro-app-nav__desktop{display:block}.loro-app-nav__mobile{display:none}}@media(prefers-reduced-motion:reduce){.loro-app-nav__mobile-slider,.loro-app-nav__mobile-item,.loro-app-nav__mobile-item ::ng-deep .loro-icon{transition-duration:1ms}}\n"], dependencies: [{ kind: "directive", type: Toolbar, selector: "[ngToolbar]", inputs: ["orientation", "softDisabled", "disabled", "wrap", "values"], outputs: ["valuesChange"], exportAs: ["ngToolbar"] }, { kind: "directive", type: ToolbarWidget, selector: "[ngToolbarWidget]", inputs: ["id", "disabled", "value"], exportAs: ["ngToolbarWidget"] }, { kind: "component", type: LoroImage, selector: "loro-image", inputs: ["name", "alt", "size", "width", "height", "fit"] }, { kind: "component", type: LoroButton, selector: "loro-button", inputs: ["label", "text", "icon", "iconContent", "iconMode", "iconSize", "iconButtonSize", "iconColor", "socialMobileCompact", "selected", "variant", "typeButton", "color", "size", "fullWidth", "buttonWidth", "disabled", "loading", "type", "formId", "ariaLabel", "ariaDescription"], outputs: ["buttonClick", "change", "sanChange"] }, { kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1515
1515
  }
1516
1516
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroAppNav, decorators: [{
1517
1517
  type: Component,
1518
- args: [{ selector: 'loro-app-nav', standalone: true, imports: [Toolbar, ToolbarWidget, LoroImage, LoroButton, LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<aside class=\"loro-app-nav\">\n <div class=\"loro-app-nav__desktop\">\n <div class=\"loro-app-nav__surface\" [class.loro-app-nav__surface--compact]=\"compactDesktop()\">\n <div class=\"loro-app-nav__brand\">\n <loro-image\n class=\"loro-app-nav__brand-image\"\n name=\"image-loro-apaisado\"\n alt=\"AlLoro\"\n width=\"10rem\"\n height=\"auto\"\n />\n </div>\n\n <nav class=\"loro-app-nav__nav\" [attr.aria-label]=\"ariaLabel()\">\n @for (item of desktopItems(); track item.id) {\n <loro-button\n class=\"loro-app-nav__item\"\n [class.loro-app-nav__item--active]=\"item.active\"\n [class.loro-app-nav__item--disabled]=\"item.disabled\"\n [class.loro-app-nav__item--logout]=\"item.id === 'logout'\"\n [text]=\"item.label\"\n [icon]=\"item.icon\"\n iconMode=\"with-icon\"\n iconColor=\"default\"\n variant=\"navigation\"\n [selected]=\"!!item.active\"\n [color]=\"item.id === 'logout' ? 'danger' : 'primary'\"\n type=\"button\"\n [fullWidth]=\"true\"\n [ariaLabel]=\"item.label\"\n [disabled]=\"!!item.disabled\"\n (buttonClick)=\"onMainItemClick(item)\"\n >\n @if (item.badge !== null && item.badge !== undefined && item.badge !== '') {\n <span class=\"loro-app-nav__badge\">{{ item.badge }}</span>\n }\n </loro-button>\n }\n </nav>\n\n <div class=\"loro-app-nav__spacer\"></div>\n\n @if (showUtilityItems() && utilityItems().length > 0) {\n <div class=\"loro-app-nav__divider\" aria-hidden=\"true\"></div>\n\n <nav\n class=\"loro-app-nav__nav loro-app-nav__nav--utility\"\n aria-label=\"Navegaci\u00F3n secundaria\"\n >\n @for (item of utilityItems(); track item.id) {\n <loro-button\n class=\"loro-app-nav__item\"\n [class.loro-app-nav__item--active]=\"item.active\"\n [class.loro-app-nav__item--disabled]=\"item.disabled\"\n [class.loro-app-nav__item--logout]=\"item.id === 'logout'\"\n [text]=\"item.label\"\n [icon]=\"item.icon\"\n iconMode=\"with-icon\"\n iconColor=\"default\"\n variant=\"navigation\"\n [selected]=\"!!item.active\"\n [color]=\"item.id === 'logout' ? 'danger' : 'primary'\"\n type=\"button\"\n [fullWidth]=\"true\"\n [ariaLabel]=\"item.label\"\n [disabled]=\"!!item.disabled\"\n (buttonClick)=\"onUtilityItemClick(item)\"\n >\n @if (item.badge !== null && item.badge !== undefined && item.badge !== '') {\n <span class=\"loro-app-nav__badge\">{{ item.badge }}</span>\n }\n </loro-button>\n }\n </nav>\n }\n </div>\n </div>\n\n <nav\n ngToolbar\n class=\"loro-app-nav__mobile\"\n data-horizontal-gesture\n [attr.aria-label]=\"ariaLabel()\"\n [style.--loro-mobile-slider-position]=\"mobileSliderPosition()\"\n [class.loro-app-nav__mobile--dragging]=\"isMobileDragging()\"\n [class.loro-app-nav__mobile--with-labels]=\"true\"\n [style.--loro-mobile-item-count]=\"mobileItemCount()\"\n [style.--loro-mobile-visual-slot-count]=\"mobileVisualSlotCount()\"\n (pointerdown)=\"onMobilePointerDown($event)\"\n (pointermove)=\"onMobilePointerMove($event)\"\n (pointerup)=\"onMobilePointerUp($event)\"\n (pointercancel)=\"onMobilePointerCancel($event)\"\n >\n <span\n class=\"loro-app-nav__mobile-slider\"\n [class.loro-app-nav__mobile-slider--scan]=\"selectedMobileItemId() === 'scan'\"\n aria-hidden=\"true\"></span>\n\n @for (item of mobileItems(); track item.id; let index = $index) {\n <button\n ngToolbarWidget\n type=\"button\"\n class=\"loro-app-nav__mobile-item\"\n [style.grid-column]=\"mobileItemGridColumn(index)\"\n [class.loro-app-nav__mobile-item--active]=\"isMobileItemVisualActive(index)\"\n [class.loro-app-nav__mobile-item--scan-active]=\"item.id === 'scan' && isMobileItemVisualActive(index)\"\n [class.loro-app-nav__mobile-item--disabled]=\"item.disabled\"\n [attr.aria-label]=\"item.label\"\n [attr.aria-current]=\"item.active ? 'page' : null\"\n [value]=\"item.id\"\n [disabled]=\"!!item.disabled\"\n (click)=\"onMobileItemClick(item)\"\n >\n <loro-icon\n class=\"loro-app-nav__mobile-icon\"\n [name]=\"item.icon\"\n [size]=\"24\"\n color=\"default\"\n [alt]=\"item.label\"\n />\n <span class=\"loro-app-nav__mobile-label\">{{ item.label }}</span>\n </button>\n }\n </nav>\n</aside>\n", styles: [":host{display:block;width:100%;height:100%}.loro-app-nav{width:100%;height:100%}.loro-app-nav__desktop{display:none;height:100%}.loro-app-nav__surface{width:100%;max-width:none;display:flex;height:100%;flex-direction:column;gap:1.1rem;padding:1.75rem 1.35rem 1.5rem;background:var(--loro-nav-desktop-surface, var(--loro-shell-header-surface));border:1px solid var(--loro-nav-desktop-border, var(--loro-border-soft))}html[data-theme=dark] .loro-app-nav__surface{background:var(--loro-nav-desktop-surface, rgba(24, 28, 32, .78));border-color:var(--loro-nav-desktop-border, rgba(255, 255, 255, .08));box-shadow:var(--loro-nav-desktop-shadow, none)}.loro-app-nav__surface--compact{gap:.9rem;padding:1.25rem 1rem 1.15rem}.loro-app-nav__surface--compact .loro-app-nav__brand{min-height:3.65rem;padding-bottom:1.2rem}.loro-app-nav__surface--compact .loro-app-nav__item{--loro-button-min-height: 3.75rem}.loro-app-nav__brand{display:flex;align-items:center;min-height:4.25rem;padding:.35rem .55rem .85rem}.loro-app-nav__brand-image{display:block}.loro-app-nav__nav{display:flex;flex-direction:column;gap:.75rem}.loro-app-nav__item{--loro-button-min-height: 4.25rem;--loro-button-padding: 1rem 1.2rem;--loro-button-radius: 1rem;--loro-button-font-size: 1rem;--loro-button-background: var(--loro-nav-button-background, transparent);--loro-button-border-color: var(--loro-nav-button-border, transparent);--loro-button-color: var(--loro-nav-button-text, var(--loro-text-strong));--loro-button-hover-background: var(--loro-nav-button-hover-bg, var(--loro-nav-hover-bg));--loro-button-hover-border-color: var(--loro-nav-button-hover-border, transparent);--loro-button-hover-color: var(--loro-nav-button-hover-text, var(--loro-nav-button-text, var(--loro-text-strong)));--loro-button-hover-shadow: var(--loro-nav-button-hover-shadow, none);display:block;width:100%;color:var(--loro-nav-button-text, var(--loro-text-strong))}.loro-app-nav__item--active{--loro-button-selected-background: var(--loro-nav-button-active-bg, var(--loro-nav-active-bg));--loro-button-selected-border-color: var(--loro-nav-button-active-border, var(--loro-nav-active-border));--loro-button-selected-color: var(--loro-nav-button-active-text, var(--loro-primary-500));--loro-button-selected-shadow: var(--loro-nav-button-active-shadow, inset .35rem 0 0 var(--loro-primary-500))}.loro-app-nav__item--logout{--loro-button-background: var(--loro-nav-button-danger-bg, var(--loro-danger-surface));--loro-button-border-color: var(--loro-nav-button-danger-border, transparent);--loro-button-color: var(--loro-nav-button-danger-text, var(--loro-danger-text));--loro-button-hover-background: var(--loro-nav-button-danger-bg, var(--loro-danger-surface));--loro-button-hover-border-color: var(--loro-nav-button-danger-border, transparent);--loro-button-hover-color: var(--loro-nav-button-danger-text, var(--loro-danger-text));--loro-button-shadow: none;--loro-button-hover-shadow: none}.loro-app-nav__item--disabled,.loro-app-nav__mobile-item--disabled{cursor:not-allowed;opacity:1}.loro-app-nav__item--disabled{--loro-button-disabled-bg: var(--loro-disabled-surface);--loro-button-disabled-border: var(--loro-disabled-border);--loro-button-disabled-text: var(--loro-disabled-text)}.loro-app-nav__mobile-item--disabled{color:var(--loro-disabled-text)}.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;contain:layout paint;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:hover:not(.loro-app-nav__mobile-item--active),.loro-app-nav__mobile-item:active:not(.loro-app-nav__mobile-item--active),.loro-app-nav__mobile-item:focus:not(.loro-app-nav__mobile-item--active){background:transparent;color:var(--loro-nav-mobile-icon, var(--loro-text))}.loro-app-nav__mobile-item--active{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:1;color:var(--loro-disabled-text)}.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:transform 1ms linear}.loro-app-nav__mobile-slider--scan{background:var(--loro-nav-mobile-scan-indicator, linear-gradient(180deg, rgba(132, 83, 255, .98) 0%, rgba(94, 47, 224, .96) 100%));box-shadow:var(--loro-nav-mobile-scan-indicator-shadow, inset 0 1px 0 rgba(255, 255, 255, .38), 0 .85rem 1.65rem rgba(108, 60, 255, .28))}.loro-app-nav__mobile-item--scan-active{color:var(--loro-nav-mobile-scan-active-color, #fff)!important}.loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active):hover,.loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active):active{color:var(--loro-nav-mobile-icon, var(--loro-text))!important}.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active),.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active) .loro-app-nav__mobile-icon,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active) ::ng-deep .loro-icon,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active) ::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"] }]
1518
+ args: [{ selector: 'loro-app-nav', standalone: true, imports: [Toolbar, ToolbarWidget, LoroImage, LoroButton, LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<aside class=\"loro-app-nav\">\n <div class=\"loro-app-nav__desktop\">\n <div class=\"loro-app-nav__surface\" [class.loro-app-nav__surface--compact]=\"compactDesktop()\">\n <div class=\"loro-app-nav__brand\">\n <loro-image\n class=\"loro-app-nav__brand-image\"\n name=\"image-loro-apaisado\"\n alt=\"AlLoro\"\n width=\"10rem\"\n height=\"auto\"\n />\n </div>\n\n <nav class=\"loro-app-nav__nav\" [attr.aria-label]=\"ariaLabel()\">\n @for (item of desktopItems(); track item.id) {\n <loro-button\n class=\"loro-app-nav__item\"\n [class.loro-app-nav__item--active]=\"item.active\"\n [class.loro-app-nav__item--disabled]=\"item.disabled\"\n [class.loro-app-nav__item--logout]=\"item.id === 'logout'\"\n [text]=\"item.label\"\n [icon]=\"item.icon\"\n iconMode=\"with-icon\"\n iconColor=\"default\"\n variant=\"navigation\"\n [selected]=\"!!item.active\"\n [color]=\"item.id === 'logout' ? 'danger' : 'primary'\"\n type=\"button\"\n [fullWidth]=\"true\"\n [ariaLabel]=\"item.label\"\n [disabled]=\"!!item.disabled\"\n (buttonClick)=\"onMainItemClick(item)\"\n >\n @if (item.badge !== null && item.badge !== undefined && item.badge !== '') {\n <span class=\"loro-app-nav__badge\">{{ item.badge }}</span>\n }\n </loro-button>\n }\n </nav>\n\n <div class=\"loro-app-nav__spacer\"></div>\n\n @if (showUtilityItems() && utilityItems().length > 0) {\n <div class=\"loro-app-nav__divider\" aria-hidden=\"true\"></div>\n\n <nav\n class=\"loro-app-nav__nav loro-app-nav__nav--utility\"\n aria-label=\"Navegaci\u00F3n secundaria\"\n >\n @for (item of utilityItems(); track item.id) {\n <loro-button\n class=\"loro-app-nav__item\"\n [class.loro-app-nav__item--active]=\"item.active\"\n [class.loro-app-nav__item--disabled]=\"item.disabled\"\n [class.loro-app-nav__item--logout]=\"item.id === 'logout'\"\n [text]=\"item.label\"\n [icon]=\"item.icon\"\n iconMode=\"with-icon\"\n iconColor=\"default\"\n variant=\"navigation\"\n [selected]=\"!!item.active\"\n [color]=\"item.id === 'logout' ? 'danger' : 'primary'\"\n type=\"button\"\n [fullWidth]=\"true\"\n [ariaLabel]=\"item.label\"\n [disabled]=\"!!item.disabled\"\n (buttonClick)=\"onUtilityItemClick(item)\"\n >\n @if (item.badge !== null && item.badge !== undefined && item.badge !== '') {\n <span class=\"loro-app-nav__badge\">{{ item.badge }}</span>\n }\n </loro-button>\n }\n </nav>\n }\n </div>\n </div>\n\n <nav\n ngToolbar\n class=\"loro-app-nav__mobile\"\n data-horizontal-gesture\n [attr.aria-label]=\"ariaLabel()\"\n [style.--loro-mobile-slider-position]=\"mobileSliderPosition()\"\n [class.loro-app-nav__mobile--dragging]=\"isMobileDragging()\"\n [class.loro-app-nav__mobile--with-labels]=\"true\"\n [style.--loro-mobile-item-count]=\"mobileItemCount()\"\n [style.--loro-mobile-visual-slot-count]=\"mobileVisualSlotCount()\"\n (pointerdown)=\"onMobilePointerDown($event)\"\n (pointermove)=\"onMobilePointerMove($event)\"\n (pointerup)=\"onMobilePointerUp($event)\"\n (pointercancel)=\"onMobilePointerCancel($event)\"\n >\n <span\n class=\"loro-app-nav__mobile-slider\"\n [class.loro-app-nav__mobile-slider--scan]=\"selectedMobileItemId() === 'scan'\"\n aria-hidden=\"true\"></span>\n\n @for (item of mobileItems(); track item.id; let index = $index) {\n <button\n ngToolbarWidget\n type=\"button\"\n class=\"loro-app-nav__mobile-item\"\n [style.grid-column]=\"mobileItemGridColumn(index)\"\n [class.loro-app-nav__mobile-item--active]=\"isMobileItemVisualActive(index)\"\n [class.loro-app-nav__mobile-item--scan-active]=\"item.id === 'scan' && isMobileItemVisualActive(index)\"\n [class.loro-app-nav__mobile-item--disabled]=\"item.disabled\"\n [attr.aria-label]=\"item.label\"\n [attr.aria-current]=\"item.active ? 'page' : null\"\n [value]=\"item.id\"\n [disabled]=\"!!item.disabled\"\n (click)=\"onMobileItemClick(item)\"\n >\n <loro-icon\n class=\"loro-app-nav__mobile-icon\"\n [name]=\"item.icon\"\n [size]=\"24\"\n color=\"default\"\n [alt]=\"item.label\"\n />\n <span class=\"loro-app-nav__mobile-label\">{{ item.label }}</span>\n </button>\n }\n </nav>\n</aside>\n", styles: [":host{display:block;width:100%;height:100%}.loro-app-nav{width:100%;height:100%}.loro-app-nav__desktop{display:none;height:100%}.loro-app-nav__surface{width:100%;max-width:none;display:flex;height:100%;flex-direction:column;gap:1.1rem;padding:1.75rem 1.35rem 1.5rem;background:var(--loro-nav-desktop-surface, var(--loro-shell-header-surface));border:1px solid var(--loro-nav-desktop-border, var(--loro-border-soft))}html[data-theme=dark] .loro-app-nav__surface{background:var(--loro-nav-desktop-surface, rgba(24, 28, 32, .78));border-color:var(--loro-nav-desktop-border, rgba(255, 255, 255, .08));box-shadow:var(--loro-nav-desktop-shadow, none)}.loro-app-nav__surface--compact{gap:.9rem;padding:1.25rem 1rem 1.15rem}.loro-app-nav__surface--compact .loro-app-nav__brand{min-height:3.65rem;padding-bottom:1.2rem}.loro-app-nav__surface--compact .loro-app-nav__item{--loro-button-min-height: 3.75rem}.loro-app-nav__brand{display:flex;align-items:center;min-height:4.25rem;padding:.35rem .55rem .85rem}.loro-app-nav__brand-image{display:block}.loro-app-nav__nav{display:flex;flex-direction:column;gap:.75rem}.loro-app-nav__item{--loro-button-min-height: 4.25rem;--loro-button-padding: 1rem 1.2rem;--loro-button-radius: 1rem;--loro-button-font-size: 1rem;--loro-button-background: var(--loro-nav-button-background, transparent);--loro-button-border-color: var(--loro-nav-button-border, transparent);--loro-button-color: var(--loro-nav-button-text, var(--loro-text-strong));--loro-button-hover-background: var(--loro-nav-button-hover-bg, var(--loro-nav-hover-bg));--loro-button-hover-border-color: var(--loro-nav-button-hover-border, transparent);--loro-button-hover-color: var(--loro-nav-button-hover-text, var(--loro-nav-button-text, var(--loro-text-strong)));--loro-button-hover-shadow: var(--loro-nav-button-hover-shadow, none);display:block;width:100%;color:var(--loro-nav-button-text, var(--loro-text-strong))}.loro-app-nav__item--active{--loro-button-selected-background: var(--loro-nav-button-active-bg, var(--loro-nav-active-bg));--loro-button-selected-border-color: var(--loro-nav-button-active-border, var(--loro-nav-active-border));--loro-button-selected-color: var(--loro-nav-button-active-text, var(--loro-primary-500));--loro-button-selected-shadow: var(--loro-nav-button-active-shadow, inset .35rem 0 0 var(--loro-primary-500))}.loro-app-nav__item--logout{--loro-button-background: var(--loro-nav-button-danger-bg, var(--loro-danger-surface));--loro-button-border-color: var(--loro-nav-button-danger-border, transparent);--loro-button-color: var(--loro-nav-button-danger-text, var(--loro-danger-text));--loro-button-hover-background: var(--loro-nav-button-danger-bg, var(--loro-danger-surface));--loro-button-hover-border-color: var(--loro-nav-button-danger-border, transparent);--loro-button-hover-color: var(--loro-nav-button-danger-text, var(--loro-danger-text));--loro-button-shadow: none;--loro-button-hover-shadow: none}.loro-app-nav__item--disabled,.loro-app-nav__mobile-item--disabled{cursor:not-allowed;opacity:1}.loro-app-nav__item--disabled{--loro-button-disabled-bg: var(--loro-disabled-surface);--loro-button-disabled-border: var(--loro-disabled-border);--loro-button-disabled-text: var(--loro-disabled-text)}.loro-app-nav__mobile-item--disabled{color:var(--loro-disabled-text)}.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;contain:layout paint;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:hover:not(.loro-app-nav__mobile-item--active),.loro-app-nav__mobile-item:active:not(.loro-app-nav__mobile-item--active),.loro-app-nav__mobile-item:focus:not(.loro-app-nav__mobile-item--active){background:transparent;color:var(--loro-nav-mobile-icon, var(--loro-text))}.loro-app-nav__mobile-item--active{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:1;color:var(--loro-disabled-text)}.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:transform 1ms linear}.loro-app-nav__mobile-slider--scan{background:var(--loro-nav-mobile-scan-indicator, linear-gradient(180deg, rgba(132, 83, 255, .98) 0%, rgba(94, 47, 224, .96) 100%));box-shadow:var(--loro-nav-mobile-scan-indicator-shadow, inset 0 1px 0 rgba(255, 255, 255, .38), 0 .85rem 1.65rem rgba(108, 60, 255, .28))}.loro-app-nav__mobile-item--scan-active{color:var(--loro-nav-mobile-scan-active-color, #fff)!important}.loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active):hover,.loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active):active{color:var(--loro-nav-mobile-icon, var(--loro-text))!important}.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active),.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active) .loro-app-nav__mobile-icon,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active) ::ng-deep .loro-icon,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active) ::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:90vw}.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"] }]
1519
1519
  }], 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"] }] } });
1520
1520
 
1521
1521
  class LoroAssistantCard {
@@ -1576,41 +1576,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
1576
1576
  args: [{ selector: 'loro-badge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"loro-badge\" [class]=\"'loro-badge loro-badge--' + variant()\">{{ label() }}</span>", styles: [":host{display:inline-flex;min-width:0;font-family:var(--loro-font-brand)}.loro-badge{display:inline-flex;align-items:center;justify-content:center;max-width:100%;min-height:1.75rem;padding:.25rem .7rem;border:1px solid transparent;border-radius:var(--loro-radius-pill);font-size:.82rem;font-weight:800;line-height:1.1;white-space:nowrap}.loro-badge--success{border-color:#1f9d5533;background:#1f9d551f;color:#1f9d55}.loro-badge--error{border-color:#dc26262e;background:#dc26261a;color:#dc2626}.loro-badge--info{border-color:#6c3cff2e;background:#6c3cff1a;color:var(--loro-primary-700)}.loro-badge--warning{border-color:#f5a80038;background:#f5a8001f;color:#986c00}.loro-badge--neutral{border-color:var(--loro-border-soft);background:var(--loro-surface-muted);color:var(--loro-muted-strong)}\n"] }]
1577
1577
  }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
1578
1578
 
1579
- class LoroCard {
1580
- title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
1579
+ const LoroCardDefaultIconSize = 28;
1580
+ const LoroCardDefaultArrowSize = 16;
1581
+ const LoroCardDefaultHeroAvatarIconSize = 22;
1582
+
1583
+ class LoroCardBenefit {
1584
+ title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
1581
1585
  description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
1582
1586
  icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
1583
- iconSize = input(28, ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
1587
+ iconSize = input(LoroCardDefaultIconSize, ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
1588
+ iconColor = input('primary', ...(ngDevMode ? [{ debugName: "iconColor" }] : /* istanbul ignore next */ []));
1589
+ hasIcon = computed(() => this.icon() !== null, ...(ngDevMode ? [{ debugName: "hasIcon" }] : /* istanbul ignore next */ []));
1590
+ hasDescription = computed(() => this.description().trim().length > 0, ...(ngDevMode ? [{ debugName: "hasDescription" }] : /* istanbul ignore next */ []));
1591
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroCardBenefit, deps: [], target: i0.ɵɵFactoryTarget.Component });
1592
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroCardBenefit, isStandalone: true, selector: "loro-card-benefit", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"loro-card-benefit\">\n <header class=\"loro-card-benefit__header\">\n @if (hasIcon()) {\n <span class=\"loro-card-benefit__icon\">\n <loro-icon [name]=\"icon()!\" [size]=\"iconSize()\" [alt]=\"title()\" [color]=\"iconColor()\" [decorative]=\"true\" />\n </span>\n }\n <div class=\"loro-card-benefit__copy\">\n <h2 class=\"loro-card-benefit__title\">{{ title() }}</h2>\n @if (hasDescription()) {\n <p class=\"loro-card-benefit__description\">{{ description() }}</p>\n }\n </div>\n </header>\n</div>\n", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-card-benefit{display:grid;gap:var(--loro-card-benefit-gap, .7rem)}.loro-card-benefit__header{display:flex;align-items:center;gap:var(--loro-card-benefit-header-gap, .75rem);min-width:0}.loro-card-benefit__icon{display:grid;width:var(--loro-card-benefit-icon-width, var(--loro-card-benefit-icon-size, 2.25rem));height:var(--loro-card-benefit-icon-height, var(--loro-card-benefit-icon-size, 2.25rem));place-items:center;border-radius:999px;background:var(--loro-card-benefit-icon-bg, var(--loro-primary-500));color:#fff}.loro-card-benefit__copy{display:grid;gap:.12rem;min-width:0}.loro-card-benefit__title,.loro-card-benefit__description{margin:0}.loro-card-benefit__title{color:var(--loro-text-strong);font-size:var(--loro-card-benefit-title-font-size, 1rem);font-weight:900;line-height:var(--loro-card-benefit-title-line-height, 1.15)}.loro-card-benefit__description{color:var(--loro-muted);font-size:var(--loro-card-benefit-description-font-size, .82rem);font-weight:var(--loro-card-benefit-description-font-weight, 750);line-height:var(--loro-card-benefit-description-line-height, 1.25)}@media(min-width:1024px){.loro-card-benefit__header{display:grid;grid-template-columns:auto minmax(0,1fr)}}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1593
+ }
1594
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroCardBenefit, decorators: [{
1595
+ type: Component,
1596
+ args: [{ selector: 'loro-card-benefit', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"loro-card-benefit\">\n <header class=\"loro-card-benefit__header\">\n @if (hasIcon()) {\n <span class=\"loro-card-benefit__icon\">\n <loro-icon [name]=\"icon()!\" [size]=\"iconSize()\" [alt]=\"title()\" [color]=\"iconColor()\" [decorative]=\"true\" />\n </span>\n }\n <div class=\"loro-card-benefit__copy\">\n <h2 class=\"loro-card-benefit__title\">{{ title() }}</h2>\n @if (hasDescription()) {\n <p class=\"loro-card-benefit__description\">{{ description() }}</p>\n }\n </div>\n </header>\n</div>\n", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-card-benefit{display:grid;gap:var(--loro-card-benefit-gap, .7rem)}.loro-card-benefit__header{display:flex;align-items:center;gap:var(--loro-card-benefit-header-gap, .75rem);min-width:0}.loro-card-benefit__icon{display:grid;width:var(--loro-card-benefit-icon-width, var(--loro-card-benefit-icon-size, 2.25rem));height:var(--loro-card-benefit-icon-height, var(--loro-card-benefit-icon-size, 2.25rem));place-items:center;border-radius:999px;background:var(--loro-card-benefit-icon-bg, var(--loro-primary-500));color:#fff}.loro-card-benefit__copy{display:grid;gap:.12rem;min-width:0}.loro-card-benefit__title,.loro-card-benefit__description{margin:0}.loro-card-benefit__title{color:var(--loro-text-strong);font-size:var(--loro-card-benefit-title-font-size, 1rem);font-weight:900;line-height:var(--loro-card-benefit-title-line-height, 1.15)}.loro-card-benefit__description{color:var(--loro-muted);font-size:var(--loro-card-benefit-description-font-size, .82rem);font-weight:var(--loro-card-benefit-description-font-weight, 750);line-height:var(--loro-card-benefit-description-line-height, 1.25)}@media(min-width:1024px){.loro-card-benefit__header{display:grid;grid-template-columns:auto minmax(0,1fr)}}\n"] }]
1597
+ }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }] } });
1598
+
1599
+ class LoroCardNavigation {
1600
+ title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
1601
+ description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
1602
+ icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
1603
+ iconSize = input(LoroCardDefaultIconSize, ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
1584
1604
  iconColor = input('default', ...(ngDevMode ? [{ debugName: "iconColor" }] : /* istanbul ignore next */ []));
1585
1605
  link = input('', ...(ngDevMode ? [{ debugName: "link" }] : /* istanbul ignore next */ []));
1586
- variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
1587
- justify = input('center', ...(ngDevMode ? [{ debugName: "justify" }] : /* istanbul ignore next */ []));
1588
- mobileJustify = input('center', ...(ngDevMode ? [{ debugName: "mobileJustify" }] : /* istanbul ignore next */ []));
1589
- selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
1590
- showArrow = input(false, ...(ngDevMode ? [{ debugName: "showArrow" }] : /* istanbul ignore next */ []));
1591
- arrowSize = input(16, ...(ngDevMode ? [{ debugName: "arrowSize" }] : /* istanbul ignore next */ []));
1592
- heroGreeting = input('', ...(ngDevMode ? [{ debugName: "heroGreeting" }] : /* istanbul ignore next */ []));
1593
- heroSubtitle = input('', ...(ngDevMode ? [{ debugName: "heroSubtitle" }] : /* istanbul ignore next */ []));
1594
- heroAvatarSrc = input(null, ...(ngDevMode ? [{ debugName: "heroAvatarSrc" }] : /* istanbul ignore next */ []));
1595
- heroAvatarAlt = input('Perfil', ...(ngDevMode ? [{ debugName: "heroAvatarAlt" }] : /* istanbul ignore next */ []));
1596
- heroAvatarIcon = input('user', ...(ngDevMode ? [{ debugName: "heroAvatarIcon" }] : /* istanbul ignore next */ []));
1597
- heroAvatarIconSize = input(22, ...(ngDevMode ? [{ debugName: "heroAvatarIconSize" }] : /* istanbul ignore next */ []));
1598
- heroVisualImage = input(null, ...(ngDevMode ? [{ debugName: "heroVisualImage" }] : /* istanbul ignore next */ []));
1599
- heroVisualAlt = input('AlLoro', ...(ngDevMode ? [{ debugName: "heroVisualAlt" }] : /* istanbul ignore next */ []));
1600
- resolvedIconSize = computed(() => {
1601
- const size = this.iconSize();
1602
- const normalizedSize = typeof size === 'number' ? `${size}px` : size;
1603
- return this.variant() === 'benefit' || this.variant() === 'benefit-showcase'
1604
- ? `var(--loro-card-benefit-icon-glyph-size, ${normalizedSize})`
1605
- : normalizedSize;
1606
- }, ...(ngDevMode ? [{ debugName: "resolvedIconSize" }] : /* istanbul ignore next */ []));
1607
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
1608
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroCard, isStandalone: true, selector: "loro-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, mobileJustify: { classPropertyName: "mobileJustify", publicName: "mobileJustify", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, showArrow: { classPropertyName: "showArrow", publicName: "showArrow", isSignal: true, isRequired: false, transformFunction: null }, arrowSize: { classPropertyName: "arrowSize", publicName: "arrowSize", isSignal: true, isRequired: false, transformFunction: null }, heroGreeting: { classPropertyName: "heroGreeting", publicName: "heroGreeting", isSignal: true, isRequired: false, transformFunction: null }, heroSubtitle: { classPropertyName: "heroSubtitle", publicName: "heroSubtitle", isSignal: true, isRequired: false, transformFunction: null }, heroAvatarSrc: { classPropertyName: "heroAvatarSrc", publicName: "heroAvatarSrc", isSignal: true, isRequired: false, transformFunction: null }, heroAvatarAlt: { classPropertyName: "heroAvatarAlt", publicName: "heroAvatarAlt", isSignal: true, isRequired: false, transformFunction: null }, heroAvatarIcon: { classPropertyName: "heroAvatarIcon", publicName: "heroAvatarIcon", isSignal: true, isRequired: false, transformFunction: null }, heroAvatarIconSize: { classPropertyName: "heroAvatarIconSize", publicName: "heroAvatarIconSize", isSignal: true, isRequired: false, transformFunction: null }, heroVisualImage: { classPropertyName: "heroVisualImage", publicName: "heroVisualImage", isSignal: true, isRequired: false, transformFunction: null }, heroVisualAlt: { classPropertyName: "heroVisualAlt", publicName: "heroVisualAlt", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<a\n class=\"loro-card\"\n [routerLink]=\"link() || null\"\n [class.loro-card--tinted]=\"variant() === 'tinted'\"\n [class.loro-card--danger]=\"variant() === 'danger'\"\n [class.loro-card--selectable]=\"variant() === 'selectable'\"\n [class.loro-card--benefit]=\"variant() === 'benefit'\"\n [class.loro-card--benefit-showcase]=\"variant() === 'benefit-showcase'\"\n [class.loro-card--home-hero]=\"variant() === 'home-hero'\"\n [class.loro-card--home-primary]=\"variant() === 'home-primary'\"\n [class.loro-card--home-secondary]=\"variant() === 'home-secondary'\"\n [class.loro-card--interactive]=\"!!link()\"\n [class.loro-card--justify-start]=\"justify() === 'start'\"\n [class.loro-card--justify-center]=\"justify() === 'center'\"\n [class.loro-card--justify-end]=\"justify() === 'end'\"\n [class.loro-card--mobile-justify-start]=\"mobileJustify() === 'start'\"\n [class.loro-card--mobile-justify-center]=\"mobileJustify() === 'center'\"\n [class.loro-card--mobile-justify-end]=\"mobileJustify() === 'end'\"\n [class.loro-card--selected]=\"selected()\">\n @if (variant() === 'home-hero') {\n <div class=\"loro-card__hero-main\">\n <div class=\"loro-card__hero-avatar\" aria-hidden=\"true\">\n @if (heroAvatarSrc()) {\n <img [src]=\"heroAvatarSrc()!\" [alt]=\"heroAvatarAlt()\" />\n } @else {\n <loro-icon [name]=\"heroAvatarIcon()\" [size]=\"heroAvatarIconSize()\" [alt]=\"heroAvatarAlt()\" />\n }\n </div>\n\n <div class=\"loro-card__hero-copy\">\n @if (heroGreeting()) {\n <p>{{ heroGreeting() }}</p>\n }\n @if (heroSubtitle()) {\n <span>{{ heroSubtitle() }}</span>\n }\n </div>\n </div>\n\n @if (heroVisualImage()) {\n <div class=\"loro-card__hero-visual\" aria-hidden=\"true\">\n <loro-image [name]=\"heroVisualImage()!\" [alt]=\"heroVisualAlt()\" width=\"100%\" />\n </div>\n }\n }\n\n @if ((title() || icon()) && variant() !== 'home-hero') {\n <header class=\"loro-card__header\">\n @if (icon()) {\n <span class=\"loro-card__icon\">\n <loro-icon\n [name]=\"icon()!\"\n [size]=\"resolvedIconSize()\"\n [alt]=\"title() || icon()!\"\n [color]=\"iconColor()\"\n [decorative]=\"true\"\n />\n </span>\n }\n <div class=\"loro-card__copy\">\n @if (title()) {\n <h2 class=\"loro-card__title\">{{ title() }}</h2>\n }\n @if (description()) {\n <p class=\"loro-card__description\">{{ description() }}</p>\n }\n </div>\n </header>\n }\n <ng-content />\n @if (showArrow()) {\n <span class=\"loro-card__arrow\" aria-hidden=\"true\">\n <loro-icon name=\"arrow-right\" [size]=\"arrowSize()\" alt=\"Ir\" />\n </span>\n }\n </a>", styles: [":host{display:block;font-family:var(--loro-font-brand);container-type:inline-size}.loro-card{display:grid;gap:1.25rem;padding:clamp(1.25rem,3vw,1.75rem);border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-card);background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft);color:var(--loro-text);text-decoration:none;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background-color .18s ease}.loro-card--interactive{cursor:pointer}.loro-card--interactive:hover,.loro-card--interactive:focus-visible{transform:translateY(-1px);border-color:var(--loro-border-strong);outline:none}.loro-card--tinted{background:var(--loro-surface-tinted)}.loro-card--danger{border-color:#dc262638;background:#dc26260f}.loro-card--selectable{cursor:pointer}.loro-card--selected{border-color:var(--loro-primary-500);background:#6c3cff0d;box-shadow:0 0 0 1px #6c3cff33,var(--loro-shadow-soft)}.loro-card--benefit,.loro-card--benefit-showcase{gap:var(--loro-card-benefit-gap, .7rem);padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;transition:none}.loro-card__header{display:flex;align-items:center;gap:1rem;min-width:0}.loro-card__icon{display:grid;width:3.5rem;height:3.5rem;flex:0 0 auto;place-items:center;border-radius:1rem;background:var(--loro-brand-tint-surface);margin-block-end:.5rem}.loro-card--benefit .loro-card__header,.loro-card--benefit-showcase .loro-card__header{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--loro-card-benefit-header-gap, .75rem);min-width:0}.loro-card--benefit .loro-card__icon,.loro-card--benefit-showcase .loro-card__icon{width:var(--loro-card-benefit-icon-width, var(--loro-card-benefit-icon-size, 2.25rem));height:var(--loro-card-benefit-icon-height, var(--loro-card-benefit-icon-size, 2.25rem));border-radius:999px;background:var(--loro-card-benefit-icon-bg, var(--loro-primary-500));color:#fff}.loro-card__copy{min-width:0}.loro-card__title,.loro-card__description{margin:0}.loro-card__title{color:var(--loro-text-strong);font-size:clamp(1.15rem,2vw,1.45rem);font-weight:900;line-height:1.15}.loro-card__description{margin-top:.35rem;color:var(--loro-muted);font-size:.95rem;line-height:1.45}.loro-card__arrow{display:none;align-items:center;justify-content:center;justify-self:end;width:2.2rem;height:2.2rem;border-radius:999px;line-height:0}.loro-card--benefit .loro-card__title,.loro-card--benefit-showcase .loro-card__title{color:var(--loro-text-strong);font-size:var(--loro-card-benefit-title-font-size, 1rem);font-weight:900;line-height:var(--loro-card-benefit-title-line-height, 1.15);overflow-wrap:anywhere}.loro-card--benefit .loro-card__description,.loro-card--benefit-showcase .loro-card__description{margin-top:.12rem;color:var(--loro-muted);font-size:var(--loro-card-benefit-description-font-size, .82rem);font-weight:var(--loro-card-benefit-description-font-weight, 750);line-height:var(--loro-card-benefit-description-line-height, 1.25);overflow-wrap:anywhere}.loro-card--benefit .loro-card__copy,.loro-card--benefit-showcase .loro-card__copy{min-width:0;width:100%;flex:1 1 auto}.loro-card--benefit-showcase{width:100%;min-width:0}.loro-card--benefit.loro-card--justify-start .loro-card__header,.loro-card--benefit-showcase.loro-card--justify-start .loro-card__header{justify-content:flex-start;text-align:left}.loro-card--benefit.loro-card--justify-center .loro-card__header,.loro-card--benefit-showcase.loro-card--justify-center .loro-card__header{justify-content:center;text-align:center}.loro-card--benefit.loro-card--justify-end .loro-card__header,.loro-card--benefit-showcase.loro-card--justify-end .loro-card__header{justify-content:flex-end;text-align:right}.loro-card--home-primary,.loro-card--home-secondary{position:relative;display:flex;flex-direction:column;align-items:stretch;height:100%;gap:0;min-height:10.5rem;padding:1rem;overflow:hidden;isolation:isolate;border-color:var(--loro-home-card-border);border-radius:1.45rem;background:var(--loro-surface-soft);text-align:left}.loro-card--home-primary:before,.loro-card--home-primary:after,.loro-card--home-secondary:before,.loro-card--home-secondary:after{position:absolute;inset:0;content:\"\";pointer-events:none}.loro-card--home-primary>*,.loro-card--home-secondary>*{position:relative;z-index:1}.loro-card--home-primary .loro-card__header,.loro-card--home-secondary .loro-card__header{display:block;flex:1 1 auto;text-align:left}.loro-card--home-primary .loro-card__icon,.loro-card--home-secondary .loro-card__icon{position:relative;width:3rem;height:3rem;border:1px solid rgba(255,255,255,.2);border-radius:1.15rem;background:var(--loro-home-card-icon-bg);box-shadow:var(--loro-home-card-icon-shadow);color:var(--loro-home-card-icon-color)}.loro-card--home-primary .loro-card__copy,.loro-card--home-secondary .loro-card__copy{min-width:0;display:grid;grid-template-rows:auto auto;justify-items:start;gap:.4rem;min-height:0}.loro-card--home-primary .loro-card__title,.loro-card--home-secondary .loro-card__title{color:var(--loro-home-card-title);font-size:1.16rem;font-weight:800;line-height:1.15;letter-spacing:-.02em;text-align:left}.loro-card--home-primary .loro-card__description,.loro-card--home-secondary .loro-card__description{max-width:none;min-height:0;margin-top:0;color:var(--loro-home-card-description);font-size:.9rem;line-height:1.45;text-align:left}.loro-card--home-primary .loro-card__arrow,.loro-card--home-secondary .loro-card__arrow{display:inline-flex;color:var(--loro-home-card-arrow-color);align-items:center;justify-content:center;align-self:flex-end;margin-top:auto}.loro-card--home-secondary .loro-card__title{font-size:1.08rem}.loro-card--home-secondary .loro-card__description{font-size:.85rem}.loro-card--home-primary:hover,.loro-card--home-primary:focus-visible,.loro-card--home-secondary:hover,.loro-card--home-secondary:focus-visible{transform:translateY(-.24rem) scale(1.01);border-color:var(--loro-home-card-hover-border);box-shadow:var(--loro-home-card-hover-shadow)}.loro-card--home-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.75rem;min-height:6.25rem;overflow:hidden;border-color:var(--loro-home-hero-border);border-radius:1.1rem;background:var(--loro-home-hero-bg);padding:.875rem 1rem;color:var(--loro-home-hero-text)}.loro-card--home-hero .loro-card__header,.loro-card--home-hero .loro-card__copy,.loro-card--home-hero .loro-card__icon{display:none}.loro-card__hero-main{display:flex;align-items:center;gap:.75rem;min-width:0}.loro-card__hero-avatar{display:grid;width:3rem;height:3rem;flex:0 0 3rem;place-items:center;overflow:hidden;border-radius:.95rem;background:var(--loro-home-avatar-bg);color:var(--loro-home-avatar-color)}.loro-card__hero-avatar img{width:100%;height:100%;object-fit:cover}.loro-card__hero-copy{display:grid;gap:.18rem;min-width:0}.loro-card__hero-copy p,.loro-card__hero-copy span{margin:0}.loro-card__hero-copy p{font-size:1rem;font-weight:800;line-height:1.2}.loro-card__hero-copy span{color:var(--loro-home-hero-subtitle);font-size:.875rem;line-height:1.35}.loro-card__hero-visual{width:clamp(4.5rem,24vw,5.75rem);align-self:end}.loro-card--home-hero:hover,.loro-card--home-hero:focus-visible{transform:none;border-color:var(--loro-home-hero-border);box-shadow:var(--loro-shadow-soft)}@media(max-width:1023.88px){.loro-card--benefit.loro-card--mobile-justify-start .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-start .loro-card__header{text-align:left}.loro-card--benefit.loro-card--mobile-justify-center .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-center .loro-card__header{text-align:center;justify-self:center;width:fit-content;max-width:100%;margin-inline:auto}.loro-card--benefit.loro-card--mobile-justify-end .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-end .loro-card__header{text-align:right}.loro-card--benefit.loro-card--mobile-justify-start .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-start .loro-card__header{grid-template-columns:auto minmax(0,1fr)}.loro-card--benefit.loro-card--mobile-justify-center .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-center .loro-card__header{grid-template-columns:auto auto}.loro-card--benefit.loro-card--mobile-justify-end .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-end .loro-card__header{grid-template-columns:auto minmax(0,1fr)}}@container (min-width: 18rem){.loro-card--home-primary,.loro-card--home-secondary{min-height:9.75rem}.loro-card--home-primary .loro-card__header,.loro-card--home-secondary .loro-card__header{display:block}.loro-card--home-hero{min-height:7.25rem;padding:1rem 1.25rem}.loro-card__hero-visual{width:clamp(5.25rem,20vw,7rem)}}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroImage, selector: "loro-image", inputs: ["name", "alt", "size", "width", "height", "fit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1606
+ disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
1607
+ showArrow = input(true, ...(ngDevMode ? [{ debugName: "showArrow" }] : /* istanbul ignore next */ []));
1608
+ arrowSize = input(LoroCardDefaultArrowSize, ...(ngDevMode ? [{ debugName: "arrowSize" }] : /* istanbul ignore next */ []));
1609
+ hasDescription = computed(() => this.description().trim().length > 0, ...(ngDevMode ? [{ debugName: "hasDescription" }] : /* istanbul ignore next */ []));
1610
+ isInteractive = computed(() => !this.disabled() && this.link().trim().length > 0, ...(ngDevMode ? [{ debugName: "isInteractive" }] : /* istanbul ignore next */ []));
1611
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroCardNavigation, deps: [], target: i0.ɵɵFactoryTarget.Component });
1612
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroCardNavigation, isStandalone: true, selector: "loro-card-navigation", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showArrow: { classPropertyName: "showArrow", publicName: "showArrow", isSignal: true, isRequired: false, transformFunction: null }, arrowSize: { classPropertyName: "arrowSize", publicName: "arrowSize", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article\n class=\"loro-card-navigation\"\n [routerLink]=\"isInteractive() ? link() : null\"\n [class.loro-card-navigation--interactive]=\"isInteractive()\"\n [class.loro-card-navigation--disabled]=\"disabled()\"\n [attr.aria-disabled]=\"disabled() || null\"\n [attr.tabindex]=\"disabled() ? -1 : 0\">\n <div class=\"loro-card-navigation__icon\" aria-hidden=\"true\" [class.loro-card-navigation__icon--empty]=\"!icon()\">\n @if (icon()) {\n <loro-icon [name]=\"icon()!\" [size]=\"iconSize()\" [color]=\"iconColor()\" [decorative]=\"true\" />\n }\n </div>\n\n <div class=\"loro-card-navigation__body\">\n <div class=\"loro-card-navigation__copy\">\n <h3 class=\"loro-card-navigation__title\">{{ title() }}</h3>\n @if (hasDescription()) {\n <p class=\"loro-card-navigation__description\">{{ description() }}</p>\n }\n </div>\n\n @if (showArrow()) {\n <div class=\"loro-card-navigation__arrow\" aria-hidden=\"true\">\n <loro-icon name=\"arrow-right\" [size]=\"arrowSize()\" [decorative]=\"true\" />\n </div>\n }\n </div>\n</article>\n", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-card-navigation{display:grid;gap:1rem;min-height:100%;padding:1.25rem;border-radius:2rem;border:1px solid var(--loro-home-hero-border);background:var(--loro-home-hero-bg);box-shadow:var(--loro-home-card-shadow);color:var(--loro-home-hero-text);text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,filter .18s ease;outline:none;cursor:default}@media(min-width:1024px){.loro-card-navigation{gap:1.25rem;padding:1.5rem;border-radius:2.25rem}}.loro-card-navigation--interactive{cursor:pointer}.loro-card-navigation--interactive:hover,.loro-card-navigation--interactive:focus-visible{transform:translateY(-2px);border-color:var(--loro-home-card-hover-border);box-shadow:var(--loro-home-card-hover-shadow);filter:saturate(1.02)}.loro-card-navigation--interactive:active{transform:translateY(0);box-shadow:var(--loro-home-card-shadow)}.loro-card-navigation--interactive:hover .loro-card-navigation__arrow,.loro-card-navigation--interactive:focus-visible .loro-card-navigation__arrow{transform:translate(2px)}.loro-card-navigation--disabled{opacity:.55;pointer-events:none;filter:grayscale(.15)}.loro-card-navigation__icon{display:grid;width:3.75rem;height:3.75rem;place-items:center;border-radius:1.25rem;background:var(--loro-home-card-icon-bg);color:var(--loro-home-card-icon-color);box-shadow:var(--loro-home-card-icon-shadow)}@media(min-width:1024px){.loro-card-navigation__icon{width:4.25rem;height:4.25rem;border-radius:1.35rem}}.loro-card-navigation__icon--empty{background:color-mix(in srgb,var(--loro-home-card-icon-bg) 62%,transparent)}.loro-card-navigation__body{display:grid;grid-template-columns:1fr auto;gap:2.5rem;align-items:end}@media(min-width:1024px){.loro-card-navigation__body{gap:1rem}}.loro-card-navigation__copy{display:grid;gap:.45rem;align-content:start}.loro-card-navigation__title,.loro-card-navigation__description{margin:0}.loro-card-navigation__title{font-size:1.15rem;font-weight:800;line-height:1.15;letter-spacing:-.02em}@media(min-width:1024px){.loro-card-navigation__title{font-size:1.3rem}}.loro-card-navigation__description{color:var(--loro-home-hero-subtitle);font-size:.95rem;line-height:1.45}@media(min-width:1024px){.loro-card-navigation__description{font-size:.98rem}}.loro-card-navigation__arrow{display:flex;justify-content:flex-end;margin-top:auto;color:var(--loro-home-card-arrow-color);transition:transform .18s ease}@media(min-width:1024px){.loro-card-navigation__arrow{align-self:end}}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1613
+ }
1614
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroCardNavigation, decorators: [{
1615
+ type: Component,
1616
+ args: [{ selector: 'loro-card-navigation', standalone: true, imports: [RouterLink, LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article\n class=\"loro-card-navigation\"\n [routerLink]=\"isInteractive() ? link() : null\"\n [class.loro-card-navigation--interactive]=\"isInteractive()\"\n [class.loro-card-navigation--disabled]=\"disabled()\"\n [attr.aria-disabled]=\"disabled() || null\"\n [attr.tabindex]=\"disabled() ? -1 : 0\">\n <div class=\"loro-card-navigation__icon\" aria-hidden=\"true\" [class.loro-card-navigation__icon--empty]=\"!icon()\">\n @if (icon()) {\n <loro-icon [name]=\"icon()!\" [size]=\"iconSize()\" [color]=\"iconColor()\" [decorative]=\"true\" />\n }\n </div>\n\n <div class=\"loro-card-navigation__body\">\n <div class=\"loro-card-navigation__copy\">\n <h3 class=\"loro-card-navigation__title\">{{ title() }}</h3>\n @if (hasDescription()) {\n <p class=\"loro-card-navigation__description\">{{ description() }}</p>\n }\n </div>\n\n @if (showArrow()) {\n <div class=\"loro-card-navigation__arrow\" aria-hidden=\"true\">\n <loro-icon name=\"arrow-right\" [size]=\"arrowSize()\" [decorative]=\"true\" />\n </div>\n }\n </div>\n</article>\n", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-card-navigation{display:grid;gap:1rem;min-height:100%;padding:1.25rem;border-radius:2rem;border:1px solid var(--loro-home-hero-border);background:var(--loro-home-hero-bg);box-shadow:var(--loro-home-card-shadow);color:var(--loro-home-hero-text);text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,filter .18s ease;outline:none;cursor:default}@media(min-width:1024px){.loro-card-navigation{gap:1.25rem;padding:1.5rem;border-radius:2.25rem}}.loro-card-navigation--interactive{cursor:pointer}.loro-card-navigation--interactive:hover,.loro-card-navigation--interactive:focus-visible{transform:translateY(-2px);border-color:var(--loro-home-card-hover-border);box-shadow:var(--loro-home-card-hover-shadow);filter:saturate(1.02)}.loro-card-navigation--interactive:active{transform:translateY(0);box-shadow:var(--loro-home-card-shadow)}.loro-card-navigation--interactive:hover .loro-card-navigation__arrow,.loro-card-navigation--interactive:focus-visible .loro-card-navigation__arrow{transform:translate(2px)}.loro-card-navigation--disabled{opacity:.55;pointer-events:none;filter:grayscale(.15)}.loro-card-navigation__icon{display:grid;width:3.75rem;height:3.75rem;place-items:center;border-radius:1.25rem;background:var(--loro-home-card-icon-bg);color:var(--loro-home-card-icon-color);box-shadow:var(--loro-home-card-icon-shadow)}@media(min-width:1024px){.loro-card-navigation__icon{width:4.25rem;height:4.25rem;border-radius:1.35rem}}.loro-card-navigation__icon--empty{background:color-mix(in srgb,var(--loro-home-card-icon-bg) 62%,transparent)}.loro-card-navigation__body{display:grid;grid-template-columns:1fr auto;gap:2.5rem;align-items:end}@media(min-width:1024px){.loro-card-navigation__body{gap:1rem}}.loro-card-navigation__copy{display:grid;gap:.45rem;align-content:start}.loro-card-navigation__title,.loro-card-navigation__description{margin:0}.loro-card-navigation__title{font-size:1.15rem;font-weight:800;line-height:1.15;letter-spacing:-.02em}@media(min-width:1024px){.loro-card-navigation__title{font-size:1.3rem}}.loro-card-navigation__description{color:var(--loro-home-hero-subtitle);font-size:.95rem;line-height:1.45}@media(min-width:1024px){.loro-card-navigation__description{font-size:.98rem}}.loro-card-navigation__arrow{display:flex;justify-content:flex-end;margin-top:auto;color:var(--loro-home-card-arrow-color);transition:transform .18s ease}@media(min-width:1024px){.loro-card-navigation__arrow{align-self:end}}\n"] }]
1617
+ }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrow", required: false }] }], arrowSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowSize", required: false }] }] } });
1618
+
1619
+ class LoroCardLink {
1620
+ title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
1621
+ subtitle = input('', ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
1622
+ avatarImage = input(null, ...(ngDevMode ? [{ debugName: "avatarImage" }] : /* istanbul ignore next */ []));
1623
+ iconSize = input(LoroCardDefaultHeroAvatarIconSize, ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
1624
+ illustration = input(null, ...(ngDevMode ? [{ debugName: "illustration" }] : /* istanbul ignore next */ []));
1625
+ avatarLoadFailed = signal(false, ...(ngDevMode ? [{ debugName: "avatarLoadFailed" }] : /* istanbul ignore next */ []));
1626
+ shouldShowAvatarImage = computed(() => Boolean(this.avatarImage()) && !this.avatarLoadFailed(), ...(ngDevMode ? [{ debugName: "shouldShowAvatarImage" }] : /* istanbul ignore next */ []));
1627
+ onAvatarImageError() {
1628
+ this.avatarLoadFailed.set(true);
1629
+ }
1630
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroCardLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
1631
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroCardLink, isStandalone: true, selector: "loro-card-link", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, avatarImage: { classPropertyName: "avatarImage", publicName: "avatarImage", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, illustration: { classPropertyName: "illustration", publicName: "illustration", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"loro-card-link\">\n <div class=\"loro-card-link__main\">\n <div class=\"loro-card-link__avatar\" aria-hidden=\"true\">\n @if (shouldShowAvatarImage()) {\n <img\n class=\"loro-card-link__avatar-image\"\n [src]=\"avatarImage()!\"\n alt=\"avatar\"\n width=\"100%\"\n (error)=\"onAvatarImageError()\"\n />\n } @else {\n <loro-icon name=\"user\" [size]=\"iconSize()\" [decorative]=\"true\" />\n }\n </div>\n\n <div class=\"loro-card-link__copy\">\n <p class=\"loro-card-link__title\">{{ title() }}</p>\n @if (subtitle()) {\n <p class=\"loro-card-link__subtitle\">{{ subtitle() }}</p>\n }\n </div>\n </div>\n\n @if (illustration()) {\n <div class=\"loro-card-link__illustration\" aria-hidden=\"true\">\n <loro-image [name]=\"illustration()!\" alt=\"\" width=\"100%\" />\n </div>\n }\n</div>\n", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-card-link{display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;border:1px solid var(--loro-home-hero-border);border-radius:1.1rem;background:var(--loro-home-hero-bg);color:var(--loro-home-hero-text)}.loro-card-link__main{display:flex;align-items:center;gap:.75rem;min-width:0;flex:1 1 auto}.loro-card-link__avatar{display:grid;flex:0 0 3rem;width:3rem;height:3rem;place-items:center;overflow:hidden;border-radius:.95rem;background:var(--loro-home-avatar-bg);color:var(--loro-home-avatar-color)}.loro-card-link__avatar-image{display:block;width:100%;height:100%;object-fit:cover}.loro-card-link__copy{display:grid;gap:.18rem;min-width:0}.loro-card-link__title,.loro-card-link__subtitle{margin:0}.loro-card-link__title{font-size:1rem;font-weight:800;line-height:1.2}.loro-card-link__subtitle{color:var(--loro-home-hero-subtitle);font-size:.875rem;line-height:1.35}.loro-card-link__illustration{width:clamp(4.5rem,24vw,5.75rem);flex:0 0 auto}.loro-card-link__illustration-image{display:block;width:100%;height:auto}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroImage, selector: "loro-image", inputs: ["name", "alt", "size", "width", "height", "fit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1609
1632
  }
1610
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroCard, decorators: [{
1633
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroCardLink, decorators: [{
1611
1634
  type: Component,
1612
- args: [{ selector: 'loro-card', standalone: true, imports: [RouterLink, LoroIcon, LoroImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n class=\"loro-card\"\n [routerLink]=\"link() || null\"\n [class.loro-card--tinted]=\"variant() === 'tinted'\"\n [class.loro-card--danger]=\"variant() === 'danger'\"\n [class.loro-card--selectable]=\"variant() === 'selectable'\"\n [class.loro-card--benefit]=\"variant() === 'benefit'\"\n [class.loro-card--benefit-showcase]=\"variant() === 'benefit-showcase'\"\n [class.loro-card--home-hero]=\"variant() === 'home-hero'\"\n [class.loro-card--home-primary]=\"variant() === 'home-primary'\"\n [class.loro-card--home-secondary]=\"variant() === 'home-secondary'\"\n [class.loro-card--interactive]=\"!!link()\"\n [class.loro-card--justify-start]=\"justify() === 'start'\"\n [class.loro-card--justify-center]=\"justify() === 'center'\"\n [class.loro-card--justify-end]=\"justify() === 'end'\"\n [class.loro-card--mobile-justify-start]=\"mobileJustify() === 'start'\"\n [class.loro-card--mobile-justify-center]=\"mobileJustify() === 'center'\"\n [class.loro-card--mobile-justify-end]=\"mobileJustify() === 'end'\"\n [class.loro-card--selected]=\"selected()\">\n @if (variant() === 'home-hero') {\n <div class=\"loro-card__hero-main\">\n <div class=\"loro-card__hero-avatar\" aria-hidden=\"true\">\n @if (heroAvatarSrc()) {\n <img [src]=\"heroAvatarSrc()!\" [alt]=\"heroAvatarAlt()\" />\n } @else {\n <loro-icon [name]=\"heroAvatarIcon()\" [size]=\"heroAvatarIconSize()\" [alt]=\"heroAvatarAlt()\" />\n }\n </div>\n\n <div class=\"loro-card__hero-copy\">\n @if (heroGreeting()) {\n <p>{{ heroGreeting() }}</p>\n }\n @if (heroSubtitle()) {\n <span>{{ heroSubtitle() }}</span>\n }\n </div>\n </div>\n\n @if (heroVisualImage()) {\n <div class=\"loro-card__hero-visual\" aria-hidden=\"true\">\n <loro-image [name]=\"heroVisualImage()!\" [alt]=\"heroVisualAlt()\" width=\"100%\" />\n </div>\n }\n }\n\n @if ((title() || icon()) && variant() !== 'home-hero') {\n <header class=\"loro-card__header\">\n @if (icon()) {\n <span class=\"loro-card__icon\">\n <loro-icon\n [name]=\"icon()!\"\n [size]=\"resolvedIconSize()\"\n [alt]=\"title() || icon()!\"\n [color]=\"iconColor()\"\n [decorative]=\"true\"\n />\n </span>\n }\n <div class=\"loro-card__copy\">\n @if (title()) {\n <h2 class=\"loro-card__title\">{{ title() }}</h2>\n }\n @if (description()) {\n <p class=\"loro-card__description\">{{ description() }}</p>\n }\n </div>\n </header>\n }\n <ng-content />\n @if (showArrow()) {\n <span class=\"loro-card__arrow\" aria-hidden=\"true\">\n <loro-icon name=\"arrow-right\" [size]=\"arrowSize()\" alt=\"Ir\" />\n </span>\n }\n </a>", styles: [":host{display:block;font-family:var(--loro-font-brand);container-type:inline-size}.loro-card{display:grid;gap:1.25rem;padding:clamp(1.25rem,3vw,1.75rem);border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-card);background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft);color:var(--loro-text);text-decoration:none;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background-color .18s ease}.loro-card--interactive{cursor:pointer}.loro-card--interactive:hover,.loro-card--interactive:focus-visible{transform:translateY(-1px);border-color:var(--loro-border-strong);outline:none}.loro-card--tinted{background:var(--loro-surface-tinted)}.loro-card--danger{border-color:#dc262638;background:#dc26260f}.loro-card--selectable{cursor:pointer}.loro-card--selected{border-color:var(--loro-primary-500);background:#6c3cff0d;box-shadow:0 0 0 1px #6c3cff33,var(--loro-shadow-soft)}.loro-card--benefit,.loro-card--benefit-showcase{gap:var(--loro-card-benefit-gap, .7rem);padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;transition:none}.loro-card__header{display:flex;align-items:center;gap:1rem;min-width:0}.loro-card__icon{display:grid;width:3.5rem;height:3.5rem;flex:0 0 auto;place-items:center;border-radius:1rem;background:var(--loro-brand-tint-surface);margin-block-end:.5rem}.loro-card--benefit .loro-card__header,.loro-card--benefit-showcase .loro-card__header{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--loro-card-benefit-header-gap, .75rem);min-width:0}.loro-card--benefit .loro-card__icon,.loro-card--benefit-showcase .loro-card__icon{width:var(--loro-card-benefit-icon-width, var(--loro-card-benefit-icon-size, 2.25rem));height:var(--loro-card-benefit-icon-height, var(--loro-card-benefit-icon-size, 2.25rem));border-radius:999px;background:var(--loro-card-benefit-icon-bg, var(--loro-primary-500));color:#fff}.loro-card__copy{min-width:0}.loro-card__title,.loro-card__description{margin:0}.loro-card__title{color:var(--loro-text-strong);font-size:clamp(1.15rem,2vw,1.45rem);font-weight:900;line-height:1.15}.loro-card__description{margin-top:.35rem;color:var(--loro-muted);font-size:.95rem;line-height:1.45}.loro-card__arrow{display:none;align-items:center;justify-content:center;justify-self:end;width:2.2rem;height:2.2rem;border-radius:999px;line-height:0}.loro-card--benefit .loro-card__title,.loro-card--benefit-showcase .loro-card__title{color:var(--loro-text-strong);font-size:var(--loro-card-benefit-title-font-size, 1rem);font-weight:900;line-height:var(--loro-card-benefit-title-line-height, 1.15);overflow-wrap:anywhere}.loro-card--benefit .loro-card__description,.loro-card--benefit-showcase .loro-card__description{margin-top:.12rem;color:var(--loro-muted);font-size:var(--loro-card-benefit-description-font-size, .82rem);font-weight:var(--loro-card-benefit-description-font-weight, 750);line-height:var(--loro-card-benefit-description-line-height, 1.25);overflow-wrap:anywhere}.loro-card--benefit .loro-card__copy,.loro-card--benefit-showcase .loro-card__copy{min-width:0;width:100%;flex:1 1 auto}.loro-card--benefit-showcase{width:100%;min-width:0}.loro-card--benefit.loro-card--justify-start .loro-card__header,.loro-card--benefit-showcase.loro-card--justify-start .loro-card__header{justify-content:flex-start;text-align:left}.loro-card--benefit.loro-card--justify-center .loro-card__header,.loro-card--benefit-showcase.loro-card--justify-center .loro-card__header{justify-content:center;text-align:center}.loro-card--benefit.loro-card--justify-end .loro-card__header,.loro-card--benefit-showcase.loro-card--justify-end .loro-card__header{justify-content:flex-end;text-align:right}.loro-card--home-primary,.loro-card--home-secondary{position:relative;display:flex;flex-direction:column;align-items:stretch;height:100%;gap:0;min-height:10.5rem;padding:1rem;overflow:hidden;isolation:isolate;border-color:var(--loro-home-card-border);border-radius:1.45rem;background:var(--loro-surface-soft);text-align:left}.loro-card--home-primary:before,.loro-card--home-primary:after,.loro-card--home-secondary:before,.loro-card--home-secondary:after{position:absolute;inset:0;content:\"\";pointer-events:none}.loro-card--home-primary>*,.loro-card--home-secondary>*{position:relative;z-index:1}.loro-card--home-primary .loro-card__header,.loro-card--home-secondary .loro-card__header{display:block;flex:1 1 auto;text-align:left}.loro-card--home-primary .loro-card__icon,.loro-card--home-secondary .loro-card__icon{position:relative;width:3rem;height:3rem;border:1px solid rgba(255,255,255,.2);border-radius:1.15rem;background:var(--loro-home-card-icon-bg);box-shadow:var(--loro-home-card-icon-shadow);color:var(--loro-home-card-icon-color)}.loro-card--home-primary .loro-card__copy,.loro-card--home-secondary .loro-card__copy{min-width:0;display:grid;grid-template-rows:auto auto;justify-items:start;gap:.4rem;min-height:0}.loro-card--home-primary .loro-card__title,.loro-card--home-secondary .loro-card__title{color:var(--loro-home-card-title);font-size:1.16rem;font-weight:800;line-height:1.15;letter-spacing:-.02em;text-align:left}.loro-card--home-primary .loro-card__description,.loro-card--home-secondary .loro-card__description{max-width:none;min-height:0;margin-top:0;color:var(--loro-home-card-description);font-size:.9rem;line-height:1.45;text-align:left}.loro-card--home-primary .loro-card__arrow,.loro-card--home-secondary .loro-card__arrow{display:inline-flex;color:var(--loro-home-card-arrow-color);align-items:center;justify-content:center;align-self:flex-end;margin-top:auto}.loro-card--home-secondary .loro-card__title{font-size:1.08rem}.loro-card--home-secondary .loro-card__description{font-size:.85rem}.loro-card--home-primary:hover,.loro-card--home-primary:focus-visible,.loro-card--home-secondary:hover,.loro-card--home-secondary:focus-visible{transform:translateY(-.24rem) scale(1.01);border-color:var(--loro-home-card-hover-border);box-shadow:var(--loro-home-card-hover-shadow)}.loro-card--home-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.75rem;min-height:6.25rem;overflow:hidden;border-color:var(--loro-home-hero-border);border-radius:1.1rem;background:var(--loro-home-hero-bg);padding:.875rem 1rem;color:var(--loro-home-hero-text)}.loro-card--home-hero .loro-card__header,.loro-card--home-hero .loro-card__copy,.loro-card--home-hero .loro-card__icon{display:none}.loro-card__hero-main{display:flex;align-items:center;gap:.75rem;min-width:0}.loro-card__hero-avatar{display:grid;width:3rem;height:3rem;flex:0 0 3rem;place-items:center;overflow:hidden;border-radius:.95rem;background:var(--loro-home-avatar-bg);color:var(--loro-home-avatar-color)}.loro-card__hero-avatar img{width:100%;height:100%;object-fit:cover}.loro-card__hero-copy{display:grid;gap:.18rem;min-width:0}.loro-card__hero-copy p,.loro-card__hero-copy span{margin:0}.loro-card__hero-copy p{font-size:1rem;font-weight:800;line-height:1.2}.loro-card__hero-copy span{color:var(--loro-home-hero-subtitle);font-size:.875rem;line-height:1.35}.loro-card__hero-visual{width:clamp(4.5rem,24vw,5.75rem);align-self:end}.loro-card--home-hero:hover,.loro-card--home-hero:focus-visible{transform:none;border-color:var(--loro-home-hero-border);box-shadow:var(--loro-shadow-soft)}@media(max-width:1023.88px){.loro-card--benefit.loro-card--mobile-justify-start .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-start .loro-card__header{text-align:left}.loro-card--benefit.loro-card--mobile-justify-center .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-center .loro-card__header{text-align:center;justify-self:center;width:fit-content;max-width:100%;margin-inline:auto}.loro-card--benefit.loro-card--mobile-justify-end .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-end .loro-card__header{text-align:right}.loro-card--benefit.loro-card--mobile-justify-start .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-start .loro-card__header{grid-template-columns:auto minmax(0,1fr)}.loro-card--benefit.loro-card--mobile-justify-center .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-center .loro-card__header{grid-template-columns:auto auto}.loro-card--benefit.loro-card--mobile-justify-end .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-end .loro-card__header{grid-template-columns:auto minmax(0,1fr)}}@container (min-width: 18rem){.loro-card--home-primary,.loro-card--home-secondary{min-height:9.75rem}.loro-card--home-primary .loro-card__header,.loro-card--home-secondary .loro-card__header{display:block}.loro-card--home-hero{min-height:7.25rem;padding:1rem 1.25rem}.loro-card__hero-visual{width:clamp(5.25rem,20vw,7rem)}}\n"] }]
1613
- }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], justify: [{ type: i0.Input, args: [{ isSignal: true, alias: "justify", required: false }] }], mobileJustify: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileJustify", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], showArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrow", required: false }] }], arrowSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowSize", required: false }] }], heroGreeting: [{ type: i0.Input, args: [{ isSignal: true, alias: "heroGreeting", required: false }] }], heroSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "heroSubtitle", required: false }] }], heroAvatarSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "heroAvatarSrc", required: false }] }], heroAvatarAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "heroAvatarAlt", required: false }] }], heroAvatarIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "heroAvatarIcon", required: false }] }], heroAvatarIconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "heroAvatarIconSize", required: false }] }], heroVisualImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "heroVisualImage", required: false }] }], heroVisualAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "heroVisualAlt", required: false }] }] } });
1635
+ args: [{ selector: 'loro-card-link', standalone: true, imports: [LoroIcon, LoroImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"loro-card-link\">\n <div class=\"loro-card-link__main\">\n <div class=\"loro-card-link__avatar\" aria-hidden=\"true\">\n @if (shouldShowAvatarImage()) {\n <img\n class=\"loro-card-link__avatar-image\"\n [src]=\"avatarImage()!\"\n alt=\"avatar\"\n width=\"100%\"\n (error)=\"onAvatarImageError()\"\n />\n } @else {\n <loro-icon name=\"user\" [size]=\"iconSize()\" [decorative]=\"true\" />\n }\n </div>\n\n <div class=\"loro-card-link__copy\">\n <p class=\"loro-card-link__title\">{{ title() }}</p>\n @if (subtitle()) {\n <p class=\"loro-card-link__subtitle\">{{ subtitle() }}</p>\n }\n </div>\n </div>\n\n @if (illustration()) {\n <div class=\"loro-card-link__illustration\" aria-hidden=\"true\">\n <loro-image [name]=\"illustration()!\" alt=\"\" width=\"100%\" />\n </div>\n }\n</div>\n", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-card-link{display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;border:1px solid var(--loro-home-hero-border);border-radius:1.1rem;background:var(--loro-home-hero-bg);color:var(--loro-home-hero-text)}.loro-card-link__main{display:flex;align-items:center;gap:.75rem;min-width:0;flex:1 1 auto}.loro-card-link__avatar{display:grid;flex:0 0 3rem;width:3rem;height:3rem;place-items:center;overflow:hidden;border-radius:.95rem;background:var(--loro-home-avatar-bg);color:var(--loro-home-avatar-color)}.loro-card-link__avatar-image{display:block;width:100%;height:100%;object-fit:cover}.loro-card-link__copy{display:grid;gap:.18rem;min-width:0}.loro-card-link__title,.loro-card-link__subtitle{margin:0}.loro-card-link__title{font-size:1rem;font-weight:800;line-height:1.2}.loro-card-link__subtitle{color:var(--loro-home-hero-subtitle);font-size:.875rem;line-height:1.35}.loro-card-link__illustration{width:clamp(4.5rem,24vw,5.75rem);flex:0 0 auto}.loro-card-link__illustration-image{display:block;width:100%;height:auto}\n"] }]
1636
+ }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], avatarImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarImage", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], illustration: [{ type: i0.Input, args: [{ isSignal: true, alias: "illustration", required: false }] }] } });
1614
1637
 
1615
1638
  class LoroRadio {
1616
1639
  label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
@@ -2946,5 +2969,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
2946
2969
  * Generated bundle index. Do not edit.
2947
2970
  */
2948
2971
 
2949
- export { Footer, LORO_BUTTON_CLASSES, LORO_BUTTON_COLORS, LORO_BUTTON_DEFAULTS, LORO_BUTTON_ICON_MODES, LORO_BUTTON_SIZES, LORO_BUTTON_TYPES, LORO_BUTTON_VARIANTS, LORO_ICON_ASSETS, LORO_ICON_LEGACY_NAMES, LORO_ICON_PATHS, LORO_IMAGE_ASSETS, LORO_IMAGE_LEGACY_NAMES, LORO_IMAGE_PATHS, LoroAccordion, LoroAlert, LoroAppNav, LoroAssistantCard, LoroAuthField, LoroAuthSocialButton, LoroBadge, LoroButton, LoroCard, LoroCardNav, LoroCheckbox, LoroDashboardCard, LoroDivider, LoroDropdown, LoroFilterChip, LoroHapticsService, LoroIcon, LoroImage, LoroInput, LoroModal, LoroNotification, LoroNotificationPanel, LoroNotificationRow, LoroProductRow, LoroProductSection, LoroProfileCard, LoroProfileHero, LoroRadio, LoroSegmentedControl, LoroSelect, LoroSpinner, LoroStatCard, LoroStoreRankCard, LoroSummaryBar, LoroTab, LoroTextArea, LoroToast, LoroToggle, LoroUpload };
2972
+ export { Footer, LORO_BUTTON_CLASSES, LORO_BUTTON_COLORS, LORO_BUTTON_DEFAULTS, LORO_BUTTON_ICON_MODES, LORO_BUTTON_SIZES, LORO_BUTTON_TYPES, LORO_BUTTON_VARIANTS, LORO_ICON_ASSETS, LORO_ICON_LEGACY_NAMES, LORO_ICON_PATHS, LORO_IMAGE_ASSETS, LORO_IMAGE_LEGACY_NAMES, LORO_IMAGE_PATHS, LoroAccordion, LoroAlert, LoroAppNav, LoroAssistantCard, LoroAuthField, LoroAuthSocialButton, LoroBadge, LoroButton, LoroCardBenefit, LoroCardDefaultArrowSize, LoroCardDefaultHeroAvatarIconSize, LoroCardDefaultIconSize, LoroCardLink, LoroCardNav, LoroCardNavigation, LoroCheckbox, LoroDashboardCard, LoroDivider, LoroDropdown, LoroFilterChip, LoroHapticsService, LoroIcon, LoroImage, LoroInput, LoroModal, LoroNotification, LoroNotificationPanel, LoroNotificationRow, LoroProductRow, LoroProductSection, LoroProfileCard, LoroProfileHero, LoroRadio, LoroSegmentedControl, LoroSelect, LoroSpinner, LoroStatCard, LoroStoreRankCard, LoroSummaryBar, LoroTab, LoroTextArea, LoroToast, LoroToggle, LoroUpload };
2950
2973
  //# sourceMappingURL=juligc99-loro-ui.mjs.map