@breadstone/mosaik-elements-foundation 0.0.224 → 0.0.226

package/Controls/Components/Grouping/Message/IMessageElementProps.d.ts

@@ -0,0 +1,19 @@
+import type { IAppearanceableProps } from '../../../Behaviors/Appearanceable';
+import type { ICloseableProps } from '../../../Behaviors/Closeable';
+import type { IDisableableProps } from '../../../Behaviors/Disableable';
+import type { IFitableProps } from '../../../Behaviors/Fitable';
+import type { ITextFormattableProps } from '../../../Behaviors/TextFormattable';
+import type { IVariantableProps } from '../../../Behaviors/Variantable';
+import type { Size } from '../../../Types/Size';
+/**
+ * Represents the `{@link IMessageElementProps}` interface.
+ *
+ * @public
+ */
+export interface IMessageElementProps extends ICloseableProps, IDisableableProps, IVariantableProps, IAppearanceableProps, IFitableProps, ITextFormattableProps {
+    icon: string;
+    iconSize: Size | null;
+    header: string;
+    content: string;
+}
+//# sourceMappingURL=IMessageElementProps.d.ts.map

package/Controls/Components/Grouping/Message/IMessageElementProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IMessageElementProps.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Message/IMessageElementProps.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAChF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAIhD;;;;GAIG;AACH,MAAM,WAAW,oBACb,SAAQ,eAAe,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,aAAa,EAAE,qBAAqB;IAIzH,IAAI,EAAE,MAAM,CAAC;IAEb,QAAQ,EAAE,IAAI,GAAG,IAAI,CAAC;IAEtB,MAAM,EAAE,MAAM,CAAC;IAEf,OAAO,EAAE,MAAM,CAAC;CAInB"}

package/Controls/Components/Grouping/Message/IMessageElementProps.js

@@ -0,0 +1,3 @@
+// #region Imports
+export {};
+//# sourceMappingURL=IMessageElementProps.js.map

package/Controls/Components/Grouping/Message/IMessageElementProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IMessageElementProps.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Message/IMessageElementProps.ts"],"names":[],"mappings":"AAAA,kBAAkB"}

package/Controls/Components/Grouping/Message/MessageElement.d.ts

