@dialpad/dialtone-vue 3.73.0 → 3.73.1

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.
@@ -0,0 +1,933 @@
1
+ import { _ as l, Q as R, P as A } from "./index-6b22d90d.js";
2
+ import { openBlock as s, createElementBlock as E, normalizeClass as o, normalizeStyle as p, createCommentVNode as q, resolveComponent as C, Fragment as H, renderList as U, createBlock as d, createVNode as g, createElementVNode as b, mergeProps as m, withDirectives as _, vShow as S, h as f } from "vue";
3
+ const K = 3e6, y = {
4
+ circle: "d-bar-circle",
5
+ square: "d-bar2"
6
+ }, M = [
7
+ "body",
8
+ "heading"
9
+ ], J = {
10
+ sm: "24px",
11
+ md: "32px",
12
+ lg: "48px"
13
+ }, j = {
14
+ sm: "d-h16",
15
+ md: "d-h24",
16
+ lg: "d-h32"
17
+ }, O = {
18
+ computed: {
19
+ skeletonOffset() {
20
+ const D = this.$refs.skeleton;
21
+ if (!D)
22
+ return this.offset;
23
+ const { top: t, height: u } = D.getBoundingClientRect();
24
+ return t + u / 2;
25
+ },
26
+ skeletonStyle() {
27
+ const D = {};
28
+ if (this.skeletonOffset === -1 || !this.animate && this.animationDuration === -1)
29
+ return D;
30
+ const t = this.skeletonOffset * K / 1e3, u = this.animationDuration === -1 ? 1e3 : this.animationDuration;
31
+ return D.animationDelay = `${t}ms`, D.animationDuration = `${u}ms`, D;
32
+ }
33
+ }
34
+ }, V = {
35
+ name: "DtSkeletonShape",
36
+ mixins: [O],
37
+ props: {
38
+ /**
39
+ * Defines the shape of the skeleton, accepts circle or square.
40
+ * @values circle, square
41
+ */
42
+ shape: {
43
+ type: String,
44
+ default: "circle",
45
+ validator: (D) => Object.keys(y).includes(D)
46
+ },
47
+ /**
48
+ * Size of the shape
49
+ * @values xs, sm, md, lg, xl
50
+ */
51
+ size: {
52
+ type: String,
53
+ default: "md"
54
+ },
55
+ /**
56
+ * Duration time of the animation (ms), set -1 for an infinite animation.
57
+ */
58
+ animationDuration: {
59
+ type: Number,
60
+ default: -1
61
+ },
62
+ /**
63
+ * This property has higher priority than "option.animate"
64
+ * @values true, false
65
+ */
66
+ animate: {
67
+ type: Boolean,
68
+ default: !0
69
+ },
70
+ /**
71
+ * RippleDuration controls how long the delay is for the animation of a
72
+ * placeholder 1000 pixels from the top of the page. Each placeholder
73
+ * from the top down will have a delay duration from 0 to this offset.
74
+ * The delay of each placeholder animation is based on how far down the page
75
+ * the placeholder is rendered. This is a linear relationship. The unit
76
+ * is milliseconds.
77
+ */
78
+ offset: {
79
+ type: Number,
80
+ default: 1
81
+ },
82
+ /**
83
+ * Additional class name for the content.
84
+ */
85
+ contentClass: {
86
+ type: [String, Object, Array],
87
+ default: ""
88
+ }
89
+ },
90
+ data() {
91
+ return {
92
+ SKELETON_SHAPES: y
93
+ };
94
+ },
95
+ computed: {
96
+ shapeStyles() {
97
+ const D = J[this.size] || this.size;
98
+ return {
99
+ ...this.skeletonStyle,
100
+ "min-width": D,
101
+ "max-width": D,
102
+ "min-height": D,
103
+ "max-height": D
104
+ };
105
+ }
106
+ }
107
+ };
108
+ function G(D, t, u, F, n, e) {
109
+ return s(), E("div", {
110
+ ref: "skeleton",
111
+ "data-qa": "skeleton-shape",
112
+ class: o([
113
+ "skeleton-placeholder",
114
+ n.SKELETON_SHAPES[u.shape],
115
+ {
116
+ "skeleton-placeholder--animate": u.animate
117
+ },
118
+ u.contentClass
119
+ ]),
120
+ style: p(e.shapeStyles)
121
+ }, null, 6);
122
+ }
123
+ const x = /* @__PURE__ */ l(V, [["render", G]]), Z = {
124
+ name: "DtSkeletonText",
125
+ mixins: [O],
126
+ props: {
127
+ /**
128
+ * Skeleton type
129
+ * @values body, heading
130
+ */
131
+ type: {
132
+ type: String,
133
+ default: "body",
134
+ validator: (D) => M.includes(D)
135
+ },
136
+ /**
137
+ * Heading height
138
+ * @values sm, md, lg
139
+ */
140
+ headingHeight: {
141
+ type: String,
142
+ default: "md",
143
+ validator: (D) => Object.keys(j).includes(D)
144
+ },
145
+ /**
146
+ * Width of the skeleton
147
+ */
148
+ width: {
149
+ type: String,
150
+ default: "100%"
151
+ },
152
+ /**
153
+ * Duration time of the animation (ms), set -1 for an infinite animation.
154
+ */
155
+ animationDuration: {
156
+ type: Number,
157
+ default: -1
158
+ },
159
+ /**
160
+ * This property has higher priority than "option.animate"
161
+ * @values true, false
162
+ */
163
+ animate: {
164
+ type: Boolean,
165
+ default: !1
166
+ },
167
+ /**
168
+ * RippleDuration controls how long the delay is for the animation of a
169
+ * placeholder 1000 pixels from the top of the page. Each placeholder
170
+ * from the top down will have a delay duration from 0 to this offset.
171
+ * The delay of each placeholder animation is based on how far down the page
172
+ * the placeholder is rendered. This is a linear relationship. The unit
173
+ * is milliseconds.
174
+ */
175
+ offset: {
176
+ type: Number,
177
+ default: 1
178
+ },
179
+ /**
180
+ * Additional class name for the content.
181
+ */
182
+ contentClass: {
183
+ type: String,
184
+ default: ""
185
+ }
186
+ },
187
+ data() {
188
+ return {
189
+ SKELETON_HEADING_HEIGHTS: j
190
+ };
191
+ }
192
+ };
193
+ function Q(D, t, u, F, n, e) {
194
+ return u.type === "body" ? (s(), E("div", {
195
+ key: 0,
196
+ ref: "skeleton",
197
+ "data-qa": "skeleton-text-body",
198
+ class: o([
199
+ "d-h8",
200
+ "d-bar2",
201
+ "skeleton-placeholder",
202
+ {
203
+ "skeleton-placeholder--animate": u.animate
204
+ },
205
+ u.contentClass
206
+ ]),
207
+ style: p({
208
+ width: u.width,
209
+ ...D.skeletonStyle
210
+ })
211
+ }, null, 6)) : u.type === "heading" ? (s(), E("div", {
212
+ key: 1,
213
+ ref: "skeleton",
214
+ "data-qa": "skeleton-text-heading",
215
+ class: o([
216
+ n.SKELETON_HEADING_HEIGHTS[u.headingHeight],
217
+ "d-bar2",
218
+ "skeleton-placeholder",
219
+ {
220
+ "skeleton-placeholder--animate": u.animate
221
+ },
222
+ u.contentClass
223
+ ]),
224
+ style: p({
225
+ width: u.width,
226
+ ...D.skeletonStyle
227
+ })
228
+ }, null, 6)) : q("", !0);
229
+ }
230
+ const w = /* @__PURE__ */ l(Z, [["render", Q]]), h = (D) => D !== "" && !Number.isNaN(Number(D)), X = {
231
+ name: "DtSkeletonParagraph",
232
+ components: {
233
+ DtSkeletonText: w
234
+ },
235
+ props: {
236
+ /**
237
+ * Quantity of rows to display
238
+ */
239
+ rows: {
240
+ type: [Number, String],
241
+ default: 3,
242
+ validator: h
243
+ },
244
+ /**
245
+ * This property has higher priority than "option.animate"
246
+ * @values true, false
247
+ */
248
+ animate: {
249
+ type: Boolean,
250
+ default: !0
251
+ },
252
+ /**
253
+ * Controls the min width of paragraphs
254
+ */
255
+ minWidth: {
256
+ type: [Number, String],
257
+ default: 30,
258
+ validator: h
259
+ },
260
+ /**
261
+ * Controls the max width of paragraphs
262
+ */
263
+ maxWidth: {
264
+ type: [Number, String],
265
+ default: 100,
266
+ validator: h
267
+ },
268
+ /**
269
+ * Controls the width of paragraphs
270
+ */
271
+ width: {
272
+ type: [String, Array],
273
+ default: null
274
+ },
275
+ /**
276
+ * If true, row widths will be random
277
+ * @values true, false
278
+ */
279
+ randomWidth: {
280
+ type: Boolean,
281
+ default: !1
282
+ },
283
+ /**
284
+ * RippleDuration controls how long the delay is for the animation of a
285
+ * placeholder 1000 pixels from the top of the page. Each placeholder
286
+ * from the top down will have a delay duration from 0 to this offset.
287
+ * The delay of each placeholder animation is based on how far down the page
288
+ * the placeholder is rendered. This is a linear relationship. The unit
289
+ * is milliseconds.
290
+ */
291
+ offset: {
292
+ type: Number,
293
+ default: 1
294
+ },
295
+ /**
296
+ * Duration time of the animation (ms), set -1 for an infinite animation.
297
+ */
298
+ animationDuration: {
299
+ type: Number,
300
+ default: -1
301
+ },
302
+ /**
303
+ * Additional class name for the content.
304
+ */
305
+ contentClass: {
306
+ type: String,
307
+ default: ""
308
+ },
309
+ /**
310
+ * Additional class name for the row.
311
+ */
312
+ rowClass: {
313
+ type: String,
314
+ default: ""
315
+ }
316
+ },
317
+ computed: {
318
+ integerRows() {
319
+ return Number(this.rows);
320
+ }
321
+ },
322
+ methods: {
323
+ randomWidthPercentage() {
324
+ const D = Math.min(this.minWidth, this.maxWidth), t = Math.max(this.minWidth, this.maxWidth);
325
+ return `${Math.round(Math.random() * (t - D)) + D}%`;
326
+ },
327
+ getSizeParagraphRow(D) {
328
+ const t = this.width, u = Array.isArray(t), F = t == null ? void 0 : t[D - 1], n = D === this.rows;
329
+ return this.randomWidth ? this.randomWidthPercentage() : t && !u ? t : t && u && F ? F : n ? "38%" : "100%";
330
+ }
331
+ }
332
+ };
333
+ function Y(D, t, u, F, n, e) {
334
+ const a = C("dt-skeleton-text");
335
+ return s(), E("div", {
336
+ class: o([
337
+ "d-w100p",
338
+ u.contentClass
339
+ ]),
340
+ contentClass: "",
341
+ "data-qa": "skeleton-paragraph"
342
+ }, [
343
+ (s(!0), E(H, null, U(e.integerRows, (i) => (s(), d(a, {
344
+ key: i,
345
+ "data-qa": "skeleton-paragraph-row",
346
+ class: o([
347
+ {
348
+ "d-mb12": i !== e.integerRows
349
+ }
350
+ ]),
351
+ "content-class": u.rowClass,
352
+ animate: u.animate,
353
+ offset: u.offset,
354
+ "animation-duration": u.animationDuration,
355
+ width: e.getSizeParagraphRow(i)
356
+ }, null, 8, ["class", "content-class", "animate", "offset", "animation-duration", "width"]))), 128))
357
+ ], 2);
358
+ }
359
+ const L = /* @__PURE__ */ l(X, [["render", Y]]), $ = {
360
+ name: "DtSkeletonListItem",
361
+ components: {
362
+ DtSkeletonShape: x,
363
+ DtSkeletonParagraph: L
364
+ },
365
+ props: {
366
+ /**
367
+ * Defines the shape of the skeleton, accepts circle or square.
368
+ * @values circle, square
369
+ */
370
+ shape: {
371
+ type: String,
372
+ default: "circle",
373
+ validator: (D) => Object.keys(y).includes(D)
374
+ },
375
+ /**
376
+ * Size of the shape
377
+ * @values xs, sm, md, lg, xl
378
+ */
379
+ shapeSize: {
380
+ type: String,
381
+ default: "md"
382
+ },
383
+ /**
384
+ * Object containing quantity of paragraphs to display
385
+ * and a randomWidth boolean.
386
+ */
387
+ paragraphs: {
388
+ type: Object,
389
+ default: () => ({ rows: 3, randomWidth: !0 })
390
+ },
391
+ /**
392
+ * Duration time of the animation (ms), set -1 for an infinite animation.
393
+ */
394
+ animationDuration: {
395
+ type: Number,
396
+ default: -1
397
+ },
398
+ /**
399
+ * This property has higher priority than "option.animate"
400
+ * @values true, false
401
+ */
402
+ animate: {
403
+ type: Boolean,
404
+ default: !0
405
+ },
406
+ /**
407
+ * RippleDuration controls how long the delay is for the animation of a
408
+ * placeholder 1000 pixels from the top of the page. Each placeholder
409
+ * from the top down will have a delay duration from 0 to this offset.
410
+ * The delay of each placeholder animation is based on how far down the page
411
+ * the placeholder is rendered. This is a linear relationship. The unit
412
+ * is milliseconds.
413
+ */
414
+ offset: {
415
+ type: Number,
416
+ default: 1
417
+ },
418
+ /**
419
+ * Additional class name for the shape.
420
+ */
421
+ shapeClass: {
422
+ type: String,
423
+ default: ""
424
+ },
425
+ /**
426
+ * Additional class name for the content.
427
+ */
428
+ contentClass: {
429
+ type: String,
430
+ default: ""
431
+ }
432
+ }
433
+ }, DD = { class: "d-d-flex d-fd-column d-w100p" };
434
+ function uD(D, t, u, F, n, e) {
435
+ const a = C("dt-skeleton-shape"), i = C("dt-skeleton-paragraph");
436
+ return s(), E("div", {
437
+ "data-qa": "skeleton-list-item",
438
+ class: o([
439
+ "d-d-flex",
440
+ {
441
+ "d-ai-center": u.paragraphs.rows === 1
442
+ },
443
+ u.contentClass
444
+ ])
445
+ }, [
446
+ g(a, {
447
+ class: "d-mr8",
448
+ size: u.shapeSize,
449
+ shape: u.shape,
450
+ "animation-duration": u.animationDuration,
451
+ animate: u.animate,
452
+ offset: u.offset,
453
+ "content-class": u.shapeClass
454
+ }, null, 8, ["size", "shape", "animation-duration", "animate", "offset", "content-class"]),
455
+ b("div", DD, [
456
+ g(i, m(u.paragraphs, {
457
+ "animation-duration": u.animationDuration,
458
+ animate: u.animate,
459
+ offset: u.offset
460
+ }), null, 16, ["animation-duration", "animate", "offset"])
461
+ ])
462
+ ], 2);
463
+ }
464
+ const tD = /* @__PURE__ */ l($, [["render", uD]]);
465
+ const eD = {
466
+ name: "DtSkeleton",
467
+ components: {
468
+ DtSkeletonText: w,
469
+ DtSkeletonShape: x,
470
+ DtSkeletonListItem: tD,
471
+ DtSkeletonParagraph: L
472
+ },
473
+ props: {
474
+ /**
475
+ * Set this prop to have the skeleton render as multiple lines of text.
476
+ * Set only one option prop at a time.
477
+ */
478
+ paragraphOption: {
479
+ type: [Object, Boolean],
480
+ default: null
481
+ },
482
+ /**
483
+ * Set this prop to have the skeleton render as a list item with an avatar and wrapping text.
484
+ * Set only one option prop at a time.
485
+ */
486
+ listItemOption: {
487
+ type: [Object, Boolean],
488
+ default: null
489
+ },
490
+ /**
491
+ * Set this prop to have the skeleton render as a single line of text.
492
+ * Set only one option prop at a time.
493
+ */
494
+ textOption: {
495
+ type: Object,
496
+ default: null
497
+ },
498
+ /**
499
+ * Set this prop to have the skeleton render as a specific shape.
500
+ * Set only one option prop at a time.
501
+ */
502
+ shapeOption: {
503
+ type: [Object, Boolean],
504
+ default: null
505
+ },
506
+ /**
507
+ * Duration time of the animation (ms), set -1 for an infinite animation.
508
+ */
509
+ animationDuration: {
510
+ type: Number,
511
+ default: -1
512
+ },
513
+ /**
514
+ * Descriptive label for the content.
515
+ */
516
+ ariaLabel: {
517
+ type: String,
518
+ default: ""
519
+ },
520
+ /**
521
+ * This property has higher priority than "option.animate"
522
+ * @values true, false
523
+ */
524
+ animate: {
525
+ type: Boolean,
526
+ default: !0
527
+ },
528
+ /**
529
+ * RippleDuration controls how long the delay is for the animation of a
530
+ * placeholder 1000 pixels from the top of the page. Each placeholder
531
+ * from the top down will have a delay duration from 0 to this offset.
532
+ * The delay of each placeholder animation is based on how far down the page
533
+ * the placeholder is rendered. This is a linear relationship. The unit
534
+ * is milliseconds.
535
+ */
536
+ offset: {
537
+ type: Number,
538
+ default: 1
539
+ }
540
+ },
541
+ computed: {
542
+ validationOptions() {
543
+ return {
544
+ paragraphOption: this.paragraphOption,
545
+ listItemOption: this.listItemOption,
546
+ textOption: this.textOption,
547
+ shapeOption: this.shapeOption
548
+ };
549
+ }
550
+ },
551
+ watch: {
552
+ $props: {
553
+ immediate: !0,
554
+ handler: "validator"
555
+ }
556
+ },
557
+ methods: {
558
+ validator() {
559
+ const D = Object.entries(this.validationOptions).filter(([t, u]) => u);
560
+ if (D.length >= 2) {
561
+ const t = `Use only one of ${D.map(([u]) => u).join(" | ")} options at the same time`;
562
+ console.error(t);
563
+ }
564
+ }
565
+ }
566
+ }, FD = ["aria-label"];
567
+ function nD(D, t, u, F, n, e) {
568
+ const a = C("dt-skeleton-list-item"), i = C("dt-skeleton-shape"), r = C("dt-skeleton-paragraph"), B = C("dt-skeleton-text");
569
+ return s(), E("div", {
570
+ "aria-busy": "true",
571
+ role: "status",
572
+ "aria-label": u.ariaLabel
573
+ }, [
574
+ u.listItemOption ? (s(), d(a, m({ key: 0 }, u.listItemOption === !0 ? {} : u.listItemOption, {
575
+ "animation-duration": u.animationDuration,
576
+ animate: u.animate,
577
+ offset: u.offset
578
+ }), null, 16, ["animation-duration", "animate", "offset"])) : u.shapeOption ? (s(), d(i, m({ key: 1 }, u.shapeOption === !0 ? {} : u.shapeOption, {
579
+ "animation-duration": u.animationDuration,
580
+ animate: u.animate,
581
+ offset: u.offset
582
+ }), null, 16, ["animation-duration", "animate", "offset"])) : u.paragraphOption ? (s(), d(r, m({ key: 2 }, u.paragraphOption === !0 ? {} : u.paragraphOption, {
583
+ "animation-duration": u.animationDuration,
584
+ animate: u.animate,
585
+ offset: u.offset
586
+ }), null, 16, ["animation-duration", "animate", "offset"])) : (s(), d(B, m({ key: 3 }, u.textOption || {}, {
587
+ "animation-duration": u.animationDuration,
588
+ animate: u.animate,
589
+ offset: u.offset
590
+ }), null, 16, ["animation-duration", "animate", "offset"]))
591
+ ], 8, FD);
592
+ }
593
+ const aD = /* @__PURE__ */ l(eD, [["render", nD]]), iD = () => /[#*0-9]\uFE0F?\u20E3|[\xA9\xAE\u203C\u2049\u2122\u2139\u2194-\u2199\u21A9\u21AA\u231A\u231B\u2328\u23CF\u23ED-\u23EF\u23F1\u23F2\u23F8-\u23FA\u24C2\u25AA\u25AB\u25B6\u25C0\u25FB\u25FC\u25FE\u2600-\u2604\u260E\u2611\u2614\u2615\u2618\u2620\u2622\u2623\u2626\u262A\u262E\u262F\u2638-\u263A\u2640\u2642\u2648-\u2653\u265F\u2660\u2663\u2665\u2666\u2668\u267B\u267E\u267F\u2692\u2694-\u2697\u2699\u269B\u269C\u26A0\u26A7\u26AA\u26B0\u26B1\u26BD\u26BE\u26C4\u26C8\u26CF\u26D1\u26D3\u26E9\u26F0-\u26F5\u26F7\u26F8\u26FA\u2702\u2708\u2709\u270F\u2712\u2714\u2716\u271D\u2721\u2733\u2734\u2744\u2747\u2757\u2763\u27A1\u2934\u2935\u2B05-\u2B07\u2B1B\u2B1C\u2B55\u3030\u303D\u3297\u3299]\uFE0F?|[\u261D\u270C\u270D](?:\uFE0F|\uD83C[\uDFFB-\uDFFF])?|[\u270A\u270B](?:\uD83C[\uDFFB-\uDFFF])?|[\u23E9-\u23EC\u23F0\u23F3\u25FD\u2693\u26A1\u26AB\u26C5\u26CE\u26D4\u26EA\u26FD\u2705\u2728\u274C\u274E\u2753-\u2755\u2795-\u2797\u27B0\u27BF\u2B50]|\u26F9(?:\uFE0F|\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|\u2764\uFE0F?(?:\u200D(?:\uD83D\uDD25|\uD83E\uDE79))?|\uD83C(?:[\uDC04\uDD70\uDD71\uDD7E\uDD7F\uDE02\uDE37\uDF21\uDF24-\uDF2C\uDF36\uDF7D\uDF96\uDF97\uDF99-\uDF9B\uDF9E\uDF9F\uDFCD\uDFCE\uDFD4-\uDFDF\uDFF5\uDFF7]\uFE0F?|[\uDF85\uDFC2\uDFC7](?:\uD83C[\uDFFB-\uDFFF])?|[\uDFC3\uDFC4\uDFCA](?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDFCB\uDFCC](?:\uFE0F|\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDCCF\uDD8E\uDD91-\uDD9A\uDE01\uDE1A\uDE2F\uDE32-\uDE36\uDE38-\uDE3A\uDE50\uDE51\uDF00-\uDF20\uDF2D-\uDF35\uDF37-\uDF7C\uDF7E-\uDF84\uDF86-\uDF93\uDFA0-\uDFC1\uDFC5\uDFC6\uDFC8\uDFC9\uDFCF-\uDFD3\uDFE0-\uDFF0\uDFF8-\uDFFF]|\uDDE6\uD83C[\uDDE8-\uDDEC\uDDEE\uDDF1\uDDF2\uDDF4\uDDF6-\uDDFA\uDDFC\uDDFD\uDDFF]|\uDDE7\uD83C[\uDDE6\uDDE7\uDDE9-\uDDEF\uDDF1-\uDDF4\uDDF6-\uDDF9\uDDFB\uDDFC\uDDFE\uDDFF]|\uDDE8\uD83C[\uDDE6\uDDE8\uDDE9\uDDEB-\uDDEE\uDDF0-\uDDF5\uDDF7\uDDFA-\uDDFF]|\uDDE9\uD83C[\uDDEA\uDDEC\uDDEF\uDDF0\uDDF2\uDDF4\uDDFF]|\uDDEA\uD83C[\uDDE6\uDDE8\uDDEA\uDDEC\uDDED\uDDF7-\uDDFA]|\uDDEB\uD83C[\uDDEE-\uDDF0\uDDF2\uDDF4\uDDF7]|\uDDEC\uD83C[\uDDE6\uDDE7\uDDE9-\uDDEE\uDDF1-\uDDF3\uDDF5-\uDDFA\uDDFC\uDDFE]|\uDDED\uD83C[\uDDF0\uDDF2\uDDF3\uDDF7\uDDF9\uDDFA]|\uDDEE\uD83C[\uDDE8-\uDDEA\uDDF1-\uDDF4\uDDF6-\uDDF9]|\uDDEF\uD83C[\uDDEA\uDDF2\uDDF4\uDDF5]|\uDDF0\uD83C[\uDDEA\uDDEC-\uDDEE\uDDF2\uDDF3\uDDF5\uDDF7\uDDFC\uDDFE\uDDFF]|\uDDF1\uD83C[\uDDE6-\uDDE8\uDDEE\uDDF0\uDDF7-\uDDFB\uDDFE]|\uDDF2\uD83C[\uDDE6\uDDE8-\uDDED\uDDF0-\uDDFF]|\uDDF3\uD83C[\uDDE6\uDDE8\uDDEA-\uDDEC\uDDEE\uDDF1\uDDF4\uDDF5\uDDF7\uDDFA\uDDFF]|\uDDF4\uD83C\uDDF2|\uDDF5\uD83C[\uDDE6\uDDEA-\uDDED\uDDF0-\uDDF3\uDDF7-\uDDF9\uDDFC\uDDFE]|\uDDF6\uD83C\uDDE6|\uDDF7\uD83C[\uDDEA\uDDF4\uDDF8\uDDFA\uDDFC]|\uDDF8\uD83C[\uDDE6-\uDDEA\uDDEC-\uDDF4\uDDF7-\uDDF9\uDDFB\uDDFD-\uDDFF]|\uDDF9\uD83C[\uDDE6\uDDE8\uDDE9\uDDEB-\uDDED\uDDEF-\uDDF4\uDDF7\uDDF9\uDDFB\uDDFC\uDDFF]|\uDDFA\uD83C[\uDDE6\uDDEC\uDDF2\uDDF3\uDDF8\uDDFE\uDDFF]|\uDDFB\uD83C[\uDDE6\uDDE8\uDDEA\uDDEC\uDDEE\uDDF3\uDDFA]|\uDDFC\uD83C[\uDDEB\uDDF8]|\uDDFD\uD83C\uDDF0|\uDDFE\uD83C[\uDDEA\uDDF9]|\uDDFF\uD83C[\uDDE6\uDDF2\uDDFC]|\uDFF3\uFE0F?(?:\u200D(?:\u26A7\uFE0F?|\uD83C\uDF08))?|\uDFF4(?:\u200D\u2620\uFE0F?|\uDB40\uDC67\uDB40\uDC62\uDB40(?:\uDC65\uDB40\uDC6E\uDB40\uDC67|\uDC73\uDB40\uDC63\uDB40\uDC74|\uDC77\uDB40\uDC6C\uDB40\uDC73)\uDB40\uDC7F)?)|\uD83D(?:[\uDC08\uDC26](?:\u200D\u2B1B)?|[\uDC3F\uDCFD\uDD49\uDD4A\uDD6F\uDD70\uDD73\uDD76-\uDD79\uDD87\uDD8A-\uDD8D\uDDA5\uDDA8\uDDB1\uDDB2\uDDBC\uDDC2-\uDDC4\uDDD1-\uDDD3\uDDDC-\uDDDE\uDDE1\uDDE3\uDDE8\uDDEF\uDDF3\uDDFA\uDECB\uDECD-\uDECF\uDEE0-\uDEE5\uDEE9\uDEF0\uDEF3]\uFE0F?|[\uDC42\uDC43\uDC46-\uDC50\uDC66\uDC67\uDC6B-\uDC6D\uDC72\uDC74-\uDC76\uDC78\uDC7C\uDC83\uDC85\uDC8F\uDC91\uDCAA\uDD7A\uDD95\uDD96\uDE4C\uDE4F\uDEC0\uDECC](?:\uD83C[\uDFFB-\uDFFF])?|[\uDC6E\uDC70\uDC71\uDC73\uDC77\uDC81\uDC82\uDC86\uDC87\uDE45-\uDE47\uDE4B\uDE4D\uDE4E\uDEA3\uDEB4-\uDEB6](?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDD74\uDD90](?:\uFE0F|\uD83C[\uDFFB-\uDFFF])?|[\uDC00-\uDC07\uDC09-\uDC14\uDC16-\uDC25\uDC27-\uDC3A\uDC3C-\uDC3E\uDC40\uDC44\uDC45\uDC51-\uDC65\uDC6A\uDC79-\uDC7B\uDC7D-\uDC80\uDC84\uDC88-\uDC8E\uDC90\uDC92-\uDCA9\uDCAB-\uDCFC\uDCFF-\uDD3D\uDD4B-\uDD4E\uDD50-\uDD67\uDDA4\uDDFB-\uDE2D\uDE2F-\uDE34\uDE37-\uDE44\uDE48-\uDE4A\uDE80-\uDEA2\uDEA4-\uDEB3\uDEB7-\uDEBF\uDEC1-\uDEC5\uDED0-\uDED2\uDED5-\uDED7\uDEDC-\uDEDF\uDEEB\uDEEC\uDEF4-\uDEFC\uDFE0-\uDFEB\uDFF0]|\uDC15(?:\u200D\uD83E\uDDBA)?|\uDC3B(?:\u200D\u2744\uFE0F?)?|\uDC41\uFE0F?(?:\u200D\uD83D\uDDE8\uFE0F?)?|\uDC68(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D(?:[\uDC68\uDC69]\u200D\uD83D(?:\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?)|[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?)|\uD83E[\uDDAF-\uDDB3\uDDBC\uDDBD])|\uD83C(?:\uDFFB(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFC-\uDFFF])))?|\uDFFC(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB\uDFFD-\uDFFF])))?|\uDFFD(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF])))?|\uDFFE(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB-\uDFFD\uDFFF])))?|\uDFFF(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB-\uDFFE])))?))?|\uDC69(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?[\uDC68\uDC69]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D(?:[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?|\uDC69\u200D\uD83D(?:\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?))|\uD83E[\uDDAF-\uDDB3\uDDBC\uDDBD])|\uD83C(?:\uDFFB(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFC-\uDFFF])))?|\uDFFC(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFB\uDFFD-\uDFFF])))?|\uDFFD(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF])))?|\uDFFE(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFB-\uDFFD\uDFFF])))?|\uDFFF(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFB-\uDFFE])))?))?|\uDC6F(?:\u200D[\u2640\u2642]\uFE0F?)?|\uDD75(?:\uFE0F|\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|\uDE2E(?:\u200D\uD83D\uDCA8)?|\uDE35(?:\u200D\uD83D\uDCAB)?|\uDE36(?:\u200D\uD83C\uDF2B\uFE0F?)?)|\uD83E(?:[\uDD0C\uDD0F\uDD18-\uDD1F\uDD30-\uDD34\uDD36\uDD77\uDDB5\uDDB6\uDDBB\uDDD2\uDDD3\uDDD5\uDEC3-\uDEC5\uDEF0\uDEF2-\uDEF8](?:\uD83C[\uDFFB-\uDFFF])?|[\uDD26\uDD35\uDD37-\uDD39\uDD3D\uDD3E\uDDB8\uDDB9\uDDCD-\uDDCF\uDDD4\uDDD6-\uDDDD](?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDDDE\uDDDF](?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDD0D\uDD0E\uDD10-\uDD17\uDD20-\uDD25\uDD27-\uDD2F\uDD3A\uDD3F-\uDD45\uDD47-\uDD76\uDD78-\uDDB4\uDDB7\uDDBA\uDDBC-\uDDCC\uDDD0\uDDE0-\uDDFF\uDE70-\uDE7C\uDE80-\uDE88\uDE90-\uDEBD\uDEBF-\uDEC2\uDECE-\uDEDB\uDEE0-\uDEE8]|\uDD3C(?:\u200D[\u2640\u2642]\uFE0F?|\uD83C[\uDFFB-\uDFFF])?|\uDDD1(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83E\uDDD1))|\uD83C(?:\uDFFB(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFC-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?|\uDFFC(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFB\uDFFD-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?|\uDFFD(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?|\uDFFE(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFB-\uDFFD\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?|\uDFFF(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFB-\uDFFE]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?))?|\uDEF1(?:\uD83C(?:\uDFFB(?:\u200D\uD83E\uDEF2\uD83C[\uDFFC-\uDFFF])?|\uDFFC(?:\u200D\uD83E\uDEF2\uD83C[\uDFFB\uDFFD-\uDFFF])?|\uDFFD(?:\u200D\uD83E\uDEF2\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF])?|\uDFFE(?:\u200D\uD83E\uDEF2\uD83C[\uDFFB-\uDFFD\uDFFF])?|\uDFFF(?:\u200D\uD83E\uDEF2\uD83C[\uDFFB-\uDFFE])?))?)/g, sD = "6.6", v = "https://cdn.jsdelivr.net/joypixels/assets/" + sD + "/png/unicode/32/";
594
+ let T = null, z = v, I = ".png", N = v, P = ".png";
595
+ const c = R;
596
+ function oD() {
597
+ return c;
598
+ }
599
+ function gD(D, t = ".png") {
600
+ D.endsWith("/") || (D = D + "/"), z = D, I = t;
601
+ }
602
+ function yD(D, t = ".svg") {
603
+ D.endsWith("/") || (D = D + "/"), N = D, P = t;
604
+ }
605
+ function _D(D) {
606
+ T = D;
607
+ }
608
+ function SD(D) {
609
+ CD(D);
610
+ }
611
+ function CD(D) {
612
+ const t = ["extension", "custom"], u = [
613
+ "name",
614
+ "category",
615
+ "shortname",
616
+ "extension",
617
+ "custom"
618
+ ], F = (n, e, a) => {
619
+ if (n[e] === void 0) {
620
+ if (!t.includes(e))
621
+ return;
622
+ n[e] = a;
623
+ } else
624
+ Array.isArray(n[e]) ? n[e] = n[e].concat(a) : n[e] = a;
625
+ };
626
+ Object.entries(D).forEach((n) => {
627
+ const [e, a] = n;
628
+ if (e in c) {
629
+ const i = c[e];
630
+ for (const r in a) {
631
+ const B = a[r];
632
+ F(i, r, B);
633
+ }
634
+ } else
635
+ (() => u.every((r) => a[r] !== void 0))() ? c[e] = a : console.error(
636
+ "The following custom emoji doesn't contain the required properties:",
637
+ a
638
+ );
639
+ });
640
+ }
641
+ function W(D) {
642
+ function t(F, n) {
643
+ if (!(!F || typeof F != "object")) {
644
+ if ("shortname" in F && (F.shortname === D || F.shortname_alternates.includes(D)))
645
+ return F.key = n, u = F, !0;
646
+ Object.keys(F).some(function(e) {
647
+ return t(F[e], e);
648
+ });
649
+ }
650
+ }
651
+ let u;
652
+ return t(oD(), null), u;
653
+ }
654
+ function ED(D) {
655
+ let t = "";
656
+ for (const u of D) {
657
+ const F = u.codePointAt(0).toString(16);
658
+ ["200d", "fe0f"].includes(F) || (t !== "" && (t = t + "-"), t = t + u.codePointAt(0).toString(16));
659
+ }
660
+ return t;
661
+ }
662
+ function rD(D) {
663
+ const t = D.split("-");
664
+ let u = "";
665
+ return t.forEach((F) => {
666
+ u = u + String.fromCodePoint(parseInt(F, 16));
667
+ }), u;
668
+ }
669
+ function lD(D) {
670
+ if (D.startsWith(":") && D.endsWith(":"))
671
+ return W(D);
672
+ {
673
+ const t = ED(D), u = c[t];
674
+ return u && (u.key = t), u;
675
+ }
676
+ }
677
+ function dD(D) {
678
+ const t = D.match(/:\w+:/g);
679
+ return mD(t);
680
+ }
681
+ function mD(D) {
682
+ const t = D ? D.filter((u) => W(u)) : [];
683
+ return new Set(t);
684
+ }
685
+ function cD(D) {
686
+ const t = [...D.matchAll(iD())], u = t.length ? t.map((F) => F[0]) : [];
687
+ return new Set(u);
688
+ }
689
+ const BD = {
690
+ name: "DtEmoji",
691
+ components: {
692
+ DtSkeleton: aD
693
+ },
694
+ props: {
695
+ /**
696
+ * Supports shortcode ex: :smile: or unicode ex: 😄. Will display the resulting emoji.
697
+ * <a class="d-link" href="https://emojipedia.org/joypixels/" target="_blank">JoyPixels</a>
698
+ * for all supported shortcode/unicode or the docs for setting up custom emojis.
699
+ */
700
+ code: {
701
+ type: String,
702
+ default: null
703
+ },
704
+ /**
705
+ * The size of the emoji. Can be any of the icon size utility classes from
706
+ * <a class="d-link" href="https://dialpad.design/components/icon.html" target="_blank"> Dialpad Icon Size</a>
707
+ * @values 100, 200, 300, 400, 500, 600, 700, 800
708
+ */
709
+ size: {
710
+ type: String,
711
+ default: "500",
712
+ validator: (D) => Object.keys(A).includes(D)
713
+ },
714
+ /**
715
+ * Additional class name for the emoji img element.
716
+ * Can accept String, Object, and Array, i.e. has the
717
+ * same API as Vue's built-in handling of the class attribute.
718
+ */
719
+ imgClass: {
720
+ type: [String, Object, Array],
721
+ default: ""
722
+ },
723
+ /**
724
+ * Will be read out on a screen reader for this emoji. You must use this prop if you want your emoji to be i18n
725
+ * Compatible as Dialtone Vue will not translate it by itself. If you do not set this prop the aria-label will
726
+ * be set to the english description of the emoji. You can retrieve the description for an emoji yourself via the
727
+ * getEmojiData() function
728
+ */
729
+ ariaLabel: {
730
+ type: String,
731
+ default: null
732
+ },
733
+ /**
734
+ * Shows a skeleton loader while the emoji asset is loading.
735
+ * @values true, false
736
+ */
737
+ showSkeleton: {
738
+ type: Boolean,
739
+ default: !0
740
+ }
741
+ },
742
+ data() {
743
+ return {
744
+ emojiData: null,
745
+ imgLoading: !1
746
+ };
747
+ },
748
+ computed: {
749
+ emojiDataValid() {
750
+ return !!this.emojiData;
751
+ },
752
+ emojiSrc() {
753
+ var D;
754
+ return this.emojiDataValid ? (D = this.emojiData) != null && D.custom ? T + this.emojiData.key + this.emojiData.extension : ["100", "200"].includes(this.size) ? z + this.emojiData.key + I : N + this.emojiData.key + P : "invalid";
755
+ },
756
+ emojiAlt() {
757
+ if (this.emojiDataValid)
758
+ return this.emojiData.unicode_output ? rD(this.emojiData.unicode_output) : this.emojiData.name;
759
+ },
760
+ emojiLabel() {
761
+ return this.emojiDataValid ? this.ariaLabel ? this.ariaLabel : this.emojiData.name : "Invalid Emoji";
762
+ },
763
+ emojiSize() {
764
+ return A[this.size];
765
+ }
766
+ },
767
+ watch: {
768
+ code: {
769
+ handler: function() {
770
+ this.getEmojiData();
771
+ },
772
+ immediate: !0
773
+ },
774
+ emojiSrc: {
775
+ handler: async function() {
776
+ this.imgLoading = !0;
777
+ }
778
+ }
779
+ },
780
+ methods: {
781
+ getEmojiData() {
782
+ this.emojiData = lD(this.code);
783
+ },
784
+ imageLoaded() {
785
+ this.imgLoading = !1;
786
+ },
787
+ imageErrored() {
788
+ this.imgLoading = !1;
789
+ }
790
+ }
791
+ }, fD = ["aria-label", "alt", "title", "src"];
792
+ function hD(D, t, u, F, n, e) {
793
+ const a = C("dt-skeleton");
794
+ return s(), E("span", {
795
+ class: o(e.emojiSize)
796
+ }, [
797
+ _(g(a, {
798
+ offset: 0,
799
+ class: o(e.emojiSize),
800
+ "shape-option": { shape: "square", contentClass: e.emojiSize, size: "auto" }
801
+ }, null, 8, ["class", "shape-option"]), [
802
+ [S, n.imgLoading && u.showSkeleton]
803
+ ]),
804
+ _(b("img", {
805
+ ref: "emojiImg",
806
+ class: o(["d-icon", e.emojiSize, u.imgClass]),
807
+ "aria-label": e.emojiLabel,
808
+ alt: e.emojiAlt,
809
+ title: e.emojiLabel,
810
+ src: e.emojiSrc,
811
+ onLoad: t[0] || (t[0] = (...i) => e.imageLoaded && e.imageLoaded(...i)),
812
+ onError: t[1] || (t[1] = (...i) => e.imageErrored && e.imageErrored(...i))
813
+ }, null, 42, fD), [
814
+ [S, !n.imgLoading]
815
+ ])
816
+ ], 2);
817
+ }
818
+ const k = /* @__PURE__ */ l(BD, [["render", hD]]), jD = {
819
+ name: "DtEmojiTextWrapper",
820
+ components: {
821
+ DtEmoji: k
822
+ },
823
+ inheritAttrs: !1,
824
+ props: {
825
+ /**
826
+ * Element type (tag name) to use for the wrapper.
827
+ */
828
+ elementType: {
829
+ type: String,
830
+ default: "div"
831
+ },
832
+ /**
833
+ * The icon size to render the emojis at: 100 to 800
834
+ */
835
+ size: {
836
+ type: String,
837
+ default: "500",
838
+ validator: (D) => Object.keys(A).includes(D)
839
+ }
840
+ },
841
+ data() {
842
+ return {
843
+ loadingEmojiJson: !0
844
+ };
845
+ },
846
+ async created() {
847
+ this.loadingEmojiJson = !1;
848
+ },
849
+ methods: {
850
+ /**
851
+ * Replaces the valid codes from the text content with a DtEmoji component.
852
+ * @returns {Array<VNode|string>}
853
+ */
854
+ replaceDtEmojis(D, t) {
855
+ const u = new RegExp(`(${D.join("|")})`, "g");
856
+ return t.split(u).map((n) => D.includes(n) ? f(k, { ...this.$attrs, class: "d-mx4 d-d-inline-block", size: this.size, code: n }) : n);
857
+ },
858
+ /**
859
+ * Recursively search the Vue virtual DOM to find text
860
+ * @param VNode
861
+ * @returns {VNode|*}
862
+ */
863
+ searchVNodes(D) {
864
+ var u;
865
+ if (typeof D == "string")
866
+ return this.searchCodes(D);
867
+ if (typeof D.type == "symbol")
868
+ return this.searchCodes(D.children);
869
+ if ((u = D.props) != null && u.innerHTML)
870
+ return this.searchVNodes(D.props.innerHTML);
871
+ const t = Array.isArray(D.children) ? D.children : [D.children];
872
+ return f(D.type, D.props, t.map((F) => this.searchVNodes(F)));
873
+ },
874
+ // TODO: Find a way to crawl vue components
875
+ replaceVueComponentVNodeContent(D) {
876
+ },
877
+ /**
878
+ * Find codes in text.
879
+ * @param textContent string
880
+ * @returns {Array<VNode|string>|string}
881
+ */
882
+ searchCodes(D) {
883
+ const t = dD(D), u = cD(D), F = [...t, ...u];
884
+ return F.length === 0 ? D : this.replaceDtEmojis(F, D);
885
+ }
886
+ },
887
+ render() {
888
+ const D = this.$slots.default ? this.$slots.default() : [];
889
+ return f(
890
+ this.elementType,
891
+ {
892
+ "data-qa": "emoji-text-wrapper",
893
+ class: this.$attrs.class
894
+ },
895
+ this.loadingEmojiJson ? D : D.map((t) => this.searchVNodes(t))
896
+ );
897
+ }
898
+ };
899
+ export {
900
+ lD as A,
901
+ dD as B,
902
+ mD as C,
903
+ aD as D,
904
+ cD as E,
905
+ K as S,
906
+ jD as _,
907
+ k as a,
908
+ tD as b,
909
+ w as c,
910
+ x as d,
911
+ L as e,
912
+ y as f,
913
+ M as g,
914
+ J as h,
915
+ j as i,
916
+ sD as j,
917
+ v as k,
918
+ T as l,
919
+ z as m,
920
+ I as n,
921
+ N as o,
922
+ P as p,
923
+ c as q,
924
+ oD as r,
925
+ gD as s,
926
+ yD as t,
927
+ _D as u,
928
+ SD as v,
929
+ CD as w,
930
+ W as x,
931
+ ED as y,
932
+ rD as z
933
+ };