@litigiovirtual/ius-design-components 2.2.6 → 2.2.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1353,6 +1353,11 @@ class TextFieldComponent {
|
|
|
1353
1353
|
get inputType() {
|
|
1354
1354
|
return this.isPassword ? (this.revealed() ? 'text' : 'password') : this.type;
|
|
1355
1355
|
}
|
|
1356
|
+
/** Solo un entero ≥ 0 llega al DOM; `undefined`/NaN no pintan el atributo. */
|
|
1357
|
+
get maxLengthAttr() {
|
|
1358
|
+
const max = this.maxLength;
|
|
1359
|
+
return max !== undefined && Number.isInteger(max) && max >= 0 ? max : null;
|
|
1360
|
+
}
|
|
1356
1361
|
get hint() {
|
|
1357
1362
|
return this.error ? this.errorText || this.helpText : this.helpText;
|
|
1358
1363
|
}
|
|
@@ -1403,13 +1408,13 @@ class TextFieldComponent {
|
|
|
1403
1408
|
this.cleared.emit();
|
|
1404
1409
|
}
|
|
1405
1410
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1406
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: TextFieldComponent, isStandalone: true, selector: "ius-text-field", inputs: { label: "label", placeholder: "placeholder", required: ["required", "required", booleanAttribute], prefixIcon: "prefixIcon", showClear: "showClear", helpText: "helpText", errorText: "errorText", showHelpText: ["showHelpText", "showHelpText", booleanAttribute], showIconHelp: ["showIconHelp", "showIconHelp", booleanAttribute], iconHelpTitle: "iconHelpTitle", iconHelpContent: "iconHelpContent", error: ["error", "error", booleanAttribute], name: "name", autocomplete: "autocomplete", type: "type", size: "size", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { valueChange: "valueChange", cleared: "cleared" }, host: { properties: { "attr.data-size": "size !== 'medium' ? size : null", "attr.data-focused": "focused() || null", "attr.data-error": "error || null", "attr.data-disabled": "disabled || null" }, classAttribute: "ius-tf" }, providers: [
|
|
1411
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: TextFieldComponent, isStandalone: true, selector: "ius-text-field", inputs: { label: "label", placeholder: "placeholder", required: ["required", "required", booleanAttribute], prefixIcon: "prefixIcon", showClear: "showClear", helpText: "helpText", errorText: "errorText", showHelpText: ["showHelpText", "showHelpText", booleanAttribute], showIconHelp: ["showIconHelp", "showIconHelp", booleanAttribute], iconHelpTitle: "iconHelpTitle", iconHelpContent: "iconHelpContent", error: ["error", "error", booleanAttribute], name: "name", autocomplete: "autocomplete", type: "type", inputMode: "inputMode", maxLength: ["maxLength", "maxLength", numberAttribute], size: "size", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { valueChange: "valueChange", cleared: "cleared" }, host: { properties: { "attr.data-size": "size !== 'medium' ? size : null", "attr.data-focused": "focused() || null", "attr.data-error": "error || null", "attr.data-disabled": "disabled || null" }, classAttribute: "ius-tf" }, providers: [
|
|
1407
1412
|
{
|
|
1408
1413
|
provide: NG_VALUE_ACCESSOR,
|
|
1409
1414
|
useExisting: forwardRef(() => TextFieldComponent),
|
|
1410
1415
|
multi: true,
|
|
1411
1416
|
},
|
|
1412
|
-
], ngImport: i0, template: "@if (label) {\r\n <label [for]=\"inputId\" class=\"ius-tf__label\">\r\n @if (required) {\r\n <span class=\"ius-tf__required\" aria-hidden=\"true\"></span>\r\n }\r\n <span>{{ label }}</span>\r\n @if (showIconHelp) {\r\n <ius-popover\r\n [title]=\"iconHelpTitle\"\r\n [content]=\"iconHelpContent\"\r\n [disabled]=\"!iconHelpTitle && !iconHelpContent\"\r\n >\r\n <span\r\n class=\"ius-tf__help-icon\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n aria-label=\"Ayuda\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">help</span>\r\n </span>\r\n </ius-popover>\r\n }\r\n <span class=\"ius-tf__colon\">:</span>\r\n </label>\r\n}\r\n\r\n<div class=\"ius-tf__field\">\r\n @if (prefixIcon) {\r\n <span class=\"ius-tf__prefix\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ prefixIcon }}</span>\r\n </span>\r\n }\r\n\r\n <input\r\n [id]=\"inputId\"\r\n class=\"ius-tf__input\"\r\n [type]=\"inputType\"\r\n [name]=\"name\"\r\n [attr.autocomplete]=\"autocomplete || null\"\r\n [placeholder]=\"placeholder\"\r\n [value]=\"value()\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-invalid]=\"error || null\"\r\n [attr.aria-required]=\"required || null\"\r\n [attr.aria-describedby]=\"showHint ? helpId : null\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n />\r\n\r\n @if (isPassword) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-tf__clear\"\r\n [attr.aria-label]=\"revealed() ? 'Ocultar contenido' : 'Mostrar contenido'\"\r\n [attr.aria-pressed]=\"revealed()\"\r\n tabindex=\"-1\"\r\n [disabled]=\"disabled\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (click)=\"toggleReveal()\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">{{ revealed() ? 'visibility_off' : 'visibility' }}</span>\r\n </button>\r\n } @else if (showClearComputed) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-tf__clear\"\r\n aria-label=\"Limpiar campo\"\r\n tabindex=\"-1\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (click)=\"clear()\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">cancel</span>\r\n </button>\r\n }\r\n</div>\r\n\r\n@if (showHint) {\r\n <span [id]=\"helpId\" class=\"ius-tf__hint\">{{ hint }}</span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_tf-bg: var(--ius-neutral-2);--_tf-border: transparent;--_tf-fg: var(--ius-text-primary);--_tf-placeholder: var(--ius-text-tertiary);--_tf-icon: var(--ius-text-secondary);--_tf-clear: var(--ius-neutral-7);--_tf-py: 9px;--_tf-px: 12px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-md);display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);min-width:200px;width:100%;max-width:360px}.ius-tf__label{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-tf__required{width:5px;height:5px;border-radius:50%;background:var(--ius-danger-500);display:inline-block;margin-right:var(--ius-space-xxs)}.ius-tf__help-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-7);cursor:help}.ius-tf__help-icon .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-tf__colon{color:var(--ius-text-secondary)}.ius-tf__field{display:flex;align-items:center;gap:var(--ius-space-xxs);padding:var(--_tf-py) var(--_tf-px);background:var(--_tf-bg);border:1px solid var(--_tf-border);border-radius:var(--ius-radius-md);transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}.ius-tf__field:hover,:host([data-force=hover]) .ius-tf__field{--_tf-bg: var(--ius-info-100);--_tf-border: transparent;--_tf-clear: var(--ius-primary-900)}:host([data-focused=true]) .ius-tf__field,:host([data-force=focused]) .ius-tf__field,.ius-tf__field:focus-within{--_tf-bg: var(--ius-info-100);--_tf-border: var(--ius-primary-500);--_tf-clear: var(--ius-primary-900);box-shadow:var(--ius-focus-ring)}:host([data-error=true]) .ius-tf__field,:host([data-force=error]) .ius-tf__field{--_tf-bg: var(--ius-danger-100);--_tf-border: var(--ius-danger-700);--_tf-clear: var(--ius-danger-700);box-shadow:none}:host([data-error=true][data-focused=true]) .ius-tf__field,:host([data-force=error]) .ius-tf__field{box-shadow:0 0 0 3px var(--ius-danger-200)}:host([data-disabled=true]) .ius-tf__field,:host([data-force=disabled]) .ius-tf__field{--_tf-bg: var(--ius-neutral-2);--_tf-border: transparent;--_tf-fg: var(--ius-text-disabled);--_tf-placeholder: var(--ius-text-disabled);--_tf-icon: var(--ius-text-disabled);box-shadow:none;cursor:not-allowed}:host([data-disabled=true]) .ius-tf__label,:host([data-force=disabled]) .ius-tf__label{color:var(--ius-text-disabled)}:host([data-disabled=true]) .ius-tf__required,:host([data-force=disabled]) .ius-tf__required{background:var(--ius-neutral-5)}.ius-tf__prefix,.ius-tf__sufix{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-tf__prefix .ius-icon,.ius-tf__sufix .ius-icon{font-size:var(--_tf-icon-size);line-height:1}:host([data-size=small]){--_tf-py: 6px;--_tf-px: 10px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-sm)}:host([data-size=large]){--_tf-py: 12px;--_tf-px: 14px;--_tf-fs: var(--ius-fs-lg);--_tf-lh: var(--ius-lh-lg);--_tf-icon-size: var(--ius-icon-lg)}@container style(--ius-control-size: small){:host(:not([data-size])){--_tf-py: 6px;--_tf-px: 10px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-sm)}}@container style(--ius-control-size: large){:host(:not([data-size])){--_tf-py: 12px;--_tf-px: 14px;--_tf-fs: var(--ius-fs-lg);--_tf-lh: var(--ius-lh-lg);--_tf-icon-size: var(--ius-icon-lg)}}.ius-tf__input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--_tf-fs);line-height:var(--_tf-lh);color:var(--_tf-fg);min-width:0;padding:0}.ius-tf__input::placeholder{color:var(--_tf-placeholder)}.ius-tf__input:disabled{cursor:not-allowed;color:var(--ius-text-disabled)}:host([data-error=true]) .ius-tf__input{color:var(--ius-text-primary)}.ius-tf__clear{appearance:none;border:0;padding:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--_tf-clear);cursor:pointer;flex:0 0 auto}.ius-tf__clear:hover{color:var(--ius-neutral-9)}.ius-tf__clear .ius-icon{font-size:calc(var(--_tf-icon-size) + 2px);line-height:1}:host([data-error=true]) .ius-tf__clear{color:var(--ius-danger-700)}:host([data-error=true]) .ius-tf__clear:hover{color:var(--ius-danger-800)}.ius-tf__hint{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);font-weight:var(--ius-fw-medium);font-style:italic;color:var(--ius-text-secondary);letter-spacing:.02em}:host([data-error=true]) .ius-tf__hint,:host([data-force=error]) .ius-tf__hint{color:var(--ius-danger-700)}:host([data-disabled=true]) .ius-tf__hint,:host([data-force=disabled]) .ius-tf__hint{color:var(--ius-text-disabled)}\n"], dependencies: [{ kind: "component", type: PopoverComponent, selector: "ius-popover", inputs: ["title", "content", "placement", "trigger", "offset", "open", "defaultOpen", "showArrow", "disabled", "anchorRect", "padding", "dismissable", "panelClass"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1417
|
+
], ngImport: i0, template: "@if (label) {\r\n <label [for]=\"inputId\" class=\"ius-tf__label\">\r\n @if (required) {\r\n <span class=\"ius-tf__required\" aria-hidden=\"true\"></span>\r\n }\r\n <span>{{ label }}</span>\r\n @if (showIconHelp) {\r\n <ius-popover\r\n [title]=\"iconHelpTitle\"\r\n [content]=\"iconHelpContent\"\r\n [disabled]=\"!iconHelpTitle && !iconHelpContent\"\r\n >\r\n <span\r\n class=\"ius-tf__help-icon\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n aria-label=\"Ayuda\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">help</span>\r\n </span>\r\n </ius-popover>\r\n }\r\n <span class=\"ius-tf__colon\">:</span>\r\n </label>\r\n}\r\n\r\n<div class=\"ius-tf__field\">\r\n @if (prefixIcon) {\r\n <span class=\"ius-tf__prefix\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ prefixIcon }}</span>\r\n </span>\r\n }\r\n\r\n <input\r\n [id]=\"inputId\"\r\n class=\"ius-tf__input\"\r\n [type]=\"inputType\"\r\n [name]=\"name\"\r\n [attr.autocomplete]=\"autocomplete || null\"\r\n [attr.inputmode]=\"inputMode || null\"\r\n [attr.maxlength]=\"maxLengthAttr\"\r\n [placeholder]=\"placeholder\"\r\n [value]=\"value()\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-invalid]=\"error || null\"\r\n [attr.aria-required]=\"required || null\"\r\n [attr.aria-describedby]=\"showHint ? helpId : null\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n />\r\n\r\n @if (isPassword) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-tf__clear\"\r\n [attr.aria-label]=\"revealed() ? 'Ocultar contenido' : 'Mostrar contenido'\"\r\n [attr.aria-pressed]=\"revealed()\"\r\n tabindex=\"-1\"\r\n [disabled]=\"disabled\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (click)=\"toggleReveal()\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">{{ revealed() ? 'visibility_off' : 'visibility' }}</span>\r\n </button>\r\n } @else if (showClearComputed) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-tf__clear\"\r\n aria-label=\"Limpiar campo\"\r\n tabindex=\"-1\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (click)=\"clear()\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">cancel</span>\r\n </button>\r\n }\r\n</div>\r\n\r\n@if (showHint) {\r\n <span [id]=\"helpId\" class=\"ius-tf__hint\">{{ hint }}</span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_tf-bg: var(--ius-neutral-2);--_tf-border: transparent;--_tf-fg: var(--ius-text-primary);--_tf-placeholder: var(--ius-text-tertiary);--_tf-icon: var(--ius-text-secondary);--_tf-clear: var(--ius-neutral-7);--_tf-py: 9px;--_tf-px: 12px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-md);display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);min-width:200px;width:100%;max-width:360px}.ius-tf__label{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-tf__required{width:5px;height:5px;border-radius:50%;background:var(--ius-danger-500);display:inline-block;margin-right:var(--ius-space-xxs)}.ius-tf__help-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-7);cursor:help}.ius-tf__help-icon .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-tf__colon{color:var(--ius-text-secondary)}.ius-tf__field{display:flex;align-items:center;gap:var(--ius-space-xxs);padding:var(--_tf-py) var(--_tf-px);background:var(--_tf-bg);border:1px solid var(--_tf-border);border-radius:var(--ius-radius-md);transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}.ius-tf__field:hover,:host([data-force=hover]) .ius-tf__field{--_tf-bg: var(--ius-info-100);--_tf-border: transparent;--_tf-clear: var(--ius-primary-900)}:host([data-focused=true]) .ius-tf__field,:host([data-force=focused]) .ius-tf__field,.ius-tf__field:focus-within{--_tf-bg: var(--ius-info-100);--_tf-border: var(--ius-primary-500);--_tf-clear: var(--ius-primary-900);box-shadow:var(--ius-focus-ring)}:host([data-error=true]) .ius-tf__field,:host([data-force=error]) .ius-tf__field{--_tf-bg: var(--ius-danger-100);--_tf-border: var(--ius-danger-700);--_tf-clear: var(--ius-danger-700);box-shadow:none}:host([data-error=true][data-focused=true]) .ius-tf__field,:host([data-force=error]) .ius-tf__field{box-shadow:0 0 0 3px var(--ius-danger-200)}:host([data-disabled=true]) .ius-tf__field,:host([data-force=disabled]) .ius-tf__field{--_tf-bg: var(--ius-neutral-2);--_tf-border: transparent;--_tf-fg: var(--ius-text-disabled);--_tf-placeholder: var(--ius-text-disabled);--_tf-icon: var(--ius-text-disabled);box-shadow:none;cursor:not-allowed}:host([data-disabled=true]) .ius-tf__label,:host([data-force=disabled]) .ius-tf__label{color:var(--ius-text-disabled)}:host([data-disabled=true]) .ius-tf__required,:host([data-force=disabled]) .ius-tf__required{background:var(--ius-neutral-5)}.ius-tf__prefix,.ius-tf__sufix{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-tf__prefix .ius-icon,.ius-tf__sufix .ius-icon{font-size:var(--_tf-icon-size);line-height:1}:host([data-size=small]){--_tf-py: 6px;--_tf-px: 10px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-sm)}:host([data-size=large]){--_tf-py: 12px;--_tf-px: 14px;--_tf-fs: var(--ius-fs-lg);--_tf-lh: var(--ius-lh-lg);--_tf-icon-size: var(--ius-icon-lg)}@container style(--ius-control-size: small){:host(:not([data-size])){--_tf-py: 6px;--_tf-px: 10px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-sm)}}@container style(--ius-control-size: large){:host(:not([data-size])){--_tf-py: 12px;--_tf-px: 14px;--_tf-fs: var(--ius-fs-lg);--_tf-lh: var(--ius-lh-lg);--_tf-icon-size: var(--ius-icon-lg)}}.ius-tf__input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--_tf-fs);line-height:var(--_tf-lh);color:var(--_tf-fg);min-width:0;padding:0}.ius-tf__input::placeholder{color:var(--_tf-placeholder)}.ius-tf__input:disabled{cursor:not-allowed;color:var(--ius-text-disabled)}:host([data-error=true]) .ius-tf__input{color:var(--ius-text-primary)}.ius-tf__clear{appearance:none;border:0;padding:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--_tf-clear);cursor:pointer;flex:0 0 auto}.ius-tf__clear:hover{color:var(--ius-neutral-9)}.ius-tf__clear .ius-icon{font-size:calc(var(--_tf-icon-size) + 2px);line-height:1}:host([data-error=true]) .ius-tf__clear{color:var(--ius-danger-700)}:host([data-error=true]) .ius-tf__clear:hover{color:var(--ius-danger-800)}.ius-tf__hint{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);font-weight:var(--ius-fw-medium);font-style:italic;color:var(--ius-text-secondary);letter-spacing:.02em}:host([data-error=true]) .ius-tf__hint,:host([data-force=error]) .ius-tf__hint{color:var(--ius-danger-700)}:host([data-disabled=true]) .ius-tf__hint,:host([data-force=disabled]) .ius-tf__hint{color:var(--ius-text-disabled)}\n"], dependencies: [{ kind: "component", type: PopoverComponent, selector: "ius-popover", inputs: ["title", "content", "placement", "trigger", "offset", "open", "defaultOpen", "showArrow", "disabled", "anchorRect", "padding", "dismissable", "panelClass"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1413
1418
|
}
|
|
1414
1419
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TextFieldComponent, decorators: [{
|
|
1415
1420
|
type: Component,
|
|
@@ -1425,7 +1430,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
1425
1430
|
'[attr.data-focused]': 'focused() || null',
|
|
1426
1431
|
'[attr.data-error]': 'error || null',
|
|
1427
1432
|
'[attr.data-disabled]': 'disabled || null',
|
|
1428
|
-
}, template: "@if (label) {\r\n <label [for]=\"inputId\" class=\"ius-tf__label\">\r\n @if (required) {\r\n <span class=\"ius-tf__required\" aria-hidden=\"true\"></span>\r\n }\r\n <span>{{ label }}</span>\r\n @if (showIconHelp) {\r\n <ius-popover\r\n [title]=\"iconHelpTitle\"\r\n [content]=\"iconHelpContent\"\r\n [disabled]=\"!iconHelpTitle && !iconHelpContent\"\r\n >\r\n <span\r\n class=\"ius-tf__help-icon\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n aria-label=\"Ayuda\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">help</span>\r\n </span>\r\n </ius-popover>\r\n }\r\n <span class=\"ius-tf__colon\">:</span>\r\n </label>\r\n}\r\n\r\n<div class=\"ius-tf__field\">\r\n @if (prefixIcon) {\r\n <span class=\"ius-tf__prefix\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ prefixIcon }}</span>\r\n </span>\r\n }\r\n\r\n <input\r\n [id]=\"inputId\"\r\n class=\"ius-tf__input\"\r\n [type]=\"inputType\"\r\n [name]=\"name\"\r\n [attr.autocomplete]=\"autocomplete || null\"\r\n [placeholder]=\"placeholder\"\r\n [value]=\"value()\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-invalid]=\"error || null\"\r\n [attr.aria-required]=\"required || null\"\r\n [attr.aria-describedby]=\"showHint ? helpId : null\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n />\r\n\r\n @if (isPassword) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-tf__clear\"\r\n [attr.aria-label]=\"revealed() ? 'Ocultar contenido' : 'Mostrar contenido'\"\r\n [attr.aria-pressed]=\"revealed()\"\r\n tabindex=\"-1\"\r\n [disabled]=\"disabled\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (click)=\"toggleReveal()\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">{{ revealed() ? 'visibility_off' : 'visibility' }}</span>\r\n </button>\r\n } @else if (showClearComputed) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-tf__clear\"\r\n aria-label=\"Limpiar campo\"\r\n tabindex=\"-1\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (click)=\"clear()\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">cancel</span>\r\n </button>\r\n }\r\n</div>\r\n\r\n@if (showHint) {\r\n <span [id]=\"helpId\" class=\"ius-tf__hint\">{{ hint }}</span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_tf-bg: var(--ius-neutral-2);--_tf-border: transparent;--_tf-fg: var(--ius-text-primary);--_tf-placeholder: var(--ius-text-tertiary);--_tf-icon: var(--ius-text-secondary);--_tf-clear: var(--ius-neutral-7);--_tf-py: 9px;--_tf-px: 12px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-md);display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);min-width:200px;width:100%;max-width:360px}.ius-tf__label{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-tf__required{width:5px;height:5px;border-radius:50%;background:var(--ius-danger-500);display:inline-block;margin-right:var(--ius-space-xxs)}.ius-tf__help-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-7);cursor:help}.ius-tf__help-icon .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-tf__colon{color:var(--ius-text-secondary)}.ius-tf__field{display:flex;align-items:center;gap:var(--ius-space-xxs);padding:var(--_tf-py) var(--_tf-px);background:var(--_tf-bg);border:1px solid var(--_tf-border);border-radius:var(--ius-radius-md);transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}.ius-tf__field:hover,:host([data-force=hover]) .ius-tf__field{--_tf-bg: var(--ius-info-100);--_tf-border: transparent;--_tf-clear: var(--ius-primary-900)}:host([data-focused=true]) .ius-tf__field,:host([data-force=focused]) .ius-tf__field,.ius-tf__field:focus-within{--_tf-bg: var(--ius-info-100);--_tf-border: var(--ius-primary-500);--_tf-clear: var(--ius-primary-900);box-shadow:var(--ius-focus-ring)}:host([data-error=true]) .ius-tf__field,:host([data-force=error]) .ius-tf__field{--_tf-bg: var(--ius-danger-100);--_tf-border: var(--ius-danger-700);--_tf-clear: var(--ius-danger-700);box-shadow:none}:host([data-error=true][data-focused=true]) .ius-tf__field,:host([data-force=error]) .ius-tf__field{box-shadow:0 0 0 3px var(--ius-danger-200)}:host([data-disabled=true]) .ius-tf__field,:host([data-force=disabled]) .ius-tf__field{--_tf-bg: var(--ius-neutral-2);--_tf-border: transparent;--_tf-fg: var(--ius-text-disabled);--_tf-placeholder: var(--ius-text-disabled);--_tf-icon: var(--ius-text-disabled);box-shadow:none;cursor:not-allowed}:host([data-disabled=true]) .ius-tf__label,:host([data-force=disabled]) .ius-tf__label{color:var(--ius-text-disabled)}:host([data-disabled=true]) .ius-tf__required,:host([data-force=disabled]) .ius-tf__required{background:var(--ius-neutral-5)}.ius-tf__prefix,.ius-tf__sufix{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-tf__prefix .ius-icon,.ius-tf__sufix .ius-icon{font-size:var(--_tf-icon-size);line-height:1}:host([data-size=small]){--_tf-py: 6px;--_tf-px: 10px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-sm)}:host([data-size=large]){--_tf-py: 12px;--_tf-px: 14px;--_tf-fs: var(--ius-fs-lg);--_tf-lh: var(--ius-lh-lg);--_tf-icon-size: var(--ius-icon-lg)}@container style(--ius-control-size: small){:host(:not([data-size])){--_tf-py: 6px;--_tf-px: 10px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-sm)}}@container style(--ius-control-size: large){:host(:not([data-size])){--_tf-py: 12px;--_tf-px: 14px;--_tf-fs: var(--ius-fs-lg);--_tf-lh: var(--ius-lh-lg);--_tf-icon-size: var(--ius-icon-lg)}}.ius-tf__input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--_tf-fs);line-height:var(--_tf-lh);color:var(--_tf-fg);min-width:0;padding:0}.ius-tf__input::placeholder{color:var(--_tf-placeholder)}.ius-tf__input:disabled{cursor:not-allowed;color:var(--ius-text-disabled)}:host([data-error=true]) .ius-tf__input{color:var(--ius-text-primary)}.ius-tf__clear{appearance:none;border:0;padding:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--_tf-clear);cursor:pointer;flex:0 0 auto}.ius-tf__clear:hover{color:var(--ius-neutral-9)}.ius-tf__clear .ius-icon{font-size:calc(var(--_tf-icon-size) + 2px);line-height:1}:host([data-error=true]) .ius-tf__clear{color:var(--ius-danger-700)}:host([data-error=true]) .ius-tf__clear:hover{color:var(--ius-danger-800)}.ius-tf__hint{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);font-weight:var(--ius-fw-medium);font-style:italic;color:var(--ius-text-secondary);letter-spacing:.02em}:host([data-error=true]) .ius-tf__hint,:host([data-force=error]) .ius-tf__hint{color:var(--ius-danger-700)}:host([data-disabled=true]) .ius-tf__hint,:host([data-force=disabled]) .ius-tf__hint{color:var(--ius-text-disabled)}\n"] }]
|
|
1433
|
+
}, template: "@if (label) {\r\n <label [for]=\"inputId\" class=\"ius-tf__label\">\r\n @if (required) {\r\n <span class=\"ius-tf__required\" aria-hidden=\"true\"></span>\r\n }\r\n <span>{{ label }}</span>\r\n @if (showIconHelp) {\r\n <ius-popover\r\n [title]=\"iconHelpTitle\"\r\n [content]=\"iconHelpContent\"\r\n [disabled]=\"!iconHelpTitle && !iconHelpContent\"\r\n >\r\n <span\r\n class=\"ius-tf__help-icon\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n aria-label=\"Ayuda\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">help</span>\r\n </span>\r\n </ius-popover>\r\n }\r\n <span class=\"ius-tf__colon\">:</span>\r\n </label>\r\n}\r\n\r\n<div class=\"ius-tf__field\">\r\n @if (prefixIcon) {\r\n <span class=\"ius-tf__prefix\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ prefixIcon }}</span>\r\n </span>\r\n }\r\n\r\n <input\r\n [id]=\"inputId\"\r\n class=\"ius-tf__input\"\r\n [type]=\"inputType\"\r\n [name]=\"name\"\r\n [attr.autocomplete]=\"autocomplete || null\"\r\n [attr.inputmode]=\"inputMode || null\"\r\n [attr.maxlength]=\"maxLengthAttr\"\r\n [placeholder]=\"placeholder\"\r\n [value]=\"value()\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-invalid]=\"error || null\"\r\n [attr.aria-required]=\"required || null\"\r\n [attr.aria-describedby]=\"showHint ? helpId : null\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n />\r\n\r\n @if (isPassword) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-tf__clear\"\r\n [attr.aria-label]=\"revealed() ? 'Ocultar contenido' : 'Mostrar contenido'\"\r\n [attr.aria-pressed]=\"revealed()\"\r\n tabindex=\"-1\"\r\n [disabled]=\"disabled\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (click)=\"toggleReveal()\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">{{ revealed() ? 'visibility_off' : 'visibility' }}</span>\r\n </button>\r\n } @else if (showClearComputed) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-tf__clear\"\r\n aria-label=\"Limpiar campo\"\r\n tabindex=\"-1\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (click)=\"clear()\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">cancel</span>\r\n </button>\r\n }\r\n</div>\r\n\r\n@if (showHint) {\r\n <span [id]=\"helpId\" class=\"ius-tf__hint\">{{ hint }}</span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_tf-bg: var(--ius-neutral-2);--_tf-border: transparent;--_tf-fg: var(--ius-text-primary);--_tf-placeholder: var(--ius-text-tertiary);--_tf-icon: var(--ius-text-secondary);--_tf-clear: var(--ius-neutral-7);--_tf-py: 9px;--_tf-px: 12px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-md);display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);min-width:200px;width:100%;max-width:360px}.ius-tf__label{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-tf__required{width:5px;height:5px;border-radius:50%;background:var(--ius-danger-500);display:inline-block;margin-right:var(--ius-space-xxs)}.ius-tf__help-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-7);cursor:help}.ius-tf__help-icon .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-tf__colon{color:var(--ius-text-secondary)}.ius-tf__field{display:flex;align-items:center;gap:var(--ius-space-xxs);padding:var(--_tf-py) var(--_tf-px);background:var(--_tf-bg);border:1px solid var(--_tf-border);border-radius:var(--ius-radius-md);transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}.ius-tf__field:hover,:host([data-force=hover]) .ius-tf__field{--_tf-bg: var(--ius-info-100);--_tf-border: transparent;--_tf-clear: var(--ius-primary-900)}:host([data-focused=true]) .ius-tf__field,:host([data-force=focused]) .ius-tf__field,.ius-tf__field:focus-within{--_tf-bg: var(--ius-info-100);--_tf-border: var(--ius-primary-500);--_tf-clear: var(--ius-primary-900);box-shadow:var(--ius-focus-ring)}:host([data-error=true]) .ius-tf__field,:host([data-force=error]) .ius-tf__field{--_tf-bg: var(--ius-danger-100);--_tf-border: var(--ius-danger-700);--_tf-clear: var(--ius-danger-700);box-shadow:none}:host([data-error=true][data-focused=true]) .ius-tf__field,:host([data-force=error]) .ius-tf__field{box-shadow:0 0 0 3px var(--ius-danger-200)}:host([data-disabled=true]) .ius-tf__field,:host([data-force=disabled]) .ius-tf__field{--_tf-bg: var(--ius-neutral-2);--_tf-border: transparent;--_tf-fg: var(--ius-text-disabled);--_tf-placeholder: var(--ius-text-disabled);--_tf-icon: var(--ius-text-disabled);box-shadow:none;cursor:not-allowed}:host([data-disabled=true]) .ius-tf__label,:host([data-force=disabled]) .ius-tf__label{color:var(--ius-text-disabled)}:host([data-disabled=true]) .ius-tf__required,:host([data-force=disabled]) .ius-tf__required{background:var(--ius-neutral-5)}.ius-tf__prefix,.ius-tf__sufix{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-tf__prefix .ius-icon,.ius-tf__sufix .ius-icon{font-size:var(--_tf-icon-size);line-height:1}:host([data-size=small]){--_tf-py: 6px;--_tf-px: 10px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-sm)}:host([data-size=large]){--_tf-py: 12px;--_tf-px: 14px;--_tf-fs: var(--ius-fs-lg);--_tf-lh: var(--ius-lh-lg);--_tf-icon-size: var(--ius-icon-lg)}@container style(--ius-control-size: small){:host(:not([data-size])){--_tf-py: 6px;--_tf-px: 10px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-sm)}}@container style(--ius-control-size: large){:host(:not([data-size])){--_tf-py: 12px;--_tf-px: 14px;--_tf-fs: var(--ius-fs-lg);--_tf-lh: var(--ius-lh-lg);--_tf-icon-size: var(--ius-icon-lg)}}.ius-tf__input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--_tf-fs);line-height:var(--_tf-lh);color:var(--_tf-fg);min-width:0;padding:0}.ius-tf__input::placeholder{color:var(--_tf-placeholder)}.ius-tf__input:disabled{cursor:not-allowed;color:var(--ius-text-disabled)}:host([data-error=true]) .ius-tf__input{color:var(--ius-text-primary)}.ius-tf__clear{appearance:none;border:0;padding:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--_tf-clear);cursor:pointer;flex:0 0 auto}.ius-tf__clear:hover{color:var(--ius-neutral-9)}.ius-tf__clear .ius-icon{font-size:calc(var(--_tf-icon-size) + 2px);line-height:1}:host([data-error=true]) .ius-tf__clear{color:var(--ius-danger-700)}:host([data-error=true]) .ius-tf__clear:hover{color:var(--ius-danger-800)}.ius-tf__hint{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);font-weight:var(--ius-fw-medium);font-style:italic;color:var(--ius-text-secondary);letter-spacing:.02em}:host([data-error=true]) .ius-tf__hint,:host([data-force=error]) .ius-tf__hint{color:var(--ius-danger-700)}:host([data-disabled=true]) .ius-tf__hint,:host([data-force=disabled]) .ius-tf__hint{color:var(--ius-text-disabled)}\n"] }]
|
|
1429
1434
|
}], propDecorators: { label: [{
|
|
1430
1435
|
type: Input
|
|
1431
1436
|
}], placeholder: [{
|
|
@@ -1460,6 +1465,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
1460
1465
|
type: Input
|
|
1461
1466
|
}], type: [{
|
|
1462
1467
|
type: Input
|
|
1468
|
+
}], inputMode: [{
|
|
1469
|
+
type: Input
|
|
1470
|
+
}], maxLength: [{
|
|
1471
|
+
type: Input,
|
|
1472
|
+
args: [{ transform: numberAttribute }]
|
|
1463
1473
|
}], size: [{
|
|
1464
1474
|
type: Input
|
|
1465
1475
|
}], disabled: [{
|
|
@@ -7536,8 +7546,8 @@ class SelectComponent {
|
|
|
7536
7546
|
}
|
|
7537
7547
|
/**
|
|
7538
7548
|
* `Enter` agrega la opción; `Escape` **con texto** solo limpia el borrador y
|
|
7539
|
-
* frena la propagación para que el listener de `document`
|
|
7540
|
-
* (espejo del golden). Sin texto, `Escape` sigue cerrando el menú.
|
|
7549
|
+
* frena la propagación para que ni el overlay ni el listener de `document`
|
|
7550
|
+
* cierren el menú (espejo del golden). Sin texto, `Escape` sigue cerrando el menú.
|
|
7541
7551
|
*/
|
|
7542
7552
|
onCreateKeyDown(event) {
|
|
7543
7553
|
if (event.key === 'Enter') {
|
|
@@ -7677,8 +7687,13 @@ class SelectComponent {
|
|
|
7677
7687
|
return;
|
|
7678
7688
|
this.setOpen(false);
|
|
7679
7689
|
}
|
|
7680
|
-
|
|
7681
|
-
|
|
7690
|
+
/**
|
|
7691
|
+
* Respaldo del Escape que atiende el overlay del menú (ver `attachOverlay`),
|
|
7692
|
+
* p. ej. en el frame previo a montarlo. Si otro overlay ya lo consumió
|
|
7693
|
+
* (`defaultPrevented`), no se vuelve a cerrar.
|
|
7694
|
+
*/
|
|
7695
|
+
onEscape(event) {
|
|
7696
|
+
if (!this.isOpen() || event.defaultPrevented)
|
|
7682
7697
|
return;
|
|
7683
7698
|
this.setOpen(false);
|
|
7684
7699
|
this.field()?.nativeElement.focus();
|
|
@@ -7717,8 +7732,22 @@ class SelectComponent {
|
|
|
7717
7732
|
scrollStrategy: this.overlay.scrollStrategies.reposition(),
|
|
7718
7733
|
disposeOnNavigation: true,
|
|
7719
7734
|
hasBackdrop: false,
|
|
7735
|
+
// Solo el Escape se queda en este overlay; el resto de teclas sigue hacia
|
|
7736
|
+
// los overlays de abajo (Drawer, Modal).
|
|
7737
|
+
eventPredicate: (event) => event instanceof KeyboardEvent && event.key === 'Escape',
|
|
7720
7738
|
});
|
|
7721
7739
|
this.overlayRef.attach(new TemplatePortal(tpl, this.viewContainerRef));
|
|
7740
|
+
// El dispatcher de CDK entrega cada tecla solo al overlay más alto con
|
|
7741
|
+
// suscriptores: al atender aquí el Escape, cierra el menú y un Drawer/Modal
|
|
7742
|
+
// padre con `closeOnEsc` no se cierra con él. La suscripción termina con
|
|
7743
|
+
// `dispose()` (CDK completa el stream).
|
|
7744
|
+
this.overlayRef.keydownEvents().subscribe((event) => {
|
|
7745
|
+
event.preventDefault();
|
|
7746
|
+
if (!this.isOpen())
|
|
7747
|
+
return;
|
|
7748
|
+
this.setOpen(false);
|
|
7749
|
+
this.field()?.nativeElement.focus();
|
|
7750
|
+
});
|
|
7722
7751
|
window.addEventListener('resize', this.onWindowResize);
|
|
7723
7752
|
if (focusSearch && this.searchable) {
|
|
7724
7753
|
requestAnimationFrame(() => this.search()?.nativeElement.focus());
|
|
@@ -7735,7 +7764,7 @@ class SelectComponent {
|
|
|
7735
7764
|
this.menuWidth.set(origin.getBoundingClientRect().width);
|
|
7736
7765
|
}
|
|
7737
7766
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7738
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SelectComponent, isStandalone: true, selector: "ius-select", inputs: { options: "options", multiple: ["multiple", "multiple", booleanAttribute], size: "size", disabled: ["disabled", "disabled", booleanAttribute], error: ["error", "error", booleanAttribute], state: "state", open: ["open", "open", booleanAttribute], value: "value", label: "label", required: ["required", "required", booleanAttribute], placeholder: "placeholder", prefixIcon: "prefixIcon", searchable: ["searchable", "searchable", booleanAttribute], searchPlaceholder: "searchPlaceholder", emptyText: "emptyText", creatable: ["creatable", "creatable", booleanAttribute], createPlaceholder: "createPlaceholder", createLabel: "createLabel", createFactory: "createFactory", maxVisible: ["maxVisible", "maxVisible", numberAttribute], helpText: "helpText", errorText: "errorText", showHelpText: ["showHelpText", "showHelpText", booleanAttribute], showIconHelp: ["showIconHelp", "showIconHelp", booleanAttribute], iconHelpTitle: "iconHelpTitle", iconHelpContent: "iconHelpContent", showClear: ["showClear", "showClear", booleanAttribute], defaultOpen: ["defaultOpen", "defaultOpen", booleanAttribute], compact: ["compact", "compact", booleanAttribute], defaultValue: "defaultValue", id: "id", name: "name" }, outputs: { valueChange: "valueChange", cleared: "cleared", openChange: "openChange", created: "created" }, host: { listeners: { "document:mousedown": "onDocumentMouseDown($event)", "document:keydown.escape": "onEscape()" }, properties: { "class.ius-tf--compact": "compact", "attr.data-size": "size !== 'medium' ? size : null", "attr.data-focused": "focusedAttr()", "attr.data-error": "isError() || null", "attr.data-disabled": "isDisabled() || null", "attr.data-force": "stateInput() || null" }, classAttribute: "ius-tf ius-tf--select" }, providers: [
|
|
7767
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SelectComponent, isStandalone: true, selector: "ius-select", inputs: { options: "options", multiple: ["multiple", "multiple", booleanAttribute], size: "size", disabled: ["disabled", "disabled", booleanAttribute], error: ["error", "error", booleanAttribute], state: "state", open: ["open", "open", booleanAttribute], value: "value", label: "label", required: ["required", "required", booleanAttribute], placeholder: "placeholder", prefixIcon: "prefixIcon", searchable: ["searchable", "searchable", booleanAttribute], searchPlaceholder: "searchPlaceholder", emptyText: "emptyText", creatable: ["creatable", "creatable", booleanAttribute], createPlaceholder: "createPlaceholder", createLabel: "createLabel", createFactory: "createFactory", maxVisible: ["maxVisible", "maxVisible", numberAttribute], helpText: "helpText", errorText: "errorText", showHelpText: ["showHelpText", "showHelpText", booleanAttribute], showIconHelp: ["showIconHelp", "showIconHelp", booleanAttribute], iconHelpTitle: "iconHelpTitle", iconHelpContent: "iconHelpContent", showClear: ["showClear", "showClear", booleanAttribute], defaultOpen: ["defaultOpen", "defaultOpen", booleanAttribute], compact: ["compact", "compact", booleanAttribute], defaultValue: "defaultValue", id: "id", name: "name" }, outputs: { valueChange: "valueChange", cleared: "cleared", openChange: "openChange", created: "created" }, host: { listeners: { "document:mousedown": "onDocumentMouseDown($event)", "document:keydown.escape": "onEscape($event)" }, properties: { "class.ius-tf--compact": "compact", "attr.data-size": "size !== 'medium' ? size : null", "attr.data-focused": "focusedAttr()", "attr.data-error": "isError() || null", "attr.data-disabled": "isDisabled() || null", "attr.data-force": "stateInput() || null" }, classAttribute: "ius-tf ius-tf--select" }, providers: [
|
|
7739
7768
|
{
|
|
7740
7769
|
provide: NG_VALUE_ACCESSOR,
|
|
7741
7770
|
useExisting: forwardRef(() => SelectComponent),
|
|
@@ -7850,7 +7879,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
7850
7879
|
args: ['document:mousedown', ['$event']]
|
|
7851
7880
|
}], onEscape: [{
|
|
7852
7881
|
type: HostListener,
|
|
7853
|
-
args: ['document:keydown.escape']
|
|
7882
|
+
args: ['document:keydown.escape', ['$event']]
|
|
7854
7883
|
}] } });
|
|
7855
7884
|
|
|
7856
7885
|
/** Altura unificada de la fila por tamaño (espejo de SIZE_PRESETS del golden). */
|
|
@@ -11461,7 +11490,7 @@ class QueryBuilderComponent {
|
|
|
11461
11490
|
this.isOpen.set(false);
|
|
11462
11491
|
}
|
|
11463
11492
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: QueryBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11464
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: QueryBuilderComponent, isStandalone: true, selector: "ius-query-builder", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, addLabel: { classPropertyName: "addLabel", publicName: "addLabel", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, applyLabel: { classPropertyName: "applyLabel", publicName: "applyLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyHint: { classPropertyName: "emptyHint", publicName: "emptyHint", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply" }, host: { classAttribute: "ius-querybuilder" }, ngImport: i0, template: "<!--\r\n QueryBuilder \u2014 el Popover es el motor de anclaje; el disparador se proyecta\r\n como children y el panel como `[iusPopoverContent]`. Modo controlado\r\n (`[open]` + `(openChange)`) porque el borrador se re-siembra al abrir.\r\n `dismissable` queda apagado a prop\u00F3sito: ver el TSDoc de cabecera.\r\n-->\r\n<ius-popover\r\n trigger=\"click\"\r\n [placement]=\"placement()\"\r\n [showArrow]=\"false\"\r\n [offset]=\"8\"\r\n [open]=\"isOpen()\"\r\n panelClass=\"ius-querybuilder-pop\"\r\n (openChange)=\"onOpenChange($event)\"\r\n>\r\n <!-- \u2500\u2500 Disparador: bot\u00F3n \"Filtros\" con contador de reglas aplicadas \u2500\u2500 -->\r\n <button\r\n type=\"button\"\r\n class=\"ius-querybuilder__trigger\"\r\n [attr.data-open]=\"isOpen() ? 'true' : null\"\r\n [attr.data-active]=\"count() > 0 ? 'true' : null\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">filter_list</span>\r\n <span>{{ triggerLabel() }}</span>\r\n @if (count() > 0) {\r\n <span class=\"ius-querybuilder__count\">{{ count() }}</span>\r\n }\r\n <!-- Ligadura Material Symbols: el texto va pegado, sin espacios sueltos. -->\r\n <span translate=\"no\" class=\"ius-icon ius-querybuilder__chev\" aria-hidden=\"true\">expand_more</span>\r\n </button>\r\n\r\n <!-- \u2500\u2500 Panel: filas de criterio + footer (se estampa en el overlay) \u2500\u2500 -->\r\n <div iusPopoverContent class=\"ius-querybuilder__panel\">\r\n @if (draft().length === 0) {\r\n <div class=\"ius-querybuilder__empty\">\r\n <span class=\"ius-querybuilder__empty-t\">{{ emptyTitle() }}</span>\r\n <span class=\"ius-querybuilder__empty-h\">{{ emptyHint() }}</span>\r\n </div>\r\n } @else {\r\n <div class=\"ius-querybuilder__rows\">\r\n <!--\r\n `track row.id` (el RID incremental), NUNCA `$index`: al quitar una\r\n fila intermedia se reciclar\u00EDan los controles y los valores se\r\n cruzar\u00EDan entre filas.\r\n -->\r\n @for (row of draft(); track row.id; let i = $index) {\r\n <div class=\"ius-querybuilder__rule\">\r\n @if (i > 0) {\r\n <span class=\"ius-querybuilder__conj\">y</span>\r\n }\r\n\r\n <!--\r\n Orden de elementos del grid (lo usa el `:nth-child(3)` del\r\n responsive): campo \u00B7 operador \u00B7 valor \u00B7 quitar. Los bloques\r\n `@if` solo dejan comentarios, que no cuentan como elementos.\r\n -->\r\n <div class=\"ius-querybuilder__row\">\r\n <ius-select\r\n [options]=\"fieldOptionsFor(row.id)\"\r\n [value]=\"row.field\"\r\n [size]=\"size()\"\r\n [searchable]=\"fieldsSearchable()\"\r\n [showClear]=\"false\"\r\n [showHelpText]=\"false\"\r\n (valueChange)=\"onFieldChange(row.id, $event)\"\r\n />\r\n\r\n <ius-select\r\n [options]=\"operatorOptions(row.field)\"\r\n [value]=\"row.operator\"\r\n [size]=\"size()\"\r\n [searchable]=\"false\"\r\n [showClear]=\"false\"\r\n [showHelpText]=\"false\"\r\n (valueChange)=\"onOperatorChange(row.id, $event)\"\r\n />\r\n\r\n @if (typeOf(row.field) === 'enum') {\r\n <ius-select\r\n [options]=\"valueOptions(row.field)\"\r\n [value]=\"selectValue(row.value)\"\r\n placeholder=\"Selecciona un valor\"\r\n [size]=\"size()\"\r\n [searchable]=\"valueSearchable(row.field)\"\r\n [showClear]=\"false\"\r\n [showHelpText]=\"false\"\r\n (valueChange)=\"onValueChange(row.id, $event)\"\r\n />\r\n } @else {\r\n <!--\r\n `[ngModel]` de una v\u00EDa: TextField expone su valor solo por\r\n CVA y hace falta poder vaciarlo al cambiar el campo.\r\n -->\r\n <ius-text-field\r\n [ngModel]=\"textValue(row.value)\"\r\n (ngModelChange)=\"onTextValueChange(row.id, $event)\"\r\n [placeholder]=\"valuePlaceholder(row.field)\"\r\n [size]=\"size()\"\r\n [showHelpText]=\"false\"\r\n />\r\n }\r\n\r\n <ius-icon-button\r\n icon=\"close\"\r\n variant=\"tertiary\"\r\n [size]=\"size()\"\r\n ariaLabel=\"Quitar filtro\"\r\n (clicked)=\"removeRow(row.id)\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- \u2500\u2500 Footer: a\u00F1adir \u00B7 limpiar \u00B7 aplicar (staged) \u2500\u2500 -->\r\n <div class=\"ius-querybuilder__foot\">\r\n <ius-text-button\r\n [label]=\"addLabel()\"\r\n prefixIcon=\"add\"\r\n [size]=\"size()\"\r\n [disabled]=\"atCap()\"\r\n (clicked)=\"addRow()\"\r\n />\r\n <span class=\"ius-querybuilder__foot-r\">\r\n @if (draft().length) {\r\n <ius-text-button\r\n [label]=\"clearLabel()\"\r\n [size]=\"size()\"\r\n (clicked)=\"clearAll()\"\r\n />\r\n }\r\n <ius-button\r\n variant=\"primary\"\r\n [size]=\"size()\"\r\n [label]=\"applyText()\"\r\n [disabled]=\"applyDisabled()\"\r\n (clicked)=\"applyDraft()\"\r\n />\r\n </span>\r\n </div>\r\n </div>\r\n</ius-popover>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center}.ius-querybuilder__trigger{appearance:none;display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-body);font-size:var(--ius-fs-base);line-height:1;color:var(--ius-text-primary);background:var(--ius-neutral-white);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);padding:var(--ius-space-xs) var(--ius-space-sm);cursor:pointer;transition:border-color var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard);-webkit-user-select:none;user-select:none}.ius-querybuilder__trigger:hover{border-color:var(--ius-primary-500);color:var(--ius-primary-900)}.ius-querybuilder__trigger:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-querybuilder__trigger[data-active=true]{border-color:var(--ius-primary-500);color:var(--ius-primary-900)}.ius-querybuilder__trigger .ius-icon{font-size:var(--ius-icon-md)}.ius-querybuilder__count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 var(--ius-space-xxs);border-radius:var(--ius-radius-pill);background:var(--ius-primary-900);color:var(--ius-neutral-white);font-size:var(--ius-fs-sm);font-variant-numeric:tabular-nums;line-height:1}.ius-querybuilder__chev{font-size:var(--ius-icon-md);color:var(--ius-text-tertiary);transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-querybuilder__trigger[data-open=true] .ius-querybuilder__chev{transform:rotate(180deg)}.ius-querybuilder__panel{display:flex;flex-direction:column;gap:var(--ius-space-md);width:min(720px,100vw - var(--ius-space-2xl));max-width:100%;box-sizing:border-box}.ius-querybuilder__rows{display:flex;flex-direction:column;gap:var(--ius-space-sm)}.ius-querybuilder__rule{display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-querybuilder__conj{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary);padding-left:var(--ius-space-xxs)}.ius-querybuilder__row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr) minmax(0,1.7fr) auto;gap:var(--ius-space-sm);align-items:center}.ius-querybuilder__row>*{min-width:0}.ius-querybuilder__row ::ng-deep .ius-tf__field{flex-wrap:nowrap}.ius-querybuilder__empty{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ius-space-xs);padding:var(--ius-space-xs) 0}.ius-querybuilder__empty-t{font-family:var(--ius-font-display);font-weight:var(--ius-fw-bold, 700);font-size:var(--ius-fs-base);color:var(--ius-text-primary)}.ius-querybuilder__empty-h{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary)}.ius-querybuilder__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--ius-space-sm);border-top:1px solid var(--ius-stroke);padding-top:var(--ius-space-md)}.ius-querybuilder__foot-r{display:inline-flex;align-items:center;gap:var(--ius-space-sm)}@media(max-width:600px){.ius-querybuilder__row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}.ius-querybuilder__row>:nth-child(3){grid-column:1/3}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PopoverComponent, selector: "ius-popover", inputs: ["title", "content", "placement", "trigger", "offset", "open", "defaultOpen", "showArrow", "disabled", "anchorRect", "padding", "dismissable", "panelClass"], outputs: ["openChange"] }, { kind: "component", type: SelectComponent, selector: "ius-select", inputs: ["options", "multiple", "size", "disabled", "error", "state", "open", "value", "label", "required", "placeholder", "prefixIcon", "searchable", "searchPlaceholder", "emptyText", "creatable", "createPlaceholder", "createLabel", "createFactory", "maxVisible", "helpText", "errorText", "showHelpText", "showIconHelp", "iconHelpTitle", "iconHelpContent", "showClear", "defaultOpen", "compact", "defaultValue", "id", "name"], outputs: ["valueChange", "cleared", "openChange", "created"] }, { kind: "component", type: TextFieldComponent, selector: "ius-text-field", inputs: ["label", "placeholder", "required", "prefixIcon", "showClear", "helpText", "errorText", "showHelpText", "showIconHelp", "iconHelpTitle", "iconHelpContent", "error", "name", "autocomplete", "type", "size", "disabled"], outputs: ["valueChange", "cleared"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "ariaPressed", "tooltipPlacement"], outputs: ["clicked"] }, { kind: "component", type: ButtonComponent, selector: "ius-button", inputs: ["variant", "label", "prefixIcon", "sufixIcon", "dynamic", "loading", "status", "disabled", "pressed", "fullWidth", "type", "ariaLabel", "action", "size"], outputs: ["clicked"] }, { kind: "component", type: TextButtonComponent, selector: "ius-text-button", inputs: ["label", "prefixIcon", "sufixIcon", "size", "disabled", "type", "ariaExpanded", "ariaControls"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
11493
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: QueryBuilderComponent, isStandalone: true, selector: "ius-query-builder", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, addLabel: { classPropertyName: "addLabel", publicName: "addLabel", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, applyLabel: { classPropertyName: "applyLabel", publicName: "applyLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyHint: { classPropertyName: "emptyHint", publicName: "emptyHint", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply" }, host: { classAttribute: "ius-querybuilder" }, ngImport: i0, template: "<!--\r\n QueryBuilder \u2014 el Popover es el motor de anclaje; el disparador se proyecta\r\n como children y el panel como `[iusPopoverContent]`. Modo controlado\r\n (`[open]` + `(openChange)`) porque el borrador se re-siembra al abrir.\r\n `dismissable` queda apagado a prop\u00F3sito: ver el TSDoc de cabecera.\r\n-->\r\n<ius-popover\r\n trigger=\"click\"\r\n [placement]=\"placement()\"\r\n [showArrow]=\"false\"\r\n [offset]=\"8\"\r\n [open]=\"isOpen()\"\r\n panelClass=\"ius-querybuilder-pop\"\r\n (openChange)=\"onOpenChange($event)\"\r\n>\r\n <!-- \u2500\u2500 Disparador: bot\u00F3n \"Filtros\" con contador de reglas aplicadas \u2500\u2500 -->\r\n <button\r\n type=\"button\"\r\n class=\"ius-querybuilder__trigger\"\r\n [attr.data-open]=\"isOpen() ? 'true' : null\"\r\n [attr.data-active]=\"count() > 0 ? 'true' : null\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">filter_list</span>\r\n <span>{{ triggerLabel() }}</span>\r\n @if (count() > 0) {\r\n <span class=\"ius-querybuilder__count\">{{ count() }}</span>\r\n }\r\n <!-- Ligadura Material Symbols: el texto va pegado, sin espacios sueltos. -->\r\n <span translate=\"no\" class=\"ius-icon ius-querybuilder__chev\" aria-hidden=\"true\">expand_more</span>\r\n </button>\r\n\r\n <!-- \u2500\u2500 Panel: filas de criterio + footer (se estampa en el overlay) \u2500\u2500 -->\r\n <div iusPopoverContent class=\"ius-querybuilder__panel\">\r\n @if (draft().length === 0) {\r\n <div class=\"ius-querybuilder__empty\">\r\n <span class=\"ius-querybuilder__empty-t\">{{ emptyTitle() }}</span>\r\n <span class=\"ius-querybuilder__empty-h\">{{ emptyHint() }}</span>\r\n </div>\r\n } @else {\r\n <div class=\"ius-querybuilder__rows\">\r\n <!--\r\n `track row.id` (el RID incremental), NUNCA `$index`: al quitar una\r\n fila intermedia se reciclar\u00EDan los controles y los valores se\r\n cruzar\u00EDan entre filas.\r\n -->\r\n @for (row of draft(); track row.id; let i = $index) {\r\n <div class=\"ius-querybuilder__rule\">\r\n @if (i > 0) {\r\n <span class=\"ius-querybuilder__conj\">y</span>\r\n }\r\n\r\n <!--\r\n Orden de elementos del grid (lo usa el `:nth-child(3)` del\r\n responsive): campo \u00B7 operador \u00B7 valor \u00B7 quitar. Los bloques\r\n `@if` solo dejan comentarios, que no cuentan como elementos.\r\n -->\r\n <div class=\"ius-querybuilder__row\">\r\n <ius-select\r\n [options]=\"fieldOptionsFor(row.id)\"\r\n [value]=\"row.field\"\r\n [size]=\"size()\"\r\n [searchable]=\"fieldsSearchable()\"\r\n [showClear]=\"false\"\r\n [showHelpText]=\"false\"\r\n (valueChange)=\"onFieldChange(row.id, $event)\"\r\n />\r\n\r\n <ius-select\r\n [options]=\"operatorOptions(row.field)\"\r\n [value]=\"row.operator\"\r\n [size]=\"size()\"\r\n [searchable]=\"false\"\r\n [showClear]=\"false\"\r\n [showHelpText]=\"false\"\r\n (valueChange)=\"onOperatorChange(row.id, $event)\"\r\n />\r\n\r\n @if (typeOf(row.field) === 'enum') {\r\n <ius-select\r\n [options]=\"valueOptions(row.field)\"\r\n [value]=\"selectValue(row.value)\"\r\n placeholder=\"Selecciona un valor\"\r\n [size]=\"size()\"\r\n [searchable]=\"valueSearchable(row.field)\"\r\n [showClear]=\"false\"\r\n [showHelpText]=\"false\"\r\n (valueChange)=\"onValueChange(row.id, $event)\"\r\n />\r\n } @else {\r\n <!--\r\n `[ngModel]` de una v\u00EDa: TextField expone su valor solo por\r\n CVA y hace falta poder vaciarlo al cambiar el campo.\r\n -->\r\n <ius-text-field\r\n [ngModel]=\"textValue(row.value)\"\r\n (ngModelChange)=\"onTextValueChange(row.id, $event)\"\r\n [placeholder]=\"valuePlaceholder(row.field)\"\r\n [size]=\"size()\"\r\n [showHelpText]=\"false\"\r\n />\r\n }\r\n\r\n <ius-icon-button\r\n icon=\"close\"\r\n variant=\"tertiary\"\r\n [size]=\"size()\"\r\n ariaLabel=\"Quitar filtro\"\r\n (clicked)=\"removeRow(row.id)\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- \u2500\u2500 Footer: a\u00F1adir \u00B7 limpiar \u00B7 aplicar (staged) \u2500\u2500 -->\r\n <div class=\"ius-querybuilder__foot\">\r\n <ius-text-button\r\n [label]=\"addLabel()\"\r\n prefixIcon=\"add\"\r\n [size]=\"size()\"\r\n [disabled]=\"atCap()\"\r\n (clicked)=\"addRow()\"\r\n />\r\n <span class=\"ius-querybuilder__foot-r\">\r\n @if (draft().length) {\r\n <ius-text-button\r\n [label]=\"clearLabel()\"\r\n [size]=\"size()\"\r\n (clicked)=\"clearAll()\"\r\n />\r\n }\r\n <ius-button\r\n variant=\"primary\"\r\n [size]=\"size()\"\r\n [label]=\"applyText()\"\r\n [disabled]=\"applyDisabled()\"\r\n (clicked)=\"applyDraft()\"\r\n />\r\n </span>\r\n </div>\r\n </div>\r\n</ius-popover>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center}.ius-querybuilder__trigger{appearance:none;display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-body);font-size:var(--ius-fs-base);line-height:1;color:var(--ius-text-primary);background:var(--ius-neutral-white);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);padding:var(--ius-space-xs) var(--ius-space-sm);cursor:pointer;transition:border-color var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard);-webkit-user-select:none;user-select:none}.ius-querybuilder__trigger:hover{border-color:var(--ius-primary-500);color:var(--ius-primary-900)}.ius-querybuilder__trigger:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-querybuilder__trigger[data-active=true]{border-color:var(--ius-primary-500);color:var(--ius-primary-900)}.ius-querybuilder__trigger .ius-icon{font-size:var(--ius-icon-md)}.ius-querybuilder__count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 var(--ius-space-xxs);border-radius:var(--ius-radius-pill);background:var(--ius-primary-900);color:var(--ius-neutral-white);font-size:var(--ius-fs-sm);font-variant-numeric:tabular-nums;line-height:1}.ius-querybuilder__chev{font-size:var(--ius-icon-md);color:var(--ius-text-tertiary);transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-querybuilder__trigger[data-open=true] .ius-querybuilder__chev{transform:rotate(180deg)}.ius-querybuilder__panel{display:flex;flex-direction:column;gap:var(--ius-space-md);width:min(720px,100vw - var(--ius-space-2xl));max-width:100%;box-sizing:border-box}.ius-querybuilder__rows{display:flex;flex-direction:column;gap:var(--ius-space-sm)}.ius-querybuilder__rule{display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-querybuilder__conj{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary);padding-left:var(--ius-space-xxs)}.ius-querybuilder__row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr) minmax(0,1.7fr) auto;gap:var(--ius-space-sm);align-items:center}.ius-querybuilder__row>*{min-width:0}.ius-querybuilder__row ::ng-deep .ius-tf__field{flex-wrap:nowrap}.ius-querybuilder__empty{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ius-space-xs);padding:var(--ius-space-xs) 0}.ius-querybuilder__empty-t{font-family:var(--ius-font-display);font-weight:var(--ius-fw-bold, 700);font-size:var(--ius-fs-base);color:var(--ius-text-primary)}.ius-querybuilder__empty-h{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary)}.ius-querybuilder__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--ius-space-sm);border-top:1px solid var(--ius-stroke);padding-top:var(--ius-space-md)}.ius-querybuilder__foot-r{display:inline-flex;align-items:center;gap:var(--ius-space-sm)}@media(max-width:600px){.ius-querybuilder__row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}.ius-querybuilder__row>:nth-child(3){grid-column:1/3}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PopoverComponent, selector: "ius-popover", inputs: ["title", "content", "placement", "trigger", "offset", "open", "defaultOpen", "showArrow", "disabled", "anchorRect", "padding", "dismissable", "panelClass"], outputs: ["openChange"] }, { kind: "component", type: SelectComponent, selector: "ius-select", inputs: ["options", "multiple", "size", "disabled", "error", "state", "open", "value", "label", "required", "placeholder", "prefixIcon", "searchable", "searchPlaceholder", "emptyText", "creatable", "createPlaceholder", "createLabel", "createFactory", "maxVisible", "helpText", "errorText", "showHelpText", "showIconHelp", "iconHelpTitle", "iconHelpContent", "showClear", "defaultOpen", "compact", "defaultValue", "id", "name"], outputs: ["valueChange", "cleared", "openChange", "created"] }, { kind: "component", type: TextFieldComponent, selector: "ius-text-field", inputs: ["label", "placeholder", "required", "prefixIcon", "showClear", "helpText", "errorText", "showHelpText", "showIconHelp", "iconHelpTitle", "iconHelpContent", "error", "name", "autocomplete", "type", "inputMode", "maxLength", "size", "disabled"], outputs: ["valueChange", "cleared"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "ariaPressed", "tooltipPlacement"], outputs: ["clicked"] }, { kind: "component", type: ButtonComponent, selector: "ius-button", inputs: ["variant", "label", "prefixIcon", "sufixIcon", "dynamic", "loading", "status", "disabled", "pressed", "fullWidth", "type", "ariaLabel", "action", "size"], outputs: ["clicked"] }, { kind: "component", type: TextButtonComponent, selector: "ius-text-button", inputs: ["label", "prefixIcon", "sufixIcon", "size", "disabled", "type", "ariaExpanded", "ariaControls"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
11465
11494
|
}
|
|
11466
11495
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: QueryBuilderComponent, decorators: [{
|
|
11467
11496
|
type: Component,
|
|
@@ -18141,7 +18170,7 @@ class RepeatableFieldComponent {
|
|
|
18141
18170
|
useExisting: forwardRef(() => RepeatableFieldComponent),
|
|
18142
18171
|
multi: true,
|
|
18143
18172
|
},
|
|
18144
|
-
], ngImport: i0, template: "@if (label) {\r\n <span class=\"ius-repeat__label\" [id]=\"labelId\">\r\n @if (required) {\r\n <span class=\"ius-repeat__req\" aria-hidden=\"true\"></span>\r\n }\r\n {{ label }}\r\n </span>\r\n}\r\n\r\n<div class=\"ius-repeat__rows\" role=\"group\" [attr.aria-labelledby]=\"label ? labelId : null\">\r\n @for (vm of filasVM(); track vm.fila.id) {\r\n <div class=\"ius-repeat__row\">\r\n @if (conTipos()) {\r\n <div class=\"ius-repeat__type\" [style.width]=\"anchoTipo\">\r\n <ius-select\r\n [options]=\"opcionesTipo()\"\r\n [value]=\"vm.fila.type ?? null\"\r\n [placeholder]=\"typePlaceholder\"\r\n [searchable]=\"false\"\r\n [showClear]=\"false\"\r\n [showHelpText]=\"false\"\r\n [disabled]=\"disabled\"\r\n [size]=\"size\"\r\n (valueChange)=\"setTipo(vm.fila.id, $event)\"\r\n />\r\n </div>\r\n }\r\n\r\n <div class=\"ius-repeat__control\">\r\n @if (renderControl) {\r\n <ng-container [ngTemplateOutlet]=\"renderControl\" [ngTemplateOutletContext]=\"vm.ctx\" />\r\n } @else {\r\n <!--\r\n `[ngModel]` de una v\u00EDa: TextField expone su valor solo por CVA (mismo\r\n recurso que ius-query-builder). `standalone` evita que un <form> del\r\n consumidor intente registrar estos inputs como controles con nombre.\r\n -->\r\n <ius-text-field\r\n [ngModel]=\"vm.texto\"\r\n [ngModelOptions]=\"ngModelSuelto\"\r\n [placeholder]=\"placeholder\"\r\n [prefixIcon]=\"prefixIcon\"\r\n [type]=\"tipoInput()\"\r\n [disabled]=\"disabled\"\r\n [size]=\"size\"\r\n [error]=\"vm.error\"\r\n [errorText]=\"vm.errorText\"\r\n [showHelpText]=\"!!vm.errorText\"\r\n [showClear]=\"false\"\r\n (ngModelChange)=\"setValor(vm.fila.id, $event)\"\r\n />\r\n }\r\n </div>\r\n\r\n <div class=\"ius-repeat__remove\">\r\n <ius-icon-button\r\n icon=\"close\"\r\n variant=\"tertiary\"\r\n shape=\"squared\"\r\n size=\"small\"\r\n tooltip=\"Quitar\"\r\n ariaLabel=\"Quitar fila\"\r\n [disabled]=\"vm.quitarDeshabilitado\"\r\n (clicked)=\"quitar(vm.fila.id)\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n\r\n<div class=\"ius-repeat__foot\">\r\n <ius-text-button\r\n [prefixIcon]=\"addIcon\"\r\n [label]=\"addLabel\"\r\n [size]=\"size\"\r\n [disabled]=\"disabled || alTope()\"\r\n (clicked)=\"agregar()\"\r\n />\r\n</div>\r\n\r\n@if (pie()) {\r\n <span class=\"ius-repeat__hint\">{{ pie() }}</span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);--_rf-field-h: 40px}:host([data-size=small]){--_rf-field-h: 34px}:host([data-size=large]){--_rf-field-h: 48px}@container style(--ius-control-size: small){:host(:not([data-size])){--_rf-field-h: 34px}}@container style(--ius-control-size: large){:host(:not([data-size])){--_rf-field-h: 48px}}.ius-repeat__label{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font:var(--ius-fw-medium) var(--ius-fs-sm)/var(--ius-lh-sm) var(--ius-font-body);color:var(--ius-text-secondary)}.ius-repeat__req{width:6px;height:6px;border-radius:var(--ius-radius-pill);background:var(--ius-danger-500);flex:0 0 auto}.ius-repeat__rows{display:flex;flex-direction:column;gap:var(--ius-space-sm)}.ius-repeat__row{display:flex;align-items:flex-start;gap:var(--ius-space-xs)}.ius-repeat__type{flex:0 0 auto;width:var(--_rf-type-w, 150px)}.ius-repeat__type .ius-tf{min-width:0;max-width:none;width:100%}.ius-repeat__type ::ng-deep .ius-select__chevron{height:var(--ius-lh-base)}.ius-repeat__row ::ng-deep .ius-tf__field{align-items:center}.ius-repeat__control{flex:1 1 auto;min-width:0}.ius-repeat__control .ius-tf{max-width:none;width:100%}.ius-repeat__remove{flex:0 0 auto;height:var(--_rf-field-h);display:flex;align-items:center}.ius-repeat__foot{display:flex}.ius-repeat__hint{font:var(--ius-fw-regular) var(--ius-fs-sm)/var(--ius-lh-sm) var(--ius-font-body);color:var(--ius-text-tertiary)}:host([data-error=true]) .ius-repeat__hint{color:var(--ius-danger-700)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextFieldComponent, selector: "ius-text-field", inputs: ["label", "placeholder", "required", "prefixIcon", "showClear", "helpText", "errorText", "showHelpText", "showIconHelp", "iconHelpTitle", "iconHelpContent", "error", "name", "autocomplete", "type", "size", "disabled"], outputs: ["valueChange", "cleared"] }, { kind: "component", type: SelectComponent, selector: "ius-select", inputs: ["options", "multiple", "size", "disabled", "error", "state", "open", "value", "label", "required", "placeholder", "prefixIcon", "searchable", "searchPlaceholder", "emptyText", "creatable", "createPlaceholder", "createLabel", "createFactory", "maxVisible", "helpText", "errorText", "showHelpText", "showIconHelp", "iconHelpTitle", "iconHelpContent", "showClear", "defaultOpen", "compact", "defaultValue", "id", "name"], outputs: ["valueChange", "cleared", "openChange", "created"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "ariaPressed", "tooltipPlacement"], outputs: ["clicked"] }, { kind: "component", type: TextButtonComponent, selector: "ius-text-button", inputs: ["label", "prefixIcon", "sufixIcon", "size", "disabled", "type", "ariaExpanded", "ariaControls"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
18173
|
+
], ngImport: i0, template: "@if (label) {\r\n <span class=\"ius-repeat__label\" [id]=\"labelId\">\r\n @if (required) {\r\n <span class=\"ius-repeat__req\" aria-hidden=\"true\"></span>\r\n }\r\n {{ label }}\r\n </span>\r\n}\r\n\r\n<div class=\"ius-repeat__rows\" role=\"group\" [attr.aria-labelledby]=\"label ? labelId : null\">\r\n @for (vm of filasVM(); track vm.fila.id) {\r\n <div class=\"ius-repeat__row\">\r\n @if (conTipos()) {\r\n <div class=\"ius-repeat__type\" [style.width]=\"anchoTipo\">\r\n <ius-select\r\n [options]=\"opcionesTipo()\"\r\n [value]=\"vm.fila.type ?? null\"\r\n [placeholder]=\"typePlaceholder\"\r\n [searchable]=\"false\"\r\n [showClear]=\"false\"\r\n [showHelpText]=\"false\"\r\n [disabled]=\"disabled\"\r\n [size]=\"size\"\r\n (valueChange)=\"setTipo(vm.fila.id, $event)\"\r\n />\r\n </div>\r\n }\r\n\r\n <div class=\"ius-repeat__control\">\r\n @if (renderControl) {\r\n <ng-container [ngTemplateOutlet]=\"renderControl\" [ngTemplateOutletContext]=\"vm.ctx\" />\r\n } @else {\r\n <!--\r\n `[ngModel]` de una v\u00EDa: TextField expone su valor solo por CVA (mismo\r\n recurso que ius-query-builder). `standalone` evita que un <form> del\r\n consumidor intente registrar estos inputs como controles con nombre.\r\n -->\r\n <ius-text-field\r\n [ngModel]=\"vm.texto\"\r\n [ngModelOptions]=\"ngModelSuelto\"\r\n [placeholder]=\"placeholder\"\r\n [prefixIcon]=\"prefixIcon\"\r\n [type]=\"tipoInput()\"\r\n [disabled]=\"disabled\"\r\n [size]=\"size\"\r\n [error]=\"vm.error\"\r\n [errorText]=\"vm.errorText\"\r\n [showHelpText]=\"!!vm.errorText\"\r\n [showClear]=\"false\"\r\n (ngModelChange)=\"setValor(vm.fila.id, $event)\"\r\n />\r\n }\r\n </div>\r\n\r\n <div class=\"ius-repeat__remove\">\r\n <ius-icon-button\r\n icon=\"close\"\r\n variant=\"tertiary\"\r\n shape=\"squared\"\r\n size=\"small\"\r\n tooltip=\"Quitar\"\r\n ariaLabel=\"Quitar fila\"\r\n [disabled]=\"vm.quitarDeshabilitado\"\r\n (clicked)=\"quitar(vm.fila.id)\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n\r\n<div class=\"ius-repeat__foot\">\r\n <ius-text-button\r\n [prefixIcon]=\"addIcon\"\r\n [label]=\"addLabel\"\r\n [size]=\"size\"\r\n [disabled]=\"disabled || alTope()\"\r\n (clicked)=\"agregar()\"\r\n />\r\n</div>\r\n\r\n@if (pie()) {\r\n <span class=\"ius-repeat__hint\">{{ pie() }}</span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);--_rf-field-h: 40px}:host([data-size=small]){--_rf-field-h: 34px}:host([data-size=large]){--_rf-field-h: 48px}@container style(--ius-control-size: small){:host(:not([data-size])){--_rf-field-h: 34px}}@container style(--ius-control-size: large){:host(:not([data-size])){--_rf-field-h: 48px}}.ius-repeat__label{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font:var(--ius-fw-medium) var(--ius-fs-sm)/var(--ius-lh-sm) var(--ius-font-body);color:var(--ius-text-secondary)}.ius-repeat__req{width:6px;height:6px;border-radius:var(--ius-radius-pill);background:var(--ius-danger-500);flex:0 0 auto}.ius-repeat__rows{display:flex;flex-direction:column;gap:var(--ius-space-sm)}.ius-repeat__row{display:flex;align-items:flex-start;gap:var(--ius-space-xs)}.ius-repeat__type{flex:0 0 auto;width:var(--_rf-type-w, 150px)}.ius-repeat__type .ius-tf{min-width:0;max-width:none;width:100%}.ius-repeat__type ::ng-deep .ius-select__chevron{height:var(--ius-lh-base)}.ius-repeat__row ::ng-deep .ius-tf__field{align-items:center}.ius-repeat__control{flex:1 1 auto;min-width:0}.ius-repeat__control .ius-tf{max-width:none;width:100%}.ius-repeat__remove{flex:0 0 auto;height:var(--_rf-field-h);display:flex;align-items:center}.ius-repeat__foot{display:flex}.ius-repeat__hint{font:var(--ius-fw-regular) var(--ius-fs-sm)/var(--ius-lh-sm) var(--ius-font-body);color:var(--ius-text-tertiary)}:host([data-error=true]) .ius-repeat__hint{color:var(--ius-danger-700)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextFieldComponent, selector: "ius-text-field", inputs: ["label", "placeholder", "required", "prefixIcon", "showClear", "helpText", "errorText", "showHelpText", "showIconHelp", "iconHelpTitle", "iconHelpContent", "error", "name", "autocomplete", "type", "inputMode", "maxLength", "size", "disabled"], outputs: ["valueChange", "cleared"] }, { kind: "component", type: SelectComponent, selector: "ius-select", inputs: ["options", "multiple", "size", "disabled", "error", "state", "open", "value", "label", "required", "placeholder", "prefixIcon", "searchable", "searchPlaceholder", "emptyText", "creatable", "createPlaceholder", "createLabel", "createFactory", "maxVisible", "helpText", "errorText", "showHelpText", "showIconHelp", "iconHelpTitle", "iconHelpContent", "showClear", "defaultOpen", "compact", "defaultValue", "id", "name"], outputs: ["valueChange", "cleared", "openChange", "created"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "ariaPressed", "tooltipPlacement"], outputs: ["clicked"] }, { kind: "component", type: TextButtonComponent, selector: "ius-text-button", inputs: ["label", "prefixIcon", "sufixIcon", "size", "disabled", "type", "ariaExpanded", "ariaControls"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
18145
18174
|
}
|
|
18146
18175
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RepeatableFieldComponent, decorators: [{
|
|
18147
18176
|
type: Component,
|
|
@@ -21334,7 +21363,7 @@ class AutocompleteComponent {
|
|
|
21334
21363
|
useExisting: forwardRef(() => AutocompleteComponent),
|
|
21335
21364
|
multi: true,
|
|
21336
21365
|
},
|
|
21337
|
-
], viewQueries: [{ propertyName: "campo", first: true, predicate: ["campo"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<!--\r\n Trigger (el TextField) como children del popover y la lista como\r\n `[iusPopoverContent]` \u2014 mismo patr\u00F3n que ius-person-picker / ius-query-builder.\r\n `trigger=\"manual\"` porque la apertura la gobierna este componente;\r\n `dismissable` cubre Esc y pointerdown fuera.\r\n-->\r\n<ius-popover\r\n trigger=\"manual\"\r\n [open]=\"listaVisible()\"\r\n [placement]=\"placement\"\r\n [offset]=\"4\"\r\n [showArrow]=\"false\"\r\n padding=\"none\"\r\n dismissable\r\n panelClass=\"ius-autocomplete-pop\"\r\n (openChange)=\"onPopoverOpenChange($event)\"\r\n>\r\n <!--\r\n `[ngModel]` de una v\u00EDa: TextField expone su valor solo por CVA (mismo\r\n recurso que ius-query-builder). `standalone` evita que un <form> del\r\n consumidor intente registrar este input como control con nombre.\r\n\r\n `[name]` lo consumen DOS directivas a la vez \u2014 el TextField y el propio\r\n NgModel, que lo exige no-nulo \u2014 de ah\u00ED el `?? ''`. Con `standalone` ese\r\n nombre es inerte para el formulario y solo cuenta el que llega al input.\r\n -->\r\n <ius-text-field\r\n #campo\r\n [ngModel]=\"queryText()\"\r\n [ngModelOptions]=\"ngModelSuelto\"\r\n [label]=\"label\"\r\n [placeholder]=\"placeholder\"\r\n [size]=\"size\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [error]=\"error\"\r\n [errorText]=\"errorText\"\r\n [helpText]=\"helpText\"\r\n [prefixIcon]=\"prefixIcon\"\r\n [name]=\"name ?? ''\"\r\n autocomplete=\"off\"\r\n [showClear]=\"mostrarClear()\"\r\n (ngModelChange)=\"onInput($event)\"\r\n (cleared)=\"onClear()\"\r\n />\r\n\r\n <div iusPopoverContent class=\"ius-autocomplete__panel\" [style.width.px]=\"anchoMenu()\">\r\n @if (cargando()) {\r\n <div class=\"ius-autocomplete__loading\">\r\n <span class=\"ius-autocomplete__spinner\" aria-hidden=\"true\"></span>\r\n {{ loadingText }}\r\n </div>\r\n } @else if (itemsVM().length === 0) {\r\n <div class=\"ius-autocomplete__msg\">{{ mensajeVacio() }}</div>\r\n } @else {\r\n <div class=\"ius-autocomplete__list ius-scroll ius-scroll--sm\" role=\"listbox\">\r\n @for (vm of itemsVM(); track vm.key) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-autocomplete__item\"\r\n role=\"option\"\r\n [attr.data-highlighted]=\"vm.ctx.highlighted ? 'true' : null\"\r\n [attr.aria-selected]=\"vm.ctx.highlighted ? 'true' : 'false'\"\r\n (mousedown)=\"onItemMouseDown($event, vm.item)\"\r\n (mouseenter)=\"resaltado.set(vm.index)\"\r\n >\r\n @if (renderItem) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"renderItem\"\r\n [ngTemplateOutletContext]=\"vm.ctx\"\r\n />\r\n } @else if (vm.match) {\r\n <!-- una sola l\u00EDnea a prop\u00F3sito: un salto aqu\u00ED inyectar\u00EDa espacios dentro del label -->\r\n <span class=\"ius-autocomplete__item-label\">{{ vm.pre }}<mark class=\"ius-autocomplete__item-match\">{{ vm.match }}</mark>{{ vm.post }}</span>\r\n } @else {\r\n <span class=\"ius-autocomplete__item-label\">{{ vm.label }}</span>\r\n }\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</ius-popover>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}ius-popover{display:block;width:100%}.ius-autocomplete__panel{display:block;min-width:0}.ius-autocomplete__list{display:flex;flex-direction:column;min-width:240px;max-height:280px;overflow-y:auto;font-family:var(--ius-font-body)}.ius-autocomplete__item{appearance:none;border:0;background:transparent;display:flex;align-items:center;gap:var(--ius-space-xs);text-align:left;cursor:pointer;padding:var(--ius-space-xs) var(--ius-space-sm);min-width:0;font:var(--ius-fw-regular) var(--ius-fs-sm)/1.4 var(--ius-font-body);color:var(--ius-text-primary)}.ius-autocomplete__item:hover,.ius-autocomplete__item[data-highlighted=true]{background:var(--ius-neutral-1)}.ius-autocomplete__item:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-autocomplete__item ::ng-deep .ius-icon{font-size:var(--ius-icon-md);color:var(--ius-text-tertiary);flex:0 0 auto}.ius-autocomplete__item ::ng-deep .ius-autocomplete__item-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}.ius-autocomplete__item-match{font-weight:var(--ius-fw-semibold);color:var(--ius-text-primary);background:var(--ius-info-100);border-radius:var(--ius-radius-sm);padding:0 var(--ius-space-xxs)}.ius-autocomplete__msg{padding:var(--ius-space-sm) var(--ius-space-md);font:var(--ius-fw-regular) 12.5px/1.4 var(--ius-font-body);color:var(--ius-text-tertiary);text-align:center}.ius-autocomplete__loading{display:flex;align-items:center;justify-content:center;gap:var(--ius-space-xs);padding:var(--ius-space-sm) var(--ius-space-md);font-size:12.5px;color:var(--ius-text-secondary)}.ius-autocomplete__spinner{width:14px;height:14px;border-radius:50%;border:2px solid var(--ius-neutral-3);border-top-color:var(--ius-primary-500);animation:ius-autocomplete-spin .8s linear infinite}@keyframes ius-autocomplete-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.ius-autocomplete__spinner{animation-duration:2s}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextFieldComponent, selector: "ius-text-field", inputs: ["label", "placeholder", "required", "prefixIcon", "showClear", "helpText", "errorText", "showHelpText", "showIconHelp", "iconHelpTitle", "iconHelpContent", "error", "name", "autocomplete", "type", "size", "disabled"], outputs: ["valueChange", "cleared"] }, { kind: "component", type: PopoverComponent, selector: "ius-popover", inputs: ["title", "content", "placement", "trigger", "offset", "open", "defaultOpen", "showArrow", "disabled", "anchorRect", "padding", "dismissable", "panelClass"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
21366
|
+
], viewQueries: [{ propertyName: "campo", first: true, predicate: ["campo"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<!--\r\n Trigger (el TextField) como children del popover y la lista como\r\n `[iusPopoverContent]` \u2014 mismo patr\u00F3n que ius-person-picker / ius-query-builder.\r\n `trigger=\"manual\"` porque la apertura la gobierna este componente;\r\n `dismissable` cubre Esc y pointerdown fuera.\r\n-->\r\n<ius-popover\r\n trigger=\"manual\"\r\n [open]=\"listaVisible()\"\r\n [placement]=\"placement\"\r\n [offset]=\"4\"\r\n [showArrow]=\"false\"\r\n padding=\"none\"\r\n dismissable\r\n panelClass=\"ius-autocomplete-pop\"\r\n (openChange)=\"onPopoverOpenChange($event)\"\r\n>\r\n <!--\r\n `[ngModel]` de una v\u00EDa: TextField expone su valor solo por CVA (mismo\r\n recurso que ius-query-builder). `standalone` evita que un <form> del\r\n consumidor intente registrar este input como control con nombre.\r\n\r\n `[name]` lo consumen DOS directivas a la vez \u2014 el TextField y el propio\r\n NgModel, que lo exige no-nulo \u2014 de ah\u00ED el `?? ''`. Con `standalone` ese\r\n nombre es inerte para el formulario y solo cuenta el que llega al input.\r\n -->\r\n <ius-text-field\r\n #campo\r\n [ngModel]=\"queryText()\"\r\n [ngModelOptions]=\"ngModelSuelto\"\r\n [label]=\"label\"\r\n [placeholder]=\"placeholder\"\r\n [size]=\"size\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [error]=\"error\"\r\n [errorText]=\"errorText\"\r\n [helpText]=\"helpText\"\r\n [prefixIcon]=\"prefixIcon\"\r\n [name]=\"name ?? ''\"\r\n autocomplete=\"off\"\r\n [showClear]=\"mostrarClear()\"\r\n (ngModelChange)=\"onInput($event)\"\r\n (cleared)=\"onClear()\"\r\n />\r\n\r\n <div iusPopoverContent class=\"ius-autocomplete__panel\" [style.width.px]=\"anchoMenu()\">\r\n @if (cargando()) {\r\n <div class=\"ius-autocomplete__loading\">\r\n <span class=\"ius-autocomplete__spinner\" aria-hidden=\"true\"></span>\r\n {{ loadingText }}\r\n </div>\r\n } @else if (itemsVM().length === 0) {\r\n <div class=\"ius-autocomplete__msg\">{{ mensajeVacio() }}</div>\r\n } @else {\r\n <div class=\"ius-autocomplete__list ius-scroll ius-scroll--sm\" role=\"listbox\">\r\n @for (vm of itemsVM(); track vm.key) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-autocomplete__item\"\r\n role=\"option\"\r\n [attr.data-highlighted]=\"vm.ctx.highlighted ? 'true' : null\"\r\n [attr.aria-selected]=\"vm.ctx.highlighted ? 'true' : 'false'\"\r\n (mousedown)=\"onItemMouseDown($event, vm.item)\"\r\n (mouseenter)=\"resaltado.set(vm.index)\"\r\n >\r\n @if (renderItem) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"renderItem\"\r\n [ngTemplateOutletContext]=\"vm.ctx\"\r\n />\r\n } @else if (vm.match) {\r\n <!-- una sola l\u00EDnea a prop\u00F3sito: un salto aqu\u00ED inyectar\u00EDa espacios dentro del label -->\r\n <span class=\"ius-autocomplete__item-label\">{{ vm.pre }}<mark class=\"ius-autocomplete__item-match\">{{ vm.match }}</mark>{{ vm.post }}</span>\r\n } @else {\r\n <span class=\"ius-autocomplete__item-label\">{{ vm.label }}</span>\r\n }\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</ius-popover>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}ius-popover{display:block;width:100%}.ius-autocomplete__panel{display:block;min-width:0}.ius-autocomplete__list{display:flex;flex-direction:column;min-width:240px;max-height:280px;overflow-y:auto;font-family:var(--ius-font-body)}.ius-autocomplete__item{appearance:none;border:0;background:transparent;display:flex;align-items:center;gap:var(--ius-space-xs);text-align:left;cursor:pointer;padding:var(--ius-space-xs) var(--ius-space-sm);min-width:0;font:var(--ius-fw-regular) var(--ius-fs-sm)/1.4 var(--ius-font-body);color:var(--ius-text-primary)}.ius-autocomplete__item:hover,.ius-autocomplete__item[data-highlighted=true]{background:var(--ius-neutral-1)}.ius-autocomplete__item:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-autocomplete__item ::ng-deep .ius-icon{font-size:var(--ius-icon-md);color:var(--ius-text-tertiary);flex:0 0 auto}.ius-autocomplete__item ::ng-deep .ius-autocomplete__item-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}.ius-autocomplete__item-match{font-weight:var(--ius-fw-semibold);color:var(--ius-text-primary);background:var(--ius-info-100);border-radius:var(--ius-radius-sm);padding:0 var(--ius-space-xxs)}.ius-autocomplete__msg{padding:var(--ius-space-sm) var(--ius-space-md);font:var(--ius-fw-regular) 12.5px/1.4 var(--ius-font-body);color:var(--ius-text-tertiary);text-align:center}.ius-autocomplete__loading{display:flex;align-items:center;justify-content:center;gap:var(--ius-space-xs);padding:var(--ius-space-sm) var(--ius-space-md);font-size:12.5px;color:var(--ius-text-secondary)}.ius-autocomplete__spinner{width:14px;height:14px;border-radius:50%;border:2px solid var(--ius-neutral-3);border-top-color:var(--ius-primary-500);animation:ius-autocomplete-spin .8s linear infinite}@keyframes ius-autocomplete-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.ius-autocomplete__spinner{animation-duration:2s}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextFieldComponent, selector: "ius-text-field", inputs: ["label", "placeholder", "required", "prefixIcon", "showClear", "helpText", "errorText", "showHelpText", "showIconHelp", "iconHelpTitle", "iconHelpContent", "error", "name", "autocomplete", "type", "inputMode", "maxLength", "size", "disabled"], outputs: ["valueChange", "cleared"] }, { kind: "component", type: PopoverComponent, selector: "ius-popover", inputs: ["title", "content", "placement", "trigger", "offset", "open", "defaultOpen", "showArrow", "disabled", "anchorRect", "padding", "dismissable", "panelClass"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
21338
21367
|
}
|
|
21339
21368
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
21340
21369
|
type: Component,
|