@raintonic/formaui 0.2.1 → 0.3.0

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

@@ -1,7 +1,24 @@
 import * as i0 from '@angular/core';
-import { input, signal, output, computed, effect, ViewChild, Component } from '@angular/core';
+import { Injectable, input, signal, output, inject, ChangeDetectorRef, computed, effect, ViewChild, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FuiButtonDirective } from '@raintonic/formaui/components/button';
 import { FuiIconComponent } from '@raintonic/formaui/components/icon';
+import { FuiIntlBase } from '@raintonic/formaui/core';
+
+class FuiPaginatorIntl extends FuiIntlBase {
+    rootAriaLabel = 'Pagination';
+    prevPageAriaLabel = 'Go to previous page';
+    nextPageAriaLabel = 'Go to next page';
+    pageAriaLabel(page, total) {
+        return `Page ${page} of ${total}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiPaginatorIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiPaginatorIntl, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiPaginatorIntl, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
 /**
  * # Paginator Component
@@ -23,6 +40,8 @@ class FuiPaginatorComponent {
     // Output events
     pageSelected = output();
     _pageAnnouncer;
+    intl = inject(FuiPaginatorIntl);
+    _cdr = inject(ChangeDetectorRef);
     // Computed properties
     totalPages = computed(() => {
         const total = this.numberOfItems();
@@ -69,6 +88,7 @@ class FuiPaginatorComponent {
         return pages;
     }, ...(ngDevMode ? [{ debugName: "pageNumbers" }] : /* istanbul ignore next */ []));
     constructor() {
+        this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => { this._cdr.markForCheck(); });
         // Sync currentPage input to internal state
         effect(() => {
             const page = this.currentPage();
@@ -85,7 +105,7 @@ class FuiPaginatorComponent {
         if (typeof page === 'number') {
             this._currentPage.set(page);
             this.pageSelected.emit(page);
-            this._announce(`Page ${page} of ${this.totalPages()}`);
+            this._announce(this.intl.pageAriaLabel(page, this.totalPages()));
         }
     }
     onPreviousClick() {
@@ -93,7 +113,7 @@ class FuiPaginatorComponent {
             const newPage = this._currentPage() - 1;
             this._currentPage.set(newPage);
             this.pageSelected.emit(newPage);
-            this._announce(`Page ${newPage} of ${this.totalPages()}`);
+            this._announce(this.intl.pageAriaLabel(newPage, this.totalPages()));
         }
     }
     onNextClick() {
@@ -101,7 +121,7 @@ class FuiPaginatorComponent {
             const newPage = this._currentPage() + 1;
             this._currentPage.set(newPage);
             this.pageSelected.emit(newPage);
-            this._announce(`Page ${newPage} of ${this.totalPages()}`);
+            this._announce(this.intl.pageAriaLabel(newPage, this.totalPages()));
         }
     }
     _announce(message) {
@@ -119,13 +139,13 @@ class FuiPaginatorComponent {
         return typeof page === 'number';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiPaginatorComponent, isStandalone: true, selector: "fui-paginator", inputs: { numberOfItems: { classPropertyName: "numberOfItems", publicName: "numberOfItems", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: true, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSelected: "pageSelected" }, host: { classAttribute: "fui-paginator" }, viewQueries: [{ propertyName: "_pageAnnouncer", first: true, predicate: ["pageAnnouncer"], descendants: true }], ngImport: i0, template: "<nav role=\"navigation\" aria-label=\"Pagination\" class=\"fui-paginator__container\">\r\n  <!-- Live region for page change announcements -->\r\n  <div class=\"fui-sr-only\" aria-live=\"polite\" aria-atomic=\"true\" #pageAnnouncer></div>\r\n\r\n  <!-- Previous Button -->\r\n  <button\r\n    fuiButton\r\n    variant=\"outline\"\r\n    size=\"md\"\r\n    iconOnly\r\n    [disabled]=\"isFirstPage()\"\r\n    [attr.aria-disabled]=\"isFirstPage()\"\r\n    (click)=\"onPreviousClick()\"\r\n    aria-label=\"Go to previous page\"\r\n    class=\"fui-paginator__nav-button\"\r\n  >\r\n    <fui-icon name=\"caret-left\" size=\"md\"></fui-icon>\r\n  </button>\r\n\r\n  <!-- Page Numbers -->\r\n  <div class=\"fui-paginator__page-buttons\">\r\n    @for (page of pageNumbers(); track page) {\r\n      @if (typeof page === 'string') {\r\n        <!-- Ellipsis -->\r\n        <span class=\"fui-paginator__ellipsis\" aria-hidden=\"true\">\r\n          {{ page }}\r\n        </span>\r\n      } @else {\r\n        <!-- Page Number Button -->\r\n        <button\r\n          fuiButton\r\n          [variant]=\"isPageActive(page) ? 'primary' : 'ghost'\"\r\n          size=\"md\"\r\n          [disabled]=\"false\"\r\n          (click)=\"onPageClick(page)\"\r\n          [attr.aria-current]=\"isPageActive(page) ? 'page' : null\"\r\n          [attr.aria-label]=\"'Page ' + page + ' of ' + totalPages()\"\r\n          class=\"fui-paginator__page-button\"\r\n        >\r\n          {{ page }}\r\n        </button>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  <!-- Next Button -->\r\n  <button\r\n    fuiButton\r\n    variant=\"outline\"\r\n    size=\"md\"\r\n    iconOnly\r\n    [disabled]=\"isLastPage()\"\r\n    [attr.aria-disabled]=\"isLastPage()\"\r\n    (click)=\"onNextClick()\"\r\n    aria-label=\"Go to next page\"\r\n    class=\"fui-paginator__nav-button\"\r\n  >\r\n    <fui-icon name=\"caret-right\" size=\"md\"></fui-icon>\r\n  </button>\r\n</nav>\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-paginator{--fui-paginator-bg: transparent;--fui-paginator-button-size: 2.5rem;--fui-paginator-font-size: var(--fui-font-size-sm);--fui-paginator-border-radius: var(--fui-border-radius-sm);--fui-paginator-gap: var(--fui-spacing-02);--fui-paginator-active-bg: var(--fui-primary);--fui-paginator-active-color: var(--fui-primary-text);--fui-paginator-active-hover-bg: var(--fui-primary-hover);--fui-paginator-hover-bg: var(--fui-primary-20)}.fui-paginator__container{display:flex;align-items:center;justify-content:center;gap:var(--fui-spacing-02);background-color:var(--fui-paginator-bg);flex-wrap:wrap}.fui-paginator__nav-button{flex-shrink:0;min-width:auto;padding:var(--fui-spacing-02)}.fui-paginator__nav-button:disabled{cursor:not-allowed;opacity:var(--fui-opacity-disabled)}.fui-paginator__page-buttons{display:flex;align-items:center;gap:var(--fui-spacing-01);flex-wrap:wrap;justify-content:center}.fui-paginator__page-button{min-width:var(--fui-paginator-button-size);height:var(--fui-paginator-button-size);padding:0;border-radius:var(--fui-paginator-border-radius);font-weight:500;font-size:var(--fui-paginator-font-size)}.fui-paginator__page-button:not(:disabled){cursor:pointer}.fui-paginator__page-button:not(:disabled):hover{background-color:var(--fui-paginator-hover-bg)}.fui-paginator__page-button:disabled{cursor:not-allowed}.fui-paginator__page-button[aria-current=page]{background-color:var(--fui-paginator-active-bg);color:var(--fui-paginator-active-color);font-weight:600}.fui-paginator__page-button[aria-current=page]:hover{background-color:var(--fui-paginator-active-hover-bg)}.fui-paginator__page-button{transition:all var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-paginator__page-button:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--fui-paginator-button-size);height:var(--fui-paginator-button-size);color:var(--fui-text-secondary);font-weight:500;font-size:var(--fui-font-size-sm);-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: FuiButtonDirective, selector: "button[fuiButton], a[fuiButton]", inputs: ["variant", "size", "disabled", "fullWidth", "loading", "iconOnly", "aria-label", "type"] }, { kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiPaginatorComponent, isStandalone: true, selector: "fui-paginator", inputs: { numberOfItems: { classPropertyName: "numberOfItems", publicName: "numberOfItems", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: true, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSelected: "pageSelected" }, host: { classAttribute: "fui-paginator" }, viewQueries: [{ propertyName: "_pageAnnouncer", first: true, predicate: ["pageAnnouncer"], descendants: true }], ngImport: i0, template: "<nav role=\"navigation\" [attr.aria-label]=\"intl.rootAriaLabel\" class=\"fui-paginator__container\">\r\n  <!-- Live region for page change announcements -->\r\n  <div class=\"fui-sr-only\" aria-live=\"polite\" aria-atomic=\"true\" #pageAnnouncer></div>\r\n\r\n  <!-- Previous Button -->\r\n  <button\r\n    fuiButton\r\n    variant=\"secondary\"\r\n    size=\"md\"\r\n    iconOnly\r\n    [disabled]=\"isFirstPage()\"\r\n    [attr.aria-disabled]=\"isFirstPage()\"\r\n    (click)=\"onPreviousClick()\"\r\n    [aria-label]=\"intl.prevPageAriaLabel\"\r\n    class=\"fui-paginator__nav-button\"\r\n  >\r\n    <fui-icon name=\"caret-left\" size=\"md\"></fui-icon>\r\n  </button>\r\n\r\n  <!-- Page Numbers -->\r\n  <div class=\"fui-paginator__page-buttons\">\r\n    @for (page of pageNumbers(); track page) {\r\n      @if (typeof page === 'string') {\r\n        <!-- Ellipsis -->\r\n        <span class=\"fui-paginator__ellipsis\" aria-hidden=\"true\">\r\n          {{ page }}\r\n        </span>\r\n      } @else {\r\n        <!-- Page Number Button -->\r\n        <button\r\n          fuiButton\r\n          [variant]=\"isPageActive(page) ? 'primary' : 'tertiary'\"\r\n          size=\"md\"\r\n          [disabled]=\"false\"\r\n          (click)=\"onPageClick(page)\"\r\n          [attr.aria-current]=\"isPageActive(page) ? 'page' : null\"\r\n          [aria-label]=\"intl.pageAriaLabel(page, totalPages())\"\r\n          class=\"fui-paginator__page-button\"\r\n        >\r\n          {{ page }}\r\n        </button>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  <!-- Next Button -->\r\n  <button\r\n    fuiButton\r\n    variant=\"secondary\"\r\n    size=\"md\"\r\n    iconOnly\r\n    [disabled]=\"isLastPage()\"\r\n    [attr.aria-disabled]=\"isLastPage()\"\r\n    (click)=\"onNextClick()\"\r\n    [aria-label]=\"intl.nextPageAriaLabel\"\r\n    class=\"fui-paginator__nav-button\"\r\n  >\r\n    <fui-icon name=\"caret-right\" size=\"md\"></fui-icon>\r\n  </button>\r\n</nav>\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-paginator{--fui-paginator-bg: transparent;--fui-paginator-button-size: 2.5rem;--fui-paginator-font-size: var(--fui-font-size-sm);--fui-paginator-border-radius: var(--fui-border-radius-sm);--fui-paginator-gap: var(--fui-spacing-02);--fui-paginator-active-bg: var(--fui-primary);--fui-paginator-active-color: var(--fui-primary-text);--fui-paginator-active-hover-bg: var(--fui-primary-hover);--fui-paginator-hover-bg: var(--fui-primary-20)}.fui-paginator__container{display:flex;align-items:center;justify-content:center;gap:var(--fui-spacing-02);background-color:var(--fui-paginator-bg);flex-wrap:wrap}.fui-paginator__nav-button{flex-shrink:0;min-width:auto;padding:var(--fui-spacing-02)}.fui-paginator__nav-button:disabled{cursor:not-allowed;opacity:var(--fui-opacity-disabled)}.fui-paginator__page-buttons{display:flex;align-items:center;gap:var(--fui-spacing-01);flex-wrap:wrap;justify-content:center}.fui-paginator__page-button{min-width:var(--fui-paginator-button-size);height:var(--fui-paginator-button-size);padding:0;border-radius:var(--fui-paginator-border-radius);font-weight:500;font-size:var(--fui-paginator-font-size)}.fui-paginator__page-button:not(:disabled){cursor:pointer}.fui-paginator__page-button:not(:disabled):hover{background-color:var(--fui-paginator-hover-bg)}.fui-paginator__page-button:disabled{cursor:not-allowed}.fui-paginator__page-button[aria-current=page]{background-color:var(--fui-paginator-active-bg);color:var(--fui-paginator-active-color);font-weight:600}.fui-paginator__page-button[aria-current=page]:hover{background-color:var(--fui-paginator-active-hover-bg)}.fui-paginator__page-button{transition:all var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-paginator__page-button:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--fui-paginator-button-size);height:var(--fui-paginator-button-size);color:var(--fui-text-secondary);font-weight:500;font-size:var(--fui-font-size-sm);-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: FuiButtonDirective, selector: "button[fuiButton], a[fuiButton]", inputs: ["variant", "size", "disabled", "fullWidth", "loading", "iconOnly", "aria-label", "type"] }, { kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiPaginatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fui-paginator', standalone: true, imports: [FuiButtonDirective, FuiIconComponent], host: {
                         class: 'fui-paginator',
-                    }, template: "<nav role=\"navigation\" aria-label=\"Pagination\" class=\"fui-paginator__container\">\r\n  <!-- Live region for page change announcements -->\r\n  <div class=\"fui-sr-only\" aria-live=\"polite\" aria-atomic=\"true\" #pageAnnouncer></div>\r\n\r\n  <!-- Previous Button -->\r\n  <button\r\n    fuiButton\r\n    variant=\"outline\"\r\n    size=\"md\"\r\n    iconOnly\r\n    [disabled]=\"isFirstPage()\"\r\n    [attr.aria-disabled]=\"isFirstPage()\"\r\n    (click)=\"onPreviousClick()\"\r\n    aria-label=\"Go to previous page\"\r\n    class=\"fui-paginator__nav-button\"\r\n  >\r\n    <fui-icon name=\"caret-left\" size=\"md\"></fui-icon>\r\n  </button>\r\n\r\n  <!-- Page Numbers -->\r\n  <div class=\"fui-paginator__page-buttons\">\r\n    @for (page of pageNumbers(); track page) {\r\n      @if (typeof page === 'string') {\r\n        <!-- Ellipsis -->\r\n        <span class=\"fui-paginator__ellipsis\" aria-hidden=\"true\">\r\n          {{ page }}\r\n        </span>\r\n      } @else {\r\n        <!-- Page Number Button -->\r\n        <button\r\n          fuiButton\r\n          [variant]=\"isPageActive(page) ? 'primary' : 'ghost'\"\r\n          size=\"md\"\r\n          [disabled]=\"false\"\r\n          (click)=\"onPageClick(page)\"\r\n          [attr.aria-current]=\"isPageActive(page) ? 'page' : null\"\r\n          [attr.aria-label]=\"'Page ' + page + ' of ' + totalPages()\"\r\n          class=\"fui-paginator__page-button\"\r\n        >\r\n          {{ page }}\r\n        </button>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  <!-- Next Button -->\r\n  <button\r\n    fuiButton\r\n    variant=\"outline\"\r\n    size=\"md\"\r\n    iconOnly\r\n    [disabled]=\"isLastPage()\"\r\n    [attr.aria-disabled]=\"isLastPage()\"\r\n    (click)=\"onNextClick()\"\r\n    aria-label=\"Go to next page\"\r\n    class=\"fui-paginator__nav-button\"\r\n  >\r\n    <fui-icon name=\"caret-right\" size=\"md\"></fui-icon>\r\n  </button>\r\n</nav>\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-paginator{--fui-paginator-bg: transparent;--fui-paginator-button-size: 2.5rem;--fui-paginator-font-size: var(--fui-font-size-sm);--fui-paginator-border-radius: var(--fui-border-radius-sm);--fui-paginator-gap: var(--fui-spacing-02);--fui-paginator-active-bg: var(--fui-primary);--fui-paginator-active-color: var(--fui-primary-text);--fui-paginator-active-hover-bg: var(--fui-primary-hover);--fui-paginator-hover-bg: var(--fui-primary-20)}.fui-paginator__container{display:flex;align-items:center;justify-content:center;gap:var(--fui-spacing-02);background-color:var(--fui-paginator-bg);flex-wrap:wrap}.fui-paginator__nav-button{flex-shrink:0;min-width:auto;padding:var(--fui-spacing-02)}.fui-paginator__nav-button:disabled{cursor:not-allowed;opacity:var(--fui-opacity-disabled)}.fui-paginator__page-buttons{display:flex;align-items:center;gap:var(--fui-spacing-01);flex-wrap:wrap;justify-content:center}.fui-paginator__page-button{min-width:var(--fui-paginator-button-size);height:var(--fui-paginator-button-size);padding:0;border-radius:var(--fui-paginator-border-radius);font-weight:500;font-size:var(--fui-paginator-font-size)}.fui-paginator__page-button:not(:disabled){cursor:pointer}.fui-paginator__page-button:not(:disabled):hover{background-color:var(--fui-paginator-hover-bg)}.fui-paginator__page-button:disabled{cursor:not-allowed}.fui-paginator__page-button[aria-current=page]{background-color:var(--fui-paginator-active-bg);color:var(--fui-paginator-active-color);font-weight:600}.fui-paginator__page-button[aria-current=page]:hover{background-color:var(--fui-paginator-active-hover-bg)}.fui-paginator__page-button{transition:all var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-paginator__page-button:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--fui-paginator-button-size);height:var(--fui-paginator-button-size);color:var(--fui-text-secondary);font-weight:500;font-size:var(--fui-font-size-sm);-webkit-user-select:none;user-select:none}\n"] }]
+                    }, template: "<nav role=\"navigation\" [attr.aria-label]=\"intl.rootAriaLabel\" class=\"fui-paginator__container\">\r\n  <!-- Live region for page change announcements -->\r\n  <div class=\"fui-sr-only\" aria-live=\"polite\" aria-atomic=\"true\" #pageAnnouncer></div>\r\n\r\n  <!-- Previous Button -->\r\n  <button\r\n    fuiButton\r\n    variant=\"secondary\"\r\n    size=\"md\"\r\n    iconOnly\r\n    [disabled]=\"isFirstPage()\"\r\n    [attr.aria-disabled]=\"isFirstPage()\"\r\n    (click)=\"onPreviousClick()\"\r\n    [aria-label]=\"intl.prevPageAriaLabel\"\r\n    class=\"fui-paginator__nav-button\"\r\n  >\r\n    <fui-icon name=\"caret-left\" size=\"md\"></fui-icon>\r\n  </button>\r\n\r\n  <!-- Page Numbers -->\r\n  <div class=\"fui-paginator__page-buttons\">\r\n    @for (page of pageNumbers(); track page) {\r\n      @if (typeof page === 'string') {\r\n        <!-- Ellipsis -->\r\n        <span class=\"fui-paginator__ellipsis\" aria-hidden=\"true\">\r\n          {{ page }}\r\n        </span>\r\n      } @else {\r\n        <!-- Page Number Button -->\r\n        <button\r\n          fuiButton\r\n          [variant]=\"isPageActive(page) ? 'primary' : 'tertiary'\"\r\n          size=\"md\"\r\n          [disabled]=\"false\"\r\n          (click)=\"onPageClick(page)\"\r\n          [attr.aria-current]=\"isPageActive(page) ? 'page' : null\"\r\n          [aria-label]=\"intl.pageAriaLabel(page, totalPages())\"\r\n          class=\"fui-paginator__page-button\"\r\n        >\r\n          {{ page }}\r\n        </button>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  <!-- Next Button -->\r\n  <button\r\n    fuiButton\r\n    variant=\"secondary\"\r\n    size=\"md\"\r\n    iconOnly\r\n    [disabled]=\"isLastPage()\"\r\n    [attr.aria-disabled]=\"isLastPage()\"\r\n    (click)=\"onNextClick()\"\r\n    [aria-label]=\"intl.nextPageAriaLabel\"\r\n    class=\"fui-paginator__nav-button\"\r\n  >\r\n    <fui-icon name=\"caret-right\" size=\"md\"></fui-icon>\r\n  </button>\r\n</nav>\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-paginator{--fui-paginator-bg: transparent;--fui-paginator-button-size: 2.5rem;--fui-paginator-font-size: var(--fui-font-size-sm);--fui-paginator-border-radius: var(--fui-border-radius-sm);--fui-paginator-gap: var(--fui-spacing-02);--fui-paginator-active-bg: var(--fui-primary);--fui-paginator-active-color: var(--fui-primary-text);--fui-paginator-active-hover-bg: var(--fui-primary-hover);--fui-paginator-hover-bg: var(--fui-primary-20)}.fui-paginator__container{display:flex;align-items:center;justify-content:center;gap:var(--fui-spacing-02);background-color:var(--fui-paginator-bg);flex-wrap:wrap}.fui-paginator__nav-button{flex-shrink:0;min-width:auto;padding:var(--fui-spacing-02)}.fui-paginator__nav-button:disabled{cursor:not-allowed;opacity:var(--fui-opacity-disabled)}.fui-paginator__page-buttons{display:flex;align-items:center;gap:var(--fui-spacing-01);flex-wrap:wrap;justify-content:center}.fui-paginator__page-button{min-width:var(--fui-paginator-button-size);height:var(--fui-paginator-button-size);padding:0;border-radius:var(--fui-paginator-border-radius);font-weight:500;font-size:var(--fui-paginator-font-size)}.fui-paginator__page-button:not(:disabled){cursor:pointer}.fui-paginator__page-button:not(:disabled):hover{background-color:var(--fui-paginator-hover-bg)}.fui-paginator__page-button:disabled{cursor:not-allowed}.fui-paginator__page-button[aria-current=page]{background-color:var(--fui-paginator-active-bg);color:var(--fui-paginator-active-color);font-weight:600}.fui-paginator__page-button[aria-current=page]:hover{background-color:var(--fui-paginator-active-hover-bg)}.fui-paginator__page-button{transition:all var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-paginator__page-button:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--fui-paginator-button-size);height:var(--fui-paginator-button-size);color:var(--fui-text-secondary);font-weight:500;font-size:var(--fui-font-size-sm);-webkit-user-select:none;user-select:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { numberOfItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfItems", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: true }] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }], pageSelected: [{ type: i0.Output, args: ["pageSelected"] }], _pageAnnouncer: [{
                 type: ViewChild,
                 args: ['pageAnnouncer']
@@ -135,5 +155,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { FuiPaginatorComponent };
+export { FuiPaginatorComponent, FuiPaginatorIntl };
 //# sourceMappingURL=raintonic-formaui-components-paginator.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"raintonic-formaui-components-paginator.mjs","sources":["../../../lib/components/paginator/paginator.component.ts","../../../lib/components/paginator/paginator.component.html","../../../lib/components/paginator/raintonic-formaui-components-paginator.ts"],"sourcesContent":["import { Component, computed, ElementRef, input, output, signal, effect, ViewChild } from '@angular/core';\r\n\r\nimport { FuiButtonDirective } from '@raintonic/formaui/components/button';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\n\r\n/**\r\n * # Paginator Component\r\n *\r\n * A pagination component that handles navigation through pages with:\r\n * - Previous/Next navigation buttons (disabled at boundaries)\r\n * - Page number buttons (at least 4 visible)\r\n * - Ellipsis (...) for remaining pages when there are more than 4 pages\r\n * - Emits page selection via output signal\r\n * - Keyboard support for accessibility\r\n */\r\n@Component({\r\n  selector: 'fui-paginator',\r\n  standalone: true,\r\n  imports: [FuiButtonDirective, FuiIconComponent],\r\n  templateUrl: './paginator.component.html',\r\n  styleUrl: './paginator.component.scss',\r\n  host: {\r\n    class: 'fui-paginator',\r\n  },\r\n})\r\nexport class FuiPaginatorComponent {\r\n  // Input properties\r\n  readonly numberOfItems = input.required<number>();\r\n  readonly pageSize = input.required<number>();\r\n  readonly currentPage = input(1);\r\n\r\n  // Internal state\r\n  private readonly _currentPage = signal(1);\r\n\r\n  // Output events\r\n  readonly pageSelected = output<number>();\r\n\r\n  @ViewChild('pageAnnouncer') private _pageAnnouncer?: ElementRef<HTMLElement>;\r\n\r\n  // Computed properties\r\n  readonly totalPages = computed(() => {\r\n    const total = this.numberOfItems();\r\n    const size = this.pageSize();\r\n\r\n    return Math.ceil(total / size);\r\n  });\r\n\r\n  readonly isFirstPage = computed(() => this._currentPage() === 1);\r\n  readonly isLastPage = computed(() => this._currentPage() === this.totalPages());\r\n\r\n  readonly pageNumbers = computed(() => {\r\n    const currentPage = this._currentPage();\r\n    const total = this.totalPages();\r\n\r\n    if (total <= 4) {\r\n      // Show all pages if 4 or fewer\r\n      return Array.from({ length: total }, (_, i) => i + 1);\r\n    }\r\n\r\n    // Show at least 4 buttons with ellipsis for remaining pages\r\n    const pages: (number | string)[] = [];\r\n\r\n    // Always include first page\r\n    pages.push(1);\r\n\r\n    // Determine the range around current page\r\n    let start = Math.max(2, currentPage - 1);\r\n    let end = Math.min(total - 1, currentPage + 1);\r\n\r\n    // Ensure we show at least 4 page buttons (including first and last)\r\n    if (end - start < 2) {\r\n      if (start === 2) {\r\n        end = Math.min(total - 1, start + 2);\r\n      } else {\r\n        start = Math.max(2, end - 2);\r\n      }\r\n    }\r\n\r\n    // Add ellipsis and pages\r\n    if (start > 2) {\r\n      pages.push('...');\r\n    }\r\n\r\n    for (let i = start; i <= end; i++) {\r\n      pages.push(i);\r\n    }\r\n\r\n    if (end < total - 1) {\r\n      pages.push('...');\r\n    }\r\n\r\n    // Always include last page\r\n    pages.push(total);\r\n\r\n    return pages;\r\n  });\r\n\r\n  constructor() {\r\n    // Sync currentPage input to internal state\r\n    effect(() => {\r\n      const page = this.currentPage();\r\n      this._currentPage.set(page);\r\n    });\r\n\r\n    // Reset to first page when numberOfItems or pageSize change\r\n    effect(() => {\r\n      this.numberOfItems();\r\n      this.pageSize();\r\n      this._currentPage.set(1);\r\n    });\r\n  }\r\n\r\n  onPageClick(page: number | string): void {\r\n    if (typeof page === 'number') {\r\n      this._currentPage.set(page);\r\n      this.pageSelected.emit(page);\r\n      this._announce(`Page ${page} of ${this.totalPages()}`);\r\n    }\r\n  }\r\n\r\n  onPreviousClick(): void {\r\n    if (!this.isFirstPage()) {\r\n      const newPage = this._currentPage() - 1;\r\n      this._currentPage.set(newPage);\r\n      this.pageSelected.emit(newPage);\r\n      this._announce(`Page ${newPage} of ${this.totalPages()}`);\r\n    }\r\n  }\r\n\r\n  onNextClick(): void {\r\n    if (!this.isLastPage()) {\r\n      const newPage = this._currentPage() + 1;\r\n      this._currentPage.set(newPage);\r\n      this.pageSelected.emit(newPage);\r\n      this._announce(`Page ${newPage} of ${this.totalPages()}`);\r\n    }\r\n  }\r\n\r\n  private _announce(message: string): void {\r\n    if (this._pageAnnouncer?.nativeElement) {\r\n      this._pageAnnouncer.nativeElement.textContent = message;\r\n    }\r\n  }\r\n\r\n  getCurrentPage(): number {\r\n    return this._currentPage();\r\n  }\r\n\r\n  isPageActive(page: number | string): boolean {\r\n    return typeof page === 'number' && page === this._currentPage();\r\n  }\r\n\r\n  isPageClickable(page: number | string): boolean {\r\n    return typeof page === 'number';\r\n  }\r\n}\r\n","<nav role=\"navigation\" aria-label=\"Pagination\" class=\"fui-paginator__container\">\r\n  <!-- Live region for page change announcements -->\r\n  <div class=\"fui-sr-only\" aria-live=\"polite\" aria-atomic=\"true\" #pageAnnouncer></div>\r\n\r\n  <!-- Previous Button -->\r\n  <button\r\n    fuiButton\r\n    variant=\"outline\"\r\n    size=\"md\"\r\n    iconOnly\r\n    [disabled]=\"isFirstPage()\"\r\n    [attr.aria-disabled]=\"isFirstPage()\"\r\n    (click)=\"onPreviousClick()\"\r\n    aria-label=\"Go to previous page\"\r\n    class=\"fui-paginator__nav-button\"\r\n  >\r\n    <fui-icon name=\"caret-left\" size=\"md\"></fui-icon>\r\n  </button>\r\n\r\n  <!-- Page Numbers -->\r\n  <div class=\"fui-paginator__page-buttons\">\r\n    @for (page of pageNumbers(); track page) {\r\n      @if (typeof page === 'string') {\r\n        <!-- Ellipsis -->\r\n        <span class=\"fui-paginator__ellipsis\" aria-hidden=\"true\">\r\n          {{ page }}\r\n        </span>\r\n      } @else {\r\n        <!-- Page Number Button -->\r\n        <button\r\n          fuiButton\r\n          [variant]=\"isPageActive(page) ? 'primary' : 'ghost'\"\r\n          size=\"md\"\r\n          [disabled]=\"false\"\r\n          (click)=\"onPageClick(page)\"\r\n          [attr.aria-current]=\"isPageActive(page) ? 'page' : null\"\r\n          [attr.aria-label]=\"'Page ' + page + ' of ' + totalPages()\"\r\n          class=\"fui-paginator__page-button\"\r\n        >\r\n          {{ page }}\r\n        </button>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  <!-- Next Button -->\r\n  <button\r\n    fuiButton\r\n    variant=\"outline\"\r\n    size=\"md\"\r\n    iconOnly\r\n    [disabled]=\"isLastPage()\"\r\n    [attr.aria-disabled]=\"isLastPage()\"\r\n    (click)=\"onNextClick()\"\r\n    aria-label=\"Go to next page\"\r\n    class=\"fui-paginator__nav-button\"\r\n  >\r\n    <fui-icon name=\"caret-right\" size=\"md\"></fui-icon>\r\n  </button>\r\n</nav>\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-paginator.mjs","sources":["../../../lib/components/paginator/paginator.intl.ts","../../../lib/components/paginator/paginator.component.ts","../../../lib/components/paginator/paginator.component.html","../../../lib/components/paginator/raintonic-formaui-components-paginator.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport { FuiIntlBase } from '@raintonic/formaui/core';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class FuiPaginatorIntl extends FuiIntlBase {\r\n  rootAriaLabel = 'Pagination';\r\n  prevPageAriaLabel = 'Go to previous page';\r\n  nextPageAriaLabel = 'Go to next page';\r\n  pageAriaLabel(page: number, total: number): string {\r\n    return `Page ${page} of ${total}`;\r\n  }\r\n}\r\n","import { ChangeDetectorRef, Component, computed, effect, ElementRef, inject, input, output, signal, ViewChild } from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\n\r\nimport { FuiButtonDirective } from '@raintonic/formaui/components/button';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\n\r\nimport { FuiPaginatorIntl } from './paginator.intl';\r\n\r\n/**\r\n * # Paginator Component\r\n *\r\n * A pagination component that handles navigation through pages with:\r\n * - Previous/Next navigation buttons (disabled at boundaries)\r\n * - Page number buttons (at least 4 visible)\r\n * - Ellipsis (...) for remaining pages when there are more than 4 pages\r\n * - Emits page selection via output signal\r\n * - Keyboard support for accessibility\r\n */\r\n@Component({\r\n  selector: 'fui-paginator',\r\n  standalone: true,\r\n  imports: [FuiButtonDirective, FuiIconComponent],\r\n  templateUrl: './paginator.component.html',\r\n  styleUrl: './paginator.component.scss',\r\n  host: {\r\n    class: 'fui-paginator',\r\n  },\r\n})\r\nexport class FuiPaginatorComponent {\r\n  // Input properties\r\n  readonly numberOfItems = input.required<number>();\r\n  readonly pageSize = input.required<number>();\r\n  readonly currentPage = input(1);\r\n\r\n  // Internal state\r\n  private readonly _currentPage = signal(1);\r\n\r\n  // Output events\r\n  readonly pageSelected = output<number>();\r\n\r\n  @ViewChild('pageAnnouncer') private _pageAnnouncer?: ElementRef<HTMLElement>;\r\n\r\n  readonly intl = inject(FuiPaginatorIntl);\r\n  private readonly _cdr = inject(ChangeDetectorRef);\r\n\r\n  // Computed properties\r\n  readonly totalPages = computed(() => {\r\n    const total = this.numberOfItems();\r\n    const size = this.pageSize();\r\n\r\n    return Math.ceil(total / size);\r\n  });\r\n\r\n  readonly isFirstPage = computed(() => this._currentPage() === 1);\r\n  readonly isLastPage = computed(() => this._currentPage() === this.totalPages());\r\n\r\n  readonly pageNumbers = computed(() => {\r\n    const currentPage = this._currentPage();\r\n    const total = this.totalPages();\r\n\r\n    if (total <= 4) {\r\n      // Show all pages if 4 or fewer\r\n      return Array.from({ length: total }, (_, i) => i + 1);\r\n    }\r\n\r\n    // Show at least 4 buttons with ellipsis for remaining pages\r\n    const pages: (number | string)[] = [];\r\n\r\n    // Always include first page\r\n    pages.push(1);\r\n\r\n    // Determine the range around current page\r\n    let start = Math.max(2, currentPage - 1);\r\n    let end = Math.min(total - 1, currentPage + 1);\r\n\r\n    // Ensure we show at least 4 page buttons (including first and last)\r\n    if (end - start < 2) {\r\n      if (start === 2) {\r\n        end = Math.min(total - 1, start + 2);\r\n      } else {\r\n        start = Math.max(2, end - 2);\r\n      }\r\n    }\r\n\r\n    // Add ellipsis and pages\r\n    if (start > 2) {\r\n      pages.push('...');\r\n    }\r\n\r\n    for (let i = start; i <= end; i++) {\r\n      pages.push(i);\r\n    }\r\n\r\n    if (end < total - 1) {\r\n      pages.push('...');\r\n    }\r\n\r\n    // Always include last page\r\n    pages.push(total);\r\n\r\n    return pages;\r\n  });\r\n\r\n  constructor() {\r\n    this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => { this._cdr.markForCheck(); });\r\n\r\n    // Sync currentPage input to internal state\r\n    effect(() => {\r\n      const page = this.currentPage();\r\n      this._currentPage.set(page);\r\n    });\r\n\r\n    // Reset to first page when numberOfItems or pageSize change\r\n    effect(() => {\r\n      this.numberOfItems();\r\n      this.pageSize();\r\n      this._currentPage.set(1);\r\n    });\r\n  }\r\n\r\n  onPageClick(page: number | string): void {\r\n    if (typeof page === 'number') {\r\n      this._currentPage.set(page);\r\n      this.pageSelected.emit(page);\r\n      this._announce(this.intl.pageAriaLabel(page, this.totalPages()));\r\n    }\r\n  }\r\n\r\n  onPreviousClick(): void {\r\n    if (!this.isFirstPage()) {\r\n      const newPage = this._currentPage() - 1;\r\n      this._currentPage.set(newPage);\r\n      this.pageSelected.emit(newPage);\r\n      this._announce(this.intl.pageAriaLabel(newPage, this.totalPages()));\r\n    }\r\n  }\r\n\r\n  onNextClick(): void {\r\n    if (!this.isLastPage()) {\r\n      const newPage = this._currentPage() + 1;\r\n      this._currentPage.set(newPage);\r\n      this.pageSelected.emit(newPage);\r\n      this._announce(this.intl.pageAriaLabel(newPage, this.totalPages()));\r\n    }\r\n  }\r\n\r\n  private _announce(message: string): void {\r\n    if (this._pageAnnouncer?.nativeElement) {\r\n      this._pageAnnouncer.nativeElement.textContent = message;\r\n    }\r\n  }\r\n\r\n  getCurrentPage(): number {\r\n    return this._currentPage();\r\n  }\r\n\r\n  isPageActive(page: number | string): boolean {\r\n    return typeof page === 'number' && page === this._currentPage();\r\n  }\r\n\r\n  isPageClickable(page: number | string): boolean {\r\n    return typeof page === 'number';\r\n  }\r\n}\r\n","<nav role=\"navigation\" [attr.aria-label]=\"intl.rootAriaLabel\" class=\"fui-paginator__container\">\r\n  <!-- Live region for page change announcements -->\r\n  <div class=\"fui-sr-only\" aria-live=\"polite\" aria-atomic=\"true\" #pageAnnouncer></div>\r\n\r\n  <!-- Previous Button -->\r\n  <button\r\n    fuiButton\r\n    variant=\"secondary\"\r\n    size=\"md\"\r\n    iconOnly\r\n    [disabled]=\"isFirstPage()\"\r\n    [attr.aria-disabled]=\"isFirstPage()\"\r\n    (click)=\"onPreviousClick()\"\r\n    [aria-label]=\"intl.prevPageAriaLabel\"\r\n    class=\"fui-paginator__nav-button\"\r\n  >\r\n    <fui-icon name=\"caret-left\" size=\"md\"></fui-icon>\r\n  </button>\r\n\r\n  <!-- Page Numbers -->\r\n  <div class=\"fui-paginator__page-buttons\">\r\n    @for (page of pageNumbers(); track page) {\r\n      @if (typeof page === 'string') {\r\n        <!-- Ellipsis -->\r\n        <span class=\"fui-paginator__ellipsis\" aria-hidden=\"true\">\r\n          {{ page }}\r\n        </span>\r\n      } @else {\r\n        <!-- Page Number Button -->\r\n        <button\r\n          fuiButton\r\n          [variant]=\"isPageActive(page) ? 'primary' : 'tertiary'\"\r\n          size=\"md\"\r\n          [disabled]=\"false\"\r\n          (click)=\"onPageClick(page)\"\r\n          [attr.aria-current]=\"isPageActive(page) ? 'page' : null\"\r\n          [aria-label]=\"intl.pageAriaLabel(page, totalPages())\"\r\n          class=\"fui-paginator__page-button\"\r\n        >\r\n          {{ page }}\r\n        </button>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  <!-- Next Button -->\r\n  <button\r\n    fuiButton\r\n    variant=\"secondary\"\r\n    size=\"md\"\r\n    iconOnly\r\n    [disabled]=\"isLastPage()\"\r\n    [attr.aria-disabled]=\"isLastPage()\"\r\n    (click)=\"onNextClick()\"\r\n    [aria-label]=\"intl.nextPageAriaLabel\"\r\n    class=\"fui-paginator__nav-button\"\r\n  >\r\n    <fui-icon name=\"caret-right\" size=\"md\"></fui-icon>\r\n  </button>\r\n</nav>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAIM,MAAO,gBAAiB,SAAQ,WAAW,CAAA;IAC/C,aAAa,GAAG,YAAY;IAC5B,iBAAiB,GAAG,qBAAqB;IACzC,iBAAiB,GAAG,iBAAiB;IACrC,aAAa,CAAC,IAAY,EAAE,KAAa,EAAA;AACvC,QAAA,OAAO,CAAA,KAAA,EAAQ,IAAI,CAAA,IAAA,EAAO,KAAK,EAAE;IACnC;uGANW,gBAAgB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,cADH,MAAM,EAAA,CAAA;;2FACnB,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAD5B,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;;ACKlC;;;;;;;;;AASG;MAWU,qBAAqB,CAAA;;AAEvB,IAAA,aAAa,GAAG,KAAK,CAAC,QAAQ,mFAAU;AACxC,IAAA,QAAQ,GAAG,KAAK,CAAC,QAAQ,8EAAU;AACnC,IAAA,WAAW,GAAG,KAAK,CAAC,CAAC,kFAAC;;AAGd,IAAA,YAAY,GAAG,MAAM,CAAC,CAAC,mFAAC;;IAGhC,YAAY,GAAG,MAAM,EAAU;AAEJ,IAAA,cAAc;AAEzC,IAAA,IAAI,GAAG,MAAM,CAAC,gBAAgB,CAAC;AACvB,IAAA,IAAI,GAAG,MAAM,CAAC,iBAAiB,CAAC;;AAGxC,IAAA,UAAU,GAAG,QAAQ,CAAC,MAAK;AAClC,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE;AAClC,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE;QAE5B,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;AAChC,IAAA,CAAC,iFAAC;AAEO,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,YAAY,EAAE,KAAK,CAAC,kFAAC;AACvD,IAAA,UAAU,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,YAAY,EAAE,KAAK,IAAI,CAAC,UAAU,EAAE,iFAAC;AAEtE,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAK;AACnC,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,EAAE;AACvC,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE;AAE/B,QAAA,IAAI,KAAK,IAAI,CAAC,EAAE;;YAEd,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACvD;;QAGA,MAAM,KAAK,GAAwB,EAAE;;AAGrC,QAAA,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;;AAGb,QAAA,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,WAAW,GAAG,CAAC,CAAC;AACxC,QAAA,IAAI,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,EAAE,WAAW,GAAG,CAAC,CAAC;;AAG9C,QAAA,IAAI,GAAG,GAAG,KAAK,GAAG,CAAC,EAAE;AACnB,YAAA,IAAI,KAAK,KAAK,CAAC,EAAE;AACf,gBAAA,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC;YACtC;iBAAO;gBACL,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC;YAC9B;QACF;;AAGA,QAAA,IAAI,KAAK,GAAG,CAAC,EAAE;AACb,YAAA,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;QACnB;AAEA,QAAA,KAAK,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,IAAI,GAAG,EAAE,CAAC,EAAE,EAAE;AACjC,YAAA,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;QACf;AAEA,QAAA,IAAI,GAAG,GAAG,KAAK,GAAG,CAAC,EAAE;AACnB,YAAA,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;QACnB;;AAGA,QAAA,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;AAEjB,QAAA,OAAO,KAAK;AACd,IAAA,CAAC,kFAAC;AAEF,IAAA,WAAA,GAAA;QACE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC,SAAS,CAAC,MAAK,EAAG,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC;;QAG3F,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE;AAC/B,YAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC;AAC7B,QAAA,CAAC,CAAC;;QAGF,MAAM,CAAC,MAAK;YACV,IAAI,CAAC,aAAa,EAAE;YACpB,IAAI,CAAC,QAAQ,EAAE;AACf,YAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC;AAC1B,QAAA,CAAC,CAAC;IACJ;AAEA,IAAA,WAAW,CAAC,IAAqB,EAAA;AAC/B,QAAA,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;AAC5B,YAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC;AAC3B,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;AAC5B,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;QAClE;IACF;IAEA,eAAe,GAAA;AACb,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE;YACvB,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,EAAE,GAAG,CAAC;AACvC,YAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC;AAC9B,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC;AAC/B,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;QACrE;IACF;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE;YACtB,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,EAAE,GAAG,CAAC;AACvC,YAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC;AAC9B,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC;AAC/B,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;QACrE;IACF;AAEQ,IAAA,SAAS,CAAC,OAAe,EAAA;AAC/B,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE,aAAa,EAAE;YACtC,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,WAAW,GAAG,OAAO;QACzD;IACF;IAEA,cAAc,GAAA;AACZ,QAAA,OAAO,IAAI,CAAC,YAAY,EAAE;IAC5B;AAEA,IAAA,YAAY,CAAC,IAAqB,EAAA;QAChC,OAAO,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,IAAI,CAAC,YAAY,EAAE;IACjE;AAEA,IAAA,eAAe,CAAC,IAAqB,EAAA;AACnC,QAAA,OAAO,OAAO,IAAI,KAAK,QAAQ;IACjC;uGAtIW,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,eAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,eAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC5BlC,m7DA4DA,EAAA,MAAA,EAAA,CAAA,ouHAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDvCY,kBAAkB,+KAAE,gBAAgB,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,OAAA,EAAA,WAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAOnC,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAVjC,SAAS;+BACE,eAAe,EAAA,UAAA,EACb,IAAI,EAAA,OAAA,EACP,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,EAAA,IAAA,EAGzC;AACJ,wBAAA,KAAK,EAAE,eAAe;AACvB,qBAAA,EAAA,QAAA,EAAA,m7DAAA,EAAA,MAAA,EAAA,CAAA,ouHAAA,CAAA,EAAA;;sBAcA,SAAS;uBAAC,eAAe;;;AExC5B;;AAEG;;;;"}

package/fesm2022/raintonic-formaui-components-password-input.mjs

@@ -1,8 +1,9 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, signal, computed, inject, viewChild, effect, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { Injectable, inject, ChangeDetectorRef, input, booleanAttribute, signal, computed, viewChild, effect, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgForm, FormGroupDirective, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Subject } from 'rxjs';
-import { DefaultErrorStateMatcher, FUI_FORM_FIELD_CONTROL } from '@raintonic/formaui/core';
+import { FuiIntlBase, DefaultErrorStateMatcher, FUI_FORM_FIELD_CONTROL } from '@raintonic/formaui/core';
 import { injectNgControl, updateErrorState, syncRequiredState, syncNgControlDisabled } from '@raintonic/formaui/cdk/form-field';
 import { FuiIconComponent } from '@raintonic/formaui/components/icon';
 
@@ -14,6 +15,20 @@ const DEFAULT_STRENGTH_CONFIG = {
     requireSpecial: false,
 };
 
+class FuiPasswordInputIntl extends FuiIntlBase {
+    showAriaLabel = 'Show password';
+    hideAriaLabel = 'Hide password';
+    strengthAriaLabel(level) {
+        return `Password strength: ${level}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiPasswordInputIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiPasswordInputIntl, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiPasswordInputIntl, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 /**
  * # FuiPasswordInputComponent
  *
@@ -50,6 +65,8 @@ const DEFAULT_STRENGTH_CONFIG = {
  * ```
  */
 class FuiPasswordInputComponent {
+    intl = inject(FuiPasswordInputIntl);
+    _cdr = inject(ChangeDetectorRef);
     // Static properties
     static nextId = 0;
     controlType = 'fui-password-input';
@@ -125,6 +142,7 @@ class FuiPasswordInputComponent {
                 this._ngControlRef.ngControl.valueAccessor = this;
             }
         });
+        this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => { this._cdr.markForCheck(); });
         // Effect to emit state changes
         effect(() => {
             // Track all reactive inputs and internal signals
@@ -274,7 +292,7 @@ class FuiPasswordInputComponent {
                 provide: FUI_FORM_FIELD_CONTROL,
                 useExisting: FuiPasswordInputComponent,
             },
-        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"fui-password-input__wrapper\">\r\n  <input\r\n    #inputElement\r\n    class=\"fui-password-input__input\"\r\n    [attr.type]=\"_inputType()\"\r\n    [attr.placeholder]=\"placeholder()\"\r\n    [attr.disabled]=\"disabled() ? '' : null\"\r\n    [attr.readonly]=\"readonly() ? '' : null\"\r\n    [attr.aria-invalid]=\"errorState()\"\r\n    [attr.aria-required]=\"required() ? 'true' : null\"\r\n    [attr.aria-describedby]=\"_ariaDescribedby\"\r\n    autocomplete=\"current-password\"\r\n    (input)=\"_onInput($event)\"\r\n    (focus)=\"_onFocus()\"\r\n    (blur)=\"_onBlur()\"\r\n  />\r\n  <button\r\n    type=\"button\"\r\n    class=\"fui-password-input__toggle\"\r\n    (click)=\"toggleVisibility()\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"_passwordVisible() ? 'Hide password' : 'Show password'\"\r\n    tabindex=\"-1\"\r\n  >\r\n    <fui-icon [name]=\"_passwordVisible() ? 'eye-slash' : 'eye'\" size=\"sm\"></fui-icon>\r\n  </button>\r\n</div>\r\n\r\n@if (showStrengthMeter() && _value()) {\r\n  <div class=\"fui-password-input__strength-meter\" aria-live=\"polite\">\r\n    <div\r\n      class=\"fui-password-input__strength-bar\"\r\n      role=\"progressbar\"\r\n      [attr.aria-valuenow]=\"_strengthPercent()\"\r\n      aria-valuemin=\"0\"\r\n      aria-valuemax=\"100\"\r\n      [attr.aria-label]=\"'Password strength: ' + _strength()\"\r\n    >\r\n      <div\r\n        class=\"fui-password-input__strength-fill\"\r\n        [style.width.%]=\"_strengthPercent()\"\r\n        [class.fui-password-input__strength-fill--weak]=\"_strength() === 'weak'\"\r\n        [class.fui-password-input__strength-fill--fair]=\"_strength() === 'fair'\"\r\n        [class.fui-password-input__strength-fill--good]=\"_strength() === 'good'\"\r\n        [class.fui-password-input__strength-fill--strong]=\"_strength() === 'strong'\"\r\n      ></div>\r\n    </div>\r\n    <span class=\"fui-password-input__strength-label\" aria-hidden=\"true\">{{ _strength() }}</span>\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-password-input{display:block;width:100%}.fui-password-input__wrapper{display:flex;flex-direction:row;align-items:center;width:100%;gap:var(--fui-gap-4)}.fui-password-input__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);line-height:1.5;color:var(--fui-text-primary);padding:0}.fui-password-input__input::placeholder{color:var(--fui-text-placeholder, var(--fui-text-disabled))}.fui-password-input__input:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-password-input__toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-password-input__toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:var(--fui-border-radius-sm);color:var(--fui-text-secondary);cursor:pointer;opacity:.7;transition:opacity,color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-password-input__toggle:hover:not(:disabled){opacity:1;color:var(--fui-text-primary)}.fui-password-input__toggle:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-password-input__toggle:disabled{opacity:.4;cursor:not-allowed}.fui-password-input__strength-meter{display:flex;flex-direction:column;gap:var(--fui-gap-4);padding-top:var(--fui-gap-8)}.fui-password-input__strength-bar{width:100%;height:4px;background-color:var(--fui-surface-05, var(--fui-secondary-20));border-radius:var(--fui-border-radius-pill);overflow:hidden}.fui-password-input__strength-fill{height:100%;border-radius:var(--fui-border-radius-pill);transition:width,background-color var(--fui-duration-moderate-01) var(--fui-ease-standard) 0ms}.fui-password-input__strength-fill--weak{background-color:var(--fui-state-error)}.fui-password-input__strength-fill--fair{background-color:var(--fui-state-warning)}.fui-password-input__strength-fill--good{background-color:var(--fui-state-info)}.fui-password-input__strength-fill--strong{background-color:var(--fui-state-success)}.fui-password-input__strength-label{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-01);font-weight:var(--fui-font-weight-regular);color:var(--fui-text-secondary);text-transform:capitalize}.fui-password-input--disabled{opacity:var(--fui-opacity-disabled);cursor:not-allowed}.fui-password-input--disabled .fui-password-input__input{cursor:not-allowed}.fui-password-input--readonly .fui-password-input__input{cursor:default}.fui-password-input--readonly .fui-password-input__toggle{display:none}.fui-password-input--error .fui-password-input__input{color:var(--fui-state-error)}@media(prefers-reduced-motion:reduce){.fui-password-input__strength-fill,.fui-password-input__toggle{transition: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 });
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"fui-password-input__wrapper\">\r\n  <input\r\n    #inputElement\r\n    class=\"fui-password-input__input\"\r\n    [attr.type]=\"_inputType()\"\r\n    [attr.placeholder]=\"placeholder()\"\r\n    [attr.disabled]=\"disabled() ? '' : null\"\r\n    [attr.readonly]=\"readonly() ? '' : null\"\r\n    [attr.aria-invalid]=\"errorState()\"\r\n    [attr.aria-required]=\"required() ? 'true' : null\"\r\n    [attr.aria-describedby]=\"_ariaDescribedby\"\r\n    autocomplete=\"current-password\"\r\n    (input)=\"_onInput($event)\"\r\n    (focus)=\"_onFocus()\"\r\n    (blur)=\"_onBlur()\"\r\n  />\r\n  <button\r\n    type=\"button\"\r\n    class=\"fui-password-input__toggle\"\r\n    (click)=\"toggleVisibility()\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"_passwordVisible() ? intl.hideAriaLabel : intl.showAriaLabel\"\r\n    tabindex=\"-1\"\r\n  >\r\n    <fui-icon [name]=\"_passwordVisible() ? 'eye-slash' : 'eye'\" size=\"sm\"></fui-icon>\r\n  </button>\r\n</div>\r\n\r\n@if (showStrengthMeter() && _value()) {\r\n  <div class=\"fui-password-input__strength-meter\" aria-live=\"polite\">\r\n    <div\r\n      class=\"fui-password-input__strength-bar\"\r\n      role=\"progressbar\"\r\n      [attr.aria-valuenow]=\"_strengthPercent()\"\r\n      aria-valuemin=\"0\"\r\n      aria-valuemax=\"100\"\r\n      [attr.aria-label]=\"intl.strengthAriaLabel(_strength())\"\r\n    >\r\n      <div\r\n        class=\"fui-password-input__strength-fill\"\r\n        [style.width.%]=\"_strengthPercent()\"\r\n        [class.fui-password-input__strength-fill--weak]=\"_strength() === 'weak'\"\r\n        [class.fui-password-input__strength-fill--fair]=\"_strength() === 'fair'\"\r\n        [class.fui-password-input__strength-fill--good]=\"_strength() === 'good'\"\r\n        [class.fui-password-input__strength-fill--strong]=\"_strength() === 'strong'\"\r\n      ></div>\r\n    </div>\r\n    <span class=\"fui-password-input__strength-label\" aria-hidden=\"true\">{{ _strength() }}</span>\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-password-input{display:block;width:100%}.fui-password-input__wrapper{display:flex;flex-direction:row;align-items:center;width:100%;gap:var(--fui-gap-4)}.fui-password-input__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);line-height:1.5;color:var(--fui-text-primary);padding:0}.fui-password-input__input::placeholder{color:var(--fui-text-placeholder, var(--fui-text-disabled))}.fui-password-input__input:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-password-input__toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-password-input__toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:var(--fui-border-radius-sm);color:var(--fui-text-secondary);cursor:pointer;opacity:.7;transition:opacity,color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-password-input__toggle:hover:not(:disabled){opacity:1;color:var(--fui-text-primary)}.fui-password-input__toggle:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-password-input__toggle:disabled{opacity:.4;cursor:not-allowed}.fui-password-input__strength-meter{display:flex;flex-direction:column;gap:var(--fui-gap-4);padding-top:var(--fui-gap-8)}.fui-password-input__strength-bar{width:100%;height:4px;background-color:var(--fui-surface-05, var(--fui-secondary-20));border-radius:var(--fui-border-radius-pill);overflow:hidden}.fui-password-input__strength-fill{height:100%;border-radius:var(--fui-border-radius-pill);transition:width,background-color var(--fui-duration-moderate-01) var(--fui-ease-standard) 0ms}.fui-password-input__strength-fill--weak{background-color:var(--fui-state-error)}.fui-password-input__strength-fill--fair{background-color:var(--fui-state-warning)}.fui-password-input__strength-fill--good{background-color:var(--fui-state-info)}.fui-password-input__strength-fill--strong{background-color:var(--fui-state-success)}.fui-password-input__strength-label{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-01);font-weight:var(--fui-font-weight-regular);color:var(--fui-text-secondary);text-transform:capitalize}.fui-password-input--disabled{opacity:var(--fui-opacity-disabled);cursor:not-allowed}.fui-password-input--disabled .fui-password-input__input{cursor:not-allowed}.fui-password-input--readonly .fui-password-input__input{cursor:default}.fui-password-input--readonly .fui-password-input__toggle{display:none}.fui-password-input--error .fui-password-input__input{color:var(--fui-state-error)}@media(prefers-reduced-motion:reduce){.fui-password-input__strength-fill,.fui-password-input__toggle{transition: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: FuiPasswordInputComponent, decorators: [{
             type: Component,
@@ -295,12 +313,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                             provide: FUI_FORM_FIELD_CONTROL,
                             useExisting: FuiPasswordInputComponent,
                         },
-                    ], template: "<div class=\"fui-password-input__wrapper\">\r\n  <input\r\n    #inputElement\r\n    class=\"fui-password-input__input\"\r\n    [attr.type]=\"_inputType()\"\r\n    [attr.placeholder]=\"placeholder()\"\r\n    [attr.disabled]=\"disabled() ? '' : null\"\r\n    [attr.readonly]=\"readonly() ? '' : null\"\r\n    [attr.aria-invalid]=\"errorState()\"\r\n    [attr.aria-required]=\"required() ? 'true' : null\"\r\n    [attr.aria-describedby]=\"_ariaDescribedby\"\r\n    autocomplete=\"current-password\"\r\n    (input)=\"_onInput($event)\"\r\n    (focus)=\"_onFocus()\"\r\n    (blur)=\"_onBlur()\"\r\n  />\r\n  <button\r\n    type=\"button\"\r\n    class=\"fui-password-input__toggle\"\r\n    (click)=\"toggleVisibility()\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"_passwordVisible() ? 'Hide password' : 'Show password'\"\r\n    tabindex=\"-1\"\r\n  >\r\n    <fui-icon [name]=\"_passwordVisible() ? 'eye-slash' : 'eye'\" size=\"sm\"></fui-icon>\r\n  </button>\r\n</div>\r\n\r\n@if (showStrengthMeter() && _value()) {\r\n  <div class=\"fui-password-input__strength-meter\" aria-live=\"polite\">\r\n    <div\r\n      class=\"fui-password-input__strength-bar\"\r\n      role=\"progressbar\"\r\n      [attr.aria-valuenow]=\"_strengthPercent()\"\r\n      aria-valuemin=\"0\"\r\n      aria-valuemax=\"100\"\r\n      [attr.aria-label]=\"'Password strength: ' + _strength()\"\r\n    >\r\n      <div\r\n        class=\"fui-password-input__strength-fill\"\r\n        [style.width.%]=\"_strengthPercent()\"\r\n        [class.fui-password-input__strength-fill--weak]=\"_strength() === 'weak'\"\r\n        [class.fui-password-input__strength-fill--fair]=\"_strength() === 'fair'\"\r\n        [class.fui-password-input__strength-fill--good]=\"_strength() === 'good'\"\r\n        [class.fui-password-input__strength-fill--strong]=\"_strength() === 'strong'\"\r\n      ></div>\r\n    </div>\r\n    <span class=\"fui-password-input__strength-label\" aria-hidden=\"true\">{{ _strength() }}</span>\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-password-input{display:block;width:100%}.fui-password-input__wrapper{display:flex;flex-direction:row;align-items:center;width:100%;gap:var(--fui-gap-4)}.fui-password-input__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);line-height:1.5;color:var(--fui-text-primary);padding:0}.fui-password-input__input::placeholder{color:var(--fui-text-placeholder, var(--fui-text-disabled))}.fui-password-input__input:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-password-input__toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-password-input__toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:var(--fui-border-radius-sm);color:var(--fui-text-secondary);cursor:pointer;opacity:.7;transition:opacity,color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-password-input__toggle:hover:not(:disabled){opacity:1;color:var(--fui-text-primary)}.fui-password-input__toggle:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-password-input__toggle:disabled{opacity:.4;cursor:not-allowed}.fui-password-input__strength-meter{display:flex;flex-direction:column;gap:var(--fui-gap-4);padding-top:var(--fui-gap-8)}.fui-password-input__strength-bar{width:100%;height:4px;background-color:var(--fui-surface-05, var(--fui-secondary-20));border-radius:var(--fui-border-radius-pill);overflow:hidden}.fui-password-input__strength-fill{height:100%;border-radius:var(--fui-border-radius-pill);transition:width,background-color var(--fui-duration-moderate-01) var(--fui-ease-standard) 0ms}.fui-password-input__strength-fill--weak{background-color:var(--fui-state-error)}.fui-password-input__strength-fill--fair{background-color:var(--fui-state-warning)}.fui-password-input__strength-fill--good{background-color:var(--fui-state-info)}.fui-password-input__strength-fill--strong{background-color:var(--fui-state-success)}.fui-password-input__strength-label{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-01);font-weight:var(--fui-font-weight-regular);color:var(--fui-text-secondary);text-transform:capitalize}.fui-password-input--disabled{opacity:var(--fui-opacity-disabled);cursor:not-allowed}.fui-password-input--disabled .fui-password-input__input{cursor:not-allowed}.fui-password-input--readonly .fui-password-input__input{cursor:default}.fui-password-input--readonly .fui-password-input__toggle{display:none}.fui-password-input--error .fui-password-input__input{color:var(--fui-state-error)}@media(prefers-reduced-motion:reduce){.fui-password-input__strength-fill,.fui-password-input__toggle{transition:none}}\n"] }]
+                    ], template: "<div class=\"fui-password-input__wrapper\">\r\n  <input\r\n    #inputElement\r\n    class=\"fui-password-input__input\"\r\n    [attr.type]=\"_inputType()\"\r\n    [attr.placeholder]=\"placeholder()\"\r\n    [attr.disabled]=\"disabled() ? '' : null\"\r\n    [attr.readonly]=\"readonly() ? '' : null\"\r\n    [attr.aria-invalid]=\"errorState()\"\r\n    [attr.aria-required]=\"required() ? 'true' : null\"\r\n    [attr.aria-describedby]=\"_ariaDescribedby\"\r\n    autocomplete=\"current-password\"\r\n    (input)=\"_onInput($event)\"\r\n    (focus)=\"_onFocus()\"\r\n    (blur)=\"_onBlur()\"\r\n  />\r\n  <button\r\n    type=\"button\"\r\n    class=\"fui-password-input__toggle\"\r\n    (click)=\"toggleVisibility()\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"_passwordVisible() ? intl.hideAriaLabel : intl.showAriaLabel\"\r\n    tabindex=\"-1\"\r\n  >\r\n    <fui-icon [name]=\"_passwordVisible() ? 'eye-slash' : 'eye'\" size=\"sm\"></fui-icon>\r\n  </button>\r\n</div>\r\n\r\n@if (showStrengthMeter() && _value()) {\r\n  <div class=\"fui-password-input__strength-meter\" aria-live=\"polite\">\r\n    <div\r\n      class=\"fui-password-input__strength-bar\"\r\n      role=\"progressbar\"\r\n      [attr.aria-valuenow]=\"_strengthPercent()\"\r\n      aria-valuemin=\"0\"\r\n      aria-valuemax=\"100\"\r\n      [attr.aria-label]=\"intl.strengthAriaLabel(_strength())\"\r\n    >\r\n      <div\r\n        class=\"fui-password-input__strength-fill\"\r\n        [style.width.%]=\"_strengthPercent()\"\r\n        [class.fui-password-input__strength-fill--weak]=\"_strength() === 'weak'\"\r\n        [class.fui-password-input__strength-fill--fair]=\"_strength() === 'fair'\"\r\n        [class.fui-password-input__strength-fill--good]=\"_strength() === 'good'\"\r\n        [class.fui-password-input__strength-fill--strong]=\"_strength() === 'strong'\"\r\n      ></div>\r\n    </div>\r\n    <span class=\"fui-password-input__strength-label\" aria-hidden=\"true\">{{ _strength() }}</span>\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-password-input{display:block;width:100%}.fui-password-input__wrapper{display:flex;flex-direction:row;align-items:center;width:100%;gap:var(--fui-gap-4)}.fui-password-input__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);line-height:1.5;color:var(--fui-text-primary);padding:0}.fui-password-input__input::placeholder{color:var(--fui-text-placeholder, var(--fui-text-disabled))}.fui-password-input__input:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-password-input__toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-password-input__toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:var(--fui-border-radius-sm);color:var(--fui-text-secondary);cursor:pointer;opacity:.7;transition:opacity,color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-password-input__toggle:hover:not(:disabled){opacity:1;color:var(--fui-text-primary)}.fui-password-input__toggle:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-password-input__toggle:disabled{opacity:.4;cursor:not-allowed}.fui-password-input__strength-meter{display:flex;flex-direction:column;gap:var(--fui-gap-4);padding-top:var(--fui-gap-8)}.fui-password-input__strength-bar{width:100%;height:4px;background-color:var(--fui-surface-05, var(--fui-secondary-20));border-radius:var(--fui-border-radius-pill);overflow:hidden}.fui-password-input__strength-fill{height:100%;border-radius:var(--fui-border-radius-pill);transition:width,background-color var(--fui-duration-moderate-01) var(--fui-ease-standard) 0ms}.fui-password-input__strength-fill--weak{background-color:var(--fui-state-error)}.fui-password-input__strength-fill--fair{background-color:var(--fui-state-warning)}.fui-password-input__strength-fill--good{background-color:var(--fui-state-info)}.fui-password-input__strength-fill--strong{background-color:var(--fui-state-success)}.fui-password-input__strength-label{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-01);font-weight:var(--fui-font-weight-regular);color:var(--fui-text-secondary);text-transform:capitalize}.fui-password-input--disabled{opacity:var(--fui-opacity-disabled);cursor:not-allowed}.fui-password-input--disabled .fui-password-input__input{cursor:not-allowed}.fui-password-input--readonly .fui-password-input__input{cursor:default}.fui-password-input--readonly .fui-password-input__toggle{display:none}.fui-password-input--error .fui-password-input__input{color:var(--fui-state-error)}@media(prefers-reduced-motion:reduce){.fui-password-input__strength-fill,.fui-password-input__toggle{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { placeholder: [{ 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 }] }], showStrengthMeter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showStrengthMeter", required: false }] }], strengthConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "strengthConfig", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], inputElement: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DEFAULT_STRENGTH_CONFIG, FuiPasswordInputComponent };
+export { DEFAULT_STRENGTH_CONFIG, FuiPasswordInputComponent, FuiPasswordInputIntl };
 //# sourceMappingURL=raintonic-formaui-components-password-input.mjs.map

