@litigiovirtual/ius-design-components 2.2.6 → 2.2.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1353,6 +1353,11 @@ class TextFieldComponent {
|
|
|
1353
1353
|
get inputType() {
|
|
1354
1354
|
return this.isPassword ? (this.revealed() ? 'text' : 'password') : this.type;
|
|
1355
1355
|
}
|
|
1356
|
+
/** Solo un entero ≥ 0 llega al DOM; `undefined`/NaN no pintan el atributo. */
|
|
1357
|
+
get maxLengthAttr() {
|
|
1358
|
+
const max = this.maxLength;
|
|
1359
|
+
return max !== undefined && Number.isInteger(max) && max >= 0 ? max : null;
|
|
1360
|
+
}
|
|
1356
1361
|
get hint() {
|
|
1357
1362
|
return this.error ? this.errorText || this.helpText : this.helpText;
|
|
1358
1363
|
}
|
|
@@ -1403,13 +1408,13 @@ class TextFieldComponent {
|
|
|
1403
1408
|
this.cleared.emit();
|
|
1404
1409
|
}
|
|
1405
1410
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1406
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: TextFieldComponent, isStandalone: true, selector: "ius-text-field", inputs: { label: "label", placeholder: "placeholder", required: ["required", "required", booleanAttribute], prefixIcon: "prefixIcon", showClear: "showClear", helpText: "helpText", errorText: "errorText", showHelpText: ["showHelpText", "showHelpText", booleanAttribute], showIconHelp: ["showIconHelp", "showIconHelp", booleanAttribute], iconHelpTitle: "iconHelpTitle", iconHelpContent: "iconHelpContent", error: ["error", "error", booleanAttribute], name: "name", autocomplete: "autocomplete", type: "type", size: "size", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { valueChange: "valueChange", cleared: "cleared" }, host: { properties: { "attr.data-size": "size !== 'medium' ? size : null", "attr.data-focused": "focused() || null", "attr.data-error": "error || null", "attr.data-disabled": "disabled || null" }, classAttribute: "ius-tf" }, providers: [
|
|
1411
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: TextFieldComponent, isStandalone: true, selector: "ius-text-field", inputs: { label: "label", placeholder: "placeholder", required: ["required", "required", booleanAttribute], prefixIcon: "prefixIcon", showClear: "showClear", helpText: "helpText", errorText: "errorText", showHelpText: ["showHelpText", "showHelpText", booleanAttribute], showIconHelp: ["showIconHelp", "showIconHelp", booleanAttribute], iconHelpTitle: "iconHelpTitle", iconHelpContent: "iconHelpContent", error: ["error", "error", booleanAttribute], name: "name", autocomplete: "autocomplete", type: "type", inputMode: "inputMode", maxLength: ["maxLength", "maxLength", numberAttribute], size: "size", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { valueChange: "valueChange", cleared: "cleared" }, host: { properties: { "attr.data-size": "size !== 'medium' ? size : null", "attr.data-focused": "focused() || null", "attr.data-error": "error || null", "attr.data-disabled": "disabled || null" }, classAttribute: "ius-tf" }, providers: [
|
|
1407
1412
|
{
|
|
1408
1413
|
provide: NG_VALUE_ACCESSOR,
|
|
1409
1414
|
useExisting: forwardRef(() => TextFieldComponent),
|
|
1410
1415
|
multi: true,
|
|
1411
1416
|
},
|
|
1412
|
-
], 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 [attr.autocomplete]=\"autocomplete || null\"\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 }); }
|
|
1417
|
+
], 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 [attr.autocomplete]=\"autocomplete || null\"\r\n [attr.inputmode]=\"inputMode || null\"\r\n [attr.maxlength]=\"maxLengthAttr\"\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 }); }
|
|
1413
1418
|
}
|
|
1414
1419
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TextFieldComponent, decorators: [{
|
|
1415
1420
|
type: Component,
|
|
@@ -1425,7 +1430,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
1425
1430
|
'[attr.data-focused]': 'focused() || null',
|
|
1426
1431
|
'[attr.data-error]': 'error || null',
|
|
1427
1432
|
'[attr.data-disabled]': 'disabled || null',
|
|
1428
|
-
}, 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 [attr.autocomplete]=\"autocomplete || null\"\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"] }]
|
|
1433
|
+
}, 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 [attr.autocomplete]=\"autocomplete || null\"\r\n [attr.inputmode]=\"inputMode || null\"\r\n [attr.maxlength]=\"maxLengthAttr\"\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"] }]
|
|
1429
1434
|
}], propDecorators: { label: [{
|
|
1430
1435
|
type: Input
|
|
1431
1436
|
}], placeholder: [{
|
|
@@ -1460,6 +1465,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
1460
1465
|
type: Input
|
|
1461
1466
|
}], type: [{
|
|
1462
1467
|
type: Input
|
|
1468
|
+
}], inputMode: [{
|
|
1469
|
+
type: Input
|
|
1470
|
+
}], maxLength: [{
|
|
1471
|
+
type: Input,
|
|
1472
|
+
args: [{ transform: numberAttribute }]
|
|
1463
1473
|
}], size: [{
|
|
1464
1474
|
type: Input
|
|
1465
1475
|
}], disabled: [{
|
|
@@ -3226,6 +3236,12 @@ class MenuItemComponent {
|
|
|
3226
3236
|
/** Texto de la fila (alternativa a proyectar contenido). */
|
|
3227
3237
|
this.label = input(/* @ts-ignore */
|
|
3228
3238
|
...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
3239
|
+
/**
|
|
3240
|
+
* Segunda línea bajo el texto, que sí parte en varias líneas — p. ej. la razón de una opción
|
|
3241
|
+
* deshabilitada. Sin ella la fila queda idéntica.
|
|
3242
|
+
*/
|
|
3243
|
+
this.description = input(/* @ts-ignore */
|
|
3244
|
+
...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
|
|
3229
3245
|
/** `number` → Insignia contador; `true` → punto; `null`/`false` → sin badge. */
|
|
3230
3246
|
this.badge = input(/* @ts-ignore */
|
|
3231
3247
|
...(ngDevMode ? [undefined, { debugName: "badge" }] : /* istanbul ignore next */ []));
|
|
@@ -3291,12 +3307,12 @@ class MenuItemComponent {
|
|
|
3291
3307
|
this.clicked.emit(event);
|
|
3292
3308
|
}
|
|
3293
3309
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3294
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: MenuItemComponent, isStandalone: true, selector: "ius-menu-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", 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 }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, danger: { classPropertyName: "danger", publicName: "danger", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, itemRole: { classPropertyName: "itemRole", publicName: "itemRole", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { classAttribute: "ius-menu-item-host" }, queries: [{ propertyName: "trailingRef", first: true, predicate: IusMenuItemTrailingDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<!--\r\n El elemento real de la fila es el `<a>`/`<button>` (host = display:contents).\r\n Solo una rama se instancia, as\u00ED que la proyecci\u00F3n del contenido vive en el\r\n template compartido `#row` y se monta una \u00FAnica vez.\r\n-->\r\n@if (isLink()) {\r\n <a\r\n class=\"ius-menuitem\"\r\n [href]=\"href()\"\r\n [attr.role]=\"itemRole() || null\"\r\n [attr.data-variant]=\"variant()\"\r\n [attr.data-size]=\"size() !== 'medium' ? size() : null\"\r\n [attr.data-selected]=\"selected() ? 'true' : null\"\r\n [attr.data-disabled]=\"disabled() ? 'true' : null\"\r\n [attr.data-danger]=\"danger() ? 'true' : null\"\r\n [attr.data-state]=\"state() || null\"\r\n [attr.aria-current]=\"selected() ? 'true' : null\"\r\n [attr.aria-label]=\"ariaLabel() || null\"\r\n (click)=\"onClick($event)\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"row\" />\r\n </a>\r\n} @else {\r\n <button\r\n type=\"button\"\r\n class=\"ius-menuitem\"\r\n [disabled]=\"disabled()\"\r\n [attr.role]=\"itemRole() || null\"\r\n [attr.data-variant]=\"variant()\"\r\n [attr.data-size]=\"size() !== 'medium' ? size() : null\"\r\n [attr.data-selected]=\"selected() ? 'true' : null\"\r\n [attr.data-disabled]=\"disabled() ? 'true' : null\"\r\n [attr.data-danger]=\"danger() ? 'true' : null\"\r\n [attr.data-state]=\"state() || null\"\r\n [attr.aria-current]=\"selected() ? 'true' : null\"\r\n [attr.aria-label]=\"ariaLabel() || null\"\r\n (click)=\"onClick($event)\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"row\" />\r\n </button>\r\n}\r\n\r\n<ng-template #row>\r\n @if (icon()) {\r\n <span class=\"ius-menuitem__icon\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ icon() }}</span>\r\n </span>\r\n }\r\n\r\n <span class=\"ius-menuitem__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 (hasBadge() || trailingRef()) {\r\n <span class=\"ius-menuitem__trailing\">\r\n @if (hasBadge()) {\r\n <ius-insignia\r\n [variant]=\"badgeVariant()\"\r\n [tone]=\"badgeTone()\"\r\n [count]=\"badgeCount()\"\r\n [size]=\"badgeVariant() === 'count' ? 'small' : 'medium'\"\r\n />\r\n }\r\n <ng-content select=\"[iusMenuItemTrailing]\" />\r\n </span>\r\n }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}.ius-menuitem{--_mi-icon: var(--ius-neutral-8);-webkit-user-select:none;user-select:none;--_mi-pad-y: 8px;--_mi-pad-x: 12px;--_mi-gap: var(--ius-space-xs);--_mi-icon-size: var(--ius-icon-md);--_mi-label: 14px;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:var(--_mi-gap);padding:var(--_mi-pad-y) var(--_mi-pad-x);background:transparent;border:0;border-radius:var(--ius-radius-md);cursor:pointer;font-family:var(--ius-font-body);color:var(--ius-text-primary);text-align:left;text-decoration:none;transition:background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-menuitem[data-size=small]{--_mi-pad-y: 6px;--_mi-pad-x: 10px;--_mi-gap: var(--ius-space-xs);--_mi-icon-size: var(--ius-icon-sm);--_mi-label: 13px}.ius-menuitem[data-size=large]{--_mi-pad-y: 11px;--_mi-pad-x: 14px;--_mi-gap: var(--ius-space-sm);--_mi-icon-size: var(--ius-icon-md);--_mi-label: 15px}.ius-menuitem__icon{flex:0 0 auto;display:inline-flex;color:var(--_mi-icon)}.ius-menuitem__icon .ius-icon{font-size:var(--_mi-icon-size);line-height:1}.ius-menuitem__label{flex:1 1 auto;min-width:0;font-size:var(--_mi-label);line-height:1.4;font-weight:var(--ius-fw-regular, 400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-menuitem__trailing{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xs);color:var(--ius-text-tertiary)}:host ::ng-deep .ius-menuitem__trailing .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-menuitem:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-menuitem[data-disabled=true]{cursor:default;opacity:.5;pointer-events:none}.ius-menuitem[data-variant=menu]{--_mi-icon: var(--ius-neutral-8)}.ius-menuitem[data-variant=menu]:hover,.ius-menuitem[data-variant=menu][data-state=hover]{background:var(--ius-neutral-5)}.ius-menuitem[data-variant=menu]:active,.ius-menuitem[data-variant=menu][data-state=pressed]{background:var(--ius-neutral-3)}.ius-menuitem[data-variant=menu][data-selected=true]{background:var(--ius-neutral-4)}.ius-menuitem[data-variant=menu][data-selected=true] .ius-menuitem__label{font-weight:var(--ius-fw-medium, 500)}.ius-menuitem[data-variant=menu][data-danger=true]{--_mi-icon: var(--ius-danger-500);color:var(--ius-danger-600)}.ius-menuitem[data-variant=menu][data-danger=true]:hover{background:color-mix(in srgb,var(--ius-danger-500) 10%,white)}.ius-menuitem[data-variant=rail]{--_mi-icon: var(--ius-success-500)}.ius-menuitem[data-variant=rail]:hover,.ius-menuitem[data-variant=rail][data-state=hover]{background:var(--ius-neutral-5)}.ius-menuitem[data-variant=rail][data-selected=true]{background:var(--ius-neutral-4)}.ius-menuitem[data-variant=rail][data-selected=true] .ius-menuitem__label{font-weight:var(--ius-fw-medium, 500)}.ius-menuitem[data-variant=rail]:active,.ius-menuitem[data-variant=rail][data-state=pressed]{--_mi-icon: var(--ius-neutral-white);background:var(--ius-success-500);color:var(--ius-neutral-white)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InsigniaComponent, selector: "ius-insignia", inputs: ["variant", "tone", "size", "label", "count", "max", "ring", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3310
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: MenuItemComponent, isStandalone: true, selector: "ius-menu-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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 }, danger: { classPropertyName: "danger", publicName: "danger", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, itemRole: { classPropertyName: "itemRole", publicName: "itemRole", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { classAttribute: "ius-menu-item-host" }, queries: [{ propertyName: "trailingRef", first: true, predicate: IusMenuItemTrailingDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<!--\r\n El elemento real de la fila es el `<a>`/`<button>` (host = display:contents).\r\n Solo una rama se instancia, as\u00ED que la proyecci\u00F3n del contenido vive en el\r\n template compartido `#row` y se monta una \u00FAnica vez.\r\n-->\r\n@if (isLink()) {\r\n <a\r\n class=\"ius-menuitem\"\r\n [href]=\"href()\"\r\n [attr.role]=\"itemRole() || null\"\r\n [attr.data-variant]=\"variant()\"\r\n [attr.data-size]=\"size() !== 'medium' ? size() : null\"\r\n [attr.data-selected]=\"selected() ? 'true' : null\"\r\n [attr.data-disabled]=\"disabled() ? 'true' : null\"\r\n [attr.data-danger]=\"danger() ? 'true' : null\"\r\n [attr.data-state]=\"state() || null\"\r\n [attr.aria-current]=\"selected() ? 'true' : null\"\r\n [attr.aria-label]=\"ariaLabel() || null\"\r\n (click)=\"onClick($event)\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"row\" />\r\n </a>\r\n} @else {\r\n <button\r\n type=\"button\"\r\n class=\"ius-menuitem\"\r\n [disabled]=\"disabled()\"\r\n [attr.role]=\"itemRole() || null\"\r\n [attr.data-variant]=\"variant()\"\r\n [attr.data-size]=\"size() !== 'medium' ? size() : null\"\r\n [attr.data-selected]=\"selected() ? 'true' : null\"\r\n [attr.data-disabled]=\"disabled() ? 'true' : null\"\r\n [attr.data-danger]=\"danger() ? 'true' : null\"\r\n [attr.data-state]=\"state() || null\"\r\n [attr.aria-current]=\"selected() ? 'true' : null\"\r\n [attr.aria-label]=\"ariaLabel() || null\"\r\n (click)=\"onClick($event)\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"row\" />\r\n </button>\r\n}\r\n\r\n<ng-template #row>\r\n @if (icon()) {\r\n <span class=\"ius-menuitem__icon\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ icon() }}</span>\r\n </span>\r\n }\r\n\r\n <span class=\"ius-menuitem__label\" [attr.data-described]=\"description() ? 'true' : null\">\r\n @if (label() != null) {\r\n {{ label() }}\r\n } @else {\r\n <ng-content />\r\n }\r\n @if (description()) {\r\n <span class=\"ius-menuitem__description\">{{ description() }}</span>\r\n }\r\n </span>\r\n\r\n @if (hasBadge() || trailingRef()) {\r\n <span class=\"ius-menuitem__trailing\">\r\n @if (hasBadge()) {\r\n <ius-insignia\r\n [variant]=\"badgeVariant()\"\r\n [tone]=\"badgeTone()\"\r\n [count]=\"badgeCount()\"\r\n [size]=\"badgeVariant() === 'count' ? 'small' : 'medium'\"\r\n />\r\n }\r\n <ng-content select=\"[iusMenuItemTrailing]\" />\r\n </span>\r\n }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}.ius-menuitem{--_mi-icon: var(--ius-neutral-8);-webkit-user-select:none;user-select:none;--_mi-pad-y: 8px;--_mi-pad-x: 12px;--_mi-gap: var(--ius-space-xs);--_mi-icon-size: var(--ius-icon-md);--_mi-label: 14px;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:var(--_mi-gap);padding:var(--_mi-pad-y) var(--_mi-pad-x);background:transparent;border:0;border-radius:var(--ius-radius-md);cursor:pointer;font-family:var(--ius-font-body);color:var(--ius-text-primary);text-align:left;text-decoration:none;transition:background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-menuitem[data-size=small]{--_mi-pad-y: 6px;--_mi-pad-x: 10px;--_mi-gap: var(--ius-space-xs);--_mi-icon-size: var(--ius-icon-sm);--_mi-label: 13px}.ius-menuitem[data-size=large]{--_mi-pad-y: 11px;--_mi-pad-x: 14px;--_mi-gap: var(--ius-space-sm);--_mi-icon-size: var(--ius-icon-md);--_mi-label: 15px}.ius-menuitem__icon{flex:0 0 auto;display:inline-flex;color:var(--_mi-icon)}.ius-menuitem__icon .ius-icon{font-size:var(--_mi-icon-size);line-height:1}.ius-menuitem__label{flex:1 1 auto;min-width:0;font-size:var(--_mi-label);line-height:1.4;font-weight:var(--ius-fw-regular, 400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-menuitem__description{display:block;margin-top:2px;font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);font-weight:var(--ius-fw-regular, 400);color:var(--ius-text-secondary);white-space:normal}.ius-menuitem__trailing{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xs);color:var(--ius-text-tertiary)}:host ::ng-deep .ius-menuitem__trailing .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-menuitem:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-menuitem[data-disabled=true]{cursor:default;opacity:.5;pointer-events:none}.ius-menuitem[data-variant=menu]{--_mi-icon: var(--ius-neutral-8)}.ius-menuitem[data-variant=menu]:hover,.ius-menuitem[data-variant=menu][data-state=hover]{background:var(--ius-neutral-5)}.ius-menuitem[data-variant=menu]:active,.ius-menuitem[data-variant=menu][data-state=pressed]{background:var(--ius-neutral-3)}.ius-menuitem[data-variant=menu][data-selected=true]{background:var(--ius-neutral-4)}.ius-menuitem[data-variant=menu][data-selected=true] .ius-menuitem__label{font-weight:var(--ius-fw-medium, 500)}.ius-menuitem[data-variant=menu][data-danger=true]{--_mi-icon: var(--ius-danger-500);color:var(--ius-danger-600)}.ius-menuitem[data-variant=menu][data-danger=true]:hover{background:color-mix(in srgb,var(--ius-danger-500) 10%,white)}.ius-menuitem[data-variant=rail]{--_mi-icon: var(--ius-success-500)}.ius-menuitem[data-variant=rail]:hover,.ius-menuitem[data-variant=rail][data-state=hover]{background:var(--ius-neutral-5)}.ius-menuitem[data-variant=rail][data-selected=true]{background:var(--ius-neutral-4)}.ius-menuitem[data-variant=rail][data-selected=true] .ius-menuitem__label{font-weight:var(--ius-fw-medium, 500)}.ius-menuitem[data-variant=rail]:active,.ius-menuitem[data-variant=rail][data-state=pressed]{--_mi-icon: var(--ius-neutral-white);background:var(--ius-success-500);color:var(--ius-neutral-white)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InsigniaComponent, selector: "ius-insignia", inputs: ["variant", "tone", "size", "label", "count", "max", "ring", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3295
3311
|
}
|
|
3296
3312
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MenuItemComponent, decorators: [{
|
|
3297
3313
|
type: Component,
|
|
3298
|
-
args: [{ selector: 'ius-menu-item', standalone: true, imports: [NgTemplateOutlet, InsigniaComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ius-menu-item-host' }, template: "<!--\r\n El elemento real de la fila es el `<a>`/`<button>` (host = display:contents).\r\n Solo una rama se instancia, as\u00ED que la proyecci\u00F3n del contenido vive en el\r\n template compartido `#row` y se monta una \u00FAnica vez.\r\n-->\r\n@if (isLink()) {\r\n <a\r\n class=\"ius-menuitem\"\r\n [href]=\"href()\"\r\n [attr.role]=\"itemRole() || null\"\r\n [attr.data-variant]=\"variant()\"\r\n [attr.data-size]=\"size() !== 'medium' ? size() : null\"\r\n [attr.data-selected]=\"selected() ? 'true' : null\"\r\n [attr.data-disabled]=\"disabled() ? 'true' : null\"\r\n [attr.data-danger]=\"danger() ? 'true' : null\"\r\n [attr.data-state]=\"state() || null\"\r\n [attr.aria-current]=\"selected() ? 'true' : null\"\r\n [attr.aria-label]=\"ariaLabel() || null\"\r\n (click)=\"onClick($event)\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"row\" />\r\n </a>\r\n} @else {\r\n <button\r\n type=\"button\"\r\n class=\"ius-menuitem\"\r\n [disabled]=\"disabled()\"\r\n [attr.role]=\"itemRole() || null\"\r\n [attr.data-variant]=\"variant()\"\r\n [attr.data-size]=\"size() !== 'medium' ? size() : null\"\r\n [attr.data-selected]=\"selected() ? 'true' : null\"\r\n [attr.data-disabled]=\"disabled() ? 'true' : null\"\r\n [attr.data-danger]=\"danger() ? 'true' : null\"\r\n [attr.data-state]=\"state() || null\"\r\n [attr.aria-current]=\"selected() ? 'true' : null\"\r\n [attr.aria-label]=\"ariaLabel() || null\"\r\n (click)=\"onClick($event)\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"row\" />\r\n </button>\r\n}\r\n\r\n<ng-template #row>\r\n @if (icon()) {\r\n <span class=\"ius-menuitem__icon\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ icon() }}</span>\r\n </span>\r\n }\r\n\r\n <span class=\"ius-menuitem__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 (hasBadge() || trailingRef()) {\r\n <span class=\"ius-menuitem__trailing\">\r\n @if (hasBadge()) {\r\n <ius-insignia\r\n [variant]=\"badgeVariant()\"\r\n [tone]=\"badgeTone()\"\r\n [count]=\"badgeCount()\"\r\n [size]=\"badgeVariant() === 'count' ? 'small' : 'medium'\"\r\n />\r\n }\r\n <ng-content select=\"[iusMenuItemTrailing]\" />\r\n </span>\r\n }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}.ius-menuitem{--_mi-icon: var(--ius-neutral-8);-webkit-user-select:none;user-select:none;--_mi-pad-y: 8px;--_mi-pad-x: 12px;--_mi-gap: var(--ius-space-xs);--_mi-icon-size: var(--ius-icon-md);--_mi-label: 14px;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:var(--_mi-gap);padding:var(--_mi-pad-y) var(--_mi-pad-x);background:transparent;border:0;border-radius:var(--ius-radius-md);cursor:pointer;font-family:var(--ius-font-body);color:var(--ius-text-primary);text-align:left;text-decoration:none;transition:background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-menuitem[data-size=small]{--_mi-pad-y: 6px;--_mi-pad-x: 10px;--_mi-gap: var(--ius-space-xs);--_mi-icon-size: var(--ius-icon-sm);--_mi-label: 13px}.ius-menuitem[data-size=large]{--_mi-pad-y: 11px;--_mi-pad-x: 14px;--_mi-gap: var(--ius-space-sm);--_mi-icon-size: var(--ius-icon-md);--_mi-label: 15px}.ius-menuitem__icon{flex:0 0 auto;display:inline-flex;color:var(--_mi-icon)}.ius-menuitem__icon .ius-icon{font-size:var(--_mi-icon-size);line-height:1}.ius-menuitem__label{flex:1 1 auto;min-width:0;font-size:var(--_mi-label);line-height:1.4;font-weight:var(--ius-fw-regular, 400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-menuitem__trailing{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xs);color:var(--ius-text-tertiary)}:host ::ng-deep .ius-menuitem__trailing .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-menuitem:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-menuitem[data-disabled=true]{cursor:default;opacity:.5;pointer-events:none}.ius-menuitem[data-variant=menu]{--_mi-icon: var(--ius-neutral-8)}.ius-menuitem[data-variant=menu]:hover,.ius-menuitem[data-variant=menu][data-state=hover]{background:var(--ius-neutral-5)}.ius-menuitem[data-variant=menu]:active,.ius-menuitem[data-variant=menu][data-state=pressed]{background:var(--ius-neutral-3)}.ius-menuitem[data-variant=menu][data-selected=true]{background:var(--ius-neutral-4)}.ius-menuitem[data-variant=menu][data-selected=true] .ius-menuitem__label{font-weight:var(--ius-fw-medium, 500)}.ius-menuitem[data-variant=menu][data-danger=true]{--_mi-icon: var(--ius-danger-500);color:var(--ius-danger-600)}.ius-menuitem[data-variant=menu][data-danger=true]:hover{background:color-mix(in srgb,var(--ius-danger-500) 10%,white)}.ius-menuitem[data-variant=rail]{--_mi-icon: var(--ius-success-500)}.ius-menuitem[data-variant=rail]:hover,.ius-menuitem[data-variant=rail][data-state=hover]{background:var(--ius-neutral-5)}.ius-menuitem[data-variant=rail][data-selected=true]{background:var(--ius-neutral-4)}.ius-menuitem[data-variant=rail][data-selected=true] .ius-menuitem__label{font-weight:var(--ius-fw-medium, 500)}.ius-menuitem[data-variant=rail]:active,.ius-menuitem[data-variant=rail][data-state=pressed]{--_mi-icon: var(--ius-neutral-white);background:var(--ius-success-500);color:var(--ius-neutral-white)}\n"] }]
|
|
3299
|
-
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], danger: [{ type: i0.Input, args: [{ isSignal: true, alias: "danger", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], itemRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemRole", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], trailingRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusMenuItemTrailingDirective), { isSignal: true }] }] } });
|
|
3314
|
+
args: [{ selector: 'ius-menu-item', standalone: true, imports: [NgTemplateOutlet, InsigniaComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ius-menu-item-host' }, template: "<!--\r\n El elemento real de la fila es el `<a>`/`<button>` (host = display:contents).\r\n Solo una rama se instancia, as\u00ED que la proyecci\u00F3n del contenido vive en el\r\n template compartido `#row` y se monta una \u00FAnica vez.\r\n-->\r\n@if (isLink()) {\r\n <a\r\n class=\"ius-menuitem\"\r\n [href]=\"href()\"\r\n [attr.role]=\"itemRole() || null\"\r\n [attr.data-variant]=\"variant()\"\r\n [attr.data-size]=\"size() !== 'medium' ? size() : null\"\r\n [attr.data-selected]=\"selected() ? 'true' : null\"\r\n [attr.data-disabled]=\"disabled() ? 'true' : null\"\r\n [attr.data-danger]=\"danger() ? 'true' : null\"\r\n [attr.data-state]=\"state() || null\"\r\n [attr.aria-current]=\"selected() ? 'true' : null\"\r\n [attr.aria-label]=\"ariaLabel() || null\"\r\n (click)=\"onClick($event)\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"row\" />\r\n </a>\r\n} @else {\r\n <button\r\n type=\"button\"\r\n class=\"ius-menuitem\"\r\n [disabled]=\"disabled()\"\r\n [attr.role]=\"itemRole() || null\"\r\n [attr.data-variant]=\"variant()\"\r\n [attr.data-size]=\"size() !== 'medium' ? size() : null\"\r\n [attr.data-selected]=\"selected() ? 'true' : null\"\r\n [attr.data-disabled]=\"disabled() ? 'true' : null\"\r\n [attr.data-danger]=\"danger() ? 'true' : null\"\r\n [attr.data-state]=\"state() || null\"\r\n [attr.aria-current]=\"selected() ? 'true' : null\"\r\n [attr.aria-label]=\"ariaLabel() || null\"\r\n (click)=\"onClick($event)\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"row\" />\r\n </button>\r\n}\r\n\r\n<ng-template #row>\r\n @if (icon()) {\r\n <span class=\"ius-menuitem__icon\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ icon() }}</span>\r\n </span>\r\n }\r\n\r\n <span class=\"ius-menuitem__label\" [attr.data-described]=\"description() ? 'true' : null\">\r\n @if (label() != null) {\r\n {{ label() }}\r\n } @else {\r\n <ng-content />\r\n }\r\n @if (description()) {\r\n <span class=\"ius-menuitem__description\">{{ description() }}</span>\r\n }\r\n </span>\r\n\r\n @if (hasBadge() || trailingRef()) {\r\n <span class=\"ius-menuitem__trailing\">\r\n @if (hasBadge()) {\r\n <ius-insignia\r\n [variant]=\"badgeVariant()\"\r\n [tone]=\"badgeTone()\"\r\n [count]=\"badgeCount()\"\r\n [size]=\"badgeVariant() === 'count' ? 'small' : 'medium'\"\r\n />\r\n }\r\n <ng-content select=\"[iusMenuItemTrailing]\" />\r\n </span>\r\n }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}.ius-menuitem{--_mi-icon: var(--ius-neutral-8);-webkit-user-select:none;user-select:none;--_mi-pad-y: 8px;--_mi-pad-x: 12px;--_mi-gap: var(--ius-space-xs);--_mi-icon-size: var(--ius-icon-md);--_mi-label: 14px;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:var(--_mi-gap);padding:var(--_mi-pad-y) var(--_mi-pad-x);background:transparent;border:0;border-radius:var(--ius-radius-md);cursor:pointer;font-family:var(--ius-font-body);color:var(--ius-text-primary);text-align:left;text-decoration:none;transition:background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-menuitem[data-size=small]{--_mi-pad-y: 6px;--_mi-pad-x: 10px;--_mi-gap: var(--ius-space-xs);--_mi-icon-size: var(--ius-icon-sm);--_mi-label: 13px}.ius-menuitem[data-size=large]{--_mi-pad-y: 11px;--_mi-pad-x: 14px;--_mi-gap: var(--ius-space-sm);--_mi-icon-size: var(--ius-icon-md);--_mi-label: 15px}.ius-menuitem__icon{flex:0 0 auto;display:inline-flex;color:var(--_mi-icon)}.ius-menuitem__icon .ius-icon{font-size:var(--_mi-icon-size);line-height:1}.ius-menuitem__label{flex:1 1 auto;min-width:0;font-size:var(--_mi-label);line-height:1.4;font-weight:var(--ius-fw-regular, 400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-menuitem__description{display:block;margin-top:2px;font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);font-weight:var(--ius-fw-regular, 400);color:var(--ius-text-secondary);white-space:normal}.ius-menuitem__trailing{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xs);color:var(--ius-text-tertiary)}:host ::ng-deep .ius-menuitem__trailing .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-menuitem:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-menuitem[data-disabled=true]{cursor:default;opacity:.5;pointer-events:none}.ius-menuitem[data-variant=menu]{--_mi-icon: var(--ius-neutral-8)}.ius-menuitem[data-variant=menu]:hover,.ius-menuitem[data-variant=menu][data-state=hover]{background:var(--ius-neutral-5)}.ius-menuitem[data-variant=menu]:active,.ius-menuitem[data-variant=menu][data-state=pressed]{background:var(--ius-neutral-3)}.ius-menuitem[data-variant=menu][data-selected=true]{background:var(--ius-neutral-4)}.ius-menuitem[data-variant=menu][data-selected=true] .ius-menuitem__label{font-weight:var(--ius-fw-medium, 500)}.ius-menuitem[data-variant=menu][data-danger=true]{--_mi-icon: var(--ius-danger-500);color:var(--ius-danger-600)}.ius-menuitem[data-variant=menu][data-danger=true]:hover{background:color-mix(in srgb,var(--ius-danger-500) 10%,white)}.ius-menuitem[data-variant=rail]{--_mi-icon: var(--ius-success-500)}.ius-menuitem[data-variant=rail]:hover,.ius-menuitem[data-variant=rail][data-state=hover]{background:var(--ius-neutral-5)}.ius-menuitem[data-variant=rail][data-selected=true]{background:var(--ius-neutral-4)}.ius-menuitem[data-variant=rail][data-selected=true] .ius-menuitem__label{font-weight:var(--ius-fw-medium, 500)}.ius-menuitem[data-variant=rail]:active,.ius-menuitem[data-variant=rail][data-state=pressed]{--_mi-icon: var(--ius-neutral-white);background:var(--ius-success-500);color:var(--ius-neutral-white)}\n"] }]
|
|
3315
|
+
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], danger: [{ type: i0.Input, args: [{ isSignal: true, alias: "danger", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], itemRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemRole", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], trailingRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusMenuItemTrailingDirective), { isSignal: true }] }] } });
|
|
3300
3316
|
|
|
3301
3317
|
/**
|
|
3302
3318
|
* Menu — Ius Design v2 (familia overlays). **SUPERFICIE compartida de menú.**
|
|
@@ -3377,7 +3393,7 @@ class MenuComponent {
|
|
|
3377
3393
|
this.itemClick.emit({ item, event });
|
|
3378
3394
|
}
|
|
3379
3395
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3380
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: MenuComponent, isStandalone: true, selector: "ius-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", itemClick: "itemClick" }, host: { attributes: { "role": "menu" }, properties: { "attr.aria-label": "ariaLabel() || null" }, classAttribute: "ius-menu" }, ngImport: i0, template: "@if (label()) {\r\n <div class=\"ius-menu__label\">{{ label() }}</div>\r\n}\r\n\r\n@for (row of rows(); track row.key) {\r\n @if (row.kind === 'separator') {\r\n <div class=\"ius-menu__sep\" role=\"separator\"></div>\r\n } @else {\r\n <ius-menu-item\r\n variant=\"menu\"\r\n size=\"small\"\r\n itemRole=\"menuitem\"\r\n [icon]=\"row.item!.icon\"\r\n [label]=\"row.item!.label\"\r\n [danger]=\"!!row.item!.danger\"\r\n [disabled]=\"!!row.item!.disabled\"\r\n [selected]=\"!!row.selected\"\r\n (clicked)=\"onItemClick(row, $event)\"\r\n >\r\n <!-- selectable \u2192 carril fijo del check; si no, el trailing de la opci\u00F3n -->\r\n @if (selectable()) {\r\n <span class=\"ius-menu__check\" iusMenuItemTrailing>\r\n @if (row.selected) {\r\n <span translate=\"no\" class=\"ius-icon\">check</span>\r\n }\r\n </span>\r\n } @else if (trailingTpl(row.item!)) {\r\n <span iusMenuItemTrailing>\r\n <ng-container [ngTemplateOutlet]=\"trailingTpl(row.item!)!\" />\r\n </span>\r\n } @else if (trailingText(row.item!)) {\r\n <span iusMenuItemTrailing>{{ trailingText(row.item!) }}</span>\r\n }\r\n </ius-menu-item>\r\n }\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:180px;max-width:320px}.ius-menu__sep{height:1px;background:var(--ius-stroke);margin:var(--ius-space-xxs) 0}.ius-menu__label{padding:var(--ius-space-xs) var(--ius-space-xs) var(--ius-space-xxs);font:var(--ius-fw-semibold) var(--ius-fs-sm)/1.2 var(--ius-font-display);letter-spacing:.05em;text-transform:uppercase;color:var(--ius-text-tertiary)}.ius-menu__check{flex:0 0 auto;width:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--ius-primary-700)}.ius-menu__check .ius-icon{font-size:var(--ius-icon-md)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MenuItemComponent, selector: "ius-menu-item", inputs: ["icon", "label", "badge", "variant", "size", "selected", "disabled", "danger", "state", "href", "ariaLabel", "itemRole"], outputs: ["clicked"] }, { kind: "directive", type: IusMenuItemTrailingDirective, selector: "[iusMenuItemTrailing]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3396
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: MenuComponent, isStandalone: true, selector: "ius-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", itemClick: "itemClick" }, host: { attributes: { "role": "menu" }, properties: { "attr.aria-label": "ariaLabel() || null" }, classAttribute: "ius-menu" }, ngImport: i0, template: "@if (label()) {\r\n <div class=\"ius-menu__label\">{{ label() }}</div>\r\n}\r\n\r\n@for (row of rows(); track row.key) {\r\n @if (row.kind === 'separator') {\r\n <div class=\"ius-menu__sep\" role=\"separator\"></div>\r\n } @else {\r\n <ius-menu-item\r\n variant=\"menu\"\r\n size=\"small\"\r\n itemRole=\"menuitem\"\r\n [icon]=\"row.item!.icon\"\r\n [label]=\"row.item!.label\"\r\n [description]=\"row.item!.description\"\r\n [danger]=\"!!row.item!.danger\"\r\n [disabled]=\"!!row.item!.disabled\"\r\n [selected]=\"!!row.selected\"\r\n (clicked)=\"onItemClick(row, $event)\"\r\n >\r\n <!-- selectable \u2192 carril fijo del check; si no, el trailing de la opci\u00F3n -->\r\n @if (selectable()) {\r\n <span class=\"ius-menu__check\" iusMenuItemTrailing>\r\n @if (row.selected) {\r\n <span translate=\"no\" class=\"ius-icon\">check</span>\r\n }\r\n </span>\r\n } @else if (trailingTpl(row.item!)) {\r\n <span iusMenuItemTrailing>\r\n <ng-container [ngTemplateOutlet]=\"trailingTpl(row.item!)!\" />\r\n </span>\r\n } @else if (trailingText(row.item!)) {\r\n <span iusMenuItemTrailing>{{ trailingText(row.item!) }}</span>\r\n }\r\n </ius-menu-item>\r\n }\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:180px;max-width:320px}.ius-menu__sep{height:1px;background:var(--ius-stroke);margin:var(--ius-space-xxs) 0}.ius-menu__label{padding:var(--ius-space-xs) var(--ius-space-xs) var(--ius-space-xxs);font:var(--ius-fw-semibold) var(--ius-fs-sm)/1.2 var(--ius-font-display);letter-spacing:.05em;text-transform:uppercase;color:var(--ius-text-tertiary)}.ius-menu__check{flex:0 0 auto;width:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--ius-primary-700)}.ius-menu__check .ius-icon{font-size:var(--ius-icon-md)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MenuItemComponent, selector: "ius-menu-item", inputs: ["icon", "label", "description", "badge", "variant", "size", "selected", "disabled", "danger", "state", "href", "ariaLabel", "itemRole"], outputs: ["clicked"] }, { kind: "directive", type: IusMenuItemTrailingDirective, selector: "[iusMenuItemTrailing]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3381
3397
|
}
|
|
3382
3398
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MenuComponent, decorators: [{
|
|
3383
3399
|
type: Component,
|
|
@@ -3385,7 +3401,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
3385
3401
|
class: 'ius-menu',
|
|
3386
3402
|
role: 'menu',
|
|
3387
3403
|
'[attr.aria-label]': 'ariaLabel() || null',
|
|
3388
|
-
}, template: "@if (label()) {\r\n <div class=\"ius-menu__label\">{{ label() }}</div>\r\n}\r\n\r\n@for (row of rows(); track row.key) {\r\n @if (row.kind === 'separator') {\r\n <div class=\"ius-menu__sep\" role=\"separator\"></div>\r\n } @else {\r\n <ius-menu-item\r\n variant=\"menu\"\r\n size=\"small\"\r\n itemRole=\"menuitem\"\r\n [icon]=\"row.item!.icon\"\r\n [label]=\"row.item!.label\"\r\n [danger]=\"!!row.item!.danger\"\r\n [disabled]=\"!!row.item!.disabled\"\r\n [selected]=\"!!row.selected\"\r\n (clicked)=\"onItemClick(row, $event)\"\r\n >\r\n <!-- selectable \u2192 carril fijo del check; si no, el trailing de la opci\u00F3n -->\r\n @if (selectable()) {\r\n <span class=\"ius-menu__check\" iusMenuItemTrailing>\r\n @if (row.selected) {\r\n <span translate=\"no\" class=\"ius-icon\">check</span>\r\n }\r\n </span>\r\n } @else if (trailingTpl(row.item!)) {\r\n <span iusMenuItemTrailing>\r\n <ng-container [ngTemplateOutlet]=\"trailingTpl(row.item!)!\" />\r\n </span>\r\n } @else if (trailingText(row.item!)) {\r\n <span iusMenuItemTrailing>{{ trailingText(row.item!) }}</span>\r\n }\r\n </ius-menu-item>\r\n }\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:180px;max-width:320px}.ius-menu__sep{height:1px;background:var(--ius-stroke);margin:var(--ius-space-xxs) 0}.ius-menu__label{padding:var(--ius-space-xs) var(--ius-space-xs) var(--ius-space-xxs);font:var(--ius-fw-semibold) var(--ius-fs-sm)/1.2 var(--ius-font-display);letter-spacing:.05em;text-transform:uppercase;color:var(--ius-text-tertiary)}.ius-menu__check{flex:0 0 auto;width:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--ius-primary-700)}.ius-menu__check .ius-icon{font-size:var(--ius-icon-md)}\n"] }]
|
|
3404
|
+
}, template: "@if (label()) {\r\n <div class=\"ius-menu__label\">{{ label() }}</div>\r\n}\r\n\r\n@for (row of rows(); track row.key) {\r\n @if (row.kind === 'separator') {\r\n <div class=\"ius-menu__sep\" role=\"separator\"></div>\r\n } @else {\r\n <ius-menu-item\r\n variant=\"menu\"\r\n size=\"small\"\r\n itemRole=\"menuitem\"\r\n [icon]=\"row.item!.icon\"\r\n [label]=\"row.item!.label\"\r\n [description]=\"row.item!.description\"\r\n [danger]=\"!!row.item!.danger\"\r\n [disabled]=\"!!row.item!.disabled\"\r\n [selected]=\"!!row.selected\"\r\n (clicked)=\"onItemClick(row, $event)\"\r\n >\r\n <!-- selectable \u2192 carril fijo del check; si no, el trailing de la opci\u00F3n -->\r\n @if (selectable()) {\r\n <span class=\"ius-menu__check\" iusMenuItemTrailing>\r\n @if (row.selected) {\r\n <span translate=\"no\" class=\"ius-icon\">check</span>\r\n }\r\n </span>\r\n } @else if (trailingTpl(row.item!)) {\r\n <span iusMenuItemTrailing>\r\n <ng-container [ngTemplateOutlet]=\"trailingTpl(row.item!)!\" />\r\n </span>\r\n } @else if (trailingText(row.item!)) {\r\n <span iusMenuItemTrailing>{{ trailingText(row.item!) }}</span>\r\n }\r\n </ius-menu-item>\r\n }\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:180px;max-width:320px}.ius-menu__sep{height:1px;background:var(--ius-stroke);margin:var(--ius-space-xxs) 0}.ius-menu__label{padding:var(--ius-space-xs) var(--ius-space-xs) var(--ius-space-xxs);font:var(--ius-fw-semibold) var(--ius-fs-sm)/1.2 var(--ius-font-display);letter-spacing:.05em;text-transform:uppercase;color:var(--ius-text-tertiary)}.ius-menu__check{flex:0 0 auto;width:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--ius-primary-700)}.ius-menu__check .ius-icon{font-size:var(--ius-icon-md)}\n"] }]
|
|
3389
3405
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
|
|
3390
3406
|
|
|
3391
3407
|
/**
|
|
@@ -4351,7 +4367,7 @@ class UserMenuComponent {
|
|
|
4351
4367
|
this.timers = [];
|
|
4352
4368
|
}
|
|
4353
4369
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: UserMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4354
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: UserMenuComponent, isStandalone: true, selector: "ius-user-menu", inputs: { account: "account", user: "user", services: "services", collapsedCount: ["collapsedCount", "collapsedCount", numberAttribute], defaultExpanded: ["defaultExpanded", "defaultExpanded", booleanAttribute], menu: "menu", accounts: "accounts", open: ["open", "open", booleanAttribute], inline: ["inline", "inline", booleanAttribute], scrim: ["scrim", "scrim", booleanAttribute], closeOnScrim: ["closeOnScrim", "closeOnScrim", booleanAttribute], closeOnEsc: ["closeOnEsc", "closeOnEsc", booleanAttribute], offsetTop: ["offsetTop", "offsetTop", numberAttribute], origin: "origin" }, outputs: { profile: "profile", selectAccount: "selectAccount", createAccount: "createAccount", switchAccount: "switchAccount", logout: "logout", closed: "closed" }, queries: [{ propertyName: "footerSlot", first: true, predicate: IusUserMenuFooterDirective, descendants: true }], viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true }], ngImport: i0, template: "<!-- PRIMERO y al nivel ra\u00EDz: el `ViewChild` est\u00E1tico que lo portalea al overlay\r\n no resuelve una plantilla declarada dentro de un bloque de control flow.\r\n Solo se instancia al adjuntarse. -->\r\n<ng-template #tpl>\r\n @if (scrim) {\r\n <div\r\n class=\"ius-oum-scrim\"\r\n [attr.data-visible]=\"visible() ? 'true' : null\"\r\n [style]=\"estilosScrim\"\r\n (click)=\"onScrimClick()\"\r\n ></div>\r\n }\r\n <div\r\n class=\"ius-oum\"\r\n role=\"menu\"\r\n [attr.data-origin]=\"origenEfectivo\"\r\n [attr.data-visible]=\"visible() ? 'true' : null\"\r\n [attr.data-settled]=\"asentado() ? 'true' : null\"\r\n [style]=\"estilosPanel\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"panelTpl\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Encabezado y cuerpo son los mismos en modo overlay y en modo inline. -->\r\n<ng-template #panelTpl>\r\n <div class=\"ius-oum__head\">\r\n <div class=\"ius-oum__account\">\r\n <ius-avatar\r\n size=\"medium\"\r\n shape=\"square\"\r\n [src]=\"cuenta.avatar\"\r\n [name]=\"nombreMedallon\"\r\n [monogram]=\"cuenta.monogram\"\r\n [icon]=\"iconoCuenta\"\r\n [color]=\"cuenta.color ?? 'info'\"\r\n [ariaLabel]=\"cuenta.name\"\r\n ></ius-avatar>\r\n\r\n <div class=\"ius-oum__acctgroup\">\r\n <span class=\"ius-oum__nav-label\">Est\u00E1s navegando en</span>\r\n <span class=\"ius-oum__account-name\">{{ cuenta.name }}</span>\r\n @if (cuenta.role != null) {\r\n <span class=\"ius-oum__row\">Tu rol <b>{{ cuenta.role }}</b></span>\r\n }\r\n </div>\r\n\r\n @if (cuenta.id != null) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-oum__id\"\r\n [attr.aria-label]=\"copiado() ? 'ID copiado' : 'Copiar ID de cuenta'\"\r\n (click)=\"onCopiarId()\"\r\n >\r\n ID <b>{{ cuenta.id }}</b>\r\n <span translate=\"no\" class=\"ius-icon\">{{ copiado() ? 'check' : 'content_copy' }}</span>\r\n </button>\r\n }\r\n </div>\r\n\r\n @if (usuario.email != null) {\r\n <div class=\"ius-oum__meta\">\r\n <span class=\"ius-oum__email\">\r\n <span translate=\"no\" class=\"ius-icon\">alternate_email</span>\r\n <span>{{ usuario.email }}</span>\r\n </span>\r\n </div>\r\n }\r\n </div>\r\n\r\n <ius-divider></ius-divider>\r\n\r\n @if (vista() === 'switch') {\r\n <div class=\"ius-oum__body ius-scroll ius-scroll--sm\">\r\n <div class=\"ius-oum__switch\">\r\n <span class=\"ius-oum__section\">Cambiar a</span>\r\n @for (opcion of accounts; track opcion.id ?? $index) {\r\n <ius-account-item\r\n [name]=\"opcion.name\"\r\n [subtitle]=\"opcion.subtitle\"\r\n [avatar]=\"opcion.avatar\"\r\n [icon]=\"opcion.icon\"\r\n [monogram]=\"opcion.monogram\"\r\n [color]=\"opcion.color ?? 'auto'\"\r\n [shape]=\"opcion.shape ?? 'circle'\"\r\n [selected]=\"opcion.selected ?? false\"\r\n [disabled]=\"opcion.disabled ?? false\"\r\n [actions]=\"opcion.actions ?? []\"\r\n (clicked)=\"onElegirCuenta(opcion, $index, $event)\"\r\n ></ius-account-item>\r\n }\r\n @if (createAccount.observed) {\r\n <div class=\"ius-oum__create\">\r\n <ius-text-button\r\n size=\"small\"\r\n prefixIcon=\"add\"\r\n label=\"Crear nueva cuenta\"\r\n (clicked)=\"createAccount.emit($event)\"\r\n ></ius-text-button>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"ius-oum__footer\">\r\n <ius-menu-item\r\n variant=\"menu\"\r\n size=\"small\"\r\n icon=\"arrow_back\"\r\n label=\"Volver al men\u00FA de usuario\"\r\n (clicked)=\"onVolver()\"\r\n ></ius-menu-item>\r\n @if (logout.observed) {\r\n <ius-menu-item\r\n variant=\"menu\"\r\n size=\"small\"\r\n icon=\"logout\"\r\n label=\"Cerrar sesi\u00F3n\"\r\n (clicked)=\"logout.emit($event)\"\r\n ></ius-menu-item>\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"ius-oum__body ius-scroll ius-scroll--sm\">\r\n @if (services.length) {\r\n <div class=\"ius-oum__usage\">\r\n @for (svc of consumosVisibles; track $index) {\r\n <ius-plan-usage-item\r\n [divided]=\"true\"\r\n [animateDelay]=\"360\"\r\n [service]=\"svc.service\"\r\n [plan]=\"svc.plan\"\r\n [planHelp]=\"svc.planHelp\"\r\n [status]=\"svc.status ?? 'active'\"\r\n [total]=\"svc.total\"\r\n [available]=\"svc.available\"\r\n [segments]=\"svc.segments\"\r\n [barSize]=\"svc.barSize ?? 'medium'\"\r\n [legend]=\"svc.legend ?? 'popover'\"\r\n [note]=\"svc.note\"\r\n ></ius-plan-usage-item>\r\n }\r\n </div>\r\n }\r\n\r\n @if (puedeExpandir) {\r\n <ius-show-more\r\n [expanded]=\"expandido()\"\r\n [remaining]=\"restantes\"\r\n align=\"center\"\r\n (toggle)=\"onToggleConsumos()\"\r\n ></ius-show-more>\r\n }\r\n\r\n @if (menu.length) {\r\n <ius-divider></ius-divider>\r\n <div class=\"ius-oum__actions\">\r\n @for (item of menu; track item.key ?? $index) {\r\n <ius-menu-item\r\n variant=\"menu\"\r\n size=\"small\"\r\n [icon]=\"item.icon\"\r\n [label]=\"item.label\"\r\n [danger]=\"item.danger ?? false\"\r\n [disabled]=\"item.disabled ?? false\"\r\n (clicked)=\"onItemMenu(item, $event)\"\r\n ></ius-menu-item>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (hayPie) {\r\n <div class=\"ius-oum__footer\">\r\n <ng-content select=\"[iusUserMenuFooter]\" />\r\n\r\n @if (!footerSlot && profile.observed) {\r\n <ius-menu-item\r\n variant=\"menu\"\r\n size=\"small\"\r\n icon=\"manage_accounts\"\r\n label=\"Perfil, preferencias y seguridad\"\r\n (clicked)=\"profile.emit($event)\"\r\n ></ius-menu-item>\r\n }\r\n @if (!footerSlot && puedeCambiar) {\r\n <ius-menu-item\r\n variant=\"menu\"\r\n size=\"small\"\r\n icon=\"swap_horiz\"\r\n label=\"Cambiar de cuenta\"\r\n (clicked)=\"onCambiarCuenta($event)\"\r\n ></ius-menu-item>\r\n }\r\n @if (!footerSlot && logout.observed) {\r\n <ius-menu-item\r\n variant=\"menu\"\r\n size=\"small\"\r\n icon=\"logout\"\r\n label=\"Cerrar sesi\u00F3n\"\r\n (clicked)=\"logout.emit($event)\"\r\n ></ius-menu-item>\r\n }\r\n </div>\r\n }\r\n }\r\n</ng-template>\r\n\r\n@if (inline) {\r\n <div class=\"ius-oum\" role=\"menu\" data-inline=\"true\" data-visible=\"true\" data-settled=\"true\">\r\n <ng-container [ngTemplateOutlet]=\"panelTpl\"></ng-container>\r\n </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}.ius-oum-scrim{position:fixed;inset:0;background:#26262673;opacity:0;transition:opacity .26s var(--ius-ease-standard);z-index:var(--ius-z-overlay)}.ius-oum-scrim[data-visible=true]{opacity:1}.ius-oum{box-sizing:border-box;-webkit-user-select:none;user-select:none;width:min(380px,100vw);display:flex;flex-direction:column;background:var(--ius-surface-card);font-family:var(--ius-font-body)}.ius-oum:not([data-inline=true]){position:fixed;top:0;right:0;bottom:0;z-index:calc(var(--ius-z-overlay) + 1);border-radius:var(--ius-radius-lg) 0 0 var(--ius-radius-lg);box-shadow:var(--ius-elevation-400);transform:translate(100%);transition:transform .26s var(--ius-ease-decelerate, cubic-bezier(0, 0, .2, 1));will-change:transform}.ius-oum[data-visible=true]{transform:translate(0)}.ius-oum[data-origin=top-right]:not([data-inline=true]){right:var(--ius-space-xs);bottom:auto;height:calc(100vh - var(--_oum-top, 0px) - var(--ius-space-md));border-radius:var(--ius-radius-lg);box-shadow:var(--ius-elevation-300);transform-origin:top right;transform:scale(.96) translateY(calc(-1 * var(--ius-space-xs)));opacity:0;transition:transform .18s var(--ius-ease-decelerate, cubic-bezier(0, 0, .2, 1)),opacity .14s var(--ius-ease-standard)}.ius-oum[data-origin=top-right][data-visible=true]:not([data-inline=true]){transform:none;opacity:1}.ius-oum[data-settled=true]:not([data-inline=true]){transform:none;will-change:auto}.ius-oum[data-inline=true]{position:relative;height:100%;border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);box-shadow:var(--ius-elevation-300)}@media(max-width:480px){.ius-oum:not([data-inline=true]):not([data-origin=top-right]){width:100vw;border-radius:0}.ius-oum[data-origin=top-right]:not([data-inline=true]){width:calc(100vw - 2 * var(--ius-space-xs))}}@media(prefers-reduced-motion:reduce){.ius-oum:not([data-inline=true]),.ius-oum-scrim{transition:none}}.ius-oum__head{padding:var(--ius-space-md) var(--ius-space-md) var(--ius-space-sm);display:flex;flex-direction:column;gap:var(--ius-space-xs)}.ius-oum__account{display:flex;align-items:center;gap:var(--ius-space-xs)}.ius-oum__acctgroup{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}.ius-oum__nav-label{font-size:var(--ius-fs-sm);line-height:1.3;color:var(--ius-text-tertiary)}.ius-oum__account-name{font-family:var(--ius-font-display);font-size:var(--ius-fs-lg);font-weight:var(--ius-fw-semibold);line-height:1.3;color:var(--ius-text-primary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-oum__id{flex:0 0 auto;align-self:flex-start;margin-top:1px;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);white-space:nowrap;font-size:var(--ius-fs-sm);color:var(--ius-text-secondary);background:var(--ius-neutral-2);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-sm);padding:var(--ius-space-xxs) var(--ius-space-xs);font-variant-numeric:tabular-nums;appearance:none;cursor:pointer;font-family:var(--ius-font-body);transition:background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-oum__id b{color:var(--ius-text-primary);font-weight:var(--ius-fw-medium)}.ius-oum__id .ius-icon{font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary);margin-left:1px}.ius-oum__id:hover{background:var(--ius-neutral-3)}.ius-oum__id:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-oum__meta{display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-oum__row{font-size:var(--ius-fs-sm);color:var(--ius-text-secondary)}.ius-oum__row b{color:var(--ius-text-primary);font-weight:var(--ius-fw-semibold)}.ius-oum__email{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-size:var(--ius-fs-sm);color:var(--ius-text-secondary);min-width:0}.ius-oum__email .ius-icon{font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary);flex:0 0 auto}.ius-oum__email span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-oum__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}.ius-oum__usage{padding:var(--ius-space-xxs) var(--ius-space-md)}.ius-oum__actions{padding:var(--ius-space-xs);display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-oum__switch{display:flex;flex-direction:column}.ius-oum__section{font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary);padding:var(--ius-space-sm) var(--ius-space-md) var(--ius-space-xs)}.ius-oum__switch ius-account-item{margin:0 var(--ius-space-md);width:auto}.ius-oum__switch ius-account-item+ius-account-item{margin-top:var(--ius-space-xs)}.ius-oum__create{display:flex;justify-content:center;padding:var(--ius-space-sm) var(--ius-space-md)}.ius-oum__footer{flex:0 0 auto;border-top:1px solid var(--ius-stroke);padding:var(--ius-space-xs);display:flex;flex-direction:column;gap:var(--ius-space-xxs)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AccountItemComponent, selector: "ius-account-item", inputs: ["name", "subtitle", "avatar", "icon", "monogram", "color", "shape", "selected", "disabled", "actions", "actionsLabel", "state", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: AvatarComponent, selector: "ius-avatar", inputs: ["alt", "name", "monogram", "icon", "shape", "size", "color", "editable", "editIcon", "ariaLabel", "src"], outputs: ["edit"] }, { kind: "component", type: DividerComponent, selector: "ius-divider", inputs: ["orientation", "variant", "textAlign"] }, { 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: PlanUsageItemComponent, selector: "ius-plan-usage-item", inputs: ["service", "plan", "planHelp", "status", "total", "available", "segments", "barSize", "legend", "note", "actions", "maxInlineActions", "animateDelay", "divided", "optionsAriaLabel", "optionsTooltip"], outputs: ["options"] }, { kind: "component", type: ShowMoreComponent, selector: "ius-show-more", inputs: ["expanded", "remaining", "moreLabel", "lessLabel", "collapsible", "size", "align", "ariaControls"], outputs: ["toggle"] }, { kind: "component", type: TextButtonComponent, selector: "ius-text-button", inputs: ["label", "prefixIcon", "sufixIcon", "size", "disabled", "type", "ariaExpanded", "ariaControls"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4370
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: UserMenuComponent, isStandalone: true, selector: "ius-user-menu", inputs: { account: "account", user: "user", services: "services", collapsedCount: ["collapsedCount", "collapsedCount", numberAttribute], defaultExpanded: ["defaultExpanded", "defaultExpanded", booleanAttribute], menu: "menu", accounts: "accounts", open: ["open", "open", booleanAttribute], inline: ["inline", "inline", booleanAttribute], scrim: ["scrim", "scrim", booleanAttribute], closeOnScrim: ["closeOnScrim", "closeOnScrim", booleanAttribute], closeOnEsc: ["closeOnEsc", "closeOnEsc", booleanAttribute], offsetTop: ["offsetTop", "offsetTop", numberAttribute], origin: "origin" }, outputs: { profile: "profile", selectAccount: "selectAccount", createAccount: "createAccount", switchAccount: "switchAccount", logout: "logout", closed: "closed" }, queries: [{ propertyName: "footerSlot", first: true, predicate: IusUserMenuFooterDirective, descendants: true }], viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true }], ngImport: i0, template: "<!-- PRIMERO y al nivel ra\u00EDz: el `ViewChild` est\u00E1tico que lo portalea al overlay\r\n no resuelve una plantilla declarada dentro de un bloque de control flow.\r\n Solo se instancia al adjuntarse. -->\r\n<ng-template #tpl>\r\n @if (scrim) {\r\n <div\r\n class=\"ius-oum-scrim\"\r\n [attr.data-visible]=\"visible() ? 'true' : null\"\r\n [style]=\"estilosScrim\"\r\n (click)=\"onScrimClick()\"\r\n ></div>\r\n }\r\n <div\r\n class=\"ius-oum\"\r\n role=\"menu\"\r\n [attr.data-origin]=\"origenEfectivo\"\r\n [attr.data-visible]=\"visible() ? 'true' : null\"\r\n [attr.data-settled]=\"asentado() ? 'true' : null\"\r\n [style]=\"estilosPanel\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"panelTpl\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Encabezado y cuerpo son los mismos en modo overlay y en modo inline. -->\r\n<ng-template #panelTpl>\r\n <div class=\"ius-oum__head\">\r\n <div class=\"ius-oum__account\">\r\n <ius-avatar\r\n size=\"medium\"\r\n shape=\"square\"\r\n [src]=\"cuenta.avatar\"\r\n [name]=\"nombreMedallon\"\r\n [monogram]=\"cuenta.monogram\"\r\n [icon]=\"iconoCuenta\"\r\n [color]=\"cuenta.color ?? 'info'\"\r\n [ariaLabel]=\"cuenta.name\"\r\n ></ius-avatar>\r\n\r\n <div class=\"ius-oum__acctgroup\">\r\n <span class=\"ius-oum__nav-label\">Est\u00E1s navegando en</span>\r\n <span class=\"ius-oum__account-name\">{{ cuenta.name }}</span>\r\n @if (cuenta.role != null) {\r\n <span class=\"ius-oum__row\">Tu rol <b>{{ cuenta.role }}</b></span>\r\n }\r\n </div>\r\n\r\n @if (cuenta.id != null) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-oum__id\"\r\n [attr.aria-label]=\"copiado() ? 'ID copiado' : 'Copiar ID de cuenta'\"\r\n (click)=\"onCopiarId()\"\r\n >\r\n ID <b>{{ cuenta.id }}</b>\r\n <span translate=\"no\" class=\"ius-icon\">{{ copiado() ? 'check' : 'content_copy' }}</span>\r\n </button>\r\n }\r\n </div>\r\n\r\n @if (usuario.email != null) {\r\n <div class=\"ius-oum__meta\">\r\n <span class=\"ius-oum__email\">\r\n <span translate=\"no\" class=\"ius-icon\">alternate_email</span>\r\n <span>{{ usuario.email }}</span>\r\n </span>\r\n </div>\r\n }\r\n </div>\r\n\r\n <ius-divider></ius-divider>\r\n\r\n @if (vista() === 'switch') {\r\n <div class=\"ius-oum__body ius-scroll ius-scroll--sm\">\r\n <div class=\"ius-oum__switch\">\r\n <span class=\"ius-oum__section\">Cambiar a</span>\r\n @for (opcion of accounts; track opcion.id ?? $index) {\r\n <ius-account-item\r\n [name]=\"opcion.name\"\r\n [subtitle]=\"opcion.subtitle\"\r\n [avatar]=\"opcion.avatar\"\r\n [icon]=\"opcion.icon\"\r\n [monogram]=\"opcion.monogram\"\r\n [color]=\"opcion.color ?? 'auto'\"\r\n [shape]=\"opcion.shape ?? 'circle'\"\r\n [selected]=\"opcion.selected ?? false\"\r\n [disabled]=\"opcion.disabled ?? false\"\r\n [actions]=\"opcion.actions ?? []\"\r\n (clicked)=\"onElegirCuenta(opcion, $index, $event)\"\r\n ></ius-account-item>\r\n }\r\n @if (createAccount.observed) {\r\n <div class=\"ius-oum__create\">\r\n <ius-text-button\r\n size=\"small\"\r\n prefixIcon=\"add\"\r\n label=\"Crear nueva cuenta\"\r\n (clicked)=\"createAccount.emit($event)\"\r\n ></ius-text-button>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"ius-oum__footer\">\r\n <ius-menu-item\r\n variant=\"menu\"\r\n size=\"small\"\r\n icon=\"arrow_back\"\r\n label=\"Volver al men\u00FA de usuario\"\r\n (clicked)=\"onVolver()\"\r\n ></ius-menu-item>\r\n @if (logout.observed) {\r\n <ius-menu-item\r\n variant=\"menu\"\r\n size=\"small\"\r\n icon=\"logout\"\r\n label=\"Cerrar sesi\u00F3n\"\r\n (clicked)=\"logout.emit($event)\"\r\n ></ius-menu-item>\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"ius-oum__body ius-scroll ius-scroll--sm\">\r\n @if (services.length) {\r\n <div class=\"ius-oum__usage\">\r\n @for (svc of consumosVisibles; track $index) {\r\n <ius-plan-usage-item\r\n [divided]=\"true\"\r\n [animateDelay]=\"360\"\r\n [service]=\"svc.service\"\r\n [plan]=\"svc.plan\"\r\n [planHelp]=\"svc.planHelp\"\r\n [status]=\"svc.status ?? 'active'\"\r\n [total]=\"svc.total\"\r\n [available]=\"svc.available\"\r\n [segments]=\"svc.segments\"\r\n [barSize]=\"svc.barSize ?? 'medium'\"\r\n [legend]=\"svc.legend ?? 'popover'\"\r\n [note]=\"svc.note\"\r\n ></ius-plan-usage-item>\r\n }\r\n </div>\r\n }\r\n\r\n @if (puedeExpandir) {\r\n <ius-show-more\r\n [expanded]=\"expandido()\"\r\n [remaining]=\"restantes\"\r\n align=\"center\"\r\n (toggle)=\"onToggleConsumos()\"\r\n ></ius-show-more>\r\n }\r\n\r\n @if (menu.length) {\r\n <ius-divider></ius-divider>\r\n <div class=\"ius-oum__actions\">\r\n @for (item of menu; track item.key ?? $index) {\r\n <ius-menu-item\r\n variant=\"menu\"\r\n size=\"small\"\r\n [icon]=\"item.icon\"\r\n [label]=\"item.label\"\r\n [danger]=\"item.danger ?? false\"\r\n [disabled]=\"item.disabled ?? false\"\r\n (clicked)=\"onItemMenu(item, $event)\"\r\n ></ius-menu-item>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (hayPie) {\r\n <div class=\"ius-oum__footer\">\r\n <ng-content select=\"[iusUserMenuFooter]\" />\r\n\r\n @if (!footerSlot && profile.observed) {\r\n <ius-menu-item\r\n variant=\"menu\"\r\n size=\"small\"\r\n icon=\"manage_accounts\"\r\n label=\"Perfil, preferencias y seguridad\"\r\n (clicked)=\"profile.emit($event)\"\r\n ></ius-menu-item>\r\n }\r\n @if (!footerSlot && puedeCambiar) {\r\n <ius-menu-item\r\n variant=\"menu\"\r\n size=\"small\"\r\n icon=\"swap_horiz\"\r\n label=\"Cambiar de cuenta\"\r\n (clicked)=\"onCambiarCuenta($event)\"\r\n ></ius-menu-item>\r\n }\r\n @if (!footerSlot && logout.observed) {\r\n <ius-menu-item\r\n variant=\"menu\"\r\n size=\"small\"\r\n icon=\"logout\"\r\n label=\"Cerrar sesi\u00F3n\"\r\n (clicked)=\"logout.emit($event)\"\r\n ></ius-menu-item>\r\n }\r\n </div>\r\n }\r\n }\r\n</ng-template>\r\n\r\n@if (inline) {\r\n <div class=\"ius-oum\" role=\"menu\" data-inline=\"true\" data-visible=\"true\" data-settled=\"true\">\r\n <ng-container [ngTemplateOutlet]=\"panelTpl\"></ng-container>\r\n </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}.ius-oum-scrim{position:fixed;inset:0;background:#26262673;opacity:0;transition:opacity .26s var(--ius-ease-standard);z-index:var(--ius-z-overlay)}.ius-oum-scrim[data-visible=true]{opacity:1}.ius-oum{box-sizing:border-box;-webkit-user-select:none;user-select:none;width:min(380px,100vw);display:flex;flex-direction:column;background:var(--ius-surface-card);font-family:var(--ius-font-body)}.ius-oum:not([data-inline=true]){position:fixed;top:0;right:0;bottom:0;z-index:calc(var(--ius-z-overlay) + 1);border-radius:var(--ius-radius-lg) 0 0 var(--ius-radius-lg);box-shadow:var(--ius-elevation-400);transform:translate(100%);transition:transform .26s var(--ius-ease-decelerate, cubic-bezier(0, 0, .2, 1));will-change:transform}.ius-oum[data-visible=true]{transform:translate(0)}.ius-oum[data-origin=top-right]:not([data-inline=true]){right:var(--ius-space-xs);bottom:auto;height:calc(100vh - var(--_oum-top, 0px) - var(--ius-space-md));border-radius:var(--ius-radius-lg);box-shadow:var(--ius-elevation-300);transform-origin:top right;transform:scale(.96) translateY(calc(-1 * var(--ius-space-xs)));opacity:0;transition:transform .18s var(--ius-ease-decelerate, cubic-bezier(0, 0, .2, 1)),opacity .14s var(--ius-ease-standard)}.ius-oum[data-origin=top-right][data-visible=true]:not([data-inline=true]){transform:none;opacity:1}.ius-oum[data-settled=true]:not([data-inline=true]){transform:none;will-change:auto}.ius-oum[data-inline=true]{position:relative;height:100%;border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);box-shadow:var(--ius-elevation-300)}@media(max-width:480px){.ius-oum:not([data-inline=true]):not([data-origin=top-right]){width:100vw;border-radius:0}.ius-oum[data-origin=top-right]:not([data-inline=true]){width:calc(100vw - 2 * var(--ius-space-xs))}}@media(prefers-reduced-motion:reduce){.ius-oum:not([data-inline=true]),.ius-oum-scrim{transition:none}}.ius-oum__head{padding:var(--ius-space-md) var(--ius-space-md) var(--ius-space-sm);display:flex;flex-direction:column;gap:var(--ius-space-xs)}.ius-oum__account{display:flex;align-items:center;gap:var(--ius-space-xs)}.ius-oum__acctgroup{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}.ius-oum__nav-label{font-size:var(--ius-fs-sm);line-height:1.3;color:var(--ius-text-tertiary)}.ius-oum__account-name{font-family:var(--ius-font-display);font-size:var(--ius-fs-lg);font-weight:var(--ius-fw-semibold);line-height:1.3;color:var(--ius-text-primary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-oum__id{flex:0 0 auto;align-self:flex-start;margin-top:1px;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);white-space:nowrap;font-size:var(--ius-fs-sm);color:var(--ius-text-secondary);background:var(--ius-neutral-2);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-sm);padding:var(--ius-space-xxs) var(--ius-space-xs);font-variant-numeric:tabular-nums;appearance:none;cursor:pointer;font-family:var(--ius-font-body);transition:background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-oum__id b{color:var(--ius-text-primary);font-weight:var(--ius-fw-medium)}.ius-oum__id .ius-icon{font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary);margin-left:1px}.ius-oum__id:hover{background:var(--ius-neutral-3)}.ius-oum__id:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-oum__meta{display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-oum__row{font-size:var(--ius-fs-sm);color:var(--ius-text-secondary)}.ius-oum__row b{color:var(--ius-text-primary);font-weight:var(--ius-fw-semibold)}.ius-oum__email{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-size:var(--ius-fs-sm);color:var(--ius-text-secondary);min-width:0}.ius-oum__email .ius-icon{font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary);flex:0 0 auto}.ius-oum__email span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-oum__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}.ius-oum__usage{padding:var(--ius-space-xxs) var(--ius-space-md)}.ius-oum__actions{padding:var(--ius-space-xs);display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-oum__switch{display:flex;flex-direction:column}.ius-oum__section{font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary);padding:var(--ius-space-sm) var(--ius-space-md) var(--ius-space-xs)}.ius-oum__switch ius-account-item{margin:0 var(--ius-space-md);width:auto}.ius-oum__switch ius-account-item+ius-account-item{margin-top:var(--ius-space-xs)}.ius-oum__create{display:flex;justify-content:center;padding:var(--ius-space-sm) var(--ius-space-md)}.ius-oum__footer{flex:0 0 auto;border-top:1px solid var(--ius-stroke);padding:var(--ius-space-xs);display:flex;flex-direction:column;gap:var(--ius-space-xxs)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AccountItemComponent, selector: "ius-account-item", inputs: ["name", "subtitle", "avatar", "icon", "monogram", "color", "shape", "selected", "disabled", "actions", "actionsLabel", "state", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: AvatarComponent, selector: "ius-avatar", inputs: ["alt", "name", "monogram", "icon", "shape", "size", "color", "editable", "editIcon", "ariaLabel", "src"], outputs: ["edit"] }, { kind: "component", type: DividerComponent, selector: "ius-divider", inputs: ["orientation", "variant", "textAlign"] }, { kind: "component", type: MenuItemComponent, selector: "ius-menu-item", inputs: ["icon", "label", "description", "badge", "variant", "size", "selected", "disabled", "danger", "state", "href", "ariaLabel", "itemRole"], outputs: ["clicked"] }, { kind: "component", type: PlanUsageItemComponent, selector: "ius-plan-usage-item", inputs: ["service", "plan", "planHelp", "status", "total", "available", "segments", "barSize", "legend", "note", "actions", "maxInlineActions", "animateDelay", "divided", "optionsAriaLabel", "optionsTooltip"], outputs: ["options"] }, { kind: "component", type: ShowMoreComponent, selector: "ius-show-more", inputs: ["expanded", "remaining", "moreLabel", "lessLabel", "collapsible", "size", "align", "ariaControls"], outputs: ["toggle"] }, { kind: "component", type: TextButtonComponent, selector: "ius-text-button", inputs: ["label", "prefixIcon", "sufixIcon", "size", "disabled", "type", "ariaExpanded", "ariaControls"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4355
4371
|
}
|
|
4356
4372
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: UserMenuComponent, decorators: [{
|
|
4357
4373
|
type: Component,
|
|
@@ -6899,7 +6915,7 @@ class OptionItemComponent {
|
|
|
6899
6915
|
event.preventDefault();
|
|
6900
6916
|
}
|
|
6901
6917
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OptionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6902
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: OptionItemComponent, isStandalone: true, selector: "ius-option-item", inputs: { label: "label", overline: "overline", 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<ng-template #labelTpl>\n <span class=\"ius-opt__label\">{{ label }}<ng-content /></span>\n</ng-template>\n@if (overline != null) {\n <span class=\"ius-opt__text\">\n <span class=\"ius-opt__overline\">{{ overline }}</span>\n <ng-container [ngTemplateOutlet]=\"labelTpl\" />\n </span>\n} @else {\n <ng-container [ngTemplateOutlet]=\"labelTpl\" />\n}\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__text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}.ius-opt__overline{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);color:var(--ius-text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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]) .ius-opt__overline,:host([data-state=selectedVar]) .ius-opt__overline{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"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6918
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: OptionItemComponent, isStandalone: true, selector: "ius-option-item", inputs: { label: "label", overline: "overline", description: "description", 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<ng-template #labelTpl>\r\n <span class=\"ius-opt__label\">{{ label }}<ng-content /></span>\r\n</ng-template>\r\n@if (overline != null || description) {\r\n <span class=\"ius-opt__text\">\r\n @if (overline != null) {\r\n <span class=\"ius-opt__overline\">{{ overline }}</span>\r\n }\r\n <ng-container [ngTemplateOutlet]=\"labelTpl\" />\r\n @if (description) {\r\n <span class=\"ius-opt__description\">{{ description }}</span>\r\n }\r\n </span>\r\n} @else {\r\n <ng-container [ngTemplateOutlet]=\"labelTpl\" />\r\n}\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__text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}.ius-opt__overline{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);color:var(--ius-text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-opt__description{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);font-weight:var(--ius-fw-regular, 400);color:var(--ius-text-secondary);white-space:normal}.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]) .ius-opt__overline,:host([data-state=selectedVar]) .ius-opt__overline,:host([data-selected=true][data-variant=fill]) .ius-opt__description,:host([data-state=selectedVar]) .ius-opt__description{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,:host([data-disabled=true]) .ius-opt__description,:host([data-state=disabled]) .ius-opt__description{color:var(--ius-text-disabled)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6903
6919
|
}
|
|
6904
6920
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OptionItemComponent, decorators: [{
|
|
6905
6921
|
type: Component,
|
|
@@ -6917,11 +6933,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
6917
6933
|
'[attr.data-value]': 'value ?? null',
|
|
6918
6934
|
'(click)': 'handleClick()',
|
|
6919
6935
|
'(mousedown)': 'onMouseDown($event)',
|
|
6920
|
-
}, 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<ng-template #labelTpl>\n <span class=\"ius-opt__label\">{{ label }}<ng-content /></span>\n</ng-template>\n@if (overline != null) {\n <span class=\"ius-opt__text\">\n <span class=\"ius-opt__overline\">{{ overline }}</span>\n <ng-container [ngTemplateOutlet]=\"labelTpl\" />\n </span>\n} @else {\n <ng-container [ngTemplateOutlet]=\"labelTpl\" />\n}\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__text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}.ius-opt__overline{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);color:var(--ius-text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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]) .ius-opt__overline,:host([data-state=selectedVar]) .ius-opt__overline{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"] }]
|
|
6936
|
+
}, 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<ng-template #labelTpl>\r\n <span class=\"ius-opt__label\">{{ label }}<ng-content /></span>\r\n</ng-template>\r\n@if (overline != null || description) {\r\n <span class=\"ius-opt__text\">\r\n @if (overline != null) {\r\n <span class=\"ius-opt__overline\">{{ overline }}</span>\r\n }\r\n <ng-container [ngTemplateOutlet]=\"labelTpl\" />\r\n @if (description) {\r\n <span class=\"ius-opt__description\">{{ description }}</span>\r\n }\r\n </span>\r\n} @else {\r\n <ng-container [ngTemplateOutlet]=\"labelTpl\" />\r\n}\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__text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}.ius-opt__overline{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);color:var(--ius-text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-opt__description{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);font-weight:var(--ius-fw-regular, 400);color:var(--ius-text-secondary);white-space:normal}.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]) .ius-opt__overline,:host([data-state=selectedVar]) .ius-opt__overline,:host([data-selected=true][data-variant=fill]) .ius-opt__description,:host([data-state=selectedVar]) .ius-opt__description{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,:host([data-disabled=true]) .ius-opt__description,:host([data-state=disabled]) .ius-opt__description{color:var(--ius-text-disabled)}\n"] }]
|
|
6921
6937
|
}], propDecorators: { label: [{
|
|
6922
6938
|
type: Input
|
|
6923
6939
|
}], overline: [{
|
|
6924
6940
|
type: Input
|
|
6941
|
+
}], description: [{
|
|
6942
|
+
type: Input
|
|
6925
6943
|
}], icon: [{
|
|
6926
6944
|
type: Input
|
|
6927
6945
|
}], selected: [{
|
|
@@ -7536,8 +7554,8 @@ class SelectComponent {
|
|
|
7536
7554
|
}
|
|
7537
7555
|
/**
|
|
7538
7556
|
* `Enter` agrega la opción; `Escape` **con texto** solo limpia el borrador y
|
|
7539
|
-
* frena la propagación para que el listener de `document`
|
|
7540
|
-
* (espejo del golden). Sin texto, `Escape` sigue cerrando el menú.
|
|
7557
|
+
* frena la propagación para que ni el overlay ni el listener de `document`
|
|
7558
|
+
* cierren el menú (espejo del golden). Sin texto, `Escape` sigue cerrando el menú.
|
|
7541
7559
|
*/
|
|
7542
7560
|
onCreateKeyDown(event) {
|
|
7543
7561
|
if (event.key === 'Enter') {
|
|
@@ -7677,8 +7695,13 @@ class SelectComponent {
|
|
|
7677
7695
|
return;
|
|
7678
7696
|
this.setOpen(false);
|
|
7679
7697
|
}
|
|
7680
|
-
|
|
7681
|
-
|
|
7698
|
+
/**
|
|
7699
|
+
* Respaldo del Escape que atiende el overlay del menú (ver `attachOverlay`),
|
|
7700
|
+
* p. ej. en el frame previo a montarlo. Si otro overlay ya lo consumió
|
|
7701
|
+
* (`defaultPrevented`), no se vuelve a cerrar.
|
|
7702
|
+
*/
|
|
7703
|
+
onEscape(event) {
|
|
7704
|
+
if (!this.isOpen() || event.defaultPrevented)
|
|
7682
7705
|
return;
|
|
7683
7706
|
this.setOpen(false);
|
|
7684
7707
|
this.field()?.nativeElement.focus();
|
|
@@ -7717,8 +7740,22 @@ class SelectComponent {
|
|
|
7717
7740
|
scrollStrategy: this.overlay.scrollStrategies.reposition(),
|
|
7718
7741
|
disposeOnNavigation: true,
|
|
7719
7742
|
hasBackdrop: false,
|
|
7743
|
+
// Solo el Escape se queda en este overlay; el resto de teclas sigue hacia
|
|
7744
|
+
// los overlays de abajo (Drawer, Modal).
|
|
7745
|
+
eventPredicate: (event) => event instanceof KeyboardEvent && event.key === 'Escape',
|
|
7720
7746
|
});
|
|
7721
7747
|
this.overlayRef.attach(new TemplatePortal(tpl, this.viewContainerRef));
|
|
7748
|
+
// El dispatcher de CDK entrega cada tecla solo al overlay más alto con
|
|
7749
|
+
// suscriptores: al atender aquí el Escape, cierra el menú y un Drawer/Modal
|
|
7750
|
+
// padre con `closeOnEsc` no se cierra con él. La suscripción termina con
|
|
7751
|
+
// `dispose()` (CDK completa el stream).
|
|
7752
|
+
this.overlayRef.keydownEvents().subscribe((event) => {
|
|
7753
|
+
event.preventDefault();
|
|
7754
|
+
if (!this.isOpen())
|
|
7755
|
+
return;
|
|
7756
|
+
this.setOpen(false);
|
|
7757
|
+
this.field()?.nativeElement.focus();
|
|
7758
|
+
});
|
|
7722
7759
|
window.addEventListener('resize', this.onWindowResize);
|
|
7723
7760
|
if (focusSearch && this.searchable) {
|
|
7724
7761
|
requestAnimationFrame(() => this.search()?.nativeElement.focus());
|
|
@@ -7735,13 +7772,13 @@ class SelectComponent {
|
|
|
7735
7772
|
this.menuWidth.set(origin.getBoundingClientRect().width);
|
|
7736
7773
|
}
|
|
7737
7774
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7738
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SelectComponent, isStandalone: true, selector: "ius-select", inputs: { options: "options", multiple: ["multiple", "multiple", booleanAttribute], size: "size", disabled: ["disabled", "disabled", booleanAttribute], error: ["error", "error", booleanAttribute], state: "state", open: ["open", "open", booleanAttribute], value: "value", label: "label", required: ["required", "required", booleanAttribute], placeholder: "placeholder", prefixIcon: "prefixIcon", searchable: ["searchable", "searchable", booleanAttribute], searchPlaceholder: "searchPlaceholder", emptyText: "emptyText", creatable: ["creatable", "creatable", booleanAttribute], createPlaceholder: "createPlaceholder", createLabel: "createLabel", createFactory: "createFactory", maxVisible: ["maxVisible", "maxVisible", numberAttribute], helpText: "helpText", errorText: "errorText", showHelpText: ["showHelpText", "showHelpText", booleanAttribute], showIconHelp: ["showIconHelp", "showIconHelp", booleanAttribute], iconHelpTitle: "iconHelpTitle", iconHelpContent: "iconHelpContent", showClear: ["showClear", "showClear", booleanAttribute], defaultOpen: ["defaultOpen", "defaultOpen", booleanAttribute], compact: ["compact", "compact", booleanAttribute], defaultValue: "defaultValue", id: "id", name: "name" }, outputs: { valueChange: "valueChange", cleared: "cleared", openChange: "openChange", created: "created" }, host: { listeners: { "document:mousedown": "onDocumentMouseDown($event)", "document:keydown.escape": "onEscape()" }, properties: { "class.ius-tf--compact": "compact", "attr.data-size": "size !== 'medium' ? size : null", "attr.data-focused": "focusedAttr()", "attr.data-error": "isError() || null", "attr.data-disabled": "isDisabled() || null", "attr.data-force": "stateInput() || null" }, classAttribute: "ius-tf ius-tf--select" }, providers: [
|
|
7775
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SelectComponent, isStandalone: true, selector: "ius-select", inputs: { options: "options", multiple: ["multiple", "multiple", booleanAttribute], size: "size", disabled: ["disabled", "disabled", booleanAttribute], error: ["error", "error", booleanAttribute], state: "state", open: ["open", "open", booleanAttribute], value: "value", label: "label", required: ["required", "required", booleanAttribute], placeholder: "placeholder", prefixIcon: "prefixIcon", searchable: ["searchable", "searchable", booleanAttribute], searchPlaceholder: "searchPlaceholder", emptyText: "emptyText", creatable: ["creatable", "creatable", booleanAttribute], createPlaceholder: "createPlaceholder", createLabel: "createLabel", createFactory: "createFactory", maxVisible: ["maxVisible", "maxVisible", numberAttribute], helpText: "helpText", errorText: "errorText", showHelpText: ["showHelpText", "showHelpText", booleanAttribute], showIconHelp: ["showIconHelp", "showIconHelp", booleanAttribute], iconHelpTitle: "iconHelpTitle", iconHelpContent: "iconHelpContent", showClear: ["showClear", "showClear", booleanAttribute], defaultOpen: ["defaultOpen", "defaultOpen", booleanAttribute], compact: ["compact", "compact", booleanAttribute], defaultValue: "defaultValue", id: "id", name: "name" }, outputs: { valueChange: "valueChange", cleared: "cleared", openChange: "openChange", created: "created" }, host: { listeners: { "document:mousedown": "onDocumentMouseDown($event)", "document:keydown.escape": "onEscape($event)" }, properties: { "class.ius-tf--compact": "compact", "attr.data-size": "size !== 'medium' ? size : null", "attr.data-focused": "focusedAttr()", "attr.data-error": "isError() || null", "attr.data-disabled": "isDisabled() || null", "attr.data-force": "stateInput() || null" }, classAttribute: "ius-tf ius-tf--select" }, providers: [
|
|
7739
7776
|
{
|
|
7740
7777
|
provide: NG_VALUE_ACCESSOR,
|
|
7741
7778
|
useExisting: forwardRef(() => SelectComponent),
|
|
7742
7779
|
multi: true,
|
|
7743
7780
|
},
|
|
7744
|
-
], viewQueries: [{ propertyName: "field", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }, { propertyName: "search", first: true, predicate: ["search"], descendants: true, isSignal: true }, { propertyName: "createInput", first: true, predicate: ["createInput"], descendants: true, isSignal: true }, { propertyName: "menuTpl", first: true, predicate: ["menuTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label != null) {\r\n <label [for]=\"baseId\" class=\"ius-tf__label\">\r\n @if (required) {\r\n <span class=\"ius-tf__required\" aria-hidden=\"true\"></span>\r\n }\r\n <span>{{ label }}</span>\r\n @if (showIconHelp) {\r\n <!-- El golden envuelve el \u00EDcono en <Popover placement=\"top\" trigger=\"hover\">\r\n (ambos son los defaults de `ius-popover`) \u2014 mismo patr\u00F3n que TextField. -->\r\n <ius-popover\r\n [title]=\"iconHelpTitle\"\r\n [content]=\"iconHelpContent\"\r\n [disabled]=\"iconHelpEmpty\"\r\n >\r\n <span\r\n class=\"ius-tf__help-icon\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n aria-label=\"Ayuda\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">help</span>\r\n </span>\r\n </ius-popover>\r\n }\r\n <span class=\"ius-tf__colon\">:</span>\r\n </label>\r\n}\r\n\r\n<div\r\n #field\r\n [id]=\"baseId\"\r\n class=\"ius-tf__field\"\r\n role=\"combobox\"\r\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-controls]=\"menuId\"\r\n [attr.aria-required]=\"required || null\"\r\n [attr.aria-invalid]=\"isError() || null\"\r\n (click)=\"toggleOpen()\"\r\n (keydown)=\"onTriggerKeyDown($event)\"\r\n>\r\n @if (prefixIcon) {\r\n <span class=\"ius-tf__prefix\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ prefixIcon }}</span>\r\n </span>\r\n }\r\n\r\n @if (multiple && hasValue()) {\r\n <div class=\"ius-select__chips\">\r\n @for (val of valueArray(); track val) {\r\n <ius-chip\r\n [removable]=\"!isDisabled()\"\r\n [size]=\"chipSize\"\r\n [label]=\"labelFor(val)\"\r\n [disabled]=\"isDisabled()\"\r\n (removed)=\"removeChip(val)\"\r\n />\r\n }\r\n </div>\r\n } @else {\r\n <span class=\"ius-select__value\" [attr.data-placeholder]=\"!hasValue() || null\">\r\n {{ hasValue() ? labelFor(singleValue()!) : placeholder }}\r\n </span>\r\n }\r\n\r\n <!--\r\n Espejo de `clearReserved` del golden: el bot\u00F3n entra en el flujo solo si el\r\n campo es \"clearable-capable\" (showClear !== false y habilitado). Dentro de\r\n ese caso el slot S\u00CD queda reservado con `visibility`, para que el chevron no\r\n se desplace al aparecer/quitar el valor (auditor\u00EDa 2026-07-24). Con\r\n `showClear=false` o `disabled` desaparece del flujo, como el golden.\r\n -->\r\n @if (clearReserved) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-tf__clear\"\r\n aria-label=\"Limpiar campo\"\r\n tabindex=\"-1\"\r\n [style.visibility]=\"showClearComputed ? 'visible' : 'hidden'\"\r\n [attr.aria-hidden]=\"showClearComputed ? null : 'true'\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (click)=\"clear($event)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">cancel</span>\r\n </button>\r\n }\r\n\r\n <span class=\"ius-select__chevron\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ isOpen() ? 'expand_less' : 'expand_more' }}</span>\r\n </span>\r\n</div>\r\n\r\n@if (showHint) {\r\n <span [id]=\"helpId\" class=\"ius-tf__hint\">{{ hint }}</span>\r\n}\r\n\r\n<ng-template #menuTpl>\r\n <div\r\n #menu\r\n [id]=\"menuId\"\r\n class=\"ius-selectmenu\"\r\n role=\"listbox\"\r\n [attr.aria-multiselectable]=\"multiple || null\"\r\n [attr.data-size]=\"size !== 'medium' ? size : null\"\r\n [style.width.px]=\"menuWidth()\"\r\n >\r\n @if (searchable) {\r\n <div class=\"ius-selectmenu__search\">\r\n <span translate=\"no\" class=\"ius-icon\">search</span>\r\n <input\r\n #search\r\n type=\"text\"\r\n [placeholder]=\"searchPlaceholder\"\r\n [attr.aria-label]=\"searchPlaceholder\"\r\n [value]=\"query()\"\r\n (input)=\"onSearch($event)\"\r\n (keydown)=\"onTriggerKeyDown($event)\"\r\n />\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"ius-selectmenu__list ius-scroll ius-scroll--sm\"\r\n [style.max-height.px]=\"listMaxH\"\r\n >\r\n @if (visible().flat.length === 0) {\r\n <div class=\"ius-selectmenu__empty\">{{ emptyText }}</div>\r\n } @else {\r\n @for (g of visible().groups; track $index) {\r\n @if (g.label) {\r\n <div class=\"ius-selectmenu__group-label\">{{ g.label }}</div>\r\n }\r\n @for (item of g.items; track item.opt.value) {\r\n <ius-option-item\r\n [label]=\"item.opt.label\"\r\n [overline]=\"item.opt.overline\"\r\n [icon]=\"item.opt.icon\"\r\n [size]=\"size\"\r\n [value]=\"item.opt.value\"\r\n [selected]=\"isChosen(item.opt.value)\"\r\n [multi]=\"multiple\"\r\n [active]=\"item.flatIndex === activeIndex()\"\r\n [disabled]=\"item.opt.disabled || false\"\r\n (selectClicked)=\"handleSelect(item.opt)\"\r\n />\r\n }\r\n }\r\n }\r\n </div>\r\n\r\n @if (creatable) {\r\n <!-- Pie \u00ABagregar opci\u00F3n\u00BB: campo propio (independiente de la b\u00FAsqueda) +\r\n `ius-text-button` con \u00EDcono `add`. El bot\u00F3n se compone, no se\r\n reimplementa; su interior es inalcanzable desde este SCSS\r\n (encapsulaci\u00F3n), por eso el `flex: 0 0 auto` del golden se aplica al\r\n envoltorio `.ius-selectmenu__create-action`, no al `.ius-txtbtn`. -->\r\n <div class=\"ius-selectmenu__create\">\r\n <div class=\"ius-selectmenu__create-field\">\r\n <input\r\n #createInput\r\n type=\"text\"\r\n [placeholder]=\"createPlaceholder\"\r\n [attr.aria-label]=\"createPlaceholder\"\r\n [value]=\"draft()\"\r\n (input)=\"onCreateInput($event)\"\r\n (keydown)=\"onCreateKeyDown($event)\"\r\n />\r\n </div>\r\n <span class=\"ius-selectmenu__create-action\">\r\n <ius-text-button\r\n prefixIcon=\"add\"\r\n [label]=\"createLabel\"\r\n [size]=\"createButtonSize\"\r\n [disabled]=\"createDisabled()\"\r\n (clicked)=\"addItem()\"\r\n />\r\n </span>\r\n </div>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{--_tf-bg: var(--ius-neutral-2);--_tf-border: transparent;--_tf-fg: var(--ius-text-primary);--_tf-placeholder: var(--ius-text-tertiary);--_tf-icon: var(--ius-text-secondary);--_tf-clear: var(--ius-neutral-7);--_tf-py: 9px;--_tf-px: 12px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-md);display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);min-width:200px;width:100%;max-width:360px}:host(.ius-tf--compact){min-width:0;width:auto;max-width:none}.ius-tf__label{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-tf__required{width:5px;height:5px;border-radius:50%;background:var(--ius-danger-500);display:inline-block;margin-right:var(--ius-space-xxs)}.ius-tf__help-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-7);cursor:help}.ius-tf__help-icon .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-tf__colon{color:var(--ius-text-secondary)}.ius-tf__field{display:flex;align-items:center;gap:var(--ius-space-xxs);padding:var(--_tf-py) var(--_tf-px);background:var(--_tf-bg);border:1px solid var(--_tf-border);border-radius:var(--ius-radius-md);transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}.ius-tf__field:hover,:host([data-force=hover]) .ius-tf__field{--_tf-bg: var(--ius-info-100);--_tf-border: transparent;--_tf-clear: var(--ius-primary-900)}:host([data-focused=true]) .ius-tf__field,:host([data-force=focused]) .ius-tf__field,.ius-tf__field:focus-within{--_tf-bg: var(--ius-info-100);--_tf-border: var(--ius-primary-500);--_tf-clear: var(--ius-primary-900);box-shadow:var(--ius-focus-ring)}:host([data-error=true]) .ius-tf__field,:host([data-force=error]) .ius-tf__field{--_tf-bg: var(--ius-danger-100);--_tf-border: var(--ius-danger-700);--_tf-clear: var(--ius-danger-700);box-shadow:none}:host([data-error=true][data-focused=true]) .ius-tf__field,:host([data-force=error]) .ius-tf__field{box-shadow:0 0 0 3px var(--ius-danger-200)}:host([data-disabled=true]) .ius-tf__field,:host([data-force=disabled]) .ius-tf__field{--_tf-bg: var(--ius-neutral-2);--_tf-border: transparent;--_tf-fg: var(--ius-text-disabled);--_tf-placeholder: var(--ius-text-disabled);--_tf-icon: var(--ius-text-disabled);box-shadow:none}:host([data-disabled=true]) .ius-tf__label,:host([data-force=disabled]) .ius-tf__label{color:var(--ius-text-disabled)}:host([data-disabled=true]) .ius-tf__required,:host([data-force=disabled]) .ius-tf__required{background:var(--ius-neutral-5)}.ius-tf__prefix{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-tf__prefix .ius-icon{font-size:var(--_tf-icon-size);line-height:1}.ius-tf__clear{appearance:none;border:0;padding:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--_tf-clear);cursor:pointer;flex:0 0 auto}.ius-tf__clear:hover{color:var(--ius-neutral-9)}.ius-tf__clear .ius-icon{font-size:calc(var(--_tf-icon-size) + 2px);line-height:1}:host([data-error=true]) .ius-tf__clear{color:var(--ius-danger-700)}:host([data-error=true]) .ius-tf__clear:hover{color:var(--ius-danger-800)}.ius-tf__hint{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);font-weight:var(--ius-fw-medium);font-style:italic;color:var(--ius-text-secondary);letter-spacing:.02em}:host([data-error=true]) .ius-tf__hint,:host([data-force=error]) .ius-tf__hint{color:var(--ius-danger-700)}:host([data-disabled=true]) .ius-tf__hint,:host([data-force=disabled]) .ius-tf__hint{color:var(--ius-text-disabled)}:host([data-size=small]){--_tf-py: 6px;--_tf-px: 10px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-sm)}:host([data-size=large]){--_tf-py: 12px;--_tf-px: 14px;--_tf-fs: var(--ius-fs-lg);--_tf-lh: var(--ius-lh-lg);--_tf-icon-size: var(--ius-icon-lg)}@container style(--ius-control-size: small){:host(:not([data-size])){--_tf-py: 6px;--_tf-px: 10px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-sm)}}@container style(--ius-control-size: large){:host(:not([data-size])){--_tf-py: 12px;--_tf-px: 14px;--_tf-fs: var(--ius-fs-lg);--_tf-lh: var(--ius-lh-lg);--_tf-icon-size: var(--ius-icon-lg)}}.ius-tf__field{cursor:pointer;gap:var(--ius-space-xs)}.ius-tf__field{flex-wrap:nowrap;align-items:center}:host(:has(.ius-select__chips)) .ius-tf__field{flex-wrap:wrap;align-items:flex-start}.ius-select__value,.ius-tf__prefix,.ius-select__chevron,.ius-tf__clear{align-self:center}:host(:has(.ius-select__chips)) .ius-select__chevron,:host(:has(.ius-select__chips)) .ius-tf__clear{align-self:flex-start}:host([data-disabled=true]) .ius-tf__field{cursor:not-allowed}.ius-select__value{flex:1 1 auto;min-width:0;font-size:var(--_tf-fs);line-height:var(--_tf-lh);color:var(--_tf-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-select__value[data-placeholder=true]{color:var(--_tf-placeholder)}.ius-select__chevron{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-select__chevron .ius-icon{font-size:calc(var(--_tf-icon-size) + 2px);line-height:1;transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-select__chips{display:flex;flex-wrap:wrap;gap:var(--ius-space-xs);flex:1 1 0;min-width:0}.ius-selectmenu{box-sizing:border-box;background:var(--ius-neutral-white);border-radius:var(--ius-radius-lg);box-shadow:var(--ius-elevation-300);padding:var(--ius-space-xs);display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);animation:ius-selectmenu-in .12s var(--ius-ease-decelerate)}@keyframes ius-selectmenu-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.ius-selectmenu__search{display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-xs);background:var(--ius-neutral-2);border:1px solid transparent;border-radius:var(--ius-radius-md)}.ius-selectmenu__search:focus-within{background:var(--ius-info-100);border-color:var(--ius-primary-500);box-shadow:var(--ius-focus-ring)}.ius-selectmenu__search .ius-icon{font-size:var(--ius-icon-md);color:var(--ius-text-tertiary);flex:0 0 auto}.ius-selectmenu__search input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary);min-width:0}.ius-selectmenu[data-size=large] .ius-selectmenu__search{padding:var(--ius-space-xs) var(--ius-space-sm)}.ius-selectmenu[data-size=large] .ius-selectmenu__search input{font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg)}@container style(--ius-control-size: large){.ius-selectmenu:not([data-size]) .ius-selectmenu__search{padding:var(--ius-space-xs) var(--ius-space-sm)}.ius-selectmenu:not([data-size]) .ius-selectmenu__search input{font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg)}}.ius-selectmenu__list{overflow-y:auto;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-selectmenu__group-label{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);padding:var(--ius-space-xs) var(--ius-space-sm) var(--ius-space-xxs)}.ius-selectmenu__empty{padding:var(--ius-space-lg) var(--ius-space-sm);text-align:center;font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary)}.ius-selectmenu__create{display:flex;align-items:center;gap:var(--ius-space-xs);border-top:1px solid var(--ius-stroke);margin-top:var(--ius-space-xxs);padding-top:var(--ius-space-xs)}.ius-selectmenu__create-field{flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:var(--ius-space-xs) var(--ius-space-sm);background:var(--ius-neutral-2);border:1px solid transparent;border-radius:var(--ius-radius-md)}.ius-selectmenu__create-field:focus-within{background:var(--ius-info-100);border-color:var(--ius-primary-500);box-shadow:var(--ius-focus-ring)}.ius-selectmenu__create-field input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary);min-width:0}.ius-selectmenu__create-action{display:inline-flex;align-items:center;flex:0 0 auto}.ius-selectmenu[data-size=large] .ius-selectmenu__create-field input{font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg)}\n"], dependencies: [{ kind: "component", type: OptionItemComponent, selector: "ius-option-item", inputs: ["label", "overline", "icon", "selected", "multi", "active", "disabled", "size", "value", "state"], outputs: ["selectClicked"] }, { kind: "component", type: ChipComponent, selector: "ius-chip", inputs: ["label", "icon", "removable", "size", "disabled", "state", "removeLabel"], outputs: ["removed"] }, { kind: "component", type: PopoverComponent, selector: "ius-popover", inputs: ["title", "content", "placement", "trigger", "offset", "open", "defaultOpen", "showArrow", "disabled", "anchorRect", "padding", "dismissable", "panelClass"], outputs: ["openChange"] }, { kind: "component", type: TextButtonComponent, selector: "ius-text-button", inputs: ["label", "prefixIcon", "sufixIcon", "size", "disabled", "type", "ariaExpanded", "ariaControls"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7781
|
+
], viewQueries: [{ propertyName: "field", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }, { propertyName: "search", first: true, predicate: ["search"], descendants: true, isSignal: true }, { propertyName: "createInput", first: true, predicate: ["createInput"], descendants: true, isSignal: true }, { propertyName: "menuTpl", first: true, predicate: ["menuTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label != null) {\r\n <label [for]=\"baseId\" class=\"ius-tf__label\">\r\n @if (required) {\r\n <span class=\"ius-tf__required\" aria-hidden=\"true\"></span>\r\n }\r\n <span>{{ label }}</span>\r\n @if (showIconHelp) {\r\n <!-- El golden envuelve el \u00EDcono en <Popover placement=\"top\" trigger=\"hover\">\r\n (ambos son los defaults de `ius-popover`) \u2014 mismo patr\u00F3n que TextField. -->\r\n <ius-popover\r\n [title]=\"iconHelpTitle\"\r\n [content]=\"iconHelpContent\"\r\n [disabled]=\"iconHelpEmpty\"\r\n >\r\n <span\r\n class=\"ius-tf__help-icon\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n aria-label=\"Ayuda\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">help</span>\r\n </span>\r\n </ius-popover>\r\n }\r\n <span class=\"ius-tf__colon\">:</span>\r\n </label>\r\n}\r\n\r\n<div\r\n #field\r\n [id]=\"baseId\"\r\n class=\"ius-tf__field\"\r\n role=\"combobox\"\r\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-controls]=\"menuId\"\r\n [attr.aria-required]=\"required || null\"\r\n [attr.aria-invalid]=\"isError() || null\"\r\n (click)=\"toggleOpen()\"\r\n (keydown)=\"onTriggerKeyDown($event)\"\r\n>\r\n @if (prefixIcon) {\r\n <span class=\"ius-tf__prefix\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ prefixIcon }}</span>\r\n </span>\r\n }\r\n\r\n @if (multiple && hasValue()) {\r\n <div class=\"ius-select__chips\">\r\n @for (val of valueArray(); track val) {\r\n <ius-chip\r\n [removable]=\"!isDisabled()\"\r\n [size]=\"chipSize\"\r\n [label]=\"labelFor(val)\"\r\n [disabled]=\"isDisabled()\"\r\n (removed)=\"removeChip(val)\"\r\n />\r\n }\r\n </div>\r\n } @else {\r\n <span class=\"ius-select__value\" [attr.data-placeholder]=\"!hasValue() || null\">\r\n {{ hasValue() ? labelFor(singleValue()!) : placeholder }}\r\n </span>\r\n }\r\n\r\n <!--\r\n Espejo de `clearReserved` del golden: el bot\u00F3n entra en el flujo solo si el\r\n campo es \"clearable-capable\" (showClear !== false y habilitado). Dentro de\r\n ese caso el slot S\u00CD queda reservado con `visibility`, para que el chevron no\r\n se desplace al aparecer/quitar el valor (auditor\u00EDa 2026-07-24). Con\r\n `showClear=false` o `disabled` desaparece del flujo, como el golden.\r\n -->\r\n @if (clearReserved) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-tf__clear\"\r\n aria-label=\"Limpiar campo\"\r\n tabindex=\"-1\"\r\n [style.visibility]=\"showClearComputed ? 'visible' : 'hidden'\"\r\n [attr.aria-hidden]=\"showClearComputed ? null : 'true'\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (click)=\"clear($event)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">cancel</span>\r\n </button>\r\n }\r\n\r\n <span class=\"ius-select__chevron\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ isOpen() ? 'expand_less' : 'expand_more' }}</span>\r\n </span>\r\n</div>\r\n\r\n@if (showHint) {\r\n <span [id]=\"helpId\" class=\"ius-tf__hint\">{{ hint }}</span>\r\n}\r\n\r\n<ng-template #menuTpl>\r\n <div\r\n #menu\r\n [id]=\"menuId\"\r\n class=\"ius-selectmenu\"\r\n role=\"listbox\"\r\n [attr.aria-multiselectable]=\"multiple || null\"\r\n [attr.data-size]=\"size !== 'medium' ? size : null\"\r\n [style.width.px]=\"menuWidth()\"\r\n >\r\n @if (searchable) {\r\n <div class=\"ius-selectmenu__search\">\r\n <span translate=\"no\" class=\"ius-icon\">search</span>\r\n <input\r\n #search\r\n type=\"text\"\r\n [placeholder]=\"searchPlaceholder\"\r\n [attr.aria-label]=\"searchPlaceholder\"\r\n [value]=\"query()\"\r\n (input)=\"onSearch($event)\"\r\n (keydown)=\"onTriggerKeyDown($event)\"\r\n />\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"ius-selectmenu__list ius-scroll ius-scroll--sm\"\r\n [style.max-height.px]=\"listMaxH\"\r\n >\r\n @if (visible().flat.length === 0) {\r\n <div class=\"ius-selectmenu__empty\">{{ emptyText }}</div>\r\n } @else {\r\n @for (g of visible().groups; track $index) {\r\n @if (g.label) {\r\n <div class=\"ius-selectmenu__group-label\">{{ g.label }}</div>\r\n }\r\n @for (item of g.items; track item.opt.value) {\r\n <ius-option-item\r\n [label]=\"item.opt.label\"\r\n [overline]=\"item.opt.overline\"\r\n [description]=\"item.opt.description\"\r\n [icon]=\"item.opt.icon\"\r\n [size]=\"size\"\r\n [value]=\"item.opt.value\"\r\n [selected]=\"isChosen(item.opt.value)\"\r\n [multi]=\"multiple\"\r\n [active]=\"item.flatIndex === activeIndex()\"\r\n [disabled]=\"item.opt.disabled || false\"\r\n (selectClicked)=\"handleSelect(item.opt)\"\r\n />\r\n }\r\n }\r\n }\r\n </div>\r\n\r\n @if (creatable) {\r\n <!-- Pie \u00ABagregar opci\u00F3n\u00BB: campo propio (independiente de la b\u00FAsqueda) +\r\n `ius-text-button` con \u00EDcono `add`. El bot\u00F3n se compone, no se\r\n reimplementa; su interior es inalcanzable desde este SCSS\r\n (encapsulaci\u00F3n), por eso el `flex: 0 0 auto` del golden se aplica al\r\n envoltorio `.ius-selectmenu__create-action`, no al `.ius-txtbtn`. -->\r\n <div class=\"ius-selectmenu__create\">\r\n <div class=\"ius-selectmenu__create-field\">\r\n <input\r\n #createInput\r\n type=\"text\"\r\n [placeholder]=\"createPlaceholder\"\r\n [attr.aria-label]=\"createPlaceholder\"\r\n [value]=\"draft()\"\r\n (input)=\"onCreateInput($event)\"\r\n (keydown)=\"onCreateKeyDown($event)\"\r\n />\r\n </div>\r\n <span class=\"ius-selectmenu__create-action\">\r\n <ius-text-button\r\n prefixIcon=\"add\"\r\n [label]=\"createLabel\"\r\n [size]=\"createButtonSize\"\r\n [disabled]=\"createDisabled()\"\r\n (clicked)=\"addItem()\"\r\n />\r\n </span>\r\n </div>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{--_tf-bg: var(--ius-neutral-2);--_tf-border: transparent;--_tf-fg: var(--ius-text-primary);--_tf-placeholder: var(--ius-text-tertiary);--_tf-icon: var(--ius-text-secondary);--_tf-clear: var(--ius-neutral-7);--_tf-py: 9px;--_tf-px: 12px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-md);display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);min-width:200px;width:100%;max-width:360px}:host(.ius-tf--compact){min-width:0;width:auto;max-width:none}.ius-tf__label{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-tf__required{width:5px;height:5px;border-radius:50%;background:var(--ius-danger-500);display:inline-block;margin-right:var(--ius-space-xxs)}.ius-tf__help-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-7);cursor:help}.ius-tf__help-icon .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-tf__colon{color:var(--ius-text-secondary)}.ius-tf__field{display:flex;align-items:center;gap:var(--ius-space-xxs);padding:var(--_tf-py) var(--_tf-px);background:var(--_tf-bg);border:1px solid var(--_tf-border);border-radius:var(--ius-radius-md);transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}.ius-tf__field:hover,:host([data-force=hover]) .ius-tf__field{--_tf-bg: var(--ius-info-100);--_tf-border: transparent;--_tf-clear: var(--ius-primary-900)}:host([data-focused=true]) .ius-tf__field,:host([data-force=focused]) .ius-tf__field,.ius-tf__field:focus-within{--_tf-bg: var(--ius-info-100);--_tf-border: var(--ius-primary-500);--_tf-clear: var(--ius-primary-900);box-shadow:var(--ius-focus-ring)}:host([data-error=true]) .ius-tf__field,:host([data-force=error]) .ius-tf__field{--_tf-bg: var(--ius-danger-100);--_tf-border: var(--ius-danger-700);--_tf-clear: var(--ius-danger-700);box-shadow:none}:host([data-error=true][data-focused=true]) .ius-tf__field,:host([data-force=error]) .ius-tf__field{box-shadow:0 0 0 3px var(--ius-danger-200)}:host([data-disabled=true]) .ius-tf__field,:host([data-force=disabled]) .ius-tf__field{--_tf-bg: var(--ius-neutral-2);--_tf-border: transparent;--_tf-fg: var(--ius-text-disabled);--_tf-placeholder: var(--ius-text-disabled);--_tf-icon: var(--ius-text-disabled);box-shadow:none}:host([data-disabled=true]) .ius-tf__label,:host([data-force=disabled]) .ius-tf__label{color:var(--ius-text-disabled)}:host([data-disabled=true]) .ius-tf__required,:host([data-force=disabled]) .ius-tf__required{background:var(--ius-neutral-5)}.ius-tf__prefix{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-tf__prefix .ius-icon{font-size:var(--_tf-icon-size);line-height:1}.ius-tf__clear{appearance:none;border:0;padding:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--_tf-clear);cursor:pointer;flex:0 0 auto}.ius-tf__clear:hover{color:var(--ius-neutral-9)}.ius-tf__clear .ius-icon{font-size:calc(var(--_tf-icon-size) + 2px);line-height:1}:host([data-error=true]) .ius-tf__clear{color:var(--ius-danger-700)}:host([data-error=true]) .ius-tf__clear:hover{color:var(--ius-danger-800)}.ius-tf__hint{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);font-weight:var(--ius-fw-medium);font-style:italic;color:var(--ius-text-secondary);letter-spacing:.02em}:host([data-error=true]) .ius-tf__hint,:host([data-force=error]) .ius-tf__hint{color:var(--ius-danger-700)}:host([data-disabled=true]) .ius-tf__hint,:host([data-force=disabled]) .ius-tf__hint{color:var(--ius-text-disabled)}:host([data-size=small]){--_tf-py: 6px;--_tf-px: 10px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-sm)}:host([data-size=large]){--_tf-py: 12px;--_tf-px: 14px;--_tf-fs: var(--ius-fs-lg);--_tf-lh: var(--ius-lh-lg);--_tf-icon-size: var(--ius-icon-lg)}@container style(--ius-control-size: small){:host(:not([data-size])){--_tf-py: 6px;--_tf-px: 10px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-sm)}}@container style(--ius-control-size: large){:host(:not([data-size])){--_tf-py: 12px;--_tf-px: 14px;--_tf-fs: var(--ius-fs-lg);--_tf-lh: var(--ius-lh-lg);--_tf-icon-size: var(--ius-icon-lg)}}.ius-tf__field{cursor:pointer;gap:var(--ius-space-xs)}.ius-tf__field{flex-wrap:nowrap;align-items:center}:host(:has(.ius-select__chips)) .ius-tf__field{flex-wrap:wrap;align-items:flex-start}.ius-select__value,.ius-tf__prefix,.ius-select__chevron,.ius-tf__clear{align-self:center}:host(:has(.ius-select__chips)) .ius-select__chevron,:host(:has(.ius-select__chips)) .ius-tf__clear{align-self:flex-start}:host([data-disabled=true]) .ius-tf__field{cursor:not-allowed}.ius-select__value{flex:1 1 auto;min-width:0;font-size:var(--_tf-fs);line-height:var(--_tf-lh);color:var(--_tf-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-select__value[data-placeholder=true]{color:var(--_tf-placeholder)}.ius-select__chevron{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-select__chevron .ius-icon{font-size:calc(var(--_tf-icon-size) + 2px);line-height:1;transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-select__chips{display:flex;flex-wrap:wrap;gap:var(--ius-space-xs);flex:1 1 0;min-width:0}.ius-selectmenu{box-sizing:border-box;background:var(--ius-neutral-white);border-radius:var(--ius-radius-lg);box-shadow:var(--ius-elevation-300);padding:var(--ius-space-xs);display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);animation:ius-selectmenu-in .12s var(--ius-ease-decelerate)}@keyframes ius-selectmenu-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.ius-selectmenu__search{display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-xs);background:var(--ius-neutral-2);border:1px solid transparent;border-radius:var(--ius-radius-md)}.ius-selectmenu__search:focus-within{background:var(--ius-info-100);border-color:var(--ius-primary-500);box-shadow:var(--ius-focus-ring)}.ius-selectmenu__search .ius-icon{font-size:var(--ius-icon-md);color:var(--ius-text-tertiary);flex:0 0 auto}.ius-selectmenu__search input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary);min-width:0}.ius-selectmenu[data-size=large] .ius-selectmenu__search{padding:var(--ius-space-xs) var(--ius-space-sm)}.ius-selectmenu[data-size=large] .ius-selectmenu__search input{font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg)}@container style(--ius-control-size: large){.ius-selectmenu:not([data-size]) .ius-selectmenu__search{padding:var(--ius-space-xs) var(--ius-space-sm)}.ius-selectmenu:not([data-size]) .ius-selectmenu__search input{font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg)}}.ius-selectmenu__list{overflow-y:auto;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-selectmenu__group-label{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);padding:var(--ius-space-xs) var(--ius-space-sm) var(--ius-space-xxs)}.ius-selectmenu__empty{padding:var(--ius-space-lg) var(--ius-space-sm);text-align:center;font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary)}.ius-selectmenu__create{display:flex;align-items:center;gap:var(--ius-space-xs);border-top:1px solid var(--ius-stroke);margin-top:var(--ius-space-xxs);padding-top:var(--ius-space-xs)}.ius-selectmenu__create-field{flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:var(--ius-space-xs) var(--ius-space-sm);background:var(--ius-neutral-2);border:1px solid transparent;border-radius:var(--ius-radius-md)}.ius-selectmenu__create-field:focus-within{background:var(--ius-info-100);border-color:var(--ius-primary-500);box-shadow:var(--ius-focus-ring)}.ius-selectmenu__create-field input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary);min-width:0}.ius-selectmenu__create-action{display:inline-flex;align-items:center;flex:0 0 auto}.ius-selectmenu[data-size=large] .ius-selectmenu__create-field input{font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg)}\n"], dependencies: [{ kind: "component", type: OptionItemComponent, selector: "ius-option-item", inputs: ["label", "overline", "description", "icon", "selected", "multi", "active", "disabled", "size", "value", "state"], outputs: ["selectClicked"] }, { kind: "component", type: ChipComponent, selector: "ius-chip", inputs: ["label", "icon", "removable", "size", "disabled", "state", "removeLabel"], outputs: ["removed"] }, { kind: "component", type: PopoverComponent, selector: "ius-popover", inputs: ["title", "content", "placement", "trigger", "offset", "open", "defaultOpen", "showArrow", "disabled", "anchorRect", "padding", "dismissable", "panelClass"], outputs: ["openChange"] }, { kind: "component", type: TextButtonComponent, selector: "ius-text-button", inputs: ["label", "prefixIcon", "sufixIcon", "size", "disabled", "type", "ariaExpanded", "ariaControls"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7745
7782
|
}
|
|
7746
7783
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SelectComponent, decorators: [{
|
|
7747
7784
|
type: Component,
|
|
@@ -7759,7 +7796,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
7759
7796
|
'[attr.data-error]': 'isError() || null',
|
|
7760
7797
|
'[attr.data-disabled]': 'isDisabled() || null',
|
|
7761
7798
|
'[attr.data-force]': 'stateInput() || null',
|
|
7762
|
-
}, template: "@if (label != null) {\r\n <label [for]=\"baseId\" class=\"ius-tf__label\">\r\n @if (required) {\r\n <span class=\"ius-tf__required\" aria-hidden=\"true\"></span>\r\n }\r\n <span>{{ label }}</span>\r\n @if (showIconHelp) {\r\n <!-- El golden envuelve el \u00EDcono en <Popover placement=\"top\" trigger=\"hover\">\r\n (ambos son los defaults de `ius-popover`) \u2014 mismo patr\u00F3n que TextField. -->\r\n <ius-popover\r\n [title]=\"iconHelpTitle\"\r\n [content]=\"iconHelpContent\"\r\n [disabled]=\"iconHelpEmpty\"\r\n >\r\n <span\r\n class=\"ius-tf__help-icon\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n aria-label=\"Ayuda\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">help</span>\r\n </span>\r\n </ius-popover>\r\n }\r\n <span class=\"ius-tf__colon\">:</span>\r\n </label>\r\n}\r\n\r\n<div\r\n #field\r\n [id]=\"baseId\"\r\n class=\"ius-tf__field\"\r\n role=\"combobox\"\r\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-controls]=\"menuId\"\r\n [attr.aria-required]=\"required || null\"\r\n [attr.aria-invalid]=\"isError() || null\"\r\n (click)=\"toggleOpen()\"\r\n (keydown)=\"onTriggerKeyDown($event)\"\r\n>\r\n @if (prefixIcon) {\r\n <span class=\"ius-tf__prefix\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ prefixIcon }}</span>\r\n </span>\r\n }\r\n\r\n @if (multiple && hasValue()) {\r\n <div class=\"ius-select__chips\">\r\n @for (val of valueArray(); track val) {\r\n <ius-chip\r\n [removable]=\"!isDisabled()\"\r\n [size]=\"chipSize\"\r\n [label]=\"labelFor(val)\"\r\n [disabled]=\"isDisabled()\"\r\n (removed)=\"removeChip(val)\"\r\n />\r\n }\r\n </div>\r\n } @else {\r\n <span class=\"ius-select__value\" [attr.data-placeholder]=\"!hasValue() || null\">\r\n {{ hasValue() ? labelFor(singleValue()!) : placeholder }}\r\n </span>\r\n }\r\n\r\n <!--\r\n Espejo de `clearReserved` del golden: el bot\u00F3n entra en el flujo solo si el\r\n campo es \"clearable-capable\" (showClear !== false y habilitado). Dentro de\r\n ese caso el slot S\u00CD queda reservado con `visibility`, para que el chevron no\r\n se desplace al aparecer/quitar el valor (auditor\u00EDa 2026-07-24). Con\r\n `showClear=false` o `disabled` desaparece del flujo, como el golden.\r\n -->\r\n @if (clearReserved) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-tf__clear\"\r\n aria-label=\"Limpiar campo\"\r\n tabindex=\"-1\"\r\n [style.visibility]=\"showClearComputed ? 'visible' : 'hidden'\"\r\n [attr.aria-hidden]=\"showClearComputed ? null : 'true'\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (click)=\"clear($event)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">cancel</span>\r\n </button>\r\n }\r\n\r\n <span class=\"ius-select__chevron\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ isOpen() ? 'expand_less' : 'expand_more' }}</span>\r\n </span>\r\n</div>\r\n\r\n@if (showHint) {\r\n <span [id]=\"helpId\" class=\"ius-tf__hint\">{{ hint }}</span>\r\n}\r\n\r\n<ng-template #menuTpl>\r\n <div\r\n #menu\r\n [id]=\"menuId\"\r\n class=\"ius-selectmenu\"\r\n role=\"listbox\"\r\n [attr.aria-multiselectable]=\"multiple || null\"\r\n [attr.data-size]=\"size !== 'medium' ? size : null\"\r\n [style.width.px]=\"menuWidth()\"\r\n >\r\n @if (searchable) {\r\n <div class=\"ius-selectmenu__search\">\r\n <span translate=\"no\" class=\"ius-icon\">search</span>\r\n <input\r\n #search\r\n type=\"text\"\r\n [placeholder]=\"searchPlaceholder\"\r\n [attr.aria-label]=\"searchPlaceholder\"\r\n [value]=\"query()\"\r\n (input)=\"onSearch($event)\"\r\n (keydown)=\"onTriggerKeyDown($event)\"\r\n />\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"ius-selectmenu__list ius-scroll ius-scroll--sm\"\r\n [style.max-height.px]=\"listMaxH\"\r\n >\r\n @if (visible().flat.length === 0) {\r\n <div class=\"ius-selectmenu__empty\">{{ emptyText }}</div>\r\n } @else {\r\n @for (g of visible().groups; track $index) {\r\n @if (g.label) {\r\n <div class=\"ius-selectmenu__group-label\">{{ g.label }}</div>\r\n }\r\n @for (item of g.items; track item.opt.value) {\r\n <ius-option-item\r\n [label]=\"item.opt.label\"\r\n [overline]=\"item.opt.overline\"\r\n [icon]=\"item.opt.icon\"\r\n [size]=\"size\"\r\n [value]=\"item.opt.value\"\r\n [selected]=\"isChosen(item.opt.value)\"\r\n [multi]=\"multiple\"\r\n [active]=\"item.flatIndex === activeIndex()\"\r\n [disabled]=\"item.opt.disabled || false\"\r\n (selectClicked)=\"handleSelect(item.opt)\"\r\n />\r\n }\r\n }\r\n }\r\n </div>\r\n\r\n @if (creatable) {\r\n <!-- Pie \u00ABagregar opci\u00F3n\u00BB: campo propio (independiente de la b\u00FAsqueda) +\r\n `ius-text-button` con \u00EDcono `add`. El bot\u00F3n se compone, no se\r\n reimplementa; su interior es inalcanzable desde este SCSS\r\n (encapsulaci\u00F3n), por eso el `flex: 0 0 auto` del golden se aplica al\r\n envoltorio `.ius-selectmenu__create-action`, no al `.ius-txtbtn`. -->\r\n <div class=\"ius-selectmenu__create\">\r\n <div class=\"ius-selectmenu__create-field\">\r\n <input\r\n #createInput\r\n type=\"text\"\r\n [placeholder]=\"createPlaceholder\"\r\n [attr.aria-label]=\"createPlaceholder\"\r\n [value]=\"draft()\"\r\n (input)=\"onCreateInput($event)\"\r\n (keydown)=\"onCreateKeyDown($event)\"\r\n />\r\n </div>\r\n <span class=\"ius-selectmenu__create-action\">\r\n <ius-text-button\r\n prefixIcon=\"add\"\r\n [label]=\"createLabel\"\r\n [size]=\"createButtonSize\"\r\n [disabled]=\"createDisabled()\"\r\n (clicked)=\"addItem()\"\r\n />\r\n </span>\r\n </div>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{--_tf-bg: var(--ius-neutral-2);--_tf-border: transparent;--_tf-fg: var(--ius-text-primary);--_tf-placeholder: var(--ius-text-tertiary);--_tf-icon: var(--ius-text-secondary);--_tf-clear: var(--ius-neutral-7);--_tf-py: 9px;--_tf-px: 12px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-md);display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);min-width:200px;width:100%;max-width:360px}:host(.ius-tf--compact){min-width:0;width:auto;max-width:none}.ius-tf__label{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-tf__required{width:5px;height:5px;border-radius:50%;background:var(--ius-danger-500);display:inline-block;margin-right:var(--ius-space-xxs)}.ius-tf__help-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-7);cursor:help}.ius-tf__help-icon .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-tf__colon{color:var(--ius-text-secondary)}.ius-tf__field{display:flex;align-items:center;gap:var(--ius-space-xxs);padding:var(--_tf-py) var(--_tf-px);background:var(--_tf-bg);border:1px solid var(--_tf-border);border-radius:var(--ius-radius-md);transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}.ius-tf__field:hover,:host([data-force=hover]) .ius-tf__field{--_tf-bg: var(--ius-info-100);--_tf-border: transparent;--_tf-clear: var(--ius-primary-900)}:host([data-focused=true]) .ius-tf__field,:host([data-force=focused]) .ius-tf__field,.ius-tf__field:focus-within{--_tf-bg: var(--ius-info-100);--_tf-border: var(--ius-primary-500);--_tf-clear: var(--ius-primary-900);box-shadow:var(--ius-focus-ring)}:host([data-error=true]) .ius-tf__field,:host([data-force=error]) .ius-tf__field{--_tf-bg: var(--ius-danger-100);--_tf-border: var(--ius-danger-700);--_tf-clear: var(--ius-danger-700);box-shadow:none}:host([data-error=true][data-focused=true]) .ius-tf__field,:host([data-force=error]) .ius-tf__field{box-shadow:0 0 0 3px var(--ius-danger-200)}:host([data-disabled=true]) .ius-tf__field,:host([data-force=disabled]) .ius-tf__field{--_tf-bg: var(--ius-neutral-2);--_tf-border: transparent;--_tf-fg: var(--ius-text-disabled);--_tf-placeholder: var(--ius-text-disabled);--_tf-icon: var(--ius-text-disabled);box-shadow:none}:host([data-disabled=true]) .ius-tf__label,:host([data-force=disabled]) .ius-tf__label{color:var(--ius-text-disabled)}:host([data-disabled=true]) .ius-tf__required,:host([data-force=disabled]) .ius-tf__required{background:var(--ius-neutral-5)}.ius-tf__prefix{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-tf__prefix .ius-icon{font-size:var(--_tf-icon-size);line-height:1}.ius-tf__clear{appearance:none;border:0;padding:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--_tf-clear);cursor:pointer;flex:0 0 auto}.ius-tf__clear:hover{color:var(--ius-neutral-9)}.ius-tf__clear .ius-icon{font-size:calc(var(--_tf-icon-size) + 2px);line-height:1}:host([data-error=true]) .ius-tf__clear{color:var(--ius-danger-700)}:host([data-error=true]) .ius-tf__clear:hover{color:var(--ius-danger-800)}.ius-tf__hint{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);font-weight:var(--ius-fw-medium);font-style:italic;color:var(--ius-text-secondary);letter-spacing:.02em}:host([data-error=true]) .ius-tf__hint,:host([data-force=error]) .ius-tf__hint{color:var(--ius-danger-700)}:host([data-disabled=true]) .ius-tf__hint,:host([data-force=disabled]) .ius-tf__hint{color:var(--ius-text-disabled)}:host([data-size=small]){--_tf-py: 6px;--_tf-px: 10px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-sm)}:host([data-size=large]){--_tf-py: 12px;--_tf-px: 14px;--_tf-fs: var(--ius-fs-lg);--_tf-lh: var(--ius-lh-lg);--_tf-icon-size: var(--ius-icon-lg)}@container style(--ius-control-size: small){:host(:not([data-size])){--_tf-py: 6px;--_tf-px: 10px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-sm)}}@container style(--ius-control-size: large){:host(:not([data-size])){--_tf-py: 12px;--_tf-px: 14px;--_tf-fs: var(--ius-fs-lg);--_tf-lh: var(--ius-lh-lg);--_tf-icon-size: var(--ius-icon-lg)}}.ius-tf__field{cursor:pointer;gap:var(--ius-space-xs)}.ius-tf__field{flex-wrap:nowrap;align-items:center}:host(:has(.ius-select__chips)) .ius-tf__field{flex-wrap:wrap;align-items:flex-start}.ius-select__value,.ius-tf__prefix,.ius-select__chevron,.ius-tf__clear{align-self:center}:host(:has(.ius-select__chips)) .ius-select__chevron,:host(:has(.ius-select__chips)) .ius-tf__clear{align-self:flex-start}:host([data-disabled=true]) .ius-tf__field{cursor:not-allowed}.ius-select__value{flex:1 1 auto;min-width:0;font-size:var(--_tf-fs);line-height:var(--_tf-lh);color:var(--_tf-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-select__value[data-placeholder=true]{color:var(--_tf-placeholder)}.ius-select__chevron{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-select__chevron .ius-icon{font-size:calc(var(--_tf-icon-size) + 2px);line-height:1;transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-select__chips{display:flex;flex-wrap:wrap;gap:var(--ius-space-xs);flex:1 1 0;min-width:0}.ius-selectmenu{box-sizing:border-box;background:var(--ius-neutral-white);border-radius:var(--ius-radius-lg);box-shadow:var(--ius-elevation-300);padding:var(--ius-space-xs);display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);animation:ius-selectmenu-in .12s var(--ius-ease-decelerate)}@keyframes ius-selectmenu-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.ius-selectmenu__search{display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-xs);background:var(--ius-neutral-2);border:1px solid transparent;border-radius:var(--ius-radius-md)}.ius-selectmenu__search:focus-within{background:var(--ius-info-100);border-color:var(--ius-primary-500);box-shadow:var(--ius-focus-ring)}.ius-selectmenu__search .ius-icon{font-size:var(--ius-icon-md);color:var(--ius-text-tertiary);flex:0 0 auto}.ius-selectmenu__search input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary);min-width:0}.ius-selectmenu[data-size=large] .ius-selectmenu__search{padding:var(--ius-space-xs) var(--ius-space-sm)}.ius-selectmenu[data-size=large] .ius-selectmenu__search input{font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg)}@container style(--ius-control-size: large){.ius-selectmenu:not([data-size]) .ius-selectmenu__search{padding:var(--ius-space-xs) var(--ius-space-sm)}.ius-selectmenu:not([data-size]) .ius-selectmenu__search input{font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg)}}.ius-selectmenu__list{overflow-y:auto;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-selectmenu__group-label{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);padding:var(--ius-space-xs) var(--ius-space-sm) var(--ius-space-xxs)}.ius-selectmenu__empty{padding:var(--ius-space-lg) var(--ius-space-sm);text-align:center;font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary)}.ius-selectmenu__create{display:flex;align-items:center;gap:var(--ius-space-xs);border-top:1px solid var(--ius-stroke);margin-top:var(--ius-space-xxs);padding-top:var(--ius-space-xs)}.ius-selectmenu__create-field{flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:var(--ius-space-xs) var(--ius-space-sm);background:var(--ius-neutral-2);border:1px solid transparent;border-radius:var(--ius-radius-md)}.ius-selectmenu__create-field:focus-within{background:var(--ius-info-100);border-color:var(--ius-primary-500);box-shadow:var(--ius-focus-ring)}.ius-selectmenu__create-field input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary);min-width:0}.ius-selectmenu__create-action{display:inline-flex;align-items:center;flex:0 0 auto}.ius-selectmenu[data-size=large] .ius-selectmenu__create-field input{font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg)}\n"] }]
|
|
7799
|
+
}, template: "@if (label != null) {\r\n <label [for]=\"baseId\" class=\"ius-tf__label\">\r\n @if (required) {\r\n <span class=\"ius-tf__required\" aria-hidden=\"true\"></span>\r\n }\r\n <span>{{ label }}</span>\r\n @if (showIconHelp) {\r\n <!-- El golden envuelve el \u00EDcono en <Popover placement=\"top\" trigger=\"hover\">\r\n (ambos son los defaults de `ius-popover`) \u2014 mismo patr\u00F3n que TextField. -->\r\n <ius-popover\r\n [title]=\"iconHelpTitle\"\r\n [content]=\"iconHelpContent\"\r\n [disabled]=\"iconHelpEmpty\"\r\n >\r\n <span\r\n class=\"ius-tf__help-icon\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n aria-label=\"Ayuda\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">help</span>\r\n </span>\r\n </ius-popover>\r\n }\r\n <span class=\"ius-tf__colon\">:</span>\r\n </label>\r\n}\r\n\r\n<div\r\n #field\r\n [id]=\"baseId\"\r\n class=\"ius-tf__field\"\r\n role=\"combobox\"\r\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-controls]=\"menuId\"\r\n [attr.aria-required]=\"required || null\"\r\n [attr.aria-invalid]=\"isError() || null\"\r\n (click)=\"toggleOpen()\"\r\n (keydown)=\"onTriggerKeyDown($event)\"\r\n>\r\n @if (prefixIcon) {\r\n <span class=\"ius-tf__prefix\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ prefixIcon }}</span>\r\n </span>\r\n }\r\n\r\n @if (multiple && hasValue()) {\r\n <div class=\"ius-select__chips\">\r\n @for (val of valueArray(); track val) {\r\n <ius-chip\r\n [removable]=\"!isDisabled()\"\r\n [size]=\"chipSize\"\r\n [label]=\"labelFor(val)\"\r\n [disabled]=\"isDisabled()\"\r\n (removed)=\"removeChip(val)\"\r\n />\r\n }\r\n </div>\r\n } @else {\r\n <span class=\"ius-select__value\" [attr.data-placeholder]=\"!hasValue() || null\">\r\n {{ hasValue() ? labelFor(singleValue()!) : placeholder }}\r\n </span>\r\n }\r\n\r\n <!--\r\n Espejo de `clearReserved` del golden: el bot\u00F3n entra en el flujo solo si el\r\n campo es \"clearable-capable\" (showClear !== false y habilitado). Dentro de\r\n ese caso el slot S\u00CD queda reservado con `visibility`, para que el chevron no\r\n se desplace al aparecer/quitar el valor (auditor\u00EDa 2026-07-24). Con\r\n `showClear=false` o `disabled` desaparece del flujo, como el golden.\r\n -->\r\n @if (clearReserved) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-tf__clear\"\r\n aria-label=\"Limpiar campo\"\r\n tabindex=\"-1\"\r\n [style.visibility]=\"showClearComputed ? 'visible' : 'hidden'\"\r\n [attr.aria-hidden]=\"showClearComputed ? null : 'true'\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (click)=\"clear($event)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">cancel</span>\r\n </button>\r\n }\r\n\r\n <span class=\"ius-select__chevron\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ isOpen() ? 'expand_less' : 'expand_more' }}</span>\r\n </span>\r\n</div>\r\n\r\n@if (showHint) {\r\n <span [id]=\"helpId\" class=\"ius-tf__hint\">{{ hint }}</span>\r\n}\r\n\r\n<ng-template #menuTpl>\r\n <div\r\n #menu\r\n [id]=\"menuId\"\r\n class=\"ius-selectmenu\"\r\n role=\"listbox\"\r\n [attr.aria-multiselectable]=\"multiple || null\"\r\n [attr.data-size]=\"size !== 'medium' ? size : null\"\r\n [style.width.px]=\"menuWidth()\"\r\n >\r\n @if (searchable) {\r\n <div class=\"ius-selectmenu__search\">\r\n <span translate=\"no\" class=\"ius-icon\">search</span>\r\n <input\r\n #search\r\n type=\"text\"\r\n [placeholder]=\"searchPlaceholder\"\r\n [attr.aria-label]=\"searchPlaceholder\"\r\n [value]=\"query()\"\r\n (input)=\"onSearch($event)\"\r\n (keydown)=\"onTriggerKeyDown($event)\"\r\n />\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"ius-selectmenu__list ius-scroll ius-scroll--sm\"\r\n [style.max-height.px]=\"listMaxH\"\r\n >\r\n @if (visible().flat.length === 0) {\r\n <div class=\"ius-selectmenu__empty\">{{ emptyText }}</div>\r\n } @else {\r\n @for (g of visible().groups; track $index) {\r\n @if (g.label) {\r\n <div class=\"ius-selectmenu__group-label\">{{ g.label }}</div>\r\n }\r\n @for (item of g.items; track item.opt.value) {\r\n <ius-option-item\r\n [label]=\"item.opt.label\"\r\n [overline]=\"item.opt.overline\"\r\n [description]=\"item.opt.description\"\r\n [icon]=\"item.opt.icon\"\r\n [size]=\"size\"\r\n [value]=\"item.opt.value\"\r\n [selected]=\"isChosen(item.opt.value)\"\r\n [multi]=\"multiple\"\r\n [active]=\"item.flatIndex === activeIndex()\"\r\n [disabled]=\"item.opt.disabled || false\"\r\n (selectClicked)=\"handleSelect(item.opt)\"\r\n />\r\n }\r\n }\r\n }\r\n </div>\r\n\r\n @if (creatable) {\r\n <!-- Pie \u00ABagregar opci\u00F3n\u00BB: campo propio (independiente de la b\u00FAsqueda) +\r\n `ius-text-button` con \u00EDcono `add`. El bot\u00F3n se compone, no se\r\n reimplementa; su interior es inalcanzable desde este SCSS\r\n (encapsulaci\u00F3n), por eso el `flex: 0 0 auto` del golden se aplica al\r\n envoltorio `.ius-selectmenu__create-action`, no al `.ius-txtbtn`. -->\r\n <div class=\"ius-selectmenu__create\">\r\n <div class=\"ius-selectmenu__create-field\">\r\n <input\r\n #createInput\r\n type=\"text\"\r\n [placeholder]=\"createPlaceholder\"\r\n [attr.aria-label]=\"createPlaceholder\"\r\n [value]=\"draft()\"\r\n (input)=\"onCreateInput($event)\"\r\n (keydown)=\"onCreateKeyDown($event)\"\r\n />\r\n </div>\r\n <span class=\"ius-selectmenu__create-action\">\r\n <ius-text-button\r\n prefixIcon=\"add\"\r\n [label]=\"createLabel\"\r\n [size]=\"createButtonSize\"\r\n [disabled]=\"createDisabled()\"\r\n (clicked)=\"addItem()\"\r\n />\r\n </span>\r\n </div>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{--_tf-bg: var(--ius-neutral-2);--_tf-border: transparent;--_tf-fg: var(--ius-text-primary);--_tf-placeholder: var(--ius-text-tertiary);--_tf-icon: var(--ius-text-secondary);--_tf-clear: var(--ius-neutral-7);--_tf-py: 9px;--_tf-px: 12px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-md);display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);min-width:200px;width:100%;max-width:360px}:host(.ius-tf--compact){min-width:0;width:auto;max-width:none}.ius-tf__label{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-tf__required{width:5px;height:5px;border-radius:50%;background:var(--ius-danger-500);display:inline-block;margin-right:var(--ius-space-xxs)}.ius-tf__help-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-7);cursor:help}.ius-tf__help-icon .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-tf__colon{color:var(--ius-text-secondary)}.ius-tf__field{display:flex;align-items:center;gap:var(--ius-space-xxs);padding:var(--_tf-py) var(--_tf-px);background:var(--_tf-bg);border:1px solid var(--_tf-border);border-radius:var(--ius-radius-md);transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}.ius-tf__field:hover,:host([data-force=hover]) .ius-tf__field{--_tf-bg: var(--ius-info-100);--_tf-border: transparent;--_tf-clear: var(--ius-primary-900)}:host([data-focused=true]) .ius-tf__field,:host([data-force=focused]) .ius-tf__field,.ius-tf__field:focus-within{--_tf-bg: var(--ius-info-100);--_tf-border: var(--ius-primary-500);--_tf-clear: var(--ius-primary-900);box-shadow:var(--ius-focus-ring)}:host([data-error=true]) .ius-tf__field,:host([data-force=error]) .ius-tf__field{--_tf-bg: var(--ius-danger-100);--_tf-border: var(--ius-danger-700);--_tf-clear: var(--ius-danger-700);box-shadow:none}:host([data-error=true][data-focused=true]) .ius-tf__field,:host([data-force=error]) .ius-tf__field{box-shadow:0 0 0 3px var(--ius-danger-200)}:host([data-disabled=true]) .ius-tf__field,:host([data-force=disabled]) .ius-tf__field{--_tf-bg: var(--ius-neutral-2);--_tf-border: transparent;--_tf-fg: var(--ius-text-disabled);--_tf-placeholder: var(--ius-text-disabled);--_tf-icon: var(--ius-text-disabled);box-shadow:none}:host([data-disabled=true]) .ius-tf__label,:host([data-force=disabled]) .ius-tf__label{color:var(--ius-text-disabled)}:host([data-disabled=true]) .ius-tf__required,:host([data-force=disabled]) .ius-tf__required{background:var(--ius-neutral-5)}.ius-tf__prefix{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-tf__prefix .ius-icon{font-size:var(--_tf-icon-size);line-height:1}.ius-tf__clear{appearance:none;border:0;padding:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--_tf-clear);cursor:pointer;flex:0 0 auto}.ius-tf__clear:hover{color:var(--ius-neutral-9)}.ius-tf__clear .ius-icon{font-size:calc(var(--_tf-icon-size) + 2px);line-height:1}:host([data-error=true]) .ius-tf__clear{color:var(--ius-danger-700)}:host([data-error=true]) .ius-tf__clear:hover{color:var(--ius-danger-800)}.ius-tf__hint{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);font-weight:var(--ius-fw-medium);font-style:italic;color:var(--ius-text-secondary);letter-spacing:.02em}:host([data-error=true]) .ius-tf__hint,:host([data-force=error]) .ius-tf__hint{color:var(--ius-danger-700)}:host([data-disabled=true]) .ius-tf__hint,:host([data-force=disabled]) .ius-tf__hint{color:var(--ius-text-disabled)}:host([data-size=small]){--_tf-py: 6px;--_tf-px: 10px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-sm)}:host([data-size=large]){--_tf-py: 12px;--_tf-px: 14px;--_tf-fs: var(--ius-fs-lg);--_tf-lh: var(--ius-lh-lg);--_tf-icon-size: var(--ius-icon-lg)}@container style(--ius-control-size: small){:host(:not([data-size])){--_tf-py: 6px;--_tf-px: 10px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-sm)}}@container style(--ius-control-size: large){:host(:not([data-size])){--_tf-py: 12px;--_tf-px: 14px;--_tf-fs: var(--ius-fs-lg);--_tf-lh: var(--ius-lh-lg);--_tf-icon-size: var(--ius-icon-lg)}}.ius-tf__field{cursor:pointer;gap:var(--ius-space-xs)}.ius-tf__field{flex-wrap:nowrap;align-items:center}:host(:has(.ius-select__chips)) .ius-tf__field{flex-wrap:wrap;align-items:flex-start}.ius-select__value,.ius-tf__prefix,.ius-select__chevron,.ius-tf__clear{align-self:center}:host(:has(.ius-select__chips)) .ius-select__chevron,:host(:has(.ius-select__chips)) .ius-tf__clear{align-self:flex-start}:host([data-disabled=true]) .ius-tf__field{cursor:not-allowed}.ius-select__value{flex:1 1 auto;min-width:0;font-size:var(--_tf-fs);line-height:var(--_tf-lh);color:var(--_tf-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-select__value[data-placeholder=true]{color:var(--_tf-placeholder)}.ius-select__chevron{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-select__chevron .ius-icon{font-size:calc(var(--_tf-icon-size) + 2px);line-height:1;transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-select__chips{display:flex;flex-wrap:wrap;gap:var(--ius-space-xs);flex:1 1 0;min-width:0}.ius-selectmenu{box-sizing:border-box;background:var(--ius-neutral-white);border-radius:var(--ius-radius-lg);box-shadow:var(--ius-elevation-300);padding:var(--ius-space-xs);display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);animation:ius-selectmenu-in .12s var(--ius-ease-decelerate)}@keyframes ius-selectmenu-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.ius-selectmenu__search{display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-xs);background:var(--ius-neutral-2);border:1px solid transparent;border-radius:var(--ius-radius-md)}.ius-selectmenu__search:focus-within{background:var(--ius-info-100);border-color:var(--ius-primary-500);box-shadow:var(--ius-focus-ring)}.ius-selectmenu__search .ius-icon{font-size:var(--ius-icon-md);color:var(--ius-text-tertiary);flex:0 0 auto}.ius-selectmenu__search input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary);min-width:0}.ius-selectmenu[data-size=large] .ius-selectmenu__search{padding:var(--ius-space-xs) var(--ius-space-sm)}.ius-selectmenu[data-size=large] .ius-selectmenu__search input{font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg)}@container style(--ius-control-size: large){.ius-selectmenu:not([data-size]) .ius-selectmenu__search{padding:var(--ius-space-xs) var(--ius-space-sm)}.ius-selectmenu:not([data-size]) .ius-selectmenu__search input{font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg)}}.ius-selectmenu__list{overflow-y:auto;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-selectmenu__group-label{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);padding:var(--ius-space-xs) var(--ius-space-sm) var(--ius-space-xxs)}.ius-selectmenu__empty{padding:var(--ius-space-lg) var(--ius-space-sm);text-align:center;font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary)}.ius-selectmenu__create{display:flex;align-items:center;gap:var(--ius-space-xs);border-top:1px solid var(--ius-stroke);margin-top:var(--ius-space-xxs);padding-top:var(--ius-space-xs)}.ius-selectmenu__create-field{flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:var(--ius-space-xs) var(--ius-space-sm);background:var(--ius-neutral-2);border:1px solid transparent;border-radius:var(--ius-radius-md)}.ius-selectmenu__create-field:focus-within{background:var(--ius-info-100);border-color:var(--ius-primary-500);box-shadow:var(--ius-focus-ring)}.ius-selectmenu__create-field input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary);min-width:0}.ius-selectmenu__create-action{display:inline-flex;align-items:center;flex:0 0 auto}.ius-selectmenu[data-size=large] .ius-selectmenu__create-field input{font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg)}\n"] }]
|
|
7763
7800
|
}], propDecorators: { options: [{
|
|
7764
7801
|
type: Input
|
|
7765
7802
|
}], multiple: [{
|
|
@@ -7850,7 +7887,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
7850
7887
|
args: ['document:mousedown', ['$event']]
|
|
7851
7888
|
}], onEscape: [{
|
|
7852
7889
|
type: HostListener,
|
|
7853
|
-
args: ['document:keydown.escape']
|
|
7890
|
+
args: ['document:keydown.escape', ['$event']]
|
|
7854
7891
|
}] } });
|
|
7855
7892
|
|
|
7856
7893
|
/** Altura unificada de la fila por tamaño (espejo de SIZE_PRESETS del golden). */
|
|
@@ -11461,7 +11498,7 @@ class QueryBuilderComponent {
|
|
|
11461
11498
|
this.isOpen.set(false);
|
|
11462
11499
|
}
|
|
11463
11500
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: QueryBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11464
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: QueryBuilderComponent, isStandalone: true, selector: "ius-query-builder", inputs: { fields: { classPropertyName: "fields", publicName: "fields", 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 }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, addLabel: { classPropertyName: "addLabel", publicName: "addLabel", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, applyLabel: { classPropertyName: "applyLabel", publicName: "applyLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyHint: { classPropertyName: "emptyHint", publicName: "emptyHint", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply" }, host: { classAttribute: "ius-querybuilder" }, ngImport: i0, template: "<!--\r\n QueryBuilder \u2014 el Popover es el motor de anclaje; el disparador se proyecta\r\n como children y el panel como `[iusPopoverContent]`. Modo controlado\r\n (`[open]` + `(openChange)`) porque el borrador se re-siembra al abrir.\r\n `dismissable` queda apagado a prop\u00F3sito: ver el TSDoc de cabecera.\r\n-->\r\n<ius-popover\r\n trigger=\"click\"\r\n [placement]=\"placement()\"\r\n [showArrow]=\"false\"\r\n [offset]=\"8\"\r\n [open]=\"isOpen()\"\r\n panelClass=\"ius-querybuilder-pop\"\r\n (openChange)=\"onOpenChange($event)\"\r\n>\r\n <!-- \u2500\u2500 Disparador: bot\u00F3n \"Filtros\" con contador de reglas aplicadas \u2500\u2500 -->\r\n <button\r\n type=\"button\"\r\n class=\"ius-querybuilder__trigger\"\r\n [attr.data-open]=\"isOpen() ? 'true' : null\"\r\n [attr.data-active]=\"count() > 0 ? 'true' : null\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">filter_list</span>\r\n <span>{{ triggerLabel() }}</span>\r\n @if (count() > 0) {\r\n <span class=\"ius-querybuilder__count\">{{ count() }}</span>\r\n }\r\n <!-- Ligadura Material Symbols: el texto va pegado, sin espacios sueltos. -->\r\n <span translate=\"no\" class=\"ius-icon ius-querybuilder__chev\" aria-hidden=\"true\">expand_more</span>\r\n </button>\r\n\r\n <!-- \u2500\u2500 Panel: filas de criterio + footer (se estampa en el overlay) \u2500\u2500 -->\r\n <div iusPopoverContent class=\"ius-querybuilder__panel\">\r\n @if (draft().length === 0) {\r\n <div class=\"ius-querybuilder__empty\">\r\n <span class=\"ius-querybuilder__empty-t\">{{ emptyTitle() }}</span>\r\n <span class=\"ius-querybuilder__empty-h\">{{ emptyHint() }}</span>\r\n </div>\r\n } @else {\r\n <div class=\"ius-querybuilder__rows\">\r\n <!--\r\n `track row.id` (el RID incremental), NUNCA `$index`: al quitar una\r\n fila intermedia se reciclar\u00EDan los controles y los valores se\r\n cruzar\u00EDan entre filas.\r\n -->\r\n @for (row of draft(); track row.id; let i = $index) {\r\n <div class=\"ius-querybuilder__rule\">\r\n @if (i > 0) {\r\n <span class=\"ius-querybuilder__conj\">y</span>\r\n }\r\n\r\n <!--\r\n Orden de elementos del grid (lo usa el `:nth-child(3)` del\r\n responsive): campo \u00B7 operador \u00B7 valor \u00B7 quitar. Los bloques\r\n `@if` solo dejan comentarios, que no cuentan como elementos.\r\n -->\r\n <div class=\"ius-querybuilder__row\">\r\n <ius-select\r\n [options]=\"fieldOptionsFor(row.id)\"\r\n [value]=\"row.field\"\r\n [size]=\"size()\"\r\n [searchable]=\"fieldsSearchable()\"\r\n [showClear]=\"false\"\r\n [showHelpText]=\"false\"\r\n (valueChange)=\"onFieldChange(row.id, $event)\"\r\n />\r\n\r\n <ius-select\r\n [options]=\"operatorOptions(row.field)\"\r\n [value]=\"row.operator\"\r\n [size]=\"size()\"\r\n [searchable]=\"false\"\r\n [showClear]=\"false\"\r\n [showHelpText]=\"false\"\r\n (valueChange)=\"onOperatorChange(row.id, $event)\"\r\n />\r\n\r\n @if (typeOf(row.field) === 'enum') {\r\n <ius-select\r\n [options]=\"valueOptions(row.field)\"\r\n [value]=\"selectValue(row.value)\"\r\n placeholder=\"Selecciona un valor\"\r\n [size]=\"size()\"\r\n [searchable]=\"valueSearchable(row.field)\"\r\n [showClear]=\"false\"\r\n [showHelpText]=\"false\"\r\n (valueChange)=\"onValueChange(row.id, $event)\"\r\n />\r\n } @else {\r\n <!--\r\n `[ngModel]` de una v\u00EDa: TextField expone su valor solo por\r\n CVA y hace falta poder vaciarlo al cambiar el campo.\r\n -->\r\n <ius-text-field\r\n [ngModel]=\"textValue(row.value)\"\r\n (ngModelChange)=\"onTextValueChange(row.id, $event)\"\r\n [placeholder]=\"valuePlaceholder(row.field)\"\r\n [size]=\"size()\"\r\n [showHelpText]=\"false\"\r\n />\r\n }\r\n\r\n <ius-icon-button\r\n icon=\"close\"\r\n variant=\"tertiary\"\r\n [size]=\"size()\"\r\n ariaLabel=\"Quitar filtro\"\r\n (clicked)=\"removeRow(row.id)\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- \u2500\u2500 Footer: a\u00F1adir \u00B7 limpiar \u00B7 aplicar (staged) \u2500\u2500 -->\r\n <div class=\"ius-querybuilder__foot\">\r\n <ius-text-button\r\n [label]=\"addLabel()\"\r\n prefixIcon=\"add\"\r\n [size]=\"size()\"\r\n [disabled]=\"atCap()\"\r\n (clicked)=\"addRow()\"\r\n />\r\n <span class=\"ius-querybuilder__foot-r\">\r\n @if (draft().length) {\r\n <ius-text-button\r\n [label]=\"clearLabel()\"\r\n [size]=\"size()\"\r\n (clicked)=\"clearAll()\"\r\n />\r\n }\r\n <ius-button\r\n variant=\"primary\"\r\n [size]=\"size()\"\r\n [label]=\"applyText()\"\r\n [disabled]=\"applyDisabled()\"\r\n (clicked)=\"applyDraft()\"\r\n />\r\n </span>\r\n </div>\r\n </div>\r\n</ius-popover>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center}.ius-querybuilder__trigger{appearance:none;display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-body);font-size:var(--ius-fs-base);line-height:1;color:var(--ius-text-primary);background:var(--ius-neutral-white);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);padding:var(--ius-space-xs) var(--ius-space-sm);cursor:pointer;transition:border-color var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard);-webkit-user-select:none;user-select:none}.ius-querybuilder__trigger:hover{border-color:var(--ius-primary-500);color:var(--ius-primary-900)}.ius-querybuilder__trigger:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-querybuilder__trigger[data-active=true]{border-color:var(--ius-primary-500);color:var(--ius-primary-900)}.ius-querybuilder__trigger .ius-icon{font-size:var(--ius-icon-md)}.ius-querybuilder__count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 var(--ius-space-xxs);border-radius:var(--ius-radius-pill);background:var(--ius-primary-900);color:var(--ius-neutral-white);font-size:var(--ius-fs-sm);font-variant-numeric:tabular-nums;line-height:1}.ius-querybuilder__chev{font-size:var(--ius-icon-md);color:var(--ius-text-tertiary);transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-querybuilder__trigger[data-open=true] .ius-querybuilder__chev{transform:rotate(180deg)}.ius-querybuilder__panel{display:flex;flex-direction:column;gap:var(--ius-space-md);width:min(720px,100vw - var(--ius-space-2xl));max-width:100%;box-sizing:border-box}.ius-querybuilder__rows{display:flex;flex-direction:column;gap:var(--ius-space-sm)}.ius-querybuilder__rule{display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-querybuilder__conj{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary);padding-left:var(--ius-space-xxs)}.ius-querybuilder__row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr) minmax(0,1.7fr) auto;gap:var(--ius-space-sm);align-items:center}.ius-querybuilder__row>*{min-width:0}.ius-querybuilder__row ::ng-deep .ius-tf__field{flex-wrap:nowrap}.ius-querybuilder__empty{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ius-space-xs);padding:var(--ius-space-xs) 0}.ius-querybuilder__empty-t{font-family:var(--ius-font-display);font-weight:var(--ius-fw-bold, 700);font-size:var(--ius-fs-base);color:var(--ius-text-primary)}.ius-querybuilder__empty-h{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary)}.ius-querybuilder__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--ius-space-sm);border-top:1px solid var(--ius-stroke);padding-top:var(--ius-space-md)}.ius-querybuilder__foot-r{display:inline-flex;align-items:center;gap:var(--ius-space-sm)}@media(max-width:600px){.ius-querybuilder__row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}.ius-querybuilder__row>:nth-child(3){grid-column:1/3}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: SelectComponent, selector: "ius-select", inputs: ["options", "multiple", "size", "disabled", "error", "state", "open", "value", "label", "required", "placeholder", "prefixIcon", "searchable", "searchPlaceholder", "emptyText", "creatable", "createPlaceholder", "createLabel", "createFactory", "maxVisible", "helpText", "errorText", "showHelpText", "showIconHelp", "iconHelpTitle", "iconHelpContent", "showClear", "defaultOpen", "compact", "defaultValue", "id", "name"], outputs: ["valueChange", "cleared", "openChange", "created"] }, { kind: "component", type: TextFieldComponent, selector: "ius-text-field", inputs: ["label", "placeholder", "required", "prefixIcon", "showClear", "helpText", "errorText", "showHelpText", "showIconHelp", "iconHelpTitle", "iconHelpContent", "error", "name", "autocomplete", "type", "size", "disabled"], outputs: ["valueChange", "cleared"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "ariaPressed", "tooltipPlacement"], outputs: ["clicked"] }, { 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: TextButtonComponent, selector: "ius-text-button", inputs: ["label", "prefixIcon", "sufixIcon", "size", "disabled", "type", "ariaExpanded", "ariaControls"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
11501
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: QueryBuilderComponent, isStandalone: true, selector: "ius-query-builder", inputs: { fields: { classPropertyName: "fields", publicName: "fields", 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 }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, addLabel: { classPropertyName: "addLabel", publicName: "addLabel", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, applyLabel: { classPropertyName: "applyLabel", publicName: "applyLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyHint: { classPropertyName: "emptyHint", publicName: "emptyHint", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply" }, host: { classAttribute: "ius-querybuilder" }, ngImport: i0, template: "<!--\r\n QueryBuilder \u2014 el Popover es el motor de anclaje; el disparador se proyecta\r\n como children y el panel como `[iusPopoverContent]`. Modo controlado\r\n (`[open]` + `(openChange)`) porque el borrador se re-siembra al abrir.\r\n `dismissable` queda apagado a prop\u00F3sito: ver el TSDoc de cabecera.\r\n-->\r\n<ius-popover\r\n trigger=\"click\"\r\n [placement]=\"placement()\"\r\n [showArrow]=\"false\"\r\n [offset]=\"8\"\r\n [open]=\"isOpen()\"\r\n panelClass=\"ius-querybuilder-pop\"\r\n (openChange)=\"onOpenChange($event)\"\r\n>\r\n <!-- \u2500\u2500 Disparador: bot\u00F3n \"Filtros\" con contador de reglas aplicadas \u2500\u2500 -->\r\n <button\r\n type=\"button\"\r\n class=\"ius-querybuilder__trigger\"\r\n [attr.data-open]=\"isOpen() ? 'true' : null\"\r\n [attr.data-active]=\"count() > 0 ? 'true' : null\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">filter_list</span>\r\n <span>{{ triggerLabel() }}</span>\r\n @if (count() > 0) {\r\n <span class=\"ius-querybuilder__count\">{{ count() }}</span>\r\n }\r\n <!-- Ligadura Material Symbols: el texto va pegado, sin espacios sueltos. -->\r\n <span translate=\"no\" class=\"ius-icon ius-querybuilder__chev\" aria-hidden=\"true\">expand_more</span>\r\n </button>\r\n\r\n <!-- \u2500\u2500 Panel: filas de criterio + footer (se estampa en el overlay) \u2500\u2500 -->\r\n <div iusPopoverContent class=\"ius-querybuilder__panel\">\r\n @if (draft().length === 0) {\r\n <div class=\"ius-querybuilder__empty\">\r\n <span class=\"ius-querybuilder__empty-t\">{{ emptyTitle() }}</span>\r\n <span class=\"ius-querybuilder__empty-h\">{{ emptyHint() }}</span>\r\n </div>\r\n } @else {\r\n <div class=\"ius-querybuilder__rows\">\r\n <!--\r\n `track row.id` (el RID incremental), NUNCA `$index`: al quitar una\r\n fila intermedia se reciclar\u00EDan los controles y los valores se\r\n cruzar\u00EDan entre filas.\r\n -->\r\n @for (row of draft(); track row.id; let i = $index) {\r\n <div class=\"ius-querybuilder__rule\">\r\n @if (i > 0) {\r\n <span class=\"ius-querybuilder__conj\">y</span>\r\n }\r\n\r\n <!--\r\n Orden de elementos del grid (lo usa el `:nth-child(3)` del\r\n responsive): campo \u00B7 operador \u00B7 valor \u00B7 quitar. Los bloques\r\n `@if` solo dejan comentarios, que no cuentan como elementos.\r\n -->\r\n <div class=\"ius-querybuilder__row\">\r\n <ius-select\r\n [options]=\"fieldOptionsFor(row.id)\"\r\n [value]=\"row.field\"\r\n [size]=\"size()\"\r\n [searchable]=\"fieldsSearchable()\"\r\n [showClear]=\"false\"\r\n [showHelpText]=\"false\"\r\n (valueChange)=\"onFieldChange(row.id, $event)\"\r\n />\r\n\r\n <ius-select\r\n [options]=\"operatorOptions(row.field)\"\r\n [value]=\"row.operator\"\r\n [size]=\"size()\"\r\n [searchable]=\"false\"\r\n [showClear]=\"false\"\r\n [showHelpText]=\"false\"\r\n (valueChange)=\"onOperatorChange(row.id, $event)\"\r\n />\r\n\r\n @if (typeOf(row.field) === 'enum') {\r\n <ius-select\r\n [options]=\"valueOptions(row.field)\"\r\n [value]=\"selectValue(row.value)\"\r\n placeholder=\"Selecciona un valor\"\r\n [size]=\"size()\"\r\n [searchable]=\"valueSearchable(row.field)\"\r\n [showClear]=\"false\"\r\n [showHelpText]=\"false\"\r\n (valueChange)=\"onValueChange(row.id, $event)\"\r\n />\r\n } @else {\r\n <!--\r\n `[ngModel]` de una v\u00EDa: TextField expone su valor solo por\r\n CVA y hace falta poder vaciarlo al cambiar el campo.\r\n -->\r\n <ius-text-field\r\n [ngModel]=\"textValue(row.value)\"\r\n (ngModelChange)=\"onTextValueChange(row.id, $event)\"\r\n [placeholder]=\"valuePlaceholder(row.field)\"\r\n [size]=\"size()\"\r\n [showHelpText]=\"false\"\r\n />\r\n }\r\n\r\n <ius-icon-button\r\n icon=\"close\"\r\n variant=\"tertiary\"\r\n [size]=\"size()\"\r\n ariaLabel=\"Quitar filtro\"\r\n (clicked)=\"removeRow(row.id)\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- \u2500\u2500 Footer: a\u00F1adir \u00B7 limpiar \u00B7 aplicar (staged) \u2500\u2500 -->\r\n <div class=\"ius-querybuilder__foot\">\r\n <ius-text-button\r\n [label]=\"addLabel()\"\r\n prefixIcon=\"add\"\r\n [size]=\"size()\"\r\n [disabled]=\"atCap()\"\r\n (clicked)=\"addRow()\"\r\n />\r\n <span class=\"ius-querybuilder__foot-r\">\r\n @if (draft().length) {\r\n <ius-text-button\r\n [label]=\"clearLabel()\"\r\n [size]=\"size()\"\r\n (clicked)=\"clearAll()\"\r\n />\r\n }\r\n <ius-button\r\n variant=\"primary\"\r\n [size]=\"size()\"\r\n [label]=\"applyText()\"\r\n [disabled]=\"applyDisabled()\"\r\n (clicked)=\"applyDraft()\"\r\n />\r\n </span>\r\n </div>\r\n </div>\r\n</ius-popover>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center}.ius-querybuilder__trigger{appearance:none;display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-body);font-size:var(--ius-fs-base);line-height:1;color:var(--ius-text-primary);background:var(--ius-neutral-white);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);padding:var(--ius-space-xs) var(--ius-space-sm);cursor:pointer;transition:border-color var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard);-webkit-user-select:none;user-select:none}.ius-querybuilder__trigger:hover{border-color:var(--ius-primary-500);color:var(--ius-primary-900)}.ius-querybuilder__trigger:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-querybuilder__trigger[data-active=true]{border-color:var(--ius-primary-500);color:var(--ius-primary-900)}.ius-querybuilder__trigger .ius-icon{font-size:var(--ius-icon-md)}.ius-querybuilder__count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 var(--ius-space-xxs);border-radius:var(--ius-radius-pill);background:var(--ius-primary-900);color:var(--ius-neutral-white);font-size:var(--ius-fs-sm);font-variant-numeric:tabular-nums;line-height:1}.ius-querybuilder__chev{font-size:var(--ius-icon-md);color:var(--ius-text-tertiary);transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-querybuilder__trigger[data-open=true] .ius-querybuilder__chev{transform:rotate(180deg)}.ius-querybuilder__panel{display:flex;flex-direction:column;gap:var(--ius-space-md);width:min(720px,100vw - var(--ius-space-2xl));max-width:100%;box-sizing:border-box}.ius-querybuilder__rows{display:flex;flex-direction:column;gap:var(--ius-space-sm)}.ius-querybuilder__rule{display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-querybuilder__conj{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary);padding-left:var(--ius-space-xxs)}.ius-querybuilder__row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr) minmax(0,1.7fr) auto;gap:var(--ius-space-sm);align-items:center}.ius-querybuilder__row>*{min-width:0}.ius-querybuilder__row ::ng-deep .ius-tf__field{flex-wrap:nowrap}.ius-querybuilder__empty{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ius-space-xs);padding:var(--ius-space-xs) 0}.ius-querybuilder__empty-t{font-family:var(--ius-font-display);font-weight:var(--ius-fw-bold, 700);font-size:var(--ius-fs-base);color:var(--ius-text-primary)}.ius-querybuilder__empty-h{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary)}.ius-querybuilder__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--ius-space-sm);border-top:1px solid var(--ius-stroke);padding-top:var(--ius-space-md)}.ius-querybuilder__foot-r{display:inline-flex;align-items:center;gap:var(--ius-space-sm)}@media(max-width:600px){.ius-querybuilder__row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}.ius-querybuilder__row>:nth-child(3){grid-column:1/3}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: SelectComponent, selector: "ius-select", inputs: ["options", "multiple", "size", "disabled", "error", "state", "open", "value", "label", "required", "placeholder", "prefixIcon", "searchable", "searchPlaceholder", "emptyText", "creatable", "createPlaceholder", "createLabel", "createFactory", "maxVisible", "helpText", "errorText", "showHelpText", "showIconHelp", "iconHelpTitle", "iconHelpContent", "showClear", "defaultOpen", "compact", "defaultValue", "id", "name"], outputs: ["valueChange", "cleared", "openChange", "created"] }, { kind: "component", type: TextFieldComponent, selector: "ius-text-field", inputs: ["label", "placeholder", "required", "prefixIcon", "showClear", "helpText", "errorText", "showHelpText", "showIconHelp", "iconHelpTitle", "iconHelpContent", "error", "name", "autocomplete", "type", "inputMode", "maxLength", "size", "disabled"], outputs: ["valueChange", "cleared"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "ariaPressed", "tooltipPlacement"], outputs: ["clicked"] }, { 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: TextButtonComponent, selector: "ius-text-button", inputs: ["label", "prefixIcon", "sufixIcon", "size", "disabled", "type", "ariaExpanded", "ariaControls"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
11465
11502
|
}
|
|
11466
11503
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: QueryBuilderComponent, decorators: [{
|
|
11467
11504
|
type: Component,
|
|
@@ -12304,7 +12341,7 @@ class SettingsNavComponent {
|
|
|
12304
12341
|
this.visibleCount.set(count);
|
|
12305
12342
|
}
|
|
12306
12343
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SettingsNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12307
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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 }); }
|
|
12344
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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", "description", "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 }); }
|
|
12308
12345
|
}
|
|
12309
12346
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SettingsNavComponent, decorators: [{
|
|
12310
12347
|
type: Component,
|
|
@@ -12852,6 +12889,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
12852
12889
|
}, 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"] }]
|
|
12853
12890
|
}], 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 }] }] } });
|
|
12854
12891
|
|
|
12892
|
+
/** Desborde mínimo (px) para considerar un área desplazable; absorbe el redondeo de alturas. */
|
|
12893
|
+
const TOLERANCIA_DESBORDE = 2;
|
|
12855
12894
|
/** Normaliza `open`/`defaultOpen` a lista; en exclusivo se queda con el primero. */
|
|
12856
12895
|
function normalizeOpen(value, multiple) {
|
|
12857
12896
|
if (value == null)
|
|
@@ -12859,6 +12898,25 @@ function normalizeOpen(value, multiple) {
|
|
|
12859
12898
|
const list = Array.isArray(value) ? [...value] : [value];
|
|
12860
12899
|
return multiple ? list : list.slice(0, 1);
|
|
12861
12900
|
}
|
|
12901
|
+
/** Número = px; string = valor CSS tal cual. */
|
|
12902
|
+
function longitudCss(valor) {
|
|
12903
|
+
if (valor == null)
|
|
12904
|
+
return null;
|
|
12905
|
+
return typeof valor === 'number' ? `${valor}px` : valor;
|
|
12906
|
+
}
|
|
12907
|
+
/** Duración total (duración + retraso) de la transición más larga del elemento, en ms. */
|
|
12908
|
+
function duracionTransicion(el) {
|
|
12909
|
+
if (!el || typeof getComputedStyle === 'undefined')
|
|
12910
|
+
return 0;
|
|
12911
|
+
const cs = getComputedStyle(el);
|
|
12912
|
+
const aMs = (v) => (v.trim().endsWith('ms') ? parseFloat(v) : parseFloat(v) * 1000) || 0;
|
|
12913
|
+
const duraciones = cs.transitionDuration.split(',').map(aMs);
|
|
12914
|
+
const retrasos = cs.transitionDelay.split(',').map(aMs);
|
|
12915
|
+
return duraciones.reduce((max, d, i) => Math.max(max, d + (retrasos[i] || 0)), 0);
|
|
12916
|
+
}
|
|
12917
|
+
function desborda(el) {
|
|
12918
|
+
return el.scrollHeight - el.clientHeight > TOLERANCIA_DESBORDE;
|
|
12919
|
+
}
|
|
12862
12920
|
let uid$9 = 0;
|
|
12863
12921
|
/**
|
|
12864
12922
|
* Accordion — Ius Design v2 (familia data-display).
|
|
@@ -12880,6 +12938,16 @@ let uid$9 = 0;
|
|
|
12880
12938
|
* />
|
|
12881
12939
|
* ```
|
|
12882
12940
|
*
|
|
12941
|
+
* **Acciones por sección** (`items[i].actions`): botones de ícono en la cabecera, hermanos del
|
|
12942
|
+
* botón de plegar (nunca anidados), superpuestos antes del chevron. El botón reserva su ancho
|
|
12943
|
+
* medido con un hueco, así el título se corta con elipsis antes de desplazarlas. Con más de
|
|
12944
|
+
* `maxVisibleActions`, se ven las primeras `max − 1` y el resto va al menú «Más acciones».
|
|
12945
|
+
*
|
|
12946
|
+
* **Alto** (`fill` · `fillMinHeight` · `panelMaxHeight`): con `fill` (solo exclusivo) llena el
|
|
12947
|
+
* alto del padre y la sección abierta se desplaza por dentro; `panelMaxHeight` pone un tope al
|
|
12948
|
+
* cuerpo. La barra de scroll solo aparece con el panel asentado (`transitionend`) y un desborde
|
|
12949
|
+
* real de más de 2 px, nunca durante la animación.
|
|
12950
|
+
*
|
|
12883
12951
|
* No lo uses para navegar entre páginas (Tabs/Breadcrumb) ni para esconder
|
|
12884
12952
|
* acciones críticas.
|
|
12885
12953
|
*
|
|
@@ -12914,8 +12982,33 @@ class AccordionComponent {
|
|
|
12914
12982
|
/** Ícono del chevron; rota 180° al abrir. */
|
|
12915
12983
|
this.chevronIcon = input('expand_more', /* @ts-ignore */
|
|
12916
12984
|
...(ngDevMode ? [{ debugName: "chevronIcon" }] : /* istanbul ignore next */ []));
|
|
12985
|
+
/**
|
|
12986
|
+
* Máximo de acciones visibles por ítem. Con más, se ven las primeras `max − 1` y un
|
|
12987
|
+
* `more_vert` («Más acciones») abre un Dropdown con el resto. Con exactamente `max`, todas.
|
|
12988
|
+
*/
|
|
12989
|
+
this.maxVisibleActions = input(3, { ...(ngDevMode ? { debugName: "maxVisibleActions" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
12990
|
+
/**
|
|
12991
|
+
* Solo exclusivo: llena el alto del padre, las cabeceras quedan siempre visibles y la
|
|
12992
|
+
* sección abierta toma el alto restante con scroll propio. Con `multiple` se ignora.
|
|
12993
|
+
*/
|
|
12994
|
+
this.fill = input(false, { ...(ngDevMode ? { debugName: "fill" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
12995
|
+
/** Densidad: `small` → cabecera ~48 px, título `fs-base`, chevron `icon-md`. */
|
|
12996
|
+
this.size = input('medium', /* @ts-ignore */
|
|
12997
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
12998
|
+
/**
|
|
12999
|
+
* Con `fill`: alto mínimo de la sección abierta (cabecera + contenido). Si las cabeceras
|
|
13000
|
+
* más este mínimo no caben, el acordeón entero se desplaza. Número = px. Default 160 (CSS).
|
|
13001
|
+
*/
|
|
13002
|
+
this.fillMinHeight = input(undefined, /* @ts-ignore */
|
|
13003
|
+
...(ngDevMode ? [{ debugName: "fillMinHeight" }] : /* istanbul ignore next */ []));
|
|
13004
|
+
/** Tope del cuerpo de cada sección, con scroll interno. Número = px. Ignorado con `fill`. */
|
|
13005
|
+
this.panelMaxHeight = input(undefined, /* @ts-ignore */
|
|
13006
|
+
...(ngDevMode ? [{ debugName: "panelMaxHeight" }] : /* istanbul ignore next */ []));
|
|
12917
13007
|
/** `id | null` en exclusivo, `id[]` en `multiple` (el `onChange` del golden). */
|
|
12918
13008
|
this.openChange = output();
|
|
13009
|
+
/** Clic en una acción de cabecera, visible o del menú de desborde. */
|
|
13010
|
+
this.actionClick = output();
|
|
13011
|
+
this.host = inject(ElementRef);
|
|
12919
13012
|
/** Apertura propia del modo no controlado (`null` = aún sin tocar). */
|
|
12920
13013
|
this.picked = signal(null, /* @ts-ignore */
|
|
12921
13014
|
...(ngDevMode ? [{ debugName: "picked" }] : /* istanbul ignore next */ []));
|
|
@@ -12935,6 +13028,126 @@ class AccordionComponent {
|
|
|
12935
13028
|
return normalizeOpen(this.defaultOpen(), this.multiple());
|
|
12936
13029
|
}, /* @ts-ignore */
|
|
12937
13030
|
...(ngDevMode ? [{ debugName: "openIds" }] : /* istanbul ignore next */ []));
|
|
13031
|
+
/** `fill` solo aplica al modo exclusivo (una sección abierta toma el alto restante). */
|
|
13032
|
+
this.esFill = computed(() => this.fill() && !this.multiple(), /* @ts-ignore */
|
|
13033
|
+
...(ngDevMode ? [{ debugName: "esFill" }] : /* istanbul ignore next */ []));
|
|
13034
|
+
this.topado = computed(() => !this.esFill() && this.panelMaxHeight() != null, /* @ts-ignore */
|
|
13035
|
+
...(ngDevMode ? [{ debugName: "topado" }] : /* istanbul ignore next */ []));
|
|
13036
|
+
this.tope = computed(() => longitudCss(this.panelMaxHeight()), /* @ts-ignore */
|
|
13037
|
+
...(ngDevMode ? [{ debugName: "tope" }] : /* istanbul ignore next */ []));
|
|
13038
|
+
this.minimoFill = computed(() => longitudCss(this.fillMinHeight()), /* @ts-ignore */
|
|
13039
|
+
...(ngDevMode ? [{ debugName: "minimoFill" }] : /* istanbul ignore next */ []));
|
|
13040
|
+
/** Con scroll propio en el cuerpo (fill o tope). */
|
|
13041
|
+
this.conScroll = computed(() => this.esFill() || this.topado(), /* @ts-ignore */
|
|
13042
|
+
...(ngDevMode ? [{ debugName: "conScroll" }] : /* istanbul ignore next */ []));
|
|
13043
|
+
/** Visibles y desborde por ítem, memoizados: el menú no se rehace en cada detección. */
|
|
13044
|
+
this.acciones = computed(() => {
|
|
13045
|
+
const limite = Math.max(1, this.maxVisibleActions());
|
|
13046
|
+
return this.items().map((item, i) => {
|
|
13047
|
+
const lista = item.actions ?? [];
|
|
13048
|
+
const hayDesborde = lista.length > limite;
|
|
13049
|
+
const visibles = hayDesborde ? lista.slice(0, limite - 1) : lista;
|
|
13050
|
+
const resto = hayDesborde ? lista.slice(limite - 1) : [];
|
|
13051
|
+
const itemId = this.idOf(item, i);
|
|
13052
|
+
return {
|
|
13053
|
+
visibles,
|
|
13054
|
+
desborde: resto.map((a) => ({
|
|
13055
|
+
key: a.key,
|
|
13056
|
+
icon: a.icon,
|
|
13057
|
+
label: a.label,
|
|
13058
|
+
danger: a.danger,
|
|
13059
|
+
disabled: a.disabled,
|
|
13060
|
+
onClick: (event) => this.actionClick.emit({ itemId, actionKey: a.key, event }),
|
|
13061
|
+
})),
|
|
13062
|
+
};
|
|
13063
|
+
});
|
|
13064
|
+
}, /* @ts-ignore */
|
|
13065
|
+
...(ngDevMode ? [{ debugName: "acciones" }] : /* istanbul ignore next */ []));
|
|
13066
|
+
// ── Asentado de los paneles (scroll sin falsos positivos) ───────────────────
|
|
13067
|
+
/** Ítems abiertos cuya animación de apertura ya terminó (`data-settled`). */
|
|
13068
|
+
this.asentadas = signal(new Set(), /* @ts-ignore */
|
|
13069
|
+
...(ngDevMode ? [{ debugName: "asentadas" }] : /* istanbul ignore next */ []));
|
|
13070
|
+
this.aperturaPrevia = null;
|
|
13071
|
+
/** Cuerpos con desborde real (`data-scrollable`). */
|
|
13072
|
+
this.desbordadas = signal(new Set(), /* @ts-ignore */
|
|
13073
|
+
...(ngDevMode ? [{ debugName: "desbordadas" }] : /* istanbul ignore next */ []));
|
|
13074
|
+
/** Raíz con `fill` desbordada. */
|
|
13075
|
+
this.raizDesborda = signal(false, /* @ts-ignore */
|
|
13076
|
+
...(ngDevMode ? [{ debugName: "raizDesborda" }] : /* istanbul ignore next */ []));
|
|
13077
|
+
/** Ancho medido del bloque de acciones de cada ítem (reserva su hueco en el botón). */
|
|
13078
|
+
this.anchos = signal(new Map(), /* @ts-ignore */
|
|
13079
|
+
...(ngDevMode ? [{ debugName: "anchos" }] : /* istanbul ignore next */ []));
|
|
13080
|
+
/**
|
|
13081
|
+
* Raíz con `fill`: mientras una sección se abre o se cierra, la suma de alturas desborda un
|
|
13082
|
+
* instante. «Ocupada» se deriva en el mismo cálculo que cambia la sección abierta (clave
|
|
13083
|
+
* abierta ≠ última clave asentada), así `data-scrollable` nunca sale ni un cuadro.
|
|
13084
|
+
*/
|
|
13085
|
+
this.claveAsentada = signal(null, /* @ts-ignore */
|
|
13086
|
+
...(ngDevMode ? [{ debugName: "claveAsentada" }] : /* istanbul ignore next */ []));
|
|
13087
|
+
this.claveAbierta = computed(() => this.openIds().join('|'), /* @ts-ignore */
|
|
13088
|
+
...(ngDevMode ? [{ debugName: "claveAbierta" }] : /* istanbul ignore next */ []));
|
|
13089
|
+
this.raizOcupada = computed(() => {
|
|
13090
|
+
const asentada = this.claveAsentada();
|
|
13091
|
+
return this.esFill() && asentada !== null && this.claveAbierta() !== asentada;
|
|
13092
|
+
}, /* @ts-ignore */
|
|
13093
|
+
...(ngDevMode ? [{ debugName: "raizOcupada" }] : /* istanbul ignore next */ []));
|
|
13094
|
+
// Raíz: la clave abierta se asienta cuando termina la transición del panel.
|
|
13095
|
+
effect((onCleanup) => {
|
|
13096
|
+
const clave = this.claveAbierta();
|
|
13097
|
+
const asentada = untracked(this.claveAsentada);
|
|
13098
|
+
if (asentada === null || clave === asentada) {
|
|
13099
|
+
if (asentada === null)
|
|
13100
|
+
this.claveAsentada.set(clave);
|
|
13101
|
+
return;
|
|
13102
|
+
}
|
|
13103
|
+
const ms = this.esFill() ? duracionTransicion(this.host.nativeElement.querySelector('.ius-acc__panel')) : 0;
|
|
13104
|
+
if (!ms) {
|
|
13105
|
+
this.claveAsentada.set(clave);
|
|
13106
|
+
return;
|
|
13107
|
+
}
|
|
13108
|
+
const t = setTimeout(() => this.claveAsentada.set(clave), ms + 80);
|
|
13109
|
+
onCleanup(() => clearTimeout(t));
|
|
13110
|
+
});
|
|
13111
|
+
// Paneles: al abrir se desasienta hasta el transitionend (o el respaldo por duración);
|
|
13112
|
+
// al cerrar se quita antes de animar. Lo abierto de entrada nace asentado.
|
|
13113
|
+
effect((onCleanup) => {
|
|
13114
|
+
const abiertas = this.openIds();
|
|
13115
|
+
const previas = this.aperturaPrevia;
|
|
13116
|
+
this.aperturaPrevia = abiertas;
|
|
13117
|
+
if (previas === null) {
|
|
13118
|
+
this.asentadas.set(new Set(abiertas));
|
|
13119
|
+
return;
|
|
13120
|
+
}
|
|
13121
|
+
const abiertasAhora = abiertas.filter((id) => !previas.includes(id));
|
|
13122
|
+
const cerradas = previas.filter((id) => !abiertas.includes(id));
|
|
13123
|
+
if (!abiertasAhora.length && !cerradas.length)
|
|
13124
|
+
return;
|
|
13125
|
+
const siguiente = new Set(untracked(this.asentadas));
|
|
13126
|
+
[...abiertasAhora, ...cerradas].forEach((id) => siguiente.delete(id));
|
|
13127
|
+
this.asentadas.set(siguiente);
|
|
13128
|
+
if (!abiertasAhora.length)
|
|
13129
|
+
return;
|
|
13130
|
+
const ms = duracionTransicion(this.host.nativeElement.querySelector('.ius-acc__panel'));
|
|
13131
|
+
if (!ms) {
|
|
13132
|
+
this.asentar(abiertasAhora);
|
|
13133
|
+
return;
|
|
13134
|
+
}
|
|
13135
|
+
const t = setTimeout(() => this.asentar(abiertasAhora), ms + 80);
|
|
13136
|
+
onCleanup(() => clearTimeout(t));
|
|
13137
|
+
});
|
|
13138
|
+
// Mide, después de pintar, qué cuerpos desbordan y cuánto ocupan las acciones.
|
|
13139
|
+
afterRenderEffect(() => {
|
|
13140
|
+
const abiertas = this.openIds();
|
|
13141
|
+
const asentadas = this.asentadas();
|
|
13142
|
+
const conScroll = this.conScroll();
|
|
13143
|
+
const fillActivo = this.esFill() && !this.raizOcupada();
|
|
13144
|
+
const items = this.items();
|
|
13145
|
+
untracked(() => this.observar(items, abiertas, asentadas, conScroll, fillActivo));
|
|
13146
|
+
});
|
|
13147
|
+
inject(DestroyRef).onDestroy(() => {
|
|
13148
|
+
this.observadorCuerpos?.disconnect();
|
|
13149
|
+
this.observadorAcciones?.disconnect();
|
|
13150
|
+
});
|
|
12938
13151
|
}
|
|
12939
13152
|
/** Sin `id` propio, el golden cae al índice. */
|
|
12940
13153
|
idOf(item, index) {
|
|
@@ -12943,6 +13156,25 @@ class AccordionComponent {
|
|
|
12943
13156
|
isOpen(item, index) {
|
|
12944
13157
|
return this.openIds().includes(this.idOf(item, index));
|
|
12945
13158
|
}
|
|
13159
|
+
tieneAcciones(item) {
|
|
13160
|
+
return (item.actions?.length ?? 0) > 0;
|
|
13161
|
+
}
|
|
13162
|
+
estaAsentada(item, index) {
|
|
13163
|
+
return this.isOpen(item, index) && this.asentadas().has(this.idOf(item, index));
|
|
13164
|
+
}
|
|
13165
|
+
desbordaCuerpo(item, index) {
|
|
13166
|
+
return this.conScroll() && this.desbordadas().has(this.idOf(item, index));
|
|
13167
|
+
}
|
|
13168
|
+
anchoAcciones(item, index) {
|
|
13169
|
+
return `${this.anchos().get(this.idOf(item, index)) ?? 0}px`;
|
|
13170
|
+
}
|
|
13171
|
+
/** Título con plantilla (el ReactNode del golden): se pinta dentro del botón. */
|
|
13172
|
+
tituloPlantilla(item) {
|
|
13173
|
+
return item.title instanceof TemplateRef ? item.title : null;
|
|
13174
|
+
}
|
|
13175
|
+
contexto(item, index) {
|
|
13176
|
+
return { $implicit: item, open: this.isOpen(item, index), index };
|
|
13177
|
+
}
|
|
12946
13178
|
headerId(index) {
|
|
12947
13179
|
return `${this.gid}-h-${index}`;
|
|
12948
13180
|
}
|
|
@@ -12967,16 +13199,105 @@ class AccordionComponent {
|
|
|
12967
13199
|
this.picked.set(next);
|
|
12968
13200
|
this.openChange.emit(this.multiple() ? next : (next[0] ?? null));
|
|
12969
13201
|
}
|
|
13202
|
+
emitirAccion(item, index, accion, event) {
|
|
13203
|
+
this.actionClick.emit({ itemId: this.idOf(item, index), actionKey: accion.key, event });
|
|
13204
|
+
}
|
|
13205
|
+
/** El área de acciones no pliega: ni con clic ni con Enter/Espacio. */
|
|
13206
|
+
detenerTeclas(event) {
|
|
13207
|
+
if (event.key === 'Enter' || event.key === ' ')
|
|
13208
|
+
event.stopPropagation();
|
|
13209
|
+
}
|
|
13210
|
+
/** `transitionend` del propio panel (no de sus hijos): la apertura terminó. */
|
|
13211
|
+
alTerminarTransicion(event, item, index) {
|
|
13212
|
+
if (event.target !== event.currentTarget || !this.isOpen(item, index))
|
|
13213
|
+
return;
|
|
13214
|
+
this.asentar([this.idOf(item, index)]);
|
|
13215
|
+
}
|
|
13216
|
+
asentar(ids) {
|
|
13217
|
+
const abiertas = this.openIds();
|
|
13218
|
+
const vigentes = ids.filter((id) => abiertas.includes(id));
|
|
13219
|
+
if (!vigentes.length)
|
|
13220
|
+
return;
|
|
13221
|
+
const actual = this.asentadas();
|
|
13222
|
+
if (vigentes.every((id) => actual.has(id)))
|
|
13223
|
+
return;
|
|
13224
|
+
this.asentadas.set(new Set([...actual, ...vigentes]));
|
|
13225
|
+
}
|
|
13226
|
+
observar(items, abiertas, asentadas, conScroll, fillActivo) {
|
|
13227
|
+
if (typeof ResizeObserver === 'undefined')
|
|
13228
|
+
return;
|
|
13229
|
+
const raiz = this.host.nativeElement;
|
|
13230
|
+
// Cuerpos con scroll (fill / tope) abiertos y asentados, más la raíz con fill.
|
|
13231
|
+
this.observadorCuerpos?.disconnect();
|
|
13232
|
+
const cuerpos = new Map();
|
|
13233
|
+
if (conScroll) {
|
|
13234
|
+
items.forEach((item, i) => {
|
|
13235
|
+
const id = this.idOf(item, i);
|
|
13236
|
+
if (!abiertas.includes(id) || !asentadas.has(id))
|
|
13237
|
+
return;
|
|
13238
|
+
const cuerpo = raiz.querySelector(`#${this.panelId(i)} > .ius-acc__panel-inner`);
|
|
13239
|
+
if (cuerpo)
|
|
13240
|
+
cuerpos.set(cuerpo, id);
|
|
13241
|
+
});
|
|
13242
|
+
}
|
|
13243
|
+
const medir = () => {
|
|
13244
|
+
const desbordadas = new Set();
|
|
13245
|
+
cuerpos.forEach((id, el) => {
|
|
13246
|
+
if (desborda(el))
|
|
13247
|
+
desbordadas.add(id);
|
|
13248
|
+
});
|
|
13249
|
+
if (!mismoConjunto(desbordadas, this.desbordadas()))
|
|
13250
|
+
this.desbordadas.set(desbordadas);
|
|
13251
|
+
const raizDesborda = fillActivo && desborda(raiz);
|
|
13252
|
+
if (raizDesborda !== this.raizDesborda())
|
|
13253
|
+
this.raizDesborda.set(raizDesborda);
|
|
13254
|
+
};
|
|
13255
|
+
this.observadorCuerpos = new ResizeObserver(medir);
|
|
13256
|
+
cuerpos.forEach((_, el) => {
|
|
13257
|
+
this.observadorCuerpos.observe(el);
|
|
13258
|
+
Array.from(el.children).forEach((hijo) => this.observadorCuerpos.observe(hijo));
|
|
13259
|
+
});
|
|
13260
|
+
if (fillActivo) {
|
|
13261
|
+
this.observadorCuerpos.observe(raiz);
|
|
13262
|
+
Array.from(raiz.children).forEach((hijo) => this.observadorCuerpos.observe(hijo));
|
|
13263
|
+
}
|
|
13264
|
+
medir();
|
|
13265
|
+
// Ancho de cada bloque de acciones: el botón de plegar le reserva ese hueco.
|
|
13266
|
+
this.observadorAcciones?.disconnect();
|
|
13267
|
+
// Solo los de ESTE acordeón: uno anidado en el contenido mide los suyos.
|
|
13268
|
+
const bloques = Array.from(raiz.querySelectorAll(':scope > .ius-acc__item > .ius-acc__head > .ius-acc__actions'));
|
|
13269
|
+
const medirAcciones = () => {
|
|
13270
|
+
const anchos = new Map();
|
|
13271
|
+
bloques.forEach((el) => anchos.set(el.dataset['accItem'] ?? '', el.offsetWidth));
|
|
13272
|
+
if (!mismoMapa(anchos, this.anchos()))
|
|
13273
|
+
this.anchos.set(anchos);
|
|
13274
|
+
};
|
|
13275
|
+
this.observadorAcciones = new ResizeObserver(medirAcciones);
|
|
13276
|
+
bloques.forEach((el) => this.observadorAcciones.observe(el));
|
|
13277
|
+
medirAcciones();
|
|
13278
|
+
}
|
|
12970
13279
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12971
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: AccordionComponent, isStandalone: true, selector: "ius-accordion", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, chevronIcon: { classPropertyName: "chevronIcon", publicName: "chevronIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange" }, host: { properties: { "attr.data-variant": "variant()" }, classAttribute: "ius-acc" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13280
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: AccordionComponent, isStandalone: true, selector: "ius-accordion", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, chevronIcon: { classPropertyName: "chevronIcon", publicName: "chevronIcon", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleActions: { classPropertyName: "maxVisibleActions", publicName: "maxVisibleActions", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fillMinHeight: { classPropertyName: "fillMinHeight", publicName: "fillMinHeight", isSignal: true, isRequired: false, transformFunction: null }, panelMaxHeight: { classPropertyName: "panelMaxHeight", publicName: "panelMaxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange", actionClick: "actionClick" }, host: { properties: { "class.ius-scroll": "esFill()", "attr.data-variant": "variant()", "attr.data-size": "size() === 'small' ? 'small' : null", "attr.data-fill": "esFill() ? 'true' : null", "attr.data-scrollable": "esFill() && !raizOcupada() && raizDesborda() ? 'true' : null", "attr.data-animating": "esFill() && raizOcupada() ? 'true' : null", "style.--_acc-fill-min": "esFill() ? minimoFill() : null" }, classAttribute: "ius-acc" }, ngImport: i0, template: "@for (item of items(); track idOf(item, $index); let i = $index) {\n <div\n class=\"ius-acc__item\"\n [attr.data-open]=\"isOpen(item, i) ? 'true' : null\"\n [attr.data-disabled]=\"item.disabled ? 'true' : null\"\n [attr.data-actions]=\"tieneAcciones(item) ? 'true' : null\"\n >\n @if (tieneAcciones(item)) {\n <!-- Con acciones la cabecera es una rejilla de una celda: el bot\u00F3n de plegar ocupa toda la\n fila y las acciones se superponen, HERMANAS del bot\u00F3n (nunca anidadas), antes del chevron. -->\n <div class=\"ius-acc__head\">\n <ng-container [ngTemplateOutlet]=\"boton\" [ngTemplateOutletContext]=\"{ $implicit: item, i: i }\" />\n\n <span\n class=\"ius-acc__actions\"\n [attr.data-acc-item]=\"idOf(item, i)\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"detenerTeclas($event)\"\n >\n @for (accion of acciones()[i].visibles; track accion.key) {\n <ius-icon-button\n [icon]=\"accion.icon\"\n variant=\"tertiary\"\n size=\"small\"\n shape=\"squared\"\n [tooltip]=\"accion.label\"\n [ariaLabel]=\"accion.label\"\n [disabled]=\"!!item.disabled || !!accion.disabled\"\n (clicked)=\"emitirAccion(item, i, accion, $event)\"\n />\n }\n\n @if (acciones()[i].desborde.length) {\n <ius-dropdown placement=\"bottom-end\" ariaLabel=\"M\u00E1s acciones\" [items]=\"acciones()[i].desborde\">\n <ius-icon-button\n iusDropdownTrigger\n icon=\"more_vert\"\n variant=\"tertiary\"\n size=\"small\"\n shape=\"squared\"\n tooltip=\"M\u00E1s acciones\"\n ariaLabel=\"M\u00E1s acciones\"\n [disabled]=\"!!item.disabled\"\n />\n </ius-dropdown>\n }\n </span>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"boton\" [ngTemplateOutletContext]=\"{ $implicit: item, i: i }\" />\n }\n\n <!-- El panel se queda SIEMPRE en el DOM: la altura la anima\n `grid-template-rows` de 0fr a 1fr. Cerrado va `inert` para que su\n contenido no quede en el orden de tabulaci\u00F3n (ver nota en el .ts). -->\n <div\n class=\"ius-acc__panel\"\n role=\"region\"\n [id]=\"panelId(i)\"\n [attr.aria-labelledby]=\"headerId(i)\"\n [attr.data-settled]=\"estaAsentada(item, i) ? 'true' : null\"\n [attr.inert]=\"isOpen(item, i) ? null : ''\"\n (transitionend)=\"alTerminarTransicion($event, item, i)\"\n >\n <div\n class=\"ius-acc__panel-inner\"\n [class.ius-scroll]=\"conScroll()\"\n [attr.data-scroll]=\"conScroll() ? 'true' : null\"\n [attr.data-scrollable]=\"desbordaCuerpo(item, i) ? 'true' : null\"\n [attr.data-capped]=\"topado() ? 'true' : null\"\n [style.--_acc-panel-max]=\"topado() ? tope() : null\"\n >\n <div class=\"ius-acc__content\">\n @if (item.content) {\n <ng-container [ngTemplateOutlet]=\"item.content\" [ngTemplateOutletContext]=\"contexto(item, i)\" />\n }\n </div>\n </div>\n </div>\n </div>\n}\n\n<!-- El bot\u00F3n de plegar cubre \u00EDcono, t\u00EDtulo y chevron. Con acciones reserva su ancho medido\n (`__slot`), as\u00ED el t\u00EDtulo se corta con elipsis antes de quedar debajo de ellas. -->\n<ng-template #boton let-item let-i=\"i\">\n <button\n type=\"button\"\n class=\"ius-acc__header\"\n [id]=\"headerId(i)\"\n [attr.aria-expanded]=\"isOpen(item, i)\"\n [attr.aria-controls]=\"panelId(i)\"\n [disabled]=\"!!item.disabled\"\n (click)=\"toggle(item, i)\"\n >\n @if (item.icon) {\n <span class=\"ius-acc__lead\" aria-hidden=\"true\">\n <span translate=\"no\" class=\"ius-icon\">{{ item.icon }}</span>\n </span>\n }\n\n <span class=\"ius-acc__title\">\n @if (tituloPlantilla(item); as plantilla) {\n <ng-container [ngTemplateOutlet]=\"plantilla\" [ngTemplateOutletContext]=\"contexto(item, i)\" />\n } @else {\n {{ item.title }}\n }\n </span>\n\n @if (tieneAcciones(item)) {\n <span class=\"ius-acc__slot\" aria-hidden=\"true\" [style.--_acc-actions-w]=\"anchoAcciones(item, i)\"></span>\n }\n\n <span class=\"ius-acc__chev\" aria-hidden=\"true\">\n <span translate=\"no\" class=\"ius-icon\">{{ chevronIcon() }}</span>\n </span>\n </button>\n</ng-template>\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__head{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;--_acc-px: var(--ius-space-xxs)}:host([data-variant=contained]) .ius-acc__head{--_acc-px: var(--ius-space-md)}.ius-acc__head>.ius-acc__header{grid-area:1/1;min-width:0}.ius-acc__actions{grid-area:1/1;justify-self:end;position:relative;z-index:1;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);margin-inline-end:calc(var(--_acc-px) + var(--ius-icon-lg) + var(--ius-space-xs))}.ius-acc__slot{flex:0 0 auto;width:var(--_acc-actions-w, 0)}.ius-acc__item[data-actions=true] .ius-acc__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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)}:host([data-size=small]) .ius-acc__header{padding-top:var(--ius-space-sm);padding-bottom:var(--ius-space-sm);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base)}:host([data-size=small]) .ius-acc__lead .ius-icon{font-size:var(--ius-icon-sm)}:host([data-size=small]) .ius-acc__chev .ius-icon{font-size:var(--ius-icon-md)}:host([data-size=small]) .ius-acc__actions{margin-inline-end:calc(var(--_acc-px) + var(--ius-icon-md) + var(--ius-space-xs))}:host([data-size=small]) .ius-acc__content{padding-bottom:var(--ius-space-sm)}:host([data-fill=true]){flex:1 1 auto;min-height:0;height:100%;overflow-y:hidden;overflow-x:hidden}:host([data-fill=true][data-scrollable=true]){overflow-y:auto}:host([data-fill=true]) .ius-acc__item{flex:0 0 auto;min-height:0}:host([data-fill=true]) .ius-acc__item[data-open=true]{flex:1 1 auto;min-height:var(--_acc-fill-min, 160px)}:host([data-fill=true]) .ius-acc__head,:host([data-fill=true]) .ius-acc__item>.ius-acc__header{flex:0 0 auto}:host([data-fill=true]) .ius-acc__item[data-open=true] .ius-acc__panel{flex:1 1 auto;min-height:0}.ius-acc__panel-inner[data-scroll=true]{min-height:0;overflow-y:hidden;overflow-x:hidden}.ius-acc__panel-inner[data-scroll=true][data-scrollable=true]{overflow-y:auto}.ius-acc__panel-inner[data-capped=true]{max-height:var(--_acc-panel-max)}.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"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "ariaPressed", "tooltipPlacement"], 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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
12972
13281
|
}
|
|
12973
13282
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AccordionComponent, decorators: [{
|
|
12974
13283
|
type: Component,
|
|
12975
|
-
args: [{ selector: 'ius-accordion', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
13284
|
+
args: [{ selector: 'ius-accordion', standalone: true, imports: [NgTemplateOutlet, IconButtonComponent, DropdownComponent, IusDropdownTriggerDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
12976
13285
|
class: 'ius-acc',
|
|
13286
|
+
'[class.ius-scroll]': 'esFill()',
|
|
12977
13287
|
'[attr.data-variant]': 'variant()',
|
|
12978
|
-
|
|
12979
|
-
|
|
13288
|
+
'[attr.data-size]': "size() === 'small' ? 'small' : null",
|
|
13289
|
+
'[attr.data-fill]': "esFill() ? 'true' : null",
|
|
13290
|
+
'[attr.data-scrollable]': "esFill() && !raizOcupada() && raizDesborda() ? 'true' : null",
|
|
13291
|
+
'[attr.data-animating]': "esFill() && raizOcupada() ? 'true' : null",
|
|
13292
|
+
'[style.--_acc-fill-min]': 'esFill() ? minimoFill() : null',
|
|
13293
|
+
}, template: "@for (item of items(); track idOf(item, $index); let i = $index) {\n <div\n class=\"ius-acc__item\"\n [attr.data-open]=\"isOpen(item, i) ? 'true' : null\"\n [attr.data-disabled]=\"item.disabled ? 'true' : null\"\n [attr.data-actions]=\"tieneAcciones(item) ? 'true' : null\"\n >\n @if (tieneAcciones(item)) {\n <!-- Con acciones la cabecera es una rejilla de una celda: el bot\u00F3n de plegar ocupa toda la\n fila y las acciones se superponen, HERMANAS del bot\u00F3n (nunca anidadas), antes del chevron. -->\n <div class=\"ius-acc__head\">\n <ng-container [ngTemplateOutlet]=\"boton\" [ngTemplateOutletContext]=\"{ $implicit: item, i: i }\" />\n\n <span\n class=\"ius-acc__actions\"\n [attr.data-acc-item]=\"idOf(item, i)\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"detenerTeclas($event)\"\n >\n @for (accion of acciones()[i].visibles; track accion.key) {\n <ius-icon-button\n [icon]=\"accion.icon\"\n variant=\"tertiary\"\n size=\"small\"\n shape=\"squared\"\n [tooltip]=\"accion.label\"\n [ariaLabel]=\"accion.label\"\n [disabled]=\"!!item.disabled || !!accion.disabled\"\n (clicked)=\"emitirAccion(item, i, accion, $event)\"\n />\n }\n\n @if (acciones()[i].desborde.length) {\n <ius-dropdown placement=\"bottom-end\" ariaLabel=\"M\u00E1s acciones\" [items]=\"acciones()[i].desborde\">\n <ius-icon-button\n iusDropdownTrigger\n icon=\"more_vert\"\n variant=\"tertiary\"\n size=\"small\"\n shape=\"squared\"\n tooltip=\"M\u00E1s acciones\"\n ariaLabel=\"M\u00E1s acciones\"\n [disabled]=\"!!item.disabled\"\n />\n </ius-dropdown>\n }\n </span>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"boton\" [ngTemplateOutletContext]=\"{ $implicit: item, i: i }\" />\n }\n\n <!-- El panel se queda SIEMPRE en el DOM: la altura la anima\n `grid-template-rows` de 0fr a 1fr. Cerrado va `inert` para que su\n contenido no quede en el orden de tabulaci\u00F3n (ver nota en el .ts). -->\n <div\n class=\"ius-acc__panel\"\n role=\"region\"\n [id]=\"panelId(i)\"\n [attr.aria-labelledby]=\"headerId(i)\"\n [attr.data-settled]=\"estaAsentada(item, i) ? 'true' : null\"\n [attr.inert]=\"isOpen(item, i) ? null : ''\"\n (transitionend)=\"alTerminarTransicion($event, item, i)\"\n >\n <div\n class=\"ius-acc__panel-inner\"\n [class.ius-scroll]=\"conScroll()\"\n [attr.data-scroll]=\"conScroll() ? 'true' : null\"\n [attr.data-scrollable]=\"desbordaCuerpo(item, i) ? 'true' : null\"\n [attr.data-capped]=\"topado() ? 'true' : null\"\n [style.--_acc-panel-max]=\"topado() ? tope() : null\"\n >\n <div class=\"ius-acc__content\">\n @if (item.content) {\n <ng-container [ngTemplateOutlet]=\"item.content\" [ngTemplateOutletContext]=\"contexto(item, i)\" />\n }\n </div>\n </div>\n </div>\n </div>\n}\n\n<!-- El bot\u00F3n de plegar cubre \u00EDcono, t\u00EDtulo y chevron. Con acciones reserva su ancho medido\n (`__slot`), as\u00ED el t\u00EDtulo se corta con elipsis antes de quedar debajo de ellas. -->\n<ng-template #boton let-item let-i=\"i\">\n <button\n type=\"button\"\n class=\"ius-acc__header\"\n [id]=\"headerId(i)\"\n [attr.aria-expanded]=\"isOpen(item, i)\"\n [attr.aria-controls]=\"panelId(i)\"\n [disabled]=\"!!item.disabled\"\n (click)=\"toggle(item, i)\"\n >\n @if (item.icon) {\n <span class=\"ius-acc__lead\" aria-hidden=\"true\">\n <span translate=\"no\" class=\"ius-icon\">{{ item.icon }}</span>\n </span>\n }\n\n <span class=\"ius-acc__title\">\n @if (tituloPlantilla(item); as plantilla) {\n <ng-container [ngTemplateOutlet]=\"plantilla\" [ngTemplateOutletContext]=\"contexto(item, i)\" />\n } @else {\n {{ item.title }}\n }\n </span>\n\n @if (tieneAcciones(item)) {\n <span class=\"ius-acc__slot\" aria-hidden=\"true\" [style.--_acc-actions-w]=\"anchoAcciones(item, i)\"></span>\n }\n\n <span class=\"ius-acc__chev\" aria-hidden=\"true\">\n <span translate=\"no\" class=\"ius-icon\">{{ chevronIcon() }}</span>\n </span>\n </button>\n</ng-template>\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__head{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;--_acc-px: var(--ius-space-xxs)}:host([data-variant=contained]) .ius-acc__head{--_acc-px: var(--ius-space-md)}.ius-acc__head>.ius-acc__header{grid-area:1/1;min-width:0}.ius-acc__actions{grid-area:1/1;justify-self:end;position:relative;z-index:1;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);margin-inline-end:calc(var(--_acc-px) + var(--ius-icon-lg) + var(--ius-space-xs))}.ius-acc__slot{flex:0 0 auto;width:var(--_acc-actions-w, 0)}.ius-acc__item[data-actions=true] .ius-acc__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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)}:host([data-size=small]) .ius-acc__header{padding-top:var(--ius-space-sm);padding-bottom:var(--ius-space-sm);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base)}:host([data-size=small]) .ius-acc__lead .ius-icon{font-size:var(--ius-icon-sm)}:host([data-size=small]) .ius-acc__chev .ius-icon{font-size:var(--ius-icon-md)}:host([data-size=small]) .ius-acc__actions{margin-inline-end:calc(var(--_acc-px) + var(--ius-icon-md) + var(--ius-space-xs))}:host([data-size=small]) .ius-acc__content{padding-bottom:var(--ius-space-sm)}:host([data-fill=true]){flex:1 1 auto;min-height:0;height:100%;overflow-y:hidden;overflow-x:hidden}:host([data-fill=true][data-scrollable=true]){overflow-y:auto}:host([data-fill=true]) .ius-acc__item{flex:0 0 auto;min-height:0}:host([data-fill=true]) .ius-acc__item[data-open=true]{flex:1 1 auto;min-height:var(--_acc-fill-min, 160px)}:host([data-fill=true]) .ius-acc__head,:host([data-fill=true]) .ius-acc__item>.ius-acc__header{flex:0 0 auto}:host([data-fill=true]) .ius-acc__item[data-open=true] .ius-acc__panel{flex:1 1 auto;min-height:0}.ius-acc__panel-inner[data-scroll=true]{min-height:0;overflow-y:hidden;overflow-x:hidden}.ius-acc__panel-inner[data-scroll=true][data-scrollable=true]{overflow-y:auto}.ius-acc__panel-inner[data-capped=true]{max-height:var(--_acc-panel-max)}.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"] }]
|
|
13294
|
+
}], ctorParameters: () => [], 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 }] }], maxVisibleActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleActions", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fillMinHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillMinHeight", required: false }] }], panelMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxHeight", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }] } });
|
|
13295
|
+
function mismoConjunto(a, b) {
|
|
13296
|
+
return a.size === b.size && [...a].every((x) => b.has(x));
|
|
13297
|
+
}
|
|
13298
|
+
function mismoMapa(a, b) {
|
|
13299
|
+
return a.size === b.size && [...a].every(([k, v]) => b.get(k) === v);
|
|
13300
|
+
}
|
|
12980
13301
|
|
|
12981
13302
|
/*
|
|
12982
13303
|
* EventCatalog — foundation (vocabulario controlado de TIPOS DE EVENTO).
|
|
@@ -14777,7 +15098,7 @@ class FormSectionComponent {
|
|
|
14777
15098
|
this.form.setOpen(openId ? this.sectionId : null);
|
|
14778
15099
|
}
|
|
14779
15100
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14780
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FormSectionComponent, isStandalone: true, selector: "ius-form-section", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ius-form__section--plain": "!collapsible()", "class.ius-form__section--divided-acc": "collapsible() && variantEfectiva() === 'divided'", "attr.id": "sectionId" }, classAttribute: "ius-form__section" }, viewQueries: [{ propertyName: "cuerpo", first: true, predicate: ["cuerpo"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Rejilla de la secci\u00F3n: un \u00FAnico <ng-content>, estampado en la rama activa. -->\n<ng-template #campos>\n <div class=\"ius-form__grid\" [attr.data-cols]=\"colsEfectivas()\">\n <ng-content />\n </div>\n</ng-template>\n\n<!-- Contenido del panel del Accordion (descripci\u00F3n + rejilla). -->\n<ng-template #cuerpo>\n @if (description()) {\n <p class=\"ius-form__section-desc ius-form__section-desc--acc\">{{ description() }}</p>\n }\n <ng-container *ngTemplateOutlet=\"campos\" />\n</ng-template>\n\n@if (collapsible()) {\n <ius-accordion\n [variant]=\"variantEfectiva()\"\n [items]=\"items()\"\n [open]=\"accOpen()\"\n [defaultOpen]=\"accDefaultOpen()\"\n (openChange)=\"onAccOpenChange($event)\"\n />\n} @else {\n @if (title() || description()) {\n <div class=\"ius-form__section-head\">\n @if (title()) {\n <div class=\"ius-form__section-title\">\n @if (icon()) {\n <span translate=\"no\" class=\"ius-icon\">{{ icon() }}</span>\n }\n {{ title() }}\n </div>\n }\n @if (description()) {\n <p class=\"ius-form__section-desc\">{{ description() }}</p>\n }\n </div>\n }\n <ng-container *ngTemplateOutlet=\"campos\" />\n}\n", styles: ["@charset \"UTF-8\";:host{grid-column:1/-1;display:flex;flex-direction:column;gap:var(--ius-space-md)}:host(.ius-form__section--plain){padding-top:var(--ius-space-md);border-top:1px solid var(--ius-stroke)}:host(.ius-form__section--plain:first-child){padding-top:0;border-top:0}:host(.ius-form__section--divided-acc){border-top:1px solid var(--ius-stroke)}:host(.ius-form__section--divided-acc:first-child){border-top:0}.ius-form__section-head{display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-form__section-title{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-display);font-weight:var(--ius-fw-bold);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-form__section-title .ius-icon{font-size:var(--ius-icon-sm);color:var(--ius-text-secondary)}.ius-form__section-desc{margin:0;font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-secondary)}.ius-form__section-desc--acc{margin-bottom:var(--ius-space-md)}.ius-form__grid{display:grid;gap:var(--ius-space-md) var(--ius-space-lg);grid-template-columns:1fr;align-content:start}.ius-form__grid[data-cols=\"1\"]{grid-template-columns:1fr}@container (min-width: 600px){.ius-form__grid[data-cols=\"2\"],.ius-form__grid[data-cols=auto]{grid-template-columns:1fr 1fr}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AccordionComponent, selector: "ius-accordion", inputs: ["items", "multiple", "open", "defaultOpen", "variant", "chevronIcon"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
15101
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FormSectionComponent, isStandalone: true, selector: "ius-form-section", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ius-form__section--plain": "!collapsible()", "class.ius-form__section--divided-acc": "collapsible() && variantEfectiva() === 'divided'", "attr.id": "sectionId" }, classAttribute: "ius-form__section" }, viewQueries: [{ propertyName: "cuerpo", first: true, predicate: ["cuerpo"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Rejilla de la secci\u00F3n: un \u00FAnico <ng-content>, estampado en la rama activa. -->\n<ng-template #campos>\n <div class=\"ius-form__grid\" [attr.data-cols]=\"colsEfectivas()\">\n <ng-content />\n </div>\n</ng-template>\n\n<!-- Contenido del panel del Accordion (descripci\u00F3n + rejilla). -->\n<ng-template #cuerpo>\n @if (description()) {\n <p class=\"ius-form__section-desc ius-form__section-desc--acc\">{{ description() }}</p>\n }\n <ng-container *ngTemplateOutlet=\"campos\" />\n</ng-template>\n\n@if (collapsible()) {\n <ius-accordion\n [variant]=\"variantEfectiva()\"\n [items]=\"items()\"\n [open]=\"accOpen()\"\n [defaultOpen]=\"accDefaultOpen()\"\n (openChange)=\"onAccOpenChange($event)\"\n />\n} @else {\n @if (title() || description()) {\n <div class=\"ius-form__section-head\">\n @if (title()) {\n <div class=\"ius-form__section-title\">\n @if (icon()) {\n <span translate=\"no\" class=\"ius-icon\">{{ icon() }}</span>\n }\n {{ title() }}\n </div>\n }\n @if (description()) {\n <p class=\"ius-form__section-desc\">{{ description() }}</p>\n }\n </div>\n }\n <ng-container *ngTemplateOutlet=\"campos\" />\n}\n", styles: ["@charset \"UTF-8\";:host{grid-column:1/-1;display:flex;flex-direction:column;gap:var(--ius-space-md)}:host(.ius-form__section--plain){padding-top:var(--ius-space-md);border-top:1px solid var(--ius-stroke)}:host(.ius-form__section--plain:first-child){padding-top:0;border-top:0}:host(.ius-form__section--divided-acc){border-top:1px solid var(--ius-stroke)}:host(.ius-form__section--divided-acc:first-child){border-top:0}.ius-form__section-head{display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-form__section-title{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-display);font-weight:var(--ius-fw-bold);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-form__section-title .ius-icon{font-size:var(--ius-icon-sm);color:var(--ius-text-secondary)}.ius-form__section-desc{margin:0;font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-secondary)}.ius-form__section-desc--acc{margin-bottom:var(--ius-space-md)}.ius-form__grid{display:grid;gap:var(--ius-space-md) var(--ius-space-lg);grid-template-columns:1fr;align-content:start}.ius-form__grid[data-cols=\"1\"]{grid-template-columns:1fr}@container (min-width: 600px){.ius-form__grid[data-cols=\"2\"],.ius-form__grid[data-cols=auto]{grid-template-columns:1fr 1fr}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AccordionComponent, selector: "ius-accordion", inputs: ["items", "multiple", "open", "defaultOpen", "variant", "chevronIcon", "maxVisibleActions", "fill", "size", "fillMinHeight", "panelMaxHeight"], outputs: ["openChange", "actionClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14781
15102
|
}
|
|
14782
15103
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormSectionComponent, decorators: [{
|
|
14783
15104
|
type: Component,
|
|
@@ -17536,7 +17857,7 @@ class EntityNavigatorComponent {
|
|
|
17536
17857
|
return fijada ? 'Dejar de fijar sección arriba' : 'Fijar sección arriba';
|
|
17537
17858
|
}
|
|
17538
17859
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EntityNavigatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
17539
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EntityNavigatorComponent, isStandalone: true, selector: "ius-entity-navigator", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleIcon: { classPropertyName: "titleIcon", publicName: "titleIcon", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchThreshold: { classPropertyName: "searchThreshold", publicName: "searchThreshold", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, selectedFilters: { classPropertyName: "selectedFilters", publicName: "selectedFilters", isSignal: true, isRequired: false, transformFunction: null }, availableFilters: { classPropertyName: "availableFilters", publicName: "availableFilters", isSignal: true, isRequired: false, transformFunction: null }, activeFacets: { classPropertyName: "activeFacets", publicName: "activeFacets", isSignal: true, isRequired: false, transformFunction: null }, stateSegments: { classPropertyName: "stateSegments", publicName: "stateSegments", isSignal: true, isRequired: false, transformFunction: null }, stateValue: { classPropertyName: "stateValue", publicName: "stateValue", isSignal: true, isRequired: false, transformFunction: null }, sortLabel: { classPropertyName: "sortLabel", publicName: "sortLabel", isSignal: true, isRequired: false, transformFunction: null }, sortOptions: { classPropertyName: "sortOptions", publicName: "sortOptions", isSignal: true, isRequired: false, transformFunction: null }, sortValue: { classPropertyName: "sortValue", publicName: "sortValue", isSignal: true, isRequired: false, transformFunction: null }, metaLabel: { classPropertyName: "metaLabel", publicName: "metaLabel", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null }, defaultExpanded: { classPropertyName: "defaultExpanded", publicName: "defaultExpanded", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, autoExpandOnFilter: { classPropertyName: "autoExpandOnFilter", publicName: "autoExpandOnFilter", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, defaultSelected: { classPropertyName: "defaultSelected", publicName: "defaultSelected", isSignal: true, isRequired: false, transformFunction: null }, emptyStateTemplate: { classPropertyName: "emptyStateTemplate", publicName: "emptyStateTemplate", isSignal: true, isRequired: false, transformFunction: null }, noResultsLabel: { classPropertyName: "noResultsLabel", publicName: "noResultsLabel", isSignal: true, isRequired: false, transformFunction: null }, createLabel: { classPropertyName: "createLabel", publicName: "createLabel", isSignal: true, isRequired: false, transformFunction: null }, createIcon: { classPropertyName: "createIcon", publicName: "createIcon", isSignal: true, isRequired: false, transformFunction: null }, groupLimit: { classPropertyName: "groupLimit", publicName: "groupLimit", isSignal: true, isRequired: false, transformFunction: null }, collapsibleGroups: { classPropertyName: "collapsibleGroups", publicName: "collapsibleGroups", isSignal: true, isRequired: false, transformFunction: null }, collapsedGroups: { classPropertyName: "collapsedGroups", publicName: "collapsedGroups", isSignal: true, isRequired: false, transformFunction: null }, stickyHeaders: { classPropertyName: "stickyHeaders", publicName: "stickyHeaders", isSignal: true, isRequired: false, transformFunction: null }, pinnableGroups: { classPropertyName: "pinnableGroups", publicName: "pinnableGroups", isSignal: true, isRequired: false, transformFunction: null }, defaultPinnedGroup: { classPropertyName: "defaultPinnedGroup", publicName: "defaultPinnedGroup", isSignal: true, isRequired: false, transformFunction: null }, moreLabel: { classPropertyName: "moreLabel", publicName: "moreLabel", isSignal: true, isRequired: false, transformFunction: null }, alphaIndex: { classPropertyName: "alphaIndex", publicName: "alphaIndex", isSignal: true, isRequired: false, transformFunction: null }, alphaIndexLetters: { classPropertyName: "alphaIndexLetters", publicName: "alphaIndexLetters", isSignal: true, isRequired: false, transformFunction: null }, loadMoreLabel: { classPropertyName: "loadMoreLabel", publicName: "loadMoreLabel", isSignal: true, isRequired: false, transformFunction: null }, virtualized: { classPropertyName: "virtualized", publicName: "virtualized", isSignal: true, isRequired: false, transformFunction: null }, virtualizeThreshold: { classPropertyName: "virtualizeThreshold", publicName: "virtualizeThreshold", isSignal: true, isRequired: false, transformFunction: null }, itemHeights: { classPropertyName: "itemHeights", publicName: "itemHeights", 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 }, fluidWidth: { classPropertyName: "fluidWidth", publicName: "fluidWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { search: "search", searchChange: "searchChange", searchClear: "searchClear", filter: "filter", filterRemove: "filterRemove", addFilter: "addFilter", stateChange: "stateChange", facetAdd: "facetAdd", facetRemove: "facetRemove", sort: "sort", select: "select", selectedChange: "selectedChange", expandedChange: "expandedChange", togglePin: "togglePin", create: "create", pinGroup: "pinGroup", groupCollapse: "groupCollapse", more: "more", collapsedChange: "collapsedChange", jumpToLetter: "jumpToLetter", loadMore: "loadMore", expandLoad: "expandLoad" }, host: { properties: { "attr.data-collapsed": "isCollapsed() ? 'true' : null", "attr.data-fluid": "fluidWidth() ? 'true' : null", "attr.aria-label": "ariaLabel() || title() || null" }, classAttribute: "ius-entnav" }, viewQueries: [{ propertyName: "bodyRef", first: true, predicate: ["body"], descendants: true, isSignal: true }, { propertyName: "alphaRef", first: true, predicate: ["alpha"], descendants: true, isSignal: true }, { propertyName: "searchRef", first: true, predicate: ["searchBox"], descendants: true, isSignal: true }, { propertyName: "sentinels", predicate: ["lmSentinel"], descendants: true, isSignal: true }, { propertyName: "letterAnchors", predicate: ["letterAnchor"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Riel colapsado: solo expandir + CTA. Rama aparte, como el golden. -->\r\n@if (collapsible() && isCollapsed()) {\r\n <div class=\"ius-entnav__rail\">\r\n <ius-icon-button\r\n icon=\"left_panel_open\"\r\n variant=\"tertiary\"\r\n shape=\"circle\"\r\n size=\"small\"\r\n ariaLabel=\"Expandir\"\r\n (clicked)=\"alternarColapso()\"\r\n />\r\n @if (hayPie()) {\r\n <ius-icon-button\r\n [icon]=\"createIcon()\"\r\n variant=\"secondary\"\r\n shape=\"circle\"\r\n size=\"small\"\r\n [ariaLabel]=\"createLabel()\"\r\n (clicked)=\"create.emit($event)\"\r\n />\r\n }\r\n </div>\r\n} @else {\r\n <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Cabecera \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n <div class=\"ius-entnav__head\">\r\n @if (hayCabecera()) {\r\n <div class=\"ius-entnav__titlerow\">\r\n @if (title()) {\r\n <div class=\"ius-entnav__title\">\r\n @if (titleIcon()) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ titleIcon() }}</span>\r\n }\r\n {{ title() }}\r\n </div>\r\n } @else {\r\n <span></span>\r\n }\r\n <span class=\"ius-entnav__actions\">\r\n @if (showSearchToggle()) {\r\n <!-- El `state: pressed` del golden no se porta: IconButton omite `state`\r\n de su API p\u00FAblica a prop\u00F3sito (decisi\u00F3n suya, documentada). -->\r\n <ius-icon-button\r\n icon=\"search\"\r\n variant=\"tertiary\"\r\n shape=\"circle\"\r\n size=\"small\"\r\n ariaLabel=\"Buscar (\u2318K)\"\r\n (clicked)=\"alternarBusqueda()\"\r\n />\r\n }\r\n @if (collapsible()) {\r\n <ius-icon-button\r\n icon=\"left_panel_close\"\r\n variant=\"tertiary\"\r\n shape=\"circle\"\r\n size=\"small\"\r\n ariaLabel=\"Colapsar\"\r\n (clicked)=\"alternarColapso()\"\r\n />\r\n }\r\n </span>\r\n </div>\r\n }\r\n\r\n @if (searchVisible()) {\r\n <div #searchBox>\r\n <ius-search-bar\r\n [placeholder]=\"searchPlaceholder()\"\r\n size=\"medium\"\r\n [value]=\"searchValue()\"\r\n (valueChange)=\"onSearchValueChange($event)\"\r\n (search)=\"search.emit($event)\"\r\n (cleared)=\"searchClear.emit()\"\r\n />\r\n </div>\r\n }\r\n\r\n <!-- Eje de estado: excluyente, ortogonal a facetas y b\u00FAsqueda; no poda datos. -->\r\n @if (stateSegments()?.length) {\r\n <div class=\"ius-entnav__state\">\r\n <ius-segmented-control\r\n [options]=\"segmentos()\"\r\n [value]=\"stateVal()\"\r\n size=\"small\"\r\n variant=\"subtle\"\r\n fullWidth\r\n (valueChange)=\"elegirEstado($event)\"\r\n />\r\n </div>\r\n }\r\n\r\n @if (hayBarraFiltros()) {\r\n <div class=\"ius-entnav__filters\">\r\n @for (f of filters(); track f.key) {\r\n <ius-tag\r\n role=\"filter\"\r\n size=\"small\"\r\n [tone]=\"tonoFiltro(f)\"\r\n [icon]=\"f.icon\"\r\n [dot]=\"f.dot\"\r\n [count]=\"f.count\"\r\n [label]=\"f.label\"\r\n [selected]=\"activeKeys().has(f.key)\"\r\n [closable]=\"!!f.removable\"\r\n (clicked)=\"alternarFiltro(f.key)\"\r\n (closed)=\"quitarFiltro(f.key)\"\r\n />\r\n }\r\n\r\n <!-- Facetas: Tag `soft` con el tono categ\u00F3rico de su categor\u00EDa, NUNCA solid. -->\r\n @for (f of facets(); track f.key) {\r\n <ius-tag\r\n role=\"label\"\r\n variant=\"soft\"\r\n size=\"small\"\r\n [tone]=\"tonoFaceta(f)\"\r\n [icon]=\"f.icon\"\r\n closable\r\n [label]=\"textoFaceta(f)\"\r\n (closed)=\"quitarFaceta(f.key)\"\r\n />\r\n }\r\n\r\n @if (availableFilters().length) {\r\n <ius-popover\r\n trigger=\"manual\"\r\n [open]=\"addOpen()\"\r\n [dismissable]=\"true\"\r\n placement=\"bottom-start\"\r\n [offset]=\"6\"\r\n [showArrow]=\"false\"\r\n padding=\"none\"\r\n (openChange)=\"onAddOpenChange($event)\"\r\n >\r\n <ius-tag\r\n role=\"filter\"\r\n variant=\"outline\"\r\n tone=\"neutral\"\r\n size=\"small\"\r\n icon=\"add\"\r\n label=\"Filtro\"\r\n [selected]=\"addOpen()\"\r\n (clicked)=\"alternarMenuFiltro()\"\r\n />\r\n\r\n <div iusPopoverContent class=\"ius-entnav__addpanel\">\r\n @if (addStep(); as step) {\r\n <div class=\"ius-entnav__addhead\">\r\n <ius-menu-item\r\n icon=\"chevron_left\"\r\n [label]=\"step.label\"\r\n size=\"small\"\r\n (clicked)=\"volverDelPaso()\"\r\n />\r\n @if (step.picker === 'search') {\r\n <ius-search-bar\r\n size=\"small\"\r\n placeholder=\"Buscar\u2026\"\r\n [value]=\"addQuery()\"\r\n (valueChange)=\"addQuery.set($event)\"\r\n (cleared)=\"addQuery.set('')\"\r\n />\r\n }\r\n </div>\r\n <div class=\"ius-entnav__addlist ius-scroll ius-scroll--sm\">\r\n @if (opcionesDelPaso().length === 0) {\r\n <div class=\"ius-entnav__addempty\">Sin resultados</div>\r\n } @else {\r\n @for (o of opcionesDelPaso(); track o.key) {\r\n <!-- El check se proyecta SIEMPRE y se oculta por CSS: un\r\n `<ng-content>` detr\u00E1s de un `@if` que depende de un\r\n contentChild se pierde en el primer render. -->\r\n <ius-menu-item\r\n [label]=\"o.label\"\r\n size=\"small\"\r\n [selected]=\"facetaActiva(step, o)\"\r\n (clicked)=\"elegirValor(step, o)\"\r\n >\r\n <span\r\n iusMenuItemTrailing\r\n translate=\"no\"\r\n class=\"ius-icon\"\r\n [class.ius-entnav__check--off]=\"!facetaActiva(step, o)\"\r\n >check</span\r\n >\r\n </ius-menu-item>\r\n }\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"ius-entnav__addlist ius-scroll ius-scroll--sm\">\r\n @for (a of categoriasDisponibles(); track a.key) {\r\n <ius-menu-item\r\n [icon]=\"a.icon\"\r\n [label]=\"a.label\"\r\n size=\"small\"\r\n (clicked)=\"elegirCategoria(a)\"\r\n >\r\n <span\r\n iusMenuItemTrailing\r\n translate=\"no\"\r\n class=\"ius-icon\"\r\n [class.ius-entnav__check--off]=\"!a.picker\"\r\n >chevron_right</span\r\n >\r\n </ius-menu-item>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </ius-popover>\r\n }\r\n </div>\r\n }\r\n\r\n @if (hayMeta()) {\r\n <div class=\"ius-entnav__meta\">\r\n <span>{{ metaLabel() || '' }}</span>\r\n @if (sortOptions()?.length) {\r\n <ius-dropdown\r\n [selectable]=\"true\"\r\n [value]=\"sortValue()\"\r\n label=\"Ordenar por\"\r\n tone=\"neutral\"\r\n [items]=\"sortOptions() ?? []\"\r\n placement=\"bottom-end\"\r\n (valueChange)=\"onSort($event)\"\r\n />\r\n } @else if (sortLabel()) {\r\n <button type=\"button\" class=\"ius-entnav__sort\" (click)=\"sort.emit({ value: sortValue() })\">\r\n {{ sortLabel() }}\r\n <span translate=\"no\" class=\"ius-icon\">expand_more</span>\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Secci\u00F3n fijada: vive FUERA del cuerpo con scroll (no entra en la ventana\r\n de render ni en el cursor aritm\u00E9tico de la virtualizaci\u00F3n). -->\r\n @if (modelo().fijada; as fijada) {\r\n <div class=\"ius-entnav__pinned\">\r\n <ng-container [ngTemplateOutlet]=\"seccionTpl\" [ngTemplateOutletContext]=\"{ $implicit: fijada }\" />\r\n </div>\r\n }\r\n\r\n <div class=\"ius-entnav__scrollwrap\">\r\n <div\r\n class=\"ius-entnav__body ius-scroll ius-scroll--sm\"\r\n #body\r\n [attr.data-scrolled]=\"bodyScrolled() ? 'true' : null\"\r\n >\r\n @if (vacio()) {\r\n <div class=\"ius-entnav__empty\">\r\n @if (emptyStateTemplate(); as tpl) {\r\n <ng-container [ngTemplateOutlet]=\"tpl\" />\r\n } @else {\r\n <ius-empty-state\r\n variant=\"no-results\"\r\n size=\"compact\"\r\n [title]=\"noResultsLabel()\"\r\n [description]=\"descripcionVacio()\"\r\n />\r\n }\r\n </div>\r\n } @else {\r\n @for (s of modelo().secciones; track s.gk) {\r\n <ng-container [ngTemplateOutlet]=\"seccionTpl\" [ngTemplateOutletContext]=\"{ $implicit: s }\" />\r\n }\r\n }\r\n </div>\r\n\r\n <!-- \u00CDndice alfab\u00E9tico: navega, no reordena. Se oculta con b\u00FAsqueda/filtros. -->\r\n @if (alphaVisible()) {\r\n <nav\r\n class=\"ius-entnav__alpha\"\r\n #alpha\r\n role=\"navigation\"\r\n aria-label=\"\u00CDndice alfab\u00E9tico\"\r\n (keydown)=\"onRailKey($event)\"\r\n >\r\n @for (L of displayLetters(); track L) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-entnav__alpha-let\"\r\n [disabled]=\"!letraHabilitada(L)\"\r\n [attr.data-active]=\"activeLetter() === L ? 'true' : null\"\r\n [attr.aria-current]=\"activeLetter() === L ? 'true' : null\"\r\n [attr.aria-label]=\"'Ir a ' + L\"\r\n [attr.tabindex]=\"letraHabilitada(L) ? (L === alphaTabStop() ? 0 : -1) : -1\"\r\n (click)=\"saltarALetra(L)\"\r\n >\r\n {{ L }}\r\n </button>\r\n }\r\n </nav>\r\n }\r\n </div>\r\n\r\n @if (hayPie()) {\r\n <div class=\"ius-entnav__footer\">\r\n <ius-button\r\n variant=\"primary\"\r\n [prefixIcon]=\"createIcon()\"\r\n [label]=\"createLabel()\"\r\n fullWidth\r\n class=\"ius-entnav__cta\"\r\n (clicked)=\"create.emit($event)\"\r\n />\r\n </div>\r\n }\r\n}\r\n\r\n<!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Plantilla de secci\u00F3n (cuerpo y secci\u00F3n fijada comparten) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<ng-template #seccionTpl let-s>\r\n <section\r\n class=\"ius-entnav__section\"\r\n [attr.data-group]=\"s.gk\"\r\n [attr.data-pinned]=\"s.isPinned ? 'true' : null\"\r\n >\r\n @if (s.hasHeader) {\r\n <ius-section-header\r\n [icon]=\"s.group.icon\"\r\n [count]=\"s.group.count\"\r\n [accent]=\"accent()\"\r\n [sticky]=\"s.sticky\"\r\n [collapsible]=\"collapsibleGroups()\"\r\n [collapsed]=\"s.isCollapsed\"\r\n (toggle)=\"alternarPlegadoGrupo(s.gk)\"\r\n >\r\n {{ s.group.label }}\r\n @if (pinnableGroups()) {\r\n <ius-icon-button\r\n iusSectionHeaderAction\r\n class=\"ius-entnav__pinbtn\"\r\n [class.ius-entnav__pinbtn--on]=\"s.isPinned\"\r\n icon=\"pinboard\"\r\n variant=\"tertiary\"\r\n shape=\"circle\"\r\n size=\"small\"\r\n [ariaLabel]=\"etiquetaPinGrupo(s.isPinned)\"\r\n (clicked)=\"alternarPinGrupo(s.gk)\"\r\n />\r\n }\r\n </ius-section-header>\r\n }\r\n\r\n @if (s.padTop) {\r\n <div class=\"ius-entnav__vpad\" [style.height.px]=\"s.padTop\" aria-hidden=\"true\"></div>\r\n }\r\n\r\n @for (d of s.visible; track d.key) {\r\n @switch (d.kind) {\r\n @case ('letter') {\r\n <div class=\"ius-entnav__lanchor\" #letterAnchor [attr.data-letter]=\"d.letter\">\r\n <ius-section-header variant=\"letter\" [accent]=\"accent()\">{{ d.letter }}</ius-section-header>\r\n </div>\r\n }\r\n @case ('addChild') {\r\n <div class=\"ius-entnav__addchild\" [style.padding-left.px]=\"padAddChild(d.level)\">\r\n <ius-text-button\r\n size=\"small\"\r\n prefixIcon=\"add\"\r\n [label]=\"d.node.addChildLabel\"\r\n (clicked)=\"onAddChild(d.node, $event)\"\r\n />\r\n </div>\r\n }\r\n @default {\r\n <ius-entity-row\r\n [kind]=\"d.node.kind ?? 'expediente'\"\r\n [icon]=\"d.node.icon\"\r\n [label]=\"d.node.label\"\r\n [sublabel]=\"d.node.sublabel\"\r\n [level]=\"d.level\"\r\n [accent]=\"accent()\"\r\n [expandable]=\"d.expandable\"\r\n [expanded]=\"d.expanded\"\r\n [loading]=\"d.loading\"\r\n [selected]=\"d.selected\"\r\n [count]=\"d.node.count\"\r\n [unread]=\"d.node.unread\"\r\n [hasUnread]=\"!!d.node.hasUnread\"\r\n [noveltyTone]=\"d.node.noveltyTone ?? 'info'\"\r\n [pinned]=\"!!d.node.pinned\"\r\n [pinnable]=\"d.canPin\"\r\n [actions]=\"d.node.actions ?? []\"\r\n [state]=\"d.node.state\"\r\n [tag]=\"d.node.tag\"\r\n [statusTag]=\"d.node.statusTag\"\r\n (toggle)=\"alternarNodo(d.node)\"\r\n (togglePin)=\"onTogglePinNodo(d.node, $event)\"\r\n (clicked)=\"elegirNodo(d)\"\r\n />\r\n }\r\n }\r\n }\r\n\r\n @if (s.padBot) {\r\n <div class=\"ius-entnav__vpad\" [style.height.px]=\"s.padBot\" aria-hidden=\"true\"></div>\r\n }\r\n\r\n @if (s.showMore) {\r\n <div class=\"ius-entnav__morerow\">\r\n <ius-show-more\r\n [expanded]=\"s.moreExpanded\"\r\n [remaining]=\"s.moreRemaining\"\r\n align=\"end\"\r\n (toggle)=\"alternarShowMore(s.gk)\"\r\n />\r\n </div>\r\n }\r\n\r\n <!-- Carga por lotes: centinela (IntersectionObserver) + \u00ABCargar m\u00E1s\u00BB. -->\r\n @if (s.showLoadMore) {\r\n <div class=\"ius-entnav__loadmore\">\r\n @if (s.loadingMore) {\r\n <ius-loading variant=\"inline\" size=\"small\" [label]=\"textoCargando()\" />\r\n } @else {\r\n <div\r\n class=\"ius-entnav__sentinel\"\r\n #lmSentinel\r\n [attr.data-lm-group]=\"s.gk\"\r\n aria-hidden=\"true\"\r\n ></div>\r\n <ius-text-button size=\"small\" [label]=\"textoCargarMas()\" (clicked)=\"dispararLote(s.gk)\" />\r\n }\r\n </div>\r\n }\r\n </section>\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:340px;min-width:0;height:100%;background:var(--ius-surface-card);border-right:1px solid var(--ius-stroke);font-family:var(--ius-font-body)}:host([data-collapsed=true]){width:52px}:host([data-fluid=true]:not([data-collapsed=true])){width:100%}.ius-entnav__rail{display:flex;flex-direction:column;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-sm) var(--ius-space-xs)}.ius-entnav__head{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--ius-space-xs);padding:var(--ius-space-md) var(--ius-space-md) var(--ius-space-sm);border-bottom:1px solid var(--ius-stroke)}.ius-entnav__titlerow{display:flex;align-items:center;justify-content:space-between;gap:var(--ius-space-xs)}.ius-entnav__actions{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);margin-right:-4px}.ius-entnav__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);display:inline-flex;align-items:center;gap:var(--ius-space-xs)}.ius-entnav__title .ius-icon{font-size:var(--ius-icon-sm)}.ius-entnav__filters{display:flex;flex-wrap:wrap;gap:var(--ius-space-xs)}.ius-entnav__state{display:flex}.ius-entnav__state+.ius-entnav__filters{padding-top:var(--ius-space-xs);border-top:1px solid var(--ius-stroke)}.ius-entnav__addpanel{display:flex;flex-direction:column;min-width:224px;max-width:300px;max-height:min(52vh,360px)}.ius-entnav__addhead{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--ius-space-xxs);padding:var(--ius-space-xxs);border-bottom:1px solid var(--ius-stroke)}.ius-entnav__addlist{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:var(--ius-space-xxs);padding:var(--ius-space-xxs);--_sb-track-margin: var(--ius-space-sm)}.ius-entnav__addempty{padding:var(--ius-space-lg) var(--ius-space-sm);text-align:center;font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary)}.ius-entnav__check--off{visibility:hidden}.ius-entnav__meta{display:flex;align-items:center;justify-content:space-between;gap:var(--ius-space-xs);font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary)}.ius-entnav__meta>span:first-child{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-entnav__meta>ius-dropdown{flex:0 0 auto}.ius-entnav__sort{appearance:none;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-family:var(--ius-font-body);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-sm);line-height:1.2;color:var(--ius-primary-700)}.ius-entnav__sort .ius-icon{font-size:var(--ius-icon-sm)}.ius-entnav__sort:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);border-radius:var(--ius-radius-sm)}.ius-entnav__scrollwrap{position:relative;flex:1 1 auto;min-height:0;display:flex}.ius-entnav__body{flex:1 1 auto;min-width:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:0 var(--ius-space-xs) var(--ius-space-xs);position:relative}.ius-entnav__body[data-scrolled=true]{box-shadow:inset 0 7px 6px -6px #26262629}.ius-entnav__body[data-scrolled=true]:before{content:\"\";position:sticky;top:0;z-index:3;display:block;height:0;margin:0 -8px;border-top:1px solid var(--ius-stroke)}.ius-entnav__section{display:contents}.ius-entnav__body ius-section-header[data-variant=group]{margin:0 -8px;padding-left:var(--ius-space-md);padding-right:var(--ius-space-md)}.ius-entnav__morerow{padding:var(--ius-space-xxs) 0}ius-show-more{padding-right:var(--ius-space-xs)}.ius-entnav__loadmore{display:flex;justify-content:center;padding:var(--ius-space-xs) 0 var(--ius-space-sm)}.ius-entnav__sentinel{height:1px;margin:0;padding:0;pointer-events:none}.ius-entnav__pinned{flex:0 0 auto;padding:var(--ius-space-xxs) var(--ius-space-xs) var(--ius-space-xs);border-bottom:1px solid var(--ius-stroke);background:var(--ius-surface-card)}.ius-entnav__pinned ius-section-header[data-variant=group]{margin:0 -8px;padding-left:var(--ius-space-md);padding-right:var(--ius-space-md)}.ius-entnav__pinbtn{opacity:0;transition:opacity var(--ius-duration-fast) var(--ius-ease-standard)}ius-section-header:hover .ius-entnav__pinbtn,.ius-entnav__pinbtn:focus-within,.ius-entnav__pinbtn--on{opacity:1}.ius-entnav__addchild{display:flex;padding:var(--ius-space-xxs) var(--ius-space-xs) var(--ius-space-xs) 0}.ius-entnav__empty{display:flex;align-items:center;justify-content:center;min-height:220px;padding:var(--ius-space-xl) var(--ius-space-md)}.ius-entnav__footer{flex:0 0 auto;padding:var(--ius-space-sm) var(--ius-space-md);border-top:1px solid var(--ius-stroke)}.ius-entnav__cta{width:100%}.ius-entnav__alpha{flex:0 0 auto;display:flex;flex-direction:column;align-items:stretch;gap:var(--ius-space-none);width:var(--ius-space-lg);padding:var(--ius-space-xxs) 0;overflow:hidden;-webkit-user-select:none;user-select:none}.ius-entnav__alpha-let{appearance:none;border:0;background:transparent;cursor:pointer;flex:1 1 0;min-height:0;display:inline-flex;align-items:center;justify-content:center;padding:0;font-family:var(--ius-font-body);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-tertiary);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-entnav__alpha-let:hover{color:var(--ius-primary-700)}.ius-entnav__alpha-let[data-active=true]{color:var(--ius-primary-900);background:var(--ius-neutral-2);font-weight:var(--ius-fw-bold)}.ius-entnav__alpha-let:disabled{color:var(--ius-text-tertiary);opacity:.35;cursor:default}.ius-entnav__alpha-let:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}\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"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropdownComponent, selector: "ius-dropdown", inputs: ["items", "selectable", "value", "label", "triggerLabel", "triggerIcon", "tone", "variant", "placement", "open", "defaultOpen", "ariaLabel"], outputs: ["valueChange", "openChange"] }, { kind: "component", type: EmptyStateComponent, selector: "ius-empty-state", inputs: ["variant", "size", "tone", "icon", "illustration", "illustrationTemplate", "title", "description", "primaryAction", "secondaryAction", "actionsTemplate", "role"], outputs: ["primaryClick", "secondaryClick"] }, { kind: "component", type: EntityRowComponent, selector: "ius-entity-row", inputs: ["kind", "icon", "label", "sublabel", "level", "accent", "expandable", "expanded", "loading", "selected", "disabled", "count", "unread", "hasUnread", "noveltyTone", "pinned", "pinnable", "actions", "actionsLabel", "state", "tag", "statusTag", "ariaLabel"], outputs: ["toggle", "togglePin", "clicked"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "ariaPressed", "tooltipPlacement"], outputs: ["clicked"] }, { kind: "directive", type: IusMenuItemTrailingDirective, selector: "[iusMenuItemTrailing]" }, { kind: "component", type: LoadingComponent, selector: "ius-loading", inputs: ["variant", "label", "showLabel", "tone", "brand", "size", "active", "ariaLabel"] }, { 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: SearchBarComponent, selector: "ius-search-bar", inputs: ["value", "defaultValue", "size", "disabled", "state", "placeholder", "ariaLabel", "name", "id"], outputs: ["valueChange", "search", "cleared"] }, { kind: "component", type: SectionHeaderComponent, selector: "ius-section-header", inputs: ["icon", "count", "variant", "accent", "collapsible", "collapsed", "sticky", "ariaLabel"], outputs: ["toggle"] }, { kind: "component", type: SegmentedControlComponent, selector: "ius-segmented-control", inputs: ["options", "size", "variant", "fullWidth", "iconOnly", "ariaLabel", "name", "value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: ShowMoreComponent, selector: "ius-show-more", inputs: ["expanded", "remaining", "moreLabel", "lessLabel", "collapsible", "size", "align", "ariaControls"], outputs: ["toggle"] }, { kind: "component", type: TagComponent, selector: "ius-tag", inputs: ["label", "role", "tone", "variant", "size", "shape", "icon", "dot", "count", "closable", "closeLabel", "selected", "disabled", "interactive", "state"], outputs: ["clicked", "closed"] }, { kind: "component", type: TextButtonComponent, selector: "ius-text-button", inputs: ["label", "prefixIcon", "sufixIcon", "size", "disabled", "type", "ariaExpanded", "ariaControls"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
17860
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EntityNavigatorComponent, isStandalone: true, selector: "ius-entity-navigator", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleIcon: { classPropertyName: "titleIcon", publicName: "titleIcon", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchThreshold: { classPropertyName: "searchThreshold", publicName: "searchThreshold", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, selectedFilters: { classPropertyName: "selectedFilters", publicName: "selectedFilters", isSignal: true, isRequired: false, transformFunction: null }, availableFilters: { classPropertyName: "availableFilters", publicName: "availableFilters", isSignal: true, isRequired: false, transformFunction: null }, activeFacets: { classPropertyName: "activeFacets", publicName: "activeFacets", isSignal: true, isRequired: false, transformFunction: null }, stateSegments: { classPropertyName: "stateSegments", publicName: "stateSegments", isSignal: true, isRequired: false, transformFunction: null }, stateValue: { classPropertyName: "stateValue", publicName: "stateValue", isSignal: true, isRequired: false, transformFunction: null }, sortLabel: { classPropertyName: "sortLabel", publicName: "sortLabel", isSignal: true, isRequired: false, transformFunction: null }, sortOptions: { classPropertyName: "sortOptions", publicName: "sortOptions", isSignal: true, isRequired: false, transformFunction: null }, sortValue: { classPropertyName: "sortValue", publicName: "sortValue", isSignal: true, isRequired: false, transformFunction: null }, metaLabel: { classPropertyName: "metaLabel", publicName: "metaLabel", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null }, defaultExpanded: { classPropertyName: "defaultExpanded", publicName: "defaultExpanded", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, autoExpandOnFilter: { classPropertyName: "autoExpandOnFilter", publicName: "autoExpandOnFilter", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, defaultSelected: { classPropertyName: "defaultSelected", publicName: "defaultSelected", isSignal: true, isRequired: false, transformFunction: null }, emptyStateTemplate: { classPropertyName: "emptyStateTemplate", publicName: "emptyStateTemplate", isSignal: true, isRequired: false, transformFunction: null }, noResultsLabel: { classPropertyName: "noResultsLabel", publicName: "noResultsLabel", isSignal: true, isRequired: false, transformFunction: null }, createLabel: { classPropertyName: "createLabel", publicName: "createLabel", isSignal: true, isRequired: false, transformFunction: null }, createIcon: { classPropertyName: "createIcon", publicName: "createIcon", isSignal: true, isRequired: false, transformFunction: null }, groupLimit: { classPropertyName: "groupLimit", publicName: "groupLimit", isSignal: true, isRequired: false, transformFunction: null }, collapsibleGroups: { classPropertyName: "collapsibleGroups", publicName: "collapsibleGroups", isSignal: true, isRequired: false, transformFunction: null }, collapsedGroups: { classPropertyName: "collapsedGroups", publicName: "collapsedGroups", isSignal: true, isRequired: false, transformFunction: null }, stickyHeaders: { classPropertyName: "stickyHeaders", publicName: "stickyHeaders", isSignal: true, isRequired: false, transformFunction: null }, pinnableGroups: { classPropertyName: "pinnableGroups", publicName: "pinnableGroups", isSignal: true, isRequired: false, transformFunction: null }, defaultPinnedGroup: { classPropertyName: "defaultPinnedGroup", publicName: "defaultPinnedGroup", isSignal: true, isRequired: false, transformFunction: null }, moreLabel: { classPropertyName: "moreLabel", publicName: "moreLabel", isSignal: true, isRequired: false, transformFunction: null }, alphaIndex: { classPropertyName: "alphaIndex", publicName: "alphaIndex", isSignal: true, isRequired: false, transformFunction: null }, alphaIndexLetters: { classPropertyName: "alphaIndexLetters", publicName: "alphaIndexLetters", isSignal: true, isRequired: false, transformFunction: null }, loadMoreLabel: { classPropertyName: "loadMoreLabel", publicName: "loadMoreLabel", isSignal: true, isRequired: false, transformFunction: null }, virtualized: { classPropertyName: "virtualized", publicName: "virtualized", isSignal: true, isRequired: false, transformFunction: null }, virtualizeThreshold: { classPropertyName: "virtualizeThreshold", publicName: "virtualizeThreshold", isSignal: true, isRequired: false, transformFunction: null }, itemHeights: { classPropertyName: "itemHeights", publicName: "itemHeights", 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 }, fluidWidth: { classPropertyName: "fluidWidth", publicName: "fluidWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { search: "search", searchChange: "searchChange", searchClear: "searchClear", filter: "filter", filterRemove: "filterRemove", addFilter: "addFilter", stateChange: "stateChange", facetAdd: "facetAdd", facetRemove: "facetRemove", sort: "sort", select: "select", selectedChange: "selectedChange", expandedChange: "expandedChange", togglePin: "togglePin", create: "create", pinGroup: "pinGroup", groupCollapse: "groupCollapse", more: "more", collapsedChange: "collapsedChange", jumpToLetter: "jumpToLetter", loadMore: "loadMore", expandLoad: "expandLoad" }, host: { properties: { "attr.data-collapsed": "isCollapsed() ? 'true' : null", "attr.data-fluid": "fluidWidth() ? 'true' : null", "attr.aria-label": "ariaLabel() || title() || null" }, classAttribute: "ius-entnav" }, viewQueries: [{ propertyName: "bodyRef", first: true, predicate: ["body"], descendants: true, isSignal: true }, { propertyName: "alphaRef", first: true, predicate: ["alpha"], descendants: true, isSignal: true }, { propertyName: "searchRef", first: true, predicate: ["searchBox"], descendants: true, isSignal: true }, { propertyName: "sentinels", predicate: ["lmSentinel"], descendants: true, isSignal: true }, { propertyName: "letterAnchors", predicate: ["letterAnchor"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Riel colapsado: solo expandir + CTA. Rama aparte, como el golden. -->\r\n@if (collapsible() && isCollapsed()) {\r\n <div class=\"ius-entnav__rail\">\r\n <ius-icon-button\r\n icon=\"left_panel_open\"\r\n variant=\"tertiary\"\r\n shape=\"circle\"\r\n size=\"small\"\r\n ariaLabel=\"Expandir\"\r\n (clicked)=\"alternarColapso()\"\r\n />\r\n @if (hayPie()) {\r\n <ius-icon-button\r\n [icon]=\"createIcon()\"\r\n variant=\"secondary\"\r\n shape=\"circle\"\r\n size=\"small\"\r\n [ariaLabel]=\"createLabel()\"\r\n (clicked)=\"create.emit($event)\"\r\n />\r\n }\r\n </div>\r\n} @else {\r\n <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Cabecera \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n <div class=\"ius-entnav__head\">\r\n @if (hayCabecera()) {\r\n <div class=\"ius-entnav__titlerow\">\r\n @if (title()) {\r\n <div class=\"ius-entnav__title\">\r\n @if (titleIcon()) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ titleIcon() }}</span>\r\n }\r\n {{ title() }}\r\n </div>\r\n } @else {\r\n <span></span>\r\n }\r\n <span class=\"ius-entnav__actions\">\r\n @if (showSearchToggle()) {\r\n <!-- El `state: pressed` del golden no se porta: IconButton omite `state`\r\n de su API p\u00FAblica a prop\u00F3sito (decisi\u00F3n suya, documentada). -->\r\n <ius-icon-button\r\n icon=\"search\"\r\n variant=\"tertiary\"\r\n shape=\"circle\"\r\n size=\"small\"\r\n ariaLabel=\"Buscar (\u2318K)\"\r\n (clicked)=\"alternarBusqueda()\"\r\n />\r\n }\r\n @if (collapsible()) {\r\n <ius-icon-button\r\n icon=\"left_panel_close\"\r\n variant=\"tertiary\"\r\n shape=\"circle\"\r\n size=\"small\"\r\n ariaLabel=\"Colapsar\"\r\n (clicked)=\"alternarColapso()\"\r\n />\r\n }\r\n </span>\r\n </div>\r\n }\r\n\r\n @if (searchVisible()) {\r\n <div #searchBox>\r\n <ius-search-bar\r\n [placeholder]=\"searchPlaceholder()\"\r\n size=\"medium\"\r\n [value]=\"searchValue()\"\r\n (valueChange)=\"onSearchValueChange($event)\"\r\n (search)=\"search.emit($event)\"\r\n (cleared)=\"searchClear.emit()\"\r\n />\r\n </div>\r\n }\r\n\r\n <!-- Eje de estado: excluyente, ortogonal a facetas y b\u00FAsqueda; no poda datos. -->\r\n @if (stateSegments()?.length) {\r\n <div class=\"ius-entnav__state\">\r\n <ius-segmented-control\r\n [options]=\"segmentos()\"\r\n [value]=\"stateVal()\"\r\n size=\"small\"\r\n variant=\"subtle\"\r\n fullWidth\r\n (valueChange)=\"elegirEstado($event)\"\r\n />\r\n </div>\r\n }\r\n\r\n @if (hayBarraFiltros()) {\r\n <div class=\"ius-entnav__filters\">\r\n @for (f of filters(); track f.key) {\r\n <ius-tag\r\n role=\"filter\"\r\n size=\"small\"\r\n [tone]=\"tonoFiltro(f)\"\r\n [icon]=\"f.icon\"\r\n [dot]=\"f.dot\"\r\n [count]=\"f.count\"\r\n [label]=\"f.label\"\r\n [selected]=\"activeKeys().has(f.key)\"\r\n [closable]=\"!!f.removable\"\r\n (clicked)=\"alternarFiltro(f.key)\"\r\n (closed)=\"quitarFiltro(f.key)\"\r\n />\r\n }\r\n\r\n <!-- Facetas: Tag `soft` con el tono categ\u00F3rico de su categor\u00EDa, NUNCA solid. -->\r\n @for (f of facets(); track f.key) {\r\n <ius-tag\r\n role=\"label\"\r\n variant=\"soft\"\r\n size=\"small\"\r\n [tone]=\"tonoFaceta(f)\"\r\n [icon]=\"f.icon\"\r\n closable\r\n [label]=\"textoFaceta(f)\"\r\n (closed)=\"quitarFaceta(f.key)\"\r\n />\r\n }\r\n\r\n @if (availableFilters().length) {\r\n <ius-popover\r\n trigger=\"manual\"\r\n [open]=\"addOpen()\"\r\n [dismissable]=\"true\"\r\n placement=\"bottom-start\"\r\n [offset]=\"6\"\r\n [showArrow]=\"false\"\r\n padding=\"none\"\r\n (openChange)=\"onAddOpenChange($event)\"\r\n >\r\n <ius-tag\r\n role=\"filter\"\r\n variant=\"outline\"\r\n tone=\"neutral\"\r\n size=\"small\"\r\n icon=\"add\"\r\n label=\"Filtro\"\r\n [selected]=\"addOpen()\"\r\n (clicked)=\"alternarMenuFiltro()\"\r\n />\r\n\r\n <div iusPopoverContent class=\"ius-entnav__addpanel\">\r\n @if (addStep(); as step) {\r\n <div class=\"ius-entnav__addhead\">\r\n <ius-menu-item\r\n icon=\"chevron_left\"\r\n [label]=\"step.label\"\r\n size=\"small\"\r\n (clicked)=\"volverDelPaso()\"\r\n />\r\n @if (step.picker === 'search') {\r\n <ius-search-bar\r\n size=\"small\"\r\n placeholder=\"Buscar\u2026\"\r\n [value]=\"addQuery()\"\r\n (valueChange)=\"addQuery.set($event)\"\r\n (cleared)=\"addQuery.set('')\"\r\n />\r\n }\r\n </div>\r\n <div class=\"ius-entnav__addlist ius-scroll ius-scroll--sm\">\r\n @if (opcionesDelPaso().length === 0) {\r\n <div class=\"ius-entnav__addempty\">Sin resultados</div>\r\n } @else {\r\n @for (o of opcionesDelPaso(); track o.key) {\r\n <!-- El check se proyecta SIEMPRE y se oculta por CSS: un\r\n `<ng-content>` detr\u00E1s de un `@if` que depende de un\r\n contentChild se pierde en el primer render. -->\r\n <ius-menu-item\r\n [label]=\"o.label\"\r\n size=\"small\"\r\n [selected]=\"facetaActiva(step, o)\"\r\n (clicked)=\"elegirValor(step, o)\"\r\n >\r\n <span\r\n iusMenuItemTrailing\r\n translate=\"no\"\r\n class=\"ius-icon\"\r\n [class.ius-entnav__check--off]=\"!facetaActiva(step, o)\"\r\n >check</span\r\n >\r\n </ius-menu-item>\r\n }\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"ius-entnav__addlist ius-scroll ius-scroll--sm\">\r\n @for (a of categoriasDisponibles(); track a.key) {\r\n <ius-menu-item\r\n [icon]=\"a.icon\"\r\n [label]=\"a.label\"\r\n size=\"small\"\r\n (clicked)=\"elegirCategoria(a)\"\r\n >\r\n <span\r\n iusMenuItemTrailing\r\n translate=\"no\"\r\n class=\"ius-icon\"\r\n [class.ius-entnav__check--off]=\"!a.picker\"\r\n >chevron_right</span\r\n >\r\n </ius-menu-item>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </ius-popover>\r\n }\r\n </div>\r\n }\r\n\r\n @if (hayMeta()) {\r\n <div class=\"ius-entnav__meta\">\r\n <span>{{ metaLabel() || '' }}</span>\r\n @if (sortOptions()?.length) {\r\n <ius-dropdown\r\n [selectable]=\"true\"\r\n [value]=\"sortValue()\"\r\n label=\"Ordenar por\"\r\n tone=\"neutral\"\r\n [items]=\"sortOptions() ?? []\"\r\n placement=\"bottom-end\"\r\n (valueChange)=\"onSort($event)\"\r\n />\r\n } @else if (sortLabel()) {\r\n <button type=\"button\" class=\"ius-entnav__sort\" (click)=\"sort.emit({ value: sortValue() })\">\r\n {{ sortLabel() }}\r\n <span translate=\"no\" class=\"ius-icon\">expand_more</span>\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Secci\u00F3n fijada: vive FUERA del cuerpo con scroll (no entra en la ventana\r\n de render ni en el cursor aritm\u00E9tico de la virtualizaci\u00F3n). -->\r\n @if (modelo().fijada; as fijada) {\r\n <div class=\"ius-entnav__pinned\">\r\n <ng-container [ngTemplateOutlet]=\"seccionTpl\" [ngTemplateOutletContext]=\"{ $implicit: fijada }\" />\r\n </div>\r\n }\r\n\r\n <div class=\"ius-entnav__scrollwrap\">\r\n <div\r\n class=\"ius-entnav__body ius-scroll ius-scroll--sm\"\r\n #body\r\n [attr.data-scrolled]=\"bodyScrolled() ? 'true' : null\"\r\n >\r\n @if (vacio()) {\r\n <div class=\"ius-entnav__empty\">\r\n @if (emptyStateTemplate(); as tpl) {\r\n <ng-container [ngTemplateOutlet]=\"tpl\" />\r\n } @else {\r\n <ius-empty-state\r\n variant=\"no-results\"\r\n size=\"compact\"\r\n [title]=\"noResultsLabel()\"\r\n [description]=\"descripcionVacio()\"\r\n />\r\n }\r\n </div>\r\n } @else {\r\n @for (s of modelo().secciones; track s.gk) {\r\n <ng-container [ngTemplateOutlet]=\"seccionTpl\" [ngTemplateOutletContext]=\"{ $implicit: s }\" />\r\n }\r\n }\r\n </div>\r\n\r\n <!-- \u00CDndice alfab\u00E9tico: navega, no reordena. Se oculta con b\u00FAsqueda/filtros. -->\r\n @if (alphaVisible()) {\r\n <nav\r\n class=\"ius-entnav__alpha\"\r\n #alpha\r\n role=\"navigation\"\r\n aria-label=\"\u00CDndice alfab\u00E9tico\"\r\n (keydown)=\"onRailKey($event)\"\r\n >\r\n @for (L of displayLetters(); track L) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-entnav__alpha-let\"\r\n [disabled]=\"!letraHabilitada(L)\"\r\n [attr.data-active]=\"activeLetter() === L ? 'true' : null\"\r\n [attr.aria-current]=\"activeLetter() === L ? 'true' : null\"\r\n [attr.aria-label]=\"'Ir a ' + L\"\r\n [attr.tabindex]=\"letraHabilitada(L) ? (L === alphaTabStop() ? 0 : -1) : -1\"\r\n (click)=\"saltarALetra(L)\"\r\n >\r\n {{ L }}\r\n </button>\r\n }\r\n </nav>\r\n }\r\n </div>\r\n\r\n @if (hayPie()) {\r\n <div class=\"ius-entnav__footer\">\r\n <ius-button\r\n variant=\"primary\"\r\n [prefixIcon]=\"createIcon()\"\r\n [label]=\"createLabel()\"\r\n fullWidth\r\n class=\"ius-entnav__cta\"\r\n (clicked)=\"create.emit($event)\"\r\n />\r\n </div>\r\n }\r\n}\r\n\r\n<!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Plantilla de secci\u00F3n (cuerpo y secci\u00F3n fijada comparten) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<ng-template #seccionTpl let-s>\r\n <section\r\n class=\"ius-entnav__section\"\r\n [attr.data-group]=\"s.gk\"\r\n [attr.data-pinned]=\"s.isPinned ? 'true' : null\"\r\n >\r\n @if (s.hasHeader) {\r\n <ius-section-header\r\n [icon]=\"s.group.icon\"\r\n [count]=\"s.group.count\"\r\n [accent]=\"accent()\"\r\n [sticky]=\"s.sticky\"\r\n [collapsible]=\"collapsibleGroups()\"\r\n [collapsed]=\"s.isCollapsed\"\r\n (toggle)=\"alternarPlegadoGrupo(s.gk)\"\r\n >\r\n {{ s.group.label }}\r\n @if (pinnableGroups()) {\r\n <ius-icon-button\r\n iusSectionHeaderAction\r\n class=\"ius-entnav__pinbtn\"\r\n [class.ius-entnav__pinbtn--on]=\"s.isPinned\"\r\n icon=\"pinboard\"\r\n variant=\"tertiary\"\r\n shape=\"circle\"\r\n size=\"small\"\r\n [ariaLabel]=\"etiquetaPinGrupo(s.isPinned)\"\r\n (clicked)=\"alternarPinGrupo(s.gk)\"\r\n />\r\n }\r\n </ius-section-header>\r\n }\r\n\r\n @if (s.padTop) {\r\n <div class=\"ius-entnav__vpad\" [style.height.px]=\"s.padTop\" aria-hidden=\"true\"></div>\r\n }\r\n\r\n @for (d of s.visible; track d.key) {\r\n @switch (d.kind) {\r\n @case ('letter') {\r\n <div class=\"ius-entnav__lanchor\" #letterAnchor [attr.data-letter]=\"d.letter\">\r\n <ius-section-header variant=\"letter\" [accent]=\"accent()\">{{ d.letter }}</ius-section-header>\r\n </div>\r\n }\r\n @case ('addChild') {\r\n <div class=\"ius-entnav__addchild\" [style.padding-left.px]=\"padAddChild(d.level)\">\r\n <ius-text-button\r\n size=\"small\"\r\n prefixIcon=\"add\"\r\n [label]=\"d.node.addChildLabel\"\r\n (clicked)=\"onAddChild(d.node, $event)\"\r\n />\r\n </div>\r\n }\r\n @default {\r\n <ius-entity-row\r\n [kind]=\"d.node.kind ?? 'expediente'\"\r\n [icon]=\"d.node.icon\"\r\n [label]=\"d.node.label\"\r\n [sublabel]=\"d.node.sublabel\"\r\n [level]=\"d.level\"\r\n [accent]=\"accent()\"\r\n [expandable]=\"d.expandable\"\r\n [expanded]=\"d.expanded\"\r\n [loading]=\"d.loading\"\r\n [selected]=\"d.selected\"\r\n [count]=\"d.node.count\"\r\n [unread]=\"d.node.unread\"\r\n [hasUnread]=\"!!d.node.hasUnread\"\r\n [noveltyTone]=\"d.node.noveltyTone ?? 'info'\"\r\n [pinned]=\"!!d.node.pinned\"\r\n [pinnable]=\"d.canPin\"\r\n [actions]=\"d.node.actions ?? []\"\r\n [state]=\"d.node.state\"\r\n [tag]=\"d.node.tag\"\r\n [statusTag]=\"d.node.statusTag\"\r\n (toggle)=\"alternarNodo(d.node)\"\r\n (togglePin)=\"onTogglePinNodo(d.node, $event)\"\r\n (clicked)=\"elegirNodo(d)\"\r\n />\r\n }\r\n }\r\n }\r\n\r\n @if (s.padBot) {\r\n <div class=\"ius-entnav__vpad\" [style.height.px]=\"s.padBot\" aria-hidden=\"true\"></div>\r\n }\r\n\r\n @if (s.showMore) {\r\n <div class=\"ius-entnav__morerow\">\r\n <ius-show-more\r\n [expanded]=\"s.moreExpanded\"\r\n [remaining]=\"s.moreRemaining\"\r\n align=\"end\"\r\n (toggle)=\"alternarShowMore(s.gk)\"\r\n />\r\n </div>\r\n }\r\n\r\n <!-- Carga por lotes: centinela (IntersectionObserver) + \u00ABCargar m\u00E1s\u00BB. -->\r\n @if (s.showLoadMore) {\r\n <div class=\"ius-entnav__loadmore\">\r\n @if (s.loadingMore) {\r\n <ius-loading variant=\"inline\" size=\"small\" [label]=\"textoCargando()\" />\r\n } @else {\r\n <div\r\n class=\"ius-entnav__sentinel\"\r\n #lmSentinel\r\n [attr.data-lm-group]=\"s.gk\"\r\n aria-hidden=\"true\"\r\n ></div>\r\n <ius-text-button size=\"small\" [label]=\"textoCargarMas()\" (clicked)=\"dispararLote(s.gk)\" />\r\n }\r\n </div>\r\n }\r\n </section>\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:340px;min-width:0;height:100%;background:var(--ius-surface-card);border-right:1px solid var(--ius-stroke);font-family:var(--ius-font-body)}:host([data-collapsed=true]){width:52px}:host([data-fluid=true]:not([data-collapsed=true])){width:100%}.ius-entnav__rail{display:flex;flex-direction:column;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-sm) var(--ius-space-xs)}.ius-entnav__head{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--ius-space-xs);padding:var(--ius-space-md) var(--ius-space-md) var(--ius-space-sm);border-bottom:1px solid var(--ius-stroke)}.ius-entnav__titlerow{display:flex;align-items:center;justify-content:space-between;gap:var(--ius-space-xs)}.ius-entnav__actions{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);margin-right:-4px}.ius-entnav__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);display:inline-flex;align-items:center;gap:var(--ius-space-xs)}.ius-entnav__title .ius-icon{font-size:var(--ius-icon-sm)}.ius-entnav__filters{display:flex;flex-wrap:wrap;gap:var(--ius-space-xs)}.ius-entnav__state{display:flex}.ius-entnav__state+.ius-entnav__filters{padding-top:var(--ius-space-xs);border-top:1px solid var(--ius-stroke)}.ius-entnav__addpanel{display:flex;flex-direction:column;min-width:224px;max-width:300px;max-height:min(52vh,360px)}.ius-entnav__addhead{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--ius-space-xxs);padding:var(--ius-space-xxs);border-bottom:1px solid var(--ius-stroke)}.ius-entnav__addlist{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:var(--ius-space-xxs);padding:var(--ius-space-xxs);--_sb-track-margin: var(--ius-space-sm)}.ius-entnav__addempty{padding:var(--ius-space-lg) var(--ius-space-sm);text-align:center;font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary)}.ius-entnav__check--off{visibility:hidden}.ius-entnav__meta{display:flex;align-items:center;justify-content:space-between;gap:var(--ius-space-xs);font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary)}.ius-entnav__meta>span:first-child{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-entnav__meta>ius-dropdown{flex:0 0 auto}.ius-entnav__sort{appearance:none;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-family:var(--ius-font-body);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-sm);line-height:1.2;color:var(--ius-primary-700)}.ius-entnav__sort .ius-icon{font-size:var(--ius-icon-sm)}.ius-entnav__sort:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);border-radius:var(--ius-radius-sm)}.ius-entnav__scrollwrap{position:relative;flex:1 1 auto;min-height:0;display:flex}.ius-entnav__body{flex:1 1 auto;min-width:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:0 var(--ius-space-xs) var(--ius-space-xs);position:relative}.ius-entnav__body[data-scrolled=true]{box-shadow:inset 0 7px 6px -6px #26262629}.ius-entnav__body[data-scrolled=true]:before{content:\"\";position:sticky;top:0;z-index:3;display:block;height:0;margin:0 -8px;border-top:1px solid var(--ius-stroke)}.ius-entnav__section{display:contents}.ius-entnav__body ius-section-header[data-variant=group]{margin:0 -8px;padding-left:var(--ius-space-md);padding-right:var(--ius-space-md)}.ius-entnav__morerow{padding:var(--ius-space-xxs) 0}ius-show-more{padding-right:var(--ius-space-xs)}.ius-entnav__loadmore{display:flex;justify-content:center;padding:var(--ius-space-xs) 0 var(--ius-space-sm)}.ius-entnav__sentinel{height:1px;margin:0;padding:0;pointer-events:none}.ius-entnav__pinned{flex:0 0 auto;padding:var(--ius-space-xxs) var(--ius-space-xs) var(--ius-space-xs);border-bottom:1px solid var(--ius-stroke);background:var(--ius-surface-card)}.ius-entnav__pinned ius-section-header[data-variant=group]{margin:0 -8px;padding-left:var(--ius-space-md);padding-right:var(--ius-space-md)}.ius-entnav__pinbtn{opacity:0;transition:opacity var(--ius-duration-fast) var(--ius-ease-standard)}ius-section-header:hover .ius-entnav__pinbtn,.ius-entnav__pinbtn:focus-within,.ius-entnav__pinbtn--on{opacity:1}.ius-entnav__addchild{display:flex;padding:var(--ius-space-xxs) var(--ius-space-xs) var(--ius-space-xs) 0}.ius-entnav__empty{display:flex;align-items:center;justify-content:center;min-height:220px;padding:var(--ius-space-xl) var(--ius-space-md)}.ius-entnav__footer{flex:0 0 auto;padding:var(--ius-space-sm) var(--ius-space-md);border-top:1px solid var(--ius-stroke)}.ius-entnav__cta{width:100%}.ius-entnav__alpha{flex:0 0 auto;display:flex;flex-direction:column;align-items:stretch;gap:var(--ius-space-none);width:var(--ius-space-lg);padding:var(--ius-space-xxs) 0;overflow:hidden;-webkit-user-select:none;user-select:none}.ius-entnav__alpha-let{appearance:none;border:0;background:transparent;cursor:pointer;flex:1 1 0;min-height:0;display:inline-flex;align-items:center;justify-content:center;padding:0;font-family:var(--ius-font-body);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-tertiary);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-entnav__alpha-let:hover{color:var(--ius-primary-700)}.ius-entnav__alpha-let[data-active=true]{color:var(--ius-primary-900);background:var(--ius-neutral-2);font-weight:var(--ius-fw-bold)}.ius-entnav__alpha-let:disabled{color:var(--ius-text-tertiary);opacity:.35;cursor:default}.ius-entnav__alpha-let:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}\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"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropdownComponent, selector: "ius-dropdown", inputs: ["items", "selectable", "value", "label", "triggerLabel", "triggerIcon", "tone", "variant", "placement", "open", "defaultOpen", "ariaLabel"], outputs: ["valueChange", "openChange"] }, { kind: "component", type: EmptyStateComponent, selector: "ius-empty-state", inputs: ["variant", "size", "tone", "icon", "illustration", "illustrationTemplate", "title", "description", "primaryAction", "secondaryAction", "actionsTemplate", "role"], outputs: ["primaryClick", "secondaryClick"] }, { kind: "component", type: EntityRowComponent, selector: "ius-entity-row", inputs: ["kind", "icon", "label", "sublabel", "level", "accent", "expandable", "expanded", "loading", "selected", "disabled", "count", "unread", "hasUnread", "noveltyTone", "pinned", "pinnable", "actions", "actionsLabel", "state", "tag", "statusTag", "ariaLabel"], outputs: ["toggle", "togglePin", "clicked"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "ariaPressed", "tooltipPlacement"], outputs: ["clicked"] }, { kind: "directive", type: IusMenuItemTrailingDirective, selector: "[iusMenuItemTrailing]" }, { kind: "component", type: LoadingComponent, selector: "ius-loading", inputs: ["variant", "label", "showLabel", "tone", "brand", "size", "active", "ariaLabel"] }, { kind: "component", type: MenuItemComponent, selector: "ius-menu-item", inputs: ["icon", "label", "description", "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: SearchBarComponent, selector: "ius-search-bar", inputs: ["value", "defaultValue", "size", "disabled", "state", "placeholder", "ariaLabel", "name", "id"], outputs: ["valueChange", "search", "cleared"] }, { kind: "component", type: SectionHeaderComponent, selector: "ius-section-header", inputs: ["icon", "count", "variant", "accent", "collapsible", "collapsed", "sticky", "ariaLabel"], outputs: ["toggle"] }, { kind: "component", type: SegmentedControlComponent, selector: "ius-segmented-control", inputs: ["options", "size", "variant", "fullWidth", "iconOnly", "ariaLabel", "name", "value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: ShowMoreComponent, selector: "ius-show-more", inputs: ["expanded", "remaining", "moreLabel", "lessLabel", "collapsible", "size", "align", "ariaControls"], outputs: ["toggle"] }, { kind: "component", type: TagComponent, selector: "ius-tag", inputs: ["label", "role", "tone", "variant", "size", "shape", "icon", "dot", "count", "closable", "closeLabel", "selected", "disabled", "interactive", "state"], outputs: ["clicked", "closed"] }, { kind: "component", type: TextButtonComponent, selector: "ius-text-button", inputs: ["label", "prefixIcon", "sufixIcon", "size", "disabled", "type", "ariaExpanded", "ariaControls"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
17540
17861
|
}
|
|
17541
17862
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EntityNavigatorComponent, decorators: [{
|
|
17542
17863
|
type: Component,
|
|
@@ -18141,7 +18462,7 @@ class RepeatableFieldComponent {
|
|
|
18141
18462
|
useExisting: forwardRef(() => RepeatableFieldComponent),
|
|
18142
18463
|
multi: true,
|
|
18143
18464
|
},
|
|
18144
|
-
], ngImport: i0, template: "@if (label) {\r\n <span class=\"ius-repeat__label\" [id]=\"labelId\">\r\n @if (required) {\r\n <span class=\"ius-repeat__req\" aria-hidden=\"true\"></span>\r\n }\r\n {{ label }}\r\n </span>\r\n}\r\n\r\n<div class=\"ius-repeat__rows\" role=\"group\" [attr.aria-labelledby]=\"label ? labelId : null\">\r\n @for (vm of filasVM(); track vm.fila.id) {\r\n <div class=\"ius-repeat__row\">\r\n @if (conTipos()) {\r\n <div class=\"ius-repeat__type\" [style.width]=\"anchoTipo\">\r\n <ius-select\r\n [options]=\"opcionesTipo()\"\r\n [value]=\"vm.fila.type ?? null\"\r\n [placeholder]=\"typePlaceholder\"\r\n [searchable]=\"false\"\r\n [showClear]=\"false\"\r\n [showHelpText]=\"false\"\r\n [disabled]=\"disabled\"\r\n [size]=\"size\"\r\n (valueChange)=\"setTipo(vm.fila.id, $event)\"\r\n />\r\n </div>\r\n }\r\n\r\n <div class=\"ius-repeat__control\">\r\n @if (renderControl) {\r\n <ng-container [ngTemplateOutlet]=\"renderControl\" [ngTemplateOutletContext]=\"vm.ctx\" />\r\n } @else {\r\n <!--\r\n `[ngModel]` de una v\u00EDa: TextField expone su valor solo por CVA (mismo\r\n recurso que ius-query-builder). `standalone` evita que un <form> del\r\n consumidor intente registrar estos inputs como controles con nombre.\r\n -->\r\n <ius-text-field\r\n [ngModel]=\"vm.texto\"\r\n [ngModelOptions]=\"ngModelSuelto\"\r\n [placeholder]=\"placeholder\"\r\n [prefixIcon]=\"prefixIcon\"\r\n [type]=\"tipoInput()\"\r\n [disabled]=\"disabled\"\r\n [size]=\"size\"\r\n [error]=\"vm.error\"\r\n [errorText]=\"vm.errorText\"\r\n [showHelpText]=\"!!vm.errorText\"\r\n [showClear]=\"false\"\r\n (ngModelChange)=\"setValor(vm.fila.id, $event)\"\r\n />\r\n }\r\n </div>\r\n\r\n <div class=\"ius-repeat__remove\">\r\n <ius-icon-button\r\n icon=\"close\"\r\n variant=\"tertiary\"\r\n shape=\"squared\"\r\n size=\"small\"\r\n tooltip=\"Quitar\"\r\n ariaLabel=\"Quitar fila\"\r\n [disabled]=\"vm.quitarDeshabilitado\"\r\n (clicked)=\"quitar(vm.fila.id)\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n\r\n<div class=\"ius-repeat__foot\">\r\n <ius-text-button\r\n [prefixIcon]=\"addIcon\"\r\n [label]=\"addLabel\"\r\n [size]=\"size\"\r\n [disabled]=\"disabled || alTope()\"\r\n (clicked)=\"agregar()\"\r\n />\r\n</div>\r\n\r\n@if (pie()) {\r\n <span class=\"ius-repeat__hint\">{{ pie() }}</span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);--_rf-field-h: 40px}:host([data-size=small]){--_rf-field-h: 34px}:host([data-size=large]){--_rf-field-h: 48px}@container style(--ius-control-size: small){:host(:not([data-size])){--_rf-field-h: 34px}}@container style(--ius-control-size: large){:host(:not([data-size])){--_rf-field-h: 48px}}.ius-repeat__label{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font:var(--ius-fw-medium) var(--ius-fs-sm)/var(--ius-lh-sm) var(--ius-font-body);color:var(--ius-text-secondary)}.ius-repeat__req{width:6px;height:6px;border-radius:var(--ius-radius-pill);background:var(--ius-danger-500);flex:0 0 auto}.ius-repeat__rows{display:flex;flex-direction:column;gap:var(--ius-space-sm)}.ius-repeat__row{display:flex;align-items:flex-start;gap:var(--ius-space-xs)}.ius-repeat__type{flex:0 0 auto;width:var(--_rf-type-w, 150px)}.ius-repeat__type .ius-tf{min-width:0;max-width:none;width:100%}.ius-repeat__type ::ng-deep .ius-select__chevron{height:var(--ius-lh-base)}.ius-repeat__row ::ng-deep .ius-tf__field{align-items:center}.ius-repeat__control{flex:1 1 auto;min-width:0}.ius-repeat__control .ius-tf{max-width:none;width:100%}.ius-repeat__remove{flex:0 0 auto;height:var(--_rf-field-h);display:flex;align-items:center}.ius-repeat__foot{display:flex}.ius-repeat__hint{font:var(--ius-fw-regular) var(--ius-fs-sm)/var(--ius-lh-sm) var(--ius-font-body);color:var(--ius-text-tertiary)}:host([data-error=true]) .ius-repeat__hint{color:var(--ius-danger-700)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextFieldComponent, selector: "ius-text-field", inputs: ["label", "placeholder", "required", "prefixIcon", "showClear", "helpText", "errorText", "showHelpText", "showIconHelp", "iconHelpTitle", "iconHelpContent", "error", "name", "autocomplete", "type", "size", "disabled"], outputs: ["valueChange", "cleared"] }, { kind: "component", type: SelectComponent, selector: "ius-select", inputs: ["options", "multiple", "size", "disabled", "error", "state", "open", "value", "label", "required", "placeholder", "prefixIcon", "searchable", "searchPlaceholder", "emptyText", "creatable", "createPlaceholder", "createLabel", "createFactory", "maxVisible", "helpText", "errorText", "showHelpText", "showIconHelp", "iconHelpTitle", "iconHelpContent", "showClear", "defaultOpen", "compact", "defaultValue", "id", "name"], outputs: ["valueChange", "cleared", "openChange", "created"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "ariaPressed", "tooltipPlacement"], outputs: ["clicked"] }, { kind: "component", type: TextButtonComponent, selector: "ius-text-button", inputs: ["label", "prefixIcon", "sufixIcon", "size", "disabled", "type", "ariaExpanded", "ariaControls"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
18465
|
+
], ngImport: i0, template: "@if (label) {\r\n <span class=\"ius-repeat__label\" [id]=\"labelId\">\r\n @if (required) {\r\n <span class=\"ius-repeat__req\" aria-hidden=\"true\"></span>\r\n }\r\n {{ label }}\r\n </span>\r\n}\r\n\r\n<div class=\"ius-repeat__rows\" role=\"group\" [attr.aria-labelledby]=\"label ? labelId : null\">\r\n @for (vm of filasVM(); track vm.fila.id) {\r\n <div class=\"ius-repeat__row\">\r\n @if (conTipos()) {\r\n <div class=\"ius-repeat__type\" [style.width]=\"anchoTipo\">\r\n <ius-select\r\n [options]=\"opcionesTipo()\"\r\n [value]=\"vm.fila.type ?? null\"\r\n [placeholder]=\"typePlaceholder\"\r\n [searchable]=\"false\"\r\n [showClear]=\"false\"\r\n [showHelpText]=\"false\"\r\n [disabled]=\"disabled\"\r\n [size]=\"size\"\r\n (valueChange)=\"setTipo(vm.fila.id, $event)\"\r\n />\r\n </div>\r\n }\r\n\r\n <div class=\"ius-repeat__control\">\r\n @if (renderControl) {\r\n <ng-container [ngTemplateOutlet]=\"renderControl\" [ngTemplateOutletContext]=\"vm.ctx\" />\r\n } @else {\r\n <!--\r\n `[ngModel]` de una v\u00EDa: TextField expone su valor solo por CVA (mismo\r\n recurso que ius-query-builder). `standalone` evita que un <form> del\r\n consumidor intente registrar estos inputs como controles con nombre.\r\n -->\r\n <ius-text-field\r\n [ngModel]=\"vm.texto\"\r\n [ngModelOptions]=\"ngModelSuelto\"\r\n [placeholder]=\"placeholder\"\r\n [prefixIcon]=\"prefixIcon\"\r\n [type]=\"tipoInput()\"\r\n [disabled]=\"disabled\"\r\n [size]=\"size\"\r\n [error]=\"vm.error\"\r\n [errorText]=\"vm.errorText\"\r\n [showHelpText]=\"!!vm.errorText\"\r\n [showClear]=\"false\"\r\n (ngModelChange)=\"setValor(vm.fila.id, $event)\"\r\n />\r\n }\r\n </div>\r\n\r\n <div class=\"ius-repeat__remove\">\r\n <ius-icon-button\r\n icon=\"close\"\r\n variant=\"tertiary\"\r\n shape=\"squared\"\r\n size=\"small\"\r\n tooltip=\"Quitar\"\r\n ariaLabel=\"Quitar fila\"\r\n [disabled]=\"vm.quitarDeshabilitado\"\r\n (clicked)=\"quitar(vm.fila.id)\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n\r\n<div class=\"ius-repeat__foot\">\r\n <ius-text-button\r\n [prefixIcon]=\"addIcon\"\r\n [label]=\"addLabel\"\r\n [size]=\"size\"\r\n [disabled]=\"disabled || alTope()\"\r\n (clicked)=\"agregar()\"\r\n />\r\n</div>\r\n\r\n@if (pie()) {\r\n <span class=\"ius-repeat__hint\">{{ pie() }}</span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);--_rf-field-h: 40px}:host([data-size=small]){--_rf-field-h: 34px}:host([data-size=large]){--_rf-field-h: 48px}@container style(--ius-control-size: small){:host(:not([data-size])){--_rf-field-h: 34px}}@container style(--ius-control-size: large){:host(:not([data-size])){--_rf-field-h: 48px}}.ius-repeat__label{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font:var(--ius-fw-medium) var(--ius-fs-sm)/var(--ius-lh-sm) var(--ius-font-body);color:var(--ius-text-secondary)}.ius-repeat__req{width:6px;height:6px;border-radius:var(--ius-radius-pill);background:var(--ius-danger-500);flex:0 0 auto}.ius-repeat__rows{display:flex;flex-direction:column;gap:var(--ius-space-sm)}.ius-repeat__row{display:flex;align-items:flex-start;gap:var(--ius-space-xs)}.ius-repeat__type{flex:0 0 auto;width:var(--_rf-type-w, 150px)}.ius-repeat__type .ius-tf{min-width:0;max-width:none;width:100%}.ius-repeat__type ::ng-deep .ius-select__chevron{height:var(--ius-lh-base)}.ius-repeat__row ::ng-deep .ius-tf__field{align-items:center}.ius-repeat__control{flex:1 1 auto;min-width:0}.ius-repeat__control .ius-tf{max-width:none;width:100%}.ius-repeat__remove{flex:0 0 auto;height:var(--_rf-field-h);display:flex;align-items:center}.ius-repeat__foot{display:flex}.ius-repeat__hint{font:var(--ius-fw-regular) var(--ius-fs-sm)/var(--ius-lh-sm) var(--ius-font-body);color:var(--ius-text-tertiary)}:host([data-error=true]) .ius-repeat__hint{color:var(--ius-danger-700)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextFieldComponent, selector: "ius-text-field", inputs: ["label", "placeholder", "required", "prefixIcon", "showClear", "helpText", "errorText", "showHelpText", "showIconHelp", "iconHelpTitle", "iconHelpContent", "error", "name", "autocomplete", "type", "inputMode", "maxLength", "size", "disabled"], outputs: ["valueChange", "cleared"] }, { kind: "component", type: SelectComponent, selector: "ius-select", inputs: ["options", "multiple", "size", "disabled", "error", "state", "open", "value", "label", "required", "placeholder", "prefixIcon", "searchable", "searchPlaceholder", "emptyText", "creatable", "createPlaceholder", "createLabel", "createFactory", "maxVisible", "helpText", "errorText", "showHelpText", "showIconHelp", "iconHelpTitle", "iconHelpContent", "showClear", "defaultOpen", "compact", "defaultValue", "id", "name"], outputs: ["valueChange", "cleared", "openChange", "created"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "ariaPressed", "tooltipPlacement"], outputs: ["clicked"] }, { kind: "component", type: TextButtonComponent, selector: "ius-text-button", inputs: ["label", "prefixIcon", "sufixIcon", "size", "disabled", "type", "ariaExpanded", "ariaControls"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
18145
18466
|
}
|
|
18146
18467
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RepeatableFieldComponent, decorators: [{
|
|
18147
18468
|
type: Component,
|
|
@@ -21334,7 +21655,7 @@ class AutocompleteComponent {
|
|
|
21334
21655
|
useExisting: forwardRef(() => AutocompleteComponent),
|
|
21335
21656
|
multi: true,
|
|
21336
21657
|
},
|
|
21337
|
-
], viewQueries: [{ propertyName: "campo", first: true, predicate: ["campo"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<!--\r\n Trigger (el TextField) como children del popover y la lista como\r\n `[iusPopoverContent]` \u2014 mismo patr\u00F3n que ius-person-picker / ius-query-builder.\r\n `trigger=\"manual\"` porque la apertura la gobierna este componente;\r\n `dismissable` cubre Esc y pointerdown fuera.\r\n-->\r\n<ius-popover\r\n trigger=\"manual\"\r\n [open]=\"listaVisible()\"\r\n [placement]=\"placement\"\r\n [offset]=\"4\"\r\n [showArrow]=\"false\"\r\n padding=\"none\"\r\n dismissable\r\n panelClass=\"ius-autocomplete-pop\"\r\n (openChange)=\"onPopoverOpenChange($event)\"\r\n>\r\n <!--\r\n `[ngModel]` de una v\u00EDa: TextField expone su valor solo por CVA (mismo\r\n recurso que ius-query-builder). `standalone` evita que un <form> del\r\n consumidor intente registrar este input como control con nombre.\r\n\r\n `[name]` lo consumen DOS directivas a la vez \u2014 el TextField y el propio\r\n NgModel, que lo exige no-nulo \u2014 de ah\u00ED el `?? ''`. Con `standalone` ese\r\n nombre es inerte para el formulario y solo cuenta el que llega al input.\r\n -->\r\n <ius-text-field\r\n #campo\r\n [ngModel]=\"queryText()\"\r\n [ngModelOptions]=\"ngModelSuelto\"\r\n [label]=\"label\"\r\n [placeholder]=\"placeholder\"\r\n [size]=\"size\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [error]=\"error\"\r\n [errorText]=\"errorText\"\r\n [helpText]=\"helpText\"\r\n [prefixIcon]=\"prefixIcon\"\r\n [name]=\"name ?? ''\"\r\n autocomplete=\"off\"\r\n [showClear]=\"mostrarClear()\"\r\n (ngModelChange)=\"onInput($event)\"\r\n (cleared)=\"onClear()\"\r\n />\r\n\r\n <div iusPopoverContent class=\"ius-autocomplete__panel\" [style.width.px]=\"anchoMenu()\">\r\n @if (cargando()) {\r\n <div class=\"ius-autocomplete__loading\">\r\n <span class=\"ius-autocomplete__spinner\" aria-hidden=\"true\"></span>\r\n {{ loadingText }}\r\n </div>\r\n } @else if (itemsVM().length === 0) {\r\n <div class=\"ius-autocomplete__msg\">{{ mensajeVacio() }}</div>\r\n } @else {\r\n <div class=\"ius-autocomplete__list ius-scroll ius-scroll--sm\" role=\"listbox\">\r\n @for (vm of itemsVM(); track vm.key) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-autocomplete__item\"\r\n role=\"option\"\r\n [attr.data-highlighted]=\"vm.ctx.highlighted ? 'true' : null\"\r\n [attr.aria-selected]=\"vm.ctx.highlighted ? 'true' : 'false'\"\r\n (mousedown)=\"onItemMouseDown($event, vm.item)\"\r\n (mouseenter)=\"resaltado.set(vm.index)\"\r\n >\r\n @if (renderItem) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"renderItem\"\r\n [ngTemplateOutletContext]=\"vm.ctx\"\r\n />\r\n } @else if (vm.match) {\r\n <!-- una sola l\u00EDnea a prop\u00F3sito: un salto aqu\u00ED inyectar\u00EDa espacios dentro del label -->\r\n <span class=\"ius-autocomplete__item-label\">{{ vm.pre }}<mark class=\"ius-autocomplete__item-match\">{{ vm.match }}</mark>{{ vm.post }}</span>\r\n } @else {\r\n <span class=\"ius-autocomplete__item-label\">{{ vm.label }}</span>\r\n }\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</ius-popover>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}ius-popover{display:block;width:100%}.ius-autocomplete__panel{display:block;min-width:0}.ius-autocomplete__list{display:flex;flex-direction:column;min-width:240px;max-height:280px;overflow-y:auto;font-family:var(--ius-font-body)}.ius-autocomplete__item{appearance:none;border:0;background:transparent;display:flex;align-items:center;gap:var(--ius-space-xs);text-align:left;cursor:pointer;padding:var(--ius-space-xs) var(--ius-space-sm);min-width:0;font:var(--ius-fw-regular) var(--ius-fs-sm)/1.4 var(--ius-font-body);color:var(--ius-text-primary)}.ius-autocomplete__item:hover,.ius-autocomplete__item[data-highlighted=true]{background:var(--ius-neutral-1)}.ius-autocomplete__item:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-autocomplete__item ::ng-deep .ius-icon{font-size:var(--ius-icon-md);color:var(--ius-text-tertiary);flex:0 0 auto}.ius-autocomplete__item ::ng-deep .ius-autocomplete__item-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}.ius-autocomplete__item-match{font-weight:var(--ius-fw-semibold);color:var(--ius-text-primary);background:var(--ius-info-100);border-radius:var(--ius-radius-sm);padding:0 var(--ius-space-xxs)}.ius-autocomplete__msg{padding:var(--ius-space-sm) var(--ius-space-md);font:var(--ius-fw-regular) 12.5px/1.4 var(--ius-font-body);color:var(--ius-text-tertiary);text-align:center}.ius-autocomplete__loading{display:flex;align-items:center;justify-content:center;gap:var(--ius-space-xs);padding:var(--ius-space-sm) var(--ius-space-md);font-size:12.5px;color:var(--ius-text-secondary)}.ius-autocomplete__spinner{width:14px;height:14px;border-radius:50%;border:2px solid var(--ius-neutral-3);border-top-color:var(--ius-primary-500);animation:ius-autocomplete-spin .8s linear infinite}@keyframes ius-autocomplete-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.ius-autocomplete__spinner{animation-duration:2s}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextFieldComponent, selector: "ius-text-field", inputs: ["label", "placeholder", "required", "prefixIcon", "showClear", "helpText", "errorText", "showHelpText", "showIconHelp", "iconHelpTitle", "iconHelpContent", "error", "name", "autocomplete", "type", "size", "disabled"], outputs: ["valueChange", "cleared"] }, { 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 }); }
|
|
21658
|
+
], viewQueries: [{ propertyName: "campo", first: true, predicate: ["campo"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<!--\r\n Trigger (el TextField) como children del popover y la lista como\r\n `[iusPopoverContent]` \u2014 mismo patr\u00F3n que ius-person-picker / ius-query-builder.\r\n `trigger=\"manual\"` porque la apertura la gobierna este componente;\r\n `dismissable` cubre Esc y pointerdown fuera.\r\n-->\r\n<ius-popover\r\n trigger=\"manual\"\r\n [open]=\"listaVisible()\"\r\n [placement]=\"placement\"\r\n [offset]=\"4\"\r\n [showArrow]=\"false\"\r\n padding=\"none\"\r\n dismissable\r\n panelClass=\"ius-autocomplete-pop\"\r\n (openChange)=\"onPopoverOpenChange($event)\"\r\n>\r\n <!--\r\n `[ngModel]` de una v\u00EDa: TextField expone su valor solo por CVA (mismo\r\n recurso que ius-query-builder). `standalone` evita que un <form> del\r\n consumidor intente registrar este input como control con nombre.\r\n\r\n `[name]` lo consumen DOS directivas a la vez \u2014 el TextField y el propio\r\n NgModel, que lo exige no-nulo \u2014 de ah\u00ED el `?? ''`. Con `standalone` ese\r\n nombre es inerte para el formulario y solo cuenta el que llega al input.\r\n -->\r\n <ius-text-field\r\n #campo\r\n [ngModel]=\"queryText()\"\r\n [ngModelOptions]=\"ngModelSuelto\"\r\n [label]=\"label\"\r\n [placeholder]=\"placeholder\"\r\n [size]=\"size\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [error]=\"error\"\r\n [errorText]=\"errorText\"\r\n [helpText]=\"helpText\"\r\n [prefixIcon]=\"prefixIcon\"\r\n [name]=\"name ?? ''\"\r\n autocomplete=\"off\"\r\n [showClear]=\"mostrarClear()\"\r\n (ngModelChange)=\"onInput($event)\"\r\n (cleared)=\"onClear()\"\r\n />\r\n\r\n <div iusPopoverContent class=\"ius-autocomplete__panel\" [style.width.px]=\"anchoMenu()\">\r\n @if (cargando()) {\r\n <div class=\"ius-autocomplete__loading\">\r\n <span class=\"ius-autocomplete__spinner\" aria-hidden=\"true\"></span>\r\n {{ loadingText }}\r\n </div>\r\n } @else if (itemsVM().length === 0) {\r\n <div class=\"ius-autocomplete__msg\">{{ mensajeVacio() }}</div>\r\n } @else {\r\n <div class=\"ius-autocomplete__list ius-scroll ius-scroll--sm\" role=\"listbox\">\r\n @for (vm of itemsVM(); track vm.key) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-autocomplete__item\"\r\n role=\"option\"\r\n [attr.data-highlighted]=\"vm.ctx.highlighted ? 'true' : null\"\r\n [attr.aria-selected]=\"vm.ctx.highlighted ? 'true' : 'false'\"\r\n (mousedown)=\"onItemMouseDown($event, vm.item)\"\r\n (mouseenter)=\"resaltado.set(vm.index)\"\r\n >\r\n @if (renderItem) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"renderItem\"\r\n [ngTemplateOutletContext]=\"vm.ctx\"\r\n />\r\n } @else if (vm.match) {\r\n <!-- una sola l\u00EDnea a prop\u00F3sito: un salto aqu\u00ED inyectar\u00EDa espacios dentro del label -->\r\n <span class=\"ius-autocomplete__item-label\">{{ vm.pre }}<mark class=\"ius-autocomplete__item-match\">{{ vm.match }}</mark>{{ vm.post }}</span>\r\n } @else {\r\n <span class=\"ius-autocomplete__item-label\">{{ vm.label }}</span>\r\n }\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</ius-popover>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}ius-popover{display:block;width:100%}.ius-autocomplete__panel{display:block;min-width:0}.ius-autocomplete__list{display:flex;flex-direction:column;min-width:240px;max-height:280px;overflow-y:auto;font-family:var(--ius-font-body)}.ius-autocomplete__item{appearance:none;border:0;background:transparent;display:flex;align-items:center;gap:var(--ius-space-xs);text-align:left;cursor:pointer;padding:var(--ius-space-xs) var(--ius-space-sm);min-width:0;font:var(--ius-fw-regular) var(--ius-fs-sm)/1.4 var(--ius-font-body);color:var(--ius-text-primary)}.ius-autocomplete__item:hover,.ius-autocomplete__item[data-highlighted=true]{background:var(--ius-neutral-1)}.ius-autocomplete__item:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-autocomplete__item ::ng-deep .ius-icon{font-size:var(--ius-icon-md);color:var(--ius-text-tertiary);flex:0 0 auto}.ius-autocomplete__item ::ng-deep .ius-autocomplete__item-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}.ius-autocomplete__item-match{font-weight:var(--ius-fw-semibold);color:var(--ius-text-primary);background:var(--ius-info-100);border-radius:var(--ius-radius-sm);padding:0 var(--ius-space-xxs)}.ius-autocomplete__msg{padding:var(--ius-space-sm) var(--ius-space-md);font:var(--ius-fw-regular) 12.5px/1.4 var(--ius-font-body);color:var(--ius-text-tertiary);text-align:center}.ius-autocomplete__loading{display:flex;align-items:center;justify-content:center;gap:var(--ius-space-xs);padding:var(--ius-space-sm) var(--ius-space-md);font-size:12.5px;color:var(--ius-text-secondary)}.ius-autocomplete__spinner{width:14px;height:14px;border-radius:50%;border:2px solid var(--ius-neutral-3);border-top-color:var(--ius-primary-500);animation:ius-autocomplete-spin .8s linear infinite}@keyframes ius-autocomplete-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.ius-autocomplete__spinner{animation-duration:2s}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextFieldComponent, selector: "ius-text-field", inputs: ["label", "placeholder", "required", "prefixIcon", "showClear", "helpText", "errorText", "showHelpText", "showIconHelp", "iconHelpTitle", "iconHelpContent", "error", "name", "autocomplete", "type", "inputMode", "maxLength", "size", "disabled"], outputs: ["valueChange", "cleared"] }, { 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 }); }
|
|
21338
21659
|
}
|
|
21339
21660
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
21340
21661
|
type: Component,
|
|
@@ -23045,7 +23366,7 @@ class DetailSidePanelComponent {
|
|
|
23045
23366
|
this.collapsedChange.emit(next);
|
|
23046
23367
|
}
|
|
23047
23368
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DetailSidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
23048
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DetailSidePanelComponent, isStandalone: true, selector: "ius-detail-side-panel", inputs: { width: "width", title: "title", titleTemplate: "titleTemplate", titleIcon: "titleIcon", collapsible: ["collapsible", "collapsible", booleanAttribute], collapsed: "collapsed", defaultCollapsed: ["defaultCollapsed", "defaultCollapsed", booleanAttribute], collapseLabel: "collapseLabel", expandLabel: "expandLabel", expandIcon: "expandIcon", sections: "sections", accordion: ["accordion", "accordion", booleanAttribute], accordionMultiple: ["accordionMultiple", "accordionMultiple", booleanAttribute], ariaLabel: "ariaLabel" }, outputs: { collapsedChange: "collapsedChange" }, host: { attributes: { "role": "complementary" }, properties: { "attr.data-collapsed": "isCollapsed ? 'true' : null", "attr.aria-label": "ariaLabel || title || null", "style.--_ds-w": "widthCss" }, classAttribute: "ius-detailside" }, ngImport: i0, template: "@if (isCollapsed) {\r\n <!-- Riel colapsado (mismo patr\u00F3n que EntityNavigator): bot\u00F3n para reabrir + t\u00EDtulo vertical. -->\r\n <div class=\"ius-detailside__rail\">\r\n <ius-icon-button\r\n [icon]=\"expandIcon\"\r\n variant=\"tertiary\"\r\n shape=\"circle\"\r\n size=\"small\"\r\n [tooltip]=\"expandLabel\"\r\n [ariaLabel]=\"expandLabel\"\r\n (clicked)=\"toggle()\"\r\n />\r\n @if (title != null) {\r\n <span class=\"ius-detailside__railtitle\" aria-hidden=\"true\">{{ title }}</span>\r\n }\r\n </div>\r\n} @else {\r\n @if (showHead) {\r\n <div class=\"ius-detailside__head\">\r\n @if (hasTitle) {\r\n <div class=\"ius-detailside__title\">\r\n @if (titleIcon) {\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ titleIcon }}</span>\r\n }\r\n @if (titleTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"titleTemplate\" />\r\n } @else {\r\n {{ title }}\r\n }\r\n </div>\r\n } @else {\r\n <span></span>\r\n }\r\n @if (collapsible) {\r\n <span class=\"ius-detailside__collapse\">\r\n <ius-icon-button\r\n icon=\"left_panel_close\"\r\n variant=\"tertiary\"\r\n shape=\"circle\"\r\n size=\"small\"\r\n [tooltip]=\"collapseLabel\"\r\n [ariaLabel]=\"collapseLabel\"\r\n (clicked)=\"toggle()\"\r\n />\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"ius-detailside__body ius-scroll\" [attr.data-accordion]=\"useAccordion ? 'true' : null\">\r\n @if (useAccordion) {\r\n <ius-accordion\r\n variant=\"divided\"\r\n [multiple]=\"accordionMultiple\"\r\n [items]=\"accordionItems\"\r\n [defaultOpen]=\"accordionDefaultOpen\"\r\n />\r\n } @else if (hasSections) {\r\n @for (s of sections; track sectionId(s, $index); let i = $index) {\r\n <section class=\"ius-detailside__section\">\r\n @if (s.title != null) {\r\n <h3 class=\"ius-detailside__section-title\">{{ s.title }}</h3>\r\n }\r\n <ng-container [ngTemplateOutlet]=\"s.content\" />\r\n </section>\r\n }\r\n } @else {\r\n <ng-content />\r\n }\r\n </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{box-sizing:border-box;display:flex;flex-direction:column;width:var(--_ds-w, 340px);flex:0 0 auto;height:100%;min-height:0;background:var(--ius-surface-card);border-left:1px solid var(--ius-stroke);font-family:var(--ius-font-body)}:host([data-collapsed=true]){width:52px}.ius-detailside__rail{display:flex;flex-direction:column;align-items:center;gap:var(--ius-space-sm);padding:var(--ius-space-sm) var(--ius-space-xs)}.ius-detailside__railtitle{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);white-space:nowrap}.ius-detailside__head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--ius-space-xs);padding:var(--ius-space-md) var(--ius-space-lg) var(--ius-space-sm);border-bottom:1px solid var(--ius-stroke)}.ius-detailside__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);display:inline-flex;align-items:center;gap:var(--ius-space-xs);min-width:0}.ius-detailside__title .ius-icon{font-size:var(--ius-icon-sm)}.ius-detailside__collapse{margin:-4px -4px -4px 0}.ius-detailside__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--ius-space-lg);display:flex;flex-direction:column;gap:var(--ius-space-lg);--_sb-track-margin: var(--ius-space-sm)}.ius-detailside__body[data-accordion=true]{padding:0 var(--ius-space-lg);gap:0}.ius-detailside__section{display:flex;flex-direction:column;gap:var(--ius-space-sm)}.ius-detailside__section-title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-base);color:var(--ius-text-primary);margin:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AccordionComponent, selector: "ius-accordion", inputs: ["items", "multiple", "open", "defaultOpen", "variant", "chevronIcon"], outputs: ["openChange"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "ariaPressed", "tooltipPlacement"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
23369
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DetailSidePanelComponent, isStandalone: true, selector: "ius-detail-side-panel", inputs: { width: "width", title: "title", titleTemplate: "titleTemplate", titleIcon: "titleIcon", collapsible: ["collapsible", "collapsible", booleanAttribute], collapsed: "collapsed", defaultCollapsed: ["defaultCollapsed", "defaultCollapsed", booleanAttribute], collapseLabel: "collapseLabel", expandLabel: "expandLabel", expandIcon: "expandIcon", sections: "sections", accordion: ["accordion", "accordion", booleanAttribute], accordionMultiple: ["accordionMultiple", "accordionMultiple", booleanAttribute], ariaLabel: "ariaLabel" }, outputs: { collapsedChange: "collapsedChange" }, host: { attributes: { "role": "complementary" }, properties: { "attr.data-collapsed": "isCollapsed ? 'true' : null", "attr.aria-label": "ariaLabel || title || null", "style.--_ds-w": "widthCss" }, classAttribute: "ius-detailside" }, ngImport: i0, template: "@if (isCollapsed) {\r\n <!-- Riel colapsado (mismo patr\u00F3n que EntityNavigator): bot\u00F3n para reabrir + t\u00EDtulo vertical. -->\r\n <div class=\"ius-detailside__rail\">\r\n <ius-icon-button\r\n [icon]=\"expandIcon\"\r\n variant=\"tertiary\"\r\n shape=\"circle\"\r\n size=\"small\"\r\n [tooltip]=\"expandLabel\"\r\n [ariaLabel]=\"expandLabel\"\r\n (clicked)=\"toggle()\"\r\n />\r\n @if (title != null) {\r\n <span class=\"ius-detailside__railtitle\" aria-hidden=\"true\">{{ title }}</span>\r\n }\r\n </div>\r\n} @else {\r\n @if (showHead) {\r\n <div class=\"ius-detailside__head\">\r\n @if (hasTitle) {\r\n <div class=\"ius-detailside__title\">\r\n @if (titleIcon) {\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ titleIcon }}</span>\r\n }\r\n @if (titleTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"titleTemplate\" />\r\n } @else {\r\n {{ title }}\r\n }\r\n </div>\r\n } @else {\r\n <span></span>\r\n }\r\n @if (collapsible) {\r\n <span class=\"ius-detailside__collapse\">\r\n <ius-icon-button\r\n icon=\"left_panel_close\"\r\n variant=\"tertiary\"\r\n shape=\"circle\"\r\n size=\"small\"\r\n [tooltip]=\"collapseLabel\"\r\n [ariaLabel]=\"collapseLabel\"\r\n (clicked)=\"toggle()\"\r\n />\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"ius-detailside__body ius-scroll\" [attr.data-accordion]=\"useAccordion ? 'true' : null\">\r\n @if (useAccordion) {\r\n <ius-accordion\r\n variant=\"divided\"\r\n [multiple]=\"accordionMultiple\"\r\n [items]=\"accordionItems\"\r\n [defaultOpen]=\"accordionDefaultOpen\"\r\n />\r\n } @else if (hasSections) {\r\n @for (s of sections; track sectionId(s, $index); let i = $index) {\r\n <section class=\"ius-detailside__section\">\r\n @if (s.title != null) {\r\n <h3 class=\"ius-detailside__section-title\">{{ s.title }}</h3>\r\n }\r\n <ng-container [ngTemplateOutlet]=\"s.content\" />\r\n </section>\r\n }\r\n } @else {\r\n <ng-content />\r\n }\r\n </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{box-sizing:border-box;display:flex;flex-direction:column;width:var(--_ds-w, 340px);flex:0 0 auto;height:100%;min-height:0;background:var(--ius-surface-card);border-left:1px solid var(--ius-stroke);font-family:var(--ius-font-body)}:host([data-collapsed=true]){width:52px}.ius-detailside__rail{display:flex;flex-direction:column;align-items:center;gap:var(--ius-space-sm);padding:var(--ius-space-sm) var(--ius-space-xs)}.ius-detailside__railtitle{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);white-space:nowrap}.ius-detailside__head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--ius-space-xs);padding:var(--ius-space-md) var(--ius-space-lg) var(--ius-space-sm);border-bottom:1px solid var(--ius-stroke)}.ius-detailside__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);display:inline-flex;align-items:center;gap:var(--ius-space-xs);min-width:0}.ius-detailside__title .ius-icon{font-size:var(--ius-icon-sm)}.ius-detailside__collapse{margin:-4px -4px -4px 0}.ius-detailside__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--ius-space-lg);display:flex;flex-direction:column;gap:var(--ius-space-lg);--_sb-track-margin: var(--ius-space-sm)}.ius-detailside__body[data-accordion=true]{padding:0 var(--ius-space-lg);gap:0}.ius-detailside__section{display:flex;flex-direction:column;gap:var(--ius-space-sm)}.ius-detailside__section-title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-base);color:var(--ius-text-primary);margin:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AccordionComponent, selector: "ius-accordion", inputs: ["items", "multiple", "open", "defaultOpen", "variant", "chevronIcon", "maxVisibleActions", "fill", "size", "fillMinHeight", "panelMaxHeight"], outputs: ["openChange", "actionClick"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "ariaPressed", "tooltipPlacement"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
23049
23370
|
}
|
|
23050
23371
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DetailSidePanelComponent, decorators: [{
|
|
23051
23372
|
type: Component,
|