@breadstone/mosaik-elements-svelte 0.1.4 → 0.1.5

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 +6 -0
  2. package/index.mjs +1018 -766
  3. package/package.json +3 -3
package/index.mjs CHANGED
@@ -154347,56 +154347,67 @@ function nhe(e) {
154347
154347
  <div part="root">
154348
154348
  <slot name="avatar"
154349
154349
  @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>
154350
+ <div part="message-area">
154351
+ <div part="message-stack">
154352
+ <div part="message-line">
154353
+ <div part="message">
154354
+ ${U(!e.isBusy, () => V`
154355
+ <div part="header">
154356
+ <slot name="author">
154357
+ ${U(e.author.trim(), () => V`
154358
+ <mosaik-text part="author"
154359
+ .dir="${e.dir}"
154360
+ .text="${e.author}"
154361
+ .formatter="${e.formatter}"
154362
+ .truncate="${!0}"></mosaik-text>
154363
+ `)}
154364
+ </slot>
154365
+ <slot name="at">
154366
+ <mosaik-text part="at"
154367
+ .dir="${e.dir}"
154368
+ .text="${e.at}"
154369
+ .formatter="${e.formatter}"></mosaik-text>
154370
+ </slot>
154381
154371
  </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
154372
  `)}
154389
- </slot>
154373
+ <div part="message-body">
154374
+ <slot name="text">
154375
+ ${U(e.isBusy, () => V`
154376
+ <div part="busy">
154377
+ <mosaik-dot part="dot"
154378
+ .size="${G.Tiny}"></mosaik-dot>
154379
+ <mosaik-dot part="dot"
154380
+ .size="${G.Tiny}"></mosaik-dot>
154381
+ <mosaik-dot part="dot"
154382
+ .size="${G.Tiny}"></mosaik-dot>
154383
+ </div>
154384
+ `, () => V`
154385
+ <mosaik-text part="text"
154386
+ .dir="${e.dir}"
154387
+ .text="${e.text}"
154388
+ .formatter="${e.formatter}"
154389
+ .wrap="${!0}"></mosaik-text>
154390
+ `)}
154391
+ </slot>
154392
+ </div>
154393
+ </div>
154394
+ <div part="message-after"
154395
+ ?hidden="${!DM(e, "has-after", e.hasSlotContent("after"))}">
154396
+ <slot name="after"></slot>
154397
+ </div>
154390
154398
  </div>
154391
- <div part="reactions"
154392
- ?hidden="${!DM(e, "has-reactions", e.hasSlotContent("reaction"))}">
154393
- <slot name="reaction"></slot>
154399
+ <div part="footer"
154400
+ ?hidden="${!DM(e, "has-footer", e.hasSlotContent("reaction") || e.hasSlotContent("actions"))}">
154401
+ <div part="actions"
154402
+ ?hidden="${!DM(e, "has-actions", e.hasSlotContent("actions"))}">
154403
+ <slot name="actions"></slot>
154404
+ </div>
154405
+ <div part="reactions"
154406
+ ?hidden="${!DM(e, "has-reactions", e.hasSlotContent("reaction"))}">
154407
+ <slot name="reaction"></slot>
154408
+ </div>
154394
154409
  </div>
154395
154410
  </div>
154396
- <div part="actions"
154397
- ?hidden="${!DM(e, "has-actions", e.hasSlotContent("actions"))}">
154398
- <slot name="actions"></slot>
154399
- </div>
154400
154411
  <slot name="attachment"></slot>
154401
154412
  </div>
154402
154413
  </div>
@@ -154471,22 +154482,47 @@ function rhe() {
154471
154482
  }
154472
154483
 
154473
154484
  :host [part="root"] {
154474
- justify-content: stretch;
154475
- align-items: stretch;
154485
+ justify-content: flex-end;
154486
+ align-items: flex-start;
154476
154487
  gap: var(--chat-message-gap);
154477
154488
  flex-direction: row-reverse;
154478
154489
  display: flex;
154479
154490
  }
154480
154491
 
154481
- :host [part="root"] [part="content"] {
154492
+ :host [part="root"] [part="message-area"] {
154482
154493
  justify-content: center;
154483
154494
  align-items: flex-end;
154484
154495
  gap: calc(var(--chat-message-gap) / 2);
154485
154496
  flex-direction: column;
154497
+ flex: 1;
154498
+ min-width: 0;
154499
+ max-width: 100%;
154500
+ display: flex;
154501
+ }
154502
+
154503
+ :host [part="root"] [part="message-area"] [part="message-stack"] {
154504
+ flex-direction: column;
154505
+ align-items: flex-end;
154506
+ width: max-content;
154507
+ min-width: 0;
154508
+ max-width: 100%;
154509
+ display: flex;
154510
+ }
154511
+
154512
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] {
154513
+ justify-content: flex-end;
154514
+ align-items: flex-start;
154515
+ gap: calc(var(--chat-message-gap) / 2);
154516
+ box-sizing: border-box;
154517
+ flex-direction: row;
154518
+ width: 100%;
154519
+ min-width: 0;
154520
+ max-width: 100%;
154486
154521
  display: flex;
154522
+ position: relative;
154487
154523
  }
154488
154524
 
154489
- :host [part="root"] [part="content"] [part="message"] {
154525
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] {
154490
154526
  border-width: var(--chat-message-border-width);
154491
154527
  border-radius: var(--chat-message-border-radius);
154492
154528
  border-style: var(--chat-message-border-style);
@@ -154510,57 +154546,103 @@ function rhe() {
154510
154546
  text-decoration: var(--chat-message-font-text-decoration);
154511
154547
  text-transform: var(--chat-message-font-text-transform);
154512
154548
  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);
154549
+ box-sizing: border-box;
154513
154550
  border-top-right-radius: 0;
154514
154551
  flex-direction: column;
154552
+ flex: auto;
154553
+ min-width: 0;
154554
+ max-width: 100%;
154515
154555
  display: flex;
154516
- position: relative;
154517
154556
  }
154518
154557
 
154519
- :host [part="root"] [part="content"] [part="message"] [part="header"] {
154558
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="header"] {
154520
154559
  gap: var(--chat-message-gap);
154521
154560
  justify-content: space-between;
154522
154561
  align-items: center;
154523
154562
  display: flex;
154524
154563
  }
154525
154564
 
154526
- :host [part="root"] [part="content"] [part="message"] [part="content"] [part="text"] {
154565
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="text"] {
154527
154566
  word-break: break-word;
154528
154567
  }
154529
154568
 
154530
- :host [part="root"] [part="content"] [part="message"] [part="content"] [part="busy"] {
154569
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="busy"] {
154531
154570
  gap: calc(var(--chat-message-gap) / 2);
154532
154571
  align-items: center;
154533
154572
  display: flex;
154534
154573
  }
154535
154574
 
154536
- :host [part="root"] [part="content"] [part="message"] [part="content"] [part="busy"] [part="dot"] {
154575
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="busy"] [part="dot"] {
154537
154576
  animation: 1.2s ease-out infinite wave;
154538
154577
  }
154539
154578
 
154540
- :host [part="root"] [part="content"] [part="message"] [part="content"] [part="busy"] [part="dot"]:nth-child(2) {
154579
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="busy"] [part="dot"]:nth-child(2) {
154541
154580
  animation-delay: -1s;
154542
154581
  }
154543
154582
 
154544
- :host [part="root"] [part="content"] [part="message"] [part="content"] [part="busy"] [part="dot"]:nth-child(3) {
154583
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="busy"] [part="dot"]:nth-child(3) {
154545
154584
  animation-delay: -.8s;
154546
154585
  }
154547
154586
 
154548
- :host [part="root"] [part="content"] [part="message"] [part="reactions"] {
154549
- height: 0;
154550
- bottom: 0;
154551
- left: unset;
154587
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message-after"] {
154588
+ flex-shrink: 0;
154589
+ align-items: flex-start;
154552
154590
  display: flex;
154553
154591
  position: absolute;
154554
- right: 0;
154592
+ inset-block-start: 0;
154593
+ inset-inline-start: calc(100% + var(--chat-message-gap) / 2);
154555
154594
  }
154556
154595
 
154557
- :host [part="root"] [part="content"] [part="actions"] {
154558
- height: 0;
154559
- bottom: 0;
154560
- left: 0;
154561
- right: unset;
154596
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message-after"][hidden] {
154597
+ display: none;
154598
+ }
154599
+
154600
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] {
154601
+ contain: inline-size;
154602
+ box-sizing: border-box;
154603
+ justify-content: flex-start;
154604
+ align-items: flex-end;
154605
+ gap: var(--chat-message-gap);
154606
+ flex-direction: column;
154607
+ width: 100%;
154608
+ min-width: 0;
154609
+ max-width: 100%;
154562
154610
  display: flex;
154563
- position: absolute;
154611
+ overflow: visible;
154612
+ }
154613
+
154614
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="actions"] {
154615
+ gap: calc(var(--chat-message-gap) / 2);
154616
+ box-sizing: border-box;
154617
+ flex-flow: wrap;
154618
+ order: 2;
154619
+ justify-content: flex-end;
154620
+ align-items: center;
154621
+ width: 100%;
154622
+ min-width: 0;
154623
+ max-width: 100%;
154624
+ display: flex;
154625
+ }
154626
+
154627
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="actions"] ::slotted(*) {
154628
+ min-width: 0;
154629
+ max-width: 100%;
154630
+ }
154631
+
154632
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="reactions"] {
154633
+ gap: calc(var(--chat-message-gap) / 2);
154634
+ min-width: 0;
154635
+ max-width: 100%;
154636
+ margin-top: calc(var(--chat-message-gap) * -1.5);
154637
+ flex-flow: wrap;
154638
+ order: 1;
154639
+ justify-content: flex-end;
154640
+ align-items: center;
154641
+ display: flex;
154642
+ }
154643
+
154644
+ :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] {
154645
+ display: none;
154564
154646
  }
