@raintonic/formaui 0.2.1 → 0.3.1

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)}.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);-webkit-backdrop-filter:blur(8px);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: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 });
 }
 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)}.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);-webkit-backdrop-filter:blur(8px);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: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"] }]
         }], 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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"}

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

@@ -1,6 +1,8 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, output, signal, computed, effect, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { Injectable, inject, ChangeDetectorRef, input, booleanAttribute, output, signal, computed, effect, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FuiIconComponent } from '@raintonic/formaui/components/icon';
+import { FuiIntlBase } from '@raintonic/formaui/core';
 
 const FUI_TAG_VARIANTS = [
     'primary',
@@ -12,7 +14,21 @@ const FUI_TAG_VARIANTS = [
 ];
 const FUI_TAG_SIZES = ['sm', 'md'];
 
+class FuiTagIntl extends FuiIntlBase {
+    removeAriaLabel(label) {
+        return `Remove ${label}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTagIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTagIntl, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTagIntl, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 class FuiTagComponent {
+    intl = inject(FuiTagIntl);
+    _cdr = inject(ChangeDetectorRef);
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     variant = input('primary', { ...(ngDevMode ? { debugName: "variant" } : /* istanbul ignore next */ {}), transform: (v) => (FUI_TAG_VARIANTS.includes(v) ? v : 'primary') });
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -31,6 +47,7 @@ class FuiTagComponent {
         effect(() => {
             this._selected.set(this.selected());
         });
+        this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => { this._cdr.markForCheck(); });
     }
     onClick() {
         if (this.disabled())
@@ -51,7 +68,7 @@ class FuiTagComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiTagComponent, isStandalone: true, selector: "fui-tag", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed", selectedChange: "selectedChange" }, host: { listeners: { "click": "onClick()", "keydown.enter": "onClick()", "keydown.space": "onSpace($event)" }, properties: { "class": "computedClasses()", "class.fui-tag--selected": "_selected()", "class.fui-tag--disabled": "disabled()", "attr.role": "selectable() ? \"option\" : null", "attr.aria-selected": "selectable() ? _selected() : null", "attr.aria-pressed": "selectable() ? _selected() : null", "attr.tabindex": "selectable() || removable() ? 0 : null" }, classAttribute: "fui-tag" }, ngImport: i0, template: "<span class=\"fui-tag__content\">\r\n  @if (icon()) {\r\n    <fui-icon class=\"fui-tag__icon\" [name]=\"icon()!\" size=\"sm\" aria-hidden=\"true\" />\r\n  }\r\n  <span class=\"fui-tag__label\">{{ label() }}</span>\r\n</span>\r\n\r\n@if (removable() && !disabled()) {\r\n  <button\r\n    class=\"fui-tag__remove\"\r\n    type=\"button\"\r\n    [attr.aria-label]=\"'Remove ' + label()\"\r\n    (click)=\"onRemove($event)\"\r\n    (keydown.enter)=\"onRemove($event)\"\r\n  >\r\n    <fui-icon name=\"x\" size=\"sm\" aria-hidden=\"true\" />\r\n  </button>\r\n}\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)}.fui-tag{display:inline-flex;align-items:center;gap:var(--fui-gap-4, .25rem);border-radius:var(--fui-border-radius-pill, 999px);font-family:var(--fui-font-family-sans);font-weight:var(--fui-font-weight-medium, 500);cursor:default;-webkit-user-select:none;user-select:none;transition:background-color border-color color var(--fui-duration-fast-02, .15s) var(--fui-ease-standard) 0ms}.fui-tag--sm{padding:.125rem var(--fui-gap-8, .5rem);font-size:var(--fui-font-size-01);height:1.25rem}.fui-tag--md{padding:.25rem var(--fui-gap-12, .75rem);font-size:var(--fui-font-size-02);height:1.625rem}.fui-tag--primary{background-color:var(--fui-primary-20);color:var(--fui-primary-80)}.fui-tag--secondary{background-color:var(--fui-secondary-20);color:var(--fui-secondary-80)}.fui-tag--success{background-color:var(--fui-success-20);color:var(--fui-success-80)}.fui-tag--warning{background-color:var(--fui-warning-20);color:var(--fui-warning-80)}.fui-tag--danger{background-color:var(--fui-danger-20);color:var(--fui-danger-80)}.fui-tag--info{background-color:var(--fui-info-20);color:var(--fui-info-80)}.fui-tag--selected.fui-tag--primary{background-color:var(--fui-primary);color:var(--fui-white)}.fui-tag--selected.fui-tag--secondary{background-color:var(--fui-secondary-80);color:var(--fui-white)}.fui-tag--selected.fui-tag--success{background-color:var(--fui-success);color:var(--fui-white)}.fui-tag--selected.fui-tag--warning{background-color:var(--fui-warning);color:var(--fui-white)}.fui-tag--selected.fui-tag--danger{background-color:var(--fui-danger);color:var(--fui-white)}.fui-tag--selected.fui-tag--info{background-color:var(--fui-info);color:var(--fui-white)}.fui-tag__content{display:inline-flex;align-items:center;gap:var(--fui-gap-4, .25rem)}.fui-tag__remove{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-tag__remove:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-tag__remove{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;width:1rem;height:1rem;margin-left:var(--fui-gap-4, .25rem)}.fui-tag__remove:hover{background-color:var(--fui-black-10)}.fui-tag[tabindex=\"0\"]{cursor:pointer}.fui-tag:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-tag--disabled{opacity:var(--fui-opacity-disabled, .38);cursor:not-allowed;pointer-events:none}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiTagComponent, isStandalone: true, selector: "fui-tag", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed", selectedChange: "selectedChange" }, host: { listeners: { "click": "onClick()", "keydown.enter": "onClick()", "keydown.space": "onSpace($event)" }, properties: { "class": "computedClasses()", "class.fui-tag--selected": "_selected()", "class.fui-tag--disabled": "disabled()", "attr.role": "selectable() ? \"option\" : null", "attr.aria-selected": "selectable() ? _selected() : null", "attr.aria-pressed": "selectable() ? _selected() : null", "attr.tabindex": "selectable() || removable() ? 0 : null" }, classAttribute: "fui-tag" }, ngImport: i0, template: "<span class=\"fui-tag__content\">\r\n  @if (icon()) {\r\n    <fui-icon class=\"fui-tag__icon\" [name]=\"icon()!\" size=\"sm\" aria-hidden=\"true\" />\r\n  }\r\n  <span class=\"fui-tag__label\">{{ label() }}</span>\r\n</span>\r\n\r\n@if (removable() && !disabled()) {\r\n  <button\r\n    class=\"fui-tag__remove\"\r\n    type=\"button\"\r\n    [attr.aria-label]=\"intl.removeAriaLabel(label())\"\r\n    (click)=\"onRemove($event)\"\r\n    (keydown.enter)=\"onRemove($event)\"\r\n  >\r\n    <fui-icon name=\"x\" size=\"sm\" aria-hidden=\"true\" />\r\n  </button>\r\n}\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-tag{display:inline-flex;align-items:center;gap:var(--fui-gap-4, .25rem);border-radius:var(--fui-border-radius-pill, 999px);font-family:var(--fui-font-family-sans);font-weight:var(--fui-font-weight-medium, 500);cursor:default;-webkit-user-select:none;user-select:none;transition:background-color border-color color var(--fui-duration-fast-02, .15s) var(--fui-ease-standard) 0ms}.fui-tag--sm{padding:.125rem var(--fui-gap-8, .5rem);font-size:var(--fui-font-size-01);height:1.25rem}.fui-tag--md{padding:.25rem var(--fui-gap-12, .75rem);font-size:var(--fui-font-size-02);height:1.625rem}.fui-tag--primary{background-color:var(--fui-primary-20);color:var(--fui-primary-80)}.fui-tag--secondary{background-color:var(--fui-secondary-20);color:var(--fui-secondary-80)}.fui-tag--success{background-color:var(--fui-success-20);color:var(--fui-success-80)}.fui-tag--warning{background-color:var(--fui-warning-20);color:var(--fui-warning-80)}.fui-tag--danger{background-color:var(--fui-danger-20);color:var(--fui-danger-80)}.fui-tag--info{background-color:var(--fui-info-20);color:var(--fui-info-80)}.fui-tag--selected.fui-tag--primary{background-color:var(--fui-primary);color:var(--fui-white)}.fui-tag--selected.fui-tag--secondary{background-color:var(--fui-secondary-80);color:var(--fui-white)}.fui-tag--selected.fui-tag--success{background-color:var(--fui-success);color:var(--fui-white)}.fui-tag--selected.fui-tag--warning{background-color:var(--fui-warning);color:var(--fui-white)}.fui-tag--selected.fui-tag--danger{background-color:var(--fui-danger);color:var(--fui-white)}.fui-tag--selected.fui-tag--info{background-color:var(--fui-info);color:var(--fui-white)}.fui-tag__content{display:inline-flex;align-items:center;gap:var(--fui-gap-4, .25rem)}.fui-tag__remove{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-tag__remove:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-tag__remove{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;width:1rem;height:1rem;margin-left:var(--fui-gap-4, .25rem)}.fui-tag__remove:hover{background-color:var(--fui-black-10)}.fui-tag[tabindex=\"0\"]{cursor:pointer}.fui-tag:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-tag--disabled{opacity:var(--fui-opacity-disabled, .38);cursor:not-allowed;pointer-events:none}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTagComponent, decorators: [{
             type: Component,
@@ -67,12 +84,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                         '(click)': 'onClick()',
                         '(keydown.enter)': 'onClick()',
                         '(keydown.space)': 'onSpace($event)',
-                    }, template: "<span class=\"fui-tag__content\">\r\n  @if (icon()) {\r\n    <fui-icon class=\"fui-tag__icon\" [name]=\"icon()!\" size=\"sm\" aria-hidden=\"true\" />\r\n  }\r\n  <span class=\"fui-tag__label\">{{ label() }}</span>\r\n</span>\r\n\r\n@if (removable() && !disabled()) {\r\n  <button\r\n    class=\"fui-tag__remove\"\r\n    type=\"button\"\r\n    [attr.aria-label]=\"'Remove ' + label()\"\r\n    (click)=\"onRemove($event)\"\r\n    (keydown.enter)=\"onRemove($event)\"\r\n  >\r\n    <fui-icon name=\"x\" size=\"sm\" aria-hidden=\"true\" />\r\n  </button>\r\n}\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)}.fui-tag{display:inline-flex;align-items:center;gap:var(--fui-gap-4, .25rem);border-radius:var(--fui-border-radius-pill, 999px);font-family:var(--fui-font-family-sans);font-weight:var(--fui-font-weight-medium, 500);cursor:default;-webkit-user-select:none;user-select:none;transition:background-color border-color color var(--fui-duration-fast-02, .15s) var(--fui-ease-standard) 0ms}.fui-tag--sm{padding:.125rem var(--fui-gap-8, .5rem);font-size:var(--fui-font-size-01);height:1.25rem}.fui-tag--md{padding:.25rem var(--fui-gap-12, .75rem);font-size:var(--fui-font-size-02);height:1.625rem}.fui-tag--primary{background-color:var(--fui-primary-20);color:var(--fui-primary-80)}.fui-tag--secondary{background-color:var(--fui-secondary-20);color:var(--fui-secondary-80)}.fui-tag--success{background-color:var(--fui-success-20);color:var(--fui-success-80)}.fui-tag--warning{background-color:var(--fui-warning-20);color:var(--fui-warning-80)}.fui-tag--danger{background-color:var(--fui-danger-20);color:var(--fui-danger-80)}.fui-tag--info{background-color:var(--fui-info-20);color:var(--fui-info-80)}.fui-tag--selected.fui-tag--primary{background-color:var(--fui-primary);color:var(--fui-white)}.fui-tag--selected.fui-tag--secondary{background-color:var(--fui-secondary-80);color:var(--fui-white)}.fui-tag--selected.fui-tag--success{background-color:var(--fui-success);color:var(--fui-white)}.fui-tag--selected.fui-tag--warning{background-color:var(--fui-warning);color:var(--fui-white)}.fui-tag--selected.fui-tag--danger{background-color:var(--fui-danger);color:var(--fui-white)}.fui-tag--selected.fui-tag--info{background-color:var(--fui-info);color:var(--fui-white)}.fui-tag__content{display:inline-flex;align-items:center;gap:var(--fui-gap-4, .25rem)}.fui-tag__remove{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-tag__remove:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-tag__remove{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;width:1rem;height:1rem;margin-left:var(--fui-gap-4, .25rem)}.fui-tag__remove:hover{background-color:var(--fui-black-10)}.fui-tag[tabindex=\"0\"]{cursor:pointer}.fui-tag:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-tag--disabled{opacity:var(--fui-opacity-disabled, .38);cursor:not-allowed;pointer-events:none}\n"] }]
+                    }, template: "<span class=\"fui-tag__content\">\r\n  @if (icon()) {\r\n    <fui-icon class=\"fui-tag__icon\" [name]=\"icon()!\" size=\"sm\" aria-hidden=\"true\" />\r\n  }\r\n  <span class=\"fui-tag__label\">{{ label() }}</span>\r\n</span>\r\n\r\n@if (removable() && !disabled()) {\r\n  <button\r\n    class=\"fui-tag__remove\"\r\n    type=\"button\"\r\n    [attr.aria-label]=\"intl.removeAriaLabel(label())\"\r\n    (click)=\"onRemove($event)\"\r\n    (keydown.enter)=\"onRemove($event)\"\r\n  >\r\n    <fui-icon name=\"x\" size=\"sm\" aria-hidden=\"true\" />\r\n  </button>\r\n}\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-tag{display:inline-flex;align-items:center;gap:var(--fui-gap-4, .25rem);border-radius:var(--fui-border-radius-pill, 999px);font-family:var(--fui-font-family-sans);font-weight:var(--fui-font-weight-medium, 500);cursor:default;-webkit-user-select:none;user-select:none;transition:background-color border-color color var(--fui-duration-fast-02, .15s) var(--fui-ease-standard) 0ms}.fui-tag--sm{padding:.125rem var(--fui-gap-8, .5rem);font-size:var(--fui-font-size-01);height:1.25rem}.fui-tag--md{padding:.25rem var(--fui-gap-12, .75rem);font-size:var(--fui-font-size-02);height:1.625rem}.fui-tag--primary{background-color:var(--fui-primary-20);color:var(--fui-primary-80)}.fui-tag--secondary{background-color:var(--fui-secondary-20);color:var(--fui-secondary-80)}.fui-tag--success{background-color:var(--fui-success-20);color:var(--fui-success-80)}.fui-tag--warning{background-color:var(--fui-warning-20);color:var(--fui-warning-80)}.fui-tag--danger{background-color:var(--fui-danger-20);color:var(--fui-danger-80)}.fui-tag--info{background-color:var(--fui-info-20);color:var(--fui-info-80)}.fui-tag--selected.fui-tag--primary{background-color:var(--fui-primary);color:var(--fui-white)}.fui-tag--selected.fui-tag--secondary{background-color:var(--fui-secondary-80);color:var(--fui-white)}.fui-tag--selected.fui-tag--success{background-color:var(--fui-success);color:var(--fui-white)}.fui-tag--selected.fui-tag--warning{background-color:var(--fui-warning);color:var(--fui-white)}.fui-tag--selected.fui-tag--danger{background-color:var(--fui-danger);color:var(--fui-white)}.fui-tag--selected.fui-tag--info{background-color:var(--fui-info);color:var(--fui-white)}.fui-tag__content{display:inline-flex;align-items:center;gap:var(--fui-gap-4, .25rem)}.fui-tag__remove{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-tag__remove:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-tag__remove{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;width:1rem;height:1rem;margin-left:var(--fui-gap-4, .25rem)}.fui-tag__remove:hover{background-color:var(--fui-black-10)}.fui-tag[tabindex=\"0\"]{cursor:pointer}.fui-tag:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-tag--disabled{opacity:var(--fui-opacity-disabled, .38);cursor:not-allowed;pointer-events:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { FUI_TAG_SIZES, FUI_TAG_VARIANTS, FuiTagComponent };
+export { FUI_TAG_SIZES, FUI_TAG_VARIANTS, FuiTagComponent, FuiTagIntl };
 //# sourceMappingURL=raintonic-formaui-components-tag.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"raintonic-formaui-components-tag.mjs","sources":["../../../lib/components/tag/tag.types.ts","../../../lib/components/tag/tag.component.ts","../../../lib/components/tag/tag.component.html","../../../lib/components/tag/raintonic-formaui-components-tag.ts"],"sourcesContent":["export type FuiTagVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';\r\nexport type FuiTagSize = 'sm' | 'md';\r\n\r\nexport const FUI_TAG_VARIANTS: readonly FuiTagVariant[] = [\r\n  'primary',\r\n  'secondary',\r\n  'success',\r\n  'warning',\r\n  'danger',\r\n  'info',\r\n] as const;\r\nexport const FUI_TAG_SIZES: readonly FuiTagSize[] = ['sm', 'md'] as const;\r\n\r\nexport interface FuiTagRemoveEvent {\r\n  tag: unknown;\r\n}\r\n","import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ViewEncapsulation,\r\n  computed,\r\n  effect,\r\n  input,\r\n  output,\r\n  signal,\r\n  booleanAttribute,\r\n} from '@angular/core';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { FuiTagVariant, FuiTagSize, FUI_TAG_VARIANTS, FuiTagRemoveEvent } from './tag.types';\r\n\r\n@Component({\r\n  selector: 'fui-tag',\r\n  standalone: true,\r\n  imports: [FuiIconComponent],\r\n  templateUrl: './tag.component.html',\r\n  styleUrls: ['./tag.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None,\r\n  host: {\r\n    class: 'fui-tag',\r\n    '[class]': 'computedClasses()',\r\n    '[class.fui-tag--selected]': '_selected()',\r\n    '[class.fui-tag--disabled]': 'disabled()',\r\n    '[attr.role]': 'selectable() ? \"option\" : null',\r\n    '[attr.aria-selected]': 'selectable() ? _selected() : null',\r\n    '[attr.aria-pressed]': 'selectable() ? _selected() : null',\r\n    '[attr.tabindex]': 'selectable() || removable() ? 0 : null',\r\n    '(click)': 'onClick()',\r\n    '(keydown.enter)': 'onClick()',\r\n    '(keydown.space)': 'onSpace($event)',\r\n  },\r\n})\r\nexport class FuiTagComponent {\r\n  readonly label = input.required<string>();\r\n  readonly variant = input<FuiTagVariant, FuiTagVariant | string>('primary', {\r\n    transform: (v) => ((FUI_TAG_VARIANTS as readonly string[]).includes(v) ? (v as FuiTagVariant) : 'primary'),\r\n  });\r\n  readonly size = input<FuiTagSize>('md');\r\n  readonly icon = input<string | null>(null);\r\n  readonly removable = input(false);\r\n  readonly selectable = input(false);\r\n  readonly selected = input(false);\r\n  readonly disabled = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n\r\n  readonly removed = output<FuiTagRemoveEvent>();\r\n  readonly selectedChange = output<boolean>();\r\n\r\n  readonly _selected = signal(false);\r\n\r\n  readonly computedClasses = computed(() => {\r\n    return `fui-tag fui-tag--${this.variant()} fui-tag--${this.size()}`;\r\n  });\r\n\r\n  constructor() {\r\n    effect(() => {\r\n      this._selected.set(this.selected());\r\n    });\r\n  }\r\n\r\n  onClick(): void {\r\n    if (this.disabled()) return;\r\n    if (this.selectable()) {\r\n      this._selected.update((v) => !v);\r\n      this.selectedChange.emit(this._selected());\r\n    }\r\n  }\r\n\r\n  onSpace(event: Event): void {\r\n    event.preventDefault();\r\n    this.onClick();\r\n  }\r\n\r\n  onRemove(event: Event): void {\r\n    event.stopPropagation();\r\n    if (!this.disabled()) {\r\n      this.removed.emit({ tag: this });\r\n    }\r\n  }\r\n}\r\n","<span class=\"fui-tag__content\">\r\n  @if (icon()) {\r\n    <fui-icon class=\"fui-tag__icon\" [name]=\"icon()!\" size=\"sm\" aria-hidden=\"true\" />\r\n  }\r\n  <span class=\"fui-tag__label\">{{ label() }}</span>\r\n</span>\r\n\r\n@if (removable() && !disabled()) {\r\n  <button\r\n    class=\"fui-tag__remove\"\r\n    type=\"button\"\r\n    [attr.aria-label]=\"'Remove ' + label()\"\r\n    (click)=\"onRemove($event)\"\r\n    (keydown.enter)=\"onRemove($event)\"\r\n  >\r\n    <fui-icon name=\"x\" size=\"sm\" aria-hidden=\"true\" />\r\n  </button>\r\n}\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-tag.mjs","sources":["../../../lib/components/tag/tag.types.ts","../../../lib/components/tag/tag.intl.ts","../../../lib/components/tag/tag.component.ts","../../../lib/components/tag/tag.component.html","../../../lib/components/tag/raintonic-formaui-components-tag.ts"],"sourcesContent":["export type FuiTagVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';\r\nexport type FuiTagSize = 'sm' | 'md';\r\n\r\nexport const FUI_TAG_VARIANTS: readonly FuiTagVariant[] = [\r\n  'primary',\r\n  'secondary',\r\n  'success',\r\n  'warning',\r\n  'danger',\r\n  'info',\r\n] as const;\r\nexport const FUI_TAG_SIZES: readonly FuiTagSize[] = ['sm', 'md'] as const;\r\n\r\nexport interface FuiTagRemoveEvent {\r\n  tag: unknown;\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 FuiTagIntl extends FuiIntlBase {\r\n  removeAriaLabel(label: string): string {\r\n    return `Remove ${label}`;\r\n  }\r\n}\r\n","import {\r\n  ChangeDetectionStrategy,\r\n  ChangeDetectorRef,\r\n  Component,\r\n  ViewEncapsulation,\r\n  computed,\r\n  effect,\r\n  inject,\r\n  input,\r\n  output,\r\n  signal,\r\n  booleanAttribute,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { FuiTagVariant, FuiTagSize, FUI_TAG_VARIANTS, FuiTagRemoveEvent } from './tag.types';\r\nimport { FuiTagIntl } from './tag.intl';\r\n\r\n@Component({\r\n  selector: 'fui-tag',\r\n  standalone: true,\r\n  imports: [FuiIconComponent],\r\n  templateUrl: './tag.component.html',\r\n  styleUrls: ['./tag.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None,\r\n  host: {\r\n    class: 'fui-tag',\r\n    '[class]': 'computedClasses()',\r\n    '[class.fui-tag--selected]': '_selected()',\r\n    '[class.fui-tag--disabled]': 'disabled()',\r\n    '[attr.role]': 'selectable() ? \"option\" : null',\r\n    '[attr.aria-selected]': 'selectable() ? _selected() : null',\r\n    '[attr.aria-pressed]': 'selectable() ? _selected() : null',\r\n    '[attr.tabindex]': 'selectable() || removable() ? 0 : null',\r\n    '(click)': 'onClick()',\r\n    '(keydown.enter)': 'onClick()',\r\n    '(keydown.space)': 'onSpace($event)',\r\n  },\r\n})\r\nexport class FuiTagComponent {\r\n  readonly intl = inject(FuiTagIntl);\r\n  private readonly _cdr = inject(ChangeDetectorRef);\r\n\r\n  readonly label = input.required<string>();\r\n  readonly variant = input<FuiTagVariant, FuiTagVariant | string>('primary', {\r\n    transform: (v) => ((FUI_TAG_VARIANTS as readonly string[]).includes(v) ? (v as FuiTagVariant) : 'primary'),\r\n  });\r\n  readonly size = input<FuiTagSize>('md');\r\n  readonly icon = input<string | null>(null);\r\n  readonly removable = input(false);\r\n  readonly selectable = input(false);\r\n  readonly selected = input(false);\r\n  readonly disabled = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n\r\n  readonly removed = output<FuiTagRemoveEvent>();\r\n  readonly selectedChange = output<boolean>();\r\n\r\n  readonly _selected = signal(false);\r\n\r\n  readonly computedClasses = computed(() => {\r\n    return `fui-tag fui-tag--${this.variant()} fui-tag--${this.size()}`;\r\n  });\r\n\r\n  constructor() {\r\n    effect(() => {\r\n      this._selected.set(this.selected());\r\n    });\r\n    this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => { this._cdr.markForCheck(); });\r\n  }\r\n\r\n  onClick(): void {\r\n    if (this.disabled()) return;\r\n    if (this.selectable()) {\r\n      this._selected.update((v) => !v);\r\n      this.selectedChange.emit(this._selected());\r\n    }\r\n  }\r\n\r\n  onSpace(event: Event): void {\r\n    event.preventDefault();\r\n    this.onClick();\r\n  }\r\n\r\n  onRemove(event: Event): void {\r\n    event.stopPropagation();\r\n    if (!this.disabled()) {\r\n      this.removed.emit({ tag: this });\r\n    }\r\n  }\r\n}\r\n","<span class=\"fui-tag__content\">\r\n  @if (icon()) {\r\n    <fui-icon class=\"fui-tag__icon\" [name]=\"icon()!\" size=\"sm\" aria-hidden=\"true\" />\r\n  }\r\n  <span class=\"fui-tag__label\">{{ label() }}</span>\r\n</span>\r\n\r\n@if (removable() && !disabled()) {\r\n  <button\r\n    class=\"fui-tag__remove\"\r\n    type=\"button\"\r\n    [attr.aria-label]=\"intl.removeAriaLabel(label())\"\r\n    (click)=\"onRemove($event)\"\r\n    (keydown.enter)=\"onRemove($event)\"\r\n  >\r\n    <fui-icon name=\"x\" size=\"sm\" aria-hidden=\"true\" />\r\n  </button>\r\n}\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-time-picker.mjs

@@ -1,11 +1,12 @@
 import * as i0 from '@angular/core';
-import { input, output, signal, effect, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, booleanAttribute, inject, computed, ElementRef, NgZone } from '@angular/core';
+import { Injectable, input, output, signal, inject, ChangeDetectorRef, effect, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, booleanAttribute, computed, ElementRef, NgZone } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgForm, FormGroupDirective, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { DOCUMENT } from '@angular/common';
 import { Subject, Subscription, fromEvent } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { injectNgControl, updateErrorState, syncRequiredState, syncNgControlDisabled } from '@raintonic/formaui/cdk/form-field';
-import { DefaultErrorStateMatcher, FUI_FORM_FIELD_CONTROL } from '@raintonic/formaui/core';
+import { FuiIntlBase, DefaultErrorStateMatcher, FUI_FORM_FIELD_CONTROL } from '@raintonic/formaui/core';
 import { FuiOverlayService } from '@raintonic/formaui/cdk/overlay';
 import { FuiIconComponent } from '@raintonic/formaui/components/icon';
 
@@ -141,6 +142,18 @@ function parseISOTimeString(str) {
     return parseTimeString(str.trim(), '24h');
 }
 
+class FuiTimePickerIntl extends FuiIntlBase {
+    toggleAriaLabel = 'Toggle time picker';
+    dialogAriaLabel = 'Time selection';
+    availableTimesAriaLabel = 'Available times';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTimePickerIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTimePickerIntl, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTimePickerIntl, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 class FuiTimeListComponent {
     /** The list of time options to display. */
     options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
@@ -153,7 +166,10 @@ class FuiTimeListComponent {
     /** Index of the currently focused option for keyboard navigation. */
     _focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "_focusedIndex" }] : /* istanbul ignore next */ []));
     listContainer;
+    intl = inject(FuiTimePickerIntl);
+    _cdr = inject(ChangeDetectorRef);
     constructor() {
+        this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => { this._cdr.markForCheck(); });
         // Scroll to selected option when options change
         effect(() => {
             this.selectedValue();
@@ -273,13 +289,13 @@ class FuiTimeListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTimeListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiTimeListComponent, isStandalone: true, selector: "fui-time-list", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected" }, host: { classAttribute: "fui-time-list" }, viewQueries: [{ propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true }], ngImport: i0, template: "<div\r\n  #listContainer\r\n  class=\"fui-time-list__container\"\r\n  role=\"listbox\"\r\n  tabindex=\"0\"\r\n  aria-label=\"Available times\"\r\n  (keydown)=\"onKeydown($event)\"\r\n>\r\n  @for (option of options(); track option.label) {\r\n    <div\r\n      class=\"fui-time-list__option\"\r\n      [class.fui-time-list__option--selected]=\"_isSelected(option)\"\r\n      [class.fui-time-list__option--disabled]=\"option.disabled\"\r\n      [class.fui-time-list__option--focused]=\"_focusedIndex() === $index\"\r\n      [attr.id]=\"'fui-time-option-' + $index\"\r\n      [attr.aria-selected]=\"_isSelected(option)\"\r\n      [attr.aria-disabled]=\"option.disabled\"\r\n      role=\"option\"\r\n      (click)=\"_selectOption(option)\"\r\n    >\r\n      {{ option.label }}\r\n    </div>\r\n  }\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)}.fui-time-list{display:block}.fui-time-list__container{max-height:200px;overflow-y:auto;overflow-x:hidden;padding:var(--fui-spacing-02) 0}.fui-time-list__container::-webkit-scrollbar{width:8px}.fui-time-list__container::-webkit-scrollbar-track{background:var(--fui-surface-01);border-radius:var(--fui-border-radius-sm)}.fui-time-list__container::-webkit-scrollbar-thumb{background:var(--fui-border-color);border-radius:var(--fui-border-radius-sm)}.fui-time-list__container::-webkit-scrollbar-thumb:hover{background:var(--fui-text-secondary)}.fui-time-list__option{display:flex;align-items:center;padding:var(--fui-spacing-02) var(--fui-spacing-04);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);line-height:var(--fui-line-height-02);color:var(--fui-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--fui-duration-fast-01) var(--fui-ease-standard) 0ms}.fui-time-list__option:hover:not(.fui-time-list__option--disabled){background-color:var(--fui-surface-02)}.fui-time-list__option--selected{background-color:var(--fui-primary-20);color:var(--fui-primary-80);font-weight:var(--fui-font-weight-medium)}.fui-time-list__option--selected:hover:not(.fui-time-list__option--disabled){background-color:var(--fui-primary-30)}.fui-time-list__option--focused{outline:2px solid var(--fui-primary-60);outline-offset:-2px;border-radius:var(--fui-border-radius-sm)}.fui-time-list__option--disabled{color:var(--fui-text-disabled);cursor:not-allowed;opacity:.5}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiTimeListComponent, isStandalone: true, selector: "fui-time-list", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected" }, host: { classAttribute: "fui-time-list" }, viewQueries: [{ propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true }], ngImport: i0, template: "<div\r\n  #listContainer\r\n  class=\"fui-time-list__container\"\r\n  role=\"listbox\"\r\n  tabindex=\"0\"\r\n  [attr.aria-label]=\"intl.availableTimesAriaLabel\"\r\n  (keydown)=\"onKeydown($event)\"\r\n>\r\n  @for (option of options(); track option.label) {\r\n    <div\r\n      class=\"fui-time-list__option\"\r\n      [class.fui-time-list__option--selected]=\"_isSelected(option)\"\r\n      [class.fui-time-list__option--disabled]=\"option.disabled\"\r\n      [class.fui-time-list__option--focused]=\"_focusedIndex() === $index\"\r\n      [attr.id]=\"'fui-time-option-' + $index\"\r\n      [attr.aria-selected]=\"_isSelected(option)\"\r\n      [attr.aria-disabled]=\"option.disabled\"\r\n      role=\"option\"\r\n      (click)=\"_selectOption(option)\"\r\n    >\r\n      {{ option.label }}\r\n    </div>\r\n  }\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-time-list{display:block}.fui-time-list__container{max-height:200px;overflow-y:auto;overflow-x:hidden;padding:var(--fui-spacing-02) 0}.fui-time-list__container::-webkit-scrollbar{width:8px}.fui-time-list__container::-webkit-scrollbar-track{background:var(--fui-surface-01);border-radius:var(--fui-border-radius-sm)}.fui-time-list__container::-webkit-scrollbar-thumb{background:var(--fui-border-color);border-radius:var(--fui-border-radius-sm)}.fui-time-list__container::-webkit-scrollbar-thumb:hover{background:var(--fui-text-secondary)}.fui-time-list__option{display:flex;align-items:center;padding:var(--fui-spacing-02) var(--fui-spacing-04);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);line-height:var(--fui-line-height-02);color:var(--fui-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--fui-duration-fast-01) var(--fui-ease-standard) 0ms}.fui-time-list__option:hover:not(.fui-time-list__option--disabled){background-color:var(--fui-surface-02)}.fui-time-list__option--selected{background-color:var(--fui-primary-20);color:var(--fui-primary-80);font-weight:var(--fui-font-weight-medium)}.fui-time-list__option--selected:hover:not(.fui-time-list__option--disabled){background-color:var(--fui-primary-30)}.fui-time-list__option--focused{outline:2px solid var(--fui-primary-60);outline-offset:-2px;border-radius:var(--fui-border-radius-sm)}.fui-time-list__option--disabled{color:var(--fui-text-disabled);cursor:not-allowed;opacity:.5}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTimeListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fui-time-list', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'fui-time-list',
-                    }, template: "<div\r\n  #listContainer\r\n  class=\"fui-time-list__container\"\r\n  role=\"listbox\"\r\n  tabindex=\"0\"\r\n  aria-label=\"Available times\"\r\n  (keydown)=\"onKeydown($event)\"\r\n>\r\n  @for (option of options(); track option.label) {\r\n    <div\r\n      class=\"fui-time-list__option\"\r\n      [class.fui-time-list__option--selected]=\"_isSelected(option)\"\r\n      [class.fui-time-list__option--disabled]=\"option.disabled\"\r\n      [class.fui-time-list__option--focused]=\"_focusedIndex() === $index\"\r\n      [attr.id]=\"'fui-time-option-' + $index\"\r\n      [attr.aria-selected]=\"_isSelected(option)\"\r\n      [attr.aria-disabled]=\"option.disabled\"\r\n      role=\"option\"\r\n      (click)=\"_selectOption(option)\"\r\n    >\r\n      {{ option.label }}\r\n    </div>\r\n  }\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)}.fui-time-list{display:block}.fui-time-list__container{max-height:200px;overflow-y:auto;overflow-x:hidden;padding:var(--fui-spacing-02) 0}.fui-time-list__container::-webkit-scrollbar{width:8px}.fui-time-list__container::-webkit-scrollbar-track{background:var(--fui-surface-01);border-radius:var(--fui-border-radius-sm)}.fui-time-list__container::-webkit-scrollbar-thumb{background:var(--fui-border-color);border-radius:var(--fui-border-radius-sm)}.fui-time-list__container::-webkit-scrollbar-thumb:hover{background:var(--fui-text-secondary)}.fui-time-list__option{display:flex;align-items:center;padding:var(--fui-spacing-02) var(--fui-spacing-04);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);line-height:var(--fui-line-height-02);color:var(--fui-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--fui-duration-fast-01) var(--fui-ease-standard) 0ms}.fui-time-list__option:hover:not(.fui-time-list__option--disabled){background-color:var(--fui-surface-02)}.fui-time-list__option--selected{background-color:var(--fui-primary-20);color:var(--fui-primary-80);font-weight:var(--fui-font-weight-medium)}.fui-time-list__option--selected:hover:not(.fui-time-list__option--disabled){background-color:var(--fui-primary-30)}.fui-time-list__option--focused{outline:2px solid var(--fui-primary-60);outline-offset:-2px;border-radius:var(--fui-border-radius-sm)}.fui-time-list__option--disabled{color:var(--fui-text-disabled);cursor:not-allowed;opacity:.5}\n"] }]
+                    }, template: "<div\r\n  #listContainer\r\n  class=\"fui-time-list__container\"\r\n  role=\"listbox\"\r\n  tabindex=\"0\"\r\n  [attr.aria-label]=\"intl.availableTimesAriaLabel\"\r\n  (keydown)=\"onKeydown($event)\"\r\n>\r\n  @for (option of options(); track option.label) {\r\n    <div\r\n      class=\"fui-time-list__option\"\r\n      [class.fui-time-list__option--selected]=\"_isSelected(option)\"\r\n      [class.fui-time-list__option--disabled]=\"option.disabled\"\r\n      [class.fui-time-list__option--focused]=\"_focusedIndex() === $index\"\r\n      [attr.id]=\"'fui-time-option-' + $index\"\r\n      [attr.aria-selected]=\"_isSelected(option)\"\r\n      [attr.aria-disabled]=\"option.disabled\"\r\n      role=\"option\"\r\n      (click)=\"_selectOption(option)\"\r\n    >\r\n      {{ option.label }}\r\n    </div>\r\n  }\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-time-list{display:block}.fui-time-list__container{max-height:200px;overflow-y:auto;overflow-x:hidden;padding:var(--fui-spacing-02) 0}.fui-time-list__container::-webkit-scrollbar{width:8px}.fui-time-list__container::-webkit-scrollbar-track{background:var(--fui-surface-01);border-radius:var(--fui-border-radius-sm)}.fui-time-list__container::-webkit-scrollbar-thumb{background:var(--fui-border-color);border-radius:var(--fui-border-radius-sm)}.fui-time-list__container::-webkit-scrollbar-thumb:hover{background:var(--fui-text-secondary)}.fui-time-list__option{display:flex;align-items:center;padding:var(--fui-spacing-02) var(--fui-spacing-04);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);line-height:var(--fui-line-height-02);color:var(--fui-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--fui-duration-fast-01) var(--fui-ease-standard) 0ms}.fui-time-list__option:hover:not(.fui-time-list__option--disabled){background-color:var(--fui-surface-02)}.fui-time-list__option--selected{background-color:var(--fui-primary-20);color:var(--fui-primary-80);font-weight:var(--fui-font-weight-medium)}.fui-time-list__option--selected:hover:not(.fui-time-list__option--disabled){background-color:var(--fui-primary-30)}.fui-time-list__option--focused{outline:2px solid var(--fui-primary-60);outline-offset:-2px;border-radius:var(--fui-border-radius-sm)}.fui-time-list__option--disabled{color:var(--fui-text-disabled);cursor:not-allowed;opacity:.5}\n"] }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], selectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValue", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], listContainer: [{
                 type: ViewChild,
                 args: ['listContainer', { static: false }]
@@ -358,6 +374,8 @@ class FuiTimePickerComponent {
     _elementRef = inject(ElementRef);
     _document = inject(DOCUMENT);
     _ngZone = inject(NgZone);
+    intl = inject(FuiTimePickerIntl);
+    _cdr = inject(ChangeDetectorRef);
     _outsideClickSub;
     // CVA callbacks
     _onChange = () => {
@@ -367,6 +385,7 @@ class FuiTimePickerComponent {
         /* noop */
     };
     constructor() {
+        this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => { this._cdr.markForCheck(); });
         void Promise.resolve().then(() => {
             if (this._ngControlRef.ngControl) {
                 this._ngControlRef.ngControl.valueAccessor = this;
@@ -605,7 +624,7 @@ class FuiTimePickerComponent {
                 provide: FUI_FORM_FIELD_CONTROL,
                 useExisting: FuiTimePickerComponent,
             },
-        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "timeListPanel", first: true, predicate: ["timeListPanel"], descendants: true }], ngImport: i0, template: "<div class=\"fui-time-picker__wrapper\">\r\n  <input\r\n    #inputElement\r\n    class=\"fui-time-picker__input\"\r\n    type=\"text\"\r\n    [attr.placeholder]=\"placeholder()\"\r\n    [attr.disabled]=\"disabled() ? '' : null\"\r\n    [attr.readonly]=\"readonly() ? '' : null\"\r\n    [value]=\"_displayValue()\"\r\n    [attr.aria-expanded]=\"_panelOpen()\"\r\n    [attr.aria-haspopup]=\"'listbox'\"\r\n    [attr.aria-describedby]=\"_ariaDescribedby\"\r\n    [attr.aria-required]=\"required()\"\r\n    [attr.aria-invalid]=\"errorState()\"\r\n    role=\"combobox\"\r\n    autocomplete=\"off\"\r\n    (input)=\"_onManualInput($event)\"\r\n    (keydown)=\"_onKeydown($event)\"\r\n    (focus)=\"_onFocus()\"\r\n    (blur)=\"_onBlur()\"\r\n  />\r\n  @if (!_readOnly()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"fui-time-picker__toggle\"\r\n      (click)=\"_togglePanel()\"\r\n      [disabled]=\"disabled() || readonly()\"\r\n      tabindex=\"-1\"\r\n      aria-label=\"Toggle time picker\"\r\n    >\r\n      <fui-icon name=\"clock\" size=\"sm\"></fui-icon>\r\n    </button>\r\n  }\r\n</div>\r\n\r\n@if (_panelOpen()) {\r\n  <div #timeListPanel class=\"fui-time-picker__panel\" role=\"dialog\" aria-label=\"Time selection\">\r\n    <fui-time-list\r\n      [options]=\"_timeOptions()\"\r\n      [selectedValue]=\"_value()\"\r\n      [format]=\"formatInput()\"\r\n      (optionSelected)=\"_onOptionSelected($event)\"\r\n    />\r\n  </div>\r\n}\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)}.fui-time-picker{--fui-time-picker-font-size: var(--fui-font-size-02);--fui-time-picker-panel-border-radius: var(--fui-border-radius-md);--fui-time-picker-panel-shadow: var(--fui-shadow-03);--fui-time-picker-panel-bg: var(--fui-surface-00);--fui-time-picker-toggle-size: 1.5rem;display:inline-block;width:100%;position:relative}.fui-time-picker__wrapper{width:100%;min-height:100%;display:flex;align-items:center;gap:var(--fui-spacing-01);cursor:pointer;background:transparent;border:none}.fui-time-picker__input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-02);letter-spacing:var(--fui-letter-spacing-normal);color:var(--fui-text-primary);padding:0;cursor:text}.fui-time-picker__input::placeholder{color:var(--fui-text-disabled)}.fui-time-picker__input:disabled{cursor:not-allowed;opacity:.5}.fui-time-picker__toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-time-picker__toggle:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-time-picker__toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--fui-time-picker-toggle-size);height:var(--fui-time-picker-toggle-size);color:var(--fui-text-secondary);border-radius:var(--fui-border-radius-sm);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-time-picker__toggle:hover:not(:disabled){color:var(--fui-text-primary)}.fui-time-picker__toggle:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-time-picker__panel{background:var(--fui-time-picker-panel-bg);border:1px solid var(--fui-border-color);border-radius:var(--fui-time-picker-panel-border-radius);box-shadow:var(--fui-time-picker-panel-shadow);transition:opacity,transform var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-time-picker--disabled{pointer-events:none}.fui-time-picker--disabled .fui-time-picker__wrapper{cursor:not-allowed;opacity:.5}.fui-time-picker--readonly{pointer-events:none}.fui-time-picker--readonly .fui-time-picker__wrapper{cursor:default;opacity:1}.fui-time-picker--readonly .fui-time-picker__input{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-time-picker--readonly .fui-time-picker__input:disabled{opacity:1;cursor:default}.fui-time-picker-backdrop{background:transparent}.fui-time-picker-overlay-panel{z-index:var(--fui-z-popover, 1060)}@media(prefers-contrast:high){.fui-time-picker__panel{border-width:2px}}@media(prefers-reduced-motion:reduce){.fui-time-picker__panel{transition:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "component", type: FuiTimeListComponent, selector: "fui-time-list", inputs: ["options", "selectedValue", "format"], outputs: ["optionSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "timeListPanel", first: true, predicate: ["timeListPanel"], descendants: true }], ngImport: i0, template: "<div class=\"fui-time-picker__wrapper\">\r\n  <input\r\n    #inputElement\r\n    class=\"fui-time-picker__input\"\r\n    type=\"text\"\r\n    [attr.placeholder]=\"placeholder()\"\r\n    [attr.disabled]=\"disabled() ? '' : null\"\r\n    [attr.readonly]=\"readonly() ? '' : null\"\r\n    [value]=\"_displayValue()\"\r\n    [attr.aria-expanded]=\"_panelOpen()\"\r\n    [attr.aria-haspopup]=\"'listbox'\"\r\n    [attr.aria-describedby]=\"_ariaDescribedby\"\r\n    [attr.aria-required]=\"required()\"\r\n    [attr.aria-invalid]=\"errorState()\"\r\n    role=\"combobox\"\r\n    autocomplete=\"off\"\r\n    (input)=\"_onManualInput($event)\"\r\n    (keydown)=\"_onKeydown($event)\"\r\n    (focus)=\"_onFocus()\"\r\n    (blur)=\"_onBlur()\"\r\n  />\r\n  @if (!_readOnly()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"fui-time-picker__toggle\"\r\n      (click)=\"_togglePanel()\"\r\n      [disabled]=\"disabled() || readonly()\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-label]=\"intl.toggleAriaLabel\"\r\n    >\r\n      <fui-icon name=\"clock\" size=\"sm\"></fui-icon>\r\n    </button>\r\n  }\r\n</div>\r\n\r\n@if (_panelOpen()) {\r\n  <div #timeListPanel class=\"fui-time-picker__panel\" role=\"dialog\" [attr.aria-label]=\"intl.dialogAriaLabel\">\r\n    <fui-time-list\r\n      [options]=\"_timeOptions()\"\r\n      [selectedValue]=\"_value()\"\r\n      [format]=\"formatInput()\"\r\n      (optionSelected)=\"_onOptionSelected($event)\"\r\n    />\r\n  </div>\r\n}\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-time-picker{--fui-time-picker-font-size: var(--fui-font-size-02);--fui-time-picker-panel-border-radius: var(--fui-border-radius-md);--fui-time-picker-panel-shadow: var(--fui-shadow-03);--fui-time-picker-panel-bg: var(--fui-surface-00);--fui-time-picker-toggle-size: 1.5rem;display:inline-block;width:100%;position:relative}.fui-time-picker__wrapper{width:100%;min-height:100%;display:flex;align-items:center;gap:var(--fui-spacing-01);cursor:pointer;background:transparent;border:none}.fui-time-picker__input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-02);letter-spacing:var(--fui-letter-spacing-normal);color:var(--fui-text-primary);padding:0;cursor:text}.fui-time-picker__input::placeholder{color:var(--fui-text-disabled)}.fui-time-picker__input:disabled{cursor:not-allowed;opacity:.5}.fui-time-picker__toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-time-picker__toggle:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-time-picker__toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--fui-time-picker-toggle-size);height:var(--fui-time-picker-toggle-size);color:var(--fui-text-secondary);border-radius:var(--fui-border-radius-sm);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-time-picker__toggle:hover:not(:disabled){color:var(--fui-text-primary)}.fui-time-picker__toggle:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-time-picker__panel{background:var(--fui-time-picker-panel-bg);border:1px solid var(--fui-border-color);border-radius:var(--fui-time-picker-panel-border-radius);box-shadow:var(--fui-time-picker-panel-shadow);transition:opacity,transform var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-time-picker--disabled{pointer-events:none}.fui-time-picker--disabled .fui-time-picker__wrapper{cursor:not-allowed;opacity:.5}.fui-time-picker--readonly{pointer-events:none}.fui-time-picker--readonly .fui-time-picker__wrapper{cursor:default;opacity:1}.fui-time-picker--readonly .fui-time-picker__input{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-time-picker--readonly .fui-time-picker__input:disabled{opacity:1;cursor:default}.fui-time-picker-backdrop{background:transparent}.fui-time-picker-overlay-panel{z-index:var(--fui-z-popover, 1060)}@media(prefers-contrast:high){.fui-time-picker__panel{border-width:2px}}@media(prefers-reduced-motion:reduce){.fui-time-picker__panel{transition:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "component", type: FuiTimeListComponent, selector: "fui-time-list", inputs: ["options", "selectedValue", "format"], outputs: ["optionSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTimePickerComponent, decorators: [{
             type: Component,
@@ -627,7 +646,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                             provide: FUI_FORM_FIELD_CONTROL,
                             useExisting: FuiTimePickerComponent,
                         },
-                    ], template: "<div class=\"fui-time-picker__wrapper\">\r\n  <input\r\n    #inputElement\r\n    class=\"fui-time-picker__input\"\r\n    type=\"text\"\r\n    [attr.placeholder]=\"placeholder()\"\r\n    [attr.disabled]=\"disabled() ? '' : null\"\r\n    [attr.readonly]=\"readonly() ? '' : null\"\r\n    [value]=\"_displayValue()\"\r\n    [attr.aria-expanded]=\"_panelOpen()\"\r\n    [attr.aria-haspopup]=\"'listbox'\"\r\n    [attr.aria-describedby]=\"_ariaDescribedby\"\r\n    [attr.aria-required]=\"required()\"\r\n    [attr.aria-invalid]=\"errorState()\"\r\n    role=\"combobox\"\r\n    autocomplete=\"off\"\r\n    (input)=\"_onManualInput($event)\"\r\n    (keydown)=\"_onKeydown($event)\"\r\n    (focus)=\"_onFocus()\"\r\n    (blur)=\"_onBlur()\"\r\n  />\r\n  @if (!_readOnly()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"fui-time-picker__toggle\"\r\n      (click)=\"_togglePanel()\"\r\n      [disabled]=\"disabled() || readonly()\"\r\n      tabindex=\"-1\"\r\n      aria-label=\"Toggle time picker\"\r\n    >\r\n      <fui-icon name=\"clock\" size=\"sm\"></fui-icon>\r\n    </button>\r\n  }\r\n</div>\r\n\r\n@if (_panelOpen()) {\r\n  <div #timeListPanel class=\"fui-time-picker__panel\" role=\"dialog\" aria-label=\"Time selection\">\r\n    <fui-time-list\r\n      [options]=\"_timeOptions()\"\r\n      [selectedValue]=\"_value()\"\r\n      [format]=\"formatInput()\"\r\n      (optionSelected)=\"_onOptionSelected($event)\"\r\n    />\r\n  </div>\r\n}\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)}.fui-time-picker{--fui-time-picker-font-size: var(--fui-font-size-02);--fui-time-picker-panel-border-radius: var(--fui-border-radius-md);--fui-time-picker-panel-shadow: var(--fui-shadow-03);--fui-time-picker-panel-bg: var(--fui-surface-00);--fui-time-picker-toggle-size: 1.5rem;display:inline-block;width:100%;position:relative}.fui-time-picker__wrapper{width:100%;min-height:100%;display:flex;align-items:center;gap:var(--fui-spacing-01);cursor:pointer;background:transparent;border:none}.fui-time-picker__input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-02);letter-spacing:var(--fui-letter-spacing-normal);color:var(--fui-text-primary);padding:0;cursor:text}.fui-time-picker__input::placeholder{color:var(--fui-text-disabled)}.fui-time-picker__input:disabled{cursor:not-allowed;opacity:.5}.fui-time-picker__toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-time-picker__toggle:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-time-picker__toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--fui-time-picker-toggle-size);height:var(--fui-time-picker-toggle-size);color:var(--fui-text-secondary);border-radius:var(--fui-border-radius-sm);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-time-picker__toggle:hover:not(:disabled){color:var(--fui-text-primary)}.fui-time-picker__toggle:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-time-picker__panel{background:var(--fui-time-picker-panel-bg);border:1px solid var(--fui-border-color);border-radius:var(--fui-time-picker-panel-border-radius);box-shadow:var(--fui-time-picker-panel-shadow);transition:opacity,transform var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-time-picker--disabled{pointer-events:none}.fui-time-picker--disabled .fui-time-picker__wrapper{cursor:not-allowed;opacity:.5}.fui-time-picker--readonly{pointer-events:none}.fui-time-picker--readonly .fui-time-picker__wrapper{cursor:default;opacity:1}.fui-time-picker--readonly .fui-time-picker__input{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-time-picker--readonly .fui-time-picker__input:disabled{opacity:1;cursor:default}.fui-time-picker-backdrop{background:transparent}.fui-time-picker-overlay-panel{z-index:var(--fui-z-popover, 1060)}@media(prefers-contrast:high){.fui-time-picker__panel{border-width:2px}}@media(prefers-reduced-motion:reduce){.fui-time-picker__panel{transition:none}}\n"] }]
+                    ], template: "<div class=\"fui-time-picker__wrapper\">\r\n  <input\r\n    #inputElement\r\n    class=\"fui-time-picker__input\"\r\n    type=\"text\"\r\n    [attr.placeholder]=\"placeholder()\"\r\n    [attr.disabled]=\"disabled() ? '' : null\"\r\n    [attr.readonly]=\"readonly() ? '' : null\"\r\n    [value]=\"_displayValue()\"\r\n    [attr.aria-expanded]=\"_panelOpen()\"\r\n    [attr.aria-haspopup]=\"'listbox'\"\r\n    [attr.aria-describedby]=\"_ariaDescribedby\"\r\n    [attr.aria-required]=\"required()\"\r\n    [attr.aria-invalid]=\"errorState()\"\r\n    role=\"combobox\"\r\n    autocomplete=\"off\"\r\n    (input)=\"_onManualInput($event)\"\r\n    (keydown)=\"_onKeydown($event)\"\r\n    (focus)=\"_onFocus()\"\r\n    (blur)=\"_onBlur()\"\r\n  />\r\n  @if (!_readOnly()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"fui-time-picker__toggle\"\r\n      (click)=\"_togglePanel()\"\r\n      [disabled]=\"disabled() || readonly()\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-label]=\"intl.toggleAriaLabel\"\r\n    >\r\n      <fui-icon name=\"clock\" size=\"sm\"></fui-icon>\r\n    </button>\r\n  }\r\n</div>\r\n\r\n@if (_panelOpen()) {\r\n  <div #timeListPanel class=\"fui-time-picker__panel\" role=\"dialog\" [attr.aria-label]=\"intl.dialogAriaLabel\">\r\n    <fui-time-list\r\n      [options]=\"_timeOptions()\"\r\n      [selectedValue]=\"_value()\"\r\n      [format]=\"formatInput()\"\r\n      (optionSelected)=\"_onOptionSelected($event)\"\r\n    />\r\n  </div>\r\n}\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-time-picker{--fui-time-picker-font-size: var(--fui-font-size-02);--fui-time-picker-panel-border-radius: var(--fui-border-radius-md);--fui-time-picker-panel-shadow: var(--fui-shadow-03);--fui-time-picker-panel-bg: var(--fui-surface-00);--fui-time-picker-toggle-size: 1.5rem;display:inline-block;width:100%;position:relative}.fui-time-picker__wrapper{width:100%;min-height:100%;display:flex;align-items:center;gap:var(--fui-spacing-01);cursor:pointer;background:transparent;border:none}.fui-time-picker__input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-02);letter-spacing:var(--fui-letter-spacing-normal);color:var(--fui-text-primary);padding:0;cursor:text}.fui-time-picker__input::placeholder{color:var(--fui-text-disabled)}.fui-time-picker__input:disabled{cursor:not-allowed;opacity:.5}.fui-time-picker__toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-time-picker__toggle:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-time-picker__toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--fui-time-picker-toggle-size);height:var(--fui-time-picker-toggle-size);color:var(--fui-text-secondary);border-radius:var(--fui-border-radius-sm);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-time-picker__toggle:hover:not(:disabled){color:var(--fui-text-primary)}.fui-time-picker__toggle:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-time-picker__panel{background:var(--fui-time-picker-panel-bg);border:1px solid var(--fui-border-color);border-radius:var(--fui-time-picker-panel-border-radius);box-shadow:var(--fui-time-picker-panel-shadow);transition:opacity,transform var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-time-picker--disabled{pointer-events:none}.fui-time-picker--disabled .fui-time-picker__wrapper{cursor:not-allowed;opacity:.5}.fui-time-picker--readonly{pointer-events:none}.fui-time-picker--readonly .fui-time-picker__wrapper{cursor:default;opacity:1}.fui-time-picker--readonly .fui-time-picker__input{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-time-picker--readonly .fui-time-picker__input:disabled{opacity:1;cursor:default}.fui-time-picker-backdrop{background:transparent}.fui-time-picker-overlay-panel{z-index:var(--fui-z-popover, 1060)}@media(prefers-contrast:high){.fui-time-picker__panel{border-width:2px}}@media(prefers-reduced-motion:reduce){.fui-time-picker__panel{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { formatInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], timeChange: [{ type: i0.Output, args: ["timeChange"] }], inputElement: [{
                 type: ViewChild,
                 args: ['inputElement', { static: false }]
@@ -640,5 +659,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { FuiTimeListComponent, FuiTimePickerComponent, compareTime, formatTime, generateTimeOptions, isTimeInRange, parseISOTimeString, parseTimeString, timeToMinutes, timeValueToString };
+export { FuiTimeListComponent, FuiTimePickerComponent, FuiTimePickerIntl, compareTime, formatTime, generateTimeOptions, isTimeInRange, parseISOTimeString, parseTimeString, timeToMinutes, timeValueToString };
 //# sourceMappingURL=raintonic-formaui-components-time-picker.mjs.map