// #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 { IntlController } from '../../../../Intl/IntlController';
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 { Property } from '../../../Decorators/PropertyDecorator';
import { ResizeMode } from '../../../Types/Resize';
import { ButtonElement } from '../../Buttons/Button/ButtonElement';
import { FocusRingElement } from '../../Primitives/FocusRing/FocusRingElement';
import { InputBaseElement } from '../Abstracts/InputBase';
import { BoldCommand } from './Commands/BoldCommand';
import { ItalicCommand } from './Commands/ItalicCommand';
import { MonospaceCommand } from './Commands/MonospaceCommand';
import { StrikethroughCommand } from './Commands/StrikethroughCommand';
import { RichTextBoxElementIntl } from './Intl/RichTextBoxElementIntl';
import { richTextBoxElementTemplate } from './RichTextBoxElementTemplate';
import { RichTextBoxToolboxElement } from './RichTextBoxToolboxElement';
import { richTextBoxElementJoyStyle } from './Themes/RichTextBoxElement.Joy';
import { richTextBoxElementMemphisStyle } from './Themes/RichTextBoxElement.Memphis';
import { richTextBoxElementCosmopolitanStyle } from './Themes/RichTextBoxElement.Cosmopolitan';
import { Themeable } from '../../../Behaviors/Themeable';
// #endregion
/**
 * Rich Text Box - A user interface component for inputting and displaying formatted text.
 *
 * @element mosaik-richtextbox
 *
 * @description
 * The Rich Text Box is a versatile component designed for inputting and displaying text with various formatting options.
 * It allows users to create and edit text content with features such as text styling (bold, italics, underline),
 * text alignment, bullet points, numbered lists, and more. Rich Text Boxes are commonly used in applications where users
 * need to compose and format text, such as document editors, email clients, or content management systems.
 *
 * @category Forms
 *
 * @fires cleared {ClearedEvent} - Fired when the value is cleared.
 *
 * @slot prefix - The prefix slot.
 * @slot suffix - The suffix slot.
 *
 * @csspart prefix
 * @csspart input
 * @csspart suffix
 * @csspart inner
 *
 * @public
 */