154565
154647
 
154566
154648
  :host([reply]) {
@@ -154570,29 +154652,32 @@ function rhe() {
154570
154652
 
154571
154653
  :host([reply]) [part="root"] {
154572
154654
  flex-direction: row;
154655
+ justify-content: flex-start;
154573
154656
  }
154574
154657
 
154575
- :host([reply]) [part="root"] [part="content"] {
154658
+ :host([reply]) [part="root"] [part="message-area"], :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] {
154576
154659
  align-items: flex-start;
154577
154660
  }
154578
154661
 
154579
- :host([reply]) [part="root"] [part="content"] [part="message"] {
154662
+ :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] {
154663
+ justify-content: flex-start;
154664
+ }
154665
+
154666
+ :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] {
154580
154667
  border-top-right-radius: var(--chat-message-border-radius);
154581
154668
  border-top-left-radius: 0;
154582
154669
  }
154583
154670
 
154584
- :host([reply]) [part="root"] [part="reactions"] {
154585
- right: unset;
154586
- left: 0;
154671
+ :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] {
154672
+ align-items: flex-start;
154587
154673
  }
154588
154674
 
154589
- :host([reply]) [part="root"] [part="actions"] {
154590
- right: 0;
154591
- left: unset;
154675
+ :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"] {
154676
+ justify-content: flex-start;
154592
154677
  }
154593
154678
 
154594
- :host([has-reactions]), :host([has-actions]) {
154595
- margin-bottom: calc(var(--chat-message-white-space) / 2);
154679
+ :host([has-footer]) {
154680
+ margin-bottom: calc(var(--chat-message-white-space) / 4);
154596
154681
  }
154597
154682
 
154598
154683
  @keyframes wave {
@@ -154675,22 +154760,47 @@ function ihe() {
154675
154760
  }
154676
154761
 
154677
154762
  :host [part="root"] {
154678
- justify-content: stretch;
154679
- align-items: stretch;
154763
+ justify-content: flex-end;
154764
+ align-items: flex-start;
154680
154765
  gap: var(--chat-message-gap);
154681
154766
  flex-direction: row-reverse;
154682
154767
  display: flex;
154683
154768
  }
154684
154769
 
154685
- :host [part="root"] [part="content"] {
154770
+ :host [part="root"] [part="message-area"] {
154686
154771
  justify-content: center;
154687
154772
  align-items: flex-end;
154688
154773
  gap: calc(var(--chat-message-gap) / 2);
154689
154774
  flex-direction: column;
154775
+ flex: 1;
154776
+ min-width: 0;
154777
+ max-width: 100%;
154778
+ display: flex;
154779
+ }
154780
+
154781
+ :host [part="root"] [part="message-area"] [part="message-stack"] {
154782
+ flex-direction: column;
154783
+ align-items: flex-end;
154784
+ width: max-content;
154785
+ min-width: 0;
154786
+ max-width: 100%;
154690
154787
  display: flex;
154691
154788
  }
154692
154789
 
154693
- :host [part="root"] [part="content"] [part="message"] {
154790
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] {
154791
+ justify-content: flex-end;
154792
+ align-items: flex-start;
154793
+ gap: calc(var(--chat-message-gap) / 2);
154794
+ box-sizing: border-box;
154795
+ flex-direction: row;
154796
+ width: 100%;
154797
+ min-width: 0;
154798
+ max-width: 100%;
154799
+ display: flex;
154800
+ position: relative;
154801
+ }
154802
+
154803
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] {
154694
154804
  border-width: var(--chat-message-border-width);
154695
154805
  border-radius: var(--chat-message-border-radius);
154696
154806
  border-style: var(--chat-message-border-style);
@@ -154714,57 +154824,103 @@ function ihe() {
154714
154824
  text-decoration: var(--chat-message-font-text-decoration);
154715
154825
  text-transform: var(--chat-message-font-text-transform);
154716
154826
  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);
154827
+ box-sizing: border-box;
154717
154828
  border-top-right-radius: 0;
154718
154829
  flex-direction: column;
154830
+ flex: auto;
154831
+ min-width: 0;
154832
+ max-width: 100%;
154719
154833
  display: flex;
154720
- position: relative;
154721
154834
  }
154722
154835
 
154723
- :host [part="root"] [part="content"] [part="message"] [part="header"] {
154836
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="header"] {
154724
154837
  gap: var(--chat-message-gap);
154725
154838
  justify-content: space-between;
154726
154839
  align-items: center;
154727
154840
  display: flex;
154728
154841
  }
154729
154842
 
154730
- :host [part="root"] [part="content"] [part="message"] [part="content"] [part="text"] {
154843
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="text"] {
154731
154844
  word-break: break-word;
154732
154845
  }
154733
154846
 
154734
- :host [part="root"] [part="content"] [part="message"] [part="content"] [part="busy"] {
154847
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="busy"] {
154735
154848
  gap: calc(var(--chat-message-gap) / 2);
154736
154849
  align-items: center;
154737
154850
  display: flex;
154738
154851
  }
154739
154852
 
154740
- :host [part="root"] [part="content"] [part="message"] [part="content"] [part="busy"] [part="dot"] {
154853
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="busy"] [part="dot"] {
154741
154854
  animation: 1.2s ease-out infinite wave;
154742
154855
  }
154743
154856
 
154744
- :host [part="root"] [part="content"] [part="message"] [part="content"] [part="busy"] [part="dot"]:nth-child(2) {
154857
+ :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
154858
  animation-delay: -1s;
154746
154859
  }
154747
154860
 
154748
- :host [part="root"] [part="content"] [part="message"] [part="content"] [part="busy"] [part="dot"]:nth-child(3) {
154861
+ :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
154862
  animation-delay: -.8s;
154750
154863
  }
154751
154864
 
154752
- :host [part="root"] [part="content"] [part="message"] [part="reactions"] {
154753
- height: 0;
154754
- bottom: 0;
154755
- left: unset;
154865
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message-after"] {
154866
+ flex-shrink: 0;
154867
+ align-items: flex-start;
154756
154868
  display: flex;
154757
154869
  position: absolute;
154758
- right: 0;
154870
+ inset-block-start: 0;
154871
+ inset-inline-start: calc(100% + var(--chat-message-gap) / 2);
154759
154872
  }
154760
154873
 
154761
- :host [part="root"] [part="content"] [part="actions"] {
154762
- height: 0;
154763
- bottom: 0;
154764
- left: 0;
154765
- right: unset;
154874
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message-after"][hidden] {
154875
+ display: none;
154876
+ }
154877
+
154878
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] {
154879
+ contain: inline-size;
154880
+ box-sizing: border-box;
154881
+ justify-content: flex-start;
154882
+ align-items: flex-end;
154883
+ gap: var(--chat-message-gap);
154884
+ flex-direction: column;
154885
+ width: 100%;
154886
+ min-width: 0;
154887
+ max-width: 100%;
154766
154888
  display: flex;
154767
- position: absolute;
154889
+ overflow: visible;
154890
+ }
154891
+
154892
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="actions"] {
154893
+ gap: calc(var(--chat-message-gap) / 2);
154894
+ box-sizing: border-box;
154895
+ flex-flow: wrap;
154896
+ order: 2;
154897
+ justify-content: flex-end;
154898
+ align-items: center;
154899
+ width: 100%;
154900
+ min-width: 0;
154901
+ max-width: 100%;
154902
+ display: flex;
154903
+ }
154904
+
154905
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="actions"] ::slotted(*) {
154906
+ min-width: 0;
154907
+ max-width: 100%;
154908
+ }
154909
+
154910
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="reactions"] {
154911
+ gap: calc(var(--chat-message-gap) / 2);
154912
+ min-width: 0;
154913
+ max-width: 100%;
154914
+ margin-top: calc(var(--chat-message-gap) * -1.5);
154915
+ flex-flow: wrap;
154916
+ order: 1;
154917
+ justify-content: flex-end;
154918
+ align-items: center;
154919
+ display: flex;
154920
+ }
154921
+
154922
+ :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] {
154923
+ display: none;
154768
154924
  }
154769
154925
 
