@breadstone/mosaik-elements-foundation 0.0.131 → 0.0.134

package/Controls/Components/Media/Chat/Themes/ChatMessageElement.Cosmopolitan.js

@@ -67,13 +67,22 @@ export function chatMessageElementCosmopolitanStyle() {
 :host {
   margin-left: 44px;
   margin-right: initial;
+  content-visibility: auto;
 }
 
 :host [part="root"] {
   gap: var(--chat-message-gap);
 }
 
-:host [part="text"] {
+:host [part="root"] [part="content"] {
+  justify-content: center;
+  align-items: flex-end;
+  gap: calc(var(--chat-message-gap) / 2);
+  flex-direction: column;
+  display: flex;
+}
+
+:host [part="root"] [part="content"] [part="text"] {
   border-width: var(--chat-message-border-width);
   border-radius: var(--chat-message-border-radius);
   border-style: var(--chat-message-border-style);
@@ -100,30 +109,40 @@ export function chatMessageElementCosmopolitanStyle() {
   border-top-right-radius: 0;
 }
 
-:host [part="dots"] {
+:host [part="root"] [part="content"] [part="dots"] {
   align-items: center;
   gap: 4px;
   display: flex;
 }
 
-:host [part="dots"] [part="dot"] {
+:host [part="root"] [part="content"] [part="dots"] [part="dot"] {
   animation: 1.2s ease-out infinite wave;
 }
 
-:host [part="dots"] [part="dot"]:nth-child(2) {
+:host [part="root"] [part="content"] [part="dots"] [part="dot"]:nth-child(2) {
   animation-delay: -1s;
 }
 
-:host [part="dots"] [part="dot"]:nth-child(3) {
+:host [part="root"] [part="content"] [part="dots"] [part="dot"]:nth-child(3) {
   animation-delay: -.8s;
 }
 
+:host [part="reactions"] {
+  height: 0;
+  display: flex;
+  position: relative;
+}
+
 :host([reply]) {
   margin-left: initial;
   margin-right: 44px;
 }
 
-:host([reply]) [part="text"] {
+:host([reply]) [part="root"] [part="content"] {
+  align-items: flex-start;
+}
+
+:host([reply]) [part="root"] [part="content"] [part="text"] {
   border-top-right-radius: var(--chat-message-border-radius);
   border-top-left-radius: 0;
 }

package/Controls/Components/Media/Chat/Themes/ChatMessageElement.Cosmopolitan.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Chat/Themes/ChatMessageElement.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,mCAAmC;IAC/C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+HT,CAAC;AACN,CAAC"}
+{"version":3,"file":"ChatMessageElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Chat/Themes/ChatMessageElement.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,mCAAmC;IAC/C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkJT,CAAC;AACN,CAAC"}

package/Controls/Components/Media/Chat/Themes/ChatMessageElement.Joy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Chat/Themes/ChatMessageElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,0BAA0B,IAAI,SAAS,CAiItD"}
+{"version":3,"file":"ChatMessageElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Chat/Themes/ChatMessageElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,0BAA0B,IAAI,SAAS,CAoJtD"}

package/Controls/Components/Media/Chat/Themes/ChatMessageElement.Joy.js

@@ -67,13 +67,22 @@ export function chatMessageElementJoyStyle() {
 :host {
   margin-left: 44px;
   margin-right: initial;
+  content-visibility: auto;
 }
 
 :host [part="root"] {
   gap: var(--chat-message-gap);
 }
 
-:host [part="text"] {
+:host [part="root"] [part="content"] {
+  justify-content: center;
+  align-items: flex-end;
+  gap: calc(var(--chat-message-gap) / 2);
+  flex-direction: column;
+  display: flex;
+}
+
+:host [part="root"] [part="content"] [part="text"] {
   border-width: var(--chat-message-border-width);
   border-radius: var(--chat-message-border-radius);
   border-style: var(--chat-message-border-style);
@@ -100,30 +109,40 @@ export function chatMessageElementJoyStyle() {
   border-top-right-radius: 0;
 }
 
-:host [part="dots"] {
+:host [part="root"] [part="content"] [part="dots"] {
   align-items: center;
   gap: 4px;
   display: flex;
 }
 
-:host [part="dots"] [part="dot"] {
+:host [part="root"] [part="content"] [part="dots"] [part="dot"] {
   animation: 1.2s ease-out infinite wave;
 }
 
-:host [part="dots"] [part="dot"]:nth-child(2) {
+:host [part="root"] [part="content"] [part="dots"] [part="dot"]:nth-child(2) {
   animation-delay: -1s;
 }
 
-:host [part="dots"] [part="dot"]:nth-child(3) {
+:host [part="root"] [part="content"] [part="dots"] [part="dot"]:nth-child(3) {
   animation-delay: -.8s;
 }
 
+:host [part="reactions"] {
+  height: 0;
+  display: flex;
+  position: relative;
+}
+
 :host([reply]) {
   margin-left: initial;
   margin-right: 44px;
 }
 
-:host([reply]) [part="text"] {
+:host([reply]) [part="root"] [part="content"] {
+  align-items: flex-start;
+}
+
+:host([reply]) [part="root"] [part="content"] [part="text"] {
   border-top-right-radius: var(--chat-message-border-radius);
   border-top-left-radius: 0;
 }

package/Controls/Components/Media/Chat/Themes/ChatMessageElement.Joy.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Chat/Themes/ChatMessageElement.Joy.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,0BAA0B;IACtC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+HT,CAAC;AACN,CAAC"}
+{"version":3,"file":"ChatMessageElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Chat/Themes/ChatMessageElement.Joy.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,0BAA0B;IACtC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkJT,CAAC;AACN,CAAC"}

package/Controls/Components/Media/Chat/Themes/ChatMessageElement.Retro.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageElement.Retro.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Chat/Themes/ChatMessageElement.Retro.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,4BAA4B,IAAI,SAAS,CAiIxD"}
+{"version":3,"file":"ChatMessageElement.Retro.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Chat/Themes/ChatMessageElement.Retro.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,4BAA4B,IAAI,SAAS,CAoJxD"}

package/Controls/Components/Media/Chat/Themes/ChatMessageElement.Retro.js

@@ -67,13 +67,22 @@ export function chatMessageElementRetroStyle() {
 :host {
   margin-left: 44px;
   margin-right: initial;
+  content-visibility: auto;
 }
 
 :host [part="root"] {
   gap: var(--chat-message-gap);
 }
 
-:host [part="text"] {
+:host [part="root"] [part="content"] {
+  justify-content: center;
+  align-items: flex-end;
+  gap: calc(var(--chat-message-gap) / 2);
+  flex-direction: column;
+  display: flex;
+}
+
+:host [part="root"] [part="content"] [part="text"] {
   border-width: var(--chat-message-border-width);
   border-radius: var(--chat-message-border-radius);
   border-style: var(--chat-message-border-style);
@@ -100,30 +109,40 @@ export function chatMessageElementRetroStyle() {
   border-top-right-radius: 0;
 }
 
-:host [part="dots"] {
+:host [part="root"] [part="content"] [part="dots"] {
   align-items: center;
   gap: 4px;
   display: flex;
 }
 
-:host [part="dots"] [part="dot"] {
+:host [part="root"] [part="content"] [part="dots"] [part="dot"] {
   animation: 1.2s ease-out infinite wave;
 }
 
-:host [part="dots"] [part="dot"]:nth-child(2) {
+:host [part="root"] [part="content"] [part="dots"] [part="dot"]:nth-child(2) {
   animation-delay: -1s;
 }
 
-:host [part="dots"] [part="dot"]:nth-child(3) {
+:host [part="root"] [part="content"] [part="dots"] [part="dot"]:nth-child(3) {
   animation-delay: -.8s;
 }
 
+:host [part="reactions"] {
+  height: 0;
+  display: flex;
+  position: relative;
+}
+
 :host([reply]) {
   margin-left: initial;
   margin-right: 44px;
 }
 
-:host([reply]) [part="text"] {
+:host([reply]) [part="root"] [part="content"] {
+  align-items: flex-start;
+}
+
+:host([reply]) [part="root"] [part="content"] [part="text"] {
   border-top-right-radius: var(--chat-message-border-radius);
   border-top-left-radius: 0;
 }

package/Controls/Components/Media/Chat/Themes/ChatMessageElement.Retro.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageElement.Retro.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Chat/Themes/ChatMessageElement.Retro.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,4BAA4B;IACxC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+HT,CAAC;AACN,CAAC"}
+{"version":3,"file":"ChatMessageElement.Retro.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Chat/Themes/ChatMessageElement.Retro.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,4BAA4B;IACxC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkJT,CAAC;AACN,CAAC"}

package/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Cosmopolitan.d.ts

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

package/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Cosmopolitan.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageReactionElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,2CAA2C,IAAI,SAAS,CAoDvE"}

package/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Cosmopolitan.js

@@ -0,0 +1,66 @@
+// ------------------------------------------------------------------------------
+// <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 chatMessageReactionElementCosmopolitanStyle() {
+    return css `
+:host {
+  --chat-message-reaction-font-family: unset;
+  --chat-message-reaction-font-letter-spacing: unset;
+  --chat-message-reaction-font-line-height: unset;
+  --chat-message-reaction-font-size: unset;
+  --chat-message-reaction-font-text-decoration: unset;
+  --chat-message-reaction-font-text-transform: unset;
+  --chat-message-reaction-font-weight: unset;
+  --chat-message-reaction-gap: unset;
+  --chat-message-reaction-padding-bottom: unset;
+  --chat-message-reaction-padding-left: unset;
+  --chat-message-reaction-padding-right: unset;
+  --chat-message-reaction-padding-top: unset;
+  --chat-message-reaction-transition-duration: unset;
+  --chat-message-reaction-transition-mode: unset;
+  --chat-message-reaction-transition-property: unset;
+  --chat-message-reaction-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 [part="emoji"], :host [part="count"] {
+  flex-shrink: 0;
+}
+
+    `;
+}
+//# sourceMappingURL=ChatMessageReactionElement.Cosmopolitan.js.map

package/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Cosmopolitan.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageReactionElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.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,2CAA2C;IACvD,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkDT,CAAC;AACN,CAAC"}

package/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Joy.d.ts

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

package/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Joy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageReactionElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,kCAAkC,IAAI,SAAS,CAoD9D"}

package/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Joy.js

@@ -0,0 +1,66 @@
+// ------------------------------------------------------------------------------
+// <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 chatMessageReactionElementJoyStyle() {
+    return css `
+:host {
+  --chat-message-reaction-font-family: unset;
+  --chat-message-reaction-font-letter-spacing: unset;
+  --chat-message-reaction-font-line-height: unset;
+  --chat-message-reaction-font-size: unset;
+  --chat-message-reaction-font-text-decoration: unset;
+  --chat-message-reaction-font-text-transform: unset;
+  --chat-message-reaction-font-weight: unset;
+  --chat-message-reaction-gap: unset;
+  --chat-message-reaction-padding-bottom: unset;
+  --chat-message-reaction-padding-left: unset;
+  --chat-message-reaction-padding-right: unset;
+  --chat-message-reaction-padding-top: unset;
+  --chat-message-reaction-transition-duration: unset;
+  --chat-message-reaction-transition-mode: unset;
+  --chat-message-reaction-transition-property: unset;
+  --chat-message-reaction-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 [part="emoji"], :host [part="count"] {
+  flex-shrink: 0;
+}
+
+    `;
+}
+//# sourceMappingURL=ChatMessageReactionElement.Joy.js.map

package/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Joy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageReactionElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Joy.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,kCAAkC;IAC9C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkDT,CAAC;AACN,CAAC"}

package/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Retro.d.ts

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

package/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Retro.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageReactionElement.Retro.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Retro.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,oCAAoC,IAAI,SAAS,CAoDhE"}

package/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Retro.js

@@ -0,0 +1,66 @@
+// ------------------------------------------------------------------------------
+// <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 chatMessageReactionElementRetroStyle() {
+    return css `
+:host {
+  --chat-message-reaction-font-family: unset;
+  --chat-message-reaction-font-letter-spacing: unset;
+  --chat-message-reaction-font-line-height: unset;
+  --chat-message-reaction-font-size: unset;
+  --chat-message-reaction-font-text-decoration: unset;
+  --chat-message-reaction-font-text-transform: unset;
+  --chat-message-reaction-font-weight: unset;
+  --chat-message-reaction-gap: unset;
+  --chat-message-reaction-padding-bottom: unset;
+  --chat-message-reaction-padding-left: unset;
+  --chat-message-reaction-padding-right: unset;
+  --chat-message-reaction-padding-top: unset;
+  --chat-message-reaction-transition-duration: unset;
+  --chat-message-reaction-transition-mode: unset;
+  --chat-message-reaction-transition-property: unset;
+  --chat-message-reaction-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 [part="emoji"], :host [part="count"] {
+  flex-shrink: 0;
+}
+
+    `;
+}
+//# sourceMappingURL=ChatMessageReactionElement.Retro.js.map

package/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Retro.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageReactionElement.Retro.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Retro.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,oCAAoC;IAChD,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkDT,CAAC;AACN,CAAC"}

package/Controls/Components/Media/Chat/Tools/AttachmentChatToolElement.d.ts

@@ -1,14 +1,18 @@
 import { IAttachmentChatToolElementProps } from './IAttachmentChatToolElementProps';
 import { ChatToolBaseElement } from './Abstracts/ChatToolBaseElement';
+import { IEventEmitter } from '@breadstone/mosaik-elements';
+import { IChatAttachmentRejectEventDetail } from '../Events/IChatAttachmentRejectEvent';
 declare const AttachmentChatToolElement_base: (abstract new (...args: Array<any>) => import("../../../../Behaviors/Themeable").IThemeableProps) & typeof ChatToolBaseElement & import("../../../../Behaviors/Themeable").IThemeableCtor;
 /**
  * The `{@link AttachmentChatToolElement}` element.
  *
  * @fires filePicked - Called when a file is picked.
+ * @fires chatAttachmentRejected - Called when an attachment is rejected.
  *
  * @public
  */
 export declare class AttachmentChatToolElement extends AttachmentChatToolElement_base implements IAttachmentChatToolElementProps {
+    private readonly _attachmentRejected;
     private _multiple;
     private _accept;
     private _directory;
@@ -66,11 +70,29 @@ export declare class AttachmentChatToolElement extends AttachmentChatToolElement
      */
     get maxFileSize(): number;
     set maxFileSize(value: number);
+    /**
+     * Called when an attachment is rejected.
+     * Provides reference to `{@link IChatAttachmentRejectEventDetail}` as event detail.
+     *
+     * @public
+     * @readonly
+     * @eventProperty
+     */
+    get attachmentRejected(): IEventEmitter<IChatAttachmentRejectEventDetail>;
     /**
      * @public
      * @override
      */
     execute(args: FileList | Array<File>): boolean;
+    /**
+     * Emits the {@link attachmentRejected} event.
+     *
+     * @protected
+     */
+    protected onAttachmentRejected(args: IChatAttachmentRejectEventDetail): void;
+    /**
+     * @private
+     */
     private validate;
 }
 /**

package/Controls/Components/Media/Chat/Tools/AttachmentChatToolElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentChatToolElement.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Chat/Tools/AttachmentChatToolElement.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,+BAA+B,EAAE,MAAM,mCAAmC,CAAC;AACpF,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;;AAKtE;;;;;;GAMG;AACH,qBAgBa,yBACT,SAAQ,8BACR,YAAW,+BAA+B;IAI1C,OAAO,CAAC,SAAS,CAAU;IAC3B,OAAO,CAAC,OAAO,CAAgB;IAC/B,OAAO,CAAC,UAAU,CAAU;IAC5B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,YAAY,CAAS;IAM7B;;OAEG;;IAeH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IAIW,QAAQ,IAAI,OAAO,CAE7B;IAED,IAAW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAKjC;IAED;;;;OAIG;IACH,IACW,MAAM,IAAI,KAAK,CAAC,MAAM,CAAC,CAEjC;IAED,IAAW,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,EAKrC;IAED;;;;;OAKG;IACH,IAIW,SAAS,IAAI,OAAO,CAE9B;IAED,IAAW,SAAS,CAAC,KAAK,EAAE,OAAO,EAKlC;IAED;;;;;OAKG;IACH,IAIW,QAAQ,IAAI,MAAM,CAE5B;IAED,IAAW,QAAQ,CAAC,KAAK,EAAE,MAAM,EAKhC;IAED;;;;;OAKG;IACH,IAIW,WAAW,IAAI,MAAM,CAE/B;IAED,IAAW,WAAW,CAAC,KAAK,EAAE,MAAM,EAKnC;IAMD;;;OAGG;IACa,OAAO,CAAC,IAAI,EAAE,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,OAAO;IAe9D,OAAO,CAAC,QAAQ;CAmBnB;AAED;;GAEG;AACH,yBAAiB,yBAAyB,CAAC;IACvC,KAAY,KAAK,GAAG,+BAA+B,CAAC;CACvD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,6BAA6B,EAAE,yBAAyB,CAAC;KAC5D;CACJ"}
+{"version":3,"file":"AttachmentChatToolElement.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Chat/Tools/AttachmentChatToolElement.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,+BAA+B,EAAE,MAAM,mCAAmC,CAAC;AACpF,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAGtE,OAAO,EAAE,aAAa,EAA2B,MAAM,6BAA6B,CAAC;AACrF,OAAO,EAAE,gCAAgC,EAAE,MAAM,sCAAsC,CAAC;;AAIxF;;;;;;;GAOG;AACH,qBAgBa,yBACT,SAAQ,8BACR,YAAW,+BAA+B;IAK1C,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAAkD;IACtF,OAAO,CAAC,SAAS,CAAU;IAC3B,OAAO,CAAC,OAAO,CAAgB;IAC/B,OAAO,CAAC,UAAU,CAAU;IAC5B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,YAAY,CAAS;IAM7B;;OAEG;;IAgBH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IAIW,QAAQ,IAAI,OAAO,CAE7B;IAED,IAAW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAKjC;IAED;;;;OAIG;IACH,IACW,MAAM,IAAI,KAAK,CAAC,MAAM,CAAC,CAEjC;IAED,IAAW,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,EAKrC;IAED;;;;;OAKG;IACH,IAIW,SAAS,IAAI,OAAO,CAE9B;IAED,IAAW,SAAS,CAAC,KAAK,EAAE,OAAO,EAKlC;IAED;;;;;OAKG;IACH,IAIW,QAAQ,IAAI,MAAM,CAE5B;IAED,IAAW,QAAQ,CAAC,KAAK,EAAE,MAAM,EAKhC;IAED;;;;;OAKG;IACH,IAIW,WAAW,IAAI,MAAM,CAE/B;IAED,IAAW,WAAW,CAAC,KAAK,EAAE,MAAM,EAKnC;IAED;;;;;;;OAOG;IACH,IAAW,kBAAkB,IAAI,aAAa,CAAC,gCAAgC,CAAC,CAE/E;IAMD;;;OAGG;IACa,OAAO,CAAC,IAAI,EAAE,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,OAAO;IAqB9D;;;;OAIG;IACH,SAAS,CAAC,oBAAoB,CAAC,IAAI,EAAE,gCAAgC,GAAG,IAAI;IAI5E;;OAEG;IACH,OAAO,CAAC,QAAQ;CAoCnB;AAED;;GAEG;AACH,yBAAiB,yBAAyB,CAAC;IACvC,KAAY,KAAK,GAAG,+BAA+B,CAAC;CACvD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,6BAA6B,EAAE,yBAAyB,CAAC;KAC5D;CACJ"}

package/Controls/Components/Media/Chat/Tools/AttachmentChatToolElement.js

@@ -16,16 +16,20 @@ import { FilePickerElement } from '../../../Inputs/FileUpload/FilePickerElement'
 import { attachmentChatToolElementTemplate } from './AttachmentChatToolElementTemplate';
 import { ChatToolBaseElement } from './Abstracts/ChatToolBaseElement';
 import { Themeable } from '../../../../Behaviors/Themeable';
+import { Emit } from '../../../../../Events/Decorators/EmitDecorator';
+import { HTMLElementEventEmitter } from '@breadstone/mosaik-elements';
 // #endregion
 /**
  * The `{@link AttachmentChatToolElement}` element.
  *
  * @fires filePicked - Called when a file is picked.
+ * @fires chatAttachmentRejected - Called when an attachment is rejected.
  *
  * @public
  */
 let AttachmentChatToolElement = class AttachmentChatToolElement extends Themeable(ChatToolBaseElement) {
     // #region Fields
+    _attachmentRejected;
     _multiple;
     _accept;
     _directory;
@@ -43,6 +47,7 @@ let AttachmentChatToolElement = class AttachmentChatToolElement extends Themeabl
         this._directory = false;
         this._maxFiles = 10;
         this._maxFileSize = 10 * 1024 * 1024; // 10 MB
+        this._attachmentRejected = new HTMLElementEventEmitter(this, 'attachmentRejected');
     }
     // #endregion
     // #region Properties
@@ -131,6 +136,17 @@ let AttachmentChatToolElement = class AttachmentChatToolElement extends Themeabl
             this.requestUpdate('maxFileSize');
         }
     }
+    /**
+     * Called when an attachment is rejected.
+     * Provides reference to `{@link IChatAttachmentRejectEventDetail}` as event detail.
+     *
+     * @public
+     * @readonly
+     * @eventProperty
+     */
+    get attachmentRejected() {
+        return this._attachmentRejected;
+    }
     // #endregion
     // #region Methods
     /**
@@ -138,30 +154,64 @@ let AttachmentChatToolElement = class AttachmentChatToolElement extends Themeabl
      * @override
      */
     execute(args) {
-        if (!this.chatElement?.input) {
+        // check if fileList or array of files
+        if (!(args instanceof FileList || Array.isArray(args))) {
+            return false;
+        }
+        if (!this.chatElement?.inputElement) {
             return false;
         }
         if (!Array.from(args).every((file) => this.validate(file))) {
             return false;
         }
-        this.chatElement.input.value.files.push(...Array.from(args));
-        this.chatElement.input.requestUpdate('value');
+        this.chatElement.inputElement.value.files.push(...Array.from(args));
+        this.chatElement.inputElement.requestUpdate('value');
+        this.chatElement.inputElement.attachmentsElement.requestUpdate('files');
         return true;
     }
+    /**
+     * Emits the {@link attachmentRejected} event.
+     *
+     * @protected
+     */
+    onAttachmentRejected(args) {
+        this._attachmentRejected.emit(args);
+    }
+    /**
+     * @private
+     */
     validate(file) {
-        // TODO: find a way not notify the user, maybe with an callback function.
-        //       and find a way to mark the chatInput as invalid.
+        if (this.accept.length > 0 && !this.accept.includes(file.type)) {
+            this.onAttachmentRejected({
+                file: file,
+                reason: 'type',
+                cancel: true
+            });
+            return false;
+        }
         if (file.size > this.maxFileSize) {
-            // this.chatElement?.input?.setError(`File size exceeds ${this.maxFileSize / 1024 / 1024} MB`);
+            this.onAttachmentRejected({
+                file: file,
+                reason: 'size',
+                cancel: true
+            });
             return false;
         }
-        if (this.accept.length > 0 && !this.accept.includes(file.type)) {
-            // this.chatElement?.input?.setError(`Invalid file type. Accepted types: ${this.accept.join(', ')}`);
+        if (this.chatElement?.inputElement && this.chatElement.inputElement.value.files.length >= this.maxFiles) {
+            this.onAttachmentRejected({
+                file: file,
+                reason: 'count',
+                cancel: true
+            });
             return false;
         }
         return true;
     }
 };
+__decorate([
+    Emit({ eventName: 'attachmentRejected' }),
+    __metadata("design:type", Object)
+], AttachmentChatToolElement.prototype, "_attachmentRejected", void 0);
 __decorate([
     Attribute({
         type: Boolean,