// #region Imports
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { DomServiceLocator } from '../../../../Dom/Dom';
import { Emit } from '../../../../Events/Decorators/EmitDecorator';
import { HTMLElementEventEmitter } from '@breadstone/mosaik-elements';
import { Appearanceable } from '../../../Behaviors/Appearanceable';
import { Clearable } from '../../../Behaviors/Clearable';
import { Disableable } from '../../../Behaviors/Disableable';
import { Invalidable } from '../../../Behaviors/Invalidable';
import { Labelable } from '../../../Behaviors/Labelable';
import { Slottable } from '../../../Behaviors/Slottable';
import { Valueable } from '../../../Behaviors/Valueable';
import { Variantable } from '../../../Behaviors/Variantable';
import { Attribute } from '../../../Decorators/AttributeDecorator';
import { Component } from '../../../Decorators/ComponentDecorator';
import { ButtonElement } from '../../Buttons/Button/ButtonElement';
import { FocusRingElement } from '../../Primitives/FocusRing/FocusRingElement';
import { InputBaseElement } from '../Abstracts/InputBase';
import { passwordBoxElementTemplate } from './PasswordBoxElementTemplate';
import { passwordBoxElementJoyStyle } from './Themes/PasswordBoxElement.Joy';
import { passwordBoxElementMemphisStyle } from './Themes/PasswordBoxElement.Memphis';
import { passwordBoxElementCosmopolitanStyle } from './Themes/PasswordBoxElement.Cosmopolitan';
import { Themeable } from '../../../Behaviors/Themeable';
import { TextAlignment } from '../../../Types/TextAlignment';
// #endregion
/**
 * Password Box - A secure input control designed for password entry with visibility toggle functionality.
 *
 * @description
 * The Password Box component provides a secure interface for entering passwords and sensitive information.
 * It masks input characters by default to maintain privacy and security, while offering a reveal/conceal toggle
 * that allows users to temporarily view their input for verification. Features include automatic password masking,
 * reveal/conceal button with appropriate icons, keyboard accessibility, form validation support, and events for
 * tracking visibility state changes. Essential for login forms, registration pages, and any interface requiring
 * secure text input.
 *
 * @name Password Box
 * @element mosaik-passwordbox
 * @category Inputs
 *
 * @slot prefix - Content placed before the input field.
 * @slot suffix - Content placed after the input field.
 *
 * @csspart focusRing - The focus ring indicator.
 * @csspart prefix - The prefix content container.
 * @csspart inner - The inner container wrapper.
 * @csspart label - The floating label element.
 * @csspart input - The password input field.
 * @csspart suffix - The suffix content container.
 * @csspart revealButton - The password reveal/conceal button.
 *
 * @cssprop {String} --password-box-background-color - The background color.
 * @cssprop {String} --password-box-border-color - The border color.
 * @cssprop {String} --password-box-border-radius - The border radius.
 * @cssprop {String} --password-box-border-style - The border style.
 * @cssprop {String} --password-box-border-width - The border width.
 * @cssprop {String} --password-box-font-family - The font family.
 * @cssprop {String} --password-box-font-size - The font size.
 * @cssprop {String} --password-box-font-weight - The font weight.
 * @cssprop {String} --password-box-foreground-color - The foreground color.
 * @cssprop {String} --password-box-gap - The gap between elements.
 * @cssprop {String} --password-box-height - The height.
 * @cssprop {String} --password-box-padding-bottom - The padding bottom.
 * @cssprop {String} --password-box-padding-left - The padding left.
 * @cssprop {String} --password-box-padding-right - The padding right.
 * @cssprop {String} --password-box-padding-top - The padding top.
 * @cssprop {String} --password-box-shadow - The shadow.
 * @cssprop {String} --password-box-transition-duration - The transition duration.
 * @cssprop {String} --password-box-width - The width.
 *
 * @dependency mosaik-focus-ring - Used for focus indication.
 * @dependency mosaik-button - Used for the reveal/conceal button.
 *
 * @fires revealed - Fired when the password is shown.
 * @fires concealed - Fired when the password is hidden.
 *
 * @example
 * ```html
 * <mosaik-passwordbox
 *   label="Password"
 *   placeholder="Enter your password"
 *   required>
 * </mosaik-passwordbox>
 * ```
 *
 * @public
 */