@@ -0,0 +1,129 @@
+import { ICloseable, type ICloseableEvents } from '../../../Behaviors/Closeable';
+import { Size } from '../../../Types/Size';
+import { CustomElement } from '../../Abstracts/CustomElement';
+import type { IMessageElementProps } from './IMessageElementProps';
+declare const MessageElement_base: (abstract new (...args: Array<any>) => import("../../../../Controls/Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Closeable").ICloseableProps & ICloseableEvents & ICloseable) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Variantable").IVariantableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Appearanceable").IAppearanceableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Fitable").IFitableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/TextFormattable").ITextFormattableProps) & typeof CustomElement & import("../../../../Controls/Behaviors/Themeable").IThemeableCtor;
+/**
+ * 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.
+ *
+ * @name Message
+ * @element mosaik-message
+ * @category Notifications
+ *
+ * @fires closed - Fired when the message is closed.
+ *
+ * @csspart root - The root part of the message.
+ * @csspart icon - The icon part of the message.
+ * @csspart text - The text part of the message.
+ * @csspart close - The close button or icon part of the message.
+ *
+ * @cssprop {unknown} --message-font-family - The font family for the message.
+ * @cssprop {unknown} --message-font-size - The font size for the message.
+ * @cssprop {unknown} --message-font-weight - The font weight for the message.
+ * @cssprop {unknown} --message-background-color - The background color for the message.
+ * @cssprop {unknown} --message-border-color - The border color for the message.
+ * @cssprop {unknown} --message-foreground-color - The foreground color for the message.
+ * @cssprop {unknown} --message-border-width - The border width for the message.
+ * @cssprop {unknown} --message-border-radius - The border radius for the message.
+ * @cssprop {unknown} --message-border-style - The border style for the message.
+ * @cssprop {unknown} --message-transition-duration - The transition duration for the message.
+ * @cssprop {unknown} --message-transition-mode - The transition mode for the message.
+ * @cssprop {unknown} --message-transition-property - The transition property for the message.
+ * @cssprop {unknown} --message-shadow - The shadow effect for the message.
+ * @cssprop {unknown} --message-padding-top - The top padding for the message.
+ * @cssprop {unknown} --message-padding-left - The left padding for the message.
+ * @cssprop {unknown} --message-padding-bottom - The bottom padding for the message.
+ * @cssprop {unknown} --message-padding-right - The right padding for the message.
+ * @cssprop {unknown} --message-gap - The gap between elements within the message.
+ *
+ * @dependency {IconElement} - The Icon element.
+ * @dependency {TextElement} - The Text element.
+ * @dependency {DismissElement} - The Dismiss element for closing the message.
+ *
+ * @example
+ * ```html
+ * <mosaik-message
+ *   icon="info"
+ *   header="System Update"
+ *   subHeader="We will be back online shortly."
+ *   closeable></mosaik-message>
+ * ```
+ *
+ * @public
+ */
+export declare class MessageElement extends MessageElement_base implements IMessageElementProps, ICloseableEvents, ICloseable {
+    private _icon;
+    private _iconSize;
+    private _header;
+    private _content;
+    /**
+     * @public
+     */
+    constructor();
+    /**
+     * Returns the `{@link is}` property.
+     * The `{@link is}` property represents natural name of this element.
+     *
+     * @public
+     * @static
+     * @readonly
+     */
+    static get is(): string;
+    /**
+     * Gets or sets the `icon` property.
+     *
+     * @public
+     */
+    get icon(): string;
+    set icon(value: string);
+    /**
+     * Gets or sets the `iconSize` property.
+     *
+     * @public
+     * @attr
+     */
+    get iconSize(): Size | null;
+    set iconSize(value: Size | null);
+    /**
+     * Gets or sets the `header` property.
+     *
+     * @public
+     */
+    get header(): string;
+    set header(value: string);
+    /**
+     * Gets or sets the `content` property.
+     *
+     * @public
+     */
+    get content(): string;
+    set content(value: string);
+    /**
+     * Closes the `MessageElement`.
+     *
+     * @public
+     * @override
+     */
+    close(): Promise<boolean>;
+}
+/**
+ * @public
+ */
+export declare namespace MessageElement {
+    type Props = IMessageElementProps;
+}
+/**
+ * @public
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'mosaik-message': MessageElement;
+    }
+}
+export {};
+//# sourceMappingURL=MessageElement.d.ts.map

package/Controls/Components/Grouping/Message/MessageElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Message/MessageElement.ts"],"names":[],"mappings":"AAIA,OAAO,EAAa,UAAU,EAAE,KAAK,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAQ5F,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;;AAQnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,qBAca,cACT,SAAQ,mBACR,YAAW,oBAAoB,EAAE,gBAAgB,EAAE,UAAU;IAI7D,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,QAAQ,CAAS;IAMzB;;OAEG;;IAcH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;OAIG;IACH,IACW,IAAI,IAAI,MAAM,CAExB;IACD,IAAW,IAAI,CAAC,KAAK,EAAE,MAAM,EAK5B;IAED;;;;;OAKG;IACH,IACW,QAAQ,IAAI,IAAI,GAAG,IAAI,CAEjC;IACD,IAAW,QAAQ,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAKrC;IAED;;;;OAIG;IACH,IACW,MAAM,IAAI,MAAM,CAE1B;IACD,IAAW,MAAM,CAAC,KAAK,EAAE,MAAM,EAK9B;IAED;;;;OAIG;IACH,IACW,OAAO,IAAI,MAAM,CAE3B;IACD,IAAW,OAAO,CAAC,KAAK,EAAE,MAAM,EAK/B;IAMD;;;;;OAKG;IACmB,KAAK,IAAI,OAAO,CAAC,OAAO,CAAC;CAUlD;AAED;;GAEG;AACH,yBAAiB,cAAc,CAAC;IAC5B,KAAY,KAAK,GAAG,oBAAoB,CAAC;CAC5C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,gBAAgB,EAAE,cAAc,CAAC;KACpC;CACJ"}

package/Controls/Components/Grouping/Message/MessageElement.js

@@ -0,0 +1,225 @@
+// #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 { Themeable } from '../../../../Controls/Behaviors/Themeable';
+import { Appearanceable } from '../../../Behaviors/Appearanceable';
+import { Closeable } from '../../../Behaviors/Closeable';
+import { Disableable } from '../../../Behaviors/Disableable';
+import { Fitable } from '../../../Behaviors/Fitable';
+import { TextFormattable } from '../../../Behaviors/TextFormattable';
+import { Variantable } from '../../../Behaviors/Variantable';
+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 { IconElement } from '../../Media/Icon/IconElement';
+import { DismissElement } from '../../Primitives/Dismiss/DismissElement';
+import { TextElement } from '../../Primitives/Text/TextElement';
+import { messageElementTemplate } from './MessageElementTemplate';
+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.
+ *
+ * @name Message
+ * @element mosaik-message
+ * @category Notifications
+ *
+ * @fires closed - Fired when the message is closed.
+ *
+ * @csspart root - The root part of the message.
+ * @csspart icon - The icon part of the message.
+ * @csspart text - The text part of the message.
+ * @csspart close - The close button or icon part of the message.
+ *
+ * @cssprop {unknown} --message-font-family - The font family for the message.
+ * @cssprop {unknown} --message-font-size - The font size for the message.
+ * @cssprop {unknown} --message-font-weight - The font weight for the message.
+ * @cssprop {unknown} --message-background-color - The background color for the message.
+ * @cssprop {unknown} --message-border-color - The border color for the message.
+ * @cssprop {unknown} --message-foreground-color - The foreground color for the message.
+ * @cssprop {unknown} --message-border-width - The border width for the message.
+ * @cssprop {unknown} --message-border-radius - The border radius for the message.
+ * @cssprop {unknown} --message-border-style - The border style for the message.
+ * @cssprop {unknown} --message-transition-duration - The transition duration for the message.
+ * @cssprop {unknown} --message-transition-mode - The transition mode for the message.
+ * @cssprop {unknown} --message-transition-property - The transition property for the message.
+ * @cssprop {unknown} --message-shadow - The shadow effect for the message.
+ * @cssprop {unknown} --message-padding-top - The top padding for the message.
+ * @cssprop {unknown} --message-padding-left - The left padding for the message.
+ * @cssprop {unknown} --message-padding-bottom - The bottom padding for the message.
+ * @cssprop {unknown} --message-padding-right - The right padding for the message.
+ * @cssprop {unknown} --message-gap - The gap between elements within the message.
+ *
+ * @dependency {IconElement} - The Icon element.
+ * @dependency {TextElement} - The Text element.
+ * @dependency {DismissElement} - The Dismiss element for closing the message.
+ *
+ * @example
+ * ```html
+ * <mosaik-message
+ *   icon="info"
+ *   header="System Update"
+ *   subHeader="We will be back online shortly."
+ *   closeable></mosaik-message>
+ * ```
+ *
+ * @public
+ */
+let MessageElement = class MessageElement extends Themeable(Closeable(Disableable(Variantable(Appearanceable(Fitable(TextFormattable(CustomElement))))))) {
+    // #region Fields
+    _icon;
+    _iconSize;
+    _header;
+    _content;
+    // #endregion
+    // #region Ctor
+    /**
+     * @public
+     */
+    constructor() {
+        super();
+        this._icon = '';
+        this._iconSize = 'small';
+        this._header = '';
+        this._content = '';
+    }
+    // #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-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');
+        }
+    }
+    // #endregion
+    // #region Methods
+    /**
+     * Closes the `MessageElement`.
+     *
+     * @public
+     * @override
+     */
+    async close() {
+        if (this.disabled) {
+            return false;
+        }
+        return super.close();
+    }
+};
+__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);
+MessageElement = __decorate([
+    Component({
+        selector: 'mosaik-message',
+        template: messageElementTemplate,
+        themes: {
+            joy: messageElementJoyStyle,
+            memphis: messageElementMemphisStyle,
+            cosmopolitan: messageElementCosmopolitanStyle
+        },
+        imports: [
+            IconElement,
+            TextElement,
+            DismissElement
+        ]
+    }),
+    __metadata("design:paramtypes", [])
+], MessageElement);
+export { MessageElement };
+//# sourceMappingURL=MessageElement.js.map

