@breadstone/mosaik-elements-svelte 0.1.3 → 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 +10 -0
  2. package/index.mjs +1059 -700
  3. package/package.json +3 -3
package/index.mjs CHANGED
@@ -154347,54 +154347,71 @@ 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>
154398
+ </div>
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>
154390
154409
  </div>
154391
154410
  </div>
154392
154411
  <slot name="attachment"></slot>
154393
154412
  </div>
154394
154413
  </div>
154395
- <div part="reactions">
154396
- <slot name="reaction"></slot>
154397
- </div>
154414
+
154398
154415
  `;
154399
154416
  }
154400
154417
  //#endregion
@@ -154465,22 +154482,47 @@ function rhe() {
154465
154482
  }
154466
154483
 
154467
154484
  :host [part="root"] {
154468
- justify-content: stretch;
154469
- align-items: stretch;
154485
+ justify-content: flex-end;
154486
+ align-items: flex-start;
154470
154487
  gap: var(--chat-message-gap);
154471
154488
  flex-direction: row-reverse;
154472
154489
  display: flex;
154473
154490
  }
154474
154491
 
154475
- :host [part="root"] [part="content"] {
154492
+ :host [part="root"] [part="message-area"] {
154476
154493
  justify-content: center;
154477
154494
  align-items: flex-end;
154478
154495
  gap: calc(var(--chat-message-gap) / 2);
154479
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%;
154480
154521
  display: flex;
154522
+ position: relative;
154481
154523
  }
154482
154524
 
154483
- :host [part="root"] [part="content"] [part="message"] {
154525
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] {
154484
154526
  border-width: var(--chat-message-border-width);
154485
154527
  border-radius: var(--chat-message-border-radius);
154486
154528
  border-style: var(--chat-message-border-style);
@@ -154504,44 +154546,103 @@ function rhe() {
154504
154546
  text-decoration: var(--chat-message-font-text-decoration);
154505
154547
  text-transform: var(--chat-message-font-text-transform);
154506
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;
154507
154550
  border-top-right-radius: 0;
154508
154551
  flex-direction: column;
154552
+ flex: auto;
154553
+ min-width: 0;
154554
+ max-width: 100%;
154509
154555
  display: flex;
154510
154556
  }
154511
154557
 
154512
- :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"] {
154513
154559
  gap: var(--chat-message-gap);
154514
154560
  justify-content: space-between;
154515
154561
  align-items: center;
154516
154562
  display: flex;
154517
154563
  }
154518
154564
 
154519
- :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"] {
154520
154566
  word-break: break-word;
154521
154567
  }
154522
154568
 
154523
- :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"] {
154524
154570
  gap: calc(var(--chat-message-gap) / 2);
154525
154571
  align-items: center;
154526
154572
  display: flex;
154527
154573
  }
154528
154574
 
154529
- :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"] {
154530
154576
  animation: 1.2s ease-out infinite wave;
154531
154577
  }
154532
154578
 
154533
- :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) {
154534
154580
  animation-delay: -1s;
154535
154581
  }
154536
154582
 
154537
- :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) {
154538
154584
  animation-delay: -.8s;
154539
154585
  }
154540
154586
 
154541
- :host [part="reactions"] {
154542
- height: 0;
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;
154590
+ display: flex;
154591
+ position: absolute;
154592
+ inset-block-start: 0;
154593
+ inset-inline-start: calc(100% + var(--chat-message-gap) / 2);
154594
+ }
154595
+
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%;
154610
+ display: flex;
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%;
154543
154624
  display: flex;
154544
- position: relative;
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;
154545
154646
  }
154546
154647
 
154547
154648
  :host([reply]) {
@@ -154551,17 +154652,34 @@ function rhe() {
154551
154652
 
154552
154653
  :host([reply]) [part="root"] {
154553
154654
  flex-direction: row;
154655
+ justify-content: flex-start;
154554
154656
  }
154555
154657
 
154556
- :host([reply]) [part="root"] [part="content"] {
154658
+ :host([reply]) [part="root"] [part="message-area"], :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] {
154557
154659
  align-items: flex-start;
154558
154660
  }
154559
154661
 
154560
- :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"] {
154561
154667
  border-top-right-radius: var(--chat-message-border-radius);
154562
154668
  border-top-left-radius: 0;
154563
154669
  }
154564
154670
 
154671
+ :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] {
154672
+ align-items: flex-start;
154673
+ }
154674
+
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;
154677
+ }
154678
+
154679
+ :host([has-footer]) {
154680
+ margin-bottom: calc(var(--chat-message-white-space) / 4);
154681
+ }
154682
+
154565
154683
  @keyframes wave {
154566
154684
  0%, 60%, 100% {
154567
154685
  transform: initial;
@@ -154642,22 +154760,47 @@ function ihe() {
154642
154760
  }
154643
154761
 
154644
154762
  :host [part="root"] {
154645
- justify-content: stretch;
154646
- align-items: stretch;
154763
+ justify-content: flex-end;
154764
+ align-items: flex-start;
154647
154765
  gap: var(--chat-message-gap);
154648
154766
  flex-direction: row-reverse;
154649
154767
  display: flex;
154650
154768
  }
154651
154769
 
154652
- :host [part="root"] [part="content"] {
154770
+ :host [part="root"] [part="message-area"] {
154653
154771
  justify-content: center;
154654
154772
  align-items: flex-end;
154655
154773
  gap: calc(var(--chat-message-gap) / 2);
154656
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%;
154787
+ display: flex;
154788
+ }
154789
+
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%;
154657
154799
  display: flex;
154800
+ position: relative;
154658
154801
  }
154659
154802
 
154660
- :host [part="root"] [part="content"] [part="message"] {
154803
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] {
154661
154804
  border-width: var(--chat-message-border-width);
154662
154805
  border-radius: var(--chat-message-border-radius);
154663
154806
  border-style: var(--chat-message-border-style);
@@ -154681,44 +154824,103 @@ function ihe() {
154681
154824
  text-decoration: var(--chat-message-font-text-decoration);
154682
154825
  text-transform: var(--chat-message-font-text-transform);
154683
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;
154684
154828
  border-top-right-radius: 0;
154685
154829
  flex-direction: column;
154830
+ flex: auto;
154831
+ min-width: 0;
154832
+ max-width: 100%;
154686
154833
  display: flex;
154687
154834
  }
154688
154835
 
154689
- :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"] {
154690
154837
  gap: var(--chat-message-gap);
154691
154838
  justify-content: space-between;
154692
154839
  align-items: center;
154693
154840
  display: flex;
154694
154841
  }
154695
154842
 
154696
- :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"] {
154697
154844
  word-break: break-word;
154698
154845
  }
154699
154846
 
154700
- :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"] {
154701
154848
  gap: calc(var(--chat-message-gap) / 2);
154702
154849
  align-items: center;
154703
154850
  display: flex;
154704
154851
  }
154705
154852
 
154706
- :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"] {
154707
154854
  animation: 1.2s ease-out infinite wave;
154708
154855
  }
154709
154856
 
154710
- :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) {
154711
154858
  animation-delay: -1s;
154712
154859
  }
154713
154860
 
154714
- :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) {
154715
154862
  animation-delay: -.8s;
154716
154863
  }
154717
154864
 
154718
- :host [part="reactions"] {
154719
- height: 0;
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;
154720
154868
  display: flex;
154721
- position: relative;
154869
+ position: absolute;
154870
+ inset-block-start: 0;
154871
+ inset-inline-start: calc(100% + var(--chat-message-gap) / 2);
154872
+ }
154873
+
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%;
154888
+ display: flex;
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;
154722
154924
  }
154723
154925
 
154724
154926
  :host([reply]) {
@@ -154728,17 +154930,34 @@ function ihe() {
154728
154930
 
154729
154931
  :host([reply]) [part="root"] {
154730
154932
  flex-direction: row;
154933
+ justify-content: flex-start;
154731
154934
  }
154732
154935
 
154733
- :host([reply]) [part="root"] [part="content"] {
154936
+ :host([reply]) [part="root"] [part="message-area"], :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] {
154734
154937
  align-items: flex-start;
154735
154938
  }
154736
154939
 
154737
- :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"] {
154738
154945
  border-top-right-radius: var(--chat-message-border-radius);
154739
154946
  border-top-left-radius: 0;
154740
154947
  }
154741
154948
 
154949
+ :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] {
154950
+ align-items: flex-start;
154951
+ }
154952
+
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;
154955
+ }
154956
+
154957
+ :host([has-footer]) {
154958
+ margin-bottom: calc(var(--chat-message-white-space) / 4);
154959
+ }
154960
+
154742
154961
  @keyframes wave {
154743
154962
  0%, 60%, 100% {
154744
154963
  transform: initial;
@@ -154894,22 +155113,47 @@ function ahe() {
154894
155113
  }
154895
155114
 
154896
155115
  :host [part="root"] {
154897
- justify-content: stretch;
154898
- align-items: stretch;
155116
+ justify-content: flex-end;
155117
+ align-items: flex-start;
154899
155118
  gap: var(--chat-message-gap);
154900
155119
  flex-direction: row-reverse;
154901
155120
  display: flex;
154902
155121
  }
154903
155122
 
154904
- :host [part="root"] [part="content"] {
155123
+ :host [part="root"] [part="message-area"] {
154905
155124
  justify-content: center;
154906
155125
  align-items: flex-end;
154907
155126
  gap: calc(var(--chat-message-gap) / 2);
154908
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%;
154909
155152
  display: flex;
155153
+ position: relative;
154910
155154
  }
154911
155155
 
154912
- :host [part="root"] [part="content"] [part="message"] {
155156
+ :host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] {
154913
155157
  border-width: var(--chat-message-border-width);
154914
155158
  border-radius: var(--chat-message-border-radius);
154915
155159
  border-style: var(--chat-message-border-style);
@@ -154933,44 +155177,103 @@ function ahe() {
154933
155177
  text-decoration: var(--chat-message-font-text-decoration);
154934
155178
  text-transform: var(--chat-message-font-text-transform);
154935
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;
154936
155181
  border-top-right-radius: 0;
154937
155182
  flex-direction: column;
155183
+ flex: auto;
155184
+ min-width: 0;
155185
+ max-width: 100%;
154938
155186
  display: flex;
154939
155187
  }
154940
155188
 
154941
- :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"] {
154942
155190
  gap: var(--chat-message-gap);
154943
155191
  justify-content: space-between;
154944
155192
  align-items: center;
154945
155193
  display: flex;
154946
155194
  }
154947
155195
 
154948
- :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"] {
154949
155197
  word-break: break-word;
154950
155198
  }
154951
155199
 
154952
- :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"] {
154953
155201
  gap: calc(var(--chat-message-gap) / 2);
154954
155202
  align-items: center;
154955
155203
  display: flex;
154956
155204
  }
154957
155205
 
154958
- :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"] {
154959
155207
  animation: 1.2s ease-out infinite wave;
154960
155208
  }
154961
155209
 
154962
- :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) {
154963
155211
  animation-delay: -1s;
154964
155212
  }
154965
155213
 
154966
- :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) {
154967
155215
  animation-delay: -.8s;
154968
155216
  }
154969
155217
 
154970
- :host [part="reactions"] {
154971
- height: 0;
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;
155221
+ display: flex;
155222
+ position: absolute;
155223
+ inset-block-start: 0;
155224
+ inset-inline-start: calc(100% + var(--chat-message-gap) / 2);
155225
+ }
155226
+
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%;
155241
+ display: flex;
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;
154972
155272
  display: flex;
154973
- position: relative;
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;
154974
155277
  }
154975
155278
 
154976
155279
  :host([reply]) {
@@ -154980,17 +155283,34 @@ function ahe() {
154980
155283
 
154981
155284
  :host([reply]) [part="root"] {
154982
155285
  flex-direction: row;
155286
+ justify-content: flex-start;
154983
155287
  }
154984
155288
 
154985
- :host([reply]) [part="root"] [part="content"] {
155289
+ :host([reply]) [part="root"] [part="message-area"], :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] {
154986
155290
  align-items: flex-start;
154987
155291
  }
154988
155292
 
154989
- :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"] {
154990
155298
  border-top-right-radius: var(--chat-message-border-radius);
154991
155299
  border-top-left-radius: 0;
154992
155300
  }
154993
155301
 
155302
+ :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] {
155303
+ align-items: flex-start;
155304
+ }
155305
+
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;
155308
+ }
155309
+
155310
+ :host([has-footer]) {
155311
+ margin-bottom: calc(var(--chat-message-white-space) / 4);
155312
+ }
155313
+
154994
155314
  @keyframes wave {
154995
155315
  0%, 60%, 100% {
154996
155316
  transform: initial;
@@ -155106,6 +155426,7 @@ i1([
155106
155426
  },
155107
155427
  imports: [
155108
155428
  W,
155429
+ RL,
155109
155430
  x$,
155110
155431
  r1,
155111
155432
  sS
@@ -155226,6 +155547,7 @@ function ohe() {
155226
155547
  padding-bottom: var(--chat-padding-bottom);
155227
155548
  padding-left: var(--chat-padding-left);
155228
155549
  gap: var(--chat-gap);
155550
+ height: 100%;
155229
155551
  overflow: overlay;
155230
155552
  flex-direction: column;
155231
155553
  align-items: stretch;
@@ -155364,6 +155686,7 @@ function she() {
155364
155686
  padding-bottom: var(--chat-padding-bottom);
155365
155687
  padding-left: var(--chat-padding-left);
155366
155688
  gap: var(--chat-gap);
155689
+ height: 100%;
155367
155690
  overflow: overlay;
155368
155691
  flex-direction: column;
155369
155692
  align-items: stretch;
@@ -155511,6 +155834,7 @@ function che() {
155511
155834
  padding-bottom: var(--chat-padding-bottom);
155512
155835
  padding-left: var(--chat-padding-left);
155513
155836
  gap: var(--chat-gap);
155837
+ height: 100%;
155514
155838
  overflow: overlay;
155515
155839
  flex-direction: column;
155516
155840
  align-items: stretch;
@@ -156324,47 +156648,40 @@ d1([
156324
156648
  ]
156325
156649
  }), f1("design:paramtypes", [])], p1);
156326
156650
  //#endregion
156327
- //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/ChatMessageReactionElementTemplate.js
156651
+ //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Emoji/EmojiElementTemplate.js
156328
156652
  function phe(e) {
156329
156653
  return V`
