@kaufmann-lab/ui 0.1.25 → 0.1.27
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.
- package/README.md +19 -12
- package/fesm2022/kaufmann-lab-ui-business.mjs +2 -2
- package/fesm2022/kaufmann-lab-ui-business.mjs.map +1 -1
- package/fesm2022/kaufmann-lab-ui-core.mjs +402 -49
- package/fesm2022/kaufmann-lab-ui-core.mjs.map +1 -1
- package/fesm2022/kaufmann-lab-ui-map.mjs +23 -4
- package/fesm2022/kaufmann-lab-ui-map.mjs.map +1 -1
- package/package.json +6 -1
- package/src/tokens/base.css +15 -0
- package/types/kaufmann-lab-ui-core.d.ts +250 -16
- package/types/kaufmann-lab-ui-map.d.ts +16 -3
|
@@ -1004,6 +1004,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
1004
1004
|
* títulos protagonistas de pantalla completa (ej. bienvenida del home vía
|
|
1005
1005
|
* `kf-page-header[size=xl|xxl]`) — ver tokens/base.css.
|
|
1006
1006
|
*
|
|
1007
|
+
* `body-sm`/`body-sm-muted` son el paso intermedio entre `body` (1rem) y
|
|
1008
|
+
* `caption` (0.75rem): 0.875rem (`--kf-font-size-body-sm`), para texto de
|
|
1009
|
+
* apoyo en filas y paneles densos. Mismo criterio de color que `body`/
|
|
1010
|
+
* `body-muted`: `body-sm` hereda el color de texto y `body-sm-muted` usa el
|
|
1011
|
+
* atenuado.
|
|
1012
|
+
*
|
|
1007
1013
|
* `overline`/`overline-strong` son para el patrón "texto chico en mayúsculas
|
|
1008
1014
|
* junto a un dato" (ej. el label "RUC" de `kf-company-selector`, el badge de
|
|
1009
1015
|
* `kf-admin-badge`) — antes de estas variantes, ese patrón se reimplementaba
|
|
@@ -1015,6 +1021,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
1015
1021
|
*
|
|
1016
1022
|
* <kf-text as="h1" variant="title-lg">Bienvenido de nuevo</kf-text>
|
|
1017
1023
|
* <kf-text as="p" variant="body-muted">Ingresá con tu cuenta corporativa.</kf-text>
|
|
1024
|
+
* <kf-text as="span" variant="body-sm">Última actualización hace 5 min</kf-text>
|
|
1018
1025
|
* <kf-text as="span" variant="caption" tone="error">Campo obligatorio</kf-text>
|
|
1019
1026
|
* <kf-text as="span" variant="overline">RUC</kf-text>
|
|
1020
1027
|
* <kf-text as="span" variant="overline-strong" tone="warn">Vista administrador</kf-text>
|
|
@@ -1052,11 +1059,11 @@ class Text {
|
|
|
1052
1059
|
return classes.join(' ');
|
|
1053
1060
|
}
|
|
1054
1061
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Text, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1055
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Text, isStandalone: true, selector: "kf-text", inputs: { as: { classPropertyName: "as", publicName: "as", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!--\n Una sola proyecci\u00F3n compartida (ng-template + ngTemplateOutlet) en vez\n de un <ng-content> por cada rama del @switch: Angular solo conecta la\n proyecci\u00F3n real del consumidor a la PRIMERA instancia de <ng-content>\n que encuentra en el \u00E1rbol de compilaci\u00F3n \u2014 con un <ng-content> por\n rama, todas menos una quedan vac\u00EDas en runtime (bug detectado por\n Text.spec.ts, no algo documentado a simple vista en los docs de Angular).\n-->\n<ng-template #projected><ng-content /></ng-template>\n@switch (tag()) {\n @case ('h1') {\n <h1 [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></h1>\n }\n @case ('h2') {\n <h2 [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></h2>\n }\n @case ('h3') {\n <h3 [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></h3>\n }\n @case ('span') {\n <span [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></span>\n }\n @default {\n <p [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></p>\n }\n}\n", styles: [".kf-overline-text{font-family:var(--kf-font-title);font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}.kf-caption-text{font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}:host{display:contents}h1,h2,h3,p,span{margin:0;font-family:var(--kf-font-body);color:var(--kf-color-text)}.kf-text--title-xxl{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-xxl);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-xl{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-xl);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-lg{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-lg);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-md{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-md);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-sm{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-sm);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--body{font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-body)}.kf-text--body-muted{font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}.kf-text--overline-strong{font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-title);letter-spacing:.02em;text-transform:uppercase;color:var(--kf-color-text-muted)}.kf-text--ok{color:var(--kf-color-success-strong)}.kf-text--warn{color:var(--kf-color-warning-strong)}.kf-text--error{color:var(--kf-color-error-strong)}.kf-text--info{color:var(--kf-color-info-strong)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
1062
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Text, isStandalone: true, selector: "kf-text", inputs: { as: { classPropertyName: "as", publicName: "as", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!--\n Una sola proyecci\u00F3n compartida (ng-template + ngTemplateOutlet) en vez\n de un <ng-content> por cada rama del @switch: Angular solo conecta la\n proyecci\u00F3n real del consumidor a la PRIMERA instancia de <ng-content>\n que encuentra en el \u00E1rbol de compilaci\u00F3n \u2014 con un <ng-content> por\n rama, todas menos una quedan vac\u00EDas en runtime (bug detectado por\n Text.spec.ts, no algo documentado a simple vista en los docs de Angular).\n-->\n<ng-template #projected><ng-content /></ng-template>\n@switch (tag()) {\n @case ('h1') {\n <h1 [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></h1>\n }\n @case ('h2') {\n <h2 [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></h2>\n }\n @case ('h3') {\n <h3 [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></h3>\n }\n @case ('span') {\n <span [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></span>\n }\n @default {\n <p [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></p>\n }\n}\n", styles: [".kf-overline-text{font-family:var(--kf-font-title);font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}.kf-caption-text{font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}:host{display:contents}h1,h2,h3,p,span{margin:0;font-family:var(--kf-font-body);color:var(--kf-color-text)}.kf-text--title-xxl{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-xxl);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-xl{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-xl);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-lg{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-lg);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-md{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-md);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-sm{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-sm);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--body{font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-body)}.kf-text--body-muted{font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}.kf-text--body-sm{font-size:var(--kf-font-size-body-sm);font-weight:var(--kf-font-weight-body)}.kf-text--body-sm-muted{font-size:var(--kf-font-size-body-sm);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}.kf-text--overline-strong{font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-title);letter-spacing:.02em;text-transform:uppercase;color:var(--kf-color-text-muted)}.kf-text--ok{color:var(--kf-color-success-strong)}.kf-text--warn{color:var(--kf-color-warning-strong)}.kf-text--error{color:var(--kf-color-error-strong)}.kf-text--info{color:var(--kf-color-info-strong)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
1056
1063
|
}
|
|
1057
1064
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Text, decorators: [{
|
|
1058
1065
|
type: Component,
|
|
1059
|
-
args: [{ selector: 'kf-text', imports: [NgTemplateOutlet], template: "<!--\n Una sola proyecci\u00F3n compartida (ng-template + ngTemplateOutlet) en vez\n de un <ng-content> por cada rama del @switch: Angular solo conecta la\n proyecci\u00F3n real del consumidor a la PRIMERA instancia de <ng-content>\n que encuentra en el \u00E1rbol de compilaci\u00F3n \u2014 con un <ng-content> por\n rama, todas menos una quedan vac\u00EDas en runtime (bug detectado por\n Text.spec.ts, no algo documentado a simple vista en los docs de Angular).\n-->\n<ng-template #projected><ng-content /></ng-template>\n@switch (tag()) {\n @case ('h1') {\n <h1 [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></h1>\n }\n @case ('h2') {\n <h2 [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></h2>\n }\n @case ('h3') {\n <h3 [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></h3>\n }\n @case ('span') {\n <span [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></span>\n }\n @default {\n <p [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></p>\n }\n}\n", styles: [".kf-overline-text{font-family:var(--kf-font-title);font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}.kf-caption-text{font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}:host{display:contents}h1,h2,h3,p,span{margin:0;font-family:var(--kf-font-body);color:var(--kf-color-text)}.kf-text--title-xxl{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-xxl);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-xl{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-xl);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-lg{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-lg);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-md{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-md);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-sm{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-sm);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--body{font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-body)}.kf-text--body-muted{font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}.kf-text--overline-strong{font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-title);letter-spacing:.02em;text-transform:uppercase;color:var(--kf-color-text-muted)}.kf-text--ok{color:var(--kf-color-success-strong)}.kf-text--warn{color:var(--kf-color-warning-strong)}.kf-text--error{color:var(--kf-color-error-strong)}.kf-text--info{color:var(--kf-color-info-strong)}\n"] }]
|
|
1066
|
+
args: [{ selector: 'kf-text', imports: [NgTemplateOutlet], template: "<!--\n Una sola proyecci\u00F3n compartida (ng-template + ngTemplateOutlet) en vez\n de un <ng-content> por cada rama del @switch: Angular solo conecta la\n proyecci\u00F3n real del consumidor a la PRIMERA instancia de <ng-content>\n que encuentra en el \u00E1rbol de compilaci\u00F3n \u2014 con un <ng-content> por\n rama, todas menos una quedan vac\u00EDas en runtime (bug detectado por\n Text.spec.ts, no algo documentado a simple vista en los docs de Angular).\n-->\n<ng-template #projected><ng-content /></ng-template>\n@switch (tag()) {\n @case ('h1') {\n <h1 [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></h1>\n }\n @case ('h2') {\n <h2 [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></h2>\n }\n @case ('h3') {\n <h3 [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></h3>\n }\n @case ('span') {\n <span [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></span>\n }\n @default {\n <p [class]=\"hostClass()\"><ng-container [ngTemplateOutlet]=\"projected\" /></p>\n }\n}\n", styles: [".kf-overline-text{font-family:var(--kf-font-title);font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}.kf-caption-text{font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}:host{display:contents}h1,h2,h3,p,span{margin:0;font-family:var(--kf-font-body);color:var(--kf-color-text)}.kf-text--title-xxl{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-xxl);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-xl{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-xl);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-lg{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-lg);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-md{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-md);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-sm{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-sm);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--body{font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-body)}.kf-text--body-muted{font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}.kf-text--body-sm{font-size:var(--kf-font-size-body-sm);font-weight:var(--kf-font-weight-body)}.kf-text--body-sm-muted{font-size:var(--kf-font-size-body-sm);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}.kf-text--overline-strong{font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-title);letter-spacing:.02em;text-transform:uppercase;color:var(--kf-color-text-muted)}.kf-text--ok{color:var(--kf-color-success-strong)}.kf-text--warn{color:var(--kf-color-warning-strong)}.kf-text--error{color:var(--kf-color-error-strong)}.kf-text--info{color:var(--kf-color-info-strong)}\n"] }]
|
|
1060
1067
|
}], propDecorators: { as: [{ type: i0.Input, args: [{ isSignal: true, alias: "as", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }] } });
|
|
1061
1068
|
|
|
1062
1069
|
/**
|
|
@@ -1246,6 +1253,15 @@ const TONE_ICON = {
|
|
|
1246
1253
|
* sobra.
|
|
1247
1254
|
*
|
|
1248
1255
|
* <kf-alert variant="bar" tone="warn" title="Modo suplantación">Viendo como Ana Pérez.</kf-alert>
|
|
1256
|
+
*
|
|
1257
|
+
* Los elementos con el atributo `kfAlertActions` se proyectan en una fila
|
|
1258
|
+
* propia bajo el mensaje (con salto de línea si no caben, también en la
|
|
1259
|
+
* variante `bar`). Sin ellos la fila no existe y el aviso queda igual.
|
|
1260
|
+
*
|
|
1261
|
+
* <kf-alert tone="warn" title="SOAT por vencer">
|
|
1262
|
+
* Vence el 15/08.
|
|
1263
|
+
* <div kfAlertActions><kf-button size="sm">Renovar</kf-button></div>
|
|
1264
|
+
* </kf-alert>
|
|
1249
1265
|
*/
|
|
1250
1266
|
class Alert {
|
|
1251
1267
|
tone = input('info', /* @ts-ignore */
|
|
@@ -1269,11 +1285,11 @@ class Alert {
|
|
|
1269
1285
|
toneIcon = computed(() => TONE_ICON[this.tone()], /* @ts-ignore */
|
|
1270
1286
|
...(ngDevMode ? [{ debugName: "toneIcon" }] : /* istanbul ignore next */ []));
|
|
1271
1287
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Alert, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1272
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Alert, isStandalone: true, selector: "kf-alert", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, ngImport: i0, template: "@if (open()) {\n <div\n class=\"kf-alert\"\n [class]=\"'kf-alert--' + tone()\"\n [class.kf-alert--bar]=\"variant() === 'bar'\"\n [attr.role]=\"ariaRole()\"\n >\n <kf-icon class=\"kf-alert__icon\" [name]=\"toneIcon()\" size=\"sm\" />\n <div class=\"kf-alert__body\">\n @if (title()) {\n <p class=\"kf-alert__title\">{{ title() }}</p>\n }\n <div class=\"kf-alert__message\"><ng-content /></div>\n </div>\n @if (dismissible()) {\n <button\n type=\"button\"\n class=\"kf-alert__close\"\n aria-label=\"Cerrar aviso\"\n (click)=\"open.set(false)\"\n >\n <kf-icon name=\"x\" size=\"sm\" />\n </button>\n }\n </div>\n}\n", styles: [":host{display:block;font-family:var(--kf-font-body)}.kf-alert{display:flex;align-items:flex-start;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);border:1px solid transparent;border-radius:var(--kf-radius-sm);font-size:.9rem}.kf-alert--info{background:var(--kf-color-info-soft);border-color:var(--kf-color-info);color:var(--kf-color-info-strong)}.kf-alert--ok{background:var(--kf-color-success-soft);border-color:var(--kf-color-success);color:var(--kf-color-success-strong)}.kf-alert--warn{background:var(--kf-color-warning-soft);border-color:var(--kf-color-warning);color:var(--kf-color-warning-strong)}.kf-alert--error{background:var(--kf-color-error-soft);border-color:var(--kf-color-error);color:var(--kf-color-error-strong)}.kf-alert__body{flex:1;min-width:0}.kf-alert__title{margin:0;font-family:var(--kf-font-title);font-weight:700}.kf-alert__message{color:inherit}.kf-alert__close{flex:none;display:inline-flex;padding:2px;border:none;background:transparent;color:inherit;border-radius:var(--kf-radius-xs);cursor:pointer;opacity:.7}.kf-alert__close:hover{opacity:1}.kf-alert__close:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-alert--bar{align-items:center;padding:var(--kf-space-xs) var(--kf-space-md);border-width:1px 0;border-radius:0;font-size:.875rem}.kf-alert--bar .kf-alert__body{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--kf-space-xs)}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }] });
|
|
1288
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Alert, isStandalone: true, selector: "kf-alert", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, ngImport: i0, template: "@if (open()) {\n <div\n class=\"kf-alert\"\n [class]=\"'kf-alert--' + tone()\"\n [class.kf-alert--bar]=\"variant() === 'bar'\"\n [attr.role]=\"ariaRole()\"\n >\n <kf-icon class=\"kf-alert__icon\" [name]=\"toneIcon()\" size=\"sm\" />\n <div class=\"kf-alert__body\">\n @if (title()) {\n <p class=\"kf-alert__title\">{{ title() }}</p>\n }\n <div class=\"kf-alert__message\"><ng-content /></div>\n <div class=\"kf-alert__actions\"><ng-content select=\"[kfAlertActions]\" /></div>\n </div>\n @if (dismissible()) {\n <button\n type=\"button\"\n class=\"kf-alert__close\"\n aria-label=\"Cerrar aviso\"\n (click)=\"open.set(false)\"\n >\n <kf-icon name=\"x\" size=\"sm\" />\n </button>\n }\n </div>\n}\n", styles: [":host{display:block;font-family:var(--kf-font-body)}.kf-alert{display:flex;align-items:flex-start;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);border:1px solid transparent;border-radius:var(--kf-radius-sm);font-size:.9rem}.kf-alert--info{background:var(--kf-color-info-soft);border-color:var(--kf-color-info);color:var(--kf-color-info-strong)}.kf-alert--ok{background:var(--kf-color-success-soft);border-color:var(--kf-color-success);color:var(--kf-color-success-strong)}.kf-alert--warn{background:var(--kf-color-warning-soft);border-color:var(--kf-color-warning);color:var(--kf-color-warning-strong)}.kf-alert--error{background:var(--kf-color-error-soft);border-color:var(--kf-color-error);color:var(--kf-color-error-strong)}.kf-alert__body{flex:1;min-width:0}.kf-alert__title{margin:0;font-family:var(--kf-font-title);font-weight:700}.kf-alert__message{color:inherit}.kf-alert__actions{display:flex;flex-wrap:wrap;gap:var(--kf-space-sm);min-width:0;padding-block-start:var(--kf-space-sm)}.kf-alert__actions:empty{display:none}.kf-alert__actions>*{max-width:100%;min-width:0}.kf-alert__close{position:relative;flex:none;display:inline-flex;padding:2px;border:none;background:transparent;color:inherit;border-radius:var(--kf-radius-xs);cursor:pointer;opacity:.7}.kf-alert__close:after{content:\"\";position:absolute;top:50%;left:calc(-1 * var(--kf-space-sm));width:44px;height:44px;transform:translateY(-50%)}.kf-alert__close:hover{opacity:1}.kf-alert__close:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-alert--bar{align-items:center;padding:var(--kf-space-xs) var(--kf-space-md);border-width:1px 0;border-radius:0;font-size:.875rem}.kf-alert--bar .kf-alert__body{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--kf-space-xs)}.kf-alert--bar .kf-alert__actions{flex-basis:100%}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }] });
|
|
1273
1289
|
}
|
|
1274
1290
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Alert, decorators: [{
|
|
1275
1291
|
type: Component,
|
|
1276
|
-
args: [{ selector: 'kf-alert', imports: [Icon], template: "@if (open()) {\n <div\n class=\"kf-alert\"\n [class]=\"'kf-alert--' + tone()\"\n [class.kf-alert--bar]=\"variant() === 'bar'\"\n [attr.role]=\"ariaRole()\"\n >\n <kf-icon class=\"kf-alert__icon\" [name]=\"toneIcon()\" size=\"sm\" />\n <div class=\"kf-alert__body\">\n @if (title()) {\n <p class=\"kf-alert__title\">{{ title() }}</p>\n }\n <div class=\"kf-alert__message\"><ng-content /></div>\n </div>\n @if (dismissible()) {\n <button\n type=\"button\"\n class=\"kf-alert__close\"\n aria-label=\"Cerrar aviso\"\n (click)=\"open.set(false)\"\n >\n <kf-icon name=\"x\" size=\"sm\" />\n </button>\n }\n </div>\n}\n", styles: [":host{display:block;font-family:var(--kf-font-body)}.kf-alert{display:flex;align-items:flex-start;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);border:1px solid transparent;border-radius:var(--kf-radius-sm);font-size:.9rem}.kf-alert--info{background:var(--kf-color-info-soft);border-color:var(--kf-color-info);color:var(--kf-color-info-strong)}.kf-alert--ok{background:var(--kf-color-success-soft);border-color:var(--kf-color-success);color:var(--kf-color-success-strong)}.kf-alert--warn{background:var(--kf-color-warning-soft);border-color:var(--kf-color-warning);color:var(--kf-color-warning-strong)}.kf-alert--error{background:var(--kf-color-error-soft);border-color:var(--kf-color-error);color:var(--kf-color-error-strong)}.kf-alert__body{flex:1;min-width:0}.kf-alert__title{margin:0;font-family:var(--kf-font-title);font-weight:700}.kf-alert__message{color:inherit}.kf-alert__close{flex:none;display:inline-flex;padding:2px;border:none;background:transparent;color:inherit;border-radius:var(--kf-radius-xs);cursor:pointer;opacity:.7}.kf-alert__close:hover{opacity:1}.kf-alert__close:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-alert--bar{align-items:center;padding:var(--kf-space-xs) var(--kf-space-md);border-width:1px 0;border-radius:0;font-size:.875rem}.kf-alert--bar .kf-alert__body{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--kf-space-xs)}\n"] }]
|
|
1292
|
+
args: [{ selector: 'kf-alert', imports: [Icon], template: "@if (open()) {\n <div\n class=\"kf-alert\"\n [class]=\"'kf-alert--' + tone()\"\n [class.kf-alert--bar]=\"variant() === 'bar'\"\n [attr.role]=\"ariaRole()\"\n >\n <kf-icon class=\"kf-alert__icon\" [name]=\"toneIcon()\" size=\"sm\" />\n <div class=\"kf-alert__body\">\n @if (title()) {\n <p class=\"kf-alert__title\">{{ title() }}</p>\n }\n <div class=\"kf-alert__message\"><ng-content /></div>\n <div class=\"kf-alert__actions\"><ng-content select=\"[kfAlertActions]\" /></div>\n </div>\n @if (dismissible()) {\n <button\n type=\"button\"\n class=\"kf-alert__close\"\n aria-label=\"Cerrar aviso\"\n (click)=\"open.set(false)\"\n >\n <kf-icon name=\"x\" size=\"sm\" />\n </button>\n }\n </div>\n}\n", styles: [":host{display:block;font-family:var(--kf-font-body)}.kf-alert{display:flex;align-items:flex-start;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);border:1px solid transparent;border-radius:var(--kf-radius-sm);font-size:.9rem}.kf-alert--info{background:var(--kf-color-info-soft);border-color:var(--kf-color-info);color:var(--kf-color-info-strong)}.kf-alert--ok{background:var(--kf-color-success-soft);border-color:var(--kf-color-success);color:var(--kf-color-success-strong)}.kf-alert--warn{background:var(--kf-color-warning-soft);border-color:var(--kf-color-warning);color:var(--kf-color-warning-strong)}.kf-alert--error{background:var(--kf-color-error-soft);border-color:var(--kf-color-error);color:var(--kf-color-error-strong)}.kf-alert__body{flex:1;min-width:0}.kf-alert__title{margin:0;font-family:var(--kf-font-title);font-weight:700}.kf-alert__message{color:inherit}.kf-alert__actions{display:flex;flex-wrap:wrap;gap:var(--kf-space-sm);min-width:0;padding-block-start:var(--kf-space-sm)}.kf-alert__actions:empty{display:none}.kf-alert__actions>*{max-width:100%;min-width:0}.kf-alert__close{position:relative;flex:none;display:inline-flex;padding:2px;border:none;background:transparent;color:inherit;border-radius:var(--kf-radius-xs);cursor:pointer;opacity:.7}.kf-alert__close:after{content:\"\";position:absolute;top:50%;left:calc(-1 * var(--kf-space-sm));width:44px;height:44px;transform:translateY(-50%)}.kf-alert__close:hover{opacity:1}.kf-alert__close:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-alert--bar{align-items:center;padding:var(--kf-space-xs) var(--kf-space-md);border-width:1px 0;border-radius:0;font-size:.875rem}.kf-alert--bar .kf-alert__body{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--kf-space-xs)}.kf-alert--bar .kf-alert__actions{flex-basis:100%}\n"] }]
|
|
1277
1293
|
}], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }] } });
|
|
1278
1294
|
|
|
1279
1295
|
/**
|
|
@@ -1855,7 +1871,7 @@ class Card {
|
|
|
1855
1871
|
/** Cubre el cuerpo con un bloque de carga conservando las dimensiones. */
|
|
1856
1872
|
loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1857
1873
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Card, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1858
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: Card, isStandalone: true, selector: "kf-card", inputs: { flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kf-card--flush": "flush()", "class.kf-card--loading": "loading()", "attr.aria-busy": "loading() ? 'true' : null", "class.kf-card--gap-xs": "gap() === 'xs'", "class.kf-card--gap-sm": "gap() === 'sm'", "class.kf-card--gap-md": "gap() === 'md'", "class.kf-card--gap-lg": "gap() === 'lg'", "class.kf-card--gap-xl": "gap() === 'xl'" } }, ngImport: i0, template: "<ng-content select=\"[kf-card-media]\" />\n<div\n class=\"kf-card__body\"\n [class.kf-card__body--loading]=\"loading()\"\n [class.kf-bone-overlay]=\"loading()\"\n>\n <ng-content />\n</div>\n<ng-content select=\"[kf-card-actions]\" />\n", styles: [".kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-bone-shimmer 1.4s ease infinite}.kf-bone{display:block;box-sizing:border-box;width:var(--kf-bone-width, 60%);max-width:100%;overflow:hidden;white-space:nowrap;border-radius:var(--kf-radius-xs);-webkit-user-select:none;user-select:none;pointer-events:none}.kf-bone.kf-bone{color:transparent!important}.kf-bone>*{visibility:hidden}@keyframes kf-bone-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{animation:none;background:var(--kf-color-border)}}:host{display:flex;flex-direction:column;background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-xs);overflow:hidden}:host.kf-card--flush{box-shadow:none}.kf-card__body{display:flex;flex-direction:column;gap:var(--kf-space-md);padding:var(--kf-space-md);flex:1 1 auto}:host.kf-card--gap-xs .kf-card__body{gap:var(--kf-space-xs)}:host.kf-card--gap-sm .kf-card__body{gap:var(--kf-space-sm)}:host.kf-card--gap-md .kf-card__body{gap:var(--kf-space-md)}:host.kf-card--gap-lg .kf-card__body{gap:var(--kf-space-lg)}:host.kf-card--gap-xl .kf-card__body{gap:var(--kf-space-xl)}::ng-deep [kf-card-media]{display:block;inline-size:100%;block-size:auto;object-fit:cover}::ng-deep [kf-card-actions]{display:flex;align-items:center;justify-content:flex-end;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);border-top:1px solid var(--kf-color-border)}.kf-card__body--loading{position:relative;visibility:hidden}.kf-card__body--loading:after{content:\"\";visibility:visible;position:absolute;inset:var(--kf-space-md);border-radius:var(--kf-radius-sm)}:host.kf-card--loading ::ng-deep [kf-card-media],:host.kf-card--loading ::ng-deep [kf-card-actions]{visibility:hidden}\n"] });
|
|
1874
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: Card, isStandalone: true, selector: "kf-card", inputs: { flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kf-card--flush": "flush()", "class.kf-card--loading": "loading()", "attr.aria-busy": "loading() ? 'true' : null", "class.kf-card--gap-xs": "gap() === 'xs'", "class.kf-card--gap-sm": "gap() === 'sm'", "class.kf-card--gap-md": "gap() === 'md'", "class.kf-card--gap-lg": "gap() === 'lg'", "class.kf-card--gap-xl": "gap() === 'xl'" } }, ngImport: i0, template: "<ng-content select=\"[kf-card-media]\" />\n<div\n class=\"kf-card__body\"\n [class.kf-card__body--loading]=\"loading()\"\n [class.kf-bone-overlay]=\"loading()\"\n>\n <ng-content />\n</div>\n<ng-content select=\"[kf-card-actions]\" />\n", styles: [".kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-bone-shimmer 1.4s ease infinite}.kf-bone{display:block;box-sizing:border-box;width:var(--kf-bone-width, 60%);max-width:100%;overflow:hidden;white-space:nowrap;border-radius:var(--kf-radius-xs);-webkit-user-select:none;user-select:none;pointer-events:none}.kf-bone.kf-bone{color:transparent!important;-webkit-text-fill-color:transparent}.kf-bone>*{visibility:hidden}@keyframes kf-bone-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{animation:none;background:var(--kf-color-border)}}:host{display:flex;flex-direction:column;background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-xs);overflow:hidden}:host.kf-card--flush{box-shadow:none}.kf-card__body{display:flex;flex-direction:column;gap:var(--kf-space-md);padding:var(--kf-space-md);flex:1 1 auto}:host.kf-card--gap-xs .kf-card__body{gap:var(--kf-space-xs)}:host.kf-card--gap-sm .kf-card__body{gap:var(--kf-space-sm)}:host.kf-card--gap-md .kf-card__body{gap:var(--kf-space-md)}:host.kf-card--gap-lg .kf-card__body{gap:var(--kf-space-lg)}:host.kf-card--gap-xl .kf-card__body{gap:var(--kf-space-xl)}::ng-deep [kf-card-media]{display:block;inline-size:100%;block-size:auto;object-fit:cover}::ng-deep [kf-card-actions]{display:flex;align-items:center;justify-content:flex-end;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);border-top:1px solid var(--kf-color-border)}.kf-card__body--loading{position:relative;visibility:hidden}.kf-card__body--loading:after{content:\"\";visibility:visible;position:absolute;inset:var(--kf-space-md);border-radius:var(--kf-radius-sm)}:host.kf-card--loading ::ng-deep [kf-card-media],:host.kf-card--loading ::ng-deep [kf-card-actions]{visibility:hidden}\n"] });
|
|
1859
1875
|
}
|
|
1860
1876
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Card, decorators: [{
|
|
1861
1877
|
type: Component,
|
|
@@ -1868,7 +1884,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
1868
1884
|
'[class.kf-card--gap-md]': "gap() === 'md'",
|
|
1869
1885
|
'[class.kf-card--gap-lg]': "gap() === 'lg'",
|
|
1870
1886
|
'[class.kf-card--gap-xl]': "gap() === 'xl'",
|
|
1871
|
-
}, template: "<ng-content select=\"[kf-card-media]\" />\n<div\n class=\"kf-card__body\"\n [class.kf-card__body--loading]=\"loading()\"\n [class.kf-bone-overlay]=\"loading()\"\n>\n <ng-content />\n</div>\n<ng-content select=\"[kf-card-actions]\" />\n", styles: [".kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-bone-shimmer 1.4s ease infinite}.kf-bone{display:block;box-sizing:border-box;width:var(--kf-bone-width, 60%);max-width:100%;overflow:hidden;white-space:nowrap;border-radius:var(--kf-radius-xs);-webkit-user-select:none;user-select:none;pointer-events:none}.kf-bone.kf-bone{color:transparent!important}.kf-bone>*{visibility:hidden}@keyframes kf-bone-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{animation:none;background:var(--kf-color-border)}}:host{display:flex;flex-direction:column;background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-xs);overflow:hidden}:host.kf-card--flush{box-shadow:none}.kf-card__body{display:flex;flex-direction:column;gap:var(--kf-space-md);padding:var(--kf-space-md);flex:1 1 auto}:host.kf-card--gap-xs .kf-card__body{gap:var(--kf-space-xs)}:host.kf-card--gap-sm .kf-card__body{gap:var(--kf-space-sm)}:host.kf-card--gap-md .kf-card__body{gap:var(--kf-space-md)}:host.kf-card--gap-lg .kf-card__body{gap:var(--kf-space-lg)}:host.kf-card--gap-xl .kf-card__body{gap:var(--kf-space-xl)}::ng-deep [kf-card-media]{display:block;inline-size:100%;block-size:auto;object-fit:cover}::ng-deep [kf-card-actions]{display:flex;align-items:center;justify-content:flex-end;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);border-top:1px solid var(--kf-color-border)}.kf-card__body--loading{position:relative;visibility:hidden}.kf-card__body--loading:after{content:\"\";visibility:visible;position:absolute;inset:var(--kf-space-md);border-radius:var(--kf-radius-sm)}:host.kf-card--loading ::ng-deep [kf-card-media],:host.kf-card--loading ::ng-deep [kf-card-actions]{visibility:hidden}\n"] }]
|
|
1887
|
+
}, template: "<ng-content select=\"[kf-card-media]\" />\n<div\n class=\"kf-card__body\"\n [class.kf-card__body--loading]=\"loading()\"\n [class.kf-bone-overlay]=\"loading()\"\n>\n <ng-content />\n</div>\n<ng-content select=\"[kf-card-actions]\" />\n", styles: [".kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-bone-shimmer 1.4s ease infinite}.kf-bone{display:block;box-sizing:border-box;width:var(--kf-bone-width, 60%);max-width:100%;overflow:hidden;white-space:nowrap;border-radius:var(--kf-radius-xs);-webkit-user-select:none;user-select:none;pointer-events:none}.kf-bone.kf-bone{color:transparent!important;-webkit-text-fill-color:transparent}.kf-bone>*{visibility:hidden}@keyframes kf-bone-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{animation:none;background:var(--kf-color-border)}}:host{display:flex;flex-direction:column;background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-xs);overflow:hidden}:host.kf-card--flush{box-shadow:none}.kf-card__body{display:flex;flex-direction:column;gap:var(--kf-space-md);padding:var(--kf-space-md);flex:1 1 auto}:host.kf-card--gap-xs .kf-card__body{gap:var(--kf-space-xs)}:host.kf-card--gap-sm .kf-card__body{gap:var(--kf-space-sm)}:host.kf-card--gap-md .kf-card__body{gap:var(--kf-space-md)}:host.kf-card--gap-lg .kf-card__body{gap:var(--kf-space-lg)}:host.kf-card--gap-xl .kf-card__body{gap:var(--kf-space-xl)}::ng-deep [kf-card-media]{display:block;inline-size:100%;block-size:auto;object-fit:cover}::ng-deep [kf-card-actions]{display:flex;align-items:center;justify-content:flex-end;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);border-top:1px solid var(--kf-color-border)}.kf-card__body--loading{position:relative;visibility:hidden}.kf-card__body--loading:after{content:\"\";visibility:visible;position:absolute;inset:var(--kf-space-md);border-radius:var(--kf-radius-sm)}:host.kf-card--loading ::ng-deep [kf-card-media],:host.kf-card--loading ::ng-deep [kf-card-actions]{visibility:hidden}\n"] }]
|
|
1872
1888
|
}], propDecorators: { flush: [{ type: i0.Input, args: [{ isSignal: true, alias: "flush", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });
|
|
1873
1889
|
|
|
1874
1890
|
/**
|
|
@@ -2043,7 +2059,7 @@ class Checkbox {
|
|
|
2043
2059
|
useExisting: forwardRef(() => Checkbox),
|
|
2044
2060
|
multi: true,
|
|
2045
2061
|
},
|
|
2046
|
-
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<label class=\"kf-checkbox\" [class.kf-checkbox--disabled]=\"disabled()\">\n <input\n #inputRef\n type=\"checkbox\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [attr.aria-invalid]=\"invalid() ? true : null\"\n (change)=\"onChange($event)\"\n (blur)=\"onTouched()\"\n />\n <span\n class=\"kf-checkbox__box kf-checkbox-box\"\n [class.kf-checkbox__box--invalid]=\"invalid()\"\n ></span>\n @if (label()) {\n <span class=\"kf-checkbox__label\">{{ label() }}</span>\n }\n</label>\n", styles: [".kf-checkbox-box{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--kf-space-md);height:var(--kf-space-md);border:1px solid var(--kf-color-border-control);border-radius:var(--kf-radius-xs);background:var(--kf-color-white);transition:background .14s,border-color .14s;position:relative}.kf-checkbox-box--checked{background:var(--kf-color-primary);border-color:var(--kf-color-primary)}:host{display:inline-
|
|
2062
|
+
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<label class=\"kf-checkbox\" [class.kf-checkbox--disabled]=\"disabled()\">\n <input\n #inputRef\n type=\"checkbox\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [attr.aria-invalid]=\"invalid() ? true : null\"\n (change)=\"onChange($event)\"\n (blur)=\"onTouched()\"\n />\n <span\n class=\"kf-checkbox__box kf-checkbox-box\"\n [class.kf-checkbox__box--invalid]=\"invalid()\"\n ></span>\n @if (label()) {\n <span class=\"kf-checkbox__label\">{{ label() }}</span>\n }\n</label>\n", styles: [".kf-checkbox-box{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--kf-space-md);height:var(--kf-space-md);border:1px solid var(--kf-color-border-control);border-radius:var(--kf-radius-xs);background:var(--kf-color-white);transition:background .14s,border-color .14s;position:relative}.kf-checkbox-box--checked{background:var(--kf-color-primary);border-color:var(--kf-color-primary)}:host{display:inline-flex}.kf-checkbox{display:inline-flex;align-items:center;gap:var(--kf-space-sm);cursor:pointer;font:inherit;font-family:var(--kf-font-body);color:var(--kf-color-text)}.kf-checkbox--disabled{cursor:not-allowed;color:var(--kf-color-text-muted)}.kf-checkbox input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.kf-checkbox__box{display:inline-flex;align-items:center;justify-content:center}.kf-checkbox input:checked+.kf-checkbox__box,.kf-checkbox input:indeterminate+.kf-checkbox__box{background:var(--kf-color-primary);border-color:var(--kf-color-primary)}.kf-checkbox input:checked+.kf-checkbox__box:after{content:\"\";position:absolute;inset:0;margin:auto;width:var(--kf-checkbox-mark-width);height:var(--kf-checkbox-mark-height);border:var(--kf-checkbox-mark-border);border-width:var(--kf-checkbox-mark-border-width);transform:rotate(45deg) translate(-1px,-1px)}.kf-checkbox input:indeterminate+.kf-checkbox__box:after{content:\"\";position:absolute;inset:0;margin:auto;width:var(--kf-checkbox-dash-width);height:var(--kf-checkbox-dash-height);background:var(--kf-color-white);border-radius:var(--kf-radius-xs)}.kf-checkbox input:focus-visible+.kf-checkbox__box{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-checkbox__box--invalid{border-color:var(--kf-color-error)}.kf-checkbox--disabled .kf-checkbox__box{opacity:.5}.kf-checkbox__label{-webkit-user-select:none;user-select:none}\n"] });
|
|
2047
2063
|
}
|
|
2048
2064
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Checkbox, decorators: [{
|
|
2049
2065
|
type: Component,
|
|
@@ -2053,7 +2069,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
2053
2069
|
useExisting: forwardRef(() => Checkbox),
|
|
2054
2070
|
multi: true,
|
|
2055
2071
|
},
|
|
2056
|
-
], template: "<label class=\"kf-checkbox\" [class.kf-checkbox--disabled]=\"disabled()\">\n <input\n #inputRef\n type=\"checkbox\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [attr.aria-invalid]=\"invalid() ? true : null\"\n (change)=\"onChange($event)\"\n (blur)=\"onTouched()\"\n />\n <span\n class=\"kf-checkbox__box kf-checkbox-box\"\n [class.kf-checkbox__box--invalid]=\"invalid()\"\n ></span>\n @if (label()) {\n <span class=\"kf-checkbox__label\">{{ label() }}</span>\n }\n</label>\n", styles: [".kf-checkbox-box{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--kf-space-md);height:var(--kf-space-md);border:1px solid var(--kf-color-border-control);border-radius:var(--kf-radius-xs);background:var(--kf-color-white);transition:background .14s,border-color .14s;position:relative}.kf-checkbox-box--checked{background:var(--kf-color-primary);border-color:var(--kf-color-primary)}:host{display:inline-
|
|
2072
|
+
], template: "<label class=\"kf-checkbox\" [class.kf-checkbox--disabled]=\"disabled()\">\n <input\n #inputRef\n type=\"checkbox\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [attr.aria-invalid]=\"invalid() ? true : null\"\n (change)=\"onChange($event)\"\n (blur)=\"onTouched()\"\n />\n <span\n class=\"kf-checkbox__box kf-checkbox-box\"\n [class.kf-checkbox__box--invalid]=\"invalid()\"\n ></span>\n @if (label()) {\n <span class=\"kf-checkbox__label\">{{ label() }}</span>\n }\n</label>\n", styles: [".kf-checkbox-box{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--kf-space-md);height:var(--kf-space-md);border:1px solid var(--kf-color-border-control);border-radius:var(--kf-radius-xs);background:var(--kf-color-white);transition:background .14s,border-color .14s;position:relative}.kf-checkbox-box--checked{background:var(--kf-color-primary);border-color:var(--kf-color-primary)}:host{display:inline-flex}.kf-checkbox{display:inline-flex;align-items:center;gap:var(--kf-space-sm);cursor:pointer;font:inherit;font-family:var(--kf-font-body);color:var(--kf-color-text)}.kf-checkbox--disabled{cursor:not-allowed;color:var(--kf-color-text-muted)}.kf-checkbox input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.kf-checkbox__box{display:inline-flex;align-items:center;justify-content:center}.kf-checkbox input:checked+.kf-checkbox__box,.kf-checkbox input:indeterminate+.kf-checkbox__box{background:var(--kf-color-primary);border-color:var(--kf-color-primary)}.kf-checkbox input:checked+.kf-checkbox__box:after{content:\"\";position:absolute;inset:0;margin:auto;width:var(--kf-checkbox-mark-width);height:var(--kf-checkbox-mark-height);border:var(--kf-checkbox-mark-border);border-width:var(--kf-checkbox-mark-border-width);transform:rotate(45deg) translate(-1px,-1px)}.kf-checkbox input:indeterminate+.kf-checkbox__box:after{content:\"\";position:absolute;inset:0;margin:auto;width:var(--kf-checkbox-dash-width);height:var(--kf-checkbox-dash-height);background:var(--kf-color-white);border-radius:var(--kf-radius-xs)}.kf-checkbox input:focus-visible+.kf-checkbox__box{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-checkbox__box--invalid{border-color:var(--kf-color-error)}.kf-checkbox--disabled .kf-checkbox__box{opacity:.5}.kf-checkbox__label{-webkit-user-select:none;user-select:none}\n"] }]
|
|
2057
2073
|
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], inputRef: [{ type: i0.ViewChild, args: ['inputRef', { isSignal: true }] }] } });
|
|
2058
2074
|
|
|
2059
2075
|
/**
|
|
@@ -2897,6 +2913,28 @@ const TYPEAHEAD_RESET_MS = 500;
|
|
|
2897
2913
|
* panelTitle="Ordenar por" panelWidth="content"
|
|
2898
2914
|
* [options]="sortOptions" [value]="sort()" (valueChange)="sort.set($event)" />
|
|
2899
2915
|
*
|
|
2916
|
+
* `width="fit"` ajusta el ancho al contenido: mide la opción más larga (y el
|
|
2917
|
+
* placeholder) con la tipografía real y no cambia al elegir otra, hasta un
|
|
2918
|
+
* tope de `--kf-select-fit-max-width` (20rem por defecto; lo que no entra se
|
|
2919
|
+
* trunca con elipsis). Pensado para selects en barras de herramientas o
|
|
2920
|
+
* encabezados donde un ancho fijo deja espacio vacío. La medición se hace
|
|
2921
|
+
* con una pasada invisible de todas las opciones, así que conviene para
|
|
2922
|
+
* listas cortas o medianas; con cientos de opciones usar un ancho fijo. Si
|
|
2923
|
+
* alguna opción trae `tag`, también se reserva el hueco del tag más ancho,
|
|
2924
|
+
* por lo que elegir una opción con tag tampoco cambia el ancho. Conviene
|
|
2925
|
+
* combinarlo con `panelWidth="content"`: con el default (`"trigger"`) el panel
|
|
2926
|
+
* mide lo mismo que el trigger y las opciones, que suman su propio padding
|
|
2927
|
+
* (y su tag, si lo traen), pueden quedar truncadas.
|
|
2928
|
+
*
|
|
2929
|
+
* <kf-select width="fit" label="División" hideLabel [options]="divisions" [value]="division()" (valueChange)="..." />
|
|
2930
|
+
*
|
|
2931
|
+
* `size="sm"` fija la altura del trigger en 32px (`--kf-select-min-height`)
|
|
2932
|
+
* para filas de filtros densas, sin tocar el padding horizontal ni el
|
|
2933
|
+
* `variant`. El default (`'md'`) no cambia nada. Para otra altura puntual,
|
|
2934
|
+
* declarar `--kf-select-min-height` en el propio `kf-select`.
|
|
2935
|
+
*
|
|
2936
|
+
* <kf-select size="sm" width="fit" [options]="ranges" [value]="range()" (valueChange)="..." />
|
|
2937
|
+
*
|
|
2900
2938
|
* Teclado (patrón listbox de WAI-ARIA): ArrowDown/ArrowUp sobre el trigger
|
|
2901
2939
|
* cerrado lo abren; al abrir, el foco pasa a la opción seleccionada (o al
|
|
2902
2940
|
* buscador, si está visible). En el panel, flechas y Home/End mueven el
|
|
@@ -2934,6 +2972,12 @@ class Select {
|
|
|
2934
2972
|
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2935
2973
|
/** Borde en rojo y `aria-invalid` en el trigger. Ver `errorMessage` para el mensaje asociado — mismo contrato que `kf-input`. */
|
|
2936
2974
|
invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2975
|
+
/**
|
|
2976
|
+
* Pone el asterisco rojo en la etiqueta (igual que `kf-input`) y
|
|
2977
|
+
* `aria-required="true"` en el trigger. Solo señaliza: la validación sigue
|
|
2978
|
+
* en el formulario del consumidor.
|
|
2979
|
+
*/
|
|
2980
|
+
required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2937
2981
|
/** Mensaje de error con `role="alert"`, debajo del trigger. */
|
|
2938
2982
|
errorMessage = input(/* @ts-ignore */
|
|
2939
2983
|
...(ngDevMode ? [undefined, { debugName: "errorMessage" }] : /* istanbul ignore next */ []));
|
|
@@ -2944,9 +2988,16 @@ class Select {
|
|
|
2944
2988
|
* comportamiento actual sin cambios para consumidores existentes.
|
|
2945
2989
|
* 'full' ocupa el 100% del contenedor — para selects dentro de layouts
|
|
2946
2990
|
* flex/grid donde el ancho fijo no encaja (ej. un footer de sidebar).
|
|
2991
|
+
* 'fit' mide el contenido (opción más larga) con un tope.
|
|
2947
2992
|
*/
|
|
2948
2993
|
width = input('md', /* @ts-ignore */
|
|
2949
2994
|
...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
2995
|
+
/**
|
|
2996
|
+
* Altura del trigger. 'md' (default) conserva la altura histórica; 'sm'
|
|
2997
|
+
* la fija en 32px para barras de filtros densas.
|
|
2998
|
+
*/
|
|
2999
|
+
size = input('md', /* @ts-ignore */
|
|
3000
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
2950
3001
|
/**
|
|
2951
3002
|
* Tri-state: si el consumidor no lo especifica (`undefined`), el buscador
|
|
2952
3003
|
* se activa solo cuando `options().length` supera `searchThreshold()`. Si
|
|
@@ -3016,6 +3067,27 @@ class Select {
|
|
|
3016
3067
|
return `${name}: ${this.triggerText()}`;
|
|
3017
3068
|
}, /* @ts-ignore */
|
|
3018
3069
|
...(ngDevMode ? [{ debugName: "triggerAriaLabel" }] : /* istanbul ignore next */ []));
|
|
3070
|
+
/**
|
|
3071
|
+
* Textos que `width="fit"` mide para dimensionar el trigger: el de cada
|
|
3072
|
+
* opción tal como se vería en el trigger (`shortLabel` o `label`) y el
|
|
3073
|
+
* placeholder. Sin repetidos.
|
|
3074
|
+
*/
|
|
3075
|
+
fitTexts = computed(() => {
|
|
3076
|
+
if (this.width() !== 'fit') {
|
|
3077
|
+
return [];
|
|
3078
|
+
}
|
|
3079
|
+
const texts = this.normalizedOptions().map((option) => option.shortLabel ?? option.label);
|
|
3080
|
+
return [...new Set([...texts, this.placeholder()])];
|
|
3081
|
+
}, /* @ts-ignore */
|
|
3082
|
+
...(ngDevMode ? [{ debugName: "fitTexts" }] : /* istanbul ignore next */ []));
|
|
3083
|
+
/** Tags distintos de las opciones, para reservar el hueco del más ancho con `width="fit"`. */
|
|
3084
|
+
fitTags = computed(() => {
|
|
3085
|
+
if (this.width() !== 'fit') {
|
|
3086
|
+
return [];
|
|
3087
|
+
}
|
|
3088
|
+
return [...new Set(this.normalizedOptions().flatMap((option) => option.tag ?? []))];
|
|
3089
|
+
}, /* @ts-ignore */
|
|
3090
|
+
...(ngDevMode ? [{ debugName: "fitTags" }] : /* istanbul ignore next */ []));
|
|
3019
3091
|
showSearch = computed(() => this.searchable() ?? this.normalizedOptions().length > this.searchThreshold(), /* @ts-ignore */
|
|
3020
3092
|
...(ngDevMode ? [{ debugName: "showSearch" }] : /* istanbul ignore next */ []));
|
|
3021
3093
|
/** Opciones visibles tras aplicar el filtro de búsqueda (case/acento-insensitive). */
|
|
@@ -3331,7 +3403,7 @@ class Select {
|
|
|
3331
3403
|
}
|
|
3332
3404
|
}
|
|
3333
3405
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Select, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3334
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Select, isStandalone: true, selector: "kf-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchThreshold: { classPropertyName: "searchThreshold", publicName: "searchThreshold", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, panelTitle: { classPropertyName: "panelTitle", publicName: "panelTitle", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.kf-select--compact": "variant() === 'compact'", "class.kf-select--width-sm": "width() === 'sm'", "class.kf-select--width-lg": "width() === 'lg'", "class.kf-select--width-full": "width() === 'full'" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelTemplate", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n <kf-field-label [for]=\"triggerId\" [visuallyHidden]=\"hideLabel()\">{{ label() }}</kf-field-label>\n}\n<button\n #trigger\n type=\"button\"\n [id]=\"triggerId\"\n class=\"kf-select__trigger\"\n [class.kf-select__trigger--disabled]=\"disabled()\"\n [class.kf-select__trigger--invalid]=\"invalid()\"\n [class.kf-select__trigger--with-icon]=\"!!icon()\"\n [disabled]=\"disabled()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"isOpen() ? listboxId : null\"\n [attr.aria-label]=\"triggerAriaLabel()\"\n [attr.aria-describedby]=\"errorMessage() ? errorId : null\"\n [attr.aria-invalid]=\"invalid() ? true : null\"\n [class.kf-select__trigger--tagged]=\"!!selectedOption()?.tag\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n>\n @if (icon(); as iconName) {\n <kf-icon class=\"kf-select__icon\" [name]=\"iconName\" size=\"sm\" />\n }\n @if (prefix(); as prefixText) {\n <span class=\"kf-select__prefix\">{{ prefixText }}</span>\n }\n <span class=\"kf-select__value\" [class.kf-select__value--placeholder]=\"!selectedOption()\">\n {{ triggerText() }}\n </span>\n @if (selectedOption()?.tag; as tag) {\n <kf-badge class=\"kf-select__tag\">{{ tag }}</kf-badge>\n }\n <span\n class=\"kf-select__caret kf-caret\"\n [class.kf-select__caret--open]=\"isOpen()\"\n [class.kf-caret--open]=\"isOpen()\"\n aria-hidden=\"true\"\n ></span>\n</button>\n@if (errorMessage(); as message) {\n <span class=\"kf-select__error kf-field-error\" [id]=\"errorId\" role=\"alert\">{{ message }}</span>\n}\n<ng-template #panelTemplate>\n <div #panel class=\"kf-select__panel\" [class.kf-select__panel--compact]=\"variant() === 'compact'\">\n @if (panelTitle(); as title) {\n <div class=\"kf-select__panel-title kf-overline-text\" aria-hidden=\"true\">{{ title }}</div>\n }\n @if (showSearch()) {\n <input\n #searchInput\n type=\"text\"\n class=\"kf-select__search\"\n placeholder=\"Buscar\u2026\"\n aria-label=\"Buscar opci\u00F3n\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n aria-expanded=\"true\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-activedescendant]=\"filteredOptions().length ? optionId(activeIndex()) : null\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown.arrowdown)=\"$event.preventDefault(); moveActive(1)\"\n (keydown.arrowup)=\"$event.preventDefault(); moveActive(-1)\"\n (keydown.enter)=\"$event.preventDefault(); selectActive()\"\n (keydown)=\"onSearchKeydown($event)\"\n />\n }\n <ul\n class=\"kf-select__list\"\n [id]=\"listboxId\"\n role=\"listbox\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-labelledby]=\"ariaLabel() ? null : triggerId\"\n >\n @for (option of filteredOptions(); track option.value; let i = $index) {\n <li\n class=\"kf-select__option\"\n [id]=\"optionId(i)\"\n [class.kf-select__option--selected]=\"option.value === value()\"\n [class.kf-select__option--active]=\"i === activeIndex()\"\n role=\"option\"\n tabindex=\"-1\"\n [attr.aria-selected]=\"option.value === value()\"\n [attr.aria-label]=\"optionAriaLabel(option)\"\n [class.kf-select__option--rich]=\"!!(option.tag || option.detail)\"\n (click)=\"select(option)\"\n (mouseenter)=\"activeIndex.set(i)\"\n (keydown)=\"onOptionKeydown($event, option, i)\"\n >\n @if (option.tag || option.detail) {\n <span class=\"kf-select__option-main\">\n <span class=\"kf-select__option-label\">{{ option.label }}</span>\n @if (option.tag) {\n <kf-badge class=\"kf-select__tag\">{{ option.tag }}</kf-badge>\n }\n </span>\n @if (option.detail) {\n <span class=\"kf-select__option-detail\">{{ option.detail }}</span>\n }\n } @else {\n {{ option.label }}\n }\n </li>\n } @empty {\n <li class=\"kf-select__empty\">\n {{ searchQuery() ? 'Sin resultados' : 'Sin opciones disponibles' }}\n </li>\n }\n </ul>\n </div>\n</ng-template>\n", styles: [".kf-caret{flex-shrink:0;width:8px;height:8px;border-right:2px solid var(--kf-color-text-muted);border-bottom:2px solid var(--kf-color-text-muted);transform:rotate(45deg);transition:transform .14s;margin-top:-4px}.kf-caret--open{transform:rotate(-135deg);margin-top:4px}.kf-field-hint{font-size:.75rem;color:var(--kf-color-text-muted)}.kf-field-error{display:flex;align-items:center;gap:var(--kf-space-xs);font-size:.75rem;font-weight:600;color:var(--kf-color-error-strong)}.kf-overline-text{font-family:var(--kf-font-title);font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}:host{display:flex;flex-direction:column;gap:var(--kf-space-xs);width:var(--kf-select-width-md);font-family:var(--kf-font-body)}:host(.kf-select--compact){width:max-content;max-width:160px}:host(.kf-select--width-sm){width:var(--kf-select-width-sm)}:host(.kf-select--width-lg){width:var(--kf-select-width-lg)}:host(.kf-select--width-full){width:100%}:host(.kf-select--compact) .kf-select__trigger{padding:6px var(--kf-space-sm);font-size:.85rem;gap:var(--kf-space-xs)}:host(.kf-select--compact) .kf-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);width:100%;font:inherit;color:var(--kf-color-text);padding:var(--kf-space-sm) var(--kf-space-md);background:var(--kf-color-white);border:1px solid var(--kf-color-border-control);border-radius:var(--kf-radius-sm);cursor:pointer;transition:border-color .14s,box-shadow .14s}.kf-select__trigger:hover:not(:disabled){border-color:var(--kf-color-text-muted)}.kf-select__trigger:focus-visible{outline:none;border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus)}.kf-select__trigger--disabled{opacity:.5;cursor:not-allowed}.kf-select__trigger--invalid{border-color:var(--kf-color-error)}.kf-select__trigger--invalid:focus-visible{border-color:var(--kf-color-error);box-shadow:var(--kf-shadow-focus-error)}.kf-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-select__icon{flex:none;color:var(--kf-color-text-muted)}.kf-select__trigger--with-icon .kf-select__value{flex:1 1 auto;min-width:0;text-align:start}:host(.kf-select--compact) .kf-select__trigger--with-icon .kf-select__value{color:var(--kf-color-ink);font-weight:600}.kf-select__trigger--tagged .kf-select__value{flex:1 1 auto;min-width:0;text-align:start}.kf-select__tag{flex:none}.kf-select__trigger .kf-select__tag{margin-block:-2px}.kf-select__prefix{flex:none;color:var(--kf-color-text-muted);white-space:nowrap}.kf-select__value--placeholder{color:var(--kf-color-text-muted)}.kf-select__panel{box-sizing:border-box;font-family:var(--kf-font-body);width:100%;background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);box-shadow:var(--kf-shadow-md);overflow:hidden}.kf-select__panel-title{padding:var(--kf-space-sm) var(--kf-space-md) var(--kf-space-xs)}.kf-select__panel--compact .kf-select__panel-title{padding:var(--kf-space-xs) var(--kf-space-sm) 2px}.kf-select__search{box-sizing:border-box;width:100%;font:inherit;font-family:var(--kf-font-body);color:var(--kf-color-text);padding:var(--kf-space-sm) var(--kf-space-md);border:none;border-bottom:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm) var(--kf-radius-sm) 0 0;outline:none}.kf-select__search:focus-visible{box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-select__list{box-sizing:border-box;width:100%;margin:0;padding:var(--kf-space-xs) 0;list-style:none;max-height:240px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--kf-color-gray-400) transparent}.kf-select__list::-webkit-scrollbar{width:6px}.kf-select__list::-webkit-scrollbar-track{background:transparent}.kf-select__list::-webkit-scrollbar-thumb{background-color:var(--kf-color-gray-400);border-radius:var(--kf-radius-pill)}.kf-select__list::-webkit-scrollbar-thumb:hover{background-color:var(--kf-color-gray-500)}.kf-select__option{padding:var(--kf-space-sm) var(--kf-space-md);outline:none;color:var(--kf-color-text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kf-select__option--rich{display:flex;flex-direction:column;gap:2px}.kf-select__option-main{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);min-width:0}.kf-select__option-label,.kf-select__option-detail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.kf-select__option-detail{font-size:var(--kf-font-size-body-sm);font-weight:400;color:var(--kf-color-text-muted)}.kf-select__panel--compact .kf-select__option{padding:6px var(--kf-space-sm);font-size:.85rem}.kf-select__option:hover{background:var(--kf-color-primary-soft)}.kf-select__option--selected{background:var(--kf-color-primary-soft);color:var(--kf-color-primary);font-weight:600}.kf-select__option--active{background:var(--kf-color-primary-soft)}.kf-select__option:focus-visible{background:var(--kf-color-primary-soft);box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-select__empty{text-align:center;padding:var(--kf-space-sm) var(--kf-space-md);color:var(--kf-color-text-muted)}\n"], dependencies: [{ kind: "component", type: Badge, selector: "kf-badge", inputs: ["tone", "variant", "dot", "truncate"] }, { kind: "component", type: FieldLabel, selector: "kf-field-label", inputs: ["for", "required", "visuallyHidden"] }, { kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }] });
|
|
3406
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Select, isStandalone: true, selector: "kf-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchThreshold: { classPropertyName: "searchThreshold", publicName: "searchThreshold", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, panelTitle: { classPropertyName: "panelTitle", publicName: "panelTitle", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.kf-select--compact": "variant() === 'compact'", "class.kf-select--width-sm": "width() === 'sm'", "class.kf-select--width-lg": "width() === 'lg'", "class.kf-select--width-full": "width() === 'full'", "class.kf-select--width-fit": "width() === 'fit'", "class.kf-select--size-sm": "size() === 'sm'" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelTemplate", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n <kf-field-label [for]=\"triggerId\" [required]=\"required()\" [visuallyHidden]=\"hideLabel()\">{{\n label()\n }}</kf-field-label>\n}\n<button\n #trigger\n type=\"button\"\n [id]=\"triggerId\"\n class=\"kf-select__trigger\"\n [class.kf-select__trigger--disabled]=\"disabled()\"\n [class.kf-select__trigger--invalid]=\"invalid()\"\n [class.kf-select__trigger--with-icon]=\"!!icon()\"\n [disabled]=\"disabled()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"isOpen() ? listboxId : null\"\n [attr.aria-label]=\"triggerAriaLabel()\"\n [attr.aria-describedby]=\"errorMessage() ? errorId : null\"\n [attr.aria-invalid]=\"invalid() ? true : null\"\n [attr.aria-required]=\"required() ? true : null\"\n [class.kf-select__trigger--tagged]=\"!!selectedOption()?.tag\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n>\n @if (icon(); as iconName) {\n <kf-icon class=\"kf-select__icon\" [name]=\"iconName\" size=\"sm\" />\n }\n @if (prefix(); as prefixText) {\n <span class=\"kf-select__prefix\">{{ prefixText }}</span>\n }\n <span\n class=\"kf-select__value\"\n [class.kf-select__value--placeholder]=\"!selectedOption()\"\n [class.kf-select__value--fit]=\"width() === 'fit'\"\n >\n @if (width() === 'fit') {\n <span class=\"kf-select__value-text\">{{ triggerText() }}</span>\n <!-- Reserva el ancho de la opci\u00F3n m\u00E1s larga: oculto a la vista y al\n \u00E1rbol de accesibilidad, solo aporta tama\u00F1o. -->\n <span class=\"kf-select__sizer\" aria-hidden=\"true\">\n @for (text of fitTexts(); track text) {\n <span>{{ text }}</span>\n }\n </span>\n } @else {\n {{ triggerText() }}\n }\n </span>\n @if (width() === 'fit' && fitTags().length) {\n <!-- Con `fit` el hueco del tag se reserva siempre con el m\u00E1s ancho: los\n dem\u00E1s se apilan en la misma celda y solo el elegido se ve. -->\n <span class=\"kf-select__tag-slot\">\n @for (tag of fitTags(); track tag) {\n <kf-badge\n class=\"kf-select__tag\"\n [class.kf-select__tag--reserved]=\"tag !== selectedOption()?.tag\"\n [attr.aria-hidden]=\"tag !== selectedOption()?.tag ? 'true' : null\"\n >{{ tag }}</kf-badge\n >\n }\n </span>\n } @else if (selectedOption()?.tag; as tag) {\n <kf-badge class=\"kf-select__tag\">{{ tag }}</kf-badge>\n }\n <span\n class=\"kf-select__caret kf-caret\"\n [class.kf-select__caret--open]=\"isOpen()\"\n [class.kf-caret--open]=\"isOpen()\"\n aria-hidden=\"true\"\n ></span>\n</button>\n@if (errorMessage(); as message) {\n <span class=\"kf-select__error kf-field-error\" [id]=\"errorId\" role=\"alert\">{{ message }}</span>\n}\n<ng-template #panelTemplate>\n <div #panel class=\"kf-select__panel\" [class.kf-select__panel--compact]=\"variant() === 'compact'\">\n @if (panelTitle(); as title) {\n <div class=\"kf-select__panel-title kf-overline-text\" aria-hidden=\"true\">{{ title }}</div>\n }\n @if (showSearch()) {\n <input\n #searchInput\n type=\"text\"\n class=\"kf-select__search\"\n placeholder=\"Buscar\u2026\"\n aria-label=\"Buscar opci\u00F3n\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n aria-expanded=\"true\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-activedescendant]=\"filteredOptions().length ? optionId(activeIndex()) : null\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown.arrowdown)=\"$event.preventDefault(); moveActive(1)\"\n (keydown.arrowup)=\"$event.preventDefault(); moveActive(-1)\"\n (keydown.enter)=\"$event.preventDefault(); selectActive()\"\n (keydown)=\"onSearchKeydown($event)\"\n />\n }\n <ul\n class=\"kf-select__list\"\n [id]=\"listboxId\"\n role=\"listbox\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-labelledby]=\"ariaLabel() ? null : triggerId\"\n >\n @for (option of filteredOptions(); track option.value; let i = $index) {\n <li\n class=\"kf-select__option\"\n [id]=\"optionId(i)\"\n [class.kf-select__option--selected]=\"option.value === value()\"\n [class.kf-select__option--active]=\"i === activeIndex()\"\n role=\"option\"\n tabindex=\"-1\"\n [attr.aria-selected]=\"option.value === value()\"\n [attr.aria-label]=\"optionAriaLabel(option)\"\n [class.kf-select__option--rich]=\"!!(option.tag || option.detail)\"\n (click)=\"select(option)\"\n (mouseenter)=\"activeIndex.set(i)\"\n (keydown)=\"onOptionKeydown($event, option, i)\"\n >\n @if (option.tag || option.detail) {\n <span class=\"kf-select__option-main\">\n <span class=\"kf-select__option-label\">{{ option.label }}</span>\n @if (option.tag) {\n <kf-badge class=\"kf-select__tag\">{{ option.tag }}</kf-badge>\n }\n </span>\n @if (option.detail) {\n <span class=\"kf-select__option-detail\">{{ option.detail }}</span>\n }\n } @else {\n {{ option.label }}\n }\n </li>\n } @empty {\n <li class=\"kf-select__empty\">\n {{ searchQuery() ? 'Sin resultados' : 'Sin opciones disponibles' }}\n </li>\n }\n </ul>\n </div>\n</ng-template>\n", styles: [".kf-caret{flex-shrink:0;width:8px;height:8px;border-right:2px solid var(--kf-color-text-muted);border-bottom:2px solid var(--kf-color-text-muted);transform:rotate(45deg);transition:transform .14s;margin-top:-4px}.kf-caret--open{transform:rotate(-135deg);margin-top:4px}.kf-field-hint{font-size:.75rem;color:var(--kf-color-text-muted)}.kf-field-error{display:flex;align-items:center;gap:var(--kf-space-xs);font-size:.75rem;font-weight:600;color:var(--kf-color-error-strong)}.kf-overline-text{font-family:var(--kf-font-title);font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}:host{display:flex;flex-direction:column;gap:var(--kf-space-xs);width:var(--kf-select-width-md);font-family:var(--kf-font-body)}:host(.kf-select--compact){width:max-content;max-width:160px}:host(.kf-select--width-sm){width:var(--kf-select-width-sm)}:host(.kf-select--width-lg){width:var(--kf-select-width-lg)}:host(.kf-select--width-full){width:100%}:host(.kf-select--width-fit){width:max-content;max-width:var(--kf-select-fit-max-width, 20rem)}:host(.kf-select--compact) .kf-select__trigger{padding:6px var(--kf-space-sm);font-size:.85rem;gap:var(--kf-space-xs)}:host(.kf-select--compact) .kf-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);width:100%;font:inherit;color:var(--kf-color-text);padding:var(--kf-space-sm) var(--kf-space-md);background:var(--kf-color-white);border:1px solid var(--kf-color-border-control);border-radius:var(--kf-radius-sm);cursor:pointer;transition:border-color .14s,box-shadow .14s}:host(.kf-select--size-sm){--kf-select-min-height: 2rem}:host(.kf-select--size-sm) .kf-select__trigger{box-sizing:border-box;min-height:var(--kf-select-min-height);padding-block:0}:host(.kf-select--size-sm:not(.kf-select--compact)) .kf-select__trigger{font-size:var(--kf-font-size-body-sm)}.kf-select__trigger:hover:not(:disabled){border-color:var(--kf-color-text-muted)}.kf-select__trigger:focus-visible{outline:none;border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus)}.kf-select__trigger--disabled{opacity:.5;cursor:not-allowed}.kf-select__trigger--invalid{border-color:var(--kf-color-error)}.kf-select__trigger--invalid:focus-visible{border-color:var(--kf-color-error);box-shadow:var(--kf-shadow-focus-error)}.kf-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-select__value--fit{display:grid;grid-template-columns:minmax(0,1fr);text-align:start}.kf-select__value-text{grid-area:1 / 1;overflow:hidden;text-overflow:ellipsis}.kf-select__sizer{grid-area:1 / 1;display:grid;height:0;overflow:hidden;visibility:hidden}.kf-select__sizer>span{grid-area:1 / 1;white-space:nowrap}.kf-select__icon{flex:none;color:var(--kf-color-text-muted)}.kf-select__trigger--with-icon .kf-select__value{flex:1 1 auto;min-width:0;text-align:start}:host(.kf-select--compact) .kf-select__trigger--with-icon .kf-select__value{color:var(--kf-color-ink);font-weight:600}.kf-select__trigger--tagged .kf-select__value{flex:1 1 auto;min-width:0;text-align:start}.kf-select__tag{flex:none}.kf-select__tag-slot{display:grid;flex:none;justify-items:end}.kf-select__tag-slot>.kf-select__tag{grid-area:1 / 1}.kf-select__tag--reserved{visibility:hidden}.kf-select__trigger .kf-select__tag{margin-block:-2px}.kf-select__prefix{flex:none;color:var(--kf-color-text-muted);white-space:nowrap}.kf-select__value--placeholder{color:var(--kf-color-text-muted)}.kf-select__panel{box-sizing:border-box;font-family:var(--kf-font-body);width:100%;background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);box-shadow:var(--kf-shadow-md);overflow:hidden}.kf-select__panel-title{padding:var(--kf-space-sm) var(--kf-space-md) var(--kf-space-xs)}.kf-select__panel--compact .kf-select__panel-title{padding:var(--kf-space-xs) var(--kf-space-sm) 2px}.kf-select__search{box-sizing:border-box;width:100%;font:inherit;font-family:var(--kf-font-body);color:var(--kf-color-text);padding:var(--kf-space-sm) var(--kf-space-md);border:none;border-bottom:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm) var(--kf-radius-sm) 0 0;outline:none}.kf-select__search:focus-visible{box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-select__list{box-sizing:border-box;width:100%;margin:0;padding:var(--kf-space-xs) 0;list-style:none;max-height:240px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--kf-color-gray-400) transparent}.kf-select__list::-webkit-scrollbar{width:6px}.kf-select__list::-webkit-scrollbar-track{background:transparent}.kf-select__list::-webkit-scrollbar-thumb{background-color:var(--kf-color-gray-400);border-radius:var(--kf-radius-pill)}.kf-select__list::-webkit-scrollbar-thumb:hover{background-color:var(--kf-color-gray-500)}.kf-select__option{padding:var(--kf-space-sm) var(--kf-space-md);outline:none;color:var(--kf-color-text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kf-select__option--rich{display:flex;flex-direction:column;gap:2px}.kf-select__option-main{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);min-width:0}.kf-select__option-label,.kf-select__option-detail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.kf-select__option-detail{font-size:var(--kf-font-size-body-sm);font-weight:400;color:var(--kf-color-text-muted)}.kf-select__panel--compact .kf-select__option{padding:6px var(--kf-space-sm);font-size:.85rem}.kf-select__option:hover{background:var(--kf-color-primary-soft)}.kf-select__option--selected{background:var(--kf-color-primary-soft);color:var(--kf-color-primary);font-weight:600}.kf-select__option--active{background:var(--kf-color-primary-soft)}.kf-select__option:focus-visible{background:var(--kf-color-primary-soft);box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-select__empty{text-align:center;padding:var(--kf-space-sm) var(--kf-space-md);color:var(--kf-color-text-muted)}\n"], dependencies: [{ kind: "component", type: Badge, selector: "kf-badge", inputs: ["tone", "variant", "dot", "truncate"] }, { kind: "component", type: FieldLabel, selector: "kf-field-label", inputs: ["for", "required", "visuallyHidden"] }, { kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }] });
|
|
3335
3407
|
}
|
|
3336
3408
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Select, decorators: [{
|
|
3337
3409
|
type: Component,
|
|
@@ -3340,8 +3412,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
3340
3412
|
'[class.kf-select--width-sm]': "width() === 'sm'",
|
|
3341
3413
|
'[class.kf-select--width-lg]': "width() === 'lg'",
|
|
3342
3414
|
'[class.kf-select--width-full]': "width() === 'full'",
|
|
3343
|
-
|
|
3344
|
-
|
|
3415
|
+
'[class.kf-select--width-fit]': "width() === 'fit'",
|
|
3416
|
+
'[class.kf-select--size-sm]': "size() === 'sm'",
|
|
3417
|
+
}, template: "@if (label()) {\n <kf-field-label [for]=\"triggerId\" [required]=\"required()\" [visuallyHidden]=\"hideLabel()\">{{\n label()\n }}</kf-field-label>\n}\n<button\n #trigger\n type=\"button\"\n [id]=\"triggerId\"\n class=\"kf-select__trigger\"\n [class.kf-select__trigger--disabled]=\"disabled()\"\n [class.kf-select__trigger--invalid]=\"invalid()\"\n [class.kf-select__trigger--with-icon]=\"!!icon()\"\n [disabled]=\"disabled()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"isOpen() ? listboxId : null\"\n [attr.aria-label]=\"triggerAriaLabel()\"\n [attr.aria-describedby]=\"errorMessage() ? errorId : null\"\n [attr.aria-invalid]=\"invalid() ? true : null\"\n [attr.aria-required]=\"required() ? true : null\"\n [class.kf-select__trigger--tagged]=\"!!selectedOption()?.tag\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n>\n @if (icon(); as iconName) {\n <kf-icon class=\"kf-select__icon\" [name]=\"iconName\" size=\"sm\" />\n }\n @if (prefix(); as prefixText) {\n <span class=\"kf-select__prefix\">{{ prefixText }}</span>\n }\n <span\n class=\"kf-select__value\"\n [class.kf-select__value--placeholder]=\"!selectedOption()\"\n [class.kf-select__value--fit]=\"width() === 'fit'\"\n >\n @if (width() === 'fit') {\n <span class=\"kf-select__value-text\">{{ triggerText() }}</span>\n <!-- Reserva el ancho de la opci\u00F3n m\u00E1s larga: oculto a la vista y al\n \u00E1rbol de accesibilidad, solo aporta tama\u00F1o. -->\n <span class=\"kf-select__sizer\" aria-hidden=\"true\">\n @for (text of fitTexts(); track text) {\n <span>{{ text }}</span>\n }\n </span>\n } @else {\n {{ triggerText() }}\n }\n </span>\n @if (width() === 'fit' && fitTags().length) {\n <!-- Con `fit` el hueco del tag se reserva siempre con el m\u00E1s ancho: los\n dem\u00E1s se apilan en la misma celda y solo el elegido se ve. -->\n <span class=\"kf-select__tag-slot\">\n @for (tag of fitTags(); track tag) {\n <kf-badge\n class=\"kf-select__tag\"\n [class.kf-select__tag--reserved]=\"tag !== selectedOption()?.tag\"\n [attr.aria-hidden]=\"tag !== selectedOption()?.tag ? 'true' : null\"\n >{{ tag }}</kf-badge\n >\n }\n </span>\n } @else if (selectedOption()?.tag; as tag) {\n <kf-badge class=\"kf-select__tag\">{{ tag }}</kf-badge>\n }\n <span\n class=\"kf-select__caret kf-caret\"\n [class.kf-select__caret--open]=\"isOpen()\"\n [class.kf-caret--open]=\"isOpen()\"\n aria-hidden=\"true\"\n ></span>\n</button>\n@if (errorMessage(); as message) {\n <span class=\"kf-select__error kf-field-error\" [id]=\"errorId\" role=\"alert\">{{ message }}</span>\n}\n<ng-template #panelTemplate>\n <div #panel class=\"kf-select__panel\" [class.kf-select__panel--compact]=\"variant() === 'compact'\">\n @if (panelTitle(); as title) {\n <div class=\"kf-select__panel-title kf-overline-text\" aria-hidden=\"true\">{{ title }}</div>\n }\n @if (showSearch()) {\n <input\n #searchInput\n type=\"text\"\n class=\"kf-select__search\"\n placeholder=\"Buscar\u2026\"\n aria-label=\"Buscar opci\u00F3n\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n aria-expanded=\"true\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-activedescendant]=\"filteredOptions().length ? optionId(activeIndex()) : null\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown.arrowdown)=\"$event.preventDefault(); moveActive(1)\"\n (keydown.arrowup)=\"$event.preventDefault(); moveActive(-1)\"\n (keydown.enter)=\"$event.preventDefault(); selectActive()\"\n (keydown)=\"onSearchKeydown($event)\"\n />\n }\n <ul\n class=\"kf-select__list\"\n [id]=\"listboxId\"\n role=\"listbox\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-labelledby]=\"ariaLabel() ? null : triggerId\"\n >\n @for (option of filteredOptions(); track option.value; let i = $index) {\n <li\n class=\"kf-select__option\"\n [id]=\"optionId(i)\"\n [class.kf-select__option--selected]=\"option.value === value()\"\n [class.kf-select__option--active]=\"i === activeIndex()\"\n role=\"option\"\n tabindex=\"-1\"\n [attr.aria-selected]=\"option.value === value()\"\n [attr.aria-label]=\"optionAriaLabel(option)\"\n [class.kf-select__option--rich]=\"!!(option.tag || option.detail)\"\n (click)=\"select(option)\"\n (mouseenter)=\"activeIndex.set(i)\"\n (keydown)=\"onOptionKeydown($event, option, i)\"\n >\n @if (option.tag || option.detail) {\n <span class=\"kf-select__option-main\">\n <span class=\"kf-select__option-label\">{{ option.label }}</span>\n @if (option.tag) {\n <kf-badge class=\"kf-select__tag\">{{ option.tag }}</kf-badge>\n }\n </span>\n @if (option.detail) {\n <span class=\"kf-select__option-detail\">{{ option.detail }}</span>\n }\n } @else {\n {{ option.label }}\n }\n </li>\n } @empty {\n <li class=\"kf-select__empty\">\n {{ searchQuery() ? 'Sin resultados' : 'Sin opciones disponibles' }}\n </li>\n }\n </ul>\n </div>\n</ng-template>\n", styles: [".kf-caret{flex-shrink:0;width:8px;height:8px;border-right:2px solid var(--kf-color-text-muted);border-bottom:2px solid var(--kf-color-text-muted);transform:rotate(45deg);transition:transform .14s;margin-top:-4px}.kf-caret--open{transform:rotate(-135deg);margin-top:4px}.kf-field-hint{font-size:.75rem;color:var(--kf-color-text-muted)}.kf-field-error{display:flex;align-items:center;gap:var(--kf-space-xs);font-size:.75rem;font-weight:600;color:var(--kf-color-error-strong)}.kf-overline-text{font-family:var(--kf-font-title);font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}:host{display:flex;flex-direction:column;gap:var(--kf-space-xs);width:var(--kf-select-width-md);font-family:var(--kf-font-body)}:host(.kf-select--compact){width:max-content;max-width:160px}:host(.kf-select--width-sm){width:var(--kf-select-width-sm)}:host(.kf-select--width-lg){width:var(--kf-select-width-lg)}:host(.kf-select--width-full){width:100%}:host(.kf-select--width-fit){width:max-content;max-width:var(--kf-select-fit-max-width, 20rem)}:host(.kf-select--compact) .kf-select__trigger{padding:6px var(--kf-space-sm);font-size:.85rem;gap:var(--kf-space-xs)}:host(.kf-select--compact) .kf-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);width:100%;font:inherit;color:var(--kf-color-text);padding:var(--kf-space-sm) var(--kf-space-md);background:var(--kf-color-white);border:1px solid var(--kf-color-border-control);border-radius:var(--kf-radius-sm);cursor:pointer;transition:border-color .14s,box-shadow .14s}:host(.kf-select--size-sm){--kf-select-min-height: 2rem}:host(.kf-select--size-sm) .kf-select__trigger{box-sizing:border-box;min-height:var(--kf-select-min-height);padding-block:0}:host(.kf-select--size-sm:not(.kf-select--compact)) .kf-select__trigger{font-size:var(--kf-font-size-body-sm)}.kf-select__trigger:hover:not(:disabled){border-color:var(--kf-color-text-muted)}.kf-select__trigger:focus-visible{outline:none;border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus)}.kf-select__trigger--disabled{opacity:.5;cursor:not-allowed}.kf-select__trigger--invalid{border-color:var(--kf-color-error)}.kf-select__trigger--invalid:focus-visible{border-color:var(--kf-color-error);box-shadow:var(--kf-shadow-focus-error)}.kf-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-select__value--fit{display:grid;grid-template-columns:minmax(0,1fr);text-align:start}.kf-select__value-text{grid-area:1 / 1;overflow:hidden;text-overflow:ellipsis}.kf-select__sizer{grid-area:1 / 1;display:grid;height:0;overflow:hidden;visibility:hidden}.kf-select__sizer>span{grid-area:1 / 1;white-space:nowrap}.kf-select__icon{flex:none;color:var(--kf-color-text-muted)}.kf-select__trigger--with-icon .kf-select__value{flex:1 1 auto;min-width:0;text-align:start}:host(.kf-select--compact) .kf-select__trigger--with-icon .kf-select__value{color:var(--kf-color-ink);font-weight:600}.kf-select__trigger--tagged .kf-select__value{flex:1 1 auto;min-width:0;text-align:start}.kf-select__tag{flex:none}.kf-select__tag-slot{display:grid;flex:none;justify-items:end}.kf-select__tag-slot>.kf-select__tag{grid-area:1 / 1}.kf-select__tag--reserved{visibility:hidden}.kf-select__trigger .kf-select__tag{margin-block:-2px}.kf-select__prefix{flex:none;color:var(--kf-color-text-muted);white-space:nowrap}.kf-select__value--placeholder{color:var(--kf-color-text-muted)}.kf-select__panel{box-sizing:border-box;font-family:var(--kf-font-body);width:100%;background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);box-shadow:var(--kf-shadow-md);overflow:hidden}.kf-select__panel-title{padding:var(--kf-space-sm) var(--kf-space-md) var(--kf-space-xs)}.kf-select__panel--compact .kf-select__panel-title{padding:var(--kf-space-xs) var(--kf-space-sm) 2px}.kf-select__search{box-sizing:border-box;width:100%;font:inherit;font-family:var(--kf-font-body);color:var(--kf-color-text);padding:var(--kf-space-sm) var(--kf-space-md);border:none;border-bottom:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm) var(--kf-radius-sm) 0 0;outline:none}.kf-select__search:focus-visible{box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-select__list{box-sizing:border-box;width:100%;margin:0;padding:var(--kf-space-xs) 0;list-style:none;max-height:240px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--kf-color-gray-400) transparent}.kf-select__list::-webkit-scrollbar{width:6px}.kf-select__list::-webkit-scrollbar-track{background:transparent}.kf-select__list::-webkit-scrollbar-thumb{background-color:var(--kf-color-gray-400);border-radius:var(--kf-radius-pill)}.kf-select__list::-webkit-scrollbar-thumb:hover{background-color:var(--kf-color-gray-500)}.kf-select__option{padding:var(--kf-space-sm) var(--kf-space-md);outline:none;color:var(--kf-color-text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kf-select__option--rich{display:flex;flex-direction:column;gap:2px}.kf-select__option-main{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);min-width:0}.kf-select__option-label,.kf-select__option-detail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.kf-select__option-detail{font-size:var(--kf-font-size-body-sm);font-weight:400;color:var(--kf-color-text-muted)}.kf-select__panel--compact .kf-select__option{padding:6px var(--kf-space-sm);font-size:.85rem}.kf-select__option:hover{background:var(--kf-color-primary-soft)}.kf-select__option--selected{background:var(--kf-color-primary-soft);color:var(--kf-color-primary);font-weight:600}.kf-select__option--active{background:var(--kf-color-primary-soft)}.kf-select__option:focus-visible{background:var(--kf-color-primary-soft);box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-select__empty{text-align:center;padding:var(--kf-space-sm) var(--kf-space-md);color:var(--kf-color-text-muted)}\n"] }]
|
|
3418
|
+
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLabel", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchThreshold", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], panelTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelTitle", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panelTemplate: [{ type: i0.ViewChild, args: ['panelTemplate', { isSignal: true }] }], searchInputRef: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
|
|
3345
3419
|
|
|
3346
3420
|
const SIBLINGS = 1;
|
|
3347
3421
|
/**
|
|
@@ -3415,7 +3489,7 @@ class Pagination {
|
|
|
3415
3489
|
this.pageChange.emit(clamped);
|
|
3416
3490
|
}
|
|
3417
3491
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Pagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3418
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Pagination, isStandalone: true, selector: "kf-pagination", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pages: { classPropertyName: "pages", publicName: "pages", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSize: "pageSizeChange" }, ngImport: i0, template: "<div class=\"kf-pagination\">\n <div class=\"kf-pagination__info kf-caption-text\" aria-live=\"polite\">\n <ng-content />\n </div>\n\n <div class=\"kf-pagination__controls\">\n @if (pageSizeOptions().length > 0) {\n <div class=\"kf-pagination__size\">\n <span class=\"kf-pagination__size-label kf-caption-text\">Filas</span>\n <kf-select\n variant=\"compact\"\n ariaLabel=\"Filas por p\u00E1gina\"\n [options]=\"pageSizeSelectOptions()\"\n [value]=\"pageSizeValue()\"\n (valueChange)=\"setPageSize($event)\"\n />\n </div>\n @if (hasNav()) {\n <div class=\"kf-pagination__divider\" aria-hidden=\"true\"></div>\n }\n }\n\n @if (hasNav()) {\n <nav class=\"kf-pagination__nav\" aria-label=\"Paginaci\u00F3n\">\n <button\n type=\"button\"\n class=\"kf-pagination__control\"\n [disabled]=\"page() <= 1\"\n aria-label=\"P\u00E1gina anterior\"\n (click)=\"goTo(page() - 1)\"\n >\n \u2039\n </button>\n\n @for (item of items(); track $index) {\n @if (item.type === 'page') {\n <button\n type=\"button\"\n class=\"kf-pagination__page\"\n [class.kf-pagination__page--active]=\"item.page === page()\"\n [attr.aria-current]=\"item.page === page() ? 'page' : null\"\n [attr.aria-label]=\"'Ir a la p\u00E1gina ' + item.page\"\n (click)=\"goTo(item.page)\"\n >\n {{ item.page }}\n </button>\n } @else {\n <span class=\"kf-pagination__ellipsis\" aria-hidden=\"true\">\u2026</span>\n }\n }\n\n <button\n type=\"button\"\n class=\"kf-pagination__control\"\n [disabled]=\"page() >= pages()\"\n aria-label=\"P\u00E1gina siguiente\"\n (click)=\"goTo(page() + 1)\"\n >\n \u203A\n </button>\n </nav>\n }\n </div>\n</div>\n", styles: [".kf-caption-text{font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}:host{display:block;font-family:var(--kf-font-body)}.kf-pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-md);flex-wrap:wrap}.kf-pagination__info:empty{display:none}.kf-pagination__controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--kf-space-sm) var(--kf-space-md)}.kf-pagination__size{display:flex;align-items:center;gap:var(--kf-space-sm)}.kf-pagination__size-label{white-space:nowrap}.kf-pagination__divider{width:1px;height:1.25rem;background:var(--kf-color-border)}.kf-pagination__nav{display:flex;align-items:center;gap:var(--kf-space-xs)}.kf-pagination__control,.kf-pagination__page{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;padding:0 var(--kf-space-xs);font:inherit;font-size:.85rem;color:var(--kf-color-text);background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);cursor:pointer;transition:background .14s,border-color .14s,color .14s}.kf-pagination__control:hover:not(:disabled),.kf-pagination__page:hover:not(.kf-pagination__page--active){background:var(--kf-color-surface);border-color:var(--kf-color-border-strong)}.kf-pagination__control:focus-visible,.kf-pagination__page:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-pagination__control:disabled{opacity:.5;cursor:not-allowed}.kf-pagination__page--active{color:var(--kf-color-white);background:var(--kf-color-primary);border-color:var(--kf-color-primary);cursor:default}.kf-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;color:var(--kf-color-text-muted)}@media(max-width:480px){.kf-pagination__controls{width:100%}.kf-pagination__divider{display:none}}\n"], dependencies: [{ kind: "component", type: Select, selector: "kf-select", inputs: ["label", "hideLabel", "prefix", "options", "value", "placeholder", "disabled", "invalid", "errorMessage", "variant", "width", "searchable", "searchThreshold", "ariaLabel", "icon", "panelTitle", "panelWidth"], outputs: ["valueChange"] }] });
|
|
3492
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Pagination, isStandalone: true, selector: "kf-pagination", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pages: { classPropertyName: "pages", publicName: "pages", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSize: "pageSizeChange" }, ngImport: i0, template: "<div class=\"kf-pagination\">\n <div class=\"kf-pagination__info kf-caption-text\" aria-live=\"polite\">\n <ng-content />\n </div>\n\n <div class=\"kf-pagination__controls\">\n @if (pageSizeOptions().length > 0) {\n <div class=\"kf-pagination__size\">\n <span class=\"kf-pagination__size-label kf-caption-text\">Filas</span>\n <kf-select\n variant=\"compact\"\n ariaLabel=\"Filas por p\u00E1gina\"\n [options]=\"pageSizeSelectOptions()\"\n [value]=\"pageSizeValue()\"\n (valueChange)=\"setPageSize($event)\"\n />\n </div>\n @if (hasNav()) {\n <div class=\"kf-pagination__divider\" aria-hidden=\"true\"></div>\n }\n }\n\n @if (hasNav()) {\n <nav class=\"kf-pagination__nav\" aria-label=\"Paginaci\u00F3n\">\n <button\n type=\"button\"\n class=\"kf-pagination__control\"\n [disabled]=\"page() <= 1\"\n aria-label=\"P\u00E1gina anterior\"\n (click)=\"goTo(page() - 1)\"\n >\n \u2039\n </button>\n\n @for (item of items(); track $index) {\n @if (item.type === 'page') {\n <button\n type=\"button\"\n class=\"kf-pagination__page\"\n [class.kf-pagination__page--active]=\"item.page === page()\"\n [attr.aria-current]=\"item.page === page() ? 'page' : null\"\n [attr.aria-label]=\"'Ir a la p\u00E1gina ' + item.page\"\n (click)=\"goTo(item.page)\"\n >\n {{ item.page }}\n </button>\n } @else {\n <span class=\"kf-pagination__ellipsis\" aria-hidden=\"true\">\u2026</span>\n }\n }\n\n <button\n type=\"button\"\n class=\"kf-pagination__control\"\n [disabled]=\"page() >= pages()\"\n aria-label=\"P\u00E1gina siguiente\"\n (click)=\"goTo(page() + 1)\"\n >\n \u203A\n </button>\n </nav>\n }\n </div>\n</div>\n", styles: [".kf-caption-text{font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}:host{display:block;font-family:var(--kf-font-body)}.kf-pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-md);flex-wrap:wrap}.kf-pagination__info:empty{display:none}.kf-pagination__controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--kf-space-sm) var(--kf-space-md)}.kf-pagination__size{display:flex;align-items:center;gap:var(--kf-space-sm)}.kf-pagination__size-label{white-space:nowrap}.kf-pagination__divider{width:1px;height:1.25rem;background:var(--kf-color-border)}.kf-pagination__nav{display:flex;align-items:center;gap:var(--kf-space-xs)}.kf-pagination__control,.kf-pagination__page{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;padding:0 var(--kf-space-xs);font:inherit;font-size:.85rem;color:var(--kf-color-text);background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);cursor:pointer;transition:background .14s,border-color .14s,color .14s}.kf-pagination__control:hover:not(:disabled),.kf-pagination__page:hover:not(.kf-pagination__page--active){background:var(--kf-color-surface);border-color:var(--kf-color-border-strong)}.kf-pagination__control:focus-visible,.kf-pagination__page:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-pagination__control:disabled{opacity:.5;cursor:not-allowed}.kf-pagination__page--active{color:var(--kf-color-white);background:var(--kf-color-primary);border-color:var(--kf-color-primary);cursor:default}.kf-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;color:var(--kf-color-text-muted)}@media(max-width:480px){.kf-pagination__controls{width:100%}.kf-pagination__divider{display:none}}\n"], dependencies: [{ kind: "component", type: Select, selector: "kf-select", inputs: ["label", "hideLabel", "prefix", "options", "value", "placeholder", "disabled", "invalid", "required", "errorMessage", "variant", "width", "size", "searchable", "searchThreshold", "ariaLabel", "icon", "panelTitle", "panelWidth"], outputs: ["valueChange"] }] });
|
|
3419
3493
|
}
|
|
3420
3494
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Pagination, decorators: [{
|
|
3421
3495
|
type: Component,
|
|
@@ -3592,9 +3666,11 @@ const DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50];
|
|
|
3592
3666
|
* por página" viene activo por defecto con `DEFAULT_PAGE_SIZE_OPTIONS`
|
|
3593
3667
|
* ([10, 25, 50], estándar del portal) — pasar `pageSizeOptions` propio lo
|
|
3594
3668
|
* pisa, y pasar `[]` lo desactiva (paginación sin selector). `itemLabel`
|
|
3595
|
-
* completa el texto informativo ("1–10 de 42 beneficios")
|
|
3669
|
+
* completa el texto informativo ("1–10 de 42 beneficios"); con
|
|
3670
|
+
* `{ one, other }` usa el singular cuando el total es 1 ("1–1 de 1 beneficio").
|
|
3596
3671
|
*
|
|
3597
3672
|
* <kf-data-table [columns]="columns" [rows]="rows" [pageSize]="25" itemLabel="beneficios" />
|
|
3673
|
+
* <kf-data-table [columns]="columns" [rows]="rows" [pageSize]="25" [itemLabel]="{ one: 'unidad', other: 'unidades' }" />
|
|
3598
3674
|
* <kf-data-table [columns]="columns" [rows]="rows" [pageSize]="25" [pageSizeOptions]="[]" />
|
|
3599
3675
|
*
|
|
3600
3676
|
* La página es `[(page)]` (el consumidor puede llevarla a la URL) y se
|
|
@@ -3903,9 +3979,12 @@ class DataTable {
|
|
|
3903
3979
|
pageSizeChange = output();
|
|
3904
3980
|
/** Nombre de la entidad listada (ej. "beneficios", "facturas"), en
|
|
3905
3981
|
* plural — se agrega al final del texto informativo de la paginación
|
|
3906
|
-
* interna ("1–5 de 7 beneficios").
|
|
3907
|
-
*
|
|
3908
|
-
*
|
|
3982
|
+
* interna ("1–5 de 7 beneficios"). Acepta `{ one, other }` para usar el
|
|
3983
|
+
* singular cuando el total es 1 ("1–1 de 1 beneficio"); un `string`
|
|
3984
|
+
* conserva el comportamiento de siempre (mismo texto para cualquier
|
|
3985
|
+
* total). Sin esto, el texto queda solo con números ("1–5 de 7"): la
|
|
3986
|
+
* librería no impone un idioma ni un nombre fijo, cada consumidor decide
|
|
3987
|
+
* el suyo. */
|
|
3909
3988
|
itemLabel = input('', /* @ts-ignore */
|
|
3910
3989
|
...(ngDevMode ? [{ debugName: "itemLabel" }] : /* istanbul ignore next */ []));
|
|
3911
3990
|
internalPageSize = signal(null, /* @ts-ignore */
|
|
@@ -3970,7 +4049,8 @@ class DataTable {
|
|
|
3970
4049
|
}
|
|
3971
4050
|
const start = (this.page() - 1) * size + 1;
|
|
3972
4051
|
const end = Math.min(start + size - 1, total);
|
|
3973
|
-
const
|
|
4052
|
+
const itemLabel = this.itemLabel();
|
|
4053
|
+
const label = typeof itemLabel === 'string' ? itemLabel : total === 1 ? itemLabel.one : itemLabel.other;
|
|
3974
4054
|
return label ? `${start}–${end} de ${total} ${label}` : `${start}–${end} de ${total}`;
|
|
3975
4055
|
}, /* @ts-ignore */
|
|
3976
4056
|
...(ngDevMode ? [{ debugName: "paginationSummary" }] : /* istanbul ignore next */ []));
|
|
@@ -4304,11 +4384,11 @@ class DataTable {
|
|
|
4304
4384
|
this.stickyOffsets.set(offsets);
|
|
4305
4385
|
}
|
|
4306
4386
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4307
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataTable, isStandalone: true, selector: "kf-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, skeletonRows: { classPropertyName: "skeletonRows", publicName: "skeletonRows", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null }, cardable: { classPropertyName: "cardable", publicName: "cardable", isSignal: true, isRequired: false, transformFunction: null }, defaultView: { classPropertyName: "defaultView", publicName: "defaultView", isSignal: true, isRequired: false, transformFunction: null }, showViewToggle: { classPropertyName: "showViewToggle", publicName: "showViewToggle", isSignal: true, isRequired: false, transformFunction: null }, cardMinWidth: { classPropertyName: "cardMinWidth", publicName: "cardMinWidth", isSignal: true, isRequired: false, transformFunction: null }, render: { classPropertyName: "render", publicName: "render", isSignal: true, isRequired: false, transformFunction: null }, cellTemplates: { classPropertyName: "cellTemplates", publicName: "cellTemplates", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, rowClickable: { classPropertyName: "rowClickable", publicName: "rowClickable", isSignal: true, isRequired: false, transformFunction: null }, rowFocusable: { classPropertyName: "rowFocusable", publicName: "rowFocusable", isSignal: true, isRequired: false, transformFunction: null }, cellAriaLabel: { classPropertyName: "cellAriaLabel", publicName: "cellAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, currentRowKey: { classPropertyName: "currentRowKey", publicName: "currentRowKey", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, keepPageOnRowsChange: { classPropertyName: "keepPageOnRowsChange", publicName: "keepPageOnRowsChange", isSignal: true, isRequired: false, transformFunction: null }, itemLabel: { classPropertyName: "itemLabel", publicName: "itemLabel", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick", cellClick: "cellClick", page: "pageChange", pageSizeChange: "pageSizeChange", sortChange: "sortChange", view: "viewChange" }, viewQueries: [{ propertyName: "scrollEl", first: true, predicate: ["scroll"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"kf-data-table\"\n [class.kf-data-table--flush]=\"flush()\"\n [class.kf-data-table--compact]=\"density() === 'compact'\"\n>\n @if (cardable() && showViewToggle()) {\n <div class=\"kf-data-table__toolbar\">\n <kf-view-toggle [view]=\"activeView()\" (viewChange)=\"setView($event)\" />\n </div>\n }\n\n @if (loading()) {\n @if (cardable() && activeView() === 'cards') {\n <div\n class=\"kf-data-table__cards\"\n aria-busy=\"true\"\n [style.--kf-data-table-card-min]=\"cardMinWidth()\"\n >\n @for (i of skeletonRowIndexes(); track i) {\n <div class=\"kf-data-table__card\" aria-hidden=\"true\">\n @if (cardMediaColumn() || cardTitleColumn() || cardStatusColumns().length) {\n <div class=\"kf-data-table__card-header\">\n @if (cardMediaColumn()) {\n <div class=\"kf-data-table__card-media\">\n <span class=\"kf-data-table__sk-media kf-bone-fill\"></span>\n </div>\n }\n <div class=\"kf-data-table__card-heading\">\n <span\n class=\"kf-data-table__card-title kf-bone\"\n [class.kf-data-table__card-title--mono]=\"cardTitleColumn()?.mono\"\n style=\"--kf-bone-width: 8rem\"\n >COT-2026-0000</span\n >\n @if (cardStatusColumns().length) {\n <span class=\"kf-data-table__card-statuses\">\n <span class=\"kf-data-table__sk-pill kf-bone-fill\"></span>\n </span>\n }\n </div>\n </div>\n }\n\n @if (cardLeadColumns().length || cardFieldColumns().length) {\n <div class=\"kf-data-table__card-fields\">\n @for (column of cardLeadColumns(); track column.key) {\n <div\n class=\"kf-data-table__card-lead\"\n [style.--kf-data-table-card-clamp]=\"column.cardClamp\"\n >\n <span class=\"kf-data-table__sk-lead kf-bone\" style=\"--kf-bone-width: 90%\"\n >Texto</span\n >\n </div>\n }\n @for (column of cardFieldColumns(); track column.key; let first = $first) {\n <div class=\"kf-data-table__card-field\">\n <span\n class=\"kf-data-table__card-label kf-overline-text kf-bone\"\n style=\"--kf-bone-width: 5rem\"\n >{{ column.label }}</span\n >\n @if (first && !skeletonCardHeader()) {\n <kf-skeleton class=\"kf-data-table__sk-value\" width=\"100%\" />\n } @else {\n <span class=\"kf-data-table__sk-value kf-bone\" style=\"--kf-bone-width: 40%\"\n >Valor</span\n >\n }\n </div>\n }\n </div>\n }\n\n @if (cardMetaColumns().length) {\n <div class=\"kf-data-table__card-meta\">\n @for (column of cardMetaColumns(); track column.key) {\n <div\n class=\"kf-data-table__card-meta-item\"\n [class.kf-data-table__card-meta-item--end]=\"\n isEndAligned(column) || column.emphasis\n \"\n [class.kf-data-table__card-meta-item--emphasis]=\"column.emphasis\"\n [style.flex-basis]=\"column.width\"\n >\n <span\n class=\"kf-data-table__card-label kf-overline-text kf-bone\"\n style=\"--kf-bone-width: 4rem\"\n >{{ column.label }}</span\n >\n <span\n class=\"kf-data-table__card-meta-value kf-bone\"\n style=\"--kf-bone-width: 5rem\"\n >Valor</span\n >\n </div>\n }\n </div>\n }\n\n @if (cardActionColumns().length) {\n <div class=\"kf-data-table__card-actions\">\n <span class=\"kf-data-table__sk-action kf-bone-fill\"></span>\n </div>\n }\n </div>\n }\n </div>\n } @else {\n <div\n class=\"kf-data-table__scroll\"\n [class.kf-data-table__scroll--weighted]=\"weighted()\"\n aria-busy=\"true\"\n >\n <table class=\"kf-data-table__table\" [class.kf-data-table__table--weighted]=\"weighted()\">\n <thead>\n <tr>\n @for (column of columns(); track column.key) {\n <th\n class=\"kf-overline-text\"\n [class]=\"column.className\"\n [class.kf-data-table__cell--right]=\"isEndAligned(column)\"\n [class.kf-data-table__cell--center]=\"column.align === 'center'\"\n [style.min-width]=\"minWidthFor(column)\"\n [style.width]=\"widthFor(column)\"\n [style.max-width]=\"maxWidthFor(column)\"\n >\n @if (column.hideLabel) {\n <span class=\"kf-data-table__sr-only\">{{ column.label }}</span>\n } @else {\n {{ column.label }}\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (i of skeletonRowIndexes(); track i) {\n <tr class=\"kf-data-table__row\">\n @for (column of columns(); track column.key; let c = $index) {\n <td\n [class]=\"column.className\"\n [class.kf-data-table__cell--right]=\"isEndAligned(column)\"\n [class.kf-data-table__cell--center]=\"column.align === 'center'\"\n [style.min-width]=\"minWidthFor(column)\"\n [style.width]=\"widthFor(column)\"\n [style.max-width]=\"maxWidthFor(column)\"\n >\n <div\n class=\"kf-data-table__sk-cell\"\n [class.kf-data-table__sk-cell--end]=\"isEndAligned(column)\"\n [class.kf-data-table__sk-cell--center]=\"column.align === 'center'\"\n >\n <kf-skeleton\n class=\"kf-data-table__sk-bar\"\n [style.width]=\"skeletonBarWidth(column, i, c)\"\n />\n </div>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n } @else if (rows().length === 0) {\n <div class=\"kf-data-table__empty\">\n <ng-content select=\"[empty]\" />\n </div>\n } @else if (activeView() === 'table') {\n <div\n #scroll\n class=\"kf-data-table__scroll\"\n [class.kf-data-table__scroll--fade-left]=\"canScrollLeft()\"\n [class.kf-data-table__scroll--fade-right]=\"canScrollRight()\"\n [class.kf-data-table__scroll--weighted]=\"weighted()\"\n [attr.tabindex]=\"hasOverflow() ? 0 : null\"\n [attr.role]=\"hasOverflow() ? 'region' : null\"\n [attr.aria-label]=\"hasOverflow() ? ariaLabel() : null\"\n >\n <table class=\"kf-data-table__table\" [class.kf-data-table__table--weighted]=\"weighted()\">\n <thead>\n <tr>\n @for (column of columns(); track column.key) {\n <th\n class=\"kf-overline-text\"\n [attr.data-column-key]=\"column.key\"\n [class]=\"column.className\"\n [class.kf-data-table__cell--right]=\"isEndAligned(column)\"\n [class.kf-data-table__cell--center]=\"column.align === 'center'\"\n [class.kf-data-table__cell--truncate]=\"column.truncate\"\n [class.kf-data-table__cell--sortable]=\"column.sortable\"\n [class.kf-data-table__cell--sticky]=\"column.sticky\"\n [class.kf-data-table__cell--sort-active]=\"sortDirectionFor(column) !== null\"\n [style]=\"stickyStyle(column)\"\n [style.min-width]=\"minWidthFor(column)\"\n [style.width]=\"widthFor(column)\"\n [style.max-width]=\"maxWidthFor(column)\"\n [attr.aria-sort]=\"column.sortable ? ariaSortFor(column) : null\"\n (click)=\"toggleSort(column)\"\n >\n @if (column.sortable) {\n <!-- El clic del bot\u00F3n burbujea al `th`, que ya ordena: un solo manejador para mouse y teclado. -->\n <button type=\"button\" class=\"kf-data-table__sort-button\">\n <span class=\"kf-data-table__th-content\">\n <ng-container\n [ngTemplateOutlet]=\"headerLabel\"\n [ngTemplateOutletContext]=\"{ $implicit: column }\"\n />\n <kf-icon\n name=\"chevron-down\"\n size=\"sm\"\n [rotate]=\"sortDirectionFor(column) === 'asc' ? 180 : 0\"\n class=\"kf-data-table__sort-icon\"\n [class.kf-data-table__sort-icon--active]=\"sortDirectionFor(column) !== null\"\n />\n </span>\n </button>\n } @else {\n <span class=\"kf-data-table__th-content\">\n <ng-container\n [ngTemplateOutlet]=\"headerLabel\"\n [ngTemplateOutletContext]=\"{ $implicit: column }\"\n />\n </span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of displayedRows(); track trackRow(row, $index); let i = $index) {\n <tr\n class=\"kf-data-table__row\"\n [class.kf-data-table__row--interactive]=\"rowInteractive()\"\n [class.kf-data-table__row--current]=\"isCurrentRow(row, i)\"\n [attr.aria-current]=\"isCurrentRow(row, i) ? 'true' : null\"\n [attr.tabindex]=\"rowTabStop() ? 0 : null\"\n (click)=\"onRowClick(row, i, $event)\"\n (keydown.enter)=\"onRowClick(row, i, $event)\"\n (keydown.space)=\"onRowSpace($event, row, i)\"\n >\n @for (column of columns(); track column.key) {\n <td\n [attr.data-column-key]=\"column.key\"\n [class]=\"column.className\"\n [class.kf-data-table__cell--right]=\"isEndAligned(column)\"\n [class.kf-data-table__cell--center]=\"column.align === 'center'\"\n [class.kf-data-table__cell--truncate]=\"column.truncate\"\n [class.kf-data-table__cell--mono]=\"column.mono\"\n [class.kf-data-table__cell--emphasis]=\"column.emphasis\"\n [class.kf-data-table__cell--sticky]=\"column.sticky\"\n [style]=\"stickyStyle(column)\"\n [style.min-width]=\"minWidthFor(column)\"\n [style.width]=\"widthFor(column)\"\n [style.max-width]=\"maxWidthFor(column)\"\n >\n @if (column.truncate) {\n <span class=\"kf-data-table__truncate\" [attr.title]=\"truncateTitle(row, column)\">\n <ng-container\n [ngTemplateOutlet]=\"tableCell\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n </span>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"tableCell\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n }\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n } @else {\n <div class=\"kf-data-table__cards\" [style.--kf-data-table-card-min]=\"cardMinWidth()\">\n @for (row of displayedRows(); track trackRow(row, $index); let i = $index) {\n <div\n class=\"kf-data-table__card\"\n [class.kf-data-table__card--interactive]=\"cardInteractive()\"\n [class.kf-data-table__card--current]=\"isCurrentRow(row, i)\"\n [attr.aria-current]=\"isCurrentRow(row, i) ? 'true' : null\"\n [attr.role]=\"cardInteractive() ? 'button' : null\"\n [attr.tabindex]=\"cardInteractive() ? 0 : null\"\n (click)=\"cardInteractive() ? onRowClick(row, i, $event) : undefined\"\n (keydown.enter)=\"cardInteractive() ? onRowClick(row, i, $event) : undefined\"\n (keydown.space)=\"cardInteractive() ? onRowSpace($event, row, i) : undefined\"\n >\n @if (cardMediaColumn() || cardTitleColumn() || cardStatusColumns().length) {\n <div class=\"kf-data-table__card-header\">\n @if (cardMediaColumn(); as media) {\n <div class=\"kf-data-table__card-media\">\n @if (cellTemplates()?.[media.key]; as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: i, column: media }\"\n />\n } @else {\n <img [src]=\"cellValue(row, media)\" alt=\"\" />\n }\n </div>\n }\n <div class=\"kf-data-table__card-heading\">\n @if (cardTitleColumn(); as title) {\n <span\n class=\"kf-data-table__card-title\"\n [class.kf-data-table__card-title--mono]=\"title.mono\"\n >\n <ng-container\n [ngTemplateOutlet]=\"cardCell\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: title, index: i }\"\n />\n </span>\n }\n @if (cardStatusColumns().length) {\n <span class=\"kf-data-table__card-statuses\">\n @for (column of cardStatusColumns(); track column.key) {\n <ng-container\n [ngTemplateOutlet]=\"cardCell\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n }\n </span>\n }\n </div>\n </div>\n }\n\n @if (cardLeadColumns().length || cardFieldColumns().length) {\n <div class=\"kf-data-table__card-fields\">\n @for (column of cardLeadColumns(); track column.key) {\n <div\n class=\"kf-data-table__card-lead\"\n [style.--kf-data-table-card-clamp]=\"column.cardClamp\"\n [attr.title]=\"cellValue(row, column) || null\"\n >\n <span class=\"kf-data-table__sr-only\">{{ column.label }}: </span>\n <ng-container\n [ngTemplateOutlet]=\"cardCell\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n </div>\n }\n @for (column of cardFieldColumns(); track column.key) {\n <div class=\"kf-data-table__card-field\">\n <span class=\"kf-data-table__card-label kf-overline-text\">{{ column.label }}</span>\n <span\n class=\"kf-data-table__card-value\"\n [class.kf-data-table__card-value--emphasis]=\"column.emphasis\"\n >\n <ng-container\n [ngTemplateOutlet]=\"cardCell\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n </span>\n </div>\n }\n </div>\n }\n\n @if (cardMetaColumns().length) {\n <div class=\"kf-data-table__card-meta\">\n @for (column of cardMetaColumns(); track column.key) {\n <div\n class=\"kf-data-table__card-meta-item\"\n [class.kf-data-table__card-meta-item--end]=\"\n isEndAligned(column) || column.emphasis\n \"\n [class.kf-data-table__card-meta-item--emphasis]=\"column.emphasis\"\n [style.flex-basis]=\"column.width\"\n >\n <span class=\"kf-data-table__card-label kf-overline-text\">{{ column.label }}</span>\n <span class=\"kf-data-table__card-meta-value\">\n <ng-container\n [ngTemplateOutlet]=\"cardCell\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n </span>\n </div>\n }\n </div>\n }\n\n @if (cardActionColumns().length) {\n <div class=\"kf-data-table__card-actions\">\n @for (column of cardActionColumns(); track column.key) {\n <ng-container\n [ngTemplateOutlet]=\"cardCell\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n }\n </div>\n }\n </div>\n }\n </div>\n }\n\n @if (!loading() && rows().length > 0) {\n <div class=\"kf-data-table__footer\">\n @if (effectivePageSize()) {\n <kf-pagination\n [page]=\"page()\"\n [pages]=\"totalPages()\"\n [pageSizeOptions]=\"pageSizeOptions()\"\n [pageSize]=\"effectivePageSize()\"\n (pageChange)=\"goToPage($event)\"\n (pageSizeChange)=\"setPageSize($event)\"\n >\n {{ paginationSummary() }}\n </kf-pagination>\n }\n <ng-content select=\"[footer]\" />\n </div>\n }\n</div>\n\n<!-- R\u00F3tulo de una columna: texto visible o solo para lectores con `hideLabel`. -->\n<ng-template #headerLabel let-column>\n @if (column.hideLabel) {\n <span class=\"kf-data-table__sr-only\">{{ column.label }}</span>\n } @else {\n {{ column.label }}\n }\n</ng-template>\n\n<!-- Celda de la vista tabla \u2014 compartida por la celda normal y la `truncate`.\n Una columna `interactive` envuelve su contenido en un bot\u00F3n real. -->\n<ng-template #tableCell let-row let-column=\"column\" let-i=\"index\">\n @if (column.interactive) {\n <button\n type=\"button\"\n class=\"kf-data-table__cell-button\"\n [attr.aria-label]=\"cellLabel(row, column, i)\"\n (click)=\"onCellClick(row, column, i)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"tableCellContent\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n </button>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"tableCellContent\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n }\n</ng-template>\n\n<!-- Contenido de una celda de la vista tabla (template del consumidor,\n thumbnail o texto). -->\n<ng-template #tableCellContent let-row let-column=\"column\" let-i=\"index\">\n @if (cellTemplates()?.[column.key]; as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: i, column: column }\"\n />\n } @else if (column.cardRole === 'media') {\n <img class=\"kf-data-table__thumb\" [src]=\"cellValue(row, column)\" alt=\"\" />\n } @else {\n {{ cellValue(row, column) }}\n }\n</ng-template>\n\n<!-- Zona de la tarjeta: igual que la celda de tabla, con bot\u00F3n si la columna es `interactive`. -->\n<ng-template #cardCell let-row let-column=\"column\" let-i=\"index\">\n @if (column.interactive) {\n <button\n type=\"button\"\n class=\"kf-data-table__cell-button\"\n [attr.aria-label]=\"cellLabel(row, column, i)\"\n (click)=\"onCellClick(row, column, i)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"cardCellContent\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n </button>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"cardCellContent\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n }\n</ng-template>\n\n<!-- Contenido de una zona de la tarjeta: template del consumidor o el valor como texto. -->\n<ng-template #cardCellContent let-row let-column=\"column\" let-i=\"index\">\n @if (cellTemplates()?.[column.key]; as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: i, column: column }\"\n />\n } @else {\n {{ cellValue(row, column) }}\n }\n</ng-template>\n", styles: [".kf-overline-text{font-family:var(--kf-font-title);font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-bone-shimmer 1.4s ease infinite}.kf-bone{display:block;box-sizing:border-box;width:var(--kf-bone-width, 60%);max-width:100%;overflow:hidden;white-space:nowrap;border-radius:var(--kf-radius-xs);-webkit-user-select:none;user-select:none;pointer-events:none}.kf-bone.kf-bone{color:transparent!important}.kf-bone>*{visibility:hidden}@keyframes kf-bone-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{animation:none;background:var(--kf-color-border)}}:host{display:block;font-family:var(--kf-font-body)}.kf-data-table{background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-sm);overflow:hidden}.kf-data-table--flush{border:none;box-shadow:none;border-radius:0}.kf-data-table__toolbar{display:flex;justify-content:flex-end;padding:var(--kf-space-sm) var(--kf-space-md);border-bottom:1px solid var(--kf-color-border)}.kf-data-table__scroll{position:relative;overflow-x:auto}.kf-data-table__scroll--weighted{container-type:inline-size}.kf-data-table__scroll:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-data-table__scroll:before,.kf-data-table__scroll:after{content:\"\";position:absolute;top:0;bottom:0;width:24px;pointer-events:none;opacity:0;transition:opacity .14s}.kf-data-table__scroll:before{left:0;background:linear-gradient(to right,var(--kf-color-white),transparent)}.kf-data-table__scroll:after{right:0;background:linear-gradient(to left,var(--kf-color-white),transparent)}.kf-data-table__scroll--fade-left:before{opacity:1}.kf-data-table__scroll--fade-right:after{opacity:1}.kf-data-table__table{width:100%;border-collapse:collapse;text-align:left}.kf-data-table__table th,.kf-data-table__table td{padding:var(--kf-space-sm) var(--kf-space-md);border-bottom:1px solid var(--kf-color-border);white-space:nowrap}.kf-data-table--compact .kf-data-table__table th,.kf-data-table--compact .kf-data-table__table td{padding:var(--kf-space-xs) var(--kf-space-md)}.kf-data-table__table th{background:var(--kf-color-surface)}.kf-data-table__table td{color:var(--kf-color-text)}.kf-data-table__table tbody tr:last-child td{border-bottom:none}.kf-data-table__row{transition:background .14s}.kf-data-table__row--interactive{cursor:pointer}.kf-data-table__row--interactive:hover{background:var(--kf-color-primary-soft)}.kf-data-table__row--interactive:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-data-table__row--current{background:var(--kf-color-primary-soft)}.kf-data-table__cell--right{text-align:right}.kf-data-table__cell--center{text-align:center}.kf-data-table__table .kf-data-table__cell--truncate{max-width:0}.kf-data-table__truncate{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-data-table__table td.kf-data-table__cell--mono{font-family:var(--kf-font-mono);font-size:var(--kf-font-size-body-sm)}.kf-data-table__table td.kf-data-table__cell--emphasis{font-weight:700;color:var(--kf-color-ink);font-variant-numeric:tabular-nums}.kf-data-table__sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.kf-data-table__cell-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--kf-space-xs);max-width:100%;min-width:32px;min-height:32px;padding:var(--kf-space-xs);border:0;border-radius:var(--kf-radius-xs);background:transparent;color:inherit;font:inherit;text-align:inherit;cursor:pointer}.kf-data-table__cell-button:hover{box-shadow:inset 0 0 0 1px var(--kf-color-border-strong)}.kf-data-table__cell-button:focus-visible{outline:2px solid transparent;outline-offset:-2px;box-shadow:inset 0 0 0 2px var(--kf-color-primary)}@media(max-width:640px),(pointer:coarse){.kf-data-table__cell-button{min-width:44px;min-height:44px}}.kf-data-table__cell--sticky{background:var(--kf-color-white)}.kf-data-table__table th.kf-data-table__cell--sticky{background:var(--kf-color-surface);z-index:2}.kf-data-table__cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.kf-data-table__sort-button{display:inline-flex;align-items:center;margin:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;text-align:inherit;background:none;border:none;border-radius:var(--kf-radius-xs);cursor:pointer}.kf-data-table__sort-button:focus-visible{outline:2px solid transparent;box-shadow:var(--kf-shadow-focus)}.kf-data-table__cell--sortable:hover{color:var(--kf-color-ink)}.kf-data-table__table th.kf-data-table__cell--sort-active{color:var(--kf-color-primary);font-weight:700}.kf-data-table__th-content{display:inline-flex;align-items:center;gap:var(--kf-space-xs)}.kf-data-table__sort-icon{transition:opacity .14s}.kf-data-table__cell--sortable:hover .kf-data-table__sort-icon{opacity:.5}.kf-data-table__sort-icon--active,.kf-data-table__cell--sortable:hover .kf-data-table__sort-icon--active{opacity:1}.kf-data-table__empty{padding:var(--kf-space-md)}.kf-data-table__footer{padding:var(--kf-space-sm) var(--kf-space-md);border-top:1px solid var(--kf-color-border)}.kf-data-table__footer:empty{display:none}.kf-data-table__cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--kf-data-table-card-min, 220px),100%),1fr));grid-auto-rows:1fr;gap:var(--kf-space-md);padding:var(--kf-space-md)}.kf-data-table__card{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);overflow:hidden;transition:border-color .14s,box-shadow .14s,background .14s}.kf-data-table__card--interactive{cursor:pointer}.kf-data-table__card:hover{border-color:var(--kf-color-border-strong);box-shadow:var(--kf-shadow-xs)}.kf-data-table__card--interactive:hover{background:var(--kf-color-primary-soft)}.kf-data-table__card--interactive:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:var(--kf-shadow-focus)}.kf-data-table__card--current{border-color:var(--kf-color-primary);background:var(--kf-color-primary-soft)}.kf-data-table__card-header{display:flex;align-items:center;gap:var(--kf-space-sm);min-width:0;padding:var(--kf-space-md) var(--kf-space-md) var(--kf-space-sm)}.kf-data-table__card-media{flex:none}.kf-data-table__card-media img,.kf-data-table__thumb{display:block;width:48px;height:48px;border-radius:var(--kf-radius-xs);object-fit:cover;background:var(--kf-color-surface)}.kf-data-table__card-heading{display:flex;flex:1;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);min-width:0}.kf-data-table__card-title{flex:0 1 auto;min-width:0;font-family:var(--kf-font-title);font-weight:600;color:var(--kf-color-ink);overflow-wrap:anywhere}.kf-data-table__card-title--mono{flex:none;font-family:var(--kf-font-mono);font-size:var(--kf-font-size-body-sm);white-space:nowrap}.kf-data-table__card-statuses{display:flex;flex:0 1 auto;flex-wrap:nowrap;justify-content:flex-end;gap:var(--kf-space-xs);min-width:0;overflow:hidden}.kf-data-table__card-actions{display:flex;flex-wrap:wrap;gap:var(--kf-space-xs)}.kf-data-table__card-fields{display:flex;flex-direction:column;gap:var(--kf-space-xs);min-width:0;padding:var(--kf-space-md)}.kf-data-table__card-header+.kf-data-table__card-fields{padding-top:0}.kf-data-table__card-lead{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--kf-data-table-card-clamp, 2);line-clamp:var(--kf-data-table-card-clamp, 2);min-width:0;overflow:hidden;overflow-wrap:anywhere;color:var(--kf-color-ink);font-weight:500;line-height:1.35}.kf-data-table__card-field{display:flex;justify-content:space-between;gap:var(--kf-space-sm);min-width:0}.kf-data-table__card-label{flex:none}.kf-data-table__card-value{min-width:0;color:var(--kf-color-text);text-align:right;overflow-wrap:anywhere}.kf-data-table__card-value--emphasis,.kf-data-table__card-meta-item--emphasis .kf-data-table__card-meta-value{font-weight:700;color:var(--kf-color-ink);font-variant-numeric:tabular-nums}.kf-data-table__card-meta{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--kf-space-xs) var(--kf-space-md);margin-top:auto;padding:var(--kf-space-sm) var(--kf-space-md) var(--kf-space-md);border-top:1px solid var(--kf-color-border)}.kf-data-table__card-meta-item{display:flex;flex-direction:column;gap:2px;min-width:0}.kf-data-table__card-meta-item--end{margin-left:auto;align-items:flex-end;text-align:right}.kf-data-table__card-meta-value{color:var(--kf-color-text);font-variant-numeric:tabular-nums}.kf-data-table__card-meta-item--emphasis .kf-data-table__card-meta-value{font-size:var(--kf-font-size-body)}.kf-data-table__card-actions{justify-content:flex-end;margin-top:auto;padding:var(--kf-space-sm) var(--kf-space-md);border-top:1px solid var(--kf-color-border);background:var(--kf-color-surface)}.kf-data-table__card-meta~.kf-data-table__card-actions{margin-top:0}.kf-data-table__thumb{width:32px;height:32px}@media(prefers-reduced-motion:reduce){.kf-data-table__card,.kf-data-table__row{transition:none}}.kf-data-table__sk-cell{display:flex;align-items:center;justify-content:flex-start;min-height:1lh}.kf-data-table__sk-cell--center{justify-content:center}.kf-data-table__sk-cell--end{justify-content:flex-end}.kf-data-table__sk-bar{flex:none}.kf-data-table__sk-media{display:block;width:48px;height:48px;border-radius:var(--kf-radius-xs)}.kf-data-table__sk-pill{display:block;width:4.5rem;height:1.25rem;border-radius:var(--kf-radius-pill)}.kf-data-table__sk-value{flex:none;width:40%}.kf-data-table__sk-lead{line-height:1.35}.kf-data-table__sk-action{display:block;width:5rem;height:2rem;border-radius:var(--kf-radius-sm)}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Pagination, selector: "kf-pagination", inputs: ["page", "pages", "pageSizeOptions", "pageSize"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: Skeleton, selector: "kf-skeleton", inputs: ["variant", "width", "height"] }, { kind: "component", type: ViewToggle, selector: "kf-view-toggle", inputs: ["view", "iconOnly", "tableLabel", "cardsLabel", "ariaLabel"], outputs: ["viewChange"] }] });
|
|
4387
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataTable, isStandalone: true, selector: "kf-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, skeletonRows: { classPropertyName: "skeletonRows", publicName: "skeletonRows", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null }, cardable: { classPropertyName: "cardable", publicName: "cardable", isSignal: true, isRequired: false, transformFunction: null }, defaultView: { classPropertyName: "defaultView", publicName: "defaultView", isSignal: true, isRequired: false, transformFunction: null }, showViewToggle: { classPropertyName: "showViewToggle", publicName: "showViewToggle", isSignal: true, isRequired: false, transformFunction: null }, cardMinWidth: { classPropertyName: "cardMinWidth", publicName: "cardMinWidth", isSignal: true, isRequired: false, transformFunction: null }, render: { classPropertyName: "render", publicName: "render", isSignal: true, isRequired: false, transformFunction: null }, cellTemplates: { classPropertyName: "cellTemplates", publicName: "cellTemplates", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, rowClickable: { classPropertyName: "rowClickable", publicName: "rowClickable", isSignal: true, isRequired: false, transformFunction: null }, rowFocusable: { classPropertyName: "rowFocusable", publicName: "rowFocusable", isSignal: true, isRequired: false, transformFunction: null }, cellAriaLabel: { classPropertyName: "cellAriaLabel", publicName: "cellAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, currentRowKey: { classPropertyName: "currentRowKey", publicName: "currentRowKey", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, keepPageOnRowsChange: { classPropertyName: "keepPageOnRowsChange", publicName: "keepPageOnRowsChange", isSignal: true, isRequired: false, transformFunction: null }, itemLabel: { classPropertyName: "itemLabel", publicName: "itemLabel", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick", cellClick: "cellClick", page: "pageChange", pageSizeChange: "pageSizeChange", sortChange: "sortChange", view: "viewChange" }, viewQueries: [{ propertyName: "scrollEl", first: true, predicate: ["scroll"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"kf-data-table\"\n [class.kf-data-table--flush]=\"flush()\"\n [class.kf-data-table--compact]=\"density() === 'compact'\"\n>\n @if (cardable() && showViewToggle()) {\n <div class=\"kf-data-table__toolbar\">\n <kf-view-toggle [view]=\"activeView()\" (viewChange)=\"setView($event)\" />\n </div>\n }\n\n @if (loading()) {\n @if (cardable() && activeView() === 'cards') {\n <div\n class=\"kf-data-table__cards\"\n aria-busy=\"true\"\n [style.--kf-data-table-card-min]=\"cardMinWidth()\"\n >\n @for (i of skeletonRowIndexes(); track i) {\n <div class=\"kf-data-table__card\" aria-hidden=\"true\">\n @if (cardMediaColumn() || cardTitleColumn() || cardStatusColumns().length) {\n <div class=\"kf-data-table__card-header\">\n @if (cardMediaColumn()) {\n <div class=\"kf-data-table__card-media\">\n <span class=\"kf-data-table__sk-media kf-bone-fill\"></span>\n </div>\n }\n <div class=\"kf-data-table__card-heading\">\n <span\n class=\"kf-data-table__card-title kf-bone\"\n [class.kf-data-table__card-title--mono]=\"cardTitleColumn()?.mono\"\n style=\"--kf-bone-width: 8rem\"\n >COT-2026-0000</span\n >\n @if (cardStatusColumns().length) {\n <span class=\"kf-data-table__card-statuses\">\n <span class=\"kf-data-table__sk-pill kf-bone-fill\"></span>\n </span>\n }\n </div>\n </div>\n }\n\n @if (cardLeadColumns().length || cardFieldColumns().length) {\n <div class=\"kf-data-table__card-fields\">\n @for (column of cardLeadColumns(); track column.key) {\n <div\n class=\"kf-data-table__card-lead\"\n [style.--kf-data-table-card-clamp]=\"column.cardClamp\"\n >\n <span class=\"kf-data-table__sk-lead kf-bone\" style=\"--kf-bone-width: 90%\"\n >Texto</span\n >\n </div>\n }\n @for (column of cardFieldColumns(); track column.key; let first = $first) {\n <div class=\"kf-data-table__card-field\">\n <span\n class=\"kf-data-table__card-label kf-overline-text kf-bone\"\n style=\"--kf-bone-width: 5rem\"\n >{{ column.label }}</span\n >\n @if (first && !skeletonCardHeader()) {\n <kf-skeleton class=\"kf-data-table__sk-value\" width=\"100%\" />\n } @else {\n <span class=\"kf-data-table__sk-value kf-bone\" style=\"--kf-bone-width: 40%\"\n >Valor</span\n >\n }\n </div>\n }\n </div>\n }\n\n @if (cardMetaColumns().length) {\n <div class=\"kf-data-table__card-meta\">\n @for (column of cardMetaColumns(); track column.key) {\n <div\n class=\"kf-data-table__card-meta-item\"\n [class.kf-data-table__card-meta-item--end]=\"\n isEndAligned(column) || column.emphasis\n \"\n [class.kf-data-table__card-meta-item--emphasis]=\"column.emphasis\"\n [style.flex-basis]=\"column.width\"\n >\n <span\n class=\"kf-data-table__card-label kf-overline-text kf-bone\"\n style=\"--kf-bone-width: 4rem\"\n >{{ column.label }}</span\n >\n <span\n class=\"kf-data-table__card-meta-value kf-bone\"\n style=\"--kf-bone-width: 5rem\"\n >Valor</span\n >\n </div>\n }\n </div>\n }\n\n @if (cardActionColumns().length) {\n <div class=\"kf-data-table__card-actions\">\n <span class=\"kf-data-table__sk-action kf-bone-fill\"></span>\n </div>\n }\n </div>\n }\n </div>\n } @else {\n <div\n class=\"kf-data-table__scroll\"\n [class.kf-data-table__scroll--weighted]=\"weighted()\"\n aria-busy=\"true\"\n >\n <table class=\"kf-data-table__table\" [class.kf-data-table__table--weighted]=\"weighted()\">\n <thead>\n <tr>\n @for (column of columns(); track column.key) {\n <th\n class=\"kf-overline-text\"\n [class]=\"column.className\"\n [class.kf-data-table__cell--right]=\"isEndAligned(column)\"\n [class.kf-data-table__cell--center]=\"column.align === 'center'\"\n [style.min-width]=\"minWidthFor(column)\"\n [style.width]=\"widthFor(column)\"\n [style.max-width]=\"maxWidthFor(column)\"\n >\n @if (column.hideLabel) {\n <span class=\"kf-data-table__sr-only\">{{ column.label }}</span>\n } @else {\n {{ column.label }}\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (i of skeletonRowIndexes(); track i) {\n <tr class=\"kf-data-table__row\">\n @for (column of columns(); track column.key; let c = $index) {\n <td\n [class]=\"column.className\"\n [class.kf-data-table__cell--right]=\"isEndAligned(column)\"\n [class.kf-data-table__cell--center]=\"column.align === 'center'\"\n [style.min-width]=\"minWidthFor(column)\"\n [style.width]=\"widthFor(column)\"\n [style.max-width]=\"maxWidthFor(column)\"\n >\n <div\n class=\"kf-data-table__sk-cell\"\n [class.kf-data-table__sk-cell--end]=\"isEndAligned(column)\"\n [class.kf-data-table__sk-cell--center]=\"column.align === 'center'\"\n >\n <kf-skeleton\n class=\"kf-data-table__sk-bar\"\n [style.width]=\"skeletonBarWidth(column, i, c)\"\n />\n </div>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n } @else if (rows().length === 0) {\n <div class=\"kf-data-table__empty\">\n <ng-content select=\"[empty]\" />\n </div>\n } @else if (activeView() === 'table') {\n <div\n #scroll\n class=\"kf-data-table__scroll\"\n [class.kf-data-table__scroll--fade-left]=\"canScrollLeft()\"\n [class.kf-data-table__scroll--fade-right]=\"canScrollRight()\"\n [class.kf-data-table__scroll--weighted]=\"weighted()\"\n [attr.tabindex]=\"hasOverflow() ? 0 : null\"\n [attr.role]=\"hasOverflow() ? 'region' : null\"\n [attr.aria-label]=\"hasOverflow() ? ariaLabel() : null\"\n >\n <table class=\"kf-data-table__table\" [class.kf-data-table__table--weighted]=\"weighted()\">\n <thead>\n <tr>\n @for (column of columns(); track column.key) {\n <th\n class=\"kf-overline-text\"\n [attr.data-column-key]=\"column.key\"\n [class]=\"column.className\"\n [class.kf-data-table__cell--right]=\"isEndAligned(column)\"\n [class.kf-data-table__cell--center]=\"column.align === 'center'\"\n [class.kf-data-table__cell--truncate]=\"column.truncate\"\n [class.kf-data-table__cell--sortable]=\"column.sortable\"\n [class.kf-data-table__cell--sticky]=\"column.sticky\"\n [class.kf-data-table__cell--sort-active]=\"sortDirectionFor(column) !== null\"\n [style]=\"stickyStyle(column)\"\n [style.min-width]=\"minWidthFor(column)\"\n [style.width]=\"widthFor(column)\"\n [style.max-width]=\"maxWidthFor(column)\"\n [attr.aria-sort]=\"column.sortable ? ariaSortFor(column) : null\"\n (click)=\"toggleSort(column)\"\n >\n @if (column.sortable) {\n <!-- El clic del bot\u00F3n burbujea al `th`, que ya ordena: un solo manejador para mouse y teclado. -->\n <button type=\"button\" class=\"kf-data-table__sort-button\">\n <span class=\"kf-data-table__th-content\">\n <ng-container\n [ngTemplateOutlet]=\"headerLabel\"\n [ngTemplateOutletContext]=\"{ $implicit: column }\"\n />\n <kf-icon\n name=\"chevron-down\"\n size=\"sm\"\n [rotate]=\"sortDirectionFor(column) === 'asc' ? 180 : 0\"\n class=\"kf-data-table__sort-icon\"\n [class.kf-data-table__sort-icon--active]=\"sortDirectionFor(column) !== null\"\n />\n </span>\n </button>\n } @else {\n <span class=\"kf-data-table__th-content\">\n <ng-container\n [ngTemplateOutlet]=\"headerLabel\"\n [ngTemplateOutletContext]=\"{ $implicit: column }\"\n />\n </span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of displayedRows(); track trackRow(row, $index); let i = $index) {\n <tr\n class=\"kf-data-table__row\"\n [class.kf-data-table__row--interactive]=\"rowInteractive()\"\n [class.kf-data-table__row--current]=\"isCurrentRow(row, i)\"\n [attr.aria-current]=\"isCurrentRow(row, i) ? 'true' : null\"\n [attr.tabindex]=\"rowTabStop() ? 0 : null\"\n (click)=\"onRowClick(row, i, $event)\"\n (keydown.enter)=\"onRowClick(row, i, $event)\"\n (keydown.space)=\"onRowSpace($event, row, i)\"\n >\n @for (column of columns(); track column.key) {\n <td\n [attr.data-column-key]=\"column.key\"\n [class]=\"column.className\"\n [class.kf-data-table__cell--right]=\"isEndAligned(column)\"\n [class.kf-data-table__cell--center]=\"column.align === 'center'\"\n [class.kf-data-table__cell--truncate]=\"column.truncate\"\n [class.kf-data-table__cell--mono]=\"column.mono\"\n [class.kf-data-table__cell--emphasis]=\"column.emphasis\"\n [class.kf-data-table__cell--sticky]=\"column.sticky\"\n [style]=\"stickyStyle(column)\"\n [style.min-width]=\"minWidthFor(column)\"\n [style.width]=\"widthFor(column)\"\n [style.max-width]=\"maxWidthFor(column)\"\n >\n @if (column.truncate) {\n <span class=\"kf-data-table__truncate\" [attr.title]=\"truncateTitle(row, column)\">\n <ng-container\n [ngTemplateOutlet]=\"tableCell\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n </span>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"tableCell\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n }\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n } @else {\n <div class=\"kf-data-table__cards\" [style.--kf-data-table-card-min]=\"cardMinWidth()\">\n @for (row of displayedRows(); track trackRow(row, $index); let i = $index) {\n <div\n class=\"kf-data-table__card\"\n [class.kf-data-table__card--interactive]=\"cardInteractive()\"\n [class.kf-data-table__card--current]=\"isCurrentRow(row, i)\"\n [attr.aria-current]=\"isCurrentRow(row, i) ? 'true' : null\"\n [attr.role]=\"cardInteractive() ? 'button' : null\"\n [attr.tabindex]=\"cardInteractive() ? 0 : null\"\n (click)=\"cardInteractive() ? onRowClick(row, i, $event) : undefined\"\n (keydown.enter)=\"cardInteractive() ? onRowClick(row, i, $event) : undefined\"\n (keydown.space)=\"cardInteractive() ? onRowSpace($event, row, i) : undefined\"\n >\n @if (cardMediaColumn() || cardTitleColumn() || cardStatusColumns().length) {\n <div class=\"kf-data-table__card-header\">\n @if (cardMediaColumn(); as media) {\n <div class=\"kf-data-table__card-media\">\n @if (cellTemplates()?.[media.key]; as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: i, column: media }\"\n />\n } @else {\n <img [src]=\"cellValue(row, media)\" alt=\"\" />\n }\n </div>\n }\n <div class=\"kf-data-table__card-heading\">\n @if (cardTitleColumn(); as title) {\n <span\n class=\"kf-data-table__card-title\"\n [class.kf-data-table__card-title--mono]=\"title.mono\"\n >\n <ng-container\n [ngTemplateOutlet]=\"cardCell\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: title, index: i }\"\n />\n </span>\n }\n @if (cardStatusColumns().length) {\n <span class=\"kf-data-table__card-statuses\">\n @for (column of cardStatusColumns(); track column.key) {\n <ng-container\n [ngTemplateOutlet]=\"cardCell\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n }\n </span>\n }\n </div>\n </div>\n }\n\n @if (cardLeadColumns().length || cardFieldColumns().length) {\n <div class=\"kf-data-table__card-fields\">\n @for (column of cardLeadColumns(); track column.key) {\n <div\n class=\"kf-data-table__card-lead\"\n [style.--kf-data-table-card-clamp]=\"column.cardClamp\"\n [attr.title]=\"cellValue(row, column) || null\"\n >\n <span class=\"kf-data-table__sr-only\">{{ column.label }}: </span>\n <ng-container\n [ngTemplateOutlet]=\"cardCell\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n </div>\n }\n @for (column of cardFieldColumns(); track column.key) {\n <div class=\"kf-data-table__card-field\">\n <span class=\"kf-data-table__card-label kf-overline-text\">{{ column.label }}</span>\n <span\n class=\"kf-data-table__card-value\"\n [class.kf-data-table__card-value--emphasis]=\"column.emphasis\"\n >\n <ng-container\n [ngTemplateOutlet]=\"cardCell\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n </span>\n </div>\n }\n </div>\n }\n\n @if (cardMetaColumns().length) {\n <div class=\"kf-data-table__card-meta\">\n @for (column of cardMetaColumns(); track column.key) {\n <div\n class=\"kf-data-table__card-meta-item\"\n [class.kf-data-table__card-meta-item--end]=\"\n isEndAligned(column) || column.emphasis\n \"\n [class.kf-data-table__card-meta-item--emphasis]=\"column.emphasis\"\n [style.flex-basis]=\"column.width\"\n >\n <span class=\"kf-data-table__card-label kf-overline-text\">{{ column.label }}</span>\n <span class=\"kf-data-table__card-meta-value\">\n <ng-container\n [ngTemplateOutlet]=\"cardCell\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n </span>\n </div>\n }\n </div>\n }\n\n @if (cardActionColumns().length) {\n <div class=\"kf-data-table__card-actions\">\n @for (column of cardActionColumns(); track column.key) {\n <ng-container\n [ngTemplateOutlet]=\"cardCell\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n }\n </div>\n }\n </div>\n }\n </div>\n }\n\n @if (!loading() && rows().length > 0) {\n <div class=\"kf-data-table__footer\">\n @if (effectivePageSize()) {\n <kf-pagination\n [page]=\"page()\"\n [pages]=\"totalPages()\"\n [pageSizeOptions]=\"pageSizeOptions()\"\n [pageSize]=\"effectivePageSize()\"\n (pageChange)=\"goToPage($event)\"\n (pageSizeChange)=\"setPageSize($event)\"\n >\n {{ paginationSummary() }}\n </kf-pagination>\n }\n <ng-content select=\"[footer]\" />\n </div>\n }\n</div>\n\n<!-- R\u00F3tulo de una columna: texto visible o solo para lectores con `hideLabel`. -->\n<ng-template #headerLabel let-column>\n @if (column.hideLabel) {\n <span class=\"kf-data-table__sr-only\">{{ column.label }}</span>\n } @else {\n {{ column.label }}\n }\n</ng-template>\n\n<!-- Celda de la vista tabla \u2014 compartida por la celda normal y la `truncate`.\n Una columna `interactive` envuelve su contenido en un bot\u00F3n real. -->\n<ng-template #tableCell let-row let-column=\"column\" let-i=\"index\">\n @if (column.interactive) {\n <button\n type=\"button\"\n class=\"kf-data-table__cell-button\"\n [attr.aria-label]=\"cellLabel(row, column, i)\"\n (click)=\"onCellClick(row, column, i)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"tableCellContent\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n </button>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"tableCellContent\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n }\n</ng-template>\n\n<!-- Contenido de una celda de la vista tabla (template del consumidor,\n thumbnail o texto). -->\n<ng-template #tableCellContent let-row let-column=\"column\" let-i=\"index\">\n @if (cellTemplates()?.[column.key]; as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: i, column: column }\"\n />\n } @else if (column.cardRole === 'media') {\n <img class=\"kf-data-table__thumb\" [src]=\"cellValue(row, column)\" alt=\"\" />\n } @else {\n {{ cellValue(row, column) }}\n }\n</ng-template>\n\n<!-- Zona de la tarjeta: igual que la celda de tabla, con bot\u00F3n si la columna es `interactive`. -->\n<ng-template #cardCell let-row let-column=\"column\" let-i=\"index\">\n @if (column.interactive) {\n <button\n type=\"button\"\n class=\"kf-data-table__cell-button\"\n [attr.aria-label]=\"cellLabel(row, column, i)\"\n (click)=\"onCellClick(row, column, i)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"cardCellContent\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n </button>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"cardCellContent\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n }\n</ng-template>\n\n<!-- Contenido de una zona de la tarjeta: template del consumidor o el valor como texto. -->\n<ng-template #cardCellContent let-row let-column=\"column\" let-i=\"index\">\n @if (cellTemplates()?.[column.key]; as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: i, column: column }\"\n />\n } @else {\n {{ cellValue(row, column) }}\n }\n</ng-template>\n", styles: [".kf-overline-text{font-family:var(--kf-font-title);font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-bone-shimmer 1.4s ease infinite}.kf-bone{display:block;box-sizing:border-box;width:var(--kf-bone-width, 60%);max-width:100%;overflow:hidden;white-space:nowrap;border-radius:var(--kf-radius-xs);-webkit-user-select:none;user-select:none;pointer-events:none}.kf-bone.kf-bone{color:transparent!important;-webkit-text-fill-color:transparent}.kf-bone>*{visibility:hidden}@keyframes kf-bone-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{animation:none;background:var(--kf-color-border)}}:host{display:block;font-family:var(--kf-font-body)}.kf-data-table{background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-sm);overflow:hidden}.kf-data-table--flush{border:none;box-shadow:none;border-radius:0}.kf-data-table__toolbar{display:flex;justify-content:flex-end;padding:var(--kf-space-sm) var(--kf-space-md);border-bottom:1px solid var(--kf-color-border)}.kf-data-table__scroll{position:relative;overflow-x:auto}.kf-data-table__scroll--weighted{container-type:inline-size}.kf-data-table__scroll:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-data-table__scroll:before,.kf-data-table__scroll:after{content:\"\";position:absolute;top:0;bottom:0;width:24px;pointer-events:none;opacity:0;transition:opacity .14s}.kf-data-table__scroll:before{left:0;background:linear-gradient(to right,var(--kf-color-white),transparent)}.kf-data-table__scroll:after{right:0;background:linear-gradient(to left,var(--kf-color-white),transparent)}.kf-data-table__scroll--fade-left:before{opacity:1}.kf-data-table__scroll--fade-right:after{opacity:1}.kf-data-table__table{width:100%;border-collapse:collapse;text-align:left}.kf-data-table__table th,.kf-data-table__table td{padding:var(--kf-space-sm) var(--kf-space-md);border-bottom:1px solid var(--kf-color-border);white-space:nowrap}.kf-data-table--compact .kf-data-table__table th,.kf-data-table--compact .kf-data-table__table td{padding:var(--kf-space-xs) var(--kf-space-md)}.kf-data-table__table th{background:var(--kf-color-surface)}.kf-data-table__table td{color:var(--kf-color-text)}.kf-data-table__table tbody tr:last-child td{border-bottom:none}.kf-data-table__row{transition:background .14s}.kf-data-table__row--interactive{cursor:pointer}.kf-data-table__row--interactive:hover{background:var(--kf-color-primary-soft)}.kf-data-table__row--interactive:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-data-table__row--current{background:var(--kf-color-primary-soft)}.kf-data-table__cell--right{text-align:right}.kf-data-table__cell--center{text-align:center}.kf-data-table__table .kf-data-table__cell--truncate{max-width:0}.kf-data-table__truncate{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-data-table__table td.kf-data-table__cell--mono{font-family:var(--kf-font-mono);font-size:var(--kf-font-size-body-sm)}.kf-data-table__table td.kf-data-table__cell--emphasis{font-weight:700;color:var(--kf-color-ink);font-variant-numeric:tabular-nums}.kf-data-table__sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.kf-data-table__cell-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--kf-space-xs);max-width:100%;min-width:32px;min-height:32px;padding:var(--kf-space-xs);border:0;border-radius:var(--kf-radius-xs);background:transparent;color:inherit;font:inherit;text-align:inherit;cursor:pointer}.kf-data-table__cell-button:hover{box-shadow:inset 0 0 0 1px var(--kf-color-border-strong)}.kf-data-table__cell-button:focus-visible{outline:2px solid transparent;outline-offset:-2px;box-shadow:inset 0 0 0 2px var(--kf-color-primary)}@media(max-width:640px),(pointer:coarse){.kf-data-table__cell-button{min-width:44px;min-height:44px}}.kf-data-table__cell--sticky{background:var(--kf-color-white)}.kf-data-table__table th.kf-data-table__cell--sticky{background:var(--kf-color-surface);z-index:2}.kf-data-table__cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.kf-data-table__sort-button{display:inline-flex;align-items:center;margin:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;text-align:inherit;background:none;border:none;border-radius:var(--kf-radius-xs);cursor:pointer}.kf-data-table__sort-button:focus-visible{outline:2px solid transparent;box-shadow:var(--kf-shadow-focus)}.kf-data-table__cell--sortable:hover{color:var(--kf-color-ink)}.kf-data-table__table th.kf-data-table__cell--sort-active{color:var(--kf-color-primary);font-weight:700}.kf-data-table__th-content{display:inline-flex;align-items:center;gap:var(--kf-space-xs)}.kf-data-table__sort-icon{transition:opacity .14s}.kf-data-table__cell--sortable:hover .kf-data-table__sort-icon{opacity:.5}.kf-data-table__sort-icon--active,.kf-data-table__cell--sortable:hover .kf-data-table__sort-icon--active{opacity:1}.kf-data-table__empty{padding:var(--kf-space-md)}.kf-data-table__footer{padding:var(--kf-space-sm) var(--kf-space-md);border-top:1px solid var(--kf-color-border)}.kf-data-table__footer:empty{display:none}.kf-data-table__cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--kf-data-table-card-min, 220px),100%),1fr));grid-auto-rows:1fr;gap:var(--kf-space-md);padding:var(--kf-space-md)}.kf-data-table__card{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);overflow:hidden;transition:border-color .14s,box-shadow .14s,background .14s}.kf-data-table__card--interactive{cursor:pointer}.kf-data-table__card:hover{border-color:var(--kf-color-border-strong);box-shadow:var(--kf-shadow-xs)}.kf-data-table__card--interactive:hover{background:var(--kf-color-primary-soft)}.kf-data-table__card--interactive:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:var(--kf-shadow-focus)}.kf-data-table__card--current{border-color:var(--kf-color-primary);background:var(--kf-color-primary-soft)}.kf-data-table__card-header{display:flex;align-items:center;gap:var(--kf-space-sm);min-width:0;padding:var(--kf-space-md) var(--kf-space-md) var(--kf-space-sm)}.kf-data-table__card-media{flex:none}.kf-data-table__card-media img,.kf-data-table__thumb{display:block;width:48px;height:48px;border-radius:var(--kf-radius-xs);object-fit:cover;background:var(--kf-color-surface)}.kf-data-table__card-heading{display:flex;flex:1;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);min-width:0}.kf-data-table__card-title{flex:0 1 auto;min-width:0;font-family:var(--kf-font-title);font-weight:600;color:var(--kf-color-ink);overflow-wrap:anywhere}.kf-data-table__card-title--mono{flex:none;font-family:var(--kf-font-mono);font-size:var(--kf-font-size-body-sm);white-space:nowrap}.kf-data-table__card-statuses{display:flex;flex:0 1 auto;flex-wrap:nowrap;justify-content:flex-end;gap:var(--kf-space-xs);min-width:0;overflow:hidden}.kf-data-table__card-actions{display:flex;flex-wrap:wrap;gap:var(--kf-space-xs)}.kf-data-table__card-fields{display:flex;flex-direction:column;gap:var(--kf-space-xs);min-width:0;padding:var(--kf-space-md)}.kf-data-table__card-header+.kf-data-table__card-fields{padding-top:0}.kf-data-table__card-lead{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--kf-data-table-card-clamp, 2);line-clamp:var(--kf-data-table-card-clamp, 2);min-width:0;overflow:hidden;overflow-wrap:anywhere;color:var(--kf-color-ink);font-weight:500;line-height:1.35}.kf-data-table__card-field{display:flex;justify-content:space-between;gap:var(--kf-space-sm);min-width:0}.kf-data-table__card-label{flex:none}.kf-data-table__card-value{min-width:0;color:var(--kf-color-text);text-align:right;overflow-wrap:anywhere}.kf-data-table__card-value--emphasis,.kf-data-table__card-meta-item--emphasis .kf-data-table__card-meta-value{font-weight:700;color:var(--kf-color-ink);font-variant-numeric:tabular-nums}.kf-data-table__card-meta{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--kf-space-xs) var(--kf-space-md);margin-top:auto;padding:var(--kf-space-sm) var(--kf-space-md) var(--kf-space-md);border-top:1px solid var(--kf-color-border)}.kf-data-table__card-meta-item{display:flex;flex-direction:column;gap:2px;min-width:0}.kf-data-table__card-meta-item--end{margin-left:auto;align-items:flex-end;text-align:right}.kf-data-table__card-meta-value{color:var(--kf-color-text);font-variant-numeric:tabular-nums}.kf-data-table__card-meta-item--emphasis .kf-data-table__card-meta-value{font-size:var(--kf-font-size-body)}.kf-data-table__card-actions{justify-content:flex-end;margin-top:auto;padding:var(--kf-space-sm) var(--kf-space-md);border-top:1px solid var(--kf-color-border);background:var(--kf-color-surface)}.kf-data-table__card-meta~.kf-data-table__card-actions{margin-top:0}.kf-data-table__thumb{width:32px;height:32px}@media(prefers-reduced-motion:reduce){.kf-data-table__card,.kf-data-table__row{transition:none}}.kf-data-table__sk-cell{display:flex;align-items:center;justify-content:flex-start;min-height:1lh}.kf-data-table__sk-cell--center{justify-content:center}.kf-data-table__sk-cell--end{justify-content:flex-end}.kf-data-table__sk-bar{flex:none}.kf-data-table__sk-media{display:block;width:48px;height:48px;border-radius:var(--kf-radius-xs)}.kf-data-table__sk-pill{display:block;width:4.5rem;height:1.25rem;border-radius:var(--kf-radius-pill)}.kf-data-table__sk-value{flex:none;width:40%}.kf-data-table__sk-lead{line-height:1.35}.kf-data-table__sk-action{display:block;width:5rem;height:2rem;border-radius:var(--kf-radius-sm)}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Pagination, selector: "kf-pagination", inputs: ["page", "pages", "pageSizeOptions", "pageSize"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: Skeleton, selector: "kf-skeleton", inputs: ["variant", "width", "height"] }, { kind: "component", type: ViewToggle, selector: "kf-view-toggle", inputs: ["view", "iconOnly", "tableLabel", "cardsLabel", "ariaLabel"], outputs: ["viewChange"] }] });
|
|
4308
4388
|
}
|
|
4309
4389
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataTable, decorators: [{
|
|
4310
4390
|
type: Component,
|
|
4311
|
-
args: [{ selector: 'kf-data-table', imports: [Icon, NgTemplateOutlet, Pagination, Skeleton, ViewToggle], template: "<div\n class=\"kf-data-table\"\n [class.kf-data-table--flush]=\"flush()\"\n [class.kf-data-table--compact]=\"density() === 'compact'\"\n>\n @if (cardable() && showViewToggle()) {\n <div class=\"kf-data-table__toolbar\">\n <kf-view-toggle [view]=\"activeView()\" (viewChange)=\"setView($event)\" />\n </div>\n }\n\n @if (loading()) {\n @if (cardable() && activeView() === 'cards') {\n <div\n class=\"kf-data-table__cards\"\n aria-busy=\"true\"\n [style.--kf-data-table-card-min]=\"cardMinWidth()\"\n >\n @for (i of skeletonRowIndexes(); track i) {\n <div class=\"kf-data-table__card\" aria-hidden=\"true\">\n @if (cardMediaColumn() || cardTitleColumn() || cardStatusColumns().length) {\n <div class=\"kf-data-table__card-header\">\n @if (cardMediaColumn()) {\n <div class=\"kf-data-table__card-media\">\n <span class=\"kf-data-table__sk-media kf-bone-fill\"></span>\n </div>\n }\n <div class=\"kf-data-table__card-heading\">\n <span\n class=\"kf-data-table__card-title kf-bone\"\n [class.kf-data-table__card-title--mono]=\"cardTitleColumn()?.mono\"\n style=\"--kf-bone-width: 8rem\"\n >COT-2026-0000</span\n >\n @if (cardStatusColumns().length) {\n <span class=\"kf-data-table__card-statuses\">\n <span class=\"kf-data-table__sk-pill kf-bone-fill\"></span>\n </span>\n }\n </div>\n </div>\n }\n\n @if (cardLeadColumns().length || cardFieldColumns().length) {\n <div class=\"kf-data-table__card-fields\">\n @for (column of cardLeadColumns(); track column.key) {\n <div\n class=\"kf-data-table__card-lead\"\n [style.--kf-data-table-card-clamp]=\"column.cardClamp\"\n >\n <span class=\"kf-data-table__sk-lead kf-bone\" style=\"--kf-bone-width: 90%\"\n >Texto</span\n >\n </div>\n }\n @for (column of cardFieldColumns(); track column.key; let first = $first) {\n <div class=\"kf-data-table__card-field\">\n <span\n class=\"kf-data-table__card-label kf-overline-text kf-bone\"\n style=\"--kf-bone-width: 5rem\"\n >{{ column.label }}</span\n >\n @if (first && !skeletonCardHeader()) {\n <kf-skeleton class=\"kf-data-table__sk-value\" width=\"100%\" />\n } @else {\n <span class=\"kf-data-table__sk-value kf-bone\" style=\"--kf-bone-width: 40%\"\n >Valor</span\n >\n }\n </div>\n }\n </div>\n }\n\n @if (cardMetaColumns().length) {\n <div class=\"kf-data-table__card-meta\">\n @for (column of cardMetaColumns(); track column.key) {\n <div\n class=\"kf-data-table__card-meta-item\"\n [class.kf-data-table__card-meta-item--end]=\"\n isEndAligned(column) || column.emphasis\n \"\n [class.kf-data-table__card-meta-item--emphasis]=\"column.emphasis\"\n [style.flex-basis]=\"column.width\"\n >\n <span\n class=\"kf-data-table__card-label kf-overline-text kf-bone\"\n style=\"--kf-bone-width: 4rem\"\n >{{ column.label }}</span\n >\n <span\n class=\"kf-data-table__card-meta-value kf-bone\"\n style=\"--kf-bone-width: 5rem\"\n >Valor</span\n >\n </div>\n }\n </div>\n }\n\n @if (cardActionColumns().length) {\n <div class=\"kf-data-table__card-actions\">\n <span class=\"kf-data-table__sk-action kf-bone-fill\"></span>\n </div>\n }\n </div>\n }\n </div>\n } @else {\n <div\n class=\"kf-data-table__scroll\"\n [class.kf-data-table__scroll--weighted]=\"weighted()\"\n aria-busy=\"true\"\n >\n <table class=\"kf-data-table__table\" [class.kf-data-table__table--weighted]=\"weighted()\">\n <thead>\n <tr>\n @for (column of columns(); track column.key) {\n <th\n class=\"kf-overline-text\"\n [class]=\"column.className\"\n [class.kf-data-table__cell--right]=\"isEndAligned(column)\"\n [class.kf-data-table__cell--center]=\"column.align === 'center'\"\n [style.min-width]=\"minWidthFor(column)\"\n [style.width]=\"widthFor(column)\"\n [style.max-width]=\"maxWidthFor(column)\"\n >\n @if (column.hideLabel) {\n <span class=\"kf-data-table__sr-only\">{{ column.label }}</span>\n } @else {\n {{ column.label }}\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (i of skeletonRowIndexes(); track i) {\n <tr class=\"kf-data-table__row\">\n @for (column of columns(); track column.key; let c = $index) {\n <td\n [class]=\"column.className\"\n [class.kf-data-table__cell--right]=\"isEndAligned(column)\"\n [class.kf-data-table__cell--center]=\"column.align === 'center'\"\n [style.min-width]=\"minWidthFor(column)\"\n [style.width]=\"widthFor(column)\"\n [style.max-width]=\"maxWidthFor(column)\"\n >\n <div\n class=\"kf-data-table__sk-cell\"\n [class.kf-data-table__sk-cell--end]=\"isEndAligned(column)\"\n [class.kf-data-table__sk-cell--center]=\"column.align === 'center'\"\n >\n <kf-skeleton\n class=\"kf-data-table__sk-bar\"\n [style.width]=\"skeletonBarWidth(column, i, c)\"\n />\n </div>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n } @else if (rows().length === 0) {\n <div class=\"kf-data-table__empty\">\n <ng-content select=\"[empty]\" />\n </div>\n } @else if (activeView() === 'table') {\n <div\n #scroll\n class=\"kf-data-table__scroll\"\n [class.kf-data-table__scroll--fade-left]=\"canScrollLeft()\"\n [class.kf-data-table__scroll--fade-right]=\"canScrollRight()\"\n [class.kf-data-table__scroll--weighted]=\"weighted()\"\n [attr.tabindex]=\"hasOverflow() ? 0 : null\"\n [attr.role]=\"hasOverflow() ? 'region' : null\"\n [attr.aria-label]=\"hasOverflow() ? ariaLabel() : null\"\n >\n <table class=\"kf-data-table__table\" [class.kf-data-table__table--weighted]=\"weighted()\">\n <thead>\n <tr>\n @for (column of columns(); track column.key) {\n <th\n class=\"kf-overline-text\"\n [attr.data-column-key]=\"column.key\"\n [class]=\"column.className\"\n [class.kf-data-table__cell--right]=\"isEndAligned(column)\"\n [class.kf-data-table__cell--center]=\"column.align === 'center'\"\n [class.kf-data-table__cell--truncate]=\"column.truncate\"\n [class.kf-data-table__cell--sortable]=\"column.sortable\"\n [class.kf-data-table__cell--sticky]=\"column.sticky\"\n [class.kf-data-table__cell--sort-active]=\"sortDirectionFor(column) !== null\"\n [style]=\"stickyStyle(column)\"\n [style.min-width]=\"minWidthFor(column)\"\n [style.width]=\"widthFor(column)\"\n [style.max-width]=\"maxWidthFor(column)\"\n [attr.aria-sort]=\"column.sortable ? ariaSortFor(column) : null\"\n (click)=\"toggleSort(column)\"\n >\n @if (column.sortable) {\n <!-- El clic del bot\u00F3n burbujea al `th`, que ya ordena: un solo manejador para mouse y teclado. -->\n <button type=\"button\" class=\"kf-data-table__sort-button\">\n <span class=\"kf-data-table__th-content\">\n <ng-container\n [ngTemplateOutlet]=\"headerLabel\"\n [ngTemplateOutletContext]=\"{ $implicit: column }\"\n />\n <kf-icon\n name=\"chevron-down\"\n size=\"sm\"\n [rotate]=\"sortDirectionFor(column) === 'asc' ? 180 : 0\"\n class=\"kf-data-table__sort-icon\"\n [class.kf-data-table__sort-icon--active]=\"sortDirectionFor(column) !== null\"\n />\n </span>\n </button>\n } @else {\n <span class=\"kf-data-table__th-content\">\n <ng-container\n [ngTemplateOutlet]=\"headerLabel\"\n [ngTemplateOutletContext]=\"{ $implicit: column }\"\n />\n </span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of displayedRows(); track trackRow(row, $index); let i = $index) {\n <tr\n class=\"kf-data-table__row\"\n [class.kf-data-table__row--interactive]=\"rowInteractive()\"\n [class.kf-data-table__row--current]=\"isCurrentRow(row, i)\"\n [attr.aria-current]=\"isCurrentRow(row, i) ? 'true' : null\"\n [attr.tabindex]=\"rowTabStop() ? 0 : null\"\n (click)=\"onRowClick(row, i, $event)\"\n (keydown.enter)=\"onRowClick(row, i, $event)\"\n (keydown.space)=\"onRowSpace($event, row, i)\"\n >\n @for (column of columns(); track column.key) {\n <td\n [attr.data-column-key]=\"column.key\"\n [class]=\"column.className\"\n [class.kf-data-table__cell--right]=\"isEndAligned(column)\"\n [class.kf-data-table__cell--center]=\"column.align === 'center'\"\n [class.kf-data-table__cell--truncate]=\"column.truncate\"\n [class.kf-data-table__cell--mono]=\"column.mono\"\n [class.kf-data-table__cell--emphasis]=\"column.emphasis\"\n [class.kf-data-table__cell--sticky]=\"column.sticky\"\n [style]=\"stickyStyle(column)\"\n [style.min-width]=\"minWidthFor(column)\"\n [style.width]=\"widthFor(column)\"\n [style.max-width]=\"maxWidthFor(column)\"\n >\n @if (column.truncate) {\n <span class=\"kf-data-table__truncate\" [attr.title]=\"truncateTitle(row, column)\">\n <ng-container\n [ngTemplateOutlet]=\"tableCell\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n </span>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"tableCell\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n }\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n } @else {\n <div class=\"kf-data-table__cards\" [style.--kf-data-table-card-min]=\"cardMinWidth()\">\n @for (row of displayedRows(); track trackRow(row, $index); let i = $index) {\n <div\n class=\"kf-data-table__card\"\n [class.kf-data-table__card--interactive]=\"cardInteractive()\"\n [class.kf-data-table__card--current]=\"isCurrentRow(row, i)\"\n [attr.aria-current]=\"isCurrentRow(row, i) ? 'true' : null\"\n [attr.role]=\"cardInteractive() ? 'button' : null\"\n [attr.tabindex]=\"cardInteractive() ? 0 : null\"\n (click)=\"cardInteractive() ? onRowClick(row, i, $event) : undefined\"\n (keydown.enter)=\"cardInteractive() ? onRowClick(row, i, $event) : undefined\"\n (keydown.space)=\"cardInteractive() ? onRowSpace($event, row, i) : undefined\"\n >\n @if (cardMediaColumn() || cardTitleColumn() || cardStatusColumns().length) {\n <div class=\"kf-data-table__card-header\">\n @if (cardMediaColumn(); as media) {\n <div class=\"kf-data-table__card-media\">\n @if (cellTemplates()?.[media.key]; as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: i, column: media }\"\n />\n } @else {\n <img [src]=\"cellValue(row, media)\" alt=\"\" />\n }\n </div>\n }\n <div class=\"kf-data-table__card-heading\">\n @if (cardTitleColumn(); as title) {\n <span\n class=\"kf-data-table__card-title\"\n [class.kf-data-table__card-title--mono]=\"title.mono\"\n >\n <ng-container\n [ngTemplateOutlet]=\"cardCell\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: title, index: i }\"\n />\n </span>\n }\n @if (cardStatusColumns().length) {\n <span class=\"kf-data-table__card-statuses\">\n @for (column of cardStatusColumns(); track column.key) {\n <ng-container\n [ngTemplateOutlet]=\"cardCell\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n }\n </span>\n }\n </div>\n </div>\n }\n\n @if (cardLeadColumns().length || cardFieldColumns().length) {\n <div class=\"kf-data-table__card-fields\">\n @for (column of cardLeadColumns(); track column.key) {\n <div\n class=\"kf-data-table__card-lead\"\n [style.--kf-data-table-card-clamp]=\"column.cardClamp\"\n [attr.title]=\"cellValue(row, column) || null\"\n >\n <span class=\"kf-data-table__sr-only\">{{ column.label }}: </span>\n <ng-container\n [ngTemplateOutlet]=\"cardCell\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n </div>\n }\n @for (column of cardFieldColumns(); track column.key) {\n <div class=\"kf-data-table__card-field\">\n <span class=\"kf-data-table__card-label kf-overline-text\">{{ column.label }}</span>\n <span\n class=\"kf-data-table__card-value\"\n [class.kf-data-table__card-value--emphasis]=\"column.emphasis\"\n >\n <ng-container\n [ngTemplateOutlet]=\"cardCell\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n </span>\n </div>\n }\n </div>\n }\n\n @if (cardMetaColumns().length) {\n <div class=\"kf-data-table__card-meta\">\n @for (column of cardMetaColumns(); track column.key) {\n <div\n class=\"kf-data-table__card-meta-item\"\n [class.kf-data-table__card-meta-item--end]=\"\n isEndAligned(column) || column.emphasis\n \"\n [class.kf-data-table__card-meta-item--emphasis]=\"column.emphasis\"\n [style.flex-basis]=\"column.width\"\n >\n <span class=\"kf-data-table__card-label kf-overline-text\">{{ column.label }}</span>\n <span class=\"kf-data-table__card-meta-value\">\n <ng-container\n [ngTemplateOutlet]=\"cardCell\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n </span>\n </div>\n }\n </div>\n }\n\n @if (cardActionColumns().length) {\n <div class=\"kf-data-table__card-actions\">\n @for (column of cardActionColumns(); track column.key) {\n <ng-container\n [ngTemplateOutlet]=\"cardCell\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n }\n </div>\n }\n </div>\n }\n </div>\n }\n\n @if (!loading() && rows().length > 0) {\n <div class=\"kf-data-table__footer\">\n @if (effectivePageSize()) {\n <kf-pagination\n [page]=\"page()\"\n [pages]=\"totalPages()\"\n [pageSizeOptions]=\"pageSizeOptions()\"\n [pageSize]=\"effectivePageSize()\"\n (pageChange)=\"goToPage($event)\"\n (pageSizeChange)=\"setPageSize($event)\"\n >\n {{ paginationSummary() }}\n </kf-pagination>\n }\n <ng-content select=\"[footer]\" />\n </div>\n }\n</div>\n\n<!-- R\u00F3tulo de una columna: texto visible o solo para lectores con `hideLabel`. -->\n<ng-template #headerLabel let-column>\n @if (column.hideLabel) {\n <span class=\"kf-data-table__sr-only\">{{ column.label }}</span>\n } @else {\n {{ column.label }}\n }\n</ng-template>\n\n<!-- Celda de la vista tabla \u2014 compartida por la celda normal y la `truncate`.\n Una columna `interactive` envuelve su contenido en un bot\u00F3n real. -->\n<ng-template #tableCell let-row let-column=\"column\" let-i=\"index\">\n @if (column.interactive) {\n <button\n type=\"button\"\n class=\"kf-data-table__cell-button\"\n [attr.aria-label]=\"cellLabel(row, column, i)\"\n (click)=\"onCellClick(row, column, i)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"tableCellContent\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n </button>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"tableCellContent\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n }\n</ng-template>\n\n<!-- Contenido de una celda de la vista tabla (template del consumidor,\n thumbnail o texto). -->\n<ng-template #tableCellContent let-row let-column=\"column\" let-i=\"index\">\n @if (cellTemplates()?.[column.key]; as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: i, column: column }\"\n />\n } @else if (column.cardRole === 'media') {\n <img class=\"kf-data-table__thumb\" [src]=\"cellValue(row, column)\" alt=\"\" />\n } @else {\n {{ cellValue(row, column) }}\n }\n</ng-template>\n\n<!-- Zona de la tarjeta: igual que la celda de tabla, con bot\u00F3n si la columna es `interactive`. -->\n<ng-template #cardCell let-row let-column=\"column\" let-i=\"index\">\n @if (column.interactive) {\n <button\n type=\"button\"\n class=\"kf-data-table__cell-button\"\n [attr.aria-label]=\"cellLabel(row, column, i)\"\n (click)=\"onCellClick(row, column, i)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"cardCellContent\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n </button>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"cardCellContent\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n }\n</ng-template>\n\n<!-- Contenido de una zona de la tarjeta: template del consumidor o el valor como texto. -->\n<ng-template #cardCellContent let-row let-column=\"column\" let-i=\"index\">\n @if (cellTemplates()?.[column.key]; as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: i, column: column }\"\n />\n } @else {\n {{ cellValue(row, column) }}\n }\n</ng-template>\n", styles: [".kf-overline-text{font-family:var(--kf-font-title);font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-bone-shimmer 1.4s ease infinite}.kf-bone{display:block;box-sizing:border-box;width:var(--kf-bone-width, 60%);max-width:100%;overflow:hidden;white-space:nowrap;border-radius:var(--kf-radius-xs);-webkit-user-select:none;user-select:none;pointer-events:none}.kf-bone.kf-bone{color:transparent!important}.kf-bone>*{visibility:hidden}@keyframes kf-bone-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{animation:none;background:var(--kf-color-border)}}:host{display:block;font-family:var(--kf-font-body)}.kf-data-table{background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-sm);overflow:hidden}.kf-data-table--flush{border:none;box-shadow:none;border-radius:0}.kf-data-table__toolbar{display:flex;justify-content:flex-end;padding:var(--kf-space-sm) var(--kf-space-md);border-bottom:1px solid var(--kf-color-border)}.kf-data-table__scroll{position:relative;overflow-x:auto}.kf-data-table__scroll--weighted{container-type:inline-size}.kf-data-table__scroll:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-data-table__scroll:before,.kf-data-table__scroll:after{content:\"\";position:absolute;top:0;bottom:0;width:24px;pointer-events:none;opacity:0;transition:opacity .14s}.kf-data-table__scroll:before{left:0;background:linear-gradient(to right,var(--kf-color-white),transparent)}.kf-data-table__scroll:after{right:0;background:linear-gradient(to left,var(--kf-color-white),transparent)}.kf-data-table__scroll--fade-left:before{opacity:1}.kf-data-table__scroll--fade-right:after{opacity:1}.kf-data-table__table{width:100%;border-collapse:collapse;text-align:left}.kf-data-table__table th,.kf-data-table__table td{padding:var(--kf-space-sm) var(--kf-space-md);border-bottom:1px solid var(--kf-color-border);white-space:nowrap}.kf-data-table--compact .kf-data-table__table th,.kf-data-table--compact .kf-data-table__table td{padding:var(--kf-space-xs) var(--kf-space-md)}.kf-data-table__table th{background:var(--kf-color-surface)}.kf-data-table__table td{color:var(--kf-color-text)}.kf-data-table__table tbody tr:last-child td{border-bottom:none}.kf-data-table__row{transition:background .14s}.kf-data-table__row--interactive{cursor:pointer}.kf-data-table__row--interactive:hover{background:var(--kf-color-primary-soft)}.kf-data-table__row--interactive:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-data-table__row--current{background:var(--kf-color-primary-soft)}.kf-data-table__cell--right{text-align:right}.kf-data-table__cell--center{text-align:center}.kf-data-table__table .kf-data-table__cell--truncate{max-width:0}.kf-data-table__truncate{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-data-table__table td.kf-data-table__cell--mono{font-family:var(--kf-font-mono);font-size:var(--kf-font-size-body-sm)}.kf-data-table__table td.kf-data-table__cell--emphasis{font-weight:700;color:var(--kf-color-ink);font-variant-numeric:tabular-nums}.kf-data-table__sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.kf-data-table__cell-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--kf-space-xs);max-width:100%;min-width:32px;min-height:32px;padding:var(--kf-space-xs);border:0;border-radius:var(--kf-radius-xs);background:transparent;color:inherit;font:inherit;text-align:inherit;cursor:pointer}.kf-data-table__cell-button:hover{box-shadow:inset 0 0 0 1px var(--kf-color-border-strong)}.kf-data-table__cell-button:focus-visible{outline:2px solid transparent;outline-offset:-2px;box-shadow:inset 0 0 0 2px var(--kf-color-primary)}@media(max-width:640px),(pointer:coarse){.kf-data-table__cell-button{min-width:44px;min-height:44px}}.kf-data-table__cell--sticky{background:var(--kf-color-white)}.kf-data-table__table th.kf-data-table__cell--sticky{background:var(--kf-color-surface);z-index:2}.kf-data-table__cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.kf-data-table__sort-button{display:inline-flex;align-items:center;margin:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;text-align:inherit;background:none;border:none;border-radius:var(--kf-radius-xs);cursor:pointer}.kf-data-table__sort-button:focus-visible{outline:2px solid transparent;box-shadow:var(--kf-shadow-focus)}.kf-data-table__cell--sortable:hover{color:var(--kf-color-ink)}.kf-data-table__table th.kf-data-table__cell--sort-active{color:var(--kf-color-primary);font-weight:700}.kf-data-table__th-content{display:inline-flex;align-items:center;gap:var(--kf-space-xs)}.kf-data-table__sort-icon{transition:opacity .14s}.kf-data-table__cell--sortable:hover .kf-data-table__sort-icon{opacity:.5}.kf-data-table__sort-icon--active,.kf-data-table__cell--sortable:hover .kf-data-table__sort-icon--active{opacity:1}.kf-data-table__empty{padding:var(--kf-space-md)}.kf-data-table__footer{padding:var(--kf-space-sm) var(--kf-space-md);border-top:1px solid var(--kf-color-border)}.kf-data-table__footer:empty{display:none}.kf-data-table__cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--kf-data-table-card-min, 220px),100%),1fr));grid-auto-rows:1fr;gap:var(--kf-space-md);padding:var(--kf-space-md)}.kf-data-table__card{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);overflow:hidden;transition:border-color .14s,box-shadow .14s,background .14s}.kf-data-table__card--interactive{cursor:pointer}.kf-data-table__card:hover{border-color:var(--kf-color-border-strong);box-shadow:var(--kf-shadow-xs)}.kf-data-table__card--interactive:hover{background:var(--kf-color-primary-soft)}.kf-data-table__card--interactive:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:var(--kf-shadow-focus)}.kf-data-table__card--current{border-color:var(--kf-color-primary);background:var(--kf-color-primary-soft)}.kf-data-table__card-header{display:flex;align-items:center;gap:var(--kf-space-sm);min-width:0;padding:var(--kf-space-md) var(--kf-space-md) var(--kf-space-sm)}.kf-data-table__card-media{flex:none}.kf-data-table__card-media img,.kf-data-table__thumb{display:block;width:48px;height:48px;border-radius:var(--kf-radius-xs);object-fit:cover;background:var(--kf-color-surface)}.kf-data-table__card-heading{display:flex;flex:1;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);min-width:0}.kf-data-table__card-title{flex:0 1 auto;min-width:0;font-family:var(--kf-font-title);font-weight:600;color:var(--kf-color-ink);overflow-wrap:anywhere}.kf-data-table__card-title--mono{flex:none;font-family:var(--kf-font-mono);font-size:var(--kf-font-size-body-sm);white-space:nowrap}.kf-data-table__card-statuses{display:flex;flex:0 1 auto;flex-wrap:nowrap;justify-content:flex-end;gap:var(--kf-space-xs);min-width:0;overflow:hidden}.kf-data-table__card-actions{display:flex;flex-wrap:wrap;gap:var(--kf-space-xs)}.kf-data-table__card-fields{display:flex;flex-direction:column;gap:var(--kf-space-xs);min-width:0;padding:var(--kf-space-md)}.kf-data-table__card-header+.kf-data-table__card-fields{padding-top:0}.kf-data-table__card-lead{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--kf-data-table-card-clamp, 2);line-clamp:var(--kf-data-table-card-clamp, 2);min-width:0;overflow:hidden;overflow-wrap:anywhere;color:var(--kf-color-ink);font-weight:500;line-height:1.35}.kf-data-table__card-field{display:flex;justify-content:space-between;gap:var(--kf-space-sm);min-width:0}.kf-data-table__card-label{flex:none}.kf-data-table__card-value{min-width:0;color:var(--kf-color-text);text-align:right;overflow-wrap:anywhere}.kf-data-table__card-value--emphasis,.kf-data-table__card-meta-item--emphasis .kf-data-table__card-meta-value{font-weight:700;color:var(--kf-color-ink);font-variant-numeric:tabular-nums}.kf-data-table__card-meta{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--kf-space-xs) var(--kf-space-md);margin-top:auto;padding:var(--kf-space-sm) var(--kf-space-md) var(--kf-space-md);border-top:1px solid var(--kf-color-border)}.kf-data-table__card-meta-item{display:flex;flex-direction:column;gap:2px;min-width:0}.kf-data-table__card-meta-item--end{margin-left:auto;align-items:flex-end;text-align:right}.kf-data-table__card-meta-value{color:var(--kf-color-text);font-variant-numeric:tabular-nums}.kf-data-table__card-meta-item--emphasis .kf-data-table__card-meta-value{font-size:var(--kf-font-size-body)}.kf-data-table__card-actions{justify-content:flex-end;margin-top:auto;padding:var(--kf-space-sm) var(--kf-space-md);border-top:1px solid var(--kf-color-border);background:var(--kf-color-surface)}.kf-data-table__card-meta~.kf-data-table__card-actions{margin-top:0}.kf-data-table__thumb{width:32px;height:32px}@media(prefers-reduced-motion:reduce){.kf-data-table__card,.kf-data-table__row{transition:none}}.kf-data-table__sk-cell{display:flex;align-items:center;justify-content:flex-start;min-height:1lh}.kf-data-table__sk-cell--center{justify-content:center}.kf-data-table__sk-cell--end{justify-content:flex-end}.kf-data-table__sk-bar{flex:none}.kf-data-table__sk-media{display:block;width:48px;height:48px;border-radius:var(--kf-radius-xs)}.kf-data-table__sk-pill{display:block;width:4.5rem;height:1.25rem;border-radius:var(--kf-radius-pill)}.kf-data-table__sk-value{flex:none;width:40%}.kf-data-table__sk-lead{line-height:1.35}.kf-data-table__sk-action{display:block;width:5rem;height:2rem;border-radius:var(--kf-radius-sm)}\n"] }]
|
|
4391
|
+
args: [{ selector: 'kf-data-table', imports: [Icon, NgTemplateOutlet, Pagination, Skeleton, ViewToggle], template: "<div\n class=\"kf-data-table\"\n [class.kf-data-table--flush]=\"flush()\"\n [class.kf-data-table--compact]=\"density() === 'compact'\"\n>\n @if (cardable() && showViewToggle()) {\n <div class=\"kf-data-table__toolbar\">\n <kf-view-toggle [view]=\"activeView()\" (viewChange)=\"setView($event)\" />\n </div>\n }\n\n @if (loading()) {\n @if (cardable() && activeView() === 'cards') {\n <div\n class=\"kf-data-table__cards\"\n aria-busy=\"true\"\n [style.--kf-data-table-card-min]=\"cardMinWidth()\"\n >\n @for (i of skeletonRowIndexes(); track i) {\n <div class=\"kf-data-table__card\" aria-hidden=\"true\">\n @if (cardMediaColumn() || cardTitleColumn() || cardStatusColumns().length) {\n <div class=\"kf-data-table__card-header\">\n @if (cardMediaColumn()) {\n <div class=\"kf-data-table__card-media\">\n <span class=\"kf-data-table__sk-media kf-bone-fill\"></span>\n </div>\n }\n <div class=\"kf-data-table__card-heading\">\n <span\n class=\"kf-data-table__card-title kf-bone\"\n [class.kf-data-table__card-title--mono]=\"cardTitleColumn()?.mono\"\n style=\"--kf-bone-width: 8rem\"\n >COT-2026-0000</span\n >\n @if (cardStatusColumns().length) {\n <span class=\"kf-data-table__card-statuses\">\n <span class=\"kf-data-table__sk-pill kf-bone-fill\"></span>\n </span>\n }\n </div>\n </div>\n }\n\n @if (cardLeadColumns().length || cardFieldColumns().length) {\n <div class=\"kf-data-table__card-fields\">\n @for (column of cardLeadColumns(); track column.key) {\n <div\n class=\"kf-data-table__card-lead\"\n [style.--kf-data-table-card-clamp]=\"column.cardClamp\"\n >\n <span class=\"kf-data-table__sk-lead kf-bone\" style=\"--kf-bone-width: 90%\"\n >Texto</span\n >\n </div>\n }\n @for (column of cardFieldColumns(); track column.key; let first = $first) {\n <div class=\"kf-data-table__card-field\">\n <span\n class=\"kf-data-table__card-label kf-overline-text kf-bone\"\n style=\"--kf-bone-width: 5rem\"\n >{{ column.label }}</span\n >\n @if (first && !skeletonCardHeader()) {\n <kf-skeleton class=\"kf-data-table__sk-value\" width=\"100%\" />\n } @else {\n <span class=\"kf-data-table__sk-value kf-bone\" style=\"--kf-bone-width: 40%\"\n >Valor</span\n >\n }\n </div>\n }\n </div>\n }\n\n @if (cardMetaColumns().length) {\n <div class=\"kf-data-table__card-meta\">\n @for (column of cardMetaColumns(); track column.key) {\n <div\n class=\"kf-data-table__card-meta-item\"\n [class.kf-data-table__card-meta-item--end]=\"\n isEndAligned(column) || column.emphasis\n \"\n [class.kf-data-table__card-meta-item--emphasis]=\"column.emphasis\"\n [style.flex-basis]=\"column.width\"\n >\n <span\n class=\"kf-data-table__card-label kf-overline-text kf-bone\"\n style=\"--kf-bone-width: 4rem\"\n >{{ column.label }}</span\n >\n <span\n class=\"kf-data-table__card-meta-value kf-bone\"\n style=\"--kf-bone-width: 5rem\"\n >Valor</span\n >\n </div>\n }\n </div>\n }\n\n @if (cardActionColumns().length) {\n <div class=\"kf-data-table__card-actions\">\n <span class=\"kf-data-table__sk-action kf-bone-fill\"></span>\n </div>\n }\n </div>\n }\n </div>\n } @else {\n <div\n class=\"kf-data-table__scroll\"\n [class.kf-data-table__scroll--weighted]=\"weighted()\"\n aria-busy=\"true\"\n >\n <table class=\"kf-data-table__table\" [class.kf-data-table__table--weighted]=\"weighted()\">\n <thead>\n <tr>\n @for (column of columns(); track column.key) {\n <th\n class=\"kf-overline-text\"\n [class]=\"column.className\"\n [class.kf-data-table__cell--right]=\"isEndAligned(column)\"\n [class.kf-data-table__cell--center]=\"column.align === 'center'\"\n [style.min-width]=\"minWidthFor(column)\"\n [style.width]=\"widthFor(column)\"\n [style.max-width]=\"maxWidthFor(column)\"\n >\n @if (column.hideLabel) {\n <span class=\"kf-data-table__sr-only\">{{ column.label }}</span>\n } @else {\n {{ column.label }}\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (i of skeletonRowIndexes(); track i) {\n <tr class=\"kf-data-table__row\">\n @for (column of columns(); track column.key; let c = $index) {\n <td\n [class]=\"column.className\"\n [class.kf-data-table__cell--right]=\"isEndAligned(column)\"\n [class.kf-data-table__cell--center]=\"column.align === 'center'\"\n [style.min-width]=\"minWidthFor(column)\"\n [style.width]=\"widthFor(column)\"\n [style.max-width]=\"maxWidthFor(column)\"\n >\n <div\n class=\"kf-data-table__sk-cell\"\n [class.kf-data-table__sk-cell--end]=\"isEndAligned(column)\"\n [class.kf-data-table__sk-cell--center]=\"column.align === 'center'\"\n >\n <kf-skeleton\n class=\"kf-data-table__sk-bar\"\n [style.width]=\"skeletonBarWidth(column, i, c)\"\n />\n </div>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n } @else if (rows().length === 0) {\n <div class=\"kf-data-table__empty\">\n <ng-content select=\"[empty]\" />\n </div>\n } @else if (activeView() === 'table') {\n <div\n #scroll\n class=\"kf-data-table__scroll\"\n [class.kf-data-table__scroll--fade-left]=\"canScrollLeft()\"\n [class.kf-data-table__scroll--fade-right]=\"canScrollRight()\"\n [class.kf-data-table__scroll--weighted]=\"weighted()\"\n [attr.tabindex]=\"hasOverflow() ? 0 : null\"\n [attr.role]=\"hasOverflow() ? 'region' : null\"\n [attr.aria-label]=\"hasOverflow() ? ariaLabel() : null\"\n >\n <table class=\"kf-data-table__table\" [class.kf-data-table__table--weighted]=\"weighted()\">\n <thead>\n <tr>\n @for (column of columns(); track column.key) {\n <th\n class=\"kf-overline-text\"\n [attr.data-column-key]=\"column.key\"\n [class]=\"column.className\"\n [class.kf-data-table__cell--right]=\"isEndAligned(column)\"\n [class.kf-data-table__cell--center]=\"column.align === 'center'\"\n [class.kf-data-table__cell--truncate]=\"column.truncate\"\n [class.kf-data-table__cell--sortable]=\"column.sortable\"\n [class.kf-data-table__cell--sticky]=\"column.sticky\"\n [class.kf-data-table__cell--sort-active]=\"sortDirectionFor(column) !== null\"\n [style]=\"stickyStyle(column)\"\n [style.min-width]=\"minWidthFor(column)\"\n [style.width]=\"widthFor(column)\"\n [style.max-width]=\"maxWidthFor(column)\"\n [attr.aria-sort]=\"column.sortable ? ariaSortFor(column) : null\"\n (click)=\"toggleSort(column)\"\n >\n @if (column.sortable) {\n <!-- El clic del bot\u00F3n burbujea al `th`, que ya ordena: un solo manejador para mouse y teclado. -->\n <button type=\"button\" class=\"kf-data-table__sort-button\">\n <span class=\"kf-data-table__th-content\">\n <ng-container\n [ngTemplateOutlet]=\"headerLabel\"\n [ngTemplateOutletContext]=\"{ $implicit: column }\"\n />\n <kf-icon\n name=\"chevron-down\"\n size=\"sm\"\n [rotate]=\"sortDirectionFor(column) === 'asc' ? 180 : 0\"\n class=\"kf-data-table__sort-icon\"\n [class.kf-data-table__sort-icon--active]=\"sortDirectionFor(column) !== null\"\n />\n </span>\n </button>\n } @else {\n <span class=\"kf-data-table__th-content\">\n <ng-container\n [ngTemplateOutlet]=\"headerLabel\"\n [ngTemplateOutletContext]=\"{ $implicit: column }\"\n />\n </span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of displayedRows(); track trackRow(row, $index); let i = $index) {\n <tr\n class=\"kf-data-table__row\"\n [class.kf-data-table__row--interactive]=\"rowInteractive()\"\n [class.kf-data-table__row--current]=\"isCurrentRow(row, i)\"\n [attr.aria-current]=\"isCurrentRow(row, i) ? 'true' : null\"\n [attr.tabindex]=\"rowTabStop() ? 0 : null\"\n (click)=\"onRowClick(row, i, $event)\"\n (keydown.enter)=\"onRowClick(row, i, $event)\"\n (keydown.space)=\"onRowSpace($event, row, i)\"\n >\n @for (column of columns(); track column.key) {\n <td\n [attr.data-column-key]=\"column.key\"\n [class]=\"column.className\"\n [class.kf-data-table__cell--right]=\"isEndAligned(column)\"\n [class.kf-data-table__cell--center]=\"column.align === 'center'\"\n [class.kf-data-table__cell--truncate]=\"column.truncate\"\n [class.kf-data-table__cell--mono]=\"column.mono\"\n [class.kf-data-table__cell--emphasis]=\"column.emphasis\"\n [class.kf-data-table__cell--sticky]=\"column.sticky\"\n [style]=\"stickyStyle(column)\"\n [style.min-width]=\"minWidthFor(column)\"\n [style.width]=\"widthFor(column)\"\n [style.max-width]=\"maxWidthFor(column)\"\n >\n @if (column.truncate) {\n <span class=\"kf-data-table__truncate\" [attr.title]=\"truncateTitle(row, column)\">\n <ng-container\n [ngTemplateOutlet]=\"tableCell\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n </span>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"tableCell\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n }\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n } @else {\n <div class=\"kf-data-table__cards\" [style.--kf-data-table-card-min]=\"cardMinWidth()\">\n @for (row of displayedRows(); track trackRow(row, $index); let i = $index) {\n <div\n class=\"kf-data-table__card\"\n [class.kf-data-table__card--interactive]=\"cardInteractive()\"\n [class.kf-data-table__card--current]=\"isCurrentRow(row, i)\"\n [attr.aria-current]=\"isCurrentRow(row, i) ? 'true' : null\"\n [attr.role]=\"cardInteractive() ? 'button' : null\"\n [attr.tabindex]=\"cardInteractive() ? 0 : null\"\n (click)=\"cardInteractive() ? onRowClick(row, i, $event) : undefined\"\n (keydown.enter)=\"cardInteractive() ? onRowClick(row, i, $event) : undefined\"\n (keydown.space)=\"cardInteractive() ? onRowSpace($event, row, i) : undefined\"\n >\n @if (cardMediaColumn() || cardTitleColumn() || cardStatusColumns().length) {\n <div class=\"kf-data-table__card-header\">\n @if (cardMediaColumn(); as media) {\n <div class=\"kf-data-table__card-media\">\n @if (cellTemplates()?.[media.key]; as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: i, column: media }\"\n />\n } @else {\n <img [src]=\"cellValue(row, media)\" alt=\"\" />\n }\n </div>\n }\n <div class=\"kf-data-table__card-heading\">\n @if (cardTitleColumn(); as title) {\n <span\n class=\"kf-data-table__card-title\"\n [class.kf-data-table__card-title--mono]=\"title.mono\"\n >\n <ng-container\n [ngTemplateOutlet]=\"cardCell\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: title, index: i }\"\n />\n </span>\n }\n @if (cardStatusColumns().length) {\n <span class=\"kf-data-table__card-statuses\">\n @for (column of cardStatusColumns(); track column.key) {\n <ng-container\n [ngTemplateOutlet]=\"cardCell\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n }\n </span>\n }\n </div>\n </div>\n }\n\n @if (cardLeadColumns().length || cardFieldColumns().length) {\n <div class=\"kf-data-table__card-fields\">\n @for (column of cardLeadColumns(); track column.key) {\n <div\n class=\"kf-data-table__card-lead\"\n [style.--kf-data-table-card-clamp]=\"column.cardClamp\"\n [attr.title]=\"cellValue(row, column) || null\"\n >\n <span class=\"kf-data-table__sr-only\">{{ column.label }}: </span>\n <ng-container\n [ngTemplateOutlet]=\"cardCell\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n </div>\n }\n @for (column of cardFieldColumns(); track column.key) {\n <div class=\"kf-data-table__card-field\">\n <span class=\"kf-data-table__card-label kf-overline-text\">{{ column.label }}</span>\n <span\n class=\"kf-data-table__card-value\"\n [class.kf-data-table__card-value--emphasis]=\"column.emphasis\"\n >\n <ng-container\n [ngTemplateOutlet]=\"cardCell\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n </span>\n </div>\n }\n </div>\n }\n\n @if (cardMetaColumns().length) {\n <div class=\"kf-data-table__card-meta\">\n @for (column of cardMetaColumns(); track column.key) {\n <div\n class=\"kf-data-table__card-meta-item\"\n [class.kf-data-table__card-meta-item--end]=\"\n isEndAligned(column) || column.emphasis\n \"\n [class.kf-data-table__card-meta-item--emphasis]=\"column.emphasis\"\n [style.flex-basis]=\"column.width\"\n >\n <span class=\"kf-data-table__card-label kf-overline-text\">{{ column.label }}</span>\n <span class=\"kf-data-table__card-meta-value\">\n <ng-container\n [ngTemplateOutlet]=\"cardCell\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n </span>\n </div>\n }\n </div>\n }\n\n @if (cardActionColumns().length) {\n <div class=\"kf-data-table__card-actions\">\n @for (column of cardActionColumns(); track column.key) {\n <ng-container\n [ngTemplateOutlet]=\"cardCell\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n }\n </div>\n }\n </div>\n }\n </div>\n }\n\n @if (!loading() && rows().length > 0) {\n <div class=\"kf-data-table__footer\">\n @if (effectivePageSize()) {\n <kf-pagination\n [page]=\"page()\"\n [pages]=\"totalPages()\"\n [pageSizeOptions]=\"pageSizeOptions()\"\n [pageSize]=\"effectivePageSize()\"\n (pageChange)=\"goToPage($event)\"\n (pageSizeChange)=\"setPageSize($event)\"\n >\n {{ paginationSummary() }}\n </kf-pagination>\n }\n <ng-content select=\"[footer]\" />\n </div>\n }\n</div>\n\n<!-- R\u00F3tulo de una columna: texto visible o solo para lectores con `hideLabel`. -->\n<ng-template #headerLabel let-column>\n @if (column.hideLabel) {\n <span class=\"kf-data-table__sr-only\">{{ column.label }}</span>\n } @else {\n {{ column.label }}\n }\n</ng-template>\n\n<!-- Celda de la vista tabla \u2014 compartida por la celda normal y la `truncate`.\n Una columna `interactive` envuelve su contenido en un bot\u00F3n real. -->\n<ng-template #tableCell let-row let-column=\"column\" let-i=\"index\">\n @if (column.interactive) {\n <button\n type=\"button\"\n class=\"kf-data-table__cell-button\"\n [attr.aria-label]=\"cellLabel(row, column, i)\"\n (click)=\"onCellClick(row, column, i)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"tableCellContent\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n </button>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"tableCellContent\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n }\n</ng-template>\n\n<!-- Contenido de una celda de la vista tabla (template del consumidor,\n thumbnail o texto). -->\n<ng-template #tableCellContent let-row let-column=\"column\" let-i=\"index\">\n @if (cellTemplates()?.[column.key]; as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: i, column: column }\"\n />\n } @else if (column.cardRole === 'media') {\n <img class=\"kf-data-table__thumb\" [src]=\"cellValue(row, column)\" alt=\"\" />\n } @else {\n {{ cellValue(row, column) }}\n }\n</ng-template>\n\n<!-- Zona de la tarjeta: igual que la celda de tabla, con bot\u00F3n si la columna es `interactive`. -->\n<ng-template #cardCell let-row let-column=\"column\" let-i=\"index\">\n @if (column.interactive) {\n <button\n type=\"button\"\n class=\"kf-data-table__cell-button\"\n [attr.aria-label]=\"cellLabel(row, column, i)\"\n (click)=\"onCellClick(row, column, i)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"cardCellContent\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n </button>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"cardCellContent\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n />\n }\n</ng-template>\n\n<!-- Contenido de una zona de la tarjeta: template del consumidor o el valor como texto. -->\n<ng-template #cardCellContent let-row let-column=\"column\" let-i=\"index\">\n @if (cellTemplates()?.[column.key]; as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: i, column: column }\"\n />\n } @else {\n {{ cellValue(row, column) }}\n }\n</ng-template>\n", styles: [".kf-overline-text{font-family:var(--kf-font-title);font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-bone-shimmer 1.4s ease infinite}.kf-bone{display:block;box-sizing:border-box;width:var(--kf-bone-width, 60%);max-width:100%;overflow:hidden;white-space:nowrap;border-radius:var(--kf-radius-xs);-webkit-user-select:none;user-select:none;pointer-events:none}.kf-bone.kf-bone{color:transparent!important;-webkit-text-fill-color:transparent}.kf-bone>*{visibility:hidden}@keyframes kf-bone-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{animation:none;background:var(--kf-color-border)}}:host{display:block;font-family:var(--kf-font-body)}.kf-data-table{background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-sm);overflow:hidden}.kf-data-table--flush{border:none;box-shadow:none;border-radius:0}.kf-data-table__toolbar{display:flex;justify-content:flex-end;padding:var(--kf-space-sm) var(--kf-space-md);border-bottom:1px solid var(--kf-color-border)}.kf-data-table__scroll{position:relative;overflow-x:auto}.kf-data-table__scroll--weighted{container-type:inline-size}.kf-data-table__scroll:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-data-table__scroll:before,.kf-data-table__scroll:after{content:\"\";position:absolute;top:0;bottom:0;width:24px;pointer-events:none;opacity:0;transition:opacity .14s}.kf-data-table__scroll:before{left:0;background:linear-gradient(to right,var(--kf-color-white),transparent)}.kf-data-table__scroll:after{right:0;background:linear-gradient(to left,var(--kf-color-white),transparent)}.kf-data-table__scroll--fade-left:before{opacity:1}.kf-data-table__scroll--fade-right:after{opacity:1}.kf-data-table__table{width:100%;border-collapse:collapse;text-align:left}.kf-data-table__table th,.kf-data-table__table td{padding:var(--kf-space-sm) var(--kf-space-md);border-bottom:1px solid var(--kf-color-border);white-space:nowrap}.kf-data-table--compact .kf-data-table__table th,.kf-data-table--compact .kf-data-table__table td{padding:var(--kf-space-xs) var(--kf-space-md)}.kf-data-table__table th{background:var(--kf-color-surface)}.kf-data-table__table td{color:var(--kf-color-text)}.kf-data-table__table tbody tr:last-child td{border-bottom:none}.kf-data-table__row{transition:background .14s}.kf-data-table__row--interactive{cursor:pointer}.kf-data-table__row--interactive:hover{background:var(--kf-color-primary-soft)}.kf-data-table__row--interactive:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-data-table__row--current{background:var(--kf-color-primary-soft)}.kf-data-table__cell--right{text-align:right}.kf-data-table__cell--center{text-align:center}.kf-data-table__table .kf-data-table__cell--truncate{max-width:0}.kf-data-table__truncate{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-data-table__table td.kf-data-table__cell--mono{font-family:var(--kf-font-mono);font-size:var(--kf-font-size-body-sm)}.kf-data-table__table td.kf-data-table__cell--emphasis{font-weight:700;color:var(--kf-color-ink);font-variant-numeric:tabular-nums}.kf-data-table__sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.kf-data-table__cell-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--kf-space-xs);max-width:100%;min-width:32px;min-height:32px;padding:var(--kf-space-xs);border:0;border-radius:var(--kf-radius-xs);background:transparent;color:inherit;font:inherit;text-align:inherit;cursor:pointer}.kf-data-table__cell-button:hover{box-shadow:inset 0 0 0 1px var(--kf-color-border-strong)}.kf-data-table__cell-button:focus-visible{outline:2px solid transparent;outline-offset:-2px;box-shadow:inset 0 0 0 2px var(--kf-color-primary)}@media(max-width:640px),(pointer:coarse){.kf-data-table__cell-button{min-width:44px;min-height:44px}}.kf-data-table__cell--sticky{background:var(--kf-color-white)}.kf-data-table__table th.kf-data-table__cell--sticky{background:var(--kf-color-surface);z-index:2}.kf-data-table__cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.kf-data-table__sort-button{display:inline-flex;align-items:center;margin:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;text-align:inherit;background:none;border:none;border-radius:var(--kf-radius-xs);cursor:pointer}.kf-data-table__sort-button:focus-visible{outline:2px solid transparent;box-shadow:var(--kf-shadow-focus)}.kf-data-table__cell--sortable:hover{color:var(--kf-color-ink)}.kf-data-table__table th.kf-data-table__cell--sort-active{color:var(--kf-color-primary);font-weight:700}.kf-data-table__th-content{display:inline-flex;align-items:center;gap:var(--kf-space-xs)}.kf-data-table__sort-icon{transition:opacity .14s}.kf-data-table__cell--sortable:hover .kf-data-table__sort-icon{opacity:.5}.kf-data-table__sort-icon--active,.kf-data-table__cell--sortable:hover .kf-data-table__sort-icon--active{opacity:1}.kf-data-table__empty{padding:var(--kf-space-md)}.kf-data-table__footer{padding:var(--kf-space-sm) var(--kf-space-md);border-top:1px solid var(--kf-color-border)}.kf-data-table__footer:empty{display:none}.kf-data-table__cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--kf-data-table-card-min, 220px),100%),1fr));grid-auto-rows:1fr;gap:var(--kf-space-md);padding:var(--kf-space-md)}.kf-data-table__card{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);overflow:hidden;transition:border-color .14s,box-shadow .14s,background .14s}.kf-data-table__card--interactive{cursor:pointer}.kf-data-table__card:hover{border-color:var(--kf-color-border-strong);box-shadow:var(--kf-shadow-xs)}.kf-data-table__card--interactive:hover{background:var(--kf-color-primary-soft)}.kf-data-table__card--interactive:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:var(--kf-shadow-focus)}.kf-data-table__card--current{border-color:var(--kf-color-primary);background:var(--kf-color-primary-soft)}.kf-data-table__card-header{display:flex;align-items:center;gap:var(--kf-space-sm);min-width:0;padding:var(--kf-space-md) var(--kf-space-md) var(--kf-space-sm)}.kf-data-table__card-media{flex:none}.kf-data-table__card-media img,.kf-data-table__thumb{display:block;width:48px;height:48px;border-radius:var(--kf-radius-xs);object-fit:cover;background:var(--kf-color-surface)}.kf-data-table__card-heading{display:flex;flex:1;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);min-width:0}.kf-data-table__card-title{flex:0 1 auto;min-width:0;font-family:var(--kf-font-title);font-weight:600;color:var(--kf-color-ink);overflow-wrap:anywhere}.kf-data-table__card-title--mono{flex:none;font-family:var(--kf-font-mono);font-size:var(--kf-font-size-body-sm);white-space:nowrap}.kf-data-table__card-statuses{display:flex;flex:0 1 auto;flex-wrap:nowrap;justify-content:flex-end;gap:var(--kf-space-xs);min-width:0;overflow:hidden}.kf-data-table__card-actions{display:flex;flex-wrap:wrap;gap:var(--kf-space-xs)}.kf-data-table__card-fields{display:flex;flex-direction:column;gap:var(--kf-space-xs);min-width:0;padding:var(--kf-space-md)}.kf-data-table__card-header+.kf-data-table__card-fields{padding-top:0}.kf-data-table__card-lead{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--kf-data-table-card-clamp, 2);line-clamp:var(--kf-data-table-card-clamp, 2);min-width:0;overflow:hidden;overflow-wrap:anywhere;color:var(--kf-color-ink);font-weight:500;line-height:1.35}.kf-data-table__card-field{display:flex;justify-content:space-between;gap:var(--kf-space-sm);min-width:0}.kf-data-table__card-label{flex:none}.kf-data-table__card-value{min-width:0;color:var(--kf-color-text);text-align:right;overflow-wrap:anywhere}.kf-data-table__card-value--emphasis,.kf-data-table__card-meta-item--emphasis .kf-data-table__card-meta-value{font-weight:700;color:var(--kf-color-ink);font-variant-numeric:tabular-nums}.kf-data-table__card-meta{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--kf-space-xs) var(--kf-space-md);margin-top:auto;padding:var(--kf-space-sm) var(--kf-space-md) var(--kf-space-md);border-top:1px solid var(--kf-color-border)}.kf-data-table__card-meta-item{display:flex;flex-direction:column;gap:2px;min-width:0}.kf-data-table__card-meta-item--end{margin-left:auto;align-items:flex-end;text-align:right}.kf-data-table__card-meta-value{color:var(--kf-color-text);font-variant-numeric:tabular-nums}.kf-data-table__card-meta-item--emphasis .kf-data-table__card-meta-value{font-size:var(--kf-font-size-body)}.kf-data-table__card-actions{justify-content:flex-end;margin-top:auto;padding:var(--kf-space-sm) var(--kf-space-md);border-top:1px solid var(--kf-color-border);background:var(--kf-color-surface)}.kf-data-table__card-meta~.kf-data-table__card-actions{margin-top:0}.kf-data-table__thumb{width:32px;height:32px}@media(prefers-reduced-motion:reduce){.kf-data-table__card,.kf-data-table__row{transition:none}}.kf-data-table__sk-cell{display:flex;align-items:center;justify-content:flex-start;min-height:1lh}.kf-data-table__sk-cell--center{justify-content:center}.kf-data-table__sk-cell--end{justify-content:flex-end}.kf-data-table__sk-bar{flex:none}.kf-data-table__sk-media{display:block;width:48px;height:48px;border-radius:var(--kf-radius-xs)}.kf-data-table__sk-pill{display:block;width:4.5rem;height:1.25rem;border-radius:var(--kf-radius-pill)}.kf-data-table__sk-value{flex:none;width:40%}.kf-data-table__sk-lead{line-height:1.35}.kf-data-table__sk-action{display:block;width:5rem;height:2rem;border-radius:var(--kf-radius-sm)}\n"] }]
|
|
4312
4392
|
}], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], skeletonRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonRows", required: false }] }], scrollEl: [{ type: i0.ViewChild, args: ['scroll', { isSignal: true }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], flush: [{ type: i0.Input, args: [{ isSignal: true, alias: "flush", required: false }] }], cardable: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardable", required: false }] }], defaultView: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultView", required: false }] }], showViewToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showViewToggle", required: false }] }], cardMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardMinWidth", required: false }] }], render: [{ type: i0.Input, args: [{ isSignal: true, alias: "render", required: false }] }], cellTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellTemplates", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], rowClickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClickable", required: false }] }], rowFocusable: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowFocusable", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }], cellAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellAriaLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], currentRowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentRowKey", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], keepPageOnRowsChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepPageOnRowsChange", required: false }] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }], itemLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemLabel", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }] } });
|
|
4313
4393
|
|
|
4314
4394
|
/**
|
|
@@ -4384,7 +4464,7 @@ class DocumentRow {
|
|
|
4384
4464
|
/** Dibuja el esqueleto en lugar del contenido, conservando las dimensiones. */
|
|
4385
4465
|
loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
4386
4466
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DocumentRow, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4387
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DocumentRow, isStandalone: true, selector: "kf-document-row", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, downloadLabel: { classPropertyName: "downloadLabel", publicName: "downloadLabel", isSignal: true, isRequired: false, transformFunction: null }, pendingLabel: { classPropertyName: "pendingLabel", publicName: "pendingLabel", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "\"kf-document-row--\" + tone()", "class.kf-document-row--loading": "loading()", "attr.aria-busy": "loading() ? 'true' : null" } }, ngImport: i0, template: "@if (loading()) {\n <span class=\"kf-document-row__icon kf-bone-fill\" aria-hidden=\"true\"></span>\n\n <span class=\"kf-document-row__body\" aria-hidden=\"true\">\n <span class=\"kf-document-row__title kf-bone\" style=\"--kf-bone-width: 55%\">{{ title() }}</span>\n @if (meta(); as line) {\n <span class=\"kf-document-row__meta kf-caption-text kf-bone\" style=\"--kf-bone-width: 35%\">{{\n line\n }}</span>\n }\n </span>\n\n <span class=\"kf-document-row__actions kf-document-row__actions--loading\" aria-hidden=\"true\">\n <ng-content />\n <span class=\"kf-document-row__pending kf-caption-text kf-bone\" style=\"--kf-bone-width: 5rem\">{{\n href() ? downloadLabel() : pendingLabel()\n }}</span>\n </span>\n} @else {\n <span class=\"kf-document-row__icon\" aria-hidden=\"true\">\n <kf-icon [name]=\"icon()\" size=\"sm\" />\n </span>\n\n <span class=\"kf-document-row__body\">\n <span class=\"kf-document-row__title\">{{ title() }}</span>\n @if (meta(); as line) {\n <span class=\"kf-document-row__meta kf-caption-text\">{{ line }}</span>\n }\n </span>\n\n <span class=\"kf-document-row__actions\">\n <ng-content />\n @if (href(); as url) {\n <kf-link [href]=\"url\">{{ downloadLabel() }}</kf-link>\n } @else {\n <span class=\"kf-document-row__pending kf-caption-text\">{{ pendingLabel() }}</span>\n }\n </span>\n}\n", styles: [".kf-caption-text{font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-bone-shimmer 1.4s ease infinite}.kf-bone{display:block;box-sizing:border-box;width:var(--kf-bone-width, 60%);max-width:100%;overflow:hidden;white-space:nowrap;border-radius:var(--kf-radius-xs);-webkit-user-select:none;user-select:none;pointer-events:none}.kf-bone.kf-bone{color:transparent!important}.kf-bone>*{visibility:hidden}@keyframes kf-bone-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{animation:none;background:var(--kf-color-border)}}:host{display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-sm);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);min-width:0}.kf-document-row__icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:32px;height:32px;border-radius:var(--kf-radius-xs);background:var(--kf-color-gray-200);color:var(--kf-color-text)}:host(.kf-document-row--info) .kf-document-row__icon{background:var(--kf-color-info-soft);color:var(--kf-color-info-strong)}:host(.kf-document-row--ok) .kf-document-row__icon{background:var(--kf-color-success-soft);color:var(--kf-color-success-strong)}:host(.kf-document-row--warn) .kf-document-row__icon{background:var(--kf-color-warning-soft);color:var(--kf-color-warning-strong)}:host(.kf-document-row--error) .kf-document-row__icon{background:var(--kf-color-error-soft);color:var(--kf-color-error-strong)}.kf-document-row__body{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}.kf-document-row__title{font-family:var(--kf-font-body);font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-medium);color:var(--kf-color-ink)}.kf-document-row__meta{overflow-wrap:anywhere}.kf-document-row__actions{display:flex;align-items:center;gap:var(--kf-space-sm);flex:0 0 auto;margin-left:auto}@container (max-width: 420px){:host{flex-wrap:wrap}}.kf-document-row__actions--loading>:not(.kf-bone){visibility:hidden}.kf-document-row__icon.kf-bone-fill{border-radius:var(--kf-radius-xs)}:host(.kf-document-row--loading) .kf-document-row__icon{background:var(--kf-color-border);animation:none}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "component", type: Link, selector: "kf-link", inputs: ["variant", "disabled", "href", "showArrow"] }] });
|
|
4467
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DocumentRow, isStandalone: true, selector: "kf-document-row", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, downloadLabel: { classPropertyName: "downloadLabel", publicName: "downloadLabel", isSignal: true, isRequired: false, transformFunction: null }, pendingLabel: { classPropertyName: "pendingLabel", publicName: "pendingLabel", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "\"kf-document-row--\" + tone()", "class.kf-document-row--loading": "loading()", "attr.aria-busy": "loading() ? 'true' : null" } }, ngImport: i0, template: "@if (loading()) {\n <span class=\"kf-document-row__icon kf-bone-fill\" aria-hidden=\"true\"></span>\n\n <span class=\"kf-document-row__body\" aria-hidden=\"true\">\n <span class=\"kf-document-row__title kf-bone\" style=\"--kf-bone-width: 55%\">{{ title() }}</span>\n @if (meta(); as line) {\n <span class=\"kf-document-row__meta kf-caption-text kf-bone\" style=\"--kf-bone-width: 35%\">{{\n line\n }}</span>\n }\n </span>\n\n <span class=\"kf-document-row__actions kf-document-row__actions--loading\" aria-hidden=\"true\">\n <ng-content />\n <span class=\"kf-document-row__pending kf-caption-text kf-bone\" style=\"--kf-bone-width: 5rem\">{{\n href() ? downloadLabel() : pendingLabel()\n }}</span>\n </span>\n} @else {\n <span class=\"kf-document-row__icon\" aria-hidden=\"true\">\n <kf-icon [name]=\"icon()\" size=\"sm\" />\n </span>\n\n <span class=\"kf-document-row__body\">\n <span class=\"kf-document-row__title\">{{ title() }}</span>\n @if (meta(); as line) {\n <span class=\"kf-document-row__meta kf-caption-text\">{{ line }}</span>\n }\n </span>\n\n <span class=\"kf-document-row__actions\">\n <ng-content />\n @if (href(); as url) {\n <kf-link [href]=\"url\">{{ downloadLabel() }}</kf-link>\n } @else {\n <span class=\"kf-document-row__pending kf-caption-text\">{{ pendingLabel() }}</span>\n }\n </span>\n}\n", styles: [".kf-caption-text{font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-bone-shimmer 1.4s ease infinite}.kf-bone{display:block;box-sizing:border-box;width:var(--kf-bone-width, 60%);max-width:100%;overflow:hidden;white-space:nowrap;border-radius:var(--kf-radius-xs);-webkit-user-select:none;user-select:none;pointer-events:none}.kf-bone.kf-bone{color:transparent!important;-webkit-text-fill-color:transparent}.kf-bone>*{visibility:hidden}@keyframes kf-bone-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{animation:none;background:var(--kf-color-border)}}:host{display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-sm);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);min-width:0}.kf-document-row__icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:32px;height:32px;border-radius:var(--kf-radius-xs);background:var(--kf-color-gray-200);color:var(--kf-color-text)}:host(.kf-document-row--info) .kf-document-row__icon{background:var(--kf-color-info-soft);color:var(--kf-color-info-strong)}:host(.kf-document-row--ok) .kf-document-row__icon{background:var(--kf-color-success-soft);color:var(--kf-color-success-strong)}:host(.kf-document-row--warn) .kf-document-row__icon{background:var(--kf-color-warning-soft);color:var(--kf-color-warning-strong)}:host(.kf-document-row--error) .kf-document-row__icon{background:var(--kf-color-error-soft);color:var(--kf-color-error-strong)}.kf-document-row__body{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}.kf-document-row__title{font-family:var(--kf-font-body);font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-medium);color:var(--kf-color-ink)}.kf-document-row__meta{overflow-wrap:anywhere}.kf-document-row__actions{display:flex;align-items:center;gap:var(--kf-space-sm);flex:0 0 auto;margin-left:auto}@container (max-width: 420px){:host{flex-wrap:wrap}}.kf-document-row__actions--loading>:not(.kf-bone){visibility:hidden}.kf-document-row__icon.kf-bone-fill{border-radius:var(--kf-radius-xs)}:host(.kf-document-row--loading) .kf-document-row__icon{background:var(--kf-color-border);animation:none}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "component", type: Link, selector: "kf-link", inputs: ["variant", "disabled", "href", "showArrow"] }] });
|
|
4388
4468
|
}
|
|
4389
4469
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DocumentRow, decorators: [{
|
|
4390
4470
|
type: Component,
|
|
@@ -4392,7 +4472,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
4392
4472
|
'[class]': '"kf-document-row--" + tone()',
|
|
4393
4473
|
'[class.kf-document-row--loading]': 'loading()',
|
|
4394
4474
|
'[attr.aria-busy]': "loading() ? 'true' : null",
|
|
4395
|
-
}, template: "@if (loading()) {\n <span class=\"kf-document-row__icon kf-bone-fill\" aria-hidden=\"true\"></span>\n\n <span class=\"kf-document-row__body\" aria-hidden=\"true\">\n <span class=\"kf-document-row__title kf-bone\" style=\"--kf-bone-width: 55%\">{{ title() }}</span>\n @if (meta(); as line) {\n <span class=\"kf-document-row__meta kf-caption-text kf-bone\" style=\"--kf-bone-width: 35%\">{{\n line\n }}</span>\n }\n </span>\n\n <span class=\"kf-document-row__actions kf-document-row__actions--loading\" aria-hidden=\"true\">\n <ng-content />\n <span class=\"kf-document-row__pending kf-caption-text kf-bone\" style=\"--kf-bone-width: 5rem\">{{\n href() ? downloadLabel() : pendingLabel()\n }}</span>\n </span>\n} @else {\n <span class=\"kf-document-row__icon\" aria-hidden=\"true\">\n <kf-icon [name]=\"icon()\" size=\"sm\" />\n </span>\n\n <span class=\"kf-document-row__body\">\n <span class=\"kf-document-row__title\">{{ title() }}</span>\n @if (meta(); as line) {\n <span class=\"kf-document-row__meta kf-caption-text\">{{ line }}</span>\n }\n </span>\n\n <span class=\"kf-document-row__actions\">\n <ng-content />\n @if (href(); as url) {\n <kf-link [href]=\"url\">{{ downloadLabel() }}</kf-link>\n } @else {\n <span class=\"kf-document-row__pending kf-caption-text\">{{ pendingLabel() }}</span>\n }\n </span>\n}\n", styles: [".kf-caption-text{font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-bone-shimmer 1.4s ease infinite}.kf-bone{display:block;box-sizing:border-box;width:var(--kf-bone-width, 60%);max-width:100%;overflow:hidden;white-space:nowrap;border-radius:var(--kf-radius-xs);-webkit-user-select:none;user-select:none;pointer-events:none}.kf-bone.kf-bone{color:transparent!important}.kf-bone>*{visibility:hidden}@keyframes kf-bone-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{animation:none;background:var(--kf-color-border)}}:host{display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-sm);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);min-width:0}.kf-document-row__icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:32px;height:32px;border-radius:var(--kf-radius-xs);background:var(--kf-color-gray-200);color:var(--kf-color-text)}:host(.kf-document-row--info) .kf-document-row__icon{background:var(--kf-color-info-soft);color:var(--kf-color-info-strong)}:host(.kf-document-row--ok) .kf-document-row__icon{background:var(--kf-color-success-soft);color:var(--kf-color-success-strong)}:host(.kf-document-row--warn) .kf-document-row__icon{background:var(--kf-color-warning-soft);color:var(--kf-color-warning-strong)}:host(.kf-document-row--error) .kf-document-row__icon{background:var(--kf-color-error-soft);color:var(--kf-color-error-strong)}.kf-document-row__body{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}.kf-document-row__title{font-family:var(--kf-font-body);font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-medium);color:var(--kf-color-ink)}.kf-document-row__meta{overflow-wrap:anywhere}.kf-document-row__actions{display:flex;align-items:center;gap:var(--kf-space-sm);flex:0 0 auto;margin-left:auto}@container (max-width: 420px){:host{flex-wrap:wrap}}.kf-document-row__actions--loading>:not(.kf-bone){visibility:hidden}.kf-document-row__icon.kf-bone-fill{border-radius:var(--kf-radius-xs)}:host(.kf-document-row--loading) .kf-document-row__icon{background:var(--kf-color-border);animation:none}\n"] }]
|
|
4475
|
+
}, template: "@if (loading()) {\n <span class=\"kf-document-row__icon kf-bone-fill\" aria-hidden=\"true\"></span>\n\n <span class=\"kf-document-row__body\" aria-hidden=\"true\">\n <span class=\"kf-document-row__title kf-bone\" style=\"--kf-bone-width: 55%\">{{ title() }}</span>\n @if (meta(); as line) {\n <span class=\"kf-document-row__meta kf-caption-text kf-bone\" style=\"--kf-bone-width: 35%\">{{\n line\n }}</span>\n }\n </span>\n\n <span class=\"kf-document-row__actions kf-document-row__actions--loading\" aria-hidden=\"true\">\n <ng-content />\n <span class=\"kf-document-row__pending kf-caption-text kf-bone\" style=\"--kf-bone-width: 5rem\">{{\n href() ? downloadLabel() : pendingLabel()\n }}</span>\n </span>\n} @else {\n <span class=\"kf-document-row__icon\" aria-hidden=\"true\">\n <kf-icon [name]=\"icon()\" size=\"sm\" />\n </span>\n\n <span class=\"kf-document-row__body\">\n <span class=\"kf-document-row__title\">{{ title() }}</span>\n @if (meta(); as line) {\n <span class=\"kf-document-row__meta kf-caption-text\">{{ line }}</span>\n }\n </span>\n\n <span class=\"kf-document-row__actions\">\n <ng-content />\n @if (href(); as url) {\n <kf-link [href]=\"url\">{{ downloadLabel() }}</kf-link>\n } @else {\n <span class=\"kf-document-row__pending kf-caption-text\">{{ pendingLabel() }}</span>\n }\n </span>\n}\n", styles: [".kf-caption-text{font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-bone-shimmer 1.4s ease infinite}.kf-bone{display:block;box-sizing:border-box;width:var(--kf-bone-width, 60%);max-width:100%;overflow:hidden;white-space:nowrap;border-radius:var(--kf-radius-xs);-webkit-user-select:none;user-select:none;pointer-events:none}.kf-bone.kf-bone{color:transparent!important;-webkit-text-fill-color:transparent}.kf-bone>*{visibility:hidden}@keyframes kf-bone-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{animation:none;background:var(--kf-color-border)}}:host{display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-sm);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);min-width:0}.kf-document-row__icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:32px;height:32px;border-radius:var(--kf-radius-xs);background:var(--kf-color-gray-200);color:var(--kf-color-text)}:host(.kf-document-row--info) .kf-document-row__icon{background:var(--kf-color-info-soft);color:var(--kf-color-info-strong)}:host(.kf-document-row--ok) .kf-document-row__icon{background:var(--kf-color-success-soft);color:var(--kf-color-success-strong)}:host(.kf-document-row--warn) .kf-document-row__icon{background:var(--kf-color-warning-soft);color:var(--kf-color-warning-strong)}:host(.kf-document-row--error) .kf-document-row__icon{background:var(--kf-color-error-soft);color:var(--kf-color-error-strong)}.kf-document-row__body{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}.kf-document-row__title{font-family:var(--kf-font-body);font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-medium);color:var(--kf-color-ink)}.kf-document-row__meta{overflow-wrap:anywhere}.kf-document-row__actions{display:flex;align-items:center;gap:var(--kf-space-sm);flex:0 0 auto;margin-left:auto}@container (max-width: 420px){:host{flex-wrap:wrap}}.kf-document-row__actions--loading>:not(.kf-bone){visibility:hidden}.kf-document-row__icon.kf-bone-fill{border-radius:var(--kf-radius-xs)}:host(.kf-document-row--loading) .kf-document-row__icon{background:var(--kf-color-border);animation:none}\n"] }]
|
|
4396
4476
|
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], downloadLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "downloadLabel", required: false }] }], pendingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pendingLabel", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });
|
|
4397
4477
|
|
|
4398
4478
|
/**
|
|
@@ -4530,13 +4610,13 @@ class StatCard {
|
|
|
4530
4610
|
}, /* @ts-ignore */
|
|
4531
4611
|
...(ngDevMode ? [{ debugName: "hasBar" }] : /* istanbul ignore next */ []));
|
|
4532
4612
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StatCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4533
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: StatCard, isStandalone: true, selector: "kf-stat-card", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, note: { classPropertyName: "note", publicName: "note", isSignal: true, isRequired: false, transformFunction: null }, bar: { classPropertyName: "bar", publicName: "bar", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardClick: "cardClick" }, host: { properties: { "class.kf-stat-card-host--compact": "density() === 'compact'" } }, ngImport: i0, template: "@if (loading()) {\n <div\n class=\"kf-stat-card\"\n [class.kf-stat-card--compact]=\"density() === 'compact'\"\n aria-busy=\"true\"\n >\n <span\n class=\"kf-stat-card__icon kf-stat-card__icon--bone kf-bone-fill\"\n aria-hidden=\"true\"\n ></span>\n <span class=\"kf-stat-card__body\" aria-hidden=\"true\">\n <span class=\"kf-stat-card__value kf-bone\" style=\"--kf-bone-width: 40%\">{{ value() }}</span>\n <span class=\"kf-stat-card__label kf-bone\" style=\"--kf-bone-width: 70%\">{{ label() }}</span>\n @if (note()) {\n <span class=\"kf-stat-card__note kf-bone\" style=\"--kf-bone-width: 55%\">{{ note() }}</span>\n }\n @if (hasBar()) {\n <span class=\"kf-stat-card__bar\">\n <span class=\"kf-stat-card__bar-bone kf-bone-fill\"></span>\n </span>\n }\n @if (hint()) {\n <span class=\"kf-stat-card__hint kf-bone\" style=\"--kf-bone-width: 45%\">{{ hint() }}</span>\n }\n </span>\n </div>\n} @else if (clickable()) {\n <button\n type=\"button\"\n class=\"kf-stat-card kf-stat-card--clickable\"\n [class.kf-stat-card--compact]=\"density() === 'compact'\"\n [class.kf-stat-card--pressed]=\"pressed() === true\"\n [attr.aria-pressed]=\"pressed()\"\n (click)=\"cardClick.emit()\"\n >\n <ng-container *ngTemplateOutlet=\"content\" />\n <kf-icon class=\"kf-stat-card__chevron\" name=\"chevron-right\" size=\"sm\" />\n </button>\n} @else {\n <div class=\"kf-stat-card\" [class.kf-stat-card--compact]=\"density() === 'compact'\">\n <ng-container *ngTemplateOutlet=\"content\" />\n </div>\n}\n\n<ng-template #content>\n <span class=\"kf-stat-card__icon\" [class]=\"'kf-stat-card__icon--' + tone()\">\n <kf-icon [name]=\"icon()\" size=\"md\" />\n </span>\n <span class=\"kf-stat-card__body\">\n <span class=\"kf-stat-card__value\">{{ value() }}</span>\n <span class=\"kf-stat-card__label\">{{ label() }}</span>\n @if (note()) {\n <span class=\"kf-stat-card__note\">{{ note() }}</span>\n }\n @if (hasBar()) {\n <kf-progress\n class=\"kf-stat-card__bar\"\n [value]=\"bar()!\"\n [tone]=\"barTone()\"\n [ariaLabel]=\"label()\"\n />\n }\n @if (hint()) {\n <span class=\"kf-stat-card__hint\">{{ hint() }}</span>\n }\n </span>\n</ng-template>\n", styles: [".kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-bone-shimmer 1.4s ease infinite}.kf-bone{display:block;box-sizing:border-box;width:var(--kf-bone-width, 60%);max-width:100%;overflow:hidden;white-space:nowrap;border-radius:var(--kf-radius-xs);-webkit-user-select:none;user-select:none;pointer-events:none}.kf-bone.kf-bone{color:transparent!important}.kf-bone>*{visibility:hidden}@keyframes kf-bone-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{animation:none;background:var(--kf-color-border)}}:host{display:block}.kf-stat-card{display:flex;align-items:center;gap:var(--kf-space-md);width:100%;padding:var(--kf-space-lg);border:1px solid var(--kf-color-border-strong);border-radius:var(--kf-radius-md);background:var(--kf-color-white);box-shadow:var(--kf-shadow-sm);font:inherit;text-align:left}.kf-stat-card--clickable{cursor:pointer;transition:box-shadow .14s,transform .14s}.kf-stat-card--clickable:hover{box-shadow:var(--kf-shadow-md);transform:translateY(-2px)}.kf-stat-card--clickable:focus-visible{outline:2px solid transparent;box-shadow:var(--kf-shadow-focus)}.kf-stat-card--pressed{border-color:var(--kf-color-primary);background:var(--kf-color-primary-soft);box-shadow:inset 0 0 0 1px var(--kf-color-primary)}.kf-stat-card--pressed:focus-visible{box-shadow:inset 0 0 0 1px var(--kf-color-primary),var(--kf-shadow-focus)}.kf-stat-card__icon{display:grid;place-items:center;width:50px;height:50px;flex:none;border-radius:var(--kf-radius-md)}.kf-stat-card__icon--primary{background:var(--kf-color-primary-soft);color:var(--kf-color-primary)}.kf-stat-card__icon--success{background:var(--kf-color-success-soft);color:var(--kf-color-success-strong)}.kf-stat-card__icon--error{background:var(--kf-color-error-soft);color:var(--kf-color-error)}.kf-stat-card__icon--purple{background:var(--kf-color-purple-soft);color:var(--kf-color-purple)}.kf-stat-card__icon--warn{background:var(--kf-color-warning-soft);color:var(--kf-color-warning-strong)}.kf-stat-card__icon--info{background:var(--kf-color-info-soft);color:var(--kf-color-info-strong)}.kf-stat-card__icon--neutral{background:var(--kf-color-gray-100);color:var(--kf-color-text)}.kf-stat-card__body{display:flex;flex-direction:column;gap:2px;min-width:0}.kf-stat-card__value{font-family:var(--kf-font-title);font-weight:700;font-size:var(--kf-font-size-title-md);color:var(--kf-color-ink)}.kf-stat-card__label{font-size:.875rem;font-weight:700;color:var(--kf-color-ink)}.kf-stat-card__note{font-size:.78rem;color:var(--kf-color-text-muted)}.kf-stat-card__bar{padding-block-start:var(--kf-space-xs)}.kf-stat-card__hint{font-size:.78rem;color:var(--kf-color-text)}.kf-stat-card__chevron{margin-left:auto;flex:none;color:var(--kf-color-gray-400)}.kf-stat-card__icon--bone{border-radius:var(--kf-radius-md)}.kf-stat-card__bar-bone{display:block;height:4px;border-radius:var(--kf-radius-pill)}.kf-stat-card--compact{gap:var(--kf-space-sm) 12px;padding:var(--kf-space-md)}.kf-stat-card--compact .kf-stat-card__icon{width:40px;height:40px}.kf-stat-card--compact .kf-stat-card__value{font-size:var(--kf-font-size-title-sm)}:host(.kf-stat-card-host--compact){container-type:inline-size}@container (max-width: 210px){.kf-stat-card--compact{display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;align-items:center;gap:2px 10px;padding:12px}.kf-stat-card--compact .kf-stat-card__body{display:contents}.kf-stat-card--compact .kf-stat-card__icon{grid-row:1;grid-column:1;width:36px;height:36px}.kf-stat-card--compact .kf-stat-card__value{grid-row:1;grid-column:2}.kf-stat-card--compact .kf-stat-card__label,.kf-stat-card--compact .kf-stat-card__note,.kf-stat-card--compact .kf-stat-card__bar,.kf-stat-card--compact .kf-stat-card__hint{grid-column:1 / -1}.kf-stat-card--compact .kf-stat-card__label{margin-top:6px}.kf-stat-card--compact .kf-stat-card__chevron{display:none}}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Progress, selector: "kf-progress", inputs: ["value", "tone", "size", "label", "ariaLabel"] }] });
|
|
4613
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: StatCard, isStandalone: true, selector: "kf-stat-card", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, note: { classPropertyName: "note", publicName: "note", isSignal: true, isRequired: false, transformFunction: null }, bar: { classPropertyName: "bar", publicName: "bar", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardClick: "cardClick" }, host: { properties: { "class.kf-stat-card-host--compact": "density() === 'compact'" } }, ngImport: i0, template: "@if (loading()) {\n <div\n class=\"kf-stat-card\"\n [class.kf-stat-card--compact]=\"density() === 'compact'\"\n aria-busy=\"true\"\n >\n <span\n class=\"kf-stat-card__icon kf-stat-card__icon--bone kf-bone-fill\"\n aria-hidden=\"true\"\n ></span>\n <span class=\"kf-stat-card__body\" aria-hidden=\"true\">\n <span class=\"kf-stat-card__value kf-bone\" style=\"--kf-bone-width: 40%\">{{ value() }}</span>\n <span class=\"kf-stat-card__label kf-bone\" style=\"--kf-bone-width: 70%\">{{ label() }}</span>\n @if (note()) {\n <span class=\"kf-stat-card__note kf-bone\" style=\"--kf-bone-width: 55%\">{{ note() }}</span>\n }\n @if (hasBar()) {\n <span class=\"kf-stat-card__bar\">\n <span class=\"kf-stat-card__bar-bone kf-bone-fill\"></span>\n </span>\n }\n @if (hint()) {\n <span class=\"kf-stat-card__hint kf-bone\" style=\"--kf-bone-width: 45%\">{{ hint() }}</span>\n }\n </span>\n </div>\n} @else if (clickable()) {\n <button\n type=\"button\"\n class=\"kf-stat-card kf-stat-card--clickable\"\n [class.kf-stat-card--compact]=\"density() === 'compact'\"\n [class.kf-stat-card--pressed]=\"pressed() === true\"\n [attr.aria-pressed]=\"pressed()\"\n (click)=\"cardClick.emit()\"\n >\n <ng-container *ngTemplateOutlet=\"content\" />\n <kf-icon class=\"kf-stat-card__chevron\" name=\"chevron-right\" size=\"sm\" />\n </button>\n} @else {\n <div class=\"kf-stat-card\" [class.kf-stat-card--compact]=\"density() === 'compact'\">\n <ng-container *ngTemplateOutlet=\"content\" />\n </div>\n}\n\n<ng-template #content>\n <span class=\"kf-stat-card__icon\" [class]=\"'kf-stat-card__icon--' + tone()\">\n <kf-icon [name]=\"icon()\" size=\"md\" />\n </span>\n <span class=\"kf-stat-card__body\">\n <span class=\"kf-stat-card__value\">{{ value() }}</span>\n <span class=\"kf-stat-card__label\">{{ label() }}</span>\n @if (note()) {\n <span class=\"kf-stat-card__note\">{{ note() }}</span>\n }\n @if (hasBar()) {\n <kf-progress\n class=\"kf-stat-card__bar\"\n [value]=\"bar()!\"\n [tone]=\"barTone()\"\n [ariaLabel]=\"label()\"\n />\n }\n @if (hint()) {\n <span class=\"kf-stat-card__hint\">{{ hint() }}</span>\n }\n </span>\n</ng-template>\n", styles: [".kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-bone-shimmer 1.4s ease infinite}.kf-bone{display:block;box-sizing:border-box;width:var(--kf-bone-width, 60%);max-width:100%;overflow:hidden;white-space:nowrap;border-radius:var(--kf-radius-xs);-webkit-user-select:none;user-select:none;pointer-events:none}.kf-bone.kf-bone{color:transparent!important;-webkit-text-fill-color:transparent}.kf-bone>*{visibility:hidden}@keyframes kf-bone-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{animation:none;background:var(--kf-color-border)}}:host{display:block}.kf-stat-card{display:flex;align-items:center;gap:var(--kf-space-md);width:100%;padding:var(--kf-space-lg);border:1px solid var(--kf-color-border-strong);border-radius:var(--kf-radius-md);background:var(--kf-color-white);box-shadow:var(--kf-shadow-sm);font:inherit;text-align:left}.kf-stat-card--clickable{cursor:pointer;transition:box-shadow .14s,transform .14s}.kf-stat-card--clickable:hover{box-shadow:var(--kf-shadow-md);transform:translateY(-2px)}.kf-stat-card--clickable:focus-visible{outline:2px solid transparent;box-shadow:var(--kf-shadow-focus)}.kf-stat-card--pressed{border-color:var(--kf-color-primary);background:var(--kf-color-primary-soft);box-shadow:inset 0 0 0 1px var(--kf-color-primary)}.kf-stat-card--pressed:focus-visible{box-shadow:inset 0 0 0 1px var(--kf-color-primary),var(--kf-shadow-focus)}.kf-stat-card__icon{display:grid;place-items:center;width:50px;height:50px;flex:none;border-radius:var(--kf-radius-md)}.kf-stat-card__icon--primary{background:var(--kf-color-primary-soft);color:var(--kf-color-primary)}.kf-stat-card__icon--success{background:var(--kf-color-success-soft);color:var(--kf-color-success-strong)}.kf-stat-card__icon--error{background:var(--kf-color-error-soft);color:var(--kf-color-error)}.kf-stat-card__icon--purple{background:var(--kf-color-purple-soft);color:var(--kf-color-purple)}.kf-stat-card__icon--warn{background:var(--kf-color-warning-soft);color:var(--kf-color-warning-strong)}.kf-stat-card__icon--info{background:var(--kf-color-info-soft);color:var(--kf-color-info-strong)}.kf-stat-card__icon--neutral{background:var(--kf-color-gray-100);color:var(--kf-color-text)}.kf-stat-card__body{display:flex;flex-direction:column;gap:2px;min-width:0}.kf-stat-card__value{font-family:var(--kf-font-title);font-weight:700;font-size:var(--kf-font-size-title-md);color:var(--kf-color-ink)}.kf-stat-card__label{font-size:.875rem;font-weight:700;color:var(--kf-color-ink)}.kf-stat-card__note{font-size:.78rem;color:var(--kf-color-text-muted)}.kf-stat-card__bar{padding-block-start:var(--kf-space-xs)}.kf-stat-card__hint{font-size:.78rem;color:var(--kf-color-text)}.kf-stat-card__chevron{margin-left:auto;flex:none;color:var(--kf-color-gray-400)}.kf-stat-card__icon--bone{border-radius:var(--kf-radius-md)}.kf-stat-card__bar-bone{display:block;height:4px;border-radius:var(--kf-radius-pill)}.kf-stat-card--compact{gap:var(--kf-space-sm) 12px;padding:var(--kf-space-md)}.kf-stat-card--compact .kf-stat-card__icon{width:40px;height:40px}.kf-stat-card--compact .kf-stat-card__value{font-size:var(--kf-font-size-title-sm)}:host(.kf-stat-card-host--compact){container-type:inline-size}@container (max-width: 210px){.kf-stat-card--compact{display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;align-items:center;gap:2px 10px;padding:12px}.kf-stat-card--compact .kf-stat-card__body{display:contents}.kf-stat-card--compact .kf-stat-card__icon{grid-row:1;grid-column:1;width:36px;height:36px}.kf-stat-card--compact .kf-stat-card__value{grid-row:1;grid-column:2}.kf-stat-card--compact .kf-stat-card__label,.kf-stat-card--compact .kf-stat-card__note,.kf-stat-card--compact .kf-stat-card__bar,.kf-stat-card--compact .kf-stat-card__hint{grid-column:1 / -1}.kf-stat-card--compact .kf-stat-card__label{margin-top:6px}.kf-stat-card--compact .kf-stat-card__chevron{display:none}}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Progress, selector: "kf-progress", inputs: ["value", "tone", "size", "label", "ariaLabel"] }] });
|
|
4534
4614
|
}
|
|
4535
4615
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StatCard, decorators: [{
|
|
4536
4616
|
type: Component,
|
|
4537
4617
|
args: [{ selector: 'kf-stat-card', imports: [Icon, NgTemplateOutlet, Progress], host: {
|
|
4538
4618
|
'[class.kf-stat-card-host--compact]': "density() === 'compact'",
|
|
4539
|
-
}, template: "@if (loading()) {\n <div\n class=\"kf-stat-card\"\n [class.kf-stat-card--compact]=\"density() === 'compact'\"\n aria-busy=\"true\"\n >\n <span\n class=\"kf-stat-card__icon kf-stat-card__icon--bone kf-bone-fill\"\n aria-hidden=\"true\"\n ></span>\n <span class=\"kf-stat-card__body\" aria-hidden=\"true\">\n <span class=\"kf-stat-card__value kf-bone\" style=\"--kf-bone-width: 40%\">{{ value() }}</span>\n <span class=\"kf-stat-card__label kf-bone\" style=\"--kf-bone-width: 70%\">{{ label() }}</span>\n @if (note()) {\n <span class=\"kf-stat-card__note kf-bone\" style=\"--kf-bone-width: 55%\">{{ note() }}</span>\n }\n @if (hasBar()) {\n <span class=\"kf-stat-card__bar\">\n <span class=\"kf-stat-card__bar-bone kf-bone-fill\"></span>\n </span>\n }\n @if (hint()) {\n <span class=\"kf-stat-card__hint kf-bone\" style=\"--kf-bone-width: 45%\">{{ hint() }}</span>\n }\n </span>\n </div>\n} @else if (clickable()) {\n <button\n type=\"button\"\n class=\"kf-stat-card kf-stat-card--clickable\"\n [class.kf-stat-card--compact]=\"density() === 'compact'\"\n [class.kf-stat-card--pressed]=\"pressed() === true\"\n [attr.aria-pressed]=\"pressed()\"\n (click)=\"cardClick.emit()\"\n >\n <ng-container *ngTemplateOutlet=\"content\" />\n <kf-icon class=\"kf-stat-card__chevron\" name=\"chevron-right\" size=\"sm\" />\n </button>\n} @else {\n <div class=\"kf-stat-card\" [class.kf-stat-card--compact]=\"density() === 'compact'\">\n <ng-container *ngTemplateOutlet=\"content\" />\n </div>\n}\n\n<ng-template #content>\n <span class=\"kf-stat-card__icon\" [class]=\"'kf-stat-card__icon--' + tone()\">\n <kf-icon [name]=\"icon()\" size=\"md\" />\n </span>\n <span class=\"kf-stat-card__body\">\n <span class=\"kf-stat-card__value\">{{ value() }}</span>\n <span class=\"kf-stat-card__label\">{{ label() }}</span>\n @if (note()) {\n <span class=\"kf-stat-card__note\">{{ note() }}</span>\n }\n @if (hasBar()) {\n <kf-progress\n class=\"kf-stat-card__bar\"\n [value]=\"bar()!\"\n [tone]=\"barTone()\"\n [ariaLabel]=\"label()\"\n />\n }\n @if (hint()) {\n <span class=\"kf-stat-card__hint\">{{ hint() }}</span>\n }\n </span>\n</ng-template>\n", styles: [".kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-bone-shimmer 1.4s ease infinite}.kf-bone{display:block;box-sizing:border-box;width:var(--kf-bone-width, 60%);max-width:100%;overflow:hidden;white-space:nowrap;border-radius:var(--kf-radius-xs);-webkit-user-select:none;user-select:none;pointer-events:none}.kf-bone.kf-bone{color:transparent!important}.kf-bone>*{visibility:hidden}@keyframes kf-bone-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{animation:none;background:var(--kf-color-border)}}:host{display:block}.kf-stat-card{display:flex;align-items:center;gap:var(--kf-space-md);width:100%;padding:var(--kf-space-lg);border:1px solid var(--kf-color-border-strong);border-radius:var(--kf-radius-md);background:var(--kf-color-white);box-shadow:var(--kf-shadow-sm);font:inherit;text-align:left}.kf-stat-card--clickable{cursor:pointer;transition:box-shadow .14s,transform .14s}.kf-stat-card--clickable:hover{box-shadow:var(--kf-shadow-md);transform:translateY(-2px)}.kf-stat-card--clickable:focus-visible{outline:2px solid transparent;box-shadow:var(--kf-shadow-focus)}.kf-stat-card--pressed{border-color:var(--kf-color-primary);background:var(--kf-color-primary-soft);box-shadow:inset 0 0 0 1px var(--kf-color-primary)}.kf-stat-card--pressed:focus-visible{box-shadow:inset 0 0 0 1px var(--kf-color-primary),var(--kf-shadow-focus)}.kf-stat-card__icon{display:grid;place-items:center;width:50px;height:50px;flex:none;border-radius:var(--kf-radius-md)}.kf-stat-card__icon--primary{background:var(--kf-color-primary-soft);color:var(--kf-color-primary)}.kf-stat-card__icon--success{background:var(--kf-color-success-soft);color:var(--kf-color-success-strong)}.kf-stat-card__icon--error{background:var(--kf-color-error-soft);color:var(--kf-color-error)}.kf-stat-card__icon--purple{background:var(--kf-color-purple-soft);color:var(--kf-color-purple)}.kf-stat-card__icon--warn{background:var(--kf-color-warning-soft);color:var(--kf-color-warning-strong)}.kf-stat-card__icon--info{background:var(--kf-color-info-soft);color:var(--kf-color-info-strong)}.kf-stat-card__icon--neutral{background:var(--kf-color-gray-100);color:var(--kf-color-text)}.kf-stat-card__body{display:flex;flex-direction:column;gap:2px;min-width:0}.kf-stat-card__value{font-family:var(--kf-font-title);font-weight:700;font-size:var(--kf-font-size-title-md);color:var(--kf-color-ink)}.kf-stat-card__label{font-size:.875rem;font-weight:700;color:var(--kf-color-ink)}.kf-stat-card__note{font-size:.78rem;color:var(--kf-color-text-muted)}.kf-stat-card__bar{padding-block-start:var(--kf-space-xs)}.kf-stat-card__hint{font-size:.78rem;color:var(--kf-color-text)}.kf-stat-card__chevron{margin-left:auto;flex:none;color:var(--kf-color-gray-400)}.kf-stat-card__icon--bone{border-radius:var(--kf-radius-md)}.kf-stat-card__bar-bone{display:block;height:4px;border-radius:var(--kf-radius-pill)}.kf-stat-card--compact{gap:var(--kf-space-sm) 12px;padding:var(--kf-space-md)}.kf-stat-card--compact .kf-stat-card__icon{width:40px;height:40px}.kf-stat-card--compact .kf-stat-card__value{font-size:var(--kf-font-size-title-sm)}:host(.kf-stat-card-host--compact){container-type:inline-size}@container (max-width: 210px){.kf-stat-card--compact{display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;align-items:center;gap:2px 10px;padding:12px}.kf-stat-card--compact .kf-stat-card__body{display:contents}.kf-stat-card--compact .kf-stat-card__icon{grid-row:1;grid-column:1;width:36px;height:36px}.kf-stat-card--compact .kf-stat-card__value{grid-row:1;grid-column:2}.kf-stat-card--compact .kf-stat-card__label,.kf-stat-card--compact .kf-stat-card__note,.kf-stat-card--compact .kf-stat-card__bar,.kf-stat-card--compact .kf-stat-card__hint{grid-column:1 / -1}.kf-stat-card--compact .kf-stat-card__label{margin-top:6px}.kf-stat-card--compact .kf-stat-card__chevron{display:none}}\n"] }]
|
|
4619
|
+
}, template: "@if (loading()) {\n <div\n class=\"kf-stat-card\"\n [class.kf-stat-card--compact]=\"density() === 'compact'\"\n aria-busy=\"true\"\n >\n <span\n class=\"kf-stat-card__icon kf-stat-card__icon--bone kf-bone-fill\"\n aria-hidden=\"true\"\n ></span>\n <span class=\"kf-stat-card__body\" aria-hidden=\"true\">\n <span class=\"kf-stat-card__value kf-bone\" style=\"--kf-bone-width: 40%\">{{ value() }}</span>\n <span class=\"kf-stat-card__label kf-bone\" style=\"--kf-bone-width: 70%\">{{ label() }}</span>\n @if (note()) {\n <span class=\"kf-stat-card__note kf-bone\" style=\"--kf-bone-width: 55%\">{{ note() }}</span>\n }\n @if (hasBar()) {\n <span class=\"kf-stat-card__bar\">\n <span class=\"kf-stat-card__bar-bone kf-bone-fill\"></span>\n </span>\n }\n @if (hint()) {\n <span class=\"kf-stat-card__hint kf-bone\" style=\"--kf-bone-width: 45%\">{{ hint() }}</span>\n }\n </span>\n </div>\n} @else if (clickable()) {\n <button\n type=\"button\"\n class=\"kf-stat-card kf-stat-card--clickable\"\n [class.kf-stat-card--compact]=\"density() === 'compact'\"\n [class.kf-stat-card--pressed]=\"pressed() === true\"\n [attr.aria-pressed]=\"pressed()\"\n (click)=\"cardClick.emit()\"\n >\n <ng-container *ngTemplateOutlet=\"content\" />\n <kf-icon class=\"kf-stat-card__chevron\" name=\"chevron-right\" size=\"sm\" />\n </button>\n} @else {\n <div class=\"kf-stat-card\" [class.kf-stat-card--compact]=\"density() === 'compact'\">\n <ng-container *ngTemplateOutlet=\"content\" />\n </div>\n}\n\n<ng-template #content>\n <span class=\"kf-stat-card__icon\" [class]=\"'kf-stat-card__icon--' + tone()\">\n <kf-icon [name]=\"icon()\" size=\"md\" />\n </span>\n <span class=\"kf-stat-card__body\">\n <span class=\"kf-stat-card__value\">{{ value() }}</span>\n <span class=\"kf-stat-card__label\">{{ label() }}</span>\n @if (note()) {\n <span class=\"kf-stat-card__note\">{{ note() }}</span>\n }\n @if (hasBar()) {\n <kf-progress\n class=\"kf-stat-card__bar\"\n [value]=\"bar()!\"\n [tone]=\"barTone()\"\n [ariaLabel]=\"label()\"\n />\n }\n @if (hint()) {\n <span class=\"kf-stat-card__hint\">{{ hint() }}</span>\n }\n </span>\n</ng-template>\n", styles: [".kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-bone-shimmer 1.4s ease infinite}.kf-bone{display:block;box-sizing:border-box;width:var(--kf-bone-width, 60%);max-width:100%;overflow:hidden;white-space:nowrap;border-radius:var(--kf-radius-xs);-webkit-user-select:none;user-select:none;pointer-events:none}.kf-bone.kf-bone{color:transparent!important;-webkit-text-fill-color:transparent}.kf-bone>*{visibility:hidden}@keyframes kf-bone-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{animation:none;background:var(--kf-color-border)}}:host{display:block}.kf-stat-card{display:flex;align-items:center;gap:var(--kf-space-md);width:100%;padding:var(--kf-space-lg);border:1px solid var(--kf-color-border-strong);border-radius:var(--kf-radius-md);background:var(--kf-color-white);box-shadow:var(--kf-shadow-sm);font:inherit;text-align:left}.kf-stat-card--clickable{cursor:pointer;transition:box-shadow .14s,transform .14s}.kf-stat-card--clickable:hover{box-shadow:var(--kf-shadow-md);transform:translateY(-2px)}.kf-stat-card--clickable:focus-visible{outline:2px solid transparent;box-shadow:var(--kf-shadow-focus)}.kf-stat-card--pressed{border-color:var(--kf-color-primary);background:var(--kf-color-primary-soft);box-shadow:inset 0 0 0 1px var(--kf-color-primary)}.kf-stat-card--pressed:focus-visible{box-shadow:inset 0 0 0 1px var(--kf-color-primary),var(--kf-shadow-focus)}.kf-stat-card__icon{display:grid;place-items:center;width:50px;height:50px;flex:none;border-radius:var(--kf-radius-md)}.kf-stat-card__icon--primary{background:var(--kf-color-primary-soft);color:var(--kf-color-primary)}.kf-stat-card__icon--success{background:var(--kf-color-success-soft);color:var(--kf-color-success-strong)}.kf-stat-card__icon--error{background:var(--kf-color-error-soft);color:var(--kf-color-error)}.kf-stat-card__icon--purple{background:var(--kf-color-purple-soft);color:var(--kf-color-purple)}.kf-stat-card__icon--warn{background:var(--kf-color-warning-soft);color:var(--kf-color-warning-strong)}.kf-stat-card__icon--info{background:var(--kf-color-info-soft);color:var(--kf-color-info-strong)}.kf-stat-card__icon--neutral{background:var(--kf-color-gray-100);color:var(--kf-color-text)}.kf-stat-card__body{display:flex;flex-direction:column;gap:2px;min-width:0}.kf-stat-card__value{font-family:var(--kf-font-title);font-weight:700;font-size:var(--kf-font-size-title-md);color:var(--kf-color-ink)}.kf-stat-card__label{font-size:.875rem;font-weight:700;color:var(--kf-color-ink)}.kf-stat-card__note{font-size:.78rem;color:var(--kf-color-text-muted)}.kf-stat-card__bar{padding-block-start:var(--kf-space-xs)}.kf-stat-card__hint{font-size:.78rem;color:var(--kf-color-text)}.kf-stat-card__chevron{margin-left:auto;flex:none;color:var(--kf-color-gray-400)}.kf-stat-card__icon--bone{border-radius:var(--kf-radius-md)}.kf-stat-card__bar-bone{display:block;height:4px;border-radius:var(--kf-radius-pill)}.kf-stat-card--compact{gap:var(--kf-space-sm) 12px;padding:var(--kf-space-md)}.kf-stat-card--compact .kf-stat-card__icon{width:40px;height:40px}.kf-stat-card--compact .kf-stat-card__value{font-size:var(--kf-font-size-title-sm)}:host(.kf-stat-card-host--compact){container-type:inline-size}@container (max-width: 210px){.kf-stat-card--compact{display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;align-items:center;gap:2px 10px;padding:12px}.kf-stat-card--compact .kf-stat-card__body{display:contents}.kf-stat-card--compact .kf-stat-card__icon{grid-row:1;grid-column:1;width:36px;height:36px}.kf-stat-card--compact .kf-stat-card__value{grid-row:1;grid-column:2}.kf-stat-card--compact .kf-stat-card__label,.kf-stat-card--compact .kf-stat-card__note,.kf-stat-card--compact .kf-stat-card__bar,.kf-stat-card--compact .kf-stat-card__hint{grid-column:1 / -1}.kf-stat-card--compact .kf-stat-card__label{margin-top:6px}.kf-stat-card--compact .kf-stat-card__chevron{display:none}}\n"] }]
|
|
4540
4620
|
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], note: [{ type: i0.Input, args: [{ isSignal: true, alias: "note", required: false }] }], bar: [{ type: i0.Input, args: [{ isSignal: true, alias: "bar", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], cardClick: [{ type: i0.Output, args: ["cardClick"] }] } });
|
|
4541
4621
|
|
|
4542
4622
|
/** Cantidad de elementos por defecto de cada variante (`count` sin valor). */
|
|
@@ -4607,11 +4687,11 @@ class SkeletonPreset {
|
|
|
4607
4687
|
formColumns = computed(() => (this.columns() === 2 ? 2 : 1), /* @ts-ignore */
|
|
4608
4688
|
...(ngDevMode ? [{ debugName: "formColumns" }] : /* istanbul ignore next */ []));
|
|
4609
4689
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SkeletonPreset, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4610
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: SkeletonPreset, isStandalone: true, selector: "kf-skeleton-preset", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n [class]=\"'kf-skeleton-preset kf-skeleton-preset--' + variant()\"\n aria-busy=\"true\"\n [style.--kf-skeleton-preset-columns]=\"columns() ?? null\"\n>\n @if (label()) {\n <span class=\"kf-sr-only\" role=\"status\">{{ label() }}</span>\n }\n @switch (variant()) {\n @case ('kpi-grid') {\n <div class=\"kf-skeleton-preset__grid\" [class.kf-skeleton-preset__grid--fixed]=\"!!columns()\">\n @for (i of items(); track i) {\n <kf-stat-card [loading]=\"true\" icon=\"bell\" value=\"0\" label=\"Etiqueta\" note=\"Nota\" />\n }\n </div>\n }\n @case ('card-grid') {\n <div class=\"kf-skeleton-preset__grid\" [class.kf-skeleton-preset__grid--fixed]=\"!!columns()\">\n @for (i of items(); track i) {\n <kf-card gap=\"sm\" aria-hidden=\"true\">\n <kf-skeleton variant=\"rect\" height=\"7.5rem\" />\n <kf-skeleton width=\"60%\" height=\"1.25rem\" />\n <kf-skeleton />\n <kf-skeleton width=\"80%\" />\n </kf-card>\n }\n </div>\n }\n @case ('form') {\n <div\n class=\"kf-skeleton-preset__form\"\n [class.kf-skeleton-preset__form--two]=\"formColumns() === 2\"\n aria-hidden=\"true\"\n >\n @for (i of items(); track i) {\n <div class=\"kf-skeleton-preset__field\">\n <span\n class=\"kf-skeleton-preset__label kf-overline-text kf-bone\"\n style=\"--kf-bone-width: 30%\"\n >\n Etiqueta\n </span>\n <span class=\"kf-skeleton-preset__control\">\n <span class=\"kf-skeleton-preset__value kf-bone\" style=\"--kf-bone-width: 55%\"\n >Valor</span\n >\n </span>\n </div>\n }\n </div>\n }\n @case ('list') {\n <div class=\"kf-skeleton-preset__stack\">\n @for (i of items(); track i) {\n <kf-document-row [loading]=\"true\" title=\"Documento\" meta=\"Archivo \u00B7 120 KB\" />\n }\n </div>\n }\n @case ('table') {\n <kf-data-table\n [columns]=\"tableColumns()\"\n [rows]=\"[]\"\n [loading]=\"true\"\n [skeletonRows]=\"total()\"\n />\n }\n @case ('timeline') {\n <div class=\"kf-skeleton-preset__timeline\" aria-hidden=\"true\">\n <div class=\"kf-skeleton-preset__timeline-toolbar\">\n <span class=\"kf-skeleton-preset__timeline-heading kf-bone\" style=\"--kf-bone-width: 30%\">\n Etapas\n </span>\n <span class=\"kf-skeleton-preset__timeline-toggle kf-bone\" style=\"--kf-bone-width: 7rem\">\n Expandir todo\n </span>\n </div>\n <ol class=\"kf-skeleton-preset__timeline-list\">\n @for (i of items(); track i) {\n <li class=\"kf-skeleton-preset__timeline-group\">\n <span class=\"kf-skeleton-preset__timeline-node kf-bone-fill\"></span>\n <span class=\"kf-skeleton-preset__timeline-text\">\n <span\n class=\"kf-skeleton-preset__timeline-title kf-bone\"\n style=\"--kf-bone-width: 45%\"\n >\n Etapa\n </span>\n <span\n class=\"kf-skeleton-preset__timeline-meta kf-bone\"\n style=\"--kf-bone-width: 30%\"\n >\n Detalle\n </span>\n </span>\n </li>\n }\n </ol>\n </div>\n }\n @case ('detail-header') {\n <div class=\"kf-skeleton-preset__header\" aria-hidden=\"true\">\n <span class=\"kf-skeleton-preset__header-icon kf-bone-fill\"></span>\n <span class=\"kf-skeleton-preset__header-heading\">\n <span class=\"kf-skeleton-preset__header-title kf-bone\" style=\"--kf-bone-width: 40%\">\n T\u00EDtulo\n </span>\n <span class=\"kf-skeleton-preset__header-subtitle kf-bone\" style=\"--kf-bone-width: 60%\">\n Subt\u00EDtulo\n </span>\n </span>\n </div>\n }\n }\n</div>\n", styles: [".kf-overline-text{font-family:var(--kf-font-title);font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-bone-shimmer 1.4s ease infinite}.kf-bone{display:block;box-sizing:border-box;width:var(--kf-bone-width, 60%);max-width:100%;overflow:hidden;white-space:nowrap;border-radius:var(--kf-radius-xs);-webkit-user-select:none;user-select:none;pointer-events:none}.kf-bone.kf-bone{color:transparent!important}.kf-bone>*{visibility:hidden}@keyframes kf-bone-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{animation:none;background:var(--kf-color-border)}}.kf-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}:host{display:block;font-family:var(--kf-font-body)}.kf-skeleton-preset__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:var(--kf-space-md)}.kf-skeleton-preset__grid--fixed{grid-template-columns:repeat(var(--kf-skeleton-preset-columns),minmax(0,1fr))}.kf-skeleton-preset__stack{display:flex;flex-direction:column;gap:var(--kf-space-sm)}.kf-skeleton-preset__form{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--kf-space-md)}.kf-skeleton-preset__form--two{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:640px){.kf-skeleton-preset__form--two{grid-template-columns:minmax(0,1fr)}}.kf-skeleton-preset__field{display:flex;flex-direction:column;gap:var(--kf-space-xs)}.kf-skeleton-preset__control{display:block;padding:var(--kf-space-sm) var(--kf-space-sm);background:var(--kf-color-surface);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm)}.kf-skeleton-preset__timeline{--_node: var(--kf-status-node-size, 2.125rem);--_gutter: var(--kf-space-sm);--_pad-y: var(--kf-space-sm);--_line: 2px;display:flex;flex-direction:column;gap:var(--kf-space-sm)}.kf-skeleton-preset__timeline-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm)}.kf-skeleton-preset__timeline-heading{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-sm);font-weight:var(--kf-font-weight-title)}.kf-skeleton-preset__timeline-toggle{box-sizing:border-box;padding:6px var(--kf-space-sm);border:1px solid transparent;font-size:.85rem;font-weight:600;border-radius:var(--kf-radius-sm)}@media(max-width:640px),(pointer:coarse){.kf-skeleton-preset__timeline-toggle{min-height:44px}}.kf-skeleton-preset__timeline-list{list-style:none;margin:0;padding:0}.kf-skeleton-preset__timeline-group{position:relative;display:flex;align-items:flex-start;gap:var(--kf-space-md);box-sizing:border-box;min-height:2.75rem;padding:var(--_pad-y) var(--_gutter)}.kf-skeleton-preset__timeline-group:not(:last-child):before{content:\"\";position:absolute;inset-inline-start:calc(var(--_gutter) + var(--_node) / 2 - var(--_line) / 2);top:calc(var(--_pad-y) + var(--_node));bottom:calc(var(--kf-space-xs) - var(--_pad-y));width:var(--_line);background:var(--kf-color-border)}.kf-skeleton-preset__timeline-node{flex:none;width:var(--_node);height:var(--_node);border-radius:50%}.kf-skeleton-preset__timeline-text{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;min-height:var(--_node)}.kf-skeleton-preset__timeline-title{font-weight:700;font-size:var(--kf-font-size-body)}.kf-skeleton-preset__timeline-meta{font-size:var(--kf-font-size-body-sm)}.kf-skeleton-preset__header{display:flex;align-items:center;gap:var(--kf-space-md);padding-bottom:var(--kf-space-lg);border-bottom:1px solid var(--kf-color-border)}.kf-skeleton-preset__header-icon{flex:none;width:52px;height:52px;border:1px solid transparent;border-radius:var(--kf-radius-md)}.kf-skeleton-preset__header-heading{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0}.kf-skeleton-preset__header-title{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-md);font-weight:var(--kf-font-weight-title);line-height:1.2}.kf-skeleton-preset__header-subtitle{font-size:.9375rem}@media(max-width:900px){.kf-skeleton-preset__header-icon{width:40px;height:40px}.kf-skeleton-preset__header-title{font-size:var(--kf-font-size-title-sm)}.kf-skeleton-preset__header-subtitle{font-size:.8125rem}}\n"], dependencies: [{ kind: "component", type: Card, selector: "kf-card", inputs: ["flush", "gap", "loading"] }, { kind: "component", type: DataTable, selector: "kf-data-table", inputs: ["columns", "rows", "loading", "skeletonRows", "rowKey", "flush", "cardable", "defaultView", "showViewToggle", "cardMinWidth", "render", "cellTemplates", "density", "rowClickable", "rowFocusable", "cellAriaLabel", "ariaLabel", "currentRowKey", "pageSize", "pageSizeOptions", "page", "keepPageOnRowsChange", "itemLabel", "sort", "view"], outputs: ["rowClick", "cellClick", "pageChange", "pageSizeChange", "sortChange", "viewChange"] }, { kind: "component", type: DocumentRow, selector: "kf-document-row", inputs: ["icon", "tone", "title", "meta", "href", "downloadLabel", "pendingLabel", "loading"] }, { kind: "component", type: Skeleton, selector: "kf-skeleton", inputs: ["variant", "width", "height"] }, { kind: "component", type: StatCard, selector: "kf-stat-card", inputs: ["icon", "tone", "value", "label", "note", "bar", "hint", "pressed", "density", "loading", "clickable"], outputs: ["cardClick"] }] });
|
|
4690
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: SkeletonPreset, isStandalone: true, selector: "kf-skeleton-preset", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n [class]=\"'kf-skeleton-preset kf-skeleton-preset--' + variant()\"\n aria-busy=\"true\"\n [style.--kf-skeleton-preset-columns]=\"columns() ?? null\"\n>\n @if (label()) {\n <span class=\"kf-sr-only\" role=\"status\">{{ label() }}</span>\n }\n @switch (variant()) {\n @case ('kpi-grid') {\n <div class=\"kf-skeleton-preset__grid\" [class.kf-skeleton-preset__grid--fixed]=\"!!columns()\">\n @for (i of items(); track i) {\n <kf-stat-card [loading]=\"true\" icon=\"bell\" value=\"0\" label=\"Etiqueta\" note=\"Nota\" />\n }\n </div>\n }\n @case ('card-grid') {\n <div class=\"kf-skeleton-preset__grid\" [class.kf-skeleton-preset__grid--fixed]=\"!!columns()\">\n @for (i of items(); track i) {\n <kf-card gap=\"sm\" aria-hidden=\"true\">\n <kf-skeleton variant=\"rect\" height=\"7.5rem\" />\n <kf-skeleton width=\"60%\" height=\"1.25rem\" />\n <kf-skeleton />\n <kf-skeleton width=\"80%\" />\n </kf-card>\n }\n </div>\n }\n @case ('form') {\n <div\n class=\"kf-skeleton-preset__form\"\n [class.kf-skeleton-preset__form--two]=\"formColumns() === 2\"\n aria-hidden=\"true\"\n >\n @for (i of items(); track i) {\n <div class=\"kf-skeleton-preset__field\">\n <span\n class=\"kf-skeleton-preset__label kf-overline-text kf-bone\"\n style=\"--kf-bone-width: 30%\"\n >\n Etiqueta\n </span>\n <span class=\"kf-skeleton-preset__control\">\n <span class=\"kf-skeleton-preset__value kf-bone\" style=\"--kf-bone-width: 55%\"\n >Valor</span\n >\n </span>\n </div>\n }\n </div>\n }\n @case ('list') {\n <div class=\"kf-skeleton-preset__stack\">\n @for (i of items(); track i) {\n <kf-document-row [loading]=\"true\" title=\"Documento\" meta=\"Archivo \u00B7 120 KB\" />\n }\n </div>\n }\n @case ('table') {\n <kf-data-table\n [columns]=\"tableColumns()\"\n [rows]=\"[]\"\n [loading]=\"true\"\n [skeletonRows]=\"total()\"\n />\n }\n @case ('timeline') {\n <div class=\"kf-skeleton-preset__timeline\" aria-hidden=\"true\">\n <div class=\"kf-skeleton-preset__timeline-toolbar\">\n <span class=\"kf-skeleton-preset__timeline-heading kf-bone\" style=\"--kf-bone-width: 30%\">\n Etapas\n </span>\n <span class=\"kf-skeleton-preset__timeline-toggle kf-bone\" style=\"--kf-bone-width: 7rem\">\n Expandir todo\n </span>\n </div>\n <ol class=\"kf-skeleton-preset__timeline-list\">\n @for (i of items(); track i) {\n <li class=\"kf-skeleton-preset__timeline-group\">\n <span class=\"kf-skeleton-preset__timeline-node kf-bone-fill\"></span>\n <span class=\"kf-skeleton-preset__timeline-text\">\n <span\n class=\"kf-skeleton-preset__timeline-title kf-bone\"\n style=\"--kf-bone-width: 45%\"\n >\n Etapa\n </span>\n <span\n class=\"kf-skeleton-preset__timeline-meta kf-bone\"\n style=\"--kf-bone-width: 30%\"\n >\n Detalle\n </span>\n </span>\n </li>\n }\n </ol>\n </div>\n }\n @case ('detail-header') {\n <div class=\"kf-skeleton-preset__header\" aria-hidden=\"true\">\n <span class=\"kf-skeleton-preset__header-icon kf-bone-fill\"></span>\n <span class=\"kf-skeleton-preset__header-heading\">\n <span class=\"kf-skeleton-preset__header-title kf-bone\" style=\"--kf-bone-width: 40%\">\n T\u00EDtulo\n </span>\n <span class=\"kf-skeleton-preset__header-subtitle kf-bone\" style=\"--kf-bone-width: 60%\">\n Subt\u00EDtulo\n </span>\n </span>\n </div>\n }\n }\n</div>\n", styles: [".kf-overline-text{font-family:var(--kf-font-title);font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-bone-shimmer 1.4s ease infinite}.kf-bone{display:block;box-sizing:border-box;width:var(--kf-bone-width, 60%);max-width:100%;overflow:hidden;white-space:nowrap;border-radius:var(--kf-radius-xs);-webkit-user-select:none;user-select:none;pointer-events:none}.kf-bone.kf-bone{color:transparent!important;-webkit-text-fill-color:transparent}.kf-bone>*{visibility:hidden}@keyframes kf-bone-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{animation:none;background:var(--kf-color-border)}}.kf-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}:host{display:block;font-family:var(--kf-font-body)}.kf-skeleton-preset__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:var(--kf-space-md)}.kf-skeleton-preset__grid--fixed{grid-template-columns:repeat(var(--kf-skeleton-preset-columns),minmax(0,1fr))}.kf-skeleton-preset__stack{display:flex;flex-direction:column;gap:var(--kf-space-sm)}.kf-skeleton-preset__form{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--kf-space-md)}.kf-skeleton-preset__form--two{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:640px){.kf-skeleton-preset__form--two{grid-template-columns:minmax(0,1fr)}}.kf-skeleton-preset__field{display:flex;flex-direction:column;gap:var(--kf-space-xs)}.kf-skeleton-preset__control{display:block;padding:var(--kf-space-sm) var(--kf-space-sm);background:var(--kf-color-surface);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm)}.kf-skeleton-preset__timeline{--_node: var(--kf-status-node-size, 2.125rem);--_gutter: var(--kf-space-sm);--_pad-y: var(--kf-space-sm);--_line: 2px;display:flex;flex-direction:column;gap:var(--kf-space-sm)}.kf-skeleton-preset__timeline-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm)}.kf-skeleton-preset__timeline-heading{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-sm);font-weight:var(--kf-font-weight-title)}.kf-skeleton-preset__timeline-toggle{box-sizing:border-box;padding:6px var(--kf-space-sm);border:1px solid transparent;font-size:.85rem;font-weight:600;border-radius:var(--kf-radius-sm)}@media(max-width:640px),(pointer:coarse){.kf-skeleton-preset__timeline-toggle{min-height:44px}}.kf-skeleton-preset__timeline-list{list-style:none;margin:0;padding:0}.kf-skeleton-preset__timeline-group{position:relative;display:flex;align-items:flex-start;gap:var(--kf-space-md);box-sizing:border-box;min-height:2.75rem;padding:var(--_pad-y) var(--_gutter)}.kf-skeleton-preset__timeline-group:not(:last-child):before{content:\"\";position:absolute;inset-inline-start:calc(var(--_gutter) + var(--_node) / 2 - var(--_line) / 2);top:calc(var(--_pad-y) + var(--_node));bottom:calc(var(--kf-space-xs) - var(--_pad-y));width:var(--_line);background:var(--kf-color-border)}.kf-skeleton-preset__timeline-node{flex:none;width:var(--_node);height:var(--_node);border-radius:50%}.kf-skeleton-preset__timeline-text{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;min-height:var(--_node)}.kf-skeleton-preset__timeline-title{font-weight:700;font-size:var(--kf-font-size-body)}.kf-skeleton-preset__timeline-meta{font-size:var(--kf-font-size-body-sm)}.kf-skeleton-preset__header{display:flex;align-items:center;gap:var(--kf-space-md);padding-bottom:var(--kf-space-lg);border-bottom:1px solid var(--kf-color-border)}.kf-skeleton-preset__header-icon{flex:none;width:52px;height:52px;border:1px solid transparent;border-radius:var(--kf-radius-md)}.kf-skeleton-preset__header-heading{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0}.kf-skeleton-preset__header-title{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-md);font-weight:var(--kf-font-weight-title);line-height:1.2}.kf-skeleton-preset__header-subtitle{font-size:.9375rem}@media(max-width:900px){.kf-skeleton-preset__header-icon{width:40px;height:40px}.kf-skeleton-preset__header-title{font-size:var(--kf-font-size-title-sm)}.kf-skeleton-preset__header-subtitle{font-size:.8125rem}}\n"], dependencies: [{ kind: "component", type: Card, selector: "kf-card", inputs: ["flush", "gap", "loading"] }, { kind: "component", type: DataTable, selector: "kf-data-table", inputs: ["columns", "rows", "loading", "skeletonRows", "rowKey", "flush", "cardable", "defaultView", "showViewToggle", "cardMinWidth", "render", "cellTemplates", "density", "rowClickable", "rowFocusable", "cellAriaLabel", "ariaLabel", "currentRowKey", "pageSize", "pageSizeOptions", "page", "keepPageOnRowsChange", "itemLabel", "sort", "view"], outputs: ["rowClick", "cellClick", "pageChange", "pageSizeChange", "sortChange", "viewChange"] }, { kind: "component", type: DocumentRow, selector: "kf-document-row", inputs: ["icon", "tone", "title", "meta", "href", "downloadLabel", "pendingLabel", "loading"] }, { kind: "component", type: Skeleton, selector: "kf-skeleton", inputs: ["variant", "width", "height"] }, { kind: "component", type: StatCard, selector: "kf-stat-card", inputs: ["icon", "tone", "value", "label", "note", "bar", "hint", "pressed", "density", "loading", "clickable"], outputs: ["cardClick"] }] });
|
|
4611
4691
|
}
|
|
4612
4692
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SkeletonPreset, decorators: [{
|
|
4613
4693
|
type: Component,
|
|
4614
|
-
args: [{ selector: 'kf-skeleton-preset', imports: [Card, DataTable, DocumentRow, Skeleton, StatCard], template: "<div\n [class]=\"'kf-skeleton-preset kf-skeleton-preset--' + variant()\"\n aria-busy=\"true\"\n [style.--kf-skeleton-preset-columns]=\"columns() ?? null\"\n>\n @if (label()) {\n <span class=\"kf-sr-only\" role=\"status\">{{ label() }}</span>\n }\n @switch (variant()) {\n @case ('kpi-grid') {\n <div class=\"kf-skeleton-preset__grid\" [class.kf-skeleton-preset__grid--fixed]=\"!!columns()\">\n @for (i of items(); track i) {\n <kf-stat-card [loading]=\"true\" icon=\"bell\" value=\"0\" label=\"Etiqueta\" note=\"Nota\" />\n }\n </div>\n }\n @case ('card-grid') {\n <div class=\"kf-skeleton-preset__grid\" [class.kf-skeleton-preset__grid--fixed]=\"!!columns()\">\n @for (i of items(); track i) {\n <kf-card gap=\"sm\" aria-hidden=\"true\">\n <kf-skeleton variant=\"rect\" height=\"7.5rem\" />\n <kf-skeleton width=\"60%\" height=\"1.25rem\" />\n <kf-skeleton />\n <kf-skeleton width=\"80%\" />\n </kf-card>\n }\n </div>\n }\n @case ('form') {\n <div\n class=\"kf-skeleton-preset__form\"\n [class.kf-skeleton-preset__form--two]=\"formColumns() === 2\"\n aria-hidden=\"true\"\n >\n @for (i of items(); track i) {\n <div class=\"kf-skeleton-preset__field\">\n <span\n class=\"kf-skeleton-preset__label kf-overline-text kf-bone\"\n style=\"--kf-bone-width: 30%\"\n >\n Etiqueta\n </span>\n <span class=\"kf-skeleton-preset__control\">\n <span class=\"kf-skeleton-preset__value kf-bone\" style=\"--kf-bone-width: 55%\"\n >Valor</span\n >\n </span>\n </div>\n }\n </div>\n }\n @case ('list') {\n <div class=\"kf-skeleton-preset__stack\">\n @for (i of items(); track i) {\n <kf-document-row [loading]=\"true\" title=\"Documento\" meta=\"Archivo \u00B7 120 KB\" />\n }\n </div>\n }\n @case ('table') {\n <kf-data-table\n [columns]=\"tableColumns()\"\n [rows]=\"[]\"\n [loading]=\"true\"\n [skeletonRows]=\"total()\"\n />\n }\n @case ('timeline') {\n <div class=\"kf-skeleton-preset__timeline\" aria-hidden=\"true\">\n <div class=\"kf-skeleton-preset__timeline-toolbar\">\n <span class=\"kf-skeleton-preset__timeline-heading kf-bone\" style=\"--kf-bone-width: 30%\">\n Etapas\n </span>\n <span class=\"kf-skeleton-preset__timeline-toggle kf-bone\" style=\"--kf-bone-width: 7rem\">\n Expandir todo\n </span>\n </div>\n <ol class=\"kf-skeleton-preset__timeline-list\">\n @for (i of items(); track i) {\n <li class=\"kf-skeleton-preset__timeline-group\">\n <span class=\"kf-skeleton-preset__timeline-node kf-bone-fill\"></span>\n <span class=\"kf-skeleton-preset__timeline-text\">\n <span\n class=\"kf-skeleton-preset__timeline-title kf-bone\"\n style=\"--kf-bone-width: 45%\"\n >\n Etapa\n </span>\n <span\n class=\"kf-skeleton-preset__timeline-meta kf-bone\"\n style=\"--kf-bone-width: 30%\"\n >\n Detalle\n </span>\n </span>\n </li>\n }\n </ol>\n </div>\n }\n @case ('detail-header') {\n <div class=\"kf-skeleton-preset__header\" aria-hidden=\"true\">\n <span class=\"kf-skeleton-preset__header-icon kf-bone-fill\"></span>\n <span class=\"kf-skeleton-preset__header-heading\">\n <span class=\"kf-skeleton-preset__header-title kf-bone\" style=\"--kf-bone-width: 40%\">\n T\u00EDtulo\n </span>\n <span class=\"kf-skeleton-preset__header-subtitle kf-bone\" style=\"--kf-bone-width: 60%\">\n Subt\u00EDtulo\n </span>\n </span>\n </div>\n }\n }\n</div>\n", styles: [".kf-overline-text{font-family:var(--kf-font-title);font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-bone-shimmer 1.4s ease infinite}.kf-bone{display:block;box-sizing:border-box;width:var(--kf-bone-width, 60%);max-width:100%;overflow:hidden;white-space:nowrap;border-radius:var(--kf-radius-xs);-webkit-user-select:none;user-select:none;pointer-events:none}.kf-bone.kf-bone{color:transparent!important}.kf-bone>*{visibility:hidden}@keyframes kf-bone-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{animation:none;background:var(--kf-color-border)}}.kf-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}:host{display:block;font-family:var(--kf-font-body)}.kf-skeleton-preset__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:var(--kf-space-md)}.kf-skeleton-preset__grid--fixed{grid-template-columns:repeat(var(--kf-skeleton-preset-columns),minmax(0,1fr))}.kf-skeleton-preset__stack{display:flex;flex-direction:column;gap:var(--kf-space-sm)}.kf-skeleton-preset__form{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--kf-space-md)}.kf-skeleton-preset__form--two{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:640px){.kf-skeleton-preset__form--two{grid-template-columns:minmax(0,1fr)}}.kf-skeleton-preset__field{display:flex;flex-direction:column;gap:var(--kf-space-xs)}.kf-skeleton-preset__control{display:block;padding:var(--kf-space-sm) var(--kf-space-sm);background:var(--kf-color-surface);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm)}.kf-skeleton-preset__timeline{--_node: var(--kf-status-node-size, 2.125rem);--_gutter: var(--kf-space-sm);--_pad-y: var(--kf-space-sm);--_line: 2px;display:flex;flex-direction:column;gap:var(--kf-space-sm)}.kf-skeleton-preset__timeline-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm)}.kf-skeleton-preset__timeline-heading{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-sm);font-weight:var(--kf-font-weight-title)}.kf-skeleton-preset__timeline-toggle{box-sizing:border-box;padding:6px var(--kf-space-sm);border:1px solid transparent;font-size:.85rem;font-weight:600;border-radius:var(--kf-radius-sm)}@media(max-width:640px),(pointer:coarse){.kf-skeleton-preset__timeline-toggle{min-height:44px}}.kf-skeleton-preset__timeline-list{list-style:none;margin:0;padding:0}.kf-skeleton-preset__timeline-group{position:relative;display:flex;align-items:flex-start;gap:var(--kf-space-md);box-sizing:border-box;min-height:2.75rem;padding:var(--_pad-y) var(--_gutter)}.kf-skeleton-preset__timeline-group:not(:last-child):before{content:\"\";position:absolute;inset-inline-start:calc(var(--_gutter) + var(--_node) / 2 - var(--_line) / 2);top:calc(var(--_pad-y) + var(--_node));bottom:calc(var(--kf-space-xs) - var(--_pad-y));width:var(--_line);background:var(--kf-color-border)}.kf-skeleton-preset__timeline-node{flex:none;width:var(--_node);height:var(--_node);border-radius:50%}.kf-skeleton-preset__timeline-text{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;min-height:var(--_node)}.kf-skeleton-preset__timeline-title{font-weight:700;font-size:var(--kf-font-size-body)}.kf-skeleton-preset__timeline-meta{font-size:var(--kf-font-size-body-sm)}.kf-skeleton-preset__header{display:flex;align-items:center;gap:var(--kf-space-md);padding-bottom:var(--kf-space-lg);border-bottom:1px solid var(--kf-color-border)}.kf-skeleton-preset__header-icon{flex:none;width:52px;height:52px;border:1px solid transparent;border-radius:var(--kf-radius-md)}.kf-skeleton-preset__header-heading{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0}.kf-skeleton-preset__header-title{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-md);font-weight:var(--kf-font-weight-title);line-height:1.2}.kf-skeleton-preset__header-subtitle{font-size:.9375rem}@media(max-width:900px){.kf-skeleton-preset__header-icon{width:40px;height:40px}.kf-skeleton-preset__header-title{font-size:var(--kf-font-size-title-sm)}.kf-skeleton-preset__header-subtitle{font-size:.8125rem}}\n"] }]
|
|
4694
|
+
args: [{ selector: 'kf-skeleton-preset', imports: [Card, DataTable, DocumentRow, Skeleton, StatCard], template: "<div\n [class]=\"'kf-skeleton-preset kf-skeleton-preset--' + variant()\"\n aria-busy=\"true\"\n [style.--kf-skeleton-preset-columns]=\"columns() ?? null\"\n>\n @if (label()) {\n <span class=\"kf-sr-only\" role=\"status\">{{ label() }}</span>\n }\n @switch (variant()) {\n @case ('kpi-grid') {\n <div class=\"kf-skeleton-preset__grid\" [class.kf-skeleton-preset__grid--fixed]=\"!!columns()\">\n @for (i of items(); track i) {\n <kf-stat-card [loading]=\"true\" icon=\"bell\" value=\"0\" label=\"Etiqueta\" note=\"Nota\" />\n }\n </div>\n }\n @case ('card-grid') {\n <div class=\"kf-skeleton-preset__grid\" [class.kf-skeleton-preset__grid--fixed]=\"!!columns()\">\n @for (i of items(); track i) {\n <kf-card gap=\"sm\" aria-hidden=\"true\">\n <kf-skeleton variant=\"rect\" height=\"7.5rem\" />\n <kf-skeleton width=\"60%\" height=\"1.25rem\" />\n <kf-skeleton />\n <kf-skeleton width=\"80%\" />\n </kf-card>\n }\n </div>\n }\n @case ('form') {\n <div\n class=\"kf-skeleton-preset__form\"\n [class.kf-skeleton-preset__form--two]=\"formColumns() === 2\"\n aria-hidden=\"true\"\n >\n @for (i of items(); track i) {\n <div class=\"kf-skeleton-preset__field\">\n <span\n class=\"kf-skeleton-preset__label kf-overline-text kf-bone\"\n style=\"--kf-bone-width: 30%\"\n >\n Etiqueta\n </span>\n <span class=\"kf-skeleton-preset__control\">\n <span class=\"kf-skeleton-preset__value kf-bone\" style=\"--kf-bone-width: 55%\"\n >Valor</span\n >\n </span>\n </div>\n }\n </div>\n }\n @case ('list') {\n <div class=\"kf-skeleton-preset__stack\">\n @for (i of items(); track i) {\n <kf-document-row [loading]=\"true\" title=\"Documento\" meta=\"Archivo \u00B7 120 KB\" />\n }\n </div>\n }\n @case ('table') {\n <kf-data-table\n [columns]=\"tableColumns()\"\n [rows]=\"[]\"\n [loading]=\"true\"\n [skeletonRows]=\"total()\"\n />\n }\n @case ('timeline') {\n <div class=\"kf-skeleton-preset__timeline\" aria-hidden=\"true\">\n <div class=\"kf-skeleton-preset__timeline-toolbar\">\n <span class=\"kf-skeleton-preset__timeline-heading kf-bone\" style=\"--kf-bone-width: 30%\">\n Etapas\n </span>\n <span class=\"kf-skeleton-preset__timeline-toggle kf-bone\" style=\"--kf-bone-width: 7rem\">\n Expandir todo\n </span>\n </div>\n <ol class=\"kf-skeleton-preset__timeline-list\">\n @for (i of items(); track i) {\n <li class=\"kf-skeleton-preset__timeline-group\">\n <span class=\"kf-skeleton-preset__timeline-node kf-bone-fill\"></span>\n <span class=\"kf-skeleton-preset__timeline-text\">\n <span\n class=\"kf-skeleton-preset__timeline-title kf-bone\"\n style=\"--kf-bone-width: 45%\"\n >\n Etapa\n </span>\n <span\n class=\"kf-skeleton-preset__timeline-meta kf-bone\"\n style=\"--kf-bone-width: 30%\"\n >\n Detalle\n </span>\n </span>\n </li>\n }\n </ol>\n </div>\n }\n @case ('detail-header') {\n <div class=\"kf-skeleton-preset__header\" aria-hidden=\"true\">\n <span class=\"kf-skeleton-preset__header-icon kf-bone-fill\"></span>\n <span class=\"kf-skeleton-preset__header-heading\">\n <span class=\"kf-skeleton-preset__header-title kf-bone\" style=\"--kf-bone-width: 40%\">\n T\u00EDtulo\n </span>\n <span class=\"kf-skeleton-preset__header-subtitle kf-bone\" style=\"--kf-bone-width: 60%\">\n Subt\u00EDtulo\n </span>\n </span>\n </div>\n }\n }\n</div>\n", styles: [".kf-overline-text{font-family:var(--kf-font-title);font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-bone-shimmer 1.4s ease infinite}.kf-bone{display:block;box-sizing:border-box;width:var(--kf-bone-width, 60%);max-width:100%;overflow:hidden;white-space:nowrap;border-radius:var(--kf-radius-xs);-webkit-user-select:none;user-select:none;pointer-events:none}.kf-bone.kf-bone{color:transparent!important;-webkit-text-fill-color:transparent}.kf-bone>*{visibility:hidden}@keyframes kf-bone-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{animation:none;background:var(--kf-color-border)}}.kf-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}:host{display:block;font-family:var(--kf-font-body)}.kf-skeleton-preset__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:var(--kf-space-md)}.kf-skeleton-preset__grid--fixed{grid-template-columns:repeat(var(--kf-skeleton-preset-columns),minmax(0,1fr))}.kf-skeleton-preset__stack{display:flex;flex-direction:column;gap:var(--kf-space-sm)}.kf-skeleton-preset__form{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--kf-space-md)}.kf-skeleton-preset__form--two{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:640px){.kf-skeleton-preset__form--two{grid-template-columns:minmax(0,1fr)}}.kf-skeleton-preset__field{display:flex;flex-direction:column;gap:var(--kf-space-xs)}.kf-skeleton-preset__control{display:block;padding:var(--kf-space-sm) var(--kf-space-sm);background:var(--kf-color-surface);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm)}.kf-skeleton-preset__timeline{--_node: var(--kf-status-node-size, 2.125rem);--_gutter: var(--kf-space-sm);--_pad-y: var(--kf-space-sm);--_line: 2px;display:flex;flex-direction:column;gap:var(--kf-space-sm)}.kf-skeleton-preset__timeline-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm)}.kf-skeleton-preset__timeline-heading{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-sm);font-weight:var(--kf-font-weight-title)}.kf-skeleton-preset__timeline-toggle{box-sizing:border-box;padding:6px var(--kf-space-sm);border:1px solid transparent;font-size:.85rem;font-weight:600;border-radius:var(--kf-radius-sm)}@media(max-width:640px),(pointer:coarse){.kf-skeleton-preset__timeline-toggle{min-height:44px}}.kf-skeleton-preset__timeline-list{list-style:none;margin:0;padding:0}.kf-skeleton-preset__timeline-group{position:relative;display:flex;align-items:flex-start;gap:var(--kf-space-md);box-sizing:border-box;min-height:2.75rem;padding:var(--_pad-y) var(--_gutter)}.kf-skeleton-preset__timeline-group:not(:last-child):before{content:\"\";position:absolute;inset-inline-start:calc(var(--_gutter) + var(--_node) / 2 - var(--_line) / 2);top:calc(var(--_pad-y) + var(--_node));bottom:calc(var(--kf-space-xs) - var(--_pad-y));width:var(--_line);background:var(--kf-color-border)}.kf-skeleton-preset__timeline-node{flex:none;width:var(--_node);height:var(--_node);border-radius:50%}.kf-skeleton-preset__timeline-text{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;min-height:var(--_node)}.kf-skeleton-preset__timeline-title{font-weight:700;font-size:var(--kf-font-size-body)}.kf-skeleton-preset__timeline-meta{font-size:var(--kf-font-size-body-sm)}.kf-skeleton-preset__header{display:flex;align-items:center;gap:var(--kf-space-md);padding-bottom:var(--kf-space-lg);border-bottom:1px solid var(--kf-color-border)}.kf-skeleton-preset__header-icon{flex:none;width:52px;height:52px;border:1px solid transparent;border-radius:var(--kf-radius-md)}.kf-skeleton-preset__header-heading{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0}.kf-skeleton-preset__header-title{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-md);font-weight:var(--kf-font-weight-title);line-height:1.2}.kf-skeleton-preset__header-subtitle{font-size:.9375rem}@media(max-width:900px){.kf-skeleton-preset__header-icon{width:40px;height:40px}.kf-skeleton-preset__header-title{font-size:var(--kf-font-size-title-sm)}.kf-skeleton-preset__header-subtitle{font-size:.8125rem}}\n"] }]
|
|
4615
4695
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
|
|
4616
4696
|
|
|
4617
4697
|
/**
|
|
@@ -4895,7 +4975,7 @@ class CursorPager {
|
|
|
4895
4975
|
}
|
|
4896
4976
|
}
|
|
4897
4977
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CursorPager, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4898
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: CursorPager, isStandalone: true, selector: "kf-cursor-pager", inputs: { summary: { classPropertyName: "summary", publicName: "summary", isSignal: true, isRequired: false, transformFunction: null }, hasPrevious: { classPropertyName: "hasPrevious", publicName: "hasPrevious", isSignal: true, isRequired: false, transformFunction: null }, hasNext: { classPropertyName: "hasNext", publicName: "hasNext", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { previous: "previous", next: "next", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "<div class=\"kf-cursor-pager\">\n <div class=\"kf-cursor-pager__summary\" role=\"status\" aria-live=\"polite\">{{ summary() }}</div>\n\n <div class=\"kf-cursor-pager__controls\">\n @if (sizeOptions().length > 0) {\n <div class=\"kf-cursor-pager__size\">\n <span class=\"kf-cursor-pager__size-label\" aria-hidden=\"true\">Filas</span>\n <kf-select\n variant=\"compact\"\n label=\"Filas por p\u00E1gina\"\n hideLabel\n [options]=\"sizeOptions()\"\n [value]=\"sizeValue()\"\n (valueChange)=\"onPageSize($event)\"\n />\n </div>\n <span class=\"kf-cursor-pager__divider\" aria-hidden=\"true\"></span>\n }\n\n <nav class=\"kf-cursor-pager__nav\" [attr.aria-label]=\"ariaLabel()\">\n <button\n type=\"button\"\n class=\"kf-cursor-pager__button\"\n [attr.aria-disabled]=\"!hasPrevious()\"\n (click)=\"onPrevious()\"\n >\n <kf-icon name=\"chevron-left\" size=\"sm\" />\n Anterior\n </button>\n <button\n type=\"button\"\n class=\"kf-cursor-pager__button kf-cursor-pager__button--next\"\n [attr.aria-disabled]=\"!hasNext()\"\n (click)=\"onNext()\"\n >\n Siguiente\n <kf-icon name=\"chevron-right\" size=\"sm\" />\n </button>\n </nav>\n </div>\n</div>\n", styles: [":host{display:block;font-family:var(--kf-font-body)}.kf-cursor-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--kf-space-md)}.kf-cursor-pager__summary{font-size:var(--kf-font-size-body-sm);font-weight:var(--kf-font-weight-medium);color:var(--kf-color-text)}.kf-cursor-pager__summary:empty{display:none}.kf-cursor-pager__controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--kf-space-sm) var(--kf-space-md)}.kf-cursor-pager__size{display:flex;align-items:center;gap:var(--kf-space-sm)}.kf-cursor-pager__size-label{font-size:var(--kf-font-size-body-sm);color:var(--kf-color-text);white-space:nowrap}.kf-cursor-pager__divider{width:1px;height:1.25rem;background:var(--kf-color-border)}.kf-cursor-pager__nav{display:flex;align-items:center;gap:var(--kf-space-sm)}.kf-cursor-pager__button{display:inline-flex;align-items:center;justify-content:center;gap:var(--kf-space-xs);min-height:32px;padding:0 var(--kf-space-sm);font:inherit;font-size:var(--kf-font-size-body-sm);font-weight:var(--kf-font-weight-medium);color:var(--kf-color-text);background:transparent;border:1px solid var(--kf-color-border-strong);border-radius:var(--kf-radius-sm);cursor:pointer}.kf-cursor-pager__button:hover:not([aria-disabled=true]){background:var(--kf-color-white);border-color:var(--kf-color-text-muted)}.kf-cursor-pager__button:focus-visible{outline:2px solid transparent;box-shadow:var(--kf-shadow-focus)}.kf-cursor-pager__button[aria-disabled=true]{opacity:.5;cursor:not-allowed}@media(max-width:599.98px){.kf-cursor-pager__controls{width:100%}.kf-cursor-pager__divider{display:none}.kf-cursor-pager__nav{width:100%}.kf-cursor-pager__button{flex:1 1 0;min-height:36px}}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "component", type: Select, selector: "kf-select", inputs: ["label", "hideLabel", "prefix", "options", "value", "placeholder", "disabled", "invalid", "errorMessage", "variant", "width", "searchable", "searchThreshold", "ariaLabel", "icon", "panelTitle", "panelWidth"], outputs: ["valueChange"] }] });
|
|
4978
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: CursorPager, isStandalone: true, selector: "kf-cursor-pager", inputs: { summary: { classPropertyName: "summary", publicName: "summary", isSignal: true, isRequired: false, transformFunction: null }, hasPrevious: { classPropertyName: "hasPrevious", publicName: "hasPrevious", isSignal: true, isRequired: false, transformFunction: null }, hasNext: { classPropertyName: "hasNext", publicName: "hasNext", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { previous: "previous", next: "next", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "<div class=\"kf-cursor-pager\">\n <div class=\"kf-cursor-pager__summary\" role=\"status\" aria-live=\"polite\">{{ summary() }}</div>\n\n <div class=\"kf-cursor-pager__controls\">\n @if (sizeOptions().length > 0) {\n <div class=\"kf-cursor-pager__size\">\n <span class=\"kf-cursor-pager__size-label\" aria-hidden=\"true\">Filas</span>\n <kf-select\n variant=\"compact\"\n label=\"Filas por p\u00E1gina\"\n hideLabel\n [options]=\"sizeOptions()\"\n [value]=\"sizeValue()\"\n (valueChange)=\"onPageSize($event)\"\n />\n </div>\n <span class=\"kf-cursor-pager__divider\" aria-hidden=\"true\"></span>\n }\n\n <nav class=\"kf-cursor-pager__nav\" [attr.aria-label]=\"ariaLabel()\">\n <button\n type=\"button\"\n class=\"kf-cursor-pager__button\"\n [attr.aria-disabled]=\"!hasPrevious()\"\n (click)=\"onPrevious()\"\n >\n <kf-icon name=\"chevron-left\" size=\"sm\" />\n Anterior\n </button>\n <button\n type=\"button\"\n class=\"kf-cursor-pager__button kf-cursor-pager__button--next\"\n [attr.aria-disabled]=\"!hasNext()\"\n (click)=\"onNext()\"\n >\n Siguiente\n <kf-icon name=\"chevron-right\" size=\"sm\" />\n </button>\n </nav>\n </div>\n</div>\n", styles: [":host{display:block;font-family:var(--kf-font-body)}.kf-cursor-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--kf-space-md)}.kf-cursor-pager__summary{font-size:var(--kf-font-size-body-sm);font-weight:var(--kf-font-weight-medium);color:var(--kf-color-text)}.kf-cursor-pager__summary:empty{display:none}.kf-cursor-pager__controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--kf-space-sm) var(--kf-space-md)}.kf-cursor-pager__size{display:flex;align-items:center;gap:var(--kf-space-sm)}.kf-cursor-pager__size-label{font-size:var(--kf-font-size-body-sm);color:var(--kf-color-text);white-space:nowrap}.kf-cursor-pager__divider{width:1px;height:1.25rem;background:var(--kf-color-border)}.kf-cursor-pager__nav{display:flex;align-items:center;gap:var(--kf-space-sm)}.kf-cursor-pager__button{display:inline-flex;align-items:center;justify-content:center;gap:var(--kf-space-xs);min-height:32px;padding:0 var(--kf-space-sm);font:inherit;font-size:var(--kf-font-size-body-sm);font-weight:var(--kf-font-weight-medium);color:var(--kf-color-text);background:transparent;border:1px solid var(--kf-color-border-strong);border-radius:var(--kf-radius-sm);cursor:pointer}.kf-cursor-pager__button:hover:not([aria-disabled=true]){background:var(--kf-color-white);border-color:var(--kf-color-text-muted)}.kf-cursor-pager__button:focus-visible{outline:2px solid transparent;box-shadow:var(--kf-shadow-focus)}.kf-cursor-pager__button[aria-disabled=true]{opacity:.5;cursor:not-allowed}@media(max-width:599.98px){.kf-cursor-pager__controls{width:100%}.kf-cursor-pager__divider{display:none}.kf-cursor-pager__nav{width:100%}.kf-cursor-pager__button{flex:1 1 0;min-height:36px}}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "component", type: Select, selector: "kf-select", inputs: ["label", "hideLabel", "prefix", "options", "value", "placeholder", "disabled", "invalid", "required", "errorMessage", "variant", "width", "size", "searchable", "searchThreshold", "ariaLabel", "icon", "panelTitle", "panelWidth"], outputs: ["valueChange"] }] });
|
|
4899
4979
|
}
|
|
4900
4980
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CursorPager, decorators: [{
|
|
4901
4981
|
type: Component,
|
|
@@ -5707,15 +5787,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
5707
5787
|
], template: "@if (label()) {\n <kf-field-label [for]=\"inputId\" [required]=\"required()\">{{ label() }}</kf-field-label>\n}\n<div\n class=\"kf-file-input__area\"\n [class.kf-file-input__area--dropzone]=\"dropzone()\"\n [class.kf-file-input__area--dragging]=\"dragging()\"\n [class.kf-file-input__area--invalid]=\"isInvalid()\"\n [class.kf-file-input__area--disabled]=\"isDisabled()\"\n (dragover)=\"dropzone() ? onDragOver($event) : null\"\n (dragleave)=\"dropzone() ? onDragLeave() : null\"\n (drop)=\"dropzone() ? onDrop($event) : null\"\n>\n <input\n #nativeInput\n type=\"file\"\n class=\"kf-file-input__native\"\n [id]=\"inputId\"\n [attr.accept]=\"accept() || null\"\n [multiple]=\"multiple()\"\n [disabled]=\"isDisabled()\"\n [required]=\"required() && !files().length\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.aria-invalid]=\"isInvalid() ? true : null\"\n [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n (change)=\"onPick($event)\"\n />\n <label class=\"kf-file-input__button\" [for]=\"inputId\" aria-hidden=\"true\">\n <kf-icon name=\"upload-cloud\" size=\"sm\" />\n {{ triggerText() }}\n </label>\n @if (dropzone()) {\n <span class=\"kf-file-input__drop-text\" aria-hidden=\"true\">{{ dropzoneText() }}</span>\n }\n</div>\n@if (files().length) {\n <ul class=\"kf-file-input__files\" [id]=\"filesId\">\n @for (file of files(); track $index) {\n <li class=\"kf-file-input__file\">\n <kf-icon class=\"kf-file-input__file-icon\" name=\"file\" size=\"sm\" />\n <span class=\"kf-file-input__file-name\">{{ file.name }}</span>\n <span class=\"kf-file-input__file-size\">{{ formatSize(file) }}</span>\n <button\n type=\"button\"\n class=\"kf-file-input__remove\"\n [attr.aria-label]=\"removeLabel() + ' ' + file.name\"\n [disabled]=\"isDisabled()\"\n (click)=\"remove($index)\"\n >\n <kf-icon name=\"x\" size=\"sm\" />\n </button>\n </li>\n }\n </ul>\n}\n@if (message(); as text) {\n <span class=\"kf-file-input__error kf-field-error\" [id]=\"errorId\" role=\"alert\">{{ text }}</span>\n}\n@if (effectiveHint() && !error()) {\n <span class=\"kf-file-input__hint kf-field-hint\" [id]=\"hintId\">{{ effectiveHint() }}</span>\n}\n", styles: [".kf-field-hint{font-size:.75rem;color:var(--kf-color-text-muted)}.kf-field-error{display:flex;align-items:center;gap:var(--kf-space-xs);font-size:.75rem;font-weight:600;color:var(--kf-color-error-strong)}:host{display:flex;flex-direction:column;gap:var(--kf-space-xs);font-family:var(--kf-font-body)}.kf-file-input__area{position:relative;display:flex;align-items:center;gap:var(--kf-space-sm)}.kf-file-input__native{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.kf-file-input__native:disabled{cursor:not-allowed}.kf-file-input__button{display:inline-flex;align-items:center;justify-content:center;gap:var(--kf-space-xs);min-height:2.25rem;padding:var(--kf-space-sm) var(--kf-space-md);box-sizing:border-box;border:1px solid var(--kf-color-primary);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);color:var(--kf-color-primary-active);font:inherit;font-weight:600;pointer-events:none;transition:background .14s,box-shadow .14s}.kf-file-input__area:hover .kf-file-input__native:not(:disabled)+.kf-file-input__button{background:var(--kf-color-primary-soft)}.kf-file-input__native:focus-visible+.kf-file-input__button{box-shadow:var(--kf-shadow-focus);outline:2px solid transparent}.kf-file-input__area--invalid .kf-file-input__button{border-color:var(--kf-color-error);color:var(--kf-color-error-strong)}.kf-file-input__area--invalid .kf-file-input__native:focus-visible+.kf-file-input__button{box-shadow:var(--kf-shadow-focus-error)}.kf-file-input__area--disabled{opacity:.5}.kf-file-input__area--dropzone{flex-direction:column;justify-content:center;gap:var(--kf-space-xs);padding:var(--kf-space-lg) var(--kf-space-md);border:1px dashed var(--kf-color-border-strong);border-radius:var(--kf-radius-sm);background:var(--kf-color-surface);transition:background .14s,border-color .14s}.kf-file-input__area--dragging{border-color:var(--kf-color-primary);background:var(--kf-color-primary-soft)}.kf-file-input__area--dropzone.kf-file-input__area--invalid{border-color:var(--kf-color-error)}.kf-file-input__drop-text{font-size:.875rem;color:var(--kf-color-text);pointer-events:none}.kf-file-input__files{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--kf-space-xs)}.kf-file-input__file{display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-xs) var(--kf-space-sm);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);min-width:0}.kf-file-input__file-icon{flex:none;color:var(--kf-color-text-muted)}.kf-file-input__file-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--kf-color-ink);font-weight:600}.kf-file-input__file-size{flex:none;font-size:.75rem;color:var(--kf-color-text)}.kf-file-input__remove{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:2rem;min-height:2rem;padding:0;border:none;border-radius:var(--kf-radius-xs);background:transparent;color:var(--kf-color-text);cursor:pointer}.kf-file-input__remove:hover:not(:disabled){background:var(--kf-color-surface);color:var(--kf-color-ink)}.kf-file-input__remove:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-file-input__hint{color:var(--kf-color-text)}@media(pointer:coarse),(max-width:760px){.kf-file-input__button{min-height:44px}.kf-file-input__remove{min-width:44px;min-height:44px}}\n"] }]
|
|
5708
5788
|
}], propDecorators: { nativeInput: [{ type: i0.ViewChild, args: ['nativeInput', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], dropzone: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropzone", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], changeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "changeLabel", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], dropzoneText: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropzoneText", required: false }] }], rejectedTypeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "rejectedTypeText", required: false }] }], rejectedSizeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "rejectedSizeText", required: false }] }], fileChange: [{ type: i0.Output, args: ["fileChange"] }], fileRejected: [{ type: i0.Output, args: ["fileRejected"] }] } });
|
|
5709
5789
|
|
|
5710
|
-
/** Vacío o `undefined` no emiten el atributo; `0` sí es un límite válido. */
|
|
5711
|
-
function normalizeBound(value) {
|
|
5712
|
-
return value === undefined || value === '' ? null : value;
|
|
5713
|
-
}
|
|
5714
5790
|
/** `maxlength` como entero positivo; cualquier otra cosa (vacío, NaN, 0, negativo) no se emite. */
|
|
5715
5791
|
function toMaxLength(value) {
|
|
5716
5792
|
const parsed = typeof value === 'string' ? Number.parseInt(value, 10) : value;
|
|
5717
5793
|
return typeof parsed === 'number' && Number.isInteger(parsed) && parsed > 0 ? parsed : null;
|
|
5718
5794
|
}
|
|
5795
|
+
|
|
5796
|
+
/** Vacío o `undefined` no emiten el atributo; `0` sí es un límite válido. */
|
|
5797
|
+
function normalizeBound(value) {
|
|
5798
|
+
return value === undefined || value === '' ? null : value;
|
|
5799
|
+
}
|
|
5719
5800
|
/**
|
|
5720
5801
|
* Input de formulario apilado: label arriba (en mayúsculas vía CSS), campo con
|
|
5721
5802
|
* fondo gris que pasa a blanco con anillo de foco azul al enfocar.
|
|
@@ -6245,7 +6326,7 @@ class Filter {
|
|
|
6245
6326
|
this.fieldChange.emit({ key, value });
|
|
6246
6327
|
}
|
|
6247
6328
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Filter, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6248
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Filter, isStandalone: true, selector: "kf-filter", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, mobileTitle: { classPropertyName: "mobileTitle", publicName: "mobileTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fieldChange: "fieldChange" }, ngImport: i0, template: "<ng-template #fieldsTpl let-stacked=\"stacked\">\n @for (field of fields(); track field.key) {\n @switch (field.type) {\n @case ('select') {\n <kf-select\n [label]=\"field.label ?? ''\"\n [options]=\"optionsFor(field.key)\"\n [value]=\"singleValueFor(field.key)\"\n [placeholder]=\"field.placeholder ?? ''\"\n [style.width]=\"stacked ? '100%' : fieldWidth(field)\"\n (valueChange)=\"onFieldChange(field.key, $event)\"\n />\n }\n @case ('multi-select') {\n <kf-multi-select\n [label]=\"field.label ?? ''\"\n [options]=\"multiOptionsFor(field.key)\"\n [values]=\"multiValueFor(field.key)\"\n [placeholder]=\"field.placeholder ?? ''\"\n [style.width]=\"stacked ? '100%' : fieldWidth(field)\"\n (valuesChange)=\"onFieldChange(field.key, $event)\"\n />\n }\n @case ('search') {\n <kf-input\n [label]=\"field.label ?? ''\"\n [icon]=\"field.icon ?? 'search'\"\n [placeholder]=\"field.placeholder ?? ''\"\n [style.width]=\"stacked ? '100%' : fieldWidth(field)\"\n [ngModel]=\"singleValueFor(field.key)\"\n (ngModelChange)=\"onFieldChange(field.key, $event)\"\n />\n }\n }\n @if (!stacked && field.showDivider) {\n <kf-divider orientation=\"vertical\" />\n }\n }\n</ng-template>\n\n<div class=\"kf-filter kf-filter--row\">\n <ng-container [ngTemplateOutlet]=\"fieldsTpl\" [ngTemplateOutletContext]=\"{ stacked: false }\" />\n</div>\n\n<kf-collapsible class=\"kf-filter__collapsible\" [title]=\"mobileTitle()\">\n <div class=\"kf-filter kf-filter--stack\">\n <ng-container [ngTemplateOutlet]=\"fieldsTpl\" [ngTemplateOutletContext]=\"{ stacked: true }\" />\n </div>\n</kf-collapsible>\n", styles: ["@charset \"UTF-8\";:host{display:block}.kf-filter--row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--kf-space-md)}.kf-filter--stack{display:flex;flex-direction:column;gap:var(--kf-space-md)}.kf-filter__collapsible{display:none}@media(max-width:768px){.kf-filter--row{display:none}.kf-filter__collapsible{display:block}}\n"], dependencies: [{ kind: "component", type: Collapsible, selector: "kf-collapsible", inputs: ["title", "expanded"], outputs: ["expandedChange"] }, { kind: "component", type: Divider, selector: "kf-divider", inputs: ["orientation"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Input, selector: "kf-input", inputs: ["label", "hideLabel", "required", "icon", "suffix", "hint", "invalid", "errorMessage", "disabled", "readonly", "type", "placeholder", "autocomplete", "name", "inputmode", "min", "max", "step", "maxlength", "toggleable", "ariaLabel", "clearable", "clearLabel"], outputs: ["cleared"] }, { kind: "component", type: MultiSelect, selector: "kf-multi-select", inputs: ["label", "options", "values", "placeholder", "disabled", "width", "searchable", "searchThreshold"], outputs: ["valuesChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Select, selector: "kf-select", inputs: ["label", "hideLabel", "prefix", "options", "value", "placeholder", "disabled", "invalid", "errorMessage", "variant", "width", "searchable", "searchThreshold", "ariaLabel", "icon", "panelTitle", "panelWidth"], outputs: ["valueChange"] }] });
|
|
6329
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Filter, isStandalone: true, selector: "kf-filter", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, mobileTitle: { classPropertyName: "mobileTitle", publicName: "mobileTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fieldChange: "fieldChange" }, ngImport: i0, template: "<ng-template #fieldsTpl let-stacked=\"stacked\">\n @for (field of fields(); track field.key) {\n @switch (field.type) {\n @case ('select') {\n <kf-select\n [label]=\"field.label ?? ''\"\n [options]=\"optionsFor(field.key)\"\n [value]=\"singleValueFor(field.key)\"\n [placeholder]=\"field.placeholder ?? ''\"\n [style.width]=\"stacked ? '100%' : fieldWidth(field)\"\n (valueChange)=\"onFieldChange(field.key, $event)\"\n />\n }\n @case ('multi-select') {\n <kf-multi-select\n [label]=\"field.label ?? ''\"\n [options]=\"multiOptionsFor(field.key)\"\n [values]=\"multiValueFor(field.key)\"\n [placeholder]=\"field.placeholder ?? ''\"\n [style.width]=\"stacked ? '100%' : fieldWidth(field)\"\n (valuesChange)=\"onFieldChange(field.key, $event)\"\n />\n }\n @case ('search') {\n <kf-input\n [label]=\"field.label ?? ''\"\n [icon]=\"field.icon ?? 'search'\"\n [placeholder]=\"field.placeholder ?? ''\"\n [style.width]=\"stacked ? '100%' : fieldWidth(field)\"\n [ngModel]=\"singleValueFor(field.key)\"\n (ngModelChange)=\"onFieldChange(field.key, $event)\"\n />\n }\n }\n @if (!stacked && field.showDivider) {\n <kf-divider orientation=\"vertical\" />\n }\n }\n</ng-template>\n\n<div class=\"kf-filter kf-filter--row\">\n <ng-container [ngTemplateOutlet]=\"fieldsTpl\" [ngTemplateOutletContext]=\"{ stacked: false }\" />\n</div>\n\n<kf-collapsible class=\"kf-filter__collapsible\" [title]=\"mobileTitle()\">\n <div class=\"kf-filter kf-filter--stack\">\n <ng-container [ngTemplateOutlet]=\"fieldsTpl\" [ngTemplateOutletContext]=\"{ stacked: true }\" />\n </div>\n</kf-collapsible>\n", styles: ["@charset \"UTF-8\";:host{display:block}.kf-filter--row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--kf-space-md)}.kf-filter--stack{display:flex;flex-direction:column;gap:var(--kf-space-md)}.kf-filter__collapsible{display:none}@media(max-width:768px){.kf-filter--row{display:none}.kf-filter__collapsible{display:block}}\n"], dependencies: [{ kind: "component", type: Collapsible, selector: "kf-collapsible", inputs: ["title", "expanded"], outputs: ["expandedChange"] }, { kind: "component", type: Divider, selector: "kf-divider", inputs: ["orientation"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Input, selector: "kf-input", inputs: ["label", "hideLabel", "required", "icon", "suffix", "hint", "invalid", "errorMessage", "disabled", "readonly", "type", "placeholder", "autocomplete", "name", "inputmode", "min", "max", "step", "maxlength", "toggleable", "ariaLabel", "clearable", "clearLabel"], outputs: ["cleared"] }, { kind: "component", type: MultiSelect, selector: "kf-multi-select", inputs: ["label", "options", "values", "placeholder", "disabled", "width", "searchable", "searchThreshold"], outputs: ["valuesChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Select, selector: "kf-select", inputs: ["label", "hideLabel", "prefix", "options", "value", "placeholder", "disabled", "invalid", "required", "errorMessage", "variant", "width", "size", "searchable", "searchThreshold", "ariaLabel", "icon", "panelTitle", "panelWidth"], outputs: ["valueChange"] }] });
|
|
6249
6330
|
}
|
|
6250
6331
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Filter, decorators: [{
|
|
6251
6332
|
type: Component,
|
|
@@ -6939,13 +7020,13 @@ class MetricCard {
|
|
|
6939
7020
|
/** Dibuja el esqueleto en lugar del contenido, conservando las dimensiones. */
|
|
6940
7021
|
loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
6941
7022
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MetricCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6942
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: MetricCard, isStandalone: true, selector: "kf-metric-card", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, foot: { classPropertyName: "foot", publicName: "foot", isSignal: true, isRequired: false, transformFunction: null }, valueColor: { classPropertyName: "valueColor", publicName: "valueColor", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-busy": "loading() ? 'true' : null" } }, ngImport: i0, template: "<kf-card>\n <div class=\"kf-metric-card__head\">\n @if (loading()) {\n <span\n class=\"kf-metric-card__label-bone kf-bone\"\n style=\"--kf-bone-width: 45%\"\n aria-hidden=\"true\"\n >\n <kf-text as=\"span\" variant=\"overline-strong\">{{ label() }}</kf-text>\n </span>\n @if (icon()) {\n <span class=\"kf-metric-card__icon kf-bone-fill\" aria-hidden=\"true\"></span>\n }\n } @else {\n <kf-text as=\"span\" variant=\"overline-strong\">{{ label() }}</kf-text>\n @if (icon(); as iconName) {\n <span class=\"kf-metric-card__icon\">\n <kf-icon [name]=\"iconName\" size=\"sm\" />\n </span>\n }\n }\n </div>\n <div class=\"kf-metric-card__value-row\">\n @if (loading()) {\n <div class=\"kf-metric-card__value kf-bone\" style=\"--kf-bone-width: 50%\" aria-hidden=\"true\">\n {{ value() }}\n </div>\n } @else {\n <div class=\"kf-metric-card__value\" [style.color]=\"valueColor()\">\n {{ value() }}\n @if (unit()) {\n <span class=\"kf-metric-card__unit\">{{ unit() }}</span>\n }\n </div>\n @if (badge()) {\n <span class=\"kf-metric-card__badge\">\n <kf-text as=\"span\" variant=\"overline-strong\" tone=\"ok\">{{ badge() }}</kf-text>\n </span>\n }\n }\n </div>\n @if (foot()) {\n @if (loading()) {\n <div class=\"kf-metric-card__foot kf-bone\" style=\"--kf-bone-width: 60%\" aria-hidden=\"true\">\n {{ foot() }}\n </div>\n } @else {\n <div class=\"kf-metric-card__foot\">{{ foot() }}</div>\n }\n }\n <div class=\"kf-metric-card__actions\" [class.kf-metric-card__actions--loading]=\"loading()\">\n <ng-content select=\"[actions]\" />\n </div>\n</kf-card>\n", styles: [".kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-bone-shimmer 1.4s ease infinite}.kf-bone{display:block;box-sizing:border-box;width:var(--kf-bone-width, 60%);max-width:100%;overflow:hidden;white-space:nowrap;border-radius:var(--kf-radius-xs);-webkit-user-select:none;user-select:none;pointer-events:none}.kf-bone.kf-bone{color:transparent!important}.kf-bone>*{visibility:hidden}@keyframes kf-bone-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{animation:none;background:var(--kf-color-border)}}:host{display:block}.kf-metric-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--kf-space-xs)}.kf-metric-card__icon{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;flex:none;border-radius:var(--kf-radius-sm);background:var(--kf-color-primary-soft);color:var(--kf-color-primary)}.kf-metric-card__value-row{display:flex;align-items:center;gap:var(--kf-space-xs)}.kf-metric-card__value{font-family:var(--kf-font-title);font-weight:700;font-size:1.6rem;line-height:1.1;color:var(--kf-color-ink)}.kf-metric-card__unit{font-size:.85rem;font-weight:500;color:var(--kf-color-text-muted);margin-left:var(--kf-space-xs)}.kf-metric-card__badge{padding:2px var(--kf-space-xs);border-radius:var(--kf-radius-pill);background:var(--kf-color-success-soft)}.kf-metric-card__foot{font-size:.78rem;color:var(--kf-color-text-muted)}.kf-metric-card__actions:empty{display:none}.kf-metric-card__actions{display:flex;gap:var(--kf-space-sm);margin-top:var(--kf-space-sm);margin-top:auto}.kf-metric-card__actions--loading{visibility:hidden}\n"], dependencies: [{ kind: "component", type: Card, selector: "kf-card", inputs: ["flush", "gap", "loading"] }, { kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "component", type: Text, selector: "kf-text", inputs: ["as", "variant", "tone"] }] });
|
|
7023
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: MetricCard, isStandalone: true, selector: "kf-metric-card", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, foot: { classPropertyName: "foot", publicName: "foot", isSignal: true, isRequired: false, transformFunction: null }, valueColor: { classPropertyName: "valueColor", publicName: "valueColor", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-busy": "loading() ? 'true' : null" } }, ngImport: i0, template: "<kf-card>\n <div class=\"kf-metric-card__head\">\n @if (loading()) {\n <span\n class=\"kf-metric-card__label-bone kf-bone\"\n style=\"--kf-bone-width: 45%\"\n aria-hidden=\"true\"\n >\n <kf-text as=\"span\" variant=\"overline-strong\">{{ label() }}</kf-text>\n </span>\n @if (icon()) {\n <span class=\"kf-metric-card__icon kf-bone-fill\" aria-hidden=\"true\"></span>\n }\n } @else {\n <kf-text as=\"span\" variant=\"overline-strong\">{{ label() }}</kf-text>\n @if (icon(); as iconName) {\n <span class=\"kf-metric-card__icon\">\n <kf-icon [name]=\"iconName\" size=\"sm\" />\n </span>\n }\n }\n </div>\n <div class=\"kf-metric-card__value-row\">\n @if (loading()) {\n <div class=\"kf-metric-card__value kf-bone\" style=\"--kf-bone-width: 50%\" aria-hidden=\"true\">\n {{ value() }}\n </div>\n } @else {\n <div class=\"kf-metric-card__value\" [style.color]=\"valueColor()\">\n {{ value() }}\n @if (unit()) {\n <span class=\"kf-metric-card__unit\">{{ unit() }}</span>\n }\n </div>\n @if (badge()) {\n <span class=\"kf-metric-card__badge\">\n <kf-text as=\"span\" variant=\"overline-strong\" tone=\"ok\">{{ badge() }}</kf-text>\n </span>\n }\n }\n </div>\n @if (foot()) {\n @if (loading()) {\n <div class=\"kf-metric-card__foot kf-bone\" style=\"--kf-bone-width: 60%\" aria-hidden=\"true\">\n {{ foot() }}\n </div>\n } @else {\n <div class=\"kf-metric-card__foot\">{{ foot() }}</div>\n }\n }\n <div class=\"kf-metric-card__actions\" [class.kf-metric-card__actions--loading]=\"loading()\">\n <ng-content select=\"[actions]\" />\n </div>\n</kf-card>\n", styles: [".kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-bone-shimmer 1.4s ease infinite}.kf-bone{display:block;box-sizing:border-box;width:var(--kf-bone-width, 60%);max-width:100%;overflow:hidden;white-space:nowrap;border-radius:var(--kf-radius-xs);-webkit-user-select:none;user-select:none;pointer-events:none}.kf-bone.kf-bone{color:transparent!important;-webkit-text-fill-color:transparent}.kf-bone>*{visibility:hidden}@keyframes kf-bone-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{animation:none;background:var(--kf-color-border)}}:host{display:block}.kf-metric-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--kf-space-xs)}.kf-metric-card__icon{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;flex:none;border-radius:var(--kf-radius-sm);background:var(--kf-color-primary-soft);color:var(--kf-color-primary)}.kf-metric-card__value-row{display:flex;align-items:center;gap:var(--kf-space-xs)}.kf-metric-card__value{font-family:var(--kf-font-title);font-weight:700;font-size:1.6rem;line-height:1.1;color:var(--kf-color-ink)}.kf-metric-card__unit{font-size:.85rem;font-weight:500;color:var(--kf-color-text-muted);margin-left:var(--kf-space-xs)}.kf-metric-card__badge{padding:2px var(--kf-space-xs);border-radius:var(--kf-radius-pill);background:var(--kf-color-success-soft)}.kf-metric-card__foot{font-size:.78rem;color:var(--kf-color-text-muted)}.kf-metric-card__actions:empty{display:none}.kf-metric-card__actions{display:flex;gap:var(--kf-space-sm);margin-top:var(--kf-space-sm);margin-top:auto}.kf-metric-card__actions--loading{visibility:hidden}\n"], dependencies: [{ kind: "component", type: Card, selector: "kf-card", inputs: ["flush", "gap", "loading"] }, { kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "component", type: Text, selector: "kf-text", inputs: ["as", "variant", "tone"] }] });
|
|
6943
7024
|
}
|
|
6944
7025
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MetricCard, decorators: [{
|
|
6945
7026
|
type: Component,
|
|
6946
7027
|
args: [{ selector: 'kf-metric-card', imports: [Card, Icon, Text], host: {
|
|
6947
7028
|
'[attr.aria-busy]': "loading() ? 'true' : null",
|
|
6948
|
-
}, template: "<kf-card>\n <div class=\"kf-metric-card__head\">\n @if (loading()) {\n <span\n class=\"kf-metric-card__label-bone kf-bone\"\n style=\"--kf-bone-width: 45%\"\n aria-hidden=\"true\"\n >\n <kf-text as=\"span\" variant=\"overline-strong\">{{ label() }}</kf-text>\n </span>\n @if (icon()) {\n <span class=\"kf-metric-card__icon kf-bone-fill\" aria-hidden=\"true\"></span>\n }\n } @else {\n <kf-text as=\"span\" variant=\"overline-strong\">{{ label() }}</kf-text>\n @if (icon(); as iconName) {\n <span class=\"kf-metric-card__icon\">\n <kf-icon [name]=\"iconName\" size=\"sm\" />\n </span>\n }\n }\n </div>\n <div class=\"kf-metric-card__value-row\">\n @if (loading()) {\n <div class=\"kf-metric-card__value kf-bone\" style=\"--kf-bone-width: 50%\" aria-hidden=\"true\">\n {{ value() }}\n </div>\n } @else {\n <div class=\"kf-metric-card__value\" [style.color]=\"valueColor()\">\n {{ value() }}\n @if (unit()) {\n <span class=\"kf-metric-card__unit\">{{ unit() }}</span>\n }\n </div>\n @if (badge()) {\n <span class=\"kf-metric-card__badge\">\n <kf-text as=\"span\" variant=\"overline-strong\" tone=\"ok\">{{ badge() }}</kf-text>\n </span>\n }\n }\n </div>\n @if (foot()) {\n @if (loading()) {\n <div class=\"kf-metric-card__foot kf-bone\" style=\"--kf-bone-width: 60%\" aria-hidden=\"true\">\n {{ foot() }}\n </div>\n } @else {\n <div class=\"kf-metric-card__foot\">{{ foot() }}</div>\n }\n }\n <div class=\"kf-metric-card__actions\" [class.kf-metric-card__actions--loading]=\"loading()\">\n <ng-content select=\"[actions]\" />\n </div>\n</kf-card>\n", styles: [".kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-bone-shimmer 1.4s ease infinite}.kf-bone{display:block;box-sizing:border-box;width:var(--kf-bone-width, 60%);max-width:100%;overflow:hidden;white-space:nowrap;border-radius:var(--kf-radius-xs);-webkit-user-select:none;user-select:none;pointer-events:none}.kf-bone.kf-bone{color:transparent!important}.kf-bone>*{visibility:hidden}@keyframes kf-bone-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{animation:none;background:var(--kf-color-border)}}:host{display:block}.kf-metric-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--kf-space-xs)}.kf-metric-card__icon{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;flex:none;border-radius:var(--kf-radius-sm);background:var(--kf-color-primary-soft);color:var(--kf-color-primary)}.kf-metric-card__value-row{display:flex;align-items:center;gap:var(--kf-space-xs)}.kf-metric-card__value{font-family:var(--kf-font-title);font-weight:700;font-size:1.6rem;line-height:1.1;color:var(--kf-color-ink)}.kf-metric-card__unit{font-size:.85rem;font-weight:500;color:var(--kf-color-text-muted);margin-left:var(--kf-space-xs)}.kf-metric-card__badge{padding:2px var(--kf-space-xs);border-radius:var(--kf-radius-pill);background:var(--kf-color-success-soft)}.kf-metric-card__foot{font-size:.78rem;color:var(--kf-color-text-muted)}.kf-metric-card__actions:empty{display:none}.kf-metric-card__actions{display:flex;gap:var(--kf-space-sm);margin-top:var(--kf-space-sm);margin-top:auto}.kf-metric-card__actions--loading{visibility:hidden}\n"] }]
|
|
7029
|
+
}, template: "<kf-card>\n <div class=\"kf-metric-card__head\">\n @if (loading()) {\n <span\n class=\"kf-metric-card__label-bone kf-bone\"\n style=\"--kf-bone-width: 45%\"\n aria-hidden=\"true\"\n >\n <kf-text as=\"span\" variant=\"overline-strong\">{{ label() }}</kf-text>\n </span>\n @if (icon()) {\n <span class=\"kf-metric-card__icon kf-bone-fill\" aria-hidden=\"true\"></span>\n }\n } @else {\n <kf-text as=\"span\" variant=\"overline-strong\">{{ label() }}</kf-text>\n @if (icon(); as iconName) {\n <span class=\"kf-metric-card__icon\">\n <kf-icon [name]=\"iconName\" size=\"sm\" />\n </span>\n }\n }\n </div>\n <div class=\"kf-metric-card__value-row\">\n @if (loading()) {\n <div class=\"kf-metric-card__value kf-bone\" style=\"--kf-bone-width: 50%\" aria-hidden=\"true\">\n {{ value() }}\n </div>\n } @else {\n <div class=\"kf-metric-card__value\" [style.color]=\"valueColor()\">\n {{ value() }}\n @if (unit()) {\n <span class=\"kf-metric-card__unit\">{{ unit() }}</span>\n }\n </div>\n @if (badge()) {\n <span class=\"kf-metric-card__badge\">\n <kf-text as=\"span\" variant=\"overline-strong\" tone=\"ok\">{{ badge() }}</kf-text>\n </span>\n }\n }\n </div>\n @if (foot()) {\n @if (loading()) {\n <div class=\"kf-metric-card__foot kf-bone\" style=\"--kf-bone-width: 60%\" aria-hidden=\"true\">\n {{ foot() }}\n </div>\n } @else {\n <div class=\"kf-metric-card__foot\">{{ foot() }}</div>\n }\n }\n <div class=\"kf-metric-card__actions\" [class.kf-metric-card__actions--loading]=\"loading()\">\n <ng-content select=\"[actions]\" />\n </div>\n</kf-card>\n", styles: [".kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-bone-shimmer 1.4s ease infinite}.kf-bone{display:block;box-sizing:border-box;width:var(--kf-bone-width, 60%);max-width:100%;overflow:hidden;white-space:nowrap;border-radius:var(--kf-radius-xs);-webkit-user-select:none;user-select:none;pointer-events:none}.kf-bone.kf-bone{color:transparent!important;-webkit-text-fill-color:transparent}.kf-bone>*{visibility:hidden}@keyframes kf-bone-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{animation:none;background:var(--kf-color-border)}}:host{display:block}.kf-metric-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--kf-space-xs)}.kf-metric-card__icon{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;flex:none;border-radius:var(--kf-radius-sm);background:var(--kf-color-primary-soft);color:var(--kf-color-primary)}.kf-metric-card__value-row{display:flex;align-items:center;gap:var(--kf-space-xs)}.kf-metric-card__value{font-family:var(--kf-font-title);font-weight:700;font-size:1.6rem;line-height:1.1;color:var(--kf-color-ink)}.kf-metric-card__unit{font-size:.85rem;font-weight:500;color:var(--kf-color-text-muted);margin-left:var(--kf-space-xs)}.kf-metric-card__badge{padding:2px var(--kf-space-xs);border-radius:var(--kf-radius-pill);background:var(--kf-color-success-soft)}.kf-metric-card__foot{font-size:.78rem;color:var(--kf-color-text-muted)}.kf-metric-card__actions:empty{display:none}.kf-metric-card__actions{display:flex;gap:var(--kf-space-sm);margin-top:var(--kf-space-sm);margin-top:auto}.kf-metric-card__actions--loading{visibility:hidden}\n"] }]
|
|
6949
7030
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], foot: [{ type: i0.Input, args: [{ isSignal: true, alias: "foot", required: false }] }], valueColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueColor", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });
|
|
6950
7031
|
|
|
6951
7032
|
const PROGRESS_STATUS = {
|
|
@@ -7233,6 +7314,22 @@ const FOCUSABLE = 'input:not([disabled]), select:not([disabled]), textarea:not([
|
|
|
7233
7314
|
* <kf-link footer class="kf-modal__footer-start" disabled>Ver documento</kf-link>
|
|
7234
7315
|
* <kf-button footer (click)="open.set(false)">Cerrar</kf-button>
|
|
7235
7316
|
*
|
|
7317
|
+
* ## Ancho: `size` y `width`
|
|
7318
|
+
* `size` (`'sm'` 480px, `'md'` 640px, `'lg'` 880px, `'xl'` 1120px) elige un
|
|
7319
|
+
* ancho con nombre; sin `size` ni `width` el ancho es el histórico de 480px.
|
|
7320
|
+
* `width` sigue aceptando cualquier valor CSS y, si se pasa, manda sobre
|
|
7321
|
+
* `size`. En pantallas angostas el panel nunca supera el ancho del viewport.
|
|
7322
|
+
*
|
|
7323
|
+
* <kf-modal [(open)]="open" title="Nuevo ticket" size="xl">…</kf-modal>
|
|
7324
|
+
*
|
|
7325
|
+
* ## Separadores: `dividers`
|
|
7326
|
+
* Con `dividers` el encabezado y el footer quedan separados del cuerpo por
|
|
7327
|
+
* una línea (`--kf-color-border`); el del footer solo aparece si hay
|
|
7328
|
+
* acciones. Sirve cuando el cuerpo se desplaza (`maxHeight`) y su contenido
|
|
7329
|
+
* no debe cortarse contra los botones. Sin `dividers` no cambia nada.
|
|
7330
|
+
*
|
|
7331
|
+
* <kf-modal [(open)]="open" title="Nuevo ticket" size="lg" dividers maxHeight="85vh">…</kf-modal>
|
|
7332
|
+
*
|
|
7236
7333
|
* ## Modal de listado (alto acotado, filtros fijos)
|
|
7237
7334
|
* Para un diálogo con mucho contenido (ej. elegir un ítem entre cientos):
|
|
7238
7335
|
* - `maxHeight` (ej. `"85vh"`) acota el panel; solo `.kf-modal__body` se
|
|
@@ -7268,6 +7365,11 @@ class Modal {
|
|
|
7268
7365
|
* angostas, mismo `min()` de siempre. */
|
|
7269
7366
|
width = input(null, /* @ts-ignore */
|
|
7270
7367
|
...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
7368
|
+
/** Ancho con nombre sobre `--kf-modal-width`; `width` lo pisa si ambos están. */
|
|
7369
|
+
size = input(null, /* @ts-ignore */
|
|
7370
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
7371
|
+
/** Línea bajo el encabezado y sobre el footer (si tiene acciones). */
|
|
7372
|
+
dividers = input(false, { ...(ngDevMode ? { debugName: "dividers" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
7271
7373
|
/** Alto máximo del panel (ej. `"85vh"`); con valor, solo el cuerpo se
|
|
7272
7374
|
* desplaza. Sin valor (default) el panel crece con su contenido. */
|
|
7273
7375
|
maxHeight = input(null, /* @ts-ignore */
|
|
@@ -7376,12 +7478,12 @@ class Modal {
|
|
|
7376
7478
|
}
|
|
7377
7479
|
}
|
|
7378
7480
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Modal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7379
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Modal, isStandalone: true, selector: "kf-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, fullscreenOnMobile: { classPropertyName: "fullscreenOnMobile", publicName: "fullscreenOnMobile", isSignal: true, isRequired: false, transformFunction: null }, initialFocus: { classPropertyName: "initialFocus", publicName: "initialFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { listeners: { "click": "onHostClick($event)" } }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n #dialog\n class=\"kf-modal\"\n [class.kf-modal--bounded]=\"!!maxHeight()\"\n [class.kf-modal--fullscreen-mobile]=\"fullscreenOnMobile()\"\n [style.--kf-modal-width]=\"width()\"\n [style.--kf-modal-max-height]=\"maxHeight()\"\n [attr.aria-labelledby]=\"title() ? titleId : null\"\n (cancel)=\"onCancel($event)\"\n (close)=\"open.set(false)\"\n>\n @if (open()) {\n <div #panel class=\"kf-modal__panel\">\n <div class=\"kf-modal__head\">\n <div class=\"kf-modal__heading\">\n @if (title()) {\n <h2 class=\"kf-modal__title\" [id]=\"titleId\">{{ title() }}</h2>\n }\n <ng-content select=\"[kf-modal-meta]\" />\n </div>\n @if (dismissible()) {\n <button\n type=\"button\"\n class=\"kf-modal__close\"\n aria-label=\"Cerrar di\u00E1logo\"\n (click)=\"open.set(false)\"\n >\n <kf-icon name=\"x\" size=\"sm\" />\n </button>\n }\n </div>\n <div class=\"kf-modal__toolbar\"><ng-content select=\"[kf-modal-toolbar]\" /></div>\n <div class=\"kf-modal__body\"><ng-content /></div>\n <div class=\"kf-modal__footer\"><ng-content select=\"[footer]\" /></div>\n </div>\n }\n</dialog>\n", styles: [".kf-modal{width:min(var(--kf-modal-width, 480px),calc(100vw - 2 * var(--kf-space-md)));max-height:calc(100vh - 2 * var(--kf-space-xl));padding:0;border:none;background:transparent;overflow:visible;font-family:var(--kf-font-body)}.kf-modal::backdrop{background:#171d2573}.kf-modal__panel{display:flex;flex-direction:column;gap:var(--kf-space-md);padding:var(--kf-space-lg);background:var(--kf-color-white);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-lg)}.kf-modal__head{display:flex;align-items:flex-start;gap:var(--kf-space-sm)}.kf-modal__heading{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--kf-space-sm);row-gap:var(--kf-space-xs)}.kf-modal__title{margin:0;font-family:var(--kf-font-title);font-size:1.375rem;font-weight:700;color:var(--kf-color-ink)}.kf-modal__close{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;margin:-4px -6px 0 0;padding:2px;border:none;background:transparent;color:var(--kf-color-text-muted);border-radius:var(--kf-radius-xs);cursor:pointer}.kf-modal__close:hover{color:var(--kf-color-ink);background:var(--kf-color-surface)}.kf-modal__close:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-modal__toolbar:empty{display:none}.kf-modal__body{color:var(--kf-color-text);overflow-y:auto}.kf-modal__footer:empty{display:none}.kf-modal__footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--kf-space-sm)}.kf-modal__footer-start{margin-right:auto}.kf-modal--bounded{max-height:min(var(--kf-modal-max-height),calc(100dvh - 2 * var(--kf-space-md)))}.kf-modal--bounded .kf-modal__panel{box-sizing:border-box;max-height:inherit}.kf-modal--bounded .kf-modal__body{flex:1 1 auto;min-height:0;overscroll-behavior:contain}@media(max-width:640px){.kf-modal--fullscreen-mobile{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0}.kf-modal--fullscreen-mobile .kf-modal__panel{box-sizing:border-box;height:100%;max-height:100%;padding:var(--kf-space-md);gap:var(--kf-space-sm);border-radius:0;box-shadow:none}.kf-modal--fullscreen-mobile .kf-modal__body{flex:1 1 auto;min-height:0}.kf-modal--fullscreen-mobile .kf-modal__title{font-size:var(--kf-font-size-title-sm)}}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }] });
|
|
7481
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Modal, isStandalone: true, selector: "kf-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dividers: { classPropertyName: "dividers", publicName: "dividers", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, fullscreenOnMobile: { classPropertyName: "fullscreenOnMobile", publicName: "fullscreenOnMobile", isSignal: true, isRequired: false, transformFunction: null }, initialFocus: { classPropertyName: "initialFocus", publicName: "initialFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { listeners: { "click": "onHostClick($event)" } }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n #dialog\n class=\"kf-modal\"\n [class.kf-modal--bounded]=\"!!maxHeight()\"\n [class.kf-modal--fullscreen-mobile]=\"fullscreenOnMobile()\"\n [class.kf-modal--dividers]=\"dividers()\"\n [attr.data-size]=\"size()\"\n [style.--kf-modal-width]=\"width()\"\n [style.--kf-modal-max-height]=\"maxHeight()\"\n [attr.aria-labelledby]=\"title() ? titleId : null\"\n (cancel)=\"onCancel($event)\"\n (close)=\"open.set(false)\"\n>\n @if (open()) {\n <div #panel class=\"kf-modal__panel\">\n <div class=\"kf-modal__head\">\n <div class=\"kf-modal__heading\">\n @if (title()) {\n <h2 class=\"kf-modal__title\" [id]=\"titleId\">{{ title() }}</h2>\n }\n <ng-content select=\"[kf-modal-meta]\" />\n </div>\n @if (dismissible()) {\n <button\n type=\"button\"\n class=\"kf-modal__close\"\n aria-label=\"Cerrar di\u00E1logo\"\n (click)=\"open.set(false)\"\n >\n <kf-icon name=\"x\" size=\"sm\" />\n </button>\n }\n </div>\n <div class=\"kf-modal__toolbar\"><ng-content select=\"[kf-modal-toolbar]\" /></div>\n <div class=\"kf-modal__body\"><ng-content /></div>\n <div class=\"kf-modal__footer\"><ng-content select=\"[footer]\" /></div>\n </div>\n }\n</dialog>\n", styles: [".kf-modal{width:min(var(--kf-modal-width, 480px),calc(100vw - 2 * var(--kf-space-md)));max-height:calc(100vh - 2 * var(--kf-space-xl));padding:0;border:none;background:transparent;overflow:visible;font-family:var(--kf-font-body)}.kf-modal::backdrop{background:#171d2573}.kf-modal__panel{display:flex;flex-direction:column;gap:var(--kf-space-md);padding:var(--kf-space-lg);background:var(--kf-color-white);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-lg)}.kf-modal__head{display:flex;align-items:flex-start;gap:var(--kf-space-sm)}.kf-modal__heading{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--kf-space-sm);row-gap:var(--kf-space-xs)}.kf-modal__title{margin:0;font-family:var(--kf-font-title);font-size:1.375rem;font-weight:700;color:var(--kf-color-ink)}.kf-modal__close{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;margin:-4px -6px 0 0;padding:2px;border:none;background:transparent;color:var(--kf-color-text-muted);border-radius:var(--kf-radius-xs);cursor:pointer}.kf-modal__close:after{content:\"\";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)}.kf-modal__close:hover{color:var(--kf-color-ink);background:var(--kf-color-surface)}.kf-modal__close:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-modal__toolbar:empty{display:none}.kf-modal__body{margin:calc(-1 * var(--kf-space-xs));padding:var(--kf-space-xs);color:var(--kf-color-text);overflow-y:auto}.kf-modal__footer:empty{display:none}.kf-modal__footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--kf-space-sm)}.kf-modal__footer-start{margin-right:auto}.kf-modal[data-size=sm]{--kf-modal-width: 480px}.kf-modal[data-size=md]{--kf-modal-width: 640px}.kf-modal[data-size=lg]{--kf-modal-width: 880px}.kf-modal[data-size=xl]{--kf-modal-width: 1120px}.kf-modal--dividers .kf-modal__head{padding-bottom:var(--kf-space-md);border-bottom:1px solid var(--kf-color-border)}.kf-modal--dividers .kf-modal__footer{padding-top:var(--kf-space-md);border-top:1px solid var(--kf-color-border)}.kf-modal--bounded{max-height:min(var(--kf-modal-max-height),calc(100dvh - 2 * var(--kf-space-md)))}.kf-modal--bounded .kf-modal__panel{box-sizing:border-box;max-height:inherit}.kf-modal--bounded .kf-modal__body{flex:1 1 auto;min-height:0;overscroll-behavior:contain}@media(max-width:640px){.kf-modal--fullscreen-mobile{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0}.kf-modal--fullscreen-mobile .kf-modal__panel{box-sizing:border-box;height:100%;max-height:100%;padding:var(--kf-space-md);gap:var(--kf-space-sm);border-radius:0;box-shadow:none}.kf-modal--fullscreen-mobile .kf-modal__body{flex:1 1 auto;min-height:0}.kf-modal--fullscreen-mobile .kf-modal__title{font-size:var(--kf-font-size-title-sm)}}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }] });
|
|
7380
7482
|
}
|
|
7381
7483
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Modal, decorators: [{
|
|
7382
7484
|
type: Component,
|
|
7383
|
-
args: [{ selector: 'kf-modal', imports: [Icon], template: "<dialog\n #dialog\n class=\"kf-modal\"\n [class.kf-modal--bounded]=\"!!maxHeight()\"\n [class.kf-modal--fullscreen-mobile]=\"fullscreenOnMobile()\"\n [style.--kf-modal-width]=\"width()\"\n [style.--kf-modal-max-height]=\"maxHeight()\"\n [attr.aria-labelledby]=\"title() ? titleId : null\"\n (cancel)=\"onCancel($event)\"\n (close)=\"open.set(false)\"\n>\n @if (open()) {\n <div #panel class=\"kf-modal__panel\">\n <div class=\"kf-modal__head\">\n <div class=\"kf-modal__heading\">\n @if (title()) {\n <h2 class=\"kf-modal__title\" [id]=\"titleId\">{{ title() }}</h2>\n }\n <ng-content select=\"[kf-modal-meta]\" />\n </div>\n @if (dismissible()) {\n <button\n type=\"button\"\n class=\"kf-modal__close\"\n aria-label=\"Cerrar di\u00E1logo\"\n (click)=\"open.set(false)\"\n >\n <kf-icon name=\"x\" size=\"sm\" />\n </button>\n }\n </div>\n <div class=\"kf-modal__toolbar\"><ng-content select=\"[kf-modal-toolbar]\" /></div>\n <div class=\"kf-modal__body\"><ng-content /></div>\n <div class=\"kf-modal__footer\"><ng-content select=\"[footer]\" /></div>\n </div>\n }\n</dialog>\n", styles: [".kf-modal{width:min(var(--kf-modal-width, 480px),calc(100vw - 2 * var(--kf-space-md)));max-height:calc(100vh - 2 * var(--kf-space-xl));padding:0;border:none;background:transparent;overflow:visible;font-family:var(--kf-font-body)}.kf-modal::backdrop{background:#171d2573}.kf-modal__panel{display:flex;flex-direction:column;gap:var(--kf-space-md);padding:var(--kf-space-lg);background:var(--kf-color-white);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-lg)}.kf-modal__head{display:flex;align-items:flex-start;gap:var(--kf-space-sm)}.kf-modal__heading{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--kf-space-sm);row-gap:var(--kf-space-xs)}.kf-modal__title{margin:0;font-family:var(--kf-font-title);font-size:1.375rem;font-weight:700;color:var(--kf-color-ink)}.kf-modal__close{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;margin:-4px -6px 0 0;padding:2px;border:none;background:transparent;color:var(--kf-color-text-muted);border-radius:var(--kf-radius-xs);cursor:pointer}.kf-modal__close:hover{color:var(--kf-color-ink);background:var(--kf-color-surface)}.kf-modal__close:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-modal__toolbar:empty{display:none}.kf-modal__body{color:var(--kf-color-text);overflow-y:auto}.kf-modal__footer:empty{display:none}.kf-modal__footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--kf-space-sm)}.kf-modal__footer-start{margin-right:auto}.kf-modal--bounded{max-height:min(var(--kf-modal-max-height),calc(100dvh - 2 * var(--kf-space-md)))}.kf-modal--bounded .kf-modal__panel{box-sizing:border-box;max-height:inherit}.kf-modal--bounded .kf-modal__body{flex:1 1 auto;min-height:0;overscroll-behavior:contain}@media(max-width:640px){.kf-modal--fullscreen-mobile{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0}.kf-modal--fullscreen-mobile .kf-modal__panel{box-sizing:border-box;height:100%;max-height:100%;padding:var(--kf-space-md);gap:var(--kf-space-sm);border-radius:0;box-shadow:none}.kf-modal--fullscreen-mobile .kf-modal__body{flex:1 1 auto;min-height:0}.kf-modal--fullscreen-mobile .kf-modal__title{font-size:var(--kf-font-size-title-sm)}}\n"] }]
|
|
7384
|
-
}], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], fullscreenOnMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreenOnMobile", required: false }] }], initialFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFocus", required: false }] }], dialog: [{ type: i0.ViewChild, args: ['dialog', { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], onHostClick: [{
|
|
7485
|
+
args: [{ selector: 'kf-modal', imports: [Icon], template: "<dialog\n #dialog\n class=\"kf-modal\"\n [class.kf-modal--bounded]=\"!!maxHeight()\"\n [class.kf-modal--fullscreen-mobile]=\"fullscreenOnMobile()\"\n [class.kf-modal--dividers]=\"dividers()\"\n [attr.data-size]=\"size()\"\n [style.--kf-modal-width]=\"width()\"\n [style.--kf-modal-max-height]=\"maxHeight()\"\n [attr.aria-labelledby]=\"title() ? titleId : null\"\n (cancel)=\"onCancel($event)\"\n (close)=\"open.set(false)\"\n>\n @if (open()) {\n <div #panel class=\"kf-modal__panel\">\n <div class=\"kf-modal__head\">\n <div class=\"kf-modal__heading\">\n @if (title()) {\n <h2 class=\"kf-modal__title\" [id]=\"titleId\">{{ title() }}</h2>\n }\n <ng-content select=\"[kf-modal-meta]\" />\n </div>\n @if (dismissible()) {\n <button\n type=\"button\"\n class=\"kf-modal__close\"\n aria-label=\"Cerrar di\u00E1logo\"\n (click)=\"open.set(false)\"\n >\n <kf-icon name=\"x\" size=\"sm\" />\n </button>\n }\n </div>\n <div class=\"kf-modal__toolbar\"><ng-content select=\"[kf-modal-toolbar]\" /></div>\n <div class=\"kf-modal__body\"><ng-content /></div>\n <div class=\"kf-modal__footer\"><ng-content select=\"[footer]\" /></div>\n </div>\n }\n</dialog>\n", styles: [".kf-modal{width:min(var(--kf-modal-width, 480px),calc(100vw - 2 * var(--kf-space-md)));max-height:calc(100vh - 2 * var(--kf-space-xl));padding:0;border:none;background:transparent;overflow:visible;font-family:var(--kf-font-body)}.kf-modal::backdrop{background:#171d2573}.kf-modal__panel{display:flex;flex-direction:column;gap:var(--kf-space-md);padding:var(--kf-space-lg);background:var(--kf-color-white);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-lg)}.kf-modal__head{display:flex;align-items:flex-start;gap:var(--kf-space-sm)}.kf-modal__heading{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--kf-space-sm);row-gap:var(--kf-space-xs)}.kf-modal__title{margin:0;font-family:var(--kf-font-title);font-size:1.375rem;font-weight:700;color:var(--kf-color-ink)}.kf-modal__close{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;margin:-4px -6px 0 0;padding:2px;border:none;background:transparent;color:var(--kf-color-text-muted);border-radius:var(--kf-radius-xs);cursor:pointer}.kf-modal__close:after{content:\"\";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)}.kf-modal__close:hover{color:var(--kf-color-ink);background:var(--kf-color-surface)}.kf-modal__close:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-modal__toolbar:empty{display:none}.kf-modal__body{margin:calc(-1 * var(--kf-space-xs));padding:var(--kf-space-xs);color:var(--kf-color-text);overflow-y:auto}.kf-modal__footer:empty{display:none}.kf-modal__footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--kf-space-sm)}.kf-modal__footer-start{margin-right:auto}.kf-modal[data-size=sm]{--kf-modal-width: 480px}.kf-modal[data-size=md]{--kf-modal-width: 640px}.kf-modal[data-size=lg]{--kf-modal-width: 880px}.kf-modal[data-size=xl]{--kf-modal-width: 1120px}.kf-modal--dividers .kf-modal__head{padding-bottom:var(--kf-space-md);border-bottom:1px solid var(--kf-color-border)}.kf-modal--dividers .kf-modal__footer{padding-top:var(--kf-space-md);border-top:1px solid var(--kf-color-border)}.kf-modal--bounded{max-height:min(var(--kf-modal-max-height),calc(100dvh - 2 * var(--kf-space-md)))}.kf-modal--bounded .kf-modal__panel{box-sizing:border-box;max-height:inherit}.kf-modal--bounded .kf-modal__body{flex:1 1 auto;min-height:0;overscroll-behavior:contain}@media(max-width:640px){.kf-modal--fullscreen-mobile{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0}.kf-modal--fullscreen-mobile .kf-modal__panel{box-sizing:border-box;height:100%;max-height:100%;padding:var(--kf-space-md);gap:var(--kf-space-sm);border-radius:0;box-shadow:none}.kf-modal--fullscreen-mobile .kf-modal__body{flex:1 1 auto;min-height:0}.kf-modal--fullscreen-mobile .kf-modal__title{font-size:var(--kf-font-size-title-sm)}}\n"] }]
|
|
7486
|
+
}], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dividers: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividers", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], fullscreenOnMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreenOnMobile", required: false }] }], initialFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFocus", required: false }] }], dialog: [{ type: i0.ViewChild, args: ['dialog', { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], onHostClick: [{
|
|
7385
7487
|
type: HostListener,
|
|
7386
7488
|
args: ['click', ['$event']]
|
|
7387
7489
|
}] } });
|
|
@@ -8929,8 +9031,16 @@ class SidebarShell {
|
|
|
8929
9031
|
*/
|
|
8930
9032
|
itemsCollapsed = computed(() => this.collapsed() && !this.isMobileViewport(), /* @ts-ignore */
|
|
8931
9033
|
...(ngDevMode ? [{ debugName: "itemsCollapsed" }] : /* istanbul ignore next */ []));
|
|
8932
|
-
/**
|
|
8933
|
-
|
|
9034
|
+
/**
|
|
9035
|
+
* Cierra el panel mobile con Escape — mismo criterio que `Drawer`: si un
|
|
9036
|
+
* panel flotante de adentro (`kf-dropdown`, `kf-select`) ya consumió la
|
|
9037
|
+
* tecla en captura (`defaultPrevented`), el panel mobile sigue abierto y
|
|
9038
|
+
* solo cierra la capa superior.
|
|
9039
|
+
*/
|
|
9040
|
+
onEscape(event) {
|
|
9041
|
+
if (!this.mobileOpen() || event.defaultPrevented) {
|
|
9042
|
+
return;
|
|
9043
|
+
}
|
|
8934
9044
|
this.mobileOpen.set(false);
|
|
8935
9045
|
}
|
|
8936
9046
|
onNavItemClick(event, item) {
|
|
@@ -8939,16 +9049,18 @@ class SidebarShell {
|
|
|
8939
9049
|
this.navItemClick.emit(item);
|
|
8940
9050
|
}
|
|
8941
9051
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SidebarShell, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8942
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: SidebarShell, isStandalone: true, selector: "kf-sidebar-shell", inputs: { navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, mobileOpen: { classPropertyName: "mobileOpen", publicName: "mobileOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", mobileOpen: "mobileOpenChange", navItemClick: "navItemClick" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@if (mobileOpen()) {\n <button\n type=\"button\"\n class=\"kf-sidebar-shell__backdrop\"\n aria-label=\"Cerrar men\u00FA\"\n (click)=\"mobileOpen.set(false)\"\n ></button>\n}\n\n<aside\n class=\"kf-sidebar-shell__rail\"\n [class.kf-sidebar-shell__rail--collapsed]=\"itemsCollapsed()\"\n [class.kf-sidebar-shell__rail--mobile-open]=\"mobileOpen()\"\n>\n <div class=\"kf-sidebar-shell__brand\">\n <div class=\"kf-sidebar-shell__brand-full\">\n <ng-content select=\"[kf-sidebar-brand]\" />\n </div>\n <div class=\"kf-sidebar-shell__brand-collapsed\">\n <ng-content select=\"[kf-sidebar-brand-collapsed]\" />\n </div>\n\n <button\n type=\"button\"\n class=\"kf-sidebar-shell__mobile-close\"\n aria-label=\"Cerrar men\u00FA\"\n (click)=\"mobileOpen.set(false)\"\n >\n <kf-icon name=\"x\" size=\"md\" />\n </button>\n </div>\n\n <nav class=\"kf-sidebar-shell__nav\">\n @for (entry of itemsWithGroupHeader(); track entry.item.href) {\n @if (entry.showGroupLabel && !itemsCollapsed()) {\n <div class=\"kf-sidebar-shell__group-label\">{{ entry.item.groupLabel }}</div>\n }\n <kf-sidebar-nav-item\n [icon]=\"entry.item.icon\"\n [label]=\"entry.item.label\"\n [href]=\"entry.item.href\"\n [active]=\"!!entry.item.active\"\n [collapsed]=\"itemsCollapsed()\"\n (click)=\"onNavItemClick($event, entry.item)\"\n />\n }\n </nav>\n\n <div class=\"kf-sidebar-shell__bottom\">\n <button\n type=\"button\"\n class=\"kf-sidebar-shell__collapse-toggle\"\n [class.kf-sidebar-shell__collapse-toggle--collapsed]=\"itemsCollapsed()\"\n [attr.aria-expanded]=\"!collapsed()\"\n [attr.aria-label]=\"collapsed() ? 'Expandir men\u00FA' : 'Colapsar men\u00FA'\"\n [kfTooltip]=\"itemsCollapsed() ? (collapsed() ? 'Expandir men\u00FA' : 'Colapsar men\u00FA') : ''\"\n (click)=\"collapsed.set(!collapsed())\"\n >\n <kf-icon [name]=\"collapsed() ? 'chevron-right' : 'chevron-left'\" size=\"sm\" />\n @if (!itemsCollapsed()) {\n <span class=\"kf-sidebar-shell__collapse-toggle-label\">\n {{ collapsed() ? 'Expandir men\u00FA' : 'Colapsar men\u00FA' }}\n </span>\n }\n </button>\n\n <div class=\"kf-sidebar-shell__footer\">\n <ng-content select=\"[kf-sidebar-footer]\" />\n </div>\n </div>\n</aside>\n\n<div class=\"kf-sidebar-shell__topbar\">\n <button\n type=\"button\"\n class=\"kf-sidebar-shell__menu-toggle\"\n aria-label=\"Abrir men\u00FA de navegaci\u00F3n\"\n (click)=\"mobileOpen.set(true)\"\n >\n <kf-icon name=\"menu\" size=\"md\" />\n </button>\n <div class=\"kf-sidebar-shell__topbar-brand\">\n <ng-content select=\"[kf-sidebar-brand-mobile]\" />\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:contents}.kf-sidebar-shell__backdrop{display:none}.kf-sidebar-shell__rail{box-sizing:border-box;display:flex;flex-direction:column;position:sticky;top:0;height:100dvh;width:268px;flex:none;padding:var(--kf-space-lg) var(--kf-space-md);background:linear-gradient(190deg,var(--kf-color-sidebar-gradient-from) 0%,var(--kf-color-sidebar-gradient-to) 60%);transition:width .18s ease,padding-inline .18s ease}.kf-sidebar-shell__rail--collapsed{width:56px;padding-inline:var(--kf-space-sm)}.kf-sidebar-shell__brand{display:flex;align-items:center;justify-content:center;margin-bottom:var(--kf-space-xl)}.kf-sidebar-shell__brand-full{display:flex;justify-content:center;min-width:0}.kf-sidebar-shell__brand-full ::ng-deep img{display:block;height:1.5rem}.kf-sidebar-shell__brand-collapsed{display:none;justify-content:center;min-width:0}.kf-sidebar-shell__brand-collapsed ::ng-deep img{display:block;height:1.75rem}.kf-sidebar-shell__rail--collapsed .kf-sidebar-shell__brand-full{display:none}.kf-sidebar-shell__rail--collapsed .kf-sidebar-shell__brand-collapsed{display:flex}.kf-sidebar-shell__mobile-close{display:none;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:var(--kf-radius-sm);background:#ffffff14;color:#fffc;cursor:pointer}.kf-sidebar-shell__mobile-close:hover{background:#ffffff29;color:var(--kf-color-white)}.kf-sidebar-shell__nav{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--kf-space-xs);overflow-y:auto}.kf-sidebar-shell__group-label{margin-top:var(--kf-space-sm);padding:0 var(--kf-space-md);font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fff6;white-space:nowrap;overflow:hidden}.kf-sidebar-shell__nav>.kf-sidebar-shell__group-label:first-child{margin-top:0}.kf-sidebar-shell__bottom{display:flex;flex-direction:column;margin-top:var(--kf-space-sm);padding-top:var(--kf-space-sm);border-top:1px solid rgba(255,255,255,.12)}.kf-sidebar-shell__footer{margin-top:var(--kf-space-sm)}.kf-sidebar-shell__footer:empty{display:none}.kf-sidebar-shell__collapse-toggle{box-sizing:border-box;display:flex;align-items:center;gap:var(--kf-space-sm);width:100%;padding:var(--kf-space-sm) var(--kf-space-md);border:none;border-radius:var(--kf-radius-sm);background:#ffffff0f;color:#ffffffb3;font-family:var(--kf-font-body);font-size:.8125rem;font-weight:600;cursor:pointer;transition:background .14s,color .14s}.kf-sidebar-shell__collapse-toggle:hover{background:#ffffff1f;color:var(--kf-color-white)}.kf-sidebar-shell__collapse-toggle--collapsed{justify-content:center;width:40px;height:40px;padding-inline:0}.kf-sidebar-shell__collapse-toggle-label{flex:1 1 auto;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-sidebar-shell__topbar{display:none}@media(max-width:900px){.kf-sidebar-shell__rail{position:fixed;inset:0 auto 0 0;z-index:100;width:284px;max-width:86vw;transform:translate(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1),box-shadow .26s cubic-bezier(.4,0,.2,1);box-shadow:none}.kf-sidebar-shell__rail--mobile-open{transform:translate(0);box-shadow:var(--kf-shadow-lg)}.kf-sidebar-shell__rail--collapsed{width:284px;max-width:86vw;padding-inline:var(--kf-space-md)}.kf-sidebar-shell__brand{display:grid;grid-template-columns:1fr 2rem;align-items:center}.kf-sidebar-shell__brand-full{grid-column:1;justify-content:flex-start}.kf-sidebar-shell__mobile-close{grid-column:2;display:flex}.kf-sidebar-shell__collapse-toggle{display:none}.kf-sidebar-shell__backdrop{display:block;position:fixed;inset:0;z-index:90;border:none;padding:0;cursor:pointer;background:#0a0e1480}.kf-sidebar-shell__topbar{display:flex;align-items:center;gap:var(--kf-space-md);padding:var(--kf-space-sm) var(--kf-space-lg);background:var(--kf-color-white);border-bottom:1px solid var(--kf-color-border)}.kf-sidebar-shell__menu-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:var(--kf-radius-sm);background:transparent;color:var(--kf-color-ink);cursor:pointer;flex:none}.kf-sidebar-shell__menu-toggle:hover{background:var(--kf-color-surface)}.kf-sidebar-shell__topbar-brand ::ng-deep img{display:block;height:1.25rem}}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "component", type: SidebarNavItem, selector: "kf-sidebar-nav-item", inputs: ["icon", "label", "href", "active", "collapsed"] }, { kind: "directive", type: TooltipDirective, selector: "[kfTooltip]", inputs: ["kfTooltip", "kfTooltipPosition"] }] });
|
|
9052
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: SidebarShell, isStandalone: true, selector: "kf-sidebar-shell", inputs: { navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, mobileOpen: { classPropertyName: "mobileOpen", publicName: "mobileOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", mobileOpen: "mobileOpenChange", navItemClick: "navItemClick" }, host: { listeners: { "document:keydown.escape": "onEscape($event)" } }, ngImport: i0, template: "@if (mobileOpen()) {\n <button\n type=\"button\"\n class=\"kf-sidebar-shell__backdrop\"\n aria-label=\"Cerrar men\u00FA\"\n (click)=\"mobileOpen.set(false)\"\n ></button>\n}\n\n<aside\n class=\"kf-sidebar-shell__rail\"\n [class.kf-sidebar-shell__rail--collapsed]=\"itemsCollapsed()\"\n [class.kf-sidebar-shell__rail--mobile-open]=\"mobileOpen()\"\n>\n <div class=\"kf-sidebar-shell__brand\">\n <div class=\"kf-sidebar-shell__brand-full\">\n <ng-content select=\"[kf-sidebar-brand]\" />\n </div>\n <div class=\"kf-sidebar-shell__brand-collapsed\">\n <ng-content select=\"[kf-sidebar-brand-collapsed]\" />\n </div>\n\n <button\n type=\"button\"\n class=\"kf-sidebar-shell__mobile-close\"\n aria-label=\"Cerrar men\u00FA\"\n (click)=\"mobileOpen.set(false)\"\n >\n <kf-icon name=\"x\" size=\"md\" />\n </button>\n </div>\n\n <nav class=\"kf-sidebar-shell__nav\">\n @for (entry of itemsWithGroupHeader(); track entry.item.href) {\n @if (entry.showGroupLabel && !itemsCollapsed()) {\n <div class=\"kf-sidebar-shell__group-label\">{{ entry.item.groupLabel }}</div>\n }\n <kf-sidebar-nav-item\n [icon]=\"entry.item.icon\"\n [label]=\"entry.item.label\"\n [href]=\"entry.item.href\"\n [active]=\"!!entry.item.active\"\n [collapsed]=\"itemsCollapsed()\"\n (click)=\"onNavItemClick($event, entry.item)\"\n />\n }\n </nav>\n\n <div class=\"kf-sidebar-shell__bottom\">\n <button\n type=\"button\"\n class=\"kf-sidebar-shell__collapse-toggle\"\n [class.kf-sidebar-shell__collapse-toggle--collapsed]=\"itemsCollapsed()\"\n [attr.aria-expanded]=\"!collapsed()\"\n [attr.aria-label]=\"collapsed() ? 'Expandir men\u00FA' : 'Colapsar men\u00FA'\"\n [kfTooltip]=\"itemsCollapsed() ? (collapsed() ? 'Expandir men\u00FA' : 'Colapsar men\u00FA') : ''\"\n (click)=\"collapsed.set(!collapsed())\"\n >\n <kf-icon [name]=\"collapsed() ? 'chevron-right' : 'chevron-left'\" size=\"sm\" />\n @if (!itemsCollapsed()) {\n <span class=\"kf-sidebar-shell__collapse-toggle-label\">\n {{ collapsed() ? 'Expandir men\u00FA' : 'Colapsar men\u00FA' }}\n </span>\n }\n </button>\n\n <div class=\"kf-sidebar-shell__footer\">\n <ng-content select=\"[kf-sidebar-footer]\" />\n </div>\n </div>\n</aside>\n\n<div class=\"kf-sidebar-shell__topbar\">\n <button\n type=\"button\"\n class=\"kf-sidebar-shell__menu-toggle\"\n aria-label=\"Abrir men\u00FA de navegaci\u00F3n\"\n (click)=\"mobileOpen.set(true)\"\n >\n <kf-icon name=\"menu\" size=\"md\" />\n </button>\n <div class=\"kf-sidebar-shell__topbar-brand\">\n <ng-content select=\"[kf-sidebar-brand-mobile]\" />\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:contents}.kf-sidebar-shell__backdrop{display:none}.kf-sidebar-shell__rail{box-sizing:border-box;display:flex;flex-direction:column;position:sticky;top:0;height:100dvh;width:268px;flex:none;padding:var(--kf-space-lg) var(--kf-space-md);background:linear-gradient(190deg,var(--kf-color-sidebar-gradient-from) 0%,var(--kf-color-sidebar-gradient-to) 60%);transition:width .18s ease,padding-inline .18s ease}.kf-sidebar-shell__rail--collapsed{width:56px;padding-inline:var(--kf-space-sm)}.kf-sidebar-shell__brand{display:flex;align-items:center;justify-content:center;margin-bottom:var(--kf-space-xl)}.kf-sidebar-shell__brand-full{display:flex;justify-content:center;min-width:0}.kf-sidebar-shell__brand-full ::ng-deep img{display:block;height:1.5rem}.kf-sidebar-shell__brand-collapsed{display:none;justify-content:center;min-width:0}.kf-sidebar-shell__brand-collapsed ::ng-deep img{display:block;height:1.75rem}.kf-sidebar-shell__rail--collapsed .kf-sidebar-shell__brand-full{display:none}.kf-sidebar-shell__rail--collapsed .kf-sidebar-shell__brand-collapsed{display:flex}.kf-sidebar-shell__mobile-close{display:none;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:var(--kf-radius-sm);background:#ffffff14;color:#fffc;cursor:pointer}.kf-sidebar-shell__mobile-close:hover{background:#ffffff29;color:var(--kf-color-white)}.kf-sidebar-shell__nav{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--kf-space-xs);overflow-y:auto}.kf-sidebar-shell__group-label{margin-top:var(--kf-space-sm);padding:0 var(--kf-space-md);font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fff6;white-space:nowrap;overflow:hidden}.kf-sidebar-shell__nav>.kf-sidebar-shell__group-label:first-child{margin-top:0}.kf-sidebar-shell__bottom{display:flex;flex-direction:column;margin-top:var(--kf-space-sm);padding-top:var(--kf-space-sm);border-top:1px solid rgba(255,255,255,.12)}.kf-sidebar-shell__footer{margin-top:var(--kf-space-sm)}.kf-sidebar-shell__footer:empty{display:none}.kf-sidebar-shell__collapse-toggle{box-sizing:border-box;display:flex;align-items:center;gap:var(--kf-space-sm);width:100%;padding:var(--kf-space-sm) var(--kf-space-md);border:none;border-radius:var(--kf-radius-sm);background:#ffffff0f;color:#ffffffb3;font-family:var(--kf-font-body);font-size:.8125rem;font-weight:600;cursor:pointer;transition:background .14s,color .14s}.kf-sidebar-shell__collapse-toggle:hover{background:#ffffff1f;color:var(--kf-color-white)}.kf-sidebar-shell__collapse-toggle--collapsed{justify-content:center;width:40px;height:40px;padding-inline:0}.kf-sidebar-shell__collapse-toggle-label{flex:1 1 auto;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-sidebar-shell__topbar{display:none}@media(max-width:900px){.kf-sidebar-shell__rail{position:fixed;inset:0 auto 0 0;z-index:100;width:284px;max-width:86vw;transform:translate(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1),box-shadow .26s cubic-bezier(.4,0,.2,1);box-shadow:none}.kf-sidebar-shell__rail--mobile-open{transform:translate(0);box-shadow:var(--kf-shadow-lg)}.kf-sidebar-shell__rail--collapsed{width:284px;max-width:86vw;padding-inline:var(--kf-space-md)}.kf-sidebar-shell__brand{display:grid;grid-template-columns:1fr 2rem;align-items:center}.kf-sidebar-shell__brand-full{grid-column:1;justify-content:flex-start}.kf-sidebar-shell__mobile-close{grid-column:2;display:flex}.kf-sidebar-shell__collapse-toggle{display:none}.kf-sidebar-shell__backdrop{display:block;position:fixed;inset:0;z-index:90;border:none;padding:0;cursor:pointer;background:#0a0e1480}.kf-sidebar-shell__topbar{display:flex;align-items:center;gap:var(--kf-space-md);padding:var(--kf-space-sm) var(--kf-space-lg);background:var(--kf-color-white);border-bottom:1px solid var(--kf-color-border)}.kf-sidebar-shell__menu-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:var(--kf-radius-sm);background:transparent;color:var(--kf-color-ink);cursor:pointer;flex:none}.kf-sidebar-shell__menu-toggle:hover{background:var(--kf-color-surface)}.kf-sidebar-shell__topbar-brand ::ng-deep img{display:block;height:1.25rem}}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "component", type: SidebarNavItem, selector: "kf-sidebar-nav-item", inputs: ["icon", "label", "href", "active", "collapsed"] }, { kind: "directive", type: TooltipDirective, selector: "[kfTooltip]", inputs: ["kfTooltip", "kfTooltipPosition"] }] });
|
|
8943
9053
|
}
|
|
8944
9054
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SidebarShell, decorators: [{
|
|
8945
9055
|
type: Component,
|
|
8946
9056
|
args: [{ selector: 'kf-sidebar-shell', imports: [Icon, SidebarNavItem, TooltipDirective], template: "@if (mobileOpen()) {\n <button\n type=\"button\"\n class=\"kf-sidebar-shell__backdrop\"\n aria-label=\"Cerrar men\u00FA\"\n (click)=\"mobileOpen.set(false)\"\n ></button>\n}\n\n<aside\n class=\"kf-sidebar-shell__rail\"\n [class.kf-sidebar-shell__rail--collapsed]=\"itemsCollapsed()\"\n [class.kf-sidebar-shell__rail--mobile-open]=\"mobileOpen()\"\n>\n <div class=\"kf-sidebar-shell__brand\">\n <div class=\"kf-sidebar-shell__brand-full\">\n <ng-content select=\"[kf-sidebar-brand]\" />\n </div>\n <div class=\"kf-sidebar-shell__brand-collapsed\">\n <ng-content select=\"[kf-sidebar-brand-collapsed]\" />\n </div>\n\n <button\n type=\"button\"\n class=\"kf-sidebar-shell__mobile-close\"\n aria-label=\"Cerrar men\u00FA\"\n (click)=\"mobileOpen.set(false)\"\n >\n <kf-icon name=\"x\" size=\"md\" />\n </button>\n </div>\n\n <nav class=\"kf-sidebar-shell__nav\">\n @for (entry of itemsWithGroupHeader(); track entry.item.href) {\n @if (entry.showGroupLabel && !itemsCollapsed()) {\n <div class=\"kf-sidebar-shell__group-label\">{{ entry.item.groupLabel }}</div>\n }\n <kf-sidebar-nav-item\n [icon]=\"entry.item.icon\"\n [label]=\"entry.item.label\"\n [href]=\"entry.item.href\"\n [active]=\"!!entry.item.active\"\n [collapsed]=\"itemsCollapsed()\"\n (click)=\"onNavItemClick($event, entry.item)\"\n />\n }\n </nav>\n\n <div class=\"kf-sidebar-shell__bottom\">\n <button\n type=\"button\"\n class=\"kf-sidebar-shell__collapse-toggle\"\n [class.kf-sidebar-shell__collapse-toggle--collapsed]=\"itemsCollapsed()\"\n [attr.aria-expanded]=\"!collapsed()\"\n [attr.aria-label]=\"collapsed() ? 'Expandir men\u00FA' : 'Colapsar men\u00FA'\"\n [kfTooltip]=\"itemsCollapsed() ? (collapsed() ? 'Expandir men\u00FA' : 'Colapsar men\u00FA') : ''\"\n (click)=\"collapsed.set(!collapsed())\"\n >\n <kf-icon [name]=\"collapsed() ? 'chevron-right' : 'chevron-left'\" size=\"sm\" />\n @if (!itemsCollapsed()) {\n <span class=\"kf-sidebar-shell__collapse-toggle-label\">\n {{ collapsed() ? 'Expandir men\u00FA' : 'Colapsar men\u00FA' }}\n </span>\n }\n </button>\n\n <div class=\"kf-sidebar-shell__footer\">\n <ng-content select=\"[kf-sidebar-footer]\" />\n </div>\n </div>\n</aside>\n\n<div class=\"kf-sidebar-shell__topbar\">\n <button\n type=\"button\"\n class=\"kf-sidebar-shell__menu-toggle\"\n aria-label=\"Abrir men\u00FA de navegaci\u00F3n\"\n (click)=\"mobileOpen.set(true)\"\n >\n <kf-icon name=\"menu\" size=\"md\" />\n </button>\n <div class=\"kf-sidebar-shell__topbar-brand\">\n <ng-content select=\"[kf-sidebar-brand-mobile]\" />\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:contents}.kf-sidebar-shell__backdrop{display:none}.kf-sidebar-shell__rail{box-sizing:border-box;display:flex;flex-direction:column;position:sticky;top:0;height:100dvh;width:268px;flex:none;padding:var(--kf-space-lg) var(--kf-space-md);background:linear-gradient(190deg,var(--kf-color-sidebar-gradient-from) 0%,var(--kf-color-sidebar-gradient-to) 60%);transition:width .18s ease,padding-inline .18s ease}.kf-sidebar-shell__rail--collapsed{width:56px;padding-inline:var(--kf-space-sm)}.kf-sidebar-shell__brand{display:flex;align-items:center;justify-content:center;margin-bottom:var(--kf-space-xl)}.kf-sidebar-shell__brand-full{display:flex;justify-content:center;min-width:0}.kf-sidebar-shell__brand-full ::ng-deep img{display:block;height:1.5rem}.kf-sidebar-shell__brand-collapsed{display:none;justify-content:center;min-width:0}.kf-sidebar-shell__brand-collapsed ::ng-deep img{display:block;height:1.75rem}.kf-sidebar-shell__rail--collapsed .kf-sidebar-shell__brand-full{display:none}.kf-sidebar-shell__rail--collapsed .kf-sidebar-shell__brand-collapsed{display:flex}.kf-sidebar-shell__mobile-close{display:none;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:var(--kf-radius-sm);background:#ffffff14;color:#fffc;cursor:pointer}.kf-sidebar-shell__mobile-close:hover{background:#ffffff29;color:var(--kf-color-white)}.kf-sidebar-shell__nav{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--kf-space-xs);overflow-y:auto}.kf-sidebar-shell__group-label{margin-top:var(--kf-space-sm);padding:0 var(--kf-space-md);font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fff6;white-space:nowrap;overflow:hidden}.kf-sidebar-shell__nav>.kf-sidebar-shell__group-label:first-child{margin-top:0}.kf-sidebar-shell__bottom{display:flex;flex-direction:column;margin-top:var(--kf-space-sm);padding-top:var(--kf-space-sm);border-top:1px solid rgba(255,255,255,.12)}.kf-sidebar-shell__footer{margin-top:var(--kf-space-sm)}.kf-sidebar-shell__footer:empty{display:none}.kf-sidebar-shell__collapse-toggle{box-sizing:border-box;display:flex;align-items:center;gap:var(--kf-space-sm);width:100%;padding:var(--kf-space-sm) var(--kf-space-md);border:none;border-radius:var(--kf-radius-sm);background:#ffffff0f;color:#ffffffb3;font-family:var(--kf-font-body);font-size:.8125rem;font-weight:600;cursor:pointer;transition:background .14s,color .14s}.kf-sidebar-shell__collapse-toggle:hover{background:#ffffff1f;color:var(--kf-color-white)}.kf-sidebar-shell__collapse-toggle--collapsed{justify-content:center;width:40px;height:40px;padding-inline:0}.kf-sidebar-shell__collapse-toggle-label{flex:1 1 auto;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-sidebar-shell__topbar{display:none}@media(max-width:900px){.kf-sidebar-shell__rail{position:fixed;inset:0 auto 0 0;z-index:100;width:284px;max-width:86vw;transform:translate(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1),box-shadow .26s cubic-bezier(.4,0,.2,1);box-shadow:none}.kf-sidebar-shell__rail--mobile-open{transform:translate(0);box-shadow:var(--kf-shadow-lg)}.kf-sidebar-shell__rail--collapsed{width:284px;max-width:86vw;padding-inline:var(--kf-space-md)}.kf-sidebar-shell__brand{display:grid;grid-template-columns:1fr 2rem;align-items:center}.kf-sidebar-shell__brand-full{grid-column:1;justify-content:flex-start}.kf-sidebar-shell__mobile-close{grid-column:2;display:flex}.kf-sidebar-shell__collapse-toggle{display:none}.kf-sidebar-shell__backdrop{display:block;position:fixed;inset:0;z-index:90;border:none;padding:0;cursor:pointer;background:#0a0e1480}.kf-sidebar-shell__topbar{display:flex;align-items:center;gap:var(--kf-space-md);padding:var(--kf-space-sm) var(--kf-space-lg);background:var(--kf-color-white);border-bottom:1px solid var(--kf-color-border)}.kf-sidebar-shell__menu-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:var(--kf-radius-sm);background:transparent;color:var(--kf-color-ink);cursor:pointer;flex:none}.kf-sidebar-shell__menu-toggle:hover{background:var(--kf-color-surface)}.kf-sidebar-shell__topbar-brand ::ng-deep img{display:block;height:1.25rem}}\n"] }]
|
|
8947
9057
|
}], propDecorators: { navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], mobileOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileOpen", required: false }] }, { type: i0.Output, args: ["mobileOpenChange"] }], navItemClick: [{ type: i0.Output, args: ["navItemClick"] }], onEscape: [{
|
|
8948
9058
|
type: HostListener,
|
|
8949
|
-
args: ['document:keydown.escape']
|
|
9059
|
+
args: ['document:keydown.escape', ['$event']]
|
|
8950
9060
|
}] } });
|
|
8951
9061
|
|
|
9062
|
+
const INTERACTIVE_CONTENT = 'a, button, input, select, textarea, label, [tabindex], ' +
|
|
9063
|
+
'[role="button"], [role="link"], [role="checkbox"], [role="switch"]';
|
|
8952
9064
|
/**
|
|
8953
9065
|
* Indicador numérico compacto: label + valor grande con ícono, para grillas
|
|
8954
9066
|
* densas de KPIs. Con `cta` en vez de `value` se convierte en un bloque de
|
|
@@ -8964,6 +9076,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
8964
9076
|
* <kf-stat-tile label="Estado" hasProjectedValue>
|
|
8965
9077
|
* <kf-badge valueContent [tone]="stateTone()">{{ stateLabel() }}</kf-badge>
|
|
8966
9078
|
* </kf-stat-tile>
|
|
9079
|
+
*
|
|
9080
|
+
* `interactive` convierte el tile en un botón (`role="button"`, enfocable,
|
|
9081
|
+
* Enter y Espacio) que emite `tileClick`: para un KPI que filtra o despliega
|
|
9082
|
+
* algo. El click sobre un control proyectado dentro del tile (link, botón,
|
|
9083
|
+
* campo) no emite `tileClick`; el de texto común sí. `pressed`
|
|
9084
|
+
* (`aria-pressed`) lo vuelve un botón de alternancia, útil como filtro; `expanded` (`aria-expanded`) indica que controla un panel
|
|
9085
|
+
* desplegable. Ambos son `boolean | null`: `null` (default) no emite el
|
|
9086
|
+
* atributo. El estado `pressed` se marca con un borde y el anillo
|
|
9087
|
+
* `--kf-stat-tile-ring`; el foco de teclado usa `--kf-shadow-focus`. Sin
|
|
9088
|
+
* `interactive` el tile se comporta exactamente como antes (los demás inputs
|
|
9089
|
+
* se ignoran), y con `cta` tampoco aplica: ya contiene su propio link.
|
|
9090
|
+
*
|
|
9091
|
+
* Distinto de `kf-stat-card` (`clickable` + `pressed`): esa card tiene el
|
|
9092
|
+
* ícono circular a la izquierda y un chevron; el tile conserva label arriba,
|
|
9093
|
+
* ícono a la derecha, valor y nota, y suma `expanded`.
|
|
9094
|
+
*
|
|
9095
|
+
* <kf-stat-tile interactive label="En ruta" value="12" icon="truck"
|
|
9096
|
+
* [pressed]="filter() === 'route'" (tileClick)="toggleFilter('route')" />
|
|
8967
9097
|
*/
|
|
8968
9098
|
class StatTile {
|
|
8969
9099
|
cta = input(false, { ...(ngDevMode ? { debugName: "cta" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
@@ -8981,6 +9111,11 @@ class StatTile {
|
|
|
8981
9111
|
/** Tercera línea bajo el valor. Vacía cae en `notePlaceholder`. */
|
|
8982
9112
|
note = input(/* @ts-ignore */
|
|
8983
9113
|
...(ngDevMode ? [undefined, { debugName: "note" }] : /* istanbul ignore next */ []));
|
|
9114
|
+
/** Máximo de líneas visibles de la nota antes de la elipsis (`…`); el texto
|
|
9115
|
+
* completo sigue en el DOM y en el `title`. Default 2, como siempre. Un
|
|
9116
|
+
* valor menor a 1 o no numérico no limita la altura: la nota se muestra
|
|
9117
|
+
* entera. */
|
|
9118
|
+
noteLines = input(2, { ...(ngDevMode ? { debugName: "noteLines" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
8984
9119
|
/** Qué dice la tercera línea cuando no hay nota. Cada consumidor debería
|
|
8985
9120
|
* pasar el motivo real de SU dato ausente, no un texto genérico. */
|
|
8986
9121
|
notePlaceholder = input(/* @ts-ignore */
|
|
@@ -9006,22 +9141,91 @@ class StatTile {
|
|
|
9006
9141
|
* que `actionClick` de `kf-panel`, sin depender de `@angular/router`.
|
|
9007
9142
|
*/
|
|
9008
9143
|
actionClick = output();
|
|
9144
|
+
/** Convierte el tile en un botón; ver la descripción de la clase. */
|
|
9145
|
+
interactive = input(false, { ...(ngDevMode ? { debugName: "interactive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
9146
|
+
/** Estado de alternancia (`aria-pressed`); `null` = no aplica. */
|
|
9147
|
+
pressed = input(null, /* @ts-ignore */
|
|
9148
|
+
...(ngDevMode ? [{ debugName: "pressed" }] : /* istanbul ignore next */ []));
|
|
9149
|
+
/** El tile controla un panel (`aria-expanded`); `null` = no aplica. */
|
|
9150
|
+
expanded = input(null, /* @ts-ignore */
|
|
9151
|
+
...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
|
|
9152
|
+
/** Activación del tile interactivo: click, Enter o Espacio. */
|
|
9153
|
+
tileClick = output();
|
|
9154
|
+
/** La variante CTA ya tiene su propio link: no puede ser además un botón. */
|
|
9155
|
+
isInteractive = computed(() => this.interactive() && !this.cta(), /* @ts-ignore */
|
|
9156
|
+
...(ngDevMode ? [{ debugName: "isInteractive" }] : /* istanbul ignore next */ []));
|
|
9009
9157
|
/** Texto real de la nota. `null` significa "no reservar la línea": pasa
|
|
9010
9158
|
* solo cuando el consumidor no declaró ni nota ni placeholder. */
|
|
9011
9159
|
noteText = computed(() => this.note() || this.notePlaceholder() || null, /* @ts-ignore */
|
|
9012
9160
|
...(ngDevMode ? [{ debugName: "noteText" }] : /* istanbul ignore next */ []));
|
|
9161
|
+
onActivate(event) {
|
|
9162
|
+
if (this.isInteractive() && !this.isFromProjectedControl(event)) {
|
|
9163
|
+
this.tileClick.emit();
|
|
9164
|
+
}
|
|
9165
|
+
}
|
|
9166
|
+
/**
|
|
9167
|
+
* Un control proyectado dentro del tile (link, botón, campo…) tiene su
|
|
9168
|
+
* propia acción: su click no debe contar como activar el tile. El texto o
|
|
9169
|
+
* los spans comunes sí activan, por eso se busca el control con `closest`
|
|
9170
|
+
* y no se compara `target` con `currentTarget`.
|
|
9171
|
+
*/
|
|
9172
|
+
isFromProjectedControl(event) {
|
|
9173
|
+
const host = event.currentTarget;
|
|
9174
|
+
const target = event.target;
|
|
9175
|
+
if (!(target instanceof Element)) {
|
|
9176
|
+
return false;
|
|
9177
|
+
}
|
|
9178
|
+
const control = target.closest(INTERACTIVE_CONTENT);
|
|
9179
|
+
return !!control && control !== host && host.contains(control);
|
|
9180
|
+
}
|
|
9181
|
+
/**
|
|
9182
|
+
* Teclado de un botón nativo: Enter activa al presionar y Espacio al soltar
|
|
9183
|
+
* (en `keydown` solo se frena el scroll de la página). Solo cuenta cuando el
|
|
9184
|
+
* foco está en el propio tile, no en contenido proyectado dentro de él.
|
|
9185
|
+
*/
|
|
9186
|
+
onKeydown(event) {
|
|
9187
|
+
if (!this.isInteractive() || event.target !== event.currentTarget) {
|
|
9188
|
+
return;
|
|
9189
|
+
}
|
|
9190
|
+
if (event.key === 'Enter') {
|
|
9191
|
+
event.preventDefault();
|
|
9192
|
+
this.tileClick.emit();
|
|
9193
|
+
}
|
|
9194
|
+
else if (event.key === ' ') {
|
|
9195
|
+
event.preventDefault();
|
|
9196
|
+
}
|
|
9197
|
+
}
|
|
9198
|
+
onKeyup(event) {
|
|
9199
|
+
if (this.isInteractive() && event.target === event.currentTarget && event.key === ' ') {
|
|
9200
|
+
this.tileClick.emit();
|
|
9201
|
+
}
|
|
9202
|
+
}
|
|
9203
|
+
/** Valor de `line-clamp`: entero ≥ 1, o `none` para mostrar la nota entera. */
|
|
9204
|
+
noteClamp = computed(() => {
|
|
9205
|
+
const lines = Math.floor(this.noteLines());
|
|
9206
|
+
return lines >= 1 ? String(lines) : 'none';
|
|
9207
|
+
}, /* @ts-ignore */
|
|
9208
|
+
...(ngDevMode ? [{ debugName: "noteClamp" }] : /* istanbul ignore next */ []));
|
|
9013
9209
|
noteIsPlaceholder = computed(() => !this.note() && !!this.notePlaceholder(), /* @ts-ignore */
|
|
9014
9210
|
...(ngDevMode ? [{ debugName: "noteIsPlaceholder" }] : /* istanbul ignore next */ []));
|
|
9015
9211
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StatTile, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9016
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: StatTile, isStandalone: true, selector: "kf-stat-tile", inputs: { cta: { classPropertyName: "cta", publicName: "cta", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, note: { classPropertyName: "note", publicName: "note", isSignal: true, isRequired: false, transformFunction: null }, notePlaceholder: { classPropertyName: "notePlaceholder", publicName: "notePlaceholder", isSignal: true, isRequired: false, transformFunction: null }, valueMissing: { classPropertyName: "valueMissing", publicName: "valueMissing", isSignal: true, isRequired: false, transformFunction: null }, hasProjectedValue: { classPropertyName: "hasProjectedValue", publicName: "hasProjectedValue", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, actionHref: { classPropertyName: "actionHref", publicName: "actionHref", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick" }, host: { properties: { "class.kf-stat-tile--cta": "cta()", "class.kf-stat-tile--inline": "!cta() && variant() === \"inline\"" } }, ngImport: i0, template: "@if (cta()) {\n <span class=\"kf-stat-tile__cta-title\">{{ title() }}</span>\n @if (description()) {\n <span class=\"kf-stat-tile__cta-description\">{{ description() }}</span>\n }\n @if (actionLabel()) {\n <kf-link\n class=\"kf-stat-tile__cta-action\"\n [href]=\"actionHref() || '#'\"\n showArrow\n (click)=\"actionClick.emit($event)\"\n >\n {{ actionLabel() }}\n </kf-link>\n }\n} @else {\n <div class=\"kf-stat-tile__head\">\n <!-- El label recibe la clase de tone adem\u00E1s del value: juntos forman\n una sola unidad de lectura, y pintar solo el n\u00FAmero la romper\u00EDa. -->\n <span\n class=\"kf-stat-tile__label\"\n [class.kf-stat-tile__label--ok]=\"tone() === 'ok'\"\n [class.kf-stat-tile__label--warn]=\"tone() === 'warn'\"\n [class.kf-stat-tile__label--error]=\"tone() === 'error'\"\n [class.kf-stat-tile__label--info]=\"tone() === 'info'\"\n >{{ label() }}</span\n >\n @if (icon(); as iconName) {\n <span class=\"kf-stat-tile__icon\">\n <kf-icon [name]=\"iconName\" size=\"sm\" />\n </span>\n }\n </div>\n @if (hasProjectedValue()) {\n <!-- Slot para un valor que no es texto medido (ej. un `kf-badge` de\n estado) \u2014 mismo bloque `__value`, sin las clases de tono, que en ese\n caso las resuelve el propio contenido proyectado (el badge trae su\n tono). -->\n <span class=\"kf-stat-tile__value kf-stat-tile__value--projected\">\n <ng-content select=\"[valueContent]\" />\n </span>\n } @else {\n <span\n class=\"kf-stat-tile__value\"\n [class.kf-stat-tile__value--ok]=\"tone() === 'ok'\"\n [class.kf-stat-tile__value--warn]=\"tone() === 'warn'\"\n [class.kf-stat-tile__value--error]=\"tone() === 'error'\"\n [class.kf-stat-tile__value--info]=\"tone() === 'info'\"\n [class.kf-stat-tile__value--missing]=\"valueMissing()\"\n >{{ value() }}</span\n >\n }\n\n <!-- La l\u00EDnea se reserva con o sin nota: un tile m\u00E1s corto desalinea la\n fila. El `title` deja disponible el texto completo, recortado a
|
|
9212
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: StatTile, isStandalone: true, selector: "kf-stat-tile", inputs: { cta: { classPropertyName: "cta", publicName: "cta", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, note: { classPropertyName: "note", publicName: "note", isSignal: true, isRequired: false, transformFunction: null }, noteLines: { classPropertyName: "noteLines", publicName: "noteLines", isSignal: true, isRequired: false, transformFunction: null }, notePlaceholder: { classPropertyName: "notePlaceholder", publicName: "notePlaceholder", isSignal: true, isRequired: false, transformFunction: null }, valueMissing: { classPropertyName: "valueMissing", publicName: "valueMissing", isSignal: true, isRequired: false, transformFunction: null }, hasProjectedValue: { classPropertyName: "hasProjectedValue", publicName: "hasProjectedValue", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, actionHref: { classPropertyName: "actionHref", publicName: "actionHref", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick", tileClick: "tileClick" }, host: { listeners: { "click": "onActivate($event)", "keydown": "onKeydown($event)", "keyup": "onKeyup($event)" }, properties: { "class.kf-stat-tile--cta": "cta()", "class.kf-stat-tile--inline": "!cta() && variant() === \"inline\"", "class.kf-stat-tile--interactive": "isInteractive()", "attr.role": "isInteractive() ? \"button\" : null", "attr.tabindex": "isInteractive() ? 0 : null", "attr.aria-pressed": "isInteractive() ? pressed() : null", "attr.aria-expanded": "isInteractive() ? expanded() : null" } }, ngImport: i0, template: "@if (cta()) {\n <span class=\"kf-stat-tile__cta-title\">{{ title() }}</span>\n @if (description()) {\n <span class=\"kf-stat-tile__cta-description\">{{ description() }}</span>\n }\n @if (actionLabel()) {\n <kf-link\n class=\"kf-stat-tile__cta-action\"\n [href]=\"actionHref() || '#'\"\n showArrow\n (click)=\"actionClick.emit($event)\"\n >\n {{ actionLabel() }}\n </kf-link>\n }\n} @else {\n <div class=\"kf-stat-tile__head\">\n <!-- El label recibe la clase de tone adem\u00E1s del value: juntos forman\n una sola unidad de lectura, y pintar solo el n\u00FAmero la romper\u00EDa. -->\n <span\n class=\"kf-stat-tile__label\"\n [class.kf-stat-tile__label--ok]=\"tone() === 'ok'\"\n [class.kf-stat-tile__label--warn]=\"tone() === 'warn'\"\n [class.kf-stat-tile__label--error]=\"tone() === 'error'\"\n [class.kf-stat-tile__label--info]=\"tone() === 'info'\"\n >{{ label() }}</span\n >\n @if (icon(); as iconName) {\n <span class=\"kf-stat-tile__icon\">\n <kf-icon [name]=\"iconName\" size=\"sm\" />\n </span>\n }\n </div>\n @if (hasProjectedValue()) {\n <!-- Slot para un valor que no es texto medido (ej. un `kf-badge` de\n estado) \u2014 mismo bloque `__value`, sin las clases de tono, que en ese\n caso las resuelve el propio contenido proyectado (el badge trae su\n tono). -->\n <span class=\"kf-stat-tile__value kf-stat-tile__value--projected\">\n <ng-content select=\"[valueContent]\" />\n </span>\n } @else {\n <span\n class=\"kf-stat-tile__value\"\n [class.kf-stat-tile__value--ok]=\"tone() === 'ok'\"\n [class.kf-stat-tile__value--warn]=\"tone() === 'warn'\"\n [class.kf-stat-tile__value--error]=\"tone() === 'error'\"\n [class.kf-stat-tile__value--info]=\"tone() === 'info'\"\n [class.kf-stat-tile__value--missing]=\"valueMissing()\"\n >{{ value() }}</span\n >\n }\n\n <!-- La l\u00EDnea se reserva con o sin nota: un tile m\u00E1s corto desalinea la\n fila. El `title` deja disponible el texto completo, recortado a `noteLines`\n l\u00EDneas (2 por defecto). -->\n @if (noteText(); as note) {\n <span\n class=\"kf-stat-tile__note\"\n [class.kf-stat-tile__note--empty]=\"noteIsPlaceholder()\"\n [style.--kf-stat-tile-note-lines]=\"noteClamp()\"\n [title]=\"note\"\n >{{ note }}</span\n >\n }\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--kf-space-xs);padding:var(--kf-space-md);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);height:100%;min-width:0}:host(.kf-stat-tile--cta){background:var(--kf-color-surface);gap:2px}:host(.kf-stat-tile--inline){flex-direction:row-reverse;align-items:baseline;height:auto;gap:6px;padding:0;border:none;border-radius:0;background:transparent}:host(.kf-stat-tile--inline) .kf-stat-tile__head{width:auto}.kf-stat-tile__head{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-xs)}.kf-stat-tile__label{font-size:var(--kf-font-size-label);color:var(--kf-color-text-muted)}.kf-stat-tile__icon{display:inline-flex;color:var(--kf-color-primary)}.kf-stat-tile__value{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-md);font-weight:700;color:var(--kf-color-ink)}.kf-stat-tile__value--projected{display:flex;align-items:center;font-size:initial;font-weight:initial;color:initial}.kf-stat-tile__value--ok,.kf-stat-tile__label--ok{color:var(--kf-color-success-strong)}.kf-stat-tile__value--warn,.kf-stat-tile__label--warn{color:var(--kf-color-warning-strong)}.kf-stat-tile__value--error,.kf-stat-tile__label--error{color:var(--kf-color-error-strong)}.kf-stat-tile__value--info,.kf-stat-tile__label--info{color:var(--kf-color-info-strong)}.kf-stat-tile__value--missing{font-family:var(--kf-font-body);font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-body);font-style:italic;color:var(--kf-color-text-muted)}.kf-stat-tile__note{display:-webkit-box;-webkit-line-clamp:var(--kf-stat-tile-note-lines, 2);line-clamp:var(--kf-stat-tile-note-lines, 2);-webkit-box-orient:vertical;overflow:hidden;font-size:var(--kf-font-size-caption);color:var(--kf-color-text-muted);margin-top:auto}.kf-stat-tile__note--empty{font-style:italic;opacity:.75}.kf-stat-tile__cta-title{font-family:var(--kf-font-title);font-weight:700;color:var(--kf-color-ink)}.kf-stat-tile__cta-description{font-size:var(--kf-font-size-label);color:var(--kf-color-text-muted)}.kf-stat-tile__cta-action{margin-top:var(--kf-space-xs);font-size:var(--kf-font-size-label);font-weight:600}:host(.kf-stat-tile--interactive){cursor:pointer;text-align:start;transition:border-color .14s,background-color .14s,box-shadow .14s}@media(hover:hover){:host(.kf-stat-tile--interactive:hover){border-color:var(--kf-color-border-strong);background:var(--kf-color-primary-soft)}}:host(.kf-stat-tile--interactive[aria-pressed=\"true\"]){border-color:var(--kf-color-primary);box-shadow:var(--kf-stat-tile-ring)}:host(.kf-stat-tile--interactive:focus-visible){outline:none;box-shadow:var(--kf-shadow-focus)}@media(prefers-reduced-motion:reduce){:host(.kf-stat-tile--interactive){transition:none}}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "component", type: Link, selector: "kf-link", inputs: ["variant", "disabled", "href", "showArrow"] }] });
|
|
9017
9213
|
}
|
|
9018
9214
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StatTile, decorators: [{
|
|
9019
9215
|
type: Component,
|
|
9020
9216
|
args: [{ selector: 'kf-stat-tile', imports: [Icon, Link], host: {
|
|
9021
9217
|
'[class.kf-stat-tile--cta]': 'cta()',
|
|
9022
9218
|
'[class.kf-stat-tile--inline]': '!cta() && variant() === "inline"',
|
|
9023
|
-
|
|
9024
|
-
|
|
9219
|
+
'[class.kf-stat-tile--interactive]': 'isInteractive()',
|
|
9220
|
+
'[attr.role]': 'isInteractive() ? "button" : null',
|
|
9221
|
+
'[attr.tabindex]': 'isInteractive() ? 0 : null',
|
|
9222
|
+
'[attr.aria-pressed]': 'isInteractive() ? pressed() : null',
|
|
9223
|
+
'[attr.aria-expanded]': 'isInteractive() ? expanded() : null',
|
|
9224
|
+
'(click)': 'onActivate($event)',
|
|
9225
|
+
'(keydown)': 'onKeydown($event)',
|
|
9226
|
+
'(keyup)': 'onKeyup($event)',
|
|
9227
|
+
}, template: "@if (cta()) {\n <span class=\"kf-stat-tile__cta-title\">{{ title() }}</span>\n @if (description()) {\n <span class=\"kf-stat-tile__cta-description\">{{ description() }}</span>\n }\n @if (actionLabel()) {\n <kf-link\n class=\"kf-stat-tile__cta-action\"\n [href]=\"actionHref() || '#'\"\n showArrow\n (click)=\"actionClick.emit($event)\"\n >\n {{ actionLabel() }}\n </kf-link>\n }\n} @else {\n <div class=\"kf-stat-tile__head\">\n <!-- El label recibe la clase de tone adem\u00E1s del value: juntos forman\n una sola unidad de lectura, y pintar solo el n\u00FAmero la romper\u00EDa. -->\n <span\n class=\"kf-stat-tile__label\"\n [class.kf-stat-tile__label--ok]=\"tone() === 'ok'\"\n [class.kf-stat-tile__label--warn]=\"tone() === 'warn'\"\n [class.kf-stat-tile__label--error]=\"tone() === 'error'\"\n [class.kf-stat-tile__label--info]=\"tone() === 'info'\"\n >{{ label() }}</span\n >\n @if (icon(); as iconName) {\n <span class=\"kf-stat-tile__icon\">\n <kf-icon [name]=\"iconName\" size=\"sm\" />\n </span>\n }\n </div>\n @if (hasProjectedValue()) {\n <!-- Slot para un valor que no es texto medido (ej. un `kf-badge` de\n estado) \u2014 mismo bloque `__value`, sin las clases de tono, que en ese\n caso las resuelve el propio contenido proyectado (el badge trae su\n tono). -->\n <span class=\"kf-stat-tile__value kf-stat-tile__value--projected\">\n <ng-content select=\"[valueContent]\" />\n </span>\n } @else {\n <span\n class=\"kf-stat-tile__value\"\n [class.kf-stat-tile__value--ok]=\"tone() === 'ok'\"\n [class.kf-stat-tile__value--warn]=\"tone() === 'warn'\"\n [class.kf-stat-tile__value--error]=\"tone() === 'error'\"\n [class.kf-stat-tile__value--info]=\"tone() === 'info'\"\n [class.kf-stat-tile__value--missing]=\"valueMissing()\"\n >{{ value() }}</span\n >\n }\n\n <!-- La l\u00EDnea se reserva con o sin nota: un tile m\u00E1s corto desalinea la\n fila. El `title` deja disponible el texto completo, recortado a `noteLines`\n l\u00EDneas (2 por defecto). -->\n @if (noteText(); as note) {\n <span\n class=\"kf-stat-tile__note\"\n [class.kf-stat-tile__note--empty]=\"noteIsPlaceholder()\"\n [style.--kf-stat-tile-note-lines]=\"noteClamp()\"\n [title]=\"note\"\n >{{ note }}</span\n >\n }\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--kf-space-xs);padding:var(--kf-space-md);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);height:100%;min-width:0}:host(.kf-stat-tile--cta){background:var(--kf-color-surface);gap:2px}:host(.kf-stat-tile--inline){flex-direction:row-reverse;align-items:baseline;height:auto;gap:6px;padding:0;border:none;border-radius:0;background:transparent}:host(.kf-stat-tile--inline) .kf-stat-tile__head{width:auto}.kf-stat-tile__head{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-xs)}.kf-stat-tile__label{font-size:var(--kf-font-size-label);color:var(--kf-color-text-muted)}.kf-stat-tile__icon{display:inline-flex;color:var(--kf-color-primary)}.kf-stat-tile__value{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-md);font-weight:700;color:var(--kf-color-ink)}.kf-stat-tile__value--projected{display:flex;align-items:center;font-size:initial;font-weight:initial;color:initial}.kf-stat-tile__value--ok,.kf-stat-tile__label--ok{color:var(--kf-color-success-strong)}.kf-stat-tile__value--warn,.kf-stat-tile__label--warn{color:var(--kf-color-warning-strong)}.kf-stat-tile__value--error,.kf-stat-tile__label--error{color:var(--kf-color-error-strong)}.kf-stat-tile__value--info,.kf-stat-tile__label--info{color:var(--kf-color-info-strong)}.kf-stat-tile__value--missing{font-family:var(--kf-font-body);font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-body);font-style:italic;color:var(--kf-color-text-muted)}.kf-stat-tile__note{display:-webkit-box;-webkit-line-clamp:var(--kf-stat-tile-note-lines, 2);line-clamp:var(--kf-stat-tile-note-lines, 2);-webkit-box-orient:vertical;overflow:hidden;font-size:var(--kf-font-size-caption);color:var(--kf-color-text-muted);margin-top:auto}.kf-stat-tile__note--empty{font-style:italic;opacity:.75}.kf-stat-tile__cta-title{font-family:var(--kf-font-title);font-weight:700;color:var(--kf-color-ink)}.kf-stat-tile__cta-description{font-size:var(--kf-font-size-label);color:var(--kf-color-text-muted)}.kf-stat-tile__cta-action{margin-top:var(--kf-space-xs);font-size:var(--kf-font-size-label);font-weight:600}:host(.kf-stat-tile--interactive){cursor:pointer;text-align:start;transition:border-color .14s,background-color .14s,box-shadow .14s}@media(hover:hover){:host(.kf-stat-tile--interactive:hover){border-color:var(--kf-color-border-strong);background:var(--kf-color-primary-soft)}}:host(.kf-stat-tile--interactive[aria-pressed=\"true\"]){border-color:var(--kf-color-primary);box-shadow:var(--kf-stat-tile-ring)}:host(.kf-stat-tile--interactive:focus-visible){outline:none;box-shadow:var(--kf-shadow-focus)}@media(prefers-reduced-motion:reduce){:host(.kf-stat-tile--interactive){transition:none}}\n"] }]
|
|
9228
|
+
}], propDecorators: { cta: [{ type: i0.Input, args: [{ isSignal: true, alias: "cta", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], note: [{ type: i0.Input, args: [{ isSignal: true, alias: "note", required: false }] }], noteLines: [{ type: i0.Input, args: [{ isSignal: true, alias: "noteLines", required: false }] }], notePlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "notePlaceholder", required: false }] }], valueMissing: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueMissing", required: false }] }], hasProjectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasProjectedValue", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], actionHref: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionHref", required: false }] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], tileClick: [{ type: i0.Output, args: ["tileClick"] }] } });
|
|
9025
9229
|
|
|
9026
9230
|
/**
|
|
9027
9231
|
* Pill con borde, en mayúsculas y con letter-spacing, pensada para indicadores
|
|
@@ -9043,6 +9247,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
9043
9247
|
args: [{ selector: 'kf-status-pill', template: "<span class=\"kf-status-pill\" [class]=\"'kf-status-pill--' + tone()\">\n @if (dot()) {\n <span class=\"kf-status-pill__dot\"></span>\n }\n <ng-content />\n</span>\n", styles: [":host{display:inline-block}.kf-status-pill{display:inline-flex;align-items:center;gap:var(--kf-space-xs);padding:var(--kf-space-xs) var(--kf-space-sm);border:1px solid currentColor;border-radius:var(--kf-radius-pill);background:transparent;font:inherit;font-size:.75rem;font-weight:600;line-height:1;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}.kf-status-pill__dot{width:6px;height:6px;border-radius:var(--kf-radius-pill);background:currentColor;flex-shrink:0}.kf-status-pill--blue{color:var(--kf-color-info)}.kf-status-pill--ok{color:var(--kf-color-success)}.kf-status-pill--warn{color:var(--kf-color-warning)}.kf-status-pill--error{color:var(--kf-color-error)}\n"] }]
|
|
9044
9248
|
}], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }] } });
|
|
9045
9249
|
|
|
9250
|
+
/**
|
|
9251
|
+
* Interruptor de activar/desactivar con efecto inmediato (preferencias,
|
|
9252
|
+
* ajustes). Para elegir opciones dentro de un formulario que se envía al
|
|
9253
|
+
* final, usar `kf-checkbox`.
|
|
9254
|
+
*
|
|
9255
|
+
* Es un `<button role="switch" aria-checked>`: el lector de pantalla anuncia
|
|
9256
|
+
* el estado con el propio rol, por eso no hay texto extra de "activado". Enter
|
|
9257
|
+
* y Espacio lo alternan como en cualquier botón.
|
|
9258
|
+
*
|
|
9259
|
+
* `label` es obligatorio: da el nombre accesible aunque no se vea. Con
|
|
9260
|
+
* `hideLabel` se oculta el texto y pasa a `aria-label`, para un interruptor
|
|
9261
|
+
* cuyo contexto ya lo explica la fila que lo contiene.
|
|
9262
|
+
*
|
|
9263
|
+
* `checked` es two-way (`model`). Implementa `ControlValueAccessor`, así que
|
|
9264
|
+
* también funciona con `formControlName`/`ngModel`; en ese modo `writeValue`
|
|
9265
|
+
* escribe en el mismo `checked`. `disabled` del input y el del formulario se
|
|
9266
|
+
* combinan: basta con que uno esté activo.
|
|
9267
|
+
*
|
|
9268
|
+
* `writeValue` (el formulario escribiendo el valor por código, ej.
|
|
9269
|
+
* `setValue`/`reset`) también emite `checkedChange`, porque escribe en el
|
|
9270
|
+
* `model`. Combinar `[(checked)]` con `formControlName`/`ngModel` en el mismo
|
|
9271
|
+
* switch hace que el valor llegue dos veces al consumidor: usar una sola de
|
|
9272
|
+
* las dos vías, o ignorar en el handler el eco que no cambia el valor.
|
|
9273
|
+
*
|
|
9274
|
+
* `describedBy` recibe el `id` de un texto de ayuda externo (ej. el `<p>` de
|
|
9275
|
+
* una fila de preferencias) y lo enlaza con `aria-describedby` del botón, para
|
|
9276
|
+
* que el lector de pantalla lo anuncie junto al nombre y el estado. Sin valor,
|
|
9277
|
+
* el atributo no se renderiza.
|
|
9278
|
+
*
|
|
9279
|
+
* El color sale de roles (`--kf-color-primary` encendido,
|
|
9280
|
+
* `--kf-color-border-control` apagado) y el foco de `--kf-shadow-focus`; no
|
|
9281
|
+
* recibe colores.
|
|
9282
|
+
*
|
|
9283
|
+
* <kf-switch label="Fijar indicadores" [(checked)]="pinned" />
|
|
9284
|
+
* <kf-switch label="Mapa junto a la tabla" hideLabel size="sm" formControlName="splitMap" />
|
|
9285
|
+
* <kf-switch label="Alertas por correo" describedBy="mail-hint" [(checked)]="mail" />
|
|
9286
|
+
* <p id="mail-hint">Se envía un resumen cada hora.</p>
|
|
9287
|
+
*/
|
|
9288
|
+
class Switch {
|
|
9289
|
+
/** Nombre accesible y texto visible (salvo con `hideLabel`). */
|
|
9290
|
+
label = input.required(/* @ts-ignore */
|
|
9291
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
9292
|
+
/** Oculta el texto y lo deja como `aria-label`. */
|
|
9293
|
+
hideLabel = input(false, { ...(ngDevMode ? { debugName: "hideLabel" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
9294
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
9295
|
+
size = input('md', /* @ts-ignore */
|
|
9296
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
9297
|
+
/** `id` del texto de ayuda que describe al interruptor (`aria-describedby`). */
|
|
9298
|
+
describedBy = input(null, /* @ts-ignore */
|
|
9299
|
+
...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
|
|
9300
|
+
/** Estado encendido, two-way: `[(checked)]="pinned"`. */
|
|
9301
|
+
checked = model(false, /* @ts-ignore */
|
|
9302
|
+
...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
|
|
9303
|
+
disabledByForm = signal(false, /* @ts-ignore */
|
|
9304
|
+
...(ngDevMode ? [{ debugName: "disabledByForm" }] : /* istanbul ignore next */ []));
|
|
9305
|
+
isDisabled = computed(() => this.disabled() || this.disabledByForm(), /* @ts-ignore */
|
|
9306
|
+
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
9307
|
+
onChangeFn = () => { };
|
|
9308
|
+
onTouchedFn = () => { };
|
|
9309
|
+
toggle() {
|
|
9310
|
+
if (this.isDisabled()) {
|
|
9311
|
+
return;
|
|
9312
|
+
}
|
|
9313
|
+
const next = !this.checked();
|
|
9314
|
+
this.checked.set(next);
|
|
9315
|
+
this.onChangeFn(next);
|
|
9316
|
+
}
|
|
9317
|
+
onBlur() {
|
|
9318
|
+
this.onTouchedFn();
|
|
9319
|
+
}
|
|
9320
|
+
writeValue(value) {
|
|
9321
|
+
this.checked.set(!!value);
|
|
9322
|
+
}
|
|
9323
|
+
registerOnChange(fn) {
|
|
9324
|
+
this.onChangeFn = fn;
|
|
9325
|
+
}
|
|
9326
|
+
registerOnTouched(fn) {
|
|
9327
|
+
this.onTouchedFn = fn;
|
|
9328
|
+
}
|
|
9329
|
+
setDisabledState(isDisabled) {
|
|
9330
|
+
this.disabledByForm.set(isDisabled);
|
|
9331
|
+
}
|
|
9332
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Switch, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9333
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Switch, isStandalone: true, selector: "kf-switch", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "describedBy", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, providers: [
|
|
9334
|
+
{
|
|
9335
|
+
provide: NG_VALUE_ACCESSOR,
|
|
9336
|
+
useExisting: forwardRef(() => Switch),
|
|
9337
|
+
multi: true,
|
|
9338
|
+
},
|
|
9339
|
+
], ngImport: i0, template: "<button\n type=\"button\"\n role=\"switch\"\n class=\"kf-switch\"\n [class.kf-switch--sm]=\"size() === 'sm'\"\n [attr.aria-checked]=\"checked()\"\n [attr.aria-label]=\"hideLabel() ? label() : null\"\n [attr.aria-describedby]=\"describedBy() || null\"\n [disabled]=\"isDisabled()\"\n (click)=\"toggle()\"\n (blur)=\"onBlur()\"\n>\n <span class=\"kf-switch__track\" aria-hidden=\"true\">\n <span class=\"kf-switch__thumb\"></span>\n </span>\n @if (!hideLabel()) {\n <span class=\"kf-switch__label\">{{ label() }}</span>\n }\n</button>\n", styles: [":host{display:inline-flex}.kf-switch{--kf-switch-track-width: 36px;--kf-switch-track-height: 20px;--kf-switch-thumb-size: 16px;--kf-switch-gap: 2px;display:inline-flex;align-items:center;gap:var(--kf-space-sm);margin:0;padding:0;border:none;background:transparent;font-family:var(--kf-font-body);font-size:var(--kf-font-size-body);color:var(--kf-color-text);text-align:start;cursor:pointer}.kf-switch--sm{--kf-switch-track-width: 28px;--kf-switch-track-height: 16px;--kf-switch-thumb-size: 12px;font-size:var(--kf-font-size-body-sm)}.kf-switch__track{position:relative;flex:none;box-sizing:border-box;width:var(--kf-switch-track-width);height:var(--kf-switch-track-height);border-radius:var(--kf-radius-pill);background:var(--kf-color-border-control);transition:background-color .14s}.kf-switch__thumb{position:absolute;top:var(--kf-switch-gap);left:var(--kf-switch-gap);width:var(--kf-switch-thumb-size);height:var(--kf-switch-thumb-size);border-radius:var(--kf-radius-pill);background:var(--kf-color-white);box-shadow:var(--kf-shadow-xs);transition:transform .14s}.kf-switch[aria-checked=true] .kf-switch__track{background:var(--kf-color-primary)}.kf-switch[aria-checked=true] .kf-switch__thumb{transform:translate(calc(var(--kf-switch-track-width) - var(--kf-switch-thumb-size) - 2 * var(--kf-switch-gap)))}.kf-switch:focus-visible{outline:none}.kf-switch:focus-visible .kf-switch__track{box-shadow:var(--kf-shadow-focus)}.kf-switch:disabled{cursor:not-allowed;color:var(--kf-color-text-muted)}.kf-switch:disabled .kf-switch__track{opacity:.5}.kf-switch__label{-webkit-user-select:none;user-select:none}@media(prefers-reduced-motion:reduce){.kf-switch__track,.kf-switch__thumb{transition:none}}@media(forced-colors:active){.kf-switch__track{background:ButtonText}.kf-switch[aria-checked=true] .kf-switch__track{background:Highlight}.kf-switch__thumb{background:ButtonFace;border:1px solid ButtonText}}\n"] });
|
|
9340
|
+
}
|
|
9341
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Switch, decorators: [{
|
|
9342
|
+
type: Component,
|
|
9343
|
+
args: [{ selector: 'kf-switch', providers: [
|
|
9344
|
+
{
|
|
9345
|
+
provide: NG_VALUE_ACCESSOR,
|
|
9346
|
+
useExisting: forwardRef(() => Switch),
|
|
9347
|
+
multi: true,
|
|
9348
|
+
},
|
|
9349
|
+
], template: "<button\n type=\"button\"\n role=\"switch\"\n class=\"kf-switch\"\n [class.kf-switch--sm]=\"size() === 'sm'\"\n [attr.aria-checked]=\"checked()\"\n [attr.aria-label]=\"hideLabel() ? label() : null\"\n [attr.aria-describedby]=\"describedBy() || null\"\n [disabled]=\"isDisabled()\"\n (click)=\"toggle()\"\n (blur)=\"onBlur()\"\n>\n <span class=\"kf-switch__track\" aria-hidden=\"true\">\n <span class=\"kf-switch__thumb\"></span>\n </span>\n @if (!hideLabel()) {\n <span class=\"kf-switch__label\">{{ label() }}</span>\n }\n</button>\n", styles: [":host{display:inline-flex}.kf-switch{--kf-switch-track-width: 36px;--kf-switch-track-height: 20px;--kf-switch-thumb-size: 16px;--kf-switch-gap: 2px;display:inline-flex;align-items:center;gap:var(--kf-space-sm);margin:0;padding:0;border:none;background:transparent;font-family:var(--kf-font-body);font-size:var(--kf-font-size-body);color:var(--kf-color-text);text-align:start;cursor:pointer}.kf-switch--sm{--kf-switch-track-width: 28px;--kf-switch-track-height: 16px;--kf-switch-thumb-size: 12px;font-size:var(--kf-font-size-body-sm)}.kf-switch__track{position:relative;flex:none;box-sizing:border-box;width:var(--kf-switch-track-width);height:var(--kf-switch-track-height);border-radius:var(--kf-radius-pill);background:var(--kf-color-border-control);transition:background-color .14s}.kf-switch__thumb{position:absolute;top:var(--kf-switch-gap);left:var(--kf-switch-gap);width:var(--kf-switch-thumb-size);height:var(--kf-switch-thumb-size);border-radius:var(--kf-radius-pill);background:var(--kf-color-white);box-shadow:var(--kf-shadow-xs);transition:transform .14s}.kf-switch[aria-checked=true] .kf-switch__track{background:var(--kf-color-primary)}.kf-switch[aria-checked=true] .kf-switch__thumb{transform:translate(calc(var(--kf-switch-track-width) - var(--kf-switch-thumb-size) - 2 * var(--kf-switch-gap)))}.kf-switch:focus-visible{outline:none}.kf-switch:focus-visible .kf-switch__track{box-shadow:var(--kf-shadow-focus)}.kf-switch:disabled{cursor:not-allowed;color:var(--kf-color-text-muted)}.kf-switch:disabled .kf-switch__track{opacity:.5}.kf-switch__label{-webkit-user-select:none;user-select:none}@media(prefers-reduced-motion:reduce){.kf-switch__track,.kf-switch__thumb{transition:none}}@media(forced-colors:active){.kf-switch__track{background:ButtonText}.kf-switch[aria-checked=true] .kf-switch__track{background:Highlight}.kf-switch__thumb{background:ButtonFace;border:1px solid ButtonText}}\n"] }]
|
|
9350
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], hideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "describedBy", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
|
|
9351
|
+
|
|
9046
9352
|
/**
|
|
9047
9353
|
* Barra de tabs subrayada: un indicador se desliza hasta la pestaña activa.
|
|
9048
9354
|
* La posición se mide (`offsetLeft`/`offsetWidth`) después de cada render,
|
|
@@ -9173,6 +9479,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
9173
9479
|
*
|
|
9174
9480
|
* <kf-textarea label="Detalle" formControlName="detail" [maxRows]="12" />
|
|
9175
9481
|
*
|
|
9482
|
+
* `maxlength` limita el texto (`maxlength` nativo, entero positivo) y
|
|
9483
|
+
* `showCounter` agrega el contador «0 / 500» pegado bajo el campo, en la misma
|
|
9484
|
+
* fila que el `hint`/`errorMessage`. Ambos son opt-in: sin ellos el campo no
|
|
9485
|
+
* cambia. El contador sin `maxlength` no se muestra (no hay tope que contar).
|
|
9486
|
+
* Visualmente pasa a rojo al llegar al tope; para lectores de pantalla solo
|
|
9487
|
+
* anuncia (`aria-live="polite"`) al cruzar el 90 % y al llegar al límite, no
|
|
9488
|
+
* en cada tecla.
|
|
9489
|
+
*
|
|
9490
|
+
* <kf-textarea label="Motivo" formControlName="reason" [maxlength]="500" showCounter />
|
|
9491
|
+
*
|
|
9176
9492
|
* `invalid` + `errorMessage` y `readonly`/`disabled` siguen el mismo
|
|
9177
9493
|
* contrato que `kf-input` — ver su JSDoc para la diferencia entre ambos
|
|
9178
9494
|
* estados.
|
|
@@ -9206,9 +9522,14 @@ class Textarea {
|
|
|
9206
9522
|
/** Filas máximas antes de que el contenido pase a scroll interno en vez de seguir creciendo. */
|
|
9207
9523
|
maxRows = input(6, /* @ts-ignore */
|
|
9208
9524
|
...(ngDevMode ? [{ debugName: "maxRows" }] : /* istanbul ignore next */ []));
|
|
9525
|
+
/** Largo máximo del texto (`maxlength` nativo), entero positivo. */
|
|
9526
|
+
maxlength = input(null, { ...(ngDevMode ? { debugName: "maxlength" } : /* istanbul ignore next */ {}), transform: toMaxLength });
|
|
9527
|
+
/** Muestra el contador «n / maxlength» bajo el campo. Requiere `maxlength`. */
|
|
9528
|
+
showCounter = input(false, { ...(ngDevMode ? { debugName: "showCounter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
9209
9529
|
textareaId = `kf-textarea-${Textarea.nextId++}`;
|
|
9210
9530
|
hintId = `${this.textareaId}-hint`;
|
|
9211
9531
|
errorId = `${this.textareaId}-error`;
|
|
9532
|
+
counterId = `${this.textareaId}-counter`;
|
|
9212
9533
|
value = signal('', /* @ts-ignore */
|
|
9213
9534
|
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
9214
9535
|
focused = signal(false, /* @ts-ignore */
|
|
@@ -9219,6 +9540,38 @@ class Textarea {
|
|
|
9219
9540
|
/** Disabled real: por input() directo o por el FormControl asociado. */
|
|
9220
9541
|
isDisabled = computed(() => this.disabled() || this.disabledByForm(), /* @ts-ignore */
|
|
9221
9542
|
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
9543
|
+
counterVisible = computed(() => this.showCounter() && this.maxlength() !== null, /* @ts-ignore */
|
|
9544
|
+
...(ngDevMode ? [{ debugName: "counterVisible" }] : /* istanbul ignore next */ []));
|
|
9545
|
+
atLimit = computed(() => {
|
|
9546
|
+
const max = this.maxlength();
|
|
9547
|
+
return max !== null && this.value().length >= max;
|
|
9548
|
+
}, /* @ts-ignore */
|
|
9549
|
+
...(ngDevMode ? [{ debugName: "atLimit" }] : /* istanbul ignore next */ []));
|
|
9550
|
+
/**
|
|
9551
|
+
* Texto del `aria-live`: cambia solo al cruzar un umbral (90 % y tope), así
|
|
9552
|
+
* el lector no lee cada carácter escrito cerca del límite.
|
|
9553
|
+
*/
|
|
9554
|
+
counterAnnouncement = computed(() => {
|
|
9555
|
+
const max = this.maxlength();
|
|
9556
|
+
if (max === null) {
|
|
9557
|
+
return '';
|
|
9558
|
+
}
|
|
9559
|
+
const length = this.value().length;
|
|
9560
|
+
if (length >= max) {
|
|
9561
|
+
return `Límite de ${max} caracteres alcanzado.`;
|
|
9562
|
+
}
|
|
9563
|
+
return length >= Math.ceil(max * 0.9) ? 'Queda menos del 10 % de caracteres disponibles.' : '';
|
|
9564
|
+
}, /* @ts-ignore */
|
|
9565
|
+
...(ngDevMode ? [{ debugName: "counterAnnouncement" }] : /* istanbul ignore next */ []));
|
|
9566
|
+
/** Hint o error, más el contador cuando se muestra. */
|
|
9567
|
+
describedBy = computed(() => {
|
|
9568
|
+
const ids = [
|
|
9569
|
+
this.errorMessage() ? this.errorId : this.hint() ? this.hintId : null,
|
|
9570
|
+
this.counterVisible() ? this.counterId : null,
|
|
9571
|
+
].filter((id) => id !== null);
|
|
9572
|
+
return ids.length ? ids.join(' ') : null;
|
|
9573
|
+
}, /* @ts-ignore */
|
|
9574
|
+
...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
|
|
9222
9575
|
onChange = () => { };
|
|
9223
9576
|
onTouched = () => { };
|
|
9224
9577
|
ngAfterViewInit() {
|
|
@@ -9281,24 +9634,24 @@ class Textarea {
|
|
|
9281
9634
|
el.style.overflowY = el.scrollHeight > maxHeight ? 'auto' : 'hidden';
|
|
9282
9635
|
}
|
|
9283
9636
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Textarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9284
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Textarea, isStandalone: true, selector: "kf-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minRows: { classPropertyName: "minRows", publicName: "minRows", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
9637
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Textarea, isStandalone: true, selector: "kf-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minRows: { classPropertyName: "minRows", publicName: "minRows", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, showCounter: { classPropertyName: "showCounter", publicName: "showCounter", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
9285
9638
|
{
|
|
9286
9639
|
provide: NG_VALUE_ACCESSOR,
|
|
9287
9640
|
useExisting: forwardRef(() => Textarea),
|
|
9288
9641
|
multi: true,
|
|
9289
9642
|
},
|
|
9290
|
-
], viewQueries: [{ propertyName: "nativeTextarea", first: true, predicate: ["nativeTextarea"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n <kf-field-label [for]=\"textareaId\" [required]=\"required()\">{{ label() }}</kf-field-label>\n}\n<textarea\n #nativeTextarea\n [id]=\"textareaId\"\n class=\"kf-textarea__control\"\n [class.kf-textarea__control--focused]=\"focused()\"\n [class.kf-textarea__control--invalid]=\"invalid()\"\n [class.kf-textarea__control--readonly]=\"readonly()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [required]=\"required()\"\n [attr.readonly]=\"readonly() ? true : null\"\n [attr.aria-describedby]=\"
|
|
9643
|
+
], viewQueries: [{ propertyName: "nativeTextarea", first: true, predicate: ["nativeTextarea"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n <kf-field-label [for]=\"textareaId\" [required]=\"required()\">{{ label() }}</kf-field-label>\n}\n<textarea\n #nativeTextarea\n [id]=\"textareaId\"\n class=\"kf-textarea__control\"\n [class.kf-textarea__control--focused]=\"focused()\"\n [class.kf-textarea__control--invalid]=\"invalid()\"\n [class.kf-textarea__control--readonly]=\"readonly()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [required]=\"required()\"\n [attr.readonly]=\"readonly() ? true : null\"\n [attr.maxlength]=\"maxlength()\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.aria-invalid]=\"invalid() ? true : null\"\n [value]=\"value()\"\n (input)=\"onInput(nativeTextarea.value)\"\n (blur)=\"onBlur()\"\n (focus)=\"focused.set(true)\"\n></textarea>\n<ng-template #feedback>\n @if (errorMessage(); as message) {\n <span class=\"kf-textarea__error kf-field-error\" [id]=\"errorId\" role=\"alert\">{{ message }}</span>\n } @else if (hint()) {\n <span class=\"kf-textarea__hint kf-field-hint\" [id]=\"hintId\">{{ hint() }}</span>\n }\n</ng-template>\n@if (counterVisible()) {\n <div class=\"kf-textarea__footer\">\n <ng-container [ngTemplateOutlet]=\"feedback\" />\n <span\n class=\"kf-textarea__counter kf-field-hint\"\n [class.kf-textarea__counter--limit]=\"atLimit()\"\n [id]=\"counterId\"\n >{{ value().length }} / {{ maxlength() }}</span\n >\n </div>\n <span class=\"kf-sr-only\" aria-live=\"polite\" aria-atomic=\"true\">{{ counterAnnouncement() }}</span>\n} @else {\n <ng-container [ngTemplateOutlet]=\"feedback\" />\n}\n", styles: [".kf-field-hint{font-size:.75rem;color:var(--kf-color-text-muted)}.kf-field-error{display:flex;align-items:center;gap:var(--kf-space-xs);font-size:.75rem;font-weight:600;color:var(--kf-color-error-strong)}.kf-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}:host{display:flex;flex-direction:column;gap:var(--kf-space-xs);font-family:var(--kf-font-body)}.kf-textarea__control{resize:none;width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--kf-color-border-control);border-radius:var(--kf-radius-sm);background:var(--kf-color-surface);color:var(--kf-color-text);font:inherit;padding:var(--kf-space-sm);transition:background .14s,border-color .14s,box-shadow .14s}.kf-textarea__control::placeholder{color:var(--kf-color-text-muted)}.kf-textarea__control--focused{background:var(--kf-color-white);border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus);outline:none}.kf-textarea__control--invalid{border-color:var(--kf-color-error)}.kf-textarea__control--invalid.kf-textarea__control--focused{box-shadow:var(--kf-shadow-focus-error)}.kf-textarea__control:disabled{opacity:.5;cursor:not-allowed}.kf-textarea__control--readonly{background:var(--kf-color-gray-100);cursor:default}.kf-textarea__footer{display:flex;align-items:flex-start;gap:var(--kf-space-sm)}.kf-textarea__footer>.kf-textarea__hint,.kf-textarea__footer>.kf-textarea__error{flex:1 1 auto;min-width:0}.kf-textarea__counter{flex:none;margin-inline-start:auto;white-space:nowrap;font-variant-numeric:tabular-nums}.kf-textarea__counter--limit{font-weight:600;color:var(--kf-color-error-strong)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: FieldLabel, selector: "kf-field-label", inputs: ["for", "required", "visuallyHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9291
9644
|
}
|
|
9292
9645
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Textarea, decorators: [{
|
|
9293
9646
|
type: Component,
|
|
9294
|
-
args: [{ selector: 'kf-textarea', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, FieldLabel], providers: [
|
|
9647
|
+
args: [{ selector: 'kf-textarea', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, FieldLabel, NgTemplateOutlet], providers: [
|
|
9295
9648
|
{
|
|
9296
9649
|
provide: NG_VALUE_ACCESSOR,
|
|
9297
9650
|
useExisting: forwardRef(() => Textarea),
|
|
9298
9651
|
multi: true,
|
|
9299
9652
|
},
|
|
9300
|
-
], template: "@if (label()) {\n <kf-field-label [for]=\"textareaId\" [required]=\"required()\">{{ label() }}</kf-field-label>\n}\n<textarea\n #nativeTextarea\n [id]=\"textareaId\"\n class=\"kf-textarea__control\"\n [class.kf-textarea__control--focused]=\"focused()\"\n [class.kf-textarea__control--invalid]=\"invalid()\"\n [class.kf-textarea__control--readonly]=\"readonly()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [required]=\"required()\"\n [attr.readonly]=\"readonly() ? true : null\"\n [attr.aria-describedby]=\"
|
|
9301
|
-
}], propDecorators: { nativeTextarea: [{ type: i0.ViewChild, args: ['nativeTextarea', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRows", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }] } });
|
|
9653
|
+
], template: "@if (label()) {\n <kf-field-label [for]=\"textareaId\" [required]=\"required()\">{{ label() }}</kf-field-label>\n}\n<textarea\n #nativeTextarea\n [id]=\"textareaId\"\n class=\"kf-textarea__control\"\n [class.kf-textarea__control--focused]=\"focused()\"\n [class.kf-textarea__control--invalid]=\"invalid()\"\n [class.kf-textarea__control--readonly]=\"readonly()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [required]=\"required()\"\n [attr.readonly]=\"readonly() ? true : null\"\n [attr.maxlength]=\"maxlength()\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.aria-invalid]=\"invalid() ? true : null\"\n [value]=\"value()\"\n (input)=\"onInput(nativeTextarea.value)\"\n (blur)=\"onBlur()\"\n (focus)=\"focused.set(true)\"\n></textarea>\n<ng-template #feedback>\n @if (errorMessage(); as message) {\n <span class=\"kf-textarea__error kf-field-error\" [id]=\"errorId\" role=\"alert\">{{ message }}</span>\n } @else if (hint()) {\n <span class=\"kf-textarea__hint kf-field-hint\" [id]=\"hintId\">{{ hint() }}</span>\n }\n</ng-template>\n@if (counterVisible()) {\n <div class=\"kf-textarea__footer\">\n <ng-container [ngTemplateOutlet]=\"feedback\" />\n <span\n class=\"kf-textarea__counter kf-field-hint\"\n [class.kf-textarea__counter--limit]=\"atLimit()\"\n [id]=\"counterId\"\n >{{ value().length }} / {{ maxlength() }}</span\n >\n </div>\n <span class=\"kf-sr-only\" aria-live=\"polite\" aria-atomic=\"true\">{{ counterAnnouncement() }}</span>\n} @else {\n <ng-container [ngTemplateOutlet]=\"feedback\" />\n}\n", styles: [".kf-field-hint{font-size:.75rem;color:var(--kf-color-text-muted)}.kf-field-error{display:flex;align-items:center;gap:var(--kf-space-xs);font-size:.75rem;font-weight:600;color:var(--kf-color-error-strong)}.kf-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}:host{display:flex;flex-direction:column;gap:var(--kf-space-xs);font-family:var(--kf-font-body)}.kf-textarea__control{resize:none;width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--kf-color-border-control);border-radius:var(--kf-radius-sm);background:var(--kf-color-surface);color:var(--kf-color-text);font:inherit;padding:var(--kf-space-sm);transition:background .14s,border-color .14s,box-shadow .14s}.kf-textarea__control::placeholder{color:var(--kf-color-text-muted)}.kf-textarea__control--focused{background:var(--kf-color-white);border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus);outline:none}.kf-textarea__control--invalid{border-color:var(--kf-color-error)}.kf-textarea__control--invalid.kf-textarea__control--focused{box-shadow:var(--kf-shadow-focus-error)}.kf-textarea__control:disabled{opacity:.5;cursor:not-allowed}.kf-textarea__control--readonly{background:var(--kf-color-gray-100);cursor:default}.kf-textarea__footer{display:flex;align-items:flex-start;gap:var(--kf-space-sm)}.kf-textarea__footer>.kf-textarea__hint,.kf-textarea__footer>.kf-textarea__error{flex:1 1 auto;min-width:0}.kf-textarea__counter{flex:none;margin-inline-start:auto;white-space:nowrap;font-variant-numeric:tabular-nums}.kf-textarea__counter--limit{font-weight:600;color:var(--kf-color-error-strong)}\n"] }]
|
|
9654
|
+
}], propDecorators: { nativeTextarea: [{ type: i0.ViewChild, args: ['nativeTextarea', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRows", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], showCounter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCounter", required: false }] }] } });
|
|
9302
9655
|
|
|
9303
9656
|
/**
|
|
9304
9657
|
* Da forma al valor de un campo MIENTRAS el usuario escribe — ej.
|
|
@@ -9720,5 +10073,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
9720
10073
|
* Generated bundle index. Do not edit.
|
|
9721
10074
|
*/
|
|
9722
10075
|
|
|
9723
|
-
export { ActionTile, AdminBadge, Alert, AlertRow, Avatar, Badge, Breadcrumb, BucketProgress, Button, Calendar, Card, Carousel, CarouselSlide, Checkbox, Chip, Collapsible, ContactPopover, ContentSlot, ContentState, ContentStateLoading, ContentViewer, CursorPager, DATA_TABLE_MAX_SKELETON_ROWS, DEFAULT_MILESTONE_TIMELINE_LABELS, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, Divider, DocumentRow, Drawer, Dropdown, DropdownItem, DropdownPanel, EmptyState, EventTimeline, FeatureCard, Field, FieldLabel, FileInput, Filter, FilterChips, FolderTabs, FolderTabsPanel, Footer, FormatInputDirective, Icon, Input, JourneyStepper, LIST_TOOLBAR_HYSTERESIS, Link, ListToolbar, MetricCard, MilestoneTimeline, Modal, MultiSelect, NoteBlock, OptionList, PROGRESS_STATUS, PROGRESS_STATUS_LABEL, PageHeader, Pagination, Panel, PopoverDirective, PortalHeader, Progress, PulseDot, RowActions, SKELETON_PRESET_MAX_COUNT, SectionHeader, SectionNav, SectionNavItem, SectionNavSubsection, Segmented, Select, SelectableCardGroup, SidebarShell, Skeleton, SkeletonPreset, Spinner, StatCard, StatTile, StatusMark, StatusNode, StatusPill, TOAST_DEFAULT_DURATION_MS, Tabs, Text, Textarea, TileGrid, TimeSlotPicker, ToastHost, ToastService, TooltipDirective, ViewToggle, dataTableViewSignal, formatFileSize, resolveListToolbarMode };
|
|
10076
|
+
export { ActionTile, AdminBadge, Alert, AlertRow, Avatar, Badge, Breadcrumb, BucketProgress, Button, Calendar, Card, Carousel, CarouselSlide, Checkbox, Chip, Collapsible, ContactPopover, ContentSlot, ContentState, ContentStateLoading, ContentViewer, CursorPager, DATA_TABLE_MAX_SKELETON_ROWS, DEFAULT_MILESTONE_TIMELINE_LABELS, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, Divider, DocumentRow, Drawer, Dropdown, DropdownItem, DropdownPanel, EmptyState, EventTimeline, FeatureCard, Field, FieldLabel, FileInput, Filter, FilterChips, FolderTabs, FolderTabsPanel, Footer, FormatInputDirective, Icon, Input, JourneyStepper, LIST_TOOLBAR_HYSTERESIS, Link, ListToolbar, MetricCard, MilestoneTimeline, Modal, MultiSelect, NoteBlock, OptionList, PROGRESS_STATUS, PROGRESS_STATUS_LABEL, PageHeader, Pagination, Panel, PopoverDirective, PortalHeader, Progress, PulseDot, RowActions, SKELETON_PRESET_MAX_COUNT, SectionHeader, SectionNav, SectionNavItem, SectionNavSubsection, Segmented, Select, SelectableCardGroup, SidebarShell, Skeleton, SkeletonPreset, Spinner, StatCard, StatTile, StatusMark, StatusNode, StatusPill, Switch, TOAST_DEFAULT_DURATION_MS, Tabs, Text, Textarea, TileGrid, TimeSlotPicker, ToastHost, ToastService, TooltipDirective, ViewToggle, dataTableViewSignal, formatFileSize, resolveListToolbarMode };
|
|
9724
10077
|
//# sourceMappingURL=kaufmann-lab-ui-core.mjs.map
|