@breadstone/mosaik-elements-foundation 0.0.226 → 0.0.227

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

@@ -8,22 +8,30 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 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';
@@ -35,39 +43,55 @@ import { messageElementMemphisStyle } from './Themes/MessageElement.Memphis';
  * 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
  *
- * @fires closed - Fired when the message is closed.
+ * @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.
+ *
+ * @slot - The default slot for placing rich content inside the message (only used when expandable).
  *
  * @csspart root - The root 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 text - The text part of the message.
+ * @csspart header - The header text part of the message.
+ * @csspart content - The content text part of the message.
+ * @csspart contentWrapper - The wrapper around the content for expandable behavior.
+ * @csspart expandedContent - The expanded content area containing slotted content.
+ * @csspart footer - The footer area containing the caret toggle button.
+ * @csspart caret - The caret button for toggling the expandable content.
  * @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.
+ * @cssprop {String} --message-font-family - The font family for the message.
+ * @cssprop {String} --message-font-size - The font size for the message.
+ * @cssprop {String} --message-font-weight - The font weight for 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 {Color} --message-foreground-color - The foreground color for the message.
+ * @cssprop {String} --message-border-width - The border width 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-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-shadow - The shadow effect for the message.
+ * @cssprop {String} --message-padding-top - The top padding for the message.
+ * @cssprop {String} --message-padding-left - The left padding for the message.
+ * @cssprop {String} --message-padding-bottom - The bottom padding for the message.
+ * @cssprop {String} --message-padding-right - The right padding for the message.
+ * @cssprop {String} --message-gap - The gap between elements within the message.
+ * @cssprop {Number} --message-collapsed-lines - The number of visible lines when collapsed.
  *
  * @dependency {IconElement} - The Icon element.
  * @dependency {TextElement} - The Text element.
+ * @dependency {ButtonElement} - The Button element for the caret toggle.
  * @dependency {DismissElement} - The Dismiss element for closing the message.
  *
  * @example
@@ -75,18 +99,48 @@ import { messageElementMemphisStyle } from './Themes/MessageElement.Memphis';
  * <mosaik-message
  *   icon="info"
  *   header="System Update"