let PasswordBoxElement = class PasswordBoxElement extends Themeable(Slottable(Clearable(Disableable(Invalidable(Valueable(Variantable(Labelable(Appearanceable(InputBaseElement))))))))) {
    // #region Fields
    _revealed;
    _concealed;
    _inputElement;
    _value;
    _readonly;
    _required;
    _autofocus;
    _name;
    _pattern;
    _placeholder;
    _autocomplete;
    _revealable;
    _isReveal;
    _textAlign;
    // #endregion
    // #region Ctor
    /**
     * @public
     */
    constructor() {
        super();
        this._value = '';
        this._readonly = false;
        this._required = false;
        this._autofocus = false;
        this._name = '';
        this._pattern = '';
        this._placeholder = '';
        this._autocomplete = false;
        this._revealable = false;
        this._isReveal = false;
        this._textAlign = TextAlignment.Left;
        this._revealed = new HTMLElementEventEmitter(this, 'revealed');
        this._concealed = new HTMLElementEventEmitter(this, 'concealed');
    }
    // #endregion
    // #region Properties
    /**
     * Returns the `{@link is}` property.
     * The `{@link is}` property represents natural name of this element.
     *
     * @public
     * @static
     * @readonly
     */
    static get is() {
        return 'mosaik-passwordbox';
    }
    /**
     * Gets or sets the `value` property.
     *
     * @public
     * @override
     */
    get value() {
        return this._value;
    }
    set value(value) {
        if (this._value !== value) {
            this._value = value;
            this.requestUpdate('value');
        }
    }
    /**
     * Gets or sets the `readonly` property.
     *
     * @public
     * @attr
     */
    get readonly() {
        return this._readonly;
    }
    set readonly(value) {
        if (this._readonly !== value) {
            this._readonly = value;
            this.requestUpdate('readonly');
        }
    }
    /**
     * Gets or sets the `required` property.
     *
     * @public
     * @attr
     */
    get required() {
        return this._required;
    }
    set required(value) {
        if (this._required !== value) {
            this._required = value;
            this.requestUpdate('required');
        }
    }
    /**
     * Gets or sets the `autofocus` property.
     *
     * @public
     * @override
     */
    get autofocus() {
        return this._autofocus;
    }
    set autofocus(value) {
        if (this._autofocus !== value) {
            this._autofocus = value;
            this.requestUpdate('autofocus');
        }
    }
    /**
     * Gets or sets the `name` property.
     *
     * @public
     * @attr
     */
    get name() {
        return this._name;
    }
    set name(value) {
        if (this._name !== value) {
            this._name = value;
            this.requestUpdate('name');
        }
    }
    /**
     * Gets or sets the `pattern` property.
     *
     * @public
     * @attr
     */
    get pattern() {
        return this._pattern;
    }
    set pattern(value) {
        if (this._pattern !== value) {
            this._pattern = value;
            this.requestUpdate('pattern');
        }
    }
    /**
     * Gets or sets the `placeholder` property.
     *
     * @public
     * @attr
     */
    get placeholder() {
        return this._placeholder;
    }
    set placeholder(value) {
        if (this._placeholder !== value) {
            this._placeholder = value;
            this.requestUpdate('placeholder');
        }
    }
    /**
     * Gets or sets the `autocomplete` property.
     *
     * @public
     * @attr
     */
    get autocomplete() {
        return this._autocomplete;
    }
    set autocomplete(value) {
        if (this._autocomplete !== value) {
            this._autocomplete = value;
            this.requestUpdate('autocomplete');
        }
    }
    /**
     * Gets or sets the `revealable` property.
     *
     * @public
     * @attr
     */
    get revealable() {
        return this._revealable;
    }
    set revealable(value) {
        if (this._revealable !== value) {
            this._revealable = value;
            this.requestUpdate('revealable');
        }
    }
    /**
     * Determines whether the element has a prefix or not.
     * The Prefix is a slot that is displayed before the input.
     *
     * @private
     * @readonly
     * @attr
     */
    get hasPrefix() {
        return this.hasSlotContent('prefix');
    }
    /**
     * Determines whether the element has a suffix or not.
     * The Suffix is a slot that is displayed after the input.
     *
     * @private
     * @readonly
     * @attr
     */
    get hasSuffix() {
        return this.hasSlotContent('suffix');
    }
    /**
     * Returns the `isReveal` property.
     *
     * @public
     * @attr
     */
    get isReveal() {
        return this._isReveal;
    }
    set isReveal(value) {
        if (this._isReveal !== value) {
            this._isReveal = value;
            this.requestUpdate('isReveal');
        }
    }
    /**
     * Determines the text alignment of the component.
     *
     * @public
     * @attr
     */
    get textAlign() {
        return this._textAlign;
    }
    set textAlign(value) {
        if (this._textAlign !== value) {
            this._textAlign = value;
            this.requestUpdate('textAlign');
        }
    }
    /**
     * Called when the password is shown.
     * Provides reference to `{@link IPasswordRevealedEventDetail}` as event detail.
     *
     * @public
     * @readonly
     * @eventProperty
     */
    get revealed() {
        return this._revealed;
    }
    /**
     * Called when the password is hidden.
     * Provides reference to `{@link IPasswordConcealedEventDetail}` as event detail.
     *
     * @public
     * @readonly
     * @eventProperty
     */
    get concealed() {
        return this._concealed;
    }
    // #endregion
    // #region Methods
    /**
     * @public
     * @override
     */
    focus() {
        if (this.shadowRoot) {
            DomServiceLocator.current.findDescendant(this.shadowRoot, 'input')?.focus();
        }
    }
    /**
     * @public
     * @override
     */
    blur() {
        if (this.shadowRoot) {
            DomServiceLocator.current.findDescendant(this.shadowRoot, 'input')?.blur();
        }
    }
    /**
     * Clears the value of the element but not the validation.
     *
     * @public
     * @override
     */
    clear(force) {
        const isCleared = super.clear(force);
        if (isCleared) {
            this.emit('change', {
                bubbles: true,
                composed: true
            });
        }
        return isCleared;
    }
    /**
     * Resets the value, all kinds of validation and errors.
     *
     * @public
     * @override
     */
    reset() {
        super.reset();
        this.clear();
        this.invalid = false;
    }
    /**
     * Checks the validity of the element and returns `true` if it is valid; otherwise, `false`.
     *
     * @public
     * @override
     */
    checkValidity() {
        return this.shadowRoot
            ? this._inputElement.checkValidity()
            : true;
    }
    /**
     * Shows the password.
     *
     * @public
     */
    reveal() {
        this.isReveal = true;
        this.onRevealed({});
    }
    /**
     * Hides the password.
     *
     * @public
     */
    conceal() {
        this.isReveal = false;
        this.onConcealed({});
    }
    /**
     * @template
     * @protected
     */
    onChange(event) {
        this.value = event.target.value;
        this.emit('change', { detail: this.value });
    }
    /**
     * @template
     * @protected
     * @override
     */
    onInput(event) {
        super.onInput(event);
        this.value = event.target.value;
        this.emit('input', { detail: this.value });
    }
    /**
     * @template
     * @protected
     * @override
     */
    onFocus(event) {
        super.onFocus(event);
        this.emit('focus', { detail: event });
    }
    /**
     * @template
     * @protected
     * @override
     */
    onBlur(event) {
        super.onBlur(event);
        this.emit('blur', { detail: event });
    }
    /**
     * @protected
     * @override
     */
    onApplyTemplate() {
        super.onApplyTemplate();
        this._inputElement = this.getTemplatePart('input');
    }
    /**
     * Emits the {@link revealed} event.
     *
     * @protected
     */
    onRevealed(args) {
        this._revealed.emit(args);
    }
    /**
     * Emits the {@link concealed} event.
     *
     * @protected
     */
    onConcealed(args) {
        this._concealed.emit(args);
    }
};
__decorate([
    Attribute({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], PasswordBoxElement.prototype, "value", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], PasswordBoxElement.prototype, "readonly", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], PasswordBoxElement.prototype, "required", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], PasswordBoxElement.prototype, "autofocus", null);
