import * as i0 from '@angular/core';
import { input, output, signal, Component, NgModule } from '@angular/core';
import { addIcons, elementShow, elementHide, SiIconComponent } from '@siemens/element-ng/icon';
import { t, SiTranslatePipe } from '@siemens/element-translate-ng/translate';

/**
 * Copyright (c) Siemens 2016 - 2025
 * SPDX-License-Identifier: MIT
 */
class SiPasswordToggleComponent {
    /**
     * Whether to show the visibility toggle icon.
     *
     * @defaultValue true
     */
    showVisibilityIcon = input(true);
    /**
     * Emits the `type` attribute for the `<input>` ('password' | 'text')
     * whenever the password visibility is getting toggled.
     */
    typeChange = output();
    /**
     * The aria-label (translatable) for the password show icon.
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_PASSWORD_TOGGLE.SHOW:show password`)
     * ```
     */
    showLabel = input(t(() => $localize `:@@SI_PASSWORD_TOGGLE.SHOW:show password`));
    /**
     * The aria-label (translatable) for the password hide icon.
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_PASSWORD_TOGGLE.HIDE:hide password`)
     * ```
     */
    hideLabel = input(t(() => $localize `:@@SI_PASSWORD_TOGGLE.HIDE:hide password`));
    showPassword = signal(false);
    icons = addIcons({ elementHide, elementShow });
    /** The `type` attribute for the `<input>` ('password' | 'text'). */
    get inputType() {
        return this.showPassword() ? 'text' : 'password';
    }
    toggle() {
        this.showPassword.set(!this.showPassword());
        this.typeChange.emit(this.inputType);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiPasswordToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiPasswordToggleComponent, isStandalone: true, selector: "si-password-toggle", inputs: { showVisibilityIcon: { classPropertyName: "showVisibilityIcon", publicName: "showVisibilityIcon", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { typeChange: "typeChange" }, host: { properties: { "class.show-visibility-icon": "showVisibilityIcon()" } }, ngImport: i0, template: "<ng-content />\n@if (showVisibilityIcon()) {\n  <button\n    type=\"button\"\n    class=\"btn btn-tertiary btn-circle btn-xs text-body password-visibility-icon\"\n    [attr.aria-label]=\"(showPassword() ? hideLabel() : showLabel()) | translate\"\n    (click)=\"toggle()\"\n  >\n    <si-icon [icon]=\"showPassword() ? icons.elementHide : icons.elementShow\" />\n  </button>\n}\n", styles: [":host{display:block;position:relative;inline-size:100%}:host.show-visibility-icon{--si-action-icon-offset: 28px}:host ::ng-deep input::-ms-reveal{display:none}.password-visibility-icon{position:absolute;font-size:1.5rem;inset-inline-end:8px;inset-block-start:4px;z-index:2}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiPasswordToggleComponent, decorators: [{
            type: Component,
            args: [{ selector: 'si-password-toggle', imports: [SiIconComponent, SiTranslatePipe], host: {
                        '[class.show-visibility-icon]': 'showVisibilityIcon()'
                    }, template: "<ng-content />\n@if (showVisibilityIcon()) {\n  <button\n    type=\"button\"\n    class=\"btn btn-tertiary btn-circle btn-xs text-body password-visibility-icon\"\n    [attr.aria-label]=\"(showPassword() ? hideLabel() : showLabel()) | translate\"\n    (click)=\"toggle()\"\n  >\n    <si-icon [icon]=\"showPassword() ? icons.elementHide : icons.elementShow\" />\n  </button>\n}\n", styles: [":host{display:block;position:relative;inline-size:100%}:host.show-visibility-icon{--si-action-icon-offset: 28px}:host ::ng-deep input::-ms-reveal{display:none}.password-visibility-icon{position:absolute;font-size:1.5rem;inset-inline-end:8px;inset-block-start:4px;z-index:2}\n"] }]
        }] });

/**
 * Copyright (c) Siemens 2016 - 2025
 * SPDX-License-Identifier: MIT
 */
class SiPasswordToggleModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiPasswordToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: SiPasswordToggleModule, imports: [SiPasswordToggleComponent], exports: [SiPasswordToggleComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiPasswordToggleModule, imports: [SiPasswordToggleComponent] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiPasswordToggleModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [SiPasswordToggleComponent],
                    exports: [SiPasswordToggleComponent]
                }]
        }] });

/**
 * Copyright (c) Siemens 2016 - 2025
 * SPDX-License-Identifier: MIT
 */

/**
 * Generated bundle index. Do not edit.
 */

export { SiPasswordToggleComponent, SiPasswordToggleModule };
//# sourceMappingURL=siemens-element-ng-password-toggle.mjs.map
