@litigiovirtual/ius-design-components 2.5.1 → 2.6.0
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.
|
@@ -1310,7 +1310,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
1310
1310
|
type: Output
|
|
1311
1311
|
}] } });
|
|
1312
1312
|
|
|
1313
|
-
let uid$
|
|
1313
|
+
let uid$p = 0;
|
|
1314
1314
|
/**
|
|
1315
1315
|
* TextField — Ius Design v2.
|
|
1316
1316
|
*
|
|
@@ -1349,7 +1349,7 @@ class TextFieldComponent {
|
|
|
1349
1349
|
...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
|
|
1350
1350
|
this.revealed = signal(false, /* @ts-ignore */
|
|
1351
1351
|
...(ngDevMode ? [{ debugName: "revealed" }] : /* istanbul ignore next */ []));
|
|
1352
|
-
this.inputId = `ius-tf-${uid$
|
|
1352
|
+
this.inputId = `ius-tf-${uid$p++}`;
|
|
1353
1353
|
this.helpId = `${this.inputId}-help`;
|
|
1354
1354
|
this.onChange = () => { };
|
|
1355
1355
|
this.onTouched = () => { };
|
|
@@ -1440,7 +1440,7 @@ class TextFieldComponent {
|
|
|
1440
1440
|
useExisting: forwardRef(() => TextFieldComponent),
|
|
1441
1441
|
multi: true,
|
|
1442
1442
|
},
|
|
1443
|
-
], 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 (clearReserved) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-tf__clear\"\r\n [class.ius-tf__clear--hidden]=\"!showClearComputed\"\r\n aria-label=\"Limpiar campo\"\r\n [attr.aria-hidden]=\"showClearComputed ? null : 'true'\"\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--hidden{visibility:hidden;pointer-events:none}.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 }); }
|
|
1443
|
+
], 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 [attr.name]=\"name ?? null\"\r\n [attr.autocomplete]=\"autocomplete || null\"\r\n [attr.inputmode]=\"inputMode || null\"\r\n [attr.maxlength]=\"maxLengthAttr\"\r\n [attr.placeholder]=\"placeholder ?? null\"\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 (clearReserved) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-tf__clear\"\r\n [class.ius-tf__clear--hidden]=\"!showClearComputed\"\r\n aria-label=\"Limpiar campo\"\r\n [attr.aria-hidden]=\"showClearComputed ? null : 'true'\"\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--hidden{visibility:hidden;pointer-events:none}.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 }); }
|
|
1444
1444
|
}
|
|
1445
1445
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TextFieldComponent, decorators: [{
|
|
1446
1446
|
type: Component,
|
|
@@ -1456,7 +1456,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
1456
1456
|
'[attr.data-focused]': 'focused() || null',
|
|
1457
1457
|
'[attr.data-error]': 'error || null',
|
|
1458
1458
|
'[attr.data-disabled]': 'disabled || null',
|
|
1459
|
-
}, 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 (clearReserved) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-tf__clear\"\r\n [class.ius-tf__clear--hidden]=\"!showClearComputed\"\r\n aria-label=\"Limpiar campo\"\r\n [attr.aria-hidden]=\"showClearComputed ? null : 'true'\"\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--hidden{visibility:hidden;pointer-events:none}.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"] }]
|
|
1459
|
+
}, 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 [attr.name]=\"name ?? null\"\r\n [attr.autocomplete]=\"autocomplete || null\"\r\n [attr.inputmode]=\"inputMode || null\"\r\n [attr.maxlength]=\"maxLengthAttr\"\r\n [attr.placeholder]=\"placeholder ?? null\"\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 (clearReserved) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-tf__clear\"\r\n [class.ius-tf__clear--hidden]=\"!showClearComputed\"\r\n aria-label=\"Limpiar campo\"\r\n [attr.aria-hidden]=\"showClearComputed ? null : 'true'\"\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--hidden{visibility:hidden;pointer-events:none}.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"] }]
|
|
1460
1460
|
}], propDecorators: { label: [{
|
|
1461
1461
|
type: Input
|
|
1462
1462
|
}], placeholder: [{
|
|
@@ -1507,7 +1507,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
1507
1507
|
type: Output
|
|
1508
1508
|
}] } });
|
|
1509
1509
|
|
|
1510
|
-
let uid$
|
|
1510
|
+
let uid$o = 0;
|
|
1511
1511
|
/** Reparte una cadena en `length` casillas (1 carácter por casilla). */
|
|
1512
1512
|
function toChars(str, length) {
|
|
1513
1513
|
const out = new Array(length).fill('');
|
|
@@ -1567,7 +1567,7 @@ class CodeFieldComponent {
|
|
|
1567
1567
|
...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
|
|
1568
1568
|
this.indexes = computed(() => this.chars().map((_, i) => i), /* @ts-ignore */
|
|
1569
1569
|
...(ngDevMode ? [{ debugName: "indexes" }] : /* istanbul ignore next */ []));
|
|
1570
|
-
this.baseId = `ius-cf-${uid$
|
|
1570
|
+
this.baseId = `ius-cf-${uid$o++}`;
|
|
1571
1571
|
this.cellRefs = viewChildren('cell', /* @ts-ignore */
|
|
1572
1572
|
...(ngDevMode ? [{ debugName: "cellRefs" }] : /* istanbul ignore next */ []));
|
|
1573
1573
|
this.onChange = () => { };
|
|
@@ -2458,7 +2458,7 @@ const SIZE_MAP = {
|
|
|
2458
2458
|
medium: 96,
|
|
2459
2459
|
large: 140,
|
|
2460
2460
|
};
|
|
2461
|
-
let uid$
|
|
2461
|
+
let uid$n = 0;
|
|
2462
2462
|
/**
|
|
2463
2463
|
* Illustration — Ius Design v2 (familia feedback).
|
|
2464
2464
|
*
|
|
@@ -2483,7 +2483,7 @@ class IllustrationComponent {
|
|
|
2483
2483
|
constructor() {
|
|
2484
2484
|
this.sanitizer = inject(DomSanitizer);
|
|
2485
2485
|
/** ID único por instancia, para el sufijo de gradientes. */
|
|
2486
|
-
this.instanceId = `i${uid$
|
|
2486
|
+
this.instanceId = `i${uid$n++}`;
|
|
2487
2487
|
this._size = 'medium';
|
|
2488
2488
|
this.viewBox = '0 0 110 110';
|
|
2489
2489
|
this.safeInner = '';
|
|
@@ -2542,7 +2542,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
2542
2542
|
type: Input
|
|
2543
2543
|
}] } });
|
|
2544
2544
|
|
|
2545
|
-
let uid$
|
|
2545
|
+
let uid$m = 0;
|
|
2546
2546
|
/**
|
|
2547
2547
|
* Checkbox — Ius Design v2.
|
|
2548
2548
|
*
|
|
@@ -2580,7 +2580,7 @@ class CheckboxComponent {
|
|
|
2580
2580
|
...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
|
|
2581
2581
|
/** Callback con el nuevo booleano (original `onChange(checked)`; nunca `change`). */
|
|
2582
2582
|
this.checkedChange = new EventEmitter();
|
|
2583
|
-
this.inputId = `ius-cbx-${uid$
|
|
2583
|
+
this.inputId = `ius-cbx-${uid$m++}`;
|
|
2584
2584
|
this.onChange = () => { };
|
|
2585
2585
|
this.onTouched = () => { };
|
|
2586
2586
|
}
|
|
@@ -3732,7 +3732,7 @@ class AccountItemComponent {
|
|
|
3732
3732
|
this.clicked.emit(event);
|
|
3733
3733
|
}
|
|
3734
3734
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AccountItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3735
|
-
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\
|
|
3735
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AccountItemComponent, isStandalone: true, selector: "ius-account-item", inputs: { name: "name", subtitle: "subtitle", avatar: "avatar", icon: "icon", monogram: "monogram", color: "color", shape: "shape", selected: ["selected", "selected", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], actions: "actions", actionsLabel: "actionsLabel", state: "state", ariaLabel: "ariaLabel" }, outputs: { clicked: "clicked" }, host: { properties: { "attr.data-state": "state || null", "attr.data-disabled": "disabled ? 'true' : null", "attr.data-actionable": "actionable ? 'true' : null" }, classAttribute: "ius-acctitem" }, queries: [{ propertyName: "nameRef", first: true, predicate: IusAccountItemNameDirective, descendants: true, isSignal: true }, { propertyName: "subtitleRef", first: true, predicate: IusAccountItemSubtitleDirective, descendants: true, isSignal: true }, { propertyName: "trailingRef", first: true, predicate: IusAccountItemTrailingDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- La superficie la pone ius-card (outlined \u00B7 radius lg \u00B7 padding none), como\n manda la ng-spec: no se reescribe a mano. Con `padding=\"none\"` el padding de\n la fila lo pone .ius-acctitem__row, que es \u00ABel propio cuerpo\u00BB del que habla\n Card (el golden lo escribe sobre .ius-card__body, encapsulado aqu\u00ED).\n\n La ra\u00EDz NO es navegable: el \u00E1rea primaria es el <button> interno\n .ius-acctitem__main, como en la rama `split` del golden \u2014 as\u00ED el \u22EE nunca\n queda anidado dentro de otro control. Ver la nota de port del .ts. -->\n<ius-card\n class=\"ius-acctitem__card\"\n variant=\"outlined\"\n radius=\"lg\"\n padding=\"none\"\n [selected]=\"selected\"\n>\n <div class=\"ius-acctitem__row\">\n <button\n type=\"button\"\n class=\"ius-acctitem__main\"\n [attr.aria-label]=\"label\"\n [attr.aria-pressed]=\"ariaPressed\"\n [disabled]=\"disabled\"\n (click)=\"onMainClick($event)\"\n >\n <ius-avatar\n size=\"small\"\n [shape]=\"shape\"\n [src]=\"avatar\"\n [name]=\"avatarName\"\n [monogram]=\"monogram\"\n [icon]=\"effIcon\"\n [color]=\"color\"\n [ariaLabel]=\"name\"\n />\n\n <span class=\"ius-acctitem__body\">\n <span class=\"ius-acctitem__name\">{{ name }}<ng-content select=\"[iusAccountItemName]\" /></span>\n @if (hasSubtitle) {\n <span class=\"ius-acctitem__sub\">{{ subtitle }}<ng-content select=\"[iusAccountItemSubtitle]\" /></span>\n }\n </span>\n\n @if (selected) {\n <span class=\"ius-acctitem__check\"><span translate=\"no\" class=\"ius-icon\">check_circle</span></span>\n }\n </button>\n\n @if (hasTrailing) {\n <span class=\"ius-acctitem__trailing\"><ng-content select=\"[iusAccountItemTrailing]\" /></span>\n }\n\n @if (showMenu) {\n <!-- Slot de ancho fijo (--_ai-actions-w): alinea todas las listas de\n cuentas del ecosistema. Compone ius-dropdown; su clic no dispara la\n fila (el \u00E1rea primaria es un bot\u00F3n hermano, no un ancestro). -->\n <span class=\"ius-acctitem__actions\">\n <ius-dropdown [items]=\"actions\" placement=\"bottom-end\" [ariaLabel]=\"actionsLabel\">\n <ius-icon-button\n iusDropdownTrigger\n icon=\"more_vert\"\n variant=\"tertiary\"\n size=\"small\"\n [ariaLabel]=\"menuLabel\"\n [disabled]=\"disabled\"\n />\n </ius-dropdown>\n </span>\n }\n </div>\n</ius-card>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-width:0;box-sizing:border-box;-webkit-user-select:none;user-select:none;text-align:left;--_ai-actions-w: 36px}.ius-acctitem__row{display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-sm)}.ius-acctitem__main{appearance:none;background:none;border:0;margin:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer;flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:var(--ius-space-xs)}.ius-acctitem__main:focus-visible{outline:none}:host(:has(.ius-acctitem__main:focus-visible)) .ius-acctitem__card{box-shadow:var(--ius-focus-ring)}:host([data-actionable=true]:hover) .ius-acctitem__card,:host([data-state=hover]) .ius-acctitem__card{box-shadow:none;transform:none;border-color:var(--ius-info-300)}:host([data-actionable=true]:has(.ius-acctitem__main:active)) .ius-acctitem__card,:host([data-state=pressed]) .ius-acctitem__card{box-shadow:none;transform:none;background:var(--ius-info-100);border-color:var(--ius-info-300)}.ius-acctitem__card[data-selected=true]{background:var(--ius-info-100);border-color:var(--ius-info-300);box-shadow:none}:host([data-disabled=true]){cursor:default;opacity:.5;pointer-events:none}.ius-acctitem__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}.ius-acctitem__name{font-size:var(--ius-fs-base);line-height:1.3;font-weight:var(--ius-fw-medium, 500);color:var(--ius-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-acctitem__sub{font-size:var(--ius-fs-sm);line-height:1.3;color:var(--ius-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-acctitem__check{flex:0 0 auto;display:inline-flex;color:var(--ius-primary-900)}.ius-acctitem__check .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-acctitem__trailing{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xxs)}.ius-acctitem__actions{flex:0 0 auto;width:var(--_ai-actions-w);display:inline-flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "ius-avatar", inputs: ["alt", "name", "monogram", "icon", "shape", "size", "color", "editable", "editIcon", "ariaLabel", "src"], outputs: ["edit"] }, { kind: "component", type: CardComponent, selector: "ius-card, a[ius-card], button[ius-card], section[ius-card], article[ius-card]", inputs: ["variant", "padding", "radius", "interactive", "selected", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: DropdownComponent, selector: "ius-dropdown", inputs: ["items", "selectable", "value", "label", "triggerLabel", "triggerIcon", "tone", "variant", "placement", "open", "defaultOpen", "ariaLabel"], outputs: ["valueChange", "openChange"] }, { kind: "directive", type: IusDropdownTriggerDirective, selector: "[iusDropdownTrigger]" }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "ariaPressed", "ariaExpanded", "ariaControls", "tooltipPlacement"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3736
3736
|
}
|
|
3737
3737
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AccountItemComponent, decorators: [{
|
|
3738
3738
|
type: Component,
|
|
@@ -3747,7 +3747,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
3747
3747
|
'[attr.data-state]': 'state || null',
|
|
3748
3748
|
'[attr.data-disabled]': "disabled ? 'true' : null",
|
|
3749
3749
|
'[attr.data-actionable]': "actionable ? 'true' : null",
|
|
3750
|
-
}, template: "<!-- La superficie la pone ius-card (outlined \u00B7 radius lg \u00B7 padding none), como\
|
|
3750
|
+
}, template: "<!-- La superficie la pone ius-card (outlined \u00B7 radius lg \u00B7 padding none), como\n manda la ng-spec: no se reescribe a mano. Con `padding=\"none\"` el padding de\n la fila lo pone .ius-acctitem__row, que es \u00ABel propio cuerpo\u00BB del que habla\n Card (el golden lo escribe sobre .ius-card__body, encapsulado aqu\u00ED).\n\n La ra\u00EDz NO es navegable: el \u00E1rea primaria es el <button> interno\n .ius-acctitem__main, como en la rama `split` del golden \u2014 as\u00ED el \u22EE nunca\n queda anidado dentro de otro control. Ver la nota de port del .ts. -->\n<ius-card\n class=\"ius-acctitem__card\"\n variant=\"outlined\"\n radius=\"lg\"\n padding=\"none\"\n [selected]=\"selected\"\n>\n <div class=\"ius-acctitem__row\">\n <button\n type=\"button\"\n class=\"ius-acctitem__main\"\n [attr.aria-label]=\"label\"\n [attr.aria-pressed]=\"ariaPressed\"\n [disabled]=\"disabled\"\n (click)=\"onMainClick($event)\"\n >\n <ius-avatar\n size=\"small\"\n [shape]=\"shape\"\n [src]=\"avatar\"\n [name]=\"avatarName\"\n [monogram]=\"monogram\"\n [icon]=\"effIcon\"\n [color]=\"color\"\n [ariaLabel]=\"name\"\n />\n\n <span class=\"ius-acctitem__body\">\n <span class=\"ius-acctitem__name\">{{ name }}<ng-content select=\"[iusAccountItemName]\" /></span>\n @if (hasSubtitle) {\n <span class=\"ius-acctitem__sub\">{{ subtitle }}<ng-content select=\"[iusAccountItemSubtitle]\" /></span>\n }\n </span>\n\n @if (selected) {\n <span class=\"ius-acctitem__check\"><span translate=\"no\" class=\"ius-icon\">check_circle</span></span>\n }\n </button>\n\n @if (hasTrailing) {\n <span class=\"ius-acctitem__trailing\"><ng-content select=\"[iusAccountItemTrailing]\" /></span>\n }\n\n @if (showMenu) {\n <!-- Slot de ancho fijo (--_ai-actions-w): alinea todas las listas de\n cuentas del ecosistema. Compone ius-dropdown; su clic no dispara la\n fila (el \u00E1rea primaria es un bot\u00F3n hermano, no un ancestro). -->\n <span class=\"ius-acctitem__actions\">\n <ius-dropdown [items]=\"actions\" placement=\"bottom-end\" [ariaLabel]=\"actionsLabel\">\n <ius-icon-button\n iusDropdownTrigger\n icon=\"more_vert\"\n variant=\"tertiary\"\n size=\"small\"\n [ariaLabel]=\"menuLabel\"\n [disabled]=\"disabled\"\n />\n </ius-dropdown>\n </span>\n }\n </div>\n</ius-card>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-width:0;box-sizing:border-box;-webkit-user-select:none;user-select:none;text-align:left;--_ai-actions-w: 36px}.ius-acctitem__row{display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-sm)}.ius-acctitem__main{appearance:none;background:none;border:0;margin:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer;flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:var(--ius-space-xs)}.ius-acctitem__main:focus-visible{outline:none}:host(:has(.ius-acctitem__main:focus-visible)) .ius-acctitem__card{box-shadow:var(--ius-focus-ring)}:host([data-actionable=true]:hover) .ius-acctitem__card,:host([data-state=hover]) .ius-acctitem__card{box-shadow:none;transform:none;border-color:var(--ius-info-300)}:host([data-actionable=true]:has(.ius-acctitem__main:active)) .ius-acctitem__card,:host([data-state=pressed]) .ius-acctitem__card{box-shadow:none;transform:none;background:var(--ius-info-100);border-color:var(--ius-info-300)}.ius-acctitem__card[data-selected=true]{background:var(--ius-info-100);border-color:var(--ius-info-300);box-shadow:none}:host([data-disabled=true]){cursor:default;opacity:.5;pointer-events:none}.ius-acctitem__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}.ius-acctitem__name{font-size:var(--ius-fs-base);line-height:1.3;font-weight:var(--ius-fw-medium, 500);color:var(--ius-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-acctitem__sub{font-size:var(--ius-fs-sm);line-height:1.3;color:var(--ius-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-acctitem__check{flex:0 0 auto;display:inline-flex;color:var(--ius-primary-900)}.ius-acctitem__check .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-acctitem__trailing{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xxs)}.ius-acctitem__actions{flex:0 0 auto;width:var(--_ai-actions-w);display:inline-flex;align-items:center;justify-content:center}\n"] }]
|
|
3751
3751
|
}], propDecorators: { name: [{
|
|
3752
3752
|
type: Input
|
|
3753
3753
|
}], subtitle: [{
|
|
@@ -4642,7 +4642,7 @@ function prefersReducedMotion() {
|
|
|
4642
4642
|
typeof window.matchMedia === 'function' &&
|
|
4643
4643
|
window.matchMedia('(prefers-reduced-motion: reduce)').matches);
|
|
4644
4644
|
}
|
|
4645
|
-
let uid$
|
|
4645
|
+
let uid$l = 0;
|
|
4646
4646
|
/**
|
|
4647
4647
|
* CircularProgress — Ius Design v2.
|
|
4648
4648
|
*
|
|
@@ -4663,7 +4663,7 @@ class CircularProgressComponent {
|
|
|
4663
4663
|
this.showValue = false;
|
|
4664
4664
|
/** Congela la cuenta regresiva conservando el tiempo restante (hover del Toast). */
|
|
4665
4665
|
this.paused = false;
|
|
4666
|
-
this.gid = `ius-cp-${uid$
|
|
4666
|
+
this.gid = `ius-cp-${uid$l++}`;
|
|
4667
4667
|
this.zone = inject(NgZone);
|
|
4668
4668
|
/** % restante de la cuenta regresiva (100 → 0). */
|
|
4669
4669
|
this.remaining = signal(100, /* @ts-ignore */
|
|
@@ -4825,7 +4825,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
4825
4825
|
args: [{ transform: booleanAttribute }]
|
|
4826
4826
|
}] } });
|
|
4827
4827
|
|
|
4828
|
-
let uid$
|
|
4828
|
+
let uid$k = 0;
|
|
4829
4829
|
/**
|
|
4830
4830
|
*
|
|
4831
4831
|
* Cargador de **identidad** Litigiovirtual: tres fichas se deslizan por el
|
|
@@ -4847,7 +4847,7 @@ class LoadingMarkComponent {
|
|
|
4847
4847
|
/** Etiqueta accesible. */
|
|
4848
4848
|
this.ariaLabel = 'Cargando';
|
|
4849
4849
|
// IDs únicos por instancia para los <defs> del SVG (gradientes/filtro/máscara).
|
|
4850
|
-
this.id = `lm-${uid$
|
|
4850
|
+
this.id = `lm-${uid$k++}`;
|
|
4851
4851
|
this.baseId = `${this.id}-base`;
|
|
4852
4852
|
this.glowId = `${this.id}-glow`;
|
|
4853
4853
|
this.softId = `${this.id}-soft`;
|
|
@@ -4862,7 +4862,7 @@ class LoadingMarkComponent {
|
|
|
4862
4862
|
return this.surface === 'dark' ? 'var(--ius-primary-600)' : 'var(--ius-primary-900)';
|
|
4863
4863
|
}
|
|
4864
4864
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LoadingMarkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4865
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.0.8", type: LoadingMarkComponent, isStandalone: true, selector: "ius-loading-mark", inputs: { size: ["size", "size", numberAttribute], surface: "surface", paused: ["paused", "paused", booleanAttribute], ariaLabel: "ariaLabel" }, host: { attributes: { "role": "status", "aria-live": "polite" }, properties: { "attr.data-surface": "surface", "attr.data-paused": "paused ? 'true' : null", "attr.aria-label": "ariaLabel" } }, ngImport: i0, template: "<svg\
|
|
4865
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.0.8", type: LoadingMarkComponent, isStandalone: true, selector: "ius-loading-mark", inputs: { size: ["size", "size", numberAttribute], surface: "surface", paused: ["paused", "paused", booleanAttribute], ariaLabel: "ariaLabel" }, host: { attributes: { "role": "status", "aria-live": "polite" }, properties: { "attr.data-surface": "surface", "attr.data-paused": "paused ? 'true' : null", "attr.aria-label": "ariaLabel" } }, ngImport: i0, template: "<svg\n class=\"ius-loadmark__svg\"\n [attr.width]=\"size\"\n [attr.height]=\"size\"\n viewBox=\"-16 -16 132 132\"\n aria-hidden=\"true\"\n>\n <defs>\n <!-- Degradado base (navy \u00B7 navy\u2192cian en dark) -->\n <linearGradient\n [attr.id]=\"baseId\"\n gradientUnits=\"userSpaceOnUse\"\n x1=\"6\"\n y1=\"94\"\n x2=\"94\"\n y2=\"6\"\n >\n <stop offset=\"0\" [attr.stop-color]=\"baseFrom\" />\n <stop offset=\"1\" [attr.stop-color]=\"baseTo\" />\n </linearGradient>\n\n <!-- Glow del cometa -->\n <radialGradient [attr.id]=\"glowId\">\n <stop offset=\"0%\" stop-color=\"var(--ius-primary-100)\" />\n <stop offset=\"35%\" stop-color=\"var(--ius-primary-400)\" />\n <stop offset=\"100%\" stop-color=\"var(--ius-primary-400)\" stop-opacity=\"0\" />\n </radialGradient>\n\n <!-- Desenfoque de la cola -->\n <filter [attr.id]=\"softId\" x=\"-60%\" y=\"-60%\" width=\"220%\" height=\"220%\">\n <feGaussianBlur stdDeviation=\"5\" />\n </filter>\n\n <!-- M\u00E1scara: tres fichas deslizantes -->\n <mask [attr.id]=\"maskId\" maskUnits=\"userSpaceOnUse\">\n <g class=\"ius-loadmark__tile ius-loadmark__tile--a\">\n <rect\n x=\"0\"\n y=\"0\"\n width=\"38\"\n height=\"38\"\n rx=\"10\"\n fill=\"none\"\n stroke=\"var(--ius-neutral-white)\"\n stroke-width=\"6\"\n stroke-linejoin=\"round\"\n />\n </g>\n <g class=\"ius-loadmark__tile ius-loadmark__tile--b\">\n <rect\n x=\"0\"\n y=\"0\"\n width=\"38\"\n height=\"38\"\n rx=\"10\"\n fill=\"none\"\n stroke=\"var(--ius-neutral-white)\"\n stroke-width=\"6\"\n stroke-linejoin=\"round\"\n />\n </g>\n <g class=\"ius-loadmark__tile ius-loadmark__tile--c\">\n <rect\n x=\"0\"\n y=\"0\"\n width=\"38\"\n height=\"38\"\n rx=\"10\"\n fill=\"none\"\n stroke=\"var(--ius-neutral-white)\"\n stroke-width=\"6\"\n stroke-linejoin=\"round\"\n />\n </g>\n </mask>\n </defs>\n\n <!-- Giro del conjunto -->\n <g class=\"ius-loadmark__spin\">\n <g [attr.mask]=\"'url(#' + maskId + ')'\">\n <rect x=\"0\" y=\"0\" width=\"100\" height=\"100\" [attr.fill]=\"'url(#' + baseId + ')'\" />\n <!-- Cometa orbitando el contorno -->\n <g class=\"ius-loadmark__orbit\">\n <circle\n cx=\"50\"\n cy=\"4\"\n r=\"40\"\n [attr.fill]=\"'url(#' + glowId + ')'\"\n [attr.filter]=\"'url(#' + softId + ')'\"\n />\n </g>\n </g>\n </g>\n</svg>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;line-height:0;color:var(--ius-primary-900)}.ius-loadmark__svg{display:block}.ius-loadmark__spin{transform-box:view-box;transform-origin:50px 50px;animation:ius-lm-spin var(--ius-duration-ambient) linear infinite;animation-play-state:var(--ius-motion-loop)}@keyframes ius-lm-spin{to{transform:rotate(360deg)}}.ius-loadmark__orbit{transform-box:view-box;transform-origin:50px 50px;animation:ius-lm-orbit 2s linear infinite;animation-play-state:var(--ius-motion-loop)}@keyframes ius-lm-orbit{to{transform:rotate(360deg)}}.ius-loadmark__tile{animation-duration:5s;animation-iteration-count:infinite;animation-timing-function:var(--ius-ease-ambient);animation-play-state:var(--ius-motion-loop)}.ius-loadmark__tile--a{animation-name:ius-lm-a}.ius-loadmark__tile--b{animation-name:ius-lm-b}.ius-loadmark__tile--c{animation-name:ius-lm-c}@keyframes ius-lm-a{0%{transform:translate(5px,5px)}8.333%{transform:translate(57px,5px)}25%{transform:translate(57px,5px)}33.333%{transform:translate(57px,57px)}50%{transform:translate(57px,57px)}58.333%{transform:translate(5px,57px)}75%{transform:translate(5px,57px)}83.333%{transform:translate(5px,5px)}to{transform:translate(5px,5px)}}@keyframes ius-lm-b{0%{transform:translate(57px,57px)}16.667%{transform:translate(57px,57px)}25%{transform:translate(5px,57px)}41.667%{transform:translate(5px,57px)}50%{transform:translate(5px,5px)}66.667%{transform:translate(5px,5px)}75%{transform:translate(57px,5px)}91.667%{transform:translate(57px,5px)}to{transform:translate(57px,57px)}}@keyframes ius-lm-c{0%{transform:translate(5px,57px)}8.333%{transform:translate(5px,57px)}16.667%{transform:translate(5px,5px)}33.333%{transform:translate(5px,5px)}41.667%{transform:translate(57px,5px)}58.333%{transform:translate(57px,5px)}66.667%{transform:translate(57px,57px)}83.333%{transform:translate(57px,57px)}91.667%{transform:translate(5px,57px)}to{transform:translate(5px,57px)}}:host([data-paused=true]) .ius-loadmark__spin,:host([data-paused=true]) .ius-loadmark__orbit,:host([data-paused=true]) .ius-loadmark__tile{animation-play-state:paused}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4866
4866
|
}
|
|
4867
4867
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LoadingMarkComponent, decorators: [{
|
|
4868
4868
|
type: Component,
|
|
@@ -4872,7 +4872,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
4872
4872
|
'[attr.data-surface]': 'surface',
|
|
4873
4873
|
'[attr.data-paused]': "paused ? 'true' : null",
|
|
4874
4874
|
'[attr.aria-label]': 'ariaLabel',
|
|
4875
|
-
}, template: "<svg\
|
|
4875
|
+
}, template: "<svg\n class=\"ius-loadmark__svg\"\n [attr.width]=\"size\"\n [attr.height]=\"size\"\n viewBox=\"-16 -16 132 132\"\n aria-hidden=\"true\"\n>\n <defs>\n <!-- Degradado base (navy \u00B7 navy\u2192cian en dark) -->\n <linearGradient\n [attr.id]=\"baseId\"\n gradientUnits=\"userSpaceOnUse\"\n x1=\"6\"\n y1=\"94\"\n x2=\"94\"\n y2=\"6\"\n >\n <stop offset=\"0\" [attr.stop-color]=\"baseFrom\" />\n <stop offset=\"1\" [attr.stop-color]=\"baseTo\" />\n </linearGradient>\n\n <!-- Glow del cometa -->\n <radialGradient [attr.id]=\"glowId\">\n <stop offset=\"0%\" stop-color=\"var(--ius-primary-100)\" />\n <stop offset=\"35%\" stop-color=\"var(--ius-primary-400)\" />\n <stop offset=\"100%\" stop-color=\"var(--ius-primary-400)\" stop-opacity=\"0\" />\n </radialGradient>\n\n <!-- Desenfoque de la cola -->\n <filter [attr.id]=\"softId\" x=\"-60%\" y=\"-60%\" width=\"220%\" height=\"220%\">\n <feGaussianBlur stdDeviation=\"5\" />\n </filter>\n\n <!-- M\u00E1scara: tres fichas deslizantes -->\n <mask [attr.id]=\"maskId\" maskUnits=\"userSpaceOnUse\">\n <g class=\"ius-loadmark__tile ius-loadmark__tile--a\">\n <rect\n x=\"0\"\n y=\"0\"\n width=\"38\"\n height=\"38\"\n rx=\"10\"\n fill=\"none\"\n stroke=\"var(--ius-neutral-white)\"\n stroke-width=\"6\"\n stroke-linejoin=\"round\"\n />\n </g>\n <g class=\"ius-loadmark__tile ius-loadmark__tile--b\">\n <rect\n x=\"0\"\n y=\"0\"\n width=\"38\"\n height=\"38\"\n rx=\"10\"\n fill=\"none\"\n stroke=\"var(--ius-neutral-white)\"\n stroke-width=\"6\"\n stroke-linejoin=\"round\"\n />\n </g>\n <g class=\"ius-loadmark__tile ius-loadmark__tile--c\">\n <rect\n x=\"0\"\n y=\"0\"\n width=\"38\"\n height=\"38\"\n rx=\"10\"\n fill=\"none\"\n stroke=\"var(--ius-neutral-white)\"\n stroke-width=\"6\"\n stroke-linejoin=\"round\"\n />\n </g>\n </mask>\n </defs>\n\n <!-- Giro del conjunto -->\n <g class=\"ius-loadmark__spin\">\n <g [attr.mask]=\"'url(#' + maskId + ')'\">\n <rect x=\"0\" y=\"0\" width=\"100\" height=\"100\" [attr.fill]=\"'url(#' + baseId + ')'\" />\n <!-- Cometa orbitando el contorno -->\n <g class=\"ius-loadmark__orbit\">\n <circle\n cx=\"50\"\n cy=\"4\"\n r=\"40\"\n [attr.fill]=\"'url(#' + glowId + ')'\"\n [attr.filter]=\"'url(#' + softId + ')'\"\n />\n </g>\n </g>\n </g>\n</svg>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;line-height:0;color:var(--ius-primary-900)}.ius-loadmark__svg{display:block}.ius-loadmark__spin{transform-box:view-box;transform-origin:50px 50px;animation:ius-lm-spin var(--ius-duration-ambient) linear infinite;animation-play-state:var(--ius-motion-loop)}@keyframes ius-lm-spin{to{transform:rotate(360deg)}}.ius-loadmark__orbit{transform-box:view-box;transform-origin:50px 50px;animation:ius-lm-orbit 2s linear infinite;animation-play-state:var(--ius-motion-loop)}@keyframes ius-lm-orbit{to{transform:rotate(360deg)}}.ius-loadmark__tile{animation-duration:5s;animation-iteration-count:infinite;animation-timing-function:var(--ius-ease-ambient);animation-play-state:var(--ius-motion-loop)}.ius-loadmark__tile--a{animation-name:ius-lm-a}.ius-loadmark__tile--b{animation-name:ius-lm-b}.ius-loadmark__tile--c{animation-name:ius-lm-c}@keyframes ius-lm-a{0%{transform:translate(5px,5px)}8.333%{transform:translate(57px,5px)}25%{transform:translate(57px,5px)}33.333%{transform:translate(57px,57px)}50%{transform:translate(57px,57px)}58.333%{transform:translate(5px,57px)}75%{transform:translate(5px,57px)}83.333%{transform:translate(5px,5px)}to{transform:translate(5px,5px)}}@keyframes ius-lm-b{0%{transform:translate(57px,57px)}16.667%{transform:translate(57px,57px)}25%{transform:translate(5px,57px)}41.667%{transform:translate(5px,57px)}50%{transform:translate(5px,5px)}66.667%{transform:translate(5px,5px)}75%{transform:translate(57px,5px)}91.667%{transform:translate(57px,5px)}to{transform:translate(57px,57px)}}@keyframes ius-lm-c{0%{transform:translate(5px,57px)}8.333%{transform:translate(5px,57px)}16.667%{transform:translate(5px,5px)}33.333%{transform:translate(5px,5px)}41.667%{transform:translate(57px,5px)}58.333%{transform:translate(57px,5px)}66.667%{transform:translate(57px,57px)}83.333%{transform:translate(57px,57px)}91.667%{transform:translate(5px,57px)}to{transform:translate(5px,57px)}}:host([data-paused=true]) .ius-loadmark__spin,:host([data-paused=true]) .ius-loadmark__orbit,:host([data-paused=true]) .ius-loadmark__tile{animation-play-state:paused}\n"] }]
|
|
4876
4876
|
}], propDecorators: { size: [{
|
|
4877
4877
|
type: Input,
|
|
4878
4878
|
args: [{ transform: numberAttribute }]
|
|
@@ -5676,7 +5676,7 @@ function placeholderContent(kind, providerLabel) {
|
|
|
5676
5676
|
};
|
|
5677
5677
|
}
|
|
5678
5678
|
}
|
|
5679
|
-
let uid$
|
|
5679
|
+
let uid$j = 0;
|
|
5680
5680
|
/**
|
|
5681
5681
|
* CaptchaField — Ius Design v2.
|
|
5682
5682
|
*
|
|
@@ -5825,7 +5825,7 @@ class CaptchaFieldComponent {
|
|
|
5825
5825
|
this.phase = signal('loading', /* @ts-ignore */
|
|
5826
5826
|
...(ngDevMode ? [{ debugName: "phase" }] : /* istanbul ignore next */ []));
|
|
5827
5827
|
this.widgetId = null;
|
|
5828
|
-
this.baseId = `ius-cf-${uid$
|
|
5828
|
+
this.baseId = `ius-cf-${uid$j++}`;
|
|
5829
5829
|
this.hostRef = viewChild('host', /* @ts-ignore */
|
|
5830
5830
|
...(ngDevMode ? [{ debugName: "hostRef" }] : /* istanbul ignore next */ []));
|
|
5831
5831
|
this.onChange = () => { };
|
|
@@ -7118,7 +7118,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
7118
7118
|
type: Output
|
|
7119
7119
|
}] } });
|
|
7120
7120
|
|
|
7121
|
-
let uid$
|
|
7121
|
+
let uid$i = 0;
|
|
7122
7122
|
/** ¿La lista viene agrupada (`{label, options}`) o plana? */
|
|
7123
7123
|
function isGrouped(options) {
|
|
7124
7124
|
return (Array.isArray(options) &&
|
|
@@ -7300,7 +7300,7 @@ class SelectComponent {
|
|
|
7300
7300
|
* corren en el constructor, antes de que Angular asigne los `@Input`, así que
|
|
7301
7301
|
* `this.id` valdría siempre `undefined` y el `id` del consumidor se perdería.
|
|
7302
7302
|
*/
|
|
7303
|
-
this.fallbackId = `ius-sel-${uid$
|
|
7303
|
+
this.fallbackId = `ius-sel-${uid$i++}`;
|
|
7304
7304
|
this.onChange = () => { };
|
|
7305
7305
|
this.onTouched = () => { };
|
|
7306
7306
|
this.overlay = inject(Overlay);
|
|
@@ -8956,7 +8956,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
8956
8956
|
* Ver `SearchBar.jsx` → `demoFilled`. Nunca toca el valor real del modelo.
|
|
8957
8957
|
*/
|
|
8958
8958
|
const IUS_SB_DEMO_VALUE = 'CriterioBusqueda';
|
|
8959
|
-
let uid$
|
|
8959
|
+
let uid$h = 0;
|
|
8960
8960
|
/**
|
|
8961
8961
|
* SearchBar — Ius Design v2.
|
|
8962
8962
|
*
|
|
@@ -9041,7 +9041,7 @@ class SearchBarComponent {
|
|
|
9041
9041
|
// ── Estado interno ────────────────────────────────────────────────────
|
|
9042
9042
|
this.inputRef = viewChild.required('input', /* @ts-ignore */
|
|
9043
9043
|
...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
|
|
9044
|
-
this.autoId = `ius-sb-${uid$
|
|
9044
|
+
this.autoId = `ius-sb-${uid$h++}`;
|
|
9045
9045
|
/** Estado forzado que el golden considera "con criterio" (demos). */
|
|
9046
9046
|
this.demoFilled = computed(() => this.stateInput() === 'hover' || this.stateInput() === 'focused', /* @ts-ignore */
|
|
9047
9047
|
...(ngDevMode ? [{ debugName: "demoFilled" }] : /* istanbul ignore next */ []));
|
|
@@ -9511,7 +9511,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
9511
9511
|
args: ['triggerEl']
|
|
9512
9512
|
}] } });
|
|
9513
9513
|
|
|
9514
|
-
let uid$
|
|
9514
|
+
let uid$g = 0;
|
|
9515
9515
|
/**
|
|
9516
9516
|
* MultiTextField — Ius Design v2 (familia inputs).
|
|
9517
9517
|
*
|
|
@@ -9567,7 +9567,7 @@ class MultiTextFieldComponent {
|
|
|
9567
9567
|
/** Último valor escrito por el CVA (por si llega antes que los slots). */
|
|
9568
9568
|
this.pendingValue = signal(null, /* @ts-ignore */
|
|
9569
9569
|
...(ngDevMode ? [{ debugName: "pendingValue" }] : /* istanbul ignore next */ []));
|
|
9570
|
-
this.baseIdState = `ius-mtf-${uid$
|
|
9570
|
+
this.baseIdState = `ius-mtf-${uid$g++}`;
|
|
9571
9571
|
this.slotInputs = viewChildren('slotInput', /* @ts-ignore */
|
|
9572
9572
|
...(ngDevMode ? [{ debugName: "slotInputs" }] : /* istanbul ignore next */ []));
|
|
9573
9573
|
this.onChange = () => { };
|
|
@@ -9850,7 +9850,7 @@ const ICON_TONES = {
|
|
|
9850
9850
|
neutral: { bg: 'var(--ius-neutral-2)', fg: 'var(--ius-neutral-7)' },
|
|
9851
9851
|
};
|
|
9852
9852
|
/** Contador para los ids del nombre accesible (equivalente del `useId` del golden). */
|
|
9853
|
-
let uid$
|
|
9853
|
+
let uid$f = 0;
|
|
9854
9854
|
/**
|
|
9855
9855
|
* Modal — Ius Design v2.
|
|
9856
9856
|
*
|
|
@@ -9873,7 +9873,7 @@ class ModalComponent {
|
|
|
9873
9873
|
* `aria-label`, y `aria-describedby` apunta a la descripción cuando la hay
|
|
9874
9874
|
* (T11). `aria-label` queda solo para el caso sin `title`.
|
|
9875
9875
|
*/
|
|
9876
|
-
this.baseId = `ius-modal-${uid$
|
|
9876
|
+
this.baseId = `ius-modal-${uid$f++}`;
|
|
9877
9877
|
this.titleId = `${this.baseId}-title`;
|
|
9878
9878
|
this.descId = `${this.baseId}-desc`;
|
|
9879
9879
|
this.overlay = inject(Overlay);
|
|
@@ -10090,7 +10090,7 @@ function duracionTransicion(el) {
|
|
|
10090
10090
|
function desborda(el) {
|
|
10091
10091
|
return el.scrollHeight - el.clientHeight > TOLERANCIA_DESBORDE;
|
|
10092
10092
|
}
|
|
10093
|
-
let uid$
|
|
10093
|
+
let uid$e = 0;
|
|
10094
10094
|
/**
|
|
10095
10095
|
* Accordion — Ius Design v2 (familia data-display).
|
|
10096
10096
|
*
|
|
@@ -10185,7 +10185,7 @@ class AccordionComponent {
|
|
|
10185
10185
|
/** Apertura propia del modo no controlado (`null` = aún sin tocar). */
|
|
10186
10186
|
this.picked = signal(null, /* @ts-ignore */
|
|
10187
10187
|
...(ngDevMode ? [{ debugName: "picked" }] : /* istanbul ignore next */ []));
|
|
10188
|
-
this.gid = `ius-acc-${uid$
|
|
10188
|
+
this.gid = `ius-acc-${uid$e++}`;
|
|
10189
10189
|
this.openIds = computed(() => {
|
|
10190
10190
|
const controlled = this.open();
|
|
10191
10191
|
if (controlled !== undefined)
|
|
@@ -11233,7 +11233,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
11233
11233
|
const ERROR_DESC = 'Revise la conexión e intente de nuevo. Si persiste, descargue el archivo.';
|
|
11234
11234
|
const MEDIA_ERROR_DESC = 'No se pudo reproducir el archivo. Revise la conexión e intente de nuevo; si persiste, descárguelo.';
|
|
11235
11235
|
const RETRY_ACTION = { label: 'Reintentar', icon: 'refresh' };
|
|
11236
|
-
let uid$
|
|
11236
|
+
let uid$d = 0;
|
|
11237
11237
|
/**
|
|
11238
11238
|
* DocumentViewer — Ius Design v2 (familia overlays).
|
|
11239
11239
|
*
|
|
@@ -11260,7 +11260,7 @@ class DocumentViewerComponent {
|
|
|
11260
11260
|
this.sanitizer = inject(DomSanitizer);
|
|
11261
11261
|
this.injector = inject(Injector);
|
|
11262
11262
|
this.document = inject(DOCUMENT);
|
|
11263
|
-
this.titleId = `ius-docv-${uid$
|
|
11263
|
+
this.titleId = `ius-docv-${uid$d++}-title`;
|
|
11264
11264
|
this.variant = input('overlay', /* @ts-ignore */
|
|
11265
11265
|
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
11266
11266
|
/** Apertura (controlado). */
|
|
@@ -12298,7 +12298,7 @@ class ScrollAreaComponent {
|
|
|
12298
12298
|
}
|
|
12299
12299
|
}
|
|
12300
12300
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ScrollAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12301
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: ScrollAreaComponent, isStandalone: true, selector: "ius-scroll-area", inputs: { axis: "axis", size: "size", autoHide: ["autoHide", "autoHide", booleanAttribute], fade: ["fade", "fade", booleanAttribute], maxHeight: "maxHeight", maxWidth: "maxWidth", viewClassName: "viewClassName" }, outputs: { scrolled: "scrolled" }, host: { properties: { "attr.data-axis": "axis", "attr.data-fade": "fade ? 'true' : 'false'" }, classAttribute: "ius-sa" }, viewQueries: [{ propertyName: "view", first: true, predicate: ["view"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\
|
|
12301
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: ScrollAreaComponent, isStandalone: true, selector: "ius-scroll-area", inputs: { axis: "axis", size: "size", autoHide: ["autoHide", "autoHide", booleanAttribute], fade: ["fade", "fade", booleanAttribute], maxHeight: "maxHeight", maxWidth: "maxWidth", viewClassName: "viewClassName" }, outputs: { scrolled: "scrolled" }, host: { properties: { "attr.data-axis": "axis", "attr.data-fade": "fade ? 'true' : 'false'" }, classAttribute: "ius-sa" }, viewQueries: [{ propertyName: "view", first: true, predicate: ["view"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\n #view\n [class]=\"viewClasses\"\n [style.max-height]=\"maxHeightCss\"\n [style.max-width]=\"maxWidthCss\"\n>\n <ng-content />\n</div>\n", styles: ["@charset \"UTF-8\";:host{position:relative;box-sizing:border-box;display:block;min-height:0;min-width:0}.ius-sa__view{box-sizing:border-box;width:100%;height:100%}:host([data-axis=y]) .ius-sa__view{overflow-y:auto;overflow-x:hidden}:host([data-axis=x]) .ius-sa__view{overflow-x:auto;overflow-y:hidden}:host([data-axis=both]) .ius-sa__view{overflow:auto}:host([data-fade=true][data-axis=y]) .ius-sa__view{--_sa-top: 0px;--_sa-bot: 0px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--_sa-top),#000 calc(100% - var(--_sa-bot)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 var(--_sa-top),#000 calc(100% - var(--_sa-bot)),transparent 100%)}:host([data-fade=true][data-axis=x]) .ius-sa__view{--_sa-l: 0px;--_sa-r: 0px;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--_sa-l),#000 calc(100% - var(--_sa-r)),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 var(--_sa-l),#000 calc(100% - var(--_sa-r)),transparent 100%)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
12302
12302
|
}
|
|
12303
12303
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ScrollAreaComponent, decorators: [{
|
|
12304
12304
|
type: Component,
|
|
@@ -12306,7 +12306,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
12306
12306
|
class: 'ius-sa',
|
|
12307
12307
|
'[attr.data-axis]': 'axis',
|
|
12308
12308
|
'[attr.data-fade]': "fade ? 'true' : 'false'",
|
|
12309
|
-
}, template: "<div\
|
|
12309
|
+
}, template: "<div\n #view\n [class]=\"viewClasses\"\n [style.max-height]=\"maxHeightCss\"\n [style.max-width]=\"maxWidthCss\"\n>\n <ng-content />\n</div>\n", styles: ["@charset \"UTF-8\";:host{position:relative;box-sizing:border-box;display:block;min-height:0;min-width:0}.ius-sa__view{box-sizing:border-box;width:100%;height:100%}:host([data-axis=y]) .ius-sa__view{overflow-y:auto;overflow-x:hidden}:host([data-axis=x]) .ius-sa__view{overflow-x:auto;overflow-y:hidden}:host([data-axis=both]) .ius-sa__view{overflow:auto}:host([data-fade=true][data-axis=y]) .ius-sa__view{--_sa-top: 0px;--_sa-bot: 0px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--_sa-top),#000 calc(100% - var(--_sa-bot)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 var(--_sa-top),#000 calc(100% - var(--_sa-bot)),transparent 100%)}:host([data-fade=true][data-axis=x]) .ius-sa__view{--_sa-l: 0px;--_sa-r: 0px;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--_sa-l),#000 calc(100% - var(--_sa-r)),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 var(--_sa-l),#000 calc(100% - var(--_sa-r)),transparent 100%)}\n"] }]
|
|
12310
12310
|
}], propDecorators: { axis: [{
|
|
12311
12311
|
type: Input
|
|
12312
12312
|
}], size: [{
|
|
@@ -12392,7 +12392,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
12392
12392
|
args: [{ transform: booleanAttribute }]
|
|
12393
12393
|
}] } });
|
|
12394
12394
|
|
|
12395
|
-
let uid$
|
|
12395
|
+
let uid$c = 0;
|
|
12396
12396
|
/**
|
|
12397
12397
|
* TextArea — Ius Design v2 (familia inputs).
|
|
12398
12398
|
*
|
|
@@ -12572,7 +12572,7 @@ class TextAreaComponent {
|
|
|
12572
12572
|
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
12573
12573
|
this.focused = signal(false, /* @ts-ignore */
|
|
12574
12574
|
...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
|
|
12575
|
-
this.areaId = `ius-ta-${uid$
|
|
12575
|
+
this.areaId = `ius-ta-${uid$c++}`;
|
|
12576
12576
|
this.helpId = `${this.areaId}-help`;
|
|
12577
12577
|
this.area = viewChild('area', /* @ts-ignore */
|
|
12578
12578
|
...(ngDevMode ? [{ debugName: "area" }] : /* istanbul ignore next */ []));
|
|
@@ -14013,7 +14013,7 @@ class SettingsNavComponent {
|
|
|
14013
14013
|
this.visibleCount.set(count);
|
|
14014
14014
|
}
|
|
14015
14015
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SettingsNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14016
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SettingsNavComponent, isStandalone: true, selector: "ius-settings-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, defaultCollapsed: { classPropertyName: "defaultCollapsed", publicName: "defaultCollapsed", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, overflowLabel: { classPropertyName: "overflowLabel", publicName: "overflowLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIdChange: "selectedIdChange", itemClick: "itemClick", collapsedChange: "collapsedChange" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel()", "attr.data-collapsed": "isCollapsed() ? 'true' : null", "attr.title": "null", "style.--_sn-w": "widthCss()", "style.--_sn-cico-h": "cicoH()", "style.--_sn-fg": "accentFg()", "style.--_sn-tint": "accentTint()" }, classAttribute: "ius-settings-nav" }, queries: [{ propertyName: "headerRef", first: true, predicate: IusSettingsNavHeaderDirective, descendants: true, isSignal: true }, { propertyName: "footerRef", first: true, predicate: IusSettingsNavFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "wrapRef", first: true, predicate: ["wrap"], descendants: true, isSignal: true }, { propertyName: "measRef", first: true, predicate: ["meas"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\r\n SettingsNav \u2014 el HOST es el `<nav>` (ver `host:` del .ts), as\u00ED que aqu\u00ED\r\n arranca directamente el contenido: encabezado \u00B7 columna de filas \u00B7 pie.\r\n-->\r\n\r\n<!--\r\n Encabezado. El slot `[iusSettingsNavHeader]` MANDA sobre `title`, y `title`\r\n se oculta al colapsar (ambas condiciones viven en `showTitle()`).\r\n El `ng-content` va en un \u00FAnico `@if` (nunca anidado): con `@if` anidados el\r\n compilador solo iza el atributo `select` un nivel y la proyecci\u00F3n fallar\u00EDa en\r\n silencio.\r\n-->\r\n@if (headerRef() || showTitle()) {\r\n <div class=\"ius-settings-nav__header\">\r\n <ng-content select=\"[iusSettingsNavHeader]\" />\r\n @if (showTitle()) {\r\n <div class=\"ius-settings-nav__title\">{{ title() }}</div>\r\n }\r\n </div>\r\n}\r\n\r\n<!-- Columna de filas: NO scrollea (priority+ recoge lo que no cabe). -->\r\n<div class=\"ius-settings-nav__items\" #wrap>\r\n @for (it of visibleItems(); track it.id) {\r\n <ng-container [ngTemplateOutlet]=\"fila\" [ngTemplateOutletContext]=\"{ it: it }\" />\r\n }\r\n\r\n <!-- Desborde: lo que no cabe en alto se recoge en un Popover a la derecha. -->\r\n @if (hasOverflow()) {\r\n <ius-popover\r\n [open]=\"moreOpen()\"\r\n trigger=\"click\"\r\n placement=\"right-start\"\r\n [showArrow]=\"false\"\r\n [offset]=\"8\"\r\n [dismissable]=\"true\"\r\n (openChange)=\"moreOpen.set($event)\"\r\n >\r\n @if (isCollapsed()) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-settings-nav__cico\"\r\n [attr.data-selected]=\"anyHiddenSelected() ? 'true' : null\"\r\n [attr.aria-label]=\"overflowLabel()\"\r\n aria-haspopup=\"menu\"\r\n [attr.aria-expanded]=\"moreOpen()\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">more_horiz</span>\r\n @if (anyHiddenSelected()) {\r\n <span class=\"ius-settings-nav__cico-badge\" aria-hidden=\"true\"></span>\r\n }\r\n </button>\r\n } @else {\r\n <ius-menu-item\r\n variant=\"rail\"\r\n [size]=\"size()\"\r\n icon=\"more_horiz\"\r\n [label]=\"overflowLabel()\"\r\n [selected]=\"anyHiddenSelected()\"\r\n [ariaLabel]=\"overflowLabel() + ' secciones'\"\r\n />\r\n }\r\n\r\n <!--\r\n Panel del desborde. Se estampa en el overlay del CDK (FUERA del host),\r\n as\u00ED que las variables de acento NO se heredan: se repiten en l\u00EDnea, tal\r\n como el golden repite `accentVars(accent)` en este mismo nodo.\r\n -->\r\n <div\r\n iusPopoverContent\r\n class=\"ius-settings-nav__pop\"\r\n role=\"menu\"\r\n [style.--_sn-fg]=\"accentFg()\"\r\n [style.--_sn-tint]=\"accentTint()\"\r\n >\r\n @for (it of hiddenItems(); track it.id) {\r\n <ius-menu-item\r\n variant=\"menu\"\r\n itemRole=\"menuitem\"\r\n [size]=\"size()\"\r\n [icon]=\"it.icon\"\r\n [label]=\"it.label\"\r\n [badge]=\"it.badge\"\r\n [selected]=\"it.id === selectedId()\"\r\n [disabled]=\"!!it.disabled\"\r\n [href]=\"it.href\"\r\n (clicked)=\"handleFromOverflow(it)\"\r\n />\r\n }\r\n </div>\r\n </ius-popover>\r\n }\r\n\r\n <!--\r\n Contenedor de MEDICI\u00D3N (priority+): clona TODAS las filas fuera de vista\r\n (`position: absolute` + `visibility: hidden`, as\u00ED que no aporta alto ni\r\n entra en el orden de tabulaci\u00F3n) y de ah\u00ED se leen los `offsetHeight`.\r\n Cada clon va envuelto en `__mrow` porque el host de `ius-menu-item` es\r\n `display: contents` y no generar\u00EDa caja que medir.\r\n -->\r\n <div class=\"ius-settings-nav__measure\" #meas aria-hidden=\"true\">\r\n @for (it of items(); track it.id) {\r\n <div class=\"ius-settings-nav__mrow\">\r\n <ng-container [ngTemplateOutlet]=\"fila\" [ngTemplateOutletContext]=\"{ it: it }\" />\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n\r\n<!-- Pie: slot libre + bot\u00F3n propio de colapso, sobre una l\u00EDnea separadora. -->\r\n@if (hasFooter()) {\r\n <div class=\"ius-settings-nav__sep\"></div>\r\n <div class=\"ius-settings-nav__footer\">\r\n <ng-content select=\"[iusSettingsNavFooter]\" />\r\n\r\n @if (collapsible()) {\r\n @if (isCollapsed()) {\r\n <ius-tooltip [label]=\"toggleLabel()\" placement=\"right\">\r\n <button\r\n type=\"button\"\r\n class=\"ius-settings-nav__cico\"\r\n [attr.aria-label]=\"toggleLabel()\"\r\n aria-expanded=\"false\"\r\n (click)=\"toggleCollapsed()\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ toggleIcon() }}</span>\r\n </button>\r\n </ius-tooltip>\r\n } @else {\r\n <ius-menu-item\r\n variant=\"rail\"\r\n [size]=\"size()\"\r\n [icon]=\"toggleIcon()\"\r\n [label]=\"toggleLabel()\"\r\n [ariaLabel]=\"toggleLabel()\"\r\n (clicked)=\"toggleCollapsed()\"\r\n />\r\n }\r\n }\r\n </div>\r\n}\r\n\r\n<!--\r\n UNA sola plantilla de fila, estampada con `NgTemplateOutlet` en la columna\r\n visible y en el contenedor de medici\u00F3n. El contexto de un `ng-template` no\r\n est\u00E1 tipado, as\u00ED que `asItem()` le devuelve el tipo y `strictTemplates`\r\n vuelve a comprobar todo el cuerpo.\r\n-->\r\n<ng-template #fila let-raw=\"it\">\r\n @let it = asItem(raw);\r\n @let sel = it.id === selectedId();\r\n\r\n @if (isCollapsed()) {\r\n <!-- Colapsado: solo \u00EDcono; el nombre accesible lo dan Tooltip + aria-label. -->\r\n <ius-tooltip [label]=\"it.label\" placement=\"right\">\r\n @if (isLink(it)) {\r\n <a\r\n class=\"ius-settings-nav__cico\"\r\n [href]=\"it.href\"\r\n [attr.data-selected]=\"sel ? 'true' : null\"\r\n [attr.data-disabled]=\"it.disabled ? 'true' : null\"\r\n [attr.aria-current]=\"sel ? 'page' : null\"\r\n [attr.aria-label]=\"it.label\"\r\n (click)=\"handle(it)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ it.icon }}</span>\r\n @if (it.badge) {\r\n <span class=\"ius-settings-nav__cico-badge\" aria-hidden=\"true\"></span>\r\n }\r\n </a>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n class=\"ius-settings-nav__cico\"\r\n [disabled]=\"!it.href && !!it.disabled\"\r\n [attr.data-selected]=\"sel ? 'true' : null\"\r\n [attr.data-disabled]=\"it.disabled ? 'true' : null\"\r\n [attr.aria-current]=\"sel ? 'page' : null\"\r\n [attr.aria-label]=\"it.label\"\r\n (click)=\"handle(it)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ it.icon }}</span>\r\n @if (it.badge) {\r\n <span class=\"ius-settings-nav__cico-badge\" aria-hidden=\"true\"></span>\r\n }\r\n </button>\r\n }\r\n </ius-tooltip>\r\n } @else {\r\n <!-- Expandido: la fila ES un MenuItem `rail` (idle/hover/pressed heredados). -->\r\n <ius-menu-item\r\n variant=\"rail\"\r\n [size]=\"size()\"\r\n [icon]=\"it.icon\"\r\n [label]=\"it.label\"\r\n [badge]=\"it.badge\"\r\n [selected]=\"sel\"\r\n [disabled]=\"!!it.disabled\"\r\n [href]=\"it.href\"\r\n (clicked)=\"handle(it)\"\r\n />\r\n }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{box-sizing:border-box;-webkit-user-select:none;user-select:none;display:flex;flex-direction:column;width:var(--_sn-w, 240px);min-width:var(--_sn-w, 240px);height:100%;background:var(--ius-surface-card);border-right:1px solid var(--ius-stroke);padding:var(--ius-space-sm) var(--ius-space-xs);gap:var(--ius-space-xxs);font-family:var(--ius-font-body)}:host([data-collapsed=true]){width:var(--_sn-wc, 64px);min-width:var(--_sn-wc, 64px)}.ius-settings-nav__header{flex:0 0 auto;padding:var(--ius-space-xs) var(--ius-space-xs) var(--ius-space-sm);min-height:0}.ius-settings-nav__title{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);line-height:1.2;text-transform:uppercase;letter-spacing:.04em;color:var(--ius-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-settings-nav__items{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs);overflow:hidden;position:relative}.ius-settings-nav__measure{position:absolute;top:0;left:0;right:0;visibility:hidden;pointer-events:none;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-settings-nav__mrow{display:flex;flex-direction:column}.ius-settings-nav__footer{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-settings-nav__sep{height:1px;background:var(--ius-stroke);margin:var(--ius-space-xs) var(--ius-space-xs);flex:0 0 auto}:host ::ng-deep .ius-menuitem[data-variant=rail]{--_mi-icon: var(--ius-neutral-8)}:host ::ng-deep .ius-menuitem[data-variant=rail][data-selected=true]{background:var(--_sn-tint);--_mi-icon: var(--_sn-fg)}:host ::ng-deep .ius-menuitem[data-variant=rail][data-selected=true] .ius-menuitem__label{color:var(--_sn-fg)}:host ::ng-deep ius-tooltip{align-items:stretch}:host ::ng-deep ius-tooltip>ius-popover{flex:1 1 auto;min-width:0;align-items:stretch}.ius-settings-nav__cico{appearance:none;border:0;background:transparent;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:var(--_sn-cico-h, var(--ius-hit-target-min));border-radius:var(--ius-radius-md);color:var(--ius-neutral-8);text-decoration:none;transition:background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-settings-nav__cico:hover{background:var(--ius-neutral-2)}.ius-settings-nav__cico:active{background:var(--ius-neutral-3)}.ius-settings-nav__cico:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-settings-nav__cico[data-disabled=true]{opacity:.5;pointer-events:none;cursor:default}.ius-settings-nav__cico[data-selected=true]{background:var(--_sn-tint);color:var(--_sn-fg)}.ius-settings-nav__cico .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-settings-nav__cico-badge{position:absolute;top:7px;right:12px;width:8px;height:8px;border-radius:var(--ius-radius-pill);background:var(--ius-info-500);box-shadow:0 0 0 2px var(--ius-surface-card)}.ius-settings-nav__pop{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:208px;padding:var(--ius-space-xxs)}.ius-settings-nav__pop ::ng-deep .ius-menuitem[data-variant=menu][data-selected=true]{background:var(--_sn-tint);--_mi-icon: var(--_sn-fg)}.ius-settings-nav__pop ::ng-deep .ius-menuitem[data-variant=menu][data-selected=true] .ius-menuitem__label{color:var(--_sn-fg)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MenuItemComponent, selector: "ius-menu-item", inputs: ["icon", "label", "description", "badge", "variant", "size", "selected", "disabled", "danger", "state", "href", "ariaLabel", "itemRole"], outputs: ["clicked"] }, { kind: "component", type: PopoverComponent, selector: "ius-popover", inputs: ["title", "content", "placement", "trigger", "offset", "open", "defaultOpen", "showArrow", "disabled", "anchorRect", "padding", "dismissable", "panelClass"], outputs: ["openChange"] }, { kind: "component", type: TooltipComponent, selector: "ius-tooltip", inputs: ["label", "placement", "trigger", "offset", "showArrow", "disabled", "open", "defaultOpen"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14016
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SettingsNavComponent, isStandalone: true, selector: "ius-settings-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, defaultCollapsed: { classPropertyName: "defaultCollapsed", publicName: "defaultCollapsed", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, overflowLabel: { classPropertyName: "overflowLabel", publicName: "overflowLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIdChange: "selectedIdChange", itemClick: "itemClick", collapsedChange: "collapsedChange" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel()", "attr.data-collapsed": "isCollapsed() ? 'true' : null", "attr.title": "null", "style.--_sn-w": "widthCss()", "style.--_sn-cico-h": "cicoH()", "style.--_sn-fg": "accentFg()", "style.--_sn-tint": "accentTint()" }, classAttribute: "ius-settings-nav" }, queries: [{ propertyName: "headerRef", first: true, predicate: IusSettingsNavHeaderDirective, descendants: true, isSignal: true }, { propertyName: "footerRef", first: true, predicate: IusSettingsNavFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "wrapRef", first: true, predicate: ["wrap"], descendants: true, isSignal: true }, { propertyName: "measRef", first: true, predicate: ["meas"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n SettingsNav \u2014 el HOST es el `<nav>` (ver `host:` del .ts), as\u00ED que aqu\u00ED\n arranca directamente el contenido: encabezado \u00B7 columna de filas \u00B7 pie.\n-->\n\n<!--\n Encabezado. El slot `[iusSettingsNavHeader]` MANDA sobre `title`, y `title`\n se oculta al colapsar (ambas condiciones viven en `showTitle()`).\n El `ng-content` va en un \u00FAnico `@if` (nunca anidado): con `@if` anidados el\n compilador solo iza el atributo `select` un nivel y la proyecci\u00F3n fallar\u00EDa en\n silencio.\n-->\n@if (headerRef() || showTitle()) {\n <div class=\"ius-settings-nav__header\">\n <ng-content select=\"[iusSettingsNavHeader]\" />\n @if (showTitle()) {\n <div class=\"ius-settings-nav__title\">{{ title() }}</div>\n }\n </div>\n}\n\n<!-- Columna de filas: NO scrollea (priority+ recoge lo que no cabe). -->\n<div class=\"ius-settings-nav__items\" #wrap>\n @for (it of visibleItems(); track it.id) {\n <ng-container [ngTemplateOutlet]=\"fila\" [ngTemplateOutletContext]=\"{ it: it }\" />\n }\n\n <!-- Desborde: lo que no cabe en alto se recoge en un Popover a la derecha. -->\n @if (hasOverflow()) {\n <ius-popover\n [open]=\"moreOpen()\"\n trigger=\"click\"\n placement=\"right-start\"\n [showArrow]=\"false\"\n [offset]=\"8\"\n [dismissable]=\"true\"\n (openChange)=\"moreOpen.set($event)\"\n >\n @if (isCollapsed()) {\n <button\n type=\"button\"\n class=\"ius-settings-nav__cico\"\n [attr.data-selected]=\"anyHiddenSelected() ? 'true' : null\"\n [attr.aria-label]=\"overflowLabel()\"\n aria-haspopup=\"menu\"\n [attr.aria-expanded]=\"moreOpen()\"\n >\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">more_horiz</span>\n @if (anyHiddenSelected()) {\n <span class=\"ius-settings-nav__cico-badge\" aria-hidden=\"true\"></span>\n }\n </button>\n } @else {\n <ius-menu-item\n variant=\"rail\"\n [size]=\"size()\"\n icon=\"more_horiz\"\n [label]=\"overflowLabel()\"\n [selected]=\"anyHiddenSelected()\"\n [ariaLabel]=\"overflowLabel() + ' secciones'\"\n />\n }\n\n <!--\n Panel del desborde. Se estampa en el overlay del CDK (FUERA del host),\n as\u00ED que las variables de acento NO se heredan: se repiten en l\u00EDnea, tal\n como el golden repite `accentVars(accent)` en este mismo nodo.\n -->\n <div\n iusPopoverContent\n class=\"ius-settings-nav__pop\"\n role=\"menu\"\n [style.--_sn-fg]=\"accentFg()\"\n [style.--_sn-tint]=\"accentTint()\"\n >\n @for (it of hiddenItems(); track it.id) {\n <ius-menu-item\n variant=\"menu\"\n itemRole=\"menuitem\"\n [size]=\"size()\"\n [icon]=\"it.icon\"\n [label]=\"it.label\"\n [badge]=\"it.badge\"\n [selected]=\"it.id === selectedId()\"\n [disabled]=\"!!it.disabled\"\n [href]=\"it.href\"\n (clicked)=\"handleFromOverflow(it)\"\n />\n }\n </div>\n </ius-popover>\n }\n\n <!--\n Contenedor de MEDICI\u00D3N (priority+): clona TODAS las filas fuera de vista\n (`position: absolute` + `visibility: hidden`, as\u00ED que no aporta alto ni\n entra en el orden de tabulaci\u00F3n) y de ah\u00ED se leen los `offsetHeight`.\n Cada clon va envuelto en `__mrow` porque el host de `ius-menu-item` es\n `display: contents` y no generar\u00EDa caja que medir.\n -->\n <div class=\"ius-settings-nav__measure\" #meas aria-hidden=\"true\">\n @for (it of items(); track it.id) {\n <div class=\"ius-settings-nav__mrow\">\n <ng-container [ngTemplateOutlet]=\"fila\" [ngTemplateOutletContext]=\"{ it: it }\" />\n </div>\n }\n </div>\n</div>\n\n<!-- Pie: slot libre + bot\u00F3n propio de colapso, sobre una l\u00EDnea separadora. -->\n@if (hasFooter()) {\n <div class=\"ius-settings-nav__sep\"></div>\n <div class=\"ius-settings-nav__footer\">\n <ng-content select=\"[iusSettingsNavFooter]\" />\n\n @if (collapsible()) {\n @if (isCollapsed()) {\n <ius-tooltip [label]=\"toggleLabel()\" placement=\"right\">\n <button\n type=\"button\"\n class=\"ius-settings-nav__cico\"\n [attr.aria-label]=\"toggleLabel()\"\n aria-expanded=\"false\"\n (click)=\"toggleCollapsed()\"\n >\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ toggleIcon() }}</span>\n </button>\n </ius-tooltip>\n } @else {\n <ius-menu-item\n variant=\"rail\"\n [size]=\"size()\"\n [icon]=\"toggleIcon()\"\n [label]=\"toggleLabel()\"\n [ariaLabel]=\"toggleLabel()\"\n (clicked)=\"toggleCollapsed()\"\n />\n }\n }\n </div>\n}\n\n<!--\n UNA sola plantilla de fila, estampada con `NgTemplateOutlet` en la columna\n visible y en el contenedor de medici\u00F3n. El contexto de un `ng-template` no\n est\u00E1 tipado, as\u00ED que `asItem()` le devuelve el tipo y `strictTemplates`\n vuelve a comprobar todo el cuerpo.\n-->\n<ng-template #fila let-raw=\"it\">\n @let it = asItem(raw);\n @let sel = it.id === selectedId();\n\n @if (isCollapsed()) {\n <!-- Colapsado: solo \u00EDcono; el nombre accesible lo dan Tooltip + aria-label. -->\n <ius-tooltip [label]=\"it.label\" placement=\"right\">\n @if (isLink(it)) {\n <a\n class=\"ius-settings-nav__cico\"\n [href]=\"it.href\"\n [attr.data-selected]=\"sel ? 'true' : null\"\n [attr.data-disabled]=\"it.disabled ? 'true' : null\"\n [attr.aria-current]=\"sel ? 'page' : null\"\n [attr.aria-label]=\"it.label\"\n (click)=\"handle(it)\"\n >\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ it.icon }}</span>\n @if (it.badge) {\n <span class=\"ius-settings-nav__cico-badge\" aria-hidden=\"true\"></span>\n }\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"ius-settings-nav__cico\"\n [disabled]=\"!it.href && !!it.disabled\"\n [attr.data-selected]=\"sel ? 'true' : null\"\n [attr.data-disabled]=\"it.disabled ? 'true' : null\"\n [attr.aria-current]=\"sel ? 'page' : null\"\n [attr.aria-label]=\"it.label\"\n (click)=\"handle(it)\"\n >\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ it.icon }}</span>\n @if (it.badge) {\n <span class=\"ius-settings-nav__cico-badge\" aria-hidden=\"true\"></span>\n }\n </button>\n }\n </ius-tooltip>\n } @else {\n <!-- Expandido: la fila ES un MenuItem `rail` (idle/hover/pressed heredados). -->\n <ius-menu-item\n variant=\"rail\"\n [size]=\"size()\"\n [icon]=\"it.icon\"\n [label]=\"it.label\"\n [badge]=\"it.badge\"\n [selected]=\"sel\"\n [disabled]=\"!!it.disabled\"\n [href]=\"it.href\"\n (clicked)=\"handle(it)\"\n />\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{box-sizing:border-box;-webkit-user-select:none;user-select:none;display:flex;flex-direction:column;width:var(--_sn-w, 240px);min-width:var(--_sn-w, 240px);height:100%;background:var(--ius-surface-card);border-right:1px solid var(--ius-stroke);padding:var(--ius-space-sm) var(--ius-space-xs);gap:var(--ius-space-xxs);font-family:var(--ius-font-body)}:host([data-collapsed=true]){width:var(--_sn-wc, 64px);min-width:var(--_sn-wc, 64px)}.ius-settings-nav__header{flex:0 0 auto;padding:var(--ius-space-xs) var(--ius-space-xs) var(--ius-space-sm);min-height:0}.ius-settings-nav__title{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);line-height:1.2;text-transform:uppercase;letter-spacing:.04em;color:var(--ius-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-settings-nav__items{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs);overflow:hidden;position:relative}.ius-settings-nav__measure{position:absolute;top:0;left:0;right:0;visibility:hidden;pointer-events:none;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-settings-nav__mrow{display:flex;flex-direction:column}.ius-settings-nav__footer{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-settings-nav__sep{height:1px;background:var(--ius-stroke);margin:var(--ius-space-xs) var(--ius-space-xs);flex:0 0 auto}:host ::ng-deep .ius-menuitem[data-variant=rail]{--_mi-icon: var(--ius-neutral-8)}:host ::ng-deep .ius-menuitem[data-variant=rail][data-selected=true]{background:var(--_sn-tint);--_mi-icon: var(--_sn-fg)}:host ::ng-deep .ius-menuitem[data-variant=rail][data-selected=true] .ius-menuitem__label{color:var(--_sn-fg)}:host ::ng-deep ius-tooltip{align-items:stretch}:host ::ng-deep ius-tooltip>ius-popover{flex:1 1 auto;min-width:0;align-items:stretch}.ius-settings-nav__cico{appearance:none;border:0;background:transparent;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:var(--_sn-cico-h, var(--ius-hit-target-min));border-radius:var(--ius-radius-md);color:var(--ius-neutral-8);text-decoration:none;transition:background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-settings-nav__cico:hover{background:var(--ius-neutral-2)}.ius-settings-nav__cico:active{background:var(--ius-neutral-3)}.ius-settings-nav__cico:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-settings-nav__cico[data-disabled=true]{opacity:.5;pointer-events:none;cursor:default}.ius-settings-nav__cico[data-selected=true]{background:var(--_sn-tint);color:var(--_sn-fg)}.ius-settings-nav__cico .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-settings-nav__cico-badge{position:absolute;top:7px;right:12px;width:8px;height:8px;border-radius:var(--ius-radius-pill);background:var(--ius-info-500);box-shadow:0 0 0 2px var(--ius-surface-card)}.ius-settings-nav__pop{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:208px;padding:var(--ius-space-xxs)}.ius-settings-nav__pop ::ng-deep .ius-menuitem[data-variant=menu][data-selected=true]{background:var(--_sn-tint);--_mi-icon: var(--_sn-fg)}.ius-settings-nav__pop ::ng-deep .ius-menuitem[data-variant=menu][data-selected=true] .ius-menuitem__label{color:var(--_sn-fg)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MenuItemComponent, selector: "ius-menu-item", inputs: ["icon", "label", "description", "badge", "variant", "size", "selected", "disabled", "danger", "state", "href", "ariaLabel", "itemRole"], outputs: ["clicked"] }, { kind: "component", type: PopoverComponent, selector: "ius-popover", inputs: ["title", "content", "placement", "trigger", "offset", "open", "defaultOpen", "showArrow", "disabled", "anchorRect", "padding", "dismissable", "panelClass"], outputs: ["openChange"] }, { kind: "component", type: TooltipComponent, selector: "ius-tooltip", inputs: ["label", "placement", "trigger", "offset", "showArrow", "disabled", "open", "defaultOpen"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14017
14017
|
}
|
|
14018
14018
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SettingsNavComponent, decorators: [{
|
|
14019
14019
|
type: Component,
|
|
@@ -14032,7 +14032,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
14032
14032
|
'[style.--_sn-cico-h]': 'cicoH()',
|
|
14033
14033
|
'[style.--_sn-fg]': 'accentFg()',
|
|
14034
14034
|
'[style.--_sn-tint]': 'accentTint()',
|
|
14035
|
-
}, template: "<!--\r\n SettingsNav \u2014 el HOST es el `<nav>` (ver `host:` del .ts), as\u00ED que aqu\u00ED\r\n arranca directamente el contenido: encabezado \u00B7 columna de filas \u00B7 pie.\r\n-->\r\n\r\n<!--\r\n Encabezado. El slot `[iusSettingsNavHeader]` MANDA sobre `title`, y `title`\r\n se oculta al colapsar (ambas condiciones viven en `showTitle()`).\r\n El `ng-content` va en un \u00FAnico `@if` (nunca anidado): con `@if` anidados el\r\n compilador solo iza el atributo `select` un nivel y la proyecci\u00F3n fallar\u00EDa en\r\n silencio.\r\n-->\r\n@if (headerRef() || showTitle()) {\r\n <div class=\"ius-settings-nav__header\">\r\n <ng-content select=\"[iusSettingsNavHeader]\" />\r\n @if (showTitle()) {\r\n <div class=\"ius-settings-nav__title\">{{ title() }}</div>\r\n }\r\n </div>\r\n}\r\n\r\n<!-- Columna de filas: NO scrollea (priority+ recoge lo que no cabe). -->\r\n<div class=\"ius-settings-nav__items\" #wrap>\r\n @for (it of visibleItems(); track it.id) {\r\n <ng-container [ngTemplateOutlet]=\"fila\" [ngTemplateOutletContext]=\"{ it: it }\" />\r\n }\r\n\r\n <!-- Desborde: lo que no cabe en alto se recoge en un Popover a la derecha. -->\r\n @if (hasOverflow()) {\r\n <ius-popover\r\n [open]=\"moreOpen()\"\r\n trigger=\"click\"\r\n placement=\"right-start\"\r\n [showArrow]=\"false\"\r\n [offset]=\"8\"\r\n [dismissable]=\"true\"\r\n (openChange)=\"moreOpen.set($event)\"\r\n >\r\n @if (isCollapsed()) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-settings-nav__cico\"\r\n [attr.data-selected]=\"anyHiddenSelected() ? 'true' : null\"\r\n [attr.aria-label]=\"overflowLabel()\"\r\n aria-haspopup=\"menu\"\r\n [attr.aria-expanded]=\"moreOpen()\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">more_horiz</span>\r\n @if (anyHiddenSelected()) {\r\n <span class=\"ius-settings-nav__cico-badge\" aria-hidden=\"true\"></span>\r\n }\r\n </button>\r\n } @else {\r\n <ius-menu-item\r\n variant=\"rail\"\r\n [size]=\"size()\"\r\n icon=\"more_horiz\"\r\n [label]=\"overflowLabel()\"\r\n [selected]=\"anyHiddenSelected()\"\r\n [ariaLabel]=\"overflowLabel() + ' secciones'\"\r\n />\r\n }\r\n\r\n <!--\r\n Panel del desborde. Se estampa en el overlay del CDK (FUERA del host),\r\n as\u00ED que las variables de acento NO se heredan: se repiten en l\u00EDnea, tal\r\n como el golden repite `accentVars(accent)` en este mismo nodo.\r\n -->\r\n <div\r\n iusPopoverContent\r\n class=\"ius-settings-nav__pop\"\r\n role=\"menu\"\r\n [style.--_sn-fg]=\"accentFg()\"\r\n [style.--_sn-tint]=\"accentTint()\"\r\n >\r\n @for (it of hiddenItems(); track it.id) {\r\n <ius-menu-item\r\n variant=\"menu\"\r\n itemRole=\"menuitem\"\r\n [size]=\"size()\"\r\n [icon]=\"it.icon\"\r\n [label]=\"it.label\"\r\n [badge]=\"it.badge\"\r\n [selected]=\"it.id === selectedId()\"\r\n [disabled]=\"!!it.disabled\"\r\n [href]=\"it.href\"\r\n (clicked)=\"handleFromOverflow(it)\"\r\n />\r\n }\r\n </div>\r\n </ius-popover>\r\n }\r\n\r\n <!--\r\n Contenedor de MEDICI\u00D3N (priority+): clona TODAS las filas fuera de vista\r\n (`position: absolute` + `visibility: hidden`, as\u00ED que no aporta alto ni\r\n entra en el orden de tabulaci\u00F3n) y de ah\u00ED se leen los `offsetHeight`.\r\n Cada clon va envuelto en `__mrow` porque el host de `ius-menu-item` es\r\n `display: contents` y no generar\u00EDa caja que medir.\r\n -->\r\n <div class=\"ius-settings-nav__measure\" #meas aria-hidden=\"true\">\r\n @for (it of items(); track it.id) {\r\n <div class=\"ius-settings-nav__mrow\">\r\n <ng-container [ngTemplateOutlet]=\"fila\" [ngTemplateOutletContext]=\"{ it: it }\" />\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n\r\n<!-- Pie: slot libre + bot\u00F3n propio de colapso, sobre una l\u00EDnea separadora. -->\r\n@if (hasFooter()) {\r\n <div class=\"ius-settings-nav__sep\"></div>\r\n <div class=\"ius-settings-nav__footer\">\r\n <ng-content select=\"[iusSettingsNavFooter]\" />\r\n\r\n @if (collapsible()) {\r\n @if (isCollapsed()) {\r\n <ius-tooltip [label]=\"toggleLabel()\" placement=\"right\">\r\n <button\r\n type=\"button\"\r\n class=\"ius-settings-nav__cico\"\r\n [attr.aria-label]=\"toggleLabel()\"\r\n aria-expanded=\"false\"\r\n (click)=\"toggleCollapsed()\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ toggleIcon() }}</span>\r\n </button>\r\n </ius-tooltip>\r\n } @else {\r\n <ius-menu-item\r\n variant=\"rail\"\r\n [size]=\"size()\"\r\n [icon]=\"toggleIcon()\"\r\n [label]=\"toggleLabel()\"\r\n [ariaLabel]=\"toggleLabel()\"\r\n (clicked)=\"toggleCollapsed()\"\r\n />\r\n }\r\n }\r\n </div>\r\n}\r\n\r\n<!--\r\n UNA sola plantilla de fila, estampada con `NgTemplateOutlet` en la columna\r\n visible y en el contenedor de medici\u00F3n. El contexto de un `ng-template` no\r\n est\u00E1 tipado, as\u00ED que `asItem()` le devuelve el tipo y `strictTemplates`\r\n vuelve a comprobar todo el cuerpo.\r\n-->\r\n<ng-template #fila let-raw=\"it\">\r\n @let it = asItem(raw);\r\n @let sel = it.id === selectedId();\r\n\r\n @if (isCollapsed()) {\r\n <!-- Colapsado: solo \u00EDcono; el nombre accesible lo dan Tooltip + aria-label. -->\r\n <ius-tooltip [label]=\"it.label\" placement=\"right\">\r\n @if (isLink(it)) {\r\n <a\r\n class=\"ius-settings-nav__cico\"\r\n [href]=\"it.href\"\r\n [attr.data-selected]=\"sel ? 'true' : null\"\r\n [attr.data-disabled]=\"it.disabled ? 'true' : null\"\r\n [attr.aria-current]=\"sel ? 'page' : null\"\r\n [attr.aria-label]=\"it.label\"\r\n (click)=\"handle(it)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ it.icon }}</span>\r\n @if (it.badge) {\r\n <span class=\"ius-settings-nav__cico-badge\" aria-hidden=\"true\"></span>\r\n }\r\n </a>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n class=\"ius-settings-nav__cico\"\r\n [disabled]=\"!it.href && !!it.disabled\"\r\n [attr.data-selected]=\"sel ? 'true' : null\"\r\n [attr.data-disabled]=\"it.disabled ? 'true' : null\"\r\n [attr.aria-current]=\"sel ? 'page' : null\"\r\n [attr.aria-label]=\"it.label\"\r\n (click)=\"handle(it)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ it.icon }}</span>\r\n @if (it.badge) {\r\n <span class=\"ius-settings-nav__cico-badge\" aria-hidden=\"true\"></span>\r\n }\r\n </button>\r\n }\r\n </ius-tooltip>\r\n } @else {\r\n <!-- Expandido: la fila ES un MenuItem `rail` (idle/hover/pressed heredados). -->\r\n <ius-menu-item\r\n variant=\"rail\"\r\n [size]=\"size()\"\r\n [icon]=\"it.icon\"\r\n [label]=\"it.label\"\r\n [badge]=\"it.badge\"\r\n [selected]=\"sel\"\r\n [disabled]=\"!!it.disabled\"\r\n [href]=\"it.href\"\r\n (clicked)=\"handle(it)\"\r\n />\r\n }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{box-sizing:border-box;-webkit-user-select:none;user-select:none;display:flex;flex-direction:column;width:var(--_sn-w, 240px);min-width:var(--_sn-w, 240px);height:100%;background:var(--ius-surface-card);border-right:1px solid var(--ius-stroke);padding:var(--ius-space-sm) var(--ius-space-xs);gap:var(--ius-space-xxs);font-family:var(--ius-font-body)}:host([data-collapsed=true]){width:var(--_sn-wc, 64px);min-width:var(--_sn-wc, 64px)}.ius-settings-nav__header{flex:0 0 auto;padding:var(--ius-space-xs) var(--ius-space-xs) var(--ius-space-sm);min-height:0}.ius-settings-nav__title{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);line-height:1.2;text-transform:uppercase;letter-spacing:.04em;color:var(--ius-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-settings-nav__items{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs);overflow:hidden;position:relative}.ius-settings-nav__measure{position:absolute;top:0;left:0;right:0;visibility:hidden;pointer-events:none;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-settings-nav__mrow{display:flex;flex-direction:column}.ius-settings-nav__footer{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-settings-nav__sep{height:1px;background:var(--ius-stroke);margin:var(--ius-space-xs) var(--ius-space-xs);flex:0 0 auto}:host ::ng-deep .ius-menuitem[data-variant=rail]{--_mi-icon: var(--ius-neutral-8)}:host ::ng-deep .ius-menuitem[data-variant=rail][data-selected=true]{background:var(--_sn-tint);--_mi-icon: var(--_sn-fg)}:host ::ng-deep .ius-menuitem[data-variant=rail][data-selected=true] .ius-menuitem__label{color:var(--_sn-fg)}:host ::ng-deep ius-tooltip{align-items:stretch}:host ::ng-deep ius-tooltip>ius-popover{flex:1 1 auto;min-width:0;align-items:stretch}.ius-settings-nav__cico{appearance:none;border:0;background:transparent;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:var(--_sn-cico-h, var(--ius-hit-target-min));border-radius:var(--ius-radius-md);color:var(--ius-neutral-8);text-decoration:none;transition:background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-settings-nav__cico:hover{background:var(--ius-neutral-2)}.ius-settings-nav__cico:active{background:var(--ius-neutral-3)}.ius-settings-nav__cico:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-settings-nav__cico[data-disabled=true]{opacity:.5;pointer-events:none;cursor:default}.ius-settings-nav__cico[data-selected=true]{background:var(--_sn-tint);color:var(--_sn-fg)}.ius-settings-nav__cico .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-settings-nav__cico-badge{position:absolute;top:7px;right:12px;width:8px;height:8px;border-radius:var(--ius-radius-pill);background:var(--ius-info-500);box-shadow:0 0 0 2px var(--ius-surface-card)}.ius-settings-nav__pop{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:208px;padding:var(--ius-space-xxs)}.ius-settings-nav__pop ::ng-deep .ius-menuitem[data-variant=menu][data-selected=true]{background:var(--_sn-tint);--_mi-icon: var(--_sn-fg)}.ius-settings-nav__pop ::ng-deep .ius-menuitem[data-variant=menu][data-selected=true] .ius-menuitem__label{color:var(--_sn-fg)}\n"] }]
|
|
14035
|
+
}, template: "<!--\n SettingsNav \u2014 el HOST es el `<nav>` (ver `host:` del .ts), as\u00ED que aqu\u00ED\n arranca directamente el contenido: encabezado \u00B7 columna de filas \u00B7 pie.\n-->\n\n<!--\n Encabezado. El slot `[iusSettingsNavHeader]` MANDA sobre `title`, y `title`\n se oculta al colapsar (ambas condiciones viven en `showTitle()`).\n El `ng-content` va en un \u00FAnico `@if` (nunca anidado): con `@if` anidados el\n compilador solo iza el atributo `select` un nivel y la proyecci\u00F3n fallar\u00EDa en\n silencio.\n-->\n@if (headerRef() || showTitle()) {\n <div class=\"ius-settings-nav__header\">\n <ng-content select=\"[iusSettingsNavHeader]\" />\n @if (showTitle()) {\n <div class=\"ius-settings-nav__title\">{{ title() }}</div>\n }\n </div>\n}\n\n<!-- Columna de filas: NO scrollea (priority+ recoge lo que no cabe). -->\n<div class=\"ius-settings-nav__items\" #wrap>\n @for (it of visibleItems(); track it.id) {\n <ng-container [ngTemplateOutlet]=\"fila\" [ngTemplateOutletContext]=\"{ it: it }\" />\n }\n\n <!-- Desborde: lo que no cabe en alto se recoge en un Popover a la derecha. -->\n @if (hasOverflow()) {\n <ius-popover\n [open]=\"moreOpen()\"\n trigger=\"click\"\n placement=\"right-start\"\n [showArrow]=\"false\"\n [offset]=\"8\"\n [dismissable]=\"true\"\n (openChange)=\"moreOpen.set($event)\"\n >\n @if (isCollapsed()) {\n <button\n type=\"button\"\n class=\"ius-settings-nav__cico\"\n [attr.data-selected]=\"anyHiddenSelected() ? 'true' : null\"\n [attr.aria-label]=\"overflowLabel()\"\n aria-haspopup=\"menu\"\n [attr.aria-expanded]=\"moreOpen()\"\n >\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">more_horiz</span>\n @if (anyHiddenSelected()) {\n <span class=\"ius-settings-nav__cico-badge\" aria-hidden=\"true\"></span>\n }\n </button>\n } @else {\n <ius-menu-item\n variant=\"rail\"\n [size]=\"size()\"\n icon=\"more_horiz\"\n [label]=\"overflowLabel()\"\n [selected]=\"anyHiddenSelected()\"\n [ariaLabel]=\"overflowLabel() + ' secciones'\"\n />\n }\n\n <!--\n Panel del desborde. Se estampa en el overlay del CDK (FUERA del host),\n as\u00ED que las variables de acento NO se heredan: se repiten en l\u00EDnea, tal\n como el golden repite `accentVars(accent)` en este mismo nodo.\n -->\n <div\n iusPopoverContent\n class=\"ius-settings-nav__pop\"\n role=\"menu\"\n [style.--_sn-fg]=\"accentFg()\"\n [style.--_sn-tint]=\"accentTint()\"\n >\n @for (it of hiddenItems(); track it.id) {\n <ius-menu-item\n variant=\"menu\"\n itemRole=\"menuitem\"\n [size]=\"size()\"\n [icon]=\"it.icon\"\n [label]=\"it.label\"\n [badge]=\"it.badge\"\n [selected]=\"it.id === selectedId()\"\n [disabled]=\"!!it.disabled\"\n [href]=\"it.href\"\n (clicked)=\"handleFromOverflow(it)\"\n />\n }\n </div>\n </ius-popover>\n }\n\n <!--\n Contenedor de MEDICI\u00D3N (priority+): clona TODAS las filas fuera de vista\n (`position: absolute` + `visibility: hidden`, as\u00ED que no aporta alto ni\n entra en el orden de tabulaci\u00F3n) y de ah\u00ED se leen los `offsetHeight`.\n Cada clon va envuelto en `__mrow` porque el host de `ius-menu-item` es\n `display: contents` y no generar\u00EDa caja que medir.\n -->\n <div class=\"ius-settings-nav__measure\" #meas aria-hidden=\"true\">\n @for (it of items(); track it.id) {\n <div class=\"ius-settings-nav__mrow\">\n <ng-container [ngTemplateOutlet]=\"fila\" [ngTemplateOutletContext]=\"{ it: it }\" />\n </div>\n }\n </div>\n</div>\n\n<!-- Pie: slot libre + bot\u00F3n propio de colapso, sobre una l\u00EDnea separadora. -->\n@if (hasFooter()) {\n <div class=\"ius-settings-nav__sep\"></div>\n <div class=\"ius-settings-nav__footer\">\n <ng-content select=\"[iusSettingsNavFooter]\" />\n\n @if (collapsible()) {\n @if (isCollapsed()) {\n <ius-tooltip [label]=\"toggleLabel()\" placement=\"right\">\n <button\n type=\"button\"\n class=\"ius-settings-nav__cico\"\n [attr.aria-label]=\"toggleLabel()\"\n aria-expanded=\"false\"\n (click)=\"toggleCollapsed()\"\n >\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ toggleIcon() }}</span>\n </button>\n </ius-tooltip>\n } @else {\n <ius-menu-item\n variant=\"rail\"\n [size]=\"size()\"\n [icon]=\"toggleIcon()\"\n [label]=\"toggleLabel()\"\n [ariaLabel]=\"toggleLabel()\"\n (clicked)=\"toggleCollapsed()\"\n />\n }\n }\n </div>\n}\n\n<!--\n UNA sola plantilla de fila, estampada con `NgTemplateOutlet` en la columna\n visible y en el contenedor de medici\u00F3n. El contexto de un `ng-template` no\n est\u00E1 tipado, as\u00ED que `asItem()` le devuelve el tipo y `strictTemplates`\n vuelve a comprobar todo el cuerpo.\n-->\n<ng-template #fila let-raw=\"it\">\n @let it = asItem(raw);\n @let sel = it.id === selectedId();\n\n @if (isCollapsed()) {\n <!-- Colapsado: solo \u00EDcono; el nombre accesible lo dan Tooltip + aria-label. -->\n <ius-tooltip [label]=\"it.label\" placement=\"right\">\n @if (isLink(it)) {\n <a\n class=\"ius-settings-nav__cico\"\n [href]=\"it.href\"\n [attr.data-selected]=\"sel ? 'true' : null\"\n [attr.data-disabled]=\"it.disabled ? 'true' : null\"\n [attr.aria-current]=\"sel ? 'page' : null\"\n [attr.aria-label]=\"it.label\"\n (click)=\"handle(it)\"\n >\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ it.icon }}</span>\n @if (it.badge) {\n <span class=\"ius-settings-nav__cico-badge\" aria-hidden=\"true\"></span>\n }\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"ius-settings-nav__cico\"\n [disabled]=\"!it.href && !!it.disabled\"\n [attr.data-selected]=\"sel ? 'true' : null\"\n [attr.data-disabled]=\"it.disabled ? 'true' : null\"\n [attr.aria-current]=\"sel ? 'page' : null\"\n [attr.aria-label]=\"it.label\"\n (click)=\"handle(it)\"\n >\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ it.icon }}</span>\n @if (it.badge) {\n <span class=\"ius-settings-nav__cico-badge\" aria-hidden=\"true\"></span>\n }\n </button>\n }\n </ius-tooltip>\n } @else {\n <!-- Expandido: la fila ES un MenuItem `rail` (idle/hover/pressed heredados). -->\n <ius-menu-item\n variant=\"rail\"\n [size]=\"size()\"\n [icon]=\"it.icon\"\n [label]=\"it.label\"\n [badge]=\"it.badge\"\n [selected]=\"sel\"\n [disabled]=\"!!it.disabled\"\n [href]=\"it.href\"\n (clicked)=\"handle(it)\"\n />\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{box-sizing:border-box;-webkit-user-select:none;user-select:none;display:flex;flex-direction:column;width:var(--_sn-w, 240px);min-width:var(--_sn-w, 240px);height:100%;background:var(--ius-surface-card);border-right:1px solid var(--ius-stroke);padding:var(--ius-space-sm) var(--ius-space-xs);gap:var(--ius-space-xxs);font-family:var(--ius-font-body)}:host([data-collapsed=true]){width:var(--_sn-wc, 64px);min-width:var(--_sn-wc, 64px)}.ius-settings-nav__header{flex:0 0 auto;padding:var(--ius-space-xs) var(--ius-space-xs) var(--ius-space-sm);min-height:0}.ius-settings-nav__title{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);line-height:1.2;text-transform:uppercase;letter-spacing:.04em;color:var(--ius-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-settings-nav__items{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs);overflow:hidden;position:relative}.ius-settings-nav__measure{position:absolute;top:0;left:0;right:0;visibility:hidden;pointer-events:none;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-settings-nav__mrow{display:flex;flex-direction:column}.ius-settings-nav__footer{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-settings-nav__sep{height:1px;background:var(--ius-stroke);margin:var(--ius-space-xs) var(--ius-space-xs);flex:0 0 auto}:host ::ng-deep .ius-menuitem[data-variant=rail]{--_mi-icon: var(--ius-neutral-8)}:host ::ng-deep .ius-menuitem[data-variant=rail][data-selected=true]{background:var(--_sn-tint);--_mi-icon: var(--_sn-fg)}:host ::ng-deep .ius-menuitem[data-variant=rail][data-selected=true] .ius-menuitem__label{color:var(--_sn-fg)}:host ::ng-deep ius-tooltip{align-items:stretch}:host ::ng-deep ius-tooltip>ius-popover{flex:1 1 auto;min-width:0;align-items:stretch}.ius-settings-nav__cico{appearance:none;border:0;background:transparent;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:var(--_sn-cico-h, var(--ius-hit-target-min));border-radius:var(--ius-radius-md);color:var(--ius-neutral-8);text-decoration:none;transition:background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-settings-nav__cico:hover{background:var(--ius-neutral-2)}.ius-settings-nav__cico:active{background:var(--ius-neutral-3)}.ius-settings-nav__cico:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-settings-nav__cico[data-disabled=true]{opacity:.5;pointer-events:none;cursor:default}.ius-settings-nav__cico[data-selected=true]{background:var(--_sn-tint);color:var(--_sn-fg)}.ius-settings-nav__cico .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-settings-nav__cico-badge{position:absolute;top:7px;right:12px;width:8px;height:8px;border-radius:var(--ius-radius-pill);background:var(--ius-info-500);box-shadow:0 0 0 2px var(--ius-surface-card)}.ius-settings-nav__pop{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:208px;padding:var(--ius-space-xxs)}.ius-settings-nav__pop ::ng-deep .ius-menuitem[data-variant=menu][data-selected=true]{background:var(--_sn-tint);--_mi-icon: var(--_sn-fg)}.ius-settings-nav__pop ::ng-deep .ius-menuitem[data-variant=menu][data-selected=true] .ius-menuitem__label{color:var(--_sn-fg)}\n"] }]
|
|
14036
14036
|
}], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], selectedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedId", required: false }] }], accent: [{ type: i0.Input, args: [{ isSignal: true, alias: "accent", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], defaultCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultCollapsed", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], overflowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflowLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], selectedIdChange: [{ type: i0.Output, args: ["selectedIdChange"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], collapsedChange: [{ type: i0.Output, args: ["collapsedChange"] }], headerRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusSettingsNavHeaderDirective), { isSignal: true }] }], footerRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusSettingsNavFooterDirective), { isSignal: true }] }], wrapRef: [{ type: i0.ViewChild, args: ['wrap', { isSignal: true }] }], measRef: [{ type: i0.ViewChild, args: ['meas', { isSignal: true }] }] } });
|
|
14037
14037
|
|
|
14038
14038
|
/**
|
|
@@ -16610,7 +16610,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
16610
16610
|
}, template: "<!-- Fila de breadcrumb (solo detalle); volver la encabeza si existe -->\r\n@if (hasBreadcrumb()) {\r\n <div class=\"ius-pageheader__bc\">\r\n @if (backInBreadcrumb()) {\r\n <span class=\"ius-pageheader__back\">\r\n <ius-icon-button\r\n icon=\"arrow_back\"\r\n variant=\"tertiary\"\r\n size=\"small\"\r\n [ariaLabel]=\"backLabel()\"\r\n [disabled]=\"backDisabled()\"\r\n (clicked)=\"back.emit($event)\"\r\n />\r\n </span>\r\n }\r\n <ng-content select=\"[iusPageHeaderBreadcrumb]\" />\r\n </div>\r\n}\r\n\r\n<div class=\"ius-pageheader__top\">\r\n <div class=\"ius-pageheader__lead\">\r\n @if (showBack() && !backInBreadcrumb()) {\r\n <span class=\"ius-pageheader__back\">\r\n <ius-icon-button\r\n icon=\"arrow_back\"\r\n variant=\"tertiary\"\r\n size=\"small\"\r\n [ariaLabel]=\"backLabel()\"\r\n [disabled]=\"backDisabled()\"\r\n (clicked)=\"back.emit($event)\"\r\n />\r\n </span>\r\n }\r\n <div class=\"ius-pageheader__titles\">\r\n <!-- Cada pieza: input de texto \u203A contenido proyectado con su directiva -->\r\n @if (overline() != null || hasOverlineSlot()) {\r\n <span class=\"ius-pageheader__overline\">\r\n @if (overline() != null) {\r\n {{ overline() }}\r\n } @else {\r\n <ng-content select=\"[iusPageHeaderOverline]\" />\r\n }\r\n </span>\r\n }\r\n @if (title() != null || hasTitleSlot()) {\r\n <h1 class=\"ius-pageheader__title\" [class]=\"'ius-' + titleLevelEfectivo()\">\r\n @if (title() != null) {\r\n {{ title() }}\r\n } @else {\r\n <ng-content select=\"[iusPageHeaderTitle]\" />\r\n }\r\n </h1>\r\n }\r\n @if (subtitle() != null || hasSubtitleSlot()) {\r\n <p class=\"ius-pageheader__subtitle\">\r\n @if (subtitle() != null) {\r\n {{ subtitle() }}\r\n } @else {\r\n <ng-content select=\"[iusPageHeaderSubtitle]\" />\r\n }\r\n </p>\r\n }\r\n </div>\r\n </div>\r\n @if (hasActions()) {\r\n <div class=\"ius-pageheader__actions\"><ng-content select=\"[iusPageHeaderActions]\" /></div>\r\n }\r\n</div>\r\n\r\n@if (hasToolbar()) {\r\n <div class=\"ius-pageheader__toolbar\"><ng-content select=\"[iusPageHeaderToolbar]\" /></div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-xs)}:host([data-surface=true]){background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);padding:var(--ius-space-md) var(--ius-space-lg)}:host([data-divider=true]){border-bottom:1px solid var(--ius-stroke);padding-bottom:var(--ius-space-sm)}.ius-pageheader__bc{min-width:0;display:flex;align-items:center;gap:var(--ius-space-xs)}.ius-pageheader__bc .ius-pageheader__back{margin-top:0}.ius-pageheader__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ius-space-lg)}.ius-pageheader__lead{display:flex;align-items:flex-start;gap:var(--ius-space-sm);min-width:0}.ius-pageheader__back{flex:0 0 auto}.ius-pageheader__titles{min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-pageheader__overline{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-medium);line-height:var(--ius-lh-sm);letter-spacing:var(--ius-ls-emphasis);text-transform:uppercase;color:var(--ius-text-tertiary)}.ius-pageheader__title{margin:0}.ius-pageheader__subtitle{margin:0;font-family:var(--ius-font-body);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-secondary)}.ius-pageheader__actions{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-sm)}.ius-pageheader__toolbar{display:flex;align-items:center;gap:var(--ius-space-sm);flex-wrap:wrap}:host([data-density=compact]){--ius-control-size: small;gap:0}:host([data-density=compact]) .ius-pageheader__bc{line-height:var(--ius-lh-sm)}:host([data-density=compact]) .ius-pageheader__top{align-items:center;gap:var(--ius-space-sm)}:host([data-density=compact]) .ius-pageheader__lead{align-items:center;gap:var(--ius-space-xs)}:host([data-density=compact]) .ius-pageheader__titles{gap:0}:host([data-density=compact]) .ius-pageheader__overline{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm)}:host([data-density=compact]) .ius-pageheader__subtitle{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-tertiary)}:host([data-density=compact][data-surface=true]){padding:var(--ius-space-xs) var(--ius-space-md)}:host([data-density=compact][data-divider=true]){padding-bottom:var(--ius-space-xs)}\n"] }]
|
|
16611
16611
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], overline: [{ type: i0.Input, args: [{ isSignal: true, alias: "overline", required: false }] }], titleLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleLevel", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], showBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBack", required: false }] }], backLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backLabel", required: false }] }], backDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "backDisabled", required: false }] }], divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }], surface: [{ type: i0.Input, args: [{ isSignal: true, alias: "surface", required: false }] }], back: [{ type: i0.Output, args: ["back"] }], breadcrumbRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusPageHeaderBreadcrumbDirective), { isSignal: true }] }], actionsRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusPageHeaderActionsDirective), { isSignal: true }] }], toolbarRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusPageHeaderToolbarDirective), { isSignal: true }] }], overlineRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusPageHeaderOverlineDirective), { isSignal: true }] }], titleRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusPageHeaderTitleDirective), { isSignal: true }] }], subtitleRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusPageHeaderSubtitleDirective), { isSignal: true }] }] } });
|
|
16612
16612
|
|
|
16613
|
-
let uid$
|
|
16613
|
+
let uid$b = 0;
|
|
16614
16614
|
/** `min`/`max`/`step` llegan como número o como atributo de texto; vacío = sin valor.
|
|
16615
16615
|
* (Declaración de función: el compilador exige un transform analizable estáticamente.) */
|
|
16616
16616
|
function numeroOpcional(v) {
|
|
@@ -16681,7 +16681,7 @@ class NumberFieldComponent {
|
|
|
16681
16681
|
...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
|
|
16682
16682
|
this.focused = signal(false, /* @ts-ignore */
|
|
16683
16683
|
...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
|
|
16684
|
-
this.inputId = `ius-num-${uid$
|
|
16684
|
+
this.inputId = `ius-num-${uid$b++}`;
|
|
16685
16685
|
this.helpId = `${this.inputId}-help`;
|
|
16686
16686
|
this.atMax = computed(() => {
|
|
16687
16687
|
const max = this.maxState();
|
|
@@ -16911,7 +16911,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
16911
16911
|
type: Directive,
|
|
16912
16912
|
args: [{ selector: '[iusFormFooter]', standalone: true }]
|
|
16913
16913
|
}] });
|
|
16914
|
-
let uid$
|
|
16914
|
+
let uid$a = 0;
|
|
16915
16915
|
/**
|
|
16916
16916
|
* Form — Ius Design v2 (familia layout).
|
|
16917
16917
|
*
|
|
@@ -16986,7 +16986,7 @@ class FormComponent {
|
|
|
16986
16986
|
...(ngDevMode ? [{ debugName: "errores" }] : /* istanbul ignore next */ []));
|
|
16987
16987
|
this.hasErrors = computed(() => this.errores().length > 0, /* @ts-ignore */
|
|
16988
16988
|
...(ngDevMode ? [{ debugName: "hasErrors" }] : /* istanbul ignore next */ []));
|
|
16989
|
-
this.formId = `ius-form-${uid$
|
|
16989
|
+
this.formId = `ius-form-${uid$a++}`;
|
|
16990
16990
|
// ── Coordinación single-open de las secciones colapsables ──────────────
|
|
16991
16991
|
/** Sección colapsable abierta en modo `accordion` (`null` = todas cerradas). */
|
|
16992
16992
|
this.openSectionId = signal(null, /* @ts-ignore */
|
|
@@ -17026,7 +17026,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
17026
17026
|
args: [{ selector: 'ius-form', standalone: true, imports: [AlertComponent, ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form class=\"ius-form\" [id]=\"formId\" novalidate (submit)=\"onSubmit($event)\">\r\n @if (hasErrors()) {\r\n <ius-alert tone=\"danger\" role=\"alert\" [title]=\"errorTitle()\">\r\n <ul class=\"ius-form__summary-list\">\r\n @for (e of errores(); track e.field ?? $index) {\r\n <li>\r\n @if (e.field; as field) {\r\n <a [href]=\"'#' + field\" (click)=\"focusField(field, $event)\">{{ e.label || field }}</a>\r\n } @else {\r\n {{ e.label || '' }}\r\n }\r\n @if (e.message) {\r\n \u2014 {{ e.message }}\r\n }\r\n </li>\r\n }\r\n </ul>\r\n </ius-alert>\r\n }\r\n\r\n <div class=\"ius-form__grid\" [attr.data-cols]=\"columns()\">\r\n <ng-content />\r\n </div>\r\n\r\n @if (footer()) {\r\n <div class=\"ius-form__footer\" [attr.data-sticky]=\"stickyFooter() ? 'true' : null\">\r\n @if (hasFooterSlot()) {\r\n <ng-content select=\"[iusFormFooter]\" />\r\n } @else {\r\n @if (showCancel()) {\r\n <ius-button [variant]=\"cancelVariant()\" type=\"button\" [label]=\"cancelLabel()\" (clicked)=\"onCancel()\" />\r\n }\r\n <ius-button\r\n [variant]=\"submitVariant()\"\r\n type=\"submit\"\r\n [loading]=\"submitting()\"\r\n [disabled]=\"submitDisabled()\"\r\n [label]=\"submitLabel()\"\r\n />\r\n }\r\n </div>\r\n }\r\n</form>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-height:0}.ius-form{container-type:inline-size;display:flex;flex-direction:column;gap:var(--ius-space-lg);font-family:var(--ius-font-body);min-height:0;margin:0;flex:1 1 auto}.ius-form__grid{display:grid;gap:var(--ius-space-md) var(--ius-space-lg);grid-template-columns:1fr;align-content:start}.ius-form__grid[data-cols=\"1\"]{grid-template-columns:1fr}@container (min-width: 600px){.ius-form__grid[data-cols=\"2\"],.ius-form__grid[data-cols=auto]{grid-template-columns:1fr 1fr}}.ius-form__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--ius-space-sm)}.ius-form__footer[data-sticky=true]{position:sticky;bottom:0;background:var(--ius-surface-card);border-top:1px solid var(--ius-stroke);padding-top:var(--ius-space-md)}.ius-form__summary-list{list-style:disc;margin:var(--ius-space-xs) 0 0;padding-left:var(--ius-space-lg);display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-form__summary-list li{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm)}.ius-form__summary-list a{color:inherit;text-decoration:underline;cursor:pointer}\n"] }]
|
|
17027
17027
|
}], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], errorSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorSummary", required: false }] }], errorTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorTitle", required: false }] }], submitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], submitVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitVariant", required: false }] }], cancelVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelVariant", required: false }] }], submitting: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitting", required: false }] }], submitDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitDisabled", required: false }] }], footer: [{ type: i0.Input, args: [{ isSignal: true, alias: "footer", required: false }] }], showCancel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCancel", required: false }] }], stickyFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyFooter", required: false }] }], accordion: [{ type: i0.Input, args: [{ isSignal: true, alias: "accordion", required: false }] }], sectionVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionVariant", required: false }] }], submitted: [{ type: i0.Output, args: ["submitted"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusFormFooterDirective), { isSignal: true }] }] } });
|
|
17028
17028
|
|
|
17029
|
-
let uid$
|
|
17029
|
+
let uid$9 = 0;
|
|
17030
17030
|
/**
|
|
17031
17031
|
* FormSection — agrupa campos bajo un título (opcionalmente colapsable).
|
|
17032
17032
|
*
|
|
@@ -17060,7 +17060,7 @@ class FormSectionComponent {
|
|
|
17060
17060
|
...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
|
|
17061
17061
|
this.cuerpo = viewChild.required('cuerpo', /* @ts-ignore */
|
|
17062
17062
|
...(ngDevMode ? [{ debugName: "cuerpo" }] : /* istanbul ignore next */ []));
|
|
17063
|
-
this.sectionId = `ius-form-sec-${uid$
|
|
17063
|
+
this.sectionId = `ius-form-sec-${uid$9++}`;
|
|
17064
17064
|
this.colsEfectivas = computed(() => this.columns() ?? this.form?.columns() ?? 'auto', /* @ts-ignore */
|
|
17065
17065
|
...(ngDevMode ? [{ debugName: "colsEfectivas" }] : /* istanbul ignore next */ []));
|
|
17066
17066
|
this.variantEfectiva = computed(() => this.variant() ?? this.form?.sectionVariant() ?? 'contained', /* @ts-ignore */
|
|
@@ -17409,7 +17409,7 @@ function chartPrefersReducedMotion() {
|
|
|
17409
17409
|
window.matchMedia('(prefers-reduced-motion: reduce)').matches);
|
|
17410
17410
|
}
|
|
17411
17411
|
|
|
17412
|
-
let uid$
|
|
17412
|
+
let uid$8 = 0;
|
|
17413
17413
|
/**
|
|
17414
17414
|
* Sparkline — Ius Design v2 (familia charts).
|
|
17415
17415
|
*
|
|
@@ -17462,7 +17462,7 @@ class SparklineComponent {
|
|
|
17462
17462
|
this.ariaLabel = input(/* @ts-ignore */
|
|
17463
17463
|
...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
17464
17464
|
/** Id del degradado del área, único por instancia (igual que `gid` del golden). */
|
|
17465
|
-
this.gid = `iussp-${++uid$
|
|
17465
|
+
this.gid = `iussp-${++uid$8}`;
|
|
17466
17466
|
/** Solo valores numéricos finitos (el golden descarta null/NaN antes de dibujar). */
|
|
17467
17467
|
this.vals = computed(() => (this.data() ?? []).filter((v) => v != null && Number.isFinite(v)), /* @ts-ignore */
|
|
17468
17468
|
...(ngDevMode ? [{ debugName: "vals" }] : /* istanbul ignore next */ []));
|
|
@@ -17552,7 +17552,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
17552
17552
|
}, template: "<!-- Sin datos el golden deja el span vac\u00EDo con su caja (width/height van en el host). -->\r\n@if (hasData()) {\r\n <svg\r\n class=\"ius-spark__svg\"\r\n [attr.width]=\"width()\"\r\n [attr.height]=\"height()\"\r\n [attr.viewBox]=\"'0 0 ' + width() + ' ' + height()\"\r\n role=\"img\"\r\n [attr.aria-label]=\"ariaLabel() || null\"\r\n >\r\n @if (variant() === 'bar') {\r\n <g>\r\n @for (b of bars(); track $index) {\r\n <rect\r\n [attr.x]=\"b.x\"\r\n [attr.y]=\"b.y\"\r\n [attr.width]=\"b.w\"\r\n [attr.height]=\"b.h\"\r\n [attr.rx]=\"b.rx\"\r\n [attr.fill]=\"color()\"\r\n [attr.fill-opacity]=\"b.opacity\"\r\n />\r\n }\r\n </g>\r\n } @else {\r\n <g>\r\n @if (area()) {\r\n <defs>\r\n <linearGradient [attr.id]=\"gid\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\r\n <stop offset=\"0%\" [attr.stop-color]=\"color()\" stop-opacity=\"0.24\" />\r\n <stop offset=\"100%\" [attr.stop-color]=\"color()\" stop-opacity=\"0.02\" />\r\n </linearGradient>\r\n </defs>\r\n <path [attr.d]=\"dArea()\" [attr.fill]=\"'url(#' + gid + ')'\" />\r\n }\r\n <path class=\"ius-spark__line\" [attr.d]=\"dLine()\" [attr.stroke]=\"color()\" [attr.stroke-width]=\"strokeWidth()\" />\r\n @if (showDot()) {\r\n @if (last(); as p) {\r\n <circle class=\"ius-spark__dot\" [attr.cx]=\"p.x\" [attr.cy]=\"p.y\" [attr.r]=\"dotR()\" [attr.fill]=\"color()\" stroke-width=\"1\" />\r\n }\r\n }\r\n </g>\r\n }\r\n </svg>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;line-height:0;vertical-align:middle;-webkit-user-select:none;user-select:none}.ius-spark__svg{display:block;overflow:visible}.ius-spark__line{fill:none;stroke-linecap:round;stroke-linejoin:round}.ius-spark__dot{stroke:var(--ius-surface-card)}\n"] }]
|
|
17553
17553
|
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], trend: [{ type: i0.Input, args: [{ isSignal: true, alias: "trend", required: false }] }], area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }], curve: [{ type: i0.Input, args: [{ isSignal: true, alias: "curve", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], showDot: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDot", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
17554
17554
|
|
|
17555
|
-
let uid$
|
|
17555
|
+
let uid$7 = 0;
|
|
17556
17556
|
/** Duración del dibujado de la línea (WAAPI) y red de seguridad que la deja sólida. */
|
|
17557
17557
|
const ANIM_MS$2 = 820;
|
|
17558
17558
|
const ANIM_SAFETY_MS$2 = 950;
|
|
@@ -17669,7 +17669,7 @@ class LineChartComponent {
|
|
|
17669
17669
|
/** Categoría bajo el cursor (tooltip + guía). */
|
|
17670
17670
|
this.active = signal(null, /* @ts-ignore */
|
|
17671
17671
|
...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
|
|
17672
|
-
this.uidStr = `iuslc-${++uid$
|
|
17672
|
+
this.uidStr = `iuslc-${++uid$7}`;
|
|
17673
17673
|
this.hasData = computed(() => {
|
|
17674
17674
|
const cats = this.categories();
|
|
17675
17675
|
const series = this.series();
|
|
@@ -18437,7 +18437,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
18437
18437
|
type: Output
|
|
18438
18438
|
}], labelRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusEntityRowLabelDirective), { isSignal: true }] }], sublabelRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusEntityRowSublabelDirective), { isSignal: true }] }] } });
|
|
18439
18439
|
|
|
18440
|
-
let uid$
|
|
18440
|
+
let uid$6 = 0;
|
|
18441
18441
|
/**
|
|
18442
18442
|
* Switch — Ius Design v2 (familia inputs).
|
|
18443
18443
|
*
|
|
@@ -18490,7 +18490,7 @@ class SwitchComponent {
|
|
|
18490
18490
|
...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
|
|
18491
18491
|
/** Nuevo booleano (original `onChange(checked)`; nunca `change`). */
|
|
18492
18492
|
this.checkedChange = new EventEmitter();
|
|
18493
|
-
this.inputId = `ius-sw-${uid$
|
|
18493
|
+
this.inputId = `ius-sw-${uid$6++}`;
|
|
18494
18494
|
this.onChangeCb = () => { };
|
|
18495
18495
|
this.onTouchedCb = () => { };
|
|
18496
18496
|
}
|
|
@@ -18552,7 +18552,7 @@ class SwitchComponent {
|
|
|
18552
18552
|
useExisting: forwardRef(() => SwitchComponent),
|
|
18553
18553
|
multi: true,
|
|
18554
18554
|
},
|
|
18555
|
-
], ngImport: i0, template: "<label class=\"ius-sw__inner\" [attr.data-label-position]=\"labelPosition\">\
|
|
18555
|
+
], ngImport: i0, template: "<label class=\"ius-sw__inner\" [attr.data-label-position]=\"labelPosition\">\n <!-- Input primero + pista inmediatamente despu\u00E9s: el halo de foco usa el\n selector adyacente `.ius-sw__input:focus-visible + .ius-sw__track`, as\u00ED\n que el orden DOM se fija aqu\u00ED y la posici\u00F3n visual del label la resuelve\n `order` en el SCSS (labelPosition left/right). -->\n <input\n [id]=\"inputId\"\n class=\"ius-sw__input\"\n type=\"checkbox\"\n role=\"switch\"\n [name]=\"name\"\n [attr.value]=\"value\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [attr.aria-checked]=\"ariaChecked\"\n [attr.aria-label]=\"ariaLabel ?? null\"\n (change)=\"onToggle()\"\n (blur)=\"onBlur()\"\n />\n\n <span class=\"ius-sw__track\" aria-hidden=\"true\">\n <span class=\"ius-sw__knob\"></span>\n </span>\n\n @if (label != null) {\n <span class=\"ius-sw__label\">\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-sw__help\"\n tabindex=\"0\"\n aria-label=\"Ayuda\"\n (click)=\"$event.preventDefault()\"\n >\n <span translate=\"no\" class=\"ius-icon\">help</span>\n </span>\n </ius-popover>\n }\n </span>\n }\n</label>\n", styles: ["@charset \"UTF-8\";:host{--_sw-w: 44px;--_sw-h: 24px;--_sw-knob: 18px;--_sw-fs: var(--ius-fs-base);display:inline-block;vertical-align:middle}:host([data-size=small]){--_sw-w: 36px;--_sw-h: 20px;--_sw-knob: 14px;--_sw-fs: var(--ius-fs-base)}:host([data-size=large]){--_sw-w: 52px;--_sw-h: 28px;--_sw-knob: 22px;--_sw-fs: var(--ius-fs-lg)}@container style(--ius-control-size: small){:host(:not([data-size])){--_sw-w: 36px;--_sw-h: 20px;--_sw-knob: 14px;--_sw-fs: var(--ius-fs-base)}}@container style(--ius-control-size: large){:host(:not([data-size])){--_sw-w: 52px;--_sw-h: 28px;--_sw-knob: 22px;--_sw-fs: var(--ius-fs-lg)}}.ius-sw__inner{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-body);font-size:var(--_sw-fs);color:var(--ius-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ius-sw__inner[data-label-position=left] .ius-sw__label{order:-1}:host([data-disabled=true]) .ius-sw__inner{cursor:not-allowed;color:var(--ius-text-disabled)}.ius-sw__input{position:absolute;opacity:0;width:0;height:0;margin:0}.ius-sw__track{position:relative;flex:0 0 auto;width:var(--_sw-w);height:var(--_sw-h);border-radius:var(--ius-radius-pill);background:var(--ius-neutral-4);transition:background-color var(--ius-duration-base) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}.ius-sw__knob{position:absolute;top:50%;left:calc((var(--_sw-h) - var(--_sw-knob)) / 2);transform:translateY(-50%);width:var(--_sw-knob);height:var(--_sw-knob);border-radius:var(--ius-radius-pill);background:var(--ius-neutral-white);box-shadow:var(--ius-elevation-100);transition:left var(--ius-duration-base) var(--ius-ease-standard)}:host(:hover) .ius-sw__track,:host([data-force=hover]) .ius-sw__track{background:var(--ius-neutral-5)}:host(:active) .ius-sw__track,:host([data-force=pressed]) .ius-sw__track{background:var(--ius-neutral-6)}:host([data-checked=true]) .ius-sw__track{background:var(--ius-primary-900)}:host([data-checked=true]) .ius-sw__knob{left:calc(var(--_sw-w) - var(--_sw-knob) - (var(--_sw-h) - var(--_sw-knob)) / 2)}:host([data-checked=true]:hover) .ius-sw__track,:host([data-checked=true][data-force=hover]) .ius-sw__track{background:var(--ius-primary-800)}:host([data-checked=true]:active) .ius-sw__track,:host([data-checked=true][data-force=pressed]) .ius-sw__track{background:var(--ius-info-700)}:host([data-force=focused]) .ius-sw__track,.ius-sw__input:focus-visible+.ius-sw__track{box-shadow:var(--ius-focus-ring)}:host([data-disabled=true]) .ius-sw__track{background:var(--ius-neutral-3)}:host([data-disabled=true][data-checked=true]) .ius-sw__track{background:var(--ius-info-200)}:host([data-disabled=true]) .ius-sw__knob{box-shadow:none;background:var(--ius-neutral-1)}.ius-sw__label{display:inline-flex;align-items:center;gap:var(--ius-space-xs)}.ius-sw__help{display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-7);cursor:help}.ius-sw__help .ius-icon{font-size:calc(var(--_sw-fs) + 4px);line-height:1}:host([data-disabled=true]) .ius-sw__help{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 }); }
|
|
18556
18556
|
}
|
|
18557
18557
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SwitchComponent, decorators: [{
|
|
18558
18558
|
type: Component,
|
|
@@ -18567,7 +18567,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
18567
18567
|
'[attr.data-size]': "size !== 'medium' ? size : null",
|
|
18568
18568
|
'[attr.data-checked]': "checked ? 'true' : null",
|
|
18569
18569
|
'[attr.data-disabled]': "disabled ? 'true' : null",
|
|
18570
|
-
}, template: "<label class=\"ius-sw__inner\" [attr.data-label-position]=\"labelPosition\">\
|
|
18570
|
+
}, template: "<label class=\"ius-sw__inner\" [attr.data-label-position]=\"labelPosition\">\n <!-- Input primero + pista inmediatamente despu\u00E9s: el halo de foco usa el\n selector adyacente `.ius-sw__input:focus-visible + .ius-sw__track`, as\u00ED\n que el orden DOM se fija aqu\u00ED y la posici\u00F3n visual del label la resuelve\n `order` en el SCSS (labelPosition left/right). -->\n <input\n [id]=\"inputId\"\n class=\"ius-sw__input\"\n type=\"checkbox\"\n role=\"switch\"\n [name]=\"name\"\n [attr.value]=\"value\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [attr.aria-checked]=\"ariaChecked\"\n [attr.aria-label]=\"ariaLabel ?? null\"\n (change)=\"onToggle()\"\n (blur)=\"onBlur()\"\n />\n\n <span class=\"ius-sw__track\" aria-hidden=\"true\">\n <span class=\"ius-sw__knob\"></span>\n </span>\n\n @if (label != null) {\n <span class=\"ius-sw__label\">\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-sw__help\"\n tabindex=\"0\"\n aria-label=\"Ayuda\"\n (click)=\"$event.preventDefault()\"\n >\n <span translate=\"no\" class=\"ius-icon\">help</span>\n </span>\n </ius-popover>\n }\n </span>\n }\n</label>\n", styles: ["@charset \"UTF-8\";:host{--_sw-w: 44px;--_sw-h: 24px;--_sw-knob: 18px;--_sw-fs: var(--ius-fs-base);display:inline-block;vertical-align:middle}:host([data-size=small]){--_sw-w: 36px;--_sw-h: 20px;--_sw-knob: 14px;--_sw-fs: var(--ius-fs-base)}:host([data-size=large]){--_sw-w: 52px;--_sw-h: 28px;--_sw-knob: 22px;--_sw-fs: var(--ius-fs-lg)}@container style(--ius-control-size: small){:host(:not([data-size])){--_sw-w: 36px;--_sw-h: 20px;--_sw-knob: 14px;--_sw-fs: var(--ius-fs-base)}}@container style(--ius-control-size: large){:host(:not([data-size])){--_sw-w: 52px;--_sw-h: 28px;--_sw-knob: 22px;--_sw-fs: var(--ius-fs-lg)}}.ius-sw__inner{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-body);font-size:var(--_sw-fs);color:var(--ius-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ius-sw__inner[data-label-position=left] .ius-sw__label{order:-1}:host([data-disabled=true]) .ius-sw__inner{cursor:not-allowed;color:var(--ius-text-disabled)}.ius-sw__input{position:absolute;opacity:0;width:0;height:0;margin:0}.ius-sw__track{position:relative;flex:0 0 auto;width:var(--_sw-w);height:var(--_sw-h);border-radius:var(--ius-radius-pill);background:var(--ius-neutral-4);transition:background-color var(--ius-duration-base) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}.ius-sw__knob{position:absolute;top:50%;left:calc((var(--_sw-h) - var(--_sw-knob)) / 2);transform:translateY(-50%);width:var(--_sw-knob);height:var(--_sw-knob);border-radius:var(--ius-radius-pill);background:var(--ius-neutral-white);box-shadow:var(--ius-elevation-100);transition:left var(--ius-duration-base) var(--ius-ease-standard)}:host(:hover) .ius-sw__track,:host([data-force=hover]) .ius-sw__track{background:var(--ius-neutral-5)}:host(:active) .ius-sw__track,:host([data-force=pressed]) .ius-sw__track{background:var(--ius-neutral-6)}:host([data-checked=true]) .ius-sw__track{background:var(--ius-primary-900)}:host([data-checked=true]) .ius-sw__knob{left:calc(var(--_sw-w) - var(--_sw-knob) - (var(--_sw-h) - var(--_sw-knob)) / 2)}:host([data-checked=true]:hover) .ius-sw__track,:host([data-checked=true][data-force=hover]) .ius-sw__track{background:var(--ius-primary-800)}:host([data-checked=true]:active) .ius-sw__track,:host([data-checked=true][data-force=pressed]) .ius-sw__track{background:var(--ius-info-700)}:host([data-force=focused]) .ius-sw__track,.ius-sw__input:focus-visible+.ius-sw__track{box-shadow:var(--ius-focus-ring)}:host([data-disabled=true]) .ius-sw__track{background:var(--ius-neutral-3)}:host([data-disabled=true][data-checked=true]) .ius-sw__track{background:var(--ius-info-200)}:host([data-disabled=true]) .ius-sw__knob{box-shadow:none;background:var(--ius-neutral-1)}.ius-sw__label{display:inline-flex;align-items:center;gap:var(--ius-space-xs)}.ius-sw__help{display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-7);cursor:help}.ius-sw__help .ius-icon{font-size:calc(var(--_sw-fs) + 4px);line-height:1}:host([data-disabled=true]) .ius-sw__help{color:var(--ius-text-disabled)}\n"] }]
|
|
18571
18571
|
}], propDecorators: { label: [{
|
|
18572
18572
|
type: Input
|
|
18573
18573
|
}], labelPosition: [{
|
|
@@ -18600,7 +18600,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
18600
18600
|
type: Output
|
|
18601
18601
|
}] } });
|
|
18602
18602
|
|
|
18603
|
-
let uid$
|
|
18603
|
+
let uid$5 = 0;
|
|
18604
18604
|
/**
|
|
18605
18605
|
* Radio — Ius Design v2 (familia inputs).
|
|
18606
18606
|
*
|
|
@@ -18633,7 +18633,7 @@ class RadioComponent {
|
|
|
18633
18633
|
...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
|
|
18634
18634
|
/** Emite `true` al seleccionar (original `onChange(true)`; nunca `change`). */
|
|
18635
18635
|
this.checkedChange = new EventEmitter();
|
|
18636
|
-
this.inputId = `ius-rad-${uid$
|
|
18636
|
+
this.inputId = `ius-rad-${uid$5++}`;
|
|
18637
18637
|
this.onChangeCb = () => { };
|
|
18638
18638
|
this.onTouchedCb = () => { };
|
|
18639
18639
|
}
|
|
@@ -18730,7 +18730,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
18730
18730
|
type: Output
|
|
18731
18731
|
}] } });
|
|
18732
18732
|
|
|
18733
|
-
let uid$
|
|
18733
|
+
let uid$4 = 0;
|
|
18734
18734
|
/**
|
|
18735
18735
|
* SelectionField — Ius Design v2 (familia inputs).
|
|
18736
18736
|
*
|
|
@@ -18780,7 +18780,7 @@ class SelectionFieldComponent {
|
|
|
18780
18780
|
...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
|
|
18781
18781
|
/** Nuevo valor con el shape de `type` (original `onChange`). */
|
|
18782
18782
|
this.valueChange = new EventEmitter();
|
|
18783
|
-
this.baseId = `ius-self-${uid$
|
|
18783
|
+
this.baseId = `ius-self-${uid$4++}`;
|
|
18784
18784
|
this.labelId = `${this.baseId}-label`;
|
|
18785
18785
|
this.hintId = `${this.baseId}-hint`;
|
|
18786
18786
|
this.onChange = () => { };
|
|
@@ -20446,10 +20446,10 @@ function fuenteOptions(all = true) {
|
|
|
20446
20446
|
return all ? [{ value: 'all', label: 'Todas', icon: 'filter_list' }, ...opts] : opts;
|
|
20447
20447
|
}
|
|
20448
20448
|
|
|
20449
|
-
let uid$
|
|
20449
|
+
let uid$3 = 0;
|
|
20450
20450
|
function nuevoId() {
|
|
20451
|
-
uid$
|
|
20452
|
-
return `rf-${Date.now().toString(36)}-${uid$
|
|
20451
|
+
uid$3 += 1;
|
|
20452
|
+
return `rf-${Date.now().toString(36)}-${uid$3}`;
|
|
20453
20453
|
}
|
|
20454
20454
|
// Regex del golden, verbatim (la ng-spec §5 pide que vivan en la spec).
|
|
20455
20455
|
const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
@@ -20541,7 +20541,7 @@ class RepeatableFieldComponent {
|
|
|
20541
20541
|
...(ngDevMode ? [{ debugName: "helpTextState" }] : /* istanbul ignore next */ []));
|
|
20542
20542
|
/** Además del CVA: el arreglo completo en cada cambio (add/remove/edit/tipo). */
|
|
20543
20543
|
this.valueChange = new EventEmitter();
|
|
20544
|
-
this.labelId = `ius-rf-${++uid$
|
|
20544
|
+
this.labelId = `ius-rf-${++uid$3}-label`;
|
|
20545
20545
|
/** Referencia estable: un objeto literal en el template cambiaría cada CD. */
|
|
20546
20546
|
this.ngModelSuelto = { standalone: true };
|
|
20547
20547
|
this.onChangeFn = () => { };
|
|
@@ -20787,7 +20787,7 @@ class RepeatableFieldComponent {
|
|
|
20787
20787
|
useExisting: forwardRef(() => RepeatableFieldComponent),
|
|
20788
20788
|
multi: true,
|
|
20789
20789
|
},
|
|
20790
|
-
], ngImport: i0, template: "@if (label) {\
|
|
20790
|
+
], ngImport: i0, template: "@if (label) {\n <span class=\"ius-repeat__label\" [id]=\"labelId\">\n @if (required) {\n <span class=\"ius-repeat__req\" aria-hidden=\"true\"></span>\n }\n {{ label }}\n </span>\n}\n\n<div class=\"ius-repeat__rows\" role=\"group\" [attr.aria-labelledby]=\"label ? labelId : null\">\n @for (vm of filasVM(); track vm.fila.id) {\n <div class=\"ius-repeat__row\">\n @if (conTipos()) {\n <div class=\"ius-repeat__type\" [style.width]=\"anchoTipo\">\n <ius-select\n [options]=\"opcionesTipo()\"\n [value]=\"vm.fila.type ?? null\"\n [placeholder]=\"typePlaceholder\"\n [searchable]=\"false\"\n [showClear]=\"false\"\n [showHelpText]=\"false\"\n [disabled]=\"disabled\"\n [size]=\"size\"\n (valueChange)=\"setTipo(vm.fila.id, $event)\"\n />\n </div>\n }\n\n <div class=\"ius-repeat__control\">\n @if (renderControl) {\n <ng-container [ngTemplateOutlet]=\"renderControl\" [ngTemplateOutletContext]=\"vm.ctx\" />\n } @else {\n <!--\n `[ngModel]` de una v\u00EDa: TextField expone su valor solo por CVA (mismo\n recurso que ius-query-builder). `standalone` evita que un <form> del\n consumidor intente registrar estos inputs como controles con nombre.\n -->\n <ius-text-field\n [ngModel]=\"vm.texto\"\n [ngModelOptions]=\"ngModelSuelto\"\n [placeholder]=\"placeholder\"\n [prefixIcon]=\"prefixIcon\"\n [type]=\"tipoInput()\"\n [disabled]=\"disabled\"\n [size]=\"size\"\n [error]=\"vm.error\"\n [errorText]=\"vm.errorText\"\n [showHelpText]=\"!!vm.errorText\"\n [showClear]=\"false\"\n (ngModelChange)=\"setValor(vm.fila.id, $event)\"\n />\n }\n </div>\n\n <div class=\"ius-repeat__remove\">\n <ius-icon-button\n icon=\"close\"\n variant=\"tertiary\"\n shape=\"squared\"\n size=\"small\"\n tooltip=\"Quitar\"\n ariaLabel=\"Quitar fila\"\n [disabled]=\"vm.quitarDeshabilitado\"\n (clicked)=\"quitar(vm.fila.id)\"\n />\n </div>\n </div>\n }\n</div>\n\n<div class=\"ius-repeat__foot\">\n <ius-text-button\n [prefixIcon]=\"addIcon\"\n [label]=\"addLabel\"\n [size]=\"size\"\n [disabled]=\"disabled || alTope()\"\n (clicked)=\"agregar()\"\n />\n</div>\n\n@if (pie()) {\n <span class=\"ius-repeat__hint\">{{ pie() }}</span>\n}\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", "ariaLabel", "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", "ariaExpanded", "ariaControls", "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 }); }
|
|
20791
20791
|
}
|
|
20792
20792
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: RepeatableFieldComponent, decorators: [{
|
|
20793
20793
|
type: Component,
|
|
@@ -20808,7 +20808,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
20808
20808
|
class: 'ius-repeat',
|
|
20809
20809
|
'[attr.data-size]': "size !== 'medium' ? size : null",
|
|
20810
20810
|
'[attr.data-error]': "error ? 'true' : null",
|
|
20811
|
-
}, template: "@if (label) {\
|
|
20811
|
+
}, template: "@if (label) {\n <span class=\"ius-repeat__label\" [id]=\"labelId\">\n @if (required) {\n <span class=\"ius-repeat__req\" aria-hidden=\"true\"></span>\n }\n {{ label }}\n </span>\n}\n\n<div class=\"ius-repeat__rows\" role=\"group\" [attr.aria-labelledby]=\"label ? labelId : null\">\n @for (vm of filasVM(); track vm.fila.id) {\n <div class=\"ius-repeat__row\">\n @if (conTipos()) {\n <div class=\"ius-repeat__type\" [style.width]=\"anchoTipo\">\n <ius-select\n [options]=\"opcionesTipo()\"\n [value]=\"vm.fila.type ?? null\"\n [placeholder]=\"typePlaceholder\"\n [searchable]=\"false\"\n [showClear]=\"false\"\n [showHelpText]=\"false\"\n [disabled]=\"disabled\"\n [size]=\"size\"\n (valueChange)=\"setTipo(vm.fila.id, $event)\"\n />\n </div>\n }\n\n <div class=\"ius-repeat__control\">\n @if (renderControl) {\n <ng-container [ngTemplateOutlet]=\"renderControl\" [ngTemplateOutletContext]=\"vm.ctx\" />\n } @else {\n <!--\n `[ngModel]` de una v\u00EDa: TextField expone su valor solo por CVA (mismo\n recurso que ius-query-builder). `standalone` evita que un <form> del\n consumidor intente registrar estos inputs como controles con nombre.\n -->\n <ius-text-field\n [ngModel]=\"vm.texto\"\n [ngModelOptions]=\"ngModelSuelto\"\n [placeholder]=\"placeholder\"\n [prefixIcon]=\"prefixIcon\"\n [type]=\"tipoInput()\"\n [disabled]=\"disabled\"\n [size]=\"size\"\n [error]=\"vm.error\"\n [errorText]=\"vm.errorText\"\n [showHelpText]=\"!!vm.errorText\"\n [showClear]=\"false\"\n (ngModelChange)=\"setValor(vm.fila.id, $event)\"\n />\n }\n </div>\n\n <div class=\"ius-repeat__remove\">\n <ius-icon-button\n icon=\"close\"\n variant=\"tertiary\"\n shape=\"squared\"\n size=\"small\"\n tooltip=\"Quitar\"\n ariaLabel=\"Quitar fila\"\n [disabled]=\"vm.quitarDeshabilitado\"\n (clicked)=\"quitar(vm.fila.id)\"\n />\n </div>\n </div>\n }\n</div>\n\n<div class=\"ius-repeat__foot\">\n <ius-text-button\n [prefixIcon]=\"addIcon\"\n [label]=\"addLabel\"\n [size]=\"size\"\n [disabled]=\"disabled || alTope()\"\n (clicked)=\"agregar()\"\n />\n</div>\n\n@if (pie()) {\n <span class=\"ius-repeat__hint\">{{ pie() }}</span>\n}\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"] }]
|
|
20812
20812
|
}], propDecorators: { items: [{
|
|
20813
20813
|
type: Input
|
|
20814
20814
|
}], defaultItems: [{
|
|
@@ -20856,7 +20856,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
20856
20856
|
type: Output
|
|
20857
20857
|
}] } });
|
|
20858
20858
|
|
|
20859
|
-
let uid$
|
|
20859
|
+
let uid$2 = 0;
|
|
20860
20860
|
/** Duración del crecimiento (WAAPI), stagger por categoría y red de seguridad. */
|
|
20861
20861
|
const ANIM_MS$1 = 560;
|
|
20862
20862
|
const ANIM_STAGGER_MS = 45;
|
|
@@ -20986,7 +20986,7 @@ class BarChartComponent {
|
|
|
20986
20986
|
/** Categoría bajo el cursor (tooltip + resalte). */
|
|
20987
20987
|
this.active = signal(null, /* @ts-ignore */
|
|
20988
20988
|
...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
|
|
20989
|
-
this.uidStr = `iusbc-${++uid$
|
|
20989
|
+
this.uidStr = `iusbc-${++uid$2}`;
|
|
20990
20990
|
this.hasData = computed(() => {
|
|
20991
20991
|
const cats = this.categories();
|
|
20992
20992
|
const series = this.series();
|
|
@@ -25132,7 +25132,7 @@ function formatBytes(b) {
|
|
|
25132
25132
|
return `${mb.toFixed(mb < 10 ? 1 : 0)} MB`;
|
|
25133
25133
|
return `${(mb / 1024).toFixed(2)} GB`;
|
|
25134
25134
|
}
|
|
25135
|
-
function uid() {
|
|
25135
|
+
function uid$1() {
|
|
25136
25136
|
return 'f-' + Math.random().toString(36).slice(2, 9);
|
|
25137
25137
|
}
|
|
25138
25138
|
/** Valida un archivo contra accept/maxSize (mismas reglas que el golden). */
|
|
@@ -25308,7 +25308,7 @@ class FileUploadComponent {
|
|
|
25308
25308
|
const newItems = incoming.slice(0, remaining).map((f) => {
|
|
25309
25309
|
const err = validateFile(f, this.accept, this.maxSize);
|
|
25310
25310
|
return {
|
|
25311
|
-
id: uid(),
|
|
25311
|
+
id: uid$1(),
|
|
25312
25312
|
name: f.name,
|
|
25313
25313
|
size: f.size,
|
|
25314
25314
|
type: f.type,
|
|
@@ -27319,7 +27319,7 @@ class ScheduleListComponent {
|
|
|
27319
27319
|
this.showMore.emit({ date, hidden, event });
|
|
27320
27320
|
}
|
|
27321
27321
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ScheduleListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
27322
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ScheduleListComponent, isStandalone: true, selector: "ius-schedule-list", inputs: { events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, today: { classPropertyName: "today", publicName: "today", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, from: { classPropertyName: "from", publicName: "from", isSignal: true, isRequired: false, transformFunction: null }, to: { classPropertyName: "to", publicName: "to", isSignal: true, isRequired: false, transformFunction: null }, showEmptyDays: { classPropertyName: "showEmptyDays", publicName: "showEmptyDays", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, sortByTime: { classPropertyName: "sortByTime", publicName: "sortByTime", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, relativeLabels: { classPropertyName: "relativeLabels", publicName: "relativeLabels", isSignal: true, isRequired: false, transformFunction: null }, formatDayLabel: { classPropertyName: "formatDayLabel", publicName: "formatDayLabel", isSignal: true, isRequired: false, transformFunction: null }, showCount: { classPropertyName: "showCount", publicName: "showCount", isSignal: true, isRequired: false, transformFunction: null }, showRail: { classPropertyName: "showRail", publicName: "showRail", isSignal: true, isRequired: false, transformFunction: null }, stickyHeaders: { classPropertyName: "stickyHeaders", publicName: "stickyHeaders", isSignal: true, isRequired: false, transformFunction: null }, dividers: { classPropertyName: "dividers", publicName: "dividers", isSignal: true, isRequired: false, transformFunction: null }, maxVisible: { classPropertyName: "maxVisible", publicName: "maxVisible", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, pillVariant: { classPropertyName: "pillVariant", publicName: "pillVariant", isSignal: true, isRequired: false, transformFunction: null }, pillFill: { classPropertyName: "pillFill", publicName: "pillFill", isSignal: true, isRequired: false, transformFunction: null }, pillSize: { classPropertyName: "pillSize", publicName: "pillSize", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, showDot: { classPropertyName: "showDot", publicName: "showDot", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, emptySubtitle: { classPropertyName: "emptySubtitle", publicName: "emptySubtitle", isSignal: true, isRequired: false, transformFunction: null }, emptyIcon: { classPropertyName: "emptyIcon", publicName: "emptyIcon", isSignal: true, isRequired: false, transformFunction: null }, emptyDayLabel: { classPropertyName: "emptyDayLabel", publicName: "emptyDayLabel", isSignal: true, isRequired: false, transformFunction: null }, moreLabel: { classPropertyName: "moreLabel", publicName: "moreLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectDay: "selectDay", selectEvent: "selectEvent", showMore: "showMore" }, host: { properties: { "attr.data-size": "size()", "attr.data-sticky": "vacio() ? null : (stickyHeaders() ? 'true' : 'false')", "attr.data-rail": "vacio() ? null : (showRail() ? 'true' : 'false')", "attr.data-scroll": "vacio() ? null : (maxHeight() != null ? 'true' : 'false')", "style.max-height": "maxHeightCss()" }, classAttribute: "ius-agenda ius-scroll" }, ngImport: i0, template: "<ng-template #pill let-p>\r\n @if (eventsClickable) {\r\n <ius-event-pill\r\n [variant]=\"pillVariant()\"\r\n [title]=\"p.ev.title\"\r\n [time]=\"p.time ?? undefined\"\r\n [category]=\"p.ev.category\"\r\n [hue]=\"p.ev.hue\"\r\n [kind]=\"p.ev.kind\"\r\n [icon]=\"p.ev.icon\"\r\n [location]=\"p.ev.location\"\r\n [meta]=\"p.meta\"\r\n [assignee]=\"p.ev.assignee\"\r\n [fill]=\"p.fill\"\r\n [size]=\"p.size\"\r\n [showIcon]=\"p.showIcon\"\r\n [showDot]=\"p.showDot\"\r\n [selected]=\"!!p.ev.selected\"\r\n [past]=\"p.past\"\r\n [ariaLabel]=\"p.ev.ariaLabel\"\r\n (clicked)=\"onPillClick(p.ev, $event)\"\r\n />\r\n } @else {\r\n <ius-event-pill\r\n [variant]=\"pillVariant()\"\r\n [title]=\"p.ev.title\"\r\n [time]=\"p.time ?? undefined\"\r\n [category]=\"p.ev.category\"\r\n [hue]=\"p.ev.hue\"\r\n [kind]=\"p.ev.kind\"\r\n [icon]=\"p.ev.icon\"\r\n [location]=\"p.ev.location\"\r\n [meta]=\"p.meta\"\r\n [assignee]=\"p.ev.assignee\"\r\n [fill]=\"p.fill\"\r\n [size]=\"p.size\"\r\n [showIcon]=\"p.showIcon\"\r\n [showDot]=\"p.showDot\"\r\n [selected]=\"!!p.ev.selected\"\r\n [past]=\"p.past\"\r\n [ariaLabel]=\"p.ev.ariaLabel\"\r\n />\r\n }\r\n</ng-template>\r\n\r\n@if (vacio()) {\r\n <div class=\"ius-agenda__void\">\r\n @if (emptyIcon()) {\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ emptyIcon() }}</span>\r\n }\r\n @if (emptyTitle()) {\r\n <div class=\"ius-agenda__void-title\">{{ emptyTitle() }}</div>\r\n }\r\n @if (emptySubtitle()) {\r\n <div class=\"ius-agenda__void-sub\">{{ emptySubtitle() }}</div>\r\n }\r\n </div>\r\n} @else {\r\n @for (g of grupos(); track g.key) {\r\n <div\r\n class=\"ius-agenda__group\"\r\n [attr.data-today]=\"g.today ? 'true' : 'false'\"\r\n [attr.data-past]=\"g.past ? 'true' : 'false'\"\r\n [attr.data-selected]=\"g.selected ? 'true' : 'false'\"\r\n >\r\n <div\r\n class=\"ius-agenda__head\"\r\n [attr.data-clickable]=\"headClickable ? 'true' : 'false'\"\r\n [attr.role]=\"headClickable ? 'button' : null\"\r\n [attr.tabindex]=\"headClickable ? 0 : null\"\r\n [attr.aria-current]=\"g.selected ? 'date' : null\"\r\n (click)=\"onHeadClick(g.date, $event)\"\r\n (keydown)=\"onHeadKeydown(g.date, $event)\"\r\n >\r\n <span class=\"ius-agenda__num\">{{ g.num }}</span>\r\n <span class=\"ius-agenda__when\">\r\n <span class=\"ius-agenda__dow\">{{ g.dow }}</span>\r\n <span class=\"ius-agenda__month\">{{ g.label }}</span>\r\n </span>\r\n @if (showCount()) {\r\n <span class=\"ius-agenda__count\">{{ conteo(g.total) }}</span>\r\n }\r\n </div>\r\n\r\n @if (g.total === 0) {\r\n <div class=\"ius-agenda__empty\">{{ emptyDayLabel() }}</div>\r\n } @else {\r\n <div class=\"ius-agenda__events\">\r\n @for (p of g.pills; track p.key; let first = $first) {\r\n @if (showDividers() && !first) {\r\n <div class=\"ius-agenda__divider\" aria-hidden=\"true\"></div>\r\n }\r\n <ng-container *ngTemplateOutlet=\"pill; context: { $implicit: p }\" />\r\n }\r\n @if (g.hidden.length > 0) {\r\n @if (showDividers()) {\r\n <div class=\"ius-agenda__divider\" aria-hidden=\"true\"></div>\r\n }\r\n <div class=\"ius-agenda__more\">\r\n <ius-text-button size=\"small\" (clicked)=\"onMoreClick(g.date, g.hidden, $event)\">\r\n {{ moreLabel() || '+' + g.hidden.length + ' m\u00E1s' }}\r\n </ius-text-button>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;box-sizing:border-box;width:100%;font-family:var(--ius-font-body);color:var(--ius-text-primary);--_ag-rail: 116px}:host([data-size=small]){--_ag-rail: 100px;--_ag-num: 22px;--_ag-gap: var(--ius-space-xs);--_ag-pad: 12px}:host([data-size=medium]){--_ag-rail: 116px;--_ag-num: 26px;--_ag-gap: var(--ius-space-xs);--_ag-pad: 16px}:host([data-size=large]){--_ag-rail: 132px;--_ag-num: 32px;--_ag-gap: var(--ius-space-xs);--_ag-pad: 20px}:host([data-scroll=true]){overflow:auto;border-top:1px solid var(--ius-stroke);border-bottom:1px solid var(--ius-stroke);padding-bottom:var(--_ag-gap)}.ius-agenda__group{position:relative}.ius-agenda__group+.ius-agenda__group{margin-top:var(--_ag-gap)}.ius-agenda__head{-webkit-user-select:none;user-select:none;display:flex;align-items:baseline;gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--_ag-pad);border-bottom:1px solid var(--ius-stroke);background:var(--ius-surface-card, var(--ius-neutral-white))}:host([data-sticky=true]) .ius-agenda__head{position:sticky;top:0;z-index:2}.ius-agenda__head[data-clickable=true]{cursor:pointer;border-radius:var(--ius-radius-sm);transition:background var(--ius-dur-fast, .12s) var(--ius-ease, ease)}.ius-agenda__head[data-clickable=true]:hover{background:var(--ius-neutral-2)}.ius-agenda__head[data-clickable=true]:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-agenda__num{font-family:var(--ius-font-display);font-weight:700;font-size:var(--_ag-num, 26px);line-height:1;font-variant-numeric:tabular-nums;color:var(--ius-text-primary);min-width:1.4ch;text-align:right}.ius-agenda__group[data-today=true] .ius-agenda__num{color:var(--ius-primary-900)}.ius-agenda__group[data-past=true] .ius-agenda__num{color:var(--ius-text-tertiary)}.ius-agenda__when{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}.ius-agenda__dow{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);display:flex;align-items:center;gap:var(--ius-space-xs)}.ius-agenda__rel{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1;color:var(--ius-primary-900);background:var(--ius-info-100, var(--ius-neutral-2));border-radius:var(--ius-radius-pill);padding:var(--ius-space-xxs) var(--ius-space-xs)}.ius-agenda__group[data-past=true] .ius-agenda__rel{color:var(--ius-text-tertiary);background:var(--ius-neutral-2)}.ius-agenda__month{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-base);color:var(--ius-text-secondary);font-variant-numeric:tabular-nums}.ius-agenda__count{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);line-height:1;color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums;white-space:nowrap;align-self:center}.ius-agenda__events{display:flex;flex-direction:column;gap:var(--_ag-gap, var(--ius-space-xs));padding:var(--_ag-pad) var(--_ag-pad) calc(var(--_ag-pad) + var(--ius-space-xxs)) var(--_ag-rail)}:host([data-rail=false]) .ius-agenda__events{padding-left:var(--_ag-pad)}.ius-agenda__group[data-past=true] .ius-agenda__events{opacity:.62}.ius-agenda__more{padding-top:var(--ius-space-xxs)}.ius-agenda__divider{height:1px;background:var(--ius-stroke);margin:calc(var(--ius-space-xxs) * -1) 0}.ius-agenda__empty{padding:var(--ius-space-xs) var(--_ag-pad) var(--ius-space-xs) var(--_ag-rail);font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary)}:host([data-rail=false]) .ius-agenda__empty{padding-left:var(--_ag-pad)}.ius-agenda__void{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ius-space-xs);padding:var(--ius-space-3xl) var(--ius-space-lg);text-align:center;color:var(--ius-text-tertiary)}.ius-agenda__void .ius-icon{font-size:var(--ius-icon-xl);color:var(--ius-text-disabled)}.ius-agenda__void-title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-lg);color:var(--ius-text-secondary)}.ius-agenda__void-sub{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EventPillComponent, selector: "ius-event-pill", inputs: ["title", "time", "endTime", "category", "hue", "kind", "icon", "customHues", "customIcons", "variant", "fill", "size", "location", "meta", "assignee", "showAssignee", "showIcon", "showDot", "titleLines", "selected", "past", "hoverable", "ariaLabel"], 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 }); }
|
|
27322
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ScheduleListComponent, isStandalone: true, selector: "ius-schedule-list", inputs: { events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, today: { classPropertyName: "today", publicName: "today", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, from: { classPropertyName: "from", publicName: "from", isSignal: true, isRequired: false, transformFunction: null }, to: { classPropertyName: "to", publicName: "to", isSignal: true, isRequired: false, transformFunction: null }, showEmptyDays: { classPropertyName: "showEmptyDays", publicName: "showEmptyDays", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, sortByTime: { classPropertyName: "sortByTime", publicName: "sortByTime", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, relativeLabels: { classPropertyName: "relativeLabels", publicName: "relativeLabels", isSignal: true, isRequired: false, transformFunction: null }, formatDayLabel: { classPropertyName: "formatDayLabel", publicName: "formatDayLabel", isSignal: true, isRequired: false, transformFunction: null }, showCount: { classPropertyName: "showCount", publicName: "showCount", isSignal: true, isRequired: false, transformFunction: null }, showRail: { classPropertyName: "showRail", publicName: "showRail", isSignal: true, isRequired: false, transformFunction: null }, stickyHeaders: { classPropertyName: "stickyHeaders", publicName: "stickyHeaders", isSignal: true, isRequired: false, transformFunction: null }, dividers: { classPropertyName: "dividers", publicName: "dividers", isSignal: true, isRequired: false, transformFunction: null }, maxVisible: { classPropertyName: "maxVisible", publicName: "maxVisible", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, pillVariant: { classPropertyName: "pillVariant", publicName: "pillVariant", isSignal: true, isRequired: false, transformFunction: null }, pillFill: { classPropertyName: "pillFill", publicName: "pillFill", isSignal: true, isRequired: false, transformFunction: null }, pillSize: { classPropertyName: "pillSize", publicName: "pillSize", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, showDot: { classPropertyName: "showDot", publicName: "showDot", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, emptySubtitle: { classPropertyName: "emptySubtitle", publicName: "emptySubtitle", isSignal: true, isRequired: false, transformFunction: null }, emptyIcon: { classPropertyName: "emptyIcon", publicName: "emptyIcon", isSignal: true, isRequired: false, transformFunction: null }, emptyDayLabel: { classPropertyName: "emptyDayLabel", publicName: "emptyDayLabel", isSignal: true, isRequired: false, transformFunction: null }, moreLabel: { classPropertyName: "moreLabel", publicName: "moreLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectDay: "selectDay", selectEvent: "selectEvent", showMore: "showMore" }, host: { properties: { "attr.data-size": "size()", "attr.data-sticky": "vacio() ? null : (stickyHeaders() ? 'true' : 'false')", "attr.data-rail": "vacio() ? null : (showRail() ? 'true' : 'false')", "attr.data-scroll": "vacio() ? null : (maxHeight() != null ? 'true' : 'false')", "style.max-height": "maxHeightCss()" }, classAttribute: "ius-agenda ius-scroll" }, ngImport: i0, template: "<ng-template #pill let-p>\n @if (eventsClickable) {\n <ius-event-pill\n [variant]=\"pillVariant()\"\n [title]=\"p.ev.title\"\n [time]=\"p.time ?? undefined\"\n [category]=\"p.ev.category\"\n [hue]=\"p.ev.hue\"\n [kind]=\"p.ev.kind\"\n [icon]=\"p.ev.icon\"\n [location]=\"p.ev.location\"\n [meta]=\"p.meta\"\n [assignee]=\"p.ev.assignee\"\n [fill]=\"p.fill\"\n [size]=\"p.size\"\n [showIcon]=\"p.showIcon\"\n [showDot]=\"p.showDot\"\n [selected]=\"!!p.ev.selected\"\n [past]=\"p.past\"\n [ariaLabel]=\"p.ev.ariaLabel\"\n (clicked)=\"onPillClick(p.ev, $event)\"\n />\n } @else {\n <ius-event-pill\n [variant]=\"pillVariant()\"\n [title]=\"p.ev.title\"\n [time]=\"p.time ?? undefined\"\n [category]=\"p.ev.category\"\n [hue]=\"p.ev.hue\"\n [kind]=\"p.ev.kind\"\n [icon]=\"p.ev.icon\"\n [location]=\"p.ev.location\"\n [meta]=\"p.meta\"\n [assignee]=\"p.ev.assignee\"\n [fill]=\"p.fill\"\n [size]=\"p.size\"\n [showIcon]=\"p.showIcon\"\n [showDot]=\"p.showDot\"\n [selected]=\"!!p.ev.selected\"\n [past]=\"p.past\"\n [ariaLabel]=\"p.ev.ariaLabel\"\n />\n }\n</ng-template>\n\n@if (vacio()) {\n <div class=\"ius-agenda__void\">\n @if (emptyIcon()) {\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ emptyIcon() }}</span>\n }\n @if (emptyTitle()) {\n <div class=\"ius-agenda__void-title\">{{ emptyTitle() }}</div>\n }\n @if (emptySubtitle()) {\n <div class=\"ius-agenda__void-sub\">{{ emptySubtitle() }}</div>\n }\n </div>\n} @else {\n @for (g of grupos(); track g.key) {\n <div\n class=\"ius-agenda__group\"\n [attr.data-today]=\"g.today ? 'true' : 'false'\"\n [attr.data-past]=\"g.past ? 'true' : 'false'\"\n [attr.data-selected]=\"g.selected ? 'true' : 'false'\"\n >\n <div\n class=\"ius-agenda__head\"\n [attr.data-clickable]=\"headClickable ? 'true' : 'false'\"\n [attr.role]=\"headClickable ? 'button' : null\"\n [attr.tabindex]=\"headClickable ? 0 : null\"\n [attr.aria-current]=\"g.selected ? 'date' : null\"\n (click)=\"onHeadClick(g.date, $event)\"\n (keydown)=\"onHeadKeydown(g.date, $event)\"\n >\n <span class=\"ius-agenda__num\">{{ g.num }}</span>\n <span class=\"ius-agenda__when\">\n <span class=\"ius-agenda__dow\">{{ g.dow }}</span>\n <span class=\"ius-agenda__month\">{{ g.label }}</span>\n </span>\n @if (showCount()) {\n <span class=\"ius-agenda__count\">{{ conteo(g.total) }}</span>\n }\n </div>\n\n @if (g.total === 0) {\n <div class=\"ius-agenda__empty\">{{ emptyDayLabel() }}</div>\n } @else {\n <div class=\"ius-agenda__events\">\n @for (p of g.pills; track p.key; let first = $first) {\n @if (showDividers() && !first) {\n <div class=\"ius-agenda__divider\" aria-hidden=\"true\"></div>\n }\n <ng-container *ngTemplateOutlet=\"pill; context: { $implicit: p }\" />\n }\n @if (g.hidden.length > 0) {\n @if (showDividers()) {\n <div class=\"ius-agenda__divider\" aria-hidden=\"true\"></div>\n }\n <div class=\"ius-agenda__more\">\n <ius-text-button size=\"small\" (clicked)=\"onMoreClick(g.date, g.hidden, $event)\">\n {{ moreLabel() || '+' + g.hidden.length + ' m\u00E1s' }}\n </ius-text-button>\n </div>\n }\n </div>\n }\n </div>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;box-sizing:border-box;width:100%;font-family:var(--ius-font-body);color:var(--ius-text-primary);--_ag-rail: 116px}:host([data-size=small]){--_ag-rail: 100px;--_ag-num: 22px;--_ag-gap: var(--ius-space-xs);--_ag-pad: 12px}:host([data-size=medium]){--_ag-rail: 116px;--_ag-num: 26px;--_ag-gap: var(--ius-space-xs);--_ag-pad: 16px}:host([data-size=large]){--_ag-rail: 132px;--_ag-num: 32px;--_ag-gap: var(--ius-space-xs);--_ag-pad: 20px}:host([data-scroll=true]){overflow:auto;border-top:1px solid var(--ius-stroke);border-bottom:1px solid var(--ius-stroke);padding-bottom:var(--_ag-gap)}.ius-agenda__group{position:relative}.ius-agenda__group+.ius-agenda__group{margin-top:var(--_ag-gap)}.ius-agenda__head{-webkit-user-select:none;user-select:none;display:flex;align-items:baseline;gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--_ag-pad);border-bottom:1px solid var(--ius-stroke);background:var(--ius-surface-card, var(--ius-neutral-white))}:host([data-sticky=true]) .ius-agenda__head{position:sticky;top:0;z-index:2}.ius-agenda__head[data-clickable=true]{cursor:pointer;border-radius:var(--ius-radius-sm);transition:background var(--ius-dur-fast, .12s) var(--ius-ease, ease)}.ius-agenda__head[data-clickable=true]:hover{background:var(--ius-neutral-2)}.ius-agenda__head[data-clickable=true]:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-agenda__num{font-family:var(--ius-font-display);font-weight:700;font-size:var(--_ag-num, 26px);line-height:1;font-variant-numeric:tabular-nums;color:var(--ius-text-primary);min-width:1.4ch;text-align:right}.ius-agenda__group[data-today=true] .ius-agenda__num{color:var(--ius-primary-900)}.ius-agenda__group[data-past=true] .ius-agenda__num{color:var(--ius-text-tertiary)}.ius-agenda__when{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}.ius-agenda__dow{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);display:flex;align-items:center;gap:var(--ius-space-xs)}.ius-agenda__rel{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1;color:var(--ius-primary-900);background:var(--ius-info-100, var(--ius-neutral-2));border-radius:var(--ius-radius-pill);padding:var(--ius-space-xxs) var(--ius-space-xs)}.ius-agenda__group[data-past=true] .ius-agenda__rel{color:var(--ius-text-tertiary);background:var(--ius-neutral-2)}.ius-agenda__month{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-base);color:var(--ius-text-secondary);font-variant-numeric:tabular-nums}.ius-agenda__count{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);line-height:1;color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums;white-space:nowrap;align-self:center}.ius-agenda__events{display:flex;flex-direction:column;gap:var(--_ag-gap, var(--ius-space-xs));padding:var(--_ag-pad) var(--_ag-pad) calc(var(--_ag-pad) + var(--ius-space-xxs)) var(--_ag-rail)}:host([data-rail=false]) .ius-agenda__events{padding-left:var(--_ag-pad)}.ius-agenda__group[data-past=true] .ius-agenda__events{opacity:.62}.ius-agenda__more{padding-top:var(--ius-space-xxs)}.ius-agenda__divider{height:1px;background:var(--ius-stroke);margin:calc(var(--ius-space-xxs) * -1) 0}.ius-agenda__empty{padding:var(--ius-space-xs) var(--_ag-pad) var(--ius-space-xs) var(--_ag-rail);font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary)}:host([data-rail=false]) .ius-agenda__empty{padding-left:var(--_ag-pad)}.ius-agenda__void{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ius-space-xs);padding:var(--ius-space-3xl) var(--ius-space-lg);text-align:center;color:var(--ius-text-tertiary)}.ius-agenda__void .ius-icon{font-size:var(--ius-icon-xl);color:var(--ius-text-disabled)}.ius-agenda__void-title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-lg);color:var(--ius-text-secondary)}.ius-agenda__void-sub{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EventPillComponent, selector: "ius-event-pill", inputs: ["title", "time", "endTime", "category", "hue", "kind", "icon", "customHues", "customIcons", "variant", "fill", "size", "location", "meta", "assignee", "showAssignee", "showIcon", "showDot", "titleLines", "selected", "past", "hoverable", "ariaLabel"], 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 }); }
|
|
27323
27323
|
}
|
|
27324
27324
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ScheduleListComponent, decorators: [{
|
|
27325
27325
|
type: Component,
|
|
@@ -27330,7 +27330,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
27330
27330
|
'[attr.data-rail]': "vacio() ? null : (showRail() ? 'true' : 'false')",
|
|
27331
27331
|
'[attr.data-scroll]': "vacio() ? null : (maxHeight() != null ? 'true' : 'false')",
|
|
27332
27332
|
'[style.max-height]': 'maxHeightCss()',
|
|
27333
|
-
}, template: "<ng-template #pill let-p>\
|
|
27333
|
+
}, template: "<ng-template #pill let-p>\n @if (eventsClickable) {\n <ius-event-pill\n [variant]=\"pillVariant()\"\n [title]=\"p.ev.title\"\n [time]=\"p.time ?? undefined\"\n [category]=\"p.ev.category\"\n [hue]=\"p.ev.hue\"\n [kind]=\"p.ev.kind\"\n [icon]=\"p.ev.icon\"\n [location]=\"p.ev.location\"\n [meta]=\"p.meta\"\n [assignee]=\"p.ev.assignee\"\n [fill]=\"p.fill\"\n [size]=\"p.size\"\n [showIcon]=\"p.showIcon\"\n [showDot]=\"p.showDot\"\n [selected]=\"!!p.ev.selected\"\n [past]=\"p.past\"\n [ariaLabel]=\"p.ev.ariaLabel\"\n (clicked)=\"onPillClick(p.ev, $event)\"\n />\n } @else {\n <ius-event-pill\n [variant]=\"pillVariant()\"\n [title]=\"p.ev.title\"\n [time]=\"p.time ?? undefined\"\n [category]=\"p.ev.category\"\n [hue]=\"p.ev.hue\"\n [kind]=\"p.ev.kind\"\n [icon]=\"p.ev.icon\"\n [location]=\"p.ev.location\"\n [meta]=\"p.meta\"\n [assignee]=\"p.ev.assignee\"\n [fill]=\"p.fill\"\n [size]=\"p.size\"\n [showIcon]=\"p.showIcon\"\n [showDot]=\"p.showDot\"\n [selected]=\"!!p.ev.selected\"\n [past]=\"p.past\"\n [ariaLabel]=\"p.ev.ariaLabel\"\n />\n }\n</ng-template>\n\n@if (vacio()) {\n <div class=\"ius-agenda__void\">\n @if (emptyIcon()) {\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ emptyIcon() }}</span>\n }\n @if (emptyTitle()) {\n <div class=\"ius-agenda__void-title\">{{ emptyTitle() }}</div>\n }\n @if (emptySubtitle()) {\n <div class=\"ius-agenda__void-sub\">{{ emptySubtitle() }}</div>\n }\n </div>\n} @else {\n @for (g of grupos(); track g.key) {\n <div\n class=\"ius-agenda__group\"\n [attr.data-today]=\"g.today ? 'true' : 'false'\"\n [attr.data-past]=\"g.past ? 'true' : 'false'\"\n [attr.data-selected]=\"g.selected ? 'true' : 'false'\"\n >\n <div\n class=\"ius-agenda__head\"\n [attr.data-clickable]=\"headClickable ? 'true' : 'false'\"\n [attr.role]=\"headClickable ? 'button' : null\"\n [attr.tabindex]=\"headClickable ? 0 : null\"\n [attr.aria-current]=\"g.selected ? 'date' : null\"\n (click)=\"onHeadClick(g.date, $event)\"\n (keydown)=\"onHeadKeydown(g.date, $event)\"\n >\n <span class=\"ius-agenda__num\">{{ g.num }}</span>\n <span class=\"ius-agenda__when\">\n <span class=\"ius-agenda__dow\">{{ g.dow }}</span>\n <span class=\"ius-agenda__month\">{{ g.label }}</span>\n </span>\n @if (showCount()) {\n <span class=\"ius-agenda__count\">{{ conteo(g.total) }}</span>\n }\n </div>\n\n @if (g.total === 0) {\n <div class=\"ius-agenda__empty\">{{ emptyDayLabel() }}</div>\n } @else {\n <div class=\"ius-agenda__events\">\n @for (p of g.pills; track p.key; let first = $first) {\n @if (showDividers() && !first) {\n <div class=\"ius-agenda__divider\" aria-hidden=\"true\"></div>\n }\n <ng-container *ngTemplateOutlet=\"pill; context: { $implicit: p }\" />\n }\n @if (g.hidden.length > 0) {\n @if (showDividers()) {\n <div class=\"ius-agenda__divider\" aria-hidden=\"true\"></div>\n }\n <div class=\"ius-agenda__more\">\n <ius-text-button size=\"small\" (clicked)=\"onMoreClick(g.date, g.hidden, $event)\">\n {{ moreLabel() || '+' + g.hidden.length + ' m\u00E1s' }}\n </ius-text-button>\n </div>\n }\n </div>\n }\n </div>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;box-sizing:border-box;width:100%;font-family:var(--ius-font-body);color:var(--ius-text-primary);--_ag-rail: 116px}:host([data-size=small]){--_ag-rail: 100px;--_ag-num: 22px;--_ag-gap: var(--ius-space-xs);--_ag-pad: 12px}:host([data-size=medium]){--_ag-rail: 116px;--_ag-num: 26px;--_ag-gap: var(--ius-space-xs);--_ag-pad: 16px}:host([data-size=large]){--_ag-rail: 132px;--_ag-num: 32px;--_ag-gap: var(--ius-space-xs);--_ag-pad: 20px}:host([data-scroll=true]){overflow:auto;border-top:1px solid var(--ius-stroke);border-bottom:1px solid var(--ius-stroke);padding-bottom:var(--_ag-gap)}.ius-agenda__group{position:relative}.ius-agenda__group+.ius-agenda__group{margin-top:var(--_ag-gap)}.ius-agenda__head{-webkit-user-select:none;user-select:none;display:flex;align-items:baseline;gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--_ag-pad);border-bottom:1px solid var(--ius-stroke);background:var(--ius-surface-card, var(--ius-neutral-white))}:host([data-sticky=true]) .ius-agenda__head{position:sticky;top:0;z-index:2}.ius-agenda__head[data-clickable=true]{cursor:pointer;border-radius:var(--ius-radius-sm);transition:background var(--ius-dur-fast, .12s) var(--ius-ease, ease)}.ius-agenda__head[data-clickable=true]:hover{background:var(--ius-neutral-2)}.ius-agenda__head[data-clickable=true]:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-agenda__num{font-family:var(--ius-font-display);font-weight:700;font-size:var(--_ag-num, 26px);line-height:1;font-variant-numeric:tabular-nums;color:var(--ius-text-primary);min-width:1.4ch;text-align:right}.ius-agenda__group[data-today=true] .ius-agenda__num{color:var(--ius-primary-900)}.ius-agenda__group[data-past=true] .ius-agenda__num{color:var(--ius-text-tertiary)}.ius-agenda__when{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}.ius-agenda__dow{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);display:flex;align-items:center;gap:var(--ius-space-xs)}.ius-agenda__rel{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1;color:var(--ius-primary-900);background:var(--ius-info-100, var(--ius-neutral-2));border-radius:var(--ius-radius-pill);padding:var(--ius-space-xxs) var(--ius-space-xs)}.ius-agenda__group[data-past=true] .ius-agenda__rel{color:var(--ius-text-tertiary);background:var(--ius-neutral-2)}.ius-agenda__month{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-base);color:var(--ius-text-secondary);font-variant-numeric:tabular-nums}.ius-agenda__count{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);line-height:1;color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums;white-space:nowrap;align-self:center}.ius-agenda__events{display:flex;flex-direction:column;gap:var(--_ag-gap, var(--ius-space-xs));padding:var(--_ag-pad) var(--_ag-pad) calc(var(--_ag-pad) + var(--ius-space-xxs)) var(--_ag-rail)}:host([data-rail=false]) .ius-agenda__events{padding-left:var(--_ag-pad)}.ius-agenda__group[data-past=true] .ius-agenda__events{opacity:.62}.ius-agenda__more{padding-top:var(--ius-space-xxs)}.ius-agenda__divider{height:1px;background:var(--ius-stroke);margin:calc(var(--ius-space-xxs) * -1) 0}.ius-agenda__empty{padding:var(--ius-space-xs) var(--_ag-pad) var(--ius-space-xs) var(--_ag-rail);font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary)}:host([data-rail=false]) .ius-agenda__empty{padding-left:var(--_ag-pad)}.ius-agenda__void{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ius-space-xs);padding:var(--ius-space-3xl) var(--ius-space-lg);text-align:center;color:var(--ius-text-tertiary)}.ius-agenda__void .ius-icon{font-size:var(--ius-icon-xl);color:var(--ius-text-disabled)}.ius-agenda__void-title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-lg);color:var(--ius-text-secondary)}.ius-agenda__void-sub{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm)}\n"] }]
|
|
27334
27334
|
}], propDecorators: { events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], today: [{ type: i0.Input, args: [{ isSignal: true, alias: "today", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], from: [{ type: i0.Input, args: [{ isSignal: true, alias: "from", required: false }] }], to: [{ type: i0.Input, args: [{ isSignal: true, alias: "to", required: false }] }], showEmptyDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEmptyDays", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], sortByTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortByTime", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], relativeLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "relativeLabels", required: false }] }], formatDayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatDayLabel", required: false }] }], showCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCount", required: false }] }], showRail: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRail", required: false }] }], stickyHeaders: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeaders", required: false }] }], dividers: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividers", required: false }] }], maxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisible", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], pillVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "pillVariant", required: false }] }], pillFill: [{ type: i0.Input, args: [{ isSignal: true, alias: "pillFill", required: false }] }], pillSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pillSize", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], showDot: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDot", required: false }] }], emptyTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTitle", required: false }] }], emptySubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptySubtitle", required: false }] }], emptyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyIcon", required: false }] }], emptyDayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyDayLabel", required: false }] }], moreLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "moreLabel", required: false }] }], selectDay: [{
|
|
27335
27335
|
type: Output
|
|
27336
27336
|
}], selectEvent: [{
|
|
@@ -27339,6 +27339,361 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
27339
27339
|
type: Output
|
|
27340
27340
|
}] } });
|
|
27341
27341
|
|
|
27342
|
+
const DEFAULT_HINT = 'Arrastra para encuadrar. Con el teclado: flechas para mover, + y − para el zoom, 0 para restablecer.';
|
|
27343
|
+
const DEFAULT_HINT_TOUCH = 'Arrastra para encuadrar. Pellizca con dos dedos o usa los botones para el zoom.';
|
|
27344
|
+
let uid = 0;
|
|
27345
|
+
const clampN = (v, a, b) => Math.min(b, Math.max(a, v));
|
|
27346
|
+
const pct = (z) => Math.round(z * 100) + ' %';
|
|
27347
|
+
/**
|
|
27348
|
+
* ImageCropper — Ius Design v2 (familia inputs).
|
|
27349
|
+
*
|
|
27350
|
+
* Encuadra y recorta una imagen ANTES de subirla (foto de perfil, logo de
|
|
27351
|
+
* cuenta): máscara circular o cuadrada, arrastre (puntero, táctil o pellizco),
|
|
27352
|
+
* zoom con range/botones/rueda/teclado. «Aplicar» emite un `Blob` del tamaño
|
|
27353
|
+
* pedido; «Cancelar» no cambia nada. No sube nada: el consumidor sube el Blob.
|
|
27354
|
+
* Fuente de verdad: `ImageCropper.jsx` + `ImageCropper.d.ts` (ng-spec §1–§7).
|
|
27355
|
+
*
|
|
27356
|
+
* Divergencias deliberadas con la ng-spec:
|
|
27357
|
+
* - `onCancel` → `cancelled`: `cancel` es un evento nativo del DOM (diálogos,
|
|
27358
|
+
* input file) y la regla transversal 3 prohíbe outputs con nombre nativo;
|
|
27359
|
+
* mismo criterio que `ius-form` (`cancelled`).
|
|
27360
|
+
* - `applyLabel`, `cancelLabel` y `hint` son texto (`string`), no proyección.
|
|
27361
|
+
*/
|
|
27362
|
+
class ImageCropperComponent {
|
|
27363
|
+
constructor() {
|
|
27364
|
+
/** Object URL (`URL.createObjectURL(file)`), data URL o URL con CORS. Al cambiar, recarga y restablece. */
|
|
27365
|
+
this.src = input(undefined, /* @ts-ignore */
|
|
27366
|
+
...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
|
|
27367
|
+
/** Máscara. `circle` (para Avatar) fuerza 1:1. */
|
|
27368
|
+
this.shape = input('circle', /* @ts-ignore */
|
|
27369
|
+
...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
|
|
27370
|
+
/** Ancho/alto del marco (solo `square`). */
|
|
27371
|
+
this.aspect = input(1, { ...(ngDevMode ? { debugName: "aspect" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
27372
|
+
/** Zoom mínimo: 1 = la imagen cubre justo el marco. */
|
|
27373
|
+
this.minZoom = input(1, { ...(ngDevMode ? { debugName: "minZoom" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
27374
|
+
this.maxZoom = input(4, { ...(ngDevMode ? { debugName: "maxZoom" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
27375
|
+
/** Paso de botones, rueda y + −. */
|
|
27376
|
+
this.zoomStep = input(0.1, { ...(ngDevMode ? { debugName: "zoomStep" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
27377
|
+
/** Lado de la salida en px (alto = `outputSize / aspect`). */
|
|
27378
|
+
this.outputSize = input(512, { ...(ngDevMode ? { debugName: "outputSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
27379
|
+
this.outputType = input('image/png', /* @ts-ignore */
|
|
27380
|
+
...(ngDevMode ? [{ debugName: "outputType" }] : /* istanbul ignore next */ []));
|
|
27381
|
+
/** Calidad 0–1 para jpeg/webp. */
|
|
27382
|
+
this.outputQuality = input(0.92, { ...(ngDevMode ? { debugName: "outputQuality" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
27383
|
+
/** Lado del marco visible en px (dimensión estructural). */
|
|
27384
|
+
this.frameSize = input(240, { ...(ngDevMode ? { debugName: "frameSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
27385
|
+
this.applyLabel = input('Aplicar', /* @ts-ignore */
|
|
27386
|
+
...(ngDevMode ? [{ debugName: "applyLabel" }] : /* istanbul ignore next */ []));
|
|
27387
|
+
this.cancelLabel = input('Cancelar', /* @ts-ignore */
|
|
27388
|
+
...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
|
|
27389
|
+
/** Muestra «Cancelar / Aplicar». */
|
|
27390
|
+
this.showActions = input(true, { ...(ngDevMode ? { debugName: "showActions" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
27391
|
+
/**
|
|
27392
|
+
* Ayuda bajo el encuadre. `false` no la pinta: el texto por defecto queda solo
|
|
27393
|
+
* para lector de pantalla (`aria-describedby` se conserva siempre).
|
|
27394
|
+
*/
|
|
27395
|
+
this.hint = input(undefined, /* @ts-ignore */
|
|
27396
|
+
...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
27397
|
+
/** Modo táctil: acciones en columna a todo el ancho, botones large y ayuda táctil. */
|
|
27398
|
+
this.touch = input(false, { ...(ngDevMode ? { debugName: "touch" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
27399
|
+
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
27400
|
+
/** Etiqueta accesible del área de encuadre. */
|
|
27401
|
+
this.ariaLabel = input('Encuadre de la imagen', /* @ts-ignore */
|
|
27402
|
+
...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
27403
|
+
/** Imagen recortada lista para subir / pasar a `Avatar`. */
|
|
27404
|
+
this.apply = output();
|
|
27405
|
+
/** Cancelar: no cambia nada. */
|
|
27406
|
+
this.cancelled = output();
|
|
27407
|
+
this.ids = (() => {
|
|
27408
|
+
uid += 1;
|
|
27409
|
+
return { hint: 'ius-ic-hint-' + uid, live: 'ius-ic-live-' + uid };
|
|
27410
|
+
})();
|
|
27411
|
+
this.stage = viewChild.required('stage', /* @ts-ignore */
|
|
27412
|
+
...(ngDevMode ? [{ debugName: "stage" }] : /* istanbul ignore next */ []));
|
|
27413
|
+
this.status = signal('empty', /* @ts-ignore */
|
|
27414
|
+
...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
|
|
27415
|
+
this.nat = signal({ w: 0, h: 0 }, /* @ts-ignore */
|
|
27416
|
+
...(ngDevMode ? [{ debugName: "nat" }] : /* istanbul ignore next */ []));
|
|
27417
|
+
this.zoom = signal(1, /* @ts-ignore */
|
|
27418
|
+
...(ngDevMode ? [{ debugName: "zoom" }] : /* istanbul ignore next */ []));
|
|
27419
|
+
this.pos = signal({ x: 0, y: 0 }, /* @ts-ignore */
|
|
27420
|
+
...(ngDevMode ? [{ debugName: "pos" }] : /* istanbul ignore next */ []));
|
|
27421
|
+
this.dragging = signal(false, /* @ts-ignore */
|
|
27422
|
+
...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
|
|
27423
|
+
this.applying = signal(false, /* @ts-ignore */
|
|
27424
|
+
...(ngDevMode ? [{ debugName: "applying" }] : /* istanbul ignore next */ []));
|
|
27425
|
+
this.announce = signal('', /* @ts-ignore */
|
|
27426
|
+
...(ngDevMode ? [{ debugName: "announce" }] : /* istanbul ignore next */ []));
|
|
27427
|
+
this.img = null;
|
|
27428
|
+
this.drag = null;
|
|
27429
|
+
/** Pellizco: punteros activos (dos dedos). */
|
|
27430
|
+
this.pointers = new Map();
|
|
27431
|
+
this.pinch = null;
|
|
27432
|
+
this.ratio = computed(() => this.shape() === 'circle' ? 1 : this.aspect() > 0 ? this.aspect() : 1, /* @ts-ignore */
|
|
27433
|
+
...(ngDevMode ? [{ debugName: "ratio" }] : /* istanbul ignore next */ []));
|
|
27434
|
+
this.frameW = computed(() => this.ratio() >= 1 ? this.frameSize() : Math.round(this.frameSize() * this.ratio()), /* @ts-ignore */
|
|
27435
|
+
...(ngDevMode ? [{ debugName: "frameW" }] : /* istanbul ignore next */ []));
|
|
27436
|
+
this.frameH = computed(() => this.ratio() >= 1 ? Math.round(this.frameSize() / this.ratio()) : this.frameSize(), /* @ts-ignore */
|
|
27437
|
+
...(ngDevMode ? [{ debugName: "frameH" }] : /* istanbul ignore next */ []));
|
|
27438
|
+
this.lo = computed(() => Math.max(0.1, this.minZoom()), /* @ts-ignore */
|
|
27439
|
+
...(ngDevMode ? [{ debugName: "lo" }] : /* istanbul ignore next */ []));
|
|
27440
|
+
this.hi = computed(() => Math.max(this.lo(), this.maxZoom()), /* @ts-ignore */
|
|
27441
|
+
...(ngDevMode ? [{ debugName: "hi" }] : /* istanbul ignore next */ []));
|
|
27442
|
+
/** Escala «cover»: con zoom 1 la imagen cubre justo el marco. */
|
|
27443
|
+
this.base = computed(() => {
|
|
27444
|
+
const n = this.nat();
|
|
27445
|
+
return n.w && n.h ? Math.max(this.frameW() / n.w, this.frameH() / n.h) : 1;
|
|
27446
|
+
}, /* @ts-ignore */
|
|
27447
|
+
...(ngDevMode ? [{ debugName: "base" }] : /* istanbul ignore next */ []));
|
|
27448
|
+
this.ready = computed(() => this.status() === 'ready' && !this.disabled(), /* @ts-ignore */
|
|
27449
|
+
...(ngDevMode ? [{ debugName: "ready" }] : /* istanbul ignore next */ []));
|
|
27450
|
+
this.imgW = computed(() => this.nat().w * this.base() * this.zoom(), /* @ts-ignore */
|
|
27451
|
+
...(ngDevMode ? [{ debugName: "imgW" }] : /* istanbul ignore next */ []));
|
|
27452
|
+
this.imgH = computed(() => this.nat().h * this.base() * this.zoom(), /* @ts-ignore */
|
|
27453
|
+
...(ngDevMode ? [{ debugName: "imgH" }] : /* istanbul ignore next */ []));
|
|
27454
|
+
this.imgTransform = computed(() => {
|
|
27455
|
+
const p = this.pos();
|
|
27456
|
+
return `translate(calc(-50% + ${p.x}px), calc(-50% + ${p.y}px))`;
|
|
27457
|
+
}, /* @ts-ignore */
|
|
27458
|
+
...(ngDevMode ? [{ debugName: "imgTransform" }] : /* istanbul ignore next */ []));
|
|
27459
|
+
this.zoomPct = computed(() => {
|
|
27460
|
+
const lo = this.lo();
|
|
27461
|
+
const hi = this.hi();
|
|
27462
|
+
return (hi > lo ? ((this.zoom() - lo) / (hi - lo)) * 100 : 0) + '%';
|
|
27463
|
+
}, /* @ts-ignore */
|
|
27464
|
+
...(ngDevMode ? [{ debugName: "zoomPct" }] : /* istanbul ignore next */ []));
|
|
27465
|
+
this.zoomText = computed(() => pct(this.zoom()), /* @ts-ignore */
|
|
27466
|
+
...(ngDevMode ? [{ debugName: "zoomText" }] : /* istanbul ignore next */ []));
|
|
27467
|
+
this.msg = computed(() => {
|
|
27468
|
+
switch (this.status()) {
|
|
27469
|
+
case 'loading':
|
|
27470
|
+
return 'Cargando imagen…';
|
|
27471
|
+
case 'error':
|
|
27472
|
+
return 'No se pudo cargar la imagen. Elija otro archivo.';
|
|
27473
|
+
case 'empty':
|
|
27474
|
+
return 'Sin imagen';
|
|
27475
|
+
default:
|
|
27476
|
+
return null;
|
|
27477
|
+
}
|
|
27478
|
+
}, /* @ts-ignore */
|
|
27479
|
+
...(ngDevMode ? [{ debugName: "msg" }] : /* istanbul ignore next */ []));
|
|
27480
|
+
this.hintText = computed(() => {
|
|
27481
|
+
const h = this.hint();
|
|
27482
|
+
return h === false || h == null ? (this.touch() ? DEFAULT_HINT_TOUCH : DEFAULT_HINT) : h;
|
|
27483
|
+
}, /* @ts-ignore */
|
|
27484
|
+
...(ngDevMode ? [{ debugName: "hintText" }] : /* istanbul ignore next */ []));
|
|
27485
|
+
// Carga de la imagen: cada `src` nuevo restablece zoom y posición. Una
|
|
27486
|
+
// carga vieja que termina tarde se descarta (`vigente`).
|
|
27487
|
+
effect((onCleanup) => {
|
|
27488
|
+
const src = this.src();
|
|
27489
|
+
this.img = null;
|
|
27490
|
+
if (!src) {
|
|
27491
|
+
this.status.set('empty');
|
|
27492
|
+
return;
|
|
27493
|
+
}
|
|
27494
|
+
let vigente = true;
|
|
27495
|
+
this.status.set('loading');
|
|
27496
|
+
const im = new Image();
|
|
27497
|
+
if (!/^(blob:|data:)/.test(src))
|
|
27498
|
+
im.crossOrigin = 'anonymous';
|
|
27499
|
+
im.onload = () => {
|
|
27500
|
+
if (!vigente)
|
|
27501
|
+
return;
|
|
27502
|
+
this.img = im;
|
|
27503
|
+
this.nat.set({ w: im.naturalWidth, h: im.naturalHeight });
|
|
27504
|
+
this.zoom.set(untracked(this.lo));
|
|
27505
|
+
this.pos.set({ x: 0, y: 0 });
|
|
27506
|
+
this.status.set('ready');
|
|
27507
|
+
};
|
|
27508
|
+
im.onerror = () => {
|
|
27509
|
+
if (vigente)
|
|
27510
|
+
this.status.set('error');
|
|
27511
|
+
};
|
|
27512
|
+
im.src = src;
|
|
27513
|
+
onCleanup(() => {
|
|
27514
|
+
vigente = false;
|
|
27515
|
+
});
|
|
27516
|
+
});
|
|
27517
|
+
// Rueda: listener declarado NO pasivo (§5) para que preventDefault frene el
|
|
27518
|
+
// scroll de la página mientras se hace zoom.
|
|
27519
|
+
const destroyRef = inject(DestroyRef);
|
|
27520
|
+
afterNextRender(() => {
|
|
27521
|
+
const el = this.stage().nativeElement;
|
|
27522
|
+
const onWheel = (e) => {
|
|
27523
|
+
if (!this.ready())
|
|
27524
|
+
return;
|
|
27525
|
+
e.preventDefault();
|
|
27526
|
+
this.setZoom(this.zoom() + (e.deltaY < 0 ? this.zoomStep() : -this.zoomStep()), false);
|
|
27527
|
+
};
|
|
27528
|
+
el.addEventListener('wheel', onWheel, { passive: false });
|
|
27529
|
+
destroyRef.onDestroy(() => el.removeEventListener('wheel', onWheel));
|
|
27530
|
+
});
|
|
27531
|
+
}
|
|
27532
|
+
/** Acota la posición para que la imagen nunca deje huecos dentro del marco. */
|
|
27533
|
+
clampPos(p, z) {
|
|
27534
|
+
const s = this.base() * z;
|
|
27535
|
+
const n = this.nat();
|
|
27536
|
+
const mx = Math.max(0, (n.w * s - this.frameW()) / 2);
|
|
27537
|
+
const my = Math.max(0, (n.h * s - this.frameH()) / 2);
|
|
27538
|
+
return { x: clampN(p.x, -mx, mx), y: clampN(p.y, -my, my) };
|
|
27539
|
+
}
|
|
27540
|
+
setZoom(z, anunciar) {
|
|
27541
|
+
const actual = this.zoom();
|
|
27542
|
+
const nz = clampN(Math.round(z * 1000) / 1000, this.lo(), this.hi());
|
|
27543
|
+
const r = nz / actual;
|
|
27544
|
+
const p = this.pos();
|
|
27545
|
+
this.zoom.set(nz);
|
|
27546
|
+
this.pos.set(this.clampPos({ x: p.x * r, y: p.y * r }, nz));
|
|
27547
|
+
if (anunciar)
|
|
27548
|
+
this.announce.set('Zoom ' + pct(nz));
|
|
27549
|
+
}
|
|
27550
|
+
move(dx, dy) {
|
|
27551
|
+
const p = this.pos();
|
|
27552
|
+
this.pos.set(this.clampPos({ x: p.x + dx, y: p.y + dy }, this.zoom()));
|
|
27553
|
+
}
|
|
27554
|
+
reset() {
|
|
27555
|
+
this.zoom.set(this.lo());
|
|
27556
|
+
this.pos.set({ x: 0, y: 0 });
|
|
27557
|
+
this.announce.set('Encuadre restablecido');
|
|
27558
|
+
}
|
|
27559
|
+
onRange(event) {
|
|
27560
|
+
this.setZoom(parseFloat(event.target.value), false);
|
|
27561
|
+
}
|
|
27562
|
+
onPointerDown(e) {
|
|
27563
|
+
if (!this.ready() || e.button !== 0)
|
|
27564
|
+
return;
|
|
27565
|
+
e.currentTarget.setPointerCapture?.(e.pointerId);
|
|
27566
|
+
this.pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
|
|
27567
|
+
if (this.pointers.size === 2) {
|
|
27568
|
+
const [a, b] = [...this.pointers.values()];
|
|
27569
|
+
this.pinch = { dist: Math.hypot(a.x - b.x, a.y - b.y) || 1, zoom: this.zoom() };
|
|
27570
|
+
this.drag = null;
|
|
27571
|
+
return;
|
|
27572
|
+
}
|
|
27573
|
+
const p = this.pos();
|
|
27574
|
+
this.drag = { px: e.clientX, py: e.clientY, x: p.x, y: p.y };
|
|
27575
|
+
this.dragging.set(true);
|
|
27576
|
+
}
|
|
27577
|
+
onPointerMove(e) {
|
|
27578
|
+
if (this.pointers.has(e.pointerId))
|
|
27579
|
+
this.pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
|
|
27580
|
+
if (this.pinch && this.pointers.size >= 2) {
|
|
27581
|
+
const [a, b] = [...this.pointers.values()];
|
|
27582
|
+
const dist = Math.hypot(a.x - b.x, a.y - b.y) || 1;
|
|
27583
|
+
this.setZoom(this.pinch.zoom * (dist / this.pinch.dist), false);
|
|
27584
|
+
return;
|
|
27585
|
+
}
|
|
27586
|
+
const d = this.drag;
|
|
27587
|
+
if (!d)
|
|
27588
|
+
return;
|
|
27589
|
+
this.pos.set(this.clampPos({ x: d.x + (e.clientX - d.px), y: d.y + (e.clientY - d.py) }, this.zoom()));
|
|
27590
|
+
}
|
|
27591
|
+
onPointerEnd(e) {
|
|
27592
|
+
this.pointers.delete(e.pointerId);
|
|
27593
|
+
if (this.pointers.size < 2)
|
|
27594
|
+
this.pinch = null;
|
|
27595
|
+
if (!this.drag) {
|
|
27596
|
+
if (this.pointers.size === 0)
|
|
27597
|
+
this.dragging.set(false);
|
|
27598
|
+
return;
|
|
27599
|
+
}
|
|
27600
|
+
this.drag = null;
|
|
27601
|
+
this.dragging.set(false);
|
|
27602
|
+
const el = e.currentTarget;
|
|
27603
|
+
if (el.hasPointerCapture?.(e.pointerId))
|
|
27604
|
+
el.releasePointerCapture(e.pointerId);
|
|
27605
|
+
}
|
|
27606
|
+
onKeyDown(e) {
|
|
27607
|
+
if (!this.ready())
|
|
27608
|
+
return;
|
|
27609
|
+
const step = e.shiftKey ? 40 : 10;
|
|
27610
|
+
const k = e.key;
|
|
27611
|
+
if (k === 'ArrowLeft')
|
|
27612
|
+
this.move(-step, 0);
|
|
27613
|
+
else if (k === 'ArrowRight')
|
|
27614
|
+
this.move(step, 0);
|
|
27615
|
+
else if (k === 'ArrowUp')
|
|
27616
|
+
this.move(0, -step);
|
|
27617
|
+
else if (k === 'ArrowDown')
|
|
27618
|
+
this.move(0, step);
|
|
27619
|
+
else if (k === '+' || k === '=')
|
|
27620
|
+
this.setZoom(this.zoom() + this.zoomStep(), true);
|
|
27621
|
+
else if (k === '-' || k === '_')
|
|
27622
|
+
this.setZoom(this.zoom() - this.zoomStep(), true);
|
|
27623
|
+
else if (k === '0')
|
|
27624
|
+
this.reset();
|
|
27625
|
+
else
|
|
27626
|
+
return;
|
|
27627
|
+
e.preventDefault();
|
|
27628
|
+
}
|
|
27629
|
+
aplicar() {
|
|
27630
|
+
const im = this.img;
|
|
27631
|
+
if (!im || !this.ready() || this.applying())
|
|
27632
|
+
return;
|
|
27633
|
+
const s = this.base() * this.zoom();
|
|
27634
|
+
const n = this.nat();
|
|
27635
|
+
const p = this.pos();
|
|
27636
|
+
const fw = this.frameW();
|
|
27637
|
+
const fh = this.frameH();
|
|
27638
|
+
const left = fw / 2 + p.x - (n.w * s) / 2;
|
|
27639
|
+
const top = fh / 2 + p.y - (n.h * s) / 2;
|
|
27640
|
+
const crop = { x: -left / s, y: -top / s, width: fw / s, height: fh / s };
|
|
27641
|
+
const ow = Math.round(this.outputSize());
|
|
27642
|
+
const oh = Math.round(this.outputSize() / this.ratio());
|
|
27643
|
+
const canvas = document.createElement('canvas');
|
|
27644
|
+
canvas.width = ow;
|
|
27645
|
+
canvas.height = oh;
|
|
27646
|
+
const ctx = canvas.getContext('2d');
|
|
27647
|
+
if (!ctx) {
|
|
27648
|
+
this.status.set('error');
|
|
27649
|
+
return;
|
|
27650
|
+
}
|
|
27651
|
+
ctx.imageSmoothingEnabled = true;
|
|
27652
|
+
ctx.imageSmoothingQuality = 'high';
|
|
27653
|
+
ctx.drawImage(im, crop.x, crop.y, crop.width, crop.height, 0, 0, ow, oh);
|
|
27654
|
+
const zoom = this.zoom();
|
|
27655
|
+
this.applying.set(true);
|
|
27656
|
+
try {
|
|
27657
|
+
canvas.toBlob((blob) => {
|
|
27658
|
+
this.applying.set(false);
|
|
27659
|
+
if (!blob) {
|
|
27660
|
+
this.announce.set('No se pudo recortar la imagen');
|
|
27661
|
+
return;
|
|
27662
|
+
}
|
|
27663
|
+
this.apply.emit({
|
|
27664
|
+
blob,
|
|
27665
|
+
crop: {
|
|
27666
|
+
x: Math.round(crop.x),
|
|
27667
|
+
y: Math.round(crop.y),
|
|
27668
|
+
width: Math.round(crop.width),
|
|
27669
|
+
height: Math.round(crop.height),
|
|
27670
|
+
},
|
|
27671
|
+
zoom,
|
|
27672
|
+
width: ow,
|
|
27673
|
+
height: oh,
|
|
27674
|
+
});
|
|
27675
|
+
}, this.outputType(), this.outputQuality());
|
|
27676
|
+
}
|
|
27677
|
+
catch {
|
|
27678
|
+
// Un canvas «contaminado» (imagen remota sin CORS) lanza en toBlob.
|
|
27679
|
+
this.applying.set(false);
|
|
27680
|
+
this.announce.set('No se pudo recortar la imagen');
|
|
27681
|
+
}
|
|
27682
|
+
}
|
|
27683
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ImageCropperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
27684
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ImageCropperComponent, isStandalone: true, selector: "ius-image-cropper", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, aspect: { classPropertyName: "aspect", publicName: "aspect", isSignal: true, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: true, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: true, isRequired: false, transformFunction: null }, zoomStep: { classPropertyName: "zoomStep", publicName: "zoomStep", isSignal: true, isRequired: false, transformFunction: null }, outputSize: { classPropertyName: "outputSize", publicName: "outputSize", isSignal: true, isRequired: false, transformFunction: null }, outputType: { classPropertyName: "outputType", publicName: "outputType", isSignal: true, isRequired: false, transformFunction: null }, outputQuality: { classPropertyName: "outputQuality", publicName: "outputQuality", isSignal: true, isRequired: false, transformFunction: null }, frameSize: { classPropertyName: "frameSize", publicName: "frameSize", isSignal: true, isRequired: false, transformFunction: null }, applyLabel: { classPropertyName: "applyLabel", publicName: "applyLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, touch: { classPropertyName: "touch", publicName: "touch", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", cancelled: "cancelled" }, host: { properties: { "attr.data-shape": "shape()", "attr.data-touch": "touch() ? 'true' : null", "style.--_ic-frame-w": "frameW() + 'px'", "style.--_ic-frame-h": "frameH() + 'px'" }, classAttribute: "ius-ic" }, viewQueries: [{ propertyName: "stage", first: true, predicate: ["stage"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n #stage\r\n class=\"ius-ic__stage\"\r\n role=\"group\"\r\n aria-roledescription=\"recorte de imagen\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [attr.aria-describedby]=\"ids.hint\"\r\n [attr.data-status]=\"status()\"\r\n [attr.data-dragging]=\"dragging() ? 'true' : null\"\r\n [attr.tabindex]=\"ready() ? 0 : -1\"\r\n (keydown)=\"onKeyDown($event)\"\r\n (pointerdown)=\"onPointerDown($event)\"\r\n (pointermove)=\"onPointerMove($event)\"\r\n (pointerup)=\"onPointerEnd($event)\"\r\n (pointercancel)=\"onPointerEnd($event)\"\r\n>\r\n @if (status() === 'ready') {\r\n <img\r\n class=\"ius-ic__img\"\r\n alt=\"\"\r\n draggable=\"false\"\r\n [src]=\"src()\"\r\n [style.width.px]=\"imgW()\"\r\n [style.height.px]=\"imgH()\"\r\n [style.transform]=\"imgTransform()\"\r\n />\r\n }\r\n <span class=\"ius-ic__frame\" aria-hidden=\"true\"></span>\r\n @if (msg(); as texto) {\r\n <div class=\"ius-ic__msg\" [attr.role]=\"status() === 'error' ? 'alert' : null\">{{ texto }}</div>\r\n }\r\n</div>\r\n\r\n<div class=\"ius-ic__zoom\">\r\n <ius-icon-button\r\n icon=\"zoom_out\"\r\n variant=\"tertiary\"\r\n shape=\"circle\"\r\n ariaLabel=\"Alejar\"\r\n tooltip=\"Alejar\"\r\n [size]=\"touch() ? 'large' : 'small'\"\r\n [disabled]=\"!ready() || zoom() <= lo()\"\r\n (clicked)=\"setZoom(zoom() - zoomStep(), true)\"\r\n />\r\n <input\r\n type=\"range\"\r\n class=\"ius-ic__range\"\r\n aria-label=\"Zoom\"\r\n [min]=\"lo()\"\r\n [max]=\"hi()\"\r\n [step]=\"zoomStep()\"\r\n [value]=\"zoom()\"\r\n [disabled]=\"!ready()\"\r\n [attr.aria-valuetext]=\"zoomText()\"\r\n [style.--_ic-pct]=\"zoomPct()\"\r\n (input)=\"onRange($event)\"\r\n />\r\n <ius-icon-button\r\n icon=\"zoom_in\"\r\n variant=\"tertiary\"\r\n shape=\"circle\"\r\n ariaLabel=\"Acercar\"\r\n tooltip=\"Acercar\"\r\n [size]=\"touch() ? 'large' : 'small'\"\r\n [disabled]=\"!ready() || zoom() >= hi()\"\r\n (clicked)=\"setZoom(zoom() + zoomStep(), true)\"\r\n />\r\n</div>\r\n\r\n<!-- Ayuda: siempre en el DOM para aria-describedby; hint=false solo la oculta a la vista. -->\r\n<p [id]=\"ids.hint\" [class]=\"hint() === false ? 'ius-ic__sr' : 'ius-ic__hint'\">{{ hintText() }}</p>\r\n\r\n@if (showActions()) {\r\n <div class=\"ius-ic__actions\">\r\n <ius-button\r\n variant=\"secondary\"\r\n [label]=\"cancelLabel()\"\r\n [size]=\"touch() ? 'large' : 'medium'\"\r\n [fullWidth]=\"touch()\"\r\n (clicked)=\"cancelled.emit()\"\r\n />\r\n <ius-button\r\n variant=\"primary\"\r\n [label]=\"applyLabel()\"\r\n [size]=\"touch() ? 'large' : 'medium'\"\r\n [fullWidth]=\"touch()\"\r\n [disabled]=\"!ready()\"\r\n [loading]=\"applying()\"\r\n (clicked)=\"aplicar()\"\r\n />\r\n </div>\r\n}\r\n\r\n<span class=\"ius-ic__sr\" aria-live=\"polite\" [id]=\"ids.live\">{{ announce() }}</span>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-md);font-family:var(--ius-font-body);width:calc(var(--_ic-frame-w) + 2 * var(--ius-space-xl));max-width:100%;box-sizing:border-box}.ius-ic__stage{position:relative;box-sizing:content-box;overflow:hidden;width:var(--_ic-frame-w);height:var(--_ic-frame-h);max-width:100%;padding:var(--ius-space-xl);background:var(--ius-neutral-10);border-radius:var(--ius-radius-md);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;outline:none}.ius-ic__stage[data-dragging=true]{cursor:grabbing}.ius-ic__stage:focus-visible{box-shadow:var(--ius-focus-ring)}.ius-ic__stage[data-status=loading],.ius-ic__stage[data-status=error]{cursor:default}.ius-ic__img{position:absolute;left:50%;top:50%;max-width:none;pointer-events:none;-webkit-user-drag:none}@media(prefers-reduced-motion:no-preference){.ius-ic__stage:not([data-dragging=true]) .ius-ic__img{transition:transform var(--ius-duration-fast) var(--ius-ease-standard),width var(--ius-duration-fast) var(--ius-ease-standard),height var(--ius-duration-fast) var(--ius-ease-standard)}}.ius-ic__frame{position:absolute;left:var(--ius-space-xl);top:var(--ius-space-xl);width:var(--_ic-frame-w);height:var(--_ic-frame-h);box-sizing:border-box;border:1px solid var(--ius-neutral-white);outline:100vmax solid var(--ius-surface-overlay);pointer-events:none}:host([data-shape=circle]) .ius-ic__frame{border-radius:50%}:host([data-shape=square]) .ius-ic__frame{border-radius:var(--ius-radius-sm)}.ius-ic__msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--ius-space-md);text-align:center;font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-neutral-white)}.ius-ic__zoom{display:flex;align-items:center;gap:var(--ius-space-xs)}.ius-ic__range{flex:1 1 auto;min-width:0;margin:0;height:var(--ius-space-lg);-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}.ius-ic__range:focus{outline:none}.ius-ic__range::-webkit-slider-runnable-track{height:var(--ius-space-xxs);border-radius:var(--ius-radius-pill);background:linear-gradient(to right,var(--ius-primary-900) var(--_ic-pct),var(--ius-neutral-4) var(--_ic-pct))}.ius-ic__range::-moz-range-track{height:var(--ius-space-xxs);border-radius:var(--ius-radius-pill);background:var(--ius-neutral-4)}.ius-ic__range::-moz-range-progress{height:var(--ius-space-xxs);border-radius:var(--ius-radius-pill);background:var(--ius-primary-900)}.ius-ic__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--ius-space-md);height:var(--ius-space-md);margin-top:calc((var(--ius-space-md) - var(--ius-space-xxs)) / -2);border-radius:var(--ius-radius-pill);background:var(--ius-primary-900);border:2px solid var(--ius-neutral-white);box-shadow:var(--ius-elevation-100)}.ius-ic__range::-moz-range-thumb{width:var(--ius-space-md);height:var(--ius-space-md);box-sizing:border-box;border-radius:var(--ius-radius-pill);background:var(--ius-primary-900);border:2px solid var(--ius-neutral-white);box-shadow:var(--ius-elevation-100)}.ius-ic__range:hover::-webkit-slider-thumb{background:var(--ius-primary-500)}.ius-ic__range:hover::-moz-range-thumb{background:var(--ius-primary-500)}.ius-ic__range:focus-visible::-webkit-slider-thumb{box-shadow:var(--ius-focus-ring)}.ius-ic__range:focus-visible::-moz-range-thumb{box-shadow:var(--ius-focus-ring)}.ius-ic__range:disabled{cursor:not-allowed;opacity:.5}.ius-ic__hint{margin:0;font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-tertiary);text-wrap:pretty}.ius-ic__actions{display:flex;justify-content:flex-end;gap:var(--ius-space-xs)}:host([data-touch=true]){width:100%}:host([data-touch=true]) .ius-ic__actions{flex-direction:column-reverse;align-items:stretch}.ius-ic__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ius-button", inputs: ["variant", "label", "prefixIcon", "sufixIcon", "dynamic", "loading", "status", "disabled", "pressed", "fullWidth", "type", "ariaLabel", "ariaCurrent", "action", "size"], outputs: ["clicked"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "ariaPressed", "ariaExpanded", "ariaControls", "tooltipPlacement"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
27685
|
+
}
|
|
27686
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ImageCropperComponent, decorators: [{
|
|
27687
|
+
type: Component,
|
|
27688
|
+
args: [{ selector: 'ius-image-cropper', standalone: true, imports: [ButtonComponent, IconButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
27689
|
+
class: 'ius-ic',
|
|
27690
|
+
'[attr.data-shape]': 'shape()',
|
|
27691
|
+
'[attr.data-touch]': "touch() ? 'true' : null",
|
|
27692
|
+
'[style.--_ic-frame-w]': "frameW() + 'px'",
|
|
27693
|
+
'[style.--_ic-frame-h]': "frameH() + 'px'",
|
|
27694
|
+
}, template: "<div\r\n #stage\r\n class=\"ius-ic__stage\"\r\n role=\"group\"\r\n aria-roledescription=\"recorte de imagen\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [attr.aria-describedby]=\"ids.hint\"\r\n [attr.data-status]=\"status()\"\r\n [attr.data-dragging]=\"dragging() ? 'true' : null\"\r\n [attr.tabindex]=\"ready() ? 0 : -1\"\r\n (keydown)=\"onKeyDown($event)\"\r\n (pointerdown)=\"onPointerDown($event)\"\r\n (pointermove)=\"onPointerMove($event)\"\r\n (pointerup)=\"onPointerEnd($event)\"\r\n (pointercancel)=\"onPointerEnd($event)\"\r\n>\r\n @if (status() === 'ready') {\r\n <img\r\n class=\"ius-ic__img\"\r\n alt=\"\"\r\n draggable=\"false\"\r\n [src]=\"src()\"\r\n [style.width.px]=\"imgW()\"\r\n [style.height.px]=\"imgH()\"\r\n [style.transform]=\"imgTransform()\"\r\n />\r\n }\r\n <span class=\"ius-ic__frame\" aria-hidden=\"true\"></span>\r\n @if (msg(); as texto) {\r\n <div class=\"ius-ic__msg\" [attr.role]=\"status() === 'error' ? 'alert' : null\">{{ texto }}</div>\r\n }\r\n</div>\r\n\r\n<div class=\"ius-ic__zoom\">\r\n <ius-icon-button\r\n icon=\"zoom_out\"\r\n variant=\"tertiary\"\r\n shape=\"circle\"\r\n ariaLabel=\"Alejar\"\r\n tooltip=\"Alejar\"\r\n [size]=\"touch() ? 'large' : 'small'\"\r\n [disabled]=\"!ready() || zoom() <= lo()\"\r\n (clicked)=\"setZoom(zoom() - zoomStep(), true)\"\r\n />\r\n <input\r\n type=\"range\"\r\n class=\"ius-ic__range\"\r\n aria-label=\"Zoom\"\r\n [min]=\"lo()\"\r\n [max]=\"hi()\"\r\n [step]=\"zoomStep()\"\r\n [value]=\"zoom()\"\r\n [disabled]=\"!ready()\"\r\n [attr.aria-valuetext]=\"zoomText()\"\r\n [style.--_ic-pct]=\"zoomPct()\"\r\n (input)=\"onRange($event)\"\r\n />\r\n <ius-icon-button\r\n icon=\"zoom_in\"\r\n variant=\"tertiary\"\r\n shape=\"circle\"\r\n ariaLabel=\"Acercar\"\r\n tooltip=\"Acercar\"\r\n [size]=\"touch() ? 'large' : 'small'\"\r\n [disabled]=\"!ready() || zoom() >= hi()\"\r\n (clicked)=\"setZoom(zoom() + zoomStep(), true)\"\r\n />\r\n</div>\r\n\r\n<!-- Ayuda: siempre en el DOM para aria-describedby; hint=false solo la oculta a la vista. -->\r\n<p [id]=\"ids.hint\" [class]=\"hint() === false ? 'ius-ic__sr' : 'ius-ic__hint'\">{{ hintText() }}</p>\r\n\r\n@if (showActions()) {\r\n <div class=\"ius-ic__actions\">\r\n <ius-button\r\n variant=\"secondary\"\r\n [label]=\"cancelLabel()\"\r\n [size]=\"touch() ? 'large' : 'medium'\"\r\n [fullWidth]=\"touch()\"\r\n (clicked)=\"cancelled.emit()\"\r\n />\r\n <ius-button\r\n variant=\"primary\"\r\n [label]=\"applyLabel()\"\r\n [size]=\"touch() ? 'large' : 'medium'\"\r\n [fullWidth]=\"touch()\"\r\n [disabled]=\"!ready()\"\r\n [loading]=\"applying()\"\r\n (clicked)=\"aplicar()\"\r\n />\r\n </div>\r\n}\r\n\r\n<span class=\"ius-ic__sr\" aria-live=\"polite\" [id]=\"ids.live\">{{ announce() }}</span>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-md);font-family:var(--ius-font-body);width:calc(var(--_ic-frame-w) + 2 * var(--ius-space-xl));max-width:100%;box-sizing:border-box}.ius-ic__stage{position:relative;box-sizing:content-box;overflow:hidden;width:var(--_ic-frame-w);height:var(--_ic-frame-h);max-width:100%;padding:var(--ius-space-xl);background:var(--ius-neutral-10);border-radius:var(--ius-radius-md);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;outline:none}.ius-ic__stage[data-dragging=true]{cursor:grabbing}.ius-ic__stage:focus-visible{box-shadow:var(--ius-focus-ring)}.ius-ic__stage[data-status=loading],.ius-ic__stage[data-status=error]{cursor:default}.ius-ic__img{position:absolute;left:50%;top:50%;max-width:none;pointer-events:none;-webkit-user-drag:none}@media(prefers-reduced-motion:no-preference){.ius-ic__stage:not([data-dragging=true]) .ius-ic__img{transition:transform var(--ius-duration-fast) var(--ius-ease-standard),width var(--ius-duration-fast) var(--ius-ease-standard),height var(--ius-duration-fast) var(--ius-ease-standard)}}.ius-ic__frame{position:absolute;left:var(--ius-space-xl);top:var(--ius-space-xl);width:var(--_ic-frame-w);height:var(--_ic-frame-h);box-sizing:border-box;border:1px solid var(--ius-neutral-white);outline:100vmax solid var(--ius-surface-overlay);pointer-events:none}:host([data-shape=circle]) .ius-ic__frame{border-radius:50%}:host([data-shape=square]) .ius-ic__frame{border-radius:var(--ius-radius-sm)}.ius-ic__msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--ius-space-md);text-align:center;font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-neutral-white)}.ius-ic__zoom{display:flex;align-items:center;gap:var(--ius-space-xs)}.ius-ic__range{flex:1 1 auto;min-width:0;margin:0;height:var(--ius-space-lg);-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}.ius-ic__range:focus{outline:none}.ius-ic__range::-webkit-slider-runnable-track{height:var(--ius-space-xxs);border-radius:var(--ius-radius-pill);background:linear-gradient(to right,var(--ius-primary-900) var(--_ic-pct),var(--ius-neutral-4) var(--_ic-pct))}.ius-ic__range::-moz-range-track{height:var(--ius-space-xxs);border-radius:var(--ius-radius-pill);background:var(--ius-neutral-4)}.ius-ic__range::-moz-range-progress{height:var(--ius-space-xxs);border-radius:var(--ius-radius-pill);background:var(--ius-primary-900)}.ius-ic__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--ius-space-md);height:var(--ius-space-md);margin-top:calc((var(--ius-space-md) - var(--ius-space-xxs)) / -2);border-radius:var(--ius-radius-pill);background:var(--ius-primary-900);border:2px solid var(--ius-neutral-white);box-shadow:var(--ius-elevation-100)}.ius-ic__range::-moz-range-thumb{width:var(--ius-space-md);height:var(--ius-space-md);box-sizing:border-box;border-radius:var(--ius-radius-pill);background:var(--ius-primary-900);border:2px solid var(--ius-neutral-white);box-shadow:var(--ius-elevation-100)}.ius-ic__range:hover::-webkit-slider-thumb{background:var(--ius-primary-500)}.ius-ic__range:hover::-moz-range-thumb{background:var(--ius-primary-500)}.ius-ic__range:focus-visible::-webkit-slider-thumb{box-shadow:var(--ius-focus-ring)}.ius-ic__range:focus-visible::-moz-range-thumb{box-shadow:var(--ius-focus-ring)}.ius-ic__range:disabled{cursor:not-allowed;opacity:.5}.ius-ic__hint{margin:0;font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-tertiary);text-wrap:pretty}.ius-ic__actions{display:flex;justify-content:flex-end;gap:var(--ius-space-xs)}:host([data-touch=true]){width:100%}:host([data-touch=true]) .ius-ic__actions{flex-direction:column-reverse;align-items:stretch}.ius-ic__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n"] }]
|
|
27695
|
+
}], ctorParameters: () => [], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], aspect: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspect", required: false }] }], minZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "minZoom", required: false }] }], maxZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxZoom", required: false }] }], zoomStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomStep", required: false }] }], outputSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "outputSize", required: false }] }], outputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "outputType", required: false }] }], outputQuality: [{ type: i0.Input, args: [{ isSignal: true, alias: "outputQuality", required: false }] }], frameSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "frameSize", required: false }] }], applyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], touch: [{ type: i0.Input, args: [{ isSignal: true, alias: "touch", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], apply: [{ type: i0.Output, args: ["apply"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], stage: [{ type: i0.ViewChild, args: ['stage', { isSignal: true }] }] } });
|
|
27696
|
+
|
|
27342
27697
|
/*
|
|
27343
27698
|
* Public API de @litigiovirtual/ius-design-components v2.
|
|
27344
27699
|
* La librería se está reconstruyendo componente a componente desde las
|
|
@@ -27350,5 +27705,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
27350
27705
|
* Generated bundle index. Do not edit.
|
|
27351
27706
|
*/
|
|
27352
27707
|
|
|
27353
|
-
export { ACTUACION_CATALOG, ACTUACION_FUENTES, AccordionComponent, AccountItemComponent, AlertComponent, AnswerFeedbackComponent, AppLayoutComponent, AutocompleteComponent, AvatarComponent, AvatarStackComponent, BarChartComponent, BorderBeamComponent, BreadcrumbComponent, ButtonComponent, CATEGORIES, CATEGORY_DEF, CATEGORY_HUE, CHART_CATEGORICAL_TONES, CHART_SEMANTIC_TONES, CHART_TONES, CLASE_DEF, CalendarComponent, CaptchaFieldComponent, CardComponent, CarouselComponent, CheckboxComponent, ChipComponent, CircularProgressComponent, CodeFieldComponent, CountdownComponent, CountdownRingComponent, DateFilterComponent, DatePickerComponent, DescriptionListComponent, DetailSidePanelComponent, DividerComponent, DocumentViewerComponent, DonutChartComponent, DrawerComponent, DropdownComponent, EVENT_KINDS, EVENT_KIND_ICON, EXT_KIND, EleniaBubbleComponent, EleniaOrbComponent, EmptyStateComponent, EntityNavigatorComponent, EntityRowComponent, EventPillComponent, FUENTES, FUENTE_DEF, FUENTE_FALLBACK, FileItemComponent, FileTypeIconComponent, FileUploadComponent, FlexComponent, FooterStatusComponent, FormComponent, FormFieldComponent, FormSectionComponent, HeaderBarComponent, ILLUSTRATIONS, ILLUSTRATION_ALIAS, ILLUSTRATION_NAMES, IUS_DOCUMENT_VIEWER_ZOOM_STEPS, IUS_FILTER_OPERATORS, IUS_TOAST_DEFAULT_DURATION, IUS_TOAST_DEFAULT_ICON, IconButtonComponent, IllustrationComponent, InsightComponent, InsigniaComponent, IusAccountItemNameDirective, IusAccountItemSubtitleDirective, IusAccountItemTrailingDirective, IusAlertActionsDirective, IusAlertTrailingDirective, IusCalendarAsideDirective, IusCalendarFooterDirective, IusCardFooterDirective, IusCardHeaderDirective, IusDocViewerActionsDirective, IusDocViewerAsideDirective, IusDocViewerBodyDirective, IusDrawerFooterDirective, IusDrawerHeaderActionsDirective, IusDrawerTitleDirective, IusDropdownTriggerDirective, IusEntityRowLabelDirective, IusEntityRowSublabelDirective, IusFooterStatusActionDirective, IusFormFooterDirective, IusInsightActionsDirective, IusKanbanCardBodyDirective, IusKanbanCardLeadingDirective, IusKanbanCardTrailingDirective, IusListCardLeadingDirective, IusListCardOverlineDirective, IusListCardParagraphDirective, IusListCardSubtitleDirective, IusListCardTitleDirective, IusListViewFiltersDirective, IusListViewFooterEndDirective, IusListViewFooterStartDirective, IusListViewHeaderEndDirective, IusListViewHeaderStartDirective, IusListViewToolbarDirective, IusMenuItemTrailingDirective, IusModalFooterDirective, IusNavRailBrandDirective, IusPageHeaderActionsDirective, IusPageHeaderBreadcrumbDirective, IusPageHeaderOverlineDirective, IusPageHeaderSubtitleDirective, IusPageHeaderTitleDirective, IusPageHeaderToolbarDirective, IusPersonItemNameDirective, IusPersonItemTrailingDirective, IusSectionTitleActionDirective, IusSettingsNavFooterDirective, IusSettingsNavHeaderDirective, IusStageDetailFooterDirective, IusStageDetailHeaderActionsDirective, IusStageDetailMetaDirective, IusStatCaptionDirective, IusStatDeltaDirective, IusStatDeltaLabelDirective, IusStatLabelDirective, IusStatSparklineDirective, IusTagPrefixDirective, IusTagSuffixDirective, IusToastActionDirective, IusUserMenuFooterDirective, KINDS, KIND_DEF, KIND_FALLBACK, KanbanBoardComponent, KanbanCardComponent, KanbanColumnComponent, LineChartComponent, LinearProgressBarComponent, ListCardComponent, ListViewComponent, LoadingComponent, LoadingMarkComponent, MenuComponent, MenuItemComponent, ModalComponent, MultiTextFieldComponent, NATURALEZA_DEF, NavRailComponent, NavUserComponent, NumberFieldComponent, ORB_PERIODS, OauthButtonComponent, OptionItemComponent, PageHeaderComponent, PaginationComponent, PartyListComponent, PersonItemComponent, PersonPickerComponent, PlanUsageItemComponent, PopoverComponent, QueryBuilderComponent, RadioComponent, RepeatableFieldComponent, SOURCE_FUENTE, SOURCE_LABEL, STATUS_TONES, STATUS_VOCAB, STATUS_VOCABS, STATUS_VOCABS_PENDING, ScheduleListComponent, ScrollAreaComponent, SearchBarComponent, SectionHeaderComponent, SectionTitleComponent, SegmentGroupComponent, SegmentedControlComponent, SelectComponent, SelectNumberComponent, SelectionFieldComponent, SettingsNavComponent, ShowMoreComponent, SkeletonComponent, SparklineComponent, SplitterComponent, StageDetailDrawerComponent, StatComponent, StatGroupComponent, StatusChipComponent, StatusStateComponent, StepperComponent, SwitchComponent, TableComponent, TabsComponent, TagComponent, TextAreaComponent, TextButtonComponent, TextComponent, TextFieldComponent, TimePanelComponent, TimelineComponent, ToastComponent, ToastService, ToastViewportComponent, TooltipComponent, UserMenuComponent, WizardComponent, WizardController, WizardNavComponent, categoryColors, categoryOptions, chartAxisTicks, chartFormatValue, chartLinearPath, chartNiceNum, chartPath, chartPrefersReducedMotion, chartSmoothPath, chartToneAt, chartToneVar, createWizard, eventKindOptions, extOf, formatBytes, formatDate, formatTime, fuenteColors, fuenteOptions, iusSegColor, kindHue, kindIcon, kindLabel, kindMeta, kindOptions, naturalezaMeta, naturalezaOptions, normalizeTipo, pose, poseIso, poseSpeaking, poseThinking, renderCubeSvg, resolveActuacion, resolveCategoryHue, resolveEventIcon, resolveFuente, resolveIllustration, resolveKind, resolveStatus, resolveViewKind, sourceIcon, sourceMeta, statusOptions, statusOrder, statusToneVars, statusVocab, timeFromDate, voiceEnv };
|
|
27708
|
+
export { ACTUACION_CATALOG, ACTUACION_FUENTES, AccordionComponent, AccountItemComponent, AlertComponent, AnswerFeedbackComponent, AppLayoutComponent, AutocompleteComponent, AvatarComponent, AvatarStackComponent, BarChartComponent, BorderBeamComponent, BreadcrumbComponent, ButtonComponent, CATEGORIES, CATEGORY_DEF, CATEGORY_HUE, CHART_CATEGORICAL_TONES, CHART_SEMANTIC_TONES, CHART_TONES, CLASE_DEF, CalendarComponent, CaptchaFieldComponent, CardComponent, CarouselComponent, CheckboxComponent, ChipComponent, CircularProgressComponent, CodeFieldComponent, CountdownComponent, CountdownRingComponent, DateFilterComponent, DatePickerComponent, DescriptionListComponent, DetailSidePanelComponent, DividerComponent, DocumentViewerComponent, DonutChartComponent, DrawerComponent, DropdownComponent, EVENT_KINDS, EVENT_KIND_ICON, EXT_KIND, EleniaBubbleComponent, EleniaOrbComponent, EmptyStateComponent, EntityNavigatorComponent, EntityRowComponent, EventPillComponent, FUENTES, FUENTE_DEF, FUENTE_FALLBACK, FileItemComponent, FileTypeIconComponent, FileUploadComponent, FlexComponent, FooterStatusComponent, FormComponent, FormFieldComponent, FormSectionComponent, HeaderBarComponent, ILLUSTRATIONS, ILLUSTRATION_ALIAS, ILLUSTRATION_NAMES, IUS_DOCUMENT_VIEWER_ZOOM_STEPS, IUS_FILTER_OPERATORS, IUS_TOAST_DEFAULT_DURATION, IUS_TOAST_DEFAULT_ICON, IconButtonComponent, IllustrationComponent, ImageCropperComponent, InsightComponent, InsigniaComponent, IusAccountItemNameDirective, IusAccountItemSubtitleDirective, IusAccountItemTrailingDirective, IusAlertActionsDirective, IusAlertTrailingDirective, IusCalendarAsideDirective, IusCalendarFooterDirective, IusCardFooterDirective, IusCardHeaderDirective, IusDocViewerActionsDirective, IusDocViewerAsideDirective, IusDocViewerBodyDirective, IusDrawerFooterDirective, IusDrawerHeaderActionsDirective, IusDrawerTitleDirective, IusDropdownTriggerDirective, IusEntityRowLabelDirective, IusEntityRowSublabelDirective, IusFooterStatusActionDirective, IusFormFooterDirective, IusInsightActionsDirective, IusKanbanCardBodyDirective, IusKanbanCardLeadingDirective, IusKanbanCardTrailingDirective, IusListCardLeadingDirective, IusListCardOverlineDirective, IusListCardParagraphDirective, IusListCardSubtitleDirective, IusListCardTitleDirective, IusListViewFiltersDirective, IusListViewFooterEndDirective, IusListViewFooterStartDirective, IusListViewHeaderEndDirective, IusListViewHeaderStartDirective, IusListViewToolbarDirective, IusMenuItemTrailingDirective, IusModalFooterDirective, IusNavRailBrandDirective, IusPageHeaderActionsDirective, IusPageHeaderBreadcrumbDirective, IusPageHeaderOverlineDirective, IusPageHeaderSubtitleDirective, IusPageHeaderTitleDirective, IusPageHeaderToolbarDirective, IusPersonItemNameDirective, IusPersonItemTrailingDirective, IusSectionTitleActionDirective, IusSettingsNavFooterDirective, IusSettingsNavHeaderDirective, IusStageDetailFooterDirective, IusStageDetailHeaderActionsDirective, IusStageDetailMetaDirective, IusStatCaptionDirective, IusStatDeltaDirective, IusStatDeltaLabelDirective, IusStatLabelDirective, IusStatSparklineDirective, IusTagPrefixDirective, IusTagSuffixDirective, IusToastActionDirective, IusUserMenuFooterDirective, KINDS, KIND_DEF, KIND_FALLBACK, KanbanBoardComponent, KanbanCardComponent, KanbanColumnComponent, LineChartComponent, LinearProgressBarComponent, ListCardComponent, ListViewComponent, LoadingComponent, LoadingMarkComponent, MenuComponent, MenuItemComponent, ModalComponent, MultiTextFieldComponent, NATURALEZA_DEF, NavRailComponent, NavUserComponent, NumberFieldComponent, ORB_PERIODS, OauthButtonComponent, OptionItemComponent, PageHeaderComponent, PaginationComponent, PartyListComponent, PersonItemComponent, PersonPickerComponent, PlanUsageItemComponent, PopoverComponent, QueryBuilderComponent, RadioComponent, RepeatableFieldComponent, SOURCE_FUENTE, SOURCE_LABEL, STATUS_TONES, STATUS_VOCAB, STATUS_VOCABS, STATUS_VOCABS_PENDING, ScheduleListComponent, ScrollAreaComponent, SearchBarComponent, SectionHeaderComponent, SectionTitleComponent, SegmentGroupComponent, SegmentedControlComponent, SelectComponent, SelectNumberComponent, SelectionFieldComponent, SettingsNavComponent, ShowMoreComponent, SkeletonComponent, SparklineComponent, SplitterComponent, StageDetailDrawerComponent, StatComponent, StatGroupComponent, StatusChipComponent, StatusStateComponent, StepperComponent, SwitchComponent, TableComponent, TabsComponent, TagComponent, TextAreaComponent, TextButtonComponent, TextComponent, TextFieldComponent, TimePanelComponent, TimelineComponent, ToastComponent, ToastService, ToastViewportComponent, TooltipComponent, UserMenuComponent, WizardComponent, WizardController, WizardNavComponent, categoryColors, categoryOptions, chartAxisTicks, chartFormatValue, chartLinearPath, chartNiceNum, chartPath, chartPrefersReducedMotion, chartSmoothPath, chartToneAt, chartToneVar, createWizard, eventKindOptions, extOf, formatBytes, formatDate, formatTime, fuenteColors, fuenteOptions, iusSegColor, kindHue, kindIcon, kindLabel, kindMeta, kindOptions, naturalezaMeta, naturalezaOptions, normalizeTipo, pose, poseIso, poseSpeaking, poseThinking, renderCubeSvg, resolveActuacion, resolveCategoryHue, resolveEventIcon, resolveFuente, resolveIllustration, resolveKind, resolveStatus, resolveViewKind, sourceIcon, sourceMeta, statusOptions, statusOrder, statusToneVars, statusVocab, timeFromDate, voiceEnv };
|
|
27354
27709
|
//# sourceMappingURL=litigiovirtual-ius-design-components.mjs.map
|