@orangelogic/design-system 2.103.0 → 2.105.0

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 (112) hide show
  1. package/library/chunks/{asset.CtL7ACp7.js → asset.CCjWpDnd.js} +2 -2
  2. package/library/chunks/{button.DfRnA70F.js → button.B8q9TnbJ.js} +1 -1
  3. package/library/chunks/{color-swatch-group.BVPz-gma.js → color-swatch-group.mptrPb-B.js} +5 -5
  4. package/library/chunks/{color-swatch.GsiCvj1n.js → color-swatch.Dhk54Nx0.js} +1 -1
  5. package/library/chunks/{confirm-popover.PiSCZY6-.js → confirm-popover.DNmZ61WM.js} +3 -3
  6. package/library/chunks/{content-builder.CcgZciZN.js → content-builder.BAhOkdZ-.js} +1 -1
  7. package/library/chunks/{dialog.BTU6B2_4.js → dialog.BlHQ-Sh1.js} +2 -2
  8. package/library/chunks/{dot-pagination.BzsMmgef.js → dot-pagination.BMlLpcfR.js} +1 -1
  9. package/library/chunks/{file-on-demand.DCxabV6T.js → file-on-demand.Bi_7NCZZ.js} +202 -211
  10. package/library/chunks/{folder-select.BM7yeAsU.js → folder-select.CDqz69bO.js} +3 -3
  11. package/library/chunks/{header.B5C9hZiO.js → header.yC7IkgNn.js} +1 -1
  12. package/library/chunks/{i18n.DK1uYlJT.js → i18n.DmmFsjwP.js} +7 -2
  13. package/library/chunks/{icon-button.CN0NGNQx.js → icon-button.CHh2iNJJ.js} +1 -1
  14. package/library/chunks/{iframe.BsLEwsvI.js → iframe.Dd2ON7ug.js} +1 -1
  15. package/library/chunks/image.CR_LHEaY.js +821 -0
  16. package/library/chunks/{list-editor.DqI-Aj2b.js → list-editor.C-1YI7Bb.js} +15 -14
  17. package/library/chunks/{option.B7SoEb_q.js → option.CdZHtENS.js} +1 -1
  18. package/library/chunks/{pagination.BJrZCqaj.js → pagination.CDCYbCV4.js} +4 -4
  19. package/library/chunks/resizable-component.styles.sAhMVN1H.js +283 -0
  20. package/library/chunks/{responsive.Oz9HWjyQ.js → responsive._tydujAy.js} +1 -1
  21. package/library/chunks/{tab-group.DpyBG0JQ.js → tab-group.DtGFedcf.js} +4 -4
  22. package/library/chunks/{table.DQqei6Sh.js → table.kjsxIRt-.js} +5 -5
  23. package/library/chunks/{tree.DAiWVFiY.js → tree.D__u64uY.js} +1 -1
  24. package/library/chunks/wavesurfer.esm.Cwi1pz64.js +1276 -0
  25. package/library/components/alert.js +2 -2
  26. package/library/components/asset-link-format.js +5 -5
  27. package/library/components/atoms.js +163 -161
  28. package/library/components/audio.d.ts +3 -0
  29. package/library/components/audio.js +237 -0
  30. package/library/components/border-input-group.js +1 -1
  31. package/library/components/breadcrumb.js +1 -1
  32. package/library/components/button.js +2 -2
  33. package/library/components/color-picker.js +2 -2
  34. package/library/components/color-swatch-group.js +6 -6
  35. package/library/components/color-swatch.js +2 -2
  36. package/library/components/confirm-popover.js +4 -4
  37. package/library/components/copy-button.js +1 -1
  38. package/library/components/corner-position-input-group.js +2 -2
  39. package/library/components/details.js +1 -1
  40. package/library/components/dialog.js +3 -3
  41. package/library/components/dot-pagination.js +2 -2
  42. package/library/components/drawer.js +2 -2
  43. package/library/components/dropdown.js +1 -1
  44. package/library/components/dynamic-select.js +4 -4
  45. package/library/components/e-chart.js +1 -1
  46. package/library/components/element-clamp.js +2 -2
  47. package/library/components/file-on-demand.js +9 -9
  48. package/library/components/folder-select.js +3 -3
  49. package/library/components/format-bytes.js +1 -1
  50. package/library/components/format-date.js +1 -1
  51. package/library/components/format-number.js +1 -1
  52. package/library/components/format-time.js +1 -1
  53. package/library/components/header.js +2 -2
  54. package/library/components/icon-button.js +2 -2
  55. package/library/components/iframe.js +2 -2
  56. package/library/components/image-comparer.js +1 -1
  57. package/library/components/image.js +4 -3
  58. package/library/components/input.js +3 -3
  59. package/library/components/line-clamp.js +1 -1
  60. package/library/components/list-editor.js +6 -6
  61. package/library/components/masonry.js +2 -2
  62. package/library/components/menu-item.js +1 -1
  63. package/library/components/menu.js +1 -1
  64. package/library/components/molecules.js +4 -4
  65. package/library/components/option.js +2 -2
  66. package/library/components/organisms.js +2 -2
  67. package/library/components/pagination.js +5 -5
  68. package/library/components/popup.js +1 -1
  69. package/library/components/position-picker.js +1 -1
  70. package/library/components/progress-bar.js +1 -1
  71. package/library/components/progress-ring.js +1 -1
  72. package/library/components/range.js +1 -1
  73. package/library/components/rating.js +1 -1
  74. package/library/components/relative-time.js +1 -1
  75. package/library/components/select.js +2 -2
  76. package/library/components/share-option-list.js +1 -1
  77. package/library/components/sidebar.js +1 -1
  78. package/library/components/size-input-group.js +2 -2
  79. package/library/components/spinner.js +1 -1
  80. package/library/components/split-panel.js +1 -1
  81. package/library/components/tab-group.js +4 -4
  82. package/library/components/tab.js +2 -2
  83. package/library/components/table.js +5 -5
  84. package/library/components/tag.js +2 -2
  85. package/library/components/tooltip.js +1 -1
  86. package/library/components/tree-item.js +2 -2
  87. package/library/components/tree.js +2 -2
  88. package/library/components/typeface.js +2 -2
  89. package/library/components/types.js +16904 -16626
  90. package/library/components/video.js +8 -7
  91. package/library/package.json +1 -1
  92. package/library/packages/atoms/src/components/audio/audio.d.ts +114 -0
  93. package/library/packages/atoms/src/components/audio/audio.styles.d.ts +2 -0
  94. package/library/packages/atoms/src/index.d.ts +1 -0
  95. package/library/packages/events/src/cx-book-reader-event.d.ts +9 -0
  96. package/library/packages/events/src/events.d.ts +1 -0
  97. package/library/packages/molecules/src/graph-view/react/constant.d.ts +1 -1
  98. package/library/packages/organisms/src/asset-transformation-dialog/asset-transformation-dialog.d.ts +4 -0
  99. package/library/packages/organisms/src/content-builder/configs/audio.d.ts +26 -0
  100. package/library/packages/organisms/src/content-builder/configs/index.d.ts +1 -0
  101. package/library/packages/organisms/src/content-builder/configs-controller.d.ts +28 -0
  102. package/library/packages/organisms/src/content-builder/content-builder-config.d.ts +3 -0
  103. package/library/packages/organisms/src/content-builder/plugins/audio.d.ts +5 -0
  104. package/library/packages/organisms/src/content-builder/plugins/index.d.ts +1 -0
  105. package/library/packages/organisms/src/content-builder/styleController.d.ts +1 -1
  106. package/library/packages/organisms/src/file-on-demand/file-on-demand.constants.d.ts +0 -1
  107. package/library/packages/types/src/content-builder.d.ts +3 -2
  108. package/library/packages/utils/src/custom-element/i18n.d.ts +6 -1
  109. package/library/react-web-component.d.ts +273 -93
  110. package/library/utils.js +3 -3
  111. package/package.json +1 -1
  112. package/library/chunks/image.D207g003.js +0 -1095