156330
- <mosaik-button .dir="${e.dir}"
156331
- .lang="${e.lang}"
156332
- .disabled="${e.disabled}">
156333
- <mosaik-emoji part="emoji"
156334
- .emoji="${e.emoji}"></mosaik-emoji>
156335
- <mosaik-text part="count"
156336
- ?hidden="${e.count <= 0}">${e.count}</mosaik-text>
156337
- </mosaik-button>
156654
+ <span>${e.transformUnicodeToEmoji(e.unicode)}</span>
156338
156655
  `;
156339
156656
  }
156340
156657
  //#endregion
156341
- //#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
156342
156659
  function mhe() {
156343
156660
  return B`
156344
156661
  :host {
156345
- --chat-message-reaction-font-family: var(--cosmopolitan-font-family);
156346
- --chat-message-reaction-font-letter-spacing: var(--cosmopolitan-typography-caption-letter-spacing);
156347
- --chat-message-reaction-font-line-height: var(--cosmopolitan-typography-caption-line-height);
156348
- --chat-message-reaction-font-size: var(--cosmopolitan-typography-caption-font-size);
156349
- --chat-message-reaction-font-text-decoration: var(--cosmopolitan-typography-caption-text-decoration);
156350
- --chat-message-reaction-font-text-transform: var(--cosmopolitan-typography-caption-text-transform);
156351
- --chat-message-reaction-font-weight: var(--cosmopolitan-typography-caption-font-weight);
156352
- --chat-message-reaction-foreground-color: var(--cosmopolitan-scheme-foreground);
156353
- --chat-message-reaction-gap: calc(var(--cosmopolitan-layout-space) / 2);
156354
- --chat-message-reaction-padding-bottom: calc(var(--cosmopolitan-layout-space) / 2);
156355
- --chat-message-reaction-padding-left: var(--cosmopolitan-layout-space);
156356
- --chat-message-reaction-padding-right: var(--cosmopolitan-layout-space);
156357
- --chat-message-reaction-padding-top: calc(var(--cosmopolitan-layout-space) / 2);
156358
- --chat-message-reaction-shadow: unset unset unset unset unset;
156359
- --chat-message-reaction-shadow-blur: unset;
156360
- --chat-message-reaction-shadow-color: unset;
156361
- --chat-message-reaction-shadow-offset-x: unset;
156362
- --chat-message-reaction-shadow-offset-y: unset;
156363
- --chat-message-reaction-shadow-spread: unset;
156364
- --chat-message-reaction-transition-duration: var(--cosmopolitan-duration-short);
156365
- --chat-message-reaction-transition-mode: ease;
156366
- --chat-message-reaction-transition-property: background-color, color, transform;
156367
- --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;
156368
156685
  }
