@litigiovirtual/ius-design-components 2.1.7 → 2.1.8
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.
|
@@ -1289,7 +1289,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
1289
1289
|
type: Output
|
|
1290
1290
|
}] } });
|
|
1291
1291
|
|
|
1292
|
-
let uid$
|
|
1292
|
+
let uid$c = 0;
|
|
1293
1293
|
/**
|
|
1294
1294
|
* TextField — Ius Design v2.
|
|
1295
1295
|
*
|
|
@@ -1328,7 +1328,7 @@ class TextFieldComponent {
|
|
|
1328
1328
|
...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
|
|
1329
1329
|
this.revealed = signal(false, /* @ts-ignore */
|
|
1330
1330
|
...(ngDevMode ? [{ debugName: "revealed" }] : /* istanbul ignore next */ []));
|
|
1331
|
-
this.inputId = `ius-tf-${uid$
|
|
1331
|
+
this.inputId = `ius-tf-${uid$c++}`;
|
|
1332
1332
|
this.helpId = `${this.inputId}-help`;
|
|
1333
1333
|
this.onChange = () => { };
|
|
1334
1334
|
this.onTouched = () => { };
|
|
@@ -1467,7 +1467,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
1467
1467
|
type: Output
|
|
1468
1468
|
}] } });
|
|
1469
1469
|
|
|
1470
|
-
let uid$
|
|
1470
|
+
let uid$b = 0;
|
|
1471
1471
|
/** Reparte una cadena en `length` casillas (1 carácter por casilla). */
|
|
1472
1472
|
function toChars(str, length) {
|
|
1473
1473
|
const out = new Array(length).fill('');
|
|
@@ -1527,7 +1527,7 @@ class CodeFieldComponent {
|
|
|
1527
1527
|
...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
|
|
1528
1528
|
this.indexes = computed(() => this.chars().map((_, i) => i), /* @ts-ignore */
|
|
1529
1529
|
...(ngDevMode ? [{ debugName: "indexes" }] : /* istanbul ignore next */ []));
|
|
1530
|
-
this.baseId = `ius-cf-${uid$
|
|
1530
|
+
this.baseId = `ius-cf-${uid$b++}`;
|
|
1531
1531
|
this.cellRefs = viewChildren('cell', /* @ts-ignore */
|
|
1532
1532
|
...(ngDevMode ? [{ debugName: "cellRefs" }] : /* istanbul ignore next */ []));
|
|
1533
1533
|
this.onChange = () => { };
|
|
@@ -1929,7 +1929,7 @@ class CountdownRingComponent {
|
|
|
1929
1929
|
inject(DestroyRef).onDestroy(() => this.clock.destroy());
|
|
1930
1930
|
}
|
|
1931
1931
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CountdownRingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1932
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: CountdownRingComponent, isStandalone: true, selector: "ius-countdown-ring", inputs: { progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, seconds: { classPropertyName: "seconds", publicName: "seconds", isSignal: true, isRequired: false, transformFunction: null }, running: { classPropertyName: "running", publicName: "running", isSignal: true, isRequired: false, transformFunction: null }, paused: { classPropertyName: "paused", publicName: "paused", isSignal: true, isRequired: false, transformFunction: null }, inverse: { classPropertyName: "inverse", publicName: "inverse", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { completed: "completed" }, host: { attributes: { "role": "img" }, properties: { "attr.data-size": "size()", "attr.data-eased": "isControlled() ? 'true' : null", "attr.aria-label": "ariaLabel() || null", "style.--_cdr-arc": "toneVars().arc", "style.--_cdr-trk": "toneVars().trk", "style.width.px": "dim().d", "style.height.px": "dim().d" }, classAttribute: "ius-cdring" }, ngImport: i0, template: "<svg\r\n class=\"ius-cdring__svg\"\r\n [attr.width]=\"dim().d\"\r\n [attr.height]=\"dim().d\"\r\n [attr.viewBox]=\"'0 0 ' + dim().d + ' ' + dim().d\"\r\n>\r\n <circle\r\n class=\"ius-cdring__trk\"\r\n [attr.cx]=\"dim().d / 2\"\r\n [attr.cy]=\"dim().d / 2\"\r\n [attr.r]=\"ringR()\"\r\n [attr.stroke-width]=\"dim().s\"\r\n pathLength=\"100\"\r\n />\r\n @if (arcLen() > 0) {\r\n <circle\r\n class=\"ius-cdring__arc\"\r\n [attr.cx]=\"dim().d / 2\"\r\n [attr.cy]=\"dim().d / 2\"\r\n [attr.r]=\"ringR()\"\r\n [attr.stroke-width]=\"dim().s\"\r\n pathLength=\"100\"\r\n [style.stroke-dasharray]=\"dashArray()\"\r\n />\r\n }\r\n</svg>\r\n\r\n<span class=\"ius-cdring__center\"><ng-content /></span>\r\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;vertical-align:middle}.ius-cdring__svg{display:block;transform:rotate(-90deg)}.ius-cdring__svg circle{fill:none}.ius-cdring__trk{stroke:var(--_cdr-trk)}.ius-cdring__arc{stroke:var(--_cdr-arc);stroke-linecap:round}:host([data-eased=true]) .ius-cdring__arc{transition:stroke-dasharray var(--ius-duration-base, .22s) var(--ius-ease-standard)}@media(prefers-reduced-motion:reduce){:host([data-eased=true]) .ius-cdring__arc{transition:none}}.ius-cdring__center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold
|
|
1932
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: CountdownRingComponent, isStandalone: true, selector: "ius-countdown-ring", inputs: { progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, seconds: { classPropertyName: "seconds", publicName: "seconds", isSignal: true, isRequired: false, transformFunction: null }, running: { classPropertyName: "running", publicName: "running", isSignal: true, isRequired: false, transformFunction: null }, paused: { classPropertyName: "paused", publicName: "paused", isSignal: true, isRequired: false, transformFunction: null }, inverse: { classPropertyName: "inverse", publicName: "inverse", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { completed: "completed" }, host: { attributes: { "role": "img" }, properties: { "attr.data-size": "size()", "attr.data-eased": "isControlled() ? 'true' : null", "attr.aria-label": "ariaLabel() || null", "style.--_cdr-arc": "toneVars().arc", "style.--_cdr-trk": "toneVars().trk", "style.width.px": "dim().d", "style.height.px": "dim().d" }, classAttribute: "ius-cdring" }, ngImport: i0, template: "<svg\r\n class=\"ius-cdring__svg\"\r\n [attr.width]=\"dim().d\"\r\n [attr.height]=\"dim().d\"\r\n [attr.viewBox]=\"'0 0 ' + dim().d + ' ' + dim().d\"\r\n>\r\n <circle\r\n class=\"ius-cdring__trk\"\r\n [attr.cx]=\"dim().d / 2\"\r\n [attr.cy]=\"dim().d / 2\"\r\n [attr.r]=\"ringR()\"\r\n [attr.stroke-width]=\"dim().s\"\r\n pathLength=\"100\"\r\n />\r\n @if (arcLen() > 0) {\r\n <circle\r\n class=\"ius-cdring__arc\"\r\n [attr.cx]=\"dim().d / 2\"\r\n [attr.cy]=\"dim().d / 2\"\r\n [attr.r]=\"ringR()\"\r\n [attr.stroke-width]=\"dim().s\"\r\n pathLength=\"100\"\r\n [style.stroke-dasharray]=\"dashArray()\"\r\n />\r\n }\r\n</svg>\r\n\r\n<span class=\"ius-cdring__center\"><ng-content /></span>\r\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;vertical-align:middle}.ius-cdring__svg{display:block;transform:rotate(-90deg)}.ius-cdring__svg circle{fill:none}.ius-cdring__trk{stroke:var(--_cdr-trk)}.ius-cdring__arc{stroke:var(--_cdr-arc);stroke-linecap:round}:host([data-eased=true]) .ius-cdring__arc{transition:stroke-dasharray var(--ius-duration-base, .22s) var(--ius-ease-standard)}@media(prefers-reduced-motion:reduce){:host([data-eased=true]) .ius-cdring__arc{transition:none}}.ius-cdring__center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);color:var(--ius-text-primary);line-height:1;font-variant-numeric:tabular-nums}:host([data-size=small]) .ius-cdring__center{display:none}:host([data-size=medium]) .ius-cdring__center{font-size:var(--ius-fs-sm)}:host([data-size=large]) .ius-cdring__center{font-size:var(--ius-fs-sm)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1933
1933
|
}
|
|
1934
1934
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CountdownRingComponent, decorators: [{
|
|
1935
1935
|
type: Component,
|
|
@@ -1943,7 +1943,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
1943
1943
|
'[style.--_cdr-trk]': 'toneVars().trk',
|
|
1944
1944
|
'[style.width.px]': 'dim().d',
|
|
1945
1945
|
'[style.height.px]': 'dim().d',
|
|
1946
|
-
}, template: "<svg\r\n class=\"ius-cdring__svg\"\r\n [attr.width]=\"dim().d\"\r\n [attr.height]=\"dim().d\"\r\n [attr.viewBox]=\"'0 0 ' + dim().d + ' ' + dim().d\"\r\n>\r\n <circle\r\n class=\"ius-cdring__trk\"\r\n [attr.cx]=\"dim().d / 2\"\r\n [attr.cy]=\"dim().d / 2\"\r\n [attr.r]=\"ringR()\"\r\n [attr.stroke-width]=\"dim().s\"\r\n pathLength=\"100\"\r\n />\r\n @if (arcLen() > 0) {\r\n <circle\r\n class=\"ius-cdring__arc\"\r\n [attr.cx]=\"dim().d / 2\"\r\n [attr.cy]=\"dim().d / 2\"\r\n [attr.r]=\"ringR()\"\r\n [attr.stroke-width]=\"dim().s\"\r\n pathLength=\"100\"\r\n [style.stroke-dasharray]=\"dashArray()\"\r\n />\r\n }\r\n</svg>\r\n\r\n<span class=\"ius-cdring__center\"><ng-content /></span>\r\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;vertical-align:middle}.ius-cdring__svg{display:block;transform:rotate(-90deg)}.ius-cdring__svg circle{fill:none}.ius-cdring__trk{stroke:var(--_cdr-trk)}.ius-cdring__arc{stroke:var(--_cdr-arc);stroke-linecap:round}:host([data-eased=true]) .ius-cdring__arc{transition:stroke-dasharray var(--ius-duration-base, .22s) var(--ius-ease-standard)}@media(prefers-reduced-motion:reduce){:host([data-eased=true]) .ius-cdring__arc{transition:none}}.ius-cdring__center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold
|
|
1946
|
+
}, template: "<svg\r\n class=\"ius-cdring__svg\"\r\n [attr.width]=\"dim().d\"\r\n [attr.height]=\"dim().d\"\r\n [attr.viewBox]=\"'0 0 ' + dim().d + ' ' + dim().d\"\r\n>\r\n <circle\r\n class=\"ius-cdring__trk\"\r\n [attr.cx]=\"dim().d / 2\"\r\n [attr.cy]=\"dim().d / 2\"\r\n [attr.r]=\"ringR()\"\r\n [attr.stroke-width]=\"dim().s\"\r\n pathLength=\"100\"\r\n />\r\n @if (arcLen() > 0) {\r\n <circle\r\n class=\"ius-cdring__arc\"\r\n [attr.cx]=\"dim().d / 2\"\r\n [attr.cy]=\"dim().d / 2\"\r\n [attr.r]=\"ringR()\"\r\n [attr.stroke-width]=\"dim().s\"\r\n pathLength=\"100\"\r\n [style.stroke-dasharray]=\"dashArray()\"\r\n />\r\n }\r\n</svg>\r\n\r\n<span class=\"ius-cdring__center\"><ng-content /></span>\r\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;vertical-align:middle}.ius-cdring__svg{display:block;transform:rotate(-90deg)}.ius-cdring__svg circle{fill:none}.ius-cdring__trk{stroke:var(--_cdr-trk)}.ius-cdring__arc{stroke:var(--_cdr-arc);stroke-linecap:round}:host([data-eased=true]) .ius-cdring__arc{transition:stroke-dasharray var(--ius-duration-base, .22s) var(--ius-ease-standard)}@media(prefers-reduced-motion:reduce){:host([data-eased=true]) .ius-cdring__arc{transition:none}}.ius-cdring__center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);color:var(--ius-text-primary);line-height:1;font-variant-numeric:tabular-nums}:host([data-size=small]) .ius-cdring__center{display:none}:host([data-size=medium]) .ius-cdring__center{font-size:var(--ius-fs-sm)}:host([data-size=large]) .ius-cdring__center{font-size:var(--ius-fs-sm)}\n"] }]
|
|
1947
1947
|
}], ctorParameters: () => [], propDecorators: { progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], seconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "seconds", required: false }] }], running: [{ type: i0.Input, args: [{ isSignal: true, alias: "running", required: false }] }], paused: [{ type: i0.Input, args: [{ isSignal: true, alias: "paused", required: false }] }], inverse: [{ type: i0.Input, args: [{ isSignal: true, alias: "inverse", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], completed: [{ type: i0.Output, args: ["completed"] }] } });
|
|
1948
1948
|
|
|
1949
1949
|
/** Color del número por tono (espeja el arco del CountdownRing). */
|
|
@@ -2189,7 +2189,7 @@ class AlertComponent {
|
|
|
2189
2189
|
...(ngDevMode ? [{ debugName: "showHead" }] : /* istanbul ignore next */ []));
|
|
2190
2190
|
}
|
|
2191
2191
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2192
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AlertComponent, isStandalone: true, selector: "ius-alert", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, overline: { classPropertyName: "overline", publicName: "overline", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconChip: { classPropertyName: "iconChip", publicName: "iconChip", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, actionsDivider: { classPropertyName: "actionsDivider", publicName: "actionsDivider", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "attr.role": "role()", "attr.data-tone": "tone()", "attr.data-variant": "variant()", "attr.data-size": "size() !== 'medium' ? size() : null", "attr.data-border": "border() !== 'solid' ? border() : null", "attr.data-align": "computedAlign() !== 'start' ? computedAlign() : null" }, classAttribute: "ius-alert" }, queries: [{ propertyName: "actionsRef", first: true, predicate: IusAlertActionsDirective, descendants: true, isSignal: true }, { propertyName: "trailingRef", first: true, predicate: IusAlertTrailingDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (iconName()) {\n <span class=\"ius-alert__icon\" [attr.data-chip]=\"chip() || null\" aria-hidden=\"true\">\n <span translate=\"no\" class=\"ius-icon\">{{ iconName() }}</span>\n </span>\n}\n\n<div class=\"ius-alert__main\">\n @if (showHead()) {\n <div class=\"ius-alert__head\">\n <div class=\"ius-alert__headtext\">\n @if (overline() != null) {\n <span class=\"ius-alert__overline\">{{ overline() }}</span>\n }\n @if (title() != null) {\n <div class=\"ius-alert__title\">{{ title() }}</div>\n }\n </div>\n @if (meta() != null) {\n <span class=\"ius-alert__meta\">{{ meta() }}</span>\n }\n </div>\n }\n\n <div class=\"ius-alert__body\"><ng-content /></div>\n\n @if (hasActions()) {\n <div class=\"ius-alert__actions\" [attr.data-divider]=\"actionsDivider() ? null : 'false'\">\n <ng-content select=\"[iusAlertActions]\" />\n </div>\n }\n</div>\n\n@if (showTrailing()) {\n <div class=\"ius-alert__trailing\">\n <ng-content select=\"[iusAlertTrailing]\" />\n </div>\n}\n\n@if (closable()) {\n <button\n type=\"button\"\n class=\"ius-alert__close\"\n [attr.aria-label]=\"closeLabel()\"\n (click)=\"closed.emit()\"\n >\n <span translate=\"no\" class=\"ius-icon\">close</span>\n </button>\n}\n", styles: ["@charset \"UTF-8\";:host{--_al-tint: var(--ius-info-100);--_al-border: var(--ius-info-200);--_al-accent: var(--ius-info-600);--_al-title: var(--ius-info-800);--_al-solid-a: var(--ius-info-500);--_al-solid-b: var(--ius-info-700);--_al-pad-y: var(--ius-space-md);--_al-pad-x: var(--ius-space-md);--_al-gap: var(--ius-space-sm);--_al-title-fs: var(--ius-fs-lg);--_al-title-lh: var(--ius-lh-lg);--_al-body-fs: var(--ius-fs-base);--_al-body-lh: var(--ius-lh-base);--_al-icon: var(--ius-icon-lg);--_al-chip: 38px;display:flex;align-items:flex-start;gap:var(--_al-gap);box-sizing:border-box;width:100%;padding:var(--_al-pad-y) var(--_al-pad-x);border-radius:var(--ius-radius-lg);border:1px solid var(--_al-border);background:var(--_al-tint);font-family:var(--ius-font-body);color:var(--ius-text-primary)}:host([data-size=small]){--_al-pad-y: var(--ius-space-sm);--_al-pad-x: var(--ius-space-sm);--_al-gap: var(--ius-space-xs);--_al-title-fs: var(--ius-fs-base);--_al-title-lh: var(--ius-lh-base);--_al-body-fs: var(--ius-fs-sm);--_al-body-lh: var(--ius-lh-sm);--_al-icon: var(--ius-icon-md);--_al-chip: 30px}:host([data-size=large]){--_al-pad-y: var(--ius-space-lg);--_al-pad-x: var(--ius-space-lg);--_al-gap: var(--ius-space-md);--_al-title-fs: var(--ius-fs-h4);--_al-title-lh: var(--ius-lh-h4);--_al-body-fs: var(--ius-fs-lg);--_al-body-lh: var(--ius-lh-lg);--_al-icon: var(--ius-icon-xl);--_al-chip: 44px}:host([data-tone=info]){--_al-tint: var(--ius-info-100);--_al-border: var(--ius-info-200);--_al-accent: var(--ius-info-600);--_al-title: var(--ius-info-800);--_al-solid-a: var(--ius-info-500);--_al-solid-b: var(--ius-info-700)}:host([data-tone=success]){--_al-tint: var(--ius-success-100);--_al-border: var(--ius-success-200);--_al-accent: var(--ius-success-700);--_al-title: var(--ius-success-800);--_al-solid-a: var(--ius-success-600);--_al-solid-b: var(--ius-success-800)}:host([data-tone=warning]){--_al-tint: var(--ius-warning-100);--_al-border: var(--ius-warning-200);--_al-accent: var(--ius-warning-700);--_al-title: var(--ius-warning-800);--_al-solid-a: var(--ius-warning-600);--_al-solid-b: var(--ius-warning-800)}:host([data-tone=danger]){--_al-tint: var(--ius-danger-100);--_al-border: var(--ius-danger-200);--_al-accent: var(--ius-danger-600);--_al-title: var(--ius-danger-800);--_al-solid-a: var(--ius-danger-500);--_al-solid-b: var(--ius-danger-700)}:host([data-tone=neutral]){--_al-tint: var(--ius-neutral-2);--_al-border: var(--ius-neutral-4);--_al-accent: var(--ius-neutral-8);--_al-title: var(--ius-neutral-10);--_al-solid-a: var(--ius-neutral-7);--_al-solid-b: var(--ius-neutral-9)}:host([data-tone=primary]){--_al-tint: var(--ius-primary-100);--_al-border: var(--ius-primary-200);--_al-accent: var(--ius-primary-600);--_al-title: var(--ius-primary-800);--_al-solid-a: var(--ius-primary-500);--_al-solid-b: var(--ius-primary-800)}:host([data-variant=gradient]){background:linear-gradient(135deg,var(--_al-tint) 0%,color-mix(in srgb,var(--_al-tint) 35%,white) 100%)}:host([data-variant=outline]){background:var(--ius-surface-card);border-color:var(--_al-accent)}:host([data-variant=solid]){background:linear-gradient(120deg,var(--_al-solid-a) 0%,var(--_al-solid-b) 100%);border-color:transparent;color:var(--ius-neutral-white)}:host([data-variant=solid]) .ius-alert__title,:host([data-variant=solid]) .ius-alert__overline{color:var(--ius-neutral-white)}:host([data-variant=solid]) .ius-alert__body{color:#ffffffeb}:host([data-variant=solid]) .ius-alert__meta{color:#ffffffb8}:host([data-variant=solid]) .ius-alert__actions{border-top-color:#ffffff38}:host([data-border=dashed]){border-style:dashed}:host([data-border=none]){border-color:transparent}.ius-alert__icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;color:var(--_al-accent);margin-top:1px}.ius-alert__icon .ius-icon{font-size:var(--_al-icon);line-height:1}:host([data-variant=solid]) .ius-alert__icon{width:var(--_al-chip);height:var(--_al-chip);border-radius:var(--ius-radius-md);background:#ffffff2e;color:var(--ius-neutral-white);margin-top:0}.ius-alert__icon[data-chip=true]{width:var(--_al-chip);height:var(--_al-chip);border-radius:var(--ius-radius-md);background:color-mix(in srgb,var(--_al-accent) 14%,white)}.ius-alert__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-alert__head{display:flex;align-items:baseline;gap:var(--ius-space-sm)}.ius-alert__headtext{flex:1 1 auto;min-width:0}.ius-alert__overline{display:block;font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);letter-spacing:var(--ius-ls-emphasis);text-transform:uppercase;color:var(--_al-accent);margin-bottom:1px}.ius-alert__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold, 600);font-size:var(--_al-title-fs);line-height:var(--_al-title-lh);color:var(--_al-title)}.ius-alert__meta{flex:0 0 auto;font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-base);color:var(--ius-text-tertiary);white-space:nowrap}.ius-alert__body{font-family:var(--ius-font-body);font-size:var(--_al-body-fs);line-height:var(--_al-body-lh);color:var(--ius-text-secondary)}.ius-alert__body b,.ius-alert__body strong{color:inherit;font-weight:var(--ius-fw-semibold, 600)}:host([data-variant=solid]) .ius-alert__body b{color:var(--ius-neutral-white)}.ius-alert__actions{margin-top:var(--ius-space-sm);padding-top:var(--ius-space-sm);border-top:1px solid var(--_al-border);display:flex;flex-wrap:wrap;align-items:center;gap:var(--ius-space-xs)}.ius-alert__actions[data-divider=false]{border-top:0;padding-top:0;margin-top:var(--ius-space-xs)}:host([data-align=center]){align-items:center}.ius-alert__trailing{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xs)}.ius-alert__close{flex:0 0 auto;appearance:none;border:0;background:transparent;padding:var(--ius-space-xxs);margin:-2px -4px 0 0;display:inline-flex;align-items:center;justify-content:center;color:var(--ius-text-tertiary);cursor:pointer;border-radius:var(--ius-radius-sm);transition:color var(--ius-duration-fast) var(--ius-ease-standard),background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-alert__close .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-alert__close:hover{color:var(--ius-text-primary);background:#0000000d}.ius-alert__close:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}:host([data-variant=solid]) .ius-alert__close{color:#ffffffc7}:host([data-variant=solid]) .ius-alert__close:hover{color:var(--ius-neutral-white);background:#ffffff26}:host([data-variant=solid]) ::ng-deep .ius-btn[data-variant=primary]{--_btn-bg: var(--ius-neutral-white);--_btn-bg-hover: rgba(255, 255, 255, .88);--_btn-bg-pressed: rgba(255, 255, 255, .76);--_btn-fg: var(--_al-solid-b);--_btn-fg-hover: var(--_al-solid-b);--_btn-fg-pressed: var(--_al-solid-b);--_btn-border: transparent;--_btn-border-hover: transparent;--_btn-border-pressed: transparent}:host([data-variant=solid]) ::ng-deep .ius-btn[data-variant=outline]{--_btn-bg: transparent;--_btn-bg-hover: rgba(255, 255, 255, .16);--_btn-bg-pressed: rgba(255, 255, 255, .28);--_btn-fg: var(--ius-neutral-white);--_btn-fg-hover: var(--ius-neutral-white);--_btn-fg-pressed: var(--ius-neutral-white);--_btn-border: rgba(255, 255, 255, .72);--_btn-border-hover: var(--ius-neutral-white);--_btn-border-pressed: var(--ius-neutral-white)}:host([data-variant=solid]) ::ng-deep .ius-btn[data-variant=secondary],:host([data-variant=solid]) ::ng-deep .ius-btn[data-variant=tertiary]{--_btn-bg: rgba(255, 255, 255, .16);--_btn-bg-hover: rgba(255, 255, 255, .26);--_btn-bg-pressed: rgba(255, 255, 255, .34);--_btn-fg: var(--ius-neutral-white);--_btn-fg-hover: var(--ius-neutral-white);--_btn-fg-pressed: var(--ius-neutral-white);--_btn-border: transparent;--_btn-border-hover: transparent;--_btn-border-pressed: transparent}:host([data-variant=solid]) ::ng-deep .ius-txtbtn{color:var(--ius-neutral-white)}:host([data-variant=solid]) ::ng-deep .ius-txtbtn:hover:not(:disabled),:host([data-variant=solid]) ::ng-deep .ius-txtbtn[data-force=hover]:not(:disabled){color:#ffffffc7}:host([data-variant=solid]) ::ng-deep .ius-tag{--_c-soft: rgba(255, 255, 255, .16);--_c-soft-h: rgba(255, 255, 255, .24);--_c-soft-p: rgba(255, 255, 255, .3);--_c-fg: var(--ius-neutral-white);--_c-accent: var(--ius-neutral-white);background:#ffffff29;border-color:transparent}:host(:not([data-variant=solid])) ::ng-deep .ius-tag:not([data-variant=solid]){background:var(--ius-surface-card);border-color:var(--ius-stroke)}:host(:not([data-variant=solid])) ::ng-deep .ius-btn[data-variant=outline]{--_btn-bg: var(--ius-surface-card);--_btn-bg-hover: var(--ius-neutral-1);--_btn-bg-pressed: var(--ius-neutral-3);--_btn-fg: var(--ius-text-primary);--_btn-fg-hover: var(--ius-primary-500);--_btn-fg-pressed: var(--ius-primary-600);--_btn-border: var(--ius-stroke-strong);--_btn-border-hover: var(--ius-primary-500);--_btn-border-pressed: var(--ius-primary-600)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2192
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AlertComponent, isStandalone: true, selector: "ius-alert", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, overline: { classPropertyName: "overline", publicName: "overline", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconChip: { classPropertyName: "iconChip", publicName: "iconChip", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, actionsDivider: { classPropertyName: "actionsDivider", publicName: "actionsDivider", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "attr.role": "role()", "attr.data-tone": "tone()", "attr.data-variant": "variant()", "attr.data-size": "size() !== 'medium' ? size() : null", "attr.data-border": "border() !== 'solid' ? border() : null", "attr.data-align": "computedAlign() !== 'start' ? computedAlign() : null" }, classAttribute: "ius-alert" }, queries: [{ propertyName: "actionsRef", first: true, predicate: IusAlertActionsDirective, descendants: true, isSignal: true }, { propertyName: "trailingRef", first: true, predicate: IusAlertTrailingDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (iconName()) {\n <span class=\"ius-alert__icon\" [attr.data-chip]=\"chip() || null\" aria-hidden=\"true\">\n <span translate=\"no\" class=\"ius-icon\">{{ iconName() }}</span>\n </span>\n}\n\n<div class=\"ius-alert__main\">\n @if (showHead()) {\n <div class=\"ius-alert__head\">\n <div class=\"ius-alert__headtext\">\n @if (overline() != null) {\n <span class=\"ius-alert__overline\">{{ overline() }}</span>\n }\n @if (title() != null) {\n <div class=\"ius-alert__title\">{{ title() }}</div>\n }\n </div>\n @if (meta() != null) {\n <span class=\"ius-alert__meta\">{{ meta() }}</span>\n }\n </div>\n }\n\n <div class=\"ius-alert__body\"><ng-content /></div>\n\n @if (hasActions()) {\n <div class=\"ius-alert__actions\" [attr.data-divider]=\"actionsDivider() ? null : 'false'\">\n <ng-content select=\"[iusAlertActions]\" />\n </div>\n }\n</div>\n\n@if (showTrailing()) {\n <div class=\"ius-alert__trailing\">\n <ng-content select=\"[iusAlertTrailing]\" />\n </div>\n}\n\n@if (closable()) {\n <button\n type=\"button\"\n class=\"ius-alert__close\"\n [attr.aria-label]=\"closeLabel()\"\n (click)=\"closed.emit()\"\n >\n <span translate=\"no\" class=\"ius-icon\">close</span>\n </button>\n}\n", styles: ["@charset \"UTF-8\";:host{--_al-tint: var(--ius-info-100);--_al-border: var(--ius-info-200);--_al-accent: var(--ius-info-600);--_al-title: var(--ius-info-800);--_al-solid-a: var(--ius-info-500);--_al-solid-b: var(--ius-info-700);--_al-pad-y: var(--ius-space-md);--_al-pad-x: var(--ius-space-md);--_al-gap: var(--ius-space-sm);--_al-title-fs: var(--ius-fs-lg);--_al-title-lh: var(--ius-lh-lg);--_al-body-fs: var(--ius-fs-base);--_al-body-lh: var(--ius-lh-base);--_al-icon: var(--ius-icon-lg);--_al-chip: 38px;display:flex;align-items:flex-start;gap:var(--_al-gap);box-sizing:border-box;width:100%;padding:var(--_al-pad-y) var(--_al-pad-x);border-radius:var(--ius-radius-lg);border:1px solid var(--_al-border);background:var(--_al-tint);font-family:var(--ius-font-body);color:var(--ius-text-primary)}:host([data-size=small]){--_al-pad-y: var(--ius-space-sm);--_al-pad-x: var(--ius-space-sm);--_al-gap: var(--ius-space-xs);--_al-title-fs: var(--ius-fs-base);--_al-title-lh: var(--ius-lh-base);--_al-body-fs: var(--ius-fs-sm);--_al-body-lh: var(--ius-lh-sm);--_al-icon: var(--ius-icon-md);--_al-chip: 30px}:host([data-size=large]){--_al-pad-y: var(--ius-space-lg);--_al-pad-x: var(--ius-space-lg);--_al-gap: var(--ius-space-md);--_al-title-fs: var(--ius-fs-h4);--_al-title-lh: var(--ius-lh-h4);--_al-body-fs: var(--ius-fs-lg);--_al-body-lh: var(--ius-lh-lg);--_al-icon: var(--ius-icon-xl);--_al-chip: 44px}:host([data-tone=info]){--_al-tint: var(--ius-info-100);--_al-border: var(--ius-info-200);--_al-accent: var(--ius-info-600);--_al-title: var(--ius-info-800);--_al-solid-a: var(--ius-info-500);--_al-solid-b: var(--ius-info-700)}:host([data-tone=success]){--_al-tint: var(--ius-success-100);--_al-border: var(--ius-success-200);--_al-accent: var(--ius-success-700);--_al-title: var(--ius-success-800);--_al-solid-a: var(--ius-success-600);--_al-solid-b: var(--ius-success-800)}:host([data-tone=warning]){--_al-tint: var(--ius-warning-100);--_al-border: var(--ius-warning-200);--_al-accent: var(--ius-warning-700);--_al-title: var(--ius-warning-800);--_al-solid-a: var(--ius-warning-600);--_al-solid-b: var(--ius-warning-800)}:host([data-tone=danger]){--_al-tint: var(--ius-danger-100);--_al-border: var(--ius-danger-200);--_al-accent: var(--ius-danger-600);--_al-title: var(--ius-danger-800);--_al-solid-a: var(--ius-danger-500);--_al-solid-b: var(--ius-danger-700)}:host([data-tone=neutral]){--_al-tint: var(--ius-neutral-2);--_al-border: var(--ius-neutral-4);--_al-accent: var(--ius-neutral-8);--_al-title: var(--ius-neutral-10);--_al-solid-a: var(--ius-neutral-7);--_al-solid-b: var(--ius-neutral-9)}:host([data-tone=primary]){--_al-tint: var(--ius-primary-100);--_al-border: var(--ius-primary-200);--_al-accent: var(--ius-primary-600);--_al-title: var(--ius-primary-800);--_al-solid-a: var(--ius-primary-500);--_al-solid-b: var(--ius-primary-800)}:host([data-variant=gradient]){background:linear-gradient(135deg,var(--_al-tint) 0%,color-mix(in srgb,var(--_al-tint) 35%,white) 100%)}:host([data-variant=outline]){background:var(--ius-surface-card);border-color:var(--_al-accent)}:host([data-variant=solid]){background:linear-gradient(120deg,var(--_al-solid-a) 0%,var(--_al-solid-b) 100%);border-color:transparent;color:var(--ius-neutral-white)}:host([data-variant=solid]) .ius-alert__title,:host([data-variant=solid]) .ius-alert__overline{color:var(--ius-neutral-white)}:host([data-variant=solid]) .ius-alert__body{color:#ffffffeb}:host([data-variant=solid]) .ius-alert__meta{color:#ffffffb8}:host([data-variant=solid]) .ius-alert__actions{border-top-color:#ffffff38}:host([data-border=dashed]){border-style:dashed}:host([data-border=none]){border-color:transparent}.ius-alert__icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;color:var(--_al-accent);margin-top:1px}.ius-alert__icon .ius-icon{font-size:var(--_al-icon);line-height:1}:host([data-variant=solid]) .ius-alert__icon{width:var(--_al-chip);height:var(--_al-chip);border-radius:var(--ius-radius-md);background:#ffffff2e;color:var(--ius-neutral-white);margin-top:0}.ius-alert__icon[data-chip=true]{width:var(--_al-chip);height:var(--_al-chip);border-radius:var(--ius-radius-md);background:color-mix(in srgb,var(--_al-accent) 14%,white)}.ius-alert__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-alert__head{display:flex;align-items:baseline;gap:var(--ius-space-sm)}.ius-alert__headtext{flex:1 1 auto;min-width:0}.ius-alert__overline{display:block;font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);letter-spacing:var(--ius-ls-emphasis);text-transform:uppercase;color:var(--_al-accent);margin-bottom:1px}.ius-alert__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--_al-title-fs);line-height:var(--_al-title-lh);color:var(--_al-title)}.ius-alert__meta{flex:0 0 auto;font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-base);color:var(--ius-text-tertiary);white-space:nowrap}.ius-alert__body{font-family:var(--ius-font-body);font-size:var(--_al-body-fs);line-height:var(--_al-body-lh);color:var(--ius-text-secondary)}.ius-alert__body b,.ius-alert__body strong{color:inherit;font-weight:var(--ius-fw-semibold)}:host([data-variant=solid]) .ius-alert__body b{color:var(--ius-neutral-white)}.ius-alert__actions{margin-top:var(--ius-space-sm);padding-top:var(--ius-space-sm);border-top:1px solid var(--_al-border);display:flex;flex-wrap:wrap;align-items:center;gap:var(--ius-space-xs)}.ius-alert__actions[data-divider=false]{border-top:0;padding-top:0;margin-top:var(--ius-space-xs)}:host([data-align=center]){align-items:center}.ius-alert__trailing{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xs)}.ius-alert__close{flex:0 0 auto;appearance:none;border:0;background:transparent;padding:var(--ius-space-xxs);margin:-2px -4px 0 0;display:inline-flex;align-items:center;justify-content:center;color:var(--ius-text-tertiary);cursor:pointer;border-radius:var(--ius-radius-sm);transition:color var(--ius-duration-fast) var(--ius-ease-standard),background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-alert__close .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-alert__close:hover{color:var(--ius-text-primary);background:#0000000d}.ius-alert__close:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}:host([data-variant=solid]) .ius-alert__close{color:#ffffffc7}:host([data-variant=solid]) .ius-alert__close:hover{color:var(--ius-neutral-white);background:#ffffff26}:host([data-variant=solid]) ::ng-deep .ius-btn[data-variant=primary]{--_btn-bg: var(--ius-neutral-white);--_btn-bg-hover: rgba(255, 255, 255, .88);--_btn-bg-pressed: rgba(255, 255, 255, .76);--_btn-fg: var(--_al-solid-b);--_btn-fg-hover: var(--_al-solid-b);--_btn-fg-pressed: var(--_al-solid-b);--_btn-border: transparent;--_btn-border-hover: transparent;--_btn-border-pressed: transparent}:host([data-variant=solid]) ::ng-deep .ius-btn[data-variant=outline]{--_btn-bg: transparent;--_btn-bg-hover: rgba(255, 255, 255, .16);--_btn-bg-pressed: rgba(255, 255, 255, .28);--_btn-fg: var(--ius-neutral-white);--_btn-fg-hover: var(--ius-neutral-white);--_btn-fg-pressed: var(--ius-neutral-white);--_btn-border: rgba(255, 255, 255, .72);--_btn-border-hover: var(--ius-neutral-white);--_btn-border-pressed: var(--ius-neutral-white)}:host([data-variant=solid]) ::ng-deep .ius-btn[data-variant=secondary],:host([data-variant=solid]) ::ng-deep .ius-btn[data-variant=tertiary]{--_btn-bg: rgba(255, 255, 255, .16);--_btn-bg-hover: rgba(255, 255, 255, .26);--_btn-bg-pressed: rgba(255, 255, 255, .34);--_btn-fg: var(--ius-neutral-white);--_btn-fg-hover: var(--ius-neutral-white);--_btn-fg-pressed: var(--ius-neutral-white);--_btn-border: transparent;--_btn-border-hover: transparent;--_btn-border-pressed: transparent}:host([data-variant=solid]) ::ng-deep .ius-txtbtn{color:var(--ius-neutral-white)}:host([data-variant=solid]) ::ng-deep .ius-txtbtn:hover:not(:disabled),:host([data-variant=solid]) ::ng-deep .ius-txtbtn[data-force=hover]:not(:disabled){color:#ffffffc7}:host([data-variant=solid]) ::ng-deep .ius-tag{--_c-soft: rgba(255, 255, 255, .16);--_c-soft-h: rgba(255, 255, 255, .24);--_c-soft-p: rgba(255, 255, 255, .3);--_c-fg: var(--ius-neutral-white);--_c-accent: var(--ius-neutral-white);background:#ffffff29;border-color:transparent}:host(:not([data-variant=solid])) ::ng-deep .ius-tag:not([data-variant=solid]){background:var(--ius-surface-card);border-color:var(--ius-stroke)}:host(:not([data-variant=solid])) ::ng-deep .ius-btn[data-variant=outline]{--_btn-bg: var(--ius-surface-card);--_btn-bg-hover: var(--ius-neutral-1);--_btn-bg-pressed: var(--ius-neutral-3);--_btn-fg: var(--ius-text-primary);--_btn-fg-hover: var(--ius-primary-500);--_btn-fg-pressed: var(--ius-primary-600);--_btn-border: var(--ius-stroke-strong);--_btn-border-hover: var(--ius-primary-500);--_btn-border-pressed: var(--ius-primary-600)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2193
2193
|
}
|
|
2194
2194
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AlertComponent, decorators: [{
|
|
2195
2195
|
type: Component,
|
|
@@ -2201,7 +2201,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
2201
2201
|
'[attr.data-size]': "size() !== 'medium' ? size() : null",
|
|
2202
2202
|
'[attr.data-border]': "border() !== 'solid' ? border() : null",
|
|
2203
2203
|
'[attr.data-align]': "computedAlign() !== 'start' ? computedAlign() : null",
|
|
2204
|
-
}, template: "@if (iconName()) {\n <span class=\"ius-alert__icon\" [attr.data-chip]=\"chip() || null\" aria-hidden=\"true\">\n <span translate=\"no\" class=\"ius-icon\">{{ iconName() }}</span>\n </span>\n}\n\n<div class=\"ius-alert__main\">\n @if (showHead()) {\n <div class=\"ius-alert__head\">\n <div class=\"ius-alert__headtext\">\n @if (overline() != null) {\n <span class=\"ius-alert__overline\">{{ overline() }}</span>\n }\n @if (title() != null) {\n <div class=\"ius-alert__title\">{{ title() }}</div>\n }\n </div>\n @if (meta() != null) {\n <span class=\"ius-alert__meta\">{{ meta() }}</span>\n }\n </div>\n }\n\n <div class=\"ius-alert__body\"><ng-content /></div>\n\n @if (hasActions()) {\n <div class=\"ius-alert__actions\" [attr.data-divider]=\"actionsDivider() ? null : 'false'\">\n <ng-content select=\"[iusAlertActions]\" />\n </div>\n }\n</div>\n\n@if (showTrailing()) {\n <div class=\"ius-alert__trailing\">\n <ng-content select=\"[iusAlertTrailing]\" />\n </div>\n}\n\n@if (closable()) {\n <button\n type=\"button\"\n class=\"ius-alert__close\"\n [attr.aria-label]=\"closeLabel()\"\n (click)=\"closed.emit()\"\n >\n <span translate=\"no\" class=\"ius-icon\">close</span>\n </button>\n}\n", styles: ["@charset \"UTF-8\";:host{--_al-tint: var(--ius-info-100);--_al-border: var(--ius-info-200);--_al-accent: var(--ius-info-600);--_al-title: var(--ius-info-800);--_al-solid-a: var(--ius-info-500);--_al-solid-b: var(--ius-info-700);--_al-pad-y: var(--ius-space-md);--_al-pad-x: var(--ius-space-md);--_al-gap: var(--ius-space-sm);--_al-title-fs: var(--ius-fs-lg);--_al-title-lh: var(--ius-lh-lg);--_al-body-fs: var(--ius-fs-base);--_al-body-lh: var(--ius-lh-base);--_al-icon: var(--ius-icon-lg);--_al-chip: 38px;display:flex;align-items:flex-start;gap:var(--_al-gap);box-sizing:border-box;width:100%;padding:var(--_al-pad-y) var(--_al-pad-x);border-radius:var(--ius-radius-lg);border:1px solid var(--_al-border);background:var(--_al-tint);font-family:var(--ius-font-body);color:var(--ius-text-primary)}:host([data-size=small]){--_al-pad-y: var(--ius-space-sm);--_al-pad-x: var(--ius-space-sm);--_al-gap: var(--ius-space-xs);--_al-title-fs: var(--ius-fs-base);--_al-title-lh: var(--ius-lh-base);--_al-body-fs: var(--ius-fs-sm);--_al-body-lh: var(--ius-lh-sm);--_al-icon: var(--ius-icon-md);--_al-chip: 30px}:host([data-size=large]){--_al-pad-y: var(--ius-space-lg);--_al-pad-x: var(--ius-space-lg);--_al-gap: var(--ius-space-md);--_al-title-fs: var(--ius-fs-h4);--_al-title-lh: var(--ius-lh-h4);--_al-body-fs: var(--ius-fs-lg);--_al-body-lh: var(--ius-lh-lg);--_al-icon: var(--ius-icon-xl);--_al-chip: 44px}:host([data-tone=info]){--_al-tint: var(--ius-info-100);--_al-border: var(--ius-info-200);--_al-accent: var(--ius-info-600);--_al-title: var(--ius-info-800);--_al-solid-a: var(--ius-info-500);--_al-solid-b: var(--ius-info-700)}:host([data-tone=success]){--_al-tint: var(--ius-success-100);--_al-border: var(--ius-success-200);--_al-accent: var(--ius-success-700);--_al-title: var(--ius-success-800);--_al-solid-a: var(--ius-success-600);--_al-solid-b: var(--ius-success-800)}:host([data-tone=warning]){--_al-tint: var(--ius-warning-100);--_al-border: var(--ius-warning-200);--_al-accent: var(--ius-warning-700);--_al-title: var(--ius-warning-800);--_al-solid-a: var(--ius-warning-600);--_al-solid-b: var(--ius-warning-800)}:host([data-tone=danger]){--_al-tint: var(--ius-danger-100);--_al-border: var(--ius-danger-200);--_al-accent: var(--ius-danger-600);--_al-title: var(--ius-danger-800);--_al-solid-a: var(--ius-danger-500);--_al-solid-b: var(--ius-danger-700)}:host([data-tone=neutral]){--_al-tint: var(--ius-neutral-2);--_al-border: var(--ius-neutral-4);--_al-accent: var(--ius-neutral-8);--_al-title: var(--ius-neutral-10);--_al-solid-a: var(--ius-neutral-7);--_al-solid-b: var(--ius-neutral-9)}:host([data-tone=primary]){--_al-tint: var(--ius-primary-100);--_al-border: var(--ius-primary-200);--_al-accent: var(--ius-primary-600);--_al-title: var(--ius-primary-800);--_al-solid-a: var(--ius-primary-500);--_al-solid-b: var(--ius-primary-800)}:host([data-variant=gradient]){background:linear-gradient(135deg,var(--_al-tint) 0%,color-mix(in srgb,var(--_al-tint) 35%,white) 100%)}:host([data-variant=outline]){background:var(--ius-surface-card);border-color:var(--_al-accent)}:host([data-variant=solid]){background:linear-gradient(120deg,var(--_al-solid-a) 0%,var(--_al-solid-b) 100%);border-color:transparent;color:var(--ius-neutral-white)}:host([data-variant=solid]) .ius-alert__title,:host([data-variant=solid]) .ius-alert__overline{color:var(--ius-neutral-white)}:host([data-variant=solid]) .ius-alert__body{color:#ffffffeb}:host([data-variant=solid]) .ius-alert__meta{color:#ffffffb8}:host([data-variant=solid]) .ius-alert__actions{border-top-color:#ffffff38}:host([data-border=dashed]){border-style:dashed}:host([data-border=none]){border-color:transparent}.ius-alert__icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;color:var(--_al-accent);margin-top:1px}.ius-alert__icon .ius-icon{font-size:var(--_al-icon);line-height:1}:host([data-variant=solid]) .ius-alert__icon{width:var(--_al-chip);height:var(--_al-chip);border-radius:var(--ius-radius-md);background:#ffffff2e;color:var(--ius-neutral-white);margin-top:0}.ius-alert__icon[data-chip=true]{width:var(--_al-chip);height:var(--_al-chip);border-radius:var(--ius-radius-md);background:color-mix(in srgb,var(--_al-accent) 14%,white)}.ius-alert__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-alert__head{display:flex;align-items:baseline;gap:var(--ius-space-sm)}.ius-alert__headtext{flex:1 1 auto;min-width:0}.ius-alert__overline{display:block;font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);letter-spacing:var(--ius-ls-emphasis);text-transform:uppercase;color:var(--_al-accent);margin-bottom:1px}.ius-alert__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold, 600);font-size:var(--_al-title-fs);line-height:var(--_al-title-lh);color:var(--_al-title)}.ius-alert__meta{flex:0 0 auto;font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-base);color:var(--ius-text-tertiary);white-space:nowrap}.ius-alert__body{font-family:var(--ius-font-body);font-size:var(--_al-body-fs);line-height:var(--_al-body-lh);color:var(--ius-text-secondary)}.ius-alert__body b,.ius-alert__body strong{color:inherit;font-weight:var(--ius-fw-semibold, 600)}:host([data-variant=solid]) .ius-alert__body b{color:var(--ius-neutral-white)}.ius-alert__actions{margin-top:var(--ius-space-sm);padding-top:var(--ius-space-sm);border-top:1px solid var(--_al-border);display:flex;flex-wrap:wrap;align-items:center;gap:var(--ius-space-xs)}.ius-alert__actions[data-divider=false]{border-top:0;padding-top:0;margin-top:var(--ius-space-xs)}:host([data-align=center]){align-items:center}.ius-alert__trailing{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xs)}.ius-alert__close{flex:0 0 auto;appearance:none;border:0;background:transparent;padding:var(--ius-space-xxs);margin:-2px -4px 0 0;display:inline-flex;align-items:center;justify-content:center;color:var(--ius-text-tertiary);cursor:pointer;border-radius:var(--ius-radius-sm);transition:color var(--ius-duration-fast) var(--ius-ease-standard),background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-alert__close .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-alert__close:hover{color:var(--ius-text-primary);background:#0000000d}.ius-alert__close:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}:host([data-variant=solid]) .ius-alert__close{color:#ffffffc7}:host([data-variant=solid]) .ius-alert__close:hover{color:var(--ius-neutral-white);background:#ffffff26}:host([data-variant=solid]) ::ng-deep .ius-btn[data-variant=primary]{--_btn-bg: var(--ius-neutral-white);--_btn-bg-hover: rgba(255, 255, 255, .88);--_btn-bg-pressed: rgba(255, 255, 255, .76);--_btn-fg: var(--_al-solid-b);--_btn-fg-hover: var(--_al-solid-b);--_btn-fg-pressed: var(--_al-solid-b);--_btn-border: transparent;--_btn-border-hover: transparent;--_btn-border-pressed: transparent}:host([data-variant=solid]) ::ng-deep .ius-btn[data-variant=outline]{--_btn-bg: transparent;--_btn-bg-hover: rgba(255, 255, 255, .16);--_btn-bg-pressed: rgba(255, 255, 255, .28);--_btn-fg: var(--ius-neutral-white);--_btn-fg-hover: var(--ius-neutral-white);--_btn-fg-pressed: var(--ius-neutral-white);--_btn-border: rgba(255, 255, 255, .72);--_btn-border-hover: var(--ius-neutral-white);--_btn-border-pressed: var(--ius-neutral-white)}:host([data-variant=solid]) ::ng-deep .ius-btn[data-variant=secondary],:host([data-variant=solid]) ::ng-deep .ius-btn[data-variant=tertiary]{--_btn-bg: rgba(255, 255, 255, .16);--_btn-bg-hover: rgba(255, 255, 255, .26);--_btn-bg-pressed: rgba(255, 255, 255, .34);--_btn-fg: var(--ius-neutral-white);--_btn-fg-hover: var(--ius-neutral-white);--_btn-fg-pressed: var(--ius-neutral-white);--_btn-border: transparent;--_btn-border-hover: transparent;--_btn-border-pressed: transparent}:host([data-variant=solid]) ::ng-deep .ius-txtbtn{color:var(--ius-neutral-white)}:host([data-variant=solid]) ::ng-deep .ius-txtbtn:hover:not(:disabled),:host([data-variant=solid]) ::ng-deep .ius-txtbtn[data-force=hover]:not(:disabled){color:#ffffffc7}:host([data-variant=solid]) ::ng-deep .ius-tag{--_c-soft: rgba(255, 255, 255, .16);--_c-soft-h: rgba(255, 255, 255, .24);--_c-soft-p: rgba(255, 255, 255, .3);--_c-fg: var(--ius-neutral-white);--_c-accent: var(--ius-neutral-white);background:#ffffff29;border-color:transparent}:host(:not([data-variant=solid])) ::ng-deep .ius-tag:not([data-variant=solid]){background:var(--ius-surface-card);border-color:var(--ius-stroke)}:host(:not([data-variant=solid])) ::ng-deep .ius-btn[data-variant=outline]{--_btn-bg: var(--ius-surface-card);--_btn-bg-hover: var(--ius-neutral-1);--_btn-bg-pressed: var(--ius-neutral-3);--_btn-fg: var(--ius-text-primary);--_btn-fg-hover: var(--ius-primary-500);--_btn-fg-pressed: var(--ius-primary-600);--_btn-border: var(--ius-stroke-strong);--_btn-border-hover: var(--ius-primary-500);--_btn-border-pressed: var(--ius-primary-600)}\n"] }]
|
|
2204
|
+
}, template: "@if (iconName()) {\n <span class=\"ius-alert__icon\" [attr.data-chip]=\"chip() || null\" aria-hidden=\"true\">\n <span translate=\"no\" class=\"ius-icon\">{{ iconName() }}</span>\n </span>\n}\n\n<div class=\"ius-alert__main\">\n @if (showHead()) {\n <div class=\"ius-alert__head\">\n <div class=\"ius-alert__headtext\">\n @if (overline() != null) {\n <span class=\"ius-alert__overline\">{{ overline() }}</span>\n }\n @if (title() != null) {\n <div class=\"ius-alert__title\">{{ title() }}</div>\n }\n </div>\n @if (meta() != null) {\n <span class=\"ius-alert__meta\">{{ meta() }}</span>\n }\n </div>\n }\n\n <div class=\"ius-alert__body\"><ng-content /></div>\n\n @if (hasActions()) {\n <div class=\"ius-alert__actions\" [attr.data-divider]=\"actionsDivider() ? null : 'false'\">\n <ng-content select=\"[iusAlertActions]\" />\n </div>\n }\n</div>\n\n@if (showTrailing()) {\n <div class=\"ius-alert__trailing\">\n <ng-content select=\"[iusAlertTrailing]\" />\n </div>\n}\n\n@if (closable()) {\n <button\n type=\"button\"\n class=\"ius-alert__close\"\n [attr.aria-label]=\"closeLabel()\"\n (click)=\"closed.emit()\"\n >\n <span translate=\"no\" class=\"ius-icon\">close</span>\n </button>\n}\n", styles: ["@charset \"UTF-8\";:host{--_al-tint: var(--ius-info-100);--_al-border: var(--ius-info-200);--_al-accent: var(--ius-info-600);--_al-title: var(--ius-info-800);--_al-solid-a: var(--ius-info-500);--_al-solid-b: var(--ius-info-700);--_al-pad-y: var(--ius-space-md);--_al-pad-x: var(--ius-space-md);--_al-gap: var(--ius-space-sm);--_al-title-fs: var(--ius-fs-lg);--_al-title-lh: var(--ius-lh-lg);--_al-body-fs: var(--ius-fs-base);--_al-body-lh: var(--ius-lh-base);--_al-icon: var(--ius-icon-lg);--_al-chip: 38px;display:flex;align-items:flex-start;gap:var(--_al-gap);box-sizing:border-box;width:100%;padding:var(--_al-pad-y) var(--_al-pad-x);border-radius:var(--ius-radius-lg);border:1px solid var(--_al-border);background:var(--_al-tint);font-family:var(--ius-font-body);color:var(--ius-text-primary)}:host([data-size=small]){--_al-pad-y: var(--ius-space-sm);--_al-pad-x: var(--ius-space-sm);--_al-gap: var(--ius-space-xs);--_al-title-fs: var(--ius-fs-base);--_al-title-lh: var(--ius-lh-base);--_al-body-fs: var(--ius-fs-sm);--_al-body-lh: var(--ius-lh-sm);--_al-icon: var(--ius-icon-md);--_al-chip: 30px}:host([data-size=large]){--_al-pad-y: var(--ius-space-lg);--_al-pad-x: var(--ius-space-lg);--_al-gap: var(--ius-space-md);--_al-title-fs: var(--ius-fs-h4);--_al-title-lh: var(--ius-lh-h4);--_al-body-fs: var(--ius-fs-lg);--_al-body-lh: var(--ius-lh-lg);--_al-icon: var(--ius-icon-xl);--_al-chip: 44px}:host([data-tone=info]){--_al-tint: var(--ius-info-100);--_al-border: var(--ius-info-200);--_al-accent: var(--ius-info-600);--_al-title: var(--ius-info-800);--_al-solid-a: var(--ius-info-500);--_al-solid-b: var(--ius-info-700)}:host([data-tone=success]){--_al-tint: var(--ius-success-100);--_al-border: var(--ius-success-200);--_al-accent: var(--ius-success-700);--_al-title: var(--ius-success-800);--_al-solid-a: var(--ius-success-600);--_al-solid-b: var(--ius-success-800)}:host([data-tone=warning]){--_al-tint: var(--ius-warning-100);--_al-border: var(--ius-warning-200);--_al-accent: var(--ius-warning-700);--_al-title: var(--ius-warning-800);--_al-solid-a: var(--ius-warning-600);--_al-solid-b: var(--ius-warning-800)}:host([data-tone=danger]){--_al-tint: var(--ius-danger-100);--_al-border: var(--ius-danger-200);--_al-accent: var(--ius-danger-600);--_al-title: var(--ius-danger-800);--_al-solid-a: var(--ius-danger-500);--_al-solid-b: var(--ius-danger-700)}:host([data-tone=neutral]){--_al-tint: var(--ius-neutral-2);--_al-border: var(--ius-neutral-4);--_al-accent: var(--ius-neutral-8);--_al-title: var(--ius-neutral-10);--_al-solid-a: var(--ius-neutral-7);--_al-solid-b: var(--ius-neutral-9)}:host([data-tone=primary]){--_al-tint: var(--ius-primary-100);--_al-border: var(--ius-primary-200);--_al-accent: var(--ius-primary-600);--_al-title: var(--ius-primary-800);--_al-solid-a: var(--ius-primary-500);--_al-solid-b: var(--ius-primary-800)}:host([data-variant=gradient]){background:linear-gradient(135deg,var(--_al-tint) 0%,color-mix(in srgb,var(--_al-tint) 35%,white) 100%)}:host([data-variant=outline]){background:var(--ius-surface-card);border-color:var(--_al-accent)}:host([data-variant=solid]){background:linear-gradient(120deg,var(--_al-solid-a) 0%,var(--_al-solid-b) 100%);border-color:transparent;color:var(--ius-neutral-white)}:host([data-variant=solid]) .ius-alert__title,:host([data-variant=solid]) .ius-alert__overline{color:var(--ius-neutral-white)}:host([data-variant=solid]) .ius-alert__body{color:#ffffffeb}:host([data-variant=solid]) .ius-alert__meta{color:#ffffffb8}:host([data-variant=solid]) .ius-alert__actions{border-top-color:#ffffff38}:host([data-border=dashed]){border-style:dashed}:host([data-border=none]){border-color:transparent}.ius-alert__icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;color:var(--_al-accent);margin-top:1px}.ius-alert__icon .ius-icon{font-size:var(--_al-icon);line-height:1}:host([data-variant=solid]) .ius-alert__icon{width:var(--_al-chip);height:var(--_al-chip);border-radius:var(--ius-radius-md);background:#ffffff2e;color:var(--ius-neutral-white);margin-top:0}.ius-alert__icon[data-chip=true]{width:var(--_al-chip);height:var(--_al-chip);border-radius:var(--ius-radius-md);background:color-mix(in srgb,var(--_al-accent) 14%,white)}.ius-alert__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-alert__head{display:flex;align-items:baseline;gap:var(--ius-space-sm)}.ius-alert__headtext{flex:1 1 auto;min-width:0}.ius-alert__overline{display:block;font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);letter-spacing:var(--ius-ls-emphasis);text-transform:uppercase;color:var(--_al-accent);margin-bottom:1px}.ius-alert__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--_al-title-fs);line-height:var(--_al-title-lh);color:var(--_al-title)}.ius-alert__meta{flex:0 0 auto;font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-base);color:var(--ius-text-tertiary);white-space:nowrap}.ius-alert__body{font-family:var(--ius-font-body);font-size:var(--_al-body-fs);line-height:var(--_al-body-lh);color:var(--ius-text-secondary)}.ius-alert__body b,.ius-alert__body strong{color:inherit;font-weight:var(--ius-fw-semibold)}:host([data-variant=solid]) .ius-alert__body b{color:var(--ius-neutral-white)}.ius-alert__actions{margin-top:var(--ius-space-sm);padding-top:var(--ius-space-sm);border-top:1px solid var(--_al-border);display:flex;flex-wrap:wrap;align-items:center;gap:var(--ius-space-xs)}.ius-alert__actions[data-divider=false]{border-top:0;padding-top:0;margin-top:var(--ius-space-xs)}:host([data-align=center]){align-items:center}.ius-alert__trailing{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xs)}.ius-alert__close{flex:0 0 auto;appearance:none;border:0;background:transparent;padding:var(--ius-space-xxs);margin:-2px -4px 0 0;display:inline-flex;align-items:center;justify-content:center;color:var(--ius-text-tertiary);cursor:pointer;border-radius:var(--ius-radius-sm);transition:color var(--ius-duration-fast) var(--ius-ease-standard),background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-alert__close .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-alert__close:hover{color:var(--ius-text-primary);background:#0000000d}.ius-alert__close:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}:host([data-variant=solid]) .ius-alert__close{color:#ffffffc7}:host([data-variant=solid]) .ius-alert__close:hover{color:var(--ius-neutral-white);background:#ffffff26}:host([data-variant=solid]) ::ng-deep .ius-btn[data-variant=primary]{--_btn-bg: var(--ius-neutral-white);--_btn-bg-hover: rgba(255, 255, 255, .88);--_btn-bg-pressed: rgba(255, 255, 255, .76);--_btn-fg: var(--_al-solid-b);--_btn-fg-hover: var(--_al-solid-b);--_btn-fg-pressed: var(--_al-solid-b);--_btn-border: transparent;--_btn-border-hover: transparent;--_btn-border-pressed: transparent}:host([data-variant=solid]) ::ng-deep .ius-btn[data-variant=outline]{--_btn-bg: transparent;--_btn-bg-hover: rgba(255, 255, 255, .16);--_btn-bg-pressed: rgba(255, 255, 255, .28);--_btn-fg: var(--ius-neutral-white);--_btn-fg-hover: var(--ius-neutral-white);--_btn-fg-pressed: var(--ius-neutral-white);--_btn-border: rgba(255, 255, 255, .72);--_btn-border-hover: var(--ius-neutral-white);--_btn-border-pressed: var(--ius-neutral-white)}:host([data-variant=solid]) ::ng-deep .ius-btn[data-variant=secondary],:host([data-variant=solid]) ::ng-deep .ius-btn[data-variant=tertiary]{--_btn-bg: rgba(255, 255, 255, .16);--_btn-bg-hover: rgba(255, 255, 255, .26);--_btn-bg-pressed: rgba(255, 255, 255, .34);--_btn-fg: var(--ius-neutral-white);--_btn-fg-hover: var(--ius-neutral-white);--_btn-fg-pressed: var(--ius-neutral-white);--_btn-border: transparent;--_btn-border-hover: transparent;--_btn-border-pressed: transparent}:host([data-variant=solid]) ::ng-deep .ius-txtbtn{color:var(--ius-neutral-white)}:host([data-variant=solid]) ::ng-deep .ius-txtbtn:hover:not(:disabled),:host([data-variant=solid]) ::ng-deep .ius-txtbtn[data-force=hover]:not(:disabled){color:#ffffffc7}:host([data-variant=solid]) ::ng-deep .ius-tag{--_c-soft: rgba(255, 255, 255, .16);--_c-soft-h: rgba(255, 255, 255, .24);--_c-soft-p: rgba(255, 255, 255, .3);--_c-fg: var(--ius-neutral-white);--_c-accent: var(--ius-neutral-white);background:#ffffff29;border-color:transparent}:host(:not([data-variant=solid])) ::ng-deep .ius-tag:not([data-variant=solid]){background:var(--ius-surface-card);border-color:var(--ius-stroke)}:host(:not([data-variant=solid])) ::ng-deep .ius-btn[data-variant=outline]{--_btn-bg: var(--ius-surface-card);--_btn-bg-hover: var(--ius-neutral-1);--_btn-bg-pressed: var(--ius-neutral-3);--_btn-fg: var(--ius-text-primary);--_btn-fg-hover: var(--ius-primary-500);--_btn-fg-pressed: var(--ius-primary-600);--_btn-border: var(--ius-stroke-strong);--_btn-border-hover: var(--ius-primary-500);--_btn-border-pressed: var(--ius-primary-600)}\n"] }]
|
|
2205
2205
|
}], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], overline: [{ type: i0.Input, args: [{ isSignal: true, alias: "overline", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconChip: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconChip", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], actionsDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsDivider", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], actionsRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusAlertActionsDirective), { isSignal: true }] }], trailingRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusAlertTrailingDirective), { isSignal: true }] }] } });
|
|
2206
2206
|
|
|
2207
2207
|
/*
|
|
@@ -2418,7 +2418,7 @@ const SIZE_MAP = {
|
|
|
2418
2418
|
medium: 96,
|
|
2419
2419
|
large: 140,
|
|
2420
2420
|
};
|
|
2421
|
-
let uid$
|
|
2421
|
+
let uid$a = 0;
|
|
2422
2422
|
/**
|
|
2423
2423
|
* Illustration — Ius Design v2 (familia feedback).
|
|
2424
2424
|
*
|
|
@@ -2443,7 +2443,7 @@ class IllustrationComponent {
|
|
|
2443
2443
|
constructor() {
|
|
2444
2444
|
this.sanitizer = inject(DomSanitizer);
|
|
2445
2445
|
/** ID único por instancia, para el sufijo de gradientes. */
|
|
2446
|
-
this.instanceId = `i${uid$
|
|
2446
|
+
this.instanceId = `i${uid$a++}`;
|
|
2447
2447
|
this._size = 'medium';
|
|
2448
2448
|
this.viewBox = '0 0 110 110';
|
|
2449
2449
|
this.safeInner = '';
|
|
@@ -2502,7 +2502,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
2502
2502
|
type: Input
|
|
2503
2503
|
}] } });
|
|
2504
2504
|
|
|
2505
|
-
let uid$
|
|
2505
|
+
let uid$9 = 0;
|
|
2506
2506
|
/**
|
|
2507
2507
|
* Checkbox — Ius Design v2.
|
|
2508
2508
|
*
|
|
@@ -2540,7 +2540,7 @@ class CheckboxComponent {
|
|
|
2540
2540
|
...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
|
|
2541
2541
|
/** Callback con el nuevo booleano (original `onChange(checked)`; nunca `change`). */
|
|
2542
2542
|
this.checkedChange = new EventEmitter();
|
|
2543
|
-
this.inputId = `ius-cbx-${uid$
|
|
2543
|
+
this.inputId = `ius-cbx-${uid$9++}`;
|
|
2544
2544
|
this.onChange = () => { };
|
|
2545
2545
|
this.onTouched = () => { };
|
|
2546
2546
|
}
|
|
@@ -2784,7 +2784,7 @@ class AvatarComponent {
|
|
|
2784
2784
|
}
|
|
2785
2785
|
}
|
|
2786
2786
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2787
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AvatarComponent, isStandalone: true, selector: "ius-avatar", inputs: { alt: "alt", name: "name", monogram: "monogram", icon: "icon", shape: "shape", size: "size", color: "color", editable: ["editable", "editable", booleanAttribute], editIcon: "editIcon", ariaLabel: "ariaLabel", src: "src" }, outputs: { edit: "edit" }, host: { listeners: { "click": "onHostClick($event)", "keydown": "onKeydown($event)" }, properties: { "attr.data-shape": "shape !== 'circle' ? shape : null", "attr.data-size": "size !== 'medium' ? size : null", "attr.data-color": "variant === 'photo' ? null : resolvedColor", "attr.data-variant": "variant", "attr.data-editable": "editable ? 'true' : null", "attr.role": "hostRole", "attr.tabindex": "editable ? 0 : null", "attr.aria-label": "hostAriaLabel" }, classAttribute: "ius-avt" }, ngImport: i0, template: "@if (variant === 'photo') {\n <img\n class=\"ius-avt__img\"\n [src]=\"src\"\n [attr.alt]=\"imgAlt\"\n (error)=\"onImgError()\"\n draggable=\"false\"\n />\n} @else if (variant === 'icon') {\n <span class=\"ius-avt__icon\" aria-hidden=\"true\">\n <span translate=\"no\" class=\"ius-icon\">{{ icon }}</span>\n </span>\n} @else {\n <span class=\"ius-avt__mono\" aria-hidden=\"true\">{{ initials }}</span>\n}\n\n@if (editable) {\n <span class=\"ius-avt__overlay\" aria-hidden=\"true\">\n <span translate=\"no\" class=\"ius-icon\">{{ editIcon }}</span>\n </span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_avt-size: 40px;--_avt-initials: var(--ius-fs-base);--_avt-glyph: var(--ius-icon-md);--_avt-radius: var(--ius-radius-pill);--_avt-bg: var(--ius-neutral-3);--_avt-fg: var(--ius-neutral-9);position:relative;box-sizing:border-box;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:var(--_avt-size);height:var(--_avt-size);border-radius:var(--_avt-radius);overflow:hidden;font-family:var(--ius-font-display);font-weight:
|
|
2787
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AvatarComponent, isStandalone: true, selector: "ius-avatar", inputs: { alt: "alt", name: "name", monogram: "monogram", icon: "icon", shape: "shape", size: "size", color: "color", editable: ["editable", "editable", booleanAttribute], editIcon: "editIcon", ariaLabel: "ariaLabel", src: "src" }, outputs: { edit: "edit" }, host: { listeners: { "click": "onHostClick($event)", "keydown": "onKeydown($event)" }, properties: { "attr.data-shape": "shape !== 'circle' ? shape : null", "attr.data-size": "size !== 'medium' ? size : null", "attr.data-color": "variant === 'photo' ? null : resolvedColor", "attr.data-variant": "variant", "attr.data-editable": "editable ? 'true' : null", "attr.role": "hostRole", "attr.tabindex": "editable ? 0 : null", "attr.aria-label": "hostAriaLabel" }, classAttribute: "ius-avt" }, ngImport: i0, template: "@if (variant === 'photo') {\n <img\n class=\"ius-avt__img\"\n [src]=\"src\"\n [attr.alt]=\"imgAlt\"\n (error)=\"onImgError()\"\n draggable=\"false\"\n />\n} @else if (variant === 'icon') {\n <span class=\"ius-avt__icon\" aria-hidden=\"true\">\n <span translate=\"no\" class=\"ius-icon\">{{ icon }}</span>\n </span>\n} @else {\n <span class=\"ius-avt__mono\" aria-hidden=\"true\">{{ initials }}</span>\n}\n\n@if (editable) {\n <span class=\"ius-avt__overlay\" aria-hidden=\"true\">\n <span translate=\"no\" class=\"ius-icon\">{{ editIcon }}</span>\n </span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_avt-size: 40px;--_avt-initials: var(--ius-fs-base);--_avt-glyph: var(--ius-icon-md);--_avt-radius: var(--ius-radius-pill);--_avt-bg: var(--ius-neutral-3);--_avt-fg: var(--ius-neutral-9);position:relative;box-sizing:border-box;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:var(--_avt-size);height:var(--_avt-size);border-radius:var(--_avt-radius);overflow:hidden;font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--_avt-initials);line-height:1;letter-spacing:.01em;color:var(--_avt-fg);background:var(--_avt-bg);-webkit-user-select:none;user-select:none;vertical-align:middle;-webkit-tap-highlight-color:transparent;transition:box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-shape=square]){--_avt-radius: var(--ius-radius-lg)}:host([data-shape=square-outline]){--_avt-radius: var(--ius-radius-lg)}:host([data-size=xsmall]){--_avt-size: 24px;--_avt-initials: 10px;--_avt-glyph: 14px}:host([data-size=small]){--_avt-size: 32px;--_avt-initials: var(--ius-fs-sm);--_avt-glyph: var(--ius-icon-sm)}:host([data-size=large]){--_avt-size: 64px;--_avt-initials: 24px;--_avt-glyph: 34px}:host([data-color=info]){--_avt-bg: var(--ius-info-100);--_avt-fg: var(--ius-info-700)}:host([data-color=primary]){--_avt-bg: var(--ius-primary-100);--_avt-fg: var(--ius-primary-700)}:host([data-color=success]){--_avt-bg: var(--ius-success-100);--_avt-fg: var(--ius-success-800)}:host([data-color=warning]){--_avt-bg: var(--ius-warning-100);--_avt-fg: var(--ius-warning-800)}:host([data-color=danger]){--_avt-bg: var(--ius-danger-100);--_avt-fg: var(--ius-danger-700)}:host([data-color=neutral]){--_avt-bg: var(--ius-neutral-3);--_avt-fg: var(--ius-neutral-9)}:host([data-color=durazno]){--_avt-bg: var(--ius-durazno-100);--_avt-fg: var(--ius-durazno-700)}:host([data-color=banano]){--_avt-bg: var(--ius-banano-100);--_avt-fg: var(--ius-banano-800)}:host([data-color=sandia]){--_avt-bg: var(--ius-sandia-100);--_avt-fg: var(--ius-sandia-700)}:host([data-color=arandano]){--_avt-bg: var(--ius-arandano-100);--_avt-fg: var(--ius-arandano-700)}:host([data-color=uva]){--_avt-bg: var(--ius-uva-100);--_avt-fg: var(--ius-uva-700)}:host([data-color=aguacate]){--_avt-bg: var(--ius-aguacate-100);--_avt-fg: var(--ius-aguacate-700)}:host([data-shape=circle-outline]),:host([data-shape=square-outline]){--_avt-bg: var(--ius-neutral-white);border:1.5px solid var(--_avt-fg)}:host([data-shape=circle-outline][data-color=neutral]),:host([data-shape=square-outline][data-color=neutral]){--_avt-fg: var(--ius-neutral-7)}:host([data-variant=photo]){--_avt-bg: var(--ius-neutral-2)}.ius-avt__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.ius-avt__icon{display:inline-flex}.ius-avt__icon .ius-icon{font-size:var(--_avt-glyph);line-height:1}.ius-avt__mono{display:inline-flex}.ius-avt__overlay{position:absolute;inset:0;display:grid;place-items:center;background:#2626268c;color:var(--ius-neutral-white);opacity:0;transition:opacity var(--ius-duration-fast) var(--ius-ease-standard);pointer-events:none}.ius-avt__overlay .ius-icon{font-size:calc(var(--_avt-size) * .4);line-height:1}:host([data-editable=true]){cursor:pointer;appearance:none;padding:0;margin:0}:host([data-editable=true]:hover) .ius-avt__overlay,:host([data-editable=true][data-force=hover]) .ius-avt__overlay{opacity:1}:host([data-editable=true]:focus-visible),:host([data-editable=true][data-force=focused]){outline:none;box-shadow:var(--ius-focus-ring)}:host([data-editable=true]:focus-visible) .ius-avt__overlay,:host([data-editable=true][data-force=focused]) .ius-avt__overlay{opacity:1;background:var(--ius-info-200);color:var(--ius-text-primary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2788
2788
|
}
|
|
2789
2789
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
2790
2790
|
type: Component,
|
|
@@ -2800,7 +2800,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
2800
2800
|
'[attr.aria-label]': 'hostAriaLabel',
|
|
2801
2801
|
'(click)': 'onHostClick($event)',
|
|
2802
2802
|
'(keydown)': 'onKeydown($event)',
|
|
2803
|
-
}, template: "@if (variant === 'photo') {\n <img\n class=\"ius-avt__img\"\n [src]=\"src\"\n [attr.alt]=\"imgAlt\"\n (error)=\"onImgError()\"\n draggable=\"false\"\n />\n} @else if (variant === 'icon') {\n <span class=\"ius-avt__icon\" aria-hidden=\"true\">\n <span translate=\"no\" class=\"ius-icon\">{{ icon }}</span>\n </span>\n} @else {\n <span class=\"ius-avt__mono\" aria-hidden=\"true\">{{ initials }}</span>\n}\n\n@if (editable) {\n <span class=\"ius-avt__overlay\" aria-hidden=\"true\">\n <span translate=\"no\" class=\"ius-icon\">{{ editIcon }}</span>\n </span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_avt-size: 40px;--_avt-initials: var(--ius-fs-base);--_avt-glyph: var(--ius-icon-md);--_avt-radius: var(--ius-radius-pill);--_avt-bg: var(--ius-neutral-3);--_avt-fg: var(--ius-neutral-9);position:relative;box-sizing:border-box;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:var(--_avt-size);height:var(--_avt-size);border-radius:var(--_avt-radius);overflow:hidden;font-family:var(--ius-font-display);font-weight:
|
|
2803
|
+
}, template: "@if (variant === 'photo') {\n <img\n class=\"ius-avt__img\"\n [src]=\"src\"\n [attr.alt]=\"imgAlt\"\n (error)=\"onImgError()\"\n draggable=\"false\"\n />\n} @else if (variant === 'icon') {\n <span class=\"ius-avt__icon\" aria-hidden=\"true\">\n <span translate=\"no\" class=\"ius-icon\">{{ icon }}</span>\n </span>\n} @else {\n <span class=\"ius-avt__mono\" aria-hidden=\"true\">{{ initials }}</span>\n}\n\n@if (editable) {\n <span class=\"ius-avt__overlay\" aria-hidden=\"true\">\n <span translate=\"no\" class=\"ius-icon\">{{ editIcon }}</span>\n </span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_avt-size: 40px;--_avt-initials: var(--ius-fs-base);--_avt-glyph: var(--ius-icon-md);--_avt-radius: var(--ius-radius-pill);--_avt-bg: var(--ius-neutral-3);--_avt-fg: var(--ius-neutral-9);position:relative;box-sizing:border-box;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:var(--_avt-size);height:var(--_avt-size);border-radius:var(--_avt-radius);overflow:hidden;font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--_avt-initials);line-height:1;letter-spacing:.01em;color:var(--_avt-fg);background:var(--_avt-bg);-webkit-user-select:none;user-select:none;vertical-align:middle;-webkit-tap-highlight-color:transparent;transition:box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-shape=square]){--_avt-radius: var(--ius-radius-lg)}:host([data-shape=square-outline]){--_avt-radius: var(--ius-radius-lg)}:host([data-size=xsmall]){--_avt-size: 24px;--_avt-initials: 10px;--_avt-glyph: 14px}:host([data-size=small]){--_avt-size: 32px;--_avt-initials: var(--ius-fs-sm);--_avt-glyph: var(--ius-icon-sm)}:host([data-size=large]){--_avt-size: 64px;--_avt-initials: 24px;--_avt-glyph: 34px}:host([data-color=info]){--_avt-bg: var(--ius-info-100);--_avt-fg: var(--ius-info-700)}:host([data-color=primary]){--_avt-bg: var(--ius-primary-100);--_avt-fg: var(--ius-primary-700)}:host([data-color=success]){--_avt-bg: var(--ius-success-100);--_avt-fg: var(--ius-success-800)}:host([data-color=warning]){--_avt-bg: var(--ius-warning-100);--_avt-fg: var(--ius-warning-800)}:host([data-color=danger]){--_avt-bg: var(--ius-danger-100);--_avt-fg: var(--ius-danger-700)}:host([data-color=neutral]){--_avt-bg: var(--ius-neutral-3);--_avt-fg: var(--ius-neutral-9)}:host([data-color=durazno]){--_avt-bg: var(--ius-durazno-100);--_avt-fg: var(--ius-durazno-700)}:host([data-color=banano]){--_avt-bg: var(--ius-banano-100);--_avt-fg: var(--ius-banano-800)}:host([data-color=sandia]){--_avt-bg: var(--ius-sandia-100);--_avt-fg: var(--ius-sandia-700)}:host([data-color=arandano]){--_avt-bg: var(--ius-arandano-100);--_avt-fg: var(--ius-arandano-700)}:host([data-color=uva]){--_avt-bg: var(--ius-uva-100);--_avt-fg: var(--ius-uva-700)}:host([data-color=aguacate]){--_avt-bg: var(--ius-aguacate-100);--_avt-fg: var(--ius-aguacate-700)}:host([data-shape=circle-outline]),:host([data-shape=square-outline]){--_avt-bg: var(--ius-neutral-white);border:1.5px solid var(--_avt-fg)}:host([data-shape=circle-outline][data-color=neutral]),:host([data-shape=square-outline][data-color=neutral]){--_avt-fg: var(--ius-neutral-7)}:host([data-variant=photo]){--_avt-bg: var(--ius-neutral-2)}.ius-avt__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.ius-avt__icon{display:inline-flex}.ius-avt__icon .ius-icon{font-size:var(--_avt-glyph);line-height:1}.ius-avt__mono{display:inline-flex}.ius-avt__overlay{position:absolute;inset:0;display:grid;place-items:center;background:#2626268c;color:var(--ius-neutral-white);opacity:0;transition:opacity var(--ius-duration-fast) var(--ius-ease-standard);pointer-events:none}.ius-avt__overlay .ius-icon{font-size:calc(var(--_avt-size) * .4);line-height:1}:host([data-editable=true]){cursor:pointer;appearance:none;padding:0;margin:0}:host([data-editable=true]:hover) .ius-avt__overlay,:host([data-editable=true][data-force=hover]) .ius-avt__overlay{opacity:1}:host([data-editable=true]:focus-visible),:host([data-editable=true][data-force=focused]){outline:none;box-shadow:var(--ius-focus-ring)}:host([data-editable=true]:focus-visible) .ius-avt__overlay,:host([data-editable=true][data-force=focused]) .ius-avt__overlay{opacity:1;background:var(--ius-info-200);color:var(--ius-text-primary)}\n"] }]
|
|
2804
2804
|
}], propDecorators: { alt: [{
|
|
2805
2805
|
type: Input
|
|
2806
2806
|
}], name: [{
|
|
@@ -3006,7 +3006,7 @@ class InsigniaComponent {
|
|
|
3006
3006
|
...(ngDevMode ? [{ debugName: "displayCount" }] : /* istanbul ignore next */ []));
|
|
3007
3007
|
}
|
|
3008
3008
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: InsigniaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3009
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: InsigniaComponent, isStandalone: true, selector: "ius-insignia", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", 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 }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, ring: { classPropertyName: "ring", publicName: "ring", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant() !== 'dot' ? variant() : null", "attr.data-tone": "tone()", "attr.data-size": "size() !== 'medium' ? size() : null", "attr.data-ring": "showRing() || null", "attr.role": "ariaLabel() ? 'img' : null", "attr.aria-label": "ariaLabel() || null" }, classAttribute: "ius-insignia" }, ngImport: i0, template: "<!-- Cuerpo: p\u00EDldora de contador (count / count-soft) \u203A punto (dot) -->\r\n@if (isCount()) {\r\n <span class=\"ius-insignia__count\">{{ displayCount() }}</span>\r\n} @else {\r\n <span class=\"ius-insignia__dot\" aria-hidden=\"true\"></span>\r\n}\r\n\r\n<!-- Etiqueta opcional: input `label` \u203A contenido proyectado -->\r\n@if (label() != null) {\r\n <span class=\"ius-insignia__label\">{{ label() }}</span>\r\n} @else {\r\n <span class=\"ius-insignia__label\"><ng-content /></span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_ins-dot: 10px;--_ins-fs: var(--ius-fs-sm);--_ins-gap: var(--ius-space-xs);--_ins-accent: var(--ius-neutral-7);--_ins-solid: var(--ius-neutral-7);display:inline-flex;align-items:center;gap:var(--_ins-gap);font-family:var(--ius-font-body);font-size:var(--_ins-fs);line-height:1;color:var(--ius-text-secondary);vertical-align:middle}:host([data-size=small]){--_ins-dot: 8px;--_ins-fs: var(--ius-fs-sm);--_ins-gap: var(--ius-space-xxs)}:host([data-size=large]){--_ins-dot: 12px;--_ins-fs: var(--ius-fs-base);--_ins-gap: var(--ius-space-xs)}:host([data-tone=primary]){--_ins-accent: var(--ius-primary-500);--_ins-solid: var(--ius-primary-900)}:host([data-tone=info]){--_ins-accent: var(--ius-info-500);--_ins-solid: var(--ius-info-600)}:host([data-tone=success]){--_ins-accent: var(--ius-success-500);--_ins-solid: var(--ius-success-600)}:host([data-tone=warning]){--_ins-accent: var(--ius-warning-500);--_ins-solid: var(--ius-warning-600)}:host([data-tone=danger]){--_ins-accent: var(--ius-danger-500);--_ins-solid: var(--ius-danger-600)}:host([data-tone=neutral]){--_ins-accent: var(--ius-neutral-6);--_ins-solid: var(--ius-neutral-7)}:host([data-tone=durazno]){--_ins-accent: var(--ius-durazno-500);--_ins-solid: var(--ius-durazno-600)}:host([data-tone=banano]){--_ins-accent: var(--ius-banano-500);--_ins-solid: var(--ius-banano-700)}:host([data-tone=sandia]){--_ins-accent: var(--ius-sandia-500);--_ins-solid: var(--ius-sandia-600)}:host([data-tone=arandano]){--_ins-accent: var(--ius-arandano-500);--_ins-solid: var(--ius-arandano-600)}:host([data-tone=uva]){--_ins-accent: var(--ius-uva-500);--_ins-solid: var(--ius-uva-600)}:host([data-tone=aguacate]){--_ins-accent: var(--ius-aguacate-500);--_ins-solid: var(--ius-aguacate-600)}.ius-insignia__dot{flex:0 0 auto;width:var(--_ins-dot);height:var(--_ins-dot);border-radius:var(--ius-radius-pill);background:var(--_ins-accent)}:host([data-ring=true]) .ius-insignia__dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--_ins-accent) 22%,transparent)}.ius-insignia__count{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:calc(var(--_ins-fs) + 6px);height:calc(var(--_ins-fs) + 6px);padding:0 var(--ius-space-xs);border-radius:var(--ius-radius-pill);background:var(--_ins-solid);color:var(--ius-neutral-white);font-family:var(--ius-font-display);font-size:calc(var(--_ins-fs) - 1px);font-weight:
|
|
3009
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: InsigniaComponent, isStandalone: true, selector: "ius-insignia", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", 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 }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, ring: { classPropertyName: "ring", publicName: "ring", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant() !== 'dot' ? variant() : null", "attr.data-tone": "tone()", "attr.data-size": "size() !== 'medium' ? size() : null", "attr.data-ring": "showRing() || null", "attr.role": "ariaLabel() ? 'img' : null", "attr.aria-label": "ariaLabel() || null" }, classAttribute: "ius-insignia" }, ngImport: i0, template: "<!-- Cuerpo: p\u00EDldora de contador (count / count-soft) \u203A punto (dot) -->\r\n@if (isCount()) {\r\n <span class=\"ius-insignia__count\">{{ displayCount() }}</span>\r\n} @else {\r\n <span class=\"ius-insignia__dot\" aria-hidden=\"true\"></span>\r\n}\r\n\r\n<!-- Etiqueta opcional: input `label` \u203A contenido proyectado -->\r\n@if (label() != null) {\r\n <span class=\"ius-insignia__label\">{{ label() }}</span>\r\n} @else {\r\n <span class=\"ius-insignia__label\"><ng-content /></span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_ins-dot: 10px;--_ins-fs: var(--ius-fs-sm);--_ins-gap: var(--ius-space-xs);--_ins-accent: var(--ius-neutral-7);--_ins-solid: var(--ius-neutral-7);display:inline-flex;align-items:center;gap:var(--_ins-gap);font-family:var(--ius-font-body);font-size:var(--_ins-fs);line-height:1;color:var(--ius-text-secondary);vertical-align:middle}:host([data-size=small]){--_ins-dot: 8px;--_ins-fs: var(--ius-fs-sm);--_ins-gap: var(--ius-space-xxs)}:host([data-size=large]){--_ins-dot: 12px;--_ins-fs: var(--ius-fs-base);--_ins-gap: var(--ius-space-xs)}:host([data-tone=primary]){--_ins-accent: var(--ius-primary-500);--_ins-solid: var(--ius-primary-900)}:host([data-tone=info]){--_ins-accent: var(--ius-info-500);--_ins-solid: var(--ius-info-600)}:host([data-tone=success]){--_ins-accent: var(--ius-success-500);--_ins-solid: var(--ius-success-600)}:host([data-tone=warning]){--_ins-accent: var(--ius-warning-500);--_ins-solid: var(--ius-warning-600)}:host([data-tone=danger]){--_ins-accent: var(--ius-danger-500);--_ins-solid: var(--ius-danger-600)}:host([data-tone=neutral]){--_ins-accent: var(--ius-neutral-6);--_ins-solid: var(--ius-neutral-7)}:host([data-tone=durazno]){--_ins-accent: var(--ius-durazno-500);--_ins-solid: var(--ius-durazno-600)}:host([data-tone=banano]){--_ins-accent: var(--ius-banano-500);--_ins-solid: var(--ius-banano-700)}:host([data-tone=sandia]){--_ins-accent: var(--ius-sandia-500);--_ins-solid: var(--ius-sandia-600)}:host([data-tone=arandano]){--_ins-accent: var(--ius-arandano-500);--_ins-solid: var(--ius-arandano-600)}:host([data-tone=uva]){--_ins-accent: var(--ius-uva-500);--_ins-solid: var(--ius-uva-600)}:host([data-tone=aguacate]){--_ins-accent: var(--ius-aguacate-500);--_ins-solid: var(--ius-aguacate-600)}.ius-insignia__dot{flex:0 0 auto;width:var(--_ins-dot);height:var(--_ins-dot);border-radius:var(--ius-radius-pill);background:var(--_ins-accent)}:host([data-ring=true]) .ius-insignia__dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--_ins-accent) 22%,transparent)}.ius-insignia__count{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:calc(var(--_ins-fs) + 6px);height:calc(var(--_ins-fs) + 6px);padding:0 var(--ius-space-xs);border-radius:var(--ius-radius-pill);background:var(--_ins-solid);color:var(--ius-neutral-white);font-family:var(--ius-font-display);font-size:calc(var(--_ins-fs) - 1px);font-weight:var(--ius-fw-semibold);line-height:1;font-variant-numeric:tabular-nums}:host([data-variant=count-soft]) .ius-insignia__count{background:color-mix(in srgb,var(--_ins-accent) 18%,white);color:var(--_ins-solid)}.ius-insignia__label{color:inherit}.ius-insignia__label:empty{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3010
3010
|
}
|
|
3011
3011
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: InsigniaComponent, decorators: [{
|
|
3012
3012
|
type: Component,
|
|
@@ -3018,7 +3018,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
3018
3018
|
'[attr.data-ring]': 'showRing() || null',
|
|
3019
3019
|
'[attr.role]': "ariaLabel() ? 'img' : null",
|
|
3020
3020
|
'[attr.aria-label]': 'ariaLabel() || null',
|
|
3021
|
-
}, template: "<!-- Cuerpo: p\u00EDldora de contador (count / count-soft) \u203A punto (dot) -->\r\n@if (isCount()) {\r\n <span class=\"ius-insignia__count\">{{ displayCount() }}</span>\r\n} @else {\r\n <span class=\"ius-insignia__dot\" aria-hidden=\"true\"></span>\r\n}\r\n\r\n<!-- Etiqueta opcional: input `label` \u203A contenido proyectado -->\r\n@if (label() != null) {\r\n <span class=\"ius-insignia__label\">{{ label() }}</span>\r\n} @else {\r\n <span class=\"ius-insignia__label\"><ng-content /></span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_ins-dot: 10px;--_ins-fs: var(--ius-fs-sm);--_ins-gap: var(--ius-space-xs);--_ins-accent: var(--ius-neutral-7);--_ins-solid: var(--ius-neutral-7);display:inline-flex;align-items:center;gap:var(--_ins-gap);font-family:var(--ius-font-body);font-size:var(--_ins-fs);line-height:1;color:var(--ius-text-secondary);vertical-align:middle}:host([data-size=small]){--_ins-dot: 8px;--_ins-fs: var(--ius-fs-sm);--_ins-gap: var(--ius-space-xxs)}:host([data-size=large]){--_ins-dot: 12px;--_ins-fs: var(--ius-fs-base);--_ins-gap: var(--ius-space-xs)}:host([data-tone=primary]){--_ins-accent: var(--ius-primary-500);--_ins-solid: var(--ius-primary-900)}:host([data-tone=info]){--_ins-accent: var(--ius-info-500);--_ins-solid: var(--ius-info-600)}:host([data-tone=success]){--_ins-accent: var(--ius-success-500);--_ins-solid: var(--ius-success-600)}:host([data-tone=warning]){--_ins-accent: var(--ius-warning-500);--_ins-solid: var(--ius-warning-600)}:host([data-tone=danger]){--_ins-accent: var(--ius-danger-500);--_ins-solid: var(--ius-danger-600)}:host([data-tone=neutral]){--_ins-accent: var(--ius-neutral-6);--_ins-solid: var(--ius-neutral-7)}:host([data-tone=durazno]){--_ins-accent: var(--ius-durazno-500);--_ins-solid: var(--ius-durazno-600)}:host([data-tone=banano]){--_ins-accent: var(--ius-banano-500);--_ins-solid: var(--ius-banano-700)}:host([data-tone=sandia]){--_ins-accent: var(--ius-sandia-500);--_ins-solid: var(--ius-sandia-600)}:host([data-tone=arandano]){--_ins-accent: var(--ius-arandano-500);--_ins-solid: var(--ius-arandano-600)}:host([data-tone=uva]){--_ins-accent: var(--ius-uva-500);--_ins-solid: var(--ius-uva-600)}:host([data-tone=aguacate]){--_ins-accent: var(--ius-aguacate-500);--_ins-solid: var(--ius-aguacate-600)}.ius-insignia__dot{flex:0 0 auto;width:var(--_ins-dot);height:var(--_ins-dot);border-radius:var(--ius-radius-pill);background:var(--_ins-accent)}:host([data-ring=true]) .ius-insignia__dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--_ins-accent) 22%,transparent)}.ius-insignia__count{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:calc(var(--_ins-fs) + 6px);height:calc(var(--_ins-fs) + 6px);padding:0 var(--ius-space-xs);border-radius:var(--ius-radius-pill);background:var(--_ins-solid);color:var(--ius-neutral-white);font-family:var(--ius-font-display);font-size:calc(var(--_ins-fs) - 1px);font-weight:
|
|
3021
|
+
}, template: "<!-- Cuerpo: p\u00EDldora de contador (count / count-soft) \u203A punto (dot) -->\r\n@if (isCount()) {\r\n <span class=\"ius-insignia__count\">{{ displayCount() }}</span>\r\n} @else {\r\n <span class=\"ius-insignia__dot\" aria-hidden=\"true\"></span>\r\n}\r\n\r\n<!-- Etiqueta opcional: input `label` \u203A contenido proyectado -->\r\n@if (label() != null) {\r\n <span class=\"ius-insignia__label\">{{ label() }}</span>\r\n} @else {\r\n <span class=\"ius-insignia__label\"><ng-content /></span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_ins-dot: 10px;--_ins-fs: var(--ius-fs-sm);--_ins-gap: var(--ius-space-xs);--_ins-accent: var(--ius-neutral-7);--_ins-solid: var(--ius-neutral-7);display:inline-flex;align-items:center;gap:var(--_ins-gap);font-family:var(--ius-font-body);font-size:var(--_ins-fs);line-height:1;color:var(--ius-text-secondary);vertical-align:middle}:host([data-size=small]){--_ins-dot: 8px;--_ins-fs: var(--ius-fs-sm);--_ins-gap: var(--ius-space-xxs)}:host([data-size=large]){--_ins-dot: 12px;--_ins-fs: var(--ius-fs-base);--_ins-gap: var(--ius-space-xs)}:host([data-tone=primary]){--_ins-accent: var(--ius-primary-500);--_ins-solid: var(--ius-primary-900)}:host([data-tone=info]){--_ins-accent: var(--ius-info-500);--_ins-solid: var(--ius-info-600)}:host([data-tone=success]){--_ins-accent: var(--ius-success-500);--_ins-solid: var(--ius-success-600)}:host([data-tone=warning]){--_ins-accent: var(--ius-warning-500);--_ins-solid: var(--ius-warning-600)}:host([data-tone=danger]){--_ins-accent: var(--ius-danger-500);--_ins-solid: var(--ius-danger-600)}:host([data-tone=neutral]){--_ins-accent: var(--ius-neutral-6);--_ins-solid: var(--ius-neutral-7)}:host([data-tone=durazno]){--_ins-accent: var(--ius-durazno-500);--_ins-solid: var(--ius-durazno-600)}:host([data-tone=banano]){--_ins-accent: var(--ius-banano-500);--_ins-solid: var(--ius-banano-700)}:host([data-tone=sandia]){--_ins-accent: var(--ius-sandia-500);--_ins-solid: var(--ius-sandia-600)}:host([data-tone=arandano]){--_ins-accent: var(--ius-arandano-500);--_ins-solid: var(--ius-arandano-600)}:host([data-tone=uva]){--_ins-accent: var(--ius-uva-500);--_ins-solid: var(--ius-uva-600)}:host([data-tone=aguacate]){--_ins-accent: var(--ius-aguacate-500);--_ins-solid: var(--ius-aguacate-600)}.ius-insignia__dot{flex:0 0 auto;width:var(--_ins-dot);height:var(--_ins-dot);border-radius:var(--ius-radius-pill);background:var(--_ins-accent)}:host([data-ring=true]) .ius-insignia__dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--_ins-accent) 22%,transparent)}.ius-insignia__count{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:calc(var(--_ins-fs) + 6px);height:calc(var(--_ins-fs) + 6px);padding:0 var(--ius-space-xs);border-radius:var(--ius-radius-pill);background:var(--_ins-solid);color:var(--ius-neutral-white);font-family:var(--ius-font-display);font-size:calc(var(--_ins-fs) - 1px);font-weight:var(--ius-fw-semibold);line-height:1;font-variant-numeric:tabular-nums}:host([data-variant=count-soft]) .ius-insignia__count{background:color-mix(in srgb,var(--_ins-accent) 18%,white);color:var(--_ins-solid)}.ius-insignia__label{color:inherit}.ius-insignia__label:empty{display:none}\n"] }]
|
|
3022
3022
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], ring: [{ type: i0.Input, args: [{ isSignal: true, alias: "ring", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
3023
3023
|
|
|
3024
3024
|
/**
|
|
@@ -3150,7 +3150,7 @@ function prefersReducedMotion() {
|
|
|
3150
3150
|
typeof window.matchMedia === 'function' &&
|
|
3151
3151
|
window.matchMedia('(prefers-reduced-motion: reduce)').matches);
|
|
3152
3152
|
}
|
|
3153
|
-
let uid$
|
|
3153
|
+
let uid$8 = 0;
|
|
3154
3154
|
/**
|
|
3155
3155
|
* CircularProgress — Ius Design v2.
|
|
3156
3156
|
*
|
|
@@ -3171,7 +3171,7 @@ class CircularProgressComponent {
|
|
|
3171
3171
|
this.showValue = false;
|
|
3172
3172
|
/** Congela la cuenta regresiva conservando el tiempo restante (hover del Toast). */
|
|
3173
3173
|
this.paused = false;
|
|
3174
|
-
this.gid = `ius-cp-${uid$
|
|
3174
|
+
this.gid = `ius-cp-${uid$8++}`;
|
|
3175
3175
|
this.zone = inject(NgZone);
|
|
3176
3176
|
/** % restante de la cuenta regresiva (100 → 0). */
|
|
3177
3177
|
this.remaining = signal(100, /* @ts-ignore */
|
|
@@ -3291,7 +3291,7 @@ class CircularProgressComponent {
|
|
|
3291
3291
|
: null;
|
|
3292
3292
|
}
|
|
3293
3293
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CircularProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3294
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: CircularProgressComponent, isStandalone: true, selector: "ius-circular-progress", inputs: { value: "value", max: "max", indeterminate: ["indeterminate", "indeterminate", booleanAttribute], tone: "tone", size: "size", showValue: ["showValue", "showValue", booleanAttribute], ariaLabel: "ariaLabel", duration: "duration", paused: ["paused", "paused", booleanAttribute] }, host: { attributes: { "role": "progressbar" }, properties: { "attr.data-size": "size", "attr.data-indeterminate": "indeterminate ? 'true' : null", "attr.data-countdown": "isCountdown ? 'true' : null", "attr.data-paused": "paused ? 'true' : null", "attr.aria-label": "ariaLabel || null", "attr.aria-valuenow": "indeterminate || isCountdown ? null : roundedPct", "attr.aria-valuemin": "indeterminate || isCountdown ? null : 0", "attr.aria-valuemax": "indeterminate || isCountdown ? null : 100", "style.--_cp-ind": "toneVar", "style.width.px": "dim.d", "style.height.px": "dim.d" }, classAttribute: "ius-circprog" }, usesOnChanges: true, ngImport: i0, template: "<svg\r\n class=\"ius-circprog__svg\"\r\n [attr.width]=\"dim.d\"\r\n [attr.height]=\"dim.d\"\r\n [attr.viewBox]=\"'0 0 ' + dim.d + ' ' + dim.d\"\r\n>\r\n @if (indeterminate) {\r\n <defs>\r\n <linearGradient [attr.id]=\"gid\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\r\n <stop offset=\"0%\" [attr.stop-color]=\"grad.strong\" stop-opacity=\"1\" />\r\n <stop offset=\"100%\" [attr.stop-color]=\"grad.light\" stop-opacity=\"1\" />\r\n </linearGradient>\r\n </defs>\r\n <circle\r\n class=\"ius-circprog__trk\"\r\n [attr.cx]=\"cx\"\r\n [attr.cy]=\"cy\"\r\n [attr.r]=\"r\"\r\n [attr.stroke-width]=\"dim.s\"\r\n [attr.pathLength]=\"100\"\r\n />\r\n <circle\r\n class=\"ius-circprog__ind\"\r\n [attr.cx]=\"cx\"\r\n [attr.cy]=\"cy\"\r\n [attr.r]=\"r\"\r\n [attr.stroke-width]=\"dim.s\"\r\n [attr.pathLength]=\"100\"\r\n [style.stroke]=\"'url(#' + gid + ')'\"\r\n />\r\n } @else {\r\n @if (grayLen > 0) {\r\n <circle\r\n class=\"ius-circprog__trk\"\r\n [attr.cx]=\"cx\"\r\n [attr.cy]=\"cy\"\r\n [attr.r]=\"r\"\r\n [attr.stroke-width]=\"dim.s\"\r\n [attr.pathLength]=\"100\"\r\n [style.stroke-dasharray]=\"grayDash\"\r\n [style.stroke-dashoffset]=\"grayOffset\"\r\n />\r\n }\r\n @if (coloredLen > 0) {\r\n <circle\r\n class=\"ius-circprog__ind\"\r\n [attr.cx]=\"cx\"\r\n [attr.cy]=\"cy\"\r\n [attr.r]=\"r\"\r\n [attr.stroke-width]=\"dim.s\"\r\n [attr.pathLength]=\"100\"\r\n [style.stroke-dasharray]=\"coloredDash\"\r\n [style.stroke-dashoffset]=\"coloredOffset\"\r\n />\r\n }\r\n }\r\n</svg>\r\n\r\n<!-- Centro: `children` del golden. Se renderiza siempre porque el slot de\r\n proyeccion es fijo en Angular; queda colapsado por CSS cuando no hay ni\r\n porcentaje ni contenido proyectado (ver `:empty` en el SCSS). -->\r\n<span class=\"ius-circprog__center\">\r\n @if (center != null) {\r\n {{ center }}\r\n }\r\n <ng-content />\r\n</span>\r\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--_cp-ind, var(--ius-info-500))}.ius-circprog__svg{display:block;transform:rotate(-90deg)}.ius-circprog__svg circle{fill:none}.ius-circprog__trk{stroke:var(--ius-neutral-3)}.ius-circprog__ind{stroke:currentColor;stroke-linecap:round;stroke-dasharray:100;transition:stroke-dashoffset var(--ius-duration-base, .22s) var(--ius-ease-standard)}:host([data-indeterminate=true]) .ius-circprog__svg{animation:ius-circprog-spin 1.2s linear infinite}:host([data-indeterminate=true]) .ius-circprog__trk{stroke:currentColor;stroke-opacity:.4}:host([data-indeterminate=true]) .ius-circprog__ind{stroke-dasharray:70 100;stroke-dashoffset:0}@keyframes ius-circprog-spin{to{transform:rotate(270deg)}}.ius-circprog__center:empty{display:none}.ius-circprog__center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold
|
|
3294
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: CircularProgressComponent, isStandalone: true, selector: "ius-circular-progress", inputs: { value: "value", max: "max", indeterminate: ["indeterminate", "indeterminate", booleanAttribute], tone: "tone", size: "size", showValue: ["showValue", "showValue", booleanAttribute], ariaLabel: "ariaLabel", duration: "duration", paused: ["paused", "paused", booleanAttribute] }, host: { attributes: { "role": "progressbar" }, properties: { "attr.data-size": "size", "attr.data-indeterminate": "indeterminate ? 'true' : null", "attr.data-countdown": "isCountdown ? 'true' : null", "attr.data-paused": "paused ? 'true' : null", "attr.aria-label": "ariaLabel || null", "attr.aria-valuenow": "indeterminate || isCountdown ? null : roundedPct", "attr.aria-valuemin": "indeterminate || isCountdown ? null : 0", "attr.aria-valuemax": "indeterminate || isCountdown ? null : 100", "style.--_cp-ind": "toneVar", "style.width.px": "dim.d", "style.height.px": "dim.d" }, classAttribute: "ius-circprog" }, usesOnChanges: true, ngImport: i0, template: "<svg\r\n class=\"ius-circprog__svg\"\r\n [attr.width]=\"dim.d\"\r\n [attr.height]=\"dim.d\"\r\n [attr.viewBox]=\"'0 0 ' + dim.d + ' ' + dim.d\"\r\n>\r\n @if (indeterminate) {\r\n <defs>\r\n <linearGradient [attr.id]=\"gid\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\r\n <stop offset=\"0%\" [attr.stop-color]=\"grad.strong\" stop-opacity=\"1\" />\r\n <stop offset=\"100%\" [attr.stop-color]=\"grad.light\" stop-opacity=\"1\" />\r\n </linearGradient>\r\n </defs>\r\n <circle\r\n class=\"ius-circprog__trk\"\r\n [attr.cx]=\"cx\"\r\n [attr.cy]=\"cy\"\r\n [attr.r]=\"r\"\r\n [attr.stroke-width]=\"dim.s\"\r\n [attr.pathLength]=\"100\"\r\n />\r\n <circle\r\n class=\"ius-circprog__ind\"\r\n [attr.cx]=\"cx\"\r\n [attr.cy]=\"cy\"\r\n [attr.r]=\"r\"\r\n [attr.stroke-width]=\"dim.s\"\r\n [attr.pathLength]=\"100\"\r\n [style.stroke]=\"'url(#' + gid + ')'\"\r\n />\r\n } @else {\r\n @if (grayLen > 0) {\r\n <circle\r\n class=\"ius-circprog__trk\"\r\n [attr.cx]=\"cx\"\r\n [attr.cy]=\"cy\"\r\n [attr.r]=\"r\"\r\n [attr.stroke-width]=\"dim.s\"\r\n [attr.pathLength]=\"100\"\r\n [style.stroke-dasharray]=\"grayDash\"\r\n [style.stroke-dashoffset]=\"grayOffset\"\r\n />\r\n }\r\n @if (coloredLen > 0) {\r\n <circle\r\n class=\"ius-circprog__ind\"\r\n [attr.cx]=\"cx\"\r\n [attr.cy]=\"cy\"\r\n [attr.r]=\"r\"\r\n [attr.stroke-width]=\"dim.s\"\r\n [attr.pathLength]=\"100\"\r\n [style.stroke-dasharray]=\"coloredDash\"\r\n [style.stroke-dashoffset]=\"coloredOffset\"\r\n />\r\n }\r\n }\r\n</svg>\r\n\r\n<!-- Centro: `children` del golden. Se renderiza siempre porque el slot de\r\n proyeccion es fijo en Angular; queda colapsado por CSS cuando no hay ni\r\n porcentaje ni contenido proyectado (ver `:empty` en el SCSS). -->\r\n<span class=\"ius-circprog__center\">\r\n @if (center != null) {\r\n {{ center }}\r\n }\r\n <ng-content />\r\n</span>\r\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--_cp-ind, var(--ius-info-500))}.ius-circprog__svg{display:block;transform:rotate(-90deg)}.ius-circprog__svg circle{fill:none}.ius-circprog__trk{stroke:var(--ius-neutral-3)}.ius-circprog__ind{stroke:currentColor;stroke-linecap:round;stroke-dasharray:100;transition:stroke-dashoffset var(--ius-duration-base, .22s) var(--ius-ease-standard)}:host([data-indeterminate=true]) .ius-circprog__svg{animation:ius-circprog-spin 1.2s linear infinite}:host([data-indeterminate=true]) .ius-circprog__trk{stroke:currentColor;stroke-opacity:.4}:host([data-indeterminate=true]) .ius-circprog__ind{stroke-dasharray:70 100;stroke-dashoffset:0}@keyframes ius-circprog-spin{to{transform:rotate(270deg)}}.ius-circprog__center:empty{display:none}.ius-circprog__center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);color:var(--ius-text-secondary);line-height:1}:host([data-size=small]) .ius-circprog__center{display:none}:host([data-size=medium]) .ius-circprog__center{font-size:var(--ius-fs-sm)}:host([data-size=large]) .ius-circprog__center{font-size:var(--ius-fs-sm)}@media(prefers-reduced-motion:reduce){:host([data-indeterminate=true]) .ius-circprog__svg{animation-duration:2s}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3295
3295
|
}
|
|
3296
3296
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CircularProgressComponent, decorators: [{
|
|
3297
3297
|
type: Component,
|
|
@@ -3309,7 +3309,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
3309
3309
|
'[style.--_cp-ind]': 'toneVar',
|
|
3310
3310
|
'[style.width.px]': 'dim.d',
|
|
3311
3311
|
'[style.height.px]': 'dim.d',
|
|
3312
|
-
}, template: "<svg\r\n class=\"ius-circprog__svg\"\r\n [attr.width]=\"dim.d\"\r\n [attr.height]=\"dim.d\"\r\n [attr.viewBox]=\"'0 0 ' + dim.d + ' ' + dim.d\"\r\n>\r\n @if (indeterminate) {\r\n <defs>\r\n <linearGradient [attr.id]=\"gid\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\r\n <stop offset=\"0%\" [attr.stop-color]=\"grad.strong\" stop-opacity=\"1\" />\r\n <stop offset=\"100%\" [attr.stop-color]=\"grad.light\" stop-opacity=\"1\" />\r\n </linearGradient>\r\n </defs>\r\n <circle\r\n class=\"ius-circprog__trk\"\r\n [attr.cx]=\"cx\"\r\n [attr.cy]=\"cy\"\r\n [attr.r]=\"r\"\r\n [attr.stroke-width]=\"dim.s\"\r\n [attr.pathLength]=\"100\"\r\n />\r\n <circle\r\n class=\"ius-circprog__ind\"\r\n [attr.cx]=\"cx\"\r\n [attr.cy]=\"cy\"\r\n [attr.r]=\"r\"\r\n [attr.stroke-width]=\"dim.s\"\r\n [attr.pathLength]=\"100\"\r\n [style.stroke]=\"'url(#' + gid + ')'\"\r\n />\r\n } @else {\r\n @if (grayLen > 0) {\r\n <circle\r\n class=\"ius-circprog__trk\"\r\n [attr.cx]=\"cx\"\r\n [attr.cy]=\"cy\"\r\n [attr.r]=\"r\"\r\n [attr.stroke-width]=\"dim.s\"\r\n [attr.pathLength]=\"100\"\r\n [style.stroke-dasharray]=\"grayDash\"\r\n [style.stroke-dashoffset]=\"grayOffset\"\r\n />\r\n }\r\n @if (coloredLen > 0) {\r\n <circle\r\n class=\"ius-circprog__ind\"\r\n [attr.cx]=\"cx\"\r\n [attr.cy]=\"cy\"\r\n [attr.r]=\"r\"\r\n [attr.stroke-width]=\"dim.s\"\r\n [attr.pathLength]=\"100\"\r\n [style.stroke-dasharray]=\"coloredDash\"\r\n [style.stroke-dashoffset]=\"coloredOffset\"\r\n />\r\n }\r\n }\r\n</svg>\r\n\r\n<!-- Centro: `children` del golden. Se renderiza siempre porque el slot de\r\n proyeccion es fijo en Angular; queda colapsado por CSS cuando no hay ni\r\n porcentaje ni contenido proyectado (ver `:empty` en el SCSS). -->\r\n<span class=\"ius-circprog__center\">\r\n @if (center != null) {\r\n {{ center }}\r\n }\r\n <ng-content />\r\n</span>\r\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--_cp-ind, var(--ius-info-500))}.ius-circprog__svg{display:block;transform:rotate(-90deg)}.ius-circprog__svg circle{fill:none}.ius-circprog__trk{stroke:var(--ius-neutral-3)}.ius-circprog__ind{stroke:currentColor;stroke-linecap:round;stroke-dasharray:100;transition:stroke-dashoffset var(--ius-duration-base, .22s) var(--ius-ease-standard)}:host([data-indeterminate=true]) .ius-circprog__svg{animation:ius-circprog-spin 1.2s linear infinite}:host([data-indeterminate=true]) .ius-circprog__trk{stroke:currentColor;stroke-opacity:.4}:host([data-indeterminate=true]) .ius-circprog__ind{stroke-dasharray:70 100;stroke-dashoffset:0}@keyframes ius-circprog-spin{to{transform:rotate(270deg)}}.ius-circprog__center:empty{display:none}.ius-circprog__center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold
|
|
3312
|
+
}, template: "<svg\r\n class=\"ius-circprog__svg\"\r\n [attr.width]=\"dim.d\"\r\n [attr.height]=\"dim.d\"\r\n [attr.viewBox]=\"'0 0 ' + dim.d + ' ' + dim.d\"\r\n>\r\n @if (indeterminate) {\r\n <defs>\r\n <linearGradient [attr.id]=\"gid\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\r\n <stop offset=\"0%\" [attr.stop-color]=\"grad.strong\" stop-opacity=\"1\" />\r\n <stop offset=\"100%\" [attr.stop-color]=\"grad.light\" stop-opacity=\"1\" />\r\n </linearGradient>\r\n </defs>\r\n <circle\r\n class=\"ius-circprog__trk\"\r\n [attr.cx]=\"cx\"\r\n [attr.cy]=\"cy\"\r\n [attr.r]=\"r\"\r\n [attr.stroke-width]=\"dim.s\"\r\n [attr.pathLength]=\"100\"\r\n />\r\n <circle\r\n class=\"ius-circprog__ind\"\r\n [attr.cx]=\"cx\"\r\n [attr.cy]=\"cy\"\r\n [attr.r]=\"r\"\r\n [attr.stroke-width]=\"dim.s\"\r\n [attr.pathLength]=\"100\"\r\n [style.stroke]=\"'url(#' + gid + ')'\"\r\n />\r\n } @else {\r\n @if (grayLen > 0) {\r\n <circle\r\n class=\"ius-circprog__trk\"\r\n [attr.cx]=\"cx\"\r\n [attr.cy]=\"cy\"\r\n [attr.r]=\"r\"\r\n [attr.stroke-width]=\"dim.s\"\r\n [attr.pathLength]=\"100\"\r\n [style.stroke-dasharray]=\"grayDash\"\r\n [style.stroke-dashoffset]=\"grayOffset\"\r\n />\r\n }\r\n @if (coloredLen > 0) {\r\n <circle\r\n class=\"ius-circprog__ind\"\r\n [attr.cx]=\"cx\"\r\n [attr.cy]=\"cy\"\r\n [attr.r]=\"r\"\r\n [attr.stroke-width]=\"dim.s\"\r\n [attr.pathLength]=\"100\"\r\n [style.stroke-dasharray]=\"coloredDash\"\r\n [style.stroke-dashoffset]=\"coloredOffset\"\r\n />\r\n }\r\n }\r\n</svg>\r\n\r\n<!-- Centro: `children` del golden. Se renderiza siempre porque el slot de\r\n proyeccion es fijo en Angular; queda colapsado por CSS cuando no hay ni\r\n porcentaje ni contenido proyectado (ver `:empty` en el SCSS). -->\r\n<span class=\"ius-circprog__center\">\r\n @if (center != null) {\r\n {{ center }}\r\n }\r\n <ng-content />\r\n</span>\r\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--_cp-ind, var(--ius-info-500))}.ius-circprog__svg{display:block;transform:rotate(-90deg)}.ius-circprog__svg circle{fill:none}.ius-circprog__trk{stroke:var(--ius-neutral-3)}.ius-circprog__ind{stroke:currentColor;stroke-linecap:round;stroke-dasharray:100;transition:stroke-dashoffset var(--ius-duration-base, .22s) var(--ius-ease-standard)}:host([data-indeterminate=true]) .ius-circprog__svg{animation:ius-circprog-spin 1.2s linear infinite}:host([data-indeterminate=true]) .ius-circprog__trk{stroke:currentColor;stroke-opacity:.4}:host([data-indeterminate=true]) .ius-circprog__ind{stroke-dasharray:70 100;stroke-dashoffset:0}@keyframes ius-circprog-spin{to{transform:rotate(270deg)}}.ius-circprog__center:empty{display:none}.ius-circprog__center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);color:var(--ius-text-secondary);line-height:1}:host([data-size=small]) .ius-circprog__center{display:none}:host([data-size=medium]) .ius-circprog__center{font-size:var(--ius-fs-sm)}:host([data-size=large]) .ius-circprog__center{font-size:var(--ius-fs-sm)}@media(prefers-reduced-motion:reduce){:host([data-indeterminate=true]) .ius-circprog__svg{animation-duration:2s}}\n"] }]
|
|
3313
3313
|
}], propDecorators: { value: [{
|
|
3314
3314
|
type: Input
|
|
3315
3315
|
}], max: [{
|
|
@@ -3333,7 +3333,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
3333
3333
|
args: [{ transform: booleanAttribute }]
|
|
3334
3334
|
}] } });
|
|
3335
3335
|
|
|
3336
|
-
let uid$
|
|
3336
|
+
let uid$7 = 0;
|
|
3337
3337
|
/**
|
|
3338
3338
|
*
|
|
3339
3339
|
* Cargador de **identidad** Litigiovirtual: tres fichas se deslizan por el
|
|
@@ -3355,7 +3355,7 @@ class LoadingMarkComponent {
|
|
|
3355
3355
|
/** Etiqueta accesible. */
|
|
3356
3356
|
this.ariaLabel = 'Cargando';
|
|
3357
3357
|
// IDs únicos por instancia para los <defs> del SVG (gradientes/filtro/máscara).
|
|
3358
|
-
this.id = `lm-${uid$
|
|
3358
|
+
this.id = `lm-${uid$7++}`;
|
|
3359
3359
|
this.baseId = `${this.id}-base`;
|
|
3360
3360
|
this.glowId = `${this.id}-glow`;
|
|
3361
3361
|
this.softId = `${this.id}-soft`;
|
|
@@ -3627,7 +3627,7 @@ class EmptyStateComponent {
|
|
|
3627
3627
|
return !!this.actionsTemplate || !!this.primary || !!this.secondary;
|
|
3628
3628
|
}
|
|
3629
3629
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3630
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: EmptyStateComponent, isStandalone: true, selector: "ius-empty-state", inputs: { variant: "variant", size: "size", tone: "tone", icon: "icon", illustration: "illustration", illustrationTemplate: "illustrationTemplate", title: "title", description: "description", primaryAction: "primaryAction", secondaryAction: "secondaryAction", actionsTemplate: "actionsTemplate", role: "role" }, outputs: { primaryClick: "primaryClick", secondaryClick: "secondaryClick" }, host: { properties: { "attr.data-variant": "variant", "attr.data-size": "size", "attr.data-tone": "effTone", "attr.role": "role" }, classAttribute: "ius-empty" }, ngImport: i0, template: "@if (hasVisual) {\n <div\n class=\"ius-empty__visual\"\n [attr.data-illustration]=\"hasIllustration ? 'true' : null\"\n aria-hidden=\"true\"\n >\n @if (illustrationTemplate) {\n <ng-container [ngTemplateOutlet]=\"illustrationTemplate\" />\n } @else if (illusName) {\n <ius-illustration [name]=\"illusName\" [size]=\"illusSize\" />\n } @else {\n <span translate=\"no\" class=\"ius-icon\">{{ iconName }}</span>\n }\n </div>\n}\n\n@if (title != null || description != null) {\n <div class=\"ius-empty__text\">\n @if (title != null) {\n <div class=\"ius-empty__title\">{{ title }}</div>\n }\n @if (description != null) {\n <p class=\"ius-empty__desc\">{{ description }}</p>\n }\n </div>\n}\n\n@if (hasActions) {\n <div class=\"ius-empty__actions\">\n @if (actionsTemplate) {\n <ng-container [ngTemplateOutlet]=\"actionsTemplate\" />\n } @else {\n @if (primary) {\n <ius-button\n [variant]=\"primary.variant || 'primary'\"\n [size]=\"btnSize\"\n [label]=\"primary.label\"\n [prefixIcon]=\"primary.icon\"\n [dynamic]=\"!!primary.dynamic\"\n [disabled]=\"!!primary.disabled\"\n (clicked)=\"primaryClick.emit($event)\"\n />\n }\n @if (secondary) {\n <ius-button\n [variant]=\"secondary.variant || 'secondary'\"\n [size]=\"btnSize\"\n [label]=\"secondary.label\"\n [prefixIcon]=\"secondary.icon\"\n [dynamic]=\"!!secondary.dynamic\"\n [disabled]=\"!!secondary.disabled\"\n (clicked)=\"secondaryClick.emit($event)\"\n />\n }\n }\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{--_es-circle: 56px;--_es-glyph: 28px;--_es-gap: var(--ius-space-sm);--_es-title: 16px;--_es-title-leading: 22px;--_es-desc: 14px;--_es-desc-leading: 21px;--_es-pad: 24px;--_es-max: 360px;--_es-tint: var(--ius-info-100);--_es-accent: var(--ius-info-600);box-sizing:border-box;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--_es-gap);padding:var(--_es-pad);font-family:var(--ius-font-body);-webkit-user-select:none;user-select:none}:host([data-size=compact]){--_es-circle: 40px;--_es-glyph: 22px;--_es-gap: var(--ius-space-xs);--_es-title: 14px;--_es-title-leading: 20px;--_es-desc: 12.5px;--_es-desc-leading: 18px;--_es-pad: 16px;--_es-max: 260px}:host([data-size=compact]) .ius-empty__visual:not([data-illustration=true]){background:var(--ius-neutral-2);color:var(--ius-text-tertiary)}:host([data-size=full]){--_es-circle: 72px;--_es-glyph: 36px;--_es-gap: var(--ius-space-md);--_es-title: 20px;--_es-title-leading: 28px;--_es-desc: 15px;--_es-desc-leading: 23px;--_es-pad: 40px;--_es-max: 460px}:host([data-tone=info]){--_es-tint: var(--ius-info-100);--_es-accent: var(--ius-info-600)}:host([data-tone=primary]){--_es-tint: var(--ius-primary-100);--_es-accent: var(--ius-primary-600)}:host([data-tone=success]){--_es-tint: var(--ius-success-100);--_es-accent: var(--ius-success-700)}:host([data-tone=warning]){--_es-tint: var(--ius-warning-100);--_es-accent: var(--ius-warning-700)}:host([data-tone=danger]){--_es-tint: var(--ius-danger-100);--_es-accent: var(--ius-danger-600)}:host([data-tone=neutral]){--_es-tint: var(--ius-neutral-2);--_es-accent: var(--ius-neutral-8)}.ius-empty__visual{flex:0 0 auto;width:var(--_es-circle);height:var(--_es-circle);display:inline-flex;align-items:center;justify-content:center;border-radius:var(--ius-radius-pill);background:var(--_es-tint);color:var(--_es-accent)}.ius-empty__visual .ius-icon{font-size:var(--_es-glyph);line-height:1}.ius-empty__visual[data-illustration=true]{width:auto;height:auto;background:transparent;border-radius:0;color:inherit}.ius-empty__visual[data-illustration=true] img,.ius-empty__visual[data-illustration=true] svg{display:block;max-width:100%;height:auto}.ius-empty__text{display:flex;flex-direction:column;gap:var(--ius-space-xxs);max-width:var(--_es-max)}.ius-empty__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold
|
|
3630
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: EmptyStateComponent, isStandalone: true, selector: "ius-empty-state", inputs: { variant: "variant", size: "size", tone: "tone", icon: "icon", illustration: "illustration", illustrationTemplate: "illustrationTemplate", title: "title", description: "description", primaryAction: "primaryAction", secondaryAction: "secondaryAction", actionsTemplate: "actionsTemplate", role: "role" }, outputs: { primaryClick: "primaryClick", secondaryClick: "secondaryClick" }, host: { properties: { "attr.data-variant": "variant", "attr.data-size": "size", "attr.data-tone": "effTone", "attr.role": "role" }, classAttribute: "ius-empty" }, ngImport: i0, template: "@if (hasVisual) {\n <div\n class=\"ius-empty__visual\"\n [attr.data-illustration]=\"hasIllustration ? 'true' : null\"\n aria-hidden=\"true\"\n >\n @if (illustrationTemplate) {\n <ng-container [ngTemplateOutlet]=\"illustrationTemplate\" />\n } @else if (illusName) {\n <ius-illustration [name]=\"illusName\" [size]=\"illusSize\" />\n } @else {\n <span translate=\"no\" class=\"ius-icon\">{{ iconName }}</span>\n }\n </div>\n}\n\n@if (title != null || description != null) {\n <div class=\"ius-empty__text\">\n @if (title != null) {\n <div class=\"ius-empty__title\">{{ title }}</div>\n }\n @if (description != null) {\n <p class=\"ius-empty__desc\">{{ description }}</p>\n }\n </div>\n}\n\n@if (hasActions) {\n <div class=\"ius-empty__actions\">\n @if (actionsTemplate) {\n <ng-container [ngTemplateOutlet]=\"actionsTemplate\" />\n } @else {\n @if (primary) {\n <ius-button\n [variant]=\"primary.variant || 'primary'\"\n [size]=\"btnSize\"\n [label]=\"primary.label\"\n [prefixIcon]=\"primary.icon\"\n [dynamic]=\"!!primary.dynamic\"\n [disabled]=\"!!primary.disabled\"\n (clicked)=\"primaryClick.emit($event)\"\n />\n }\n @if (secondary) {\n <ius-button\n [variant]=\"secondary.variant || 'secondary'\"\n [size]=\"btnSize\"\n [label]=\"secondary.label\"\n [prefixIcon]=\"secondary.icon\"\n [dynamic]=\"!!secondary.dynamic\"\n [disabled]=\"!!secondary.disabled\"\n (clicked)=\"secondaryClick.emit($event)\"\n />\n }\n }\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{--_es-circle: 56px;--_es-glyph: 28px;--_es-gap: var(--ius-space-sm);--_es-title: 16px;--_es-title-leading: 22px;--_es-desc: 14px;--_es-desc-leading: 21px;--_es-pad: 24px;--_es-max: 360px;--_es-tint: var(--ius-info-100);--_es-accent: var(--ius-info-600);box-sizing:border-box;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--_es-gap);padding:var(--_es-pad);font-family:var(--ius-font-body);-webkit-user-select:none;user-select:none}:host([data-size=compact]){--_es-circle: 40px;--_es-glyph: 22px;--_es-gap: var(--ius-space-xs);--_es-title: 14px;--_es-title-leading: 20px;--_es-desc: 12.5px;--_es-desc-leading: 18px;--_es-pad: 16px;--_es-max: 260px}:host([data-size=compact]) .ius-empty__visual:not([data-illustration=true]){background:var(--ius-neutral-2);color:var(--ius-text-tertiary)}:host([data-size=full]){--_es-circle: 72px;--_es-glyph: 36px;--_es-gap: var(--ius-space-md);--_es-title: 20px;--_es-title-leading: 28px;--_es-desc: 15px;--_es-desc-leading: 23px;--_es-pad: 40px;--_es-max: 460px}:host([data-tone=info]){--_es-tint: var(--ius-info-100);--_es-accent: var(--ius-info-600)}:host([data-tone=primary]){--_es-tint: var(--ius-primary-100);--_es-accent: var(--ius-primary-600)}:host([data-tone=success]){--_es-tint: var(--ius-success-100);--_es-accent: var(--ius-success-700)}:host([data-tone=warning]){--_es-tint: var(--ius-warning-100);--_es-accent: var(--ius-warning-700)}:host([data-tone=danger]){--_es-tint: var(--ius-danger-100);--_es-accent: var(--ius-danger-600)}:host([data-tone=neutral]){--_es-tint: var(--ius-neutral-2);--_es-accent: var(--ius-neutral-8)}.ius-empty__visual{flex:0 0 auto;width:var(--_es-circle);height:var(--_es-circle);display:inline-flex;align-items:center;justify-content:center;border-radius:var(--ius-radius-pill);background:var(--_es-tint);color:var(--_es-accent)}.ius-empty__visual .ius-icon{font-size:var(--_es-glyph);line-height:1}.ius-empty__visual[data-illustration=true]{width:auto;height:auto;background:transparent;border-radius:0;color:inherit}.ius-empty__visual[data-illustration=true] img,.ius-empty__visual[data-illustration=true] svg{display:block;max-width:100%;height:auto}.ius-empty__text{display:flex;flex-direction:column;gap:var(--ius-space-xxs);max-width:var(--_es-max)}.ius-empty__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--_es-title);line-height:var(--_es-title-leading);color:var(--ius-text-primary);text-wrap:pretty}.ius-empty__desc{margin:0;font-family:var(--ius-font-body);font-size:var(--_es-desc);line-height:var(--_es-desc-leading);color:var(--ius-text-secondary);text-wrap:pretty}.ius-empty__actions{margin-top:var(--ius-space-xxs);display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--ius-space-sm)}:host([data-size=compact]) .ius-empty__actions{gap:var(--ius-space-xs)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "ius-button", inputs: ["variant", "label", "prefixIcon", "sufixIcon", "dynamic", "loading", "status", "disabled", "pressed", "fullWidth", "type", "ariaLabel", "action", "size"], outputs: ["clicked"] }, { kind: "component", type: IllustrationComponent, selector: "ius-illustration", inputs: ["name", "size", "title"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3631
3631
|
}
|
|
3632
3632
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: EmptyStateComponent, decorators: [{
|
|
3633
3633
|
type: Component,
|
|
@@ -3637,7 +3637,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
3637
3637
|
'[attr.data-size]': 'size',
|
|
3638
3638
|
'[attr.data-tone]': 'effTone',
|
|
3639
3639
|
'[attr.role]': 'role',
|
|
3640
|
-
}, template: "@if (hasVisual) {\n <div\n class=\"ius-empty__visual\"\n [attr.data-illustration]=\"hasIllustration ? 'true' : null\"\n aria-hidden=\"true\"\n >\n @if (illustrationTemplate) {\n <ng-container [ngTemplateOutlet]=\"illustrationTemplate\" />\n } @else if (illusName) {\n <ius-illustration [name]=\"illusName\" [size]=\"illusSize\" />\n } @else {\n <span translate=\"no\" class=\"ius-icon\">{{ iconName }}</span>\n }\n </div>\n}\n\n@if (title != null || description != null) {\n <div class=\"ius-empty__text\">\n @if (title != null) {\n <div class=\"ius-empty__title\">{{ title }}</div>\n }\n @if (description != null) {\n <p class=\"ius-empty__desc\">{{ description }}</p>\n }\n </div>\n}\n\n@if (hasActions) {\n <div class=\"ius-empty__actions\">\n @if (actionsTemplate) {\n <ng-container [ngTemplateOutlet]=\"actionsTemplate\" />\n } @else {\n @if (primary) {\n <ius-button\n [variant]=\"primary.variant || 'primary'\"\n [size]=\"btnSize\"\n [label]=\"primary.label\"\n [prefixIcon]=\"primary.icon\"\n [dynamic]=\"!!primary.dynamic\"\n [disabled]=\"!!primary.disabled\"\n (clicked)=\"primaryClick.emit($event)\"\n />\n }\n @if (secondary) {\n <ius-button\n [variant]=\"secondary.variant || 'secondary'\"\n [size]=\"btnSize\"\n [label]=\"secondary.label\"\n [prefixIcon]=\"secondary.icon\"\n [dynamic]=\"!!secondary.dynamic\"\n [disabled]=\"!!secondary.disabled\"\n (clicked)=\"secondaryClick.emit($event)\"\n />\n }\n }\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{--_es-circle: 56px;--_es-glyph: 28px;--_es-gap: var(--ius-space-sm);--_es-title: 16px;--_es-title-leading: 22px;--_es-desc: 14px;--_es-desc-leading: 21px;--_es-pad: 24px;--_es-max: 360px;--_es-tint: var(--ius-info-100);--_es-accent: var(--ius-info-600);box-sizing:border-box;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--_es-gap);padding:var(--_es-pad);font-family:var(--ius-font-body);-webkit-user-select:none;user-select:none}:host([data-size=compact]){--_es-circle: 40px;--_es-glyph: 22px;--_es-gap: var(--ius-space-xs);--_es-title: 14px;--_es-title-leading: 20px;--_es-desc: 12.5px;--_es-desc-leading: 18px;--_es-pad: 16px;--_es-max: 260px}:host([data-size=compact]) .ius-empty__visual:not([data-illustration=true]){background:var(--ius-neutral-2);color:var(--ius-text-tertiary)}:host([data-size=full]){--_es-circle: 72px;--_es-glyph: 36px;--_es-gap: var(--ius-space-md);--_es-title: 20px;--_es-title-leading: 28px;--_es-desc: 15px;--_es-desc-leading: 23px;--_es-pad: 40px;--_es-max: 460px}:host([data-tone=info]){--_es-tint: var(--ius-info-100);--_es-accent: var(--ius-info-600)}:host([data-tone=primary]){--_es-tint: var(--ius-primary-100);--_es-accent: var(--ius-primary-600)}:host([data-tone=success]){--_es-tint: var(--ius-success-100);--_es-accent: var(--ius-success-700)}:host([data-tone=warning]){--_es-tint: var(--ius-warning-100);--_es-accent: var(--ius-warning-700)}:host([data-tone=danger]){--_es-tint: var(--ius-danger-100);--_es-accent: var(--ius-danger-600)}:host([data-tone=neutral]){--_es-tint: var(--ius-neutral-2);--_es-accent: var(--ius-neutral-8)}.ius-empty__visual{flex:0 0 auto;width:var(--_es-circle);height:var(--_es-circle);display:inline-flex;align-items:center;justify-content:center;border-radius:var(--ius-radius-pill);background:var(--_es-tint);color:var(--_es-accent)}.ius-empty__visual .ius-icon{font-size:var(--_es-glyph);line-height:1}.ius-empty__visual[data-illustration=true]{width:auto;height:auto;background:transparent;border-radius:0;color:inherit}.ius-empty__visual[data-illustration=true] img,.ius-empty__visual[data-illustration=true] svg{display:block;max-width:100%;height:auto}.ius-empty__text{display:flex;flex-direction:column;gap:var(--ius-space-xxs);max-width:var(--_es-max)}.ius-empty__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold
|
|
3640
|
+
}, template: "@if (hasVisual) {\n <div\n class=\"ius-empty__visual\"\n [attr.data-illustration]=\"hasIllustration ? 'true' : null\"\n aria-hidden=\"true\"\n >\n @if (illustrationTemplate) {\n <ng-container [ngTemplateOutlet]=\"illustrationTemplate\" />\n } @else if (illusName) {\n <ius-illustration [name]=\"illusName\" [size]=\"illusSize\" />\n } @else {\n <span translate=\"no\" class=\"ius-icon\">{{ iconName }}</span>\n }\n </div>\n}\n\n@if (title != null || description != null) {\n <div class=\"ius-empty__text\">\n @if (title != null) {\n <div class=\"ius-empty__title\">{{ title }}</div>\n }\n @if (description != null) {\n <p class=\"ius-empty__desc\">{{ description }}</p>\n }\n </div>\n}\n\n@if (hasActions) {\n <div class=\"ius-empty__actions\">\n @if (actionsTemplate) {\n <ng-container [ngTemplateOutlet]=\"actionsTemplate\" />\n } @else {\n @if (primary) {\n <ius-button\n [variant]=\"primary.variant || 'primary'\"\n [size]=\"btnSize\"\n [label]=\"primary.label\"\n [prefixIcon]=\"primary.icon\"\n [dynamic]=\"!!primary.dynamic\"\n [disabled]=\"!!primary.disabled\"\n (clicked)=\"primaryClick.emit($event)\"\n />\n }\n @if (secondary) {\n <ius-button\n [variant]=\"secondary.variant || 'secondary'\"\n [size]=\"btnSize\"\n [label]=\"secondary.label\"\n [prefixIcon]=\"secondary.icon\"\n [dynamic]=\"!!secondary.dynamic\"\n [disabled]=\"!!secondary.disabled\"\n (clicked)=\"secondaryClick.emit($event)\"\n />\n }\n }\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{--_es-circle: 56px;--_es-glyph: 28px;--_es-gap: var(--ius-space-sm);--_es-title: 16px;--_es-title-leading: 22px;--_es-desc: 14px;--_es-desc-leading: 21px;--_es-pad: 24px;--_es-max: 360px;--_es-tint: var(--ius-info-100);--_es-accent: var(--ius-info-600);box-sizing:border-box;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--_es-gap);padding:var(--_es-pad);font-family:var(--ius-font-body);-webkit-user-select:none;user-select:none}:host([data-size=compact]){--_es-circle: 40px;--_es-glyph: 22px;--_es-gap: var(--ius-space-xs);--_es-title: 14px;--_es-title-leading: 20px;--_es-desc: 12.5px;--_es-desc-leading: 18px;--_es-pad: 16px;--_es-max: 260px}:host([data-size=compact]) .ius-empty__visual:not([data-illustration=true]){background:var(--ius-neutral-2);color:var(--ius-text-tertiary)}:host([data-size=full]){--_es-circle: 72px;--_es-glyph: 36px;--_es-gap: var(--ius-space-md);--_es-title: 20px;--_es-title-leading: 28px;--_es-desc: 15px;--_es-desc-leading: 23px;--_es-pad: 40px;--_es-max: 460px}:host([data-tone=info]){--_es-tint: var(--ius-info-100);--_es-accent: var(--ius-info-600)}:host([data-tone=primary]){--_es-tint: var(--ius-primary-100);--_es-accent: var(--ius-primary-600)}:host([data-tone=success]){--_es-tint: var(--ius-success-100);--_es-accent: var(--ius-success-700)}:host([data-tone=warning]){--_es-tint: var(--ius-warning-100);--_es-accent: var(--ius-warning-700)}:host([data-tone=danger]){--_es-tint: var(--ius-danger-100);--_es-accent: var(--ius-danger-600)}:host([data-tone=neutral]){--_es-tint: var(--ius-neutral-2);--_es-accent: var(--ius-neutral-8)}.ius-empty__visual{flex:0 0 auto;width:var(--_es-circle);height:var(--_es-circle);display:inline-flex;align-items:center;justify-content:center;border-radius:var(--ius-radius-pill);background:var(--_es-tint);color:var(--_es-accent)}.ius-empty__visual .ius-icon{font-size:var(--_es-glyph);line-height:1}.ius-empty__visual[data-illustration=true]{width:auto;height:auto;background:transparent;border-radius:0;color:inherit}.ius-empty__visual[data-illustration=true] img,.ius-empty__visual[data-illustration=true] svg{display:block;max-width:100%;height:auto}.ius-empty__text{display:flex;flex-direction:column;gap:var(--ius-space-xxs);max-width:var(--_es-max)}.ius-empty__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--_es-title);line-height:var(--_es-title-leading);color:var(--ius-text-primary);text-wrap:pretty}.ius-empty__desc{margin:0;font-family:var(--ius-font-body);font-size:var(--_es-desc);line-height:var(--_es-desc-leading);color:var(--ius-text-secondary);text-wrap:pretty}.ius-empty__actions{margin-top:var(--ius-space-xxs);display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--ius-space-sm)}:host([data-size=compact]) .ius-empty__actions{gap:var(--ius-space-xs)}\n"] }]
|
|
3641
3641
|
}], propDecorators: { variant: [{
|
|
3642
3642
|
type: Input
|
|
3643
3643
|
}], size: [{
|
|
@@ -4011,11 +4011,11 @@ class DescriptionListComponent {
|
|
|
4011
4011
|
this.valueClicked.emit({ item, index: this.items().indexOf(item), event });
|
|
4012
4012
|
}
|
|
4013
4013
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DescriptionListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4014
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: DescriptionListComponent, isStandalone: true, selector: "ius-description-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, valueAlign: { classPropertyName: "valueAlign", publicName: "valueAlign", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null }, tabularValues: { classPropertyName: "tabularValues", publicName: "tabularValues", isSignal: true, isRequired: false, transformFunction: null }, termWidth: { classPropertyName: "termWidth", publicName: "termWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, ngImport: i0, template: "<!-- etiqueta: texto o TemplateRef -->\n<ng-template #labelTpl let-item=\"item\">\n @if (isTemplate(item.label)) {\n <ng-container [ngTemplateOutlet]=\"asTemplate(item.label)\" />\n } @else {\n {{ item.label }}\n }\n</ng-template>\n\n<!-- valor crudo: texto o TemplateRef -->\n<ng-template #valueRaw let-item=\"item\">\n @if (isTemplate(item.value)) {\n <ng-container [ngTemplateOutlet]=\"asTemplate(item.value)\" />\n } @else if (item.value != null) {\n {{ item.value }}\n }\n</ng-template>\n\n<!-- valor con envoltura navegable (href \u2192 <a>; clickable \u2192 <button>) -->\n<ng-template #valueCore let-item=\"item\">\n @if (item.href) {\n <a class=\"ius-dl__link\" [href]=\"item.href\" [attr.aria-label]=\"item.ariaLabel || null\">\n <ng-container [ngTemplateOutlet]=\"valueRaw\" [ngTemplateOutletContext]=\"{ item: item }\" />\n </a>\n } @else if (item.clickable) {\n <button\n type=\"button\"\n class=\"ius-dl__link\"\n [attr.aria-label]=\"item.ariaLabel || null\"\n (click)=\"onValueClick(item, $event)\"\n >\n <ng-container [ngTemplateOutlet]=\"valueRaw\" [ngTemplateOutletContext]=\"{ item: item }\" />\n </button>\n } @else {\n <ng-container [ngTemplateOutlet]=\"valueRaw\" [ngTemplateOutletContext]=\"{ item: item }\" />\n }\n</ng-template>\n\n<!-- valor con \u00EDcono decorativo opcional (va con el valor, no con la etiqueta) -->\n<ng-template #valueContent let-item=\"item\">\n @if (item.icon) {\n <span class=\"ius-dl__valwrap\" [class.ius-dl__num]=\"isTab(item)\">\n <span translate=\"no\" class=\"ius-icon ius-dl__vicon\" aria-hidden=\"true\">{{ item.icon }}</span>\n <ng-container [ngTemplateOutlet]=\"valueCore\" [ngTemplateOutletContext]=\"{ item: item }\" />\n </span>\n } @else {\n <ng-container [ngTemplateOutlet]=\"valueCore\" [ngTemplateOutletContext]=\"{ item: item }\" />\n }\n</ng-template>\n\n<dl\n class=\"ius-dl\"\n [attr.data-layout]=\"layout()\"\n [attr.data-size]=\"size() !== 'medium' ? size() : null\"\n [attr.data-value-align]=\"layout() === 'inline' ? valueAlign() : null\"\n [attr.data-divider]=\"divider() ? 'true' : null\"\n [attr.data-tabular]=\"tabularValues() ? 'true' : null\"\n [style.--_dl-term]=\"termWidth()\"\n [style.grid-template-columns]=\"gridCols()\"\n>\n @if (isGrid()) {\n @for (item of items(); track item) {\n <dt class=\"ius-dl__gterm\">\n <ng-container [ngTemplateOutlet]=\"labelTpl\" [ngTemplateOutletContext]=\"{ item: item }\" />\n </dt>\n <dd\n class=\"ius-dl__gval\"\n [class.ius-dl__num]=\"isTab(item) && !item.icon\"\n [style.grid-column]=\"gridColSpan(item)\"\n >\n <ng-container [ngTemplateOutlet]=\"valueContent\" [ngTemplateOutletContext]=\"{ item: item }\" />\n </dd>\n }\n } @else {\n @for (item of items(); track item) {\n <div class=\"ius-dl__row\">\n <dt class=\"ius-dl__term\">\n <ng-container [ngTemplateOutlet]=\"labelTpl\" [ngTemplateOutletContext]=\"{ item: item }\" />\n </dt>\n <dd class=\"ius-dl__value\" [class.ius-dl__num]=\"isTab(item) && !item.icon\">\n <ng-container [ngTemplateOutlet]=\"valueContent\" [ngTemplateOutletContext]=\"{ item: item }\" />\n </dd>\n </div>\n }\n }\n</dl>\n", styles: ["@charset \"UTF-8\";:host{display:block}.ius-dl{--_dl-value-fs: var(--ius-fs-base);--_dl-value-lh: var(--ius-lh-base);--_dl-term: max-content;--_dl-cell-py: var(--ius-space-sm);--_dl-cell-px: var(--ius-space-md);margin:0;box-sizing:border-box;min-width:0;font-family:var(--ius-font-body);color:var(--ius-text-primary)}.ius-dl[data-size=small]{--_dl-value-fs: var(--ius-fs-sm);--_dl-value-lh: var(--ius-lh-sm);--_dl-cell-py: var(--ius-space-xs);--_dl-cell-px: var(--ius-space-sm)}@container style(--ius-density: small){.ius-dl:not([data-size]){--_dl-value-fs: var(--ius-fs-sm);--_dl-value-lh: var(--ius-lh-sm);--_dl-cell-py: var(--ius-space-xs);--_dl-cell-px: var(--ius-space-sm)}}.ius-dl[data-layout=stacked]{display:flex;flex-direction:column;gap:var(--ius-space-md)}.ius-dl[data-size=small][data-layout=stacked]{gap:var(--ius-space-sm)}@container style(--ius-density: small){.ius-dl:not([data-size])[data-layout=stacked]{gap:var(--ius-space-sm)}}.ius-dl[data-layout=stacked] .ius-dl__row{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:0}.ius-dl[data-layout=inline]{display:grid;grid-template-columns:var(--_dl-term) 1fr;column-gap:var(--ius-space-md);row-gap:var(--ius-space-xs)}.ius-dl[data-layout=inline] .ius-dl__row{display:grid;grid-template-columns:subgrid;grid-column:1/-1;align-items:baseline;min-width:0}.ius-dl[data-divider=true][data-layout=inline] .ius-dl__row:not(:last-child){padding-bottom:var(--ius-space-xs);border-bottom:1px solid var(--ius-stroke)}.ius-dl[data-divider=true][data-layout=stacked] .ius-dl__row:not(:last-child){padding-bottom:var(--ius-space-md);border-bottom:1px solid var(--ius-stroke)}.ius-dl[data-layout=grid]{display:grid;gap:1px;background:var(--ius-stroke);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);overflow:hidden}.ius-dl[data-layout=grid] .ius-dl__gterm,.ius-dl[data-layout=grid] .ius-dl__gval{margin:0;min-width:0;display:flex;align-items:center;gap:var(--ius-space-xxs);padding:var(--_dl-cell-py) var(--_dl-cell-px)}.ius-dl[data-layout=grid] .ius-dl__gterm{background:var(--ius-surface-sunken);color:var(--ius-text-tertiary);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);white-space:nowrap}.ius-dl[data-layout=grid] .ius-dl__gval{background:var(--ius-surface-card);color:var(--ius-text-primary);font-size:var(--_dl-value-fs);line-height:var(--_dl-value-lh)}.ius-dl__term{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);margin:0;min-width:0;font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-tertiary)}.ius-dl__valwrap{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);min-width:0}.ius-dl__vicon{font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary);flex:0 0 auto}.ius-dl__value{margin:0;min-width:0;font-size:var(--_dl-value-fs);line-height:var(--_dl-value-lh);color:var(--ius-text-primary)}.ius-dl[data-value-align=end][data-layout=inline] .ius-dl__value{text-align:right;justify-self:end}.ius-dl__num{font-variant-numeric:tabular-nums}.ius-dl__link{color:var(--ius-primary-900);text-decoration:none;font:inherit;cursor:pointer;border-radius:var(--ius-radius-sm);transition:color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-dl__link:hover{color:var(--ius-primary-500);text-decoration:underline}.ius-dl__link:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}button.ius-dl__link{appearance:none;margin:0;padding:0;background:none;border:0;text-align:inherit}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4014
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: DescriptionListComponent, isStandalone: true, selector: "ius-description-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, valueAlign: { classPropertyName: "valueAlign", publicName: "valueAlign", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null }, tabularValues: { classPropertyName: "tabularValues", publicName: "tabularValues", isSignal: true, isRequired: false, transformFunction: null }, termWidth: { classPropertyName: "termWidth", publicName: "termWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, ngImport: i0, template: "<!-- etiqueta: texto o TemplateRef -->\n<ng-template #labelTpl let-item=\"item\">\n @if (isTemplate(item.label)) {\n <ng-container [ngTemplateOutlet]=\"asTemplate(item.label)\" />\n } @else {\n {{ item.label }}\n }\n</ng-template>\n\n<!-- valor crudo: texto o TemplateRef -->\n<ng-template #valueRaw let-item=\"item\">\n @if (isTemplate(item.value)) {\n <ng-container [ngTemplateOutlet]=\"asTemplate(item.value)\" />\n } @else if (item.value != null) {\n {{ item.value }}\n }\n</ng-template>\n\n<!-- valor con envoltura navegable (href \u2192 <a>; clickable \u2192 <button>) -->\n<ng-template #valueCore let-item=\"item\">\n @if (item.href) {\n <a class=\"ius-dl__link\" [href]=\"item.href\" [attr.aria-label]=\"item.ariaLabel || null\">\n <ng-container [ngTemplateOutlet]=\"valueRaw\" [ngTemplateOutletContext]=\"{ item: item }\" />\n </a>\n } @else if (item.clickable) {\n <button\n type=\"button\"\n class=\"ius-dl__link\"\n [attr.aria-label]=\"item.ariaLabel || null\"\n (click)=\"onValueClick(item, $event)\"\n >\n <ng-container [ngTemplateOutlet]=\"valueRaw\" [ngTemplateOutletContext]=\"{ item: item }\" />\n </button>\n } @else {\n <ng-container [ngTemplateOutlet]=\"valueRaw\" [ngTemplateOutletContext]=\"{ item: item }\" />\n }\n</ng-template>\n\n<!-- valor con \u00EDcono decorativo opcional (va con el valor, no con la etiqueta) -->\n<ng-template #valueContent let-item=\"item\">\n @if (item.icon) {\n <span class=\"ius-dl__valwrap\" [class.ius-dl__num]=\"isTab(item)\">\n <span translate=\"no\" class=\"ius-icon ius-dl__vicon\" aria-hidden=\"true\">{{ item.icon }}</span>\n <ng-container [ngTemplateOutlet]=\"valueCore\" [ngTemplateOutletContext]=\"{ item: item }\" />\n </span>\n } @else {\n <ng-container [ngTemplateOutlet]=\"valueCore\" [ngTemplateOutletContext]=\"{ item: item }\" />\n }\n</ng-template>\n\n<dl\n class=\"ius-dl\"\n [attr.data-layout]=\"layout()\"\n [attr.data-size]=\"size() !== 'medium' ? size() : null\"\n [attr.data-value-align]=\"layout() === 'inline' ? valueAlign() : null\"\n [attr.data-divider]=\"divider() ? 'true' : null\"\n [attr.data-tabular]=\"tabularValues() ? 'true' : null\"\n [style.--_dl-term]=\"termWidth()\"\n [style.grid-template-columns]=\"gridCols()\"\n>\n @if (isGrid()) {\n @for (item of items(); track item.key ?? item.label ?? $index) {\n <dt class=\"ius-dl__gterm\">\n <ng-container [ngTemplateOutlet]=\"labelTpl\" [ngTemplateOutletContext]=\"{ item: item }\" />\n </dt>\n <dd\n class=\"ius-dl__gval\"\n [class.ius-dl__num]=\"isTab(item) && !item.icon\"\n [style.grid-column]=\"gridColSpan(item)\"\n >\n <ng-container [ngTemplateOutlet]=\"valueContent\" [ngTemplateOutletContext]=\"{ item: item }\" />\n </dd>\n }\n } @else {\n @for (item of items(); track item.key ?? item.label ?? $index) {\n <div class=\"ius-dl__row\">\n <dt class=\"ius-dl__term\">\n <ng-container [ngTemplateOutlet]=\"labelTpl\" [ngTemplateOutletContext]=\"{ item: item }\" />\n </dt>\n <dd class=\"ius-dl__value\" [class.ius-dl__num]=\"isTab(item) && !item.icon\">\n <ng-container [ngTemplateOutlet]=\"valueContent\" [ngTemplateOutletContext]=\"{ item: item }\" />\n </dd>\n </div>\n }\n }\n</dl>\n", styles: ["@charset \"UTF-8\";:host{display:block}.ius-dl{--_dl-value-fs: var(--ius-fs-base);--_dl-value-lh: var(--ius-lh-base);--_dl-term: max-content;--_dl-cell-py: var(--ius-space-sm);--_dl-cell-px: var(--ius-space-md);margin:0;box-sizing:border-box;min-width:0;font-family:var(--ius-font-body);color:var(--ius-text-primary)}.ius-dl[data-size=small]{--_dl-value-fs: var(--ius-fs-sm);--_dl-value-lh: var(--ius-lh-sm);--_dl-cell-py: var(--ius-space-xs);--_dl-cell-px: var(--ius-space-sm)}@container style(--ius-density: small){.ius-dl:not([data-size]){--_dl-value-fs: var(--ius-fs-sm);--_dl-value-lh: var(--ius-lh-sm);--_dl-cell-py: var(--ius-space-xs);--_dl-cell-px: var(--ius-space-sm)}}.ius-dl[data-layout=stacked]{display:flex;flex-direction:column;gap:var(--ius-space-md)}.ius-dl[data-size=small][data-layout=stacked]{gap:var(--ius-space-sm)}@container style(--ius-density: small){.ius-dl:not([data-size])[data-layout=stacked]{gap:var(--ius-space-sm)}}.ius-dl[data-layout=stacked] .ius-dl__row{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:0}.ius-dl[data-layout=inline]{display:grid;grid-template-columns:var(--_dl-term) 1fr;column-gap:var(--ius-space-md);row-gap:var(--ius-space-xs)}.ius-dl[data-layout=inline] .ius-dl__row{display:grid;grid-template-columns:subgrid;grid-column:1/-1;align-items:baseline;min-width:0}.ius-dl[data-divider=true][data-layout=inline] .ius-dl__row:not(:last-child){padding-bottom:var(--ius-space-xs);border-bottom:1px solid var(--ius-stroke)}.ius-dl[data-divider=true][data-layout=stacked] .ius-dl__row:not(:last-child){padding-bottom:var(--ius-space-md);border-bottom:1px solid var(--ius-stroke)}.ius-dl[data-layout=grid]{display:grid;gap:1px;background:var(--ius-stroke);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);overflow:hidden}.ius-dl[data-layout=grid] .ius-dl__gterm,.ius-dl[data-layout=grid] .ius-dl__gval{margin:0;min-width:0;display:flex;align-items:center;gap:var(--ius-space-xxs);padding:var(--_dl-cell-py) var(--_dl-cell-px)}.ius-dl[data-layout=grid] .ius-dl__gterm{background:var(--ius-surface-sunken);color:var(--ius-text-tertiary);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);white-space:nowrap}.ius-dl[data-layout=grid] .ius-dl__gval{background:var(--ius-surface-card);color:var(--ius-text-primary);font-size:var(--_dl-value-fs);line-height:var(--_dl-value-lh)}.ius-dl__term{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);margin:0;min-width:0;font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-tertiary)}.ius-dl__valwrap{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);min-width:0}.ius-dl__vicon{font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary);flex:0 0 auto}.ius-dl__value{margin:0;min-width:0;font-size:var(--_dl-value-fs);line-height:var(--_dl-value-lh);color:var(--ius-text-primary)}.ius-dl[data-value-align=end][data-layout=inline] .ius-dl__value{text-align:right;justify-self:end}.ius-dl__num{font-variant-numeric:tabular-nums}.ius-dl__link{color:var(--ius-primary-900);text-decoration:none;font:inherit;cursor:pointer;border-radius:var(--ius-radius-sm);transition:color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-dl__link:hover{color:var(--ius-primary-500);text-decoration:underline}.ius-dl__link:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}button.ius-dl__link{appearance:none;margin:0;padding:0;background:none;border:0;text-align:inherit}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4015
4015
|
}
|
|
4016
4016
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DescriptionListComponent, decorators: [{
|
|
4017
4017
|
type: Component,
|
|
4018
|
-
args: [{ selector: 'ius-description-list', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- etiqueta: texto o TemplateRef -->\n<ng-template #labelTpl let-item=\"item\">\n @if (isTemplate(item.label)) {\n <ng-container [ngTemplateOutlet]=\"asTemplate(item.label)\" />\n } @else {\n {{ item.label }}\n }\n</ng-template>\n\n<!-- valor crudo: texto o TemplateRef -->\n<ng-template #valueRaw let-item=\"item\">\n @if (isTemplate(item.value)) {\n <ng-container [ngTemplateOutlet]=\"asTemplate(item.value)\" />\n } @else if (item.value != null) {\n {{ item.value }}\n }\n</ng-template>\n\n<!-- valor con envoltura navegable (href \u2192 <a>; clickable \u2192 <button>) -->\n<ng-template #valueCore let-item=\"item\">\n @if (item.href) {\n <a class=\"ius-dl__link\" [href]=\"item.href\" [attr.aria-label]=\"item.ariaLabel || null\">\n <ng-container [ngTemplateOutlet]=\"valueRaw\" [ngTemplateOutletContext]=\"{ item: item }\" />\n </a>\n } @else if (item.clickable) {\n <button\n type=\"button\"\n class=\"ius-dl__link\"\n [attr.aria-label]=\"item.ariaLabel || null\"\n (click)=\"onValueClick(item, $event)\"\n >\n <ng-container [ngTemplateOutlet]=\"valueRaw\" [ngTemplateOutletContext]=\"{ item: item }\" />\n </button>\n } @else {\n <ng-container [ngTemplateOutlet]=\"valueRaw\" [ngTemplateOutletContext]=\"{ item: item }\" />\n }\n</ng-template>\n\n<!-- valor con \u00EDcono decorativo opcional (va con el valor, no con la etiqueta) -->\n<ng-template #valueContent let-item=\"item\">\n @if (item.icon) {\n <span class=\"ius-dl__valwrap\" [class.ius-dl__num]=\"isTab(item)\">\n <span translate=\"no\" class=\"ius-icon ius-dl__vicon\" aria-hidden=\"true\">{{ item.icon }}</span>\n <ng-container [ngTemplateOutlet]=\"valueCore\" [ngTemplateOutletContext]=\"{ item: item }\" />\n </span>\n } @else {\n <ng-container [ngTemplateOutlet]=\"valueCore\" [ngTemplateOutletContext]=\"{ item: item }\" />\n }\n</ng-template>\n\n<dl\n class=\"ius-dl\"\n [attr.data-layout]=\"layout()\"\n [attr.data-size]=\"size() !== 'medium' ? size() : null\"\n [attr.data-value-align]=\"layout() === 'inline' ? valueAlign() : null\"\n [attr.data-divider]=\"divider() ? 'true' : null\"\n [attr.data-tabular]=\"tabularValues() ? 'true' : null\"\n [style.--_dl-term]=\"termWidth()\"\n [style.grid-template-columns]=\"gridCols()\"\n>\n @if (isGrid()) {\n @for (item of items(); track item) {\n <dt class=\"ius-dl__gterm\">\n <ng-container [ngTemplateOutlet]=\"labelTpl\" [ngTemplateOutletContext]=\"{ item: item }\" />\n </dt>\n <dd\n class=\"ius-dl__gval\"\n [class.ius-dl__num]=\"isTab(item) && !item.icon\"\n [style.grid-column]=\"gridColSpan(item)\"\n >\n <ng-container [ngTemplateOutlet]=\"valueContent\" [ngTemplateOutletContext]=\"{ item: item }\" />\n </dd>\n }\n } @else {\n @for (item of items(); track item) {\n <div class=\"ius-dl__row\">\n <dt class=\"ius-dl__term\">\n <ng-container [ngTemplateOutlet]=\"labelTpl\" [ngTemplateOutletContext]=\"{ item: item }\" />\n </dt>\n <dd class=\"ius-dl__value\" [class.ius-dl__num]=\"isTab(item) && !item.icon\">\n <ng-container [ngTemplateOutlet]=\"valueContent\" [ngTemplateOutletContext]=\"{ item: item }\" />\n </dd>\n </div>\n }\n }\n</dl>\n", styles: ["@charset \"UTF-8\";:host{display:block}.ius-dl{--_dl-value-fs: var(--ius-fs-base);--_dl-value-lh: var(--ius-lh-base);--_dl-term: max-content;--_dl-cell-py: var(--ius-space-sm);--_dl-cell-px: var(--ius-space-md);margin:0;box-sizing:border-box;min-width:0;font-family:var(--ius-font-body);color:var(--ius-text-primary)}.ius-dl[data-size=small]{--_dl-value-fs: var(--ius-fs-sm);--_dl-value-lh: var(--ius-lh-sm);--_dl-cell-py: var(--ius-space-xs);--_dl-cell-px: var(--ius-space-sm)}@container style(--ius-density: small){.ius-dl:not([data-size]){--_dl-value-fs: var(--ius-fs-sm);--_dl-value-lh: var(--ius-lh-sm);--_dl-cell-py: var(--ius-space-xs);--_dl-cell-px: var(--ius-space-sm)}}.ius-dl[data-layout=stacked]{display:flex;flex-direction:column;gap:var(--ius-space-md)}.ius-dl[data-size=small][data-layout=stacked]{gap:var(--ius-space-sm)}@container style(--ius-density: small){.ius-dl:not([data-size])[data-layout=stacked]{gap:var(--ius-space-sm)}}.ius-dl[data-layout=stacked] .ius-dl__row{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:0}.ius-dl[data-layout=inline]{display:grid;grid-template-columns:var(--_dl-term) 1fr;column-gap:var(--ius-space-md);row-gap:var(--ius-space-xs)}.ius-dl[data-layout=inline] .ius-dl__row{display:grid;grid-template-columns:subgrid;grid-column:1/-1;align-items:baseline;min-width:0}.ius-dl[data-divider=true][data-layout=inline] .ius-dl__row:not(:last-child){padding-bottom:var(--ius-space-xs);border-bottom:1px solid var(--ius-stroke)}.ius-dl[data-divider=true][data-layout=stacked] .ius-dl__row:not(:last-child){padding-bottom:var(--ius-space-md);border-bottom:1px solid var(--ius-stroke)}.ius-dl[data-layout=grid]{display:grid;gap:1px;background:var(--ius-stroke);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);overflow:hidden}.ius-dl[data-layout=grid] .ius-dl__gterm,.ius-dl[data-layout=grid] .ius-dl__gval{margin:0;min-width:0;display:flex;align-items:center;gap:var(--ius-space-xxs);padding:var(--_dl-cell-py) var(--_dl-cell-px)}.ius-dl[data-layout=grid] .ius-dl__gterm{background:var(--ius-surface-sunken);color:var(--ius-text-tertiary);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);white-space:nowrap}.ius-dl[data-layout=grid] .ius-dl__gval{background:var(--ius-surface-card);color:var(--ius-text-primary);font-size:var(--_dl-value-fs);line-height:var(--_dl-value-lh)}.ius-dl__term{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);margin:0;min-width:0;font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-tertiary)}.ius-dl__valwrap{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);min-width:0}.ius-dl__vicon{font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary);flex:0 0 auto}.ius-dl__value{margin:0;min-width:0;font-size:var(--_dl-value-fs);line-height:var(--_dl-value-lh);color:var(--ius-text-primary)}.ius-dl[data-value-align=end][data-layout=inline] .ius-dl__value{text-align:right;justify-self:end}.ius-dl__num{font-variant-numeric:tabular-nums}.ius-dl__link{color:var(--ius-primary-900);text-decoration:none;font:inherit;cursor:pointer;border-radius:var(--ius-radius-sm);transition:color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-dl__link:hover{color:var(--ius-primary-500);text-decoration:underline}.ius-dl__link:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}button.ius-dl__link{appearance:none;margin:0;padding:0;background:none;border:0;text-align:inherit}\n"] }]
|
|
4018
|
+
args: [{ selector: 'ius-description-list', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- etiqueta: texto o TemplateRef -->\n<ng-template #labelTpl let-item=\"item\">\n @if (isTemplate(item.label)) {\n <ng-container [ngTemplateOutlet]=\"asTemplate(item.label)\" />\n } @else {\n {{ item.label }}\n }\n</ng-template>\n\n<!-- valor crudo: texto o TemplateRef -->\n<ng-template #valueRaw let-item=\"item\">\n @if (isTemplate(item.value)) {\n <ng-container [ngTemplateOutlet]=\"asTemplate(item.value)\" />\n } @else if (item.value != null) {\n {{ item.value }}\n }\n</ng-template>\n\n<!-- valor con envoltura navegable (href \u2192 <a>; clickable \u2192 <button>) -->\n<ng-template #valueCore let-item=\"item\">\n @if (item.href) {\n <a class=\"ius-dl__link\" [href]=\"item.href\" [attr.aria-label]=\"item.ariaLabel || null\">\n <ng-container [ngTemplateOutlet]=\"valueRaw\" [ngTemplateOutletContext]=\"{ item: item }\" />\n </a>\n } @else if (item.clickable) {\n <button\n type=\"button\"\n class=\"ius-dl__link\"\n [attr.aria-label]=\"item.ariaLabel || null\"\n (click)=\"onValueClick(item, $event)\"\n >\n <ng-container [ngTemplateOutlet]=\"valueRaw\" [ngTemplateOutletContext]=\"{ item: item }\" />\n </button>\n } @else {\n <ng-container [ngTemplateOutlet]=\"valueRaw\" [ngTemplateOutletContext]=\"{ item: item }\" />\n }\n</ng-template>\n\n<!-- valor con \u00EDcono decorativo opcional (va con el valor, no con la etiqueta) -->\n<ng-template #valueContent let-item=\"item\">\n @if (item.icon) {\n <span class=\"ius-dl__valwrap\" [class.ius-dl__num]=\"isTab(item)\">\n <span translate=\"no\" class=\"ius-icon ius-dl__vicon\" aria-hidden=\"true\">{{ item.icon }}</span>\n <ng-container [ngTemplateOutlet]=\"valueCore\" [ngTemplateOutletContext]=\"{ item: item }\" />\n </span>\n } @else {\n <ng-container [ngTemplateOutlet]=\"valueCore\" [ngTemplateOutletContext]=\"{ item: item }\" />\n }\n</ng-template>\n\n<dl\n class=\"ius-dl\"\n [attr.data-layout]=\"layout()\"\n [attr.data-size]=\"size() !== 'medium' ? size() : null\"\n [attr.data-value-align]=\"layout() === 'inline' ? valueAlign() : null\"\n [attr.data-divider]=\"divider() ? 'true' : null\"\n [attr.data-tabular]=\"tabularValues() ? 'true' : null\"\n [style.--_dl-term]=\"termWidth()\"\n [style.grid-template-columns]=\"gridCols()\"\n>\n @if (isGrid()) {\n @for (item of items(); track item.key ?? item.label ?? $index) {\n <dt class=\"ius-dl__gterm\">\n <ng-container [ngTemplateOutlet]=\"labelTpl\" [ngTemplateOutletContext]=\"{ item: item }\" />\n </dt>\n <dd\n class=\"ius-dl__gval\"\n [class.ius-dl__num]=\"isTab(item) && !item.icon\"\n [style.grid-column]=\"gridColSpan(item)\"\n >\n <ng-container [ngTemplateOutlet]=\"valueContent\" [ngTemplateOutletContext]=\"{ item: item }\" />\n </dd>\n }\n } @else {\n @for (item of items(); track item.key ?? item.label ?? $index) {\n <div class=\"ius-dl__row\">\n <dt class=\"ius-dl__term\">\n <ng-container [ngTemplateOutlet]=\"labelTpl\" [ngTemplateOutletContext]=\"{ item: item }\" />\n </dt>\n <dd class=\"ius-dl__value\" [class.ius-dl__num]=\"isTab(item) && !item.icon\">\n <ng-container [ngTemplateOutlet]=\"valueContent\" [ngTemplateOutletContext]=\"{ item: item }\" />\n </dd>\n </div>\n }\n }\n</dl>\n", styles: ["@charset \"UTF-8\";:host{display:block}.ius-dl{--_dl-value-fs: var(--ius-fs-base);--_dl-value-lh: var(--ius-lh-base);--_dl-term: max-content;--_dl-cell-py: var(--ius-space-sm);--_dl-cell-px: var(--ius-space-md);margin:0;box-sizing:border-box;min-width:0;font-family:var(--ius-font-body);color:var(--ius-text-primary)}.ius-dl[data-size=small]{--_dl-value-fs: var(--ius-fs-sm);--_dl-value-lh: var(--ius-lh-sm);--_dl-cell-py: var(--ius-space-xs);--_dl-cell-px: var(--ius-space-sm)}@container style(--ius-density: small){.ius-dl:not([data-size]){--_dl-value-fs: var(--ius-fs-sm);--_dl-value-lh: var(--ius-lh-sm);--_dl-cell-py: var(--ius-space-xs);--_dl-cell-px: var(--ius-space-sm)}}.ius-dl[data-layout=stacked]{display:flex;flex-direction:column;gap:var(--ius-space-md)}.ius-dl[data-size=small][data-layout=stacked]{gap:var(--ius-space-sm)}@container style(--ius-density: small){.ius-dl:not([data-size])[data-layout=stacked]{gap:var(--ius-space-sm)}}.ius-dl[data-layout=stacked] .ius-dl__row{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:0}.ius-dl[data-layout=inline]{display:grid;grid-template-columns:var(--_dl-term) 1fr;column-gap:var(--ius-space-md);row-gap:var(--ius-space-xs)}.ius-dl[data-layout=inline] .ius-dl__row{display:grid;grid-template-columns:subgrid;grid-column:1/-1;align-items:baseline;min-width:0}.ius-dl[data-divider=true][data-layout=inline] .ius-dl__row:not(:last-child){padding-bottom:var(--ius-space-xs);border-bottom:1px solid var(--ius-stroke)}.ius-dl[data-divider=true][data-layout=stacked] .ius-dl__row:not(:last-child){padding-bottom:var(--ius-space-md);border-bottom:1px solid var(--ius-stroke)}.ius-dl[data-layout=grid]{display:grid;gap:1px;background:var(--ius-stroke);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);overflow:hidden}.ius-dl[data-layout=grid] .ius-dl__gterm,.ius-dl[data-layout=grid] .ius-dl__gval{margin:0;min-width:0;display:flex;align-items:center;gap:var(--ius-space-xxs);padding:var(--_dl-cell-py) var(--_dl-cell-px)}.ius-dl[data-layout=grid] .ius-dl__gterm{background:var(--ius-surface-sunken);color:var(--ius-text-tertiary);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);white-space:nowrap}.ius-dl[data-layout=grid] .ius-dl__gval{background:var(--ius-surface-card);color:var(--ius-text-primary);font-size:var(--_dl-value-fs);line-height:var(--_dl-value-lh)}.ius-dl__term{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);margin:0;min-width:0;font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-tertiary)}.ius-dl__valwrap{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);min-width:0}.ius-dl__vicon{font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary);flex:0 0 auto}.ius-dl__value{margin:0;min-width:0;font-size:var(--_dl-value-fs);line-height:var(--_dl-value-lh);color:var(--ius-text-primary)}.ius-dl[data-value-align=end][data-layout=inline] .ius-dl__value{text-align:right;justify-self:end}.ius-dl__num{font-variant-numeric:tabular-nums}.ius-dl__link{color:var(--ius-primary-900);text-decoration:none;font:inherit;cursor:pointer;border-radius:var(--ius-radius-sm);transition:color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-dl__link:hover{color:var(--ius-primary-500);text-decoration:underline}.ius-dl__link:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}button.ius-dl__link{appearance:none;margin:0;padding:0;background:none;border:0;text-align:inherit}\n"] }]
|
|
4019
4019
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], valueAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueAlign", required: false }] }], divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }], tabularValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabularValues", required: false }] }], termWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "termWidth", required: false }] }], valueClicked: [{ type: i0.Output, args: ["valueClicked"] }] } });
|
|
4020
4020
|
|
|
4021
4021
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
@@ -4184,7 +4184,7 @@ function placeholderContent(kind, providerLabel) {
|
|
|
4184
4184
|
};
|
|
4185
4185
|
}
|
|
4186
4186
|
}
|
|
4187
|
-
let uid$
|
|
4187
|
+
let uid$6 = 0;
|
|
4188
4188
|
/**
|
|
4189
4189
|
* CaptchaField — Ius Design v2.
|
|
4190
4190
|
*
|
|
@@ -4333,7 +4333,7 @@ class CaptchaFieldComponent {
|
|
|
4333
4333
|
this.phase = signal('loading', /* @ts-ignore */
|
|
4334
4334
|
...(ngDevMode ? [{ debugName: "phase" }] : /* istanbul ignore next */ []));
|
|
4335
4335
|
this.widgetId = null;
|
|
4336
|
-
this.baseId = `ius-cf-${uid$
|
|
4336
|
+
this.baseId = `ius-cf-${uid$6++}`;
|
|
4337
4337
|
this.hostRef = viewChild('host', /* @ts-ignore */
|
|
4338
4338
|
...(ngDevMode ? [{ debugName: "hostRef" }] : /* istanbul ignore next */ []));
|
|
4339
4339
|
this.onChange = () => { };
|
|
@@ -4705,7 +4705,7 @@ class TagComponent {
|
|
|
4705
4705
|
this.closed.emit();
|
|
4706
4706
|
}
|
|
4707
4707
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4708
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: TagComponent, isStandalone: true, selector: "ius-tag", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", closed: "closed" }, host: { listeners: { "click": "onClickHost($event)", "keydown.enter": "onKeyActivate($event)", "keydown.space": "onSpaceDown($event)", "keyup.space": "onKeyActivate($event)" }, properties: { "attr.data-tone": "tone()", "attr.data-role": "role() !== 'label' ? role() : null", "attr.data-variant": "effVariant()", "attr.data-size": "size() !== 'medium' ? size() : null", "attr.data-shape": "shape() !== 'pill' ? shape() : null", "attr.data-interactive": "isInteractive() || null", "attr.data-selected": "selected() || null", "attr.data-disabled": "disabled() || null", "attr.data-state": "state() && state() !== 'idle' ? state() : null", "attr.role": "isInteractive() ? 'button' : null", "attr.tabindex": "isInteractive() && !disabled() ? 0 : null", "attr.aria-pressed": "isInteractive() && selected() ? 'true' : null", "attr.aria-disabled": "isInteractive() && disabled() ? 'true' : null" }, classAttribute: "ius-tag" }, queries: [{ propertyName: "prefixRef", first: true, predicate: IusTagPrefixDirective, descendants: true, isSignal: true }, { propertyName: "suffixRef", first: true, predicate: IusTagSuffixDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Prefijo: prefix proyectado \u203A icon \u203A dot -->\n@if (hasPrefix()) {\n <span class=\"ius-tag__icon\" aria-hidden=\"true\"><ng-content select=\"[iusTagPrefix]\" /></span>\n} @else if (icon()) {\n <span class=\"ius-tag__icon\" aria-hidden=\"true\"><span translate=\"no\" class=\"ius-icon\">{{ icon() }}</span></span>\n} @else if (showDot()) {\n <span class=\"ius-tag__dot\" aria-hidden=\"true\"></span>\n}\n\n<!-- Etiqueta: input `label` \u203A contenido proyectado -->\n<span class=\"ius-tag__label\">\n @if (label() != null) {\n {{ label() }}\n } @else {\n <ng-content />\n }\n</span>\n\n<!-- Sufijo: count (`\u00B7 N`) \u203A suffix proyectado -->\n@if (count() != null) {\n <span class=\"ius-tag__count\">\u00B7 {{ count() }}</span>\n} @else if (hasSuffix()) {\n <span class=\"ius-tag__suffix\" aria-hidden=\"true\"><ng-content select=\"[iusTagSuffix]\" /></span>\n}\n\n<!-- Cierre: si el host es interactivo, evita bot\u00F3n-en-bot\u00F3n (span[role=button]) -->\n@if (closable()) {\n @if (isInteractive()) {\n <span\n role=\"button\"\n class=\"ius-tag__x\"\n [attr.aria-label]=\"closeLabel()\"\n tabindex=\"-1\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onClose($event)\"\n >\n <span translate=\"no\" class=\"ius-icon\">close</span>\n </span>\n } @else {\n <button\n type=\"button\"\n class=\"ius-tag__x\"\n [attr.aria-label]=\"closeLabel()\"\n tabindex=\"-1\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onClose($event)\"\n >\n <span translate=\"no\" class=\"ius-icon\">close</span>\n </button>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{-webkit-user-select:none;user-select:none;--_tag-py: 4px;--_tag-px: 10px;--_tag-fs: var(--ius-fs-sm);--_tag-lh: var(--ius-lh-sm);--_tag-gap: var(--ius-space-xs);--_tag-icon: var(--ius-icon-sm);--_tag-x: 16px;--_tag-dot: 7px;--_c-soft: var(--ius-neutral-2);--_c-soft-h: var(--ius-neutral-3);--_c-soft-p: var(--ius-neutral-4);--_c-fg: var(--ius-neutral-9);--_c-accent: var(--ius-neutral-7);--_c-solid: var(--ius-neutral-9);--_c-solid-h: var(--ius-neutral-10);--_c-solid-p: var(--ius-neutral-black);display:inline-flex;align-items:center;gap:var(--_tag-gap);box-sizing:border-box;max-width:100%;padding:var(--_tag-py) var(--_tag-px);border-radius:var(--ius-radius-pill);border:1px solid transparent;background:var(--_c-soft);color:var(--_c-fg);font-family:var(--ius-font-body);font-size:var(--_tag-fs);line-height:var(--_tag-lh);font-weight:500;vertical-align:middle;white-space:nowrap;transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-size=small]){--_tag-py: 2px;--_tag-px: 8px;--_tag-fs: var(--ius-fs-sm);--_tag-lh: var(--ius-lh-sm);--_tag-gap: var(--ius-space-xxs);--_tag-icon: var(--ius-icon-sm);--_tag-x: 14px;--_tag-dot: 6px}:host([data-size=large]){--_tag-py: 6px;--_tag-px: 12px;--_tag-fs: var(--ius-fs-base);--_tag-lh: var(--ius-lh-base);--_tag-gap: var(--ius-space-xs);--_tag-icon: var(--ius-icon-sm);--_tag-x: 18px;--_tag-dot: 8px}:host([data-shape=rounded]){border-radius:var(--ius-radius-md)}:host([data-tone=primary]){--_c-soft: var(--ius-primary-100);--_c-soft-h: var(--ius-primary-200);--_c-soft-p: var(--ius-primary-300);--_c-fg: var(--ius-primary-700);--_c-accent: var(--ius-primary-500);--_c-solid: var(--ius-primary-900);--_c-solid-h: var(--ius-primary-800);--_c-solid-p: var(--ius-primary-700)}:host([data-tone=info]){--_c-soft: var(--ius-info-100);--_c-soft-h: var(--ius-info-200);--_c-soft-p: var(--ius-info-300);--_c-fg: var(--ius-info-700);--_c-accent: var(--ius-info-500);--_c-solid: var(--ius-info-600);--_c-solid-h: var(--ius-info-700);--_c-solid-p: var(--ius-info-800)}:host([data-tone=success]){--_c-soft: var(--ius-success-100);--_c-soft-h: var(--ius-success-200);--_c-soft-p: var(--ius-success-300);--_c-fg: var(--ius-success-800);--_c-accent: var(--ius-success-600);--_c-solid: var(--ius-success-600);--_c-solid-h: var(--ius-success-700);--_c-solid-p: var(--ius-success-800)}:host([data-tone=warning]){--_c-soft: var(--ius-warning-100);--_c-soft-h: var(--ius-warning-200);--_c-soft-p: var(--ius-warning-300);--_c-fg: var(--ius-warning-800);--_c-accent: var(--ius-warning-600);--_c-solid: var(--ius-warning-600);--_c-solid-h: var(--ius-warning-700);--_c-solid-p: var(--ius-warning-800)}:host([data-tone=danger]){--_c-soft: var(--ius-danger-100);--_c-soft-h: var(--ius-danger-200);--_c-soft-p: var(--ius-danger-300);--_c-fg: var(--ius-danger-700);--_c-accent: var(--ius-danger-500);--_c-solid: var(--ius-danger-600);--_c-solid-h: var(--ius-danger-700);--_c-solid-p: var(--ius-danger-800)}:host([data-tone=neutral]){--_c-soft: var(--ius-neutral-2);--_c-soft-h: var(--ius-neutral-3);--_c-soft-p: var(--ius-neutral-4);--_c-fg: var(--ius-neutral-9);--_c-accent: var(--ius-neutral-7);--_c-solid: var(--ius-neutral-9);--_c-solid-h: var(--ius-neutral-10);--_c-solid-p: var(--ius-neutral-black)}:host([data-tone=durazno]){--_c-soft: var(--ius-durazno-100);--_c-soft-h: var(--ius-durazno-200);--_c-soft-p: var(--ius-durazno-300);--_c-fg: var(--ius-durazno-700);--_c-accent: var(--ius-durazno-500);--_c-solid: var(--ius-durazno-600);--_c-solid-h: var(--ius-durazno-700);--_c-solid-p: var(--ius-durazno-800)}:host([data-tone=banano]){--_c-soft: var(--ius-banano-100);--_c-soft-h: var(--ius-banano-200);--_c-soft-p: var(--ius-banano-300);--_c-fg: var(--ius-banano-800);--_c-accent: var(--ius-banano-500);--_c-solid: var(--ius-banano-700);--_c-solid-h: var(--ius-banano-800);--_c-solid-p: var(--ius-banano-900)}:host([data-tone=sandia]){--_c-soft: var(--ius-sandia-100);--_c-soft-h: var(--ius-sandia-200);--_c-soft-p: var(--ius-sandia-300);--_c-fg: var(--ius-sandia-700);--_c-accent: var(--ius-sandia-500);--_c-solid: var(--ius-sandia-600);--_c-solid-h: var(--ius-sandia-700);--_c-solid-p: var(--ius-sandia-800)}:host([data-tone=arandano]){--_c-soft: var(--ius-arandano-100);--_c-soft-h: var(--ius-arandano-200);--_c-soft-p: var(--ius-arandano-300);--_c-fg: var(--ius-arandano-700);--_c-accent: var(--ius-arandano-500);--_c-solid: var(--ius-arandano-600);--_c-solid-h: var(--ius-arandano-700);--_c-solid-p: var(--ius-arandano-800)}:host([data-tone=uva]){--_c-soft: var(--ius-uva-100);--_c-soft-h: var(--ius-uva-200);--_c-soft-p: var(--ius-uva-300);--_c-fg: var(--ius-uva-700);--_c-accent: var(--ius-uva-500);--_c-solid: var(--ius-uva-600);--_c-solid-h: var(--ius-uva-700);--_c-solid-p: var(--ius-uva-800)}:host([data-tone=aguacate]){--_c-soft: var(--ius-aguacate-100);--_c-soft-h: var(--ius-aguacate-200);--_c-soft-p: var(--ius-aguacate-300);--_c-fg: var(--ius-aguacate-700);--_c-accent: var(--ius-aguacate-500);--_c-solid: var(--ius-aguacate-600);--_c-solid-h: var(--ius-aguacate-700);--_c-solid-p: var(--ius-aguacate-800)}:host([data-variant=outline]){background:var(--ius-neutral-white);color:var(--ius-text-primary);border-color:var(--ius-stroke)}:host([data-variant=solid]){background:var(--_c-solid);color:var(--ius-neutral-white);border-color:transparent}.ius-tag__dot{flex:0 0 auto;width:var(--_tag-dot);height:var(--_tag-dot);border-radius:var(--ius-radius-pill);background:var(--_c-accent)}.ius-tag__icon{display:inline-flex;flex:0 0 auto;color:var(--_c-accent)}.ius-tag__icon .ius-icon{font-size:var(--_tag-icon);line-height:1}:host([data-variant=solid]) .ius-tag__icon{color:currentColor}:host([data-variant=solid]) .ius-tag__dot{background:currentColor}.ius-tag__label{min-width:0;overflow:hidden;text-overflow:ellipsis}.ius-tag__count{flex:0 0 auto;opacity:.6;font-variant-numeric:tabular-nums}.ius-tag__suffix{display:inline-flex;flex:0 0 auto;color:var(--_c-accent)}:host([data-variant=solid]) .ius-tag__suffix{color:currentColor}.ius-tag__suffix .ius-icon{font-size:var(--_tag-icon);line-height:1}.ius-tag__x{appearance:none;border:0;margin:0 -2px 0 0;padding:0;flex:0 0 auto;width:var(--_tag-x);height:var(--_tag-x);border-radius:var(--ius-radius-pill);display:inline-flex;align-items:center;justify-content:center;background:transparent;color:currentColor;opacity:.6;cursor:pointer;transition:opacity var(--ius-duration-fast) var(--ius-ease-standard),background-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-tag__x:hover{opacity:1;background:#00000014}:host([data-variant=solid]) .ius-tag__x:hover{background:#ffffff38}.ius-tag__x .ius-icon{font-size:calc(var(--_tag-x) - 3px);line-height:1}:host([data-interactive=true]){cursor:pointer;appearance:none;font:inherit}:host([data-interactive=true][data-variant=soft]:hover),:host([data-variant=soft][data-state=hover]){background:var(--_c-soft-h)}:host([data-interactive=true][data-variant=outline]:hover),:host([data-variant=outline][data-state=hover]){background:var(--_c-soft);border-color:transparent}:host([data-interactive=true][data-variant=solid]:hover),:host([data-variant=solid][data-state=hover]){background:var(--_c-solid-h)}:host([data-interactive=true][data-variant=soft]:active),:host([data-variant=soft][data-state=pressed]){background:var(--_c-soft-p)}:host([data-interactive=true][data-variant=outline]:active),:host([data-variant=outline][data-state=pressed]){background:var(--_c-soft-h);border-color:transparent}:host([data-interactive=true][data-variant=solid]:active),:host([data-variant=solid][data-state=pressed]){background:var(--_c-solid-p)}:host([data-interactive=true]:focus-visible),:host([data-state=focused]){outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--_c-accent) 35%,transparent)}:host([data-disabled=true]){background:var(--ius-neutral-2);border-color:transparent;color:var(--ius-text-disabled);cursor:default;pointer-events:none}:host([data-disabled=true]) .ius-tag__dot{background:var(--ius-text-disabled)}:host([data-disabled=true]) .ius-tag__icon,:host([data-disabled=true]) .ius-tag__suffix{color:var(--ius-text-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4708
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: TagComponent, isStandalone: true, selector: "ius-tag", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", closed: "closed" }, host: { listeners: { "click": "onClickHost($event)", "keydown.enter": "onKeyActivate($event)", "keydown.space": "onSpaceDown($event)", "keyup.space": "onKeyActivate($event)" }, properties: { "attr.data-tone": "tone()", "attr.data-role": "role() !== 'label' ? role() : null", "attr.data-variant": "effVariant()", "attr.data-size": "size() !== 'medium' ? size() : null", "attr.data-shape": "shape() !== 'pill' ? shape() : null", "attr.data-interactive": "isInteractive() || null", "attr.data-selected": "selected() || null", "attr.data-disabled": "disabled() || null", "attr.data-state": "state() && state() !== 'idle' ? state() : null", "attr.role": "isInteractive() ? 'button' : null", "attr.tabindex": "isInteractive() && !disabled() ? 0 : null", "attr.aria-pressed": "isInteractive() && selected() ? 'true' : null", "attr.aria-disabled": "isInteractive() && disabled() ? 'true' : null" }, classAttribute: "ius-tag" }, queries: [{ propertyName: "prefixRef", first: true, predicate: IusTagPrefixDirective, descendants: true, isSignal: true }, { propertyName: "suffixRef", first: true, predicate: IusTagSuffixDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Prefijo: prefix proyectado \u203A icon \u203A dot -->\n@if (hasPrefix()) {\n <span class=\"ius-tag__icon\" aria-hidden=\"true\"><ng-content select=\"[iusTagPrefix]\" /></span>\n} @else if (icon()) {\n <span class=\"ius-tag__icon\" aria-hidden=\"true\"><span translate=\"no\" class=\"ius-icon\">{{ icon() }}</span></span>\n} @else if (showDot()) {\n <span class=\"ius-tag__dot\" aria-hidden=\"true\"></span>\n}\n\n<!-- Etiqueta: input `label` \u203A contenido proyectado -->\n<span class=\"ius-tag__label\">\n @if (label() != null) {\n {{ label() }}\n } @else {\n <ng-content />\n }\n</span>\n\n<!-- Sufijo: count (`\u00B7 N`) \u203A suffix proyectado -->\n@if (count() != null) {\n <span class=\"ius-tag__count\">\u00B7 {{ count() }}</span>\n} @else if (hasSuffix()) {\n <span class=\"ius-tag__suffix\" aria-hidden=\"true\"><ng-content select=\"[iusTagSuffix]\" /></span>\n}\n\n<!-- Cierre: si el host es interactivo, evita bot\u00F3n-en-bot\u00F3n (span[role=button]).\n El tabindex negativo solo aplica en ESE caso: el foco vive en el host y la X\n se alcanza con \u00E9l. Cuando el Tag no es interactivo la X es el \u00FAnico control,\n as\u00ED que conserva su tabulaci\u00F3n natural y es alcanzable por teclado (T11). -->\n@if (closable()) {\n @if (isInteractive()) {\n <span\n role=\"button\"\n class=\"ius-tag__x\"\n [attr.aria-label]=\"closeLabel()\"\n tabindex=\"-1\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onClose($event)\"\n >\n <span translate=\"no\" class=\"ius-icon\">close</span>\n </span>\n } @else {\n <button\n type=\"button\"\n class=\"ius-tag__x\"\n [attr.aria-label]=\"closeLabel()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onClose($event)\"\n >\n <span translate=\"no\" class=\"ius-icon\">close</span>\n </button>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{-webkit-user-select:none;user-select:none;--_tag-py: 4px;--_tag-px: 10px;--_tag-fs: var(--ius-fs-sm);--_tag-lh: var(--ius-lh-sm);--_tag-gap: var(--ius-space-xs);--_tag-icon: var(--ius-icon-sm);--_tag-x: 16px;--_tag-dot: 7px;--_c-soft: var(--ius-neutral-2);--_c-soft-h: var(--ius-neutral-3);--_c-soft-p: var(--ius-neutral-4);--_c-fg: var(--ius-neutral-9);--_c-accent: var(--ius-neutral-7);--_c-solid: var(--ius-neutral-9);--_c-solid-h: var(--ius-neutral-10);--_c-solid-p: var(--ius-neutral-black);display:inline-flex;align-items:center;gap:var(--_tag-gap);box-sizing:border-box;max-width:100%;padding:var(--_tag-py) var(--_tag-px);border-radius:var(--ius-radius-pill);border:1px solid transparent;background:var(--_c-soft);color:var(--_c-fg);font-family:var(--ius-font-body);font-size:var(--_tag-fs);line-height:var(--_tag-lh);font-weight:var(--ius-fw-medium);vertical-align:middle;white-space:nowrap;transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-size=small]){--_tag-py: 2px;--_tag-px: 8px;--_tag-fs: var(--ius-fs-sm);--_tag-lh: var(--ius-lh-sm);--_tag-gap: var(--ius-space-xxs);--_tag-icon: var(--ius-icon-sm);--_tag-x: 14px;--_tag-dot: 6px}:host([data-size=large]){--_tag-py: 6px;--_tag-px: 12px;--_tag-fs: var(--ius-fs-base);--_tag-lh: var(--ius-lh-base);--_tag-gap: var(--ius-space-xs);--_tag-icon: var(--ius-icon-sm);--_tag-x: 18px;--_tag-dot: 8px}:host([data-shape=rounded]){border-radius:var(--ius-radius-md)}:host([data-tone=primary]){--_c-soft: var(--ius-primary-100);--_c-soft-h: var(--ius-primary-200);--_c-soft-p: var(--ius-primary-300);--_c-fg: var(--ius-primary-700);--_c-accent: var(--ius-primary-500);--_c-solid: var(--ius-primary-900);--_c-solid-h: var(--ius-primary-800);--_c-solid-p: var(--ius-primary-700)}:host([data-tone=info]){--_c-soft: var(--ius-info-100);--_c-soft-h: var(--ius-info-200);--_c-soft-p: var(--ius-info-300);--_c-fg: var(--ius-info-700);--_c-accent: var(--ius-info-500);--_c-solid: var(--ius-info-600);--_c-solid-h: var(--ius-info-700);--_c-solid-p: var(--ius-info-800)}:host([data-tone=success]){--_c-soft: var(--ius-success-100);--_c-soft-h: var(--ius-success-200);--_c-soft-p: var(--ius-success-300);--_c-fg: var(--ius-success-800);--_c-accent: var(--ius-success-600);--_c-solid: var(--ius-success-600);--_c-solid-h: var(--ius-success-700);--_c-solid-p: var(--ius-success-800)}:host([data-tone=warning]){--_c-soft: var(--ius-warning-100);--_c-soft-h: var(--ius-warning-200);--_c-soft-p: var(--ius-warning-300);--_c-fg: var(--ius-warning-800);--_c-accent: var(--ius-warning-600);--_c-solid: var(--ius-warning-600);--_c-solid-h: var(--ius-warning-700);--_c-solid-p: var(--ius-warning-800)}:host([data-tone=danger]){--_c-soft: var(--ius-danger-100);--_c-soft-h: var(--ius-danger-200);--_c-soft-p: var(--ius-danger-300);--_c-fg: var(--ius-danger-700);--_c-accent: var(--ius-danger-500);--_c-solid: var(--ius-danger-600);--_c-solid-h: var(--ius-danger-700);--_c-solid-p: var(--ius-danger-800)}:host([data-tone=neutral]){--_c-soft: var(--ius-neutral-2);--_c-soft-h: var(--ius-neutral-3);--_c-soft-p: var(--ius-neutral-4);--_c-fg: var(--ius-neutral-9);--_c-accent: var(--ius-neutral-7);--_c-solid: var(--ius-neutral-9);--_c-solid-h: var(--ius-neutral-10);--_c-solid-p: var(--ius-neutral-black)}:host([data-tone=durazno]){--_c-soft: var(--ius-durazno-100);--_c-soft-h: var(--ius-durazno-200);--_c-soft-p: var(--ius-durazno-300);--_c-fg: var(--ius-durazno-700);--_c-accent: var(--ius-durazno-500);--_c-solid: var(--ius-durazno-600);--_c-solid-h: var(--ius-durazno-700);--_c-solid-p: var(--ius-durazno-800)}:host([data-tone=banano]){--_c-soft: var(--ius-banano-100);--_c-soft-h: var(--ius-banano-200);--_c-soft-p: var(--ius-banano-300);--_c-fg: var(--ius-banano-800);--_c-accent: var(--ius-banano-500);--_c-solid: var(--ius-banano-700);--_c-solid-h: var(--ius-banano-800);--_c-solid-p: var(--ius-banano-900)}:host([data-tone=sandia]){--_c-soft: var(--ius-sandia-100);--_c-soft-h: var(--ius-sandia-200);--_c-soft-p: var(--ius-sandia-300);--_c-fg: var(--ius-sandia-700);--_c-accent: var(--ius-sandia-500);--_c-solid: var(--ius-sandia-600);--_c-solid-h: var(--ius-sandia-700);--_c-solid-p: var(--ius-sandia-800)}:host([data-tone=arandano]){--_c-soft: var(--ius-arandano-100);--_c-soft-h: var(--ius-arandano-200);--_c-soft-p: var(--ius-arandano-300);--_c-fg: var(--ius-arandano-700);--_c-accent: var(--ius-arandano-500);--_c-solid: var(--ius-arandano-600);--_c-solid-h: var(--ius-arandano-700);--_c-solid-p: var(--ius-arandano-800)}:host([data-tone=uva]){--_c-soft: var(--ius-uva-100);--_c-soft-h: var(--ius-uva-200);--_c-soft-p: var(--ius-uva-300);--_c-fg: var(--ius-uva-700);--_c-accent: var(--ius-uva-500);--_c-solid: var(--ius-uva-600);--_c-solid-h: var(--ius-uva-700);--_c-solid-p: var(--ius-uva-800)}:host([data-tone=aguacate]){--_c-soft: var(--ius-aguacate-100);--_c-soft-h: var(--ius-aguacate-200);--_c-soft-p: var(--ius-aguacate-300);--_c-fg: var(--ius-aguacate-700);--_c-accent: var(--ius-aguacate-500);--_c-solid: var(--ius-aguacate-600);--_c-solid-h: var(--ius-aguacate-700);--_c-solid-p: var(--ius-aguacate-800)}:host([data-variant=outline]){background:var(--ius-neutral-white);color:var(--ius-text-primary);border-color:var(--ius-stroke)}:host([data-variant=solid]){background:var(--_c-solid);color:var(--ius-neutral-white);border-color:transparent}.ius-tag__dot{flex:0 0 auto;width:var(--_tag-dot);height:var(--_tag-dot);border-radius:var(--ius-radius-pill);background:var(--_c-accent)}.ius-tag__icon{display:inline-flex;flex:0 0 auto;color:var(--_c-accent)}.ius-tag__icon .ius-icon{font-size:var(--_tag-icon);line-height:1}:host([data-variant=solid]) .ius-tag__icon{color:currentColor}:host([data-variant=solid]) .ius-tag__dot{background:currentColor}.ius-tag__label{min-width:0;overflow:hidden;text-overflow:ellipsis}.ius-tag__count{flex:0 0 auto;opacity:.6;font-variant-numeric:tabular-nums}.ius-tag__suffix{display:inline-flex;flex:0 0 auto;color:var(--_c-accent)}:host([data-variant=solid]) .ius-tag__suffix{color:currentColor}.ius-tag__suffix .ius-icon{font-size:var(--_tag-icon);line-height:1}.ius-tag__x{appearance:none;border:0;margin:0 -2px 0 0;padding:0;flex:0 0 auto;width:var(--_tag-x);height:var(--_tag-x);border-radius:var(--ius-radius-pill);display:inline-flex;align-items:center;justify-content:center;background:transparent;color:currentColor;opacity:.6;cursor:pointer;transition:opacity var(--ius-duration-fast) var(--ius-ease-standard),background-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-tag__x:hover{opacity:1;background:#00000014}:host([data-variant=solid]) .ius-tag__x:hover{background:#ffffff38}.ius-tag__x .ius-icon{font-size:calc(var(--_tag-x) - 3px);line-height:1}:host([data-interactive=true]){cursor:pointer;appearance:none;font:inherit}:host([data-interactive=true][data-variant=soft]:hover),:host([data-variant=soft][data-state=hover]){background:var(--_c-soft-h)}:host([data-interactive=true][data-variant=outline]:hover),:host([data-variant=outline][data-state=hover]){background:var(--_c-soft);border-color:transparent}:host([data-interactive=true][data-variant=solid]:hover),:host([data-variant=solid][data-state=hover]){background:var(--_c-solid-h)}:host([data-interactive=true][data-variant=soft]:active),:host([data-variant=soft][data-state=pressed]){background:var(--_c-soft-p)}:host([data-interactive=true][data-variant=outline]:active),:host([data-variant=outline][data-state=pressed]){background:var(--_c-soft-h);border-color:transparent}:host([data-interactive=true][data-variant=solid]:active),:host([data-variant=solid][data-state=pressed]){background:var(--_c-solid-p)}:host([data-interactive=true]:focus-visible),:host([data-state=focused]){outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--_c-accent) 35%,transparent)}:host([data-disabled=true]){background:var(--ius-neutral-2);border-color:transparent;color:var(--ius-text-disabled);cursor:default;pointer-events:none}:host([data-disabled=true]) .ius-tag__dot{background:var(--ius-text-disabled)}:host([data-disabled=true]) .ius-tag__icon,:host([data-disabled=true]) .ius-tag__suffix{color:var(--ius-text-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4709
4709
|
}
|
|
4710
4710
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TagComponent, decorators: [{
|
|
4711
4711
|
type: Component,
|
|
@@ -4728,7 +4728,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
4728
4728
|
'(keydown.enter)': 'onKeyActivate($event)',
|
|
4729
4729
|
'(keydown.space)': 'onSpaceDown($event)',
|
|
4730
4730
|
'(keyup.space)': 'onKeyActivate($event)',
|
|
4731
|
-
}, template: "<!-- Prefijo: prefix proyectado \u203A icon \u203A dot -->\n@if (hasPrefix()) {\n <span class=\"ius-tag__icon\" aria-hidden=\"true\"><ng-content select=\"[iusTagPrefix]\" /></span>\n} @else if (icon()) {\n <span class=\"ius-tag__icon\" aria-hidden=\"true\"><span translate=\"no\" class=\"ius-icon\">{{ icon() }}</span></span>\n} @else if (showDot()) {\n <span class=\"ius-tag__dot\" aria-hidden=\"true\"></span>\n}\n\n<!-- Etiqueta: input `label` \u203A contenido proyectado -->\n<span class=\"ius-tag__label\">\n @if (label() != null) {\n {{ label() }}\n } @else {\n <ng-content />\n }\n</span>\n\n<!-- Sufijo: count (`\u00B7 N`) \u203A suffix proyectado -->\n@if (count() != null) {\n <span class=\"ius-tag__count\">\u00B7 {{ count() }}</span>\n} @else if (hasSuffix()) {\n <span class=\"ius-tag__suffix\" aria-hidden=\"true\"><ng-content select=\"[iusTagSuffix]\" /></span>\n}\n\n<!-- Cierre: si el host es interactivo, evita bot\u00F3n-en-bot\u00F3n (span[role=button]) -->\n@if (closable()) {\n @if (isInteractive()) {\n <span\n role=\"button\"\n class=\"ius-tag__x\"\n [attr.aria-label]=\"closeLabel()\"\n tabindex=\"-1\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onClose($event)\"\n >\n <span translate=\"no\" class=\"ius-icon\">close</span>\n </span>\n } @else {\n <button\n type=\"button\"\n class=\"ius-tag__x\"\n [attr.aria-label]=\"closeLabel()\"\n tabindex=\"-1\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onClose($event)\"\n >\n <span translate=\"no\" class=\"ius-icon\">close</span>\n </button>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{-webkit-user-select:none;user-select:none;--_tag-py: 4px;--_tag-px: 10px;--_tag-fs: var(--ius-fs-sm);--_tag-lh: var(--ius-lh-sm);--_tag-gap: var(--ius-space-xs);--_tag-icon: var(--ius-icon-sm);--_tag-x: 16px;--_tag-dot: 7px;--_c-soft: var(--ius-neutral-2);--_c-soft-h: var(--ius-neutral-3);--_c-soft-p: var(--ius-neutral-4);--_c-fg: var(--ius-neutral-9);--_c-accent: var(--ius-neutral-7);--_c-solid: var(--ius-neutral-9);--_c-solid-h: var(--ius-neutral-10);--_c-solid-p: var(--ius-neutral-black);display:inline-flex;align-items:center;gap:var(--_tag-gap);box-sizing:border-box;max-width:100%;padding:var(--_tag-py) var(--_tag-px);border-radius:var(--ius-radius-pill);border:1px solid transparent;background:var(--_c-soft);color:var(--_c-fg);font-family:var(--ius-font-body);font-size:var(--_tag-fs);line-height:var(--_tag-lh);font-weight:500;vertical-align:middle;white-space:nowrap;transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-size=small]){--_tag-py: 2px;--_tag-px: 8px;--_tag-fs: var(--ius-fs-sm);--_tag-lh: var(--ius-lh-sm);--_tag-gap: var(--ius-space-xxs);--_tag-icon: var(--ius-icon-sm);--_tag-x: 14px;--_tag-dot: 6px}:host([data-size=large]){--_tag-py: 6px;--_tag-px: 12px;--_tag-fs: var(--ius-fs-base);--_tag-lh: var(--ius-lh-base);--_tag-gap: var(--ius-space-xs);--_tag-icon: var(--ius-icon-sm);--_tag-x: 18px;--_tag-dot: 8px}:host([data-shape=rounded]){border-radius:var(--ius-radius-md)}:host([data-tone=primary]){--_c-soft: var(--ius-primary-100);--_c-soft-h: var(--ius-primary-200);--_c-soft-p: var(--ius-primary-300);--_c-fg: var(--ius-primary-700);--_c-accent: var(--ius-primary-500);--_c-solid: var(--ius-primary-900);--_c-solid-h: var(--ius-primary-800);--_c-solid-p: var(--ius-primary-700)}:host([data-tone=info]){--_c-soft: var(--ius-info-100);--_c-soft-h: var(--ius-info-200);--_c-soft-p: var(--ius-info-300);--_c-fg: var(--ius-info-700);--_c-accent: var(--ius-info-500);--_c-solid: var(--ius-info-600);--_c-solid-h: var(--ius-info-700);--_c-solid-p: var(--ius-info-800)}:host([data-tone=success]){--_c-soft: var(--ius-success-100);--_c-soft-h: var(--ius-success-200);--_c-soft-p: var(--ius-success-300);--_c-fg: var(--ius-success-800);--_c-accent: var(--ius-success-600);--_c-solid: var(--ius-success-600);--_c-solid-h: var(--ius-success-700);--_c-solid-p: var(--ius-success-800)}:host([data-tone=warning]){--_c-soft: var(--ius-warning-100);--_c-soft-h: var(--ius-warning-200);--_c-soft-p: var(--ius-warning-300);--_c-fg: var(--ius-warning-800);--_c-accent: var(--ius-warning-600);--_c-solid: var(--ius-warning-600);--_c-solid-h: var(--ius-warning-700);--_c-solid-p: var(--ius-warning-800)}:host([data-tone=danger]){--_c-soft: var(--ius-danger-100);--_c-soft-h: var(--ius-danger-200);--_c-soft-p: var(--ius-danger-300);--_c-fg: var(--ius-danger-700);--_c-accent: var(--ius-danger-500);--_c-solid: var(--ius-danger-600);--_c-solid-h: var(--ius-danger-700);--_c-solid-p: var(--ius-danger-800)}:host([data-tone=neutral]){--_c-soft: var(--ius-neutral-2);--_c-soft-h: var(--ius-neutral-3);--_c-soft-p: var(--ius-neutral-4);--_c-fg: var(--ius-neutral-9);--_c-accent: var(--ius-neutral-7);--_c-solid: var(--ius-neutral-9);--_c-solid-h: var(--ius-neutral-10);--_c-solid-p: var(--ius-neutral-black)}:host([data-tone=durazno]){--_c-soft: var(--ius-durazno-100);--_c-soft-h: var(--ius-durazno-200);--_c-soft-p: var(--ius-durazno-300);--_c-fg: var(--ius-durazno-700);--_c-accent: var(--ius-durazno-500);--_c-solid: var(--ius-durazno-600);--_c-solid-h: var(--ius-durazno-700);--_c-solid-p: var(--ius-durazno-800)}:host([data-tone=banano]){--_c-soft: var(--ius-banano-100);--_c-soft-h: var(--ius-banano-200);--_c-soft-p: var(--ius-banano-300);--_c-fg: var(--ius-banano-800);--_c-accent: var(--ius-banano-500);--_c-solid: var(--ius-banano-700);--_c-solid-h: var(--ius-banano-800);--_c-solid-p: var(--ius-banano-900)}:host([data-tone=sandia]){--_c-soft: var(--ius-sandia-100);--_c-soft-h: var(--ius-sandia-200);--_c-soft-p: var(--ius-sandia-300);--_c-fg: var(--ius-sandia-700);--_c-accent: var(--ius-sandia-500);--_c-solid: var(--ius-sandia-600);--_c-solid-h: var(--ius-sandia-700);--_c-solid-p: var(--ius-sandia-800)}:host([data-tone=arandano]){--_c-soft: var(--ius-arandano-100);--_c-soft-h: var(--ius-arandano-200);--_c-soft-p: var(--ius-arandano-300);--_c-fg: var(--ius-arandano-700);--_c-accent: var(--ius-arandano-500);--_c-solid: var(--ius-arandano-600);--_c-solid-h: var(--ius-arandano-700);--_c-solid-p: var(--ius-arandano-800)}:host([data-tone=uva]){--_c-soft: var(--ius-uva-100);--_c-soft-h: var(--ius-uva-200);--_c-soft-p: var(--ius-uva-300);--_c-fg: var(--ius-uva-700);--_c-accent: var(--ius-uva-500);--_c-solid: var(--ius-uva-600);--_c-solid-h: var(--ius-uva-700);--_c-solid-p: var(--ius-uva-800)}:host([data-tone=aguacate]){--_c-soft: var(--ius-aguacate-100);--_c-soft-h: var(--ius-aguacate-200);--_c-soft-p: var(--ius-aguacate-300);--_c-fg: var(--ius-aguacate-700);--_c-accent: var(--ius-aguacate-500);--_c-solid: var(--ius-aguacate-600);--_c-solid-h: var(--ius-aguacate-700);--_c-solid-p: var(--ius-aguacate-800)}:host([data-variant=outline]){background:var(--ius-neutral-white);color:var(--ius-text-primary);border-color:var(--ius-stroke)}:host([data-variant=solid]){background:var(--_c-solid);color:var(--ius-neutral-white);border-color:transparent}.ius-tag__dot{flex:0 0 auto;width:var(--_tag-dot);height:var(--_tag-dot);border-radius:var(--ius-radius-pill);background:var(--_c-accent)}.ius-tag__icon{display:inline-flex;flex:0 0 auto;color:var(--_c-accent)}.ius-tag__icon .ius-icon{font-size:var(--_tag-icon);line-height:1}:host([data-variant=solid]) .ius-tag__icon{color:currentColor}:host([data-variant=solid]) .ius-tag__dot{background:currentColor}.ius-tag__label{min-width:0;overflow:hidden;text-overflow:ellipsis}.ius-tag__count{flex:0 0 auto;opacity:.6;font-variant-numeric:tabular-nums}.ius-tag__suffix{display:inline-flex;flex:0 0 auto;color:var(--_c-accent)}:host([data-variant=solid]) .ius-tag__suffix{color:currentColor}.ius-tag__suffix .ius-icon{font-size:var(--_tag-icon);line-height:1}.ius-tag__x{appearance:none;border:0;margin:0 -2px 0 0;padding:0;flex:0 0 auto;width:var(--_tag-x);height:var(--_tag-x);border-radius:var(--ius-radius-pill);display:inline-flex;align-items:center;justify-content:center;background:transparent;color:currentColor;opacity:.6;cursor:pointer;transition:opacity var(--ius-duration-fast) var(--ius-ease-standard),background-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-tag__x:hover{opacity:1;background:#00000014}:host([data-variant=solid]) .ius-tag__x:hover{background:#ffffff38}.ius-tag__x .ius-icon{font-size:calc(var(--_tag-x) - 3px);line-height:1}:host([data-interactive=true]){cursor:pointer;appearance:none;font:inherit}:host([data-interactive=true][data-variant=soft]:hover),:host([data-variant=soft][data-state=hover]){background:var(--_c-soft-h)}:host([data-interactive=true][data-variant=outline]:hover),:host([data-variant=outline][data-state=hover]){background:var(--_c-soft);border-color:transparent}:host([data-interactive=true][data-variant=solid]:hover),:host([data-variant=solid][data-state=hover]){background:var(--_c-solid-h)}:host([data-interactive=true][data-variant=soft]:active),:host([data-variant=soft][data-state=pressed]){background:var(--_c-soft-p)}:host([data-interactive=true][data-variant=outline]:active),:host([data-variant=outline][data-state=pressed]){background:var(--_c-soft-h);border-color:transparent}:host([data-interactive=true][data-variant=solid]:active),:host([data-variant=solid][data-state=pressed]){background:var(--_c-solid-p)}:host([data-interactive=true]:focus-visible),:host([data-state=focused]){outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--_c-accent) 35%,transparent)}:host([data-disabled=true]){background:var(--ius-neutral-2);border-color:transparent;color:var(--ius-text-disabled);cursor:default;pointer-events:none}:host([data-disabled=true]) .ius-tag__dot{background:var(--ius-text-disabled)}:host([data-disabled=true]) .ius-tag__icon,:host([data-disabled=true]) .ius-tag__suffix{color:var(--ius-text-disabled)}\n"] }]
|
|
4731
|
+
}, template: "<!-- Prefijo: prefix proyectado \u203A icon \u203A dot -->\n@if (hasPrefix()) {\n <span class=\"ius-tag__icon\" aria-hidden=\"true\"><ng-content select=\"[iusTagPrefix]\" /></span>\n} @else if (icon()) {\n <span class=\"ius-tag__icon\" aria-hidden=\"true\"><span translate=\"no\" class=\"ius-icon\">{{ icon() }}</span></span>\n} @else if (showDot()) {\n <span class=\"ius-tag__dot\" aria-hidden=\"true\"></span>\n}\n\n<!-- Etiqueta: input `label` \u203A contenido proyectado -->\n<span class=\"ius-tag__label\">\n @if (label() != null) {\n {{ label() }}\n } @else {\n <ng-content />\n }\n</span>\n\n<!-- Sufijo: count (`\u00B7 N`) \u203A suffix proyectado -->\n@if (count() != null) {\n <span class=\"ius-tag__count\">\u00B7 {{ count() }}</span>\n} @else if (hasSuffix()) {\n <span class=\"ius-tag__suffix\" aria-hidden=\"true\"><ng-content select=\"[iusTagSuffix]\" /></span>\n}\n\n<!-- Cierre: si el host es interactivo, evita bot\u00F3n-en-bot\u00F3n (span[role=button]).\n El tabindex negativo solo aplica en ESE caso: el foco vive en el host y la X\n se alcanza con \u00E9l. Cuando el Tag no es interactivo la X es el \u00FAnico control,\n as\u00ED que conserva su tabulaci\u00F3n natural y es alcanzable por teclado (T11). -->\n@if (closable()) {\n @if (isInteractive()) {\n <span\n role=\"button\"\n class=\"ius-tag__x\"\n [attr.aria-label]=\"closeLabel()\"\n tabindex=\"-1\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onClose($event)\"\n >\n <span translate=\"no\" class=\"ius-icon\">close</span>\n </span>\n } @else {\n <button\n type=\"button\"\n class=\"ius-tag__x\"\n [attr.aria-label]=\"closeLabel()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onClose($event)\"\n >\n <span translate=\"no\" class=\"ius-icon\">close</span>\n </button>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{-webkit-user-select:none;user-select:none;--_tag-py: 4px;--_tag-px: 10px;--_tag-fs: var(--ius-fs-sm);--_tag-lh: var(--ius-lh-sm);--_tag-gap: var(--ius-space-xs);--_tag-icon: var(--ius-icon-sm);--_tag-x: 16px;--_tag-dot: 7px;--_c-soft: var(--ius-neutral-2);--_c-soft-h: var(--ius-neutral-3);--_c-soft-p: var(--ius-neutral-4);--_c-fg: var(--ius-neutral-9);--_c-accent: var(--ius-neutral-7);--_c-solid: var(--ius-neutral-9);--_c-solid-h: var(--ius-neutral-10);--_c-solid-p: var(--ius-neutral-black);display:inline-flex;align-items:center;gap:var(--_tag-gap);box-sizing:border-box;max-width:100%;padding:var(--_tag-py) var(--_tag-px);border-radius:var(--ius-radius-pill);border:1px solid transparent;background:var(--_c-soft);color:var(--_c-fg);font-family:var(--ius-font-body);font-size:var(--_tag-fs);line-height:var(--_tag-lh);font-weight:var(--ius-fw-medium);vertical-align:middle;white-space:nowrap;transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-size=small]){--_tag-py: 2px;--_tag-px: 8px;--_tag-fs: var(--ius-fs-sm);--_tag-lh: var(--ius-lh-sm);--_tag-gap: var(--ius-space-xxs);--_tag-icon: var(--ius-icon-sm);--_tag-x: 14px;--_tag-dot: 6px}:host([data-size=large]){--_tag-py: 6px;--_tag-px: 12px;--_tag-fs: var(--ius-fs-base);--_tag-lh: var(--ius-lh-base);--_tag-gap: var(--ius-space-xs);--_tag-icon: var(--ius-icon-sm);--_tag-x: 18px;--_tag-dot: 8px}:host([data-shape=rounded]){border-radius:var(--ius-radius-md)}:host([data-tone=primary]){--_c-soft: var(--ius-primary-100);--_c-soft-h: var(--ius-primary-200);--_c-soft-p: var(--ius-primary-300);--_c-fg: var(--ius-primary-700);--_c-accent: var(--ius-primary-500);--_c-solid: var(--ius-primary-900);--_c-solid-h: var(--ius-primary-800);--_c-solid-p: var(--ius-primary-700)}:host([data-tone=info]){--_c-soft: var(--ius-info-100);--_c-soft-h: var(--ius-info-200);--_c-soft-p: var(--ius-info-300);--_c-fg: var(--ius-info-700);--_c-accent: var(--ius-info-500);--_c-solid: var(--ius-info-600);--_c-solid-h: var(--ius-info-700);--_c-solid-p: var(--ius-info-800)}:host([data-tone=success]){--_c-soft: var(--ius-success-100);--_c-soft-h: var(--ius-success-200);--_c-soft-p: var(--ius-success-300);--_c-fg: var(--ius-success-800);--_c-accent: var(--ius-success-600);--_c-solid: var(--ius-success-600);--_c-solid-h: var(--ius-success-700);--_c-solid-p: var(--ius-success-800)}:host([data-tone=warning]){--_c-soft: var(--ius-warning-100);--_c-soft-h: var(--ius-warning-200);--_c-soft-p: var(--ius-warning-300);--_c-fg: var(--ius-warning-800);--_c-accent: var(--ius-warning-600);--_c-solid: var(--ius-warning-600);--_c-solid-h: var(--ius-warning-700);--_c-solid-p: var(--ius-warning-800)}:host([data-tone=danger]){--_c-soft: var(--ius-danger-100);--_c-soft-h: var(--ius-danger-200);--_c-soft-p: var(--ius-danger-300);--_c-fg: var(--ius-danger-700);--_c-accent: var(--ius-danger-500);--_c-solid: var(--ius-danger-600);--_c-solid-h: var(--ius-danger-700);--_c-solid-p: var(--ius-danger-800)}:host([data-tone=neutral]){--_c-soft: var(--ius-neutral-2);--_c-soft-h: var(--ius-neutral-3);--_c-soft-p: var(--ius-neutral-4);--_c-fg: var(--ius-neutral-9);--_c-accent: var(--ius-neutral-7);--_c-solid: var(--ius-neutral-9);--_c-solid-h: var(--ius-neutral-10);--_c-solid-p: var(--ius-neutral-black)}:host([data-tone=durazno]){--_c-soft: var(--ius-durazno-100);--_c-soft-h: var(--ius-durazno-200);--_c-soft-p: var(--ius-durazno-300);--_c-fg: var(--ius-durazno-700);--_c-accent: var(--ius-durazno-500);--_c-solid: var(--ius-durazno-600);--_c-solid-h: var(--ius-durazno-700);--_c-solid-p: var(--ius-durazno-800)}:host([data-tone=banano]){--_c-soft: var(--ius-banano-100);--_c-soft-h: var(--ius-banano-200);--_c-soft-p: var(--ius-banano-300);--_c-fg: var(--ius-banano-800);--_c-accent: var(--ius-banano-500);--_c-solid: var(--ius-banano-700);--_c-solid-h: var(--ius-banano-800);--_c-solid-p: var(--ius-banano-900)}:host([data-tone=sandia]){--_c-soft: var(--ius-sandia-100);--_c-soft-h: var(--ius-sandia-200);--_c-soft-p: var(--ius-sandia-300);--_c-fg: var(--ius-sandia-700);--_c-accent: var(--ius-sandia-500);--_c-solid: var(--ius-sandia-600);--_c-solid-h: var(--ius-sandia-700);--_c-solid-p: var(--ius-sandia-800)}:host([data-tone=arandano]){--_c-soft: var(--ius-arandano-100);--_c-soft-h: var(--ius-arandano-200);--_c-soft-p: var(--ius-arandano-300);--_c-fg: var(--ius-arandano-700);--_c-accent: var(--ius-arandano-500);--_c-solid: var(--ius-arandano-600);--_c-solid-h: var(--ius-arandano-700);--_c-solid-p: var(--ius-arandano-800)}:host([data-tone=uva]){--_c-soft: var(--ius-uva-100);--_c-soft-h: var(--ius-uva-200);--_c-soft-p: var(--ius-uva-300);--_c-fg: var(--ius-uva-700);--_c-accent: var(--ius-uva-500);--_c-solid: var(--ius-uva-600);--_c-solid-h: var(--ius-uva-700);--_c-solid-p: var(--ius-uva-800)}:host([data-tone=aguacate]){--_c-soft: var(--ius-aguacate-100);--_c-soft-h: var(--ius-aguacate-200);--_c-soft-p: var(--ius-aguacate-300);--_c-fg: var(--ius-aguacate-700);--_c-accent: var(--ius-aguacate-500);--_c-solid: var(--ius-aguacate-600);--_c-solid-h: var(--ius-aguacate-700);--_c-solid-p: var(--ius-aguacate-800)}:host([data-variant=outline]){background:var(--ius-neutral-white);color:var(--ius-text-primary);border-color:var(--ius-stroke)}:host([data-variant=solid]){background:var(--_c-solid);color:var(--ius-neutral-white);border-color:transparent}.ius-tag__dot{flex:0 0 auto;width:var(--_tag-dot);height:var(--_tag-dot);border-radius:var(--ius-radius-pill);background:var(--_c-accent)}.ius-tag__icon{display:inline-flex;flex:0 0 auto;color:var(--_c-accent)}.ius-tag__icon .ius-icon{font-size:var(--_tag-icon);line-height:1}:host([data-variant=solid]) .ius-tag__icon{color:currentColor}:host([data-variant=solid]) .ius-tag__dot{background:currentColor}.ius-tag__label{min-width:0;overflow:hidden;text-overflow:ellipsis}.ius-tag__count{flex:0 0 auto;opacity:.6;font-variant-numeric:tabular-nums}.ius-tag__suffix{display:inline-flex;flex:0 0 auto;color:var(--_c-accent)}:host([data-variant=solid]) .ius-tag__suffix{color:currentColor}.ius-tag__suffix .ius-icon{font-size:var(--_tag-icon);line-height:1}.ius-tag__x{appearance:none;border:0;margin:0 -2px 0 0;padding:0;flex:0 0 auto;width:var(--_tag-x);height:var(--_tag-x);border-radius:var(--ius-radius-pill);display:inline-flex;align-items:center;justify-content:center;background:transparent;color:currentColor;opacity:.6;cursor:pointer;transition:opacity var(--ius-duration-fast) var(--ius-ease-standard),background-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-tag__x:hover{opacity:1;background:#00000014}:host([data-variant=solid]) .ius-tag__x:hover{background:#ffffff38}.ius-tag__x .ius-icon{font-size:calc(var(--_tag-x) - 3px);line-height:1}:host([data-interactive=true]){cursor:pointer;appearance:none;font:inherit}:host([data-interactive=true][data-variant=soft]:hover),:host([data-variant=soft][data-state=hover]){background:var(--_c-soft-h)}:host([data-interactive=true][data-variant=outline]:hover),:host([data-variant=outline][data-state=hover]){background:var(--_c-soft);border-color:transparent}:host([data-interactive=true][data-variant=solid]:hover),:host([data-variant=solid][data-state=hover]){background:var(--_c-solid-h)}:host([data-interactive=true][data-variant=soft]:active),:host([data-variant=soft][data-state=pressed]){background:var(--_c-soft-p)}:host([data-interactive=true][data-variant=outline]:active),:host([data-variant=outline][data-state=pressed]){background:var(--_c-soft-h);border-color:transparent}:host([data-interactive=true][data-variant=solid]:active),:host([data-variant=solid][data-state=pressed]){background:var(--_c-solid-p)}:host([data-interactive=true]:focus-visible),:host([data-state=focused]){outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--_c-accent) 35%,transparent)}:host([data-disabled=true]){background:var(--ius-neutral-2);border-color:transparent;color:var(--ius-text-disabled);cursor:default;pointer-events:none}:host([data-disabled=true]) .ius-tag__dot{background:var(--ius-text-disabled)}:host([data-disabled=true]) .ius-tag__icon,:host([data-disabled=true]) .ius-tag__suffix{color:var(--ius-text-disabled)}\n"] }]
|
|
4732
4732
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], closed: [{ type: i0.Output, args: ["closed"] }], prefixRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusTagPrefixDirective), { isSignal: true }] }], suffixRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusTagSuffixDirective), { isSignal: true }] }] } });
|
|
4733
4733
|
|
|
4734
4734
|
/**
|
|
@@ -4919,7 +4919,7 @@ class MenuComponent {
|
|
|
4919
4919
|
this.itemClick.emit({ item, event });
|
|
4920
4920
|
}
|
|
4921
4921
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4922
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MenuComponent, isStandalone: true, selector: "ius-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", itemClick: "itemClick" }, host: { attributes: { "role": "menu" }, properties: { "attr.aria-label": "ariaLabel() || null" }, classAttribute: "ius-menu" }, ngImport: i0, template: "@if (label()) {\r\n <div class=\"ius-menu__label\">{{ label() }}</div>\r\n}\r\n\r\n@for (row of rows(); track row.key) {\r\n @if (row.kind === 'separator') {\r\n <div class=\"ius-menu__sep\" role=\"separator\"></div>\r\n } @else {\r\n <ius-menu-item\r\n variant=\"menu\"\r\n size=\"small\"\r\n itemRole=\"menuitem\"\r\n [icon]=\"row.item!.icon\"\r\n [label]=\"row.item!.label\"\r\n [danger]=\"!!row.item!.danger\"\r\n [disabled]=\"!!row.item!.disabled\"\r\n [selected]=\"!!row.selected\"\r\n (clicked)=\"onItemClick(row, $event)\"\r\n >\r\n <!-- selectable \u2192 carril fijo del check; si no, el trailing de la opci\u00F3n -->\r\n @if (selectable()) {\r\n <span class=\"ius-menu__check\" iusMenuItemTrailing>\r\n @if (row.selected) {\r\n <span translate=\"no\" class=\"ius-icon\">check</span>\r\n }\r\n </span>\r\n } @else if (trailingTpl(row.item!)) {\r\n <span iusMenuItemTrailing>\r\n <ng-container [ngTemplateOutlet]=\"trailingTpl(row.item!)!\" />\r\n </span>\r\n } @else if (trailingText(row.item!)) {\r\n <span iusMenuItemTrailing>{{ trailingText(row.item!) }}</span>\r\n }\r\n </ius-menu-item>\r\n }\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:180px;max-width:320px}.ius-menu__sep{height:1px;background:var(--ius-stroke);margin:var(--ius-space-xxs) 0}.ius-menu__label{padding:var(--ius-space-xs) var(--ius-space-xs) var(--ius-space-xxs);font:var(--ius-fw-semibold
|
|
4922
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MenuComponent, isStandalone: true, selector: "ius-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", itemClick: "itemClick" }, host: { attributes: { "role": "menu" }, properties: { "attr.aria-label": "ariaLabel() || null" }, classAttribute: "ius-menu" }, ngImport: i0, template: "@if (label()) {\r\n <div class=\"ius-menu__label\">{{ label() }}</div>\r\n}\r\n\r\n@for (row of rows(); track row.key) {\r\n @if (row.kind === 'separator') {\r\n <div class=\"ius-menu__sep\" role=\"separator\"></div>\r\n } @else {\r\n <ius-menu-item\r\n variant=\"menu\"\r\n size=\"small\"\r\n itemRole=\"menuitem\"\r\n [icon]=\"row.item!.icon\"\r\n [label]=\"row.item!.label\"\r\n [danger]=\"!!row.item!.danger\"\r\n [disabled]=\"!!row.item!.disabled\"\r\n [selected]=\"!!row.selected\"\r\n (clicked)=\"onItemClick(row, $event)\"\r\n >\r\n <!-- selectable \u2192 carril fijo del check; si no, el trailing de la opci\u00F3n -->\r\n @if (selectable()) {\r\n <span class=\"ius-menu__check\" iusMenuItemTrailing>\r\n @if (row.selected) {\r\n <span translate=\"no\" class=\"ius-icon\">check</span>\r\n }\r\n </span>\r\n } @else if (trailingTpl(row.item!)) {\r\n <span iusMenuItemTrailing>\r\n <ng-container [ngTemplateOutlet]=\"trailingTpl(row.item!)!\" />\r\n </span>\r\n } @else if (trailingText(row.item!)) {\r\n <span iusMenuItemTrailing>{{ trailingText(row.item!) }}</span>\r\n }\r\n </ius-menu-item>\r\n }\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:180px;max-width:320px}.ius-menu__sep{height:1px;background:var(--ius-stroke);margin:var(--ius-space-xxs) 0}.ius-menu__label{padding:var(--ius-space-xs) var(--ius-space-xs) var(--ius-space-xxs);font:var(--ius-fw-semibold) var(--ius-fs-sm)/1.2 var(--ius-font-display);letter-spacing:.05em;text-transform:uppercase;color:var(--ius-text-tertiary)}.ius-menu__check{flex:0 0 auto;width:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--ius-primary-700)}.ius-menu__check .ius-icon{font-size:var(--ius-icon-md)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MenuItemComponent, selector: "ius-menu-item", inputs: ["icon", "label", "badge", "variant", "size", "selected", "disabled", "danger", "state", "href", "ariaLabel", "itemRole"], outputs: ["clicked"] }, { kind: "directive", type: IusMenuItemTrailingDirective, selector: "[iusMenuItemTrailing]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4923
4923
|
}
|
|
4924
4924
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MenuComponent, decorators: [{
|
|
4925
4925
|
type: Component,
|
|
@@ -4927,7 +4927,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
4927
4927
|
class: 'ius-menu',
|
|
4928
4928
|
role: 'menu',
|
|
4929
4929
|
'[attr.aria-label]': 'ariaLabel() || null',
|
|
4930
|
-
}, template: "@if (label()) {\r\n <div class=\"ius-menu__label\">{{ label() }}</div>\r\n}\r\n\r\n@for (row of rows(); track row.key) {\r\n @if (row.kind === 'separator') {\r\n <div class=\"ius-menu__sep\" role=\"separator\"></div>\r\n } @else {\r\n <ius-menu-item\r\n variant=\"menu\"\r\n size=\"small\"\r\n itemRole=\"menuitem\"\r\n [icon]=\"row.item!.icon\"\r\n [label]=\"row.item!.label\"\r\n [danger]=\"!!row.item!.danger\"\r\n [disabled]=\"!!row.item!.disabled\"\r\n [selected]=\"!!row.selected\"\r\n (clicked)=\"onItemClick(row, $event)\"\r\n >\r\n <!-- selectable \u2192 carril fijo del check; si no, el trailing de la opci\u00F3n -->\r\n @if (selectable()) {\r\n <span class=\"ius-menu__check\" iusMenuItemTrailing>\r\n @if (row.selected) {\r\n <span translate=\"no\" class=\"ius-icon\">check</span>\r\n }\r\n </span>\r\n } @else if (trailingTpl(row.item!)) {\r\n <span iusMenuItemTrailing>\r\n <ng-container [ngTemplateOutlet]=\"trailingTpl(row.item!)!\" />\r\n </span>\r\n } @else if (trailingText(row.item!)) {\r\n <span iusMenuItemTrailing>{{ trailingText(row.item!) }}</span>\r\n }\r\n </ius-menu-item>\r\n }\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:180px;max-width:320px}.ius-menu__sep{height:1px;background:var(--ius-stroke);margin:var(--ius-space-xxs) 0}.ius-menu__label{padding:var(--ius-space-xs) var(--ius-space-xs) var(--ius-space-xxs);font:var(--ius-fw-semibold
|
|
4930
|
+
}, template: "@if (label()) {\r\n <div class=\"ius-menu__label\">{{ label() }}</div>\r\n}\r\n\r\n@for (row of rows(); track row.key) {\r\n @if (row.kind === 'separator') {\r\n <div class=\"ius-menu__sep\" role=\"separator\"></div>\r\n } @else {\r\n <ius-menu-item\r\n variant=\"menu\"\r\n size=\"small\"\r\n itemRole=\"menuitem\"\r\n [icon]=\"row.item!.icon\"\r\n [label]=\"row.item!.label\"\r\n [danger]=\"!!row.item!.danger\"\r\n [disabled]=\"!!row.item!.disabled\"\r\n [selected]=\"!!row.selected\"\r\n (clicked)=\"onItemClick(row, $event)\"\r\n >\r\n <!-- selectable \u2192 carril fijo del check; si no, el trailing de la opci\u00F3n -->\r\n @if (selectable()) {\r\n <span class=\"ius-menu__check\" iusMenuItemTrailing>\r\n @if (row.selected) {\r\n <span translate=\"no\" class=\"ius-icon\">check</span>\r\n }\r\n </span>\r\n } @else if (trailingTpl(row.item!)) {\r\n <span iusMenuItemTrailing>\r\n <ng-container [ngTemplateOutlet]=\"trailingTpl(row.item!)!\" />\r\n </span>\r\n } @else if (trailingText(row.item!)) {\r\n <span iusMenuItemTrailing>{{ trailingText(row.item!) }}</span>\r\n }\r\n </ius-menu-item>\r\n }\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:180px;max-width:320px}.ius-menu__sep{height:1px;background:var(--ius-stroke);margin:var(--ius-space-xxs) 0}.ius-menu__label{padding:var(--ius-space-xs) var(--ius-space-xs) var(--ius-space-xxs);font:var(--ius-fw-semibold) var(--ius-fs-sm)/1.2 var(--ius-font-display);letter-spacing:.05em;text-transform:uppercase;color:var(--ius-text-tertiary)}.ius-menu__check{flex:0 0 auto;width:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--ius-primary-700)}.ius-menu__check .ius-icon{font-size:var(--ius-icon-md)}\n"] }]
|
|
4931
4931
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
|
|
4932
4932
|
|
|
4933
4933
|
/**
|
|
@@ -5040,11 +5040,11 @@ class DropdownComponent {
|
|
|
5040
5040
|
this.onOpenChange(false);
|
|
5041
5041
|
}
|
|
5042
5042
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5043
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: DropdownComponent, isStandalone: true, selector: "ius-dropdown", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, triggerIcon: { classPropertyName: "triggerIcon", publicName: "triggerIcon", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", openChange: "openChange" }, host: { classAttribute: "ius-dropdown" }, queries: [{ propertyName: "customTrigger", first: true, predicate: IusDropdownTriggerDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ius-popover\r\n [placement]=\"placement()\"\r\n trigger=\"click\"\r\n [showArrow]=\"false\"\r\n [open]=\"isOpen()\"\r\n [dismissable]=\"true\"\r\n panelClass=\"ius-dropdown-pop\"\r\n (openChange)=\"onOpenChange($event)\"\r\n>\r\n <!-- Disparador: propio proyectado \u203A ghost/outline texto+chevron por defecto -->\r\n @if (customTrigger()) {\r\n <ng-content select=\"[iusDropdownTrigger]\" />\r\n } @else {\r\n <button\r\n type=\"button\"\r\n class=\"ius-dropdown__trigger\"\r\n [attr.data-open]=\"isOpen() ? 'true' : null\"\r\n [attr.data-tone]=\"tone() !== 'primary' ? tone() : null\"\r\n [attr.data-variant]=\"variant() !== 'ghost' ? variant() : null\"\r\n [attr.aria-haspopup]=\"'menu'\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n [attr.aria-label]=\"ariaLabel() || null\"\r\n >\r\n @if (triggerIcon()) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ triggerIcon() }}</span>\r\n }\r\n {{ triggerText() }}\r\n <span translate=\"no\" class=\"ius-icon ius-dropdown__chev\">expand_more</span>\r\n </button>\r\n }\r\n\r\n <!-- Panel: la superficie Menu (el Popover solo la ancla) -->\r\n <div iusPopoverContent>\r\n <ius-menu\r\n [items]=\"items()\"\r\n [selectable]=\"selectable()\"\r\n [value]=\"value()\"\r\n [label]=\"menuLabel()\"\r\n [ariaLabel]=\"ariaLabel()\"\r\n (valueChange)=\"onValueChange($event)\"\r\n (itemClick)=\"onItemClick()\"\r\n />\r\n </div>\r\n</ius-popover>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}.ius-dropdown__trigger{appearance:none;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font:var(--ius-fw-semibold
|
|
5043
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: DropdownComponent, isStandalone: true, selector: "ius-dropdown", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, triggerIcon: { classPropertyName: "triggerIcon", publicName: "triggerIcon", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", openChange: "openChange" }, host: { classAttribute: "ius-dropdown" }, queries: [{ propertyName: "customTrigger", first: true, predicate: IusDropdownTriggerDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ius-popover\r\n [placement]=\"placement()\"\r\n trigger=\"click\"\r\n [showArrow]=\"false\"\r\n [open]=\"isOpen()\"\r\n [dismissable]=\"true\"\r\n panelClass=\"ius-dropdown-pop\"\r\n (openChange)=\"onOpenChange($event)\"\r\n>\r\n <!-- Disparador: propio proyectado \u203A ghost/outline texto+chevron por defecto -->\r\n @if (customTrigger()) {\r\n <ng-content select=\"[iusDropdownTrigger]\" />\r\n } @else {\r\n <button\r\n type=\"button\"\r\n class=\"ius-dropdown__trigger\"\r\n [attr.data-open]=\"isOpen() ? 'true' : null\"\r\n [attr.data-tone]=\"tone() !== 'primary' ? tone() : null\"\r\n [attr.data-variant]=\"variant() !== 'ghost' ? variant() : null\"\r\n [attr.aria-haspopup]=\"'menu'\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n [attr.aria-label]=\"ariaLabel() || null\"\r\n >\r\n @if (triggerIcon()) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ triggerIcon() }}</span>\r\n }\r\n {{ triggerText() }}\r\n <span translate=\"no\" class=\"ius-icon ius-dropdown__chev\">expand_more</span>\r\n </button>\r\n }\r\n\r\n <!-- Panel: la superficie Menu (el Popover solo la ancla) -->\r\n <div iusPopoverContent>\r\n <ius-menu\r\n [items]=\"items()\"\r\n [selectable]=\"selectable()\"\r\n [value]=\"value()\"\r\n [label]=\"menuLabel()\"\r\n [ariaLabel]=\"ariaLabel()\"\r\n (valueChange)=\"onValueChange($event)\"\r\n (itemClick)=\"onItemClick()\"\r\n />\r\n </div>\r\n</ius-popover>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}.ius-dropdown__trigger{appearance:none;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font:var(--ius-fw-semibold) var(--ius-fs-sm)/1.2 var(--ius-font-body);color:var(--ius-primary-700);padding:var(--ius-space-xxs) var(--ius-space-xs);border-radius:var(--ius-radius-sm);white-space:nowrap;transition:background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-dropdown__trigger:hover{background:var(--ius-neutral-2)}.ius-dropdown__trigger[data-tone=neutral]{color:var(--ius-text-secondary)}.ius-dropdown__trigger[data-tone=neutral]:hover,.ius-dropdown__trigger[data-tone=neutral][data-open=true]{color:var(--ius-text-primary)}.ius-dropdown__trigger:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-dropdown__trigger .ius-icon{font-size:var(--ius-icon-md)}.ius-dropdown__trigger .ius-dropdown__chev{transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-dropdown__trigger[data-open=true] .ius-dropdown__chev{transform:rotate(180deg)}.ius-dropdown__trigger[data-variant=outline]{border:1px solid var(--ius-stroke);background:var(--ius-neutral-white);color:var(--ius-text-primary);border-radius:var(--ius-radius-md);padding:var(--ius-space-xs) var(--ius-space-sm);gap:var(--ius-space-xs);font:var(--ius-fw-regular, 400) var(--ius-fs-base)/1 var(--ius-font-body)}.ius-dropdown__trigger[data-variant=outline]:hover{background:var(--ius-neutral-white);border-color:var(--ius-primary-500);color:var(--ius-primary-900)}.ius-dropdown__trigger[data-variant=outline][data-open=true]{border-color:var(--ius-primary-500);color:var(--ius-primary-900)}\n"], dependencies: [{ kind: "component", type: PopoverComponent, selector: "ius-popover", inputs: ["title", "content", "placement", "trigger", "offset", "open", "defaultOpen", "showArrow", "disabled", "anchorRect", "padding", "dismissable", "panelClass"], outputs: ["openChange"] }, { kind: "component", type: MenuComponent, selector: "ius-menu", inputs: ["items", "selectable", "value", "label", "ariaLabel"], outputs: ["valueChange", "itemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5044
5044
|
}
|
|
5045
5045
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
5046
5046
|
type: Component,
|
|
5047
|
-
args: [{ selector: 'ius-dropdown', standalone: true, imports: [PopoverComponent, MenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ius-dropdown' }, template: "<ius-popover\r\n [placement]=\"placement()\"\r\n trigger=\"click\"\r\n [showArrow]=\"false\"\r\n [open]=\"isOpen()\"\r\n [dismissable]=\"true\"\r\n panelClass=\"ius-dropdown-pop\"\r\n (openChange)=\"onOpenChange($event)\"\r\n>\r\n <!-- Disparador: propio proyectado \u203A ghost/outline texto+chevron por defecto -->\r\n @if (customTrigger()) {\r\n <ng-content select=\"[iusDropdownTrigger]\" />\r\n } @else {\r\n <button\r\n type=\"button\"\r\n class=\"ius-dropdown__trigger\"\r\n [attr.data-open]=\"isOpen() ? 'true' : null\"\r\n [attr.data-tone]=\"tone() !== 'primary' ? tone() : null\"\r\n [attr.data-variant]=\"variant() !== 'ghost' ? variant() : null\"\r\n [attr.aria-haspopup]=\"'menu'\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n [attr.aria-label]=\"ariaLabel() || null\"\r\n >\r\n @if (triggerIcon()) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ triggerIcon() }}</span>\r\n }\r\n {{ triggerText() }}\r\n <span translate=\"no\" class=\"ius-icon ius-dropdown__chev\">expand_more</span>\r\n </button>\r\n }\r\n\r\n <!-- Panel: la superficie Menu (el Popover solo la ancla) -->\r\n <div iusPopoverContent>\r\n <ius-menu\r\n [items]=\"items()\"\r\n [selectable]=\"selectable()\"\r\n [value]=\"value()\"\r\n [label]=\"menuLabel()\"\r\n [ariaLabel]=\"ariaLabel()\"\r\n (valueChange)=\"onValueChange($event)\"\r\n (itemClick)=\"onItemClick()\"\r\n />\r\n </div>\r\n</ius-popover>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}.ius-dropdown__trigger{appearance:none;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font:var(--ius-fw-semibold
|
|
5047
|
+
args: [{ selector: 'ius-dropdown', standalone: true, imports: [PopoverComponent, MenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ius-dropdown' }, template: "<ius-popover\r\n [placement]=\"placement()\"\r\n trigger=\"click\"\r\n [showArrow]=\"false\"\r\n [open]=\"isOpen()\"\r\n [dismissable]=\"true\"\r\n panelClass=\"ius-dropdown-pop\"\r\n (openChange)=\"onOpenChange($event)\"\r\n>\r\n <!-- Disparador: propio proyectado \u203A ghost/outline texto+chevron por defecto -->\r\n @if (customTrigger()) {\r\n <ng-content select=\"[iusDropdownTrigger]\" />\r\n } @else {\r\n <button\r\n type=\"button\"\r\n class=\"ius-dropdown__trigger\"\r\n [attr.data-open]=\"isOpen() ? 'true' : null\"\r\n [attr.data-tone]=\"tone() !== 'primary' ? tone() : null\"\r\n [attr.data-variant]=\"variant() !== 'ghost' ? variant() : null\"\r\n [attr.aria-haspopup]=\"'menu'\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n [attr.aria-label]=\"ariaLabel() || null\"\r\n >\r\n @if (triggerIcon()) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ triggerIcon() }}</span>\r\n }\r\n {{ triggerText() }}\r\n <span translate=\"no\" class=\"ius-icon ius-dropdown__chev\">expand_more</span>\r\n </button>\r\n }\r\n\r\n <!-- Panel: la superficie Menu (el Popover solo la ancla) -->\r\n <div iusPopoverContent>\r\n <ius-menu\r\n [items]=\"items()\"\r\n [selectable]=\"selectable()\"\r\n [value]=\"value()\"\r\n [label]=\"menuLabel()\"\r\n [ariaLabel]=\"ariaLabel()\"\r\n (valueChange)=\"onValueChange($event)\"\r\n (itemClick)=\"onItemClick()\"\r\n />\r\n </div>\r\n</ius-popover>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}.ius-dropdown__trigger{appearance:none;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font:var(--ius-fw-semibold) var(--ius-fs-sm)/1.2 var(--ius-font-body);color:var(--ius-primary-700);padding:var(--ius-space-xxs) var(--ius-space-xs);border-radius:var(--ius-radius-sm);white-space:nowrap;transition:background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-dropdown__trigger:hover{background:var(--ius-neutral-2)}.ius-dropdown__trigger[data-tone=neutral]{color:var(--ius-text-secondary)}.ius-dropdown__trigger[data-tone=neutral]:hover,.ius-dropdown__trigger[data-tone=neutral][data-open=true]{color:var(--ius-text-primary)}.ius-dropdown__trigger:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-dropdown__trigger .ius-icon{font-size:var(--ius-icon-md)}.ius-dropdown__trigger .ius-dropdown__chev{transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-dropdown__trigger[data-open=true] .ius-dropdown__chev{transform:rotate(180deg)}.ius-dropdown__trigger[data-variant=outline]{border:1px solid var(--ius-stroke);background:var(--ius-neutral-white);color:var(--ius-text-primary);border-radius:var(--ius-radius-md);padding:var(--ius-space-xs) var(--ius-space-sm);gap:var(--ius-space-xs);font:var(--ius-fw-regular, 400) var(--ius-fs-base)/1 var(--ius-font-body)}.ius-dropdown__trigger[data-variant=outline]:hover{background:var(--ius-neutral-white);border-color:var(--ius-primary-500);color:var(--ius-primary-900)}.ius-dropdown__trigger[data-variant=outline][data-open=true]{border-color:var(--ius-primary-500);color:var(--ius-primary-900)}\n"] }]
|
|
5048
5048
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }], triggerIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerIcon", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], openChange: [{ type: i0.Output, args: ["openChange"] }], customTrigger: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusDropdownTriggerDirective), { isSignal: true }] }] } });
|
|
5049
5049
|
|
|
5050
5050
|
/*
|
|
@@ -5666,7 +5666,7 @@ class ListCardComponent {
|
|
|
5666
5666
|
this.wrapped.set(wrapped);
|
|
5667
5667
|
}
|
|
5668
5668
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ListCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5669
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ListCardComponent, isStandalone: true, selector: "ius-list-card", inputs: { overline: "overline", overlineIcon: "overlineIcon", title: "title", titleIcon: "titleIcon", tags: "tags", subtitle: "subtitle", subtitleIcon: "subtitleIcon", paragraph: "paragraph", fields: "fields", status: "status", actions: "actions", menu: "menu", markers: "markers", chevron: "chevron", unread: ["unread", "unread", booleanAttribute], size: "size", renderAction: "renderAction", ariaLabel: "ariaLabel" }, outputs: { clicked: "clicked" }, host: { listeners: { "click": "onHostClick($event)", "keydown.enter": "onKeyActivate($event)", "keydown.space": "onSpaceDown($event)", "keyup.space": "onKeyActivate($event)" }, properties: { "attr.data-size": "size !== 'medium' ? size : null", "attr.data-clickable": "clickable ? 'true' : null", "attr.data-unread": "unread ? 'true' : null", "attr.data-menu-open": "menuOpen() ? 'true' : null", "attr.role": "clickable ? 'button' : null", "attr.tabindex": "clickable ? 0 : null", "attr.aria-label": "ariaLabel ?? null", "attr.title": "null" }, classAttribute: "ius-listcard" }, queries: [{ propertyName: "leadingRef", first: true, predicate: IusListCardLeadingDirective, descendants: true, isSignal: true }, { propertyName: "overlineRef", first: true, predicate: IusListCardOverlineDirective, descendants: true, isSignal: true }, { propertyName: "titleRef", first: true, predicate: IusListCardTitleDirective, descendants: true, isSignal: true }, { propertyName: "subtitleRef", first: true, predicate: IusListCardSubtitleDirective, descendants: true, isSignal: true }, { propertyName: "paragraphRef", first: true, predicate: IusListCardParagraphDirective, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Leading \u2014 t\u00EDpicamente <ius-avatar iusListCardLeading>. -->\r\n@if (hasLeading) {\r\n <span class=\"ius-listcard__lead\"><ng-content select=\"[iusListCardLeading]\" /></span>\r\n}\r\n\r\n<!-- body agrupa main + fields lado a lado; con poco espacio, fields cae a la 2\u00AA l\u00EDnea -->\r\n<span class=\"ius-listcard__body\">\r\n <span class=\"ius-listcard__main\">\r\n @if (hasOverline) {\r\n <span class=\"ius-listcard__overline\">\r\n @if (overlineIcon) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ overlineIcon }}</span>\r\n }\r\n @if (overline != null) {\r\n {{ overline }}\r\n }\r\n <ng-content select=\"[iusListCardOverline]\" />\r\n </span>\r\n }\r\n @if (hasTitleRow) {\r\n <span class=\"ius-listcard__titlerow\">\r\n @if (titleIcon) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ titleIcon }}</span>\r\n }\r\n @if (title != null || titleRefPresent) {\r\n <span class=\"ius-listcard__title\">{{ title }}<ng-content select=\"[iusListCardTitle]\" /></span>\r\n }\r\n @if (tags.length) {\r\n <span class=\"ius-listcard__tags\">\r\n @for (t of tags; track t.key ?? $index) {\r\n <ius-tag\r\n size=\"small\"\r\n role=\"status\"\r\n [tone]=\"t.tone ?? 'neutral'\"\r\n [variant]=\"t.variant\"\r\n [icon]=\"t.icon\"\r\n [dot]=\"t.dot\"\r\n [label]=\"t.label\"\r\n />\r\n }\r\n </span>\r\n }\r\n </span>\r\n }\r\n @if (hasSubtitle) {\r\n <span class=\"ius-listcard__subtitle\">\r\n @if (subtitleIcon) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ subtitleIcon }}</span>\r\n }\r\n @if (subtitle != null) {\r\n {{ subtitle }}\r\n }\r\n <ng-content select=\"[iusListCardSubtitle]\" />\r\n </span>\r\n }\r\n @if (hasParagraph) {\r\n <span class=\"ius-listcard__paragraph\">\r\n @if (paragraph != null) {\r\n {{ paragraph }}\r\n }\r\n <ng-content select=\"[iusListCardParagraph]\" />\r\n </span>\r\n }\r\n </span>\r\n\r\n <!-- divisor a lo ancho, insertado antes de la primera columna que hizo wrap -->\r\n @if (fields.length && wrapped()) {\r\n <span class=\"ius-listcard__bodydiv\" aria-hidden=\"true\"></span>\r\n }\r\n @if (fields.length) {\r\n <span class=\"ius-listcard__fields\">\r\n @for (f of fields; track f.key ?? $index) {\r\n <span\r\n class=\"ius-listcard__field\"\r\n [class.ius-listcard__hideonhover]=\"f.hideOnHover\"\r\n [attr.data-emphasis]=\"f.emphasis ? 'true' : null\"\r\n [attr.data-align]=\"f.align || null\"\r\n [style.width]=\"fieldWidth(f)\"\r\n >\r\n @if (f.label) {\r\n <span class=\"ius-listcard__flabel\">{{ f.label }}</span>\r\n }\r\n <span class=\"ius-listcard__fvalue\">\r\n @if (f.icon) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ f.icon }}</span>\r\n }\r\n <span>{{ f.value }}</span>\r\n </span>\r\n </span>\r\n }\r\n </span>\r\n }\r\n</span>\r\n\r\n<!-- zona final: estado \u00B7 markers \u00B7 acciones(+\u22EE) \u00B7 chevron -->\r\n@if (hasTrail) {\r\n <span class=\"ius-listcard__trail\">\r\n @if (status) {\r\n <!-- estado \u2014 delega en StatusChip (\u00E1tomo de estado del sistema) -->\r\n <span class=\"ius-listcard__status\" [class.ius-listcard__hideonhover]=\"status.hideOnHover\">\r\n <ius-status-chip\r\n [vocab]=\"status.vocab ?? 'actuacion'\"\r\n [status]=\"status.status\"\r\n [tone]=\"status.tone\"\r\n [label]=\"status.label\"\r\n [icon]=\"status.icon\"\r\n [customMap]=\"status.customMap\"\r\n [size]=\"statusChipSize\"\r\n />\r\n </span>\r\n }\r\n @if (markers.length) {\r\n <span class=\"ius-listcard__markers\">\r\n @for (m of markers; track m.key ?? $index) {\r\n <ius-icon-button\r\n [icon]=\"m.icon\"\r\n [variant]=\"m.variant || 'tertiary'\"\r\n shape=\"squared\"\r\n size=\"small\"\r\n [tooltip]=\"m.tooltip || m.label\"\r\n [ariaLabel]=\"m.ariaLabel || m.label || m.icon\"\r\n (clicked)=\"onMarker(m, $event)\"\r\n />\r\n }\r\n </span>\r\n }\r\n @if (actions.length || menu.length) {\r\n <span class=\"ius-listcard__actions\">\r\n @for (a of actions; track a.key ?? $index) {\r\n @if (renderAction) {\r\n <ng-container *ngTemplateOutlet=\"renderAction; context: { $implicit: a, index: $index }\" />\r\n } @else {\r\n <ius-icon-button\r\n [icon]=\"a.icon\"\r\n variant=\"tertiary\"\r\n shape=\"squared\"\r\n size=\"small\"\r\n [tooltip]=\"a.tooltip || a.label\"\r\n [ariaLabel]=\"a.ariaLabel || a.label || a.icon\"\r\n (clicked)=\"onAction(a, $event)\"\r\n />\r\n }\r\n }\r\n @if (menu.length) {\r\n <!-- \u22EE overflow: compone ius-dropdown. El span detiene la propagaci\u00F3n:\r\n abrir el men\u00FA o elegir un \u00EDtem no navega la fila. -->\r\n <span class=\"ius-listcard__menu\" (click)=\"$event.stopPropagation()\">\r\n <ius-dropdown\r\n [items]=\"menu\"\r\n placement=\"bottom-end\"\r\n ariaLabel=\"M\u00E1s opciones\"\r\n (openChange)=\"onMenuOpenChange($event)\"\r\n >\r\n <ius-icon-button\r\n iusDropdownTrigger\r\n icon=\"more_vert\"\r\n variant=\"tertiary\"\r\n shape=\"squared\"\r\n size=\"small\"\r\n tooltip=\"M\u00E1s opciones\"\r\n ariaLabel=\"M\u00E1s opciones\"\r\n />\r\n </ius-dropdown>\r\n </span>\r\n }\r\n </span>\r\n }\r\n @if (showChevron) {\r\n <span class=\"ius-listcard__chevron\"><span translate=\"no\" class=\"ius-icon\">chevron_right</span></span>\r\n }\r\n </span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_lc-py: 14px;--_lc-px: 16px;--_lc-gap: var(--ius-space-md);--_lc-title-fs: var(--ius-fs-lg);--_lc-fieldgap: 28px;position:relative;box-sizing:border-box;display:flex;align-items:center;gap:var(--_lc-gap);width:100%;padding:var(--_lc-py) var(--_lc-px);background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);font-family:var(--ius-font-body);text-align:left;transition:border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-clickable=true]){cursor:pointer}:host([data-size=small]){--_lc-py: 10px;--_lc-px: 14px;--_lc-gap: var(--ius-space-sm);--_lc-title-fs: var(--ius-fs-base);--_lc-fieldgap: 22px}:host([data-size=large]){--_lc-py: 18px;--_lc-px: 20px;--_lc-gap: var(--ius-space-md);--_lc-title-fs: var(--ius-fs-h5);--_lc-fieldgap: 34px}@container style(--ius-density: small){:host(:not([data-size])){--_lc-py: 10px;--_lc-px: 14px;--_lc-gap: var(--ius-space-sm);--_lc-title-fs: var(--ius-fs-base);--_lc-fieldgap: 22px}}@container style(--ius-density: large){:host(:not([data-size])){--_lc-py: 18px;--_lc-px: 20px;--_lc-gap: var(--ius-space-md);--_lc-title-fs: var(--ius-fs-h5);--_lc-fieldgap: 34px}}:host([data-clickable=true]:hover){border-color:var(--ius-stroke-strong, var(--ius-neutral-4));box-shadow:var(--ius-elevation-100)}:host(:focus-visible){outline:none;box-shadow:var(--ius-focus-ring)}.ius-listcard__lead{flex:0 0 auto;display:inline-flex;align-items:center}.ius-listcard__body{flex:1 1 auto;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:var(--ius-space-xs) var(--_lc-fieldgap)}.ius-listcard__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs);margin-inline-end:var(--ius-space-sm, 8px)}.ius-listcard__overline{display:flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);letter-spacing:var(--ius-ls-emphasis);text-transform:uppercase;color:var(--ius-text-tertiary);overflow:hidden;white-space:nowrap}.ius-listcard__overline .ius-icon{font-size:var(--ius-icon-sm);flex:0 0 auto}.ius-listcard__titlerow{display:flex;align-items:center;gap:var(--ius-space-xs);flex-wrap:wrap;min-width:0}.ius-listcard__titlerow>.ius-icon{font-size:var(--ius-icon-md);flex:0 0 auto;color:var(--ius-text-secondary)}.ius-listcard__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold, 600);font-size:var(--_lc-title-fs);line-height:1.25;color:var(--ius-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.ius-listcard__tags{display:flex;align-items:center;gap:var(--ius-space-xs);flex-wrap:wrap}.ius-listcard__titlerow .ius-listcard__tags{margin-left:auto}.ius-listcard__subtitle{display:flex;align-items:flex-start;gap:var(--ius-space-xs);font:var(--ius-fw-regular, 400) var(--ius-fs-sm)/1.35 var(--ius-font-body);color:var(--ius-text-secondary);text-wrap:pretty}.ius-listcard__subtitle>.ius-icon{font-size:var(--ius-icon-sm);flex:0 0 auto;color:var(--ius-text-tertiary);margin-top:1px}.ius-listcard__subtitle ::ng-deep b{color:var(--ius-text-primary);font-weight:var(--ius-fw-semibold, 600)}.ius-listcard__paragraph{margin-top:var(--ius-space-xxs);font:var(--ius-fw-regular, 400) var(--ius-fs-sm)/1.45 var(--ius-font-body);color:var(--ius-text-secondary);text-wrap:pretty;overflow-wrap:anywhere}.ius-listcard__paragraph ::ng-deep b{color:var(--ius-text-primary);font-weight:var(--ius-fw-semibold, 600)}.ius-listcard__fields{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ius-space-xs) var(--_lc-fieldgap);flex:0 0 auto;max-width:100%;min-width:0}.ius-listcard__field{display:flex;flex-direction:column;gap:var(--ius-space-xxs);flex:0 0 auto;min-width:0}.ius-listcard__field[data-align=end]{text-align:right}.ius-listcard__field:nth-child(1){width:var(--_lc-col-1, auto)}.ius-listcard__field:nth-child(2){width:var(--_lc-col-2, auto)}.ius-listcard__field:nth-child(3){width:var(--_lc-col-3, auto)}.ius-listcard__field:nth-child(4){width:var(--_lc-col-4, auto)}.ius-listcard__field:nth-child(5){width:var(--_lc-col-5, auto)}.ius-listcard__field:nth-child(6){width:var(--_lc-col-6, auto)}.ius-listcard__flabel{font:var(--ius-fw-regular, 400) var(--ius-fs-sm)/1.3 var(--ius-font-body);color:var(--ius-text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-listcard__fvalue{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font:var(--ius-fw-regular, 400) var(--ius-fs-base)/1.3 var(--ius-font-body);color:var(--ius-text-secondary);overflow:hidden;white-space:nowrap;font-variant-numeric:tabular-nums}.ius-listcard__fvalue>.ius-icon{font-size:var(--ius-icon-sm);flex:0 0 auto;color:var(--ius-text-tertiary)}.ius-listcard__fvalue>span{overflow:hidden;text-overflow:ellipsis}.ius-listcard__field[data-emphasis=true] .ius-listcard__fvalue{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold, 600);font-size:var(--_lc-title-fs);color:var(--ius-text-primary)}.ius-listcard__bodydiv{flex:0 0 100%;height:0;border-top:1px solid var(--ius-stroke);margin:var(--ius-space-xxs) 0}.ius-listcard__trail{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-sm);margin-left:auto}.ius-listcard__status{display:inline-flex;align-items:center;white-space:nowrap}.ius-listcard__markers{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);flex:0 0 auto}.ius-listcard__actions{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);visibility:hidden}:host([data-clickable=true]:hover) .ius-listcard__actions,:host(:hover) .ius-listcard__actions,:host(:has(:focus-visible)) .ius-listcard__actions{visibility:visible}:host(:hover) .ius-listcard__hideonhover,:host(:has(:focus-visible)) .ius-listcard__hideonhover{display:none}.ius-listcard__menu{display:inline-flex}:host([data-menu-open=true]) .ius-listcard__actions{visibility:visible}:host([data-menu-open=true]) .ius-listcard__hideonhover{display:none}.ius-listcard__chevron{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;color:var(--ius-text-tertiary)}.ius-listcard__chevron .ius-icon{font-size:var(--ius-icon-lg)}:host([data-clickable=true]:hover) .ius-listcard__chevron{color:var(--ius-text-secondary)}:host:before{content:\"\";width:7px;height:7px;border-radius:var(--ius-radius-pill);background:transparent;flex:0 0 auto;align-self:center;margin-inline-end:var(--ius-space-xs)}:host([data-unread=true]):before{background:var(--ius-primary-900)}:host([data-unread=true]) .ius-listcard__title{font-weight:var(--ius-fw-bold, 700)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TagComponent, selector: "ius-tag", inputs: ["label", "role", "tone", "variant", "size", "shape", "icon", "dot", "count", "closable", "closeLabel", "selected", "disabled", "interactive", "state"], outputs: ["clicked", "closed"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "tooltipPlacement"], outputs: ["clicked"] }, { kind: "component", type: StatusChipComponent, selector: "ius-status-chip", inputs: ["vocab", "status", "tone", "label", "icon", "size", "customMap"] }, { kind: "component", type: DropdownComponent, selector: "ius-dropdown", inputs: ["items", "selectable", "value", "label", "triggerLabel", "triggerIcon", "tone", "variant", "placement", "open", "defaultOpen", "ariaLabel"], outputs: ["valueChange", "openChange"] }, { kind: "directive", type: IusDropdownTriggerDirective, selector: "[iusDropdownTrigger]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5669
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ListCardComponent, isStandalone: true, selector: "ius-list-card", inputs: { overline: "overline", overlineIcon: "overlineIcon", title: "title", titleIcon: "titleIcon", tags: "tags", subtitle: "subtitle", subtitleIcon: "subtitleIcon", paragraph: "paragraph", fields: "fields", status: "status", actions: "actions", menu: "menu", markers: "markers", chevron: "chevron", unread: ["unread", "unread", booleanAttribute], size: "size", renderAction: "renderAction", ariaLabel: "ariaLabel" }, outputs: { clicked: "clicked" }, host: { listeners: { "click": "onHostClick($event)", "keydown.enter": "onKeyActivate($event)", "keydown.space": "onSpaceDown($event)", "keyup.space": "onKeyActivate($event)" }, properties: { "attr.data-size": "size !== 'medium' ? size : null", "attr.data-clickable": "clickable ? 'true' : null", "attr.data-unread": "unread ? 'true' : null", "attr.data-menu-open": "menuOpen() ? 'true' : null", "attr.role": "clickable ? 'button' : null", "attr.tabindex": "clickable ? 0 : null", "attr.aria-label": "ariaLabel ?? null", "attr.title": "null" }, classAttribute: "ius-listcard" }, queries: [{ propertyName: "leadingRef", first: true, predicate: IusListCardLeadingDirective, descendants: true, isSignal: true }, { propertyName: "overlineRef", first: true, predicate: IusListCardOverlineDirective, descendants: true, isSignal: true }, { propertyName: "titleRef", first: true, predicate: IusListCardTitleDirective, descendants: true, isSignal: true }, { propertyName: "subtitleRef", first: true, predicate: IusListCardSubtitleDirective, descendants: true, isSignal: true }, { propertyName: "paragraphRef", first: true, predicate: IusListCardParagraphDirective, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Leading \u2014 t\u00EDpicamente <ius-avatar iusListCardLeading>. -->\r\n@if (hasLeading) {\r\n <span class=\"ius-listcard__lead\"><ng-content select=\"[iusListCardLeading]\" /></span>\r\n}\r\n\r\n<!-- body agrupa main + fields lado a lado; con poco espacio, fields cae a la 2\u00AA l\u00EDnea -->\r\n<span class=\"ius-listcard__body\">\r\n <span class=\"ius-listcard__main\">\r\n @if (hasOverline) {\r\n <span class=\"ius-listcard__overline\">\r\n @if (overlineIcon) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ overlineIcon }}</span>\r\n }\r\n @if (overline != null) {\r\n {{ overline }}\r\n }\r\n <ng-content select=\"[iusListCardOverline]\" />\r\n </span>\r\n }\r\n @if (hasTitleRow) {\r\n <span class=\"ius-listcard__titlerow\">\r\n @if (titleIcon) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ titleIcon }}</span>\r\n }\r\n @if (title != null || titleRefPresent) {\r\n <span class=\"ius-listcard__title\">{{ title }}<ng-content select=\"[iusListCardTitle]\" /></span>\r\n }\r\n @if (tags.length) {\r\n <span class=\"ius-listcard__tags\">\r\n @for (t of tags; track t.key ?? $index) {\r\n <ius-tag\r\n size=\"small\"\r\n role=\"status\"\r\n [tone]=\"t.tone ?? 'neutral'\"\r\n [variant]=\"t.variant\"\r\n [icon]=\"t.icon\"\r\n [dot]=\"t.dot\"\r\n [label]=\"t.label\"\r\n />\r\n }\r\n </span>\r\n }\r\n </span>\r\n }\r\n @if (hasSubtitle) {\r\n <span class=\"ius-listcard__subtitle\">\r\n @if (subtitleIcon) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ subtitleIcon }}</span>\r\n }\r\n @if (subtitle != null) {\r\n {{ subtitle }}\r\n }\r\n <ng-content select=\"[iusListCardSubtitle]\" />\r\n </span>\r\n }\r\n @if (hasParagraph) {\r\n <span class=\"ius-listcard__paragraph\">\r\n @if (paragraph != null) {\r\n {{ paragraph }}\r\n }\r\n <ng-content select=\"[iusListCardParagraph]\" />\r\n </span>\r\n }\r\n </span>\r\n\r\n <!-- divisor a lo ancho, insertado antes de la primera columna que hizo wrap -->\r\n @if (fields.length && wrapped()) {\r\n <span class=\"ius-listcard__bodydiv\" aria-hidden=\"true\"></span>\r\n }\r\n @if (fields.length) {\r\n <span class=\"ius-listcard__fields\">\r\n @for (f of fields; track f.key ?? $index) {\r\n <span\r\n class=\"ius-listcard__field\"\r\n [class.ius-listcard__hideonhover]=\"f.hideOnHover\"\r\n [attr.data-emphasis]=\"f.emphasis ? 'true' : null\"\r\n [attr.data-align]=\"f.align || null\"\r\n [style.width]=\"fieldWidth(f)\"\r\n >\r\n @if (f.label) {\r\n <span class=\"ius-listcard__flabel\">{{ f.label }}</span>\r\n }\r\n <span class=\"ius-listcard__fvalue\">\r\n @if (f.icon) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ f.icon }}</span>\r\n }\r\n <span>{{ f.value }}</span>\r\n </span>\r\n </span>\r\n }\r\n </span>\r\n }\r\n</span>\r\n\r\n<!-- zona final: estado \u00B7 markers \u00B7 acciones(+\u22EE) \u00B7 chevron -->\r\n@if (hasTrail) {\r\n <span class=\"ius-listcard__trail\">\r\n @if (status) {\r\n <!-- estado \u2014 delega en StatusChip (\u00E1tomo de estado del sistema) -->\r\n <span class=\"ius-listcard__status\" [class.ius-listcard__hideonhover]=\"status.hideOnHover\">\r\n <ius-status-chip\r\n [vocab]=\"status.vocab ?? 'actuacion'\"\r\n [status]=\"status.status\"\r\n [tone]=\"status.tone\"\r\n [label]=\"status.label\"\r\n [icon]=\"status.icon\"\r\n [customMap]=\"status.customMap\"\r\n [size]=\"statusChipSize\"\r\n />\r\n </span>\r\n }\r\n @if (markers.length) {\r\n <span class=\"ius-listcard__markers\">\r\n @for (m of markers; track m.key ?? $index) {\r\n <ius-icon-button\r\n [icon]=\"m.icon\"\r\n [variant]=\"m.variant || 'tertiary'\"\r\n shape=\"squared\"\r\n size=\"small\"\r\n [tooltip]=\"m.tooltip || m.label\"\r\n [ariaLabel]=\"m.ariaLabel || m.label || m.icon\"\r\n (clicked)=\"onMarker(m, $event)\"\r\n />\r\n }\r\n </span>\r\n }\r\n @if (actions.length || menu.length) {\r\n <span class=\"ius-listcard__actions\">\r\n @for (a of actions; track a.key ?? $index) {\r\n @if (renderAction) {\r\n <ng-container *ngTemplateOutlet=\"renderAction; context: { $implicit: a, index: $index }\" />\r\n } @else {\r\n <ius-icon-button\r\n [icon]=\"a.icon\"\r\n variant=\"tertiary\"\r\n shape=\"squared\"\r\n size=\"small\"\r\n [tooltip]=\"a.tooltip || a.label\"\r\n [ariaLabel]=\"a.ariaLabel || a.label || a.icon\"\r\n (clicked)=\"onAction(a, $event)\"\r\n />\r\n }\r\n }\r\n @if (menu.length) {\r\n <!-- \u22EE overflow: compone ius-dropdown. El span detiene la propagaci\u00F3n:\r\n abrir el men\u00FA o elegir un \u00EDtem no navega la fila. -->\r\n <span class=\"ius-listcard__menu\" (click)=\"$event.stopPropagation()\">\r\n <ius-dropdown\r\n [items]=\"menu\"\r\n placement=\"bottom-end\"\r\n ariaLabel=\"M\u00E1s opciones\"\r\n (openChange)=\"onMenuOpenChange($event)\"\r\n >\r\n <ius-icon-button\r\n iusDropdownTrigger\r\n icon=\"more_vert\"\r\n variant=\"tertiary\"\r\n shape=\"squared\"\r\n size=\"small\"\r\n tooltip=\"M\u00E1s opciones\"\r\n ariaLabel=\"M\u00E1s opciones\"\r\n />\r\n </ius-dropdown>\r\n </span>\r\n }\r\n </span>\r\n }\r\n @if (showChevron) {\r\n <span class=\"ius-listcard__chevron\"><span translate=\"no\" class=\"ius-icon\">chevron_right</span></span>\r\n }\r\n </span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_lc-py: 14px;--_lc-px: 16px;--_lc-gap: var(--ius-space-md);--_lc-title-fs: var(--ius-fs-lg);--_lc-fieldgap: 28px;position:relative;box-sizing:border-box;display:flex;align-items:center;gap:var(--_lc-gap);width:100%;padding:var(--_lc-py) var(--_lc-px);background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);font-family:var(--ius-font-body);text-align:left;transition:border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-clickable=true]){cursor:pointer}:host([data-size=small]){--_lc-py: 10px;--_lc-px: 14px;--_lc-gap: var(--ius-space-sm);--_lc-title-fs: var(--ius-fs-base);--_lc-fieldgap: 22px}:host([data-size=large]){--_lc-py: 18px;--_lc-px: 20px;--_lc-gap: var(--ius-space-md);--_lc-title-fs: var(--ius-fs-h5);--_lc-fieldgap: 34px}@container style(--ius-density: small){:host(:not([data-size])){--_lc-py: 10px;--_lc-px: 14px;--_lc-gap: var(--ius-space-sm);--_lc-title-fs: var(--ius-fs-base);--_lc-fieldgap: 22px}}@container style(--ius-density: large){:host(:not([data-size])){--_lc-py: 18px;--_lc-px: 20px;--_lc-gap: var(--ius-space-md);--_lc-title-fs: var(--ius-fs-h5);--_lc-fieldgap: 34px}}:host([data-clickable=true]:hover){border-color:var(--ius-stroke-strong, var(--ius-neutral-4));box-shadow:var(--ius-elevation-100)}:host(:focus-visible){outline:none;box-shadow:var(--ius-focus-ring)}.ius-listcard__lead{flex:0 0 auto;display:inline-flex;align-items:center}.ius-listcard__body{flex:1 1 auto;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:var(--ius-space-xs) var(--_lc-fieldgap)}.ius-listcard__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs);margin-inline-end:var(--ius-space-sm, 8px)}.ius-listcard__overline{display:flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);letter-spacing:var(--ius-ls-emphasis);text-transform:uppercase;color:var(--ius-text-tertiary);overflow:hidden;white-space:nowrap}.ius-listcard__overline .ius-icon{font-size:var(--ius-icon-sm);flex:0 0 auto}.ius-listcard__titlerow{display:flex;align-items:center;gap:var(--ius-space-xs);flex-wrap:wrap;min-width:0}.ius-listcard__titlerow>.ius-icon{font-size:var(--ius-icon-md);flex:0 0 auto;color:var(--ius-text-secondary)}.ius-listcard__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--_lc-title-fs);line-height:1.25;color:var(--ius-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.ius-listcard__tags{display:flex;align-items:center;gap:var(--ius-space-xs);flex-wrap:wrap}.ius-listcard__titlerow .ius-listcard__tags{margin-left:auto}.ius-listcard__subtitle{display:flex;align-items:flex-start;gap:var(--ius-space-xs);font:var(--ius-fw-regular, 400) var(--ius-fs-sm)/1.35 var(--ius-font-body);color:var(--ius-text-secondary);text-wrap:pretty}.ius-listcard__subtitle>.ius-icon{font-size:var(--ius-icon-sm);flex:0 0 auto;color:var(--ius-text-tertiary);margin-top:1px}.ius-listcard__subtitle ::ng-deep b{color:var(--ius-text-primary);font-weight:var(--ius-fw-semibold)}.ius-listcard__paragraph{margin-top:var(--ius-space-xxs);font:var(--ius-fw-regular, 400) var(--ius-fs-sm)/1.45 var(--ius-font-body);color:var(--ius-text-secondary);text-wrap:pretty;overflow-wrap:anywhere}.ius-listcard__paragraph ::ng-deep b{color:var(--ius-text-primary);font-weight:var(--ius-fw-semibold)}.ius-listcard__fields{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ius-space-xs) var(--_lc-fieldgap);flex:0 0 auto;max-width:100%;min-width:0}.ius-listcard__field{display:flex;flex-direction:column;gap:var(--ius-space-xxs);flex:0 0 auto;min-width:0}.ius-listcard__field[data-align=end]{text-align:right}.ius-listcard__field:nth-child(1){width:var(--_lc-col-1, auto)}.ius-listcard__field:nth-child(2){width:var(--_lc-col-2, auto)}.ius-listcard__field:nth-child(3){width:var(--_lc-col-3, auto)}.ius-listcard__field:nth-child(4){width:var(--_lc-col-4, auto)}.ius-listcard__field:nth-child(5){width:var(--_lc-col-5, auto)}.ius-listcard__field:nth-child(6){width:var(--_lc-col-6, auto)}.ius-listcard__flabel{font:var(--ius-fw-regular, 400) var(--ius-fs-sm)/1.3 var(--ius-font-body);color:var(--ius-text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-listcard__fvalue{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font:var(--ius-fw-regular, 400) var(--ius-fs-base)/1.3 var(--ius-font-body);color:var(--ius-text-secondary);overflow:hidden;white-space:nowrap;font-variant-numeric:tabular-nums}.ius-listcard__fvalue>.ius-icon{font-size:var(--ius-icon-sm);flex:0 0 auto;color:var(--ius-text-tertiary)}.ius-listcard__fvalue>span{overflow:hidden;text-overflow:ellipsis}.ius-listcard__field[data-emphasis=true] .ius-listcard__fvalue{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--_lc-title-fs);color:var(--ius-text-primary)}.ius-listcard__bodydiv{flex:0 0 100%;height:0;border-top:1px solid var(--ius-stroke);margin:var(--ius-space-xxs) 0}.ius-listcard__trail{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-sm);margin-left:auto}.ius-listcard__status{display:inline-flex;align-items:center;white-space:nowrap}.ius-listcard__markers{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);flex:0 0 auto}.ius-listcard__actions{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);visibility:hidden}:host([data-clickable=true]:hover) .ius-listcard__actions,:host(:hover) .ius-listcard__actions,:host(:has(:focus-visible)) .ius-listcard__actions{visibility:visible}:host(:hover) .ius-listcard__hideonhover,:host(:has(:focus-visible)) .ius-listcard__hideonhover{display:none}.ius-listcard__menu{display:inline-flex}:host([data-menu-open=true]) .ius-listcard__actions{visibility:visible}:host([data-menu-open=true]) .ius-listcard__hideonhover{display:none}.ius-listcard__chevron{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;color:var(--ius-text-tertiary)}.ius-listcard__chevron .ius-icon{font-size:var(--ius-icon-lg)}:host([data-clickable=true]:hover) .ius-listcard__chevron{color:var(--ius-text-secondary)}:host:before{content:\"\";width:7px;height:7px;border-radius:var(--ius-radius-pill);background:transparent;flex:0 0 auto;align-self:center;margin-inline-end:var(--ius-space-xs)}:host([data-unread=true]):before{background:var(--ius-primary-900)}:host([data-unread=true]) .ius-listcard__title{font-weight:var(--ius-fw-bold, 700)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TagComponent, selector: "ius-tag", inputs: ["label", "role", "tone", "variant", "size", "shape", "icon", "dot", "count", "closable", "closeLabel", "selected", "disabled", "interactive", "state"], outputs: ["clicked", "closed"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "tooltipPlacement"], outputs: ["clicked"] }, { kind: "component", type: StatusChipComponent, selector: "ius-status-chip", inputs: ["vocab", "status", "tone", "label", "icon", "size", "customMap"] }, { kind: "component", type: DropdownComponent, selector: "ius-dropdown", inputs: ["items", "selectable", "value", "label", "triggerLabel", "triggerIcon", "tone", "variant", "placement", "open", "defaultOpen", "ariaLabel"], outputs: ["valueChange", "openChange"] }, { kind: "directive", type: IusDropdownTriggerDirective, selector: "[iusDropdownTrigger]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5670
5670
|
}
|
|
5671
5671
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ListCardComponent, decorators: [{
|
|
5672
5672
|
type: Component,
|
|
@@ -5694,7 +5694,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
5694
5694
|
'(keydown.enter)': 'onKeyActivate($event)',
|
|
5695
5695
|
'(keydown.space)': 'onSpaceDown($event)',
|
|
5696
5696
|
'(keyup.space)': 'onKeyActivate($event)',
|
|
5697
|
-
}, template: "<!-- Leading \u2014 t\u00EDpicamente <ius-avatar iusListCardLeading>. -->\r\n@if (hasLeading) {\r\n <span class=\"ius-listcard__lead\"><ng-content select=\"[iusListCardLeading]\" /></span>\r\n}\r\n\r\n<!-- body agrupa main + fields lado a lado; con poco espacio, fields cae a la 2\u00AA l\u00EDnea -->\r\n<span class=\"ius-listcard__body\">\r\n <span class=\"ius-listcard__main\">\r\n @if (hasOverline) {\r\n <span class=\"ius-listcard__overline\">\r\n @if (overlineIcon) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ overlineIcon }}</span>\r\n }\r\n @if (overline != null) {\r\n {{ overline }}\r\n }\r\n <ng-content select=\"[iusListCardOverline]\" />\r\n </span>\r\n }\r\n @if (hasTitleRow) {\r\n <span class=\"ius-listcard__titlerow\">\r\n @if (titleIcon) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ titleIcon }}</span>\r\n }\r\n @if (title != null || titleRefPresent) {\r\n <span class=\"ius-listcard__title\">{{ title }}<ng-content select=\"[iusListCardTitle]\" /></span>\r\n }\r\n @if (tags.length) {\r\n <span class=\"ius-listcard__tags\">\r\n @for (t of tags; track t.key ?? $index) {\r\n <ius-tag\r\n size=\"small\"\r\n role=\"status\"\r\n [tone]=\"t.tone ?? 'neutral'\"\r\n [variant]=\"t.variant\"\r\n [icon]=\"t.icon\"\r\n [dot]=\"t.dot\"\r\n [label]=\"t.label\"\r\n />\r\n }\r\n </span>\r\n }\r\n </span>\r\n }\r\n @if (hasSubtitle) {\r\n <span class=\"ius-listcard__subtitle\">\r\n @if (subtitleIcon) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ subtitleIcon }}</span>\r\n }\r\n @if (subtitle != null) {\r\n {{ subtitle }}\r\n }\r\n <ng-content select=\"[iusListCardSubtitle]\" />\r\n </span>\r\n }\r\n @if (hasParagraph) {\r\n <span class=\"ius-listcard__paragraph\">\r\n @if (paragraph != null) {\r\n {{ paragraph }}\r\n }\r\n <ng-content select=\"[iusListCardParagraph]\" />\r\n </span>\r\n }\r\n </span>\r\n\r\n <!-- divisor a lo ancho, insertado antes de la primera columna que hizo wrap -->\r\n @if (fields.length && wrapped()) {\r\n <span class=\"ius-listcard__bodydiv\" aria-hidden=\"true\"></span>\r\n }\r\n @if (fields.length) {\r\n <span class=\"ius-listcard__fields\">\r\n @for (f of fields; track f.key ?? $index) {\r\n <span\r\n class=\"ius-listcard__field\"\r\n [class.ius-listcard__hideonhover]=\"f.hideOnHover\"\r\n [attr.data-emphasis]=\"f.emphasis ? 'true' : null\"\r\n [attr.data-align]=\"f.align || null\"\r\n [style.width]=\"fieldWidth(f)\"\r\n >\r\n @if (f.label) {\r\n <span class=\"ius-listcard__flabel\">{{ f.label }}</span>\r\n }\r\n <span class=\"ius-listcard__fvalue\">\r\n @if (f.icon) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ f.icon }}</span>\r\n }\r\n <span>{{ f.value }}</span>\r\n </span>\r\n </span>\r\n }\r\n </span>\r\n }\r\n</span>\r\n\r\n<!-- zona final: estado \u00B7 markers \u00B7 acciones(+\u22EE) \u00B7 chevron -->\r\n@if (hasTrail) {\r\n <span class=\"ius-listcard__trail\">\r\n @if (status) {\r\n <!-- estado \u2014 delega en StatusChip (\u00E1tomo de estado del sistema) -->\r\n <span class=\"ius-listcard__status\" [class.ius-listcard__hideonhover]=\"status.hideOnHover\">\r\n <ius-status-chip\r\n [vocab]=\"status.vocab ?? 'actuacion'\"\r\n [status]=\"status.status\"\r\n [tone]=\"status.tone\"\r\n [label]=\"status.label\"\r\n [icon]=\"status.icon\"\r\n [customMap]=\"status.customMap\"\r\n [size]=\"statusChipSize\"\r\n />\r\n </span>\r\n }\r\n @if (markers.length) {\r\n <span class=\"ius-listcard__markers\">\r\n @for (m of markers; track m.key ?? $index) {\r\n <ius-icon-button\r\n [icon]=\"m.icon\"\r\n [variant]=\"m.variant || 'tertiary'\"\r\n shape=\"squared\"\r\n size=\"small\"\r\n [tooltip]=\"m.tooltip || m.label\"\r\n [ariaLabel]=\"m.ariaLabel || m.label || m.icon\"\r\n (clicked)=\"onMarker(m, $event)\"\r\n />\r\n }\r\n </span>\r\n }\r\n @if (actions.length || menu.length) {\r\n <span class=\"ius-listcard__actions\">\r\n @for (a of actions; track a.key ?? $index) {\r\n @if (renderAction) {\r\n <ng-container *ngTemplateOutlet=\"renderAction; context: { $implicit: a, index: $index }\" />\r\n } @else {\r\n <ius-icon-button\r\n [icon]=\"a.icon\"\r\n variant=\"tertiary\"\r\n shape=\"squared\"\r\n size=\"small\"\r\n [tooltip]=\"a.tooltip || a.label\"\r\n [ariaLabel]=\"a.ariaLabel || a.label || a.icon\"\r\n (clicked)=\"onAction(a, $event)\"\r\n />\r\n }\r\n }\r\n @if (menu.length) {\r\n <!-- \u22EE overflow: compone ius-dropdown. El span detiene la propagaci\u00F3n:\r\n abrir el men\u00FA o elegir un \u00EDtem no navega la fila. -->\r\n <span class=\"ius-listcard__menu\" (click)=\"$event.stopPropagation()\">\r\n <ius-dropdown\r\n [items]=\"menu\"\r\n placement=\"bottom-end\"\r\n ariaLabel=\"M\u00E1s opciones\"\r\n (openChange)=\"onMenuOpenChange($event)\"\r\n >\r\n <ius-icon-button\r\n iusDropdownTrigger\r\n icon=\"more_vert\"\r\n variant=\"tertiary\"\r\n shape=\"squared\"\r\n size=\"small\"\r\n tooltip=\"M\u00E1s opciones\"\r\n ariaLabel=\"M\u00E1s opciones\"\r\n />\r\n </ius-dropdown>\r\n </span>\r\n }\r\n </span>\r\n }\r\n @if (showChevron) {\r\n <span class=\"ius-listcard__chevron\"><span translate=\"no\" class=\"ius-icon\">chevron_right</span></span>\r\n }\r\n </span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_lc-py: 14px;--_lc-px: 16px;--_lc-gap: var(--ius-space-md);--_lc-title-fs: var(--ius-fs-lg);--_lc-fieldgap: 28px;position:relative;box-sizing:border-box;display:flex;align-items:center;gap:var(--_lc-gap);width:100%;padding:var(--_lc-py) var(--_lc-px);background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);font-family:var(--ius-font-body);text-align:left;transition:border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-clickable=true]){cursor:pointer}:host([data-size=small]){--_lc-py: 10px;--_lc-px: 14px;--_lc-gap: var(--ius-space-sm);--_lc-title-fs: var(--ius-fs-base);--_lc-fieldgap: 22px}:host([data-size=large]){--_lc-py: 18px;--_lc-px: 20px;--_lc-gap: var(--ius-space-md);--_lc-title-fs: var(--ius-fs-h5);--_lc-fieldgap: 34px}@container style(--ius-density: small){:host(:not([data-size])){--_lc-py: 10px;--_lc-px: 14px;--_lc-gap: var(--ius-space-sm);--_lc-title-fs: var(--ius-fs-base);--_lc-fieldgap: 22px}}@container style(--ius-density: large){:host(:not([data-size])){--_lc-py: 18px;--_lc-px: 20px;--_lc-gap: var(--ius-space-md);--_lc-title-fs: var(--ius-fs-h5);--_lc-fieldgap: 34px}}:host([data-clickable=true]:hover){border-color:var(--ius-stroke-strong, var(--ius-neutral-4));box-shadow:var(--ius-elevation-100)}:host(:focus-visible){outline:none;box-shadow:var(--ius-focus-ring)}.ius-listcard__lead{flex:0 0 auto;display:inline-flex;align-items:center}.ius-listcard__body{flex:1 1 auto;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:var(--ius-space-xs) var(--_lc-fieldgap)}.ius-listcard__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs);margin-inline-end:var(--ius-space-sm, 8px)}.ius-listcard__overline{display:flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);letter-spacing:var(--ius-ls-emphasis);text-transform:uppercase;color:var(--ius-text-tertiary);overflow:hidden;white-space:nowrap}.ius-listcard__overline .ius-icon{font-size:var(--ius-icon-sm);flex:0 0 auto}.ius-listcard__titlerow{display:flex;align-items:center;gap:var(--ius-space-xs);flex-wrap:wrap;min-width:0}.ius-listcard__titlerow>.ius-icon{font-size:var(--ius-icon-md);flex:0 0 auto;color:var(--ius-text-secondary)}.ius-listcard__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold, 600);font-size:var(--_lc-title-fs);line-height:1.25;color:var(--ius-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.ius-listcard__tags{display:flex;align-items:center;gap:var(--ius-space-xs);flex-wrap:wrap}.ius-listcard__titlerow .ius-listcard__tags{margin-left:auto}.ius-listcard__subtitle{display:flex;align-items:flex-start;gap:var(--ius-space-xs);font:var(--ius-fw-regular, 400) var(--ius-fs-sm)/1.35 var(--ius-font-body);color:var(--ius-text-secondary);text-wrap:pretty}.ius-listcard__subtitle>.ius-icon{font-size:var(--ius-icon-sm);flex:0 0 auto;color:var(--ius-text-tertiary);margin-top:1px}.ius-listcard__subtitle ::ng-deep b{color:var(--ius-text-primary);font-weight:var(--ius-fw-semibold, 600)}.ius-listcard__paragraph{margin-top:var(--ius-space-xxs);font:var(--ius-fw-regular, 400) var(--ius-fs-sm)/1.45 var(--ius-font-body);color:var(--ius-text-secondary);text-wrap:pretty;overflow-wrap:anywhere}.ius-listcard__paragraph ::ng-deep b{color:var(--ius-text-primary);font-weight:var(--ius-fw-semibold, 600)}.ius-listcard__fields{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ius-space-xs) var(--_lc-fieldgap);flex:0 0 auto;max-width:100%;min-width:0}.ius-listcard__field{display:flex;flex-direction:column;gap:var(--ius-space-xxs);flex:0 0 auto;min-width:0}.ius-listcard__field[data-align=end]{text-align:right}.ius-listcard__field:nth-child(1){width:var(--_lc-col-1, auto)}.ius-listcard__field:nth-child(2){width:var(--_lc-col-2, auto)}.ius-listcard__field:nth-child(3){width:var(--_lc-col-3, auto)}.ius-listcard__field:nth-child(4){width:var(--_lc-col-4, auto)}.ius-listcard__field:nth-child(5){width:var(--_lc-col-5, auto)}.ius-listcard__field:nth-child(6){width:var(--_lc-col-6, auto)}.ius-listcard__flabel{font:var(--ius-fw-regular, 400) var(--ius-fs-sm)/1.3 var(--ius-font-body);color:var(--ius-text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-listcard__fvalue{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font:var(--ius-fw-regular, 400) var(--ius-fs-base)/1.3 var(--ius-font-body);color:var(--ius-text-secondary);overflow:hidden;white-space:nowrap;font-variant-numeric:tabular-nums}.ius-listcard__fvalue>.ius-icon{font-size:var(--ius-icon-sm);flex:0 0 auto;color:var(--ius-text-tertiary)}.ius-listcard__fvalue>span{overflow:hidden;text-overflow:ellipsis}.ius-listcard__field[data-emphasis=true] .ius-listcard__fvalue{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold, 600);font-size:var(--_lc-title-fs);color:var(--ius-text-primary)}.ius-listcard__bodydiv{flex:0 0 100%;height:0;border-top:1px solid var(--ius-stroke);margin:var(--ius-space-xxs) 0}.ius-listcard__trail{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-sm);margin-left:auto}.ius-listcard__status{display:inline-flex;align-items:center;white-space:nowrap}.ius-listcard__markers{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);flex:0 0 auto}.ius-listcard__actions{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);visibility:hidden}:host([data-clickable=true]:hover) .ius-listcard__actions,:host(:hover) .ius-listcard__actions,:host(:has(:focus-visible)) .ius-listcard__actions{visibility:visible}:host(:hover) .ius-listcard__hideonhover,:host(:has(:focus-visible)) .ius-listcard__hideonhover{display:none}.ius-listcard__menu{display:inline-flex}:host([data-menu-open=true]) .ius-listcard__actions{visibility:visible}:host([data-menu-open=true]) .ius-listcard__hideonhover{display:none}.ius-listcard__chevron{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;color:var(--ius-text-tertiary)}.ius-listcard__chevron .ius-icon{font-size:var(--ius-icon-lg)}:host([data-clickable=true]:hover) .ius-listcard__chevron{color:var(--ius-text-secondary)}:host:before{content:\"\";width:7px;height:7px;border-radius:var(--ius-radius-pill);background:transparent;flex:0 0 auto;align-self:center;margin-inline-end:var(--ius-space-xs)}:host([data-unread=true]):before{background:var(--ius-primary-900)}:host([data-unread=true]) .ius-listcard__title{font-weight:var(--ius-fw-bold, 700)}\n"] }]
|
|
5697
|
+
}, template: "<!-- Leading \u2014 t\u00EDpicamente <ius-avatar iusListCardLeading>. -->\r\n@if (hasLeading) {\r\n <span class=\"ius-listcard__lead\"><ng-content select=\"[iusListCardLeading]\" /></span>\r\n}\r\n\r\n<!-- body agrupa main + fields lado a lado; con poco espacio, fields cae a la 2\u00AA l\u00EDnea -->\r\n<span class=\"ius-listcard__body\">\r\n <span class=\"ius-listcard__main\">\r\n @if (hasOverline) {\r\n <span class=\"ius-listcard__overline\">\r\n @if (overlineIcon) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ overlineIcon }}</span>\r\n }\r\n @if (overline != null) {\r\n {{ overline }}\r\n }\r\n <ng-content select=\"[iusListCardOverline]\" />\r\n </span>\r\n }\r\n @if (hasTitleRow) {\r\n <span class=\"ius-listcard__titlerow\">\r\n @if (titleIcon) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ titleIcon }}</span>\r\n }\r\n @if (title != null || titleRefPresent) {\r\n <span class=\"ius-listcard__title\">{{ title }}<ng-content select=\"[iusListCardTitle]\" /></span>\r\n }\r\n @if (tags.length) {\r\n <span class=\"ius-listcard__tags\">\r\n @for (t of tags; track t.key ?? $index) {\r\n <ius-tag\r\n size=\"small\"\r\n role=\"status\"\r\n [tone]=\"t.tone ?? 'neutral'\"\r\n [variant]=\"t.variant\"\r\n [icon]=\"t.icon\"\r\n [dot]=\"t.dot\"\r\n [label]=\"t.label\"\r\n />\r\n }\r\n </span>\r\n }\r\n </span>\r\n }\r\n @if (hasSubtitle) {\r\n <span class=\"ius-listcard__subtitle\">\r\n @if (subtitleIcon) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ subtitleIcon }}</span>\r\n }\r\n @if (subtitle != null) {\r\n {{ subtitle }}\r\n }\r\n <ng-content select=\"[iusListCardSubtitle]\" />\r\n </span>\r\n }\r\n @if (hasParagraph) {\r\n <span class=\"ius-listcard__paragraph\">\r\n @if (paragraph != null) {\r\n {{ paragraph }}\r\n }\r\n <ng-content select=\"[iusListCardParagraph]\" />\r\n </span>\r\n }\r\n </span>\r\n\r\n <!-- divisor a lo ancho, insertado antes de la primera columna que hizo wrap -->\r\n @if (fields.length && wrapped()) {\r\n <span class=\"ius-listcard__bodydiv\" aria-hidden=\"true\"></span>\r\n }\r\n @if (fields.length) {\r\n <span class=\"ius-listcard__fields\">\r\n @for (f of fields; track f.key ?? $index) {\r\n <span\r\n class=\"ius-listcard__field\"\r\n [class.ius-listcard__hideonhover]=\"f.hideOnHover\"\r\n [attr.data-emphasis]=\"f.emphasis ? 'true' : null\"\r\n [attr.data-align]=\"f.align || null\"\r\n [style.width]=\"fieldWidth(f)\"\r\n >\r\n @if (f.label) {\r\n <span class=\"ius-listcard__flabel\">{{ f.label }}</span>\r\n }\r\n <span class=\"ius-listcard__fvalue\">\r\n @if (f.icon) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ f.icon }}</span>\r\n }\r\n <span>{{ f.value }}</span>\r\n </span>\r\n </span>\r\n }\r\n </span>\r\n }\r\n</span>\r\n\r\n<!-- zona final: estado \u00B7 markers \u00B7 acciones(+\u22EE) \u00B7 chevron -->\r\n@if (hasTrail) {\r\n <span class=\"ius-listcard__trail\">\r\n @if (status) {\r\n <!-- estado \u2014 delega en StatusChip (\u00E1tomo de estado del sistema) -->\r\n <span class=\"ius-listcard__status\" [class.ius-listcard__hideonhover]=\"status.hideOnHover\">\r\n <ius-status-chip\r\n [vocab]=\"status.vocab ?? 'actuacion'\"\r\n [status]=\"status.status\"\r\n [tone]=\"status.tone\"\r\n [label]=\"status.label\"\r\n [icon]=\"status.icon\"\r\n [customMap]=\"status.customMap\"\r\n [size]=\"statusChipSize\"\r\n />\r\n </span>\r\n }\r\n @if (markers.length) {\r\n <span class=\"ius-listcard__markers\">\r\n @for (m of markers; track m.key ?? $index) {\r\n <ius-icon-button\r\n [icon]=\"m.icon\"\r\n [variant]=\"m.variant || 'tertiary'\"\r\n shape=\"squared\"\r\n size=\"small\"\r\n [tooltip]=\"m.tooltip || m.label\"\r\n [ariaLabel]=\"m.ariaLabel || m.label || m.icon\"\r\n (clicked)=\"onMarker(m, $event)\"\r\n />\r\n }\r\n </span>\r\n }\r\n @if (actions.length || menu.length) {\r\n <span class=\"ius-listcard__actions\">\r\n @for (a of actions; track a.key ?? $index) {\r\n @if (renderAction) {\r\n <ng-container *ngTemplateOutlet=\"renderAction; context: { $implicit: a, index: $index }\" />\r\n } @else {\r\n <ius-icon-button\r\n [icon]=\"a.icon\"\r\n variant=\"tertiary\"\r\n shape=\"squared\"\r\n size=\"small\"\r\n [tooltip]=\"a.tooltip || a.label\"\r\n [ariaLabel]=\"a.ariaLabel || a.label || a.icon\"\r\n (clicked)=\"onAction(a, $event)\"\r\n />\r\n }\r\n }\r\n @if (menu.length) {\r\n <!-- \u22EE overflow: compone ius-dropdown. El span detiene la propagaci\u00F3n:\r\n abrir el men\u00FA o elegir un \u00EDtem no navega la fila. -->\r\n <span class=\"ius-listcard__menu\" (click)=\"$event.stopPropagation()\">\r\n <ius-dropdown\r\n [items]=\"menu\"\r\n placement=\"bottom-end\"\r\n ariaLabel=\"M\u00E1s opciones\"\r\n (openChange)=\"onMenuOpenChange($event)\"\r\n >\r\n <ius-icon-button\r\n iusDropdownTrigger\r\n icon=\"more_vert\"\r\n variant=\"tertiary\"\r\n shape=\"squared\"\r\n size=\"small\"\r\n tooltip=\"M\u00E1s opciones\"\r\n ariaLabel=\"M\u00E1s opciones\"\r\n />\r\n </ius-dropdown>\r\n </span>\r\n }\r\n </span>\r\n }\r\n @if (showChevron) {\r\n <span class=\"ius-listcard__chevron\"><span translate=\"no\" class=\"ius-icon\">chevron_right</span></span>\r\n }\r\n </span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_lc-py: 14px;--_lc-px: 16px;--_lc-gap: var(--ius-space-md);--_lc-title-fs: var(--ius-fs-lg);--_lc-fieldgap: 28px;position:relative;box-sizing:border-box;display:flex;align-items:center;gap:var(--_lc-gap);width:100%;padding:var(--_lc-py) var(--_lc-px);background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);font-family:var(--ius-font-body);text-align:left;transition:border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-clickable=true]){cursor:pointer}:host([data-size=small]){--_lc-py: 10px;--_lc-px: 14px;--_lc-gap: var(--ius-space-sm);--_lc-title-fs: var(--ius-fs-base);--_lc-fieldgap: 22px}:host([data-size=large]){--_lc-py: 18px;--_lc-px: 20px;--_lc-gap: var(--ius-space-md);--_lc-title-fs: var(--ius-fs-h5);--_lc-fieldgap: 34px}@container style(--ius-density: small){:host(:not([data-size])){--_lc-py: 10px;--_lc-px: 14px;--_lc-gap: var(--ius-space-sm);--_lc-title-fs: var(--ius-fs-base);--_lc-fieldgap: 22px}}@container style(--ius-density: large){:host(:not([data-size])){--_lc-py: 18px;--_lc-px: 20px;--_lc-gap: var(--ius-space-md);--_lc-title-fs: var(--ius-fs-h5);--_lc-fieldgap: 34px}}:host([data-clickable=true]:hover){border-color:var(--ius-stroke-strong, var(--ius-neutral-4));box-shadow:var(--ius-elevation-100)}:host(:focus-visible){outline:none;box-shadow:var(--ius-focus-ring)}.ius-listcard__lead{flex:0 0 auto;display:inline-flex;align-items:center}.ius-listcard__body{flex:1 1 auto;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:var(--ius-space-xs) var(--_lc-fieldgap)}.ius-listcard__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs);margin-inline-end:var(--ius-space-sm, 8px)}.ius-listcard__overline{display:flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);letter-spacing:var(--ius-ls-emphasis);text-transform:uppercase;color:var(--ius-text-tertiary);overflow:hidden;white-space:nowrap}.ius-listcard__overline .ius-icon{font-size:var(--ius-icon-sm);flex:0 0 auto}.ius-listcard__titlerow{display:flex;align-items:center;gap:var(--ius-space-xs);flex-wrap:wrap;min-width:0}.ius-listcard__titlerow>.ius-icon{font-size:var(--ius-icon-md);flex:0 0 auto;color:var(--ius-text-secondary)}.ius-listcard__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--_lc-title-fs);line-height:1.25;color:var(--ius-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.ius-listcard__tags{display:flex;align-items:center;gap:var(--ius-space-xs);flex-wrap:wrap}.ius-listcard__titlerow .ius-listcard__tags{margin-left:auto}.ius-listcard__subtitle{display:flex;align-items:flex-start;gap:var(--ius-space-xs);font:var(--ius-fw-regular, 400) var(--ius-fs-sm)/1.35 var(--ius-font-body);color:var(--ius-text-secondary);text-wrap:pretty}.ius-listcard__subtitle>.ius-icon{font-size:var(--ius-icon-sm);flex:0 0 auto;color:var(--ius-text-tertiary);margin-top:1px}.ius-listcard__subtitle ::ng-deep b{color:var(--ius-text-primary);font-weight:var(--ius-fw-semibold)}.ius-listcard__paragraph{margin-top:var(--ius-space-xxs);font:var(--ius-fw-regular, 400) var(--ius-fs-sm)/1.45 var(--ius-font-body);color:var(--ius-text-secondary);text-wrap:pretty;overflow-wrap:anywhere}.ius-listcard__paragraph ::ng-deep b{color:var(--ius-text-primary);font-weight:var(--ius-fw-semibold)}.ius-listcard__fields{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ius-space-xs) var(--_lc-fieldgap);flex:0 0 auto;max-width:100%;min-width:0}.ius-listcard__field{display:flex;flex-direction:column;gap:var(--ius-space-xxs);flex:0 0 auto;min-width:0}.ius-listcard__field[data-align=end]{text-align:right}.ius-listcard__field:nth-child(1){width:var(--_lc-col-1, auto)}.ius-listcard__field:nth-child(2){width:var(--_lc-col-2, auto)}.ius-listcard__field:nth-child(3){width:var(--_lc-col-3, auto)}.ius-listcard__field:nth-child(4){width:var(--_lc-col-4, auto)}.ius-listcard__field:nth-child(5){width:var(--_lc-col-5, auto)}.ius-listcard__field:nth-child(6){width:var(--_lc-col-6, auto)}.ius-listcard__flabel{font:var(--ius-fw-regular, 400) var(--ius-fs-sm)/1.3 var(--ius-font-body);color:var(--ius-text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-listcard__fvalue{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font:var(--ius-fw-regular, 400) var(--ius-fs-base)/1.3 var(--ius-font-body);color:var(--ius-text-secondary);overflow:hidden;white-space:nowrap;font-variant-numeric:tabular-nums}.ius-listcard__fvalue>.ius-icon{font-size:var(--ius-icon-sm);flex:0 0 auto;color:var(--ius-text-tertiary)}.ius-listcard__fvalue>span{overflow:hidden;text-overflow:ellipsis}.ius-listcard__field[data-emphasis=true] .ius-listcard__fvalue{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--_lc-title-fs);color:var(--ius-text-primary)}.ius-listcard__bodydiv{flex:0 0 100%;height:0;border-top:1px solid var(--ius-stroke);margin:var(--ius-space-xxs) 0}.ius-listcard__trail{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-sm);margin-left:auto}.ius-listcard__status{display:inline-flex;align-items:center;white-space:nowrap}.ius-listcard__markers{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);flex:0 0 auto}.ius-listcard__actions{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);visibility:hidden}:host([data-clickable=true]:hover) .ius-listcard__actions,:host(:hover) .ius-listcard__actions,:host(:has(:focus-visible)) .ius-listcard__actions{visibility:visible}:host(:hover) .ius-listcard__hideonhover,:host(:has(:focus-visible)) .ius-listcard__hideonhover{display:none}.ius-listcard__menu{display:inline-flex}:host([data-menu-open=true]) .ius-listcard__actions{visibility:visible}:host([data-menu-open=true]) .ius-listcard__hideonhover{display:none}.ius-listcard__chevron{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;color:var(--ius-text-tertiary)}.ius-listcard__chevron .ius-icon{font-size:var(--ius-icon-lg)}:host([data-clickable=true]:hover) .ius-listcard__chevron{color:var(--ius-text-secondary)}:host:before{content:\"\";width:7px;height:7px;border-radius:var(--ius-radius-pill);background:transparent;flex:0 0 auto;align-self:center;margin-inline-end:var(--ius-space-xs)}:host([data-unread=true]):before{background:var(--ius-primary-900)}:host([data-unread=true]) .ius-listcard__title{font-weight:var(--ius-fw-bold, 700)}\n"] }]
|
|
5698
5698
|
}], propDecorators: { overline: [{
|
|
5699
5699
|
type: Input
|
|
5700
5700
|
}], overlineIcon: [{
|
|
@@ -5933,7 +5933,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
5933
5933
|
type: Output
|
|
5934
5934
|
}] } });
|
|
5935
5935
|
|
|
5936
|
-
let uid$
|
|
5936
|
+
let uid$5 = 0;
|
|
5937
5937
|
/** ¿La lista viene agrupada (`{label, options}`) o plana? */
|
|
5938
5938
|
function isGrouped(options) {
|
|
5939
5939
|
return (Array.isArray(options) &&
|
|
@@ -6114,7 +6114,7 @@ class SelectComponent {
|
|
|
6114
6114
|
* corren en el constructor, antes de que Angular asigne los `@Input`, así que
|
|
6115
6115
|
* `this.id` valdría siempre `undefined` y el `id` del consumidor se perdería.
|
|
6116
6116
|
*/
|
|
6117
|
-
this.fallbackId = `ius-sel-${uid$
|
|
6117
|
+
this.fallbackId = `ius-sel-${uid$5++}`;
|
|
6118
6118
|
this.onChange = () => { };
|
|
6119
6119
|
this.onTouched = () => { };
|
|
6120
6120
|
this.overlay = inject(Overlay);
|
|
@@ -6650,7 +6650,7 @@ class SelectComponent {
|
|
|
6650
6650
|
useExisting: forwardRef(() => SelectComponent),
|
|
6651
6651
|
multi: true,
|
|
6652
6652
|
},
|
|
6653
|
-
], viewQueries: [{ propertyName: "field", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }, { propertyName: "search", first: true, predicate: ["search"], descendants: true, isSignal: true }, { propertyName: "createInput", first: true, predicate: ["createInput"], descendants: true, isSignal: true }, { propertyName: "menuTpl", first: true, predicate: ["menuTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label != null) {\r\n <label [for]=\"baseId\" class=\"ius-tf__label\">\r\n @if (required) {\r\n <span class=\"ius-tf__required\" aria-hidden=\"true\"></span>\r\n }\r\n <span>{{ label }}</span>\r\n @if (showIconHelp) {\r\n <!-- El golden envuelve el \u00EDcono en <Popover placement=\"top\" trigger=\"hover\">\r\n (ambos son los defaults de `ius-popover`) \u2014 mismo patr\u00F3n que TextField. -->\r\n <ius-popover\r\n [title]=\"iconHelpTitle\"\r\n [content]=\"iconHelpContent\"\r\n [disabled]=\"iconHelpEmpty\"\r\n >\r\n <span\r\n class=\"ius-tf__help-icon\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n aria-label=\"Ayuda\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">help</span>\r\n </span>\r\n </ius-popover>\r\n }\r\n <span class=\"ius-tf__colon\">:</span>\r\n </label>\r\n}\r\n\r\n<div\r\n #field\r\n [id]=\"baseId\"\r\n class=\"ius-tf__field\"\r\n role=\"combobox\"\r\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-controls]=\"menuId\"\r\n [attr.aria-required]=\"required || null\"\r\n [attr.aria-invalid]=\"isError() || null\"\r\n (click)=\"toggleOpen()\"\r\n (keydown)=\"onTriggerKeyDown($event)\"\r\n>\r\n @if (prefixIcon) {\r\n <span class=\"ius-tf__prefix\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ prefixIcon }}</span>\r\n </span>\r\n }\r\n\r\n @if (multiple && hasValue()) {\r\n <div class=\"ius-select__chips\">\r\n @for (val of valueArray(); track val) {\r\n <ius-chip\r\n [removable]=\"!isDisabled()\"\r\n [size]=\"chipSize\"\r\n [label]=\"labelFor(val)\"\r\n [disabled]=\"isDisabled()\"\r\n (removed)=\"removeChip(val)\"\r\n />\r\n }\r\n </div>\r\n } @else {\r\n <span class=\"ius-select__value\" [attr.data-placeholder]=\"!hasValue() || null\">\r\n {{ hasValue() ? labelFor(singleValue()!) : placeholder }}\r\n </span>\r\n }\r\n\r\n <!--\r\n Espejo de `clearReserved` del golden: el bot\u00F3n entra en el flujo solo si el\r\n campo es \"clearable-capable\" (showClear !== false y habilitado). Dentro de\r\n ese caso el slot S\u00CD queda reservado con `visibility`, para que el chevron no\r\n se desplace al aparecer/quitar el valor (auditor\u00EDa 2026-07-24). Con\r\n `showClear=false` o `disabled` desaparece del flujo, como el golden.\r\n -->\r\n @if (clearReserved) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-tf__clear\"\r\n aria-label=\"Limpiar campo\"\r\n tabindex=\"-1\"\r\n [style.visibility]=\"showClearComputed ? 'visible' : 'hidden'\"\r\n [attr.aria-hidden]=\"showClearComputed ? null : 'true'\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (click)=\"clear($event)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">cancel</span>\r\n </button>\r\n }\r\n\r\n <span class=\"ius-select__chevron\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ isOpen() ? 'expand_less' : 'expand_more' }}</span>\r\n </span>\r\n</div>\r\n\r\n@if (showHint) {\r\n <span [id]=\"helpId\" class=\"ius-tf__hint\">{{ hint }}</span>\r\n}\r\n\r\n<ng-template #menuTpl>\r\n <div\r\n #menu\r\n [id]=\"menuId\"\r\n class=\"ius-selectmenu\"\r\n role=\"listbox\"\r\n [attr.aria-multiselectable]=\"multiple || null\"\r\n [attr.data-size]=\"size !== 'medium' ? size : null\"\r\n [style.width.px]=\"menuWidth()\"\r\n >\r\n @if (searchable) {\r\n <div class=\"ius-selectmenu__search\">\r\n <span translate=\"no\" class=\"ius-icon\">search</span>\r\n <input\r\n #search\r\n type=\"text\"\r\n [placeholder]=\"searchPlaceholder\"\r\n [attr.aria-label]=\"searchPlaceholder\"\r\n [value]=\"query()\"\r\n (input)=\"onSearch($event)\"\r\n (keydown)=\"onTriggerKeyDown($event)\"\r\n />\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"ius-selectmenu__list ius-scroll ius-scroll--sm\"\r\n [style.max-height.px]=\"listMaxH\"\r\n >\r\n @if (visible().flat.length === 0) {\r\n <div class=\"ius-selectmenu__empty\">{{ emptyText }}</div>\r\n } @else {\r\n @for (g of visible().groups; track $index) {\r\n @if (g.label) {\r\n <div class=\"ius-selectmenu__group-label\">{{ g.label }}</div>\r\n }\r\n @for (item of g.items; track item.opt.value) {\r\n <ius-option-item\r\n [label]=\"item.opt.label\"\r\n [icon]=\"item.opt.icon\"\r\n [size]=\"size\"\r\n [value]=\"item.opt.value\"\r\n [selected]=\"isChosen(item.opt.value)\"\r\n [multi]=\"multiple\"\r\n [active]=\"item.flatIndex === activeIndex()\"\r\n [disabled]=\"item.opt.disabled || false\"\r\n (selectClicked)=\"handleSelect(item.opt)\"\r\n />\r\n }\r\n }\r\n }\r\n </div>\r\n\r\n @if (creatable) {\r\n <!-- Pie \u00ABagregar opci\u00F3n\u00BB: campo propio (independiente de la b\u00FAsqueda) +\r\n `ius-text-button` con \u00EDcono `add`. El bot\u00F3n se compone, no se\r\n reimplementa; su interior es inalcanzable desde este SCSS\r\n (encapsulaci\u00F3n), por eso el `flex: 0 0 auto` del golden se aplica al\r\n envoltorio `.ius-selectmenu__create-action`, no al `.ius-txtbtn`. -->\r\n <div class=\"ius-selectmenu__create\">\r\n <div class=\"ius-selectmenu__create-field\">\r\n <input\r\n #createInput\r\n type=\"text\"\r\n [placeholder]=\"createPlaceholder\"\r\n [attr.aria-label]=\"createPlaceholder\"\r\n [value]=\"draft()\"\r\n (input)=\"onCreateInput($event)\"\r\n (keydown)=\"onCreateKeyDown($event)\"\r\n />\r\n </div>\r\n <span class=\"ius-selectmenu__create-action\">\r\n <ius-text-button\r\n prefixIcon=\"add\"\r\n [label]=\"createLabel\"\r\n [size]=\"createButtonSize\"\r\n [disabled]=\"createDisabled()\"\r\n (clicked)=\"addItem()\"\r\n />\r\n </span>\r\n </div>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{--_tf-bg: var(--ius-neutral-2);--_tf-border: transparent;--_tf-fg: var(--ius-text-primary);--_tf-placeholder: var(--ius-text-tertiary);--_tf-icon: var(--ius-text-secondary);--_tf-clear: var(--ius-neutral-7);--_tf-py: 9px;--_tf-px: 12px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-md);display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);min-width:200px;width:100%;max-width:360px}:host(.ius-tf--compact){min-width:0;width:auto;max-width:none}.ius-tf__label{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-tf__required{width:5px;height:5px;border-radius:50%;background:var(--ius-danger-500);display:inline-block;margin-right:var(--ius-space-xxs)}.ius-tf__help-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-7);cursor:help}.ius-tf__help-icon .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-tf__colon{color:var(--ius-text-secondary)}.ius-tf__field{display:flex;align-items:center;gap:var(--ius-space-xxs);padding:var(--_tf-py) var(--_tf-px);background:var(--_tf-bg);border:1px solid var(--_tf-border);border-radius:var(--ius-radius-md);transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}.ius-tf__field:hover,:host([data-force=hover]) .ius-tf__field{--_tf-bg: var(--ius-info-100);--_tf-border: transparent;--_tf-clear: var(--ius-primary-900)}:host([data-focused=true]) .ius-tf__field,:host([data-force=focused]) .ius-tf__field,.ius-tf__field:focus-within{--_tf-bg: var(--ius-info-100);--_tf-border: var(--ius-primary-500);--_tf-clear: var(--ius-primary-900);box-shadow:var(--ius-focus-ring)}:host([data-error=true]) .ius-tf__field,:host([data-force=error]) .ius-tf__field{--_tf-bg: var(--ius-danger-100);--_tf-border: var(--ius-danger-700);--_tf-clear: var(--ius-danger-700);box-shadow:none}:host([data-error=true][data-focused=true]) .ius-tf__field,:host([data-force=error]) .ius-tf__field{box-shadow:0 0 0 3px var(--ius-danger-200)}:host([data-disabled=true]) .ius-tf__field,:host([data-force=disabled]) .ius-tf__field{--_tf-bg: var(--ius-neutral-2);--_tf-border: transparent;--_tf-fg: var(--ius-text-disabled);--_tf-placeholder: var(--ius-text-disabled);--_tf-icon: var(--ius-text-disabled);box-shadow:none}:host([data-disabled=true]) .ius-tf__label,:host([data-force=disabled]) .ius-tf__label{color:var(--ius-text-disabled)}:host([data-disabled=true]) .ius-tf__required,:host([data-force=disabled]) .ius-tf__required{background:var(--ius-neutral-5)}.ius-tf__prefix{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-tf__prefix .ius-icon{font-size:var(--_tf-icon-size);line-height:1}.ius-tf__clear{appearance:none;border:0;padding:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--_tf-clear);cursor:pointer;flex:0 0 auto}.ius-tf__clear:hover{color:var(--ius-neutral-9)}.ius-tf__clear .ius-icon{font-size:calc(var(--_tf-icon-size) + 2px);line-height:1}:host([data-error=true]) .ius-tf__clear{color:var(--ius-danger-700)}:host([data-error=true]) .ius-tf__clear:hover{color:var(--ius-danger-800)}.ius-tf__hint{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);font-weight:var(--ius-fw-medium);font-style:italic;color:var(--ius-text-secondary);letter-spacing:.02em}:host([data-error=true]) .ius-tf__hint,:host([data-force=error]) .ius-tf__hint{color:var(--ius-danger-700)}:host([data-disabled=true]) .ius-tf__hint,:host([data-force=disabled]) .ius-tf__hint{color:var(--ius-text-disabled)}:host([data-size=small]){--_tf-py: 6px;--_tf-px: 10px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-sm)}:host([data-size=large]){--_tf-py: 12px;--_tf-px: 14px;--_tf-fs: var(--ius-fs-lg);--_tf-lh: var(--ius-lh-lg);--_tf-icon-size: var(--ius-icon-lg)}@container style(--ius-control-size: small){:host(:not([data-size])){--_tf-py: 6px;--_tf-px: 10px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-sm)}}@container style(--ius-control-size: large){:host(:not([data-size])){--_tf-py: 12px;--_tf-px: 14px;--_tf-fs: var(--ius-fs-lg);--_tf-lh: var(--ius-lh-lg);--_tf-icon-size: var(--ius-icon-lg)}}.ius-tf__field{cursor:pointer;flex-wrap:wrap;gap:var(--ius-space-xs);align-items:flex-start}.ius-select__value,.ius-tf__prefix,.ius-select__chevron,.ius-tf__clear{align-self:center}:host(:has(.ius-select__chips)) .ius-select__chevron,:host(:has(.ius-select__chips)) .ius-tf__clear{align-self:flex-start}:host([data-disabled=true]) .ius-tf__field{cursor:not-allowed}.ius-select__value{flex:1 1 auto;min-width:0;font-size:var(--_tf-fs);line-height:var(--_tf-lh);color:var(--_tf-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-select__value[data-placeholder=true]{color:var(--_tf-placeholder)}.ius-select__chevron{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-select__chevron .ius-icon{font-size:calc(var(--_tf-icon-size) + 2px);line-height:1;transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-select__chips{display:flex;flex-wrap:wrap;gap:var(--ius-space-xs);flex:1 1 0;min-width:0}.ius-selectmenu{box-sizing:border-box;background:var(--ius-neutral-white);border-radius:var(--ius-radius-lg);box-shadow:var(--ius-elevation-300);padding:var(--ius-space-xs);display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);animation:ius-selectmenu-in .12s var(--ius-ease-decelerate)}@keyframes ius-selectmenu-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.ius-selectmenu__search{display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-xs);background:var(--ius-neutral-2);border:1px solid transparent;border-radius:var(--ius-radius-md)}.ius-selectmenu__search:focus-within{background:var(--ius-info-100);border-color:var(--ius-primary-500);box-shadow:var(--ius-focus-ring)}.ius-selectmenu__search .ius-icon{font-size:var(--ius-icon-md);color:var(--ius-text-tertiary);flex:0 0 auto}.ius-selectmenu__search input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary);min-width:0}.ius-selectmenu[data-size=large] .ius-selectmenu__search{padding:var(--ius-space-xs) var(--ius-space-sm)}.ius-selectmenu[data-size=large] .ius-selectmenu__search input{font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg)}@container style(--ius-control-size: large){.ius-selectmenu:not([data-size]) .ius-selectmenu__search{padding:var(--ius-space-xs) var(--ius-space-sm)}.ius-selectmenu:not([data-size]) .ius-selectmenu__search input{font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg)}}.ius-selectmenu__list{overflow-y:auto;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-selectmenu__group-label{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-semibold, 600);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);padding:var(--ius-space-xs) var(--ius-space-sm) var(--ius-space-xxs)}.ius-selectmenu__empty{padding:var(--ius-space-lg) var(--ius-space-sm);text-align:center;font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary)}.ius-selectmenu__create{display:flex;align-items:center;gap:var(--ius-space-xs);border-top:1px solid var(--ius-stroke);margin-top:var(--ius-space-xxs);padding-top:var(--ius-space-xs)}.ius-selectmenu__create-field{flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:var(--ius-space-xs) var(--ius-space-sm);background:var(--ius-neutral-2);border:1px solid transparent;border-radius:var(--ius-radius-md)}.ius-selectmenu__create-field:focus-within{background:var(--ius-info-100);border-color:var(--ius-primary-500);box-shadow:var(--ius-focus-ring)}.ius-selectmenu__create-field input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary);min-width:0}.ius-selectmenu__create-action{display:inline-flex;align-items:center;flex:0 0 auto}.ius-selectmenu[data-size=large] .ius-selectmenu__create-field input{font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg)}\n"], dependencies: [{ kind: "component", type: OptionItemComponent, selector: "ius-option-item", inputs: ["label", "icon", "selected", "multi", "active", "disabled", "size", "value", "state"], outputs: ["selectClicked"] }, { kind: "component", type: ChipComponent, selector: "ius-chip", inputs: ["label", "icon", "removable", "size", "disabled", "state", "removeLabel"], outputs: ["removed"] }, { kind: "component", type: PopoverComponent, selector: "ius-popover", inputs: ["title", "content", "placement", "trigger", "offset", "open", "defaultOpen", "showArrow", "disabled", "anchorRect", "padding", "dismissable", "panelClass"], outputs: ["openChange"] }, { kind: "component", type: TextButtonComponent, selector: "ius-text-button", inputs: ["label", "prefixIcon", "sufixIcon", "size", "disabled", "type", "ariaExpanded", "ariaControls"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6653
|
+
], viewQueries: [{ propertyName: "field", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }, { propertyName: "search", first: true, predicate: ["search"], descendants: true, isSignal: true }, { propertyName: "createInput", first: true, predicate: ["createInput"], descendants: true, isSignal: true }, { propertyName: "menuTpl", first: true, predicate: ["menuTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label != null) {\r\n <label [for]=\"baseId\" class=\"ius-tf__label\">\r\n @if (required) {\r\n <span class=\"ius-tf__required\" aria-hidden=\"true\"></span>\r\n }\r\n <span>{{ label }}</span>\r\n @if (showIconHelp) {\r\n <!-- El golden envuelve el \u00EDcono en <Popover placement=\"top\" trigger=\"hover\">\r\n (ambos son los defaults de `ius-popover`) \u2014 mismo patr\u00F3n que TextField. -->\r\n <ius-popover\r\n [title]=\"iconHelpTitle\"\r\n [content]=\"iconHelpContent\"\r\n [disabled]=\"iconHelpEmpty\"\r\n >\r\n <span\r\n class=\"ius-tf__help-icon\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n aria-label=\"Ayuda\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">help</span>\r\n </span>\r\n </ius-popover>\r\n }\r\n <span class=\"ius-tf__colon\">:</span>\r\n </label>\r\n}\r\n\r\n<div\r\n #field\r\n [id]=\"baseId\"\r\n class=\"ius-tf__field\"\r\n role=\"combobox\"\r\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-controls]=\"menuId\"\r\n [attr.aria-required]=\"required || null\"\r\n [attr.aria-invalid]=\"isError() || null\"\r\n (click)=\"toggleOpen()\"\r\n (keydown)=\"onTriggerKeyDown($event)\"\r\n>\r\n @if (prefixIcon) {\r\n <span class=\"ius-tf__prefix\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ prefixIcon }}</span>\r\n </span>\r\n }\r\n\r\n @if (multiple && hasValue()) {\r\n <div class=\"ius-select__chips\">\r\n @for (val of valueArray(); track val) {\r\n <ius-chip\r\n [removable]=\"!isDisabled()\"\r\n [size]=\"chipSize\"\r\n [label]=\"labelFor(val)\"\r\n [disabled]=\"isDisabled()\"\r\n (removed)=\"removeChip(val)\"\r\n />\r\n }\r\n </div>\r\n } @else {\r\n <span class=\"ius-select__value\" [attr.data-placeholder]=\"!hasValue() || null\">\r\n {{ hasValue() ? labelFor(singleValue()!) : placeholder }}\r\n </span>\r\n }\r\n\r\n <!--\r\n Espejo de `clearReserved` del golden: el bot\u00F3n entra en el flujo solo si el\r\n campo es \"clearable-capable\" (showClear !== false y habilitado). Dentro de\r\n ese caso el slot S\u00CD queda reservado con `visibility`, para que el chevron no\r\n se desplace al aparecer/quitar el valor (auditor\u00EDa 2026-07-24). Con\r\n `showClear=false` o `disabled` desaparece del flujo, como el golden.\r\n -->\r\n @if (clearReserved) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-tf__clear\"\r\n aria-label=\"Limpiar campo\"\r\n tabindex=\"-1\"\r\n [style.visibility]=\"showClearComputed ? 'visible' : 'hidden'\"\r\n [attr.aria-hidden]=\"showClearComputed ? null : 'true'\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (click)=\"clear($event)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">cancel</span>\r\n </button>\r\n }\r\n\r\n <span class=\"ius-select__chevron\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ isOpen() ? 'expand_less' : 'expand_more' }}</span>\r\n </span>\r\n</div>\r\n\r\n@if (showHint) {\r\n <span [id]=\"helpId\" class=\"ius-tf__hint\">{{ hint }}</span>\r\n}\r\n\r\n<ng-template #menuTpl>\r\n <div\r\n #menu\r\n [id]=\"menuId\"\r\n class=\"ius-selectmenu\"\r\n role=\"listbox\"\r\n [attr.aria-multiselectable]=\"multiple || null\"\r\n [attr.data-size]=\"size !== 'medium' ? size : null\"\r\n [style.width.px]=\"menuWidth()\"\r\n >\r\n @if (searchable) {\r\n <div class=\"ius-selectmenu__search\">\r\n <span translate=\"no\" class=\"ius-icon\">search</span>\r\n <input\r\n #search\r\n type=\"text\"\r\n [placeholder]=\"searchPlaceholder\"\r\n [attr.aria-label]=\"searchPlaceholder\"\r\n [value]=\"query()\"\r\n (input)=\"onSearch($event)\"\r\n (keydown)=\"onTriggerKeyDown($event)\"\r\n />\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"ius-selectmenu__list ius-scroll ius-scroll--sm\"\r\n [style.max-height.px]=\"listMaxH\"\r\n >\r\n @if (visible().flat.length === 0) {\r\n <div class=\"ius-selectmenu__empty\">{{ emptyText }}</div>\r\n } @else {\r\n @for (g of visible().groups; track $index) {\r\n @if (g.label) {\r\n <div class=\"ius-selectmenu__group-label\">{{ g.label }}</div>\r\n }\r\n @for (item of g.items; track item.opt.value) {\r\n <ius-option-item\r\n [label]=\"item.opt.label\"\r\n [icon]=\"item.opt.icon\"\r\n [size]=\"size\"\r\n [value]=\"item.opt.value\"\r\n [selected]=\"isChosen(item.opt.value)\"\r\n [multi]=\"multiple\"\r\n [active]=\"item.flatIndex === activeIndex()\"\r\n [disabled]=\"item.opt.disabled || false\"\r\n (selectClicked)=\"handleSelect(item.opt)\"\r\n />\r\n }\r\n }\r\n }\r\n </div>\r\n\r\n @if (creatable) {\r\n <!-- Pie \u00ABagregar opci\u00F3n\u00BB: campo propio (independiente de la b\u00FAsqueda) +\r\n `ius-text-button` con \u00EDcono `add`. El bot\u00F3n se compone, no se\r\n reimplementa; su interior es inalcanzable desde este SCSS\r\n (encapsulaci\u00F3n), por eso el `flex: 0 0 auto` del golden se aplica al\r\n envoltorio `.ius-selectmenu__create-action`, no al `.ius-txtbtn`. -->\r\n <div class=\"ius-selectmenu__create\">\r\n <div class=\"ius-selectmenu__create-field\">\r\n <input\r\n #createInput\r\n type=\"text\"\r\n [placeholder]=\"createPlaceholder\"\r\n [attr.aria-label]=\"createPlaceholder\"\r\n [value]=\"draft()\"\r\n (input)=\"onCreateInput($event)\"\r\n (keydown)=\"onCreateKeyDown($event)\"\r\n />\r\n </div>\r\n <span class=\"ius-selectmenu__create-action\">\r\n <ius-text-button\r\n prefixIcon=\"add\"\r\n [label]=\"createLabel\"\r\n [size]=\"createButtonSize\"\r\n [disabled]=\"createDisabled()\"\r\n (clicked)=\"addItem()\"\r\n />\r\n </span>\r\n </div>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{--_tf-bg: var(--ius-neutral-2);--_tf-border: transparent;--_tf-fg: var(--ius-text-primary);--_tf-placeholder: var(--ius-text-tertiary);--_tf-icon: var(--ius-text-secondary);--_tf-clear: var(--ius-neutral-7);--_tf-py: 9px;--_tf-px: 12px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-md);display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);min-width:200px;width:100%;max-width:360px}:host(.ius-tf--compact){min-width:0;width:auto;max-width:none}.ius-tf__label{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-tf__required{width:5px;height:5px;border-radius:50%;background:var(--ius-danger-500);display:inline-block;margin-right:var(--ius-space-xxs)}.ius-tf__help-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-7);cursor:help}.ius-tf__help-icon .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-tf__colon{color:var(--ius-text-secondary)}.ius-tf__field{display:flex;align-items:center;gap:var(--ius-space-xxs);padding:var(--_tf-py) var(--_tf-px);background:var(--_tf-bg);border:1px solid var(--_tf-border);border-radius:var(--ius-radius-md);transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}.ius-tf__field:hover,:host([data-force=hover]) .ius-tf__field{--_tf-bg: var(--ius-info-100);--_tf-border: transparent;--_tf-clear: var(--ius-primary-900)}:host([data-focused=true]) .ius-tf__field,:host([data-force=focused]) .ius-tf__field,.ius-tf__field:focus-within{--_tf-bg: var(--ius-info-100);--_tf-border: var(--ius-primary-500);--_tf-clear: var(--ius-primary-900);box-shadow:var(--ius-focus-ring)}:host([data-error=true]) .ius-tf__field,:host([data-force=error]) .ius-tf__field{--_tf-bg: var(--ius-danger-100);--_tf-border: var(--ius-danger-700);--_tf-clear: var(--ius-danger-700);box-shadow:none}:host([data-error=true][data-focused=true]) .ius-tf__field,:host([data-force=error]) .ius-tf__field{box-shadow:0 0 0 3px var(--ius-danger-200)}:host([data-disabled=true]) .ius-tf__field,:host([data-force=disabled]) .ius-tf__field{--_tf-bg: var(--ius-neutral-2);--_tf-border: transparent;--_tf-fg: var(--ius-text-disabled);--_tf-placeholder: var(--ius-text-disabled);--_tf-icon: var(--ius-text-disabled);box-shadow:none}:host([data-disabled=true]) .ius-tf__label,:host([data-force=disabled]) .ius-tf__label{color:var(--ius-text-disabled)}:host([data-disabled=true]) .ius-tf__required,:host([data-force=disabled]) .ius-tf__required{background:var(--ius-neutral-5)}.ius-tf__prefix{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-tf__prefix .ius-icon{font-size:var(--_tf-icon-size);line-height:1}.ius-tf__clear{appearance:none;border:0;padding:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--_tf-clear);cursor:pointer;flex:0 0 auto}.ius-tf__clear:hover{color:var(--ius-neutral-9)}.ius-tf__clear .ius-icon{font-size:calc(var(--_tf-icon-size) + 2px);line-height:1}:host([data-error=true]) .ius-tf__clear{color:var(--ius-danger-700)}:host([data-error=true]) .ius-tf__clear:hover{color:var(--ius-danger-800)}.ius-tf__hint{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);font-weight:var(--ius-fw-medium);font-style:italic;color:var(--ius-text-secondary);letter-spacing:.02em}:host([data-error=true]) .ius-tf__hint,:host([data-force=error]) .ius-tf__hint{color:var(--ius-danger-700)}:host([data-disabled=true]) .ius-tf__hint,:host([data-force=disabled]) .ius-tf__hint{color:var(--ius-text-disabled)}:host([data-size=small]){--_tf-py: 6px;--_tf-px: 10px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-sm)}:host([data-size=large]){--_tf-py: 12px;--_tf-px: 14px;--_tf-fs: var(--ius-fs-lg);--_tf-lh: var(--ius-lh-lg);--_tf-icon-size: var(--ius-icon-lg)}@container style(--ius-control-size: small){:host(:not([data-size])){--_tf-py: 6px;--_tf-px: 10px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-sm)}}@container style(--ius-control-size: large){:host(:not([data-size])){--_tf-py: 12px;--_tf-px: 14px;--_tf-fs: var(--ius-fs-lg);--_tf-lh: var(--ius-lh-lg);--_tf-icon-size: var(--ius-icon-lg)}}.ius-tf__field{cursor:pointer;flex-wrap:wrap;gap:var(--ius-space-xs);align-items:flex-start}.ius-select__value,.ius-tf__prefix,.ius-select__chevron,.ius-tf__clear{align-self:center}:host(:has(.ius-select__chips)) .ius-select__chevron,:host(:has(.ius-select__chips)) .ius-tf__clear{align-self:flex-start}:host([data-disabled=true]) .ius-tf__field{cursor:not-allowed}.ius-select__value{flex:1 1 auto;min-width:0;font-size:var(--_tf-fs);line-height:var(--_tf-lh);color:var(--_tf-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-select__value[data-placeholder=true]{color:var(--_tf-placeholder)}.ius-select__chevron{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-select__chevron .ius-icon{font-size:calc(var(--_tf-icon-size) + 2px);line-height:1;transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-select__chips{display:flex;flex-wrap:wrap;gap:var(--ius-space-xs);flex:1 1 0;min-width:0}.ius-selectmenu{box-sizing:border-box;background:var(--ius-neutral-white);border-radius:var(--ius-radius-lg);box-shadow:var(--ius-elevation-300);padding:var(--ius-space-xs);display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);animation:ius-selectmenu-in .12s var(--ius-ease-decelerate)}@keyframes ius-selectmenu-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.ius-selectmenu__search{display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-xs);background:var(--ius-neutral-2);border:1px solid transparent;border-radius:var(--ius-radius-md)}.ius-selectmenu__search:focus-within{background:var(--ius-info-100);border-color:var(--ius-primary-500);box-shadow:var(--ius-focus-ring)}.ius-selectmenu__search .ius-icon{font-size:var(--ius-icon-md);color:var(--ius-text-tertiary);flex:0 0 auto}.ius-selectmenu__search input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary);min-width:0}.ius-selectmenu[data-size=large] .ius-selectmenu__search{padding:var(--ius-space-xs) var(--ius-space-sm)}.ius-selectmenu[data-size=large] .ius-selectmenu__search input{font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg)}@container style(--ius-control-size: large){.ius-selectmenu:not([data-size]) .ius-selectmenu__search{padding:var(--ius-space-xs) var(--ius-space-sm)}.ius-selectmenu:not([data-size]) .ius-selectmenu__search input{font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg)}}.ius-selectmenu__list{overflow-y:auto;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-selectmenu__group-label{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);padding:var(--ius-space-xs) var(--ius-space-sm) var(--ius-space-xxs)}.ius-selectmenu__empty{padding:var(--ius-space-lg) var(--ius-space-sm);text-align:center;font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary)}.ius-selectmenu__create{display:flex;align-items:center;gap:var(--ius-space-xs);border-top:1px solid var(--ius-stroke);margin-top:var(--ius-space-xxs);padding-top:var(--ius-space-xs)}.ius-selectmenu__create-field{flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:var(--ius-space-xs) var(--ius-space-sm);background:var(--ius-neutral-2);border:1px solid transparent;border-radius:var(--ius-radius-md)}.ius-selectmenu__create-field:focus-within{background:var(--ius-info-100);border-color:var(--ius-primary-500);box-shadow:var(--ius-focus-ring)}.ius-selectmenu__create-field input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary);min-width:0}.ius-selectmenu__create-action{display:inline-flex;align-items:center;flex:0 0 auto}.ius-selectmenu[data-size=large] .ius-selectmenu__create-field input{font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg)}\n"], dependencies: [{ kind: "component", type: OptionItemComponent, selector: "ius-option-item", inputs: ["label", "icon", "selected", "multi", "active", "disabled", "size", "value", "state"], outputs: ["selectClicked"] }, { kind: "component", type: ChipComponent, selector: "ius-chip", inputs: ["label", "icon", "removable", "size", "disabled", "state", "removeLabel"], outputs: ["removed"] }, { kind: "component", type: PopoverComponent, selector: "ius-popover", inputs: ["title", "content", "placement", "trigger", "offset", "open", "defaultOpen", "showArrow", "disabled", "anchorRect", "padding", "dismissable", "panelClass"], outputs: ["openChange"] }, { kind: "component", type: TextButtonComponent, selector: "ius-text-button", inputs: ["label", "prefixIcon", "sufixIcon", "size", "disabled", "type", "ariaExpanded", "ariaControls"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6654
6654
|
}
|
|
6655
6655
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SelectComponent, decorators: [{
|
|
6656
6656
|
type: Component,
|
|
@@ -6668,7 +6668,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
6668
6668
|
'[attr.data-error]': 'isError() || null',
|
|
6669
6669
|
'[attr.data-disabled]': 'isDisabled() || null',
|
|
6670
6670
|
'[attr.data-force]': 'stateInput() || null',
|
|
6671
|
-
}, template: "@if (label != null) {\r\n <label [for]=\"baseId\" class=\"ius-tf__label\">\r\n @if (required) {\r\n <span class=\"ius-tf__required\" aria-hidden=\"true\"></span>\r\n }\r\n <span>{{ label }}</span>\r\n @if (showIconHelp) {\r\n <!-- El golden envuelve el \u00EDcono en <Popover placement=\"top\" trigger=\"hover\">\r\n (ambos son los defaults de `ius-popover`) \u2014 mismo patr\u00F3n que TextField. -->\r\n <ius-popover\r\n [title]=\"iconHelpTitle\"\r\n [content]=\"iconHelpContent\"\r\n [disabled]=\"iconHelpEmpty\"\r\n >\r\n <span\r\n class=\"ius-tf__help-icon\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n aria-label=\"Ayuda\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">help</span>\r\n </span>\r\n </ius-popover>\r\n }\r\n <span class=\"ius-tf__colon\">:</span>\r\n </label>\r\n}\r\n\r\n<div\r\n #field\r\n [id]=\"baseId\"\r\n class=\"ius-tf__field\"\r\n role=\"combobox\"\r\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-controls]=\"menuId\"\r\n [attr.aria-required]=\"required || null\"\r\n [attr.aria-invalid]=\"isError() || null\"\r\n (click)=\"toggleOpen()\"\r\n (keydown)=\"onTriggerKeyDown($event)\"\r\n>\r\n @if (prefixIcon) {\r\n <span class=\"ius-tf__prefix\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ prefixIcon }}</span>\r\n </span>\r\n }\r\n\r\n @if (multiple && hasValue()) {\r\n <div class=\"ius-select__chips\">\r\n @for (val of valueArray(); track val) {\r\n <ius-chip\r\n [removable]=\"!isDisabled()\"\r\n [size]=\"chipSize\"\r\n [label]=\"labelFor(val)\"\r\n [disabled]=\"isDisabled()\"\r\n (removed)=\"removeChip(val)\"\r\n />\r\n }\r\n </div>\r\n } @else {\r\n <span class=\"ius-select__value\" [attr.data-placeholder]=\"!hasValue() || null\">\r\n {{ hasValue() ? labelFor(singleValue()!) : placeholder }}\r\n </span>\r\n }\r\n\r\n <!--\r\n Espejo de `clearReserved` del golden: el bot\u00F3n entra en el flujo solo si el\r\n campo es \"clearable-capable\" (showClear !== false y habilitado). Dentro de\r\n ese caso el slot S\u00CD queda reservado con `visibility`, para que el chevron no\r\n se desplace al aparecer/quitar el valor (auditor\u00EDa 2026-07-24). Con\r\n `showClear=false` o `disabled` desaparece del flujo, como el golden.\r\n -->\r\n @if (clearReserved) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-tf__clear\"\r\n aria-label=\"Limpiar campo\"\r\n tabindex=\"-1\"\r\n [style.visibility]=\"showClearComputed ? 'visible' : 'hidden'\"\r\n [attr.aria-hidden]=\"showClearComputed ? null : 'true'\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (click)=\"clear($event)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">cancel</span>\r\n </button>\r\n }\r\n\r\n <span class=\"ius-select__chevron\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ isOpen() ? 'expand_less' : 'expand_more' }}</span>\r\n </span>\r\n</div>\r\n\r\n@if (showHint) {\r\n <span [id]=\"helpId\" class=\"ius-tf__hint\">{{ hint }}</span>\r\n}\r\n\r\n<ng-template #menuTpl>\r\n <div\r\n #menu\r\n [id]=\"menuId\"\r\n class=\"ius-selectmenu\"\r\n role=\"listbox\"\r\n [attr.aria-multiselectable]=\"multiple || null\"\r\n [attr.data-size]=\"size !== 'medium' ? size : null\"\r\n [style.width.px]=\"menuWidth()\"\r\n >\r\n @if (searchable) {\r\n <div class=\"ius-selectmenu__search\">\r\n <span translate=\"no\" class=\"ius-icon\">search</span>\r\n <input\r\n #search\r\n type=\"text\"\r\n [placeholder]=\"searchPlaceholder\"\r\n [attr.aria-label]=\"searchPlaceholder\"\r\n [value]=\"query()\"\r\n (input)=\"onSearch($event)\"\r\n (keydown)=\"onTriggerKeyDown($event)\"\r\n />\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"ius-selectmenu__list ius-scroll ius-scroll--sm\"\r\n [style.max-height.px]=\"listMaxH\"\r\n >\r\n @if (visible().flat.length === 0) {\r\n <div class=\"ius-selectmenu__empty\">{{ emptyText }}</div>\r\n } @else {\r\n @for (g of visible().groups; track $index) {\r\n @if (g.label) {\r\n <div class=\"ius-selectmenu__group-label\">{{ g.label }}</div>\r\n }\r\n @for (item of g.items; track item.opt.value) {\r\n <ius-option-item\r\n [label]=\"item.opt.label\"\r\n [icon]=\"item.opt.icon\"\r\n [size]=\"size\"\r\n [value]=\"item.opt.value\"\r\n [selected]=\"isChosen(item.opt.value)\"\r\n [multi]=\"multiple\"\r\n [active]=\"item.flatIndex === activeIndex()\"\r\n [disabled]=\"item.opt.disabled || false\"\r\n (selectClicked)=\"handleSelect(item.opt)\"\r\n />\r\n }\r\n }\r\n }\r\n </div>\r\n\r\n @if (creatable) {\r\n <!-- Pie \u00ABagregar opci\u00F3n\u00BB: campo propio (independiente de la b\u00FAsqueda) +\r\n `ius-text-button` con \u00EDcono `add`. El bot\u00F3n se compone, no se\r\n reimplementa; su interior es inalcanzable desde este SCSS\r\n (encapsulaci\u00F3n), por eso el `flex: 0 0 auto` del golden se aplica al\r\n envoltorio `.ius-selectmenu__create-action`, no al `.ius-txtbtn`. -->\r\n <div class=\"ius-selectmenu__create\">\r\n <div class=\"ius-selectmenu__create-field\">\r\n <input\r\n #createInput\r\n type=\"text\"\r\n [placeholder]=\"createPlaceholder\"\r\n [attr.aria-label]=\"createPlaceholder\"\r\n [value]=\"draft()\"\r\n (input)=\"onCreateInput($event)\"\r\n (keydown)=\"onCreateKeyDown($event)\"\r\n />\r\n </div>\r\n <span class=\"ius-selectmenu__create-action\">\r\n <ius-text-button\r\n prefixIcon=\"add\"\r\n [label]=\"createLabel\"\r\n [size]=\"createButtonSize\"\r\n [disabled]=\"createDisabled()\"\r\n (clicked)=\"addItem()\"\r\n />\r\n </span>\r\n </div>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{--_tf-bg: var(--ius-neutral-2);--_tf-border: transparent;--_tf-fg: var(--ius-text-primary);--_tf-placeholder: var(--ius-text-tertiary);--_tf-icon: var(--ius-text-secondary);--_tf-clear: var(--ius-neutral-7);--_tf-py: 9px;--_tf-px: 12px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-md);display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);min-width:200px;width:100%;max-width:360px}:host(.ius-tf--compact){min-width:0;width:auto;max-width:none}.ius-tf__label{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-tf__required{width:5px;height:5px;border-radius:50%;background:var(--ius-danger-500);display:inline-block;margin-right:var(--ius-space-xxs)}.ius-tf__help-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-7);cursor:help}.ius-tf__help-icon .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-tf__colon{color:var(--ius-text-secondary)}.ius-tf__field{display:flex;align-items:center;gap:var(--ius-space-xxs);padding:var(--_tf-py) var(--_tf-px);background:var(--_tf-bg);border:1px solid var(--_tf-border);border-radius:var(--ius-radius-md);transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}.ius-tf__field:hover,:host([data-force=hover]) .ius-tf__field{--_tf-bg: var(--ius-info-100);--_tf-border: transparent;--_tf-clear: var(--ius-primary-900)}:host([data-focused=true]) .ius-tf__field,:host([data-force=focused]) .ius-tf__field,.ius-tf__field:focus-within{--_tf-bg: var(--ius-info-100);--_tf-border: var(--ius-primary-500);--_tf-clear: var(--ius-primary-900);box-shadow:var(--ius-focus-ring)}:host([data-error=true]) .ius-tf__field,:host([data-force=error]) .ius-tf__field{--_tf-bg: var(--ius-danger-100);--_tf-border: var(--ius-danger-700);--_tf-clear: var(--ius-danger-700);box-shadow:none}:host([data-error=true][data-focused=true]) .ius-tf__field,:host([data-force=error]) .ius-tf__field{box-shadow:0 0 0 3px var(--ius-danger-200)}:host([data-disabled=true]) .ius-tf__field,:host([data-force=disabled]) .ius-tf__field{--_tf-bg: var(--ius-neutral-2);--_tf-border: transparent;--_tf-fg: var(--ius-text-disabled);--_tf-placeholder: var(--ius-text-disabled);--_tf-icon: var(--ius-text-disabled);box-shadow:none}:host([data-disabled=true]) .ius-tf__label,:host([data-force=disabled]) .ius-tf__label{color:var(--ius-text-disabled)}:host([data-disabled=true]) .ius-tf__required,:host([data-force=disabled]) .ius-tf__required{background:var(--ius-neutral-5)}.ius-tf__prefix{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-tf__prefix .ius-icon{font-size:var(--_tf-icon-size);line-height:1}.ius-tf__clear{appearance:none;border:0;padding:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--_tf-clear);cursor:pointer;flex:0 0 auto}.ius-tf__clear:hover{color:var(--ius-neutral-9)}.ius-tf__clear .ius-icon{font-size:calc(var(--_tf-icon-size) + 2px);line-height:1}:host([data-error=true]) .ius-tf__clear{color:var(--ius-danger-700)}:host([data-error=true]) .ius-tf__clear:hover{color:var(--ius-danger-800)}.ius-tf__hint{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);font-weight:var(--ius-fw-medium);font-style:italic;color:var(--ius-text-secondary);letter-spacing:.02em}:host([data-error=true]) .ius-tf__hint,:host([data-force=error]) .ius-tf__hint{color:var(--ius-danger-700)}:host([data-disabled=true]) .ius-tf__hint,:host([data-force=disabled]) .ius-tf__hint{color:var(--ius-text-disabled)}:host([data-size=small]){--_tf-py: 6px;--_tf-px: 10px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-sm)}:host([data-size=large]){--_tf-py: 12px;--_tf-px: 14px;--_tf-fs: var(--ius-fs-lg);--_tf-lh: var(--ius-lh-lg);--_tf-icon-size: var(--ius-icon-lg)}@container style(--ius-control-size: small){:host(:not([data-size])){--_tf-py: 6px;--_tf-px: 10px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-sm)}}@container style(--ius-control-size: large){:host(:not([data-size])){--_tf-py: 12px;--_tf-px: 14px;--_tf-fs: var(--ius-fs-lg);--_tf-lh: var(--ius-lh-lg);--_tf-icon-size: var(--ius-icon-lg)}}.ius-tf__field{cursor:pointer;flex-wrap:wrap;gap:var(--ius-space-xs);align-items:flex-start}.ius-select__value,.ius-tf__prefix,.ius-select__chevron,.ius-tf__clear{align-self:center}:host(:has(.ius-select__chips)) .ius-select__chevron,:host(:has(.ius-select__chips)) .ius-tf__clear{align-self:flex-start}:host([data-disabled=true]) .ius-tf__field{cursor:not-allowed}.ius-select__value{flex:1 1 auto;min-width:0;font-size:var(--_tf-fs);line-height:var(--_tf-lh);color:var(--_tf-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-select__value[data-placeholder=true]{color:var(--_tf-placeholder)}.ius-select__chevron{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-select__chevron .ius-icon{font-size:calc(var(--_tf-icon-size) + 2px);line-height:1;transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-select__chips{display:flex;flex-wrap:wrap;gap:var(--ius-space-xs);flex:1 1 0;min-width:0}.ius-selectmenu{box-sizing:border-box;background:var(--ius-neutral-white);border-radius:var(--ius-radius-lg);box-shadow:var(--ius-elevation-300);padding:var(--ius-space-xs);display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);animation:ius-selectmenu-in .12s var(--ius-ease-decelerate)}@keyframes ius-selectmenu-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.ius-selectmenu__search{display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-xs);background:var(--ius-neutral-2);border:1px solid transparent;border-radius:var(--ius-radius-md)}.ius-selectmenu__search:focus-within{background:var(--ius-info-100);border-color:var(--ius-primary-500);box-shadow:var(--ius-focus-ring)}.ius-selectmenu__search .ius-icon{font-size:var(--ius-icon-md);color:var(--ius-text-tertiary);flex:0 0 auto}.ius-selectmenu__search input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary);min-width:0}.ius-selectmenu[data-size=large] .ius-selectmenu__search{padding:var(--ius-space-xs) var(--ius-space-sm)}.ius-selectmenu[data-size=large] .ius-selectmenu__search input{font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg)}@container style(--ius-control-size: large){.ius-selectmenu:not([data-size]) .ius-selectmenu__search{padding:var(--ius-space-xs) var(--ius-space-sm)}.ius-selectmenu:not([data-size]) .ius-selectmenu__search input{font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg)}}.ius-selectmenu__list{overflow-y:auto;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-selectmenu__group-label{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-semibold, 600);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);padding:var(--ius-space-xs) var(--ius-space-sm) var(--ius-space-xxs)}.ius-selectmenu__empty{padding:var(--ius-space-lg) var(--ius-space-sm);text-align:center;font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary)}.ius-selectmenu__create{display:flex;align-items:center;gap:var(--ius-space-xs);border-top:1px solid var(--ius-stroke);margin-top:var(--ius-space-xxs);padding-top:var(--ius-space-xs)}.ius-selectmenu__create-field{flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:var(--ius-space-xs) var(--ius-space-sm);background:var(--ius-neutral-2);border:1px solid transparent;border-radius:var(--ius-radius-md)}.ius-selectmenu__create-field:focus-within{background:var(--ius-info-100);border-color:var(--ius-primary-500);box-shadow:var(--ius-focus-ring)}.ius-selectmenu__create-field input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary);min-width:0}.ius-selectmenu__create-action{display:inline-flex;align-items:center;flex:0 0 auto}.ius-selectmenu[data-size=large] .ius-selectmenu__create-field input{font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg)}\n"] }]
|
|
6671
|
+
}, template: "@if (label != null) {\r\n <label [for]=\"baseId\" class=\"ius-tf__label\">\r\n @if (required) {\r\n <span class=\"ius-tf__required\" aria-hidden=\"true\"></span>\r\n }\r\n <span>{{ label }}</span>\r\n @if (showIconHelp) {\r\n <!-- El golden envuelve el \u00EDcono en <Popover placement=\"top\" trigger=\"hover\">\r\n (ambos son los defaults de `ius-popover`) \u2014 mismo patr\u00F3n que TextField. -->\r\n <ius-popover\r\n [title]=\"iconHelpTitle\"\r\n [content]=\"iconHelpContent\"\r\n [disabled]=\"iconHelpEmpty\"\r\n >\r\n <span\r\n class=\"ius-tf__help-icon\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n aria-label=\"Ayuda\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">help</span>\r\n </span>\r\n </ius-popover>\r\n }\r\n <span class=\"ius-tf__colon\">:</span>\r\n </label>\r\n}\r\n\r\n<div\r\n #field\r\n [id]=\"baseId\"\r\n class=\"ius-tf__field\"\r\n role=\"combobox\"\r\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-controls]=\"menuId\"\r\n [attr.aria-required]=\"required || null\"\r\n [attr.aria-invalid]=\"isError() || null\"\r\n (click)=\"toggleOpen()\"\r\n (keydown)=\"onTriggerKeyDown($event)\"\r\n>\r\n @if (prefixIcon) {\r\n <span class=\"ius-tf__prefix\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ prefixIcon }}</span>\r\n </span>\r\n }\r\n\r\n @if (multiple && hasValue()) {\r\n <div class=\"ius-select__chips\">\r\n @for (val of valueArray(); track val) {\r\n <ius-chip\r\n [removable]=\"!isDisabled()\"\r\n [size]=\"chipSize\"\r\n [label]=\"labelFor(val)\"\r\n [disabled]=\"isDisabled()\"\r\n (removed)=\"removeChip(val)\"\r\n />\r\n }\r\n </div>\r\n } @else {\r\n <span class=\"ius-select__value\" [attr.data-placeholder]=\"!hasValue() || null\">\r\n {{ hasValue() ? labelFor(singleValue()!) : placeholder }}\r\n </span>\r\n }\r\n\r\n <!--\r\n Espejo de `clearReserved` del golden: el bot\u00F3n entra en el flujo solo si el\r\n campo es \"clearable-capable\" (showClear !== false y habilitado). Dentro de\r\n ese caso el slot S\u00CD queda reservado con `visibility`, para que el chevron no\r\n se desplace al aparecer/quitar el valor (auditor\u00EDa 2026-07-24). Con\r\n `showClear=false` o `disabled` desaparece del flujo, como el golden.\r\n -->\r\n @if (clearReserved) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-tf__clear\"\r\n aria-label=\"Limpiar campo\"\r\n tabindex=\"-1\"\r\n [style.visibility]=\"showClearComputed ? 'visible' : 'hidden'\"\r\n [attr.aria-hidden]=\"showClearComputed ? null : 'true'\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (click)=\"clear($event)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">cancel</span>\r\n </button>\r\n }\r\n\r\n <span class=\"ius-select__chevron\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ isOpen() ? 'expand_less' : 'expand_more' }}</span>\r\n </span>\r\n</div>\r\n\r\n@if (showHint) {\r\n <span [id]=\"helpId\" class=\"ius-tf__hint\">{{ hint }}</span>\r\n}\r\n\r\n<ng-template #menuTpl>\r\n <div\r\n #menu\r\n [id]=\"menuId\"\r\n class=\"ius-selectmenu\"\r\n role=\"listbox\"\r\n [attr.aria-multiselectable]=\"multiple || null\"\r\n [attr.data-size]=\"size !== 'medium' ? size : null\"\r\n [style.width.px]=\"menuWidth()\"\r\n >\r\n @if (searchable) {\r\n <div class=\"ius-selectmenu__search\">\r\n <span translate=\"no\" class=\"ius-icon\">search</span>\r\n <input\r\n #search\r\n type=\"text\"\r\n [placeholder]=\"searchPlaceholder\"\r\n [attr.aria-label]=\"searchPlaceholder\"\r\n [value]=\"query()\"\r\n (input)=\"onSearch($event)\"\r\n (keydown)=\"onTriggerKeyDown($event)\"\r\n />\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"ius-selectmenu__list ius-scroll ius-scroll--sm\"\r\n [style.max-height.px]=\"listMaxH\"\r\n >\r\n @if (visible().flat.length === 0) {\r\n <div class=\"ius-selectmenu__empty\">{{ emptyText }}</div>\r\n } @else {\r\n @for (g of visible().groups; track $index) {\r\n @if (g.label) {\r\n <div class=\"ius-selectmenu__group-label\">{{ g.label }}</div>\r\n }\r\n @for (item of g.items; track item.opt.value) {\r\n <ius-option-item\r\n [label]=\"item.opt.label\"\r\n [icon]=\"item.opt.icon\"\r\n [size]=\"size\"\r\n [value]=\"item.opt.value\"\r\n [selected]=\"isChosen(item.opt.value)\"\r\n [multi]=\"multiple\"\r\n [active]=\"item.flatIndex === activeIndex()\"\r\n [disabled]=\"item.opt.disabled || false\"\r\n (selectClicked)=\"handleSelect(item.opt)\"\r\n />\r\n }\r\n }\r\n }\r\n </div>\r\n\r\n @if (creatable) {\r\n <!-- Pie \u00ABagregar opci\u00F3n\u00BB: campo propio (independiente de la b\u00FAsqueda) +\r\n `ius-text-button` con \u00EDcono `add`. El bot\u00F3n se compone, no se\r\n reimplementa; su interior es inalcanzable desde este SCSS\r\n (encapsulaci\u00F3n), por eso el `flex: 0 0 auto` del golden se aplica al\r\n envoltorio `.ius-selectmenu__create-action`, no al `.ius-txtbtn`. -->\r\n <div class=\"ius-selectmenu__create\">\r\n <div class=\"ius-selectmenu__create-field\">\r\n <input\r\n #createInput\r\n type=\"text\"\r\n [placeholder]=\"createPlaceholder\"\r\n [attr.aria-label]=\"createPlaceholder\"\r\n [value]=\"draft()\"\r\n (input)=\"onCreateInput($event)\"\r\n (keydown)=\"onCreateKeyDown($event)\"\r\n />\r\n </div>\r\n <span class=\"ius-selectmenu__create-action\">\r\n <ius-text-button\r\n prefixIcon=\"add\"\r\n [label]=\"createLabel\"\r\n [size]=\"createButtonSize\"\r\n [disabled]=\"createDisabled()\"\r\n (clicked)=\"addItem()\"\r\n />\r\n </span>\r\n </div>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{--_tf-bg: var(--ius-neutral-2);--_tf-border: transparent;--_tf-fg: var(--ius-text-primary);--_tf-placeholder: var(--ius-text-tertiary);--_tf-icon: var(--ius-text-secondary);--_tf-clear: var(--ius-neutral-7);--_tf-py: 9px;--_tf-px: 12px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-md);display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);min-width:200px;width:100%;max-width:360px}:host(.ius-tf--compact){min-width:0;width:auto;max-width:none}.ius-tf__label{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-tf__required{width:5px;height:5px;border-radius:50%;background:var(--ius-danger-500);display:inline-block;margin-right:var(--ius-space-xxs)}.ius-tf__help-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-7);cursor:help}.ius-tf__help-icon .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-tf__colon{color:var(--ius-text-secondary)}.ius-tf__field{display:flex;align-items:center;gap:var(--ius-space-xxs);padding:var(--_tf-py) var(--_tf-px);background:var(--_tf-bg);border:1px solid var(--_tf-border);border-radius:var(--ius-radius-md);transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}.ius-tf__field:hover,:host([data-force=hover]) .ius-tf__field{--_tf-bg: var(--ius-info-100);--_tf-border: transparent;--_tf-clear: var(--ius-primary-900)}:host([data-focused=true]) .ius-tf__field,:host([data-force=focused]) .ius-tf__field,.ius-tf__field:focus-within{--_tf-bg: var(--ius-info-100);--_tf-border: var(--ius-primary-500);--_tf-clear: var(--ius-primary-900);box-shadow:var(--ius-focus-ring)}:host([data-error=true]) .ius-tf__field,:host([data-force=error]) .ius-tf__field{--_tf-bg: var(--ius-danger-100);--_tf-border: var(--ius-danger-700);--_tf-clear: var(--ius-danger-700);box-shadow:none}:host([data-error=true][data-focused=true]) .ius-tf__field,:host([data-force=error]) .ius-tf__field{box-shadow:0 0 0 3px var(--ius-danger-200)}:host([data-disabled=true]) .ius-tf__field,:host([data-force=disabled]) .ius-tf__field{--_tf-bg: var(--ius-neutral-2);--_tf-border: transparent;--_tf-fg: var(--ius-text-disabled);--_tf-placeholder: var(--ius-text-disabled);--_tf-icon: var(--ius-text-disabled);box-shadow:none}:host([data-disabled=true]) .ius-tf__label,:host([data-force=disabled]) .ius-tf__label{color:var(--ius-text-disabled)}:host([data-disabled=true]) .ius-tf__required,:host([data-force=disabled]) .ius-tf__required{background:var(--ius-neutral-5)}.ius-tf__prefix{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-tf__prefix .ius-icon{font-size:var(--_tf-icon-size);line-height:1}.ius-tf__clear{appearance:none;border:0;padding:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--_tf-clear);cursor:pointer;flex:0 0 auto}.ius-tf__clear:hover{color:var(--ius-neutral-9)}.ius-tf__clear .ius-icon{font-size:calc(var(--_tf-icon-size) + 2px);line-height:1}:host([data-error=true]) .ius-tf__clear{color:var(--ius-danger-700)}:host([data-error=true]) .ius-tf__clear:hover{color:var(--ius-danger-800)}.ius-tf__hint{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);font-weight:var(--ius-fw-medium);font-style:italic;color:var(--ius-text-secondary);letter-spacing:.02em}:host([data-error=true]) .ius-tf__hint,:host([data-force=error]) .ius-tf__hint{color:var(--ius-danger-700)}:host([data-disabled=true]) .ius-tf__hint,:host([data-force=disabled]) .ius-tf__hint{color:var(--ius-text-disabled)}:host([data-size=small]){--_tf-py: 6px;--_tf-px: 10px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-sm)}:host([data-size=large]){--_tf-py: 12px;--_tf-px: 14px;--_tf-fs: var(--ius-fs-lg);--_tf-lh: var(--ius-lh-lg);--_tf-icon-size: var(--ius-icon-lg)}@container style(--ius-control-size: small){:host(:not([data-size])){--_tf-py: 6px;--_tf-px: 10px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-sm)}}@container style(--ius-control-size: large){:host(:not([data-size])){--_tf-py: 12px;--_tf-px: 14px;--_tf-fs: var(--ius-fs-lg);--_tf-lh: var(--ius-lh-lg);--_tf-icon-size: var(--ius-icon-lg)}}.ius-tf__field{cursor:pointer;flex-wrap:wrap;gap:var(--ius-space-xs);align-items:flex-start}.ius-select__value,.ius-tf__prefix,.ius-select__chevron,.ius-tf__clear{align-self:center}:host(:has(.ius-select__chips)) .ius-select__chevron,:host(:has(.ius-select__chips)) .ius-tf__clear{align-self:flex-start}:host([data-disabled=true]) .ius-tf__field{cursor:not-allowed}.ius-select__value{flex:1 1 auto;min-width:0;font-size:var(--_tf-fs);line-height:var(--_tf-lh);color:var(--_tf-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-select__value[data-placeholder=true]{color:var(--_tf-placeholder)}.ius-select__chevron{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-select__chevron .ius-icon{font-size:calc(var(--_tf-icon-size) + 2px);line-height:1;transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-select__chips{display:flex;flex-wrap:wrap;gap:var(--ius-space-xs);flex:1 1 0;min-width:0}.ius-selectmenu{box-sizing:border-box;background:var(--ius-neutral-white);border-radius:var(--ius-radius-lg);box-shadow:var(--ius-elevation-300);padding:var(--ius-space-xs);display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);animation:ius-selectmenu-in .12s var(--ius-ease-decelerate)}@keyframes ius-selectmenu-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.ius-selectmenu__search{display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-xs);background:var(--ius-neutral-2);border:1px solid transparent;border-radius:var(--ius-radius-md)}.ius-selectmenu__search:focus-within{background:var(--ius-info-100);border-color:var(--ius-primary-500);box-shadow:var(--ius-focus-ring)}.ius-selectmenu__search .ius-icon{font-size:var(--ius-icon-md);color:var(--ius-text-tertiary);flex:0 0 auto}.ius-selectmenu__search input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary);min-width:0}.ius-selectmenu[data-size=large] .ius-selectmenu__search{padding:var(--ius-space-xs) var(--ius-space-sm)}.ius-selectmenu[data-size=large] .ius-selectmenu__search input{font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg)}@container style(--ius-control-size: large){.ius-selectmenu:not([data-size]) .ius-selectmenu__search{padding:var(--ius-space-xs) var(--ius-space-sm)}.ius-selectmenu:not([data-size]) .ius-selectmenu__search input{font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg)}}.ius-selectmenu__list{overflow-y:auto;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-selectmenu__group-label{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);padding:var(--ius-space-xs) var(--ius-space-sm) var(--ius-space-xxs)}.ius-selectmenu__empty{padding:var(--ius-space-lg) var(--ius-space-sm);text-align:center;font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary)}.ius-selectmenu__create{display:flex;align-items:center;gap:var(--ius-space-xs);border-top:1px solid var(--ius-stroke);margin-top:var(--ius-space-xxs);padding-top:var(--ius-space-xs)}.ius-selectmenu__create-field{flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:var(--ius-space-xs) var(--ius-space-sm);background:var(--ius-neutral-2);border:1px solid transparent;border-radius:var(--ius-radius-md)}.ius-selectmenu__create-field:focus-within{background:var(--ius-info-100);border-color:var(--ius-primary-500);box-shadow:var(--ius-focus-ring)}.ius-selectmenu__create-field input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary);min-width:0}.ius-selectmenu__create-action{display:inline-flex;align-items:center;flex:0 0 auto}.ius-selectmenu[data-size=large] .ius-selectmenu__create-field input{font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg)}\n"] }]
|
|
6672
6672
|
}], propDecorators: { options: [{
|
|
6673
6673
|
type: Input
|
|
6674
6674
|
}], multiple: [{
|
|
@@ -7162,7 +7162,7 @@ class ListViewComponent {
|
|
|
7162
7162
|
this.sortChange.emit(payload.value);
|
|
7163
7163
|
}
|
|
7164
7164
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7165
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ListViewComponent, isStandalone: true, selector: "ius-list-view", inputs: { hideHeader: ["hideHeader", "hideHeader", booleanAttribute], selectable: ["selectable", "selectable", booleanAttribute], allSelected: ["allSelected", "allSelected", booleanAttribute], someSelected: ["someSelected", "someSelected", booleanAttribute], selectLabel: "selectLabel", sortOptions: "sortOptions", sortValue: "sortValue", actions: "actions", selectedCount: ["selectedCount", "selectedCount", numberAttribute], selectionActions: "selectionActions", gap: "gap", bodyPadding: "bodyPadding", bordered: ["bordered", "bordered", booleanAttribute], scrollTrackMargin: "scrollTrackMargin", fit: ["fit", "fit", booleanAttribute], fieldWidths: "fieldWidths", hideFooter: ["hideFooter", "hideFooter", booleanAttribute], total: "total", countNoun: "countNoun", pagination: ["pagination", "pagination", booleanAttribute], paginationVariant: "paginationVariant", page: "page", pageSize: ["pageSize", "pageSize", numberAttribute], pageSizeOptions: "pageSizeOptions", size: "size" }, outputs: { selectAll: "selectAll", sortChange: "sortChange", clearSelection: "clearSelection", pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { properties: { "attr.data-size": "size !== 'medium' ? size : null", "attr.data-bordered": "bordered ? 'true' : 'false'", "attr.data-fit": "fit ? 'height' : null" }, classAttribute: "ius-listview" }, queries: [{ propertyName: "filtersRef", first: true, predicate: IusListViewFiltersDirective, descendants: true, isSignal: true }, { propertyName: "headerStartRef", first: true, predicate: IusListViewHeaderStartDirective, descendants: true, isSignal: true }, { propertyName: "headerEndRef", first: true, predicate: IusListViewHeaderEndDirective, descendants: true, isSignal: true }, { propertyName: "toolbarRef", first: true, predicate: IusListViewToolbarDirective, descendants: true, isSignal: true }, { propertyName: "footerStartRef", first: true, predicate: IusListViewFooterStartDirective, descendants: true, isSignal: true }, { propertyName: "footerEndRef", first: true, predicate: IusListViewFooterEndDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Header: modo selecci\u00F3n > toolbar > integrado -->\r\n@if (!hideHeader) {\r\n @if (inSelection) {\r\n <div class=\"ius-listview__header\" data-mode=\"selection\">\r\n @if (selectable) {\r\n <ius-checkbox\r\n [checked]=\"allSelected\"\r\n [indeterminate]=\"someSelected\"\r\n size=\"small\"\r\n (checkedChange)=\"selectAll.emit($event)\"\r\n />\r\n }\r\n <span class=\"ius-listview__selcount\">{{ selCountText }}</span>\r\n @if (selectionActions.length) {\r\n <span class=\"ius-listview__divider\"></span>\r\n }\r\n <div class=\"ius-listview__actions\">\r\n @for (a of selectionActions; track a.key ?? $index) {\r\n <ius-icon-button\r\n [icon]=\"a.icon\"\r\n variant=\"tertiary\"\r\n [size]=\"iconSize\"\r\n [ariaLabel]=\"a.ariaLabel || a.label || a.icon\"\r\n [disabled]=\"a.disabled ?? false\"\r\n (clicked)=\"onAction(a, $event)\"\r\n />\r\n }\r\n </div>\r\n <span class=\"ius-listview__spacer\"></span>\r\n @if (showClear) {\r\n <ius-text-button label=\"Limpiar\" (clicked)=\"clearSelection.emit()\" />\r\n }\r\n </div>\r\n } @else if (hasToolbar) {\r\n <div class=\"ius-listview__header ius-listview__header--toolbar\">\r\n <ng-content select=\"[iusListViewToolbar]\" />\r\n </div>\r\n } @else {\r\n <div class=\"ius-listview__header\">\r\n <div class=\"ius-listview__hgroup ius-listview__hgroup--grow\">\r\n <ng-content select=\"[iusListViewHeaderStart]\" />\r\n @if (selectable) {\r\n <ius-checkbox\r\n [checked]=\"allSelected\"\r\n [indeterminate]=\"someSelected\"\r\n size=\"small\"\r\n [label]=\"selectLabel\"\r\n (checkedChange)=\"selectAll.emit($event)\"\r\n />\r\n }\r\n @if (sortOptions.length) {\r\n <!-- orden: Dropdown de selecci\u00F3n \u00FAnica (trigger ghost swap_vert, tone neutral) -->\r\n <span class=\"ius-listview__sort\">\r\n <ius-dropdown\r\n selectable\r\n [items]=\"sortOptions\"\r\n [value]=\"sortValue\"\r\n [triggerLabel]=\"sortTriggerFallback\"\r\n triggerIcon=\"swap_vert\"\r\n tone=\"neutral\"\r\n ariaLabel=\"Ordenar\"\r\n (valueChange)=\"onSortChange($event)\"\r\n />\r\n </span>\r\n }\r\n @if (hasFilters) {\r\n <div class=\"ius-listview__filters\"><ng-content select=\"[iusListViewFilters]\" /></div>\r\n }\r\n </div>\r\n <div class=\"ius-listview__hgroup ius-listview__hgroup--end\">\r\n @if (actions.length) {\r\n <div class=\"ius-listview__actions\">\r\n @for (a of actions; track a.key ?? $index) {\r\n <ius-icon-button\r\n [icon]=\"a.icon\"\r\n variant=\"tertiary\"\r\n [size]=\"iconSize\"\r\n [ariaLabel]=\"a.ariaLabel || a.label || a.icon\"\r\n [disabled]=\"a.disabled ?? false\"\r\n (clicked)=\"onAction(a, $event)\"\r\n />\r\n }\r\n </div>\r\n }\r\n <ng-content select=\"[iusListViewHeaderEnd]\" />\r\n </div>\r\n </div>\r\n }\r\n}\r\n\r\n<!-- Body: \u00FAnico scroller; emite la rejilla --_lc-col-N a los ListCard proyectados -->\r\n<div\r\n class=\"ius-listview__body ius-scroll\"\r\n [style.gap]=\"px(gap)\"\r\n [style.padding]=\"px(bodyPadding)\"\r\n [style.--_sb-track-margin]=\"px(scrollTrackMargin)\"\r\n [style.--_lc-col-1]=\"colVar(0)\"\r\n [style.--_lc-col-2]=\"colVar(1)\"\r\n [style.--_lc-col-3]=\"colVar(2)\"\r\n [style.--_lc-col-4]=\"colVar(3)\"\r\n [style.--_lc-col-5]=\"colVar(4)\"\r\n [style.--_lc-col-6]=\"colVar(5)\"\r\n>\r\n <ng-content />\r\n</div>\r\n\r\n<!-- Footer: total a la izquierda + paginaci\u00F3n a la derecha -->\r\n@if (showFooter) {\r\n <div class=\"ius-listview__footer\">\r\n <ng-content select=\"[iusListViewFooterStart]\" />\r\n @if (countText) {\r\n <span class=\"ius-listview__count\">{{ countText }}</span>\r\n }\r\n @if (pagination) {\r\n <!-- FALLBACK Pagination: port interno (reemplazar por ius-pagination cuando exista) -->\r\n <ius-list-view-pagination\r\n [variant]=\"paginationVariant\"\r\n [total]=\"total\"\r\n [page]=\"page\"\r\n [pageSize]=\"pageSize\"\r\n [pageSizeOptions]=\"pageSizeOptions\"\r\n size=\"small\"\r\n (pageChange)=\"pageChange.emit($event)\"\r\n (pageSizeChange)=\"pageSizeChange.emit($event)\"\r\n />\r\n }\r\n <ng-content select=\"[iusListViewFooterEnd]\" />\r\n </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-height:0;width:100%;height:100%;font-family:var(--ius-font-body);box-sizing:border-box}:host([data-bordered=true]){background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);overflow:hidden}.ius-listview__header{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-sm);flex-wrap:nowrap;padding:var(--ius-space-xs) var(--ius-space-md);min-height:40px}.ius-listview__hgroup{display:flex;align-items:center;gap:var(--ius-space-sm);min-width:0;flex-wrap:wrap}.ius-listview__hgroup--grow{flex:1 1 auto}.ius-listview__hgroup--end{flex:0 0 auto;flex-wrap:nowrap;justify-content:flex-end}:host([data-bordered=true]) .ius-listview__header{border-bottom:1px solid var(--ius-stroke)}.ius-listview__header--toolbar{flex-wrap:wrap;min-height:0}:host([data-size=small]) .ius-listview__header{gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-sm);min-height:36px}@container style(--ius-density: small){:host(:not([data-size])) .ius-listview__header{gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-sm);min-height:36px}}.ius-listview__spacer{flex:1 1 auto}.ius-listview__divider{align-self:stretch;width:1px;background:var(--ius-stroke);margin:var(--ius-space-xxs) var(--ius-space-xs)}.ius-listview__filters{display:flex;align-items:center;gap:var(--ius-space-xs);flex-wrap:wrap}.ius-listview__actions{display:flex;align-items:center;gap:var(--ius-space-xxs)}.ius-listview__selcount{font:var(--ius-fw-regular, 400) var(--ius-fs-base)/20px var(--ius-font-body);color:var(--ius-primary-900);font-variant-numeric:tabular-nums}.ius-listview__body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column}:host([data-fit=height]){flex:1 1 auto;min-height:0;overflow:hidden}.ius-listview__body ::ng-deep .ius-listcard:hover{z-index:2}.ius-listview__footer{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-sm);padding:var(--ius-space-xs) var(--ius-space-md)}:host([data-bordered=true]) .ius-listview__footer{border-top:1px solid var(--ius-stroke)}.ius-listview__count{font:var(--ius-fw-regular, 400) var(--ius-fs-sm)/var(--ius-lh-sm) var(--ius-font-body);color:var(--ius-text-secondary);font-variant-numeric:tabular-nums}.ius-listview__footer .ius-pagination{margin-left:auto;flex:0 0 auto}.ius-listview__sort{display:inline-flex}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "ius-checkbox", inputs: ["label", "labelPosition", "showIconHelp", "iconHelpTitle", "iconHelpContent", "name", "value", "size", "checked", "defaultChecked", "indeterminate", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: DropdownComponent, selector: "ius-dropdown", inputs: ["items", "selectable", "value", "label", "triggerLabel", "triggerIcon", "tone", "variant", "placement", "open", "defaultOpen", "ariaLabel"], outputs: ["valueChange", "openChange"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "tooltipPlacement"], outputs: ["clicked"] }, { kind: "component", type: TextButtonComponent, selector: "ius-text-button", inputs: ["label", "prefixIcon", "sufixIcon", "size", "disabled", "type", "ariaExpanded", "ariaControls"], outputs: ["clicked"] }, { kind: "component", type: ListViewPaginationComponent, selector: "ius-list-view-pagination", inputs: ["variant", "page", "defaultPage", "totalPages", "total", "pageSize", "pageSizeOptions", "showCount", "countNoun", "siblingCount", "boundaryCount", "size", "disabled"], outputs: ["pageChange", "pageSizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7165
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ListViewComponent, isStandalone: true, selector: "ius-list-view", inputs: { hideHeader: ["hideHeader", "hideHeader", booleanAttribute], selectable: ["selectable", "selectable", booleanAttribute], allSelected: ["allSelected", "allSelected", booleanAttribute], someSelected: ["someSelected", "someSelected", booleanAttribute], selectLabel: "selectLabel", sortOptions: "sortOptions", sortValue: "sortValue", actions: "actions", selectedCount: ["selectedCount", "selectedCount", numberAttribute], selectionActions: "selectionActions", gap: "gap", bodyPadding: "bodyPadding", bordered: ["bordered", "bordered", booleanAttribute], scrollTrackMargin: "scrollTrackMargin", fit: ["fit", "fit", booleanAttribute], fieldWidths: "fieldWidths", hideFooter: ["hideFooter", "hideFooter", booleanAttribute], total: "total", countNoun: "countNoun", pagination: ["pagination", "pagination", booleanAttribute], paginationVariant: "paginationVariant", page: "page", pageSize: ["pageSize", "pageSize", numberAttribute], pageSizeOptions: "pageSizeOptions", size: "size" }, outputs: { selectAll: "selectAll", sortChange: "sortChange", clearSelection: "clearSelection", pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { properties: { "attr.data-size": "size !== 'medium' ? size : null", "attr.data-bordered": "bordered ? 'true' : 'false'", "attr.data-fit": "fit ? 'height' : null" }, classAttribute: "ius-listview" }, queries: [{ propertyName: "filtersRef", first: true, predicate: IusListViewFiltersDirective, descendants: true, isSignal: true }, { propertyName: "headerStartRef", first: true, predicate: IusListViewHeaderStartDirective, descendants: true, isSignal: true }, { propertyName: "headerEndRef", first: true, predicate: IusListViewHeaderEndDirective, descendants: true, isSignal: true }, { propertyName: "toolbarRef", first: true, predicate: IusListViewToolbarDirective, descendants: true, isSignal: true }, { propertyName: "footerStartRef", first: true, predicate: IusListViewFooterStartDirective, descendants: true, isSignal: true }, { propertyName: "footerEndRef", first: true, predicate: IusListViewFooterEndDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Header: modo selecci\u00F3n > toolbar > integrado -->\r\n@if (!hideHeader) {\r\n @if (inSelection) {\r\n <div class=\"ius-listview__header\" data-mode=\"selection\">\r\n @if (selectable) {\r\n <ius-checkbox\r\n [checked]=\"allSelected\"\r\n [indeterminate]=\"someSelected\"\r\n size=\"small\"\r\n (checkedChange)=\"selectAll.emit($event)\"\r\n />\r\n }\r\n <span class=\"ius-listview__selcount\">{{ selCountText }}</span>\r\n @if (selectionActions.length) {\r\n <span class=\"ius-listview__divider\"></span>\r\n }\r\n <div class=\"ius-listview__actions\">\r\n @for (a of selectionActions; track a.key ?? $index) {\r\n <ius-icon-button\r\n [icon]=\"a.icon\"\r\n variant=\"tertiary\"\r\n [size]=\"iconSize\"\r\n [ariaLabel]=\"a.ariaLabel || a.label || a.icon\"\r\n [disabled]=\"a.disabled ?? false\"\r\n (clicked)=\"onAction(a, $event)\"\r\n />\r\n }\r\n </div>\r\n <span class=\"ius-listview__spacer\"></span>\r\n @if (showClear) {\r\n <ius-text-button label=\"Limpiar\" (clicked)=\"clearSelection.emit()\" />\r\n }\r\n </div>\r\n } @else if (hasToolbar) {\r\n <div class=\"ius-listview__header ius-listview__header--toolbar\">\r\n <ng-content select=\"[iusListViewToolbar]\" />\r\n </div>\r\n } @else {\r\n <div class=\"ius-listview__header\">\r\n <div class=\"ius-listview__hgroup ius-listview__hgroup--grow\">\r\n <ng-content select=\"[iusListViewHeaderStart]\" />\r\n @if (selectable) {\r\n <ius-checkbox\r\n [checked]=\"allSelected\"\r\n [indeterminate]=\"someSelected\"\r\n size=\"small\"\r\n [label]=\"selectLabel\"\r\n (checkedChange)=\"selectAll.emit($event)\"\r\n />\r\n }\r\n @if (sortOptions.length) {\r\n <!-- orden: Dropdown de selecci\u00F3n \u00FAnica (trigger ghost swap_vert, tone neutral) -->\r\n <span class=\"ius-listview__sort\">\r\n <ius-dropdown\r\n selectable\r\n [items]=\"sortOptions\"\r\n [value]=\"sortValue\"\r\n [triggerLabel]=\"sortTriggerFallback\"\r\n triggerIcon=\"swap_vert\"\r\n tone=\"neutral\"\r\n ariaLabel=\"Ordenar\"\r\n (valueChange)=\"onSortChange($event)\"\r\n />\r\n </span>\r\n }\r\n @if (hasFilters) {\r\n <div class=\"ius-listview__filters\"><ng-content select=\"[iusListViewFilters]\" /></div>\r\n }\r\n </div>\r\n <div class=\"ius-listview__hgroup ius-listview__hgroup--end\">\r\n @if (actions.length) {\r\n <div class=\"ius-listview__actions\">\r\n @for (a of actions; track a.key ?? $index) {\r\n <ius-icon-button\r\n [icon]=\"a.icon\"\r\n variant=\"tertiary\"\r\n [size]=\"iconSize\"\r\n [ariaLabel]=\"a.ariaLabel || a.label || a.icon\"\r\n [disabled]=\"a.disabled ?? false\"\r\n (clicked)=\"onAction(a, $event)\"\r\n />\r\n }\r\n </div>\r\n }\r\n <ng-content select=\"[iusListViewHeaderEnd]\" />\r\n </div>\r\n </div>\r\n }\r\n}\r\n\r\n<!-- Body: \u00FAnico scroller; emite la rejilla --_lc-col-N a los ListCard proyectados -->\r\n<div\r\n class=\"ius-listview__body ius-scroll\"\r\n [style.gap]=\"px(gap)\"\r\n [style.padding]=\"px(bodyPadding)\"\r\n [style.--_sb-track-margin]=\"px(scrollTrackMargin)\"\r\n [style.--_lc-col-1]=\"colVar(0)\"\r\n [style.--_lc-col-2]=\"colVar(1)\"\r\n [style.--_lc-col-3]=\"colVar(2)\"\r\n [style.--_lc-col-4]=\"colVar(3)\"\r\n [style.--_lc-col-5]=\"colVar(4)\"\r\n [style.--_lc-col-6]=\"colVar(5)\"\r\n>\r\n <ng-content />\r\n</div>\r\n\r\n<!-- Footer: total a la izquierda + paginaci\u00F3n a la derecha -->\r\n@if (showFooter) {\r\n <div class=\"ius-listview__footer\">\r\n <ng-content select=\"[iusListViewFooterStart]\" />\r\n @if (countText) {\r\n <span class=\"ius-listview__count\">{{ countText }}</span>\r\n }\r\n @if (pagination) {\r\n <!-- FALLBACK Pagination: port interno (reemplazar por ius-pagination cuando exista) -->\r\n <ius-list-view-pagination\r\n [variant]=\"paginationVariant\"\r\n [total]=\"total\"\r\n [page]=\"page\"\r\n [pageSize]=\"pageSize\"\r\n [pageSizeOptions]=\"pageSizeOptions\"\r\n size=\"small\"\r\n (pageChange)=\"pageChange.emit($event)\"\r\n (pageSizeChange)=\"pageSizeChange.emit($event)\"\r\n />\r\n }\r\n <ng-content select=\"[iusListViewFooterEnd]\" />\r\n </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-height:0;width:100%;height:100%;font-family:var(--ius-font-body);box-sizing:border-box}:host([data-bordered=true]){background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);overflow:hidden}.ius-listview__header{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-sm);flex-wrap:nowrap;padding:var(--ius-space-xs) var(--ius-space-md);min-height:40px}.ius-listview__hgroup{display:flex;align-items:center;gap:var(--ius-space-sm);min-width:0;flex-wrap:wrap}.ius-listview__hgroup--grow{flex:1 1 auto}.ius-listview__hgroup--end{flex:0 0 auto;flex-wrap:nowrap;justify-content:flex-end}:host([data-bordered=true]) .ius-listview__header{border-bottom:1px solid var(--ius-stroke)}.ius-listview__header--toolbar{flex-wrap:wrap;min-height:0}:host([data-size=small]) .ius-listview__header{gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-sm);min-height:36px}@container style(--ius-density: small){:host(:not([data-size])) .ius-listview__header{gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-sm);min-height:36px}}.ius-listview__spacer{flex:1 1 auto}.ius-listview__divider{align-self:stretch;width:1px;background:var(--ius-stroke);margin:var(--ius-space-xxs) var(--ius-space-xs)}.ius-listview__filters{display:flex;align-items:center;gap:var(--ius-space-xs);flex-wrap:wrap}.ius-listview__actions{display:flex;align-items:center;gap:var(--ius-space-xxs)}.ius-listview__selcount{font:var(--ius-fw-regular, 400) var(--ius-fs-base)/var(--ius-lh-base) var(--ius-font-body);color:var(--ius-primary-900);font-variant-numeric:tabular-nums}.ius-listview__body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column}:host([data-fit=height]){flex:1 1 auto;min-height:0;overflow:hidden}.ius-listview__body ::ng-deep .ius-listcard:hover{z-index:2}.ius-listview__footer{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-sm);padding:var(--ius-space-xs) var(--ius-space-md)}:host([data-bordered=true]) .ius-listview__footer{border-top:1px solid var(--ius-stroke)}.ius-listview__count{font:var(--ius-fw-regular, 400) var(--ius-fs-sm)/var(--ius-lh-sm) var(--ius-font-body);color:var(--ius-text-secondary);font-variant-numeric:tabular-nums}.ius-listview__footer .ius-pagination{margin-left:auto;flex:0 0 auto}.ius-listview__sort{display:inline-flex}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "ius-checkbox", inputs: ["label", "labelPosition", "showIconHelp", "iconHelpTitle", "iconHelpContent", "name", "value", "size", "checked", "defaultChecked", "indeterminate", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: DropdownComponent, selector: "ius-dropdown", inputs: ["items", "selectable", "value", "label", "triggerLabel", "triggerIcon", "tone", "variant", "placement", "open", "defaultOpen", "ariaLabel"], outputs: ["valueChange", "openChange"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "tooltipPlacement"], outputs: ["clicked"] }, { kind: "component", type: TextButtonComponent, selector: "ius-text-button", inputs: ["label", "prefixIcon", "sufixIcon", "size", "disabled", "type", "ariaExpanded", "ariaControls"], outputs: ["clicked"] }, { kind: "component", type: ListViewPaginationComponent, selector: "ius-list-view-pagination", inputs: ["variant", "page", "defaultPage", "totalPages", "total", "pageSize", "pageSizeOptions", "showCount", "countNoun", "siblingCount", "boundaryCount", "size", "disabled"], outputs: ["pageChange", "pageSizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7166
7166
|
}
|
|
7167
7167
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ListViewComponent, decorators: [{
|
|
7168
7168
|
type: Component,
|
|
@@ -7177,7 +7177,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
7177
7177
|
'[attr.data-size]': "size !== 'medium' ? size : null",
|
|
7178
7178
|
'[attr.data-bordered]': "bordered ? 'true' : 'false'",
|
|
7179
7179
|
'[attr.data-fit]': "fit ? 'height' : null",
|
|
7180
|
-
}, template: "<!-- Header: modo selecci\u00F3n > toolbar > integrado -->\r\n@if (!hideHeader) {\r\n @if (inSelection) {\r\n <div class=\"ius-listview__header\" data-mode=\"selection\">\r\n @if (selectable) {\r\n <ius-checkbox\r\n [checked]=\"allSelected\"\r\n [indeterminate]=\"someSelected\"\r\n size=\"small\"\r\n (checkedChange)=\"selectAll.emit($event)\"\r\n />\r\n }\r\n <span class=\"ius-listview__selcount\">{{ selCountText }}</span>\r\n @if (selectionActions.length) {\r\n <span class=\"ius-listview__divider\"></span>\r\n }\r\n <div class=\"ius-listview__actions\">\r\n @for (a of selectionActions; track a.key ?? $index) {\r\n <ius-icon-button\r\n [icon]=\"a.icon\"\r\n variant=\"tertiary\"\r\n [size]=\"iconSize\"\r\n [ariaLabel]=\"a.ariaLabel || a.label || a.icon\"\r\n [disabled]=\"a.disabled ?? false\"\r\n (clicked)=\"onAction(a, $event)\"\r\n />\r\n }\r\n </div>\r\n <span class=\"ius-listview__spacer\"></span>\r\n @if (showClear) {\r\n <ius-text-button label=\"Limpiar\" (clicked)=\"clearSelection.emit()\" />\r\n }\r\n </div>\r\n } @else if (hasToolbar) {\r\n <div class=\"ius-listview__header ius-listview__header--toolbar\">\r\n <ng-content select=\"[iusListViewToolbar]\" />\r\n </div>\r\n } @else {\r\n <div class=\"ius-listview__header\">\r\n <div class=\"ius-listview__hgroup ius-listview__hgroup--grow\">\r\n <ng-content select=\"[iusListViewHeaderStart]\" />\r\n @if (selectable) {\r\n <ius-checkbox\r\n [checked]=\"allSelected\"\r\n [indeterminate]=\"someSelected\"\r\n size=\"small\"\r\n [label]=\"selectLabel\"\r\n (checkedChange)=\"selectAll.emit($event)\"\r\n />\r\n }\r\n @if (sortOptions.length) {\r\n <!-- orden: Dropdown de selecci\u00F3n \u00FAnica (trigger ghost swap_vert, tone neutral) -->\r\n <span class=\"ius-listview__sort\">\r\n <ius-dropdown\r\n selectable\r\n [items]=\"sortOptions\"\r\n [value]=\"sortValue\"\r\n [triggerLabel]=\"sortTriggerFallback\"\r\n triggerIcon=\"swap_vert\"\r\n tone=\"neutral\"\r\n ariaLabel=\"Ordenar\"\r\n (valueChange)=\"onSortChange($event)\"\r\n />\r\n </span>\r\n }\r\n @if (hasFilters) {\r\n <div class=\"ius-listview__filters\"><ng-content select=\"[iusListViewFilters]\" /></div>\r\n }\r\n </div>\r\n <div class=\"ius-listview__hgroup ius-listview__hgroup--end\">\r\n @if (actions.length) {\r\n <div class=\"ius-listview__actions\">\r\n @for (a of actions; track a.key ?? $index) {\r\n <ius-icon-button\r\n [icon]=\"a.icon\"\r\n variant=\"tertiary\"\r\n [size]=\"iconSize\"\r\n [ariaLabel]=\"a.ariaLabel || a.label || a.icon\"\r\n [disabled]=\"a.disabled ?? false\"\r\n (clicked)=\"onAction(a, $event)\"\r\n />\r\n }\r\n </div>\r\n }\r\n <ng-content select=\"[iusListViewHeaderEnd]\" />\r\n </div>\r\n </div>\r\n }\r\n}\r\n\r\n<!-- Body: \u00FAnico scroller; emite la rejilla --_lc-col-N a los ListCard proyectados -->\r\n<div\r\n class=\"ius-listview__body ius-scroll\"\r\n [style.gap]=\"px(gap)\"\r\n [style.padding]=\"px(bodyPadding)\"\r\n [style.--_sb-track-margin]=\"px(scrollTrackMargin)\"\r\n [style.--_lc-col-1]=\"colVar(0)\"\r\n [style.--_lc-col-2]=\"colVar(1)\"\r\n [style.--_lc-col-3]=\"colVar(2)\"\r\n [style.--_lc-col-4]=\"colVar(3)\"\r\n [style.--_lc-col-5]=\"colVar(4)\"\r\n [style.--_lc-col-6]=\"colVar(5)\"\r\n>\r\n <ng-content />\r\n</div>\r\n\r\n<!-- Footer: total a la izquierda + paginaci\u00F3n a la derecha -->\r\n@if (showFooter) {\r\n <div class=\"ius-listview__footer\">\r\n <ng-content select=\"[iusListViewFooterStart]\" />\r\n @if (countText) {\r\n <span class=\"ius-listview__count\">{{ countText }}</span>\r\n }\r\n @if (pagination) {\r\n <!-- FALLBACK Pagination: port interno (reemplazar por ius-pagination cuando exista) -->\r\n <ius-list-view-pagination\r\n [variant]=\"paginationVariant\"\r\n [total]=\"total\"\r\n [page]=\"page\"\r\n [pageSize]=\"pageSize\"\r\n [pageSizeOptions]=\"pageSizeOptions\"\r\n size=\"small\"\r\n (pageChange)=\"pageChange.emit($event)\"\r\n (pageSizeChange)=\"pageSizeChange.emit($event)\"\r\n />\r\n }\r\n <ng-content select=\"[iusListViewFooterEnd]\" />\r\n </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-height:0;width:100%;height:100%;font-family:var(--ius-font-body);box-sizing:border-box}:host([data-bordered=true]){background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);overflow:hidden}.ius-listview__header{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-sm);flex-wrap:nowrap;padding:var(--ius-space-xs) var(--ius-space-md);min-height:40px}.ius-listview__hgroup{display:flex;align-items:center;gap:var(--ius-space-sm);min-width:0;flex-wrap:wrap}.ius-listview__hgroup--grow{flex:1 1 auto}.ius-listview__hgroup--end{flex:0 0 auto;flex-wrap:nowrap;justify-content:flex-end}:host([data-bordered=true]) .ius-listview__header{border-bottom:1px solid var(--ius-stroke)}.ius-listview__header--toolbar{flex-wrap:wrap;min-height:0}:host([data-size=small]) .ius-listview__header{gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-sm);min-height:36px}@container style(--ius-density: small){:host(:not([data-size])) .ius-listview__header{gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-sm);min-height:36px}}.ius-listview__spacer{flex:1 1 auto}.ius-listview__divider{align-self:stretch;width:1px;background:var(--ius-stroke);margin:var(--ius-space-xxs) var(--ius-space-xs)}.ius-listview__filters{display:flex;align-items:center;gap:var(--ius-space-xs);flex-wrap:wrap}.ius-listview__actions{display:flex;align-items:center;gap:var(--ius-space-xxs)}.ius-listview__selcount{font:var(--ius-fw-regular, 400) var(--ius-fs-base)/
|
|
7180
|
+
}, template: "<!-- Header: modo selecci\u00F3n > toolbar > integrado -->\r\n@if (!hideHeader) {\r\n @if (inSelection) {\r\n <div class=\"ius-listview__header\" data-mode=\"selection\">\r\n @if (selectable) {\r\n <ius-checkbox\r\n [checked]=\"allSelected\"\r\n [indeterminate]=\"someSelected\"\r\n size=\"small\"\r\n (checkedChange)=\"selectAll.emit($event)\"\r\n />\r\n }\r\n <span class=\"ius-listview__selcount\">{{ selCountText }}</span>\r\n @if (selectionActions.length) {\r\n <span class=\"ius-listview__divider\"></span>\r\n }\r\n <div class=\"ius-listview__actions\">\r\n @for (a of selectionActions; track a.key ?? $index) {\r\n <ius-icon-button\r\n [icon]=\"a.icon\"\r\n variant=\"tertiary\"\r\n [size]=\"iconSize\"\r\n [ariaLabel]=\"a.ariaLabel || a.label || a.icon\"\r\n [disabled]=\"a.disabled ?? false\"\r\n (clicked)=\"onAction(a, $event)\"\r\n />\r\n }\r\n </div>\r\n <span class=\"ius-listview__spacer\"></span>\r\n @if (showClear) {\r\n <ius-text-button label=\"Limpiar\" (clicked)=\"clearSelection.emit()\" />\r\n }\r\n </div>\r\n } @else if (hasToolbar) {\r\n <div class=\"ius-listview__header ius-listview__header--toolbar\">\r\n <ng-content select=\"[iusListViewToolbar]\" />\r\n </div>\r\n } @else {\r\n <div class=\"ius-listview__header\">\r\n <div class=\"ius-listview__hgroup ius-listview__hgroup--grow\">\r\n <ng-content select=\"[iusListViewHeaderStart]\" />\r\n @if (selectable) {\r\n <ius-checkbox\r\n [checked]=\"allSelected\"\r\n [indeterminate]=\"someSelected\"\r\n size=\"small\"\r\n [label]=\"selectLabel\"\r\n (checkedChange)=\"selectAll.emit($event)\"\r\n />\r\n }\r\n @if (sortOptions.length) {\r\n <!-- orden: Dropdown de selecci\u00F3n \u00FAnica (trigger ghost swap_vert, tone neutral) -->\r\n <span class=\"ius-listview__sort\">\r\n <ius-dropdown\r\n selectable\r\n [items]=\"sortOptions\"\r\n [value]=\"sortValue\"\r\n [triggerLabel]=\"sortTriggerFallback\"\r\n triggerIcon=\"swap_vert\"\r\n tone=\"neutral\"\r\n ariaLabel=\"Ordenar\"\r\n (valueChange)=\"onSortChange($event)\"\r\n />\r\n </span>\r\n }\r\n @if (hasFilters) {\r\n <div class=\"ius-listview__filters\"><ng-content select=\"[iusListViewFilters]\" /></div>\r\n }\r\n </div>\r\n <div class=\"ius-listview__hgroup ius-listview__hgroup--end\">\r\n @if (actions.length) {\r\n <div class=\"ius-listview__actions\">\r\n @for (a of actions; track a.key ?? $index) {\r\n <ius-icon-button\r\n [icon]=\"a.icon\"\r\n variant=\"tertiary\"\r\n [size]=\"iconSize\"\r\n [ariaLabel]=\"a.ariaLabel || a.label || a.icon\"\r\n [disabled]=\"a.disabled ?? false\"\r\n (clicked)=\"onAction(a, $event)\"\r\n />\r\n }\r\n </div>\r\n }\r\n <ng-content select=\"[iusListViewHeaderEnd]\" />\r\n </div>\r\n </div>\r\n }\r\n}\r\n\r\n<!-- Body: \u00FAnico scroller; emite la rejilla --_lc-col-N a los ListCard proyectados -->\r\n<div\r\n class=\"ius-listview__body ius-scroll\"\r\n [style.gap]=\"px(gap)\"\r\n [style.padding]=\"px(bodyPadding)\"\r\n [style.--_sb-track-margin]=\"px(scrollTrackMargin)\"\r\n [style.--_lc-col-1]=\"colVar(0)\"\r\n [style.--_lc-col-2]=\"colVar(1)\"\r\n [style.--_lc-col-3]=\"colVar(2)\"\r\n [style.--_lc-col-4]=\"colVar(3)\"\r\n [style.--_lc-col-5]=\"colVar(4)\"\r\n [style.--_lc-col-6]=\"colVar(5)\"\r\n>\r\n <ng-content />\r\n</div>\r\n\r\n<!-- Footer: total a la izquierda + paginaci\u00F3n a la derecha -->\r\n@if (showFooter) {\r\n <div class=\"ius-listview__footer\">\r\n <ng-content select=\"[iusListViewFooterStart]\" />\r\n @if (countText) {\r\n <span class=\"ius-listview__count\">{{ countText }}</span>\r\n }\r\n @if (pagination) {\r\n <!-- FALLBACK Pagination: port interno (reemplazar por ius-pagination cuando exista) -->\r\n <ius-list-view-pagination\r\n [variant]=\"paginationVariant\"\r\n [total]=\"total\"\r\n [page]=\"page\"\r\n [pageSize]=\"pageSize\"\r\n [pageSizeOptions]=\"pageSizeOptions\"\r\n size=\"small\"\r\n (pageChange)=\"pageChange.emit($event)\"\r\n (pageSizeChange)=\"pageSizeChange.emit($event)\"\r\n />\r\n }\r\n <ng-content select=\"[iusListViewFooterEnd]\" />\r\n </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-height:0;width:100%;height:100%;font-family:var(--ius-font-body);box-sizing:border-box}:host([data-bordered=true]){background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);overflow:hidden}.ius-listview__header{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-sm);flex-wrap:nowrap;padding:var(--ius-space-xs) var(--ius-space-md);min-height:40px}.ius-listview__hgroup{display:flex;align-items:center;gap:var(--ius-space-sm);min-width:0;flex-wrap:wrap}.ius-listview__hgroup--grow{flex:1 1 auto}.ius-listview__hgroup--end{flex:0 0 auto;flex-wrap:nowrap;justify-content:flex-end}:host([data-bordered=true]) .ius-listview__header{border-bottom:1px solid var(--ius-stroke)}.ius-listview__header--toolbar{flex-wrap:wrap;min-height:0}:host([data-size=small]) .ius-listview__header{gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-sm);min-height:36px}@container style(--ius-density: small){:host(:not([data-size])) .ius-listview__header{gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-sm);min-height:36px}}.ius-listview__spacer{flex:1 1 auto}.ius-listview__divider{align-self:stretch;width:1px;background:var(--ius-stroke);margin:var(--ius-space-xxs) var(--ius-space-xs)}.ius-listview__filters{display:flex;align-items:center;gap:var(--ius-space-xs);flex-wrap:wrap}.ius-listview__actions{display:flex;align-items:center;gap:var(--ius-space-xxs)}.ius-listview__selcount{font:var(--ius-fw-regular, 400) var(--ius-fs-base)/var(--ius-lh-base) var(--ius-font-body);color:var(--ius-primary-900);font-variant-numeric:tabular-nums}.ius-listview__body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column}:host([data-fit=height]){flex:1 1 auto;min-height:0;overflow:hidden}.ius-listview__body ::ng-deep .ius-listcard:hover{z-index:2}.ius-listview__footer{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-sm);padding:var(--ius-space-xs) var(--ius-space-md)}:host([data-bordered=true]) .ius-listview__footer{border-top:1px solid var(--ius-stroke)}.ius-listview__count{font:var(--ius-fw-regular, 400) var(--ius-fs-sm)/var(--ius-lh-sm) var(--ius-font-body);color:var(--ius-text-secondary);font-variant-numeric:tabular-nums}.ius-listview__footer .ius-pagination{margin-left:auto;flex:0 0 auto}.ius-listview__sort{display:inline-flex}\n"] }]
|
|
7181
7181
|
}], propDecorators: { hideHeader: [{
|
|
7182
7182
|
type: Input,
|
|
7183
7183
|
args: [{ transform: booleanAttribute }]
|
|
@@ -7379,8 +7379,8 @@ class CardComponent {
|
|
|
7379
7379
|
// card. El golden no la trae porque allí la card navegable siempre es un
|
|
7380
7380
|
// <button> nativo; aquí el camino div-navegable sí la necesita. Mismo
|
|
7381
7381
|
// patrón que ya usan Tag y PersonItem.
|
|
7382
|
-
//
|
|
7383
|
-
//
|
|
7382
|
+
// Diseño la adoptó en Card.jsx el 2026-08-28 (T4 del pedido de auditoría):
|
|
7383
|
+
// ya es paridad con el golden, no una desviación.
|
|
7384
7384
|
if (event.target !== this.hostRef.nativeElement)
|
|
7385
7385
|
return;
|
|
7386
7386
|
event.preventDefault();
|
|
@@ -7484,18 +7484,12 @@ function maskLine(value) {
|
|
|
7484
7484
|
* `actions` (chip) compone `ius-dropdown` (trigger IconButton `more_vert`
|
|
7485
7485
|
* proyectado, antes de la X).
|
|
7486
7486
|
*
|
|
7487
|
-
* Nota de port: en React la card y la fila
|
|
7488
|
-
* `data-variant` de PersonItem (`option`/`chip`)
|
|
7489
|
-
*
|
|
7490
|
-
*
|
|
7491
|
-
*
|
|
7492
|
-
*
|
|
7493
|
-
*
|
|
7494
|
-
* Pendiente de diseño (reportado el 2026-08-27): eso deja una divergencia
|
|
7495
|
-
* visual real con React, donde hoy la fila NO tiene borde en reposo. Aquí se
|
|
7496
|
-
* asume que `variant="outlined"` debía verse, que es lo que ya hacía el
|
|
7497
|
-
* fallback anterior. Si diseño confirma lo contrario, quitar el `variant` de
|
|
7498
|
-
* la card en la plantilla.
|
|
7487
|
+
* Nota de port: en React la card y la fila eran EL MISMO elemento, así que el
|
|
7488
|
+
* `data-variant` de PersonItem (`option`/`chip`) pisaba al de Card y la fila se
|
|
7489
|
+
* quedaba sin borde en reposo. Diseño lo resolvió el 2026-08-28 (T5 del pedido
|
|
7490
|
+
* de auditoría): el atributo propio pasó a `data-pi-variant` —ya no colisiona—
|
|
7491
|
+
* y el borde es OPCIONAL vía `bordered`, apagado por defecto, apoyado en la
|
|
7492
|
+
* nueva variante `Card variant="plain"`. Aquí se replica igual.
|
|
7499
7493
|
*
|
|
7500
7494
|
* Para cuenta a la que cambiar → AccountItem; fila de acción → MenuItem; pill
|
|
7501
7495
|
* de texto simple → Chip/Tag.
|
|
@@ -7506,6 +7500,14 @@ class PersonItemComponent {
|
|
|
7506
7500
|
this.color = 'auto';
|
|
7507
7501
|
/** Fila seleccionable (`option`) o valor eliminable (`chip`). */
|
|
7508
7502
|
this.variant = 'option';
|
|
7503
|
+
/**
|
|
7504
|
+
* Muestra el borde outlined de la fila (superficie Card). **Off por defecto**:
|
|
7505
|
+
* las filas no llevan contorno propio y se separan por el espacio. Enciéndelo
|
|
7506
|
+
* cuando cada fila deba leerse como una tarjeta independiente. Los estados
|
|
7507
|
+
* tintados (hover/selected/pressed en `option`) tiñen el borde igual con o sin
|
|
7508
|
+
* `bordered`.
|
|
7509
|
+
*/
|
|
7510
|
+
this.bordered = false;
|
|
7509
7511
|
/** Escala de avatar + texto; `medium` hereda `--ius-density` del contexto. */
|
|
7510
7512
|
this.size = 'medium';
|
|
7511
7513
|
/** (option) fila elegida: fondo resaltado. */
|
|
@@ -7530,6 +7532,10 @@ class PersonItemComponent {
|
|
|
7530
7532
|
this.nameRef = contentChild(IusPersonItemNameDirective, /* @ts-ignore */
|
|
7531
7533
|
...(ngDevMode ? [{ debugName: "nameRef" }] : /* istanbul ignore next */ []));
|
|
7532
7534
|
}
|
|
7535
|
+
/** Superficie de la card: con contorno solo si `bordered`. */
|
|
7536
|
+
get cardVariant() {
|
|
7537
|
+
return this.bordered ? 'outlined' : 'plain';
|
|
7538
|
+
}
|
|
7533
7539
|
get hasTrailing() {
|
|
7534
7540
|
return !!this.trailingRef();
|
|
7535
7541
|
}
|
|
@@ -7590,7 +7596,7 @@ class PersonItemComponent {
|
|
|
7590
7596
|
this.removed.emit(event);
|
|
7591
7597
|
}
|
|
7592
7598
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PersonItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7593
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: PersonItemComponent, isStandalone: true, selector: "ius-person-item", inputs: { name: "name", lines: "lines", avatar: "avatar", icon: "icon", monogram: "monogram", color: "color", shape: "shape", variant: "variant", size: "size", selected: ["selected", "selected", booleanAttribute], showCheck: ["showCheck", "showCheck", booleanAttribute], mask: ["mask", "mask", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], actions: "actions", actionsLabel: "actionsLabel", removeLabel: "removeLabel", state: "state", ariaLabel: "ariaLabel" }, outputs: { clicked: "clicked", removed: "removed" }, host: { properties: { "attr.data-variant": "variant", "attr.data-size": "size !== 'medium' ? size : null", "attr.data-state": "state || null", "attr.data-disabled": "disabled ? 'true' : null" }, classAttribute: "ius-personitem" }, queries: [{ propertyName: "trailingRef", first: true, predicate: IusPersonItemTrailingDirective, descendants: true, isSignal: true }, { propertyName: "nameRef", first: true, predicate: IusPersonItemNameDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- La superficie la pone ius-card (
|
|
7599
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: PersonItemComponent, isStandalone: true, selector: "ius-person-item", inputs: { name: "name", lines: "lines", avatar: "avatar", icon: "icon", monogram: "monogram", color: "color", shape: "shape", variant: "variant", bordered: ["bordered", "bordered", booleanAttribute], size: "size", selected: ["selected", "selected", booleanAttribute], showCheck: ["showCheck", "showCheck", booleanAttribute], mask: ["mask", "mask", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], actions: "actions", actionsLabel: "actionsLabel", removeLabel: "removeLabel", state: "state", ariaLabel: "ariaLabel" }, outputs: { clicked: "clicked", removed: "removed" }, host: { properties: { "attr.data-pi-variant": "variant", "attr.data-size": "size !== 'medium' ? size : null", "attr.data-state": "state || null", "attr.data-disabled": "disabled ? 'true' : null" }, classAttribute: "ius-personitem" }, queries: [{ propertyName: "trailingRef", first: true, predicate: IusPersonItemTrailingDirective, descendants: true, isSignal: true }, { propertyName: "nameRef", first: true, predicate: IusPersonItemNameDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- La superficie la pone ius-card (radius lg \u00B7 padding none), como manda la\n ng-spec. El contorno es opcional (`bordered`, off por defecto): sin \u00E9l la\n card va en `plain`. Con `padding=\"none\"` el padding de la fila lo pone\n .ius-personitem__row, que es \u00ABel propio cuerpo\u00BB del que habla Card. -->\n<ius-card\n class=\"ius-personitem__card\"\n [variant]=\"cardVariant\"\n radius=\"lg\"\n padding=\"none\"\n [interactive]=\"clickable\"\n [selected]=\"cardSelected\"\n [ariaLabel]=\"ariaLabel\"\n [attr.aria-pressed]=\"ariaPressed\"\n (clicked)=\"clicked.emit($event)\"\n>\n <div class=\"ius-personitem__row\">\n <ius-avatar\n [size]=\"avatarSize\"\n [shape]=\"avatarShape\"\n [src]=\"avatar\"\n [name]=\"avatarName\"\n [monogram]=\"monogram\"\n [icon]=\"effIcon\"\n [color]=\"color\"\n [ariaLabel]=\"name\"\n />\n\n <div class=\"ius-personitem__body\">\n @if (hasName) {\n <span class=\"ius-personitem__name\">{{ name }}<ng-content select=\"[iusPersonItemName]\" /></span>\n }\n @for (line of displayLines; track $index) {\n <span class=\"ius-personitem__line\">\n @if (line.tpl) {\n <ng-container *ngTemplateOutlet=\"line.tpl\" />\n } @else {\n {{ line.text }}\n }\n </span>\n }\n </div>\n\n @if (selected && showCheck) {\n <span class=\"ius-personitem__check\"><span translate=\"no\" class=\"ius-icon\">check_circle</span></span>\n }\n\n @if (hasTrailing) {\n <span class=\"ius-personitem__trailing\"><ng-content select=\"[iusPersonItemTrailing]\" /></span>\n }\n\n @if (showMenu) {\n <!-- \u22EE de acciones del chip: compone ius-dropdown. Va ANTES de la X;\n su click no dispara la fila. -->\n <span class=\"ius-personitem__menu\" (click)=\"$event.stopPropagation()\">\n <ius-dropdown [items]=\"actions\" placement=\"bottom-end\" [ariaLabel]=\"actionsLabel\">\n <ius-icon-button\n iusDropdownTrigger\n icon=\"more_vert\"\n variant=\"tertiary\"\n shape=\"squared\"\n [size]=\"menuIbSize\"\n [ariaLabel]=\"actionsLabel\"\n [disabled]=\"disabled\"\n />\n </ius-dropdown>\n </span>\n }\n\n @if (showRemove) {\n <button\n type=\"button\"\n class=\"ius-personitem__x\"\n [attr.aria-label]=\"removeLabel + (name ? ' ' + name : '')\"\n [disabled]=\"disabled\"\n (mousedown)=\"onRemoveMouseDown($event)\"\n (click)=\"onRemoveClick($event)\"\n >\n <span translate=\"no\" class=\"ius-icon\">close</span>\n </button>\n }\n </div>\n</ius-card>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-width:0;box-sizing:border-box;-webkit-user-select:none;user-select:none;text-align:left;--_pi-py: var(--ius-space-sm);--_pi-px: var(--ius-space-sm);--_pi-gap: var(--ius-space-sm);--_pi-name-fs: var(--ius-fs-lg);--_pi-name-lh: var(--ius-lh-lg);--_pi-line-fs: var(--ius-fs-sm);--_pi-line-lh: var(--ius-lh-sm);--_pi-x-size: 24px}:host([data-size=small]){--_pi-py: var(--ius-space-xs);--_pi-px: var(--ius-space-sm);--_pi-gap: var(--ius-space-xs);--_pi-name-fs: var(--ius-fs-base);--_pi-name-lh: var(--ius-lh-base);--_pi-line-fs: var(--ius-fs-sm);--_pi-line-lh: var(--ius-lh-sm);--_pi-x-size: 20px}:host([data-size=large]){--_pi-py: var(--ius-space-md);--_pi-px: var(--ius-space-md);--_pi-gap: var(--ius-space-md);--_pi-name-fs: var(--ius-fs-h5);--_pi-name-lh: var(--ius-lh-h5);--_pi-line-fs: var(--ius-fs-base);--_pi-line-lh: var(--ius-lh-base);--_pi-x-size: 28px}@container style(--ius-density: small){:host(:not([data-size])){--_pi-py: var(--ius-space-xs);--_pi-px: var(--ius-space-sm);--_pi-gap: var(--ius-space-xs);--_pi-name-fs: var(--ius-fs-base);--_pi-name-lh: var(--ius-lh-base);--_pi-line-fs: var(--ius-fs-sm);--_pi-line-lh: var(--ius-lh-sm)}}@container style(--ius-density: large){:host(:not([data-size])){--_pi-py: var(--ius-space-md);--_pi-px: var(--ius-space-md);--_pi-gap: var(--ius-space-md);--_pi-name-fs: var(--ius-fs-h5);--_pi-name-lh: var(--ius-lh-h5);--_pi-line-fs: var(--ius-fs-base);--_pi-line-lh: var(--ius-lh-base)}}.ius-personitem__row{display:flex;align-items:center;gap:var(--_pi-gap);padding:var(--_pi-py) var(--_pi-px)}:host([data-pi-variant=option]) .ius-personitem__card[data-interactive=true]:hover,:host([data-pi-variant=option][data-state=hover]) .ius-personitem__card{box-shadow:none;transform:none;border-color:var(--ius-info-300)}:host([data-pi-variant=option]) .ius-personitem__card[data-interactive=true]:active,:host([data-pi-variant=option][data-state=pressed]) .ius-personitem__card{box-shadow:none;transform:none;background:var(--ius-info-100);border-color:var(--ius-info-300)}:host([data-pi-variant=option]) .ius-personitem__card[data-selected=true]{background:var(--ius-info-100);border-color:var(--ius-info-300);box-shadow:none}:host([data-disabled=true]){cursor:default;opacity:.5;pointer-events:none}.ius-personitem__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}.ius-personitem__name{font-family:var(--ius-font-display);font-size:var(--_pi-name-fs);line-height:var(--_pi-name-lh);font-weight:var(--ius-fw-bold);color:var(--ius-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-personitem__line{font-family:var(--ius-font-body);font-size:var(--_pi-line-fs);line-height:var(--_pi-line-lh);color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-personitem__trailing{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xxs)}.ius-personitem__menu{flex:0 0 auto;display:inline-flex;align-items:center}.ius-personitem__check{flex:0 0 auto;display:inline-flex;color:var(--ius-primary-900)}.ius-personitem__check .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-personitem__x{appearance:none;border:0;margin:0;padding:0;flex:0 0 auto;width:var(--_pi-x-size);height:var(--_pi-x-size);border-radius:var(--ius-radius-pill);background:var(--ius-neutral-9);color:var(--ius-neutral-white);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-personitem__x:hover{background:var(--ius-neutral-black)}.ius-personitem__x:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-personitem__x .ius-icon{font-size:calc(var(--_pi-x-size) - 8px);line-height:1}:host([data-disabled=true]) .ius-personitem__x{background:var(--ius-neutral-5);cursor:default}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AvatarComponent, selector: "ius-avatar", inputs: ["alt", "name", "monogram", "icon", "shape", "size", "color", "editable", "editIcon", "ariaLabel", "src"], outputs: ["edit"] }, { kind: "component", type: CardComponent, selector: "ius-card, a[ius-card], button[ius-card], section[ius-card], article[ius-card]", inputs: ["variant", "padding", "radius", "interactive", "selected", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: DropdownComponent, selector: "ius-dropdown", inputs: ["items", "selectable", "value", "label", "triggerLabel", "triggerIcon", "tone", "variant", "placement", "open", "defaultOpen", "ariaLabel"], outputs: ["valueChange", "openChange"] }, { kind: "directive", type: IusDropdownTriggerDirective, selector: "[iusDropdownTrigger]" }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "tooltipPlacement"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7594
7600
|
}
|
|
7595
7601
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PersonItemComponent, decorators: [{
|
|
7596
7602
|
type: Component,
|
|
@@ -7603,11 +7609,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
7603
7609
|
IconButtonComponent,
|
|
7604
7610
|
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
7605
7611
|
class: 'ius-personitem',
|
|
7606
|
-
'[attr.data-variant]': 'variant',
|
|
7612
|
+
'[attr.data-pi-variant]': 'variant',
|
|
7607
7613
|
'[attr.data-size]': "size !== 'medium' ? size : null",
|
|
7608
7614
|
'[attr.data-state]': 'state || null',
|
|
7609
7615
|
'[attr.data-disabled]': "disabled ? 'true' : null",
|
|
7610
|
-
}, template: "<!-- La superficie la pone ius-card (
|
|
7616
|
+
}, template: "<!-- La superficie la pone ius-card (radius lg \u00B7 padding none), como manda la\n ng-spec. El contorno es opcional (`bordered`, off por defecto): sin \u00E9l la\n card va en `plain`. Con `padding=\"none\"` el padding de la fila lo pone\n .ius-personitem__row, que es \u00ABel propio cuerpo\u00BB del que habla Card. -->\n<ius-card\n class=\"ius-personitem__card\"\n [variant]=\"cardVariant\"\n radius=\"lg\"\n padding=\"none\"\n [interactive]=\"clickable\"\n [selected]=\"cardSelected\"\n [ariaLabel]=\"ariaLabel\"\n [attr.aria-pressed]=\"ariaPressed\"\n (clicked)=\"clicked.emit($event)\"\n>\n <div class=\"ius-personitem__row\">\n <ius-avatar\n [size]=\"avatarSize\"\n [shape]=\"avatarShape\"\n [src]=\"avatar\"\n [name]=\"avatarName\"\n [monogram]=\"monogram\"\n [icon]=\"effIcon\"\n [color]=\"color\"\n [ariaLabel]=\"name\"\n />\n\n <div class=\"ius-personitem__body\">\n @if (hasName) {\n <span class=\"ius-personitem__name\">{{ name }}<ng-content select=\"[iusPersonItemName]\" /></span>\n }\n @for (line of displayLines; track $index) {\n <span class=\"ius-personitem__line\">\n @if (line.tpl) {\n <ng-container *ngTemplateOutlet=\"line.tpl\" />\n } @else {\n {{ line.text }}\n }\n </span>\n }\n </div>\n\n @if (selected && showCheck) {\n <span class=\"ius-personitem__check\"><span translate=\"no\" class=\"ius-icon\">check_circle</span></span>\n }\n\n @if (hasTrailing) {\n <span class=\"ius-personitem__trailing\"><ng-content select=\"[iusPersonItemTrailing]\" /></span>\n }\n\n @if (showMenu) {\n <!-- \u22EE de acciones del chip: compone ius-dropdown. Va ANTES de la X;\n su click no dispara la fila. -->\n <span class=\"ius-personitem__menu\" (click)=\"$event.stopPropagation()\">\n <ius-dropdown [items]=\"actions\" placement=\"bottom-end\" [ariaLabel]=\"actionsLabel\">\n <ius-icon-button\n iusDropdownTrigger\n icon=\"more_vert\"\n variant=\"tertiary\"\n shape=\"squared\"\n [size]=\"menuIbSize\"\n [ariaLabel]=\"actionsLabel\"\n [disabled]=\"disabled\"\n />\n </ius-dropdown>\n </span>\n }\n\n @if (showRemove) {\n <button\n type=\"button\"\n class=\"ius-personitem__x\"\n [attr.aria-label]=\"removeLabel + (name ? ' ' + name : '')\"\n [disabled]=\"disabled\"\n (mousedown)=\"onRemoveMouseDown($event)\"\n (click)=\"onRemoveClick($event)\"\n >\n <span translate=\"no\" class=\"ius-icon\">close</span>\n </button>\n }\n </div>\n</ius-card>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-width:0;box-sizing:border-box;-webkit-user-select:none;user-select:none;text-align:left;--_pi-py: var(--ius-space-sm);--_pi-px: var(--ius-space-sm);--_pi-gap: var(--ius-space-sm);--_pi-name-fs: var(--ius-fs-lg);--_pi-name-lh: var(--ius-lh-lg);--_pi-line-fs: var(--ius-fs-sm);--_pi-line-lh: var(--ius-lh-sm);--_pi-x-size: 24px}:host([data-size=small]){--_pi-py: var(--ius-space-xs);--_pi-px: var(--ius-space-sm);--_pi-gap: var(--ius-space-xs);--_pi-name-fs: var(--ius-fs-base);--_pi-name-lh: var(--ius-lh-base);--_pi-line-fs: var(--ius-fs-sm);--_pi-line-lh: var(--ius-lh-sm);--_pi-x-size: 20px}:host([data-size=large]){--_pi-py: var(--ius-space-md);--_pi-px: var(--ius-space-md);--_pi-gap: var(--ius-space-md);--_pi-name-fs: var(--ius-fs-h5);--_pi-name-lh: var(--ius-lh-h5);--_pi-line-fs: var(--ius-fs-base);--_pi-line-lh: var(--ius-lh-base);--_pi-x-size: 28px}@container style(--ius-density: small){:host(:not([data-size])){--_pi-py: var(--ius-space-xs);--_pi-px: var(--ius-space-sm);--_pi-gap: var(--ius-space-xs);--_pi-name-fs: var(--ius-fs-base);--_pi-name-lh: var(--ius-lh-base);--_pi-line-fs: var(--ius-fs-sm);--_pi-line-lh: var(--ius-lh-sm)}}@container style(--ius-density: large){:host(:not([data-size])){--_pi-py: var(--ius-space-md);--_pi-px: var(--ius-space-md);--_pi-gap: var(--ius-space-md);--_pi-name-fs: var(--ius-fs-h5);--_pi-name-lh: var(--ius-lh-h5);--_pi-line-fs: var(--ius-fs-base);--_pi-line-lh: var(--ius-lh-base)}}.ius-personitem__row{display:flex;align-items:center;gap:var(--_pi-gap);padding:var(--_pi-py) var(--_pi-px)}:host([data-pi-variant=option]) .ius-personitem__card[data-interactive=true]:hover,:host([data-pi-variant=option][data-state=hover]) .ius-personitem__card{box-shadow:none;transform:none;border-color:var(--ius-info-300)}:host([data-pi-variant=option]) .ius-personitem__card[data-interactive=true]:active,:host([data-pi-variant=option][data-state=pressed]) .ius-personitem__card{box-shadow:none;transform:none;background:var(--ius-info-100);border-color:var(--ius-info-300)}:host([data-pi-variant=option]) .ius-personitem__card[data-selected=true]{background:var(--ius-info-100);border-color:var(--ius-info-300);box-shadow:none}:host([data-disabled=true]){cursor:default;opacity:.5;pointer-events:none}.ius-personitem__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}.ius-personitem__name{font-family:var(--ius-font-display);font-size:var(--_pi-name-fs);line-height:var(--_pi-name-lh);font-weight:var(--ius-fw-bold);color:var(--ius-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-personitem__line{font-family:var(--ius-font-body);font-size:var(--_pi-line-fs);line-height:var(--_pi-line-lh);color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-personitem__trailing{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xxs)}.ius-personitem__menu{flex:0 0 auto;display:inline-flex;align-items:center}.ius-personitem__check{flex:0 0 auto;display:inline-flex;color:var(--ius-primary-900)}.ius-personitem__check .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-personitem__x{appearance:none;border:0;margin:0;padding:0;flex:0 0 auto;width:var(--_pi-x-size);height:var(--_pi-x-size);border-radius:var(--ius-radius-pill);background:var(--ius-neutral-9);color:var(--ius-neutral-white);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-personitem__x:hover{background:var(--ius-neutral-black)}.ius-personitem__x:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-personitem__x .ius-icon{font-size:calc(var(--_pi-x-size) - 8px);line-height:1}:host([data-disabled=true]) .ius-personitem__x{background:var(--ius-neutral-5);cursor:default}\n"] }]
|
|
7611
7617
|
}], propDecorators: { name: [{
|
|
7612
7618
|
type: Input
|
|
7613
7619
|
}], lines: [{
|
|
@@ -7624,6 +7630,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
7624
7630
|
type: Input
|
|
7625
7631
|
}], variant: [{
|
|
7626
7632
|
type: Input
|
|
7633
|
+
}], bordered: [{
|
|
7634
|
+
type: Input,
|
|
7635
|
+
args: [{ transform: booleanAttribute }]
|
|
7627
7636
|
}], size: [{
|
|
7628
7637
|
type: Input
|
|
7629
7638
|
}], selected: [{
|
|
@@ -7834,11 +7843,11 @@ class DrawerComponent {
|
|
|
7834
7843
|
this.timers = [];
|
|
7835
7844
|
}
|
|
7836
7845
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7837
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: DrawerComponent, isStandalone: true, selector: "ius-drawer", inputs: { open: "open", defaultOpen: ["defaultOpen", "defaultOpen", booleanAttribute], side: "side", size: "size", title: "title", centerTitle: ["centerTitle", "centerTitle", booleanAttribute], showBack: "showBack", showClose: ["showClose", "showClose", booleanAttribute], closeOnScrim: ["closeOnScrim", "closeOnScrim", booleanAttribute], closeOnEsc: ["closeOnEsc", "closeOnEsc", booleanAttribute], showScrim: ["showScrim", "showScrim", booleanAttribute], ariaLabel: "ariaLabel" }, outputs: { closed: "closed", openChange: "openChange", back: "back" }, queries: [{ propertyName: "titleSlot", first: true, predicate: IusDrawerTitleDirective, descendants: true }, { propertyName: "actionsSlot", first: true, predicate: IusDrawerHeaderActionsDirective, descendants: true }, { propertyName: "footerSlot", first: true, predicate: IusDrawerFooterDirective, descendants: true }], viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #tpl>\r\n @if (showScrim) {\r\n <div\r\n class=\"ius-drawer-scrim\"\r\n [attr.data-visible]=\"visible() ? 'true' : null\"\r\n (click)=\"onScrimClick()\"\r\n ></div>\r\n }\r\n <div\r\n class=\"ius-drawer\"\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n tabindex=\"-1\"\r\n cdkTrapFocus\r\n [cdkTrapFocusAutoCapture]=\"true\"\r\n [attr.aria-label]=\"ariaLabel || null\"\r\n [attr.aria-labelledby]=\"labelledBy\"\r\n [attr.data-side]=\"side\"\r\n [attr.data-size]=\"size\"\r\n [attr.data-visible]=\"visible() ? 'true' : null\"\r\n [attr.data-entered]=\"entered() ? 'true' : null\"\r\n >\r\n @if (hasHeader) {\r\n <div class=\"ius-drawer__header\">\r\n @if (showBackBtn) {\r\n <ius-icon-button\r\n icon=\"arrow_back\"\r\n variant=\"tertiary\"\r\n size=\"medium\"\r\n ariaLabel=\"Volver\"\r\n (clicked)=\"onBackClick()\"\r\n />\r\n }\r\n @if (hasTitle) {\r\n <h2\r\n class=\"ius-drawer__title\"\r\n [class.ius-drawer__title--center]=\"centerTitle\"\r\n [id]=\"titleId\"\r\n >{{ title }}<ng-content select=\"[iusDrawerTitle]\" /></h2>\r\n }\r\n @if (hasActionsZone) {\r\n <div class=\"ius-drawer__actions\">\r\n <ng-content select=\"[iusDrawerHeaderActions]\" />\r\n @if (showClose) {\r\n <ius-icon-button\r\n icon=\"close\"\r\n variant=\"tertiary\"\r\n size=\"medium\"\r\n ariaLabel=\"Cerrar\"\r\n (clicked)=\"requestClose()\"\r\n />\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"ius-drawer__body ius-scroll\"><ng-content /></div>\r\n\r\n @if (footerSlot) {\r\n <div class=\"ius-drawer__footer\"><ng-content select=\"[iusDrawerFooter]\" /></div>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.ius-drawer-scrim{position:fixed;inset:0;background
|
|
7846
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: DrawerComponent, isStandalone: true, selector: "ius-drawer", inputs: { open: "open", defaultOpen: ["defaultOpen", "defaultOpen", booleanAttribute], side: "side", size: "size", title: "title", centerTitle: ["centerTitle", "centerTitle", booleanAttribute], showBack: "showBack", showClose: ["showClose", "showClose", booleanAttribute], closeOnScrim: ["closeOnScrim", "closeOnScrim", booleanAttribute], closeOnEsc: ["closeOnEsc", "closeOnEsc", booleanAttribute], showScrim: ["showScrim", "showScrim", booleanAttribute], ariaLabel: "ariaLabel" }, outputs: { closed: "closed", openChange: "openChange", back: "back" }, queries: [{ propertyName: "titleSlot", first: true, predicate: IusDrawerTitleDirective, descendants: true }, { propertyName: "actionsSlot", first: true, predicate: IusDrawerHeaderActionsDirective, descendants: true }, { propertyName: "footerSlot", first: true, predicate: IusDrawerFooterDirective, descendants: true }], viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #tpl>\r\n @if (showScrim) {\r\n <div\r\n class=\"ius-drawer-scrim\"\r\n [attr.data-visible]=\"visible() ? 'true' : null\"\r\n (click)=\"onScrimClick()\"\r\n ></div>\r\n }\r\n <div\r\n class=\"ius-drawer\"\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n tabindex=\"-1\"\r\n cdkTrapFocus\r\n [cdkTrapFocusAutoCapture]=\"true\"\r\n [attr.aria-label]=\"ariaLabel || null\"\r\n [attr.aria-labelledby]=\"labelledBy\"\r\n [attr.data-side]=\"side\"\r\n [attr.data-size]=\"size\"\r\n [attr.data-visible]=\"visible() ? 'true' : null\"\r\n [attr.data-entered]=\"entered() ? 'true' : null\"\r\n >\r\n @if (hasHeader) {\r\n <div class=\"ius-drawer__header\">\r\n @if (showBackBtn) {\r\n <ius-icon-button\r\n icon=\"arrow_back\"\r\n variant=\"tertiary\"\r\n size=\"medium\"\r\n ariaLabel=\"Volver\"\r\n (clicked)=\"onBackClick()\"\r\n />\r\n }\r\n @if (hasTitle) {\r\n <h2\r\n class=\"ius-drawer__title\"\r\n [class.ius-drawer__title--center]=\"centerTitle\"\r\n [id]=\"titleId\"\r\n >{{ title }}<ng-content select=\"[iusDrawerTitle]\" /></h2>\r\n }\r\n @if (hasActionsZone) {\r\n <div class=\"ius-drawer__actions\">\r\n <ng-content select=\"[iusDrawerHeaderActions]\" />\r\n @if (showClose) {\r\n <ius-icon-button\r\n icon=\"close\"\r\n variant=\"tertiary\"\r\n size=\"medium\"\r\n ariaLabel=\"Cerrar\"\r\n (clicked)=\"requestClose()\"\r\n />\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"ius-drawer__body ius-scroll\"><ng-content /></div>\r\n\r\n @if (footerSlot) {\r\n <div class=\"ius-drawer__footer\"><ng-content select=\"[iusDrawerFooter]\" /></div>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.ius-drawer-scrim{position:fixed;inset:0;background:var(--ius-surface-overlay);opacity:0;transition:opacity var(--ius-duration-slow) var(--ius-ease-standard)}.ius-drawer-scrim[data-visible=true]{opacity:1}.ius-drawer{position:fixed;top:0;bottom:0;display:flex;flex-direction:column;box-sizing:border-box;width:var(--_drawer-w, min(440px, 100vw));background:var(--ius-surface-card);box-shadow:var(--ius-elevation-400);font-family:var(--ius-font-body);transition:transform var(--ius-duration-slow) var(--ius-ease-decelerate, cubic-bezier(0, 0, .2, 1))}.ius-drawer[data-side=right]{right:0;transform:translate(100%);border-radius:var(--ius-radius-lg) 0 0 var(--ius-radius-lg)}.ius-drawer[data-side=left]{left:0;transform:translate(-100%);border-radius:0 var(--ius-radius-lg) var(--ius-radius-lg) 0}.ius-drawer[data-visible=true]{transform:translate(0)}.ius-drawer[data-entered=true]{transform:none}.ius-drawer[data-size=sm]{--_drawer-w: min(400px, 100vw)}.ius-drawer[data-size=md]{--_drawer-w: min(440px, 100vw)}.ius-drawer[data-size=lg]{--_drawer-w: min(560px, 100vw)}.ius-drawer[data-size=xl]{--_drawer-w: min(720px, 100vw)}@media(max-width:480px){.ius-drawer{width:100vw;border-radius:0}}@media(prefers-reduced-motion:reduce){.ius-drawer,.ius-drawer-scrim{transition:none}}.ius-drawer__header{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-xs);height:56px;box-sizing:border-box;padding:0 var(--ius-space-sm);border-bottom:1px solid var(--ius-stroke)}.ius-drawer__title{flex:1 1 auto;min-width:0;margin:0;font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg);color:var(--ius-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-drawer__title--center{text-align:center}.ius-drawer__actions{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xxs)}.ius-drawer__body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:var(--ius-space-lg) var(--ius-space-md);display:flex;flex-direction:column;gap:var(--ius-space-md);scrollbar-width:thin;scrollbar-color:var(--ius-neutral-5) transparent}.ius-drawer__body::-webkit-scrollbar{width:10px}.ius-drawer__body::-webkit-scrollbar-track{background:transparent}.ius-drawer__body::-webkit-scrollbar-thumb{background:var(--ius-neutral-5);border-radius:var(--ius-radius-pill);border:3px solid var(--ius-surface-card);background-clip:padding-box}.ius-drawer__body::-webkit-scrollbar-thumb:hover{background:var(--ius-neutral-6);background-clip:padding-box}.ius-drawer__body ::ng-deep .ius-tf,.ius-drawer__body ::ng-deep .ius-sb{max-width:none}.ius-drawer__footer{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--ius-space-xs);padding:var(--ius-space-md);border-top:1px solid var(--ius-stroke);background:var(--ius-surface-card)}.ius-drawer[data-side=right] .ius-drawer__footer{border-bottom-left-radius:var(--ius-radius-lg)}.ius-drawer[data-side=left] .ius-drawer__footer{border-bottom-right-radius:var(--ius-radius-lg)}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "tooltipPlacement"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7838
7847
|
}
|
|
7839
7848
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DrawerComponent, decorators: [{
|
|
7840
7849
|
type: Component,
|
|
7841
|
-
args: [{ selector: 'ius-drawer', standalone: true, imports: [A11yModule, IconButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #tpl>\r\n @if (showScrim) {\r\n <div\r\n class=\"ius-drawer-scrim\"\r\n [attr.data-visible]=\"visible() ? 'true' : null\"\r\n (click)=\"onScrimClick()\"\r\n ></div>\r\n }\r\n <div\r\n class=\"ius-drawer\"\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n tabindex=\"-1\"\r\n cdkTrapFocus\r\n [cdkTrapFocusAutoCapture]=\"true\"\r\n [attr.aria-label]=\"ariaLabel || null\"\r\n [attr.aria-labelledby]=\"labelledBy\"\r\n [attr.data-side]=\"side\"\r\n [attr.data-size]=\"size\"\r\n [attr.data-visible]=\"visible() ? 'true' : null\"\r\n [attr.data-entered]=\"entered() ? 'true' : null\"\r\n >\r\n @if (hasHeader) {\r\n <div class=\"ius-drawer__header\">\r\n @if (showBackBtn) {\r\n <ius-icon-button\r\n icon=\"arrow_back\"\r\n variant=\"tertiary\"\r\n size=\"medium\"\r\n ariaLabel=\"Volver\"\r\n (clicked)=\"onBackClick()\"\r\n />\r\n }\r\n @if (hasTitle) {\r\n <h2\r\n class=\"ius-drawer__title\"\r\n [class.ius-drawer__title--center]=\"centerTitle\"\r\n [id]=\"titleId\"\r\n >{{ title }}<ng-content select=\"[iusDrawerTitle]\" /></h2>\r\n }\r\n @if (hasActionsZone) {\r\n <div class=\"ius-drawer__actions\">\r\n <ng-content select=\"[iusDrawerHeaderActions]\" />\r\n @if (showClose) {\r\n <ius-icon-button\r\n icon=\"close\"\r\n variant=\"tertiary\"\r\n size=\"medium\"\r\n ariaLabel=\"Cerrar\"\r\n (clicked)=\"requestClose()\"\r\n />\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"ius-drawer__body ius-scroll\"><ng-content /></div>\r\n\r\n @if (footerSlot) {\r\n <div class=\"ius-drawer__footer\"><ng-content select=\"[iusDrawerFooter]\" /></div>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.ius-drawer-scrim{position:fixed;inset:0;background
|
|
7850
|
+
args: [{ selector: 'ius-drawer', standalone: true, imports: [A11yModule, IconButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #tpl>\r\n @if (showScrim) {\r\n <div\r\n class=\"ius-drawer-scrim\"\r\n [attr.data-visible]=\"visible() ? 'true' : null\"\r\n (click)=\"onScrimClick()\"\r\n ></div>\r\n }\r\n <div\r\n class=\"ius-drawer\"\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n tabindex=\"-1\"\r\n cdkTrapFocus\r\n [cdkTrapFocusAutoCapture]=\"true\"\r\n [attr.aria-label]=\"ariaLabel || null\"\r\n [attr.aria-labelledby]=\"labelledBy\"\r\n [attr.data-side]=\"side\"\r\n [attr.data-size]=\"size\"\r\n [attr.data-visible]=\"visible() ? 'true' : null\"\r\n [attr.data-entered]=\"entered() ? 'true' : null\"\r\n >\r\n @if (hasHeader) {\r\n <div class=\"ius-drawer__header\">\r\n @if (showBackBtn) {\r\n <ius-icon-button\r\n icon=\"arrow_back\"\r\n variant=\"tertiary\"\r\n size=\"medium\"\r\n ariaLabel=\"Volver\"\r\n (clicked)=\"onBackClick()\"\r\n />\r\n }\r\n @if (hasTitle) {\r\n <h2\r\n class=\"ius-drawer__title\"\r\n [class.ius-drawer__title--center]=\"centerTitle\"\r\n [id]=\"titleId\"\r\n >{{ title }}<ng-content select=\"[iusDrawerTitle]\" /></h2>\r\n }\r\n @if (hasActionsZone) {\r\n <div class=\"ius-drawer__actions\">\r\n <ng-content select=\"[iusDrawerHeaderActions]\" />\r\n @if (showClose) {\r\n <ius-icon-button\r\n icon=\"close\"\r\n variant=\"tertiary\"\r\n size=\"medium\"\r\n ariaLabel=\"Cerrar\"\r\n (clicked)=\"requestClose()\"\r\n />\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"ius-drawer__body ius-scroll\"><ng-content /></div>\r\n\r\n @if (footerSlot) {\r\n <div class=\"ius-drawer__footer\"><ng-content select=\"[iusDrawerFooter]\" /></div>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.ius-drawer-scrim{position:fixed;inset:0;background:var(--ius-surface-overlay);opacity:0;transition:opacity var(--ius-duration-slow) var(--ius-ease-standard)}.ius-drawer-scrim[data-visible=true]{opacity:1}.ius-drawer{position:fixed;top:0;bottom:0;display:flex;flex-direction:column;box-sizing:border-box;width:var(--_drawer-w, min(440px, 100vw));background:var(--ius-surface-card);box-shadow:var(--ius-elevation-400);font-family:var(--ius-font-body);transition:transform var(--ius-duration-slow) var(--ius-ease-decelerate, cubic-bezier(0, 0, .2, 1))}.ius-drawer[data-side=right]{right:0;transform:translate(100%);border-radius:var(--ius-radius-lg) 0 0 var(--ius-radius-lg)}.ius-drawer[data-side=left]{left:0;transform:translate(-100%);border-radius:0 var(--ius-radius-lg) var(--ius-radius-lg) 0}.ius-drawer[data-visible=true]{transform:translate(0)}.ius-drawer[data-entered=true]{transform:none}.ius-drawer[data-size=sm]{--_drawer-w: min(400px, 100vw)}.ius-drawer[data-size=md]{--_drawer-w: min(440px, 100vw)}.ius-drawer[data-size=lg]{--_drawer-w: min(560px, 100vw)}.ius-drawer[data-size=xl]{--_drawer-w: min(720px, 100vw)}@media(max-width:480px){.ius-drawer{width:100vw;border-radius:0}}@media(prefers-reduced-motion:reduce){.ius-drawer,.ius-drawer-scrim{transition:none}}.ius-drawer__header{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-xs);height:56px;box-sizing:border-box;padding:0 var(--ius-space-sm);border-bottom:1px solid var(--ius-stroke)}.ius-drawer__title{flex:1 1 auto;min-width:0;margin:0;font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg);color:var(--ius-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-drawer__title--center{text-align:center}.ius-drawer__actions{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xxs)}.ius-drawer__body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:var(--ius-space-lg) var(--ius-space-md);display:flex;flex-direction:column;gap:var(--ius-space-md);scrollbar-width:thin;scrollbar-color:var(--ius-neutral-5) transparent}.ius-drawer__body::-webkit-scrollbar{width:10px}.ius-drawer__body::-webkit-scrollbar-track{background:transparent}.ius-drawer__body::-webkit-scrollbar-thumb{background:var(--ius-neutral-5);border-radius:var(--ius-radius-pill);border:3px solid var(--ius-surface-card);background-clip:padding-box}.ius-drawer__body::-webkit-scrollbar-thumb:hover{background:var(--ius-neutral-6);background-clip:padding-box}.ius-drawer__body ::ng-deep .ius-tf,.ius-drawer__body ::ng-deep .ius-sb{max-width:none}.ius-drawer__footer{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--ius-space-xs);padding:var(--ius-space-md);border-top:1px solid var(--ius-stroke);background:var(--ius-surface-card)}.ius-drawer[data-side=right] .ius-drawer__footer{border-bottom-left-radius:var(--ius-radius-lg)}.ius-drawer[data-side=left] .ius-drawer__footer{border-bottom-right-radius:var(--ius-radius-lg)}\n"] }]
|
|
7842
7851
|
}], propDecorators: { tpl: [{
|
|
7843
7852
|
type: ViewChild,
|
|
7844
7853
|
args: ['tpl', { static: true }]
|
|
@@ -7896,7 +7905,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
7896
7905
|
* Ver `SearchBar.jsx` → `demoFilled`. Nunca toca el valor real del modelo.
|
|
7897
7906
|
*/
|
|
7898
7907
|
const IUS_SB_DEMO_VALUE = 'CriterioBusqueda';
|
|
7899
|
-
let uid$
|
|
7908
|
+
let uid$4 = 0;
|
|
7900
7909
|
/**
|
|
7901
7910
|
* SearchBar — Ius Design v2.
|
|
7902
7911
|
*
|
|
@@ -7981,7 +7990,7 @@ class SearchBarComponent {
|
|
|
7981
7990
|
// ── Estado interno ────────────────────────────────────────────────────
|
|
7982
7991
|
this.inputRef = viewChild.required('input', /* @ts-ignore */
|
|
7983
7992
|
...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
|
|
7984
|
-
this.autoId = `ius-sb-${uid$
|
|
7993
|
+
this.autoId = `ius-sb-${uid$4++}`;
|
|
7985
7994
|
/** Estado forzado que el golden considera "con criterio" (demos). */
|
|
7986
7995
|
this.demoFilled = computed(() => this.stateInput() === 'hover' || this.stateInput() === 'focused', /* @ts-ignore */
|
|
7987
7996
|
...(ngDevMode ? [{ debugName: "demoFilled" }] : /* istanbul ignore next */ []));
|
|
@@ -8386,7 +8395,7 @@ class PersonPickerComponent {
|
|
|
8386
8395
|
useExisting: forwardRef(() => PersonPickerComponent),
|
|
8387
8396
|
multi: true,
|
|
8388
8397
|
},
|
|
8389
|
-
], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true }], ngImport: i0, template: "<!-- Trigger tipo Select + men\u00FA anclado (ius-popover, piel ius-personpicker-pop) -->\r\n<ius-popover\r\n trigger=\"manual\"\r\n [open]=\"isOpen\"\r\n placement=\"bottom-start\"\r\n [offset]=\"4\"\r\n [showArrow]=\"false\"\r\n padding=\"none\"\r\n dismissable\r\n panelClass=\"ius-personpicker-pop\"\r\n (openChange)=\"onPopoverOpenChange($event)\"\r\n>\r\n <button\r\n #triggerEl\r\n type=\"button\"\r\n class=\"ius-personpicker__trigger\"\r\n [attr.data-size]=\"size !== 'medium' ? size : null\"\r\n [attr.data-open]=\"isOpen ? 'true' : null\"\r\n [attr.data-disabled]=\"effDisabled ? 'true' : null\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-expanded]=\"isOpen\"\r\n [disabled]=\"effDisabled\"\r\n (click)=\"toggleOpen()\"\r\n >\r\n <span\r\n class=\"ius-personpicker__value\"\r\n [attr.data-placeholder]=\"selectedOptions.length === 0 ? 'true' : null\"\r\n >{{ triggerText }}</span>\r\n @if (multiple && selectedOptions.length > 0) {\r\n <span class=\"ius-personpicker__count\">{{ selectedOptions.length }}</span>\r\n }\r\n <span class=\"ius-personpicker__chev\"><span translate=\"no\" class=\"ius-icon\">expand_more</span></span>\r\n </button>\r\n\r\n <div iusPopoverContent class=\"ius-personpicker__menu\" [style.width.px]=\"menuWidth()\">\r\n @if (searchable) {\r\n <!-- b\u00FAsqueda en vivo: compone ius-search-bar -->\r\n <ius-search-bar\r\n [value]=\"query()\"\r\n [size]=\"size\"\r\n [placeholder]=\"searchPlaceholder\"\r\n (valueChange)=\"onQueryChange($event)\"\r\n (cleared)=\"clearQuery()\"\r\n />\r\n }\r\n\r\n <div\r\n class=\"ius-personpicker__list ius-scroll ius-scroll--sm\"\r\n role=\"listbox\"\r\n [attr.aria-multiselectable]=\"multiple ? 'true' : null\"\r\n [style.maxHeight]=\"px(maxHeight)\"\r\n >\r\n @if (filtered.length === 0) {\r\n <div class=\"ius-personpicker__empty\">{{ emptyText }}</div>\r\n } @else {\r\n @for (opt of filtered; track optId(opt) ?? $index) {\r\n <ius-person-item\r\n variant=\"option\"\r\n [size]=\"size\"\r\n [name]=\"opt.name\"\r\n [lines]=\"opt.lines\"\r\n [avatar]=\"opt.avatar\"\r\n [monogram]=\"opt.monogram\"\r\n [icon]=\"opt.icon\"\r\n [color]=\"opt.color ?? 'auto'\"\r\n [shape]=\"opt.shape\"\r\n [mask]=\"mask\"\r\n [selected]=\"isSelected(opt)\"\r\n [showCheck]=\"multiple\"\r\n [disabled]=\"opt.disabled ?? false\"\r\n (clicked)=\"toggle(opt)\"\r\n />\r\n }\r\n }\r\n </div>\r\n </div>\r\n</ius-popover>\r\n\r\n<!-- Seleccionados como chips bajo el trigger -->\r\n@if (showSelected && selectedOptions.length > 0) {\r\n <div class=\"ius-personpicker__selected\">\r\n @if (selectedLabelVisible) {\r\n <span class=\"ius-personpicker__selected-label\">{{ selectedLabel }}</span>\r\n }\r\n <div\r\n class=\"ius-personpicker__selected-list\"\r\n [class.ius-scroll]=\"selectedMaxHeight != null\"\r\n [class.ius-scroll--sm]=\"selectedMaxHeight != null\"\r\n [attr.data-scroll]=\"selectedMaxHeight != null ? 'true' : null\"\r\n [style.maxHeight]=\"px(selectedMaxHeight)\"\r\n >\r\n @for (opt of selectedOptions; track optId(opt) ?? $index) {\r\n @if (renderSelected) {\r\n <ng-container *ngTemplateOutlet=\"renderSelected; context: selectedCtx(opt)\" />\r\n } @else if (opt.removable !== false) {\r\n <ius-person-item\r\n variant=\"chip\"\r\n [size]=\"size\"\r\n [name]=\"opt.name\"\r\n [lines]=\"opt.lines\"\r\n [avatar]=\"opt.avatar\"\r\n [monogram]=\"opt.monogram\"\r\n [icon]=\"opt.icon\"\r\n [color]=\"opt.color ?? 'auto'\"\r\n [mask]=\"mask\"\r\n [disabled]=\"effDisabled\"\r\n [actions]=\"chipActions(opt)\"\r\n (removed)=\"remove(opt)\"\r\n />\r\n } @else {\r\n <!-- removable=false: mismo chip sin (removed) \u2192 sin X (la X sigue al enlace) -->\r\n <ius-person-item\r\n variant=\"chip\"\r\n [size]=\"size\"\r\n [name]=\"opt.name\"\r\n [lines]=\"opt.lines\"\r\n [avatar]=\"opt.avatar\"\r\n [monogram]=\"opt.monogram\"\r\n [icon]=\"opt.icon\"\r\n [color]=\"opt.color ?? 'auto'\"\r\n [mask]=\"mask\"\r\n [disabled]=\"effDisabled\"\r\n [actions]=\"chipActions(opt)\"\r\n />\r\n }\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-sm);min-width:0}.ius-personpicker__trigger{--_pp-h: 40px;--_pp-py: var(--ius-space-xs);--_pp-px: var(--ius-space-sm);--_pp-fs: var(--ius-fs-base);--_pp-lh: var(--ius-lh-base);-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:var(--ius-space-xs);box-sizing:border-box;width:100%;min-height:var(--_pp-h);padding:var(--_pp-py) var(--_pp-px);text-align:left;cursor:pointer;background:var(--ius-neutral-white);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);font-family:var(--ius-font-body);color:var(--ius-text-primary);transition:border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}.ius-personpicker__trigger[data-size=small]{--_pp-h: 34px;--_pp-fs: var(--ius-fs-base);--_pp-lh: var(--ius-lh-base)}.ius-personpicker__trigger[data-size=large]{--_pp-h: 48px;--_pp-py: var(--ius-space-sm);--_pp-px: var(--ius-space-md);--_pp-fs: var(--ius-fs-lg);--_pp-lh: var(--ius-lh-lg)}.ius-personpicker__trigger:hover{border-color:var(--ius-neutral-5)}.ius-personpicker__trigger:focus-visible,.ius-personpicker__trigger[data-open=true]{outline:none;border-color:var(--ius-primary-500);box-shadow:var(--ius-focus-ring)}.ius-personpicker__trigger[data-disabled=true]{background:var(--ius-neutral-2);color:var(--ius-text-disabled);cursor:default;pointer-events:none}.ius-personpicker__value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--_pp-fs);line-height:var(--_pp-lh)}.ius-personpicker__value[data-placeholder=true]{color:var(--ius-text-tertiary)}.ius-personpicker__count{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 var(--ius-space-xxs);border-radius:var(--ius-radius-pill);background:var(--ius-info-200);color:var(--ius-text-primary);font-size:var(--ius-fs-sm);line-height:1;font-variant-numeric:tabular-nums}.ius-personpicker__chev{flex:0 0 auto;display:inline-flex;color:var(--ius-text-tertiary)}.ius-personpicker__chev .ius-icon{font-size:var(--ius-icon-md);line-height:1;transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-personpicker__trigger[data-open=true] .ius-personpicker__chev .ius-icon{transform:rotate(180deg)}.ius-personpicker__menu{display:flex;flex-direction:column;gap:var(--ius-space-sm);box-sizing:border-box;padding:var(--ius-space-sm)}.ius-personpicker__list{display:flex;flex-direction:column;gap:var(--ius-space-xs);overflow-y:auto;padding-right:var(--ius-space-xxs)}.ius-personpicker__empty{display:flex;align-items:center;justify-content:center;padding:var(--ius-space-lg) var(--ius-space-md);font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-tertiary);text-align:center}.ius-personpicker__selected,.ius-personpicker__selected-list{display:flex;flex-direction:column;gap:var(--ius-space-xs);min-height:0}.ius-personpicker__selected-list[data-scroll=true]{overflow-y:auto;padding:var(--ius-space-xs) var(--ius-space-xxs) 0 0;border-top:1px solid var(--ius-stroke)}.ius-personpicker__selected-label{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);font-weight:var(--ius-fw-medium);letter-spacing:var(--ius-ls-emphasis, .02em);text-transform:uppercase;color:var(--ius-text-tertiary)}.ius-personpicker__menu .ius-sb{min-width:0;max-width:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PersonItemComponent, selector: "ius-person-item", inputs: ["name", "lines", "avatar", "icon", "monogram", "color", "shape", "variant", "size", "selected", "showCheck", "mask", "disabled", "actions", "actionsLabel", "removeLabel", "state", "ariaLabel"], outputs: ["clicked", "removed"] }, { kind: "component", type: PopoverComponent, selector: "ius-popover", inputs: ["title", "content", "placement", "trigger", "offset", "open", "defaultOpen", "showArrow", "disabled", "anchorRect", "padding", "dismissable", "panelClass"], outputs: ["openChange"] }, { kind: "component", type: SearchBarComponent, selector: "ius-search-bar", inputs: ["value", "defaultValue", "size", "disabled", "state", "placeholder", "ariaLabel", "name", "id"], outputs: ["valueChange", "search", "cleared"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8398
|
+
], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true }], ngImport: i0, template: "<!-- Trigger tipo Select + men\u00FA anclado (ius-popover, piel ius-personpicker-pop) -->\r\n<ius-popover\r\n trigger=\"manual\"\r\n [open]=\"isOpen\"\r\n placement=\"bottom-start\"\r\n [offset]=\"4\"\r\n [showArrow]=\"false\"\r\n padding=\"none\"\r\n dismissable\r\n panelClass=\"ius-personpicker-pop\"\r\n (openChange)=\"onPopoverOpenChange($event)\"\r\n>\r\n <button\r\n #triggerEl\r\n type=\"button\"\r\n class=\"ius-personpicker__trigger\"\r\n [attr.data-size]=\"size !== 'medium' ? size : null\"\r\n [attr.data-open]=\"isOpen ? 'true' : null\"\r\n [attr.data-disabled]=\"effDisabled ? 'true' : null\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-expanded]=\"isOpen\"\r\n [disabled]=\"effDisabled\"\r\n (click)=\"toggleOpen()\"\r\n >\r\n <span\r\n class=\"ius-personpicker__value\"\r\n [attr.data-placeholder]=\"selectedOptions.length === 0 ? 'true' : null\"\r\n >{{ triggerText }}</span>\r\n @if (multiple && selectedOptions.length > 0) {\r\n <span class=\"ius-personpicker__count\">{{ selectedOptions.length }}</span>\r\n }\r\n <span class=\"ius-personpicker__chev\"><span translate=\"no\" class=\"ius-icon\">expand_more</span></span>\r\n </button>\r\n\r\n <div iusPopoverContent class=\"ius-personpicker__menu\" [style.width.px]=\"menuWidth()\">\r\n @if (searchable) {\r\n <!-- b\u00FAsqueda en vivo: compone ius-search-bar -->\r\n <ius-search-bar\r\n [value]=\"query()\"\r\n [size]=\"size\"\r\n [placeholder]=\"searchPlaceholder\"\r\n (valueChange)=\"onQueryChange($event)\"\r\n (cleared)=\"clearQuery()\"\r\n />\r\n }\r\n\r\n <div\r\n class=\"ius-personpicker__list ius-scroll ius-scroll--sm\"\r\n role=\"listbox\"\r\n [attr.aria-multiselectable]=\"multiple ? 'true' : null\"\r\n [style.maxHeight]=\"px(maxHeight)\"\r\n >\r\n @if (filtered.length === 0) {\r\n <div class=\"ius-personpicker__empty\">{{ emptyText }}</div>\r\n } @else {\r\n @for (opt of filtered; track optId(opt) ?? $index) {\r\n <ius-person-item\r\n variant=\"option\"\r\n [size]=\"size\"\r\n [name]=\"opt.name\"\r\n [lines]=\"opt.lines\"\r\n [avatar]=\"opt.avatar\"\r\n [monogram]=\"opt.monogram\"\r\n [icon]=\"opt.icon\"\r\n [color]=\"opt.color ?? 'auto'\"\r\n [shape]=\"opt.shape\"\r\n [mask]=\"mask\"\r\n [selected]=\"isSelected(opt)\"\r\n [showCheck]=\"multiple\"\r\n [disabled]=\"opt.disabled ?? false\"\r\n (clicked)=\"toggle(opt)\"\r\n />\r\n }\r\n }\r\n </div>\r\n </div>\r\n</ius-popover>\r\n\r\n<!-- Seleccionados como chips bajo el trigger -->\r\n@if (showSelected && selectedOptions.length > 0) {\r\n <div class=\"ius-personpicker__selected\">\r\n @if (selectedLabelVisible) {\r\n <span class=\"ius-personpicker__selected-label\">{{ selectedLabel }}</span>\r\n }\r\n <div\r\n class=\"ius-personpicker__selected-list\"\r\n [class.ius-scroll]=\"selectedMaxHeight != null\"\r\n [class.ius-scroll--sm]=\"selectedMaxHeight != null\"\r\n [attr.data-scroll]=\"selectedMaxHeight != null ? 'true' : null\"\r\n [style.maxHeight]=\"px(selectedMaxHeight)\"\r\n >\r\n @for (opt of selectedOptions; track optId(opt) ?? $index) {\r\n @if (renderSelected) {\r\n <ng-container *ngTemplateOutlet=\"renderSelected; context: selectedCtx(opt)\" />\r\n } @else if (opt.removable !== false) {\r\n <ius-person-item\r\n variant=\"chip\"\r\n [size]=\"size\"\r\n [name]=\"opt.name\"\r\n [lines]=\"opt.lines\"\r\n [avatar]=\"opt.avatar\"\r\n [monogram]=\"opt.monogram\"\r\n [icon]=\"opt.icon\"\r\n [color]=\"opt.color ?? 'auto'\"\r\n [mask]=\"mask\"\r\n [disabled]=\"effDisabled\"\r\n [actions]=\"chipActions(opt)\"\r\n (removed)=\"remove(opt)\"\r\n />\r\n } @else {\r\n <!-- removable=false: mismo chip sin (removed) \u2192 sin X (la X sigue al enlace) -->\r\n <ius-person-item\r\n variant=\"chip\"\r\n [size]=\"size\"\r\n [name]=\"opt.name\"\r\n [lines]=\"opt.lines\"\r\n [avatar]=\"opt.avatar\"\r\n [monogram]=\"opt.monogram\"\r\n [icon]=\"opt.icon\"\r\n [color]=\"opt.color ?? 'auto'\"\r\n [mask]=\"mask\"\r\n [disabled]=\"effDisabled\"\r\n [actions]=\"chipActions(opt)\"\r\n />\r\n }\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-sm);min-width:0}.ius-personpicker__trigger{--_pp-h: 40px;--_pp-py: var(--ius-space-xs);--_pp-px: var(--ius-space-sm);--_pp-fs: var(--ius-fs-base);--_pp-lh: var(--ius-lh-base);-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:var(--ius-space-xs);box-sizing:border-box;width:100%;min-height:var(--_pp-h);padding:var(--_pp-py) var(--_pp-px);text-align:left;cursor:pointer;background:var(--ius-neutral-white);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);font-family:var(--ius-font-body);color:var(--ius-text-primary);transition:border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}.ius-personpicker__trigger[data-size=small]{--_pp-h: 34px;--_pp-fs: var(--ius-fs-base);--_pp-lh: var(--ius-lh-base)}.ius-personpicker__trigger[data-size=large]{--_pp-h: 48px;--_pp-py: var(--ius-space-sm);--_pp-px: var(--ius-space-md);--_pp-fs: var(--ius-fs-lg);--_pp-lh: var(--ius-lh-lg)}.ius-personpicker__trigger:hover{border-color:var(--ius-neutral-5)}.ius-personpicker__trigger:focus-visible,.ius-personpicker__trigger[data-open=true]{outline:none;border-color:var(--ius-primary-500);box-shadow:var(--ius-focus-ring)}.ius-personpicker__trigger[data-disabled=true]{background:var(--ius-neutral-2);color:var(--ius-text-disabled);cursor:default;pointer-events:none}.ius-personpicker__value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--_pp-fs);line-height:var(--_pp-lh)}.ius-personpicker__value[data-placeholder=true]{color:var(--ius-text-tertiary)}.ius-personpicker__count{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 var(--ius-space-xxs);border-radius:var(--ius-radius-pill);background:var(--ius-info-200);color:var(--ius-text-primary);font-size:var(--ius-fs-sm);line-height:1;font-variant-numeric:tabular-nums}.ius-personpicker__chev{flex:0 0 auto;display:inline-flex;color:var(--ius-text-tertiary)}.ius-personpicker__chev .ius-icon{font-size:var(--ius-icon-md);line-height:1;transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-personpicker__trigger[data-open=true] .ius-personpicker__chev .ius-icon{transform:rotate(180deg)}.ius-personpicker__menu{display:flex;flex-direction:column;gap:var(--ius-space-sm);box-sizing:border-box;padding:var(--ius-space-sm)}.ius-personpicker__list{display:flex;flex-direction:column;gap:var(--ius-space-xs);overflow-y:auto;padding-right:var(--ius-space-xxs)}.ius-personpicker__empty{display:flex;align-items:center;justify-content:center;padding:var(--ius-space-lg) var(--ius-space-md);font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-tertiary);text-align:center}.ius-personpicker__selected,.ius-personpicker__selected-list{display:flex;flex-direction:column;gap:var(--ius-space-xs);min-height:0}.ius-personpicker__selected-list[data-scroll=true]{overflow-y:auto;padding:var(--ius-space-xs) var(--ius-space-xxs) 0 0;border-top:1px solid var(--ius-stroke)}.ius-personpicker__selected-label{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);font-weight:var(--ius-fw-medium);letter-spacing:var(--ius-ls-emphasis, .02em);text-transform:uppercase;color:var(--ius-text-tertiary)}.ius-personpicker__menu .ius-sb{min-width:0;max-width:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PersonItemComponent, selector: "ius-person-item", inputs: ["name", "lines", "avatar", "icon", "monogram", "color", "shape", "variant", "bordered", "size", "selected", "showCheck", "mask", "disabled", "actions", "actionsLabel", "removeLabel", "state", "ariaLabel"], outputs: ["clicked", "removed"] }, { kind: "component", type: PopoverComponent, selector: "ius-popover", inputs: ["title", "content", "placement", "trigger", "offset", "open", "defaultOpen", "showArrow", "disabled", "anchorRect", "padding", "dismissable", "panelClass"], outputs: ["openChange"] }, { kind: "component", type: SearchBarComponent, selector: "ius-search-bar", inputs: ["value", "defaultValue", "size", "disabled", "state", "placeholder", "ariaLabel", "name", "id"], outputs: ["valueChange", "search", "cleared"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8390
8399
|
}
|
|
8391
8400
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PersonPickerComponent, decorators: [{
|
|
8392
8401
|
type: Component,
|
|
@@ -8451,7 +8460,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
8451
8460
|
args: ['triggerEl']
|
|
8452
8461
|
}] } });
|
|
8453
8462
|
|
|
8454
|
-
let uid$
|
|
8463
|
+
let uid$3 = 0;
|
|
8455
8464
|
/**
|
|
8456
8465
|
* MultiTextField — Ius Design v2 (familia inputs).
|
|
8457
8466
|
*
|
|
@@ -8507,7 +8516,7 @@ class MultiTextFieldComponent {
|
|
|
8507
8516
|
/** Último valor escrito por el CVA (por si llega antes que los slots). */
|
|
8508
8517
|
this.pendingValue = signal(null, /* @ts-ignore */
|
|
8509
8518
|
...(ngDevMode ? [{ debugName: "pendingValue" }] : /* istanbul ignore next */ []));
|
|
8510
|
-
this.baseIdState = `ius-mtf-${uid$
|
|
8519
|
+
this.baseIdState = `ius-mtf-${uid$3++}`;
|
|
8511
8520
|
this.slotInputs = viewChildren('slotInput', /* @ts-ignore */
|
|
8512
8521
|
...(ngDevMode ? [{ debugName: "slotInputs" }] : /* istanbul ignore next */ []));
|
|
8513
8522
|
this.onChange = () => { };
|
|
@@ -8789,6 +8798,8 @@ const ICON_TONES = {
|
|
|
8789
8798
|
primary: { bg: 'var(--ius-primary-100)', fg: 'var(--ius-primary-700)' },
|
|
8790
8799
|
neutral: { bg: 'var(--ius-neutral-2)', fg: 'var(--ius-neutral-7)' },
|
|
8791
8800
|
};
|
|
8801
|
+
/** Contador para los ids del nombre accesible (equivalente del `useId` del golden). */
|
|
8802
|
+
let uid$2 = 0;
|
|
8792
8803
|
/**
|
|
8793
8804
|
* Modal — Ius Design v2.
|
|
8794
8805
|
*
|
|
@@ -8805,6 +8816,15 @@ const ICON_TONES = {
|
|
|
8805
8816
|
*/
|
|
8806
8817
|
class ModalComponent {
|
|
8807
8818
|
constructor() {
|
|
8819
|
+
/**
|
|
8820
|
+
* Ids del título y la descripción: el diálogo se nombra con su propio
|
|
8821
|
+
* encabezado (`aria-labelledby`) en vez de repetir el texto en un
|
|
8822
|
+
* `aria-label`, y `aria-describedby` apunta a la descripción cuando la hay
|
|
8823
|
+
* (T11). `aria-label` queda solo para el caso sin `title`.
|
|
8824
|
+
*/
|
|
8825
|
+
this.baseId = `ius-modal-${uid$2++}`;
|
|
8826
|
+
this.titleId = `${this.baseId}-title`;
|
|
8827
|
+
this.descId = `${this.baseId}-desc`;
|
|
8808
8828
|
this.overlay = inject(Overlay);
|
|
8809
8829
|
this.viewContainerRef = inject(ViewContainerRef);
|
|
8810
8830
|
this._open = false;
|
|
@@ -8929,11 +8949,11 @@ class ModalComponent {
|
|
|
8929
8949
|
this.closed.emit(reason);
|
|
8930
8950
|
}
|
|
8931
8951
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8932
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ModalComponent, isStandalone: true, selector: "ius-modal", inputs: { open: ["open", "open", booleanAttribute], size: "size", title: "title", description: "description", icon: "icon", iconTone: "iconTone", showClose: ["showClose", "showClose", booleanAttribute], primaryLabel: "primaryLabel", primaryLoading: ["primaryLoading", "primaryLoading", booleanAttribute], primaryDisabled: ["primaryDisabled", "primaryDisabled", booleanAttribute], destructive: ["destructive", "destructive", booleanAttribute], secondaryLabel: "secondaryLabel", dividers: ["dividers", "dividers", booleanAttribute], closeOnScrim: ["closeOnScrim", "closeOnScrim", booleanAttribute], closeOnEsc: ["closeOnEsc", "closeOnEsc", booleanAttribute], zIndex: ["zIndex", "zIndex", numberAttribute], ariaLabel: "ariaLabel" }, outputs: { closed: "closed", primary: "primary", secondary: "secondary" }, queries: [{ propertyName: "customFooter", first: true, predicate: IusModalFooterDirective, descendants: true }], viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #tpl>\n <div\n class=\"ius-modal__scrim\"\n [style.--_modal-z]=\"zIndex\"\n (mousedown)=\"onScrimMouseDown($event)\"\n >\n <div\n class=\"ius-modal\"\n [attr.data-size]=\"size\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"title == null ? ariaLabel : null\"\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"true\"\n >\n @if (hasHead) {\n <div class=\"ius-modal__head\" [attr.data-divider]=\"dividers ? 'true' : null\">\n @if (icon != null) {\n <span\n class=\"ius-modal__icon\"\n aria-hidden=\"true\"\n [style.--_mi-bg]=\"iconColors.bg\"\n [style.--_mi-fg]=\"iconColors.fg\"\n >\n <span translate=\"no\" class=\"ius-icon\">{{ icon }}</span>\n </span>\n }\n\n @if (title != null || description != null) {\n <div class=\"ius-modal__titles\">\n @if (title != null) {\n <h2 class=\"ius-modal__title\">{{ title }}</h2>\n }\n @if (description != null) {\n <p class=\"ius-modal__desc\">{{ description }}</p>\n }\n </div>\n } @else {\n <span class=\"ius-modal__titles\"></span>\n }\n\n @if (showClose) {\n <ius-icon-button\n class=\"ius-modal__close\"\n icon=\"close\"\n variant=\"tertiary\"\n size=\"small\"\n shape=\"circle\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"onCloseClick()\"\n />\n }\n </div>\n }\n\n <div class=\"ius-modal__body\" [attr.data-no-head]=\"hasHead ? null : 'true'\">\n <ng-content />\n </div>\n\n @if (customFooter) {\n <div class=\"ius-modal__foot\" [attr.data-divider]=\"dividers ? 'true' : null\">\n <ng-content select=\"[iusModalFooter]\" />\n </div>\n } @else if (hasConvenienceFooter) {\n <div class=\"ius-modal__foot\" [attr.data-divider]=\"dividers ? 'true' : null\">\n @if (showSecondary) {\n <ius-button\n variant=\"secondary\"\n size=\"medium\"\n [label]=\"secondaryLabel!\"\n (clicked)=\"onSecondary()\"\n />\n }\n @if (primaryLabel != null) {\n <ius-button\n [variant]=\"destructive ? 'danger' : 'primary'\"\n size=\"medium\"\n [label]=\"primaryLabel\"\n [loading]=\"primaryLoading\"\n [disabled]=\"primaryDisabled\"\n (clicked)=\"onPrimary($event)\"\n />\n }\n </div>\n }\n </div>\n </div>\n</ng-template>\n", styles: [".ius-modal__scrim{position:fixed;inset:0;background:var(--ius-surface-overlay, rgba(0, 0, 0, .45));display:flex;align-items:center;justify-content:center;padding:var(--ius-space-lg);z-index:var(--_modal-z, var(--ius-z-modal));-webkit-user-select:none;user-select:none;animation:ius-modal-scrim-in .2s var(--ius-ease-decelerate, cubic-bezier(0, 0, .2, 1))}@keyframes ius-modal-scrim-in{0%{opacity:0}to{opacity:1}}.ius-modal{display:flex;flex-direction:column;width:100%;max-height:calc(100vh - 48px);background:var(--ius-surface-card, #fff);border-radius:var(--ius-radius-lg, 14px);box-shadow:var(--ius-elevation-400, 0 12px 32px rgba(0, 0, 0, .18));overflow:hidden;animation:ius-modal-in .22s var(--ius-ease-decelerate, cubic-bezier(0, 0, .2, 1))}@keyframes ius-modal-in{0%{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.ius-modal[data-size=small]{max-width:380px}.ius-modal[data-size=medium]{max-width:520px}.ius-modal[data-size=large]{max-width:680px}.ius-modal__head{display:flex;align-items:flex-start;gap:var(--ius-space-sm);padding:var(--ius-space-lg) var(--ius-space-lg) var(--ius-space-md) var(--ius-space-lg);flex:none;-webkit-user-select:none;user-select:none}.ius-modal__head[data-divider=true]{border-bottom:1px solid var(--ius-stroke, #eaeaea)}.ius-modal__icon{flex:none;width:38px;height:38px;margin-top:1px;border-radius:var(--ius-radius-pill, 100px);display:grid;place-items:center;background:var(--_mi-bg, var(--ius-info-100));color:var(--_mi-fg, var(--ius-info-600))}.ius-modal__icon .ius-icon{font-size:var(--ius-icon-lg)}.ius-modal__titles{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-modal__title{font-family:var(--ius-font-display);font-weight:700;font-size:var(--ius-fs-h5);line-height:var(--ius-lh-h5);color:var(--ius-text-primary);margin:0}.ius-modal__desc{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-base);color:var(--ius-text-secondary);margin:0}.ius-modal__close{flex:none;margin:-4px -4px 0 0}.ius-modal__body{padding:var(--ius-space-md) var(--ius-space-lg) var(--ius-space-lg);overflow-y:auto;flex:1 1 auto;font-family:var(--ius-font-body);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-secondary);-webkit-user-select:text;user-select:text}.ius-modal__body[data-no-head=true]{padding-top:var(--ius-space-lg)}.ius-modal__foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--ius-space-xs);padding:var(--ius-space-md) var(--ius-space-lg) var(--ius-space-md);flex:none;-webkit-user-select:none;user-select:none}.ius-modal__foot[data-divider=true]{border-top:1px solid var(--ius-stroke, #eaeaea)}@media(prefers-reduced-motion:reduce){.ius-modal__scrim,.ius-modal{animation:none}}@media(max-width:480px){.ius-modal[data-size]{max-width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: ButtonComponent, selector: "ius-button", inputs: ["variant", "label", "prefixIcon", "sufixIcon", "dynamic", "loading", "status", "disabled", "pressed", "fullWidth", "type", "ariaLabel", "action", "size"], outputs: ["clicked"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "tooltipPlacement"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8952
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ModalComponent, isStandalone: true, selector: "ius-modal", inputs: { open: ["open", "open", booleanAttribute], size: "size", title: "title", description: "description", icon: "icon", iconTone: "iconTone", showClose: ["showClose", "showClose", booleanAttribute], primaryLabel: "primaryLabel", primaryLoading: ["primaryLoading", "primaryLoading", booleanAttribute], primaryDisabled: ["primaryDisabled", "primaryDisabled", booleanAttribute], destructive: ["destructive", "destructive", booleanAttribute], secondaryLabel: "secondaryLabel", dividers: ["dividers", "dividers", booleanAttribute], closeOnScrim: ["closeOnScrim", "closeOnScrim", booleanAttribute], closeOnEsc: ["closeOnEsc", "closeOnEsc", booleanAttribute], zIndex: ["zIndex", "zIndex", numberAttribute], ariaLabel: "ariaLabel" }, outputs: { closed: "closed", primary: "primary", secondary: "secondary" }, queries: [{ propertyName: "customFooter", first: true, predicate: IusModalFooterDirective, descendants: true }], viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #tpl>\n <div\n class=\"ius-modal__scrim\"\n [style.--_modal-z]=\"zIndex\"\n (mousedown)=\"onScrimMouseDown($event)\"\n >\n <div\n class=\"ius-modal\"\n [attr.data-size]=\"size\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"title == null ? ariaLabel : null\"\n [attr.aria-labelledby]=\"title != null ? titleId : null\"\n [attr.aria-describedby]=\"description != null ? descId : null\"\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"true\"\n >\n @if (hasHead) {\n <div class=\"ius-modal__head\" [attr.data-divider]=\"dividers ? 'true' : null\">\n @if (icon != null) {\n <span\n class=\"ius-modal__icon\"\n aria-hidden=\"true\"\n [style.--_mi-bg]=\"iconColors.bg\"\n [style.--_mi-fg]=\"iconColors.fg\"\n >\n <span translate=\"no\" class=\"ius-icon\">{{ icon }}</span>\n </span>\n }\n\n @if (title != null || description != null) {\n <div class=\"ius-modal__titles\">\n @if (title != null) {\n <h2 class=\"ius-modal__title\" [id]=\"titleId\">{{ title }}</h2>\n }\n @if (description != null) {\n <p class=\"ius-modal__desc\" [id]=\"descId\">{{ description }}</p>\n }\n </div>\n } @else {\n <span class=\"ius-modal__titles\"></span>\n }\n\n @if (showClose) {\n <ius-icon-button\n class=\"ius-modal__close\"\n icon=\"close\"\n variant=\"tertiary\"\n size=\"small\"\n shape=\"circle\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"onCloseClick()\"\n />\n }\n </div>\n }\n\n <div class=\"ius-modal__body\" [attr.data-no-head]=\"hasHead ? null : 'true'\">\n <ng-content />\n </div>\n\n @if (customFooter) {\n <div class=\"ius-modal__foot\" [attr.data-divider]=\"dividers ? 'true' : null\">\n <ng-content select=\"[iusModalFooter]\" />\n </div>\n } @else if (hasConvenienceFooter) {\n <div class=\"ius-modal__foot\" [attr.data-divider]=\"dividers ? 'true' : null\">\n @if (showSecondary) {\n <ius-button\n variant=\"secondary\"\n size=\"medium\"\n [label]=\"secondaryLabel!\"\n (clicked)=\"onSecondary()\"\n />\n }\n @if (primaryLabel != null) {\n <ius-button\n [variant]=\"destructive ? 'danger' : 'primary'\"\n size=\"medium\"\n [label]=\"primaryLabel\"\n [loading]=\"primaryLoading\"\n [disabled]=\"primaryDisabled\"\n (clicked)=\"onPrimary($event)\"\n />\n }\n </div>\n }\n </div>\n </div>\n</ng-template>\n", styles: [".ius-modal__scrim{position:fixed;inset:0;background:var(--ius-surface-overlay, rgba(0, 0, 0, .45));display:flex;align-items:center;justify-content:center;padding:var(--ius-space-lg);z-index:var(--_modal-z, var(--ius-z-modal));-webkit-user-select:none;user-select:none;animation:ius-modal-scrim-in .2s var(--ius-ease-decelerate, cubic-bezier(0, 0, .2, 1))}@keyframes ius-modal-scrim-in{0%{opacity:0}to{opacity:1}}.ius-modal{display:flex;flex-direction:column;width:100%;max-height:calc(100vh - 48px);background:var(--ius-surface-card, #fff);border-radius:var(--ius-radius-lg, 14px);box-shadow:var(--ius-elevation-400, 0 12px 32px rgba(0, 0, 0, .18));overflow:hidden;animation:ius-modal-in .22s var(--ius-ease-decelerate, cubic-bezier(0, 0, .2, 1))}@keyframes ius-modal-in{0%{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.ius-modal[data-size=small]{max-width:380px}.ius-modal[data-size=medium]{max-width:520px}.ius-modal[data-size=large]{max-width:680px}.ius-modal__head{display:flex;align-items:flex-start;gap:var(--ius-space-sm);padding:var(--ius-space-lg) var(--ius-space-lg) var(--ius-space-md) var(--ius-space-lg);flex:none;-webkit-user-select:none;user-select:none}.ius-modal__head[data-divider=true]{border-bottom:1px solid var(--ius-stroke, #eaeaea)}.ius-modal__icon{flex:none;width:38px;height:38px;margin-top:1px;border-radius:var(--ius-radius-pill, 100px);display:grid;place-items:center;background:var(--_mi-bg, var(--ius-info-100));color:var(--_mi-fg, var(--ius-info-600))}.ius-modal__icon .ius-icon{font-size:var(--ius-icon-lg)}.ius-modal__titles{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-modal__title{font-family:var(--ius-font-display);font-weight:700;font-size:var(--ius-fs-h5);line-height:var(--ius-lh-h5);color:var(--ius-text-primary);margin:0}.ius-modal__desc{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-base);color:var(--ius-text-secondary);margin:0}.ius-modal__close{flex:none;margin:-4px -4px 0 0}.ius-modal__body{padding:var(--ius-space-md) var(--ius-space-lg) var(--ius-space-lg);overflow-y:auto;flex:1 1 auto;font-family:var(--ius-font-body);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-secondary);-webkit-user-select:text;user-select:text}.ius-modal__body[data-no-head=true]{padding-top:var(--ius-space-lg)}.ius-modal__foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--ius-space-xs);padding:var(--ius-space-md) var(--ius-space-lg) var(--ius-space-md);flex:none;-webkit-user-select:none;user-select:none}.ius-modal__foot[data-divider=true]{border-top:1px solid var(--ius-stroke, #eaeaea)}@media(prefers-reduced-motion:reduce){.ius-modal__scrim,.ius-modal{animation:none}}@media(max-width:480px){.ius-modal[data-size]{max-width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: ButtonComponent, selector: "ius-button", inputs: ["variant", "label", "prefixIcon", "sufixIcon", "dynamic", "loading", "status", "disabled", "pressed", "fullWidth", "type", "ariaLabel", "action", "size"], outputs: ["clicked"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "tooltipPlacement"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8933
8953
|
}
|
|
8934
8954
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ModalComponent, decorators: [{
|
|
8935
8955
|
type: Component,
|
|
8936
|
-
args: [{ selector: 'ius-modal', standalone: true, imports: [A11yModule, ButtonComponent, IconButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #tpl>\n <div\n class=\"ius-modal__scrim\"\n [style.--_modal-z]=\"zIndex\"\n (mousedown)=\"onScrimMouseDown($event)\"\n >\n <div\n class=\"ius-modal\"\n [attr.data-size]=\"size\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"title == null ? ariaLabel : null\"\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"true\"\n >\n @if (hasHead) {\n <div class=\"ius-modal__head\" [attr.data-divider]=\"dividers ? 'true' : null\">\n @if (icon != null) {\n <span\n class=\"ius-modal__icon\"\n aria-hidden=\"true\"\n [style.--_mi-bg]=\"iconColors.bg\"\n [style.--_mi-fg]=\"iconColors.fg\"\n >\n <span translate=\"no\" class=\"ius-icon\">{{ icon }}</span>\n </span>\n }\n\n @if (title != null || description != null) {\n <div class=\"ius-modal__titles\">\n @if (title != null) {\n <h2 class=\"ius-modal__title\">{{ title }}</h2>\n }\n @if (description != null) {\n <p class=\"ius-modal__desc\">{{ description }}</p>\n }\n </div>\n } @else {\n <span class=\"ius-modal__titles\"></span>\n }\n\n @if (showClose) {\n <ius-icon-button\n class=\"ius-modal__close\"\n icon=\"close\"\n variant=\"tertiary\"\n size=\"small\"\n shape=\"circle\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"onCloseClick()\"\n />\n }\n </div>\n }\n\n <div class=\"ius-modal__body\" [attr.data-no-head]=\"hasHead ? null : 'true'\">\n <ng-content />\n </div>\n\n @if (customFooter) {\n <div class=\"ius-modal__foot\" [attr.data-divider]=\"dividers ? 'true' : null\">\n <ng-content select=\"[iusModalFooter]\" />\n </div>\n } @else if (hasConvenienceFooter) {\n <div class=\"ius-modal__foot\" [attr.data-divider]=\"dividers ? 'true' : null\">\n @if (showSecondary) {\n <ius-button\n variant=\"secondary\"\n size=\"medium\"\n [label]=\"secondaryLabel!\"\n (clicked)=\"onSecondary()\"\n />\n }\n @if (primaryLabel != null) {\n <ius-button\n [variant]=\"destructive ? 'danger' : 'primary'\"\n size=\"medium\"\n [label]=\"primaryLabel\"\n [loading]=\"primaryLoading\"\n [disabled]=\"primaryDisabled\"\n (clicked)=\"onPrimary($event)\"\n />\n }\n </div>\n }\n </div>\n </div>\n</ng-template>\n", styles: [".ius-modal__scrim{position:fixed;inset:0;background:var(--ius-surface-overlay, rgba(0, 0, 0, .45));display:flex;align-items:center;justify-content:center;padding:var(--ius-space-lg);z-index:var(--_modal-z, var(--ius-z-modal));-webkit-user-select:none;user-select:none;animation:ius-modal-scrim-in .2s var(--ius-ease-decelerate, cubic-bezier(0, 0, .2, 1))}@keyframes ius-modal-scrim-in{0%{opacity:0}to{opacity:1}}.ius-modal{display:flex;flex-direction:column;width:100%;max-height:calc(100vh - 48px);background:var(--ius-surface-card, #fff);border-radius:var(--ius-radius-lg, 14px);box-shadow:var(--ius-elevation-400, 0 12px 32px rgba(0, 0, 0, .18));overflow:hidden;animation:ius-modal-in .22s var(--ius-ease-decelerate, cubic-bezier(0, 0, .2, 1))}@keyframes ius-modal-in{0%{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.ius-modal[data-size=small]{max-width:380px}.ius-modal[data-size=medium]{max-width:520px}.ius-modal[data-size=large]{max-width:680px}.ius-modal__head{display:flex;align-items:flex-start;gap:var(--ius-space-sm);padding:var(--ius-space-lg) var(--ius-space-lg) var(--ius-space-md) var(--ius-space-lg);flex:none;-webkit-user-select:none;user-select:none}.ius-modal__head[data-divider=true]{border-bottom:1px solid var(--ius-stroke, #eaeaea)}.ius-modal__icon{flex:none;width:38px;height:38px;margin-top:1px;border-radius:var(--ius-radius-pill, 100px);display:grid;place-items:center;background:var(--_mi-bg, var(--ius-info-100));color:var(--_mi-fg, var(--ius-info-600))}.ius-modal__icon .ius-icon{font-size:var(--ius-icon-lg)}.ius-modal__titles{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-modal__title{font-family:var(--ius-font-display);font-weight:700;font-size:var(--ius-fs-h5);line-height:var(--ius-lh-h5);color:var(--ius-text-primary);margin:0}.ius-modal__desc{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-base);color:var(--ius-text-secondary);margin:0}.ius-modal__close{flex:none;margin:-4px -4px 0 0}.ius-modal__body{padding:var(--ius-space-md) var(--ius-space-lg) var(--ius-space-lg);overflow-y:auto;flex:1 1 auto;font-family:var(--ius-font-body);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-secondary);-webkit-user-select:text;user-select:text}.ius-modal__body[data-no-head=true]{padding-top:var(--ius-space-lg)}.ius-modal__foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--ius-space-xs);padding:var(--ius-space-md) var(--ius-space-lg) var(--ius-space-md);flex:none;-webkit-user-select:none;user-select:none}.ius-modal__foot[data-divider=true]{border-top:1px solid var(--ius-stroke, #eaeaea)}@media(prefers-reduced-motion:reduce){.ius-modal__scrim,.ius-modal{animation:none}}@media(max-width:480px){.ius-modal[data-size]{max-width:100%}}\n"] }]
|
|
8956
|
+
args: [{ selector: 'ius-modal', standalone: true, imports: [A11yModule, ButtonComponent, IconButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #tpl>\n <div\n class=\"ius-modal__scrim\"\n [style.--_modal-z]=\"zIndex\"\n (mousedown)=\"onScrimMouseDown($event)\"\n >\n <div\n class=\"ius-modal\"\n [attr.data-size]=\"size\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"title == null ? ariaLabel : null\"\n [attr.aria-labelledby]=\"title != null ? titleId : null\"\n [attr.aria-describedby]=\"description != null ? descId : null\"\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"true\"\n >\n @if (hasHead) {\n <div class=\"ius-modal__head\" [attr.data-divider]=\"dividers ? 'true' : null\">\n @if (icon != null) {\n <span\n class=\"ius-modal__icon\"\n aria-hidden=\"true\"\n [style.--_mi-bg]=\"iconColors.bg\"\n [style.--_mi-fg]=\"iconColors.fg\"\n >\n <span translate=\"no\" class=\"ius-icon\">{{ icon }}</span>\n </span>\n }\n\n @if (title != null || description != null) {\n <div class=\"ius-modal__titles\">\n @if (title != null) {\n <h2 class=\"ius-modal__title\" [id]=\"titleId\">{{ title }}</h2>\n }\n @if (description != null) {\n <p class=\"ius-modal__desc\" [id]=\"descId\">{{ description }}</p>\n }\n </div>\n } @else {\n <span class=\"ius-modal__titles\"></span>\n }\n\n @if (showClose) {\n <ius-icon-button\n class=\"ius-modal__close\"\n icon=\"close\"\n variant=\"tertiary\"\n size=\"small\"\n shape=\"circle\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"onCloseClick()\"\n />\n }\n </div>\n }\n\n <div class=\"ius-modal__body\" [attr.data-no-head]=\"hasHead ? null : 'true'\">\n <ng-content />\n </div>\n\n @if (customFooter) {\n <div class=\"ius-modal__foot\" [attr.data-divider]=\"dividers ? 'true' : null\">\n <ng-content select=\"[iusModalFooter]\" />\n </div>\n } @else if (hasConvenienceFooter) {\n <div class=\"ius-modal__foot\" [attr.data-divider]=\"dividers ? 'true' : null\">\n @if (showSecondary) {\n <ius-button\n variant=\"secondary\"\n size=\"medium\"\n [label]=\"secondaryLabel!\"\n (clicked)=\"onSecondary()\"\n />\n }\n @if (primaryLabel != null) {\n <ius-button\n [variant]=\"destructive ? 'danger' : 'primary'\"\n size=\"medium\"\n [label]=\"primaryLabel\"\n [loading]=\"primaryLoading\"\n [disabled]=\"primaryDisabled\"\n (clicked)=\"onPrimary($event)\"\n />\n }\n </div>\n }\n </div>\n </div>\n</ng-template>\n", styles: [".ius-modal__scrim{position:fixed;inset:0;background:var(--ius-surface-overlay, rgba(0, 0, 0, .45));display:flex;align-items:center;justify-content:center;padding:var(--ius-space-lg);z-index:var(--_modal-z, var(--ius-z-modal));-webkit-user-select:none;user-select:none;animation:ius-modal-scrim-in .2s var(--ius-ease-decelerate, cubic-bezier(0, 0, .2, 1))}@keyframes ius-modal-scrim-in{0%{opacity:0}to{opacity:1}}.ius-modal{display:flex;flex-direction:column;width:100%;max-height:calc(100vh - 48px);background:var(--ius-surface-card, #fff);border-radius:var(--ius-radius-lg, 14px);box-shadow:var(--ius-elevation-400, 0 12px 32px rgba(0, 0, 0, .18));overflow:hidden;animation:ius-modal-in .22s var(--ius-ease-decelerate, cubic-bezier(0, 0, .2, 1))}@keyframes ius-modal-in{0%{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.ius-modal[data-size=small]{max-width:380px}.ius-modal[data-size=medium]{max-width:520px}.ius-modal[data-size=large]{max-width:680px}.ius-modal__head{display:flex;align-items:flex-start;gap:var(--ius-space-sm);padding:var(--ius-space-lg) var(--ius-space-lg) var(--ius-space-md) var(--ius-space-lg);flex:none;-webkit-user-select:none;user-select:none}.ius-modal__head[data-divider=true]{border-bottom:1px solid var(--ius-stroke, #eaeaea)}.ius-modal__icon{flex:none;width:38px;height:38px;margin-top:1px;border-radius:var(--ius-radius-pill, 100px);display:grid;place-items:center;background:var(--_mi-bg, var(--ius-info-100));color:var(--_mi-fg, var(--ius-info-600))}.ius-modal__icon .ius-icon{font-size:var(--ius-icon-lg)}.ius-modal__titles{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-modal__title{font-family:var(--ius-font-display);font-weight:700;font-size:var(--ius-fs-h5);line-height:var(--ius-lh-h5);color:var(--ius-text-primary);margin:0}.ius-modal__desc{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-base);color:var(--ius-text-secondary);margin:0}.ius-modal__close{flex:none;margin:-4px -4px 0 0}.ius-modal__body{padding:var(--ius-space-md) var(--ius-space-lg) var(--ius-space-lg);overflow-y:auto;flex:1 1 auto;font-family:var(--ius-font-body);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-secondary);-webkit-user-select:text;user-select:text}.ius-modal__body[data-no-head=true]{padding-top:var(--ius-space-lg)}.ius-modal__foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--ius-space-xs);padding:var(--ius-space-md) var(--ius-space-lg) var(--ius-space-md);flex:none;-webkit-user-select:none;user-select:none}.ius-modal__foot[data-divider=true]{border-top:1px solid var(--ius-stroke, #eaeaea)}@media(prefers-reduced-motion:reduce){.ius-modal__scrim,.ius-modal{animation:none}}@media(max-width:480px){.ius-modal[data-size]{max-width:100%}}\n"] }]
|
|
8937
8957
|
}], propDecorators: { tpl: [{
|
|
8938
8958
|
type: ViewChild,
|
|
8939
8959
|
args: ['tpl', { static: true }]
|
|
@@ -9285,7 +9305,7 @@ class SegmentedControlComponent {
|
|
|
9285
9305
|
useExisting: forwardRef(() => SegmentedControlComponent),
|
|
9286
9306
|
multi: true,
|
|
9287
9307
|
},
|
|
9288
|
-
], viewQueries: [{ propertyName: "optRefs", predicate: ["opt"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (o of options; track o.value; let i = $index) {\n <button\n #opt\n type=\"button\"\n role=\"radio\"\n class=\"ius-seg__opt\"\n [attr.name]=\"name || null\"\n [attr.aria-checked]=\"o.value === selected()\"\n [attr.aria-label]=\"iconOnly ? (o.ariaLabel || o.label || null) : null\"\n [attr.title]=\"iconOnly ? (o.ariaLabel || o.label || null) : (o.title || null)\"\n [disabled]=\"disabled || !!o.disabled\"\n [attr.tabindex]=\"tabIndexFor(o, i)\"\n (click)=\"onOptionClick(o)\"\n (keydown)=\"onKeyDown($event, i)\"\n >\n @if (o.icon) {\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ o.icon }}</span>\n }\n @if (!iconOnly && o.label != null) {\n <span>{{ o.label }}</span>\n }\n </button>\n}\n", styles: ["@charset \"UTF-8\";:host{--_seg-h: 40px;--_seg-fs: var(--ius-fs-base);--_seg-px: 14px;--_seg-gap: var(--ius-space-xs);--_seg-icon: var(--ius-icon-md);--_seg-pad: 3px;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:stretch;gap:var(--ius-space-xxs);padding:var(--_seg-pad);background:var(--ius-neutral-1);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);box-sizing:border-box;font-family:var(--ius-font-body)}:host([data-size=small]){--_seg-h: 34px;--_seg-fs: var(--ius-fs-sm);--_seg-px: 11px;--_seg-gap: var(--ius-space-xs);--_seg-icon: var(--ius-icon-sm)}:host([data-size=large]){--_seg-h: 48px;--_seg-fs: var(--ius-fs-base);--_seg-px: 18px;--_seg-gap: var(--ius-space-xs);--_seg-icon: var(--ius-icon-md)}@container style(--ius-control-size: small){:host(:not([data-size])){--_seg-h: 34px;--_seg-fs: var(--ius-fs-sm);--_seg-px: 11px;--_seg-gap: var(--ius-space-xs);--_seg-icon: var(--ius-icon-sm)}}@container style(--ius-control-size: large){:host(:not([data-size])){--_seg-h: 48px;--_seg-fs: var(--ius-fs-base);--_seg-px: 18px;--_seg-gap: var(--ius-space-xs);--_seg-icon: var(--ius-icon-md)}}:host([data-fullwidth=true]){display:flex;width:100%}.ius-seg__opt{appearance:none;-webkit-appearance:none;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:var(--_seg-gap);height:calc(var(--_seg-h) - var(--_seg-pad) * 2 - 2px);padding:0 var(--_seg-px);border:0;background:transparent;cursor:pointer;border-radius:calc(var(--ius-radius-lg) - var(--_seg-pad));color:var(--ius-text-secondary);font-family:var(--ius-font-body);font-size:var(--_seg-fs);font-weight:
|
|
9308
|
+
], viewQueries: [{ propertyName: "optRefs", predicate: ["opt"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (o of options; track o.value; let i = $index) {\n <button\n #opt\n type=\"button\"\n role=\"radio\"\n class=\"ius-seg__opt\"\n [attr.name]=\"name || null\"\n [attr.aria-checked]=\"o.value === selected()\"\n [attr.aria-label]=\"iconOnly ? (o.ariaLabel || o.label || null) : null\"\n [attr.title]=\"iconOnly ? (o.ariaLabel || o.label || null) : (o.title || null)\"\n [disabled]=\"disabled || !!o.disabled\"\n [attr.tabindex]=\"tabIndexFor(o, i)\"\n (click)=\"onOptionClick(o)\"\n (keydown)=\"onKeyDown($event, i)\"\n >\n @if (o.icon) {\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ o.icon }}</span>\n }\n @if (!iconOnly && o.label != null) {\n <span>{{ o.label }}</span>\n }\n </button>\n}\n", styles: ["@charset \"UTF-8\";:host{--_seg-h: 40px;--_seg-fs: var(--ius-fs-base);--_seg-px: 14px;--_seg-gap: var(--ius-space-xs);--_seg-icon: var(--ius-icon-md);--_seg-pad: 3px;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:stretch;gap:var(--ius-space-xxs);padding:var(--_seg-pad);background:var(--ius-neutral-1);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);box-sizing:border-box;font-family:var(--ius-font-body)}:host([data-size=small]){--_seg-h: 34px;--_seg-fs: var(--ius-fs-sm);--_seg-px: 11px;--_seg-gap: var(--ius-space-xs);--_seg-icon: var(--ius-icon-sm)}:host([data-size=large]){--_seg-h: 48px;--_seg-fs: var(--ius-fs-base);--_seg-px: 18px;--_seg-gap: var(--ius-space-xs);--_seg-icon: var(--ius-icon-md)}@container style(--ius-control-size: small){:host(:not([data-size])){--_seg-h: 34px;--_seg-fs: var(--ius-fs-sm);--_seg-px: 11px;--_seg-gap: var(--ius-space-xs);--_seg-icon: var(--ius-icon-sm)}}@container style(--ius-control-size: large){:host(:not([data-size])){--_seg-h: 48px;--_seg-fs: var(--ius-fs-base);--_seg-px: 18px;--_seg-gap: var(--ius-space-xs);--_seg-icon: var(--ius-icon-md)}}:host([data-fullwidth=true]){display:flex;width:100%}.ius-seg__opt{appearance:none;-webkit-appearance:none;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:var(--_seg-gap);height:calc(var(--_seg-h) - var(--_seg-pad) * 2 - 2px);padding:0 var(--_seg-px);border:0;background:transparent;cursor:pointer;border-radius:calc(var(--ius-radius-lg) - var(--_seg-pad));color:var(--ius-text-secondary);font-family:var(--ius-font-body);font-size:var(--_seg-fs);font-weight:var(--ius-fw-medium);line-height:1;white-space:nowrap;transition:background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-fullwidth=true]) .ius-seg__opt{flex:1 1 0;min-width:0}.ius-seg__opt .ius-icon{font-size:var(--_seg-icon);line-height:1}.ius-seg__opt:hover:not([aria-checked=true]):not(:disabled){color:var(--ius-text-primary);background:var(--ius-neutral-3)}.ius-seg__opt:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-seg__opt:disabled{color:var(--ius-text-disabled);cursor:not-allowed}:host([data-variant=subtle]) .ius-seg__opt[aria-checked=true]{background:var(--ius-surface-card);color:var(--ius-text-primary);box-shadow:var(--ius-elevation-100);font-weight:var(--ius-fw-semibold)}:host([data-variant=solid]) .ius-seg__opt[aria-checked=true]{background:var(--ius-primary-900);color:var(--ius-neutral-white);font-weight:var(--ius-fw-semibold)}:host([data-variant=solid]) .ius-seg__opt[aria-checked=true] .ius-icon{color:var(--ius-neutral-white)}:host([data-disabled=true]){opacity:.55;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9289
9309
|
}
|
|
9290
9310
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SegmentedControlComponent, decorators: [{
|
|
9291
9311
|
type: Component,
|
|
@@ -9303,7 +9323,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
9303
9323
|
'[attr.data-variant]': 'variant',
|
|
9304
9324
|
'[attr.data-fullwidth]': "fullWidth ? 'true' : 'false'",
|
|
9305
9325
|
'[attr.data-disabled]': "disabled ? 'true' : 'false'",
|
|
9306
|
-
}, template: "@for (o of options; track o.value; let i = $index) {\n <button\n #opt\n type=\"button\"\n role=\"radio\"\n class=\"ius-seg__opt\"\n [attr.name]=\"name || null\"\n [attr.aria-checked]=\"o.value === selected()\"\n [attr.aria-label]=\"iconOnly ? (o.ariaLabel || o.label || null) : null\"\n [attr.title]=\"iconOnly ? (o.ariaLabel || o.label || null) : (o.title || null)\"\n [disabled]=\"disabled || !!o.disabled\"\n [attr.tabindex]=\"tabIndexFor(o, i)\"\n (click)=\"onOptionClick(o)\"\n (keydown)=\"onKeyDown($event, i)\"\n >\n @if (o.icon) {\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ o.icon }}</span>\n }\n @if (!iconOnly && o.label != null) {\n <span>{{ o.label }}</span>\n }\n </button>\n}\n", styles: ["@charset \"UTF-8\";:host{--_seg-h: 40px;--_seg-fs: var(--ius-fs-base);--_seg-px: 14px;--_seg-gap: var(--ius-space-xs);--_seg-icon: var(--ius-icon-md);--_seg-pad: 3px;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:stretch;gap:var(--ius-space-xxs);padding:var(--_seg-pad);background:var(--ius-neutral-1);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);box-sizing:border-box;font-family:var(--ius-font-body)}:host([data-size=small]){--_seg-h: 34px;--_seg-fs: var(--ius-fs-sm);--_seg-px: 11px;--_seg-gap: var(--ius-space-xs);--_seg-icon: var(--ius-icon-sm)}:host([data-size=large]){--_seg-h: 48px;--_seg-fs: var(--ius-fs-base);--_seg-px: 18px;--_seg-gap: var(--ius-space-xs);--_seg-icon: var(--ius-icon-md)}@container style(--ius-control-size: small){:host(:not([data-size])){--_seg-h: 34px;--_seg-fs: var(--ius-fs-sm);--_seg-px: 11px;--_seg-gap: var(--ius-space-xs);--_seg-icon: var(--ius-icon-sm)}}@container style(--ius-control-size: large){:host(:not([data-size])){--_seg-h: 48px;--_seg-fs: var(--ius-fs-base);--_seg-px: 18px;--_seg-gap: var(--ius-space-xs);--_seg-icon: var(--ius-icon-md)}}:host([data-fullwidth=true]){display:flex;width:100%}.ius-seg__opt{appearance:none;-webkit-appearance:none;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:var(--_seg-gap);height:calc(var(--_seg-h) - var(--_seg-pad) * 2 - 2px);padding:0 var(--_seg-px);border:0;background:transparent;cursor:pointer;border-radius:calc(var(--ius-radius-lg) - var(--_seg-pad));color:var(--ius-text-secondary);font-family:var(--ius-font-body);font-size:var(--_seg-fs);font-weight:
|
|
9326
|
+
}, template: "@for (o of options; track o.value; let i = $index) {\n <button\n #opt\n type=\"button\"\n role=\"radio\"\n class=\"ius-seg__opt\"\n [attr.name]=\"name || null\"\n [attr.aria-checked]=\"o.value === selected()\"\n [attr.aria-label]=\"iconOnly ? (o.ariaLabel || o.label || null) : null\"\n [attr.title]=\"iconOnly ? (o.ariaLabel || o.label || null) : (o.title || null)\"\n [disabled]=\"disabled || !!o.disabled\"\n [attr.tabindex]=\"tabIndexFor(o, i)\"\n (click)=\"onOptionClick(o)\"\n (keydown)=\"onKeyDown($event, i)\"\n >\n @if (o.icon) {\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ o.icon }}</span>\n }\n @if (!iconOnly && o.label != null) {\n <span>{{ o.label }}</span>\n }\n </button>\n}\n", styles: ["@charset \"UTF-8\";:host{--_seg-h: 40px;--_seg-fs: var(--ius-fs-base);--_seg-px: 14px;--_seg-gap: var(--ius-space-xs);--_seg-icon: var(--ius-icon-md);--_seg-pad: 3px;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:stretch;gap:var(--ius-space-xxs);padding:var(--_seg-pad);background:var(--ius-neutral-1);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);box-sizing:border-box;font-family:var(--ius-font-body)}:host([data-size=small]){--_seg-h: 34px;--_seg-fs: var(--ius-fs-sm);--_seg-px: 11px;--_seg-gap: var(--ius-space-xs);--_seg-icon: var(--ius-icon-sm)}:host([data-size=large]){--_seg-h: 48px;--_seg-fs: var(--ius-fs-base);--_seg-px: 18px;--_seg-gap: var(--ius-space-xs);--_seg-icon: var(--ius-icon-md)}@container style(--ius-control-size: small){:host(:not([data-size])){--_seg-h: 34px;--_seg-fs: var(--ius-fs-sm);--_seg-px: 11px;--_seg-gap: var(--ius-space-xs);--_seg-icon: var(--ius-icon-sm)}}@container style(--ius-control-size: large){:host(:not([data-size])){--_seg-h: 48px;--_seg-fs: var(--ius-fs-base);--_seg-px: 18px;--_seg-gap: var(--ius-space-xs);--_seg-icon: var(--ius-icon-md)}}:host([data-fullwidth=true]){display:flex;width:100%}.ius-seg__opt{appearance:none;-webkit-appearance:none;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:var(--_seg-gap);height:calc(var(--_seg-h) - var(--_seg-pad) * 2 - 2px);padding:0 var(--_seg-px);border:0;background:transparent;cursor:pointer;border-radius:calc(var(--ius-radius-lg) - var(--_seg-pad));color:var(--ius-text-secondary);font-family:var(--ius-font-body);font-size:var(--_seg-fs);font-weight:var(--ius-fw-medium);line-height:1;white-space:nowrap;transition:background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-fullwidth=true]) .ius-seg__opt{flex:1 1 0;min-width:0}.ius-seg__opt .ius-icon{font-size:var(--_seg-icon);line-height:1}.ius-seg__opt:hover:not([aria-checked=true]):not(:disabled){color:var(--ius-text-primary);background:var(--ius-neutral-3)}.ius-seg__opt:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-seg__opt:disabled{color:var(--ius-text-disabled);cursor:not-allowed}:host([data-variant=subtle]) .ius-seg__opt[aria-checked=true]{background:var(--ius-surface-card);color:var(--ius-text-primary);box-shadow:var(--ius-elevation-100);font-weight:var(--ius-fw-semibold)}:host([data-variant=solid]) .ius-seg__opt[aria-checked=true]{background:var(--ius-primary-900);color:var(--ius-neutral-white);font-weight:var(--ius-fw-semibold)}:host([data-variant=solid]) .ius-seg__opt[aria-checked=true] .ius-icon{color:var(--ius-neutral-white)}:host([data-disabled=true]){opacity:.55;pointer-events:none}\n"] }]
|
|
9307
9327
|
}], propDecorators: { options: [{
|
|
9308
9328
|
type: Input
|
|
9309
9329
|
}], size: [{
|
|
@@ -9764,7 +9784,7 @@ class DividerComponent {
|
|
|
9764
9784
|
<span #labelWrap class="ius-divider__label" [hidden]="!hasLabel()">
|
|
9765
9785
|
<ng-content />
|
|
9766
9786
|
</span>
|
|
9767
|
-
`, isInline: true, styles: ["@charset \"UTF-8\";:host{--_color: var(--ius-neutral-3);--_thickness: 1px;--_gap: 12px;--_stub: 28px;font-family:var(--ius-font-body);color:var(--ius-text-secondary);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-semibold
|
|
9787
|
+
`, isInline: true, styles: ["@charset \"UTF-8\";:host{--_color: var(--ius-neutral-3);--_thickness: 1px;--_gap: 12px;--_stub: 28px;font-family:var(--ius-font-body);color:var(--ius-text-secondary);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-semibold);line-height:1.2;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host([data-orientation=horizontal]){display:flex;align-items:center;gap:var(--_gap);width:100%}:host([data-orientation=horizontal]):before,:host([data-orientation=horizontal]):after{content:\"\";flex:1 1 auto;min-width:0;border-top:var(--_thickness) solid var(--_color)}:host([data-orientation=horizontal][data-variant=dashed]):before,:host([data-orientation=horizontal][data-variant=dashed]):after{border-top-style:dashed}:host([data-orientation=horizontal][data-empty=true]){display:block}:host([data-orientation=horizontal][data-empty=true]):before{display:block;flex:none;width:100%}:host([data-orientation=horizontal][data-empty=true]):after{display:none}:host([data-orientation=horizontal][data-text-align=start]):before{flex:0 0 var(--_stub)}:host([data-orientation=horizontal][data-text-align=end]):after{flex:0 0 var(--_stub)}.ius-divider__label{flex:0 0 auto;max-width:100%;color:var(--ius-text-secondary)}:host([data-orientation=vertical]){display:inline-flex;align-self:stretch;align-items:stretch;width:var(--_thickness);min-height:16px;background:transparent;border-left:var(--_thickness) solid var(--_color)}:host([data-orientation=vertical][data-variant=dashed]){border-left-style:dashed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9768
9788
|
}
|
|
9769
9789
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DividerComponent, decorators: [{
|
|
9770
9790
|
type: Component,
|
|
@@ -9779,7 +9799,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
9779
9799
|
'[attr.data-variant]': 'variant',
|
|
9780
9800
|
'[attr.data-text-align]': 'hasLabel() ? textAlign : null',
|
|
9781
9801
|
'[attr.data-empty]': "orientation === 'horizontal' && !hasLabel() ? 'true' : null",
|
|
9782
|
-
}, styles: ["@charset \"UTF-8\";:host{--_color: var(--ius-neutral-3);--_thickness: 1px;--_gap: 12px;--_stub: 28px;font-family:var(--ius-font-body);color:var(--ius-text-secondary);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-semibold
|
|
9802
|
+
}, styles: ["@charset \"UTF-8\";:host{--_color: var(--ius-neutral-3);--_thickness: 1px;--_gap: 12px;--_stub: 28px;font-family:var(--ius-font-body);color:var(--ius-text-secondary);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-semibold);line-height:1.2;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host([data-orientation=horizontal]){display:flex;align-items:center;gap:var(--_gap);width:100%}:host([data-orientation=horizontal]):before,:host([data-orientation=horizontal]):after{content:\"\";flex:1 1 auto;min-width:0;border-top:var(--_thickness) solid var(--_color)}:host([data-orientation=horizontal][data-variant=dashed]):before,:host([data-orientation=horizontal][data-variant=dashed]):after{border-top-style:dashed}:host([data-orientation=horizontal][data-empty=true]){display:block}:host([data-orientation=horizontal][data-empty=true]):before{display:block;flex:none;width:100%}:host([data-orientation=horizontal][data-empty=true]):after{display:none}:host([data-orientation=horizontal][data-text-align=start]):before{flex:0 0 var(--_stub)}:host([data-orientation=horizontal][data-text-align=end]):after{flex:0 0 var(--_stub)}.ius-divider__label{flex:0 0 auto;max-width:100%;color:var(--ius-text-secondary)}:host([data-orientation=vertical]){display:inline-flex;align-self:stretch;align-items:stretch;width:var(--_thickness);min-height:16px;background:transparent;border-left:var(--_thickness) solid var(--_color)}:host([data-orientation=vertical][data-variant=dashed]){border-left-style:dashed}\n"] }]
|
|
9783
9803
|
}], propDecorators: { orientation: [{
|
|
9784
9804
|
type: Input
|
|
9785
9805
|
}], variant: [{
|
|
@@ -11096,11 +11116,13 @@ const ACCENTS = {
|
|
|
11096
11116
|
* Separación entre filas usada por la MEDICIÓN de priority+.
|
|
11097
11117
|
*
|
|
11098
11118
|
* DISCREPANCIA DEL GOLDEN (se porta tal cual, no se «arregla» aquí): el CSS del
|
|
11099
|
-
* golden
|
|
11100
|
-
* `measure()`
|
|
11101
|
-
*
|
|
11119
|
+
* golden separaba las filas con `gap: var(--ius-space-xxs)` = **4px** mientras su
|
|
11120
|
+
* `measure()` calculaba con **2**. Diseño lo corrigió el 2026-08-28 (T7): la
|
|
11121
|
+
* medición lee el `row-gap` REAL del contenedor, así que el conteo ya no depende
|
|
11122
|
+
* de una constante que se desincroniza del CSS. `GAP` queda solo como respaldo
|
|
11123
|
+
* para entornos donde `getComputedStyle` no devuelva un valor usable (jsdom).
|
|
11102
11124
|
*/
|
|
11103
|
-
const GAP =
|
|
11125
|
+
const GAP = 4;
|
|
11104
11126
|
/**
|
|
11105
11127
|
* Marca el slot libre de encabezado:
|
|
11106
11128
|
* `<ius-settings-nav><div iusSettingsNavHeader>…</div></ius-settings-nav>`.
|
|
@@ -11381,23 +11403,27 @@ class SettingsNavComponent {
|
|
|
11381
11403
|
const total = this.items().length;
|
|
11382
11404
|
const avail = wrap.clientHeight;
|
|
11383
11405
|
const hs = Array.from(meas.children).map((k) => k.offsetHeight);
|
|
11406
|
+
// El separador real entre filas, no una constante: si el CSS cambia el gap,
|
|
11407
|
+
// la medición lo sigue sola (T7).
|
|
11408
|
+
const gap = parseFloat(getComputedStyle(meas).rowGap);
|
|
11409
|
+
const rowGap = Number.isFinite(gap) ? gap : GAP;
|
|
11384
11410
|
if (!hs.length || avail <= 0) {
|
|
11385
11411
|
this.visibleCount.set(total);
|
|
11386
11412
|
return;
|
|
11387
11413
|
}
|
|
11388
11414
|
let totalAll = 0;
|
|
11389
11415
|
for (let i = 0; i < hs.length; i++)
|
|
11390
|
-
totalAll += hs[i] + (i ?
|
|
11416
|
+
totalAll += hs[i] + (i ? rowGap : 0);
|
|
11391
11417
|
if (totalAll <= avail) {
|
|
11392
11418
|
this.visibleCount.set(total);
|
|
11393
11419
|
return;
|
|
11394
11420
|
}
|
|
11395
11421
|
// El disparador «Más» ocupa el alto de una fila.
|
|
11396
|
-
const reserve = hs[0] +
|
|
11422
|
+
const reserve = hs[0] + rowGap;
|
|
11397
11423
|
let used = 0;
|
|
11398
11424
|
let count = 0;
|
|
11399
11425
|
for (let i = 0; i < hs.length; i++) {
|
|
11400
|
-
const add = hs[i] + (i ?
|
|
11426
|
+
const add = hs[i] + (i ? rowGap : 0);
|
|
11401
11427
|
if (used + add > avail - reserve)
|
|
11402
11428
|
break;
|
|
11403
11429
|
used += add;
|
|
@@ -11519,7 +11545,7 @@ class ToastComponent {
|
|
|
11519
11545
|
...(ngDevMode ? [{ debugName: "showRing" }] : /* istanbul ignore next */ []));
|
|
11520
11546
|
}
|
|
11521
11547
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11522
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ToastComponent, isStandalone: true, selector: "ius-toast", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, paused: { classPropertyName: "paused", publicName: "paused", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "attr.role": "tone() === 'danger' ? 'alert' : 'status'", "attr.data-tone": "tone()", "attr.data-paused": "paused() ? 'true' : null" }, classAttribute: "ius-toast" }, queries: [{ propertyName: "actionRef", first: true, predicate: IusToastActionDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (iconName()) {\r\n <span class=\"ius-toast__icon\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ iconName() }}</span>\r\n </span>\r\n}\r\n\r\n<div class=\"ius-toast__main\">\r\n @if (title() != null) {\r\n <div class=\"ius-toast__title\">{{ title() }}</div>\r\n }\r\n @if (message() != null) {\r\n <div class=\"ius-toast__msg\">{{ message() }}</div>\r\n }\r\n @if (hasAction()) {\r\n <div class=\"ius-toast__action\">\r\n @if (action(); as tpl) {\r\n <ng-container [ngTemplateOutlet]=\"tpl\" />\r\n }\r\n <ng-content select=\"[iusToastAction]\" />\r\n </div>\r\n }\r\n</div>\r\n\r\n<!-- Cluster del temporizador: el \u00D7 va DENTRO del aro de cuenta regresiva\r\n (contenido central de CircularProgress). Sin aro, el cluster conserva el\r\n di\u00E1metro del anillo para que el \u00D7 no cambie de sitio. -->\r\n@if (showRing()) {\r\n <div class=\"ius-toast__timer\">\r\n <ius-circular-progress\r\n [duration]=\"duration()\"\r\n [paused]=\"paused()\"\r\n [tone]=\"tone()\"\r\n size=\"medium\"\r\n ariaLabel=\"Cierre autom\u00E1tico\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"closeTpl\" />\r\n </ius-circular-progress>\r\n </div>\r\n} @else if (closable()) {\r\n <div class=\"ius-toast__timer\" data-ring=\"false\">\r\n <ng-container [ngTemplateOutlet]=\"closeTpl\" />\r\n </div>\r\n}\r\n\r\n<ng-template #closeTpl>\r\n @if (closable()) {\r\n <button type=\"button\" class=\"ius-toast__close\" aria-label=\"Cerrar\" (click)=\"closed.emit()\">\r\n <span translate=\"no\" class=\"ius-icon\">close</span>\r\n </button>\r\n }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{--_to-accent: var(--ius-info-600);pointer-events:auto;box-sizing:border-box;width:100%;display:flex;align-items:flex-start;gap:var(--ius-space-sm);padding:var(--ius-space-sm) var(--ius-space-md);background:var(--ius-surface-card);border-radius:var(--ius-radius-lg);box-shadow:inset 2px 0 0 0 var(--_to-accent),var(--ius-elevation-300);font-family:var(--ius-font-body);position:relative}:host([data-tone=info]){--_to-accent: var(--ius-info-600)}:host([data-tone=success]){--_to-accent: var(--ius-success-600)}:host([data-tone=warning]){--_to-accent: var(--ius-warning-600)}:host([data-tone=danger]){--_to-accent: var(--ius-danger-600)}:host([data-tone=neutral]){--_to-accent: var(--ius-neutral-7)}.ius-toast__icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;color:var(--_to-accent);margin-top:1px}.ius-toast__icon .ius-icon{font-size:var(--ius-icon-lg);line-height:1}.ius-toast__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-toast__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold
|
|
11548
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ToastComponent, isStandalone: true, selector: "ius-toast", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, paused: { classPropertyName: "paused", publicName: "paused", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "attr.role": "tone() === 'danger' ? 'alert' : 'status'", "attr.data-tone": "tone()", "attr.data-paused": "paused() ? 'true' : null" }, classAttribute: "ius-toast" }, queries: [{ propertyName: "actionRef", first: true, predicate: IusToastActionDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (iconName()) {\r\n <span class=\"ius-toast__icon\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ iconName() }}</span>\r\n </span>\r\n}\r\n\r\n<div class=\"ius-toast__main\">\r\n @if (title() != null) {\r\n <div class=\"ius-toast__title\">{{ title() }}</div>\r\n }\r\n @if (message() != null) {\r\n <div class=\"ius-toast__msg\">{{ message() }}</div>\r\n }\r\n @if (hasAction()) {\r\n <div class=\"ius-toast__action\">\r\n @if (action(); as tpl) {\r\n <ng-container [ngTemplateOutlet]=\"tpl\" />\r\n }\r\n <ng-content select=\"[iusToastAction]\" />\r\n </div>\r\n }\r\n</div>\r\n\r\n<!-- Cluster del temporizador: el \u00D7 va DENTRO del aro de cuenta regresiva\r\n (contenido central de CircularProgress). Sin aro, el cluster conserva el\r\n di\u00E1metro del anillo para que el \u00D7 no cambie de sitio. -->\r\n@if (showRing()) {\r\n <div class=\"ius-toast__timer\">\r\n <ius-circular-progress\r\n [duration]=\"duration()\"\r\n [paused]=\"paused()\"\r\n [tone]=\"tone()\"\r\n size=\"medium\"\r\n ariaLabel=\"Cierre autom\u00E1tico\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"closeTpl\" />\r\n </ius-circular-progress>\r\n </div>\r\n} @else if (closable()) {\r\n <div class=\"ius-toast__timer\" data-ring=\"false\">\r\n <ng-container [ngTemplateOutlet]=\"closeTpl\" />\r\n </div>\r\n}\r\n\r\n<ng-template #closeTpl>\r\n @if (closable()) {\r\n <button type=\"button\" class=\"ius-toast__close\" aria-label=\"Cerrar\" (click)=\"closed.emit()\">\r\n <span translate=\"no\" class=\"ius-icon\">close</span>\r\n </button>\r\n }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{--_to-accent: var(--ius-info-600);pointer-events:auto;box-sizing:border-box;width:100%;display:flex;align-items:flex-start;gap:var(--ius-space-sm);padding:var(--ius-space-sm) var(--ius-space-md);background:var(--ius-surface-card);border-radius:var(--ius-radius-lg);box-shadow:inset 2px 0 0 0 var(--_to-accent),var(--ius-elevation-300);font-family:var(--ius-font-body);position:relative}:host([data-tone=info]){--_to-accent: var(--ius-info-600)}:host([data-tone=success]){--_to-accent: var(--ius-success-600)}:host([data-tone=warning]){--_to-accent: var(--ius-warning-600)}:host([data-tone=danger]){--_to-accent: var(--ius-danger-600)}:host([data-tone=neutral]){--_to-accent: var(--ius-neutral-7)}.ius-toast__icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;color:var(--_to-accent);margin-top:1px}.ius-toast__icon .ius-icon{font-size:var(--ius-icon-lg);line-height:1}.ius-toast__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-toast__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-toast__msg{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-base);color:var(--ius-text-secondary)}.ius-toast__action{margin-top:var(--ius-space-xs);display:flex;justify-content:flex-end;gap:var(--ius-space-sm);align-items:center}.ius-toast__timer{flex:0 0 auto;margin:-3px -4px 0 0}.ius-toast__timer[data-ring=false]{width:30px;height:30px}.ius-toast__close{width:100%;height:100%;appearance:none;border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--ius-text-tertiary);cursor:pointer;border-radius:50%;transition:color var(--ius-duration-fast) var(--ius-ease-standard),background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-toast__close .ius-icon{font-size:var(--ius-icon-sm);line-height:1}.ius-toast__close:hover{color:var(--ius-text-primary);background:#0000000f}.ius-toast__close:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CircularProgressComponent, selector: "ius-circular-progress", inputs: ["value", "max", "indeterminate", "tone", "size", "showValue", "ariaLabel", "duration", "paused"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
11523
11549
|
}
|
|
11524
11550
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ToastComponent, decorators: [{
|
|
11525
11551
|
type: Component,
|
|
@@ -11530,7 +11556,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
11530
11556
|
'[attr.role]': "tone() === 'danger' ? 'alert' : 'status'",
|
|
11531
11557
|
'[attr.data-tone]': 'tone()',
|
|
11532
11558
|
'[attr.data-paused]': "paused() ? 'true' : null",
|
|
11533
|
-
}, template: "@if (iconName()) {\r\n <span class=\"ius-toast__icon\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ iconName() }}</span>\r\n </span>\r\n}\r\n\r\n<div class=\"ius-toast__main\">\r\n @if (title() != null) {\r\n <div class=\"ius-toast__title\">{{ title() }}</div>\r\n }\r\n @if (message() != null) {\r\n <div class=\"ius-toast__msg\">{{ message() }}</div>\r\n }\r\n @if (hasAction()) {\r\n <div class=\"ius-toast__action\">\r\n @if (action(); as tpl) {\r\n <ng-container [ngTemplateOutlet]=\"tpl\" />\r\n }\r\n <ng-content select=\"[iusToastAction]\" />\r\n </div>\r\n }\r\n</div>\r\n\r\n<!-- Cluster del temporizador: el \u00D7 va DENTRO del aro de cuenta regresiva\r\n (contenido central de CircularProgress). Sin aro, el cluster conserva el\r\n di\u00E1metro del anillo para que el \u00D7 no cambie de sitio. -->\r\n@if (showRing()) {\r\n <div class=\"ius-toast__timer\">\r\n <ius-circular-progress\r\n [duration]=\"duration()\"\r\n [paused]=\"paused()\"\r\n [tone]=\"tone()\"\r\n size=\"medium\"\r\n ariaLabel=\"Cierre autom\u00E1tico\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"closeTpl\" />\r\n </ius-circular-progress>\r\n </div>\r\n} @else if (closable()) {\r\n <div class=\"ius-toast__timer\" data-ring=\"false\">\r\n <ng-container [ngTemplateOutlet]=\"closeTpl\" />\r\n </div>\r\n}\r\n\r\n<ng-template #closeTpl>\r\n @if (closable()) {\r\n <button type=\"button\" class=\"ius-toast__close\" aria-label=\"Cerrar\" (click)=\"closed.emit()\">\r\n <span translate=\"no\" class=\"ius-icon\">close</span>\r\n </button>\r\n }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{--_to-accent: var(--ius-info-600);pointer-events:auto;box-sizing:border-box;width:100%;display:flex;align-items:flex-start;gap:var(--ius-space-sm);padding:var(--ius-space-sm) var(--ius-space-md);background:var(--ius-surface-card);border-radius:var(--ius-radius-lg);box-shadow:inset 2px 0 0 0 var(--_to-accent),var(--ius-elevation-300);font-family:var(--ius-font-body);position:relative}:host([data-tone=info]){--_to-accent: var(--ius-info-600)}:host([data-tone=success]){--_to-accent: var(--ius-success-600)}:host([data-tone=warning]){--_to-accent: var(--ius-warning-600)}:host([data-tone=danger]){--_to-accent: var(--ius-danger-600)}:host([data-tone=neutral]){--_to-accent: var(--ius-neutral-7)}.ius-toast__icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;color:var(--_to-accent);margin-top:1px}.ius-toast__icon .ius-icon{font-size:var(--ius-icon-lg);line-height:1}.ius-toast__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-toast__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold
|
|
11559
|
+
}, template: "@if (iconName()) {\r\n <span class=\"ius-toast__icon\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ iconName() }}</span>\r\n </span>\r\n}\r\n\r\n<div class=\"ius-toast__main\">\r\n @if (title() != null) {\r\n <div class=\"ius-toast__title\">{{ title() }}</div>\r\n }\r\n @if (message() != null) {\r\n <div class=\"ius-toast__msg\">{{ message() }}</div>\r\n }\r\n @if (hasAction()) {\r\n <div class=\"ius-toast__action\">\r\n @if (action(); as tpl) {\r\n <ng-container [ngTemplateOutlet]=\"tpl\" />\r\n }\r\n <ng-content select=\"[iusToastAction]\" />\r\n </div>\r\n }\r\n</div>\r\n\r\n<!-- Cluster del temporizador: el \u00D7 va DENTRO del aro de cuenta regresiva\r\n (contenido central de CircularProgress). Sin aro, el cluster conserva el\r\n di\u00E1metro del anillo para que el \u00D7 no cambie de sitio. -->\r\n@if (showRing()) {\r\n <div class=\"ius-toast__timer\">\r\n <ius-circular-progress\r\n [duration]=\"duration()\"\r\n [paused]=\"paused()\"\r\n [tone]=\"tone()\"\r\n size=\"medium\"\r\n ariaLabel=\"Cierre autom\u00E1tico\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"closeTpl\" />\r\n </ius-circular-progress>\r\n </div>\r\n} @else if (closable()) {\r\n <div class=\"ius-toast__timer\" data-ring=\"false\">\r\n <ng-container [ngTemplateOutlet]=\"closeTpl\" />\r\n </div>\r\n}\r\n\r\n<ng-template #closeTpl>\r\n @if (closable()) {\r\n <button type=\"button\" class=\"ius-toast__close\" aria-label=\"Cerrar\" (click)=\"closed.emit()\">\r\n <span translate=\"no\" class=\"ius-icon\">close</span>\r\n </button>\r\n }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{--_to-accent: var(--ius-info-600);pointer-events:auto;box-sizing:border-box;width:100%;display:flex;align-items:flex-start;gap:var(--ius-space-sm);padding:var(--ius-space-sm) var(--ius-space-md);background:var(--ius-surface-card);border-radius:var(--ius-radius-lg);box-shadow:inset 2px 0 0 0 var(--_to-accent),var(--ius-elevation-300);font-family:var(--ius-font-body);position:relative}:host([data-tone=info]){--_to-accent: var(--ius-info-600)}:host([data-tone=success]){--_to-accent: var(--ius-success-600)}:host([data-tone=warning]){--_to-accent: var(--ius-warning-600)}:host([data-tone=danger]){--_to-accent: var(--ius-danger-600)}:host([data-tone=neutral]){--_to-accent: var(--ius-neutral-7)}.ius-toast__icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;color:var(--_to-accent);margin-top:1px}.ius-toast__icon .ius-icon{font-size:var(--ius-icon-lg);line-height:1}.ius-toast__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-toast__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-toast__msg{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-base);color:var(--ius-text-secondary)}.ius-toast__action{margin-top:var(--ius-space-xs);display:flex;justify-content:flex-end;gap:var(--ius-space-sm);align-items:center}.ius-toast__timer{flex:0 0 auto;margin:-3px -4px 0 0}.ius-toast__timer[data-ring=false]{width:30px;height:30px}.ius-toast__close{width:100%;height:100%;appearance:none;border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--ius-text-tertiary);cursor:pointer;border-radius:50%;transition:color var(--ius-duration-fast) var(--ius-ease-standard),background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-toast__close .ius-icon{font-size:var(--ius-icon-sm);line-height:1}.ius-toast__close:hover{color:var(--ius-text-primary);background:#0000000f}.ius-toast__close:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}\n"] }]
|
|
11534
11560
|
}], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], paused: [{ type: i0.Input, args: [{ isSignal: true, alias: "paused", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], actionRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusToastActionDirective), { isSignal: true }] }] } });
|
|
11535
11561
|
|
|
11536
11562
|
/**
|
|
@@ -11800,7 +11826,7 @@ class ToastViewportComponent {
|
|
|
11800
11826
|
// va SOBRE todo overlay. Los wrappers del CDK se apilan por orden de
|
|
11801
11827
|
// creación, y este viewport se crea al arrancar: sin esto, cualquier
|
|
11802
11828
|
// Modal/Drawer abierto después quedaría encima de los toasts.
|
|
11803
|
-
this.overlayRef.hostElement.style.zIndex = 'var(--ius-z-toast)';
|
|
11829
|
+
this.overlayRef.hostElement.style.zIndex = 'var(--ius-z-toast, 1700)';
|
|
11804
11830
|
this.applyPosition(this.position());
|
|
11805
11831
|
this.overlayRef.attach(new TemplatePortal(this.tpl(), this.viewContainerRef));
|
|
11806
11832
|
}
|
|
@@ -11849,17 +11875,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
11849
11875
|
* <ius-tabs [items]="vistas" [value]="vista()" (valueChange)="vista.set($event)" accent="success" />
|
|
11850
11876
|
* ```
|
|
11851
11877
|
*
|
|
11852
|
-
* **
|
|
11853
|
-
*
|
|
11854
|
-
* -
|
|
11855
|
-
*
|
|
11856
|
-
*
|
|
11857
|
-
*
|
|
11858
|
-
*
|
|
11859
|
-
*
|
|
11860
|
-
* - El prompt dice que el contador activo toma el accent **suave**; el golden
|
|
11861
|
-
* le pone el accent fuerte con texto blanco. Se portó el golden. Pendiente
|
|
11862
|
-
* de diseño — y va ligado a `accentSoft`, ver abajo.
|
|
11878
|
+
* **Resuelto por diseño el 2026-08-28** (T3 del pedido de auditoría), donde
|
|
11879
|
+
* antes había tres divergencias doc-vs-golden:
|
|
11880
|
+
* - El contador **compone Insignia** (`variant="count-soft"`), no un badge
|
|
11881
|
+
* propio: neutro en reposo y con el accent suave al activarse.
|
|
11882
|
+
* - El indicador es **escalonado 2 / 3 / 4 px** según `size` (`--_tb-line`),
|
|
11883
|
+
* que es lo que ya hacía el golden.
|
|
11884
|
+
* - El contador activo va en tono **suave**, que es justo lo que da
|
|
11885
|
+
* `count-soft`; con eso desapareció la variable muerta `--_tb-accent-soft`.
|
|
11863
11886
|
*/
|
|
11864
11887
|
class TabsComponent {
|
|
11865
11888
|
constructor() {
|
|
@@ -11904,15 +11927,6 @@ class TabsComponent {
|
|
|
11904
11927
|
return `var(--ius-${accent}-${accent === 'primary' ? '900' : '700'})`;
|
|
11905
11928
|
}, /* @ts-ignore */
|
|
11906
11929
|
...(ngDevMode ? [{ debugName: "accentStrong" }] : /* istanbul ignore next */ []));
|
|
11907
|
-
/**
|
|
11908
|
-
* Espejo del `accentSoft` del golden, que lo fija como estilo inline… pero su
|
|
11909
|
-
* CSS nunca lo lee. Parece el valor que iba destinado al contador activo (hoy
|
|
11910
|
-
* pintado con el accent fuerte). Se porta igual para no perder el rastro.
|
|
11911
|
-
* Pendiente de diseño: si confirman el tono suave, esta variable pasa a usarse
|
|
11912
|
-
* en `.ius-tabs__tab[data-active='true'] .ius-tabs__count`.
|
|
11913
|
-
*/
|
|
11914
|
-
this.accentSoft = computed(() => `var(--ius-${this.accent()}-100)`, /* @ts-ignore */
|
|
11915
|
-
...(ngDevMode ? [{ debugName: "accentSoft" }] : /* istanbul ignore next */ []));
|
|
11916
11930
|
}
|
|
11917
11931
|
select(item) {
|
|
11918
11932
|
if (item.disabled)
|
|
@@ -11946,18 +11960,17 @@ class TabsComponent {
|
|
|
11946
11960
|
this.tabButtons()[next]?.nativeElement.focus();
|
|
11947
11961
|
}
|
|
11948
11962
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11949
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: TabsComponent, isStandalone: true, selector: "ius-tabs", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { attributes: { "role": "tablist" }, properties: { "attr.data-size": "size()", "attr.data-fullwidth": "fullWidth() ? 'true' : null", "style.--_tb-accent": "accentStrong()"
|
|
11963
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: TabsComponent, isStandalone: true, selector: "ius-tabs", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { attributes: { "role": "tablist" }, properties: { "attr.data-size": "size()", "attr.data-fullwidth": "fullWidth() ? 'true' : null", "style.--_tb-accent": "accentStrong()" }, classAttribute: "ius-tabs" }, viewQueries: [{ propertyName: "tabButtons", predicate: ["tabBtn"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (item of items(); track item.id; let i = $index) {\n <button\n #tabBtn\n type=\"button\"\n role=\"tab\"\n class=\"ius-tabs__tab\"\n [attr.data-size]=\"size()\"\n [attr.data-active]=\"item.id === active() ? 'true' : null\"\n [attr.data-disabled]=\"item.disabled ? 'true' : null\"\n [attr.aria-selected]=\"item.id === active() ? 'true' : 'false'\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n [attr.tabindex]=\"item.id === active() ? 0 : -1\"\n [disabled]=\"!!item.disabled\"\n (click)=\"select(item)\"\n (keydown)=\"onKeydown($event, i)\"\n >\n @if (item.icon) {\n <span translate=\"no\" class=\"ius-icon ius-tabs__icon\">{{ item.icon }}</span>\n }\n\n <span class=\"ius-tabs__label\">{{ item.label }}</span>\n\n <!-- El contador compone Insignia `count-soft` (T3): neutro en reposo y accent\n suave al activarse; ya no es un badge propio de Tabs. -->\n @if (item.count != null) {\n <ius-insignia\n class=\"ius-tabs__count\"\n variant=\"count-soft\"\n [count]=\"item.count\"\n [size]=\"size() === 'small' ? 'small' : 'medium'\"\n [tone]=\"item.id === active() ? accent() : 'neutral'\"\n />\n }\n\n <!-- Tag: al activarse toma el accent de las tabs y pasa a `solid`. -->\n @if (item.tag; as tag) {\n <ius-tag\n [label]=\"tag.label\"\n [tone]=\"item.id === active() ? accent() : (tag.tone ?? 'neutral')\"\n [variant]=\"item.id === active() ? 'solid' : 'soft'\"\n size=\"small\"\n />\n }\n </button>\n}\n", styles: ["@charset \"UTF-8\";:host{--_tb-fs: var(--ius-fs-base);--_tb-py: 11px;--_tb-gap: var(--ius-space-xs);--_tb-icon: var(--ius-icon-md);--_tb-line: 3px;display:flex;align-items:stretch;position:relative;border-bottom:1px solid var(--ius-neutral-3);font-family:var(--ius-font-body);box-sizing:border-box;gap:var(--ius-space-xxs);overflow-x:auto;scrollbar-width:none}:host::-webkit-scrollbar{display:none}:host *,:host *:before,:host *:after{box-sizing:border-box}:host([data-size=small]){--_tb-fs: var(--ius-fs-sm);--_tb-py: 8px;--_tb-gap: var(--ius-space-xs);--_tb-icon: var(--ius-icon-sm);--_tb-line: 2px}:host([data-size=large]){--_tb-fs: var(--ius-fs-base);--_tb-py: 14px;--_tb-gap: var(--ius-space-xs);--_tb-icon: var(--ius-icon-md);--_tb-line: 4px}:host([data-fullwidth=true]){gap:0}:host([data-fullwidth=true]) .ius-tabs__tab{flex:1 1 0;justify-content:center}.ius-tabs__tab{appearance:none;border:0;background:transparent;cursor:pointer;position:relative;display:inline-flex;align-items:center;gap:var(--_tb-gap);padding:var(--_tb-py) var(--ius-space-md);font-size:var(--_tb-fs);line-height:1.3;font-weight:var(--ius-fw-medium, 500);color:var(--ius-text-secondary);white-space:nowrap;transition:color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-tabs__tab:after{content:\"\";position:absolute;left:8px;right:8px;bottom:-1px;height:var(--_tb-line);background:transparent;border-radius:var(--ius-radius-pill);transition:background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-tabs__tab:hover{color:var(--ius-text-primary)}.ius-tabs__tab:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);border-radius:var(--ius-radius-sm)}.ius-tabs__tab[data-active=true]{color:var(--_tb-accent);font-weight:var(--ius-fw-semibold)}.ius-tabs__tab[data-active=true]:after{background:var(--_tb-accent)}.ius-tabs__tab[data-disabled=true]{color:var(--ius-text-disabled);cursor:not-allowed}.ius-tabs__tab[data-disabled=true]:hover{color:var(--ius-text-disabled)}.ius-tabs__icon{font-size:var(--_tb-icon);line-height:1;flex:0 0 auto}.ius-tabs__label{min-width:0}.ius-tabs__count{flex:0 0 auto}\n"], dependencies: [{ kind: "component", type: InsigniaComponent, selector: "ius-insignia", inputs: ["variant", "tone", "size", "label", "count", "max", "ring", "ariaLabel"] }, { kind: "component", type: TagComponent, selector: "ius-tag", inputs: ["label", "role", "tone", "variant", "size", "shape", "icon", "dot", "count", "closable", "closeLabel", "selected", "disabled", "interactive", "state"], outputs: ["clicked", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
11950
11964
|
}
|
|
11951
11965
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TabsComponent, decorators: [{
|
|
11952
11966
|
type: Component,
|
|
11953
|
-
args: [{ selector: 'ius-tabs', standalone: true, imports: [TagComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
11967
|
+
args: [{ selector: 'ius-tabs', standalone: true, imports: [InsigniaComponent, TagComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
11954
11968
|
class: 'ius-tabs',
|
|
11955
11969
|
role: 'tablist',
|
|
11956
11970
|
'[attr.data-size]': 'size()',
|
|
11957
11971
|
'[attr.data-fullwidth]': "fullWidth() ? 'true' : null",
|
|
11958
11972
|
'[style.--_tb-accent]': 'accentStrong()',
|
|
11959
|
-
|
|
11960
|
-
}, template: "@for (item of items(); track item.id; let i = $index) {\r\n <button\r\n #tabBtn\r\n type=\"button\"\r\n role=\"tab\"\r\n class=\"ius-tabs__tab\"\r\n [attr.data-size]=\"size()\"\r\n [attr.data-active]=\"item.id === active() ? 'true' : null\"\r\n [attr.data-disabled]=\"item.disabled ? 'true' : null\"\r\n [attr.aria-selected]=\"item.id === active() ? 'true' : 'false'\"\r\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n [attr.tabindex]=\"item.id === active() ? 0 : -1\"\r\n [disabled]=\"!!item.disabled\"\r\n (click)=\"select(item)\"\r\n (keydown)=\"onKeydown($event, i)\"\r\n >\r\n @if (item.icon) {\r\n <span translate=\"no\" class=\"ius-icon ius-tabs__icon\">{{ item.icon }}</span>\r\n }\r\n\r\n <span class=\"ius-tabs__label\">{{ item.label }}</span>\r\n\r\n @if (item.count != null) {\r\n <span class=\"ius-tabs__count\">{{ item.count }}</span>\r\n }\r\n\r\n <!-- Tag: al activarse toma el accent de las tabs y pasa a `solid`. -->\r\n @if (item.tag; as tag) {\r\n <ius-tag\r\n [label]=\"tag.label\"\r\n [tone]=\"item.id === active() ? accent() : (tag.tone ?? 'neutral')\"\r\n [variant]=\"item.id === active() ? 'solid' : 'soft'\"\r\n size=\"small\"\r\n />\r\n }\r\n </button>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_tb-fs: var(--ius-fs-base);--_tb-py: 11px;--_tb-gap: var(--ius-space-xs);--_tb-icon: var(--ius-icon-md);--_tb-line: 3px;display:flex;align-items:stretch;position:relative;border-bottom:1px solid var(--ius-neutral-3);font-family:var(--ius-font-body);box-sizing:border-box;gap:var(--ius-space-xxs);overflow-x:auto;scrollbar-width:none}:host::-webkit-scrollbar{display:none}:host *,:host *:before,:host *:after{box-sizing:border-box}:host([data-size=small]){--_tb-fs: var(--ius-fs-sm);--_tb-py: 8px;--_tb-gap: var(--ius-space-xs);--_tb-icon: var(--ius-icon-sm);--_tb-line: 2px}:host([data-size=large]){--_tb-fs: var(--ius-fs-base);--_tb-py: 14px;--_tb-gap: var(--ius-space-xs);--_tb-icon: var(--ius-icon-md);--_tb-line: 4px}:host([data-fullwidth=true]){gap:0}:host([data-fullwidth=true]) .ius-tabs__tab{flex:1 1 0;justify-content:center}.ius-tabs__tab{appearance:none;border:0;background:transparent;cursor:pointer;position:relative;display:inline-flex;align-items:center;gap:var(--_tb-gap);padding:var(--_tb-py) var(--ius-space-md);font-size:var(--_tb-fs);line-height:1.3;font-weight:var(--ius-fw-medium, 500);color:var(--ius-text-secondary);white-space:nowrap;transition:color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-tabs__tab:after{content:\"\";position:absolute;left:8px;right:8px;bottom:-1px;height:var(--_tb-line);background:transparent;border-radius:var(--ius-radius-pill);transition:background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-tabs__tab:hover{color:var(--ius-text-primary)}.ius-tabs__tab:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);border-radius:var(--ius-radius-sm)}.ius-tabs__tab[data-active=true]{color:var(--_tb-accent);font-weight:var(--ius-fw-semibold, 600)}.ius-tabs__tab[data-active=true]:after{background:var(--_tb-accent)}.ius-tabs__tab[data-disabled=true]{color:var(--ius-text-disabled);cursor:not-allowed}.ius-tabs__tab[data-disabled=true]:hover{color:var(--ius-text-disabled)}.ius-tabs__icon{font-size:var(--_tb-icon);line-height:1;flex:0 0 auto}.ius-tabs__label{min-width:0}.ius-tabs__count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 var(--ius-space-xs);border-radius:var(--ius-radius-pill);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-semibold, 600);line-height:1;font-variant-numeric:tabular-nums;background:var(--ius-neutral-2);color:var(--ius-text-secondary);flex:0 0 auto}.ius-tabs__tab[data-active=true] .ius-tabs__count{background:var(--_tb-accent);color:var(--ius-neutral-white)}.ius-tabs__tab[data-size=small] .ius-tabs__count{min-width:18px;height:18px}\n"] }]
|
|
11973
|
+
}, template: "@for (item of items(); track item.id; let i = $index) {\n <button\n #tabBtn\n type=\"button\"\n role=\"tab\"\n class=\"ius-tabs__tab\"\n [attr.data-size]=\"size()\"\n [attr.data-active]=\"item.id === active() ? 'true' : null\"\n [attr.data-disabled]=\"item.disabled ? 'true' : null\"\n [attr.aria-selected]=\"item.id === active() ? 'true' : 'false'\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n [attr.tabindex]=\"item.id === active() ? 0 : -1\"\n [disabled]=\"!!item.disabled\"\n (click)=\"select(item)\"\n (keydown)=\"onKeydown($event, i)\"\n >\n @if (item.icon) {\n <span translate=\"no\" class=\"ius-icon ius-tabs__icon\">{{ item.icon }}</span>\n }\n\n <span class=\"ius-tabs__label\">{{ item.label }}</span>\n\n <!-- El contador compone Insignia `count-soft` (T3): neutro en reposo y accent\n suave al activarse; ya no es un badge propio de Tabs. -->\n @if (item.count != null) {\n <ius-insignia\n class=\"ius-tabs__count\"\n variant=\"count-soft\"\n [count]=\"item.count\"\n [size]=\"size() === 'small' ? 'small' : 'medium'\"\n [tone]=\"item.id === active() ? accent() : 'neutral'\"\n />\n }\n\n <!-- Tag: al activarse toma el accent de las tabs y pasa a `solid`. -->\n @if (item.tag; as tag) {\n <ius-tag\n [label]=\"tag.label\"\n [tone]=\"item.id === active() ? accent() : (tag.tone ?? 'neutral')\"\n [variant]=\"item.id === active() ? 'solid' : 'soft'\"\n size=\"small\"\n />\n }\n </button>\n}\n", styles: ["@charset \"UTF-8\";:host{--_tb-fs: var(--ius-fs-base);--_tb-py: 11px;--_tb-gap: var(--ius-space-xs);--_tb-icon: var(--ius-icon-md);--_tb-line: 3px;display:flex;align-items:stretch;position:relative;border-bottom:1px solid var(--ius-neutral-3);font-family:var(--ius-font-body);box-sizing:border-box;gap:var(--ius-space-xxs);overflow-x:auto;scrollbar-width:none}:host::-webkit-scrollbar{display:none}:host *,:host *:before,:host *:after{box-sizing:border-box}:host([data-size=small]){--_tb-fs: var(--ius-fs-sm);--_tb-py: 8px;--_tb-gap: var(--ius-space-xs);--_tb-icon: var(--ius-icon-sm);--_tb-line: 2px}:host([data-size=large]){--_tb-fs: var(--ius-fs-base);--_tb-py: 14px;--_tb-gap: var(--ius-space-xs);--_tb-icon: var(--ius-icon-md);--_tb-line: 4px}:host([data-fullwidth=true]){gap:0}:host([data-fullwidth=true]) .ius-tabs__tab{flex:1 1 0;justify-content:center}.ius-tabs__tab{appearance:none;border:0;background:transparent;cursor:pointer;position:relative;display:inline-flex;align-items:center;gap:var(--_tb-gap);padding:var(--_tb-py) var(--ius-space-md);font-size:var(--_tb-fs);line-height:1.3;font-weight:var(--ius-fw-medium, 500);color:var(--ius-text-secondary);white-space:nowrap;transition:color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-tabs__tab:after{content:\"\";position:absolute;left:8px;right:8px;bottom:-1px;height:var(--_tb-line);background:transparent;border-radius:var(--ius-radius-pill);transition:background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-tabs__tab:hover{color:var(--ius-text-primary)}.ius-tabs__tab:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);border-radius:var(--ius-radius-sm)}.ius-tabs__tab[data-active=true]{color:var(--_tb-accent);font-weight:var(--ius-fw-semibold)}.ius-tabs__tab[data-active=true]:after{background:var(--_tb-accent)}.ius-tabs__tab[data-disabled=true]{color:var(--ius-text-disabled);cursor:not-allowed}.ius-tabs__tab[data-disabled=true]:hover{color:var(--ius-text-disabled)}.ius-tabs__icon{font-size:var(--_tb-icon);line-height:1;flex:0 0 auto}.ius-tabs__label{min-width:0}.ius-tabs__count{flex:0 0 auto}\n"] }]
|
|
11961
11974
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], accent: [{ type: i0.Input, args: [{ isSignal: true, alias: "accent", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], tabButtons: [{ type: i0.ViewChildren, args: ['tabBtn', { isSignal: true }] }] } });
|
|
11962
11975
|
|
|
11963
11976
|
/** Normaliza `open`/`defaultOpen` a lista; en exclusivo se queda con el primero. */
|
|
@@ -11991,15 +12004,15 @@ let uid = 0;
|
|
|
11991
12004
|
* No lo uses para navegar entre páginas (Tabs/Breadcrumb) ni para esconder
|
|
11992
12005
|
* acciones críticas.
|
|
11993
12006
|
*
|
|
11994
|
-
*
|
|
11995
|
-
*
|
|
11996
|
-
*
|
|
11997
|
-
*
|
|
11998
|
-
*
|
|
11999
|
-
*
|
|
12000
|
-
*
|
|
12001
|
-
*
|
|
12002
|
-
* 2026-08-
|
|
12007
|
+
* **`inert` en el panel cerrado.** El panel NO se desmonta (es lo que permite
|
|
12008
|
+
* animar la altura) y colapsarlo solo con `grid-template-rows: 0fr` +
|
|
12009
|
+
* `overflow: hidden` lo esconde de la vista pero NO lo saca del orden de
|
|
12010
|
+
* tabulación, así que con Tab se llegaba a campos invisibles — justo en el caso
|
|
12011
|
+
* de uso principal, formularios dentro de un Drawer. El panel cerrado lleva
|
|
12012
|
+
* `inert`, sin ningún efecto visual. Contrapartida aceptada: el contenido
|
|
12013
|
+
* cerrado tampoco se anuncia a lectores de pantalla, que es lo coherente con
|
|
12014
|
+
* «cerrado = oculto». Salió de este equipo el 2026-08-27 y diseño lo adoptó en
|
|
12015
|
+
* `Accordion.jsx` el 2026-08-28 (T6): ya es paridad con el golden.
|
|
12003
12016
|
*/
|
|
12004
12017
|
class AccordionComponent {
|
|
12005
12018
|
constructor() {
|