// #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 { growVerIn, growVerOut } from '../../../../Animations/Presets/Grow';
import { Themeable } from '../../../../Controls/Behaviors/Themeable';
import { Animatable } from '../../../Behaviors/Animatable';
import { Appearanceable } from '../../../Behaviors/Appearanceable';
import { Closeable } from '../../../Behaviors/Closeable';
import { Disableable } from '../../../Behaviors/Disableable';
import { Expandable } from '../../../Behaviors/Expandable';
import { Fitable } from '../../../Behaviors/Fitable';
import { Slottable } from '../../../Behaviors/Slottable';
import { TextFormattable } from '../../../Behaviors/TextFormattable';
import { Variantable } from '../../../Behaviors/Variantable';
import { addInheritanceProviderController } from '../../../Controllers/InheritanceProviderController';
import { Attribute } from '../../../Decorators/AttributeDecorator';
import { Component } from '../../../Decorators/ComponentDecorator';
import { Property } from '../../../Decorators/PropertyDecorator';
import { Size } from '../../../Types/Size';
import { CustomElement } from '../../Abstracts/CustomElement';
import { ButtonElement } from '../../Buttons/Button/ButtonElement';
import { IconElement } from '../../Media/Icon/IconElement';
import { DismissElement } from '../../Primitives/Dismiss/DismissElement';
import { TextElement } from '../../Primitives/Text/TextElement';
import { MessageContentElement } from './MessageContentElement';
import { messageElementTemplate } from './MessageElementTemplate';
import { MESSAGE_INHERITANCE_CONTEXT } from './MessageInheritanceContext';
import { messageElementCosmopolitanStyle } from './Themes/MessageElement.Cosmopolitan';
import { messageElementJoyStyle } from './Themes/MessageElement.Joy';
import { messageElementMemphisStyle } from './Themes/MessageElement.Memphis';
// #endregion
/**
 * Message - A compact, closeable notification component for displaying concise information.
 *
 * @description
 * The `Message` component is a simplified notification element based on the Banner component.
 * It focuses on displaying an icon, header, and subheader with optional close functionality,
 * without slots or action areas. This makes it ideal for quick, dismissible messages.
 * The component supports expandable content that can be collapsed to show only a specified
 * number of lines, with a toggle button to reveal the full content.
 *
 * @name Message
 * @element mosaik-message
 * @category Notifications
 *
 * @slot - The default slot for placing rich content inside the message (only used when expandable).
 *
 * @csspart caret - The caret button for toggling the expandable content.
 * @csspart close - The close button or icon part of the message.
 * @csspart footer - The footer area containing the caret toggle button.
 * @csspart header - The header text part of the message.
 * @csspart header-row - The header row containing icon, text, and close button.
 * @csspart icon - The icon part of the message.
 * @csspart root - The root part of the message.
 * @csspart text - The text part of the message.
 *
 * @cssprop {Color} --message-background-color - The background color for the message.
 * @cssprop {Color} --message-border-color - The border color for the message.
 * @cssprop {String} --message-border-radius - The border radius for the message.
 * @cssprop {String} --message-border-style - The border style for the message.
 * @cssprop {String} --message-border-width - The border width for the message.
 * @cssprop {String} --message-font-family - The font family for the message.
 * @cssprop {String} --message-font-letter-spacing - The font letter spacing CSS custom property.
 * @cssprop {String} --message-font-line-height - The font line height CSS custom property.
 * @cssprop {String} --message-font-size - The font size for the message.
 * @cssprop {String} --message-font-text-decoration - The font text decoration CSS custom property.
 * @cssprop {String} --message-font-text-transform - The font text transform CSS custom property.
 * @cssprop {String} --message-font-weight - The font weight for the message.
 * @cssprop {Color} --message-foreground-color - The foreground color for the message.
 * @cssprop {String} --message-gap - The gap between elements within the message.
 * @cssprop {String} --message-padding-bottom - The bottom padding for the message.
 * @cssprop {String} --message-padding-left - The left padding for the message.
 * @cssprop {String} --message-padding-right - The right padding for the message.
 * @cssprop {String} --message-padding-top - The top padding for the message.
 * @cssprop {String} --message-shadow - The shadow effect for the message.
 * @cssprop {String} --message-shadow-blur - The shadow blur CSS custom property.
 * @cssprop {String} --message-shadow-color - The shadow color CSS custom property.
 * @cssprop {String} --message-shadow-offset-x - The shadow offset x CSS custom property.
 * @cssprop {String} --message-shadow-offset-y - The shadow offset y CSS custom property.
 * @cssprop {String} --message-shadow-spread - The shadow spread CSS custom property.
 * @cssprop {String} --message-transition-duration - The transition duration for the message.
 * @cssprop {String} --message-transition-mode - The transition mode for the message.
 * @cssprop {String} --message-transition-property - The transition property for the message.
 * @cssprop {String} --message-translate - The translate CSS custom property.
 *
 * @fires closed {ClosedEvent} - Fired when the message is closed.
 * @fires expanded {ExpandedEvent} - Fired when the message content is expanded.
 * @fires collapsed {CollapsedEvent} - Fired when the message content is collapsed.
 * @fires toggled {ToggledEvent} - Fired when the message content is toggled.
 *
 * @dependency mosaik-button - The Button element.
 * @dependency mosaik-dismiss - The Dismiss element.
 * @dependency mosaik-icon - The Icon element.
 * @dependency mosaik-message-content - The Message Content element.
 * @dependency mosaik-text - The Text element.
 *
 * @example
 * Simple closeable notification:
 * ```html
 * <mosaik-message
 *   header="System Update"
 *   content="We will be back online shortly."
 *   closeable></mosaik-message>
 * ```
 *
 * @example
 * Expandable message with line limit:
 * ```html
 * <mosaik-message
 *   header="Long Message"
 *   content="This is a very long message that will be truncated after the specified number of lines."
 *   expandable
 *   collapsed-lines="2"></mosaik-message>
 * ```
 *
 * @example
 * Expandable message with rich slotted content:
 * ```html
 * <mosaik-message
 *   header="Rich Content"
 *   expandable>
 *   <mosaik-text text="This message contains rich formatted content."></mosaik-text>
 *   <mosaik-button label="Learn More" appearance="plain"></mosaik-button>
 * </mosaik-message>
 * ```
 *
 * @public
 */