__decorate([
    Attribute({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], PasswordBoxElement.prototype, "name", null);
__decorate([
    Attribute({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], PasswordBoxElement.prototype, "pattern", null);
__decorate([
    Attribute({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], PasswordBoxElement.prototype, "placeholder", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], PasswordBoxElement.prototype, "autocomplete", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], PasswordBoxElement.prototype, "revealable", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [])
], PasswordBoxElement.prototype, "hasPrefix", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [])
], PasswordBoxElement.prototype, "hasSuffix", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], PasswordBoxElement.prototype, "isReveal", null);
__decorate([
    Attribute({ type: TextAlignment }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], PasswordBoxElement.prototype, "textAlign", null);
__decorate([
    Emit({ eventName: 'revealed' }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [])
], PasswordBoxElement.prototype, "revealed", null);
__decorate([
    Emit({ eventName: 'concealed' }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [])
], PasswordBoxElement.prototype, "concealed", null);
PasswordBoxElement = __decorate([
    Component({
        selector: 'mosaik-passwordbox',
        template: passwordBoxElementTemplate,
        themes: {
            joy: passwordBoxElementJoyStyle,
            memphis: passwordBoxElementMemphisStyle,
            cosmopolitan: passwordBoxElementCosmopolitanStyle
        },
        host: {
            tabIndex: '0'
        },
        options: {
            mode: 'open',
            delegatesFocus: true
        },
        imports: [
            FocusRingElement,
            ButtonElement
        ]
    }),
    __metadata("design:paramtypes", [])
], PasswordBoxElement);
export { PasswordBoxElement };
//# sourceMappingURL=PasswordBoxElement.js.map