@litigiovirtual/ius-design-components 2.1.8 → 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 +240 -57
- package/fesm2022/litigiovirtual-ius-design-components.mjs.map +1 -1
- package/package.json +1 -1
- package/types/litigiovirtual-ius-design-components.d.ts +133 -2
|
@@ -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: [{
|
|
@@ -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: [{
|
|
@@ -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);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 }); }
|
|
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);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"] }]
|
|
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
|
/*
|
|
@@ -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: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 }); }
|
|
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: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"] }]
|
|
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 }]
|
|
@@ -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);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 }); }
|
|
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);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"] }]
|
|
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.key ?? item.label ?? $index) {\n <dt class=\"ius-dl__gterm\">\n <ng-container [ngTemplateOutlet]=\"labelTpl\" [ngTemplateOutletContext]=\"{ item: item }\" />\n </dt>\n <dd\n class=\"ius-dl__gval\"\n [class.ius-dl__num]=\"isTab(item) && !item.icon\"\n [style.grid-column]=\"gridColSpan(item)\"\n >\n <ng-container [ngTemplateOutlet]=\"valueContent\" [ngTemplateOutletContext]=\"{ item: item }\" />\n </dd>\n }\n } @else {\n @for (item of items(); track item.key ?? item.label ?? $index) {\n <div class=\"ius-dl__row\">\n <dt class=\"ius-dl__term\">\n <ng-container [ngTemplateOutlet]=\"labelTpl\" [ngTemplateOutletContext]=\"{ item: item }\" />\n </dt>\n <dd class=\"ius-dl__value\" [class.ius-dl__num]=\"isTab(item) && !item.icon\">\n <ng-container [ngTemplateOutlet]=\"valueContent\" [ngTemplateOutletContext]=\"{ item: item }\" />\n </dd>\n </div>\n }\n }\n</dl>\n", styles: ["@charset \"UTF-8\";:host{display:block}.ius-dl{--_dl-value-fs: var(--ius-fs-base);--_dl-value-lh: var(--ius-lh-base);--_dl-term: max-content;--_dl-cell-py: var(--ius-space-sm);--_dl-cell-px: var(--ius-space-md);margin:0;box-sizing:border-box;min-width:0;font-family:var(--ius-font-body);color:var(--ius-text-primary)}.ius-dl[data-size=small]{--_dl-value-fs: var(--ius-fs-sm);--_dl-value-lh: var(--ius-lh-sm);--_dl-cell-py: var(--ius-space-xs);--_dl-cell-px: var(--ius-space-sm)}@container style(--ius-density: small){.ius-dl:not([data-size]){--_dl-value-fs: var(--ius-fs-sm);--_dl-value-lh: var(--ius-lh-sm);--_dl-cell-py: var(--ius-space-xs);--_dl-cell-px: var(--ius-space-sm)}}.ius-dl[data-layout=stacked]{display:flex;flex-direction:column;gap:var(--ius-space-md)}.ius-dl[data-size=small][data-layout=stacked]{gap:var(--ius-space-sm)}@container style(--ius-density: small){.ius-dl:not([data-size])[data-layout=stacked]{gap:var(--ius-space-sm)}}.ius-dl[data-layout=stacked] .ius-dl__row{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:0}.ius-dl[data-layout=inline]{display:grid;grid-template-columns:var(--_dl-term) 1fr;column-gap:var(--ius-space-md);row-gap:var(--ius-space-xs)}.ius-dl[data-layout=inline] .ius-dl__row{display:grid;grid-template-columns:subgrid;grid-column:1/-1;align-items:baseline;min-width:0}.ius-dl[data-divider=true][data-layout=inline] .ius-dl__row:not(:last-child){padding-bottom:var(--ius-space-xs);border-bottom:1px solid var(--ius-stroke)}.ius-dl[data-divider=true][data-layout=stacked] .ius-dl__row:not(:last-child){padding-bottom:var(--ius-space-md);border-bottom:1px solid var(--ius-stroke)}.ius-dl[data-layout=grid]{display:grid;gap:1px;background:var(--ius-stroke);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);overflow:hidden}.ius-dl[data-layout=grid] .ius-dl__gterm,.ius-dl[data-layout=grid] .ius-dl__gval{margin:0;min-width:0;display:flex;align-items:center;gap:var(--ius-space-xxs);padding:var(--_dl-cell-py) var(--_dl-cell-px)}.ius-dl[data-layout=grid] .ius-dl__gterm{background:var(--ius-surface-sunken);color:var(--ius-text-tertiary);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);white-space:nowrap}.ius-dl[data-layout=grid] .ius-dl__gval{background:var(--ius-surface-card);color:var(--ius-text-primary);font-size:var(--_dl-value-fs);line-height:var(--_dl-value-lh)}.ius-dl__term{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);margin:0;min-width:0;font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-tertiary)}.ius-dl__valwrap{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);min-width:0}.ius-dl__vicon{font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary);flex:0 0 auto}.ius-dl__value{margin:0;min-width:0;font-size:var(--_dl-value-fs);line-height:var(--_dl-value-lh);color:var(--ius-text-primary)}.ius-dl[data-value-align=end][data-layout=inline] .ius-dl__value{text-align:right;justify-self:end}.ius-dl__num{font-variant-numeric:tabular-nums}.ius-dl__link{color:var(--ius-primary-900);text-decoration:none;font:inherit;cursor:pointer;border-radius:var(--ius-radius-sm);transition:color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-dl__link:hover{color:var(--ius-primary-500);text-decoration:underline}.ius-dl__link:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}button.ius-dl__link{appearance:none;margin:0;padding:0;background:none;border:0;text-align:inherit}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
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.key ?? item.label ?? $index) {\n <dt class=\"ius-dl__gterm\">\n <ng-container [ngTemplateOutlet]=\"labelTpl\" [ngTemplateOutletContext]=\"{ item: item }\" />\n </dt>\n <dd\n class=\"ius-dl__gval\"\n [class.ius-dl__num]=\"isTab(item) && !item.icon\"\n [style.grid-column]=\"gridColSpan(item)\"\n >\n <ng-container [ngTemplateOutlet]=\"valueContent\" [ngTemplateOutletContext]=\"{ item: item }\" />\n </dd>\n }\n } @else {\n @for (item of items(); track item.key ?? item.label ?? $index) {\n <div class=\"ius-dl__row\">\n <dt class=\"ius-dl__term\">\n <ng-container [ngTemplateOutlet]=\"labelTpl\" [ngTemplateOutletContext]=\"{ item: item }\" />\n </dt>\n <dd class=\"ius-dl__value\" [class.ius-dl__num]=\"isTab(item) && !item.icon\">\n <ng-container [ngTemplateOutlet]=\"valueContent\" [ngTemplateOutletContext]=\"{ item: item }\" />\n </dd>\n </div>\n }\n }\n</dl>\n", styles: ["@charset \"UTF-8\";:host{display:block}.ius-dl{--_dl-value-fs: var(--ius-fs-base);--_dl-value-lh: var(--ius-lh-base);--_dl-term: max-content;--_dl-cell-py: var(--ius-space-sm);--_dl-cell-px: var(--ius-space-md);margin:0;box-sizing:border-box;min-width:0;font-family:var(--ius-font-body);color:var(--ius-text-primary)}.ius-dl[data-size=small]{--_dl-value-fs: var(--ius-fs-sm);--_dl-value-lh: var(--ius-lh-sm);--_dl-cell-py: var(--ius-space-xs);--_dl-cell-px: var(--ius-space-sm)}@container style(--ius-density: small){.ius-dl:not([data-size]){--_dl-value-fs: var(--ius-fs-sm);--_dl-value-lh: var(--ius-lh-sm);--_dl-cell-py: var(--ius-space-xs);--_dl-cell-px: var(--ius-space-sm)}}.ius-dl[data-layout=stacked]{display:flex;flex-direction:column;gap:var(--ius-space-md)}.ius-dl[data-size=small][data-layout=stacked]{gap:var(--ius-space-sm)}@container style(--ius-density: small){.ius-dl:not([data-size])[data-layout=stacked]{gap:var(--ius-space-sm)}}.ius-dl[data-layout=stacked] .ius-dl__row{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:0}.ius-dl[data-layout=inline]{display:grid;grid-template-columns:var(--_dl-term) 1fr;column-gap:var(--ius-space-md);row-gap:var(--ius-space-xs)}.ius-dl[data-layout=inline] .ius-dl__row{display:grid;grid-template-columns:subgrid;grid-column:1/-1;align-items:baseline;min-width:0}.ius-dl[data-divider=true][data-layout=inline] .ius-dl__row:not(:last-child){padding-bottom:var(--ius-space-xs);border-bottom:1px solid var(--ius-stroke)}.ius-dl[data-divider=true][data-layout=stacked] .ius-dl__row:not(:last-child){padding-bottom:var(--ius-space-md);border-bottom:1px solid var(--ius-stroke)}.ius-dl[data-layout=grid]{display:grid;gap:1px;background:var(--ius-stroke);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);overflow:hidden}.ius-dl[data-layout=grid] .ius-dl__gterm,.ius-dl[data-layout=grid] .ius-dl__gval{margin:0;min-width:0;display:flex;align-items:center;gap:var(--ius-space-xxs);padding:var(--_dl-cell-py) var(--_dl-cell-px)}.ius-dl[data-layout=grid] .ius-dl__gterm{background:var(--ius-surface-sunken);color:var(--ius-text-tertiary);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);white-space:nowrap}.ius-dl[data-layout=grid] .ius-dl__gval{background:var(--ius-surface-card);color:var(--ius-text-primary);font-size:var(--_dl-value-fs);line-height:var(--_dl-value-lh)}.ius-dl__term{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);margin:0;min-width:0;font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-tertiary)}.ius-dl__valwrap{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);min-width:0}.ius-dl__vicon{font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary);flex:0 0 auto}.ius-dl__value{margin:0;min-width:0;font-size:var(--_dl-value-fs);line-height:var(--_dl-value-lh);color:var(--ius-text-primary)}.ius-dl[data-value-align=end][data-layout=inline] .ius-dl__value{text-align:right;justify-self:end}.ius-dl__num{font-variant-numeric:tabular-nums}.ius-dl__link{color:var(--ius-primary-900);text-decoration:none;font:inherit;cursor:pointer;border-radius:var(--ius-radius-sm);transition:color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-dl__link:hover{color:var(--ius-primary-500);text-decoration:underline}.ius-dl__link:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}button.ius-dl__link{appearance:none;margin:0;padding:0;background:none;border:0;text-align:inherit}\n"] }]
|
|
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 */
|
|
@@ -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 El tabindex negativo solo aplica en ESE caso: el foco vive en el host y la X\n se alcanza con \u00E9l. Cuando el Tag no es interactivo la X es el \u00FAnico control,\n as\u00ED que conserva su tabulaci\u00F3n natural y es alcanzable por teclado (T11). -->\n@if (closable()) {\n @if (isInteractive()) {\n <span\n role=\"button\"\n class=\"ius-tag__x\"\n [attr.aria-label]=\"closeLabel()\"\n tabindex=\"-1\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onClose($event)\"\n >\n <span translate=\"no\" class=\"ius-icon\">close</span>\n </span>\n } @else {\n <button\n type=\"button\"\n class=\"ius-tag__x\"\n [attr.aria-label]=\"closeLabel()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onClose($event)\"\n >\n <span translate=\"no\" class=\"ius-icon\">close</span>\n </button>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{-webkit-user-select:none;user-select:none;--_tag-py: 4px;--_tag-px: 10px;--_tag-fs: var(--ius-fs-sm);--_tag-lh: var(--ius-lh-sm);--_tag-gap: var(--ius-space-xs);--_tag-icon: var(--ius-icon-sm);--_tag-x: 16px;--_tag-dot: 7px;--_c-soft: var(--ius-neutral-2);--_c-soft-h: var(--ius-neutral-3);--_c-soft-p: var(--ius-neutral-4);--_c-fg: var(--ius-neutral-9);--_c-accent: var(--ius-neutral-7);--_c-solid: var(--ius-neutral-9);--_c-solid-h: var(--ius-neutral-10);--_c-solid-p: var(--ius-neutral-black);display:inline-flex;align-items:center;gap:var(--_tag-gap);box-sizing:border-box;max-width:100%;padding:var(--_tag-py) var(--_tag-px);border-radius:var(--ius-radius-pill);border:1px solid transparent;background:var(--_c-soft);color:var(--_c-fg);font-family:var(--ius-font-body);font-size:var(--_tag-fs);line-height:var(--_tag-lh);font-weight:var(--ius-fw-medium);vertical-align:middle;white-space:nowrap;transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-size=small]){--_tag-py: 2px;--_tag-px: 8px;--_tag-fs: var(--ius-fs-sm);--_tag-lh: var(--ius-lh-sm);--_tag-gap: var(--ius-space-xxs);--_tag-icon: var(--ius-icon-sm);--_tag-x: 14px;--_tag-dot: 6px}:host([data-size=large]){--_tag-py: 6px;--_tag-px: 12px;--_tag-fs: var(--ius-fs-base);--_tag-lh: var(--ius-lh-base);--_tag-gap: var(--ius-space-xs);--_tag-icon: var(--ius-icon-sm);--_tag-x: 18px;--_tag-dot: 8px}:host([data-shape=rounded]){border-radius:var(--ius-radius-md)}:host([data-tone=primary]){--_c-soft: var(--ius-primary-100);--_c-soft-h: var(--ius-primary-200);--_c-soft-p: var(--ius-primary-300);--_c-fg: var(--ius-primary-700);--_c-accent: var(--ius-primary-500);--_c-solid: var(--ius-primary-900);--_c-solid-h: var(--ius-primary-800);--_c-solid-p: var(--ius-primary-700)}:host([data-tone=info]){--_c-soft: var(--ius-info-100);--_c-soft-h: var(--ius-info-200);--_c-soft-p: var(--ius-info-300);--_c-fg: var(--ius-info-700);--_c-accent: var(--ius-info-500);--_c-solid: var(--ius-info-600);--_c-solid-h: var(--ius-info-700);--_c-solid-p: var(--ius-info-800)}:host([data-tone=success]){--_c-soft: var(--ius-success-100);--_c-soft-h: var(--ius-success-200);--_c-soft-p: var(--ius-success-300);--_c-fg: var(--ius-success-800);--_c-accent: var(--ius-success-600);--_c-solid: var(--ius-success-600);--_c-solid-h: var(--ius-success-700);--_c-solid-p: var(--ius-success-800)}:host([data-tone=warning]){--_c-soft: var(--ius-warning-100);--_c-soft-h: var(--ius-warning-200);--_c-soft-p: var(--ius-warning-300);--_c-fg: var(--ius-warning-800);--_c-accent: var(--ius-warning-600);--_c-solid: var(--ius-warning-600);--_c-solid-h: var(--ius-warning-700);--_c-solid-p: var(--ius-warning-800)}:host([data-tone=danger]){--_c-soft: var(--ius-danger-100);--_c-soft-h: var(--ius-danger-200);--_c-soft-p: var(--ius-danger-300);--_c-fg: var(--ius-danger-700);--_c-accent: var(--ius-danger-500);--_c-solid: var(--ius-danger-600);--_c-solid-h: var(--ius-danger-700);--_c-solid-p: var(--ius-danger-800)}:host([data-tone=neutral]){--_c-soft: var(--ius-neutral-2);--_c-soft-h: var(--ius-neutral-3);--_c-soft-p: var(--ius-neutral-4);--_c-fg: var(--ius-neutral-9);--_c-accent: var(--ius-neutral-7);--_c-solid: var(--ius-neutral-9);--_c-solid-h: var(--ius-neutral-10);--_c-solid-p: var(--ius-neutral-black)}:host([data-tone=durazno]){--_c-soft: var(--ius-durazno-100);--_c-soft-h: var(--ius-durazno-200);--_c-soft-p: var(--ius-durazno-300);--_c-fg: var(--ius-durazno-700);--_c-accent: var(--ius-durazno-500);--_c-solid: var(--ius-durazno-600);--_c-solid-h: var(--ius-durazno-700);--_c-solid-p: var(--ius-durazno-800)}:host([data-tone=banano]){--_c-soft: var(--ius-banano-100);--_c-soft-h: var(--ius-banano-200);--_c-soft-p: var(--ius-banano-300);--_c-fg: var(--ius-banano-800);--_c-accent: var(--ius-banano-500);--_c-solid: var(--ius-banano-700);--_c-solid-h: var(--ius-banano-800);--_c-solid-p: var(--ius-banano-900)}:host([data-tone=sandia]){--_c-soft: var(--ius-sandia-100);--_c-soft-h: var(--ius-sandia-200);--_c-soft-p: var(--ius-sandia-300);--_c-fg: var(--ius-sandia-700);--_c-accent: var(--ius-sandia-500);--_c-solid: var(--ius-sandia-600);--_c-solid-h: var(--ius-sandia-700);--_c-solid-p: var(--ius-sandia-800)}:host([data-tone=arandano]){--_c-soft: var(--ius-arandano-100);--_c-soft-h: var(--ius-arandano-200);--_c-soft-p: var(--ius-arandano-300);--_c-fg: var(--ius-arandano-700);--_c-accent: var(--ius-arandano-500);--_c-solid: var(--ius-arandano-600);--_c-solid-h: var(--ius-arandano-700);--_c-solid-p: var(--ius-arandano-800)}:host([data-tone=uva]){--_c-soft: var(--ius-uva-100);--_c-soft-h: var(--ius-uva-200);--_c-soft-p: var(--ius-uva-300);--_c-fg: var(--ius-uva-700);--_c-accent: var(--ius-uva-500);--_c-solid: var(--ius-uva-600);--_c-solid-h: var(--ius-uva-700);--_c-solid-p: var(--ius-uva-800)}:host([data-tone=aguacate]){--_c-soft: var(--ius-aguacate-100);--_c-soft-h: var(--ius-aguacate-200);--_c-soft-p: var(--ius-aguacate-300);--_c-fg: var(--ius-aguacate-700);--_c-accent: var(--ius-aguacate-500);--_c-solid: var(--ius-aguacate-600);--_c-solid-h: var(--ius-aguacate-700);--_c-solid-p: var(--ius-aguacate-800)}:host([data-variant=outline]){background:var(--ius-neutral-white);color:var(--ius-text-primary);border-color:var(--ius-stroke)}:host([data-variant=solid]){background:var(--_c-solid);color:var(--ius-neutral-white);border-color:transparent}.ius-tag__dot{flex:0 0 auto;width:var(--_tag-dot);height:var(--_tag-dot);border-radius:var(--ius-radius-pill);background:var(--_c-accent)}.ius-tag__icon{display:inline-flex;flex:0 0 auto;color:var(--_c-accent)}.ius-tag__icon .ius-icon{font-size:var(--_tag-icon);line-height:1}:host([data-variant=solid]) .ius-tag__icon{color:currentColor}:host([data-variant=solid]) .ius-tag__dot{background:currentColor}.ius-tag__label{min-width:0;overflow:hidden;text-overflow:ellipsis}.ius-tag__count{flex:0 0 auto;opacity:.6;font-variant-numeric:tabular-nums}.ius-tag__suffix{display:inline-flex;flex:0 0 auto;color:var(--_c-accent)}:host([data-variant=solid]) .ius-tag__suffix{color:currentColor}.ius-tag__suffix .ius-icon{font-size:var(--_tag-icon);line-height:1}.ius-tag__x{appearance:none;border:0;margin:0 -2px 0 0;padding:0;flex:0 0 auto;width:var(--_tag-x);height:var(--_tag-x);border-radius:var(--ius-radius-pill);display:inline-flex;align-items:center;justify-content:center;background:transparent;color:currentColor;opacity:.6;cursor:pointer;transition:opacity var(--ius-duration-fast) var(--ius-ease-standard),background-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-tag__x:hover{opacity:1;background:#00000014}:host([data-variant=solid]) .ius-tag__x:hover{background:#ffffff38}.ius-tag__x .ius-icon{font-size:calc(var(--_tag-x) - 3px);line-height:1}:host([data-interactive=true]){cursor:pointer;appearance:none;font:inherit}:host([data-interactive=true][data-variant=soft]:hover),:host([data-variant=soft][data-state=hover]){background:var(--_c-soft-h)}:host([data-interactive=true][data-variant=outline]:hover),:host([data-variant=outline][data-state=hover]){background:var(--_c-soft);border-color:transparent}:host([data-interactive=true][data-variant=solid]:hover),:host([data-variant=solid][data-state=hover]){background:var(--_c-solid-h)}:host([data-interactive=true][data-variant=soft]:active),:host([data-variant=soft][data-state=pressed]){background:var(--_c-soft-p)}:host([data-interactive=true][data-variant=outline]:active),:host([data-variant=outline][data-state=pressed]){background:var(--_c-soft-h);border-color:transparent}:host([data-interactive=true][data-variant=solid]:active),:host([data-variant=solid][data-state=pressed]){background:var(--_c-solid-p)}:host([data-interactive=true]:focus-visible),:host([data-state=focused]){outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--_c-accent) 35%,transparent)}:host([data-disabled=true]){background:var(--ius-neutral-2);border-color:transparent;color:var(--ius-text-disabled);cursor:default;pointer-events:none}:host([data-disabled=true]) .ius-tag__dot{background:var(--ius-text-disabled)}:host([data-disabled=true]) .ius-tag__icon,:host([data-disabled=true]) .ius-tag__suffix{color:var(--ius-text-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
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 El tabindex negativo solo aplica en ESE caso: el foco vive en el host y la X\n se alcanza con \u00E9l. Cuando el Tag no es interactivo la X es el \u00FAnico control,\n as\u00ED que conserva su tabulaci\u00F3n natural y es alcanzable por teclado (T11). -->\n@if (closable()) {\n @if (isInteractive()) {\n <span\n role=\"button\"\n class=\"ius-tag__x\"\n [attr.aria-label]=\"closeLabel()\"\n tabindex=\"-1\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onClose($event)\"\n >\n <span translate=\"no\" class=\"ius-icon\">close</span>\n </span>\n } @else {\n <button\n type=\"button\"\n class=\"ius-tag__x\"\n [attr.aria-label]=\"closeLabel()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onClose($event)\"\n >\n <span translate=\"no\" class=\"ius-icon\">close</span>\n </button>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{-webkit-user-select:none;user-select:none;--_tag-py: 4px;--_tag-px: 10px;--_tag-fs: var(--ius-fs-sm);--_tag-lh: var(--ius-lh-sm);--_tag-gap: var(--ius-space-xs);--_tag-icon: var(--ius-icon-sm);--_tag-x: 16px;--_tag-dot: 7px;--_c-soft: var(--ius-neutral-2);--_c-soft-h: var(--ius-neutral-3);--_c-soft-p: var(--ius-neutral-4);--_c-fg: var(--ius-neutral-9);--_c-accent: var(--ius-neutral-7);--_c-solid: var(--ius-neutral-9);--_c-solid-h: var(--ius-neutral-10);--_c-solid-p: var(--ius-neutral-black);display:inline-flex;align-items:center;gap:var(--_tag-gap);box-sizing:border-box;max-width:100%;padding:var(--_tag-py) var(--_tag-px);border-radius:var(--ius-radius-pill);border:1px solid transparent;background:var(--_c-soft);color:var(--_c-fg);font-family:var(--ius-font-body);font-size:var(--_tag-fs);line-height:var(--_tag-lh);font-weight:var(--ius-fw-medium);vertical-align:middle;white-space:nowrap;transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-size=small]){--_tag-py: 2px;--_tag-px: 8px;--_tag-fs: var(--ius-fs-sm);--_tag-lh: var(--ius-lh-sm);--_tag-gap: var(--ius-space-xxs);--_tag-icon: var(--ius-icon-sm);--_tag-x: 14px;--_tag-dot: 6px}:host([data-size=large]){--_tag-py: 6px;--_tag-px: 12px;--_tag-fs: var(--ius-fs-base);--_tag-lh: var(--ius-lh-base);--_tag-gap: var(--ius-space-xs);--_tag-icon: var(--ius-icon-sm);--_tag-x: 18px;--_tag-dot: 8px}:host([data-shape=rounded]){border-radius:var(--ius-radius-md)}:host([data-tone=primary]){--_c-soft: var(--ius-primary-100);--_c-soft-h: var(--ius-primary-200);--_c-soft-p: var(--ius-primary-300);--_c-fg: var(--ius-primary-700);--_c-accent: var(--ius-primary-500);--_c-solid: var(--ius-primary-900);--_c-solid-h: var(--ius-primary-800);--_c-solid-p: var(--ius-primary-700)}:host([data-tone=info]){--_c-soft: var(--ius-info-100);--_c-soft-h: var(--ius-info-200);--_c-soft-p: var(--ius-info-300);--_c-fg: var(--ius-info-700);--_c-accent: var(--ius-info-500);--_c-solid: var(--ius-info-600);--_c-solid-h: var(--ius-info-700);--_c-solid-p: var(--ius-info-800)}:host([data-tone=success]){--_c-soft: var(--ius-success-100);--_c-soft-h: var(--ius-success-200);--_c-soft-p: var(--ius-success-300);--_c-fg: var(--ius-success-800);--_c-accent: var(--ius-success-600);--_c-solid: var(--ius-success-600);--_c-solid-h: var(--ius-success-700);--_c-solid-p: var(--ius-success-800)}:host([data-tone=warning]){--_c-soft: var(--ius-warning-100);--_c-soft-h: var(--ius-warning-200);--_c-soft-p: var(--ius-warning-300);--_c-fg: var(--ius-warning-800);--_c-accent: var(--ius-warning-600);--_c-solid: var(--ius-warning-600);--_c-solid-h: var(--ius-warning-700);--_c-solid-p: var(--ius-warning-800)}:host([data-tone=danger]){--_c-soft: var(--ius-danger-100);--_c-soft-h: var(--ius-danger-200);--_c-soft-p: var(--ius-danger-300);--_c-fg: var(--ius-danger-700);--_c-accent: var(--ius-danger-500);--_c-solid: var(--ius-danger-600);--_c-solid-h: var(--ius-danger-700);--_c-solid-p: var(--ius-danger-800)}:host([data-tone=neutral]){--_c-soft: var(--ius-neutral-2);--_c-soft-h: var(--ius-neutral-3);--_c-soft-p: var(--ius-neutral-4);--_c-fg: var(--ius-neutral-9);--_c-accent: var(--ius-neutral-7);--_c-solid: var(--ius-neutral-9);--_c-solid-h: var(--ius-neutral-10);--_c-solid-p: var(--ius-neutral-black)}:host([data-tone=durazno]){--_c-soft: var(--ius-durazno-100);--_c-soft-h: var(--ius-durazno-200);--_c-soft-p: var(--ius-durazno-300);--_c-fg: var(--ius-durazno-700);--_c-accent: var(--ius-durazno-500);--_c-solid: var(--ius-durazno-600);--_c-solid-h: var(--ius-durazno-700);--_c-solid-p: var(--ius-durazno-800)}:host([data-tone=banano]){--_c-soft: var(--ius-banano-100);--_c-soft-h: var(--ius-banano-200);--_c-soft-p: var(--ius-banano-300);--_c-fg: var(--ius-banano-800);--_c-accent: var(--ius-banano-500);--_c-solid: var(--ius-banano-700);--_c-solid-h: var(--ius-banano-800);--_c-solid-p: var(--ius-banano-900)}:host([data-tone=sandia]){--_c-soft: var(--ius-sandia-100);--_c-soft-h: var(--ius-sandia-200);--_c-soft-p: var(--ius-sandia-300);--_c-fg: var(--ius-sandia-700);--_c-accent: var(--ius-sandia-500);--_c-solid: var(--ius-sandia-600);--_c-solid-h: var(--ius-sandia-700);--_c-solid-p: var(--ius-sandia-800)}:host([data-tone=arandano]){--_c-soft: var(--ius-arandano-100);--_c-soft-h: var(--ius-arandano-200);--_c-soft-p: var(--ius-arandano-300);--_c-fg: var(--ius-arandano-700);--_c-accent: var(--ius-arandano-500);--_c-solid: var(--ius-arandano-600);--_c-solid-h: var(--ius-arandano-700);--_c-solid-p: var(--ius-arandano-800)}:host([data-tone=uva]){--_c-soft: var(--ius-uva-100);--_c-soft-h: var(--ius-uva-200);--_c-soft-p: var(--ius-uva-300);--_c-fg: var(--ius-uva-700);--_c-accent: var(--ius-uva-500);--_c-solid: var(--ius-uva-600);--_c-solid-h: var(--ius-uva-700);--_c-solid-p: var(--ius-uva-800)}:host([data-tone=aguacate]){--_c-soft: var(--ius-aguacate-100);--_c-soft-h: var(--ius-aguacate-200);--_c-soft-p: var(--ius-aguacate-300);--_c-fg: var(--ius-aguacate-700);--_c-accent: var(--ius-aguacate-500);--_c-solid: var(--ius-aguacate-600);--_c-solid-h: var(--ius-aguacate-700);--_c-solid-p: var(--ius-aguacate-800)}:host([data-variant=outline]){background:var(--ius-neutral-white);color:var(--ius-text-primary);border-color:var(--ius-stroke)}:host([data-variant=solid]){background:var(--_c-solid);color:var(--ius-neutral-white);border-color:transparent}.ius-tag__dot{flex:0 0 auto;width:var(--_tag-dot);height:var(--_tag-dot);border-radius:var(--ius-radius-pill);background:var(--_c-accent)}.ius-tag__icon{display:inline-flex;flex:0 0 auto;color:var(--_c-accent)}.ius-tag__icon .ius-icon{font-size:var(--_tag-icon);line-height:1}:host([data-variant=solid]) .ius-tag__icon{color:currentColor}:host([data-variant=solid]) .ius-tag__dot{background:currentColor}.ius-tag__label{min-width:0;overflow:hidden;text-overflow:ellipsis}.ius-tag__count{flex:0 0 auto;opacity:.6;font-variant-numeric:tabular-nums}.ius-tag__suffix{display:inline-flex;flex:0 0 auto;color:var(--_c-accent)}:host([data-variant=solid]) .ius-tag__suffix{color:currentColor}.ius-tag__suffix .ius-icon{font-size:var(--_tag-icon);line-height:1}.ius-tag__x{appearance:none;border:0;margin:0 -2px 0 0;padding:0;flex:0 0 auto;width:var(--_tag-x);height:var(--_tag-x);border-radius:var(--ius-radius-pill);display:inline-flex;align-items:center;justify-content:center;background:transparent;color:currentColor;opacity:.6;cursor:pointer;transition:opacity var(--ius-duration-fast) var(--ius-ease-standard),background-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-tag__x:hover{opacity:1;background:#00000014}:host([data-variant=solid]) .ius-tag__x:hover{background:#ffffff38}.ius-tag__x .ius-icon{font-size:calc(var(--_tag-x) - 3px);line-height:1}:host([data-interactive=true]){cursor:pointer;appearance:none;font:inherit}:host([data-interactive=true][data-variant=soft]:hover),:host([data-variant=soft][data-state=hover]){background:var(--_c-soft-h)}:host([data-interactive=true][data-variant=outline]:hover),:host([data-variant=outline][data-state=hover]){background:var(--_c-soft);border-color:transparent}:host([data-interactive=true][data-variant=solid]:hover),:host([data-variant=solid][data-state=hover]){background:var(--_c-solid-h)}:host([data-interactive=true][data-variant=soft]:active),:host([data-variant=soft][data-state=pressed]){background:var(--_c-soft-p)}:host([data-interactive=true][data-variant=outline]:active),:host([data-variant=outline][data-state=pressed]){background:var(--_c-soft-h);border-color:transparent}:host([data-interactive=true][data-variant=solid]:active),:host([data-variant=solid][data-state=pressed]){background:var(--_c-solid-p)}:host([data-interactive=true]:focus-visible),:host([data-state=focused]){outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--_c-accent) 35%,transparent)}:host([data-disabled=true]){background:var(--ius-neutral-2);border-color:transparent;color:var(--ius-text-disabled);cursor:default;pointer-events:none}:host([data-disabled=true]) .ius-tag__dot{background:var(--ius-text-disabled)}:host([data-disabled=true]) .ius-tag__icon,:host([data-disabled=true]) .ius-tag__suffix{color:var(--ius-text-disabled)}\n"] }]
|
|
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
|
/**
|
|
@@ -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: [{
|
|
@@ -7596,7 +7596,7 @@ class PersonItemComponent {
|
|
|
7596
7596
|
this.removed.emit(event);
|
|
7597
7597
|
}
|
|
7598
7598
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PersonItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7599
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: PersonItemComponent, isStandalone: true, selector: "ius-person-item", inputs: { name: "name", lines: "lines", avatar: "avatar", icon: "icon", monogram: "monogram", color: "color", shape: "shape", variant: "variant", bordered: ["bordered", "bordered", booleanAttribute], size: "size", selected: ["selected", "selected", booleanAttribute], showCheck: ["showCheck", "showCheck", booleanAttribute], mask: ["mask", "mask", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], actions: "actions", actionsLabel: "actionsLabel", removeLabel: "removeLabel", state: "state", ariaLabel: "ariaLabel" }, outputs: { clicked: "clicked", removed: "removed" }, host: { properties: { "attr.data-pi-variant": "variant", "attr.data-size": "size !== 'medium' ? size : null", "attr.data-state": "state || null", "attr.data-disabled": "disabled ? 'true' : null" }, classAttribute: "ius-personitem" }, queries: [{ propertyName: "trailingRef", first: true, predicate: IusPersonItemTrailingDirective, descendants: true, isSignal: true }, { propertyName: "nameRef", first: true, predicate: IusPersonItemNameDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- La superficie la pone ius-card (radius lg \u00B7 padding none), como manda la\n ng-spec. El contorno es opcional (`bordered`, off por defecto): sin \u00E9l la\n card va en `plain`. Con `padding=\"none\"` el padding de la fila lo pone\n .ius-personitem__row, que es \u00ABel propio cuerpo\u00BB del que habla Card. -->\n<ius-card\n class=\"ius-personitem__card\"\n [variant]=\"cardVariant\"\n radius=\"lg\"\n padding=\"none\"\n [interactive]=\"clickable\"\n [selected]=\"cardSelected\"\n [ariaLabel]=\"ariaLabel\"\n [attr.aria-pressed]=\"ariaPressed\"\n (clicked)=\"clicked.emit($event)\"\n>\n <div class=\"ius-personitem__row\">\n <ius-avatar\n [size]=\"avatarSize\"\n [shape]=\"avatarShape\"\n [src]=\"avatar\"\n [name]=\"avatarName\"\n [monogram]=\"monogram\"\n [icon]=\"effIcon\"\n [color]=\"color\"\n [ariaLabel]=\"name\"\n />\n\n <div class=\"ius-personitem__body\">\n @if (hasName) {\n <span class=\"ius-personitem__name\">{{ name }}<ng-content select=\"[iusPersonItemName]\" /></span>\n }\n @for (line of displayLines; track $index) {\n <span class=\"ius-personitem__line\">\n @if (line.tpl) {\n <ng-container *ngTemplateOutlet=\"line.tpl\" />\n } @else {\n {{ line.text }}\n }\n </span>\n }\n </div>\n\n @if (selected && showCheck) {\n <span class=\"ius-personitem__check\"><span translate=\"no\" class=\"ius-icon\">check_circle</span></span>\n }\n\n @if (hasTrailing) {\n <span class=\"ius-personitem__trailing\"><ng-content select=\"[iusPersonItemTrailing]\" /></span>\n }\n\n @if (showMenu) {\n <!-- \u22EE de acciones del chip: compone ius-dropdown. Va ANTES de la X;\n su click no dispara la fila. -->\n <span class=\"ius-personitem__menu\" (click)=\"$event.stopPropagation()\">\n <ius-dropdown [items]=\"actions\" placement=\"bottom-end\" [ariaLabel]=\"actionsLabel\">\n <ius-icon-button\n iusDropdownTrigger\n icon=\"more_vert\"\n variant=\"tertiary\"\n shape=\"squared\"\n [size]=\"menuIbSize\"\n [ariaLabel]=\"actionsLabel\"\n [disabled]=\"disabled\"\n />\n </ius-dropdown>\n </span>\n }\n\n @if (showRemove) {\n <button\n type=\"button\"\n class=\"ius-personitem__x\"\n [attr.aria-label]=\"removeLabel + (name ? ' ' + name : '')\"\n [disabled]=\"disabled\"\n (mousedown)=\"onRemoveMouseDown($event)\"\n (click)=\"onRemoveClick($event)\"\n >\n <span translate=\"no\" class=\"ius-icon\">close</span>\n </button>\n }\n </div>\n</ius-card>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-width:0;box-sizing:border-box;-webkit-user-select:none;user-select:none;text-align:left;--_pi-py: var(--ius-space-sm);--_pi-px: var(--ius-space-sm);--_pi-gap: var(--ius-space-sm);--_pi-name-fs: var(--ius-fs-lg);--_pi-name-lh: var(--ius-lh-lg);--_pi-line-fs: var(--ius-fs-sm);--_pi-line-lh: var(--ius-lh-sm);--_pi-x-size: 24px}:host([data-size=small]){--_pi-py: var(--ius-space-xs);--_pi-px: var(--ius-space-sm);--_pi-gap: var(--ius-space-xs);--_pi-name-fs: var(--ius-fs-base);--_pi-name-lh: var(--ius-lh-base);--_pi-line-fs: var(--ius-fs-sm);--_pi-line-lh: var(--ius-lh-sm);--_pi-x-size: 20px}:host([data-size=large]){--_pi-py: var(--ius-space-md);--_pi-px: var(--ius-space-md);--_pi-gap: var(--ius-space-md);--_pi-name-fs: var(--ius-fs-h5);--_pi-name-lh: var(--ius-lh-h5);--_pi-line-fs: var(--ius-fs-base);--_pi-line-lh: var(--ius-lh-base);--_pi-x-size: 28px}@container style(--ius-density: small){:host(:not([data-size])){--_pi-py: var(--ius-space-xs);--_pi-px: var(--ius-space-sm);--_pi-gap: var(--ius-space-xs);--_pi-name-fs: var(--ius-fs-base);--_pi-name-lh: var(--ius-lh-base);--_pi-line-fs: var(--ius-fs-sm);--_pi-line-lh: var(--ius-lh-sm)}}@container style(--ius-density: large){:host(:not([data-size])){--_pi-py: var(--ius-space-md);--_pi-px: var(--ius-space-md);--_pi-gap: var(--ius-space-md);--_pi-name-fs: var(--ius-fs-h5);--_pi-name-lh: var(--ius-lh-h5);--_pi-line-fs: var(--ius-fs-base);--_pi-line-lh: var(--ius-lh-base)}}.ius-personitem__row{display:flex;align-items:center;gap:var(--_pi-gap);padding:var(--_pi-py) var(--_pi-px)}:host([data-pi-variant=option]) .ius-personitem__card[data-interactive=true]:hover,:host([data-pi-variant=option][data-state=hover]) .ius-personitem__card{box-shadow:none;transform:none;border-color:var(--ius-info-300)}:host([data-pi-variant=option]) .ius-personitem__card[data-interactive=true]:active,:host([data-pi-variant=option][data-state=pressed]) .ius-personitem__card{box-shadow:none;transform:none;background:var(--ius-info-100);border-color:var(--ius-info-300)}:host([data-pi-variant=option]) .ius-personitem__card[data-selected=true]{background:var(--ius-info-100);border-color:var(--ius-info-300);box-shadow:none}:host([data-disabled=true]){cursor:default;opacity:.5;pointer-events:none}.ius-personitem__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}.ius-personitem__name{font-family:var(--ius-font-display);font-size:var(--_pi-name-fs);line-height:var(--_pi-name-lh);font-weight:var(--ius-fw-bold);color:var(--ius-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-personitem__line{font-family:var(--ius-font-body);font-size:var(--_pi-line-fs);line-height:var(--_pi-line-lh);color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-personitem__trailing{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xxs)}.ius-personitem__menu{flex:0 0 auto;display:inline-flex;align-items:center}.ius-personitem__check{flex:0 0 auto;display:inline-flex;color:var(--ius-primary-900)}.ius-personitem__check .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-personitem__x{appearance:none;border:0;margin:0;padding:0;flex:0 0 auto;width:var(--_pi-x-size);height:var(--_pi-x-size);border-radius:var(--ius-radius-pill);background:var(--ius-neutral-9);color:var(--ius-neutral-white);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-personitem__x:hover{background:var(--ius-neutral-black)}.ius-personitem__x:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-personitem__x .ius-icon{font-size:calc(var(--_pi-x-size) - 8px);line-height:1}:host([data-disabled=true]) .ius-personitem__x{background:var(--ius-neutral-5);cursor:default}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AvatarComponent, selector: "ius-avatar", inputs: ["alt", "name", "monogram", "icon", "shape", "size", "color", "editable", "editIcon", "ariaLabel", "src"], outputs: ["edit"] }, { kind: "component", type: CardComponent, selector: "ius-card, a[ius-card], button[ius-card], section[ius-card], article[ius-card]", inputs: ["variant", "padding", "radius", "interactive", "selected", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: DropdownComponent, selector: "ius-dropdown", inputs: ["items", "selectable", "value", "label", "triggerLabel", "triggerIcon", "tone", "variant", "placement", "open", "defaultOpen", "ariaLabel"], outputs: ["valueChange", "openChange"] }, { kind: "directive", type: IusDropdownTriggerDirective, selector: "[iusDropdownTrigger]" }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "tooltipPlacement"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
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 }); }
|
|
7600
7600
|
}
|
|
7601
7601
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PersonItemComponent, decorators: [{
|
|
7602
7602
|
type: Component,
|
|
@@ -7613,7 +7613,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
7613
7613
|
'[attr.data-size]': "size !== 'medium' ? size : null",
|
|
7614
7614
|
'[attr.data-state]': 'state || null',
|
|
7615
7615
|
'[attr.data-disabled]': "disabled ? 'true' : null",
|
|
7616
|
-
}, template: "<!-- La superficie la pone ius-card (radius lg \u00B7 padding none), como manda la\n ng-spec. El contorno es opcional (`bordered`, off por defecto): sin \u00E9l la\n card va en `plain`. Con `padding=\"none\"` el padding de la fila lo pone\n .ius-personitem__row, que es \u00ABel propio cuerpo\u00BB del que habla Card. -->\n<ius-card\n class=\"ius-personitem__card\"\n [variant]=\"cardVariant\"\n radius=\"lg\"\n padding=\"none\"\n [interactive]=\"clickable\"\n [selected]=\"cardSelected\"\n [ariaLabel]=\"ariaLabel\"\n [attr.aria-pressed]=\"ariaPressed\"\n (clicked)=\"clicked.emit($event)\"\n>\n <div class=\"ius-personitem__row\">\n <ius-avatar\n [size]=\"avatarSize\"\n [shape]=\"avatarShape\"\n [src]=\"avatar\"\n [name]=\"avatarName\"\n [monogram]=\"monogram\"\n [icon]=\"effIcon\"\n [color]=\"color\"\n [ariaLabel]=\"name\"\n />\n\n <div class=\"ius-personitem__body\">\n @if (hasName) {\n <span class=\"ius-personitem__name\">{{ name }}<ng-content select=\"[iusPersonItemName]\" /></span>\n }\n @for (line of displayLines; track $index) {\n <span class=\"ius-personitem__line\">\n @if (line.tpl) {\n <ng-container *ngTemplateOutlet=\"line.tpl\" />\n } @else {\n {{ line.text }}\n }\n </span>\n }\n </div>\n\n @if (selected && showCheck) {\n <span class=\"ius-personitem__check\"><span translate=\"no\" class=\"ius-icon\">check_circle</span></span>\n }\n\n @if (hasTrailing) {\n <span class=\"ius-personitem__trailing\"><ng-content select=\"[iusPersonItemTrailing]\" /></span>\n }\n\n @if (showMenu) {\n <!-- \u22EE de acciones del chip: compone ius-dropdown. Va ANTES de la X;\n su click no dispara la fila. -->\n <span class=\"ius-personitem__menu\" (click)=\"$event.stopPropagation()\">\n <ius-dropdown [items]=\"actions\" placement=\"bottom-end\" [ariaLabel]=\"actionsLabel\">\n <ius-icon-button\n iusDropdownTrigger\n icon=\"more_vert\"\n variant=\"tertiary\"\n shape=\"squared\"\n [size]=\"menuIbSize\"\n [ariaLabel]=\"actionsLabel\"\n [disabled]=\"disabled\"\n />\n </ius-dropdown>\n </span>\n }\n\n @if (showRemove) {\n <button\n type=\"button\"\n class=\"ius-personitem__x\"\n [attr.aria-label]=\"removeLabel + (name ? ' ' + name : '')\"\n [disabled]=\"disabled\"\n (mousedown)=\"onRemoveMouseDown($event)\"\n (click)=\"onRemoveClick($event)\"\n >\n <span translate=\"no\" class=\"ius-icon\">close</span>\n </button>\n }\n </div>\n</ius-card>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-width:0;box-sizing:border-box;-webkit-user-select:none;user-select:none;text-align:left;--_pi-py: var(--ius-space-sm);--_pi-px: var(--ius-space-sm);--_pi-gap: var(--ius-space-sm);--_pi-name-fs: var(--ius-fs-lg);--_pi-name-lh: var(--ius-lh-lg);--_pi-line-fs: var(--ius-fs-sm);--_pi-line-lh: var(--ius-lh-sm);--_pi-x-size: 24px}:host([data-size=small]){--_pi-py: var(--ius-space-xs);--_pi-px: var(--ius-space-sm);--_pi-gap: var(--ius-space-xs);--_pi-name-fs: var(--ius-fs-base);--_pi-name-lh: var(--ius-lh-base);--_pi-line-fs: var(--ius-fs-sm);--_pi-line-lh: var(--ius-lh-sm);--_pi-x-size: 20px}:host([data-size=large]){--_pi-py: var(--ius-space-md);--_pi-px: var(--ius-space-md);--_pi-gap: var(--ius-space-md);--_pi-name-fs: var(--ius-fs-h5);--_pi-name-lh: var(--ius-lh-h5);--_pi-line-fs: var(--ius-fs-base);--_pi-line-lh: var(--ius-lh-base);--_pi-x-size: 28px}@container style(--ius-density: small){:host(:not([data-size])){--_pi-py: var(--ius-space-xs);--_pi-px: var(--ius-space-sm);--_pi-gap: var(--ius-space-xs);--_pi-name-fs: var(--ius-fs-base);--_pi-name-lh: var(--ius-lh-base);--_pi-line-fs: var(--ius-fs-sm);--_pi-line-lh: var(--ius-lh-sm)}}@container style(--ius-density: large){:host(:not([data-size])){--_pi-py: var(--ius-space-md);--_pi-px: var(--ius-space-md);--_pi-gap: var(--ius-space-md);--_pi-name-fs: var(--ius-fs-h5);--_pi-name-lh: var(--ius-lh-h5);--_pi-line-fs: var(--ius-fs-base);--_pi-line-lh: var(--ius-lh-base)}}.ius-personitem__row{display:flex;align-items:center;gap:var(--_pi-gap);padding:var(--_pi-py) var(--_pi-px)}:host([data-pi-variant=option]) .ius-personitem__card[data-interactive=true]:hover,:host([data-pi-variant=option][data-state=hover]) .ius-personitem__card{box-shadow:none;transform:none;border-color:var(--ius-info-300)}:host([data-pi-variant=option]) .ius-personitem__card[data-interactive=true]:active,:host([data-pi-variant=option][data-state=pressed]) .ius-personitem__card{box-shadow:none;transform:none;background:var(--ius-info-100);border-color:var(--ius-info-300)}:host([data-pi-variant=option]) .ius-personitem__card[data-selected=true]{background:var(--ius-info-100);border-color:var(--ius-info-300);box-shadow:none}:host([data-disabled=true]){cursor:default;opacity:.5;pointer-events:none}.ius-personitem__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}.ius-personitem__name{font-family:var(--ius-font-display);font-size:var(--_pi-name-fs);line-height:var(--_pi-name-lh);font-weight:var(--ius-fw-bold);color:var(--ius-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-personitem__line{font-family:var(--ius-font-body);font-size:var(--_pi-line-fs);line-height:var(--_pi-line-lh);color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-personitem__trailing{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xxs)}.ius-personitem__menu{flex:0 0 auto;display:inline-flex;align-items:center}.ius-personitem__check{flex:0 0 auto;display:inline-flex;color:var(--ius-primary-900)}.ius-personitem__check .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-personitem__x{appearance:none;border:0;margin:0;padding:0;flex:0 0 auto;width:var(--_pi-x-size);height:var(--_pi-x-size);border-radius:var(--ius-radius-pill);background:var(--ius-neutral-9);color:var(--ius-neutral-white);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-personitem__x:hover{background:var(--ius-neutral-black)}.ius-personitem__x:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-personitem__x .ius-icon{font-size:calc(var(--_pi-x-size) - 8px);line-height:1}:host([data-disabled=true]) .ius-personitem__x{background:var(--ius-neutral-5);cursor:default}\n"] }]
|
|
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"] }]
|
|
7617
7617
|
}], propDecorators: { name: [{
|
|
7618
7618
|
type: Input
|
|
7619
7619
|
}], lines: [{
|
|
@@ -8949,11 +8949,11 @@ class ModalComponent {
|
|
|
8949
8949
|
this.closed.emit(reason);
|
|
8950
8950
|
}
|
|
8951
8951
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8952
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ModalComponent, isStandalone: true, selector: "ius-modal", inputs: { open: ["open", "open", booleanAttribute], size: "size", title: "title", description: "description", icon: "icon", iconTone: "iconTone", showClose: ["showClose", "showClose", booleanAttribute], primaryLabel: "primaryLabel", primaryLoading: ["primaryLoading", "primaryLoading", booleanAttribute], primaryDisabled: ["primaryDisabled", "primaryDisabled", booleanAttribute], destructive: ["destructive", "destructive", booleanAttribute], secondaryLabel: "secondaryLabel", dividers: ["dividers", "dividers", booleanAttribute], closeOnScrim: ["closeOnScrim", "closeOnScrim", booleanAttribute], closeOnEsc: ["closeOnEsc", "closeOnEsc", booleanAttribute], zIndex: ["zIndex", "zIndex", numberAttribute], ariaLabel: "ariaLabel" }, outputs: { closed: "closed", primary: "primary", secondary: "secondary" }, queries: [{ propertyName: "customFooter", first: true, predicate: IusModalFooterDirective, descendants: true }], viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #tpl>\n <div\n class=\"ius-modal__scrim\"\n [style.--_modal-z]=\"zIndex\"\n (mousedown)=\"onScrimMouseDown($event)\"\n >\n <div\n class=\"ius-modal\"\n [attr.data-size]=\"size\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"title == null ? ariaLabel : null\"\n [attr.aria-labelledby]=\"title != null ? titleId : null\"\n [attr.aria-describedby]=\"description != null ? descId : null\"\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"true\"\n >\n @if (hasHead) {\n <div class=\"ius-modal__head\" [attr.data-divider]=\"dividers ? 'true' : null\">\n @if (icon != null) {\n <span\n class=\"ius-modal__icon\"\n aria-hidden=\"true\"\n [style.--_mi-bg]=\"iconColors.bg\"\n [style.--_mi-fg]=\"iconColors.fg\"\n >\n <span translate=\"no\" class=\"ius-icon\">{{ icon }}</span>\n </span>\n }\n\n @if (title != null || description != null) {\n <div class=\"ius-modal__titles\">\n @if (title != null) {\n <h2 class=\"ius-modal__title\" [id]=\"titleId\">{{ title }}</h2>\n }\n @if (description != null) {\n <p class=\"ius-modal__desc\" [id]=\"descId\">{{ description }}</p>\n }\n </div>\n } @else {\n <span class=\"ius-modal__titles\"></span>\n }\n\n @if (showClose) {\n <ius-icon-button\n class=\"ius-modal__close\"\n icon=\"close\"\n variant=\"tertiary\"\n size=\"small\"\n shape=\"circle\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"onCloseClick()\"\n />\n }\n </div>\n }\n\n <div class=\"ius-modal__body\" [attr.data-no-head]=\"hasHead ? null : 'true'\">\n <ng-content />\n </div>\n\n @if (customFooter) {\n <div class=\"ius-modal__foot\" [attr.data-divider]=\"dividers ? 'true' : null\">\n <ng-content select=\"[iusModalFooter]\" />\n </div>\n } @else if (hasConvenienceFooter) {\n <div class=\"ius-modal__foot\" [attr.data-divider]=\"dividers ? 'true' : null\">\n @if (showSecondary) {\n <ius-button\n variant=\"secondary\"\n size=\"medium\"\n [label]=\"secondaryLabel!\"\n (clicked)=\"onSecondary()\"\n />\n }\n @if (primaryLabel != null) {\n <ius-button\n [variant]=\"destructive ? 'danger' : 'primary'\"\n size=\"medium\"\n [label]=\"primaryLabel\"\n [loading]=\"primaryLoading\"\n [disabled]=\"primaryDisabled\"\n (clicked)=\"onPrimary($event)\"\n />\n }\n </div>\n }\n </div>\n </div>\n</ng-template>\n", styles: [".ius-modal__scrim{position:fixed;inset:0;background:var(--ius-surface-overlay, rgba(0, 0, 0, .45));display:flex;align-items:center;justify-content:center;padding:var(--ius-space-lg);z-index:var(--_modal-z, var(--ius-z-modal));-webkit-user-select:none;user-select:none;animation:ius-modal-scrim-in .2s var(--ius-ease-decelerate, cubic-bezier(0, 0, .2, 1))}@keyframes ius-modal-scrim-in{0%{opacity:0}to{opacity:1}}.ius-modal{display:flex;flex-direction:column;width:100%;max-height:calc(100vh - 48px);background:var(--ius-surface-card, #fff);border-radius:var(--ius-radius-lg, 14px);box-shadow:var(--ius-elevation-400, 0 12px 32px rgba(0, 0, 0, .18));overflow:hidden;animation:ius-modal-in .22s var(--ius-ease-decelerate, cubic-bezier(0, 0, .2, 1))}@keyframes ius-modal-in{0%{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.ius-modal[data-size=small]{max-width:380px}.ius-modal[data-size=medium]{max-width:520px}.ius-modal[data-size=large]{max-width:680px}.ius-modal__head{display:flex;align-items:flex-start;gap:var(--ius-space-sm);padding:var(--ius-space-lg) var(--ius-space-lg) var(--ius-space-md) var(--ius-space-lg);flex:none;-webkit-user-select:none;user-select:none}.ius-modal__head[data-divider=true]{border-bottom:1px solid var(--ius-stroke, #eaeaea)}.ius-modal__icon{flex:none;width:38px;height:38px;margin-top:1px;border-radius:var(--ius-radius-pill, 100px);display:grid;place-items:center;background:var(--_mi-bg, var(--ius-info-100));color:var(--_mi-fg, var(--ius-info-600))}.ius-modal__icon .ius-icon{font-size:var(--ius-icon-lg)}.ius-modal__titles{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-modal__title{font-family:var(--ius-font-display);font-weight:700;font-size:var(--ius-fs-h5);line-height:var(--ius-lh-h5);color:var(--ius-text-primary);margin:0}.ius-modal__desc{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-base);color:var(--ius-text-secondary);margin:0}.ius-modal__close{flex:none;margin:-4px -4px 0 0}.ius-modal__body{padding:var(--ius-space-md) var(--ius-space-lg) var(--ius-space-lg);overflow-y:auto;flex:1 1 auto;font-family:var(--ius-font-body);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-secondary);-webkit-user-select:text;user-select:text}.ius-modal__body[data-no-head=true]{padding-top:var(--ius-space-lg)}.ius-modal__foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--ius-space-xs);padding:var(--ius-space-md) var(--ius-space-lg) var(--ius-space-md);flex:none;-webkit-user-select:none;user-select:none}.ius-modal__foot[data-divider=true]{border-top:1px solid var(--ius-stroke, #eaeaea)}@media(prefers-reduced-motion:reduce){.ius-modal__scrim,.ius-modal{animation:none}}@media(max-width:480px){.ius-modal[data-size]{max-width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: ButtonComponent, selector: "ius-button", inputs: ["variant", "label", "prefixIcon", "sufixIcon", "dynamic", "loading", "status", "disabled", "pressed", "fullWidth", "type", "ariaLabel", "action", "size"], outputs: ["clicked"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "tooltipPlacement"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
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 }); }
|
|
8953
8953
|
}
|
|
8954
8954
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ModalComponent, decorators: [{
|
|
8955
8955
|
type: Component,
|
|
8956
|
-
args: [{ selector: 'ius-modal', standalone: true, imports: [A11yModule, ButtonComponent, IconButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #tpl>\n <div\n class=\"ius-modal__scrim\"\n [style.--_modal-z]=\"zIndex\"\n (mousedown)=\"onScrimMouseDown($event)\"\n >\n <div\n class=\"ius-modal\"\n [attr.data-size]=\"size\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"title == null ? ariaLabel : null\"\n [attr.aria-labelledby]=\"title != null ? titleId : null\"\n [attr.aria-describedby]=\"description != null ? descId : null\"\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"true\"\n >\n @if (hasHead) {\n <div class=\"ius-modal__head\" [attr.data-divider]=\"dividers ? 'true' : null\">\n @if (icon != null) {\n <span\n class=\"ius-modal__icon\"\n aria-hidden=\"true\"\n [style.--_mi-bg]=\"iconColors.bg\"\n [style.--_mi-fg]=\"iconColors.fg\"\n >\n <span translate=\"no\" class=\"ius-icon\">{{ icon }}</span>\n </span>\n }\n\n @if (title != null || description != null) {\n <div class=\"ius-modal__titles\">\n @if (title != null) {\n <h2 class=\"ius-modal__title\" [id]=\"titleId\">{{ title }}</h2>\n }\n @if (description != null) {\n <p class=\"ius-modal__desc\" [id]=\"descId\">{{ description }}</p>\n }\n </div>\n } @else {\n <span class=\"ius-modal__titles\"></span>\n }\n\n @if (showClose) {\n <ius-icon-button\n class=\"ius-modal__close\"\n icon=\"close\"\n variant=\"tertiary\"\n size=\"small\"\n shape=\"circle\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"onCloseClick()\"\n />\n }\n </div>\n }\n\n <div class=\"ius-modal__body\" [attr.data-no-head]=\"hasHead ? null : 'true'\">\n <ng-content />\n </div>\n\n @if (customFooter) {\n <div class=\"ius-modal__foot\" [attr.data-divider]=\"dividers ? 'true' : null\">\n <ng-content select=\"[iusModalFooter]\" />\n </div>\n } @else if (hasConvenienceFooter) {\n <div class=\"ius-modal__foot\" [attr.data-divider]=\"dividers ? 'true' : null\">\n @if (showSecondary) {\n <ius-button\n variant=\"secondary\"\n size=\"medium\"\n [label]=\"secondaryLabel!\"\n (clicked)=\"onSecondary()\"\n />\n }\n @if (primaryLabel != null) {\n <ius-button\n [variant]=\"destructive ? 'danger' : 'primary'\"\n size=\"medium\"\n [label]=\"primaryLabel\"\n [loading]=\"primaryLoading\"\n [disabled]=\"primaryDisabled\"\n (clicked)=\"onPrimary($event)\"\n />\n }\n </div>\n }\n </div>\n </div>\n</ng-template>\n", styles: [".ius-modal__scrim{position:fixed;inset:0;background:var(--ius-surface-overlay, rgba(0, 0, 0, .45));display:flex;align-items:center;justify-content:center;padding:var(--ius-space-lg);z-index:var(--_modal-z, var(--ius-z-modal));-webkit-user-select:none;user-select:none;animation:ius-modal-scrim-in .2s var(--ius-ease-decelerate, cubic-bezier(0, 0, .2, 1))}@keyframes ius-modal-scrim-in{0%{opacity:0}to{opacity:1}}.ius-modal{display:flex;flex-direction:column;width:100%;max-height:calc(100vh - 48px);background:var(--ius-surface-card, #fff);border-radius:var(--ius-radius-lg, 14px);box-shadow:var(--ius-elevation-400, 0 12px 32px rgba(0, 0, 0, .18));overflow:hidden;animation:ius-modal-in .22s var(--ius-ease-decelerate, cubic-bezier(0, 0, .2, 1))}@keyframes ius-modal-in{0%{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.ius-modal[data-size=small]{max-width:380px}.ius-modal[data-size=medium]{max-width:520px}.ius-modal[data-size=large]{max-width:680px}.ius-modal__head{display:flex;align-items:flex-start;gap:var(--ius-space-sm);padding:var(--ius-space-lg) var(--ius-space-lg) var(--ius-space-md) var(--ius-space-lg);flex:none;-webkit-user-select:none;user-select:none}.ius-modal__head[data-divider=true]{border-bottom:1px solid var(--ius-stroke, #eaeaea)}.ius-modal__icon{flex:none;width:38px;height:38px;margin-top:1px;border-radius:var(--ius-radius-pill, 100px);display:grid;place-items:center;background:var(--_mi-bg, var(--ius-info-100));color:var(--_mi-fg, var(--ius-info-600))}.ius-modal__icon .ius-icon{font-size:var(--ius-icon-lg)}.ius-modal__titles{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-modal__title{font-family:var(--ius-font-display);font-weight:700;font-size:var(--ius-fs-h5);line-height:var(--ius-lh-h5);color:var(--ius-text-primary);margin:0}.ius-modal__desc{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-base);color:var(--ius-text-secondary);margin:0}.ius-modal__close{flex:none;margin:-4px -4px 0 0}.ius-modal__body{padding:var(--ius-space-md) var(--ius-space-lg) var(--ius-space-lg);overflow-y:auto;flex:1 1 auto;font-family:var(--ius-font-body);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-secondary);-webkit-user-select:text;user-select:text}.ius-modal__body[data-no-head=true]{padding-top:var(--ius-space-lg)}.ius-modal__foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--ius-space-xs);padding:var(--ius-space-md) var(--ius-space-lg) var(--ius-space-md);flex:none;-webkit-user-select:none;user-select:none}.ius-modal__foot[data-divider=true]{border-top:1px solid var(--ius-stroke, #eaeaea)}@media(prefers-reduced-motion:reduce){.ius-modal__scrim,.ius-modal{animation:none}}@media(max-width:480px){.ius-modal[data-size]{max-width:100%}}\n"] }]
|
|
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"] }]
|
|
8957
8957
|
}], propDecorators: { tpl: [{
|
|
8958
8958
|
type: ViewChild,
|
|
8959
8959
|
args: ['tpl', { static: true }]
|
|
@@ -9305,7 +9305,7 @@ class SegmentedControlComponent {
|
|
|
9305
9305
|
useExisting: forwardRef(() => SegmentedControlComponent),
|
|
9306
9306
|
multi: true,
|
|
9307
9307
|
},
|
|
9308
|
-
], viewQueries: [{ propertyName: "optRefs", predicate: ["opt"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (o of options; track o.value; let i = $index) {\n <button\n #opt\n type=\"button\"\n role=\"radio\"\n class=\"ius-seg__opt\"\n [attr.name]=\"name || null\"\n [attr.aria-checked]=\"o.value === selected()\"\n [attr.aria-label]=\"iconOnly ? (o.ariaLabel || o.label || null) : null\"\n [attr.title]=\"iconOnly ? (o.ariaLabel || o.label || null) : (o.title || null)\"\n [disabled]=\"disabled || !!o.disabled\"\n [attr.tabindex]=\"tabIndexFor(o, i)\"\n (click)=\"onOptionClick(o)\"\n (keydown)=\"onKeyDown($event, i)\"\n >\n @if (o.icon) {\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ o.icon }}</span>\n }\n @if (!iconOnly && o.label != null) {\n <span>{{ o.label }}</span>\n }\n </button>\n}\n", styles: ["@charset \"UTF-8\";:host{--_seg-h: 40px;--_seg-fs: var(--ius-fs-base);--_seg-px: 14px;--_seg-gap: var(--ius-space-xs);--_seg-icon: var(--ius-icon-md);--_seg-pad: 3px;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:stretch;gap:var(--ius-space-xxs);padding:var(--_seg-pad);background:var(--ius-neutral-1);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);box-sizing:border-box;font-family:var(--ius-font-body)}:host([data-size=small]){--_seg-h: 34px;--_seg-fs: var(--ius-fs-sm);--_seg-px: 11px;--_seg-gap: var(--ius-space-xs);--_seg-icon: var(--ius-icon-sm)}:host([data-size=large]){--_seg-h: 48px;--_seg-fs: var(--ius-fs-base);--_seg-px: 18px;--_seg-gap: var(--ius-space-xs);--_seg-icon: var(--ius-icon-md)}@container style(--ius-control-size: small){:host(:not([data-size])){--_seg-h: 34px;--_seg-fs: var(--ius-fs-sm);--_seg-px: 11px;--_seg-gap: var(--ius-space-xs);--_seg-icon: var(--ius-icon-sm)}}@container style(--ius-control-size: large){:host(:not([data-size])){--_seg-h: 48px;--_seg-fs: var(--ius-fs-base);--_seg-px: 18px;--_seg-gap: var(--ius-space-xs);--_seg-icon: var(--ius-icon-md)}}:host([data-fullwidth=true]){display:flex;width:100%}.ius-seg__opt{appearance:none;-webkit-appearance:none;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:var(--_seg-gap);height:calc(var(--_seg-h) - var(--_seg-pad) * 2 - 2px);padding:0 var(--_seg-px);border:0;background:transparent;cursor:pointer;border-radius:calc(var(--ius-radius-lg) - var(--_seg-pad));color:var(--ius-text-secondary);font-family:var(--ius-font-body);font-size:var(--_seg-fs);font-weight:var(--ius-fw-medium);line-height:1;white-space:nowrap;transition:background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-fullwidth=true]) .ius-seg__opt{flex:1 1 0;min-width:0}.ius-seg__opt .ius-icon{font-size:var(--_seg-icon);line-height:1}.ius-seg__opt:hover:not([aria-checked=true]):not(:disabled){color:var(--ius-text-primary);background:var(--ius-neutral-3)}.ius-seg__opt:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-seg__opt:disabled{color:var(--ius-text-disabled);cursor:not-allowed}:host([data-variant=subtle]) .ius-seg__opt[aria-checked=true]{background:var(--ius-surface-card);color:var(--ius-text-primary);box-shadow:var(--ius-elevation-100);font-weight:var(--ius-fw-semibold)}:host([data-variant=solid]) .ius-seg__opt[aria-checked=true]{background:var(--ius-primary-900);color:var(--ius-neutral-white);font-weight:var(--ius-fw-semibold)}:host([data-variant=solid]) .ius-seg__opt[aria-checked=true] .ius-icon{color:var(--ius-neutral-white)}:host([data-disabled=true]){opacity:.55;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
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 }); }
|
|
9309
9309
|
}
|
|
9310
9310
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SegmentedControlComponent, decorators: [{
|
|
9311
9311
|
type: Component,
|
|
@@ -9323,7 +9323,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
9323
9323
|
'[attr.data-variant]': 'variant',
|
|
9324
9324
|
'[attr.data-fullwidth]': "fullWidth ? 'true' : 'false'",
|
|
9325
9325
|
'[attr.data-disabled]': "disabled ? 'true' : 'false'",
|
|
9326
|
-
}, template: "@for (o of options; track o.value; let i = $index) {\n <button\n #opt\n type=\"button\"\n role=\"radio\"\n class=\"ius-seg__opt\"\n [attr.name]=\"name || null\"\n [attr.aria-checked]=\"o.value === selected()\"\n [attr.aria-label]=\"iconOnly ? (o.ariaLabel || o.label || null) : null\"\n [attr.title]=\"iconOnly ? (o.ariaLabel || o.label || null) : (o.title || null)\"\n [disabled]=\"disabled || !!o.disabled\"\n [attr.tabindex]=\"tabIndexFor(o, i)\"\n (click)=\"onOptionClick(o)\"\n (keydown)=\"onKeyDown($event, i)\"\n >\n @if (o.icon) {\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ o.icon }}</span>\n }\n @if (!iconOnly && o.label != null) {\n <span>{{ o.label }}</span>\n }\n </button>\n}\n", styles: ["@charset \"UTF-8\";:host{--_seg-h: 40px;--_seg-fs: var(--ius-fs-base);--_seg-px: 14px;--_seg-gap: var(--ius-space-xs);--_seg-icon: var(--ius-icon-md);--_seg-pad: 3px;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:stretch;gap:var(--ius-space-xxs);padding:var(--_seg-pad);background:var(--ius-neutral-1);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);box-sizing:border-box;font-family:var(--ius-font-body)}:host([data-size=small]){--_seg-h: 34px;--_seg-fs: var(--ius-fs-sm);--_seg-px: 11px;--_seg-gap: var(--ius-space-xs);--_seg-icon: var(--ius-icon-sm)}:host([data-size=large]){--_seg-h: 48px;--_seg-fs: var(--ius-fs-base);--_seg-px: 18px;--_seg-gap: var(--ius-space-xs);--_seg-icon: var(--ius-icon-md)}@container style(--ius-control-size: small){:host(:not([data-size])){--_seg-h: 34px;--_seg-fs: var(--ius-fs-sm);--_seg-px: 11px;--_seg-gap: var(--ius-space-xs);--_seg-icon: var(--ius-icon-sm)}}@container style(--ius-control-size: large){:host(:not([data-size])){--_seg-h: 48px;--_seg-fs: var(--ius-fs-base);--_seg-px: 18px;--_seg-gap: var(--ius-space-xs);--_seg-icon: var(--ius-icon-md)}}:host([data-fullwidth=true]){display:flex;width:100%}.ius-seg__opt{appearance:none;-webkit-appearance:none;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:var(--_seg-gap);height:calc(var(--_seg-h) - var(--_seg-pad) * 2 - 2px);padding:0 var(--_seg-px);border:0;background:transparent;cursor:pointer;border-radius:calc(var(--ius-radius-lg) - var(--_seg-pad));color:var(--ius-text-secondary);font-family:var(--ius-font-body);font-size:var(--_seg-fs);font-weight:var(--ius-fw-medium);line-height:1;white-space:nowrap;transition:background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-fullwidth=true]) .ius-seg__opt{flex:1 1 0;min-width:0}.ius-seg__opt .ius-icon{font-size:var(--_seg-icon);line-height:1}.ius-seg__opt:hover:not([aria-checked=true]):not(:disabled){color:var(--ius-text-primary);background:var(--ius-neutral-3)}.ius-seg__opt:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-seg__opt:disabled{color:var(--ius-text-disabled);cursor:not-allowed}:host([data-variant=subtle]) .ius-seg__opt[aria-checked=true]{background:var(--ius-surface-card);color:var(--ius-text-primary);box-shadow:var(--ius-elevation-100);font-weight:var(--ius-fw-semibold)}:host([data-variant=solid]) .ius-seg__opt[aria-checked=true]{background:var(--ius-primary-900);color:var(--ius-neutral-white);font-weight:var(--ius-fw-semibold)}:host([data-variant=solid]) .ius-seg__opt[aria-checked=true] .ius-icon{color:var(--ius-neutral-white)}:host([data-disabled=true]){opacity:.55;pointer-events:none}\n"] }]
|
|
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"] }]
|
|
9327
9327
|
}], propDecorators: { options: [{
|
|
9328
9328
|
type: Input
|
|
9329
9329
|
}], size: [{
|
|
@@ -9453,11 +9453,11 @@ class WizardComponent {
|
|
|
9453
9453
|
return Math.round(this.percent);
|
|
9454
9454
|
}
|
|
9455
9455
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: WizardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
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) {\
|
|
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 }); }
|
|
9457
9457
|
}
|
|
9458
9458
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: WizardComponent, decorators: [{
|
|
9459
9459
|
type: Component,
|
|
9460
|
-
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"] }]
|
|
9461
9461
|
}], propDecorators: { api: [{
|
|
9462
9462
|
type: Input,
|
|
9463
9463
|
args: [{ required: true }]
|
|
@@ -9523,11 +9523,11 @@ class WizardNavComponent {
|
|
|
9523
9523
|
this.finishAction?.();
|
|
9524
9524
|
}
|
|
9525
9525
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: WizardNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
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) {\
|
|
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 }); }
|
|
9527
9527
|
}
|
|
9528
9528
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: WizardNavComponent, decorators: [{
|
|
9529
9529
|
type: Component,
|
|
9530
|
-
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"] }]
|
|
9531
9531
|
}], propDecorators: { api: [{
|
|
9532
9532
|
type: Input,
|
|
9533
9533
|
args: [{ required: true }]
|
|
@@ -9659,7 +9659,7 @@ class ScrollAreaComponent {
|
|
|
9659
9659
|
}
|
|
9660
9660
|
}
|
|
9661
9661
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ScrollAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
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\
|
|
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 }); }
|
|
9663
9663
|
}
|
|
9664
9664
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ScrollAreaComponent, decorators: [{
|
|
9665
9665
|
type: Component,
|
|
@@ -9667,7 +9667,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
9667
9667
|
class: 'ius-sa',
|
|
9668
9668
|
'[attr.data-axis]': 'axis',
|
|
9669
9669
|
'[attr.data-fade]': "fade ? 'true' : 'false'",
|
|
9670
|
-
}, 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"] }]
|
|
9671
9671
|
}], propDecorators: { axis: [{
|
|
9672
9672
|
type: Input
|
|
9673
9673
|
}], size: [{
|
|
@@ -9780,18 +9780,18 @@ class DividerComponent {
|
|
|
9780
9780
|
this.hasLabel.set(this.orientation === 'horizontal' && conContenido);
|
|
9781
9781
|
}
|
|
9782
9782
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
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>
|
|
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
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 }); }
|
|
9788
9788
|
}
|
|
9789
9789
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DividerComponent, decorators: [{
|
|
9790
9790
|
type: Component,
|
|
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>
|
|
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>
|
|
9795
9795
|
`, host: {
|
|
9796
9796
|
role: 'separator',
|
|
9797
9797
|
'[attr.aria-orientation]': 'orientation',
|
|
@@ -11432,7 +11432,7 @@ class SettingsNavComponent {
|
|
|
11432
11432
|
this.visibleCount.set(count);
|
|
11433
11433
|
}
|
|
11434
11434
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SettingsNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
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: "<!--\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 }); }
|
|
11436
11436
|
}
|
|
11437
11437
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SettingsNavComponent, decorators: [{
|
|
11438
11438
|
type: Component,
|
|
@@ -11451,7 +11451,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
11451
11451
|
'[style.--_sn-cico-h]': 'cicoH()',
|
|
11452
11452
|
'[style.--_sn-fg]': 'accentFg()',
|
|
11453
11453
|
'[style.--_sn-tint]': 'accentTint()',
|
|
11454
|
-
}, 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"] }]
|
|
11455
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 }] }] } });
|
|
11456
11456
|
|
|
11457
11457
|
/** Ícono por defecto según el tono (mapa `DEFAULT_ICON` del golden). */
|
|
@@ -11960,7 +11960,7 @@ class TabsComponent {
|
|
|
11960
11960
|
this.tabButtons()[next]?.nativeElement.focus();
|
|
11961
11961
|
}
|
|
11962
11962
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11963
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: TabsComponent, isStandalone: true, selector: "ius-tabs", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { attributes: { "role": "tablist" }, properties: { "attr.data-size": "size()", "attr.data-fullwidth": "fullWidth() ? 'true' : null", "style.--_tb-accent": "accentStrong()" }, classAttribute: "ius-tabs" }, viewQueries: [{ propertyName: "tabButtons", predicate: ["tabBtn"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (item of items(); track item.id; let i = $index) {\n <button\n #tabBtn\n type=\"button\"\n role=\"tab\"\n class=\"ius-tabs__tab\"\n [attr.data-size]=\"size()\"\n [attr.data-active]=\"item.id === active() ? 'true' : null\"\n [attr.data-disabled]=\"item.disabled ? 'true' : null\"\n [attr.aria-selected]=\"item.id === active() ? 'true' : 'false'\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n [attr.tabindex]=\"item.id === active() ? 0 : -1\"\n [disabled]=\"!!item.disabled\"\n (click)=\"select(item)\"\n (keydown)=\"onKeydown($event, i)\"\n >\n @if (item.icon) {\n <span translate=\"no\" class=\"ius-icon ius-tabs__icon\">{{ item.icon }}</span>\n }\n\n <span class=\"ius-tabs__label\">{{ item.label }}</span>\n\n <!-- El contador compone Insignia `count-soft` (T3): neutro en reposo y accent\n suave al activarse; ya no es un badge propio de Tabs. -->\n @if (item.count != null) {\n <ius-insignia\n class=\"ius-tabs__count\"\n variant=\"count-soft\"\n [count]=\"item.count\"\n [size]=\"size() === 'small' ? 'small' : 'medium'\"\n [tone]=\"item.id === active() ? accent() : 'neutral'\"\n />\n }\n\n <!-- Tag: al activarse toma el accent de las tabs y pasa a `solid`. -->\n @if (item.tag; as tag) {\n <ius-tag\n [label]=\"tag.label\"\n [tone]=\"item.id === active() ? accent() : (tag.tone ?? 'neutral')\"\n [variant]=\"item.id === active() ? 'solid' : 'soft'\"\n size=\"small\"\n />\n }\n </button>\n}\n", styles: ["@charset \"UTF-8\";:host{--_tb-fs: var(--ius-fs-base);--_tb-py: 11px;--_tb-gap: var(--ius-space-xs);--_tb-icon: var(--ius-icon-md);--_tb-line: 3px;display:flex;align-items:stretch;position:relative;border-bottom:1px solid var(--ius-neutral-3);font-family:var(--ius-font-body);box-sizing:border-box;gap:var(--ius-space-xxs);overflow-x:auto;scrollbar-width:none}:host::-webkit-scrollbar{display:none}:host *,:host *:before,:host *:after{box-sizing:border-box}:host([data-size=small]){--_tb-fs: var(--ius-fs-sm);--_tb-py: 8px;--_tb-gap: var(--ius-space-xs);--_tb-icon: var(--ius-icon-sm);--_tb-line: 2px}:host([data-size=large]){--_tb-fs: var(--ius-fs-base);--_tb-py: 14px;--_tb-gap: var(--ius-space-xs);--_tb-icon: var(--ius-icon-md);--_tb-line: 4px}:host([data-fullwidth=true]){gap:0}:host([data-fullwidth=true]) .ius-tabs__tab{flex:1 1 0;justify-content:center}.ius-tabs__tab{appearance:none;border:0;background:transparent;cursor:pointer;position:relative;display:inline-flex;align-items:center;gap:var(--_tb-gap);padding:var(--_tb-py) var(--ius-space-md);font-size:var(--_tb-fs);line-height:1.3;font-weight:var(--ius-fw-medium, 500);color:var(--ius-text-secondary);white-space:nowrap;transition:color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-tabs__tab:after{content:\"\";position:absolute;left:8px;right:8px;bottom:-1px;height:var(--_tb-line);background:transparent;border-radius:var(--ius-radius-pill);transition:background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-tabs__tab:hover{color:var(--ius-text-primary)}.ius-tabs__tab:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);border-radius:var(--ius-radius-sm)}.ius-tabs__tab[data-active=true]{color:var(--_tb-accent);font-weight:var(--ius-fw-semibold)}.ius-tabs__tab[data-active=true]:after{background:var(--_tb-accent)}.ius-tabs__tab[data-disabled=true]{color:var(--ius-text-disabled);cursor:not-allowed}.ius-tabs__tab[data-disabled=true]:hover{color:var(--ius-text-disabled)}.ius-tabs__icon{font-size:var(--_tb-icon);line-height:1;flex:0 0 auto}.ius-tabs__label{min-width:0}.ius-tabs__count{flex:0 0 auto}\n"], dependencies: [{ kind: "component", type: InsigniaComponent, selector: "ius-insignia", inputs: ["variant", "tone", "size", "label", "count", "max", "ring", "ariaLabel"] }, { kind: "component", type: TagComponent, selector: "ius-tag", inputs: ["label", "role", "tone", "variant", "size", "shape", "icon", "dot", "count", "closable", "closeLabel", "selected", "disabled", "interactive", "state"], outputs: ["clicked", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
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 }); }
|
|
11964
11964
|
}
|
|
11965
11965
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TabsComponent, decorators: [{
|
|
11966
11966
|
type: Component,
|
|
@@ -11970,7 +11970,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
11970
11970
|
'[attr.data-size]': 'size()',
|
|
11971
11971
|
'[attr.data-fullwidth]': "fullWidth() ? 'true' : null",
|
|
11972
11972
|
'[style.--_tb-accent]': 'accentStrong()',
|
|
11973
|
-
}, template: "@for (item of items(); track item.id; let i = $index) {\n <button\n #tabBtn\n type=\"button\"\n role=\"tab\"\n class=\"ius-tabs__tab\"\n [attr.data-size]=\"size()\"\n [attr.data-active]=\"item.id === active() ? 'true' : null\"\n [attr.data-disabled]=\"item.disabled ? 'true' : null\"\n [attr.aria-selected]=\"item.id === active() ? 'true' : 'false'\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n [attr.tabindex]=\"item.id === active() ? 0 : -1\"\n [disabled]=\"!!item.disabled\"\n (click)=\"select(item)\"\n (keydown)=\"onKeydown($event, i)\"\n >\n @if (item.icon) {\n <span translate=\"no\" class=\"ius-icon ius-tabs__icon\">{{ item.icon }}</span>\n }\n\n <span class=\"ius-tabs__label\">{{ item.label }}</span>\n\n <!-- El contador compone Insignia `count-soft` (T3): neutro en reposo y accent\n suave al activarse; ya no es un badge propio de Tabs. -->\n @if (item.count != null) {\n <ius-insignia\n class=\"ius-tabs__count\"\n variant=\"count-soft\"\n [count]=\"item.count\"\n [size]=\"size() === 'small' ? 'small' : 'medium'\"\n [tone]=\"item.id === active() ? accent() : 'neutral'\"\n />\n }\n\n <!-- Tag: al activarse toma el accent de las tabs y pasa a `solid`. -->\n @if (item.tag; as tag) {\n <ius-tag\n [label]=\"tag.label\"\n [tone]=\"item.id === active() ? accent() : (tag.tone ?? 'neutral')\"\n [variant]=\"item.id === active() ? 'solid' : 'soft'\"\n size=\"small\"\n />\n }\n </button>\n}\n", styles: ["@charset \"UTF-8\";:host{--_tb-fs: var(--ius-fs-base);--_tb-py: 11px;--_tb-gap: var(--ius-space-xs);--_tb-icon: var(--ius-icon-md);--_tb-line: 3px;display:flex;align-items:stretch;position:relative;border-bottom:1px solid var(--ius-neutral-3);font-family:var(--ius-font-body);box-sizing:border-box;gap:var(--ius-space-xxs);overflow-x:auto;scrollbar-width:none}:host::-webkit-scrollbar{display:none}:host *,:host *:before,:host *:after{box-sizing:border-box}:host([data-size=small]){--_tb-fs: var(--ius-fs-sm);--_tb-py: 8px;--_tb-gap: var(--ius-space-xs);--_tb-icon: var(--ius-icon-sm);--_tb-line: 2px}:host([data-size=large]){--_tb-fs: var(--ius-fs-base);--_tb-py: 14px;--_tb-gap: var(--ius-space-xs);--_tb-icon: var(--ius-icon-md);--_tb-line: 4px}:host([data-fullwidth=true]){gap:0}:host([data-fullwidth=true]) .ius-tabs__tab{flex:1 1 0;justify-content:center}.ius-tabs__tab{appearance:none;border:0;background:transparent;cursor:pointer;position:relative;display:inline-flex;align-items:center;gap:var(--_tb-gap);padding:var(--_tb-py) var(--ius-space-md);font-size:var(--_tb-fs);line-height:1.3;font-weight:var(--ius-fw-medium, 500);color:var(--ius-text-secondary);white-space:nowrap;transition:color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-tabs__tab:after{content:\"\";position:absolute;left:8px;right:8px;bottom:-1px;height:var(--_tb-line);background:transparent;border-radius:var(--ius-radius-pill);transition:background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-tabs__tab:hover{color:var(--ius-text-primary)}.ius-tabs__tab:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);border-radius:var(--ius-radius-sm)}.ius-tabs__tab[data-active=true]{color:var(--_tb-accent);font-weight:var(--ius-fw-semibold)}.ius-tabs__tab[data-active=true]:after{background:var(--_tb-accent)}.ius-tabs__tab[data-disabled=true]{color:var(--ius-text-disabled);cursor:not-allowed}.ius-tabs__tab[data-disabled=true]:hover{color:var(--ius-text-disabled)}.ius-tabs__icon{font-size:var(--_tb-icon);line-height:1;flex:0 0 auto}.ius-tabs__label{min-width:0}.ius-tabs__count{flex:0 0 auto}\n"] }]
|
|
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"] }]
|
|
11974
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 }] }] } });
|
|
11975
11975
|
|
|
11976
11976
|
/** Normaliza `open`/`defaultOpen` a lista; en exclusivo se queda con el primero. */
|
|
@@ -12099,6 +12099,189 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
12099
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"] }]
|
|
12100
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"] }] } });
|
|
12101
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
|
+
|
|
12102
12285
|
/*
|
|
12103
12286
|
* Public API de @litigiovirtual/ius-design-components v2.
|
|
12104
12287
|
* La librería se está reconstruyendo componente a componente desde las
|
|
@@ -12110,5 +12293,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
12110
12293
|
* Generated bundle index. Do not edit.
|
|
12111
12294
|
*/
|
|
12112
12295
|
|
|
12113
|
-
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 };
|
|
12114
12297
|
//# sourceMappingURL=litigiovirtual-ius-design-components.mjs.map
|