@kaufmann-lab/ui 0.1.27 → 0.1.28
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.
|
@@ -1237,6 +1237,34 @@ const TONE_ICON = {
|
|
|
1237
1237
|
* vencimiento, confirmaciones. Persiste hasta que se descarta o hasta que la
|
|
1238
1238
|
* condición que lo causó desaparece — para feedback efímero está el toast.
|
|
1239
1239
|
*
|
|
1240
|
+
* Diseño sobrio: el título va en peso 600 con la tipografía de cuerpo y el
|
|
1241
|
+
* mensaje con medida de lectura limitada, ambos en los neutros del sistema (el
|
|
1242
|
+
* color del tono nunca se usa para texto). El ícono va centrado en vertical
|
|
1243
|
+
* respecto al aviso. El color sale siempre de los tokens (`*-strong`), nunca de
|
|
1244
|
+
* un input. Ninguna apariencia lleva borde ni acento lateral de color.
|
|
1245
|
+
*
|
|
1246
|
+
* `appearance` elige cómo se muestra el tono (solo aplica a `variant="card"`):
|
|
1247
|
+
*
|
|
1248
|
+
* - `tile` (default): aviso estándar dentro de pantallas y cards. Tarjeta de
|
|
1249
|
+
* superficie y borde neutros; el color vive solo en el ícono, un tile sólido de
|
|
1250
|
+
* 40px con glifo blanco.
|
|
1251
|
+
*
|
|
1252
|
+
* <kf-alert tone="warn" title="SOAT por vencer">Vence el 15/08.</kf-alert>
|
|
1253
|
+
*
|
|
1254
|
+
* - `tint`: aviso liviano sobre fondos neutros o en zonas densas, donde el tinte
|
|
1255
|
+
* basta. Relleno suave del tono, sin borde ni tile; glifo de 24px en el color
|
|
1256
|
+
* fuerte del tono.
|
|
1257
|
+
*
|
|
1258
|
+
* <kf-alert appearance="tint" tone="info">Cita confirmada para el jueves.</kf-alert>
|
|
1259
|
+
*
|
|
1260
|
+
* - `rail`: aviso destacado que debe notarse al primer vistazo, p. ej. errores o
|
|
1261
|
+
* bloqueos. Panel de ícono de 56px a todo el alto, con el fondo del tono más
|
|
1262
|
+
* intenso, y cuerpo neutro con borde neutro.
|
|
1263
|
+
*
|
|
1264
|
+
* <kf-alert appearance="rail" tone="error" title="Pago rechazado">
|
|
1265
|
+
* Tu banco no autorizó el cargo.
|
|
1266
|
+
* </kf-alert>
|
|
1267
|
+
*
|
|
1240
1268
|
* `open` es two-way: el botón de cerrar lo pone en `false` y el componente
|
|
1241
1269
|
* deja de renderizar. El consumidor puede volver a abrirlo poniéndolo en
|
|
1242
1270
|
* `true` (ej. cuando la validación falla otra vez).
|
|
@@ -1250,13 +1278,16 @@ const TONE_ICON = {
|
|
|
1250
1278
|
* tonos y mismo `role` (`alert` para `error`/`warn`, `status` para el resto)
|
|
1251
1279
|
* que la variante `card`. Pensada para el borde de una página o de un panel
|
|
1252
1280
|
* (ej. "Estás viendo datos de otro cliente"), donde una tarjeta con margen
|
|
1253
|
-
* sobra.
|
|
1281
|
+
* sobra. `variant="bar"` ignora `appearance`: la franja siempre usa su propia
|
|
1282
|
+
* superficie tintada.
|
|
1254
1283
|
*
|
|
1255
1284
|
* <kf-alert variant="bar" tone="warn" title="Modo suplantación">Viendo como Ana Pérez.</kf-alert>
|
|
1256
1285
|
*
|
|
1257
|
-
* Los elementos con el atributo `kfAlertActions` se proyectan
|
|
1258
|
-
*
|
|
1259
|
-
* variante `bar`
|
|
1286
|
+
* Los elementos con el atributo `kfAlertActions` se proyectan a la derecha del
|
|
1287
|
+
* mensaje cuando hay ancho y, si no caben, en una fila propia bajo él, apilados
|
|
1288
|
+
* y alineados al inicio (en la variante `bar` siempre van en fila propia). Si los
|
|
1289
|
+
* envuelves en un solo `<div kfAlertActions>`, el aviso separa a sus hijos (12px).
|
|
1290
|
+
* Sin ellos la zona no existe y el aviso queda igual.
|
|
1260
1291
|
*
|
|
1261
1292
|
* <kf-alert tone="warn" title="SOAT por vencer">
|
|
1262
1293
|
* Vence el 15/08.
|
|
@@ -1269,7 +1300,13 @@ class Alert {
|
|
|
1269
1300
|
/** `card` (default) o `bar` (franja compacta de ancho completo). */
|
|
1270
1301
|
variant = input('card', /* @ts-ignore */
|
|
1271
1302
|
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
1272
|
-
/**
|
|
1303
|
+
/**
|
|
1304
|
+
* `tile` (default), `tint` o `rail`. Solo aplica a `variant="card"`; `bar` la
|
|
1305
|
+
* ignora. Se expone en el host como `data-appearance`.
|
|
1306
|
+
*/
|
|
1307
|
+
appearance = input('tile', /* @ts-ignore */
|
|
1308
|
+
...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
1309
|
+
/** Título (peso 600) arriba del mensaje. Vacío deja solo el contenido proyectado. */
|
|
1273
1310
|
title = input('', /* @ts-ignore */
|
|
1274
1311
|
...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
1275
1312
|
dismissible = input(false, { ...(ngDevMode ? { debugName: "dismissible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
@@ -1284,13 +1321,20 @@ class Alert {
|
|
|
1284
1321
|
...(ngDevMode ? [{ debugName: "ariaRole" }] : /* istanbul ignore next */ []));
|
|
1285
1322
|
toneIcon = computed(() => TONE_ICON[this.tone()], /* @ts-ignore */
|
|
1286
1323
|
...(ngDevMode ? [{ debugName: "toneIcon" }] : /* istanbul ignore next */ []));
|
|
1324
|
+
/** Glifo: 16px en `bar`, 20px en `tile` y 24px en `tint`/`rail`. */
|
|
1325
|
+
iconSize = computed(() => {
|
|
1326
|
+
if (this.variant() === 'bar')
|
|
1327
|
+
return 'sm';
|
|
1328
|
+
return this.appearance() === 'tile' ? 'md' : 'lg';
|
|
1329
|
+
}, /* @ts-ignore */
|
|
1330
|
+
...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
|
|
1287
1331
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Alert, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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=\"
|
|
1332
|
+
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 }, appearance: { classPropertyName: "appearance", publicName: "appearance", 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" }, host: { properties: { "attr.data-appearance": "appearance()" } }, 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]=\"iconSize()\" />\n <div class=\"kf-alert__body\">\n <div class=\"kf-alert__content\">\n @if (title()) {\n <p class=\"kf-alert__title\">{{ title() }}</p>\n }\n <div class=\"kf-alert__message\"><ng-content /></div>\n </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:center;gap:var(--kf-space-md);padding:calc(var(--kf-space-sm) + var(--kf-space-xs)) var(--kf-space-md);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);background:var(--kf-color-white);box-shadow:var(--kf-shadow-xs);color:var(--kf-color-text);font-size:var(--kf-font-size-body-sm);line-height:1.5}.kf-alert--info{--_tone: var(--kf-color-info);--_soft: var(--kf-color-info-soft);--_strong: var(--kf-color-info-strong)}.kf-alert--ok{--_tone: var(--kf-color-success);--_soft: var(--kf-color-success-soft);--_strong: var(--kf-color-success-strong)}.kf-alert--warn{--_tone: var(--kf-color-warning);--_soft: var(--kf-color-warning-soft);--_strong: var(--kf-color-warning-strong)}.kf-alert--error{--_tone: var(--kf-color-error);--_soft: var(--kf-color-error-soft);--_strong: var(--kf-color-error-strong)}.kf-alert__icon{align-items:center;justify-content:center;inline-size:40px;block-size:40px;border-radius:var(--kf-radius-sm);background:var(--_strong);color:var(--kf-color-white)}.kf-alert__body{display:flex;flex:1 1 0;flex-wrap:wrap;align-items:center;gap:var(--kf-space-md) var(--kf-space-lg);min-width:0}.kf-alert__content{display:flex;flex:1 1 20rem;flex-direction:column;gap:2px;min-width:0}.kf-alert__title{margin:0;color:var(--kf-color-ink);font-family:var(--kf-font-body);font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-medium);line-height:1.5}.kf-alert__message{max-inline-size:72ch;color:var(--kf-color-text);overflow-wrap:anywhere}.kf-alert__message:has(>div,>section,>form,>table){max-inline-size:none}.kf-alert__message:empty{display:none}.kf-alert__actions{display:flex;flex:0 1 auto;flex-wrap:wrap;align-items:center;gap:calc(var(--kf-space-sm) + var(--kf-space-xs));min-width:0;max-width:100%}.kf-alert__actions:empty{display:none}.kf-alert__actions>*{max-width:100%;min-width:0}.kf-alert__actions ::ng-deep>:is(div,span,ul)[kfAlertActions]{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--kf-space-sm) + var(--kf-space-xs));margin:0;padding:0;list-style:none}.kf-alert__close{position:relative;flex:none;display:inline-flex;align-self:center;margin-inline-start:var(--kf-space-sm);padding:2px;border:none;background:transparent;color:var(--kf-color-text-muted);border-radius:var(--kf-radius-xs);cursor:pointer;transition:background-color .14s ease,color .14s ease}.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{background:var(--kf-color-gray-100);color:var(--kf-color-ink)}.kf-alert__close:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}@media(prefers-reduced-motion:reduce){.kf-alert__close{transition:none}}.kf-alert--bar{gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);border-color:color-mix(in srgb,var(--_tone) 40%,var(--_soft));border-width:1px 0;border-radius:0;background:var(--_soft);box-shadow:none}.kf-alert--bar .kf-alert__icon{inline-size:auto;block-size:auto;border-radius:0;background:none;color:var(--_strong)}.kf-alert--bar .kf-alert__body{row-gap:var(--kf-space-sm)}.kf-alert--bar .kf-alert__content{flex-flow:row wrap;align-items:baseline;column-gap:var(--kf-space-xs)}.kf-alert--bar .kf-alert__title{font-size:inherit}.kf-alert--bar .kf-alert__message{max-inline-size:none}.kf-alert--bar .kf-alert__actions{flex-basis:100%}.kf-alert--bar .kf-alert__close:hover{background:color-mix(in srgb,var(--_strong) 12%,transparent)}:host([data-appearance=\"tint\"]) .kf-alert:not(.kf-alert--bar){padding-block:var(--kf-space-md);border-color:transparent;background:var(--_soft);box-shadow:none}:host([data-appearance=\"tint\"]) .kf-alert:not(.kf-alert--bar) .kf-alert__icon{inline-size:24px;block-size:24px;border-radius:0;background:none;color:var(--_strong)}:host([data-appearance=\"tint\"]) .kf-alert:not(.kf-alert--bar) .kf-alert__close:hover{background:color-mix(in srgb,var(--_strong) 12%,transparent)}:host([data-appearance=\"rail\"]) .kf-alert:not(.kf-alert--bar){gap:0;padding:0}:host([data-appearance=\"rail\"]) .kf-alert:not(.kf-alert--bar) .kf-alert__icon{align-self:stretch;box-sizing:border-box;inline-size:56px;block-size:auto;min-block-size:56px;border-inline-end:1px solid var(--kf-color-border);border-radius:calc(var(--kf-radius-md) - 1px) 0 0 calc(var(--kf-radius-md) - 1px);background:color-mix(in srgb,var(--_tone) 22%,var(--_soft));color:color-mix(in srgb,var(--_strong) 75%,var(--kf-color-ink))}:host([data-appearance=\"rail\"]) .kf-alert:not(.kf-alert--bar) .kf-alert__body{padding:var(--kf-space-md)}:host([data-appearance=\"rail\"]) .kf-alert:not(.kf-alert--bar) .kf-alert__close{margin-inline-end:var(--kf-space-md)}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }] });
|
|
1289
1333
|
}
|
|
1290
1334
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Alert, decorators: [{
|
|
1291
1335
|
type: Component,
|
|
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=\"
|
|
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"] }] } });
|
|
1336
|
+
args: [{ selector: 'kf-alert', imports: [Icon], host: { '[attr.data-appearance]': 'appearance()' }, 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]=\"iconSize()\" />\n <div class=\"kf-alert__body\">\n <div class=\"kf-alert__content\">\n @if (title()) {\n <p class=\"kf-alert__title\">{{ title() }}</p>\n }\n <div class=\"kf-alert__message\"><ng-content /></div>\n </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:center;gap:var(--kf-space-md);padding:calc(var(--kf-space-sm) + var(--kf-space-xs)) var(--kf-space-md);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);background:var(--kf-color-white);box-shadow:var(--kf-shadow-xs);color:var(--kf-color-text);font-size:var(--kf-font-size-body-sm);line-height:1.5}.kf-alert--info{--_tone: var(--kf-color-info);--_soft: var(--kf-color-info-soft);--_strong: var(--kf-color-info-strong)}.kf-alert--ok{--_tone: var(--kf-color-success);--_soft: var(--kf-color-success-soft);--_strong: var(--kf-color-success-strong)}.kf-alert--warn{--_tone: var(--kf-color-warning);--_soft: var(--kf-color-warning-soft);--_strong: var(--kf-color-warning-strong)}.kf-alert--error{--_tone: var(--kf-color-error);--_soft: var(--kf-color-error-soft);--_strong: var(--kf-color-error-strong)}.kf-alert__icon{align-items:center;justify-content:center;inline-size:40px;block-size:40px;border-radius:var(--kf-radius-sm);background:var(--_strong);color:var(--kf-color-white)}.kf-alert__body{display:flex;flex:1 1 0;flex-wrap:wrap;align-items:center;gap:var(--kf-space-md) var(--kf-space-lg);min-width:0}.kf-alert__content{display:flex;flex:1 1 20rem;flex-direction:column;gap:2px;min-width:0}.kf-alert__title{margin:0;color:var(--kf-color-ink);font-family:var(--kf-font-body);font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-medium);line-height:1.5}.kf-alert__message{max-inline-size:72ch;color:var(--kf-color-text);overflow-wrap:anywhere}.kf-alert__message:has(>div,>section,>form,>table){max-inline-size:none}.kf-alert__message:empty{display:none}.kf-alert__actions{display:flex;flex:0 1 auto;flex-wrap:wrap;align-items:center;gap:calc(var(--kf-space-sm) + var(--kf-space-xs));min-width:0;max-width:100%}.kf-alert__actions:empty{display:none}.kf-alert__actions>*{max-width:100%;min-width:0}.kf-alert__actions ::ng-deep>:is(div,span,ul)[kfAlertActions]{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--kf-space-sm) + var(--kf-space-xs));margin:0;padding:0;list-style:none}.kf-alert__close{position:relative;flex:none;display:inline-flex;align-self:center;margin-inline-start:var(--kf-space-sm);padding:2px;border:none;background:transparent;color:var(--kf-color-text-muted);border-radius:var(--kf-radius-xs);cursor:pointer;transition:background-color .14s ease,color .14s ease}.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{background:var(--kf-color-gray-100);color:var(--kf-color-ink)}.kf-alert__close:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}@media(prefers-reduced-motion:reduce){.kf-alert__close{transition:none}}.kf-alert--bar{gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);border-color:color-mix(in srgb,var(--_tone) 40%,var(--_soft));border-width:1px 0;border-radius:0;background:var(--_soft);box-shadow:none}.kf-alert--bar .kf-alert__icon{inline-size:auto;block-size:auto;border-radius:0;background:none;color:var(--_strong)}.kf-alert--bar .kf-alert__body{row-gap:var(--kf-space-sm)}.kf-alert--bar .kf-alert__content{flex-flow:row wrap;align-items:baseline;column-gap:var(--kf-space-xs)}.kf-alert--bar .kf-alert__title{font-size:inherit}.kf-alert--bar .kf-alert__message{max-inline-size:none}.kf-alert--bar .kf-alert__actions{flex-basis:100%}.kf-alert--bar .kf-alert__close:hover{background:color-mix(in srgb,var(--_strong) 12%,transparent)}:host([data-appearance=\"tint\"]) .kf-alert:not(.kf-alert--bar){padding-block:var(--kf-space-md);border-color:transparent;background:var(--_soft);box-shadow:none}:host([data-appearance=\"tint\"]) .kf-alert:not(.kf-alert--bar) .kf-alert__icon{inline-size:24px;block-size:24px;border-radius:0;background:none;color:var(--_strong)}:host([data-appearance=\"tint\"]) .kf-alert:not(.kf-alert--bar) .kf-alert__close:hover{background:color-mix(in srgb,var(--_strong) 12%,transparent)}:host([data-appearance=\"rail\"]) .kf-alert:not(.kf-alert--bar){gap:0;padding:0}:host([data-appearance=\"rail\"]) .kf-alert:not(.kf-alert--bar) .kf-alert__icon{align-self:stretch;box-sizing:border-box;inline-size:56px;block-size:auto;min-block-size:56px;border-inline-end:1px solid var(--kf-color-border);border-radius:calc(var(--kf-radius-md) - 1px) 0 0 calc(var(--kf-radius-md) - 1px);background:color-mix(in srgb,var(--_tone) 22%,var(--_soft));color:color-mix(in srgb,var(--_strong) 75%,var(--kf-color-ink))}:host([data-appearance=\"rail\"]) .kf-alert:not(.kf-alert--bar) .kf-alert__body{padding:var(--kf-space-md)}:host([data-appearance=\"rail\"]) .kf-alert:not(.kf-alert--bar) .kf-alert__close{margin-inline-end:var(--kf-space-md)}\n"] }]
|
|
1337
|
+
}], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", 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"] }] } });
|
|
1294
1338
|
|
|
1295
1339
|
/**
|
|
1296
1340
|
* Fila clickeable de una lista de pendientes/alertas: ícono circular con
|
|
@@ -4549,6 +4593,21 @@ const BAR_TONE = {
|
|
|
4549
4593
|
* <kf-stat-card icon="clock" tone="warn" value="7" label="Por vencer" [bar]="35" hint="7 de 20"
|
|
4550
4594
|
* clickable [pressed]="filter() === 'due'" (cardClick)="toggle('due')" />
|
|
4551
4595
|
*
|
|
4596
|
+
* - `badge` (+ `badgeTone`, default `'neutral'`): insignia (`kf-badge`) a la
|
|
4597
|
+
* derecha de la etiqueta, para un estado puntual ("Urgente", "Nuevo"). Es
|
|
4598
|
+
* texto real en el DOM, así que un lector de pantalla lo lee tras la
|
|
4599
|
+
* etiqueta: el tono refuerza el significado, no lo porta solo. Si el
|
|
4600
|
+
* ancho no alcanza, baja a la línea siguiente en vez de recortarse. Sin
|
|
4601
|
+
* `badge` (o con texto vacío) la card no cambia. Funciona con `density`,
|
|
4602
|
+
* `clickable` y `loading`.
|
|
4603
|
+
*
|
|
4604
|
+
* <kf-stat-card icon="clock" tone="warn" value="7" label="Por vencer" badge="Urgente" badgeTone="error" />
|
|
4605
|
+
*
|
|
4606
|
+
* Alto: la card ocupa el 100% del alto de su contenedor cuando este lo fija
|
|
4607
|
+
* (celda de una grilla o ítem estirado de un flex), de modo que las cards de
|
|
4608
|
+
* una misma fila miden igual sin `::ng-deep`. En un contenedor de alto
|
|
4609
|
+
* automático mide lo que su contenido, como siempre.
|
|
4610
|
+
*
|
|
4552
4611
|
* `density` (`'default'` | `'compact'`): `'compact'` es la variante para
|
|
4553
4612
|
* pantallas angostas — padding de `--kf-space-md`, ícono de 40px y valor de
|
|
4554
4613
|
* `--kf-font-size-title-sm`, con el mismo contenido. Si la card mide 210px de
|
|
@@ -4564,7 +4623,7 @@ const BAR_TONE = {
|
|
|
4564
4623
|
* `loading` (default `false`): mientras es `true` la card dibuja su esqueleto
|
|
4565
4624
|
* en vez del contenido, con el MISMO cascarón (borde, padding, ícono de 50px)
|
|
4566
4625
|
* y líneas del alto real de cada texto — valor, etiqueta y, si se pasaron,
|
|
4567
|
-
* nota, barra
|
|
4626
|
+
* nota, barra, `hint` e insignia —, así que al llegar los datos no hay salto de
|
|
4568
4627
|
* layout. Pasa los mismos inputs que usarás cargada para que el esqueleto
|
|
4569
4628
|
* reserve las mismas líneas. Marca la card con `aria-busy="true"`, no es
|
|
4570
4629
|
* clicable ni expone su texto a lectores de pantalla mientras carga.
|
|
@@ -4588,6 +4647,12 @@ class StatCard {
|
|
|
4588
4647
|
/** Texto secundario bajo la barra (o bajo la nota si no hay barra). */
|
|
4589
4648
|
hint = input(/* @ts-ignore */
|
|
4590
4649
|
...(ngDevMode ? [undefined, { debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
4650
|
+
/** Texto de la insignia a la derecha de la etiqueta; vacío/ausente = sin insignia. */
|
|
4651
|
+
badge = input(/* @ts-ignore */
|
|
4652
|
+
...(ngDevMode ? [undefined, { debugName: "badge" }] : /* istanbul ignore next */ []));
|
|
4653
|
+
/** Tono semántico de la insignia (`kf-badge`). */
|
|
4654
|
+
badgeTone = input('neutral', /* @ts-ignore */
|
|
4655
|
+
...(ngDevMode ? [{ debugName: "badgeTone" }] : /* istanbul ignore next */ []));
|
|
4591
4656
|
/**
|
|
4592
4657
|
* Estado de alternancia (`aria-pressed`) cuando la card es `clickable`.
|
|
4593
4658
|
* `null` (default) = no aplica: el atributo no se emite.
|
|
@@ -4610,14 +4675,14 @@ class StatCard {
|
|
|
4610
4675
|
}, /* @ts-ignore */
|
|
4611
4676
|
...(ngDevMode ? [{ debugName: "hasBar" }] : /* istanbul ignore next */ []));
|
|
4612
4677
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StatCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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"] }] });
|
|
4678
|
+
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 }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeTone: { classPropertyName: "badgeTone", publicName: "badgeTone", 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 @if (badge()) {\n <span class=\"kf-stat-card__heading kf-stat-card__heading--bone\">\n <span class=\"kf-stat-card__label kf-bone\" style=\"--kf-bone-width: 70%\">{{\n label()\n }}</span>\n <span class=\"kf-stat-card__badge-bone kf-bone\" style=\"--kf-bone-width: auto\">{{\n badge()\n }}</span>\n </span>\n } @else {\n <span class=\"kf-stat-card__label kf-bone\" style=\"--kf-bone-width: 70%\">{{ label() }}</span>\n }\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 @if (badge()) {\n <span class=\"kf-stat-card__heading\">\n <span class=\"kf-stat-card__label\">{{ label() }}</span>\n <kf-badge class=\"kf-stat-card__badge\" [tone]=\"badgeTone()\">{{ badge() }}</kf-badge>\n </span>\n } @else {\n <span class=\"kf-stat-card__label\">{{ label() }}</span>\n }\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%;height:100%;box-sizing:border-box;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__heading{display:flex;flex-wrap:wrap;align-items:center;gap:2px var(--kf-space-sm);min-width:0}.kf-stat-card__heading--bone{flex-wrap:nowrap}.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__badge-bone{padding:var(--kf-space-xs) var(--kf-space-sm);border-radius:var(--kf-radius-pill);font-size:var(--kf-font-size-caption);font-weight:600;line-height:1}.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__heading,.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,.kf-stat-card--compact .kf-stat-card__heading{margin-top:6px}.kf-stat-card--compact .kf-stat-card__heading .kf-stat-card__label{margin-top:0}.kf-stat-card--compact .kf-stat-card__chevron{display:none}}\n"], dependencies: [{ kind: "component", type: Badge, selector: "kf-badge", inputs: ["tone", "variant", "dot", "truncate"] }, { 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"] }] });
|
|
4614
4679
|
}
|
|
4615
4680
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StatCard, decorators: [{
|
|
4616
4681
|
type: Component,
|
|
4617
|
-
args: [{ selector: 'kf-stat-card', imports: [Icon, NgTemplateOutlet, Progress], host: {
|
|
4682
|
+
args: [{ selector: 'kf-stat-card', imports: [Badge, Icon, NgTemplateOutlet, Progress], host: {
|
|
4618
4683
|
'[class.kf-stat-card-host--compact]': "density() === 'compact'",
|
|
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"] }]
|
|
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"] }] } });
|
|
4684
|
+
}, 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 @if (badge()) {\n <span class=\"kf-stat-card__heading kf-stat-card__heading--bone\">\n <span class=\"kf-stat-card__label kf-bone\" style=\"--kf-bone-width: 70%\">{{\n label()\n }}</span>\n <span class=\"kf-stat-card__badge-bone kf-bone\" style=\"--kf-bone-width: auto\">{{\n badge()\n }}</span>\n </span>\n } @else {\n <span class=\"kf-stat-card__label kf-bone\" style=\"--kf-bone-width: 70%\">{{ label() }}</span>\n }\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 @if (badge()) {\n <span class=\"kf-stat-card__heading\">\n <span class=\"kf-stat-card__label\">{{ label() }}</span>\n <kf-badge class=\"kf-stat-card__badge\" [tone]=\"badgeTone()\">{{ badge() }}</kf-badge>\n </span>\n } @else {\n <span class=\"kf-stat-card__label\">{{ label() }}</span>\n }\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%;height:100%;box-sizing:border-box;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__heading{display:flex;flex-wrap:wrap;align-items:center;gap:2px var(--kf-space-sm);min-width:0}.kf-stat-card__heading--bone{flex-wrap:nowrap}.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__badge-bone{padding:var(--kf-space-xs) var(--kf-space-sm);border-radius:var(--kf-radius-pill);font-size:var(--kf-font-size-caption);font-weight:600;line-height:1}.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__heading,.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,.kf-stat-card--compact .kf-stat-card__heading{margin-top:6px}.kf-stat-card--compact .kf-stat-card__heading .kf-stat-card__label{margin-top:0}.kf-stat-card--compact .kf-stat-card__chevron{display:none}}\n"] }]
|
|
4685
|
+
}], 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 }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeTone", 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"] }] } });
|
|
4621
4686
|
|
|
4622
4687
|
/** Cantidad de elementos por defecto de cada variante (`count` sin valor). */
|
|
4623
4688
|
const DEFAULT_COUNT = {
|
|
@@ -4687,7 +4752,7 @@ class SkeletonPreset {
|
|
|
4687
4752
|
formColumns = computed(() => (this.columns() === 2 ? 2 : 1), /* @ts-ignore */
|
|
4688
4753
|
...(ngDevMode ? [{ debugName: "formColumns" }] : /* istanbul ignore next */ []));
|
|
4689
4754
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SkeletonPreset, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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"] }] });
|
|
4755
|
+
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", "badge", "badgeTone", "pressed", "density", "loading", "clickable"], outputs: ["cardClick"] }] });
|
|
4691
4756
|
}
|
|
4692
4757
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SkeletonPreset, decorators: [{
|
|
4693
4758
|
type: Component,
|