@keepui/ui 0.1.7 → 0.3.0

package/fesm2022/keepui-ui.mjs

@@ -123,7 +123,7 @@ class ButtonComponent {
                 'min-h-[2.75rem] text-sm font-medium cursor-pointer select-none',
                 'transition-colors duration-200',
                 'focus-visible:outline-none focus-visible:ring-2',
-                'focus-visible:ring-keepui-primary focus-visible:ring-offset-2',
+                'focus-visible:ring-ku-primary-border focus-visible:ring-offset-2',
                 'disabled:opacity-50 disabled:cursor-not-allowed',
             ].join(' ');
             const sizeClass = this.fullWidth()
@@ -137,25 +137,24 @@ class ButtonComponent {
             };
             const variantMap = {
                 primary: [
-                    'bg-keepui-primary text-keepui-text dark:bg-keepui-primary border border-keepui-primary',
-                    'enabled:hover:bg-keepui-primary-hover enabled:hover:border-keepui-primary-hover',
-                    'enabled:active:bg-keepui-primary-active enabled:active:border-keepui-primary-active',
+                    'bg-ku-action-primary text-white border border-ku-action-primary',
+                    'enabled:hover:opacity-90',
+                    'enabled:active:opacity-80',
                 ].join(' '),
                 secondary: [
-                    'bg-keepui-surface text-keepui-text border border-keepui-border',
-                    'enabled:hover:bg-keepui-surface-hover enabled:hover:border-keepui-border-strong',
-                    'disabled:text-keepui-text-disabled',
+                    'bg-ku-primary text-ku-action-primary border border-ku-action-primary',
+                    'enabled:hover:bg-ku-action-background transition-colors',
                 ].join(' '),
                 outline: [
-                    'bg-transparent border border-keepui-border text-keepui-text',
-                    'enabled:hover:border-keepui-primary enabled:hover:text-keepui-primary',
+                    'bg-ku-primary border border-ku-secondary-border text-ku-gray-text',
+                    'enabled:hover:text-ku-action-primary enabled:hover:border-ku-action-primary transition-colors',
                 ].join(' '),
                 ghost: [
-                    'bg-transparent border border-keepui-primary text-keepui-primary',
-                    'enabled:hover:bg-keepui-primary/10',
+                    'bg-transparent border border-ku-action-primary text-ku-action-primary',
+                    'enabled:hover:bg-ku-action-background',
                 ].join(' '),
                 danger: [
-                    'bg-keepui-error text-keepui-error-fg border border-keepui-error',
+                    'bg-ku-error-primary text-white border border-ku-error-primary',
                     'enabled:hover:opacity-90',
                     'enabled:active:opacity-80',
                 ].join(' '),
@@ -224,60 +223,314 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         }] });
 
 /**
- * A versatile card container component.
+ * Contenedor versátil con soporte de variante, padding, color, estado clickable,
+ * seleccionado y scrollable.
+ *
+ * `padding="screen"` aplica padding lateral y superior pero omite el inferior
+ * intencionadamente para que el contenido parezca continuar más allá del área visible,
+ * invitando al usuario a hacer scroll. Un `div` espaciador se inserta automáticamente
+ * al final del contenido proyectado: cuando el usuario llega al fondo, el espaciador
+ * reproduce el padding inferior correcto sin que el consumidor deba declararlo.
  *
  * ```html
- * <keepui-card>
- *   <h2>Title</h2>
- *   <p>Some content</p>
- * </keepui-card>
+ * <keepui-card>Contenido</keepui-card>
  *
- * <keepui-card [elevation]="2">
- *   Elevated card
+ * <keepui-card variant="flat" padding="lg" [clickable]="true" (clicked)="onSelect()">
+ *   Card clicable
  * </keepui-card>
+ *
+ * <div class="h-screen overflow-hidden">
+ *   <keepui-card padding="screen" [scrollable]="true" [fullHeight]="true">
+ *     Contenido largo — el padding inferior se gestiona automáticamente
+ *   </keepui-card>
+ * </div>
  * ```
  */
 class CardComponent {
     constructor() {
-        /** Shadow elevation level (0–3). */
-        this.elevation = input(1);
+        this.BASE_CLASS = 'rounded-xl transition-colors overflow-hidden';
+        this.VARIANT_CLASS_MAP = {
+            flat: '',
+            outlined: 'border border-ku-secondary-border',
+        };
+        this.SELECTED_VARIANT_CLASS_MAP = {
+            flat: 'border border-ku-brand-border',
+            outlined: 'border border-ku-brand-border',
+        };
+        this.PADDING_CLASS_MAP = {
+            none: '',
+            sm: 'p-3',
+            md: 'p-4',
+            lg: 'p-6',
+            screen: 'px-4 pt-4',
+        };
+        this.COLORS_CLASS_MAP = {
+            primary: 'bg-ku-primary',
+            secondary: 'bg-ku-secondary',
+        };
+        this.variant = input('outlined');
+        this.padding = input('md');
+        this.colors = input('primary');
+        this.clickable = input(false);
+        this.selected = input(false);
+        this.scrollable = input(false);
+        this.fullHeight = input(false);
+        this.clicked = output();
         this.cardClass = computed(() => {
-            const base = [
-                'rounded-lg p-4',
-                'bg-keepui-surface border border-keepui-border text-keepui-text',
-                'transition-all duration-200',
-            ].join(' ');
-            const shadowMap = {
-                0: '',
-                1: 'shadow-keepui-sm',
-                2: 'shadow-keepui-md',
-                3: 'shadow-keepui-lg',
-            };
-            const shadow = shadowMap[this.elevation()];
-            return shadow ? `${base} ${shadow}` : base;
+            const variantClass = this.selected()
+                ? this.SELECTED_VARIANT_CLASS_MAP[this.variant()]
+                : this.VARIANT_CLASS_MAP[this.variant()];
+            const classes = [
+                this.BASE_CLASS,
+                this.COLORS_CLASS_MAP[this.colors()],
+                variantClass,
+                this.PADDING_CLASS_MAP[this.padding()],
+            ];
+            if (this.clickable()) {
+                classes.push('cursor-pointer hover:bg-ku-primary-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-ku-brand-border focus-visible:ring-offset-2');
+            }
+            if (this.scrollable()) {
+                classes.push('overflow-y-auto', 'overflow-x-auto');
+            }
+            if (this.fullHeight()) {
+                classes.push('h-full');
+            }
+            return classes.filter(Boolean).join(' ');
         });
     }
+    onCardClick() {
+        if (this.clickable()) {
+            this.clicked.emit();
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.20", type: CardComponent, isStandalone: true, selector: "keepui-card", inputs: { elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
-    <div [class]="cardClass()">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: CardComponent, isStandalone: true, selector: "keepui-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, fullHeight: { classPropertyName: "fullHeight", publicName: "fullHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.h-full": "fullHeight()" }, classAttribute: "block" }, ngImport: i0, template: `
+    <div
+      [class]="cardClass()"
+      (click)="onCardClick()"
+      [attr.role]="clickable() ? 'button' : null"
+      [attr.tabindex]="clickable() ? 0 : null"
+      (keydown.enter)="onCardClick()"
+      (keydown.space)="onCardClick()"
+    >
       <ng-content />
+      @if (padding() === 'screen') {
+        <div class="h-4 shrink-0" aria-hidden="true"></div>
+      }
     </div>
-  `, isInline: true }); }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'keepui-card',
                     standalone: true,
-                    host: { class: 'block' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'block',
+                        '[class.h-full]': 'fullHeight()',
+                    },
                     template: `
-    <div [class]="cardClass()">
+    <div
+      [class]="cardClass()"
+      (click)="onCardClick()"
+      [attr.role]="clickable() ? 'button' : null"
+      [attr.tabindex]="clickable() ? 0 : null"
+      (keydown.enter)="onCardClick()"
+      (keydown.space)="onCardClick()"
+    >
       <ng-content />
+      @if (padding() === 'screen') {
+        <div class="h-4 shrink-0" aria-hidden="true"></div>
+      }
     </div>
   `,
                 }]
         }] });
 
+/**
+ * Generic SVG sprite icon renderer.
+ *
+ * Renders a `<use href="#name">` reference pointing to an SVG symbol pre-registered
+ * in the DOM by the consuming application (e.g. via `IconRegistryService`).
+ *
+ * Accessibility:
+ * - When used decoratively (default), the SVG carries `aria-hidden="true"` automatically.
+ * - When used as a standalone meaningful icon, supply an `ariaLabel` — the SVG will
+ *   receive `role="img"` and `aria-label` accordingly.
+ *
+ * ```html
+ * <!-- Decorative — hidden from screen readers -->
+ * <keepui-icon name="check-icon" [size]="20" aria-hidden="true" />
+ *
+ * <!-- Meaningful standalone icon -->
+ * <keepui-icon name="close-icon" ariaLabel="Cerrar" />
+ * ```
+ */
+class IconComponent {
+    constructor() {
+        /** ID of the SVG symbol to render (without the `#` prefix). */
+        this.name = input.required();
+        /** Width and height of the icon in pixels. @default 24 */
+        this.size = input(24);
+        /** `viewBox` attribute forwarded to the `<svg>` element. @default '0 0 24 24' */
+        this.viewBox = input('0 0 24 24');
+        /**
+         * Accessible label for standalone icons.
+         * When provided, sets `role="img"` and `aria-label` on the SVG.
+         * When omitted, the SVG is marked `aria-hidden="true"` (decorative).
+         * @default ''
+         */
+        this.ariaLabel = input('');
+        this.href = computed(() => `#${this.name()}`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.20", type: IconComponent, isStandalone: true, selector: "keepui-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, viewBox: { classPropertyName: "viewBox", publicName: "viewBox", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "inline-flex items-center justify-center" }, ngImport: i0, template: `
+    <svg
+      class="block"
+      [attr.width]="size()"
+      [attr.height]="size()"
+      [attr.viewBox]="viewBox()"
+      [attr.aria-hidden]="ariaLabel() ? null : true"
+      [attr.aria-label]="ariaLabel() || null"
+      [attr.role]="ariaLabel() ? 'img' : null"
+    >
+      <use [attr.href]="href()" />
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'keepui-icon',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'inline-flex items-center justify-center',
+                    },
+                    template: `
+    <svg
+      class="block"
+      [attr.width]="size()"
+      [attr.height]="size()"
+      [attr.viewBox]="viewBox()"
+      [attr.aria-hidden]="ariaLabel() ? null : true"
+      [attr.aria-label]="ariaLabel() || null"
+      [attr.role]="ariaLabel() ? 'img' : null"
+    >
+      <use [attr.href]="href()" />
+    </svg>
+  `,
+                }]
+        }] });
+
+/**
+ * Circular icon-only action button with `default` and `danger` variants,
+ * loading state, and full accessibility support.
+ *
+ * Because this button renders no visible text, `ariaLabel` is **required** to
+ * satisfy WCAG 2.1 SC 4.1.2 (Name, Role, Value).
+ *
+ * The icon color is inherited automatically via `currentColor` from the button's
+ * text color, so SVG symbols defined with `stroke="currentColor"` will adapt to
+ * both variants and themes without extra classes.
+ *
+ * ```html
+ * <keepui-icon-action-button icon="edit-icon" ariaLabel="Editar" />
+ *
+ * <keepui-icon-action-button
+ *   icon="trash-icon"
+ *   variant="danger"
+ *   ariaLabel="Eliminar elemento"
+ *   [loading]="isDeleting()"
+ * />
+ * ```
+ */
+class IconActionButtonComponent {
+    constructor() {
+        /** ID of the SVG symbol to render (without the `#` prefix). */
+        this.icon = input.required();
+        /**
+         * Accessible label for the button. Always required — icon-only buttons must
+         * have a programmatic name for screen readers (WCAG 2.1 SC 4.1.2).
+         */
+        this.ariaLabel = input.required();
+        /** Visual style variant. @default 'default' */
+        this.variant = input('default');
+        /** Size of the inner icon in pixels. @default 20 */
+        this.iconSize = input(20);
+        /** HTML `type` attribute of the inner `<button>`. @default 'button' */
+        this.type = input('button');
+        /** Disables the button when `true`. @default false */
+        this.disabled = input(false);
+        /**
+         * Shows an animated spinner and disables the button.
+         * Also sets `aria-busy="true"` on the element.
+         * @default false
+         */
+        this.loading = input(false);
+        this.isDisabled = computed(() => this.disabled() || this.loading());
+        this.buttonClass = computed(() => {
+            const base = [
+                'inline-flex items-center justify-center shrink-0 cursor-pointer',
+                'size-11 rounded-full border transition-colors',
+                'focus-visible:outline-none focus-visible:ring-2',
+                'focus-visible:ring-ku-primary-border focus-visible:ring-offset-2',
+                'disabled:cursor-not-allowed disabled:opacity-50',
+            ].join(' ');
+            const variantMap = {
+                default: [
+                    'border-ku-secondary-border bg-ku-primary text-ku-gray-text',
+                    'enabled:hover:bg-ku-action-background enabled:hover:border-ku-action-primary',
+                    'enabled:hover:text-ku-action-primary',
+                ].join(' '),
+                danger: [
+                    'border-ku-secondary-border bg-ku-primary text-ku-gray-text',
+                    'enabled:hover:bg-ku-error-background  enabled:hover:border-ku-error-primary enabled:hover:text-ku-error-primary',
+                    'enabled:hover:opacity-90',
+                ].join(' '),
+            };
+            return `${base} ${variantMap[this.variant()]}`;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IconActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: IconActionButtonComponent, isStandalone: true, selector: "keepui-icon-action-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <button
+      [attr.type]="type()"
+      [disabled]="isDisabled()"
+      [attr.aria-disabled]="isDisabled() ? true : null"
+      [attr.aria-busy]="loading() ? true : null"
+      [attr.aria-label]="ariaLabel()"
+      [class]="buttonClass()"
+    >
+      @if (loading()) {
+        <span class="keepui-iab-spinner" aria-hidden="true"></span>
+      } @else {
+        <keepui-icon [name]="icon()" [size]="iconSize()" />
+      }
+    </button>
+  `, isInline: true, styles: [".keepui-iab-spinner{display:inline-block;width:1.25em;height:1.25em;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:keepui-iab-spin .65s linear infinite;flex-shrink:0}@keyframes keepui-iab-spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "keepui-icon", inputs: ["name", "size", "viewBox", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IconActionButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'keepui-icon-action-button', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <button
+      [attr.type]="type()"
+      [disabled]="isDisabled()"
+      [attr.aria-disabled]="isDisabled() ? true : null"
+      [attr.aria-busy]="loading() ? true : null"
+      [attr.aria-label]="ariaLabel()"
+      [class]="buttonClass()"
+    >
+      @if (loading()) {
+        <span class="keepui-iab-spinner" aria-hidden="true"></span>
+      } @else {
+        <keepui-icon [name]="icon()" [size]="iconSize()" />
+      }
+    </button>
+  `, styles: [".keepui-iab-spinner{display:inline-block;width:1.25em;height:1.25em;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:keepui-iab-spin .65s linear infinite;flex-shrink:0}@keyframes keepui-iab-spin{to{transform:rotate(360deg)}}\n"] }]
+        }] });
+
 /**
  * Typed constants for every translation key used in @keepui/ui.
  *
@@ -375,7 +628,7 @@ class ImagePreviewComponent {
       @if (imageUrl()) {
         <div class="max-w-full">
           <img
-            class="max-w-full h-auto rounded border border-keepui-border"
+            class="max-w-full h-auto rounded border border-ku-secondary-border"
             [src]="imageUrl()"
             [attr.alt]="keys.PREVIEW_ALT | transloco"
           />
@@ -383,7 +636,7 @@ class ImagePreviewComponent {
       }
 
       @if (error()) {
-        <p class="text-keepui-error text-sm m-0" role="alert">{{ error() }}</p>
+        <p class="text-ku-red-text text-sm m-0" role="alert">{{ error() }}</p>
       }
 
     </div>
@@ -421,7 +674,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
       @if (imageUrl()) {
         <div class="max-w-full">
           <img
-            class="max-w-full h-auto rounded border border-keepui-border"
+            class="max-w-full h-auto rounded border border-ku-secondary-border"
             [src]="imageUrl()"
             [attr.alt]="keys.PREVIEW_ALT | transloco"
           />
@@ -429,7 +682,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
       }
 
       @if (error()) {
-        <p class="text-keepui-error text-sm m-0" role="alert">{{ error() }}</p>
+        <p class="text-ku-red-text text-sm m-0" role="alert">{{ error() }}</p>
       }
 
     </div>
@@ -652,5 +905,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonComponent, CardComponent, FILE_PORT, ImagePreviewComponent, KEEPUI_AVAILABLE_LANGUAGES, KEEPUI_TRANSLATIONS, KEEPUI_TRANSLATION_KEYS, KeepUiLanguageService, MockFileService, WebFileService, provideKeepUi, provideKeepUiI18n };
+export { ButtonComponent, CardComponent, FILE_PORT, IconActionButtonComponent, IconComponent, ImagePreviewComponent, KEEPUI_AVAILABLE_LANGUAGES, KEEPUI_TRANSLATIONS, KEEPUI_TRANSLATION_KEYS, KeepUiLanguageService, MockFileService, WebFileService, provideKeepUi, provideKeepUiI18n };
 //# sourceMappingURL=keepui-ui.mjs.map