@raintonic/formaui 0.4.0 → 0.9.0

package/fesm2022/raintonic-formaui-components-strength-meter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"raintonic-formaui-components-strength-meter.mjs","sources":["../../../lib/components/strength-meter/strength-meter.types.ts","../../../lib/components/strength-meter/strength-meter.intl.ts","../../../lib/components/strength-meter/strength-meter.component.ts","../../../lib/components/strength-meter/strength-meter.component.html","../../../lib/components/strength-meter/raintonic-formaui-components-strength-meter.ts"],"sourcesContent":["export type PasswordStrength = 'weak' | 'fair' | 'good' | 'strong';\r\n\r\nexport interface PasswordStrengthConfig {\r\n  minLength?: number;\r\n  requireUppercase?: boolean;\r\n  requireLowercase?: boolean;\r\n  requireNumbers?: boolean;\r\n  requireSpecial?: boolean;\r\n}\r\n\r\nexport const DEFAULT_STRENGTH_CONFIG: PasswordStrengthConfig = {\r\n  minLength: 8,\r\n  requireUppercase: true,\r\n  requireLowercase: true,\r\n  requireNumbers: true,\r\n  requireSpecial: false,\r\n};\r\n","import { Injectable } from '@angular/core';\r\nimport { FuiIntlBase } from '@raintonic/formaui/core';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class FuiStrengthMeterIntl extends FuiIntlBase {\r\n  strengthAriaLabel(level: string): string {\r\n    return `Password strength: ${level}`;\r\n  }\r\n  ruleMinLength(min: number): string {\r\n    return `At least ${min} characters`;\r\n  }\r\n  ruleUppercase = 'Uppercase letter';\r\n  ruleLowercase = 'Lowercase letter';\r\n  ruleNumbers = 'Number';\r\n  ruleSpecial = 'Special character';\r\n}\r\n","import { Component, ChangeDetectionStrategy, ViewEncapsulation, input, computed, inject, Signal } from '@angular/core';\r\nimport { FUI_STRENGTH_METER } from '@raintonic/formaui/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { DEFAULT_STRENGTH_CONFIG, PasswordStrength } from './strength-meter.types';\r\nimport { FuiStrengthMeterIntl } from './strength-meter.intl';\r\nimport { ChangeDetectorRef } from '@angular/core';\r\n\r\n/**\r\n * # FuiStrengthMeterComponent\r\n *\r\n * A password strength meter that displays per-rule satisfaction bars\r\n * and a rule checklist. Computes strength from a `value` input (the\r\n * password string) and a `config` input controlling which rules apply.\r\n *\r\n * ## Features\r\n * - Per-rule bar segments that light up when satisfied\r\n * - Rule checklist with check/x icons\r\n * - Configurable rules (min length, uppercase, lowercase, numbers, special)\r\n * - Intl support via DI\r\n * - Can be used standalone or inside a password-input template\r\n *\r\n * ## Usage\r\n *\r\n * ### Standalone\r\n * ```html\r\n * <fui-strength-meter [value]=\"password\" [config]=\"{ minLength: 10 }\"></fui-strength-meter>\r\n * ```\r\n *\r\n * ### Used with password-input\r\n * Wire the strength meter alongside a password-input control to show real-time\r\n * password strength feedback.\r\n */\r\n@Component({\r\n  selector: 'fui-strength-meter',\r\n  standalone: true,\r\n  imports: [FuiIconComponent],\r\n  templateUrl: './strength-meter.component.html',\r\n  styleUrls: ['./strength-meter.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None,\r\n  providers: [{ provide: FUI_STRENGTH_METER, useExisting: FuiStrengthMeterComponent }],\r\n  host: {\r\n    class: 'fui-strength-meter',\r\n  },\r\n})\r\nexport class FuiStrengthMeterComponent {\r\n  readonly intl = inject(FuiStrengthMeterIntl);\r\n  private readonly _cdr = inject(ChangeDetectorRef);\r\n\r\n  /** The password value to evaluate. */\r\n  readonly value = input('');\r\n\r\n  /** Configuration controlling which rules are active. */\r\n  readonly config = input(DEFAULT_STRENGTH_CONFIG);\r\n\r\n  /** Computed overall strength level. */\r\n  readonly strength: Signal<PasswordStrength> = computed(() => {\r\n    return this._calculateStrength(this.value());\r\n  });\r\n\r\n  /**\r\n   * Per-rule satisfaction state. Each entry drives one bar segment and one\r\n   * checklist row.\r\n   */\r\n  readonly rules: Signal<{ key: string; label: string; satisfied: boolean }[]> = computed(() => {\r\n    const password = this.value();\r\n    const config = this.config();\r\n    const rules: { key: string; label: string; satisfied: boolean }[] = [];\r\n\r\n    const minLen = config.minLength ?? 8;\r\n    rules.push({\r\n      key: 'minLength',\r\n      label: this.intl.ruleMinLength(minLen),\r\n      satisfied: password.length >= minLen,\r\n    });\r\n    if (config.requireUppercase) {\r\n      rules.push({ key: 'uppercase', label: this.intl.ruleUppercase, satisfied: /[A-Z]/.test(password) });\r\n    }\r\n    if (config.requireLowercase) {\r\n      rules.push({ key: 'lowercase', label: this.intl.ruleLowercase, satisfied: /[a-z]/.test(password) });\r\n    }\r\n    if (config.requireNumbers) {\r\n      rules.push({ key: 'numbers', label: this.intl.ruleNumbers, satisfied: /[0-9]/.test(password) });\r\n    }\r\n    if (config.requireSpecial) {\r\n      rules.push({ key: 'special', label: this.intl.ruleSpecial, satisfied: /[^A-Za-z0-9]/.test(password) });\r\n    }\r\n    return rules;\r\n  });\r\n\r\n  constructor() {\r\n    this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => {\r\n      this._cdr.markForCheck();\r\n    });\r\n  }\r\n\r\n  private _calculateStrength(password: string): PasswordStrength {\r\n    if (!password || password.length === 0) {\r\n      return 'weak';\r\n    }\r\n\r\n    const config = this.config();\r\n    let score = 0;\r\n    const maxScore = 5;\r\n\r\n    const minLen = config.minLength ?? 8;\r\n    if (password.length >= minLen) {\r\n      score++;\r\n    }\r\n    if (password.length >= minLen + 4) {\r\n      score++;\r\n    }\r\n\r\n    if (/[A-Z]/.test(password)) score++;\r\n    if (/[a-z]/.test(password)) score++;\r\n    if (/[0-9]/.test(password)) score++;\r\n    if (/[^A-Za-z0-9]/.test(password)) score++;\r\n\r\n    const ratio = score / maxScore;\r\n    if (ratio <= 0.3) return 'weak';\r\n    if (ratio <= 0.5) return 'fair';\r\n    if (ratio <= 0.8) return 'good';\r\n    return 'strong';\r\n  }\r\n}\r\n","<div\r\n  class=\"fui-strength-meter__inner\"\r\n  aria-live=\"polite\"\r\n  role=\"group\"\r\n  [attr.aria-label]=\"intl.strengthAriaLabel(strength())\"\r\n>\r\n  <div class=\"fui-strength-meter__bars\">\r\n    @for (rule of rules(); track rule.key) {\r\n      <div\r\n        class=\"fui-strength-meter__bar-segment\"\r\n        [class.fui-strength-meter__bar-segment--satisfied]=\"rule.satisfied\"\r\n        [attr.aria-label]=\"rule.label + ': ' + (rule.satisfied ? '✓' : '✗')\"\r\n      ></div>\r\n    }\r\n  </div>\r\n  <ul class=\"fui-strength-meter__rules\">\r\n    @for (rule of rules(); track rule.key) {\r\n      <li class=\"fui-strength-meter__rule\" [class.fui-strength-meter__rule--satisfied]=\"rule.satisfied\">\r\n        <fui-icon [name]=\"rule.satisfied ? 'check' : 'x'\" size=\"sm\" aria-hidden=\"true\" />\r\n        <span>{{ rule.label }}</span>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/raintonic-formaui-components-tab.mjs

@@ -174,13 +174,13 @@ class FuiTabGroupComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiTabGroupComponent, isStandalone: true, selector: "fui-tab-group", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", selectedTabChange: "selectedTabChange" }, host: { classAttribute: "fui-tab-group" }, queries: [{ propertyName: "tabComponents", predicate: FuiTabComponent }], viewQueries: [{ propertyName: "tabButtons", predicate: ["tabButton"], descendants: true }], ngImport: i0, template: "<div class=\"fui-tab-group\">\r\n  <div class=\"fui-tab-header\" role=\"tablist\">\r\n    @for (tab of tabs(); track $index) {\r\n      <button\r\n        #tabButton\r\n        class=\"fui-tab-label\"\r\n        [class.fui-tab-label--active]=\"selectedIndex() === $index\"\r\n        [class.fui-tab-label--disabled]=\"tab.disabled()\"\r\n        [disabled]=\"tab.disabled()\"\r\n        [attr.aria-selected]=\"selectedIndex() === $index\"\r\n        [attr.tabindex]=\"selectedIndex() === $index ? 0 : -1\"\r\n        [attr.aria-controls]=\"tabGroupId + '-panel-' + $index\"\r\n        [id]=\"tabGroupId + '-tab-' + $index\"\r\n        role=\"tab\"\r\n        type=\"button\"\r\n        (click)=\"selectTab($index)\"\r\n        (keydown)=\"onKeydown($event, $index)\"\r\n      >\r\n        {{ tab.label() }}\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"fui-tab-content\">\r\n    @for (tab of tabs(); track $index) {\r\n      <div\r\n        class=\"fui-tab-panel\"\r\n        [class.fui-tab-panel--active]=\"selectedIndex() === $index\"\r\n        [attr.aria-labelledby]=\"tabGroupId + '-tab-' + $index\"\r\n        [id]=\"tabGroupId + '-panel-' + $index\"\r\n        role=\"tabpanel\"\r\n        [attr.tabindex]=\"selectedIndex() === $index ? 0 : null\"\r\n        [attr.aria-hidden]=\"selectedIndex() !== $index\"\r\n      >\r\n        @if (selectedIndex() === $index) {\r\n          <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-tab-group{--fui-tab-label-font-size: var(--fui-font-size-02);--fui-tab-label-min-height: 3rem;--fui-tab-label-padding-x: 1.5rem;--fui-tab-label-padding-y: .75rem;--fui-tab-panel-padding: 1.5rem;--fui-tab-indicator-height: 2px;--fui-tab-active-color: var(--fui-primary);contain:layout style;display:flex;flex-direction:column;width:100%}.fui-tab-header{display:flex;border-bottom:1px solid var(--fui-border-color);background-color:color-mix(in srgb,var(--fui-surface-02) 80%,transparent);backdrop-filter:blur(8px);position:sticky;top:0;left:0;z-index:var(--fui-z-sticky, 1020)}.fui-tab-header:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--fui-border-color)}.fui-tab-label{display:flex;align-items:center;justify-content:center;padding:var(--fui-tab-label-padding-y) var(--fui-tab-label-padding-x);border:none;background:transparent;color:var(--fui-text-secondary);font-size:var(--fui-tab-label-font-size);font-weight:400;line-height:1.25rem;cursor:pointer;position:relative;transition:color,background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms;white-space:nowrap;min-height:var(--fui-tab-label-min-height)}.fui-tab-label:hover:not(.fui-tab-label--disabled){color:var(--fui-text-primary);background-color:var(--fui-surface-02)}.fui-tab-label--active{color:var(--fui-tab-active-color);font-weight:600}.fui-tab-label--active:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:var(--fui-tab-indicator-height);background-color:var(--fui-tab-active-color);z-index:1}.fui-tab-label--disabled{color:var(--fui-text-secondary);cursor:not-allowed;opacity:var(--fui-opacity-disabled)}.fui-tab-label--disabled:hover{background-color:transparent}.fui-tab-label:focus-visible{outline:2px solid var(--fui-primary);outline-offset:-2px}.fui-tab-content{flex:1;z-index:9;position:relative;overflow:hidden}.fui-tab-panel{display:none;padding:var(--fui-tab-panel-padding);background:transparent;animation:fadeIn var(--fui-duration-fast-02, .11s) var(--fui-ease-entrance, cubic-bezier(0, 0, .38, .9))}.fui-tab-panel--active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media(max-width:576px){.fui-tab-header{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.fui-tab-header::-webkit-scrollbar{display:none}.fui-tab-label{flex-shrink:0;padding:.5rem 1rem;min-height:2.5rem;font-size:.8125rem}.fui-tab-panel{padding:1rem}}@media(prefers-reduced-motion:reduce){.fui-tab-label{transition:none}.fui-tab-panel{animation:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiTabGroupComponent, isStandalone: true, selector: "fui-tab-group", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", selectedTabChange: "selectedTabChange" }, host: { classAttribute: "fui-tab-group" }, queries: [{ propertyName: "tabComponents", predicate: FuiTabComponent }], viewQueries: [{ propertyName: "tabButtons", predicate: ["tabButton"], descendants: true }], ngImport: i0, template: "<div class=\"fui-tab-group\">\r\n  <div class=\"fui-tab-header\" role=\"tablist\">\r\n    @for (tab of tabs(); track $index) {\r\n      <button\r\n        #tabButton\r\n        class=\"fui-tab-label\"\r\n        [class.fui-tab-label--active]=\"selectedIndex() === $index\"\r\n        [class.fui-tab-label--disabled]=\"tab.disabled()\"\r\n        [disabled]=\"tab.disabled()\"\r\n        [attr.aria-selected]=\"selectedIndex() === $index\"\r\n        [attr.tabindex]=\"selectedIndex() === $index ? 0 : -1\"\r\n        [attr.aria-controls]=\"tabGroupId + '-panel-' + $index\"\r\n        [id]=\"tabGroupId + '-tab-' + $index\"\r\n        role=\"tab\"\r\n        type=\"button\"\r\n        (click)=\"selectTab($index)\"\r\n        (keydown)=\"onKeydown($event, $index)\"\r\n      >\r\n        {{ tab.label() }}\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"fui-tab-content\">\r\n    @for (tab of tabs(); track $index) {\r\n      <div\r\n        class=\"fui-tab-panel\"\r\n        [class.fui-tab-panel--active]=\"selectedIndex() === $index\"\r\n        [attr.aria-labelledby]=\"tabGroupId + '-tab-' + $index\"\r\n        [id]=\"tabGroupId + '-panel-' + $index\"\r\n        role=\"tabpanel\"\r\n        [attr.tabindex]=\"selectedIndex() === $index ? 0 : null\"\r\n        [attr.aria-hidden]=\"selectedIndex() !== $index\"\r\n      >\r\n        @if (selectedIndex() === $index) {\r\n          <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-tab-group{--fui-tab-label-font-size: var(--fui-text-base);--fui-tab-label-min-height: 3rem;--fui-tab-label-padding-x: 1.5rem;--fui-tab-label-padding-y: .75rem;--fui-tab-panel-padding: 1.5rem;--fui-tab-indicator-height: 2px;--fui-tab-active-color: var(--fui-brand-fg);contain:layout style;display:flex;flex-direction:column;width:100%}.fui-tab-header{display:flex;border-bottom:1px solid var(--fui-border-default);background-color:color-mix(in srgb,var(--fui-bg-subtle) 80%,transparent);backdrop-filter:blur(8px);position:sticky;top:0;left:0;z-index:var(--fui-z-sticky, 1020)}.fui-tab-header:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--fui-border-default)}.fui-tab-label{display:flex;align-items:center;justify-content:center;padding:var(--fui-tab-label-padding-y) var(--fui-tab-label-padding-x);border:none;background:transparent;color:var(--fui-text-secondary);font-size:var(--fui-tab-label-font-size);font-weight:400;line-height:1.25rem;cursor:pointer;position:relative;transition-property:color,background-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;white-space:nowrap;min-height:var(--fui-tab-label-min-height)}.fui-tab-label:hover:not(.fui-tab-label--disabled){color:var(--fui-text-primary);background-color:var(--fui-bg-subtle)}.fui-tab-label--active{color:var(--fui-tab-active-color);font-weight:600}.fui-tab-label--active:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:var(--fui-tab-indicator-height);background-color:var(--fui-tab-active-color);z-index:1}.fui-tab-label--disabled{color:var(--fui-text-secondary);cursor:not-allowed;opacity:var(--fui-state-disabled-opacity)}.fui-tab-label--disabled:hover{background-color:transparent}.fui-tab-label:focus-visible{outline:1px solid var(--fui-primary-10)}.fui-tab-content{flex:1;z-index:9;position:relative;overflow:hidden}.fui-tab-panel{display:none;padding:var(--fui-tab-panel-padding);background:transparent;animation:fadeIn var(--fui-duration-fast, .11s) var(--fui-ease-out, cubic-bezier(0, 0, .38, .9))}.fui-tab-panel--active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media(max-width:640px){.fui-tab-header{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.fui-tab-header::-webkit-scrollbar{display:none}.fui-tab-label{flex-shrink:0;padding:.5rem 1rem;min-height:2.5rem;font-size:.8125rem}.fui-tab-panel{padding:1rem}}@media(prefers-reduced-motion:reduce){.fui-tab-label{transition:none}.fui-tab-panel{animation:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTabGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fui-tab-group', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'fui-tab-group',
-                    }, template: "<div class=\"fui-tab-group\">\r\n  <div class=\"fui-tab-header\" role=\"tablist\">\r\n    @for (tab of tabs(); track $index) {\r\n      <button\r\n        #tabButton\r\n        class=\"fui-tab-label\"\r\n        [class.fui-tab-label--active]=\"selectedIndex() === $index\"\r\n        [class.fui-tab-label--disabled]=\"tab.disabled()\"\r\n        [disabled]=\"tab.disabled()\"\r\n        [attr.aria-selected]=\"selectedIndex() === $index\"\r\n        [attr.tabindex]=\"selectedIndex() === $index ? 0 : -1\"\r\n        [attr.aria-controls]=\"tabGroupId + '-panel-' + $index\"\r\n        [id]=\"tabGroupId + '-tab-' + $index\"\r\n        role=\"tab\"\r\n        type=\"button\"\r\n        (click)=\"selectTab($index)\"\r\n        (keydown)=\"onKeydown($event, $index)\"\r\n      >\r\n        {{ tab.label() }}\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"fui-tab-content\">\r\n    @for (tab of tabs(); track $index) {\r\n      <div\r\n        class=\"fui-tab-panel\"\r\n        [class.fui-tab-panel--active]=\"selectedIndex() === $index\"\r\n        [attr.aria-labelledby]=\"tabGroupId + '-tab-' + $index\"\r\n        [id]=\"tabGroupId + '-panel-' + $index\"\r\n        role=\"tabpanel\"\r\n        [attr.tabindex]=\"selectedIndex() === $index ? 0 : null\"\r\n        [attr.aria-hidden]=\"selectedIndex() !== $index\"\r\n      >\r\n        @if (selectedIndex() === $index) {\r\n          <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-tab-group{--fui-tab-label-font-size: var(--fui-font-size-02);--fui-tab-label-min-height: 3rem;--fui-tab-label-padding-x: 1.5rem;--fui-tab-label-padding-y: .75rem;--fui-tab-panel-padding: 1.5rem;--fui-tab-indicator-height: 2px;--fui-tab-active-color: var(--fui-primary);contain:layout style;display:flex;flex-direction:column;width:100%}.fui-tab-header{display:flex;border-bottom:1px solid var(--fui-border-color);background-color:color-mix(in srgb,var(--fui-surface-02) 80%,transparent);backdrop-filter:blur(8px);position:sticky;top:0;left:0;z-index:var(--fui-z-sticky, 1020)}.fui-tab-header:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--fui-border-color)}.fui-tab-label{display:flex;align-items:center;justify-content:center;padding:var(--fui-tab-label-padding-y) var(--fui-tab-label-padding-x);border:none;background:transparent;color:var(--fui-text-secondary);font-size:var(--fui-tab-label-font-size);font-weight:400;line-height:1.25rem;cursor:pointer;position:relative;transition:color,background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms;white-space:nowrap;min-height:var(--fui-tab-label-min-height)}.fui-tab-label:hover:not(.fui-tab-label--disabled){color:var(--fui-text-primary);background-color:var(--fui-surface-02)}.fui-tab-label--active{color:var(--fui-tab-active-color);font-weight:600}.fui-tab-label--active:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:var(--fui-tab-indicator-height);background-color:var(--fui-tab-active-color);z-index:1}.fui-tab-label--disabled{color:var(--fui-text-secondary);cursor:not-allowed;opacity:var(--fui-opacity-disabled)}.fui-tab-label--disabled:hover{background-color:transparent}.fui-tab-label:focus-visible{outline:2px solid var(--fui-primary);outline-offset:-2px}.fui-tab-content{flex:1;z-index:9;position:relative;overflow:hidden}.fui-tab-panel{display:none;padding:var(--fui-tab-panel-padding);background:transparent;animation:fadeIn var(--fui-duration-fast-02, .11s) var(--fui-ease-entrance, cubic-bezier(0, 0, .38, .9))}.fui-tab-panel--active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media(max-width:576px){.fui-tab-header{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.fui-tab-header::-webkit-scrollbar{display:none}.fui-tab-label{flex-shrink:0;padding:.5rem 1rem;min-height:2.5rem;font-size:.8125rem}.fui-tab-panel{padding:1rem}}@media(prefers-reduced-motion:reduce){.fui-tab-label{transition:none}.fui-tab-panel{animation:none}}\n"] }]
+                    }, template: "<div class=\"fui-tab-group\">\r\n  <div class=\"fui-tab-header\" role=\"tablist\">\r\n    @for (tab of tabs(); track $index) {\r\n      <button\r\n        #tabButton\r\n        class=\"fui-tab-label\"\r\n        [class.fui-tab-label--active]=\"selectedIndex() === $index\"\r\n        [class.fui-tab-label--disabled]=\"tab.disabled()\"\r\n        [disabled]=\"tab.disabled()\"\r\n        [attr.aria-selected]=\"selectedIndex() === $index\"\r\n        [attr.tabindex]=\"selectedIndex() === $index ? 0 : -1\"\r\n        [attr.aria-controls]=\"tabGroupId + '-panel-' + $index\"\r\n        [id]=\"tabGroupId + '-tab-' + $index\"\r\n        role=\"tab\"\r\n        type=\"button\"\r\n        (click)=\"selectTab($index)\"\r\n        (keydown)=\"onKeydown($event, $index)\"\r\n      >\r\n        {{ tab.label() }}\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"fui-tab-content\">\r\n    @for (tab of tabs(); track $index) {\r\n      <div\r\n        class=\"fui-tab-panel\"\r\n        [class.fui-tab-panel--active]=\"selectedIndex() === $index\"\r\n        [attr.aria-labelledby]=\"tabGroupId + '-tab-' + $index\"\r\n        [id]=\"tabGroupId + '-panel-' + $index\"\r\n        role=\"tabpanel\"\r\n        [attr.tabindex]=\"selectedIndex() === $index ? 0 : null\"\r\n        [attr.aria-hidden]=\"selectedIndex() !== $index\"\r\n      >\r\n        @if (selectedIndex() === $index) {\r\n          <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-tab-group{--fui-tab-label-font-size: var(--fui-text-base);--fui-tab-label-min-height: 3rem;--fui-tab-label-padding-x: 1.5rem;--fui-tab-label-padding-y: .75rem;--fui-tab-panel-padding: 1.5rem;--fui-tab-indicator-height: 2px;--fui-tab-active-color: var(--fui-brand-fg);contain:layout style;display:flex;flex-direction:column;width:100%}.fui-tab-header{display:flex;border-bottom:1px solid var(--fui-border-default);background-color:color-mix(in srgb,var(--fui-bg-subtle) 80%,transparent);backdrop-filter:blur(8px);position:sticky;top:0;left:0;z-index:var(--fui-z-sticky, 1020)}.fui-tab-header:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--fui-border-default)}.fui-tab-label{display:flex;align-items:center;justify-content:center;padding:var(--fui-tab-label-padding-y) var(--fui-tab-label-padding-x);border:none;background:transparent;color:var(--fui-text-secondary);font-size:var(--fui-tab-label-font-size);font-weight:400;line-height:1.25rem;cursor:pointer;position:relative;transition-property:color,background-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;white-space:nowrap;min-height:var(--fui-tab-label-min-height)}.fui-tab-label:hover:not(.fui-tab-label--disabled){color:var(--fui-text-primary);background-color:var(--fui-bg-subtle)}.fui-tab-label--active{color:var(--fui-tab-active-color);font-weight:600}.fui-tab-label--active:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:var(--fui-tab-indicator-height);background-color:var(--fui-tab-active-color);z-index:1}.fui-tab-label--disabled{color:var(--fui-text-secondary);cursor:not-allowed;opacity:var(--fui-state-disabled-opacity)}.fui-tab-label--disabled:hover{background-color:transparent}.fui-tab-label:focus-visible{outline:1px solid var(--fui-primary-10)}.fui-tab-content{flex:1;z-index:9;position:relative;overflow:hidden}.fui-tab-panel{display:none;padding:var(--fui-tab-panel-padding);background:transparent;animation:fadeIn var(--fui-duration-fast, .11s) var(--fui-ease-out, cubic-bezier(0, 0, .38, .9))}.fui-tab-panel--active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media(max-width:640px){.fui-tab-header{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.fui-tab-header::-webkit-scrollbar{display:none}.fui-tab-label{flex-shrink:0;padding:.5rem 1rem;min-height:2.5rem;font-size:.8125rem}.fui-tab-panel{padding:1rem}}@media(prefers-reduced-motion:reduce){.fui-tab-label{transition:none}.fui-tab-panel{animation:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], selectedTabChange: [{ type: i0.Output, args: ["selectedTabChange"] }], tabComponents: [{
                 type: ContentChildren,
                 args: [FuiTabComponent]

