@litigiovirtual/ius-design-components 2.1.7 → 2.1.9
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.
- package/README.md +14 -14
- package/fesm2022/litigiovirtual-ius-design-components-utils.mjs.map +1 -1
- package/fesm2022/litigiovirtual-ius-design-components.mjs +350 -154
- package/fesm2022/litigiovirtual-ius-design-components.mjs.map +1 -1
- package/package.json +2 -2
- package/types/litigiovirtual-ius-design-components.d.ts +293 -144
|
@@ -137,11 +137,11 @@ class ButtonComponent {
|
|
|
137
137
|
this.timer = setTimeout(() => this.dynPhase.set('idle'), 800);
|
|
138
138
|
}
|
|
139
139
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
140
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ButtonComponent, isStandalone: true, selector: "ius-button", inputs: { variant: "variant", label: "label", prefixIcon: "prefixIcon", sufixIcon: "sufixIcon", dynamic: ["dynamic", "dynamic", booleanAttribute], loading: ["loading", "loading", booleanAttribute], status: "status", disabled: ["disabled", "disabled", booleanAttribute], pressed: ["pressed", "pressed", booleanAttribute], fullWidth: ["fullWidth", "fullWidth", booleanAttribute], type: "type", ariaLabel: "ariaLabel", action: "action", size: "size" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n class=\"ius-btn\"\n [attr.type]=\"type\"\n [attr.data-variant]=\"variant\"\n [attr.data-size]=\"size ?? null\"\n [style.--_btn-px]=\"preset?.px ?? null\"\n [style.--_btn-py]=\"preset?.py ?? null\"\n [style.--_btn-fs]=\"preset?.fs ?? null\"\n [style.--_btn-lh]=\"preset?.lh ?? null\"\n [style.--_btn-icon]=\"preset?.icon ?? null\"\n [style.--_btn-gap]=\"preset?.gap ?? null\"\n [attr.data-loading]=\"isLoading ? 'true' : null\"\n [attr.data-status]=\"statusValue\"\n [attr.data-pressed]=\"pressed ? 'true' : null\"\n [attr.data-full-width]=\"fullWidth ? 'true' : null\"\n [attr.aria-label]=\"ariaLabel ?? null\"\n [attr.aria-disabled]=\"isDisabled ? 'true' : null\"\n [disabled]=\"isDisabled\"\n (click)=\"handleClick($event)\"\n>\n @if (isLoading) {\n <span class=\"ius-btn__spin\" aria-hidden=\"true\"></span>\n }\n @if (statusValue === 'success') {\n <span translate=\"no\" class=\"ius-icon ius-btn__icon-left\" aria-hidden=\"true\">check_circle</span>\n } @else if (statusValue === 'error') {\n <span translate=\"no\" class=\"ius-icon ius-btn__icon-left\" aria-hidden=\"true\">error</span>\n } @else if (prefixIcon) {\n <span translate=\"no\" class=\"ius-icon ius-btn__icon-left\" aria-hidden=\"true\">{{ prefixIcon }}</span>\n }\n @if (!isLoading) {\n <span class=\"ius-btn__label\">\n @if (label != null) {\n {{ label }}\n } @else {\n <ng-content />\n }\n </span>\n }\n @if (!statusValue && !isLoading && sufixIcon) {\n <span translate=\"no\" class=\"ius-icon ius-btn__icon-right\" aria-hidden=\"true\">{{ sufixIcon }}</span>\n }\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:contents}.ius-btn{-webkit-user-select:none;user-select:none;--_btn-bg: var(--ius-primary-900);--_btn-bg-hover: var(--ius-primary-500);--_btn-bg-pressed: var(--ius-primary-600);--_btn-bg-disabled: var(--ius-neutral-2);--_btn-fg: var(--ius-neutral-white);--_btn-fg-hover: var(--ius-neutral-white);--_btn-fg-pressed: var(--ius-neutral-white);--_btn-fg-disabled: var(--ius-text-disabled);--_btn-border: transparent;--_btn-border-hover: transparent;--_btn-border-pressed: transparent;--_btn-border-disabled: transparent;display:inline-flex;align-items:center;justify-content:center;gap:var(--_btn-gap, var(--ius-space-xxs));padding:var(--_btn-py, var(--ius-space-sm)) var(--_btn-px, var(--ius-space-lg));border-radius:var(--ius-radius-lg);border:1.5px solid var(--_btn-border);background:var(--_btn-bg);color:var(--_btn-fg);font-family:var(--ius-font-body);font-weight:var(--ius-fw-medium);font-size:var(--_btn-fs, 14px);line-height:var(--_btn-lh, 20px);letter-spacing:.01em;cursor:pointer;white-space:nowrap;text-decoration:none;outline:none;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);-webkit-tap-highlight-color:transparent}.ius-btn[data-full-width=true]{width:100%}.ius-btn:hover:not(:disabled):not([data-status]):not([data-loading=true]),:host([data-force=hover]) .ius-btn:not(:disabled):not([data-status]):not([data-loading=true]){background:var(--_btn-bg-hover);color:var(--_btn-fg-hover);border-color:var(--_btn-border-hover)}.ius-btn:active:not(:disabled):not([data-status]):not([data-loading=true]),.ius-btn[data-pressed=true]:not(:disabled):not([data-status]):not([data-loading=true]),:host([data-force=pressed]) .ius-btn:not(:disabled):not([data-status]):not([data-loading=true]){background:var(--_btn-bg-pressed);color:var(--_btn-fg-pressed);border-color:var(--_btn-border-pressed)}.ius-btn:focus-visible{box-shadow:var(--ius-focus-ring)}.ius-btn:disabled,.ius-btn[aria-disabled=true]{background:var(--_btn-bg-disabled);color:var(--_btn-fg-disabled);border-color:var(--_btn-border-disabled);cursor:not-allowed}.ius-btn:not([data-size]){--_btn-px: 24px;--_btn-py: 8px;--_btn-fs: var(--ius-fs-base);--_btn-lh: var(--ius-lh-base);--_btn-icon: var(--ius-icon-md);--_btn-gap: var(--ius-space-xxs)}@container style(--ius-control-size: small){.ius-btn:not([data-size]){--_btn-px: 8px;--_btn-py: 6px;--_btn-fs: var(--ius-fs-sm);--_btn-lh: var(--ius-lh-sm);--_btn-icon: var(--ius-icon-sm);--_btn-gap: var(--ius-space-xxs)}}@container style(--ius-control-size: large){.ius-btn:not([data-size]){--_btn-px: 24px;--_btn-py: 10px;--_btn-fs: var(--ius-fs-lg);--_btn-lh: var(--ius-lh-lg);--_btn-icon: var(--ius-icon-md);--_btn-gap: var(--ius-space-xxs)}}.ius-btn[data-variant=primary]{--_btn-bg: var(--ius-primary-900);--_btn-bg-hover: var(--ius-primary-500);--_btn-bg-pressed: var(--ius-primary-600)}.ius-btn[data-variant=outline]{--_btn-bg: var(--ius-neutral-white);--_btn-bg-hover: var(--ius-success-100);--_btn-bg-pressed: var(--ius-success-600);--_btn-bg-disabled: var(--ius-neutral-1);--_btn-fg: var(--ius-success-600);--_btn-fg-hover: var(--ius-success-600);--_btn-fg-pressed: var(--ius-neutral-white);--_btn-fg-disabled: var(--ius-text-disabled);--_btn-border: var(--ius-success-500);--_btn-border-hover: var(--ius-success-500);--_btn-border-pressed: var(--ius-success-600);--_btn-border-disabled: var(--ius-neutral-4)}.ius-btn[data-variant=secondary]{--_btn-bg: var(--ius-neutral-3);--_btn-bg-hover: var(--ius-neutral-6);--_btn-bg-pressed: var(--ius-primary-600);--_btn-bg-disabled: var(--ius-neutral-2);--_btn-fg: var(--ius-text-primary);--_btn-fg-hover: var(--ius-neutral-white);--_btn-fg-pressed: var(--ius-neutral-white);--_btn-fg-disabled: var(--ius-text-disabled)}.ius-btn[data-variant=tertiary]{--_btn-bg: transparent;--_btn-bg-hover: var(--ius-neutral-4);--_btn-bg-pressed: var(--ius-primary-900);--_btn-bg-disabled: transparent;--_btn-fg: var(--ius-text-primary);--_btn-fg-hover: var(--ius-text-primary);--_btn-fg-pressed: var(--ius-neutral-white);--_btn-fg-disabled: var(--ius-text-disabled)}.ius-btn[data-variant=danger]{--_btn-bg: var(--ius-danger-600);--_btn-bg-hover: var(--ius-danger-500);--_btn-bg-pressed: var(--ius-danger-700);--_btn-bg-disabled: var(--ius-neutral-2);--_btn-fg: var(--ius-neutral-white);--_btn-fg-hover: var(--ius-neutral-white);--_btn-fg-pressed: var(--ius-neutral-white)}.ius-btn[data-loading=true]{background:var(--ius-primary-600);color:var(--ius-neutral-white);border-color:transparent;cursor:progress}.ius-btn[data-status=success]{background:var(--ius-success-600);color:var(--ius-neutral-white);border-color:transparent;cursor:default}.ius-btn[data-status=error]{background:var(--ius-danger-600);color:var(--ius-neutral-white);border-color:transparent;cursor:default}.ius-btn__spin{display:inline-block;width:1em;height:1em;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:ius-btn-spin .72s linear infinite}@keyframes ius-btn-spin{to{transform:rotate(360deg)}}.ius-btn[data-status] .ius-btn__icon-left,.ius-btn[data-status] .ius-btn__icon-right,.ius-btn[data-loading=true] .ius-btn__icon-left,.ius-btn[data-loading=true] .ius-btn__icon-right{display:none}.ius-btn .ius-btn__icon-left,.ius-btn .ius-btn__icon-right{font-size:var(--_btn-icon, 20px);line-height:1}.ius-btn__label{line-height:inherit}.ius-btn__label:empty{display:none}.ius-btn[data-loading=true] .ius-btn__label{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
140
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ButtonComponent, isStandalone: true, selector: "ius-button", inputs: { variant: "variant", label: "label", prefixIcon: "prefixIcon", sufixIcon: "sufixIcon", dynamic: ["dynamic", "dynamic", booleanAttribute], loading: ["loading", "loading", booleanAttribute], status: "status", disabled: ["disabled", "disabled", booleanAttribute], pressed: ["pressed", "pressed", booleanAttribute], fullWidth: ["fullWidth", "fullWidth", booleanAttribute], type: "type", ariaLabel: "ariaLabel", action: "action", size: "size" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\r\n class=\"ius-btn\"\r\n [attr.type]=\"type\"\r\n [attr.data-variant]=\"variant\"\r\n [attr.data-size]=\"size ?? null\"\r\n [style.--_btn-px]=\"preset?.px ?? null\"\r\n [style.--_btn-py]=\"preset?.py ?? null\"\r\n [style.--_btn-fs]=\"preset?.fs ?? null\"\r\n [style.--_btn-lh]=\"preset?.lh ?? null\"\r\n [style.--_btn-icon]=\"preset?.icon ?? null\"\r\n [style.--_btn-gap]=\"preset?.gap ?? null\"\r\n [attr.data-loading]=\"isLoading ? 'true' : null\"\r\n [attr.data-status]=\"statusValue\"\r\n [attr.data-pressed]=\"pressed ? 'true' : null\"\r\n [attr.data-full-width]=\"fullWidth ? 'true' : null\"\r\n [attr.aria-label]=\"ariaLabel ?? null\"\r\n [attr.aria-disabled]=\"isDisabled ? 'true' : null\"\r\n [disabled]=\"isDisabled\"\r\n (click)=\"handleClick($event)\"\r\n>\r\n @if (isLoading) {\r\n <span class=\"ius-btn__spin\" aria-hidden=\"true\"></span>\r\n }\r\n @if (statusValue === 'success') {\r\n <span translate=\"no\" class=\"ius-icon ius-btn__icon-left\" aria-hidden=\"true\">check_circle</span>\r\n } @else if (statusValue === 'error') {\r\n <span translate=\"no\" class=\"ius-icon ius-btn__icon-left\" aria-hidden=\"true\">error</span>\r\n } @else if (prefixIcon) {\r\n <span translate=\"no\" class=\"ius-icon ius-btn__icon-left\" aria-hidden=\"true\">{{ prefixIcon }}</span>\r\n }\r\n @if (!isLoading) {\r\n <span class=\"ius-btn__label\">\r\n @if (label != null) {\r\n {{ label }}\r\n } @else {\r\n <ng-content />\r\n }\r\n </span>\r\n }\r\n @if (!statusValue && !isLoading && sufixIcon) {\r\n <span translate=\"no\" class=\"ius-icon ius-btn__icon-right\" aria-hidden=\"true\">{{ sufixIcon }}</span>\r\n }\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}.ius-btn{-webkit-user-select:none;user-select:none;--_btn-bg: var(--ius-primary-900);--_btn-bg-hover: var(--ius-primary-500);--_btn-bg-pressed: var(--ius-primary-600);--_btn-bg-disabled: var(--ius-neutral-2);--_btn-fg: var(--ius-neutral-white);--_btn-fg-hover: var(--ius-neutral-white);--_btn-fg-pressed: var(--ius-neutral-white);--_btn-fg-disabled: var(--ius-text-disabled);--_btn-border: transparent;--_btn-border-hover: transparent;--_btn-border-pressed: transparent;--_btn-border-disabled: transparent;display:inline-flex;align-items:center;justify-content:center;gap:var(--_btn-gap, var(--ius-space-xxs));padding:var(--_btn-py, var(--ius-space-sm)) var(--_btn-px, var(--ius-space-lg));border-radius:var(--ius-radius-lg);border:1.5px solid var(--_btn-border);background:var(--_btn-bg);color:var(--_btn-fg);font-family:var(--ius-font-body);font-weight:var(--ius-fw-medium);font-size:var(--_btn-fs, 14px);line-height:var(--_btn-lh, 20px);letter-spacing:.01em;cursor:pointer;white-space:nowrap;text-decoration:none;outline:none;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);-webkit-tap-highlight-color:transparent}.ius-btn[data-full-width=true]{width:100%}.ius-btn:hover:not(:disabled):not([data-status]):not([data-loading=true]),:host([data-force=hover]) .ius-btn:not(:disabled):not([data-status]):not([data-loading=true]){background:var(--_btn-bg-hover);color:var(--_btn-fg-hover);border-color:var(--_btn-border-hover)}.ius-btn:active:not(:disabled):not([data-status]):not([data-loading=true]),.ius-btn[data-pressed=true]:not(:disabled):not([data-status]):not([data-loading=true]),:host([data-force=pressed]) .ius-btn:not(:disabled):not([data-status]):not([data-loading=true]){background:var(--_btn-bg-pressed);color:var(--_btn-fg-pressed);border-color:var(--_btn-border-pressed)}.ius-btn:focus-visible{box-shadow:var(--ius-focus-ring)}.ius-btn:disabled,.ius-btn[aria-disabled=true]{background:var(--_btn-bg-disabled);color:var(--_btn-fg-disabled);border-color:var(--_btn-border-disabled);cursor:not-allowed}.ius-btn:not([data-size]){--_btn-px: 24px;--_btn-py: 8px;--_btn-fs: var(--ius-fs-base);--_btn-lh: var(--ius-lh-base);--_btn-icon: var(--ius-icon-md);--_btn-gap: var(--ius-space-xxs)}@container style(--ius-control-size: small){.ius-btn:not([data-size]){--_btn-px: 8px;--_btn-py: 6px;--_btn-fs: var(--ius-fs-sm);--_btn-lh: var(--ius-lh-sm);--_btn-icon: var(--ius-icon-sm);--_btn-gap: var(--ius-space-xxs)}}@container style(--ius-control-size: large){.ius-btn:not([data-size]){--_btn-px: 24px;--_btn-py: 10px;--_btn-fs: var(--ius-fs-lg);--_btn-lh: var(--ius-lh-lg);--_btn-icon: var(--ius-icon-md);--_btn-gap: var(--ius-space-xxs)}}.ius-btn[data-variant=primary]{--_btn-bg: var(--ius-primary-900);--_btn-bg-hover: var(--ius-primary-500);--_btn-bg-pressed: var(--ius-primary-600)}.ius-btn[data-variant=outline]{--_btn-bg: var(--ius-neutral-white);--_btn-bg-hover: var(--ius-success-100);--_btn-bg-pressed: var(--ius-success-600);--_btn-bg-disabled: var(--ius-neutral-1);--_btn-fg: var(--ius-success-600);--_btn-fg-hover: var(--ius-success-600);--_btn-fg-pressed: var(--ius-neutral-white);--_btn-fg-disabled: var(--ius-text-disabled);--_btn-border: var(--ius-success-500);--_btn-border-hover: var(--ius-success-500);--_btn-border-pressed: var(--ius-success-600);--_btn-border-disabled: var(--ius-neutral-4)}.ius-btn[data-variant=secondary]{--_btn-bg: var(--ius-neutral-3);--_btn-bg-hover: var(--ius-neutral-6);--_btn-bg-pressed: var(--ius-primary-600);--_btn-bg-disabled: var(--ius-neutral-2);--_btn-fg: var(--ius-text-primary);--_btn-fg-hover: var(--ius-neutral-white);--_btn-fg-pressed: var(--ius-neutral-white);--_btn-fg-disabled: var(--ius-text-disabled)}.ius-btn[data-variant=tertiary]{--_btn-bg: transparent;--_btn-bg-hover: var(--ius-neutral-4);--_btn-bg-pressed: var(--ius-primary-900);--_btn-bg-disabled: transparent;--_btn-fg: var(--ius-text-primary);--_btn-fg-hover: var(--ius-text-primary);--_btn-fg-pressed: var(--ius-neutral-white);--_btn-fg-disabled: var(--ius-text-disabled)}.ius-btn[data-variant=danger]{--_btn-bg: var(--ius-danger-600);--_btn-bg-hover: var(--ius-danger-500);--_btn-bg-pressed: var(--ius-danger-700);--_btn-bg-disabled: var(--ius-neutral-2);--_btn-fg: var(--ius-neutral-white);--_btn-fg-hover: var(--ius-neutral-white);--_btn-fg-pressed: var(--ius-neutral-white)}.ius-btn[data-loading=true]{background:var(--ius-primary-600);color:var(--ius-neutral-white);border-color:transparent;cursor:progress}.ius-btn[data-status=success]{background:var(--ius-success-600);color:var(--ius-neutral-white);border-color:transparent;cursor:default}.ius-btn[data-status=error]{background:var(--ius-danger-600);color:var(--ius-neutral-white);border-color:transparent;cursor:default}.ius-btn__spin{display:inline-block;width:1em;height:1em;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:ius-btn-spin .72s linear infinite}@keyframes ius-btn-spin{to{transform:rotate(360deg)}}.ius-btn[data-status] .ius-btn__icon-left,.ius-btn[data-status] .ius-btn__icon-right,.ius-btn[data-loading=true] .ius-btn__icon-left,.ius-btn[data-loading=true] .ius-btn__icon-right{display:none}.ius-btn .ius-btn__icon-left,.ius-btn .ius-btn__icon-right{font-size:var(--_btn-icon, 20px);line-height:1}.ius-btn__label{line-height:inherit}.ius-btn__label:empty{display:none}.ius-btn[data-loading=true] .ius-btn__label{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
141
141
|
}
|
|
142
142
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
143
143
|
type: Component,
|
|
144
|
-
args: [{ selector: 'ius-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n class=\"ius-btn\"\n [attr.type]=\"type\"\n [attr.data-variant]=\"variant\"\n [attr.data-size]=\"size ?? null\"\n [style.--_btn-px]=\"preset?.px ?? null\"\n [style.--_btn-py]=\"preset?.py ?? null\"\n [style.--_btn-fs]=\"preset?.fs ?? null\"\n [style.--_btn-lh]=\"preset?.lh ?? null\"\n [style.--_btn-icon]=\"preset?.icon ?? null\"\n [style.--_btn-gap]=\"preset?.gap ?? null\"\n [attr.data-loading]=\"isLoading ? 'true' : null\"\n [attr.data-status]=\"statusValue\"\n [attr.data-pressed]=\"pressed ? 'true' : null\"\n [attr.data-full-width]=\"fullWidth ? 'true' : null\"\n [attr.aria-label]=\"ariaLabel ?? null\"\n [attr.aria-disabled]=\"isDisabled ? 'true' : null\"\n [disabled]=\"isDisabled\"\n (click)=\"handleClick($event)\"\n>\n @if (isLoading) {\n <span class=\"ius-btn__spin\" aria-hidden=\"true\"></span>\n }\n @if (statusValue === 'success') {\n <span translate=\"no\" class=\"ius-icon ius-btn__icon-left\" aria-hidden=\"true\">check_circle</span>\n } @else if (statusValue === 'error') {\n <span translate=\"no\" class=\"ius-icon ius-btn__icon-left\" aria-hidden=\"true\">error</span>\n } @else if (prefixIcon) {\n <span translate=\"no\" class=\"ius-icon ius-btn__icon-left\" aria-hidden=\"true\">{{ prefixIcon }}</span>\n }\n @if (!isLoading) {\n <span class=\"ius-btn__label\">\n @if (label != null) {\n {{ label }}\n } @else {\n <ng-content />\n }\n </span>\n }\n @if (!statusValue && !isLoading && sufixIcon) {\n <span translate=\"no\" class=\"ius-icon ius-btn__icon-right\" aria-hidden=\"true\">{{ sufixIcon }}</span>\n }\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:contents}.ius-btn{-webkit-user-select:none;user-select:none;--_btn-bg: var(--ius-primary-900);--_btn-bg-hover: var(--ius-primary-500);--_btn-bg-pressed: var(--ius-primary-600);--_btn-bg-disabled: var(--ius-neutral-2);--_btn-fg: var(--ius-neutral-white);--_btn-fg-hover: var(--ius-neutral-white);--_btn-fg-pressed: var(--ius-neutral-white);--_btn-fg-disabled: var(--ius-text-disabled);--_btn-border: transparent;--_btn-border-hover: transparent;--_btn-border-pressed: transparent;--_btn-border-disabled: transparent;display:inline-flex;align-items:center;justify-content:center;gap:var(--_btn-gap, var(--ius-space-xxs));padding:var(--_btn-py, var(--ius-space-sm)) var(--_btn-px, var(--ius-space-lg));border-radius:var(--ius-radius-lg);border:1.5px solid var(--_btn-border);background:var(--_btn-bg);color:var(--_btn-fg);font-family:var(--ius-font-body);font-weight:var(--ius-fw-medium);font-size:var(--_btn-fs, 14px);line-height:var(--_btn-lh, 20px);letter-spacing:.01em;cursor:pointer;white-space:nowrap;text-decoration:none;outline:none;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);-webkit-tap-highlight-color:transparent}.ius-btn[data-full-width=true]{width:100%}.ius-btn:hover:not(:disabled):not([data-status]):not([data-loading=true]),:host([data-force=hover]) .ius-btn:not(:disabled):not([data-status]):not([data-loading=true]){background:var(--_btn-bg-hover);color:var(--_btn-fg-hover);border-color:var(--_btn-border-hover)}.ius-btn:active:not(:disabled):not([data-status]):not([data-loading=true]),.ius-btn[data-pressed=true]:not(:disabled):not([data-status]):not([data-loading=true]),:host([data-force=pressed]) .ius-btn:not(:disabled):not([data-status]):not([data-loading=true]){background:var(--_btn-bg-pressed);color:var(--_btn-fg-pressed);border-color:var(--_btn-border-pressed)}.ius-btn:focus-visible{box-shadow:var(--ius-focus-ring)}.ius-btn:disabled,.ius-btn[aria-disabled=true]{background:var(--_btn-bg-disabled);color:var(--_btn-fg-disabled);border-color:var(--_btn-border-disabled);cursor:not-allowed}.ius-btn:not([data-size]){--_btn-px: 24px;--_btn-py: 8px;--_btn-fs: var(--ius-fs-base);--_btn-lh: var(--ius-lh-base);--_btn-icon: var(--ius-icon-md);--_btn-gap: var(--ius-space-xxs)}@container style(--ius-control-size: small){.ius-btn:not([data-size]){--_btn-px: 8px;--_btn-py: 6px;--_btn-fs: var(--ius-fs-sm);--_btn-lh: var(--ius-lh-sm);--_btn-icon: var(--ius-icon-sm);--_btn-gap: var(--ius-space-xxs)}}@container style(--ius-control-size: large){.ius-btn:not([data-size]){--_btn-px: 24px;--_btn-py: 10px;--_btn-fs: var(--ius-fs-lg);--_btn-lh: var(--ius-lh-lg);--_btn-icon: var(--ius-icon-md);--_btn-gap: var(--ius-space-xxs)}}.ius-btn[data-variant=primary]{--_btn-bg: var(--ius-primary-900);--_btn-bg-hover: var(--ius-primary-500);--_btn-bg-pressed: var(--ius-primary-600)}.ius-btn[data-variant=outline]{--_btn-bg: var(--ius-neutral-white);--_btn-bg-hover: var(--ius-success-100);--_btn-bg-pressed: var(--ius-success-600);--_btn-bg-disabled: var(--ius-neutral-1);--_btn-fg: var(--ius-success-600);--_btn-fg-hover: var(--ius-success-600);--_btn-fg-pressed: var(--ius-neutral-white);--_btn-fg-disabled: var(--ius-text-disabled);--_btn-border: var(--ius-success-500);--_btn-border-hover: var(--ius-success-500);--_btn-border-pressed: var(--ius-success-600);--_btn-border-disabled: var(--ius-neutral-4)}.ius-btn[data-variant=secondary]{--_btn-bg: var(--ius-neutral-3);--_btn-bg-hover: var(--ius-neutral-6);--_btn-bg-pressed: var(--ius-primary-600);--_btn-bg-disabled: var(--ius-neutral-2);--_btn-fg: var(--ius-text-primary);--_btn-fg-hover: var(--ius-neutral-white);--_btn-fg-pressed: var(--ius-neutral-white);--_btn-fg-disabled: var(--ius-text-disabled)}.ius-btn[data-variant=tertiary]{--_btn-bg: transparent;--_btn-bg-hover: var(--ius-neutral-4);--_btn-bg-pressed: var(--ius-primary-900);--_btn-bg-disabled: transparent;--_btn-fg: var(--ius-text-primary);--_btn-fg-hover: var(--ius-text-primary);--_btn-fg-pressed: var(--ius-neutral-white);--_btn-fg-disabled: var(--ius-text-disabled)}.ius-btn[data-variant=danger]{--_btn-bg: var(--ius-danger-600);--_btn-bg-hover: var(--ius-danger-500);--_btn-bg-pressed: var(--ius-danger-700);--_btn-bg-disabled: var(--ius-neutral-2);--_btn-fg: var(--ius-neutral-white);--_btn-fg-hover: var(--ius-neutral-white);--_btn-fg-pressed: var(--ius-neutral-white)}.ius-btn[data-loading=true]{background:var(--ius-primary-600);color:var(--ius-neutral-white);border-color:transparent;cursor:progress}.ius-btn[data-status=success]{background:var(--ius-success-600);color:var(--ius-neutral-white);border-color:transparent;cursor:default}.ius-btn[data-status=error]{background:var(--ius-danger-600);color:var(--ius-neutral-white);border-color:transparent;cursor:default}.ius-btn__spin{display:inline-block;width:1em;height:1em;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:ius-btn-spin .72s linear infinite}@keyframes ius-btn-spin{to{transform:rotate(360deg)}}.ius-btn[data-status] .ius-btn__icon-left,.ius-btn[data-status] .ius-btn__icon-right,.ius-btn[data-loading=true] .ius-btn__icon-left,.ius-btn[data-loading=true] .ius-btn__icon-right{display:none}.ius-btn .ius-btn__icon-left,.ius-btn .ius-btn__icon-right{font-size:var(--_btn-icon, 20px);line-height:1}.ius-btn__label{line-height:inherit}.ius-btn__label:empty{display:none}.ius-btn[data-loading=true] .ius-btn__label{display:none}\n"] }]
|
|
144
|
+
args: [{ selector: 'ius-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n class=\"ius-btn\"\r\n [attr.type]=\"type\"\r\n [attr.data-variant]=\"variant\"\r\n [attr.data-size]=\"size ?? null\"\r\n [style.--_btn-px]=\"preset?.px ?? null\"\r\n [style.--_btn-py]=\"preset?.py ?? null\"\r\n [style.--_btn-fs]=\"preset?.fs ?? null\"\r\n [style.--_btn-lh]=\"preset?.lh ?? null\"\r\n [style.--_btn-icon]=\"preset?.icon ?? null\"\r\n [style.--_btn-gap]=\"preset?.gap ?? null\"\r\n [attr.data-loading]=\"isLoading ? 'true' : null\"\r\n [attr.data-status]=\"statusValue\"\r\n [attr.data-pressed]=\"pressed ? 'true' : null\"\r\n [attr.data-full-width]=\"fullWidth ? 'true' : null\"\r\n [attr.aria-label]=\"ariaLabel ?? null\"\r\n [attr.aria-disabled]=\"isDisabled ? 'true' : null\"\r\n [disabled]=\"isDisabled\"\r\n (click)=\"handleClick($event)\"\r\n>\r\n @if (isLoading) {\r\n <span class=\"ius-btn__spin\" aria-hidden=\"true\"></span>\r\n }\r\n @if (statusValue === 'success') {\r\n <span translate=\"no\" class=\"ius-icon ius-btn__icon-left\" aria-hidden=\"true\">check_circle</span>\r\n } @else if (statusValue === 'error') {\r\n <span translate=\"no\" class=\"ius-icon ius-btn__icon-left\" aria-hidden=\"true\">error</span>\r\n } @else if (prefixIcon) {\r\n <span translate=\"no\" class=\"ius-icon ius-btn__icon-left\" aria-hidden=\"true\">{{ prefixIcon }}</span>\r\n }\r\n @if (!isLoading) {\r\n <span class=\"ius-btn__label\">\r\n @if (label != null) {\r\n {{ label }}\r\n } @else {\r\n <ng-content />\r\n }\r\n </span>\r\n }\r\n @if (!statusValue && !isLoading && sufixIcon) {\r\n <span translate=\"no\" class=\"ius-icon ius-btn__icon-right\" aria-hidden=\"true\">{{ sufixIcon }}</span>\r\n }\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}.ius-btn{-webkit-user-select:none;user-select:none;--_btn-bg: var(--ius-primary-900);--_btn-bg-hover: var(--ius-primary-500);--_btn-bg-pressed: var(--ius-primary-600);--_btn-bg-disabled: var(--ius-neutral-2);--_btn-fg: var(--ius-neutral-white);--_btn-fg-hover: var(--ius-neutral-white);--_btn-fg-pressed: var(--ius-neutral-white);--_btn-fg-disabled: var(--ius-text-disabled);--_btn-border: transparent;--_btn-border-hover: transparent;--_btn-border-pressed: transparent;--_btn-border-disabled: transparent;display:inline-flex;align-items:center;justify-content:center;gap:var(--_btn-gap, var(--ius-space-xxs));padding:var(--_btn-py, var(--ius-space-sm)) var(--_btn-px, var(--ius-space-lg));border-radius:var(--ius-radius-lg);border:1.5px solid var(--_btn-border);background:var(--_btn-bg);color:var(--_btn-fg);font-family:var(--ius-font-body);font-weight:var(--ius-fw-medium);font-size:var(--_btn-fs, 14px);line-height:var(--_btn-lh, 20px);letter-spacing:.01em;cursor:pointer;white-space:nowrap;text-decoration:none;outline:none;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);-webkit-tap-highlight-color:transparent}.ius-btn[data-full-width=true]{width:100%}.ius-btn:hover:not(:disabled):not([data-status]):not([data-loading=true]),:host([data-force=hover]) .ius-btn:not(:disabled):not([data-status]):not([data-loading=true]){background:var(--_btn-bg-hover);color:var(--_btn-fg-hover);border-color:var(--_btn-border-hover)}.ius-btn:active:not(:disabled):not([data-status]):not([data-loading=true]),.ius-btn[data-pressed=true]:not(:disabled):not([data-status]):not([data-loading=true]),:host([data-force=pressed]) .ius-btn:not(:disabled):not([data-status]):not([data-loading=true]){background:var(--_btn-bg-pressed);color:var(--_btn-fg-pressed);border-color:var(--_btn-border-pressed)}.ius-btn:focus-visible{box-shadow:var(--ius-focus-ring)}.ius-btn:disabled,.ius-btn[aria-disabled=true]{background:var(--_btn-bg-disabled);color:var(--_btn-fg-disabled);border-color:var(--_btn-border-disabled);cursor:not-allowed}.ius-btn:not([data-size]){--_btn-px: 24px;--_btn-py: 8px;--_btn-fs: var(--ius-fs-base);--_btn-lh: var(--ius-lh-base);--_btn-icon: var(--ius-icon-md);--_btn-gap: var(--ius-space-xxs)}@container style(--ius-control-size: small){.ius-btn:not([data-size]){--_btn-px: 8px;--_btn-py: 6px;--_btn-fs: var(--ius-fs-sm);--_btn-lh: var(--ius-lh-sm);--_btn-icon: var(--ius-icon-sm);--_btn-gap: var(--ius-space-xxs)}}@container style(--ius-control-size: large){.ius-btn:not([data-size]){--_btn-px: 24px;--_btn-py: 10px;--_btn-fs: var(--ius-fs-lg);--_btn-lh: var(--ius-lh-lg);--_btn-icon: var(--ius-icon-md);--_btn-gap: var(--ius-space-xxs)}}.ius-btn[data-variant=primary]{--_btn-bg: var(--ius-primary-900);--_btn-bg-hover: var(--ius-primary-500);--_btn-bg-pressed: var(--ius-primary-600)}.ius-btn[data-variant=outline]{--_btn-bg: var(--ius-neutral-white);--_btn-bg-hover: var(--ius-success-100);--_btn-bg-pressed: var(--ius-success-600);--_btn-bg-disabled: var(--ius-neutral-1);--_btn-fg: var(--ius-success-600);--_btn-fg-hover: var(--ius-success-600);--_btn-fg-pressed: var(--ius-neutral-white);--_btn-fg-disabled: var(--ius-text-disabled);--_btn-border: var(--ius-success-500);--_btn-border-hover: var(--ius-success-500);--_btn-border-pressed: var(--ius-success-600);--_btn-border-disabled: var(--ius-neutral-4)}.ius-btn[data-variant=secondary]{--_btn-bg: var(--ius-neutral-3);--_btn-bg-hover: var(--ius-neutral-6);--_btn-bg-pressed: var(--ius-primary-600);--_btn-bg-disabled: var(--ius-neutral-2);--_btn-fg: var(--ius-text-primary);--_btn-fg-hover: var(--ius-neutral-white);--_btn-fg-pressed: var(--ius-neutral-white);--_btn-fg-disabled: var(--ius-text-disabled)}.ius-btn[data-variant=tertiary]{--_btn-bg: transparent;--_btn-bg-hover: var(--ius-neutral-4);--_btn-bg-pressed: var(--ius-primary-900);--_btn-bg-disabled: transparent;--_btn-fg: var(--ius-text-primary);--_btn-fg-hover: var(--ius-text-primary);--_btn-fg-pressed: var(--ius-neutral-white);--_btn-fg-disabled: var(--ius-text-disabled)}.ius-btn[data-variant=danger]{--_btn-bg: var(--ius-danger-600);--_btn-bg-hover: var(--ius-danger-500);--_btn-bg-pressed: var(--ius-danger-700);--_btn-bg-disabled: var(--ius-neutral-2);--_btn-fg: var(--ius-neutral-white);--_btn-fg-hover: var(--ius-neutral-white);--_btn-fg-pressed: var(--ius-neutral-white)}.ius-btn[data-loading=true]{background:var(--ius-primary-600);color:var(--ius-neutral-white);border-color:transparent;cursor:progress}.ius-btn[data-status=success]{background:var(--ius-success-600);color:var(--ius-neutral-white);border-color:transparent;cursor:default}.ius-btn[data-status=error]{background:var(--ius-danger-600);color:var(--ius-neutral-white);border-color:transparent;cursor:default}.ius-btn__spin{display:inline-block;width:1em;height:1em;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:ius-btn-spin .72s linear infinite}@keyframes ius-btn-spin{to{transform:rotate(360deg)}}.ius-btn[data-status] .ius-btn__icon-left,.ius-btn[data-status] .ius-btn__icon-right,.ius-btn[data-loading=true] .ius-btn__icon-left,.ius-btn[data-loading=true] .ius-btn__icon-right{display:none}.ius-btn .ius-btn__icon-left,.ius-btn .ius-btn__icon-right{font-size:var(--_btn-icon, 20px);line-height:1}.ius-btn__label{line-height:inherit}.ius-btn__label:empty{display:none}.ius-btn[data-loading=true] .ius-btn__label{display:none}\n"] }]
|
|
145
145
|
}], propDecorators: { variant: [{
|
|
146
146
|
type: Input
|
|
147
147
|
}], label: [{
|
|
@@ -625,13 +625,13 @@ class EleniaBubbleComponent {
|
|
|
625
625
|
!this.extended);
|
|
626
626
|
}
|
|
627
627
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: EleniaBubbleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
628
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: EleniaBubbleComponent, isStandalone: true, selector: "ius-elenia-bubble", inputs: { mood: "mood", size: "size", open: ["open", "open", booleanAttribute], label: "label", position: "position", paused: ["paused", "paused", booleanAttribute], peek: "peek", peekTitle: "peekTitle", peekIcon: "peekIcon", ariaLabel: "ariaLabel" }, outputs: { clicked: "clicked", peekClicked: "peekClicked", peekDismissed: "peekDismissed" }, host: { properties: { "attr.data-position": "position" } }, ngImport: i0, template: "@if (showPeek) {\n <div class=\"ius-elenia-fab-peek\">\n <span class=\"ius-elenia-fab-peek__icon\" aria-hidden=\"true\">\n <span translate=\"no\" class=\"ius-icon\">{{ peekIcon }}</span>\n </span>\n <button\n type=\"button\"\n class=\"ius-elenia-fab-peek__body\"\n (click)=\"peekClicked.emit($event)\"\n >\n @if (peekTitle) {\n <span class=\"ius-elenia-fab-peek__title\">{{ peekTitle }}</span>\n }\n <span class=\"ius-elenia-fab-peek__msg\">{{ peek }}</span>\n </button>\n <button\n type=\"button\"\n class=\"ius-elenia-fab-peek__x\"\n aria-label=\"Descartar\"\n (click)=\"peekDismissed.emit($event)\"\n >\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">close</span>\n </button>\n </div>\n}\n\n<button\n type=\"button\"\n class=\"ius-elenia-fab\"\n [attr.data-size]=\"size\"\n [attr.data-mood]=\"mood\"\n [attr.data-open]=\"open ? 'true' : null\"\n [attr.data-extended]=\"extended ? 'true' : null\"\n [attr.aria-label]=\"accessibleLabel\"\n aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"open ? 'true' : null\"\n [style.--_fab-box]=\"preset.box + 'px'\"\n [style.--_fab-orb]=\"preset.orb + 'px'\"\n (click)=\"clicked.emit($event)\"\n>\n <span class=\"ius-elenia-fab__disc\" aria-hidden=\"true\">\n <ius-elenia-orb\n [size]=\"preset.orb\"\n [mood]=\"mood\"\n [surface]=\"extended ? 'dark' : 'light'\"\n [paused]=\"paused\"\n [ariaLabel]=\"accessibleLabel\"\n />\n </span>\n @if (extended) {\n <span class=\"ius-elenia-fab__label\">{{ label }}</span>\n }\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;gap:var(--ius-space-xs)}:host([data-position=bottom-end]),:host([data-position=bottom-start]),:host([data-position=top-end]),:host([data-position=top-start]){position:fixed;z-index:60}:host([data-position=bottom-end]){bottom:var(--ius-space-lg);right:var(--ius-space-lg);flex-direction:row}:host([data-position=top-end]){top:var(--ius-space-lg);right:var(--ius-space-lg);flex-direction:row}:host([data-position=bottom-start]){bottom:var(--ius-space-lg);left:var(--ius-space-lg);flex-direction:row-reverse}:host([data-position=top-start]){top:var(--ius-space-lg);left:var(--ius-space-lg);flex-direction:row-reverse}:host([data-position=static]){position:relative}.ius-elenia-fab{position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:0;width:var(--_fab-box);height:var(--_fab-box);padding:0;border:0;border-radius:var(--ius-radius-pill);background:transparent;cursor:pointer;isolation:isolate;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform var(--ius-duration-slow) var(--ius-ease-decelerate)}.ius-elenia-fab__disc{position:relative;flex:0 0 auto;height:100%;aspect-ratio:1/1;display:grid;place-items:center;overflow:visible;transition:transform var(--ius-duration-slow) var(--ius-ease-decelerate)}.ius-elenia-fab__label{font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-neutral-white);white-space:nowrap;padding-inline-end:var(--ius-space-xxs)}.ius-elenia-fab:hover .ius-elenia-fab__disc,.ius-elenia-fab[data-open=true] .ius-elenia-fab__disc{transform:scale(1.09)}.ius-elenia-fab:active .ius-elenia-fab__disc{transform:scale(.94)}.ius-elenia-fab:hover ::ng-deep ius-elenia-orb,.ius-elenia-fab[data-open=true] ::ng-deep ius-elenia-orb{--_halo: var(--ius-primary-300);--_c1: var(--ius-primary-400);--_c2: var(--ius-info-400);--_c3: var(--ius-primary-300);--_c4: var(--ius-primary-200)}.ius-elenia-fab:hover ::ng-deep ius-elenia-orb:after,.ius-elenia-fab[data-open=true] ::ng-deep ius-elenia-orb:after{opacity:.9}.ius-elenia-fab:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-elenia-fab[data-mood=off] .ius-elenia-fab__disc,.ius-elenia-fab[data-mood=off]:hover .ius-elenia-fab__disc{transform:none}.ius-elenia-fab[data-extended=true]{width:auto;height:auto;gap:var(--ius-space-sm);padding-inline:0 var(--ius-space-lg);background:var(--ius-primary-900);box-shadow:var(--ius-elevation-300);transition:box-shadow var(--ius-duration-base) var(--ius-ease-standard),transform var(--ius-duration-slow) var(--ius-ease-decelerate)}.ius-elenia-fab[data-extended=true]:hover{transform:translateY(-2px);box-shadow:var(--ius-elevation-400)}.ius-elenia-fab[data-extended=true]:active{transform:translateY(0)}.ius-elenia-fab[data-extended=true] .ius-elenia-fab__disc{height:auto;width:var(--_fab-orb)}.ius-elenia-fab[data-extended=true]:hover .ius-elenia-fab__disc,.ius-elenia-fab[data-extended=true][data-open=true] .ius-elenia-fab__disc{transform:none}.ius-elenia-fab[data-extended=true][data-size=small] .ius-elenia-fab__label{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm)}.ius-elenia-fab-peek{position:relative;isolation:isolate;display:inline-flex;align-items:flex-start;gap:var(--ius-space-xs);max-width:300px;padding:var(--ius-space-sm) var(--ius-space-xs) var(--ius-space-sm) var(--ius-space-md);background:var(--ius-gradient-brand-deep);border-radius:var(--ius-radius-lg);box-shadow:var(--ius-elevation-200);animation:ius-fab-peek-in var(--ius-duration-slow) var(--ius-ease-decelerate) both}.ius-elenia-fab-peek__icon{flex:0 0 auto;display:inline-grid;place-items:center;color:var(--ius-primary-200)}.ius-elenia-fab-peek__icon .ius-icon{font-size:var(--ius-icon-md)}.ius-elenia-fab-peek__body{border:0;background:transparent;cursor:pointer;text-align:start;display:flex;flex-direction:column;gap:var(--ius-space-xxs);padding:0;min-width:0}.ius-elenia-fab-peek__body:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);border-radius:var(--ius-radius-sm)}.ius-elenia-fab-peek__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-neutral-white)}.ius-elenia-fab-peek__msg{font-family:var(--ius-font-body);font-weight:var(--ius-fw-regular);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-primary-100);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.ius-elenia-fab-peek__x{flex:0 0 auto;display:inline-grid;place-items:center;padding:var(--ius-space-xxs);border:0;border-radius:var(--ius-radius-pill);background:transparent;color:var(--ius-primary-200);cursor:pointer;-webkit-tap-highlight-color:transparent}.ius-elenia-fab-peek__x .ius-icon{font-size:var(--ius-icon-sm)}.ius-elenia-fab-peek__x:hover{background:color-mix(in srgb,var(--ius-neutral-white) 18%,transparent);color:var(--ius-neutral-white)}.ius-elenia-fab-peek__x:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}@keyframes ius-fab-peek-in{0%{opacity:0;transform:translate(8px) scale(.96)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.ius-elenia-fab,.ius-elenia-fab__disc{transition:none}.ius-elenia-fab:hover .ius-elenia-fab__disc,.ius-elenia-fab[data-open=true] .ius-elenia-fab__disc{transform:none}.ius-elenia-fab-peek{animation:none}}\n"], dependencies: [{ kind: "component", type: EleniaOrbComponent, selector: "ius-elenia-orb", inputs: ["size", "mood", "surface", "paused", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
628
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: EleniaBubbleComponent, isStandalone: true, selector: "ius-elenia-bubble", inputs: { mood: "mood", size: "size", open: ["open", "open", booleanAttribute], label: "label", position: "position", paused: ["paused", "paused", booleanAttribute], peek: "peek", peekTitle: "peekTitle", peekIcon: "peekIcon", ariaLabel: "ariaLabel" }, outputs: { clicked: "clicked", peekClicked: "peekClicked", peekDismissed: "peekDismissed" }, host: { properties: { "attr.data-position": "position" } }, ngImport: i0, template: "@if (showPeek) {\r\n <div class=\"ius-elenia-fab-peek\">\r\n <span class=\"ius-elenia-fab-peek__icon\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ peekIcon }}</span>\r\n </span>\r\n <button\r\n type=\"button\"\r\n class=\"ius-elenia-fab-peek__body\"\r\n (click)=\"peekClicked.emit($event)\"\r\n >\r\n @if (peekTitle) {\r\n <span class=\"ius-elenia-fab-peek__title\">{{ peekTitle }}</span>\r\n }\r\n <span class=\"ius-elenia-fab-peek__msg\">{{ peek }}</span>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"ius-elenia-fab-peek__x\"\r\n aria-label=\"Descartar\"\r\n (click)=\"peekDismissed.emit($event)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">close</span>\r\n </button>\r\n </div>\r\n}\r\n\r\n<button\r\n type=\"button\"\r\n class=\"ius-elenia-fab\"\r\n [attr.data-size]=\"size\"\r\n [attr.data-mood]=\"mood\"\r\n [attr.data-open]=\"open ? 'true' : null\"\r\n [attr.data-extended]=\"extended ? 'true' : null\"\r\n [attr.aria-label]=\"accessibleLabel\"\r\n aria-haspopup=\"dialog\"\r\n [attr.aria-expanded]=\"open ? 'true' : null\"\r\n [style.--_fab-box]=\"preset.box + 'px'\"\r\n [style.--_fab-orb]=\"preset.orb + 'px'\"\r\n (click)=\"clicked.emit($event)\"\r\n>\r\n <span class=\"ius-elenia-fab__disc\" aria-hidden=\"true\">\r\n <ius-elenia-orb\r\n [size]=\"preset.orb\"\r\n [mood]=\"mood\"\r\n [surface]=\"extended ? 'dark' : 'light'\"\r\n [paused]=\"paused\"\r\n [ariaLabel]=\"accessibleLabel\"\r\n />\r\n </span>\r\n @if (extended) {\r\n <span class=\"ius-elenia-fab__label\">{{ label }}</span>\r\n }\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;gap:var(--ius-space-xs)}:host([data-position=bottom-end]),:host([data-position=bottom-start]),:host([data-position=top-end]),:host([data-position=top-start]){position:fixed;z-index:60}:host([data-position=bottom-end]){bottom:var(--ius-space-lg);right:var(--ius-space-lg);flex-direction:row}:host([data-position=top-end]){top:var(--ius-space-lg);right:var(--ius-space-lg);flex-direction:row}:host([data-position=bottom-start]){bottom:var(--ius-space-lg);left:var(--ius-space-lg);flex-direction:row-reverse}:host([data-position=top-start]){top:var(--ius-space-lg);left:var(--ius-space-lg);flex-direction:row-reverse}:host([data-position=static]){position:relative}.ius-elenia-fab{position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:0;width:var(--_fab-box);height:var(--_fab-box);padding:0;border:0;border-radius:var(--ius-radius-pill);background:transparent;cursor:pointer;isolation:isolate;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform var(--ius-duration-slow) var(--ius-ease-decelerate)}.ius-elenia-fab__disc{position:relative;flex:0 0 auto;height:100%;aspect-ratio:1/1;display:grid;place-items:center;overflow:visible;transition:transform var(--ius-duration-slow) var(--ius-ease-decelerate)}.ius-elenia-fab__label{font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-neutral-white);white-space:nowrap;padding-inline-end:var(--ius-space-xxs)}.ius-elenia-fab:hover .ius-elenia-fab__disc,.ius-elenia-fab[data-open=true] .ius-elenia-fab__disc{transform:scale(1.09)}.ius-elenia-fab:active .ius-elenia-fab__disc{transform:scale(.94)}.ius-elenia-fab:hover ::ng-deep ius-elenia-orb,.ius-elenia-fab[data-open=true] ::ng-deep ius-elenia-orb{--_halo: var(--ius-primary-300);--_c1: var(--ius-primary-400);--_c2: var(--ius-info-400);--_c3: var(--ius-primary-300);--_c4: var(--ius-primary-200)}.ius-elenia-fab:hover ::ng-deep ius-elenia-orb:after,.ius-elenia-fab[data-open=true] ::ng-deep ius-elenia-orb:after{opacity:.9}.ius-elenia-fab:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-elenia-fab[data-mood=off] .ius-elenia-fab__disc,.ius-elenia-fab[data-mood=off]:hover .ius-elenia-fab__disc{transform:none}.ius-elenia-fab[data-extended=true]{width:auto;height:auto;gap:var(--ius-space-sm);padding-inline:0 var(--ius-space-lg);background:var(--ius-primary-900);box-shadow:var(--ius-elevation-300);transition:box-shadow var(--ius-duration-base) var(--ius-ease-standard),transform var(--ius-duration-slow) var(--ius-ease-decelerate)}.ius-elenia-fab[data-extended=true]:hover{transform:translateY(-2px);box-shadow:var(--ius-elevation-400)}.ius-elenia-fab[data-extended=true]:active{transform:translateY(0)}.ius-elenia-fab[data-extended=true] .ius-elenia-fab__disc{height:auto;width:var(--_fab-orb)}.ius-elenia-fab[data-extended=true]:hover .ius-elenia-fab__disc,.ius-elenia-fab[data-extended=true][data-open=true] .ius-elenia-fab__disc{transform:none}.ius-elenia-fab[data-extended=true][data-size=small] .ius-elenia-fab__label{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm)}.ius-elenia-fab-peek{position:relative;isolation:isolate;display:inline-flex;align-items:flex-start;gap:var(--ius-space-xs);max-width:300px;padding:var(--ius-space-sm) var(--ius-space-xs) var(--ius-space-sm) var(--ius-space-md);background:var(--ius-gradient-brand-deep);border-radius:var(--ius-radius-lg);box-shadow:var(--ius-elevation-200);animation:ius-fab-peek-in var(--ius-duration-slow) var(--ius-ease-decelerate) both}.ius-elenia-fab-peek__icon{flex:0 0 auto;display:inline-grid;place-items:center;color:var(--ius-primary-200)}.ius-elenia-fab-peek__icon .ius-icon{font-size:var(--ius-icon-md)}.ius-elenia-fab-peek__body{border:0;background:transparent;cursor:pointer;text-align:start;display:flex;flex-direction:column;gap:var(--ius-space-xxs);padding:0;min-width:0}.ius-elenia-fab-peek__body:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);border-radius:var(--ius-radius-sm)}.ius-elenia-fab-peek__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-neutral-white)}.ius-elenia-fab-peek__msg{font-family:var(--ius-font-body);font-weight:var(--ius-fw-regular);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-primary-100);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.ius-elenia-fab-peek__x{flex:0 0 auto;display:inline-grid;place-items:center;padding:var(--ius-space-xxs);border:0;border-radius:var(--ius-radius-pill);background:transparent;color:var(--ius-primary-200);cursor:pointer;-webkit-tap-highlight-color:transparent}.ius-elenia-fab-peek__x .ius-icon{font-size:var(--ius-icon-sm)}.ius-elenia-fab-peek__x:hover{background:color-mix(in srgb,var(--ius-neutral-white) 18%,transparent);color:var(--ius-neutral-white)}.ius-elenia-fab-peek__x:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}@keyframes ius-fab-peek-in{0%{opacity:0;transform:translate(8px) scale(.96)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.ius-elenia-fab,.ius-elenia-fab__disc{transition:none}.ius-elenia-fab:hover .ius-elenia-fab__disc,.ius-elenia-fab[data-open=true] .ius-elenia-fab__disc{transform:none}.ius-elenia-fab-peek{animation:none}}\n"], dependencies: [{ kind: "component", type: EleniaOrbComponent, selector: "ius-elenia-orb", inputs: ["size", "mood", "surface", "paused", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
629
629
|
}
|
|
630
630
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: EleniaBubbleComponent, decorators: [{
|
|
631
631
|
type: Component,
|
|
632
632
|
args: [{ selector: 'ius-elenia-bubble', standalone: true, imports: [EleniaOrbComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
633
633
|
'[attr.data-position]': 'position',
|
|
634
|
-
}, template: "@if (showPeek) {\n <div class=\"ius-elenia-fab-peek\">\n <span class=\"ius-elenia-fab-peek__icon\" aria-hidden=\"true\">\n <span translate=\"no\" class=\"ius-icon\">{{ peekIcon }}</span>\n </span>\n <button\n type=\"button\"\n class=\"ius-elenia-fab-peek__body\"\n (click)=\"peekClicked.emit($event)\"\n >\n @if (peekTitle) {\n <span class=\"ius-elenia-fab-peek__title\">{{ peekTitle }}</span>\n }\n <span class=\"ius-elenia-fab-peek__msg\">{{ peek }}</span>\n </button>\n <button\n type=\"button\"\n class=\"ius-elenia-fab-peek__x\"\n aria-label=\"Descartar\"\n (click)=\"peekDismissed.emit($event)\"\n >\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">close</span>\n </button>\n </div>\n}\n\n<button\n type=\"button\"\n class=\"ius-elenia-fab\"\n [attr.data-size]=\"size\"\n [attr.data-mood]=\"mood\"\n [attr.data-open]=\"open ? 'true' : null\"\n [attr.data-extended]=\"extended ? 'true' : null\"\n [attr.aria-label]=\"accessibleLabel\"\n aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"open ? 'true' : null\"\n [style.--_fab-box]=\"preset.box + 'px'\"\n [style.--_fab-orb]=\"preset.orb + 'px'\"\n (click)=\"clicked.emit($event)\"\n>\n <span class=\"ius-elenia-fab__disc\" aria-hidden=\"true\">\n <ius-elenia-orb\n [size]=\"preset.orb\"\n [mood]=\"mood\"\n [surface]=\"extended ? 'dark' : 'light'\"\n [paused]=\"paused\"\n [ariaLabel]=\"accessibleLabel\"\n />\n </span>\n @if (extended) {\n <span class=\"ius-elenia-fab__label\">{{ label }}</span>\n }\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;gap:var(--ius-space-xs)}:host([data-position=bottom-end]),:host([data-position=bottom-start]),:host([data-position=top-end]),:host([data-position=top-start]){position:fixed;z-index:60}:host([data-position=bottom-end]){bottom:var(--ius-space-lg);right:var(--ius-space-lg);flex-direction:row}:host([data-position=top-end]){top:var(--ius-space-lg);right:var(--ius-space-lg);flex-direction:row}:host([data-position=bottom-start]){bottom:var(--ius-space-lg);left:var(--ius-space-lg);flex-direction:row-reverse}:host([data-position=top-start]){top:var(--ius-space-lg);left:var(--ius-space-lg);flex-direction:row-reverse}:host([data-position=static]){position:relative}.ius-elenia-fab{position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:0;width:var(--_fab-box);height:var(--_fab-box);padding:0;border:0;border-radius:var(--ius-radius-pill);background:transparent;cursor:pointer;isolation:isolate;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform var(--ius-duration-slow) var(--ius-ease-decelerate)}.ius-elenia-fab__disc{position:relative;flex:0 0 auto;height:100%;aspect-ratio:1/1;display:grid;place-items:center;overflow:visible;transition:transform var(--ius-duration-slow) var(--ius-ease-decelerate)}.ius-elenia-fab__label{font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-neutral-white);white-space:nowrap;padding-inline-end:var(--ius-space-xxs)}.ius-elenia-fab:hover .ius-elenia-fab__disc,.ius-elenia-fab[data-open=true] .ius-elenia-fab__disc{transform:scale(1.09)}.ius-elenia-fab:active .ius-elenia-fab__disc{transform:scale(.94)}.ius-elenia-fab:hover ::ng-deep ius-elenia-orb,.ius-elenia-fab[data-open=true] ::ng-deep ius-elenia-orb{--_halo: var(--ius-primary-300);--_c1: var(--ius-primary-400);--_c2: var(--ius-info-400);--_c3: var(--ius-primary-300);--_c4: var(--ius-primary-200)}.ius-elenia-fab:hover ::ng-deep ius-elenia-orb:after,.ius-elenia-fab[data-open=true] ::ng-deep ius-elenia-orb:after{opacity:.9}.ius-elenia-fab:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-elenia-fab[data-mood=off] .ius-elenia-fab__disc,.ius-elenia-fab[data-mood=off]:hover .ius-elenia-fab__disc{transform:none}.ius-elenia-fab[data-extended=true]{width:auto;height:auto;gap:var(--ius-space-sm);padding-inline:0 var(--ius-space-lg);background:var(--ius-primary-900);box-shadow:var(--ius-elevation-300);transition:box-shadow var(--ius-duration-base) var(--ius-ease-standard),transform var(--ius-duration-slow) var(--ius-ease-decelerate)}.ius-elenia-fab[data-extended=true]:hover{transform:translateY(-2px);box-shadow:var(--ius-elevation-400)}.ius-elenia-fab[data-extended=true]:active{transform:translateY(0)}.ius-elenia-fab[data-extended=true] .ius-elenia-fab__disc{height:auto;width:var(--_fab-orb)}.ius-elenia-fab[data-extended=true]:hover .ius-elenia-fab__disc,.ius-elenia-fab[data-extended=true][data-open=true] .ius-elenia-fab__disc{transform:none}.ius-elenia-fab[data-extended=true][data-size=small] .ius-elenia-fab__label{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm)}.ius-elenia-fab-peek{position:relative;isolation:isolate;display:inline-flex;align-items:flex-start;gap:var(--ius-space-xs);max-width:300px;padding:var(--ius-space-sm) var(--ius-space-xs) var(--ius-space-sm) var(--ius-space-md);background:var(--ius-gradient-brand-deep);border-radius:var(--ius-radius-lg);box-shadow:var(--ius-elevation-200);animation:ius-fab-peek-in var(--ius-duration-slow) var(--ius-ease-decelerate) both}.ius-elenia-fab-peek__icon{flex:0 0 auto;display:inline-grid;place-items:center;color:var(--ius-primary-200)}.ius-elenia-fab-peek__icon .ius-icon{font-size:var(--ius-icon-md)}.ius-elenia-fab-peek__body{border:0;background:transparent;cursor:pointer;text-align:start;display:flex;flex-direction:column;gap:var(--ius-space-xxs);padding:0;min-width:0}.ius-elenia-fab-peek__body:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);border-radius:var(--ius-radius-sm)}.ius-elenia-fab-peek__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-neutral-white)}.ius-elenia-fab-peek__msg{font-family:var(--ius-font-body);font-weight:var(--ius-fw-regular);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-primary-100);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.ius-elenia-fab-peek__x{flex:0 0 auto;display:inline-grid;place-items:center;padding:var(--ius-space-xxs);border:0;border-radius:var(--ius-radius-pill);background:transparent;color:var(--ius-primary-200);cursor:pointer;-webkit-tap-highlight-color:transparent}.ius-elenia-fab-peek__x .ius-icon{font-size:var(--ius-icon-sm)}.ius-elenia-fab-peek__x:hover{background:color-mix(in srgb,var(--ius-neutral-white) 18%,transparent);color:var(--ius-neutral-white)}.ius-elenia-fab-peek__x:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}@keyframes ius-fab-peek-in{0%{opacity:0;transform:translate(8px) scale(.96)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.ius-elenia-fab,.ius-elenia-fab__disc{transition:none}.ius-elenia-fab:hover .ius-elenia-fab__disc,.ius-elenia-fab[data-open=true] .ius-elenia-fab__disc{transform:none}.ius-elenia-fab-peek{animation:none}}\n"] }]
|
|
634
|
+
}, template: "@if (showPeek) {\r\n <div class=\"ius-elenia-fab-peek\">\r\n <span class=\"ius-elenia-fab-peek__icon\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ peekIcon }}</span>\r\n </span>\r\n <button\r\n type=\"button\"\r\n class=\"ius-elenia-fab-peek__body\"\r\n (click)=\"peekClicked.emit($event)\"\r\n >\r\n @if (peekTitle) {\r\n <span class=\"ius-elenia-fab-peek__title\">{{ peekTitle }}</span>\r\n }\r\n <span class=\"ius-elenia-fab-peek__msg\">{{ peek }}</span>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"ius-elenia-fab-peek__x\"\r\n aria-label=\"Descartar\"\r\n (click)=\"peekDismissed.emit($event)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">close</span>\r\n </button>\r\n </div>\r\n}\r\n\r\n<button\r\n type=\"button\"\r\n class=\"ius-elenia-fab\"\r\n [attr.data-size]=\"size\"\r\n [attr.data-mood]=\"mood\"\r\n [attr.data-open]=\"open ? 'true' : null\"\r\n [attr.data-extended]=\"extended ? 'true' : null\"\r\n [attr.aria-label]=\"accessibleLabel\"\r\n aria-haspopup=\"dialog\"\r\n [attr.aria-expanded]=\"open ? 'true' : null\"\r\n [style.--_fab-box]=\"preset.box + 'px'\"\r\n [style.--_fab-orb]=\"preset.orb + 'px'\"\r\n (click)=\"clicked.emit($event)\"\r\n>\r\n <span class=\"ius-elenia-fab__disc\" aria-hidden=\"true\">\r\n <ius-elenia-orb\r\n [size]=\"preset.orb\"\r\n [mood]=\"mood\"\r\n [surface]=\"extended ? 'dark' : 'light'\"\r\n [paused]=\"paused\"\r\n [ariaLabel]=\"accessibleLabel\"\r\n />\r\n </span>\r\n @if (extended) {\r\n <span class=\"ius-elenia-fab__label\">{{ label }}</span>\r\n }\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;gap:var(--ius-space-xs)}:host([data-position=bottom-end]),:host([data-position=bottom-start]),:host([data-position=top-end]),:host([data-position=top-start]){position:fixed;z-index:60}:host([data-position=bottom-end]){bottom:var(--ius-space-lg);right:var(--ius-space-lg);flex-direction:row}:host([data-position=top-end]){top:var(--ius-space-lg);right:var(--ius-space-lg);flex-direction:row}:host([data-position=bottom-start]){bottom:var(--ius-space-lg);left:var(--ius-space-lg);flex-direction:row-reverse}:host([data-position=top-start]){top:var(--ius-space-lg);left:var(--ius-space-lg);flex-direction:row-reverse}:host([data-position=static]){position:relative}.ius-elenia-fab{position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:0;width:var(--_fab-box);height:var(--_fab-box);padding:0;border:0;border-radius:var(--ius-radius-pill);background:transparent;cursor:pointer;isolation:isolate;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform var(--ius-duration-slow) var(--ius-ease-decelerate)}.ius-elenia-fab__disc{position:relative;flex:0 0 auto;height:100%;aspect-ratio:1/1;display:grid;place-items:center;overflow:visible;transition:transform var(--ius-duration-slow) var(--ius-ease-decelerate)}.ius-elenia-fab__label{font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-neutral-white);white-space:nowrap;padding-inline-end:var(--ius-space-xxs)}.ius-elenia-fab:hover .ius-elenia-fab__disc,.ius-elenia-fab[data-open=true] .ius-elenia-fab__disc{transform:scale(1.09)}.ius-elenia-fab:active .ius-elenia-fab__disc{transform:scale(.94)}.ius-elenia-fab:hover ::ng-deep ius-elenia-orb,.ius-elenia-fab[data-open=true] ::ng-deep ius-elenia-orb{--_halo: var(--ius-primary-300);--_c1: var(--ius-primary-400);--_c2: var(--ius-info-400);--_c3: var(--ius-primary-300);--_c4: var(--ius-primary-200)}.ius-elenia-fab:hover ::ng-deep ius-elenia-orb:after,.ius-elenia-fab[data-open=true] ::ng-deep ius-elenia-orb:after{opacity:.9}.ius-elenia-fab:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-elenia-fab[data-mood=off] .ius-elenia-fab__disc,.ius-elenia-fab[data-mood=off]:hover .ius-elenia-fab__disc{transform:none}.ius-elenia-fab[data-extended=true]{width:auto;height:auto;gap:var(--ius-space-sm);padding-inline:0 var(--ius-space-lg);background:var(--ius-primary-900);box-shadow:var(--ius-elevation-300);transition:box-shadow var(--ius-duration-base) var(--ius-ease-standard),transform var(--ius-duration-slow) var(--ius-ease-decelerate)}.ius-elenia-fab[data-extended=true]:hover{transform:translateY(-2px);box-shadow:var(--ius-elevation-400)}.ius-elenia-fab[data-extended=true]:active{transform:translateY(0)}.ius-elenia-fab[data-extended=true] .ius-elenia-fab__disc{height:auto;width:var(--_fab-orb)}.ius-elenia-fab[data-extended=true]:hover .ius-elenia-fab__disc,.ius-elenia-fab[data-extended=true][data-open=true] .ius-elenia-fab__disc{transform:none}.ius-elenia-fab[data-extended=true][data-size=small] .ius-elenia-fab__label{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm)}.ius-elenia-fab-peek{position:relative;isolation:isolate;display:inline-flex;align-items:flex-start;gap:var(--ius-space-xs);max-width:300px;padding:var(--ius-space-sm) var(--ius-space-xs) var(--ius-space-sm) var(--ius-space-md);background:var(--ius-gradient-brand-deep);border-radius:var(--ius-radius-lg);box-shadow:var(--ius-elevation-200);animation:ius-fab-peek-in var(--ius-duration-slow) var(--ius-ease-decelerate) both}.ius-elenia-fab-peek__icon{flex:0 0 auto;display:inline-grid;place-items:center;color:var(--ius-primary-200)}.ius-elenia-fab-peek__icon .ius-icon{font-size:var(--ius-icon-md)}.ius-elenia-fab-peek__body{border:0;background:transparent;cursor:pointer;text-align:start;display:flex;flex-direction:column;gap:var(--ius-space-xxs);padding:0;min-width:0}.ius-elenia-fab-peek__body:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);border-radius:var(--ius-radius-sm)}.ius-elenia-fab-peek__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-neutral-white)}.ius-elenia-fab-peek__msg{font-family:var(--ius-font-body);font-weight:var(--ius-fw-regular);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-primary-100);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.ius-elenia-fab-peek__x{flex:0 0 auto;display:inline-grid;place-items:center;padding:var(--ius-space-xxs);border:0;border-radius:var(--ius-radius-pill);background:transparent;color:var(--ius-primary-200);cursor:pointer;-webkit-tap-highlight-color:transparent}.ius-elenia-fab-peek__x .ius-icon{font-size:var(--ius-icon-sm)}.ius-elenia-fab-peek__x:hover{background:color-mix(in srgb,var(--ius-neutral-white) 18%,transparent);color:var(--ius-neutral-white)}.ius-elenia-fab-peek__x:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}@keyframes ius-fab-peek-in{0%{opacity:0;transform:translate(8px) scale(.96)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.ius-elenia-fab,.ius-elenia-fab__disc{transition:none}.ius-elenia-fab:hover .ius-elenia-fab__disc,.ius-elenia-fab[data-open=true] .ius-elenia-fab__disc{transform:none}.ius-elenia-fab-peek{animation:none}}\n"] }]
|
|
635
635
|
}], propDecorators: { mood: [{
|
|
636
636
|
type: Input
|
|
637
637
|
}], size: [{
|
|
@@ -1128,11 +1128,11 @@ class TextButtonComponent {
|
|
|
1128
1128
|
return SIZE_PRESETS$1[this.size] ?? SIZE_PRESETS$1.medium;
|
|
1129
1129
|
}
|
|
1130
1130
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TextButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1131
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: TextButtonComponent, isStandalone: true, selector: "ius-text-button", inputs: { label: "label", prefixIcon: "prefixIcon", sufixIcon: "sufixIcon", size: "size", disabled: ["disabled", "disabled", booleanAttribute], type: "type", ariaExpanded: "ariaExpanded", ariaControls: "ariaControls" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n class=\"ius-txtbtn\"\n [attr.type]=\"type\"\n [attr.data-size]=\"size\"\n [style.--_tb-fs]=\"preset.fs\"\n [style.--_tb-lh]=\"preset.lh\"\n [style.--_tb-icon]=\"preset.icon\"\n [style.--_tb-gap]=\"preset.gap\"\n [attr.aria-expanded]=\"ariaExpanded === undefined ? null : ariaExpanded\"\n [attr.aria-controls]=\"ariaControls ?? null\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n [disabled]=\"disabled\"\n (click)=\"clicked.emit($event)\"\n>\n @if (prefixIcon) {\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ prefixIcon }}</span>\n }\n <span class=\"ius-txtbtn__label\">\n @if (label != null) {\n {{ label }}\n } @else {\n <ng-content />\n }\n </span>\n @if (sufixIcon) {\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ sufixIcon }}</span>\n }\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:contents}.ius-txtbtn{-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;gap:var(--_tb-gap, var(--ius-space-xs));padding:0;border:0;background:transparent;color:var(--ius-text-primary);font-family:var(--ius-font-body);font-weight:var(--ius-fw-medium);font-size:var(--_tb-fs, 14px);line-height:var(--_tb-lh, 20px);letter-spacing:.01em;cursor:pointer;text-decoration:none;outline:none;transition:color var(--ius-duration-fast) var(--ius-ease-standard);-webkit-tap-highlight-color:transparent}.ius-txtbtn:hover:not(:disabled),:host([data-force=hover]) .ius-txtbtn:not(:disabled){color:var(--ius-primary-500)}.ius-txtbtn:active:not(:disabled),:host([data-force=pressed]) .ius-txtbtn:not(:disabled){color:var(--ius-primary-600)}.ius-txtbtn:focus-visible{outline:2px solid var(--ius-info-200);outline-offset:2px;border-radius:var(--ius-radius-sm)}.ius-txtbtn:disabled,.ius-txtbtn[aria-disabled=true]{color:var(--ius-text-disabled);cursor:not-allowed}.ius-txtbtn .ius-icon{font-size:var(--_tb-icon, var(--ius-icon-sm));line-height:1}.ius-txtbtn__label:empty{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1131
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: TextButtonComponent, isStandalone: true, selector: "ius-text-button", inputs: { label: "label", prefixIcon: "prefixIcon", sufixIcon: "sufixIcon", size: "size", disabled: ["disabled", "disabled", booleanAttribute], type: "type", ariaExpanded: "ariaExpanded", ariaControls: "ariaControls" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\r\n class=\"ius-txtbtn\"\r\n [attr.type]=\"type\"\r\n [attr.data-size]=\"size\"\r\n [style.--_tb-fs]=\"preset.fs\"\r\n [style.--_tb-lh]=\"preset.lh\"\r\n [style.--_tb-icon]=\"preset.icon\"\r\n [style.--_tb-gap]=\"preset.gap\"\r\n [attr.aria-expanded]=\"ariaExpanded === undefined ? null : ariaExpanded\"\r\n [attr.aria-controls]=\"ariaControls ?? null\"\r\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\r\n [disabled]=\"disabled\"\r\n (click)=\"clicked.emit($event)\"\r\n>\r\n @if (prefixIcon) {\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ prefixIcon }}</span>\r\n }\r\n <span class=\"ius-txtbtn__label\">\r\n @if (label != null) {\r\n {{ label }}\r\n } @else {\r\n <ng-content />\r\n }\r\n </span>\r\n @if (sufixIcon) {\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ sufixIcon }}</span>\r\n }\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}.ius-txtbtn{-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;gap:var(--_tb-gap, var(--ius-space-xs));padding:0;border:0;background:transparent;color:var(--ius-text-primary);font-family:var(--ius-font-body);font-weight:var(--ius-fw-medium);font-size:var(--_tb-fs, 14px);line-height:var(--_tb-lh, 20px);letter-spacing:.01em;cursor:pointer;text-decoration:none;outline:none;transition:color var(--ius-duration-fast) var(--ius-ease-standard);-webkit-tap-highlight-color:transparent}.ius-txtbtn:hover:not(:disabled),:host([data-force=hover]) .ius-txtbtn:not(:disabled){color:var(--ius-primary-500)}.ius-txtbtn:active:not(:disabled),:host([data-force=pressed]) .ius-txtbtn:not(:disabled){color:var(--ius-primary-600)}.ius-txtbtn:focus-visible{outline:2px solid var(--ius-info-200);outline-offset:2px;border-radius:var(--ius-radius-sm)}.ius-txtbtn:disabled,.ius-txtbtn[aria-disabled=true]{color:var(--ius-text-disabled);cursor:not-allowed}.ius-txtbtn .ius-icon{font-size:var(--_tb-icon, var(--ius-icon-sm));line-height:1}.ius-txtbtn__label:empty{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1132
1132
|
}
|
|
1133
1133
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TextButtonComponent, decorators: [{
|
|
1134
1134
|
type: Component,
|
|
1135
|
-
args: [{ selector: 'ius-text-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n class=\"ius-txtbtn\"\n [attr.type]=\"type\"\n [attr.data-size]=\"size\"\n [style.--_tb-fs]=\"preset.fs\"\n [style.--_tb-lh]=\"preset.lh\"\n [style.--_tb-icon]=\"preset.icon\"\n [style.--_tb-gap]=\"preset.gap\"\n [attr.aria-expanded]=\"ariaExpanded === undefined ? null : ariaExpanded\"\n [attr.aria-controls]=\"ariaControls ?? null\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n [disabled]=\"disabled\"\n (click)=\"clicked.emit($event)\"\n>\n @if (prefixIcon) {\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ prefixIcon }}</span>\n }\n <span class=\"ius-txtbtn__label\">\n @if (label != null) {\n {{ label }}\n } @else {\n <ng-content />\n }\n </span>\n @if (sufixIcon) {\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ sufixIcon }}</span>\n }\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:contents}.ius-txtbtn{-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;gap:var(--_tb-gap, var(--ius-space-xs));padding:0;border:0;background:transparent;color:var(--ius-text-primary);font-family:var(--ius-font-body);font-weight:var(--ius-fw-medium);font-size:var(--_tb-fs, 14px);line-height:var(--_tb-lh, 20px);letter-spacing:.01em;cursor:pointer;text-decoration:none;outline:none;transition:color var(--ius-duration-fast) var(--ius-ease-standard);-webkit-tap-highlight-color:transparent}.ius-txtbtn:hover:not(:disabled),:host([data-force=hover]) .ius-txtbtn:not(:disabled){color:var(--ius-primary-500)}.ius-txtbtn:active:not(:disabled),:host([data-force=pressed]) .ius-txtbtn:not(:disabled){color:var(--ius-primary-600)}.ius-txtbtn:focus-visible{outline:2px solid var(--ius-info-200);outline-offset:2px;border-radius:var(--ius-radius-sm)}.ius-txtbtn:disabled,.ius-txtbtn[aria-disabled=true]{color:var(--ius-text-disabled);cursor:not-allowed}.ius-txtbtn .ius-icon{font-size:var(--_tb-icon, var(--ius-icon-sm));line-height:1}.ius-txtbtn__label:empty{display:none}\n"] }]
|
|
1135
|
+
args: [{ selector: 'ius-text-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n class=\"ius-txtbtn\"\r\n [attr.type]=\"type\"\r\n [attr.data-size]=\"size\"\r\n [style.--_tb-fs]=\"preset.fs\"\r\n [style.--_tb-lh]=\"preset.lh\"\r\n [style.--_tb-icon]=\"preset.icon\"\r\n [style.--_tb-gap]=\"preset.gap\"\r\n [attr.aria-expanded]=\"ariaExpanded === undefined ? null : ariaExpanded\"\r\n [attr.aria-controls]=\"ariaControls ?? null\"\r\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\r\n [disabled]=\"disabled\"\r\n (click)=\"clicked.emit($event)\"\r\n>\r\n @if (prefixIcon) {\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ prefixIcon }}</span>\r\n }\r\n <span class=\"ius-txtbtn__label\">\r\n @if (label != null) {\r\n {{ label }}\r\n } @else {\r\n <ng-content />\r\n }\r\n </span>\r\n @if (sufixIcon) {\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ sufixIcon }}</span>\r\n }\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}.ius-txtbtn{-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;gap:var(--_tb-gap, var(--ius-space-xs));padding:0;border:0;background:transparent;color:var(--ius-text-primary);font-family:var(--ius-font-body);font-weight:var(--ius-fw-medium);font-size:var(--_tb-fs, 14px);line-height:var(--_tb-lh, 20px);letter-spacing:.01em;cursor:pointer;text-decoration:none;outline:none;transition:color var(--ius-duration-fast) var(--ius-ease-standard);-webkit-tap-highlight-color:transparent}.ius-txtbtn:hover:not(:disabled),:host([data-force=hover]) .ius-txtbtn:not(:disabled){color:var(--ius-primary-500)}.ius-txtbtn:active:not(:disabled),:host([data-force=pressed]) .ius-txtbtn:not(:disabled){color:var(--ius-primary-600)}.ius-txtbtn:focus-visible{outline:2px solid var(--ius-info-200);outline-offset:2px;border-radius:var(--ius-radius-sm)}.ius-txtbtn:disabled,.ius-txtbtn[aria-disabled=true]{color:var(--ius-text-disabled);cursor:not-allowed}.ius-txtbtn .ius-icon{font-size:var(--_tb-icon, var(--ius-icon-sm));line-height:1}.ius-txtbtn__label:empty{display:none}\n"] }]
|
|
1136
1136
|
}], propDecorators: { label: [{
|
|
1137
1137
|
type: Input
|
|
1138
1138
|
}], prefixIcon: [{
|
|
@@ -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 = () => { };
|
|
@@ -1407,7 +1407,7 @@ class TextFieldComponent {
|
|
|
1407
1407
|
useExisting: forwardRef(() => TextFieldComponent),
|
|
1408
1408
|
multi: true,
|
|
1409
1409
|
},
|
|
1410
|
-
], ngImport: i0, template: "@if (label) {\n <label [for]=\"inputId\" class=\"ius-tf__label\">\n @if (required) {\n <span class=\"ius-tf__required\" aria-hidden=\"true\"></span>\n }\n <span>{{ label }}</span>\n @if (showIconHelp) {\n <ius-popover\n [title]=\"iconHelpTitle\"\n [content]=\"iconHelpContent\"\n [disabled]=\"!iconHelpTitle && !iconHelpContent\"\n >\n <span\n class=\"ius-tf__help-icon\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=\"Ayuda\"\n >\n <span translate=\"no\" class=\"ius-icon\">help</span>\n </span>\n </ius-popover>\n }\n <span class=\"ius-tf__colon\">:</span>\n </label>\n}\n\n<div class=\"ius-tf__field\">\n @if (prefixIcon) {\n <span class=\"ius-tf__prefix\" aria-hidden=\"true\">\n <span translate=\"no\" class=\"ius-icon\">{{ prefixIcon }}</span>\n </span>\n }\n\n <input\n [id]=\"inputId\"\n class=\"ius-tf__input\"\n [type]=\"inputType\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [value]=\"value()\"\n [disabled]=\"disabled\"\n [attr.aria-invalid]=\"error || null\"\n [attr.aria-required]=\"required || null\"\n [attr.aria-describedby]=\"showHint ? helpId : null\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n />\n\n @if (isPassword) {\n <button\n type=\"button\"\n class=\"ius-tf__clear\"\n [attr.aria-label]=\"revealed() ? 'Ocultar contenido' : 'Mostrar contenido'\"\n [attr.aria-pressed]=\"revealed()\"\n tabindex=\"-1\"\n [disabled]=\"disabled\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"toggleReveal()\"\n >\n <span translate=\"no\" class=\"ius-icon\">{{ revealed() ? 'visibility_off' : 'visibility' }}</span>\n </button>\n } @else if (showClearComputed) {\n <button\n type=\"button\"\n class=\"ius-tf__clear\"\n aria-label=\"Limpiar campo\"\n tabindex=\"-1\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"clear()\"\n >\n <span translate=\"no\" class=\"ius-icon\">cancel</span>\n </button>\n }\n</div>\n\n@if (showHint) {\n <span [id]=\"helpId\" class=\"ius-tf__hint\">{{ hint }}</span>\n}\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}.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;cursor:not-allowed}: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,.ius-tf__sufix{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-tf__prefix .ius-icon,.ius-tf__sufix .ius-icon{font-size:var(--_tf-icon-size);line-height:1}: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__input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--_tf-fs);line-height:var(--_tf-lh);color:var(--_tf-fg);min-width:0;padding:0}.ius-tf__input::placeholder{color:var(--_tf-placeholder)}.ius-tf__input:disabled{cursor:not-allowed;color:var(--ius-text-disabled)}:host([data-error=true]) .ius-tf__input{color:var(--ius-text-primary)}.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)}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1410
|
+
], ngImport: i0, template: "@if (label) {\r\n <label [for]=\"inputId\" 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 <ius-popover\r\n [title]=\"iconHelpTitle\"\r\n [content]=\"iconHelpContent\"\r\n [disabled]=\"!iconHelpTitle && !iconHelpContent\"\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 class=\"ius-tf__field\">\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 <input\r\n [id]=\"inputId\"\r\n class=\"ius-tf__input\"\r\n [type]=\"inputType\"\r\n [name]=\"name\"\r\n [placeholder]=\"placeholder\"\r\n [value]=\"value()\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-invalid]=\"error || null\"\r\n [attr.aria-required]=\"required || null\"\r\n [attr.aria-describedby]=\"showHint ? helpId : null\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n />\r\n\r\n @if (isPassword) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-tf__clear\"\r\n [attr.aria-label]=\"revealed() ? 'Ocultar contenido' : 'Mostrar contenido'\"\r\n [attr.aria-pressed]=\"revealed()\"\r\n tabindex=\"-1\"\r\n [disabled]=\"disabled\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (click)=\"toggleReveal()\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">{{ revealed() ? 'visibility_off' : 'visibility' }}</span>\r\n </button>\r\n } @else if (showClearComputed) {\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 (mousedown)=\"$event.preventDefault()\"\r\n (click)=\"clear()\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">cancel</span>\r\n </button>\r\n }\r\n</div>\r\n\r\n@if (showHint) {\r\n <span [id]=\"helpId\" class=\"ius-tf__hint\">{{ hint }}</span>\r\n}\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}.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;cursor:not-allowed}: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,.ius-tf__sufix{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-tf__prefix .ius-icon,.ius-tf__sufix .ius-icon{font-size:var(--_tf-icon-size);line-height:1}: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__input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--_tf-fs);line-height:var(--_tf-lh);color:var(--_tf-fg);min-width:0;padding:0}.ius-tf__input::placeholder{color:var(--_tf-placeholder)}.ius-tf__input:disabled{cursor:not-allowed;color:var(--ius-text-disabled)}:host([data-error=true]) .ius-tf__input{color:var(--ius-text-primary)}.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)}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1411
1411
|
}
|
|
1412
1412
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TextFieldComponent, decorators: [{
|
|
1413
1413
|
type: Component,
|
|
@@ -1423,7 +1423,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
1423
1423
|
'[attr.data-focused]': 'focused() || null',
|
|
1424
1424
|
'[attr.data-error]': 'error || null',
|
|
1425
1425
|
'[attr.data-disabled]': 'disabled || null',
|
|
1426
|
-
}, template: "@if (label) {\n <label [for]=\"inputId\" class=\"ius-tf__label\">\n @if (required) {\n <span class=\"ius-tf__required\" aria-hidden=\"true\"></span>\n }\n <span>{{ label }}</span>\n @if (showIconHelp) {\n <ius-popover\n [title]=\"iconHelpTitle\"\n [content]=\"iconHelpContent\"\n [disabled]=\"!iconHelpTitle && !iconHelpContent\"\n >\n <span\n class=\"ius-tf__help-icon\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=\"Ayuda\"\n >\n <span translate=\"no\" class=\"ius-icon\">help</span>\n </span>\n </ius-popover>\n }\n <span class=\"ius-tf__colon\">:</span>\n </label>\n}\n\n<div class=\"ius-tf__field\">\n @if (prefixIcon) {\n <span class=\"ius-tf__prefix\" aria-hidden=\"true\">\n <span translate=\"no\" class=\"ius-icon\">{{ prefixIcon }}</span>\n </span>\n }\n\n <input\n [id]=\"inputId\"\n class=\"ius-tf__input\"\n [type]=\"inputType\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [value]=\"value()\"\n [disabled]=\"disabled\"\n [attr.aria-invalid]=\"error || null\"\n [attr.aria-required]=\"required || null\"\n [attr.aria-describedby]=\"showHint ? helpId : null\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n />\n\n @if (isPassword) {\n <button\n type=\"button\"\n class=\"ius-tf__clear\"\n [attr.aria-label]=\"revealed() ? 'Ocultar contenido' : 'Mostrar contenido'\"\n [attr.aria-pressed]=\"revealed()\"\n tabindex=\"-1\"\n [disabled]=\"disabled\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"toggleReveal()\"\n >\n <span translate=\"no\" class=\"ius-icon\">{{ revealed() ? 'visibility_off' : 'visibility' }}</span>\n </button>\n } @else if (showClearComputed) {\n <button\n type=\"button\"\n class=\"ius-tf__clear\"\n aria-label=\"Limpiar campo\"\n tabindex=\"-1\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"clear()\"\n >\n <span translate=\"no\" class=\"ius-icon\">cancel</span>\n </button>\n }\n</div>\n\n@if (showHint) {\n <span [id]=\"helpId\" class=\"ius-tf__hint\">{{ hint }}</span>\n}\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}.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;cursor:not-allowed}: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,.ius-tf__sufix{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-tf__prefix .ius-icon,.ius-tf__sufix .ius-icon{font-size:var(--_tf-icon-size);line-height:1}: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__input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--_tf-fs);line-height:var(--_tf-lh);color:var(--_tf-fg);min-width:0;padding:0}.ius-tf__input::placeholder{color:var(--_tf-placeholder)}.ius-tf__input:disabled{cursor:not-allowed;color:var(--ius-text-disabled)}:host([data-error=true]) .ius-tf__input{color:var(--ius-text-primary)}.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)}\n"] }]
|
|
1426
|
+
}, template: "@if (label) {\r\n <label [for]=\"inputId\" 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 <ius-popover\r\n [title]=\"iconHelpTitle\"\r\n [content]=\"iconHelpContent\"\r\n [disabled]=\"!iconHelpTitle && !iconHelpContent\"\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 class=\"ius-tf__field\">\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 <input\r\n [id]=\"inputId\"\r\n class=\"ius-tf__input\"\r\n [type]=\"inputType\"\r\n [name]=\"name\"\r\n [placeholder]=\"placeholder\"\r\n [value]=\"value()\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-invalid]=\"error || null\"\r\n [attr.aria-required]=\"required || null\"\r\n [attr.aria-describedby]=\"showHint ? helpId : null\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n />\r\n\r\n @if (isPassword) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-tf__clear\"\r\n [attr.aria-label]=\"revealed() ? 'Ocultar contenido' : 'Mostrar contenido'\"\r\n [attr.aria-pressed]=\"revealed()\"\r\n tabindex=\"-1\"\r\n [disabled]=\"disabled\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (click)=\"toggleReveal()\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">{{ revealed() ? 'visibility_off' : 'visibility' }}</span>\r\n </button>\r\n } @else if (showClearComputed) {\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 (mousedown)=\"$event.preventDefault()\"\r\n (click)=\"clear()\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">cancel</span>\r\n </button>\r\n }\r\n</div>\r\n\r\n@if (showHint) {\r\n <span [id]=\"helpId\" class=\"ius-tf__hint\">{{ hint }}</span>\r\n}\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}.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;cursor:not-allowed}: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,.ius-tf__sufix{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-tf__prefix .ius-icon,.ius-tf__sufix .ius-icon{font-size:var(--_tf-icon-size);line-height:1}: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__input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--_tf-fs);line-height:var(--_tf-lh);color:var(--_tf-fg);min-width:0;padding:0}.ius-tf__input::placeholder{color:var(--_tf-placeholder)}.ius-tf__input:disabled{cursor:not-allowed;color:var(--ius-text-disabled)}:host([data-error=true]) .ius-tf__input{color:var(--ius-text-primary)}.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)}\n"] }]
|
|
1427
1427
|
}], propDecorators: { label: [{
|
|
1428
1428
|
type: Input
|
|
1429
1429
|
}], placeholder: [{
|
|
@@ -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()) {\r\n <span class=\"ius-alert__icon\" [attr.data-chip]=\"chip() || null\" 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-alert__main\">\r\n @if (showHead()) {\r\n <div class=\"ius-alert__head\">\r\n <div class=\"ius-alert__headtext\">\r\n @if (overline() != null) {\r\n <span class=\"ius-alert__overline\">{{ overline() }}</span>\r\n }\r\n @if (title() != null) {\r\n <div class=\"ius-alert__title\">{{ title() }}</div>\r\n }\r\n </div>\r\n @if (meta() != null) {\r\n <span class=\"ius-alert__meta\">{{ meta() }}</span>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"ius-alert__body\"><ng-content /></div>\r\n\r\n @if (hasActions()) {\r\n <div class=\"ius-alert__actions\" [attr.data-divider]=\"actionsDivider() ? null : 'false'\">\r\n <ng-content select=\"[iusAlertActions]\" />\r\n </div>\r\n }\r\n</div>\r\n\r\n@if (showTrailing()) {\r\n <div class=\"ius-alert__trailing\">\r\n <ng-content select=\"[iusAlertTrailing]\" />\r\n </div>\r\n}\r\n\r\n@if (closable()) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-alert__close\"\r\n [attr.aria-label]=\"closeLabel()\"\r\n (click)=\"closed.emit()\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">close</span>\r\n </button>\r\n}\r\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()) {\r\n <span class=\"ius-alert__icon\" [attr.data-chip]=\"chip() || null\" 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-alert__main\">\r\n @if (showHead()) {\r\n <div class=\"ius-alert__head\">\r\n <div class=\"ius-alert__headtext\">\r\n @if (overline() != null) {\r\n <span class=\"ius-alert__overline\">{{ overline() }}</span>\r\n }\r\n @if (title() != null) {\r\n <div class=\"ius-alert__title\">{{ title() }}</div>\r\n }\r\n </div>\r\n @if (meta() != null) {\r\n <span class=\"ius-alert__meta\">{{ meta() }}</span>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"ius-alert__body\"><ng-content /></div>\r\n\r\n @if (hasActions()) {\r\n <div class=\"ius-alert__actions\" [attr.data-divider]=\"actionsDivider() ? null : 'false'\">\r\n <ng-content select=\"[iusAlertActions]\" />\r\n </div>\r\n }\r\n</div>\r\n\r\n@if (showTrailing()) {\r\n <div class=\"ius-alert__trailing\">\r\n <ng-content select=\"[iusAlertTrailing]\" />\r\n </div>\r\n}\r\n\r\n@if (closable()) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-alert__close\"\r\n [attr.aria-label]=\"closeLabel()\"\r\n (click)=\"closed.emit()\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">close</span>\r\n </button>\r\n}\r\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') {\r\n <img\r\n class=\"ius-avt__img\"\r\n [src]=\"src\"\r\n [attr.alt]=\"imgAlt\"\r\n (error)=\"onImgError()\"\r\n draggable=\"false\"\r\n />\r\n} @else if (variant === 'icon') {\r\n <span class=\"ius-avt__icon\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ icon }}</span>\r\n </span>\r\n} @else {\r\n <span class=\"ius-avt__mono\" aria-hidden=\"true\">{{ initials }}</span>\r\n}\r\n\r\n@if (editable) {\r\n <span class=\"ius-avt__overlay\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ editIcon }}</span>\r\n </span>\r\n}\r\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') {\r\n <img\r\n class=\"ius-avt__img\"\r\n [src]=\"src\"\r\n [attr.alt]=\"imgAlt\"\r\n (error)=\"onImgError()\"\r\n draggable=\"false\"\r\n />\r\n} @else if (variant === 'icon') {\r\n <span class=\"ius-avt__icon\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ icon }}</span>\r\n </span>\r\n} @else {\r\n <span class=\"ius-avt__mono\" aria-hidden=\"true\">{{ initials }}</span>\r\n}\r\n\r\n@if (editable) {\r\n <span class=\"ius-avt__overlay\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ editIcon }}</span>\r\n </span>\r\n}\r\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: [{
|
|
@@ -2874,11 +2874,11 @@ class IconButtonComponent {
|
|
|
2874
2874
|
this.clicked.emit(event);
|
|
2875
2875
|
}
|
|
2876
2876
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2877
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.0.8", type: IconButtonComponent, isStandalone: true, selector: "ius-icon-button", inputs: { icon: "icon", variant: "variant", size: "size", shape: "shape", disabled: ["disabled", "disabled", booleanAttribute], type: "type", ariaLabel: "ariaLabel", tooltip: "tooltip", tooltipPlacement: "tooltipPlacement" }, outputs: { clicked: "clicked" }, host: { classAttribute: "ius-iconbtn-host" }, ngImport: i0, template: "<!-- Sin `tooltip` el ius-tooltip queda inerte (disabled) y el bot\u00F3n pasa tal cual. -->\n<ius-tooltip [label]=\"tooltip\" [placement]=\"tooltipPlacement\">\n <button\n class=\"ius-iconbtn\"\n [type]=\"type\"\n [attr.data-variant]=\"variant\"\n [attr.data-size]=\"size\"\n [attr.data-shape]=\"shape\"\n [disabled]=\"disabled\"\n [attr.aria-disabled]=\"disabled || null\"\n [attr.aria-label]=\"computedLabel\"\n (click)=\"onClick($event)\"\n >\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ icon }}</span>\n </button>\n</ius-tooltip>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}.ius-iconbtn{-webkit-user-select:none;--_ib-size: 36px;--_ib-icon: var(--ius-icon-md);--_ib-bg: transparent;--_ib-bg-hover: var(--ius-neutral-3);--_ib-bg-pressed: var(--ius-success-500);--_ib-bg-disabled: transparent;--_ib-fg: var(--ius-text-primary);--_ib-fg-hover: var(--ius-text-primary);--_ib-fg-pressed: var(--ius-neutral-white);--_ib-fg-disabled: var(--ius-text-disabled);display:inline-flex;align-items:center;justify-content:center;width:var(--_ib-size, 36px);height:var(--_ib-size, 36px);padding:0;border:0;border-radius:var(--ius-radius-md);background:var(--_ib-bg);color:var(--_ib-fg);cursor:pointer;user-select:none;outline:none;transition:background-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);-webkit-tap-highlight-color:transparent}.ius-iconbtn[data-size=small]{--_ib-size: 28px;--_ib-icon: var(--ius-icon-sm)}.ius-iconbtn[data-size=large]{--_ib-size: var(--ius-hit-target-min, 44px);--_ib-icon: var(--ius-icon-lg)}.ius-iconbtn[data-shape=circle]{border-radius:var(--ius-radius-pill)}.ius-iconbtn[data-shape=circle][data-variant=secondary]{--_ib-bg: var(--ius-neutral-white);--_ib-bg-hover: var(--ius-success-100);--_ib-bg-pressed: var(--ius-success-500);--_ib-bg-disabled: var(--ius-neutral-2);--_ib-fg: var(--ius-success-600);--_ib-fg-hover: var(--ius-success-600);--_ib-fg-pressed: var(--ius-neutral-white);--_ib-fg-disabled: var(--ius-text-disabled);border:1.5px solid var(--ius-success-500)}.ius-iconbtn[data-shape=circle][data-variant=secondary]:disabled,.ius-iconbtn[data-shape=circle][data-variant=secondary][aria-disabled=true]{border-color:var(--ius-neutral-4)}.ius-iconbtn[data-shape=circle][data-variant=secondary]:active:not(:disabled),:host([data-force=pressed]) .ius-iconbtn[data-shape=circle][data-variant=secondary]:not(:disabled){border-color:var(--ius-success-500)}.ius-iconbtn[data-shape=circle][data-variant=tertiary]{--_ib-bg-pressed: var(--ius-primary-900)}.ius-iconbtn:hover:not(:disabled),:host([data-force=hover]) .ius-iconbtn:not(:disabled){background:var(--_ib-bg-hover);color:var(--_ib-fg-hover)}.ius-iconbtn:active:not(:disabled),:host([data-force=pressed]) .ius-iconbtn:not(:disabled){background:var(--_ib-bg-pressed);color:var(--_ib-fg-pressed)}.ius-iconbtn:focus-visible{box-shadow:var(--ius-focus-ring)}.ius-iconbtn:disabled,.ius-iconbtn[aria-disabled=true]{background:var(--_ib-bg-disabled);color:var(--_ib-fg-disabled);cursor:not-allowed}.ius-iconbtn[data-variant=secondary]{--_ib-bg: var(--ius-neutral-2);--_ib-bg-hover: var(--ius-neutral-4);--_ib-bg-pressed: var(--ius-success-500);--_ib-bg-disabled: var(--ius-neutral-2);--_ib-fg: var(--ius-success-600);--_ib-fg-hover: var(--ius-success-600);--_ib-fg-pressed: var(--ius-neutral-white);--_ib-fg-disabled: var(--ius-text-disabled)}.ius-iconbtn[data-variant=tertiary]{--_ib-bg: transparent;--_ib-bg-hover: var(--ius-neutral-3);--_ib-bg-pressed: var(--ius-success-500);--_ib-bg-disabled: transparent;--_ib-fg: var(--ius-text-secondary);--_ib-fg-hover: var(--ius-text-secondary);--_ib-fg-pressed: var(--ius-neutral-white);--_ib-fg-disabled: var(--ius-text-disabled)}.ius-iconbtn .ius-icon{font-size:var(--_ib-icon, var(--ius-icon-md));line-height:1}\n"], dependencies: [{ kind: "component", type: TooltipComponent, selector: "ius-tooltip", inputs: ["label", "placement", "trigger", "offset", "showArrow", "disabled", "open", "defaultOpen"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2877
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.0.8", type: IconButtonComponent, isStandalone: true, selector: "ius-icon-button", inputs: { icon: "icon", variant: "variant", size: "size", shape: "shape", disabled: ["disabled", "disabled", booleanAttribute], type: "type", ariaLabel: "ariaLabel", tooltip: "tooltip", tooltipPlacement: "tooltipPlacement" }, outputs: { clicked: "clicked" }, host: { classAttribute: "ius-iconbtn-host" }, ngImport: i0, template: "<!-- Sin `tooltip` el ius-tooltip queda inerte (disabled) y el bot\u00F3n pasa tal cual. -->\r\n<ius-tooltip [label]=\"tooltip\" [placement]=\"tooltipPlacement\">\r\n <button\r\n class=\"ius-iconbtn\"\r\n [type]=\"type\"\r\n [attr.data-variant]=\"variant\"\r\n [attr.data-size]=\"size\"\r\n [attr.data-shape]=\"shape\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-disabled]=\"disabled || null\"\r\n [attr.aria-label]=\"computedLabel\"\r\n (click)=\"onClick($event)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ icon }}</span>\r\n </button>\r\n</ius-tooltip>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}.ius-iconbtn{-webkit-user-select:none;--_ib-size: 36px;--_ib-icon: var(--ius-icon-md);--_ib-bg: transparent;--_ib-bg-hover: var(--ius-neutral-3);--_ib-bg-pressed: var(--ius-success-500);--_ib-bg-disabled: transparent;--_ib-fg: var(--ius-text-primary);--_ib-fg-hover: var(--ius-text-primary);--_ib-fg-pressed: var(--ius-neutral-white);--_ib-fg-disabled: var(--ius-text-disabled);display:inline-flex;align-items:center;justify-content:center;width:var(--_ib-size, 36px);height:var(--_ib-size, 36px);padding:0;border:0;border-radius:var(--ius-radius-md);background:var(--_ib-bg);color:var(--_ib-fg);cursor:pointer;user-select:none;outline:none;transition:background-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);-webkit-tap-highlight-color:transparent}.ius-iconbtn[data-size=small]{--_ib-size: 28px;--_ib-icon: var(--ius-icon-sm)}.ius-iconbtn[data-size=large]{--_ib-size: var(--ius-hit-target-min, 44px);--_ib-icon: var(--ius-icon-lg)}.ius-iconbtn[data-shape=circle]{border-radius:var(--ius-radius-pill)}.ius-iconbtn[data-shape=circle][data-variant=secondary]{--_ib-bg: var(--ius-neutral-white);--_ib-bg-hover: var(--ius-success-100);--_ib-bg-pressed: var(--ius-success-500);--_ib-bg-disabled: var(--ius-neutral-2);--_ib-fg: var(--ius-success-600);--_ib-fg-hover: var(--ius-success-600);--_ib-fg-pressed: var(--ius-neutral-white);--_ib-fg-disabled: var(--ius-text-disabled);border:1.5px solid var(--ius-success-500)}.ius-iconbtn[data-shape=circle][data-variant=secondary]:disabled,.ius-iconbtn[data-shape=circle][data-variant=secondary][aria-disabled=true]{border-color:var(--ius-neutral-4)}.ius-iconbtn[data-shape=circle][data-variant=secondary]:active:not(:disabled),:host([data-force=pressed]) .ius-iconbtn[data-shape=circle][data-variant=secondary]:not(:disabled){border-color:var(--ius-success-500)}.ius-iconbtn[data-shape=circle][data-variant=tertiary]{--_ib-bg-pressed: var(--ius-primary-900)}.ius-iconbtn:hover:not(:disabled),:host([data-force=hover]) .ius-iconbtn:not(:disabled){background:var(--_ib-bg-hover);color:var(--_ib-fg-hover)}.ius-iconbtn:active:not(:disabled),:host([data-force=pressed]) .ius-iconbtn:not(:disabled){background:var(--_ib-bg-pressed);color:var(--_ib-fg-pressed)}.ius-iconbtn:focus-visible{box-shadow:var(--ius-focus-ring)}.ius-iconbtn:disabled,.ius-iconbtn[aria-disabled=true]{background:var(--_ib-bg-disabled);color:var(--_ib-fg-disabled);cursor:not-allowed}.ius-iconbtn[data-variant=secondary]{--_ib-bg: var(--ius-neutral-2);--_ib-bg-hover: var(--ius-neutral-4);--_ib-bg-pressed: var(--ius-success-500);--_ib-bg-disabled: var(--ius-neutral-2);--_ib-fg: var(--ius-success-600);--_ib-fg-hover: var(--ius-success-600);--_ib-fg-pressed: var(--ius-neutral-white);--_ib-fg-disabled: var(--ius-text-disabled)}.ius-iconbtn[data-variant=tertiary]{--_ib-bg: transparent;--_ib-bg-hover: var(--ius-neutral-3);--_ib-bg-pressed: var(--ius-success-500);--_ib-bg-disabled: transparent;--_ib-fg: var(--ius-text-secondary);--_ib-fg-hover: var(--ius-text-secondary);--_ib-fg-pressed: var(--ius-neutral-white);--_ib-fg-disabled: var(--ius-text-disabled)}.ius-iconbtn .ius-icon{font-size:var(--_ib-icon, var(--ius-icon-md));line-height:1}\n"], dependencies: [{ kind: "component", type: TooltipComponent, selector: "ius-tooltip", inputs: ["label", "placement", "trigger", "offset", "showArrow", "disabled", "open", "defaultOpen"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2878
2878
|
}
|
|
2879
2879
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: IconButtonComponent, decorators: [{
|
|
2880
2880
|
type: Component,
|
|
2881
|
-
args: [{ selector: 'ius-icon-button', standalone: true, imports: [TooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ius-iconbtn-host' }, template: "<!-- Sin `tooltip` el ius-tooltip queda inerte (disabled) y el bot\u00F3n pasa tal cual. -->\n<ius-tooltip [label]=\"tooltip\" [placement]=\"tooltipPlacement\">\n <button\n class=\"ius-iconbtn\"\n [type]=\"type\"\n [attr.data-variant]=\"variant\"\n [attr.data-size]=\"size\"\n [attr.data-shape]=\"shape\"\n [disabled]=\"disabled\"\n [attr.aria-disabled]=\"disabled || null\"\n [attr.aria-label]=\"computedLabel\"\n (click)=\"onClick($event)\"\n >\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ icon }}</span>\n </button>\n</ius-tooltip>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}.ius-iconbtn{-webkit-user-select:none;--_ib-size: 36px;--_ib-icon: var(--ius-icon-md);--_ib-bg: transparent;--_ib-bg-hover: var(--ius-neutral-3);--_ib-bg-pressed: var(--ius-success-500);--_ib-bg-disabled: transparent;--_ib-fg: var(--ius-text-primary);--_ib-fg-hover: var(--ius-text-primary);--_ib-fg-pressed: var(--ius-neutral-white);--_ib-fg-disabled: var(--ius-text-disabled);display:inline-flex;align-items:center;justify-content:center;width:var(--_ib-size, 36px);height:var(--_ib-size, 36px);padding:0;border:0;border-radius:var(--ius-radius-md);background:var(--_ib-bg);color:var(--_ib-fg);cursor:pointer;user-select:none;outline:none;transition:background-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);-webkit-tap-highlight-color:transparent}.ius-iconbtn[data-size=small]{--_ib-size: 28px;--_ib-icon: var(--ius-icon-sm)}.ius-iconbtn[data-size=large]{--_ib-size: var(--ius-hit-target-min, 44px);--_ib-icon: var(--ius-icon-lg)}.ius-iconbtn[data-shape=circle]{border-radius:var(--ius-radius-pill)}.ius-iconbtn[data-shape=circle][data-variant=secondary]{--_ib-bg: var(--ius-neutral-white);--_ib-bg-hover: var(--ius-success-100);--_ib-bg-pressed: var(--ius-success-500);--_ib-bg-disabled: var(--ius-neutral-2);--_ib-fg: var(--ius-success-600);--_ib-fg-hover: var(--ius-success-600);--_ib-fg-pressed: var(--ius-neutral-white);--_ib-fg-disabled: var(--ius-text-disabled);border:1.5px solid var(--ius-success-500)}.ius-iconbtn[data-shape=circle][data-variant=secondary]:disabled,.ius-iconbtn[data-shape=circle][data-variant=secondary][aria-disabled=true]{border-color:var(--ius-neutral-4)}.ius-iconbtn[data-shape=circle][data-variant=secondary]:active:not(:disabled),:host([data-force=pressed]) .ius-iconbtn[data-shape=circle][data-variant=secondary]:not(:disabled){border-color:var(--ius-success-500)}.ius-iconbtn[data-shape=circle][data-variant=tertiary]{--_ib-bg-pressed: var(--ius-primary-900)}.ius-iconbtn:hover:not(:disabled),:host([data-force=hover]) .ius-iconbtn:not(:disabled){background:var(--_ib-bg-hover);color:var(--_ib-fg-hover)}.ius-iconbtn:active:not(:disabled),:host([data-force=pressed]) .ius-iconbtn:not(:disabled){background:var(--_ib-bg-pressed);color:var(--_ib-fg-pressed)}.ius-iconbtn:focus-visible{box-shadow:var(--ius-focus-ring)}.ius-iconbtn:disabled,.ius-iconbtn[aria-disabled=true]{background:var(--_ib-bg-disabled);color:var(--_ib-fg-disabled);cursor:not-allowed}.ius-iconbtn[data-variant=secondary]{--_ib-bg: var(--ius-neutral-2);--_ib-bg-hover: var(--ius-neutral-4);--_ib-bg-pressed: var(--ius-success-500);--_ib-bg-disabled: var(--ius-neutral-2);--_ib-fg: var(--ius-success-600);--_ib-fg-hover: var(--ius-success-600);--_ib-fg-pressed: var(--ius-neutral-white);--_ib-fg-disabled: var(--ius-text-disabled)}.ius-iconbtn[data-variant=tertiary]{--_ib-bg: transparent;--_ib-bg-hover: var(--ius-neutral-3);--_ib-bg-pressed: var(--ius-success-500);--_ib-bg-disabled: transparent;--_ib-fg: var(--ius-text-secondary);--_ib-fg-hover: var(--ius-text-secondary);--_ib-fg-pressed: var(--ius-neutral-white);--_ib-fg-disabled: var(--ius-text-disabled)}.ius-iconbtn .ius-icon{font-size:var(--_ib-icon, var(--ius-icon-md));line-height:1}\n"] }]
|
|
2881
|
+
args: [{ selector: 'ius-icon-button', standalone: true, imports: [TooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ius-iconbtn-host' }, template: "<!-- Sin `tooltip` el ius-tooltip queda inerte (disabled) y el bot\u00F3n pasa tal cual. -->\r\n<ius-tooltip [label]=\"tooltip\" [placement]=\"tooltipPlacement\">\r\n <button\r\n class=\"ius-iconbtn\"\r\n [type]=\"type\"\r\n [attr.data-variant]=\"variant\"\r\n [attr.data-size]=\"size\"\r\n [attr.data-shape]=\"shape\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-disabled]=\"disabled || null\"\r\n [attr.aria-label]=\"computedLabel\"\r\n (click)=\"onClick($event)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ icon }}</span>\r\n </button>\r\n</ius-tooltip>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}.ius-iconbtn{-webkit-user-select:none;--_ib-size: 36px;--_ib-icon: var(--ius-icon-md);--_ib-bg: transparent;--_ib-bg-hover: var(--ius-neutral-3);--_ib-bg-pressed: var(--ius-success-500);--_ib-bg-disabled: transparent;--_ib-fg: var(--ius-text-primary);--_ib-fg-hover: var(--ius-text-primary);--_ib-fg-pressed: var(--ius-neutral-white);--_ib-fg-disabled: var(--ius-text-disabled);display:inline-flex;align-items:center;justify-content:center;width:var(--_ib-size, 36px);height:var(--_ib-size, 36px);padding:0;border:0;border-radius:var(--ius-radius-md);background:var(--_ib-bg);color:var(--_ib-fg);cursor:pointer;user-select:none;outline:none;transition:background-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);-webkit-tap-highlight-color:transparent}.ius-iconbtn[data-size=small]{--_ib-size: 28px;--_ib-icon: var(--ius-icon-sm)}.ius-iconbtn[data-size=large]{--_ib-size: var(--ius-hit-target-min, 44px);--_ib-icon: var(--ius-icon-lg)}.ius-iconbtn[data-shape=circle]{border-radius:var(--ius-radius-pill)}.ius-iconbtn[data-shape=circle][data-variant=secondary]{--_ib-bg: var(--ius-neutral-white);--_ib-bg-hover: var(--ius-success-100);--_ib-bg-pressed: var(--ius-success-500);--_ib-bg-disabled: var(--ius-neutral-2);--_ib-fg: var(--ius-success-600);--_ib-fg-hover: var(--ius-success-600);--_ib-fg-pressed: var(--ius-neutral-white);--_ib-fg-disabled: var(--ius-text-disabled);border:1.5px solid var(--ius-success-500)}.ius-iconbtn[data-shape=circle][data-variant=secondary]:disabled,.ius-iconbtn[data-shape=circle][data-variant=secondary][aria-disabled=true]{border-color:var(--ius-neutral-4)}.ius-iconbtn[data-shape=circle][data-variant=secondary]:active:not(:disabled),:host([data-force=pressed]) .ius-iconbtn[data-shape=circle][data-variant=secondary]:not(:disabled){border-color:var(--ius-success-500)}.ius-iconbtn[data-shape=circle][data-variant=tertiary]{--_ib-bg-pressed: var(--ius-primary-900)}.ius-iconbtn:hover:not(:disabled),:host([data-force=hover]) .ius-iconbtn:not(:disabled){background:var(--_ib-bg-hover);color:var(--_ib-fg-hover)}.ius-iconbtn:active:not(:disabled),:host([data-force=pressed]) .ius-iconbtn:not(:disabled){background:var(--_ib-bg-pressed);color:var(--_ib-fg-pressed)}.ius-iconbtn:focus-visible{box-shadow:var(--ius-focus-ring)}.ius-iconbtn:disabled,.ius-iconbtn[aria-disabled=true]{background:var(--_ib-bg-disabled);color:var(--_ib-fg-disabled);cursor:not-allowed}.ius-iconbtn[data-variant=secondary]{--_ib-bg: var(--ius-neutral-2);--_ib-bg-hover: var(--ius-neutral-4);--_ib-bg-pressed: var(--ius-success-500);--_ib-bg-disabled: var(--ius-neutral-2);--_ib-fg: var(--ius-success-600);--_ib-fg-hover: var(--ius-success-600);--_ib-fg-pressed: var(--ius-neutral-white);--_ib-fg-disabled: var(--ius-text-disabled)}.ius-iconbtn[data-variant=tertiary]{--_ib-bg: transparent;--_ib-bg-hover: var(--ius-neutral-3);--_ib-bg-pressed: var(--ius-success-500);--_ib-bg-disabled: transparent;--_ib-fg: var(--ius-text-secondary);--_ib-fg-hover: var(--ius-text-secondary);--_ib-fg-pressed: var(--ius-neutral-white);--_ib-fg-disabled: var(--ius-text-disabled)}.ius-iconbtn .ius-icon{font-size:var(--_ib-icon, var(--ius-icon-md));line-height:1}\n"] }]
|
|
2882
2882
|
}], propDecorators: { icon: [{
|
|
2883
2883
|
type: Input,
|
|
2884
2884
|
args: [{ required: true }]
|
|
@@ -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`;
|
|
@@ -3370,7 +3370,7 @@ class LoadingMarkComponent {
|
|
|
3370
3370
|
return this.surface === 'dark' ? 'var(--ius-primary-600)' : 'var(--ius-primary-900)';
|
|
3371
3371
|
}
|
|
3372
3372
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LoadingMarkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3373
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.0.8", type: LoadingMarkComponent, isStandalone: true, selector: "ius-loading-mark", inputs: { size: ["size", "size", numberAttribute], surface: "surface", paused: ["paused", "paused", booleanAttribute], ariaLabel: "ariaLabel" }, host: { attributes: { "role": "status", "aria-live": "polite" }, properties: { "attr.data-surface": "surface", "attr.data-paused": "paused ? 'true' : null", "attr.aria-label": "ariaLabel" } }, ngImport: i0, template: "<svg\
|
|
3373
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.0.8", type: LoadingMarkComponent, isStandalone: true, selector: "ius-loading-mark", inputs: { size: ["size", "size", numberAttribute], surface: "surface", paused: ["paused", "paused", booleanAttribute], ariaLabel: "ariaLabel" }, host: { attributes: { "role": "status", "aria-live": "polite" }, properties: { "attr.data-surface": "surface", "attr.data-paused": "paused ? 'true' : null", "attr.aria-label": "ariaLabel" } }, ngImport: i0, template: "<svg\n class=\"ius-loadmark__svg\"\n [attr.width]=\"size\"\n [attr.height]=\"size\"\n viewBox=\"-16 -16 132 132\"\n aria-hidden=\"true\"\n>\n <defs>\n <!-- Degradado base (navy \u00B7 navy\u2192cian en dark) -->\n <linearGradient\n [attr.id]=\"baseId\"\n gradientUnits=\"userSpaceOnUse\"\n x1=\"6\"\n y1=\"94\"\n x2=\"94\"\n y2=\"6\"\n >\n <stop offset=\"0\" [attr.stop-color]=\"baseFrom\" />\n <stop offset=\"1\" [attr.stop-color]=\"baseTo\" />\n </linearGradient>\n\n <!-- Glow del cometa -->\n <radialGradient [attr.id]=\"glowId\">\n <stop offset=\"0%\" stop-color=\"var(--ius-primary-100)\" />\n <stop offset=\"35%\" stop-color=\"var(--ius-primary-400)\" />\n <stop offset=\"100%\" stop-color=\"var(--ius-primary-400)\" stop-opacity=\"0\" />\n </radialGradient>\n\n <!-- Desenfoque de la cola -->\n <filter [attr.id]=\"softId\" x=\"-60%\" y=\"-60%\" width=\"220%\" height=\"220%\">\n <feGaussianBlur stdDeviation=\"5\" />\n </filter>\n\n <!-- M\u00E1scara: tres fichas deslizantes -->\n <mask [attr.id]=\"maskId\" maskUnits=\"userSpaceOnUse\">\n <g class=\"ius-loadmark__tile ius-loadmark__tile--a\">\n <rect\n x=\"0\"\n y=\"0\"\n width=\"38\"\n height=\"38\"\n rx=\"10\"\n fill=\"none\"\n stroke=\"var(--ius-neutral-white)\"\n stroke-width=\"6\"\n stroke-linejoin=\"round\"\n />\n </g>\n <g class=\"ius-loadmark__tile ius-loadmark__tile--b\">\n <rect\n x=\"0\"\n y=\"0\"\n width=\"38\"\n height=\"38\"\n rx=\"10\"\n fill=\"none\"\n stroke=\"var(--ius-neutral-white)\"\n stroke-width=\"6\"\n stroke-linejoin=\"round\"\n />\n </g>\n <g class=\"ius-loadmark__tile ius-loadmark__tile--c\">\n <rect\n x=\"0\"\n y=\"0\"\n width=\"38\"\n height=\"38\"\n rx=\"10\"\n fill=\"none\"\n stroke=\"var(--ius-neutral-white)\"\n stroke-width=\"6\"\n stroke-linejoin=\"round\"\n />\n </g>\n </mask>\n </defs>\n\n <!-- Giro del conjunto -->\n <g class=\"ius-loadmark__spin\">\n <g [attr.mask]=\"'url(#' + maskId + ')'\">\n <rect x=\"0\" y=\"0\" width=\"100\" height=\"100\" [attr.fill]=\"'url(#' + baseId + ')'\" />\n <!-- Cometa orbitando el contorno -->\n <g class=\"ius-loadmark__orbit\">\n <circle\n cx=\"50\"\n cy=\"4\"\n r=\"40\"\n [attr.fill]=\"'url(#' + glowId + ')'\"\n [attr.filter]=\"'url(#' + softId + ')'\"\n />\n </g>\n </g>\n </g>\n</svg>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;line-height:0;color:var(--ius-primary-900)}.ius-loadmark__svg{display:block}.ius-loadmark__spin{transform-box:view-box;transform-origin:50px 50px;animation:ius-lm-spin var(--ius-duration-ambient) linear infinite;animation-play-state:var(--ius-motion-loop)}@keyframes ius-lm-spin{to{transform:rotate(360deg)}}.ius-loadmark__orbit{transform-box:view-box;transform-origin:50px 50px;animation:ius-lm-orbit 2s linear infinite;animation-play-state:var(--ius-motion-loop)}@keyframes ius-lm-orbit{to{transform:rotate(360deg)}}.ius-loadmark__tile{animation-duration:5s;animation-iteration-count:infinite;animation-timing-function:var(--ius-ease-ambient);animation-play-state:var(--ius-motion-loop)}.ius-loadmark__tile--a{animation-name:ius-lm-a}.ius-loadmark__tile--b{animation-name:ius-lm-b}.ius-loadmark__tile--c{animation-name:ius-lm-c}@keyframes ius-lm-a{0%{transform:translate(5px,5px)}8.333%{transform:translate(57px,5px)}25%{transform:translate(57px,5px)}33.333%{transform:translate(57px,57px)}50%{transform:translate(57px,57px)}58.333%{transform:translate(5px,57px)}75%{transform:translate(5px,57px)}83.333%{transform:translate(5px,5px)}to{transform:translate(5px,5px)}}@keyframes ius-lm-b{0%{transform:translate(57px,57px)}16.667%{transform:translate(57px,57px)}25%{transform:translate(5px,57px)}41.667%{transform:translate(5px,57px)}50%{transform:translate(5px,5px)}66.667%{transform:translate(5px,5px)}75%{transform:translate(57px,5px)}91.667%{transform:translate(57px,5px)}to{transform:translate(57px,57px)}}@keyframes ius-lm-c{0%{transform:translate(5px,57px)}8.333%{transform:translate(5px,57px)}16.667%{transform:translate(5px,5px)}33.333%{transform:translate(5px,5px)}41.667%{transform:translate(57px,5px)}58.333%{transform:translate(57px,5px)}66.667%{transform:translate(57px,57px)}83.333%{transform:translate(57px,57px)}91.667%{transform:translate(5px,57px)}to{transform:translate(5px,57px)}}:host([data-paused=true]) .ius-loadmark__spin,:host([data-paused=true]) .ius-loadmark__orbit,:host([data-paused=true]) .ius-loadmark__tile{animation-play-state:paused}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3374
3374
|
}
|
|
3375
3375
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LoadingMarkComponent, decorators: [{
|
|
3376
3376
|
type: Component,
|
|
@@ -3380,7 +3380,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
3380
3380
|
'[attr.data-surface]': 'surface',
|
|
3381
3381
|
'[attr.data-paused]': "paused ? 'true' : null",
|
|
3382
3382
|
'[attr.aria-label]': 'ariaLabel',
|
|
3383
|
-
}, template: "<svg\
|
|
3383
|
+
}, template: "<svg\n class=\"ius-loadmark__svg\"\n [attr.width]=\"size\"\n [attr.height]=\"size\"\n viewBox=\"-16 -16 132 132\"\n aria-hidden=\"true\"\n>\n <defs>\n <!-- Degradado base (navy \u00B7 navy\u2192cian en dark) -->\n <linearGradient\n [attr.id]=\"baseId\"\n gradientUnits=\"userSpaceOnUse\"\n x1=\"6\"\n y1=\"94\"\n x2=\"94\"\n y2=\"6\"\n >\n <stop offset=\"0\" [attr.stop-color]=\"baseFrom\" />\n <stop offset=\"1\" [attr.stop-color]=\"baseTo\" />\n </linearGradient>\n\n <!-- Glow del cometa -->\n <radialGradient [attr.id]=\"glowId\">\n <stop offset=\"0%\" stop-color=\"var(--ius-primary-100)\" />\n <stop offset=\"35%\" stop-color=\"var(--ius-primary-400)\" />\n <stop offset=\"100%\" stop-color=\"var(--ius-primary-400)\" stop-opacity=\"0\" />\n </radialGradient>\n\n <!-- Desenfoque de la cola -->\n <filter [attr.id]=\"softId\" x=\"-60%\" y=\"-60%\" width=\"220%\" height=\"220%\">\n <feGaussianBlur stdDeviation=\"5\" />\n </filter>\n\n <!-- M\u00E1scara: tres fichas deslizantes -->\n <mask [attr.id]=\"maskId\" maskUnits=\"userSpaceOnUse\">\n <g class=\"ius-loadmark__tile ius-loadmark__tile--a\">\n <rect\n x=\"0\"\n y=\"0\"\n width=\"38\"\n height=\"38\"\n rx=\"10\"\n fill=\"none\"\n stroke=\"var(--ius-neutral-white)\"\n stroke-width=\"6\"\n stroke-linejoin=\"round\"\n />\n </g>\n <g class=\"ius-loadmark__tile ius-loadmark__tile--b\">\n <rect\n x=\"0\"\n y=\"0\"\n width=\"38\"\n height=\"38\"\n rx=\"10\"\n fill=\"none\"\n stroke=\"var(--ius-neutral-white)\"\n stroke-width=\"6\"\n stroke-linejoin=\"round\"\n />\n </g>\n <g class=\"ius-loadmark__tile ius-loadmark__tile--c\">\n <rect\n x=\"0\"\n y=\"0\"\n width=\"38\"\n height=\"38\"\n rx=\"10\"\n fill=\"none\"\n stroke=\"var(--ius-neutral-white)\"\n stroke-width=\"6\"\n stroke-linejoin=\"round\"\n />\n </g>\n </mask>\n </defs>\n\n <!-- Giro del conjunto -->\n <g class=\"ius-loadmark__spin\">\n <g [attr.mask]=\"'url(#' + maskId + ')'\">\n <rect x=\"0\" y=\"0\" width=\"100\" height=\"100\" [attr.fill]=\"'url(#' + baseId + ')'\" />\n <!-- Cometa orbitando el contorno -->\n <g class=\"ius-loadmark__orbit\">\n <circle\n cx=\"50\"\n cy=\"4\"\n r=\"40\"\n [attr.fill]=\"'url(#' + glowId + ')'\"\n [attr.filter]=\"'url(#' + softId + ')'\"\n />\n </g>\n </g>\n </g>\n</svg>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;line-height:0;color:var(--ius-primary-900)}.ius-loadmark__svg{display:block}.ius-loadmark__spin{transform-box:view-box;transform-origin:50px 50px;animation:ius-lm-spin var(--ius-duration-ambient) linear infinite;animation-play-state:var(--ius-motion-loop)}@keyframes ius-lm-spin{to{transform:rotate(360deg)}}.ius-loadmark__orbit{transform-box:view-box;transform-origin:50px 50px;animation:ius-lm-orbit 2s linear infinite;animation-play-state:var(--ius-motion-loop)}@keyframes ius-lm-orbit{to{transform:rotate(360deg)}}.ius-loadmark__tile{animation-duration:5s;animation-iteration-count:infinite;animation-timing-function:var(--ius-ease-ambient);animation-play-state:var(--ius-motion-loop)}.ius-loadmark__tile--a{animation-name:ius-lm-a}.ius-loadmark__tile--b{animation-name:ius-lm-b}.ius-loadmark__tile--c{animation-name:ius-lm-c}@keyframes ius-lm-a{0%{transform:translate(5px,5px)}8.333%{transform:translate(57px,5px)}25%{transform:translate(57px,5px)}33.333%{transform:translate(57px,57px)}50%{transform:translate(57px,57px)}58.333%{transform:translate(5px,57px)}75%{transform:translate(5px,57px)}83.333%{transform:translate(5px,5px)}to{transform:translate(5px,5px)}}@keyframes ius-lm-b{0%{transform:translate(57px,57px)}16.667%{transform:translate(57px,57px)}25%{transform:translate(5px,57px)}41.667%{transform:translate(5px,57px)}50%{transform:translate(5px,5px)}66.667%{transform:translate(5px,5px)}75%{transform:translate(57px,5px)}91.667%{transform:translate(57px,5px)}to{transform:translate(57px,57px)}}@keyframes ius-lm-c{0%{transform:translate(5px,57px)}8.333%{transform:translate(5px,57px)}16.667%{transform:translate(5px,5px)}33.333%{transform:translate(5px,5px)}41.667%{transform:translate(57px,5px)}58.333%{transform:translate(57px,5px)}66.667%{transform:translate(57px,57px)}83.333%{transform:translate(57px,57px)}91.667%{transform:translate(5px,57px)}to{transform:translate(5px,57px)}}:host([data-paused=true]) .ius-loadmark__spin,:host([data-paused=true]) .ius-loadmark__orbit,:host([data-paused=true]) .ius-loadmark__tile{animation-play-state:paused}\n"] }]
|
|
3384
3384
|
}], propDecorators: { size: [{
|
|
3385
3385
|
type: Input,
|
|
3386
3386
|
args: [{ transform: numberAttribute }]
|
|
@@ -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) {\r\n <div\r\n class=\"ius-empty__visual\"\r\n [attr.data-illustration]=\"hasIllustration ? 'true' : null\"\r\n aria-hidden=\"true\"\r\n >\r\n @if (illustrationTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"illustrationTemplate\" />\r\n } @else if (illusName) {\r\n <ius-illustration [name]=\"illusName\" [size]=\"illusSize\" />\r\n } @else {\r\n <span translate=\"no\" class=\"ius-icon\">{{ iconName }}</span>\r\n }\r\n </div>\r\n}\r\n\r\n@if (title != null || description != null) {\r\n <div class=\"ius-empty__text\">\r\n @if (title != null) {\r\n <div class=\"ius-empty__title\">{{ title }}</div>\r\n }\r\n @if (description != null) {\r\n <p class=\"ius-empty__desc\">{{ description }}</p>\r\n }\r\n </div>\r\n}\r\n\r\n@if (hasActions) {\r\n <div class=\"ius-empty__actions\">\r\n @if (actionsTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"actionsTemplate\" />\r\n } @else {\r\n @if (primary) {\r\n <ius-button\r\n [variant]=\"primary.variant || 'primary'\"\r\n [size]=\"btnSize\"\r\n [label]=\"primary.label\"\r\n [prefixIcon]=\"primary.icon\"\r\n [dynamic]=\"!!primary.dynamic\"\r\n [disabled]=\"!!primary.disabled\"\r\n (clicked)=\"primaryClick.emit($event)\"\r\n />\r\n }\r\n @if (secondary) {\r\n <ius-button\r\n [variant]=\"secondary.variant || 'secondary'\"\r\n [size]=\"btnSize\"\r\n [label]=\"secondary.label\"\r\n [prefixIcon]=\"secondary.icon\"\r\n [dynamic]=\"!!secondary.dynamic\"\r\n [disabled]=\"!!secondary.disabled\"\r\n (clicked)=\"secondaryClick.emit($event)\"\r\n />\r\n }\r\n }\r\n </div>\r\n}\r\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) {\r\n <div\r\n class=\"ius-empty__visual\"\r\n [attr.data-illustration]=\"hasIllustration ? 'true' : null\"\r\n aria-hidden=\"true\"\r\n >\r\n @if (illustrationTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"illustrationTemplate\" />\r\n } @else if (illusName) {\r\n <ius-illustration [name]=\"illusName\" [size]=\"illusSize\" />\r\n } @else {\r\n <span translate=\"no\" class=\"ius-icon\">{{ iconName }}</span>\r\n }\r\n </div>\r\n}\r\n\r\n@if (title != null || description != null) {\r\n <div class=\"ius-empty__text\">\r\n @if (title != null) {\r\n <div class=\"ius-empty__title\">{{ title }}</div>\r\n }\r\n @if (description != null) {\r\n <p class=\"ius-empty__desc\">{{ description }}</p>\r\n }\r\n </div>\r\n}\r\n\r\n@if (hasActions) {\r\n <div class=\"ius-empty__actions\">\r\n @if (actionsTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"actionsTemplate\" />\r\n } @else {\r\n @if (primary) {\r\n <ius-button\r\n [variant]=\"primary.variant || 'primary'\"\r\n [size]=\"btnSize\"\r\n [label]=\"primary.label\"\r\n [prefixIcon]=\"primary.icon\"\r\n [dynamic]=\"!!primary.dynamic\"\r\n [disabled]=\"!!primary.disabled\"\r\n (clicked)=\"primaryClick.emit($event)\"\r\n />\r\n }\r\n @if (secondary) {\r\n <ius-button\r\n [variant]=\"secondary.variant || 'secondary'\"\r\n [size]=\"btnSize\"\r\n [label]=\"secondary.label\"\r\n [prefixIcon]=\"secondary.icon\"\r\n [dynamic]=\"!!secondary.dynamic\"\r\n [disabled]=\"!!secondary.disabled\"\r\n (clicked)=\"secondaryClick.emit($event)\"\r\n />\r\n }\r\n }\r\n </div>\r\n}\r\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: [{
|
|
@@ -3769,11 +3769,11 @@ class StatusStateComponent {
|
|
|
3769
3769
|
return resolveIllustration(this.status);
|
|
3770
3770
|
}
|
|
3771
3771
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: StatusStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3772
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: StatusStateComponent, isStandalone: true, selector: "ius-status-state", inputs: { status: "status", code: "code", showCode: ["showCode", "showCode", booleanAttribute], title: "title", description: "description", illustrationTemplate: "illustrationTemplate", icon: "icon", tone: "tone", size: "size", primaryAction: "primaryAction", secondaryAction: "secondaryAction", role: "role" }, outputs: { primaryClick: "primaryClick", secondaryClick: "secondaryClick" }, ngImport: i0, template: "<ng-template #codeTpl>\n <div class=\"ius-statusstate__code\">\n <span translate=\"no\" class=\"ius-icon ius-statusstate__code-icon\" aria-hidden=\"true\" [style.color]=\"toneVar\">{{ statusIcon }}</span>\n <div class=\"ius-statusstate__code-num\" [style.color]=\"toneVar\">{{ effCode }}</div>\n </div>\n</ng-template>\n\n<!-- Ilustraci\u00F3n spot por defecto: SIEMPRE size=\"large\" (independiente de `size`). -->\n<ng-template #illusTpl>\n @if (spotName) {\n <ius-illustration [name]=\"spotName\" size=\"large\" />\n }\n</ng-template>\n\n<ius-empty-state\n [size]=\"size\"\n [tone]=\"effTone\"\n [role]=\"effRole\"\n [icon]=\"statusIcon\"\n [illustrationTemplate]=\"illustrationTemplate || (useCode ? codeTpl : (spotName ? illusTpl : undefined))\"\n [title]=\"effTitle\"\n [description]=\"effDescription\"\n [primaryAction]=\"primaryAction\"\n [secondaryAction]=\"secondaryAction\"\n (primaryClick)=\"primaryClick.emit($event)\"\n (secondaryClick)=\"secondaryClick.emit($event)\"\n/>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.ius-statusstate__code{display:flex;flex-direction:column;align-items:center;gap:var(--ius-space-xs)}.ius-statusstate__code-icon{font-size:var(--ius-icon-xl, 48px);line-height:1}.ius-statusstate__code-num{font-family:var(--ius-font-display);font-weight:var(--ius-fw-bold, 700);font-size:var(--ius-fs-h1, 38px);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.04em}\n"], dependencies: [{ kind: "component", type: EmptyStateComponent, selector: "ius-empty-state", inputs: ["variant", "size", "tone", "icon", "illustration", "illustrationTemplate", "title", "description", "primaryAction", "secondaryAction", "actionsTemplate", "role"], outputs: ["primaryClick", "secondaryClick"] }, { kind: "component", type: IllustrationComponent, selector: "ius-illustration", inputs: ["name", "size", "title"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3772
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: StatusStateComponent, isStandalone: true, selector: "ius-status-state", inputs: { status: "status", code: "code", showCode: ["showCode", "showCode", booleanAttribute], title: "title", description: "description", illustrationTemplate: "illustrationTemplate", icon: "icon", tone: "tone", size: "size", primaryAction: "primaryAction", secondaryAction: "secondaryAction", role: "role" }, outputs: { primaryClick: "primaryClick", secondaryClick: "secondaryClick" }, ngImport: i0, template: "<ng-template #codeTpl>\r\n <div class=\"ius-statusstate__code\">\r\n <span translate=\"no\" class=\"ius-icon ius-statusstate__code-icon\" aria-hidden=\"true\" [style.color]=\"toneVar\">{{ statusIcon }}</span>\r\n <div class=\"ius-statusstate__code-num\" [style.color]=\"toneVar\">{{ effCode }}</div>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Ilustraci\u00F3n spot por defecto: SIEMPRE size=\"large\" (independiente de `size`). -->\r\n<ng-template #illusTpl>\r\n @if (spotName) {\r\n <ius-illustration [name]=\"spotName\" size=\"large\" />\r\n }\r\n</ng-template>\r\n\r\n<ius-empty-state\r\n [size]=\"size\"\r\n [tone]=\"effTone\"\r\n [role]=\"effRole\"\r\n [icon]=\"statusIcon\"\r\n [illustrationTemplate]=\"illustrationTemplate || (useCode ? codeTpl : (spotName ? illusTpl : undefined))\"\r\n [title]=\"effTitle\"\r\n [description]=\"effDescription\"\r\n [primaryAction]=\"primaryAction\"\r\n [secondaryAction]=\"secondaryAction\"\r\n (primaryClick)=\"primaryClick.emit($event)\"\r\n (secondaryClick)=\"secondaryClick.emit($event)\"\r\n/>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.ius-statusstate__code{display:flex;flex-direction:column;align-items:center;gap:var(--ius-space-xs)}.ius-statusstate__code-icon{font-size:var(--ius-icon-xl, 48px);line-height:1}.ius-statusstate__code-num{font-family:var(--ius-font-display);font-weight:var(--ius-fw-bold, 700);font-size:var(--ius-fs-h1, 38px);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.04em}\n"], dependencies: [{ kind: "component", type: EmptyStateComponent, selector: "ius-empty-state", inputs: ["variant", "size", "tone", "icon", "illustration", "illustrationTemplate", "title", "description", "primaryAction", "secondaryAction", "actionsTemplate", "role"], outputs: ["primaryClick", "secondaryClick"] }, { kind: "component", type: IllustrationComponent, selector: "ius-illustration", inputs: ["name", "size", "title"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3773
3773
|
}
|
|
3774
3774
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: StatusStateComponent, decorators: [{
|
|
3775
3775
|
type: Component,
|
|
3776
|
-
args: [{ selector: 'ius-status-state', standalone: true, imports: [EmptyStateComponent, IllustrationComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #codeTpl>\n <div class=\"ius-statusstate__code\">\n <span translate=\"no\" class=\"ius-icon ius-statusstate__code-icon\" aria-hidden=\"true\" [style.color]=\"toneVar\">{{ statusIcon }}</span>\n <div class=\"ius-statusstate__code-num\" [style.color]=\"toneVar\">{{ effCode }}</div>\n </div>\n</ng-template>\n\n<!-- Ilustraci\u00F3n spot por defecto: SIEMPRE size=\"large\" (independiente de `size`). -->\n<ng-template #illusTpl>\n @if (spotName) {\n <ius-illustration [name]=\"spotName\" size=\"large\" />\n }\n</ng-template>\n\n<ius-empty-state\n [size]=\"size\"\n [tone]=\"effTone\"\n [role]=\"effRole\"\n [icon]=\"statusIcon\"\n [illustrationTemplate]=\"illustrationTemplate || (useCode ? codeTpl : (spotName ? illusTpl : undefined))\"\n [title]=\"effTitle\"\n [description]=\"effDescription\"\n [primaryAction]=\"primaryAction\"\n [secondaryAction]=\"secondaryAction\"\n (primaryClick)=\"primaryClick.emit($event)\"\n (secondaryClick)=\"secondaryClick.emit($event)\"\n/>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.ius-statusstate__code{display:flex;flex-direction:column;align-items:center;gap:var(--ius-space-xs)}.ius-statusstate__code-icon{font-size:var(--ius-icon-xl, 48px);line-height:1}.ius-statusstate__code-num{font-family:var(--ius-font-display);font-weight:var(--ius-fw-bold, 700);font-size:var(--ius-fs-h1, 38px);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.04em}\n"] }]
|
|
3776
|
+
args: [{ selector: 'ius-status-state', standalone: true, imports: [EmptyStateComponent, IllustrationComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #codeTpl>\r\n <div class=\"ius-statusstate__code\">\r\n <span translate=\"no\" class=\"ius-icon ius-statusstate__code-icon\" aria-hidden=\"true\" [style.color]=\"toneVar\">{{ statusIcon }}</span>\r\n <div class=\"ius-statusstate__code-num\" [style.color]=\"toneVar\">{{ effCode }}</div>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Ilustraci\u00F3n spot por defecto: SIEMPRE size=\"large\" (independiente de `size`). -->\r\n<ng-template #illusTpl>\r\n @if (spotName) {\r\n <ius-illustration [name]=\"spotName\" size=\"large\" />\r\n }\r\n</ng-template>\r\n\r\n<ius-empty-state\r\n [size]=\"size\"\r\n [tone]=\"effTone\"\r\n [role]=\"effRole\"\r\n [icon]=\"statusIcon\"\r\n [illustrationTemplate]=\"illustrationTemplate || (useCode ? codeTpl : (spotName ? illusTpl : undefined))\"\r\n [title]=\"effTitle\"\r\n [description]=\"effDescription\"\r\n [primaryAction]=\"primaryAction\"\r\n [secondaryAction]=\"secondaryAction\"\r\n (primaryClick)=\"primaryClick.emit($event)\"\r\n (secondaryClick)=\"secondaryClick.emit($event)\"\r\n/>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.ius-statusstate__code{display:flex;flex-direction:column;align-items:center;gap:var(--ius-space-xs)}.ius-statusstate__code-icon{font-size:var(--ius-icon-xl, 48px);line-height:1}.ius-statusstate__code-num{font-family:var(--ius-font-display);font-weight:var(--ius-fw-bold, 700);font-size:var(--ius-fs-h1, 38px);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.04em}\n"] }]
|
|
3777
3777
|
}], propDecorators: { status: [{
|
|
3778
3778
|
type: Input
|
|
3779
3779
|
}], code: [{
|
|
@@ -3932,7 +3932,7 @@ class CarouselComponent {
|
|
|
3932
3932
|
this.paused.set(false);
|
|
3933
3933
|
}
|
|
3934
3934
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3935
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: CarouselComponent, isStandalone: true, selector: "ius-carousel", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, transition: { classPropertyName: "transition", publicName: "transition", isSignal: true, isRequired: false, transformFunction: null }, overlay: { classPropertyName: "overlay", publicName: "overlay", isSignal: true, isRequired: false, transformFunction: null }, dots: { classPropertyName: "dots", publicName: "dots", isSignal: true, isRequired: false, transformFunction: null }, arrows: { classPropertyName: "arrows", publicName: "arrows", isSignal: true, isRequired: false, transformFunction: null }, order: { classPropertyName: "order", publicName: "order", isSignal: true, isRequired: false, transformFunction: null }, autoPlay: { classPropertyName: "autoPlay", publicName: "autoPlay", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, objectFit: { classPropertyName: "objectFit", publicName: "objectFit", isSignal: true, isRequired: false, transformFunction: null }, pauseOnHover: { classPropertyName: "pauseOnHover", publicName: "pauseOnHover", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indexChange: "indexChange" }, host: { attributes: { "role": "region", "aria-roledescription": "carrusel" }, listeners: { "mouseenter": "onEnter()", "mouseleave": "onLeave()" }, properties: { "attr.aria-label": "ariaLabel()", "attr.data-transition": "transition()", "attr.data-overlay": "overlay()", "attr.data-fit": "objectFit()", "style.--_car-kb": "interval() + 'ms'" }, classAttribute: "ius-carousel" }, ngImport: i0, template: "@if (slides().length) {\n @for (slide of slides(); track $index; let i = $index) {\n <div\n class=\"ius-carousel__slide\"\n [attr.data-active]=\"i === activeIndex() ? 'true' : null\"\n [attr.aria-hidden]=\"i === activeIndex() ? null : 'true'\"\n >\n <img\n class=\"ius-carousel__img\"\n [src]=\"slide.src\"\n [alt]=\"slide.alt\"\n draggable=\"false\"\n [attr.loading]=\"i === activeIndex() ? 'eager' : 'lazy'\"\n />\n </div>\n }\n\n @if (overlay() !== 'none') {\n <div class=\"ius-carousel__scrim\" aria-hidden=\"true\"></div>\n }\n\n <!-- Claim + subt\u00EDtulo + CTA. El CTA es independiente\n del claim: se muestra con o sin title/subtitle. La visibilidad del bloque\n vac\u00EDo la resuelve el CSS (:has / :empty), sin l\u00F3gica en JS. -->\n <div class=\"ius-carousel__content\">\n @if (title() || subtitle()) {\n <div class=\"ius-carousel__claim\">\n @if (title()) {\n <p class=\"ius-carousel__title\">{{ title() }}</p>\n }\n @if (subtitle()) {\n <p class=\"ius-carousel__subtitle\">{{ subtitle() }}</p>\n }\n </div>\n }\n <div class=\"ius-carousel__cta\">\n <ng-content select=\"[carousel-action]\"></ng-content>\n </div>\n </div>\n\n @if (arrows() && seq().length > 1) {\n <button\n type=\"button\"\n class=\"ius-carousel__arrow ius-carousel__arrow--prev\"\n aria-label=\"Anterior\"\n (click)=\"go(pos() - 1)\"\n >\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">chevron_left</span>\n </button>\n <button\n type=\"button\"\n class=\"ius-carousel__arrow ius-carousel__arrow--next\"\n aria-label=\"Siguiente\"\n (click)=\"go(pos() + 1)\"\n >\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">chevron_right</span>\n </button>\n }\n\n @if (dots() && seq().length > 1) {\n <div class=\"ius-carousel__dots\">\n @for (imgIdx of seq(); track imgIdx; let j = $index) {\n <button\n type=\"button\"\n class=\"ius-carousel__dot\"\n [attr.aria-current]=\"j === pos() ? 'true' : null\"\n [attr.aria-label]=\"'Ver imagen ' + (j + 1) + ' de ' + seq().length\"\n (click)=\"go(j)\"\n ></button>\n }\n </div>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{--_car-fade: .9s;position:relative;display:block;overflow:hidden;isolation:isolate;width:100%;height:100%;min-height:240px;background:var(--ius-neutral-2);-webkit-user-select:none;user-select:none;font-family:var(--ius-font-body)}.ius-carousel__slide{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity var(--_car-fade) var(--ius-ease-standard)}.ius-carousel__slide[data-active=true]{opacity:1;z-index:1}.ius-carousel__img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}:host([data-fit=contain]) .ius-carousel__img{object-fit:contain}@media(prefers-reduced-motion:no-preference){:host([data-transition=kenburns]) .ius-carousel__slide[data-active=true] .ius-carousel__img{animation:ius-carousel-kb var(--_car-kb, 8s) var(--ius-ease-standard) both}}@keyframes ius-carousel-kb{0%{transform:scale(1)}to{transform:scale(1.08)}}@media(prefers-reduced-motion:reduce){.ius-carousel__slide{transition:none}}.ius-carousel__scrim{position:absolute;inset:0;z-index:2;pointer-events:none}:host([data-overlay=gradient]) .ius-carousel__scrim{background:linear-gradient(to top,color-mix(in srgb,var(--ius-primary-900) 64%,transparent) 0%,color-mix(in srgb,var(--ius-primary-900) 22%,transparent) 42%,transparent 74%)}:host([data-overlay=brand]) .ius-carousel__scrim{background:linear-gradient(to top,color-mix(in srgb,var(--ius-primary-900) 82%,transparent),color-mix(in srgb,var(--ius-primary-900) 48%,transparent))}.ius-carousel__content{position:absolute;z-index:3;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--ius-space-lg);padding:var(--ius-space-2xl) var(--ius-space-2xl) var(--ius-space-4xl);max-width:640px;color:var(--ius-neutral-white)}:host:not(:has(.ius-carousel__title,.ius-carousel__subtitle,.ius-carousel__cta>*)) .ius-carousel__content{display:none}.ius-carousel__claim{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ius-space-xs)}.ius-carousel__title{margin:0;font-family:var(--ius-font-display);font-weight:var(--ius-fw-bold);font-size:var(--ius-fs-h2);line-height:1.15;color:var(--ius-neutral-white);text-wrap:balance}.ius-carousel__subtitle{margin:0;font-family:var(--ius-font-body);font-weight:var(--ius-fw-regular);font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg);text-wrap:pretty;color:color-mix(in srgb,var(--ius-neutral-white) 88%,transparent)}.ius-carousel__cta{margin:0}.ius-carousel__cta:empty{display:none}.ius-carousel__dots{position:absolute;z-index:4;left:0;right:0;bottom:var(--ius-space-lg);display:flex;justify-content:center;gap:var(--ius-space-xs)}:host(:has(.ius-carousel__title,.ius-carousel__subtitle,.ius-carousel__cta > *)) .ius-carousel__dots{justify-content:flex-start;padding:0 var(--ius-space-2xl)}.ius-carousel__dot{appearance:none;border:0;padding:0;cursor:pointer;width:8px;height:8px;border-radius:var(--ius-radius-pill);background:color-mix(in srgb,var(--ius-neutral-white) 45%,transparent);transition:background var(--ius-duration-fast) var(--ius-ease-standard),width var(--ius-duration-fast) var(--ius-ease-standard)}.ius-carousel__dot[aria-current=true]{width:22px;background:var(--ius-neutral-white)}.ius-carousel__dot:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-carousel__arrow{appearance:none;position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--ius-radius-pill);cursor:pointer;background:color-mix(in srgb,var(--ius-primary-900) 40%,transparent);color:var(--ius-neutral-white);transition:background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-carousel__arrow:hover{background:color-mix(in srgb,var(--ius-primary-900) 62%,transparent)}.ius-carousel__arrow:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-carousel__arrow--prev{left:var(--ius-space-md)}.ius-carousel__arrow--next{right:var(--ius-space-md)}.ius-carousel__arrow .ius-icon{font-size:var(--ius-icon-md);line-height:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3935
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: CarouselComponent, isStandalone: true, selector: "ius-carousel", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, transition: { classPropertyName: "transition", publicName: "transition", isSignal: true, isRequired: false, transformFunction: null }, overlay: { classPropertyName: "overlay", publicName: "overlay", isSignal: true, isRequired: false, transformFunction: null }, dots: { classPropertyName: "dots", publicName: "dots", isSignal: true, isRequired: false, transformFunction: null }, arrows: { classPropertyName: "arrows", publicName: "arrows", isSignal: true, isRequired: false, transformFunction: null }, order: { classPropertyName: "order", publicName: "order", isSignal: true, isRequired: false, transformFunction: null }, autoPlay: { classPropertyName: "autoPlay", publicName: "autoPlay", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, objectFit: { classPropertyName: "objectFit", publicName: "objectFit", isSignal: true, isRequired: false, transformFunction: null }, pauseOnHover: { classPropertyName: "pauseOnHover", publicName: "pauseOnHover", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indexChange: "indexChange" }, host: { attributes: { "role": "region", "aria-roledescription": "carrusel" }, listeners: { "mouseenter": "onEnter()", "mouseleave": "onLeave()" }, properties: { "attr.aria-label": "ariaLabel()", "attr.data-transition": "transition()", "attr.data-overlay": "overlay()", "attr.data-fit": "objectFit()", "style.--_car-kb": "interval() + 'ms'" }, classAttribute: "ius-carousel" }, ngImport: i0, template: "@if (slides().length) {\r\n @for (slide of slides(); track $index; let i = $index) {\r\n <div\r\n class=\"ius-carousel__slide\"\r\n [attr.data-active]=\"i === activeIndex() ? 'true' : null\"\r\n [attr.aria-hidden]=\"i === activeIndex() ? null : 'true'\"\r\n >\r\n <img\r\n class=\"ius-carousel__img\"\r\n [src]=\"slide.src\"\r\n [alt]=\"slide.alt\"\r\n draggable=\"false\"\r\n [attr.loading]=\"i === activeIndex() ? 'eager' : 'lazy'\"\r\n />\r\n </div>\r\n }\r\n\r\n @if (overlay() !== 'none') {\r\n <div class=\"ius-carousel__scrim\" aria-hidden=\"true\"></div>\r\n }\r\n\r\n <!-- Claim + subt\u00EDtulo + CTA. El CTA es independiente\r\n del claim: se muestra con o sin title/subtitle. La visibilidad del bloque\r\n vac\u00EDo la resuelve el CSS (:has / :empty), sin l\u00F3gica en JS. -->\r\n <div class=\"ius-carousel__content\">\r\n @if (title() || subtitle()) {\r\n <div class=\"ius-carousel__claim\">\r\n @if (title()) {\r\n <p class=\"ius-carousel__title\">{{ title() }}</p>\r\n }\r\n @if (subtitle()) {\r\n <p class=\"ius-carousel__subtitle\">{{ subtitle() }}</p>\r\n }\r\n </div>\r\n }\r\n <div class=\"ius-carousel__cta\">\r\n <ng-content select=\"[carousel-action]\"></ng-content>\r\n </div>\r\n </div>\r\n\r\n @if (arrows() && seq().length > 1) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-carousel__arrow ius-carousel__arrow--prev\"\r\n aria-label=\"Anterior\"\r\n (click)=\"go(pos() - 1)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">chevron_left</span>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"ius-carousel__arrow ius-carousel__arrow--next\"\r\n aria-label=\"Siguiente\"\r\n (click)=\"go(pos() + 1)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">chevron_right</span>\r\n </button>\r\n }\r\n\r\n @if (dots() && seq().length > 1) {\r\n <div class=\"ius-carousel__dots\">\r\n @for (imgIdx of seq(); track imgIdx; let j = $index) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-carousel__dot\"\r\n [attr.aria-current]=\"j === pos() ? 'true' : null\"\r\n [attr.aria-label]=\"'Ver imagen ' + (j + 1) + ' de ' + seq().length\"\r\n (click)=\"go(j)\"\r\n ></button>\r\n }\r\n </div>\r\n }\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_car-fade: .9s;position:relative;display:block;overflow:hidden;isolation:isolate;width:100%;height:100%;min-height:240px;background:var(--ius-neutral-2);-webkit-user-select:none;user-select:none;font-family:var(--ius-font-body)}.ius-carousel__slide{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity var(--_car-fade) var(--ius-ease-standard)}.ius-carousel__slide[data-active=true]{opacity:1;z-index:1}.ius-carousel__img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}:host([data-fit=contain]) .ius-carousel__img{object-fit:contain}@media(prefers-reduced-motion:no-preference){:host([data-transition=kenburns]) .ius-carousel__slide[data-active=true] .ius-carousel__img{animation:ius-carousel-kb var(--_car-kb, 8s) var(--ius-ease-standard) both}}@keyframes ius-carousel-kb{0%{transform:scale(1)}to{transform:scale(1.08)}}@media(prefers-reduced-motion:reduce){.ius-carousel__slide{transition:none}}.ius-carousel__scrim{position:absolute;inset:0;z-index:2;pointer-events:none}:host([data-overlay=gradient]) .ius-carousel__scrim{background:linear-gradient(to top,color-mix(in srgb,var(--ius-primary-900) 64%,transparent) 0%,color-mix(in srgb,var(--ius-primary-900) 22%,transparent) 42%,transparent 74%)}:host([data-overlay=brand]) .ius-carousel__scrim{background:linear-gradient(to top,color-mix(in srgb,var(--ius-primary-900) 82%,transparent),color-mix(in srgb,var(--ius-primary-900) 48%,transparent))}.ius-carousel__content{position:absolute;z-index:3;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--ius-space-lg);padding:var(--ius-space-2xl) var(--ius-space-2xl) var(--ius-space-4xl);max-width:640px;color:var(--ius-neutral-white)}:host:not(:has(.ius-carousel__title,.ius-carousel__subtitle,.ius-carousel__cta>*)) .ius-carousel__content{display:none}.ius-carousel__claim{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ius-space-xs)}.ius-carousel__title{margin:0;font-family:var(--ius-font-display);font-weight:var(--ius-fw-bold);font-size:var(--ius-fs-h2);line-height:1.15;color:var(--ius-neutral-white);text-wrap:balance}.ius-carousel__subtitle{margin:0;font-family:var(--ius-font-body);font-weight:var(--ius-fw-regular);font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg);text-wrap:pretty;color:color-mix(in srgb,var(--ius-neutral-white) 88%,transparent)}.ius-carousel__cta{margin:0}.ius-carousel__cta:empty{display:none}.ius-carousel__dots{position:absolute;z-index:4;left:0;right:0;bottom:var(--ius-space-lg);display:flex;justify-content:center;gap:var(--ius-space-xs)}:host(:has(.ius-carousel__title,.ius-carousel__subtitle,.ius-carousel__cta > *)) .ius-carousel__dots{justify-content:flex-start;padding:0 var(--ius-space-2xl)}.ius-carousel__dot{appearance:none;border:0;padding:0;cursor:pointer;width:8px;height:8px;border-radius:var(--ius-radius-pill);background:color-mix(in srgb,var(--ius-neutral-white) 45%,transparent);transition:background var(--ius-duration-fast) var(--ius-ease-standard),width var(--ius-duration-fast) var(--ius-ease-standard)}.ius-carousel__dot[aria-current=true]{width:22px;background:var(--ius-neutral-white)}.ius-carousel__dot:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-carousel__arrow{appearance:none;position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--ius-radius-pill);cursor:pointer;background:color-mix(in srgb,var(--ius-primary-900) 40%,transparent);color:var(--ius-neutral-white);transition:background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-carousel__arrow:hover{background:color-mix(in srgb,var(--ius-primary-900) 62%,transparent)}.ius-carousel__arrow:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-carousel__arrow--prev{left:var(--ius-space-md)}.ius-carousel__arrow--next{right:var(--ius-space-md)}.ius-carousel__arrow .ius-icon{font-size:var(--ius-icon-md);line-height:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3936
3936
|
}
|
|
3937
3937
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CarouselComponent, decorators: [{
|
|
3938
3938
|
type: Component,
|
|
@@ -3947,7 +3947,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
3947
3947
|
'[style.--_car-kb]': "interval() + 'ms'",
|
|
3948
3948
|
'(mouseenter)': 'onEnter()',
|
|
3949
3949
|
'(mouseleave)': 'onLeave()',
|
|
3950
|
-
}, template: "@if (slides().length) {\n @for (slide of slides(); track $index; let i = $index) {\n <div\n class=\"ius-carousel__slide\"\n [attr.data-active]=\"i === activeIndex() ? 'true' : null\"\n [attr.aria-hidden]=\"i === activeIndex() ? null : 'true'\"\n >\n <img\n class=\"ius-carousel__img\"\n [src]=\"slide.src\"\n [alt]=\"slide.alt\"\n draggable=\"false\"\n [attr.loading]=\"i === activeIndex() ? 'eager' : 'lazy'\"\n />\n </div>\n }\n\n @if (overlay() !== 'none') {\n <div class=\"ius-carousel__scrim\" aria-hidden=\"true\"></div>\n }\n\n <!-- Claim + subt\u00EDtulo + CTA. El CTA es independiente\n del claim: se muestra con o sin title/subtitle. La visibilidad del bloque\n vac\u00EDo la resuelve el CSS (:has / :empty), sin l\u00F3gica en JS. -->\n <div class=\"ius-carousel__content\">\n @if (title() || subtitle()) {\n <div class=\"ius-carousel__claim\">\n @if (title()) {\n <p class=\"ius-carousel__title\">{{ title() }}</p>\n }\n @if (subtitle()) {\n <p class=\"ius-carousel__subtitle\">{{ subtitle() }}</p>\n }\n </div>\n }\n <div class=\"ius-carousel__cta\">\n <ng-content select=\"[carousel-action]\"></ng-content>\n </div>\n </div>\n\n @if (arrows() && seq().length > 1) {\n <button\n type=\"button\"\n class=\"ius-carousel__arrow ius-carousel__arrow--prev\"\n aria-label=\"Anterior\"\n (click)=\"go(pos() - 1)\"\n >\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">chevron_left</span>\n </button>\n <button\n type=\"button\"\n class=\"ius-carousel__arrow ius-carousel__arrow--next\"\n aria-label=\"Siguiente\"\n (click)=\"go(pos() + 1)\"\n >\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">chevron_right</span>\n </button>\n }\n\n @if (dots() && seq().length > 1) {\n <div class=\"ius-carousel__dots\">\n @for (imgIdx of seq(); track imgIdx; let j = $index) {\n <button\n type=\"button\"\n class=\"ius-carousel__dot\"\n [attr.aria-current]=\"j === pos() ? 'true' : null\"\n [attr.aria-label]=\"'Ver imagen ' + (j + 1) + ' de ' + seq().length\"\n (click)=\"go(j)\"\n ></button>\n }\n </div>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{--_car-fade: .9s;position:relative;display:block;overflow:hidden;isolation:isolate;width:100%;height:100%;min-height:240px;background:var(--ius-neutral-2);-webkit-user-select:none;user-select:none;font-family:var(--ius-font-body)}.ius-carousel__slide{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity var(--_car-fade) var(--ius-ease-standard)}.ius-carousel__slide[data-active=true]{opacity:1;z-index:1}.ius-carousel__img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}:host([data-fit=contain]) .ius-carousel__img{object-fit:contain}@media(prefers-reduced-motion:no-preference){:host([data-transition=kenburns]) .ius-carousel__slide[data-active=true] .ius-carousel__img{animation:ius-carousel-kb var(--_car-kb, 8s) var(--ius-ease-standard) both}}@keyframes ius-carousel-kb{0%{transform:scale(1)}to{transform:scale(1.08)}}@media(prefers-reduced-motion:reduce){.ius-carousel__slide{transition:none}}.ius-carousel__scrim{position:absolute;inset:0;z-index:2;pointer-events:none}:host([data-overlay=gradient]) .ius-carousel__scrim{background:linear-gradient(to top,color-mix(in srgb,var(--ius-primary-900) 64%,transparent) 0%,color-mix(in srgb,var(--ius-primary-900) 22%,transparent) 42%,transparent 74%)}:host([data-overlay=brand]) .ius-carousel__scrim{background:linear-gradient(to top,color-mix(in srgb,var(--ius-primary-900) 82%,transparent),color-mix(in srgb,var(--ius-primary-900) 48%,transparent))}.ius-carousel__content{position:absolute;z-index:3;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--ius-space-lg);padding:var(--ius-space-2xl) var(--ius-space-2xl) var(--ius-space-4xl);max-width:640px;color:var(--ius-neutral-white)}:host:not(:has(.ius-carousel__title,.ius-carousel__subtitle,.ius-carousel__cta>*)) .ius-carousel__content{display:none}.ius-carousel__claim{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ius-space-xs)}.ius-carousel__title{margin:0;font-family:var(--ius-font-display);font-weight:var(--ius-fw-bold);font-size:var(--ius-fs-h2);line-height:1.15;color:var(--ius-neutral-white);text-wrap:balance}.ius-carousel__subtitle{margin:0;font-family:var(--ius-font-body);font-weight:var(--ius-fw-regular);font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg);text-wrap:pretty;color:color-mix(in srgb,var(--ius-neutral-white) 88%,transparent)}.ius-carousel__cta{margin:0}.ius-carousel__cta:empty{display:none}.ius-carousel__dots{position:absolute;z-index:4;left:0;right:0;bottom:var(--ius-space-lg);display:flex;justify-content:center;gap:var(--ius-space-xs)}:host(:has(.ius-carousel__title,.ius-carousel__subtitle,.ius-carousel__cta > *)) .ius-carousel__dots{justify-content:flex-start;padding:0 var(--ius-space-2xl)}.ius-carousel__dot{appearance:none;border:0;padding:0;cursor:pointer;width:8px;height:8px;border-radius:var(--ius-radius-pill);background:color-mix(in srgb,var(--ius-neutral-white) 45%,transparent);transition:background var(--ius-duration-fast) var(--ius-ease-standard),width var(--ius-duration-fast) var(--ius-ease-standard)}.ius-carousel__dot[aria-current=true]{width:22px;background:var(--ius-neutral-white)}.ius-carousel__dot:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-carousel__arrow{appearance:none;position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--ius-radius-pill);cursor:pointer;background:color-mix(in srgb,var(--ius-primary-900) 40%,transparent);color:var(--ius-neutral-white);transition:background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-carousel__arrow:hover{background:color-mix(in srgb,var(--ius-primary-900) 62%,transparent)}.ius-carousel__arrow:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-carousel__arrow--prev{left:var(--ius-space-md)}.ius-carousel__arrow--next{right:var(--ius-space-md)}.ius-carousel__arrow .ius-icon{font-size:var(--ius-icon-md);line-height:1}\n"] }]
|
|
3950
|
+
}, template: "@if (slides().length) {\r\n @for (slide of slides(); track $index; let i = $index) {\r\n <div\r\n class=\"ius-carousel__slide\"\r\n [attr.data-active]=\"i === activeIndex() ? 'true' : null\"\r\n [attr.aria-hidden]=\"i === activeIndex() ? null : 'true'\"\r\n >\r\n <img\r\n class=\"ius-carousel__img\"\r\n [src]=\"slide.src\"\r\n [alt]=\"slide.alt\"\r\n draggable=\"false\"\r\n [attr.loading]=\"i === activeIndex() ? 'eager' : 'lazy'\"\r\n />\r\n </div>\r\n }\r\n\r\n @if (overlay() !== 'none') {\r\n <div class=\"ius-carousel__scrim\" aria-hidden=\"true\"></div>\r\n }\r\n\r\n <!-- Claim + subt\u00EDtulo + CTA. El CTA es independiente\r\n del claim: se muestra con o sin title/subtitle. La visibilidad del bloque\r\n vac\u00EDo la resuelve el CSS (:has / :empty), sin l\u00F3gica en JS. -->\r\n <div class=\"ius-carousel__content\">\r\n @if (title() || subtitle()) {\r\n <div class=\"ius-carousel__claim\">\r\n @if (title()) {\r\n <p class=\"ius-carousel__title\">{{ title() }}</p>\r\n }\r\n @if (subtitle()) {\r\n <p class=\"ius-carousel__subtitle\">{{ subtitle() }}</p>\r\n }\r\n </div>\r\n }\r\n <div class=\"ius-carousel__cta\">\r\n <ng-content select=\"[carousel-action]\"></ng-content>\r\n </div>\r\n </div>\r\n\r\n @if (arrows() && seq().length > 1) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-carousel__arrow ius-carousel__arrow--prev\"\r\n aria-label=\"Anterior\"\r\n (click)=\"go(pos() - 1)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">chevron_left</span>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"ius-carousel__arrow ius-carousel__arrow--next\"\r\n aria-label=\"Siguiente\"\r\n (click)=\"go(pos() + 1)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">chevron_right</span>\r\n </button>\r\n }\r\n\r\n @if (dots() && seq().length > 1) {\r\n <div class=\"ius-carousel__dots\">\r\n @for (imgIdx of seq(); track imgIdx; let j = $index) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-carousel__dot\"\r\n [attr.aria-current]=\"j === pos() ? 'true' : null\"\r\n [attr.aria-label]=\"'Ver imagen ' + (j + 1) + ' de ' + seq().length\"\r\n (click)=\"go(j)\"\r\n ></button>\r\n }\r\n </div>\r\n }\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_car-fade: .9s;position:relative;display:block;overflow:hidden;isolation:isolate;width:100%;height:100%;min-height:240px;background:var(--ius-neutral-2);-webkit-user-select:none;user-select:none;font-family:var(--ius-font-body)}.ius-carousel__slide{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity var(--_car-fade) var(--ius-ease-standard)}.ius-carousel__slide[data-active=true]{opacity:1;z-index:1}.ius-carousel__img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}:host([data-fit=contain]) .ius-carousel__img{object-fit:contain}@media(prefers-reduced-motion:no-preference){:host([data-transition=kenburns]) .ius-carousel__slide[data-active=true] .ius-carousel__img{animation:ius-carousel-kb var(--_car-kb, 8s) var(--ius-ease-standard) both}}@keyframes ius-carousel-kb{0%{transform:scale(1)}to{transform:scale(1.08)}}@media(prefers-reduced-motion:reduce){.ius-carousel__slide{transition:none}}.ius-carousel__scrim{position:absolute;inset:0;z-index:2;pointer-events:none}:host([data-overlay=gradient]) .ius-carousel__scrim{background:linear-gradient(to top,color-mix(in srgb,var(--ius-primary-900) 64%,transparent) 0%,color-mix(in srgb,var(--ius-primary-900) 22%,transparent) 42%,transparent 74%)}:host([data-overlay=brand]) .ius-carousel__scrim{background:linear-gradient(to top,color-mix(in srgb,var(--ius-primary-900) 82%,transparent),color-mix(in srgb,var(--ius-primary-900) 48%,transparent))}.ius-carousel__content{position:absolute;z-index:3;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--ius-space-lg);padding:var(--ius-space-2xl) var(--ius-space-2xl) var(--ius-space-4xl);max-width:640px;color:var(--ius-neutral-white)}:host:not(:has(.ius-carousel__title,.ius-carousel__subtitle,.ius-carousel__cta>*)) .ius-carousel__content{display:none}.ius-carousel__claim{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ius-space-xs)}.ius-carousel__title{margin:0;font-family:var(--ius-font-display);font-weight:var(--ius-fw-bold);font-size:var(--ius-fs-h2);line-height:1.15;color:var(--ius-neutral-white);text-wrap:balance}.ius-carousel__subtitle{margin:0;font-family:var(--ius-font-body);font-weight:var(--ius-fw-regular);font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg);text-wrap:pretty;color:color-mix(in srgb,var(--ius-neutral-white) 88%,transparent)}.ius-carousel__cta{margin:0}.ius-carousel__cta:empty{display:none}.ius-carousel__dots{position:absolute;z-index:4;left:0;right:0;bottom:var(--ius-space-lg);display:flex;justify-content:center;gap:var(--ius-space-xs)}:host(:has(.ius-carousel__title,.ius-carousel__subtitle,.ius-carousel__cta > *)) .ius-carousel__dots{justify-content:flex-start;padding:0 var(--ius-space-2xl)}.ius-carousel__dot{appearance:none;border:0;padding:0;cursor:pointer;width:8px;height:8px;border-radius:var(--ius-radius-pill);background:color-mix(in srgb,var(--ius-neutral-white) 45%,transparent);transition:background var(--ius-duration-fast) var(--ius-ease-standard),width var(--ius-duration-fast) var(--ius-ease-standard)}.ius-carousel__dot[aria-current=true]{width:22px;background:var(--ius-neutral-white)}.ius-carousel__dot:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-carousel__arrow{appearance:none;position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--ius-radius-pill);cursor:pointer;background:color-mix(in srgb,var(--ius-primary-900) 40%,transparent);color:var(--ius-neutral-white);transition:background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-carousel__arrow:hover{background:color-mix(in srgb,var(--ius-primary-900) 62%,transparent)}.ius-carousel__arrow:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-carousel__arrow--prev{left:var(--ius-space-md)}.ius-carousel__arrow--next{right:var(--ius-space-md)}.ius-carousel__arrow .ius-icon{font-size:var(--ius-icon-md);line-height:1}\n"] }]
|
|
3951
3951
|
}], ctorParameters: () => [], propDecorators: { images: [{ type: i0.Input, args: [{ isSignal: true, alias: "images", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], interval: [{ type: i0.Input, args: [{ isSignal: true, alias: "interval", required: false }] }], transition: [{ type: i0.Input, args: [{ isSignal: true, alias: "transition", required: false }] }], overlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlay", required: false }] }], dots: [{ type: i0.Input, args: [{ isSignal: true, alias: "dots", required: false }] }], arrows: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrows", required: false }] }], order: [{ type: i0.Input, args: [{ isSignal: true, alias: "order", required: false }] }], autoPlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPlay", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], objectFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectFit", required: false }] }], pauseOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "pauseOnHover", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], indexChange: [{ type: i0.Output, args: ["indexChange"] }] } });
|
|
3952
3952
|
|
|
3953
3953
|
/**
|
|
@@ -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 -->\r\n<ng-template #labelTpl let-item=\"item\">\r\n @if (isTemplate(item.label)) {\r\n <ng-container [ngTemplateOutlet]=\"asTemplate(item.label)\" />\r\n } @else {\r\n {{ item.label }}\r\n }\r\n</ng-template>\r\n\r\n<!-- valor crudo: texto o TemplateRef -->\r\n<ng-template #valueRaw let-item=\"item\">\r\n @if (isTemplate(item.value)) {\r\n <ng-container [ngTemplateOutlet]=\"asTemplate(item.value)\" />\r\n } @else if (item.value != null) {\r\n {{ item.value }}\r\n }\r\n</ng-template>\r\n\r\n<!-- valor con envoltura navegable (href \u2192 <a>; clickable \u2192 <button>) -->\r\n<ng-template #valueCore let-item=\"item\">\r\n @if (item.href) {\r\n <a class=\"ius-dl__link\" [href]=\"item.href\" [attr.aria-label]=\"item.ariaLabel || null\">\r\n <ng-container [ngTemplateOutlet]=\"valueRaw\" [ngTemplateOutletContext]=\"{ item: item }\" />\r\n </a>\r\n } @else if (item.clickable) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-dl__link\"\r\n [attr.aria-label]=\"item.ariaLabel || null\"\r\n (click)=\"onValueClick(item, $event)\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"valueRaw\" [ngTemplateOutletContext]=\"{ item: item }\" />\r\n </button>\r\n } @else {\r\n <ng-container [ngTemplateOutlet]=\"valueRaw\" [ngTemplateOutletContext]=\"{ item: item }\" />\r\n }\r\n</ng-template>\r\n\r\n<!-- valor con \u00EDcono decorativo opcional (va con el valor, no con la etiqueta) -->\r\n<ng-template #valueContent let-item=\"item\">\r\n @if (item.icon) {\r\n <span class=\"ius-dl__valwrap\" [class.ius-dl__num]=\"isTab(item)\">\r\n <span translate=\"no\" class=\"ius-icon ius-dl__vicon\" aria-hidden=\"true\">{{ item.icon }}</span>\r\n <ng-container [ngTemplateOutlet]=\"valueCore\" [ngTemplateOutletContext]=\"{ item: item }\" />\r\n </span>\r\n } @else {\r\n <ng-container [ngTemplateOutlet]=\"valueCore\" [ngTemplateOutletContext]=\"{ item: item }\" />\r\n }\r\n</ng-template>\r\n\r\n<dl\r\n class=\"ius-dl\"\r\n [attr.data-layout]=\"layout()\"\r\n [attr.data-size]=\"size() !== 'medium' ? size() : null\"\r\n [attr.data-value-align]=\"layout() === 'inline' ? valueAlign() : null\"\r\n [attr.data-divider]=\"divider() ? 'true' : null\"\r\n [attr.data-tabular]=\"tabularValues() ? 'true' : null\"\r\n [style.--_dl-term]=\"termWidth()\"\r\n [style.grid-template-columns]=\"gridCols()\"\r\n>\r\n @if (isGrid()) {\r\n @for (item of items(); track item.key ?? item.label ?? $index) {\r\n <dt class=\"ius-dl__gterm\">\r\n <ng-container [ngTemplateOutlet]=\"labelTpl\" [ngTemplateOutletContext]=\"{ item: item }\" />\r\n </dt>\r\n <dd\r\n class=\"ius-dl__gval\"\r\n [class.ius-dl__num]=\"isTab(item) && !item.icon\"\r\n [style.grid-column]=\"gridColSpan(item)\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"valueContent\" [ngTemplateOutletContext]=\"{ item: item }\" />\r\n </dd>\r\n }\r\n } @else {\r\n @for (item of items(); track item.key ?? item.label ?? $index) {\r\n <div class=\"ius-dl__row\">\r\n <dt class=\"ius-dl__term\">\r\n <ng-container [ngTemplateOutlet]=\"labelTpl\" [ngTemplateOutletContext]=\"{ item: item }\" />\r\n </dt>\r\n <dd class=\"ius-dl__value\" [class.ius-dl__num]=\"isTab(item) && !item.icon\">\r\n <ng-container [ngTemplateOutlet]=\"valueContent\" [ngTemplateOutletContext]=\"{ item: item }\" />\r\n </dd>\r\n </div>\r\n }\r\n }\r\n</dl>\r\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 -->\r\n<ng-template #labelTpl let-item=\"item\">\r\n @if (isTemplate(item.label)) {\r\n <ng-container [ngTemplateOutlet]=\"asTemplate(item.label)\" />\r\n } @else {\r\n {{ item.label }}\r\n }\r\n</ng-template>\r\n\r\n<!-- valor crudo: texto o TemplateRef -->\r\n<ng-template #valueRaw let-item=\"item\">\r\n @if (isTemplate(item.value)) {\r\n <ng-container [ngTemplateOutlet]=\"asTemplate(item.value)\" />\r\n } @else if (item.value != null) {\r\n {{ item.value }}\r\n }\r\n</ng-template>\r\n\r\n<!-- valor con envoltura navegable (href \u2192 <a>; clickable \u2192 <button>) -->\r\n<ng-template #valueCore let-item=\"item\">\r\n @if (item.href) {\r\n <a class=\"ius-dl__link\" [href]=\"item.href\" [attr.aria-label]=\"item.ariaLabel || null\">\r\n <ng-container [ngTemplateOutlet]=\"valueRaw\" [ngTemplateOutletContext]=\"{ item: item }\" />\r\n </a>\r\n } @else if (item.clickable) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-dl__link\"\r\n [attr.aria-label]=\"item.ariaLabel || null\"\r\n (click)=\"onValueClick(item, $event)\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"valueRaw\" [ngTemplateOutletContext]=\"{ item: item }\" />\r\n </button>\r\n } @else {\r\n <ng-container [ngTemplateOutlet]=\"valueRaw\" [ngTemplateOutletContext]=\"{ item: item }\" />\r\n }\r\n</ng-template>\r\n\r\n<!-- valor con \u00EDcono decorativo opcional (va con el valor, no con la etiqueta) -->\r\n<ng-template #valueContent let-item=\"item\">\r\n @if (item.icon) {\r\n <span class=\"ius-dl__valwrap\" [class.ius-dl__num]=\"isTab(item)\">\r\n <span translate=\"no\" class=\"ius-icon ius-dl__vicon\" aria-hidden=\"true\">{{ item.icon }}</span>\r\n <ng-container [ngTemplateOutlet]=\"valueCore\" [ngTemplateOutletContext]=\"{ item: item }\" />\r\n </span>\r\n } @else {\r\n <ng-container [ngTemplateOutlet]=\"valueCore\" [ngTemplateOutletContext]=\"{ item: item }\" />\r\n }\r\n</ng-template>\r\n\r\n<dl\r\n class=\"ius-dl\"\r\n [attr.data-layout]=\"layout()\"\r\n [attr.data-size]=\"size() !== 'medium' ? size() : null\"\r\n [attr.data-value-align]=\"layout() === 'inline' ? valueAlign() : null\"\r\n [attr.data-divider]=\"divider() ? 'true' : null\"\r\n [attr.data-tabular]=\"tabularValues() ? 'true' : null\"\r\n [style.--_dl-term]=\"termWidth()\"\r\n [style.grid-template-columns]=\"gridCols()\"\r\n>\r\n @if (isGrid()) {\r\n @for (item of items(); track item.key ?? item.label ?? $index) {\r\n <dt class=\"ius-dl__gterm\">\r\n <ng-container [ngTemplateOutlet]=\"labelTpl\" [ngTemplateOutletContext]=\"{ item: item }\" />\r\n </dt>\r\n <dd\r\n class=\"ius-dl__gval\"\r\n [class.ius-dl__num]=\"isTab(item) && !item.icon\"\r\n [style.grid-column]=\"gridColSpan(item)\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"valueContent\" [ngTemplateOutletContext]=\"{ item: item }\" />\r\n </dd>\r\n }\r\n } @else {\r\n @for (item of items(); track item.key ?? item.label ?? $index) {\r\n <div class=\"ius-dl__row\">\r\n <dt class=\"ius-dl__term\">\r\n <ng-container [ngTemplateOutlet]=\"labelTpl\" [ngTemplateOutletContext]=\"{ item: item }\" />\r\n </dt>\r\n <dd class=\"ius-dl__value\" [class.ius-dl__num]=\"isTab(item) && !item.icon\">\r\n <ng-container [ngTemplateOutlet]=\"valueContent\" [ngTemplateOutletContext]=\"{ item: item }\" />\r\n </dd>\r\n </div>\r\n }\r\n }\r\n</dl>\r\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 = () => { };
|
|
@@ -4494,7 +4494,7 @@ class CaptchaFieldComponent {
|
|
|
4494
4494
|
useExisting: forwardRef(() => CaptchaFieldComponent),
|
|
4495
4495
|
multi: true,
|
|
4496
4496
|
},
|
|
4497
|
-
], viewQueries: [{ propertyName: "hostRef", first: true, predicate: ["host"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label != null) {\n <label [attr.for]=\"fieldId\" class=\"ius-cf__label\">{{ label }}</label>\n}\n\n<!-- Hueco reservado: widget vivo \u00B7 esqueleto de carga (demo) \u00B7 placeholder docs -->\n@if (useLive()) {\n <div class=\"ius-cf__slot\">\n <div\n #host\n [id]=\"fieldId\"\n class=\"ius-cf__host\"\n [style.visibility]=\"phase() === 'ready' ? 'visible' : 'hidden'\"\n ></div>\n\n @if (phase() === 'loading') {\n <div class=\"ius-cf__overlay\">\n <!-- Esqueleto inline (reemplazar por <ius-skeleton> cuando exista). -->\n <div class=\"ius-cf__skeleton\" role=\"img\" aria-label=\"Cargando verificaci\u00F3n\"></div>\n </div>\n }\n\n @if (phase() === 'error') {\n <div class=\"ius-cf__ph\">\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">gpp_bad</span>\n <span class=\"ius-cf__ph-name\">No se pudo cargar la verificaci\u00F3n</span>\n <span class=\"ius-cf__ph-note\">Revisa la conexi\u00F3n e int\u00E9ntalo de nuevo.</span>\n </div>\n }\n </div>\n} @else if (isDemo() && stateState() === 'loading') {\n <div class=\"ius-cf__slot\">\n <div class=\"ius-cf__skeleton\" role=\"img\" aria-label=\"Cargando verificaci\u00F3n\"></div>\n </div>\n} @else {\n <div\n [id]=\"fieldId\"\n class=\"ius-cf__slot is-ph\"\n role=\"img\"\n [attr.aria-label]=\"ph().name\"\n >\n <div class=\"ius-cf__ph\">\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ ph().icon }}</span>\n <span class=\"ius-cf__ph-name\">{{ ph().name }}</span>\n <span class=\"ius-cf__ph-note\">{{ ph().note }}</span>\n </div>\n </div>\n}\n\n<!-- Input oculto con el token (env\u00EDo nativo del formulario) -->\n@if (useLive()) {\n <input type=\"hidden\" [name]=\"respName\" [value]=\"token()\" readonly />\n}\n\n<!-- Ayuda / error -->\n@if (hint) {\n <span class=\"ius-cf__hint\">{{ hint }}</span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_cf-w: 300px;--_cf-h: 65px;display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);width:100%;max-width:var(--_cf-w);-webkit-user-select:none;user-select:none}:host([data-size=flexible]){--_cf-w: 100%;max-width:100%}:host([data-size=compact]){--_cf-w: 150px;--_cf-h: 140px}.ius-cf__label{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-primary)}.ius-cf__label .ius-icon{font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary)}.ius-cf__slot{position:relative;box-sizing:border-box;width:100%;min-width:min(var(--_cf-w),100%);min-height:var(--_cf-h);border-radius:var(--ius-radius-md);display:grid;place-items:center;transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-size=flexible]) .ius-cf__slot{min-width:min(300px,100%)}.ius-cf__slot.is-ph{background:var(--ius-neutral-2);border:1px dashed var(--ius-stroke-strong);padding:var(--ius-space-md)}:host([data-state=verified]) .ius-cf__slot.is-ph{background:var(--ius-success-100);border:1px solid var(--ius-success-500)}:host([data-state=expired]) .ius-cf__slot.is-ph{background:var(--ius-warning-100);border:1px solid var(--ius-warning-500)}:host([data-state=error]) .ius-cf__slot.is-ph,:host([data-error=true]) .ius-cf__slot.is-ph{background:var(--ius-danger-100);border:1px solid var(--ius-danger-700)}:host([data-disabled=true]) .ius-cf__slot.is-ph{opacity:.55}.ius-cf__ph{display:flex;flex-direction:column;align-items:center;gap:var(--ius-space-xxs);text-align:center}.ius-cf__ph .ius-icon{font-size:var(--ius-icon-lg);color:var(--ius-text-tertiary)}.ius-cf__ph-name{font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-secondary)}.ius-cf__ph-note{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-tertiary);max-width:34ch}:host([data-state=verified]) .ius-cf__ph .ius-icon,:host([data-state=verified]) .ius-cf__ph-name{color:var(--ius-success-700)}:host([data-state=expired]) .ius-cf__ph .ius-icon,:host([data-state=expired]) .ius-cf__ph-name{color:var(--ius-warning-700)}:host([data-state=error]) .ius-cf__ph .ius-icon,:host([data-state=error]) .ius-cf__ph-name,:host([data-error=true]) .ius-cf__ph .ius-icon,:host([data-error=true]) .ius-cf__ph-name{color:var(--ius-danger-700)}.ius-cf__host{width:100%;min-height:var(--_cf-h);display:flex;justify-content:center;align-items:center}.ius-cf__overlay{position:absolute;inset:0;display:grid;place-items:center}.ius-cf__skeleton{width:100%;height:var(--_cf-h);border-radius:var(--ius-radius-md);background-color:var(--ius-neutral-2);background-image:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ius-surface-card) 65%,transparent),transparent);background-size:200% 100%;background-repeat:no-repeat;animation:ius-cf-shimmer 1.4s ease-in-out infinite}@keyframes ius-cf-shimmer{0%{background-position:-150% 0}to{background-position:250% 0}}@media(prefers-reduced-motion:reduce){.ius-cf__skeleton{animation:none}}.ius-cf__hint{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);font-weight:var(--ius-fw-medium);color:var(--ius-text-secondary)}:host([data-error=true]) .ius-cf__hint,:host([data-state=error]) .ius-cf__hint{color:var(--ius-danger-700)}:host([data-disabled=true]) .ius-cf__hint{color:var(--ius-text-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4497
|
+
], viewQueries: [{ propertyName: "hostRef", first: true, predicate: ["host"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label != null) {\r\n <label [attr.for]=\"fieldId\" class=\"ius-cf__label\">{{ label }}</label>\r\n}\r\n\r\n<!-- Hueco reservado: widget vivo \u00B7 esqueleto de carga (demo) \u00B7 placeholder docs -->\r\n@if (useLive()) {\r\n <div class=\"ius-cf__slot\">\r\n <div\r\n #host\r\n [id]=\"fieldId\"\r\n class=\"ius-cf__host\"\r\n [style.visibility]=\"phase() === 'ready' ? 'visible' : 'hidden'\"\r\n ></div>\r\n\r\n @if (phase() === 'loading') {\r\n <div class=\"ius-cf__overlay\">\r\n <!-- Esqueleto inline (reemplazar por <ius-skeleton> cuando exista). -->\r\n <div class=\"ius-cf__skeleton\" role=\"img\" aria-label=\"Cargando verificaci\u00F3n\"></div>\r\n </div>\r\n }\r\n\r\n @if (phase() === 'error') {\r\n <div class=\"ius-cf__ph\">\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">gpp_bad</span>\r\n <span class=\"ius-cf__ph-name\">No se pudo cargar la verificaci\u00F3n</span>\r\n <span class=\"ius-cf__ph-note\">Revisa la conexi\u00F3n e int\u00E9ntalo de nuevo.</span>\r\n </div>\r\n }\r\n </div>\r\n} @else if (isDemo() && stateState() === 'loading') {\r\n <div class=\"ius-cf__slot\">\r\n <div class=\"ius-cf__skeleton\" role=\"img\" aria-label=\"Cargando verificaci\u00F3n\"></div>\r\n </div>\r\n} @else {\r\n <div\r\n [id]=\"fieldId\"\r\n class=\"ius-cf__slot is-ph\"\r\n role=\"img\"\r\n [attr.aria-label]=\"ph().name\"\r\n >\r\n <div class=\"ius-cf__ph\">\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ ph().icon }}</span>\r\n <span class=\"ius-cf__ph-name\">{{ ph().name }}</span>\r\n <span class=\"ius-cf__ph-note\">{{ ph().note }}</span>\r\n </div>\r\n </div>\r\n}\r\n\r\n<!-- Input oculto con el token (env\u00EDo nativo del formulario) -->\r\n@if (useLive()) {\r\n <input type=\"hidden\" [name]=\"respName\" [value]=\"token()\" readonly />\r\n}\r\n\r\n<!-- Ayuda / error -->\r\n@if (hint) {\r\n <span class=\"ius-cf__hint\">{{ hint }}</span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_cf-w: 300px;--_cf-h: 65px;display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);width:100%;max-width:var(--_cf-w);-webkit-user-select:none;user-select:none}:host([data-size=flexible]){--_cf-w: 100%;max-width:100%}:host([data-size=compact]){--_cf-w: 150px;--_cf-h: 140px}.ius-cf__label{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-primary)}.ius-cf__label .ius-icon{font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary)}.ius-cf__slot{position:relative;box-sizing:border-box;width:100%;min-width:min(var(--_cf-w),100%);min-height:var(--_cf-h);border-radius:var(--ius-radius-md);display:grid;place-items:center;transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-size=flexible]) .ius-cf__slot{min-width:min(300px,100%)}.ius-cf__slot.is-ph{background:var(--ius-neutral-2);border:1px dashed var(--ius-stroke-strong);padding:var(--ius-space-md)}:host([data-state=verified]) .ius-cf__slot.is-ph{background:var(--ius-success-100);border:1px solid var(--ius-success-500)}:host([data-state=expired]) .ius-cf__slot.is-ph{background:var(--ius-warning-100);border:1px solid var(--ius-warning-500)}:host([data-state=error]) .ius-cf__slot.is-ph,:host([data-error=true]) .ius-cf__slot.is-ph{background:var(--ius-danger-100);border:1px solid var(--ius-danger-700)}:host([data-disabled=true]) .ius-cf__slot.is-ph{opacity:.55}.ius-cf__ph{display:flex;flex-direction:column;align-items:center;gap:var(--ius-space-xxs);text-align:center}.ius-cf__ph .ius-icon{font-size:var(--ius-icon-lg);color:var(--ius-text-tertiary)}.ius-cf__ph-name{font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-secondary)}.ius-cf__ph-note{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-tertiary);max-width:34ch}:host([data-state=verified]) .ius-cf__ph .ius-icon,:host([data-state=verified]) .ius-cf__ph-name{color:var(--ius-success-700)}:host([data-state=expired]) .ius-cf__ph .ius-icon,:host([data-state=expired]) .ius-cf__ph-name{color:var(--ius-warning-700)}:host([data-state=error]) .ius-cf__ph .ius-icon,:host([data-state=error]) .ius-cf__ph-name,:host([data-error=true]) .ius-cf__ph .ius-icon,:host([data-error=true]) .ius-cf__ph-name{color:var(--ius-danger-700)}.ius-cf__host{width:100%;min-height:var(--_cf-h);display:flex;justify-content:center;align-items:center}.ius-cf__overlay{position:absolute;inset:0;display:grid;place-items:center}.ius-cf__skeleton{width:100%;height:var(--_cf-h);border-radius:var(--ius-radius-md);background-color:var(--ius-neutral-2);background-image:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ius-surface-card) 65%,transparent),transparent);background-size:200% 100%;background-repeat:no-repeat;animation:ius-cf-shimmer 1.4s ease-in-out infinite}@keyframes ius-cf-shimmer{0%{background-position:-150% 0}to{background-position:250% 0}}@media(prefers-reduced-motion:reduce){.ius-cf__skeleton{animation:none}}.ius-cf__hint{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);font-weight:var(--ius-fw-medium);color:var(--ius-text-secondary)}:host([data-error=true]) .ius-cf__hint,:host([data-state=error]) .ius-cf__hint{color:var(--ius-danger-700)}:host([data-disabled=true]) .ius-cf__hint{color:var(--ius-text-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4498
4498
|
}
|
|
4499
4499
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CaptchaFieldComponent, decorators: [{
|
|
4500
4500
|
type: Component,
|
|
@@ -4510,7 +4510,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
4510
4510
|
'[attr.data-state]': 'stateState() || null',
|
|
4511
4511
|
'[attr.data-error]': 'isError() || null',
|
|
4512
4512
|
'[attr.data-disabled]': 'isDisabled() || null',
|
|
4513
|
-
}, template: "@if (label != null) {\n <label [attr.for]=\"fieldId\" class=\"ius-cf__label\">{{ label }}</label>\n}\n\n<!-- Hueco reservado: widget vivo \u00B7 esqueleto de carga (demo) \u00B7 placeholder docs -->\n@if (useLive()) {\n <div class=\"ius-cf__slot\">\n <div\n #host\n [id]=\"fieldId\"\n class=\"ius-cf__host\"\n [style.visibility]=\"phase() === 'ready' ? 'visible' : 'hidden'\"\n ></div>\n\n @if (phase() === 'loading') {\n <div class=\"ius-cf__overlay\">\n <!-- Esqueleto inline (reemplazar por <ius-skeleton> cuando exista). -->\n <div class=\"ius-cf__skeleton\" role=\"img\" aria-label=\"Cargando verificaci\u00F3n\"></div>\n </div>\n }\n\n @if (phase() === 'error') {\n <div class=\"ius-cf__ph\">\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">gpp_bad</span>\n <span class=\"ius-cf__ph-name\">No se pudo cargar la verificaci\u00F3n</span>\n <span class=\"ius-cf__ph-note\">Revisa la conexi\u00F3n e int\u00E9ntalo de nuevo.</span>\n </div>\n }\n </div>\n} @else if (isDemo() && stateState() === 'loading') {\n <div class=\"ius-cf__slot\">\n <div class=\"ius-cf__skeleton\" role=\"img\" aria-label=\"Cargando verificaci\u00F3n\"></div>\n </div>\n} @else {\n <div\n [id]=\"fieldId\"\n class=\"ius-cf__slot is-ph\"\n role=\"img\"\n [attr.aria-label]=\"ph().name\"\n >\n <div class=\"ius-cf__ph\">\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ ph().icon }}</span>\n <span class=\"ius-cf__ph-name\">{{ ph().name }}</span>\n <span class=\"ius-cf__ph-note\">{{ ph().note }}</span>\n </div>\n </div>\n}\n\n<!-- Input oculto con el token (env\u00EDo nativo del formulario) -->\n@if (useLive()) {\n <input type=\"hidden\" [name]=\"respName\" [value]=\"token()\" readonly />\n}\n\n<!-- Ayuda / error -->\n@if (hint) {\n <span class=\"ius-cf__hint\">{{ hint }}</span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_cf-w: 300px;--_cf-h: 65px;display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);width:100%;max-width:var(--_cf-w);-webkit-user-select:none;user-select:none}:host([data-size=flexible]){--_cf-w: 100%;max-width:100%}:host([data-size=compact]){--_cf-w: 150px;--_cf-h: 140px}.ius-cf__label{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-primary)}.ius-cf__label .ius-icon{font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary)}.ius-cf__slot{position:relative;box-sizing:border-box;width:100%;min-width:min(var(--_cf-w),100%);min-height:var(--_cf-h);border-radius:var(--ius-radius-md);display:grid;place-items:center;transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-size=flexible]) .ius-cf__slot{min-width:min(300px,100%)}.ius-cf__slot.is-ph{background:var(--ius-neutral-2);border:1px dashed var(--ius-stroke-strong);padding:var(--ius-space-md)}:host([data-state=verified]) .ius-cf__slot.is-ph{background:var(--ius-success-100);border:1px solid var(--ius-success-500)}:host([data-state=expired]) .ius-cf__slot.is-ph{background:var(--ius-warning-100);border:1px solid var(--ius-warning-500)}:host([data-state=error]) .ius-cf__slot.is-ph,:host([data-error=true]) .ius-cf__slot.is-ph{background:var(--ius-danger-100);border:1px solid var(--ius-danger-700)}:host([data-disabled=true]) .ius-cf__slot.is-ph{opacity:.55}.ius-cf__ph{display:flex;flex-direction:column;align-items:center;gap:var(--ius-space-xxs);text-align:center}.ius-cf__ph .ius-icon{font-size:var(--ius-icon-lg);color:var(--ius-text-tertiary)}.ius-cf__ph-name{font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-secondary)}.ius-cf__ph-note{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-tertiary);max-width:34ch}:host([data-state=verified]) .ius-cf__ph .ius-icon,:host([data-state=verified]) .ius-cf__ph-name{color:var(--ius-success-700)}:host([data-state=expired]) .ius-cf__ph .ius-icon,:host([data-state=expired]) .ius-cf__ph-name{color:var(--ius-warning-700)}:host([data-state=error]) .ius-cf__ph .ius-icon,:host([data-state=error]) .ius-cf__ph-name,:host([data-error=true]) .ius-cf__ph .ius-icon,:host([data-error=true]) .ius-cf__ph-name{color:var(--ius-danger-700)}.ius-cf__host{width:100%;min-height:var(--_cf-h);display:flex;justify-content:center;align-items:center}.ius-cf__overlay{position:absolute;inset:0;display:grid;place-items:center}.ius-cf__skeleton{width:100%;height:var(--_cf-h);border-radius:var(--ius-radius-md);background-color:var(--ius-neutral-2);background-image:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ius-surface-card) 65%,transparent),transparent);background-size:200% 100%;background-repeat:no-repeat;animation:ius-cf-shimmer 1.4s ease-in-out infinite}@keyframes ius-cf-shimmer{0%{background-position:-150% 0}to{background-position:250% 0}}@media(prefers-reduced-motion:reduce){.ius-cf__skeleton{animation:none}}.ius-cf__hint{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);font-weight:var(--ius-fw-medium);color:var(--ius-text-secondary)}:host([data-error=true]) .ius-cf__hint,:host([data-state=error]) .ius-cf__hint{color:var(--ius-danger-700)}:host([data-disabled=true]) .ius-cf__hint{color:var(--ius-text-disabled)}\n"] }]
|
|
4513
|
+
}, template: "@if (label != null) {\r\n <label [attr.for]=\"fieldId\" class=\"ius-cf__label\">{{ label }}</label>\r\n}\r\n\r\n<!-- Hueco reservado: widget vivo \u00B7 esqueleto de carga (demo) \u00B7 placeholder docs -->\r\n@if (useLive()) {\r\n <div class=\"ius-cf__slot\">\r\n <div\r\n #host\r\n [id]=\"fieldId\"\r\n class=\"ius-cf__host\"\r\n [style.visibility]=\"phase() === 'ready' ? 'visible' : 'hidden'\"\r\n ></div>\r\n\r\n @if (phase() === 'loading') {\r\n <div class=\"ius-cf__overlay\">\r\n <!-- Esqueleto inline (reemplazar por <ius-skeleton> cuando exista). -->\r\n <div class=\"ius-cf__skeleton\" role=\"img\" aria-label=\"Cargando verificaci\u00F3n\"></div>\r\n </div>\r\n }\r\n\r\n @if (phase() === 'error') {\r\n <div class=\"ius-cf__ph\">\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">gpp_bad</span>\r\n <span class=\"ius-cf__ph-name\">No se pudo cargar la verificaci\u00F3n</span>\r\n <span class=\"ius-cf__ph-note\">Revisa la conexi\u00F3n e int\u00E9ntalo de nuevo.</span>\r\n </div>\r\n }\r\n </div>\r\n} @else if (isDemo() && stateState() === 'loading') {\r\n <div class=\"ius-cf__slot\">\r\n <div class=\"ius-cf__skeleton\" role=\"img\" aria-label=\"Cargando verificaci\u00F3n\"></div>\r\n </div>\r\n} @else {\r\n <div\r\n [id]=\"fieldId\"\r\n class=\"ius-cf__slot is-ph\"\r\n role=\"img\"\r\n [attr.aria-label]=\"ph().name\"\r\n >\r\n <div class=\"ius-cf__ph\">\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ ph().icon }}</span>\r\n <span class=\"ius-cf__ph-name\">{{ ph().name }}</span>\r\n <span class=\"ius-cf__ph-note\">{{ ph().note }}</span>\r\n </div>\r\n </div>\r\n}\r\n\r\n<!-- Input oculto con el token (env\u00EDo nativo del formulario) -->\r\n@if (useLive()) {\r\n <input type=\"hidden\" [name]=\"respName\" [value]=\"token()\" readonly />\r\n}\r\n\r\n<!-- Ayuda / error -->\r\n@if (hint) {\r\n <span class=\"ius-cf__hint\">{{ hint }}</span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_cf-w: 300px;--_cf-h: 65px;display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);width:100%;max-width:var(--_cf-w);-webkit-user-select:none;user-select:none}:host([data-size=flexible]){--_cf-w: 100%;max-width:100%}:host([data-size=compact]){--_cf-w: 150px;--_cf-h: 140px}.ius-cf__label{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-primary)}.ius-cf__label .ius-icon{font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary)}.ius-cf__slot{position:relative;box-sizing:border-box;width:100%;min-width:min(var(--_cf-w),100%);min-height:var(--_cf-h);border-radius:var(--ius-radius-md);display:grid;place-items:center;transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-size=flexible]) .ius-cf__slot{min-width:min(300px,100%)}.ius-cf__slot.is-ph{background:var(--ius-neutral-2);border:1px dashed var(--ius-stroke-strong);padding:var(--ius-space-md)}:host([data-state=verified]) .ius-cf__slot.is-ph{background:var(--ius-success-100);border:1px solid var(--ius-success-500)}:host([data-state=expired]) .ius-cf__slot.is-ph{background:var(--ius-warning-100);border:1px solid var(--ius-warning-500)}:host([data-state=error]) .ius-cf__slot.is-ph,:host([data-error=true]) .ius-cf__slot.is-ph{background:var(--ius-danger-100);border:1px solid var(--ius-danger-700)}:host([data-disabled=true]) .ius-cf__slot.is-ph{opacity:.55}.ius-cf__ph{display:flex;flex-direction:column;align-items:center;gap:var(--ius-space-xxs);text-align:center}.ius-cf__ph .ius-icon{font-size:var(--ius-icon-lg);color:var(--ius-text-tertiary)}.ius-cf__ph-name{font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-secondary)}.ius-cf__ph-note{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-tertiary);max-width:34ch}:host([data-state=verified]) .ius-cf__ph .ius-icon,:host([data-state=verified]) .ius-cf__ph-name{color:var(--ius-success-700)}:host([data-state=expired]) .ius-cf__ph .ius-icon,:host([data-state=expired]) .ius-cf__ph-name{color:var(--ius-warning-700)}:host([data-state=error]) .ius-cf__ph .ius-icon,:host([data-state=error]) .ius-cf__ph-name,:host([data-error=true]) .ius-cf__ph .ius-icon,:host([data-error=true]) .ius-cf__ph-name{color:var(--ius-danger-700)}.ius-cf__host{width:100%;min-height:var(--_cf-h);display:flex;justify-content:center;align-items:center}.ius-cf__overlay{position:absolute;inset:0;display:grid;place-items:center}.ius-cf__skeleton{width:100%;height:var(--_cf-h);border-radius:var(--ius-radius-md);background-color:var(--ius-neutral-2);background-image:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ius-surface-card) 65%,transparent),transparent);background-size:200% 100%;background-repeat:no-repeat;animation:ius-cf-shimmer 1.4s ease-in-out infinite}@keyframes ius-cf-shimmer{0%{background-position:-150% 0}to{background-position:250% 0}}@media(prefers-reduced-motion:reduce){.ius-cf__skeleton{animation:none}}.ius-cf__hint{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);font-weight:var(--ius-fw-medium);color:var(--ius-text-secondary)}:host([data-error=true]) .ius-cf__hint,:host([data-state=error]) .ius-cf__hint{color:var(--ius-danger-700)}:host([data-disabled=true]) .ius-cf__hint{color:var(--ius-text-disabled)}\n"] }]
|
|
4514
4514
|
}], ctorParameters: () => [], propDecorators: { provider: [{
|
|
4515
4515
|
type: Input
|
|
4516
4516
|
}], sitekey: [{
|
|
@@ -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 -->\r\n@if (hasPrefix()) {\r\n <span class=\"ius-tag__icon\" aria-hidden=\"true\"><ng-content select=\"[iusTagPrefix]\" /></span>\r\n} @else if (icon()) {\r\n <span class=\"ius-tag__icon\" aria-hidden=\"true\"><span translate=\"no\" class=\"ius-icon\">{{ icon() }}</span></span>\r\n} @else if (showDot()) {\r\n <span class=\"ius-tag__dot\" aria-hidden=\"true\"></span>\r\n}\r\n\r\n<!-- Etiqueta: input `label` \u203A contenido proyectado -->\r\n<span class=\"ius-tag__label\">\r\n @if (label() != null) {\r\n {{ label() }}\r\n } @else {\r\n <ng-content />\r\n }\r\n</span>\r\n\r\n<!-- Sufijo: count (`\u00B7 N`) \u203A suffix proyectado -->\r\n@if (count() != null) {\r\n <span class=\"ius-tag__count\">\u00B7 {{ count() }}</span>\r\n} @else if (hasSuffix()) {\r\n <span class=\"ius-tag__suffix\" aria-hidden=\"true\"><ng-content select=\"[iusTagSuffix]\" /></span>\r\n}\r\n\r\n<!-- Cierre: si el host es interactivo, evita bot\u00F3n-en-bot\u00F3n (span[role=button]).\r\n El tabindex negativo solo aplica en ESE caso: el foco vive en el host y la X\r\n se alcanza con \u00E9l. Cuando el Tag no es interactivo la X es el \u00FAnico control,\r\n as\u00ED que conserva su tabulaci\u00F3n natural y es alcanzable por teclado (T11). -->\r\n@if (closable()) {\r\n @if (isInteractive()) {\r\n <span\r\n role=\"button\"\r\n class=\"ius-tag__x\"\r\n [attr.aria-label]=\"closeLabel()\"\r\n tabindex=\"-1\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (click)=\"onClose($event)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">close</span>\r\n </span>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n class=\"ius-tag__x\"\r\n [attr.aria-label]=\"closeLabel()\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (click)=\"onClose($event)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">close</span>\r\n </button>\r\n }\r\n}\r\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 -->\r\n@if (hasPrefix()) {\r\n <span class=\"ius-tag__icon\" aria-hidden=\"true\"><ng-content select=\"[iusTagPrefix]\" /></span>\r\n} @else if (icon()) {\r\n <span class=\"ius-tag__icon\" aria-hidden=\"true\"><span translate=\"no\" class=\"ius-icon\">{{ icon() }}</span></span>\r\n} @else if (showDot()) {\r\n <span class=\"ius-tag__dot\" aria-hidden=\"true\"></span>\r\n}\r\n\r\n<!-- Etiqueta: input `label` \u203A contenido proyectado -->\r\n<span class=\"ius-tag__label\">\r\n @if (label() != null) {\r\n {{ label() }}\r\n } @else {\r\n <ng-content />\r\n }\r\n</span>\r\n\r\n<!-- Sufijo: count (`\u00B7 N`) \u203A suffix proyectado -->\r\n@if (count() != null) {\r\n <span class=\"ius-tag__count\">\u00B7 {{ count() }}</span>\r\n} @else if (hasSuffix()) {\r\n <span class=\"ius-tag__suffix\" aria-hidden=\"true\"><ng-content select=\"[iusTagSuffix]\" /></span>\r\n}\r\n\r\n<!-- Cierre: si el host es interactivo, evita bot\u00F3n-en-bot\u00F3n (span[role=button]).\r\n El tabindex negativo solo aplica en ESE caso: el foco vive en el host y la X\r\n se alcanza con \u00E9l. Cuando el Tag no es interactivo la X es el \u00FAnico control,\r\n as\u00ED que conserva su tabulaci\u00F3n natural y es alcanzable por teclado (T11). -->\r\n@if (closable()) {\r\n @if (isInteractive()) {\r\n <span\r\n role=\"button\"\r\n class=\"ius-tag__x\"\r\n [attr.aria-label]=\"closeLabel()\"\r\n tabindex=\"-1\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (click)=\"onClose($event)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">close</span>\r\n </span>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n class=\"ius-tag__x\"\r\n [attr.aria-label]=\"closeLabel()\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (click)=\"onClose($event)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">close</span>\r\n </button>\r\n }\r\n}\r\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: [{
|
|
@@ -5810,7 +5810,7 @@ class OptionItemComponent {
|
|
|
5810
5810
|
event.preventDefault();
|
|
5811
5811
|
}
|
|
5812
5812
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: OptionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5813
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: OptionItemComponent, isStandalone: true, selector: "ius-option-item", inputs: { label: "label", icon: "icon", selected: ["selected", "selected", booleanAttribute], multi: ["multi", "multi", booleanAttribute], active: ["active", "active", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], size: "size", value: "value", state: "state" }, outputs: { selectClicked: "selectClicked" }, host: { attributes: { "role": "option" }, listeners: { "click": "handleClick()", "mousedown": "onMouseDown($event)" }, properties: { "attr.data-size": "size !== 'medium' ? size : null", "attr.aria-selected": "isSelected || null", "attr.aria-disabled": "isDisabled || null", "attr.data-selected": "isSelected || null", "attr.data-variant": "isSelected ? variant : null", "attr.data-active": "active || null", "attr.data-disabled": "isDisabled || null", "attr.data-state": "forced ? state : null", "attr.data-value": "value ?? null" }, classAttribute: "ius-opt" }, ngImport: i0, template: "@if (icon) {\n <span class=\"ius-opt__icon\" aria-hidden=\"true\">\n <span translate=\"no\" class=\"ius-icon\">{{ icon }}</span>\n </span>\n}\n<span class=\"ius-opt__label\">{{ label }}<ng-content /></span>\n@if (showCheck) {\n <span class=\"ius-opt__check\" aria-hidden=\"true\">\n <span translate=\"no\" class=\"ius-icon\">check</span>\n </span>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:var(--ius-space-xs);box-sizing:border-box;width:100%;padding:var(--_opt-py, var(--ius-space-xs)) var(--ius-space-sm);border-radius:var(--ius-radius-md);font-family:var(--ius-font-body);font-size:var(--_opt-fs, var(--ius-fs-base));line-height:var(--ius-lh-base);color:var(--ius-text-primary);background:transparent;text-align:left;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-size=small]){--_opt-py: 6px;--_opt-fs: var(--ius-fs-base)}:host([data-size=large]){--_opt-py: 11px;--_opt-fs: var(--ius-fs-lg)}.ius-opt__icon{display:inline-flex;align-items:center;flex:0 0 auto;color:var(--ius-text-secondary)}.ius-opt__icon .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-opt__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-opt__check{flex:0 0 auto;width:22px;height:22px;border-radius:var(--ius-radius-pill);display:inline-flex;align-items:center;justify-content:center;background:var(--ius-primary-900);color:var(--ius-neutral-white)}.ius-opt__check .ius-icon{font-size:var(--ius-icon-sm);line-height:1}:host(:hover),:host([data-active=true]),:host([data-state=hover]),:host([data-state=selectedHovered]){background:var(--ius-info-100)}:host(:active),:host([data-state=pressed]){background:var(--ius-info-200)}:host([data-selected=true][data-variant=check]),:host([data-state=selected]),:host([data-state=selectedHovered]){color:var(--ius-text-primary);font-weight:var(--ius-fw-medium)}:host([data-selected=true][data-variant=fill]),:host([data-state=selectedVar]){background:var(--ius-primary-900);color:var(--ius-neutral-white);font-weight:var(--ius-fw-medium)}:host([data-selected=true][data-variant=fill]) .ius-opt__icon,:host([data-state=selectedVar]) .ius-opt__icon{color:var(--ius-neutral-white)}:host([data-selected=true][data-variant=fill]):hover,:host([data-state=selectedVar]):hover{background:var(--ius-primary-900)}:host([data-disabled=true]),:host([data-state=disabled]){color:var(--ius-text-disabled);cursor:not-allowed;background:transparent}:host([data-disabled=true]) .ius-opt__icon,:host([data-state=disabled]) .ius-opt__icon{color:var(--ius-text-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5813
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: OptionItemComponent, isStandalone: true, selector: "ius-option-item", inputs: { label: "label", icon: "icon", selected: ["selected", "selected", booleanAttribute], multi: ["multi", "multi", booleanAttribute], active: ["active", "active", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], size: "size", value: "value", state: "state" }, outputs: { selectClicked: "selectClicked" }, host: { attributes: { "role": "option" }, listeners: { "click": "handleClick()", "mousedown": "onMouseDown($event)" }, properties: { "attr.data-size": "size !== 'medium' ? size : null", "attr.aria-selected": "isSelected || null", "attr.aria-disabled": "isDisabled || null", "attr.data-selected": "isSelected || null", "attr.data-variant": "isSelected ? variant : null", "attr.data-active": "active || null", "attr.data-disabled": "isDisabled || null", "attr.data-state": "forced ? state : null", "attr.data-value": "value ?? null" }, classAttribute: "ius-opt" }, ngImport: i0, template: "@if (icon) {\r\n <span class=\"ius-opt__icon\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ icon }}</span>\r\n </span>\r\n}\r\n<span class=\"ius-opt__label\">{{ label }}<ng-content /></span>\r\n@if (showCheck) {\r\n <span class=\"ius-opt__check\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">check</span>\r\n </span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:var(--ius-space-xs);box-sizing:border-box;width:100%;padding:var(--_opt-py, var(--ius-space-xs)) var(--ius-space-sm);border-radius:var(--ius-radius-md);font-family:var(--ius-font-body);font-size:var(--_opt-fs, var(--ius-fs-base));line-height:var(--ius-lh-base);color:var(--ius-text-primary);background:transparent;text-align:left;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-size=small]){--_opt-py: 6px;--_opt-fs: var(--ius-fs-base)}:host([data-size=large]){--_opt-py: 11px;--_opt-fs: var(--ius-fs-lg)}.ius-opt__icon{display:inline-flex;align-items:center;flex:0 0 auto;color:var(--ius-text-secondary)}.ius-opt__icon .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-opt__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-opt__check{flex:0 0 auto;width:22px;height:22px;border-radius:var(--ius-radius-pill);display:inline-flex;align-items:center;justify-content:center;background:var(--ius-primary-900);color:var(--ius-neutral-white)}.ius-opt__check .ius-icon{font-size:var(--ius-icon-sm);line-height:1}:host(:hover),:host([data-active=true]),:host([data-state=hover]),:host([data-state=selectedHovered]){background:var(--ius-info-100)}:host(:active),:host([data-state=pressed]){background:var(--ius-info-200)}:host([data-selected=true][data-variant=check]),:host([data-state=selected]),:host([data-state=selectedHovered]){color:var(--ius-text-primary);font-weight:var(--ius-fw-medium)}:host([data-selected=true][data-variant=fill]),:host([data-state=selectedVar]){background:var(--ius-primary-900);color:var(--ius-neutral-white);font-weight:var(--ius-fw-medium)}:host([data-selected=true][data-variant=fill]) .ius-opt__icon,:host([data-state=selectedVar]) .ius-opt__icon{color:var(--ius-neutral-white)}:host([data-selected=true][data-variant=fill]):hover,:host([data-state=selectedVar]):hover{background:var(--ius-primary-900)}:host([data-disabled=true]),:host([data-state=disabled]){color:var(--ius-text-disabled);cursor:not-allowed;background:transparent}:host([data-disabled=true]) .ius-opt__icon,:host([data-state=disabled]) .ius-opt__icon{color:var(--ius-text-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5814
5814
|
}
|
|
5815
5815
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: OptionItemComponent, decorators: [{
|
|
5816
5816
|
type: Component,
|
|
@@ -5828,7 +5828,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
5828
5828
|
'[attr.data-value]': 'value ?? null',
|
|
5829
5829
|
'(click)': 'handleClick()',
|
|
5830
5830
|
'(mousedown)': 'onMouseDown($event)',
|
|
5831
|
-
}, template: "@if (icon) {\n <span class=\"ius-opt__icon\" aria-hidden=\"true\">\n <span translate=\"no\" class=\"ius-icon\">{{ icon }}</span>\n </span>\n}\n<span class=\"ius-opt__label\">{{ label }}<ng-content /></span>\n@if (showCheck) {\n <span class=\"ius-opt__check\" aria-hidden=\"true\">\n <span translate=\"no\" class=\"ius-icon\">check</span>\n </span>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:var(--ius-space-xs);box-sizing:border-box;width:100%;padding:var(--_opt-py, var(--ius-space-xs)) var(--ius-space-sm);border-radius:var(--ius-radius-md);font-family:var(--ius-font-body);font-size:var(--_opt-fs, var(--ius-fs-base));line-height:var(--ius-lh-base);color:var(--ius-text-primary);background:transparent;text-align:left;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-size=small]){--_opt-py: 6px;--_opt-fs: var(--ius-fs-base)}:host([data-size=large]){--_opt-py: 11px;--_opt-fs: var(--ius-fs-lg)}.ius-opt__icon{display:inline-flex;align-items:center;flex:0 0 auto;color:var(--ius-text-secondary)}.ius-opt__icon .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-opt__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-opt__check{flex:0 0 auto;width:22px;height:22px;border-radius:var(--ius-radius-pill);display:inline-flex;align-items:center;justify-content:center;background:var(--ius-primary-900);color:var(--ius-neutral-white)}.ius-opt__check .ius-icon{font-size:var(--ius-icon-sm);line-height:1}:host(:hover),:host([data-active=true]),:host([data-state=hover]),:host([data-state=selectedHovered]){background:var(--ius-info-100)}:host(:active),:host([data-state=pressed]){background:var(--ius-info-200)}:host([data-selected=true][data-variant=check]),:host([data-state=selected]),:host([data-state=selectedHovered]){color:var(--ius-text-primary);font-weight:var(--ius-fw-medium)}:host([data-selected=true][data-variant=fill]),:host([data-state=selectedVar]){background:var(--ius-primary-900);color:var(--ius-neutral-white);font-weight:var(--ius-fw-medium)}:host([data-selected=true][data-variant=fill]) .ius-opt__icon,:host([data-state=selectedVar]) .ius-opt__icon{color:var(--ius-neutral-white)}:host([data-selected=true][data-variant=fill]):hover,:host([data-state=selectedVar]):hover{background:var(--ius-primary-900)}:host([data-disabled=true]),:host([data-state=disabled]){color:var(--ius-text-disabled);cursor:not-allowed;background:transparent}:host([data-disabled=true]) .ius-opt__icon,:host([data-state=disabled]) .ius-opt__icon{color:var(--ius-text-disabled)}\n"] }]
|
|
5831
|
+
}, template: "@if (icon) {\r\n <span class=\"ius-opt__icon\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ icon }}</span>\r\n </span>\r\n}\r\n<span class=\"ius-opt__label\">{{ label }}<ng-content /></span>\r\n@if (showCheck) {\r\n <span class=\"ius-opt__check\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">check</span>\r\n </span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:var(--ius-space-xs);box-sizing:border-box;width:100%;padding:var(--_opt-py, var(--ius-space-xs)) var(--ius-space-sm);border-radius:var(--ius-radius-md);font-family:var(--ius-font-body);font-size:var(--_opt-fs, var(--ius-fs-base));line-height:var(--ius-lh-base);color:var(--ius-text-primary);background:transparent;text-align:left;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-size=small]){--_opt-py: 6px;--_opt-fs: var(--ius-fs-base)}:host([data-size=large]){--_opt-py: 11px;--_opt-fs: var(--ius-fs-lg)}.ius-opt__icon{display:inline-flex;align-items:center;flex:0 0 auto;color:var(--ius-text-secondary)}.ius-opt__icon .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-opt__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-opt__check{flex:0 0 auto;width:22px;height:22px;border-radius:var(--ius-radius-pill);display:inline-flex;align-items:center;justify-content:center;background:var(--ius-primary-900);color:var(--ius-neutral-white)}.ius-opt__check .ius-icon{font-size:var(--ius-icon-sm);line-height:1}:host(:hover),:host([data-active=true]),:host([data-state=hover]),:host([data-state=selectedHovered]){background:var(--ius-info-100)}:host(:active),:host([data-state=pressed]){background:var(--ius-info-200)}:host([data-selected=true][data-variant=check]),:host([data-state=selected]),:host([data-state=selectedHovered]){color:var(--ius-text-primary);font-weight:var(--ius-fw-medium)}:host([data-selected=true][data-variant=fill]),:host([data-state=selectedVar]){background:var(--ius-primary-900);color:var(--ius-neutral-white);font-weight:var(--ius-fw-medium)}:host([data-selected=true][data-variant=fill]) .ius-opt__icon,:host([data-state=selectedVar]) .ius-opt__icon{color:var(--ius-neutral-white)}:host([data-selected=true][data-variant=fill]):hover,:host([data-state=selectedVar]):hover{background:var(--ius-primary-900)}:host([data-disabled=true]),:host([data-state=disabled]){color:var(--ius-text-disabled);cursor:not-allowed;background:transparent}:host([data-disabled=true]) .ius-opt__icon,:host([data-state=disabled]) .ius-opt__icon{color:var(--ius-text-disabled)}\n"] }]
|
|
5832
5832
|
}], propDecorators: { label: [{
|
|
5833
5833
|
type: Input
|
|
5834
5834
|
}], icon: [{
|
|
@@ -5902,7 +5902,7 @@ class ChipComponent {
|
|
|
5902
5902
|
this.removed.emit();
|
|
5903
5903
|
}
|
|
5904
5904
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5905
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChipComponent, isStandalone: true, selector: "ius-chip", inputs: { label: "label", icon: "icon", removable: ["removable", "removable", booleanAttribute], size: "size", disabled: ["disabled", "disabled", booleanAttribute], state: "state", removeLabel: "removeLabel" }, outputs: { removed: "removed" }, host: { properties: { "attr.data-size": "size !== 'medium' ? size : null", "attr.data-removable": "removable || null", "attr.data-disabled": "isDisabled || null", "attr.data-state": "forcedState" }, classAttribute: "ius-chip" }, ngImport: i0, template: "@if (icon) {\n <span class=\"ius-chip__icon\" aria-hidden=\"true\">\n <span translate=\"no\" class=\"ius-icon\">{{ icon }}</span>\n </span>\n}\n<span class=\"ius-chip__label\">{{ label }}<ng-content /></span>\n@if (removable) {\n <button\n type=\"button\"\n class=\"ius-chip__x\"\n [attr.aria-label]=\"removeLabel\"\n tabindex=\"-1\"\n [disabled]=\"isDisabled\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"handleRemove($event)\"\n >\n <span translate=\"no\" class=\"ius-icon\">close</span>\n </button>\n}\n", styles: ["@charset \"UTF-8\";:host{--_chip-py: 4px;--_chip-px: 10px;--_chip-fs: var(--ius-fs-sm);--_chip-lh: var(--ius-lh-sm);--_chip-x: 18px;--_chip-icon: var(--ius-icon-sm);--_chip-gap: var(--ius-space-xs);display:inline-flex;align-items:center;gap:var(--_chip-gap);box-sizing:border-box;max-width:100%;padding:var(--_chip-py) var(--_chip-px);border-radius:var(--ius-radius-pill);border:1px solid var(--ius-stroke);background:var(--ius-neutral-white);font-family:var(--ius-font-body);font-size:var(--_chip-fs);line-height:var(--_chip-lh);color:var(--ius-text-primary);vertical-align:middle;-webkit-user-select:none;user-select:none;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)}:host([data-size=small]){--_chip-py: 3px;--_chip-px: 8px;--_chip-fs: var(--ius-fs-sm);--_chip-lh: var(--ius-lh-sm);--_chip-x: 16px;--_chip-icon: var(--ius-icon-sm);--_chip-gap: var(--ius-space-xxs)}:host([data-size=large]){--_chip-py: 5px;--_chip-px: 12px;--_chip-fs: var(--ius-fs-base);--_chip-lh: var(--ius-lh-base);--_chip-x: 20px;--_chip-icon: var(--ius-icon-sm);--_chip-gap: var(--ius-space-xs)}:host(:not([data-removable=true]):hover),:host([data-state=hover]:not([data-removable=true])){background:var(--ius-info-100);border-color:transparent}:host([data-removable=true]){background:var(--ius-info-200);border-color:transparent;padding-right:var(--ius-space-xxs)}:host([data-removable=true]:hover),:host([data-state=hover][data-removable=true]){background:var(--ius-info-100)}:host([data-disabled=true]),:host([data-state=disabled]){background:var(--ius-neutral-2);border-color:transparent;color:var(--ius-text-disabled);cursor:default}.ius-chip__icon{display:inline-flex;flex:0 0 auto;color:var(--ius-text-secondary)}.ius-chip__icon .ius-icon{font-size:var(--_chip-icon);line-height:1}:host([data-disabled=true]) .ius-chip__icon,:host([data-state=disabled]) .ius-chip__icon{color:var(--ius-text-disabled)}.ius-chip__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-chip__x{appearance:none;border:0;margin:0;padding:0;flex:0 0 auto;width:var(--_chip-x);height:var(--_chip-x);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-chip__x:hover{background:var(--ius-neutral-black)}.ius-chip__x .ius-icon{font-size:calc(var(--_chip-x) - 4px);line-height:1}:host([data-disabled=true]) .ius-chip__x,:host([data-state=disabled]) .ius-chip__x{background:var(--ius-neutral-5);cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5905
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChipComponent, isStandalone: true, selector: "ius-chip", inputs: { label: "label", icon: "icon", removable: ["removable", "removable", booleanAttribute], size: "size", disabled: ["disabled", "disabled", booleanAttribute], state: "state", removeLabel: "removeLabel" }, outputs: { removed: "removed" }, host: { properties: { "attr.data-size": "size !== 'medium' ? size : null", "attr.data-removable": "removable || null", "attr.data-disabled": "isDisabled || null", "attr.data-state": "forcedState" }, classAttribute: "ius-chip" }, ngImport: i0, template: "@if (icon) {\r\n <span class=\"ius-chip__icon\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ icon }}</span>\r\n </span>\r\n}\r\n<span class=\"ius-chip__label\">{{ label }}<ng-content /></span>\r\n@if (removable) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-chip__x\"\r\n [attr.aria-label]=\"removeLabel\"\r\n tabindex=\"-1\"\r\n [disabled]=\"isDisabled\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (click)=\"handleRemove($event)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">close</span>\r\n </button>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_chip-py: 4px;--_chip-px: 10px;--_chip-fs: var(--ius-fs-sm);--_chip-lh: var(--ius-lh-sm);--_chip-x: 18px;--_chip-icon: var(--ius-icon-sm);--_chip-gap: var(--ius-space-xs);display:inline-flex;align-items:center;gap:var(--_chip-gap);box-sizing:border-box;max-width:100%;padding:var(--_chip-py) var(--_chip-px);border-radius:var(--ius-radius-pill);border:1px solid var(--ius-stroke);background:var(--ius-neutral-white);font-family:var(--ius-font-body);font-size:var(--_chip-fs);line-height:var(--_chip-lh);color:var(--ius-text-primary);vertical-align:middle;-webkit-user-select:none;user-select:none;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)}:host([data-size=small]){--_chip-py: 3px;--_chip-px: 8px;--_chip-fs: var(--ius-fs-sm);--_chip-lh: var(--ius-lh-sm);--_chip-x: 16px;--_chip-icon: var(--ius-icon-sm);--_chip-gap: var(--ius-space-xxs)}:host([data-size=large]){--_chip-py: 5px;--_chip-px: 12px;--_chip-fs: var(--ius-fs-base);--_chip-lh: var(--ius-lh-base);--_chip-x: 20px;--_chip-icon: var(--ius-icon-sm);--_chip-gap: var(--ius-space-xs)}:host(:not([data-removable=true]):hover),:host([data-state=hover]:not([data-removable=true])){background:var(--ius-info-100);border-color:transparent}:host([data-removable=true]){background:var(--ius-info-200);border-color:transparent;padding-right:var(--ius-space-xxs)}:host([data-removable=true]:hover),:host([data-state=hover][data-removable=true]){background:var(--ius-info-100)}:host([data-disabled=true]),:host([data-state=disabled]){background:var(--ius-neutral-2);border-color:transparent;color:var(--ius-text-disabled);cursor:default}.ius-chip__icon{display:inline-flex;flex:0 0 auto;color:var(--ius-text-secondary)}.ius-chip__icon .ius-icon{font-size:var(--_chip-icon);line-height:1}:host([data-disabled=true]) .ius-chip__icon,:host([data-state=disabled]) .ius-chip__icon{color:var(--ius-text-disabled)}.ius-chip__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-chip__x{appearance:none;border:0;margin:0;padding:0;flex:0 0 auto;width:var(--_chip-x);height:var(--_chip-x);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-chip__x:hover{background:var(--ius-neutral-black)}.ius-chip__x .ius-icon{font-size:calc(var(--_chip-x) - 4px);line-height:1}:host([data-disabled=true]) .ius-chip__x,:host([data-state=disabled]) .ius-chip__x{background:var(--ius-neutral-5);cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5906
5906
|
}
|
|
5907
5907
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChipComponent, decorators: [{
|
|
5908
5908
|
type: Component,
|
|
@@ -5912,7 +5912,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
5912
5912
|
'[attr.data-removable]': 'removable || null',
|
|
5913
5913
|
'[attr.data-disabled]': 'isDisabled || null',
|
|
5914
5914
|
'[attr.data-state]': 'forcedState',
|
|
5915
|
-
}, template: "@if (icon) {\n <span class=\"ius-chip__icon\" aria-hidden=\"true\">\n <span translate=\"no\" class=\"ius-icon\">{{ icon }}</span>\n </span>\n}\n<span class=\"ius-chip__label\">{{ label }}<ng-content /></span>\n@if (removable) {\n <button\n type=\"button\"\n class=\"ius-chip__x\"\n [attr.aria-label]=\"removeLabel\"\n tabindex=\"-1\"\n [disabled]=\"isDisabled\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"handleRemove($event)\"\n >\n <span translate=\"no\" class=\"ius-icon\">close</span>\n </button>\n}\n", styles: ["@charset \"UTF-8\";:host{--_chip-py: 4px;--_chip-px: 10px;--_chip-fs: var(--ius-fs-sm);--_chip-lh: var(--ius-lh-sm);--_chip-x: 18px;--_chip-icon: var(--ius-icon-sm);--_chip-gap: var(--ius-space-xs);display:inline-flex;align-items:center;gap:var(--_chip-gap);box-sizing:border-box;max-width:100%;padding:var(--_chip-py) var(--_chip-px);border-radius:var(--ius-radius-pill);border:1px solid var(--ius-stroke);background:var(--ius-neutral-white);font-family:var(--ius-font-body);font-size:var(--_chip-fs);line-height:var(--_chip-lh);color:var(--ius-text-primary);vertical-align:middle;-webkit-user-select:none;user-select:none;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)}:host([data-size=small]){--_chip-py: 3px;--_chip-px: 8px;--_chip-fs: var(--ius-fs-sm);--_chip-lh: var(--ius-lh-sm);--_chip-x: 16px;--_chip-icon: var(--ius-icon-sm);--_chip-gap: var(--ius-space-xxs)}:host([data-size=large]){--_chip-py: 5px;--_chip-px: 12px;--_chip-fs: var(--ius-fs-base);--_chip-lh: var(--ius-lh-base);--_chip-x: 20px;--_chip-icon: var(--ius-icon-sm);--_chip-gap: var(--ius-space-xs)}:host(:not([data-removable=true]):hover),:host([data-state=hover]:not([data-removable=true])){background:var(--ius-info-100);border-color:transparent}:host([data-removable=true]){background:var(--ius-info-200);border-color:transparent;padding-right:var(--ius-space-xxs)}:host([data-removable=true]:hover),:host([data-state=hover][data-removable=true]){background:var(--ius-info-100)}:host([data-disabled=true]),:host([data-state=disabled]){background:var(--ius-neutral-2);border-color:transparent;color:var(--ius-text-disabled);cursor:default}.ius-chip__icon{display:inline-flex;flex:0 0 auto;color:var(--ius-text-secondary)}.ius-chip__icon .ius-icon{font-size:var(--_chip-icon);line-height:1}:host([data-disabled=true]) .ius-chip__icon,:host([data-state=disabled]) .ius-chip__icon{color:var(--ius-text-disabled)}.ius-chip__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-chip__x{appearance:none;border:0;margin:0;padding:0;flex:0 0 auto;width:var(--_chip-x);height:var(--_chip-x);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-chip__x:hover{background:var(--ius-neutral-black)}.ius-chip__x .ius-icon{font-size:calc(var(--_chip-x) - 4px);line-height:1}:host([data-disabled=true]) .ius-chip__x,:host([data-state=disabled]) .ius-chip__x{background:var(--ius-neutral-5);cursor:default}\n"] }]
|
|
5915
|
+
}, template: "@if (icon) {\r\n <span class=\"ius-chip__icon\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ icon }}</span>\r\n </span>\r\n}\r\n<span class=\"ius-chip__label\">{{ label }}<ng-content /></span>\r\n@if (removable) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-chip__x\"\r\n [attr.aria-label]=\"removeLabel\"\r\n tabindex=\"-1\"\r\n [disabled]=\"isDisabled\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (click)=\"handleRemove($event)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">close</span>\r\n </button>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_chip-py: 4px;--_chip-px: 10px;--_chip-fs: var(--ius-fs-sm);--_chip-lh: var(--ius-lh-sm);--_chip-x: 18px;--_chip-icon: var(--ius-icon-sm);--_chip-gap: var(--ius-space-xs);display:inline-flex;align-items:center;gap:var(--_chip-gap);box-sizing:border-box;max-width:100%;padding:var(--_chip-py) var(--_chip-px);border-radius:var(--ius-radius-pill);border:1px solid var(--ius-stroke);background:var(--ius-neutral-white);font-family:var(--ius-font-body);font-size:var(--_chip-fs);line-height:var(--_chip-lh);color:var(--ius-text-primary);vertical-align:middle;-webkit-user-select:none;user-select:none;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)}:host([data-size=small]){--_chip-py: 3px;--_chip-px: 8px;--_chip-fs: var(--ius-fs-sm);--_chip-lh: var(--ius-lh-sm);--_chip-x: 16px;--_chip-icon: var(--ius-icon-sm);--_chip-gap: var(--ius-space-xxs)}:host([data-size=large]){--_chip-py: 5px;--_chip-px: 12px;--_chip-fs: var(--ius-fs-base);--_chip-lh: var(--ius-lh-base);--_chip-x: 20px;--_chip-icon: var(--ius-icon-sm);--_chip-gap: var(--ius-space-xs)}:host(:not([data-removable=true]):hover),:host([data-state=hover]:not([data-removable=true])){background:var(--ius-info-100);border-color:transparent}:host([data-removable=true]){background:var(--ius-info-200);border-color:transparent;padding-right:var(--ius-space-xxs)}:host([data-removable=true]:hover),:host([data-state=hover][data-removable=true]){background:var(--ius-info-100)}:host([data-disabled=true]),:host([data-state=disabled]){background:var(--ius-neutral-2);border-color:transparent;color:var(--ius-text-disabled);cursor:default}.ius-chip__icon{display:inline-flex;flex:0 0 auto;color:var(--ius-text-secondary)}.ius-chip__icon .ius-icon{font-size:var(--_chip-icon);line-height:1}:host([data-disabled=true]) .ius-chip__icon,:host([data-state=disabled]) .ius-chip__icon{color:var(--ius-text-disabled)}.ius-chip__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-chip__x{appearance:none;border:0;margin:0;padding:0;flex:0 0 auto;width:var(--_chip-x);height:var(--_chip-x);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-chip__x:hover{background:var(--ius-neutral-black)}.ius-chip__x .ius-icon{font-size:calc(var(--_chip-x) - 4px);line-height:1}:host([data-disabled=true]) .ius-chip__x,:host([data-state=disabled]) .ius-chip__x{background:var(--ius-neutral-5);cursor:default}\n"] }]
|
|
5916
5916
|
}], propDecorators: { label: [{
|
|
5917
5917
|
type: Input
|
|
5918
5918
|
}], icon: [{
|
|
@@ -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\r\n ng-spec. El contorno es opcional (`bordered`, off por defecto): sin \u00E9l la\r\n card va en `plain`. Con `padding=\"none\"` el padding de la fila lo pone\r\n .ius-personitem__row, que es \u00ABel propio cuerpo\u00BB del que habla Card. -->\r\n<ius-card\r\n class=\"ius-personitem__card\"\r\n [variant]=\"cardVariant\"\r\n radius=\"lg\"\r\n padding=\"none\"\r\n [interactive]=\"clickable\"\r\n [selected]=\"cardSelected\"\r\n [ariaLabel]=\"ariaLabel\"\r\n [attr.aria-pressed]=\"ariaPressed\"\r\n (clicked)=\"clicked.emit($event)\"\r\n>\r\n <div class=\"ius-personitem__row\">\r\n <ius-avatar\r\n [size]=\"avatarSize\"\r\n [shape]=\"avatarShape\"\r\n [src]=\"avatar\"\r\n [name]=\"avatarName\"\r\n [monogram]=\"monogram\"\r\n [icon]=\"effIcon\"\r\n [color]=\"color\"\r\n [ariaLabel]=\"name\"\r\n />\r\n\r\n <div class=\"ius-personitem__body\">\r\n @if (hasName) {\r\n <span class=\"ius-personitem__name\">{{ name }}<ng-content select=\"[iusPersonItemName]\" /></span>\r\n }\r\n @for (line of displayLines; track $index) {\r\n <span class=\"ius-personitem__line\">\r\n @if (line.tpl) {\r\n <ng-container *ngTemplateOutlet=\"line.tpl\" />\r\n } @else {\r\n {{ line.text }}\r\n }\r\n </span>\r\n }\r\n </div>\r\n\r\n @if (selected && showCheck) {\r\n <span class=\"ius-personitem__check\"><span translate=\"no\" class=\"ius-icon\">check_circle</span></span>\r\n }\r\n\r\n @if (hasTrailing) {\r\n <span class=\"ius-personitem__trailing\"><ng-content select=\"[iusPersonItemTrailing]\" /></span>\r\n }\r\n\r\n @if (showMenu) {\r\n <!-- \u22EE de acciones del chip: compone ius-dropdown. Va ANTES de la X;\r\n su click no dispara la fila. -->\r\n <span class=\"ius-personitem__menu\" (click)=\"$event.stopPropagation()\">\r\n <ius-dropdown [items]=\"actions\" placement=\"bottom-end\" [ariaLabel]=\"actionsLabel\">\r\n <ius-icon-button\r\n iusDropdownTrigger\r\n icon=\"more_vert\"\r\n variant=\"tertiary\"\r\n shape=\"squared\"\r\n [size]=\"menuIbSize\"\r\n [ariaLabel]=\"actionsLabel\"\r\n [disabled]=\"disabled\"\r\n />\r\n </ius-dropdown>\r\n </span>\r\n }\r\n\r\n @if (showRemove) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-personitem__x\"\r\n [attr.aria-label]=\"removeLabel + (name ? ' ' + name : '')\"\r\n [disabled]=\"disabled\"\r\n (mousedown)=\"onRemoveMouseDown($event)\"\r\n (click)=\"onRemoveClick($event)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">close</span>\r\n </button>\r\n }\r\n </div>\r\n</ius-card>\r\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\r\n ng-spec. El contorno es opcional (`bordered`, off por defecto): sin \u00E9l la\r\n card va en `plain`. Con `padding=\"none\"` el padding de la fila lo pone\r\n .ius-personitem__row, que es \u00ABel propio cuerpo\u00BB del que habla Card. -->\r\n<ius-card\r\n class=\"ius-personitem__card\"\r\n [variant]=\"cardVariant\"\r\n radius=\"lg\"\r\n padding=\"none\"\r\n [interactive]=\"clickable\"\r\n [selected]=\"cardSelected\"\r\n [ariaLabel]=\"ariaLabel\"\r\n [attr.aria-pressed]=\"ariaPressed\"\r\n (clicked)=\"clicked.emit($event)\"\r\n>\r\n <div class=\"ius-personitem__row\">\r\n <ius-avatar\r\n [size]=\"avatarSize\"\r\n [shape]=\"avatarShape\"\r\n [src]=\"avatar\"\r\n [name]=\"avatarName\"\r\n [monogram]=\"monogram\"\r\n [icon]=\"effIcon\"\r\n [color]=\"color\"\r\n [ariaLabel]=\"name\"\r\n />\r\n\r\n <div class=\"ius-personitem__body\">\r\n @if (hasName) {\r\n <span class=\"ius-personitem__name\">{{ name }}<ng-content select=\"[iusPersonItemName]\" /></span>\r\n }\r\n @for (line of displayLines; track $index) {\r\n <span class=\"ius-personitem__line\">\r\n @if (line.tpl) {\r\n <ng-container *ngTemplateOutlet=\"line.tpl\" />\r\n } @else {\r\n {{ line.text }}\r\n }\r\n </span>\r\n }\r\n </div>\r\n\r\n @if (selected && showCheck) {\r\n <span class=\"ius-personitem__check\"><span translate=\"no\" class=\"ius-icon\">check_circle</span></span>\r\n }\r\n\r\n @if (hasTrailing) {\r\n <span class=\"ius-personitem__trailing\"><ng-content select=\"[iusPersonItemTrailing]\" /></span>\r\n }\r\n\r\n @if (showMenu) {\r\n <!-- \u22EE de acciones del chip: compone ius-dropdown. Va ANTES de la X;\r\n su click no dispara la fila. -->\r\n <span class=\"ius-personitem__menu\" (click)=\"$event.stopPropagation()\">\r\n <ius-dropdown [items]=\"actions\" placement=\"bottom-end\" [ariaLabel]=\"actionsLabel\">\r\n <ius-icon-button\r\n iusDropdownTrigger\r\n icon=\"more_vert\"\r\n variant=\"tertiary\"\r\n shape=\"squared\"\r\n [size]=\"menuIbSize\"\r\n [ariaLabel]=\"actionsLabel\"\r\n [disabled]=\"disabled\"\r\n />\r\n </ius-dropdown>\r\n </span>\r\n }\r\n\r\n @if (showRemove) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-personitem__x\"\r\n [attr.aria-label]=\"removeLabel + (name ? ' ' + name : '')\"\r\n [disabled]=\"disabled\"\r\n (mousedown)=\"onRemoveMouseDown($event)\"\r\n (click)=\"onRemoveClick($event)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">close</span>\r\n </button>\r\n }\r\n </div>\r\n</ius-card>\r\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>\r\n <div\r\n class=\"ius-modal__scrim\"\r\n [style.--_modal-z]=\"zIndex\"\r\n (mousedown)=\"onScrimMouseDown($event)\"\r\n >\r\n <div\r\n class=\"ius-modal\"\r\n [attr.data-size]=\"size\"\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n [attr.aria-label]=\"title == null ? ariaLabel : null\"\r\n [attr.aria-labelledby]=\"title != null ? titleId : null\"\r\n [attr.aria-describedby]=\"description != null ? descId : null\"\r\n cdkTrapFocus\r\n [cdkTrapFocusAutoCapture]=\"true\"\r\n >\r\n @if (hasHead) {\r\n <div class=\"ius-modal__head\" [attr.data-divider]=\"dividers ? 'true' : null\">\r\n @if (icon != null) {\r\n <span\r\n class=\"ius-modal__icon\"\r\n aria-hidden=\"true\"\r\n [style.--_mi-bg]=\"iconColors.bg\"\r\n [style.--_mi-fg]=\"iconColors.fg\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">{{ icon }}</span>\r\n </span>\r\n }\r\n\r\n @if (title != null || description != null) {\r\n <div class=\"ius-modal__titles\">\r\n @if (title != null) {\r\n <h2 class=\"ius-modal__title\" [id]=\"titleId\">{{ title }}</h2>\r\n }\r\n @if (description != null) {\r\n <p class=\"ius-modal__desc\" [id]=\"descId\">{{ description }}</p>\r\n }\r\n </div>\r\n } @else {\r\n <span class=\"ius-modal__titles\"></span>\r\n }\r\n\r\n @if (showClose) {\r\n <ius-icon-button\r\n class=\"ius-modal__close\"\r\n icon=\"close\"\r\n variant=\"tertiary\"\r\n size=\"small\"\r\n shape=\"circle\"\r\n ariaLabel=\"Cerrar\"\r\n (clicked)=\"onCloseClick()\"\r\n />\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"ius-modal__body\" [attr.data-no-head]=\"hasHead ? null : 'true'\">\r\n <ng-content />\r\n </div>\r\n\r\n @if (customFooter) {\r\n <div class=\"ius-modal__foot\" [attr.data-divider]=\"dividers ? 'true' : null\">\r\n <ng-content select=\"[iusModalFooter]\" />\r\n </div>\r\n } @else if (hasConvenienceFooter) {\r\n <div class=\"ius-modal__foot\" [attr.data-divider]=\"dividers ? 'true' : null\">\r\n @if (showSecondary) {\r\n <ius-button\r\n variant=\"secondary\"\r\n size=\"medium\"\r\n [label]=\"secondaryLabel!\"\r\n (clicked)=\"onSecondary()\"\r\n />\r\n }\r\n @if (primaryLabel != null) {\r\n <ius-button\r\n [variant]=\"destructive ? 'danger' : 'primary'\"\r\n size=\"medium\"\r\n [label]=\"primaryLabel\"\r\n [loading]=\"primaryLoading\"\r\n [disabled]=\"primaryDisabled\"\r\n (clicked)=\"onPrimary($event)\"\r\n />\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</ng-template>\r\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>\r\n <div\r\n class=\"ius-modal__scrim\"\r\n [style.--_modal-z]=\"zIndex\"\r\n (mousedown)=\"onScrimMouseDown($event)\"\r\n >\r\n <div\r\n class=\"ius-modal\"\r\n [attr.data-size]=\"size\"\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n [attr.aria-label]=\"title == null ? ariaLabel : null\"\r\n [attr.aria-labelledby]=\"title != null ? titleId : null\"\r\n [attr.aria-describedby]=\"description != null ? descId : null\"\r\n cdkTrapFocus\r\n [cdkTrapFocusAutoCapture]=\"true\"\r\n >\r\n @if (hasHead) {\r\n <div class=\"ius-modal__head\" [attr.data-divider]=\"dividers ? 'true' : null\">\r\n @if (icon != null) {\r\n <span\r\n class=\"ius-modal__icon\"\r\n aria-hidden=\"true\"\r\n [style.--_mi-bg]=\"iconColors.bg\"\r\n [style.--_mi-fg]=\"iconColors.fg\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">{{ icon }}</span>\r\n </span>\r\n }\r\n\r\n @if (title != null || description != null) {\r\n <div class=\"ius-modal__titles\">\r\n @if (title != null) {\r\n <h2 class=\"ius-modal__title\" [id]=\"titleId\">{{ title }}</h2>\r\n }\r\n @if (description != null) {\r\n <p class=\"ius-modal__desc\" [id]=\"descId\">{{ description }}</p>\r\n }\r\n </div>\r\n } @else {\r\n <span class=\"ius-modal__titles\"></span>\r\n }\r\n\r\n @if (showClose) {\r\n <ius-icon-button\r\n class=\"ius-modal__close\"\r\n icon=\"close\"\r\n variant=\"tertiary\"\r\n size=\"small\"\r\n shape=\"circle\"\r\n ariaLabel=\"Cerrar\"\r\n (clicked)=\"onCloseClick()\"\r\n />\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"ius-modal__body\" [attr.data-no-head]=\"hasHead ? null : 'true'\">\r\n <ng-content />\r\n </div>\r\n\r\n @if (customFooter) {\r\n <div class=\"ius-modal__foot\" [attr.data-divider]=\"dividers ? 'true' : null\">\r\n <ng-content select=\"[iusModalFooter]\" />\r\n </div>\r\n } @else if (hasConvenienceFooter) {\r\n <div class=\"ius-modal__foot\" [attr.data-divider]=\"dividers ? 'true' : null\">\r\n @if (showSecondary) {\r\n <ius-button\r\n variant=\"secondary\"\r\n size=\"medium\"\r\n [label]=\"secondaryLabel!\"\r\n (clicked)=\"onSecondary()\"\r\n />\r\n }\r\n @if (primaryLabel != null) {\r\n <ius-button\r\n [variant]=\"destructive ? 'danger' : 'primary'\"\r\n size=\"medium\"\r\n [label]=\"primaryLabel\"\r\n [loading]=\"primaryLoading\"\r\n [disabled]=\"primaryDisabled\"\r\n (clicked)=\"onPrimary($event)\"\r\n />\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</ng-template>\r\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) {\r\n <button\r\n #opt\r\n type=\"button\"\r\n role=\"radio\"\r\n class=\"ius-seg__opt\"\r\n [attr.name]=\"name || null\"\r\n [attr.aria-checked]=\"o.value === selected()\"\r\n [attr.aria-label]=\"iconOnly ? (o.ariaLabel || o.label || null) : null\"\r\n [attr.title]=\"iconOnly ? (o.ariaLabel || o.label || null) : (o.title || null)\"\r\n [disabled]=\"disabled || !!o.disabled\"\r\n [attr.tabindex]=\"tabIndexFor(o, i)\"\r\n (click)=\"onOptionClick(o)\"\r\n (keydown)=\"onKeyDown($event, i)\"\r\n >\r\n @if (o.icon) {\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ o.icon }}</span>\r\n }\r\n @if (!iconOnly && o.label != null) {\r\n <span>{{ o.label }}</span>\r\n }\r\n </button>\r\n}\r\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) {\r\n <button\r\n #opt\r\n type=\"button\"\r\n role=\"radio\"\r\n class=\"ius-seg__opt\"\r\n [attr.name]=\"name || null\"\r\n [attr.aria-checked]=\"o.value === selected()\"\r\n [attr.aria-label]=\"iconOnly ? (o.ariaLabel || o.label || null) : null\"\r\n [attr.title]=\"iconOnly ? (o.ariaLabel || o.label || null) : (o.title || null)\"\r\n [disabled]=\"disabled || !!o.disabled\"\r\n [attr.tabindex]=\"tabIndexFor(o, i)\"\r\n (click)=\"onOptionClick(o)\"\r\n (keydown)=\"onKeyDown($event, i)\"\r\n >\r\n @if (o.icon) {\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ o.icon }}</span>\r\n }\r\n @if (!iconOnly && o.label != null) {\r\n <span>{{ o.label }}</span>\r\n }\r\n </button>\r\n}\r\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: [{
|
|
@@ -9433,11 +9453,11 @@ class WizardComponent {
|
|
|
9433
9453
|
return Math.round(this.percent);
|
|
9434
9454
|
}
|
|
9435
9455
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: WizardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9436
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: WizardComponent, isStandalone: true, selector: "ius-wizard", inputs: { api: "api", showIndicator: ["showIndicator", "showIndicator", booleanAttribute], indicator: "indicator", showStepLabel: ["showStepLabel", "showStepLabel", booleanAttribute], stepWord: "stepWord", ofWord: "ofWord" }, host: { classAttribute: "ius-wizard" }, ngImport: i0, template: "@if (api) {\
|
|
9456
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: WizardComponent, isStandalone: true, selector: "ius-wizard", inputs: { api: "api", showIndicator: ["showIndicator", "showIndicator", booleanAttribute], indicator: "indicator", showStepLabel: ["showStepLabel", "showStepLabel", booleanAttribute], stepWord: "stepWord", ofWord: "ofWord" }, host: { classAttribute: "ius-wizard" }, ngImport: i0, template: "@if (api) {\n @if (showIndicator || showStepLabel) {\n <div class=\"ius-wizard__head\">\n @if (showIndicator) {\n @if (indicator) {\n <ng-container [ngTemplateOutlet]=\"indicator\" />\n } @else {\n <div\n class=\"ius-lpb\"\n role=\"progressbar\"\n aria-label=\"Progreso\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-valuenow]=\"ariaNow\"\n >\n <div class=\"ius-lpb__track\">\n <div class=\"ius-lpb__fill\" [style.width.%]=\"percent\"></div>\n @if (percent < 100) {\n <div class=\"ius-lpb__rest\"></div>\n }\n </div>\n </div>\n }\n }\n @if (showStepLabel) {\n <span class=\"ius-wizard__label\">\n {{ stepWord }} <b>{{ api.step }}</b> {{ ofWord }} {{ api.total }}\n @if (api.current?.label) {\n <span> \u00B7 {{ api.current?.label }}</span>\n }\n </span>\n }\n </div>\n }\n\n <div class=\"ius-wizard__step\">\n @if (api.current?.content) {\n <ng-container [ngTemplateOutlet]=\"api.current!.content!\" />\n }\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-md);font-family:var(--ius-font-body);min-width:0}.ius-wizard__head{display:flex;flex-direction:column;gap:var(--ius-space-xs)}.ius-wizard__label{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-tertiary)}.ius-wizard__label b{color:var(--ius-text-primary);font-weight:var(--ius-fw-medium)}.ius-wizard__step{min-width:0}.ius-lpb{--_lpb-h: 6px;--_lpb-track: var(--ius-neutral-3);--_lpb-fill: var(--ius-info-500);width:100%;display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body)}.ius-lpb__track{display:flex;align-items:center;gap:var(--ius-space-xxs);width:100%;height:var(--_lpb-h)}.ius-lpb__fill{height:100%;flex:0 0 auto;min-width:var(--_lpb-h);background:var(--_lpb-fill);border-radius:var(--ius-radius-pill);transition:width var(--ius-duration-slow, .32s) var(--ius-ease-standard)}.ius-lpb__rest{height:100%;flex:1 1 0;min-width:0;background:var(--_lpb-track);border-radius:var(--ius-radius-pill)}@media(prefers-reduced-motion:reduce){.ius-lpb__fill{transition:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9437
9457
|
}
|
|
9438
9458
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: WizardComponent, decorators: [{
|
|
9439
9459
|
type: Component,
|
|
9440
|
-
args: [{ selector: 'ius-wizard', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ius-wizard' }, template: "@if (api) {\
|
|
9460
|
+
args: [{ selector: 'ius-wizard', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ius-wizard' }, template: "@if (api) {\n @if (showIndicator || showStepLabel) {\n <div class=\"ius-wizard__head\">\n @if (showIndicator) {\n @if (indicator) {\n <ng-container [ngTemplateOutlet]=\"indicator\" />\n } @else {\n <div\n class=\"ius-lpb\"\n role=\"progressbar\"\n aria-label=\"Progreso\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-valuenow]=\"ariaNow\"\n >\n <div class=\"ius-lpb__track\">\n <div class=\"ius-lpb__fill\" [style.width.%]=\"percent\"></div>\n @if (percent < 100) {\n <div class=\"ius-lpb__rest\"></div>\n }\n </div>\n </div>\n }\n }\n @if (showStepLabel) {\n <span class=\"ius-wizard__label\">\n {{ stepWord }} <b>{{ api.step }}</b> {{ ofWord }} {{ api.total }}\n @if (api.current?.label) {\n <span> \u00B7 {{ api.current?.label }}</span>\n }\n </span>\n }\n </div>\n }\n\n <div class=\"ius-wizard__step\">\n @if (api.current?.content) {\n <ng-container [ngTemplateOutlet]=\"api.current!.content!\" />\n }\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-md);font-family:var(--ius-font-body);min-width:0}.ius-wizard__head{display:flex;flex-direction:column;gap:var(--ius-space-xs)}.ius-wizard__label{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-tertiary)}.ius-wizard__label b{color:var(--ius-text-primary);font-weight:var(--ius-fw-medium)}.ius-wizard__step{min-width:0}.ius-lpb{--_lpb-h: 6px;--_lpb-track: var(--ius-neutral-3);--_lpb-fill: var(--ius-info-500);width:100%;display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body)}.ius-lpb__track{display:flex;align-items:center;gap:var(--ius-space-xxs);width:100%;height:var(--_lpb-h)}.ius-lpb__fill{height:100%;flex:0 0 auto;min-width:var(--_lpb-h);background:var(--_lpb-fill);border-radius:var(--ius-radius-pill);transition:width var(--ius-duration-slow, .32s) var(--ius-ease-standard)}.ius-lpb__rest{height:100%;flex:1 1 0;min-width:0;background:var(--_lpb-track);border-radius:var(--ius-radius-pill)}@media(prefers-reduced-motion:reduce){.ius-lpb__fill{transition:none}}\n"] }]
|
|
9441
9461
|
}], propDecorators: { api: [{
|
|
9442
9462
|
type: Input,
|
|
9443
9463
|
args: [{ required: true }]
|
|
@@ -9503,11 +9523,11 @@ class WizardNavComponent {
|
|
|
9503
9523
|
this.finishAction?.();
|
|
9504
9524
|
}
|
|
9505
9525
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: WizardNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9506
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: WizardNavComponent, isStandalone: true, selector: "ius-wizard-nav", inputs: { api: "api", backLabel: "backLabel", nextLabel: "nextLabel", finishLabel: "finishLabel", nextIcon: "nextIcon", finishDynamic: ["finishDynamic", "finishDynamic", booleanAttribute], nextDisabled: ["nextDisabled", "nextDisabled", booleanAttribute], hideBackOnFirst: ["hideBackOnFirst", "hideBackOnFirst", booleanAttribute], finishAction: "finishAction" }, outputs: { finish: "finish" }, host: { classAttribute: "ius-wizard-nav" }, ngImport: i0, template: "@if (api) {\
|
|
9526
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: WizardNavComponent, isStandalone: true, selector: "ius-wizard-nav", inputs: { api: "api", backLabel: "backLabel", nextLabel: "nextLabel", finishLabel: "finishLabel", nextIcon: "nextIcon", finishDynamic: ["finishDynamic", "finishDynamic", booleanAttribute], nextDisabled: ["nextDisabled", "nextDisabled", booleanAttribute], hideBackOnFirst: ["hideBackOnFirst", "hideBackOnFirst", booleanAttribute], finishAction: "finishAction" }, outputs: { finish: "finish" }, host: { classAttribute: "ius-wizard-nav" }, ngImport: i0, template: "@if (api) {\n @if (!(hideBackOnFirst && api.isFirst)) {\n <ius-button\n variant=\"secondary\"\n fullWidth\n [label]=\"backLabel\"\n [disabled]=\"api.isFirst\"\n (clicked)=\"api.back()\"\n />\n }\n\n @if (api.isLast) {\n @if (finishDynamic) {\n <ius-button\n variant=\"primary\"\n fullWidth\n dynamic\n [label]=\"finishLabel\"\n [action]=\"runFinish\"\n />\n } @else {\n <ius-button\n variant=\"primary\"\n fullWidth\n [label]=\"finishLabel\"\n (clicked)=\"onFinishClick()\"\n />\n }\n } @else {\n <ius-button\n variant=\"primary\"\n fullWidth\n [label]=\"nextLabel\"\n [sufixIcon]=\"nextIcon\"\n [disabled]=\"nextDisabled\"\n (clicked)=\"api.next()\"\n />\n }\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;gap:var(--ius-space-sm)}:host>*{flex:1 1 0;min-width:0}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ius-button", inputs: ["variant", "label", "prefixIcon", "sufixIcon", "dynamic", "loading", "status", "disabled", "pressed", "fullWidth", "type", "ariaLabel", "action", "size"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9507
9527
|
}
|
|
9508
9528
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: WizardNavComponent, decorators: [{
|
|
9509
9529
|
type: Component,
|
|
9510
|
-
args: [{ selector: 'ius-wizard-nav', standalone: true, imports: [ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ius-wizard-nav' }, template: "@if (api) {\
|
|
9530
|
+
args: [{ selector: 'ius-wizard-nav', standalone: true, imports: [ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ius-wizard-nav' }, template: "@if (api) {\n @if (!(hideBackOnFirst && api.isFirst)) {\n <ius-button\n variant=\"secondary\"\n fullWidth\n [label]=\"backLabel\"\n [disabled]=\"api.isFirst\"\n (clicked)=\"api.back()\"\n />\n }\n\n @if (api.isLast) {\n @if (finishDynamic) {\n <ius-button\n variant=\"primary\"\n fullWidth\n dynamic\n [label]=\"finishLabel\"\n [action]=\"runFinish\"\n />\n } @else {\n <ius-button\n variant=\"primary\"\n fullWidth\n [label]=\"finishLabel\"\n (clicked)=\"onFinishClick()\"\n />\n }\n } @else {\n <ius-button\n variant=\"primary\"\n fullWidth\n [label]=\"nextLabel\"\n [sufixIcon]=\"nextIcon\"\n [disabled]=\"nextDisabled\"\n (clicked)=\"api.next()\"\n />\n }\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;gap:var(--ius-space-sm)}:host>*{flex:1 1 0;min-width:0}\n"] }]
|
|
9511
9531
|
}], propDecorators: { api: [{
|
|
9512
9532
|
type: Input,
|
|
9513
9533
|
args: [{ required: true }]
|
|
@@ -9639,7 +9659,7 @@ class ScrollAreaComponent {
|
|
|
9639
9659
|
}
|
|
9640
9660
|
}
|
|
9641
9661
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ScrollAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9642
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: ScrollAreaComponent, isStandalone: true, selector: "ius-scroll-area", inputs: { axis: "axis", size: "size", autoHide: ["autoHide", "autoHide", booleanAttribute], fade: ["fade", "fade", booleanAttribute], maxHeight: "maxHeight", maxWidth: "maxWidth", viewClassName: "viewClassName" }, outputs: { scrolled: "scrolled" }, host: { properties: { "attr.data-axis": "axis", "attr.data-fade": "fade ? 'true' : 'false'" }, classAttribute: "ius-sa" }, viewQueries: [{ propertyName: "view", first: true, predicate: ["view"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\
|
|
9662
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: ScrollAreaComponent, isStandalone: true, selector: "ius-scroll-area", inputs: { axis: "axis", size: "size", autoHide: ["autoHide", "autoHide", booleanAttribute], fade: ["fade", "fade", booleanAttribute], maxHeight: "maxHeight", maxWidth: "maxWidth", viewClassName: "viewClassName" }, outputs: { scrolled: "scrolled" }, host: { properties: { "attr.data-axis": "axis", "attr.data-fade": "fade ? 'true' : 'false'" }, classAttribute: "ius-sa" }, viewQueries: [{ propertyName: "view", first: true, predicate: ["view"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\n #view\n [class]=\"viewClasses\"\n [style.max-height]=\"maxHeightCss\"\n [style.max-width]=\"maxWidthCss\"\n>\n <ng-content />\n</div>\n", styles: ["@charset \"UTF-8\";:host{position:relative;box-sizing:border-box;display:block;min-height:0;min-width:0}.ius-sa__view{box-sizing:border-box;width:100%;height:100%}:host([data-axis=y]) .ius-sa__view{overflow-y:auto;overflow-x:hidden}:host([data-axis=x]) .ius-sa__view{overflow-x:auto;overflow-y:hidden}:host([data-axis=both]) .ius-sa__view{overflow:auto}:host([data-fade=true][data-axis=y]) .ius-sa__view{--_sa-top: 0px;--_sa-bot: 0px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--_sa-top),#000 calc(100% - var(--_sa-bot)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 var(--_sa-top),#000 calc(100% - var(--_sa-bot)),transparent 100%)}:host([data-fade=true][data-axis=x]) .ius-sa__view{--_sa-l: 0px;--_sa-r: 0px;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--_sa-l),#000 calc(100% - var(--_sa-r)),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 var(--_sa-l),#000 calc(100% - var(--_sa-r)),transparent 100%)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9643
9663
|
}
|
|
9644
9664
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ScrollAreaComponent, decorators: [{
|
|
9645
9665
|
type: Component,
|
|
@@ -9647,7 +9667,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
9647
9667
|
class: 'ius-sa',
|
|
9648
9668
|
'[attr.data-axis]': 'axis',
|
|
9649
9669
|
'[attr.data-fade]': "fade ? 'true' : 'false'",
|
|
9650
|
-
}, template: "<div\
|
|
9670
|
+
}, template: "<div\n #view\n [class]=\"viewClasses\"\n [style.max-height]=\"maxHeightCss\"\n [style.max-width]=\"maxWidthCss\"\n>\n <ng-content />\n</div>\n", styles: ["@charset \"UTF-8\";:host{position:relative;box-sizing:border-box;display:block;min-height:0;min-width:0}.ius-sa__view{box-sizing:border-box;width:100%;height:100%}:host([data-axis=y]) .ius-sa__view{overflow-y:auto;overflow-x:hidden}:host([data-axis=x]) .ius-sa__view{overflow-x:auto;overflow-y:hidden}:host([data-axis=both]) .ius-sa__view{overflow:auto}:host([data-fade=true][data-axis=y]) .ius-sa__view{--_sa-top: 0px;--_sa-bot: 0px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--_sa-top),#000 calc(100% - var(--_sa-bot)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 var(--_sa-top),#000 calc(100% - var(--_sa-bot)),transparent 100%)}:host([data-fade=true][data-axis=x]) .ius-sa__view{--_sa-l: 0px;--_sa-r: 0px;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--_sa-l),#000 calc(100% - var(--_sa-r)),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 var(--_sa-l),#000 calc(100% - var(--_sa-r)),transparent 100%)}\n"] }]
|
|
9651
9671
|
}], propDecorators: { axis: [{
|
|
9652
9672
|
type: Input
|
|
9653
9673
|
}], size: [{
|
|
@@ -9760,18 +9780,18 @@ class DividerComponent {
|
|
|
9760
9780
|
this.hasLabel.set(this.orientation === 'horizontal' && conContenido);
|
|
9761
9781
|
}
|
|
9762
9782
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9763
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: DividerComponent, isStandalone: true, selector: "ius-divider", inputs: { orientation: "orientation", variant: "variant", textAlign: "textAlign" }, host: { attributes: { "role": "separator" }, properties: { "attr.aria-orientation": "orientation", "attr.data-orientation": "orientation", "attr.data-variant": "variant", "attr.data-text-align": "hasLabel() ? textAlign : null", "attr.data-empty": "orientation === 'horizontal' && !hasLabel() ? 'true' : null" } }, viewQueries: [{ propertyName: "labelWrap", first: true, predicate: ["labelWrap"], descendants: true, static: true }], ngImport: i0, template: `
|
|
9764
|
-
<span #labelWrap class="ius-divider__label" [hidden]="!hasLabel()">
|
|
9765
|
-
<ng-content />
|
|
9766
|
-
</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
|
|
9783
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: DividerComponent, isStandalone: true, selector: "ius-divider", inputs: { orientation: "orientation", variant: "variant", textAlign: "textAlign" }, host: { attributes: { "role": "separator" }, properties: { "attr.aria-orientation": "orientation", "attr.data-orientation": "orientation", "attr.data-variant": "variant", "attr.data-text-align": "hasLabel() ? textAlign : null", "attr.data-empty": "orientation === 'horizontal' && !hasLabel() ? 'true' : null" } }, viewQueries: [{ propertyName: "labelWrap", first: true, predicate: ["labelWrap"], descendants: true, static: true }], ngImport: i0, template: `
|
|
9784
|
+
<span #labelWrap class="ius-divider__label" [hidden]="!hasLabel()">
|
|
9785
|
+
<ng-content />
|
|
9786
|
+
</span>
|
|
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,
|
|
9771
|
-
args: [{ selector: 'ius-divider', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
9772
|
-
<span #labelWrap class="ius-divider__label" [hidden]="!hasLabel()">
|
|
9773
|
-
<ng-content />
|
|
9774
|
-
</span>
|
|
9791
|
+
args: [{ selector: 'ius-divider', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
9792
|
+
<span #labelWrap class="ius-divider__label" [hidden]="!hasLabel()">
|
|
9793
|
+
<ng-content />
|
|
9794
|
+
</span>
|
|
9775
9795
|
`, host: {
|
|
9776
9796
|
role: 'separator',
|
|
9777
9797
|
'[attr.aria-orientation]': 'orientation',
|
|
@@ -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;
|
|
@@ -11406,7 +11432,7 @@ class SettingsNavComponent {
|
|
|
11406
11432
|
this.visibleCount.set(count);
|
|
11407
11433
|
}
|
|
11408
11434
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SettingsNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11409
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SettingsNavComponent, isStandalone: true, selector: "ius-settings-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, defaultCollapsed: { classPropertyName: "defaultCollapsed", publicName: "defaultCollapsed", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, overflowLabel: { classPropertyName: "overflowLabel", publicName: "overflowLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIdChange: "selectedIdChange", itemClick: "itemClick", collapsedChange: "collapsedChange" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel()", "attr.data-collapsed": "isCollapsed() ? 'true' : null", "attr.title": "null", "style.--_sn-w": "widthCss()", "style.--_sn-cico-h": "cicoH()", "style.--_sn-fg": "accentFg()", "style.--_sn-tint": "accentTint()" }, classAttribute: "ius-settings-nav" }, queries: [{ propertyName: "headerRef", first: true, predicate: IusSettingsNavHeaderDirective, descendants: true, isSignal: true }, { propertyName: "footerRef", first: true, predicate: IusSettingsNavFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "wrapRef", first: true, predicate: ["wrap"], descendants: true, isSignal: true }, { propertyName: "measRef", first: true, predicate: ["meas"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\r\n SettingsNav \u2014 el HOST es el `<nav>` (ver `host:` del .ts), as\u00ED que aqu\u00ED\r\n arranca directamente el contenido: encabezado \u00B7 columna de filas \u00B7 pie.\r\n-->\r\n\r\n<!--\r\n Encabezado. El slot `[iusSettingsNavHeader]` MANDA sobre `title`, y `title`\r\n se oculta al colapsar (ambas condiciones viven en `showTitle()`).\r\n El `ng-content` va en un \u00FAnico `@if` (nunca anidado): con `@if` anidados el\r\n compilador solo iza el atributo `select` un nivel y la proyecci\u00F3n fallar\u00EDa en\r\n silencio.\r\n-->\r\n@if (headerRef() || showTitle()) {\r\n <div class=\"ius-settings-nav__header\">\r\n <ng-content select=\"[iusSettingsNavHeader]\" />\r\n @if (showTitle()) {\r\n <div class=\"ius-settings-nav__title\">{{ title() }}</div>\r\n }\r\n </div>\r\n}\r\n\r\n<!-- Columna de filas: NO scrollea (priority+ recoge lo que no cabe). -->\r\n<div class=\"ius-settings-nav__items\" #wrap>\r\n @for (it of visibleItems(); track it.id) {\r\n <ng-container [ngTemplateOutlet]=\"fila\" [ngTemplateOutletContext]=\"{ it: it }\" />\r\n }\r\n\r\n <!-- Desborde: lo que no cabe en alto se recoge en un Popover a la derecha. -->\r\n @if (hasOverflow()) {\r\n <ius-popover\r\n [open]=\"moreOpen()\"\r\n trigger=\"click\"\r\n placement=\"right-start\"\r\n [showArrow]=\"false\"\r\n [offset]=\"8\"\r\n [dismissable]=\"true\"\r\n (openChange)=\"moreOpen.set($event)\"\r\n >\r\n @if (isCollapsed()) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-settings-nav__cico\"\r\n [attr.data-selected]=\"anyHiddenSelected() ? 'true' : null\"\r\n [attr.aria-label]=\"overflowLabel()\"\r\n aria-haspopup=\"menu\"\r\n [attr.aria-expanded]=\"moreOpen()\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">more_horiz</span>\r\n @if (anyHiddenSelected()) {\r\n <span class=\"ius-settings-nav__cico-badge\" aria-hidden=\"true\"></span>\r\n }\r\n </button>\r\n } @else {\r\n <ius-menu-item\r\n variant=\"rail\"\r\n [size]=\"size()\"\r\n icon=\"more_horiz\"\r\n [label]=\"overflowLabel()\"\r\n [selected]=\"anyHiddenSelected()\"\r\n [ariaLabel]=\"overflowLabel() + ' secciones'\"\r\n />\r\n }\r\n\r\n <!--\r\n Panel del desborde. Se estampa en el overlay del CDK (FUERA del host),\r\n as\u00ED que las variables de acento NO se heredan: se repiten en l\u00EDnea, tal\r\n como el golden repite `accentVars(accent)` en este mismo nodo.\r\n -->\r\n <div\r\n iusPopoverContent\r\n class=\"ius-settings-nav__pop\"\r\n role=\"menu\"\r\n [style.--_sn-fg]=\"accentFg()\"\r\n [style.--_sn-tint]=\"accentTint()\"\r\n >\r\n @for (it of hiddenItems(); track it.id) {\r\n <ius-menu-item\r\n variant=\"menu\"\r\n itemRole=\"menuitem\"\r\n [size]=\"size()\"\r\n [icon]=\"it.icon\"\r\n [label]=\"it.label\"\r\n [badge]=\"it.badge\"\r\n [selected]=\"it.id === selectedId()\"\r\n [disabled]=\"!!it.disabled\"\r\n [href]=\"it.href\"\r\n (clicked)=\"handleFromOverflow(it)\"\r\n />\r\n }\r\n </div>\r\n </ius-popover>\r\n }\r\n\r\n <!--\r\n Contenedor de MEDICI\u00D3N (priority+): clona TODAS las filas fuera de vista\r\n (`position: absolute` + `visibility: hidden`, as\u00ED que no aporta alto ni\r\n entra en el orden de tabulaci\u00F3n) y de ah\u00ED se leen los `offsetHeight`.\r\n Cada clon va envuelto en `__mrow` porque el host de `ius-menu-item` es\r\n `display: contents` y no generar\u00EDa caja que medir.\r\n -->\r\n <div class=\"ius-settings-nav__measure\" #meas aria-hidden=\"true\">\r\n @for (it of items(); track it.id) {\r\n <div class=\"ius-settings-nav__mrow\">\r\n <ng-container [ngTemplateOutlet]=\"fila\" [ngTemplateOutletContext]=\"{ it: it }\" />\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n\r\n<!-- Pie: slot libre + bot\u00F3n propio de colapso, sobre una l\u00EDnea separadora. -->\r\n@if (hasFooter()) {\r\n <div class=\"ius-settings-nav__sep\"></div>\r\n <div class=\"ius-settings-nav__footer\">\r\n <ng-content select=\"[iusSettingsNavFooter]\" />\r\n\r\n @if (collapsible()) {\r\n @if (isCollapsed()) {\r\n <ius-tooltip [label]=\"toggleLabel()\" placement=\"right\">\r\n <button\r\n type=\"button\"\r\n class=\"ius-settings-nav__cico\"\r\n [attr.aria-label]=\"toggleLabel()\"\r\n aria-expanded=\"false\"\r\n (click)=\"toggleCollapsed()\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ toggleIcon() }}</span>\r\n </button>\r\n </ius-tooltip>\r\n } @else {\r\n <ius-menu-item\r\n variant=\"rail\"\r\n [size]=\"size()\"\r\n [icon]=\"toggleIcon()\"\r\n [label]=\"toggleLabel()\"\r\n [ariaLabel]=\"toggleLabel()\"\r\n (clicked)=\"toggleCollapsed()\"\r\n />\r\n }\r\n }\r\n </div>\r\n}\r\n\r\n<!--\r\n UNA sola plantilla de fila, estampada con `NgTemplateOutlet` en la columna\r\n visible y en el contenedor de medici\u00F3n. El contexto de un `ng-template` no\r\n est\u00E1 tipado, as\u00ED que `asItem()` le devuelve el tipo y `strictTemplates`\r\n vuelve a comprobar todo el cuerpo.\r\n-->\r\n<ng-template #fila let-raw=\"it\">\r\n @let it = asItem(raw);\r\n @let sel = it.id === selectedId();\r\n\r\n @if (isCollapsed()) {\r\n <!-- Colapsado: solo \u00EDcono; el nombre accesible lo dan Tooltip + aria-label. -->\r\n <ius-tooltip [label]=\"it.label\" placement=\"right\">\r\n @if (isLink(it)) {\r\n <a\r\n class=\"ius-settings-nav__cico\"\r\n [href]=\"it.href\"\r\n [attr.data-selected]=\"sel ? 'true' : null\"\r\n [attr.data-disabled]=\"it.disabled ? 'true' : null\"\r\n [attr.aria-current]=\"sel ? 'page' : null\"\r\n [attr.aria-label]=\"it.label\"\r\n (click)=\"handle(it)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ it.icon }}</span>\r\n @if (it.badge) {\r\n <span class=\"ius-settings-nav__cico-badge\" aria-hidden=\"true\"></span>\r\n }\r\n </a>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n class=\"ius-settings-nav__cico\"\r\n [disabled]=\"!it.href && !!it.disabled\"\r\n [attr.data-selected]=\"sel ? 'true' : null\"\r\n [attr.data-disabled]=\"it.disabled ? 'true' : null\"\r\n [attr.aria-current]=\"sel ? 'page' : null\"\r\n [attr.aria-label]=\"it.label\"\r\n (click)=\"handle(it)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ it.icon }}</span>\r\n @if (it.badge) {\r\n <span class=\"ius-settings-nav__cico-badge\" aria-hidden=\"true\"></span>\r\n }\r\n </button>\r\n }\r\n </ius-tooltip>\r\n } @else {\r\n <!-- Expandido: la fila ES un MenuItem `rail` (idle/hover/pressed heredados). -->\r\n <ius-menu-item\r\n variant=\"rail\"\r\n [size]=\"size()\"\r\n [icon]=\"it.icon\"\r\n [label]=\"it.label\"\r\n [badge]=\"it.badge\"\r\n [selected]=\"sel\"\r\n [disabled]=\"!!it.disabled\"\r\n [href]=\"it.href\"\r\n (clicked)=\"handle(it)\"\r\n />\r\n }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{box-sizing:border-box;-webkit-user-select:none;user-select:none;display:flex;flex-direction:column;width:var(--_sn-w, 240px);min-width:var(--_sn-w, 240px);height:100%;background:var(--ius-surface-card);border-right:1px solid var(--ius-stroke);padding:var(--ius-space-sm) var(--ius-space-xs);gap:var(--ius-space-xxs);font-family:var(--ius-font-body)}:host([data-collapsed=true]){width:var(--_sn-wc, 64px);min-width:var(--_sn-wc, 64px)}.ius-settings-nav__header{flex:0 0 auto;padding:var(--ius-space-xs) var(--ius-space-xs) var(--ius-space-sm);min-height:0}.ius-settings-nav__title{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);line-height:1.2;text-transform:uppercase;letter-spacing:.04em;color:var(--ius-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-settings-nav__items{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs);overflow:hidden;position:relative}.ius-settings-nav__measure{position:absolute;top:0;left:0;right:0;visibility:hidden;pointer-events:none;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-settings-nav__mrow{display:flex;flex-direction:column}.ius-settings-nav__footer{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-settings-nav__sep{height:1px;background:var(--ius-stroke);margin:var(--ius-space-xs) var(--ius-space-xs);flex:0 0 auto}:host ::ng-deep .ius-menuitem[data-variant=rail]{--_mi-icon: var(--ius-neutral-8)}:host ::ng-deep .ius-menuitem[data-variant=rail][data-selected=true]{background:var(--_sn-tint);--_mi-icon: var(--_sn-fg)}:host ::ng-deep .ius-menuitem[data-variant=rail][data-selected=true] .ius-menuitem__label{color:var(--_sn-fg)}:host ::ng-deep ius-tooltip{align-items:stretch}:host ::ng-deep ius-tooltip>ius-popover{flex:1 1 auto;min-width:0;align-items:stretch}.ius-settings-nav__cico{appearance:none;border:0;background:transparent;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:var(--_sn-cico-h, var(--ius-hit-target-min));border-radius:var(--ius-radius-md);color:var(--ius-neutral-8);text-decoration:none;transition:background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-settings-nav__cico:hover{background:var(--ius-neutral-2)}.ius-settings-nav__cico:active{background:var(--ius-neutral-3)}.ius-settings-nav__cico:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-settings-nav__cico[data-disabled=true]{opacity:.5;pointer-events:none;cursor:default}.ius-settings-nav__cico[data-selected=true]{background:var(--_sn-tint);color:var(--_sn-fg)}.ius-settings-nav__cico .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-settings-nav__cico-badge{position:absolute;top:7px;right:12px;width:8px;height:8px;border-radius:var(--ius-radius-pill);background:var(--ius-info-500);box-shadow:0 0 0 2px var(--ius-surface-card)}.ius-settings-nav__pop{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:208px;padding:var(--ius-space-xxs)}.ius-settings-nav__pop ::ng-deep .ius-menuitem[data-variant=menu][data-selected=true]{background:var(--_sn-tint);--_mi-icon: var(--_sn-fg)}.ius-settings-nav__pop ::ng-deep .ius-menuitem[data-variant=menu][data-selected=true] .ius-menuitem__label{color:var(--_sn-fg)}\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: "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: TooltipComponent, selector: "ius-tooltip", inputs: ["label", "placement", "trigger", "offset", "showArrow", "disabled", "open", "defaultOpen"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
11435
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SettingsNavComponent, isStandalone: true, selector: "ius-settings-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, defaultCollapsed: { classPropertyName: "defaultCollapsed", publicName: "defaultCollapsed", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, overflowLabel: { classPropertyName: "overflowLabel", publicName: "overflowLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIdChange: "selectedIdChange", itemClick: "itemClick", collapsedChange: "collapsedChange" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel()", "attr.data-collapsed": "isCollapsed() ? 'true' : null", "attr.title": "null", "style.--_sn-w": "widthCss()", "style.--_sn-cico-h": "cicoH()", "style.--_sn-fg": "accentFg()", "style.--_sn-tint": "accentTint()" }, classAttribute: "ius-settings-nav" }, queries: [{ propertyName: "headerRef", first: true, predicate: IusSettingsNavHeaderDirective, descendants: true, isSignal: true }, { propertyName: "footerRef", first: true, predicate: IusSettingsNavFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "wrapRef", first: true, predicate: ["wrap"], descendants: true, isSignal: true }, { propertyName: "measRef", first: true, predicate: ["meas"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n SettingsNav \u2014 el HOST es el `<nav>` (ver `host:` del .ts), as\u00ED que aqu\u00ED\n arranca directamente el contenido: encabezado \u00B7 columna de filas \u00B7 pie.\n-->\n\n<!--\n Encabezado. El slot `[iusSettingsNavHeader]` MANDA sobre `title`, y `title`\n se oculta al colapsar (ambas condiciones viven en `showTitle()`).\n El `ng-content` va en un \u00FAnico `@if` (nunca anidado): con `@if` anidados el\n compilador solo iza el atributo `select` un nivel y la proyecci\u00F3n fallar\u00EDa en\n silencio.\n-->\n@if (headerRef() || showTitle()) {\n <div class=\"ius-settings-nav__header\">\n <ng-content select=\"[iusSettingsNavHeader]\" />\n @if (showTitle()) {\n <div class=\"ius-settings-nav__title\">{{ title() }}</div>\n }\n </div>\n}\n\n<!-- Columna de filas: NO scrollea (priority+ recoge lo que no cabe). -->\n<div class=\"ius-settings-nav__items\" #wrap>\n @for (it of visibleItems(); track it.id) {\n <ng-container [ngTemplateOutlet]=\"fila\" [ngTemplateOutletContext]=\"{ it: it }\" />\n }\n\n <!-- Desborde: lo que no cabe en alto se recoge en un Popover a la derecha. -->\n @if (hasOverflow()) {\n <ius-popover\n [open]=\"moreOpen()\"\n trigger=\"click\"\n placement=\"right-start\"\n [showArrow]=\"false\"\n [offset]=\"8\"\n [dismissable]=\"true\"\n (openChange)=\"moreOpen.set($event)\"\n >\n @if (isCollapsed()) {\n <button\n type=\"button\"\n class=\"ius-settings-nav__cico\"\n [attr.data-selected]=\"anyHiddenSelected() ? 'true' : null\"\n [attr.aria-label]=\"overflowLabel()\"\n aria-haspopup=\"menu\"\n [attr.aria-expanded]=\"moreOpen()\"\n >\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">more_horiz</span>\n @if (anyHiddenSelected()) {\n <span class=\"ius-settings-nav__cico-badge\" aria-hidden=\"true\"></span>\n }\n </button>\n } @else {\n <ius-menu-item\n variant=\"rail\"\n [size]=\"size()\"\n icon=\"more_horiz\"\n [label]=\"overflowLabel()\"\n [selected]=\"anyHiddenSelected()\"\n [ariaLabel]=\"overflowLabel() + ' secciones'\"\n />\n }\n\n <!--\n Panel del desborde. Se estampa en el overlay del CDK (FUERA del host),\n as\u00ED que las variables de acento NO se heredan: se repiten en l\u00EDnea, tal\n como el golden repite `accentVars(accent)` en este mismo nodo.\n -->\n <div\n iusPopoverContent\n class=\"ius-settings-nav__pop\"\n role=\"menu\"\n [style.--_sn-fg]=\"accentFg()\"\n [style.--_sn-tint]=\"accentTint()\"\n >\n @for (it of hiddenItems(); track it.id) {\n <ius-menu-item\n variant=\"menu\"\n itemRole=\"menuitem\"\n [size]=\"size()\"\n [icon]=\"it.icon\"\n [label]=\"it.label\"\n [badge]=\"it.badge\"\n [selected]=\"it.id === selectedId()\"\n [disabled]=\"!!it.disabled\"\n [href]=\"it.href\"\n (clicked)=\"handleFromOverflow(it)\"\n />\n }\n </div>\n </ius-popover>\n }\n\n <!--\n Contenedor de MEDICI\u00D3N (priority+): clona TODAS las filas fuera de vista\n (`position: absolute` + `visibility: hidden`, as\u00ED que no aporta alto ni\n entra en el orden de tabulaci\u00F3n) y de ah\u00ED se leen los `offsetHeight`.\n Cada clon va envuelto en `__mrow` porque el host de `ius-menu-item` es\n `display: contents` y no generar\u00EDa caja que medir.\n -->\n <div class=\"ius-settings-nav__measure\" #meas aria-hidden=\"true\">\n @for (it of items(); track it.id) {\n <div class=\"ius-settings-nav__mrow\">\n <ng-container [ngTemplateOutlet]=\"fila\" [ngTemplateOutletContext]=\"{ it: it }\" />\n </div>\n }\n </div>\n</div>\n\n<!-- Pie: slot libre + bot\u00F3n propio de colapso, sobre una l\u00EDnea separadora. -->\n@if (hasFooter()) {\n <div class=\"ius-settings-nav__sep\"></div>\n <div class=\"ius-settings-nav__footer\">\n <ng-content select=\"[iusSettingsNavFooter]\" />\n\n @if (collapsible()) {\n @if (isCollapsed()) {\n <ius-tooltip [label]=\"toggleLabel()\" placement=\"right\">\n <button\n type=\"button\"\n class=\"ius-settings-nav__cico\"\n [attr.aria-label]=\"toggleLabel()\"\n aria-expanded=\"false\"\n (click)=\"toggleCollapsed()\"\n >\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ toggleIcon() }}</span>\n </button>\n </ius-tooltip>\n } @else {\n <ius-menu-item\n variant=\"rail\"\n [size]=\"size()\"\n [icon]=\"toggleIcon()\"\n [label]=\"toggleLabel()\"\n [ariaLabel]=\"toggleLabel()\"\n (clicked)=\"toggleCollapsed()\"\n />\n }\n }\n </div>\n}\n\n<!--\n UNA sola plantilla de fila, estampada con `NgTemplateOutlet` en la columna\n visible y en el contenedor de medici\u00F3n. El contexto de un `ng-template` no\n est\u00E1 tipado, as\u00ED que `asItem()` le devuelve el tipo y `strictTemplates`\n vuelve a comprobar todo el cuerpo.\n-->\n<ng-template #fila let-raw=\"it\">\n @let it = asItem(raw);\n @let sel = it.id === selectedId();\n\n @if (isCollapsed()) {\n <!-- Colapsado: solo \u00EDcono; el nombre accesible lo dan Tooltip + aria-label. -->\n <ius-tooltip [label]=\"it.label\" placement=\"right\">\n @if (isLink(it)) {\n <a\n class=\"ius-settings-nav__cico\"\n [href]=\"it.href\"\n [attr.data-selected]=\"sel ? 'true' : null\"\n [attr.data-disabled]=\"it.disabled ? 'true' : null\"\n [attr.aria-current]=\"sel ? 'page' : null\"\n [attr.aria-label]=\"it.label\"\n (click)=\"handle(it)\"\n >\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ it.icon }}</span>\n @if (it.badge) {\n <span class=\"ius-settings-nav__cico-badge\" aria-hidden=\"true\"></span>\n }\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"ius-settings-nav__cico\"\n [disabled]=\"!it.href && !!it.disabled\"\n [attr.data-selected]=\"sel ? 'true' : null\"\n [attr.data-disabled]=\"it.disabled ? 'true' : null\"\n [attr.aria-current]=\"sel ? 'page' : null\"\n [attr.aria-label]=\"it.label\"\n (click)=\"handle(it)\"\n >\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ it.icon }}</span>\n @if (it.badge) {\n <span class=\"ius-settings-nav__cico-badge\" aria-hidden=\"true\"></span>\n }\n </button>\n }\n </ius-tooltip>\n } @else {\n <!-- Expandido: la fila ES un MenuItem `rail` (idle/hover/pressed heredados). -->\n <ius-menu-item\n variant=\"rail\"\n [size]=\"size()\"\n [icon]=\"it.icon\"\n [label]=\"it.label\"\n [badge]=\"it.badge\"\n [selected]=\"sel\"\n [disabled]=\"!!it.disabled\"\n [href]=\"it.href\"\n (clicked)=\"handle(it)\"\n />\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{box-sizing:border-box;-webkit-user-select:none;user-select:none;display:flex;flex-direction:column;width:var(--_sn-w, 240px);min-width:var(--_sn-w, 240px);height:100%;background:var(--ius-surface-card);border-right:1px solid var(--ius-stroke);padding:var(--ius-space-sm) var(--ius-space-xs);gap:var(--ius-space-xxs);font-family:var(--ius-font-body)}:host([data-collapsed=true]){width:var(--_sn-wc, 64px);min-width:var(--_sn-wc, 64px)}.ius-settings-nav__header{flex:0 0 auto;padding:var(--ius-space-xs) var(--ius-space-xs) var(--ius-space-sm);min-height:0}.ius-settings-nav__title{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);line-height:1.2;text-transform:uppercase;letter-spacing:.04em;color:var(--ius-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-settings-nav__items{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs);overflow:hidden;position:relative}.ius-settings-nav__measure{position:absolute;top:0;left:0;right:0;visibility:hidden;pointer-events:none;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-settings-nav__mrow{display:flex;flex-direction:column}.ius-settings-nav__footer{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-settings-nav__sep{height:1px;background:var(--ius-stroke);margin:var(--ius-space-xs) var(--ius-space-xs);flex:0 0 auto}:host ::ng-deep .ius-menuitem[data-variant=rail]{--_mi-icon: var(--ius-neutral-8)}:host ::ng-deep .ius-menuitem[data-variant=rail][data-selected=true]{background:var(--_sn-tint);--_mi-icon: var(--_sn-fg)}:host ::ng-deep .ius-menuitem[data-variant=rail][data-selected=true] .ius-menuitem__label{color:var(--_sn-fg)}:host ::ng-deep ius-tooltip{align-items:stretch}:host ::ng-deep ius-tooltip>ius-popover{flex:1 1 auto;min-width:0;align-items:stretch}.ius-settings-nav__cico{appearance:none;border:0;background:transparent;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:var(--_sn-cico-h, var(--ius-hit-target-min));border-radius:var(--ius-radius-md);color:var(--ius-neutral-8);text-decoration:none;transition:background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-settings-nav__cico:hover{background:var(--ius-neutral-2)}.ius-settings-nav__cico:active{background:var(--ius-neutral-3)}.ius-settings-nav__cico:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-settings-nav__cico[data-disabled=true]{opacity:.5;pointer-events:none;cursor:default}.ius-settings-nav__cico[data-selected=true]{background:var(--_sn-tint);color:var(--_sn-fg)}.ius-settings-nav__cico .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-settings-nav__cico-badge{position:absolute;top:7px;right:12px;width:8px;height:8px;border-radius:var(--ius-radius-pill);background:var(--ius-info-500);box-shadow:0 0 0 2px var(--ius-surface-card)}.ius-settings-nav__pop{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:208px;padding:var(--ius-space-xxs)}.ius-settings-nav__pop ::ng-deep .ius-menuitem[data-variant=menu][data-selected=true]{background:var(--_sn-tint);--_mi-icon: var(--_sn-fg)}.ius-settings-nav__pop ::ng-deep .ius-menuitem[data-variant=menu][data-selected=true] .ius-menuitem__label{color:var(--_sn-fg)}\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: "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: TooltipComponent, selector: "ius-tooltip", inputs: ["label", "placement", "trigger", "offset", "showArrow", "disabled", "open", "defaultOpen"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
11410
11436
|
}
|
|
11411
11437
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SettingsNavComponent, decorators: [{
|
|
11412
11438
|
type: Component,
|
|
@@ -11425,7 +11451,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
11425
11451
|
'[style.--_sn-cico-h]': 'cicoH()',
|
|
11426
11452
|
'[style.--_sn-fg]': 'accentFg()',
|
|
11427
11453
|
'[style.--_sn-tint]': 'accentTint()',
|
|
11428
|
-
}, template: "<!--\r\n SettingsNav \u2014 el HOST es el `<nav>` (ver `host:` del .ts), as\u00ED que aqu\u00ED\r\n arranca directamente el contenido: encabezado \u00B7 columna de filas \u00B7 pie.\r\n-->\r\n\r\n<!--\r\n Encabezado. El slot `[iusSettingsNavHeader]` MANDA sobre `title`, y `title`\r\n se oculta al colapsar (ambas condiciones viven en `showTitle()`).\r\n El `ng-content` va en un \u00FAnico `@if` (nunca anidado): con `@if` anidados el\r\n compilador solo iza el atributo `select` un nivel y la proyecci\u00F3n fallar\u00EDa en\r\n silencio.\r\n-->\r\n@if (headerRef() || showTitle()) {\r\n <div class=\"ius-settings-nav__header\">\r\n <ng-content select=\"[iusSettingsNavHeader]\" />\r\n @if (showTitle()) {\r\n <div class=\"ius-settings-nav__title\">{{ title() }}</div>\r\n }\r\n </div>\r\n}\r\n\r\n<!-- Columna de filas: NO scrollea (priority+ recoge lo que no cabe). -->\r\n<div class=\"ius-settings-nav__items\" #wrap>\r\n @for (it of visibleItems(); track it.id) {\r\n <ng-container [ngTemplateOutlet]=\"fila\" [ngTemplateOutletContext]=\"{ it: it }\" />\r\n }\r\n\r\n <!-- Desborde: lo que no cabe en alto se recoge en un Popover a la derecha. -->\r\n @if (hasOverflow()) {\r\n <ius-popover\r\n [open]=\"moreOpen()\"\r\n trigger=\"click\"\r\n placement=\"right-start\"\r\n [showArrow]=\"false\"\r\n [offset]=\"8\"\r\n [dismissable]=\"true\"\r\n (openChange)=\"moreOpen.set($event)\"\r\n >\r\n @if (isCollapsed()) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-settings-nav__cico\"\r\n [attr.data-selected]=\"anyHiddenSelected() ? 'true' : null\"\r\n [attr.aria-label]=\"overflowLabel()\"\r\n aria-haspopup=\"menu\"\r\n [attr.aria-expanded]=\"moreOpen()\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">more_horiz</span>\r\n @if (anyHiddenSelected()) {\r\n <span class=\"ius-settings-nav__cico-badge\" aria-hidden=\"true\"></span>\r\n }\r\n </button>\r\n } @else {\r\n <ius-menu-item\r\n variant=\"rail\"\r\n [size]=\"size()\"\r\n icon=\"more_horiz\"\r\n [label]=\"overflowLabel()\"\r\n [selected]=\"anyHiddenSelected()\"\r\n [ariaLabel]=\"overflowLabel() + ' secciones'\"\r\n />\r\n }\r\n\r\n <!--\r\n Panel del desborde. Se estampa en el overlay del CDK (FUERA del host),\r\n as\u00ED que las variables de acento NO se heredan: se repiten en l\u00EDnea, tal\r\n como el golden repite `accentVars(accent)` en este mismo nodo.\r\n -->\r\n <div\r\n iusPopoverContent\r\n class=\"ius-settings-nav__pop\"\r\n role=\"menu\"\r\n [style.--_sn-fg]=\"accentFg()\"\r\n [style.--_sn-tint]=\"accentTint()\"\r\n >\r\n @for (it of hiddenItems(); track it.id) {\r\n <ius-menu-item\r\n variant=\"menu\"\r\n itemRole=\"menuitem\"\r\n [size]=\"size()\"\r\n [icon]=\"it.icon\"\r\n [label]=\"it.label\"\r\n [badge]=\"it.badge\"\r\n [selected]=\"it.id === selectedId()\"\r\n [disabled]=\"!!it.disabled\"\r\n [href]=\"it.href\"\r\n (clicked)=\"handleFromOverflow(it)\"\r\n />\r\n }\r\n </div>\r\n </ius-popover>\r\n }\r\n\r\n <!--\r\n Contenedor de MEDICI\u00D3N (priority+): clona TODAS las filas fuera de vista\r\n (`position: absolute` + `visibility: hidden`, as\u00ED que no aporta alto ni\r\n entra en el orden de tabulaci\u00F3n) y de ah\u00ED se leen los `offsetHeight`.\r\n Cada clon va envuelto en `__mrow` porque el host de `ius-menu-item` es\r\n `display: contents` y no generar\u00EDa caja que medir.\r\n -->\r\n <div class=\"ius-settings-nav__measure\" #meas aria-hidden=\"true\">\r\n @for (it of items(); track it.id) {\r\n <div class=\"ius-settings-nav__mrow\">\r\n <ng-container [ngTemplateOutlet]=\"fila\" [ngTemplateOutletContext]=\"{ it: it }\" />\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n\r\n<!-- Pie: slot libre + bot\u00F3n propio de colapso, sobre una l\u00EDnea separadora. -->\r\n@if (hasFooter()) {\r\n <div class=\"ius-settings-nav__sep\"></div>\r\n <div class=\"ius-settings-nav__footer\">\r\n <ng-content select=\"[iusSettingsNavFooter]\" />\r\n\r\n @if (collapsible()) {\r\n @if (isCollapsed()) {\r\n <ius-tooltip [label]=\"toggleLabel()\" placement=\"right\">\r\n <button\r\n type=\"button\"\r\n class=\"ius-settings-nav__cico\"\r\n [attr.aria-label]=\"toggleLabel()\"\r\n aria-expanded=\"false\"\r\n (click)=\"toggleCollapsed()\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ toggleIcon() }}</span>\r\n </button>\r\n </ius-tooltip>\r\n } @else {\r\n <ius-menu-item\r\n variant=\"rail\"\r\n [size]=\"size()\"\r\n [icon]=\"toggleIcon()\"\r\n [label]=\"toggleLabel()\"\r\n [ariaLabel]=\"toggleLabel()\"\r\n (clicked)=\"toggleCollapsed()\"\r\n />\r\n }\r\n }\r\n </div>\r\n}\r\n\r\n<!--\r\n UNA sola plantilla de fila, estampada con `NgTemplateOutlet` en la columna\r\n visible y en el contenedor de medici\u00F3n. El contexto de un `ng-template` no\r\n est\u00E1 tipado, as\u00ED que `asItem()` le devuelve el tipo y `strictTemplates`\r\n vuelve a comprobar todo el cuerpo.\r\n-->\r\n<ng-template #fila let-raw=\"it\">\r\n @let it = asItem(raw);\r\n @let sel = it.id === selectedId();\r\n\r\n @if (isCollapsed()) {\r\n <!-- Colapsado: solo \u00EDcono; el nombre accesible lo dan Tooltip + aria-label. -->\r\n <ius-tooltip [label]=\"it.label\" placement=\"right\">\r\n @if (isLink(it)) {\r\n <a\r\n class=\"ius-settings-nav__cico\"\r\n [href]=\"it.href\"\r\n [attr.data-selected]=\"sel ? 'true' : null\"\r\n [attr.data-disabled]=\"it.disabled ? 'true' : null\"\r\n [attr.aria-current]=\"sel ? 'page' : null\"\r\n [attr.aria-label]=\"it.label\"\r\n (click)=\"handle(it)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ it.icon }}</span>\r\n @if (it.badge) {\r\n <span class=\"ius-settings-nav__cico-badge\" aria-hidden=\"true\"></span>\r\n }\r\n </a>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n class=\"ius-settings-nav__cico\"\r\n [disabled]=\"!it.href && !!it.disabled\"\r\n [attr.data-selected]=\"sel ? 'true' : null\"\r\n [attr.data-disabled]=\"it.disabled ? 'true' : null\"\r\n [attr.aria-current]=\"sel ? 'page' : null\"\r\n [attr.aria-label]=\"it.label\"\r\n (click)=\"handle(it)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ it.icon }}</span>\r\n @if (it.badge) {\r\n <span class=\"ius-settings-nav__cico-badge\" aria-hidden=\"true\"></span>\r\n }\r\n </button>\r\n }\r\n </ius-tooltip>\r\n } @else {\r\n <!-- Expandido: la fila ES un MenuItem `rail` (idle/hover/pressed heredados). -->\r\n <ius-menu-item\r\n variant=\"rail\"\r\n [size]=\"size()\"\r\n [icon]=\"it.icon\"\r\n [label]=\"it.label\"\r\n [badge]=\"it.badge\"\r\n [selected]=\"sel\"\r\n [disabled]=\"!!it.disabled\"\r\n [href]=\"it.href\"\r\n (clicked)=\"handle(it)\"\r\n />\r\n }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{box-sizing:border-box;-webkit-user-select:none;user-select:none;display:flex;flex-direction:column;width:var(--_sn-w, 240px);min-width:var(--_sn-w, 240px);height:100%;background:var(--ius-surface-card);border-right:1px solid var(--ius-stroke);padding:var(--ius-space-sm) var(--ius-space-xs);gap:var(--ius-space-xxs);font-family:var(--ius-font-body)}:host([data-collapsed=true]){width:var(--_sn-wc, 64px);min-width:var(--_sn-wc, 64px)}.ius-settings-nav__header{flex:0 0 auto;padding:var(--ius-space-xs) var(--ius-space-xs) var(--ius-space-sm);min-height:0}.ius-settings-nav__title{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);line-height:1.2;text-transform:uppercase;letter-spacing:.04em;color:var(--ius-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-settings-nav__items{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs);overflow:hidden;position:relative}.ius-settings-nav__measure{position:absolute;top:0;left:0;right:0;visibility:hidden;pointer-events:none;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-settings-nav__mrow{display:flex;flex-direction:column}.ius-settings-nav__footer{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-settings-nav__sep{height:1px;background:var(--ius-stroke);margin:var(--ius-space-xs) var(--ius-space-xs);flex:0 0 auto}:host ::ng-deep .ius-menuitem[data-variant=rail]{--_mi-icon: var(--ius-neutral-8)}:host ::ng-deep .ius-menuitem[data-variant=rail][data-selected=true]{background:var(--_sn-tint);--_mi-icon: var(--_sn-fg)}:host ::ng-deep .ius-menuitem[data-variant=rail][data-selected=true] .ius-menuitem__label{color:var(--_sn-fg)}:host ::ng-deep ius-tooltip{align-items:stretch}:host ::ng-deep ius-tooltip>ius-popover{flex:1 1 auto;min-width:0;align-items:stretch}.ius-settings-nav__cico{appearance:none;border:0;background:transparent;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:var(--_sn-cico-h, var(--ius-hit-target-min));border-radius:var(--ius-radius-md);color:var(--ius-neutral-8);text-decoration:none;transition:background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-settings-nav__cico:hover{background:var(--ius-neutral-2)}.ius-settings-nav__cico:active{background:var(--ius-neutral-3)}.ius-settings-nav__cico:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-settings-nav__cico[data-disabled=true]{opacity:.5;pointer-events:none;cursor:default}.ius-settings-nav__cico[data-selected=true]{background:var(--_sn-tint);color:var(--_sn-fg)}.ius-settings-nav__cico .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-settings-nav__cico-badge{position:absolute;top:7px;right:12px;width:8px;height:8px;border-radius:var(--ius-radius-pill);background:var(--ius-info-500);box-shadow:0 0 0 2px var(--ius-surface-card)}.ius-settings-nav__pop{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:208px;padding:var(--ius-space-xxs)}.ius-settings-nav__pop ::ng-deep .ius-menuitem[data-variant=menu][data-selected=true]{background:var(--_sn-tint);--_mi-icon: var(--_sn-fg)}.ius-settings-nav__pop ::ng-deep .ius-menuitem[data-variant=menu][data-selected=true] .ius-menuitem__label{color:var(--_sn-fg)}\n"] }]
|
|
11454
|
+
}, template: "<!--\n SettingsNav \u2014 el HOST es el `<nav>` (ver `host:` del .ts), as\u00ED que aqu\u00ED\n arranca directamente el contenido: encabezado \u00B7 columna de filas \u00B7 pie.\n-->\n\n<!--\n Encabezado. El slot `[iusSettingsNavHeader]` MANDA sobre `title`, y `title`\n se oculta al colapsar (ambas condiciones viven en `showTitle()`).\n El `ng-content` va en un \u00FAnico `@if` (nunca anidado): con `@if` anidados el\n compilador solo iza el atributo `select` un nivel y la proyecci\u00F3n fallar\u00EDa en\n silencio.\n-->\n@if (headerRef() || showTitle()) {\n <div class=\"ius-settings-nav__header\">\n <ng-content select=\"[iusSettingsNavHeader]\" />\n @if (showTitle()) {\n <div class=\"ius-settings-nav__title\">{{ title() }}</div>\n }\n </div>\n}\n\n<!-- Columna de filas: NO scrollea (priority+ recoge lo que no cabe). -->\n<div class=\"ius-settings-nav__items\" #wrap>\n @for (it of visibleItems(); track it.id) {\n <ng-container [ngTemplateOutlet]=\"fila\" [ngTemplateOutletContext]=\"{ it: it }\" />\n }\n\n <!-- Desborde: lo que no cabe en alto se recoge en un Popover a la derecha. -->\n @if (hasOverflow()) {\n <ius-popover\n [open]=\"moreOpen()\"\n trigger=\"click\"\n placement=\"right-start\"\n [showArrow]=\"false\"\n [offset]=\"8\"\n [dismissable]=\"true\"\n (openChange)=\"moreOpen.set($event)\"\n >\n @if (isCollapsed()) {\n <button\n type=\"button\"\n class=\"ius-settings-nav__cico\"\n [attr.data-selected]=\"anyHiddenSelected() ? 'true' : null\"\n [attr.aria-label]=\"overflowLabel()\"\n aria-haspopup=\"menu\"\n [attr.aria-expanded]=\"moreOpen()\"\n >\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">more_horiz</span>\n @if (anyHiddenSelected()) {\n <span class=\"ius-settings-nav__cico-badge\" aria-hidden=\"true\"></span>\n }\n </button>\n } @else {\n <ius-menu-item\n variant=\"rail\"\n [size]=\"size()\"\n icon=\"more_horiz\"\n [label]=\"overflowLabel()\"\n [selected]=\"anyHiddenSelected()\"\n [ariaLabel]=\"overflowLabel() + ' secciones'\"\n />\n }\n\n <!--\n Panel del desborde. Se estampa en el overlay del CDK (FUERA del host),\n as\u00ED que las variables de acento NO se heredan: se repiten en l\u00EDnea, tal\n como el golden repite `accentVars(accent)` en este mismo nodo.\n -->\n <div\n iusPopoverContent\n class=\"ius-settings-nav__pop\"\n role=\"menu\"\n [style.--_sn-fg]=\"accentFg()\"\n [style.--_sn-tint]=\"accentTint()\"\n >\n @for (it of hiddenItems(); track it.id) {\n <ius-menu-item\n variant=\"menu\"\n itemRole=\"menuitem\"\n [size]=\"size()\"\n [icon]=\"it.icon\"\n [label]=\"it.label\"\n [badge]=\"it.badge\"\n [selected]=\"it.id === selectedId()\"\n [disabled]=\"!!it.disabled\"\n [href]=\"it.href\"\n (clicked)=\"handleFromOverflow(it)\"\n />\n }\n </div>\n </ius-popover>\n }\n\n <!--\n Contenedor de MEDICI\u00D3N (priority+): clona TODAS las filas fuera de vista\n (`position: absolute` + `visibility: hidden`, as\u00ED que no aporta alto ni\n entra en el orden de tabulaci\u00F3n) y de ah\u00ED se leen los `offsetHeight`.\n Cada clon va envuelto en `__mrow` porque el host de `ius-menu-item` es\n `display: contents` y no generar\u00EDa caja que medir.\n -->\n <div class=\"ius-settings-nav__measure\" #meas aria-hidden=\"true\">\n @for (it of items(); track it.id) {\n <div class=\"ius-settings-nav__mrow\">\n <ng-container [ngTemplateOutlet]=\"fila\" [ngTemplateOutletContext]=\"{ it: it }\" />\n </div>\n }\n </div>\n</div>\n\n<!-- Pie: slot libre + bot\u00F3n propio de colapso, sobre una l\u00EDnea separadora. -->\n@if (hasFooter()) {\n <div class=\"ius-settings-nav__sep\"></div>\n <div class=\"ius-settings-nav__footer\">\n <ng-content select=\"[iusSettingsNavFooter]\" />\n\n @if (collapsible()) {\n @if (isCollapsed()) {\n <ius-tooltip [label]=\"toggleLabel()\" placement=\"right\">\n <button\n type=\"button\"\n class=\"ius-settings-nav__cico\"\n [attr.aria-label]=\"toggleLabel()\"\n aria-expanded=\"false\"\n (click)=\"toggleCollapsed()\"\n >\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ toggleIcon() }}</span>\n </button>\n </ius-tooltip>\n } @else {\n <ius-menu-item\n variant=\"rail\"\n [size]=\"size()\"\n [icon]=\"toggleIcon()\"\n [label]=\"toggleLabel()\"\n [ariaLabel]=\"toggleLabel()\"\n (clicked)=\"toggleCollapsed()\"\n />\n }\n }\n </div>\n}\n\n<!--\n UNA sola plantilla de fila, estampada con `NgTemplateOutlet` en la columna\n visible y en el contenedor de medici\u00F3n. El contexto de un `ng-template` no\n est\u00E1 tipado, as\u00ED que `asItem()` le devuelve el tipo y `strictTemplates`\n vuelve a comprobar todo el cuerpo.\n-->\n<ng-template #fila let-raw=\"it\">\n @let it = asItem(raw);\n @let sel = it.id === selectedId();\n\n @if (isCollapsed()) {\n <!-- Colapsado: solo \u00EDcono; el nombre accesible lo dan Tooltip + aria-label. -->\n <ius-tooltip [label]=\"it.label\" placement=\"right\">\n @if (isLink(it)) {\n <a\n class=\"ius-settings-nav__cico\"\n [href]=\"it.href\"\n [attr.data-selected]=\"sel ? 'true' : null\"\n [attr.data-disabled]=\"it.disabled ? 'true' : null\"\n [attr.aria-current]=\"sel ? 'page' : null\"\n [attr.aria-label]=\"it.label\"\n (click)=\"handle(it)\"\n >\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ it.icon }}</span>\n @if (it.badge) {\n <span class=\"ius-settings-nav__cico-badge\" aria-hidden=\"true\"></span>\n }\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"ius-settings-nav__cico\"\n [disabled]=\"!it.href && !!it.disabled\"\n [attr.data-selected]=\"sel ? 'true' : null\"\n [attr.data-disabled]=\"it.disabled ? 'true' : null\"\n [attr.aria-current]=\"sel ? 'page' : null\"\n [attr.aria-label]=\"it.label\"\n (click)=\"handle(it)\"\n >\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ it.icon }}</span>\n @if (it.badge) {\n <span class=\"ius-settings-nav__cico-badge\" aria-hidden=\"true\"></span>\n }\n </button>\n }\n </ius-tooltip>\n } @else {\n <!-- Expandido: la fila ES un MenuItem `rail` (idle/hover/pressed heredados). -->\n <ius-menu-item\n variant=\"rail\"\n [size]=\"size()\"\n [icon]=\"it.icon\"\n [label]=\"it.label\"\n [badge]=\"it.badge\"\n [selected]=\"sel\"\n [disabled]=\"!!it.disabled\"\n [href]=\"it.href\"\n (clicked)=\"handle(it)\"\n />\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{box-sizing:border-box;-webkit-user-select:none;user-select:none;display:flex;flex-direction:column;width:var(--_sn-w, 240px);min-width:var(--_sn-w, 240px);height:100%;background:var(--ius-surface-card);border-right:1px solid var(--ius-stroke);padding:var(--ius-space-sm) var(--ius-space-xs);gap:var(--ius-space-xxs);font-family:var(--ius-font-body)}:host([data-collapsed=true]){width:var(--_sn-wc, 64px);min-width:var(--_sn-wc, 64px)}.ius-settings-nav__header{flex:0 0 auto;padding:var(--ius-space-xs) var(--ius-space-xs) var(--ius-space-sm);min-height:0}.ius-settings-nav__title{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);line-height:1.2;text-transform:uppercase;letter-spacing:.04em;color:var(--ius-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-settings-nav__items{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs);overflow:hidden;position:relative}.ius-settings-nav__measure{position:absolute;top:0;left:0;right:0;visibility:hidden;pointer-events:none;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-settings-nav__mrow{display:flex;flex-direction:column}.ius-settings-nav__footer{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-settings-nav__sep{height:1px;background:var(--ius-stroke);margin:var(--ius-space-xs) var(--ius-space-xs);flex:0 0 auto}:host ::ng-deep .ius-menuitem[data-variant=rail]{--_mi-icon: var(--ius-neutral-8)}:host ::ng-deep .ius-menuitem[data-variant=rail][data-selected=true]{background:var(--_sn-tint);--_mi-icon: var(--_sn-fg)}:host ::ng-deep .ius-menuitem[data-variant=rail][data-selected=true] .ius-menuitem__label{color:var(--_sn-fg)}:host ::ng-deep ius-tooltip{align-items:stretch}:host ::ng-deep ius-tooltip>ius-popover{flex:1 1 auto;min-width:0;align-items:stretch}.ius-settings-nav__cico{appearance:none;border:0;background:transparent;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:var(--_sn-cico-h, var(--ius-hit-target-min));border-radius:var(--ius-radius-md);color:var(--ius-neutral-8);text-decoration:none;transition:background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-settings-nav__cico:hover{background:var(--ius-neutral-2)}.ius-settings-nav__cico:active{background:var(--ius-neutral-3)}.ius-settings-nav__cico:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-settings-nav__cico[data-disabled=true]{opacity:.5;pointer-events:none;cursor:default}.ius-settings-nav__cico[data-selected=true]{background:var(--_sn-tint);color:var(--_sn-fg)}.ius-settings-nav__cico .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-settings-nav__cico-badge{position:absolute;top:7px;right:12px;width:8px;height:8px;border-radius:var(--ius-radius-pill);background:var(--ius-info-500);box-shadow:0 0 0 2px var(--ius-surface-card)}.ius-settings-nav__pop{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:208px;padding:var(--ius-space-xxs)}.ius-settings-nav__pop ::ng-deep .ius-menuitem[data-variant=menu][data-selected=true]{background:var(--_sn-tint);--_mi-icon: var(--_sn-fg)}.ius-settings-nav__pop ::ng-deep .ius-menuitem[data-variant=menu][data-selected=true] .ius-menuitem__label{color:var(--_sn-fg)}\n"] }]
|
|
11429
11455
|
}], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], selectedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedId", required: false }] }], accent: [{ type: i0.Input, args: [{ isSignal: true, alias: "accent", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], defaultCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultCollapsed", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], overflowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflowLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], selectedIdChange: [{ type: i0.Output, args: ["selectedIdChange"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], collapsedChange: [{ type: i0.Output, args: ["collapsedChange"] }], headerRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusSettingsNavHeaderDirective), { isSignal: true }] }], footerRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusSettingsNavFooterDirective), { isSignal: true }] }], wrapRef: [{ type: i0.ViewChild, args: ['wrap', { isSignal: true }] }], measRef: [{ type: i0.ViewChild, args: ['meas', { isSignal: true }] }] } });
|
|
11430
11456
|
|
|
11431
11457
|
/** Ícono por defecto según el tono (mapa `DEFAULT_ICON` del golden). */
|
|
@@ -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) {\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 <!-- El contador compone Insignia `count-soft` (T3): neutro en reposo y accent\r\n suave al activarse; ya no es un badge propio de Tabs. -->\r\n @if (item.count != null) {\r\n <ius-insignia\r\n class=\"ius-tabs__count\"\r\n variant=\"count-soft\"\r\n [count]=\"item.count\"\r\n [size]=\"size() === 'small' ? 'small' : 'medium'\"\r\n [tone]=\"item.id === active() ? accent() : 'neutral'\"\r\n />\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)}.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) {\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 <!-- El contador compone Insignia `count-soft` (T3): neutro en reposo y accent\r\n suave al activarse; ya no es un badge propio de Tabs. -->\r\n @if (item.count != null) {\r\n <ius-insignia\r\n class=\"ius-tabs__count\"\r\n variant=\"count-soft\"\r\n [count]=\"item.count\"\r\n [size]=\"size() === 'small' ? 'small' : 'medium'\"\r\n [tone]=\"item.id === active() ? accent() : 'neutral'\"\r\n />\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)}.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() {
|
|
@@ -12086,6 +12099,189 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
12086
12099
|
}, template: "@for (item of items(); track idOf(item, $index); let i = $index) {\r\n <div\r\n class=\"ius-acc__item\"\r\n [attr.data-open]=\"isOpen(item, i) ? 'true' : null\"\r\n [attr.data-disabled]=\"item.disabled ? 'true' : null\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"ius-acc__header\"\r\n [id]=\"headerId(i)\"\r\n [attr.aria-expanded]=\"isOpen(item, i)\"\r\n [attr.aria-controls]=\"panelId(i)\"\r\n [disabled]=\"!!item.disabled\"\r\n (click)=\"toggle(item, i)\"\r\n >\r\n @if (item.icon) {\r\n <span class=\"ius-acc__lead\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ item.icon }}</span>\r\n </span>\r\n }\r\n\r\n <span class=\"ius-acc__title\">{{ item.title }}</span>\r\n\r\n <span class=\"ius-acc__chev\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ chevronIcon() }}</span>\r\n </span>\r\n </button>\r\n\r\n <!-- El panel se queda SIEMPRE en el DOM: la altura la anima\r\n `grid-template-rows` de 0fr a 1fr. Cerrado va `inert` para que su\r\n contenido no quede en el orden de tabulaci\u00F3n (ver nota en el .ts). -->\r\n <div\r\n class=\"ius-acc__panel\"\r\n role=\"region\"\r\n [id]=\"panelId(i)\"\r\n [attr.aria-labelledby]=\"headerId(i)\"\r\n [attr.inert]=\"isOpen(item, i) ? null : ''\"\r\n >\r\n <div class=\"ius-acc__panel-inner\">\r\n <div class=\"ius-acc__content\">\r\n @if (item.content) {\r\n <ng-container [ngTemplateOutlet]=\"item.content\" />\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;font-family:var(--ius-font-body);width:100%}.ius-acc__item{display:flex;flex-direction:column}:host([data-variant=divided]) .ius-acc__item{border-top:1px solid var(--ius-stroke)}:host([data-variant=divided]) .ius-acc__item:first-child{border-top:0}:host([data-variant=contained]){gap:var(--ius-space-xs)}:host([data-variant=contained]) .ius-acc__item{border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);background:var(--ius-surface-card);overflow:hidden}.ius-acc__header{appearance:none;border:0;background:transparent;width:100%;display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-md) var(--ius-space-xxs);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);text-align:left;cursor:pointer;transition:color var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-variant=contained]) .ius-acc__header{padding:var(--ius-space-md) var(--ius-space-md)}.ius-acc__header:hover{color:var(--ius-primary-500)}.ius-acc__header:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);border-radius:var(--ius-radius-sm)}.ius-acc__lead{display:inline-flex;align-items:center;color:var(--ius-text-tertiary);flex:0 0 auto}.ius-acc__lead .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-acc__header:hover .ius-acc__lead{color:var(--ius-primary-500)}.ius-acc__title{flex:1 1 auto;min-width:0}.ius-acc__chev{display:inline-flex;align-items:center;color:var(--ius-text-tertiary);flex:0 0 auto;transition:transform var(--ius-duration-base) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-acc__chev .ius-icon{font-size:var(--ius-icon-lg);line-height:1}.ius-acc__item[data-open=true] .ius-acc__chev{transform:rotate(180deg)}.ius-acc__header:hover .ius-acc__chev{color:var(--ius-primary-500)}.ius-acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--ius-duration-base) var(--ius-ease-standard)}.ius-acc__item[data-open=true] .ius-acc__panel{grid-template-rows:1fr}@media(prefers-reduced-motion:reduce){.ius-acc__panel{transition:none}}.ius-acc__panel-inner{overflow:hidden}.ius-acc__content{padding:var(--ius-space-xxs) var(--ius-space-xxs) var(--ius-space-md)}:host([data-variant=contained]) .ius-acc__content{padding:0 var(--ius-space-md) var(--ius-space-md)}.ius-acc__item[data-disabled=true] .ius-acc__header{color:var(--ius-text-disabled);cursor:not-allowed}.ius-acc__item[data-disabled=true] .ius-acc__lead,.ius-acc__item[data-disabled=true] .ius-acc__chev,.ius-acc__item[data-disabled=true] .ius-acc__header:hover,.ius-acc__item[data-disabled=true] .ius-acc__header:hover .ius-acc__lead,.ius-acc__item[data-disabled=true] .ius-acc__header:hover .ius-acc__chev{color:var(--ius-text-disabled)}\n"] }]
|
|
12087
12100
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], chevronIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "chevronIcon", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }] } });
|
|
12088
12101
|
|
|
12102
|
+
/** Nombre rico proyectado (alternativa al input `name`). */
|
|
12103
|
+
class IusAccountItemNameDirective {
|
|
12104
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: IusAccountItemNameDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
12105
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: IusAccountItemNameDirective, isStandalone: true, selector: "[iusAccountItemName]", ngImport: i0 }); }
|
|
12106
|
+
}
|
|
12107
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: IusAccountItemNameDirective, decorators: [{
|
|
12108
|
+
type: Directive,
|
|
12109
|
+
args: [{ selector: '[iusAccountItemName]', standalone: true }]
|
|
12110
|
+
}] });
|
|
12111
|
+
/** Subtítulo rico proyectado (alternativa al input `subtitle`). */
|
|
12112
|
+
class IusAccountItemSubtitleDirective {
|
|
12113
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: IusAccountItemSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
12114
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: IusAccountItemSubtitleDirective, isStandalone: true, selector: "[iusAccountItemSubtitle]", ngImport: i0 }); }
|
|
12115
|
+
}
|
|
12116
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: IusAccountItemSubtitleDirective, decorators: [{
|
|
12117
|
+
type: Directive,
|
|
12118
|
+
args: [{ selector: '[iusAccountItemSubtitle]', standalone: true }]
|
|
12119
|
+
}] });
|
|
12120
|
+
/** Nodo libre al borde derecho (Tag, contador, chip de estado). */
|
|
12121
|
+
class IusAccountItemTrailingDirective {
|
|
12122
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: IusAccountItemTrailingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
12123
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: IusAccountItemTrailingDirective, isStandalone: true, selector: "[iusAccountItemTrailing]", ngImport: i0 }); }
|
|
12124
|
+
}
|
|
12125
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: IusAccountItemTrailingDirective, decorators: [{
|
|
12126
|
+
type: Directive,
|
|
12127
|
+
args: [{ selector: '[iusAccountItemTrailing]', standalone: true }]
|
|
12128
|
+
}] });
|
|
12129
|
+
/**
|
|
12130
|
+
* AccountItem — Ius Design v2 (familia data-display).
|
|
12131
|
+
*
|
|
12132
|
+
* Fila-tarjeta de una **cuenta a la que el usuario puede cambiar**: la unidad de
|
|
12133
|
+
* la vista «Cambiar de cuenta» del UserMenu. Avatar de la cuenta + nombre (+
|
|
12134
|
+
* subtítulo opcional: tipo, rol o dominio), seleccionable, con la cuenta activa
|
|
12135
|
+
* marcada con un check. Fuente de verdad: `AccountItem.jsx` +
|
|
12136
|
+
* `AccountItem.d.ts` + `AccountItem.ng-spec.md`.
|
|
12137
|
+
*
|
|
12138
|
+
* La superficie la pone **`ius-card`** (`outlined · radius lg · padding none`),
|
|
12139
|
+
* como manda la ng-spec: no se reescribe a mano. AccountItem solo aporta el
|
|
12140
|
+
* layout de la fila y sus **estados tintados info** (hover / pressed /
|
|
12141
|
+
* selected), que pisan la elevación por defecto de Card.
|
|
12142
|
+
*
|
|
12143
|
+
* `actions` compone `ius-dropdown` (trigger IconButton `more_vert` proyectado)
|
|
12144
|
+
* en un slot de **ancho fijo** (`--_ai-actions-w`), para que todas las listas de
|
|
12145
|
+
* cuentas del ecosistema queden alineadas. `[iusAccountItemTrailing]` acepta un
|
|
12146
|
+
* nodo libre en el mismo borde y convive con `actions`. Con `disabled` las
|
|
12147
|
+
* acciones quedan **visibles pero inertes** (la fila pierde `pointer-events`),
|
|
12148
|
+
* regla única del sistema.
|
|
12149
|
+
*
|
|
12150
|
+
* **Nota de port — el `split` del golden.** El golden alterna su DOM según el
|
|
12151
|
+
* contenido: sin `actions`/`trailing` la raíz **es** el `<button>` de `onClick`;
|
|
12152
|
+
* con ellos la raíz pasa a `div` y el área primaria se vuelve un botón interno
|
|
12153
|
+
* (anidar un IconButton dentro de un `<button>` es HTML inválido y rompe el
|
|
12154
|
+
* teclado). Aquí se adopta **siempre** la segunda forma — la raíz es
|
|
12155
|
+
* `<ius-card>` (div) y el área primaria es un `<button>` interno:
|
|
12156
|
+
*
|
|
12157
|
+
* - En Angular alternar la etiqueta raíz exige un `@if`/`@else`, y el contenido
|
|
12158
|
+
* proyectado (`[iusAccountItemName]`, `[iusAccountItemSubtitle]`) solo se
|
|
12159
|
+
* instancia en UNA rama: al cambiar `actions`/`trailing` en caliente —lo que
|
|
12160
|
+
* hace el playground— la proyección se perdería.
|
|
12161
|
+
* - El resultado accesible es el mismo que el del golden: un único botón real
|
|
12162
|
+
* que cubre la fila, con su `aria-label` y su `aria-pressed`, y el ⋮ como
|
|
12163
|
+
* control hermano alcanzable por teclado aparte. Nunca hay control anidado
|
|
12164
|
+
* en control, ni en el caso simple.
|
|
12165
|
+
* - Visualmente es idéntico: los estados se pintan sobre TODA la fila desde la
|
|
12166
|
+
* raíz (`data-actionable` + `:has(.ius-acctitem__main:active/:focus-visible)`),
|
|
12167
|
+
* que es exactamente lo que hace la rama `split` del golden.
|
|
12168
|
+
*
|
|
12169
|
+
* Para fila de acción/navegación → MenuItem; control de cuenta del HeaderBar →
|
|
12170
|
+
* NavUser. Primera carga → envolver en Skeleton (AccountItem no lleva
|
|
12171
|
+
* `loading` propio).
|
|
12172
|
+
*/
|
|
12173
|
+
class AccountItemComponent {
|
|
12174
|
+
constructor() {
|
|
12175
|
+
/** Familia de color del medallón; `auto` es estable por nombre. */
|
|
12176
|
+
this.color = 'auto';
|
|
12177
|
+
/** Forma del medallón. */
|
|
12178
|
+
this.shape = 'circle';
|
|
12179
|
+
/** Cuenta activa: fondo resaltado + check. */
|
|
12180
|
+
this.selected = false;
|
|
12181
|
+
/** Deshabilitada: la fila entera queda inerte (las acciones, visibles). */
|
|
12182
|
+
this.disabled = false;
|
|
12183
|
+
/** Acciones secundarias en el menú ⋮ del borde derecho. */
|
|
12184
|
+
this.actions = [];
|
|
12185
|
+
/** aria del menú de acciones. */
|
|
12186
|
+
this.actionsLabel = 'Más acciones';
|
|
12187
|
+
/** Fila pulsada (original `onClick`). */
|
|
12188
|
+
this.clicked = new EventEmitter();
|
|
12189
|
+
this.nameRef = contentChild(IusAccountItemNameDirective, /* @ts-ignore */
|
|
12190
|
+
...(ngDevMode ? [{ debugName: "nameRef" }] : /* istanbul ignore next */ []));
|
|
12191
|
+
this.subtitleRef = contentChild(IusAccountItemSubtitleDirective, /* @ts-ignore */
|
|
12192
|
+
...(ngDevMode ? [{ debugName: "subtitleRef" }] : /* istanbul ignore next */ []));
|
|
12193
|
+
this.trailingRef = contentChild(IusAccountItemTrailingDirective, /* @ts-ignore */
|
|
12194
|
+
...(ngDevMode ? [{ debugName: "trailingRef" }] : /* istanbul ignore next */ []));
|
|
12195
|
+
}
|
|
12196
|
+
/** Fila viva: hay quien escuche el clic y no está deshabilitada. */
|
|
12197
|
+
get actionable() {
|
|
12198
|
+
return this.clicked.observed && !this.disabled;
|
|
12199
|
+
}
|
|
12200
|
+
get hasSubtitle() {
|
|
12201
|
+
return this.subtitle != null || !!this.subtitleRef();
|
|
12202
|
+
}
|
|
12203
|
+
get hasTrailing() {
|
|
12204
|
+
return !!this.trailingRef();
|
|
12205
|
+
}
|
|
12206
|
+
get showMenu() {
|
|
12207
|
+
return this.actions.length > 0;
|
|
12208
|
+
}
|
|
12209
|
+
/** El monograma explícito gana: entonces el nombre no alimenta las iniciales. */
|
|
12210
|
+
get avatarName() {
|
|
12211
|
+
return this.monogram ? undefined : this.name;
|
|
12212
|
+
}
|
|
12213
|
+
/** Sin foto/monograma/nombre, el medallón cae al ícono genérico de cuenta. */
|
|
12214
|
+
get effIcon() {
|
|
12215
|
+
return this.avatar || this.monogram || this.name
|
|
12216
|
+
? this.icon
|
|
12217
|
+
: this.icon || 'account_circle';
|
|
12218
|
+
}
|
|
12219
|
+
/** `Cuenta <nombre>` como nombre accesible por defecto (verbatim del golden). */
|
|
12220
|
+
get label() {
|
|
12221
|
+
return this.ariaLabel || (this.name ? `Cuenta ${this.name}` : 'Cuenta');
|
|
12222
|
+
}
|
|
12223
|
+
/** El golden solo declara `aria-pressed` cuando la cuenta está activa. */
|
|
12224
|
+
get ariaPressed() {
|
|
12225
|
+
return this.selected ? 'true' : null;
|
|
12226
|
+
}
|
|
12227
|
+
/** aria del IconButton ⋮ — nombra la cuenta cuando la hay. */
|
|
12228
|
+
get menuLabel() {
|
|
12229
|
+
return this.actionsLabel + (this.name ? ` de ${this.name}` : '');
|
|
12230
|
+
}
|
|
12231
|
+
onMainClick(event) {
|
|
12232
|
+
if (this.disabled)
|
|
12233
|
+
return;
|
|
12234
|
+
this.clicked.emit(event);
|
|
12235
|
+
}
|
|
12236
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AccountItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12237
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AccountItemComponent, isStandalone: true, selector: "ius-account-item", inputs: { name: "name", subtitle: "subtitle", avatar: "avatar", icon: "icon", monogram: "monogram", color: "color", shape: "shape", selected: ["selected", "selected", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], actions: "actions", actionsLabel: "actionsLabel", state: "state", ariaLabel: "ariaLabel" }, outputs: { clicked: "clicked" }, host: { properties: { "attr.data-state": "state || null", "attr.data-disabled": "disabled ? 'true' : null", "attr.data-actionable": "actionable ? 'true' : null" }, classAttribute: "ius-acctitem" }, queries: [{ propertyName: "nameRef", first: true, predicate: IusAccountItemNameDirective, descendants: true, isSignal: true }, { propertyName: "subtitleRef", first: true, predicate: IusAccountItemSubtitleDirective, descendants: true, isSignal: true }, { propertyName: "trailingRef", first: true, predicate: IusAccountItemTrailingDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- La superficie la pone ius-card (outlined \u00B7 radius lg \u00B7 padding none), como\n manda la ng-spec: no se reescribe a mano. Con `padding=\"none\"` el padding de\n la fila lo pone .ius-acctitem__row, que es \u00ABel propio cuerpo\u00BB del que habla\n Card (el golden lo escribe sobre .ius-card__body, encapsulado aqu\u00ED).\n\n La ra\u00EDz NO es navegable: el \u00E1rea primaria es el <button> interno\n .ius-acctitem__main, como en la rama `split` del golden \u2014 as\u00ED el \u22EE nunca\n queda anidado dentro de otro control. Ver la nota de port del .ts. -->\n<ius-card\n class=\"ius-acctitem__card\"\n variant=\"outlined\"\n radius=\"lg\"\n padding=\"none\"\n [selected]=\"selected\"\n>\n <div class=\"ius-acctitem__row\">\n <button\n type=\"button\"\n class=\"ius-acctitem__main\"\n [attr.aria-label]=\"label\"\n [attr.aria-pressed]=\"ariaPressed\"\n [disabled]=\"disabled\"\n (click)=\"onMainClick($event)\"\n >\n <ius-avatar\n size=\"small\"\n [shape]=\"shape\"\n [src]=\"avatar\"\n [name]=\"avatarName\"\n [monogram]=\"monogram\"\n [icon]=\"effIcon\"\n [color]=\"color\"\n [ariaLabel]=\"name\"\n />\n\n <span class=\"ius-acctitem__body\">\n <span class=\"ius-acctitem__name\">{{ name }}<ng-content select=\"[iusAccountItemName]\" /></span>\n @if (hasSubtitle) {\n <span class=\"ius-acctitem__sub\">{{ subtitle }}<ng-content select=\"[iusAccountItemSubtitle]\" /></span>\n }\n </span>\n\n @if (selected) {\n <span class=\"ius-acctitem__check\"><span translate=\"no\" class=\"ius-icon\">check_circle</span></span>\n }\n </button>\n\n @if (hasTrailing) {\n <span class=\"ius-acctitem__trailing\"><ng-content select=\"[iusAccountItemTrailing]\" /></span>\n }\n\n @if (showMenu) {\n <!-- Slot de ancho fijo (--_ai-actions-w): alinea todas las listas de\n cuentas del ecosistema. Compone ius-dropdown; su clic no dispara la\n fila (el \u00E1rea primaria es un bot\u00F3n hermano, no un ancestro). -->\n <span class=\"ius-acctitem__actions\">\n <ius-dropdown [items]=\"actions\" placement=\"bottom-end\" [ariaLabel]=\"actionsLabel\">\n <ius-icon-button\n iusDropdownTrigger\n icon=\"more_vert\"\n variant=\"tertiary\"\n size=\"small\"\n [ariaLabel]=\"menuLabel\"\n [disabled]=\"disabled\"\n />\n </ius-dropdown>\n </span>\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;--_ai-actions-w: 36px}.ius-acctitem__row{display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-sm)}.ius-acctitem__main{appearance:none;background:none;border:0;margin:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer;flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:var(--ius-space-xs)}.ius-acctitem__main:focus-visible{outline:none}:host(:has(.ius-acctitem__main:focus-visible)) .ius-acctitem__card{box-shadow:var(--ius-focus-ring)}:host([data-actionable=true]:hover) .ius-acctitem__card,:host([data-state=hover]) .ius-acctitem__card{box-shadow:none;transform:none;border-color:var(--ius-info-300)}:host([data-actionable=true]:has(.ius-acctitem__main:active)) .ius-acctitem__card,:host([data-state=pressed]) .ius-acctitem__card{box-shadow:none;transform:none;background:var(--ius-info-100);border-color:var(--ius-info-300)}.ius-acctitem__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-acctitem__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}.ius-acctitem__name{font-size:var(--ius-fs-base);line-height:1.3;font-weight:var(--ius-fw-medium, 500);color:var(--ius-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-acctitem__sub{font-size:var(--ius-fs-sm);line-height:1.3;color:var(--ius-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-acctitem__check{flex:0 0 auto;display:inline-flex;color:var(--ius-primary-900)}.ius-acctitem__check .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-acctitem__trailing{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xxs)}.ius-acctitem__actions{flex:0 0 auto;width:var(--_ai-actions-w);display:inline-flex;align-items:center;justify-content:center}\n"], dependencies: [{ 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 }); }
|
|
12238
|
+
}
|
|
12239
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AccountItemComponent, decorators: [{
|
|
12240
|
+
type: Component,
|
|
12241
|
+
args: [{ selector: 'ius-account-item', standalone: true, imports: [
|
|
12242
|
+
AvatarComponent,
|
|
12243
|
+
CardComponent,
|
|
12244
|
+
DropdownComponent,
|
|
12245
|
+
IusDropdownTriggerDirective,
|
|
12246
|
+
IconButtonComponent,
|
|
12247
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
12248
|
+
class: 'ius-acctitem',
|
|
12249
|
+
'[attr.data-state]': 'state || null',
|
|
12250
|
+
'[attr.data-disabled]': "disabled ? 'true' : null",
|
|
12251
|
+
'[attr.data-actionable]': "actionable ? 'true' : null",
|
|
12252
|
+
}, template: "<!-- La superficie la pone ius-card (outlined \u00B7 radius lg \u00B7 padding none), como\n manda la ng-spec: no se reescribe a mano. Con `padding=\"none\"` el padding de\n la fila lo pone .ius-acctitem__row, que es \u00ABel propio cuerpo\u00BB del que habla\n Card (el golden lo escribe sobre .ius-card__body, encapsulado aqu\u00ED).\n\n La ra\u00EDz NO es navegable: el \u00E1rea primaria es el <button> interno\n .ius-acctitem__main, como en la rama `split` del golden \u2014 as\u00ED el \u22EE nunca\n queda anidado dentro de otro control. Ver la nota de port del .ts. -->\n<ius-card\n class=\"ius-acctitem__card\"\n variant=\"outlined\"\n radius=\"lg\"\n padding=\"none\"\n [selected]=\"selected\"\n>\n <div class=\"ius-acctitem__row\">\n <button\n type=\"button\"\n class=\"ius-acctitem__main\"\n [attr.aria-label]=\"label\"\n [attr.aria-pressed]=\"ariaPressed\"\n [disabled]=\"disabled\"\n (click)=\"onMainClick($event)\"\n >\n <ius-avatar\n size=\"small\"\n [shape]=\"shape\"\n [src]=\"avatar\"\n [name]=\"avatarName\"\n [monogram]=\"monogram\"\n [icon]=\"effIcon\"\n [color]=\"color\"\n [ariaLabel]=\"name\"\n />\n\n <span class=\"ius-acctitem__body\">\n <span class=\"ius-acctitem__name\">{{ name }}<ng-content select=\"[iusAccountItemName]\" /></span>\n @if (hasSubtitle) {\n <span class=\"ius-acctitem__sub\">{{ subtitle }}<ng-content select=\"[iusAccountItemSubtitle]\" /></span>\n }\n </span>\n\n @if (selected) {\n <span class=\"ius-acctitem__check\"><span translate=\"no\" class=\"ius-icon\">check_circle</span></span>\n }\n </button>\n\n @if (hasTrailing) {\n <span class=\"ius-acctitem__trailing\"><ng-content select=\"[iusAccountItemTrailing]\" /></span>\n }\n\n @if (showMenu) {\n <!-- Slot de ancho fijo (--_ai-actions-w): alinea todas las listas de\n cuentas del ecosistema. Compone ius-dropdown; su clic no dispara la\n fila (el \u00E1rea primaria es un bot\u00F3n hermano, no un ancestro). -->\n <span class=\"ius-acctitem__actions\">\n <ius-dropdown [items]=\"actions\" placement=\"bottom-end\" [ariaLabel]=\"actionsLabel\">\n <ius-icon-button\n iusDropdownTrigger\n icon=\"more_vert\"\n variant=\"tertiary\"\n size=\"small\"\n [ariaLabel]=\"menuLabel\"\n [disabled]=\"disabled\"\n />\n </ius-dropdown>\n </span>\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;--_ai-actions-w: 36px}.ius-acctitem__row{display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-sm)}.ius-acctitem__main{appearance:none;background:none;border:0;margin:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer;flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:var(--ius-space-xs)}.ius-acctitem__main:focus-visible{outline:none}:host(:has(.ius-acctitem__main:focus-visible)) .ius-acctitem__card{box-shadow:var(--ius-focus-ring)}:host([data-actionable=true]:hover) .ius-acctitem__card,:host([data-state=hover]) .ius-acctitem__card{box-shadow:none;transform:none;border-color:var(--ius-info-300)}:host([data-actionable=true]:has(.ius-acctitem__main:active)) .ius-acctitem__card,:host([data-state=pressed]) .ius-acctitem__card{box-shadow:none;transform:none;background:var(--ius-info-100);border-color:var(--ius-info-300)}.ius-acctitem__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-acctitem__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}.ius-acctitem__name{font-size:var(--ius-fs-base);line-height:1.3;font-weight:var(--ius-fw-medium, 500);color:var(--ius-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-acctitem__sub{font-size:var(--ius-fs-sm);line-height:1.3;color:var(--ius-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-acctitem__check{flex:0 0 auto;display:inline-flex;color:var(--ius-primary-900)}.ius-acctitem__check .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-acctitem__trailing{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xxs)}.ius-acctitem__actions{flex:0 0 auto;width:var(--_ai-actions-w);display:inline-flex;align-items:center;justify-content:center}\n"] }]
|
|
12253
|
+
}], propDecorators: { name: [{
|
|
12254
|
+
type: Input
|
|
12255
|
+
}], subtitle: [{
|
|
12256
|
+
type: Input
|
|
12257
|
+
}], avatar: [{
|
|
12258
|
+
type: Input
|
|
12259
|
+
}], icon: [{
|
|
12260
|
+
type: Input
|
|
12261
|
+
}], monogram: [{
|
|
12262
|
+
type: Input
|
|
12263
|
+
}], color: [{
|
|
12264
|
+
type: Input
|
|
12265
|
+
}], shape: [{
|
|
12266
|
+
type: Input
|
|
12267
|
+
}], selected: [{
|
|
12268
|
+
type: Input,
|
|
12269
|
+
args: [{ transform: booleanAttribute }]
|
|
12270
|
+
}], disabled: [{
|
|
12271
|
+
type: Input,
|
|
12272
|
+
args: [{ transform: booleanAttribute }]
|
|
12273
|
+
}], actions: [{
|
|
12274
|
+
type: Input
|
|
12275
|
+
}], actionsLabel: [{
|
|
12276
|
+
type: Input
|
|
12277
|
+
}], state: [{
|
|
12278
|
+
type: Input
|
|
12279
|
+
}], ariaLabel: [{
|
|
12280
|
+
type: Input
|
|
12281
|
+
}], clicked: [{
|
|
12282
|
+
type: Output
|
|
12283
|
+
}], nameRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusAccountItemNameDirective), { isSignal: true }] }], subtitleRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusAccountItemSubtitleDirective), { isSignal: true }] }], trailingRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusAccountItemTrailingDirective), { isSignal: true }] }] } });
|
|
12284
|
+
|
|
12089
12285
|
/*
|
|
12090
12286
|
* Public API de @litigiovirtual/ius-design-components v2.
|
|
12091
12287
|
* La librería se está reconstruyendo componente a componente desde las
|
|
@@ -12097,5 +12293,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
12097
12293
|
* Generated bundle index. Do not edit.
|
|
12098
12294
|
*/
|
|
12099
12295
|
|
|
12100
|
-
export { AccordionComponent, AlertComponent, AppLayoutComponent, AvatarComponent, ButtonComponent, CaptchaFieldComponent, CardComponent, CarouselComponent, CheckboxComponent, ChipComponent, CircularProgressComponent, CodeFieldComponent, CountdownComponent, CountdownRingComponent, DescriptionListComponent, DividerComponent, DrawerComponent, DropdownComponent, EleniaBubbleComponent, EleniaOrbComponent, EmptyStateComponent, FlexComponent, HeaderBarComponent, ILLUSTRATIONS, ILLUSTRATION_ALIAS, ILLUSTRATION_NAMES, IUS_FILTER_OPERATORS, IUS_TOAST_DEFAULT_DURATION, IUS_TOAST_DEFAULT_ICON, IconButtonComponent, IllustrationComponent, InsigniaComponent, IusAlertActionsDirective, IusAlertTrailingDirective, IusCardFooterDirective, IusCardHeaderDirective, IusDrawerFooterDirective, IusDrawerHeaderActionsDirective, IusDrawerTitleDirective, IusDropdownTriggerDirective, IusListCardLeadingDirective, IusListCardOverlineDirective, IusListCardParagraphDirective, IusListCardSubtitleDirective, IusListCardTitleDirective, IusListViewFiltersDirective, IusListViewFooterEndDirective, IusListViewFooterStartDirective, IusListViewHeaderEndDirective, IusListViewHeaderStartDirective, IusListViewToolbarDirective, IusMenuItemTrailingDirective, IusModalFooterDirective, IusPersonItemNameDirective, IusPersonItemTrailingDirective, IusSettingsNavFooterDirective, IusSettingsNavHeaderDirective, IusTagPrefixDirective, IusTagSuffixDirective, IusToastActionDirective, ListCardComponent, ListViewComponent, LoadingComponent, LoadingMarkComponent, MenuComponent, MenuItemComponent, ModalComponent, MultiTextFieldComponent, NavUserComponent, ORB_PERIODS, OauthButtonComponent, OptionItemComponent, PersonItemComponent, PersonPickerComponent, PopoverComponent, QueryBuilderComponent, STATUS_TONES, STATUS_VOCAB, STATUS_VOCABS, STATUS_VOCABS_PENDING, ScrollAreaComponent, SearchBarComponent, SegmentGroupComponent, SegmentedControlComponent, SelectComponent, SettingsNavComponent, ShowMoreComponent, SplitterComponent, StatusChipComponent, StatusStateComponent, TabsComponent, TagComponent, TextAreaComponent, TextButtonComponent, TextComponent, TextFieldComponent, ToastComponent, ToastService, ToastViewportComponent, TooltipComponent, WizardComponent, WizardController, WizardNavComponent, createWizard, pose, poseIso, poseSpeaking, poseThinking, renderCubeSvg, resolveIllustration, resolveStatus, statusOptions, statusOrder, statusToneVars, statusVocab, voiceEnv };
|
|
12296
|
+
export { AccordionComponent, AccountItemComponent, AlertComponent, AppLayoutComponent, AvatarComponent, ButtonComponent, CaptchaFieldComponent, CardComponent, CarouselComponent, CheckboxComponent, ChipComponent, CircularProgressComponent, CodeFieldComponent, CountdownComponent, CountdownRingComponent, DescriptionListComponent, DividerComponent, DrawerComponent, DropdownComponent, EleniaBubbleComponent, EleniaOrbComponent, EmptyStateComponent, FlexComponent, HeaderBarComponent, ILLUSTRATIONS, ILLUSTRATION_ALIAS, ILLUSTRATION_NAMES, IUS_FILTER_OPERATORS, IUS_TOAST_DEFAULT_DURATION, IUS_TOAST_DEFAULT_ICON, IconButtonComponent, IllustrationComponent, InsigniaComponent, IusAccountItemNameDirective, IusAccountItemSubtitleDirective, IusAccountItemTrailingDirective, IusAlertActionsDirective, IusAlertTrailingDirective, IusCardFooterDirective, IusCardHeaderDirective, IusDrawerFooterDirective, IusDrawerHeaderActionsDirective, IusDrawerTitleDirective, IusDropdownTriggerDirective, IusListCardLeadingDirective, IusListCardOverlineDirective, IusListCardParagraphDirective, IusListCardSubtitleDirective, IusListCardTitleDirective, IusListViewFiltersDirective, IusListViewFooterEndDirective, IusListViewFooterStartDirective, IusListViewHeaderEndDirective, IusListViewHeaderStartDirective, IusListViewToolbarDirective, IusMenuItemTrailingDirective, IusModalFooterDirective, IusPersonItemNameDirective, IusPersonItemTrailingDirective, IusSettingsNavFooterDirective, IusSettingsNavHeaderDirective, IusTagPrefixDirective, IusTagSuffixDirective, IusToastActionDirective, ListCardComponent, ListViewComponent, LoadingComponent, LoadingMarkComponent, MenuComponent, MenuItemComponent, ModalComponent, MultiTextFieldComponent, NavUserComponent, ORB_PERIODS, OauthButtonComponent, OptionItemComponent, PersonItemComponent, PersonPickerComponent, PopoverComponent, QueryBuilderComponent, STATUS_TONES, STATUS_VOCAB, STATUS_VOCABS, STATUS_VOCABS_PENDING, ScrollAreaComponent, SearchBarComponent, SegmentGroupComponent, SegmentedControlComponent, SelectComponent, SettingsNavComponent, ShowMoreComponent, SplitterComponent, StatusChipComponent, StatusStateComponent, TabsComponent, TagComponent, TextAreaComponent, TextButtonComponent, TextComponent, TextFieldComponent, ToastComponent, ToastService, ToastViewportComponent, TooltipComponent, WizardComponent, WizardController, WizardNavComponent, createWizard, pose, poseIso, poseSpeaking, poseThinking, renderCubeSvg, resolveIllustration, resolveStatus, statusOptions, statusOrder, statusToneVars, statusVocab, voiceEnv };
|
|
12101
12297
|
//# sourceMappingURL=litigiovirtual-ius-design-components.mjs.map
|