154770
154926
  :host([reply]) {
@@ -154774,29 +154930,32 @@ function ihe() {
154774
154930
 
154775
154931
  :host([reply]) [part="root"] {
154776
154932
  flex-direction: row;
154933
+ justify-content: flex-start;
154777
154934
  }
154778
154935
 
154779
- :host([reply]) [part="root"] [part="content"] {
154936
+ :host([reply]) [part="root"] [part="message-area"], :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] {
154780
154937
  align-items: flex-start;
154781
154938
  }
154782
154939
 
154783
- :host([reply]) [part="root"] [part="content"] [part="message"] {
154940
+ :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] {
154941
+ justify-content: flex-start;
154942
+ }
154943
+
154944
+ :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] {
154784
154945
  border-top-right-radius: var(--chat-message-border-radius);
154785
154946
  border-top-left-radius: 0;
154786
154947
  }
154787
154948
 
154788
- :host([reply]) [part="root"] [part="reactions"] {
154789
- right: unset;
154790
- left: 0;
154949
+ :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] {
154950
+ align-items: flex-start;
154791
154951
  }
154792
154952
 
154793
- :host([reply]) [part="root"] [part="actions"] {
154794
- right: 0;
154795
- left: unset;
154953
+ :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"] {
154954
+ justify-content: flex-start;
154796
154955
  }
154797
154956
 
154798
- :host([has-reactions]), :host([has-actions]) {
154799
- margin-bottom: calc(var(--chat-message-white-space) / 2);
154957
+ :host([has-footer]) {
154958
+ margin-bottom: calc(var(--chat-message-white-space) / 4);
154800
154959
  }
154801
154960
 
154802
154961
  @keyframes wave {
@@ -154954,22 +155113,47 @@ function ahe() {
154954
155113
  }
154955
155114
 
154956
155115
  :host [part="root"] {
154957
- justify-content: stretch;
154958
- align-items: stretch;
155116
+ justify-content: flex-end;
155117
+ align-items: flex-start;
154959
155118
  gap: var(--chat-message-gap);
154960
155119
  flex-direction: row-reverse;
154961
155120
  display: flex;
154962
155121
  }
154963
155122
 
154964
- :host [part="root"] [part="content"] {
155123
+ :host [part="root"] [part="message-area"] {
154965
155124
  justify-content: center;
154966
155125
  align-items: flex-end;
154967
155126
  gap: calc(var(--chat-message-gap) / 2);
154968
155127
  flex-direction: column;
155128
+ flex: 1;
155129
+ min-width: 0;
155130
+ max-width: 100%;
155131
+ display: flex;
155132
+ }
155133
+
155134
+ :host [part="root"] [part="message-area"] [part="message-stack"] {
155135
+ flex-direction: column;
155136
+ align-items: flex-end;
155137
+ width: max-content;
155138
+ min-width: 0;
155139
+ max-width: 100%;
155140
+ display: flex;
155141
+ }
155142
+
155143
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] {
155144
+ justify-content: flex-end;
155145
+ align-items: flex-start;
155146
+ gap: calc(var(--chat-message-gap) / 2);
155147
+ box-sizing: border-box;
155148
+ flex-direction: row;
155149
+ width: 100%;
155150
+ min-width: 0;
155151
+ max-width: 100%;
154969
155152
  display: flex;
155153
+ position: relative;
154970
155154
  }
154971
155155
 
154972
- :host [part="root"] [part="content"] [part="message"] {
155156
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] {
154973
155157
  border-width: var(--chat-message-border-width);
154974
155158
  border-radius: var(--chat-message-border-radius);
154975
155159
  border-style: var(--chat-message-border-style);
@@ -154993,57 +155177,103 @@ function ahe() {
154993
155177
  text-decoration: var(--chat-message-font-text-decoration);
154994
155178
  text-transform: var(--chat-message-font-text-transform);
154995
155179
  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);
155180
+ box-sizing: border-box;
154996
155181
  border-top-right-radius: 0;
154997
155182
  flex-direction: column;
154998
- display: flex;
154999
- position: relative;
155183
+ flex: auto;
155184
+ min-width: 0;
155185
+ max-width: 100%;
155186
+ display: flex;
155000
155187
  }
155001
155188
 
155002
- :host [part="root"] [part="content"] [part="message"] [part="header"] {
155189
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="header"] {
155003
155190
  gap: var(--chat-message-gap);
155004
155191
  justify-content: space-between;
155005
155192
  align-items: center;
155006
155193
  display: flex;
155007
155194
  }
155008
155195
 
155009
- :host [part="root"] [part="content"] [part="message"] [part="content"] [part="text"] {
155196
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="text"] {
155010
155197
  word-break: break-word;
155011
155198
  }
155012
155199
 
155013
- :host [part="root"] [part="content"] [part="message"] [part="content"] [part="busy"] {
155200
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="busy"] {
155014
155201
  gap: calc(var(--chat-message-gap) / 2);
155015
155202
  align-items: center;
155016
155203
  display: flex;
155017
155204
  }
155018
155205
 
155019
- :host [part="root"] [part="content"] [part="message"] [part="content"] [part="busy"] [part="dot"] {
155206
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="busy"] [part="dot"] {
155020
155207
  animation: 1.2s ease-out infinite wave;
155021
155208
  }
155022
155209
 
155023
- :host [part="root"] [part="content"] [part="message"] [part="content"] [part="busy"] [part="dot"]:nth-child(2) {
155210
+ :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
155211
  animation-delay: -1s;
155025
155212
  }
155026
155213
 
155027
- :host [part="root"] [part="content"] [part="message"] [part="content"] [part="busy"] [part="dot"]:nth-child(3) {
155214
+ :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
155215
  animation-delay: -.8s;
155029
155216
  }
155030
155217
 
155031
- :host [part="root"] [part="content"] [part="message"] [part="reactions"] {
155032
- height: 0;
155033
- bottom: 0;
155034
- left: unset;
155218
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message-after"] {
155219
+ flex-shrink: 0;
155220
+ align-items: flex-start;
155035
155221
  display: flex;
155036
155222
  position: absolute;
155037
- right: 0;
155223
+ inset-block-start: 0;
155224
+ inset-inline-start: calc(100% + var(--chat-message-gap) / 2);
155038
155225
  }
155039
155226
 
155040
- :host [part="root"] [part="content"] [part="actions"] {
155041
- height: 0;
155042
- bottom: 0;
155043
- left: 0;
155044
- right: unset;
155227
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message-after"][hidden] {
155228
+ display: none;
155229
+ }
155230
+
155231
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] {
155232
+ contain: inline-size;
155233
+ box-sizing: border-box;
155234
+ justify-content: flex-start;
155235
+ align-items: flex-end;
155236
+ gap: var(--chat-message-gap);
155237
+ flex-direction: column;
155238
+ width: 100%;
155239
+ min-width: 0;
155240
+ max-width: 100%;
155045
155241
  display: flex;
155046
- position: absolute;
155242
+ overflow: visible;
155243
+ }
155244
+
155245
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="actions"] {
155246
+ gap: calc(var(--chat-message-gap) / 2);
155247
+ box-sizing: border-box;
155248
+ flex-flow: wrap;
155249
+ order: 2;
155250
+ justify-content: flex-end;
155251
+ align-items: center;
155252
+ width: 100%;
155253
+ min-width: 0;
155254
+ max-width: 100%;
155255
+ display: flex;
155256
+ }
155257
+
155258
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="actions"] ::slotted(*) {
155259
+ min-width: 0;
155260
+ max-width: 100%;
155261
+ }
155262
+
155263
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="reactions"] {
155264
+ gap: calc(var(--chat-message-gap) / 2);
155265
+ min-width: 0;
155266
+ max-width: 100%;
155267
+ margin-top: calc(var(--chat-message-gap) * -1.5);
155268
+ flex-flow: wrap;
155269
+ order: 1;
155270
+ justify-content: flex-end;
155271
+ align-items: center;
155272
+ display: flex;
155273
+ }
155274
+
155275
+ :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] {
155276
+ display: none;
155047
155277
  }
155048
155278
 
