@ajuarezso/sui-design-system 0.2.3 → 0.2.4
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
|