// #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 { Appearanceable } from '../../../Behaviors/Appearanceable';
import { Busyable } from '../../../Behaviors/Busyable';
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 { UpDownSpinPosition } from '../../../Types/UpDownSpinPosition';
import { NumberKeyboardMode } from '../../../Types/VirtualKeyboardMode';
import { ButtonElement } from '../../Buttons/Button/ButtonElement';
import { NumberUpDownElement } from '../../Primitives/Abstracts/UpDown/NumberUpDownElement';
import { FocusRingElement } from '../../Primitives/FocusRing/FocusRingElement';
import { UpDownSpinnerElement } from '../../Primitives/UpDownSpinner/UpDownSpinnerElement';
import { numberBoxElementTemplate } from './NumberBoxElementTemplate';
import { numberBoxElementJoyStyle } from './Themes/NumberBoxElement.Joy';
import { numberBoxElementRetroStyle } from './Themes/NumberBoxElement.Retro';
import { numberBoxElementCosmopolitanStyle } from './Themes/NumberBoxElement.Cosmopolitan';
import { Themeable } from '../../../Behaviors/Themeable';
import { TextAlignment } from '../../../Types/TextAlignment';
// #endregion
/**
 * Number Box - A specialized input control for entering and manipulating numerical values.
 *
 * @description
 * The Number Box component provides a user-friendly interface for inputting numerical values with built-in validation,
 * formatting, and increment/decrement controls. It features spinner buttons for easy value adjustment, support for
 * minimum and maximum constraints, decimal precision control, and custom number formatting. The component handles
 * keyboard input validation, prevents invalid character entry, and provides accessibility features for screen readers.
 * Ideal for quantity selectors, price inputs, measurement fields, and any scenario requiring precise numeric input.
 *
 * @name Number Box
 * @element mosaik-numberbox
 * @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 number input field.
 * @csspart suffix - The suffix content container.
 * @csspart spinnerContainer - The spinner buttons container.
 *
 * @cssprop {String} --number-box-background-color - The background color.
 * @cssprop {String} --number-box-border-color - The border color.
 * @cssprop {String} --number-box-border-radius - The border radius.
 * @cssprop {String} --number-box-border-style - The border style.
 * @cssprop {String} --number-box-border-width - The border width.
 * @cssprop {String} --number-box-font-family - The font family.
 * @cssprop {String} --number-box-font-size - The font size.
 * @cssprop {String} --number-box-font-weight - The font weight.
 * @cssprop {String} --number-box-foreground-color - The foreground color.
 * @cssprop {String} --number-box-gap - The gap between elements.
 * @cssprop {String} --number-box-height - The height.
 * @cssprop {String} --number-box-padding-bottom - The padding bottom.
 * @cssprop {String} --number-box-padding-left - The padding left.
 * @cssprop {String} --number-box-padding-right - The padding right.
 * @cssprop {String} --number-box-padding-top - The padding top.
 * @cssprop {String} --number-box-shadow - The shadow.
 * @cssprop {String} --number-box-transition-duration - The transition duration.
 * @cssprop {String} --number-box-width - The width.
 *
 * @dependency mosaik-focus-ring - Used for focus indication.
 * @dependency mosaik-updownspinner - Used for increment/decrement controls.
 * @dependency mosaik-button - Used for spinner buttons.
 *
 * @fires change - Emitted when the value changes.
 * @fires input - Emitted when the value changes.
 * @fires focus - Emitted when the element receives focus.
 * @fires blur - Emitted when the element loses focus.
 *
 * @example
 * ```html
 * <mosaik-numberbox
 *   label="Quantity"
 *   min="1"
 *   max="100"
 *   step="1"
 *   value="5">
 * </mosaik-numberbox>
 * ```
 *
 * @public
 */
