Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | 1x 32x 32x 32x 32x 32x 32x 32x 49x 2x 2x | /**
* Copyright (c) Siemens 2016 - 2026
* SPDX-License-Identifier: MIT
*/
import { Component, contentChild, input, output, signal } from '@angular/core';
import { NgControl } from '@angular/forms';
import { elementHide, elementShow } from '@siemens/element-icons';
import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
import { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';
@Component({
selector: 'si-password-toggle',
imports: [SiIconComponent, SiTranslatePipe],
templateUrl: './si-password-toggle.component.html',
styleUrl: './si-password-toggle.component.scss',
host: {
class: 'form-control-wrapper',
'[class.show-visibility-icon]': 'showVisibilityIcon()'
}
})
export class SiPasswordToggleComponent {
protected readonly ngControl = contentChild(NgControl);
/**
* Whether to show the visibility toggle icon.
*
* @defaultValue true
*/
readonly showVisibilityIcon = input(true);
/**
* Emits the `type` attribute for the `<input>` ('password' | 'text')
* whenever the password visibility is getting toggled.
*/
readonly typeChange = output<string>();
/**
* The aria-label (translatable) for the password show icon.
*
* @defaultValue
* ```
* t(() => $localize`:@@SI_PASSWORD_TOGGLE.SHOW:show password`)
* ```
*/
readonly 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`)
* ```
*/
readonly hideLabel = input(t(() => $localize`:@@SI_PASSWORD_TOGGLE.HIDE:hide password`));
protected readonly showPassword = signal<boolean>(false);
protected readonly icons = addIcons({ elementHide, elementShow });
/** The `type` attribute for the `<input>` ('password' | 'text'). */
get inputType(): string {
return this.showPassword() ? 'text' : 'password';
}
protected toggle(): void {
this.showPassword.set(!this.showPassword());
this.typeChange.emit(this.inputType);
}
}
|