@ajuarezso/sui-design-system 0.2.3 → 0.2.5
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.
|
@@ -2602,9 +2602,13 @@ class SuiCheckboxCard {
|
|
|
2602
2602
|
iconSrc = input(null, ...(ngDevMode ? [{ debugName: "iconSrc" }] : /* istanbul ignore next */ []));
|
|
2603
2603
|
/** URL de imagen para type='avatar'. Si falla, fallback a iniciales del label. */
|
|
2604
2604
|
imageUrl = input(null, ...(ngDevMode ? [{ debugName: "imageUrl" }] : /* istanbul ignore next */ []));
|
|
2605
|
-
/**
|
|
2606
|
-
|
|
2607
|
-
|
|
2605
|
+
/** Badge junto al label — string shorthand ('NEW') o SuiBadgeConfig
|
|
2606
|
+
(label + color/variant/size, tipado como sui-badge). null = sin badge. */
|
|
2607
|
+
badge = input(null, ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
|
|
2608
|
+
badgeCfg = computed(() => {
|
|
2609
|
+
const b = this.badge();
|
|
2610
|
+
return b ? (typeof b === 'string' ? { label: b } : b) : null;
|
|
2611
|
+
}, ...(ngDevMode ? [{ debugName: "badgeCfg" }] : /* istanbul ignore next */ []));
|
|
2608
2612
|
/** Indeterminate state (tri-state checkbox). */
|
|
2609
2613
|
indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
|
|
2610
2614
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
@@ -2659,13 +2663,13 @@ class SuiCheckboxCard {
|
|
|
2659
2663
|
this._disabledByForm.set(isDisabled);
|
|
2660
2664
|
}
|
|
2661
2665
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiCheckboxCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2662
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiCheckboxCard, isStandalone: true, selector: "sui-checkbox-card", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, emoji: { classPropertyName: "emoji", publicName: "emoji", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null },
|
|
2666
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiCheckboxCard, isStandalone: true, selector: "sui-checkbox-card", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, emoji: { classPropertyName: "emoji", publicName: "emoji", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", checkedChange2: "checkedChange2" }, host: { listeners: { "click": "onToggle($event)", "keydown.space": "onToggle($event)", "keydown.enter": "onToggle($event)", "touchstart": "$event.currentTarget", "touchend": "$any($event.currentTarget).blur()" }, properties: { "attr.data-sui-type": "type()", "attr.data-sui-checked": "checked() ? \"\" : null", "attr.data-sui-indeterminate": "indeterminate() ? \"\" : null", "attr.data-sui-disabled": "isDisabled() ? \"\" : null", "attr.data-sui-leading-fill": "iconSrc() ? \"\" : null", "attr.role": "\"checkbox\"", "attr.aria-checked": "indeterminate() ? \"mixed\" : (checked() ? \"true\" : \"false\")", "attr.aria-disabled": "isDisabled() ? \"true\" : null", "attr.aria-label": "label() || null", "attr.tabindex": "isDisabled() ? \"-1\" : \"0\"" } }, providers: [
|
|
2663
2667
|
{
|
|
2664
2668
|
provide: NG_VALUE_ACCESSOR,
|
|
2665
2669
|
useExisting: forwardRef(() => SuiCheckboxCard),
|
|
2666
2670
|
multi: true,
|
|
2667
2671
|
},
|
|
2668
|
-
], 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 (
|
|
2672
|
+
], 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 <span class=\"sui-checkbox-card__badge\">{{ bcfg.label }}</span>\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}.sui-checkbox-card__badge{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border:1px solid transparent;border-radius:var(--sui-radius-full, 999px);background:var(--sui-state-information-light, #c0d5ff);color:var(--sui-state-information-dark, #122368);font-size:11px;font-weight:500;line-height:12px;letter-spacing:.22px;text-transform:uppercase;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap}:host([data-sui-disabled]) .sui-checkbox-card__badge{background:transparent;border-color: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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2669
2673
|
}
|
|
2670
2674
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiCheckboxCard, decorators: [{
|
|
2671
2675
|
type: Component,
|
|
@@ -2692,8 +2696,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2692
2696
|
/* iOS WKWebView fix — sin esto :active stickea 300-500ms en standalone pages */
|
|
2693
2697
|
'(touchstart)': '$event.currentTarget',
|
|
2694
2698
|
'(touchend)': '$any($event.currentTarget).blur()',
|
|
2695
|
-
}, 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 (
|
|
2696
|
-
}], 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 }] }],
|
|
2699
|
+
}, 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 <span class=\"sui-checkbox-card__badge\">{{ bcfg.label }}</span>\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}.sui-checkbox-card__badge{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border:1px solid transparent;border-radius:var(--sui-radius-full, 999px);background:var(--sui-state-information-light, #c0d5ff);color:var(--sui-state-information-dark, #122368);font-size:11px;font-weight:500;line-height:12px;letter-spacing:.22px;text-transform:uppercase;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap}:host([data-sui-disabled]) .sui-checkbox-card__badge{background:transparent;border-color: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"] }]
|
|
2700
|
+
}], 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"] }] } });
|
|
2697
2701
|
|
|
2698
2702
|
/**
|
|
2699
2703
|
* SUI Checkbox Label — SUI Design System 2.0
|
|
@@ -2766,10 +2770,13 @@ class SuiCheckboxLabel {
|
|
|
2766
2770
|
/** Descripción opcional debajo del title. Cuando está set, el variant
|
|
2767
2771
|
cambia a "with description" (label en medium + multi-line content). */
|
|
2768
2772
|
description = input(null, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
|
|
2769
|
-
/**
|
|
2770
|
-
|
|
2771
|
-
|
|
2772
|
-
|
|
2773
|
+
/** Badge junto al label — string shorthand ('NEW') o SuiBadgeConfig
|
|
2774
|
+
(label + color/variant/size, tipado como sui-badge). null = sin badge. */
|
|
2775
|
+
badge = input(null, ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
|
|
2776
|
+
badgeCfg = computed(() => {
|
|
2777
|
+
const b = this.badge();
|
|
2778
|
+
return b ? (typeof b === 'string' ? { label: b } : b) : null;
|
|
2779
|
+
}, ...(ngDevMode ? [{ debugName: "badgeCfg" }] : /* istanbul ignore next */ []));
|
|
2773
2780
|
/** Texto del Link Button opcional debajo de la description. Solo se renderiza
|
|
2774
2781
|
cuando description tiene valor. */
|
|
2775
2782
|
linkLabel = input(null, ...(ngDevMode ? [{ debugName: "linkLabel" }] : /* istanbul ignore next */ []));
|
|
@@ -2835,13 +2842,13 @@ class SuiCheckboxLabel {
|
|
|
2835
2842
|
this._disabledByForm.set(isDisabled);
|
|
2836
2843
|
}
|
|
2837
2844
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiCheckboxLabel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2838
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiCheckboxLabel, isStandalone: true, selector: "sui-checkbox-label", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null },
|
|
2845
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiCheckboxLabel, isStandalone: true, selector: "sui-checkbox-label", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, linkLabel: { classPropertyName: "linkLabel", publicName: "linkLabel", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "flip", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", linkClick: "linkClick" }, host: { listeners: { "click": "onLabelClick($event)" }, properties: { "attr.data-sui-flip": "flip() ? \"\" : null", "attr.data-sui-with-description": "description() ? \"\" : null", "attr.data-sui-disabled": "isDisabled() ? \"\" : null" } }, providers: [
|
|
2839
2846
|
{
|
|
2840
2847
|
provide: NG_VALUE_ACCESSOR,
|
|
2841
2848
|
useExisting: forwardRef(() => SuiCheckboxLabel),
|
|
2842
2849
|
multi: true,
|
|
2843
2850
|
},
|
|
2844
|
-
], ngImport: i0, template: "<!-- Layout flex: el orden visual depende de [flip]. CSS rota via `order` para\n mantener un solo DOM order accesible (checkbox primero). -->\n<sui-checkbox\n class=\"sui-checkbox-label__checkbox\"\n [checked]=\"active()\"\n [indeterminate]=\"indeterminate()\"\n [disabled]=\"isDisabled()\"\n (checkedChange)=\"onCheckboxChange($event)\"\n/>\n\n<div class=\"sui-checkbox-label__content\">\n <!-- Bloque de texto: Title + Description van pegados (gap-4 en Figma). -->\n <div class=\"sui-checkbox-label__text\">\n <div class=\"sui-checkbox-label__title\">\n <span class=\"sui-checkbox-label__label\">{{ label() }}</span>\n @if (sublabel(); as sl) {\n <span class=\"sui-checkbox-label__sublabel\">{{ sl }}</span>\n }\n @if (
|
|
2851
|
+
], ngImport: i0, template: "<!-- Layout flex: el orden visual depende de [flip]. CSS rota via `order` para\n mantener un solo DOM order accesible (checkbox primero). -->\n<sui-checkbox\n class=\"sui-checkbox-label__checkbox\"\n [checked]=\"active()\"\n [indeterminate]=\"indeterminate()\"\n [disabled]=\"isDisabled()\"\n (checkedChange)=\"onCheckboxChange($event)\"\n/>\n\n<div class=\"sui-checkbox-label__content\">\n <!-- Bloque de texto: Title + Description van pegados (gap-4 en Figma). -->\n <div class=\"sui-checkbox-label__text\">\n <div class=\"sui-checkbox-label__title\">\n <span class=\"sui-checkbox-label__label\">{{ label() }}</span>\n @if (sublabel(); as sl) {\n <span class=\"sui-checkbox-label__sublabel\">{{ sl }}</span>\n }\n @if (badgeCfg(); as bcfg) {\n <sui-badge\n class=\"sui-checkbox-label__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\n @if (description(); as desc) {\n <p class=\"sui-checkbox-label__description\">{{ desc }}</p>\n }\n </div>\n\n @if (description() && linkLabel(); as link) {\n <sui-link-button\n variant=\"primary\"\n size=\"small\"\n [disabled]=\"isDisabled()\"\n (clicked)=\"onLinkClick($event)\"\n >{{ link }}</sui-link-button>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-tap-highlight-color:transparent}:host([data-sui-flip]) .sui-checkbox-label__checkbox{order:2}:host([data-sui-flip]) .sui-checkbox-label__content{order:1}:host([data-sui-disabled]){cursor:not-allowed}:host([data-sui-disabled]) .sui-checkbox-label__content{opacity:.5}.sui-checkbox-label__checkbox{flex-shrink:0}.sui-checkbox-label__content{display:flex;flex:1 0 0;min-width:0;flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-with-description]) .sui-checkbox-label__content{gap:10px}.sui-checkbox-label__text{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%}.sui-checkbox-label__title{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.sui-checkbox-label__label{font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-strong-950)}:host([data-sui-with-description]) .sui-checkbox-label__label{font-weight:500}.sui-checkbox-label__sublabel{font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600)}.sui-checkbox-label__badge{flex-shrink:0}.sui-checkbox-label__description{margin:0;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600);word-break:break-word}\n"], dependencies: [{ kind: "component", type: SuiCheckbox, selector: "sui-checkbox", inputs: ["size", "checked", "indeterminate", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }, { kind: "component", type: SuiLinkButton, selector: "sui-link-button", inputs: ["variant", "size", "underline", "disabled", "leftIcon", "rightIcon", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2845
2852
|
}
|
|
2846
2853
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiCheckboxLabel, decorators: [{
|
|
2847
2854
|
type: Component,
|
|
@@ -2856,8 +2863,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2856
2863
|
'[attr.data-sui-with-description]': 'description() ? "" : null',
|
|
2857
2864
|
'[attr.data-sui-disabled]': 'isDisabled() ? "" : null',
|
|
2858
2865
|
'(click)': 'onLabelClick($event)',
|
|
2859
|
-
}, template: "<!-- Layout flex: el orden visual depende de [flip]. CSS rota via `order` para\n mantener un solo DOM order accesible (checkbox primero). -->\n<sui-checkbox\n class=\"sui-checkbox-label__checkbox\"\n [checked]=\"active()\"\n [indeterminate]=\"indeterminate()\"\n [disabled]=\"isDisabled()\"\n (checkedChange)=\"onCheckboxChange($event)\"\n/>\n\n<div class=\"sui-checkbox-label__content\">\n <!-- Bloque de texto: Title + Description van pegados (gap-4 en Figma). -->\n <div class=\"sui-checkbox-label__text\">\n <div class=\"sui-checkbox-label__title\">\n <span class=\"sui-checkbox-label__label\">{{ label() }}</span>\n @if (sublabel(); as sl) {\n <span class=\"sui-checkbox-label__sublabel\">{{ sl }}</span>\n }\n @if (
|
|
2860
|
-
}], propDecorators: { 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 }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }],
|
|
2866
|
+
}, template: "<!-- Layout flex: el orden visual depende de [flip]. CSS rota via `order` para\n mantener un solo DOM order accesible (checkbox primero). -->\n<sui-checkbox\n class=\"sui-checkbox-label__checkbox\"\n [checked]=\"active()\"\n [indeterminate]=\"indeterminate()\"\n [disabled]=\"isDisabled()\"\n (checkedChange)=\"onCheckboxChange($event)\"\n/>\n\n<div class=\"sui-checkbox-label__content\">\n <!-- Bloque de texto: Title + Description van pegados (gap-4 en Figma). -->\n <div class=\"sui-checkbox-label__text\">\n <div class=\"sui-checkbox-label__title\">\n <span class=\"sui-checkbox-label__label\">{{ label() }}</span>\n @if (sublabel(); as sl) {\n <span class=\"sui-checkbox-label__sublabel\">{{ sl }}</span>\n }\n @if (badgeCfg(); as bcfg) {\n <sui-badge\n class=\"sui-checkbox-label__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\n @if (description(); as desc) {\n <p class=\"sui-checkbox-label__description\">{{ desc }}</p>\n }\n </div>\n\n @if (description() && linkLabel(); as link) {\n <sui-link-button\n variant=\"primary\"\n size=\"small\"\n [disabled]=\"isDisabled()\"\n (clicked)=\"onLinkClick($event)\"\n >{{ link }}</sui-link-button>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-tap-highlight-color:transparent}:host([data-sui-flip]) .sui-checkbox-label__checkbox{order:2}:host([data-sui-flip]) .sui-checkbox-label__content{order:1}:host([data-sui-disabled]){cursor:not-allowed}:host([data-sui-disabled]) .sui-checkbox-label__content{opacity:.5}.sui-checkbox-label__checkbox{flex-shrink:0}.sui-checkbox-label__content{display:flex;flex:1 0 0;min-width:0;flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-with-description]) .sui-checkbox-label__content{gap:10px}.sui-checkbox-label__text{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%}.sui-checkbox-label__title{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.sui-checkbox-label__label{font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-strong-950)}:host([data-sui-with-description]) .sui-checkbox-label__label{font-weight:500}.sui-checkbox-label__sublabel{font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600)}.sui-checkbox-label__badge{flex-shrink:0}.sui-checkbox-label__description{margin:0;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600);word-break:break-word}\n"] }]
|
|
2867
|
+
}], propDecorators: { 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 }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], linkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkLabel", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "flip", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], linkClick: [{ type: i0.Output, args: ["linkClick"] }] } });
|
|
2861
2868
|
|
|
2862
2869
|
/**
|
|
2863
2870
|
* sui-circular-progress-bar — SUI Design System 2.0 · Circular Progress Bar
|
|
@@ -9723,8 +9730,13 @@ class SuiIntegrationSwitch {
|
|
|
9723
9730
|
brandIconSrc = input(null, ...(ngDevMode ? [{ debugName: "brandIconSrc" }] : /* istanbul ignore next */ []));
|
|
9724
9731
|
/** RemixIcon fallback si no hay brandIconSrc (ej. 'plug-line' como genérico). */
|
|
9725
9732
|
brandIcon = input(null, ...(ngDevMode ? [{ debugName: "brandIcon" }] : /* istanbul ignore next */ []));
|
|
9726
|
-
|
|
9727
|
-
|
|
9733
|
+
/** Badge junto al label — string shorthand ('NEW') o SuiBadgeConfig
|
|
9734
|
+
(label + color/variant/size, tipado como sui-badge). null = sin badge. */
|
|
9735
|
+
badge = input(null, ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
|
|
9736
|
+
badgeCfg = computed(() => {
|
|
9737
|
+
const b = this.badge();
|
|
9738
|
+
return b ? (typeof b === 'string' ? { label: b } : b) : null;
|
|
9739
|
+
}, ...(ngDevMode ? [{ debugName: "badgeCfg" }] : /* istanbul ignore next */ []));
|
|
9728
9740
|
/** Mostrar el manage button. Default true. */
|
|
9729
9741
|
showManage = input(true, ...(ngDevMode ? [{ debugName: "showManage" }] : /* istanbul ignore next */ []));
|
|
9730
9742
|
manageLabel = input('Manage', ...(ngDevMode ? [{ debugName: "manageLabel" }] : /* istanbul ignore next */ []));
|
|
@@ -9790,13 +9802,13 @@ class SuiIntegrationSwitch {
|
|
|
9790
9802
|
this._disabledByForm.set(isDisabled);
|
|
9791
9803
|
}
|
|
9792
9804
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiIntegrationSwitch, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9793
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiIntegrationSwitch, isStandalone: true, selector: "sui-integration-switch", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", 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 }, brandIconSrc: { classPropertyName: "brandIconSrc", publicName: "brandIconSrc", isSignal: true, isRequired: false, transformFunction: null }, brandIcon: { classPropertyName: "brandIcon", publicName: "brandIcon", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null },
|
|
9805
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiIntegrationSwitch, isStandalone: true, selector: "sui-integration-switch", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", 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 }, brandIconSrc: { classPropertyName: "brandIconSrc", publicName: "brandIconSrc", isSignal: true, isRequired: false, transformFunction: null }, brandIcon: { classPropertyName: "brandIcon", publicName: "brandIcon", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, showManage: { classPropertyName: "showManage", publicName: "showManage", isSignal: true, isRequired: false, transformFunction: null }, manageLabel: { classPropertyName: "manageLabel", publicName: "manageLabel", isSignal: true, isRequired: false, transformFunction: null }, manageIcon: { classPropertyName: "manageIcon", publicName: "manageIcon", isSignal: true, isRequired: false, transformFunction: null }, showToggle: { classPropertyName: "showToggle", publicName: "showToggle", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeChange: "activeChange", manage: "manage" }, host: { properties: { "attr.title": "null", "attr.data-sui-type": "type()", "attr.data-sui-appearance": "appearance()", "attr.data-sui-disabled": "isDisabled() ? \"\" : null" } }, providers: [
|
|
9794
9806
|
{
|
|
9795
9807
|
provide: NG_VALUE_ACCESSOR,
|
|
9796
9808
|
useExisting: forwardRef(() => SuiIntegrationSwitch),
|
|
9797
9809
|
multi: true,
|
|
9798
9810
|
},
|
|
9799
|
-
], 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 (
|
|
9811
|
+
], 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 (showManage()) {\n <button\n type=\"button\"\n class=\"sui-integration-switch__manage\"\n [attr.aria-label]=\"manageLabel()\"\n [disabled]=\"isDisabled()\"\n (click)=\"onManageClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon [name]=\"manageIcon()\" [size]=\"20\" />\n <span class=\"sui-integration-switch__manage-label\">{{ manageLabel() }}</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:0 1px 2px #0a0d1408}: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:0 1px 2px #0a0d1408;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:0 1px 2px #0a0d1408;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 });
|
|
9800
9812
|
}
|
|
9801
9813
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiIntegrationSwitch, decorators: [{
|
|
9802
9814
|
type: Component,
|
|
@@ -9814,8 +9826,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
9814
9826
|
'[attr.data-sui-type]': 'type()',
|
|
9815
9827
|
'[attr.data-sui-appearance]': 'appearance()',
|
|
9816
9828
|
'[attr.data-sui-disabled]': 'isDisabled() ? "" : null',
|
|
9817
|
-
}, 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 (
|
|
9818
|
-
}], 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 }] }],
|
|
9829
|
+
}, 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 (showManage()) {\n <button\n type=\"button\"\n class=\"sui-integration-switch__manage\"\n [attr.aria-label]=\"manageLabel()\"\n [disabled]=\"isDisabled()\"\n (click)=\"onManageClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon [name]=\"manageIcon()\" [size]=\"20\" />\n <span class=\"sui-integration-switch__manage-label\">{{ manageLabel() }}</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:0 1px 2px #0a0d1408}: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:0 1px 2px #0a0d1408;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:0 1px 2px #0a0d1408;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"] }]
|
|
9830
|
+
}], 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 }] }], showManage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showManage", required: false }] }], manageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "manageLabel", required: false }] }], manageIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "manageIcon", 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"] }], manage: [{ type: i0.Output, args: ["manage"] }] } });
|
|
9819
9831
|
|
|
9820
9832
|
/** Set de los 9 colores SUI 2.0 para iterar desde el consumer (previews, demos). */
|
|
9821
9833
|
const SUI_KEY_ICON_COLORS = [
|
|
@@ -11914,10 +11926,13 @@ class SuiRadioCard {
|
|
|
11914
11926
|
* label. Para los otros types se ignora.
|
|
11915
11927
|
*/
|
|
11916
11928
|
imageUrl = input(null, ...(ngDevMode ? [{ debugName: "imageUrl" }] : /* istanbul ignore next */ []));
|
|
11917
|
-
/**
|
|
11918
|
-
|
|
11919
|
-
|
|
11920
|
-
|
|
11929
|
+
/** Badge junto al label — string shorthand ('NEW') o SuiBadgeConfig
|
|
11930
|
+
(label + color/variant/size, tipado como sui-badge). null = sin badge. */
|
|
11931
|
+
badge = input(null, ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
|
|
11932
|
+
badgeCfg = computed(() => {
|
|
11933
|
+
const b = this.badge();
|
|
11934
|
+
return b ? (typeof b === 'string' ? { label: b } : b) : null;
|
|
11935
|
+
}, ...(ngDevMode ? [{ debugName: "badgeCfg" }] : /* istanbul ignore next */ []));
|
|
11921
11936
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
11922
11937
|
/** Standalone mode (no group): two-way binding del estado checked. */
|
|
11923
11938
|
checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
|
|
@@ -11974,13 +11989,13 @@ class SuiRadioCard {
|
|
|
11974
11989
|
this._disabledByForm.set(isDisabled);
|
|
11975
11990
|
}
|
|
11976
11991
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiRadioCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11977
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiRadioCard, isStandalone: true, selector: "sui-radio-card", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, emoji: { classPropertyName: "emoji", publicName: "emoji", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null },
|
|
11992
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiRadioCard, isStandalone: true, selector: "sui-radio-card", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, emoji: { classPropertyName: "emoji", publicName: "emoji", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", selected: "selected" }, host: { listeners: { "click": "onToggle($event)", "keydown.space": "onToggle($event)", "keydown.enter": "onToggle($event)", "touchstart": "$event.currentTarget", "touchend": "$any($event.currentTarget).blur()" }, properties: { "attr.data-sui-type": "type()", "attr.data-sui-checked": "isChecked() ? \"\" : null", "attr.data-sui-disabled": "isDisabled() ? \"\" : null", "attr.data-sui-leading-fill": "iconSrc() ? \"\" : null", "attr.role": "\"radio\"", "attr.aria-checked": "isChecked() ? \"true\" : \"false\"", "attr.aria-disabled": "isDisabled() ? \"true\" : null", "attr.aria-label": "label() || null", "attr.tabindex": "isDisabled() ? \"-1\" : \"0\"" } }, providers: [
|
|
11978
11993
|
{
|
|
11979
11994
|
provide: NG_VALUE_ACCESSOR,
|
|
11980
11995
|
useExisting: forwardRef(() => SuiRadioCard),
|
|
11981
11996
|
multi: true,
|
|
11982
11997
|
},
|
|
11983
|
-
], 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}\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 (
|
|
11998
|
+
], 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}\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 <span class=\"sui-radio-card__badge\">{{ bcfg.label }}</span>\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__badge{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:var(--sui-radius-full, 999px);background:var(--sui-state-information-light, #c0d5ff);color:var(--sui-state-information-dark, #122368);font-size:11px;font-weight:500;line-height:12px;letter-spacing:.22px;text-transform:uppercase;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap}.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)}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11984
11999
|
}
|
|
11985
12000
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiRadioCard, decorators: [{
|
|
11986
12001
|
type: Component,
|
|
@@ -12010,8 +12025,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
12010
12025
|
/* iOS WKWebView fix — sin esto :active stickea 300-500ms en standalone pages */
|
|
12011
12026
|
'(touchstart)': '$event.currentTarget',
|
|
12012
12027
|
'(touchend)': '$any($event.currentTarget).blur()',
|
|
12013
|
-
}, 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}\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 (
|
|
12014
|
-
}], 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 }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }],
|
|
12028
|
+
}, 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}\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 <span class=\"sui-radio-card__badge\">{{ bcfg.label }}</span>\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__badge{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:var(--sui-radius-full, 999px);background:var(--sui-state-information-light, #c0d5ff);color:var(--sui-state-information-dark, #122368);font-size:11px;font-weight:500;line-height:12px;letter-spacing:.22px;text-transform:uppercase;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap}.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)}\n"] }]
|
|
12029
|
+
}], 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 }] }], 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"] }] } });
|
|
12015
12030
|
|
|
12016
12031
|
// large/xlarge: project extension (no-Figma)
|
|
12017
12032
|
/**
|
|
@@ -14041,10 +14056,13 @@ class SuiSwitchCard {
|
|
|
14041
14056
|
* label. Para los otros types se ignora.
|
|
14042
14057
|
*/
|
|
14043
14058
|
imageUrl = input(null, ...(ngDevMode ? [{ debugName: "imageUrl" }] : /* istanbul ignore next */ []));
|
|
14044
|
-
/**
|
|
14045
|
-
|
|
14046
|
-
|
|
14047
|
-
|
|
14059
|
+
/** Badge junto al label — string shorthand ('NEW') o SuiBadgeConfig
|
|
14060
|
+
(label + color/variant/size, tipado como sui-badge). null = sin badge. */
|
|
14061
|
+
badge = input(null, ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
|
|
14062
|
+
badgeCfg = computed(() => {
|
|
14063
|
+
const b = this.badge();
|
|
14064
|
+
return b ? (typeof b === 'string' ? { label: b } : b) : null;
|
|
14065
|
+
}, ...(ngDevMode ? [{ debugName: "badgeCfg" }] : /* istanbul ignore next */ []));
|
|
14048
14066
|
/** Estado del switch — controlled pattern (input + output, no model).
|
|
14049
14067
|
* Ver `sui-switch.ts` para la justificación (anti-loop protection bug). */
|
|
14050
14068
|
checked = input(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
|
|
@@ -14136,13 +14154,13 @@ class SuiSwitchCard {
|
|
|
14136
14154
|
this._disabledByForm.set(isDisabled);
|
|
14137
14155
|
}
|
|
14138
14156
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSwitchCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14139
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiSwitchCard, isStandalone: true, selector: "sui-switch-card", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, emoji: { classPropertyName: "emoji", publicName: "emoji", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null },
|
|
14157
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiSwitchCard, isStandalone: true, selector: "sui-switch-card", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, emoji: { classPropertyName: "emoji", publicName: "emoji", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange" }, host: { listeners: { "click": "onCardClick($event)", "keydown.space": "onCardKey($event)", "keydown.enter": "onCardKey($event)", "touchstart": "$event.currentTarget", "touchend": "$any($event.currentTarget).blur()" }, properties: { "attr.data-sui-type": "type()", "attr.data-sui-checked": "effectiveChecked() ? \"\" : null", "attr.data-sui-disabled": "isDisabled() ? \"\" : null", "attr.role": "\"group\"", "attr.aria-disabled": "isDisabled() ? \"true\" : null" } }, providers: [
|
|
14140
14158
|
{
|
|
14141
14159
|
provide: NG_VALUE_ACCESSOR,
|
|
14142
14160
|
useExisting: forwardRef(() => SuiSwitchCard),
|
|
14143
14161
|
multi: true,
|
|
14144
14162
|
},
|
|
14145
|
-
], 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 (
|
|
14163
|
+
], 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 <span class=\"sui-switch-card__badge\">{{ bcfg.label }}</span>\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)}.sui-switch-card__badge{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:999px;background:var(--sui-state-information-light, #c0d5ff);color:var(--sui-state-information-dark, #122368);font-size:11px;font-weight:500;line-height:12px;letter-spacing:.22px;text-transform:uppercase;white-space:nowrap}:host([data-sui-disabled]) .sui-switch-card__badge{background:transparent;border:1px solid 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14146
14164
|
}
|
|
14147
14165
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSwitchCard, decorators: [{
|
|
14148
14166
|
type: Component,
|
|
@@ -14164,8 +14182,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
14164
14182
|
/* iOS WKWebView fix — ver CLAUDE.md "iOS :active stuck en custom buttons". */
|
|
14165
14183
|
'(touchstart)': '$event.currentTarget',
|
|
14166
14184
|
'(touchend)': '$any($event.currentTarget).blur()',
|
|
14167
|
-
}, 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 (
|
|
14168
|
-
}], 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 }] }],
|
|
14185
|
+
}, 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 <span class=\"sui-switch-card__badge\">{{ bcfg.label }}</span>\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)}.sui-switch-card__badge{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:999px;background:var(--sui-state-information-light, #c0d5ff);color:var(--sui-state-information-dark, #122368);font-size:11px;font-weight:500;line-height:12px;letter-spacing:.22px;text-transform:uppercase;white-space:nowrap}:host([data-sui-disabled]) .sui-switch-card__badge{background:transparent;border:1px solid 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"] }]
|
|
14186
|
+
}], 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 }] }] } });
|
|
14169
14187
|
|
|
14170
14188
|
/**
|
|
14171
14189
|
* SUI Switch Label — SUI Design System 2.0
|
|
@@ -14230,8 +14248,13 @@ class SuiSwitchLabel {
|
|
|
14230
14248
|
description = input(null, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
|
|
14231
14249
|
/** Tamaño del switch interno — lo decide el padre (componente dumb). */
|
|
14232
14250
|
size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
14233
|
-
|
|
14234
|
-
|
|
14251
|
+
/** Badge junto al label — string shorthand ('NEW') o SuiBadgeConfig
|
|
14252
|
+
(label + color/variant/size, tipado como sui-badge). null = sin badge. */
|
|
14253
|
+
badge = input(null, ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
|
|
14254
|
+
badgeCfg = computed(() => {
|
|
14255
|
+
const b = this.badge();
|
|
14256
|
+
return b ? (typeof b === 'string' ? { label: b } : b) : null;
|
|
14257
|
+
}, ...(ngDevMode ? [{ debugName: "badgeCfg" }] : /* istanbul ignore next */ []));
|
|
14235
14258
|
linkLabel = input(null, ...(ngDevMode ? [{ debugName: "linkLabel" }] : /* istanbul ignore next */ []));
|
|
14236
14259
|
/** Si true, invierte orden: [content] [switch] (label a la izquierda). */
|
|
14237
14260
|
flip = input(false, ...(ngDevMode ? [{ debugName: "flip" }] : /* istanbul ignore next */ []));
|
|
@@ -14313,13 +14336,13 @@ class SuiSwitchLabel {
|
|
|
14313
14336
|
this._disabledByForm.set(isDisabled);
|
|
14314
14337
|
}
|
|
14315
14338
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSwitchLabel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14316
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiSwitchLabel, isStandalone: true, selector: "sui-switch-label", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null },
|
|
14339
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiSwitchLabel, isStandalone: true, selector: "sui-switch-label", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, linkLabel: { classPropertyName: "linkLabel", publicName: "linkLabel", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "flip", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeChange: "activeChange", linkClick: "linkClick" }, host: { listeners: { "click": "onLabelClick($event)" }, properties: { "attr.data-sui-flip": "flip() ? \"\" : null", "attr.data-sui-with-description": "description() ? \"\" : null", "attr.data-sui-disabled": "isDisabled() ? \"\" : null" } }, providers: [
|
|
14317
14340
|
{
|
|
14318
14341
|
provide: NG_VALUE_ACCESSOR,
|
|
14319
14342
|
useExisting: forwardRef(() => SuiSwitchLabel),
|
|
14320
14343
|
multi: true,
|
|
14321
14344
|
},
|
|
14322
|
-
], ngImport: i0, template: "<sui-switch\n class=\"sui-switch-label__switch\"\n [size]=\"size()\"\n [checked]=\"effectiveActive()\"\n [disabled]=\"isDisabled()\"\n (checkedChange)=\"onSwitchChange($event)\"\n/>\n\n<div class=\"sui-switch-label__content\">\n <div class=\"sui-switch-label__title\">\n <span class=\"sui-switch-label__label\">{{ label() }}</span>\n @if (sublabel(); as sl) {\n <span class=\"sui-switch-label__sublabel\">{{ sl }}</span>\n }\n @if (
|
|
14345
|
+
], ngImport: i0, template: "<sui-switch\n class=\"sui-switch-label__switch\"\n [size]=\"size()\"\n [checked]=\"effectiveActive()\"\n [disabled]=\"isDisabled()\"\n (checkedChange)=\"onSwitchChange($event)\"\n/>\n\n<div class=\"sui-switch-label__content\">\n <div class=\"sui-switch-label__title\">\n <span class=\"sui-switch-label__label\">{{ label() }}</span>\n @if (sublabel(); as sl) {\n <span class=\"sui-switch-label__sublabel\">{{ sl }}</span>\n }\n @if (badgeCfg(); as bcfg) {\n <sui-badge\n class=\"sui-switch-label__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\n @if (description(); as desc) {\n <p class=\"sui-switch-label__description\">{{ desc }}</p>\n\n @if (linkLabel(); as link) {\n <button\n type=\"button\"\n class=\"sui-switch-label__link\"\n [disabled]=\"isDisabled()\"\n (click)=\"onLinkClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >{{ link }}</button>\n }\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-tap-highlight-color:transparent}:host([data-sui-flip]) .sui-switch-label__switch{order:2}:host([data-sui-flip]) .sui-switch-label__content{order:1}:host([data-sui-disabled]){cursor:not-allowed}:host([data-sui-disabled]) .sui-switch-label__content{opacity:.5}:host([data-sui-disabled]) .sui-switch-label__switch{opacity:.5}.sui-switch-label__switch{flex-shrink:0}.sui-switch-label__content{display:flex;flex:1 0 0;min-width:0;flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-with-description]) .sui-switch-label__content{gap:10px}.sui-switch-label__title{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.sui-switch-label__label{font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950)}:host([data-sui-with-description]) .sui-switch-label__label{font-weight:500}.sui-switch-label__sublabel{font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600)}.sui-switch-label__badge{flex-shrink:0}.sui-switch-label__description{margin:0;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600);word-break:break-word}.sui-switch-label__link{appearance:none;background:transparent;border:0;padding:0;font-family:inherit;font-size:12px;font-weight:500;line-height:16px;color:var(--sui-primary-base);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .15s ease}.sui-switch-label__link:hover{text-decoration:underline;text-underline-offset:2px;color:var(--sui-primary-dark, var(--sui-primary-base))}.sui-switch-label__link:focus-visible{outline:2px solid var(--sui-primary-base);outline-offset:2px;border-radius:2px}.sui-switch-label__link:disabled{color:var(--sui-text-disabled-300);cursor:not-allowed;pointer-events:none}\n"], dependencies: [{ kind: "component", type: SuiSwitch, selector: "sui-switch", inputs: ["size", "checked", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14323
14346
|
}
|
|
14324
14347
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSwitchLabel, decorators: [{
|
|
14325
14348
|
type: Component,
|
|
@@ -14334,8 +14357,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
14334
14357
|
'[attr.data-sui-with-description]': 'description() ? "" : null',
|
|
14335
14358
|
'[attr.data-sui-disabled]': 'isDisabled() ? "" : null',
|
|
14336
14359
|
'(click)': 'onLabelClick($event)',
|
|
14337
|
-
}, template: "<sui-switch\n class=\"sui-switch-label__switch\"\n [size]=\"size()\"\n [checked]=\"effectiveActive()\"\n [disabled]=\"isDisabled()\"\n (checkedChange)=\"onSwitchChange($event)\"\n/>\n\n<div class=\"sui-switch-label__content\">\n <div class=\"sui-switch-label__title\">\n <span class=\"sui-switch-label__label\">{{ label() }}</span>\n @if (sublabel(); as sl) {\n <span class=\"sui-switch-label__sublabel\">{{ sl }}</span>\n }\n @if (
|
|
14338
|
-
}], propDecorators: { 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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }],
|
|
14360
|
+
}, template: "<sui-switch\n class=\"sui-switch-label__switch\"\n [size]=\"size()\"\n [checked]=\"effectiveActive()\"\n [disabled]=\"isDisabled()\"\n (checkedChange)=\"onSwitchChange($event)\"\n/>\n\n<div class=\"sui-switch-label__content\">\n <div class=\"sui-switch-label__title\">\n <span class=\"sui-switch-label__label\">{{ label() }}</span>\n @if (sublabel(); as sl) {\n <span class=\"sui-switch-label__sublabel\">{{ sl }}</span>\n }\n @if (badgeCfg(); as bcfg) {\n <sui-badge\n class=\"sui-switch-label__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\n @if (description(); as desc) {\n <p class=\"sui-switch-label__description\">{{ desc }}</p>\n\n @if (linkLabel(); as link) {\n <button\n type=\"button\"\n class=\"sui-switch-label__link\"\n [disabled]=\"isDisabled()\"\n (click)=\"onLinkClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >{{ link }}</button>\n }\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-tap-highlight-color:transparent}:host([data-sui-flip]) .sui-switch-label__switch{order:2}:host([data-sui-flip]) .sui-switch-label__content{order:1}:host([data-sui-disabled]){cursor:not-allowed}:host([data-sui-disabled]) .sui-switch-label__content{opacity:.5}:host([data-sui-disabled]) .sui-switch-label__switch{opacity:.5}.sui-switch-label__switch{flex-shrink:0}.sui-switch-label__content{display:flex;flex:1 0 0;min-width:0;flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-with-description]) .sui-switch-label__content{gap:10px}.sui-switch-label__title{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.sui-switch-label__label{font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950)}:host([data-sui-with-description]) .sui-switch-label__label{font-weight:500}.sui-switch-label__sublabel{font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600)}.sui-switch-label__badge{flex-shrink:0}.sui-switch-label__description{margin:0;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600);word-break:break-word}.sui-switch-label__link{appearance:none;background:transparent;border:0;padding:0;font-family:inherit;font-size:12px;font-weight:500;line-height:16px;color:var(--sui-primary-base);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .15s ease}.sui-switch-label__link:hover{text-decoration:underline;text-underline-offset:2px;color:var(--sui-primary-dark, var(--sui-primary-base))}.sui-switch-label__link:focus-visible{outline:2px solid var(--sui-primary-base);outline-offset:2px;border-radius:2px}.sui-switch-label__link:disabled{color:var(--sui-text-disabled-300);cursor:not-allowed;pointer-events:none}\n"] }]
|
|
14361
|
+
}], propDecorators: { 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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], linkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkLabel", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "flip", 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"] }], linkClick: [{ type: i0.Output, args: ["linkClick"] }] } });
|
|
14339
14362
|
|
|
14340
14363
|
/**
|
|
14341
14364
|
* SUI Tab Chips — chips horizontales scrollables (estilo "category nav" de
|
|
@@ -14582,6 +14605,14 @@ class SuiTable {
|
|
|
14582
14605
|
tabla (horizontal) o el scroll container padre (vertical). Solo afecta
|
|
14583
14606
|
touch; mouse/wheel siguen nativos. iOS no lo necesita (delega solo). */
|
|
14584
14607
|
afterNextRender(() => {
|
|
14608
|
+
/* SOLO Android/Chromium necesita el manejo manual del touch (el container
|
|
14609
|
+
overflow-x absorbe el gesto vertical). iOS WKWebView delega solo y su
|
|
14610
|
+
scroll nativo (momentum + rubber band) es superior — interceptarlo lo
|
|
14611
|
+
degradaba a un drag 1:1 sin inercia ("parece swipe, no scroll"). */
|
|
14612
|
+
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent)
|
|
14613
|
+
|| (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
|
|
14614
|
+
if (isIOS)
|
|
14615
|
+
return;
|
|
14585
14616
|
const el = this.scrollEl()?.nativeElement;
|
|
14586
14617
|
if (el)
|
|
14587
14618
|
this.bindTouchScroll(el);
|
|
@@ -14595,7 +14626,7 @@ class SuiTable {
|
|
|
14595
14626
|
ventana de samples (~100ms) tipo VelocityTracker de Android — NO con el
|
|
14596
14627
|
último move suelto: el dedo siempre desacelera antes de soltar, así que
|
|
14597
14628
|
la velocidad instantánea final es ~0 y el fling moría → scroll "lento". */
|
|
14598
|
-
let vy = 0, momentumRaf = 0, momentumTs = 0;
|
|
14629
|
+
let vy = 0, vx = 0, momentumRaf = 0, momentumTs = 0;
|
|
14599
14630
|
const samples = [];
|
|
14600
14631
|
const VELOCITY_WINDOW_MS = 100;
|
|
14601
14632
|
const findPageScroller = () => {
|
|
@@ -14625,7 +14656,7 @@ class SuiTable {
|
|
|
14625
14656
|
axis = null;
|
|
14626
14657
|
vy = 0;
|
|
14627
14658
|
samples.length = 0;
|
|
14628
|
-
samples.push({ y: t.clientY, t: e.timeStamp });
|
|
14659
|
+
samples.push({ x: t.clientX, y: t.clientY, t: e.timeStamp });
|
|
14629
14660
|
pageScroller = findPageScroller();
|
|
14630
14661
|
};
|
|
14631
14662
|
const onMove = (e) => {
|
|
@@ -14652,10 +14683,10 @@ class SuiTable {
|
|
|
14652
14683
|
}
|
|
14653
14684
|
else if (pageScroller) {
|
|
14654
14685
|
pageScroller.scrollTop -= t.clientY - ly;
|
|
14655
|
-
samples.push({ y: t.clientY, t: e.timeStamp });
|
|
14656
|
-
while (samples.length > 1 && e.timeStamp - samples[0].t > VELOCITY_WINDOW_MS)
|
|
14657
|
-
samples.shift();
|
|
14658
14686
|
}
|
|
14687
|
+
samples.push({ x: t.clientX, y: t.clientY, t: e.timeStamp });
|
|
14688
|
+
while (samples.length > 1 && e.timeStamp - samples[0].t > VELOCITY_WINDOW_MS)
|
|
14689
|
+
samples.shift();
|
|
14659
14690
|
e.preventDefault();
|
|
14660
14691
|
lx = t.clientX;
|
|
14661
14692
|
ly = t.clientY;
|
|
@@ -14664,12 +14695,31 @@ class SuiTable {
|
|
|
14664
14695
|
/* Fling: continúa el scroll de la página con la velocidad de salida y
|
|
14665
14696
|
fricción exponencial frame-rate-independent (para que en 120Hz no vuele).
|
|
14666
14697
|
Replica el momentum nativo que el manejo manual del touch pierde. */
|
|
14667
|
-
|
|
14668
|
-
|
|
14669
|
-
|
|
14698
|
+
/* Velocidad de salida = promedio de la ventana (primer→último sample),
|
|
14699
|
+
tipo VelocityTracker. Fling en AMBOS ejes: vertical mueve el scroller de
|
|
14700
|
+
la página, horizontal la propia tabla. */
|
|
14670
14701
|
const first = samples[0];
|
|
14671
14702
|
const last = samples[samples.length - 1];
|
|
14672
14703
|
const win = last && first ? last.t - first.t : 0;
|
|
14704
|
+
if (axis === 'x') {
|
|
14705
|
+
vx = win > 0 ? (last.x - first.x) / win : 0;
|
|
14706
|
+
if (Math.abs(vx) < 0.05)
|
|
14707
|
+
return;
|
|
14708
|
+
momentumTs = 0;
|
|
14709
|
+
const stepX = (ts) => {
|
|
14710
|
+
if (!momentumTs)
|
|
14711
|
+
momentumTs = ts;
|
|
14712
|
+
const dt = Math.min(ts - momentumTs, 32);
|
|
14713
|
+
momentumTs = ts;
|
|
14714
|
+
el.scrollLeft -= vx * dt;
|
|
14715
|
+
vx *= Math.pow(0.95, dt / 16);
|
|
14716
|
+
momentumRaf = Math.abs(vx) > 0.02 ? requestAnimationFrame(stepX) : 0;
|
|
14717
|
+
};
|
|
14718
|
+
momentumRaf = requestAnimationFrame(stepX);
|
|
14719
|
+
return;
|
|
14720
|
+
}
|
|
14721
|
+
if (!pageScroller)
|
|
14722
|
+
return;
|
|
14673
14723
|
vy = win > 0 ? (last.y - first.y) / win : 0;
|
|
14674
14724
|
if (Math.abs(vy) < 0.05)
|
|
14675
14725
|
return;
|
|
@@ -14823,7 +14873,7 @@ class SuiTable {
|
|
|
14823
14873
|
return this.columns().map((_, i) => i);
|
|
14824
14874
|
}
|
|
14825
14875
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14826
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTable, isStandalone: true, selector: "sui-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: true, isRequired: false, transformFunction: null }, sortKey: { classPropertyName: "sortKey", publicName: "sortKey", isSignal: true, isRequired: false, transformFunction: null }, sortDir: { classPropertyName: "sortDir", publicName: "sortDir", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedRows: "selectedRowsChange", sortKey: "sortKeyChange", sortDir: "sortDirChange", rowClicked: "rowClicked", sortChanged: "sortChanged" }, host: { properties: { "attr.data-sui-size": "size()", "attr.data-sui-striped": "striped() ? \"\" : null", "attr.data-sui-selectable": "selectable() ? \"\" : null", "attr.data-sui-loading": "loading() ? \"\" : null", "attr.data-sui-sticky": "hasStickyColumn() ? \"\" : null" } }, queries: [{ propertyName: "cellTemplates", predicate: SuiTableCellDirective }], viewQueries: [{ propertyName: "scrollEl", first: true, predicate: ["scrollEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \u2550\u2550 SUI Table \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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"sui-table\" #scrollEl>\n\n <!-- Header -->\n <div class=\"sui-table__header\">\n <!-- Checkbox header (selectable mode) \u2014 compone sui-checkbox (canon) -->\n @if (selectable()) {\n <div class=\"sui-table__header-cell sui-table__header-cell--checkbox\">\n <sui-checkbox\n [checked]=\"allSelected\"\n [indeterminate]=\"partialSelected\"\n (checkedChange)=\"toggleAll()\"\n (click)=\"$event.stopPropagation()\"\n aria-label=\"Seleccionar todas las filas\"\n />\n </div>\n }\n\n @for (col of columns(); track col.key) {\n <div\n class=\"sui-table__header-cell\"\n [class.sui-table__header-cell--sortable]=\"col.sortable && !col.disabled\"\n [class.sui-table__header-cell--sorted]=\"isSortActive(col.key)\"\n [class.sui-table__header-cell--disabled]=\"col.disabled\"\n [class.sui-table__header-cell--center]=\"col.align === 'center'\"\n [class.sui-table__header-cell--right]=\"col.align === 'right'\"\n [class.sui-table__header-cell--empty]=\"!col.label\"\n [class.sui-table__header-cell--sticky]=\"col.sticky\"\n [style.width]=\"col.width ?? null\"\n [style.min-width]=\"colMinWidth(col)\"\n [style.max-width]=\"col.maxWidth ?? null\"\n [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n (click)=\"!col.disabled && onSort(col)\"\n [attr.tabindex]=\"col.sortable && !col.disabled ? '0' : null\"\n [attr.role]=\"col.sortable ? 'columnheader' : null\"\n [attr.aria-disabled]=\"col.disabled ? 'true' : null\"\n [attr.aria-sort]=\"col.sortable ? (isSortActive(col.key) ? (sortDir() === 'asc' ? 'ascending' : 'descending') : 'none') : null\"\n (keydown.enter)=\"!col.disabled && onSort(col)\"\n (keydown.space)=\"$event.preventDefault(); !col.disabled && onSort(col)\"\n >\n @if (col.label) {\n <span class=\"sui-table__header-label\">{{ col.label }}</span>\n }\n @if (col.sortable) {\n <span class=\"sui-table__sort-icon\" [class.sui-table__sort-icon--active]=\"isSortActive(col.key)\">\n @if (!isSortActive(col.key)) {\n <sui-icon name=\"expand-up-down-line\" [size]=\"20\" />\n } @else if (sortDir() === 'asc') {\n <sui-icon name=\"arrow-up-s-fill\" [size]=\"20\" />\n } @else {\n <sui-icon name=\"arrow-down-s-fill\" [size]=\"20\" />\n }\n </span>\n }\n </div>\n }\n </div>\n\n <!-- Body: Loading skeleton -->\n @if (loading()) {\n <div class=\"sui-table__body\">\n @for (sk of skeletonRows; track sk) {\n <div class=\"sui-table__row sui-table__row--skeleton\">\n @if (selectable()) {\n <div class=\"sui-table__cell sui-table__cell--checkbox\">\n <span class=\"sui-table__skeleton-box sui-table__skeleton-box--sm\"></span>\n </div>\n }\n @for (col of columns(); track col.key) {\n <div\n class=\"sui-table__cell\"\n [class.sui-table__cell--sticky]=\"col.sticky\"\n [style.width]=\"col.width ?? null\"\n [style.min-width]=\"colMinWidth(col)\"\n [style.max-width]=\"col.maxWidth ?? null\"\n [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n >\n <span class=\"sui-table__skeleton-box\"></span>\n </div>\n }\n </div>\n }\n </div>\n }\n\n <!-- Body: Empty state -->\n @else if (rows().length === 0) {\n <div class=\"sui-table__empty\">\n <sui-icon name=\"inbox-line\" [size]=\"40\" class=\"sui-table__empty-icon\" />\n <p class=\"sui-table__empty-msg\">{{ emptyMessage() }}</p>\n </div>\n }\n\n <!-- Body: Data rows -->\n @else {\n <div class=\"sui-table__body\">\n @for (row of rows(); track getRowKey(row, $index); let i = $index) {\n <div\n class=\"sui-table__row\"\n [class.sui-table__row--selected]=\"selectedRows().has(getRowKey(row, i))\"\n [class.sui-table__row--striped]=\"striped() && i % 2 === 1\"\n (click)=\"rowClicked.emit(row)\"\n >\n <!-- Checkbox column \u2014 compone sui-checkbox (canon) -->\n @if (selectable()) {\n <div class=\"sui-table__cell sui-table__cell--checkbox\" (click)=\"$event.stopPropagation()\">\n <sui-checkbox\n [checked]=\"selectedRows().has(getRowKey(row, i))\"\n (checkedChange)=\"toggleRow(row, i)\"\n aria-label=\"Seleccionar fila\"\n />\n </div>\n }\n\n <!-- Data columns -->\n @for (col of columns(); track col.key) {\n <div\n class=\"sui-table__cell\"\n [class.sui-table__cell--center]=\"col.align === 'center'\"\n [class.sui-table__cell--right]=\"col.align === 'right'\"\n [class.sui-table__cell--sticky]=\"col.sticky\"\n [class.sui-table__cell--leading]=\"cellPriority(col) === 'leading'\"\n [class.sui-table__cell--passive]=\"cellPriority(col) === 'passive'\"\n [class.sui-table__cell--none]=\"cellPriority(col) === 'none'\"\n [style.width]=\"col.width ?? null\"\n [style.min-width]=\"colMinWidth(col)\"\n [style.max-width]=\"col.maxWidth ?? null\"\n [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n >\n <!-- Custom template via SuiTableCellDirective -->\n @if (getTemplate(col.key); as tmpl) {\n <ng-container *ngTemplateOutlet=\"tmpl.templateRef; context: { $implicit: row }\"></ng-container>\n } @else if (getCellDescription(row, col); as desc) {\n <!-- Texto + sub-texto (Figma Priority=Leading, 2da l\u00EDnea XSmall) -->\n <span class=\"sui-table__cell-block\">\n <span\n class=\"sui-table__cell-text\"\n [class.sui-table__cell-text--truncate]=\"col.truncate\"\n [suiTooltip]=\"getCellTooltip(row, col)\"\n >{{ getCellValue(row, col.key) }}</span>\n <span class=\"sui-table__cell-desc\">{{ desc }}</span>\n </span>\n } @else if (col.truncate) {\n <!-- Texto truncado + tooltip con el valor completo -->\n <span\n class=\"sui-table__cell-text sui-table__cell-text--truncate\"\n [suiTooltip]=\"getCellTooltip(row, col)\"\n >{{ getCellValue(row, col.key) }}</span>\n } @else {\n <!-- Default text rendering -->\n <span class=\"sui-table__cell-text\">{{ getCellValue(row, col.key) }}</span>\n }\n </div>\n }\n </div>\n\n <!-- Row divider (not after last row) -->\n @if (i < rows().length - 1) {\n <div class=\"sui-table__divider\"></div>\n }\n }\n </div>\n }\n\n</div>\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;width:100%}.sui-table{display:flex;flex-direction:column;width:100%;overflow:hidden;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}:host([data-sui-sticky]) .sui-table__header,:host([data-sui-sticky]) .sui-table__row{overflow:visible}@media(max-width:767px){.sui-table{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;overscroll-behavior-y:none}}@media(max-width:767px)and (max-width:767px){.sui-table{scrollbar-width:none}.sui-table::-webkit-scrollbar{display:none;width:0;height:0}}@media(max-width:767px){.sui-table .sui-table__header,.sui-table .sui-table__body{min-width:max-content}.sui-table .sui-table__cell,.sui-table .sui-table__header-cell{min-width:120px}.sui-table .sui-table__cell--checkbox,.sui-table .sui-table__header-cell--checkbox{min-width:44px}.sui-table .sui-table__header-cell--empty{min-width:0}}:host([data-sui-sticky]) .sui-table{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;overscroll-behavior-y:none}@media(max-width:767px){:host([data-sui-sticky]) .sui-table{scrollbar-width:none}:host([data-sui-sticky]) .sui-table::-webkit-scrollbar{display:none;width:0;height:0}}:host([data-sui-sticky]) .sui-table .sui-table__header,:host([data-sui-sticky]) .sui-table .sui-table__body{min-width:max-content}:host([data-sui-sticky]) .sui-table .sui-table__cell,:host([data-sui-sticky]) .sui-table .sui-table__header-cell{min-width:120px}:host([data-sui-sticky]) .sui-table .sui-table__cell--checkbox,:host([data-sui-sticky]) .sui-table .sui-table__header-cell--checkbox{min-width:44px}:host([data-sui-sticky]) .sui-table .sui-table__header-cell--empty{min-width:0}.sui-table__header{display:flex;align-items:flex-start;background:var(--sui-bg-weak-50);border-radius:var(--sui-radius-8);overflow:hidden;min-height:36px;flex-shrink:0}.sui-table__header-cell{display:flex;align-items:center;gap:2px;padding:8px 12px;min-width:0;box-sizing:border-box;white-space:nowrap;overflow:hidden;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)}.sui-table__header-cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sui-table__header-cell--sortable:hover{color:var(--sui-text-strong-950)}.sui-table__header-cell--sortable:hover .sui-table__sort-icon{opacity:1}.sui-table__header-cell--sortable:focus-visible{outline:2px solid var(--sui-primary-alpha-10);outline-offset:-2px;border-radius:var(--sui-radius-4)}.sui-table__header-cell--sorted{color:var(--sui-text-strong-950)}.sui-table__header-cell--disabled{cursor:default;pointer-events:none;color:var(--sui-text-disabled-300)}.sui-table__header-cell--disabled .sui-table__sort-icon{color:var(--sui-text-disabled-300);opacity:1}.sui-table__header-cell--empty{flex-shrink:0;padding:0}.sui-table__header-cell--center{justify-content:center}.sui-table__header-cell--right{justify-content:flex-end}.sui-table__header-cell--checkbox{flex:0 0 44px;justify-content:center}.sui-table__header-cell--sticky{position:sticky;left:0;z-index:2;background:var(--sui-bg-weak-50)}.sui-table__header-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;min-width:0}.sui-table__sort-icon{display:inline-flex;align-items:center;flex-shrink:0;color:var(--sui-text-soft-400);opacity:.6;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-table__sort-icon--active{color:var(--sui-text-strong-950);opacity:1}.sui-table__body{display:flex;flex-direction:column;width:100%}.sui-table__row{display:flex;align-items:center;width:100%;border-radius:var(--sui-radius-12);overflow:hidden;cursor:pointer;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);box-sizing:border-box}.sui-table__row:hover,.sui-table__row:hover .sui-table__cell,.sui-table__row:active,.sui-table__row:active .sui-table__cell{background:var(--sui-bg-weak-50)}.sui-table__row--selected{background:var(--sui-primary-alpha-10)}.sui-table__row--selected:hover{background:var(--sui-primary-alpha-16)}.sui-table__row--striped{background:var(--sui-bg-weak-50)}.sui-table__row--skeleton{pointer-events:none;cursor:default}.sui-table__row--skeleton:hover{background:transparent}.sui-table__row--skeleton:hover .sui-table__cell{background:var(--sui-bg-white-0)}:host([data-sui-size=medium]) .sui-table__cell{min-height:64px;padding:12px 20px 12px 12px}:host([data-sui-size=small]) .sui-table__cell{min-height:48px;padding:8px 16px 8px 12px}:host([data-sui-size=large]) .sui-table__cell{min-height:80px;padding:16px 20px 16px 12px}:host([data-sui-size=xlarge]) .sui-table__cell{min-height:96px;padding:20px 20px 20px 12px}.sui-table__cell{display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden;box-sizing:border-box;background:var(--sui-bg-white-0);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);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)}.sui-table__cell--center{justify-content:center}.sui-table__cell--right{justify-content:flex-end}.sui-table__cell--checkbox{flex:0 0 44px;justify-content:center;padding:0 12px}.sui-table__cell--leading{font-weight:var(--sui-type-label-sm-weight);color:var(--sui-text-strong-950)}.sui-table__cell--passive{color:var(--sui-text-sub-600);font-weight:var(--sui-type-paragraph-sm-weight)}.sui-table__cell--sticky{position:sticky;left:0;z-index:1;background:var(--sui-bg-white-0)}.sui-table__row--selected .sui-table__cell{background:transparent}.sui-table__row--selected .sui-table__cell.sui-table__cell--sticky{background:var(--sui-primary-alpha-10)}.sui-table__cell-text{min-width:0}.sui-table__cell-text--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;display:block}.sui-table__cell-block{display:flex;flex-direction:column;min-width:0}.sui-table__cell-desc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing);color:var(--sui-text-sub-600)}.sui-table__cell--leading .sui-table__cell-text{font-weight:var(--sui-type-label-sm-weight)}.sui-table__cell--passive .sui-table__cell-text{font-weight:inherit;color:inherit}:host ::ng-deep .sui-table__leading-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;padding:10px;box-sizing:border-box;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);color:var(--sui-text-sub-600)}:host([data-sui-size=small]) ::ng-deep .sui-table__leading-icon{width:32px;height:32px;padding:6px}.sui-table__divider{width:100%;padding:1.5px 0;flex-shrink:0}.sui-table__divider:after{content:\"\";display:block;height:1px;background:var(--sui-stroke-soft-200)}.sui-table__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:12px;text-align:center}.sui-table__empty-icon{color:var(--sui-text-disabled-300)}.sui-table__empty-msg{margin:0;font-size:var(--sui-type-paragraph-sm-size);line-height:var(--sui-type-paragraph-sm-line);color:var(--sui-text-sub-600)}.sui-table__skeleton-box{display:block;height:14px;width:100%;max-width:180px;border-radius:var(--sui-radius-4);background:linear-gradient(90deg,var(--sui-bg-soft-200) 25%,var(--sui-bg-weak-50) 50%,var(--sui-bg-soft-200) 75%);background-size:400% 100%;animation:sui-skeleton-pulse 1.4s ease-in-out infinite}.sui-table__skeleton-box--sm{width:20px;max-width:20px;height:20px;border-radius:var(--sui-radius-4)}@keyframes sui-skeleton-pulse{0%{background-position:100% 50%}to{background-position:0% 50%}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "directive", type: SuiTooltip, selector: "[suiTooltip], [suiTooltipLarge]", inputs: ["suiTooltip", "suiTooltipLarge", "position", "suiTooltipSize", "theme", "delay", "disabled", "showArrow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14876
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTable, isStandalone: true, selector: "sui-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: true, isRequired: false, transformFunction: null }, sortKey: { classPropertyName: "sortKey", publicName: "sortKey", isSignal: true, isRequired: false, transformFunction: null }, sortDir: { classPropertyName: "sortDir", publicName: "sortDir", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedRows: "selectedRowsChange", sortKey: "sortKeyChange", sortDir: "sortDirChange", rowClicked: "rowClicked", sortChanged: "sortChanged" }, host: { properties: { "attr.data-sui-size": "size()", "attr.data-sui-striped": "striped() ? \"\" : null", "attr.data-sui-selectable": "selectable() ? \"\" : null", "attr.data-sui-loading": "loading() ? \"\" : null", "attr.data-sui-sticky": "hasStickyColumn() ? \"\" : null" } }, queries: [{ propertyName: "cellTemplates", predicate: SuiTableCellDirective }], viewQueries: [{ propertyName: "scrollEl", first: true, predicate: ["scrollEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \u2550\u2550 SUI Table \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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"sui-table\" #scrollEl>\n\n <!-- Header -->\n <div class=\"sui-table__header\">\n <!-- Checkbox header (selectable mode) \u2014 compone sui-checkbox (canon) -->\n @if (selectable()) {\n <div class=\"sui-table__header-cell sui-table__header-cell--checkbox\">\n <sui-checkbox\n [checked]=\"allSelected\"\n [indeterminate]=\"partialSelected\"\n (checkedChange)=\"toggleAll()\"\n (click)=\"$event.stopPropagation()\"\n aria-label=\"Seleccionar todas las filas\"\n />\n </div>\n }\n\n @for (col of columns(); track col.key) {\n <div\n class=\"sui-table__header-cell\"\n [class.sui-table__header-cell--sortable]=\"col.sortable && !col.disabled\"\n [class.sui-table__header-cell--sorted]=\"isSortActive(col.key)\"\n [class.sui-table__header-cell--disabled]=\"col.disabled\"\n [class.sui-table__header-cell--center]=\"col.align === 'center'\"\n [class.sui-table__header-cell--right]=\"col.align === 'right'\"\n [class.sui-table__header-cell--empty]=\"!col.label\"\n [class.sui-table__header-cell--sticky]=\"col.sticky\"\n [style.width]=\"col.width ?? null\"\n [style.min-width]=\"colMinWidth(col)\"\n [style.max-width]=\"col.maxWidth ?? null\"\n [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n (click)=\"!col.disabled && onSort(col)\"\n [attr.tabindex]=\"col.sortable && !col.disabled ? '0' : null\"\n [attr.role]=\"col.sortable ? 'columnheader' : null\"\n [attr.aria-disabled]=\"col.disabled ? 'true' : null\"\n [attr.aria-sort]=\"col.sortable ? (isSortActive(col.key) ? (sortDir() === 'asc' ? 'ascending' : 'descending') : 'none') : null\"\n (keydown.enter)=\"!col.disabled && onSort(col)\"\n (keydown.space)=\"$event.preventDefault(); !col.disabled && onSort(col)\"\n >\n @if (col.label) {\n <span class=\"sui-table__header-label\">{{ col.label }}</span>\n }\n @if (col.sortable) {\n <span class=\"sui-table__sort-icon\" [class.sui-table__sort-icon--active]=\"isSortActive(col.key)\">\n @if (!isSortActive(col.key)) {\n <sui-icon name=\"expand-up-down-line\" [size]=\"20\" />\n } @else if (sortDir() === 'asc') {\n <sui-icon name=\"arrow-up-s-fill\" [size]=\"20\" />\n } @else {\n <sui-icon name=\"arrow-down-s-fill\" [size]=\"20\" />\n }\n </span>\n }\n </div>\n }\n </div>\n\n <!-- Body: Loading skeleton -->\n @if (loading()) {\n <div class=\"sui-table__body\">\n @for (sk of skeletonRows; track sk) {\n <div class=\"sui-table__row sui-table__row--skeleton\">\n @if (selectable()) {\n <div class=\"sui-table__cell sui-table__cell--checkbox\">\n <span class=\"sui-table__skeleton-box sui-table__skeleton-box--sm\"></span>\n </div>\n }\n @for (col of columns(); track col.key) {\n <div\n class=\"sui-table__cell\"\n [class.sui-table__cell--sticky]=\"col.sticky\"\n [style.width]=\"col.width ?? null\"\n [style.min-width]=\"colMinWidth(col)\"\n [style.max-width]=\"col.maxWidth ?? null\"\n [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n >\n <span class=\"sui-table__skeleton-box\"></span>\n </div>\n }\n </div>\n }\n </div>\n }\n\n <!-- Body: Empty state -->\n @else if (rows().length === 0) {\n <div class=\"sui-table__empty\">\n <sui-icon name=\"inbox-line\" [size]=\"40\" class=\"sui-table__empty-icon\" />\n <p class=\"sui-table__empty-msg\">{{ emptyMessage() }}</p>\n </div>\n }\n\n <!-- Body: Data rows -->\n @else {\n <div class=\"sui-table__body\">\n @for (row of rows(); track getRowKey(row, $index); let i = $index) {\n <div\n class=\"sui-table__row\"\n [class.sui-table__row--selected]=\"selectedRows().has(getRowKey(row, i))\"\n [class.sui-table__row--striped]=\"striped() && i % 2 === 1\"\n (click)=\"rowClicked.emit(row)\"\n >\n <!-- Checkbox column \u2014 compone sui-checkbox (canon) -->\n @if (selectable()) {\n <div class=\"sui-table__cell sui-table__cell--checkbox\" (click)=\"$event.stopPropagation()\">\n <sui-checkbox\n [checked]=\"selectedRows().has(getRowKey(row, i))\"\n (checkedChange)=\"toggleRow(row, i)\"\n aria-label=\"Seleccionar fila\"\n />\n </div>\n }\n\n <!-- Data columns -->\n @for (col of columns(); track col.key) {\n <div\n class=\"sui-table__cell\"\n [class.sui-table__cell--center]=\"col.align === 'center'\"\n [class.sui-table__cell--right]=\"col.align === 'right'\"\n [class.sui-table__cell--sticky]=\"col.sticky\"\n [class.sui-table__cell--leading]=\"cellPriority(col) === 'leading'\"\n [class.sui-table__cell--passive]=\"cellPriority(col) === 'passive'\"\n [class.sui-table__cell--none]=\"cellPriority(col) === 'none'\"\n [style.width]=\"col.width ?? null\"\n [style.min-width]=\"colMinWidth(col)\"\n [style.max-width]=\"col.maxWidth ?? null\"\n [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n >\n <!-- Custom template via SuiTableCellDirective -->\n @if (getTemplate(col.key); as tmpl) {\n <ng-container *ngTemplateOutlet=\"tmpl.templateRef; context: { $implicit: row }\"></ng-container>\n } @else if (getCellDescription(row, col); as desc) {\n <!-- Texto + sub-texto (Figma Priority=Leading, 2da l\u00EDnea XSmall) -->\n <span class=\"sui-table__cell-block\">\n <span\n class=\"sui-table__cell-text\"\n [class.sui-table__cell-text--truncate]=\"col.truncate\"\n [suiTooltip]=\"getCellTooltip(row, col)\"\n >{{ getCellValue(row, col.key) }}</span>\n <span class=\"sui-table__cell-desc\">{{ desc }}</span>\n </span>\n } @else if (col.truncate) {\n <!-- Texto truncado + tooltip con el valor completo -->\n <span\n class=\"sui-table__cell-text sui-table__cell-text--truncate\"\n [suiTooltip]=\"getCellTooltip(row, col)\"\n >{{ getCellValue(row, col.key) }}</span>\n } @else {\n <!-- Default text rendering -->\n <span class=\"sui-table__cell-text\">{{ getCellValue(row, col.key) }}</span>\n }\n </div>\n }\n </div>\n\n <!-- Row divider (not after last row) -->\n @if (i < rows().length - 1) {\n <div class=\"sui-table__divider\"></div>\n }\n }\n </div>\n }\n\n</div>\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;width:100%}.sui-table{display:flex;flex-direction:column;width:100%;overflow:hidden;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}:host([data-sui-sticky]) .sui-table__header,:host([data-sui-sticky]) .sui-table__row{overflow:visible}@media(max-width:767px){.sui-table{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;overscroll-behavior-y:none}}@media(max-width:767px)and (max-width:767px){.sui-table{scrollbar-width:none}.sui-table::-webkit-scrollbar{display:none;width:0;height:0}}@media(max-width:767px){.sui-table .sui-table__header,.sui-table .sui-table__body{min-width:max-content}.sui-table .sui-table__cell,.sui-table .sui-table__header-cell{min-width:120px}.sui-table .sui-table__cell--checkbox,.sui-table .sui-table__header-cell--checkbox{min-width:44px}.sui-table .sui-table__header-cell--empty{min-width:0}}:host([data-sui-sticky]) .sui-table{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;overscroll-behavior-y:none}@media(max-width:767px){:host([data-sui-sticky]) .sui-table{scrollbar-width:none}:host([data-sui-sticky]) .sui-table::-webkit-scrollbar{display:none;width:0;height:0}}:host([data-sui-sticky]) .sui-table .sui-table__header,:host([data-sui-sticky]) .sui-table .sui-table__body{min-width:max-content}:host([data-sui-sticky]) .sui-table .sui-table__cell,:host([data-sui-sticky]) .sui-table .sui-table__header-cell{min-width:120px}:host([data-sui-sticky]) .sui-table .sui-table__cell--checkbox,:host([data-sui-sticky]) .sui-table .sui-table__header-cell--checkbox{min-width:44px}:host([data-sui-sticky]) .sui-table .sui-table__header-cell--empty{min-width:0}.sui-table__header{display:flex;align-items:flex-start;background:var(--sui-bg-weak-50);border-radius:var(--sui-radius-8);overflow:hidden;min-height:36px;flex-shrink:0}.sui-table__header-cell{display:flex;align-items:center;gap:2px;padding:8px 12px;min-width:0;box-sizing:border-box;white-space:nowrap;overflow:hidden;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)}.sui-table__header-cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sui-table__header-cell--sortable:hover{color:var(--sui-text-strong-950)}.sui-table__header-cell--sortable:hover .sui-table__sort-icon{opacity:1}.sui-table__header-cell--sortable:focus-visible{outline:2px solid var(--sui-primary-alpha-10);outline-offset:-2px;border-radius:var(--sui-radius-4)}.sui-table__header-cell--sorted{color:var(--sui-text-strong-950)}.sui-table__header-cell--disabled{cursor:default;pointer-events:none;color:var(--sui-text-disabled-300)}.sui-table__header-cell--disabled .sui-table__sort-icon{color:var(--sui-text-disabled-300);opacity:1}.sui-table__header-cell--empty{flex-shrink:0;padding:0}.sui-table__header-cell--center{justify-content:center}.sui-table__header-cell--right{justify-content:flex-end}.sui-table__header-cell--checkbox{flex:0 0 44px;justify-content:center}.sui-table__header-cell--sticky{position:sticky;left:0;z-index:2;background:var(--sui-bg-weak-50)}.sui-table__header-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;min-width:0}.sui-table__sort-icon{display:inline-flex;align-items:center;flex-shrink:0;color:var(--sui-text-soft-400);opacity:.6;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-table__sort-icon--active{color:var(--sui-text-strong-950);opacity:1}.sui-table__body{display:flex;flex-direction:column;width:100%}.sui-table__row{display:flex;align-items:center;width:100%;border-radius:var(--sui-radius-12);overflow:hidden;cursor:pointer;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);box-sizing:border-box}.sui-table__row:hover,.sui-table__row:hover .sui-table__cell,.sui-table__row:active,.sui-table__row:active .sui-table__cell{background:var(--sui-bg-weak-50)}.sui-table__row--selected{background:var(--sui-primary-alpha-10)}.sui-table__row--selected:hover{background:var(--sui-primary-alpha-16)}.sui-table__row--striped{background:var(--sui-bg-weak-50)}.sui-table__row--skeleton{pointer-events:none;cursor:default}.sui-table__row--skeleton:hover{background:transparent}.sui-table__row--skeleton:hover .sui-table__cell{background:var(--sui-bg-white-0)}:host([data-sui-size=medium]) .sui-table__cell{min-height:64px;padding:12px 20px 12px 12px}:host([data-sui-size=small]) .sui-table__cell{min-height:48px;padding:8px 16px 8px 12px}:host([data-sui-size=large]) .sui-table__cell{min-height:80px;padding:16px 20px 16px 12px}:host([data-sui-size=xlarge]) .sui-table__cell{min-height:96px;padding:20px 20px 20px 12px}.sui-table__cell{display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden;box-sizing:border-box;background:var(--sui-bg-white-0);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);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)}.sui-table__cell--center{justify-content:center}.sui-table__cell--right{justify-content:flex-end}.sui-table__cell--checkbox{flex:0 0 44px;justify-content:center;padding:0 12px}.sui-table__cell--leading{font-weight:var(--sui-type-label-sm-weight);color:var(--sui-text-strong-950)}.sui-table__cell--passive{color:var(--sui-text-sub-600);font-weight:var(--sui-type-paragraph-sm-weight)}.sui-table__cell--sticky{position:sticky;left:0;z-index:1;background:var(--sui-bg-white-0)}.sui-table__row--selected .sui-table__cell{background:transparent}.sui-table__row--selected .sui-table__cell.sui-table__cell--sticky{background:var(--sui-primary-alpha-10)}.sui-table__cell-text{min-width:0}.sui-table__cell-text--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;display:block}.sui-table__cell-block{display:flex;flex-direction:column;min-width:0}.sui-table__cell-desc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing);color:var(--sui-text-sub-600)}.sui-table__cell--leading .sui-table__cell-text{font-weight:var(--sui-type-label-sm-weight)}.sui-table__cell--passive .sui-table__cell-text{font-weight:inherit;color:inherit}:host ::ng-deep .sui-table__leading-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;padding:10px;box-sizing:border-box;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);color:var(--sui-text-sub-600)}:host([data-sui-size=small]) ::ng-deep .sui-table__leading-icon{width:32px;height:32px;padding:6px}.sui-table__divider{width:100%;padding:1.5px 0;flex-shrink:0;background:var(--sui-bg-white-0)}.sui-table__divider:after{content:\"\";display:block;height:1px;background:var(--sui-stroke-soft-200)}.sui-table__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:12px;text-align:center}.sui-table__empty-icon{color:var(--sui-text-disabled-300)}.sui-table__empty-msg{margin:0;font-size:var(--sui-type-paragraph-sm-size);line-height:var(--sui-type-paragraph-sm-line);color:var(--sui-text-sub-600)}.sui-table__skeleton-box{display:block;height:14px;width:100%;max-width:180px;border-radius:var(--sui-radius-4);background:linear-gradient(90deg,var(--sui-bg-soft-200) 25%,var(--sui-bg-weak-50) 50%,var(--sui-bg-soft-200) 75%);background-size:400% 100%;animation:sui-skeleton-pulse 1.4s ease-in-out infinite}.sui-table__skeleton-box--sm{width:20px;max-width:20px;height:20px;border-radius:var(--sui-radius-4)}@keyframes sui-skeleton-pulse{0%{background-position:100% 50%}to{background-position:0% 50%}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "directive", type: SuiTooltip, selector: "[suiTooltip], [suiTooltipLarge]", inputs: ["suiTooltip", "suiTooltipLarge", "position", "suiTooltipSize", "theme", "delay", "disabled", "showArrow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14827
14877
|
}
|
|
14828
14878
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTable, decorators: [{
|
|
14829
14879
|
type: Component,
|
|
@@ -14833,7 +14883,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
14833
14883
|
'[attr.data-sui-selectable]': 'selectable() ? "" : null',
|
|
14834
14884
|
'[attr.data-sui-loading]': 'loading() ? "" : null',
|
|
14835
14885
|
'[attr.data-sui-sticky]': 'hasStickyColumn() ? "" : null',
|
|
14836
|
-
}, template: "<!-- \u2550\u2550 SUI Table \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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"sui-table\" #scrollEl>\n\n <!-- Header -->\n <div class=\"sui-table__header\">\n <!-- Checkbox header (selectable mode) \u2014 compone sui-checkbox (canon) -->\n @if (selectable()) {\n <div class=\"sui-table__header-cell sui-table__header-cell--checkbox\">\n <sui-checkbox\n [checked]=\"allSelected\"\n [indeterminate]=\"partialSelected\"\n (checkedChange)=\"toggleAll()\"\n (click)=\"$event.stopPropagation()\"\n aria-label=\"Seleccionar todas las filas\"\n />\n </div>\n }\n\n @for (col of columns(); track col.key) {\n <div\n class=\"sui-table__header-cell\"\n [class.sui-table__header-cell--sortable]=\"col.sortable && !col.disabled\"\n [class.sui-table__header-cell--sorted]=\"isSortActive(col.key)\"\n [class.sui-table__header-cell--disabled]=\"col.disabled\"\n [class.sui-table__header-cell--center]=\"col.align === 'center'\"\n [class.sui-table__header-cell--right]=\"col.align === 'right'\"\n [class.sui-table__header-cell--empty]=\"!col.label\"\n [class.sui-table__header-cell--sticky]=\"col.sticky\"\n [style.width]=\"col.width ?? null\"\n [style.min-width]=\"colMinWidth(col)\"\n [style.max-width]=\"col.maxWidth ?? null\"\n [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n (click)=\"!col.disabled && onSort(col)\"\n [attr.tabindex]=\"col.sortable && !col.disabled ? '0' : null\"\n [attr.role]=\"col.sortable ? 'columnheader' : null\"\n [attr.aria-disabled]=\"col.disabled ? 'true' : null\"\n [attr.aria-sort]=\"col.sortable ? (isSortActive(col.key) ? (sortDir() === 'asc' ? 'ascending' : 'descending') : 'none') : null\"\n (keydown.enter)=\"!col.disabled && onSort(col)\"\n (keydown.space)=\"$event.preventDefault(); !col.disabled && onSort(col)\"\n >\n @if (col.label) {\n <span class=\"sui-table__header-label\">{{ col.label }}</span>\n }\n @if (col.sortable) {\n <span class=\"sui-table__sort-icon\" [class.sui-table__sort-icon--active]=\"isSortActive(col.key)\">\n @if (!isSortActive(col.key)) {\n <sui-icon name=\"expand-up-down-line\" [size]=\"20\" />\n } @else if (sortDir() === 'asc') {\n <sui-icon name=\"arrow-up-s-fill\" [size]=\"20\" />\n } @else {\n <sui-icon name=\"arrow-down-s-fill\" [size]=\"20\" />\n }\n </span>\n }\n </div>\n }\n </div>\n\n <!-- Body: Loading skeleton -->\n @if (loading()) {\n <div class=\"sui-table__body\">\n @for (sk of skeletonRows; track sk) {\n <div class=\"sui-table__row sui-table__row--skeleton\">\n @if (selectable()) {\n <div class=\"sui-table__cell sui-table__cell--checkbox\">\n <span class=\"sui-table__skeleton-box sui-table__skeleton-box--sm\"></span>\n </div>\n }\n @for (col of columns(); track col.key) {\n <div\n class=\"sui-table__cell\"\n [class.sui-table__cell--sticky]=\"col.sticky\"\n [style.width]=\"col.width ?? null\"\n [style.min-width]=\"colMinWidth(col)\"\n [style.max-width]=\"col.maxWidth ?? null\"\n [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n >\n <span class=\"sui-table__skeleton-box\"></span>\n </div>\n }\n </div>\n }\n </div>\n }\n\n <!-- Body: Empty state -->\n @else if (rows().length === 0) {\n <div class=\"sui-table__empty\">\n <sui-icon name=\"inbox-line\" [size]=\"40\" class=\"sui-table__empty-icon\" />\n <p class=\"sui-table__empty-msg\">{{ emptyMessage() }}</p>\n </div>\n }\n\n <!-- Body: Data rows -->\n @else {\n <div class=\"sui-table__body\">\n @for (row of rows(); track getRowKey(row, $index); let i = $index) {\n <div\n class=\"sui-table__row\"\n [class.sui-table__row--selected]=\"selectedRows().has(getRowKey(row, i))\"\n [class.sui-table__row--striped]=\"striped() && i % 2 === 1\"\n (click)=\"rowClicked.emit(row)\"\n >\n <!-- Checkbox column \u2014 compone sui-checkbox (canon) -->\n @if (selectable()) {\n <div class=\"sui-table__cell sui-table__cell--checkbox\" (click)=\"$event.stopPropagation()\">\n <sui-checkbox\n [checked]=\"selectedRows().has(getRowKey(row, i))\"\n (checkedChange)=\"toggleRow(row, i)\"\n aria-label=\"Seleccionar fila\"\n />\n </div>\n }\n\n <!-- Data columns -->\n @for (col of columns(); track col.key) {\n <div\n class=\"sui-table__cell\"\n [class.sui-table__cell--center]=\"col.align === 'center'\"\n [class.sui-table__cell--right]=\"col.align === 'right'\"\n [class.sui-table__cell--sticky]=\"col.sticky\"\n [class.sui-table__cell--leading]=\"cellPriority(col) === 'leading'\"\n [class.sui-table__cell--passive]=\"cellPriority(col) === 'passive'\"\n [class.sui-table__cell--none]=\"cellPriority(col) === 'none'\"\n [style.width]=\"col.width ?? null\"\n [style.min-width]=\"colMinWidth(col)\"\n [style.max-width]=\"col.maxWidth ?? null\"\n [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n >\n <!-- Custom template via SuiTableCellDirective -->\n @if (getTemplate(col.key); as tmpl) {\n <ng-container *ngTemplateOutlet=\"tmpl.templateRef; context: { $implicit: row }\"></ng-container>\n } @else if (getCellDescription(row, col); as desc) {\n <!-- Texto + sub-texto (Figma Priority=Leading, 2da l\u00EDnea XSmall) -->\n <span class=\"sui-table__cell-block\">\n <span\n class=\"sui-table__cell-text\"\n [class.sui-table__cell-text--truncate]=\"col.truncate\"\n [suiTooltip]=\"getCellTooltip(row, col)\"\n >{{ getCellValue(row, col.key) }}</span>\n <span class=\"sui-table__cell-desc\">{{ desc }}</span>\n </span>\n } @else if (col.truncate) {\n <!-- Texto truncado + tooltip con el valor completo -->\n <span\n class=\"sui-table__cell-text sui-table__cell-text--truncate\"\n [suiTooltip]=\"getCellTooltip(row, col)\"\n >{{ getCellValue(row, col.key) }}</span>\n } @else {\n <!-- Default text rendering -->\n <span class=\"sui-table__cell-text\">{{ getCellValue(row, col.key) }}</span>\n }\n </div>\n }\n </div>\n\n <!-- Row divider (not after last row) -->\n @if (i < rows().length - 1) {\n <div class=\"sui-table__divider\"></div>\n }\n }\n </div>\n }\n\n</div>\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;width:100%}.sui-table{display:flex;flex-direction:column;width:100%;overflow:hidden;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}:host([data-sui-sticky]) .sui-table__header,:host([data-sui-sticky]) .sui-table__row{overflow:visible}@media(max-width:767px){.sui-table{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;overscroll-behavior-y:none}}@media(max-width:767px)and (max-width:767px){.sui-table{scrollbar-width:none}.sui-table::-webkit-scrollbar{display:none;width:0;height:0}}@media(max-width:767px){.sui-table .sui-table__header,.sui-table .sui-table__body{min-width:max-content}.sui-table .sui-table__cell,.sui-table .sui-table__header-cell{min-width:120px}.sui-table .sui-table__cell--checkbox,.sui-table .sui-table__header-cell--checkbox{min-width:44px}.sui-table .sui-table__header-cell--empty{min-width:0}}:host([data-sui-sticky]) .sui-table{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;overscroll-behavior-y:none}@media(max-width:767px){:host([data-sui-sticky]) .sui-table{scrollbar-width:none}:host([data-sui-sticky]) .sui-table::-webkit-scrollbar{display:none;width:0;height:0}}:host([data-sui-sticky]) .sui-table .sui-table__header,:host([data-sui-sticky]) .sui-table .sui-table__body{min-width:max-content}:host([data-sui-sticky]) .sui-table .sui-table__cell,:host([data-sui-sticky]) .sui-table .sui-table__header-cell{min-width:120px}:host([data-sui-sticky]) .sui-table .sui-table__cell--checkbox,:host([data-sui-sticky]) .sui-table .sui-table__header-cell--checkbox{min-width:44px}:host([data-sui-sticky]) .sui-table .sui-table__header-cell--empty{min-width:0}.sui-table__header{display:flex;align-items:flex-start;background:var(--sui-bg-weak-50);border-radius:var(--sui-radius-8);overflow:hidden;min-height:36px;flex-shrink:0}.sui-table__header-cell{display:flex;align-items:center;gap:2px;padding:8px 12px;min-width:0;box-sizing:border-box;white-space:nowrap;overflow:hidden;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)}.sui-table__header-cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sui-table__header-cell--sortable:hover{color:var(--sui-text-strong-950)}.sui-table__header-cell--sortable:hover .sui-table__sort-icon{opacity:1}.sui-table__header-cell--sortable:focus-visible{outline:2px solid var(--sui-primary-alpha-10);outline-offset:-2px;border-radius:var(--sui-radius-4)}.sui-table__header-cell--sorted{color:var(--sui-text-strong-950)}.sui-table__header-cell--disabled{cursor:default;pointer-events:none;color:var(--sui-text-disabled-300)}.sui-table__header-cell--disabled .sui-table__sort-icon{color:var(--sui-text-disabled-300);opacity:1}.sui-table__header-cell--empty{flex-shrink:0;padding:0}.sui-table__header-cell--center{justify-content:center}.sui-table__header-cell--right{justify-content:flex-end}.sui-table__header-cell--checkbox{flex:0 0 44px;justify-content:center}.sui-table__header-cell--sticky{position:sticky;left:0;z-index:2;background:var(--sui-bg-weak-50)}.sui-table__header-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;min-width:0}.sui-table__sort-icon{display:inline-flex;align-items:center;flex-shrink:0;color:var(--sui-text-soft-400);opacity:.6;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-table__sort-icon--active{color:var(--sui-text-strong-950);opacity:1}.sui-table__body{display:flex;flex-direction:column;width:100%}.sui-table__row{display:flex;align-items:center;width:100%;border-radius:var(--sui-radius-12);overflow:hidden;cursor:pointer;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);box-sizing:border-box}.sui-table__row:hover,.sui-table__row:hover .sui-table__cell,.sui-table__row:active,.sui-table__row:active .sui-table__cell{background:var(--sui-bg-weak-50)}.sui-table__row--selected{background:var(--sui-primary-alpha-10)}.sui-table__row--selected:hover{background:var(--sui-primary-alpha-16)}.sui-table__row--striped{background:var(--sui-bg-weak-50)}.sui-table__row--skeleton{pointer-events:none;cursor:default}.sui-table__row--skeleton:hover{background:transparent}.sui-table__row--skeleton:hover .sui-table__cell{background:var(--sui-bg-white-0)}:host([data-sui-size=medium]) .sui-table__cell{min-height:64px;padding:12px 20px 12px 12px}:host([data-sui-size=small]) .sui-table__cell{min-height:48px;padding:8px 16px 8px 12px}:host([data-sui-size=large]) .sui-table__cell{min-height:80px;padding:16px 20px 16px 12px}:host([data-sui-size=xlarge]) .sui-table__cell{min-height:96px;padding:20px 20px 20px 12px}.sui-table__cell{display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden;box-sizing:border-box;background:var(--sui-bg-white-0);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);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)}.sui-table__cell--center{justify-content:center}.sui-table__cell--right{justify-content:flex-end}.sui-table__cell--checkbox{flex:0 0 44px;justify-content:center;padding:0 12px}.sui-table__cell--leading{font-weight:var(--sui-type-label-sm-weight);color:var(--sui-text-strong-950)}.sui-table__cell--passive{color:var(--sui-text-sub-600);font-weight:var(--sui-type-paragraph-sm-weight)}.sui-table__cell--sticky{position:sticky;left:0;z-index:1;background:var(--sui-bg-white-0)}.sui-table__row--selected .sui-table__cell{background:transparent}.sui-table__row--selected .sui-table__cell.sui-table__cell--sticky{background:var(--sui-primary-alpha-10)}.sui-table__cell-text{min-width:0}.sui-table__cell-text--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;display:block}.sui-table__cell-block{display:flex;flex-direction:column;min-width:0}.sui-table__cell-desc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing);color:var(--sui-text-sub-600)}.sui-table__cell--leading .sui-table__cell-text{font-weight:var(--sui-type-label-sm-weight)}.sui-table__cell--passive .sui-table__cell-text{font-weight:inherit;color:inherit}:host ::ng-deep .sui-table__leading-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;padding:10px;box-sizing:border-box;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);color:var(--sui-text-sub-600)}:host([data-sui-size=small]) ::ng-deep .sui-table__leading-icon{width:32px;height:32px;padding:6px}.sui-table__divider{width:100%;padding:1.5px 0;flex-shrink:0}.sui-table__divider:after{content:\"\";display:block;height:1px;background:var(--sui-stroke-soft-200)}.sui-table__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:12px;text-align:center}.sui-table__empty-icon{color:var(--sui-text-disabled-300)}.sui-table__empty-msg{margin:0;font-size:var(--sui-type-paragraph-sm-size);line-height:var(--sui-type-paragraph-sm-line);color:var(--sui-text-sub-600)}.sui-table__skeleton-box{display:block;height:14px;width:100%;max-width:180px;border-radius:var(--sui-radius-4);background:linear-gradient(90deg,var(--sui-bg-soft-200) 25%,var(--sui-bg-weak-50) 50%,var(--sui-bg-soft-200) 75%);background-size:400% 100%;animation:sui-skeleton-pulse 1.4s ease-in-out infinite}.sui-table__skeleton-box--sm{width:20px;max-width:20px;height:20px;border-radius:var(--sui-radius-4)}@keyframes sui-skeleton-pulse{0%{background-position:100% 50%}to{background-position:0% 50%}}\n"] }]
|
|
14886
|
+
}, template: "<!-- \u2550\u2550 SUI Table \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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"sui-table\" #scrollEl>\n\n <!-- Header -->\n <div class=\"sui-table__header\">\n <!-- Checkbox header (selectable mode) \u2014 compone sui-checkbox (canon) -->\n @if (selectable()) {\n <div class=\"sui-table__header-cell sui-table__header-cell--checkbox\">\n <sui-checkbox\n [checked]=\"allSelected\"\n [indeterminate]=\"partialSelected\"\n (checkedChange)=\"toggleAll()\"\n (click)=\"$event.stopPropagation()\"\n aria-label=\"Seleccionar todas las filas\"\n />\n </div>\n }\n\n @for (col of columns(); track col.key) {\n <div\n class=\"sui-table__header-cell\"\n [class.sui-table__header-cell--sortable]=\"col.sortable && !col.disabled\"\n [class.sui-table__header-cell--sorted]=\"isSortActive(col.key)\"\n [class.sui-table__header-cell--disabled]=\"col.disabled\"\n [class.sui-table__header-cell--center]=\"col.align === 'center'\"\n [class.sui-table__header-cell--right]=\"col.align === 'right'\"\n [class.sui-table__header-cell--empty]=\"!col.label\"\n [class.sui-table__header-cell--sticky]=\"col.sticky\"\n [style.width]=\"col.width ?? null\"\n [style.min-width]=\"colMinWidth(col)\"\n [style.max-width]=\"col.maxWidth ?? null\"\n [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n (click)=\"!col.disabled && onSort(col)\"\n [attr.tabindex]=\"col.sortable && !col.disabled ? '0' : null\"\n [attr.role]=\"col.sortable ? 'columnheader' : null\"\n [attr.aria-disabled]=\"col.disabled ? 'true' : null\"\n [attr.aria-sort]=\"col.sortable ? (isSortActive(col.key) ? (sortDir() === 'asc' ? 'ascending' : 'descending') : 'none') : null\"\n (keydown.enter)=\"!col.disabled && onSort(col)\"\n (keydown.space)=\"$event.preventDefault(); !col.disabled && onSort(col)\"\n >\n @if (col.label) {\n <span class=\"sui-table__header-label\">{{ col.label }}</span>\n }\n @if (col.sortable) {\n <span class=\"sui-table__sort-icon\" [class.sui-table__sort-icon--active]=\"isSortActive(col.key)\">\n @if (!isSortActive(col.key)) {\n <sui-icon name=\"expand-up-down-line\" [size]=\"20\" />\n } @else if (sortDir() === 'asc') {\n <sui-icon name=\"arrow-up-s-fill\" [size]=\"20\" />\n } @else {\n <sui-icon name=\"arrow-down-s-fill\" [size]=\"20\" />\n }\n </span>\n }\n </div>\n }\n </div>\n\n <!-- Body: Loading skeleton -->\n @if (loading()) {\n <div class=\"sui-table__body\">\n @for (sk of skeletonRows; track sk) {\n <div class=\"sui-table__row sui-table__row--skeleton\">\n @if (selectable()) {\n <div class=\"sui-table__cell sui-table__cell--checkbox\">\n <span class=\"sui-table__skeleton-box sui-table__skeleton-box--sm\"></span>\n </div>\n }\n @for (col of columns(); track col.key) {\n <div\n class=\"sui-table__cell\"\n [class.sui-table__cell--sticky]=\"col.sticky\"\n [style.width]=\"col.width ?? null\"\n [style.min-width]=\"colMinWidth(col)\"\n [style.max-width]=\"col.maxWidth ?? null\"\n [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n >\n <span class=\"sui-table__skeleton-box\"></span>\n </div>\n }\n </div>\n }\n </div>\n }\n\n <!-- Body: Empty state -->\n @else if (rows().length === 0) {\n <div class=\"sui-table__empty\">\n <sui-icon name=\"inbox-line\" [size]=\"40\" class=\"sui-table__empty-icon\" />\n <p class=\"sui-table__empty-msg\">{{ emptyMessage() }}</p>\n </div>\n }\n\n <!-- Body: Data rows -->\n @else {\n <div class=\"sui-table__body\">\n @for (row of rows(); track getRowKey(row, $index); let i = $index) {\n <div\n class=\"sui-table__row\"\n [class.sui-table__row--selected]=\"selectedRows().has(getRowKey(row, i))\"\n [class.sui-table__row--striped]=\"striped() && i % 2 === 1\"\n (click)=\"rowClicked.emit(row)\"\n >\n <!-- Checkbox column \u2014 compone sui-checkbox (canon) -->\n @if (selectable()) {\n <div class=\"sui-table__cell sui-table__cell--checkbox\" (click)=\"$event.stopPropagation()\">\n <sui-checkbox\n [checked]=\"selectedRows().has(getRowKey(row, i))\"\n (checkedChange)=\"toggleRow(row, i)\"\n aria-label=\"Seleccionar fila\"\n />\n </div>\n }\n\n <!-- Data columns -->\n @for (col of columns(); track col.key) {\n <div\n class=\"sui-table__cell\"\n [class.sui-table__cell--center]=\"col.align === 'center'\"\n [class.sui-table__cell--right]=\"col.align === 'right'\"\n [class.sui-table__cell--sticky]=\"col.sticky\"\n [class.sui-table__cell--leading]=\"cellPriority(col) === 'leading'\"\n [class.sui-table__cell--passive]=\"cellPriority(col) === 'passive'\"\n [class.sui-table__cell--none]=\"cellPriority(col) === 'none'\"\n [style.width]=\"col.width ?? null\"\n [style.min-width]=\"colMinWidth(col)\"\n [style.max-width]=\"col.maxWidth ?? null\"\n [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n >\n <!-- Custom template via SuiTableCellDirective -->\n @if (getTemplate(col.key); as tmpl) {\n <ng-container *ngTemplateOutlet=\"tmpl.templateRef; context: { $implicit: row }\"></ng-container>\n } @else if (getCellDescription(row, col); as desc) {\n <!-- Texto + sub-texto (Figma Priority=Leading, 2da l\u00EDnea XSmall) -->\n <span class=\"sui-table__cell-block\">\n <span\n class=\"sui-table__cell-text\"\n [class.sui-table__cell-text--truncate]=\"col.truncate\"\n [suiTooltip]=\"getCellTooltip(row, col)\"\n >{{ getCellValue(row, col.key) }}</span>\n <span class=\"sui-table__cell-desc\">{{ desc }}</span>\n </span>\n } @else if (col.truncate) {\n <!-- Texto truncado + tooltip con el valor completo -->\n <span\n class=\"sui-table__cell-text sui-table__cell-text--truncate\"\n [suiTooltip]=\"getCellTooltip(row, col)\"\n >{{ getCellValue(row, col.key) }}</span>\n } @else {\n <!-- Default text rendering -->\n <span class=\"sui-table__cell-text\">{{ getCellValue(row, col.key) }}</span>\n }\n </div>\n }\n </div>\n\n <!-- Row divider (not after last row) -->\n @if (i < rows().length - 1) {\n <div class=\"sui-table__divider\"></div>\n }\n }\n </div>\n }\n\n</div>\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;width:100%}.sui-table{display:flex;flex-direction:column;width:100%;overflow:hidden;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}:host([data-sui-sticky]) .sui-table__header,:host([data-sui-sticky]) .sui-table__row{overflow:visible}@media(max-width:767px){.sui-table{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;overscroll-behavior-y:none}}@media(max-width:767px)and (max-width:767px){.sui-table{scrollbar-width:none}.sui-table::-webkit-scrollbar{display:none;width:0;height:0}}@media(max-width:767px){.sui-table .sui-table__header,.sui-table .sui-table__body{min-width:max-content}.sui-table .sui-table__cell,.sui-table .sui-table__header-cell{min-width:120px}.sui-table .sui-table__cell--checkbox,.sui-table .sui-table__header-cell--checkbox{min-width:44px}.sui-table .sui-table__header-cell--empty{min-width:0}}:host([data-sui-sticky]) .sui-table{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;overscroll-behavior-y:none}@media(max-width:767px){:host([data-sui-sticky]) .sui-table{scrollbar-width:none}:host([data-sui-sticky]) .sui-table::-webkit-scrollbar{display:none;width:0;height:0}}:host([data-sui-sticky]) .sui-table .sui-table__header,:host([data-sui-sticky]) .sui-table .sui-table__body{min-width:max-content}:host([data-sui-sticky]) .sui-table .sui-table__cell,:host([data-sui-sticky]) .sui-table .sui-table__header-cell{min-width:120px}:host([data-sui-sticky]) .sui-table .sui-table__cell--checkbox,:host([data-sui-sticky]) .sui-table .sui-table__header-cell--checkbox{min-width:44px}:host([data-sui-sticky]) .sui-table .sui-table__header-cell--empty{min-width:0}.sui-table__header{display:flex;align-items:flex-start;background:var(--sui-bg-weak-50);border-radius:var(--sui-radius-8);overflow:hidden;min-height:36px;flex-shrink:0}.sui-table__header-cell{display:flex;align-items:center;gap:2px;padding:8px 12px;min-width:0;box-sizing:border-box;white-space:nowrap;overflow:hidden;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)}.sui-table__header-cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sui-table__header-cell--sortable:hover{color:var(--sui-text-strong-950)}.sui-table__header-cell--sortable:hover .sui-table__sort-icon{opacity:1}.sui-table__header-cell--sortable:focus-visible{outline:2px solid var(--sui-primary-alpha-10);outline-offset:-2px;border-radius:var(--sui-radius-4)}.sui-table__header-cell--sorted{color:var(--sui-text-strong-950)}.sui-table__header-cell--disabled{cursor:default;pointer-events:none;color:var(--sui-text-disabled-300)}.sui-table__header-cell--disabled .sui-table__sort-icon{color:var(--sui-text-disabled-300);opacity:1}.sui-table__header-cell--empty{flex-shrink:0;padding:0}.sui-table__header-cell--center{justify-content:center}.sui-table__header-cell--right{justify-content:flex-end}.sui-table__header-cell--checkbox{flex:0 0 44px;justify-content:center}.sui-table__header-cell--sticky{position:sticky;left:0;z-index:2;background:var(--sui-bg-weak-50)}.sui-table__header-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;min-width:0}.sui-table__sort-icon{display:inline-flex;align-items:center;flex-shrink:0;color:var(--sui-text-soft-400);opacity:.6;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-table__sort-icon--active{color:var(--sui-text-strong-950);opacity:1}.sui-table__body{display:flex;flex-direction:column;width:100%}.sui-table__row{display:flex;align-items:center;width:100%;border-radius:var(--sui-radius-12);overflow:hidden;cursor:pointer;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);box-sizing:border-box}.sui-table__row:hover,.sui-table__row:hover .sui-table__cell,.sui-table__row:active,.sui-table__row:active .sui-table__cell{background:var(--sui-bg-weak-50)}.sui-table__row--selected{background:var(--sui-primary-alpha-10)}.sui-table__row--selected:hover{background:var(--sui-primary-alpha-16)}.sui-table__row--striped{background:var(--sui-bg-weak-50)}.sui-table__row--skeleton{pointer-events:none;cursor:default}.sui-table__row--skeleton:hover{background:transparent}.sui-table__row--skeleton:hover .sui-table__cell{background:var(--sui-bg-white-0)}:host([data-sui-size=medium]) .sui-table__cell{min-height:64px;padding:12px 20px 12px 12px}:host([data-sui-size=small]) .sui-table__cell{min-height:48px;padding:8px 16px 8px 12px}:host([data-sui-size=large]) .sui-table__cell{min-height:80px;padding:16px 20px 16px 12px}:host([data-sui-size=xlarge]) .sui-table__cell{min-height:96px;padding:20px 20px 20px 12px}.sui-table__cell{display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden;box-sizing:border-box;background:var(--sui-bg-white-0);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);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)}.sui-table__cell--center{justify-content:center}.sui-table__cell--right{justify-content:flex-end}.sui-table__cell--checkbox{flex:0 0 44px;justify-content:center;padding:0 12px}.sui-table__cell--leading{font-weight:var(--sui-type-label-sm-weight);color:var(--sui-text-strong-950)}.sui-table__cell--passive{color:var(--sui-text-sub-600);font-weight:var(--sui-type-paragraph-sm-weight)}.sui-table__cell--sticky{position:sticky;left:0;z-index:1;background:var(--sui-bg-white-0)}.sui-table__row--selected .sui-table__cell{background:transparent}.sui-table__row--selected .sui-table__cell.sui-table__cell--sticky{background:var(--sui-primary-alpha-10)}.sui-table__cell-text{min-width:0}.sui-table__cell-text--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;display:block}.sui-table__cell-block{display:flex;flex-direction:column;min-width:0}.sui-table__cell-desc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing);color:var(--sui-text-sub-600)}.sui-table__cell--leading .sui-table__cell-text{font-weight:var(--sui-type-label-sm-weight)}.sui-table__cell--passive .sui-table__cell-text{font-weight:inherit;color:inherit}:host ::ng-deep .sui-table__leading-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;padding:10px;box-sizing:border-box;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);color:var(--sui-text-sub-600)}:host([data-sui-size=small]) ::ng-deep .sui-table__leading-icon{width:32px;height:32px;padding:6px}.sui-table__divider{width:100%;padding:1.5px 0;flex-shrink:0;background:var(--sui-bg-white-0)}.sui-table__divider:after{content:\"\";display:block;height:1px;background:var(--sui-stroke-soft-200)}.sui-table__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:12px;text-align:center}.sui-table__empty-icon{color:var(--sui-text-disabled-300)}.sui-table__empty-msg{margin:0;font-size:var(--sui-type-paragraph-sm-size);line-height:var(--sui-type-paragraph-sm-line);color:var(--sui-text-sub-600)}.sui-table__skeleton-box{display:block;height:14px;width:100%;max-width:180px;border-radius:var(--sui-radius-4);background:linear-gradient(90deg,var(--sui-bg-soft-200) 25%,var(--sui-bg-weak-50) 50%,var(--sui-bg-soft-200) 75%);background-size:400% 100%;animation:sui-skeleton-pulse 1.4s ease-in-out infinite}.sui-table__skeleton-box--sm{width:20px;max-width:20px;height:20px;border-radius:var(--sui-radius-4)}@keyframes sui-skeleton-pulse{0%{background-position:100% 50%}to{background-position:0% 50%}}\n"] }]
|
|
14837
14887
|
}], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], selectedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRows", required: false }] }, { type: i0.Output, args: ["selectedRowsChange"] }], sortKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortKey", required: false }] }, { type: i0.Output, args: ["sortKeyChange"] }], sortDir: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDir", required: false }] }, { type: i0.Output, args: ["sortDirChange"] }], rowClicked: [{ type: i0.Output, args: ["rowClicked"] }], sortChanged: [{ type: i0.Output, args: ["sortChanged"] }], scrollEl: [{ type: i0.ViewChild, args: ['scrollEl', { isSignal: true }] }], cellTemplates: [{
|
|
14838
14888
|
type: ContentChildren,
|
|
14839
14889
|
args: [SuiTableCellDirective]
|