package/fesm2022/raintonic-formaui-components-tab.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"raintonic-formaui-components-tab.mjs","sources":["../../../lib/components/tab/tab.component.ts","../../../lib/components/tab/tab-group.component.ts","../../../lib/components/tab/tab-group.component.html","../../../lib/components/tab/raintonic-formaui-components-tab.ts"],"sourcesContent":["import { Component, input, TemplateRef, ViewChild, InputSignal } from '@angular/core';\r\n\r\n/**\r\n * @component FuiTabComponent\r\n * @selector fui-tab\r\n * @description Individual tab definition used inside `fui-tab-group`. Provides a label\r\n * for the tab header and wraps its content in an `ng-template` for lazy rendering.\r\n *\r\n * @input label - (required) Text displayed in the tab header button\r\n * @input disabled - Whether the tab is disabled and cannot be selected (default: false)\r\n *\r\n * @example\r\n * <fui-tab label=\"Settings\" [disabled]=\"!canEdit\">\r\n *   <p>Settings panel content here.</p>\r\n * </fui-tab>\r\n */\r\n@Component({\r\n  selector: 'fui-tab',\r\n  standalone: true,\r\n  template: `\r\n    <ng-template>\r\n      <ng-content></ng-content>\r\n    </ng-template>\r\n  `,\r\n})\r\nexport class FuiTabComponent {\r\n  /**\r\n   * The label for the tab\r\n   */\r\n  readonly label: InputSignal<string> = input.required<string>();\r\n\r\n  /**\r\n   * Whether the tab is disabled\r\n   */\r\n  readonly disabled: InputSignal<boolean> = input(false);\r\n\r\n  /**\r\n   * Template reference for the tab content\r\n   */\r\n  @ViewChild(TemplateRef, { static: true }) content!: TemplateRef<unknown>;\r\n}\r\n","import {\r\n  AfterContentInit,\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ContentChildren,\r\n  effect,\r\n  ElementRef,\r\n  model,\r\n  ModelSignal,\r\n  output,\r\n  OutputEmitterRef,\r\n  QueryList,\r\n  signal,\r\n  ViewChildren,\r\n  ViewEncapsulation,\r\n  WritableSignal,\r\n} from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { FuiTabComponent } from './tab.component';\r\n\r\nlet nextTabGroupId = 0;\r\n\r\n/**\r\n * @component FuiTabGroupComponent\r\n * @selector fui-tab-group\r\n * @description Container for `fui-tab` components. Manages tab selection, keyboard navigation\r\n * (ArrowLeft/Right, Home, End, Enter, Space), and roving tabindex for accessibility.\r\n * Uses content projection to collect tab definitions and renders their content lazily.\r\n *\r\n * @input selectedIndex - Two-way model signal for the active tab index (default: 0)\r\n *\r\n * @output selectedTabChange - Emits the FuiTabComponent instance when a new tab is selected\r\n *\r\n * @cssvar --fui-tab-label-font-size - Font size of tab labels\r\n * @cssvar --fui-tab-label-min-height - Minimum height of tab header buttons\r\n * @cssvar --fui-tab-label-padding-x - Horizontal padding of tab labels\r\n * @cssvar --fui-tab-label-padding-y - Vertical padding of tab labels\r\n * @cssvar --fui-tab-panel-padding - Padding of the tab content panel\r\n * @cssvar --fui-tab-indicator-height - Height of the active-tab underline indicator\r\n * @cssvar --fui-tab-active-color - Color of the active tab label and indicator\r\n *\r\n * @example\r\n * <fui-tab-group [(selectedIndex)]=\"activeTab\">\r\n *   <fui-tab label=\"Overview\">Overview content</fui-tab>\r\n *   <fui-tab label=\"Details\">Details content</fui-tab>\r\n *   <fui-tab label=\"History\" [disabled]=\"true\">History content</fui-tab>\r\n * </fui-tab-group>\r\n */\r\n@Component({\r\n  selector: 'fui-tab-group',\r\n  standalone: true,\r\n  imports: [CommonModule],\r\n  templateUrl: './tab-group.component.html',\r\n  styleUrls: ['./tab-group.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None,\r\n  host: {\r\n    class: 'fui-tab-group',\r\n  },\r\n})\r\nexport class FuiTabGroupComponent implements AfterContentInit {\r\n  /** Unique ID prefix for this tab group instance to avoid collisions */\r\n  readonly tabGroupId = `fui-tab-group-${nextTabGroupId++}`;\r\n\r\n  /**\r\n   * The index of the selected tab\r\n   */\r\n  readonly selectedIndex: ModelSignal<number> = model(0);\r\n\r\n  /**\r\n   * Event emitted when a tab is selected\r\n   */\r\n  readonly selectedTabChange: OutputEmitterRef<FuiTabComponent> = output<FuiTabComponent>();\r\n\r\n  /**\r\n   * Query for all tab components\r\n   */\r\n  @ContentChildren(FuiTabComponent) tabComponents!: QueryList<FuiTabComponent>;\r\n\r\n  /**\r\n   * Query for tab header buttons for focus management\r\n   */\r\n  @ViewChildren('tabButton') tabButtons!: QueryList<ElementRef<HTMLButtonElement>>;\r\n\r\n  /**\r\n   * Signal containing all tabs\r\n   */\r\n  readonly tabs: WritableSignal<FuiTabComponent[]> = signal<FuiTabComponent[]>([]);\r\n\r\n  constructor() {\r\n    // React to external or internal selectedIndex changes and emit selectedTabChange accordingly\r\n    effect(() => {\r\n      const idx = this.selectedIndex();\r\n      const tabs = this.tabs();\r\n      if (!tabs?.length) return;\r\n      if (idx >= 0 && idx < tabs.length) {\r\n        const tab = tabs[idx];\r\n        if (!tab.disabled()) {\r\n          this.selectedTabChange.emit(tab);\r\n        }\r\n      }\r\n    });\r\n  }\r\n\r\n  ngAfterContentInit(): void {\r\n    this.tabs.set(this.tabComponents.toArray());\r\n\r\n    // Listen for changes in tab components\r\n    this.tabComponents.changes.subscribe(() => {\r\n      this.tabs.set(this.tabComponents.toArray());\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Select a tab by index\r\n   */\r\n  selectTab(index: number): void {\r\n    const tabs = this.tabs();\r\n    if (index >= 0 && index < tabs.length && !tabs[index].disabled()) {\r\n      // Update the model; the effect defined in ngAfterContentInit will emit selectedTabChange\r\n      this.selectedIndex.set(index);\r\n    }\r\n  }\r\n\r\n  onKeydown(event: KeyboardEvent, index: number): void {\r\n    const tabs = this.tabs();\r\n    if (!tabs?.length) return;\r\n    const last = tabs.length - 1;\r\n    let next = index;\r\n    switch (event.key) {\r\n      case 'ArrowRight':\r\n        next = index === last ? 0 : index + 1;\r\n        break;\r\n      case 'ArrowLeft':\r\n        next = index === 0 ? last : index - 1;\r\n        break;\r\n      case 'Home':\r\n        next = 0;\r\n        break;\r\n      case 'End':\r\n        next = last;\r\n        break;\r\n      case 'Enter':\r\n      case ' ': // Space key\r\n        this.selectTab(index);\r\n        return;\r\n      default:\r\n        return;\r\n    }\r\n    event.preventDefault();\r\n    while (tabs[next]?.disabled()) {\r\n      next = (next + 1) % tabs.length;\r\n      if (next === index) break;\r\n    }\r\n    // Focus the target tab button (roving tabindex)\r\n    const buttons = this.tabButtons?.toArray();\r\n    if (buttons?.[next]) {\r\n      buttons[next].nativeElement.focus();\r\n    }\r\n  }\r\n}\r\n","<div class=\"fui-tab-group\">\r\n  <div class=\"fui-tab-header\" role=\"tablist\">\r\n    @for (tab of tabs(); track $index) {\r\n      <button\r\n        #tabButton\r\n        class=\"fui-tab-label\"\r\n        [class.fui-tab-label--active]=\"selectedIndex() === $index\"\r\n        [class.fui-tab-label--disabled]=\"tab.disabled()\"\r\n        [disabled]=\"tab.disabled()\"\r\n        [attr.aria-selected]=\"selectedIndex() === $index\"\r\n        [attr.tabindex]=\"selectedIndex() === $index ? 0 : -1\"\r\n        [attr.aria-controls]=\"tabGroupId + '-panel-' + $index\"\r\n        [id]=\"tabGroupId + '-tab-' + $index\"\r\n        role=\"tab\"\r\n        type=\"button\"\r\n        (click)=\"selectTab($index)\"\r\n        (keydown)=\"onKeydown($event, $index)\"\r\n      >\r\n        {{ tab.label() }}\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"fui-tab-content\">\r\n    @for (tab of tabs(); track $index) {\r\n      <div\r\n        class=\"fui-tab-panel\"\r\n        [class.fui-tab-panel--active]=\"selectedIndex() === $index\"\r\n        [attr.aria-labelledby]=\"tabGroupId + '-tab-' + $index\"\r\n        [id]=\"tabGroupId + '-panel-' + $index\"\r\n        role=\"tabpanel\"\r\n        [attr.tabindex]=\"selectedIndex() === $index ? 0 : null\"\r\n        [attr.aria-hidden]=\"selectedIndex() !== $index\"\r\n      >\r\n        @if (selectedIndex() === $index) {\r\n          <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"raintonic-formaui-components-tab.mjs","sources":["../../../lib/components/tab/tab.component.ts","../../../lib/components/tab/tab-group.component.ts","../../../lib/components/tab/tab-group.component.html","../../../lib/components/tab/raintonic-formaui-components-tab.ts"],"sourcesContent":["import { Component, input, TemplateRef, ViewChild, InputSignal } from '@angular/core';\r\n\r\n/**\r\n * @component FuiTabComponent\r\n * @selector fui-tab\r\n * @description Individual tab definition used inside `fui-tab-group`. Provides a label\r\n * for the tab header and wraps its content in an `ng-template` for lazy rendering.\r\n *\r\n * @input label - (required) Text displayed in the tab header button\r\n * @input disabled - Whether the tab is disabled and cannot be selected (default: false)\r\n *\r\n * @example\r\n * <fui-tab label=\"Settings\" [disabled]=\"!canEdit\">\r\n *   <p>Settings panel content here.</p>\r\n * </fui-tab>\r\n */\r\n@Component({\r\n  selector: 'fui-tab',\r\n  standalone: true,\r\n  template: `\r\n    <ng-template>\r\n      <ng-content></ng-content>\r\n    </ng-template>\r\n  `,\r\n})\r\nexport class FuiTabComponent {\r\n  /**\r\n   * The label for the tab\r\n   */\r\n  readonly label: InputSignal<string> = input.required<string>();\r\n\r\n  /**\r\n   * Whether the tab is disabled\r\n   */\r\n  readonly disabled: InputSignal<boolean> = input(false);\r\n\r\n  /**\r\n   * Template reference for the tab content\r\n   */\r\n  @ViewChild(TemplateRef, { static: true }) content!: TemplateRef<unknown>;\r\n}\r\n","import {\r\n  AfterContentInit,\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ContentChildren,\r\n  effect,\r\n  ElementRef,\r\n  model,\r\n  ModelSignal,\r\n  output,\r\n  OutputEmitterRef,\r\n  QueryList,\r\n  signal,\r\n  ViewChildren,\r\n  ViewEncapsulation,\r\n  WritableSignal,\r\n} from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { FuiTabComponent } from './tab.component';\r\n\r\nlet nextTabGroupId = 0;\r\n\r\n/**\r\n * @component FuiTabGroupComponent\r\n * @selector fui-tab-group\r\n * @description Container for `fui-tab` components. Manages tab selection, keyboard navigation\r\n * (ArrowLeft/Right, Home, End, Enter, Space), and roving tabindex for accessibility.\r\n * Uses content projection to collect tab definitions and renders their content lazily.\r\n *\r\n * @input selectedIndex - Two-way model signal for the active tab index (default: 0)\r\n *\r\n * @output selectedTabChange - Emits the FuiTabComponent instance when a new tab is selected\r\n *\r\n * @cssvar --fui-tab-label-font-size - Font size of tab labels\r\n * @cssvar --fui-tab-label-min-height - Minimum height of tab header buttons\r\n * @cssvar --fui-tab-label-padding-x - Horizontal padding of tab labels\r\n * @cssvar --fui-tab-label-padding-y - Vertical padding of tab labels\r\n * @cssvar --fui-tab-panel-padding - Padding of the tab content panel\r\n * @cssvar --fui-tab-indicator-height - Height of the active-tab underline indicator\r\n * @cssvar --fui-tab-active-color - Color of the active tab label and indicator\r\n *\r\n * @example\r\n * <fui-tab-group [(selectedIndex)]=\"activeTab\">\r\n *   <fui-tab label=\"Overview\">Overview content</fui-tab>\r\n *   <fui-tab label=\"Details\">Details content</fui-tab>\r\n *   <fui-tab label=\"History\" [disabled]=\"true\">History content</fui-tab>\r\n * </fui-tab-group>\r\n */\r\n@Component({\r\n  selector: 'fui-tab-group',\r\n  standalone: true,\r\n  imports: [CommonModule],\r\n  templateUrl: './tab-group.component.html',\r\n  styleUrls: ['./tab-group.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None,\r\n  host: {\r\n    class: 'fui-tab-group',\r\n  },\r\n})\r\nexport class FuiTabGroupComponent implements AfterContentInit {\r\n  /** Unique ID prefix for this tab group instance to avoid collisions */\r\n  readonly tabGroupId = `fui-tab-group-${nextTabGroupId++}`;\r\n\r\n  /**\r\n   * The index of the selected tab\r\n   */\r\n  readonly selectedIndex: ModelSignal<number> = model(0);\r\n\r\n  /**\r\n   * Event emitted when a tab is selected\r\n   */\r\n  readonly selectedTabChange: OutputEmitterRef<FuiTabComponent> = output<FuiTabComponent>();\r\n\r\n  /**\r\n   * Query for all tab components\r\n   */\r\n  @ContentChildren(FuiTabComponent) tabComponents!: QueryList<FuiTabComponent>;\r\n\r\n  /**\r\n   * Query for tab header buttons for focus management\r\n   */\r\n  @ViewChildren('tabButton') tabButtons!: QueryList<ElementRef<HTMLButtonElement>>;\r\n\r\n  /**\r\n   * Signal containing all tabs\r\n   */\r\n  readonly tabs: WritableSignal<FuiTabComponent[]> = signal<FuiTabComponent[]>([]);\r\n\r\n  constructor() {\r\n    // React to external or internal selectedIndex changes and emit selectedTabChange accordingly\r\n    effect(() => {\r\n      const idx = this.selectedIndex();\r\n      const tabs = this.tabs();\r\n      if (!tabs?.length) return;\r\n      if (idx >= 0 && idx < tabs.length) {\r\n        const tab = tabs[idx];\r\n        if (!tab.disabled()) {\r\n          this.selectedTabChange.emit(tab);\r\n        }\r\n      }\r\n    });\r\n  }\r\n\r\n  ngAfterContentInit(): void {\r\n    this.tabs.set(this.tabComponents.toArray());\r\n\r\n    // Listen for changes in tab components\r\n    this.tabComponents.changes.subscribe(() => {\r\n      this.tabs.set(this.tabComponents.toArray());\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Select a tab by index\r\n   */\r\n  selectTab(index: number): void {\r\n    const tabs = this.tabs();\r\n    if (index >= 0 && index < tabs.length && !tabs[index].disabled()) {\r\n      // Update the model; the effect defined in ngAfterContentInit will emit selectedTabChange\r\n      this.selectedIndex.set(index);\r\n    }\r\n  }\r\n\r\n  onKeydown(event: KeyboardEvent, index: number): void {\r\n    const tabs = this.tabs();\r\n    if (!tabs?.length) return;\r\n    const last = tabs.length - 1;\r\n    let next = index;\r\n    switch (event.key) {\r\n      case 'ArrowRight':\r\n        next = index === last ? 0 : index + 1;\r\n        break;\r\n      case 'ArrowLeft':\r\n        next = index === 0 ? last : index - 1;\r\n        break;\r\n      case 'Home':\r\n        next = 0;\r\n        break;\r\n      case 'End':\r\n        next = last;\r\n        break;\r\n      case 'Enter':\r\n      case ' ': // Space key\r\n        this.selectTab(index);\r\n        return;\r\n      default:\r\n        return;\r\n    }\r\n    event.preventDefault();\r\n    while (tabs[next]?.disabled()) {\r\n      next = (next + 1) % tabs.length;\r\n      if (next === index) break;\r\n    }\r\n    // Focus the target tab button (roving tabindex)\r\n    const buttons = this.tabButtons?.toArray();\r\n    if (buttons?.[next]) {\r\n      buttons[next].nativeElement.focus();\r\n    }\r\n  }\r\n}\r\n","<div class=\"fui-tab-group\">\r\n  <div class=\"fui-tab-header\" role=\"tablist\">\r\n    @for (tab of tabs(); track $index) {\r\n      <button\r\n        #tabButton\r\n        class=\"fui-tab-label\"\r\n        [class.fui-tab-label--active]=\"selectedIndex() === $index\"\r\n        [class.fui-tab-label--disabled]=\"tab.disabled()\"\r\n        [disabled]=\"tab.disabled()\"\r\n        [attr.aria-selected]=\"selectedIndex() === $index\"\r\n        [attr.tabindex]=\"selectedIndex() === $index ? 0 : -1\"\r\n        [attr.aria-controls]=\"tabGroupId + '-panel-' + $index\"\r\n        [id]=\"tabGroupId + '-tab-' + $index\"\r\n        role=\"tab\"\r\n        type=\"button\"\r\n        (click)=\"selectTab($index)\"\r\n        (keydown)=\"onKeydown($event, $index)\"\r\n      >\r\n        {{ tab.label() }}\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"fui-tab-content\">\r\n    @for (tab of tabs(); track $index) {\r\n      <div\r\n        class=\"fui-tab-panel\"\r\n        [class.fui-tab-panel--active]=\"selectedIndex() === $index\"\r\n        [attr.aria-labelledby]=\"tabGroupId + '-tab-' + $index\"\r\n        [id]=\"tabGroupId + '-panel-' + $index\"\r\n        role=\"tabpanel\"\r\n        [attr.tabindex]=\"selectedIndex() === $index ? 0 : null\"\r\n        [attr.aria-hidden]=\"selectedIndex() !== $index\"\r\n      >\r\n        @if (selectedIndex() === $index) {\r\n          <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}