let RichTextBoxElement = class RichTextBoxElement extends Themeable(Clearable(Slottable(Appearanceable(Variantable(Invalidable(Valueable(Disableable(Labelable(InputBaseElement))))))))) {
    // #region Fields
    _intl;
    _commands;
    _inputElement;
    _value;
    _multilineRows;
    _readonly;
    _required;
    _autofocus;
    _name;
    _pattern;
    _placeholder;
    _autocomplete;
    _minlength;
    _maxlength;
    _resize;
    _showToolbar;
    // #endregion
    // #region Ctor
    /**
     * @public
     */
    constructor() {
        super();
        this._intl = new IntlController(this, {
            factory: () => new RichTextBoxElementIntl()
        });
        this._commands = [
            new BoldCommand(),
            new ItalicCommand(),
            new StrikethroughCommand(),
            new MonospaceCommand()
        ];
        this._value = '';
        this._multilineRows = 3;
        this._readonly = false;
        this._required = false;
        this._autofocus = false;
        this._name = '';
        this._pattern = '';
        this._placeholder = '';
        this._autocomplete = false;
        this._minlength = null;
        this._maxlength = null;
        this._resize = ResizeMode.None;
        this._showToolbar = false;
    }
    // #endregion
    // #region Properties
    /**
     * Returns the `is` property.
     *
     * @public
     * @static
     * @readonly
    */
    static get is() {
        return 'mosaik-richtextbox';
    }
    /**
     * 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 `minlength` property.
     *
     * @public
     * @attr
     */
    get minlength() {
        return this._minlength;
    }
    set minlength(value) {
        if (this._minlength !== value) {
            this._minlength = value;
            this.requestUpdate('minlength');
        }
    }
    /**
     * Gets or sets the `maxlength` property.
     *
     * @public
     * @attr
     */
    get maxlength() {
        return this._maxlength;
    }
    set maxlength(value) {
        if (this._maxlength !== value) {
            this._maxlength = value;
            this.requestUpdate('maxlength');
        }
    }
    /**
     * Gets or sets the `multilineRows` property.
     *
     * @public
     * @attr
     */
    get multilineRows() {
        return this._multilineRows;
    }
    set multilineRows(value) {
        if (this._multilineRows !== value) {
            this._multilineRows = value;
            this.requestUpdate('multilineRows');
        }
    }
    /**
     * Gets or sets the `resize` property.
     *
     * @public
     * @attr
     */
    get resize() {
        return this._resize;
    }
    set resize(value) {
        if (this._resize !== value) {
            this._resize = value;
            this.requestUpdate('resize');
        }
    }
    /**
     * Gets or sets the `showToolbar` property.
     *
     * @public
     * @attr
     */
    get showToolbar() {
        return this._showToolbar;
    }
    set showToolbar(value) {
        if (this._showToolbar !== value) {
            this._showToolbar = value;
            this.requestUpdate('showToolbar');
        }
    }
    /**
     * 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 `intl` property.
     *
     * @public
     * @readonly
     */
    get intl() {
        return this._intl.intl;
    }
    // #endregion
    // #region Methods
    /**
     * @public
     * @override
     */
    connectedCallback() {
        super.connectedCallback();
        this.on('click', () => this.focus());
    }
    /**
     * @public
     */
    command(name) {
        let result = false;
        switch (name) {
            case 'bold':
                result = this._commands.find((command) => command instanceof BoldCommand)?.execute() ?? false;
                break;
            case 'italic':
                result = this._commands.find((command) => command instanceof ItalicCommand)?.execute() ?? false;
                break;
            case 'strikethrough':
                result = this._commands.find((command) => command instanceof StrikethroughCommand)?.execute() ?? false;
                break;
            case 'monospace':
                result = this._commands.find((command) => command instanceof MonospaceCommand)?.execute() ?? false;
                break;
            default:
                result = false;
                break;
        }
        console.debug(`[RichTextBoxElement] Command ${name} was called.`);
        console.debug(`[RichTextBoxElement] Value is now ${this._inputElement.innerHTML}.`);
        this.value = this._inputElement.innerHTML;
        return result;
    }
    /**
     * Sets focus to the element.
     *
     * @public
     * @override
     */
    focus() {
        if (this.shadowRoot) {
            this._inputElement.focus();
        }
    }
    /**
     * Removes focus from the element.
     *
     * @public
     * @override
     */
    blur() {
        if (this.shadowRoot) {
            this._inputElement.blur();
        }
    }
    /**
     * Resets the value, all kinds of validation and errors.
     *
     * @public
     * @override
     */
    reset() {
        super.reset();
        this.clear();
        this.invalid = false;
    }
    /**
     * 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;
    }
    /**
     * Checks the validity of the element and returns `true` if it is valid; otherwise, `false`.
     *
     * @public
     * @override
     */
    checkValidity() {
        // return this.shadowRoot
        //     ? this.getTemplatePart<HTMLElement>('input')?.checkValidity() ?? true
        //     : true;
        return true;
    }
    /**
     * @protected
     * @override
     */
    onApplyTemplate() {
        super.onApplyTemplate();
        this._inputElement = this.getTemplatePart('input');
        if (this.autofocus) {
            if (this.shadowRoot) {
                this._commands.forEach((command) => command.attach(this._inputElement));
                this._inputElement.focus();
            }
        }
    }
    /**
     * @protected
     * @template
     */
    onChange(event) {
        this.value = event.target.value;
    }
    /**
     * @protected
     * @template
     * @override
     */
    onInput(event) {
        super.onInput(event);
        this.value = event.target.value;
    }
    /**
     * @protected
     * @template
     * @override
     */
    onFocus(event) {
        super.onFocus(event);
    }
    /**
     * @protected
     * @template
     * @override
     */
    onBlur(event) {
        super.onBlur(event);
    }
    /**
     * @private
     */
    processValue(value) {
        let processedValue = String(value == null ? '' : value);
        processedValue = processedValue.trim() === '<br>' ? '' : processedValue;
        // if (this.formatter) {
        //     this._value.value = this.formatter(processedValue);
        //     this._value.rawValue = processedValue;
        // } else {
        //     this._value.value = processedValue;
        //     this._value.rawValue = processedValue;
        // }
    }
};
__decorate([
    Property({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], RichTextBoxElement.prototype, "value", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], RichTextBoxElement.prototype, "readonly", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], RichTextBoxElement.prototype, "required", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], RichTextBoxElement.prototype, "autofocus", null);
__decorate([
    Attribute({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], RichTextBoxElement.prototype, "name", null);
__decorate([
    Attribute({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], RichTextBoxElement.prototype, "pattern", null);
__decorate([
    Attribute({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], RichTextBoxElement.prototype, "placeholder", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], RichTextBoxElement.prototype, "autocomplete", null);
__decorate([
    Attribute({ type: Number }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [Object])
], RichTextBoxElement.prototype, "minlength", null);
__decorate([
    Attribute({ type: Number }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [Object])
], RichTextBoxElement.prototype, "maxlength", null);
__decorate([
    Attribute({ type: Number }),
    __metadata("design:type", Number),
    __metadata("design:paramtypes", [Number])
], RichTextBoxElement.prototype, "multilineRows", null);
__decorate([
    Attribute({ type: ResizeMode }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], RichTextBoxElement.prototype, "resize", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], RichTextBoxElement.prototype, "showToolbar", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [])
], RichTextBoxElement.prototype, "hasPrefix", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [])
], RichTextBoxElement.prototype, "hasSuffix", null);
RichTextBoxElement = __decorate([
    Component({
        selector: 'mosaik-richtextbox',
        template: richTextBoxElementTemplate,
        themes: {
            joy: richTextBoxElementJoyStyle,
            memphis: richTextBoxElementMemphisStyle,
            cosmopolitan: richTextBoxElementCosmopolitanStyle
        },
        host: {
            tabIndex: '0'
        },
        options: {
            mode: 'open',
            delegatesFocus: true
        },
        imports: [
            RichTextBoxToolboxElement,
            FocusRingElement,
            ButtonElement
        ]
    }),
    __metadata("design:paramtypes", [])
], RichTextBoxElement);
export { RichTextBoxElement };
//# sourceMappingURL=RichTextBoxElement.js.map