let NumberBoxElement = class NumberBoxElement extends Themeable(Slottable(Clearable(Appearanceable(Disableable(Invalidable(Valueable(Variantable(Labelable(Busyable(NumberUpDownElement)))))))))) {
    // #region Fields
    _inputElement;
    _value;
    _readonly;
    _required;
    _autofocus;
    _name;
    _keyboard;
    _pattern;
    _placeholder;
    _autocomplete;
    _spinPosition;
    _spinner;
    _textAlign;
    // #endregion
    // #region Ctor
    /**
     * @public
     */
    constructor() {
        super();
        this._value = null;
        this._readonly = false;
        this._required = false;
        this._autofocus = false;
        this._name = '';
        this._keyboard = NumberKeyboardMode.Numeric;
        this._pattern = '';
        this._placeholder = '';
        this._autocomplete = false;
        this._spinPosition = UpDownSpinPosition.After;
        this._textAlign = TextAlignment.Right;
        this._spinner = false;
    }
    // #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-numberbox';
    }
    /**
     * Gets or sets the `value` property.
     *
     * @public
     * @attr
     * @override
     */
    get value() {
        return this._value;
    }
    set value(value) {
        if (!isValidValue(value)) {
            value = null;
        }
        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
     * @attr
     * @override
     */
    get autofocus() {
        return this._autofocus;
    }
    set autofocus(value) {
        if (this._autofocus !== value) {
            this._autofocus = value;
            this.requestUpdate('autofocus');
        }
    }
    /**
     * Gets or sets the `keyboard` property.
     *
     * @public
     * @attr
     */
    get keyboard() {
        return this._keyboard;
    }
    set keyboard(value) {
        if (this._keyboard !== value) {
            this._keyboard = value;
            this.requestUpdate('keyboard');
        }
    }
    /**
     * 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
         */
    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 `spinPosition` property.
     *
     * @public
     * @attr
     */
    get spinPosition() {
        return this._spinPosition;
    }
    set spinPosition(value) {
        if (this._spinPosition !== value) {
            this._spinPosition = value;
            this.requestUpdate('spinPosition');
        }
    }
    /**
     * Gets or sets the `spinner` property.
     *
     * @public
     * @attr
     */
    get spinner() {
        return this._spinner;
    }
    set spinner(value) {
        if (this._spinner !== value) {
            this._spinner = value;
            this.requestUpdate('spinner');
        }
    }
    /**
     * 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');
        }
    }
    /**
     * 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');
    }
    // #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('input', {
                bubbles: true,
                composed: true
            });
            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;
    }
    /**
     * Will be called when the value of the element is changed.
     *
     * @private
     * @hidden
     * @template
     */
    onChange(event) {
        if (!event.target) {
            return;
        }
        if (event.target instanceof HTMLInputElement) {
            const inputValue = event.target.value;
            const maybeParsedValue = this.parser
                ? this.parser(inputValue)
                : inputValue;
            this.value = Number.parseFloat(maybeParsedValue ?? '');
        }
        this.emit('change', { detail: this.value });
    }
    /**
     * Will be called when the value of the element is changed.
     *
     * @private
     * @override
     * @hidden
     * @template
     */
    onInput(event) {
        if (!event.target) {
            return;
        }
        super.onInput(event);
        if (event.target instanceof HTMLInputElement) {
            const inputValue = event.target.value;
            const maybeParsedValue = this.parser
                ? this.parser(inputValue)
                : inputValue;
            this.value = Number.parseFloat(maybeParsedValue ?? '');
        }
        this.emit('input', { detail: this.value });
    }
    /**
     * Will be called when the element receives focus.
     *
     * @private
     * @override
     * @hidden
     * @template
     */
    onFocus(event) {
        super.onFocus(event);
        this.emit('focus', { detail: event });
    }
    /**
     * Will be called when the element loses focus.
     *
     * @private
     * @override
     * @hidden
     * @template
     */
    onBlur(event) {
        super.onBlur(event);
        this.emit('blur', { detail: event });
    }
    /**
     * @protected
     * @override
     */
    onApplyTemplate() {
        super.onApplyTemplate();
        this._inputElement = this.getTemplatePart('input');
    }
};
__decorate([
    Attribute({
        type: Number,
        converter: {
            fromAttribute: (value) => {
                const parsedValue = Number.parseFloat(value);
                return isNaN(parsedValue) ? null : parsedValue;
            },
            toAttribute: (value) => value !== null ? value.toString() : null
        }
    }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [Object])
], NumberBoxElement.prototype, "value", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], NumberBoxElement.prototype, "readonly", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], NumberBoxElement.prototype, "required", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], NumberBoxElement.prototype, "autofocus", null);
__decorate([
    Attribute({ type: NumberKeyboardMode }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], NumberBoxElement.prototype, "keyboard", null);
__decorate([
    Attribute({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], NumberBoxElement.prototype, "name", null);
__decorate([
    Attribute({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], NumberBoxElement.prototype, "pattern", null);
__decorate([
    Attribute({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], NumberBoxElement.prototype, "placeholder", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], NumberBoxElement.prototype, "autocomplete", null);
__decorate([
    Attribute({ type: UpDownSpinPosition }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], NumberBoxElement.prototype, "spinPosition", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], NumberBoxElement.prototype, "spinner", null);
__decorate([
    Attribute({ type: TextAlignment }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], NumberBoxElement.prototype, "textAlign", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [])
], NumberBoxElement.prototype, "hasPrefix", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [])
], NumberBoxElement.prototype, "hasSuffix", null);
NumberBoxElement = __decorate([
    Component({
        selector: 'mosaik-numberbox',
        template: numberBoxElementTemplate,
        themes: {
            joy: numberBoxElementJoyStyle,
            retro: numberBoxElementRetroStyle,
            cosmopolitan: numberBoxElementCosmopolitanStyle
        },
        host: {
            tabIndex: '0'
        },
        options: {
            mode: 'open',
            delegatesFocus: true
        },
        imports: [
            UpDownSpinnerElement,
            FocusRingElement,
            ButtonElement
        ]
    }),
    __metadata("design:paramtypes", [])
], NumberBoxElement);
export { NumberBoxElement };
/**
 * Checks if the provided value is valid for a input.
 * A valid value can be a number or null
 *
 * @private
 * @param value - The value to check.
 */
function isValidValue(value) {
    return typeof value === 'number' || value === null;
}
//# sourceMappingURL=NumberBoxElement.js.map