- *   subHeader="We will be back online shortly."
+ *   content="We will be back online shortly."
  *   closeable></mosaik-message>
  * ```
  *
+ * @example
+ * ```html
+ * <mosaik-message
+ *   icon="info"
+ *   header="Long Message"
+ *   content="This is a very long message that will be truncated..."
+ *   expandable
+ *   collapsed-lines="2"></mosaik-message>
+ * ```
+ *
+ * @example
+ * ```html
+ * <mosaik-message
+ *   icon="info"
+ *   header="Rich Content"
+ *   expandable>
+ *   <p>This message contains rich content with <mosaik-button>buttons</mosaik-button>.</p>
+ * </mosaik-message>
+ * ```
+ *
  * @public
  */
-let MessageElement = class MessageElement extends Themeable(Closeable(Disableable(Variantable(Appearanceable(Fitable(TextFormattable(CustomElement))))))) {
+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
     /**
@@ -98,6 +152,9 @@ let MessageElement = class MessageElement extends Themeable(Closeable(Disableabl
         this._iconSize = 'small';
         this._header = '';
         this._content = '';
+        this._expandable = false;
+        this.enter = growVerIn;
+        this.exit = growVerOut;
     }
     // #endregion
     // #region Properties
@@ -169,6 +226,23 @@ let MessageElement = class MessageElement extends Themeable(Closeable(Disableabl
             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
     /**
@@ -183,6 +257,61 @@ let MessageElement = class MessageElement extends Themeable(Closeable(Disableabl
         }
         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 }),
@@ -204,6 +333,14 @@ __decorate([
     __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',
@@ -216,7 +353,9 @@ MessageElement = __decorate([
         imports: [
             IconElement,
             TextElement,
-            DismissElement
+            ButtonElement,
+            DismissElement,
+            MessageContentElement
         ]
     }),
     __metadata("design:paramtypes", [])

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

@@ -1 +1 @@
-{"version":3,"file":"MessageElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Message/MessageElement.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"MessageElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Message/MessageElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;AAElB,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AAC5E,OAAO,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AACrE,OAAO,EAAE,UAAU,EAAoB,MAAM,+BAA+B,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAE,SAAS,EAAqC,MAAM,8BAA8B,CAAC;AAC5F,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,UAAU,EAA2E,MAAM,+BAA+B,CAAC;AACpI,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAc,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,gCAAgC,EAAiC,MAAM,oDAAoD,CAAC;AACrI,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AACjE,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAEhE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,2BAA2B,EAA0B,MAAM,6BAA6B,CAAC;AAClG,OAAO,EAAE,+BAA+B,EAAE,MAAM,sCAAsC,CAAC;AACvF,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAE7E,aAAa;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwFG;AAiBI,IAAM,cAAc,GAApB,MAAM,cACT,SAAQ,SAAS,CAAC,UAAU,CAAC,UAAU,CAAC,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC,cAAc,CAAC,OAAO,CAAC,eAAe,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAGlJ,iBAAiB;IAEA,SAAS,GAAqD,gCAAgC,CAAoB,IAAI,EAAE;QACrI,OAAO,EAAE,2BAA2B;QACpC,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;YACX,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;KACL,CAAC,CAAC;IACK,KAAK,CAAS;IACd,SAAS,CAAc;IACvB,OAAO,CAAS;IAChB,QAAQ,CAAS;IACjB,WAAW,CAAU;IAE7B,aAAa;IAEb,eAAe;IAEf;;OAEG;IACH;QACI,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC;QACzB,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;QAClB,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;QACnB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QACzB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;QACvB,IAAI,CAAC,IAAI,GAAG,UAAU,CAAC;IAC3B,CAAC;IAED,aAAa;IAEb,qBAAqB;IAErB;;;;;;;OAOG;IACI,MAAM,KAAK,EAAE;QAChB,OAAO,gBAAgB,CAAC;IAC5B,CAAC;IAED;;;;OAIG;IACH,IACW,IAAI;QACX,OAAO,IAAI,CAAC,KAAK,CAAC;IACtB,CAAC;IACD,IAAW,IAAI,CAAC,KAAa;QACzB,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,EAAE,CAAC;YACvB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC/B,CAAC;IACL,CAAC;IAED;;;;;OAKG;IACH,IACW,QAAQ;QACf,OAAO,IAAI,CAAC,SAAS,CAAC;IAC1B,CAAC;IACD,IAAW,QAAQ,CAAC,KAAkB;QAClC,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE,CAAC;YAC3B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACnC,CAAC;IACL,CAAC;IAED;;;;OAIG;IACH,IACW,MAAM;QACb,OAAO,IAAI,CAAC,OAAO,CAAC;IACxB,CAAC;IACD,IAAW,MAAM,CAAC,KAAa;QAC3B,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,EAAE,CAAC;YACzB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACjC,CAAC;IACL,CAAC;IAED;;;;OAIG;IACH,IACW,OAAO;QACd,OAAO,IAAI,CAAC,QAAQ,CAAC;IACzB,CAAC;IACD,IAAW,OAAO,CAAC,KAAa;QAC5B,IAAI,IAAI,CAAC,QAAQ,KAAK,KAAK,EAAE,CAAC;YAC1B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;QAClC,CAAC;IACL,CAAC;IAED;;;;;;;OAOG;IACH,IAIW,UAAU;QACjB,OAAO,IAAI,CAAC,WAAW,CAAC;IAC5B,CAAC;IACD,IAAW,UAAU,CAAC,KAAc;QAChC,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,EAAE,CAAC;YAC7B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YACzB,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;QACrC,CAAC;IACL,CAAC;IAED,aAAa;IAEb,kBAAkB;IAElB;;;;;OAKG;IACa,KAAK,CAAC,KAAK;QACvB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,OAAO,KAAK,CAAC;QACjB,CAAC;QAED,OAAO,KAAK,CAAC,KAAK,EAAE,CAAC;IACzB,CAAC;IAED;;;;;;OAMG;IACa,MAAM;QAClB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACnB,OAAO;QACX,CAAC;QAED,KAAK,CAAC,MAAM,EAAE,CAAC;IACnB,CAAC;IAED;;;;;;OAMG;IACa,MAAM;QAClB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACnB,OAAO;QACX,CAAC;QAED,KAAK,CAAC,MAAM,EAAE,CAAC;IACnB,CAAC;IAED;;;;;;OAMG;IACa,QAAQ;QACpB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACnB,OAAO;QACX,CAAC;QAED,KAAK,CAAC,QAAQ,EAAE,CAAC;IACrB,CAAC;IAED;;;;;;;OAOG;IACa,mBAAmB,CAAC,IAAa,EAAE,IAAa;QAC5D,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;YAChB,OAAO;QACX,CAAC;QAED,KAAK,CAAC,mBAAmB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QAEtC,sEAAsE;QACtE,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC;IACjC,CAAC;CAIJ,CAAA;AAtKG;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;0CAG1B;AAcD;IAAC,SAAS,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;;;8CAGzB;AAaD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;4CAG1B;AAaD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;6CAG1B;AAgBD;IAAC,SAAS,CAAC;QACP,IAAI,EAAE,OAAO;QACb,UAAU,EAAE,IAAI;KACnB,CAAC;;;gDAGD;AAvIQ,cAAc;IAhB1B,SAAS,CAAC;QACP,QAAQ,EAAE,gBAAgB;QAC1B,QAAQ,EAAE,sBAAsB;QAChC,MAAM,EAAE;YACJ,GAAG,EAAE,sBAAsB;YAC3B,OAAO,EAAE,0BAA0B;YACnC,YAAY,EAAE,+BAA+B;SAChD;QACD,OAAO,EAAE;YACL,WAAW;YACX,WAAW;YACX,aAAa;YACb,cAAc;YACd,qBAAqB;SACxB;KACJ,CAAC;;GACW,cAAc,CAmO1B"}

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

@@ -1 +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"}
+{"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;AAKjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAIvD;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,SAAS,cAAc,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CA0DrF"}

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

@@ -1,5 +1,6 @@
 // #region Imports
 import { html } from '../../../../Dom/Html';
+import { Icons } from '../../../../Resources/Icons';
 import { when } from '../../../Directives/Directives';
 import { ifNonNull } from '../../../Directives/IfNonNull';
 // #endregion
@@ -11,49 +12,58 @@ import { ifNonNull } from '../../../Directives/IfNonNull';
 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"
+            <div part="header-row">
+                ${when(e.icon, () => html `
+                <mosaik-icon part="icon"
                              .variant="${e.variant}"