156369
156686
 
156370
156687
  @media screen and (prefers-reduced-motion: reduce) {
@@ -156394,63 +156711,86 @@ function mhe() {
156394
156711
  }
156395
156712
 
156396
156713
  :host {
156397
- color: var(--chat-message-reaction-foreground-color);
156398
- font-family: var(--chat-message-reaction-font-family);
156399
- font-size: var(--chat-message-reaction-font-size);
156400
- font-weight: var(--chat-message-reaction-font-weight);
156401
- line-height: var(--chat-message-reaction-font-line-height);
156402
- letter-spacing: var(--chat-message-reaction-font-letter-spacing);
156403
- -webkit-text-decoration: var(--chat-message-reaction-font-text-decoration);
156404
- text-decoration: var(--chat-message-reaction-font-text-decoration);
156405
- text-transform: var(--chat-message-reaction-font-text-transform);
156406
- justify-content: center;
156407
- align-items: center;
156408
- gap: var(--chat-message-reaction-gap);
156409
- padding-top: var(--chat-message-reaction-padding-top);
156410
- padding-bottom: var(--chat-message-reaction-padding-bottom);
156411
- padding-left: var(--chat-message-reaction-padding-left);
156412
- padding-right: var(--chat-message-reaction-padding-right);
156413
- transition-duration: var(--chat-message-reaction-transition-duration);
156414
- transition-property: var(--chat-message-reaction-transition-property);
156415
- transition-timing-function: var(--chat-message-reaction-transition-mode);
156416
- transform: var(--chat-message-reaction-translate);
156417
- 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;
156418
156722
  }
156419
156723
 
156420
- :host [part="emoji"], :host [part="count"] {
156421
- flex-shrink: 0;
156724
+ :host([size="tiny"]) {
156725
+ width: 16px;
156726
+ min-width: 16px;
156727
+ height: 16px;
156728
+ font-size: 16px;
156729
+ line-height: 16px;
156730
+ }
156731
+
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;
156422
156762
  }
156423
156763
 
156424
156764
  `;
156425
156765
  }
156426
156766
  //#endregion
156427
- //#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
156428
156768
  function hhe() {
156429
156769
  return B`
156430
156770
  :host {
156431
- --chat-message-reaction-font-family: var(--joy-font-family);
156432
- --chat-message-reaction-font-letter-spacing: var(--joy-typography-caption-letter-spacing);
156433
- --chat-message-reaction-font-line-height: var(--joy-typography-caption-line-height);
156434
- --chat-message-reaction-font-size: var(--joy-typography-caption-font-size);
156435
- --chat-message-reaction-font-text-decoration: var(--joy-typography-caption-text-decoration);
156436
- --chat-message-reaction-font-text-transform: var(--joy-typography-caption-text-transform);
156437
- --chat-message-reaction-font-weight: var(--joy-typography-caption-font-weight);
156438
- --chat-message-reaction-foreground-color: var(--joy-scheme-foreground);
156439
- --chat-message-reaction-gap: calc(var(--joy-layout-space) / 2);
156440
- --chat-message-reaction-padding-bottom: calc(var(--joy-layout-space) / 2);
156441
- --chat-message-reaction-padding-left: var(--joy-layout-space);
156442
- --chat-message-reaction-padding-right: var(--joy-layout-space);
156443
- --chat-message-reaction-padding-top: calc(var(--joy-layout-space) / 2);
156444
- --chat-message-reaction-shadow: unset unset unset unset unset;
156445
- --chat-message-reaction-shadow-blur: unset;
156446
- --chat-message-reaction-shadow-color: unset;
156447
- --chat-message-reaction-shadow-offset-x: unset;
156448
- --chat-message-reaction-shadow-offset-y: unset;
156449
- --chat-message-reaction-shadow-spread: unset;
156450
- --chat-message-reaction-transition-duration: var(--joy-duration-short);
156451
- --chat-message-reaction-transition-mode: ease;
156452
- --chat-message-reaction-transition-property: background-color, color, transform;
156453
- --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;
156454
156794
  }
156455
156795
 
156456
156796
  @media screen and (prefers-reduced-motion: reduce) {
@@ -156480,63 +156820,86 @@ function hhe() {
156480
156820
  }
156481
156821
 
156482
156822
  :host {
156483
- color: var(--chat-message-reaction-foreground-color);
156484
- font-family: var(--chat-message-reaction-font-family);
156485
- font-size: var(--chat-message-reaction-font-size);
156486
- font-weight: var(--chat-message-reaction-font-weight);
156487
- line-height: var(--chat-message-reaction-font-line-height);
156488
- letter-spacing: var(--chat-message-reaction-font-letter-spacing);
156489
- -webkit-text-decoration: var(--chat-message-reaction-font-text-decoration);
156490
- text-decoration: var(--chat-message-reaction-font-text-decoration);
156491
- text-transform: var(--chat-message-reaction-font-text-transform);
156492
- justify-content: center;
156493
- align-items: center;
156494
- gap: var(--chat-message-reaction-gap);
156495
- padding-top: var(--chat-message-reaction-padding-top);
156496
- padding-bottom: var(--chat-message-reaction-padding-bottom);
156497
- padding-left: var(--chat-message-reaction-padding-left);
156498
- padding-right: var(--chat-message-reaction-padding-right);
156499
- transition-duration: var(--chat-message-reaction-transition-duration);
156500
- transition-property: var(--chat-message-reaction-transition-property);
156501
- transition-timing-function: var(--chat-message-reaction-transition-mode);
156502
- transform: var(--chat-message-reaction-translate);
156503
- display: inline-flex;
156504
- }
156505
-
156506
- :host [part="emoji"], :host [part="count"] {
156507
- flex-shrink: 0;
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;
156831
+ }
156832
+
156833
+ :host([size="tiny"]) {
156834
+ width: 16px;
156835
+ min-width: 16px;
156836
+ height: 16px;
156837
+ font-size: 16px;
156838
+ line-height: 16px;
156839
+ }
156840
+
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;
156508
156871
  }
156509
156872
 
156510
156873
  `;
156511
156874
  }
156512
156875
  //#endregion
156513
- //#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
156514
156877
  function ghe() {
156515
156878
  return B`
156516
156879
  :host {
156517
- --chat-message-reaction-font-family: var(--memphis-font-family);
156518
- --chat-message-reaction-font-letter-spacing: var(--memphis-typography-caption-letter-spacing);
156519
- --chat-message-reaction-font-line-height: var(--memphis-typography-caption-line-height);
156520
- --chat-message-reaction-font-size: var(--memphis-typography-caption-font-size);
156521
- --chat-message-reaction-font-text-decoration: var(--memphis-typography-caption-text-decoration);
156522
- --chat-message-reaction-font-text-transform: var(--memphis-typography-caption-text-transform);
156523
- --chat-message-reaction-font-weight: var(--memphis-typography-caption-font-weight);
156524
- --chat-message-reaction-foreground-color: var(--memphis-scheme-foreground);
156525
- --chat-message-reaction-gap: calc(var(--memphis-layout-space) / 2);
156526
- --chat-message-reaction-padding-bottom: calc(var(--memphis-layout-space) / 2);
156527
- --chat-message-reaction-padding-left: var(--memphis-layout-space);
156528
- --chat-message-reaction-padding-right: var(--memphis-layout-space);
156529
- --chat-message-reaction-padding-top: calc(var(--memphis-layout-space) / 2);
156530
- --chat-message-reaction-shadow: unset unset unset unset unset;
156531
- --chat-message-reaction-shadow-blur: unset;
156532
- --chat-message-reaction-shadow-color: unset;
156533
- --chat-message-reaction-shadow-offset-x: unset;
156534
- --chat-message-reaction-shadow-offset-y: unset;
156535
- --chat-message-reaction-shadow-spread: unset;
156536
- --chat-message-reaction-transition-duration: var(--memphis-duration-short);
156537
- --chat-message-reaction-transition-mode: ease;
156538
- --chat-message-reaction-transition-property: background-color, color, transform;
156539
- --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;
156540
156903
  }
156541
156904
 
156542
156905
  @media screen and (prefers-reduced-motion: reduce) {
@@ -156566,37 +156929,60 @@ function ghe() {
156566
156929
  }
156567
156930
 
156568
156931
  :host {
156569
- color: var(--chat-message-reaction-foreground-color);
156570
- font-family: var(--chat-message-reaction-font-family);
156571
- font-size: var(--chat-message-reaction-font-size);
156572
- font-weight: var(--chat-message-reaction-font-weight);
156573
- line-height: var(--chat-message-reaction-font-line-height);
156574
- letter-spacing: var(--chat-message-reaction-font-letter-spacing);
156575
- -webkit-text-decoration: var(--chat-message-reaction-font-text-decoration);
156576
- text-decoration: var(--chat-message-reaction-font-text-decoration);
156577
- text-transform: var(--chat-message-reaction-font-text-transform);
156578
- justify-content: center;
156579
- align-items: center;
156580
- gap: var(--chat-message-reaction-gap);
156581
- padding-top: var(--chat-message-reaction-padding-top);
156582
- padding-bottom: var(--chat-message-reaction-padding-bottom);
156583
- padding-left: var(--chat-message-reaction-padding-left);
156584
- padding-right: var(--chat-message-reaction-padding-right);
156585
- transition-duration: var(--chat-message-reaction-transition-duration);
156586
- transition-property: var(--chat-message-reaction-transition-property);
156587
- transition-timing-function: var(--chat-message-reaction-transition-mode);
156588
- transform: var(--chat-message-reaction-translate);
156589
- 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;
156590
156940
  }
156591
156941
 
156592
- :host [part="emoji"], :host [part="count"] {
156593
- flex-shrink: 0;
156942
+ :host([size="tiny"]) {
156943
+ width: 16px;
156944
+ min-width: 16px;
156945
+ height: 16px;
156946
+ font-size: 16px;
156947
+ line-height: 16px;
156948
+ }
156949
+
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;
156594
156980
  }
156595
156981
 
156596
156982
  `;
156597
156983
  }
156598
156984
  //#endregion
156599
- //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/ChatMessageReactionElement.js
156985
+ //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Emoji/EmojiElement.js
156600
156986
  var m1 = function(e, t, n, r) {
156601
156987
  var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
156602
156988
  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
@@ -156604,262 +156990,120 @@ var m1 = function(e, t, n, r) {
156604
156990
  return i > 3 && a && Object.defineProperty(t, n, a), a;
156605
156991
  }, h1 = function(e, t) {
156606
156992
  if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
156607
- }, g1 = class extends F(R(j)) {
156608
- _emoji;
156609
- _count;
156993
+ }, g1 = class extends F(fS(j)) {
156994
+ _unicode;
156610
156995
  constructor() {
156611
- super(), this._emoji = "", this._count = 1;
156996
+ super(), this._unicode = "";
156612
156997
  }
156613
156998
  static get is() {
156614
- 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"));
156615
157007
  }
156616
157008
  get emoji() {
156617
- return this._emoji;
157009
+ return this.transformUnicodeToEmoji(this._unicode);
156618
157010
  }
156619
157011
  set emoji(e) {
156620
- 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"));
156621
157014
  }
156622
- get count() {
156623
- return this._count;
157015
+ toEmoji() {
157016
+ return this.transformUnicodeToEmoji(this.unicode);
156624
157017
  }
156625
- set count(e) {
156626
- 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("-");
156627
157037
  }
156628
157038
  };
156629
157039
  m1([
156630
157040
  P({ type: String }),
156631
157041
  h1("design:type", String),
156632
157042
  h1("design:paramtypes", [String])
156633
- ], g1.prototype, "emoji", null), m1([
156634
- P({ type: Number }),
156635
- h1("design:type", Number),
156636
- h1("design:paramtypes", [Number])
156637
- ], g1.prototype, "count", null), g1 = m1([H({
156638
- 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",
156639
157049
  template: phe,
156640
157050
  themes: {
156641
157051
  joy: hhe,
156642
157052
  memphis: ghe,
156643
157053
  cosmopolitan: mhe
156644
157054
  },
156645
- host: {
156646
- role: "button",
156647
- slot: "reaction"
156648
- },
156649
- imports: [qS]
157055
+ host: { role: "text" },
157056
+ imports: []
156650
157057
  }), h1("design:paramtypes", [])], g1);
156651
157058
  //#endregion
156652
- //#region ../mosaik-elements-foundation/dist/Controls/Types/DockSide.js
156653
- var _he = {
156654
- Left: "left",
156655
- Right: "right",
156656
- Top: "top",
156657
- Bottom: "bottom"
156658
- }, vhe = function(e, t, n, r) {
156659
- var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
156660
- if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
156661
- 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);
156662
- return i > 3 && a && Object.defineProperty(t, n, a), a;
156663
- }, _1 = function(e, t) {
156664
- if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
156665
- }, v1 = class extends R(j) {
156666
- _isAttached;
156667
- _chatElement;
156668
- _dock;
156669
- constructor() {
156670
- super(), this._isAttached = !1, this._chatElement = void 0, this._dock = "left";
156671
- }
156672
- get dock() {
156673
- return this._dock;
156674
- }
156675
- set dock(e) {
156676
- this._dock !== e && (this._dock = e, this.requestUpdate("dock"));
156677
- }
156678
- get chatElement() {
156679
- return this._chatElement;
156680
- }
156681
- attach(e) {
156682
- this._isAttached || (this._isAttached = !0, this._chatElement = e);
156683
- }
156684
- };
156685
- vhe([
156686
- A({ type: _he }),
156687
- _1("design:type", Object),
156688
- _1("design:paramtypes", [Object])
156689
- ], v1.prototype, "dock", null);
156690
- //#endregion
156691
- //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/Tools/AttachmentChatToolElementTemplate.js
156692
- function yhe(e) {
157059
+ //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/ChatMessageReactionElementTemplate.js
157060
+ function _he(e) {
156693
157061
  return V`
156694
- <mosaik-file-picker .multiple="${!0}"
156695
- .accept="${e.accept}"
156696
- .directory="${e.directory}"
156697
- .disabled="${e.disabled}"
156698
- .dir="${e.dir}"
156699
- @filesPicked="${(t) => {
156700
- e.execute(t.detail.files);
156701
- }}">
156702
- <mosaik-button .dir="${e.dir}"
156703
- .disabled="${e.disabled}"
156704
- .appearance="${"plain"}"
156705
- .icon="${X.add}"></mosaik-button>
156706
- </mosaik-file-picker>
156707
- `;
156708
- }
156709
- //#endregion
156710
- //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/Tools/AttachmentChatToolElement.js
156711
- var y1 = function(e, t, n, r) {
156712
- var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
156713
- if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
156714
- 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);
156715
- return i > 3 && a && Object.defineProperty(t, n, a), a;
156716
- }, b1 = function(e, t) {
156717
- if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
156718
- }, x1 = class extends F(v1) {
156719
- _attachmentRejected;
156720
- _multiple;
156721
- _accept;
156722
- _directory;
156723
- _maxFiles;
156724
- _maxFileSize;
156725
- constructor() {
156726
- super(), this._multiple = !1, this._accept = [], this._directory = !1, this._maxFiles = 10, this._maxFileSize = 10 * 1024 * 1024, this._attachmentRejected = new E(this, "attachmentReject");
156727
- }
156728
- static get is() {
156729
- return "mosaik-attachment-chat-tool";
156730
- }
156731
- get multiple() {
156732
- return this._multiple;
156733
- }
156734
- set multiple(e) {
156735
- this._multiple !== e && (this._multiple = e, this.requestUpdate("multiple"));
156736
- }
156737
- get accept() {
156738
- return this._accept;
156739
- }
156740
- set accept(e) {
156741
- this._accept !== e && (this._accept = e, this.requestUpdate("accept"));
156742
- }
156743
- get directory() {
156744
- return this._directory;
156745
- }
156746
- set directory(e) {
156747
- this._directory !== e && (this._directory = e, this.requestUpdate("directory"));
156748
- }
156749
- get maxFiles() {
156750
- return this._maxFiles;
156751
- }
156752
- set maxFiles(e) {
156753
- this._maxFiles !== e && (this._maxFiles = e, this.requestUpdate("maxFiles"));
156754
- }
156755
- get maxFileSize() {
156756
- return this._maxFileSize;
156757
- }
156758
- set maxFileSize(e) {
156759
- this._maxFileSize !== e && (this._maxFileSize = e, this.requestUpdate("maxFileSize"));
156760
- }
156761
- get attachmentRejected() {
156762
- return this._attachmentRejected;
156763
- }
156764
- execute(e) {
156765
- 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);
156766
- }
156767
- onAttachmentRejected(e) {
156768
- this._attachmentRejected.emit(e);
156769
- }
156770
- validate(e) {
156771
- return this.accept.length > 0 && !this.accept.includes(e.type) ? (this.onAttachmentRejected({
156772
- file: e,
156773
- reason: "type",
156774
- cancel: !0
156775
- }), !1) : e.size > this.maxFileSize ? (this.onAttachmentRejected({
156776
- file: e,
156777
- reason: "size",
156778
- cancel: !0
156779
- }), !1) : this.chatElement?.inputElement && this.chatElement.inputElement.value.files.length >= this.maxFiles ? (this.onAttachmentRejected({
156780
- file: e,
156781
- reason: "count",
156782
- cancel: !0
156783
- }), !1) : !0;
156784
- }
156785
- };
156786
- y1([k({ eventName: "attachmentReject" }), b1("design:type", Object)], x1.prototype, "_attachmentRejected", void 0), y1([
156787
- A({
156788
- type: Boolean,
156789
- useDefault: !0
156790
- }),
156791
- b1("design:type", Boolean),
156792
- b1("design:paramtypes", [Boolean])
156793
- ], x1.prototype, "multiple", null), y1([
156794
- P({ type: Array }),
156795
- b1("design:type", Array),
156796
- b1("design:paramtypes", [Array])
156797
- ], x1.prototype, "accept", null), y1([
156798
- A({
156799
- type: Boolean,
156800
- useDefault: !0
156801
- }),
156802
- b1("design:type", Boolean),
156803
- b1("design:paramtypes", [Boolean])
156804
- ], x1.prototype, "directory", null), y1([
156805
- A({
156806
- type: Number,
156807
- useDefault: !0
156808
- }),
156809
- b1("design:type", Number),
156810
- b1("design:paramtypes", [Number])
156811
- ], x1.prototype, "maxFiles", null), y1([
156812
- A({
156813
- type: Number,
156814
- useDefault: !0
156815
- }),
156816
- b1("design:type", Number),
156817
- b1("design:paramtypes", [Number])
156818
- ], x1.prototype, "maxFileSize", null), x1 = y1([H({
156819
- selector: "mosaik-attachment-chat-tool",
156820
- template: yhe,
156821
- host: { slot: "tools" },
156822
- options: {
156823
- mode: "open",
156824
- delegatesFocus: !0
156825
- },
156826
- imports: [YH, qS]
156827
- }), b1("design:paramtypes", [])], x1);
156828
- //#endregion
156829
- //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Emoji/EmojiElementTemplate.js
156830
- function bhe(e) {
156831
- return V`
156832
- <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>
156833
157077
  `;
156834
157078
  }
156835
157079
  //#endregion
156836
- //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Emoji/Themes/EmojiElement.Cosmopolitan.js
156837
- function xhe() {
157080
+ //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Cosmopolitan.js
157081
+ function vhe() {
156838
157082
  return B`
