@keepui/ui 0.4.0 → 0.5.0

package/fesm2022/keepui-ui.mjs

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, input, output, computed, ChangeDetectionStrategy, Component, inject, signal, DestroyRef, viewChild, model, effect, makeEnvironmentProviders } from '@angular/core';
+import { InjectionToken, Injectable, input, output, computed, ChangeDetectionStrategy, Component, inject, signal, DestroyRef, viewChild, model, effect, viewChildren, makeEnvironmentProviders } from '@angular/core';
 import { TranslocoPipe, TRANSLOCO_SCOPE, TranslocoService, provideTransloco } from '@jsverse/transloco';
+import { NgTemplateOutlet } from '@angular/common';
 import { of } from 'rxjs';
 
 /**
@@ -1723,6 +1724,467 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 }]
         }] });
 
+/**
+ * Accessible pill-style tab group with icon support and two visual variants.
+ *
+ * Implements the WAI-ARIA `tablist` pattern: keyboard navigation with arrow keys,
+ * `Home`, and `End`. Each tab carries `role="tab"` and `aria-selected`.
+ *
+ * Works identically on **web** and **Angular + Capacitor**.
+ *
+ * ```html
+ * <!-- Basic usage -->
+ * <keepui-tab-group
+ *   [tabs]="tabs"
+ *   [selectedTabId]="activeTab"
+ *   (tabChange)="activeTab = $event"
+ * />
+ *
+ * <!-- Filled variant -->
+ * <keepui-tab-group
+ *   variant="filled"
+ *   [tabs]="tabs"
+ *   [selectedTabId]="activeTab"
+ *   (tabChange)="activeTab = $event"
+ * />
+ * ```
+ */
+class TabGroupComponent {
+    constructor() {
+        /** List of tabs to render. */
+        this.tabs = input.required();
+        /** ID of the currently selected tab. */
+        this.selectedTabId = input.required();
+        /** Visual style variant. @default 'default' */
+        this.variant = input('default');
+        /**
+         * Accessible label for the tablist container.
+         * Provide a meaningful description when multiple tab groups exist on the page.
+         */
+        this.ariaLabel = input('');
+        /** Emits the `id` of the tab the user has selected. */
+        this.tabChange = output();
+        this.tabButtons = viewChildren('tabButton');
+        this.containerClass = computed(() => this.variant() === 'filled'
+            ? 'bg-ku-action-primary/10 border-ku-action-primary/20'
+            : 'bg-ku-secondary border-ku-secondary-border');
+    }
+    buttonClass(tabId) {
+        const isActive = this.selectedTabId() === tabId;
+        if (this.variant() === 'filled') {
+            return isActive
+                ? 'bg-ku-action-primary text-white'
+                : 'text-ku-gray-text hover:text-ku-primary-text hover:bg-ku-action-primary/10';
+        }
+        return isActive
+            ? 'bg-ku-primary text-ku-primary-text shadow-sm border border-ku-primary-border'
+            : 'text-ku-gray-text hover:text-ku-primary-text hover:bg-ku-secondary-hover';
+    }
+    iconClass(tabId) {
+        const isActive = this.selectedTabId() === tabId;
+        if (this.variant() === 'filled') {
+            return isActive ? 'text-white' : 'text-ku-gray-text';
+        }
+        return isActive ? 'text-ku-action-primary' : 'text-ku-gray-text';
+    }
+    onTabClick(tab) {
+        if (!tab.disabled && tab.id !== this.selectedTabId()) {
+            this.tabChange.emit(tab.id);
+        }
+    }
+    onKeydown(event) {
+        const tabs = this.tabs().filter(t => !t.disabled);
+        const activeIndex = tabs.findIndex(t => t.id === this.selectedTabId());
+        let nextIndex = activeIndex;
+        if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+            nextIndex = (activeIndex + 1) % tabs.length;
+        }
+        else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+            nextIndex = (activeIndex - 1 + tabs.length) % tabs.length;
+        }
+        else if (event.key === 'Home') {
+            nextIndex = 0;
+        }
+        else if (event.key === 'End') {
+            nextIndex = tabs.length - 1;
+        }
+        else {
+            return;
+        }
+        event.preventDefault();
+        const nextTab = tabs[nextIndex];
+        this.tabChange.emit(nextTab.id);
+        this.focusTab(nextTab.id);
+    }
+    focusTab(tabId) {
+        const allTabs = this.tabs();
+        const index = allTabs.findIndex(t => t.id === tabId);
+        const buttons = this.tabButtons();
+        buttons[index]?.nativeElement.focus();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TabGroupComponent, isStandalone: true, selector: "keepui-tab-group", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, selectedTabId: { classPropertyName: "selectedTabId", publicName: "selectedTabId", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div
+      role="tablist"
+      [attr.aria-label]="ariaLabel() || null"
+      class="flex items-center p-1 rounded-full border transition-colors duration-200"
+      [class]="containerClass()"
+      (keydown)="onKeydown($event)"
+    >
+      @for (tab of tabs(); track tab.id; let i = $index) {
+        <button
+          #tabButton
+          type="button"
+          role="tab"
+          [id]="'keepui-tab-' + tab.id"
+          [attr.aria-selected]="selectedTabId() === tab.id"
+          [attr.aria-disabled]="tab.disabled ? true : null"
+          [disabled]="tab.disabled || false"
+          [tabindex]="selectedTabId() === tab.id ? 0 : -1"
+          class="flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-full
+                 transition-colors duration-200 text-sm font-medium cursor-pointer
+                 min-h-[2.75rem]
+                 focus-visible:outline-none focus-visible:ring-2
+                 focus-visible:ring-ku-action-primary focus-visible:ring-offset-2
+                 disabled:cursor-not-allowed disabled:opacity-40"
+          [class]="buttonClass(tab.id)"
+          (click)="onTabClick(tab)"
+        >
+          @if (tab.icon) {
+            <keepui-icon
+              [name]="tab.icon"
+              [size]="16"
+              [class]="iconClass(tab.id)"
+              aria-hidden="true"
+            />
+          }
+          <span>{{ tab.label }}</span>
+        </button>
+      }
+    </div>
+  `, isInline: true, 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: TabGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'keepui-tab-group',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [IconComponent],
+                    template: `
+    <div
+      role="tablist"
+      [attr.aria-label]="ariaLabel() || null"
+      class="flex items-center p-1 rounded-full border transition-colors duration-200"
+      [class]="containerClass()"
+      (keydown)="onKeydown($event)"
+    >
+      @for (tab of tabs(); track tab.id; let i = $index) {
+        <button
+          #tabButton
+          type="button"
+          role="tab"
+          [id]="'keepui-tab-' + tab.id"
+          [attr.aria-selected]="selectedTabId() === tab.id"
+          [attr.aria-disabled]="tab.disabled ? true : null"
+          [disabled]="tab.disabled || false"
+          [tabindex]="selectedTabId() === tab.id ? 0 : -1"
+          class="flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-full
+                 transition-colors duration-200 text-sm font-medium cursor-pointer
+                 min-h-[2.75rem]
+                 focus-visible:outline-none focus-visible:ring-2
+                 focus-visible:ring-ku-action-primary focus-visible:ring-offset-2
+                 disabled:cursor-not-allowed disabled:opacity-40"
+          [class]="buttonClass(tab.id)"
+          (click)="onTabClick(tab)"
+        >
+          @if (tab.icon) {
+            <keepui-icon
+              [name]="tab.icon"
+              [size]="16"
+              [class]="iconClass(tab.id)"
+              aria-hidden="true"
+            />
+          }
+          <span>{{ tab.label }}</span>
+        </button>
+      }
+    </div>
+  `,
+                }]
+        }] });
+
+/**
+ * Visual step-progress indicator with optional navigation.
+ *
+ * Renders a sequence of numbered step circles connected by a progress bar.
+ * Completed steps show a check-mark; the active step is highlighted; future
+ * steps are muted. Steps with an `icon` replace the number with the given SVG symbol.
+ *
+ * Accessibility: uses `role="list"` / `role="listitem"` with `aria-current="step"` on
+ * the active item. When steps are interactive (i.e. `stepChange` is listened to),
+ * completed and current steps render as `<button>` elements; future steps remain
+ * inert `<span>` elements.
+ *
+ * Works identically on **web** and **Angular + Capacitor**.
+ *
+ * ```html
+ * <!-- Read-only progress indicator -->
+ * <keepui-stepper [steps]="steps" [activeIndex]="1" />
+ *
+ * <!-- Interactive stepper (go back to a previous step) -->
+ * <keepui-stepper
+ *   [steps]="steps"
+ *   [activeIndex]="currentStep"
+ *   (stepChange)="currentStep = $event"
+ * />
+ *
+ * <!-- Small variant -->
+ * <keepui-stepper [steps]="steps" [activeIndex]="0" size="sm" />
+ * ```
+ */
+class StepperComponent {
+    constructor() {
+        /** Steps to render. */
+        this.steps = input.required();
+        /** Zero-based index of the currently active step. @default 0 */
+        this.activeIndex = input(0);
+        /** Visual size of the step circles and connector bars. @default 'md' */
+        this.size = input('md');
+        /** Layout direction. @default 'horizontal' */
+        this.orientation = input('horizontal');
+        /**
+         * Accessible label for the `<nav>` element.
+         * @default ''
+         */
+        this.ariaLabel = input('');
+        /**
+         * Emits the zero-based index of the step the user clicked.
+         * Only completed steps and the active step are clickable.
+         * When no subscriber is attached, the stepper is purely visual.
+         */
+        this.stepChange = output();
+        this.iconSize = computed(() => (this.size() === 'sm' ? 12 : 16));
+        this.wrapperClass = computed(() => 'w-full');
+        this.listClass = computed(() => {
+            const base = 'list-none m-0 p-0 flex';
+            return this.orientation() === 'vertical'
+                ? `${base} flex-col gap-0`
+                : `${base} flex-row items-start`;
+        });
+        this.itemClass = computed(() => {
+            const base = 'flex';
+            return this.orientation() === 'vertical'
+                ? `${base} flex-row items-center flex-1`
+                : `${base} flex-col items-center flex-1`;
+        });
+        this.stepColumnClass = computed(() => {
+            return this.orientation() === 'vertical'
+                ? 'flex flex-row items-center gap-3'
+                : 'flex flex-col items-center gap-1.5';
+        });
+    }
+    isCompleted(index) {
+        return index < this.activeIndex();
+    }
+    isActive(index) {
+        return index === this.activeIndex();
+    }
+    isClickable(index, step) {
+        return !step.disabled && (this.isCompleted(index) || this.isActive(index));
+    }
+    onStepClick(index, step) {
+        if (!step.disabled) {
+            this.stepChange.emit(index);
+        }
+    }
+    bubbleClass(index) {
+        const sizeClass = this.size() === 'sm'
+            ? 'w-6 h-6 text-xs'
+            : 'w-9 h-9 text-sm';
+        const base = [
+            'inline-flex items-center justify-center rounded-full shrink-0',
+            'transition-colors duration-200',
+            'focus-visible:outline-none focus-visible:ring-2',
+            'focus-visible:ring-ku-action-primary focus-visible:ring-offset-2',
+            sizeClass,
+        ].join(' ');
+        if (this.isCompleted(index)) {
+            return `${base} bg-ku-action-primary text-white cursor-pointer`;
+        }
+        if (this.isActive(index)) {
+            return `${base} bg-ku-action-primary text-white ring-2 ring-ku-action-primary ring-offset-2`;
+        }
+        return `${base} bg-ku-secondary border-2 border-ku-secondary-border text-ku-gray-text cursor-default`;
+    }
+    labelClass(index) {
+        const base = 'text-xs font-medium text-center transition-colors duration-200';
+        if (this.isActive(index)) {
+            return `${base} text-ku-primary-text`;
+        }
+        if (this.isCompleted(index)) {
+            return `${base} text-ku-action-primary`;
+        }
+        return `${base} text-ku-gray-text`;
+    }
+    connectorClass(index) {
+        const filled = this.isCompleted(index) || this.isActive(index);
+        if (this.orientation() === 'vertical') {
+            const height = this.size() === 'sm' ? 'h-8' : 'h-10';
+            return [
+                `${height} w-0.5 mx-auto my-1 rounded-full transition-colors duration-300`,
+                filled ? 'bg-ku-action-primary' : 'bg-ku-secondary-border',
+            ].join(' ');
+        }
+        return [
+            'w-full h-0.5 mt-4 mb-1 rounded-full transition-colors duration-300',
+            filled ? 'bg-ku-action-primary' : 'bg-ku-secondary-border',
+        ].join(' ');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: StepperComponent, isStandalone: true, selector: "keepui-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stepChange: "stepChange" }, ngImport: i0, template: `
+    <nav
+      [attr.aria-label]="ariaLabel() || null"
+      [class]="wrapperClass()"
+    >
+      <ol
+        role="list"
+        [class]="listClass()"
+      >
+        @for (step of steps(); track step.id; let i = $index; let last = $last) {
+          <li
+            role="listitem"
+            [class]="itemClass()"
+            [attr.aria-current]="isActive(i) ? 'step' : null"
+          >
+            <div [class]="stepColumnClass()">
+              @if (isClickable(i, step)) {
+                <button
+                  type="button"
+                  [class]="bubbleClass(i)"
+                  [attr.aria-label]="step.label"
+                  [attr.aria-disabled]="step.disabled ? true : null"
+                  [disabled]="step.disabled || false"
+                  (click)="onStepClick(i, step)"
+                >
+                  <ng-container *ngTemplateOutlet="bubbleContent; context: { i, step }" />
+                </button>
+              } @else {
+                <span [class]="bubbleClass(i)" aria-hidden="true">
+                  <ng-container *ngTemplateOutlet="bubbleContent; context: { i, step }" />
+                </span>
+              }
+
+              <span [class]="labelClass(i)">{{ step.label }}</span>
+            </div>
+
+            @if (!last) {
+              <div [class]="connectorClass(i)"></div>
+            }
+          </li>
+        }
+      </ol>
+    </nav>
+
+    <ng-template #bubbleContent let-i="i" let-step="step">
+      @if (isCompleted(i)) {
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="3"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <polyline points="20 6 9 17 4 12" />
+        </svg>
+      } @else if (step.icon) {
+        <keepui-icon [name]="step.icon" [size]="iconSize()" aria-hidden="true" />
+      } @else {
+        <span class="font-semibold leading-none">{{ i + 1 }}</span>
+      }
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "keepui-icon", inputs: ["name", "size", "viewBox", "ariaLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: StepperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'keepui-stepper',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [IconComponent, NgTemplateOutlet],
+                    template: `
+    <nav
+      [attr.aria-label]="ariaLabel() || null"
+      [class]="wrapperClass()"
+    >
+      <ol
+        role="list"
+        [class]="listClass()"
+      >
+        @for (step of steps(); track step.id; let i = $index; let last = $last) {
+          <li
+            role="listitem"
+            [class]="itemClass()"
+            [attr.aria-current]="isActive(i) ? 'step' : null"
+          >
+            <div [class]="stepColumnClass()">
+              @if (isClickable(i, step)) {
+                <button
+                  type="button"
+                  [class]="bubbleClass(i)"
+                  [attr.aria-label]="step.label"
+                  [attr.aria-disabled]="step.disabled ? true : null"
+                  [disabled]="step.disabled || false"
+                  (click)="onStepClick(i, step)"
+                >
+                  <ng-container *ngTemplateOutlet="bubbleContent; context: { i, step }" />
+                </button>
+              } @else {
+                <span [class]="bubbleClass(i)" aria-hidden="true">
+                  <ng-container *ngTemplateOutlet="bubbleContent; context: { i, step }" />
+                </span>
+              }
+
+              <span [class]="labelClass(i)">{{ step.label }}</span>
+            </div>
+
+            @if (!last) {
+              <div [class]="connectorClass(i)"></div>
+            }
+          </li>
+        }
+      </ol>
+    </nav>
+
+    <ng-template #bubbleContent let-i="i" let-step="step">
+      @if (isCompleted(i)) {
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="3"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <polyline points="20 6 9 17 4 12" />
+        </svg>
+      } @else if (step.icon) {
+        <keepui-icon [name]="step.icon" [size]="iconSize()" aria-hidden="true" />
+      } @else {
+        <span class="font-semibold leading-none">{{ i + 1 }}</span>
+      }
+    </ng-template>
+  `,
+                }]
+        }] });
+
 /**
  * Registers KeepUI core providers for a **web** Angular application.
  *
@@ -1950,5 +2412,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonComponent, CardComponent, FILE_PORT, IconActionButtonComponent, IconComponent, ImagePreviewComponent, KEEPUI_AVAILABLE_LANGUAGES, KEEPUI_TRANSLATIONS, KEEPUI_TRANSLATION_KEYS, KeepUiLanguageService, MockFileService, SignalDropdownComponent, SignalTextInputComponent, SignalTextareaComponent, WebFileService, provideKeepUi, provideKeepUiI18n };
+export { ButtonComponent, CardComponent, FILE_PORT, IconActionButtonComponent, IconComponent, ImagePreviewComponent, KEEPUI_AVAILABLE_LANGUAGES, KEEPUI_TRANSLATIONS, KEEPUI_TRANSLATION_KEYS, KeepUiLanguageService, MockFileService, SignalDropdownComponent, SignalTextInputComponent, SignalTextareaComponent, StepperComponent, TabGroupComponent, WebFileService, provideKeepUi, provideKeepUiI18n };
 //# sourceMappingURL=keepui-ui.mjs.map