@litigiovirtual/ius-design-components 2.1.8 → 2.1.10
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.
|
@@ -1401,13 +1401,13 @@ class TextFieldComponent {
|
|
|
1401
1401
|
this.cleared.emit();
|
|
1402
1402
|
}
|
|
1403
1403
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1404
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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", 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: [
|
|
1404
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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: [
|
|
1405
1405
|
{
|
|
1406
1406
|
provide: NG_VALUE_ACCESSOR,
|
|
1407
1407
|
useExisting: forwardRef(() => TextFieldComponent),
|
|
1408
1408
|
multi: true,
|
|
1409
1409
|
},
|
|
1410
|
-
], ngImport: i0, template: "@if (label) {\n <label [for]=\"inputId\" class=\"ius-tf__label\">\n @if (required) {\n <span class=\"ius-tf__required\" aria-hidden=\"true\"></span>\n }\n <span>{{ label }}</span>\n @if (showIconHelp) {\n <ius-popover\n [title]=\"iconHelpTitle\"\n [content]=\"iconHelpContent\"\n [disabled]=\"!iconHelpTitle && !iconHelpContent\"\n >\n <span\n class=\"ius-tf__help-icon\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=\"Ayuda\"\n >\n <span translate=\"no\" class=\"ius-icon\">help</span>\n </span>\n </ius-popover>\n }\n <span class=\"ius-tf__colon\">:</span>\n </label>\n}\n\n<div class=\"ius-tf__field\">\n @if (prefixIcon) {\n <span class=\"ius-tf__prefix\" aria-hidden=\"true\">\n <span translate=\"no\" class=\"ius-icon\">{{ prefixIcon }}</span>\n </span>\n }\n\n <input\n [id]=\"inputId\"\n class=\"ius-tf__input\"\n [type]=\"inputType\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [value]=\"value()\"\n [disabled]=\"disabled\"\n [attr.aria-invalid]=\"error || null\"\n [attr.aria-required]=\"required || null\"\n [attr.aria-describedby]=\"showHint ? helpId : null\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n />\n\n @if (isPassword) {\n <button\n type=\"button\"\n class=\"ius-tf__clear\"\n [attr.aria-label]=\"revealed() ? 'Ocultar contenido' : 'Mostrar contenido'\"\n [attr.aria-pressed]=\"revealed()\"\n tabindex=\"-1\"\n [disabled]=\"disabled\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"toggleReveal()\"\n >\n <span translate=\"no\" class=\"ius-icon\">{{ revealed() ? 'visibility_off' : 'visibility' }}</span>\n </button>\n } @else if (showClearComputed) {\n <button\n type=\"button\"\n class=\"ius-tf__clear\"\n aria-label=\"Limpiar campo\"\n tabindex=\"-1\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"clear()\"\n >\n <span translate=\"no\" class=\"ius-icon\">cancel</span>\n </button>\n }\n</div>\n\n@if (showHint) {\n <span [id]=\"helpId\" class=\"ius-tf__hint\">{{ hint }}</span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_tf-bg: var(--ius-neutral-2);--_tf-border: transparent;--_tf-fg: var(--ius-text-primary);--_tf-placeholder: var(--ius-text-tertiary);--_tf-icon: var(--ius-text-secondary);--_tf-clear: var(--ius-neutral-7);--_tf-py: 9px;--_tf-px: 12px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-md);display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);min-width:200px;width:100%;max-width:360px}.ius-tf__label{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-tf__required{width:5px;height:5px;border-radius:50%;background:var(--ius-danger-500);display:inline-block;margin-right:var(--ius-space-xxs)}.ius-tf__help-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-7);cursor:help}.ius-tf__help-icon .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-tf__colon{color:var(--ius-text-secondary)}.ius-tf__field{display:flex;align-items:center;gap:var(--ius-space-xxs);padding:var(--_tf-py) var(--_tf-px);background:var(--_tf-bg);border:1px solid var(--_tf-border);border-radius:var(--ius-radius-md);transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}.ius-tf__field:hover,:host([data-force=hover]) .ius-tf__field{--_tf-bg: var(--ius-info-100);--_tf-border: transparent;--_tf-clear: var(--ius-primary-900)}:host([data-focused=true]) .ius-tf__field,:host([data-force=focused]) .ius-tf__field,.ius-tf__field:focus-within{--_tf-bg: var(--ius-info-100);--_tf-border: var(--ius-primary-500);--_tf-clear: var(--ius-primary-900);box-shadow:var(--ius-focus-ring)}:host([data-error=true]) .ius-tf__field,:host([data-force=error]) .ius-tf__field{--_tf-bg: var(--ius-danger-100);--_tf-border: var(--ius-danger-700);--_tf-clear: var(--ius-danger-700);box-shadow:none}:host([data-error=true][data-focused=true]) .ius-tf__field,:host([data-force=error]) .ius-tf__field{box-shadow:0 0 0 3px var(--ius-danger-200)}:host([data-disabled=true]) .ius-tf__field,:host([data-force=disabled]) .ius-tf__field{--_tf-bg: var(--ius-neutral-2);--_tf-border: transparent;--_tf-fg: var(--ius-text-disabled);--_tf-placeholder: var(--ius-text-disabled);--_tf-icon: var(--ius-text-disabled);box-shadow:none;cursor:not-allowed}:host([data-disabled=true]) .ius-tf__label,:host([data-force=disabled]) .ius-tf__label{color:var(--ius-text-disabled)}:host([data-disabled=true]) .ius-tf__required,:host([data-force=disabled]) .ius-tf__required{background:var(--ius-neutral-5)}.ius-tf__prefix,.ius-tf__sufix{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-tf__prefix .ius-icon,.ius-tf__sufix .ius-icon{font-size:var(--_tf-icon-size);line-height:1}:host([data-size=small]){--_tf-py: 6px;--_tf-px: 10px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-sm)}:host([data-size=large]){--_tf-py: 12px;--_tf-px: 14px;--_tf-fs: var(--ius-fs-lg);--_tf-lh: var(--ius-lh-lg);--_tf-icon-size: var(--ius-icon-lg)}@container style(--ius-control-size: small){:host(:not([data-size])){--_tf-py: 6px;--_tf-px: 10px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-sm)}}@container style(--ius-control-size: large){:host(:not([data-size])){--_tf-py: 12px;--_tf-px: 14px;--_tf-fs: var(--ius-fs-lg);--_tf-lh: var(--ius-lh-lg);--_tf-icon-size: var(--ius-icon-lg)}}.ius-tf__input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--_tf-fs);line-height:var(--_tf-lh);color:var(--_tf-fg);min-width:0;padding:0}.ius-tf__input::placeholder{color:var(--_tf-placeholder)}.ius-tf__input:disabled{cursor:not-allowed;color:var(--ius-text-disabled)}:host([data-error=true]) .ius-tf__input{color:var(--ius-text-primary)}.ius-tf__clear{appearance:none;border:0;padding:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--_tf-clear);cursor:pointer;flex:0 0 auto}.ius-tf__clear:hover{color:var(--ius-neutral-9)}.ius-tf__clear .ius-icon{font-size:calc(var(--_tf-icon-size) + 2px);line-height:1}:host([data-error=true]) .ius-tf__clear{color:var(--ius-danger-700)}:host([data-error=true]) .ius-tf__clear:hover{color:var(--ius-danger-800)}.ius-tf__hint{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);font-weight:var(--ius-fw-medium);font-style:italic;color:var(--ius-text-secondary);letter-spacing:.02em}:host([data-error=true]) .ius-tf__hint,:host([data-force=error]) .ius-tf__hint{color:var(--ius-danger-700)}:host([data-disabled=true]) .ius-tf__hint,:host([data-force=disabled]) .ius-tf__hint{color:var(--ius-text-disabled)}\n"], dependencies: [{ kind: "component", type: PopoverComponent, selector: "ius-popover", inputs: ["title", "content", "placement", "trigger", "offset", "open", "defaultOpen", "showArrow", "disabled", "anchorRect", "padding", "dismissable", "panelClass"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1410
|
+
], ngImport: i0, template: "@if (label) {\r\n <label [for]=\"inputId\" class=\"ius-tf__label\">\r\n @if (required) {\r\n <span class=\"ius-tf__required\" aria-hidden=\"true\"></span>\r\n }\r\n <span>{{ label }}</span>\r\n @if (showIconHelp) {\r\n <ius-popover\r\n [title]=\"iconHelpTitle\"\r\n [content]=\"iconHelpContent\"\r\n [disabled]=\"!iconHelpTitle && !iconHelpContent\"\r\n >\r\n <span\r\n class=\"ius-tf__help-icon\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n aria-label=\"Ayuda\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">help</span>\r\n </span>\r\n </ius-popover>\r\n }\r\n <span class=\"ius-tf__colon\">:</span>\r\n </label>\r\n}\r\n\r\n<div class=\"ius-tf__field\">\r\n @if (prefixIcon) {\r\n <span class=\"ius-tf__prefix\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ prefixIcon }}</span>\r\n </span>\r\n }\r\n\r\n <input\r\n [id]=\"inputId\"\r\n class=\"ius-tf__input\"\r\n [type]=\"inputType\"\r\n [name]=\"name\"\r\n [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 }); }
|
|
1411
1411
|
}
|
|
1412
1412
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TextFieldComponent, decorators: [{
|
|
1413
1413
|
type: Component,
|
|
@@ -1423,7 +1423,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
1423
1423
|
'[attr.data-focused]': 'focused() || null',
|
|
1424
1424
|
'[attr.data-error]': 'error || null',
|
|
1425
1425
|
'[attr.data-disabled]': 'disabled || null',
|
|
1426
|
-
}, template: "@if (label) {\n <label [for]=\"inputId\" class=\"ius-tf__label\">\n @if (required) {\n <span class=\"ius-tf__required\" aria-hidden=\"true\"></span>\n }\n <span>{{ label }}</span>\n @if (showIconHelp) {\n <ius-popover\n [title]=\"iconHelpTitle\"\n [content]=\"iconHelpContent\"\n [disabled]=\"!iconHelpTitle && !iconHelpContent\"\n >\n <span\n class=\"ius-tf__help-icon\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=\"Ayuda\"\n >\n <span translate=\"no\" class=\"ius-icon\">help</span>\n </span>\n </ius-popover>\n }\n <span class=\"ius-tf__colon\">:</span>\n </label>\n}\n\n<div class=\"ius-tf__field\">\n @if (prefixIcon) {\n <span class=\"ius-tf__prefix\" aria-hidden=\"true\">\n <span translate=\"no\" class=\"ius-icon\">{{ prefixIcon }}</span>\n </span>\n }\n\n <input\n [id]=\"inputId\"\n class=\"ius-tf__input\"\n [type]=\"inputType\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [value]=\"value()\"\n [disabled]=\"disabled\"\n [attr.aria-invalid]=\"error || null\"\n [attr.aria-required]=\"required || null\"\n [attr.aria-describedby]=\"showHint ? helpId : null\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n />\n\n @if (isPassword) {\n <button\n type=\"button\"\n class=\"ius-tf__clear\"\n [attr.aria-label]=\"revealed() ? 'Ocultar contenido' : 'Mostrar contenido'\"\n [attr.aria-pressed]=\"revealed()\"\n tabindex=\"-1\"\n [disabled]=\"disabled\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"toggleReveal()\"\n >\n <span translate=\"no\" class=\"ius-icon\">{{ revealed() ? 'visibility_off' : 'visibility' }}</span>\n </button>\n } @else if (showClearComputed) {\n <button\n type=\"button\"\n class=\"ius-tf__clear\"\n aria-label=\"Limpiar campo\"\n tabindex=\"-1\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"clear()\"\n >\n <span translate=\"no\" class=\"ius-icon\">cancel</span>\n </button>\n }\n</div>\n\n@if (showHint) {\n <span [id]=\"helpId\" class=\"ius-tf__hint\">{{ hint }}</span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_tf-bg: var(--ius-neutral-2);--_tf-border: transparent;--_tf-fg: var(--ius-text-primary);--_tf-placeholder: var(--ius-text-tertiary);--_tf-icon: var(--ius-text-secondary);--_tf-clear: var(--ius-neutral-7);--_tf-py: 9px;--_tf-px: 12px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-md);display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);min-width:200px;width:100%;max-width:360px}.ius-tf__label{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-tf__required{width:5px;height:5px;border-radius:50%;background:var(--ius-danger-500);display:inline-block;margin-right:var(--ius-space-xxs)}.ius-tf__help-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-7);cursor:help}.ius-tf__help-icon .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-tf__colon{color:var(--ius-text-secondary)}.ius-tf__field{display:flex;align-items:center;gap:var(--ius-space-xxs);padding:var(--_tf-py) var(--_tf-px);background:var(--_tf-bg);border:1px solid var(--_tf-border);border-radius:var(--ius-radius-md);transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}.ius-tf__field:hover,:host([data-force=hover]) .ius-tf__field{--_tf-bg: var(--ius-info-100);--_tf-border: transparent;--_tf-clear: var(--ius-primary-900)}:host([data-focused=true]) .ius-tf__field,:host([data-force=focused]) .ius-tf__field,.ius-tf__field:focus-within{--_tf-bg: var(--ius-info-100);--_tf-border: var(--ius-primary-500);--_tf-clear: var(--ius-primary-900);box-shadow:var(--ius-focus-ring)}:host([data-error=true]) .ius-tf__field,:host([data-force=error]) .ius-tf__field{--_tf-bg: var(--ius-danger-100);--_tf-border: var(--ius-danger-700);--_tf-clear: var(--ius-danger-700);box-shadow:none}:host([data-error=true][data-focused=true]) .ius-tf__field,:host([data-force=error]) .ius-tf__field{box-shadow:0 0 0 3px var(--ius-danger-200)}:host([data-disabled=true]) .ius-tf__field,:host([data-force=disabled]) .ius-tf__field{--_tf-bg: var(--ius-neutral-2);--_tf-border: transparent;--_tf-fg: var(--ius-text-disabled);--_tf-placeholder: var(--ius-text-disabled);--_tf-icon: var(--ius-text-disabled);box-shadow:none;cursor:not-allowed}:host([data-disabled=true]) .ius-tf__label,:host([data-force=disabled]) .ius-tf__label{color:var(--ius-text-disabled)}:host([data-disabled=true]) .ius-tf__required,:host([data-force=disabled]) .ius-tf__required{background:var(--ius-neutral-5)}.ius-tf__prefix,.ius-tf__sufix{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-tf__prefix .ius-icon,.ius-tf__sufix .ius-icon{font-size:var(--_tf-icon-size);line-height:1}:host([data-size=small]){--_tf-py: 6px;--_tf-px: 10px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-sm)}:host([data-size=large]){--_tf-py: 12px;--_tf-px: 14px;--_tf-fs: var(--ius-fs-lg);--_tf-lh: var(--ius-lh-lg);--_tf-icon-size: var(--ius-icon-lg)}@container style(--ius-control-size: small){:host(:not([data-size])){--_tf-py: 6px;--_tf-px: 10px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-sm)}}@container style(--ius-control-size: large){:host(:not([data-size])){--_tf-py: 12px;--_tf-px: 14px;--_tf-fs: var(--ius-fs-lg);--_tf-lh: var(--ius-lh-lg);--_tf-icon-size: var(--ius-icon-lg)}}.ius-tf__input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--_tf-fs);line-height:var(--_tf-lh);color:var(--_tf-fg);min-width:0;padding:0}.ius-tf__input::placeholder{color:var(--_tf-placeholder)}.ius-tf__input:disabled{cursor:not-allowed;color:var(--ius-text-disabled)}:host([data-error=true]) .ius-tf__input{color:var(--ius-text-primary)}.ius-tf__clear{appearance:none;border:0;padding:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--_tf-clear);cursor:pointer;flex:0 0 auto}.ius-tf__clear:hover{color:var(--ius-neutral-9)}.ius-tf__clear .ius-icon{font-size:calc(var(--_tf-icon-size) + 2px);line-height:1}:host([data-error=true]) .ius-tf__clear{color:var(--ius-danger-700)}:host([data-error=true]) .ius-tf__clear:hover{color:var(--ius-danger-800)}.ius-tf__hint{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);font-weight:var(--ius-fw-medium);font-style:italic;color:var(--ius-text-secondary);letter-spacing:.02em}:host([data-error=true]) .ius-tf__hint,:host([data-force=error]) .ius-tf__hint{color:var(--ius-danger-700)}:host([data-disabled=true]) .ius-tf__hint,:host([data-force=disabled]) .ius-tf__hint{color:var(--ius-text-disabled)}\n"] }]
|
|
1426
|
+
}, template: "@if (label) {\r\n <label [for]=\"inputId\" class=\"ius-tf__label\">\r\n @if (required) {\r\n <span class=\"ius-tf__required\" aria-hidden=\"true\"></span>\r\n }\r\n <span>{{ label }}</span>\r\n @if (showIconHelp) {\r\n <ius-popover\r\n [title]=\"iconHelpTitle\"\r\n [content]=\"iconHelpContent\"\r\n [disabled]=\"!iconHelpTitle && !iconHelpContent\"\r\n >\r\n <span\r\n class=\"ius-tf__help-icon\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n aria-label=\"Ayuda\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">help</span>\r\n </span>\r\n </ius-popover>\r\n }\r\n <span class=\"ius-tf__colon\">:</span>\r\n </label>\r\n}\r\n\r\n<div class=\"ius-tf__field\">\r\n @if (prefixIcon) {\r\n <span class=\"ius-tf__prefix\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ prefixIcon }}</span>\r\n </span>\r\n }\r\n\r\n <input\r\n [id]=\"inputId\"\r\n class=\"ius-tf__input\"\r\n [type]=\"inputType\"\r\n [name]=\"name\"\r\n [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"] }]
|
|
1427
1427
|
}], propDecorators: { label: [{
|
|
1428
1428
|
type: Input
|
|
1429
1429
|
}], placeholder: [{
|
|
@@ -1454,6 +1454,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
1454
1454
|
args: [{ transform: booleanAttribute }]
|
|
1455
1455
|
}], name: [{
|
|
1456
1456
|
type: Input
|
|
1457
|
+
}], autocomplete: [{
|
|
1458
|
+
type: Input
|
|
1457
1459
|
}], type: [{
|
|
1458
1460
|
type: Input
|
|
1459
1461
|
}], size: [{
|
|
@@ -5596,6 +5598,10 @@ class ListCardComponent {
|
|
|
5596
5598
|
if (marker.onClick)
|
|
5597
5599
|
marker.onClick(event);
|
|
5598
5600
|
}
|
|
5601
|
+
/** Discrimina el valor rico del field (el template no puede usar instanceof). */
|
|
5602
|
+
fieldTpl(field) {
|
|
5603
|
+
return field.value instanceof TemplateRef ? field.value : null;
|
|
5604
|
+
}
|
|
5599
5605
|
fieldWidth(field) {
|
|
5600
5606
|
if (field.width == null)
|
|
5601
5607
|
return null;
|
|
@@ -5666,7 +5672,7 @@ class ListCardComponent {
|
|
|
5666
5672
|
this.wrapped.set(wrapped);
|
|
5667
5673
|
}
|
|
5668
5674
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ListCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5669
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ListCardComponent, isStandalone: true, selector: "ius-list-card", inputs: { overline: "overline", overlineIcon: "overlineIcon", title: "title", titleIcon: "titleIcon", tags: "tags", subtitle: "subtitle", subtitleIcon: "subtitleIcon", paragraph: "paragraph", fields: "fields", status: "status", actions: "actions", menu: "menu", markers: "markers", chevron: "chevron", unread: ["unread", "unread", booleanAttribute], size: "size", renderAction: "renderAction", ariaLabel: "ariaLabel" }, outputs: { clicked: "clicked" }, host: { listeners: { "click": "onHostClick($event)", "keydown.enter": "onKeyActivate($event)", "keydown.space": "onSpaceDown($event)", "keyup.space": "onKeyActivate($event)" }, properties: { "attr.data-size": "size !== 'medium' ? size : null", "attr.data-clickable": "clickable ? 'true' : null", "attr.data-unread": "unread ? 'true' : null", "attr.data-menu-open": "menuOpen() ? 'true' : null", "attr.role": "clickable ? 'button' : null", "attr.tabindex": "clickable ? 0 : null", "attr.aria-label": "ariaLabel ?? null", "attr.title": "null" }, classAttribute: "ius-listcard" }, queries: [{ propertyName: "leadingRef", first: true, predicate: IusListCardLeadingDirective, descendants: true, isSignal: true }, { propertyName: "overlineRef", first: true, predicate: IusListCardOverlineDirective, descendants: true, isSignal: true }, { propertyName: "titleRef", first: true, predicate: IusListCardTitleDirective, descendants: true, isSignal: true }, { propertyName: "subtitleRef", first: true, predicate: IusListCardSubtitleDirective, descendants: true, isSignal: true }, { propertyName: "paragraphRef", first: true, predicate: IusListCardParagraphDirective, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Leading \u2014 t\u00EDpicamente <ius-avatar iusListCardLeading>. -->\r\n@if (hasLeading) {\r\n <span class=\"ius-listcard__lead\"><ng-content select=\"[iusListCardLeading]\" /></span>\r\n}\r\n\r\n<!-- body agrupa main + fields lado a lado; con poco espacio, fields cae a la 2\u00AA l\u00EDnea -->\r\n<span class=\"ius-listcard__body\">\r\n <span class=\"ius-listcard__main\">\r\n @if (hasOverline) {\r\n <span class=\"ius-listcard__overline\">\r\n @if (overlineIcon) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ overlineIcon }}</span>\r\n }\r\n @if (overline != null) {\r\n {{ overline }}\r\n }\r\n <ng-content select=\"[iusListCardOverline]\" />\r\n </span>\r\n }\r\n @if (hasTitleRow) {\r\n <span class=\"ius-listcard__titlerow\">\r\n @if (titleIcon) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ titleIcon }}</span>\r\n }\r\n @if (title != null || titleRefPresent) {\r\n <span class=\"ius-listcard__title\">{{ title }}<ng-content select=\"[iusListCardTitle]\" /></span>\r\n }\r\n @if (tags.length) {\r\n <span class=\"ius-listcard__tags\">\r\n @for (t of tags; track t.key ?? $index) {\r\n <ius-tag\r\n size=\"small\"\r\n role=\"status\"\r\n [tone]=\"t.tone ?? 'neutral'\"\r\n [variant]=\"t.variant\"\r\n [icon]=\"t.icon\"\r\n [dot]=\"t.dot\"\r\n [label]=\"t.label\"\r\n />\r\n }\r\n </span>\r\n }\r\n </span>\r\n }\r\n @if (hasSubtitle) {\r\n <span class=\"ius-listcard__subtitle\">\r\n @if (subtitleIcon) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ subtitleIcon }}</span>\r\n }\r\n @if (subtitle != null) {\r\n {{ subtitle }}\r\n }\r\n <ng-content select=\"[iusListCardSubtitle]\" />\r\n </span>\r\n }\r\n @if (hasParagraph) {\r\n <span class=\"ius-listcard__paragraph\">\r\n @if (paragraph != null) {\r\n {{ paragraph }}\r\n }\r\n <ng-content select=\"[iusListCardParagraph]\" />\r\n </span>\r\n }\r\n </span>\r\n\r\n <!-- divisor a lo ancho, insertado antes de la primera columna que hizo wrap -->\r\n @if (fields.length && wrapped()) {\r\n <span class=\"ius-listcard__bodydiv\" aria-hidden=\"true\"></span>\r\n }\r\n @if (fields.length) {\r\n <span class=\"ius-listcard__fields\">\r\n @for (f of fields; track f.key ?? $index) {\r\n <span\r\n class=\"ius-listcard__field\"\r\n [class.ius-listcard__hideonhover]=\"f.hideOnHover\"\r\n [attr.data-emphasis]=\"f.emphasis ? 'true' : null\"\r\n [attr.data-align]=\"f.align || null\"\r\n [style.width]=\"fieldWidth(f)\"\r\n >\r\n @if (f.label) {\r\n <span class=\"ius-listcard__flabel\">{{ f.label }}</span>\r\n }\r\n <span class=\"ius-listcard__fvalue\">\r\n @if (f.icon) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ f.icon }}</span>\r\n }\r\n <span>{{ f.value }}</span>\r\n </span>\r\n </span>\r\n }\r\n </span>\r\n }\r\n</span>\r\n\r\n<!-- zona final: estado \u00B7 markers \u00B7 acciones(+\u22EE) \u00B7 chevron -->\r\n@if (hasTrail) {\r\n <span class=\"ius-listcard__trail\">\r\n @if (status) {\r\n <!-- estado \u2014 delega en StatusChip (\u00E1tomo de estado del sistema) -->\r\n <span class=\"ius-listcard__status\" [class.ius-listcard__hideonhover]=\"status.hideOnHover\">\r\n <ius-status-chip\r\n [vocab]=\"status.vocab ?? 'actuacion'\"\r\n [status]=\"status.status\"\r\n [tone]=\"status.tone\"\r\n [label]=\"status.label\"\r\n [icon]=\"status.icon\"\r\n [customMap]=\"status.customMap\"\r\n [size]=\"statusChipSize\"\r\n />\r\n </span>\r\n }\r\n @if (markers.length) {\r\n <span class=\"ius-listcard__markers\">\r\n @for (m of markers; track m.key ?? $index) {\r\n <ius-icon-button\r\n [icon]=\"m.icon\"\r\n [variant]=\"m.variant || 'tertiary'\"\r\n shape=\"squared\"\r\n size=\"small\"\r\n [tooltip]=\"m.tooltip || m.label\"\r\n [ariaLabel]=\"m.ariaLabel || m.label || m.icon\"\r\n (clicked)=\"onMarker(m, $event)\"\r\n />\r\n }\r\n </span>\r\n }\r\n @if (actions.length || menu.length) {\r\n <span class=\"ius-listcard__actions\">\r\n @for (a of actions; track a.key ?? $index) {\r\n @if (renderAction) {\r\n <ng-container *ngTemplateOutlet=\"renderAction; context: { $implicit: a, index: $index }\" />\r\n } @else {\r\n <ius-icon-button\r\n [icon]=\"a.icon\"\r\n variant=\"tertiary\"\r\n shape=\"squared\"\r\n size=\"small\"\r\n [tooltip]=\"a.tooltip || a.label\"\r\n [ariaLabel]=\"a.ariaLabel || a.label || a.icon\"\r\n (clicked)=\"onAction(a, $event)\"\r\n />\r\n }\r\n }\r\n @if (menu.length) {\r\n <!-- \u22EE overflow: compone ius-dropdown. El span detiene la propagaci\u00F3n:\r\n abrir el men\u00FA o elegir un \u00EDtem no navega la fila. -->\r\n <span class=\"ius-listcard__menu\" (click)=\"$event.stopPropagation()\">\r\n <ius-dropdown\r\n [items]=\"menu\"\r\n placement=\"bottom-end\"\r\n ariaLabel=\"M\u00E1s opciones\"\r\n (openChange)=\"onMenuOpenChange($event)\"\r\n >\r\n <ius-icon-button\r\n iusDropdownTrigger\r\n icon=\"more_vert\"\r\n variant=\"tertiary\"\r\n shape=\"squared\"\r\n size=\"small\"\r\n tooltip=\"M\u00E1s opciones\"\r\n ariaLabel=\"M\u00E1s opciones\"\r\n />\r\n </ius-dropdown>\r\n </span>\r\n }\r\n </span>\r\n }\r\n @if (showChevron) {\r\n <span class=\"ius-listcard__chevron\"><span translate=\"no\" class=\"ius-icon\">chevron_right</span></span>\r\n }\r\n </span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_lc-py: 14px;--_lc-px: 16px;--_lc-gap: var(--ius-space-md);--_lc-title-fs: var(--ius-fs-lg);--_lc-fieldgap: 28px;position:relative;box-sizing:border-box;display:flex;align-items:center;gap:var(--_lc-gap);width:100%;padding:var(--_lc-py) var(--_lc-px);background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);font-family:var(--ius-font-body);text-align:left;transition:border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-clickable=true]){cursor:pointer}:host([data-size=small]){--_lc-py: 10px;--_lc-px: 14px;--_lc-gap: var(--ius-space-sm);--_lc-title-fs: var(--ius-fs-base);--_lc-fieldgap: 22px}:host([data-size=large]){--_lc-py: 18px;--_lc-px: 20px;--_lc-gap: var(--ius-space-md);--_lc-title-fs: var(--ius-fs-h5);--_lc-fieldgap: 34px}@container style(--ius-density: small){:host(:not([data-size])){--_lc-py: 10px;--_lc-px: 14px;--_lc-gap: var(--ius-space-sm);--_lc-title-fs: var(--ius-fs-base);--_lc-fieldgap: 22px}}@container style(--ius-density: large){:host(:not([data-size])){--_lc-py: 18px;--_lc-px: 20px;--_lc-gap: var(--ius-space-md);--_lc-title-fs: var(--ius-fs-h5);--_lc-fieldgap: 34px}}:host([data-clickable=true]:hover){border-color:var(--ius-stroke-strong, var(--ius-neutral-4));box-shadow:var(--ius-elevation-100)}:host(:focus-visible){outline:none;box-shadow:var(--ius-focus-ring)}.ius-listcard__lead{flex:0 0 auto;display:inline-flex;align-items:center}.ius-listcard__body{flex:1 1 auto;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:var(--ius-space-xs) var(--_lc-fieldgap)}.ius-listcard__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs);margin-inline-end:var(--ius-space-sm, 8px)}.ius-listcard__overline{display:flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);letter-spacing:var(--ius-ls-emphasis);text-transform:uppercase;color:var(--ius-text-tertiary);overflow:hidden;white-space:nowrap}.ius-listcard__overline .ius-icon{font-size:var(--ius-icon-sm);flex:0 0 auto}.ius-listcard__titlerow{display:flex;align-items:center;gap:var(--ius-space-xs);flex-wrap:wrap;min-width:0}.ius-listcard__titlerow>.ius-icon{font-size:var(--ius-icon-md);flex:0 0 auto;color:var(--ius-text-secondary)}.ius-listcard__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--_lc-title-fs);line-height:1.25;color:var(--ius-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.ius-listcard__tags{display:flex;align-items:center;gap:var(--ius-space-xs);flex-wrap:wrap}.ius-listcard__titlerow .ius-listcard__tags{margin-left:auto}.ius-listcard__subtitle{display:flex;align-items:flex-start;gap:var(--ius-space-xs);font:var(--ius-fw-regular, 400) var(--ius-fs-sm)/1.35 var(--ius-font-body);color:var(--ius-text-secondary);text-wrap:pretty}.ius-listcard__subtitle>.ius-icon{font-size:var(--ius-icon-sm);flex:0 0 auto;color:var(--ius-text-tertiary);margin-top:1px}.ius-listcard__subtitle ::ng-deep b{color:var(--ius-text-primary);font-weight:var(--ius-fw-semibold)}.ius-listcard__paragraph{margin-top:var(--ius-space-xxs);font:var(--ius-fw-regular, 400) var(--ius-fs-sm)/1.45 var(--ius-font-body);color:var(--ius-text-secondary);text-wrap:pretty;overflow-wrap:anywhere}.ius-listcard__paragraph ::ng-deep b{color:var(--ius-text-primary);font-weight:var(--ius-fw-semibold)}.ius-listcard__fields{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ius-space-xs) var(--_lc-fieldgap);flex:0 0 auto;max-width:100%;min-width:0}.ius-listcard__field{display:flex;flex-direction:column;gap:var(--ius-space-xxs);flex:0 0 auto;min-width:0}.ius-listcard__field[data-align=end]{text-align:right}.ius-listcard__field:nth-child(1){width:var(--_lc-col-1, auto)}.ius-listcard__field:nth-child(2){width:var(--_lc-col-2, auto)}.ius-listcard__field:nth-child(3){width:var(--_lc-col-3, auto)}.ius-listcard__field:nth-child(4){width:var(--_lc-col-4, auto)}.ius-listcard__field:nth-child(5){width:var(--_lc-col-5, auto)}.ius-listcard__field:nth-child(6){width:var(--_lc-col-6, auto)}.ius-listcard__flabel{font:var(--ius-fw-regular, 400) var(--ius-fs-sm)/1.3 var(--ius-font-body);color:var(--ius-text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-listcard__fvalue{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font:var(--ius-fw-regular, 400) var(--ius-fs-base)/1.3 var(--ius-font-body);color:var(--ius-text-secondary);overflow:hidden;white-space:nowrap;font-variant-numeric:tabular-nums}.ius-listcard__fvalue>.ius-icon{font-size:var(--ius-icon-sm);flex:0 0 auto;color:var(--ius-text-tertiary)}.ius-listcard__fvalue>span{overflow:hidden;text-overflow:ellipsis}.ius-listcard__field[data-emphasis=true] .ius-listcard__fvalue{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--_lc-title-fs);color:var(--ius-text-primary)}.ius-listcard__bodydiv{flex:0 0 100%;height:0;border-top:1px solid var(--ius-stroke);margin:var(--ius-space-xxs) 0}.ius-listcard__trail{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-sm);margin-left:auto}.ius-listcard__status{display:inline-flex;align-items:center;white-space:nowrap}.ius-listcard__markers{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);flex:0 0 auto}.ius-listcard__actions{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);visibility:hidden}:host([data-clickable=true]:hover) .ius-listcard__actions,:host(:hover) .ius-listcard__actions,:host(:has(:focus-visible)) .ius-listcard__actions{visibility:visible}:host(:hover) .ius-listcard__hideonhover,:host(:has(:focus-visible)) .ius-listcard__hideonhover{display:none}.ius-listcard__menu{display:inline-flex}:host([data-menu-open=true]) .ius-listcard__actions{visibility:visible}:host([data-menu-open=true]) .ius-listcard__hideonhover{display:none}.ius-listcard__chevron{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;color:var(--ius-text-tertiary)}.ius-listcard__chevron .ius-icon{font-size:var(--ius-icon-lg)}:host([data-clickable=true]:hover) .ius-listcard__chevron{color:var(--ius-text-secondary)}:host:before{content:\"\";width:7px;height:7px;border-radius:var(--ius-radius-pill);background:transparent;flex:0 0 auto;align-self:center;margin-inline-end:var(--ius-space-xs)}:host([data-unread=true]):before{background:var(--ius-primary-900)}:host([data-unread=true]) .ius-listcard__title{font-weight:var(--ius-fw-bold, 700)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TagComponent, selector: "ius-tag", inputs: ["label", "role", "tone", "variant", "size", "shape", "icon", "dot", "count", "closable", "closeLabel", "selected", "disabled", "interactive", "state"], outputs: ["clicked", "closed"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "tooltipPlacement"], outputs: ["clicked"] }, { kind: "component", type: StatusChipComponent, selector: "ius-status-chip", inputs: ["vocab", "status", "tone", "label", "icon", "size", "customMap"] }, { kind: "component", type: DropdownComponent, selector: "ius-dropdown", inputs: ["items", "selectable", "value", "label", "triggerLabel", "triggerIcon", "tone", "variant", "placement", "open", "defaultOpen", "ariaLabel"], outputs: ["valueChange", "openChange"] }, { kind: "directive", type: IusDropdownTriggerDirective, selector: "[iusDropdownTrigger]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5675
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ListCardComponent, isStandalone: true, selector: "ius-list-card", inputs: { overline: "overline", overlineIcon: "overlineIcon", title: "title", titleIcon: "titleIcon", tags: "tags", subtitle: "subtitle", subtitleIcon: "subtitleIcon", paragraph: "paragraph", fields: "fields", status: "status", actions: "actions", menu: "menu", markers: "markers", chevron: "chevron", unread: ["unread", "unread", booleanAttribute], size: "size", renderAction: "renderAction", ariaLabel: "ariaLabel" }, outputs: { clicked: "clicked" }, host: { listeners: { "click": "onHostClick($event)", "keydown.enter": "onKeyActivate($event)", "keydown.space": "onSpaceDown($event)", "keyup.space": "onKeyActivate($event)" }, properties: { "attr.data-size": "size !== 'medium' ? size : null", "attr.data-clickable": "clickable ? 'true' : null", "attr.data-unread": "unread ? 'true' : null", "attr.data-menu-open": "menuOpen() ? 'true' : null", "attr.role": "clickable ? 'button' : null", "attr.tabindex": "clickable ? 0 : null", "attr.aria-label": "ariaLabel ?? null", "attr.title": "null" }, classAttribute: "ius-listcard" }, queries: [{ propertyName: "leadingRef", first: true, predicate: IusListCardLeadingDirective, descendants: true, isSignal: true }, { propertyName: "overlineRef", first: true, predicate: IusListCardOverlineDirective, descendants: true, isSignal: true }, { propertyName: "titleRef", first: true, predicate: IusListCardTitleDirective, descendants: true, isSignal: true }, { propertyName: "subtitleRef", first: true, predicate: IusListCardSubtitleDirective, descendants: true, isSignal: true }, { propertyName: "paragraphRef", first: true, predicate: IusListCardParagraphDirective, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Leading \u2014 t\u00EDpicamente <ius-avatar iusListCardLeading>. -->\n@if (hasLeading) {\n <span class=\"ius-listcard__lead\"><ng-content select=\"[iusListCardLeading]\" /></span>\n}\n\n<!-- body agrupa main + fields lado a lado; con poco espacio, fields cae a la 2\u00AA l\u00EDnea -->\n<span class=\"ius-listcard__body\">\n <span class=\"ius-listcard__main\">\n @if (hasOverline) {\n <span class=\"ius-listcard__overline\">\n @if (overlineIcon) {\n <span translate=\"no\" class=\"ius-icon\">{{ overlineIcon }}</span>\n }\n @if (overline != null) {\n {{ overline }}\n }\n <ng-content select=\"[iusListCardOverline]\" />\n </span>\n }\n @if (hasTitleRow) {\n <span class=\"ius-listcard__titlerow\">\n @if (titleIcon) {\n <span translate=\"no\" class=\"ius-icon\">{{ titleIcon }}</span>\n }\n @if (title != null || titleRefPresent) {\n <span class=\"ius-listcard__title\">{{ title }}<ng-content select=\"[iusListCardTitle]\" /></span>\n }\n @if (tags.length) {\n <span class=\"ius-listcard__tags\">\n @for (t of tags; track t.key ?? $index) {\n <ius-tag\n size=\"small\"\n role=\"status\"\n [tone]=\"t.tone ?? 'neutral'\"\n [variant]=\"t.variant\"\n [icon]=\"t.icon\"\n [dot]=\"t.dot\"\n [label]=\"t.label\"\n />\n }\n </span>\n }\n </span>\n }\n @if (hasSubtitle) {\n <span class=\"ius-listcard__subtitle\">\n @if (subtitleIcon) {\n <span translate=\"no\" class=\"ius-icon\">{{ subtitleIcon }}</span>\n }\n @if (subtitle != null) {\n {{ subtitle }}\n }\n <ng-content select=\"[iusListCardSubtitle]\" />\n </span>\n }\n @if (hasParagraph) {\n <span class=\"ius-listcard__paragraph\">\n @if (paragraph != null) {\n {{ paragraph }}\n }\n <ng-content select=\"[iusListCardParagraph]\" />\n </span>\n }\n </span>\n\n <!-- divisor a lo ancho, insertado antes de la primera columna que hizo wrap -->\n @if (fields.length && wrapped()) {\n <span class=\"ius-listcard__bodydiv\" aria-hidden=\"true\"></span>\n }\n @if (fields.length) {\n <span class=\"ius-listcard__fields\">\n @for (f of fields; track f.key ?? $index) {\n <span\n class=\"ius-listcard__field\"\n [class.ius-listcard__hideonhover]=\"f.hideOnHover\"\n [attr.data-emphasis]=\"f.emphasis ? 'true' : null\"\n [attr.data-align]=\"f.align || null\"\n [style.width]=\"fieldWidth(f)\"\n >\n @if (f.label) {\n <span class=\"ius-listcard__flabel\">{{ f.label }}</span>\n }\n <span class=\"ius-listcard__fvalue\">\n @if (f.icon) {\n <span translate=\"no\" class=\"ius-icon\">{{ f.icon }}</span>\n }\n @if (fieldTpl(f); as tpl) {\n <ng-container [ngTemplateOutlet]=\"tpl\"></ng-container>\n } @else {\n <span>{{ f.value }}</span>\n }\n </span>\n </span>\n }\n </span>\n }\n</span>\n\n<!-- zona final: estado \u00B7 markers \u00B7 acciones(+\u22EE) \u00B7 chevron -->\n@if (hasTrail) {\n <span class=\"ius-listcard__trail\">\n @if (status) {\n <!-- estado \u2014 delega en StatusChip (\u00E1tomo de estado del sistema) -->\n <span class=\"ius-listcard__status\" [class.ius-listcard__hideonhover]=\"status.hideOnHover\">\n <ius-status-chip\n [vocab]=\"status.vocab ?? 'actuacion'\"\n [status]=\"status.status\"\n [tone]=\"status.tone\"\n [label]=\"status.label\"\n [icon]=\"status.icon\"\n [customMap]=\"status.customMap\"\n [size]=\"statusChipSize\"\n />\n </span>\n }\n @if (markers.length) {\n <span class=\"ius-listcard__markers\">\n @for (m of markers; track m.key ?? $index) {\n <ius-icon-button\n [icon]=\"m.icon\"\n [variant]=\"m.variant || 'tertiary'\"\n shape=\"squared\"\n size=\"small\"\n [tooltip]=\"m.tooltip || m.label\"\n [ariaLabel]=\"m.ariaLabel || m.label || m.icon\"\n (clicked)=\"onMarker(m, $event)\"\n />\n }\n </span>\n }\n @if (actions.length || menu.length) {\n <span class=\"ius-listcard__actions\">\n @for (a of actions; track a.key ?? $index) {\n @if (renderAction) {\n <ng-container *ngTemplateOutlet=\"renderAction; context: { $implicit: a, index: $index }\" />\n } @else {\n <ius-icon-button\n [icon]=\"a.icon\"\n variant=\"tertiary\"\n shape=\"squared\"\n size=\"small\"\n [tooltip]=\"a.tooltip || a.label\"\n [ariaLabel]=\"a.ariaLabel || a.label || a.icon\"\n (clicked)=\"onAction(a, $event)\"\n />\n }\n }\n @if (menu.length) {\n <!-- \u22EE overflow: compone ius-dropdown. El span detiene la propagaci\u00F3n:\n abrir el men\u00FA o elegir un \u00EDtem no navega la fila. -->\n <span class=\"ius-listcard__menu\" (click)=\"$event.stopPropagation()\">\n <ius-dropdown\n [items]=\"menu\"\n placement=\"bottom-end\"\n ariaLabel=\"M\u00E1s opciones\"\n (openChange)=\"onMenuOpenChange($event)\"\n >\n <ius-icon-button\n iusDropdownTrigger\n icon=\"more_vert\"\n variant=\"tertiary\"\n shape=\"squared\"\n size=\"small\"\n tooltip=\"M\u00E1s opciones\"\n ariaLabel=\"M\u00E1s opciones\"\n />\n </ius-dropdown>\n </span>\n }\n </span>\n }\n @if (showChevron) {\n <span class=\"ius-listcard__chevron\"><span translate=\"no\" class=\"ius-icon\">chevron_right</span></span>\n }\n </span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_lc-py: 14px;--_lc-px: 16px;--_lc-gap: var(--ius-space-md);--_lc-title-fs: var(--ius-fs-lg);--_lc-fieldgap: 28px;position:relative;box-sizing:border-box;display:flex;align-items:center;gap:var(--_lc-gap);width:100%;padding:var(--_lc-py) var(--_lc-px);background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);font-family:var(--ius-font-body);text-align:left;transition:border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-clickable=true]){cursor:pointer}:host([data-size=small]){--_lc-py: 10px;--_lc-px: 14px;--_lc-gap: var(--ius-space-sm);--_lc-title-fs: var(--ius-fs-base);--_lc-fieldgap: 22px}:host([data-size=large]){--_lc-py: 18px;--_lc-px: 20px;--_lc-gap: var(--ius-space-md);--_lc-title-fs: var(--ius-fs-h5);--_lc-fieldgap: 34px}@container style(--ius-density: small){:host(:not([data-size])){--_lc-py: 10px;--_lc-px: 14px;--_lc-gap: var(--ius-space-sm);--_lc-title-fs: var(--ius-fs-base);--_lc-fieldgap: 22px}}@container style(--ius-density: large){:host(:not([data-size])){--_lc-py: 18px;--_lc-px: 20px;--_lc-gap: var(--ius-space-md);--_lc-title-fs: var(--ius-fs-h5);--_lc-fieldgap: 34px}}:host([data-clickable=true]:hover){border-color:var(--ius-stroke-strong, var(--ius-neutral-4));box-shadow:var(--ius-elevation-100)}:host(:focus-visible){outline:none;box-shadow:var(--ius-focus-ring)}.ius-listcard__lead{flex:0 0 auto;display:inline-flex;align-items:center}.ius-listcard__body{flex:1 1 auto;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:var(--ius-space-xs) var(--_lc-fieldgap)}.ius-listcard__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs);margin-inline-end:var(--ius-space-sm, 8px)}.ius-listcard__overline{display:flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);letter-spacing:var(--ius-ls-emphasis);text-transform:uppercase;color:var(--ius-text-tertiary);overflow:hidden;white-space:nowrap}.ius-listcard__overline .ius-icon{font-size:var(--ius-icon-sm);flex:0 0 auto}.ius-listcard__titlerow{display:flex;align-items:center;gap:var(--ius-space-xs);flex-wrap:wrap;min-width:0}.ius-listcard__titlerow>.ius-icon{font-size:var(--ius-icon-md);flex:0 0 auto;color:var(--ius-text-secondary)}.ius-listcard__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--_lc-title-fs);line-height:1.25;color:var(--ius-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.ius-listcard__tags{display:flex;align-items:center;gap:var(--ius-space-xs);flex-wrap:wrap}.ius-listcard__titlerow .ius-listcard__tags{margin-left:auto}.ius-listcard__subtitle{display:flex;align-items:flex-start;gap:var(--ius-space-xs);font:var(--ius-fw-regular, 400) var(--ius-fs-sm)/1.35 var(--ius-font-body);color:var(--ius-text-secondary);text-wrap:pretty}.ius-listcard__subtitle>.ius-icon{font-size:var(--ius-icon-sm);flex:0 0 auto;color:var(--ius-text-tertiary);margin-top:1px}.ius-listcard__subtitle ::ng-deep b{color:var(--ius-text-primary);font-weight:var(--ius-fw-semibold)}.ius-listcard__paragraph{margin-top:var(--ius-space-xxs);font:var(--ius-fw-regular, 400) var(--ius-fs-sm)/1.45 var(--ius-font-body);color:var(--ius-text-secondary);text-wrap:pretty;overflow-wrap:anywhere}.ius-listcard__paragraph ::ng-deep b{color:var(--ius-text-primary);font-weight:var(--ius-fw-semibold)}.ius-listcard__fields{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ius-space-xs) var(--_lc-fieldgap);flex:0 0 auto;max-width:100%;min-width:0}.ius-listcard__field{display:flex;flex-direction:column;gap:var(--ius-space-xxs);flex:0 0 auto;min-width:0}.ius-listcard__field[data-align=end]{text-align:right}.ius-listcard__field:nth-child(1){width:var(--_lc-col-1, auto)}.ius-listcard__field:nth-child(2){width:var(--_lc-col-2, auto)}.ius-listcard__field:nth-child(3){width:var(--_lc-col-3, auto)}.ius-listcard__field:nth-child(4){width:var(--_lc-col-4, auto)}.ius-listcard__field:nth-child(5){width:var(--_lc-col-5, auto)}.ius-listcard__field:nth-child(6){width:var(--_lc-col-6, auto)}.ius-listcard__flabel{font:var(--ius-fw-regular, 400) var(--ius-fs-sm)/1.3 var(--ius-font-body);color:var(--ius-text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-listcard__fvalue{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font:var(--ius-fw-regular, 400) var(--ius-fs-base)/1.3 var(--ius-font-body);color:var(--ius-text-secondary);overflow:hidden;white-space:nowrap;font-variant-numeric:tabular-nums}.ius-listcard__fvalue>.ius-icon{font-size:var(--ius-icon-sm);flex:0 0 auto;color:var(--ius-text-tertiary)}.ius-listcard__fvalue>span{overflow:hidden;text-overflow:ellipsis}.ius-listcard__field[data-emphasis=true] .ius-listcard__fvalue{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--_lc-title-fs);color:var(--ius-text-primary)}.ius-listcard__bodydiv{flex:0 0 100%;height:0;border-top:1px solid var(--ius-stroke);margin:var(--ius-space-xxs) 0}.ius-listcard__trail{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-sm);margin-left:auto}.ius-listcard__status{display:inline-flex;align-items:center;white-space:nowrap}.ius-listcard__markers{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);flex:0 0 auto}.ius-listcard__actions{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);visibility:hidden}:host([data-clickable=true]:hover) .ius-listcard__actions,:host(:hover) .ius-listcard__actions,:host(:has(:focus-visible)) .ius-listcard__actions{visibility:visible}:host(:hover) .ius-listcard__hideonhover,:host(:has(:focus-visible)) .ius-listcard__hideonhover{display:none}.ius-listcard__menu{display:inline-flex}:host([data-menu-open=true]) .ius-listcard__actions{visibility:visible}:host([data-menu-open=true]) .ius-listcard__hideonhover{display:none}.ius-listcard__chevron{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;color:var(--ius-text-tertiary)}.ius-listcard__chevron .ius-icon{font-size:var(--ius-icon-lg)}:host([data-clickable=true]:hover) .ius-listcard__chevron{color:var(--ius-text-secondary)}:host:before{content:\"\";width:7px;height:7px;border-radius:var(--ius-radius-pill);background:transparent;flex:0 0 auto;align-self:center;margin-inline-end:var(--ius-space-xs)}:host([data-unread=true]):before{background:var(--ius-primary-900)}:host([data-unread=true]) .ius-listcard__title{font-weight:var(--ius-fw-bold, 700)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TagComponent, selector: "ius-tag", inputs: ["label", "role", "tone", "variant", "size", "shape", "icon", "dot", "count", "closable", "closeLabel", "selected", "disabled", "interactive", "state"], outputs: ["clicked", "closed"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "tooltipPlacement"], outputs: ["clicked"] }, { kind: "component", type: StatusChipComponent, selector: "ius-status-chip", inputs: ["vocab", "status", "tone", "label", "icon", "size", "customMap"] }, { kind: "component", type: DropdownComponent, selector: "ius-dropdown", inputs: ["items", "selectable", "value", "label", "triggerLabel", "triggerIcon", "tone", "variant", "placement", "open", "defaultOpen", "ariaLabel"], outputs: ["valueChange", "openChange"] }, { kind: "directive", type: IusDropdownTriggerDirective, selector: "[iusDropdownTrigger]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5670
5676
|
}
|
|
5671
5677
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ListCardComponent, decorators: [{
|
|
5672
5678
|
type: Component,
|
|
@@ -5694,7 +5700,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
5694
5700
|
'(keydown.enter)': 'onKeyActivate($event)',
|
|
5695
5701
|
'(keydown.space)': 'onSpaceDown($event)',
|
|
5696
5702
|
'(keyup.space)': 'onKeyActivate($event)',
|
|
5697
|
-
}, template: "<!-- Leading \u2014 t\u00EDpicamente <ius-avatar iusListCardLeading>. -->\r\n@if (hasLeading) {\r\n <span class=\"ius-listcard__lead\"><ng-content select=\"[iusListCardLeading]\" /></span>\r\n}\r\n\r\n<!-- body agrupa main + fields lado a lado; con poco espacio, fields cae a la 2\u00AA l\u00EDnea -->\r\n<span class=\"ius-listcard__body\">\r\n <span class=\"ius-listcard__main\">\r\n @if (hasOverline) {\r\n <span class=\"ius-listcard__overline\">\r\n @if (overlineIcon) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ overlineIcon }}</span>\r\n }\r\n @if (overline != null) {\r\n {{ overline }}\r\n }\r\n <ng-content select=\"[iusListCardOverline]\" />\r\n </span>\r\n }\r\n @if (hasTitleRow) {\r\n <span class=\"ius-listcard__titlerow\">\r\n @if (titleIcon) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ titleIcon }}</span>\r\n }\r\n @if (title != null || titleRefPresent) {\r\n <span class=\"ius-listcard__title\">{{ title }}<ng-content select=\"[iusListCardTitle]\" /></span>\r\n }\r\n @if (tags.length) {\r\n <span class=\"ius-listcard__tags\">\r\n @for (t of tags; track t.key ?? $index) {\r\n <ius-tag\r\n size=\"small\"\r\n role=\"status\"\r\n [tone]=\"t.tone ?? 'neutral'\"\r\n [variant]=\"t.variant\"\r\n [icon]=\"t.icon\"\r\n [dot]=\"t.dot\"\r\n [label]=\"t.label\"\r\n />\r\n }\r\n </span>\r\n }\r\n </span>\r\n }\r\n @if (hasSubtitle) {\r\n <span class=\"ius-listcard__subtitle\">\r\n @if (subtitleIcon) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ subtitleIcon }}</span>\r\n }\r\n @if (subtitle != null) {\r\n {{ subtitle }}\r\n }\r\n <ng-content select=\"[iusListCardSubtitle]\" />\r\n </span>\r\n }\r\n @if (hasParagraph) {\r\n <span class=\"ius-listcard__paragraph\">\r\n @if (paragraph != null) {\r\n {{ paragraph }}\r\n }\r\n <ng-content select=\"[iusListCardParagraph]\" />\r\n </span>\r\n }\r\n </span>\r\n\r\n <!-- divisor a lo ancho, insertado antes de la primera columna que hizo wrap -->\r\n @if (fields.length && wrapped()) {\r\n <span class=\"ius-listcard__bodydiv\" aria-hidden=\"true\"></span>\r\n }\r\n @if (fields.length) {\r\n <span class=\"ius-listcard__fields\">\r\n @for (f of fields; track f.key ?? $index) {\r\n <span\r\n class=\"ius-listcard__field\"\r\n [class.ius-listcard__hideonhover]=\"f.hideOnHover\"\r\n [attr.data-emphasis]=\"f.emphasis ? 'true' : null\"\r\n [attr.data-align]=\"f.align || null\"\r\n [style.width]=\"fieldWidth(f)\"\r\n >\r\n @if (f.label) {\r\n <span class=\"ius-listcard__flabel\">{{ f.label }}</span>\r\n }\r\n <span class=\"ius-listcard__fvalue\">\r\n @if (f.icon) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ f.icon }}</span>\r\n }\r\n <span>{{ f.value }}</span>\r\n </span>\r\n </span>\r\n }\r\n </span>\r\n }\r\n</span>\r\n\r\n<!-- zona final: estado \u00B7 markers \u00B7 acciones(+\u22EE) \u00B7 chevron -->\r\n@if (hasTrail) {\r\n <span class=\"ius-listcard__trail\">\r\n @if (status) {\r\n <!-- estado \u2014 delega en StatusChip (\u00E1tomo de estado del sistema) -->\r\n <span class=\"ius-listcard__status\" [class.ius-listcard__hideonhover]=\"status.hideOnHover\">\r\n <ius-status-chip\r\n [vocab]=\"status.vocab ?? 'actuacion'\"\r\n [status]=\"status.status\"\r\n [tone]=\"status.tone\"\r\n [label]=\"status.label\"\r\n [icon]=\"status.icon\"\r\n [customMap]=\"status.customMap\"\r\n [size]=\"statusChipSize\"\r\n />\r\n </span>\r\n }\r\n @if (markers.length) {\r\n <span class=\"ius-listcard__markers\">\r\n @for (m of markers; track m.key ?? $index) {\r\n <ius-icon-button\r\n [icon]=\"m.icon\"\r\n [variant]=\"m.variant || 'tertiary'\"\r\n shape=\"squared\"\r\n size=\"small\"\r\n [tooltip]=\"m.tooltip || m.label\"\r\n [ariaLabel]=\"m.ariaLabel || m.label || m.icon\"\r\n (clicked)=\"onMarker(m, $event)\"\r\n />\r\n }\r\n </span>\r\n }\r\n @if (actions.length || menu.length) {\r\n <span class=\"ius-listcard__actions\">\r\n @for (a of actions; track a.key ?? $index) {\r\n @if (renderAction) {\r\n <ng-container *ngTemplateOutlet=\"renderAction; context: { $implicit: a, index: $index }\" />\r\n } @else {\r\n <ius-icon-button\r\n [icon]=\"a.icon\"\r\n variant=\"tertiary\"\r\n shape=\"squared\"\r\n size=\"small\"\r\n [tooltip]=\"a.tooltip || a.label\"\r\n [ariaLabel]=\"a.ariaLabel || a.label || a.icon\"\r\n (clicked)=\"onAction(a, $event)\"\r\n />\r\n }\r\n }\r\n @if (menu.length) {\r\n <!-- \u22EE overflow: compone ius-dropdown. El span detiene la propagaci\u00F3n:\r\n abrir el men\u00FA o elegir un \u00EDtem no navega la fila. -->\r\n <span class=\"ius-listcard__menu\" (click)=\"$event.stopPropagation()\">\r\n <ius-dropdown\r\n [items]=\"menu\"\r\n placement=\"bottom-end\"\r\n ariaLabel=\"M\u00E1s opciones\"\r\n (openChange)=\"onMenuOpenChange($event)\"\r\n >\r\n <ius-icon-button\r\n iusDropdownTrigger\r\n icon=\"more_vert\"\r\n variant=\"tertiary\"\r\n shape=\"squared\"\r\n size=\"small\"\r\n tooltip=\"M\u00E1s opciones\"\r\n ariaLabel=\"M\u00E1s opciones\"\r\n />\r\n </ius-dropdown>\r\n </span>\r\n }\r\n </span>\r\n }\r\n @if (showChevron) {\r\n <span class=\"ius-listcard__chevron\"><span translate=\"no\" class=\"ius-icon\">chevron_right</span></span>\r\n }\r\n </span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_lc-py: 14px;--_lc-px: 16px;--_lc-gap: var(--ius-space-md);--_lc-title-fs: var(--ius-fs-lg);--_lc-fieldgap: 28px;position:relative;box-sizing:border-box;display:flex;align-items:center;gap:var(--_lc-gap);width:100%;padding:var(--_lc-py) var(--_lc-px);background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);font-family:var(--ius-font-body);text-align:left;transition:border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-clickable=true]){cursor:pointer}:host([data-size=small]){--_lc-py: 10px;--_lc-px: 14px;--_lc-gap: var(--ius-space-sm);--_lc-title-fs: var(--ius-fs-base);--_lc-fieldgap: 22px}:host([data-size=large]){--_lc-py: 18px;--_lc-px: 20px;--_lc-gap: var(--ius-space-md);--_lc-title-fs: var(--ius-fs-h5);--_lc-fieldgap: 34px}@container style(--ius-density: small){:host(:not([data-size])){--_lc-py: 10px;--_lc-px: 14px;--_lc-gap: var(--ius-space-sm);--_lc-title-fs: var(--ius-fs-base);--_lc-fieldgap: 22px}}@container style(--ius-density: large){:host(:not([data-size])){--_lc-py: 18px;--_lc-px: 20px;--_lc-gap: var(--ius-space-md);--_lc-title-fs: var(--ius-fs-h5);--_lc-fieldgap: 34px}}:host([data-clickable=true]:hover){border-color:var(--ius-stroke-strong, var(--ius-neutral-4));box-shadow:var(--ius-elevation-100)}:host(:focus-visible){outline:none;box-shadow:var(--ius-focus-ring)}.ius-listcard__lead{flex:0 0 auto;display:inline-flex;align-items:center}.ius-listcard__body{flex:1 1 auto;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:var(--ius-space-xs) var(--_lc-fieldgap)}.ius-listcard__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs);margin-inline-end:var(--ius-space-sm, 8px)}.ius-listcard__overline{display:flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);letter-spacing:var(--ius-ls-emphasis);text-transform:uppercase;color:var(--ius-text-tertiary);overflow:hidden;white-space:nowrap}.ius-listcard__overline .ius-icon{font-size:var(--ius-icon-sm);flex:0 0 auto}.ius-listcard__titlerow{display:flex;align-items:center;gap:var(--ius-space-xs);flex-wrap:wrap;min-width:0}.ius-listcard__titlerow>.ius-icon{font-size:var(--ius-icon-md);flex:0 0 auto;color:var(--ius-text-secondary)}.ius-listcard__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--_lc-title-fs);line-height:1.25;color:var(--ius-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.ius-listcard__tags{display:flex;align-items:center;gap:var(--ius-space-xs);flex-wrap:wrap}.ius-listcard__titlerow .ius-listcard__tags{margin-left:auto}.ius-listcard__subtitle{display:flex;align-items:flex-start;gap:var(--ius-space-xs);font:var(--ius-fw-regular, 400) var(--ius-fs-sm)/1.35 var(--ius-font-body);color:var(--ius-text-secondary);text-wrap:pretty}.ius-listcard__subtitle>.ius-icon{font-size:var(--ius-icon-sm);flex:0 0 auto;color:var(--ius-text-tertiary);margin-top:1px}.ius-listcard__subtitle ::ng-deep b{color:var(--ius-text-primary);font-weight:var(--ius-fw-semibold)}.ius-listcard__paragraph{margin-top:var(--ius-space-xxs);font:var(--ius-fw-regular, 400) var(--ius-fs-sm)/1.45 var(--ius-font-body);color:var(--ius-text-secondary);text-wrap:pretty;overflow-wrap:anywhere}.ius-listcard__paragraph ::ng-deep b{color:var(--ius-text-primary);font-weight:var(--ius-fw-semibold)}.ius-listcard__fields{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ius-space-xs) var(--_lc-fieldgap);flex:0 0 auto;max-width:100%;min-width:0}.ius-listcard__field{display:flex;flex-direction:column;gap:var(--ius-space-xxs);flex:0 0 auto;min-width:0}.ius-listcard__field[data-align=end]{text-align:right}.ius-listcard__field:nth-child(1){width:var(--_lc-col-1, auto)}.ius-listcard__field:nth-child(2){width:var(--_lc-col-2, auto)}.ius-listcard__field:nth-child(3){width:var(--_lc-col-3, auto)}.ius-listcard__field:nth-child(4){width:var(--_lc-col-4, auto)}.ius-listcard__field:nth-child(5){width:var(--_lc-col-5, auto)}.ius-listcard__field:nth-child(6){width:var(--_lc-col-6, auto)}.ius-listcard__flabel{font:var(--ius-fw-regular, 400) var(--ius-fs-sm)/1.3 var(--ius-font-body);color:var(--ius-text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-listcard__fvalue{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font:var(--ius-fw-regular, 400) var(--ius-fs-base)/1.3 var(--ius-font-body);color:var(--ius-text-secondary);overflow:hidden;white-space:nowrap;font-variant-numeric:tabular-nums}.ius-listcard__fvalue>.ius-icon{font-size:var(--ius-icon-sm);flex:0 0 auto;color:var(--ius-text-tertiary)}.ius-listcard__fvalue>span{overflow:hidden;text-overflow:ellipsis}.ius-listcard__field[data-emphasis=true] .ius-listcard__fvalue{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--_lc-title-fs);color:var(--ius-text-primary)}.ius-listcard__bodydiv{flex:0 0 100%;height:0;border-top:1px solid var(--ius-stroke);margin:var(--ius-space-xxs) 0}.ius-listcard__trail{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-sm);margin-left:auto}.ius-listcard__status{display:inline-flex;align-items:center;white-space:nowrap}.ius-listcard__markers{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);flex:0 0 auto}.ius-listcard__actions{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);visibility:hidden}:host([data-clickable=true]:hover) .ius-listcard__actions,:host(:hover) .ius-listcard__actions,:host(:has(:focus-visible)) .ius-listcard__actions{visibility:visible}:host(:hover) .ius-listcard__hideonhover,:host(:has(:focus-visible)) .ius-listcard__hideonhover{display:none}.ius-listcard__menu{display:inline-flex}:host([data-menu-open=true]) .ius-listcard__actions{visibility:visible}:host([data-menu-open=true]) .ius-listcard__hideonhover{display:none}.ius-listcard__chevron{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;color:var(--ius-text-tertiary)}.ius-listcard__chevron .ius-icon{font-size:var(--ius-icon-lg)}:host([data-clickable=true]:hover) .ius-listcard__chevron{color:var(--ius-text-secondary)}:host:before{content:\"\";width:7px;height:7px;border-radius:var(--ius-radius-pill);background:transparent;flex:0 0 auto;align-self:center;margin-inline-end:var(--ius-space-xs)}:host([data-unread=true]):before{background:var(--ius-primary-900)}:host([data-unread=true]) .ius-listcard__title{font-weight:var(--ius-fw-bold, 700)}\n"] }]
|
|
5703
|
+
}, template: "<!-- Leading \u2014 t\u00EDpicamente <ius-avatar iusListCardLeading>. -->\n@if (hasLeading) {\n <span class=\"ius-listcard__lead\"><ng-content select=\"[iusListCardLeading]\" /></span>\n}\n\n<!-- body agrupa main + fields lado a lado; con poco espacio, fields cae a la 2\u00AA l\u00EDnea -->\n<span class=\"ius-listcard__body\">\n <span class=\"ius-listcard__main\">\n @if (hasOverline) {\n <span class=\"ius-listcard__overline\">\n @if (overlineIcon) {\n <span translate=\"no\" class=\"ius-icon\">{{ overlineIcon }}</span>\n }\n @if (overline != null) {\n {{ overline }}\n }\n <ng-content select=\"[iusListCardOverline]\" />\n </span>\n }\n @if (hasTitleRow) {\n <span class=\"ius-listcard__titlerow\">\n @if (titleIcon) {\n <span translate=\"no\" class=\"ius-icon\">{{ titleIcon }}</span>\n }\n @if (title != null || titleRefPresent) {\n <span class=\"ius-listcard__title\">{{ title }}<ng-content select=\"[iusListCardTitle]\" /></span>\n }\n @if (tags.length) {\n <span class=\"ius-listcard__tags\">\n @for (t of tags; track t.key ?? $index) {\n <ius-tag\n size=\"small\"\n role=\"status\"\n [tone]=\"t.tone ?? 'neutral'\"\n [variant]=\"t.variant\"\n [icon]=\"t.icon\"\n [dot]=\"t.dot\"\n [label]=\"t.label\"\n />\n }\n </span>\n }\n </span>\n }\n @if (hasSubtitle) {\n <span class=\"ius-listcard__subtitle\">\n @if (subtitleIcon) {\n <span translate=\"no\" class=\"ius-icon\">{{ subtitleIcon }}</span>\n }\n @if (subtitle != null) {\n {{ subtitle }}\n }\n <ng-content select=\"[iusListCardSubtitle]\" />\n </span>\n }\n @if (hasParagraph) {\n <span class=\"ius-listcard__paragraph\">\n @if (paragraph != null) {\n {{ paragraph }}\n }\n <ng-content select=\"[iusListCardParagraph]\" />\n </span>\n }\n </span>\n\n <!-- divisor a lo ancho, insertado antes de la primera columna que hizo wrap -->\n @if (fields.length && wrapped()) {\n <span class=\"ius-listcard__bodydiv\" aria-hidden=\"true\"></span>\n }\n @if (fields.length) {\n <span class=\"ius-listcard__fields\">\n @for (f of fields; track f.key ?? $index) {\n <span\n class=\"ius-listcard__field\"\n [class.ius-listcard__hideonhover]=\"f.hideOnHover\"\n [attr.data-emphasis]=\"f.emphasis ? 'true' : null\"\n [attr.data-align]=\"f.align || null\"\n [style.width]=\"fieldWidth(f)\"\n >\n @if (f.label) {\n <span class=\"ius-listcard__flabel\">{{ f.label }}</span>\n }\n <span class=\"ius-listcard__fvalue\">\n @if (f.icon) {\n <span translate=\"no\" class=\"ius-icon\">{{ f.icon }}</span>\n }\n @if (fieldTpl(f); as tpl) {\n <ng-container [ngTemplateOutlet]=\"tpl\"></ng-container>\n } @else {\n <span>{{ f.value }}</span>\n }\n </span>\n </span>\n }\n </span>\n }\n</span>\n\n<!-- zona final: estado \u00B7 markers \u00B7 acciones(+\u22EE) \u00B7 chevron -->\n@if (hasTrail) {\n <span class=\"ius-listcard__trail\">\n @if (status) {\n <!-- estado \u2014 delega en StatusChip (\u00E1tomo de estado del sistema) -->\n <span class=\"ius-listcard__status\" [class.ius-listcard__hideonhover]=\"status.hideOnHover\">\n <ius-status-chip\n [vocab]=\"status.vocab ?? 'actuacion'\"\n [status]=\"status.status\"\n [tone]=\"status.tone\"\n [label]=\"status.label\"\n [icon]=\"status.icon\"\n [customMap]=\"status.customMap\"\n [size]=\"statusChipSize\"\n />\n </span>\n }\n @if (markers.length) {\n <span class=\"ius-listcard__markers\">\n @for (m of markers; track m.key ?? $index) {\n <ius-icon-button\n [icon]=\"m.icon\"\n [variant]=\"m.variant || 'tertiary'\"\n shape=\"squared\"\n size=\"small\"\n [tooltip]=\"m.tooltip || m.label\"\n [ariaLabel]=\"m.ariaLabel || m.label || m.icon\"\n (clicked)=\"onMarker(m, $event)\"\n />\n }\n </span>\n }\n @if (actions.length || menu.length) {\n <span class=\"ius-listcard__actions\">\n @for (a of actions; track a.key ?? $index) {\n @if (renderAction) {\n <ng-container *ngTemplateOutlet=\"renderAction; context: { $implicit: a, index: $index }\" />\n } @else {\n <ius-icon-button\n [icon]=\"a.icon\"\n variant=\"tertiary\"\n shape=\"squared\"\n size=\"small\"\n [tooltip]=\"a.tooltip || a.label\"\n [ariaLabel]=\"a.ariaLabel || a.label || a.icon\"\n (clicked)=\"onAction(a, $event)\"\n />\n }\n }\n @if (menu.length) {\n <!-- \u22EE overflow: compone ius-dropdown. El span detiene la propagaci\u00F3n:\n abrir el men\u00FA o elegir un \u00EDtem no navega la fila. -->\n <span class=\"ius-listcard__menu\" (click)=\"$event.stopPropagation()\">\n <ius-dropdown\n [items]=\"menu\"\n placement=\"bottom-end\"\n ariaLabel=\"M\u00E1s opciones\"\n (openChange)=\"onMenuOpenChange($event)\"\n >\n <ius-icon-button\n iusDropdownTrigger\n icon=\"more_vert\"\n variant=\"tertiary\"\n shape=\"squared\"\n size=\"small\"\n tooltip=\"M\u00E1s opciones\"\n ariaLabel=\"M\u00E1s opciones\"\n />\n </ius-dropdown>\n </span>\n }\n </span>\n }\n @if (showChevron) {\n <span class=\"ius-listcard__chevron\"><span translate=\"no\" class=\"ius-icon\">chevron_right</span></span>\n }\n </span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_lc-py: 14px;--_lc-px: 16px;--_lc-gap: var(--ius-space-md);--_lc-title-fs: var(--ius-fs-lg);--_lc-fieldgap: 28px;position:relative;box-sizing:border-box;display:flex;align-items:center;gap:var(--_lc-gap);width:100%;padding:var(--_lc-py) var(--_lc-px);background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);font-family:var(--ius-font-body);text-align:left;transition:border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-clickable=true]){cursor:pointer}:host([data-size=small]){--_lc-py: 10px;--_lc-px: 14px;--_lc-gap: var(--ius-space-sm);--_lc-title-fs: var(--ius-fs-base);--_lc-fieldgap: 22px}:host([data-size=large]){--_lc-py: 18px;--_lc-px: 20px;--_lc-gap: var(--ius-space-md);--_lc-title-fs: var(--ius-fs-h5);--_lc-fieldgap: 34px}@container style(--ius-density: small){:host(:not([data-size])){--_lc-py: 10px;--_lc-px: 14px;--_lc-gap: var(--ius-space-sm);--_lc-title-fs: var(--ius-fs-base);--_lc-fieldgap: 22px}}@container style(--ius-density: large){:host(:not([data-size])){--_lc-py: 18px;--_lc-px: 20px;--_lc-gap: var(--ius-space-md);--_lc-title-fs: var(--ius-fs-h5);--_lc-fieldgap: 34px}}:host([data-clickable=true]:hover){border-color:var(--ius-stroke-strong, var(--ius-neutral-4));box-shadow:var(--ius-elevation-100)}:host(:focus-visible){outline:none;box-shadow:var(--ius-focus-ring)}.ius-listcard__lead{flex:0 0 auto;display:inline-flex;align-items:center}.ius-listcard__body{flex:1 1 auto;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:var(--ius-space-xs) var(--_lc-fieldgap)}.ius-listcard__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs);margin-inline-end:var(--ius-space-sm, 8px)}.ius-listcard__overline{display:flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);letter-spacing:var(--ius-ls-emphasis);text-transform:uppercase;color:var(--ius-text-tertiary);overflow:hidden;white-space:nowrap}.ius-listcard__overline .ius-icon{font-size:var(--ius-icon-sm);flex:0 0 auto}.ius-listcard__titlerow{display:flex;align-items:center;gap:var(--ius-space-xs);flex-wrap:wrap;min-width:0}.ius-listcard__titlerow>.ius-icon{font-size:var(--ius-icon-md);flex:0 0 auto;color:var(--ius-text-secondary)}.ius-listcard__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--_lc-title-fs);line-height:1.25;color:var(--ius-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.ius-listcard__tags{display:flex;align-items:center;gap:var(--ius-space-xs);flex-wrap:wrap}.ius-listcard__titlerow .ius-listcard__tags{margin-left:auto}.ius-listcard__subtitle{display:flex;align-items:flex-start;gap:var(--ius-space-xs);font:var(--ius-fw-regular, 400) var(--ius-fs-sm)/1.35 var(--ius-font-body);color:var(--ius-text-secondary);text-wrap:pretty}.ius-listcard__subtitle>.ius-icon{font-size:var(--ius-icon-sm);flex:0 0 auto;color:var(--ius-text-tertiary);margin-top:1px}.ius-listcard__subtitle ::ng-deep b{color:var(--ius-text-primary);font-weight:var(--ius-fw-semibold)}.ius-listcard__paragraph{margin-top:var(--ius-space-xxs);font:var(--ius-fw-regular, 400) var(--ius-fs-sm)/1.45 var(--ius-font-body);color:var(--ius-text-secondary);text-wrap:pretty;overflow-wrap:anywhere}.ius-listcard__paragraph ::ng-deep b{color:var(--ius-text-primary);font-weight:var(--ius-fw-semibold)}.ius-listcard__fields{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ius-space-xs) var(--_lc-fieldgap);flex:0 0 auto;max-width:100%;min-width:0}.ius-listcard__field{display:flex;flex-direction:column;gap:var(--ius-space-xxs);flex:0 0 auto;min-width:0}.ius-listcard__field[data-align=end]{text-align:right}.ius-listcard__field:nth-child(1){width:var(--_lc-col-1, auto)}.ius-listcard__field:nth-child(2){width:var(--_lc-col-2, auto)}.ius-listcard__field:nth-child(3){width:var(--_lc-col-3, auto)}.ius-listcard__field:nth-child(4){width:var(--_lc-col-4, auto)}.ius-listcard__field:nth-child(5){width:var(--_lc-col-5, auto)}.ius-listcard__field:nth-child(6){width:var(--_lc-col-6, auto)}.ius-listcard__flabel{font:var(--ius-fw-regular, 400) var(--ius-fs-sm)/1.3 var(--ius-font-body);color:var(--ius-text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-listcard__fvalue{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font:var(--ius-fw-regular, 400) var(--ius-fs-base)/1.3 var(--ius-font-body);color:var(--ius-text-secondary);overflow:hidden;white-space:nowrap;font-variant-numeric:tabular-nums}.ius-listcard__fvalue>.ius-icon{font-size:var(--ius-icon-sm);flex:0 0 auto;color:var(--ius-text-tertiary)}.ius-listcard__fvalue>span{overflow:hidden;text-overflow:ellipsis}.ius-listcard__field[data-emphasis=true] .ius-listcard__fvalue{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--_lc-title-fs);color:var(--ius-text-primary)}.ius-listcard__bodydiv{flex:0 0 100%;height:0;border-top:1px solid var(--ius-stroke);margin:var(--ius-space-xxs) 0}.ius-listcard__trail{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-sm);margin-left:auto}.ius-listcard__status{display:inline-flex;align-items:center;white-space:nowrap}.ius-listcard__markers{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);flex:0 0 auto}.ius-listcard__actions{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);visibility:hidden}:host([data-clickable=true]:hover) .ius-listcard__actions,:host(:hover) .ius-listcard__actions,:host(:has(:focus-visible)) .ius-listcard__actions{visibility:visible}:host(:hover) .ius-listcard__hideonhover,:host(:has(:focus-visible)) .ius-listcard__hideonhover{display:none}.ius-listcard__menu{display:inline-flex}:host([data-menu-open=true]) .ius-listcard__actions{visibility:visible}:host([data-menu-open=true]) .ius-listcard__hideonhover{display:none}.ius-listcard__chevron{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;color:var(--ius-text-tertiary)}.ius-listcard__chevron .ius-icon{font-size:var(--ius-icon-lg)}:host([data-clickable=true]:hover) .ius-listcard__chevron{color:var(--ius-text-secondary)}:host:before{content:\"\";width:7px;height:7px;border-radius:var(--ius-radius-pill);background:transparent;flex:0 0 auto;align-self:center;margin-inline-end:var(--ius-space-xs)}:host([data-unread=true]):before{background:var(--ius-primary-900)}:host([data-unread=true]) .ius-listcard__title{font-weight:var(--ius-fw-bold, 700)}\n"] }]
|
|
5698
5704
|
}], propDecorators: { overline: [{
|
|
5699
5705
|
type: Input
|
|
5700
5706
|
}], overlineIcon: [{
|
|
@@ -10589,7 +10595,7 @@ class QueryBuilderComponent {
|
|
|
10589
10595
|
this.isOpen.set(false);
|
|
10590
10596
|
}
|
|
10591
10597
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: QueryBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10592
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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", "type", "size", "disabled"], outputs: ["valueChange", "cleared"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "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 }); }
|
|
10598
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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", "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 }); }
|
|
10593
10599
|
}
|
|
10594
10600
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: QueryBuilderComponent, decorators: [{
|
|
10595
10601
|
type: Component,
|
|
@@ -12099,6 +12105,189 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
12099
12105
|
}, template: "@for (item of items(); track idOf(item, $index); let i = $index) {\r\n <div\r\n class=\"ius-acc__item\"\r\n [attr.data-open]=\"isOpen(item, i) ? 'true' : null\"\r\n [attr.data-disabled]=\"item.disabled ? 'true' : null\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"ius-acc__header\"\r\n [id]=\"headerId(i)\"\r\n [attr.aria-expanded]=\"isOpen(item, i)\"\r\n [attr.aria-controls]=\"panelId(i)\"\r\n [disabled]=\"!!item.disabled\"\r\n (click)=\"toggle(item, i)\"\r\n >\r\n @if (item.icon) {\r\n <span class=\"ius-acc__lead\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ item.icon }}</span>\r\n </span>\r\n }\r\n\r\n <span class=\"ius-acc__title\">{{ item.title }}</span>\r\n\r\n <span class=\"ius-acc__chev\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ chevronIcon() }}</span>\r\n </span>\r\n </button>\r\n\r\n <!-- El panel se queda SIEMPRE en el DOM: la altura la anima\r\n `grid-template-rows` de 0fr a 1fr. Cerrado va `inert` para que su\r\n contenido no quede en el orden de tabulaci\u00F3n (ver nota en el .ts). -->\r\n <div\r\n class=\"ius-acc__panel\"\r\n role=\"region\"\r\n [id]=\"panelId(i)\"\r\n [attr.aria-labelledby]=\"headerId(i)\"\r\n [attr.inert]=\"isOpen(item, i) ? null : ''\"\r\n >\r\n <div class=\"ius-acc__panel-inner\">\r\n <div class=\"ius-acc__content\">\r\n @if (item.content) {\r\n <ng-container [ngTemplateOutlet]=\"item.content\" />\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;font-family:var(--ius-font-body);width:100%}.ius-acc__item{display:flex;flex-direction:column}:host([data-variant=divided]) .ius-acc__item{border-top:1px solid var(--ius-stroke)}:host([data-variant=divided]) .ius-acc__item:first-child{border-top:0}:host([data-variant=contained]){gap:var(--ius-space-xs)}:host([data-variant=contained]) .ius-acc__item{border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);background:var(--ius-surface-card);overflow:hidden}.ius-acc__header{appearance:none;border:0;background:transparent;width:100%;display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-md) var(--ius-space-xxs);font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg);color:var(--ius-text-primary);text-align:left;cursor:pointer;transition:color var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-variant=contained]) .ius-acc__header{padding:var(--ius-space-md) var(--ius-space-md)}.ius-acc__header:hover{color:var(--ius-primary-500)}.ius-acc__header:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);border-radius:var(--ius-radius-sm)}.ius-acc__lead{display:inline-flex;align-items:center;color:var(--ius-text-tertiary);flex:0 0 auto}.ius-acc__lead .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-acc__header:hover .ius-acc__lead{color:var(--ius-primary-500)}.ius-acc__title{flex:1 1 auto;min-width:0}.ius-acc__chev{display:inline-flex;align-items:center;color:var(--ius-text-tertiary);flex:0 0 auto;transition:transform var(--ius-duration-base) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-acc__chev .ius-icon{font-size:var(--ius-icon-lg);line-height:1}.ius-acc__item[data-open=true] .ius-acc__chev{transform:rotate(180deg)}.ius-acc__header:hover .ius-acc__chev{color:var(--ius-primary-500)}.ius-acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--ius-duration-base) var(--ius-ease-standard)}.ius-acc__item[data-open=true] .ius-acc__panel{grid-template-rows:1fr}@media(prefers-reduced-motion:reduce){.ius-acc__panel{transition:none}}.ius-acc__panel-inner{overflow:hidden}.ius-acc__content{padding:var(--ius-space-xxs) var(--ius-space-xxs) var(--ius-space-md)}:host([data-variant=contained]) .ius-acc__content{padding:0 var(--ius-space-md) var(--ius-space-md)}.ius-acc__item[data-disabled=true] .ius-acc__header{color:var(--ius-text-disabled);cursor:not-allowed}.ius-acc__item[data-disabled=true] .ius-acc__lead,.ius-acc__item[data-disabled=true] .ius-acc__chev,.ius-acc__item[data-disabled=true] .ius-acc__header:hover,.ius-acc__item[data-disabled=true] .ius-acc__header:hover .ius-acc__lead,.ius-acc__item[data-disabled=true] .ius-acc__header:hover .ius-acc__chev{color:var(--ius-text-disabled)}\n"] }]
|
|
12100
12106
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], chevronIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "chevronIcon", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }] } });
|
|
12101
12107
|
|
|
12108
|
+
/** Nombre rico proyectado (alternativa al input `name`). */
|
|
12109
|
+
class IusAccountItemNameDirective {
|
|
12110
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: IusAccountItemNameDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
12111
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: IusAccountItemNameDirective, isStandalone: true, selector: "[iusAccountItemName]", ngImport: i0 }); }
|
|
12112
|
+
}
|
|
12113
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: IusAccountItemNameDirective, decorators: [{
|
|
12114
|
+
type: Directive,
|
|
12115
|
+
args: [{ selector: '[iusAccountItemName]', standalone: true }]
|
|
12116
|
+
}] });
|
|
12117
|
+
/** Subtítulo rico proyectado (alternativa al input `subtitle`). */
|
|
12118
|
+
class IusAccountItemSubtitleDirective {
|
|
12119
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: IusAccountItemSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
12120
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: IusAccountItemSubtitleDirective, isStandalone: true, selector: "[iusAccountItemSubtitle]", ngImport: i0 }); }
|
|
12121
|
+
}
|
|
12122
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: IusAccountItemSubtitleDirective, decorators: [{
|
|
12123
|
+
type: Directive,
|
|
12124
|
+
args: [{ selector: '[iusAccountItemSubtitle]', standalone: true }]
|
|
12125
|
+
}] });
|
|
12126
|
+
/** Nodo libre al borde derecho (Tag, contador, chip de estado). */
|
|
12127
|
+
class IusAccountItemTrailingDirective {
|
|
12128
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: IusAccountItemTrailingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
12129
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: IusAccountItemTrailingDirective, isStandalone: true, selector: "[iusAccountItemTrailing]", ngImport: i0 }); }
|
|
12130
|
+
}
|
|
12131
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: IusAccountItemTrailingDirective, decorators: [{
|
|
12132
|
+
type: Directive,
|
|
12133
|
+
args: [{ selector: '[iusAccountItemTrailing]', standalone: true }]
|
|
12134
|
+
}] });
|
|
12135
|
+
/**
|
|
12136
|
+
* AccountItem — Ius Design v2 (familia data-display).
|
|
12137
|
+
*
|
|
12138
|
+
* Fila-tarjeta de una **cuenta a la que el usuario puede cambiar**: la unidad de
|
|
12139
|
+
* la vista «Cambiar de cuenta» del UserMenu. Avatar de la cuenta + nombre (+
|
|
12140
|
+
* subtítulo opcional: tipo, rol o dominio), seleccionable, con la cuenta activa
|
|
12141
|
+
* marcada con un check. Fuente de verdad: `AccountItem.jsx` +
|
|
12142
|
+
* `AccountItem.d.ts` + `AccountItem.ng-spec.md`.
|
|
12143
|
+
*
|
|
12144
|
+
* La superficie la pone **`ius-card`** (`outlined · radius lg · padding none`),
|
|
12145
|
+
* como manda la ng-spec: no se reescribe a mano. AccountItem solo aporta el
|
|
12146
|
+
* layout de la fila y sus **estados tintados info** (hover / pressed /
|
|
12147
|
+
* selected), que pisan la elevación por defecto de Card.
|
|
12148
|
+
*
|
|
12149
|
+
* `actions` compone `ius-dropdown` (trigger IconButton `more_vert` proyectado)
|
|
12150
|
+
* en un slot de **ancho fijo** (`--_ai-actions-w`), para que todas las listas de
|
|
12151
|
+
* cuentas del ecosistema queden alineadas. `[iusAccountItemTrailing]` acepta un
|
|
12152
|
+
* nodo libre en el mismo borde y convive con `actions`. Con `disabled` las
|
|
12153
|
+
* acciones quedan **visibles pero inertes** (la fila pierde `pointer-events`),
|
|
12154
|
+
* regla única del sistema.
|
|
12155
|
+
*
|
|
12156
|
+
* **Nota de port — el `split` del golden.** El golden alterna su DOM según el
|
|
12157
|
+
* contenido: sin `actions`/`trailing` la raíz **es** el `<button>` de `onClick`;
|
|
12158
|
+
* con ellos la raíz pasa a `div` y el área primaria se vuelve un botón interno
|
|
12159
|
+
* (anidar un IconButton dentro de un `<button>` es HTML inválido y rompe el
|
|
12160
|
+
* teclado). Aquí se adopta **siempre** la segunda forma — la raíz es
|
|
12161
|
+
* `<ius-card>` (div) y el área primaria es un `<button>` interno:
|
|
12162
|
+
*
|
|
12163
|
+
* - En Angular alternar la etiqueta raíz exige un `@if`/`@else`, y el contenido
|
|
12164
|
+
* proyectado (`[iusAccountItemName]`, `[iusAccountItemSubtitle]`) solo se
|
|
12165
|
+
* instancia en UNA rama: al cambiar `actions`/`trailing` en caliente —lo que
|
|
12166
|
+
* hace el playground— la proyección se perdería.
|
|
12167
|
+
* - El resultado accesible es el mismo que el del golden: un único botón real
|
|
12168
|
+
* que cubre la fila, con su `aria-label` y su `aria-pressed`, y el ⋮ como
|
|
12169
|
+
* control hermano alcanzable por teclado aparte. Nunca hay control anidado
|
|
12170
|
+
* en control, ni en el caso simple.
|
|
12171
|
+
* - Visualmente es idéntico: los estados se pintan sobre TODA la fila desde la
|
|
12172
|
+
* raíz (`data-actionable` + `:has(.ius-acctitem__main:active/:focus-visible)`),
|
|
12173
|
+
* que es exactamente lo que hace la rama `split` del golden.
|
|
12174
|
+
*
|
|
12175
|
+
* Para fila de acción/navegación → MenuItem; control de cuenta del HeaderBar →
|
|
12176
|
+
* NavUser. Primera carga → envolver en Skeleton (AccountItem no lleva
|
|
12177
|
+
* `loading` propio).
|
|
12178
|
+
*/
|
|
12179
|
+
class AccountItemComponent {
|
|
12180
|
+
constructor() {
|
|
12181
|
+
/** Familia de color del medallón; `auto` es estable por nombre. */
|
|
12182
|
+
this.color = 'auto';
|
|
12183
|
+
/** Forma del medallón. */
|
|
12184
|
+
this.shape = 'circle';
|
|
12185
|
+
/** Cuenta activa: fondo resaltado + check. */
|
|
12186
|
+
this.selected = false;
|
|
12187
|
+
/** Deshabilitada: la fila entera queda inerte (las acciones, visibles). */
|
|
12188
|
+
this.disabled = false;
|
|
12189
|
+
/** Acciones secundarias en el menú ⋮ del borde derecho. */
|
|
12190
|
+
this.actions = [];
|
|
12191
|
+
/** aria del menú de acciones. */
|
|
12192
|
+
this.actionsLabel = 'Más acciones';
|
|
12193
|
+
/** Fila pulsada (original `onClick`). */
|
|
12194
|
+
this.clicked = new EventEmitter();
|
|
12195
|
+
this.nameRef = contentChild(IusAccountItemNameDirective, /* @ts-ignore */
|
|
12196
|
+
...(ngDevMode ? [{ debugName: "nameRef" }] : /* istanbul ignore next */ []));
|
|
12197
|
+
this.subtitleRef = contentChild(IusAccountItemSubtitleDirective, /* @ts-ignore */
|
|
12198
|
+
...(ngDevMode ? [{ debugName: "subtitleRef" }] : /* istanbul ignore next */ []));
|
|
12199
|
+
this.trailingRef = contentChild(IusAccountItemTrailingDirective, /* @ts-ignore */
|
|
12200
|
+
...(ngDevMode ? [{ debugName: "trailingRef" }] : /* istanbul ignore next */ []));
|
|
12201
|
+
}
|
|
12202
|
+
/** Fila viva: hay quien escuche el clic y no está deshabilitada. */
|
|
12203
|
+
get actionable() {
|
|
12204
|
+
return this.clicked.observed && !this.disabled;
|
|
12205
|
+
}
|
|
12206
|
+
get hasSubtitle() {
|
|
12207
|
+
return this.subtitle != null || !!this.subtitleRef();
|
|
12208
|
+
}
|
|
12209
|
+
get hasTrailing() {
|
|
12210
|
+
return !!this.trailingRef();
|
|
12211
|
+
}
|
|
12212
|
+
get showMenu() {
|
|
12213
|
+
return this.actions.length > 0;
|
|
12214
|
+
}
|
|
12215
|
+
/** El monograma explícito gana: entonces el nombre no alimenta las iniciales. */
|
|
12216
|
+
get avatarName() {
|
|
12217
|
+
return this.monogram ? undefined : this.name;
|
|
12218
|
+
}
|
|
12219
|
+
/** Sin foto/monograma/nombre, el medallón cae al ícono genérico de cuenta. */
|
|
12220
|
+
get effIcon() {
|
|
12221
|
+
return this.avatar || this.monogram || this.name
|
|
12222
|
+
? this.icon
|
|
12223
|
+
: this.icon || 'account_circle';
|
|
12224
|
+
}
|
|
12225
|
+
/** `Cuenta <nombre>` como nombre accesible por defecto (verbatim del golden). */
|
|
12226
|
+
get label() {
|
|
12227
|
+
return this.ariaLabel || (this.name ? `Cuenta ${this.name}` : 'Cuenta');
|
|
12228
|
+
}
|
|
12229
|
+
/** El golden solo declara `aria-pressed` cuando la cuenta está activa. */
|
|
12230
|
+
get ariaPressed() {
|
|
12231
|
+
return this.selected ? 'true' : null;
|
|
12232
|
+
}
|
|
12233
|
+
/** aria del IconButton ⋮ — nombra la cuenta cuando la hay. */
|
|
12234
|
+
get menuLabel() {
|
|
12235
|
+
return this.actionsLabel + (this.name ? ` de ${this.name}` : '');
|
|
12236
|
+
}
|
|
12237
|
+
onMainClick(event) {
|
|
12238
|
+
if (this.disabled)
|
|
12239
|
+
return;
|
|
12240
|
+
this.clicked.emit(event);
|
|
12241
|
+
}
|
|
12242
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AccountItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12243
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AccountItemComponent, isStandalone: true, selector: "ius-account-item", inputs: { name: "name", subtitle: "subtitle", avatar: "avatar", icon: "icon", monogram: "monogram", color: "color", shape: "shape", selected: ["selected", "selected", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], actions: "actions", actionsLabel: "actionsLabel", state: "state", ariaLabel: "ariaLabel" }, outputs: { clicked: "clicked" }, host: { properties: { "attr.data-state": "state || null", "attr.data-disabled": "disabled ? 'true' : null", "attr.data-actionable": "actionable ? 'true' : null" }, classAttribute: "ius-acctitem" }, queries: [{ propertyName: "nameRef", first: true, predicate: IusAccountItemNameDirective, descendants: true, isSignal: true }, { propertyName: "subtitleRef", first: true, predicate: IusAccountItemSubtitleDirective, descendants: true, isSignal: true }, { propertyName: "trailingRef", first: true, predicate: IusAccountItemTrailingDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- La superficie la pone ius-card (outlined \u00B7 radius lg \u00B7 padding none), como\r\n manda la ng-spec: no se reescribe a mano. Con `padding=\"none\"` el padding de\r\n la fila lo pone .ius-acctitem__row, que es \u00ABel propio cuerpo\u00BB del que habla\r\n Card (el golden lo escribe sobre .ius-card__body, encapsulado aqu\u00ED).\r\n\r\n La ra\u00EDz NO es navegable: el \u00E1rea primaria es el <button> interno\r\n .ius-acctitem__main, como en la rama `split` del golden \u2014 as\u00ED el \u22EE nunca\r\n queda anidado dentro de otro control. Ver la nota de port del .ts. -->\r\n<ius-card\r\n class=\"ius-acctitem__card\"\r\n variant=\"outlined\"\r\n radius=\"lg\"\r\n padding=\"none\"\r\n [selected]=\"selected\"\r\n>\r\n <div class=\"ius-acctitem__row\">\r\n <button\r\n type=\"button\"\r\n class=\"ius-acctitem__main\"\r\n [attr.aria-label]=\"label\"\r\n [attr.aria-pressed]=\"ariaPressed\"\r\n [disabled]=\"disabled\"\r\n (click)=\"onMainClick($event)\"\r\n >\r\n <ius-avatar\r\n size=\"small\"\r\n [shape]=\"shape\"\r\n [src]=\"avatar\"\r\n [name]=\"avatarName\"\r\n [monogram]=\"monogram\"\r\n [icon]=\"effIcon\"\r\n [color]=\"color\"\r\n [ariaLabel]=\"name\"\r\n />\r\n\r\n <span class=\"ius-acctitem__body\">\r\n <span class=\"ius-acctitem__name\">{{ name }}<ng-content select=\"[iusAccountItemName]\" /></span>\r\n @if (hasSubtitle) {\r\n <span class=\"ius-acctitem__sub\">{{ subtitle }}<ng-content select=\"[iusAccountItemSubtitle]\" /></span>\r\n }\r\n </span>\r\n\r\n @if (selected) {\r\n <span class=\"ius-acctitem__check\"><span translate=\"no\" class=\"ius-icon\">check_circle</span></span>\r\n }\r\n </button>\r\n\r\n @if (hasTrailing) {\r\n <span class=\"ius-acctitem__trailing\"><ng-content select=\"[iusAccountItemTrailing]\" /></span>\r\n }\r\n\r\n @if (showMenu) {\r\n <!-- Slot de ancho fijo (--_ai-actions-w): alinea todas las listas de\r\n cuentas del ecosistema. Compone ius-dropdown; su clic no dispara la\r\n fila (el \u00E1rea primaria es un bot\u00F3n hermano, no un ancestro). -->\r\n <span class=\"ius-acctitem__actions\">\r\n <ius-dropdown [items]=\"actions\" placement=\"bottom-end\" [ariaLabel]=\"actionsLabel\">\r\n <ius-icon-button\r\n iusDropdownTrigger\r\n icon=\"more_vert\"\r\n variant=\"tertiary\"\r\n size=\"small\"\r\n [ariaLabel]=\"menuLabel\"\r\n [disabled]=\"disabled\"\r\n />\r\n </ius-dropdown>\r\n </span>\r\n }\r\n </div>\r\n</ius-card>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-width:0;box-sizing:border-box;-webkit-user-select:none;user-select:none;text-align:left;--_ai-actions-w: 36px}.ius-acctitem__row{display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-sm)}.ius-acctitem__main{appearance:none;background:none;border:0;margin:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer;flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:var(--ius-space-xs)}.ius-acctitem__main:focus-visible{outline:none}:host(:has(.ius-acctitem__main:focus-visible)) .ius-acctitem__card{box-shadow:var(--ius-focus-ring)}:host([data-actionable=true]:hover) .ius-acctitem__card,:host([data-state=hover]) .ius-acctitem__card{box-shadow:none;transform:none;border-color:var(--ius-info-300)}:host([data-actionable=true]:has(.ius-acctitem__main:active)) .ius-acctitem__card,:host([data-state=pressed]) .ius-acctitem__card{box-shadow:none;transform:none;background:var(--ius-info-100);border-color:var(--ius-info-300)}.ius-acctitem__card[data-selected=true]{background:var(--ius-info-100);border-color:var(--ius-info-300);box-shadow:none}:host([data-disabled=true]){cursor:default;opacity:.5;pointer-events:none}.ius-acctitem__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}.ius-acctitem__name{font-size:var(--ius-fs-base);line-height:1.3;font-weight:var(--ius-fw-medium, 500);color:var(--ius-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-acctitem__sub{font-size:var(--ius-fs-sm);line-height:1.3;color:var(--ius-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-acctitem__check{flex:0 0 auto;display:inline-flex;color:var(--ius-primary-900)}.ius-acctitem__check .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-acctitem__trailing{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xxs)}.ius-acctitem__actions{flex:0 0 auto;width:var(--_ai-actions-w);display:inline-flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "ius-avatar", inputs: ["alt", "name", "monogram", "icon", "shape", "size", "color", "editable", "editIcon", "ariaLabel", "src"], outputs: ["edit"] }, { kind: "component", type: CardComponent, selector: "ius-card, a[ius-card], button[ius-card], section[ius-card], article[ius-card]", inputs: ["variant", "padding", "radius", "interactive", "selected", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: DropdownComponent, selector: "ius-dropdown", inputs: ["items", "selectable", "value", "label", "triggerLabel", "triggerIcon", "tone", "variant", "placement", "open", "defaultOpen", "ariaLabel"], outputs: ["valueChange", "openChange"] }, { kind: "directive", type: IusDropdownTriggerDirective, selector: "[iusDropdownTrigger]" }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "tooltipPlacement"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
12244
|
+
}
|
|
12245
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AccountItemComponent, decorators: [{
|
|
12246
|
+
type: Component,
|
|
12247
|
+
args: [{ selector: 'ius-account-item', standalone: true, imports: [
|
|
12248
|
+
AvatarComponent,
|
|
12249
|
+
CardComponent,
|
|
12250
|
+
DropdownComponent,
|
|
12251
|
+
IusDropdownTriggerDirective,
|
|
12252
|
+
IconButtonComponent,
|
|
12253
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
12254
|
+
class: 'ius-acctitem',
|
|
12255
|
+
'[attr.data-state]': 'state || null',
|
|
12256
|
+
'[attr.data-disabled]': "disabled ? 'true' : null",
|
|
12257
|
+
'[attr.data-actionable]': "actionable ? 'true' : null",
|
|
12258
|
+
}, template: "<!-- La superficie la pone ius-card (outlined \u00B7 radius lg \u00B7 padding none), como\r\n manda la ng-spec: no se reescribe a mano. Con `padding=\"none\"` el padding de\r\n la fila lo pone .ius-acctitem__row, que es \u00ABel propio cuerpo\u00BB del que habla\r\n Card (el golden lo escribe sobre .ius-card__body, encapsulado aqu\u00ED).\r\n\r\n La ra\u00EDz NO es navegable: el \u00E1rea primaria es el <button> interno\r\n .ius-acctitem__main, como en la rama `split` del golden \u2014 as\u00ED el \u22EE nunca\r\n queda anidado dentro de otro control. Ver la nota de port del .ts. -->\r\n<ius-card\r\n class=\"ius-acctitem__card\"\r\n variant=\"outlined\"\r\n radius=\"lg\"\r\n padding=\"none\"\r\n [selected]=\"selected\"\r\n>\r\n <div class=\"ius-acctitem__row\">\r\n <button\r\n type=\"button\"\r\n class=\"ius-acctitem__main\"\r\n [attr.aria-label]=\"label\"\r\n [attr.aria-pressed]=\"ariaPressed\"\r\n [disabled]=\"disabled\"\r\n (click)=\"onMainClick($event)\"\r\n >\r\n <ius-avatar\r\n size=\"small\"\r\n [shape]=\"shape\"\r\n [src]=\"avatar\"\r\n [name]=\"avatarName\"\r\n [monogram]=\"monogram\"\r\n [icon]=\"effIcon\"\r\n [color]=\"color\"\r\n [ariaLabel]=\"name\"\r\n />\r\n\r\n <span class=\"ius-acctitem__body\">\r\n <span class=\"ius-acctitem__name\">{{ name }}<ng-content select=\"[iusAccountItemName]\" /></span>\r\n @if (hasSubtitle) {\r\n <span class=\"ius-acctitem__sub\">{{ subtitle }}<ng-content select=\"[iusAccountItemSubtitle]\" /></span>\r\n }\r\n </span>\r\n\r\n @if (selected) {\r\n <span class=\"ius-acctitem__check\"><span translate=\"no\" class=\"ius-icon\">check_circle</span></span>\r\n }\r\n </button>\r\n\r\n @if (hasTrailing) {\r\n <span class=\"ius-acctitem__trailing\"><ng-content select=\"[iusAccountItemTrailing]\" /></span>\r\n }\r\n\r\n @if (showMenu) {\r\n <!-- Slot de ancho fijo (--_ai-actions-w): alinea todas las listas de\r\n cuentas del ecosistema. Compone ius-dropdown; su clic no dispara la\r\n fila (el \u00E1rea primaria es un bot\u00F3n hermano, no un ancestro). -->\r\n <span class=\"ius-acctitem__actions\">\r\n <ius-dropdown [items]=\"actions\" placement=\"bottom-end\" [ariaLabel]=\"actionsLabel\">\r\n <ius-icon-button\r\n iusDropdownTrigger\r\n icon=\"more_vert\"\r\n variant=\"tertiary\"\r\n size=\"small\"\r\n [ariaLabel]=\"menuLabel\"\r\n [disabled]=\"disabled\"\r\n />\r\n </ius-dropdown>\r\n </span>\r\n }\r\n </div>\r\n</ius-card>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-width:0;box-sizing:border-box;-webkit-user-select:none;user-select:none;text-align:left;--_ai-actions-w: 36px}.ius-acctitem__row{display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-sm)}.ius-acctitem__main{appearance:none;background:none;border:0;margin:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer;flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:var(--ius-space-xs)}.ius-acctitem__main:focus-visible{outline:none}:host(:has(.ius-acctitem__main:focus-visible)) .ius-acctitem__card{box-shadow:var(--ius-focus-ring)}:host([data-actionable=true]:hover) .ius-acctitem__card,:host([data-state=hover]) .ius-acctitem__card{box-shadow:none;transform:none;border-color:var(--ius-info-300)}:host([data-actionable=true]:has(.ius-acctitem__main:active)) .ius-acctitem__card,:host([data-state=pressed]) .ius-acctitem__card{box-shadow:none;transform:none;background:var(--ius-info-100);border-color:var(--ius-info-300)}.ius-acctitem__card[data-selected=true]{background:var(--ius-info-100);border-color:var(--ius-info-300);box-shadow:none}:host([data-disabled=true]){cursor:default;opacity:.5;pointer-events:none}.ius-acctitem__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}.ius-acctitem__name{font-size:var(--ius-fs-base);line-height:1.3;font-weight:var(--ius-fw-medium, 500);color:var(--ius-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-acctitem__sub{font-size:var(--ius-fs-sm);line-height:1.3;color:var(--ius-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-acctitem__check{flex:0 0 auto;display:inline-flex;color:var(--ius-primary-900)}.ius-acctitem__check .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-acctitem__trailing{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xxs)}.ius-acctitem__actions{flex:0 0 auto;width:var(--_ai-actions-w);display:inline-flex;align-items:center;justify-content:center}\n"] }]
|
|
12259
|
+
}], propDecorators: { name: [{
|
|
12260
|
+
type: Input
|
|
12261
|
+
}], subtitle: [{
|
|
12262
|
+
type: Input
|
|
12263
|
+
}], avatar: [{
|
|
12264
|
+
type: Input
|
|
12265
|
+
}], icon: [{
|
|
12266
|
+
type: Input
|
|
12267
|
+
}], monogram: [{
|
|
12268
|
+
type: Input
|
|
12269
|
+
}], color: [{
|
|
12270
|
+
type: Input
|
|
12271
|
+
}], shape: [{
|
|
12272
|
+
type: Input
|
|
12273
|
+
}], selected: [{
|
|
12274
|
+
type: Input,
|
|
12275
|
+
args: [{ transform: booleanAttribute }]
|
|
12276
|
+
}], disabled: [{
|
|
12277
|
+
type: Input,
|
|
12278
|
+
args: [{ transform: booleanAttribute }]
|
|
12279
|
+
}], actions: [{
|
|
12280
|
+
type: Input
|
|
12281
|
+
}], actionsLabel: [{
|
|
12282
|
+
type: Input
|
|
12283
|
+
}], state: [{
|
|
12284
|
+
type: Input
|
|
12285
|
+
}], ariaLabel: [{
|
|
12286
|
+
type: Input
|
|
12287
|
+
}], clicked: [{
|
|
12288
|
+
type: Output
|
|
12289
|
+
}], nameRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusAccountItemNameDirective), { isSignal: true }] }], subtitleRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusAccountItemSubtitleDirective), { isSignal: true }] }], trailingRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusAccountItemTrailingDirective), { isSignal: true }] }] } });
|
|
12290
|
+
|
|
12102
12291
|
/*
|
|
12103
12292
|
* Public API de @litigiovirtual/ius-design-components v2.
|
|
12104
12293
|
* La librería se está reconstruyendo componente a componente desde las
|
|
@@ -12110,5 +12299,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
12110
12299
|
* Generated bundle index. Do not edit.
|
|
12111
12300
|
*/
|
|
12112
12301
|
|
|
12113
|
-
export { AccordionComponent, AlertComponent, AppLayoutComponent, AvatarComponent, ButtonComponent, CaptchaFieldComponent, CardComponent, CarouselComponent, CheckboxComponent, ChipComponent, CircularProgressComponent, CodeFieldComponent, CountdownComponent, CountdownRingComponent, DescriptionListComponent, DividerComponent, DrawerComponent, DropdownComponent, EleniaBubbleComponent, EleniaOrbComponent, EmptyStateComponent, FlexComponent, HeaderBarComponent, ILLUSTRATIONS, ILLUSTRATION_ALIAS, ILLUSTRATION_NAMES, IUS_FILTER_OPERATORS, IUS_TOAST_DEFAULT_DURATION, IUS_TOAST_DEFAULT_ICON, IconButtonComponent, IllustrationComponent, InsigniaComponent, IusAlertActionsDirective, IusAlertTrailingDirective, IusCardFooterDirective, IusCardHeaderDirective, IusDrawerFooterDirective, IusDrawerHeaderActionsDirective, IusDrawerTitleDirective, IusDropdownTriggerDirective, IusListCardLeadingDirective, IusListCardOverlineDirective, IusListCardParagraphDirective, IusListCardSubtitleDirective, IusListCardTitleDirective, IusListViewFiltersDirective, IusListViewFooterEndDirective, IusListViewFooterStartDirective, IusListViewHeaderEndDirective, IusListViewHeaderStartDirective, IusListViewToolbarDirective, IusMenuItemTrailingDirective, IusModalFooterDirective, IusPersonItemNameDirective, IusPersonItemTrailingDirective, IusSettingsNavFooterDirective, IusSettingsNavHeaderDirective, IusTagPrefixDirective, IusTagSuffixDirective, IusToastActionDirective, ListCardComponent, ListViewComponent, LoadingComponent, LoadingMarkComponent, MenuComponent, MenuItemComponent, ModalComponent, MultiTextFieldComponent, NavUserComponent, ORB_PERIODS, OauthButtonComponent, OptionItemComponent, PersonItemComponent, PersonPickerComponent, PopoverComponent, QueryBuilderComponent, STATUS_TONES, STATUS_VOCAB, STATUS_VOCABS, STATUS_VOCABS_PENDING, ScrollAreaComponent, SearchBarComponent, SegmentGroupComponent, SegmentedControlComponent, SelectComponent, SettingsNavComponent, ShowMoreComponent, SplitterComponent, StatusChipComponent, StatusStateComponent, TabsComponent, TagComponent, TextAreaComponent, TextButtonComponent, TextComponent, TextFieldComponent, ToastComponent, ToastService, ToastViewportComponent, TooltipComponent, WizardComponent, WizardController, WizardNavComponent, createWizard, pose, poseIso, poseSpeaking, poseThinking, renderCubeSvg, resolveIllustration, resolveStatus, statusOptions, statusOrder, statusToneVars, statusVocab, voiceEnv };
|
|
12302
|
+
export { AccordionComponent, AccountItemComponent, AlertComponent, AppLayoutComponent, AvatarComponent, ButtonComponent, CaptchaFieldComponent, CardComponent, CarouselComponent, CheckboxComponent, ChipComponent, CircularProgressComponent, CodeFieldComponent, CountdownComponent, CountdownRingComponent, DescriptionListComponent, DividerComponent, DrawerComponent, DropdownComponent, EleniaBubbleComponent, EleniaOrbComponent, EmptyStateComponent, FlexComponent, HeaderBarComponent, ILLUSTRATIONS, ILLUSTRATION_ALIAS, ILLUSTRATION_NAMES, IUS_FILTER_OPERATORS, IUS_TOAST_DEFAULT_DURATION, IUS_TOAST_DEFAULT_ICON, IconButtonComponent, IllustrationComponent, InsigniaComponent, IusAccountItemNameDirective, IusAccountItemSubtitleDirective, IusAccountItemTrailingDirective, IusAlertActionsDirective, IusAlertTrailingDirective, IusCardFooterDirective, IusCardHeaderDirective, IusDrawerFooterDirective, IusDrawerHeaderActionsDirective, IusDrawerTitleDirective, IusDropdownTriggerDirective, IusListCardLeadingDirective, IusListCardOverlineDirective, IusListCardParagraphDirective, IusListCardSubtitleDirective, IusListCardTitleDirective, IusListViewFiltersDirective, IusListViewFooterEndDirective, IusListViewFooterStartDirective, IusListViewHeaderEndDirective, IusListViewHeaderStartDirective, IusListViewToolbarDirective, IusMenuItemTrailingDirective, IusModalFooterDirective, IusPersonItemNameDirective, IusPersonItemTrailingDirective, IusSettingsNavFooterDirective, IusSettingsNavHeaderDirective, IusTagPrefixDirective, IusTagSuffixDirective, IusToastActionDirective, ListCardComponent, ListViewComponent, LoadingComponent, LoadingMarkComponent, MenuComponent, MenuItemComponent, ModalComponent, MultiTextFieldComponent, NavUserComponent, ORB_PERIODS, OauthButtonComponent, OptionItemComponent, PersonItemComponent, PersonPickerComponent, PopoverComponent, QueryBuilderComponent, STATUS_TONES, STATUS_VOCAB, STATUS_VOCABS, STATUS_VOCABS_PENDING, ScrollAreaComponent, SearchBarComponent, SegmentGroupComponent, SegmentedControlComponent, SelectComponent, SettingsNavComponent, ShowMoreComponent, SplitterComponent, StatusChipComponent, StatusStateComponent, TabsComponent, TagComponent, TextAreaComponent, TextButtonComponent, TextComponent, TextFieldComponent, ToastComponent, ToastService, ToastViewportComponent, TooltipComponent, WizardComponent, WizardController, WizardNavComponent, createWizard, pose, poseIso, poseSpeaking, poseThinking, renderCubeSvg, resolveIllustration, resolveStatus, statusOptions, statusOrder, statusToneVars, statusVocab, voiceEnv };
|
|
12114
12303
|
//# sourceMappingURL=litigiovirtual-ius-design-components.mjs.map
|