ng-primitives 0.125.0 → 0.126.0

package/fesm2022/ng-primitives-password.mjs

@@ -0,0 +1,293 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, signal, computed, input, booleanAttribute, Directive, output } from '@angular/core';
+import { uniqueId } from 'ng-primitives/utils';
+import { ngpInput } from 'ng-primitives/input';
+import { injectElementRef } from 'ng-primitives/internal';
+import { createPrimitive, controlled, controlledState, dataBinding, deprecatedSetter, attrBinding, onMount, listener } from 'ng-primitives/state';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
+
+const defaultPasswordConfig = {
+    showLabel: 'Show password',
+    hideLabel: 'Hide password',
+    shownAnnouncement: 'Your password is shown',
+    hiddenAnnouncement: 'Your password is hidden',
+    ignorePasswordManagers: false,
+};
+const NgpPasswordConfigToken = new InjectionToken('NgpPasswordConfigToken');
+/**
+ * Provide the default Password configuration
+ * @param config The Password configuration
+ * @returns The provider
+ */
+function providePasswordConfig(config) {
+    return [
+        {
+            provide: NgpPasswordConfigToken,
+            useValue: { ...defaultPasswordConfig, ...config },
+        },
+    ];
+}
+/**
+ * Inject the Password configuration
+ * @returns The global Password configuration
+ */
+function injectPasswordConfig() {
+    return inject(NgpPasswordConfigToken, { optional: true }) ?? defaultPasswordConfig;
+}
+
+const [NgpPasswordStateToken, ngpPassword, injectPasswordState, providePasswordState] = createPrimitive('NgpPassword', ({ visible: _visible, defaultVisible: _defaultVisible, onVisibleChange, }) => {
+    const element = injectElementRef();
+    const defaultVisible = controlled(_defaultVisible, false);
+    const input = signal(null, ...(ngDevMode ? [{ debugName: "input" }] : /* istanbul ignore next */ []));
+    const inputId = signal(null, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+    const [visible, setVisible, visibleChange] = controlledState({
+        value: _visible,
+        defaultValue: defaultVisible,
+        onChange: onVisibleChange,
+    });
+    dataBinding(element, 'data-visible', visible);
+    function toggle() {
+        setVisible(!visible());
+    }
+    function registerInput(el, id) {
+        input.set(el);
+        inputId.set(id);
+    }
+    function focusInput() {
+        input()?.focus();
+    }
+    return {
+        visible: deprecatedSetter(visible, 'setVisible', setVisible),
+        visibleChange,
+        inputId: computed(() => inputId()?.() ?? null),
+        toggle,
+        setVisible,
+        setDefaultVisible: defaultVisible.set,
+        registerInput,
+        focusInput,
+    };
+});
+
+const [NgpPasswordInputStateToken, ngpPasswordInput, injectPasswordInputState, providePasswordInputState,] = createPrimitive('NgpPasswordInput', ({ id, disabled, ignorePasswordManagers = signal(false), }) => {
+    const element = injectElementRef();
+    const password = injectPasswordState();
+    // Compose ngpInput for form control, interactions, autofill and the id.
+    const input = ngpInput({ id, disabled });
+    // Register with the container for aria-controls.
+    password().registerInput(element.nativeElement, input.id);
+    // Consumers keep type="password" in the markup so the field renders masked
+    // from the start; this drives the toggle to text and back.
+    attrBinding(element, 'type', () => (password().visible() ? 'text' : 'password'));
+    dataBinding(element, 'data-visible', () => password().visible());
+    // Opt out of password manager injection when requested.
+    attrBinding(element, 'data-1p-ignore', () => (ignorePasswordManagers() ? '' : null));
+    attrBinding(element, 'data-lpignore', () => (ignorePasswordManagers() ? 'true' : null));
+    attrBinding(element, 'data-bwignore', () => (ignorePasswordManagers() ? '' : null));
+    // Reset to hidden on submit so browsers don't cache a plaintext field.
+    onMount(() => {
+        const form = element.nativeElement.form;
+        if (form) {
+            listener(form, 'submit', () => password().setVisible(false));
+        }
+    });
+    return input;
+});
+
+/**
+ * Apply the `ngpPasswordInput` directive to an `input` element within an `ngpPassword` container.
+ * It is a complete input (form control, interactions, autofill) with password visibility toggling
+ * layered on top, so it does not need to be combined with `ngpInput`.
+ */
+class NgpPasswordInput {
+    constructor() {
+        /**
+         * Access the global password configuration.
+         */
+        this.config = injectPasswordConfig();
+        /**
+         * The id of the input.
+         */
+        this.id = input(uniqueId('ngp-password-input'), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the input is disabled.
+         */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Whether to opt the input out of password manager injection
+         * (1Password, LastPass, Bitwarden, etc.).
+         */
+        this.ignorePasswordManagers = input(this.config.ignorePasswordManagers, { ...(ngDevMode ? { debugName: "ignorePasswordManagers" } : /* istanbul ignore next */ {}), alias: 'ngpPasswordInputIgnorePasswordManagers',
+            transform: booleanAttribute });
+        /**
+         * The state for the password input primitive.
+         */
+        this.state = ngpPasswordInput({
+            id: this.id,
+            disabled: this.disabled,
+            ignorePasswordManagers: this.ignorePasswordManagers,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpPasswordInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: NgpPasswordInput, isStandalone: true, selector: "input[ngpPasswordInput]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ignorePasswordManagers: { classPropertyName: "ignorePasswordManagers", publicName: "ngpPasswordInputIgnorePasswordManagers", isSignal: true, isRequired: false, transformFunction: null } }, providers: [providePasswordInputState()], exportAs: ["ngpPasswordInput"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpPasswordInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[ngpPasswordInput]',
+                    exportAs: 'ngpPasswordInput',
+                    providers: [providePasswordInputState()],
+                }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ignorePasswordManagers: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPasswordInputIgnorePasswordManagers", required: false }] }] } });
+
+const [NgpPasswordToggleStateToken, ngpPasswordToggle, injectPasswordToggleState, providePasswordToggleState,] = createPrimitive('NgpPasswordToggle', ({ showLabel, hideLabel, shownAnnouncement, hiddenAnnouncement, }) => {
+    const element = injectElementRef();
+    const password = injectPasswordState();
+    const announcer = inject(LiveAnnouncer);
+    // Pointer activation returns focus to the input; keyboard keeps it on the button.
+    const pointerActivated = signal(false, ...(ngDevMode ? [{ debugName: "pointerActivated" }] : /* istanbul ignore next */ []));
+    attrBinding(element, 'type', 'button');
+    attrBinding(element, 'aria-controls', () => password().inputId());
+    attrBinding(element, 'aria-label', () => {
+        // Defer to the button's own text if it has any.
+        if ((element.nativeElement.textContent ?? '').trim().length > 0) {
+            return null;
+        }
+        return password().visible() ? hideLabel() : showLabel();
+    });
+    dataBinding(element, 'data-visible', () => password().visible());
+    listener(element, 'pointerdown', () => pointerActivated.set(true));
+    listener(element, 'click', () => toggle());
+    function toggle() {
+        const state = password();
+        // Announce the intended state: in controlled mode state.visible() may not
+        // reflect the new value until the parent propagates it back.
+        const willBeVisible = !state.visible();
+        state.toggle();
+        announcer.announce(willBeVisible ? shownAnnouncement() : hiddenAnnouncement());
+        if (pointerActivated()) {
+            state.focusInput();
+        }
+        pointerActivated.set(false);
+    }
+    return { toggle };
+});
+
+/**
+ * Apply the `ngpPasswordToggle` directive to a `button` element to toggle the visibility of the
+ * password within an `ngpPassword` container.
+ */
+class NgpPasswordToggle {
+    constructor() {
+        /**
+         * Access the global password configuration.
+         */
+        this.config = injectPasswordConfig();
+        /**
+         * The accessible label shown when the password is hidden.
+         */
+        this.showLabel = input(this.config.showLabel, { ...(ngDevMode ? { debugName: "showLabel" } : /* istanbul ignore next */ {}), alias: 'ngpPasswordToggleShowLabel' });
+        /**
+         * The accessible label shown when the password is visible.
+         */
+        this.hideLabel = input(this.config.hideLabel, { ...(ngDevMode ? { debugName: "hideLabel" } : /* istanbul ignore next */ {}), alias: 'ngpPasswordToggleHideLabel' });
+        /**
+         * The message announced when the password becomes visible.
+         */
+        this.shownAnnouncement = input(this.config.shownAnnouncement, { ...(ngDevMode ? { debugName: "shownAnnouncement" } : /* istanbul ignore next */ {}), alias: 'ngpPasswordToggleShownAnnouncement' });
+        /**
+         * The message announced when the password becomes hidden.
+         */
+        this.hiddenAnnouncement = input(this.config.hiddenAnnouncement, { ...(ngDevMode ? { debugName: "hiddenAnnouncement" } : /* istanbul ignore next */ {}), alias: 'ngpPasswordToggleHiddenAnnouncement' });
+        /**
+         * The state for the password toggle primitive.
+         */
+        this.state = ngpPasswordToggle({
+            showLabel: this.showLabel,
+            hideLabel: this.hideLabel,
+            shownAnnouncement: this.shownAnnouncement,
+            hiddenAnnouncement: this.hiddenAnnouncement,
+        });
+    }
+    /**
+     * Toggle the visibility of the password.
+     */
+    toggle() {
+        this.state.toggle();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpPasswordToggle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: NgpPasswordToggle, isStandalone: true, selector: "button[ngpPasswordToggle]", inputs: { showLabel: { classPropertyName: "showLabel", publicName: "ngpPasswordToggleShowLabel", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "ngpPasswordToggleHideLabel", isSignal: true, isRequired: false, transformFunction: null }, shownAnnouncement: { classPropertyName: "shownAnnouncement", publicName: "ngpPasswordToggleShownAnnouncement", isSignal: true, isRequired: false, transformFunction: null }, hiddenAnnouncement: { classPropertyName: "hiddenAnnouncement", publicName: "ngpPasswordToggleHiddenAnnouncement", isSignal: true, isRequired: false, transformFunction: null } }, providers: [providePasswordToggleState()], exportAs: ["ngpPasswordToggle"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpPasswordToggle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[ngpPasswordToggle]',
+                    exportAs: 'ngpPasswordToggle',
+                    providers: [providePasswordToggleState()],
+                }]
+        }], propDecorators: { showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPasswordToggleShowLabel", required: false }] }], hideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPasswordToggleHideLabel", required: false }] }], shownAnnouncement: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPasswordToggleShownAnnouncement", required: false }] }], hiddenAnnouncement: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPasswordToggleHiddenAnnouncement", required: false }] }] } });
+
+/**
+ * The `NgpPassword` directive is a container for a password field and its visibility toggle.
+ */
+class NgpPassword {
+    constructor() {
+        /**
+         * Whether the password is visible.
+         */
+        this.visible = input(undefined, { ...(ngDevMode ? { debugName: "visible" } : /* istanbul ignore next */ {}), alias: 'ngpPasswordVisible',
+            transform: booleanAttribute });
+        /**
+         * The default visibility state for uncontrolled usage.
+         * @default false
+         */
+        this.defaultVisible = input(false, { ...(ngDevMode ? { debugName: "defaultVisible" } : /* istanbul ignore next */ {}), alias: 'ngpPasswordDefaultVisible',
+            transform: booleanAttribute });
+        /**
+         * Emits when the visibility state changes.
+         */
+        this.visibleChange = output({
+            alias: 'ngpPasswordVisibleChange',
+        });
+        /**
+         * The state for the password primitive.
+         */
+        this.state = ngpPassword({
+            visible: this.visible,
+            defaultVisible: this.defaultVisible,
+            onVisibleChange: value => this.visibleChange.emit(value),
+        });
+        /**
+         * Whether the password is currently visible.
+         */
+        this.isVisible = computed(() => this.state.visible(), ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
+    }
+    /**
+     * Toggle the visibility of the password.
+     */
+    toggle() {
+        this.state.toggle();
+    }
+    /**
+     * Set the visibility of the password.
+     */
+    setVisible(value, options) {
+        this.state.setVisible(value, options);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpPassword, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: NgpPassword, isStandalone: true, selector: "[ngpPassword]", inputs: { visible: { classPropertyName: "visible", publicName: "ngpPasswordVisible", isSignal: true, isRequired: false, transformFunction: null }, defaultVisible: { classPropertyName: "defaultVisible", publicName: "ngpPasswordDefaultVisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "ngpPasswordVisibleChange" }, providers: [providePasswordState()], exportAs: ["ngpPassword"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpPassword, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpPassword]',
+                    exportAs: 'ngpPassword',
+                    providers: [providePasswordState()],
+                }]
+        }], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPasswordVisible", required: false }] }], defaultVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPasswordDefaultVisible", required: false }] }], visibleChange: [{ type: i0.Output, args: ["ngpPasswordVisibleChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgpPassword, NgpPasswordConfigToken, NgpPasswordInput, NgpPasswordToggle, defaultPasswordConfig, injectPasswordConfig, injectPasswordInputState, injectPasswordState, injectPasswordToggleState, ngpPassword, ngpPasswordInput, ngpPasswordToggle, providePasswordConfig, providePasswordInputState, providePasswordState, providePasswordToggleState };
+//# sourceMappingURL=ng-primitives-password.mjs.map

package/fesm2022/ng-primitives-password.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-primitives-password.mjs","sources":["../../../../packages/ng-primitives/password/src/config/password-config.ts","../../../../packages/ng-primitives/password/src/password/password-state.ts","../../../../packages/ng-primitives/password/src/password-input/password-input-state.ts","../../../../packages/ng-primitives/password/src/password-input/password-input.ts","../../../../packages/ng-primitives/password/src/password-toggle/password-toggle-state.ts","../../../../packages/ng-primitives/password/src/password-toggle/password-toggle.ts","../../../../packages/ng-primitives/password/src/password/password.ts","../../../../packages/ng-primitives/password/src/ng-primitives-password.ts"],"sourcesContent":["import { inject, InjectionToken, Provider } from '@angular/core';\n\nexport interface NgpPasswordConfig {\n  /**\n   * The accessible label for the toggle button when the password is hidden.\n   * @default 'Show password'\n   */\n  showLabel: string;\n\n  /**\n   * The accessible label for the toggle button when the password is visible.\n   * @default 'Hide password'\n   */\n  hideLabel: string;\n\n  /**\n   * The message announced to screen readers when the password becomes visible.\n   * @default 'Your password is shown'\n   */\n  shownAnnouncement: string;\n\n  /**\n   * The message announced to screen readers when the password becomes hidden.\n   * @default 'Your password is hidden'\n   */\n  hiddenAnnouncement: string;\n\n  /**\n   * Whether to opt the input out of password manager injection by default.\n   * @default false\n   */\n  ignorePasswordManagers: boolean;\n}\n\nexport const defaultPasswordConfig: NgpPasswordConfig = {\n  showLabel: 'Show password',\n  hideLabel: 'Hide password',\n  shownAnnouncement: 'Your password is shown',\n  hiddenAnnouncement: 'Your password is hidden',\n  ignorePasswordManagers: false,\n};\n\nexport const NgpPasswordConfigToken = new InjectionToken<NgpPasswordConfig>(\n  'NgpPasswordConfigToken',\n);\n\n/**\n * Provide the default Password configuration\n * @param config The Password configuration\n * @returns The provider\n */\nexport function providePasswordConfig(config: Partial<NgpPasswordConfig>): Provider[] {\n  return [\n    {\n      provide: NgpPasswordConfigToken,\n      useValue: { ...defaultPasswordConfig, ...config },\n    },\n  ];\n}\n\n/**\n * Inject the Password configuration\n * @returns The global Password configuration\n */\nexport function injectPasswordConfig(): NgpPasswordConfig {\n  return inject(NgpPasswordConfigToken, { optional: true }) ?? defaultPasswordConfig;\n}\n","import { computed, Signal, signal, WritableSignal } from '@angular/core';\nimport { injectElementRef } from 'ng-primitives/internal';\nimport {\n  controlled,\n  controlledState,\n  createPrimitive,\n  dataBinding,\n  deprecatedSetter,\n  SetterOptions,\n} from 'ng-primitives/state';\nimport { Observable } from 'rxjs';\n\n/**\n * Public state surface for the Password primitive.\n */\nexport interface NgpPasswordState {\n  /**\n   * Whether the password is currently visible.\n   */\n  readonly visible: WritableSignal<boolean>;\n  /**\n   * Emits when the visibility state changes.\n   */\n  readonly visibleChange: Observable<boolean>;\n  /**\n   * The id of the registered input, used to wire up `aria-controls`.\n   * @internal\n   */\n  readonly inputId: Signal<string | null>;\n  /**\n   * Toggle the visibility state.\n   */\n  toggle(): void;\n  /**\n   * Set the visibility state.\n   */\n  setVisible(value: boolean, options?: SetterOptions): void;\n  /**\n   * Set the default visibility state.\n   */\n  setDefaultVisible(value: boolean): void;\n  /**\n   * Register the password input with the container.\n   * @internal\n   */\n  registerInput(input: HTMLInputElement, id: Signal<string>): void;\n  /**\n   * Focus the registered input.\n   * @internal\n   */\n  focusInput(): void;\n}\n\n/**\n * Inputs for configuring the Password primitive.\n */\nexport interface NgpPasswordProps {\n  /**\n   * Whether the password is visible.\n   */\n  readonly visible: Signal<boolean | undefined>;\n  /**\n   * The default visibility state for uncontrolled usage.\n   */\n  readonly defaultVisible?: Signal<boolean>;\n  /**\n   * Callback fired when the visibility state changes.\n   */\n  readonly onVisibleChange?: (visible: boolean) => void;\n}\n\nexport const [NgpPasswordStateToken, ngpPassword, injectPasswordState, providePasswordState] =\n  createPrimitive(\n    'NgpPassword',\n    ({\n      visible: _visible,\n      defaultVisible: _defaultVisible,\n      onVisibleChange,\n    }: NgpPasswordProps): NgpPasswordState => {\n      const element = injectElementRef<HTMLElement>();\n      const defaultVisible = controlled(_defaultVisible, false);\n\n      const input = signal<HTMLInputElement | null>(null);\n      const inputId = signal<Signal<string> | null>(null);\n\n      const [visible, setVisible, visibleChange] = controlledState({\n        value: _visible,\n        defaultValue: defaultVisible,\n        onChange: onVisibleChange,\n      });\n\n      dataBinding(element, 'data-visible', visible);\n\n      function toggle(): void {\n        setVisible(!visible());\n      }\n\n      function registerInput(el: HTMLInputElement, id: Signal<string>): void {\n        input.set(el);\n        inputId.set(id);\n      }\n\n      function focusInput(): void {\n        input()?.focus();\n      }\n\n      return {\n        visible: deprecatedSetter(visible, 'setVisible', setVisible),\n        visibleChange,\n        inputId: computed(() => inputId()?.() ?? null),\n        toggle,\n        setVisible,\n        setDefaultVisible: defaultVisible.set,\n        registerInput,\n        focusInput,\n      } satisfies NgpPasswordState;\n    },\n  );\n","import { Signal, signal } from '@angular/core';\nimport { ngpInput, NgpInputState } from 'ng-primitives/input';\nimport { injectElementRef } from 'ng-primitives/internal';\nimport { attrBinding, createPrimitive, dataBinding, listener, onMount } from 'ng-primitives/state';\nimport { injectPasswordState } from '../password/password-state';\n\n/**\n * The state for the PasswordInput pattern, extending the Input state.\n */\nexport type NgpPasswordInputState = NgpInputState;\n\n/**\n * The props interface for the PasswordInput pattern.\n */\nexport interface NgpPasswordInputProps {\n  /**\n   * The id of the input.\n   */\n  readonly id?: Signal<string>;\n  /**\n   * Whether the input is disabled.\n   */\n  readonly disabled?: Signal<boolean>;\n  /**\n   * Whether to opt the input out of password manager injection.\n   */\n  readonly ignorePasswordManagers?: Signal<boolean>;\n}\n\nexport const [\n  NgpPasswordInputStateToken,\n  ngpPasswordInput,\n  injectPasswordInputState,\n  providePasswordInputState,\n] = createPrimitive(\n  'NgpPasswordInput',\n  ({\n    id,\n    disabled,\n    ignorePasswordManagers = signal(false),\n  }: NgpPasswordInputProps): NgpPasswordInputState => {\n    const element = injectElementRef<HTMLInputElement>();\n    const password = injectPasswordState();\n\n    // Compose ngpInput for form control, interactions, autofill and the id.\n    const input = ngpInput({ id, disabled });\n\n    // Register with the container for aria-controls.\n    password().registerInput(element.nativeElement, input.id);\n\n    // Consumers keep type=\"password\" in the markup so the field renders masked\n    // from the start; this drives the toggle to text and back.\n    attrBinding(element, 'type', () => (password().visible() ? 'text' : 'password'));\n    dataBinding(element, 'data-visible', () => password().visible());\n\n    // Opt out of password manager injection when requested.\n    attrBinding(element, 'data-1p-ignore', () => (ignorePasswordManagers() ? '' : null));\n    attrBinding(element, 'data-lpignore', () => (ignorePasswordManagers() ? 'true' : null));\n    attrBinding(element, 'data-bwignore', () => (ignorePasswordManagers() ? '' : null));\n\n    // Reset to hidden on submit so browsers don't cache a plaintext field.\n    onMount(() => {\n      const form = element.nativeElement.form;\n      if (form) {\n        listener(form, 'submit', () => password().setVisible(false));\n      }\n    });\n\n    return input;\n  },\n);\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, Directive, input } from '@angular/core';\nimport { uniqueId } from 'ng-primitives/utils';\nimport { injectPasswordConfig } from '../config/password-config';\nimport { ngpPasswordInput, providePasswordInputState } from './password-input-state';\n\n/**\n * Apply the `ngpPasswordInput` directive to an `input` element within an `ngpPassword` container.\n * It is a complete input (form control, interactions, autofill) with password visibility toggling\n * layered on top, so it does not need to be combined with `ngpInput`.\n */\n@Directive({\n  selector: 'input[ngpPasswordInput]',\n  exportAs: 'ngpPasswordInput',\n  providers: [providePasswordInputState()],\n})\nexport class NgpPasswordInput {\n  /**\n   * Access the global password configuration.\n   */\n  private readonly config = injectPasswordConfig();\n\n  /**\n   * The id of the input.\n   */\n  readonly id = input<string>(uniqueId('ngp-password-input'));\n\n  /**\n   * Whether the input is disabled.\n   */\n  readonly disabled = input<boolean, BooleanInput>(false, {\n    transform: booleanAttribute,\n  });\n\n  /**\n   * Whether to opt the input out of password manager injection\n   * (1Password, LastPass, Bitwarden, etc.).\n   */\n  readonly ignorePasswordManagers = input<boolean, BooleanInput>(\n    this.config.ignorePasswordManagers,\n    {\n      alias: 'ngpPasswordInputIgnorePasswordManagers',\n      transform: booleanAttribute,\n    },\n  );\n\n  /**\n   * The state for the password input primitive.\n   */\n  protected readonly state = ngpPasswordInput({\n    id: this.id,\n    disabled: this.disabled,\n    ignorePasswordManagers: this.ignorePasswordManagers,\n  });\n}\n","import { LiveAnnouncer } from '@angular/cdk/a11y';\nimport { inject, Signal, signal } from '@angular/core';\nimport { injectElementRef } from 'ng-primitives/internal';\nimport { attrBinding, createPrimitive, dataBinding, listener } from 'ng-primitives/state';\nimport { injectPasswordState } from '../password/password-state';\n\n/**\n * The state interface for the PasswordToggle pattern.\n */\nexport interface NgpPasswordToggleState {\n  /**\n   * Toggle the visibility of the password.\n   */\n  toggle(): void;\n}\n\n/**\n * The props interface for the PasswordToggle pattern.\n */\nexport interface NgpPasswordToggleProps {\n  /**\n   * The accessible label shown when the password is hidden.\n   */\n  readonly showLabel: Signal<string>;\n  /**\n   * The accessible label shown when the password is visible.\n   */\n  readonly hideLabel: Signal<string>;\n  /**\n   * The message announced when the password becomes visible.\n   */\n  readonly shownAnnouncement: Signal<string>;\n  /**\n   * The message announced when the password becomes hidden.\n   */\n  readonly hiddenAnnouncement: Signal<string>;\n}\n\nexport const [\n  NgpPasswordToggleStateToken,\n  ngpPasswordToggle,\n  injectPasswordToggleState,\n  providePasswordToggleState,\n] = createPrimitive(\n  'NgpPasswordToggle',\n  ({\n    showLabel,\n    hideLabel,\n    shownAnnouncement,\n    hiddenAnnouncement,\n  }: NgpPasswordToggleProps): NgpPasswordToggleState => {\n    const element = injectElementRef<HTMLButtonElement>();\n    const password = injectPasswordState();\n    const announcer = inject(LiveAnnouncer);\n\n    // Pointer activation returns focus to the input; keyboard keeps it on the button.\n    const pointerActivated = signal(false);\n\n    attrBinding(element, 'type', 'button');\n    attrBinding(element, 'aria-controls', () => password().inputId());\n    attrBinding(element, 'aria-label', () => {\n      // Defer to the button's own text if it has any.\n      if ((element.nativeElement.textContent ?? '').trim().length > 0) {\n        return null;\n      }\n      return password().visible() ? hideLabel() : showLabel();\n    });\n    dataBinding(element, 'data-visible', () => password().visible());\n\n    listener(element, 'pointerdown', () => pointerActivated.set(true));\n    listener(element, 'click', () => toggle());\n\n    function toggle(): void {\n      const state = password();\n      // Announce the intended state: in controlled mode state.visible() may not\n      // reflect the new value until the parent propagates it back.\n      const willBeVisible = !state.visible();\n      state.toggle();\n\n      announcer.announce(willBeVisible ? shownAnnouncement() : hiddenAnnouncement());\n\n      if (pointerActivated()) {\n        state.focusInput();\n      }\n      pointerActivated.set(false);\n    }\n\n    return { toggle } satisfies NgpPasswordToggleState;\n  },\n);\n","import { Directive, input } from '@angular/core';\nimport { injectPasswordConfig } from '../config/password-config';\nimport { ngpPasswordToggle, providePasswordToggleState } from './password-toggle-state';\n\n/**\n * Apply the `ngpPasswordToggle` directive to a `button` element to toggle the visibility of the\n * password within an `ngpPassword` container.\n */\n@Directive({\n  selector: 'button[ngpPasswordToggle]',\n  exportAs: 'ngpPasswordToggle',\n  providers: [providePasswordToggleState()],\n})\nexport class NgpPasswordToggle {\n  /**\n   * Access the global password configuration.\n   */\n  private readonly config = injectPasswordConfig();\n\n  /**\n   * The accessible label shown when the password is hidden.\n   */\n  readonly showLabel = input(this.config.showLabel, { alias: 'ngpPasswordToggleShowLabel' });\n\n  /**\n   * The accessible label shown when the password is visible.\n   */\n  readonly hideLabel = input(this.config.hideLabel, { alias: 'ngpPasswordToggleHideLabel' });\n\n  /**\n   * The message announced when the password becomes visible.\n   */\n  readonly shownAnnouncement = input(this.config.shownAnnouncement, {\n    alias: 'ngpPasswordToggleShownAnnouncement',\n  });\n\n  /**\n   * The message announced when the password becomes hidden.\n   */\n  readonly hiddenAnnouncement = input(this.config.hiddenAnnouncement, {\n    alias: 'ngpPasswordToggleHiddenAnnouncement',\n  });\n\n  /**\n   * The state for the password toggle primitive.\n   */\n  protected readonly state = ngpPasswordToggle({\n    showLabel: this.showLabel,\n    hideLabel: this.hideLabel,\n    shownAnnouncement: this.shownAnnouncement,\n    hiddenAnnouncement: this.hiddenAnnouncement,\n  });\n\n  /**\n   * Toggle the visibility of the password.\n   */\n  toggle(): void {\n    this.state.toggle();\n  }\n}\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, computed, Directive, input, output, Signal } from '@angular/core';\nimport { SetterOptions } from 'ng-primitives/state';\nimport { ngpPassword, providePasswordState } from './password-state';\n\n/**\n * The `NgpPassword` directive is a container for a password field and its visibility toggle.\n */\n@Directive({\n  selector: '[ngpPassword]',\n  exportAs: 'ngpPassword',\n  providers: [providePasswordState()],\n})\nexport class NgpPassword {\n  /**\n   * Whether the password is visible.\n   */\n  readonly visible = input<boolean | undefined, BooleanInput>(undefined, {\n    alias: 'ngpPasswordVisible',\n    transform: booleanAttribute,\n  });\n\n  /**\n   * The default visibility state for uncontrolled usage.\n   * @default false\n   */\n  readonly defaultVisible = input<boolean, BooleanInput>(false, {\n    alias: 'ngpPasswordDefaultVisible',\n    transform: booleanAttribute,\n  });\n\n  /**\n   * Emits when the visibility state changes.\n   */\n  readonly visibleChange = output<boolean>({\n    alias: 'ngpPasswordVisibleChange',\n  });\n\n  /**\n   * The state for the password primitive.\n   */\n  protected readonly state = ngpPassword({\n    visible: this.visible,\n    defaultVisible: this.defaultVisible,\n    onVisibleChange: value => this.visibleChange.emit(value),\n  });\n\n  /**\n   * Whether the password is currently visible.\n   */\n  readonly isVisible: Signal<boolean> = computed(() => this.state.visible());\n\n  /**\n   * Toggle the visibility of the password.\n   */\n  toggle(): void {\n    this.state.toggle();\n  }\n\n  /**\n   * Set the visibility of the password.\n   */\n  setVisible(value: boolean, options?: SetterOptions): void {\n    this.state.setVisible(value, options);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "ng-primitives",
   "description": "Angular Primitives is a low-level headless UI component library with a focus on accessibility, customization, and developer experience. ",
   "license": "Apache-2.0",
-  "version": "0.125.0",
+  "version": "0.126.0",
   "keywords": [
     "angular",
     "primitives",
@@ -183,6 +183,10 @@
       "types": "./types/ng-primitives-pagination.d.ts",
       "default": "./fesm2022/ng-primitives-pagination.mjs"
     },
+    "./password": {
+      "types": "./types/ng-primitives-password.d.ts",
+      "default": "./fesm2022/ng-primitives-password.mjs"
+    },
     "./popover": {
       "types": "./types/ng-primitives-popover.d.ts",
       "default": "./fesm2022/ng-primitives-popover.mjs"

package/password/README.md

@@ -0,0 +1,3 @@
+# ng-primitives/password
+
+Secondary entry point of `ng-primitives`. It can be used by importing from `ng-primitives/password`.

package/schematics/ng-generate/templates/password/password.__fileSuffix@dasherize__.ts.template

@@ -0,0 +1,141 @@
+import { Component, input, signal } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideEye, lucideEyeOff } from '@ng-icons/lucide';
+import { NgpButton } from 'ng-primitives/button';
+import {
+  injectPasswordState,
+  NgpPassword,
+  NgpPasswordInput,
+  NgpPasswordToggle,
+} from 'ng-primitives/password';
+import { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';
+
+@Component({
+  selector: '<%= prefix %>-password',
+  hostDirectives: [NgpPassword],
+  imports: [NgIcon, NgpPasswordInput, NgpPasswordToggle, NgpButton],
+  providers: [provideValueAccessor(Password<%= componentSuffix %>), provideIcons({ lucideEye, lucideEyeOff })],
+  template: `
+    <input
+      [value]="value()"
+      [placeholder]="placeholder()"
+      (input)="onValueChange($event)"
+      ngpPasswordInput
+      type="password"
+      autocomplete="current-password"
+    />
+    <button ngpButton ngpPasswordToggle>
+      <ng-icon [name]="state().visible() ? 'lucideEyeOff' : 'lucideEye'" />
+    </button>
+  `,
+  styles: `
+/* These styles rely on CSS variables that can be imported from ng-primitives/example-theme/index.css in your global styles */
+
+    :host {
+      display: block;
+      position: relative;
+    }
+
+    [ngpPasswordInput] {
+      height: 2.125rem;
+      width: 100%;
+      border-radius: 0.5rem;
+      padding: 0 40px 0 12px;
+      border: none;
+      background: var(--ngp-background);
+      color: var(--ngp-text-primary);
+      font-size: 0.875rem;
+      letter-spacing: -0.006em;
+      box-shadow: var(--ngp-input-shadow);
+      outline: none;
+    }
+
+    [ngpPasswordInput][data-focus] {
+      outline: 2px solid var(--ngp-focus-ring);
+      outline-offset: 2px;
+    }
+
+    [ngpPasswordInput]::placeholder {
+      color: var(--ngp-text-placeholder);
+    }
+
+    [ngpPasswordToggle] {
+      position: absolute;
+      top: 0;
+      right: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 2.125rem;
+      width: 2.125rem;
+      border: none;
+      border-radius: 0.5rem;
+      background-color: transparent;
+      color: var(--ngp-text-tertiary);
+      font-size: 1.125rem;
+      cursor: pointer;
+      outline: none;
+      transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    [ngpPasswordToggle][data-hover] {
+      color: var(--ngp-text-secondary);
+    }
+
+    [ngpPasswordToggle][data-visible] {
+      color: var(--ngp-primary);
+    }
+
+    [ngpPasswordToggle][data-focus-visible] {
+      outline: 2px solid var(--ngp-focus-ring);
+      outline-offset: -2px;
+    }
+  `,
+  host: {
+    '(focusout)': 'onFocusOut($event)',
+  },
+})
+export class Password<%= componentSuffix %> implements ControlValueAccessor {
+  /** Access the password state to read the visibility. */
+  protected readonly state = injectPasswordState();
+
+  /** The placeholder text */
+  readonly placeholder = input<string>('');
+
+  /** The current value */
+  protected value = signal<string>('');
+
+  /** The function to call when the value changes */
+  private onChange?: ChangeFn<string>;
+
+  /** The function to call when the control is touched */
+  protected onTouched?: TouchedFn;
+
+  writeValue(value: string): void {
+    this.value.set(value);
+  }
+
+  registerOnChange(fn: ChangeFn<string>): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: TouchedFn): void {
+    this.onTouched = fn;
+  }
+
+  protected onValueChange(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    this.value.set(input.value);
+    this.onChange?.(input.value);
+  }
+
+  protected onFocusOut(event: FocusEvent): void {
+    // only mark as touched when focus leaves the component, not when moving
+    // between the input and the toggle button
+    const host = event.currentTarget as HTMLElement;
+    if (!host.contains(event.relatedTarget as Node | null)) {
+      this.onTouched?.();
+    }
+  }
+}

package/types/ng-primitives-password.d.ts

@@ -0,0 +1,296 @@
+import * as _angular_core from '@angular/core';
+import { InjectionToken, Provider, Signal, WritableSignal } from '@angular/core';
+import * as ng_primitives_input from 'ng-primitives/input';
+import { NgpInputState } from 'ng-primitives/input';
+import { BooleanInput } from '@angular/cdk/coercion';
+import * as ng_primitives_state from 'ng-primitives/state';
+import { SetterOptions } from 'ng-primitives/state';
+import * as ng_primitives_password from 'ng-primitives/password';
+import { Observable } from 'rxjs';
+
+interface NgpPasswordConfig {
+    /**
+     * The accessible label for the toggle button when the password is hidden.
+     * @default 'Show password'
+     */
+    showLabel: string;
+    /**
+     * The accessible label for the toggle button when the password is visible.
+     * @default 'Hide password'
+     */
+    hideLabel: string;
+    /**
+     * The message announced to screen readers when the password becomes visible.
+     * @default 'Your password is shown'
+     */
+    shownAnnouncement: string;
+    /**
+     * The message announced to screen readers when the password becomes hidden.
+     * @default 'Your password is hidden'
+     */
+    hiddenAnnouncement: string;
+    /**
+     * Whether to opt the input out of password manager injection by default.
+     * @default false
+     */
+    ignorePasswordManagers: boolean;
+}
+declare const defaultPasswordConfig: NgpPasswordConfig;
+declare const NgpPasswordConfigToken: InjectionToken<NgpPasswordConfig>;
+/**
+ * Provide the default Password configuration
+ * @param config The Password configuration
+ * @returns The provider
+ */
+declare function providePasswordConfig(config: Partial<NgpPasswordConfig>): Provider[];
+/**
+ * Inject the Password configuration
+ * @returns The global Password configuration
+ */
+declare function injectPasswordConfig(): NgpPasswordConfig;
+
+/**
+ * Apply the `ngpPasswordInput` directive to an `input` element within an `ngpPassword` container.
+ * It is a complete input (form control, interactions, autofill) with password visibility toggling
+ * layered on top, so it does not need to be combined with `ngpInput`.
+ */
+declare class NgpPasswordInput {
+    /**
+     * Access the global password configuration.
+     */
+    private readonly config;
+    /**
+     * The id of the input.
+     */
+    readonly id: _angular_core.InputSignal<string>;
+    /**
+     * Whether the input is disabled.
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Whether to opt the input out of password manager injection
+     * (1Password, LastPass, Bitwarden, etc.).
+     */
+    readonly ignorePasswordManagers: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * The state for the password input primitive.
+     */
+    protected readonly state: ng_primitives_input.NgpInputState;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpPasswordInput, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpPasswordInput, "input[ngpPasswordInput]", ["ngpPasswordInput"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ignorePasswordManagers": { "alias": "ngpPasswordInputIgnorePasswordManagers"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * The state for the PasswordInput pattern, extending the Input state.
+ */
+type NgpPasswordInputState = NgpInputState;
+/**
+ * The props interface for the PasswordInput pattern.
+ */
+interface NgpPasswordInputProps {
+    /**
+     * The id of the input.
+     */
+    readonly id?: Signal<string>;
+    /**
+     * Whether the input is disabled.
+     */
+    readonly disabled?: Signal<boolean>;
+    /**
+     * Whether to opt the input out of password manager injection.
+     */
+    readonly ignorePasswordManagers?: Signal<boolean>;
+}
+declare const ngpPasswordInput: ({ id, disabled, ignorePasswordManagers, }: NgpPasswordInputProps) => NgpPasswordInputState;
+declare const injectPasswordInputState: {
+    (): Signal<NgpInputState>;
+    (options: ng_primitives_state.StateInjectionOptions): Signal<NgpInputState | null>;
+    (options?: ng_primitives_state.StateInjectionOptions): Signal<NgpInputState> | Signal<NgpInputState | null>;
+};
+declare const providePasswordInputState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
+
+/**
+ * Apply the `ngpPasswordToggle` directive to a `button` element to toggle the visibility of the
+ * password within an `ngpPassword` container.
+ */
+declare class NgpPasswordToggle {
+    /**
+     * Access the global password configuration.
+     */
+    private readonly config;
+    /**
+     * The accessible label shown when the password is hidden.
+     */
+    readonly showLabel: _angular_core.InputSignal<string>;
+    /**
+     * The accessible label shown when the password is visible.
+     */
+    readonly hideLabel: _angular_core.InputSignal<string>;
+    /**
+     * The message announced when the password becomes visible.
+     */
+    readonly shownAnnouncement: _angular_core.InputSignal<string>;
+    /**
+     * The message announced when the password becomes hidden.
+     */
+    readonly hiddenAnnouncement: _angular_core.InputSignal<string>;
+    /**
+     * The state for the password toggle primitive.
+     */
+    protected readonly state: ng_primitives_password.NgpPasswordToggleState;
+    /**
+     * Toggle the visibility of the password.
+     */
+    toggle(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpPasswordToggle, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpPasswordToggle, "button[ngpPasswordToggle]", ["ngpPasswordToggle"], { "showLabel": { "alias": "ngpPasswordToggleShowLabel"; "required": false; "isSignal": true; }; "hideLabel": { "alias": "ngpPasswordToggleHideLabel"; "required": false; "isSignal": true; }; "shownAnnouncement": { "alias": "ngpPasswordToggleShownAnnouncement"; "required": false; "isSignal": true; }; "hiddenAnnouncement": { "alias": "ngpPasswordToggleHiddenAnnouncement"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * The state interface for the PasswordToggle pattern.
+ */
+interface NgpPasswordToggleState {
+    /**
+     * Toggle the visibility of the password.
+     */
+    toggle(): void;
+}
+/**
+ * The props interface for the PasswordToggle pattern.
+ */
+interface NgpPasswordToggleProps {
+    /**
+     * The accessible label shown when the password is hidden.
+     */
+    readonly showLabel: Signal<string>;
+    /**
+     * The accessible label shown when the password is visible.
+     */
+    readonly hideLabel: Signal<string>;
+    /**
+     * The message announced when the password becomes visible.
+     */
+    readonly shownAnnouncement: Signal<string>;
+    /**
+     * The message announced when the password becomes hidden.
+     */
+    readonly hiddenAnnouncement: Signal<string>;
+}
+declare const ngpPasswordToggle: ({ showLabel, hideLabel, shownAnnouncement, hiddenAnnouncement, }: NgpPasswordToggleProps) => NgpPasswordToggleState;
+declare const injectPasswordToggleState: {
+    (): Signal<NgpPasswordToggleState>;
+    (options: ng_primitives_state.StateInjectionOptions): Signal<NgpPasswordToggleState | null>;
+    (options?: ng_primitives_state.StateInjectionOptions): Signal<NgpPasswordToggleState> | Signal<NgpPasswordToggleState | null>;
+};
+declare const providePasswordToggleState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
+
+/**
+ * The `NgpPassword` directive is a container for a password field and its visibility toggle.
+ */
+declare class NgpPassword {
+    /**
+     * Whether the password is visible.
+     */
+    readonly visible: _angular_core.InputSignalWithTransform<boolean | undefined, BooleanInput>;
+    /**
+     * The default visibility state for uncontrolled usage.
+     * @default false
+     */
+    readonly defaultVisible: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Emits when the visibility state changes.
+     */
+    readonly visibleChange: _angular_core.OutputEmitterRef<boolean>;
+    /**
+     * The state for the password primitive.
+     */
+    protected readonly state: ng_primitives_password.NgpPasswordState;
+    /**
+     * Whether the password is currently visible.
+     */
+    readonly isVisible: Signal<boolean>;
+    /**
+     * Toggle the visibility of the password.
+     */
+    toggle(): void;
+    /**
+     * Set the visibility of the password.
+     */
+    setVisible(value: boolean, options?: SetterOptions): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpPassword, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpPassword, "[ngpPassword]", ["ngpPassword"], { "visible": { "alias": "ngpPasswordVisible"; "required": false; "isSignal": true; }; "defaultVisible": { "alias": "ngpPasswordDefaultVisible"; "required": false; "isSignal": true; }; }, { "visibleChange": "ngpPasswordVisibleChange"; }, never, never, true, never>;
+}
+
+/**
+ * Public state surface for the Password primitive.
+ */
+interface NgpPasswordState {
+    /**
+     * Whether the password is currently visible.
+     */
+    readonly visible: WritableSignal<boolean>;
+    /**
+     * Emits when the visibility state changes.
+     */
+    readonly visibleChange: Observable<boolean>;
+    /**
+     * The id of the registered input, used to wire up `aria-controls`.
+     * @internal
+     */
+    readonly inputId: Signal<string | null>;
+    /**
+     * Toggle the visibility state.
+     */
+    toggle(): void;
+    /**
+     * Set the visibility state.
+     */
+    setVisible(value: boolean, options?: SetterOptions): void;
+    /**
+     * Set the default visibility state.
+     */
+    setDefaultVisible(value: boolean): void;
+    /**
+     * Register the password input with the container.
+     * @internal
+     */
+    registerInput(input: HTMLInputElement, id: Signal<string>): void;
+    /**
+     * Focus the registered input.
+     * @internal
+     */
+    focusInput(): void;
+}
+/**
+ * Inputs for configuring the Password primitive.
+ */
+interface NgpPasswordProps {
+    /**
+     * Whether the password is visible.
+     */
+    readonly visible: Signal<boolean | undefined>;
+    /**
+     * The default visibility state for uncontrolled usage.
+     */
+    readonly defaultVisible?: Signal<boolean>;
+    /**
+     * Callback fired when the visibility state changes.
+     */
+    readonly onVisibleChange?: (visible: boolean) => void;
+}
+declare const ngpPassword: ({ visible: _visible, defaultVisible: _defaultVisible, onVisibleChange, }: NgpPasswordProps) => NgpPasswordState;
+declare const injectPasswordState: {
+    (): Signal<NgpPasswordState>;
+    (options: ng_primitives_state.StateInjectionOptions): Signal<NgpPasswordState | null>;
+    (options?: ng_primitives_state.StateInjectionOptions): Signal<NgpPasswordState> | Signal<NgpPasswordState | null>;
+};
+declare const providePasswordState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
+
+export { NgpPassword, NgpPasswordConfigToken, NgpPasswordInput, NgpPasswordToggle, defaultPasswordConfig, injectPasswordConfig, injectPasswordInputState, injectPasswordState, injectPasswordToggleState, ngpPassword, ngpPasswordInput, ngpPasswordToggle, providePasswordConfig, providePasswordInputState, providePasswordState, providePasswordToggleState };
+export type { NgpPasswordConfig, NgpPasswordInputProps, NgpPasswordInputState, NgpPasswordProps, NgpPasswordState, NgpPasswordToggleProps, NgpPasswordToggleState };