@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.
- package/library/chunks/{asset.CtL7ACp7.js → asset.CCjWpDnd.js} +2 -2
- package/library/chunks/{button.DfRnA70F.js → button.B8q9TnbJ.js} +1 -1
- package/library/chunks/{color-swatch-group.BVPz-gma.js → color-swatch-group.mptrPb-B.js} +5 -5
- package/library/chunks/{color-swatch.GsiCvj1n.js → color-swatch.Dhk54Nx0.js} +1 -1
- package/library/chunks/{confirm-popover.PiSCZY6-.js → confirm-popover.DNmZ61WM.js} +3 -3
- package/library/chunks/{content-builder.CcgZciZN.js → content-builder.BAhOkdZ-.js} +1 -1
- package/library/chunks/{dialog.BTU6B2_4.js → dialog.BlHQ-Sh1.js} +2 -2
- package/library/chunks/{dot-pagination.BzsMmgef.js → dot-pagination.BMlLpcfR.js} +1 -1
- package/library/chunks/{file-on-demand.DCxabV6T.js → file-on-demand.Bi_7NCZZ.js} +202 -211
- package/library/chunks/{folder-select.BM7yeAsU.js → folder-select.CDqz69bO.js} +3 -3
- package/library/chunks/{header.B5C9hZiO.js → header.yC7IkgNn.js} +1 -1
- package/library/chunks/{i18n.DK1uYlJT.js → i18n.DmmFsjwP.js} +7 -2
- package/library/chunks/{icon-button.CN0NGNQx.js → icon-button.CHh2iNJJ.js} +1 -1
- package/library/chunks/{iframe.BsLEwsvI.js → iframe.Dd2ON7ug.js} +1 -1
- package/library/chunks/image.CR_LHEaY.js +821 -0
- package/library/chunks/{list-editor.DqI-Aj2b.js → list-editor.C-1YI7Bb.js} +15 -14
- package/library/chunks/{option.B7SoEb_q.js → option.CdZHtENS.js} +1 -1
- package/library/chunks/{pagination.BJrZCqaj.js → pagination.CDCYbCV4.js} +4 -4
- package/library/chunks/resizable-component.styles.sAhMVN1H.js +283 -0
- package/library/chunks/{responsive.Oz9HWjyQ.js → responsive._tydujAy.js} +1 -1
- package/library/chunks/{tab-group.DpyBG0JQ.js → tab-group.DtGFedcf.js} +4 -4
- package/library/chunks/{table.DQqei6Sh.js → table.kjsxIRt-.js} +5 -5
- package/library/chunks/{tree.DAiWVFiY.js → tree.D__u64uY.js} +1 -1
- package/library/chunks/wavesurfer.esm.Cwi1pz64.js +1276 -0
- package/library/components/alert.js +2 -2
- package/library/components/asset-link-format.js +5 -5
- package/library/components/atoms.js +163 -161
- package/library/components/audio.d.ts +3 -0
- package/library/components/audio.js +237 -0
- package/library/components/border-input-group.js +1 -1
- package/library/components/breadcrumb.js +1 -1
- package/library/components/button.js +2 -2
- package/library/components/color-picker.js +2 -2
- package/library/components/color-swatch-group.js +6 -6
- package/library/components/color-swatch.js +2 -2
- package/library/components/confirm-popover.js +4 -4
- package/library/components/copy-button.js +1 -1
- package/library/components/corner-position-input-group.js +2 -2
- package/library/components/details.js +1 -1
- package/library/components/dialog.js +3 -3
- package/library/components/dot-pagination.js +2 -2
- package/library/components/drawer.js +2 -2
- package/library/components/dropdown.js +1 -1
- package/library/components/dynamic-select.js +4 -4
- package/library/components/e-chart.js +1 -1
- package/library/components/element-clamp.js +2 -2
- package/library/components/file-on-demand.js +9 -9
- package/library/components/folder-select.js +3 -3
- package/library/components/format-bytes.js +1 -1
- package/library/components/format-date.js +1 -1
- package/library/components/format-number.js +1 -1
- package/library/components/format-time.js +1 -1
- package/library/components/header.js +2 -2
- package/library/components/icon-button.js +2 -2
- package/library/components/iframe.js +2 -2
- package/library/components/image-comparer.js +1 -1
- package/library/components/image.js +4 -3
- package/library/components/input.js +3 -3
- package/library/components/line-clamp.js +1 -1
- package/library/components/list-editor.js +6 -6
- package/library/components/masonry.js +2 -2
- package/library/components/menu-item.js +1 -1
- package/library/components/menu.js +1 -1
- package/library/components/molecules.js +4 -4
- package/library/components/option.js +2 -2
- package/library/components/organisms.js +2 -2
- package/library/components/pagination.js +5 -5
- package/library/components/popup.js +1 -1
- package/library/components/position-picker.js +1 -1
- package/library/components/progress-bar.js +1 -1
- package/library/components/progress-ring.js +1 -1
- package/library/components/range.js +1 -1
- package/library/components/rating.js +1 -1
- package/library/components/relative-time.js +1 -1
- package/library/components/select.js +2 -2
- package/library/components/share-option-list.js +1 -1
- package/library/components/sidebar.js +1 -1
- package/library/components/size-input-group.js +2 -2
- package/library/components/spinner.js +1 -1
- package/library/components/split-panel.js +1 -1
- package/library/components/tab-group.js +4 -4
- package/library/components/tab.js +2 -2
- package/library/components/table.js +5 -5
- package/library/components/tag.js +2 -2
- package/library/components/tooltip.js +1 -1
- package/library/components/tree-item.js +2 -2
- package/library/components/tree.js +2 -2
- package/library/components/typeface.js +2 -2
- package/library/components/types.js +16904 -16626
- package/library/components/video.js +8 -7
- package/library/package.json +1 -1
- package/library/packages/atoms/src/components/audio/audio.d.ts +114 -0
- package/library/packages/atoms/src/components/audio/audio.styles.d.ts +2 -0
- package/library/packages/atoms/src/index.d.ts +1 -0
- package/library/packages/events/src/cx-book-reader-event.d.ts +9 -0
- package/library/packages/events/src/events.d.ts +1 -0
- package/library/packages/molecules/src/graph-view/react/constant.d.ts +1 -1
- package/library/packages/organisms/src/asset-transformation-dialog/asset-transformation-dialog.d.ts +4 -0
- package/library/packages/organisms/src/content-builder/configs/audio.d.ts +26 -0
- package/library/packages/organisms/src/content-builder/configs/index.d.ts +1 -0
- package/library/packages/organisms/src/content-builder/configs-controller.d.ts +28 -0
- package/library/packages/organisms/src/content-builder/content-builder-config.d.ts +3 -0
- package/library/packages/organisms/src/content-builder/plugins/audio.d.ts +5 -0
- package/library/packages/organisms/src/content-builder/plugins/index.d.ts +1 -0
- package/library/packages/organisms/src/content-builder/styleController.d.ts +1 -1
- package/library/packages/organisms/src/file-on-demand/file-on-demand.constants.d.ts +0 -1
- package/library/packages/types/src/content-builder.d.ts +3 -2
- package/library/packages/utils/src/custom-element/i18n.d.ts +6 -1
- package/library/react-web-component.d.ts +273 -93
- package/library/utils.js +3 -3
- package/package.json +1 -1
- 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
|
-
};
|