package/Controls/Components/Grouping/Message/MessageElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Message/MessageElement.ts"],"names":[],"mappings":"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"}

package/Controls/Components/Grouping/Message/MessageElementTemplate.d.ts

@@ -0,0 +1,9 @@
+import { type TemplateResult } from '../../../../Dom/Html';
+import type { MessageElement } from './MessageElement';
+/**
+ * The template of the {@link MessageElement}.
+ *
+ * @public
+ */
+export declare function messageElementTemplate<T extends MessageElement>(e: T): TemplateResult;
+//# sourceMappingURL=MessageElementTemplate.d.ts.map

package/Controls/Components/Grouping/Message/MessageElementTemplate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Message/MessageElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAIjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAIvD;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,SAAS,cAAc,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CAiDrF"}

package/Controls/Components/Grouping/Message/MessageElementTemplate.js

@@ -0,0 +1,61 @@
+// #region Imports
+import { html } from '../../../../Dom/Html';
+import { when } from '../../../Directives/Directives';
+import { ifNonNull } from '../../../Directives/IfNonNull';
+// #endregion
+/**
+ * The template of the {@link MessageElement}.
+ *
+ * @public
+ */
+export function messageElementTemplate(e) {
+    return html `
+        <div part="root">
+            ${when(e.icon, () => html `
+            <mosaik-icon part="icon"
+                            .variant="${e.variant}"
+                            .data="${e.icon}"
+                            .size="${ifNonNull(e.iconSize)}"
+                            .lang="${e.lang}"
+                            .dir="${e.dir}"
+                            ?inline="${true}"
+                            ?disabled="${e.disabled}"></mosaik-icon>
+            `)}
+            ${when(e.header.trim() || e.content.trim(), () => html `
+            <div part="text">
+                ${when(e.header.trim(), () => html `
+                <mosaik-text part="header"
+                             .variant="${e.variant}"
+                             .text="${e.header}"
+                             .formatter="${e.formatter}"
+                             .wrap="${true}"
+                             .dir="${e.dir}"
+                             .lang="${e.lang}"
+                             ?disabled="${e.disabled}"></mosaik-text>
+                `)}
+                ${when(e.content.trim(), () => html `
+                <mosaik-text part="content"
+                             .variant="${e.variant}"
+                             .text="${e.content}"
+                             .formatter="${e.formatter}"
+                             .wrap="${true}"
+                             .dir="${e.dir}"
+                             .lang="${e.lang}"
+                             ?disabled="${e.disabled}"></mosaik-text>
+                `)}
+            </div>
+            `)}
+            ${when(e.closeable, () => html `
+            <mosaik-dismiss part="close"
+                            .variant="${e.variant}"
+                            .appearance="${'plain'}"
+                            .size="${'small'}"
+                            .dir="${e.dir}"
+                            .lang="${e.lang}"
+                            ?disabled="${e.disabled}"
+                            @click="${() => e.close()}"></mosaik-dismiss>
+            `)}
+        </div>
+    `;
+}
+//# sourceMappingURL=MessageElementTemplate.js.map