156839
157083
  :host {
156840
- --emoji-background-color: unset;
156841
- --emoji-font-family: unset;
156842
- --emoji-font-letter-spacing: unset;
156843
- --emoji-font-line-height: unset;
156844
- --emoji-font-size: unset;
156845
- --emoji-font-text-decoration: unset;
156846
- --emoji-font-text-transform: unset;
156847
- --emoji-font-weight: unset;
156848
- --emoji-gap: unset;
156849
- --emoji-padding-bottom: unset;
156850
- --emoji-padding-left: unset;
156851
- --emoji-padding-right: unset;
156852
- --emoji-padding-top: unset;
156853
- --emoji-shadow: unset unset unset unset unset;
156854
- --emoji-shadow-blur: unset;
156855
- --emoji-shadow-color: unset;
156856
- --emoji-shadow-offset-x: unset;
156857
- --emoji-shadow-offset-y: unset;
156858
- --emoji-shadow-spread: unset;
156859
- --emoji-transition-duration: unset;
156860
- --emoji-transition-mode: unset;
156861
- --emoji-transition-property: unset;
156862
- --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;
156863
157107
  }
156864
157108
 
156865
157109
  @media screen and (prefers-reduced-motion: reduce) {
@@ -156889,86 +157133,71 @@ function xhe() {
156889
157133
  }
156890
157134
 
156891
157135
  :host {
156892
- background: var(--emoji-background-color);
156893
- border-radius: 50%;
156894
- width: 32px;
156895
- min-width: 32px;
156896
- height: 32px;
156897
- font-size: 32px;
156898
- line-height: 32px;
156899
- display: inline;
156900
- }
156901
-
156902
- :host([size="tiny"]) {
156903
- width: 16px;
156904
- min-width: 16px;
156905
- height: 16px;
156906
- font-size: 16px;
156907
- line-height: 16px;
156908
- }
156909
-
156910
- :host([size="small"]) {
156911
- width: 24px;
156912
- min-width: 24px;
156913
- height: 24px;
156914
- font-size: 24px;
156915
- line-height: 24px;
156916
- }
156917
-
156918
- :host([size="medium"]) {
156919
- width: 32px;
156920
- min-width: 32px;
156921
- height: 32px;
156922
- font-size: 32px;
156923
- line-height: 32px;
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;
156924
157157
  }
156925
157158
 
156926
- :host([size="large"]) {
156927
- width: 48px;
156928
- min-width: 48px;
156929
- height: 48px;
156930
- font-size: 48px;
156931
- line-height: 48px;
157159
+ :host [part="button"] {
157160
+ --button-min-width: auto;
156932
157161
  }
156933
157162
 
156934
- :host([size="giant"]) {
156935
- width: 56px;
156936
- min-width: 56px;
156937
- height: 56px;
156938
- font-size: 56px;
156939
- line-height: 56px;
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;
156940
157169
  }
156941
157170
 
156942
157171
  `;
156943
157172
  }
156944
157173
  //#endregion
156945
- //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Emoji/Themes/EmojiElement.Joy.js
156946
- function She() {
157174
+ //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Joy.js
157175
+ function yhe() {
156947
157176
  return B`
156948
157177
  :host {
156949
- --emoji-background-color: var(--joy-scheme-highlight);
156950
- --emoji-font-family: unset;
156951
- --emoji-font-letter-spacing: unset;
156952
- --emoji-font-line-height: unset;
156953
- --emoji-font-size: unset;
156954
- --emoji-font-text-decoration: unset;
156955
- --emoji-font-text-transform: unset;
156956
- --emoji-font-weight: unset;
156957
- --emoji-gap: unset;
156958
- --emoji-padding-bottom: unset;
156959
- --emoji-padding-left: unset;
156960
- --emoji-padding-right: unset;
156961
- --emoji-padding-top: unset;
156962
- --emoji-shadow: unset unset unset unset unset;
156963
- --emoji-shadow-blur: unset;
156964
- --emoji-shadow-color: unset;
156965
- --emoji-shadow-offset-x: unset;
156966
- --emoji-shadow-offset-y: unset;
156967
- --emoji-shadow-spread: unset;
156968
- --emoji-transition-duration: unset;
156969
- --emoji-transition-mode: unset;
156970
- --emoji-transition-property: unset;
156971
- --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;
156972
157201
  }
156973
157202
 
156974
157203
  @media screen and (prefers-reduced-motion: reduce) {
@@ -156998,86 +157227,71 @@ function She() {
156998
157227
  }
156999
157228
 
157000
157229
  :host {
157001
- background: var(--emoji-background-color);
157002
- border-radius: 50%;
157003
- width: 32px;
157004
- min-width: 32px;
157005
- height: 32px;
157006
- font-size: 32px;
157007
- line-height: 32px;
157008
- display: inline;
157009
- }
157010
-
157011
- :host([size="tiny"]) {
157012
- width: 16px;
157013
- min-width: 16px;
157014
- height: 16px;
157015
- font-size: 16px;
157016
- line-height: 16px;
157017
- }
157018
-
157019
- :host([size="small"]) {
157020
- width: 24px;
157021
- min-width: 24px;
157022
- height: 24px;
157023
- font-size: 24px;
157024
- line-height: 24px;
157025
- }
157026
-
157027
- :host([size="medium"]) {
157028
- width: 32px;
157029
- min-width: 32px;
157030
- height: 32px;
157031
- font-size: 32px;
157032
- 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;
157033
157251
  }
157034
157252
 
157035
- :host([size="large"]) {
157036
- width: 48px;
157037
- min-width: 48px;
157038
- height: 48px;
157039
- font-size: 48px;
157040
- line-height: 48px;
157253
+ :host [part="button"] {
157254
+ --button-min-width: auto;
157041
157255
  }
157042
157256
 
157043
- :host([size="giant"]) {
157044
- width: 56px;
157045
- min-width: 56px;
157046
- height: 56px;
157047
- font-size: 56px;
157048
- 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;
157049
157263
  }
157050
157264
 
157051
157265
  `;
157052
157266
  }
157053
157267
  //#endregion
157054
- //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Emoji/Themes/EmojiElement.Memphis.js
157055
- function Che() {
157268
+ //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Memphis.js
157269
+ function bhe() {
157056
157270
  return B`
157057
157271
  :host {
157058
- --emoji-background-color: unset;
157059
- --emoji-font-family: unset;
157060
- --emoji-font-letter-spacing: unset;
157061
- --emoji-font-line-height: unset;
157062
- --emoji-font-size: unset;
157063
- --emoji-font-text-decoration: unset;
157064
- --emoji-font-text-transform: unset;
157065
- --emoji-font-weight: unset;
157066
- --emoji-gap: unset;
157067
- --emoji-padding-bottom: unset;
157068
- --emoji-padding-left: unset;
157069
- --emoji-padding-right: unset;
157070
- --emoji-padding-top: unset;
157071
- --emoji-shadow: unset unset unset unset unset;
157072
- --emoji-shadow-blur: unset;
157073
- --emoji-shadow-color: unset;
157074
- --emoji-shadow-offset-x: unset;
157075
- --emoji-shadow-offset-y: unset;
157076
- --emoji-shadow-spread: unset;
157077
- --emoji-transition-duration: unset;
157078
- --emoji-transition-mode: unset;
157079
- --emoji-transition-property: unset;
157080
- --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;
157081
157295
  }
157082
157296
 
157083
157297
  @media screen and (prefers-reduced-motion: reduce) {
@@ -157107,60 +157321,160 @@ function Che() {
157107
157321
  }
157108
157322
 
157109
157323
  :host {
157110
- background: var(--emoji-background-color);
157111
- border-radius: 50%;
157112
- width: 32px;
157113
- min-width: 32px;
157114
- height: 32px;
157115
- font-size: 32px;
157116
- line-height: 32px;
157117
- display: inline;
157118
- }
157119
-
157120
- :host([size="tiny"]) {
157121
- width: 16px;
157122
- min-width: 16px;
157123
- height: 16px;
157124
- font-size: 16px;
157125
- line-height: 16px;
157126
- }
157127
-
157128
- :host([size="small"]) {
157129
- width: 24px;
157130
- min-width: 24px;
157131
- height: 24px;
157132
- font-size: 24px;
157133
- 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;
157134
157345
  }
157135
157346
 
157136
- :host([size="medium"]) {
157137
- width: 32px;
157138
- min-width: 32px;
157139
- height: 32px;
157140
- font-size: 32px;
157141
- line-height: 32px;
157347
+ :host [part="button"] {
157348
+ --button-min-width: auto;
157142
157349
  }
157143
157350
 
157144
- :host([size="large"]) {
157145
- width: 48px;
157146
- min-width: 48px;
157147
- height: 48px;
157148
- font-size: 48px;
157149
- 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;
157150
157357
  }
157151
157358
 
157152
- :host([size="giant"]) {
157153
- width: 56px;
157154
- min-width: 56px;
157155
- height: 56px;
157156
- font-size: 56px;
157157
- line-height: 56px;
157359
+ `;
157158
157360
  }
157159
-
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>
157160
157474
  `;
157161
157475
  }
157162
157476
  //#endregion
157163
- //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Emoji/EmojiElement.js
157477
+ //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/Tools/AttachmentChatToolElement.js
157164
157478
  var S1 = function(e, t, n, r) {
157165
157479
  var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
157166
157480
  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
@@ -157168,70 +157482,115 @@ var S1 = function(e, t, n, r) {
157168
157482
  return i > 3 && a && Object.defineProperty(t, n, a), a;
157169
157483
  }, C1 = function(e, t) {
157170
157484
  if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
157171
- }, w1 = class extends F(fS(j)) {
157172
- _unicode;
157485
+ }, w1 = class extends F(x1) {
157486
+ _attachmentRejected;
157487
+ _multiple;
157488
+ _accept;
157489
+ _directory;
157490
+ _maxFiles;
157491
+ _maxFileSize;
157173
157492
  constructor() {
157174
- 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");
157175
157494
  }
157176
157495
  static get is() {
157177
- return "mosaik-emoji";
157496
+ return "mosaik-attachment-chat-tool";
157178
157497
  }
157179
- get unicode() {
157180
- return this._unicode;
157498
+ get multiple() {
157499
+ return this._multiple;
157181
157500
  }
157182
- set unicode(e) {
157183
- let t = this.normalizeUnicodeInput(e);
157184
- 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"));
157185
157503
  }
157186
- get emoji() {
157187
- return this.transformUnicodeToEmoji(this._unicode);
157504
+ get accept() {
157505
+ return this._accept;
157188
157506
  }
157189
- set emoji(e) {
157190
- let t = this.transformEmojiToUnicode(e);
157191
- 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"));
157192
157509
  }
157193
- toEmoji() {
157194
- return this.transformUnicodeToEmoji(this.unicode);
157510
+ get directory() {
157511
+ return this._directory;
157195
157512
  }
157196
- toUnicode() {
157197
- return this.transformEmojiToUnicode(this.emoji);
157513
+ set directory(e) {
157514
+ this._directory !== e && (this._directory = e, this.requestUpdate("directory"));
157198
157515
  }
157199
- transformUnicodeToEmoji(e) {
157200
- if (e == null) return "";
157201
- let t = e.replace(/(U\+|0x)/gi, " ").match(/[0-9a-fA-F]{1,8}/g) ?? [];
157202
- 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;
157203
157518
  }
157204
- transformEmojiToUnicode(e) {
157205
- if (e == null || e === "") return "";
157206
- let t = [];
157207
- for (let n of e) {
157208
- let e = n.codePointAt(0) ?? void 0;
157209
- e !== void 0 && t.push(e.toString(16).toUpperCase());
157210
- }
157211
- return t.join("-");
157519
+ set maxFiles(e) {
157520
+ this._maxFiles !== e && (this._maxFiles = e, this.requestUpdate("maxFiles"));
157212
157521
  }
157213
- normalizeUnicodeInput(e) {
157214
- 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;
157215
157551
  }
157216
157552
  };
157217
- S1([
157218
- P({ type: String }),
157219
- C1("design:type", String),
157220
- C1("design:paramtypes", [String])
157221
- ], w1.prototype, "unicode", null), S1([
157222
- P({ type: String }),
157223
- C1("design:type", String),
157224
- C1("design:paramtypes", [String])
157225
- ], w1.prototype, "emoji", null), w1 = S1([H({
157226
- selector: "mosaik-emoji",
157227
- template: bhe,
157228
- themes: {
157229
- joy: She,
157230
- memphis: Che,
157231
- 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
157232
157592
  },
157233
- host: { role: "text" },
157234
- imports: []
157593
+ imports: [YH, qS]
157235
157594
  }), C1("design:paramtypes", [])], w1);
157236
157595
  //#endregion
157237
157596
  //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/Models/IChatReaction.js
@@ -157297,7 +157656,7 @@ var T1 = function(e, t, n, r) {
157297
157656
  return i > 3 && a && Object.defineProperty(t, n, a), a;
157298
157657
  }, E1 = function(e, t) {
157299
157658
  if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
157300
- }, D1 = class extends F(v1) {
157659
+ }, D1 = class extends F(x1) {
157301
157660
  _reactions;
157302
157661
  constructor() {
157303
157662
  super(), this._reactions = whe.default;
@@ -157331,7 +157690,7 @@ T1([
157331
157690
  hT,
157332
157691
  dT,
157333
157692
  SJ,
157334
- w1
157693
+ g1
157335
157694
  ]
157336
157695
  }), E1("design:paramtypes", [])], D1);
157337
157696
  //#endregion
@@ -157481,7 +157840,7 @@ var A1 = function(e, t, n, r) {
157481
157840
  return i > 3 && a && Object.defineProperty(t, n, a), a;
157482
157841
  }, j1 = function(e, t) {
157483
157842
  if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
157484
- }, M1 = class extends F(v1) {
157843
+ }, M1 = class extends F(x1) {
157485
157844
  _recCancel;
157486
157845
  _recStart;
157487
157846
  _recPause;