@ajuarezso/sui-design-system 0.7.22 → 0.7.24
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, input, computed, ChangeDetectionStrategy, Component, inject, TemplateRef, Directive, model, signal, contentChild, viewChild, effect, untracked, output, ElementRef, forwardRef, ViewContainerRef, DestroyRef, ContentChild, ViewChild, ViewEncapsulation, Renderer2, DOCUMENT, HostListener, viewChildren, afterNextRender, ContentChildren, ViewChildren, Injectable } from '@angular/core';
|
|
2
|
+
import { InjectionToken, input, computed, ChangeDetectionStrategy, Component, inject, TemplateRef, Directive, model, signal, contentChild, viewChild, effect, untracked, output, ElementRef, forwardRef, ViewContainerRef, DestroyRef, ContentChild, ViewChild, ViewEncapsulation, Renderer2, DOCUMENT, HostListener, viewChildren, afterNextRender, ContentChildren, ViewChildren, Injector, Injectable } from '@angular/core';
|
|
3
3
|
import { NgTemplateOutlet, DOCUMENT as DOCUMENT$1, NgOptimizedImage } from '@angular/common';
|
|
4
4
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
5
5
|
import { Subscription } from 'rxjs';
|
|
@@ -1210,12 +1210,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
1210
1210
|
* error → error-warning-fill
|
|
1211
1211
|
* feature → sparkling-fill
|
|
1212
1212
|
*
|
|
1213
|
-
*
|
|
1214
|
-
* Figma "🚀 Feature"
|
|
1215
|
-
*
|
|
1216
|
-
*
|
|
1217
|
-
*
|
|
1218
|
-
*
|
|
1213
|
+
* VERIFIED 2026-07-23 (screenshot set 169:2399) — Feature status color:
|
|
1214
|
+
* Figma "🚀 Feature" confirmed = state/faded (gray) + `magic-fill` icon en
|
|
1215
|
+
* las 4 columnas del set (filled/light/lighter/stroke); no existe morado en
|
|
1216
|
+
* el set. The SUI project established `feature` = state/feature (purple
|
|
1217
|
+
* #7d52f4) + `sparkling-fill` across sui-banner + master-preview. Kept
|
|
1218
|
+
* purple here as deliberate brand deviation. If SUI canon must win, remap
|
|
1219
1219
|
* feature → --sui-state-faded-* + magic-fill in BOTH alert and banner.
|
|
1220
1220
|
*
|
|
1221
1221
|
* Sizes (Figma component set 169:2399):
|
|
@@ -2594,6 +2594,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2594
2594
|
* badge→bordeado con texto disabled-300. CONFIRMADO (262:254/258/259).
|
|
2595
2595
|
* - Badge "NEW": variant Light color Information (state/information/light +
|
|
2596
2596
|
* dark), NO primary-base. CONFIRMADO (261:3928). Corregido del naranja previo.
|
|
2597
|
+
* Renderiza un `<sui-badge>` real (homologación familia radio/checkbox card):
|
|
2598
|
+
* defaults color 'blue' (→ state information, fiel Figma) + variant 'light' +
|
|
2599
|
+
* size 'small'; la SuiBadgeConfig del consumer puede overridear los tres.
|
|
2597
2600
|
* - 6 types completos (basic/left-icon/avatar + card-provider/brand/company via
|
|
2598
2601
|
* slot proyectado). CONFIRMADO contra los 24 variants.
|
|
2599
2602
|
*
|
|
@@ -2651,7 +2654,9 @@ class SuiCheckboxCard {
|
|
|
2651
2654
|
/** URL de imagen para type='avatar'. Si falla, fallback a iniciales del label. */
|
|
2652
2655
|
imageUrl = input(null, ...(ngDevMode ? [{ debugName: "imageUrl" }] : /* istanbul ignore next */ []));
|
|
2653
2656
|
/** Badge junto al label — string shorthand ('NEW') o SuiBadgeConfig
|
|
2654
|
-
(label + color/variant/size, tipado como sui-badge).
|
|
2657
|
+
(label + color/variant/size, tipado como sui-badge). Renderiza un
|
|
2658
|
+
`<sui-badge>` real; defaults blue/light/small (information azul, fiel
|
|
2659
|
+
Figma 261:3928). null = sin badge. */
|
|
2655
2660
|
badge = input(null, ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
|
|
2656
2661
|
badgeCfg = computed(() => {
|
|
2657
2662
|
const b = this.badge();
|
|
@@ -2717,11 +2722,11 @@ class SuiCheckboxCard {
|
|
|
2717
2722
|
useExisting: forwardRef(() => SuiCheckboxCard),
|
|
2718
2723
|
multi: true,
|
|
2719
2724
|
},
|
|
2720
|
-
], ngImport: i0, template: "<!-- Leading slot \u2014 solo basic / left-icon / avatar (Figma 261:3921/264:2858/264:3023) -->\n@if (type() === 'left-icon') {\n <div class=\"sui-checkbox-card__leading sui-checkbox-card__leading--icon\" aria-hidden=\"true\">\n @if (icon()) {\n <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n } @else if (emoji()) {\n <sui-emoji [name]=\"emoji()\" size=\"md\" />\n } @else if (iconSrc()) {\n <sui-emoji [src]=\"iconSrc()\" size=\"full\" />\n }\n </div>\n} @else if (type() === 'avatar') {\n <sui-avatar\n class=\"sui-checkbox-card__leading sui-checkbox-card__leading--avatar\"\n size=\"lg\"\n [src]=\"imageUrl()\"\n [initials]=\"initialsFromLabel()\" />\n} @else if (type() === 'card-provider' || type() === 'brand' || type() === 'company') {\n <!-- Leading proyectado por el consumer: logo de proveedor / brand / company.\n El componente solo da el contenedor + geometr\u00EDa por type (Figma\n 265:539/699/863). Ej: <sui-checkbox-card type=\"brand\"><img slot=\"leading\" \u2026></sui-checkbox-card> -->\n <div class=\"sui-checkbox-card__leading sui-checkbox-card__leading--slot\" aria-hidden=\"true\">\n <ng-content select=\"[slot=leading]\" />\n </div>\n}\n\n<!-- Texto: Title row + description -->\n<div class=\"sui-checkbox-card__text\">\n <div class=\"sui-checkbox-card__title\">\n @if (label()) {\n <span class=\"sui-checkbox-card__label\">{{ label() }}</span>\n }\n @if (sublabel()) {\n <span class=\"sui-checkbox-card__sublabel\">{{ sublabel() }}</span>\n }\n @if (badgeCfg(); as bcfg) {\n <
|
|
2725
|
+
], ngImport: i0, template: "<!-- Leading slot \u2014 solo basic / left-icon / avatar (Figma 261:3921/264:2858/264:3023) -->\n@if (type() === 'left-icon') {\n <div class=\"sui-checkbox-card__leading sui-checkbox-card__leading--icon\" aria-hidden=\"true\">\n @if (icon()) {\n <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n } @else if (emoji()) {\n <sui-emoji [name]=\"emoji()\" size=\"md\" />\n } @else if (iconSrc()) {\n <sui-emoji [src]=\"iconSrc()\" size=\"full\" />\n }\n </div>\n} @else if (type() === 'avatar') {\n <sui-avatar\n class=\"sui-checkbox-card__leading sui-checkbox-card__leading--avatar\"\n size=\"lg\"\n [src]=\"imageUrl()\"\n [initials]=\"initialsFromLabel()\" />\n} @else if (type() === 'card-provider' || type() === 'brand' || type() === 'company') {\n <!-- Leading proyectado por el consumer: logo de proveedor / brand / company.\n El componente solo da el contenedor + geometr\u00EDa por type (Figma\n 265:539/699/863). Ej: <sui-checkbox-card type=\"brand\"><img slot=\"leading\" \u2026></sui-checkbox-card> -->\n <div class=\"sui-checkbox-card__leading sui-checkbox-card__leading--slot\" aria-hidden=\"true\">\n <ng-content select=\"[slot=leading]\" />\n </div>\n}\n\n<!-- Texto: Title row + description -->\n<div class=\"sui-checkbox-card__text\">\n <div class=\"sui-checkbox-card__title\">\n @if (label()) {\n <span class=\"sui-checkbox-card__label\">{{ label() }}</span>\n }\n @if (sublabel()) {\n <span class=\"sui-checkbox-card__sublabel\">{{ sublabel() }}</span>\n }\n @if (badgeCfg(); as bcfg) {\n <sui-badge\n class=\"sui-checkbox-card__badge\"\n [color]=\"bcfg.color ?? 'blue'\"\n [variant]=\"bcfg.variant ?? 'light'\"\n [size]=\"bcfg.size ?? 'small'\"\n >{{ bcfg.label }}</sui-badge>\n }\n </div>\n @if (description()) {\n <p class=\"sui-checkbox-card__description\">{{ description() }}</p>\n }\n</div>\n\n<!-- Checkbox trailing (20\u00D720 medium). El click del host ya togglea \u2014 el checkbox\n interno solo refleja el estado visual (sus listeners propios disparan\n onCheckboxChange para mantener sync con el form). -->\n<sui-checkbox\n class=\"sui-checkbox-card__checkbox\"\n [size]=\"size()\"\n [checked]=\"checked()\"\n [indeterminate]=\"indeterminate()\"\n [disabled]=\"isDisabled()\"\n (checkedChange)=\"onCheckboxChange($event)\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n/>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;box-sizing:border-box;align-items:flex-start;gap:14px;padding:16px;width:100%;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-12, 12px);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));cursor:pointer;outline:none;-webkit-user-select:none;user-select:none;font-family:var(--sui-font-sans, var(--font-sans, sans-serif));touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),border-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),transform var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}@media(hover:hover)and (pointer:fine){:host(:hover:not([data-sui-disabled]):not([data-sui-checked]):not([data-sui-indeterminate])){background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent;box-shadow:none}}:host([data-sui-checked]),:host([data-sui-indeterminate]){border-color:var(--sui-primary-base, #fa7319);box-shadow:none;background:var(--sui-bg-white-0, #fff)}@media(hover:hover)and (pointer:fine){:host([data-sui-checked]:hover:not([data-sui-disabled])),:host([data-sui-indeterminate]:hover:not([data-sui-disabled])){background:var(--sui-bg-weak-50, #f7f7f7)}}:host(:focus-visible:not([data-sui-disabled])){border-color:var(--sui-primary-base, #fa7319);box-shadow:0 0 0 3px color-mix(in oklab,var(--sui-primary-base, #fa7319) 16%,transparent)}:host([data-sui-disabled]){cursor:not-allowed;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);box-shadow:none}:host([data-sui-disabled]) .sui-checkbox-card__label{color:var(--sui-text-sub-600, #5c5c5c)}:host([data-sui-disabled]) .sui-checkbox-card__sublabel,:host([data-sui-disabled]) .sui-checkbox-card__description{color:var(--sui-text-soft-400, #a3a3a3)}:host(:active:not([data-sui-disabled])){transform:scale(.99)}.sui-checkbox-card__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.sui-checkbox-card__leading--icon{box-sizing:border-box;width:40px;height:40px;padding:10px;border-radius:var(--sui-radius-full, 999px);background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));color:var(--sui-text-sub-600, #5c5c5c)}:host([data-sui-leading-fill]) .sui-checkbox-card__leading--icon{padding:0;border:none;background:none;box-shadow:none;border-radius:0;overflow:visible;display:flex;align-items:center;justify-content:center}:host([data-sui-leading-fill]) .sui-checkbox-card__leading--icon sui-emoji{display:block;width:100%;height:100%}:host([data-sui-type=avatar]) .sui-checkbox-card__leading--avatar{width:40px;height:40px}.sui-checkbox-card__leading--slot{box-sizing:border-box;overflow:hidden}.sui-checkbox-card__leading--slot>*{display:block;width:100%;height:100%;object-fit:contain}:host([data-sui-type=card-provider]) .sui-checkbox-card__leading--slot{width:32px;height:24px;border-radius:4px}:host([data-sui-type=brand]) .sui-checkbox-card__leading--slot{width:40px;height:40px}:host([data-sui-type=company]) .sui-checkbox-card__leading--slot{width:40px;height:40px;border-radius:var(--sui-radius-full, 999px)}.sui-checkbox-card__text{display:flex;flex-direction:column;gap:4px;align-items:flex-start;flex:1 1 auto;min-width:0;align-self:stretch}.sui-checkbox-card__text:not(:has(.sui-checkbox-card__description)){justify-content:center}.sui-checkbox-card__title{display:flex;gap:4px;align-items:center;flex-wrap:wrap}.sui-checkbox-card__label{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-checkbox-card__sublabel{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-checkbox-card__description{margin:0;font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-sui-disabled]) .sui-checkbox-card__badge{background:transparent;border:1px solid var(--sui-stroke-soft-200, #ebebeb);color:var(--sui-text-disabled-300, #d1d1d1)}.sui-checkbox-card__checkbox{flex-shrink:0;align-self:flex-start;pointer-events:none}\n"], dependencies: [{ kind: "component", type: SuiCheckbox, selector: "sui-checkbox", inputs: ["size", "checked", "indeterminate", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiEmoji, selector: "sui-emoji", inputs: ["name", "src", "size", "ariaLabel"] }, { kind: "component", type: SuiAvatar, selector: "sui-avatar", inputs: ["size", "src", "alt", "initials", "color", "status", "memojiSrc", "illustrationSrc", "icon", "companyLogoSrc", "topBadge", "bgColor"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2721
2726
|
}
|
|
2722
2727
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiCheckboxCard, decorators: [{
|
|
2723
2728
|
type: Component,
|
|
2724
|
-
args: [{ selector: 'sui-checkbox-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiCheckbox, SuiIcon, SuiEmoji, SuiAvatar], providers: [
|
|
2729
|
+
args: [{ selector: 'sui-checkbox-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiCheckbox, SuiIcon, SuiEmoji, SuiAvatar, SuiBadge], providers: [
|
|
2725
2730
|
{
|
|
2726
2731
|
provide: NG_VALUE_ACCESSOR,
|
|
2727
2732
|
useExisting: forwardRef(() => SuiCheckboxCard),
|
|
@@ -2744,7 +2749,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2744
2749
|
/* iOS WKWebView fix — sin esto :active stickea 300-500ms en standalone pages */
|
|
2745
2750
|
'(touchstart)': '$event.currentTarget',
|
|
2746
2751
|
'(touchend)': '$any($event.currentTarget).blur()',
|
|
2747
|
-
}, template: "<!-- Leading slot \u2014 solo basic / left-icon / avatar (Figma 261:3921/264:2858/264:3023) -->\n@if (type() === 'left-icon') {\n <div class=\"sui-checkbox-card__leading sui-checkbox-card__leading--icon\" aria-hidden=\"true\">\n @if (icon()) {\n <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n } @else if (emoji()) {\n <sui-emoji [name]=\"emoji()\" size=\"md\" />\n } @else if (iconSrc()) {\n <sui-emoji [src]=\"iconSrc()\" size=\"full\" />\n }\n </div>\n} @else if (type() === 'avatar') {\n <sui-avatar\n class=\"sui-checkbox-card__leading sui-checkbox-card__leading--avatar\"\n size=\"lg\"\n [src]=\"imageUrl()\"\n [initials]=\"initialsFromLabel()\" />\n} @else if (type() === 'card-provider' || type() === 'brand' || type() === 'company') {\n <!-- Leading proyectado por el consumer: logo de proveedor / brand / company.\n El componente solo da el contenedor + geometr\u00EDa por type (Figma\n 265:539/699/863). Ej: <sui-checkbox-card type=\"brand\"><img slot=\"leading\" \u2026></sui-checkbox-card> -->\n <div class=\"sui-checkbox-card__leading sui-checkbox-card__leading--slot\" aria-hidden=\"true\">\n <ng-content select=\"[slot=leading]\" />\n </div>\n}\n\n<!-- Texto: Title row + description -->\n<div class=\"sui-checkbox-card__text\">\n <div class=\"sui-checkbox-card__title\">\n @if (label()) {\n <span class=\"sui-checkbox-card__label\">{{ label() }}</span>\n }\n @if (sublabel()) {\n <span class=\"sui-checkbox-card__sublabel\">{{ sublabel() }}</span>\n }\n @if (badgeCfg(); as bcfg) {\n <
|
|
2752
|
+
}, template: "<!-- Leading slot \u2014 solo basic / left-icon / avatar (Figma 261:3921/264:2858/264:3023) -->\n@if (type() === 'left-icon') {\n <div class=\"sui-checkbox-card__leading sui-checkbox-card__leading--icon\" aria-hidden=\"true\">\n @if (icon()) {\n <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n } @else if (emoji()) {\n <sui-emoji [name]=\"emoji()\" size=\"md\" />\n } @else if (iconSrc()) {\n <sui-emoji [src]=\"iconSrc()\" size=\"full\" />\n }\n </div>\n} @else if (type() === 'avatar') {\n <sui-avatar\n class=\"sui-checkbox-card__leading sui-checkbox-card__leading--avatar\"\n size=\"lg\"\n [src]=\"imageUrl()\"\n [initials]=\"initialsFromLabel()\" />\n} @else if (type() === 'card-provider' || type() === 'brand' || type() === 'company') {\n <!-- Leading proyectado por el consumer: logo de proveedor / brand / company.\n El componente solo da el contenedor + geometr\u00EDa por type (Figma\n 265:539/699/863). Ej: <sui-checkbox-card type=\"brand\"><img slot=\"leading\" \u2026></sui-checkbox-card> -->\n <div class=\"sui-checkbox-card__leading sui-checkbox-card__leading--slot\" aria-hidden=\"true\">\n <ng-content select=\"[slot=leading]\" />\n </div>\n}\n\n<!-- Texto: Title row + description -->\n<div class=\"sui-checkbox-card__text\">\n <div class=\"sui-checkbox-card__title\">\n @if (label()) {\n <span class=\"sui-checkbox-card__label\">{{ label() }}</span>\n }\n @if (sublabel()) {\n <span class=\"sui-checkbox-card__sublabel\">{{ sublabel() }}</span>\n }\n @if (badgeCfg(); as bcfg) {\n <sui-badge\n class=\"sui-checkbox-card__badge\"\n [color]=\"bcfg.color ?? 'blue'\"\n [variant]=\"bcfg.variant ?? 'light'\"\n [size]=\"bcfg.size ?? 'small'\"\n >{{ bcfg.label }}</sui-badge>\n }\n </div>\n @if (description()) {\n <p class=\"sui-checkbox-card__description\">{{ description() }}</p>\n }\n</div>\n\n<!-- Checkbox trailing (20\u00D720 medium). El click del host ya togglea \u2014 el checkbox\n interno solo refleja el estado visual (sus listeners propios disparan\n onCheckboxChange para mantener sync con el form). -->\n<sui-checkbox\n class=\"sui-checkbox-card__checkbox\"\n [size]=\"size()\"\n [checked]=\"checked()\"\n [indeterminate]=\"indeterminate()\"\n [disabled]=\"isDisabled()\"\n (checkedChange)=\"onCheckboxChange($event)\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n/>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;box-sizing:border-box;align-items:flex-start;gap:14px;padding:16px;width:100%;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-12, 12px);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));cursor:pointer;outline:none;-webkit-user-select:none;user-select:none;font-family:var(--sui-font-sans, var(--font-sans, sans-serif));touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),border-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),transform var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}@media(hover:hover)and (pointer:fine){:host(:hover:not([data-sui-disabled]):not([data-sui-checked]):not([data-sui-indeterminate])){background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent;box-shadow:none}}:host([data-sui-checked]),:host([data-sui-indeterminate]){border-color:var(--sui-primary-base, #fa7319);box-shadow:none;background:var(--sui-bg-white-0, #fff)}@media(hover:hover)and (pointer:fine){:host([data-sui-checked]:hover:not([data-sui-disabled])),:host([data-sui-indeterminate]:hover:not([data-sui-disabled])){background:var(--sui-bg-weak-50, #f7f7f7)}}:host(:focus-visible:not([data-sui-disabled])){border-color:var(--sui-primary-base, #fa7319);box-shadow:0 0 0 3px color-mix(in oklab,var(--sui-primary-base, #fa7319) 16%,transparent)}:host([data-sui-disabled]){cursor:not-allowed;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);box-shadow:none}:host([data-sui-disabled]) .sui-checkbox-card__label{color:var(--sui-text-sub-600, #5c5c5c)}:host([data-sui-disabled]) .sui-checkbox-card__sublabel,:host([data-sui-disabled]) .sui-checkbox-card__description{color:var(--sui-text-soft-400, #a3a3a3)}:host(:active:not([data-sui-disabled])){transform:scale(.99)}.sui-checkbox-card__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.sui-checkbox-card__leading--icon{box-sizing:border-box;width:40px;height:40px;padding:10px;border-radius:var(--sui-radius-full, 999px);background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));color:var(--sui-text-sub-600, #5c5c5c)}:host([data-sui-leading-fill]) .sui-checkbox-card__leading--icon{padding:0;border:none;background:none;box-shadow:none;border-radius:0;overflow:visible;display:flex;align-items:center;justify-content:center}:host([data-sui-leading-fill]) .sui-checkbox-card__leading--icon sui-emoji{display:block;width:100%;height:100%}:host([data-sui-type=avatar]) .sui-checkbox-card__leading--avatar{width:40px;height:40px}.sui-checkbox-card__leading--slot{box-sizing:border-box;overflow:hidden}.sui-checkbox-card__leading--slot>*{display:block;width:100%;height:100%;object-fit:contain}:host([data-sui-type=card-provider]) .sui-checkbox-card__leading--slot{width:32px;height:24px;border-radius:4px}:host([data-sui-type=brand]) .sui-checkbox-card__leading--slot{width:40px;height:40px}:host([data-sui-type=company]) .sui-checkbox-card__leading--slot{width:40px;height:40px;border-radius:var(--sui-radius-full, 999px)}.sui-checkbox-card__text{display:flex;flex-direction:column;gap:4px;align-items:flex-start;flex:1 1 auto;min-width:0;align-self:stretch}.sui-checkbox-card__text:not(:has(.sui-checkbox-card__description)){justify-content:center}.sui-checkbox-card__title{display:flex;gap:4px;align-items:center;flex-wrap:wrap}.sui-checkbox-card__label{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-checkbox-card__sublabel{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-checkbox-card__description{margin:0;font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-sui-disabled]) .sui-checkbox-card__badge{background:transparent;border:1px solid var(--sui-stroke-soft-200, #ebebeb);color:var(--sui-text-disabled-300, #d1d1d1)}.sui-checkbox-card__checkbox{flex-shrink:0;align-self:flex-start;pointer-events:none}\n"] }]
|
|
2748
2753
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], emoji: [{ type: i0.Input, args: [{ isSignal: true, alias: "emoji", required: false }] }], iconSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSrc", required: false }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], checkedChange2: [{ type: i0.Output, args: ["checkedChange2"] }] } });
|
|
2749
2754
|
|
|
2750
2755
|
/**
|
|
@@ -4083,13 +4088,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
4083
4088
|
class SuiKbd {
|
|
4084
4089
|
variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
4085
4090
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiKbd, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4086
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: SuiKbd, isStandalone: true, selector: "sui-kbd", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-sui-variant": "variant()" } }, ngImport: i0, template: "<ng-content />\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;gap:2px;flex-shrink:0;height:20px;border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-4, 4px);background:var(--sui-bg-white-0, #ffffff);font-family:var(--sui-font-sans, sans-serif);font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;padding:0 6px;white-space:nowrap;-webkit-user-select:none;user-select:none;vertical-align:middle;box-sizing:border-box}:host([data-sui-variant=subtle]){background:var(--sui-bg-weak-50, #f7f7f7);padding:2px}:host ::ng-deep sui-icon{display:inline-flex;line-height:1;color:var(--sui-text-
|
|
4091
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: SuiKbd, isStandalone: true, selector: "sui-kbd", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-sui-variant": "variant()" } }, ngImport: i0, template: "<ng-content />\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;gap:2px;flex-shrink:0;height:20px;border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-4, 4px);background:var(--sui-bg-white-0, #ffffff);font-family:var(--sui-font-sans, sans-serif);font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;padding:0 6px;white-space:nowrap;-webkit-user-select:none;user-select:none;vertical-align:middle;box-sizing:border-box}:host([data-sui-variant=subtle]){background:var(--sui-bg-weak-50, #f7f7f7);padding:2px}:host ::ng-deep sui-icon{display:inline-flex;line-height:1;color:var(--sui-text-sub-600, #5c5c5c)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4087
4092
|
}
|
|
4088
4093
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiKbd, decorators: [{
|
|
4089
4094
|
type: Component,
|
|
4090
4095
|
args: [{ selector: 'sui-kbd', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
4091
4096
|
'[attr.data-sui-variant]': 'variant()',
|
|
4092
|
-
}, template: "<ng-content />\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;gap:2px;flex-shrink:0;height:20px;border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-4, 4px);background:var(--sui-bg-white-0, #ffffff);font-family:var(--sui-font-sans, sans-serif);font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;padding:0 6px;white-space:nowrap;-webkit-user-select:none;user-select:none;vertical-align:middle;box-sizing:border-box}:host([data-sui-variant=subtle]){background:var(--sui-bg-weak-50, #f7f7f7);padding:2px}:host ::ng-deep sui-icon{display:inline-flex;line-height:1;color:var(--sui-text-
|
|
4097
|
+
}, template: "<ng-content />\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;gap:2px;flex-shrink:0;height:20px;border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-4, 4px);background:var(--sui-bg-white-0, #ffffff);font-family:var(--sui-font-sans, sans-serif);font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;padding:0 6px;white-space:nowrap;-webkit-user-select:none;user-select:none;vertical-align:middle;box-sizing:border-box}:host([data-sui-variant=subtle]){background:var(--sui-bg-weak-50, #f7f7f7);padding:2px}:host ::ng-deep sui-icon{display:inline-flex;line-height:1;color:var(--sui-text-sub-600, #5c5c5c)}\n"] }]
|
|
4093
4098
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
4094
4099
|
|
|
4095
4100
|
/**
|
|
@@ -6829,7 +6834,7 @@ class SuiDatepicker {
|
|
|
6829
6834
|
useExisting: forwardRef(() => SuiDatepicker),
|
|
6830
6835
|
multi: true,
|
|
6831
6836
|
},
|
|
6832
|
-
], ngImport: i0, template: "<!-- Trigger (input + icono calendario) \u2014 solo si no es inline -->\n@if (!inline()) {\n <button\n type=\"button\"\n class=\"sui-datepicker__trigger\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-haspopup]=\"true\"\n (click)=\"toggle()\"\n >\n <sui-icon class=\"sui-datepicker__trigger-icon\" name=\"calendar-line\" [size]=\"20\" />\n <span class=\"sui-datepicker__trigger-text\" [class.sui-datepicker__trigger-text--placeholder]=\"!value()\">\n {{ triggerText() }}\n </span>\n <sui-icon class=\"sui-datepicker__trigger-chevron\" name=\"arrow-down-s-line\" [size]=\"20\" />\n </button>\n}\n\n<!-- Popover panel \u2014 visible cuando open() o inline() -->\n@if (inline() || open()) {\n <div class=\"sui-datepicker__panel\"\n [class.sui-datepicker__panel--inline]=\"inline()\"\n [class.sui-datepicker__panel--range]=\"mode() === 'range'\"\n role=\"dialog\">\n <!-- Sidebar de presets \u2014 solo en mode=range (usa <sui-period-range>) -->\n @if (mode() === 'range') {\n <aside class=\"sui-datepicker__presets\" aria-label=\"Rangos predefinidos\">\n @for (p of presets(); track trackPreset($index, p)) {\n <sui-period-range\n [label]=\"p.label\"\n [active]=\"isPresetActive(p.id)\"\n (clicked)=\"selectPreset(p)\"\n />\n }\n </aside>\n }\n\n <!-- Contenido principal: 1 o 2 calendarios + footer -->\n <div class=\"sui-datepicker__content\">\n <div class=\"sui-datepicker__calendars\">\n <!-- Calendario izquierdo (siempre visible) -->\n <div class=\"sui-datepicker__calendar\">\n <sui-date-selector\n [label]=\"leftMonthLabel()\"\n [leftIcon]=\"true\"\n [rightIcon]=\"effectiveCalendars() === 1\"\n (prev)=\"prevMonth()\"\n (next)=\"nextMonth()\"\n />\n\n <div class=\"sui-datepicker__day-labels\" role=\"row\">\n @for (label of dayLabels; track label) {\n <sui-day-label [label]=\"label\" />\n }\n </div>\n\n <div class=\"sui-datepicker__day-grid\" role=\"grid\">\n @for (row of leftRows(); track trackRow($index, row)) {\n <div class=\"sui-datepicker__day-row\" role=\"row\">\n @if (row.hasBand) {\n <span\n class=\"sui-datepicker__range-band\"\n [class.sui-datepicker__range-band--round-left]=\"row.bandRoundLeft\"\n [class.sui-datepicker__range-band--round-right]=\"row.bandRoundRight\"\n [style.--sui-band-start]=\"row.bandStart\"\n [style.--sui-band-end]=\"row.bandEnd\"\n aria-hidden=\"true\"\n ></span>\n }\n @for (cell of row.cells; track trackCell($index, cell)) {\n <sui-day-cell\n [day]=\"cell.day\"\n [type]=\"mode() === 'range' ? 'range' : 'basic'\"\n [selected]=\"mode() === 'date' && cell.selected\"\n [rangePosition]=\"cellRangePosition(cell)\"\n [marked]=\"cell.marked\"\n [today]=\"cell.isToday\"\n [disabled]=\"cell.disabled\"\n [outOfMonth]=\"!cell.inCurrentMonth\"\n (clicked)=\"selectCell(cell)\"\n />\n }\n </div>\n }\n </div>\n </div>\n\n <!-- Calendario derecho \u2014 solo en mode=range con effectiveCalendars=2 (desktop) -->\n @if (mode() === 'range' && effectiveCalendars() === 2) {\n <div class=\"sui-datepicker__calendar sui-datepicker__calendar--right\">\n <sui-date-selector\n [label]=\"rightMonthLabel()\"\n [leftIcon]=\"false\"\n [rightIcon]=\"true\"\n (next)=\"nextMonth()\"\n />\n\n <div class=\"sui-datepicker__day-labels\" role=\"row\">\n @for (label of dayLabels; track label) {\n <sui-day-label [label]=\"label\" />\n }\n </div>\n\n <div class=\"sui-datepicker__day-grid\" role=\"grid\">\n @for (row of rightRows(); track trackRow($index, row)) {\n <div class=\"sui-datepicker__day-row\" role=\"row\">\n @if (row.hasBand) {\n <span\n class=\"sui-datepicker__range-band\"\n [class.sui-datepicker__range-band--round-left]=\"row.bandRoundLeft\"\n [class.sui-datepicker__range-band--round-right]=\"row.bandRoundRight\"\n [style.--sui-band-start]=\"row.bandStart\"\n [style.--sui-band-end]=\"row.bandEnd\"\n aria-hidden=\"true\"\n ></span>\n }\n @for (cell of row.cells; track trackCell($index, cell)) {\n <sui-day-cell\n [day]=\"cell.day\"\n [type]=\"mode() === 'range' ? 'range' : 'basic'\"\n [selected]=\"false\"\n [rangePosition]=\"cellRangePosition(cell)\"\n [marked]=\"cell.marked\"\n [today]=\"cell.isToday\"\n [disabled]=\"cell.disabled\"\n [outOfMonth]=\"!cell.inCurrentMonth\"\n (clicked)=\"selectCell(cell)\"\n />\n }\n </div>\n }\n </div>\n </div>\n }\n </div>\n\n <!-- Footer con Cancel + Apply (Range siempre lo muestra) -->\n @if (showFooter() || mode() === 'range') {\n <footer class=\"sui-datepicker__footer\">\n @if (mode() === 'range' && rangeHint(); as hint) {\n <span class=\"sui-datepicker__range-hint\">{{ hint }}</span>\n }\n <div class=\"sui-datepicker__footer-actions\">\n <sui-button variant=\"stroke\" color=\"neutral\" size=\"small\" type=\"button\" (click)=\"cancel()\">\n Cancel\n </sui-button>\n <sui-button variant=\"filled\" color=\"primary\" size=\"small\" type=\"button\" (click)=\"apply()\">\n Apply\n </sui-button>\n </div>\n </footer>\n }\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;font-family:var(--sui-font-sans, var(--font-sans, sans-serif))}:host([data-sui-mode=range]){display:block}.sui-datepicker__trigger{display:inline-flex;align-items:center;gap:8px;width:100%;min-width:180px;height:40px;padding:0 12px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-10, 10px);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));cursor:pointer;outline:none;font:inherit;color:var(--sui-text-strong-950, #171717);transition:border-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}.sui-datepicker__trigger:hover:not(:disabled){border-color:var(--sui-stroke-sub-300, #d1d1d1)}.sui-datepicker__trigger:focus-visible:not(:disabled){border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px color-mix(in oklab,var(--sui-stroke-strong-950, #171717) 16%,transparent)}.sui-datepicker__trigger:disabled{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;border:none}.sui-datepicker__trigger-icon{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-datepicker__trigger-text{flex:1 1 auto;text-align:left;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-datepicker__trigger-text--placeholder{color:var(--sui-text-soft-400, #a3a3a3);font-weight:400}.sui-datepicker__trigger-chevron{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-datepicker__panel{position:absolute;top:calc(100% + 8px);left:0;z-index:50;display:flex;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, .1019607843));overflow:hidden;animation:sui-datepicker-enter .16s cubic-bezier(.23,1,.32,1)}.sui-datepicker__panel--inline{position:static;animation:none}.sui-datepicker__panel--range{width:936px;max-width:calc(100vw - 32px)}:host([data-sui-calendars=\"1\"]) .sui-datepicker__panel--range{width:auto}@keyframes sui-datepicker-enter{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.sui-datepicker__presets{display:flex;flex-direction:column;gap:8px;width:200px;flex-shrink:0;padding:20px 16px 2px;border-right:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #fff);box-sizing:border-box}.sui-datepicker__content{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.sui-datepicker__calendars{display:flex;flex:1 1 auto}.sui-datepicker__calendar{flex:1 1 0;max-width:368px;padding:20px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:8px}.sui-datepicker__calendar--right{border-left:1px solid var(--sui-stroke-soft-200, #ebebeb)}.sui-datepicker__day-labels{display:flex;gap:8px;align-items:center;justify-content:space-between;width:328px;max-width:328px}.sui-datepicker__day-grid{display:flex;flex-direction:column;gap:8px;width:328px;max-width:328px}.sui-datepicker__day-row{position:relative;display:flex;gap:8px;align-items:center;justify-content:space-between;width:328px}.sui-datepicker__range-band{position:absolute;inset:0;background:var(--sui-primary-alpha-10, rgba(250, 115, 25, .1019607843));pointer-events:none;z-index:0}.sui-datepicker__range-band--round-left{left:calc(var(--sui-band-start) * var(--sui-day-step, 48px));border-top-left-radius:var(--sui-radius-8, 8px);border-bottom-left-radius:var(--sui-radius-8, 8px)}.sui-datepicker__range-band--round-right{right:calc((6 - var(--sui-band-end)) * var(--sui-day-step, 48px));border-top-right-radius:var(--sui-radius-8, 8px);border-bottom-right-radius:var(--sui-radius-8, 8px)}.sui-datepicker__day-row sui-day-cell{position:relative;z-index:1}.sui-datepicker__footer{display:flex;align-items:center;gap:16px;padding:16px;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb)}:host([data-sui-mode=range]) .sui-datepicker__footer{padding:16px 16px 16px 24px}.sui-datepicker__range-hint{flex:1 0 0;min-width:0;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-datepicker__footer-actions{display:flex;gap:16px;align-items:center}:host(:not([data-sui-mode=range])) .sui-datepicker__footer-actions{flex:1 0 0;min-width:0}:host(:not([data-sui-mode=range])) .sui-datepicker__footer-actions sui-button{flex:1 0 0;min-width:0}:host([data-sui-mode=range]) .sui-datepicker__footer-actions{flex-shrink:0;margin-left:auto}:host([data-sui-mode=range]) .sui-datepicker__footer-actions sui-button{width:108px}@media(max-width:767px){.sui-datepicker__panel--range{width:calc(100vw - 32px);flex-direction:column}.sui-datepicker__presets{flex-direction:row;overflow-x:auto;width:100%;border-right:none;border-bottom:1px solid var(--sui-stroke-soft-200, #ebebeb);padding:12px 16px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}.sui-datepicker__presets sui-period-range{width:auto;flex-shrink:0;scroll-snap-align:start}.sui-datepicker__calendar{padding-left:12px;padding-right:12px;max-width:none}.sui-datepicker__day-labels,.sui-datepicker__day-grid,.sui-datepicker__day-row{--sui-day-step: 44px;width:304px;max-width:304px;gap:4px}}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiButton, selector: "sui-button", inputs: ["variant", "color", "size", "onlyIcon", "disabled", "leftIcon", "rightIcon", "type"] }, { kind: "component", type: SuiDayLabel, selector: "sui-day-label", inputs: ["label"] }, { kind: "component", type: SuiDayCell, selector: "sui-day-cell", inputs: ["day", "type", "rangePosition", "selected", "marked", "today", "disabled", "outOfMonth", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: SuiDateSelector, selector: "sui-date-selector", inputs: ["label", "leftIcon", "rightIcon", "disabled"], outputs: ["prev", "next"] }, { kind: "component", type: SuiPeriodRange, selector: "sui-period-range", inputs: ["label", "active", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6837
|
+
], ngImport: i0, template: "<!-- Trigger (input + icono calendario) \u2014 solo si no es inline -->\n@if (!inline()) {\n <button\n type=\"button\"\n class=\"sui-datepicker__trigger\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-haspopup]=\"true\"\n (click)=\"toggle()\"\n >\n <sui-icon class=\"sui-datepicker__trigger-icon\" name=\"calendar-line\" [size]=\"20\" />\n <span class=\"sui-datepicker__trigger-text\" [class.sui-datepicker__trigger-text--placeholder]=\"!value()\">\n {{ triggerText() }}\n </span>\n <sui-icon class=\"sui-datepicker__trigger-chevron\" name=\"arrow-down-s-line\" [size]=\"20\" />\n </button>\n}\n\n<!-- Popover panel \u2014 visible cuando open() o inline() -->\n@if (inline() || open()) {\n <div class=\"sui-datepicker__panel\"\n [class.sui-datepicker__panel--inline]=\"inline()\"\n [class.sui-datepicker__panel--range]=\"mode() === 'range'\"\n role=\"dialog\">\n <!-- Sidebar de presets \u2014 solo en mode=range (usa <sui-period-range>) -->\n @if (mode() === 'range') {\n <aside class=\"sui-datepicker__presets\" aria-label=\"Rangos predefinidos\">\n @for (p of presets(); track trackPreset($index, p)) {\n <sui-period-range\n [label]=\"p.label\"\n [active]=\"isPresetActive(p.id)\"\n (clicked)=\"selectPreset(p)\"\n />\n }\n </aside>\n }\n\n <!-- Contenido principal: 1 o 2 calendarios + footer -->\n <div class=\"sui-datepicker__content\">\n <div class=\"sui-datepicker__calendars\">\n <!-- Calendario izquierdo (siempre visible) -->\n <div class=\"sui-datepicker__calendar\">\n <sui-date-selector\n [label]=\"leftMonthLabel()\"\n [leftIcon]=\"true\"\n [rightIcon]=\"effectiveCalendars() === 1\"\n (prev)=\"prevMonth()\"\n (next)=\"nextMonth()\"\n />\n\n <div class=\"sui-datepicker__day-labels\" role=\"row\">\n @for (label of dayLabels; track label) {\n <sui-day-label [label]=\"label\" />\n }\n </div>\n\n <div class=\"sui-datepicker__day-grid\" role=\"grid\">\n @for (row of leftRows(); track trackRow($index, row)) {\n <div class=\"sui-datepicker__day-row\" role=\"row\">\n @if (row.hasBand) {\n <span\n class=\"sui-datepicker__range-band\"\n [class.sui-datepicker__range-band--round-left]=\"row.bandRoundLeft\"\n [class.sui-datepicker__range-band--round-right]=\"row.bandRoundRight\"\n [style.--sui-band-start]=\"row.bandStart\"\n [style.--sui-band-end]=\"row.bandEnd\"\n aria-hidden=\"true\"\n ></span>\n }\n @for (cell of row.cells; track trackCell($index, cell)) {\n <sui-day-cell\n [day]=\"cell.day\"\n [type]=\"mode() === 'range' ? 'range' : 'basic'\"\n [selected]=\"mode() === 'date' && cell.selected\"\n [rangePosition]=\"cellRangePosition(cell)\"\n [marked]=\"cell.marked\"\n [today]=\"cell.isToday\"\n [disabled]=\"cell.disabled\"\n [outOfMonth]=\"!cell.inCurrentMonth\"\n (clicked)=\"selectCell(cell)\"\n />\n }\n </div>\n }\n </div>\n </div>\n\n <!-- Calendario derecho \u2014 solo en mode=range con effectiveCalendars=2 (desktop) -->\n @if (mode() === 'range' && effectiveCalendars() === 2) {\n <div class=\"sui-datepicker__calendar sui-datepicker__calendar--right\">\n <sui-date-selector\n [label]=\"rightMonthLabel()\"\n [leftIcon]=\"false\"\n [rightIcon]=\"true\"\n (next)=\"nextMonth()\"\n />\n\n <div class=\"sui-datepicker__day-labels\" role=\"row\">\n @for (label of dayLabels; track label) {\n <sui-day-label [label]=\"label\" />\n }\n </div>\n\n <div class=\"sui-datepicker__day-grid\" role=\"grid\">\n @for (row of rightRows(); track trackRow($index, row)) {\n <div class=\"sui-datepicker__day-row\" role=\"row\">\n @if (row.hasBand) {\n <span\n class=\"sui-datepicker__range-band\"\n [class.sui-datepicker__range-band--round-left]=\"row.bandRoundLeft\"\n [class.sui-datepicker__range-band--round-right]=\"row.bandRoundRight\"\n [style.--sui-band-start]=\"row.bandStart\"\n [style.--sui-band-end]=\"row.bandEnd\"\n aria-hidden=\"true\"\n ></span>\n }\n @for (cell of row.cells; track trackCell($index, cell)) {\n <sui-day-cell\n [day]=\"cell.day\"\n [type]=\"mode() === 'range' ? 'range' : 'basic'\"\n [selected]=\"false\"\n [rangePosition]=\"cellRangePosition(cell)\"\n [marked]=\"cell.marked\"\n [today]=\"cell.isToday\"\n [disabled]=\"cell.disabled\"\n [outOfMonth]=\"!cell.inCurrentMonth\"\n (clicked)=\"selectCell(cell)\"\n />\n }\n </div>\n }\n </div>\n </div>\n }\n </div>\n\n <!-- Footer con Cancel + Apply (Range siempre lo muestra) -->\n @if (showFooter() || mode() === 'range') {\n <footer class=\"sui-datepicker__footer\">\n @if (mode() === 'range' && rangeHint(); as hint) {\n <span class=\"sui-datepicker__range-hint\">{{ hint }}</span>\n }\n <div class=\"sui-datepicker__footer-actions\">\n <sui-button variant=\"stroke\" color=\"neutral\" size=\"small\" type=\"button\" (click)=\"cancel()\">\n Cancel\n </sui-button>\n <sui-button variant=\"filled\" color=\"primary\" size=\"small\" type=\"button\" (click)=\"apply()\">\n Apply\n </sui-button>\n </div>\n </footer>\n }\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;font-family:var(--sui-font-sans, var(--font-sans, sans-serif))}:host([data-sui-mode=range]){display:block}.sui-datepicker__trigger{display:inline-flex;align-items:center;gap:8px;width:100%;min-width:180px;height:40px;padding:0 12px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-10, 10px);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));cursor:pointer;outline:none;font:inherit;color:var(--sui-text-strong-950, #171717);transition:border-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}.sui-datepicker__trigger:hover:not(:disabled){border-color:var(--sui-stroke-sub-300, #d1d1d1)}.sui-datepicker__trigger:focus-visible:not(:disabled){border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px color-mix(in oklab,var(--sui-stroke-strong-950, #171717) 16%,transparent)}.sui-datepicker__trigger:disabled{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;border:none}.sui-datepicker__trigger-icon{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-datepicker__trigger-text{flex:1 1 auto;text-align:left;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-datepicker__trigger-text--placeholder{color:var(--sui-text-soft-400, #a3a3a3);font-weight:400}.sui-datepicker__trigger-chevron{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-datepicker__panel{position:absolute;top:calc(100% + 8px);left:0;z-index:50;display:flex;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, .1019607843));overflow:hidden;animation:sui-datepicker-enter .16s cubic-bezier(.23,1,.32,1)}.sui-datepicker__panel--inline{position:static;animation:none}.sui-datepicker__panel--range{width:936px;max-width:calc(100vw - 32px)}:host([data-sui-calendars=\"1\"]) .sui-datepicker__panel--range{width:auto}@keyframes sui-datepicker-enter{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.sui-datepicker__presets{display:flex;flex-direction:column;gap:8px;width:200px;flex-shrink:0;padding:20px 16px 2px;border-right:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #fff);box-sizing:border-box}.sui-datepicker__content{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.sui-datepicker__calendars{display:flex;flex:1 1 auto}.sui-datepicker__calendar{flex:1 1 0;max-width:368px;padding:20px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:8px}.sui-datepicker__calendar--right{border-left:1px solid var(--sui-stroke-soft-200, #ebebeb)}.sui-datepicker__calendar sui-date-selector{width:328px;max-width:328px}.sui-datepicker__day-labels{display:flex;gap:8px;align-items:center;justify-content:space-between;width:328px;max-width:328px}.sui-datepicker__day-grid{display:flex;flex-direction:column;gap:8px;width:328px;max-width:328px}.sui-datepicker__day-row{position:relative;display:flex;gap:8px;align-items:center;justify-content:space-between;width:328px}.sui-datepicker__range-band{position:absolute;inset:0;background:var(--sui-primary-alpha-10, rgba(250, 115, 25, .1019607843));pointer-events:none;z-index:0}.sui-datepicker__range-band--round-left{left:calc(var(--sui-band-start) * var(--sui-day-step, 48px));border-top-left-radius:var(--sui-radius-8, 8px);border-bottom-left-radius:var(--sui-radius-8, 8px)}.sui-datepicker__range-band--round-right{right:calc((6 - var(--sui-band-end)) * var(--sui-day-step, 48px));border-top-right-radius:var(--sui-radius-8, 8px);border-bottom-right-radius:var(--sui-radius-8, 8px)}.sui-datepicker__day-row sui-day-cell{position:relative;z-index:1}.sui-datepicker__footer{display:flex;align-items:center;gap:16px;padding:16px;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb)}:host([data-sui-mode=range]) .sui-datepicker__footer{padding:16px 16px 16px 24px}.sui-datepicker__range-hint{flex:1 0 0;min-width:0;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-datepicker__footer-actions{display:flex;gap:16px;align-items:center}:host(:not([data-sui-mode=range])) .sui-datepicker__footer-actions{flex:1 0 0;min-width:0}:host(:not([data-sui-mode=range])) .sui-datepicker__footer-actions sui-button{flex:1 0 0;min-width:0}:host([data-sui-mode=range]) .sui-datepicker__footer-actions{flex-shrink:0;margin-left:auto}:host([data-sui-mode=range]) .sui-datepicker__footer-actions sui-button{width:108px}@media(max-width:767px){.sui-datepicker__panel--range{width:calc(100vw - 32px);flex-direction:column}.sui-datepicker__presets{flex-direction:row;overflow-x:auto;width:100%;border-right:none;border-bottom:1px solid var(--sui-stroke-soft-200, #ebebeb);padding:12px 16px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}.sui-datepicker__presets sui-period-range{width:auto;flex-shrink:0;scroll-snap-align:start}.sui-datepicker__calendar{padding-left:12px;padding-right:12px;max-width:none}.sui-datepicker__day-labels,.sui-datepicker__day-grid,.sui-datepicker__day-row{--sui-day-step: 44px;width:304px;max-width:304px;gap:4px}}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiButton, selector: "sui-button", inputs: ["variant", "color", "size", "onlyIcon", "disabled", "leftIcon", "rightIcon", "type"] }, { kind: "component", type: SuiDayLabel, selector: "sui-day-label", inputs: ["label"] }, { kind: "component", type: SuiDayCell, selector: "sui-day-cell", inputs: ["day", "type", "rangePosition", "selected", "marked", "today", "disabled", "outOfMonth", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: SuiDateSelector, selector: "sui-date-selector", inputs: ["label", "leftIcon", "rightIcon", "disabled"], outputs: ["prev", "next"] }, { kind: "component", type: SuiPeriodRange, selector: "sui-period-range", inputs: ["label", "active", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6833
6838
|
}
|
|
6834
6839
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiDatepicker, decorators: [{
|
|
6835
6840
|
type: Component,
|
|
@@ -6843,7 +6848,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
6843
6848
|
'[attr.data-sui-mode]': 'mode()',
|
|
6844
6849
|
'[attr.data-sui-open]': 'open() ? "" : null',
|
|
6845
6850
|
'[attr.data-sui-calendars]': 'effectiveCalendars()',
|
|
6846
|
-
}, template: "<!-- Trigger (input + icono calendario) \u2014 solo si no es inline -->\n@if (!inline()) {\n <button\n type=\"button\"\n class=\"sui-datepicker__trigger\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-haspopup]=\"true\"\n (click)=\"toggle()\"\n >\n <sui-icon class=\"sui-datepicker__trigger-icon\" name=\"calendar-line\" [size]=\"20\" />\n <span class=\"sui-datepicker__trigger-text\" [class.sui-datepicker__trigger-text--placeholder]=\"!value()\">\n {{ triggerText() }}\n </span>\n <sui-icon class=\"sui-datepicker__trigger-chevron\" name=\"arrow-down-s-line\" [size]=\"20\" />\n </button>\n}\n\n<!-- Popover panel \u2014 visible cuando open() o inline() -->\n@if (inline() || open()) {\n <div class=\"sui-datepicker__panel\"\n [class.sui-datepicker__panel--inline]=\"inline()\"\n [class.sui-datepicker__panel--range]=\"mode() === 'range'\"\n role=\"dialog\">\n <!-- Sidebar de presets \u2014 solo en mode=range (usa <sui-period-range>) -->\n @if (mode() === 'range') {\n <aside class=\"sui-datepicker__presets\" aria-label=\"Rangos predefinidos\">\n @for (p of presets(); track trackPreset($index, p)) {\n <sui-period-range\n [label]=\"p.label\"\n [active]=\"isPresetActive(p.id)\"\n (clicked)=\"selectPreset(p)\"\n />\n }\n </aside>\n }\n\n <!-- Contenido principal: 1 o 2 calendarios + footer -->\n <div class=\"sui-datepicker__content\">\n <div class=\"sui-datepicker__calendars\">\n <!-- Calendario izquierdo (siempre visible) -->\n <div class=\"sui-datepicker__calendar\">\n <sui-date-selector\n [label]=\"leftMonthLabel()\"\n [leftIcon]=\"true\"\n [rightIcon]=\"effectiveCalendars() === 1\"\n (prev)=\"prevMonth()\"\n (next)=\"nextMonth()\"\n />\n\n <div class=\"sui-datepicker__day-labels\" role=\"row\">\n @for (label of dayLabels; track label) {\n <sui-day-label [label]=\"label\" />\n }\n </div>\n\n <div class=\"sui-datepicker__day-grid\" role=\"grid\">\n @for (row of leftRows(); track trackRow($index, row)) {\n <div class=\"sui-datepicker__day-row\" role=\"row\">\n @if (row.hasBand) {\n <span\n class=\"sui-datepicker__range-band\"\n [class.sui-datepicker__range-band--round-left]=\"row.bandRoundLeft\"\n [class.sui-datepicker__range-band--round-right]=\"row.bandRoundRight\"\n [style.--sui-band-start]=\"row.bandStart\"\n [style.--sui-band-end]=\"row.bandEnd\"\n aria-hidden=\"true\"\n ></span>\n }\n @for (cell of row.cells; track trackCell($index, cell)) {\n <sui-day-cell\n [day]=\"cell.day\"\n [type]=\"mode() === 'range' ? 'range' : 'basic'\"\n [selected]=\"mode() === 'date' && cell.selected\"\n [rangePosition]=\"cellRangePosition(cell)\"\n [marked]=\"cell.marked\"\n [today]=\"cell.isToday\"\n [disabled]=\"cell.disabled\"\n [outOfMonth]=\"!cell.inCurrentMonth\"\n (clicked)=\"selectCell(cell)\"\n />\n }\n </div>\n }\n </div>\n </div>\n\n <!-- Calendario derecho \u2014 solo en mode=range con effectiveCalendars=2 (desktop) -->\n @if (mode() === 'range' && effectiveCalendars() === 2) {\n <div class=\"sui-datepicker__calendar sui-datepicker__calendar--right\">\n <sui-date-selector\n [label]=\"rightMonthLabel()\"\n [leftIcon]=\"false\"\n [rightIcon]=\"true\"\n (next)=\"nextMonth()\"\n />\n\n <div class=\"sui-datepicker__day-labels\" role=\"row\">\n @for (label of dayLabels; track label) {\n <sui-day-label [label]=\"label\" />\n }\n </div>\n\n <div class=\"sui-datepicker__day-grid\" role=\"grid\">\n @for (row of rightRows(); track trackRow($index, row)) {\n <div class=\"sui-datepicker__day-row\" role=\"row\">\n @if (row.hasBand) {\n <span\n class=\"sui-datepicker__range-band\"\n [class.sui-datepicker__range-band--round-left]=\"row.bandRoundLeft\"\n [class.sui-datepicker__range-band--round-right]=\"row.bandRoundRight\"\n [style.--sui-band-start]=\"row.bandStart\"\n [style.--sui-band-end]=\"row.bandEnd\"\n aria-hidden=\"true\"\n ></span>\n }\n @for (cell of row.cells; track trackCell($index, cell)) {\n <sui-day-cell\n [day]=\"cell.day\"\n [type]=\"mode() === 'range' ? 'range' : 'basic'\"\n [selected]=\"false\"\n [rangePosition]=\"cellRangePosition(cell)\"\n [marked]=\"cell.marked\"\n [today]=\"cell.isToday\"\n [disabled]=\"cell.disabled\"\n [outOfMonth]=\"!cell.inCurrentMonth\"\n (clicked)=\"selectCell(cell)\"\n />\n }\n </div>\n }\n </div>\n </div>\n }\n </div>\n\n <!-- Footer con Cancel + Apply (Range siempre lo muestra) -->\n @if (showFooter() || mode() === 'range') {\n <footer class=\"sui-datepicker__footer\">\n @if (mode() === 'range' && rangeHint(); as hint) {\n <span class=\"sui-datepicker__range-hint\">{{ hint }}</span>\n }\n <div class=\"sui-datepicker__footer-actions\">\n <sui-button variant=\"stroke\" color=\"neutral\" size=\"small\" type=\"button\" (click)=\"cancel()\">\n Cancel\n </sui-button>\n <sui-button variant=\"filled\" color=\"primary\" size=\"small\" type=\"button\" (click)=\"apply()\">\n Apply\n </sui-button>\n </div>\n </footer>\n }\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;font-family:var(--sui-font-sans, var(--font-sans, sans-serif))}:host([data-sui-mode=range]){display:block}.sui-datepicker__trigger{display:inline-flex;align-items:center;gap:8px;width:100%;min-width:180px;height:40px;padding:0 12px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-10, 10px);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));cursor:pointer;outline:none;font:inherit;color:var(--sui-text-strong-950, #171717);transition:border-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}.sui-datepicker__trigger:hover:not(:disabled){border-color:var(--sui-stroke-sub-300, #d1d1d1)}.sui-datepicker__trigger:focus-visible:not(:disabled){border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px color-mix(in oklab,var(--sui-stroke-strong-950, #171717) 16%,transparent)}.sui-datepicker__trigger:disabled{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;border:none}.sui-datepicker__trigger-icon{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-datepicker__trigger-text{flex:1 1 auto;text-align:left;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-datepicker__trigger-text--placeholder{color:var(--sui-text-soft-400, #a3a3a3);font-weight:400}.sui-datepicker__trigger-chevron{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-datepicker__panel{position:absolute;top:calc(100% + 8px);left:0;z-index:50;display:flex;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, .1019607843));overflow:hidden;animation:sui-datepicker-enter .16s cubic-bezier(.23,1,.32,1)}.sui-datepicker__panel--inline{position:static;animation:none}.sui-datepicker__panel--range{width:936px;max-width:calc(100vw - 32px)}:host([data-sui-calendars=\"1\"]) .sui-datepicker__panel--range{width:auto}@keyframes sui-datepicker-enter{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.sui-datepicker__presets{display:flex;flex-direction:column;gap:8px;width:200px;flex-shrink:0;padding:20px 16px 2px;border-right:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #fff);box-sizing:border-box}.sui-datepicker__content{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.sui-datepicker__calendars{display:flex;flex:1 1 auto}.sui-datepicker__calendar{flex:1 1 0;max-width:368px;padding:20px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:8px}.sui-datepicker__calendar--right{border-left:1px solid var(--sui-stroke-soft-200, #ebebeb)}.sui-datepicker__day-labels{display:flex;gap:8px;align-items:center;justify-content:space-between;width:328px;max-width:328px}.sui-datepicker__day-grid{display:flex;flex-direction:column;gap:8px;width:328px;max-width:328px}.sui-datepicker__day-row{position:relative;display:flex;gap:8px;align-items:center;justify-content:space-between;width:328px}.sui-datepicker__range-band{position:absolute;inset:0;background:var(--sui-primary-alpha-10, rgba(250, 115, 25, .1019607843));pointer-events:none;z-index:0}.sui-datepicker__range-band--round-left{left:calc(var(--sui-band-start) * var(--sui-day-step, 48px));border-top-left-radius:var(--sui-radius-8, 8px);border-bottom-left-radius:var(--sui-radius-8, 8px)}.sui-datepicker__range-band--round-right{right:calc((6 - var(--sui-band-end)) * var(--sui-day-step, 48px));border-top-right-radius:var(--sui-radius-8, 8px);border-bottom-right-radius:var(--sui-radius-8, 8px)}.sui-datepicker__day-row sui-day-cell{position:relative;z-index:1}.sui-datepicker__footer{display:flex;align-items:center;gap:16px;padding:16px;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb)}:host([data-sui-mode=range]) .sui-datepicker__footer{padding:16px 16px 16px 24px}.sui-datepicker__range-hint{flex:1 0 0;min-width:0;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-datepicker__footer-actions{display:flex;gap:16px;align-items:center}:host(:not([data-sui-mode=range])) .sui-datepicker__footer-actions{flex:1 0 0;min-width:0}:host(:not([data-sui-mode=range])) .sui-datepicker__footer-actions sui-button{flex:1 0 0;min-width:0}:host([data-sui-mode=range]) .sui-datepicker__footer-actions{flex-shrink:0;margin-left:auto}:host([data-sui-mode=range]) .sui-datepicker__footer-actions sui-button{width:108px}@media(max-width:767px){.sui-datepicker__panel--range{width:calc(100vw - 32px);flex-direction:column}.sui-datepicker__presets{flex-direction:row;overflow-x:auto;width:100%;border-right:none;border-bottom:1px solid var(--sui-stroke-soft-200, #ebebeb);padding:12px 16px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}.sui-datepicker__presets sui-period-range{width:auto;flex-shrink:0;scroll-snap-align:start}.sui-datepicker__calendar{padding-left:12px;padding-right:12px;max-width:none}.sui-datepicker__day-labels,.sui-datepicker__day-grid,.sui-datepicker__day-row{--sui-day-step: 44px;width:304px;max-width:304px;gap:4px}}\n"] }]
|
|
6851
|
+
}, template: "<!-- Trigger (input + icono calendario) \u2014 solo si no es inline -->\n@if (!inline()) {\n <button\n type=\"button\"\n class=\"sui-datepicker__trigger\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-haspopup]=\"true\"\n (click)=\"toggle()\"\n >\n <sui-icon class=\"sui-datepicker__trigger-icon\" name=\"calendar-line\" [size]=\"20\" />\n <span class=\"sui-datepicker__trigger-text\" [class.sui-datepicker__trigger-text--placeholder]=\"!value()\">\n {{ triggerText() }}\n </span>\n <sui-icon class=\"sui-datepicker__trigger-chevron\" name=\"arrow-down-s-line\" [size]=\"20\" />\n </button>\n}\n\n<!-- Popover panel \u2014 visible cuando open() o inline() -->\n@if (inline() || open()) {\n <div class=\"sui-datepicker__panel\"\n [class.sui-datepicker__panel--inline]=\"inline()\"\n [class.sui-datepicker__panel--range]=\"mode() === 'range'\"\n role=\"dialog\">\n <!-- Sidebar de presets \u2014 solo en mode=range (usa <sui-period-range>) -->\n @if (mode() === 'range') {\n <aside class=\"sui-datepicker__presets\" aria-label=\"Rangos predefinidos\">\n @for (p of presets(); track trackPreset($index, p)) {\n <sui-period-range\n [label]=\"p.label\"\n [active]=\"isPresetActive(p.id)\"\n (clicked)=\"selectPreset(p)\"\n />\n }\n </aside>\n }\n\n <!-- Contenido principal: 1 o 2 calendarios + footer -->\n <div class=\"sui-datepicker__content\">\n <div class=\"sui-datepicker__calendars\">\n <!-- Calendario izquierdo (siempre visible) -->\n <div class=\"sui-datepicker__calendar\">\n <sui-date-selector\n [label]=\"leftMonthLabel()\"\n [leftIcon]=\"true\"\n [rightIcon]=\"effectiveCalendars() === 1\"\n (prev)=\"prevMonth()\"\n (next)=\"nextMonth()\"\n />\n\n <div class=\"sui-datepicker__day-labels\" role=\"row\">\n @for (label of dayLabels; track label) {\n <sui-day-label [label]=\"label\" />\n }\n </div>\n\n <div class=\"sui-datepicker__day-grid\" role=\"grid\">\n @for (row of leftRows(); track trackRow($index, row)) {\n <div class=\"sui-datepicker__day-row\" role=\"row\">\n @if (row.hasBand) {\n <span\n class=\"sui-datepicker__range-band\"\n [class.sui-datepicker__range-band--round-left]=\"row.bandRoundLeft\"\n [class.sui-datepicker__range-band--round-right]=\"row.bandRoundRight\"\n [style.--sui-band-start]=\"row.bandStart\"\n [style.--sui-band-end]=\"row.bandEnd\"\n aria-hidden=\"true\"\n ></span>\n }\n @for (cell of row.cells; track trackCell($index, cell)) {\n <sui-day-cell\n [day]=\"cell.day\"\n [type]=\"mode() === 'range' ? 'range' : 'basic'\"\n [selected]=\"mode() === 'date' && cell.selected\"\n [rangePosition]=\"cellRangePosition(cell)\"\n [marked]=\"cell.marked\"\n [today]=\"cell.isToday\"\n [disabled]=\"cell.disabled\"\n [outOfMonth]=\"!cell.inCurrentMonth\"\n (clicked)=\"selectCell(cell)\"\n />\n }\n </div>\n }\n </div>\n </div>\n\n <!-- Calendario derecho \u2014 solo en mode=range con effectiveCalendars=2 (desktop) -->\n @if (mode() === 'range' && effectiveCalendars() === 2) {\n <div class=\"sui-datepicker__calendar sui-datepicker__calendar--right\">\n <sui-date-selector\n [label]=\"rightMonthLabel()\"\n [leftIcon]=\"false\"\n [rightIcon]=\"true\"\n (next)=\"nextMonth()\"\n />\n\n <div class=\"sui-datepicker__day-labels\" role=\"row\">\n @for (label of dayLabels; track label) {\n <sui-day-label [label]=\"label\" />\n }\n </div>\n\n <div class=\"sui-datepicker__day-grid\" role=\"grid\">\n @for (row of rightRows(); track trackRow($index, row)) {\n <div class=\"sui-datepicker__day-row\" role=\"row\">\n @if (row.hasBand) {\n <span\n class=\"sui-datepicker__range-band\"\n [class.sui-datepicker__range-band--round-left]=\"row.bandRoundLeft\"\n [class.sui-datepicker__range-band--round-right]=\"row.bandRoundRight\"\n [style.--sui-band-start]=\"row.bandStart\"\n [style.--sui-band-end]=\"row.bandEnd\"\n aria-hidden=\"true\"\n ></span>\n }\n @for (cell of row.cells; track trackCell($index, cell)) {\n <sui-day-cell\n [day]=\"cell.day\"\n [type]=\"mode() === 'range' ? 'range' : 'basic'\"\n [selected]=\"false\"\n [rangePosition]=\"cellRangePosition(cell)\"\n [marked]=\"cell.marked\"\n [today]=\"cell.isToday\"\n [disabled]=\"cell.disabled\"\n [outOfMonth]=\"!cell.inCurrentMonth\"\n (clicked)=\"selectCell(cell)\"\n />\n }\n </div>\n }\n </div>\n </div>\n }\n </div>\n\n <!-- Footer con Cancel + Apply (Range siempre lo muestra) -->\n @if (showFooter() || mode() === 'range') {\n <footer class=\"sui-datepicker__footer\">\n @if (mode() === 'range' && rangeHint(); as hint) {\n <span class=\"sui-datepicker__range-hint\">{{ hint }}</span>\n }\n <div class=\"sui-datepicker__footer-actions\">\n <sui-button variant=\"stroke\" color=\"neutral\" size=\"small\" type=\"button\" (click)=\"cancel()\">\n Cancel\n </sui-button>\n <sui-button variant=\"filled\" color=\"primary\" size=\"small\" type=\"button\" (click)=\"apply()\">\n Apply\n </sui-button>\n </div>\n </footer>\n }\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;font-family:var(--sui-font-sans, var(--font-sans, sans-serif))}:host([data-sui-mode=range]){display:block}.sui-datepicker__trigger{display:inline-flex;align-items:center;gap:8px;width:100%;min-width:180px;height:40px;padding:0 12px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-10, 10px);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));cursor:pointer;outline:none;font:inherit;color:var(--sui-text-strong-950, #171717);transition:border-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}.sui-datepicker__trigger:hover:not(:disabled){border-color:var(--sui-stroke-sub-300, #d1d1d1)}.sui-datepicker__trigger:focus-visible:not(:disabled){border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px color-mix(in oklab,var(--sui-stroke-strong-950, #171717) 16%,transparent)}.sui-datepicker__trigger:disabled{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;border:none}.sui-datepicker__trigger-icon{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-datepicker__trigger-text{flex:1 1 auto;text-align:left;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-datepicker__trigger-text--placeholder{color:var(--sui-text-soft-400, #a3a3a3);font-weight:400}.sui-datepicker__trigger-chevron{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-datepicker__panel{position:absolute;top:calc(100% + 8px);left:0;z-index:50;display:flex;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, .1019607843));overflow:hidden;animation:sui-datepicker-enter .16s cubic-bezier(.23,1,.32,1)}.sui-datepicker__panel--inline{position:static;animation:none}.sui-datepicker__panel--range{width:936px;max-width:calc(100vw - 32px)}:host([data-sui-calendars=\"1\"]) .sui-datepicker__panel--range{width:auto}@keyframes sui-datepicker-enter{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.sui-datepicker__presets{display:flex;flex-direction:column;gap:8px;width:200px;flex-shrink:0;padding:20px 16px 2px;border-right:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #fff);box-sizing:border-box}.sui-datepicker__content{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.sui-datepicker__calendars{display:flex;flex:1 1 auto}.sui-datepicker__calendar{flex:1 1 0;max-width:368px;padding:20px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:8px}.sui-datepicker__calendar--right{border-left:1px solid var(--sui-stroke-soft-200, #ebebeb)}.sui-datepicker__calendar sui-date-selector{width:328px;max-width:328px}.sui-datepicker__day-labels{display:flex;gap:8px;align-items:center;justify-content:space-between;width:328px;max-width:328px}.sui-datepicker__day-grid{display:flex;flex-direction:column;gap:8px;width:328px;max-width:328px}.sui-datepicker__day-row{position:relative;display:flex;gap:8px;align-items:center;justify-content:space-between;width:328px}.sui-datepicker__range-band{position:absolute;inset:0;background:var(--sui-primary-alpha-10, rgba(250, 115, 25, .1019607843));pointer-events:none;z-index:0}.sui-datepicker__range-band--round-left{left:calc(var(--sui-band-start) * var(--sui-day-step, 48px));border-top-left-radius:var(--sui-radius-8, 8px);border-bottom-left-radius:var(--sui-radius-8, 8px)}.sui-datepicker__range-band--round-right{right:calc((6 - var(--sui-band-end)) * var(--sui-day-step, 48px));border-top-right-radius:var(--sui-radius-8, 8px);border-bottom-right-radius:var(--sui-radius-8, 8px)}.sui-datepicker__day-row sui-day-cell{position:relative;z-index:1}.sui-datepicker__footer{display:flex;align-items:center;gap:16px;padding:16px;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb)}:host([data-sui-mode=range]) .sui-datepicker__footer{padding:16px 16px 16px 24px}.sui-datepicker__range-hint{flex:1 0 0;min-width:0;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-datepicker__footer-actions{display:flex;gap:16px;align-items:center}:host(:not([data-sui-mode=range])) .sui-datepicker__footer-actions{flex:1 0 0;min-width:0}:host(:not([data-sui-mode=range])) .sui-datepicker__footer-actions sui-button{flex:1 0 0;min-width:0}:host([data-sui-mode=range]) .sui-datepicker__footer-actions{flex-shrink:0;margin-left:auto}:host([data-sui-mode=range]) .sui-datepicker__footer-actions sui-button{width:108px}@media(max-width:767px){.sui-datepicker__panel--range{width:calc(100vw - 32px);flex-direction:column}.sui-datepicker__presets{flex-direction:row;overflow-x:auto;width:100%;border-right:none;border-bottom:1px solid var(--sui-stroke-soft-200, #ebebeb);padding:12px 16px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}.sui-datepicker__presets sui-period-range{width:auto;flex-shrink:0;scroll-snap-align:start}.sui-datepicker__calendar{padding-left:12px;padding-right:12px;max-width:none}.sui-datepicker__day-labels,.sui-datepicker__day-grid,.sui-datepicker__day-row{--sui-day-step: 44px;width:304px;max-width:304px;gap:4px}}\n"] }]
|
|
6847
6852
|
}], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], calendars: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendars", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], markedDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "markedDates", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onDocPointerDown: [{
|
|
6848
6853
|
type: HostListener,
|
|
6849
6854
|
args: ['document:pointerdown', ['$event']]
|
|
@@ -9255,6 +9260,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
9255
9260
|
* @input required: boolean — Muestra asterisco rojo en el label
|
|
9256
9261
|
* @input tooltip: string | null — Tooltip en ícono info del label
|
|
9257
9262
|
* @input hint: string | null — Mensaje de ayuda debajo del field
|
|
9263
|
+
* @input hintIcon: string | null — Icono Remix del hint neutral (ej. 'information-fill',
|
|
9264
|
+
* como en el set de Figma 266:5251). null (default) = sin icono. No afecta el
|
|
9265
|
+
* estado error (sui-form-hint conserva su icono default por variant).
|
|
9258
9266
|
* @input error: boolean — Activa borde rojo + muestra errorMessage
|
|
9259
9267
|
* @input errorMessage: string | null — Mensaje de error
|
|
9260
9268
|
*
|
|
@@ -9311,6 +9319,15 @@ class SuiInput {
|
|
|
9311
9319
|
errorMessage = input(null, ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
|
|
9312
9320
|
label = input(null, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
9313
9321
|
hint = input(null, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
9322
|
+
/**
|
|
9323
|
+
* Icono Remix del hint neutral (ej. 'information-fill' ⓘ como en el set de
|
|
9324
|
+
* Figma). null (default) = sin icono — comportamiento previo. Aditivo: en
|
|
9325
|
+
* estado error NO aplica (el hint de error mantiene su icono default).
|
|
9326
|
+
*/
|
|
9327
|
+
hintIcon = input(null, ...(ngDevMode ? [{ debugName: "hintIcon" }] : /* istanbul ignore next */ []));
|
|
9328
|
+
/** Icon efectivo para sui-form-hint: solo aplica al hint neutral. En error se
|
|
9329
|
+
pasa undefined → sui-form-hint usa su default por variant (information-fill). */
|
|
9330
|
+
_resolvedHintIcon = computed(() => this.error() ? undefined : (this.hintIcon() ?? undefined), ...(ngDevMode ? [{ debugName: "_resolvedHintIcon" }] : /* istanbul ignore next */ []));
|
|
9314
9331
|
autocomplete = input(null, ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
|
|
9315
9332
|
// ── New label inputs (additive — does NOT break existing API) ────────────
|
|
9316
9333
|
/** Texto secundario del label (ej. "Optional", "Required") */
|
|
@@ -9876,13 +9893,13 @@ class SuiInput {
|
|
|
9876
9893
|
this._disabledByForm.set(isDisabled);
|
|
9877
9894
|
}
|
|
9878
9895
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9879
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiInput, isStandalone: true, selector: "sui-input", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, paste: { classPropertyName: "paste", publicName: "paste", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, leadingDivider: { classPropertyName: "leadingDivider", publicName: "leadingDivider", isSignal: true, isRequired: false, transformFunction: null }, trailingDivider: { classPropertyName: "trailingDivider", publicName: "trailingDivider", isSignal: true, isRequired: false, transformFunction: null }, leadingControl: { classPropertyName: "leadingControl", publicName: "leadingControl", isSignal: true, isRequired: false, transformFunction: null }, trailingControl: { classPropertyName: "trailingControl", publicName: "trailingControl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:pointerdown": "onDocumentTap($event)", "document:touchstart": "onDocumentTap($event)", "document:mousedown": "onDocumentTap($event)" }, properties: { "attr.data-sui-size": "size()", "attr.data-sui-type": "type()", "attr.data-sui-error": "error() ? \"\" : null", "attr.data-sui-disabled": "isDisabled() ? \"\" : null", "attr.data-sui-readonly": "readonly() ? \"\" : null", "attr.data-sui-leading-divider": "_hasLeadingDivider() ? \"\" : null", "attr.data-sui-trailing-divider": "_hasTrailingDivider() ? \"\" : null", "attr.data-sui-leading-control": "leadingControl() ? \"\" : null", "attr.data-sui-trailing-control": "trailingControl() ? \"\" : null" } }, providers: [
|
|
9896
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiInput, isStandalone: true, selector: "sui-input", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, hintIcon: { classPropertyName: "hintIcon", publicName: "hintIcon", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, paste: { classPropertyName: "paste", publicName: "paste", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, leadingDivider: { classPropertyName: "leadingDivider", publicName: "leadingDivider", isSignal: true, isRequired: false, transformFunction: null }, trailingDivider: { classPropertyName: "trailingDivider", publicName: "trailingDivider", isSignal: true, isRequired: false, transformFunction: null }, leadingControl: { classPropertyName: "leadingControl", publicName: "leadingControl", isSignal: true, isRequired: false, transformFunction: null }, trailingControl: { classPropertyName: "trailingControl", publicName: "trailingControl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:pointerdown": "onDocumentTap($event)", "document:touchstart": "onDocumentTap($event)", "document:mousedown": "onDocumentTap($event)" }, properties: { "attr.data-sui-size": "size()", "attr.data-sui-type": "type()", "attr.data-sui-error": "error() ? \"\" : null", "attr.data-sui-disabled": "isDisabled() ? \"\" : null", "attr.data-sui-readonly": "readonly() ? \"\" : null", "attr.data-sui-leading-divider": "_hasLeadingDivider() ? \"\" : null", "attr.data-sui-trailing-divider": "_hasTrailingDivider() ? \"\" : null", "attr.data-sui-leading-control": "leadingControl() ? \"\" : null", "attr.data-sui-trailing-control": "trailingControl() ? \"\" : null" } }, providers: [
|
|
9880
9897
|
{
|
|
9881
9898
|
provide: NG_VALUE_ACCESSOR,
|
|
9882
9899
|
useExisting: forwardRef(() => SuiInput),
|
|
9883
9900
|
multi: true,
|
|
9884
9901
|
},
|
|
9885
|
-
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"size()\"\n class=\"sui-input__label-host\"\n />\n}\n\n<div\n class=\"sui-input__field\"\n [class.sui-input__field--error]=\"error()\"\n [class.sui-input__field--disabled]=\"isDisabled()\"\n [class.sui-input__field--readonly]=\"readonly()\"\n [class.sui-input__field--split]=\"_hasLeadingDivider() || _hasTrailingDivider()\"\n [class.sui-input__field--split-leading]=\"_hasLeadingDivider()\"\n [class.sui-input__field--split-trailing]=\"_hasTrailingDivider()\"\n [class.sui-input__field--button]=\"type() === 'button'\"\n>\n <!--\n Split-field con divisor vertical (gen\u00E9rico por lado):\n - trailing (Figma node 332:1667 \"Button\"): acci\u00F3n a la derecha + divisor\n border-right. `type='button'` lo activa solo.\n - leading (Figma node 313:10267 \"Phone\"): afijo interactivo a la izquierda\n (ej. country select) + divisor border-left.\n El input + \u00EDconos van en la zona interna `.sui-input__inner`, que lleva el\n padding y el/los border(s) de divisor. Los `[data-slot=start/end]` quedan\n flush a su lado como zonas de afijo. Para los types sin divisor,\n `.sui-input__inner` es transparente (display: contents) y el layout es el de\n siempre.\n -->\n\n <!-- ng-content start slot \u2014 afijo leading (flush cuando es control/divisor) -->\n <ng-content select=\"[data-slot=start]\" />\n\n <div class=\"sui-input__inner\">\n <!-- Built-in icon slot (left) -->\n @if (icon() && iconPosition() === 'left') {\n <span class=\"sui-input__icon sui-input__icon--left\">\n <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n </span>\n }\n\n <!-- Prefix label (S/, $, %) -->\n @if (prefix()) {\n <span class=\"sui-input__prefix\">{{ prefix() }}</span>\n }\n\n <input\n #inputEl\n class=\"sui-input__control\"\n [type]=\"nativeType()\"\n [attr.inputmode]=\"inputMode()\"\n [value]=\"\n type() === 'amount'\n ? displayAmountValue()\n : type() === 'card'\n ? displayCardValue()\n : value()\n \"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"type() === 'card' ? (maxlength() ?? 19) : maxlength()\"\n [attr.min]=\"type() === 'number' ? min() : null\"\n [attr.max]=\"type() === 'number' ? max() : null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n (keydown)=\"onKeydown($event)\"\n (paste)=\"onPaste($event)\"\n />\n </div>\n\n <!-- ng-content end slot (backward compat) -->\n <ng-content select=\"[data-slot=end]\" />\n\n <!-- Clear button -->\n @if (showClear() && value() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"sui-input__clear\"\n aria-label=\"Limpiar\"\n (click)=\"clearValue()\"\n >\n <sui-icon name=\"close-circle-line\" [size]=\"16\" />\n </button>\n }\n\n <!-- Password toggle button -->\n @if (type() === 'password-toggle' && !isDisabled()) {\n <button\n type=\"button\"\n class=\"sui-input__eye\"\n [attr.aria-label]=\"showPassword() ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n (click)=\"togglePassword()\"\n >\n <sui-icon [name]=\"showPassword() ? 'eye-off-line' : 'eye-line'\" [size]=\"16\" />\n </button>\n }\n\n <!-- Built-in icon slot (right) -->\n @if (icon() && iconPosition() === 'right') {\n <span class=\"sui-input__icon sui-input__icon--right\">\n <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n </span>\n }\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n class=\"sui-input__hint-host\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-input__label-host{display:block;margin-bottom:4px}.sui-input__field{display:flex;align-items:center;width:100%;box-sizing:border-box;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-input__field{gap:6px;padding:5px 6px 5px 8px;border-radius:var(--sui-radius-8);min-height:32px}:host([data-sui-size=small]) .sui-input__field{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8);min-height:36px}:host([data-sui-size=medium]) .sui-input__field,:host(:not([data-sui-size])) .sui-input__field{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10);min-height:40px}.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):hover{border-color:var(--sui-stroke-sub-300)}.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):focus-within{border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-input__field--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-input__field--error:not(.sui-input__field--disabled):hover{border-color:var(--sui-state-error-base)}.sui-input__field--error:not(.sui-input__field--disabled):focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10)}.sui-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-input__field--readonly{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200);box-shadow:none}.sui-input__field ::ng-deep [data-slot=start],.sui-input__field ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);pointer-events:none}:host([data-sui-leading-control]) .sui-input__field ::ng-deep [data-slot=start],:host([data-sui-trailing-control]) .sui-input__field ::ng-deep [data-slot=end]{width:auto;height:auto;align-self:stretch;pointer-events:auto}.sui-input__inner{display:contents}.sui-input__field--split{align-items:stretch;overflow:hidden;padding:0!important;gap:0!important}.sui-input__field--split .sui-input__inner{display:flex;flex:1 1 auto;min-width:0;align-items:center;box-sizing:border-box}:host([data-sui-size=xsmall]) .sui-input__field--split .sui-input__inner{gap:6px;padding:5px 6px 5px 8px}:host([data-sui-size=small]) .sui-input__field--split .sui-input__inner{gap:8px;padding:7px 8px 7px 10px}:host([data-sui-size=medium]) .sui-input__field--split .sui-input__inner,:host(:not([data-sui-size])) .sui-input__field--split .sui-input__inner{gap:8px;padding:9px 10px 9px 12px}.sui-input__field--split-trailing .sui-input__inner{border-right:1px solid var(--sui-stroke-soft-200)}.sui-input__field--split-trailing.sui-input__field--error .sui-input__inner{border-right-color:var(--sui-state-error-base)}.sui-input__field--split-trailing.sui-input__field--disabled .sui-input__inner{border-right-color:transparent}.sui-input__field--split-trailing ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:auto;height:auto;align-self:stretch;color:var(--sui-icon-sub-600);pointer-events:auto}:host([data-sui-size=xsmall]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:6px}:host([data-sui-size=small]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:8px}:host([data-sui-size=medium]) .sui-input__field--split-trailing ::ng-deep [data-slot=end],:host(:not([data-sui-size])) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:10px}.sui-input__field--split-leading .sui-input__inner{border-left:1px solid var(--sui-stroke-soft-200)}.sui-input__field--split-leading.sui-input__field--error .sui-input__inner{border-left-color:var(--sui-state-error-base)}.sui-input__field--split-leading.sui-input__field--disabled .sui-input__inner{border-left-color:transparent}:host(:not([data-sui-leading-control])[data-sui-size=xsmall]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:6px 6px 6px 8px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=small]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:8px 8px 8px 10px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=medium]) .sui-input__field--split-leading ::ng-deep [data-slot=start],:host(:not([data-sui-leading-control]):not([data-sui-size])) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:10px 8px 10px 10px;box-sizing:content-box}.sui-input__prefix{flex-shrink:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-sub-600);-webkit-user-select:none;user-select:none;pointer-events:none}.sui-input__icon{display:inline-flex;align-items:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);pointer-events:none}:host([data-sui-disabled]) .sui-input__icon{color:var(--sui-icon-disabled-300)}.sui-input__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;min-height:0;min-width:0;padding:0;border:none;background:transparent;color:var(--sui-icon-sub-600);cursor:pointer;opacity:.7;line-height:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-input__clear:hover{opacity:1;color:var(--sui-text-strong-950)}.sui-input__clear:focus{outline:none}.sui-input__eye{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;min-height:0;min-width:0;padding:0;border:none;background:transparent;color:var(--sui-icon-sub-600);cursor:pointer;line-height:0;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-input__eye:hover{color:var(--sui-text-strong-950)}.sui-input__eye:focus{outline:none}.sui-input__control{flex:1 1 auto;min-width:0;border:none;outline:none;background:transparent;padding:0;margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-strong-950);-webkit-appearance:none;appearance:none;box-sizing:border-box}@media(max-width:767px){.sui-input__control{font-size:16px}}.sui-input__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-input__control:disabled{color:var(--sui-text-disabled-300);cursor:not-allowed;-webkit-text-fill-color:var(--sui-text-disabled-300)}.sui-input__control[readonly]{color:var(--sui-text-sub-600);cursor:default}.sui-input__control:focus{outline:none}.sui-input__control[type=number]{-moz-appearance:textfield}.sui-input__control[type=number]::-webkit-inner-spin-button,.sui-input__control[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.sui-input__control[type=search]::-webkit-search-decoration,.sui-input__control[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}.sui-input__hint-host{display:block;margin-top:4px}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiFormLabel, selector: "sui-form-label", inputs: ["label", "sublabel", "required", "tooltip", "link", "size", "disabled", "for"], outputs: ["linkClick"] }, { kind: "component", type: SuiFormHint, selector: "sui-form-hint", inputs: ["message", "variant", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9902
|
+
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"size()\"\n class=\"sui-input__label-host\"\n />\n}\n\n<div\n class=\"sui-input__field\"\n [class.sui-input__field--error]=\"error()\"\n [class.sui-input__field--disabled]=\"isDisabled()\"\n [class.sui-input__field--readonly]=\"readonly()\"\n [class.sui-input__field--split]=\"_hasLeadingDivider() || _hasTrailingDivider()\"\n [class.sui-input__field--split-leading]=\"_hasLeadingDivider()\"\n [class.sui-input__field--split-trailing]=\"_hasTrailingDivider()\"\n [class.sui-input__field--button]=\"type() === 'button'\"\n>\n <!--\n Split-field con divisor vertical (gen\u00E9rico por lado):\n - trailing (Figma node 332:1667 \"Button\"): acci\u00F3n a la derecha + divisor\n border-right. `type='button'` lo activa solo.\n - leading (Figma node 313:10267 \"Phone\"): afijo interactivo a la izquierda\n (ej. country select) + divisor border-left.\n El input + \u00EDconos van en la zona interna `.sui-input__inner`, que lleva el\n padding y el/los border(s) de divisor. Los `[data-slot=start/end]` quedan\n flush a su lado como zonas de afijo. Para los types sin divisor,\n `.sui-input__inner` es transparente (display: contents) y el layout es el de\n siempre.\n -->\n\n <!-- ng-content start slot \u2014 afijo leading (flush cuando es control/divisor) -->\n <ng-content select=\"[data-slot=start]\" />\n\n <div class=\"sui-input__inner\">\n <!-- Built-in icon slot (left) -->\n @if (icon() && iconPosition() === 'left') {\n <span class=\"sui-input__icon sui-input__icon--left\">\n <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n </span>\n }\n\n <!-- Prefix label (S/, $, %) -->\n @if (prefix()) {\n <span class=\"sui-input__prefix\">{{ prefix() }}</span>\n }\n\n <input\n #inputEl\n class=\"sui-input__control\"\n [type]=\"nativeType()\"\n [attr.inputmode]=\"inputMode()\"\n [value]=\"\n type() === 'amount'\n ? displayAmountValue()\n : type() === 'card'\n ? displayCardValue()\n : value()\n \"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"type() === 'card' ? (maxlength() ?? 19) : maxlength()\"\n [attr.min]=\"type() === 'number' ? min() : null\"\n [attr.max]=\"type() === 'number' ? max() : null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n (keydown)=\"onKeydown($event)\"\n (paste)=\"onPaste($event)\"\n />\n </div>\n\n <!-- ng-content end slot (backward compat) -->\n <ng-content select=\"[data-slot=end]\" />\n\n <!-- Clear button -->\n @if (showClear() && value() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"sui-input__clear\"\n aria-label=\"Limpiar\"\n (click)=\"clearValue()\"\n >\n <sui-icon name=\"close-circle-line\" [size]=\"16\" />\n </button>\n }\n\n <!-- Password toggle button -->\n @if (type() === 'password-toggle' && !isDisabled()) {\n <button\n type=\"button\"\n class=\"sui-input__eye\"\n [attr.aria-label]=\"showPassword() ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n (click)=\"togglePassword()\"\n >\n <sui-icon [name]=\"showPassword() ? 'eye-off-line' : 'eye-line'\" [size]=\"20\" />\n </button>\n }\n\n <!-- Built-in icon slot (right) -->\n @if (icon() && iconPosition() === 'right') {\n <span class=\"sui-input__icon sui-input__icon--right\">\n <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n </span>\n }\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n [icon]=\"_resolvedHintIcon()\"\n class=\"sui-input__hint-host\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-input__label-host{display:block;margin-bottom:4px}.sui-input__field{display:flex;align-items:center;width:100%;box-sizing:border-box;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-input__field{gap:6px;padding:5px 6px 5px 8px;border-radius:var(--sui-radius-8);min-height:32px}:host([data-sui-size=small]) .sui-input__field{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8);min-height:36px}:host([data-sui-size=medium]) .sui-input__field,:host(:not([data-sui-size])) .sui-input__field{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10);min-height:40px}.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):hover{border-color:var(--sui-stroke-sub-300)}.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):focus-within{border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-input__field--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-input__field--error:not(.sui-input__field--disabled):hover{border-color:var(--sui-state-error-base)}.sui-input__field--error:not(.sui-input__field--disabled):focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10)}.sui-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-input__field--readonly{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200);box-shadow:none}.sui-input__field ::ng-deep [data-slot=start],.sui-input__field ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);pointer-events:none}:host([data-sui-leading-control]) .sui-input__field ::ng-deep [data-slot=start],:host([data-sui-trailing-control]) .sui-input__field ::ng-deep [data-slot=end]{width:auto;height:auto;align-self:stretch;pointer-events:auto}.sui-input__inner{display:contents}.sui-input__field--split{align-items:stretch;overflow:hidden;padding:0!important;gap:0!important}.sui-input__field--split .sui-input__inner{display:flex;flex:1 1 auto;min-width:0;align-items:center;box-sizing:border-box}:host([data-sui-size=xsmall]) .sui-input__field--split .sui-input__inner{gap:6px;padding:5px 6px 5px 8px}:host([data-sui-size=small]) .sui-input__field--split .sui-input__inner{gap:8px;padding:7px 8px 7px 10px}:host([data-sui-size=medium]) .sui-input__field--split .sui-input__inner,:host(:not([data-sui-size])) .sui-input__field--split .sui-input__inner{gap:8px;padding:9px 10px 9px 12px}.sui-input__field--split-trailing .sui-input__inner{border-right:1px solid var(--sui-stroke-soft-200)}.sui-input__field--split-trailing.sui-input__field--error .sui-input__inner{border-right-color:var(--sui-state-error-base)}.sui-input__field--split-trailing.sui-input__field--disabled .sui-input__inner{border-right-color:transparent}.sui-input__field--split-trailing ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:auto;height:auto;align-self:stretch;color:var(--sui-icon-sub-600);pointer-events:auto}:host([data-sui-size=xsmall]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:6px}:host([data-sui-size=small]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:8px}:host([data-sui-size=medium]) .sui-input__field--split-trailing ::ng-deep [data-slot=end],:host(:not([data-sui-size])) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:10px}.sui-input__field--split-leading .sui-input__inner{border-left:1px solid var(--sui-stroke-soft-200)}.sui-input__field--split-leading.sui-input__field--error .sui-input__inner{border-left-color:var(--sui-state-error-base)}.sui-input__field--split-leading.sui-input__field--disabled .sui-input__inner{border-left-color:transparent}:host(:not([data-sui-leading-control])[data-sui-size=xsmall]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:6px 6px 6px 8px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=small]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:8px 8px 8px 10px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=medium]) .sui-input__field--split-leading ::ng-deep [data-slot=start],:host(:not([data-sui-leading-control]):not([data-sui-size])) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:10px 8px 10px 10px;box-sizing:content-box}.sui-input__prefix{flex-shrink:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-sub-600);-webkit-user-select:none;user-select:none;pointer-events:none}.sui-input__icon{display:inline-flex;align-items:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);pointer-events:none}:host([data-sui-disabled]) .sui-input__icon{color:var(--sui-icon-disabled-300)}.sui-input__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;min-height:0;min-width:0;padding:0;border:none;background:transparent;color:var(--sui-icon-sub-600);cursor:pointer;opacity:.7;line-height:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-input__clear:hover{opacity:1;color:var(--sui-text-strong-950)}.sui-input__clear:focus{outline:none}.sui-input__eye{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;min-height:0;min-width:0;padding:0;border:none;background:transparent;color:var(--sui-icon-sub-600);cursor:pointer;line-height:0;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-input__eye:hover{color:var(--sui-text-strong-950)}.sui-input__eye:focus{outline:none}.sui-input__control{flex:1 1 auto;min-width:0;border:none;outline:none;background:transparent;padding:0;margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-strong-950);-webkit-appearance:none;appearance:none;box-sizing:border-box}@media(max-width:767px){.sui-input__control{font-size:16px}}.sui-input__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-input__control:disabled{color:var(--sui-text-disabled-300);cursor:not-allowed;-webkit-text-fill-color:var(--sui-text-disabled-300)}.sui-input__control[readonly]{color:var(--sui-text-sub-600);cursor:default}.sui-input__control:focus{outline:none}.sui-input__control[type=number]{-moz-appearance:textfield}.sui-input__control[type=number]::-webkit-inner-spin-button,.sui-input__control[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.sui-input__control[type=search]::-webkit-search-decoration,.sui-input__control[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}.sui-input__hint-host{display:block;margin-top:4px}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiFormLabel, selector: "sui-form-label", inputs: ["label", "sublabel", "required", "tooltip", "link", "size", "disabled", "for"], outputs: ["linkClick"] }, { kind: "component", type: SuiFormHint, selector: "sui-form-hint", inputs: ["message", "variant", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9886
9903
|
}
|
|
9887
9904
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiInput, decorators: [{
|
|
9888
9905
|
type: Component,
|
|
@@ -9908,8 +9925,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
9908
9925
|
decorativo. */
|
|
9909
9926
|
'[attr.data-sui-leading-control]': 'leadingControl() ? "" : null',
|
|
9910
9927
|
'[attr.data-sui-trailing-control]': 'trailingControl() ? "" : null',
|
|
9911
|
-
}, template: "@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"size()\"\n class=\"sui-input__label-host\"\n />\n}\n\n<div\n class=\"sui-input__field\"\n [class.sui-input__field--error]=\"error()\"\n [class.sui-input__field--disabled]=\"isDisabled()\"\n [class.sui-input__field--readonly]=\"readonly()\"\n [class.sui-input__field--split]=\"_hasLeadingDivider() || _hasTrailingDivider()\"\n [class.sui-input__field--split-leading]=\"_hasLeadingDivider()\"\n [class.sui-input__field--split-trailing]=\"_hasTrailingDivider()\"\n [class.sui-input__field--button]=\"type() === 'button'\"\n>\n <!--\n Split-field con divisor vertical (gen\u00E9rico por lado):\n - trailing (Figma node 332:1667 \"Button\"): acci\u00F3n a la derecha + divisor\n border-right. `type='button'` lo activa solo.\n - leading (Figma node 313:10267 \"Phone\"): afijo interactivo a la izquierda\n (ej. country select) + divisor border-left.\n El input + \u00EDconos van en la zona interna `.sui-input__inner`, que lleva el\n padding y el/los border(s) de divisor. Los `[data-slot=start/end]` quedan\n flush a su lado como zonas de afijo. Para los types sin divisor,\n `.sui-input__inner` es transparente (display: contents) y el layout es el de\n siempre.\n -->\n\n <!-- ng-content start slot \u2014 afijo leading (flush cuando es control/divisor) -->\n <ng-content select=\"[data-slot=start]\" />\n\n <div class=\"sui-input__inner\">\n <!-- Built-in icon slot (left) -->\n @if (icon() && iconPosition() === 'left') {\n <span class=\"sui-input__icon sui-input__icon--left\">\n <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n </span>\n }\n\n <!-- Prefix label (S/, $, %) -->\n @if (prefix()) {\n <span class=\"sui-input__prefix\">{{ prefix() }}</span>\n }\n\n <input\n #inputEl\n class=\"sui-input__control\"\n [type]=\"nativeType()\"\n [attr.inputmode]=\"inputMode()\"\n [value]=\"\n type() === 'amount'\n ? displayAmountValue()\n : type() === 'card'\n ? displayCardValue()\n : value()\n \"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"type() === 'card' ? (maxlength() ?? 19) : maxlength()\"\n [attr.min]=\"type() === 'number' ? min() : null\"\n [attr.max]=\"type() === 'number' ? max() : null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n (keydown)=\"onKeydown($event)\"\n (paste)=\"onPaste($event)\"\n />\n </div>\n\n <!-- ng-content end slot (backward compat) -->\n <ng-content select=\"[data-slot=end]\" />\n\n <!-- Clear button -->\n @if (showClear() && value() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"sui-input__clear\"\n aria-label=\"Limpiar\"\n (click)=\"clearValue()\"\n >\n <sui-icon name=\"close-circle-line\" [size]=\"16\" />\n </button>\n }\n\n <!-- Password toggle button -->\n @if (type() === 'password-toggle' && !isDisabled()) {\n <button\n type=\"button\"\n class=\"sui-input__eye\"\n [attr.aria-label]=\"showPassword() ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n (click)=\"togglePassword()\"\n >\n <sui-icon [name]=\"showPassword() ? 'eye-off-line' : 'eye-line'\" [size]=\"16\" />\n </button>\n }\n\n <!-- Built-in icon slot (right) -->\n @if (icon() && iconPosition() === 'right') {\n <span class=\"sui-input__icon sui-input__icon--right\">\n <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n </span>\n }\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n class=\"sui-input__hint-host\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-input__label-host{display:block;margin-bottom:4px}.sui-input__field{display:flex;align-items:center;width:100%;box-sizing:border-box;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-input__field{gap:6px;padding:5px 6px 5px 8px;border-radius:var(--sui-radius-8);min-height:32px}:host([data-sui-size=small]) .sui-input__field{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8);min-height:36px}:host([data-sui-size=medium]) .sui-input__field,:host(:not([data-sui-size])) .sui-input__field{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10);min-height:40px}.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):hover{border-color:var(--sui-stroke-sub-300)}.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):focus-within{border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-input__field--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-input__field--error:not(.sui-input__field--disabled):hover{border-color:var(--sui-state-error-base)}.sui-input__field--error:not(.sui-input__field--disabled):focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10)}.sui-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-input__field--readonly{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200);box-shadow:none}.sui-input__field ::ng-deep [data-slot=start],.sui-input__field ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);pointer-events:none}:host([data-sui-leading-control]) .sui-input__field ::ng-deep [data-slot=start],:host([data-sui-trailing-control]) .sui-input__field ::ng-deep [data-slot=end]{width:auto;height:auto;align-self:stretch;pointer-events:auto}.sui-input__inner{display:contents}.sui-input__field--split{align-items:stretch;overflow:hidden;padding:0!important;gap:0!important}.sui-input__field--split .sui-input__inner{display:flex;flex:1 1 auto;min-width:0;align-items:center;box-sizing:border-box}:host([data-sui-size=xsmall]) .sui-input__field--split .sui-input__inner{gap:6px;padding:5px 6px 5px 8px}:host([data-sui-size=small]) .sui-input__field--split .sui-input__inner{gap:8px;padding:7px 8px 7px 10px}:host([data-sui-size=medium]) .sui-input__field--split .sui-input__inner,:host(:not([data-sui-size])) .sui-input__field--split .sui-input__inner{gap:8px;padding:9px 10px 9px 12px}.sui-input__field--split-trailing .sui-input__inner{border-right:1px solid var(--sui-stroke-soft-200)}.sui-input__field--split-trailing.sui-input__field--error .sui-input__inner{border-right-color:var(--sui-state-error-base)}.sui-input__field--split-trailing.sui-input__field--disabled .sui-input__inner{border-right-color:transparent}.sui-input__field--split-trailing ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:auto;height:auto;align-self:stretch;color:var(--sui-icon-sub-600);pointer-events:auto}:host([data-sui-size=xsmall]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:6px}:host([data-sui-size=small]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:8px}:host([data-sui-size=medium]) .sui-input__field--split-trailing ::ng-deep [data-slot=end],:host(:not([data-sui-size])) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:10px}.sui-input__field--split-leading .sui-input__inner{border-left:1px solid var(--sui-stroke-soft-200)}.sui-input__field--split-leading.sui-input__field--error .sui-input__inner{border-left-color:var(--sui-state-error-base)}.sui-input__field--split-leading.sui-input__field--disabled .sui-input__inner{border-left-color:transparent}:host(:not([data-sui-leading-control])[data-sui-size=xsmall]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:6px 6px 6px 8px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=small]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:8px 8px 8px 10px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=medium]) .sui-input__field--split-leading ::ng-deep [data-slot=start],:host(:not([data-sui-leading-control]):not([data-sui-size])) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:10px 8px 10px 10px;box-sizing:content-box}.sui-input__prefix{flex-shrink:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-sub-600);-webkit-user-select:none;user-select:none;pointer-events:none}.sui-input__icon{display:inline-flex;align-items:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);pointer-events:none}:host([data-sui-disabled]) .sui-input__icon{color:var(--sui-icon-disabled-300)}.sui-input__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;min-height:0;min-width:0;padding:0;border:none;background:transparent;color:var(--sui-icon-sub-600);cursor:pointer;opacity:.7;line-height:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-input__clear:hover{opacity:1;color:var(--sui-text-strong-950)}.sui-input__clear:focus{outline:none}.sui-input__eye{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;min-height:0;min-width:0;padding:0;border:none;background:transparent;color:var(--sui-icon-sub-600);cursor:pointer;line-height:0;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-input__eye:hover{color:var(--sui-text-strong-950)}.sui-input__eye:focus{outline:none}.sui-input__control{flex:1 1 auto;min-width:0;border:none;outline:none;background:transparent;padding:0;margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-strong-950);-webkit-appearance:none;appearance:none;box-sizing:border-box}@media(max-width:767px){.sui-input__control{font-size:16px}}.sui-input__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-input__control:disabled{color:var(--sui-text-disabled-300);cursor:not-allowed;-webkit-text-fill-color:var(--sui-text-disabled-300)}.sui-input__control[readonly]{color:var(--sui-text-sub-600);cursor:default}.sui-input__control:focus{outline:none}.sui-input__control[type=number]{-moz-appearance:textfield}.sui-input__control[type=number]::-webkit-inner-spin-button,.sui-input__control[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.sui-input__control[type=search]::-webkit-search-decoration,.sui-input__control[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}.sui-input__hint-host{display:block;margin-top:4px}\n"] }]
|
|
9912
|
-
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], paste: [{ type: i0.Input, args: [{ isSignal: true, alias: "paste", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], closeOnOutsideClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsideClick", required: false }] }], leadingDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingDivider", required: false }] }], trailingDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingDivider", required: false }] }], leadingControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingControl", required: false }] }], trailingControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingControl", required: false }] }], inputEl: [{
|
|
9928
|
+
}, template: "@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"size()\"\n class=\"sui-input__label-host\"\n />\n}\n\n<div\n class=\"sui-input__field\"\n [class.sui-input__field--error]=\"error()\"\n [class.sui-input__field--disabled]=\"isDisabled()\"\n [class.sui-input__field--readonly]=\"readonly()\"\n [class.sui-input__field--split]=\"_hasLeadingDivider() || _hasTrailingDivider()\"\n [class.sui-input__field--split-leading]=\"_hasLeadingDivider()\"\n [class.sui-input__field--split-trailing]=\"_hasTrailingDivider()\"\n [class.sui-input__field--button]=\"type() === 'button'\"\n>\n <!--\n Split-field con divisor vertical (gen\u00E9rico por lado):\n - trailing (Figma node 332:1667 \"Button\"): acci\u00F3n a la derecha + divisor\n border-right. `type='button'` lo activa solo.\n - leading (Figma node 313:10267 \"Phone\"): afijo interactivo a la izquierda\n (ej. country select) + divisor border-left.\n El input + \u00EDconos van en la zona interna `.sui-input__inner`, que lleva el\n padding y el/los border(s) de divisor. Los `[data-slot=start/end]` quedan\n flush a su lado como zonas de afijo. Para los types sin divisor,\n `.sui-input__inner` es transparente (display: contents) y el layout es el de\n siempre.\n -->\n\n <!-- ng-content start slot \u2014 afijo leading (flush cuando es control/divisor) -->\n <ng-content select=\"[data-slot=start]\" />\n\n <div class=\"sui-input__inner\">\n <!-- Built-in icon slot (left) -->\n @if (icon() && iconPosition() === 'left') {\n <span class=\"sui-input__icon sui-input__icon--left\">\n <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n </span>\n }\n\n <!-- Prefix label (S/, $, %) -->\n @if (prefix()) {\n <span class=\"sui-input__prefix\">{{ prefix() }}</span>\n }\n\n <input\n #inputEl\n class=\"sui-input__control\"\n [type]=\"nativeType()\"\n [attr.inputmode]=\"inputMode()\"\n [value]=\"\n type() === 'amount'\n ? displayAmountValue()\n : type() === 'card'\n ? displayCardValue()\n : value()\n \"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"type() === 'card' ? (maxlength() ?? 19) : maxlength()\"\n [attr.min]=\"type() === 'number' ? min() : null\"\n [attr.max]=\"type() === 'number' ? max() : null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n (keydown)=\"onKeydown($event)\"\n (paste)=\"onPaste($event)\"\n />\n </div>\n\n <!-- ng-content end slot (backward compat) -->\n <ng-content select=\"[data-slot=end]\" />\n\n <!-- Clear button -->\n @if (showClear() && value() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"sui-input__clear\"\n aria-label=\"Limpiar\"\n (click)=\"clearValue()\"\n >\n <sui-icon name=\"close-circle-line\" [size]=\"16\" />\n </button>\n }\n\n <!-- Password toggle button -->\n @if (type() === 'password-toggle' && !isDisabled()) {\n <button\n type=\"button\"\n class=\"sui-input__eye\"\n [attr.aria-label]=\"showPassword() ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n (click)=\"togglePassword()\"\n >\n <sui-icon [name]=\"showPassword() ? 'eye-off-line' : 'eye-line'\" [size]=\"20\" />\n </button>\n }\n\n <!-- Built-in icon slot (right) -->\n @if (icon() && iconPosition() === 'right') {\n <span class=\"sui-input__icon sui-input__icon--right\">\n <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n </span>\n }\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n [icon]=\"_resolvedHintIcon()\"\n class=\"sui-input__hint-host\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-input__label-host{display:block;margin-bottom:4px}.sui-input__field{display:flex;align-items:center;width:100%;box-sizing:border-box;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-input__field{gap:6px;padding:5px 6px 5px 8px;border-radius:var(--sui-radius-8);min-height:32px}:host([data-sui-size=small]) .sui-input__field{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8);min-height:36px}:host([data-sui-size=medium]) .sui-input__field,:host(:not([data-sui-size])) .sui-input__field{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10);min-height:40px}.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):hover{border-color:var(--sui-stroke-sub-300)}.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):focus-within{border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-input__field--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-input__field--error:not(.sui-input__field--disabled):hover{border-color:var(--sui-state-error-base)}.sui-input__field--error:not(.sui-input__field--disabled):focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10)}.sui-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-input__field--readonly{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200);box-shadow:none}.sui-input__field ::ng-deep [data-slot=start],.sui-input__field ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);pointer-events:none}:host([data-sui-leading-control]) .sui-input__field ::ng-deep [data-slot=start],:host([data-sui-trailing-control]) .sui-input__field ::ng-deep [data-slot=end]{width:auto;height:auto;align-self:stretch;pointer-events:auto}.sui-input__inner{display:contents}.sui-input__field--split{align-items:stretch;overflow:hidden;padding:0!important;gap:0!important}.sui-input__field--split .sui-input__inner{display:flex;flex:1 1 auto;min-width:0;align-items:center;box-sizing:border-box}:host([data-sui-size=xsmall]) .sui-input__field--split .sui-input__inner{gap:6px;padding:5px 6px 5px 8px}:host([data-sui-size=small]) .sui-input__field--split .sui-input__inner{gap:8px;padding:7px 8px 7px 10px}:host([data-sui-size=medium]) .sui-input__field--split .sui-input__inner,:host(:not([data-sui-size])) .sui-input__field--split .sui-input__inner{gap:8px;padding:9px 10px 9px 12px}.sui-input__field--split-trailing .sui-input__inner{border-right:1px solid var(--sui-stroke-soft-200)}.sui-input__field--split-trailing.sui-input__field--error .sui-input__inner{border-right-color:var(--sui-state-error-base)}.sui-input__field--split-trailing.sui-input__field--disabled .sui-input__inner{border-right-color:transparent}.sui-input__field--split-trailing ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:auto;height:auto;align-self:stretch;color:var(--sui-icon-sub-600);pointer-events:auto}:host([data-sui-size=xsmall]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:6px}:host([data-sui-size=small]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:8px}:host([data-sui-size=medium]) .sui-input__field--split-trailing ::ng-deep [data-slot=end],:host(:not([data-sui-size])) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:10px}.sui-input__field--split-leading .sui-input__inner{border-left:1px solid var(--sui-stroke-soft-200)}.sui-input__field--split-leading.sui-input__field--error .sui-input__inner{border-left-color:var(--sui-state-error-base)}.sui-input__field--split-leading.sui-input__field--disabled .sui-input__inner{border-left-color:transparent}:host(:not([data-sui-leading-control])[data-sui-size=xsmall]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:6px 6px 6px 8px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=small]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:8px 8px 8px 10px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=medium]) .sui-input__field--split-leading ::ng-deep [data-slot=start],:host(:not([data-sui-leading-control]):not([data-sui-size])) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:10px 8px 10px 10px;box-sizing:content-box}.sui-input__prefix{flex-shrink:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-sub-600);-webkit-user-select:none;user-select:none;pointer-events:none}.sui-input__icon{display:inline-flex;align-items:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);pointer-events:none}:host([data-sui-disabled]) .sui-input__icon{color:var(--sui-icon-disabled-300)}.sui-input__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;min-height:0;min-width:0;padding:0;border:none;background:transparent;color:var(--sui-icon-sub-600);cursor:pointer;opacity:.7;line-height:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-input__clear:hover{opacity:1;color:var(--sui-text-strong-950)}.sui-input__clear:focus{outline:none}.sui-input__eye{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;min-height:0;min-width:0;padding:0;border:none;background:transparent;color:var(--sui-icon-sub-600);cursor:pointer;line-height:0;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-input__eye:hover{color:var(--sui-text-strong-950)}.sui-input__eye:focus{outline:none}.sui-input__control{flex:1 1 auto;min-width:0;border:none;outline:none;background:transparent;padding:0;margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-strong-950);-webkit-appearance:none;appearance:none;box-sizing:border-box}@media(max-width:767px){.sui-input__control{font-size:16px}}.sui-input__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-input__control:disabled{color:var(--sui-text-disabled-300);cursor:not-allowed;-webkit-text-fill-color:var(--sui-text-disabled-300)}.sui-input__control[readonly]{color:var(--sui-text-sub-600);cursor:default}.sui-input__control:focus{outline:none}.sui-input__control[type=number]{-moz-appearance:textfield}.sui-input__control[type=number]::-webkit-inner-spin-button,.sui-input__control[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.sui-input__control[type=search]::-webkit-search-decoration,.sui-input__control[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}.sui-input__hint-host{display:block;margin-top:4px}\n"] }]
|
|
9929
|
+
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], hintIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintIcon", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], paste: [{ type: i0.Input, args: [{ isSignal: true, alias: "paste", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], closeOnOutsideClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsideClick", required: false }] }], leadingDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingDivider", required: false }] }], trailingDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingDivider", required: false }] }], leadingControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingControl", required: false }] }], trailingControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingControl", required: false }] }], inputEl: [{
|
|
9913
9930
|
type: ViewChild,
|
|
9914
9931
|
args: ['inputEl']
|
|
9915
9932
|
}], onDocumentTap: [{
|
|
@@ -10088,7 +10105,7 @@ class SuiIntegrationSwitch {
|
|
|
10088
10105
|
useExisting: forwardRef(() => SuiIntegrationSwitch),
|
|
10089
10106
|
multi: true,
|
|
10090
10107
|
},
|
|
10091
|
-
], ngImport: i0, template: "<!-- Brand logo (circle 40 / 48 seg\u00FAn appearance) -->\n<div class=\"sui-integration-switch__brand\" aria-hidden=\"true\">\n <ng-content select=\"[sui-integration-brand]\">\n @if (brandIconSrc(); as src) {\n <img [src]=\"src\" alt=\"\" class=\"sui-integration-switch__brand-img\" />\n } @else if (brandIcon(); as icon) {\n <sui-icon [name]=\"icon\" [size]=\"appearance() === 'list' ? 32 : 24\" />\n }\n </ng-content>\n</div>\n\n<!-- Title + description block -->\n<div class=\"sui-integration-switch__text\">\n <div class=\"sui-integration-switch__title-row\">\n <span class=\"sui-integration-switch__title\">{{ title() }}</span>\n @if (badgeCfg(); as bcfg) {\n <sui-badge\n class=\"sui-integration-switch__badge\"\n [color]=\"bcfg.color ?? 'orange'\"\n [variant]=\"bcfg.variant ?? 'light'\"\n [size]=\"bcfg.size ?? 'small'\"\n >{{ bcfg.label }}</sui-badge>\n }\n </div>\n @if (description(); as desc) {\n <p class=\"sui-integration-switch__description\">{{ desc }}</p>\n }\n</div>\n\n<!-- Manage button (trailing en horizontal, full-width en vertical) -->\n@if (manageCfg(); as mcfg) {\n <button\n type=\"button\"\n class=\"sui-integration-switch__manage\"\n [attr.aria-label]=\"mcfg.label\"\n [disabled]=\"isDisabled()\"\n (click)=\"onManageClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon [name]=\"mcfg.icon\" [size]=\"20\" />\n <span class=\"sui-integration-switch__manage-label\">{{ mcfg.label }}</span>\n </button>\n}\n\n<!-- Switch (inline en horizontal \u00B7 absolute top-right en vertical) -->\n@if (showToggle()) {\n <sui-switch\n class=\"sui-integration-switch__toggle\"\n [checked]=\"effectiveActive()\"\n [disabled]=\"isDisabled()\"\n (checkedChange)=\"onSwitchChange($event)\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:flex;box-sizing:border-box;width:100%;font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-sui-type=horizontal]){flex-direction:row;align-items:center;gap:14px}:host([data-sui-type=vertical]){flex-direction:column;align-items:flex-start;gap:14px}:host([data-sui-appearance=card]){padding:16px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:12px;box-shadow:
|
|
10108
|
+
], ngImport: i0, template: "<!-- Brand logo (circle 40 / 48 seg\u00FAn appearance) -->\n<div class=\"sui-integration-switch__brand\" aria-hidden=\"true\">\n <ng-content select=\"[sui-integration-brand]\">\n @if (brandIconSrc(); as src) {\n <img [src]=\"src\" alt=\"\" class=\"sui-integration-switch__brand-img\" />\n } @else if (brandIcon(); as icon) {\n <sui-icon [name]=\"icon\" [size]=\"appearance() === 'list' ? 32 : 24\" />\n }\n </ng-content>\n</div>\n\n<!-- Title + description block -->\n<div class=\"sui-integration-switch__text\">\n <div class=\"sui-integration-switch__title-row\">\n <span class=\"sui-integration-switch__title\">{{ title() }}</span>\n @if (badgeCfg(); as bcfg) {\n <sui-badge\n class=\"sui-integration-switch__badge\"\n [color]=\"bcfg.color ?? 'orange'\"\n [variant]=\"bcfg.variant ?? 'light'\"\n [size]=\"bcfg.size ?? 'small'\"\n >{{ bcfg.label }}</sui-badge>\n }\n </div>\n @if (description(); as desc) {\n <p class=\"sui-integration-switch__description\">{{ desc }}</p>\n }\n</div>\n\n<!-- Manage button (trailing en horizontal, full-width en vertical) -->\n@if (manageCfg(); as mcfg) {\n <button\n type=\"button\"\n class=\"sui-integration-switch__manage\"\n [attr.aria-label]=\"mcfg.label\"\n [disabled]=\"isDisabled()\"\n (click)=\"onManageClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon [name]=\"mcfg.icon\" [size]=\"20\" />\n <span class=\"sui-integration-switch__manage-label\">{{ mcfg.label }}</span>\n </button>\n}\n\n<!-- Switch (inline en horizontal \u00B7 absolute top-right en vertical) -->\n@if (showToggle()) {\n <sui-switch\n class=\"sui-integration-switch__toggle\"\n [checked]=\"effectiveActive()\"\n [disabled]=\"isDisabled()\"\n (checkedChange)=\"onSwitchChange($event)\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:flex;box-sizing:border-box;width:100%;font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-sui-type=horizontal]){flex-direction:row;align-items:center;gap:14px}:host([data-sui-type=vertical]){flex-direction:column;align-items:flex-start;gap:14px}:host([data-sui-appearance=card]){padding:16px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:12px;box-shadow:var(--sui-shadow-x-small)}:host([data-sui-appearance=list]){padding:0;background:transparent;border:0}.sui-integration-switch__brand{box-sizing:border-box;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:8px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:999px;box-shadow:var(--sui-shadow-x-small);overflow:hidden}:host([data-sui-appearance=card]) .sui-integration-switch__brand{width:40px;height:40px}:host([data-sui-appearance=list]) .sui-integration-switch__brand{width:48px;height:48px}.sui-integration-switch__brand-img{width:100%;height:100%;object-fit:contain;display:block}.sui-integration-switch__text{flex:1 0 0;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}.sui-integration-switch__title-row{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.sui-integration-switch__title{color:var(--sui-text-strong-950);font-weight:500;word-break:break-word}:host([data-sui-appearance=card]) .sui-integration-switch__title{font-size:14px;line-height:20px;letter-spacing:-.006em}:host([data-sui-appearance=list]) .sui-integration-switch__title{font-size:16px;line-height:24px;letter-spacing:-.011em}.sui-integration-switch__description{margin:0;color:var(--sui-text-sub-600);font-weight:400;word-break:break-word}:host([data-sui-appearance=card]) .sui-integration-switch__description{font-size:12px;line-height:16px}:host([data-sui-appearance=list]) .sui-integration-switch__description{font-size:14px;line-height:20px;letter-spacing:-.006em}.sui-integration-switch__badge{flex-shrink:0}.sui-integration-switch__manage{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:8px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:8px;box-shadow:var(--sui-shadow-x-small);color:var(--sui-text-sub-600);font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,transform .12s ease}.sui-integration-switch__manage:hover:not(:disabled){background:var(--sui-bg-weak-50)}.sui-integration-switch__manage:active:not(:disabled){transform:scale(.97)}.sui-integration-switch__manage:focus-visible{outline:2px solid var(--sui-primary-base);outline-offset:2px}.sui-integration-switch__manage:disabled{opacity:.4;cursor:not-allowed}.sui-integration-switch__manage-label{padding:0 4px;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em}:host([data-sui-type=vertical]) .sui-integration-switch__manage{width:100%}.sui-integration-switch__toggle{flex-shrink:0}:host([data-sui-type=vertical]) .sui-integration-switch__toggle{position:absolute;top:19px;right:19px}:host([data-sui-type=vertical][data-sui-appearance=list]) .sui-integration-switch__toggle{top:12px;right:12px}:host([data-sui-disabled]){opacity:.5;pointer-events:none}\n"], dependencies: [{ kind: "component", type: SuiSwitch, selector: "sui-switch", inputs: ["size", "checked", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10092
10109
|
}
|
|
10093
10110
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiIntegrationSwitch, decorators: [{
|
|
10094
10111
|
type: Component,
|
|
@@ -10106,7 +10123,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
10106
10123
|
'[attr.data-sui-type]': 'type()',
|
|
10107
10124
|
'[attr.data-sui-appearance]': 'appearance()',
|
|
10108
10125
|
'[attr.data-sui-disabled]': 'isDisabled() ? "" : null',
|
|
10109
|
-
}, template: "<!-- Brand logo (circle 40 / 48 seg\u00FAn appearance) -->\n<div class=\"sui-integration-switch__brand\" aria-hidden=\"true\">\n <ng-content select=\"[sui-integration-brand]\">\n @if (brandIconSrc(); as src) {\n <img [src]=\"src\" alt=\"\" class=\"sui-integration-switch__brand-img\" />\n } @else if (brandIcon(); as icon) {\n <sui-icon [name]=\"icon\" [size]=\"appearance() === 'list' ? 32 : 24\" />\n }\n </ng-content>\n</div>\n\n<!-- Title + description block -->\n<div class=\"sui-integration-switch__text\">\n <div class=\"sui-integration-switch__title-row\">\n <span class=\"sui-integration-switch__title\">{{ title() }}</span>\n @if (badgeCfg(); as bcfg) {\n <sui-badge\n class=\"sui-integration-switch__badge\"\n [color]=\"bcfg.color ?? 'orange'\"\n [variant]=\"bcfg.variant ?? 'light'\"\n [size]=\"bcfg.size ?? 'small'\"\n >{{ bcfg.label }}</sui-badge>\n }\n </div>\n @if (description(); as desc) {\n <p class=\"sui-integration-switch__description\">{{ desc }}</p>\n }\n</div>\n\n<!-- Manage button (trailing en horizontal, full-width en vertical) -->\n@if (manageCfg(); as mcfg) {\n <button\n type=\"button\"\n class=\"sui-integration-switch__manage\"\n [attr.aria-label]=\"mcfg.label\"\n [disabled]=\"isDisabled()\"\n (click)=\"onManageClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon [name]=\"mcfg.icon\" [size]=\"20\" />\n <span class=\"sui-integration-switch__manage-label\">{{ mcfg.label }}</span>\n </button>\n}\n\n<!-- Switch (inline en horizontal \u00B7 absolute top-right en vertical) -->\n@if (showToggle()) {\n <sui-switch\n class=\"sui-integration-switch__toggle\"\n [checked]=\"effectiveActive()\"\n [disabled]=\"isDisabled()\"\n (checkedChange)=\"onSwitchChange($event)\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:flex;box-sizing:border-box;width:100%;font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-sui-type=horizontal]){flex-direction:row;align-items:center;gap:14px}:host([data-sui-type=vertical]){flex-direction:column;align-items:flex-start;gap:14px}:host([data-sui-appearance=card]){padding:16px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:12px;box-shadow:
|
|
10126
|
+
}, template: "<!-- Brand logo (circle 40 / 48 seg\u00FAn appearance) -->\n<div class=\"sui-integration-switch__brand\" aria-hidden=\"true\">\n <ng-content select=\"[sui-integration-brand]\">\n @if (brandIconSrc(); as src) {\n <img [src]=\"src\" alt=\"\" class=\"sui-integration-switch__brand-img\" />\n } @else if (brandIcon(); as icon) {\n <sui-icon [name]=\"icon\" [size]=\"appearance() === 'list' ? 32 : 24\" />\n }\n </ng-content>\n</div>\n\n<!-- Title + description block -->\n<div class=\"sui-integration-switch__text\">\n <div class=\"sui-integration-switch__title-row\">\n <span class=\"sui-integration-switch__title\">{{ title() }}</span>\n @if (badgeCfg(); as bcfg) {\n <sui-badge\n class=\"sui-integration-switch__badge\"\n [color]=\"bcfg.color ?? 'orange'\"\n [variant]=\"bcfg.variant ?? 'light'\"\n [size]=\"bcfg.size ?? 'small'\"\n >{{ bcfg.label }}</sui-badge>\n }\n </div>\n @if (description(); as desc) {\n <p class=\"sui-integration-switch__description\">{{ desc }}</p>\n }\n</div>\n\n<!-- Manage button (trailing en horizontal, full-width en vertical) -->\n@if (manageCfg(); as mcfg) {\n <button\n type=\"button\"\n class=\"sui-integration-switch__manage\"\n [attr.aria-label]=\"mcfg.label\"\n [disabled]=\"isDisabled()\"\n (click)=\"onManageClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon [name]=\"mcfg.icon\" [size]=\"20\" />\n <span class=\"sui-integration-switch__manage-label\">{{ mcfg.label }}</span>\n </button>\n}\n\n<!-- Switch (inline en horizontal \u00B7 absolute top-right en vertical) -->\n@if (showToggle()) {\n <sui-switch\n class=\"sui-integration-switch__toggle\"\n [checked]=\"effectiveActive()\"\n [disabled]=\"isDisabled()\"\n (checkedChange)=\"onSwitchChange($event)\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:flex;box-sizing:border-box;width:100%;font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-sui-type=horizontal]){flex-direction:row;align-items:center;gap:14px}:host([data-sui-type=vertical]){flex-direction:column;align-items:flex-start;gap:14px}:host([data-sui-appearance=card]){padding:16px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:12px;box-shadow:var(--sui-shadow-x-small)}:host([data-sui-appearance=list]){padding:0;background:transparent;border:0}.sui-integration-switch__brand{box-sizing:border-box;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:8px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:999px;box-shadow:var(--sui-shadow-x-small);overflow:hidden}:host([data-sui-appearance=card]) .sui-integration-switch__brand{width:40px;height:40px}:host([data-sui-appearance=list]) .sui-integration-switch__brand{width:48px;height:48px}.sui-integration-switch__brand-img{width:100%;height:100%;object-fit:contain;display:block}.sui-integration-switch__text{flex:1 0 0;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}.sui-integration-switch__title-row{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.sui-integration-switch__title{color:var(--sui-text-strong-950);font-weight:500;word-break:break-word}:host([data-sui-appearance=card]) .sui-integration-switch__title{font-size:14px;line-height:20px;letter-spacing:-.006em}:host([data-sui-appearance=list]) .sui-integration-switch__title{font-size:16px;line-height:24px;letter-spacing:-.011em}.sui-integration-switch__description{margin:0;color:var(--sui-text-sub-600);font-weight:400;word-break:break-word}:host([data-sui-appearance=card]) .sui-integration-switch__description{font-size:12px;line-height:16px}:host([data-sui-appearance=list]) .sui-integration-switch__description{font-size:14px;line-height:20px;letter-spacing:-.006em}.sui-integration-switch__badge{flex-shrink:0}.sui-integration-switch__manage{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:8px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:8px;box-shadow:var(--sui-shadow-x-small);color:var(--sui-text-sub-600);font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,transform .12s ease}.sui-integration-switch__manage:hover:not(:disabled){background:var(--sui-bg-weak-50)}.sui-integration-switch__manage:active:not(:disabled){transform:scale(.97)}.sui-integration-switch__manage:focus-visible{outline:2px solid var(--sui-primary-base);outline-offset:2px}.sui-integration-switch__manage:disabled{opacity:.4;cursor:not-allowed}.sui-integration-switch__manage-label{padding:0 4px;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em}:host([data-sui-type=vertical]) .sui-integration-switch__manage{width:100%}.sui-integration-switch__toggle{flex-shrink:0}:host([data-sui-type=vertical]) .sui-integration-switch__toggle{position:absolute;top:19px;right:19px}:host([data-sui-type=vertical][data-sui-appearance=list]) .sui-integration-switch__toggle{top:12px;right:12px}:host([data-sui-disabled]){opacity:.5;pointer-events:none}\n"] }]
|
|
10110
10127
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], brandIconSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandIconSrc", required: false }] }], brandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandIcon", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], manage: [{ type: i0.Input, args: [{ isSignal: true, alias: "manage", required: false }] }], showToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggle", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], activeChange: [{ type: i0.Output, args: ["activeChange"] }], manageClick: [{ type: i0.Output, args: ["manageClick"] }] } });
|
|
10111
10128
|
|
|
10112
10129
|
/** Set de los 9 colores SUI 2.0 para iterar desde el consumer (previews, demos). */
|
|
@@ -11474,9 +11491,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
11474
11491
|
* derecha (input `showMore` → output `moreClicked`).
|
|
11475
11492
|
* ────────────────────────────────────────────────────────────────────────────
|
|
11476
11493
|
*
|
|
11477
|
-
*
|
|
11478
|
-
*
|
|
11479
|
-
* -
|
|
11494
|
+
* VERIFIED 2026-07-23 (screenshot MCP del set 4308:731 — sella el PENDING
|
|
11495
|
+
* VERIFY heredado de la homologación 2026-05-29):
|
|
11496
|
+
* - Items de panel = filas PLANAS: sin border/shadow propios (el radius-12
|
|
11497
|
+
* solo se manifiesta en el fill bg-weak-50 del hover, redondeado en Figma).
|
|
11498
|
+
* - File card: hug-content con icono attachment-line 16 + "(4mb)" muted
|
|
11499
|
+
* (soft-400); bg-white, border stroke/soft-200, radius-8, shadow xs.
|
|
11500
|
+
* - Message bubble: hug-content (radius asimétrico tl4 tr8 br10 bl8 OK).
|
|
11480
11501
|
* - Button-type: Deny stroke + Approve filled, px-10 py-6 radius-8.
|
|
11481
11502
|
* - Company logo: 16×16 circle, antes del texto de descripción.
|
|
11482
11503
|
* - Hover: bg --sui-bg-weak-50 (#f7f7f7) + more-2-line 20px compact radius-6.
|
|
@@ -11577,7 +11598,7 @@ class SuiNotification {
|
|
|
11577
11598
|
this.moreClicked.emit(event);
|
|
11578
11599
|
}
|
|
11579
11600
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiNotification, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11580
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiNotification, isStandalone: true, selector: "sui-notification", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, variantStyle: { classPropertyName: "variantStyle", publicName: "variantStyle", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, unread: { classPropertyName: "unread", publicName: "unread", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, showMore: { classPropertyName: "showMore", publicName: "showMore", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed", moreClicked: "moreClicked" }, host: { properties: { "attr.title": "null", "attr.data-sui-show-more": "showMore() ? \"\" : null" } }, ngImport: i0, template: "<div\n class=\"sui-notification\"\n [class.sui-notification--hoverable]=\"showMore()\"\n [class.sui-notification--active]=\"active()\"\n [class.sui-notification--has-avatar]=\"hasAvatar()\"\n [attr.data-sui-variant]=\"variant()\"\n [attr.data-sui-style]=\"variantStyle()\"\n [attr.data-sui-type]=\"type()\"\n [attr.role]=\"role()\"\n [attr.aria-live]=\"ariaLive()\"\n>\n <!-- Leading: avatar OR status icon -->\n @if (hasAvatar()) {\n <div class=\"sui-notification__avatar\" aria-hidden=\"true\">\n @if (avatarCfg()!.src; as src) {\n <img [src]=\"src\" alt=\"\" />\n } @else {\n <span class=\"sui-notification__avatar-initials\">{{ avatarCfg()!.initials }}</span>\n }\n </div>\n } @else if (showLeadingIcon()) {\n <div class=\"sui-notification__icon\" aria-hidden=\"true\">\n <sui-icon [name]=\"iconName()\" [size]=\"20\" />\n </div>\n }\n\n <div class=\"sui-notification__content\">\n <!-- Header: title + unread dot + timestamp -->\n <div class=\"sui-notification__header\">\n @if (title()) {\n <p class=\"sui-notification__title\">{{ title() }}</p>\n }\n @if (unread()) {\n <span class=\"sui-notification__dot\" aria-label=\"No le\u00EDdo\"></span>\n }\n @if (timestamp() && type() === 'basic' && !hasAvatar()) {\n <span class=\"sui-notification__time\">{{ timestamp() }}</span>\n }\n </div>\n\n <!-- Compound description: timestamp \u2219 company-logo \u2219 text.\n For type=basic the timestamp lives in the header (not here), so the\n description block must only render on real content \u2014 otherwise an\n empty <p> occupies a phantom 4px gap below the title. -->\n @if (description() || (timestamp() && (type() !== 'basic' || hasAvatar())) || type() !== 'basic') {\n <p class=\"sui-notification__description\">\n @if (timestamp() && (type() !== 'basic' || hasAvatar())) {\n <span class=\"sui-notification__meta-time\">{{ timestamp() }}</span>\n <span class=\"sui-notification__sep\" aria-hidden=\"true\">\u2219</span>\n }\n <span class=\"sui-notification__company-logo\">\n <ng-content select=\"[slot=company-logo]\" />\n </span>\n @if (description()) {\n <span class=\"sui-notification__desc-text\">{{ description() }}</span>\n }\n </p>\n }\n\n <!-- Type=file: attachment card -->\n @if (type() === 'file') {\n <div class=\"sui-notification__file\">\n <ng-content select=\"[slot=file]\" />\n </div>\n }\n\n <!-- Type=message: response bubble -->\n @if (type() === 'message') {\n <div class=\"sui-notification__bubble\">\n <ng-content select=\"[slot=message]\" />\n </div>\n }\n\n <!-- Free custom content -->\n <ng-content />\n\n <!-- Actions slot (also hosts type=button Deny/Approve pair) -->\n <div class=\"sui-notification__actions\">\n <ng-content select=\"[slot=actions]\" />\n </div>\n </div>\n\n <!-- Hover affordance: more-2-line (notification item) = COMPONENTE\n sui-compact-button (variantStyle ghost: transparent + hover bg-weak-50,\n radius-6, icon 20 = size large), NO un <button> maqueta. El posicionamiento\n absoluto y el reveal on-hover (opacity 0\u21921) los aporta `.sui-notification__more`. -->\n @if (showMore()) {\n <sui-compact-button\n class=\"sui-notification__more\"\n icon=\"more-2-line\"\n variantStyle=\"ghost\"\n size=\"large\"\n ariaLabel=\"M\u00E1s opciones\"\n (clicked)=\"onMore($event)\"\n />\n }\n\n @if (dismissible()) {\n <!-- Cierre = COMPONENTE sui-compact-button (variantStyle modifiable \u2192 el icono\n hereda el currentColor del per-style `.sui-notification__close`), NO un\n <button> maqueta. icon 16 = size medium (patr\u00F3n canon sui-alert). -->\n <sui-compact-button\n class=\"sui-notification__close\"\n icon=\"close-line\"\n variantStyle=\"modifiable\"\n size=\"medium\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"onDismiss()\"\n />\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-notification{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:var(--sui-radius-12);overflow:hidden;border:1px solid transparent;box-sizing:border-box}.sui-notification.sui-notification--has-avatar{padding:12px;gap:15px}.sui-notification[data-sui-style=filled]{border:none;box-shadow:var(--sui-custom-shadow-small)}.sui-notification[data-sui-style=filled] .sui-notification__title,.sui-notification[data-sui-style=filled] .sui-notification__description,.sui-notification[data-sui-style=filled] .sui-notification__icon{color:var(--sui-static-white)}.sui-notification[data-sui-style=filled] .sui-notification__time,.sui-notification[data-sui-style=filled] .sui-notification__close{color:var(--sui-static-white);opacity:.72}.sui-notification[data-sui-style=filled] .sui-notification__dot{background:var(--sui-static-white)}.sui-notification[data-sui-style=filled][data-sui-variant=info]{background:var(--sui-state-information-base)}.sui-notification[data-sui-style=filled][data-sui-variant=success]{background:var(--sui-state-success-base)}.sui-notification[data-sui-style=filled][data-sui-variant=warning]{background:var(--sui-state-warning-base)}.sui-notification[data-sui-style=filled][data-sui-variant=error]{background:var(--sui-state-error-base)}.sui-notification[data-sui-style=filled][data-sui-variant=feature]{background:var(--sui-state-feature-base)}.sui-notification[data-sui-style=filled][data-sui-variant=default]{background:var(--sui-bg-strong-950)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__title,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__description,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__time,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__close{color:var(--sui-text-white-0)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__icon{color:var(--sui-icon-white-0)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__dot{background:var(--sui-text-white-0)}.sui-notification[data-sui-style=light]{border:none}.sui-notification[data-sui-style=light] .sui-notification__title,.sui-notification[data-sui-style=light] .sui-notification__description{color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=light] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=light][data-sui-variant=info]{background:var(--sui-state-information-light)}.sui-notification[data-sui-style=light][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification[data-sui-style=light][data-sui-variant=success]{background:var(--sui-state-success-light)}.sui-notification[data-sui-style=light][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification[data-sui-style=light][data-sui-variant=warning]{background:var(--sui-state-warning-light)}.sui-notification[data-sui-style=light][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification[data-sui-style=light][data-sui-variant=error]{background:var(--sui-state-error-light)}.sui-notification[data-sui-style=light][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification[data-sui-style=light][data-sui-variant=feature]{background:var(--sui-state-feature-light)}.sui-notification[data-sui-style=light][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification[data-sui-style=light][data-sui-variant=default]{background:var(--sui-bg-weak-50)}.sui-notification[data-sui-style=lighter] .sui-notification__title{color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=lighter] .sui-notification__description{color:var(--sui-text-strong-950);opacity:.72}.sui-notification[data-sui-style=lighter] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=lighter][data-sui-variant=info]{background:var(--sui-state-information-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=success]{background:var(--sui-state-success-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=warning]{background:var(--sui-state-warning-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=error]{background:var(--sui-state-error-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=feature]{background:var(--sui-state-feature-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=default]{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200)}.sui-notification:not([data-sui-style]),.sui-notification[data-sui-style=stroke]{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);box-shadow:var(--sui-custom-shadow-small)}.sui-notification:not([data-sui-style]) .sui-notification__title,.sui-notification[data-sui-style=stroke] .sui-notification__title{color:var(--sui-text-strong-950)}.sui-notification:not([data-sui-style]) .sui-notification__description,.sui-notification[data-sui-style=stroke] .sui-notification__description{color:var(--sui-text-sub-600)}.sui-notification:not([data-sui-style]) .sui-notification__close,.sui-notification[data-sui-style=stroke] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification:not([data-sui-style])[data-sui-variant=info] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification:not([data-sui-style])[data-sui-variant=success] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification:not([data-sui-style])[data-sui-variant=warning] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification:not([data-sui-style])[data-sui-variant=error] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification:not([data-sui-style])[data-sui-variant=feature] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification__avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--sui-bg-strong-950)}.sui-notification__avatar img{width:100%;height:100%;object-fit:cover;display:block}.sui-notification__avatar-initials{font-family:var(--sui-font-sans);font-size:14px;font-weight:600;line-height:1;color:var(--sui-text-white-0);text-transform:uppercase;letter-spacing:.02em;-webkit-user-select:none;user-select:none}.sui-notification__icon{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;margin-top:2px}.sui-notification__content{display:flex;flex:1 0 0;flex-direction:column;gap:4px;min-width:0}.sui-notification__header{display:flex;align-items:center;gap:6px;min-width:0}.sui-notification__title{margin:0;flex:1 0 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}.sui-notification__dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--sui-primary-base)}:host([data-sui-show-more]) .sui-notification__time{margin-right:32px}.sui-notification__time{flex-shrink:0;margin-left:auto;font-family:var(--sui-font-sans);font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-soft-400);white-space:nowrap}.sui-notification__description{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}.sui-notification__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}.sui-notification__actions:empty{display:none}.sui-notification__close{flex-shrink:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification__close:hover{opacity:1!important}.sui-notification--hoverable{cursor:pointer;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification--hoverable .sui-notification__more{opacity:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification--hoverable:hover,.sui-notification--hoverable.sui-notification--active{background:var(--sui-bg-weak-50)}.sui-notification--hoverable:hover .sui-notification__more,.sui-notification--hoverable.sui-notification--active .sui-notification__more{opacity:1}.sui-notification__description{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.sui-notification__meta-time{flex-shrink:0;color:var(--sui-text-soft-400)}.sui-notification__sep{flex-shrink:0;color:var(--sui-text-soft-400);-webkit-user-select:none;user-select:none}.sui-notification__company-logo{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sui-notification__company-logo:empty{display:none}.sui-notification__company-logo ::ng-deep img,.sui-notification__company-logo ::ng-deep svg{width:16px;height:16px;border-radius:var(--sui-radius-full);object-fit:cover;display:block}.sui-notification__desc-text{min-width:0}.sui-notification__file{margin-top:8px;border-radius:var(--sui-radius-8);border:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-shadow:var(--sui-regular-shadow-x-small);overflow:hidden;box-sizing:border-box}.sui-notification__file:empty{display:none}.sui-notification__bubble{margin-top:8px;padding:8px 12px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);border-radius:4px 8px 10px;box-sizing:border-box;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-sub-600);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-notification__bubble:empty{display:none}.sui-notification__more{position:absolute;top:12px;right:12px;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiCompactButton, selector: "sui-compact-button", inputs: ["icon", "variantStyle", "size", "fullRadius", "disabled", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11601
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiNotification, isStandalone: true, selector: "sui-notification", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, variantStyle: { classPropertyName: "variantStyle", publicName: "variantStyle", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, unread: { classPropertyName: "unread", publicName: "unread", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, showMore: { classPropertyName: "showMore", publicName: "showMore", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed", moreClicked: "moreClicked" }, host: { properties: { "attr.title": "null", "attr.data-sui-show-more": "showMore() ? \"\" : null" } }, ngImport: i0, template: "<div\n class=\"sui-notification\"\n [class.sui-notification--hoverable]=\"showMore()\"\n [class.sui-notification--active]=\"active()\"\n [class.sui-notification--has-avatar]=\"hasAvatar()\"\n [attr.data-sui-variant]=\"variant()\"\n [attr.data-sui-style]=\"variantStyle()\"\n [attr.data-sui-type]=\"type()\"\n [attr.role]=\"role()\"\n [attr.aria-live]=\"ariaLive()\"\n>\n <!-- Leading: avatar OR status icon -->\n @if (hasAvatar()) {\n <div class=\"sui-notification__avatar\" aria-hidden=\"true\">\n @if (avatarCfg()!.src; as src) {\n <img [src]=\"src\" alt=\"\" />\n } @else {\n <span class=\"sui-notification__avatar-initials\">{{ avatarCfg()!.initials }}</span>\n }\n </div>\n } @else if (showLeadingIcon()) {\n <div class=\"sui-notification__icon\" aria-hidden=\"true\">\n <sui-icon [name]=\"iconName()\" [size]=\"20\" />\n </div>\n }\n\n <div class=\"sui-notification__content\">\n <!-- Header: title + unread dot + timestamp -->\n <div class=\"sui-notification__header\">\n @if (title()) {\n <p class=\"sui-notification__title\">{{ title() }}</p>\n }\n @if (unread()) {\n <span class=\"sui-notification__dot\" aria-label=\"No le\u00EDdo\"></span>\n }\n @if (timestamp() && type() === 'basic' && !hasAvatar()) {\n <span class=\"sui-notification__time\">{{ timestamp() }}</span>\n }\n </div>\n\n <!-- Compound description: timestamp \u2219 company-logo \u2219 text.\n For type=basic the timestamp lives in the header (not here), so the\n description block must only render on real content \u2014 otherwise an\n empty <p> occupies a phantom 4px gap below the title. -->\n @if (description() || (timestamp() && (type() !== 'basic' || hasAvatar())) || type() !== 'basic') {\n <p class=\"sui-notification__description\">\n @if (timestamp() && (type() !== 'basic' || hasAvatar())) {\n <span class=\"sui-notification__meta-time\">{{ timestamp() }}</span>\n <span class=\"sui-notification__sep\" aria-hidden=\"true\">\u2219</span>\n }\n <span class=\"sui-notification__company-logo\">\n <ng-content select=\"[slot=company-logo]\" />\n </span>\n @if (description()) {\n <span class=\"sui-notification__desc-text\">{{ description() }}</span>\n }\n </p>\n }\n\n <!-- Type=file: attachment card (Figma: hug-content + clip attachment-line) -->\n @if (type() === 'file') {\n <div class=\"sui-notification__file\">\n <sui-icon\n class=\"sui-notification__file-icon\"\n name=\"attachment-line\"\n [size]=\"16\"\n aria-hidden=\"true\"\n />\n <ng-content select=\"[slot=file]\" />\n </div>\n }\n\n <!-- Type=message: response bubble -->\n @if (type() === 'message') {\n <div class=\"sui-notification__bubble\">\n <ng-content select=\"[slot=message]\" />\n </div>\n }\n\n <!-- Free custom content -->\n <ng-content />\n\n <!-- Actions slot (also hosts type=button Deny/Approve pair) -->\n <div class=\"sui-notification__actions\">\n <ng-content select=\"[slot=actions]\" />\n </div>\n </div>\n\n <!-- Hover affordance: more-2-line (notification item) = COMPONENTE\n sui-compact-button (variantStyle ghost: transparent + hover bg-weak-50,\n radius-6, icon 20 = size large), NO un <button> maqueta. El posicionamiento\n absoluto y el reveal on-hover (opacity 0\u21921) los aporta `.sui-notification__more`. -->\n @if (showMore()) {\n <sui-compact-button\n class=\"sui-notification__more\"\n icon=\"more-2-line\"\n variantStyle=\"ghost\"\n size=\"large\"\n ariaLabel=\"M\u00E1s opciones\"\n (clicked)=\"onMore($event)\"\n />\n }\n\n @if (dismissible()) {\n <!-- Cierre = COMPONENTE sui-compact-button (variantStyle modifiable \u2192 el icono\n hereda el currentColor del per-style `.sui-notification__close`), NO un\n <button> maqueta. icon 16 = size medium (patr\u00F3n canon sui-alert). -->\n <sui-compact-button\n class=\"sui-notification__close\"\n icon=\"close-line\"\n variantStyle=\"modifiable\"\n size=\"medium\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"onDismiss()\"\n />\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-notification{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:var(--sui-radius-12);overflow:hidden;border:1px solid transparent;box-sizing:border-box}.sui-notification.sui-notification--has-avatar{padding:12px;gap:15px;border:none}.sui-notification[data-sui-style=filled]{border:none;box-shadow:var(--sui-custom-shadow-small)}.sui-notification[data-sui-style=filled] .sui-notification__title,.sui-notification[data-sui-style=filled] .sui-notification__description,.sui-notification[data-sui-style=filled] .sui-notification__icon{color:var(--sui-static-white)}.sui-notification[data-sui-style=filled] .sui-notification__time,.sui-notification[data-sui-style=filled] .sui-notification__close{color:var(--sui-static-white);opacity:.72}.sui-notification[data-sui-style=filled] .sui-notification__dot{background:var(--sui-static-white)}.sui-notification[data-sui-style=filled][data-sui-variant=info]{background:var(--sui-state-information-base)}.sui-notification[data-sui-style=filled][data-sui-variant=success]{background:var(--sui-state-success-base)}.sui-notification[data-sui-style=filled][data-sui-variant=warning]{background:var(--sui-state-warning-base)}.sui-notification[data-sui-style=filled][data-sui-variant=error]{background:var(--sui-state-error-base)}.sui-notification[data-sui-style=filled][data-sui-variant=feature]{background:var(--sui-state-feature-base)}.sui-notification[data-sui-style=filled][data-sui-variant=default]{background:var(--sui-bg-strong-950)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__title,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__description,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__time,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__close{color:var(--sui-text-white-0)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__icon{color:var(--sui-icon-white-0)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__dot{background:var(--sui-text-white-0)}.sui-notification[data-sui-style=light]{border:none}.sui-notification[data-sui-style=light] .sui-notification__title,.sui-notification[data-sui-style=light] .sui-notification__description{color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=light] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=light][data-sui-variant=info]{background:var(--sui-state-information-light)}.sui-notification[data-sui-style=light][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification[data-sui-style=light][data-sui-variant=success]{background:var(--sui-state-success-light)}.sui-notification[data-sui-style=light][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification[data-sui-style=light][data-sui-variant=warning]{background:var(--sui-state-warning-light)}.sui-notification[data-sui-style=light][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification[data-sui-style=light][data-sui-variant=error]{background:var(--sui-state-error-light)}.sui-notification[data-sui-style=light][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification[data-sui-style=light][data-sui-variant=feature]{background:var(--sui-state-feature-light)}.sui-notification[data-sui-style=light][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification[data-sui-style=light][data-sui-variant=default]{background:var(--sui-bg-weak-50)}.sui-notification[data-sui-style=lighter] .sui-notification__title{color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=lighter] .sui-notification__description{color:var(--sui-text-strong-950);opacity:.72}.sui-notification[data-sui-style=lighter] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=lighter][data-sui-variant=info]{background:var(--sui-state-information-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=success]{background:var(--sui-state-success-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=warning]{background:var(--sui-state-warning-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=error]{background:var(--sui-state-error-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=feature]{background:var(--sui-state-feature-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=default]{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200)}.sui-notification:not([data-sui-style]):not(.sui-notification--has-avatar),.sui-notification[data-sui-style=stroke]:not(.sui-notification--has-avatar){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);box-shadow:var(--sui-custom-shadow-small)}.sui-notification:not([data-sui-style]) .sui-notification__title,.sui-notification[data-sui-style=stroke] .sui-notification__title{color:var(--sui-text-strong-950)}.sui-notification:not([data-sui-style]) .sui-notification__description,.sui-notification[data-sui-style=stroke] .sui-notification__description{color:var(--sui-text-sub-600)}.sui-notification:not([data-sui-style]) .sui-notification__close,.sui-notification[data-sui-style=stroke] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification:not([data-sui-style])[data-sui-variant=info] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification:not([data-sui-style])[data-sui-variant=success] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification:not([data-sui-style])[data-sui-variant=warning] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification:not([data-sui-style])[data-sui-variant=error] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification:not([data-sui-style])[data-sui-variant=feature] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification__avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--sui-bg-strong-950)}.sui-notification__avatar img{width:100%;height:100%;object-fit:cover;display:block}.sui-notification__avatar-initials{font-family:var(--sui-font-sans);font-size:14px;font-weight:600;line-height:1;color:var(--sui-text-white-0);text-transform:uppercase;letter-spacing:.02em;-webkit-user-select:none;user-select:none}.sui-notification__icon{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;margin-top:2px}.sui-notification__content{display:flex;flex:1 0 0;flex-direction:column;gap:4px;min-width:0}.sui-notification__header{display:flex;align-items:center;gap:6px;min-width:0}.sui-notification__title{margin:0;flex:1 0 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}.sui-notification__dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--sui-primary-base)}:host([data-sui-show-more]) .sui-notification__time{margin-right:32px}.sui-notification__time{flex-shrink:0;margin-left:auto;font-family:var(--sui-font-sans);font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-soft-400);white-space:nowrap}.sui-notification__description{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}.sui-notification__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}.sui-notification__actions:empty{display:none}.sui-notification__close{flex-shrink:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification__close:hover{opacity:1!important}.sui-notification--hoverable{cursor:pointer;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification--hoverable .sui-notification__more{opacity:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification--hoverable:hover,.sui-notification--hoverable.sui-notification--active{background:var(--sui-bg-weak-50)}.sui-notification--hoverable:hover .sui-notification__more,.sui-notification--hoverable.sui-notification--active .sui-notification__more{opacity:1}.sui-notification__description{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.sui-notification__meta-time{flex-shrink:0;color:var(--sui-text-soft-400)}.sui-notification__sep{flex-shrink:0;color:var(--sui-text-soft-400);-webkit-user-select:none;user-select:none}.sui-notification__company-logo{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sui-notification__company-logo:empty{display:none}.sui-notification__company-logo ::ng-deep img,.sui-notification__company-logo ::ng-deep svg{width:16px;height:16px;border-radius:var(--sui-radius-full);object-fit:cover;display:block}.sui-notification__desc-text{min-width:0}.sui-notification__file{align-self:flex-start;max-width:100%;display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:8px 10px;border-radius:var(--sui-radius-8);border:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-shadow:var(--sui-regular-shadow-x-small);box-sizing:border-box;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-notification__file ::ng-deep .sui-notification__file-size{color:var(--sui-text-soft-400)}.sui-notification__file-icon{flex-shrink:0;color:var(--sui-text-sub-600)}.sui-notification__bubble{align-self:flex-start;max-width:100%;margin-top:8px;padding:8px 12px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);border-radius:4px 8px 10px;box-sizing:border-box;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-sub-600);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-notification__bubble:empty{display:none}.sui-notification__more{position:absolute;top:12px;right:12px;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiCompactButton, selector: "sui-compact-button", inputs: ["icon", "variantStyle", "size", "fullRadius", "disabled", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11581
11602
|
}
|
|
11582
11603
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiNotification, decorators: [{
|
|
11583
11604
|
type: Component,
|
|
@@ -11585,7 +11606,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
11585
11606
|
/* Strip native `title` attr — patrón canon Ontop (ver CLAUDE.md). */
|
|
11586
11607
|
'[attr.title]': 'null',
|
|
11587
11608
|
'[attr.data-sui-show-more]': 'showMore() ? "" : null',
|
|
11588
|
-
}, template: "<div\n class=\"sui-notification\"\n [class.sui-notification--hoverable]=\"showMore()\"\n [class.sui-notification--active]=\"active()\"\n [class.sui-notification--has-avatar]=\"hasAvatar()\"\n [attr.data-sui-variant]=\"variant()\"\n [attr.data-sui-style]=\"variantStyle()\"\n [attr.data-sui-type]=\"type()\"\n [attr.role]=\"role()\"\n [attr.aria-live]=\"ariaLive()\"\n>\n <!-- Leading: avatar OR status icon -->\n @if (hasAvatar()) {\n <div class=\"sui-notification__avatar\" aria-hidden=\"true\">\n @if (avatarCfg()!.src; as src) {\n <img [src]=\"src\" alt=\"\" />\n } @else {\n <span class=\"sui-notification__avatar-initials\">{{ avatarCfg()!.initials }}</span>\n }\n </div>\n } @else if (showLeadingIcon()) {\n <div class=\"sui-notification__icon\" aria-hidden=\"true\">\n <sui-icon [name]=\"iconName()\" [size]=\"20\" />\n </div>\n }\n\n <div class=\"sui-notification__content\">\n <!-- Header: title + unread dot + timestamp -->\n <div class=\"sui-notification__header\">\n @if (title()) {\n <p class=\"sui-notification__title\">{{ title() }}</p>\n }\n @if (unread()) {\n <span class=\"sui-notification__dot\" aria-label=\"No le\u00EDdo\"></span>\n }\n @if (timestamp() && type() === 'basic' && !hasAvatar()) {\n <span class=\"sui-notification__time\">{{ timestamp() }}</span>\n }\n </div>\n\n <!-- Compound description: timestamp \u2219 company-logo \u2219 text.\n For type=basic the timestamp lives in the header (not here), so the\n description block must only render on real content \u2014 otherwise an\n empty <p> occupies a phantom 4px gap below the title. -->\n @if (description() || (timestamp() && (type() !== 'basic' || hasAvatar())) || type() !== 'basic') {\n <p class=\"sui-notification__description\">\n @if (timestamp() && (type() !== 'basic' || hasAvatar())) {\n <span class=\"sui-notification__meta-time\">{{ timestamp() }}</span>\n <span class=\"sui-notification__sep\" aria-hidden=\"true\">\u2219</span>\n }\n <span class=\"sui-notification__company-logo\">\n <ng-content select=\"[slot=company-logo]\" />\n </span>\n @if (description()) {\n <span class=\"sui-notification__desc-text\">{{ description() }}</span>\n }\n </p>\n }\n\n <!-- Type=file: attachment card -->\n @if (type() === 'file') {\n <div class=\"sui-notification__file\">\n <ng-content select=\"[slot=file]\" />\n </div>\n }\n\n <!-- Type=message: response bubble -->\n @if (type() === 'message') {\n <div class=\"sui-notification__bubble\">\n <ng-content select=\"[slot=message]\" />\n </div>\n }\n\n <!-- Free custom content -->\n <ng-content />\n\n <!-- Actions slot (also hosts type=button Deny/Approve pair) -->\n <div class=\"sui-notification__actions\">\n <ng-content select=\"[slot=actions]\" />\n </div>\n </div>\n\n <!-- Hover affordance: more-2-line (notification item) = COMPONENTE\n sui-compact-button (variantStyle ghost: transparent + hover bg-weak-50,\n radius-6, icon 20 = size large), NO un <button> maqueta. El posicionamiento\n absoluto y el reveal on-hover (opacity 0\u21921) los aporta `.sui-notification__more`. -->\n @if (showMore()) {\n <sui-compact-button\n class=\"sui-notification__more\"\n icon=\"more-2-line\"\n variantStyle=\"ghost\"\n size=\"large\"\n ariaLabel=\"M\u00E1s opciones\"\n (clicked)=\"onMore($event)\"\n />\n }\n\n @if (dismissible()) {\n <!-- Cierre = COMPONENTE sui-compact-button (variantStyle modifiable \u2192 el icono\n hereda el currentColor del per-style `.sui-notification__close`), NO un\n <button> maqueta. icon 16 = size medium (patr\u00F3n canon sui-alert). -->\n <sui-compact-button\n class=\"sui-notification__close\"\n icon=\"close-line\"\n variantStyle=\"modifiable\"\n size=\"medium\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"onDismiss()\"\n />\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-notification{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:var(--sui-radius-12);overflow:hidden;border:1px solid transparent;box-sizing:border-box}.sui-notification.sui-notification--has-avatar{padding:12px;gap:15px}.sui-notification[data-sui-style=filled]{border:none;box-shadow:var(--sui-custom-shadow-small)}.sui-notification[data-sui-style=filled] .sui-notification__title,.sui-notification[data-sui-style=filled] .sui-notification__description,.sui-notification[data-sui-style=filled] .sui-notification__icon{color:var(--sui-static-white)}.sui-notification[data-sui-style=filled] .sui-notification__time,.sui-notification[data-sui-style=filled] .sui-notification__close{color:var(--sui-static-white);opacity:.72}.sui-notification[data-sui-style=filled] .sui-notification__dot{background:var(--sui-static-white)}.sui-notification[data-sui-style=filled][data-sui-variant=info]{background:var(--sui-state-information-base)}.sui-notification[data-sui-style=filled][data-sui-variant=success]{background:var(--sui-state-success-base)}.sui-notification[data-sui-style=filled][data-sui-variant=warning]{background:var(--sui-state-warning-base)}.sui-notification[data-sui-style=filled][data-sui-variant=error]{background:var(--sui-state-error-base)}.sui-notification[data-sui-style=filled][data-sui-variant=feature]{background:var(--sui-state-feature-base)}.sui-notification[data-sui-style=filled][data-sui-variant=default]{background:var(--sui-bg-strong-950)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__title,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__description,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__time,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__close{color:var(--sui-text-white-0)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__icon{color:var(--sui-icon-white-0)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__dot{background:var(--sui-text-white-0)}.sui-notification[data-sui-style=light]{border:none}.sui-notification[data-sui-style=light] .sui-notification__title,.sui-notification[data-sui-style=light] .sui-notification__description{color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=light] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=light][data-sui-variant=info]{background:var(--sui-state-information-light)}.sui-notification[data-sui-style=light][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification[data-sui-style=light][data-sui-variant=success]{background:var(--sui-state-success-light)}.sui-notification[data-sui-style=light][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification[data-sui-style=light][data-sui-variant=warning]{background:var(--sui-state-warning-light)}.sui-notification[data-sui-style=light][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification[data-sui-style=light][data-sui-variant=error]{background:var(--sui-state-error-light)}.sui-notification[data-sui-style=light][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification[data-sui-style=light][data-sui-variant=feature]{background:var(--sui-state-feature-light)}.sui-notification[data-sui-style=light][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification[data-sui-style=light][data-sui-variant=default]{background:var(--sui-bg-weak-50)}.sui-notification[data-sui-style=lighter] .sui-notification__title{color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=lighter] .sui-notification__description{color:var(--sui-text-strong-950);opacity:.72}.sui-notification[data-sui-style=lighter] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=lighter][data-sui-variant=info]{background:var(--sui-state-information-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=success]{background:var(--sui-state-success-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=warning]{background:var(--sui-state-warning-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=error]{background:var(--sui-state-error-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=feature]{background:var(--sui-state-feature-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=default]{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200)}.sui-notification:not([data-sui-style]),.sui-notification[data-sui-style=stroke]{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);box-shadow:var(--sui-custom-shadow-small)}.sui-notification:not([data-sui-style]) .sui-notification__title,.sui-notification[data-sui-style=stroke] .sui-notification__title{color:var(--sui-text-strong-950)}.sui-notification:not([data-sui-style]) .sui-notification__description,.sui-notification[data-sui-style=stroke] .sui-notification__description{color:var(--sui-text-sub-600)}.sui-notification:not([data-sui-style]) .sui-notification__close,.sui-notification[data-sui-style=stroke] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification:not([data-sui-style])[data-sui-variant=info] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification:not([data-sui-style])[data-sui-variant=success] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification:not([data-sui-style])[data-sui-variant=warning] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification:not([data-sui-style])[data-sui-variant=error] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification:not([data-sui-style])[data-sui-variant=feature] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification__avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--sui-bg-strong-950)}.sui-notification__avatar img{width:100%;height:100%;object-fit:cover;display:block}.sui-notification__avatar-initials{font-family:var(--sui-font-sans);font-size:14px;font-weight:600;line-height:1;color:var(--sui-text-white-0);text-transform:uppercase;letter-spacing:.02em;-webkit-user-select:none;user-select:none}.sui-notification__icon{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;margin-top:2px}.sui-notification__content{display:flex;flex:1 0 0;flex-direction:column;gap:4px;min-width:0}.sui-notification__header{display:flex;align-items:center;gap:6px;min-width:0}.sui-notification__title{margin:0;flex:1 0 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}.sui-notification__dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--sui-primary-base)}:host([data-sui-show-more]) .sui-notification__time{margin-right:32px}.sui-notification__time{flex-shrink:0;margin-left:auto;font-family:var(--sui-font-sans);font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-soft-400);white-space:nowrap}.sui-notification__description{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}.sui-notification__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}.sui-notification__actions:empty{display:none}.sui-notification__close{flex-shrink:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification__close:hover{opacity:1!important}.sui-notification--hoverable{cursor:pointer;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification--hoverable .sui-notification__more{opacity:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification--hoverable:hover,.sui-notification--hoverable.sui-notification--active{background:var(--sui-bg-weak-50)}.sui-notification--hoverable:hover .sui-notification__more,.sui-notification--hoverable.sui-notification--active .sui-notification__more{opacity:1}.sui-notification__description{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.sui-notification__meta-time{flex-shrink:0;color:var(--sui-text-soft-400)}.sui-notification__sep{flex-shrink:0;color:var(--sui-text-soft-400);-webkit-user-select:none;user-select:none}.sui-notification__company-logo{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sui-notification__company-logo:empty{display:none}.sui-notification__company-logo ::ng-deep img,.sui-notification__company-logo ::ng-deep svg{width:16px;height:16px;border-radius:var(--sui-radius-full);object-fit:cover;display:block}.sui-notification__desc-text{min-width:0}.sui-notification__file{margin-top:8px;border-radius:var(--sui-radius-8);border:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-shadow:var(--sui-regular-shadow-x-small);overflow:hidden;box-sizing:border-box}.sui-notification__file:empty{display:none}.sui-notification__bubble{margin-top:8px;padding:8px 12px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);border-radius:4px 8px 10px;box-sizing:border-box;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-sub-600);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-notification__bubble:empty{display:none}.sui-notification__more{position:absolute;top:12px;right:12px;flex-shrink:0}\n"] }]
|
|
11609
|
+
}, template: "<div\n class=\"sui-notification\"\n [class.sui-notification--hoverable]=\"showMore()\"\n [class.sui-notification--active]=\"active()\"\n [class.sui-notification--has-avatar]=\"hasAvatar()\"\n [attr.data-sui-variant]=\"variant()\"\n [attr.data-sui-style]=\"variantStyle()\"\n [attr.data-sui-type]=\"type()\"\n [attr.role]=\"role()\"\n [attr.aria-live]=\"ariaLive()\"\n>\n <!-- Leading: avatar OR status icon -->\n @if (hasAvatar()) {\n <div class=\"sui-notification__avatar\" aria-hidden=\"true\">\n @if (avatarCfg()!.src; as src) {\n <img [src]=\"src\" alt=\"\" />\n } @else {\n <span class=\"sui-notification__avatar-initials\">{{ avatarCfg()!.initials }}</span>\n }\n </div>\n } @else if (showLeadingIcon()) {\n <div class=\"sui-notification__icon\" aria-hidden=\"true\">\n <sui-icon [name]=\"iconName()\" [size]=\"20\" />\n </div>\n }\n\n <div class=\"sui-notification__content\">\n <!-- Header: title + unread dot + timestamp -->\n <div class=\"sui-notification__header\">\n @if (title()) {\n <p class=\"sui-notification__title\">{{ title() }}</p>\n }\n @if (unread()) {\n <span class=\"sui-notification__dot\" aria-label=\"No le\u00EDdo\"></span>\n }\n @if (timestamp() && type() === 'basic' && !hasAvatar()) {\n <span class=\"sui-notification__time\">{{ timestamp() }}</span>\n }\n </div>\n\n <!-- Compound description: timestamp \u2219 company-logo \u2219 text.\n For type=basic the timestamp lives in the header (not here), so the\n description block must only render on real content \u2014 otherwise an\n empty <p> occupies a phantom 4px gap below the title. -->\n @if (description() || (timestamp() && (type() !== 'basic' || hasAvatar())) || type() !== 'basic') {\n <p class=\"sui-notification__description\">\n @if (timestamp() && (type() !== 'basic' || hasAvatar())) {\n <span class=\"sui-notification__meta-time\">{{ timestamp() }}</span>\n <span class=\"sui-notification__sep\" aria-hidden=\"true\">\u2219</span>\n }\n <span class=\"sui-notification__company-logo\">\n <ng-content select=\"[slot=company-logo]\" />\n </span>\n @if (description()) {\n <span class=\"sui-notification__desc-text\">{{ description() }}</span>\n }\n </p>\n }\n\n <!-- Type=file: attachment card (Figma: hug-content + clip attachment-line) -->\n @if (type() === 'file') {\n <div class=\"sui-notification__file\">\n <sui-icon\n class=\"sui-notification__file-icon\"\n name=\"attachment-line\"\n [size]=\"16\"\n aria-hidden=\"true\"\n />\n <ng-content select=\"[slot=file]\" />\n </div>\n }\n\n <!-- Type=message: response bubble -->\n @if (type() === 'message') {\n <div class=\"sui-notification__bubble\">\n <ng-content select=\"[slot=message]\" />\n </div>\n }\n\n <!-- Free custom content -->\n <ng-content />\n\n <!-- Actions slot (also hosts type=button Deny/Approve pair) -->\n <div class=\"sui-notification__actions\">\n <ng-content select=\"[slot=actions]\" />\n </div>\n </div>\n\n <!-- Hover affordance: more-2-line (notification item) = COMPONENTE\n sui-compact-button (variantStyle ghost: transparent + hover bg-weak-50,\n radius-6, icon 20 = size large), NO un <button> maqueta. El posicionamiento\n absoluto y el reveal on-hover (opacity 0\u21921) los aporta `.sui-notification__more`. -->\n @if (showMore()) {\n <sui-compact-button\n class=\"sui-notification__more\"\n icon=\"more-2-line\"\n variantStyle=\"ghost\"\n size=\"large\"\n ariaLabel=\"M\u00E1s opciones\"\n (clicked)=\"onMore($event)\"\n />\n }\n\n @if (dismissible()) {\n <!-- Cierre = COMPONENTE sui-compact-button (variantStyle modifiable \u2192 el icono\n hereda el currentColor del per-style `.sui-notification__close`), NO un\n <button> maqueta. icon 16 = size medium (patr\u00F3n canon sui-alert). -->\n <sui-compact-button\n class=\"sui-notification__close\"\n icon=\"close-line\"\n variantStyle=\"modifiable\"\n size=\"medium\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"onDismiss()\"\n />\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-notification{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:var(--sui-radius-12);overflow:hidden;border:1px solid transparent;box-sizing:border-box}.sui-notification.sui-notification--has-avatar{padding:12px;gap:15px;border:none}.sui-notification[data-sui-style=filled]{border:none;box-shadow:var(--sui-custom-shadow-small)}.sui-notification[data-sui-style=filled] .sui-notification__title,.sui-notification[data-sui-style=filled] .sui-notification__description,.sui-notification[data-sui-style=filled] .sui-notification__icon{color:var(--sui-static-white)}.sui-notification[data-sui-style=filled] .sui-notification__time,.sui-notification[data-sui-style=filled] .sui-notification__close{color:var(--sui-static-white);opacity:.72}.sui-notification[data-sui-style=filled] .sui-notification__dot{background:var(--sui-static-white)}.sui-notification[data-sui-style=filled][data-sui-variant=info]{background:var(--sui-state-information-base)}.sui-notification[data-sui-style=filled][data-sui-variant=success]{background:var(--sui-state-success-base)}.sui-notification[data-sui-style=filled][data-sui-variant=warning]{background:var(--sui-state-warning-base)}.sui-notification[data-sui-style=filled][data-sui-variant=error]{background:var(--sui-state-error-base)}.sui-notification[data-sui-style=filled][data-sui-variant=feature]{background:var(--sui-state-feature-base)}.sui-notification[data-sui-style=filled][data-sui-variant=default]{background:var(--sui-bg-strong-950)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__title,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__description,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__time,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__close{color:var(--sui-text-white-0)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__icon{color:var(--sui-icon-white-0)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__dot{background:var(--sui-text-white-0)}.sui-notification[data-sui-style=light]{border:none}.sui-notification[data-sui-style=light] .sui-notification__title,.sui-notification[data-sui-style=light] .sui-notification__description{color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=light] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=light][data-sui-variant=info]{background:var(--sui-state-information-light)}.sui-notification[data-sui-style=light][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification[data-sui-style=light][data-sui-variant=success]{background:var(--sui-state-success-light)}.sui-notification[data-sui-style=light][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification[data-sui-style=light][data-sui-variant=warning]{background:var(--sui-state-warning-light)}.sui-notification[data-sui-style=light][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification[data-sui-style=light][data-sui-variant=error]{background:var(--sui-state-error-light)}.sui-notification[data-sui-style=light][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification[data-sui-style=light][data-sui-variant=feature]{background:var(--sui-state-feature-light)}.sui-notification[data-sui-style=light][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification[data-sui-style=light][data-sui-variant=default]{background:var(--sui-bg-weak-50)}.sui-notification[data-sui-style=lighter] .sui-notification__title{color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=lighter] .sui-notification__description{color:var(--sui-text-strong-950);opacity:.72}.sui-notification[data-sui-style=lighter] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=lighter][data-sui-variant=info]{background:var(--sui-state-information-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=success]{background:var(--sui-state-success-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=warning]{background:var(--sui-state-warning-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=error]{background:var(--sui-state-error-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=feature]{background:var(--sui-state-feature-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=default]{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200)}.sui-notification:not([data-sui-style]):not(.sui-notification--has-avatar),.sui-notification[data-sui-style=stroke]:not(.sui-notification--has-avatar){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);box-shadow:var(--sui-custom-shadow-small)}.sui-notification:not([data-sui-style]) .sui-notification__title,.sui-notification[data-sui-style=stroke] .sui-notification__title{color:var(--sui-text-strong-950)}.sui-notification:not([data-sui-style]) .sui-notification__description,.sui-notification[data-sui-style=stroke] .sui-notification__description{color:var(--sui-text-sub-600)}.sui-notification:not([data-sui-style]) .sui-notification__close,.sui-notification[data-sui-style=stroke] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification:not([data-sui-style])[data-sui-variant=info] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification:not([data-sui-style])[data-sui-variant=success] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification:not([data-sui-style])[data-sui-variant=warning] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification:not([data-sui-style])[data-sui-variant=error] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification:not([data-sui-style])[data-sui-variant=feature] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification__avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--sui-bg-strong-950)}.sui-notification__avatar img{width:100%;height:100%;object-fit:cover;display:block}.sui-notification__avatar-initials{font-family:var(--sui-font-sans);font-size:14px;font-weight:600;line-height:1;color:var(--sui-text-white-0);text-transform:uppercase;letter-spacing:.02em;-webkit-user-select:none;user-select:none}.sui-notification__icon{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;margin-top:2px}.sui-notification__content{display:flex;flex:1 0 0;flex-direction:column;gap:4px;min-width:0}.sui-notification__header{display:flex;align-items:center;gap:6px;min-width:0}.sui-notification__title{margin:0;flex:1 0 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}.sui-notification__dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--sui-primary-base)}:host([data-sui-show-more]) .sui-notification__time{margin-right:32px}.sui-notification__time{flex-shrink:0;margin-left:auto;font-family:var(--sui-font-sans);font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-soft-400);white-space:nowrap}.sui-notification__description{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}.sui-notification__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}.sui-notification__actions:empty{display:none}.sui-notification__close{flex-shrink:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification__close:hover{opacity:1!important}.sui-notification--hoverable{cursor:pointer;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification--hoverable .sui-notification__more{opacity:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification--hoverable:hover,.sui-notification--hoverable.sui-notification--active{background:var(--sui-bg-weak-50)}.sui-notification--hoverable:hover .sui-notification__more,.sui-notification--hoverable.sui-notification--active .sui-notification__more{opacity:1}.sui-notification__description{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.sui-notification__meta-time{flex-shrink:0;color:var(--sui-text-soft-400)}.sui-notification__sep{flex-shrink:0;color:var(--sui-text-soft-400);-webkit-user-select:none;user-select:none}.sui-notification__company-logo{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sui-notification__company-logo:empty{display:none}.sui-notification__company-logo ::ng-deep img,.sui-notification__company-logo ::ng-deep svg{width:16px;height:16px;border-radius:var(--sui-radius-full);object-fit:cover;display:block}.sui-notification__desc-text{min-width:0}.sui-notification__file{align-self:flex-start;max-width:100%;display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:8px 10px;border-radius:var(--sui-radius-8);border:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-shadow:var(--sui-regular-shadow-x-small);box-sizing:border-box;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-notification__file ::ng-deep .sui-notification__file-size{color:var(--sui-text-soft-400)}.sui-notification__file-icon{flex-shrink:0;color:var(--sui-text-sub-600)}.sui-notification__bubble{align-self:flex-start;max-width:100%;margin-top:8px;padding:8px 12px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);border-radius:4px 8px 10px;box-sizing:border-box;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-sub-600);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-notification__bubble:empty{display:none}.sui-notification__more{position:absolute;top:12px;right:12px;flex-shrink:0}\n"] }]
|
|
11589
11610
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], variantStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "variantStyle", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], timestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "timestamp", required: false }] }], avatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatar", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], unread: [{ type: i0.Input, args: [{ isSignal: true, alias: "unread", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], showMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMore", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], moreClicked: [{ type: i0.Output, args: ["moreClicked"] }] } });
|
|
11590
11611
|
|
|
11591
11612
|
/**
|
|
@@ -11838,13 +11859,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
11838
11859
|
* SUI Page Header — header reutilizable para cada page del empresa.
|
|
11839
11860
|
*
|
|
11840
11861
|
* Reemplaza al topbar contextual en mobile. Cada page lo coloca arriba del
|
|
11841
|
-
* todo (antes de cualquier contenido)
|
|
11842
|
-
*
|
|
11862
|
+
* todo (antes de cualquier contenido) y deja un espacio visual coherente
|
|
11863
|
+
* entre pages. El safe-area-inset-top lo maneja el layout/container de la
|
|
11864
|
+
* página, NO este componente (padding vertical fijo, sin env()).
|
|
11843
11865
|
*
|
|
11844
11866
|
* Slots:
|
|
11845
|
-
* - default → contenido principal (cards, listas, etc.)
|
|
11846
11867
|
* - [slot=actions] → botones a la derecha (siempre visibles, no scrollean
|
|
11847
11868
|
* con la página). Útil para "Guardar", "Agregar", filtros.
|
|
11869
|
+
* No hay slot default: el contenido de la página va DESPUÉS del header,
|
|
11870
|
+
* no dentro — cualquier contenido proyectado sin slot="actions" se descarta.
|
|
11848
11871
|
*
|
|
11849
11872
|
* Inputs:
|
|
11850
11873
|
* - title: string visible (h1)
|
|
@@ -12361,13 +12384,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
12361
12384
|
* (el component_set no publica variant Focus distinto del Hover/Active). Es
|
|
12362
12385
|
* extensión de a11y del proyecto, no rompe fidelidad visual con Figma.
|
|
12363
12386
|
*
|
|
12364
|
-
*
|
|
12365
|
-
* - type='card-provider' (515:4374): slot 32×24 radius-4 para logo de tarjeta
|
|
12366
|
-
*
|
|
12367
|
-
* - type='
|
|
12368
|
-
*
|
|
12369
|
-
*
|
|
12370
|
-
*
|
|
12387
|
+
* IMPLEMENTED 2026-07-21 (types completos del set Figma):
|
|
12388
|
+
* - type='card-provider' (515:4374): slot 32×24 radius-4 para logo de tarjeta
|
|
12389
|
+
* (imageUrl).
|
|
12390
|
+
* - type='brand' (515:4383): slot 40×40 logo externo sin frame
|
|
12391
|
+
* (sui-brand-logo via [brand], o imageUrl circular de fallback).
|
|
12392
|
+
* - type='company' (515:4392): slot 40×40 circle radius-full
|
|
12393
|
+
* (imageUrl, fallback sui-avatar con iniciales del label).
|
|
12371
12394
|
*
|
|
12372
12395
|
* Form integration:
|
|
12373
12396
|
* - Implementa ControlValueAccessor: usable con [(ngModel)] / [formControl].
|
|
@@ -12489,7 +12512,7 @@ class SuiRadioCard {
|
|
|
12489
12512
|
useExisting: forwardRef(() => SuiRadioCard),
|
|
12490
12513
|
multi: true,
|
|
12491
12514
|
},
|
|
12492
|
-
], ngImport: i0, template: "<!-- Leading slot \u2014 solo basic / left-icon / avatar (Figma 515:4356/4365) -->\n@if (type() === 'left-icon') {\n <div class=\"sui-radio-card__leading sui-radio-card__leading--icon\" aria-hidden=\"true\">\n @if (icon()) {\n <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n } @else if (emoji()) {\n <sui-emoji [name]=\"emoji()\" size=\"md\" />\n } @else if (iconSrc()) {\n <sui-emoji [src]=\"iconSrc()\" size=\"full\" />\n }\n </div>\n} @else if (type() === 'avatar') {\n <!-- sui-avatar maneja fallback autom\u00E1tico a iniciales si la imagen falla. -->\n <sui-avatar\n class=\"sui-radio-card__leading sui-radio-card__leading--avatar\"\n size=\"lg\"\n [src]=\"imageUrl()\"\n [initials]=\"initialsFromLabel()\" />\n} @else if (type() === 'card-provider') {\n <!-- Figma 515:4374 \u2014 tile 32\u00D724 rounded-4 con el logo del provider. -->\n <div class=\"sui-radio-card__leading sui-radio-card__leading--provider\" aria-hidden=\"true\">\n @if (imageUrl()) {\n <img [src]=\"imageUrl()\" alt=\"\" />\n }\n </div>\n} @else if (type() === 'brand') {\n <!-- Figma 515:4383 \u2014 brand logo 40px (cat\u00E1logo sui-brand-logo o imageUrl). -->\n @if (brand(); as b) {\n <sui-brand-logo class=\"sui-radio-card__leading sui-radio-card__leading--brand\" [company]=\"b\" size=\"xl\" />\n } @else if (imageUrl()) {\n <div class=\"sui-radio-card__leading sui-radio-card__leading--brand\" aria-hidden=\"true\">\n <img [src]=\"imageUrl()\" alt=\"\" />\n </div>\n }\n} @else if (type() === 'company') {\n <!-- Figma 515:4392 \u2014 logo
|
|
12515
|
+
], ngImport: i0, template: "<!-- Leading slot \u2014 solo basic / left-icon / avatar (Figma 515:4356/4365) -->\n@if (type() === 'left-icon') {\n <div class=\"sui-radio-card__leading sui-radio-card__leading--icon\" aria-hidden=\"true\">\n @if (icon()) {\n <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n } @else if (emoji()) {\n <sui-emoji [name]=\"emoji()\" size=\"md\" />\n } @else if (iconSrc()) {\n <sui-emoji [src]=\"iconSrc()\" size=\"full\" />\n }\n </div>\n} @else if (type() === 'avatar') {\n <!-- sui-avatar maneja fallback autom\u00E1tico a iniciales si la imagen falla. -->\n <sui-avatar\n class=\"sui-radio-card__leading sui-radio-card__leading--avatar\"\n size=\"lg\"\n [src]=\"imageUrl()\"\n [initials]=\"initialsFromLabel()\" />\n} @else if (type() === 'card-provider') {\n <!-- Figma 515:4374 \u2014 tile 32\u00D724 rounded-4 con el logo del provider. -->\n <div class=\"sui-radio-card__leading sui-radio-card__leading--provider\" aria-hidden=\"true\">\n @if (imageUrl()) {\n <img [src]=\"imageUrl()\" alt=\"\" />\n }\n </div>\n} @else if (type() === 'brand') {\n <!-- Figma 515:4383 \u2014 brand logo 40px (cat\u00E1logo sui-brand-logo o imageUrl). -->\n @if (brand(); as b) {\n <sui-brand-logo class=\"sui-radio-card__leading sui-radio-card__leading--brand\" [company]=\"b\" size=\"xl\" />\n } @else if (imageUrl()) {\n <div class=\"sui-radio-card__leading sui-radio-card__leading--brand\" aria-hidden=\"true\">\n <img [src]=\"imageUrl()\" alt=\"\" />\n </div>\n }\n} @else if (type() === 'company') {\n <!-- Figma 515:4392 \u2014 logo circular 40\u00D740 radius-full. -->\n <div class=\"sui-radio-card__leading sui-radio-card__leading--company\" aria-hidden=\"true\">\n @if (imageUrl()) {\n <img [src]=\"imageUrl()\" alt=\"\" />\n } @else {\n <sui-avatar size=\"lg\" [initials]=\"initialsFromLabel()\" />\n }\n </div>\n}\n\n<!-- Texto: Title row + description -->\n<div class=\"sui-radio-card__text\">\n <div class=\"sui-radio-card__title\">\n @if (label()) {\n <span class=\"sui-radio-card__label\">{{ label() }}</span>\n }\n @if (sublabel()) {\n <span class=\"sui-radio-card__sublabel\">{{ sublabel() }}</span>\n }\n @if (badgeCfg(); as bcfg) {\n <sui-badge\n class=\"sui-radio-card__badge\"\n [color]=\"bcfg.color ?? 'blue'\"\n [variant]=\"bcfg.variant ?? 'light'\"\n [size]=\"bcfg.size ?? 'small'\"\n >{{ bcfg.label }}</sui-badge>\n }\n </div>\n @if (description()) {\n <p class=\"sui-radio-card__description\">{{ description() }}</p>\n }\n</div>\n\n<!-- Radio dot 20\u00D720 (Figma 515:4243 \u2192 515:4244 bg + 515:4245 box) -->\n<span class=\"sui-radio-card__radio\" aria-hidden=\"true\" [style.width.px]=\"radioPx()\" [style.height.px]=\"radioPx()\">\n <span class=\"sui-radio-card__radio-bg\"></span>\n <span class=\"sui-radio-card__radio-box\"></span>\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;box-sizing:border-box;align-items:flex-start;gap:14px;padding:16px;width:100%;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-12, 12px);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));cursor:pointer;outline:none;-webkit-user-select:none;user-select:none;font-family:var(--sui-font-sans, var(--font-sans, sans-serif));touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),border-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),transform var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}@media(hover:hover)and (pointer:fine){:host(:hover:not([data-sui-disabled]):not([data-sui-checked])){background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent;box-shadow:none}}:host([data-sui-checked]){border-color:var(--sui-primary-base, #fa7319);box-shadow:none;background:var(--sui-bg-white-0, #fff)}@media(hover:hover)and (pointer:fine){:host([data-sui-checked]:hover:not([data-sui-disabled])){background:var(--sui-bg-weak-50, #f7f7f7)}}:host(:focus-visible:not([data-sui-disabled])){border-color:var(--sui-primary-base, #fa7319);box-shadow:0 0 0 3px color-mix(in oklab,var(--sui-primary-base, #fa7319) 16%,transparent)}:host([data-sui-disabled]){cursor:not-allowed;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);box-shadow:none}:host([data-sui-disabled]) .sui-radio-card__label{color:var(--sui-text-sub-600, #5c5c5c)}:host([data-sui-disabled]) .sui-radio-card__sublabel,:host([data-sui-disabled]) .sui-radio-card__description{color:var(--sui-text-soft-400, #a3a3a3)}:host([data-sui-disabled]) .sui-radio-card__badge{background:transparent;border:1px solid var(--sui-stroke-soft-200, #ebebeb);color:var(--sui-text-disabled-300, #d1d1d1)}:host([data-sui-disabled]) .sui-radio-card__radio-bg,:host([data-sui-disabled][data-sui-checked]) .sui-radio-card__radio-bg{background:var(--sui-bg-soft-200, #ebebeb)}:host([data-sui-disabled]:not([data-sui-checked])) .sui-radio-card__radio-box{display:none}:host(:active:not([data-sui-disabled])){transform:scale(.99)}.sui-radio-card__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.sui-radio-card__leading--icon{box-sizing:border-box;width:40px;height:40px;padding:10px;border-radius:var(--sui-radius-full, 999px);background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));color:var(--sui-text-sub-600, #5c5c5c)}:host([data-sui-leading-fill]) .sui-radio-card__leading--icon{padding:0;border:none;background:none;box-shadow:none;border-radius:0;overflow:visible;display:flex;align-items:center;justify-content:center}:host([data-sui-leading-fill]) .sui-radio-card__leading--icon sui-emoji{display:block;width:100%;height:100%}:host([data-sui-type=avatar]) .sui-radio-card__leading--avatar{width:40px;height:40px}.sui-radio-card__text{display:flex;flex-direction:column;gap:4px;align-items:flex-start;flex:1 1 auto;min-width:0;align-self:stretch}.sui-radio-card__text:not(:has(.sui-radio-card__description)){justify-content:center}.sui-radio-card__title{display:flex;gap:4px;align-items:center;flex-wrap:wrap}.sui-radio-card__label{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-radio-card__sublabel{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-radio-card__description{margin:0;font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-radio-card__radio{position:relative;flex-shrink:0;width:20px;height:20px;align-self:flex-start}.sui-radio-card__radio-bg{position:absolute;inset:10%;border-radius:var(--sui-radius-full, 999px);background:var(--sui-bg-soft-200, #ebebeb);transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}.sui-radio-card__radio-box{position:absolute;inset:17.5%;border-radius:var(--sui-radius-full, 999px);background:var(--sui-bg-white-0, #fff);box-shadow:0 2px 4px -2px #1b1c1d1f;transition:inset var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}@media(hover:hover)and (pointer:fine){:host(:hover:not([data-sui-disabled]):not([data-sui-checked])) .sui-radio-card__radio-bg{background:var(--sui-bg-sub-300, #d1d1d1)}}:host([data-sui-checked]) .sui-radio-card__radio-bg{background:var(--sui-primary-base, #fa7319)}:host([data-sui-checked]) .sui-radio-card__radio-box{inset:30%;box-shadow:none;background:var(--sui-static-white, #ffffff)}.sui-radio-card__leading--provider{width:32px;height:24px;border-radius:4px;overflow:hidden;flex-shrink:0}.sui-radio-card__leading--provider img{width:100%;height:100%;object-fit:cover;display:block}.sui-radio-card__leading--brand{width:40px;height:40px;flex-shrink:0}.sui-radio-card__leading--brand img{width:100%;height:100%;object-fit:cover;border-radius:999px;display:block}.sui-radio-card__leading--company{width:40px;height:40px;border-radius:var(--sui-radius-full, 999px);overflow:hidden;flex-shrink:0}.sui-radio-card__leading--company img{width:100%;height:100%;object-fit:cover;display:block}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiEmoji, selector: "sui-emoji", inputs: ["name", "src", "size", "ariaLabel"] }, { kind: "component", type: SuiAvatar, selector: "sui-avatar", inputs: ["size", "src", "alt", "initials", "color", "status", "memojiSrc", "illustrationSrc", "icon", "companyLogoSrc", "topBadge", "bgColor"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }, { kind: "component", type: SuiBrandLogo, selector: "sui-brand-logo", inputs: ["company", "variant", "size", "href", "target", "rel", "disabled", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12493
12516
|
}
|
|
12494
12517
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiRadioCard, decorators: [{
|
|
12495
12518
|
type: Component,
|
|
@@ -12519,7 +12542,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
12519
12542
|
/* iOS WKWebView fix — sin esto :active stickea 300-500ms en standalone pages */
|
|
12520
12543
|
'(touchstart)': '$event.currentTarget',
|
|
12521
12544
|
'(touchend)': '$any($event.currentTarget).blur()',
|
|
12522
|
-
}, template: "<!-- Leading slot \u2014 solo basic / left-icon / avatar (Figma 515:4356/4365) -->\n@if (type() === 'left-icon') {\n <div class=\"sui-radio-card__leading sui-radio-card__leading--icon\" aria-hidden=\"true\">\n @if (icon()) {\n <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n } @else if (emoji()) {\n <sui-emoji [name]=\"emoji()\" size=\"md\" />\n } @else if (iconSrc()) {\n <sui-emoji [src]=\"iconSrc()\" size=\"full\" />\n }\n </div>\n} @else if (type() === 'avatar') {\n <!-- sui-avatar maneja fallback autom\u00E1tico a iniciales si la imagen falla. -->\n <sui-avatar\n class=\"sui-radio-card__leading sui-radio-card__leading--avatar\"\n size=\"lg\"\n [src]=\"imageUrl()\"\n [initials]=\"initialsFromLabel()\" />\n} @else if (type() === 'card-provider') {\n <!-- Figma 515:4374 \u2014 tile 32\u00D724 rounded-4 con el logo del provider. -->\n <div class=\"sui-radio-card__leading sui-radio-card__leading--provider\" aria-hidden=\"true\">\n @if (imageUrl()) {\n <img [src]=\"imageUrl()\" alt=\"\" />\n }\n </div>\n} @else if (type() === 'brand') {\n <!-- Figma 515:4383 \u2014 brand logo 40px (cat\u00E1logo sui-brand-logo o imageUrl). -->\n @if (brand(); as b) {\n <sui-brand-logo class=\"sui-radio-card__leading sui-radio-card__leading--brand\" [company]=\"b\" size=\"xl\" />\n } @else if (imageUrl()) {\n <div class=\"sui-radio-card__leading sui-radio-card__leading--brand\" aria-hidden=\"true\">\n <img [src]=\"imageUrl()\" alt=\"\" />\n </div>\n }\n} @else if (type() === 'company') {\n <!-- Figma 515:4392 \u2014 logo
|
|
12545
|
+
}, template: "<!-- Leading slot \u2014 solo basic / left-icon / avatar (Figma 515:4356/4365) -->\n@if (type() === 'left-icon') {\n <div class=\"sui-radio-card__leading sui-radio-card__leading--icon\" aria-hidden=\"true\">\n @if (icon()) {\n <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n } @else if (emoji()) {\n <sui-emoji [name]=\"emoji()\" size=\"md\" />\n } @else if (iconSrc()) {\n <sui-emoji [src]=\"iconSrc()\" size=\"full\" />\n }\n </div>\n} @else if (type() === 'avatar') {\n <!-- sui-avatar maneja fallback autom\u00E1tico a iniciales si la imagen falla. -->\n <sui-avatar\n class=\"sui-radio-card__leading sui-radio-card__leading--avatar\"\n size=\"lg\"\n [src]=\"imageUrl()\"\n [initials]=\"initialsFromLabel()\" />\n} @else if (type() === 'card-provider') {\n <!-- Figma 515:4374 \u2014 tile 32\u00D724 rounded-4 con el logo del provider. -->\n <div class=\"sui-radio-card__leading sui-radio-card__leading--provider\" aria-hidden=\"true\">\n @if (imageUrl()) {\n <img [src]=\"imageUrl()\" alt=\"\" />\n }\n </div>\n} @else if (type() === 'brand') {\n <!-- Figma 515:4383 \u2014 brand logo 40px (cat\u00E1logo sui-brand-logo o imageUrl). -->\n @if (brand(); as b) {\n <sui-brand-logo class=\"sui-radio-card__leading sui-radio-card__leading--brand\" [company]=\"b\" size=\"xl\" />\n } @else if (imageUrl()) {\n <div class=\"sui-radio-card__leading sui-radio-card__leading--brand\" aria-hidden=\"true\">\n <img [src]=\"imageUrl()\" alt=\"\" />\n </div>\n }\n} @else if (type() === 'company') {\n <!-- Figma 515:4392 \u2014 logo circular 40\u00D740 radius-full. -->\n <div class=\"sui-radio-card__leading sui-radio-card__leading--company\" aria-hidden=\"true\">\n @if (imageUrl()) {\n <img [src]=\"imageUrl()\" alt=\"\" />\n } @else {\n <sui-avatar size=\"lg\" [initials]=\"initialsFromLabel()\" />\n }\n </div>\n}\n\n<!-- Texto: Title row + description -->\n<div class=\"sui-radio-card__text\">\n <div class=\"sui-radio-card__title\">\n @if (label()) {\n <span class=\"sui-radio-card__label\">{{ label() }}</span>\n }\n @if (sublabel()) {\n <span class=\"sui-radio-card__sublabel\">{{ sublabel() }}</span>\n }\n @if (badgeCfg(); as bcfg) {\n <sui-badge\n class=\"sui-radio-card__badge\"\n [color]=\"bcfg.color ?? 'blue'\"\n [variant]=\"bcfg.variant ?? 'light'\"\n [size]=\"bcfg.size ?? 'small'\"\n >{{ bcfg.label }}</sui-badge>\n }\n </div>\n @if (description()) {\n <p class=\"sui-radio-card__description\">{{ description() }}</p>\n }\n</div>\n\n<!-- Radio dot 20\u00D720 (Figma 515:4243 \u2192 515:4244 bg + 515:4245 box) -->\n<span class=\"sui-radio-card__radio\" aria-hidden=\"true\" [style.width.px]=\"radioPx()\" [style.height.px]=\"radioPx()\">\n <span class=\"sui-radio-card__radio-bg\"></span>\n <span class=\"sui-radio-card__radio-box\"></span>\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;box-sizing:border-box;align-items:flex-start;gap:14px;padding:16px;width:100%;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-12, 12px);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));cursor:pointer;outline:none;-webkit-user-select:none;user-select:none;font-family:var(--sui-font-sans, var(--font-sans, sans-serif));touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),border-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),transform var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}@media(hover:hover)and (pointer:fine){:host(:hover:not([data-sui-disabled]):not([data-sui-checked])){background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent;box-shadow:none}}:host([data-sui-checked]){border-color:var(--sui-primary-base, #fa7319);box-shadow:none;background:var(--sui-bg-white-0, #fff)}@media(hover:hover)and (pointer:fine){:host([data-sui-checked]:hover:not([data-sui-disabled])){background:var(--sui-bg-weak-50, #f7f7f7)}}:host(:focus-visible:not([data-sui-disabled])){border-color:var(--sui-primary-base, #fa7319);box-shadow:0 0 0 3px color-mix(in oklab,var(--sui-primary-base, #fa7319) 16%,transparent)}:host([data-sui-disabled]){cursor:not-allowed;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);box-shadow:none}:host([data-sui-disabled]) .sui-radio-card__label{color:var(--sui-text-sub-600, #5c5c5c)}:host([data-sui-disabled]) .sui-radio-card__sublabel,:host([data-sui-disabled]) .sui-radio-card__description{color:var(--sui-text-soft-400, #a3a3a3)}:host([data-sui-disabled]) .sui-radio-card__badge{background:transparent;border:1px solid var(--sui-stroke-soft-200, #ebebeb);color:var(--sui-text-disabled-300, #d1d1d1)}:host([data-sui-disabled]) .sui-radio-card__radio-bg,:host([data-sui-disabled][data-sui-checked]) .sui-radio-card__radio-bg{background:var(--sui-bg-soft-200, #ebebeb)}:host([data-sui-disabled]:not([data-sui-checked])) .sui-radio-card__radio-box{display:none}:host(:active:not([data-sui-disabled])){transform:scale(.99)}.sui-radio-card__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.sui-radio-card__leading--icon{box-sizing:border-box;width:40px;height:40px;padding:10px;border-radius:var(--sui-radius-full, 999px);background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));color:var(--sui-text-sub-600, #5c5c5c)}:host([data-sui-leading-fill]) .sui-radio-card__leading--icon{padding:0;border:none;background:none;box-shadow:none;border-radius:0;overflow:visible;display:flex;align-items:center;justify-content:center}:host([data-sui-leading-fill]) .sui-radio-card__leading--icon sui-emoji{display:block;width:100%;height:100%}:host([data-sui-type=avatar]) .sui-radio-card__leading--avatar{width:40px;height:40px}.sui-radio-card__text{display:flex;flex-direction:column;gap:4px;align-items:flex-start;flex:1 1 auto;min-width:0;align-self:stretch}.sui-radio-card__text:not(:has(.sui-radio-card__description)){justify-content:center}.sui-radio-card__title{display:flex;gap:4px;align-items:center;flex-wrap:wrap}.sui-radio-card__label{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-radio-card__sublabel{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-radio-card__description{margin:0;font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-radio-card__radio{position:relative;flex-shrink:0;width:20px;height:20px;align-self:flex-start}.sui-radio-card__radio-bg{position:absolute;inset:10%;border-radius:var(--sui-radius-full, 999px);background:var(--sui-bg-soft-200, #ebebeb);transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}.sui-radio-card__radio-box{position:absolute;inset:17.5%;border-radius:var(--sui-radius-full, 999px);background:var(--sui-bg-white-0, #fff);box-shadow:0 2px 4px -2px #1b1c1d1f;transition:inset var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}@media(hover:hover)and (pointer:fine){:host(:hover:not([data-sui-disabled]):not([data-sui-checked])) .sui-radio-card__radio-bg{background:var(--sui-bg-sub-300, #d1d1d1)}}:host([data-sui-checked]) .sui-radio-card__radio-bg{background:var(--sui-primary-base, #fa7319)}:host([data-sui-checked]) .sui-radio-card__radio-box{inset:30%;box-shadow:none;background:var(--sui-static-white, #ffffff)}.sui-radio-card__leading--provider{width:32px;height:24px;border-radius:4px;overflow:hidden;flex-shrink:0}.sui-radio-card__leading--provider img{width:100%;height:100%;object-fit:cover;display:block}.sui-radio-card__leading--brand{width:40px;height:40px;flex-shrink:0}.sui-radio-card__leading--brand img{width:100%;height:100%;object-fit:cover;border-radius:999px;display:block}.sui-radio-card__leading--company{width:40px;height:40px;border-radius:var(--sui-radius-full, 999px);overflow:hidden;flex-shrink:0}.sui-radio-card__leading--company img{width:100%;height:100%;object-fit:cover;display:block}\n"] }]
|
|
12523
12546
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], emoji: [{ type: i0.Input, args: [{ isSignal: true, alias: "emoji", required: false }] }], iconSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSrc", required: false }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }], brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
|
|
12524
12547
|
|
|
12525
12548
|
// large/xlarge: project extension (no-Figma)
|
|
@@ -12761,6 +12784,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
12761
12784
|
* + border stroke/soft-200 + regular-shadow x-small (0 1px 2px rgba(10,13,20,.03));
|
|
12762
12785
|
* hover → bg weak-50 sin border ni shadow. Es la versión "tarjeta" del input de
|
|
12763
12786
|
* estrellas/corazones (distinta del bare 'inline' y del segmented 'bar').
|
|
12787
|
+
* Estado EMPTY: glyph RELLENO gris sólido ("Empty Filled" star-fill/heart-3-fill
|
|
12788
|
+
* en stroke/sub-300), NO el outline del inline — ver cellIconName().
|
|
12764
12789
|
* - 'bar' → 5 cells horizontales con border + padding (matches Rating Bar).
|
|
12765
12790
|
* Usado para input formulario (modal review en order-tracking, rate-order
|
|
12766
12791
|
* CSAT survey). Permite type='emoji'|'number' además de star/heart.
|
|
@@ -12779,9 +12804,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
12779
12804
|
* selected agrega bg weak-50. emoji: solo selected sale de grayscale.
|
|
12780
12805
|
*
|
|
12781
12806
|
* PENDING VERIFY (revisar en device / master-preview tras deploy):
|
|
12782
|
-
* - 'cell' appearance:
|
|
12783
|
-
*
|
|
12784
|
-
*
|
|
12807
|
+
* - 'cell' appearance: screenshot MCP de 532:4160 verificado 2026-07-23 —
|
|
12808
|
+
* confirmó que el empty es glyph RELLENO gris (fix aplicado en cellIconName).
|
|
12809
|
+
* Queda pendiente medir chrome fino en device (padding 12 / radius 10 /
|
|
12810
|
+
* icon 32 / shadow x-small).
|
|
12785
12811
|
* - 'bar-area' homologado a Figma 535:5057: card 132px = bar 36px + input 96px;
|
|
12786
12812
|
* textarea resize:none, min-height 72px, top-aligned (text node y=12 en Figma)
|
|
12787
12813
|
* - hover 'Empty Filled' star/heart: glyph relleno sólido en stroke/sub-300
|
|
@@ -13044,6 +13070,20 @@ class SuiRating {
|
|
|
13044
13070
|
return '';
|
|
13045
13071
|
return map[type][fill];
|
|
13046
13072
|
}
|
|
13073
|
+
/**
|
|
13074
|
+
* Icon name para el template iconCell (appearances 'inline' y 'cell').
|
|
13075
|
+
* En appearance='cell' el estado EMPTY renderiza el glyph RELLENO gris
|
|
13076
|
+
* (star-fill / heart-3-fill en stroke/sub-300) — Figma Rating Cell 532:4160
|
|
13077
|
+
* usa el atom "Empty Filled" (relleno sólido neutro), NO el outline
|
|
13078
|
+
* "Empty Line" del inline. Verificado contra screenshot MCP 2026-07-23.
|
|
13079
|
+
* inline mantiene el outline (Rating Items 532:4137 / Rating Review 532:4340).
|
|
13080
|
+
*/
|
|
13081
|
+
cellIconName(fill) {
|
|
13082
|
+
if (this.appearance() === 'cell' && fill === 'empty') {
|
|
13083
|
+
return this.iconName(this.type(), 'full');
|
|
13084
|
+
}
|
|
13085
|
+
return this.iconName(this.type(), fill);
|
|
13086
|
+
}
|
|
13047
13087
|
/**
|
|
13048
13088
|
* Icon name para una celda de bar/bar-area según su estado visual (Figma 535:4535).
|
|
13049
13089
|
* El glyph de HOVER ("Empty Filled") y SELECTED ("Full") es el mismo relleno sólido
|
|
@@ -13073,7 +13113,7 @@ class SuiRating {
|
|
|
13073
13113
|
useExisting: forwardRef(() => SuiRating),
|
|
13074
13114
|
multi: true,
|
|
13075
13115
|
},
|
|
13076
|
-
], ngImport: i0, template: "@switch (appearance()) {\n\n @case ('inline') {\n @if (alignment() === 'vertical') {\n <div class=\"sui-rating__icons\">\n @for (cell of cells(); track cell.index) {\n <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n }\n </div>\n @if (showValue() || reviewCount() !== null || reviewLink()) {\n <div class=\"sui-rating__meta sui-rating__meta--vertical\">\n <ng-container *ngTemplateOutlet=\"metaContent\" />\n </div>\n }\n } @else if (alignment() === 'horizontal') {\n <div class=\"sui-rating__icons\">\n @for (cell of cells(); track cell.index) {\n <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n }\n </div>\n @if (showValue() || reviewCount() !== null || reviewLink()) {\n <div class=\"sui-rating__meta sui-rating__meta--horizontal\">\n <ng-container *ngTemplateOutlet=\"metaContent\" />\n </div>\n }\n } @else {\n @for (cell of cells(); track cell.index) {\n <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n }\n }\n }\n\n @case ('cell') {\n <div class=\"sui-rating__cells\" (mouseleave)=\"onCellLeave()\">\n @for (cell of cells(); track cell.index) {\n <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n }\n </div>\n }\n\n @case ('bar') {\n <ng-container *ngTemplateOutlet=\"barRow\" />\n }\n\n @case ('bar-area') {\n <div class=\"sui-rating__area\">\n <ng-container *ngTemplateOutlet=\"barRow\" />\n <div class=\"sui-rating__area-input\">\n @if (readonly()) {\n <p class=\"sui-rating__area-text\" [class.sui-rating__area-text--placeholder]=\"!reason()\">\n {{ reason() || reasonPlaceholder() }}\n </p>\n } @else {\n <textarea\n class=\"sui-rating__area-textarea\"\n [rows]=\"reasonRows()\"\n [value]=\"reason()\"\n [placeholder]=\"reasonPlaceholder()\"\n [disabled]=\"disabledByForm()\"\n [attr.aria-label]=\"reasonPlaceholder()\"\n (input)=\"onReasonInput($event)\"\n (blur)=\"onTouched()\"></textarea>\n }\n </div>\n </div>\n }\n}\n\n<!-- Bar row (5 cells horizontal). Reusada por appearance='bar' y 'bar-area'. -->\n<ng-template #barRow>\n <div class=\"sui-rating__bar\" (mouseleave)=\"onCellLeave()\">\n @for (cell of cells(); track cell.index) {\n @if (readonly()) {\n <div\n class=\"sui-rating__bar-cell\"\n [attr.data-fill]=\"cell.fill\"\n [attr.data-cell-state]=\"cell.cellState\"\n role=\"radio\"\n [attr.aria-checked]=\"value() === cell.index\"\n [attr.aria-label]=\"cell.index + ' de ' + max()\">\n <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: cell }\" />\n </div>\n } @else {\n <button\n type=\"button\"\n class=\"sui-rating__bar-cell\"\n [attr.data-fill]=\"cell.fill\"\n [attr.data-cell-state]=\"cell.cellState\"\n [attr.data-selected]=\"value() === cell.index\"\n [disabled]=\"disabledByForm()\"\n role=\"radio\"\n [attr.aria-checked]=\"value() === cell.index\"\n [attr.aria-label]=\"cell.index + ' de ' + max()\"\n (click)=\"onCellClick(cell.index)\"\n (mouseenter)=\"onCellEnter(cell.index)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: cell }\" />\n </button>\n }\n }\n </div>\n</ng-template>\n\n<!-- Single icon (inline appearance). -->\n<ng-template #iconCell let-cell>\n @if (readonly()) {\n <span\n class=\"sui-rating__icon\"\n [attr.data-fill]=\"cell.fill\"\n [attr.data-cell-state]=\"cell.cellState\"\n role=\"radio\"\n [attr.aria-checked]=\"value() === cell.index\"\n [attr.aria-label]=\"cell.index + ' de ' + max()\">\n <sui-icon [name]=\"iconName(type(), cell.fill)\" [size]=\"iconPx()\" />\n </span>\n } @else {\n <button\n type=\"button\"\n class=\"sui-rating__icon\"\n [attr.data-fill]=\"cell.fill\"\n [attr.data-cell-state]=\"cell.cellState\"\n [attr.data-selected]=\"value() === cell.index\"\n [disabled]=\"disabledByForm()\"\n role=\"radio\"\n [attr.aria-checked]=\"value() === cell.index\"\n [attr.aria-label]=\"cell.index + ' de ' + max()\"\n (click)=\"onCellClick(cell.index)\"\n (mouseenter)=\"onCellEnter(cell.index)\"\n (mouseleave)=\"onCellLeave()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <sui-icon [name]=\"iconName(type(), cell.fill === 'empty' ? 'empty' : 'full')\" [size]=\"iconPx()\" />\n </button>\n }\n</ng-template>\n\n<!-- Cell content (bar / bar-area appearance): seg\u00FAn type.\n star/heart usan barIconName(cellState) para distinguir:\n default \u2192 outline | hover \u2192 relleno gris (Empty Filled) | selected \u2192 relleno color. -->\n<ng-template #cellContent let-cell>\n @switch (type()) {\n @case ('star') {\n <sui-icon [name]=\"barIconName('star', cell.cellState)\" [size]=\"20\" />\n }\n @case ('heart') {\n <sui-icon [name]=\"barIconName('heart', cell.cellState)\" [size]=\"20\" />\n }\n @case ('emoji') {\n <sui-emoji class=\"sui-rating__emoji\" [name]=\"cell.emoji\" size=\"sm\" />\n }\n @case ('number') {\n <span class=\"sui-rating__number\">{{ cell.index }}</span>\n }\n }\n</ng-template>\n\n<!-- Meta (value + reviewCount + link), inline appearance only -->\n<ng-template #metaContent>\n @if (showValue()) {\n <span class=\"sui-rating__value\">{{ valueLabel() }}</span>\n }\n @if (showValue() && reviewCount() !== null) {\n <span class=\"sui-rating__sep\" aria-hidden=\"true\">\u2219</span>\n }\n @if (reviewCount() !== null) {\n <span class=\"sui-rating__count\">{{ reviewCountLabel() }} Ratings</span>\n }\n @if (reviewLink(); as link) {\n @if (link.href) {\n <a class=\"sui-rating__link\" [href]=\"link.href\">{{ link.label }}</a>\n } @else {\n <button type=\"button\" class=\"sui-rating__link\">{{ link.label }}</button>\n }\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;font-family:var(--sui-font-sans);align-items:center;gap:2px}:host([data-disabled]){opacity:.5;pointer-events:none}:host([data-appearance=inline][data-alignment=inline]){flex-direction:row;flex-wrap:nowrap}:host([data-appearance=inline][data-alignment=vertical]){flex-direction:column;align-items:flex-start;gap:8px}:host([data-appearance=inline][data-alignment=horizontal]){flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}.sui-rating__icons{display:inline-flex;align-items:center;gap:2px;flex-shrink:0}.sui-rating__icon{appearance:none;border:0;margin:0;padding:0;background:transparent;font:inherit;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sui-stroke-sub-300, #d1d1d1);transition:color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-type=star]) .sui-rating__icon[data-fill=full],:host([data-type=star]) .sui-rating__icon[data-fill=half]{color:var(--sui-yellow-500, #f6b51e)}:host([data-type=heart]) .sui-rating__icon[data-fill=full],:host([data-type=heart]) .sui-rating__icon[data-fill=half]{color:var(--sui-state-error-base, #fb3748)}button.sui-rating__icon{cursor:pointer;border-radius:4px}button.sui-rating__icon:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px}.sui-rating__meta{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}.sui-rating__meta--vertical{align-self:flex-start}.sui-rating__value,.sui-rating__count{font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap}.sui-rating__sep{color:var(--sui-text-strong-950);margin:0 2px}.sui-rating__link{appearance:none;border:0;background:transparent;font:inherit;padding:0;margin:0;cursor:pointer;font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);color:var(--sui-text-sub-600);text-decoration:underline;text-decoration-skip-ink:none;text-underline-offset:2px;white-space:nowrap}.sui-rating__link:hover{color:var(--sui-text-strong-950)}.sui-rating__link:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px;border-radius:2px}:host([data-appearance=cell]){display:inline-flex;flex-direction:row;flex-wrap:nowrap;gap:8px}.sui-rating__cells{display:inline-flex;align-items:center;gap:8px;flex-shrink:0}:host([data-appearance=cell]) .sui-rating__icon{padding:12px;border-radius:var(--sui-radius-10, 10px);border:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box;transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),border-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-appearance=cell]) .sui-rating__icon[data-cell-state=hover]{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}:host([data-appearance=bar]){display:inline-block;align-items:stretch}:host([data-appearance=bar-area]){display:block;width:100%}.sui-rating__bar{display:inline-flex;align-items:stretch;border:1px solid var(--sui-stroke-soft-200);border-radius:0;overflow:hidden;background:var(--sui-bg-white-0)}:host([data-appearance=bar-area]) .sui-rating__bar{display:flex;width:100%;border:0;border-bottom:1px solid var(--sui-stroke-soft-200);border-radius:0;background:transparent}.sui-rating__bar-cell{appearance:none;margin:0;font:inherit;flex-shrink:0;width:64px;min-height:36px;display:flex;align-items:center;justify-content:center;padding:8px 4px;background:var(--sui-bg-white-0);border:0;border-left:1px solid var(--sui-stroke-soft-200);cursor:default;color:var(--sui-stroke-sub-300);transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}.sui-rating__bar-cell:first-child{border-left:0}:host([data-appearance=bar-area]) .sui-rating__bar-cell{flex:1 0 0;width:auto;min-width:0;background:transparent}button.sui-rating__bar-cell{cursor:pointer}button.sui-rating__bar-cell:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:-2px}:host([data-type=star]) .sui-rating__bar-cell[data-cell-state=selected]{color:var(--sui-yellow-500, #f6b51e)}:host([data-type=heart]) .sui-rating__bar-cell[data-cell-state=selected]{color:var(--sui-state-error-base, #fb3748)}:host([data-type=number]) .sui-rating__bar-cell[data-cell-state=hover] .sui-rating__number,:host([data-type=number]) .sui-rating__bar-cell[data-cell-state=selected] .sui-rating__number{color:var(--sui-text-strong-950)}:host([data-type=number]) .sui-rating__bar-cell[data-cell-state=selected],:host([data-type=emoji]) .sui-rating__bar-cell[data-cell-state=selected]{background:var(--sui-bg-weak-50)}.sui-rating__number{font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);color:var(--sui-text-sub-600);text-align:center;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-rating__emoji{display:inline-flex;align-items:center;justify-content:center;filter:grayscale(.5);opacity:.55;transition:filter var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),opacity var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-type=emoji]) .sui-rating__bar-cell[data-cell-state=selected] .sui-rating__emoji{filter:grayscale(0);opacity:1}.sui-rating__area{display:flex;flex-direction:column;align-items:stretch;width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-12, 12px);overflow:hidden}.sui-rating__area-input{display:flex;flex:1 0 0;align-items:flex-start;justify-content:flex-start;padding:12px;background:var(--sui-bg-white-0)}.sui-rating__area-textarea{appearance:none;display:block;width:100%;min-height:72px;border:0;margin:0;padding:0;background:transparent;resize:none;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-rating__area-textarea::placeholder{color:var(--sui-text-soft-400)}.sui-rating__area-textarea:focus-visible{outline:none}.sui-rating__area-text{width:100%;min-height:72px;margin:0;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-rating__area-text--placeholder{color:var(--sui-text-soft-400)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiEmoji, selector: "sui-emoji", inputs: ["name", "src", "size", "ariaLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13116
|
+
], ngImport: i0, template: "@switch (appearance()) {\n\n @case ('inline') {\n @if (alignment() === 'vertical') {\n <div class=\"sui-rating__icons\">\n @for (cell of cells(); track cell.index) {\n <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n }\n </div>\n @if (showValue() || reviewCount() !== null || reviewLink()) {\n <div class=\"sui-rating__meta sui-rating__meta--vertical\">\n <ng-container *ngTemplateOutlet=\"metaContent\" />\n </div>\n }\n } @else if (alignment() === 'horizontal') {\n <div class=\"sui-rating__icons\">\n @for (cell of cells(); track cell.index) {\n <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n }\n </div>\n @if (showValue() || reviewCount() !== null || reviewLink()) {\n <div class=\"sui-rating__meta sui-rating__meta--horizontal\">\n <ng-container *ngTemplateOutlet=\"metaContent\" />\n </div>\n }\n } @else {\n @for (cell of cells(); track cell.index) {\n <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n }\n }\n }\n\n @case ('cell') {\n <div class=\"sui-rating__cells\" (mouseleave)=\"onCellLeave()\">\n @for (cell of cells(); track cell.index) {\n <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n }\n </div>\n }\n\n @case ('bar') {\n <ng-container *ngTemplateOutlet=\"barRow\" />\n }\n\n @case ('bar-area') {\n <div class=\"sui-rating__area\">\n <ng-container *ngTemplateOutlet=\"barRow\" />\n <div class=\"sui-rating__area-input\">\n @if (readonly()) {\n <p class=\"sui-rating__area-text\" [class.sui-rating__area-text--placeholder]=\"!reason()\">\n {{ reason() || reasonPlaceholder() }}\n </p>\n } @else {\n <textarea\n class=\"sui-rating__area-textarea\"\n [rows]=\"reasonRows()\"\n [value]=\"reason()\"\n [placeholder]=\"reasonPlaceholder()\"\n [disabled]=\"disabledByForm()\"\n [attr.aria-label]=\"reasonPlaceholder()\"\n (input)=\"onReasonInput($event)\"\n (blur)=\"onTouched()\"></textarea>\n }\n </div>\n </div>\n }\n}\n\n<!-- Bar row (5 cells horizontal). Reusada por appearance='bar' y 'bar-area'. -->\n<ng-template #barRow>\n <div class=\"sui-rating__bar\" (mouseleave)=\"onCellLeave()\">\n @for (cell of cells(); track cell.index) {\n @if (readonly()) {\n <div\n class=\"sui-rating__bar-cell\"\n [attr.data-fill]=\"cell.fill\"\n [attr.data-cell-state]=\"cell.cellState\"\n role=\"radio\"\n [attr.aria-checked]=\"value() === cell.index\"\n [attr.aria-label]=\"cell.index + ' de ' + max()\">\n <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: cell }\" />\n </div>\n } @else {\n <button\n type=\"button\"\n class=\"sui-rating__bar-cell\"\n [attr.data-fill]=\"cell.fill\"\n [attr.data-cell-state]=\"cell.cellState\"\n [attr.data-selected]=\"value() === cell.index\"\n [disabled]=\"disabledByForm()\"\n role=\"radio\"\n [attr.aria-checked]=\"value() === cell.index\"\n [attr.aria-label]=\"cell.index + ' de ' + max()\"\n (click)=\"onCellClick(cell.index)\"\n (mouseenter)=\"onCellEnter(cell.index)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: cell }\" />\n </button>\n }\n }\n </div>\n</ng-template>\n\n<!-- Single icon (inline appearance). -->\n<ng-template #iconCell let-cell>\n @if (readonly()) {\n <span\n class=\"sui-rating__icon\"\n [attr.data-fill]=\"cell.fill\"\n [attr.data-cell-state]=\"cell.cellState\"\n role=\"radio\"\n [attr.aria-checked]=\"value() === cell.index\"\n [attr.aria-label]=\"cell.index + ' de ' + max()\">\n <sui-icon [name]=\"cellIconName(cell.fill)\" [size]=\"iconPx()\" />\n </span>\n } @else {\n <button\n type=\"button\"\n class=\"sui-rating__icon\"\n [attr.data-fill]=\"cell.fill\"\n [attr.data-cell-state]=\"cell.cellState\"\n [attr.data-selected]=\"value() === cell.index\"\n [disabled]=\"disabledByForm()\"\n role=\"radio\"\n [attr.aria-checked]=\"value() === cell.index\"\n [attr.aria-label]=\"cell.index + ' de ' + max()\"\n (click)=\"onCellClick(cell.index)\"\n (mouseenter)=\"onCellEnter(cell.index)\"\n (mouseleave)=\"onCellLeave()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <sui-icon [name]=\"cellIconName(cell.fill === 'empty' ? 'empty' : 'full')\" [size]=\"iconPx()\" />\n </button>\n }\n</ng-template>\n\n<!-- Cell content (bar / bar-area appearance): seg\u00FAn type.\n star/heart usan barIconName(cellState) para distinguir:\n default \u2192 outline | hover \u2192 relleno gris (Empty Filled) | selected \u2192 relleno color. -->\n<ng-template #cellContent let-cell>\n @switch (type()) {\n @case ('star') {\n <sui-icon [name]=\"barIconName('star', cell.cellState)\" [size]=\"20\" />\n }\n @case ('heart') {\n <sui-icon [name]=\"barIconName('heart', cell.cellState)\" [size]=\"20\" />\n }\n @case ('emoji') {\n <sui-emoji class=\"sui-rating__emoji\" [name]=\"cell.emoji\" size=\"sm\" />\n }\n @case ('number') {\n <span class=\"sui-rating__number\">{{ cell.index }}</span>\n }\n }\n</ng-template>\n\n<!-- Meta (value + reviewCount + link), inline appearance only -->\n<ng-template #metaContent>\n @if (showValue()) {\n <span class=\"sui-rating__value\">{{ valueLabel() }}</span>\n }\n @if (showValue() && reviewCount() !== null) {\n <span class=\"sui-rating__sep\" aria-hidden=\"true\">\u2219</span>\n }\n @if (reviewCount() !== null) {\n <span class=\"sui-rating__count\">{{ reviewCountLabel() }} Ratings</span>\n }\n @if (reviewLink(); as link) {\n @if (link.href) {\n <a class=\"sui-rating__link\" [href]=\"link.href\">{{ link.label }}</a>\n } @else {\n <button type=\"button\" class=\"sui-rating__link\">{{ link.label }}</button>\n }\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;font-family:var(--sui-font-sans);align-items:center;gap:2px}:host([data-disabled]){opacity:.5;pointer-events:none}:host([data-appearance=inline][data-alignment=inline]){flex-direction:row;flex-wrap:nowrap}:host([data-appearance=inline][data-alignment=vertical]){flex-direction:column;align-items:flex-start;gap:8px}:host([data-appearance=inline][data-alignment=horizontal]){flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}.sui-rating__icons{display:inline-flex;align-items:center;gap:2px;flex-shrink:0}.sui-rating__icon{appearance:none;border:0;margin:0;padding:0;background:transparent;font:inherit;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sui-stroke-sub-300, #d1d1d1);transition:color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-type=star]) .sui-rating__icon[data-fill=full],:host([data-type=star]) .sui-rating__icon[data-fill=half]{color:var(--sui-yellow-500, #f6b51e)}:host([data-type=heart]) .sui-rating__icon[data-fill=full],:host([data-type=heart]) .sui-rating__icon[data-fill=half]{color:var(--sui-state-error-base, #fb3748)}button.sui-rating__icon{cursor:pointer;border-radius:4px}button.sui-rating__icon:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px}.sui-rating__meta{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}.sui-rating__meta--vertical{align-self:flex-start}.sui-rating__value,.sui-rating__count{font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap}.sui-rating__sep{color:var(--sui-text-strong-950);margin:0 2px}.sui-rating__link{appearance:none;border:0;background:transparent;font:inherit;padding:0;margin:0;cursor:pointer;font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);color:var(--sui-text-sub-600);text-decoration:underline;text-decoration-skip-ink:none;text-underline-offset:2px;white-space:nowrap}.sui-rating__link:hover{color:var(--sui-text-strong-950)}.sui-rating__link:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px;border-radius:2px}:host([data-appearance=cell]){display:inline-flex;flex-direction:row;flex-wrap:nowrap;gap:8px}.sui-rating__cells{display:inline-flex;align-items:center;gap:8px;flex-shrink:0}:host([data-appearance=cell]) .sui-rating__icon{padding:12px;border-radius:var(--sui-radius-10, 10px);border:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box;transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),border-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-appearance=cell]) .sui-rating__icon[data-cell-state=hover]{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}:host([data-appearance=bar]){display:inline-block;align-items:stretch}:host([data-appearance=bar-area]){display:block;width:100%}.sui-rating__bar{display:inline-flex;align-items:stretch;border:1px solid var(--sui-stroke-soft-200);border-radius:0;overflow:hidden;background:var(--sui-bg-white-0)}:host([data-appearance=bar-area]) .sui-rating__bar{display:flex;width:100%;border:0;border-bottom:1px solid var(--sui-stroke-soft-200);border-radius:0;background:transparent}.sui-rating__bar-cell{appearance:none;margin:0;font:inherit;flex-shrink:0;width:64px;min-height:36px;display:flex;align-items:center;justify-content:center;padding:8px 4px;background:var(--sui-bg-white-0);border:0;border-left:1px solid var(--sui-stroke-soft-200);cursor:default;color:var(--sui-stroke-sub-300);transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}.sui-rating__bar-cell:first-child{border-left:0}:host([data-appearance=bar-area]) .sui-rating__bar-cell{flex:1 0 0;width:auto;min-width:0;background:transparent}button.sui-rating__bar-cell{cursor:pointer}button.sui-rating__bar-cell:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:-2px}:host([data-type=star]) .sui-rating__bar-cell[data-cell-state=selected]{color:var(--sui-yellow-500, #f6b51e)}:host([data-type=heart]) .sui-rating__bar-cell[data-cell-state=selected]{color:var(--sui-state-error-base, #fb3748)}:host([data-type=number]) .sui-rating__bar-cell[data-cell-state=hover] .sui-rating__number,:host([data-type=number]) .sui-rating__bar-cell[data-cell-state=selected] .sui-rating__number{color:var(--sui-text-strong-950)}:host([data-type=number]) .sui-rating__bar-cell[data-cell-state=selected],:host([data-type=emoji]) .sui-rating__bar-cell[data-cell-state=selected]{background:var(--sui-bg-weak-50)}.sui-rating__number{font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);color:var(--sui-text-sub-600);text-align:center;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-rating__emoji{display:inline-flex;align-items:center;justify-content:center;filter:grayscale(.5);opacity:.55;transition:filter var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),opacity var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-type=emoji]) .sui-rating__bar-cell[data-cell-state=selected] .sui-rating__emoji{filter:grayscale(0);opacity:1}.sui-rating__area{display:flex;flex-direction:column;align-items:stretch;width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-12, 12px);overflow:hidden}.sui-rating__area-input{display:flex;flex:1 0 0;align-items:flex-start;justify-content:flex-start;padding:12px;background:var(--sui-bg-white-0)}.sui-rating__area-textarea{appearance:none;display:block;width:100%;min-height:72px;border:0;margin:0;padding:0;background:transparent;resize:none;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-rating__area-textarea::placeholder{color:var(--sui-text-soft-400)}.sui-rating__area-textarea:focus-visible{outline:none}.sui-rating__area-text{width:100%;min-height:72px;margin:0;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-rating__area-text--placeholder{color:var(--sui-text-soft-400)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiEmoji, selector: "sui-emoji", inputs: ["name", "src", "size", "ariaLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13077
13117
|
}
|
|
13078
13118
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiRating, decorators: [{
|
|
13079
13119
|
type: Component,
|
|
@@ -13092,7 +13132,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
13092
13132
|
'[attr.aria-label]': 'ariaLabel()',
|
|
13093
13133
|
'[attr.aria-readonly]': '!isInteractive() ? "true" : null',
|
|
13094
13134
|
'[attr.data-disabled]': 'disabledByForm() ? "" : null',
|
|
13095
|
-
}, template: "@switch (appearance()) {\n\n @case ('inline') {\n @if (alignment() === 'vertical') {\n <div class=\"sui-rating__icons\">\n @for (cell of cells(); track cell.index) {\n <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n }\n </div>\n @if (showValue() || reviewCount() !== null || reviewLink()) {\n <div class=\"sui-rating__meta sui-rating__meta--vertical\">\n <ng-container *ngTemplateOutlet=\"metaContent\" />\n </div>\n }\n } @else if (alignment() === 'horizontal') {\n <div class=\"sui-rating__icons\">\n @for (cell of cells(); track cell.index) {\n <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n }\n </div>\n @if (showValue() || reviewCount() !== null || reviewLink()) {\n <div class=\"sui-rating__meta sui-rating__meta--horizontal\">\n <ng-container *ngTemplateOutlet=\"metaContent\" />\n </div>\n }\n } @else {\n @for (cell of cells(); track cell.index) {\n <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n }\n }\n }\n\n @case ('cell') {\n <div class=\"sui-rating__cells\" (mouseleave)=\"onCellLeave()\">\n @for (cell of cells(); track cell.index) {\n <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n }\n </div>\n }\n\n @case ('bar') {\n <ng-container *ngTemplateOutlet=\"barRow\" />\n }\n\n @case ('bar-area') {\n <div class=\"sui-rating__area\">\n <ng-container *ngTemplateOutlet=\"barRow\" />\n <div class=\"sui-rating__area-input\">\n @if (readonly()) {\n <p class=\"sui-rating__area-text\" [class.sui-rating__area-text--placeholder]=\"!reason()\">\n {{ reason() || reasonPlaceholder() }}\n </p>\n } @else {\n <textarea\n class=\"sui-rating__area-textarea\"\n [rows]=\"reasonRows()\"\n [value]=\"reason()\"\n [placeholder]=\"reasonPlaceholder()\"\n [disabled]=\"disabledByForm()\"\n [attr.aria-label]=\"reasonPlaceholder()\"\n (input)=\"onReasonInput($event)\"\n (blur)=\"onTouched()\"></textarea>\n }\n </div>\n </div>\n }\n}\n\n<!-- Bar row (5 cells horizontal). Reusada por appearance='bar' y 'bar-area'. -->\n<ng-template #barRow>\n <div class=\"sui-rating__bar\" (mouseleave)=\"onCellLeave()\">\n @for (cell of cells(); track cell.index) {\n @if (readonly()) {\n <div\n class=\"sui-rating__bar-cell\"\n [attr.data-fill]=\"cell.fill\"\n [attr.data-cell-state]=\"cell.cellState\"\n role=\"radio\"\n [attr.aria-checked]=\"value() === cell.index\"\n [attr.aria-label]=\"cell.index + ' de ' + max()\">\n <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: cell }\" />\n </div>\n } @else {\n <button\n type=\"button\"\n class=\"sui-rating__bar-cell\"\n [attr.data-fill]=\"cell.fill\"\n [attr.data-cell-state]=\"cell.cellState\"\n [attr.data-selected]=\"value() === cell.index\"\n [disabled]=\"disabledByForm()\"\n role=\"radio\"\n [attr.aria-checked]=\"value() === cell.index\"\n [attr.aria-label]=\"cell.index + ' de ' + max()\"\n (click)=\"onCellClick(cell.index)\"\n (mouseenter)=\"onCellEnter(cell.index)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: cell }\" />\n </button>\n }\n }\n </div>\n</ng-template>\n\n<!-- Single icon (inline appearance). -->\n<ng-template #iconCell let-cell>\n @if (readonly()) {\n <span\n class=\"sui-rating__icon\"\n [attr.data-fill]=\"cell.fill\"\n [attr.data-cell-state]=\"cell.cellState\"\n role=\"radio\"\n [attr.aria-checked]=\"value() === cell.index\"\n [attr.aria-label]=\"cell.index + ' de ' + max()\">\n <sui-icon [name]=\"iconName(type(), cell.fill)\" [size]=\"iconPx()\" />\n </span>\n } @else {\n <button\n type=\"button\"\n class=\"sui-rating__icon\"\n [attr.data-fill]=\"cell.fill\"\n [attr.data-cell-state]=\"cell.cellState\"\n [attr.data-selected]=\"value() === cell.index\"\n [disabled]=\"disabledByForm()\"\n role=\"radio\"\n [attr.aria-checked]=\"value() === cell.index\"\n [attr.aria-label]=\"cell.index + ' de ' + max()\"\n (click)=\"onCellClick(cell.index)\"\n (mouseenter)=\"onCellEnter(cell.index)\"\n (mouseleave)=\"onCellLeave()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <sui-icon [name]=\"iconName(type(), cell.fill === 'empty' ? 'empty' : 'full')\" [size]=\"iconPx()\" />\n </button>\n }\n</ng-template>\n\n<!-- Cell content (bar / bar-area appearance): seg\u00FAn type.\n star/heart usan barIconName(cellState) para distinguir:\n default \u2192 outline | hover \u2192 relleno gris (Empty Filled) | selected \u2192 relleno color. -->\n<ng-template #cellContent let-cell>\n @switch (type()) {\n @case ('star') {\n <sui-icon [name]=\"barIconName('star', cell.cellState)\" [size]=\"20\" />\n }\n @case ('heart') {\n <sui-icon [name]=\"barIconName('heart', cell.cellState)\" [size]=\"20\" />\n }\n @case ('emoji') {\n <sui-emoji class=\"sui-rating__emoji\" [name]=\"cell.emoji\" size=\"sm\" />\n }\n @case ('number') {\n <span class=\"sui-rating__number\">{{ cell.index }}</span>\n }\n }\n</ng-template>\n\n<!-- Meta (value + reviewCount + link), inline appearance only -->\n<ng-template #metaContent>\n @if (showValue()) {\n <span class=\"sui-rating__value\">{{ valueLabel() }}</span>\n }\n @if (showValue() && reviewCount() !== null) {\n <span class=\"sui-rating__sep\" aria-hidden=\"true\">\u2219</span>\n }\n @if (reviewCount() !== null) {\n <span class=\"sui-rating__count\">{{ reviewCountLabel() }} Ratings</span>\n }\n @if (reviewLink(); as link) {\n @if (link.href) {\n <a class=\"sui-rating__link\" [href]=\"link.href\">{{ link.label }}</a>\n } @else {\n <button type=\"button\" class=\"sui-rating__link\">{{ link.label }}</button>\n }\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;font-family:var(--sui-font-sans);align-items:center;gap:2px}:host([data-disabled]){opacity:.5;pointer-events:none}:host([data-appearance=inline][data-alignment=inline]){flex-direction:row;flex-wrap:nowrap}:host([data-appearance=inline][data-alignment=vertical]){flex-direction:column;align-items:flex-start;gap:8px}:host([data-appearance=inline][data-alignment=horizontal]){flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}.sui-rating__icons{display:inline-flex;align-items:center;gap:2px;flex-shrink:0}.sui-rating__icon{appearance:none;border:0;margin:0;padding:0;background:transparent;font:inherit;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sui-stroke-sub-300, #d1d1d1);transition:color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-type=star]) .sui-rating__icon[data-fill=full],:host([data-type=star]) .sui-rating__icon[data-fill=half]{color:var(--sui-yellow-500, #f6b51e)}:host([data-type=heart]) .sui-rating__icon[data-fill=full],:host([data-type=heart]) .sui-rating__icon[data-fill=half]{color:var(--sui-state-error-base, #fb3748)}button.sui-rating__icon{cursor:pointer;border-radius:4px}button.sui-rating__icon:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px}.sui-rating__meta{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}.sui-rating__meta--vertical{align-self:flex-start}.sui-rating__value,.sui-rating__count{font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap}.sui-rating__sep{color:var(--sui-text-strong-950);margin:0 2px}.sui-rating__link{appearance:none;border:0;background:transparent;font:inherit;padding:0;margin:0;cursor:pointer;font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);color:var(--sui-text-sub-600);text-decoration:underline;text-decoration-skip-ink:none;text-underline-offset:2px;white-space:nowrap}.sui-rating__link:hover{color:var(--sui-text-strong-950)}.sui-rating__link:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px;border-radius:2px}:host([data-appearance=cell]){display:inline-flex;flex-direction:row;flex-wrap:nowrap;gap:8px}.sui-rating__cells{display:inline-flex;align-items:center;gap:8px;flex-shrink:0}:host([data-appearance=cell]) .sui-rating__icon{padding:12px;border-radius:var(--sui-radius-10, 10px);border:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box;transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),border-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-appearance=cell]) .sui-rating__icon[data-cell-state=hover]{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}:host([data-appearance=bar]){display:inline-block;align-items:stretch}:host([data-appearance=bar-area]){display:block;width:100%}.sui-rating__bar{display:inline-flex;align-items:stretch;border:1px solid var(--sui-stroke-soft-200);border-radius:0;overflow:hidden;background:var(--sui-bg-white-0)}:host([data-appearance=bar-area]) .sui-rating__bar{display:flex;width:100%;border:0;border-bottom:1px solid var(--sui-stroke-soft-200);border-radius:0;background:transparent}.sui-rating__bar-cell{appearance:none;margin:0;font:inherit;flex-shrink:0;width:64px;min-height:36px;display:flex;align-items:center;justify-content:center;padding:8px 4px;background:var(--sui-bg-white-0);border:0;border-left:1px solid var(--sui-stroke-soft-200);cursor:default;color:var(--sui-stroke-sub-300);transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}.sui-rating__bar-cell:first-child{border-left:0}:host([data-appearance=bar-area]) .sui-rating__bar-cell{flex:1 0 0;width:auto;min-width:0;background:transparent}button.sui-rating__bar-cell{cursor:pointer}button.sui-rating__bar-cell:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:-2px}:host([data-type=star]) .sui-rating__bar-cell[data-cell-state=selected]{color:var(--sui-yellow-500, #f6b51e)}:host([data-type=heart]) .sui-rating__bar-cell[data-cell-state=selected]{color:var(--sui-state-error-base, #fb3748)}:host([data-type=number]) .sui-rating__bar-cell[data-cell-state=hover] .sui-rating__number,:host([data-type=number]) .sui-rating__bar-cell[data-cell-state=selected] .sui-rating__number{color:var(--sui-text-strong-950)}:host([data-type=number]) .sui-rating__bar-cell[data-cell-state=selected],:host([data-type=emoji]) .sui-rating__bar-cell[data-cell-state=selected]{background:var(--sui-bg-weak-50)}.sui-rating__number{font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);color:var(--sui-text-sub-600);text-align:center;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-rating__emoji{display:inline-flex;align-items:center;justify-content:center;filter:grayscale(.5);opacity:.55;transition:filter var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),opacity var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-type=emoji]) .sui-rating__bar-cell[data-cell-state=selected] .sui-rating__emoji{filter:grayscale(0);opacity:1}.sui-rating__area{display:flex;flex-direction:column;align-items:stretch;width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-12, 12px);overflow:hidden}.sui-rating__area-input{display:flex;flex:1 0 0;align-items:flex-start;justify-content:flex-start;padding:12px;background:var(--sui-bg-white-0)}.sui-rating__area-textarea{appearance:none;display:block;width:100%;min-height:72px;border:0;margin:0;padding:0;background:transparent;resize:none;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-rating__area-textarea::placeholder{color:var(--sui-text-soft-400)}.sui-rating__area-textarea:focus-visible{outline:none}.sui-rating__area-text{width:100%;min-height:72px;margin:0;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-rating__area-text--placeholder{color:var(--sui-text-soft-400)}\n"] }]
|
|
13135
|
+
}, template: "@switch (appearance()) {\n\n @case ('inline') {\n @if (alignment() === 'vertical') {\n <div class=\"sui-rating__icons\">\n @for (cell of cells(); track cell.index) {\n <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n }\n </div>\n @if (showValue() || reviewCount() !== null || reviewLink()) {\n <div class=\"sui-rating__meta sui-rating__meta--vertical\">\n <ng-container *ngTemplateOutlet=\"metaContent\" />\n </div>\n }\n } @else if (alignment() === 'horizontal') {\n <div class=\"sui-rating__icons\">\n @for (cell of cells(); track cell.index) {\n <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n }\n </div>\n @if (showValue() || reviewCount() !== null || reviewLink()) {\n <div class=\"sui-rating__meta sui-rating__meta--horizontal\">\n <ng-container *ngTemplateOutlet=\"metaContent\" />\n </div>\n }\n } @else {\n @for (cell of cells(); track cell.index) {\n <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n }\n }\n }\n\n @case ('cell') {\n <div class=\"sui-rating__cells\" (mouseleave)=\"onCellLeave()\">\n @for (cell of cells(); track cell.index) {\n <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n }\n </div>\n }\n\n @case ('bar') {\n <ng-container *ngTemplateOutlet=\"barRow\" />\n }\n\n @case ('bar-area') {\n <div class=\"sui-rating__area\">\n <ng-container *ngTemplateOutlet=\"barRow\" />\n <div class=\"sui-rating__area-input\">\n @if (readonly()) {\n <p class=\"sui-rating__area-text\" [class.sui-rating__area-text--placeholder]=\"!reason()\">\n {{ reason() || reasonPlaceholder() }}\n </p>\n } @else {\n <textarea\n class=\"sui-rating__area-textarea\"\n [rows]=\"reasonRows()\"\n [value]=\"reason()\"\n [placeholder]=\"reasonPlaceholder()\"\n [disabled]=\"disabledByForm()\"\n [attr.aria-label]=\"reasonPlaceholder()\"\n (input)=\"onReasonInput($event)\"\n (blur)=\"onTouched()\"></textarea>\n }\n </div>\n </div>\n }\n}\n\n<!-- Bar row (5 cells horizontal). Reusada por appearance='bar' y 'bar-area'. -->\n<ng-template #barRow>\n <div class=\"sui-rating__bar\" (mouseleave)=\"onCellLeave()\">\n @for (cell of cells(); track cell.index) {\n @if (readonly()) {\n <div\n class=\"sui-rating__bar-cell\"\n [attr.data-fill]=\"cell.fill\"\n [attr.data-cell-state]=\"cell.cellState\"\n role=\"radio\"\n [attr.aria-checked]=\"value() === cell.index\"\n [attr.aria-label]=\"cell.index + ' de ' + max()\">\n <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: cell }\" />\n </div>\n } @else {\n <button\n type=\"button\"\n class=\"sui-rating__bar-cell\"\n [attr.data-fill]=\"cell.fill\"\n [attr.data-cell-state]=\"cell.cellState\"\n [attr.data-selected]=\"value() === cell.index\"\n [disabled]=\"disabledByForm()\"\n role=\"radio\"\n [attr.aria-checked]=\"value() === cell.index\"\n [attr.aria-label]=\"cell.index + ' de ' + max()\"\n (click)=\"onCellClick(cell.index)\"\n (mouseenter)=\"onCellEnter(cell.index)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: cell }\" />\n </button>\n }\n }\n </div>\n</ng-template>\n\n<!-- Single icon (inline appearance). -->\n<ng-template #iconCell let-cell>\n @if (readonly()) {\n <span\n class=\"sui-rating__icon\"\n [attr.data-fill]=\"cell.fill\"\n [attr.data-cell-state]=\"cell.cellState\"\n role=\"radio\"\n [attr.aria-checked]=\"value() === cell.index\"\n [attr.aria-label]=\"cell.index + ' de ' + max()\">\n <sui-icon [name]=\"cellIconName(cell.fill)\" [size]=\"iconPx()\" />\n </span>\n } @else {\n <button\n type=\"button\"\n class=\"sui-rating__icon\"\n [attr.data-fill]=\"cell.fill\"\n [attr.data-cell-state]=\"cell.cellState\"\n [attr.data-selected]=\"value() === cell.index\"\n [disabled]=\"disabledByForm()\"\n role=\"radio\"\n [attr.aria-checked]=\"value() === cell.index\"\n [attr.aria-label]=\"cell.index + ' de ' + max()\"\n (click)=\"onCellClick(cell.index)\"\n (mouseenter)=\"onCellEnter(cell.index)\"\n (mouseleave)=\"onCellLeave()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <sui-icon [name]=\"cellIconName(cell.fill === 'empty' ? 'empty' : 'full')\" [size]=\"iconPx()\" />\n </button>\n }\n</ng-template>\n\n<!-- Cell content (bar / bar-area appearance): seg\u00FAn type.\n star/heart usan barIconName(cellState) para distinguir:\n default \u2192 outline | hover \u2192 relleno gris (Empty Filled) | selected \u2192 relleno color. -->\n<ng-template #cellContent let-cell>\n @switch (type()) {\n @case ('star') {\n <sui-icon [name]=\"barIconName('star', cell.cellState)\" [size]=\"20\" />\n }\n @case ('heart') {\n <sui-icon [name]=\"barIconName('heart', cell.cellState)\" [size]=\"20\" />\n }\n @case ('emoji') {\n <sui-emoji class=\"sui-rating__emoji\" [name]=\"cell.emoji\" size=\"sm\" />\n }\n @case ('number') {\n <span class=\"sui-rating__number\">{{ cell.index }}</span>\n }\n }\n</ng-template>\n\n<!-- Meta (value + reviewCount + link), inline appearance only -->\n<ng-template #metaContent>\n @if (showValue()) {\n <span class=\"sui-rating__value\">{{ valueLabel() }}</span>\n }\n @if (showValue() && reviewCount() !== null) {\n <span class=\"sui-rating__sep\" aria-hidden=\"true\">\u2219</span>\n }\n @if (reviewCount() !== null) {\n <span class=\"sui-rating__count\">{{ reviewCountLabel() }} Ratings</span>\n }\n @if (reviewLink(); as link) {\n @if (link.href) {\n <a class=\"sui-rating__link\" [href]=\"link.href\">{{ link.label }}</a>\n } @else {\n <button type=\"button\" class=\"sui-rating__link\">{{ link.label }}</button>\n }\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;font-family:var(--sui-font-sans);align-items:center;gap:2px}:host([data-disabled]){opacity:.5;pointer-events:none}:host([data-appearance=inline][data-alignment=inline]){flex-direction:row;flex-wrap:nowrap}:host([data-appearance=inline][data-alignment=vertical]){flex-direction:column;align-items:flex-start;gap:8px}:host([data-appearance=inline][data-alignment=horizontal]){flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}.sui-rating__icons{display:inline-flex;align-items:center;gap:2px;flex-shrink:0}.sui-rating__icon{appearance:none;border:0;margin:0;padding:0;background:transparent;font:inherit;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sui-stroke-sub-300, #d1d1d1);transition:color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-type=star]) .sui-rating__icon[data-fill=full],:host([data-type=star]) .sui-rating__icon[data-fill=half]{color:var(--sui-yellow-500, #f6b51e)}:host([data-type=heart]) .sui-rating__icon[data-fill=full],:host([data-type=heart]) .sui-rating__icon[data-fill=half]{color:var(--sui-state-error-base, #fb3748)}button.sui-rating__icon{cursor:pointer;border-radius:4px}button.sui-rating__icon:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px}.sui-rating__meta{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}.sui-rating__meta--vertical{align-self:flex-start}.sui-rating__value,.sui-rating__count{font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap}.sui-rating__sep{color:var(--sui-text-strong-950);margin:0 2px}.sui-rating__link{appearance:none;border:0;background:transparent;font:inherit;padding:0;margin:0;cursor:pointer;font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);color:var(--sui-text-sub-600);text-decoration:underline;text-decoration-skip-ink:none;text-underline-offset:2px;white-space:nowrap}.sui-rating__link:hover{color:var(--sui-text-strong-950)}.sui-rating__link:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px;border-radius:2px}:host([data-appearance=cell]){display:inline-flex;flex-direction:row;flex-wrap:nowrap;gap:8px}.sui-rating__cells{display:inline-flex;align-items:center;gap:8px;flex-shrink:0}:host([data-appearance=cell]) .sui-rating__icon{padding:12px;border-radius:var(--sui-radius-10, 10px);border:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box;transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),border-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-appearance=cell]) .sui-rating__icon[data-cell-state=hover]{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}:host([data-appearance=bar]){display:inline-block;align-items:stretch}:host([data-appearance=bar-area]){display:block;width:100%}.sui-rating__bar{display:inline-flex;align-items:stretch;border:1px solid var(--sui-stroke-soft-200);border-radius:0;overflow:hidden;background:var(--sui-bg-white-0)}:host([data-appearance=bar-area]) .sui-rating__bar{display:flex;width:100%;border:0;border-bottom:1px solid var(--sui-stroke-soft-200);border-radius:0;background:transparent}.sui-rating__bar-cell{appearance:none;margin:0;font:inherit;flex-shrink:0;width:64px;min-height:36px;display:flex;align-items:center;justify-content:center;padding:8px 4px;background:var(--sui-bg-white-0);border:0;border-left:1px solid var(--sui-stroke-soft-200);cursor:default;color:var(--sui-stroke-sub-300);transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}.sui-rating__bar-cell:first-child{border-left:0}:host([data-appearance=bar-area]) .sui-rating__bar-cell{flex:1 0 0;width:auto;min-width:0;background:transparent}button.sui-rating__bar-cell{cursor:pointer}button.sui-rating__bar-cell:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:-2px}:host([data-type=star]) .sui-rating__bar-cell[data-cell-state=selected]{color:var(--sui-yellow-500, #f6b51e)}:host([data-type=heart]) .sui-rating__bar-cell[data-cell-state=selected]{color:var(--sui-state-error-base, #fb3748)}:host([data-type=number]) .sui-rating__bar-cell[data-cell-state=hover] .sui-rating__number,:host([data-type=number]) .sui-rating__bar-cell[data-cell-state=selected] .sui-rating__number{color:var(--sui-text-strong-950)}:host([data-type=number]) .sui-rating__bar-cell[data-cell-state=selected],:host([data-type=emoji]) .sui-rating__bar-cell[data-cell-state=selected]{background:var(--sui-bg-weak-50)}.sui-rating__number{font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);color:var(--sui-text-sub-600);text-align:center;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-rating__emoji{display:inline-flex;align-items:center;justify-content:center;filter:grayscale(.5);opacity:.55;transition:filter var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),opacity var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-type=emoji]) .sui-rating__bar-cell[data-cell-state=selected] .sui-rating__emoji{filter:grayscale(0);opacity:1}.sui-rating__area{display:flex;flex-direction:column;align-items:stretch;width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-12, 12px);overflow:hidden}.sui-rating__area-input{display:flex;flex:1 0 0;align-items:flex-start;justify-content:flex-start;padding:12px;background:var(--sui-bg-white-0)}.sui-rating__area-textarea{appearance:none;display:block;width:100%;min-height:72px;border:0;margin:0;padding:0;background:transparent;resize:none;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-rating__area-textarea::placeholder{color:var(--sui-text-soft-400)}.sui-rating__area-textarea:focus-visible{outline:none}.sui-rating__area-text{width:100%;min-height:72px;margin:0;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-rating__area-text--placeholder{color:var(--sui-text-soft-400)}\n"] }]
|
|
13096
13136
|
}], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], halfStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "halfStep", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], reviewCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "reviewCount", required: false }] }], reviewLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "reviewLink", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], emojis: [{ type: i0.Input, args: [{ isSignal: true, alias: "emojis", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], reason: [{ type: i0.Input, args: [{ isSignal: true, alias: "reason", required: false }] }, { type: i0.Output, args: ["reasonChange"] }], reasonPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "reasonPlaceholder", required: false }] }], reasonRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "reasonRows", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
|
|
13097
13137
|
|
|
13098
13138
|
/* ═══ SUI Rich Editor Item — SUI Design System 2.0 ══════════════════════
|
|
@@ -13390,7 +13430,7 @@ class SuiRichEditor {
|
|
|
13390
13430
|
more: 'icon',
|
|
13391
13431
|
};
|
|
13392
13432
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiRichEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13393
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiRichEditor, isStandalone: true, selector: "sui-rich-editor", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, showMore: { classPropertyName: "showMore", publicName: "showMore", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, headingLabel: { classPropertyName: "headingLabel", publicName: "headingLabel", isSignal: true, isRequired: false, transformFunction: null }, fontSizeLabel: { classPropertyName: "fontSizeLabel", publicName: "fontSizeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", action: "action", valueChange: "valueChange" }, host: { properties: { "attr.title": "null", "attr.data-sui-layout": "layout()", "attr.data-sui-show-more": "showMore() ? \"\" : null", "attr.data-sui-editable": "editable() ? \"\" : null" } }, viewQueries: [{ propertyName: "editableRef", first: true, predicate: ["editableEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \u2550\u2550\u2550 Toolbar (pill flotante) \u2014 Figma 166926:17605 \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"sui-rich-editor__toolbar\" role=\"toolbar\" aria-label=\"Formato de texto\">\n\n <!-- \u2500\u2500 Grupo TEXT: Header + 14px (layouts full / compact) \u2500\u2500 -->\n @if (showTextGroup()) {\n <sui-rich-editor-item\n type=\"text\"\n [label]=\"headingLabel()\"\n [state]=\"itemState('heading')\"\n ariaLabel=\"Estilo de encabezado\"\n (clicked)=\"onCommand('heading')\"\n />\n <sui-rich-editor-item\n type=\"text\"\n [label]=\"fontSizeLabel()\"\n [state]=\"itemState('fontSize')\"\n ariaLabel=\"Tama\u00F1o de fuente\"\n (clicked)=\"onCommand('fontSize')\"\n />\n }\n\n <!-- divider entre TEXT y FORMAT (solo si ambos grupos presentes: layout full) -->\n @if (showTextGroup() && showFormatGroup()) {\n <span class=\"sui-rich-editor__divider\" aria-hidden=\"true\"></span>\n }\n\n <!-- \u2500\u2500 Grupo FORMAT: B I U S (layouts full / formatting) \u2500\u2500 -->\n @if (showFormatGroup()) {\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"bold\"\n [state]=\"itemState('bold')\"\n ariaLabel=\"Negrita\"\n (clicked)=\"onCommand('bold')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"italic\"\n [state]=\"itemState('italic')\"\n ariaLabel=\"Cursiva\"\n (clicked)=\"onCommand('italic')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"underline\"\n [state]=\"itemState('underline')\"\n ariaLabel=\"Subrayado\"\n (clicked)=\"onCommand('underline')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"strikethrough\"\n [state]=\"itemState('strikeThrough')\"\n ariaLabel=\"Tachado\"\n (clicked)=\"onCommand('strikeThrough')\"\n />\n }\n\n <!-- divider entre FORMAT y ALIGN (layout full / formatting) -->\n @if (showAlignGroup() && (showFormatGroup())) {\n <span class=\"sui-rich-editor__divider\" aria-hidden=\"true\"></span>\n }\n\n <!-- \u2500\u2500 Grupo ALIGN: align dropdown (layouts full / formatting) \u2500\u2500 -->\n @if (showAlignGroup()) {\n <sui-rich-editor-item\n type=\"dropdown\"\n icon=\"align-left\"\n [state]=\"itemState('align')\"\n ariaLabel=\"Alineaci\u00F3n\"\n (clicked)=\"onCommand('align')\"\n />\n }\n\n <!-- divider antes de SOCIAL (layout full) -->\n @if (showSocialGroup() && (showTextGroup() || showFormatGroup() || showAlignGroup())) {\n <span class=\"sui-rich-editor__divider\" aria-hidden=\"true\"></span>\n }\n\n <!-- \u2500\u2500 Grupo SOCIAL: chat + link + @ (layouts full / social) \u2500\u2500 -->\n @if (showSocialGroup()) {\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"chat-1-line\"\n [state]=\"itemState('comment')\"\n ariaLabel=\"Comentario\"\n (clicked)=\"onCommand('comment')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"link\"\n [state]=\"itemState('link')\"\n ariaLabel=\"Insertar enlace\"\n (clicked)=\"onCommand('link')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"at-line\"\n [state]=\"itemState('mention')\"\n ariaLabel=\"Mencionar\"\n (clicked)=\"onCommand('mention')\"\n />\n }\n\n <!-- \u2500\u2500 More (overflow) \u2014 divider + more-2-line \u2500\u2500 -->\n @if (showMore()) {\n <span class=\"sui-rich-editor__divider sui-rich-editor__divider--more\" aria-hidden=\"true\"></span>\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"more-2-line\"\n [state]=\"itemState('more')\"\n ariaLabel=\"M\u00E1s opciones\"\n (clicked)=\"onCommand('more')\"\n />\n }\n</div>\n\n<!-- \u2550\u2550\u2550 \u00C1rea editable (opcional) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Figma solo muestra la toolbar; el contenteditable es un EXTRA del componente\n para uso real. PENDING VERIFY: edici\u00F3n rica parcial via execCommand. -->\n@if (editable()) {\n <div\n #editableEl\n class=\"sui-rich-editor__editable\"\n contenteditable=\"true\"\n role=\"textbox\"\n aria-multiline=\"true\"\n [attr.aria-label]=\"placeholder()\"\n [attr.data-placeholder]=\"placeholder()\"\n [attr.data-empty]=\"isEmpty() ? '' : null\"\n (input)=\"onEditableInput()\"\n (keyup)=\"onEditableSelect()\"\n (mouseup)=\"onEditableSelect()\"\n ></div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;flex-direction:column;gap:8px;box-sizing:border-box}.sui-rich-editor__toolbar{display:flex;align-items:center;gap:2px;padding:2px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);box-shadow:var(--sui-regular-shadow-x-small);overflow:clip;box-sizing:border-box;width:fit-content}.sui-rich-editor__divider{flex-shrink:0;width:4px;height:16px;position:relative}.sui-rich-editor__divider:before{content:\"\";position:absolute;top:0;bottom:0;left:50%;width:1px;transform:translate(-50%);background:var(--sui-stroke-soft-200)}.sui-rich-editor__editable{min-height:120px;padding:12px 14px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);box-sizing:border-box;outline:none;font-size:14px;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-strong-950);overflow-y:auto;overflow-wrap:break-word;word-break:break-word}.sui-rich-editor__editable:focus-visible{border-color:var(--sui-primary-base)}.sui-rich-editor__editable[data-empty]:before{content:attr(data-placeholder);color:var(--sui-text-sub-600);pointer-events:none}.sui-rich-editor__editable :is(b,strong){font-weight:700}.sui-rich-editor__editable :is(i,em){font-style:italic}.sui-rich-editor__editable u{text-decoration:underline}.sui-rich-editor__editable s{text-decoration:line-through}@media(max-width:767px){.sui-rich-editor__toolbar{flex-wrap:wrap;width:100%;row-gap:2px}.sui-rich-editor__divider{display:none}.sui-rich-editor__editable{font-size:16px}}\n"], dependencies: [{ kind: "component", type: SuiRichEditorItem, selector: "sui-rich-editor-item", inputs: ["type", "state", "label", "icon", "color", "colorHex", "ariaLabel", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13433
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiRichEditor, isStandalone: true, selector: "sui-rich-editor", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, showMore: { classPropertyName: "showMore", publicName: "showMore", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, headingLabel: { classPropertyName: "headingLabel", publicName: "headingLabel", isSignal: true, isRequired: false, transformFunction: null }, fontSizeLabel: { classPropertyName: "fontSizeLabel", publicName: "fontSizeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", action: "action", valueChange: "valueChange" }, host: { properties: { "attr.title": "null", "attr.data-sui-layout": "layout()", "attr.data-sui-show-more": "showMore() ? \"\" : null", "attr.data-sui-editable": "editable() ? \"\" : null" } }, viewQueries: [{ propertyName: "editableRef", first: true, predicate: ["editableEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \u2550\u2550\u2550 Toolbar (pill flotante) \u2014 Figma 166926:17605 \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"sui-rich-editor__toolbar\" role=\"toolbar\" aria-label=\"Formato de texto\">\n\n <!-- \u2500\u2500 Grupo TEXT: Header + 14px (layouts full / compact) \u2500\u2500 -->\n @if (showTextGroup()) {\n <sui-rich-editor-item\n type=\"text\"\n [label]=\"headingLabel()\"\n [state]=\"itemState('heading')\"\n ariaLabel=\"Estilo de encabezado\"\n (clicked)=\"onCommand('heading')\"\n />\n <!-- divider 4\u00D716 entre Header y 14px \u2014 Figma 166926:17604 / 166926:17601 -->\n <span class=\"sui-rich-editor__divider\" aria-hidden=\"true\"></span>\n <sui-rich-editor-item\n type=\"text\"\n [label]=\"fontSizeLabel()\"\n [state]=\"itemState('fontSize')\"\n ariaLabel=\"Tama\u00F1o de fuente\"\n (clicked)=\"onCommand('fontSize')\"\n />\n }\n\n <!-- divider entre TEXT y FORMAT (solo si ambos grupos presentes: layout full) -->\n @if (showTextGroup() && showFormatGroup()) {\n <span class=\"sui-rich-editor__divider\" aria-hidden=\"true\"></span>\n }\n\n <!-- \u2500\u2500 Grupo FORMAT: B I U S (layouts full / formatting) \u2500\u2500 -->\n @if (showFormatGroup()) {\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"bold\"\n [state]=\"itemState('bold')\"\n ariaLabel=\"Negrita\"\n (clicked)=\"onCommand('bold')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"italic\"\n [state]=\"itemState('italic')\"\n ariaLabel=\"Cursiva\"\n (clicked)=\"onCommand('italic')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"underline\"\n [state]=\"itemState('underline')\"\n ariaLabel=\"Subrayado\"\n (clicked)=\"onCommand('underline')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"strikethrough\"\n [state]=\"itemState('strikeThrough')\"\n ariaLabel=\"Tachado\"\n (clicked)=\"onCommand('strikeThrough')\"\n />\n }\n\n <!-- divider entre FORMAT y ALIGN (layout full / formatting) -->\n @if (showAlignGroup() && (showFormatGroup())) {\n <span class=\"sui-rich-editor__divider\" aria-hidden=\"true\"></span>\n }\n\n <!-- \u2500\u2500 Grupo ALIGN: align dropdown (layouts full / formatting) \u2500\u2500 -->\n @if (showAlignGroup()) {\n <sui-rich-editor-item\n type=\"dropdown\"\n icon=\"align-left\"\n [state]=\"itemState('align')\"\n ariaLabel=\"Alineaci\u00F3n\"\n (clicked)=\"onCommand('align')\"\n />\n }\n\n <!-- divider antes de SOCIAL (layout full) -->\n @if (showSocialGroup() && (showTextGroup() || showFormatGroup() || showAlignGroup())) {\n <span class=\"sui-rich-editor__divider\" aria-hidden=\"true\"></span>\n }\n\n <!-- \u2500\u2500 Grupo SOCIAL: chat + link + @ (layouts full / social) \u2500\u2500 -->\n @if (showSocialGroup()) {\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"chat-1-line\"\n [state]=\"itemState('comment')\"\n ariaLabel=\"Comentario\"\n (clicked)=\"onCommand('comment')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"link\"\n [state]=\"itemState('link')\"\n ariaLabel=\"Insertar enlace\"\n (clicked)=\"onCommand('link')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"at-line\"\n [state]=\"itemState('mention')\"\n ariaLabel=\"Mencionar\"\n (clicked)=\"onCommand('mention')\"\n />\n }\n\n <!-- \u2500\u2500 More (overflow) \u2014 divider + more-2-line \u2500\u2500 -->\n @if (showMore()) {\n <span class=\"sui-rich-editor__divider sui-rich-editor__divider--more\" aria-hidden=\"true\"></span>\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"more-2-line\"\n [state]=\"itemState('more')\"\n ariaLabel=\"M\u00E1s opciones\"\n (clicked)=\"onCommand('more')\"\n />\n }\n</div>\n\n<!-- \u2550\u2550\u2550 \u00C1rea editable (opcional) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Figma solo muestra la toolbar; el contenteditable es un EXTRA del componente\n para uso real. PENDING VERIFY: edici\u00F3n rica parcial via execCommand. -->\n@if (editable()) {\n <div\n #editableEl\n class=\"sui-rich-editor__editable\"\n contenteditable=\"true\"\n role=\"textbox\"\n aria-multiline=\"true\"\n [attr.aria-label]=\"placeholder()\"\n [attr.data-placeholder]=\"placeholder()\"\n [attr.data-empty]=\"isEmpty() ? '' : null\"\n (input)=\"onEditableInput()\"\n (keyup)=\"onEditableSelect()\"\n (mouseup)=\"onEditableSelect()\"\n ></div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;flex-direction:column;gap:8px;box-sizing:border-box}.sui-rich-editor__toolbar{display:flex;align-items:center;gap:2px;padding:2px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);box-shadow:var(--sui-regular-shadow-x-small);overflow:clip;box-sizing:border-box;width:fit-content}.sui-rich-editor__divider{flex-shrink:0;width:4px;height:16px;position:relative}.sui-rich-editor__divider:before{content:\"\";position:absolute;top:0;bottom:0;left:50%;width:1px;transform:translate(-50%);background:var(--sui-stroke-soft-200)}.sui-rich-editor__editable{min-height:120px;padding:12px 14px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);box-sizing:border-box;outline:none;font-size:14px;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-strong-950);overflow-y:auto;overflow-wrap:break-word;word-break:break-word}.sui-rich-editor__editable:focus-visible{border-color:var(--sui-primary-base)}.sui-rich-editor__editable[data-empty]:before{content:attr(data-placeholder);color:var(--sui-text-sub-600);pointer-events:none}.sui-rich-editor__editable :is(b,strong){font-weight:700}.sui-rich-editor__editable :is(i,em){font-style:italic}.sui-rich-editor__editable u{text-decoration:underline}.sui-rich-editor__editable s{text-decoration:line-through}@media(max-width:767px){.sui-rich-editor__toolbar{flex-wrap:wrap;width:100%;row-gap:2px}.sui-rich-editor__divider{display:none}.sui-rich-editor__editable{font-size:16px}}\n"], dependencies: [{ kind: "component", type: SuiRichEditorItem, selector: "sui-rich-editor-item", inputs: ["type", "state", "label", "icon", "color", "colorHex", "ariaLabel", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13394
13434
|
}
|
|
13395
13435
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiRichEditor, decorators: [{
|
|
13396
13436
|
type: Component,
|
|
@@ -13400,7 +13440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
13400
13440
|
'[attr.data-sui-layout]': 'layout()',
|
|
13401
13441
|
'[attr.data-sui-show-more]': 'showMore() ? "" : null',
|
|
13402
13442
|
'[attr.data-sui-editable]': 'editable() ? "" : null',
|
|
13403
|
-
}, template: "<!-- \u2550\u2550\u2550 Toolbar (pill flotante) \u2014 Figma 166926:17605 \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"sui-rich-editor__toolbar\" role=\"toolbar\" aria-label=\"Formato de texto\">\n\n <!-- \u2500\u2500 Grupo TEXT: Header + 14px (layouts full / compact) \u2500\u2500 -->\n @if (showTextGroup()) {\n <sui-rich-editor-item\n type=\"text\"\n [label]=\"headingLabel()\"\n [state]=\"itemState('heading')\"\n ariaLabel=\"Estilo de encabezado\"\n (clicked)=\"onCommand('heading')\"\n />\n <sui-rich-editor-item\n type=\"text\"\n [label]=\"fontSizeLabel()\"\n [state]=\"itemState('fontSize')\"\n ariaLabel=\"Tama\u00F1o de fuente\"\n (clicked)=\"onCommand('fontSize')\"\n />\n }\n\n <!-- divider entre TEXT y FORMAT (solo si ambos grupos presentes: layout full) -->\n @if (showTextGroup() && showFormatGroup()) {\n <span class=\"sui-rich-editor__divider\" aria-hidden=\"true\"></span>\n }\n\n <!-- \u2500\u2500 Grupo FORMAT: B I U S (layouts full / formatting) \u2500\u2500 -->\n @if (showFormatGroup()) {\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"bold\"\n [state]=\"itemState('bold')\"\n ariaLabel=\"Negrita\"\n (clicked)=\"onCommand('bold')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"italic\"\n [state]=\"itemState('italic')\"\n ariaLabel=\"Cursiva\"\n (clicked)=\"onCommand('italic')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"underline\"\n [state]=\"itemState('underline')\"\n ariaLabel=\"Subrayado\"\n (clicked)=\"onCommand('underline')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"strikethrough\"\n [state]=\"itemState('strikeThrough')\"\n ariaLabel=\"Tachado\"\n (clicked)=\"onCommand('strikeThrough')\"\n />\n }\n\n <!-- divider entre FORMAT y ALIGN (layout full / formatting) -->\n @if (showAlignGroup() && (showFormatGroup())) {\n <span class=\"sui-rich-editor__divider\" aria-hidden=\"true\"></span>\n }\n\n <!-- \u2500\u2500 Grupo ALIGN: align dropdown (layouts full / formatting) \u2500\u2500 -->\n @if (showAlignGroup()) {\n <sui-rich-editor-item\n type=\"dropdown\"\n icon=\"align-left\"\n [state]=\"itemState('align')\"\n ariaLabel=\"Alineaci\u00F3n\"\n (clicked)=\"onCommand('align')\"\n />\n }\n\n <!-- divider antes de SOCIAL (layout full) -->\n @if (showSocialGroup() && (showTextGroup() || showFormatGroup() || showAlignGroup())) {\n <span class=\"sui-rich-editor__divider\" aria-hidden=\"true\"></span>\n }\n\n <!-- \u2500\u2500 Grupo SOCIAL: chat + link + @ (layouts full / social) \u2500\u2500 -->\n @if (showSocialGroup()) {\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"chat-1-line\"\n [state]=\"itemState('comment')\"\n ariaLabel=\"Comentario\"\n (clicked)=\"onCommand('comment')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"link\"\n [state]=\"itemState('link')\"\n ariaLabel=\"Insertar enlace\"\n (clicked)=\"onCommand('link')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"at-line\"\n [state]=\"itemState('mention')\"\n ariaLabel=\"Mencionar\"\n (clicked)=\"onCommand('mention')\"\n />\n }\n\n <!-- \u2500\u2500 More (overflow) \u2014 divider + more-2-line \u2500\u2500 -->\n @if (showMore()) {\n <span class=\"sui-rich-editor__divider sui-rich-editor__divider--more\" aria-hidden=\"true\"></span>\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"more-2-line\"\n [state]=\"itemState('more')\"\n ariaLabel=\"M\u00E1s opciones\"\n (clicked)=\"onCommand('more')\"\n />\n }\n</div>\n\n<!-- \u2550\u2550\u2550 \u00C1rea editable (opcional) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Figma solo muestra la toolbar; el contenteditable es un EXTRA del componente\n para uso real. PENDING VERIFY: edici\u00F3n rica parcial via execCommand. -->\n@if (editable()) {\n <div\n #editableEl\n class=\"sui-rich-editor__editable\"\n contenteditable=\"true\"\n role=\"textbox\"\n aria-multiline=\"true\"\n [attr.aria-label]=\"placeholder()\"\n [attr.data-placeholder]=\"placeholder()\"\n [attr.data-empty]=\"isEmpty() ? '' : null\"\n (input)=\"onEditableInput()\"\n (keyup)=\"onEditableSelect()\"\n (mouseup)=\"onEditableSelect()\"\n ></div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;flex-direction:column;gap:8px;box-sizing:border-box}.sui-rich-editor__toolbar{display:flex;align-items:center;gap:2px;padding:2px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);box-shadow:var(--sui-regular-shadow-x-small);overflow:clip;box-sizing:border-box;width:fit-content}.sui-rich-editor__divider{flex-shrink:0;width:4px;height:16px;position:relative}.sui-rich-editor__divider:before{content:\"\";position:absolute;top:0;bottom:0;left:50%;width:1px;transform:translate(-50%);background:var(--sui-stroke-soft-200)}.sui-rich-editor__editable{min-height:120px;padding:12px 14px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);box-sizing:border-box;outline:none;font-size:14px;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-strong-950);overflow-y:auto;overflow-wrap:break-word;word-break:break-word}.sui-rich-editor__editable:focus-visible{border-color:var(--sui-primary-base)}.sui-rich-editor__editable[data-empty]:before{content:attr(data-placeholder);color:var(--sui-text-sub-600);pointer-events:none}.sui-rich-editor__editable :is(b,strong){font-weight:700}.sui-rich-editor__editable :is(i,em){font-style:italic}.sui-rich-editor__editable u{text-decoration:underline}.sui-rich-editor__editable s{text-decoration:line-through}@media(max-width:767px){.sui-rich-editor__toolbar{flex-wrap:wrap;width:100%;row-gap:2px}.sui-rich-editor__divider{display:none}.sui-rich-editor__editable{font-size:16px}}\n"] }]
|
|
13443
|
+
}, template: "<!-- \u2550\u2550\u2550 Toolbar (pill flotante) \u2014 Figma 166926:17605 \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"sui-rich-editor__toolbar\" role=\"toolbar\" aria-label=\"Formato de texto\">\n\n <!-- \u2500\u2500 Grupo TEXT: Header + 14px (layouts full / compact) \u2500\u2500 -->\n @if (showTextGroup()) {\n <sui-rich-editor-item\n type=\"text\"\n [label]=\"headingLabel()\"\n [state]=\"itemState('heading')\"\n ariaLabel=\"Estilo de encabezado\"\n (clicked)=\"onCommand('heading')\"\n />\n <!-- divider 4\u00D716 entre Header y 14px \u2014 Figma 166926:17604 / 166926:17601 -->\n <span class=\"sui-rich-editor__divider\" aria-hidden=\"true\"></span>\n <sui-rich-editor-item\n type=\"text\"\n [label]=\"fontSizeLabel()\"\n [state]=\"itemState('fontSize')\"\n ariaLabel=\"Tama\u00F1o de fuente\"\n (clicked)=\"onCommand('fontSize')\"\n />\n }\n\n <!-- divider entre TEXT y FORMAT (solo si ambos grupos presentes: layout full) -->\n @if (showTextGroup() && showFormatGroup()) {\n <span class=\"sui-rich-editor__divider\" aria-hidden=\"true\"></span>\n }\n\n <!-- \u2500\u2500 Grupo FORMAT: B I U S (layouts full / formatting) \u2500\u2500 -->\n @if (showFormatGroup()) {\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"bold\"\n [state]=\"itemState('bold')\"\n ariaLabel=\"Negrita\"\n (clicked)=\"onCommand('bold')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"italic\"\n [state]=\"itemState('italic')\"\n ariaLabel=\"Cursiva\"\n (clicked)=\"onCommand('italic')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"underline\"\n [state]=\"itemState('underline')\"\n ariaLabel=\"Subrayado\"\n (clicked)=\"onCommand('underline')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"strikethrough\"\n [state]=\"itemState('strikeThrough')\"\n ariaLabel=\"Tachado\"\n (clicked)=\"onCommand('strikeThrough')\"\n />\n }\n\n <!-- divider entre FORMAT y ALIGN (layout full / formatting) -->\n @if (showAlignGroup() && (showFormatGroup())) {\n <span class=\"sui-rich-editor__divider\" aria-hidden=\"true\"></span>\n }\n\n <!-- \u2500\u2500 Grupo ALIGN: align dropdown (layouts full / formatting) \u2500\u2500 -->\n @if (showAlignGroup()) {\n <sui-rich-editor-item\n type=\"dropdown\"\n icon=\"align-left\"\n [state]=\"itemState('align')\"\n ariaLabel=\"Alineaci\u00F3n\"\n (clicked)=\"onCommand('align')\"\n />\n }\n\n <!-- divider antes de SOCIAL (layout full) -->\n @if (showSocialGroup() && (showTextGroup() || showFormatGroup() || showAlignGroup())) {\n <span class=\"sui-rich-editor__divider\" aria-hidden=\"true\"></span>\n }\n\n <!-- \u2500\u2500 Grupo SOCIAL: chat + link + @ (layouts full / social) \u2500\u2500 -->\n @if (showSocialGroup()) {\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"chat-1-line\"\n [state]=\"itemState('comment')\"\n ariaLabel=\"Comentario\"\n (clicked)=\"onCommand('comment')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"link\"\n [state]=\"itemState('link')\"\n ariaLabel=\"Insertar enlace\"\n (clicked)=\"onCommand('link')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"at-line\"\n [state]=\"itemState('mention')\"\n ariaLabel=\"Mencionar\"\n (clicked)=\"onCommand('mention')\"\n />\n }\n\n <!-- \u2500\u2500 More (overflow) \u2014 divider + more-2-line \u2500\u2500 -->\n @if (showMore()) {\n <span class=\"sui-rich-editor__divider sui-rich-editor__divider--more\" aria-hidden=\"true\"></span>\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"more-2-line\"\n [state]=\"itemState('more')\"\n ariaLabel=\"M\u00E1s opciones\"\n (clicked)=\"onCommand('more')\"\n />\n }\n</div>\n\n<!-- \u2550\u2550\u2550 \u00C1rea editable (opcional) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Figma solo muestra la toolbar; el contenteditable es un EXTRA del componente\n para uso real. PENDING VERIFY: edici\u00F3n rica parcial via execCommand. -->\n@if (editable()) {\n <div\n #editableEl\n class=\"sui-rich-editor__editable\"\n contenteditable=\"true\"\n role=\"textbox\"\n aria-multiline=\"true\"\n [attr.aria-label]=\"placeholder()\"\n [attr.data-placeholder]=\"placeholder()\"\n [attr.data-empty]=\"isEmpty() ? '' : null\"\n (input)=\"onEditableInput()\"\n (keyup)=\"onEditableSelect()\"\n (mouseup)=\"onEditableSelect()\"\n ></div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;flex-direction:column;gap:8px;box-sizing:border-box}.sui-rich-editor__toolbar{display:flex;align-items:center;gap:2px;padding:2px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);box-shadow:var(--sui-regular-shadow-x-small);overflow:clip;box-sizing:border-box;width:fit-content}.sui-rich-editor__divider{flex-shrink:0;width:4px;height:16px;position:relative}.sui-rich-editor__divider:before{content:\"\";position:absolute;top:0;bottom:0;left:50%;width:1px;transform:translate(-50%);background:var(--sui-stroke-soft-200)}.sui-rich-editor__editable{min-height:120px;padding:12px 14px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);box-sizing:border-box;outline:none;font-size:14px;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-strong-950);overflow-y:auto;overflow-wrap:break-word;word-break:break-word}.sui-rich-editor__editable:focus-visible{border-color:var(--sui-primary-base)}.sui-rich-editor__editable[data-empty]:before{content:attr(data-placeholder);color:var(--sui-text-sub-600);pointer-events:none}.sui-rich-editor__editable :is(b,strong){font-weight:700}.sui-rich-editor__editable :is(i,em){font-style:italic}.sui-rich-editor__editable u{text-decoration:underline}.sui-rich-editor__editable s{text-decoration:line-through}@media(max-width:767px){.sui-rich-editor__toolbar{flex-wrap:wrap;width:100%;row-gap:2px}.sui-rich-editor__divider{display:none}.sui-rich-editor__editable{font-size:16px}}\n"] }]
|
|
13404
13444
|
}], ctorParameters: () => [], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], showMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMore", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], headingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLabel", required: false }] }], fontSizeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "fontSizeLabel", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], editableRef: [{ type: i0.ViewChild, args: ['editableEl', { isSignal: true }] }] } });
|
|
13405
13445
|
|
|
13406
13446
|
/**
|
|
@@ -13465,7 +13505,8 @@ class SuiSelect {
|
|
|
13465
13505
|
RemixIcon custom, false = sin icono (default: opt-in). Consolida el par
|
|
13466
13506
|
leftIcon (boolean) + leadingIcon (string) previo. */
|
|
13467
13507
|
leadingIcon = input(false, ...(ngDevMode ? [{ debugName: "leadingIcon" }] : /* istanbul ignore next */ []));
|
|
13468
|
-
/** sui-flag name para `type="country"`
|
|
13508
|
+
/** sui-flag name para `type="country"` — se muestra SOLO con selección hecha;
|
|
13509
|
+
en estado vacío el left slot renderea el globo (global-line), fiel a Figma. */
|
|
13469
13510
|
flag = input(null, ...(ngDevMode ? [{ debugName: "flag" }] : /* istanbul ignore next */ []));
|
|
13470
13511
|
/** Imagen del left slot cuando hay value (avatar/brand/provider/company logo). */
|
|
13471
13512
|
imageUrl = input(null, ...(ngDevMode ? [{ debugName: "imageUrl" }] : /* istanbul ignore next */ []));
|
|
@@ -13661,7 +13702,7 @@ class SuiSelect {
|
|
|
13661
13702
|
useExisting: forwardRef(() => SuiSelect),
|
|
13662
13703
|
multi: true,
|
|
13663
13704
|
},
|
|
13664
|
-
], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "_menu", first: true, predicate: SuiDropdownMenu, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"size()\"\n class=\"sui-select__label-host\"\n (click)=\"toggleOpen()\"\n />\n}\n\n<div\n #triggerEl\n class=\"sui-select__trigger\"\n [class.sui-select__trigger--error]=\"error()\"\n [class.sui-select__trigger--disabled]=\"isDisabled()\"\n [class.sui-select__trigger--open]=\"isOpen()\"\n [class.sui-select__trigger--filled]=\"selectedLabel() !== null\"\n role=\"combobox\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n (click)=\"toggleOpen()\"\n>\n <!--\n Left decoration (Figma Select[1.1] Type variant). Prioridad:\n 1. slot proyectado [slot=leading] (custom total)\n 2. imageUrl (avatar/logo del filled state)\n 3. flag (type=country)\n 4. RemixIcon por type (leadingIcon=true) o custom (leadingIcon=string)\n Solo se renderea si leadingIcon est\u00E1 activo O hay imageUrl/flag.\n -->\n @if (showLeading()) {\n <span class=\"sui-select__leading\">\n <ng-content select=\"[slot=leading]\" />\n @if (showLeadingImage()) {\n @if (type() === 'avatar') {\n <sui-avatar size=\"xs\" [src]=\"imageUrl()\" />\n } @else {\n <img class=\"sui-select__leading-img\" [src]=\"imageUrl()\" alt=\"\" />\n }\n } @else if (type() === 'country' && flag()) {\n <sui-flag class=\"sui-select__leading-flag\" [name]=\"flag()!\" size=\"md\" />\n } @else {\n <sui-icon class=\"sui-select__leading-icon\" [name]=\"leadingIconName()\" [size]=\"20\" />\n }\n </span>\n }\n\n <span class=\"sui-select__value\">\n @if (selectedLabel()) {\n {{ selectedLabel() }}\n } @else {\n <span class=\"sui-select__placeholder\">{{ placeholder() }}</span>\n }\n </span>\n\n <!-- Badge inline opcional (Figma: entre value y chevron). sui-badge real \u2014\n defaults orange/lighter/medium replican el chip del Figma (brand naranja). -->\n @if (badgeCfg(); as bcfg) {\n <sui-badge\n class=\"sui-select__badge\"\n [color]=\"bcfg.color ?? 'orange'\"\n [variant]=\"bcfg.variant ?? 'lighter'\"\n [size]=\"bcfg.size ?? 'medium'\"\n >{{ bcfg.label }}</sui-badge>\n }\n\n <!-- Figma: arrow-down-s-line at 20\u00D720 (size-[20px]) \u2014 verified nodeId 270:1091 -->\n <sui-icon\n class=\"sui-select__chevron\"\n name=\"arrow-down-s-line\"\n [size]=\"20\"\n aria-hidden=\"true\"\n />\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n class=\"sui-select__hint-host\"\n />\n}\n\n<!--\n Overlay menu \u2014 delegado a sui-dropdown-menu via [origin]=triggerEl.\n El sui-dropdown-menu encapsula CDK Overlay, positioning, backdrop,\n ResizeObserver y detachments. El trigger lo maneja este componente.\n-->\n<sui-dropdown-menu\n [origin]=\"triggerEl\"\n [disabled]=\"isDisabled()\"\n [matchWidth]=\"true\"\n panelClass=\"sui-select__overlay-pane\"\n (openedChange)=\"onMenuOpenedChange($event)\"\n>\n <ng-template suiDropdownPanel>\n <div\n class=\"sui-select__panel\"\n [class.sui-select__panel--xsmall]=\"size() === 'xsmall'\"\n [class.sui-select__panel--small]=\"size() === 'small'\"\n [class.sui-select__panel--medium]=\"size() === 'medium'\"\n role=\"listbox\"\n [attr.aria-label]=\"label() || placeholder()\"\n >\n @for (option of options(); track option.value; let i = $index) {\n <sui-dropdown-item\n mode=\"option\"\n [label]=\"option.label\"\n [selected]=\"option.value === value()\"\n [highlighted]=\"highlightedIndex() === i\"\n [disabled]=\"!!option.disabled\"\n (clicked)=\"select(option)\"\n (mouseenter)=\"highlightedIndex.set(i)\"\n />\n }\n </div>\n </ng-template>\n</sui-dropdown-menu>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-select__label-host{display:block;margin-bottom:4px;cursor:default}.sui-select__trigger{display:flex;align-items:center;max-width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-select__trigger{gap:6px;padding:5px 6px 5px 8px;border-radius:var(--sui-radius-8)}:host([data-sui-size=small]) .sui-select__trigger{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8)}:host([data-sui-size=medium]) .sui-select__trigger,:host(:not([data-sui-size])) .sui-select__trigger{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10)}.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error):hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error):focus,.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error).sui-select__trigger--open{outline:none;border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-select__trigger--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-select__trigger--error:not(.sui-select__trigger--disabled):hover{border-color:var(--sui-state-error-base)}.sui-select__trigger--error:not(.sui-select__trigger--disabled):focus,.sui-select__trigger--error:not(.sui-select__trigger--disabled).sui-select__trigger--open{border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-16)}.sui-select__trigger--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-select__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600)}:host([data-sui-disabled]) .sui-select__leading{color:var(--sui-icon-disabled-300);opacity:.48}.sui-select__leading-icon{display:inline-flex}.sui-select__leading-img{width:100%;height:100%;object-fit:cover;border-radius:var(--sui-radius-full)}.sui-select__leading-flag,.sui-select__badge{flex-shrink:0}:host([data-sui-disabled]) .sui-select__badge{opacity:.48}.sui-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950)}:host([data-sui-disabled]) .sui-select__value{color:var(--sui-text-disabled-300)}.sui-select__placeholder{color:var(--sui-text-sub-600)}:host([data-sui-disabled]) .sui-select__placeholder{color:var(--sui-text-disabled-300)}.sui-select__chevron{flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);transition:transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-open]) .sui-select__chevron{transform:rotate(180deg)}:host([data-sui-disabled]) .sui-select__chevron{color:var(--sui-icon-disabled-300)}.sui-select__hint-host{display:block;margin-top:4px}\n"], dependencies: [{ kind: "component", type: SuiFormLabel, selector: "sui-form-label", inputs: ["label", "sublabel", "required", "tooltip", "link", "size", "disabled", "for"], outputs: ["linkClick"] }, { kind: "component", type: SuiFormHint, selector: "sui-form-hint", inputs: ["message", "variant", "icon"] }, { kind: "component", type: SuiDropdownMenu, selector: "sui-dropdown-menu", inputs: ["matchWidth", "flexibleDimensions", "push", "minWidth", "position", "viewportMargin", "panelClass", "disabled", "popupRole", "origin"], outputs: ["openedChange"], exportAs: ["suiDropdownMenu"] }, { kind: "directive", type: SuiDropdownPanel, selector: "ng-template[suiDropdownPanel]" }, { kind: "component", type: SuiDropdownItem, selector: "sui-dropdown-item", inputs: ["label", "sublabel", "description", "size", "leadingFramed", "mode", "selected", "highlighted", "disabled", "shortcut"], outputs: ["clicked"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiFlag, selector: "sui-flag", inputs: ["name", "size", "ariaLabel"] }, { kind: "component", type: SuiAvatar, selector: "sui-avatar", inputs: ["size", "src", "alt", "initials", "color", "status", "memojiSrc", "illustrationSrc", "icon", "companyLogoSrc", "topBadge", "bgColor"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13705
|
+
], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "_menu", first: true, predicate: SuiDropdownMenu, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"size()\"\n class=\"sui-select__label-host\"\n (click)=\"toggleOpen()\"\n />\n}\n\n<div\n #triggerEl\n class=\"sui-select__trigger\"\n [class.sui-select__trigger--error]=\"error()\"\n [class.sui-select__trigger--disabled]=\"isDisabled()\"\n [class.sui-select__trigger--open]=\"isOpen()\"\n [class.sui-select__trigger--filled]=\"selectedLabel() !== null\"\n role=\"combobox\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n (click)=\"toggleOpen()\"\n>\n <!--\n Left decoration (Figma Select[1.1] Type variant). Prioridad:\n 1. slot proyectado [slot=leading] (custom total)\n 2. imageUrl (avatar/logo del filled state)\n 3. flag (type=country, SOLO con selecci\u00F3n hecha \u2014 vac\u00EDo muestra globo)\n 4. RemixIcon por type (leadingIcon=true) o custom (leadingIcon=string)\n Solo se renderea si leadingIcon est\u00E1 activo O hay imageUrl/flag.\n -->\n @if (showLeading()) {\n <span class=\"sui-select__leading\">\n <ng-content select=\"[slot=leading]\" />\n @if (showLeadingImage()) {\n @if (type() === 'avatar') {\n <sui-avatar size=\"xs\" [src]=\"imageUrl()\" />\n } @else {\n <img class=\"sui-select__leading-img\" [src]=\"imageUrl()\" alt=\"\" />\n }\n } @else if (type() === 'country' && flag() && selectedLabel() !== null) {\n <sui-flag class=\"sui-select__leading-flag\" [name]=\"flag()!\" size=\"md\" />\n } @else {\n <sui-icon class=\"sui-select__leading-icon\" [name]=\"leadingIconName()\" [size]=\"20\" />\n }\n </span>\n }\n\n <span class=\"sui-select__value\">\n @if (selectedLabel()) {\n {{ selectedLabel() }}\n } @else {\n <span class=\"sui-select__placeholder\">{{ placeholder() }}</span>\n }\n </span>\n\n <!-- Badge inline opcional (Figma: entre value y chevron). sui-badge real \u2014\n defaults orange/lighter/medium replican el chip del Figma (brand naranja). -->\n @if (badgeCfg(); as bcfg) {\n <sui-badge\n class=\"sui-select__badge\"\n [color]=\"bcfg.color ?? 'orange'\"\n [variant]=\"bcfg.variant ?? 'lighter'\"\n [size]=\"bcfg.size ?? 'medium'\"\n >{{ bcfg.label }}</sui-badge>\n }\n\n <!-- Figma: arrow-down-s-line at 20\u00D720 (size-[20px]) \u2014 verified nodeId 270:1091 -->\n <sui-icon\n class=\"sui-select__chevron\"\n name=\"arrow-down-s-line\"\n [size]=\"20\"\n aria-hidden=\"true\"\n />\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n class=\"sui-select__hint-host\"\n />\n}\n\n<!--\n Overlay menu \u2014 delegado a sui-dropdown-menu via [origin]=triggerEl.\n El sui-dropdown-menu encapsula CDK Overlay, positioning, backdrop,\n ResizeObserver y detachments. El trigger lo maneja este componente.\n-->\n<sui-dropdown-menu\n [origin]=\"triggerEl\"\n [disabled]=\"isDisabled()\"\n [matchWidth]=\"true\"\n panelClass=\"sui-select__overlay-pane\"\n (openedChange)=\"onMenuOpenedChange($event)\"\n>\n <ng-template suiDropdownPanel>\n <div\n class=\"sui-select__panel\"\n [class.sui-select__panel--xsmall]=\"size() === 'xsmall'\"\n [class.sui-select__panel--small]=\"size() === 'small'\"\n [class.sui-select__panel--medium]=\"size() === 'medium'\"\n role=\"listbox\"\n [attr.aria-label]=\"label() || placeholder()\"\n >\n @for (option of options(); track option.value; let i = $index) {\n <sui-dropdown-item\n mode=\"option\"\n [label]=\"option.label\"\n [selected]=\"option.value === value()\"\n [highlighted]=\"highlightedIndex() === i\"\n [disabled]=\"!!option.disabled\"\n (clicked)=\"select(option)\"\n (mouseenter)=\"highlightedIndex.set(i)\"\n />\n }\n </div>\n </ng-template>\n</sui-dropdown-menu>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-select__label-host{display:block;margin-bottom:4px;cursor:default}.sui-select__trigger{display:flex;align-items:center;max-width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-select__trigger{gap:6px;padding:5px 6px 5px 8px;border-radius:var(--sui-radius-8)}:host([data-sui-size=small]) .sui-select__trigger{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8)}:host([data-sui-size=medium]) .sui-select__trigger,:host(:not([data-sui-size])) .sui-select__trigger{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10)}.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error):hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error):focus,.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error).sui-select__trigger--open{outline:none;border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-select__trigger--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-select__trigger--error:not(.sui-select__trigger--disabled):hover{border-color:var(--sui-state-error-base)}.sui-select__trigger--error:not(.sui-select__trigger--disabled):focus,.sui-select__trigger--error:not(.sui-select__trigger--disabled).sui-select__trigger--open{border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-16)}.sui-select__trigger--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-select__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600)}:host([data-sui-disabled]) .sui-select__leading{color:var(--sui-icon-disabled-300);opacity:.48}.sui-select__leading-icon{display:inline-flex}.sui-select__leading-img{width:100%;height:100%;object-fit:cover;border-radius:var(--sui-radius-full)}.sui-select__leading-flag,.sui-select__badge{flex-shrink:0}:host([data-sui-disabled]) .sui-select__badge{opacity:.48}.sui-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950)}:host([data-sui-disabled]) .sui-select__value{color:var(--sui-text-disabled-300)}.sui-select__placeholder{color:var(--sui-text-sub-600)}:host([data-sui-disabled]) .sui-select__placeholder{color:var(--sui-text-disabled-300)}.sui-select__chevron{flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);transition:transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-open]) .sui-select__chevron{transform:rotate(180deg)}:host([data-sui-disabled]) .sui-select__chevron{color:var(--sui-icon-disabled-300)}.sui-select__hint-host{display:block;margin-top:4px}\n"], dependencies: [{ kind: "component", type: SuiFormLabel, selector: "sui-form-label", inputs: ["label", "sublabel", "required", "tooltip", "link", "size", "disabled", "for"], outputs: ["linkClick"] }, { kind: "component", type: SuiFormHint, selector: "sui-form-hint", inputs: ["message", "variant", "icon"] }, { kind: "component", type: SuiDropdownMenu, selector: "sui-dropdown-menu", inputs: ["matchWidth", "flexibleDimensions", "push", "minWidth", "position", "viewportMargin", "panelClass", "disabled", "popupRole", "origin"], outputs: ["openedChange"], exportAs: ["suiDropdownMenu"] }, { kind: "directive", type: SuiDropdownPanel, selector: "ng-template[suiDropdownPanel]" }, { kind: "component", type: SuiDropdownItem, selector: "sui-dropdown-item", inputs: ["label", "sublabel", "description", "size", "leadingFramed", "mode", "selected", "highlighted", "disabled", "shortcut"], outputs: ["clicked"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiFlag, selector: "sui-flag", inputs: ["name", "size", "ariaLabel"] }, { kind: "component", type: SuiAvatar, selector: "sui-avatar", inputs: ["size", "src", "alt", "initials", "color", "status", "memojiSrc", "illustrationSrc", "icon", "companyLogoSrc", "topBadge", "bgColor"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13665
13706
|
}
|
|
13666
13707
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSelect, decorators: [{
|
|
13667
13708
|
type: Component,
|
|
@@ -13689,7 +13730,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
13689
13730
|
'[attr.data-sui-error]': 'error() ? "" : null',
|
|
13690
13731
|
'[attr.data-sui-disabled]': 'isDisabled() ? "" : null',
|
|
13691
13732
|
'[attr.data-sui-open]': 'isOpen() ? "" : null',
|
|
13692
|
-
}, template: "@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"size()\"\n class=\"sui-select__label-host\"\n (click)=\"toggleOpen()\"\n />\n}\n\n<div\n #triggerEl\n class=\"sui-select__trigger\"\n [class.sui-select__trigger--error]=\"error()\"\n [class.sui-select__trigger--disabled]=\"isDisabled()\"\n [class.sui-select__trigger--open]=\"isOpen()\"\n [class.sui-select__trigger--filled]=\"selectedLabel() !== null\"\n role=\"combobox\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n (click)=\"toggleOpen()\"\n>\n <!--\n Left decoration (Figma Select[1.1] Type variant). Prioridad:\n 1. slot proyectado [slot=leading] (custom total)\n 2. imageUrl (avatar/logo del filled state)\n 3. flag (type=country)\n 4. RemixIcon por type (leadingIcon=true) o custom (leadingIcon=string)\n Solo se renderea si leadingIcon est\u00E1 activo O hay imageUrl/flag.\n -->\n @if (showLeading()) {\n <span class=\"sui-select__leading\">\n <ng-content select=\"[slot=leading]\" />\n @if (showLeadingImage()) {\n @if (type() === 'avatar') {\n <sui-avatar size=\"xs\" [src]=\"imageUrl()\" />\n } @else {\n <img class=\"sui-select__leading-img\" [src]=\"imageUrl()\" alt=\"\" />\n }\n } @else if (type() === 'country' && flag()) {\n <sui-flag class=\"sui-select__leading-flag\" [name]=\"flag()!\" size=\"md\" />\n } @else {\n <sui-icon class=\"sui-select__leading-icon\" [name]=\"leadingIconName()\" [size]=\"20\" />\n }\n </span>\n }\n\n <span class=\"sui-select__value\">\n @if (selectedLabel()) {\n {{ selectedLabel() }}\n } @else {\n <span class=\"sui-select__placeholder\">{{ placeholder() }}</span>\n }\n </span>\n\n <!-- Badge inline opcional (Figma: entre value y chevron). sui-badge real \u2014\n defaults orange/lighter/medium replican el chip del Figma (brand naranja). -->\n @if (badgeCfg(); as bcfg) {\n <sui-badge\n class=\"sui-select__badge\"\n [color]=\"bcfg.color ?? 'orange'\"\n [variant]=\"bcfg.variant ?? 'lighter'\"\n [size]=\"bcfg.size ?? 'medium'\"\n >{{ bcfg.label }}</sui-badge>\n }\n\n <!-- Figma: arrow-down-s-line at 20\u00D720 (size-[20px]) \u2014 verified nodeId 270:1091 -->\n <sui-icon\n class=\"sui-select__chevron\"\n name=\"arrow-down-s-line\"\n [size]=\"20\"\n aria-hidden=\"true\"\n />\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n class=\"sui-select__hint-host\"\n />\n}\n\n<!--\n Overlay menu \u2014 delegado a sui-dropdown-menu via [origin]=triggerEl.\n El sui-dropdown-menu encapsula CDK Overlay, positioning, backdrop,\n ResizeObserver y detachments. El trigger lo maneja este componente.\n-->\n<sui-dropdown-menu\n [origin]=\"triggerEl\"\n [disabled]=\"isDisabled()\"\n [matchWidth]=\"true\"\n panelClass=\"sui-select__overlay-pane\"\n (openedChange)=\"onMenuOpenedChange($event)\"\n>\n <ng-template suiDropdownPanel>\n <div\n class=\"sui-select__panel\"\n [class.sui-select__panel--xsmall]=\"size() === 'xsmall'\"\n [class.sui-select__panel--small]=\"size() === 'small'\"\n [class.sui-select__panel--medium]=\"size() === 'medium'\"\n role=\"listbox\"\n [attr.aria-label]=\"label() || placeholder()\"\n >\n @for (option of options(); track option.value; let i = $index) {\n <sui-dropdown-item\n mode=\"option\"\n [label]=\"option.label\"\n [selected]=\"option.value === value()\"\n [highlighted]=\"highlightedIndex() === i\"\n [disabled]=\"!!option.disabled\"\n (clicked)=\"select(option)\"\n (mouseenter)=\"highlightedIndex.set(i)\"\n />\n }\n </div>\n </ng-template>\n</sui-dropdown-menu>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-select__label-host{display:block;margin-bottom:4px;cursor:default}.sui-select__trigger{display:flex;align-items:center;max-width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-select__trigger{gap:6px;padding:5px 6px 5px 8px;border-radius:var(--sui-radius-8)}:host([data-sui-size=small]) .sui-select__trigger{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8)}:host([data-sui-size=medium]) .sui-select__trigger,:host(:not([data-sui-size])) .sui-select__trigger{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10)}.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error):hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error):focus,.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error).sui-select__trigger--open{outline:none;border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-select__trigger--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-select__trigger--error:not(.sui-select__trigger--disabled):hover{border-color:var(--sui-state-error-base)}.sui-select__trigger--error:not(.sui-select__trigger--disabled):focus,.sui-select__trigger--error:not(.sui-select__trigger--disabled).sui-select__trigger--open{border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-16)}.sui-select__trigger--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-select__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600)}:host([data-sui-disabled]) .sui-select__leading{color:var(--sui-icon-disabled-300);opacity:.48}.sui-select__leading-icon{display:inline-flex}.sui-select__leading-img{width:100%;height:100%;object-fit:cover;border-radius:var(--sui-radius-full)}.sui-select__leading-flag,.sui-select__badge{flex-shrink:0}:host([data-sui-disabled]) .sui-select__badge{opacity:.48}.sui-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950)}:host([data-sui-disabled]) .sui-select__value{color:var(--sui-text-disabled-300)}.sui-select__placeholder{color:var(--sui-text-sub-600)}:host([data-sui-disabled]) .sui-select__placeholder{color:var(--sui-text-disabled-300)}.sui-select__chevron{flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);transition:transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-open]) .sui-select__chevron{transform:rotate(180deg)}:host([data-sui-disabled]) .sui-select__chevron{color:var(--sui-icon-disabled-300)}.sui-select__hint-host{display:block;margin-top:4px}\n"] }]
|
|
13733
|
+
}, template: "@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"size()\"\n class=\"sui-select__label-host\"\n (click)=\"toggleOpen()\"\n />\n}\n\n<div\n #triggerEl\n class=\"sui-select__trigger\"\n [class.sui-select__trigger--error]=\"error()\"\n [class.sui-select__trigger--disabled]=\"isDisabled()\"\n [class.sui-select__trigger--open]=\"isOpen()\"\n [class.sui-select__trigger--filled]=\"selectedLabel() !== null\"\n role=\"combobox\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n (click)=\"toggleOpen()\"\n>\n <!--\n Left decoration (Figma Select[1.1] Type variant). Prioridad:\n 1. slot proyectado [slot=leading] (custom total)\n 2. imageUrl (avatar/logo del filled state)\n 3. flag (type=country, SOLO con selecci\u00F3n hecha \u2014 vac\u00EDo muestra globo)\n 4. RemixIcon por type (leadingIcon=true) o custom (leadingIcon=string)\n Solo se renderea si leadingIcon est\u00E1 activo O hay imageUrl/flag.\n -->\n @if (showLeading()) {\n <span class=\"sui-select__leading\">\n <ng-content select=\"[slot=leading]\" />\n @if (showLeadingImage()) {\n @if (type() === 'avatar') {\n <sui-avatar size=\"xs\" [src]=\"imageUrl()\" />\n } @else {\n <img class=\"sui-select__leading-img\" [src]=\"imageUrl()\" alt=\"\" />\n }\n } @else if (type() === 'country' && flag() && selectedLabel() !== null) {\n <sui-flag class=\"sui-select__leading-flag\" [name]=\"flag()!\" size=\"md\" />\n } @else {\n <sui-icon class=\"sui-select__leading-icon\" [name]=\"leadingIconName()\" [size]=\"20\" />\n }\n </span>\n }\n\n <span class=\"sui-select__value\">\n @if (selectedLabel()) {\n {{ selectedLabel() }}\n } @else {\n <span class=\"sui-select__placeholder\">{{ placeholder() }}</span>\n }\n </span>\n\n <!-- Badge inline opcional (Figma: entre value y chevron). sui-badge real \u2014\n defaults orange/lighter/medium replican el chip del Figma (brand naranja). -->\n @if (badgeCfg(); as bcfg) {\n <sui-badge\n class=\"sui-select__badge\"\n [color]=\"bcfg.color ?? 'orange'\"\n [variant]=\"bcfg.variant ?? 'lighter'\"\n [size]=\"bcfg.size ?? 'medium'\"\n >{{ bcfg.label }}</sui-badge>\n }\n\n <!-- Figma: arrow-down-s-line at 20\u00D720 (size-[20px]) \u2014 verified nodeId 270:1091 -->\n <sui-icon\n class=\"sui-select__chevron\"\n name=\"arrow-down-s-line\"\n [size]=\"20\"\n aria-hidden=\"true\"\n />\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n class=\"sui-select__hint-host\"\n />\n}\n\n<!--\n Overlay menu \u2014 delegado a sui-dropdown-menu via [origin]=triggerEl.\n El sui-dropdown-menu encapsula CDK Overlay, positioning, backdrop,\n ResizeObserver y detachments. El trigger lo maneja este componente.\n-->\n<sui-dropdown-menu\n [origin]=\"triggerEl\"\n [disabled]=\"isDisabled()\"\n [matchWidth]=\"true\"\n panelClass=\"sui-select__overlay-pane\"\n (openedChange)=\"onMenuOpenedChange($event)\"\n>\n <ng-template suiDropdownPanel>\n <div\n class=\"sui-select__panel\"\n [class.sui-select__panel--xsmall]=\"size() === 'xsmall'\"\n [class.sui-select__panel--small]=\"size() === 'small'\"\n [class.sui-select__panel--medium]=\"size() === 'medium'\"\n role=\"listbox\"\n [attr.aria-label]=\"label() || placeholder()\"\n >\n @for (option of options(); track option.value; let i = $index) {\n <sui-dropdown-item\n mode=\"option\"\n [label]=\"option.label\"\n [selected]=\"option.value === value()\"\n [highlighted]=\"highlightedIndex() === i\"\n [disabled]=\"!!option.disabled\"\n (clicked)=\"select(option)\"\n (mouseenter)=\"highlightedIndex.set(i)\"\n />\n }\n </div>\n </ng-template>\n</sui-dropdown-menu>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-select__label-host{display:block;margin-bottom:4px;cursor:default}.sui-select__trigger{display:flex;align-items:center;max-width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-select__trigger{gap:6px;padding:5px 6px 5px 8px;border-radius:var(--sui-radius-8)}:host([data-sui-size=small]) .sui-select__trigger{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8)}:host([data-sui-size=medium]) .sui-select__trigger,:host(:not([data-sui-size])) .sui-select__trigger{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10)}.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error):hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error):focus,.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error).sui-select__trigger--open{outline:none;border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-select__trigger--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-select__trigger--error:not(.sui-select__trigger--disabled):hover{border-color:var(--sui-state-error-base)}.sui-select__trigger--error:not(.sui-select__trigger--disabled):focus,.sui-select__trigger--error:not(.sui-select__trigger--disabled).sui-select__trigger--open{border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-16)}.sui-select__trigger--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-select__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600)}:host([data-sui-disabled]) .sui-select__leading{color:var(--sui-icon-disabled-300);opacity:.48}.sui-select__leading-icon{display:inline-flex}.sui-select__leading-img{width:100%;height:100%;object-fit:cover;border-radius:var(--sui-radius-full)}.sui-select__leading-flag,.sui-select__badge{flex-shrink:0}:host([data-sui-disabled]) .sui-select__badge{opacity:.48}.sui-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950)}:host([data-sui-disabled]) .sui-select__value{color:var(--sui-text-disabled-300)}.sui-select__placeholder{color:var(--sui-text-sub-600)}:host([data-sui-disabled]) .sui-select__placeholder{color:var(--sui-text-disabled-300)}.sui-select__chevron{flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);transition:transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-open]) .sui-select__chevron{transform:rotate(180deg)}:host([data-sui-disabled]) .sui-select__chevron{color:var(--sui-icon-disabled-300)}.sui-select__hint-host{display:block;margin-top:4px}\n"] }]
|
|
13693
13734
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], flag: [{ type: i0.Input, args: [{ isSignal: true, alias: "flag", required: false }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], _menu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SuiDropdownMenu), { isSignal: true }] }], onKeydown: [{
|
|
13694
13735
|
type: HostListener,
|
|
13695
13736
|
args: ['keydown', ['$event']]
|
|
@@ -14725,11 +14766,11 @@ class SuiStoreCard {
|
|
|
14725
14766
|
this.ratingClicked.emit({ id: s.id, name: s.name, logoUrl: s.logoUrl ?? null });
|
|
14726
14767
|
}
|
|
14727
14768
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiStoreCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14728
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiStoreCard, isStandalone: true, selector: "sui-store-card", inputs: { store: { classPropertyName: "store", publicName: "store", isSignal: true, isRequired: true, transformFunction: null }, isFavorite: { classPropertyName: "isFavorite", publicName: "isFavorite", isSignal: true, isRequired: false, transformFunction: null }, disableLink: { classPropertyName: "disableLink", publicName: "disableLink", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleFavorite: "toggleFavorite", ratingClicked: "ratingClicked" }, ngImport: i0, template: "<a class=\"store\"\n [class.store--suspended]=\"store().isSuspended\"\n [class.store--closed]=\"!store().isOpen && !store().isSuspended && !store().isOwnerPreview\"\n [class.store--preview]=\"store().isOwnerPreview\"\n [routerLink]=\"link()\"\n (click)=\"onCardClick($event)\">\n\n <div class=\"store__cover\"\n [class.store__cover--fallback]=\"!store().coverUrl\">\n <!-- <img> real (no background CSS): permite retry nativo via suiImgRetry\n cuando un load falla (red flaky) + fade-in al cargar. El fallback\n oscuro queda debajo como placeholder hasta que la imagen aparece. -->\n @if (store().coverUrl) {\n <img class=\"store__cover-img\"\n suiImgRetry\n [src]=\"store().coverUrl\"\n alt=\"\"\n loading=\"lazy\"\n decoding=\"async\" />\n }\n <div class=\"store__cover-grad\"></div>\n\n @if (!store().isOwnerPreview) {\n <button type=\"button\"\n class=\"store__fav\"\n [class.store__fav--active]=\"isFavorite()\"\n (click)=\"onFavClick($event)\"\n aria-label=\"Favorito\">\n <sui-icon\n [name]=\"isFavorite() ? 'heart-fill' : 'heart-line'\"\n [size]=\"18\"\n color=\"#fa7319\"\n ></sui-icon>\n </button>\n }\n\n @if (store().isSuspended) {\n <span class=\"store__status store__status--suspended\">No disponible</span>\n } @else if (previewBadge(); as pb) {\n <span class=\"store__status\"\n [class.store__status--draft]=\"pb.variant === 'draft'\"\n [class.store__status--pending]=\"pb.variant === 'pending'\"\n [class.store__status--rejected]=\"pb.variant === 'rejected'\">\n {{ pb.label }}\n </span>\n } @else {\n <span class=\"store__status\"\n [class.store__status--open]=\"store().isOpen\"\n [class.store__status--closed]=\"!store().isOpen\">\n {{ store().isOpen ? 'Abierto' : 'Cerrado' }}\n </span>\n }\n </div>\n\n <div class=\"store__body\">\n <div class=\"store__logo\">\n @if (store().logoUrl) {\n <!-- suiImgRetry reintenta loads fallidos; si muere definitivo, el\n atributo data-sui-img-dead lo oculta via CSS (queda el fondo). -->\n <img suiImgRetry [src]=\"store().logoUrl\" [alt]=\"store().name\" />\n } @else {\n {{ initial() }}\n }\n </div>\n <div class=\"store__info\">\n <h3 class=\"store__name\">{{ store().name }}</h3>\n <p class=\"store__type\">{{ store().businessType }}</p>\n </div>\n\n <!-- Meta a ANCHO COMPLETO de la card (hijo directo del body con wrap):\n antes viv\u00EDa dentro de store__info y heredaba el sangrado del logo\n (60px muertos a la izquierda). -->\n @if (store().isOwnerPreview) {\n <!-- Modo preview (owner viendo borrador/revisi\u00F3n, super-admin revisando):\n solo Ubicaci\u00F3n + Env\u00EDo. Rating + Distancia no aplican antes de aprobar. -->\n <div class=\"store__meta store__meta--preview\">\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Ubicaci\u00F3n</span>\n <span class=\"store__stat-value\">\n <sui-icon name=\"map-pin-line\" [size]=\"13\" color=\"var(--brand-500, #fa7319)\"></sui-icon>\n {{ store().district || '\u2014' }}\n </span>\n </div>\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Env\u00EDo</span>\n <span class=\"store__stat-value\">{{ deliveryLabel() }}</span>\n </div>\n </div>\n } @else {\n <div class=\"store__meta\">\n <button\n type=\"button\"\n class=\"store__stat store__stat--clickable\"\n (click)=\"onRatingClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n [attr.aria-label]=\"'Ver calificaciones del local'\"\n >\n <span class=\"store__stat-label\">Calificaci\u00F3n</span>\n <span class=\"store__stat-value\">\n <sui-icon name=\"star-fill\" [size]=\"13\" color=\"var(--brand-500, #fa7319)\"></sui-icon>\n {{ ratingLabel() }}\n </span>\n </button>\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Ubicaci\u00F3n</span>\n <span class=\"store__stat-value\">\n <sui-icon name=\"map-pin-line\" [size]=\"13\" color=\"var(--brand-500, #fa7319)\"></sui-icon>\n {{ store().district || '\u2014' }}\n </span>\n </div>\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Env\u00EDo</span>\n <span class=\"store__stat-value\">{{ deliveryLabel() }}</span>\n </div>\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Distancia</span>\n <span class=\"store__stat-value\">{{ distanceLabel() }}</span>\n </div>\n </div>\n }\n </div>\n</a>\n", styles: ["@charset \"UTF-8\";.mp-badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent;line-height:1}.mp-badge--green{background:var(--admin-success-bg, #dcfce7);color:var(--admin-success, #16a34a)}.mp-badge--red{background:var(--admin-error-bg, #fee2e2);color:var(--admin-error, #ef4444)}.mp-badge--orange{background:#fff7ed;color:#c2410c;border-color:#fed7aa}.mp-badge--blue{background:var(--admin-info-bg, #dbeafe);color:#2563eb}.mp-badge--gray{background:var(--admin-bg-tertiary, #f3f4f6);color:var(--admin-text-tertiary, #6b7280)}.mp-badge--sm{height:20px;padding:0 8px;font-size:11px}.mp-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border-radius:6px;border:1px solid transparent;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s ease}.mp-action-btn:disabled{opacity:.5;cursor:not-allowed}.mp-action-btn--activate{background:var(--admin-success, #16a34a);color:#fff}.mp-action-btn--activate:hover{background:#15803d}.mp-action-btn--renew{background:var(--admin-info, #3b82f6);color:#fff}.mp-action-btn--renew:hover{background:#2563eb}.mp-action-btn--suspend{background:var(--admin-bg-primary, #fff);color:var(--admin-error, #ef4444);border-color:#fca5a5}.mp-action-btn--suspend:hover{background:var(--admin-error-bg, #fee2e2)}.mp-action-btn--danger{background:#dc2626;color:#fff;border:none}.mp-action-btn--danger:hover{background:#b91c1c}.mp-action-btn--outline{background:var(--admin-bg-primary, #fff);color:var(--admin-text-secondary, #374151);border-color:var(--admin-border-primary, #e5e7eb)}.mp-action-btn--outline:hover{background:var(--admin-bg-hover, #f9fafb)}.mp-action-btn--icon{width:28px;height:28px;padding:0;background:transparent;color:var(--admin-text-muted, #9ca3af);border:none}.mp-action-btn--icon:hover{background:var(--admin-bg-hover, #f9fafb);color:var(--admin-text-primary, #171717)}.mp-action-btn--icon-danger{width:28px;height:28px;padding:0;background:transparent;color:#dc2626;border:none}.mp-action-btn--icon-danger:hover{background:var(--admin-error-bg, #fee2e2);color:#dc2626}:host{display:block}.store{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}.store img{-webkit-user-drag:none;pointer-events:none}.store{display:block;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .2s ease,transform .2s ease;cursor:pointer}.store:active{transform:scale(.995);box-shadow:0 4px 14px #00000014}.store--suspended{cursor:not-allowed;opacity:.6}.store--closed .store__cover{filter:grayscale(1) brightness(.92);transition:filter .2s ease}.store--preview{cursor:default}.store--preview:active{transform:none;box-shadow:none}.store__cover{height:120px;position:relative;overflow:hidden;background:linear-gradient(135deg,#3a3a3a,#171717)}.store__cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s ease-out}.store__cover-img.sui-img-loaded{opacity:1}.store__cover-img[data-sui-img-dead]{display:none}.store__cover-grad{position:absolute;inset:0;background:linear-gradient(180deg,#0000 40%,#00000059);pointer-events:none}.store__fav{position:absolute;top:10px;left:10px;width:36px;height:36px;border-radius:999px;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1;transition:background .15s ease}.store__fav:active{background:#fff}.store__status{position:absolute;top:10px;right:10px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:inline-flex;align-items:center;gap:4px;z-index:1;letter-spacing:.01em}.store__status:before{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--sui-state-success-base, #22c55e)}.store__status--open{color:var(--sui-state-success-base, #16a34a)}.store__status--open:before{background:var(--sui-state-success-base, #22c55e)}.store__status--closed{color:var(--sui-state-faded-base, #94a3b8)}.store__status--closed:before{background:var(--sui-state-faded-base, #94a3b8)}.store__status--suspended{color:var(--sui-state-error-base, #dc2626)}.store__status--suspended:before{background:var(--sui-state-error-base, #dc2626)}.store__status--draft{color:var(--sui-state-faded-base, #475569);background:#fffffff5}.store__status--draft:before{background:var(--sui-state-faded-base, #94a3b8)}.store__status--pending{color:#c2530b;background:#fffffff5}.store__status--pending:before{background:var(--sui-primary-base, #fa7319);animation:store-pulse 1.6s ease-in-out infinite}.store__status--rejected{color:var(--sui-state-error-base, #b91c1c);background:#fffffff5}.store__status--rejected:before{background:var(--sui-state-error-base, #dc2626)}@keyframes store-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.4)}}.store__body{padding:12px 14px 14px;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}.store__logo img[data-sui-img-dead]{display:none}.store__logo{width:48px;height:48px;border-radius:10px;background:var(--sui-bg-white-0, #fff);border:2px solid var(--sui-bg-white-0, #fff);box-shadow:0 1px 4px #0000001f;flex-shrink:0;margin-top:-32px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:var(--sui-primary-base, #fa7319);overflow:hidden;position:relative;z-index:2}.store__logo img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.store__info{flex:1;min-width:0}.store__name{font-size:20px;line-height:26px;font-weight:700;color:var(--sui-text-strong-950, #171717);margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.store__type{font-size:14px;line-height:20px;font-weight:500;color:var(--sui-text-sub-600, #5c5c5c);margin:0 0 8px}.store__meta{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px;padding-top:14px;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb)}.store__meta--preview{justify-content:flex-start;gap:32px}.store__stat{display:flex;flex-direction:column;gap:2px;min-width:0}.store__stat--clickable{background:transparent;border:none;padding:4px 6px;margin:-4px -6px;border-radius:8px;cursor:pointer;text-align:left;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;transition:background-color .15s}.store__stat--clickable:hover{background:var(--sui-bg-weak-50, #f5f7fa)}.store__stat--clickable:active{background:var(--sui-bg-soft-200, #ebeef2)}.store__stat-label{font-size:10px;color:var(--sui-text-soft-400, #a3a3a3);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.store__stat-value{font-size:13px;font-weight:700;color:var(--sui-text-strong-950, #171717);display:inline-flex;align-items:center;gap:3px;white-space:nowrap}.store__stat-value svg{color:var(--sui-primary-base, #fa7319);flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "directive", type: SuiImgRetry, selector: "img[suiImgRetry]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14769
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiStoreCard, isStandalone: true, selector: "sui-store-card", inputs: { store: { classPropertyName: "store", publicName: "store", isSignal: true, isRequired: true, transformFunction: null }, isFavorite: { classPropertyName: "isFavorite", publicName: "isFavorite", isSignal: true, isRequired: false, transformFunction: null }, disableLink: { classPropertyName: "disableLink", publicName: "disableLink", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleFavorite: "toggleFavorite", ratingClicked: "ratingClicked" }, ngImport: i0, template: "<a class=\"store\"\n [class.store--suspended]=\"store().isSuspended\"\n [class.store--closed]=\"!store().isOpen && !store().isSuspended && !store().isOwnerPreview\"\n [class.store--preview]=\"store().isOwnerPreview\"\n [routerLink]=\"link()\"\n (click)=\"onCardClick($event)\">\n\n <div class=\"store__cover\"\n [class.store__cover--fallback]=\"!store().coverUrl\">\n <!-- <img> real (no background CSS): permite retry nativo via suiImgRetry\n cuando un load falla (red flaky) + fade-in al cargar. El fallback\n oscuro queda debajo como placeholder hasta que la imagen aparece. -->\n @if (store().coverUrl) {\n <img class=\"store__cover-img\"\n suiImgRetry\n [src]=\"store().coverUrl\"\n alt=\"\"\n loading=\"lazy\"\n decoding=\"async\" />\n }\n <div class=\"store__cover-grad\"></div>\n\n @if (!store().isOwnerPreview) {\n <button type=\"button\"\n class=\"store__fav\"\n [class.store__fav--active]=\"isFavorite()\"\n (click)=\"onFavClick($event)\"\n aria-label=\"Favorito\">\n <sui-icon\n [name]=\"isFavorite() ? 'heart-fill' : 'heart-line'\"\n [size]=\"18\"\n color=\"var(--sui-primary-base, #fa7319)\"\n ></sui-icon>\n </button>\n }\n\n @if (store().isSuspended) {\n <span class=\"store__status store__status--suspended\">No disponible</span>\n } @else if (previewBadge(); as pb) {\n <span class=\"store__status\"\n [class.store__status--draft]=\"pb.variant === 'draft'\"\n [class.store__status--pending]=\"pb.variant === 'pending'\"\n [class.store__status--rejected]=\"pb.variant === 'rejected'\">\n {{ pb.label }}\n </span>\n } @else {\n <span class=\"store__status\"\n [class.store__status--open]=\"store().isOpen\"\n [class.store__status--closed]=\"!store().isOpen\">\n {{ store().isOpen ? 'Abierto' : 'Cerrado' }}\n </span>\n }\n </div>\n\n <div class=\"store__body\">\n <div class=\"store__logo\">\n @if (store().logoUrl) {\n <!-- suiImgRetry reintenta loads fallidos; si muere definitivo, el\n atributo data-sui-img-dead lo oculta via CSS (queda el fondo). -->\n <img suiImgRetry [src]=\"store().logoUrl\" [alt]=\"store().name\" />\n } @else {\n {{ initial() }}\n }\n </div>\n <div class=\"store__info\">\n <h3 class=\"store__name\">{{ store().name }}</h3>\n <p class=\"store__type\">{{ store().businessType }}</p>\n </div>\n\n <!-- Meta a ANCHO COMPLETO de la card (hijo directo del body con wrap):\n antes viv\u00EDa dentro de store__info y heredaba el sangrado del logo\n (60px muertos a la izquierda). -->\n @if (store().isOwnerPreview) {\n <!-- Modo preview (owner viendo borrador/revisi\u00F3n, super-admin revisando):\n solo Ubicaci\u00F3n + Env\u00EDo. Rating + Distancia no aplican antes de aprobar. -->\n <div class=\"store__meta store__meta--preview\">\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Ubicaci\u00F3n</span>\n <span class=\"store__stat-value\">\n <sui-icon name=\"map-pin-line\" [size]=\"13\" color=\"var(--sui-primary-base, #fa7319)\"></sui-icon>\n {{ store().district || '\u2014' }}\n </span>\n </div>\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Env\u00EDo</span>\n <span class=\"store__stat-value\">{{ deliveryLabel() }}</span>\n </div>\n </div>\n } @else {\n <div class=\"store__meta\">\n <button\n type=\"button\"\n class=\"store__stat store__stat--clickable\"\n (click)=\"onRatingClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n [attr.aria-label]=\"'Ver calificaciones del local'\"\n >\n <span class=\"store__stat-label\">Calificaci\u00F3n</span>\n <span class=\"store__stat-value\">\n <sui-icon name=\"star-fill\" [size]=\"13\" color=\"var(--sui-primary-base, #fa7319)\"></sui-icon>\n {{ ratingLabel() }}\n </span>\n </button>\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Ubicaci\u00F3n</span>\n <span class=\"store__stat-value\">\n <sui-icon name=\"map-pin-line\" [size]=\"13\" color=\"var(--sui-primary-base, #fa7319)\"></sui-icon>\n {{ store().district || '\u2014' }}\n </span>\n </div>\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Env\u00EDo</span>\n <span class=\"store__stat-value\">{{ deliveryLabel() }}</span>\n </div>\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Distancia</span>\n <span class=\"store__stat-value\">{{ distanceLabel() }}</span>\n </div>\n </div>\n }\n </div>\n</a>\n", styles: ["@charset \"UTF-8\";.mp-badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent;line-height:1}.mp-badge--green{background:var(--admin-success-bg, #dcfce7);color:var(--admin-success, #16a34a)}.mp-badge--red{background:var(--admin-error-bg, #fee2e2);color:var(--admin-error, #ef4444)}.mp-badge--orange{background:#fff7ed;color:#c2410c;border-color:#fed7aa}.mp-badge--blue{background:var(--admin-info-bg, #dbeafe);color:#2563eb}.mp-badge--gray{background:var(--admin-bg-tertiary, #f3f4f6);color:var(--admin-text-tertiary, #6b7280)}.mp-badge--sm{height:20px;padding:0 8px;font-size:11px}.mp-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border-radius:6px;border:1px solid transparent;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s ease}.mp-action-btn:disabled{opacity:.5;cursor:not-allowed}.mp-action-btn--activate{background:var(--admin-success, #16a34a);color:#fff}.mp-action-btn--activate:hover{background:#15803d}.mp-action-btn--renew{background:var(--admin-info, #3b82f6);color:#fff}.mp-action-btn--renew:hover{background:#2563eb}.mp-action-btn--suspend{background:var(--admin-bg-primary, #fff);color:var(--admin-error, #ef4444);border-color:#fca5a5}.mp-action-btn--suspend:hover{background:var(--admin-error-bg, #fee2e2)}.mp-action-btn--danger{background:#dc2626;color:#fff;border:none}.mp-action-btn--danger:hover{background:#b91c1c}.mp-action-btn--outline{background:var(--admin-bg-primary, #fff);color:var(--admin-text-secondary, #374151);border-color:var(--admin-border-primary, #e5e7eb)}.mp-action-btn--outline:hover{background:var(--admin-bg-hover, #f9fafb)}.mp-action-btn--icon{width:28px;height:28px;padding:0;background:transparent;color:var(--admin-text-muted, #9ca3af);border:none}.mp-action-btn--icon:hover{background:var(--admin-bg-hover, #f9fafb);color:var(--admin-text-primary, #171717)}.mp-action-btn--icon-danger{width:28px;height:28px;padding:0;background:transparent;color:#dc2626;border:none}.mp-action-btn--icon-danger:hover{background:var(--admin-error-bg, #fee2e2);color:#dc2626}:host{display:block}.store{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}.store img{-webkit-user-drag:none;pointer-events:none}.store{display:block;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .2s ease,transform .2s ease;cursor:pointer}.store:active{transform:scale(.995);box-shadow:0 4px 14px #00000014}.store--suspended{cursor:not-allowed;opacity:.6}.store--closed .store__cover{filter:grayscale(1) brightness(.92);transition:filter .2s ease}.store--preview{cursor:default}.store--preview:active{transform:none;box-shadow:none}.store__cover{height:120px;position:relative;overflow:hidden;background:linear-gradient(135deg,#3a3a3a,#171717)}.store__cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s ease-out}.store__cover-img.sui-img-loaded{opacity:1}.store__cover-img[data-sui-img-dead]{display:none}.store__cover-grad{position:absolute;inset:0;background:linear-gradient(180deg,#0000 40%,#00000059);pointer-events:none}.store__fav{position:absolute;top:10px;left:10px;width:36px;height:36px;border-radius:999px;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1;transition:background .15s ease}.store__fav:active{background:#fff}.store__status{position:absolute;top:10px;right:10px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:inline-flex;align-items:center;gap:4px;z-index:1;letter-spacing:.01em}.store__status:before{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--sui-state-success-base, #22c55e)}.store__status--open{color:var(--sui-state-success-base, #16a34a)}.store__status--open:before{background:var(--sui-state-success-base, #22c55e)}.store__status--closed{color:var(--sui-state-faded-base, #94a3b8)}.store__status--closed:before{background:var(--sui-state-faded-base, #94a3b8)}.store__status--suspended{color:var(--sui-state-error-base, #dc2626)}.store__status--suspended:before{background:var(--sui-state-error-base, #dc2626)}.store__status--draft{color:var(--sui-state-faded-base, #475569);background:#fffffff5}.store__status--draft:before{background:var(--sui-state-faded-base, #94a3b8)}.store__status--pending{color:var(--sui-primary-darkest, #b85513);background:#fffffff5}.store__status--pending:before{background:var(--sui-primary-base, #fa7319);animation:store-pulse 1.6s ease-in-out infinite}.store__status--rejected{color:var(--sui-state-error-base, #b91c1c);background:#fffffff5}.store__status--rejected:before{background:var(--sui-state-error-base, #dc2626)}@keyframes store-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.4)}}.store__body{padding:12px 14px 14px;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}.store__logo img[data-sui-img-dead]{display:none}.store__logo{width:48px;height:48px;border-radius:10px;background:var(--sui-static-white, #fff);border:2px solid var(--sui-static-white, #fff);box-shadow:0 1px 4px #0000001f;flex-shrink:0;margin-top:-32px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:var(--sui-primary-base, #fa7319);overflow:hidden;position:relative;z-index:2}.store__logo img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.store__info{flex:1;min-width:0}.store__name{font-size:20px;line-height:26px;font-weight:700;color:var(--sui-text-strong-950, #171717);margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.store__type{font-size:14px;line-height:20px;font-weight:500;color:var(--sui-text-sub-600, #5c5c5c);margin:0 0 8px}.store__meta{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px;padding-top:14px;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb)}.store__meta--preview{justify-content:flex-start;gap:32px}.store__stat{display:flex;flex-direction:column;gap:2px;min-width:0}.store__stat--clickable{background:transparent;border:none;padding:4px 6px;margin:-4px -6px;border-radius:8px;cursor:pointer;text-align:left;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;transition:background-color .15s}.store__stat--clickable:hover{background:var(--sui-bg-weak-50, #f5f7fa)}.store__stat--clickable:active{background:var(--sui-bg-soft-200, #ebeef2)}.store__stat-label{font-size:10px;color:var(--sui-text-soft-400, #a3a3a3);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.store__stat-value{font-size:13px;font-weight:700;color:var(--sui-text-strong-950, #171717);display:inline-flex;align-items:center;gap:3px;white-space:nowrap}.store__stat-value svg{color:var(--sui-primary-base, #fa7319);flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "directive", type: SuiImgRetry, selector: "img[suiImgRetry]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14729
14770
|
}
|
|
14730
14771
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiStoreCard, decorators: [{
|
|
14731
14772
|
type: Component,
|
|
14732
|
-
args: [{ selector: 'sui-store-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink, SuiIcon, SuiImgRetry], template: "<a class=\"store\"\n [class.store--suspended]=\"store().isSuspended\"\n [class.store--closed]=\"!store().isOpen && !store().isSuspended && !store().isOwnerPreview\"\n [class.store--preview]=\"store().isOwnerPreview\"\n [routerLink]=\"link()\"\n (click)=\"onCardClick($event)\">\n\n <div class=\"store__cover\"\n [class.store__cover--fallback]=\"!store().coverUrl\">\n <!-- <img> real (no background CSS): permite retry nativo via suiImgRetry\n cuando un load falla (red flaky) + fade-in al cargar. El fallback\n oscuro queda debajo como placeholder hasta que la imagen aparece. -->\n @if (store().coverUrl) {\n <img class=\"store__cover-img\"\n suiImgRetry\n [src]=\"store().coverUrl\"\n alt=\"\"\n loading=\"lazy\"\n decoding=\"async\" />\n }\n <div class=\"store__cover-grad\"></div>\n\n @if (!store().isOwnerPreview) {\n <button type=\"button\"\n class=\"store__fav\"\n [class.store__fav--active]=\"isFavorite()\"\n (click)=\"onFavClick($event)\"\n aria-label=\"Favorito\">\n <sui-icon\n [name]=\"isFavorite() ? 'heart-fill' : 'heart-line'\"\n [size]=\"18\"\n color=\"#fa7319\"\n ></sui-icon>\n </button>\n }\n\n @if (store().isSuspended) {\n <span class=\"store__status store__status--suspended\">No disponible</span>\n } @else if (previewBadge(); as pb) {\n <span class=\"store__status\"\n [class.store__status--draft]=\"pb.variant === 'draft'\"\n [class.store__status--pending]=\"pb.variant === 'pending'\"\n [class.store__status--rejected]=\"pb.variant === 'rejected'\">\n {{ pb.label }}\n </span>\n } @else {\n <span class=\"store__status\"\n [class.store__status--open]=\"store().isOpen\"\n [class.store__status--closed]=\"!store().isOpen\">\n {{ store().isOpen ? 'Abierto' : 'Cerrado' }}\n </span>\n }\n </div>\n\n <div class=\"store__body\">\n <div class=\"store__logo\">\n @if (store().logoUrl) {\n <!-- suiImgRetry reintenta loads fallidos; si muere definitivo, el\n atributo data-sui-img-dead lo oculta via CSS (queda el fondo). -->\n <img suiImgRetry [src]=\"store().logoUrl\" [alt]=\"store().name\" />\n } @else {\n {{ initial() }}\n }\n </div>\n <div class=\"store__info\">\n <h3 class=\"store__name\">{{ store().name }}</h3>\n <p class=\"store__type\">{{ store().businessType }}</p>\n </div>\n\n <!-- Meta a ANCHO COMPLETO de la card (hijo directo del body con wrap):\n antes viv\u00EDa dentro de store__info y heredaba el sangrado del logo\n (60px muertos a la izquierda). -->\n @if (store().isOwnerPreview) {\n <!-- Modo preview (owner viendo borrador/revisi\u00F3n, super-admin revisando):\n solo Ubicaci\u00F3n + Env\u00EDo. Rating + Distancia no aplican antes de aprobar. -->\n <div class=\"store__meta store__meta--preview\">\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Ubicaci\u00F3n</span>\n <span class=\"store__stat-value\">\n <sui-icon name=\"map-pin-line\" [size]=\"13\" color=\"var(--brand-500, #fa7319)\"></sui-icon>\n {{ store().district || '\u2014' }}\n </span>\n </div>\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Env\u00EDo</span>\n <span class=\"store__stat-value\">{{ deliveryLabel() }}</span>\n </div>\n </div>\n } @else {\n <div class=\"store__meta\">\n <button\n type=\"button\"\n class=\"store__stat store__stat--clickable\"\n (click)=\"onRatingClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n [attr.aria-label]=\"'Ver calificaciones del local'\"\n >\n <span class=\"store__stat-label\">Calificaci\u00F3n</span>\n <span class=\"store__stat-value\">\n <sui-icon name=\"star-fill\" [size]=\"13\" color=\"var(--brand-500, #fa7319)\"></sui-icon>\n {{ ratingLabel() }}\n </span>\n </button>\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Ubicaci\u00F3n</span>\n <span class=\"store__stat-value\">\n <sui-icon name=\"map-pin-line\" [size]=\"13\" color=\"var(--brand-500, #fa7319)\"></sui-icon>\n {{ store().district || '\u2014' }}\n </span>\n </div>\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Env\u00EDo</span>\n <span class=\"store__stat-value\">{{ deliveryLabel() }}</span>\n </div>\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Distancia</span>\n <span class=\"store__stat-value\">{{ distanceLabel() }}</span>\n </div>\n </div>\n }\n </div>\n</a>\n", styles: ["@charset \"UTF-8\";.mp-badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent;line-height:1}.mp-badge--green{background:var(--admin-success-bg, #dcfce7);color:var(--admin-success, #16a34a)}.mp-badge--red{background:var(--admin-error-bg, #fee2e2);color:var(--admin-error, #ef4444)}.mp-badge--orange{background:#fff7ed;color:#c2410c;border-color:#fed7aa}.mp-badge--blue{background:var(--admin-info-bg, #dbeafe);color:#2563eb}.mp-badge--gray{background:var(--admin-bg-tertiary, #f3f4f6);color:var(--admin-text-tertiary, #6b7280)}.mp-badge--sm{height:20px;padding:0 8px;font-size:11px}.mp-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border-radius:6px;border:1px solid transparent;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s ease}.mp-action-btn:disabled{opacity:.5;cursor:not-allowed}.mp-action-btn--activate{background:var(--admin-success, #16a34a);color:#fff}.mp-action-btn--activate:hover{background:#15803d}.mp-action-btn--renew{background:var(--admin-info, #3b82f6);color:#fff}.mp-action-btn--renew:hover{background:#2563eb}.mp-action-btn--suspend{background:var(--admin-bg-primary, #fff);color:var(--admin-error, #ef4444);border-color:#fca5a5}.mp-action-btn--suspend:hover{background:var(--admin-error-bg, #fee2e2)}.mp-action-btn--danger{background:#dc2626;color:#fff;border:none}.mp-action-btn--danger:hover{background:#b91c1c}.mp-action-btn--outline{background:var(--admin-bg-primary, #fff);color:var(--admin-text-secondary, #374151);border-color:var(--admin-border-primary, #e5e7eb)}.mp-action-btn--outline:hover{background:var(--admin-bg-hover, #f9fafb)}.mp-action-btn--icon{width:28px;height:28px;padding:0;background:transparent;color:var(--admin-text-muted, #9ca3af);border:none}.mp-action-btn--icon:hover{background:var(--admin-bg-hover, #f9fafb);color:var(--admin-text-primary, #171717)}.mp-action-btn--icon-danger{width:28px;height:28px;padding:0;background:transparent;color:#dc2626;border:none}.mp-action-btn--icon-danger:hover{background:var(--admin-error-bg, #fee2e2);color:#dc2626}:host{display:block}.store{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}.store img{-webkit-user-drag:none;pointer-events:none}.store{display:block;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .2s ease,transform .2s ease;cursor:pointer}.store:active{transform:scale(.995);box-shadow:0 4px 14px #00000014}.store--suspended{cursor:not-allowed;opacity:.6}.store--closed .store__cover{filter:grayscale(1) brightness(.92);transition:filter .2s ease}.store--preview{cursor:default}.store--preview:active{transform:none;box-shadow:none}.store__cover{height:120px;position:relative;overflow:hidden;background:linear-gradient(135deg,#3a3a3a,#171717)}.store__cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s ease-out}.store__cover-img.sui-img-loaded{opacity:1}.store__cover-img[data-sui-img-dead]{display:none}.store__cover-grad{position:absolute;inset:0;background:linear-gradient(180deg,#0000 40%,#00000059);pointer-events:none}.store__fav{position:absolute;top:10px;left:10px;width:36px;height:36px;border-radius:999px;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1;transition:background .15s ease}.store__fav:active{background:#fff}.store__status{position:absolute;top:10px;right:10px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:inline-flex;align-items:center;gap:4px;z-index:1;letter-spacing:.01em}.store__status:before{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--sui-state-success-base, #22c55e)}.store__status--open{color:var(--sui-state-success-base, #16a34a)}.store__status--open:before{background:var(--sui-state-success-base, #22c55e)}.store__status--closed{color:var(--sui-state-faded-base, #94a3b8)}.store__status--closed:before{background:var(--sui-state-faded-base, #94a3b8)}.store__status--suspended{color:var(--sui-state-error-base, #dc2626)}.store__status--suspended:before{background:var(--sui-state-error-base, #dc2626)}.store__status--draft{color:var(--sui-state-faded-base, #475569);background:#fffffff5}.store__status--draft:before{background:var(--sui-state-faded-base, #94a3b8)}.store__status--pending{color:#c2530b;background:#fffffff5}.store__status--pending:before{background:var(--sui-primary-base, #fa7319);animation:store-pulse 1.6s ease-in-out infinite}.store__status--rejected{color:var(--sui-state-error-base, #b91c1c);background:#fffffff5}.store__status--rejected:before{background:var(--sui-state-error-base, #dc2626)}@keyframes store-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.4)}}.store__body{padding:12px 14px 14px;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}.store__logo img[data-sui-img-dead]{display:none}.store__logo{width:48px;height:48px;border-radius:10px;background:var(--sui-bg-white-0, #fff);border:2px solid var(--sui-bg-white-0, #fff);box-shadow:0 1px 4px #0000001f;flex-shrink:0;margin-top:-32px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:var(--sui-primary-base, #fa7319);overflow:hidden;position:relative;z-index:2}.store__logo img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.store__info{flex:1;min-width:0}.store__name{font-size:20px;line-height:26px;font-weight:700;color:var(--sui-text-strong-950, #171717);margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.store__type{font-size:14px;line-height:20px;font-weight:500;color:var(--sui-text-sub-600, #5c5c5c);margin:0 0 8px}.store__meta{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px;padding-top:14px;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb)}.store__meta--preview{justify-content:flex-start;gap:32px}.store__stat{display:flex;flex-direction:column;gap:2px;min-width:0}.store__stat--clickable{background:transparent;border:none;padding:4px 6px;margin:-4px -6px;border-radius:8px;cursor:pointer;text-align:left;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;transition:background-color .15s}.store__stat--clickable:hover{background:var(--sui-bg-weak-50, #f5f7fa)}.store__stat--clickable:active{background:var(--sui-bg-soft-200, #ebeef2)}.store__stat-label{font-size:10px;color:var(--sui-text-soft-400, #a3a3a3);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.store__stat-value{font-size:13px;font-weight:700;color:var(--sui-text-strong-950, #171717);display:inline-flex;align-items:center;gap:3px;white-space:nowrap}.store__stat-value svg{color:var(--sui-primary-base, #fa7319);flex-shrink:0}\n"] }]
|
|
14773
|
+
args: [{ selector: 'sui-store-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink, SuiIcon, SuiImgRetry], template: "<a class=\"store\"\n [class.store--suspended]=\"store().isSuspended\"\n [class.store--closed]=\"!store().isOpen && !store().isSuspended && !store().isOwnerPreview\"\n [class.store--preview]=\"store().isOwnerPreview\"\n [routerLink]=\"link()\"\n (click)=\"onCardClick($event)\">\n\n <div class=\"store__cover\"\n [class.store__cover--fallback]=\"!store().coverUrl\">\n <!-- <img> real (no background CSS): permite retry nativo via suiImgRetry\n cuando un load falla (red flaky) + fade-in al cargar. El fallback\n oscuro queda debajo como placeholder hasta que la imagen aparece. -->\n @if (store().coverUrl) {\n <img class=\"store__cover-img\"\n suiImgRetry\n [src]=\"store().coverUrl\"\n alt=\"\"\n loading=\"lazy\"\n decoding=\"async\" />\n }\n <div class=\"store__cover-grad\"></div>\n\n @if (!store().isOwnerPreview) {\n <button type=\"button\"\n class=\"store__fav\"\n [class.store__fav--active]=\"isFavorite()\"\n (click)=\"onFavClick($event)\"\n aria-label=\"Favorito\">\n <sui-icon\n [name]=\"isFavorite() ? 'heart-fill' : 'heart-line'\"\n [size]=\"18\"\n color=\"var(--sui-primary-base, #fa7319)\"\n ></sui-icon>\n </button>\n }\n\n @if (store().isSuspended) {\n <span class=\"store__status store__status--suspended\">No disponible</span>\n } @else if (previewBadge(); as pb) {\n <span class=\"store__status\"\n [class.store__status--draft]=\"pb.variant === 'draft'\"\n [class.store__status--pending]=\"pb.variant === 'pending'\"\n [class.store__status--rejected]=\"pb.variant === 'rejected'\">\n {{ pb.label }}\n </span>\n } @else {\n <span class=\"store__status\"\n [class.store__status--open]=\"store().isOpen\"\n [class.store__status--closed]=\"!store().isOpen\">\n {{ store().isOpen ? 'Abierto' : 'Cerrado' }}\n </span>\n }\n </div>\n\n <div class=\"store__body\">\n <div class=\"store__logo\">\n @if (store().logoUrl) {\n <!-- suiImgRetry reintenta loads fallidos; si muere definitivo, el\n atributo data-sui-img-dead lo oculta via CSS (queda el fondo). -->\n <img suiImgRetry [src]=\"store().logoUrl\" [alt]=\"store().name\" />\n } @else {\n {{ initial() }}\n }\n </div>\n <div class=\"store__info\">\n <h3 class=\"store__name\">{{ store().name }}</h3>\n <p class=\"store__type\">{{ store().businessType }}</p>\n </div>\n\n <!-- Meta a ANCHO COMPLETO de la card (hijo directo del body con wrap):\n antes viv\u00EDa dentro de store__info y heredaba el sangrado del logo\n (60px muertos a la izquierda). -->\n @if (store().isOwnerPreview) {\n <!-- Modo preview (owner viendo borrador/revisi\u00F3n, super-admin revisando):\n solo Ubicaci\u00F3n + Env\u00EDo. Rating + Distancia no aplican antes de aprobar. -->\n <div class=\"store__meta store__meta--preview\">\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Ubicaci\u00F3n</span>\n <span class=\"store__stat-value\">\n <sui-icon name=\"map-pin-line\" [size]=\"13\" color=\"var(--sui-primary-base, #fa7319)\"></sui-icon>\n {{ store().district || '\u2014' }}\n </span>\n </div>\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Env\u00EDo</span>\n <span class=\"store__stat-value\">{{ deliveryLabel() }}</span>\n </div>\n </div>\n } @else {\n <div class=\"store__meta\">\n <button\n type=\"button\"\n class=\"store__stat store__stat--clickable\"\n (click)=\"onRatingClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n [attr.aria-label]=\"'Ver calificaciones del local'\"\n >\n <span class=\"store__stat-label\">Calificaci\u00F3n</span>\n <span class=\"store__stat-value\">\n <sui-icon name=\"star-fill\" [size]=\"13\" color=\"var(--sui-primary-base, #fa7319)\"></sui-icon>\n {{ ratingLabel() }}\n </span>\n </button>\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Ubicaci\u00F3n</span>\n <span class=\"store__stat-value\">\n <sui-icon name=\"map-pin-line\" [size]=\"13\" color=\"var(--sui-primary-base, #fa7319)\"></sui-icon>\n {{ store().district || '\u2014' }}\n </span>\n </div>\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Env\u00EDo</span>\n <span class=\"store__stat-value\">{{ deliveryLabel() }}</span>\n </div>\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Distancia</span>\n <span class=\"store__stat-value\">{{ distanceLabel() }}</span>\n </div>\n </div>\n }\n </div>\n</a>\n", styles: ["@charset \"UTF-8\";.mp-badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent;line-height:1}.mp-badge--green{background:var(--admin-success-bg, #dcfce7);color:var(--admin-success, #16a34a)}.mp-badge--red{background:var(--admin-error-bg, #fee2e2);color:var(--admin-error, #ef4444)}.mp-badge--orange{background:#fff7ed;color:#c2410c;border-color:#fed7aa}.mp-badge--blue{background:var(--admin-info-bg, #dbeafe);color:#2563eb}.mp-badge--gray{background:var(--admin-bg-tertiary, #f3f4f6);color:var(--admin-text-tertiary, #6b7280)}.mp-badge--sm{height:20px;padding:0 8px;font-size:11px}.mp-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border-radius:6px;border:1px solid transparent;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s ease}.mp-action-btn:disabled{opacity:.5;cursor:not-allowed}.mp-action-btn--activate{background:var(--admin-success, #16a34a);color:#fff}.mp-action-btn--activate:hover{background:#15803d}.mp-action-btn--renew{background:var(--admin-info, #3b82f6);color:#fff}.mp-action-btn--renew:hover{background:#2563eb}.mp-action-btn--suspend{background:var(--admin-bg-primary, #fff);color:var(--admin-error, #ef4444);border-color:#fca5a5}.mp-action-btn--suspend:hover{background:var(--admin-error-bg, #fee2e2)}.mp-action-btn--danger{background:#dc2626;color:#fff;border:none}.mp-action-btn--danger:hover{background:#b91c1c}.mp-action-btn--outline{background:var(--admin-bg-primary, #fff);color:var(--admin-text-secondary, #374151);border-color:var(--admin-border-primary, #e5e7eb)}.mp-action-btn--outline:hover{background:var(--admin-bg-hover, #f9fafb)}.mp-action-btn--icon{width:28px;height:28px;padding:0;background:transparent;color:var(--admin-text-muted, #9ca3af);border:none}.mp-action-btn--icon:hover{background:var(--admin-bg-hover, #f9fafb);color:var(--admin-text-primary, #171717)}.mp-action-btn--icon-danger{width:28px;height:28px;padding:0;background:transparent;color:#dc2626;border:none}.mp-action-btn--icon-danger:hover{background:var(--admin-error-bg, #fee2e2);color:#dc2626}:host{display:block}.store{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}.store img{-webkit-user-drag:none;pointer-events:none}.store{display:block;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .2s ease,transform .2s ease;cursor:pointer}.store:active{transform:scale(.995);box-shadow:0 4px 14px #00000014}.store--suspended{cursor:not-allowed;opacity:.6}.store--closed .store__cover{filter:grayscale(1) brightness(.92);transition:filter .2s ease}.store--preview{cursor:default}.store--preview:active{transform:none;box-shadow:none}.store__cover{height:120px;position:relative;overflow:hidden;background:linear-gradient(135deg,#3a3a3a,#171717)}.store__cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s ease-out}.store__cover-img.sui-img-loaded{opacity:1}.store__cover-img[data-sui-img-dead]{display:none}.store__cover-grad{position:absolute;inset:0;background:linear-gradient(180deg,#0000 40%,#00000059);pointer-events:none}.store__fav{position:absolute;top:10px;left:10px;width:36px;height:36px;border-radius:999px;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1;transition:background .15s ease}.store__fav:active{background:#fff}.store__status{position:absolute;top:10px;right:10px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:inline-flex;align-items:center;gap:4px;z-index:1;letter-spacing:.01em}.store__status:before{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--sui-state-success-base, #22c55e)}.store__status--open{color:var(--sui-state-success-base, #16a34a)}.store__status--open:before{background:var(--sui-state-success-base, #22c55e)}.store__status--closed{color:var(--sui-state-faded-base, #94a3b8)}.store__status--closed:before{background:var(--sui-state-faded-base, #94a3b8)}.store__status--suspended{color:var(--sui-state-error-base, #dc2626)}.store__status--suspended:before{background:var(--sui-state-error-base, #dc2626)}.store__status--draft{color:var(--sui-state-faded-base, #475569);background:#fffffff5}.store__status--draft:before{background:var(--sui-state-faded-base, #94a3b8)}.store__status--pending{color:var(--sui-primary-darkest, #b85513);background:#fffffff5}.store__status--pending:before{background:var(--sui-primary-base, #fa7319);animation:store-pulse 1.6s ease-in-out infinite}.store__status--rejected{color:var(--sui-state-error-base, #b91c1c);background:#fffffff5}.store__status--rejected:before{background:var(--sui-state-error-base, #dc2626)}@keyframes store-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.4)}}.store__body{padding:12px 14px 14px;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}.store__logo img[data-sui-img-dead]{display:none}.store__logo{width:48px;height:48px;border-radius:10px;background:var(--sui-static-white, #fff);border:2px solid var(--sui-static-white, #fff);box-shadow:0 1px 4px #0000001f;flex-shrink:0;margin-top:-32px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:var(--sui-primary-base, #fa7319);overflow:hidden;position:relative;z-index:2}.store__logo img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.store__info{flex:1;min-width:0}.store__name{font-size:20px;line-height:26px;font-weight:700;color:var(--sui-text-strong-950, #171717);margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.store__type{font-size:14px;line-height:20px;font-weight:500;color:var(--sui-text-sub-600, #5c5c5c);margin:0 0 8px}.store__meta{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px;padding-top:14px;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb)}.store__meta--preview{justify-content:flex-start;gap:32px}.store__stat{display:flex;flex-direction:column;gap:2px;min-width:0}.store__stat--clickable{background:transparent;border:none;padding:4px 6px;margin:-4px -6px;border-radius:8px;cursor:pointer;text-align:left;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;transition:background-color .15s}.store__stat--clickable:hover{background:var(--sui-bg-weak-50, #f5f7fa)}.store__stat--clickable:active{background:var(--sui-bg-soft-200, #ebeef2)}.store__stat-label{font-size:10px;color:var(--sui-text-soft-400, #a3a3a3);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.store__stat-value{font-size:13px;font-weight:700;color:var(--sui-text-strong-950, #171717);display:inline-flex;align-items:center;gap:3px;white-space:nowrap}.store__stat-value svg{color:var(--sui-primary-base, #fa7319);flex-shrink:0}\n"] }]
|
|
14733
14774
|
}], propDecorators: { store: [{ type: i0.Input, args: [{ isSignal: true, alias: "store", required: true }] }], isFavorite: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFavorite", required: false }] }], disableLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableLink", required: false }] }], toggleFavorite: [{ type: i0.Output, args: ["toggleFavorite"] }], ratingClicked: [{ type: i0.Output, args: ["ratingClicked"] }] } });
|
|
14734
14775
|
|
|
14735
14776
|
/**
|
|
@@ -14854,10 +14895,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
14854
14895
|
* - Sublabel: 12/16 regular sub-600
|
|
14855
14896
|
* - Description: 12/16 regular sub-600
|
|
14856
14897
|
* - Title row gap: 4px, Body gap: 4px
|
|
14857
|
-
* -
|
|
14858
|
-
*
|
|
14859
|
-
*
|
|
14860
|
-
*
|
|
14898
|
+
* - Badge junto al label: <sui-badge> real honrando SuiBadgeConfig
|
|
14899
|
+
* (color/variant/size). Defaults blue/light/small = bg state/information/light,
|
|
14900
|
+
* text state/information/dark, 11/12 500 0.22px uppercase, padding 2/8,
|
|
14901
|
+
* radius 999 — color INFORMATION azul, fiel a Figma (DECISIONES.md §1: para
|
|
14902
|
+
* este badge "se cambió a azul (fiel Figma)"; el naranja de marca aplica solo
|
|
14903
|
+
* al active border / focus ring).
|
|
14861
14904
|
*
|
|
14862
14905
|
* LEADING SLOTS (verified vs Figma 2026-05-29, pull per-type design-context):
|
|
14863
14906
|
* - basic → sin leading.
|
|
@@ -14890,8 +14933,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
14890
14933
|
* - Switch internal margin-top 2px para baseline align: convención visual.
|
|
14891
14934
|
*
|
|
14892
14935
|
* COLOR MAPPING:
|
|
14893
|
-
* #c0d5ff → --sui-state-information-light (
|
|
14894
|
-
* #122368 → --sui-state-information-dark (
|
|
14936
|
+
* #c0d5ff → --sui-state-information-light (badge default bg, via sui-badge blue/light)
|
|
14937
|
+
* #122368 → --sui-state-information-dark (badge default text, via sui-badge blue/light)
|
|
14895
14938
|
* No hex hardcoded fuera de los fallbacks de los tokens.
|
|
14896
14939
|
*
|
|
14897
14940
|
* Form integration:
|
|
@@ -15024,11 +15067,11 @@ class SuiSwitchCard {
|
|
|
15024
15067
|
useExisting: forwardRef(() => SuiSwitchCard),
|
|
15025
15068
|
multi: true,
|
|
15026
15069
|
},
|
|
15027
|
-
], ngImport: i0, template: "@if (hasLeading()) {\n <div class=\"sui-switch-card__leading\">\n @if (type() === 'avatar') {\n <sui-avatar\n class=\"sui-switch-card__leading-avatar\"\n size=\"lg\"\n [src]=\"imageUrl()\"\n [initials]=\"initialsFromLabel()\" />\n } @else if (type() === 'left-icon' && emoji()) {\n <div class=\"sui-switch-card__leading-icon\">\n <sui-emoji class=\"sui-switch-card__leading-emoji\" [name]=\"emoji()!\" size=\"sm\" />\n </div>\n } @else if (imageUrl() && type() !== 'left-icon') {\n <!-- card-provider 32\u00D724 / brand 40\u00D740 bare / company 40\u00D740 circle \u2014 el box lo da la clase. -->\n <div [class]=\"leadingBoxClass()\">\n <img [src]=\"imageUrl()\" alt=\"\" class=\"sui-switch-card__leading-img\" />\n </div>\n } @else {\n <!-- \u00DANICO ng-content del slot: si se duplica por branch, Angular solo proyecta\n en el primero declarado y los dem\u00E1s types quedan vac\u00EDos (bug auditor\u00EDa). -->\n <div [class]=\"leadingBoxClass()\">\n <ng-content select=\"[sui-switch-card-leading]\" />\n </div>\n }\n </div>\n}\n\n<div class=\"sui-switch-card__body\">\n <div class=\"sui-switch-card__title\">\n <span class=\"sui-switch-card__label\">{{ label() }}</span>\n @if (sublabel(); as sub) {\n <span class=\"sui-switch-card__sublabel\">{{ sub }}</span>\n }\n @if (badgeCfg(); as bcfg) {\n <
|
|
15070
|
+
], ngImport: i0, template: "@if (hasLeading()) {\n <div class=\"sui-switch-card__leading\">\n @if (type() === 'avatar') {\n <sui-avatar\n class=\"sui-switch-card__leading-avatar\"\n size=\"lg\"\n [src]=\"imageUrl()\"\n [initials]=\"initialsFromLabel()\" />\n } @else if (type() === 'left-icon' && emoji()) {\n <div class=\"sui-switch-card__leading-icon\">\n <sui-emoji class=\"sui-switch-card__leading-emoji\" [name]=\"emoji()!\" size=\"sm\" />\n </div>\n } @else if (imageUrl() && type() !== 'left-icon') {\n <!-- card-provider 32\u00D724 / brand 40\u00D740 bare / company 40\u00D740 circle \u2014 el box lo da la clase. -->\n <div [class]=\"leadingBoxClass()\">\n <img [src]=\"imageUrl()\" alt=\"\" class=\"sui-switch-card__leading-img\" />\n </div>\n } @else {\n <!-- \u00DANICO ng-content del slot: si se duplica por branch, Angular solo proyecta\n en el primero declarado y los dem\u00E1s types quedan vac\u00EDos (bug auditor\u00EDa). -->\n <div [class]=\"leadingBoxClass()\">\n <ng-content select=\"[sui-switch-card-leading]\" />\n </div>\n }\n </div>\n}\n\n<div class=\"sui-switch-card__body\">\n <div class=\"sui-switch-card__title\">\n <span class=\"sui-switch-card__label\">{{ label() }}</span>\n @if (sublabel(); as sub) {\n <span class=\"sui-switch-card__sublabel\">{{ sub }}</span>\n }\n @if (badgeCfg(); as bcfg) {\n <!-- Badge real honrando SuiBadgeConfig; defaults blue/light/small =\n information azul fiel a Figma (DECISIONES.md \u00A71). -->\n <sui-badge\n class=\"sui-switch-card__badge\"\n [color]=\"bcfg.color ?? 'blue'\"\n [variant]=\"bcfg.variant ?? 'light'\"\n [size]=\"bcfg.size ?? 'small'\">{{ bcfg.label }}</sui-badge>\n }\n </div>\n @if (description(); as desc) {\n <p class=\"sui-switch-card__description\">{{ desc }}</p>\n }\n</div>\n\n<sui-switch\n class=\"sui-switch-card__switch\"\n [size]=\"size()\"\n [checked]=\"effectiveChecked()\"\n [disabled]=\"isDisabled()\"\n (checkedChange)=\"onSwitchChange($event)\"\n/>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:flex-start;gap:14px;padding:16px;border-radius:var(--sui-radius-12);background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-shadow-x-small);box-sizing:border-box;overflow:hidden;width:100%;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;outline:none;transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),border-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host(:hover:not([data-sui-disabled]):not([data-sui-checked])){background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}:host([data-sui-checked]:not([data-sui-disabled])){border-color:var(--sui-primary-base);box-shadow:none}:host([data-sui-disabled]){cursor:not-allowed;box-shadow:none}:host(:focus-visible){box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-base)}.sui-switch-card__leading{flex-shrink:0;display:flex;align-items:center;justify-content:center}.sui-switch-card__leading-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;padding:10px;border-radius:999px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-shadow-x-small);box-sizing:border-box}.sui-switch-card__leading-emoji{width:20px;height:20px}:host([data-sui-disabled]) .sui-switch-card__leading-icon{box-shadow:none;opacity:.5}:host([data-sui-type=avatar]) .sui-switch-card__leading-avatar{width:40px;height:40px}.sui-switch-card__leading-card-provider{width:32px;height:24px;border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center}.sui-switch-card__leading-brand{width:40px;height:40px;overflow:hidden;display:flex;align-items:center;justify-content:center}.sui-switch-card__leading-company{width:40px;height:40px;border-radius:999px;overflow:hidden;display:flex;align-items:center;justify-content:center}.sui-switch-card__leading-img{width:100%;height:100%;object-fit:contain;display:block}:host([data-sui-disabled]) .sui-switch-card__leading{opacity:.5}.sui-switch-card__body{display:flex;flex-direction:column;gap:4px;flex:1 1 auto;min-width:0;align-self:stretch}.sui-switch-card__body:not(:has(.sui-switch-card__description)){justify-content:center}.sui-switch-card__title{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.sui-switch-card__label{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950)}:host([data-sui-disabled]) .sui-switch-card__label{color:var(--sui-text-sub-600)}.sui-switch-card__sublabel{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600)}:host([data-sui-disabled]) .sui-switch-card__sublabel{color:var(--sui-text-soft-400)}.sui-switch-card__description{margin:0;font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600)}:host([data-sui-disabled]) .sui-switch-card__description{color:var(--sui-text-soft-400)}:host([data-sui-disabled]) .sui-switch-card__badge{background:transparent;border-color:var(--sui-stroke-soft-200);color:var(--sui-text-disabled-300)}.sui-switch-card__switch{flex-shrink:0;align-self:flex-start;margin-top:2px}\n"], dependencies: [{ kind: "component", type: SuiSwitch, selector: "sui-switch", inputs: ["size", "checked", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: SuiEmoji, selector: "sui-emoji", inputs: ["name", "src", "size", "ariaLabel"] }, { kind: "component", type: SuiAvatar, selector: "sui-avatar", inputs: ["size", "src", "alt", "initials", "color", "status", "memojiSrc", "illustrationSrc", "icon", "companyLogoSrc", "topBadge", "bgColor"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
15028
15071
|
}
|
|
15029
15072
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSwitchCard, decorators: [{
|
|
15030
15073
|
type: Component,
|
|
15031
|
-
args: [{ selector: 'sui-switch-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiSwitch, SuiEmoji, SuiAvatar], providers: [
|
|
15074
|
+
args: [{ selector: 'sui-switch-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiSwitch, SuiEmoji, SuiAvatar, SuiBadge], providers: [
|
|
15032
15075
|
{
|
|
15033
15076
|
provide: NG_VALUE_ACCESSOR,
|
|
15034
15077
|
useExisting: forwardRef(() => SuiSwitchCard),
|
|
@@ -15046,7 +15089,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
15046
15089
|
/* iOS WKWebView fix — ver CLAUDE.md "iOS :active stuck en custom buttons". */
|
|
15047
15090
|
'(touchstart)': '$event.currentTarget',
|
|
15048
15091
|
'(touchend)': '$any($event.currentTarget).blur()',
|
|
15049
|
-
}, template: "@if (hasLeading()) {\n <div class=\"sui-switch-card__leading\">\n @if (type() === 'avatar') {\n <sui-avatar\n class=\"sui-switch-card__leading-avatar\"\n size=\"lg\"\n [src]=\"imageUrl()\"\n [initials]=\"initialsFromLabel()\" />\n } @else if (type() === 'left-icon' && emoji()) {\n <div class=\"sui-switch-card__leading-icon\">\n <sui-emoji class=\"sui-switch-card__leading-emoji\" [name]=\"emoji()!\" size=\"sm\" />\n </div>\n } @else if (imageUrl() && type() !== 'left-icon') {\n <!-- card-provider 32\u00D724 / brand 40\u00D740 bare / company 40\u00D740 circle \u2014 el box lo da la clase. -->\n <div [class]=\"leadingBoxClass()\">\n <img [src]=\"imageUrl()\" alt=\"\" class=\"sui-switch-card__leading-img\" />\n </div>\n } @else {\n <!-- \u00DANICO ng-content del slot: si se duplica por branch, Angular solo proyecta\n en el primero declarado y los dem\u00E1s types quedan vac\u00EDos (bug auditor\u00EDa). -->\n <div [class]=\"leadingBoxClass()\">\n <ng-content select=\"[sui-switch-card-leading]\" />\n </div>\n }\n </div>\n}\n\n<div class=\"sui-switch-card__body\">\n <div class=\"sui-switch-card__title\">\n <span class=\"sui-switch-card__label\">{{ label() }}</span>\n @if (sublabel(); as sub) {\n <span class=\"sui-switch-card__sublabel\">{{ sub }}</span>\n }\n @if (badgeCfg(); as bcfg) {\n <
|
|
15092
|
+
}, template: "@if (hasLeading()) {\n <div class=\"sui-switch-card__leading\">\n @if (type() === 'avatar') {\n <sui-avatar\n class=\"sui-switch-card__leading-avatar\"\n size=\"lg\"\n [src]=\"imageUrl()\"\n [initials]=\"initialsFromLabel()\" />\n } @else if (type() === 'left-icon' && emoji()) {\n <div class=\"sui-switch-card__leading-icon\">\n <sui-emoji class=\"sui-switch-card__leading-emoji\" [name]=\"emoji()!\" size=\"sm\" />\n </div>\n } @else if (imageUrl() && type() !== 'left-icon') {\n <!-- card-provider 32\u00D724 / brand 40\u00D740 bare / company 40\u00D740 circle \u2014 el box lo da la clase. -->\n <div [class]=\"leadingBoxClass()\">\n <img [src]=\"imageUrl()\" alt=\"\" class=\"sui-switch-card__leading-img\" />\n </div>\n } @else {\n <!-- \u00DANICO ng-content del slot: si se duplica por branch, Angular solo proyecta\n en el primero declarado y los dem\u00E1s types quedan vac\u00EDos (bug auditor\u00EDa). -->\n <div [class]=\"leadingBoxClass()\">\n <ng-content select=\"[sui-switch-card-leading]\" />\n </div>\n }\n </div>\n}\n\n<div class=\"sui-switch-card__body\">\n <div class=\"sui-switch-card__title\">\n <span class=\"sui-switch-card__label\">{{ label() }}</span>\n @if (sublabel(); as sub) {\n <span class=\"sui-switch-card__sublabel\">{{ sub }}</span>\n }\n @if (badgeCfg(); as bcfg) {\n <!-- Badge real honrando SuiBadgeConfig; defaults blue/light/small =\n information azul fiel a Figma (DECISIONES.md \u00A71). -->\n <sui-badge\n class=\"sui-switch-card__badge\"\n [color]=\"bcfg.color ?? 'blue'\"\n [variant]=\"bcfg.variant ?? 'light'\"\n [size]=\"bcfg.size ?? 'small'\">{{ bcfg.label }}</sui-badge>\n }\n </div>\n @if (description(); as desc) {\n <p class=\"sui-switch-card__description\">{{ desc }}</p>\n }\n</div>\n\n<sui-switch\n class=\"sui-switch-card__switch\"\n [size]=\"size()\"\n [checked]=\"effectiveChecked()\"\n [disabled]=\"isDisabled()\"\n (checkedChange)=\"onSwitchChange($event)\"\n/>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:flex-start;gap:14px;padding:16px;border-radius:var(--sui-radius-12);background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-shadow-x-small);box-sizing:border-box;overflow:hidden;width:100%;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;outline:none;transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),border-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host(:hover:not([data-sui-disabled]):not([data-sui-checked])){background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}:host([data-sui-checked]:not([data-sui-disabled])){border-color:var(--sui-primary-base);box-shadow:none}:host([data-sui-disabled]){cursor:not-allowed;box-shadow:none}:host(:focus-visible){box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-base)}.sui-switch-card__leading{flex-shrink:0;display:flex;align-items:center;justify-content:center}.sui-switch-card__leading-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;padding:10px;border-radius:999px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-shadow-x-small);box-sizing:border-box}.sui-switch-card__leading-emoji{width:20px;height:20px}:host([data-sui-disabled]) .sui-switch-card__leading-icon{box-shadow:none;opacity:.5}:host([data-sui-type=avatar]) .sui-switch-card__leading-avatar{width:40px;height:40px}.sui-switch-card__leading-card-provider{width:32px;height:24px;border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center}.sui-switch-card__leading-brand{width:40px;height:40px;overflow:hidden;display:flex;align-items:center;justify-content:center}.sui-switch-card__leading-company{width:40px;height:40px;border-radius:999px;overflow:hidden;display:flex;align-items:center;justify-content:center}.sui-switch-card__leading-img{width:100%;height:100%;object-fit:contain;display:block}:host([data-sui-disabled]) .sui-switch-card__leading{opacity:.5}.sui-switch-card__body{display:flex;flex-direction:column;gap:4px;flex:1 1 auto;min-width:0;align-self:stretch}.sui-switch-card__body:not(:has(.sui-switch-card__description)){justify-content:center}.sui-switch-card__title{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.sui-switch-card__label{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950)}:host([data-sui-disabled]) .sui-switch-card__label{color:var(--sui-text-sub-600)}.sui-switch-card__sublabel{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600)}:host([data-sui-disabled]) .sui-switch-card__sublabel{color:var(--sui-text-soft-400)}.sui-switch-card__description{margin:0;font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600)}:host([data-sui-disabled]) .sui-switch-card__description{color:var(--sui-text-soft-400)}:host([data-sui-disabled]) .sui-switch-card__badge{background:transparent;border-color:var(--sui-stroke-soft-200);color:var(--sui-text-disabled-300)}.sui-switch-card__switch{flex-shrink:0;align-self:flex-start;margin-top:2px}\n"] }]
|
|
15050
15093
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], emoji: [{ type: i0.Input, args: [{ isSignal: true, alias: "emoji", required: false }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
15051
15094
|
|
|
15052
15095
|
/**
|
|
@@ -15806,6 +15849,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
15806
15849
|
class SuiTabMenuHorizontal {
|
|
15807
15850
|
tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
|
|
15808
15851
|
active = model(...(ngDevMode ? [undefined, { debugName: "active" }] : /* istanbul ignore next */ []));
|
|
15852
|
+
/** PENDING spec: hoy solo emite data-sui-size (sin reglas scss) y el set de
|
|
15853
|
+
Figma no tiene eje size. Se conserva por compat de consumers. */
|
|
15809
15854
|
size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
15810
15855
|
tabChange = output();
|
|
15811
15856
|
isActive(tab) {
|
|
@@ -16390,7 +16435,7 @@ class SuiTagInput {
|
|
|
16390
16435
|
useExisting: forwardRef(() => SuiTagInput),
|
|
16391
16436
|
multi: true,
|
|
16392
16437
|
},
|
|
16393
|
-
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "<!-- Label (Figma \"Label [1.1]\" arriba del field) \u2014 delegado a sui-form-label. -->\n@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"size()\"\n class=\"sui-tag-input__label-host\"\n />\n}\n\n<!-- Input box \"Basic\" \u2014 texto libre. Click en cualquier zona enfoca el input. -->\n<div\n class=\"sui-tag-input__field\"\n [class.sui-tag-input__field--error]=\"error()\"\n [class.sui-tag-input__field--disabled]=\"isDisabled()\"\n (mousedown)=\"onFieldPointerDown($event)\"\n>\n <input\n #inputEl\n class=\"sui-tag-input__control\"\n type=\"text\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [value]=\"draft()\"\n autocomplete=\"off\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n (blur)=\"onBlur()\"\n />\n\n <!-- Trailing icon (Figma rightIcon / pickRight, node 428:4819) \u2014 20\u00D720 info-custom-fill\n (rightIcon=true), un icono custom (rightIcon=\"nombre\"), o el contenido que\n proyecte el consumer en [slot=right]. -->\n @if (rightIconCfg(); as rightIconName) {\n <span class=\"sui-tag-input__right\">\n <ng-content select=\"[slot=right]\">\n <sui-icon [name]=\"rightIconName\" [size]=\"20\" />\n </ng-content>\n </span>\n }\n</div>\n\n<!-- Tags row (Figma frame \"Tags\") \u2014 fila aparte debajo del input, pt=4 gap=8, wrap. -->\n@if (hasTags()) {\n <div class=\"sui-tag-input__tags\" role=\"list\">\n @for (tag of value(); track $index) {\n <sui-tag\n role=\"listitem\"\n tagStyle=\"stroke\"\n [dismissible]=\"true\"\n [disabled]=\"isDisabled()\"\n [dismissLabel]=\"'Quitar ' + tag\"\n (dismiss)=\"removeAt($index)\"\n >\n {{ tag }}\n </sui-tag>\n }\n </div>\n}\n\n<!-- Hint / error message \u2014 delegado a sui-form-hint.\n El hint neutral muestra el icono 16\u00D716 `information-fill` (Figma node\n I428:4900;266:5272); el error conserva su icono default (error-warning-line). -->\n@if (error() ? errorMessage() : hint()) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n [icon]=\"error() ? undefined : 'information-fill'\"\n class=\"sui-tag-input__hint-host\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-tag-input__label-host{display:block;margin-bottom:4px}.sui-tag-input__field{display:flex;align-items:center;width:100%;box-sizing:border-box;overflow:hidden;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);cursor:text;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-tag-input__field{gap:6px;padding:
|
|
16438
|
+
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "<!-- Label (Figma \"Label [1.1]\" arriba del field) \u2014 delegado a sui-form-label. -->\n@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"size()\"\n class=\"sui-tag-input__label-host\"\n />\n}\n\n<!-- Input box \"Basic\" \u2014 texto libre. Click en cualquier zona enfoca el input. -->\n<div\n class=\"sui-tag-input__field\"\n [class.sui-tag-input__field--error]=\"error()\"\n [class.sui-tag-input__field--disabled]=\"isDisabled()\"\n (mousedown)=\"onFieldPointerDown($event)\"\n>\n <input\n #inputEl\n class=\"sui-tag-input__control\"\n type=\"text\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [value]=\"draft()\"\n autocomplete=\"off\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n (blur)=\"onBlur()\"\n />\n\n <!-- Trailing icon (Figma rightIcon / pickRight, node 428:4819) \u2014 20\u00D720 info-custom-fill\n (rightIcon=true), un icono custom (rightIcon=\"nombre\"), o el contenido que\n proyecte el consumer en [slot=right]. -->\n @if (rightIconCfg(); as rightIconName) {\n <span class=\"sui-tag-input__right\">\n <ng-content select=\"[slot=right]\">\n <sui-icon [name]=\"rightIconName\" [size]=\"20\" />\n </ng-content>\n </span>\n }\n</div>\n\n<!-- Tags row (Figma frame \"Tags\") \u2014 fila aparte debajo del input, pt=4 gap=8, wrap. -->\n@if (hasTags()) {\n <div class=\"sui-tag-input__tags\" role=\"list\">\n @for (tag of value(); track $index) {\n <sui-tag\n role=\"listitem\"\n tagStyle=\"stroke\"\n [dismissible]=\"true\"\n [disabled]=\"isDisabled()\"\n [dismissLabel]=\"'Quitar ' + tag\"\n (dismiss)=\"removeAt($index)\"\n >\n {{ tag }}\n </sui-tag>\n }\n </div>\n}\n\n<!-- Hint / error message \u2014 delegado a sui-form-hint.\n El hint neutral muestra el icono 16\u00D716 `information-fill` (Figma node\n I428:4900;266:5272); el error conserva su icono default (error-warning-line). -->\n@if (error() ? errorMessage() : hint()) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n [icon]=\"error() ? undefined : 'information-fill'\"\n class=\"sui-tag-input__hint-host\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-tag-input__label-host{display:block;margin-bottom:4px}.sui-tag-input__field{display:flex;align-items:center;width:100%;box-sizing:border-box;overflow:hidden;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);cursor:text;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-tag-input__field{gap:6px;padding:5px 6px 5px 10px;border-radius:var(--sui-radius-8);min-height:32px}:host([data-sui-size=small]) .sui-tag-input__field{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8);min-height:36px}:host([data-sui-size=medium]) .sui-tag-input__field,:host(:not([data-sui-size])) .sui-tag-input__field{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10);min-height:40px}.sui-tag-input__control{flex:1 0 0;min-width:0;width:100%;margin:0;padding:0;border:0;outline:0;background:transparent;color:var(--sui-text-strong-950);font-family:inherit;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-tag-input__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-tag-input__right{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-soft-400);pointer-events:none}:host([data-sui-disabled]) .sui-tag-input__right{color:var(--sui-icon-disabled-300)}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:hover .sui-tag-input__control::placeholder{color:var(--sui-text-sub-600)}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:focus-within{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-error]) .sui-tag-input__field,.sui-tag-input__field--error{border-color:var(--sui-state-error-base)}:host([data-sui-error]) .sui-tag-input__field:focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-16)}:host([data-sui-disabled]) .sui-tag-input__field,.sui-tag-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed}:host([data-sui-disabled]) .sui-tag-input__control{color:var(--sui-text-disabled-300);cursor:not-allowed}:host([data-sui-disabled]) .sui-tag-input__control::placeholder{color:var(--sui-text-disabled-300)}.sui-tag-input__tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:4px;width:100%}.sui-tag-input__hint-host{display:block;margin-top:4px}\n"], dependencies: [{ kind: "component", type: SuiTag, selector: "sui-tag", inputs: ["tagStyle", "leading", "sublabel", "dismissible", "interactive", "disabled", "dismissLabel"], outputs: ["dismiss"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiFormLabel, selector: "sui-form-label", inputs: ["label", "sublabel", "required", "tooltip", "link", "size", "disabled", "for"], outputs: ["linkClick"] }, { kind: "component", type: SuiFormHint, selector: "sui-form-hint", inputs: ["message", "variant", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
16394
16439
|
}
|
|
16395
16440
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTagInput, decorators: [{
|
|
16396
16441
|
type: Component,
|
|
@@ -16406,7 +16451,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
16406
16451
|
'[attr.data-sui-size]': 'size()',
|
|
16407
16452
|
'[attr.data-sui-error]': 'error() ? "" : null',
|
|
16408
16453
|
'[attr.data-sui-disabled]': 'isDisabled() ? "" : null',
|
|
16409
|
-
}, template: "<!-- Label (Figma \"Label [1.1]\" arriba del field) \u2014 delegado a sui-form-label. -->\n@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"size()\"\n class=\"sui-tag-input__label-host\"\n />\n}\n\n<!-- Input box \"Basic\" \u2014 texto libre. Click en cualquier zona enfoca el input. -->\n<div\n class=\"sui-tag-input__field\"\n [class.sui-tag-input__field--error]=\"error()\"\n [class.sui-tag-input__field--disabled]=\"isDisabled()\"\n (mousedown)=\"onFieldPointerDown($event)\"\n>\n <input\n #inputEl\n class=\"sui-tag-input__control\"\n type=\"text\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [value]=\"draft()\"\n autocomplete=\"off\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n (blur)=\"onBlur()\"\n />\n\n <!-- Trailing icon (Figma rightIcon / pickRight, node 428:4819) \u2014 20\u00D720 info-custom-fill\n (rightIcon=true), un icono custom (rightIcon=\"nombre\"), o el contenido que\n proyecte el consumer en [slot=right]. -->\n @if (rightIconCfg(); as rightIconName) {\n <span class=\"sui-tag-input__right\">\n <ng-content select=\"[slot=right]\">\n <sui-icon [name]=\"rightIconName\" [size]=\"20\" />\n </ng-content>\n </span>\n }\n</div>\n\n<!-- Tags row (Figma frame \"Tags\") \u2014 fila aparte debajo del input, pt=4 gap=8, wrap. -->\n@if (hasTags()) {\n <div class=\"sui-tag-input__tags\" role=\"list\">\n @for (tag of value(); track $index) {\n <sui-tag\n role=\"listitem\"\n tagStyle=\"stroke\"\n [dismissible]=\"true\"\n [disabled]=\"isDisabled()\"\n [dismissLabel]=\"'Quitar ' + tag\"\n (dismiss)=\"removeAt($index)\"\n >\n {{ tag }}\n </sui-tag>\n }\n </div>\n}\n\n<!-- Hint / error message \u2014 delegado a sui-form-hint.\n El hint neutral muestra el icono 16\u00D716 `information-fill` (Figma node\n I428:4900;266:5272); el error conserva su icono default (error-warning-line). -->\n@if (error() ? errorMessage() : hint()) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n [icon]=\"error() ? undefined : 'information-fill'\"\n class=\"sui-tag-input__hint-host\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-tag-input__label-host{display:block;margin-bottom:4px}.sui-tag-input__field{display:flex;align-items:center;width:100%;box-sizing:border-box;overflow:hidden;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);cursor:text;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-tag-input__field{gap:6px;padding:
|
|
16454
|
+
}, template: "<!-- Label (Figma \"Label [1.1]\" arriba del field) \u2014 delegado a sui-form-label. -->\n@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"size()\"\n class=\"sui-tag-input__label-host\"\n />\n}\n\n<!-- Input box \"Basic\" \u2014 texto libre. Click en cualquier zona enfoca el input. -->\n<div\n class=\"sui-tag-input__field\"\n [class.sui-tag-input__field--error]=\"error()\"\n [class.sui-tag-input__field--disabled]=\"isDisabled()\"\n (mousedown)=\"onFieldPointerDown($event)\"\n>\n <input\n #inputEl\n class=\"sui-tag-input__control\"\n type=\"text\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [value]=\"draft()\"\n autocomplete=\"off\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n (blur)=\"onBlur()\"\n />\n\n <!-- Trailing icon (Figma rightIcon / pickRight, node 428:4819) \u2014 20\u00D720 info-custom-fill\n (rightIcon=true), un icono custom (rightIcon=\"nombre\"), o el contenido que\n proyecte el consumer en [slot=right]. -->\n @if (rightIconCfg(); as rightIconName) {\n <span class=\"sui-tag-input__right\">\n <ng-content select=\"[slot=right]\">\n <sui-icon [name]=\"rightIconName\" [size]=\"20\" />\n </ng-content>\n </span>\n }\n</div>\n\n<!-- Tags row (Figma frame \"Tags\") \u2014 fila aparte debajo del input, pt=4 gap=8, wrap. -->\n@if (hasTags()) {\n <div class=\"sui-tag-input__tags\" role=\"list\">\n @for (tag of value(); track $index) {\n <sui-tag\n role=\"listitem\"\n tagStyle=\"stroke\"\n [dismissible]=\"true\"\n [disabled]=\"isDisabled()\"\n [dismissLabel]=\"'Quitar ' + tag\"\n (dismiss)=\"removeAt($index)\"\n >\n {{ tag }}\n </sui-tag>\n }\n </div>\n}\n\n<!-- Hint / error message \u2014 delegado a sui-form-hint.\n El hint neutral muestra el icono 16\u00D716 `information-fill` (Figma node\n I428:4900;266:5272); el error conserva su icono default (error-warning-line). -->\n@if (error() ? errorMessage() : hint()) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n [icon]=\"error() ? undefined : 'information-fill'\"\n class=\"sui-tag-input__hint-host\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-tag-input__label-host{display:block;margin-bottom:4px}.sui-tag-input__field{display:flex;align-items:center;width:100%;box-sizing:border-box;overflow:hidden;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);cursor:text;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-tag-input__field{gap:6px;padding:5px 6px 5px 10px;border-radius:var(--sui-radius-8);min-height:32px}:host([data-sui-size=small]) .sui-tag-input__field{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8);min-height:36px}:host([data-sui-size=medium]) .sui-tag-input__field,:host(:not([data-sui-size])) .sui-tag-input__field{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10);min-height:40px}.sui-tag-input__control{flex:1 0 0;min-width:0;width:100%;margin:0;padding:0;border:0;outline:0;background:transparent;color:var(--sui-text-strong-950);font-family:inherit;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-tag-input__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-tag-input__right{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-soft-400);pointer-events:none}:host([data-sui-disabled]) .sui-tag-input__right{color:var(--sui-icon-disabled-300)}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:hover .sui-tag-input__control::placeholder{color:var(--sui-text-sub-600)}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:focus-within{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-error]) .sui-tag-input__field,.sui-tag-input__field--error{border-color:var(--sui-state-error-base)}:host([data-sui-error]) .sui-tag-input__field:focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-16)}:host([data-sui-disabled]) .sui-tag-input__field,.sui-tag-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed}:host([data-sui-disabled]) .sui-tag-input__control{color:var(--sui-text-disabled-300);cursor:not-allowed}:host([data-sui-disabled]) .sui-tag-input__control::placeholder{color:var(--sui-text-disabled-300)}.sui-tag-input__tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:4px;width:100%}.sui-tag-input__hint-host{display:block;margin-top:4px}\n"] }]
|
|
16410
16455
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], rightIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightIcon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], commaSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "commaSeparator", required: false }] }], allowDuplicates: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicates", required: false }] }], maxTags: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTags", required: false }] }], addOnBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "addOnBlur", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], tagAdded: [{ type: i0.Output, args: ["tagAdded"] }], tagRemoved: [{ type: i0.Output, args: ["tagRemoved"] }], inputEl: [{
|
|
16411
16456
|
type: ViewChild,
|
|
16412
16457
|
args: ['inputEl']
|
|
@@ -17048,6 +17093,11 @@ class SuiTimePicker {
|
|
|
17048
17093
|
triggerEl = viewChild('triggerEl', ...(ngDevMode ? [{ debugName: "triggerEl" }] : /* istanbul ignore next */ []));
|
|
17049
17094
|
/** Ref al sui-dropdown-menu interno — para invocar open/close (modo popover). */
|
|
17050
17095
|
_menu = viewChild(SuiDropdownMenu, ...(ngDevMode ? [{ debugName: "_menu" }] : /* istanbul ignore next */ []));
|
|
17096
|
+
/** Columnas scrollables del panel (hora / minuto / periodo) — la query
|
|
17097
|
+
alcanza también la embedded view proyectada al CDK Overlay porque el
|
|
17098
|
+
ng-template se declara en este componente. */
|
|
17099
|
+
_columnEls = viewChildren('columnEl', ...(ngDevMode ? [{ debugName: "_columnEls" }] : /* istanbul ignore next */ []));
|
|
17100
|
+
_injector = inject(Injector);
|
|
17051
17101
|
// ── Form callbacks ─────────────────────────────────────────────────
|
|
17052
17102
|
_onChange = () => { };
|
|
17053
17103
|
_onTouched = () => { };
|
|
@@ -17060,6 +17110,12 @@ class SuiTimePicker {
|
|
|
17060
17110
|
if (!this.open())
|
|
17061
17111
|
this.staged.set(v);
|
|
17062
17112
|
});
|
|
17113
|
+
// Inline: al primer render, scrollear las columnas a la opción seleccionada
|
|
17114
|
+
// (sin animación — el panel debe "aparecer" ya posicionado, block center).
|
|
17115
|
+
afterNextRender(() => {
|
|
17116
|
+
if (this.inline())
|
|
17117
|
+
this._scrollColumnsToSelection();
|
|
17118
|
+
});
|
|
17063
17119
|
}
|
|
17064
17120
|
// ── Listas de columnas ─────────────────────────────────────────────
|
|
17065
17121
|
hourItems = computed(() => buildHourList(this.format()).map(h => ({ raw: h, label: pad2(h) })), ...(ngDevMode ? [{ debugName: "hourItems" }] : /* istanbul ignore next */ []));
|
|
@@ -17118,6 +17174,45 @@ class SuiTimePicker {
|
|
|
17118
17174
|
para que inline-less popover y tests reflejen el estado de inmediato. */
|
|
17119
17175
|
this.open.set(true);
|
|
17120
17176
|
this._menu()?.open();
|
|
17177
|
+
/* El panel del overlay monta en el próximo render — recién ahí existen las
|
|
17178
|
+
columnas para scrollear a la selección (sin animación al abrir). */
|
|
17179
|
+
afterNextRender(() => this._scrollColumnsToSelection(), { injector: this._injector });
|
|
17180
|
+
}
|
|
17181
|
+
/**
|
|
17182
|
+
* Scrollea cada columna (hora / minuto / periodo) para que su opción activa
|
|
17183
|
+
* quede centrada en el viewport de la columna (equivalente a block: 'center').
|
|
17184
|
+
* Instantáneo (sin behavior smooth): al abrir, el panel aparece ya
|
|
17185
|
+
* posicionado. Con step que no contiene el minuto exacto (-1) la columna se
|
|
17186
|
+
* deja en su scroll actual.
|
|
17187
|
+
*/
|
|
17188
|
+
_scrollColumnsToSelection() {
|
|
17189
|
+
const cols = this._columnEls();
|
|
17190
|
+
if (!cols.length || !this.staged())
|
|
17191
|
+
return;
|
|
17192
|
+
const activeIndices = [
|
|
17193
|
+
this.hourItems().findIndex(i => this.isHourActive(i)),
|
|
17194
|
+
this.minuteItems().findIndex(i => this.isMinuteActive(i)),
|
|
17195
|
+
];
|
|
17196
|
+
if (this.showPeriod()) {
|
|
17197
|
+
activeIndices.push(this.periods.findIndex(p => this.isPeriodActive(p)));
|
|
17198
|
+
}
|
|
17199
|
+
cols.forEach((colRef, c) => {
|
|
17200
|
+
const idx = activeIndices[c];
|
|
17201
|
+
if (idx === undefined || idx < 0)
|
|
17202
|
+
return;
|
|
17203
|
+
const col = colRef.nativeElement;
|
|
17204
|
+
const item = col.children.item(idx);
|
|
17205
|
+
if (!item)
|
|
17206
|
+
return;
|
|
17207
|
+
// offset del item relativo al scroll container (robusto sin offsetParent).
|
|
17208
|
+
const delta = item.getBoundingClientRect().top - col.getBoundingClientRect().top;
|
|
17209
|
+
const top = col.scrollTop + delta - (col.clientHeight - item.offsetHeight) / 2;
|
|
17210
|
+
// scrollTo puede no existir en el DOM de tests (jsdom) — fallback directo.
|
|
17211
|
+
if (typeof col.scrollTo === 'function')
|
|
17212
|
+
col.scrollTo({ top });
|
|
17213
|
+
else
|
|
17214
|
+
col.scrollTop = top;
|
|
17215
|
+
});
|
|
17121
17216
|
}
|
|
17122
17217
|
cancel() {
|
|
17123
17218
|
this.activePresetIndex.set(null);
|
|
@@ -17236,7 +17331,7 @@ class SuiTimePicker {
|
|
|
17236
17331
|
useExisting: forwardRef(() => SuiTimePicker),
|
|
17237
17332
|
multi: true,
|
|
17238
17333
|
},
|
|
17239
|
-
], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "_menu", first: true, predicate: SuiDropdownMenu, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Label (slot superior) \u2014 mismo patr\u00F3n que sui-input/sui-select. -->\n@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"size()\"\n class=\"sui-time-picker__label-host\"\n (click)=\"toggle()\"\n />\n}\n\n<!-- Trigger (input + icono reloj) \u2014 solo si no es inline. -->\n@if (!inline()) {\n <button\n #triggerEl\n type=\"button\"\n class=\"sui-time-picker__trigger\"\n [class.sui-time-picker__trigger--error]=\"error()\"\n [class.sui-time-picker__trigger--open]=\"open()\"\n [class.sui-time-picker__trigger--filled]=\"value() !== null\"\n [disabled]=\"isDisabled()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"open()\"\n (click)=\"toggle()\"\n >\n <sui-icon class=\"sui-time-picker__trigger-icon\" name=\"time-line\" [size]=\"20\" />\n <span\n class=\"sui-time-picker__trigger-text\"\n [class.sui-time-picker__trigger-text--placeholder]=\"!value()\"\n >\n {{ triggerText() }}\n </span>\n <sui-icon class=\"sui-time-picker__trigger-chevron\" name=\"arrow-down-s-line\" [size]=\"20\" />\n </button>\n}\n\n<!-- Hint / error message \u2014 mismo slot que sui-input/sui-select. -->\n@if (!inline() && (error() ? errorMessage() : hint())) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n class=\"sui-time-picker__hint-host\"\n />\n}\n\n<!--\n Panel (popover) \u2014 el contenido vive en un ng-template reutilizado por:\n \u00B7 inline() \u2192 render directo (sin overlay, sin trigger)\n \u00B7 !inline() \u2192 proyectado al sui-dropdown-menu (CDK Overlay con flip\n arriba/abajo, reposici\u00F3n en scroll, backdrop, Escape, disposeOnNavigation).\n As\u00ED el panel NO se corta abajo y abre donde hay m\u00E1s espacio (igual que sui-select).\n-->\n<ng-template #panelTpl>\n <div\n class=\"sui-time-picker__panel\"\n [class.sui-time-picker__panel--inline]=\"inline()\"\n role=\"dialog\"\n [attr.aria-label]=\"label() || placeholder()\"\n >\n <!-- Columnas scrollables: hora / minuto / (periodo en 12h). -->\n <div class=\"sui-time-picker__columns\">\n <!-- Columna HORA -->\n <div\n class=\"sui-time-picker__column\"\n role=\"listbox\"\n aria-label=\"Hora\"\n >\n @for (item of hourItems(); track trackColumn($index, item)) {\n <sui-time-picker-item\n class=\"sui-time-picker__option\"\n [time]=\"hourLabelOf(item)\"\n [active]=\"isHourActive(item)\"\n (clicked)=\"selectHour(item)\"\n />\n }\n </div>\n\n <!-- Columna MINUTO -->\n <div\n class=\"sui-time-picker__column\"\n role=\"listbox\"\n aria-label=\"Minuto\"\n >\n @for (item of minuteItems(); track trackColumn($index, item)) {\n <sui-time-picker-item\n class=\"sui-time-picker__option\"\n [time]=\"item.label\"\n [active]=\"isMinuteActive(item)\"\n (clicked)=\"selectMinute(item)\"\n />\n }\n </div>\n\n <!-- Columna PERIODO (solo 12h) -->\n @if (showPeriod()) {\n <div\n class=\"sui-time-picker__column sui-time-picker__column--period\"\n role=\"listbox\"\n aria-label=\"AM/PM\"\n >\n @for (p of periods; track p) {\n <sui-time-picker-item\n class=\"sui-time-picker__option\"\n [time]=\"p\"\n [active]=\"isPeriodActive(p)\"\n (clicked)=\"selectPeriod(p)\"\n />\n }\n </div>\n }\n </div>\n\n <!-- Presets de duraci\u00F3n (pills) \u2014 Figma TimePickerSelectDuration. -->\n @if (durationPresets().length) {\n <div class=\"sui-time-picker__presets\" role=\"group\" aria-label=\"Duraci\u00F3n r\u00E1pida\">\n @for (p of durationPresets(); track trackPreset($index, p)) {\n <sui-time-picker-duration\n [label]=\"p.label\"\n [active]=\"isPresetActive($index)\"\n (clicked)=\"selectPreset(p, $index)\"\n />\n }\n </div>\n }\n\n <!-- Footer Cancel/Apply. -->\n @if (showFooter()) {\n <footer class=\"sui-time-picker__footer\">\n <sui-button\n variant=\"stroke\"\n color=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"cancel()\"\n >\n Cancelar\n </sui-button>\n <sui-button\n variant=\"filled\"\n color=\"primary\"\n size=\"small\"\n type=\"button\"\n (click)=\"apply()\"\n >\n Aplicar\n </sui-button>\n </footer>\n }\n </div>\n</ng-template>\n\n<!-- Inline mode \u2014 render directo del panel (sin overlay ni trigger). -->\n@if (inline()) {\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n}\n\n<!--\n Popover mode \u2014 el panel flota v\u00EDa sui-dropdown-menu anclado al trigger\n (igual que sui-select). Hereda flip arriba/abajo, reposici\u00F3n en scroll,\n backdrop transparent (outside-click), Escape y disposeOnNavigation.\n El componente abre/cierra el menu desde openPopover()/cancel()/apply();\n (openedChange) re-sincroniza open() en los closes del overlay.\n-->\n@if (!inline()) {\n <sui-dropdown-menu\n [origin]=\"triggerEl() ?? null\"\n [disabled]=\"isDisabled()\"\n [matchWidth]=\"false\"\n [minWidth]=\"240\"\n panelClass=\"sui-time-picker__overlay-pane\"\n (openedChange)=\"onMenuOpenedChange($event)\"\n >\n <ng-template suiDropdownPanel>\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n </ng-template>\n </sui-dropdown-menu>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;font-family:var(--sui-font-sans, var(--font-sans, sans-serif))}.sui-time-picker__trigger{display:inline-flex;align-items:center;gap:8px;width:100%;min-width:180px;height:40px;padding:0 12px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-10, 10px);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));cursor:pointer;outline:none;font:inherit;color:var(--sui-text-strong-950, #171717);transition:border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)),box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1))}.sui-time-picker__trigger:hover:not(:disabled){border-color:var(--sui-stroke-sub-300, #d1d1d1)}.sui-time-picker__trigger:focus-visible:not(:disabled){border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px color-mix(in oklab,var(--sui-stroke-strong-950, #171717) 16%,transparent)}.sui-time-picker__trigger--error{border-color:var(--sui-state-error-base, #fb3748)}.sui-time-picker__trigger--open{border-color:var(--sui-stroke-strong-950, #171717)}.sui-time-picker__trigger:disabled{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;border:none}:host([data-sui-size=small]) .sui-time-picker__trigger{height:36px;border-radius:var(--sui-radius-8, 8px)}.sui-time-picker__trigger-icon,.sui-time-picker__trigger-chevron{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-time-picker__trigger-text{flex:1 1 auto;text-align:left;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.084px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-time-picker__trigger-text--placeholder{color:var(--sui-text-soft-400, #a3a3a3);font-weight:400}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiButton, selector: "sui-button", inputs: ["variant", "color", "size", "onlyIcon", "disabled", "leftIcon", "rightIcon", "type"] }, { kind: "component", type: SuiFormLabel, selector: "sui-form-label", inputs: ["label", "sublabel", "required", "tooltip", "link", "size", "disabled", "for"], outputs: ["linkClick"] }, { kind: "component", type: SuiFormHint, selector: "sui-form-hint", inputs: ["message", "variant", "icon"] }, { kind: "component", type: SuiDropdownMenu, selector: "sui-dropdown-menu", inputs: ["matchWidth", "flexibleDimensions", "push", "minWidth", "position", "viewportMargin", "panelClass", "disabled", "popupRole", "origin"], outputs: ["openedChange"], exportAs: ["suiDropdownMenu"] }, { kind: "directive", type: SuiDropdownPanel, selector: "ng-template[suiDropdownPanel]" }, { kind: "component", type: SuiTimePickerItem, selector: "sui-time-picker-item", inputs: ["time", "meridiem", "rightTime", "rightMeridiem", "direction", "active", "highlighted", "disabled"], outputs: ["clicked"] }, { kind: "component", type: SuiTimePickerDuration, selector: "sui-time-picker-duration", inputs: ["label", "active", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
17334
|
+
], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "_menu", first: true, predicate: SuiDropdownMenu, descendants: true, isSignal: true }, { propertyName: "_columnEls", predicate: ["columnEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Label (slot superior) \u2014 mismo patr\u00F3n que sui-input/sui-select. -->\n@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"size()\"\n class=\"sui-time-picker__label-host\"\n (click)=\"toggle()\"\n />\n}\n\n<!-- Trigger (input + icono reloj) \u2014 solo si no es inline. -->\n@if (!inline()) {\n <button\n #triggerEl\n type=\"button\"\n class=\"sui-time-picker__trigger\"\n [class.sui-time-picker__trigger--error]=\"error()\"\n [class.sui-time-picker__trigger--open]=\"open()\"\n [class.sui-time-picker__trigger--filled]=\"value() !== null\"\n [disabled]=\"isDisabled()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"open()\"\n (click)=\"toggle()\"\n >\n <sui-icon class=\"sui-time-picker__trigger-icon\" name=\"time-line\" [size]=\"20\" />\n <span\n class=\"sui-time-picker__trigger-text\"\n [class.sui-time-picker__trigger-text--placeholder]=\"!value()\"\n >\n {{ triggerText() }}\n </span>\n <sui-icon class=\"sui-time-picker__trigger-chevron\" name=\"arrow-down-s-line\" [size]=\"20\" />\n </button>\n}\n\n<!-- Hint / error message \u2014 mismo slot que sui-input/sui-select. -->\n@if (!inline() && (error() ? errorMessage() : hint())) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n class=\"sui-time-picker__hint-host\"\n />\n}\n\n<!--\n Panel (popover) \u2014 el contenido vive en un ng-template reutilizado por:\n \u00B7 inline() \u2192 render directo (sin overlay, sin trigger)\n \u00B7 !inline() \u2192 proyectado al sui-dropdown-menu (CDK Overlay con flip\n arriba/abajo, reposici\u00F3n en scroll, backdrop, Escape, disposeOnNavigation).\n As\u00ED el panel NO se corta abajo y abre donde hay m\u00E1s espacio (igual que sui-select).\n-->\n<ng-template #panelTpl>\n <div\n class=\"sui-time-picker__panel\"\n [class.sui-time-picker__panel--inline]=\"inline()\"\n role=\"dialog\"\n [attr.aria-label]=\"label() || placeholder()\"\n >\n <!-- Columnas scrollables: hora / minuto / (periodo en 12h). -->\n <div class=\"sui-time-picker__columns\">\n <!-- Columna HORA -->\n <div\n #columnEl\n class=\"sui-time-picker__column\"\n role=\"listbox\"\n aria-label=\"Hora\"\n >\n @for (item of hourItems(); track trackColumn($index, item)) {\n <sui-time-picker-item\n class=\"sui-time-picker__option\"\n [time]=\"hourLabelOf(item)\"\n [active]=\"isHourActive(item)\"\n (clicked)=\"selectHour(item)\"\n />\n }\n </div>\n\n <!-- Columna MINUTO -->\n <div\n #columnEl\n class=\"sui-time-picker__column\"\n role=\"listbox\"\n aria-label=\"Minuto\"\n >\n @for (item of minuteItems(); track trackColumn($index, item)) {\n <sui-time-picker-item\n class=\"sui-time-picker__option\"\n [time]=\"item.label\"\n [active]=\"isMinuteActive(item)\"\n (clicked)=\"selectMinute(item)\"\n />\n }\n </div>\n\n <!-- Columna PERIODO (solo 12h) -->\n @if (showPeriod()) {\n <div\n #columnEl\n class=\"sui-time-picker__column sui-time-picker__column--period\"\n role=\"listbox\"\n aria-label=\"AM/PM\"\n >\n @for (p of periods; track p) {\n <sui-time-picker-item\n class=\"sui-time-picker__option\"\n [time]=\"p\"\n [active]=\"isPeriodActive(p)\"\n (clicked)=\"selectPeriod(p)\"\n />\n }\n </div>\n }\n </div>\n\n <!-- Presets de duraci\u00F3n (pills) \u2014 Figma TimePickerSelectDuration. -->\n @if (durationPresets().length) {\n <div class=\"sui-time-picker__presets\" role=\"group\" aria-label=\"Duraci\u00F3n r\u00E1pida\">\n @for (p of durationPresets(); track trackPreset($index, p)) {\n <sui-time-picker-duration\n [label]=\"p.label\"\n [active]=\"isPresetActive($index)\"\n (clicked)=\"selectPreset(p, $index)\"\n />\n }\n </div>\n }\n\n <!-- Footer Cancel/Apply. -->\n @if (showFooter()) {\n <footer class=\"sui-time-picker__footer\">\n <sui-button\n variant=\"stroke\"\n color=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"cancel()\"\n >\n Cancelar\n </sui-button>\n <sui-button\n variant=\"filled\"\n color=\"primary\"\n size=\"small\"\n type=\"button\"\n (click)=\"apply()\"\n >\n Aplicar\n </sui-button>\n </footer>\n }\n </div>\n</ng-template>\n\n<!-- Inline mode \u2014 render directo del panel (sin overlay ni trigger). -->\n@if (inline()) {\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n}\n\n<!--\n Popover mode \u2014 el panel flota v\u00EDa sui-dropdown-menu anclado al trigger\n (igual que sui-select). Hereda flip arriba/abajo, reposici\u00F3n en scroll,\n backdrop transparent (outside-click), Escape y disposeOnNavigation.\n El componente abre/cierra el menu desde openPopover()/cancel()/apply();\n (openedChange) re-sincroniza open() en los closes del overlay.\n-->\n@if (!inline()) {\n <sui-dropdown-menu\n [origin]=\"triggerEl() ?? null\"\n [disabled]=\"isDisabled()\"\n [matchWidth]=\"false\"\n [minWidth]=\"240\"\n panelClass=\"sui-time-picker__overlay-pane\"\n (openedChange)=\"onMenuOpenedChange($event)\"\n >\n <ng-template suiDropdownPanel>\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n </ng-template>\n </sui-dropdown-menu>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;font-family:var(--sui-font-sans, var(--font-sans, sans-serif))}.sui-time-picker__trigger{display:inline-flex;align-items:center;gap:8px;width:100%;min-width:180px;height:40px;padding:0 12px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-10, 10px);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));cursor:pointer;outline:none;font:inherit;color:var(--sui-text-strong-950, #171717);transition:border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)),box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1))}.sui-time-picker__trigger:hover:not(:disabled){border-color:var(--sui-stroke-sub-300, #d1d1d1)}.sui-time-picker__trigger:focus-visible:not(:disabled){border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px color-mix(in oklab,var(--sui-stroke-strong-950, #171717) 16%,transparent)}.sui-time-picker__trigger--error{border-color:var(--sui-state-error-base, #fb3748)}.sui-time-picker__trigger--open{border-color:var(--sui-stroke-strong-950, #171717)}.sui-time-picker__trigger:disabled{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;border:none}:host([data-sui-size=small]) .sui-time-picker__trigger{height:36px;border-radius:var(--sui-radius-8, 8px)}.sui-time-picker__trigger-icon,.sui-time-picker__trigger-chevron{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-time-picker__trigger-text{flex:1 1 auto;text-align:left;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.084px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-time-picker__trigger-text--placeholder{color:var(--sui-text-soft-400, #a3a3a3);font-weight:400}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiButton, selector: "sui-button", inputs: ["variant", "color", "size", "onlyIcon", "disabled", "leftIcon", "rightIcon", "type"] }, { kind: "component", type: SuiFormLabel, selector: "sui-form-label", inputs: ["label", "sublabel", "required", "tooltip", "link", "size", "disabled", "for"], outputs: ["linkClick"] }, { kind: "component", type: SuiFormHint, selector: "sui-form-hint", inputs: ["message", "variant", "icon"] }, { kind: "component", type: SuiDropdownMenu, selector: "sui-dropdown-menu", inputs: ["matchWidth", "flexibleDimensions", "push", "minWidth", "position", "viewportMargin", "panelClass", "disabled", "popupRole", "origin"], outputs: ["openedChange"], exportAs: ["suiDropdownMenu"] }, { kind: "directive", type: SuiDropdownPanel, selector: "ng-template[suiDropdownPanel]" }, { kind: "component", type: SuiTimePickerItem, selector: "sui-time-picker-item", inputs: ["time", "meridiem", "rightTime", "rightMeridiem", "direction", "active", "highlighted", "disabled"], outputs: ["clicked"] }, { kind: "component", type: SuiTimePickerDuration, selector: "sui-time-picker-duration", inputs: ["label", "active", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
17240
17335
|
}
|
|
17241
17336
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTimePicker, decorators: [{
|
|
17242
17337
|
type: Component,
|
|
@@ -17262,8 +17357,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
17262
17357
|
'[attr.data-sui-open]': 'open() ? "" : null',
|
|
17263
17358
|
'[attr.data-sui-format]': 'format()',
|
|
17264
17359
|
'[attr.data-sui-size]': 'size()',
|
|
17265
|
-
}, template: "<!-- Label (slot superior) \u2014 mismo patr\u00F3n que sui-input/sui-select. -->\n@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"size()\"\n class=\"sui-time-picker__label-host\"\n (click)=\"toggle()\"\n />\n}\n\n<!-- Trigger (input + icono reloj) \u2014 solo si no es inline. -->\n@if (!inline()) {\n <button\n #triggerEl\n type=\"button\"\n class=\"sui-time-picker__trigger\"\n [class.sui-time-picker__trigger--error]=\"error()\"\n [class.sui-time-picker__trigger--open]=\"open()\"\n [class.sui-time-picker__trigger--filled]=\"value() !== null\"\n [disabled]=\"isDisabled()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"open()\"\n (click)=\"toggle()\"\n >\n <sui-icon class=\"sui-time-picker__trigger-icon\" name=\"time-line\" [size]=\"20\" />\n <span\n class=\"sui-time-picker__trigger-text\"\n [class.sui-time-picker__trigger-text--placeholder]=\"!value()\"\n >\n {{ triggerText() }}\n </span>\n <sui-icon class=\"sui-time-picker__trigger-chevron\" name=\"arrow-down-s-line\" [size]=\"20\" />\n </button>\n}\n\n<!-- Hint / error message \u2014 mismo slot que sui-input/sui-select. -->\n@if (!inline() && (error() ? errorMessage() : hint())) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n class=\"sui-time-picker__hint-host\"\n />\n}\n\n<!--\n Panel (popover) \u2014 el contenido vive en un ng-template reutilizado por:\n \u00B7 inline() \u2192 render directo (sin overlay, sin trigger)\n \u00B7 !inline() \u2192 proyectado al sui-dropdown-menu (CDK Overlay con flip\n arriba/abajo, reposici\u00F3n en scroll, backdrop, Escape, disposeOnNavigation).\n As\u00ED el panel NO se corta abajo y abre donde hay m\u00E1s espacio (igual que sui-select).\n-->\n<ng-template #panelTpl>\n <div\n class=\"sui-time-picker__panel\"\n [class.sui-time-picker__panel--inline]=\"inline()\"\n role=\"dialog\"\n [attr.aria-label]=\"label() || placeholder()\"\n >\n <!-- Columnas scrollables: hora / minuto / (periodo en 12h). -->\n <div class=\"sui-time-picker__columns\">\n <!-- Columna HORA -->\n <div\n class=\"sui-time-picker__column\"\n role=\"listbox\"\n aria-label=\"Hora\"\n >\n @for (item of hourItems(); track trackColumn($index, item)) {\n <sui-time-picker-item\n class=\"sui-time-picker__option\"\n [time]=\"hourLabelOf(item)\"\n [active]=\"isHourActive(item)\"\n (clicked)=\"selectHour(item)\"\n />\n }\n </div>\n\n <!-- Columna MINUTO -->\n <div\n class=\"sui-time-picker__column\"\n role=\"listbox\"\n aria-label=\"Minuto\"\n >\n @for (item of minuteItems(); track trackColumn($index, item)) {\n <sui-time-picker-item\n class=\"sui-time-picker__option\"\n [time]=\"item.label\"\n [active]=\"isMinuteActive(item)\"\n (clicked)=\"selectMinute(item)\"\n />\n }\n </div>\n\n <!-- Columna PERIODO (solo 12h) -->\n @if (showPeriod()) {\n <div\n class=\"sui-time-picker__column sui-time-picker__column--period\"\n role=\"listbox\"\n aria-label=\"AM/PM\"\n >\n @for (p of periods; track p) {\n <sui-time-picker-item\n class=\"sui-time-picker__option\"\n [time]=\"p\"\n [active]=\"isPeriodActive(p)\"\n (clicked)=\"selectPeriod(p)\"\n />\n }\n </div>\n }\n </div>\n\n <!-- Presets de duraci\u00F3n (pills) \u2014 Figma TimePickerSelectDuration. -->\n @if (durationPresets().length) {\n <div class=\"sui-time-picker__presets\" role=\"group\" aria-label=\"Duraci\u00F3n r\u00E1pida\">\n @for (p of durationPresets(); track trackPreset($index, p)) {\n <sui-time-picker-duration\n [label]=\"p.label\"\n [active]=\"isPresetActive($index)\"\n (clicked)=\"selectPreset(p, $index)\"\n />\n }\n </div>\n }\n\n <!-- Footer Cancel/Apply. -->\n @if (showFooter()) {\n <footer class=\"sui-time-picker__footer\">\n <sui-button\n variant=\"stroke\"\n color=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"cancel()\"\n >\n Cancelar\n </sui-button>\n <sui-button\n variant=\"filled\"\n color=\"primary\"\n size=\"small\"\n type=\"button\"\n (click)=\"apply()\"\n >\n Aplicar\n </sui-button>\n </footer>\n }\n </div>\n</ng-template>\n\n<!-- Inline mode \u2014 render directo del panel (sin overlay ni trigger). -->\n@if (inline()) {\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n}\n\n<!--\n Popover mode \u2014 el panel flota v\u00EDa sui-dropdown-menu anclado al trigger\n (igual que sui-select). Hereda flip arriba/abajo, reposici\u00F3n en scroll,\n backdrop transparent (outside-click), Escape y disposeOnNavigation.\n El componente abre/cierra el menu desde openPopover()/cancel()/apply();\n (openedChange) re-sincroniza open() en los closes del overlay.\n-->\n@if (!inline()) {\n <sui-dropdown-menu\n [origin]=\"triggerEl() ?? null\"\n [disabled]=\"isDisabled()\"\n [matchWidth]=\"false\"\n [minWidth]=\"240\"\n panelClass=\"sui-time-picker__overlay-pane\"\n (openedChange)=\"onMenuOpenedChange($event)\"\n >\n <ng-template suiDropdownPanel>\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n </ng-template>\n </sui-dropdown-menu>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;font-family:var(--sui-font-sans, var(--font-sans, sans-serif))}.sui-time-picker__trigger{display:inline-flex;align-items:center;gap:8px;width:100%;min-width:180px;height:40px;padding:0 12px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-10, 10px);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));cursor:pointer;outline:none;font:inherit;color:var(--sui-text-strong-950, #171717);transition:border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)),box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1))}.sui-time-picker__trigger:hover:not(:disabled){border-color:var(--sui-stroke-sub-300, #d1d1d1)}.sui-time-picker__trigger:focus-visible:not(:disabled){border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px color-mix(in oklab,var(--sui-stroke-strong-950, #171717) 16%,transparent)}.sui-time-picker__trigger--error{border-color:var(--sui-state-error-base, #fb3748)}.sui-time-picker__trigger--open{border-color:var(--sui-stroke-strong-950, #171717)}.sui-time-picker__trigger:disabled{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;border:none}:host([data-sui-size=small]) .sui-time-picker__trigger{height:36px;border-radius:var(--sui-radius-8, 8px)}.sui-time-picker__trigger-icon,.sui-time-picker__trigger-chevron{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-time-picker__trigger-text{flex:1 1 auto;text-align:left;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.084px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-time-picker__trigger-text--placeholder{color:var(--sui-text-soft-400, #a3a3a3);font-weight:400}\n"] }]
|
|
17266
|
-
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], durationPresets: [{ type: i0.Input, args: [{ isSignal: true, alias: "durationPresets", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], _menu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SuiDropdownMenu), { isSignal: true }] }] } });
|
|
17360
|
+
}, template: "<!-- Label (slot superior) \u2014 mismo patr\u00F3n que sui-input/sui-select. -->\n@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"size()\"\n class=\"sui-time-picker__label-host\"\n (click)=\"toggle()\"\n />\n}\n\n<!-- Trigger (input + icono reloj) \u2014 solo si no es inline. -->\n@if (!inline()) {\n <button\n #triggerEl\n type=\"button\"\n class=\"sui-time-picker__trigger\"\n [class.sui-time-picker__trigger--error]=\"error()\"\n [class.sui-time-picker__trigger--open]=\"open()\"\n [class.sui-time-picker__trigger--filled]=\"value() !== null\"\n [disabled]=\"isDisabled()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"open()\"\n (click)=\"toggle()\"\n >\n <sui-icon class=\"sui-time-picker__trigger-icon\" name=\"time-line\" [size]=\"20\" />\n <span\n class=\"sui-time-picker__trigger-text\"\n [class.sui-time-picker__trigger-text--placeholder]=\"!value()\"\n >\n {{ triggerText() }}\n </span>\n <sui-icon class=\"sui-time-picker__trigger-chevron\" name=\"arrow-down-s-line\" [size]=\"20\" />\n </button>\n}\n\n<!-- Hint / error message \u2014 mismo slot que sui-input/sui-select. -->\n@if (!inline() && (error() ? errorMessage() : hint())) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n class=\"sui-time-picker__hint-host\"\n />\n}\n\n<!--\n Panel (popover) \u2014 el contenido vive en un ng-template reutilizado por:\n \u00B7 inline() \u2192 render directo (sin overlay, sin trigger)\n \u00B7 !inline() \u2192 proyectado al sui-dropdown-menu (CDK Overlay con flip\n arriba/abajo, reposici\u00F3n en scroll, backdrop, Escape, disposeOnNavigation).\n As\u00ED el panel NO se corta abajo y abre donde hay m\u00E1s espacio (igual que sui-select).\n-->\n<ng-template #panelTpl>\n <div\n class=\"sui-time-picker__panel\"\n [class.sui-time-picker__panel--inline]=\"inline()\"\n role=\"dialog\"\n [attr.aria-label]=\"label() || placeholder()\"\n >\n <!-- Columnas scrollables: hora / minuto / (periodo en 12h). -->\n <div class=\"sui-time-picker__columns\">\n <!-- Columna HORA -->\n <div\n #columnEl\n class=\"sui-time-picker__column\"\n role=\"listbox\"\n aria-label=\"Hora\"\n >\n @for (item of hourItems(); track trackColumn($index, item)) {\n <sui-time-picker-item\n class=\"sui-time-picker__option\"\n [time]=\"hourLabelOf(item)\"\n [active]=\"isHourActive(item)\"\n (clicked)=\"selectHour(item)\"\n />\n }\n </div>\n\n <!-- Columna MINUTO -->\n <div\n #columnEl\n class=\"sui-time-picker__column\"\n role=\"listbox\"\n aria-label=\"Minuto\"\n >\n @for (item of minuteItems(); track trackColumn($index, item)) {\n <sui-time-picker-item\n class=\"sui-time-picker__option\"\n [time]=\"item.label\"\n [active]=\"isMinuteActive(item)\"\n (clicked)=\"selectMinute(item)\"\n />\n }\n </div>\n\n <!-- Columna PERIODO (solo 12h) -->\n @if (showPeriod()) {\n <div\n #columnEl\n class=\"sui-time-picker__column sui-time-picker__column--period\"\n role=\"listbox\"\n aria-label=\"AM/PM\"\n >\n @for (p of periods; track p) {\n <sui-time-picker-item\n class=\"sui-time-picker__option\"\n [time]=\"p\"\n [active]=\"isPeriodActive(p)\"\n (clicked)=\"selectPeriod(p)\"\n />\n }\n </div>\n }\n </div>\n\n <!-- Presets de duraci\u00F3n (pills) \u2014 Figma TimePickerSelectDuration. -->\n @if (durationPresets().length) {\n <div class=\"sui-time-picker__presets\" role=\"group\" aria-label=\"Duraci\u00F3n r\u00E1pida\">\n @for (p of durationPresets(); track trackPreset($index, p)) {\n <sui-time-picker-duration\n [label]=\"p.label\"\n [active]=\"isPresetActive($index)\"\n (clicked)=\"selectPreset(p, $index)\"\n />\n }\n </div>\n }\n\n <!-- Footer Cancel/Apply. -->\n @if (showFooter()) {\n <footer class=\"sui-time-picker__footer\">\n <sui-button\n variant=\"stroke\"\n color=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"cancel()\"\n >\n Cancelar\n </sui-button>\n <sui-button\n variant=\"filled\"\n color=\"primary\"\n size=\"small\"\n type=\"button\"\n (click)=\"apply()\"\n >\n Aplicar\n </sui-button>\n </footer>\n }\n </div>\n</ng-template>\n\n<!-- Inline mode \u2014 render directo del panel (sin overlay ni trigger). -->\n@if (inline()) {\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n}\n\n<!--\n Popover mode \u2014 el panel flota v\u00EDa sui-dropdown-menu anclado al trigger\n (igual que sui-select). Hereda flip arriba/abajo, reposici\u00F3n en scroll,\n backdrop transparent (outside-click), Escape y disposeOnNavigation.\n El componente abre/cierra el menu desde openPopover()/cancel()/apply();\n (openedChange) re-sincroniza open() en los closes del overlay.\n-->\n@if (!inline()) {\n <sui-dropdown-menu\n [origin]=\"triggerEl() ?? null\"\n [disabled]=\"isDisabled()\"\n [matchWidth]=\"false\"\n [minWidth]=\"240\"\n panelClass=\"sui-time-picker__overlay-pane\"\n (openedChange)=\"onMenuOpenedChange($event)\"\n >\n <ng-template suiDropdownPanel>\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n </ng-template>\n </sui-dropdown-menu>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;font-family:var(--sui-font-sans, var(--font-sans, sans-serif))}.sui-time-picker__trigger{display:inline-flex;align-items:center;gap:8px;width:100%;min-width:180px;height:40px;padding:0 12px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-10, 10px);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));cursor:pointer;outline:none;font:inherit;color:var(--sui-text-strong-950, #171717);transition:border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)),box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1))}.sui-time-picker__trigger:hover:not(:disabled){border-color:var(--sui-stroke-sub-300, #d1d1d1)}.sui-time-picker__trigger:focus-visible:not(:disabled){border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px color-mix(in oklab,var(--sui-stroke-strong-950, #171717) 16%,transparent)}.sui-time-picker__trigger--error{border-color:var(--sui-state-error-base, #fb3748)}.sui-time-picker__trigger--open{border-color:var(--sui-stroke-strong-950, #171717)}.sui-time-picker__trigger:disabled{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;border:none}:host([data-sui-size=small]) .sui-time-picker__trigger{height:36px;border-radius:var(--sui-radius-8, 8px)}.sui-time-picker__trigger-icon,.sui-time-picker__trigger-chevron{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-time-picker__trigger-text{flex:1 1 auto;text-align:left;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.084px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-time-picker__trigger-text--placeholder{color:var(--sui-text-soft-400, #a3a3a3);font-weight:400}\n"] }]
|
|
17361
|
+
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], durationPresets: [{ type: i0.Input, args: [{ isSignal: true, alias: "durationPresets", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], _menu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SuiDropdownMenu), { isSignal: true }] }], _columnEls: [{ type: i0.ViewChildren, args: ['columnEl', { isSignal: true }] }] } });
|
|
17267
17362
|
|
|
17268
17363
|
/**
|
|
17269
17364
|
* SUI Toast Service — SUI Design System 2.0
|