@litigiovirtual/ius-design-components 2.2.5 → 2.2.7
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: [{
|
|
@@ -7536,8 +7546,8 @@ class SelectComponent {
|
|
|
7536
7546
|
}
|
|
7537
7547
|
/**
|
|
7538
7548
|
* `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ú.
|
|
7549
|
+
* frena la propagación para que ni el overlay ni el listener de `document`
|
|
7550
|
+
* cierren el menú (espejo del golden). Sin texto, `Escape` sigue cerrando el menú.
|
|
7541
7551
|
*/
|
|
7542
7552
|
onCreateKeyDown(event) {
|
|
7543
7553
|
if (event.key === 'Enter') {
|
|
@@ -7677,8 +7687,13 @@ class SelectComponent {
|
|
|
7677
7687
|
return;
|
|
7678
7688
|
this.setOpen(false);
|
|
7679
7689
|
}
|
|
7680
|
-
|
|
7681
|
-
|
|
7690
|
+
/**
|
|
7691
|
+
* Respaldo del Escape que atiende el overlay del menú (ver `attachOverlay`),
|
|
7692
|
+
* p. ej. en el frame previo a montarlo. Si otro overlay ya lo consumió
|
|
7693
|
+
* (`defaultPrevented`), no se vuelve a cerrar.
|
|
7694
|
+
*/
|
|
7695
|
+
onEscape(event) {
|
|
7696
|
+
if (!this.isOpen() || event.defaultPrevented)
|
|
7682
7697
|
return;
|
|
7683
7698
|
this.setOpen(false);
|
|
7684
7699
|
this.field()?.nativeElement.focus();
|
|
@@ -7717,8 +7732,22 @@ class SelectComponent {
|
|
|
7717
7732
|
scrollStrategy: this.overlay.scrollStrategies.reposition(),
|
|
7718
7733
|
disposeOnNavigation: true,
|
|
7719
7734
|
hasBackdrop: false,
|
|
7735
|
+
// Solo el Escape se queda en este overlay; el resto de teclas sigue hacia
|
|
7736
|
+
// los overlays de abajo (Drawer, Modal).
|
|
7737
|
+
eventPredicate: (event) => event instanceof KeyboardEvent && event.key === 'Escape',
|
|
7720
7738
|
});
|
|
7721
7739
|
this.overlayRef.attach(new TemplatePortal(tpl, this.viewContainerRef));
|
|
7740
|
+
// El dispatcher de CDK entrega cada tecla solo al overlay más alto con
|
|
7741
|
+
// suscriptores: al atender aquí el Escape, cierra el menú y un Drawer/Modal
|
|
7742
|
+
// padre con `closeOnEsc` no se cierra con él. La suscripción termina con
|
|
7743
|
+
// `dispose()` (CDK completa el stream).
|
|
7744
|
+
this.overlayRef.keydownEvents().subscribe((event) => {
|
|
7745
|
+
event.preventDefault();
|
|
7746
|
+
if (!this.isOpen())
|
|
7747
|
+
return;
|
|
7748
|
+
this.setOpen(false);
|
|
7749
|
+
this.field()?.nativeElement.focus();
|
|
7750
|
+
});
|
|
7722
7751
|
window.addEventListener('resize', this.onWindowResize);
|
|
7723
7752
|
if (focusSearch && this.searchable) {
|
|
7724
7753
|
requestAnimationFrame(() => this.search()?.nativeElement.focus());
|
|
@@ -7735,7 +7764,7 @@ class SelectComponent {
|
|
|
7735
7764
|
this.menuWidth.set(origin.getBoundingClientRect().width);
|
|
7736
7765
|
}
|
|
7737
7766
|
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: [
|
|
7767
|
+
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
7768
|
{
|
|
7740
7769
|
provide: NG_VALUE_ACCESSOR,
|
|
7741
7770
|
useExisting: forwardRef(() => SelectComponent),
|
|
@@ -7850,7 +7879,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
7850
7879
|
args: ['document:mousedown', ['$event']]
|
|
7851
7880
|
}], onEscape: [{
|
|
7852
7881
|
type: HostListener,
|
|
7853
|
-
args: ['document:keydown.escape']
|
|
7882
|
+
args: ['document:keydown.escape', ['$event']]
|
|
7854
7883
|
}] } });
|
|
7855
7884
|
|
|
7856
7885
|
/** Altura unificada de la fila por tamaño (espejo de SIZE_PRESETS del golden). */
|
|
@@ -11461,7 +11490,7 @@ class QueryBuilderComponent {
|
|
|
11461
11490
|
this.isOpen.set(false);
|
|
11462
11491
|
}
|
|
11463
11492
|
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 }); }
|
|
11493
|
+
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
11494
|
}
|
|
11466
11495
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: QueryBuilderComponent, decorators: [{
|
|
11467
11496
|
type: Component,
|
|
@@ -15809,6 +15838,8 @@ const KIND_ICON = {
|
|
|
15809
15838
|
expediente: 'folder',
|
|
15810
15839
|
proceso: 'gavel',
|
|
15811
15840
|
};
|
|
15841
|
+
/** Etiqueta de estado que `state='archived'` pone cuando no llega `statusTag` (verbatim del golden). */
|
|
15842
|
+
const ARCHIVED_STATUS_TAG = { label: 'Archivado', tone: 'neutral' };
|
|
15812
15843
|
/**
|
|
15813
15844
|
* EntityRow — Ius Design v2 (familia navigation).
|
|
15814
15845
|
*
|
|
@@ -15837,6 +15868,16 @@ const KIND_ICON = {
|
|
|
15837
15868
|
* - `count` es un conteo NEUTRO de hijos (píldora `count-soft`), nunca una
|
|
15838
15869
|
* señal de novedad: por eso se ve distinto del contador de no leídos.
|
|
15839
15870
|
*
|
|
15871
|
+
* Estado y etiquetas (tercera línea, bajo el nombre):
|
|
15872
|
+
* - `tag` (tipo, principal: prospecto, contratante…; tono categórico) y
|
|
15873
|
+
* `statusTag` (estado, tono semántico), hasta DOS `ius-tag` small (default
|
|
15874
|
+
* `variant:'outline'`, `tone:'neutral'`). No recortan el label ni desplazan
|
|
15875
|
+
* al contador/pin; la fila crece de alto solo cuando las lleva.
|
|
15876
|
+
* - `state='archived'` atenúa label (tertiary, peso regular), sublabel
|
|
15877
|
+
* (disabled) e ícono (neutral-6) y rellena `statusTag` con «Archivado» si no
|
|
15878
|
+
* llega uno explícito. La fila sigue navegable; si está `selected`, el label
|
|
15879
|
+
* recupera el acento. `data-state` solo se emite cuando no es `active`.
|
|
15880
|
+
*
|
|
15840
15881
|
* No usar como fila de menú (MenuItem), de cuenta (AccountItem) ni de acción.
|
|
15841
15882
|
*
|
|
15842
15883
|
* DECISIONES DE PORT:
|
|
@@ -15894,6 +15935,13 @@ class EntityRowComponent {
|
|
|
15894
15935
|
this.actions = [];
|
|
15895
15936
|
/** aria del disparador del menú ⋮. */
|
|
15896
15937
|
this.actionsLabel = 'Más acciones';
|
|
15938
|
+
/**
|
|
15939
|
+
* Estado del nodo. `archived` atenúa label/sublabel/ícono y pinta la etiqueta
|
|
15940
|
+
* «Archivado» bajo el nombre (como `statusTag` por defecto); la fila sigue
|
|
15941
|
+
* navegable. Admite `undefined` (= `active`) para reenviar el campo opcional
|
|
15942
|
+
* de un nodo tal cual, como hace EntityNavigator.
|
|
15943
|
+
*/
|
|
15944
|
+
this.state = 'active';
|
|
15897
15945
|
/** Clic en el chevron. NO propaga al `clicked` de la fila. */
|
|
15898
15946
|
this.toggle = new EventEmitter();
|
|
15899
15947
|
/** Anclar / desanclar. */
|
|
@@ -15944,6 +15992,20 @@ class EntityRowComponent {
|
|
|
15944
15992
|
get hasLabelSlot() {
|
|
15945
15993
|
return !!this.labelRef();
|
|
15946
15994
|
}
|
|
15995
|
+
/**
|
|
15996
|
+
* Hasta dos etiquetas en la tercera línea: `tag` (tipo) + estado. El estado
|
|
15997
|
+
* es `statusTag` o, con `state='archived'` y sin `statusTag`, «Archivado»
|
|
15998
|
+
* (espejo de `statusTag || (state === 'archived' ? {…} : null)` del golden).
|
|
15999
|
+
*/
|
|
16000
|
+
get tagItems() {
|
|
16001
|
+
const status = this.statusTag || (this.state === 'archived' ? ARCHIVED_STATUS_TAG : null);
|
|
16002
|
+
const items = [];
|
|
16003
|
+
if (this.tag)
|
|
16004
|
+
items.push(this.tag);
|
|
16005
|
+
if (status)
|
|
16006
|
+
items.push(status);
|
|
16007
|
+
return items;
|
|
16008
|
+
}
|
|
15947
16009
|
/**
|
|
15948
16010
|
* Los contadores se ocultan en hover cuando hay acciones, para que no se
|
|
15949
16011
|
* solapen con el pin y el ⋮ (`data-dim` del golden).
|
|
@@ -15990,7 +16052,7 @@ class EntityRowComponent {
|
|
|
15990
16052
|
this.menuOpen.set(open);
|
|
15991
16053
|
}
|
|
15992
16054
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EntityRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15993
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EntityRowComponent, isStandalone: true, selector: "ius-entity-row", inputs: { kind: "kind", icon: "icon", label: "label", sublabel: "sublabel", level: ["level", "level", numberAttribute], accent: "accent", expandable: ["expandable", "expandable", booleanAttribute], expanded: ["expanded", "expanded", booleanAttribute], loading: ["loading", "loading", booleanAttribute], selected: ["selected", "selected", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], count: "count", unread: "unread", hasUnread: ["hasUnread", "hasUnread", booleanAttribute], noveltyTone: "noveltyTone", pinned: ["pinned", "pinned", booleanAttribute], pinnable: ["pinnable", "pinnable", booleanAttribute], actions: "actions", actionsLabel: "actionsLabel", ariaLabel: "ariaLabel" }, outputs: { toggle: "toggle", togglePin: "togglePin", clicked: "clicked" }, host: { attributes: { "role": "button" }, listeners: { "click": "onRowClick($event)", "keydown": "onKeyDown($event)" }, properties: { "attr.tabindex": "disabled ? null : 0", "attr.data-level": "level", "attr.data-accent": "accent", "attr.data-expanded": "expanded ? 'true' : null", "attr.data-selected": "selected ? 'true' : null", "attr.data-unread": "hasNovelty ? 'true' : null", "attr.data-disabled": "disabled ? 'true' : null", "attr.data-menu-open": "menuOpen() ? 'true' : null", "attr.data-loading": "loading ? 'true' : null", "attr.aria-busy": "loading ? 'true' : null", "attr.aria-expanded": "expandable ? (expanded ? 'true' : 'false') : null", "attr.aria-current": "selected ? 'true' : null", "attr.aria-label": "ariaLabel || null", "style.padding-left.px": "padLeft" }, classAttribute: "ius-entityrow" }, queries: [{ propertyName: "labelRef", first: true, predicate: IusEntityRowLabelDirective, descendants: true, isSignal: true }, { propertyName: "sublabelRef", first: true, predicate: IusEntityRowSublabelDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Orden verbatim del golden: twisty \u00B7 \u00EDcono \u00B7 punto de novedad \u00B7 cuerpo \u00B7\r\n contador \u00B7 acciones. La ra\u00EDz es el propio host (ver el .scss). -->\r\n\r\n<!-- Chevron / aro de carga / hueco.\r\n `loading` gana: el aro ocupa la MISMA caja de 18 px, as\u00ED la fila no salta.\r\n El chevron no entra en el orden de tabulaci\u00F3n (igual que el golden): en un\r\n \u00E1rbol grande ser\u00EDa un tab-stop por fila; el estado lo comunica el\r\n `aria-expanded` de la fila. -->\r\n@if (loading) {\r\n <span class=\"ius-entityrow__twisty ius-entityrow__twisty--loading\">\r\n <ius-circular-progress\r\n [indeterminate]=\"true\"\r\n size=\"small\"\r\n tone=\"neutral\"\r\n ariaLabel=\"Cargando contenido\"\r\n />\r\n </span>\r\n} @else if (expandable) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-entityrow__twisty\"\r\n tabindex=\"-1\"\r\n aria-hidden=\"true\"\r\n (click)=\"onToggleClick($event)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">chevron_right</span>\r\n </button>\r\n} @else {\r\n <span class=\"ius-entityrow__twisty ius-entityrow__twisty--spacer\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">chevron_right</span>\r\n </span>\r\n}\r\n\r\n<span class=\"ius-entityrow__icon\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ effIcon }}</span>\r\n</span>\r\n\r\n<!-- Contenedor con novedad: solo el punto, sin n\u00FAmero (la hoja la comunica con\r\n su contador). Si adem\u00E1s llega `unread`, gana `unread` y esto no se pinta. -->\r\n@if (showNoveltyDot) {\r\n <span class=\"ius-entityrow__lead\">\r\n <ius-insignia\r\n variant=\"dot\"\r\n [tone]=\"noveltyTone\"\r\n size=\"small\"\r\n ariaLabel=\"Con novedades sin leer\"\r\n />\r\n </span>\r\n}\r\n\r\n<!-- Los dos slots se instancian SIEMPRE, nunca dentro de un `@if`: un\r\n `<ng-content>` detr\u00E1s de una condici\u00F3n que a\u00FAn no es cierta en el primer\r\n render pierde el contenido proyectado en silencio (el `contentChild` que\r\n alimentaba la condici\u00F3n se resuelve un tick tarde). El subt\u00EDtulo vac\u00EDo se\r\n oculta por CSS con `data-empty`, no quit\u00E1ndolo del \u00E1rbol. -->\r\n<span class=\"ius-entityrow__body\">\r\n <span class=\"ius-entityrow__label\">{{ label }}<ng-content select=\"[iusEntityRowLabel]\" /></span>\r\n <span class=\"ius-entityrow__sub\" [attr.data-empty]=\"hasSublabel ? null : 'true'\">{{ sublabel }}<ng-content select=\"[iusEntityRowSublabel]\" /></span>\r\n</span>\r\n\r\n<!-- Novedad (s\u00F3lido, alto contraste) vs conteo neutro de hijos: nunca ambos. -->\r\n@if (hasNovelty) {\r\n <span class=\"ius-entityrow__trailing\" [attr.data-dim]=\"dim\">\r\n <ius-insignia\r\n variant=\"count\"\r\n [tone]=\"noveltyTone\"\r\n [count]=\"unread\"\r\n [ariaLabel]=\"unread + ' sin leer'\"\r\n />\r\n </span>\r\n} @else if (showCount) {\r\n <span class=\"ius-entityrow__trailing\" [attr.data-dim]=\"dim\">\r\n <ius-insignia variant=\"count-soft\" [tone]=\"selected ? accent : 'neutral'\" [count]=\"count\" />\r\n </span>\r\n}\r\n\r\n<!-- Pin de acceso r\u00E1pido + men\u00FA \u22EE, revelados en hover. Un clic nacido aqu\u00ED\r\n dentro no navega (guarda `closest` en onRowClick). -->\r\n@if (hasRowActions) {\r\n <span class=\"ius-entityrow__actions\">\r\n @if (hasPin) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-entityrow__act ius-entityrow__act--pin\"\r\n [attr.data-pinned]=\"pinned ? 'true' : null\"\r\n [attr.aria-label]=\"pinLabel\"\r\n [attr.aria-pressed]=\"pinned\"\r\n (click)=\"onPinClick($event)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">push_pin</span>\r\n </button>\r\n }\r\n @if (hasActions) {\r\n <!-- ius-dropdown ES la composici\u00F3n Popover+Menu del golden, ya encapsulada:\r\n respeta `group` (divisores) y `danger` (al fondo, en rojo). -->\r\n <ius-dropdown\r\n [items]=\"actions\"\r\n placement=\"bottom-end\"\r\n [ariaLabel]=\"menuLabel\"\r\n (openChange)=\"onMenuOpenChange($event)\"\r\n >\r\n <button iusDropdownTrigger type=\"button\" class=\"ius-entityrow__act\" [attr.aria-label]=\"menuLabel\">\r\n <span translate=\"no\" class=\"ius-icon\">more_vert</span>\r\n </button>\r\n </ius-dropdown>\r\n }\r\n </span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{box-sizing:border-box;-webkit-user-select:none;user-select:none;width:100%;display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-xs);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;transition:background var(--ius-duration-fast) var(--ius-ease-standard);--_er-accent: var(--ius-info-600);--_er-tint: color-mix(in srgb, var(--ius-info-500) 14%, white)}:host(:hover){background:var(--ius-neutral-2)}:host(:focus-visible){outline:none;box-shadow:var(--ius-focus-ring)}:host([data-disabled=true]){cursor:default;opacity:.5;pointer-events:none}.ius-entityrow__twisty{flex:0 0 auto;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;cursor:pointer;color:var(--ius-text-tertiary);transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-entityrow__twisty .ius-icon{font-size:var(--ius-icon-md)}:host([data-expanded=true]) .ius-entityrow__twisty{transform:rotate(90deg)}.ius-entityrow__twisty--spacer{visibility:hidden}.ius-entityrow__twisty--loading{--_er-spin-scale: .818;transform:none}:host([data-expanded=true]) .ius-entityrow__twisty--loading{transform:none}.ius-entityrow__twisty--loading ius-circular-progress{transform:scale(var(--_er-spin-scale))}.ius-entityrow__icon{flex:0 0 auto;display:inline-flex;color:var(--ius-neutral-7)}.ius-entityrow__icon .ius-icon{font-size:var(--ius-icon-md)}.ius-entityrow__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:0}.ius-entityrow__label{font-size:var(--ius-fs-base);line-height:1.3;color:var(--ius-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-entityrow__sub{font-size:var(--ius-fs-sm);line-height:1.3;color:var(--ius-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-entityrow__sub[data-empty=true]{display:none}:host([data-level=\"0\"]) .ius-entityrow__label{font-weight:var(--ius-fw-semibold)}:host([data-unread=true]) .ius-entityrow__label{font-weight:var(--ius-fw-semibold)}.ius-entityrow__lead{flex:0 0 auto;display:inline-flex;align-items:center}.ius-entityrow__trailing{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xs)}.ius-entityrow__actions{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xxs)}.ius-entityrow__act{appearance:none;border:0;background:transparent;cursor:pointer;width:26px;height:26px;border-radius:var(--ius-radius-sm);display:inline-flex;align-items:center;justify-content:center;color:var(--ius-text-tertiary);opacity:0;transition:opacity var(--ius-duration-fast) var(--ius-ease-standard),background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-entityrow__act .ius-icon{font-size:var(--ius-icon-md)}.ius-entityrow__act:hover{background:var(--ius-neutral-3);color:var(--ius-text-primary)}.ius-entityrow__act:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);opacity:1}:host([data-selected=true]) .ius-entityrow__act{color:var(--_er-accent)}:host([data-selected=true]) .ius-entityrow__act:hover{background:color-mix(in srgb,var(--_er-accent) 16%,white);color:var(--_er-accent)}:host(:hover) .ius-entityrow__act,:host([data-menu-open=true]) .ius-entityrow__act{opacity:1}.ius-entityrow__act--pin[data-pinned=true]{opacity:1;color:var(--_er-accent)}.ius-entityrow__act--pin[data-pinned=true] .ius-icon{font-variation-settings:\"FILL\" 1,\"wght\" 500,\"GRAD\" 200,\"opsz\" 24}:host(:hover) .ius-entityrow__trailing[data-dim=true],:host([data-menu-open=true]) .ius-entityrow__trailing[data-dim=true]{display:none}:host([data-accent=primary]){--_er-accent: var(--ius-primary-700);--_er-tint: color-mix(in srgb, var(--ius-primary-500) 14%, white)}:host([data-accent=info]){--_er-accent: var(--ius-info-600);--_er-tint: color-mix(in srgb, var(--ius-info-500) 14%, white)}:host([data-accent=success]){--_er-accent: var(--ius-success-600);--_er-tint: color-mix(in srgb, var(--ius-success-500) 14%, white)}:host([data-accent=warning]){--_er-accent: var(--ius-warning-600);--_er-tint: color-mix(in srgb, var(--ius-warning-500) 14%, white)}:host([data-accent=danger]){--_er-accent: var(--ius-danger-600);--_er-tint: color-mix(in srgb, var(--ius-danger-500) 14%, white)}:host([data-accent=neutral]){--_er-accent: var(--ius-neutral-9);--_er-tint: color-mix(in srgb, var(--ius-neutral-7) 14%, white)}:host([data-accent=durazno]){--_er-accent: var(--ius-durazno-600);--_er-tint: color-mix(in srgb, var(--ius-durazno-500) 14%, white)}:host([data-accent=banano]){--_er-accent: var(--ius-banano-600);--_er-tint: color-mix(in srgb, var(--ius-banano-500) 14%, white)}:host([data-accent=sandia]){--_er-accent: var(--ius-sandia-600);--_er-tint: color-mix(in srgb, var(--ius-sandia-500) 14%, white)}:host([data-accent=arandano]){--_er-accent: var(--ius-arandano-600);--_er-tint: color-mix(in srgb, var(--ius-arandano-500) 14%, white)}:host([data-accent=uva]){--_er-accent: var(--ius-uva-600);--_er-tint: color-mix(in srgb, var(--ius-uva-500) 14%, white)}:host([data-accent=aguacate]){--_er-accent: var(--ius-aguacate-600);--_er-tint: color-mix(in srgb, var(--ius-aguacate-500) 14%, white)}:host([data-selected=true]){background:var(--_er-tint)}:host([data-selected=true]) .ius-entityrow__label{color:var(--_er-accent);font-weight:var(--ius-fw-semibold)}:host([data-selected=true]) .ius-entityrow__icon,:host([data-selected=true]) .ius-entityrow__twisty{color:var(--_er-accent)}:host([data-selected=true]:hover){background:var(--_er-tint)}\n"], dependencies: [{ kind: "component", type: CircularProgressComponent, selector: "ius-circular-progress", inputs: ["value", "max", "indeterminate", "tone", "size", "showValue", "ariaLabel", "duration", "paused"] }, { kind: "component", type: DropdownComponent, selector: "ius-dropdown", inputs: ["items", "selectable", "value", "label", "triggerLabel", "triggerIcon", "tone", "variant", "placement", "open", "defaultOpen", "ariaLabel"], outputs: ["valueChange", "openChange"] }, { kind: "directive", type: IusDropdownTriggerDirective, selector: "[iusDropdownTrigger]" }, { kind: "component", type: InsigniaComponent, selector: "ius-insignia", inputs: ["variant", "tone", "size", "label", "count", "max", "ring", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
16055
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EntityRowComponent, isStandalone: true, selector: "ius-entity-row", inputs: { kind: "kind", icon: "icon", label: "label", sublabel: "sublabel", level: ["level", "level", numberAttribute], accent: "accent", expandable: ["expandable", "expandable", booleanAttribute], expanded: ["expanded", "expanded", booleanAttribute], loading: ["loading", "loading", booleanAttribute], selected: ["selected", "selected", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], count: "count", unread: "unread", hasUnread: ["hasUnread", "hasUnread", booleanAttribute], noveltyTone: "noveltyTone", pinned: ["pinned", "pinned", booleanAttribute], pinnable: ["pinnable", "pinnable", booleanAttribute], actions: "actions", actionsLabel: "actionsLabel", state: "state", tag: "tag", statusTag: "statusTag", ariaLabel: "ariaLabel" }, outputs: { toggle: "toggle", togglePin: "togglePin", clicked: "clicked" }, host: { attributes: { "role": "button" }, listeners: { "click": "onRowClick($event)", "keydown": "onKeyDown($event)" }, properties: { "attr.tabindex": "disabled ? null : 0", "attr.data-level": "level", "attr.data-accent": "accent", "attr.data-expanded": "expanded ? 'true' : null", "attr.data-selected": "selected ? 'true' : null", "attr.data-unread": "hasNovelty ? 'true' : null", "attr.data-disabled": "disabled ? 'true' : null", "attr.data-menu-open": "menuOpen() ? 'true' : null", "attr.data-state": "state && state !== 'active' ? state : null", "attr.data-loading": "loading ? 'true' : null", "attr.aria-busy": "loading ? 'true' : null", "attr.aria-expanded": "expandable ? (expanded ? 'true' : 'false') : null", "attr.aria-current": "selected ? 'true' : null", "attr.aria-label": "ariaLabel || null", "style.padding-left.px": "padLeft" }, classAttribute: "ius-entityrow" }, queries: [{ propertyName: "labelRef", first: true, predicate: IusEntityRowLabelDirective, descendants: true, isSignal: true }, { propertyName: "sublabelRef", first: true, predicate: IusEntityRowSublabelDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Orden verbatim del golden: twisty \u00B7 \u00EDcono \u00B7 punto de novedad \u00B7 cuerpo \u00B7\r\n contador \u00B7 acciones. La ra\u00EDz es el propio host (ver el .scss). -->\r\n\r\n<!-- Chevron / aro de carga / hueco.\r\n `loading` gana: el aro ocupa la MISMA caja de 18 px, as\u00ED la fila no salta.\r\n El chevron no entra en el orden de tabulaci\u00F3n (igual que el golden): en un\r\n \u00E1rbol grande ser\u00EDa un tab-stop por fila; el estado lo comunica el\r\n `aria-expanded` de la fila. -->\r\n@if (loading) {\r\n <span class=\"ius-entityrow__twisty ius-entityrow__twisty--loading\">\r\n <ius-circular-progress\r\n [indeterminate]=\"true\"\r\n size=\"small\"\r\n tone=\"neutral\"\r\n ariaLabel=\"Cargando contenido\"\r\n />\r\n </span>\r\n} @else if (expandable) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-entityrow__twisty\"\r\n tabindex=\"-1\"\r\n aria-hidden=\"true\"\r\n (click)=\"onToggleClick($event)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">chevron_right</span>\r\n </button>\r\n} @else {\r\n <span class=\"ius-entityrow__twisty ius-entityrow__twisty--spacer\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">chevron_right</span>\r\n </span>\r\n}\r\n\r\n<span class=\"ius-entityrow__icon\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ effIcon }}</span>\r\n</span>\r\n\r\n<!-- Contenedor con novedad: solo el punto, sin n\u00FAmero (la hoja la comunica con\r\n su contador). Si adem\u00E1s llega `unread`, gana `unread` y esto no se pinta. -->\r\n@if (showNoveltyDot) {\r\n <span class=\"ius-entityrow__lead\">\r\n <ius-insignia\r\n variant=\"dot\"\r\n [tone]=\"noveltyTone\"\r\n size=\"small\"\r\n ariaLabel=\"Con novedades sin leer\"\r\n />\r\n </span>\r\n}\r\n\r\n<!-- Los dos slots se instancian SIEMPRE, nunca dentro de un `@if`: un\r\n `<ng-content>` detr\u00E1s de una condici\u00F3n que a\u00FAn no es cierta en el primer\r\n render pierde el contenido proyectado en silencio (el `contentChild` que\r\n alimentaba la condici\u00F3n se resuelve un tick tarde). El subt\u00EDtulo vac\u00EDo se\r\n oculta por CSS con `data-empty`, no quit\u00E1ndolo del \u00E1rbol. -->\r\n<span class=\"ius-entityrow__body\">\r\n <span class=\"ius-entityrow__label\">{{ label }}<ng-content select=\"[iusEntityRowLabel]\" /></span>\r\n <span class=\"ius-entityrow__sub\" [attr.data-empty]=\"hasSublabel ? null : 'true'\">{{ sublabel }}<ng-content select=\"[iusEntityRowSublabel]\" /></span>\r\n <!-- Tercera l\u00EDnea: `tag` (tipo) + estado (`statusTag`, o \u00ABArchivado\u00BB por\r\n defecto con state='archived'). Aqu\u00ED el `@if` es seguro: no envuelve\r\n ning\u00FAn `<ng-content>`. Solo ocupa alto si hay etiquetas. -->\r\n @if (tagItems.length) {\r\n <span class=\"ius-entityrow__tags\">\r\n @for (t of tagItems; track $index) {\r\n <ius-tag\r\n [label]=\"t.label\"\r\n [tone]=\"t.tone || 'neutral'\"\r\n [variant]=\"t.variant || 'outline'\"\r\n size=\"small\"\r\n [icon]=\"t.icon\"\r\n />\r\n }\r\n </span>\r\n }\r\n</span>\r\n\r\n<!-- Novedad (s\u00F3lido, alto contraste) vs conteo neutro de hijos: nunca ambos. -->\r\n@if (hasNovelty) {\r\n <span class=\"ius-entityrow__trailing\" [attr.data-dim]=\"dim\">\r\n <ius-insignia\r\n variant=\"count\"\r\n [tone]=\"noveltyTone\"\r\n [count]=\"unread\"\r\n [ariaLabel]=\"unread + ' sin leer'\"\r\n />\r\n </span>\r\n} @else if (showCount) {\r\n <span class=\"ius-entityrow__trailing\" [attr.data-dim]=\"dim\">\r\n <ius-insignia variant=\"count-soft\" [tone]=\"selected ? accent : 'neutral'\" [count]=\"count\" />\r\n </span>\r\n}\r\n\r\n<!-- Pin de acceso r\u00E1pido + men\u00FA \u22EE, revelados en hover. Un clic nacido aqu\u00ED\r\n dentro no navega (guarda `closest` en onRowClick). -->\r\n@if (hasRowActions) {\r\n <span class=\"ius-entityrow__actions\">\r\n @if (hasPin) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-entityrow__act ius-entityrow__act--pin\"\r\n [attr.data-pinned]=\"pinned ? 'true' : null\"\r\n [attr.aria-label]=\"pinLabel\"\r\n [attr.aria-pressed]=\"pinned\"\r\n (click)=\"onPinClick($event)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">push_pin</span>\r\n </button>\r\n }\r\n @if (hasActions) {\r\n <!-- ius-dropdown ES la composici\u00F3n Popover+Menu del golden, ya encapsulada:\r\n respeta `group` (divisores) y `danger` (al fondo, en rojo). -->\r\n <ius-dropdown\r\n [items]=\"actions\"\r\n placement=\"bottom-end\"\r\n [ariaLabel]=\"menuLabel\"\r\n (openChange)=\"onMenuOpenChange($event)\"\r\n >\r\n <button iusDropdownTrigger type=\"button\" class=\"ius-entityrow__act\" [attr.aria-label]=\"menuLabel\">\r\n <span translate=\"no\" class=\"ius-icon\">more_vert</span>\r\n </button>\r\n </ius-dropdown>\r\n }\r\n </span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{box-sizing:border-box;-webkit-user-select:none;user-select:none;width:100%;display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-xs);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;transition:background var(--ius-duration-fast) var(--ius-ease-standard);--_er-accent: var(--ius-info-600);--_er-tint: color-mix(in srgb, var(--ius-info-500) 14%, white)}:host(:hover){background:var(--ius-neutral-2)}:host(:focus-visible){outline:none;box-shadow:var(--ius-focus-ring)}:host([data-disabled=true]){cursor:default;opacity:.5;pointer-events:none}.ius-entityrow__twisty{flex:0 0 auto;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;cursor:pointer;color:var(--ius-text-tertiary);transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-entityrow__twisty .ius-icon{font-size:var(--ius-icon-md)}:host([data-expanded=true]) .ius-entityrow__twisty{transform:rotate(90deg)}.ius-entityrow__twisty--spacer{visibility:hidden}.ius-entityrow__twisty--loading{--_er-spin-scale: .818;transform:none}:host([data-expanded=true]) .ius-entityrow__twisty--loading{transform:none}.ius-entityrow__twisty--loading ius-circular-progress{transform:scale(var(--_er-spin-scale))}.ius-entityrow__icon{flex:0 0 auto;display:inline-flex;color:var(--ius-neutral-7)}.ius-entityrow__icon .ius-icon{font-size:var(--ius-icon-md)}.ius-entityrow__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:0}.ius-entityrow__label{font-size:var(--ius-fs-base);line-height:1.3;color:var(--ius-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-entityrow__sub{font-size:var(--ius-fs-sm);line-height:1.3;color:var(--ius-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-entityrow__sub[data-empty=true]{display:none}.ius-entityrow__tags{display:flex;align-items:center;gap:var(--ius-space-xxs);margin-top:var(--ius-space-xxs);min-width:0;overflow:hidden}:host([data-level=\"0\"]) .ius-entityrow__label{font-weight:var(--ius-fw-semibold)}:host([data-unread=true]) .ius-entityrow__label{font-weight:var(--ius-fw-semibold)}.ius-entityrow__lead{flex:0 0 auto;display:inline-flex;align-items:center}.ius-entityrow__trailing{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xs)}.ius-entityrow__actions{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xxs)}.ius-entityrow__act{appearance:none;border:0;background:transparent;cursor:pointer;width:26px;height:26px;border-radius:var(--ius-radius-sm);display:inline-flex;align-items:center;justify-content:center;color:var(--ius-text-tertiary);opacity:0;transition:opacity var(--ius-duration-fast) var(--ius-ease-standard),background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-entityrow__act .ius-icon{font-size:var(--ius-icon-md)}.ius-entityrow__act:hover{background:var(--ius-neutral-3);color:var(--ius-text-primary)}.ius-entityrow__act:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);opacity:1}:host([data-selected=true]) .ius-entityrow__act{color:var(--_er-accent)}:host([data-selected=true]) .ius-entityrow__act:hover{background:color-mix(in srgb,var(--_er-accent) 16%,white);color:var(--_er-accent)}:host(:hover) .ius-entityrow__act,:host([data-menu-open=true]) .ius-entityrow__act{opacity:1}.ius-entityrow__act--pin[data-pinned=true]{opacity:1;color:var(--_er-accent)}.ius-entityrow__act--pin[data-pinned=true] .ius-icon{font-variation-settings:\"FILL\" 1,\"wght\" 500,\"GRAD\" 200,\"opsz\" 24}:host(:hover) .ius-entityrow__trailing[data-dim=true],:host([data-menu-open=true]) .ius-entityrow__trailing[data-dim=true]{display:none}:host([data-accent=primary]){--_er-accent: var(--ius-primary-700);--_er-tint: color-mix(in srgb, var(--ius-primary-500) 14%, white)}:host([data-accent=info]){--_er-accent: var(--ius-info-600);--_er-tint: color-mix(in srgb, var(--ius-info-500) 14%, white)}:host([data-accent=success]){--_er-accent: var(--ius-success-600);--_er-tint: color-mix(in srgb, var(--ius-success-500) 14%, white)}:host([data-accent=warning]){--_er-accent: var(--ius-warning-600);--_er-tint: color-mix(in srgb, var(--ius-warning-500) 14%, white)}:host([data-accent=danger]){--_er-accent: var(--ius-danger-600);--_er-tint: color-mix(in srgb, var(--ius-danger-500) 14%, white)}:host([data-accent=neutral]){--_er-accent: var(--ius-neutral-9);--_er-tint: color-mix(in srgb, var(--ius-neutral-7) 14%, white)}:host([data-accent=durazno]){--_er-accent: var(--ius-durazno-600);--_er-tint: color-mix(in srgb, var(--ius-durazno-500) 14%, white)}:host([data-accent=banano]){--_er-accent: var(--ius-banano-600);--_er-tint: color-mix(in srgb, var(--ius-banano-500) 14%, white)}:host([data-accent=sandia]){--_er-accent: var(--ius-sandia-600);--_er-tint: color-mix(in srgb, var(--ius-sandia-500) 14%, white)}:host([data-accent=arandano]){--_er-accent: var(--ius-arandano-600);--_er-tint: color-mix(in srgb, var(--ius-arandano-500) 14%, white)}:host([data-accent=uva]){--_er-accent: var(--ius-uva-600);--_er-tint: color-mix(in srgb, var(--ius-uva-500) 14%, white)}:host([data-accent=aguacate]){--_er-accent: var(--ius-aguacate-600);--_er-tint: color-mix(in srgb, var(--ius-aguacate-500) 14%, white)}:host([data-selected=true]){background:var(--_er-tint)}:host([data-selected=true]) .ius-entityrow__label{color:var(--_er-accent);font-weight:var(--ius-fw-semibold)}:host([data-selected=true]) .ius-entityrow__icon,:host([data-selected=true]) .ius-entityrow__twisty{color:var(--_er-accent)}:host([data-selected=true]:hover){background:var(--_er-tint)}:host([data-state=archived]) .ius-entityrow__label{color:var(--ius-text-tertiary);font-weight:var(--ius-fw-regular)}:host([data-state=archived]) .ius-entityrow__sub{color:var(--ius-text-disabled)}:host([data-state=archived]) .ius-entityrow__icon{color:var(--ius-neutral-6)}:host([data-state=archived][data-selected=true]) .ius-entityrow__label{color:var(--_er-accent);font-weight:var(--ius-fw-semibold)}\n"], dependencies: [{ kind: "component", type: CircularProgressComponent, selector: "ius-circular-progress", inputs: ["value", "max", "indeterminate", "tone", "size", "showValue", "ariaLabel", "duration", "paused"] }, { kind: "component", type: DropdownComponent, selector: "ius-dropdown", inputs: ["items", "selectable", "value", "label", "triggerLabel", "triggerIcon", "tone", "variant", "placement", "open", "defaultOpen", "ariaLabel"], outputs: ["valueChange", "openChange"] }, { kind: "directive", type: IusDropdownTriggerDirective, selector: "[iusDropdownTrigger]" }, { kind: "component", type: InsigniaComponent, selector: "ius-insignia", inputs: ["variant", "tone", "size", "label", "count", "max", "ring", "ariaLabel"] }, { kind: "component", type: TagComponent, selector: "ius-tag", inputs: ["label", "role", "tone", "variant", "size", "shape", "icon", "dot", "count", "closable", "closeLabel", "selected", "disabled", "interactive", "state"], outputs: ["clicked", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
15994
16056
|
}
|
|
15995
16057
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EntityRowComponent, decorators: [{
|
|
15996
16058
|
type: Component,
|
|
@@ -15999,6 +16061,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
15999
16061
|
DropdownComponent,
|
|
16000
16062
|
IusDropdownTriggerDirective,
|
|
16001
16063
|
InsigniaComponent,
|
|
16064
|
+
TagComponent,
|
|
16002
16065
|
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
16003
16066
|
class: 'ius-entityrow',
|
|
16004
16067
|
role: 'button',
|
|
@@ -16010,6 +16073,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
16010
16073
|
'[attr.data-unread]': "hasNovelty ? 'true' : null",
|
|
16011
16074
|
'[attr.data-disabled]': "disabled ? 'true' : null",
|
|
16012
16075
|
'[attr.data-menu-open]': "menuOpen() ? 'true' : null",
|
|
16076
|
+
'[attr.data-state]': "state && state !== 'active' ? state : null",
|
|
16013
16077
|
'[attr.data-loading]': "loading ? 'true' : null",
|
|
16014
16078
|
'[attr.aria-busy]': "loading ? 'true' : null",
|
|
16015
16079
|
'[attr.aria-expanded]': "expandable ? (expanded ? 'true' : 'false') : null",
|
|
@@ -16018,7 +16082,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
16018
16082
|
'[style.padding-left.px]': 'padLeft',
|
|
16019
16083
|
'(click)': 'onRowClick($event)',
|
|
16020
16084
|
'(keydown)': 'onKeyDown($event)',
|
|
16021
|
-
}, template: "<!-- Orden verbatim del golden: twisty \u00B7 \u00EDcono \u00B7 punto de novedad \u00B7 cuerpo \u00B7\r\n contador \u00B7 acciones. La ra\u00EDz es el propio host (ver el .scss). -->\r\n\r\n<!-- Chevron / aro de carga / hueco.\r\n `loading` gana: el aro ocupa la MISMA caja de 18 px, as\u00ED la fila no salta.\r\n El chevron no entra en el orden de tabulaci\u00F3n (igual que el golden): en un\r\n \u00E1rbol grande ser\u00EDa un tab-stop por fila; el estado lo comunica el\r\n `aria-expanded` de la fila. -->\r\n@if (loading) {\r\n <span class=\"ius-entityrow__twisty ius-entityrow__twisty--loading\">\r\n <ius-circular-progress\r\n [indeterminate]=\"true\"\r\n size=\"small\"\r\n tone=\"neutral\"\r\n ariaLabel=\"Cargando contenido\"\r\n />\r\n </span>\r\n} @else if (expandable) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-entityrow__twisty\"\r\n tabindex=\"-1\"\r\n aria-hidden=\"true\"\r\n (click)=\"onToggleClick($event)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">chevron_right</span>\r\n </button>\r\n} @else {\r\n <span class=\"ius-entityrow__twisty ius-entityrow__twisty--spacer\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">chevron_right</span>\r\n </span>\r\n}\r\n\r\n<span class=\"ius-entityrow__icon\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ effIcon }}</span>\r\n</span>\r\n\r\n<!-- Contenedor con novedad: solo el punto, sin n\u00FAmero (la hoja la comunica con\r\n su contador). Si adem\u00E1s llega `unread`, gana `unread` y esto no se pinta. -->\r\n@if (showNoveltyDot) {\r\n <span class=\"ius-entityrow__lead\">\r\n <ius-insignia\r\n variant=\"dot\"\r\n [tone]=\"noveltyTone\"\r\n size=\"small\"\r\n ariaLabel=\"Con novedades sin leer\"\r\n />\r\n </span>\r\n}\r\n\r\n<!-- Los dos slots se instancian SIEMPRE, nunca dentro de un `@if`: un\r\n `<ng-content>` detr\u00E1s de una condici\u00F3n que a\u00FAn no es cierta en el primer\r\n render pierde el contenido proyectado en silencio (el `contentChild` que\r\n alimentaba la condici\u00F3n se resuelve un tick tarde). El subt\u00EDtulo vac\u00EDo se\r\n oculta por CSS con `data-empty`, no quit\u00E1ndolo del \u00E1rbol. -->\r\n<span class=\"ius-entityrow__body\">\r\n <span class=\"ius-entityrow__label\">{{ label }}<ng-content select=\"[iusEntityRowLabel]\" /></span>\r\n <span class=\"ius-entityrow__sub\" [attr.data-empty]=\"hasSublabel ? null : 'true'\">{{ sublabel }}<ng-content select=\"[iusEntityRowSublabel]\" /></span>\r\n</span>\r\n\r\n<!-- Novedad (s\u00F3lido, alto contraste) vs conteo neutro de hijos: nunca ambos. -->\r\n@if (hasNovelty) {\r\n <span class=\"ius-entityrow__trailing\" [attr.data-dim]=\"dim\">\r\n <ius-insignia\r\n variant=\"count\"\r\n [tone]=\"noveltyTone\"\r\n [count]=\"unread\"\r\n [ariaLabel]=\"unread + ' sin leer'\"\r\n />\r\n </span>\r\n} @else if (showCount) {\r\n <span class=\"ius-entityrow__trailing\" [attr.data-dim]=\"dim\">\r\n <ius-insignia variant=\"count-soft\" [tone]=\"selected ? accent : 'neutral'\" [count]=\"count\" />\r\n </span>\r\n}\r\n\r\n<!-- Pin de acceso r\u00E1pido + men\u00FA \u22EE, revelados en hover. Un clic nacido aqu\u00ED\r\n dentro no navega (guarda `closest` en onRowClick). -->\r\n@if (hasRowActions) {\r\n <span class=\"ius-entityrow__actions\">\r\n @if (hasPin) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-entityrow__act ius-entityrow__act--pin\"\r\n [attr.data-pinned]=\"pinned ? 'true' : null\"\r\n [attr.aria-label]=\"pinLabel\"\r\n [attr.aria-pressed]=\"pinned\"\r\n (click)=\"onPinClick($event)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">push_pin</span>\r\n </button>\r\n }\r\n @if (hasActions) {\r\n <!-- ius-dropdown ES la composici\u00F3n Popover+Menu del golden, ya encapsulada:\r\n respeta `group` (divisores) y `danger` (al fondo, en rojo). -->\r\n <ius-dropdown\r\n [items]=\"actions\"\r\n placement=\"bottom-end\"\r\n [ariaLabel]=\"menuLabel\"\r\n (openChange)=\"onMenuOpenChange($event)\"\r\n >\r\n <button iusDropdownTrigger type=\"button\" class=\"ius-entityrow__act\" [attr.aria-label]=\"menuLabel\">\r\n <span translate=\"no\" class=\"ius-icon\">more_vert</span>\r\n </button>\r\n </ius-dropdown>\r\n }\r\n </span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{box-sizing:border-box;-webkit-user-select:none;user-select:none;width:100%;display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-xs);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;transition:background var(--ius-duration-fast) var(--ius-ease-standard);--_er-accent: var(--ius-info-600);--_er-tint: color-mix(in srgb, var(--ius-info-500) 14%, white)}:host(:hover){background:var(--ius-neutral-2)}:host(:focus-visible){outline:none;box-shadow:var(--ius-focus-ring)}:host([data-disabled=true]){cursor:default;opacity:.5;pointer-events:none}.ius-entityrow__twisty{flex:0 0 auto;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;cursor:pointer;color:var(--ius-text-tertiary);transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-entityrow__twisty .ius-icon{font-size:var(--ius-icon-md)}:host([data-expanded=true]) .ius-entityrow__twisty{transform:rotate(90deg)}.ius-entityrow__twisty--spacer{visibility:hidden}.ius-entityrow__twisty--loading{--_er-spin-scale: .818;transform:none}:host([data-expanded=true]) .ius-entityrow__twisty--loading{transform:none}.ius-entityrow__twisty--loading ius-circular-progress{transform:scale(var(--_er-spin-scale))}.ius-entityrow__icon{flex:0 0 auto;display:inline-flex;color:var(--ius-neutral-7)}.ius-entityrow__icon .ius-icon{font-size:var(--ius-icon-md)}.ius-entityrow__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:0}.ius-entityrow__label{font-size:var(--ius-fs-base);line-height:1.3;color:var(--ius-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-entityrow__sub{font-size:var(--ius-fs-sm);line-height:1.3;color:var(--ius-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-entityrow__sub[data-empty=true]{display:none}:host([data-level=\"0\"]) .ius-entityrow__label{font-weight:var(--ius-fw-semibold)}:host([data-unread=true]) .ius-entityrow__label{font-weight:var(--ius-fw-semibold)}.ius-entityrow__lead{flex:0 0 auto;display:inline-flex;align-items:center}.ius-entityrow__trailing{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xs)}.ius-entityrow__actions{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xxs)}.ius-entityrow__act{appearance:none;border:0;background:transparent;cursor:pointer;width:26px;height:26px;border-radius:var(--ius-radius-sm);display:inline-flex;align-items:center;justify-content:center;color:var(--ius-text-tertiary);opacity:0;transition:opacity var(--ius-duration-fast) var(--ius-ease-standard),background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-entityrow__act .ius-icon{font-size:var(--ius-icon-md)}.ius-entityrow__act:hover{background:var(--ius-neutral-3);color:var(--ius-text-primary)}.ius-entityrow__act:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);opacity:1}:host([data-selected=true]) .ius-entityrow__act{color:var(--_er-accent)}:host([data-selected=true]) .ius-entityrow__act:hover{background:color-mix(in srgb,var(--_er-accent) 16%,white);color:var(--_er-accent)}:host(:hover) .ius-entityrow__act,:host([data-menu-open=true]) .ius-entityrow__act{opacity:1}.ius-entityrow__act--pin[data-pinned=true]{opacity:1;color:var(--_er-accent)}.ius-entityrow__act--pin[data-pinned=true] .ius-icon{font-variation-settings:\"FILL\" 1,\"wght\" 500,\"GRAD\" 200,\"opsz\" 24}:host(:hover) .ius-entityrow__trailing[data-dim=true],:host([data-menu-open=true]) .ius-entityrow__trailing[data-dim=true]{display:none}:host([data-accent=primary]){--_er-accent: var(--ius-primary-700);--_er-tint: color-mix(in srgb, var(--ius-primary-500) 14%, white)}:host([data-accent=info]){--_er-accent: var(--ius-info-600);--_er-tint: color-mix(in srgb, var(--ius-info-500) 14%, white)}:host([data-accent=success]){--_er-accent: var(--ius-success-600);--_er-tint: color-mix(in srgb, var(--ius-success-500) 14%, white)}:host([data-accent=warning]){--_er-accent: var(--ius-warning-600);--_er-tint: color-mix(in srgb, var(--ius-warning-500) 14%, white)}:host([data-accent=danger]){--_er-accent: var(--ius-danger-600);--_er-tint: color-mix(in srgb, var(--ius-danger-500) 14%, white)}:host([data-accent=neutral]){--_er-accent: var(--ius-neutral-9);--_er-tint: color-mix(in srgb, var(--ius-neutral-7) 14%, white)}:host([data-accent=durazno]){--_er-accent: var(--ius-durazno-600);--_er-tint: color-mix(in srgb, var(--ius-durazno-500) 14%, white)}:host([data-accent=banano]){--_er-accent: var(--ius-banano-600);--_er-tint: color-mix(in srgb, var(--ius-banano-500) 14%, white)}:host([data-accent=sandia]){--_er-accent: var(--ius-sandia-600);--_er-tint: color-mix(in srgb, var(--ius-sandia-500) 14%, white)}:host([data-accent=arandano]){--_er-accent: var(--ius-arandano-600);--_er-tint: color-mix(in srgb, var(--ius-arandano-500) 14%, white)}:host([data-accent=uva]){--_er-accent: var(--ius-uva-600);--_er-tint: color-mix(in srgb, var(--ius-uva-500) 14%, white)}:host([data-accent=aguacate]){--_er-accent: var(--ius-aguacate-600);--_er-tint: color-mix(in srgb, var(--ius-aguacate-500) 14%, white)}:host([data-selected=true]){background:var(--_er-tint)}:host([data-selected=true]) .ius-entityrow__label{color:var(--_er-accent);font-weight:var(--ius-fw-semibold)}:host([data-selected=true]) .ius-entityrow__icon,:host([data-selected=true]) .ius-entityrow__twisty{color:var(--_er-accent)}:host([data-selected=true]:hover){background:var(--_er-tint)}\n"] }]
|
|
16085
|
+
}, template: "<!-- Orden verbatim del golden: twisty \u00B7 \u00EDcono \u00B7 punto de novedad \u00B7 cuerpo \u00B7\r\n contador \u00B7 acciones. La ra\u00EDz es el propio host (ver el .scss). -->\r\n\r\n<!-- Chevron / aro de carga / hueco.\r\n `loading` gana: el aro ocupa la MISMA caja de 18 px, as\u00ED la fila no salta.\r\n El chevron no entra en el orden de tabulaci\u00F3n (igual que el golden): en un\r\n \u00E1rbol grande ser\u00EDa un tab-stop por fila; el estado lo comunica el\r\n `aria-expanded` de la fila. -->\r\n@if (loading) {\r\n <span class=\"ius-entityrow__twisty ius-entityrow__twisty--loading\">\r\n <ius-circular-progress\r\n [indeterminate]=\"true\"\r\n size=\"small\"\r\n tone=\"neutral\"\r\n ariaLabel=\"Cargando contenido\"\r\n />\r\n </span>\r\n} @else if (expandable) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-entityrow__twisty\"\r\n tabindex=\"-1\"\r\n aria-hidden=\"true\"\r\n (click)=\"onToggleClick($event)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">chevron_right</span>\r\n </button>\r\n} @else {\r\n <span class=\"ius-entityrow__twisty ius-entityrow__twisty--spacer\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">chevron_right</span>\r\n </span>\r\n}\r\n\r\n<span class=\"ius-entityrow__icon\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ effIcon }}</span>\r\n</span>\r\n\r\n<!-- Contenedor con novedad: solo el punto, sin n\u00FAmero (la hoja la comunica con\r\n su contador). Si adem\u00E1s llega `unread`, gana `unread` y esto no se pinta. -->\r\n@if (showNoveltyDot) {\r\n <span class=\"ius-entityrow__lead\">\r\n <ius-insignia\r\n variant=\"dot\"\r\n [tone]=\"noveltyTone\"\r\n size=\"small\"\r\n ariaLabel=\"Con novedades sin leer\"\r\n />\r\n </span>\r\n}\r\n\r\n<!-- Los dos slots se instancian SIEMPRE, nunca dentro de un `@if`: un\r\n `<ng-content>` detr\u00E1s de una condici\u00F3n que a\u00FAn no es cierta en el primer\r\n render pierde el contenido proyectado en silencio (el `contentChild` que\r\n alimentaba la condici\u00F3n se resuelve un tick tarde). El subt\u00EDtulo vac\u00EDo se\r\n oculta por CSS con `data-empty`, no quit\u00E1ndolo del \u00E1rbol. -->\r\n<span class=\"ius-entityrow__body\">\r\n <span class=\"ius-entityrow__label\">{{ label }}<ng-content select=\"[iusEntityRowLabel]\" /></span>\r\n <span class=\"ius-entityrow__sub\" [attr.data-empty]=\"hasSublabel ? null : 'true'\">{{ sublabel }}<ng-content select=\"[iusEntityRowSublabel]\" /></span>\r\n <!-- Tercera l\u00EDnea: `tag` (tipo) + estado (`statusTag`, o \u00ABArchivado\u00BB por\r\n defecto con state='archived'). Aqu\u00ED el `@if` es seguro: no envuelve\r\n ning\u00FAn `<ng-content>`. Solo ocupa alto si hay etiquetas. -->\r\n @if (tagItems.length) {\r\n <span class=\"ius-entityrow__tags\">\r\n @for (t of tagItems; track $index) {\r\n <ius-tag\r\n [label]=\"t.label\"\r\n [tone]=\"t.tone || 'neutral'\"\r\n [variant]=\"t.variant || 'outline'\"\r\n size=\"small\"\r\n [icon]=\"t.icon\"\r\n />\r\n }\r\n </span>\r\n }\r\n</span>\r\n\r\n<!-- Novedad (s\u00F3lido, alto contraste) vs conteo neutro de hijos: nunca ambos. -->\r\n@if (hasNovelty) {\r\n <span class=\"ius-entityrow__trailing\" [attr.data-dim]=\"dim\">\r\n <ius-insignia\r\n variant=\"count\"\r\n [tone]=\"noveltyTone\"\r\n [count]=\"unread\"\r\n [ariaLabel]=\"unread + ' sin leer'\"\r\n />\r\n </span>\r\n} @else if (showCount) {\r\n <span class=\"ius-entityrow__trailing\" [attr.data-dim]=\"dim\">\r\n <ius-insignia variant=\"count-soft\" [tone]=\"selected ? accent : 'neutral'\" [count]=\"count\" />\r\n </span>\r\n}\r\n\r\n<!-- Pin de acceso r\u00E1pido + men\u00FA \u22EE, revelados en hover. Un clic nacido aqu\u00ED\r\n dentro no navega (guarda `closest` en onRowClick). -->\r\n@if (hasRowActions) {\r\n <span class=\"ius-entityrow__actions\">\r\n @if (hasPin) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-entityrow__act ius-entityrow__act--pin\"\r\n [attr.data-pinned]=\"pinned ? 'true' : null\"\r\n [attr.aria-label]=\"pinLabel\"\r\n [attr.aria-pressed]=\"pinned\"\r\n (click)=\"onPinClick($event)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">push_pin</span>\r\n </button>\r\n }\r\n @if (hasActions) {\r\n <!-- ius-dropdown ES la composici\u00F3n Popover+Menu del golden, ya encapsulada:\r\n respeta `group` (divisores) y `danger` (al fondo, en rojo). -->\r\n <ius-dropdown\r\n [items]=\"actions\"\r\n placement=\"bottom-end\"\r\n [ariaLabel]=\"menuLabel\"\r\n (openChange)=\"onMenuOpenChange($event)\"\r\n >\r\n <button iusDropdownTrigger type=\"button\" class=\"ius-entityrow__act\" [attr.aria-label]=\"menuLabel\">\r\n <span translate=\"no\" class=\"ius-icon\">more_vert</span>\r\n </button>\r\n </ius-dropdown>\r\n }\r\n </span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{box-sizing:border-box;-webkit-user-select:none;user-select:none;width:100%;display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-xs);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;transition:background var(--ius-duration-fast) var(--ius-ease-standard);--_er-accent: var(--ius-info-600);--_er-tint: color-mix(in srgb, var(--ius-info-500) 14%, white)}:host(:hover){background:var(--ius-neutral-2)}:host(:focus-visible){outline:none;box-shadow:var(--ius-focus-ring)}:host([data-disabled=true]){cursor:default;opacity:.5;pointer-events:none}.ius-entityrow__twisty{flex:0 0 auto;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;cursor:pointer;color:var(--ius-text-tertiary);transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-entityrow__twisty .ius-icon{font-size:var(--ius-icon-md)}:host([data-expanded=true]) .ius-entityrow__twisty{transform:rotate(90deg)}.ius-entityrow__twisty--spacer{visibility:hidden}.ius-entityrow__twisty--loading{--_er-spin-scale: .818;transform:none}:host([data-expanded=true]) .ius-entityrow__twisty--loading{transform:none}.ius-entityrow__twisty--loading ius-circular-progress{transform:scale(var(--_er-spin-scale))}.ius-entityrow__icon{flex:0 0 auto;display:inline-flex;color:var(--ius-neutral-7)}.ius-entityrow__icon .ius-icon{font-size:var(--ius-icon-md)}.ius-entityrow__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:0}.ius-entityrow__label{font-size:var(--ius-fs-base);line-height:1.3;color:var(--ius-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-entityrow__sub{font-size:var(--ius-fs-sm);line-height:1.3;color:var(--ius-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-entityrow__sub[data-empty=true]{display:none}.ius-entityrow__tags{display:flex;align-items:center;gap:var(--ius-space-xxs);margin-top:var(--ius-space-xxs);min-width:0;overflow:hidden}:host([data-level=\"0\"]) .ius-entityrow__label{font-weight:var(--ius-fw-semibold)}:host([data-unread=true]) .ius-entityrow__label{font-weight:var(--ius-fw-semibold)}.ius-entityrow__lead{flex:0 0 auto;display:inline-flex;align-items:center}.ius-entityrow__trailing{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xs)}.ius-entityrow__actions{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xxs)}.ius-entityrow__act{appearance:none;border:0;background:transparent;cursor:pointer;width:26px;height:26px;border-radius:var(--ius-radius-sm);display:inline-flex;align-items:center;justify-content:center;color:var(--ius-text-tertiary);opacity:0;transition:opacity var(--ius-duration-fast) var(--ius-ease-standard),background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-entityrow__act .ius-icon{font-size:var(--ius-icon-md)}.ius-entityrow__act:hover{background:var(--ius-neutral-3);color:var(--ius-text-primary)}.ius-entityrow__act:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);opacity:1}:host([data-selected=true]) .ius-entityrow__act{color:var(--_er-accent)}:host([data-selected=true]) .ius-entityrow__act:hover{background:color-mix(in srgb,var(--_er-accent) 16%,white);color:var(--_er-accent)}:host(:hover) .ius-entityrow__act,:host([data-menu-open=true]) .ius-entityrow__act{opacity:1}.ius-entityrow__act--pin[data-pinned=true]{opacity:1;color:var(--_er-accent)}.ius-entityrow__act--pin[data-pinned=true] .ius-icon{font-variation-settings:\"FILL\" 1,\"wght\" 500,\"GRAD\" 200,\"opsz\" 24}:host(:hover) .ius-entityrow__trailing[data-dim=true],:host([data-menu-open=true]) .ius-entityrow__trailing[data-dim=true]{display:none}:host([data-accent=primary]){--_er-accent: var(--ius-primary-700);--_er-tint: color-mix(in srgb, var(--ius-primary-500) 14%, white)}:host([data-accent=info]){--_er-accent: var(--ius-info-600);--_er-tint: color-mix(in srgb, var(--ius-info-500) 14%, white)}:host([data-accent=success]){--_er-accent: var(--ius-success-600);--_er-tint: color-mix(in srgb, var(--ius-success-500) 14%, white)}:host([data-accent=warning]){--_er-accent: var(--ius-warning-600);--_er-tint: color-mix(in srgb, var(--ius-warning-500) 14%, white)}:host([data-accent=danger]){--_er-accent: var(--ius-danger-600);--_er-tint: color-mix(in srgb, var(--ius-danger-500) 14%, white)}:host([data-accent=neutral]){--_er-accent: var(--ius-neutral-9);--_er-tint: color-mix(in srgb, var(--ius-neutral-7) 14%, white)}:host([data-accent=durazno]){--_er-accent: var(--ius-durazno-600);--_er-tint: color-mix(in srgb, var(--ius-durazno-500) 14%, white)}:host([data-accent=banano]){--_er-accent: var(--ius-banano-600);--_er-tint: color-mix(in srgb, var(--ius-banano-500) 14%, white)}:host([data-accent=sandia]){--_er-accent: var(--ius-sandia-600);--_er-tint: color-mix(in srgb, var(--ius-sandia-500) 14%, white)}:host([data-accent=arandano]){--_er-accent: var(--ius-arandano-600);--_er-tint: color-mix(in srgb, var(--ius-arandano-500) 14%, white)}:host([data-accent=uva]){--_er-accent: var(--ius-uva-600);--_er-tint: color-mix(in srgb, var(--ius-uva-500) 14%, white)}:host([data-accent=aguacate]){--_er-accent: var(--ius-aguacate-600);--_er-tint: color-mix(in srgb, var(--ius-aguacate-500) 14%, white)}:host([data-selected=true]){background:var(--_er-tint)}:host([data-selected=true]) .ius-entityrow__label{color:var(--_er-accent);font-weight:var(--ius-fw-semibold)}:host([data-selected=true]) .ius-entityrow__icon,:host([data-selected=true]) .ius-entityrow__twisty{color:var(--_er-accent)}:host([data-selected=true]:hover){background:var(--_er-tint)}:host([data-state=archived]) .ius-entityrow__label{color:var(--ius-text-tertiary);font-weight:var(--ius-fw-regular)}:host([data-state=archived]) .ius-entityrow__sub{color:var(--ius-text-disabled)}:host([data-state=archived]) .ius-entityrow__icon{color:var(--ius-neutral-6)}:host([data-state=archived][data-selected=true]) .ius-entityrow__label{color:var(--_er-accent);font-weight:var(--ius-fw-semibold)}\n"] }]
|
|
16022
16086
|
}], propDecorators: { kind: [{
|
|
16023
16087
|
type: Input
|
|
16024
16088
|
}], icon: [{
|
|
@@ -16066,6 +16130,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
16066
16130
|
type: Input
|
|
16067
16131
|
}], actionsLabel: [{
|
|
16068
16132
|
type: Input
|
|
16133
|
+
}], state: [{
|
|
16134
|
+
type: Input
|
|
16135
|
+
}], tag: [{
|
|
16136
|
+
type: Input
|
|
16137
|
+
}], statusTag: [{
|
|
16138
|
+
type: Input
|
|
16069
16139
|
}], ariaLabel: [{
|
|
16070
16140
|
type: Input
|
|
16071
16141
|
}], toggle: [{
|
|
@@ -17495,7 +17565,7 @@ class EntityNavigatorComponent {
|
|
|
17495
17565
|
return fijada ? 'Dejar de fijar sección arriba' : 'Fijar sección arriba';
|
|
17496
17566
|
}
|
|
17497
17567
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EntityNavigatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
17498
|
-
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 (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", "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 }); }
|
|
17568
|
+
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 }); }
|
|
17499
17569
|
}
|
|
17500
17570
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EntityNavigatorComponent, decorators: [{
|
|
17501
17571
|
type: Component,
|
|
@@ -17521,7 +17591,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
17521
17591
|
'[attr.data-collapsed]': "isCollapsed() ? 'true' : null",
|
|
17522
17592
|
'[attr.data-fluid]': "fluidWidth() ? 'true' : null",
|
|
17523
17593
|
'[attr.aria-label]': 'ariaLabel() || title() || null',
|
|
17524
|
-
}, 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 (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"] }]
|
|
17594
|
+
}, 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"] }]
|
|
17525
17595
|
}], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], titleIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleIcon", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchThreshold", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], searchValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchValue", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], selectedFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedFilters", required: false }] }], availableFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableFilters", required: false }] }], activeFacets: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeFacets", required: false }] }], stateSegments: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateSegments", required: false }] }], stateValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateValue", required: false }] }], sortLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortLabel", required: false }] }], sortOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortOptions", required: false }] }], sortValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortValue", required: false }] }], metaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "metaLabel", required: false }] }], groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], accent: [{ type: i0.Input, args: [{ isSignal: true, alias: "accent", required: false }] }], defaultExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultExpanded", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], autoExpandOnFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoExpandOnFilter", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], defaultSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultSelected", required: false }] }], emptyStateTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyStateTemplate", required: false }] }], noResultsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsLabel", required: false }] }], createLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "createLabel", required: false }] }], createIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "createIcon", required: false }] }], groupLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupLimit", required: false }] }], collapsibleGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsibleGroups", required: false }] }], collapsedGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedGroups", required: false }] }], stickyHeaders: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeaders", required: false }] }], pinnableGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnableGroups", required: false }] }], defaultPinnedGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPinnedGroup", required: false }] }], moreLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "moreLabel", required: false }] }], alphaIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "alphaIndex", required: false }] }], alphaIndexLetters: [{ type: i0.Input, args: [{ isSignal: true, alias: "alphaIndexLetters", required: false }] }], loadMoreLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadMoreLabel", required: false }] }], virtualized: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualized", required: false }] }], virtualizeThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualizeThreshold", required: false }] }], itemHeights: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeights", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], defaultCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultCollapsed", required: false }] }], fluidWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fluidWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], search: [{
|
|
17526
17596
|
type: Output
|
|
17527
17597
|
}], searchChange: [{
|
|
@@ -18100,7 +18170,7 @@ class RepeatableFieldComponent {
|
|
|
18100
18170
|
useExisting: forwardRef(() => RepeatableFieldComponent),
|
|
18101
18171
|
multi: true,
|
|
18102
18172
|
},
|
|
18103
|
-
], 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 }); }
|
|
18173
|
+
], 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 }); }
|
|
18104
18174
|
}
|
|
18105
18175
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RepeatableFieldComponent, decorators: [{
|
|
18106
18176
|
type: Component,
|
|
@@ -21293,7 +21363,7 @@ class AutocompleteComponent {
|
|
|
21293
21363
|
useExisting: forwardRef(() => AutocompleteComponent),
|
|
21294
21364
|
multi: true,
|
|
21295
21365
|
},
|
|
21296
|
-
], 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 }); }
|
|
21366
|
+
], 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 }); }
|
|
21297
21367
|
}
|
|
21298
21368
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
21299
21369
|
type: Component,
|