@breadstone/mosaik-elements-svelte 0.1.4 → 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/index.mjs +1245 -943
  3. package/package.json +3 -3
package/index.mjs CHANGED
@@ -105996,7 +105996,7 @@ function GU(e) {
105996
105996
  <mosaik-sticky part="sticky">
105997
105997
  <slot name="header">
105998
105998
  <mosaik-text part="header"
105999
- .text="${e.header} ${e.count}"
105999
+ .text="${e.header}"
106000
106000
  .truncate="${!0}"></mosaik-text>
106001
106001
  </slot>
106002
106002
  <slot></slot>
@@ -106004,7 +106004,7 @@ function GU(e) {
106004
106004
  `, () => V`
106005
106005
  <slot name="header">
106006
106006
  <mosaik-text part="header"
106007
- .text="${e.header} ${e.count}"
106007
+ .text="${e.header}"
106008
106008
  .truncate="${!0}"></mosaik-text>
106009
106009
  </slot>
106010
106010
  <slot></slot>
@@ -112594,8 +112594,10 @@ function CG(e) {
112594
112594
  function wG(e) {
112595
112595
  return V`
112596
112596
  <div part="root">
112597
- <svg xmlns="http://www.w3.org/2000/svg">
112598
- <line x1="${e.orientation === K.Vertical ? "50%" : "0"}"
112597
+ <svg part="svg"
112598
+ xmlns="http://www.w3.org/2000/svg">
112599
+ <line part="line"
112600
+ x1="${e.orientation === K.Vertical ? "50%" : "0"}"
112599
112601
  y1="${e.orientation === K.Vertical ? "0" : "50%"}"
112600
112602
  x2="${e.orientation === K.Vertical ? "50%" : "100%"}"
112601
112603
  y2="${e.orientation === K.Vertical ? "100%" : "50%"}"/>
@@ -112677,14 +112679,13 @@ function TG() {
112677
112679
  overflow: inherit;
112678
112680
  }
112679
112681
 
112680
- :host [part="root"] svg {
112682
+ :host [part="root"] [part="svg"] {
112681
112683
  width: 100%;
112682
112684
  height: 100%;
112683
112685
  position: absolute;
112684
- translate: -50%;
112685
112686
  }
112686
112687
 
112687
- :host [part="root"] svg line {
112688
+ :host [part="root"] [part="svg"] [part="line"] {
112688
112689
  stroke: var(--divider-background-color);
112689
112690
  stroke-width: var(--divider-thickness);
112690
112691
  stroke-dasharray: none;
@@ -112773,14 +112774,13 @@ function EG() {
112773
112774
  overflow: inherit;
112774
112775
  }
112775
112776
 
112776
- :host [part="root"] svg {
112777
+ :host [part="root"] [part="svg"] {
112777
112778
  width: 100%;
112778
112779
  height: 100%;
112779
112780
  position: absolute;
112780
- translate: -50%;
112781
112781
  }
112782
112782
 
112783
- :host [part="root"] svg line {
112783
+ :host [part="root"] [part="svg"] [part="line"] {
112784
112784
  stroke: var(--divider-background-color);
112785
112785
  stroke-width: var(--divider-thickness);
112786
112786
  stroke-dasharray: none;
@@ -112873,14 +112873,13 @@ function DG() {
112873
112873
  overflow: inherit;
112874
112874
  }
112875
112875
 
112876
- :host [part="root"] svg {
112876
+ :host [part="root"] [part="svg"] {
112877
112877
  width: 100%;
112878
112878
  height: 100%;
112879
112879
  position: absolute;
112880
- translate: -50%;
112881
112880
  }
112882
112881
 
112883
- :host [part="root"] svg line {
112882
+ :host [part="root"] [part="svg"] [part="line"] {
112884
112883
  stroke: var(--divider-background-color);
112885
112884
  stroke-width: var(--divider-thickness);
112886
112885
  stroke-dasharray: none;
@@ -151860,15 +151859,18 @@ function wme(e) {
151860
151859
  return V`
151861
151860
  <slot name="header"></slot>
151862
151861
  <div part="messagesWrapper">
151863
- <div part="messages">
151864
- <slot name="message"></slot>
151865
- ${U(e.scrollToEnd, () => V`
151866
- <mosaik-back-top part="backTop"
151867
- .dir="${e.dir}"
151868
- .lang="${e.lang}"
151869
- .to="${"bottom"}"></mosaik-back-top>
151870
- `)}
151871
- </div>
151862
+ <mosaik-scroll part="scroll"
151863
+ .orientation="${"vertical"}">
151864
+ <div part="messages">
151865
+ <slot name="message"></slot>
151866
+ ${U(e.scrollToEnd, () => V`
151867
+ <mosaik-back-top part="backTop"
151868
+ .dir="${e.dir}"
151869
+ .lang="${e.lang}"
151870
+ .to="${"bottom"}"></mosaik-back-top>
151871
+ `)}
151872
+ </div>
151873
+ </mosaik-scroll>
151872
151874
  </div>
151873
151875
  <div part="empty">
151874
151876
  <slot name="empty"></slot>
@@ -152989,6 +152991,8 @@ function Wme(e) {
152989
152991
  .dir="${e.dir}"
152990
152992
  .placeholder="${e.placeholder}"
152991
152993
  .multiline="${!0}"
152994
+ .multilineRows="${e.minRows}"
152995
+ .multilineMaxRows="${e.maxRows}"
152992
152996
  .value="${Wb(e.value.message)}"
152993
152997
  .appearance="${q.Plain}"
152994
152998
  .variant="${e.variant}"
@@ -153501,6 +153505,8 @@ var Y$ = function(e, t, n, r) {
153501
153505
  _transformer;
153502
153506
  _value;
153503
153507
  _placeholder;
153508
+ _minRows;
153509
+ _maxRows;
153504
153510
  constructor() {
153505
153511
  super(), this._value = {
153506
153512
  message: "",
@@ -153511,7 +153517,7 @@ var Y$ = function(e, t, n, r) {
153511
153517
  files: e.files
153512
153518
  },
153513
153519
  isValid: () => !!e.text.length
153514
- }), this._submitted = new E(this, "chatSubmit", { bubbles: !1 });
153520
+ }), this._minRows = 1, this._maxRows = 12, this._submitted = new E(this, "chatSubmit", { bubbles: !1 });
153515
153521
  }
153516
153522
  static get is() {
153517
153523
  return "mosaik-chat-input";
@@ -153522,6 +153528,18 @@ var Y$ = function(e, t, n, r) {
153522
153528
  set value(e) {
153523
153529
  this._value !== e && (this._value = e, this.requestUpdate("value"));
153524
153530
  }
153531
+ get minRows() {
153532
+ return this._minRows;
153533
+ }
153534
+ set minRows(e) {
153535
+ this._minRows !== e && (this._minRows = e, this.requestUpdate("minRows"));
153536
+ }
153537
+ get maxRows() {
153538
+ return this._maxRows;
153539
+ }
153540
+ set maxRows(e) {
153541
+ this._maxRows !== e && (this._maxRows = e, this.requestUpdate("maxRows"));
153542
+ }
153525
153543
  get placeholder() {
153526
153544
  return this._placeholder;
153527
153545
  }
@@ -153597,6 +153615,14 @@ Y$([
153597
153615
  X$("design:type", Object),
153598
153616
  X$("design:paramtypes", [Object])
153599
153617
  ], Z$.prototype, "value", null), Y$([
153618
+ P({ type: Number }),
153619
+ X$("design:type", Number),
153620
+ X$("design:paramtypes", [Number])
153621
+ ], Z$.prototype, "minRows", null), Y$([
153622
+ P({ type: Number }),
153623
+ X$("design:type", Number),
153624
+ X$("design:paramtypes", [Number])
153625
+ ], Z$.prototype, "maxRows", null), Y$([
153600
153626
  A({ type: String }),
153601
153627
  X$("design:type", String),
153602
153628
  X$("design:paramtypes", [String])
@@ -153765,6 +153791,10 @@ function Yme() {
153765
153791
  display: inline-flex;
153766
153792
  }
153767
153793
 
153794
+ :host [part="divider"]::part(svg) {
153795
+ translate: -50%;
153796
+ }
153797
+
153768
153798
  :host [part="text"] {
153769
153799
  flex-shrink: 0;
153770
153800
  }
@@ -153865,6 +153895,10 @@ function Xme() {
153865
153895
  display: inline-flex;
153866
153896
  }
153867
153897
 
153898
+ :host [part="divider"]::part(svg) {
153899
+ translate: -50%;
153900
+ }
153901
+
153868
153902
  :host [part="text"] {
153869
153903
  flex-shrink: 0;
153870
153904
  }
@@ -153965,6 +153999,10 @@ function Zme() {
153965
153999
  display: inline-flex;
153966
154000
  }
153967
154001
 
154002
+ :host [part="divider"]::part(svg) {
154003
+ translate: -50%;
154004
+ }
154005
+
153968
154006
  :host [part="text"] {
153969
154007
  flex-shrink: 0;
153970
154008
  }
@@ -154347,56 +154385,67 @@ function nhe(e) {
154347
154385
  <div part="root">
154348
154386
  <slot name="avatar"
154349
154387
  @slotchange="${(t) => e.onSlotChange(t)}"></slot>
154350
- <div part="content">
154351
- <div part="message">
154352
- ${U(!e.isBusy, () => V`
154353
- <div part="header">
154354
- <slot name="author">
154355
- ${U(e.author.trim(), () => V`
154356
- <mosaik-text part="author"
154357
- .dir="${e.dir}"
154358
- .text="${e.author}"
154359
- .formatter="${e.formatter}"
154360
- .truncate="${!0}"></mosaik-text>
154361
- `)}
154362
- </slot>
154363
- <slot name="at">
154364
- <mosaik-text part="at"
154365
- .dir="${e.dir}"
154366
- .text="${e.at}"
154367
- .formatter="${e.formatter}"></mosaik-text>
154368
- </slot>
154369
- </div>
154370
- `)}
154371
- <div part="content">
154372
- <slot name="text">
154373
- ${U(e.isBusy, () => V`
154374
- <div part="busy">
154375
- <mosaik-dot part="dot"
154376
- .size="${G.Tiny}"></mosaik-dot>
154377
- <mosaik-dot part="dot"
154378
- .size="${G.Tiny}"></mosaik-dot>
154379
- <mosaik-dot part="dot"
154380
- .size="${G.Tiny}"></mosaik-dot>
154388
+ <div part="message-area">
154389
+ <div part="message-stack">
154390
+ <div part="message-line">
154391
+ <div part="message">
154392
+ ${U(!e.isBusy, () => V`
154393
+ <div part="header">
154394
+ <slot name="author">
154395
+ ${U(e.author.trim(), () => V`
154396
+ <mosaik-text part="author"
154397
+ .dir="${e.dir}"
154398
+ .text="${e.author}"
154399
+ .formatter="${e.formatter}"
154400
+ .truncate="${!0}"></mosaik-text>
154401
+ `)}
154402
+ </slot>
154403
+ <slot name="at">
154404
+ <mosaik-text part="at"
154405
+ .dir="${e.dir}"
154406
+ .text="${e.at}"
154407
+ .formatter="${e.formatter}"></mosaik-text>
154408
+ </slot>
154381
154409
  </div>
154382
- `, () => V`
154383
- <mosaik-text part="text"
154384
- .dir="${e.dir}"
154385
- .text="${e.text}"
154386
- .formatter="${e.formatter}"
154387
- .wrap="${!0}"></mosaik-text>
154388
154410
  `)}
154389
- </slot>
154411
+ <div part="message-body">
154412
+ <slot name="text">
154413
+ ${U(e.isBusy, () => V`
154414
+ <div part="busy">
154415
+ <mosaik-dot part="dot"
154416
+ .size="${G.Tiny}"></mosaik-dot>
154417
+ <mosaik-dot part="dot"
154418
+ .size="${G.Tiny}"></mosaik-dot>
154419
+ <mosaik-dot part="dot"
154420
+ .size="${G.Tiny}"></mosaik-dot>
154421
+ </div>
154422
+ `, () => V`
154423
+ <mosaik-text part="text"
154424
+ .dir="${e.dir}"
154425
+ .text="${e.text}"
154426
+ .formatter="${e.formatter}"
154427
+ .wrap="${!0}"></mosaik-text>
154428
+ `)}
154429
+ </slot>
154430
+ </div>
154431
+ </div>
154432
+ <div part="message-after"
154433
+ ?hidden="${!DM(e, "has-after", e.hasSlotContent("after"))}">
154434
+ <slot name="after"></slot>
154435
+ </div>
154390
154436
  </div>
154391
- <div part="reactions"
154392
- ?hidden="${!DM(e, "has-reactions", e.hasSlotContent("reaction"))}">
154393
- <slot name="reaction"></slot>
154437
+ <div part="footer"
154438
+ ?hidden="${!DM(e, "has-footer", e.hasSlotContent("reaction") || e.hasSlotContent("actions"))}">
154439
+ <div part="actions"
154440
+ ?hidden="${!DM(e, "has-actions", e.hasSlotContent("actions"))}">
154441
+ <slot name="actions"></slot>
154442
+ </div>
154443
+ <div part="reactions"
154444
+ ?hidden="${!DM(e, "has-reactions", e.hasSlotContent("reaction"))}">
154445
+ <slot name="reaction"></slot>
154446
+ </div>
154394
154447
  </div>
154395
154448
  </div>
154396
- <div part="actions"
154397
- ?hidden="${!DM(e, "has-actions", e.hasSlotContent("actions"))}">
154398
- <slot name="actions"></slot>
154399
- </div>
154400
154449
  <slot name="attachment"></slot>
154401
154450
  </div>
154402
154451
  </div>
@@ -154471,226 +154520,47 @@ function rhe() {
154471
154520
  }
154472
154521
 
154473
154522
  :host [part="root"] {
154474
- justify-content: stretch;
154475
- align-items: stretch;
154523
+ justify-content: flex-end;
154524
+ align-items: flex-start;
154476
154525
  gap: var(--chat-message-gap);
154477
154526
  flex-direction: row-reverse;
154478
154527
  display: flex;
154479
154528
  }
154480
154529
 
154481
- :host [part="root"] [part="content"] {
154530
+ :host [part="root"] [part="message-area"] {
154482
154531
  justify-content: center;
154483
154532
  align-items: flex-end;
154484
154533
  gap: calc(var(--chat-message-gap) / 2);
154485
154534
  flex-direction: column;
154535
+ flex: 1;
154536
+ min-width: 0;
154537
+ max-width: 100%;
154486
154538
  display: flex;
154487
154539
  }
154488
154540
 
154489
- :host [part="root"] [part="content"] [part="message"] {
154490
- border-width: var(--chat-message-border-width);
154491
- border-radius: var(--chat-message-border-radius);
154492
- border-style: var(--chat-message-border-style);
154493
- background-color: var(--chat-message-background-color);
154494
- border-color: var(--chat-message-border-color);
154495
- color: var(--chat-message-foreground-color);
154496
- padding-top: var(--chat-message-padding-top);
154497
- padding-right: var(--chat-message-padding-right);
154498
- padding-bottom: var(--chat-message-padding-bottom);
154499
- padding-left: var(--chat-message-padding-left);
154500
- gap: calc(var(--chat-message-gap) / 2);
154501
- transition-duration: var(--chat-message-transition-duration);
154502
- transition-timing-function: var(--chat-message-transition-mode);
154503
- transition-property: var(--chat-message-transition-property);
154504
- font-family: var(--chat-message-font-family);
154505
- font-size: var(--chat-message-font-size);
154506
- line-height: var(--chat-message-font-line-height);
154507
- font-weight: var(--chat-message-font-weight);
154508
- letter-spacing: var(--chat-message-font-letter-spacing);
154509
- -webkit-text-decoration: var(--chat-message-font-text-decoration);
154510
- text-decoration: var(--chat-message-font-text-decoration);
154511
- text-transform: var(--chat-message-font-text-transform);
154512
- box-shadow: var(--chat-message-shadow-offset-x) var(--chat-message-shadow-offset-y) var(--chat-message-shadow-blur) var(--chat-message-shadow-spread) var(--chat-message-shadow-color);
154513
- border-top-right-radius: 0;
154541
+ :host [part="root"] [part="message-area"] [part="message-stack"] {
154514
154542
  flex-direction: column;
154543
+ align-items: flex-end;
154544
+ width: max-content;
154545
+ min-width: 0;
154546
+ max-width: 100%;
154515
154547
  display: flex;
154516
- position: relative;
154517
- }
154518
-
154519
- :host [part="root"] [part="content"] [part="message"] [part="header"] {
154520
- gap: var(--chat-message-gap);
154521
- justify-content: space-between;
154522
- align-items: center;
154523
- display: flex;
154524
- }
154525
-
154526
- :host [part="root"] [part="content"] [part="message"] [part="content"] [part="text"] {
154527
- word-break: break-word;
154528
- }
154529
-
154530
- :host [part="root"] [part="content"] [part="message"] [part="content"] [part="busy"] {
154531
- gap: calc(var(--chat-message-gap) / 2);
154532
- align-items: center;
154533
- display: flex;
154534
- }
154535
-
154536
- :host [part="root"] [part="content"] [part="message"] [part="content"] [part="busy"] [part="dot"] {
154537
- animation: 1.2s ease-out infinite wave;
154538
- }
154539
-
154540
- :host [part="root"] [part="content"] [part="message"] [part="content"] [part="busy"] [part="dot"]:nth-child(2) {
154541
- animation-delay: -1s;
154542
- }
154543
-
154544
- :host [part="root"] [part="content"] [part="message"] [part="content"] [part="busy"] [part="dot"]:nth-child(3) {
154545
- animation-delay: -.8s;
154546
- }
154547
-
154548
- :host [part="root"] [part="content"] [part="message"] [part="reactions"] {
154549
- height: 0;
154550
- bottom: 0;
154551
- left: unset;
154552
- display: flex;
154553
- position: absolute;
154554
- right: 0;
154555
- }
154556
-
154557
- :host [part="root"] [part="content"] [part="actions"] {
154558
- height: 0;
154559
- bottom: 0;
154560
- left: 0;
154561
- right: unset;
154562
- display: flex;
154563
- position: absolute;
154564
154548
  }
154565
154549
 
154566
- :host([reply]) {
154567
- margin-left: initial;
154568
- margin-right: var(--chat-message-white-space);
154569
- }
154570
-
154571
- :host([reply]) [part="root"] {
154572
- flex-direction: row;
154573
- }
154574
-
154575
- :host([reply]) [part="root"] [part="content"] {
154550
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] {
154551
+ justify-content: flex-end;
154576
154552
  align-items: flex-start;
154577
- }
154578
-
154579
- :host([reply]) [part="root"] [part="content"] [part="message"] {
154580
- border-top-right-radius: var(--chat-message-border-radius);
154581
- border-top-left-radius: 0;
154582
- }
154583
-
154584
- :host([reply]) [part="root"] [part="reactions"] {
154585
- right: unset;
154586
- left: 0;
154587
- }
154588
-
154589
- :host([reply]) [part="root"] [part="actions"] {
154590
- right: 0;
154591
- left: unset;
154592
- }
154593
-
154594
- :host([has-reactions]), :host([has-actions]) {
154595
- margin-bottom: calc(var(--chat-message-white-space) / 2);
154596
- }
154597
-
154598
- @keyframes wave {
154599
- 0%, 60%, 100% {
154600
- transform: initial;
154601
- }
154602
-
154603
- 30% {
154604
- transform: translateY(-4px);
154605
- }
154606
- }
154607
-
154608
- `;
154609
- }
154610
- //#endregion
154611
- //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/Themes/ChatMessageElement.Joy.js
154612
- function ihe() {
154613
- return B`
154614
- :host {
154615
- --chat-message-background-color: var(--joy-scheme-background);
154616
- --chat-message-border-color: var(--joy-scheme-highlight);
154617
- --chat-message-border-radius: var(--joy-layout-radius);
154618
- --chat-message-border-style: solid;
154619
- --chat-message-border-width: var(--joy-layout-thickness);
154620
- --chat-message-font-family: var(--joy-font-family);
154621
- --chat-message-font-letter-spacing: var(--joy-typography-body1-letter-spacing);
154622
- --chat-message-font-line-height: var(--joy-typography-body1-line-height);
154623
- --chat-message-font-size: var(--joy-typography-body1-font-size);
154624
- --chat-message-font-text-decoration: var(--joy-typography-body1-text-decoration);
154625
- --chat-message-font-text-transform: var(--joy-typography-body1-text-transform);
154626
- --chat-message-font-weight: var(--joy-typography-body1-font-weight);
154627
- --chat-message-foreground-color: var(--joy-scheme-foreground);
154628
- --chat-message-gap: var(--joy-layout-space);
154629
- --chat-message-padding-bottom: var(--joy-layout-space);
154630
- --chat-message-padding-left: calc(var(--joy-layout-space) * 2);
154631
- --chat-message-padding-right: calc(var(--joy-layout-space) * 2);
154632
- --chat-message-padding-top: var(--joy-layout-space);
154633
- --chat-message-shadow: var(--joy-elevation-light-offset-x-1) var(--joy-elevation-light-offset-y-1) var(--joy-elevation-light-blur-1) var(--joy-elevation-light-spread-1) var(--joy-elevation-light-color-1);
154634
- --chat-message-shadow-blur: var(--joy-elevation-light-blur-1);
154635
- --chat-message-shadow-color: var(--joy-elevation-light-color-1);
154636
- --chat-message-shadow-offset-x: var(--joy-elevation-light-offset-x-1);
154637
- --chat-message-shadow-offset-y: var(--joy-elevation-light-offset-y-1);
154638
- --chat-message-shadow-spread: var(--joy-elevation-light-spread-1);
154639
- --chat-message-transition-duration: var(--joy-duration-short);
154640
- --chat-message-transition-mode: ease;
154641
- --chat-message-transition-property: background-color, color, border-color, opacity, box-shadow, translate, transform;
154642
- --chat-message-translate: none;
154643
- --chat-message-white-space: 44px;
154644
- }
154645
-
154646
- @media screen and (prefers-reduced-motion: reduce) {
154647
- :host {
154648
- transition-duration: .01ms;
154649
- }
154650
- }
154651
-
154652
- :host {
154653
- box-sizing: border-box;
154654
- display: block;
154655
- position: relative;
154656
- }
154657
-
154658
- :host *, :host :before, :host :after {
154659
- box-sizing: border-box;
154660
- background-repeat: no-repeat;
154661
- }
154662
-
154663
- :host :before, :host :after {
154664
- text-decoration: inherit;
154665
- vertical-align: inherit;
154666
- }
154667
-
154668
- :host([hidden]) {
154669
- display: none !important;
154670
- }
154671
-
154672
- :host {
154673
- margin-left: var(--chat-message-white-space);
154674
- margin-right: initial;
154675
- }
154676
-
154677
- :host [part="root"] {
154678
- justify-content: stretch;
154679
- align-items: stretch;
154680
- gap: var(--chat-message-gap);
154681
- flex-direction: row-reverse;
154682
- display: flex;
154683
- }
154684
-
154685
- :host [part="root"] [part="content"] {
154686
- justify-content: center;
154687
- align-items: flex-end;
154688
154553
  gap: calc(var(--chat-message-gap) / 2);
154689
- flex-direction: column;
154554
+ box-sizing: border-box;
154555
+ flex-direction: row;
154556
+ width: 100%;
154557
+ min-width: 0;
154558
+ max-width: 100%;
154690
154559
  display: flex;
154560
+ position: relative;
154691
154561
  }
154692
154562
 
154693
- :host [part="root"] [part="content"] [part="message"] {
154563
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] {
154694
154564
  border-width: var(--chat-message-border-width);
154695
154565
  border-radius: var(--chat-message-border-radius);
154696
154566
  border-style: var(--chat-message-border-style);
@@ -154714,57 +154584,381 @@ function ihe() {
154714
154584
  text-decoration: var(--chat-message-font-text-decoration);
154715
154585
  text-transform: var(--chat-message-font-text-transform);
154716
154586
  box-shadow: var(--chat-message-shadow-offset-x) var(--chat-message-shadow-offset-y) var(--chat-message-shadow-blur) var(--chat-message-shadow-spread) var(--chat-message-shadow-color);
154587
+ box-sizing: border-box;
154717
154588
  border-top-right-radius: 0;
154718
154589
  flex-direction: column;
154590
+ flex: auto;
154591
+ min-width: 0;
154592
+ max-width: 100%;
154719
154593
  display: flex;
154720
- position: relative;
154721
154594
  }
154722
154595
 
154723
- :host [part="root"] [part="content"] [part="message"] [part="header"] {
154596
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="header"] {
154724
154597
  gap: var(--chat-message-gap);
154725
154598
  justify-content: space-between;
154726
154599
  align-items: center;
154727
154600
  display: flex;
154728
154601
  }
154729
154602
 
154730
- :host [part="root"] [part="content"] [part="message"] [part="content"] [part="text"] {
154603
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="text"] {
154731
154604
  word-break: break-word;
154732
154605
  }
154733
154606
 
154734
- :host [part="root"] [part="content"] [part="message"] [part="content"] [part="busy"] {
154607
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="busy"] {
154735
154608
  gap: calc(var(--chat-message-gap) / 2);
154736
154609
  align-items: center;
154737
154610
  display: flex;
154738
154611
  }
154739
154612
 
154740
- :host [part="root"] [part="content"] [part="message"] [part="content"] [part="busy"] [part="dot"] {
154613
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="busy"] [part="dot"] {
154741
154614
  animation: 1.2s ease-out infinite wave;
154742
154615
  }
154743
154616
 
154744
- :host [part="root"] [part="content"] [part="message"] [part="content"] [part="busy"] [part="dot"]:nth-child(2) {
154617
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="busy"] [part="dot"]:nth-child(2) {
154745
154618
  animation-delay: -1s;
154746
154619
  }
154747
154620
 
154748
- :host [part="root"] [part="content"] [part="message"] [part="content"] [part="busy"] [part="dot"]:nth-child(3) {
154621
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="busy"] [part="dot"]:nth-child(3) {
154749
154622
  animation-delay: -.8s;
154750
154623
  }
154751
154624
 
154752
- :host [part="root"] [part="content"] [part="message"] [part="reactions"] {
154753
- height: 0;
154754
- bottom: 0;
154755
- left: unset;
154625
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message-after"] {
154626
+ flex-shrink: 0;
154627
+ align-items: flex-start;
154756
154628
  display: flex;
154757
154629
  position: absolute;
154758
- right: 0;
154630
+ inset-block-start: 0;
154631
+ inset-inline-start: calc(100% + var(--chat-message-gap) / 2);
154759
154632
  }
154760
154633
 
154761
- :host [part="root"] [part="content"] [part="actions"] {
154762
- height: 0;
154763
- bottom: 0;
154764
- left: 0;
154765
- right: unset;
154634
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message-after"][hidden] {
154635
+ display: none;
154636
+ }
154637
+
154638
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] {
154639
+ contain: inline-size;
154640
+ box-sizing: border-box;
154641
+ justify-content: flex-start;
154642
+ align-items: flex-end;
154643
+ gap: var(--chat-message-gap);
154644
+ flex-direction: column;
154645
+ width: 100%;
154646
+ min-width: 0;
154647
+ max-width: 100%;
154648
+ display: flex;
154649
+ overflow: visible;
154650
+ }
154651
+
154652
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="actions"] {
154653
+ gap: calc(var(--chat-message-gap) / 2);
154654
+ box-sizing: border-box;
154655
+ flex-flow: wrap;
154656
+ order: 2;
154657
+ justify-content: flex-end;
154658
+ align-items: center;
154659
+ width: 100%;
154660
+ min-width: 0;
154661
+ max-width: 100%;
154662
+ display: flex;
154663
+ }
154664
+
154665
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="actions"] ::slotted(*) {
154666
+ min-width: 0;
154667
+ max-width: 100%;
154668
+ }
154669
+
154670
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="reactions"] {
154671
+ gap: calc(var(--chat-message-gap) / 2);
154672
+ min-width: 0;
154673
+ max-width: 100%;
154674
+ margin-top: calc(var(--chat-message-gap) * -1.5);
154675
+ flex-flow: wrap;
154676
+ order: 1;
154677
+ justify-content: flex-end;
154678
+ align-items: center;
154679
+ display: flex;
154680
+ }
154681
+
154682
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="actions"][hidden], :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="reactions"][hidden], :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"][hidden] {
154683
+ display: none;
154684
+ }
154685
+
154686
+ :host([reply]) {
154687
+ margin-left: initial;
154688
+ margin-right: var(--chat-message-white-space);
154689
+ }
154690
+
154691
+ :host([reply]) [part="root"] {
154692
+ flex-direction: row;
154693
+ justify-content: flex-start;
154694
+ }
154695
+
154696
+ :host([reply]) [part="root"] [part="message-area"], :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] {
154697
+ align-items: flex-start;
154698
+ }
154699
+
154700
+ :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] {
154701
+ justify-content: flex-start;
154702
+ }
154703
+
154704
+ :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] {
154705
+ border-top-right-radius: var(--chat-message-border-radius);
154706
+ border-top-left-radius: 0;
154707
+ }
154708
+
154709
+ :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] {
154710
+ align-items: flex-start;
154711
+ }
154712
+
154713
+ :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="actions"], :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="reactions"] {
154714
+ justify-content: flex-start;
154715
+ }
154716
+
154717
+ :host([has-footer]) {
154718
+ margin-bottom: calc(var(--chat-message-white-space) / 4);
154719
+ }
154720
+
154721
+ @keyframes wave {
154722
+ 0%, 60%, 100% {
154723
+ transform: initial;
154724
+ }
154725
+
154726
+ 30% {
154727
+ transform: translateY(-4px);
154728
+ }
154729
+ }
154730
+
154731
+ `;
154732
+ }
154733
+ //#endregion
154734
+ //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/Themes/ChatMessageElement.Joy.js
154735
+ function ihe() {
154736
+ return B`
154737
+ :host {
154738
+ --chat-message-background-color: var(--joy-scheme-background);
154739
+ --chat-message-border-color: var(--joy-scheme-highlight);
154740
+ --chat-message-border-radius: var(--joy-layout-radius);
154741
+ --chat-message-border-style: solid;
154742
+ --chat-message-border-width: var(--joy-layout-thickness);
154743
+ --chat-message-font-family: var(--joy-font-family);
154744
+ --chat-message-font-letter-spacing: var(--joy-typography-body1-letter-spacing);
154745
+ --chat-message-font-line-height: var(--joy-typography-body1-line-height);
154746
+ --chat-message-font-size: var(--joy-typography-body1-font-size);
154747
+ --chat-message-font-text-decoration: var(--joy-typography-body1-text-decoration);
154748
+ --chat-message-font-text-transform: var(--joy-typography-body1-text-transform);
154749
+ --chat-message-font-weight: var(--joy-typography-body1-font-weight);
154750
+ --chat-message-foreground-color: var(--joy-scheme-foreground);
154751
+ --chat-message-gap: var(--joy-layout-space);
154752
+ --chat-message-padding-bottom: var(--joy-layout-space);
154753
+ --chat-message-padding-left: calc(var(--joy-layout-space) * 2);
154754
+ --chat-message-padding-right: calc(var(--joy-layout-space) * 2);
154755
+ --chat-message-padding-top: var(--joy-layout-space);
154756
+ --chat-message-shadow: var(--joy-elevation-light-offset-x-1) var(--joy-elevation-light-offset-y-1) var(--joy-elevation-light-blur-1) var(--joy-elevation-light-spread-1) var(--joy-elevation-light-color-1);
154757
+ --chat-message-shadow-blur: var(--joy-elevation-light-blur-1);
154758
+ --chat-message-shadow-color: var(--joy-elevation-light-color-1);
154759
+ --chat-message-shadow-offset-x: var(--joy-elevation-light-offset-x-1);
154760
+ --chat-message-shadow-offset-y: var(--joy-elevation-light-offset-y-1);
154761
+ --chat-message-shadow-spread: var(--joy-elevation-light-spread-1);
154762
+ --chat-message-transition-duration: var(--joy-duration-short);
154763
+ --chat-message-transition-mode: ease;
154764
+ --chat-message-transition-property: background-color, color, border-color, opacity, box-shadow, translate, transform;
154765
+ --chat-message-translate: none;
154766
+ --chat-message-white-space: 44px;
154767
+ }
154768
+
154769
+ @media screen and (prefers-reduced-motion: reduce) {
154770
+ :host {
154771
+ transition-duration: .01ms;
154772
+ }
154773
+ }
154774
+
154775
+ :host {
154776
+ box-sizing: border-box;
154777
+ display: block;
154778
+ position: relative;
154779
+ }
154780
+
154781
+ :host *, :host :before, :host :after {
154782
+ box-sizing: border-box;
154783
+ background-repeat: no-repeat;
154784
+ }
154785
+
154786
+ :host :before, :host :after {
154787
+ text-decoration: inherit;
154788
+ vertical-align: inherit;
154789
+ }
154790
+
154791
+ :host([hidden]) {
154792
+ display: none !important;
154793
+ }
154794
+
154795
+ :host {
154796
+ margin-left: var(--chat-message-white-space);
154797
+ margin-right: initial;
154798
+ }
154799
+
154800
+ :host [part="root"] {
154801
+ justify-content: flex-end;
154802
+ align-items: flex-start;
154803
+ gap: var(--chat-message-gap);
154804
+ flex-direction: row-reverse;
154805
+ display: flex;
154806
+ }
154807
+
154808
+ :host [part="root"] [part="message-area"] {
154809
+ justify-content: center;
154810
+ align-items: flex-end;
154811
+ gap: calc(var(--chat-message-gap) / 2);
154812
+ flex-direction: column;
154813
+ flex: 1;
154814
+ min-width: 0;
154815
+ max-width: 100%;
154816
+ display: flex;
154817
+ }
154818
+
154819
+ :host [part="root"] [part="message-area"] [part="message-stack"] {
154820
+ flex-direction: column;
154821
+ align-items: flex-end;
154822
+ width: max-content;
154823
+ min-width: 0;
154824
+ max-width: 100%;
154825
+ display: flex;
154826
+ }
154827
+
154828
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] {
154829
+ justify-content: flex-end;
154830
+ align-items: flex-start;
154831
+ gap: calc(var(--chat-message-gap) / 2);
154832
+ box-sizing: border-box;
154833
+ flex-direction: row;
154834
+ width: 100%;
154835
+ min-width: 0;
154836
+ max-width: 100%;
154837
+ display: flex;
154838
+ position: relative;
154839
+ }
154840
+
154841
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] {
154842
+ border-width: var(--chat-message-border-width);
154843
+ border-radius: var(--chat-message-border-radius);
154844
+ border-style: var(--chat-message-border-style);
154845
+ background-color: var(--chat-message-background-color);
154846
+ border-color: var(--chat-message-border-color);
154847
+ color: var(--chat-message-foreground-color);
154848
+ padding-top: var(--chat-message-padding-top);
154849
+ padding-right: var(--chat-message-padding-right);
154850
+ padding-bottom: var(--chat-message-padding-bottom);
154851
+ padding-left: var(--chat-message-padding-left);
154852
+ gap: calc(var(--chat-message-gap) / 2);
154853
+ transition-duration: var(--chat-message-transition-duration);
154854
+ transition-timing-function: var(--chat-message-transition-mode);
154855
+ transition-property: var(--chat-message-transition-property);
154856
+ font-family: var(--chat-message-font-family);
154857
+ font-size: var(--chat-message-font-size);
154858
+ line-height: var(--chat-message-font-line-height);
154859
+ font-weight: var(--chat-message-font-weight);
154860
+ letter-spacing: var(--chat-message-font-letter-spacing);
154861
+ -webkit-text-decoration: var(--chat-message-font-text-decoration);
154862
+ text-decoration: var(--chat-message-font-text-decoration);
154863
+ text-transform: var(--chat-message-font-text-transform);
154864
+ box-shadow: var(--chat-message-shadow-offset-x) var(--chat-message-shadow-offset-y) var(--chat-message-shadow-blur) var(--chat-message-shadow-spread) var(--chat-message-shadow-color);
154865
+ box-sizing: border-box;
154866
+ border-top-right-radius: 0;
154867
+ flex-direction: column;
154868
+ flex: auto;
154869
+ min-width: 0;
154870
+ max-width: 100%;
154871
+ display: flex;
154872
+ }
154873
+
154874
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="header"] {
154875
+ gap: var(--chat-message-gap);
154876
+ justify-content: space-between;
154877
+ align-items: center;
154878
+ display: flex;
154879
+ }
154880
+
154881
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="text"] {
154882
+ word-break: break-word;
154883
+ }
154884
+
154885
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="busy"] {
154886
+ gap: calc(var(--chat-message-gap) / 2);
154887
+ align-items: center;
154888
+ display: flex;
154889
+ }
154890
+
154891
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="busy"] [part="dot"] {
154892
+ animation: 1.2s ease-out infinite wave;
154893
+ }
154894
+
154895
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="busy"] [part="dot"]:nth-child(2) {
154896
+ animation-delay: -1s;
154897
+ }
154898
+
154899
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="busy"] [part="dot"]:nth-child(3) {
154900
+ animation-delay: -.8s;
154901
+ }
154902
+
154903
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message-after"] {
154904
+ flex-shrink: 0;
154905
+ align-items: flex-start;
154766
154906
  display: flex;
154767
154907
  position: absolute;
154908
+ inset-block-start: 0;
154909
+ inset-inline-start: calc(100% + var(--chat-message-gap) / 2);
154910
+ }
154911
+
154912
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message-after"][hidden] {
154913
+ display: none;
154914
+ }
154915
+
154916
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] {
154917
+ contain: inline-size;
154918
+ box-sizing: border-box;
154919
+ justify-content: flex-start;
154920
+ align-items: flex-end;
154921
+ gap: var(--chat-message-gap);
154922
+ flex-direction: column;
154923
+ width: 100%;
154924
+ min-width: 0;
154925
+ max-width: 100%;
154926
+ display: flex;
154927
+ overflow: visible;
154928
+ }
154929
+
154930
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="actions"] {
154931
+ gap: calc(var(--chat-message-gap) / 2);
154932
+ box-sizing: border-box;
154933
+ flex-flow: wrap;
154934
+ order: 2;
154935
+ justify-content: flex-end;
154936
+ align-items: center;
154937
+ width: 100%;
154938
+ min-width: 0;
154939
+ max-width: 100%;
154940
+ display: flex;
154941
+ }
154942
+
154943
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="actions"] ::slotted(*) {
154944
+ min-width: 0;
154945
+ max-width: 100%;
154946
+ }
154947
+
154948
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="reactions"] {
154949
+ gap: calc(var(--chat-message-gap) / 2);
154950
+ min-width: 0;
154951
+ max-width: 100%;
154952
+ margin-top: calc(var(--chat-message-gap) * -1.5);
154953
+ flex-flow: wrap;
154954
+ order: 1;
154955
+ justify-content: flex-end;
154956
+ align-items: center;
154957
+ display: flex;
154958
+ }
154959
+
154960
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="actions"][hidden], :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="reactions"][hidden], :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"][hidden] {
154961
+ display: none;
154768
154962
  }
154769
154963
 
154770
154964
  :host([reply]) {
@@ -154774,29 +154968,32 @@ function ihe() {
154774
154968
 
154775
154969
  :host([reply]) [part="root"] {
154776
154970
  flex-direction: row;
154971
+ justify-content: flex-start;
154777
154972
  }
154778
154973
 
154779
- :host([reply]) [part="root"] [part="content"] {
154974
+ :host([reply]) [part="root"] [part="message-area"], :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] {
154780
154975
  align-items: flex-start;
154781
154976
  }
154782
154977
 
154783
- :host([reply]) [part="root"] [part="content"] [part="message"] {
154978
+ :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] {
154979
+ justify-content: flex-start;
154980
+ }
154981
+
154982
+ :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] {
154784
154983
  border-top-right-radius: var(--chat-message-border-radius);
154785
154984
  border-top-left-radius: 0;
154786
154985
  }
154787
154986
 
154788
- :host([reply]) [part="root"] [part="reactions"] {
154789
- right: unset;
154790
- left: 0;
154987
+ :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] {
154988
+ align-items: flex-start;
154791
154989
  }
154792
154990
 
154793
- :host([reply]) [part="root"] [part="actions"] {
154794
- right: 0;
154795
- left: unset;
154991
+ :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="actions"], :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="reactions"] {
154992
+ justify-content: flex-start;
154796
154993
  }
154797
154994
 
154798
- :host([has-reactions]), :host([has-actions]) {
154799
- margin-bottom: calc(var(--chat-message-white-space) / 2);
154995
+ :host([has-footer]) {
154996
+ margin-bottom: calc(var(--chat-message-white-space) / 4);
154800
154997
  }
154801
154998
 
154802
154999
  @keyframes wave {
@@ -154954,22 +155151,47 @@ function ahe() {
154954
155151
  }
154955
155152
 
154956
155153
  :host [part="root"] {
154957
- justify-content: stretch;
154958
- align-items: stretch;
155154
+ justify-content: flex-end;
155155
+ align-items: flex-start;
154959
155156
  gap: var(--chat-message-gap);
154960
155157
  flex-direction: row-reverse;
154961
155158
  display: flex;
154962
155159
  }
154963
155160
 
154964
- :host [part="root"] [part="content"] {
155161
+ :host [part="root"] [part="message-area"] {
154965
155162
  justify-content: center;
154966
155163
  align-items: flex-end;
154967
155164
  gap: calc(var(--chat-message-gap) / 2);
154968
155165
  flex-direction: column;
155166
+ flex: 1;
155167
+ min-width: 0;
155168
+ max-width: 100%;
154969
155169
  display: flex;
154970
155170
  }
154971
155171
 
154972
- :host [part="root"] [part="content"] [part="message"] {
155172
+ :host [part="root"] [part="message-area"] [part="message-stack"] {
155173
+ flex-direction: column;
155174
+ align-items: flex-end;
155175
+ width: max-content;
155176
+ min-width: 0;
155177
+ max-width: 100%;
155178
+ display: flex;
155179
+ }
155180
+
155181
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] {
155182
+ justify-content: flex-end;
155183
+ align-items: flex-start;
155184
+ gap: calc(var(--chat-message-gap) / 2);
155185
+ box-sizing: border-box;
155186
+ flex-direction: row;
155187
+ width: 100%;
155188
+ min-width: 0;
155189
+ max-width: 100%;
155190
+ display: flex;
155191
+ position: relative;
155192
+ }
155193
+
155194
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] {
154973
155195
  border-width: var(--chat-message-border-width);
154974
155196
  border-radius: var(--chat-message-border-radius);
154975
155197
  border-style: var(--chat-message-border-style);
@@ -154993,57 +155215,103 @@ function ahe() {
154993
155215
  text-decoration: var(--chat-message-font-text-decoration);
154994
155216
  text-transform: var(--chat-message-font-text-transform);
154995
155217
  box-shadow: var(--chat-message-shadow-offset-x) var(--chat-message-shadow-offset-y) var(--chat-message-shadow-blur) var(--chat-message-shadow-spread) var(--chat-message-shadow-color);
155218
+ box-sizing: border-box;
154996
155219
  border-top-right-radius: 0;
154997
155220
  flex-direction: column;
155221
+ flex: auto;
155222
+ min-width: 0;
155223
+ max-width: 100%;
154998
155224
  display: flex;
154999
- position: relative;
155000
155225
  }
155001
155226
 
155002
- :host [part="root"] [part="content"] [part="message"] [part="header"] {
155227
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="header"] {
155003
155228
  gap: var(--chat-message-gap);
155004
155229
  justify-content: space-between;
155005
155230
  align-items: center;
155006
155231
  display: flex;
155007
155232
  }
155008
155233
 
155009
- :host [part="root"] [part="content"] [part="message"] [part="content"] [part="text"] {
155234
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="text"] {
155010
155235
  word-break: break-word;
155011
155236
  }
155012
155237
 
155013
- :host [part="root"] [part="content"] [part="message"] [part="content"] [part="busy"] {
155238
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="busy"] {
155014
155239
  gap: calc(var(--chat-message-gap) / 2);
155015
155240
  align-items: center;
155016
155241
  display: flex;
155017
155242
  }
155018
155243
 
155019
- :host [part="root"] [part="content"] [part="message"] [part="content"] [part="busy"] [part="dot"] {
155244
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="busy"] [part="dot"] {
155020
155245
  animation: 1.2s ease-out infinite wave;
155021
155246
  }
155022
155247
 
155023
- :host [part="root"] [part="content"] [part="message"] [part="content"] [part="busy"] [part="dot"]:nth-child(2) {
155248
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="busy"] [part="dot"]:nth-child(2) {
155024
155249
  animation-delay: -1s;
155025
155250
  }
155026
155251
 
155027
- :host [part="root"] [part="content"] [part="message"] [part="content"] [part="busy"] [part="dot"]:nth-child(3) {
155252
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="busy"] [part="dot"]:nth-child(3) {
155028
155253
  animation-delay: -.8s;
155029
155254
  }
155030
155255
 
155031
- :host [part="root"] [part="content"] [part="message"] [part="reactions"] {
155032
- height: 0;
155033
- bottom: 0;
155034
- left: unset;
155256
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message-after"] {
155257
+ flex-shrink: 0;
155258
+ align-items: flex-start;
155035
155259
  display: flex;
155036
155260
  position: absolute;
155037
- right: 0;
155261
+ inset-block-start: 0;
155262
+ inset-inline-start: calc(100% + var(--chat-message-gap) / 2);
155038
155263
  }
155039
155264
 
155040
- :host [part="root"] [part="content"] [part="actions"] {
155041
- height: 0;
155042
- bottom: 0;
155043
- left: 0;
155044
- right: unset;
155265
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message-after"][hidden] {
155266
+ display: none;
155267
+ }
155268
+
155269
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] {
155270
+ contain: inline-size;
155271
+ box-sizing: border-box;
155272
+ justify-content: flex-start;
155273
+ align-items: flex-end;
155274
+ gap: var(--chat-message-gap);
155275
+ flex-direction: column;
155276
+ width: 100%;
155277
+ min-width: 0;
155278
+ max-width: 100%;
155045
155279
  display: flex;
155046
- position: absolute;
155280
+ overflow: visible;
155281
+ }
155282
+
155283
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="actions"] {
155284
+ gap: calc(var(--chat-message-gap) / 2);
155285
+ box-sizing: border-box;
155286
+ flex-flow: wrap;
155287
+ order: 2;
155288
+ justify-content: flex-end;
155289
+ align-items: center;
155290
+ width: 100%;
155291
+ min-width: 0;
155292
+ max-width: 100%;
155293
+ display: flex;
155294
+ }
155295
+
155296
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="actions"] ::slotted(*) {
155297
+ min-width: 0;
155298
+ max-width: 100%;
155299
+ }
155300
+
155301
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="reactions"] {
155302
+ gap: calc(var(--chat-message-gap) / 2);
155303
+ min-width: 0;
155304
+ max-width: 100%;
155305
+ margin-top: calc(var(--chat-message-gap) * -1.5);
155306
+ flex-flow: wrap;
155307
+ order: 1;
155308
+ justify-content: flex-end;
155309
+ align-items: center;
155310
+ display: flex;
155311
+ }
155312
+
155313
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="actions"][hidden], :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="reactions"][hidden], :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"][hidden] {
155314
+ display: none;
155047
155315
  }
155048
155316
 
155049
155317
  :host([reply]) {
@@ -155053,29 +155321,32 @@ function ahe() {
155053
155321
 
155054
155322
  :host([reply]) [part="root"] {
155055
155323
  flex-direction: row;
155324
+ justify-content: flex-start;
155056
155325
  }
155057
155326
 
155058
- :host([reply]) [part="root"] [part="content"] {
155327
+ :host([reply]) [part="root"] [part="message-area"], :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] {
155059
155328
  align-items: flex-start;
155060
155329
  }
155061
155330
 
155062
- :host([reply]) [part="root"] [part="content"] [part="message"] {
155331
+ :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] {
155332
+ justify-content: flex-start;
155333
+ }
155334
+
155335
+ :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] {
155063
155336
  border-top-right-radius: var(--chat-message-border-radius);
155064
155337
  border-top-left-radius: 0;
155065
155338
  }
155066
155339
 
155067
- :host([reply]) [part="root"] [part="reactions"] {
155068
- right: unset;
155069
- left: 0;
155340
+ :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] {
155341
+ align-items: flex-start;
155070
155342
  }
155071
155343
 
155072
- :host([reply]) [part="root"] [part="actions"] {
155073
- right: 0;
155074
- left: unset;
155344
+ :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="actions"], :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="reactions"] {
155345
+ justify-content: flex-start;
155075
155346
  }
155076
155347
 
155077
- :host([has-reactions]), :host([has-actions]) {
155078
- margin-bottom: calc(var(--chat-message-white-space) / 2);
155348
+ :host([has-footer]) {
155349
+ margin-bottom: calc(var(--chat-message-white-space) / 4);
155079
155350
  }
155080
155351
 
155081
155352
  @keyframes wave {
@@ -155193,6 +155464,7 @@ i1([
155193
155464
  },
155194
155465
  imports: [
155195
155466
  W,
155467
+ RL,
155196
155468
  x$,
155197
155469
  r1,
155198
155470
  sS
@@ -155307,6 +155579,10 @@ function ohe() {
155307
155579
  overflow: hidden;
155308
155580
  }
155309
155581
 
155582
+ :host [part="scroll"] {
155583
+ height: 100%;
155584
+ }
155585
+
155310
155586
  :host [part="messages"] {
155311
155587
  padding-top: var(--chat-padding-top);
155312
155588
  padding-right: var(--chat-padding-right);
@@ -155446,6 +155722,10 @@ function she() {
155446
155722
  overflow: hidden;
155447
155723
  }
155448
155724
 
155725
+ :host [part="scroll"] {
155726
+ height: 100%;
155727
+ }
155728
+
155449
155729
  :host [part="messages"] {
155450
155730
  padding-top: var(--chat-padding-top);
155451
155731
  padding-right: var(--chat-padding-right);
@@ -155594,6 +155874,10 @@ function che() {
155594
155874
  overflow: hidden;
155595
155875
  }
155596
155876
 
155877
+ :host [part="scroll"] {
155878
+ height: 100%;
155879
+ }
155880
+
155597
155881
  :host [part="messages"] {
155598
155882
  padding-top: var(--chat-padding-top);
155599
155883
  padding-right: var(--chat-padding-right);
@@ -156414,52 +156698,40 @@ d1([
156414
156698
  ]
156415
156699
  }), f1("design:paramtypes", [])], p1);
156416
156700
  //#endregion
156417
- //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/ChatMessageReactionElementTemplate.js
156701
+ //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Emoji/EmojiElementTemplate.js
156418
156702
  function phe(e) {
156419
156703
  return V`
156420
- <mosaik-button part="button"
156421
- .dir="${e.dir}"
156422
- .lang="${e.lang}"
156423
- .disabled="${e.disabled}">
156424
- <mosaik-emoji slot="icon"
156425
- part="emoji"
156426
- .emoji="${e.emoji}"
156427
- .size="${"tiny"}"></mosaik-emoji>
156428
- <mosaik-text slot="label"
156429
- part="count"
156430
- .text="${String(e.count)}"
156431
- ?hidden="${e.count <= 1}"></mosaik-text>
156432
- </mosaik-button>
156704
+ <span>${e.transformUnicodeToEmoji(e.unicode)}</span>
156433
156705
  `;
156434
156706
  }
156435
156707
  //#endregion
156436
- //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Cosmopolitan.js
156708
+ //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Emoji/Themes/EmojiElement.Cosmopolitan.js
156437
156709
  function mhe() {
156438
156710
  return B`
156439
156711
  :host {
156440
- --chat-message-reaction-font-family: var(--cosmopolitan-font-family);
156441
- --chat-message-reaction-font-letter-spacing: var(--cosmopolitan-typography-caption-letter-spacing);
156442
- --chat-message-reaction-font-line-height: var(--cosmopolitan-typography-caption-line-height);
156443
- --chat-message-reaction-font-size: var(--cosmopolitan-typography-caption-font-size);
156444
- --chat-message-reaction-font-text-decoration: var(--cosmopolitan-typography-caption-text-decoration);
156445
- --chat-message-reaction-font-text-transform: var(--cosmopolitan-typography-caption-text-transform);
156446
- --chat-message-reaction-font-weight: var(--cosmopolitan-typography-caption-font-weight);
156447
- --chat-message-reaction-foreground-color: var(--cosmopolitan-scheme-foreground);
156448
- --chat-message-reaction-gap: calc(var(--cosmopolitan-layout-space) / 2);
156449
- --chat-message-reaction-padding-bottom: calc(var(--cosmopolitan-layout-space) / 2);
156450
- --chat-message-reaction-padding-left: var(--cosmopolitan-layout-space);
156451
- --chat-message-reaction-padding-right: var(--cosmopolitan-layout-space);
156452
- --chat-message-reaction-padding-top: calc(var(--cosmopolitan-layout-space) / 2);
156453
- --chat-message-reaction-shadow: unset unset unset unset unset;
156454
- --chat-message-reaction-shadow-blur: unset;
156455
- --chat-message-reaction-shadow-color: unset;
156456
- --chat-message-reaction-shadow-offset-x: unset;
156457
- --chat-message-reaction-shadow-offset-y: unset;
156458
- --chat-message-reaction-shadow-spread: unset;
156459
- --chat-message-reaction-transition-duration: var(--cosmopolitan-duration-short);
156460
- --chat-message-reaction-transition-mode: ease;
156461
- --chat-message-reaction-transition-property: background-color, color, transform;
156462
- --chat-message-reaction-translate: none;
156712
+ --emoji-background-color: unset;
156713
+ --emoji-font-family: unset;
156714
+ --emoji-font-letter-spacing: unset;
156715
+ --emoji-font-line-height: unset;
156716
+ --emoji-font-size: unset;
156717
+ --emoji-font-text-decoration: unset;
156718
+ --emoji-font-text-transform: unset;
156719
+ --emoji-font-weight: unset;
156720
+ --emoji-gap: unset;
156721
+ --emoji-padding-bottom: unset;
156722
+ --emoji-padding-left: unset;
156723
+ --emoji-padding-right: unset;
156724
+ --emoji-padding-top: unset;
156725
+ --emoji-shadow: unset unset unset unset unset;
156726
+ --emoji-shadow-blur: unset;
156727
+ --emoji-shadow-color: unset;
156728
+ --emoji-shadow-offset-x: unset;
156729
+ --emoji-shadow-offset-y: unset;
156730
+ --emoji-shadow-spread: unset;
156731
+ --emoji-transition-duration: unset;
156732
+ --emoji-transition-mode: unset;
156733
+ --emoji-transition-property: unset;
156734
+ --emoji-translate: none;
156463
156735
  }
156464
156736
 
156465
156737
  @media screen and (prefers-reduced-motion: reduce) {
@@ -156489,484 +156761,86 @@ function mhe() {
156489
156761
  }
156490
156762
 
156491
156763
  :host {
156492
- color: var(--chat-message-reaction-foreground-color);
156493
- font-family: var(--chat-message-reaction-font-family);
156494
- font-size: var(--chat-message-reaction-font-size);
156495
- font-weight: var(--chat-message-reaction-font-weight);
156496
- line-height: var(--chat-message-reaction-font-line-height);
156497
- letter-spacing: var(--chat-message-reaction-font-letter-spacing);
156498
- -webkit-text-decoration: var(--chat-message-reaction-font-text-decoration);
156499
- text-decoration: var(--chat-message-reaction-font-text-decoration);
156500
- text-transform: var(--chat-message-reaction-font-text-transform);
156501
- justify-content: center;
156502
- align-items: center;
156503
- gap: var(--chat-message-reaction-gap);
156504
- padding-top: var(--chat-message-reaction-padding-top);
156505
- padding-bottom: var(--chat-message-reaction-padding-bottom);
156506
- padding-left: var(--chat-message-reaction-padding-left);
156507
- padding-right: var(--chat-message-reaction-padding-right);
156508
- transition-duration: var(--chat-message-reaction-transition-duration);
156509
- transition-property: var(--chat-message-reaction-transition-property);
156510
- transition-timing-function: var(--chat-message-reaction-transition-mode);
156511
- transform: var(--chat-message-reaction-translate);
156512
- display: inline-flex;
156513
- }
156514
-
156515
- :host [part="button"] {
156516
- --button-min-width: auto;
156517
- }
156518
-
156519
- :host [part="emoji"], :host [part="count"] {
156520
- flex-shrink: 0;
156521
- }
156522
-
156523
- `;
156524
- }
156525
- //#endregion
156526
- //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Joy.js
156527
- function hhe() {
156528
- return B`
156529
- :host {
156530
- --chat-message-reaction-font-family: var(--joy-font-family);
156531
- --chat-message-reaction-font-letter-spacing: var(--joy-typography-caption-letter-spacing);
156532
- --chat-message-reaction-font-line-height: var(--joy-typography-caption-line-height);
156533
- --chat-message-reaction-font-size: var(--joy-typography-caption-font-size);
156534
- --chat-message-reaction-font-text-decoration: var(--joy-typography-caption-text-decoration);
156535
- --chat-message-reaction-font-text-transform: var(--joy-typography-caption-text-transform);
156536
- --chat-message-reaction-font-weight: var(--joy-typography-caption-font-weight);
156537
- --chat-message-reaction-foreground-color: var(--joy-scheme-foreground);
156538
- --chat-message-reaction-gap: calc(var(--joy-layout-space) / 2);
156539
- --chat-message-reaction-padding-bottom: var(--joy-layout-space);
156540
- --chat-message-reaction-padding-left: var(--joy-layout-space);
156541
- --chat-message-reaction-padding-right: var(--joy-layout-space);
156542
- --chat-message-reaction-padding-top: var(--joy-layout-space);
156543
- --chat-message-reaction-shadow: unset unset unset unset unset;
156544
- --chat-message-reaction-shadow-blur: unset;
156545
- --chat-message-reaction-shadow-color: unset;
156546
- --chat-message-reaction-shadow-offset-x: unset;
156547
- --chat-message-reaction-shadow-offset-y: unset;
156548
- --chat-message-reaction-shadow-spread: unset;
156549
- --chat-message-reaction-transition-duration: var(--joy-duration-short);
156550
- --chat-message-reaction-transition-mode: ease;
156551
- --chat-message-reaction-transition-property: background-color, color, transform;
156552
- --chat-message-reaction-translate: none;
156553
- }
156554
-
156555
- @media screen and (prefers-reduced-motion: reduce) {
156556
- :host {
156557
- transition-duration: .01ms;
156558
- }
156559
- }
156560
-
156561
- :host {
156562
- box-sizing: border-box;
156563
- display: block;
156564
- position: relative;
156565
- }
156566
-
156567
- :host *, :host :before, :host :after {
156568
- box-sizing: border-box;
156569
- background-repeat: no-repeat;
156764
+ background: var(--emoji-background-color);
156765
+ border-radius: 50%;
156766
+ width: 32px;
156767
+ min-width: 32px;
156768
+ height: 32px;
156769
+ font-size: 32px;
156770
+ line-height: 32px;
156771
+ display: inline;
156570
156772
  }
156571
156773
 
156572
- :host :before, :host :after {
156573
- text-decoration: inherit;
156574
- vertical-align: inherit;
156774
+ :host([size="tiny"]) {
156775
+ width: 16px;
156776
+ min-width: 16px;
156777
+ height: 16px;
156778
+ font-size: 16px;
156779
+ line-height: 16px;
156575
156780
  }
156576
156781
 
156577
- :host([hidden]) {
156578
- display: none !important;
156782
+ :host([size="small"]) {
156783
+ width: 24px;
156784
+ min-width: 24px;
156785
+ height: 24px;
156786
+ font-size: 24px;
156787
+ line-height: 24px;
156579
156788
  }
156580
156789
 
156581
- :host {
156582
- color: var(--chat-message-reaction-foreground-color);
156583
- font-family: var(--chat-message-reaction-font-family);
156584
- font-size: var(--chat-message-reaction-font-size);
156585
- font-weight: var(--chat-message-reaction-font-weight);
156586
- line-height: var(--chat-message-reaction-font-line-height);
156587
- letter-spacing: var(--chat-message-reaction-font-letter-spacing);
156588
- -webkit-text-decoration: var(--chat-message-reaction-font-text-decoration);
156589
- text-decoration: var(--chat-message-reaction-font-text-decoration);
156590
- text-transform: var(--chat-message-reaction-font-text-transform);
156591
- justify-content: center;
156592
- align-items: center;
156593
- gap: var(--chat-message-reaction-gap);
156594
- padding-top: var(--chat-message-reaction-padding-top);
156595
- padding-bottom: var(--chat-message-reaction-padding-bottom);
156596
- padding-left: var(--chat-message-reaction-padding-left);
156597
- padding-right: var(--chat-message-reaction-padding-right);
156598
- transition-duration: var(--chat-message-reaction-transition-duration);
156599
- transition-property: var(--chat-message-reaction-transition-property);
156600
- transition-timing-function: var(--chat-message-reaction-transition-mode);
156601
- transform: var(--chat-message-reaction-translate);
156602
- display: inline-flex;
156790
+ :host([size="medium"]) {
156791
+ width: 32px;
156792
+ min-width: 32px;
156793
+ height: 32px;
156794
+ font-size: 32px;
156795
+ line-height: 32px;
156603
156796
  }
156604
156797
 
156605
- :host [part="button"] {
156606
- --button-min-width: auto;
156798
+ :host([size="large"]) {
156799
+ width: 48px;
156800
+ min-width: 48px;
156801
+ height: 48px;
156802
+ font-size: 48px;
156803
+ line-height: 48px;
156607
156804
  }
156608
156805
 
156609
- :host [part="emoji"], :host [part="count"] {
156610
- flex-shrink: 0;
156806
+ :host([size="giant"]) {
156807
+ width: 56px;
156808
+ min-width: 56px;
156809
+ height: 56px;
156810
+ font-size: 56px;
156811
+ line-height: 56px;
156611
156812
  }
156612
156813
 
156613
156814
  `;
156614
156815
  }
156615
156816
  //#endregion
156616
- //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Memphis.js
156617
- function ghe() {
156817
+ //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Emoji/Themes/EmojiElement.Joy.js
156818
+ function hhe() {
156618
156819
  return B`
156619
156820
  :host {
156620
- --chat-message-reaction-font-family: var(--memphis-font-family);
156621
- --chat-message-reaction-font-letter-spacing: var(--memphis-typography-caption-letter-spacing);
156622
- --chat-message-reaction-font-line-height: var(--memphis-typography-caption-line-height);
156623
- --chat-message-reaction-font-size: var(--memphis-typography-caption-font-size);
156624
- --chat-message-reaction-font-text-decoration: var(--memphis-typography-caption-text-decoration);
156625
- --chat-message-reaction-font-text-transform: var(--memphis-typography-caption-text-transform);
156626
- --chat-message-reaction-font-weight: var(--memphis-typography-caption-font-weight);
156627
- --chat-message-reaction-foreground-color: var(--memphis-scheme-foreground);
156628
- --chat-message-reaction-gap: calc(var(--memphis-layout-space) / 2);
156629
- --chat-message-reaction-padding-bottom: calc(var(--memphis-layout-space) / 2);
156630
- --chat-message-reaction-padding-left: var(--memphis-layout-space);
156631
- --chat-message-reaction-padding-right: var(--memphis-layout-space);
156632
- --chat-message-reaction-padding-top: calc(var(--memphis-layout-space) / 2);
156633
- --chat-message-reaction-shadow: unset unset unset unset unset;
156634
- --chat-message-reaction-shadow-blur: unset;
156635
- --chat-message-reaction-shadow-color: unset;
156636
- --chat-message-reaction-shadow-offset-x: unset;
156637
- --chat-message-reaction-shadow-offset-y: unset;
156638
- --chat-message-reaction-shadow-spread: unset;
156639
- --chat-message-reaction-transition-duration: var(--memphis-duration-short);
156640
- --chat-message-reaction-transition-mode: ease;
156641
- --chat-message-reaction-transition-property: background-color, color, transform;
156642
- --chat-message-reaction-translate: none;
156643
- }
156644
-
156645
- @media screen and (prefers-reduced-motion: reduce) {
156646
- :host {
156647
- transition-duration: .01ms;
156648
- }
156649
- }
156650
-
156651
- :host {
156652
- box-sizing: border-box;
156653
- display: block;
156654
- position: relative;
156655
- }
156656
-
156657
- :host *, :host :before, :host :after {
156658
- box-sizing: border-box;
156659
- background-repeat: no-repeat;
156660
- }
156661
-
156662
- :host :before, :host :after {
156663
- text-decoration: inherit;
156664
- vertical-align: inherit;
156665
- }
156666
-
156667
- :host([hidden]) {
156668
- display: none !important;
156669
- }
156670
-
156671
- :host {
156672
- color: var(--chat-message-reaction-foreground-color);
156673
- font-family: var(--chat-message-reaction-font-family);
156674
- font-size: var(--chat-message-reaction-font-size);
156675
- font-weight: var(--chat-message-reaction-font-weight);
156676
- line-height: var(--chat-message-reaction-font-line-height);
156677
- letter-spacing: var(--chat-message-reaction-font-letter-spacing);
156678
- -webkit-text-decoration: var(--chat-message-reaction-font-text-decoration);
156679
- text-decoration: var(--chat-message-reaction-font-text-decoration);
156680
- text-transform: var(--chat-message-reaction-font-text-transform);
156681
- justify-content: center;
156682
- align-items: center;
156683
- gap: var(--chat-message-reaction-gap);
156684
- padding-top: var(--chat-message-reaction-padding-top);
156685
- padding-bottom: var(--chat-message-reaction-padding-bottom);
156686
- padding-left: var(--chat-message-reaction-padding-left);
156687
- padding-right: var(--chat-message-reaction-padding-right);
156688
- transition-duration: var(--chat-message-reaction-transition-duration);
156689
- transition-property: var(--chat-message-reaction-transition-property);
156690
- transition-timing-function: var(--chat-message-reaction-transition-mode);
156691
- transform: var(--chat-message-reaction-translate);
156692
- display: inline-flex;
156693
- }
156694
-
156695
- :host [part="button"] {
156696
- --button-min-width: auto;
156697
- }
156698
-
156699
- :host [part="emoji"], :host [part="count"] {
156700
- flex-shrink: 0;
156701
- }
156702
-
156703
- `;
156704
- }
156705
- //#endregion
156706
- //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/ChatMessageReactionElement.js
156707
- var m1 = function(e, t, n, r) {
156708
- var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
156709
- if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
156710
- else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
156711
- return i > 3 && a && Object.defineProperty(t, n, a), a;
156712
- }, h1 = function(e, t) {
156713
- if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
156714
- }, g1 = class extends F(R(j)) {
156715
- _emoji;
156716
- _count;
156717
- constructor() {
156718
- super(), this._emoji = "", this._count = 1;
156719
- }
156720
- static get is() {
156721
- return "mosaik-chat-message-reaction";
156722
- }
156723
- get emoji() {
156724
- return this._emoji;
156725
- }
156726
- set emoji(e) {
156727
- this._emoji !== e && (this._emoji = e, this.requestUpdate("emoji"));
156728
- }
156729
- get count() {
156730
- return this._count;
156731
- }
156732
- set count(e) {
156733
- this._count !== e && (this._count = e, this.requestUpdate("count"));
156734
- }
156735
- };
156736
- m1([
156737
- P({ type: String }),
156738
- h1("design:type", String),
156739
- h1("design:paramtypes", [String])
156740
- ], g1.prototype, "emoji", null), m1([
156741
- P({ type: Number }),
156742
- h1("design:type", Number),
156743
- h1("design:paramtypes", [Number])
156744
- ], g1.prototype, "count", null), g1 = m1([H({
156745
- selector: "mosaik-chat-message-reaction",
156746
- template: phe,
156747
- themes: {
156748
- joy: hhe,
156749
- memphis: ghe,
156750
- cosmopolitan: mhe
156751
- },
156752
- host: {
156753
- role: "button",
156754
- slot: "reaction"
156755
- },
156756
- imports: [qS]
156757
- }), h1("design:paramtypes", [])], g1);
156758
- //#endregion
156759
- //#region ../mosaik-elements-foundation/dist/Controls/Types/DockSide.js
156760
- var _he = {
156761
- Left: "left",
156762
- Right: "right",
156763
- Top: "top",
156764
- Bottom: "bottom"
156765
- }, vhe = function(e, t, n, r) {
156766
- var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
156767
- if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
156768
- else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
156769
- return i > 3 && a && Object.defineProperty(t, n, a), a;
156770
- }, _1 = function(e, t) {
156771
- if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
156772
- }, v1 = class extends R(j) {
156773
- _isAttached;
156774
- _chatElement;
156775
- _dock;
156776
- constructor() {
156777
- super(), this._isAttached = !1, this._chatElement = void 0, this._dock = "left";
156778
- }
156779
- get dock() {
156780
- return this._dock;
156781
- }
156782
- set dock(e) {
156783
- this._dock !== e && (this._dock = e, this.requestUpdate("dock"));
156784
- }
156785
- get chatElement() {
156786
- return this._chatElement;
156787
- }
156788
- attach(e) {
156789
- this._isAttached || (this._isAttached = !0, this._chatElement = e);
156790
- }
156791
- };
156792
- vhe([
156793
- A({ type: _he }),
156794
- _1("design:type", Object),
156795
- _1("design:paramtypes", [Object])
156796
- ], v1.prototype, "dock", null);
156797
- //#endregion
156798
- //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/Tools/AttachmentChatToolElementTemplate.js
156799
- function yhe(e) {
156800
- return V`
156801
- <mosaik-file-picker .multiple="${!0}"
156802
- .accept="${e.accept}"
156803
- .directory="${e.directory}"
156804
- .disabled="${e.disabled}"
156805
- .dir="${e.dir}"
156806
- @filesPicked="${(t) => {
156807
- e.execute(t.detail.files);
156808
- }}">
156809
- <mosaik-button .dir="${e.dir}"
156810
- .disabled="${e.disabled}"
156811
- .appearance="${"plain"}"
156812
- .icon="${X.add}"></mosaik-button>
156813
- </mosaik-file-picker>
156814
- `;
156815
- }
156816
- //#endregion
156817
- //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/Tools/AttachmentChatToolElement.js
156818
- var y1 = function(e, t, n, r) {
156819
- var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
156820
- if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
156821
- else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
156822
- return i > 3 && a && Object.defineProperty(t, n, a), a;
156823
- }, b1 = function(e, t) {
156824
- if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
156825
- }, x1 = class extends F(v1) {
156826
- _attachmentRejected;
156827
- _multiple;
156828
- _accept;
156829
- _directory;
156830
- _maxFiles;
156831
- _maxFileSize;
156832
- constructor() {
156833
- super(), this._multiple = !1, this._accept = [], this._directory = !1, this._maxFiles = 10, this._maxFileSize = 10 * 1024 * 1024, this._attachmentRejected = new E(this, "attachmentReject");
156834
- }
156835
- static get is() {
156836
- return "mosaik-attachment-chat-tool";
156837
- }
156838
- get multiple() {
156839
- return this._multiple;
156840
- }
156841
- set multiple(e) {
156842
- this._multiple !== e && (this._multiple = e, this.requestUpdate("multiple"));
156843
- }
156844
- get accept() {
156845
- return this._accept;
156846
- }
156847
- set accept(e) {
156848
- this._accept !== e && (this._accept = e, this.requestUpdate("accept"));
156849
- }
156850
- get directory() {
156851
- return this._directory;
156852
- }
156853
- set directory(e) {
156854
- this._directory !== e && (this._directory = e, this.requestUpdate("directory"));
156855
- }
156856
- get maxFiles() {
156857
- return this._maxFiles;
156858
- }
156859
- set maxFiles(e) {
156860
- this._maxFiles !== e && (this._maxFiles = e, this.requestUpdate("maxFiles"));
156861
- }
156862
- get maxFileSize() {
156863
- return this._maxFileSize;
156864
- }
156865
- set maxFileSize(e) {
156866
- this._maxFileSize !== e && (this._maxFileSize = e, this.requestUpdate("maxFileSize"));
156867
- }
156868
- get attachmentRejected() {
156869
- return this._attachmentRejected;
156870
- }
156871
- execute(e) {
156872
- return !(e instanceof FileList || Array.isArray(e)) || !this.chatElement?.inputElement || !Array.from(e).every((e) => this.validate(e)) ? !1 : (this.chatElement.inputElement.value.files.push(...Array.from(e)), this.chatElement.inputElement.requestUpdate("value"), this.chatElement.inputElement.attachmentsElement.requestUpdate("files"), !0);
156873
- }
156874
- onAttachmentRejected(e) {
156875
- this._attachmentRejected.emit(e);
156876
- }
156877
- validate(e) {
156878
- return this.accept.length > 0 && !this.accept.includes(e.type) ? (this.onAttachmentRejected({
156879
- file: e,
156880
- reason: "type",
156881
- cancel: !0
156882
- }), !1) : e.size > this.maxFileSize ? (this.onAttachmentRejected({
156883
- file: e,
156884
- reason: "size",
156885
- cancel: !0
156886
- }), !1) : this.chatElement?.inputElement && this.chatElement.inputElement.value.files.length >= this.maxFiles ? (this.onAttachmentRejected({
156887
- file: e,
156888
- reason: "count",
156889
- cancel: !0
156890
- }), !1) : !0;
156891
- }
156892
- };
156893
- y1([k({ eventName: "attachmentReject" }), b1("design:type", Object)], x1.prototype, "_attachmentRejected", void 0), y1([
156894
- A({
156895
- type: Boolean,
156896
- useDefault: !0
156897
- }),
156898
- b1("design:type", Boolean),
156899
- b1("design:paramtypes", [Boolean])
156900
- ], x1.prototype, "multiple", null), y1([
156901
- P({ type: Array }),
156902
- b1("design:type", Array),
156903
- b1("design:paramtypes", [Array])
156904
- ], x1.prototype, "accept", null), y1([
156905
- A({
156906
- type: Boolean,
156907
- useDefault: !0
156908
- }),
156909
- b1("design:type", Boolean),
156910
- b1("design:paramtypes", [Boolean])
156911
- ], x1.prototype, "directory", null), y1([
156912
- A({
156913
- type: Number,
156914
- useDefault: !0
156915
- }),
156916
- b1("design:type", Number),
156917
- b1("design:paramtypes", [Number])
156918
- ], x1.prototype, "maxFiles", null), y1([
156919
- A({
156920
- type: Number,
156921
- useDefault: !0
156922
- }),
156923
- b1("design:type", Number),
156924
- b1("design:paramtypes", [Number])
156925
- ], x1.prototype, "maxFileSize", null), x1 = y1([H({
156926
- selector: "mosaik-attachment-chat-tool",
156927
- template: yhe,
156928
- host: { slot: "tools" },
156929
- options: {
156930
- mode: "open",
156931
- delegatesFocus: !0
156932
- },
156933
- imports: [YH, qS]
156934
- }), b1("design:paramtypes", [])], x1);
156935
- //#endregion
156936
- //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Emoji/EmojiElementTemplate.js
156937
- function bhe(e) {
156938
- return V`
156939
- <span>${e.transformUnicodeToEmoji(e.unicode)}</span>
156940
- `;
156941
- }
156942
- //#endregion
156943
- //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Emoji/Themes/EmojiElement.Cosmopolitan.js
156944
- function xhe() {
156945
- return B`
156946
- :host {
156947
- --emoji-background-color: unset;
156948
- --emoji-font-family: unset;
156949
- --emoji-font-letter-spacing: unset;
156950
- --emoji-font-line-height: unset;
156951
- --emoji-font-size: unset;
156952
- --emoji-font-text-decoration: unset;
156953
- --emoji-font-text-transform: unset;
156954
- --emoji-font-weight: unset;
156955
- --emoji-gap: unset;
156956
- --emoji-padding-bottom: unset;
156957
- --emoji-padding-left: unset;
156958
- --emoji-padding-right: unset;
156959
- --emoji-padding-top: unset;
156960
- --emoji-shadow: unset unset unset unset unset;
156961
- --emoji-shadow-blur: unset;
156962
- --emoji-shadow-color: unset;
156963
- --emoji-shadow-offset-x: unset;
156964
- --emoji-shadow-offset-y: unset;
156965
- --emoji-shadow-spread: unset;
156966
- --emoji-transition-duration: unset;
156967
- --emoji-transition-mode: unset;
156968
- --emoji-transition-property: unset;
156969
- --emoji-translate: none;
156821
+ --emoji-background-color: unset;
156822
+ --emoji-font-family: unset;
156823
+ --emoji-font-letter-spacing: unset;
156824
+ --emoji-font-line-height: unset;
156825
+ --emoji-font-size: unset;
156826
+ --emoji-font-text-decoration: unset;
156827
+ --emoji-font-text-transform: unset;
156828
+ --emoji-font-weight: unset;
156829
+ --emoji-gap: unset;
156830
+ --emoji-padding-bottom: unset;
156831
+ --emoji-padding-left: unset;
156832
+ --emoji-padding-right: unset;
156833
+ --emoji-padding-top: unset;
156834
+ --emoji-shadow: unset unset unset unset unset;
156835
+ --emoji-shadow-blur: unset;
156836
+ --emoji-shadow-color: unset;
156837
+ --emoji-shadow-offset-x: unset;
156838
+ --emoji-shadow-offset-y: unset;
156839
+ --emoji-shadow-spread: unset;
156840
+ --emoji-transition-duration: unset;
156841
+ --emoji-transition-mode: unset;
156842
+ --emoji-transition-property: unset;
156843
+ --emoji-translate: none;
156970
156844
  }
156971
156845
 
156972
156846
  @media screen and (prefers-reduced-motion: reduce) {
@@ -157049,8 +156923,8 @@ function xhe() {
157049
156923
  `;
157050
156924
  }
157051
156925
  //#endregion
157052
- //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Emoji/Themes/EmojiElement.Joy.js
157053
- function She() {
156926
+ //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Emoji/Themes/EmojiElement.Memphis.js
156927
+ function ghe() {
157054
156928
  return B`
157055
156929
  :host {
157056
156930
  --emoji-background-color: unset;
@@ -157158,33 +157032,128 @@ function She() {
157158
157032
  `;
157159
157033
  }
157160
157034
  //#endregion
157161
- //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Emoji/Themes/EmojiElement.Memphis.js
157162
- function Che() {
157035
+ //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Emoji/EmojiElement.js
157036
+ var m1 = function(e, t, n, r) {
157037
+ var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
157038
+ if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
157039
+ else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
157040
+ return i > 3 && a && Object.defineProperty(t, n, a), a;
157041
+ }, h1 = function(e, t) {
157042
+ if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
157043
+ }, g1 = class extends F(fS(j)) {
157044
+ _unicode;
157045
+ constructor() {
157046
+ super(), this._unicode = "";
157047
+ }
157048
+ static get is() {
157049
+ return "mosaik-emoji";
157050
+ }
157051
+ get unicode() {
157052
+ return this._unicode;
157053
+ }
157054
+ set unicode(e) {
157055
+ let t = this.normalizeUnicodeInput(e);
157056
+ this._unicode !== t && (this._unicode = t, this.requestUpdate("unicode"), this.requestUpdate("emoji"));
157057
+ }
157058
+ get emoji() {
157059
+ return this.transformUnicodeToEmoji(this._unicode);
157060
+ }
157061
+ set emoji(e) {
157062
+ let t = this.transformEmojiToUnicode(e);
157063
+ t !== this._unicode && (this._unicode = t, this.requestUpdate("unicode"), this.requestUpdate("emoji"));
157064
+ }
157065
+ toEmoji() {
157066
+ return this.transformUnicodeToEmoji(this.unicode);
157067
+ }
157068
+ toUnicode() {
157069
+ return this.transformEmojiToUnicode(this.emoji);
157070
+ }
157071
+ transformUnicodeToEmoji(e) {
157072
+ if (e == null) return "";
157073
+ let t = e.replace(/(U\+|0x)/gi, " ").match(/[0-9a-fA-F]{1,8}/g) ?? [];
157074
+ return t.length === 0 ? "" : t.map((e) => parseInt(e, 16)).filter((e) => Number.isFinite(e)).map((e) => String.fromCodePoint(e)).join("");
157075
+ }
157076
+ transformEmojiToUnicode(e) {
157077
+ if (e == null || e === "") return "";
157078
+ let t = [];
157079
+ for (let n of e) {
157080
+ let e = n.codePointAt(0) ?? void 0;
157081
+ e !== void 0 && t.push(e.toString(16).toUpperCase());
157082
+ }
157083
+ return t.join("-");
157084
+ }
157085
+ normalizeUnicodeInput(e) {
157086
+ return e == null || e.trim() === "" ? "" : (e.replace(/(U\+|0x)/gi, " ").match(/[0-9a-fA-F]{1,8}/g) ?? []).map((e) => e.toUpperCase()).join("-");
157087
+ }
157088
+ };
157089
+ m1([
157090
+ P({ type: String }),
157091
+ h1("design:type", String),
157092
+ h1("design:paramtypes", [String])
157093
+ ], g1.prototype, "unicode", null), m1([
157094
+ P({ type: String }),
157095
+ h1("design:type", String),
157096
+ h1("design:paramtypes", [String])
157097
+ ], g1.prototype, "emoji", null), g1 = m1([H({
157098
+ selector: "mosaik-emoji",
157099
+ template: phe,
157100
+ themes: {
157101
+ joy: hhe,
157102
+ memphis: ghe,
157103
+ cosmopolitan: mhe
157104
+ },
157105
+ host: { role: "text" },
157106
+ imports: []
157107
+ }), h1("design:paramtypes", [])], g1);
157108
+ //#endregion
157109
+ //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/ChatMessageReactionElementTemplate.js
157110
+ function _he(e) {
157111
+ return V`
157112
+ <mosaik-button part="button"
157113
+ .dir="${e.dir}"
157114
+ .lang="${e.lang}"
157115
+ .appearance="${"soft"}"
157116
+ .disabled="${e.disabled}">
157117
+ <mosaik-emoji slot="icon"
157118
+ part="emoji"
157119
+ .emoji="${e.emoji}"
157120
+ .size="${"tiny"}"></mosaik-emoji>
157121
+ ${U(e.count > 1, () => V`
157122
+ <mosaik-text slot="label"
157123
+ part="count"
157124
+ .text="${String(e.count)}"></mosaik-text>
157125
+ `)}
157126
+ </mosaik-button>
157127
+ `;
157128
+ }
157129
+ //#endregion
157130
+ //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Cosmopolitan.js
157131
+ function vhe() {
157163
157132
  return B`
157164
157133
  :host {
157165
- --emoji-background-color: unset;
157166
- --emoji-font-family: unset;
157167
- --emoji-font-letter-spacing: unset;
157168
- --emoji-font-line-height: unset;
157169
- --emoji-font-size: unset;
157170
- --emoji-font-text-decoration: unset;
157171
- --emoji-font-text-transform: unset;
157172
- --emoji-font-weight: unset;
157173
- --emoji-gap: unset;
157174
- --emoji-padding-bottom: unset;
157175
- --emoji-padding-left: unset;
157176
- --emoji-padding-right: unset;
157177
- --emoji-padding-top: unset;
157178
- --emoji-shadow: unset unset unset unset unset;
157179
- --emoji-shadow-blur: unset;
157180
- --emoji-shadow-color: unset;
157181
- --emoji-shadow-offset-x: unset;
157182
- --emoji-shadow-offset-y: unset;
157183
- --emoji-shadow-spread: unset;
157184
- --emoji-transition-duration: unset;
157185
- --emoji-transition-mode: unset;
157186
- --emoji-transition-property: unset;
157187
- --emoji-translate: none;
157134
+ --chat-message-reaction-font-family: var(--cosmopolitan-font-family);
157135
+ --chat-message-reaction-font-letter-spacing: var(--cosmopolitan-typography-caption-letter-spacing);
157136
+ --chat-message-reaction-font-line-height: var(--cosmopolitan-typography-caption-line-height);
157137
+ --chat-message-reaction-font-size: var(--cosmopolitan-typography-caption-font-size);
157138
+ --chat-message-reaction-font-text-decoration: var(--cosmopolitan-typography-caption-text-decoration);
157139
+ --chat-message-reaction-font-text-transform: var(--cosmopolitan-typography-caption-text-transform);
157140
+ --chat-message-reaction-font-weight: var(--cosmopolitan-typography-caption-font-weight);
157141
+ --chat-message-reaction-foreground-color: var(--cosmopolitan-scheme-foreground);
157142
+ --chat-message-reaction-gap: calc(var(--cosmopolitan-layout-space) / 2);
157143
+ --chat-message-reaction-padding-bottom: calc(var(--cosmopolitan-layout-space) / 2);
157144
+ --chat-message-reaction-padding-left: var(--cosmopolitan-layout-space);
157145
+ --chat-message-reaction-padding-right: var(--cosmopolitan-layout-space);
157146
+ --chat-message-reaction-padding-top: calc(var(--cosmopolitan-layout-space) / 2);
157147
+ --chat-message-reaction-shadow: unset unset unset unset unset;
157148
+ --chat-message-reaction-shadow-blur: unset;
157149
+ --chat-message-reaction-shadow-color: unset;
157150
+ --chat-message-reaction-shadow-offset-x: unset;
157151
+ --chat-message-reaction-shadow-offset-y: unset;
157152
+ --chat-message-reaction-shadow-spread: unset;
157153
+ --chat-message-reaction-transition-duration: var(--cosmopolitan-duration-short);
157154
+ --chat-message-reaction-transition-mode: ease;
157155
+ --chat-message-reaction-transition-property: background-color, color, transform;
157156
+ --chat-message-reaction-translate: none;
157188
157157
  }
157189
157158
 
157190
157159
  @media screen and (prefers-reduced-motion: reduce) {
@@ -157214,60 +157183,348 @@ function Che() {
157214
157183
  }
157215
157184
 
157216
157185
  :host {
157217
- background: var(--emoji-background-color);
157218
- border-radius: 50%;
157219
- width: 32px;
157220
- min-width: 32px;
157221
- height: 32px;
157222
- font-size: 32px;
157223
- line-height: 32px;
157224
- display: inline;
157186
+ color: var(--chat-message-reaction-foreground-color);
157187
+ font-family: var(--chat-message-reaction-font-family);
157188
+ font-size: var(--chat-message-reaction-font-size);
157189
+ font-weight: var(--chat-message-reaction-font-weight);
157190
+ line-height: var(--chat-message-reaction-font-line-height);
157191
+ letter-spacing: var(--chat-message-reaction-font-letter-spacing);
157192
+ -webkit-text-decoration: var(--chat-message-reaction-font-text-decoration);
157193
+ text-decoration: var(--chat-message-reaction-font-text-decoration);
157194
+ text-transform: var(--chat-message-reaction-font-text-transform);
157195
+ justify-content: center;
157196
+ align-items: center;
157197
+ gap: var(--chat-message-reaction-gap);
157198
+ padding-top: var(--chat-message-reaction-padding-top);
157199
+ padding-bottom: var(--chat-message-reaction-padding-bottom);
157200
+ padding-left: var(--chat-message-reaction-padding-left);
157201
+ padding-right: var(--chat-message-reaction-padding-right);
157202
+ transition-duration: var(--chat-message-reaction-transition-duration);
157203
+ transition-property: var(--chat-message-reaction-transition-property);
157204
+ transition-timing-function: var(--chat-message-reaction-transition-mode);
157205
+ transform: var(--chat-message-reaction-translate);
157206
+ display: inline-flex;
157225
157207
  }
157226
157208
 
157227
- :host([size="tiny"]) {
157228
- width: 16px;
157229
- min-width: 16px;
157230
- height: 16px;
157231
- font-size: 16px;
157232
- line-height: 16px;
157209
+ :host [part="button"] {
157210
+ --button-min-width: auto;
157233
157211
  }
157234
157212
 
157235
- :host([size="small"]) {
157236
- width: 24px;
157237
- min-width: 24px;
157238
- height: 24px;
157239
- font-size: 24px;
157240
- line-height: 24px;
157213
+ :host [part="emoji"], :host [part="count"] {
157214
+ text-align: center;
157215
+ flex-shrink: 0;
157216
+ justify-content: center;
157217
+ align-items: center;
157218
+ display: inline-flex;
157241
157219
  }
157242
157220
 
157243
- :host([size="medium"]) {
157244
- width: 32px;
157245
- min-width: 32px;
157246
- height: 32px;
157247
- font-size: 32px;
157248
- line-height: 32px;
157221
+ `;
157222
+ }
157223
+ //#endregion
157224
+ //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Joy.js
157225
+ function yhe() {
157226
+ return B`
157227
+ :host {
157228
+ --chat-message-reaction-font-family: var(--joy-font-family);
157229
+ --chat-message-reaction-font-letter-spacing: var(--joy-typography-caption-letter-spacing);
157230
+ --chat-message-reaction-font-line-height: var(--joy-typography-caption-line-height);
157231
+ --chat-message-reaction-font-size: var(--joy-typography-caption-font-size);
157232
+ --chat-message-reaction-font-text-decoration: var(--joy-typography-caption-text-decoration);
157233
+ --chat-message-reaction-font-text-transform: var(--joy-typography-caption-text-transform);
157234
+ --chat-message-reaction-font-weight: var(--joy-typography-caption-font-weight);
157235
+ --chat-message-reaction-foreground-color: var(--joy-scheme-foreground);
157236
+ --chat-message-reaction-gap: calc(var(--joy-layout-space) / 2);
157237
+ --chat-message-reaction-padding-bottom: unset;
157238
+ --chat-message-reaction-padding-left: unset;
157239
+ --chat-message-reaction-padding-right: unset;
157240
+ --chat-message-reaction-padding-top: unset;
157241
+ --chat-message-reaction-shadow: unset unset unset unset unset;
157242
+ --chat-message-reaction-shadow-blur: unset;
157243
+ --chat-message-reaction-shadow-color: unset;
157244
+ --chat-message-reaction-shadow-offset-x: unset;
157245
+ --chat-message-reaction-shadow-offset-y: unset;
157246
+ --chat-message-reaction-shadow-spread: unset;
157247
+ --chat-message-reaction-transition-duration: var(--joy-duration-short);
157248
+ --chat-message-reaction-transition-mode: ease;
157249
+ --chat-message-reaction-transition-property: background-color, color, transform;
157250
+ --chat-message-reaction-translate: none;
157249
157251
  }
157250
157252
 
157251
- :host([size="large"]) {
157252
- width: 48px;
157253
- min-width: 48px;
157254
- height: 48px;
157255
- font-size: 48px;
157256
- line-height: 48px;
157253
+ @media screen and (prefers-reduced-motion: reduce) {
157254
+ :host {
157255
+ transition-duration: .01ms;
157256
+ }
157257
157257
  }
157258
157258
 
157259
- :host([size="giant"]) {
157260
- width: 56px;
157261
- min-width: 56px;
157262
- height: 56px;
157263
- font-size: 56px;
157264
- line-height: 56px;
157259
+ :host {
157260
+ box-sizing: border-box;
157261
+ display: block;
157262
+ position: relative;
157263
+ }
157264
+
157265
+ :host *, :host :before, :host :after {
157266
+ box-sizing: border-box;
157267
+ background-repeat: no-repeat;
157268
+ }
157269
+
157270
+ :host :before, :host :after {
157271
+ text-decoration: inherit;
157272
+ vertical-align: inherit;
157273
+ }
157274
+
157275
+ :host([hidden]) {
157276
+ display: none !important;
157277
+ }
157278
+
157279
+ :host {
157280
+ color: var(--chat-message-reaction-foreground-color);
157281
+ font-family: var(--chat-message-reaction-font-family);
157282
+ font-size: var(--chat-message-reaction-font-size);
157283
+ font-weight: var(--chat-message-reaction-font-weight);
157284
+ line-height: var(--chat-message-reaction-font-line-height);
157285
+ letter-spacing: var(--chat-message-reaction-font-letter-spacing);
157286
+ -webkit-text-decoration: var(--chat-message-reaction-font-text-decoration);
157287
+ text-decoration: var(--chat-message-reaction-font-text-decoration);
157288
+ text-transform: var(--chat-message-reaction-font-text-transform);
157289
+ justify-content: center;
157290
+ align-items: center;
157291
+ gap: var(--chat-message-reaction-gap);
157292
+ padding-top: var(--chat-message-reaction-padding-top);
157293
+ padding-bottom: var(--chat-message-reaction-padding-bottom);
157294
+ padding-left: var(--chat-message-reaction-padding-left);
157295
+ padding-right: var(--chat-message-reaction-padding-right);
157296
+ transition-duration: var(--chat-message-reaction-transition-duration);
157297
+ transition-property: var(--chat-message-reaction-transition-property);
157298
+ transition-timing-function: var(--chat-message-reaction-transition-mode);
157299
+ transform: var(--chat-message-reaction-translate);
157300
+ display: inline-flex;
157301
+ }
157302
+
157303
+ :host [part="button"] {
157304
+ --button-min-width: auto;
157305
+ }
157306
+
157307
+ :host [part="emoji"], :host [part="count"] {
157308
+ text-align: center;
157309
+ flex-shrink: 0;
157310
+ justify-content: center;
157311
+ align-items: center;
157312
+ display: inline-flex;
157265
157313
  }
157266
157314
 
157267
157315
  `;
157268
157316
  }
157269
157317
  //#endregion
157270
- //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Emoji/EmojiElement.js
157318
+ //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Memphis.js
157319
+ function bhe() {
157320
+ return B`
157321
+ :host {
157322
+ --chat-message-reaction-font-family: var(--memphis-font-family);
157323
+ --chat-message-reaction-font-letter-spacing: var(--memphis-typography-caption-letter-spacing);
157324
+ --chat-message-reaction-font-line-height: var(--memphis-typography-caption-line-height);
157325
+ --chat-message-reaction-font-size: var(--memphis-typography-caption-font-size);
157326
+ --chat-message-reaction-font-text-decoration: var(--memphis-typography-caption-text-decoration);
157327
+ --chat-message-reaction-font-text-transform: var(--memphis-typography-caption-text-transform);
157328
+ --chat-message-reaction-font-weight: var(--memphis-typography-caption-font-weight);
157329
+ --chat-message-reaction-foreground-color: var(--memphis-scheme-foreground);
157330
+ --chat-message-reaction-gap: calc(var(--memphis-layout-space) / 2);
157331
+ --chat-message-reaction-padding-bottom: calc(var(--memphis-layout-space) / 2);
157332
+ --chat-message-reaction-padding-left: var(--memphis-layout-space);
157333
+ --chat-message-reaction-padding-right: var(--memphis-layout-space);
157334
+ --chat-message-reaction-padding-top: calc(var(--memphis-layout-space) / 2);
157335
+ --chat-message-reaction-shadow: unset unset unset unset unset;
157336
+ --chat-message-reaction-shadow-blur: unset;
157337
+ --chat-message-reaction-shadow-color: unset;
157338
+ --chat-message-reaction-shadow-offset-x: unset;
157339
+ --chat-message-reaction-shadow-offset-y: unset;
157340
+ --chat-message-reaction-shadow-spread: unset;
157341
+ --chat-message-reaction-transition-duration: var(--memphis-duration-short);
157342
+ --chat-message-reaction-transition-mode: ease;
157343
+ --chat-message-reaction-transition-property: background-color, color, transform;
157344
+ --chat-message-reaction-translate: none;
157345
+ }
157346
+
157347
+ @media screen and (prefers-reduced-motion: reduce) {
157348
+ :host {
157349
+ transition-duration: .01ms;
157350
+ }
157351
+ }
157352
+
157353
+ :host {
157354
+ box-sizing: border-box;
157355
+ display: block;
157356
+ position: relative;
157357
+ }
157358
+
157359
+ :host *, :host :before, :host :after {
157360
+ box-sizing: border-box;
157361
+ background-repeat: no-repeat;
157362
+ }
157363
+
157364
+ :host :before, :host :after {
157365
+ text-decoration: inherit;
157366
+ vertical-align: inherit;
157367
+ }
157368
+
157369
+ :host([hidden]) {
157370
+ display: none !important;
157371
+ }
157372
+
157373
+ :host {
157374
+ color: var(--chat-message-reaction-foreground-color);
157375
+ font-family: var(--chat-message-reaction-font-family);
157376
+ font-size: var(--chat-message-reaction-font-size);
157377
+ font-weight: var(--chat-message-reaction-font-weight);
157378
+ line-height: var(--chat-message-reaction-font-line-height);
157379
+ letter-spacing: var(--chat-message-reaction-font-letter-spacing);
157380
+ -webkit-text-decoration: var(--chat-message-reaction-font-text-decoration);
157381
+ text-decoration: var(--chat-message-reaction-font-text-decoration);
157382
+ text-transform: var(--chat-message-reaction-font-text-transform);
157383
+ justify-content: center;
157384
+ align-items: center;
157385
+ gap: var(--chat-message-reaction-gap);
157386
+ padding-top: var(--chat-message-reaction-padding-top);
157387
+ padding-bottom: var(--chat-message-reaction-padding-bottom);
157388
+ padding-left: var(--chat-message-reaction-padding-left);
157389
+ padding-right: var(--chat-message-reaction-padding-right);
157390
+ transition-duration: var(--chat-message-reaction-transition-duration);
157391
+ transition-property: var(--chat-message-reaction-transition-property);
157392
+ transition-timing-function: var(--chat-message-reaction-transition-mode);
157393
+ transform: var(--chat-message-reaction-translate);
157394
+ display: inline-flex;
157395
+ }
157396
+
157397
+ :host [part="button"] {
157398
+ --button-min-width: auto;
157399
+ }
157400
+
157401
+ :host [part="emoji"], :host [part="count"] {
157402
+ text-align: center;
157403
+ flex-shrink: 0;
157404
+ justify-content: center;
157405
+ align-items: center;
157406
+ display: inline-flex;
157407
+ }
157408
+
157409
+ `;
157410
+ }
157411
+ //#endregion
157412
+ //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/ChatMessageReactionElement.js
157413
+ var _1 = function(e, t, n, r) {
157414
+ var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
157415
+ if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
157416
+ else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
157417
+ return i > 3 && a && Object.defineProperty(t, n, a), a;
157418
+ }, v1 = function(e, t) {
157419
+ if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
157420
+ }, y1 = class extends F(R(j)) {
157421
+ _emoji;
157422
+ _count;
157423
+ constructor() {
157424
+ super(), this._emoji = "", this._count = 1;
157425
+ }
157426
+ static get is() {
157427
+ return "mosaik-chat-message-reaction";
157428
+ }
157429
+ get emoji() {
157430
+ return this._emoji;
157431
+ }
157432
+ set emoji(e) {
157433
+ this._emoji !== e && (this._emoji = e, this.requestUpdate("emoji"));
157434
+ }
157435
+ get count() {
157436
+ return this._count;
157437
+ }
157438
+ set count(e) {
157439
+ this._count !== e && (this._count = e, this.requestUpdate("count"));
157440
+ }
157441
+ };
157442
+ _1([
157443
+ P({ type: String }),
157444
+ v1("design:type", String),
157445
+ v1("design:paramtypes", [String])
157446
+ ], y1.prototype, "emoji", null), _1([
157447
+ P({ type: Number }),
157448
+ v1("design:type", Number),
157449
+ v1("design:paramtypes", [Number])
157450
+ ], y1.prototype, "count", null), y1 = _1([H({
157451
+ selector: "mosaik-chat-message-reaction",
157452
+ template: _he,
157453
+ themes: {
157454
+ joy: yhe,
157455
+ memphis: bhe,
157456
+ cosmopolitan: vhe
157457
+ },
157458
+ host: {
157459
+ role: "button",
157460
+ slot: "reaction"
157461
+ },
157462
+ imports: [
157463
+ qS,
157464
+ g1,
157465
+ W
157466
+ ]
157467
+ }), v1("design:paramtypes", [])], y1);
157468
+ //#endregion
157469
+ //#region ../mosaik-elements-foundation/dist/Controls/Types/DockSide.js
157470
+ var xhe = {
157471
+ Left: "left",
157472
+ Right: "right",
157473
+ Top: "top",
157474
+ Bottom: "bottom"
157475
+ }, She = function(e, t, n, r) {
157476
+ var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
157477
+ if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
157478
+ else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
157479
+ return i > 3 && a && Object.defineProperty(t, n, a), a;
157480
+ }, b1 = function(e, t) {
157481
+ if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
157482
+ }, x1 = class extends R(j) {
157483
+ _isAttached;
157484
+ _chatElement;
157485
+ _dock;
157486
+ constructor() {
157487
+ super(), this._isAttached = !1, this._chatElement = void 0, this._dock = "left";
157488
+ }
157489
+ get dock() {
157490
+ return this._dock;
157491
+ }
157492
+ set dock(e) {
157493
+ this._dock !== e && (this._dock = e, this.requestUpdate("dock"));
157494
+ }
157495
+ get chatElement() {
157496
+ return this._chatElement;
157497
+ }
157498
+ attach(e) {
157499
+ this._isAttached || (this._isAttached = !0, this._chatElement = e);
157500
+ }
157501
+ };
157502
+ She([
157503
+ A({ type: xhe }),
157504
+ b1("design:type", Object),
157505
+ b1("design:paramtypes", [Object])
157506
+ ], x1.prototype, "dock", null);
157507
+ //#endregion
157508
+ //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/Tools/AttachmentChatToolElementTemplate.js
157509
+ function Che(e) {
157510
+ return V`
157511
+ <mosaik-file-picker .multiple="${!0}"
157512
+ .accept="${e.accept}"
157513
+ .directory="${e.directory}"
157514
+ .disabled="${e.disabled}"
157515
+ .dir="${e.dir}"
157516
+ @filesPicked="${(t) => {
157517
+ e.execute(t.detail.files);
157518
+ }}">
157519
+ <mosaik-button .dir="${e.dir}"
157520
+ .disabled="${e.disabled}"
157521
+ .appearance="${"plain"}"
157522
+ .icon="${X.add}"></mosaik-button>
157523
+ </mosaik-file-picker>
157524
+ `;
157525
+ }
157526
+ //#endregion
157527
+ //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/Tools/AttachmentChatToolElement.js
157271
157528
  var S1 = function(e, t, n, r) {
157272
157529
  var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
157273
157530
  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
@@ -157275,70 +157532,115 @@ var S1 = function(e, t, n, r) {
157275
157532
  return i > 3 && a && Object.defineProperty(t, n, a), a;
157276
157533
  }, C1 = function(e, t) {
157277
157534
  if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
157278
- }, w1 = class extends F(fS(j)) {
157279
- _unicode;
157535
+ }, w1 = class extends F(x1) {
157536
+ _attachmentRejected;
157537
+ _multiple;
157538
+ _accept;
157539
+ _directory;
157540
+ _maxFiles;
157541
+ _maxFileSize;
157280
157542
  constructor() {
157281
- super(), this._unicode = "";
157543
+ super(), this._multiple = !1, this._accept = [], this._directory = !1, this._maxFiles = 10, this._maxFileSize = 10 * 1024 * 1024, this._attachmentRejected = new E(this, "attachmentReject");
157282
157544
  }
157283
157545
  static get is() {
157284
- return "mosaik-emoji";
157546
+ return "mosaik-attachment-chat-tool";
157285
157547
  }
157286
- get unicode() {
157287
- return this._unicode;
157548
+ get multiple() {
157549
+ return this._multiple;
157288
157550
  }
157289
- set unicode(e) {
157290
- let t = this.normalizeUnicodeInput(e);
157291
- this._unicode !== t && (this._unicode = t, this.requestUpdate("unicode"), this.requestUpdate("emoji"));
157551
+ set multiple(e) {
157552
+ this._multiple !== e && (this._multiple = e, this.requestUpdate("multiple"));
157292
157553
  }
157293
- get emoji() {
157294
- return this.transformUnicodeToEmoji(this._unicode);
157554
+ get accept() {
157555
+ return this._accept;
157295
157556
  }
157296
- set emoji(e) {
157297
- let t = this.transformEmojiToUnicode(e);
157298
- t !== this._unicode && (this._unicode = t, this.requestUpdate("unicode"), this.requestUpdate("emoji"));
157557
+ set accept(e) {
157558
+ this._accept !== e && (this._accept = e, this.requestUpdate("accept"));
157299
157559
  }
157300
- toEmoji() {
157301
- return this.transformUnicodeToEmoji(this.unicode);
157560
+ get directory() {
157561
+ return this._directory;
157302
157562
  }
157303
- toUnicode() {
157304
- return this.transformEmojiToUnicode(this.emoji);
157563
+ set directory(e) {
157564
+ this._directory !== e && (this._directory = e, this.requestUpdate("directory"));
157305
157565
  }
157306
- transformUnicodeToEmoji(e) {
157307
- if (e == null) return "";
157308
- let t = e.replace(/(U\+|0x)/gi, " ").match(/[0-9a-fA-F]{1,8}/g) ?? [];
157309
- return t.length === 0 ? "" : t.map((e) => parseInt(e, 16)).filter((e) => Number.isFinite(e)).map((e) => String.fromCodePoint(e)).join("");
157566
+ get maxFiles() {
157567
+ return this._maxFiles;
157310
157568
  }
157311
- transformEmojiToUnicode(e) {
157312
- if (e == null || e === "") return "";
157313
- let t = [];
157314
- for (let n of e) {
157315
- let e = n.codePointAt(0) ?? void 0;
157316
- e !== void 0 && t.push(e.toString(16).toUpperCase());
157317
- }
157318
- return t.join("-");
157569
+ set maxFiles(e) {
157570
+ this._maxFiles !== e && (this._maxFiles = e, this.requestUpdate("maxFiles"));
157319
157571
  }
157320
- normalizeUnicodeInput(e) {
157321
- return e == null || e.trim() === "" ? "" : (e.replace(/(U\+|0x)/gi, " ").match(/[0-9a-fA-F]{1,8}/g) ?? []).map((e) => e.toUpperCase()).join("-");
157572
+ get maxFileSize() {
157573
+ return this._maxFileSize;
157574
+ }
157575
+ set maxFileSize(e) {
157576
+ this._maxFileSize !== e && (this._maxFileSize = e, this.requestUpdate("maxFileSize"));
157577
+ }
157578
+ get attachmentRejected() {
157579
+ return this._attachmentRejected;
157580
+ }
157581
+ execute(e) {
157582
+ return !(e instanceof FileList || Array.isArray(e)) || !this.chatElement?.inputElement || !Array.from(e).every((e) => this.validate(e)) ? !1 : (this.chatElement.inputElement.value.files.push(...Array.from(e)), this.chatElement.inputElement.requestUpdate("value"), this.chatElement.inputElement.attachmentsElement.requestUpdate("files"), !0);
157583
+ }
157584
+ onAttachmentRejected(e) {
157585
+ this._attachmentRejected.emit(e);
157586
+ }
157587
+ validate(e) {
157588
+ return this.accept.length > 0 && !this.accept.includes(e.type) ? (this.onAttachmentRejected({
157589
+ file: e,
157590
+ reason: "type",
157591
+ cancel: !0
157592
+ }), !1) : e.size > this.maxFileSize ? (this.onAttachmentRejected({
157593
+ file: e,
157594
+ reason: "size",
157595
+ cancel: !0
157596
+ }), !1) : this.chatElement?.inputElement && this.chatElement.inputElement.value.files.length >= this.maxFiles ? (this.onAttachmentRejected({
157597
+ file: e,
157598
+ reason: "count",
157599
+ cancel: !0
157600
+ }), !1) : !0;
157322
157601
  }
157323
157602
  };
157324
- S1([
157325
- P({ type: String }),
157326
- C1("design:type", String),
157327
- C1("design:paramtypes", [String])
157328
- ], w1.prototype, "unicode", null), S1([
157329
- P({ type: String }),
157330
- C1("design:type", String),
157331
- C1("design:paramtypes", [String])
157332
- ], w1.prototype, "emoji", null), w1 = S1([H({
157333
- selector: "mosaik-emoji",
157334
- template: bhe,
157335
- themes: {
157336
- joy: She,
157337
- memphis: Che,
157338
- cosmopolitan: xhe
157603
+ S1([k({ eventName: "attachmentReject" }), C1("design:type", Object)], w1.prototype, "_attachmentRejected", void 0), S1([
157604
+ A({
157605
+ type: Boolean,
157606
+ useDefault: !0
157607
+ }),
157608
+ C1("design:type", Boolean),
157609
+ C1("design:paramtypes", [Boolean])
157610
+ ], w1.prototype, "multiple", null), S1([
157611
+ P({ type: Array }),
157612
+ C1("design:type", Array),
157613
+ C1("design:paramtypes", [Array])
157614
+ ], w1.prototype, "accept", null), S1([
157615
+ A({
157616
+ type: Boolean,
157617
+ useDefault: !0
157618
+ }),
157619
+ C1("design:type", Boolean),
157620
+ C1("design:paramtypes", [Boolean])
157621
+ ], w1.prototype, "directory", null), S1([
157622
+ A({
157623
+ type: Number,
157624
+ useDefault: !0
157625
+ }),
157626
+ C1("design:type", Number),
157627
+ C1("design:paramtypes", [Number])
157628
+ ], w1.prototype, "maxFiles", null), S1([
157629
+ A({
157630
+ type: Number,
157631
+ useDefault: !0
157632
+ }),
157633
+ C1("design:type", Number),
157634
+ C1("design:paramtypes", [Number])
157635
+ ], w1.prototype, "maxFileSize", null), w1 = S1([H({
157636
+ selector: "mosaik-attachment-chat-tool",
157637
+ template: Che,
157638
+ host: { slot: "tools" },
157639
+ options: {
157640
+ mode: "open",
157641
+ delegatesFocus: !0
157339
157642
  },
157340
- host: { role: "text" },
157341
- imports: []
157643
+ imports: [YH, qS]
157342
157644
  }), C1("design:paramtypes", [])], w1);
157343
157645
  //#endregion
157344
157646
  //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/Models/IChatReaction.js
@@ -157404,7 +157706,7 @@ var T1 = function(e, t, n, r) {
157404
157706
  return i > 3 && a && Object.defineProperty(t, n, a), a;
157405
157707
  }, E1 = function(e, t) {
157406
157708
  if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
157407
- }, D1 = class extends F(v1) {
157709
+ }, D1 = class extends F(x1) {
157408
157710
  _reactions;
157409
157711
  constructor() {
157410
157712
  super(), this._reactions = whe.default;
@@ -157438,7 +157740,7 @@ T1([
157438
157740
  hT,
157439
157741
  dT,
157440
157742
  SJ,
157441
- w1
157743
+ g1
157442
157744
  ]
157443
157745
  }), E1("design:paramtypes", [])], D1);
157444
157746
  //#endregion
@@ -157588,7 +157890,7 @@ var A1 = function(e, t, n, r) {
157588
157890
  return i > 3 && a && Object.defineProperty(t, n, a), a;
157589
157891
  }, j1 = function(e, t) {
157590
157892
  if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
157591
- }, M1 = class extends F(v1) {
157893
+ }, M1 = class extends F(x1) {
157592
157894
  _recCancel;
157593
157895
  _recStart;
157594
157896
  _recPause;