155049
155279
  :host([reply]) {
@@ -155053,29 +155283,32 @@ function ahe() {
155053
155283
 
155054
155284
  :host([reply]) [part="root"] {
155055
155285
  flex-direction: row;
155286
+ justify-content: flex-start;
155056
155287
  }
155057
155288
 
155058
- :host([reply]) [part="root"] [part="content"] {
155289
+ :host([reply]) [part="root"] [part="message-area"], :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] {
155059
155290
  align-items: flex-start;
155060
155291
  }
155061
155292
 
155062
- :host([reply]) [part="root"] [part="content"] [part="message"] {
155293
+ :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] {
155294
+ justify-content: flex-start;
155295
+ }
155296
+
155297
+ :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] {
155063
155298
  border-top-right-radius: var(--chat-message-border-radius);
155064
155299
  border-top-left-radius: 0;
155065
155300
  }
155066
155301
 
155067
- :host([reply]) [part="root"] [part="reactions"] {
155068
- right: unset;
155069
- left: 0;
155302
+ :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] {
155303
+ align-items: flex-start;
155070
155304
  }
155071
155305
 
155072
- :host([reply]) [part="root"] [part="actions"] {
155073
- right: 0;
155074
- left: unset;
155306
+ :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"] {
155307
+ justify-content: flex-start;
155075
155308
  }
155076
155309
 
155077
- :host([has-reactions]), :host([has-actions]) {
155078
- margin-bottom: calc(var(--chat-message-white-space) / 2);
155310
+ :host([has-footer]) {
155311
+ margin-bottom: calc(var(--chat-message-white-space) / 4);
155079
155312
  }
155080
155313
 
155081
155314
  @keyframes wave {
@@ -155193,6 +155426,7 @@ i1([
155193
155426
  },
155194
155427
  imports: [
155195
155428
  W,
155429
+ RL,
155196
155430
  x$,
155197
155431
  r1,
155198
155432
  sS
@@ -156414,52 +156648,40 @@ d1([
156414
156648
  ]
156415
156649
  }), f1("design:paramtypes", [])], p1);
156416
156650
  //#endregion
156417
- //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/ChatMessageReactionElementTemplate.js
156651
+ //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Emoji/EmojiElementTemplate.js
156418
156652
  function phe(e) {
156419
156653
  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>
156654
+ <span>${e.transformUnicodeToEmoji(e.unicode)}</span>
156433
156655
  `;
156434
156656
  }
156435
156657
  //#endregion
156436
- //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Cosmopolitan.js
156658
+ //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Emoji/Themes/EmojiElement.Cosmopolitan.js
156437
156659
  function mhe() {
156438
156660
  return B`
156439
156661
  :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;
156662
+ --emoji-background-color: unset;
156663
+ --emoji-font-family: unset;
156664
+ --emoji-font-letter-spacing: unset;
156665
+ --emoji-font-line-height: unset;
156666
+ --emoji-font-size: unset;
156667
+ --emoji-font-text-decoration: unset;
156668
+ --emoji-font-text-transform: unset;
156669
+ --emoji-font-weight: unset;
156670
+ --emoji-gap: unset;
156671
+ --emoji-padding-bottom: unset;
156672
+ --emoji-padding-left: unset;
156673
+ --emoji-padding-right: unset;
156674
+ --emoji-padding-top: unset;
156675
+ --emoji-shadow: unset unset unset unset unset;
156676
+ --emoji-shadow-blur: unset;
156677
+ --emoji-shadow-color: unset;
156678
+ --emoji-shadow-offset-x: unset;
156679
+ --emoji-shadow-offset-y: unset;
156680
+ --emoji-shadow-spread: unset;
156681
+ --emoji-transition-duration: unset;
156682
+ --emoji-transition-mode: unset;
156683
+ --emoji-transition-property: unset;
156684
+ --emoji-translate: none;
156463
156685
  }
156464
156686
 
156465
156687
  @media screen and (prefers-reduced-motion: reduce) {
@@ -156489,67 +156711,86 @@ function mhe() {
156489
156711
  }
156490
156712
 
156491
156713
  :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;
156714
+ background: var(--emoji-background-color);
156715
+ border-radius: 50%;
156716
+ width: 32px;
156717
+ min-width: 32px;
156718
+ height: 32px;
156719
+ font-size: 32px;
156720
+ line-height: 32px;
156721
+ display: inline;
156513
156722
  }
156514
156723
 
156515
- :host [part="button"] {
156516
- --button-min-width: auto;
156724
+ :host([size="tiny"]) {
156725
+ width: 16px;
156726
+ min-width: 16px;
156727
+ height: 16px;
156728
+ font-size: 16px;
156729
+ line-height: 16px;
156517
156730
  }
156518
156731
 
156519
- :host [part="emoji"], :host [part="count"] {
156520
- flex-shrink: 0;
156732
+ :host([size="small"]) {
156733
+ width: 24px;
156734
+ min-width: 24px;
156735
+ height: 24px;
156736
+ font-size: 24px;
156737
+ line-height: 24px;
156738
+ }
156739
+
156740
+ :host([size="medium"]) {
156741
+ width: 32px;
156742
+ min-width: 32px;
156743
+ height: 32px;
156744
+ font-size: 32px;
156745
+ line-height: 32px;
156746
+ }
156747
+
156748
+ :host([size="large"]) {
156749
+ width: 48px;
156750
+ min-width: 48px;
156751
+ height: 48px;
156752
+ font-size: 48px;
156753
+ line-height: 48px;
156754
+ }
156755
+
156756
+ :host([size="giant"]) {
156757
+ width: 56px;
156758
+ min-width: 56px;
156759
+ height: 56px;
156760
+ font-size: 56px;
156761
+ line-height: 56px;
156521
156762
  }
156522
156763
 
156523
156764
  `;
156524
156765
  }
156525
156766
  //#endregion
156526
- //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Joy.js
156767
+ //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Emoji/Themes/EmojiElement.Joy.js
156527
156768
  function hhe() {
156528
156769
  return B`
156529
156770
  :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;
156771
+ --emoji-background-color: unset;
156772
+ --emoji-font-family: unset;
156773
+ --emoji-font-letter-spacing: unset;
156774
+ --emoji-font-line-height: unset;
156775
+ --emoji-font-size: unset;
156776
+ --emoji-font-text-decoration: unset;
156777
+ --emoji-font-text-transform: unset;
156778
+ --emoji-font-weight: unset;
156779
+ --emoji-gap: unset;
156780
+ --emoji-padding-bottom: unset;
156781
+ --emoji-padding-left: unset;
156782
+ --emoji-padding-right: unset;
156783
+ --emoji-padding-top: unset;
156784
+ --emoji-shadow: unset unset unset unset unset;
156785
+ --emoji-shadow-blur: unset;
156786
+ --emoji-shadow-color: unset;
156787
+ --emoji-shadow-offset-x: unset;
156788
+ --emoji-shadow-offset-y: unset;
156789
+ --emoji-shadow-spread: unset;
156790
+ --emoji-transition-duration: unset;
156791
+ --emoji-transition-mode: unset;
156792
+ --emoji-transition-property: unset;
156793
+ --emoji-translate: none;
156553
156794
  }
156554
156795
 
156555
156796
  @media screen and (prefers-reduced-motion: reduce) {
@@ -156579,67 +156820,86 @@ function hhe() {
156579
156820
  }
156580
156821
 
156581
156822
  :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;
156823
+ background: var(--emoji-background-color);
156824
+ border-radius: 50%;
156825
+ width: 32px;
156826
+ min-width: 32px;
156827
+ height: 32px;
156828
+ font-size: 32px;
156829
+ line-height: 32px;
156830
+ display: inline;
156603
156831
  }
156604
156832
 
156605
- :host [part="button"] {
156606
- --button-min-width: auto;
156833
+ :host([size="tiny"]) {
156834
+ width: 16px;
156835
+ min-width: 16px;
156836
+ height: 16px;
156837
+ font-size: 16px;
156838
+ line-height: 16px;
156607
156839
  }
156608
156840
 
156609
- :host [part="emoji"], :host [part="count"] {
156610
- flex-shrink: 0;
156841
+ :host([size="small"]) {
156842
+ width: 24px;
156843
+ min-width: 24px;
156844
+ height: 24px;
156845
+ font-size: 24px;
156846
+ line-height: 24px;
156847
+ }
156848
+
156849
+ :host([size="medium"]) {
156850
+ width: 32px;
156851
+ min-width: 32px;
156852
+ height: 32px;
156853
+ font-size: 32px;
156854
+ line-height: 32px;
156855
+ }
156856
+
156857
+ :host([size="large"]) {
156858
+ width: 48px;
156859
+ min-width: 48px;
156860
+ height: 48px;
156861
+ font-size: 48px;
156862
+ line-height: 48px;
156863
+ }
156864
+
156865
+ :host([size="giant"]) {
156866
+ width: 56px;
156867
+ min-width: 56px;
156868
+ height: 56px;
156869
+ font-size: 56px;
156870
+ line-height: 56px;
156611
156871
  }
156612
156872
 
156613
156873
  `;
156614
156874
  }
156615
156875
  //#endregion
156616
- //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Memphis.js
156876
+ //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Emoji/Themes/EmojiElement.Memphis.js
156617
156877
  function ghe() {
156618
156878
  return B`
156619
156879
  :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;
156880
+ --emoji-background-color: unset;
156881
+ --emoji-font-family: unset;
156882
+ --emoji-font-letter-spacing: unset;
156883
+ --emoji-font-line-height: unset;
156884
+ --emoji-font-size: unset;
156885
+ --emoji-font-text-decoration: unset;
156886
+ --emoji-font-text-transform: unset;
156887
+ --emoji-font-weight: unset;
156888
+ --emoji-gap: unset;
156889
+ --emoji-padding-bottom: unset;
156890
+ --emoji-padding-left: unset;
156891
+ --emoji-padding-right: unset;
156892
+ --emoji-padding-top: unset;
156893
+ --emoji-shadow: unset unset unset unset unset;
156894
+ --emoji-shadow-blur: unset;
156895
+ --emoji-shadow-color: unset;
156896
+ --emoji-shadow-offset-x: unset;
156897
+ --emoji-shadow-offset-y: unset;
156898
+ --emoji-shadow-spread: unset;
156899
+ --emoji-transition-duration: unset;
156900
+ --emoji-transition-mode: unset;
156901
+ --emoji-transition-property: unset;
156902
+ --emoji-translate: none;
156643
156903
  }
156644
156904
 
156645
156905
  @media screen and (prefers-reduced-motion: reduce) {
@@ -156669,41 +156929,60 @@ function ghe() {
156669
156929
  }
156670
156930
 
156671
156931
  :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;
156932
+ background: var(--emoji-background-color);
156933
+ border-radius: 50%;
156934
+ width: 32px;
156935
+ min-width: 32px;
156936
+ height: 32px;
156937
+ font-size: 32px;
156938
+ line-height: 32px;
156939
+ display: inline;
156693
156940
  }
156694
156941
 
156695
- :host [part="button"] {
156696
- --button-min-width: auto;
156942
+ :host([size="tiny"]) {
156943
+ width: 16px;
156944
+ min-width: 16px;
156945
+ height: 16px;
156946
+ font-size: 16px;
156947
+ line-height: 16px;
156697
156948
  }
156698
156949
 
156699
- :host [part="emoji"], :host [part="count"] {
156700
- flex-shrink: 0;
156950
+ :host([size="small"]) {
156951
+ width: 24px;
156952
+ min-width: 24px;
156953
+ height: 24px;
156954
+ font-size: 24px;
156955
+ line-height: 24px;
156956
+ }
156957
+
156958
+ :host([size="medium"]) {
156959
+ width: 32px;
156960
+ min-width: 32px;
156961
+ height: 32px;
156962
+ font-size: 32px;
156963
+ line-height: 32px;
156964
+ }
156965
+
156966
+ :host([size="large"]) {
156967
+ width: 48px;
156968
+ min-width: 48px;
156969
+ height: 48px;
156970
+ font-size: 48px;
156971
+ line-height: 48px;
156972
+ }
156973
+
156974
+ :host([size="giant"]) {
156975
+ width: 56px;
156976
+ min-width: 56px;
156977
+ height: 56px;
156978
+ font-size: 56px;
156979
+ line-height: 56px;
156701
156980
  }
156702
156981
 
156703
156982
  `;
156704
156983
  }
156705
156984
  //#endregion
156706
- //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/ChatMessageReactionElement.js
156985
+ //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Emoji/EmojiElement.js
156707
156986
  var m1 = function(e, t, n, r) {
156708
156987
  var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
156709
156988
  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
@@ -156711,262 +156990,120 @@ var m1 = function(e, t, n, r) {
156711
156990
  return i > 3 && a && Object.defineProperty(t, n, a), a;
156712
156991
  }, h1 = function(e, t) {
156713
156992
  if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
156714
- }, g1 = class extends F(R(j)) {
156715
- _emoji;
156716
- _count;
156993
+ }, g1 = class extends F(fS(j)) {
156994
+ _unicode;
156717
156995
  constructor() {
156718
- super(), this._emoji = "", this._count = 1;
156996
+ super(), this._unicode = "";
156719
156997
  }
156720
156998
  static get is() {
156721
- return "mosaik-chat-message-reaction";
156999
+ return "mosaik-emoji";
157000
+ }
157001
+ get unicode() {
157002
+ return this._unicode;
157003
+ }
157004
+ set unicode(e) {
157005
+ let t = this.normalizeUnicodeInput(e);
157006
+ this._unicode !== t && (this._unicode = t, this.requestUpdate("unicode"), this.requestUpdate("emoji"));
156722
157007
  }
156723
157008
  get emoji() {
156724
- return this._emoji;
157009
+ return this.transformUnicodeToEmoji(this._unicode);
156725
157010
  }
156726
157011
  set emoji(e) {
156727
- this._emoji !== e && (this._emoji = e, this.requestUpdate("emoji"));
157012
+ let t = this.transformEmojiToUnicode(e);
157013
+ t !== this._unicode && (this._unicode = t, this.requestUpdate("unicode"), this.requestUpdate("emoji"));
156728
157014
  }
156729
- get count() {
156730
- return this._count;
157015
+ toEmoji() {
157016
+ return this.transformUnicodeToEmoji(this.unicode);
156731
157017
  }
156732
- set count(e) {
156733
- this._count !== e && (this._count = e, this.requestUpdate("count"));
157018
+ toUnicode() {
157019
+ return this.transformEmojiToUnicode(this.emoji);
157020
+ }
157021
+ transformUnicodeToEmoji(e) {
157022
+ if (e == null) return "";
157023
+ let t = e.replace(/(U\+|0x)/gi, " ").match(/[0-9a-fA-F]{1,8}/g) ?? [];
157024
+ return t.length === 0 ? "" : t.map((e) => parseInt(e, 16)).filter((e) => Number.isFinite(e)).map((e) => String.fromCodePoint(e)).join("");
157025
+ }
157026
+ transformEmojiToUnicode(e) {
157027
+ if (e == null || e === "") return "";
157028
+ let t = [];
157029
+ for (let n of e) {
157030
+ let e = n.codePointAt(0) ?? void 0;
157031
+ e !== void 0 && t.push(e.toString(16).toUpperCase());
157032
+ }
157033
+ return t.join("-");
157034
+ }
157035
+ normalizeUnicodeInput(e) {
157036
+ return e == null || e.trim() === "" ? "" : (e.replace(/(U\+|0x)/gi, " ").match(/[0-9a-fA-F]{1,8}/g) ?? []).map((e) => e.toUpperCase()).join("-");
156734
157037
  }
156735
157038
  };
156736
157039
  m1([
156737
157040
  P({ type: String }),
156738
157041
  h1("design:type", String),
156739
157042
  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",
157043
+ ], g1.prototype, "unicode", null), m1([
157044
+ P({ type: String }),
157045
+ h1("design:type", String),
157046
+ h1("design:paramtypes", [String])
157047
+ ], g1.prototype, "emoji", null), g1 = m1([H({
157048
+ selector: "mosaik-emoji",
156746
157049
  template: phe,
156747
157050
  themes: {
156748
157051
  joy: hhe,
156749
157052
  memphis: ghe,
156750
157053
  cosmopolitan: mhe
156751
157054
  },
156752
- host: {
156753
- role: "button",
156754
- slot: "reaction"
156755
- },
156756
- imports: [qS]
157055
+ host: { role: "text" },
157056
+ imports: []
156757
157057
  }), h1("design:paramtypes", [])], g1);
156758
157058
  //#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) {
157059
+ //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/ChatMessageReactionElementTemplate.js
157060
+ function _he(e) {
156938
157061
  return V`
156939
- <span>${e.transformUnicodeToEmoji(e.unicode)}</span>
157062
+ <mosaik-button part="button"
157063
+ .dir="${e.dir}"
157064
+ .lang="${e.lang}"
157065
+ .appearance="${"soft"}"
157066
+ .disabled="${e.disabled}">
157067
+ <mosaik-emoji slot="icon"
157068
+ part="emoji"
157069
+ .emoji="${e.emoji}"
157070
+ .size="${"tiny"}"></mosaik-emoji>
157071
+ ${U(e.count > 1, () => V`
157072
+ <mosaik-text slot="label"
157073
+ part="count"
157074
+ .text="${String(e.count)}"></mosaik-text>
157075
+ `)}
157076
+ </mosaik-button>
156940
157077
  `;
156941
157078
  }
156942
157079
  //#endregion
156943
- //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Emoji/Themes/EmojiElement.Cosmopolitan.js
156944
- function xhe() {
157080
+ //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Cosmopolitan.js
157081
+ function vhe() {
156945
157082
  return B`
156946
157083
  :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;
157084
+ --chat-message-reaction-font-family: var(--cosmopolitan-font-family);
157085
+ --chat-message-reaction-font-letter-spacing: var(--cosmopolitan-typography-caption-letter-spacing);
157086
+ --chat-message-reaction-font-line-height: var(--cosmopolitan-typography-caption-line-height);
157087
+ --chat-message-reaction-font-size: var(--cosmopolitan-typography-caption-font-size);
157088
+ --chat-message-reaction-font-text-decoration: var(--cosmopolitan-typography-caption-text-decoration);
157089
+ --chat-message-reaction-font-text-transform: var(--cosmopolitan-typography-caption-text-transform);
157090
+ --chat-message-reaction-font-weight: var(--cosmopolitan-typography-caption-font-weight);
157091
+ --chat-message-reaction-foreground-color: var(--cosmopolitan-scheme-foreground);
157092
+ --chat-message-reaction-gap: calc(var(--cosmopolitan-layout-space) / 2);
157093
+ --chat-message-reaction-padding-bottom: calc(var(--cosmopolitan-layout-space) / 2);
157094
+ --chat-message-reaction-padding-left: var(--cosmopolitan-layout-space);
157095
+ --chat-message-reaction-padding-right: var(--cosmopolitan-layout-space);
157096
+ --chat-message-reaction-padding-top: calc(var(--cosmopolitan-layout-space) / 2);
157097
+ --chat-message-reaction-shadow: unset unset unset unset unset;
157098
+ --chat-message-reaction-shadow-blur: unset;
157099
+ --chat-message-reaction-shadow-color: unset;
157100
+ --chat-message-reaction-shadow-offset-x: unset;
157101
+ --chat-message-reaction-shadow-offset-y: unset;
157102
+ --chat-message-reaction-shadow-spread: unset;
157103
+ --chat-message-reaction-transition-duration: var(--cosmopolitan-duration-short);
157104
+ --chat-message-reaction-transition-mode: ease;
157105
+ --chat-message-reaction-transition-property: background-color, color, transform;
157106
+ --chat-message-reaction-translate: none;
156970
157107
  }
156971
157108
 
156972
157109
  @media screen and (prefers-reduced-motion: reduce) {
@@ -156996,86 +157133,71 @@ function xhe() {
156996
157133
  }
156997
157134
 
156998
157135
  :host {
156999
- background: var(--emoji-background-color);
157000
- border-radius: 50%;
157001
- width: 32px;
157002
- min-width: 32px;
157003
- height: 32px;
157004
- font-size: 32px;
157005
- line-height: 32px;
157006
- display: inline;
157007
- }
157008
-
157009
- :host([size="tiny"]) {
157010
- width: 16px;
157011
- min-width: 16px;
157012
- height: 16px;
157013
- font-size: 16px;
157014
- line-height: 16px;
157136
+ color: var(--chat-message-reaction-foreground-color);
157137
+ font-family: var(--chat-message-reaction-font-family);
157138
+ font-size: var(--chat-message-reaction-font-size);
157139
+ font-weight: var(--chat-message-reaction-font-weight);
157140
+ line-height: var(--chat-message-reaction-font-line-height);
157141
+ letter-spacing: var(--chat-message-reaction-font-letter-spacing);
157142
+ -webkit-text-decoration: var(--chat-message-reaction-font-text-decoration);
157143
+ text-decoration: var(--chat-message-reaction-font-text-decoration);
157144
+ text-transform: var(--chat-message-reaction-font-text-transform);
157145
+ justify-content: center;
157146
+ align-items: center;
157147
+ gap: var(--chat-message-reaction-gap);
157148
+ padding-top: var(--chat-message-reaction-padding-top);
157149
+ padding-bottom: var(--chat-message-reaction-padding-bottom);
157150
+ padding-left: var(--chat-message-reaction-padding-left);
157151
+ padding-right: var(--chat-message-reaction-padding-right);
157152
+ transition-duration: var(--chat-message-reaction-transition-duration);
157153
+ transition-property: var(--chat-message-reaction-transition-property);
157154
+ transition-timing-function: var(--chat-message-reaction-transition-mode);
157155
+ transform: var(--chat-message-reaction-translate);
157156
+ display: inline-flex;
157015
157157
  }
157016
157158
 
157017
- :host([size="small"]) {
157018
- width: 24px;
157019
- min-width: 24px;
157020
- height: 24px;
157021
- font-size: 24px;
157022
- line-height: 24px;
157159
+ :host [part="button"] {
157160
+ --button-min-width: auto;
157023
157161
  }
157024
157162
 
157025
- :host([size="medium"]) {
157026
- width: 32px;
157027
- min-width: 32px;
157028
- height: 32px;
157029
- font-size: 32px;
157030
- line-height: 32px;
157163
+ :host [part="emoji"], :host [part="count"] {
157164
+ text-align: center;
157165
+ flex-shrink: 0;
157166
+ justify-content: center;
157167
+ align-items: center;
157168
+ display: inline-flex;
157031
157169
  }
157032
157170
 
157033
- :host([size="large"]) {
157034
- width: 48px;
157035
- min-width: 48px;
157036
- height: 48px;
157037
- font-size: 48px;
157038
- line-height: 48px;
157039
- }
157040
-
157041
- :host([size="giant"]) {
157042
- width: 56px;
157043
- min-width: 56px;
157044
- height: 56px;
157045
- font-size: 56px;
157046
- line-height: 56px;
157047
- }
157048
-
157049
- `;
157171
+ `;
157050
157172
  }
157051
157173
  //#endregion
157052
- //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Emoji/Themes/EmojiElement.Joy.js
157053
- function She() {
157174
+ //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Joy.js
157175
+ function yhe() {
157054
157176
  return B`
157055
157177
  :host {
157056
- --emoji-background-color: unset;
157057
- --emoji-font-family: unset;
157058
- --emoji-font-letter-spacing: unset;
157059
- --emoji-font-line-height: unset;
157060
- --emoji-font-size: unset;
157061
- --emoji-font-text-decoration: unset;
157062
- --emoji-font-text-transform: unset;
157063
- --emoji-font-weight: unset;
157064
- --emoji-gap: unset;
157065
- --emoji-padding-bottom: unset;
157066
- --emoji-padding-left: unset;
157067
- --emoji-padding-right: unset;
157068
- --emoji-padding-top: unset;
157069
- --emoji-shadow: unset unset unset unset unset;
157070
- --emoji-shadow-blur: unset;
157071
- --emoji-shadow-color: unset;
157072
- --emoji-shadow-offset-x: unset;
157073
- --emoji-shadow-offset-y: unset;
157074
- --emoji-shadow-spread: unset;
157075
- --emoji-transition-duration: unset;
157076
- --emoji-transition-mode: unset;
157077
- --emoji-transition-property: unset;
157078
- --emoji-translate: none;
157178
+ --chat-message-reaction-font-family: var(--joy-font-family);
157179
+ --chat-message-reaction-font-letter-spacing: var(--joy-typography-caption-letter-spacing);
157180
+ --chat-message-reaction-font-line-height: var(--joy-typography-caption-line-height);
157181
+ --chat-message-reaction-font-size: var(--joy-typography-caption-font-size);
157182
+ --chat-message-reaction-font-text-decoration: var(--joy-typography-caption-text-decoration);
157183
+ --chat-message-reaction-font-text-transform: var(--joy-typography-caption-text-transform);
157184
+ --chat-message-reaction-font-weight: var(--joy-typography-caption-font-weight);
157185
+ --chat-message-reaction-foreground-color: var(--joy-scheme-foreground);
157186
+ --chat-message-reaction-gap: calc(var(--joy-layout-space) / 2);
157187
+ --chat-message-reaction-padding-bottom: unset;
157188
+ --chat-message-reaction-padding-left: unset;
157189
+ --chat-message-reaction-padding-right: unset;
157190
+ --chat-message-reaction-padding-top: unset;
157191
+ --chat-message-reaction-shadow: unset unset unset unset unset;
157192
+ --chat-message-reaction-shadow-blur: unset;
157193
+ --chat-message-reaction-shadow-color: unset;
157194
+ --chat-message-reaction-shadow-offset-x: unset;
157195
+ --chat-message-reaction-shadow-offset-y: unset;
157196
+ --chat-message-reaction-shadow-spread: unset;
157197
+ --chat-message-reaction-transition-duration: var(--joy-duration-short);
157198
+ --chat-message-reaction-transition-mode: ease;
157199
+ --chat-message-reaction-transition-property: background-color, color, transform;
157200
+ --chat-message-reaction-translate: none;
157079
157201
  }
157080
157202
 
157081
157203
  @media screen and (prefers-reduced-motion: reduce) {
@@ -157105,86 +157227,71 @@ function She() {
157105
157227
  }
157106
157228
 
157107
157229
  :host {
157108
- background: var(--emoji-background-color);
157109
- border-radius: 50%;
157110
- width: 32px;
157111
- min-width: 32px;
157112
- height: 32px;
157113
- font-size: 32px;
157114
- line-height: 32px;
157115
- display: inline;
157116
- }
157117
-
157118
- :host([size="tiny"]) {
157119
- width: 16px;
157120
- min-width: 16px;
157121
- height: 16px;
157122
- font-size: 16px;
157123
- line-height: 16px;
157124
- }
157125
-
157126
- :host([size="small"]) {
157127
- width: 24px;
157128
- min-width: 24px;
157129
- height: 24px;
157130
- font-size: 24px;
157131
- line-height: 24px;
157132
- }
157133
-
157134
- :host([size="medium"]) {
157135
- width: 32px;
157136
- min-width: 32px;
157137
- height: 32px;
157138
- font-size: 32px;
157139
- line-height: 32px;
157230
+ color: var(--chat-message-reaction-foreground-color);
157231
+ font-family: var(--chat-message-reaction-font-family);
157232
+ font-size: var(--chat-message-reaction-font-size);
157233
+ font-weight: var(--chat-message-reaction-font-weight);
157234
+ line-height: var(--chat-message-reaction-font-line-height);
157235
+ letter-spacing: var(--chat-message-reaction-font-letter-spacing);
157236
+ -webkit-text-decoration: var(--chat-message-reaction-font-text-decoration);
157237
+ text-decoration: var(--chat-message-reaction-font-text-decoration);
157238
+ text-transform: var(--chat-message-reaction-font-text-transform);
157239
+ justify-content: center;
157240
+ align-items: center;
157241
+ gap: var(--chat-message-reaction-gap);
157242
+ padding-top: var(--chat-message-reaction-padding-top);
157243
+ padding-bottom: var(--chat-message-reaction-padding-bottom);
157244
+ padding-left: var(--chat-message-reaction-padding-left);
157245
+ padding-right: var(--chat-message-reaction-padding-right);
157246
+ transition-duration: var(--chat-message-reaction-transition-duration);
157247
+ transition-property: var(--chat-message-reaction-transition-property);
157248
+ transition-timing-function: var(--chat-message-reaction-transition-mode);
157249
+ transform: var(--chat-message-reaction-translate);
157250
+ display: inline-flex;
157140
157251
  }
157141
157252
 
157142
- :host([size="large"]) {
157143
- width: 48px;
157144
- min-width: 48px;
157145
- height: 48px;
157146
- font-size: 48px;
157147
- line-height: 48px;
157253
+ :host [part="button"] {
157254
+ --button-min-width: auto;
157148
157255
  }
157149
157256
 
157150
- :host([size="giant"]) {
157151
- width: 56px;
157152
- min-width: 56px;
157153
- height: 56px;
157154
- font-size: 56px;
157155
- line-height: 56px;
157257
+ :host [part="emoji"], :host [part="count"] {
157258
+ text-align: center;
157259
+ flex-shrink: 0;
157260
+ justify-content: center;
157261
+ align-items: center;
157262
+ display: inline-flex;
157156
157263
  }
157157
157264
 
157158
157265
  `;
157159
157266
  }
157160
157267
  //#endregion
157161
- //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Emoji/Themes/EmojiElement.Memphis.js
157162
- function Che() {
157268
+ //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Memphis.js
157269
+ function bhe() {
157163
157270
  return B`
157164
157271
  :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;
157272
+ --chat-message-reaction-font-family: var(--memphis-font-family);
157273
+ --chat-message-reaction-font-letter-spacing: var(--memphis-typography-caption-letter-spacing);
157274
+ --chat-message-reaction-font-line-height: var(--memphis-typography-caption-line-height);
157275
+ --chat-message-reaction-font-size: var(--memphis-typography-caption-font-size);
157276
+ --chat-message-reaction-font-text-decoration: var(--memphis-typography-caption-text-decoration);
157277
+ --chat-message-reaction-font-text-transform: var(--memphis-typography-caption-text-transform);
157278
+ --chat-message-reaction-font-weight: var(--memphis-typography-caption-font-weight);
157279
+ --chat-message-reaction-foreground-color: var(--memphis-scheme-foreground);
157280
+ --chat-message-reaction-gap: calc(var(--memphis-layout-space) / 2);
157281
+ --chat-message-reaction-padding-bottom: calc(var(--memphis-layout-space) / 2);
157282
+ --chat-message-reaction-padding-left: var(--memphis-layout-space);
157283
+ --chat-message-reaction-padding-right: var(--memphis-layout-space);
157284
+ --chat-message-reaction-padding-top: calc(var(--memphis-layout-space) / 2);
157285
+ --chat-message-reaction-shadow: unset unset unset unset unset;
157286
+ --chat-message-reaction-shadow-blur: unset;
157287
+ --chat-message-reaction-shadow-color: unset;
157288
+ --chat-message-reaction-shadow-offset-x: unset;
157289
+ --chat-message-reaction-shadow-offset-y: unset;
157290
+ --chat-message-reaction-shadow-spread: unset;
157291
+ --chat-message-reaction-transition-duration: var(--memphis-duration-short);
157292
+ --chat-message-reaction-transition-mode: ease;
157293
+ --chat-message-reaction-transition-property: background-color, color, transform;
157294
+ --chat-message-reaction-translate: none;
157188
157295
  }
157189
157296
 
157190
157297
  @media screen and (prefers-reduced-motion: reduce) {
@@ -157214,60 +157321,160 @@ function Che() {
157214
157321
  }
157215
157322
 
157216
157323
  :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;
157225
- }
157226
-
157227
- :host([size="tiny"]) {
157228
- width: 16px;
157229
- min-width: 16px;
157230
- height: 16px;
157231
- font-size: 16px;
157232
- line-height: 16px;
157233
- }
157234
-
157235
- :host([size="small"]) {
157236
- width: 24px;
157237
- min-width: 24px;
157238
- height: 24px;
157239
- font-size: 24px;
157240
- line-height: 24px;
157324
+ color: var(--chat-message-reaction-foreground-color);
157325
+ font-family: var(--chat-message-reaction-font-family);
157326
+ font-size: var(--chat-message-reaction-font-size);
157327
+ font-weight: var(--chat-message-reaction-font-weight);
157328
+ line-height: var(--chat-message-reaction-font-line-height);
157329
+ letter-spacing: var(--chat-message-reaction-font-letter-spacing);
157330
+ -webkit-text-decoration: var(--chat-message-reaction-font-text-decoration);
157331
+ text-decoration: var(--chat-message-reaction-font-text-decoration);
157332
+ text-transform: var(--chat-message-reaction-font-text-transform);
157333
+ justify-content: center;
157334
+ align-items: center;
157335
+ gap: var(--chat-message-reaction-gap);
157336
+ padding-top: var(--chat-message-reaction-padding-top);
157337
+ padding-bottom: var(--chat-message-reaction-padding-bottom);
157338
+ padding-left: var(--chat-message-reaction-padding-left);
157339
+ padding-right: var(--chat-message-reaction-padding-right);
157340
+ transition-duration: var(--chat-message-reaction-transition-duration);
157341
+ transition-property: var(--chat-message-reaction-transition-property);
157342
+ transition-timing-function: var(--chat-message-reaction-transition-mode);
157343
+ transform: var(--chat-message-reaction-translate);
157344
+ display: inline-flex;
157241
157345
  }
157242
157346
 
157243
- :host([size="medium"]) {
157244
- width: 32px;
157245
- min-width: 32px;
157246
- height: 32px;
157247
- font-size: 32px;
157248
- line-height: 32px;
157347
+ :host [part="button"] {
157348
+ --button-min-width: auto;
157249
157349
  }
157250
157350
 
157251
- :host([size="large"]) {
157252
- width: 48px;
157253
- min-width: 48px;
157254
- height: 48px;
157255
- font-size: 48px;
157256
- line-height: 48px;
157351
+ :host [part="emoji"], :host [part="count"] {
157352
+ text-align: center;
157353
+ flex-shrink: 0;
157354
+ justify-content: center;
157355
+ align-items: center;
157356
+ display: inline-flex;
157257
157357
  }
157258
157358
 
157259
- :host([size="giant"]) {
157260
- width: 56px;
157261
- min-width: 56px;
157262
- height: 56px;
157263
- font-size: 56px;
157264
- line-height: 56px;
157359
+ `;
157265
157360
  }
157266
-
157361
+ //#endregion
157362
+ //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/ChatMessageReactionElement.js
157363
+ var _1 = function(e, t, n, r) {
157364
+ var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
157365
+ if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
157366
+ 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);
157367
+ return i > 3 && a && Object.defineProperty(t, n, a), a;
157368
+ }, v1 = function(e, t) {
157369
+ if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
157370
+ }, y1 = class extends F(R(j)) {
157371
+ _emoji;
157372
+ _count;
157373
+ constructor() {
157374
+ super(), this._emoji = "", this._count = 1;
157375
+ }
157376
+ static get is() {
157377
+ return "mosaik-chat-message-reaction";
157378
+ }
157379
+ get emoji() {
157380
+ return this._emoji;
157381
+ }
157382
+ set emoji(e) {
157383
+ this._emoji !== e && (this._emoji = e, this.requestUpdate("emoji"));
157384
+ }
157385
+ get count() {
157386
+ return this._count;
157387
+ }
157388
+ set count(e) {
157389
+ this._count !== e && (this._count = e, this.requestUpdate("count"));
157390
+ }
157391
+ };
157392
+ _1([
157393
+ P({ type: String }),
157394
+ v1("design:type", String),
157395
+ v1("design:paramtypes", [String])
157396
+ ], y1.prototype, "emoji", null), _1([
157397
+ P({ type: Number }),
157398
+ v1("design:type", Number),
157399
+ v1("design:paramtypes", [Number])
157400
+ ], y1.prototype, "count", null), y1 = _1([H({
157401
+ selector: "mosaik-chat-message-reaction",
157402
+ template: _he,
157403
+ themes: {
157404
+ joy: yhe,
157405
+ memphis: bhe,
157406
+ cosmopolitan: vhe
157407
+ },
157408
+ host: {
157409
+ role: "button",
157410
+ slot: "reaction"
157411
+ },
157412
+ imports: [
157413
+ qS,
157414
+ g1,
157415
+ W
157416
+ ]
157417
+ }), v1("design:paramtypes", [])], y1);
157418
+ //#endregion
157419
+ //#region ../mosaik-elements-foundation/dist/Controls/Types/DockSide.js
157420
+ var xhe = {
157421
+ Left: "left",
157422
+ Right: "right",
157423
+ Top: "top",
157424
+ Bottom: "bottom"
157425
+ }, She = function(e, t, n, r) {
157426
+ var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
157427
+ if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
157428
+ 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);
157429
+ return i > 3 && a && Object.defineProperty(t, n, a), a;
157430
+ }, b1 = function(e, t) {
157431
+ if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
157432
+ }, x1 = class extends R(j) {
157433
+ _isAttached;
157434
+ _chatElement;
157435
+ _dock;
157436
+ constructor() {
157437
+ super(), this._isAttached = !1, this._chatElement = void 0, this._dock = "left";
157438
+ }
157439
+ get dock() {
157440
+ return this._dock;
157441
+ }
157442
+ set dock(e) {
157443
+ this._dock !== e && (this._dock = e, this.requestUpdate("dock"));
157444
+ }
157445
+ get chatElement() {
157446
+ return this._chatElement;
157447
+ }
157448
+ attach(e) {
157449
+ this._isAttached || (this._isAttached = !0, this._chatElement = e);
157450
+ }
157451
+ };
157452
+ She([
157453
+ A({ type: xhe }),
157454
+ b1("design:type", Object),
157455
+ b1("design:paramtypes", [Object])
157456
+ ], x1.prototype, "dock", null);
157457
+ //#endregion
157458
+ //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/Tools/AttachmentChatToolElementTemplate.js
157459
+ function Che(e) {
157460
+ return V`
157461
+ <mosaik-file-picker .multiple="${!0}"
157462
+ .accept="${e.accept}"
157463
+ .directory="${e.directory}"
157464
+ .disabled="${e.disabled}"
157465
+ .dir="${e.dir}"
157466
+ @filesPicked="${(t) => {
157467
+ e.execute(t.detail.files);
157468
+ }}">
157469
+ <mosaik-button .dir="${e.dir}"
157470
+ .disabled="${e.disabled}"
157471
+ .appearance="${"plain"}"
157472
+ .icon="${X.add}"></mosaik-button>
157473
+ </mosaik-file-picker>
157267
157474
  `;
157268
157475
  }
157269
157476
  //#endregion
157270
- //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Emoji/EmojiElement.js
157477
+ //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/Tools/AttachmentChatToolElement.js
157271
157478
  var S1 = function(e, t, n, r) {
157272
157479
  var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
157273
157480
  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
@@ -157275,70 +157482,115 @@ var S1 = function(e, t, n, r) {
157275
157482
  return i > 3 && a && Object.defineProperty(t, n, a), a;
157276
157483
  }, C1 = function(e, t) {
157277
157484
  if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
157278
- }, w1 = class extends F(fS(j)) {
157279
- _unicode;
157485
+ }, w1 = class extends F(x1) {
157486
+ _attachmentRejected;
157487
+ _multiple;
157488
+ _accept;
157489
+ _directory;
157490
+ _maxFiles;
157491
+ _maxFileSize;
157280
157492
  constructor() {
157281
- super(), this._unicode = "";
157493
+ super(), this._multiple = !1, this._accept = [], this._directory = !1, this._maxFiles = 10, this._maxFileSize = 10 * 1024 * 1024, this._attachmentRejected = new E(this, "attachmentReject");
157282
157494
  }
157283
157495
  static get is() {
157284
- return "mosaik-emoji";
157496
+ return "mosaik-attachment-chat-tool";
157285
157497
  }
157286
- get unicode() {
157287
- return this._unicode;
157498
+ get multiple() {
157499
+ return this._multiple;
157288
157500
  }
157289
- set unicode(e) {
157290
- let t = this.normalizeUnicodeInput(e);
157291
- this._unicode !== t && (this._unicode = t, this.requestUpdate("unicode"), this.requestUpdate("emoji"));
157501
+ set multiple(e) {
157502
+ this._multiple !== e && (this._multiple = e, this.requestUpdate("multiple"));
157292
157503
  }
157293
- get emoji() {
157294
- return this.transformUnicodeToEmoji(this._unicode);
157504
+ get accept() {
157505
+ return this._accept;
157295
157506
  }
157296
- set emoji(e) {
157297
- let t = this.transformEmojiToUnicode(e);
157298
- t !== this._unicode && (this._unicode = t, this.requestUpdate("unicode"), this.requestUpdate("emoji"));
157507
+ set accept(e) {
157508
+ this._accept !== e && (this._accept = e, this.requestUpdate("accept"));
157299
157509
  }
157300
- toEmoji() {
157301
- return this.transformUnicodeToEmoji(this.unicode);
157510
+ get directory() {
157511
+ return this._directory;
157302
157512
  }
157303
- toUnicode() {
157304
- return this.transformEmojiToUnicode(this.emoji);
157513
+ set directory(e) {
157514
+ this._directory !== e && (this._directory = e, this.requestUpdate("directory"));
157305
157515
  }
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("");
157516
+ get maxFiles() {
157517
+ return this._maxFiles;
157310
157518
  }
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("-");
157519
+ set maxFiles(e) {
157520
+ this._maxFiles !== e && (this._maxFiles = e, this.requestUpdate("maxFiles"));
157319
157521
  }
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("-");
157522
+ get maxFileSize() {
157523
+ return this._maxFileSize;
157524
+ }
157525
+ set maxFileSize(e) {
157526
+ this._maxFileSize !== e && (this._maxFileSize = e, this.requestUpdate("maxFileSize"));
157527
+ }
157528
+ get attachmentRejected() {
157529
+ return this._attachmentRejected;
157530
+ }
157531
+ execute(e) {
157532
+ 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);
157533
+ }
157534
+ onAttachmentRejected(e) {
157535
+ this._attachmentRejected.emit(e);
157536
+ }
157537
+ validate(e) {
157538
+ return this.accept.length > 0 && !this.accept.includes(e.type) ? (this.onAttachmentRejected({
157539
+ file: e,
157540
+ reason: "type",
157541
+ cancel: !0
157542
+ }), !1) : e.size > this.maxFileSize ? (this.onAttachmentRejected({
157543
+ file: e,
157544
+ reason: "size",
157545
+ cancel: !0
157546
+ }), !1) : this.chatElement?.inputElement && this.chatElement.inputElement.value.files.length >= this.maxFiles ? (this.onAttachmentRejected({
157547
+ file: e,
157548
+ reason: "count",
157549
+ cancel: !0
157550
+ }), !1) : !0;
157322
157551
  }
157323
157552
  };
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
157553
+ S1([k({ eventName: "attachmentReject" }), C1("design:type", Object)], w1.prototype, "_attachmentRejected", void 0), S1([
157554
+ A({
157555
+ type: Boolean,
157556
+ useDefault: !0
157557
+ }),
157558
+ C1("design:type", Boolean),
157559
+ C1("design:paramtypes", [Boolean])
157560
+ ], w1.prototype, "multiple", null), S1([
157561
+ P({ type: Array }),
157562
+ C1("design:type", Array),
157563
+ C1("design:paramtypes", [Array])
157564
+ ], w1.prototype, "accept", null), S1([
157565
+ A({
157566
+ type: Boolean,
157567
+ useDefault: !0
157568
+ }),
157569
+ C1("design:type", Boolean),
157570
+ C1("design:paramtypes", [Boolean])
157571
+ ], w1.prototype, "directory", null), S1([
157572
+ A({
157573
+ type: Number,
157574
+ useDefault: !0
157575
+ }),
157576
+ C1("design:type", Number),
157577
+ C1("design:paramtypes", [Number])
157578
+ ], w1.prototype, "maxFiles", null), S1([
157579
+ A({
157580
+ type: Number,
157581
+ useDefault: !0
157582
+ }),
157583
+ C1("design:type", Number),
157584
+ C1("design:paramtypes", [Number])
157585
+ ], w1.prototype, "maxFileSize", null), w1 = S1([H({
157586
+ selector: "mosaik-attachment-chat-tool",
157587
+ template: Che,
157588
+ host: { slot: "tools" },
157589
+ options: {
157590
+ mode: "open",
157591
+ delegatesFocus: !0
157339
157592
  },
157340
- host: { role: "text" },
157341
- imports: []
157593
+ imports: [YH, qS]
157342
157594
  }), C1("design:paramtypes", [])], w1);
157343
157595
  //#endregion
157344
157596
  //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/Models/IChatReaction.js
@@ -157404,7 +157656,7 @@ var T1 = function(e, t, n, r) {
157404
157656
  return i > 3 && a && Object.defineProperty(t, n, a), a;
157405
157657
  }, E1 = function(e, t) {
157406
157658
  if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
157407
- }, D1 = class extends F(v1) {
157659
+ }, D1 = class extends F(x1) {
157408
157660
  _reactions;
157409
157661
  constructor() {
157410
157662
  super(), this._reactions = whe.default;
@@ -157438,7 +157690,7 @@ T1([
157438
157690
  hT,
157439
157691
  dT,
157440
157692
  SJ,
157441
- w1
157693
+ g1
157442
157694
  ]
157443
157695
  }), E1("design:paramtypes", [])], D1);
157444
157696
  //#endregion
@@ -157588,7 +157840,7 @@ var A1 = function(e, t, n, r) {
157588
157840
  return i > 3 && a && Object.defineProperty(t, n, a), a;
157589
157841
  }, j1 = function(e, t) {
157590
157842
  if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
157591
- }, M1 = class extends F(v1) {
157843
+ }, M1 = class extends F(x1) {
157592
157844
  _recCancel;
157593
157845
  _recStart;
157594
157846
  _recPause;