package/Controls/Components/Grouping/Message/MessageElementTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Message/MessageElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,IAAI,EAAuB,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAI1D,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,sBAAsB,CAA2B,CAAI;IACjE,OAAO,IAAI,CAAA;;cAED,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;wCAEG,CAAC,CAAC,OAAO;qCACZ,CAAC,CAAC,IAAI;qCACN,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAS;qCAC7B,CAAC,CAAC,IAAI;oCACP,CAAC,CAAC,GAAG;uCACF,IAAI;yCACF,CAAC,CAAC,QAAQ;aACtC,CAAC;cACA,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;kBAEhD,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;yCAET,CAAC,CAAC,OAAO;sCACZ,CAAC,CAAC,MAAM;2CACH,CAAC,CAAC,SAAS;sCAChB,IAAI;qCACL,CAAC,CAAC,GAAG;sCACJ,CAAC,CAAC,IAAI;0CACF,CAAC,CAAC,QAAQ;iBACnC,CAAC;kBACA,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;yCAEV,CAAC,CAAC,OAAO;sCACZ,CAAC,CAAC,OAAO;2CACJ,CAAC,CAAC,SAAS;sCAChB,IAAI;qCACL,CAAC,CAAC,GAAG;sCACJ,CAAC,CAAC,IAAI;0CACF,CAAC,CAAC,QAAQ;iBACnC,CAAC;;aAEL,CAAC;cACA,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;wCAEF,CAAC,CAAC,OAAO;2CACN,OAAO;qCACb,OAAO;oCACR,CAAC,CAAC,GAAG;qCACJ,CAAC,CAAC,IAAI;yCACF,CAAC,CAAC,QAAQ;sCACb,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE;aACxC,CAAC;;KAET,CAAC;AACN,CAAC"}

package/Controls/Components/Grouping/Message/Themes/MessageElement.Cosmopolitan.d.ts

@@ -0,0 +1,6 @@
+import { type CSSResult } from '../../../../../Dom/Css';
+/**
+ * @public
+ */
+export declare function messageElementCosmopolitanStyle(): CSSResult;
+//# sourceMappingURL=MessageElement.Cosmopolitan.d.ts.map

package/Controls/Components/Grouping/Message/Themes/MessageElement.Cosmopolitan.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Grouping/Message/Themes/MessageElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,+BAA+B,IAAI,SAAS,CAmL3D"}