-                             .text="${e.header}"
-                             .formatter="${e.formatter}"
-                             .wrap="${true}"
-                             .dir="${e.dir}"
+                             .data="${e.icon}"
+                             .size="${ifNonNull(e.iconSize)}"
                              .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>
+                             ?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>
+                    `)}
+                    <slot name="content">
+                        <mosaik-message-content></mosaik-message-content>
+                    </slot>
+                </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>
-            `)}
-            ${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>
+            ${when(e.expandable, () => html `
+            <div part="footer">
+                <mosaik-button part="caret"
+                               .lang="${e.lang}"
+                               .dir="${e.dir}"
+                               .appearance="${'plain'}"
+                               .variant="${e.variant}"
+                               .icon="${Icons.caretDown}"
+                               .size="${'small'}"
+                               .iconSize="${'small'}"
+                               ?disabled="${e.disabled}"
+                               @click="${() => e.toggle()}"></mosaik-button>
+            </div>
             `)}
         </div>
     `;

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

@@ -1 +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"}
+{"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,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACpD,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;;;kBAGG,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;yCAEA,CAAC,CAAC,OAAO;sCACZ,CAAC,CAAC,IAAI;sCACN,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAS;sCAC7B,CAAC,CAAC,IAAI;qCACP,CAAC,CAAC,GAAG;wCACF,IAAI;0CACF,CAAC,CAAC,QAAQ;iBACnC,CAAC;kBACA,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;sBAEhD,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;6CAET,CAAC,CAAC,OAAO;0CACZ,CAAC,CAAC,MAAM;+CACH,CAAC,CAAC,SAAS;0CAChB,IAAI;yCACL,CAAC,CAAC,GAAG;0CACJ,CAAC,CAAC,IAAI;8CACF,CAAC,CAAC,QAAQ;qBACnC,CAAC;;;;;iBAKL,CAAC;kBACA,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;4CAEF,CAAC,CAAC,OAAO;+CACN,OAAO;yCACb,OAAO;wCACR,CAAC,CAAC,GAAG;yCACJ,CAAC,CAAC,IAAI;6CACF,CAAC,CAAC,QAAQ;0CACb,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE;iBACxC,CAAC;;cAEJ,IAAI,CAAC,CAAC,CAAC,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;wCAGH,CAAC,CAAC,IAAI;uCACP,CAAC,CAAC,GAAG;8CACE,OAAO;2CACV,CAAC,CAAC,OAAO;wCACZ,KAAK,CAAC,SAAS;wCACf,OAAO;4CACH,OAAO;4CACP,CAAC,CAAC,QAAQ;yCACb,GAAG,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE;;aAE5C,CAAC;;KAET,CAAC;AACN,CAAC"}

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

@@ -0,0 +1,33 @@
+import type { TextFormatter } from '../../../Types/TextFormatter';
+/**
+ * Interface for properties inherited by child MessageContentElements.
+ *
+ * @public
+ */
+export interface IMessageInherited {
+    /**
+     * Inherited content text.
+     */
+    content?: string;
+    /**
+     * Inherited expanded state.
+     */
+    isExpanded?: boolean;
+    /**
+     * Inherited text formatter.
+     */
+    formatter?: TextFormatter | null;
+    /**
+     * Inherited disabled state.
+     */
+    disabled?: boolean;
+}
+/**
+ * Context for Message → MessageContent inheritance.
+ *
+ * @public
+ */
+export declare const MESSAGE_INHERITANCE_CONTEXT: {
+    __context__: Partial<IMessageInherited>;
+};
+//# sourceMappingURL=MessageInheritanceContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageInheritanceContext.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Message/MessageInheritanceContext.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAIlE;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAI9B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAEjC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CAItB;AAED;;;;GAIG;AACH,eAAO,MAAM,2BAA2B;;CAAsF,CAAC"}

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

@@ -0,0 +1,9 @@
+// #region Imports
+import { createContext } from '@lit/context';
+/**
+ * Context for Message → MessageContent inheritance.
+ *
+ * @public
+ */
+export const MESSAGE_INHERITANCE_CONTEXT = createContext(Symbol.for('mosaik:message:inheritance'));
+//# sourceMappingURL=MessageInheritanceContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageInheritanceContext.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Message/MessageInheritanceContext.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAsC7C;;;;GAIG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,aAAa,CAA6B,MAAM,CAAC,GAAG,CAAC,4BAA4B,CAAC,CAAC,CAAC"}

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

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

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

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

package/Controls/Components/Grouping/Message/Themes/MessageContentElement.Cosmopolitan.js

@@ -0,0 +1,118 @@
+// ------------------------------------------------------------------------------
+// <auto-generated>
+//     This code was generated by a tool.
+//     Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+// </auto-generated>
+// ------------------------------------------------------------------------------
+// #region Imports
+import { css } from '../../../../../Dom/Css';
+// #endregion
+/**
+ * @public
+ */
+export function messageContentElementCosmopolitanStyle() {
+    return css `
+:host {
+  --message-content-background-color: transparent;
+  --message-content-border-color: transparent;
+  --message-content-border-radius: 0px;
+  --message-content-border-style: solid;
+  --message-content-border-width: 0px;
+  --message-content-font-decoration: var(--cosmopolitan-typography-content-text-decoration);
+  --message-content-font-family: var(--cosmopolitan-font-family);
+  --message-content-font-letter-spacing: var(--cosmopolitan-typography-content-letter-spacing);
+  --message-content-font-line-height: var(--cosmopolitan-typography-content-line-height);
+  --message-content-font-size: var(--cosmopolitan-typography-content-font-size);
+  --message-content-font-text-decoration: unset;
+  --message-content-font-text-transform: unset;
+  --message-content-font-transform: var(--cosmopolitan-typography-content-text-transform);
+  --message-content-font-weight: var(--cosmopolitan-typography-content-font-weight);
+  --message-content-foreground-color: var(--cosmopolitan-scheme-foreground);
+  --message-content-gap: 0px;
+  --message-content-padding-bottom: 0px;
+  --message-content-padding-left: 0px;
+  --message-content-padding-right: 0px;
+  --message-content-padding-top: 0px;
+  --message-content-shadow: var(--cosmopolitan-elevation-none);
+  --message-content-transition-duration: .2s;
+  --message-content-transition-mode: ease;
+  --message-content-transition-property: color, opacity, box-shadow;
+  --message-content-translate: unset;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  :host {
+    transition-duration: .01ms;
+  }
+}
+
+:host {
+  box-sizing: border-box;
+  display: block;
+  position: relative;
+}
+
+:host *, :host :before, :host :after {
+  box-sizing: border-box;
+  background-repeat: no-repeat;
+}
+
+:host :before, :host :after {
+  text-decoration: inherit;
+  vertical-align: inherit;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+:host {
+  font-family: var(--message-content-font-family);
+  font-size: var(--message-content-font-size);
+  line-height: var(--message-content-font-line-height);
+  font-weight: var(--message-content-font-weight);
+  letter-spacing: var(--message-content-font-letter-spacing);
+  -webkit-text-decoration: var(--message-content-font-text-decoration);
+  text-decoration: var(--message-content-font-text-decoration);
+  text-transform: var(--message-content-font-text-transform);
+  color: var(--message-content-foreground-color);
+  display: block;
+}
+
+:host slot {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-transform: inherit;
+  color: inherit;
+  display: block;
+}
+
+:host slot mosaik-text {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-transform: inherit;
+  color: inherit;
+}
+
+:host {
+  font-family: var(--cosmopolitan-typography-body2-font-family);
+  font-size: var(--cosmopolitan-typography-body2-font-size);
+  line-height: var(--cosmopolitan-typography-body2-line-height);
+  font-weight: var(--cosmopolitan-typography-body2-font-weight);
+  letter-spacing: var(--cosmopolitan-typography-body2-letter-spacing);
+  -webkit-text-decoration: var(--cosmopolitan-typography-body2-text-decoration);
+  text-decoration: var(--cosmopolitan-typography-body2-text-decoration);
+  text-transform: var(--cosmopolitan-typography-body2-text-transform);
+}
+
+    `;
+}
+//# sourceMappingURL=MessageContentElement.Cosmopolitan.js.map

package/Controls/Components/Grouping/Message/Themes/MessageContentElement.Cosmopolitan.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageContentElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Grouping/Message/Themes/MessageContentElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,sCAAsC;IAClD,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsGT,CAAC;AACN,CAAC"}

package/Controls/Components/Grouping/Message/Themes/MessageContentElement.Joy.d.ts

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

package/Controls/Components/Grouping/Message/Themes/MessageContentElement.Joy.d.ts.map

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