let MessageElement = class MessageElement extends Themeable(Expandable(Animatable(Closeable(Disableable(Variantable(Appearanceable(Fitable(TextFormattable(Slottable(CustomElement)))))))))) {
    // #region Fields
    _provider = addInheritanceProviderController(this, {
        context: MESSAGE_INHERITANCE_CONTEXT,
        values: () => ({
            content: this.content,
            isExpanded: this.isExpanded,
            formatter: this.formatter,
            disabled: this.disabled
        })
    });
    _icon;
    _iconSize;
    _header;
    _content;
    _expandable;
    // #endregion
    // #region Ctor
    /**
     * @public
     */
    constructor() {
        super();
        this._icon = '';
        this._iconSize = 'small';
        this._header = '';
        this._content = '';
        this._expandable = false;
        this.enter = growVerIn;
        this.exit = growVerOut;
    }
    // #endregion
    // #region Properties
    /**
     * Returns the `is` property.
     * The `is` property represents natural name of this element.
     *
     * @public
     * @static
     * @readonly
     */
    static get is() {
        return 'mosaik-message';
    }
    /**
     * Gets or sets the `icon` property.
     *
     * @public
     */
    get icon() {
        return this._icon;
    }
    set icon(value) {
        if (this._icon !== value) {
            this._icon = value;
            this.requestUpdate('icon');
        }
    }
    /**
     * Gets or sets the `iconSize` property.
     *
     * @public
     * @attr
     */
    get iconSize() {
        return this._iconSize;
    }
    set iconSize(value) {
        if (this._iconSize !== value) {
            this._iconSize = value;
            this.requestUpdate('iconSize');
        }
    }
    /**
     * Gets or sets the `header` property.
     *
     * @public
     */
    get header() {
        return this._header;
    }
    set header(value) {
        if (this._header !== value) {
            this._header = value;
            this.requestUpdate('header');
        }
    }
    /**
     * Gets or sets the `content` property.
     *
     * @public
     */
    get content() {
        return this._content;
    }
    set content(value) {
        if (this._content !== value) {
            this._content = value;
            this.requestUpdate('content');
        }
    }
    /**
     * Gets or sets the `expandable` property.
     * When enabled, the content will be truncated to `collapsedLines` lines
     * and a toggle button will be displayed.
     *
     * @public
     * @attr
     */
    get expandable() {
        return this._expandable;
    }
    set expandable(value) {
        if (this._expandable !== value) {
            this._expandable = value;
            this.requestUpdate('expandable');
        }
    }
    // #endregion
    // #region Methods
    /**
     * Closes the `MessageElement`.
     *
     * @public
     * @override
     */
    async close() {
        if (this.disabled) {
            return false;
        }
        return super.close();
    }
    /**
     * Toggles the message between expanded and collapsed states.
     * Only works when `expandable` is `true`.
     *
     * @public
     * @override
     */
    toggle() {
        if (!this.expandable) {
            return;
        }
        super.toggle();
    }
    /**
     * Expands the message content.
     * Only works when `expandable` is `true`.
     *
     * @public
     * @override
     */
    expand() {
        if (!this.expandable) {
            return;
        }
        super.expand();
    }
    /**
     * Collapses the message content.
     * Only works when `expandable` is `true`.
     *
     * @public
     * @override
     */
    collapse() {
        if (!this.expandable) {
            return;
        }
        super.collapse();
    }
    /**
     * This method is invoked when the `isExpanded` property is changed.
     *
     * @param prev - The previous value.
     * @param next - The new value.
     * @public
     * @override
     */
    onIsExpandedChanged(prev, next) {
        if (prev === next) {
            return;
        }
        super.onIsExpandedChanged(prev, next);
        // Force update the inheritance context so consumers get the new value
        this._provider.forceUpdate();
    }
};
__decorate([
    Property({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], MessageElement.prototype, "icon", null);
__decorate([
    Attribute({ type: Size }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [Object])
], MessageElement.prototype, "iconSize", null);
__decorate([
    Property({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], MessageElement.prototype, "header", null);
__decorate([
    Property({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], MessageElement.prototype, "content", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], MessageElement.prototype, "expandable", null);
MessageElement = __decorate([
    Component({
        selector: 'mosaik-message',
        template: messageElementTemplate,
        themes: {
            joy: messageElementJoyStyle,
            memphis: messageElementMemphisStyle,
            cosmopolitan: messageElementCosmopolitanStyle
        },
        imports: [
            IconElement,
            TextElement,
            ButtonElement,
            DismissElement,
            MessageContentElement
        ]
    }),
    __metadata("design:paramtypes", [])
], MessageElement);
export { MessageElement };
//# sourceMappingURL=MessageElement.js.map