angular-tailwind-components 1.8.3-RC5 → 1.9.0-RC1

package/README.md

@@ -6,7 +6,7 @@ A comprehensive Angular component library built entirely with **Tailwind CSS v4*
 
 ## Features
 
-- 🎨 **36 components** — Buttons, Inputs, Modals, Tables, DatePickers, and more
+- 🎨 **37 components** — Buttons, Inputs, Modals, Tables, DatePickers, and more
 - 🎯 **Pure Tailwind CSS** — No Angular Material, Ng-Zorro, or other UI frameworks
 - ⚡ **Angular 21** — Signals, standalone components, modern control flow
 - 📝 **ControlValueAccessor** — Full reactive forms integration for all form components
@@ -69,7 +69,7 @@ export class ExampleComponent {
 
 ## Application configuration (`defineTheme`)
 
-Use **`defineTheme`** from `angular-tailwind-components` as the single app-level entry: it registers **`EnvironmentProviders`** for optional **injection tokens** (`iconSize`, `datetimeLanguage`, `componentsSize`, `buttonKind`, `paginationSummary`) and, when you pass **`colors`**, an app initializer that applies semantic CSS variables on `document.documentElement` in the browser. Add **one** entry to `providers` without spreading.
+Use **`defineTheme`** from `angular-tailwind-components` as the single app-level entry: it registers **`EnvironmentProviders`** for optional **injection tokens** (`iconSize`, `datetimeLanguage`, `componentsSize`, `buttonKind`, `paginationSummary`, `passwordLabels`) and, when you pass **`colors`**, an app initializer that applies semantic CSS variables on `document.documentElement` in the browser. Add **one** entry to `providers` without spreading.
 
 `TailwindDefineThemeConfig` extends **`TailwindComponentsConfig`** with an optional **`colors`** field.
 
@@ -141,6 +141,7 @@ You can omit **`colors`** if you only need token defaults, or omit token keys if
 | `componentsSize` | `TAILWIND_COMPONENTS_SIZE` |
 | `buttonKind` | `TAILWIND_BUTTON_KIND` |
 | `paginationSummary` | `TAILWIND_PAGINATION_SUMMARY` |
+| `passwordLabels` | `TAILWIND_PASSWORD_LABELS` |
 
 **`provideTailwindComponents`** is still exported for backward compatibility (token providers only, same implementation as the token slice of `defineTheme`). It is **deprecated**; prefer **`defineTheme`**.
 
@@ -204,6 +205,7 @@ Some components (for example `tailwind-card`, `tailwind-modal`, `tailwind-toolba
 ### Form Controls (with ControlValueAccessor)
 
 - **Input** (`tailwind-input`): Text, email, password, number, search
+- **Input Password** (`tailwind-input-password`): Password field with optional strength meter and show/hide toggle
 - **Textarea** (`tailwind-textarea`): Multi-line text with resize modes and rows/cols
 - **Upload** (`tailwind-upload`): File picker as button or drop zone; value as base64 data URL for forms, `filesSelected` for raw files
 - **Input OTP** (`tailwind-input-otp`): Multi-digit OTP / PIN with paste and keyboard navigation

package/fesm2022/angular-tailwind-components.mjs

@@ -343,6 +343,13 @@ const TAILWIND_HEROICON_NAMES = [
     'x-mark',
 ];
 
+const DEFAULT_TAILWIND_PASSWORD_LABELS = {
+    prompt: 'Inserisci una password',
+    weak: 'Debole',
+    medium: 'Buona',
+    strong: 'Forte'
+};
+
 class TailwindComponent {
     /** Optional ID for the component */
     id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
@@ -622,6 +629,10 @@ const TAILWIND_BUTTON_KIND = new InjectionToken('TAILWIND_BUTTON_KIND');
  * Use placeholders `{start}`, `{end}`, `{total}` (same rules as the `summary` input).
  */
 const TAILWIND_PAGINATION_SUMMARY = new InjectionToken('TAILWIND_PAGINATION_SUMMARY');
+/**
+ * Default labels for `tailwind-input-password` strength feedback when component inputs are omitted.
+ */
+const TAILWIND_PASSWORD_LABELS = new InjectionToken('TAILWIND_PASSWORD_LABELS');
 
 const clampIconSize = (value) => {
     if (!Number.isFinite(value))
@@ -991,6 +1002,216 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tailwind-input-wrapper flex flex-col gap-1.5\">\n  @if (label()) {\n    <label\n      [attr.for]=\"id() ? id() + '-inner' : null\"\n      class=\"text-sm font-medium text-neutral-700\"\n      [class.text-danger-600]=\"hasError()\">\n      {{ label() }}\n    </label>\n  }\n\n  <input\n    [attr.id]=\"id() ? id() + '-inner' : null\"\n    [type]=\"type()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [readonly]=\"readonly()\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\n    [value]=\"value()\"\n    [class]=\"inputClasses()\"\n    (input)=\"onInputChange($event)\"\n    (blur)=\"onBlur()\" />\n\n  @if (helperText() && !hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">\n      {{ helperText() }}\n    </p>\n  }\n  @if (errorText() && hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\n      {{ errorText() }}\n    </p>\n  }\n</div>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
+const LOWERCASE = /[a-z]/;
+const UPPERCASE = /[A-Z]/;
+const DIGIT = /\d/;
+const SYMBOL = /[^a-zA-Z0-9]/;
+const REPEATED_CHAR = /(.)\1{2,}/;
+const COMMON_SEQUENCES = ['123', '234', '345', '456', '567', '678', '789', 'abc', 'bcd', 'cde', 'qwerty', 'password'];
+function hasCommonSequence(value) {
+    const lower = value.toLowerCase();
+    return COMMON_SEQUENCES.some(seq => lower.includes(seq));
+}
+/**
+ * Computes a password strength score (0–100) and maps it to weak / medium / strong.
+ */
+function computePasswordStrength(password) {
+    if (!password) {
+        return { score: 0, level: 'weak' };
+    }
+    let score = 0;
+    const length = password.length;
+    if (length >= 8)
+        score += 25;
+    else if (length >= 6)
+        score += 15;
+    else if (length >= 4)
+        score += 8;
+    else
+        score += 4;
+    if (length >= 12)
+        score += 10;
+    if (length >= 16)
+        score += 5;
+    const variety = [LOWERCASE, UPPERCASE, DIGIT, SYMBOL].filter(re => re.test(password)).length;
+    score += variety * 12;
+    if (REPEATED_CHAR.test(password)) {
+        score -= 10;
+    }
+    if (hasCommonSequence(password)) {
+        score -= 15;
+    }
+    score = Math.max(0, Math.min(100, score));
+    let level;
+    if (score < 40) {
+        level = 'weak';
+    }
+    else if (score < 70) {
+        level = 'medium';
+    }
+    else {
+        level = 'strong';
+    }
+    return { score, level };
+}
+/**
+ * Returns how many of the three meter segments should be filled (1–3) for the given level.
+ */
+function passwordStrengthMeterFill(level) {
+    switch (level) {
+        case 'weak':
+            return 1;
+        case 'medium':
+            return 2;
+        case 'strong':
+            return 3;
+    }
+}
+
+class TailwindInputPassword extends TailwindComponent {
+    themeLabels = inject(TAILWIND_PASSWORD_LABELS, { optional: true });
+    /** Label text */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Placeholder text */
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Size variant */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Helper text shown below input */
+    helperText = input('', ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
+    /** Error text shown when hasError is true */
+    errorText = input('', ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+    /** Whether the input is in error state */
+    hasError = input(false, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    /** Show strength feedback panel while typing */
+    feedback = input(false, ...(ngDevMode ? [{ debugName: "feedback" }] : /* istanbul ignore next */ []));
+    /** Show toggle to reveal/hide password */
+    toggleMask = input(false, ...(ngDevMode ? [{ debugName: "toggleMask" }] : /* istanbul ignore next */ []));
+    /** Override prompt label from theme token */
+    promptLabel = input(undefined, ...(ngDevMode ? [{ debugName: "promptLabel" }] : /* istanbul ignore next */ []));
+    /** Override weak strength label from theme token */
+    weakLabel = input(undefined, ...(ngDevMode ? [{ debugName: "weakLabel" }] : /* istanbul ignore next */ []));
+    /** Override medium strength label from theme token */
+    mediumLabel = input(undefined, ...(ngDevMode ? [{ debugName: "mediumLabel" }] : /* istanbul ignore next */ []));
+    /** Override strong strength label from theme token */
+    strongLabel = input(undefined, ...(ngDevMode ? [{ debugName: "strongLabel" }] : /* istanbul ignore next */ []));
+    /** Two-way bound value */
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    masked = signal(true, ...(ngDevMode ? [{ debugName: "masked" }] : /* istanbul ignore next */ []));
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+    strength = computed(() => computePasswordStrength(this.value()), ...(ngDevMode ? [{ debugName: "strength" }] : /* istanbul ignore next */ []));
+    strengthLevel = computed(() => this.strength().level, ...(ngDevMode ? [{ debugName: "strengthLevel" }] : /* istanbul ignore next */ []));
+    meterFill = computed(() => passwordStrengthMeterFill(this.strengthLevel()), ...(ngDevMode ? [{ debugName: "meterFill" }] : /* istanbul ignore next */ []));
+    showFeedbackPanel = computed(() => this.feedback() && this.isFocused() && this.value().length > 0, ...(ngDevMode ? [{ debugName: "showFeedbackPanel" }] : /* istanbul ignore next */ []));
+    resolvedLabels = computed(() => {
+        const defaults = this.themeLabels ?? DEFAULT_TAILWIND_PASSWORD_LABELS;
+        return {
+            prompt: this.promptLabel() ?? defaults.prompt,
+            weak: this.weakLabel() ?? defaults.weak,
+            medium: this.mediumLabel() ?? defaults.medium,
+            strong: this.strongLabel() ?? defaults.strong
+        };
+    }, ...(ngDevMode ? [{ debugName: "resolvedLabels" }] : /* istanbul ignore next */ []));
+    strengthLabel = computed(() => {
+        const labels = this.resolvedLabels();
+        const level = this.strengthLevel();
+        if (level === 'medium')
+            return labels.medium;
+        if (level === 'strong')
+            return labels.strong;
+        return labels.weak;
+    }, ...(ngDevMode ? [{ debugName: "strengthLabel" }] : /* istanbul ignore next */ []));
+    inputType = computed(() => (this.masked() ? 'password' : 'text'), ...(ngDevMode ? [{ debugName: "inputType" }] : /* istanbul ignore next */ []));
+    inputPaddingClass = computed(() => (this.toggleMask() ? 'pr-10' : ''), ...(ngDevMode ? [{ debugName: "inputPaddingClass" }] : /* istanbul ignore next */ []));
+    toggleIcon = computed(() => (this.masked() ? 'eye' : 'eye-slash'), ...(ngDevMode ? [{ debugName: "toggleIcon" }] : /* istanbul ignore next */ []));
+    toggleAriaLabel = computed(() => (this.masked() ? 'Mostra password' : 'Nascondi password'), ...(ngDevMode ? [{ debugName: "toggleAriaLabel" }] : /* istanbul ignore next */ []));
+    inputClasses = computed(() => {
+        const base = [
+            'block w-full bg-white',
+            'border transition-colors duration-150',
+            'placeholder:text-neutral-400',
+            'outline-none focus:outline focus:outline-2 focus:outline-offset-2',
+            'disabled:bg-neutral-50 disabled:text-neutral-400 disabled:cursor-not-allowed'
+        ];
+        const sizeMap = {
+            xs: 'text-xs px-2 py-1 rounded-sm',
+            sm: 'text-sm px-2.5 py-1.5 rounded-md',
+            md: 'text-sm px-3 py-2 rounded-md',
+            lg: 'text-base px-3.5 py-2.5 rounded-lg',
+            xl: 'text-base px-4 py-3 rounded-lg'
+        };
+        const stateClass = this.hasError()
+            ? 'border-danger-400 focus:outline-danger-500 text-danger-900'
+            : 'border-neutral-300 focus:outline-primary-500 text-neutral-900';
+        return [...base, sizeMap[this.size()], stateClass, this.inputPaddingClass()].filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "inputClasses" }] : /* istanbul ignore next */ []));
+    meterSegmentClasses = computed(() => {
+        const fill = this.meterFill();
+        const level = this.strengthLevel();
+        const activeClass = level === 'weak' ? 'bg-danger-500' : level === 'medium' ? 'bg-warning-500' : 'bg-success-600';
+        return [0, 1, 2].map(index => {
+            const isActive = index < fill;
+            return isActive ? activeClass : 'bg-neutral-200';
+        });
+    }, ...(ngDevMode ? [{ debugName: "meterSegmentClasses" }] : /* istanbul ignore next */ []));
+    // CVA
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.value.set(value ?? '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.isDisabled.set(disabled);
+    }
+    onInputChange(event) {
+        const val = event.target.value;
+        this.value.set(val);
+        this.onChange(val);
+    }
+    onFocus() {
+        this.isFocused.set(true);
+    }
+    onBlur() {
+        this.isFocused.set(false);
+        this.onTouched();
+    }
+    toggleMaskVisibility() {
+        this.masked.update(v => !v);
+    }
+    onEscape() {
+        if (this.showFeedbackPanel()) {
+            this.isFocused.set(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindInputPassword, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TailwindInputPassword, isStandalone: true, selector: "tailwind-input-password", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, feedback: { classPropertyName: "feedback", publicName: "feedback", isSignal: true, isRequired: false, transformFunction: null }, toggleMask: { classPropertyName: "toggleMask", publicName: "toggleMask", isSignal: true, isRequired: false, transformFunction: null }, promptLabel: { classPropertyName: "promptLabel", publicName: "promptLabel", isSignal: true, isRequired: false, transformFunction: null }, weakLabel: { classPropertyName: "weakLabel", publicName: "weakLabel", isSignal: true, isRequired: false, transformFunction: null }, mediumLabel: { classPropertyName: "mediumLabel", publicName: "mediumLabel", isSignal: true, isRequired: false, transformFunction: null }, strongLabel: { classPropertyName: "strongLabel", publicName: "strongLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TailwindInputPassword),
+                multi: true
+            }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"tailwind-input-password-wrapper flex flex-col gap-1.5\">\r\n  @if (label()) {\r\n    <label\r\n      [attr.for]=\"id() ? id() + '-inner' : null\"\r\n      class=\"text-sm font-medium text-neutral-700\"\r\n      [class.text-danger-600]=\"hasError()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <div class=\"relative\">\r\n    <input\r\n      [attr.id]=\"id() ? id() + '-inner' : null\"\r\n      [type]=\"inputType()\"\r\n      [placeholder]=\"placeholder()\"\r\n      [disabled]=\"isDisabled()\"\r\n      autocomplete=\"current-password\"\r\n      [attr.aria-invalid]=\"hasError() || null\"\r\n      [attr.aria-describedby]=\"(helperText() || errorText() || feedback()) && id() ? id() + '-helper' : null\"\r\n      [value]=\"value()\"\r\n      [class]=\"inputClasses()\"\r\n      (input)=\"onInputChange($event)\"\r\n      (focus)=\"onFocus()\"\r\n      (blur)=\"onBlur()\" />\r\n\r\n    @if (toggleMask()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"absolute right-2 top-1/2 -translate-y-1/2 inline-flex items-center justify-center rounded-md p-1 text-neutral-500 hover:text-neutral-700 focus:outline focus:outline-offset-2 focus:outline-primary-500 disabled:pointer-events-none disabled:opacity-50\"\r\n        [attr.aria-label]=\"toggleAriaLabel()\"\r\n        [disabled]=\"isDisabled()\"\r\n        (mousedown)=\"$event.preventDefault()\"\r\n        (click)=\"toggleMaskVisibility()\">\r\n        <tailwind-icon [icon]=\"toggleIcon()\" [size]=\"16\" />\r\n      </button>\r\n    }\r\n\r\n    @if (showFeedbackPanel()) {\r\n      <div\r\n        class=\"absolute left-0 top-full z-popover mt-1 w-max max-w-xl min-w-48 rounded-lg border border-neutral-200 bg-white p-3 shadow-lg\"\r\n        role=\"region\"\r\n        [attr.aria-label]=\"resolvedLabels().prompt\">\r\n        <p class=\"mb-2 text-xs font-medium text-neutral-700\">{{ resolvedLabels().prompt }}</p>\r\n        <div class=\"flex w-56 max-w-full gap-1\" role=\"img\" [attr.aria-label]=\"strengthLabel()\">\r\n          @for (segmentClass of meterSegmentClasses(); track $index) {\r\n            <span class=\"h-1.5 flex-1 rounded-full transition-colors duration-150\" [class]=\"segmentClass\"></span>\r\n          }\r\n        </div>\r\n        <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"mt-2 text-xs text-neutral-600\" aria-live=\"polite\">\r\n          {{ strengthLabel() }}\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  @if (helperText() && !hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">\r\n      {{ helperText() }}\r\n    </p>\r\n  }\r\n  @if (errorText() && hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\r\n      {{ errorText() }}\r\n    </p>\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TailwindInputPassword, decorators: [{
+            type: Component,
+            args: [{ imports: [TailwindIcon], selector: 'tailwind-input-password', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TailwindInputPassword),
+                            multi: true
+                        }
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tailwind-input-password-wrapper flex flex-col gap-1.5\">\r\n  @if (label()) {\r\n    <label\r\n      [attr.for]=\"id() ? id() + '-inner' : null\"\r\n      class=\"text-sm font-medium text-neutral-700\"\r\n      [class.text-danger-600]=\"hasError()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <div class=\"relative\">\r\n    <input\r\n      [attr.id]=\"id() ? id() + '-inner' : null\"\r\n      [type]=\"inputType()\"\r\n      [placeholder]=\"placeholder()\"\r\n      [disabled]=\"isDisabled()\"\r\n      autocomplete=\"current-password\"\r\n      [attr.aria-invalid]=\"hasError() || null\"\r\n      [attr.aria-describedby]=\"(helperText() || errorText() || feedback()) && id() ? id() + '-helper' : null\"\r\n      [value]=\"value()\"\r\n      [class]=\"inputClasses()\"\r\n      (input)=\"onInputChange($event)\"\r\n      (focus)=\"onFocus()\"\r\n      (blur)=\"onBlur()\" />\r\n\r\n    @if (toggleMask()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"absolute right-2 top-1/2 -translate-y-1/2 inline-flex items-center justify-center rounded-md p-1 text-neutral-500 hover:text-neutral-700 focus:outline focus:outline-offset-2 focus:outline-primary-500 disabled:pointer-events-none disabled:opacity-50\"\r\n        [attr.aria-label]=\"toggleAriaLabel()\"\r\n        [disabled]=\"isDisabled()\"\r\n        (mousedown)=\"$event.preventDefault()\"\r\n        (click)=\"toggleMaskVisibility()\">\r\n        <tailwind-icon [icon]=\"toggleIcon()\" [size]=\"16\" />\r\n      </button>\r\n    }\r\n\r\n    @if (showFeedbackPanel()) {\r\n      <div\r\n        class=\"absolute left-0 top-full z-popover mt-1 w-max max-w-xl min-w-48 rounded-lg border border-neutral-200 bg-white p-3 shadow-lg\"\r\n        role=\"region\"\r\n        [attr.aria-label]=\"resolvedLabels().prompt\">\r\n        <p class=\"mb-2 text-xs font-medium text-neutral-700\">{{ resolvedLabels().prompt }}</p>\r\n        <div class=\"flex w-56 max-w-full gap-1\" role=\"img\" [attr.aria-label]=\"strengthLabel()\">\r\n          @for (segmentClass of meterSegmentClasses(); track $index) {\r\n            <span class=\"h-1.5 flex-1 rounded-full transition-colors duration-150\" [class]=\"segmentClass\"></span>\r\n          }\r\n        </div>\r\n        <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"mt-2 text-xs text-neutral-600\" aria-live=\"polite\">\r\n          {{ strengthLabel() }}\r\n        </p>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  @if (helperText() && !hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">\r\n      {{ helperText() }}\r\n    </p>\r\n  }\r\n  @if (errorText() && hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\r\n      {{ errorText() }}\r\n    </p>\r\n  }\r\n</div>\r\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], feedback: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedback", required: false }] }], toggleMask: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleMask", required: false }] }], promptLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "promptLabel", required: false }] }], weakLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "weakLabel", required: false }] }], mediumLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mediumLabel", required: false }] }], strongLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "strongLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
 class TailwindTextarea extends TailwindComponent {
     /** Label text */
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
@@ -4661,6 +4882,9 @@ function providersFromTailwindComponentsConfig(config) {
     if (config.paginationSummary !== undefined) {
         providers.push({ provide: TAILWIND_PAGINATION_SUMMARY, useValue: config.paginationSummary });
     }
+    if (config.passwordLabels !== undefined) {
+        providers.push({ provide: TAILWIND_PASSWORD_LABELS, useValue: config.passwordLabels });
+    }
     return providers;
 }
 /**
@@ -4808,5 +5032,5 @@ function defineTheme(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { DEFAULT_PAGINATION_LENGTH_OPTIONS, TAILWIND_BUTTON_KIND, TAILWIND_COMPONENTS_SIZE, TAILWIND_DATETIME_LANGUAGE, TAILWIND_HEROICON_NAMES, TAILWIND_ICON_SIZE, TAILWIND_MODAL_DATA, TAILWIND_PAGINATION_SUMMARY, TW_TABLE_SORT_DIR_ATTR, TW_TABLE_SORT_KEY_ATTR, TailwindAccordion, TailwindAccordionItem, TailwindAlert, TailwindAutocomplete, TailwindBadge, TailwindBreadcrumb, TailwindButton, TailwindCard, TailwindCheckbox, TailwindDatePicker, TailwindDateTimePicker, TailwindDivider, TailwindDrawer, TailwindIcon, TailwindInput, TailwindInputOtp, TailwindMenu, TailwindMessage, TailwindMeter, TailwindModal, TailwindModalRef, TailwindModalService, TailwindNotification, TailwindPagination, TailwindProgressBar, TailwindRadioGroup, TailwindSelect, TailwindSkeleton, TailwindSlider, TailwindSortHeaderDirective, TailwindSpinner, TailwindStep, TailwindStepper, TailwindTab, TailwindTabGroup, TailwindTable, TailwindTableRowDirective, TailwindTableRowDirective as TailwindTableRowTemplateDirective, TailwindTag, TailwindTextarea, TailwindTimePicker, TailwindTitle, TailwindToast, TailwindToastService, TailwindToggle, TailwindToolbar, TailwindTooltip, TailwindTooltipDirective, TailwindUpload, buildTailwindThemeVariableEntries, defineTheme, provideTailwindComponents };
+export { DEFAULT_PAGINATION_LENGTH_OPTIONS, DEFAULT_TAILWIND_PASSWORD_LABELS, TAILWIND_BUTTON_KIND, TAILWIND_COMPONENTS_SIZE, TAILWIND_DATETIME_LANGUAGE, TAILWIND_HEROICON_NAMES, TAILWIND_ICON_SIZE, TAILWIND_MODAL_DATA, TAILWIND_PAGINATION_SUMMARY, TAILWIND_PASSWORD_LABELS, TW_TABLE_SORT_DIR_ATTR, TW_TABLE_SORT_KEY_ATTR, TailwindAccordion, TailwindAccordionItem, TailwindAlert, TailwindAutocomplete, TailwindBadge, TailwindBreadcrumb, TailwindButton, TailwindCard, TailwindCheckbox, TailwindDatePicker, TailwindDateTimePicker, TailwindDivider, TailwindDrawer, TailwindIcon, TailwindInput, TailwindInputOtp, TailwindInputPassword, TailwindMenu, TailwindMessage, TailwindMeter, TailwindModal, TailwindModalRef, TailwindModalService, TailwindNotification, TailwindPagination, TailwindProgressBar, TailwindRadioGroup, TailwindSelect, TailwindSkeleton, TailwindSlider, TailwindSortHeaderDirective, TailwindSpinner, TailwindStep, TailwindStepper, TailwindTab, TailwindTabGroup, TailwindTable, TailwindTableRowDirective, TailwindTableRowDirective as TailwindTableRowTemplateDirective, TailwindTag, TailwindTextarea, TailwindTimePicker, TailwindTitle, TailwindToast, TailwindToastService, TailwindToggle, TailwindToolbar, TailwindTooltip, TailwindTooltipDirective, TailwindUpload, buildTailwindThemeVariableEntries, defineTheme, provideTailwindComponents };
 //# sourceMappingURL=angular-tailwind-components.mjs.map