@@ -1,1095 +0,0 @@
1
- import { x as A, i as he, E as ue } from "./lit-element.jLBm65_O.js";
2
- import { C as He, n as d } from "./lib-cortex-element.CVMmyPMC.js";
3
- import { r as L } from "./state.CSDxrqLd.js";
4
- import { e as K } from "./query.BBf1UFkC.js";
5
- import { E as De, b as ce, a as $e } from "./index.Cpamj0jB.js";
6
- import { c as Te } from "./component.styles.CRO4Odto.js";
7
- import { c as We } from "./custom-element.L4WJXn1j.js";
8
- import { d as Oe } from "./debounce.CIEhztrj.js";
9
- import { L as Ae } from "./i18n.DK1uYlJT.js";
10
- import { w as X } from "./watch.BCJD77bD.js";
11
- import { e as j } from "./class-map.BiVq-cVR.js";
12
- import { o as Be } from "./if-defined.BRoBj_Rp.js";
13
- import { e as Me, i as je } from "./directive.oAbCiebi.js";
14
- import { m as Ie } from "./directive-helpers.Dm4rc594.js";
15
- import { o as _e } from "./style-map.llVFPd__.js";
16
- import { n as P } from "./when.Dr1es41R.js";
17
- import Ne from "../components/icon.js";
18
- import Ze from "../components/popup.js";
19
- import Ve from "../components/resize-observer.js";
20
- import Pe from "../components/skeleton.js";
21
- import Fe from "../components/space.js";
22
- var Ue = /* @__PURE__ */ ((e) => (e.Bottom = "bottom", e.BottomCenter = "bottom-center", e.BottomLeft = "bottom-left", e.BottomRight = "bottom-right", e.CenterCenter = "center-center", e.CenterLeft = "center-left", e.CenterRight = "center-right", e.Left = "left", e.Right = "right", e.Top = "top", e.TopCenter = "top-center", e.TopLeft = "top-left", e.TopRight = "top-right", e))(Ue || {}), q = /* @__PURE__ */ ((e) => (e.Jump = "jump", e.None = "none", e.TextReveal = "text-reveal", e.Zoom = "zoom", e))(q || {}), pe = /* @__PURE__ */ ((e) => (e.PopOut = "pop-out", e.WithinBorders = "within-borders", e))(pe || {}), fe = /* @__PURE__ */ ((e) => (e.Fade = "fade", e.Slide = "slide", e))(fe || {}), se = /* @__PURE__ */ ((e) => (e.Auto = "auto", e.Fixed = "fixed", e))(se || {}), W = /* @__PURE__ */ ((e) => (e.Both = "both", e.Horizontal = "horizontal", e.Vertical = "vertical", e))(W || {}), Ye = Object.defineProperty, C = (e, t, r, h) => {
23
- for (var o = void 0, g = e.length - 1, u; g >= 0; g--)
24
- (u = e[g]) && (o = u(t, r, o) || o);
25
- return o && Ye(t, r, o), o;
26
- };
27
- class S extends He {
28
- constructor() {
29
- super(...arguments), this.hasEvent = !1, this.easing = De.Linear, this.highlightBorder = !1, this.highlightColorOverlay = !1, this.highlightDropShadow = !1, this.highlightBackground = !1, this.highlightOpacity = !1, this.effect = q.None, this.textRevealStyle = fe.Slide, this.zoomStyle = pe.WithinBorders, this.hasSlotContent = !1, this.isCustomSlot = !1, this.isHovering = !1;
30
- }
31
- get easeCSSVariable() {
32
- return ce[this.easing] || ce.linear;
33
- }
34
- getHighlighterClass() {
35
- return {
36
- highlighter: !0,
37
- [`highlighter--effect-${this.effect}`]: !0,
38
- [`highlighter--zoom-style-${this.zoomStyle}`]: !0,
39
- "highlighter--background": this.highlightBackground,
40
- "highlighter--border": this.highlightBorder,
41
- "highlighter--color-overlay": this.highlightColorOverlay,
42
- "highlighter--drop-shadow": this.highlightDropShadow,
43
- "highlighter--opacity": this.highlightOpacity
44
- };
45
- }
46
- /**
47
- * Check if the slot has actual content (not just whitespace).
48
- */
49
- handleSlotChange() {
50
- if (this.slotEl) {
51
- const t = this.slotEl.assignedElements({ flatten: !0 });
52
- this.hasSlotContent = t.length > 0, this.isCustomSlot = !t.some(
53
- (r) => r.hasAttribute("data-item-id")
54
- );
55
- } else
56
- this.hasSlotContent = this.childElementCount > 0, this.isCustomSlot = !0;
57
- }
58
- }
59
- C([
60
- K("slot")
61
- ], S.prototype, "slotEl");
62
- C([
63
- d({ attribute: "has-event", reflect: !0, type: Boolean })
64
- ], S.prototype, "hasEvent");
65
- C([
66
- d({ reflect: !0, type: String })
67
- ], S.prototype, "easing");
68
- C([
69
- d({ attribute: "highlight-border", reflect: !0, type: Boolean })
70
- ], S.prototype, "highlightBorder");
71
- C([
72
- d({
73
- attribute: "highlight-color-overlay",
74
- reflect: !0,
75
- type: Boolean
76
- })
77
- ], S.prototype, "highlightColorOverlay");
78
- C([
79
- d({
80
- attribute: "highlight-drop-shadow",
81
- reflect: !0,
82
- type: Boolean
83
- })
84
- ], S.prototype, "highlightDropShadow");
85
- C([
86
- d({ attribute: "highlight-background", reflect: !0, type: Boolean })
87
- ], S.prototype, "highlightBackground");
88
- C([
89
- d({ attribute: "highlight-opacity", reflect: !0, type: Boolean })
90
- ], S.prototype, "highlightOpacity");
91
- C([
92
- d({ attribute: "effect", reflect: !0, type: String })
93
- ], S.prototype, "effect");
94
- C([
95
- d({
96
- attribute: "text-reveal-style",
97
- reflect: !0,
98
- type: String
99
- })
100
- ], S.prototype, "textRevealStyle");
101
- C([
102
- d({
103
- attribute: "zoom-style",
104
- reflect: !0,
105
- type: String
106
- })
107
- ], S.prototype, "zoomStyle");
108
- C([
109
- L()
110
- ], S.prototype, "hasSlotContent");
111
- C([
112
- L()
113
- ], S.prototype, "isCustomSlot");
114
- C([
115
- L()
116
- ], S.prototype, "isHovering");
117
- var qe = Object.defineProperty, O = (e, t, r, h) => {
118
- for (var o = void 0, g = e.length - 1, u; g >= 0; g--)
119
- (u = e[g]) && (o = u(t, r, o) || o);
120
- return o && qe(t, r, o), o;
121
- };
122
- class D extends S {
123
- constructor() {
124
- super(), this.width = "", this.height = "", this.resizable = !1, this.heightMode = se.Fixed, this.resizeDirection = W.Both, this.noLimit = !1, this.parentContainer = null, this.isResizeActive = !1, this.isResizing = !1, this.resizeSize = {
125
- height: 0,
126
- width: 0
127
- }, this.maxWidth = 0, this.maxHeight = 0, this.minWidth = 0, this.minHeight = 0, this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
128
- }
129
- get ratio() {
130
- const t = this.clientWidth || 0, r = this.clientHeight || 0;
131
- return !t || !r ? 1 : t / r;
132
- }
133
- get keepRatio() {
134
- return this.heightMode === se.Auto;
135
- }
136
- get canResizeHorizontal() {
137
- return this.resizeDirection !== W.Vertical;
138
- }
139
- get canResizeVertical() {
140
- return this.resizeDirection !== W.Horizontal;
141
- }
142
- handleDocumentMouseDown(t) {
143
- const r = t.composedPath();
144
- this.containingElement && !r.includes(this.containingElement) && this.stopResizing();
145
- }
146
- startResizing() {
147
- !this.resizable || this.isResizeActive || (this.isResizeActive = !0, this.ownerDocument.addEventListener(
148
- "mousedown",
149
- this.handleDocumentMouseDown
150
- ));
151
- }
152
- stopResizing() {
153
- this.isResizeActive = !1, this.ownerDocument.removeEventListener(
154
- "mousedown",
155
- this.handleDocumentMouseDown
156
- );
157
- }
158
- handleResizeDragging(t, r = !1, h = !1) {
159
- t.preventDefault(), t.stopPropagation(), this.maxWidth = Number.parseInt(getComputedStyle(this).getPropertyValue("--max-width")) || this.parentContainer?.clientWidth || this.parentElement?.clientWidth || 1 / 0, this.maxHeight = Number.parseInt(
160
- getComputedStyle(this).getPropertyValue("--max-height")
161
- ) || 1 / 0, this.minWidth = Number.parseInt(getComputedStyle(this).getPropertyValue("--min-width")) || 40, this.minHeight = Number.parseInt(
162
- getComputedStyle(this).getPropertyValue("--min-height")
163
- ) || 40, this.isResizing = !0;
164
- const o = { x: t.pageX, y: t.pageY };
165
- let g = 0, u = 0;
166
- const x = {
167
- height: this.containingElement?.clientHeight || 0,
168
- width: this.containingElement?.clientWidth || 0
169
- };
170
- if (!this.noLimit && this.parentElement) {
171
- const $ = getComputedStyle(this.parentElement), p = $.getPropertyValue("padding-left").trim() || "0px", v = $.getPropertyValue("padding-right").trim() || "0px", B = Number(p.replace("px", "")), y = Number(v.replace("px", "")), H = getComputedStyle(this.parentElement).getPropertyValue("--padding").trim() || "0px", E = Number(H.replace("px", "")), ie = Math.max(
172
- B + y,
173
- E * 2
174
- );
175
- this.maxWidth = Math.max(this.maxWidth - ie, 0);
176
- }
177
- this.emit("cx-resize-start", {
178
- detail: {
179
- element: this,
180
- event: t
181
- }
182
- });
183
- const _ = ($) => {
184
- g = Number(x.width) + (r ? o.x - $.pageX : $.pageX - o.x), u = Number(x.height) + (h ? o.y - $.pageY : $.pageY - o.y), this.canResizeHorizontal || (g = Number(x.width)), this.canResizeVertical || (u = Number(x.height)), this.resizeDirection === W.Both && this.keepRatio && (u >= g / this.ratio && (u = g / this.ratio), g >= u * this.ratio && (g = u * this.ratio));
185
- let p = g, v = u;
186
- if (this.resizeDirection === W.Both && this.keepRatio) {
187
- const B = this.maxWidth ?? 1 / 0, y = this.maxHeight ?? 1 / 0;
188
- let H = Math.min(p, B), E = H / this.ratio;
189
- E > y && (E = y, H = E * this.ratio), p = H, v = E;
190
- } else
191
- p = this.maxWidth ? Math.min(p, this.maxWidth) : p, v = this.maxHeight ? Math.min(v, this.maxHeight) : v;
192
- this.resizeSize = {
193
- height: Math.round(v),
194
- width: Math.round(p)
195
- }, this.resizeDirection === W.Both && this.keepRatio ? (this.minHeight && this.resizeSize.height < this.minHeight && (this.resizeSize.height = this.minHeight, this.resizeSize.width = Math.round(this.minHeight * this.ratio)), this.minWidth && this.resizeSize.width < this.minWidth && (this.resizeSize.width = this.minWidth, this.resizeSize.height = Math.round(this.minWidth / this.ratio))) : (this.minHeight && this.resizeSize.height < this.minHeight && (this.resizeSize.height = this.minHeight), this.minWidth && this.resizeSize.width < this.minWidth && (this.resizeSize.width = this.minWidth));
196
- }, N = ($) => {
197
- if (g > 0 && u > 0) {
198
- let p = g, v = u;
199
- if (this.canResizeHorizontal || (p = Number(x.width)), this.canResizeVertical || (v = Number(x.height)), this.resizeDirection === W.Both && this.keepRatio) {
200
- const B = this.maxWidth ?? 1 / 0, y = this.maxHeight ?? 1 / 0;
201
- let H = Math.min(p, B), E = H / this.ratio;
202
- E > y && (E = y, H = E * this.ratio), p = H, v = E;
203
- } else
204
- p = this.maxWidth ? Math.min(p, this.maxWidth) : p, v = this.maxHeight ? Math.min(v, this.maxHeight) : v;
205
- this.resizeDirection === W.Both && this.keepRatio ? (this.minHeight && v < this.minHeight && (v = this.minHeight, p = Math.round(this.minHeight * this.ratio)), this.minWidth && p < this.minWidth && (p = this.minWidth, v = Math.round(this.minWidth / this.ratio))) : (this.minHeight && v < this.minHeight && (v = this.minHeight), this.minWidth && p < this.minWidth && (p = this.minWidth)), this.width = `${Math.round(p)}px`, this.height = `${Math.round(v)}px`, this.resizeSize = {
206
- height: 0,
207
- width: 0
208
- }, this.isResizing = !1;
209
- }
210
- this.emit("cx-resize-end", {
211
- detail: {
212
- element: this,
213
- event: $
214
- }
215
- }), this.ownerDocument.defaultView?.removeEventListener(
216
- "mousemove",
217
- _
218
- );
219
- };
220
- this.ownerDocument.defaultView?.addEventListener(
221
- "mousemove",
222
- _
223
- ), this.ownerDocument.defaultView?.addEventListener("mouseup", N, {
224
- once: !0
225
- });
226
- }
227
- handleResizeDraggingTopLeft(t) {
228
- this.handleResizeDragging(t, !0, !0);
229
- }
230
- handleResizeDraggingTopRight(t) {
231
- this.handleResizeDragging(t, !1, !0);
232
- }
233
- handleResizeDraggingBottomLeft(t) {
234
- this.handleResizeDragging(t, !0, !1);
235
- }
236
- handleResizeDraggingBottomRight(t) {
237
- this.handleResizeDragging(t, !1, !1);
238
- }
239
- handleResizeDraggingLeft(t) {
240
- this.handleResizeDragging(t, !0, !1);
241
- }
242
- handleResizeDraggingRight(t) {
243
- this.handleResizeDragging(t, !1, !1);
244
- }
245
- handleResizeDraggingTop(t) {
246
- this.handleResizeDragging(t, !1, !0);
247
- }
248
- handleResizeDraggingBottom(t) {
249
- this.handleResizeDragging(t, !1, !1);
250
- }
251
- renderResizer() {
252
- return this.resizeDirection === W.Horizontal ? A`<div class="resizer resizer--left" @mousedown=${this.handleResizeDraggingLeft}></div><div class="resizer resizer--right" @mousedown=${this.handleResizeDraggingRight}></div>` : this.resizeDirection === W.Vertical ? A`<div class="resizer resizer--top" @mousedown=${this.handleResizeDraggingTop}></div><div class="resizer resizer--bottom" @mousedown=${this.handleResizeDraggingBottom}></div>` : A`<div class="resizer resizer--top-left" @mousedown=${this.handleResizeDraggingTopLeft}></div><div class="resizer resizer--top-right" @mousedown=${this.handleResizeDraggingTopRight}></div><div class="resizer resizer--bottom-left" @mousedown=${this.handleResizeDraggingBottomLeft}></div><div class="resizer resizer--bottom-right" @mousedown=${this.handleResizeDraggingBottomRight}></div>`;
253
- }
254
- }
255
- O([
256
- K('[part="base"]')
257
- ], D.prototype, "containingElement");
258
- O([
259
- d({ reflect: !0, type: String })
260
- ], D.prototype, "width");
261
- O([
262
- d({ reflect: !0, type: String })
263
- ], D.prototype, "height");
264
- O([
265
- d({ type: Boolean })
266
- ], D.prototype, "resizable");
267
- O([
268
- d({ attribute: "height-mode", reflect: !0, type: String })
269
- ], D.prototype, "heightMode");
270
- O([
271
- d({ attribute: "resize-direction", reflect: !0, type: String })
272
- ], D.prototype, "resizeDirection");
273
- O([
274
- d({ attribute: "no-limit", reflect: !0, type: Boolean })
275
- ], D.prototype, "noLimit");
276
- O([
277
- d({ attribute: !1, type: Object })
278
- ], D.prototype, "parentContainer");
279
- O([
280
- L()
281
- ], D.prototype, "isResizeActive");
282
- O([
283
- L()
284
- ], D.prototype, "isResizing");
285
- O([
286
- L()
287
- ], D.prototype, "resizeSize");
288
- const Xe = he`.resizer{background-color:var(--cx-color-primary);z-index:100;width:8px;height:8px;position:absolute}.resizer--top-left{top:calc(-1px - var(--border-width,0px));left:calc(-1px - var(--border-width,0px));cursor:nw-resize}.resizer--top-right{top:calc(-1px - var(--border-width,0px));right:calc(-1px - var(--border-width,0px));cursor:ne-resize}.resizer--bottom-left{bottom:calc(-1px - var(--border-width,0px));left:calc(-1px - var(--border-width,0px));cursor:sw-resize}.resizer--bottom-right{bottom:calc(-1px - var(--border-width,0px));right:calc(-1px - var(--border-width,0px));cursor:se-resize}.resizer--left{cursor:ew-resize;top:50%;left:0;transform:translateY(-50%)}.resizer--right{cursor:ew-resize;top:50%;right:0;transform:translateY(-50%)}.resizer--top{cursor:ns-resize;top:0;left:50%;transform:translate(-50%)}.resizer--bottom{cursor:ns-resize;bottom:0;left:50%;transform:translate(-50%)}`;
289
- var Y = /* @__PURE__ */ ((e) => (e.Automatic = "automatic", e.Manual = "manual", e))(Y || {});
290
- /**
291
- * @license
292
- * Copyright 2021 Google LLC
293
- * SPDX-License-Identifier: BSD-3-Clause
294
- */
295
- const Ke = Me(class extends je {
296
- constructor() {
297
- super(...arguments), this.key = ue;
298
- }
299
- render(e, t) {
300
- return this.key = e, t;
301
- }
302
- update(e, [t, r]) {
303
- return t !== this.key && (Ie(e), this.key = t), r;
304
- }
305
- });
306
- /*! medium-zoom 1.1.0 | MIT License | https://github.com/francoischalifour/medium-zoom */
307
- var I = Object.assign || function(e) {
308
- for (var t = 1; t < arguments.length; t++) {
309
- var r = arguments[t];
310
- for (var h in r)
311
- Object.prototype.hasOwnProperty.call(r, h) && (e[h] = r[h]);
312
- }
313
- return e;
314
- }, ee = function(t) {
315
- return t.tagName === "IMG";
316
- }, Je = function(t) {
317
- return NodeList.prototype.isPrototypeOf(t);
318
- }, te = function(t) {
319
- return t && t.nodeType === 1;
320
- }, me = function(t) {
321
- var r = t.currentSrc || t.src;
322
- return r.substr(-4).toLowerCase() === ".svg";
323
- }, ge = function(t) {
324
- try {
325
- return Array.isArray(t) ? t.filter(ee) : Je(t) ? [].slice.call(t).filter(ee) : te(t) ? [t].filter(ee) : typeof t == "string" ? [].slice.call(document.querySelectorAll(t)).filter(ee) : [];
326
- } catch {
327
- throw new TypeError(`The provided selector is invalid.
328
- Expects a CSS selector, a Node element, a NodeList or an array.
329
- See: https://github.com/francoischalifour/medium-zoom`);
330
- }
331
- }, Ge = function(t) {
332
- var r = document.createElement("div");
333
- return r.classList.add("medium-zoom-overlay"), r.style.background = t, r;
334
- }, Qe = function(t) {
335
- var r = t.getBoundingClientRect(), h = r.top, o = r.left, g = r.width, u = r.height, x = t.cloneNode(), _ = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, N = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
336
- return x.removeAttribute("id"), x.style.position = "absolute", x.style.top = h + _ + "px", x.style.left = o + N + "px", x.style.width = g + "px", x.style.height = u + "px", x.style.transform = "", x;
337
- }, F = function(t, r) {
338
- var h = I({
339
- bubbles: !1,
340
- cancelable: !1,
341
- detail: void 0
342
- }, r);
343
- if (typeof window.CustomEvent == "function")
344
- return new CustomEvent(t, h);
345
- var o = document.createEvent("CustomEvent");
346
- return o.initCustomEvent(t, h.bubbles, h.cancelable, h.detail), o;
347
- }, et = function e(t) {
348
- var r = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, h = window.Promise || function(a) {
349
- function n() {
350
- }
351
- a(n, n);
352
- }, o = function(a) {
353
- var n = a.target;
354
- if (n === G) {
355
- y();
356
- return;
357
- }
358
- k.indexOf(n) !== -1 && H({ target: n });
359
- }, g = function() {
360
- if (!(Z || !i.original)) {
361
- var a = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
362
- Math.abs(le - a) > m.scrollOffset && setTimeout(y, 150);
363
- }
364
- }, u = function(a) {
365
- var n = a.key || a.keyCode;
366
- (n === "Escape" || n === "Esc" || n === 27) && y();
367
- }, x = function() {
368
- var a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, n = a;
369
- if (a.background && (G.style.background = a.background), a.container && a.container instanceof Object && (n.container = I({}, m.container, a.container)), a.template) {
370
- var f = te(a.template) ? a.template : document.querySelector(a.template);
371
- n.template = f;
372
- }
373
- return m = I({}, m, n), k.forEach(function(z) {
374
- z.dispatchEvent(F("medium-zoom:update", {
375
- detail: { zoom: b }
376
- }));
377
- }), b;
378
- }, _ = function() {
379
- var a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
380
- return e(I({}, m, a));
381
- }, N = function() {
382
- for (var a = arguments.length, n = Array(a), f = 0; f < a; f++)
383
- n[f] = arguments[f];
384
- var z = n.reduce(function(s, R) {
385
- return [].concat(s, ge(R));
386
- }, []);
387
- return z.filter(function(s) {
388
- return k.indexOf(s) === -1;
389
- }).forEach(function(s) {
390
- k.push(s), s.classList.add("medium-zoom-image");
391
- }), J.forEach(function(s) {
392
- var R = s.type, T = s.listener, V = s.options;
393
- z.forEach(function(M) {
394
- M.addEventListener(R, T, V);
395
- });
396
- }), b;
397
- }, $ = function() {
398
- for (var a = arguments.length, n = Array(a), f = 0; f < a; f++)
399
- n[f] = arguments[f];
400
- i.zoomed && y();
401
- var z = n.length > 0 ? n.reduce(function(s, R) {
402
- return [].concat(s, ge(R));
403
- }, []) : k;
404
- return z.forEach(function(s) {
405
- s.classList.remove("medium-zoom-image"), s.dispatchEvent(F("medium-zoom:detach", {
406
- detail: { zoom: b }
407
- }));
408
- }), k = k.filter(function(s) {
409
- return z.indexOf(s) === -1;
410
- }), b;
411
- }, p = function(a, n) {
412
- var f = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
413
- return k.forEach(function(z) {
414
- z.addEventListener("medium-zoom:" + a, n, f);
415
- }), J.push({ type: "medium-zoom:" + a, listener: n, options: f }), b;
416
- }, v = function(a, n) {
417
- var f = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
418
- return k.forEach(function(z) {
419
- z.removeEventListener("medium-zoom:" + a, n, f);
420
- }), J = J.filter(function(z) {
421
- return !(z.type === "medium-zoom:" + a && z.listener.toString() === n.toString());
422
- }), b;
423
- }, B = function() {
424
- var a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, n = a.target, f = function() {
425
- var s = {
426
- width: document.documentElement.clientWidth,
427
- height: document.documentElement.clientHeight,
428
- left: 0,
429
- top: 0,
430
- right: 0,
431
- bottom: 0
432
- }, R = void 0, T = void 0;
433
- if (m.container)
434
- if (m.container instanceof Object)
435
- s = I({}, s, m.container), R = s.width - s.left - s.right - m.margin * 2, T = s.height - s.top - s.bottom - m.margin * 2;
436
- else {
437
- var V = te(m.container) ? m.container : document.querySelector(m.container), M = V.getBoundingClientRect(), re = M.width, ze = M.height, ye = M.left, be = M.top;
438
- s = I({}, s, {
439
- width: re,
440
- height: ze,
441
- left: ye,
442
- top: be
443
- });
444
- }
445
- R = R || s.width - m.margin * 2, T = T || s.height - m.margin * 2;
446
- var U = i.zoomedHd || i.original, xe = me(U) ? R : U.naturalWidth || R, we = me(U) ? T : U.naturalHeight || T, Q = U.getBoundingClientRect(), Re = Q.top, Se = Q.left, oe = Q.width, ae = Q.height, Ce = Math.min(Math.max(oe, xe), R) / oe, Ee = Math.min(Math.max(ae, we), T) / ae, ne = Math.min(Ce, Ee), ke = (-Se + (R - oe) / 2 + m.margin + s.left) / ne, Le = (-Re + (T - ae) / 2 + m.margin + s.top) / ne, de = "scale(" + ne + ") translate3d(" + ke + "px, " + Le + "px, 0)";
447
- i.zoomed.style.transform = de, i.zoomedHd && (i.zoomedHd.style.transform = de);
448
- };
449
- return new h(function(z) {
450
- if (n && k.indexOf(n) === -1) {
451
- z(b);
452
- return;
453
- }
454
- var s = function re() {
455
- Z = !1, i.zoomed.removeEventListener("transitionend", re), i.original.dispatchEvent(F("medium-zoom:opened", {
456
- detail: { zoom: b }
457
- })), z(b);
458
- };
459
- if (i.zoomed) {
460
- z(b);
461
- return;
462
- }
463
- if (n)
464
- i.original = n;
465
- else if (k.length > 0) {
466
- var R = k;
467
- i.original = R[0];
468
- } else {
469
- z(b);
470
- return;
471
- }
472
- if (i.original.dispatchEvent(F("medium-zoom:open", {
473
- detail: { zoom: b }
474
- })), le = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, Z = !0, i.zoomed = Qe(i.original), document.body.appendChild(G), m.template) {
475
- var T = te(m.template) ? m.template : document.querySelector(m.template);
476
- i.template = document.createElement("div"), i.template.appendChild(T.content.cloneNode(!0)), document.body.appendChild(i.template);
477
- }
478
- if (i.original.parentElement && i.original.parentElement.tagName === "PICTURE" && i.original.currentSrc && (i.zoomed.src = i.original.currentSrc), document.body.appendChild(i.zoomed), window.requestAnimationFrame(function() {
479
- document.body.classList.add("medium-zoom--opened");
480
- }), i.original.classList.add("medium-zoom-image--hidden"), i.zoomed.classList.add("medium-zoom-image--opened"), i.zoomed.addEventListener("click", y), i.zoomed.addEventListener("transitionend", s), i.original.getAttribute("data-zoom-src")) {
481
- i.zoomedHd = i.zoomed.cloneNode(), i.zoomedHd.removeAttribute("srcset"), i.zoomedHd.removeAttribute("sizes"), i.zoomedHd.removeAttribute("loading"), i.zoomedHd.src = i.zoomed.getAttribute("data-zoom-src"), i.zoomedHd.onerror = function() {
482
- clearInterval(V), console.warn("Unable to reach the zoom image target " + i.zoomedHd.src), i.zoomedHd = null, f();
483
- };
484
- var V = setInterval(function() {
485
- i.zoomedHd.complete && (clearInterval(V), i.zoomedHd.classList.add("medium-zoom-image--opened"), i.zoomedHd.addEventListener("click", y), document.body.appendChild(i.zoomedHd), f());
486
- }, 10);
487
- } else if (i.original.hasAttribute("srcset")) {
488
- i.zoomedHd = i.zoomed.cloneNode(), i.zoomedHd.removeAttribute("sizes"), i.zoomedHd.removeAttribute("loading");
489
- var M = i.zoomedHd.addEventListener("load", function() {
490
- i.zoomedHd.removeEventListener("load", M), i.zoomedHd.classList.add("medium-zoom-image--opened"), i.zoomedHd.addEventListener("click", y), document.body.appendChild(i.zoomedHd), f();
491
- });
492
- } else
493
- f();
494
- });
495
- }, y = function() {
496
- return new h(function(a) {
497
- if (Z || !i.original) {
498
- a(b);
499
- return;
500
- }
501
- var n = function f() {
502
- i.original.classList.remove("medium-zoom-image--hidden"), document.body.removeChild(i.zoomed), i.zoomedHd && document.body.removeChild(i.zoomedHd), document.body.removeChild(G), i.zoomed.classList.remove("medium-zoom-image--opened"), i.template && document.body.removeChild(i.template), Z = !1, i.zoomed.removeEventListener("transitionend", f), i.original.dispatchEvent(F("medium-zoom:closed", {
503
- detail: { zoom: b }
504
- })), i.original = null, i.zoomed = null, i.zoomedHd = null, i.template = null, a(b);
505
- };
506
- Z = !0, document.body.classList.remove("medium-zoom--opened"), i.zoomed.style.transform = "", i.zoomedHd && (i.zoomedHd.style.transform = ""), i.template && (i.template.style.transition = "opacity 150ms", i.template.style.opacity = 0), i.original.dispatchEvent(F("medium-zoom:close", {
507
- detail: { zoom: b }
508
- })), i.zoomed.addEventListener("transitionend", n);
509
- });
510
- }, H = function() {
511
- var a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, n = a.target;
512
- return i.original ? y() : B({ target: n });
513
- }, E = function() {
514
- return m;
515
- }, ie = function() {
516
- return k;
517
- }, ve = function() {
518
- return i.original;
519
- }, k = [], J = [], Z = !1, le = 0, m = r, i = {
520
- original: null,
521
- zoomed: null,
522
- zoomedHd: null,
523
- template: null
524
- // If the selector is omitted, it's replaced by the options
525
- };
526
- Object.prototype.toString.call(t) === "[object Object]" ? m = t : (t || typeof t == "string") && N(t), m = I({
527
- margin: 0,
528
- background: "#fff",
529
- scrollOffset: 40,
530
- container: null,
531
- template: null
532
- }, m);
533
- var G = Ge(m.background);
534
- document.addEventListener("click", o), document.addEventListener("keyup", u), document.addEventListener("scroll", g), window.addEventListener("resize", y);
535
- var b = {
536
- open: B,
537
- close: y,
538
- toggle: H,
539
- update: x,
540
- clone: _,
541
- attach: N,
542
- detach: $,
543
- on: p,
544
- off: v,
545
- getOptions: E,
546
- getImages: ie,
547
- getZoomedImage: ve
548
- };
549
- return b;
550
- };
551
- function tt(e, t) {
552
- t === void 0 && (t = {});
553
- var r = t.insertAt;
554
- if (!(typeof document > "u")) {
555
- var h = document.head || document.getElementsByTagName("head")[0], o = document.createElement("style");
556
- o.type = "text/css", r === "top" && h.firstChild ? h.insertBefore(o, h.firstChild) : h.appendChild(o), o.styleSheet ? o.styleSheet.cssText = e : o.appendChild(document.createTextNode(e));
557
- }
558
- }
559
- var it = ".medium-zoom-overlay{position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .3s;will-change:opacity}.medium-zoom--opened .medium-zoom-overlay{cursor:pointer;cursor:zoom-out;opacity:1}.medium-zoom-image{cursor:pointer;cursor:zoom-in;transition:transform .3s cubic-bezier(.2,0,.2,1)!important}.medium-zoom-image--hidden{visibility:hidden}.medium-zoom-image--opened{position:relative;cursor:pointer;cursor:zoom-out;will-change:transform}";
560
- tt(it);
561
- const rt = he`:host([effect=jump]) .container,:host([effect=text-reveal]) .container,:host([effect=zoom]) .container{overflow:initial}:host([effect=jump]) .highlighter{transition:all var(--transition-duration,.5s) var(--easing,linear), transform var(--transition-transform-duration,.5s) var(--easing,linear)}:host([effect=jump]) .highlighter:hover{transform:translateY(calc(var(--highlightable-item-effect-jump-distance,0) * -1))}.highlighter--effect-text-reveal,:host([effect=zoom]) .highlighter--zoom-style-within-borders{overflow:hidden}:host([effect=zoom][zoom-style=pop-out]) .highlighter:hover{z-index:3;animation:none}:host([effect=zoom][zoom-style=pop-out]) .highlighter:not(:hover){animation:drop-z var(--transition-transform-duration) forwards}@keyframes drop-z{0%{z-index:2}99%{z-index:2}to{z-index:0}}.highlighter--can-hover:hover:after,.highlighter--selected:after,.highlighter--color-overlay:after{content:"";pointer-events:none;width:100%;height:100%;transition:all var(--transition-duration,.5s) var(--easing,linear);position:absolute;top:0;left:0}.highlighter--can-hover:hover:after,.highlighter--selected:after{outline:2px solid var(--cx-color-primary)}.highlighter--border:hover .image{border-color:var(--highlightable-item-highlight-border-color,var(--cx-color-primary))}.highlighter--color-overlay:after{border-radius:var(--border-radius,none)}.highlighter--color-overlay:hover:after{background-color:var(--highlightable-item-highlight-color-overlay-color,transparent)}.highlighter--drop-shadow:hover .image{box-shadow:var(--highlightable-item-highlight-drop-shadow,none)}.highlighter--background:hover .highlightable-item{--content-background-color:var(--highlightable-item-highlight-background,transparent);--highlightable-item-background-color:var(--highlightable-item-highlight-background,transparent)}.highlighter--opacity{opacity:var(--highlightable-item-highlight-opacity,1)}:host([effect=zoom][zoom-style=within-borders]) .highlighter .image,:host([effect=zoom][zoom-style=pop-out]) .highlighter{transition:transform var(--transition-transform-duration,.5s) var(--easing,linear)}:host([effect=zoom][zoom-style=within-borders]) .highlighter:hover .image,:host([effect=zoom][zoom-style=pop-out]) .highlighter:hover{transform:scale(var(--highlightable-item-effect-zoom-scale,1))}.highlightable-item{transition:background-color var(--transition-duration,.5s) var(--easing,linear), border-color var(--transition-duration,.5s) var(--easing,linear), box-shadow var(--transition-duration,.5s) var(--easing,linear), opacity var(--transition-duration,.5s) var(--easing,linear), transform var(--transition-transform-duration,.5s) var(--easing,linear), visibility var(--transition-duration,.5s) var(--easing,linear)}`, ot = he`
562
- :host {
563
- --justify-content: flex-start;
564
- --border-radius: 0px;
565
- --border: 0px;
566
- --padding: 0px;
567
- --details-color: light-dark(
568
- var(--cx-color-neutral-1000),
569
- var(--cx-color-neutral-0)
570
- );
571
- --details-font-size: 16px;
572
- --details-letter-spacing: 0px;
573
- --details-line-height: 1.5;
574
- --details-text-align: left;
575
- --easing: ease-in-out;
576
- --header-text-align: left;
577
- --header-font-size: 24px;
578
- --header-line-height: 1.5;
579
- --header-letter-spacing: 0px;
580
- --header-color: light-dark(
581
- var(--cx-color-neutral-1000),
582
- var(--cx-color-neutral-0)
583
- );
584
- --content-background-color: light-dark(#00000070, #00000070);
585
- --content-margin: 0px;
586
- --content-min-height: 50px;
587
- --content-padding: 5px 10px 5px 10px;
588
- --content-width: 200px;
589
- --content-border: 0;
590
- --content-border-radius: 0px;
591
- --transition-duration: 0.5s;
592
- --image-min-width: 0px;
593
- --image-max-width: 1000px;
594
- --image-min-height: 0px;
595
- --image-max-height: 500px;
596
- --highlightable-item-highlight-border-color: var(--cx-color-primary);
597
- --highlightable-item-highlight-color-overlay-color: transparent;
598
- --highlightable-item-highlight-drop-shadow: 0 0 0 0
599
- light-dark(transparent, transparent);
600
- --highlightable-item-highlight-background: transparent;
601
- --highlightable-item-highlight-siblings-fade-out-opacity: 0.5;
602
- --highlightable-item-effect-zoom-scale: 1.1;
603
- --highlightable-item-effect-zoom-overflow: hidden;
604
- --highlightable-item-effect-text-reveal-distance: 30px;
605
- --highlightable-item-effect-jump-distance: 10px;
606
- --transition-transform-duration: 0.5s;
607
-
608
- display: flex;
609
- width: var(--width, 100%);
610
- height: var(--height, auto);
611
- max-height: 100%;
612
- }
613
-
614
- ${rt}
615
-
616
- :host([block]) {
617
- width: 100%;
618
- }
619
-
620
- :host([height-mode='auto']) {
621
- height: auto;
622
- }
623
-
624
- .container {
625
- container-name: asset-container;
626
- container-type: inline-size;
627
- padding: var(--padding, 0px);
628
- position: relative;
629
- width: 100%;
630
- max-height: 100%;
631
- border-color: var(--border-color, transparent);
632
- border-style: var(--border-style, solid);
633
- border-width: var(--border-width, 0px);
634
- overflow: hidden;
635
- }
636
-
637
- .container:has(.highlighter:focus-visible) {
638
- outline: var(--cx-focus-ring);
639
- outline-offset: var(--cx-focus-ring-offset);
640
- }
641
-
642
- .container--empty {
643
- height: var(--height, 300px);
644
- min-height: var(--min-height, 100%);
645
- }
646
-
647
- .container--empty::before {
648
- align-items: center;
649
- background-color: #000000;
650
- color: #ffffff;
651
- content: attr(data-empty-label);
652
- display: flex;
653
- font-family: var(--cx-font-sans);
654
- font-size: clamp(
655
- var(--cx-font-size-x-small),
656
- 4cqw,
657
- var(--cx-font-size-large)
658
- );
659
- font-weight: var(--cx-font-weight-semibold);
660
- height: 100%;
661
- justify-content: center;
662
- line-height: 1;
663
- text-align: center;
664
- text-shadow: 0.05em 0.05em 0.1em #000;
665
- vertical-align: middle;
666
- width: 100%;
667
- }
668
-
669
- .container--empty.container--loading::before {
670
- content: '';
671
- }
672
-
673
- .container--resizing {
674
- outline: 2px dashed var(--cx-color-primary);
675
- user-select: none;
676
- }
677
-
678
- .highlighter {
679
- position: relative;
680
- width: 100%;
681
- height: 100%;
682
- }
683
-
684
- .highlighter:focus-visible {
685
- outline: none;
686
- }
687
-
688
- .highlightable-item {
689
- background-color: var(--highlightable-item-background-color);
690
- display: flex;
691
- align-items: center;
692
- justify-content: var(--justify-content);
693
- width: 100%;
694
- height: 100%;
695
- }
696
-
697
- .highlightable-item--has-action {
698
- cursor: pointer;
699
- }
700
-
701
- .image {
702
- border-radius: var(--border-radius);
703
- border: var(--border) solid;
704
- display: block;
705
- transition: inherit;
706
- }
707
-
708
- .image--fill {
709
- object-fit: fill;
710
- }
711
-
712
- .image--contain {
713
- object-fit: contain;
714
- max-width: 100%;
715
- max-height: 100%;
716
- }
717
-
718
- .image--cover {
719
- object-fit: cover;
720
- width: 100%;
721
- height: 100%;
722
- }
723
-
724
- .image--none {
725
- object-fit: none;
726
- }
727
-
728
- .image--scale-down {
729
- object-fit: scale-down;
730
- }
731
-
732
- .image--hidden {
733
- display: none;
734
- }
735
-
736
- .image--can-zoom {
737
- cursor: zoom-in;
738
- }
739
-
740
- .image--has-action {
741
- cursor: pointer;
742
- }
743
-
744
- .image--contain.image--landscape {
745
- width: 100%;
746
- height: auto;
747
- }
748
-
749
- .image--contain.image--portrait {
750
- width: auto;
751
- height: 100%;
752
- }
753
-
754
- .popup-container::part(popup) {
755
- z-index: -1;
756
- }
757
-
758
- .zoom-image {
759
- width: 100%;
760
- height: auto;
761
- object-fit: cover;
762
- opacity: 1;
763
- }
764
-
765
- .zoom-image-container {
766
- position: absolute;
767
- top: 0;
768
- left: 0;
769
- width: 100%;
770
- height: 100%;
771
- display: flex;
772
- justify-content: center;
773
- align-items: center;
774
- z-index: -1;
775
- }
776
-
777
- .zoom-image--hidden {
778
- opacity: 0;
779
- }
780
-
781
- .medium-zoom-image--hidden {
782
- opacity: 0;
783
- }
784
-
785
- .skeleton {
786
- position: absolute;
787
- top: 0;
788
- left: 0;
789
- width: 100%;
790
- height: 100%;
791
- }
792
-
793
- .skeleton cx-skeleton {
794
- width: 100%;
795
- height: 100%;
796
- --border-radius: 0;
797
- }
798
-
799
- .fallback {
800
- position: relative;
801
- }
802
-
803
- .fallback cx-icon {
804
- --font-size: var(--cx-font-size-4x-large);
805
- }
806
- `;
807
- var at = Object.defineProperty, nt = Object.getOwnPropertyDescriptor, c = (e, t, r, h) => {
808
- for (var o = h > 1 ? void 0 : h ? nt(t, r) : t, g = e.length - 1, u; g >= 0; g--)
809
- (u = e[g]) && (o = (h ? u(t, r, o) : u(o)) || o);
810
- return h && o && at(t, r, o), o;
811
- };
812
- let l = class extends D {
813
- constructor() {
814
- super(...arguments), this.localize = new Ae(this), this._retryCount = 0, this._retryTimer = null, this.isLoaded = !1, this.isError = !1, this._retryIndex = 0, this.src = "", this.placeholder = "", this.alt = "", this.objectFit = $e.Fill, this.skeleton = !1, this.fallback = !1, this.canZoom = !1, this.loading = !1, this.block = !1, this.htmlLoading = "lazy", this.clickHandlerType = Y.Automatic, this.retryOnError = !1, this.maxRetries = 3, this.isZoomed = !1, this.imageRatio = 1, this.parsedAlt = "", this.parsedAltDarkMode = "", this.zoom = null, this.lastPatchedWidth = null;
815
- }
816
- get currentAltValue() {
817
- return this.alt;
818
- }
819
- get currentSrc() {
820
- return this.src;
821
- }
822
- get highlighterTabindex() {
823
- return this.hasZoomAction && this.clickHandlerType === Y.Automatic ? "0" : void 0;
824
- }
825
- get highlighterRole() {
826
- return this.hasZoomAction && this.clickHandlerType === Y.Automatic ? "button" : "img";
827
- }
828
- get highlighterClass() {
829
- return {
830
- "highlightable-item": !0,
831
- "highlightable-item--effect-text-reveal": this.effect === q.TextReveal,
832
- [`highlightable-item--text-reveal-style-${this.textRevealStyle}`]: !0
833
- };
834
- }
835
- get imageClass() {
836
- let e = "landscape", t = this.ratio;
837
- const r = this.width.endsWith("%") ? this.clientWidth : Number.parseFloat(this.width), h = this.isResizing ? this.resizeSize.width : r, o = this.isResizing ? this.resizeSize.height : Number.parseFloat(this.height);
838
- return h && o && (t = h / o), t > this.imageRatio && (e = "portrait"), {
839
- image: !0,
840
- [`image--${this.objectFit}`]: !0,
841
- [`image--${e}`]: !0,
842
- [`image--height-${this.heightMode}`]: !0,
843
- "image--can-zoom": this.canZoom,
844
- "image--has-action": this.hasZoomAction,
845
- "image--hidden": !this.currentSrc && !this.placeholder || this.isError && this.fallback
846
- };
847
- }
848
- /**
849
- * Whether the image have zoom action.
850
- */
851
- get hasZoomAction() {
852
- return this.canZoom;
853
- }
854
- runFirstUpdated() {
855
- this.theme = this.getTheme();
856
- }
857
- runConnectedCallback() {
858
- this.hasUpdated && this.requestUpdate("canZoom");
859
- }
860
- disconnectedCallback() {
861
- super.disconnectedCallback(), this.zoom && this.zoom.detach(), this.clearRetryTimer();
862
- }
863
- /**
864
- * Handle mouse enter event.
865
- */
866
- handleMouseEnter() {
867
- this.isHovering = !0;
868
- }
869
- /**
870
- * Handle mouse leave event.
871
- */
872
- handleMouseLeave() {
873
- this.isHovering = !1;
874
- }
875
- /**
876
- * If image is currently zoomed, close the zoom.
877
- */
878
- handleBlur() {
879
- this.isZoomed && this.zoom?.close();
880
- }
881
- handleKeyDown(e) {
882
- e.target === this.highlighterElement && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.highlighterElement.click());
883
- }
884
- async handleCanZoomChange() {
885
- await this.updateComplete, this.hasZoomAction ? this.initZoom() : (this.zoom?.detach(), this.zoom = null);
886
- }
887
- async handleObjectFitChange() {
888
- await this.updateComplete, this.requestUpdate();
889
- }
890
- handleSrcChange() {
891
- this.isLoaded = !1, this.isError = !1, this._retryCount = 0, this._retryIndex = 0, this.clearRetryTimer();
892
- }
893
- clearRetryTimer() {
894
- this._retryTimer !== null && (clearTimeout(this._retryTimer), this._retryTimer = null);
895
- }
896
- scheduleRetry() {
897
- const e = Math.min(1e3 * Math.pow(2, this._retryCount - 1), 1e4);
898
- this._retryTimer = setTimeout(() => {
899
- this._retryTimer = null, this._retryIndex += 1;
900
- }, e);
901
- }
902
- async initZoom() {
903
- this.zoomImageElement && !this.zoom && this.isLoaded && (this.zoom = et(this.zoomImageElement, {
904
- background: "light-dark(rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.8))",
905
- margin: 0,
906
- scrollOffset: 0
907
- }), this.zoom.on("open", () => {
908
- this.emit("cx-image-zoom-open"), this.isZoomed = !0;
909
- }), this.zoom.on("close", () => {
910
- this.emit("cx-image-zoom-close"), this.isZoomed = !1;
911
- }));
912
- }
913
- handleLoad(e) {
914
- const t = e?.currentTarget ?? this.imageElement;
915
- if (!t)
916
- return;
917
- const { naturalHeight: r, naturalWidth: h } = t;
918
- this.imageRatio = h / r, this.isLoaded || (this.emit("cx-load"), this.isLoaded = !0, this.isError = !1);
919
- }
920
- handleError() {
921
- if (this.retryOnError && this._retryCount < this.maxRetries) {
922
- this._retryCount += 1, this.scheduleRetry();
923
- return;
924
- }
925
- this.emit("cx-error"), this.isLoaded = !0, this.isError = !0;
926
- }
927
- handleSizeChange() {
928
- const e = this.isResizing ? `${this.resizeSize.width}px` : this.width, t = this.isResizing ? `${this.resizeSize.height}px` : this.height;
929
- this.width || this.isResizing ? this.style.setProperty("--width", e) : this.style.removeProperty("--width"), this.height || this.isResizing ? this.style.setProperty("--height", t) : this.style.removeProperty("--height");
930
- }
931
- handleResize(e) {
932
- const { entries: t } = e.detail;
933
- for (const r of t)
934
- r.target === this.highlighterElement && this.width.endsWith("%") && !this.isResizing && Math.abs(r.contentRect.width - (this.lastPatchedWidth ?? 0)) > 1 && this.updateLastPatchedWidth(r.contentRect.width);
935
- }
936
- updateLastPatchedWidth(e) {
937
- this.lastPatchedWidth = e, this.requestUpdate();
938
- }
939
- /**
940
- * Support CMS5 click action for the image.
941
- */
942
- handleClickAction(e) {
943
- !(e.target instanceof HTMLElement) || this.clickHandlerType === Y.Manual || this.canZoom && this.openZoom();
944
- }
945
- updated(e) {
946
- super.updated(e), (e.has("width") || e.has("height") || e.has("resizeSize")) && this.handleSizeChange();
947
- }
948
- openZoom() {
949
- this.zoom && this.zoom.open();
950
- }
951
- renderContent() {
952
- const e = this.currentSrc, t = this.currentAltValue;
953
- return A`<div part="content" slot="anchor" class=${j(this.highlighterClass)}>${Ke(
954
- this._retryIndex,
955
- A`<img part="image" class=${j(this.imageClass)} src=${e || this.placeholder} alt=${t} aria-label=${t} crossorigin="anonymous" @load=${this.handleLoad} @error=${this.handleError} loading=${this.htmlLoading}>`
956
- )}</div>`;
957
- }
958
- render() {
959
- const e = this.hasZoomAction, t = this.currentAltValue, r = !this.currentSrc && !this.placeholder;
960
- return A`<div part="base" class=${j({
961
- container: !0,
962
- "container--empty": r,
963
- "container--loading": this.loading,
964
- "container--resizing": this.resizable && this.isResizeActive
965
- })} style=${_e({
966
- "--easing": this.easeCSSVariable
967
- })} data-empty-label=${this.localize.term("emptyImage")} @click=${this.startResizing} @keydown=${this.handleKeyDown}><cx-resize-observer @cx-resize=${this.handleResize}><div part="highlighter" tabindex=${Be(this.highlighterTabindex)} role=${this.highlighterRole} aria-label=${t} aria-roledescription=${this.localize.term("image")} class=${j(r ? {} : this.getHighlighterClass())} @click=${this.handleClickAction} @mouseenter=${this.handleMouseEnter} @mouseleave=${this.handleMouseLeave} @blur=${this.handleBlur}>${P(
968
- r,
969
- () => ue,
970
- () => P(
971
- this.effect === q.Jump || this.effect === q.Zoom,
972
- () => A`<cx-popup class="popup-container" strategy="absolute" active placement="center" sync="both">${this.renderContent()}</cx-popup>`,
973
- () => this.renderContent()
974
- )
975
- )}<div class="zoom-image-container">${P(
976
- e,
977
- () => A`<img part="zoom-image" class=${j({
978
- "zoom-image": !0,
979
- "zoom-image--hidden": !this.isZoomed
980
- })} src=${this.currentSrc || this.placeholder} alt="" aria-hidden="true" decoding="async" draggable="false" crossorigin="anonymous">`
981
- )}</div>${P(
982
- this.skeleton && !this.isLoaded && !this.isError || this.loading,
983
- () => A`<slot name="skeleton" part="skeleton"><div class=${j({
984
- skeleton: !0
985
- })}><cx-skeleton effect="sheen"></cx-skeleton></div></slot>`
986
- )}
987
- ${P(this.isError && this.fallback, () => A`<slot name="fallback" part="fallback"><cx-space class=${j({ fallback: !0 })} direction="column" align-items="center" justify-content="center"><cx-icon name="hide_image" part="fallback-icon"> </cx-icon></cx-space></slot>`)}</div></cx-resize-observer>${P(this.resizable && this.isResizeActive, () => this.renderResizer())}</div>`;
988
- }
989
- };
990
- l.styles = [Te, Xe, ot];
991
- l.dependencies = {
992
- "cx-icon": Ne,
993
- "cx-popup": Ze,
994
- "cx-resize-observer": Ve,
995
- "cx-skeleton": Pe,
996
- "cx-space": Fe
997
- };
998
- c([
999
- K(".image")
1000
- ], l.prototype, "imageElement", 2);
1001
- c([
1002
- K(".zoom-image")
1003
- ], l.prototype, "zoomImageElement", 2);
1004
- c([
1005
- K(".highlighter")
1006
- ], l.prototype, "highlighterElement", 2);
1007
- c([
1008
- L()
1009
- ], l.prototype, "isLoaded", 2);
1010
- c([
1011
- L()
1012
- ], l.prototype, "isError", 2);
1013
- c([
1014
- L()
1015
- ], l.prototype, "_retryIndex", 2);
1016
- c([
1017
- d({ reflect: !0, type: String })
1018
- ], l.prototype, "src", 2);
1019
- c([
1020
- d({ reflect: !0, type: String })
1021
- ], l.prototype, "placeholder", 2);
1022
- c([
1023
- d({ reflect: !0, type: String })
1024
- ], l.prototype, "alt", 2);
1025
- c([
1026
- d({ attribute: "object-fit", reflect: !0 })
1027
- ], l.prototype, "objectFit", 2);
1028
- c([
1029
- d({ reflect: !0, type: Boolean })
1030
- ], l.prototype, "skeleton", 2);
1031
- c([
1032
- d({ reflect: !0, type: Boolean })
1033
- ], l.prototype, "fallback", 2);
1034
- c([
1035
- d({ attribute: "can-zoom", reflect: !0, type: Boolean })
1036
- ], l.prototype, "canZoom", 2);
1037
- c([
1038
- d({ reflect: !0, type: Boolean })
1039
- ], l.prototype, "loading", 2);
1040
- c([
1041
- d({ reflect: !0, type: Boolean })
1042
- ], l.prototype, "block", 2);
1043
- c([
1044
- d({ attribute: "html-loading", reflect: !0, type: String })
1045
- ], l.prototype, "htmlLoading", 2);
1046
- c([
1047
- d({ attribute: "click-handler-type", reflect: !0, type: String })
1048
- ], l.prototype, "clickHandlerType", 2);
1049
- c([
1050
- d({ attribute: "retry-on-error", type: Boolean })
1051
- ], l.prototype, "retryOnError", 2);
1052
- c([
1053
- d({ attribute: "max-retries", type: Number })
1054
- ], l.prototype, "maxRetries", 2);
1055
- c([
1056
- L()
1057
- ], l.prototype, "isZoomed", 2);
1058
- c([
1059
- L()
1060
- ], l.prototype, "imageRatio", 2);
1061
- c([
1062
- L()
1063
- ], l.prototype, "parsedAlt", 2);
1064
- c([
1065
- L()
1066
- ], l.prototype, "parsedAltDarkMode", 2);
1067
- c([
1068
- X("isLoaded"),
1069
- X("canZoom", { waitUntilFirstUpdate: !0 })
1070
- ], l.prototype, "handleCanZoomChange", 1);
1071
- c([
1072
- X("objectFit", { waitUntilFirstUpdate: !0 })
1073
- ], l.prototype, "handleObjectFitChange", 1);
1074
- c([
1075
- X("src"),
1076
- X("srcDarkMode")
1077
- ], l.prototype, "handleSrcChange", 1);
1078
- c([
1079
- Oe(100)
1080
- ], l.prototype, "updateLastPatchedWidth", 1);
1081
- l = c([
1082
- We("cx-image")
1083
- ], l);
1084
- export {
1085
- l as C,
1086
- Ue as H,
1087
- D as R,
1088
- S as a,
1089
- q as b,
1090
- Y as c,
1091
- fe as d,
1092
- pe as e,
1093
- se as f,
1094
- Xe as r
1095
- };