package/fesm2022/raintonic-formaui-components-password-input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"raintonic-formaui-components-password-input.mjs","sources":["../../../lib/components/password-input/password-input.types.ts","../../../lib/components/password-input/password-input.component.ts","../../../lib/components/password-input/password-input.component.html","../../../lib/components/password-input/raintonic-formaui-components-password-input.ts"],"sourcesContent":["export type PasswordStrength = 'weak' | 'fair' | 'good' | 'strong';\r\n\r\nexport interface PasswordStrengthConfig {\r\n  minLength?: number;\r\n  requireUppercase?: boolean;\r\n  requireLowercase?: boolean;\r\n  requireNumbers?: boolean;\r\n  requireSpecial?: boolean;\r\n}\r\n\r\nexport const DEFAULT_STRENGTH_CONFIG: PasswordStrengthConfig = {\r\n  minLength: 8,\r\n  requireUppercase: true,\r\n  requireLowercase: true,\r\n  requireNumbers: true,\r\n  requireSpecial: false,\r\n};\r\n","import {\r\n  Component,\r\n  ChangeDetectionStrategy,\r\n  ViewEncapsulation,\r\n  input,\r\n  computed,\r\n  signal,\r\n  viewChild,\r\n  ElementRef,\r\n  Signal,\r\n  WritableSignal,\r\n  OnDestroy,\r\n  DoCheck,\r\n  inject,\r\n  effect,\r\n  booleanAttribute,\r\n} from '@angular/core';\r\n\r\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl, FormGroupDirective, NgForm } from '@angular/forms';\r\nimport { Subject } from 'rxjs';\r\nimport { FUI_FORM_FIELD_CONTROL, FuiFormFieldControl } from '@raintonic/formaui/core';\r\nimport { DefaultErrorStateMatcher, ErrorStateMatcher } from '@raintonic/formaui/core';\r\nimport { injectNgControl, updateErrorState, syncRequiredState, syncNgControlDisabled } from '@raintonic/formaui/cdk/form-field';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { DEFAULT_STRENGTH_CONFIG, PasswordStrength, PasswordStrengthConfig } from './password-input.types';\r\n\r\n/**\r\n * # FuiPasswordInputComponent\r\n *\r\n * A password input component with visibility toggle and optional strength meter.\r\n * Integrates with fui-form-field and Angular Forms.\r\n *\r\n * ## Features\r\n * - Password visibility toggle\r\n * - Optional password strength meter\r\n * - Full Reactive Forms integration (ControlValueAccessor)\r\n * - FuiFormFieldControl integration for fui-form-field\r\n * - Error state handling\r\n * - Accessibility (ARIA)\r\n *\r\n * ## Usage\r\n *\r\n * ### Basic Password Input\r\n * ```html\r\n * <fui-form-field>\r\n *   <fui-label>Password</fui-label>\r\n *   <fui-password-input formControlName=\"password\"></fui-password-input>\r\n * </fui-form-field>\r\n * ```\r\n *\r\n * ### With Strength Meter\r\n * ```html\r\n * <fui-form-field>\r\n *   <fui-label>Password</fui-label>\r\n *   <fui-password-input\r\n *     formControlName=\"password\"\r\n *     [showStrengthMeter]=\"true\"\r\n *   ></fui-password-input>\r\n * </fui-form-field>\r\n * ```\r\n */\r\n@Component({\r\n  selector: 'fui-password-input',\r\n  standalone: true,\r\n  imports: [FuiIconComponent],\r\n  templateUrl: './password-input.component.html',\r\n  styleUrls: ['./password-input.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None,\r\n  host: {\r\n    class: 'fui-password-input',\r\n    '[class.fui-password-input--focused]': 'focused()',\r\n    '[class.fui-password-input--disabled]': 'disabled()',\r\n    '[class.fui-password-input--readonly]': 'readonly()',\r\n    '[class.fui-password-input--error]': 'errorState()',\r\n    '[attr.id]': 'id',\r\n  },\r\n  providers: [\r\n    {\r\n      provide: NG_VALUE_ACCESSOR,\r\n      useExisting: FuiPasswordInputComponent,\r\n      multi: true,\r\n    },\r\n    {\r\n      provide: FUI_FORM_FIELD_CONTROL,\r\n      useExisting: FuiPasswordInputComponent,\r\n    },\r\n  ],\r\n})\r\nexport class FuiPasswordInputComponent\r\n  implements ControlValueAccessor, FuiFormFieldControl<string>, DoCheck, OnDestroy\r\n{\r\n  // Static properties\r\n  static nextId = 0;\r\n  readonly controlType = 'fui-password-input';\r\n\r\n  // Inputs\r\n  readonly placeholder = input('');\r\n  readonly disabledInput = input<boolean, unknown>(false, {\r\n    alias: 'disabled',\r\n    transform: booleanAttribute,\r\n  });\r\n  readonly readonly = input<boolean, unknown>(false, {\r\n    transform: booleanAttribute,\r\n  });\r\n  readonly showStrengthMeter = input<boolean, unknown>(false, {\r\n    transform: booleanAttribute,\r\n  });\r\n  readonly strengthConfig = input(DEFAULT_STRENGTH_CONFIG);\r\n  readonly errorStateMatcher = input<ErrorStateMatcher | null>(null);\r\n\r\n  // Internal state\r\n  readonly _passwordVisible: WritableSignal<boolean> = signal(false);\r\n  readonly _value: WritableSignal<string> = signal('');\r\n  private readonly _focused: WritableSignal<boolean> = signal(false);\r\n  readonly focused: Signal<boolean> = this._focused.asReadonly();\r\n  private readonly _disabled: WritableSignal<boolean> = signal(false);\r\n  private readonly _ngControlDisabled: WritableSignal<boolean> = signal(false);\r\n  private readonly _errorState: WritableSignal<boolean> = signal(false);\r\n  readonly errorState: Signal<boolean> = this._errorState.asReadonly();\r\n  private readonly _required: WritableSignal<boolean> = signal(false);\r\n  readonly required: Signal<boolean> = this._required.asReadonly();\r\n\r\n  // Computed\r\n  readonly disabled: Signal<boolean> = computed(\r\n    () => this._disabled() || this.disabledInput() || this._ngControlDisabled(),\r\n  );\r\n  readonly _inputType: Signal<string> = computed(() => (this._passwordVisible() ? 'text' : 'password'));\r\n  readonly value: Signal<string> = this._value.asReadonly();\r\n  readonly empty: Signal<boolean> = computed(() => {\r\n    const v = this._value();\r\n    return !v || v.length === 0;\r\n  });\r\n\r\n  readonly _strength: Signal<PasswordStrength> = computed(() => {\r\n    return this._calculateStrength(this._value());\r\n  });\r\n\r\n  readonly _strengthPercent: Signal<number> = computed(() => {\r\n    switch (this._strength()) {\r\n      case 'weak':\r\n        return 25;\r\n      case 'fair':\r\n        return 50;\r\n      case 'good':\r\n        return 75;\r\n      case 'strong':\r\n        return 100;\r\n      default:\r\n        return 0;\r\n    }\r\n  });\r\n\r\n  // State changes subject for form field compatibility\r\n  readonly stateChanges = new Subject<void>();\r\n  private _uid = `fui-password-input-${FuiPasswordInputComponent.nextId++}`;\r\n  readonly id = this._uid;\r\n  _ariaDescribedby: string | null = null;\r\n\r\n  // Form control references\r\n  private _parentForm = inject(NgForm, { optional: true });\r\n  private _parentFormGroup = inject(FormGroupDirective, { optional: true });\r\n  private _defaultErrorStateMatcher = inject(DefaultErrorStateMatcher);\r\n  private readonly _ngControlRef = injectNgControl();\r\n  get ngControl(): NgControl | null {\r\n    return this._ngControlRef.ngControl;\r\n  }\r\n\r\n  // ViewChild for input element\r\n  readonly inputElement: Signal<ElementRef<HTMLInputElement> | undefined> =\r\n    viewChild<ElementRef<HTMLInputElement>>('inputElement');\r\n\r\n  // ControlValueAccessor callbacks\r\n  private _onChange: (value: string) => void = () => {\r\n    /* noop */\r\n  };\r\n  private _onTouched: () => void = () => {\r\n    /* noop */\r\n  };\r\n\r\n  constructor() {\r\n    void Promise.resolve().then(() => {\r\n      if (this._ngControlRef.ngControl) {\r\n        this._ngControlRef.ngControl.valueAccessor = this;\r\n      }\r\n    });\r\n\r\n    // Effect to emit state changes\r\n    effect(() => {\r\n      // Track all reactive inputs and internal signals\r\n      this.placeholder();\r\n      this.disabledInput();\r\n      this.readonly();\r\n      this.showStrengthMeter();\r\n      this.strengthConfig();\r\n      this.errorStateMatcher();\r\n      this._passwordVisible();\r\n      this._value();\r\n      this._focused();\r\n      this._disabled();\r\n      this._ngControlDisabled();\r\n      this._required();\r\n      this._errorState();\r\n\r\n      // Emit state change\r\n      this.stateChanges.next();\r\n    });\r\n  }\r\n\r\n  ngDoCheck(): void {\r\n    if (this.ngControl) {\r\n      updateErrorState(\r\n        this.ngControl,\r\n        this._errorState,\r\n        this.errorStateMatcher(),\r\n        this._defaultErrorStateMatcher,\r\n        this._parentForm,\r\n        this._parentFormGroup,\r\n        this.stateChanges,\r\n      );\r\n      syncRequiredState(this.ngControl, this._required, this.stateChanges);\r\n      syncNgControlDisabled(this.ngControl, this._ngControlDisabled, this.stateChanges);\r\n    }\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this.stateChanges.complete();\r\n  }\r\n\r\n  // ControlValueAccessor implementation\r\n  writeValue(value: string | null): void {\r\n    const v = value ?? '';\r\n    this._value.set(v);\r\n    // Sync the DOM element value if available\r\n    const el = this.inputElement();\r\n    if (el) {\r\n      el.nativeElement.value = v;\r\n    }\r\n    this.stateChanges.next();\r\n  }\r\n\r\n  registerOnChange(fn: (value: string) => void): void {\r\n    this._onChange = fn;\r\n  }\r\n\r\n  registerOnTouched(fn: () => void): void {\r\n    this._onTouched = fn;\r\n  }\r\n\r\n  setDisabledState(isDisabled: boolean): void {\r\n    this._disabled.set(isDisabled);\r\n    this.stateChanges.next();\r\n  }\r\n\r\n  onContainerClick(_event: MouseEvent): void {\r\n    if (!this._focused()) {\r\n      this.inputElement()?.nativeElement.focus();\r\n    }\r\n  }\r\n\r\n  setDescribedByIds(ids: string[]): void {\r\n    this._ariaDescribedby = ids.length ? ids.join(' ') : null;\r\n  }\r\n\r\n  // Event handlers\r\n  _onInput(event: Event): void {\r\n    const target = event.target as HTMLInputElement;\r\n    const newValue = target.value;\r\n    if (newValue !== this._value()) {\r\n      this._value.set(newValue);\r\n      this._onChange(newValue);\r\n      this.stateChanges.next();\r\n    }\r\n  }\r\n\r\n  _onFocus(): void {\r\n    if (!this._focused()) {\r\n      this._focused.set(true);\r\n      this.stateChanges.next();\r\n    }\r\n  }\r\n\r\n  _onBlur(): void {\r\n    if (this._focused()) {\r\n      this._focused.set(false);\r\n      this._onTouched();\r\n      this.stateChanges.next();\r\n    }\r\n  }\r\n\r\n  toggleVisibility(): void {\r\n    this._passwordVisible.update((v) => !v);\r\n  }\r\n\r\n  // Public API\r\n  focus(): void {\r\n    this.inputElement()?.nativeElement.focus();\r\n  }\r\n\r\n  blur(): void {\r\n    this.inputElement()?.nativeElement.blur();\r\n  }\r\n\r\n  // Strength calculation\r\n  _calculateStrength(password: string): PasswordStrength {\r\n    if (!password || password.length === 0) {\r\n      return 'weak';\r\n    }\r\n\r\n    const config = this.strengthConfig();\r\n    let score = 0;\r\n    const maxScore = 5;\r\n\r\n    // Length check\r\n    const minLen = config.minLength ?? 8;\r\n    if (password.length >= minLen) {\r\n      score++;\r\n    }\r\n    // Bonus for longer passwords\r\n    if (password.length >= minLen + 4) {\r\n      score++;\r\n    }\r\n\r\n    // Uppercase check\r\n    if (/[A-Z]/.test(password)) {\r\n      score++;\r\n    }\r\n\r\n    // Lowercase check\r\n    if (/[a-z]/.test(password)) {\r\n      score++;\r\n    }\r\n\r\n    // Numbers check\r\n    if (/[0-9]/.test(password)) {\r\n      score++;\r\n    }\r\n\r\n    // Special characters check\r\n    if (/[^A-Za-z0-9]/.test(password)) {\r\n      score++;\r\n    }\r\n\r\n    // Normalize to strength levels\r\n    const ratio = score / maxScore;\r\n    if (ratio <= 0.3) {\r\n      return 'weak';\r\n    }\r\n    if (ratio <= 0.5) {\r\n      return 'fair';\r\n    }\r\n    if (ratio <= 0.8) {\r\n      return 'good';\r\n    }\r\n    return 'strong';\r\n  }\r\n}\r\n","<div class=\"fui-password-input__wrapper\">\r\n  <input\r\n    #inputElement\r\n    class=\"fui-password-input__input\"\r\n    [attr.type]=\"_inputType()\"\r\n    [attr.placeholder]=\"placeholder()\"\r\n    [attr.disabled]=\"disabled() ? '' : null\"\r\n    [attr.readonly]=\"readonly() ? '' : null\"\r\n    [attr.aria-invalid]=\"errorState()\"\r\n    [attr.aria-required]=\"required() ? 'true' : null\"\r\n    [attr.aria-describedby]=\"_ariaDescribedby\"\r\n    autocomplete=\"current-password\"\r\n    (input)=\"_onInput($event)\"\r\n    (focus)=\"_onFocus()\"\r\n    (blur)=\"_onBlur()\"\r\n  />\r\n  <button\r\n    type=\"button\"\r\n    class=\"fui-password-input__toggle\"\r\n    (click)=\"toggleVisibility()\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"_passwordVisible() ? 'Hide password' : 'Show password'\"\r\n    tabindex=\"-1\"\r\n  >\r\n    <fui-icon [name]=\"_passwordVisible() ? 'eye-slash' : 'eye'\" size=\"sm\"></fui-icon>\r\n  </button>\r\n</div>\r\n\r\n@if (showStrengthMeter() && _value()) {\r\n  <div class=\"fui-password-input__strength-meter\" aria-live=\"polite\">\r\n    <div\r\n      class=\"fui-password-input__strength-bar\"\r\n      role=\"progressbar\"\r\n      [attr.aria-valuenow]=\"_strengthPercent()\"\r\n      aria-valuemin=\"0\"\r\n      aria-valuemax=\"100\"\r\n      [attr.aria-label]=\"'Password strength: ' + _strength()\"\r\n    >\r\n      <div\r\n        class=\"fui-password-input__strength-fill\"\r\n        [style.width.%]=\"_strengthPercent()\"\r\n        [class.fui-password-input__strength-fill--weak]=\"_strength() === 'weak'\"\r\n        [class.fui-password-input__strength-fill--fair]=\"_strength() === 'fair'\"\r\n        [class.fui-password-input__strength-fill--good]=\"_strength() === 'good'\"\r\n        [class.fui-password-input__strength-fill--strong]=\"_strength() === 'strong'\"\r\n      ></div>\r\n    </div>\r\n    <span class=\"fui-password-input__strength-label\" aria-hidden=\"true\">{{ _strength() }}</span>\r\n  </div>\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-password-input.mjs","sources":["../../../lib/components/password-input/password-input.types.ts","../../../lib/components/password-input/password-input.intl.ts","../../../lib/components/password-input/password-input.component.ts","../../../lib/components/password-input/password-input.component.html","../../../lib/components/password-input/raintonic-formaui-components-password-input.ts"],"sourcesContent":["export type PasswordStrength = 'weak' | 'fair' | 'good' | 'strong';\r\n\r\nexport interface PasswordStrengthConfig {\r\n  minLength?: number;\r\n  requireUppercase?: boolean;\r\n  requireLowercase?: boolean;\r\n  requireNumbers?: boolean;\r\n  requireSpecial?: boolean;\r\n}\r\n\r\nexport const DEFAULT_STRENGTH_CONFIG: PasswordStrengthConfig = {\r\n  minLength: 8,\r\n  requireUppercase: true,\r\n  requireLowercase: true,\r\n  requireNumbers: true,\r\n  requireSpecial: false,\r\n};\r\n","import { Injectable } from '@angular/core';\r\nimport { FuiIntlBase } from '@raintonic/formaui/core';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class FuiPasswordInputIntl extends FuiIntlBase {\r\n  showAriaLabel = 'Show password';\r\n  hideAriaLabel = 'Hide password';\r\n  strengthAriaLabel(level: string): string {\r\n    return `Password strength: ${level}`;\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  ChangeDetectionStrategy,\r\n  ChangeDetectorRef,\r\n  ViewEncapsulation,\r\n  input,\r\n  computed,\r\n  signal,\r\n  viewChild,\r\n  ElementRef,\r\n  Signal,\r\n  WritableSignal,\r\n  OnDestroy,\r\n  DoCheck,\r\n  inject,\r\n  effect,\r\n  booleanAttribute,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\n\r\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl, FormGroupDirective, NgForm } from '@angular/forms';\r\nimport { Subject } from 'rxjs';\r\nimport { FUI_FORM_FIELD_CONTROL, FuiFormFieldControl } from '@raintonic/formaui/core';\r\nimport { DefaultErrorStateMatcher, ErrorStateMatcher } from '@raintonic/formaui/core';\r\nimport { injectNgControl, updateErrorState, syncRequiredState, syncNgControlDisabled } from '@raintonic/formaui/cdk/form-field';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { DEFAULT_STRENGTH_CONFIG, PasswordStrength, PasswordStrengthConfig } from './password-input.types';\r\nimport { FuiPasswordInputIntl } from './password-input.intl';\r\n\r\n/**\r\n * # FuiPasswordInputComponent\r\n *\r\n * A password input component with visibility toggle and optional strength meter.\r\n * Integrates with fui-form-field and Angular Forms.\r\n *\r\n * ## Features\r\n * - Password visibility toggle\r\n * - Optional password strength meter\r\n * - Full Reactive Forms integration (ControlValueAccessor)\r\n * - FuiFormFieldControl integration for fui-form-field\r\n * - Error state handling\r\n * - Accessibility (ARIA)\r\n *\r\n * ## Usage\r\n *\r\n * ### Basic Password Input\r\n * ```html\r\n * <fui-form-field>\r\n *   <fui-label>Password</fui-label>\r\n *   <fui-password-input formControlName=\"password\"></fui-password-input>\r\n * </fui-form-field>\r\n * ```\r\n *\r\n * ### With Strength Meter\r\n * ```html\r\n * <fui-form-field>\r\n *   <fui-label>Password</fui-label>\r\n *   <fui-password-input\r\n *     formControlName=\"password\"\r\n *     [showStrengthMeter]=\"true\"\r\n *   ></fui-password-input>\r\n * </fui-form-field>\r\n * ```\r\n */\r\n@Component({\r\n  selector: 'fui-password-input',\r\n  standalone: true,\r\n  imports: [FuiIconComponent],\r\n  templateUrl: './password-input.component.html',\r\n  styleUrls: ['./password-input.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None,\r\n  host: {\r\n    class: 'fui-password-input',\r\n    '[class.fui-password-input--focused]': 'focused()',\r\n    '[class.fui-password-input--disabled]': 'disabled()',\r\n    '[class.fui-password-input--readonly]': 'readonly()',\r\n    '[class.fui-password-input--error]': 'errorState()',\r\n    '[attr.id]': 'id',\r\n  },\r\n  providers: [\r\n    {\r\n      provide: NG_VALUE_ACCESSOR,\r\n      useExisting: FuiPasswordInputComponent,\r\n      multi: true,\r\n    },\r\n    {\r\n      provide: FUI_FORM_FIELD_CONTROL,\r\n      useExisting: FuiPasswordInputComponent,\r\n    },\r\n  ],\r\n})\r\nexport class FuiPasswordInputComponent\r\n  implements ControlValueAccessor, FuiFormFieldControl<string>, DoCheck, OnDestroy\r\n{\r\n  readonly intl = inject(FuiPasswordInputIntl);\r\n  private readonly _cdr = inject(ChangeDetectorRef);\r\n\r\n  // Static properties\r\n  static nextId = 0;\r\n  readonly controlType = 'fui-password-input';\r\n\r\n  // Inputs\r\n  readonly placeholder = input('');\r\n  readonly disabledInput = input<boolean, unknown>(false, {\r\n    alias: 'disabled',\r\n    transform: booleanAttribute,\r\n  });\r\n  readonly readonly = input<boolean, unknown>(false, {\r\n    transform: booleanAttribute,\r\n  });\r\n  readonly showStrengthMeter = input<boolean, unknown>(false, {\r\n    transform: booleanAttribute,\r\n  });\r\n  readonly strengthConfig = input(DEFAULT_STRENGTH_CONFIG);\r\n  readonly errorStateMatcher = input<ErrorStateMatcher | null>(null);\r\n\r\n  // Internal state\r\n  readonly _passwordVisible: WritableSignal<boolean> = signal(false);\r\n  readonly _value: WritableSignal<string> = signal('');\r\n  private readonly _focused: WritableSignal<boolean> = signal(false);\r\n  readonly focused: Signal<boolean> = this._focused.asReadonly();\r\n  private readonly _disabled: WritableSignal<boolean> = signal(false);\r\n  private readonly _ngControlDisabled: WritableSignal<boolean> = signal(false);\r\n  private readonly _errorState: WritableSignal<boolean> = signal(false);\r\n  readonly errorState: Signal<boolean> = this._errorState.asReadonly();\r\n  private readonly _required: WritableSignal<boolean> = signal(false);\r\n  readonly required: Signal<boolean> = this._required.asReadonly();\r\n\r\n  // Computed\r\n  readonly disabled: Signal<boolean> = computed(\r\n    () => this._disabled() || this.disabledInput() || this._ngControlDisabled(),\r\n  );\r\n  readonly _inputType: Signal<string> = computed(() => (this._passwordVisible() ? 'text' : 'password'));\r\n  readonly value: Signal<string> = this._value.asReadonly();\r\n  readonly empty: Signal<boolean> = computed(() => {\r\n    const v = this._value();\r\n    return !v || v.length === 0;\r\n  });\r\n\r\n  readonly _strength: Signal<PasswordStrength> = computed(() => {\r\n    return this._calculateStrength(this._value());\r\n  });\r\n\r\n  readonly _strengthPercent: Signal<number> = computed(() => {\r\n    switch (this._strength()) {\r\n      case 'weak':\r\n        return 25;\r\n      case 'fair':\r\n        return 50;\r\n      case 'good':\r\n        return 75;\r\n      case 'strong':\r\n        return 100;\r\n      default:\r\n        return 0;\r\n    }\r\n  });\r\n\r\n  // State changes subject for form field compatibility\r\n  readonly stateChanges = new Subject<void>();\r\n  private _uid = `fui-password-input-${FuiPasswordInputComponent.nextId++}`;\r\n  readonly id = this._uid;\r\n  _ariaDescribedby: string | null = null;\r\n\r\n  // Form control references\r\n  private _parentForm = inject(NgForm, { optional: true });\r\n  private _parentFormGroup = inject(FormGroupDirective, { optional: true });\r\n  private _defaultErrorStateMatcher = inject(DefaultErrorStateMatcher);\r\n  private readonly _ngControlRef = injectNgControl();\r\n  get ngControl(): NgControl | null {\r\n    return this._ngControlRef.ngControl;\r\n  }\r\n\r\n  // ViewChild for input element\r\n  readonly inputElement: Signal<ElementRef<HTMLInputElement> | undefined> =\r\n    viewChild<ElementRef<HTMLInputElement>>('inputElement');\r\n\r\n  // ControlValueAccessor callbacks\r\n  private _onChange: (value: string) => void = () => {\r\n    /* noop */\r\n  };\r\n  private _onTouched: () => void = () => {\r\n    /* noop */\r\n  };\r\n\r\n  constructor() {\r\n    void Promise.resolve().then(() => {\r\n      if (this._ngControlRef.ngControl) {\r\n        this._ngControlRef.ngControl.valueAccessor = this;\r\n      }\r\n    });\r\n\r\n    this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => { this._cdr.markForCheck(); });\r\n\r\n    // Effect to emit state changes\r\n    effect(() => {\r\n      // Track all reactive inputs and internal signals\r\n      this.placeholder();\r\n      this.disabledInput();\r\n      this.readonly();\r\n      this.showStrengthMeter();\r\n      this.strengthConfig();\r\n      this.errorStateMatcher();\r\n      this._passwordVisible();\r\n      this._value();\r\n      this._focused();\r\n      this._disabled();\r\n      this._ngControlDisabled();\r\n      this._required();\r\n      this._errorState();\r\n\r\n      // Emit state change\r\n      this.stateChanges.next();\r\n    });\r\n  }\r\n\r\n  ngDoCheck(): void {\r\n    if (this.ngControl) {\r\n      updateErrorState(\r\n        this.ngControl,\r\n        this._errorState,\r\n        this.errorStateMatcher(),\r\n        this._defaultErrorStateMatcher,\r\n        this._parentForm,\r\n        this._parentFormGroup,\r\n        this.stateChanges,\r\n      );\r\n      syncRequiredState(this.ngControl, this._required, this.stateChanges);\r\n      syncNgControlDisabled(this.ngControl, this._ngControlDisabled, this.stateChanges);\r\n    }\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this.stateChanges.complete();\r\n  }\r\n\r\n  // ControlValueAccessor implementation\r\n  writeValue(value: string | null): void {\r\n    const v = value ?? '';\r\n    this._value.set(v);\r\n    // Sync the DOM element value if available\r\n    const el = this.inputElement();\r\n    if (el) {\r\n      el.nativeElement.value = v;\r\n    }\r\n    this.stateChanges.next();\r\n  }\r\n\r\n  registerOnChange(fn: (value: string) => void): void {\r\n    this._onChange = fn;\r\n  }\r\n\r\n  registerOnTouched(fn: () => void): void {\r\n    this._onTouched = fn;\r\n  }\r\n\r\n  setDisabledState(isDisabled: boolean): void {\r\n    this._disabled.set(isDisabled);\r\n    this.stateChanges.next();\r\n  }\r\n\r\n  onContainerClick(_event: MouseEvent): void {\r\n    if (!this._focused()) {\r\n      this.inputElement()?.nativeElement.focus();\r\n    }\r\n  }\r\n\r\n  setDescribedByIds(ids: string[]): void {\r\n    this._ariaDescribedby = ids.length ? ids.join(' ') : null;\r\n  }\r\n\r\n  // Event handlers\r\n  _onInput(event: Event): void {\r\n    const target = event.target as HTMLInputElement;\r\n    const newValue = target.value;\r\n    if (newValue !== this._value()) {\r\n      this._value.set(newValue);\r\n      this._onChange(newValue);\r\n      this.stateChanges.next();\r\n    }\r\n  }\r\n\r\n  _onFocus(): void {\r\n    if (!this._focused()) {\r\n      this._focused.set(true);\r\n      this.stateChanges.next();\r\n    }\r\n  }\r\n\r\n  _onBlur(): void {\r\n    if (this._focused()) {\r\n      this._focused.set(false);\r\n      this._onTouched();\r\n      this.stateChanges.next();\r\n    }\r\n  }\r\n\r\n  toggleVisibility(): void {\r\n    this._passwordVisible.update((v) => !v);\r\n  }\r\n\r\n  // Public API\r\n  focus(): void {\r\n    this.inputElement()?.nativeElement.focus();\r\n  }\r\n\r\n  blur(): void {\r\n    this.inputElement()?.nativeElement.blur();\r\n  }\r\n\r\n  // Strength calculation\r\n  _calculateStrength(password: string): PasswordStrength {\r\n    if (!password || password.length === 0) {\r\n      return 'weak';\r\n    }\r\n\r\n    const config = this.strengthConfig();\r\n    let score = 0;\r\n    const maxScore = 5;\r\n\r\n    // Length check\r\n    const minLen = config.minLength ?? 8;\r\n    if (password.length >= minLen) {\r\n      score++;\r\n    }\r\n    // Bonus for longer passwords\r\n    if (password.length >= minLen + 4) {\r\n      score++;\r\n    }\r\n\r\n    // Uppercase check\r\n    if (/[A-Z]/.test(password)) {\r\n      score++;\r\n    }\r\n\r\n    // Lowercase check\r\n    if (/[a-z]/.test(password)) {\r\n      score++;\r\n    }\r\n\r\n    // Numbers check\r\n    if (/[0-9]/.test(password)) {\r\n      score++;\r\n    }\r\n\r\n    // Special characters check\r\n    if (/[^A-Za-z0-9]/.test(password)) {\r\n      score++;\r\n    }\r\n\r\n    // Normalize to strength levels\r\n    const ratio = score / maxScore;\r\n    if (ratio <= 0.3) {\r\n      return 'weak';\r\n    }\r\n    if (ratio <= 0.5) {\r\n      return 'fair';\r\n    }\r\n    if (ratio <= 0.8) {\r\n      return 'good';\r\n    }\r\n    return 'strong';\r\n  }\r\n}\r\n","<div class=\"fui-password-input__wrapper\">\r\n  <input\r\n    #inputElement\r\n    class=\"fui-password-input__input\"\r\n    [attr.type]=\"_inputType()\"\r\n    [attr.placeholder]=\"placeholder()\"\r\n    [attr.disabled]=\"disabled() ? '' : null\"\r\n    [attr.readonly]=\"readonly() ? '' : null\"\r\n    [attr.aria-invalid]=\"errorState()\"\r\n    [attr.aria-required]=\"required() ? 'true' : null\"\r\n    [attr.aria-describedby]=\"_ariaDescribedby\"\r\n    autocomplete=\"current-password\"\r\n    (input)=\"_onInput($event)\"\r\n    (focus)=\"_onFocus()\"\r\n    (blur)=\"_onBlur()\"\r\n  />\r\n  <button\r\n    type=\"button\"\r\n    class=\"fui-password-input__toggle\"\r\n    (click)=\"toggleVisibility()\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"_passwordVisible() ? intl.hideAriaLabel : intl.showAriaLabel\"\r\n    tabindex=\"-1\"\r\n  >\r\n    <fui-icon [name]=\"_passwordVisible() ? 'eye-slash' : 'eye'\" size=\"sm\"></fui-icon>\r\n  </button>\r\n</div>\r\n\r\n@if (showStrengthMeter() && _value()) {\r\n  <div class=\"fui-password-input__strength-meter\" aria-live=\"polite\">\r\n    <div\r\n      class=\"fui-password-input__strength-bar\"\r\n      role=\"progressbar\"\r\n      [attr.aria-valuenow]=\"_strengthPercent()\"\r\n      aria-valuemin=\"0\"\r\n      aria-valuemax=\"100\"\r\n      [attr.aria-label]=\"intl.strengthAriaLabel(_strength())\"\r\n    >\r\n      <div\r\n        class=\"fui-password-input__strength-fill\"\r\n        [style.width.%]=\"_strengthPercent()\"\r\n        [class.fui-password-input__strength-fill--weak]=\"_strength() === 'weak'\"\r\n        [class.fui-password-input__strength-fill--fair]=\"_strength() === 'fair'\"\r\n        [class.fui-password-input__strength-fill--good]=\"_strength() === 'good'\"\r\n        [class.fui-password-input__strength-fill--strong]=\"_strength() === 'strong'\"\r\n      ></div>\r\n    </div>\r\n    <span class=\"fui-password-input__strength-label\" aria-hidden=\"true\">{{ _strength() }}</span>\r\n  </div>\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-popover.mjs

@@ -43,14 +43,14 @@ class FuiPopoverComponent {
         return baseClass;
     }, ...(ngDevMode ? [{ debugName: "arrowClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiPopoverComponent, isStandalone: true, selector: "fui-popover", inputs: { hasArrow: { classPropertyName: "hasArrow", publicName: "hasArrow", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClasses()" }, classAttribute: "fui-popover" }, ngImport: i0, template: "<div class=\"fui-popover__panel\" role=\"dialog\">\r\n  @if (hasArrow()) {\r\n    <div class=\"fui-popover__arrow\" [class]=\"arrowClasses()\"></div>\r\n  }\r\n  <div class=\"fui-popover__content\">\r\n    <ng-content></ng-content>\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)}::ng-deep .fui-popover{--fui-popover-border-radius: var(--fui-border-radius-md);--fui-popover-shadow: var(--fui-shadow-03);--fui-popover-padding: var(--fui-spacing-04);--fui-popover-background: var(--fui-surface-card);--fui-popover-border-color: var(--fui-border-color);--fui-popover-text-color: var(--fui-text-primary);z-index:var(--fui-z-popover, 1050);display:block;font-family:var(--fui-font-family-sans);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-body);color:var(--fui-popover-text-color);opacity:0;animation:fui-popover-fade-in var(--fui-duration-fast-02) var(--fui-ease-entrance) forwards}::ng-deep .fui-popover__panel{position:relative;background-color:var(--fui-popover-background);border:1px solid var(--fui-popover-border-color);border-radius:var(--fui-popover-border-radius);box-shadow:var(--fui-popover-shadow)}::ng-deep .fui-popover__content{padding:var(--fui-popover-padding)}::ng-deep .fui-popover__arrow{position:absolute;width:0;height:0;border-style:solid;border-color:transparent;--arrow-size: 6px}::ng-deep .fui-popover__arrow--top{bottom:100%;left:50%;transform:translate(-50%);border-width:0 var(--arrow-size) var(--arrow-size) var(--arrow-size);border-bottom-color:var(--fui-popover-background)}::ng-deep .fui-popover__arrow--top:before{content:\"\";position:absolute;bottom:-1px;left:50%;transform:translate(-50%);width:0;height:0;border-style:solid;border-color:transparent;border-width:0 calc(var(--arrow-size) + 1px) calc(var(--arrow-size) + 1px) calc(var(--arrow-size) + 1px);border-bottom-color:var(--fui-popover-border-color);z-index:-1}::ng-deep .fui-popover__arrow--bottom{top:100%;left:50%;transform:translate(-50%);border-width:var(--arrow-size) var(--arrow-size) 0 var(--arrow-size);border-top-color:var(--fui-popover-background)}::ng-deep .fui-popover__arrow--bottom:before{content:\"\";position:absolute;top:-1px;left:50%;transform:translate(-50%);width:0;height:0;border-style:solid;border-color:transparent;border-width:calc(var(--arrow-size) + 1px) calc(var(--arrow-size) + 1px) 0 calc(var(--arrow-size) + 1px);border-top-color:var(--fui-popover-border-color);z-index:-1}::ng-deep .fui-popover__arrow--left{right:100%;top:50%;transform:translateY(-50%);border-width:var(--arrow-size) var(--arrow-size) var(--arrow-size) 0;border-right-color:var(--fui-popover-background)}::ng-deep .fui-popover__arrow--left:before{content:\"\";position:absolute;right:-1px;top:50%;transform:translateY(-50%);width:0;height:0;border-style:solid;border-color:transparent;border-width:calc(var(--arrow-size) + 1px) calc(var(--arrow-size) + 1px) calc(var(--arrow-size) + 1px) 0;border-right-color:var(--fui-popover-border-color);z-index:-1}::ng-deep .fui-popover__arrow--right{left:100%;top:50%;transform:translateY(-50%);border-width:var(--arrow-size) 0 var(--arrow-size) var(--arrow-size);border-left-color:var(--fui-popover-background)}::ng-deep .fui-popover__arrow--right:before{content:\"\";position:absolute;left:-1px;top:50%;transform:translateY(-50%);width:0;height:0;border-style:solid;border-color:transparent;border-width:calc(var(--arrow-size) + 1px) 0 calc(var(--arrow-size) + 1px) calc(var(--arrow-size) + 1px);border-left-color:var(--fui-popover-border-color);z-index:-1}::ng-deep .fui-popover--top-start .fui-popover__arrow,::ng-deep .fui-popover--bottom-start .fui-popover__arrow{left:var(--fui-spacing-04);transform:none}::ng-deep .fui-popover--top-end .fui-popover__arrow,::ng-deep .fui-popover--bottom-end .fui-popover__arrow{right:var(--fui-spacing-04);left:auto;transform:none}::ng-deep .fui-popover--left-start .fui-popover__arrow,::ng-deep .fui-popover--right-start .fui-popover__arrow{top:var(--fui-spacing-04);transform:none}::ng-deep .fui-popover--left-end .fui-popover__arrow,::ng-deep .fui-popover--right-end .fui-popover__arrow{bottom:var(--fui-spacing-04);top:auto;transform:none}@media(prefers-contrast:more){::ng-deep .fui-popover .fui-popover__panel{border:2px solid var(--fui-text-primary);box-shadow:var(--fui-shadow-04)}}@media(prefers-reduced-motion:reduce){::ng-deep .fui-popover{animation:none;opacity:1}}@media print{::ng-deep .fui-popover{display:none!important}}@keyframes fui-popover-fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiPopoverComponent, isStandalone: true, selector: "fui-popover", inputs: { hasArrow: { classPropertyName: "hasArrow", publicName: "hasArrow", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClasses()" }, classAttribute: "fui-popover" }, ngImport: i0, template: "<div class=\"fui-popover__panel\" role=\"dialog\">\r\n  @if (hasArrow()) {\r\n    <div class=\"fui-popover__arrow\" [class]=\"arrowClasses()\"></div>\r\n  }\r\n  <div class=\"fui-popover__content\">\r\n    <ng-content></ng-content>\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)}}::ng-deep .fui-popover{--fui-popover-border-radius: var(--fui-border-radius-md);--fui-popover-shadow: var(--fui-shadow-03);--fui-popover-padding: var(--fui-spacing-04);--fui-popover-background: var(--fui-surface-card);--fui-popover-border-color: var(--fui-border-color);--fui-popover-text-color: var(--fui-text-primary);z-index:var(--fui-z-popover, 1050);display:block;font-family:var(--fui-font-family-sans);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-body);color:var(--fui-popover-text-color);opacity:0;animation:fui-popover-fade-in var(--fui-duration-fast-02) var(--fui-ease-entrance) forwards}::ng-deep .fui-popover__panel{position:relative;background-color:var(--fui-popover-background);border:1px solid var(--fui-popover-border-color);border-radius:var(--fui-popover-border-radius);box-shadow:var(--fui-popover-shadow)}::ng-deep .fui-popover__content{padding:var(--fui-popover-padding)}::ng-deep .fui-popover__arrow{position:absolute;width:0;height:0;border-style:solid;border-color:transparent;--arrow-size: 6px}::ng-deep .fui-popover__arrow--top{bottom:100%;left:50%;transform:translate(-50%);border-width:0 var(--arrow-size) var(--arrow-size) var(--arrow-size);border-bottom-color:var(--fui-popover-background)}::ng-deep .fui-popover__arrow--top:before{content:\"\";position:absolute;bottom:-1px;left:50%;transform:translate(-50%);width:0;height:0;border-style:solid;border-color:transparent;border-width:0 calc(var(--arrow-size) + 1px) calc(var(--arrow-size) + 1px) calc(var(--arrow-size) + 1px);border-bottom-color:var(--fui-popover-border-color);z-index:-1}::ng-deep .fui-popover__arrow--bottom{top:100%;left:50%;transform:translate(-50%);border-width:var(--arrow-size) var(--arrow-size) 0 var(--arrow-size);border-top-color:var(--fui-popover-background)}::ng-deep .fui-popover__arrow--bottom:before{content:\"\";position:absolute;top:-1px;left:50%;transform:translate(-50%);width:0;height:0;border-style:solid;border-color:transparent;border-width:calc(var(--arrow-size) + 1px) calc(var(--arrow-size) + 1px) 0 calc(var(--arrow-size) + 1px);border-top-color:var(--fui-popover-border-color);z-index:-1}::ng-deep .fui-popover__arrow--left{right:100%;top:50%;transform:translateY(-50%);border-width:var(--arrow-size) var(--arrow-size) var(--arrow-size) 0;border-right-color:var(--fui-popover-background)}::ng-deep .fui-popover__arrow--left:before{content:\"\";position:absolute;right:-1px;top:50%;transform:translateY(-50%);width:0;height:0;border-style:solid;border-color:transparent;border-width:calc(var(--arrow-size) + 1px) calc(var(--arrow-size) + 1px) calc(var(--arrow-size) + 1px) 0;border-right-color:var(--fui-popover-border-color);z-index:-1}::ng-deep .fui-popover__arrow--right{left:100%;top:50%;transform:translateY(-50%);border-width:var(--arrow-size) 0 var(--arrow-size) var(--arrow-size);border-left-color:var(--fui-popover-background)}::ng-deep .fui-popover__arrow--right:before{content:\"\";position:absolute;left:-1px;top:50%;transform:translateY(-50%);width:0;height:0;border-style:solid;border-color:transparent;border-width:calc(var(--arrow-size) + 1px) 0 calc(var(--arrow-size) + 1px) calc(var(--arrow-size) + 1px);border-left-color:var(--fui-popover-border-color);z-index:-1}::ng-deep .fui-popover--top-start .fui-popover__arrow,::ng-deep .fui-popover--bottom-start .fui-popover__arrow{left:var(--fui-spacing-04);transform:none}::ng-deep .fui-popover--top-end .fui-popover__arrow,::ng-deep .fui-popover--bottom-end .fui-popover__arrow{right:var(--fui-spacing-04);left:auto;transform:none}::ng-deep .fui-popover--left-start .fui-popover__arrow,::ng-deep .fui-popover--right-start .fui-popover__arrow{top:var(--fui-spacing-04);transform:none}::ng-deep .fui-popover--left-end .fui-popover__arrow,::ng-deep .fui-popover--right-end .fui-popover__arrow{bottom:var(--fui-spacing-04);top:auto;transform:none}@media(prefers-contrast:more){::ng-deep .fui-popover .fui-popover__panel{border:2px solid var(--fui-text-primary);box-shadow:var(--fui-shadow-04)}}@media(prefers-reduced-motion:reduce){::ng-deep .fui-popover{animation:none;opacity:1}}@media print{::ng-deep .fui-popover{display:none!important}}@keyframes fui-popover-fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiPopoverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fui-popover', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'fui-popover',
                         '[class]': 'computedClasses()',
-                    }, template: "<div class=\"fui-popover__panel\" role=\"dialog\">\r\n  @if (hasArrow()) {\r\n    <div class=\"fui-popover__arrow\" [class]=\"arrowClasses()\"></div>\r\n  }\r\n  <div class=\"fui-popover__content\">\r\n    <ng-content></ng-content>\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)}::ng-deep .fui-popover{--fui-popover-border-radius: var(--fui-border-radius-md);--fui-popover-shadow: var(--fui-shadow-03);--fui-popover-padding: var(--fui-spacing-04);--fui-popover-background: var(--fui-surface-card);--fui-popover-border-color: var(--fui-border-color);--fui-popover-text-color: var(--fui-text-primary);z-index:var(--fui-z-popover, 1050);display:block;font-family:var(--fui-font-family-sans);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-body);color:var(--fui-popover-text-color);opacity:0;animation:fui-popover-fade-in var(--fui-duration-fast-02) var(--fui-ease-entrance) forwards}::ng-deep .fui-popover__panel{position:relative;background-color:var(--fui-popover-background);border:1px solid var(--fui-popover-border-color);border-radius:var(--fui-popover-border-radius);box-shadow:var(--fui-popover-shadow)}::ng-deep .fui-popover__content{padding:var(--fui-popover-padding)}::ng-deep .fui-popover__arrow{position:absolute;width:0;height:0;border-style:solid;border-color:transparent;--arrow-size: 6px}::ng-deep .fui-popover__arrow--top{bottom:100%;left:50%;transform:translate(-50%);border-width:0 var(--arrow-size) var(--arrow-size) var(--arrow-size);border-bottom-color:var(--fui-popover-background)}::ng-deep .fui-popover__arrow--top:before{content:\"\";position:absolute;bottom:-1px;left:50%;transform:translate(-50%);width:0;height:0;border-style:solid;border-color:transparent;border-width:0 calc(var(--arrow-size) + 1px) calc(var(--arrow-size) + 1px) calc(var(--arrow-size) + 1px);border-bottom-color:var(--fui-popover-border-color);z-index:-1}::ng-deep .fui-popover__arrow--bottom{top:100%;left:50%;transform:translate(-50%);border-width:var(--arrow-size) var(--arrow-size) 0 var(--arrow-size);border-top-color:var(--fui-popover-background)}::ng-deep .fui-popover__arrow--bottom:before{content:\"\";position:absolute;top:-1px;left:50%;transform:translate(-50%);width:0;height:0;border-style:solid;border-color:transparent;border-width:calc(var(--arrow-size) + 1px) calc(var(--arrow-size) + 1px) 0 calc(var(--arrow-size) + 1px);border-top-color:var(--fui-popover-border-color);z-index:-1}::ng-deep .fui-popover__arrow--left{right:100%;top:50%;transform:translateY(-50%);border-width:var(--arrow-size) var(--arrow-size) var(--arrow-size) 0;border-right-color:var(--fui-popover-background)}::ng-deep .fui-popover__arrow--left:before{content:\"\";position:absolute;right:-1px;top:50%;transform:translateY(-50%);width:0;height:0;border-style:solid;border-color:transparent;border-width:calc(var(--arrow-size) + 1px) calc(var(--arrow-size) + 1px) calc(var(--arrow-size) + 1px) 0;border-right-color:var(--fui-popover-border-color);z-index:-1}::ng-deep .fui-popover__arrow--right{left:100%;top:50%;transform:translateY(-50%);border-width:var(--arrow-size) 0 var(--arrow-size) var(--arrow-size);border-left-color:var(--fui-popover-background)}::ng-deep .fui-popover__arrow--right:before{content:\"\";position:absolute;left:-1px;top:50%;transform:translateY(-50%);width:0;height:0;border-style:solid;border-color:transparent;border-width:calc(var(--arrow-size) + 1px) 0 calc(var(--arrow-size) + 1px) calc(var(--arrow-size) + 1px);border-left-color:var(--fui-popover-border-color);z-index:-1}::ng-deep .fui-popover--top-start .fui-popover__arrow,::ng-deep .fui-popover--bottom-start .fui-popover__arrow{left:var(--fui-spacing-04);transform:none}::ng-deep .fui-popover--top-end .fui-popover__arrow,::ng-deep .fui-popover--bottom-end .fui-popover__arrow{right:var(--fui-spacing-04);left:auto;transform:none}::ng-deep .fui-popover--left-start .fui-popover__arrow,::ng-deep .fui-popover--right-start .fui-popover__arrow{top:var(--fui-spacing-04);transform:none}::ng-deep .fui-popover--left-end .fui-popover__arrow,::ng-deep .fui-popover--right-end .fui-popover__arrow{bottom:var(--fui-spacing-04);top:auto;transform:none}@media(prefers-contrast:more){::ng-deep .fui-popover .fui-popover__panel{border:2px solid var(--fui-text-primary);box-shadow:var(--fui-shadow-04)}}@media(prefers-reduced-motion:reduce){::ng-deep .fui-popover{animation:none;opacity:1}}@media print{::ng-deep .fui-popover{display:none!important}}@keyframes fui-popover-fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}\n"] }]
+                    }, template: "<div class=\"fui-popover__panel\" role=\"dialog\">\r\n  @if (hasArrow()) {\r\n    <div class=\"fui-popover__arrow\" [class]=\"arrowClasses()\"></div>\r\n  }\r\n  <div class=\"fui-popover__content\">\r\n    <ng-content></ng-content>\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)}}::ng-deep .fui-popover{--fui-popover-border-radius: var(--fui-border-radius-md);--fui-popover-shadow: var(--fui-shadow-03);--fui-popover-padding: var(--fui-spacing-04);--fui-popover-background: var(--fui-surface-card);--fui-popover-border-color: var(--fui-border-color);--fui-popover-text-color: var(--fui-text-primary);z-index:var(--fui-z-popover, 1050);display:block;font-family:var(--fui-font-family-sans);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-body);color:var(--fui-popover-text-color);opacity:0;animation:fui-popover-fade-in var(--fui-duration-fast-02) var(--fui-ease-entrance) forwards}::ng-deep .fui-popover__panel{position:relative;background-color:var(--fui-popover-background);border:1px solid var(--fui-popover-border-color);border-radius:var(--fui-popover-border-radius);box-shadow:var(--fui-popover-shadow)}::ng-deep .fui-popover__content{padding:var(--fui-popover-padding)}::ng-deep .fui-popover__arrow{position:absolute;width:0;height:0;border-style:solid;border-color:transparent;--arrow-size: 6px}::ng-deep .fui-popover__arrow--top{bottom:100%;left:50%;transform:translate(-50%);border-width:0 var(--arrow-size) var(--arrow-size) var(--arrow-size);border-bottom-color:var(--fui-popover-background)}::ng-deep .fui-popover__arrow--top:before{content:\"\";position:absolute;bottom:-1px;left:50%;transform:translate(-50%);width:0;height:0;border-style:solid;border-color:transparent;border-width:0 calc(var(--arrow-size) + 1px) calc(var(--arrow-size) + 1px) calc(var(--arrow-size) + 1px);border-bottom-color:var(--fui-popover-border-color);z-index:-1}::ng-deep .fui-popover__arrow--bottom{top:100%;left:50%;transform:translate(-50%);border-width:var(--arrow-size) var(--arrow-size) 0 var(--arrow-size);border-top-color:var(--fui-popover-background)}::ng-deep .fui-popover__arrow--bottom:before{content:\"\";position:absolute;top:-1px;left:50%;transform:translate(-50%);width:0;height:0;border-style:solid;border-color:transparent;border-width:calc(var(--arrow-size) + 1px) calc(var(--arrow-size) + 1px) 0 calc(var(--arrow-size) + 1px);border-top-color:var(--fui-popover-border-color);z-index:-1}::ng-deep .fui-popover__arrow--left{right:100%;top:50%;transform:translateY(-50%);border-width:var(--arrow-size) var(--arrow-size) var(--arrow-size) 0;border-right-color:var(--fui-popover-background)}::ng-deep .fui-popover__arrow--left:before{content:\"\";position:absolute;right:-1px;top:50%;transform:translateY(-50%);width:0;height:0;border-style:solid;border-color:transparent;border-width:calc(var(--arrow-size) + 1px) calc(var(--arrow-size) + 1px) calc(var(--arrow-size) + 1px) 0;border-right-color:var(--fui-popover-border-color);z-index:-1}::ng-deep .fui-popover__arrow--right{left:100%;top:50%;transform:translateY(-50%);border-width:var(--arrow-size) 0 var(--arrow-size) var(--arrow-size);border-left-color:var(--fui-popover-background)}::ng-deep .fui-popover__arrow--right:before{content:\"\";position:absolute;left:-1px;top:50%;transform:translateY(-50%);width:0;height:0;border-style:solid;border-color:transparent;border-width:calc(var(--arrow-size) + 1px) 0 calc(var(--arrow-size) + 1px) calc(var(--arrow-size) + 1px);border-left-color:var(--fui-popover-border-color);z-index:-1}::ng-deep .fui-popover--top-start .fui-popover__arrow,::ng-deep .fui-popover--bottom-start .fui-popover__arrow{left:var(--fui-spacing-04);transform:none}::ng-deep .fui-popover--top-end .fui-popover__arrow,::ng-deep .fui-popover--bottom-end .fui-popover__arrow{right:var(--fui-spacing-04);left:auto;transform:none}::ng-deep .fui-popover--left-start .fui-popover__arrow,::ng-deep .fui-popover--right-start .fui-popover__arrow{top:var(--fui-spacing-04);transform:none}::ng-deep .fui-popover--left-end .fui-popover__arrow,::ng-deep .fui-popover--right-end .fui-popover__arrow{bottom:var(--fui-spacing-04);top:auto;transform:none}@media(prefers-contrast:more){::ng-deep .fui-popover .fui-popover__panel{border:2px solid var(--fui-text-primary);box-shadow:var(--fui-shadow-04)}}@media(prefers-reduced-motion:reduce){::ng-deep .fui-popover{animation:none;opacity:1}}@media print{::ng-deep .fui-popover{display:none!important}}@keyframes fui-popover-fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}\n"] }]
         }], propDecorators: { hasArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasArrow", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
 
 const POPOVER_POSITIONS = [