@getflip/swirl-components 0.234.0 → 0.235.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components.json +1 -1
- package/dist/cjs/swirl-lightbox.cjs.entry.js +19 -12
- package/dist/cjs/swirl-select.cjs.entry.js +3 -2
- package/dist/cjs/swirl-tree-view-item.cjs.entry.js +9 -3
- package/dist/collection/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/collection/components/swirl-lightbox/swirl-lightbox.js +19 -12
- package/dist/collection/components/swirl-lightbox/swirl-lightbox.spec.js +22 -0
- package/dist/collection/components/swirl-select/swirl-select.js +3 -2
- package/dist/collection/components/swirl-tree-view-item/swirl-tree-view-item.js +9 -3
- package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/components/swirl-lightbox.js +19 -12
- package/dist/components/swirl-select.js +3 -2
- package/dist/components/swirl-tree-view-item.js +9 -3
- package/dist/esm/swirl-lightbox.entry.js +19 -12
- package/dist/esm/swirl-select.entry.js +3 -2
- package/dist/esm/swirl-tree-view-item.entry.js +9 -3
- package/dist/swirl-components/p-1cdc3ac1.entry.js +1 -0
- package/dist/swirl-components/p-37a4754f.entry.js +1 -0
- package/dist/swirl-components/p-3e52c464.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/package.json +1 -1
- package/dist/swirl-components/p-7e7f964f.entry.js +0 -1
- package/dist/swirl-components/p-9f4d5705.entry.js +0 -1
- package/dist/swirl-components/p-fc9b30f6.entry.js +0 -1
|
@@ -62,6 +62,9 @@ const SwirlLightbox$1 = /*@__PURE__*/ proxyCustomElement(class SwirlLightbox ext
|
|
|
62
62
|
this.setSlideAttributes();
|
|
63
63
|
};
|
|
64
64
|
this.onPointerDown = (event) => {
|
|
65
|
+
if (this.slides.length <= 1) {
|
|
66
|
+
return;
|
|
67
|
+
}
|
|
65
68
|
this.dragging = true;
|
|
66
69
|
this.dragStartPosition =
|
|
67
70
|
event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
|
|
@@ -70,6 +73,9 @@ const SwirlLightbox$1 = /*@__PURE__*/ proxyCustomElement(class SwirlLightbox ext
|
|
|
70
73
|
});
|
|
71
74
|
};
|
|
72
75
|
this.onPointerMove = async (event) => {
|
|
76
|
+
if (!this.dragging) {
|
|
77
|
+
return;
|
|
78
|
+
}
|
|
73
79
|
const isMultiTouch = !(event instanceof MouseEvent) && event.touches.length > 1;
|
|
74
80
|
const imageViewer = this.slides[this.activeSlideIndex]?.shadowRoot?.querySelector("swirl-file-viewer-image");
|
|
75
81
|
const showsZoomedImage = Boolean(imageViewer)
|
|
@@ -78,19 +84,20 @@ const SwirlLightbox$1 = /*@__PURE__*/ proxyCustomElement(class SwirlLightbox ext
|
|
|
78
84
|
if (isMultiTouch || showsZoomedImage) {
|
|
79
85
|
return;
|
|
80
86
|
}
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
this.
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
});
|
|
91
|
-
}
|
|
87
|
+
event.preventDefault();
|
|
88
|
+
const deltaX = event instanceof MouseEvent
|
|
89
|
+
? event.clientX - this.dragStartPosition
|
|
90
|
+
: event.touches[0].clientX - this.dragStartPosition;
|
|
91
|
+
this.slides.forEach((slide) => {
|
|
92
|
+
const pixelOffset = this.activeSlideIndex * slide.getBoundingClientRect().width;
|
|
93
|
+
this.dragDelta = deltaX;
|
|
94
|
+
slide.style.transform = `translate3d(${(-pixelOffset + this.dragDelta) / 16}rem, 0, 0)`;
|
|
95
|
+
});
|
|
92
96
|
};
|
|
93
97
|
this.onPointerUp = () => {
|
|
98
|
+
if (!this.dragging) {
|
|
99
|
+
return;
|
|
100
|
+
}
|
|
94
101
|
this.dragging = false;
|
|
95
102
|
this.dragStartPosition = undefined;
|
|
96
103
|
const dragRatio = this.dragDelta /
|
|
@@ -281,7 +288,7 @@ const SwirlLightbox$1 = /*@__PURE__*/ proxyCustomElement(class SwirlLightbox ext
|
|
|
281
288
|
"lightbox--hide-menu": !hasMenuItems,
|
|
282
289
|
"lightbox--hide-toolbar": !hasToolbar,
|
|
283
290
|
});
|
|
284
|
-
return (h(Host, { key: '
|
|
291
|
+
return (h(Host, { key: '711c0392474fa14a7fac934bac030614277b00bb', onKeydown: this.onKeyDown }, h("section", { key: 'c7a1346ba3f62fcb9ffa548cafe9863fea547abf', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, id: "lightbox", onMouseDown: this.onPointerDown, onMouseMove: this.onPointerMove, onMouseOut: this.onPointerUp, onMouseUp: this.onPointerUp, onTouchEnd: this.onPointerUp, onTouchMove: this.onPointerMove, onTouchStart: this.onPointerDown, ref: (el) => (this.modalEl = el), role: "dialog", tabIndex: this.isOpen ? 0 : -1 }, h("div", { key: '693d8618fa2160a65c92752f1905bc1dcec916d0', class: "lightbox__body", role: "document" }, h("header", { key: '4ebbd00119a77c104f00bf5ecac020af03ea389c', class: "lightbox__header" }, h("button", { key: '56a6a0f54ff17b609af4edd0e5923b1155f2fa6e', "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, h("swirl-icon-close", { key: '0816497d2f8012e860146c6a8494edde9bc834d2' })), h("div", { key: '4c22c991a5f8f1f6b691d4f9b1e08c6d30b45569', class: "lightbox__toolbar" }, h("slot", { key: '1891cad14a36356781d4a048cff42a650bffb214', name: "toolbar" })), !this.hideMenu && (h("swirl-popover-trigger", { key: '371d1f3dea6b3264e3192b6f7dc6336efb1a2284', swirlPopover: this.menu }, h("button", { key: '73b7f96f9fc510c0e6dfeea714681c7ba71539d4', "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, h("swirl-icon-more-vertikal", { key: 'a8eeb497a471968a5c00bf69e5acdf513f3f84d6' }))))), h("div", { key: 'b6ea4cfdd22f2e3137c971d541dc0e20e51a17fa', "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, h("div", { key: '14f010e3ff24ff158f280680f86afd14039edbd7', "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: 'efeec16ff88ff1f58d3e8c56f4f16290f3ec08f8', onSlotchange: this.registerSlides }))), h("div", { key: 'd2178f1d694ef3e41960872a920157337c455e1e', class: "lightbox__controls" }, h("button", { key: '583737358a6018e3fb694da1e89ddd0f0456dc69', "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, h("swirl-icon-arrow-left", { key: '5b3c53f7c3de10df0bc450efeac73b0d3ba1a055' })), h("button", { key: 'dad26a76dbf5321a3a121a0f00ada47ef96f89a4', "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick }, h("swirl-icon-arrow-right", { key: '2a3e12886335250986ba13b27c526890cc61c9ef' }))), showPagination && (h("span", { key: '6dc3eb07c58459904cebc3c55b1a3ea61d04b7f9', class: "lightbox__pagination" }, h("span", { key: 'cc9efa1750bac95f556619b87b9ad530364ddf29', "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))), !this.hideMenu && (h("swirl-popover", { key: '8e9909d8f4ecba8dfa143657685376a9c4d23647', animation: "scale-in-y", disableScrollLock: true, id: "slide-menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", { key: '86e96e34f5bfd024f21ad20cb5533702c0b87a75' }, h("div", { key: '0ba6335bf5b625fef945a03f3d30229dcbb4d9fe', class: "lightbox__meta" }, currentThumbnailUrl && (h("div", { key: '0cc28e6a455db3f9e3b5b38b500e2e9d4e4be105', class: "lightbox__thumbnail" }, h("swirl-thumbnail", { key: '1994f956fa046cf197ff519416792ecfc27c25cb', alt: "", src: currentThumbnailUrl }))), h("div", { key: '9ed5a72ff591a77835bf8ddc7cf905c73fb6d4ee', class: "lightbox__file-info" }, h("swirl-text", { key: '5d404ac3bfcae7933ee21c996c0df458476e42c3', truncate: true, weight: "semibold" }, currentFileName), h("swirl-text", { key: '58f21622b74914fc2523bfa7d34c171cba96fdd9', color: "subdued", size: "sm", truncate: true }, currentFileType))), hasMenuItems && h("swirl-separator", { key: '975065e045ecd021ad2f196be3f05e4a9f94ee7f' }), h("swirl-action-list", { key: 'fb09c171d08e50f688fa6c3f60cbbd23e83cb709' }, this.downloadButtonEnabled && (h("swirl-action-list-item", { key: 'c3576a179fb57f9f3115234d6a757a0dc58b3ee8', icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), h("slot", { key: '438269a75c8c02c58c329bce89651d170d2ccedd', name: "menu-items" }))))))));
|
|
285
292
|
}
|
|
286
293
|
get el() { return this; }
|
|
287
294
|
static get watchers() { return {
|
|
@@ -23,6 +23,7 @@ const SwirlSelect$1 = /*@__PURE__*/ proxyCustomElement(class SwirlSelect extends
|
|
|
23
23
|
this.searchChange = createEvent(this, "searchChange", 7);
|
|
24
24
|
this.valueChange = createEvent(this, "valueChange", 7);
|
|
25
25
|
this.select = (event) => {
|
|
26
|
+
event.stopPropagation();
|
|
26
27
|
this.value = event.detail;
|
|
27
28
|
this.valueChange.emit(this.value);
|
|
28
29
|
if (!this.multiSelect) {
|
|
@@ -137,11 +138,11 @@ const SwirlSelect$1 = /*@__PURE__*/ proxyCustomElement(class SwirlSelect extends
|
|
|
137
138
|
"select--multi": this.multiSelect,
|
|
138
139
|
"select--search-loading": this.searchLoading,
|
|
139
140
|
});
|
|
140
|
-
return (h(Host, { key: '
|
|
141
|
+
return (h(Host, { key: '1d10a0ddcc86344ac46939e59f9b1ffff21ac1bf', onKeyDown: this.onKeyDown }, h("div", { key: '9b0269fbff0db34337c70db2ec3b5207926a7d72', class: className }, h("swirl-popover-trigger", { key: '992df10671b0d383f72498bbec7171b1394af0e3', swirlPopover: this.swirlPopover, setAriaAttributes: false }, h("input", { key: 'e8aa13cd1187d4f85830d847f2c0821204af49a6', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__input", disabled: this.disabled, readOnly: true, ref: (el) => (this.input = el), type: "text", value: label })), h("span", { key: 'cd88e6ac4226cfab559d4a76a2f210d21e92f615', class: "select__multi-select-values" }, this.value
|
|
141
142
|
?.map((value) => this.options.find((option) => option.value === value))
|
|
142
143
|
?.map((option) => (h("swirl-tag", { "aria-hidden": "true", label: option?.label,
|
|
143
144
|
// eslint-disable-next-line react/jsx-no-bind
|
|
144
|
-
onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect })))), h("span", { key: '
|
|
145
|
+
onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect })))), h("span", { key: 'ce726838340f0134949858a086dfe0a9df7c90f2', class: "select__indicator" }, this.open ? (h("swirl-icon-expand-less", null)) : (h("swirl-icon-expand-more", null))), h("swirl-popover", { key: '8545f9fecb69669d491279e36fe095a9242dd4cc', animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: [0, offset], onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.swirlPopover = el), useContainerWidth: "swirl-form-control" }, this.withSearch && (h("div", { key: '63a2390791ab72c86e03ed0c91b7362944d57ab0', class: "select__search" }, h("swirl-icon-search", { key: '7f14d873830f700465ea031a38af9a16701c70ab', class: "select__search-icon", size: 20 }), h("input", { key: '8c9d1983bec02903ba6b500ad510f8f745c8c998', "aria-label": this.searchInputLabel, class: "select__search-input", onInput: this.onSearchInput, placeholder: this.searchPlaceholder, ref: (el) => (this.searchInput = el), type: "search" }), this.searchLoading && (h("swirl-spinner", { key: 'cdee4fbbbe67ad841941cdb8f11a41444b7f6ca8', class: "select__search-spinner", size: "s" })))), h("swirl-option-list", { key: '15d164af64da1a3df267b14be0de4a892754dd6b', allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (h("div", { key: '56083d8f90e10069d52d0a798de8c953134a65ff', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, h("swirl-text", { key: '91e537995cc2ef3c99d92640f8c1000896ae36d1', color: "subdued", weight: "medium" }, this.emptyListLabel))), h("slot", { key: 'a72244fb617dbc181570736b2ebb27831c8ebe36', onSlotchange: this.onSlotChange }))))));
|
|
145
146
|
}
|
|
146
147
|
get el() { return this; }
|
|
147
148
|
static get style() { return SwirlSelectStyle0; }
|
|
@@ -43,10 +43,16 @@ const SwirlTreeViewItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTreeView
|
|
|
43
43
|
this.hasChildren = Boolean(this.el.querySelector("swirl-tree-view-item"));
|
|
44
44
|
}
|
|
45
45
|
async expand() {
|
|
46
|
+
if (this.expanded) {
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
46
49
|
this.expanded = true;
|
|
47
50
|
this.expandedChange.emit(this.expanded);
|
|
48
51
|
}
|
|
49
52
|
async collapse() {
|
|
53
|
+
if (!this.expanded) {
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
50
56
|
this.expanded = false;
|
|
51
57
|
this.expandedChange.emit(this.expanded);
|
|
52
58
|
}
|
|
@@ -74,11 +80,11 @@ const SwirlTreeViewItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTreeView
|
|
|
74
80
|
"tree-view-item--active": this.active,
|
|
75
81
|
"tree-view-item--has-tags": hasTags,
|
|
76
82
|
});
|
|
77
|
-
return (h(Host, { key: '
|
|
83
|
+
return (h(Host, { key: 'a350471e6d4a63098c22ac8856fb642bef79a8e4', id: this.itemId, role: "none" }, h("li", { key: '6485eca3fa6bc73bc6d849946d3cd3f8447c1f96', class: className, role: "none" }, h("a", { key: '523ccc5dc330ef55bbde7d7fc6175095265500cd', "aria-current": this.active ? "page" : undefined, "aria-expanded": !this.hasChildren ? undefined : String(this.expanded), "aria-level": this.level + 1, "aria-owns": this.hasChildren ? `${this.itemId}-children` : undefined, "aria-selected": String(this.selected), class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, style: {
|
|
78
84
|
paddingLeft: `calc(${this.level} * var(--s-space-12) + var(--s-space-4))`,
|
|
79
|
-
}, ref: (el) => (this.link = el), role: "treeitem", tabIndex: this.selected ? 0 : -1 }, h("span", { key: '
|
|
85
|
+
}, ref: (el) => (this.link = el), role: "treeitem", tabIndex: this.selected ? 0 : -1 }, h("span", { key: '38545839a14a02be2d5215cf8243d8442315d01f', class: "tree-view-item__toggle-icon" }, this.hasChildren && (h(Fragment, { key: '5985b994251fbeba1d4951ef97d2d886be896b47' }, this.expanded ? (h("swirl-icon-expand-more", { onClick: this.onClickCollapse, size: 24 })) : (h("swirl-icon-chevron-right", { onClick: this.onClickExpand, size: 24 }))))), Boolean(this.icon) && (h(Fragment, { key: '5cf0e41959520d380cb4e26fcde2f7ad7a5ad2d8' }, h("span", { key: 'a1ba2c49d276f726d41d31c857f08977b4dca993', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24 }))))), h("span", { key: '18c2483d1878e9922e571d74f9994865fff69d9f', class: "tree-view-item__label" }, this.label), h("span", { key: '09b24c4ff18845f056c6d490fb3795cf84d81a9a', class: "tree-view-item__tags" }, h("slot", { key: 'bc45bf6afa16260be7218d2608237251983c7e33', name: "tags" }))), h("ul", { key: '491569e41d788183e23ac3e8fc9beeb483c35573', "aria-label": this.label, class: "tree-view-item__children", id: `${this.itemId}-children`, role: "group", style: {
|
|
80
86
|
display: !this.expanded || !this.hasChildren ? "none" : undefined,
|
|
81
|
-
} }, h("slot", { key: '
|
|
87
|
+
} }, h("slot", { key: '22c80b13b2044b77c5c1acaa62044127dbe9cf0e' })))));
|
|
82
88
|
}
|
|
83
89
|
get el() { return this; }
|
|
84
90
|
static get style() { return SwirlTreeViewItemStyle0; }
|
|
@@ -45,6 +45,9 @@ const SwirlLightbox = class {
|
|
|
45
45
|
this.setSlideAttributes();
|
|
46
46
|
};
|
|
47
47
|
this.onPointerDown = (event) => {
|
|
48
|
+
if (this.slides.length <= 1) {
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
48
51
|
this.dragging = true;
|
|
49
52
|
this.dragStartPosition =
|
|
50
53
|
event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
|
|
@@ -53,6 +56,9 @@ const SwirlLightbox = class {
|
|
|
53
56
|
});
|
|
54
57
|
};
|
|
55
58
|
this.onPointerMove = async (event) => {
|
|
59
|
+
if (!this.dragging) {
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
56
62
|
const isMultiTouch = !(event instanceof MouseEvent) && event.touches.length > 1;
|
|
57
63
|
const imageViewer = this.slides[this.activeSlideIndex]?.shadowRoot?.querySelector("swirl-file-viewer-image");
|
|
58
64
|
const showsZoomedImage = Boolean(imageViewer)
|
|
@@ -61,19 +67,20 @@ const SwirlLightbox = class {
|
|
|
61
67
|
if (isMultiTouch || showsZoomedImage) {
|
|
62
68
|
return;
|
|
63
69
|
}
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
this.
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
});
|
|
74
|
-
}
|
|
70
|
+
event.preventDefault();
|
|
71
|
+
const deltaX = event instanceof MouseEvent
|
|
72
|
+
? event.clientX - this.dragStartPosition
|
|
73
|
+
: event.touches[0].clientX - this.dragStartPosition;
|
|
74
|
+
this.slides.forEach((slide) => {
|
|
75
|
+
const pixelOffset = this.activeSlideIndex * slide.getBoundingClientRect().width;
|
|
76
|
+
this.dragDelta = deltaX;
|
|
77
|
+
slide.style.transform = `translate3d(${(-pixelOffset + this.dragDelta) / 16}rem, 0, 0)`;
|
|
78
|
+
});
|
|
75
79
|
};
|
|
76
80
|
this.onPointerUp = () => {
|
|
81
|
+
if (!this.dragging) {
|
|
82
|
+
return;
|
|
83
|
+
}
|
|
77
84
|
this.dragging = false;
|
|
78
85
|
this.dragStartPosition = undefined;
|
|
79
86
|
const dragRatio = this.dragDelta /
|
|
@@ -264,7 +271,7 @@ const SwirlLightbox = class {
|
|
|
264
271
|
"lightbox--hide-menu": !hasMenuItems,
|
|
265
272
|
"lightbox--hide-toolbar": !hasToolbar,
|
|
266
273
|
});
|
|
267
|
-
return (h(Host, { key: '
|
|
274
|
+
return (h(Host, { key: '711c0392474fa14a7fac934bac030614277b00bb', onKeydown: this.onKeyDown }, h("section", { key: 'c7a1346ba3f62fcb9ffa548cafe9863fea547abf', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, id: "lightbox", onMouseDown: this.onPointerDown, onMouseMove: this.onPointerMove, onMouseOut: this.onPointerUp, onMouseUp: this.onPointerUp, onTouchEnd: this.onPointerUp, onTouchMove: this.onPointerMove, onTouchStart: this.onPointerDown, ref: (el) => (this.modalEl = el), role: "dialog", tabIndex: this.isOpen ? 0 : -1 }, h("div", { key: '693d8618fa2160a65c92752f1905bc1dcec916d0', class: "lightbox__body", role: "document" }, h("header", { key: '4ebbd00119a77c104f00bf5ecac020af03ea389c', class: "lightbox__header" }, h("button", { key: '56a6a0f54ff17b609af4edd0e5923b1155f2fa6e', "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, h("swirl-icon-close", { key: '0816497d2f8012e860146c6a8494edde9bc834d2' })), h("div", { key: '4c22c991a5f8f1f6b691d4f9b1e08c6d30b45569', class: "lightbox__toolbar" }, h("slot", { key: '1891cad14a36356781d4a048cff42a650bffb214', name: "toolbar" })), !this.hideMenu && (h("swirl-popover-trigger", { key: '371d1f3dea6b3264e3192b6f7dc6336efb1a2284', swirlPopover: this.menu }, h("button", { key: '73b7f96f9fc510c0e6dfeea714681c7ba71539d4', "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, h("swirl-icon-more-vertikal", { key: 'a8eeb497a471968a5c00bf69e5acdf513f3f84d6' }))))), h("div", { key: 'b6ea4cfdd22f2e3137c971d541dc0e20e51a17fa', "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, h("div", { key: '14f010e3ff24ff158f280680f86afd14039edbd7', "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: 'efeec16ff88ff1f58d3e8c56f4f16290f3ec08f8', onSlotchange: this.registerSlides }))), h("div", { key: 'd2178f1d694ef3e41960872a920157337c455e1e', class: "lightbox__controls" }, h("button", { key: '583737358a6018e3fb694da1e89ddd0f0456dc69', "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, h("swirl-icon-arrow-left", { key: '5b3c53f7c3de10df0bc450efeac73b0d3ba1a055' })), h("button", { key: 'dad26a76dbf5321a3a121a0f00ada47ef96f89a4', "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick }, h("swirl-icon-arrow-right", { key: '2a3e12886335250986ba13b27c526890cc61c9ef' }))), showPagination && (h("span", { key: '6dc3eb07c58459904cebc3c55b1a3ea61d04b7f9', class: "lightbox__pagination" }, h("span", { key: 'cc9efa1750bac95f556619b87b9ad530364ddf29', "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))), !this.hideMenu && (h("swirl-popover", { key: '8e9909d8f4ecba8dfa143657685376a9c4d23647', animation: "scale-in-y", disableScrollLock: true, id: "slide-menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", { key: '86e96e34f5bfd024f21ad20cb5533702c0b87a75' }, h("div", { key: '0ba6335bf5b625fef945a03f3d30229dcbb4d9fe', class: "lightbox__meta" }, currentThumbnailUrl && (h("div", { key: '0cc28e6a455db3f9e3b5b38b500e2e9d4e4be105', class: "lightbox__thumbnail" }, h("swirl-thumbnail", { key: '1994f956fa046cf197ff519416792ecfc27c25cb', alt: "", src: currentThumbnailUrl }))), h("div", { key: '9ed5a72ff591a77835bf8ddc7cf905c73fb6d4ee', class: "lightbox__file-info" }, h("swirl-text", { key: '5d404ac3bfcae7933ee21c996c0df458476e42c3', truncate: true, weight: "semibold" }, currentFileName), h("swirl-text", { key: '58f21622b74914fc2523bfa7d34c171cba96fdd9', color: "subdued", size: "sm", truncate: true }, currentFileType))), hasMenuItems && h("swirl-separator", { key: '975065e045ecd021ad2f196be3f05e4a9f94ee7f' }), h("swirl-action-list", { key: 'fb09c171d08e50f688fa6c3f60cbbd23e83cb709' }, this.downloadButtonEnabled && (h("swirl-action-list-item", { key: 'c3576a179fb57f9f3115234d6a757a0dc58b3ee8', icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), h("slot", { key: '438269a75c8c02c58c329bce89651d170d2ccedd', name: "menu-items" }))))))));
|
|
268
275
|
}
|
|
269
276
|
get el() { return getElement(this); }
|
|
270
277
|
static get watchers() { return {
|
|
@@ -11,6 +11,7 @@ const SwirlSelect = class {
|
|
|
11
11
|
this.searchChange = createEvent(this, "searchChange", 7);
|
|
12
12
|
this.valueChange = createEvent(this, "valueChange", 7);
|
|
13
13
|
this.select = (event) => {
|
|
14
|
+
event.stopPropagation();
|
|
14
15
|
this.value = event.detail;
|
|
15
16
|
this.valueChange.emit(this.value);
|
|
16
17
|
if (!this.multiSelect) {
|
|
@@ -125,11 +126,11 @@ const SwirlSelect = class {
|
|
|
125
126
|
"select--multi": this.multiSelect,
|
|
126
127
|
"select--search-loading": this.searchLoading,
|
|
127
128
|
});
|
|
128
|
-
return (h(Host, { key: '
|
|
129
|
+
return (h(Host, { key: '1d10a0ddcc86344ac46939e59f9b1ffff21ac1bf', onKeyDown: this.onKeyDown }, h("div", { key: '9b0269fbff0db34337c70db2ec3b5207926a7d72', class: className }, h("swirl-popover-trigger", { key: '992df10671b0d383f72498bbec7171b1394af0e3', swirlPopover: this.swirlPopover, setAriaAttributes: false }, h("input", { key: 'e8aa13cd1187d4f85830d847f2c0821204af49a6', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__input", disabled: this.disabled, readOnly: true, ref: (el) => (this.input = el), type: "text", value: label })), h("span", { key: 'cd88e6ac4226cfab559d4a76a2f210d21e92f615', class: "select__multi-select-values" }, this.value
|
|
129
130
|
?.map((value) => this.options.find((option) => option.value === value))
|
|
130
131
|
?.map((option) => (h("swirl-tag", { "aria-hidden": "true", label: option?.label,
|
|
131
132
|
// eslint-disable-next-line react/jsx-no-bind
|
|
132
|
-
onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect })))), h("span", { key: '
|
|
133
|
+
onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect })))), h("span", { key: 'ce726838340f0134949858a086dfe0a9df7c90f2', class: "select__indicator" }, this.open ? (h("swirl-icon-expand-less", null)) : (h("swirl-icon-expand-more", null))), h("swirl-popover", { key: '8545f9fecb69669d491279e36fe095a9242dd4cc', animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: [0, offset], onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.swirlPopover = el), useContainerWidth: "swirl-form-control" }, this.withSearch && (h("div", { key: '63a2390791ab72c86e03ed0c91b7362944d57ab0', class: "select__search" }, h("swirl-icon-search", { key: '7f14d873830f700465ea031a38af9a16701c70ab', class: "select__search-icon", size: 20 }), h("input", { key: '8c9d1983bec02903ba6b500ad510f8f745c8c998', "aria-label": this.searchInputLabel, class: "select__search-input", onInput: this.onSearchInput, placeholder: this.searchPlaceholder, ref: (el) => (this.searchInput = el), type: "search" }), this.searchLoading && (h("swirl-spinner", { key: 'cdee4fbbbe67ad841941cdb8f11a41444b7f6ca8', class: "select__search-spinner", size: "s" })))), h("swirl-option-list", { key: '15d164af64da1a3df267b14be0de4a892754dd6b', allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (h("div", { key: '56083d8f90e10069d52d0a798de8c953134a65ff', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, h("swirl-text", { key: '91e537995cc2ef3c99d92640f8c1000896ae36d1', color: "subdued", weight: "medium" }, this.emptyListLabel))), h("slot", { key: 'a72244fb617dbc181570736b2ebb27831c8ebe36', onSlotchange: this.onSlotChange }))))));
|
|
133
134
|
}
|
|
134
135
|
get el() { return getElement(this); }
|
|
135
136
|
};
|
|
@@ -39,10 +39,16 @@ const SwirlTreeViewItem = class {
|
|
|
39
39
|
this.hasChildren = Boolean(this.el.querySelector("swirl-tree-view-item"));
|
|
40
40
|
}
|
|
41
41
|
async expand() {
|
|
42
|
+
if (this.expanded) {
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
42
45
|
this.expanded = true;
|
|
43
46
|
this.expandedChange.emit(this.expanded);
|
|
44
47
|
}
|
|
45
48
|
async collapse() {
|
|
49
|
+
if (!this.expanded) {
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
46
52
|
this.expanded = false;
|
|
47
53
|
this.expandedChange.emit(this.expanded);
|
|
48
54
|
}
|
|
@@ -70,11 +76,11 @@ const SwirlTreeViewItem = class {
|
|
|
70
76
|
"tree-view-item--active": this.active,
|
|
71
77
|
"tree-view-item--has-tags": hasTags,
|
|
72
78
|
});
|
|
73
|
-
return (h(Host, { key: '
|
|
79
|
+
return (h(Host, { key: 'a350471e6d4a63098c22ac8856fb642bef79a8e4', id: this.itemId, role: "none" }, h("li", { key: '6485eca3fa6bc73bc6d849946d3cd3f8447c1f96', class: className, role: "none" }, h("a", { key: '523ccc5dc330ef55bbde7d7fc6175095265500cd', "aria-current": this.active ? "page" : undefined, "aria-expanded": !this.hasChildren ? undefined : String(this.expanded), "aria-level": this.level + 1, "aria-owns": this.hasChildren ? `${this.itemId}-children` : undefined, "aria-selected": String(this.selected), class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, style: {
|
|
74
80
|
paddingLeft: `calc(${this.level} * var(--s-space-12) + var(--s-space-4))`,
|
|
75
|
-
}, ref: (el) => (this.link = el), role: "treeitem", tabIndex: this.selected ? 0 : -1 }, h("span", { key: '
|
|
81
|
+
}, ref: (el) => (this.link = el), role: "treeitem", tabIndex: this.selected ? 0 : -1 }, h("span", { key: '38545839a14a02be2d5215cf8243d8442315d01f', class: "tree-view-item__toggle-icon" }, this.hasChildren && (h(Fragment, { key: '5985b994251fbeba1d4951ef97d2d886be896b47' }, this.expanded ? (h("swirl-icon-expand-more", { onClick: this.onClickCollapse, size: 24 })) : (h("swirl-icon-chevron-right", { onClick: this.onClickExpand, size: 24 }))))), Boolean(this.icon) && (h(Fragment, { key: '5cf0e41959520d380cb4e26fcde2f7ad7a5ad2d8' }, h("span", { key: 'a1ba2c49d276f726d41d31c857f08977b4dca993', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24 }))))), h("span", { key: '18c2483d1878e9922e571d74f9994865fff69d9f', class: "tree-view-item__label" }, this.label), h("span", { key: '09b24c4ff18845f056c6d490fb3795cf84d81a9a', class: "tree-view-item__tags" }, h("slot", { key: 'bc45bf6afa16260be7218d2608237251983c7e33', name: "tags" }))), h("ul", { key: '491569e41d788183e23ac3e8fc9beeb483c35573', "aria-label": this.label, class: "tree-view-item__children", id: `${this.itemId}-children`, role: "group", style: {
|
|
76
82
|
display: !this.expanded || !this.hasChildren ? "none" : undefined,
|
|
77
|
-
} }, h("slot", { key: '
|
|
83
|
+
} }, h("slot", { key: '22c80b13b2044b77c5c1acaa62044127dbe9cf0e' })))));
|
|
78
84
|
}
|
|
79
85
|
get el() { return getElement(this); }
|
|
80
86
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as i,c as t,h as e,H as s,g as o}from"./p-e212b5b7.js";import{d as a,e as l}from"./p-33c168b3.js";import{c as n}from"./p-a5dce9e6.js";import{c as h}from"./p-878dc806.js";import{q as d}from"./p-5848d900.js";const r=class{constructor(e){i(this,e),this.activeSlideChange=t(this,"activeSlideChange",7),this.dragging=!1,this.onKeyDown=i=>{this.isOpen&&("Escape"===i.code?(i.stopImmediatePropagation(),this.close()):"ArrowLeft"===i.code?this.onPreviousSlideClick():"ArrowRight"===i.code&&this.onNextSlideClick())},this.onCloseButtonClick=()=>{this.close()},this.onDownloadButtonClick=()=>{this.slides[this.activeSlideIndex]?.download(),this.menu.close()},this.onNextSlideClick=()=>{this.activateSlide(Math.min(this.slides.length-1,this.activeSlideIndex+1))},this.onPreviousSlideClick=()=>{this.activateSlide(Math.max(0,this.activeSlideIndex-1))},this.registerSlides=()=>{this.slides=Array.from(this.el.children).filter((i=>"SWIRL-FILE-VIEWER"===i.tagName)),this.setSlideAttributes()},this.onPointerDown=i=>{this.slides.length<=1||(this.dragging=!0,this.dragStartPosition=i instanceof MouseEvent?i.clientX:i.touches[0].clientX,this.slides.forEach((i=>{i.style.transition="none"})))},this.onPointerMove=async i=>{if(!this.dragging)return;const t=!(i instanceof MouseEvent)&&i.touches.length>1,e=this.slides[this.activeSlideIndex]?.shadowRoot?.querySelector("swirl-file-viewer-image"),s=!!Boolean(e)&&await e.getZoom()>1;if(t||s)return;i.preventDefault();const o=i instanceof MouseEvent?i.clientX-this.dragStartPosition:i.touches[0].clientX-this.dragStartPosition;this.slides.forEach((i=>{const t=this.activeSlideIndex*i.getBoundingClientRect().width;this.dragDelta=o,i.style.transform=`translate3d(${(-t+this.dragDelta)/16}rem, 0, 0)`}))},this.onPointerUp=()=>{if(!this.dragging)return;this.dragging=!1,this.dragStartPosition=void 0;const i=this.dragDelta/this.slides[this.activeSlideIndex].getBoundingClientRect().width;this.dragDelta=0;const t=i>.2,e=i<-.2;this.slides.forEach((i=>{i.style.transition=""})),t?this.onPreviousSlideClick():e?this.onNextSlideClick():this.resetSlidePositions()},this.onBackdropClick=i=>{i.target===this.slidesContainer&&this.close()},this.onContextMenu=i=>{this.downloadButtonEnabled||i.preventDefault()},this.closeButtonLabel="Close modal",this.downloadButtonEnabled=!0,this.downloadButtonLabel="Download",this.hideMenu=void 0,this.label=void 0,this.menuLabel="Slide options",this.menuTriggerLabel="Open slide menu",this.nextSlideButtonLabel="Next slide",this.previousSlideButtonLabel="Previous slide",this.activeSlideIndex=0,this.closing=!1,this.isOpen=!1,this.slides=void 0}componentWillLoad(){this.registerSlides()}componentDidLoad(){this.activateSlide(0)}componentDidRender(){this.focusTrap?.updateContainerElements(this.modalEl)}disconnectedCallback(){this.focusTrap?.deactivate(),this.unlockBodyScroll()}watchActiveSlideIndex(){this.activeSlideChange.emit(this.activeSlideIndex)}async open(){this.isOpen=!0,this.lockBodyScroll(),this.activateSlide(this.activeSlideIndex||0),setTimeout((()=>{this.focusTrap=h(this.modalEl,{allowOutsideClick:!0,tabbableOptions:{getShadowRoot:i=>i.shadowRoot}}),this.focusTrap?.activate()}))}async close(){this.closing||(this.closing=!0,this.focusTrap?.deactivate(),this.unlockBodyScroll(),setTimeout((()=>{this.isOpen=!1,this.resetImageZoom(),this.stopAllMediaPlayers(),this.closing=!1}),150))}async activateSlide(i){this.menu?.close?.(),this.dragging=!1,this.activeSlideIndex=i,this.slides.forEach(((i,t)=>{t===this.activeSlideIndex?(i.removeAttribute("aria-hidden"),i.setAttribute("active","true")):t===this.activeSlideIndex-1||t===this.activeSlideIndex+1?(i.setAttribute("aria-hidden","true"),i.setAttribute("active","true")):i.setAttribute("aria-hidden","true"),i.style.transform=`translate3d(-${100*this.activeSlideIndex}%, 0, 0)`})),setTimeout((()=>{this.slides.forEach(((i,t)=>{t!==this.activeSlideIndex&&t!==this.activeSlideIndex-1&&t!==this.activeSlideIndex+1&&i.setAttribute("active","false")}))}),300),this.stopAllMediaPlayers(),this.resetImageZoom()}setSlideAttributes(){this.slides.forEach((i=>{i.setAttribute("active","false"),i.setAttribute("aria-label",i.file),i.setAttribute("aria-roledescription","slide"),i.setAttribute("role","group"),i.addEventListener("dragstart",(i=>i.preventDefault()))}))}resetSlidePositions(){this.slides.forEach((i=>{i.style.transform=`translate3d(-${100*this.activeSlideIndex}%, 0, 0)`}))}getCurrentFileName(){return this.slides[this.activeSlideIndex]?.file?.split("/").pop()}getCurrentFileType(){return this.slides[this.activeSlideIndex]?.type}getCurrentThumbnailUrl(){return this.slides[this.activeSlideIndex]?.thumbnailUrl}lockBodyScroll(){a(this.el)}unlockBodyScroll(){l(this.el)}getMediaPlayers(){return d(this.el,"video")}stopAllMediaPlayers(){this.getMediaPlayers().forEach((i=>i.pause()))}resetImageZoom(){this.slides.forEach((i=>{const t=i?.shadowRoot?.querySelector("swirl-file-viewer-image");Boolean(t)&&t.resetZoom()}))}render(){const i=this.slides.length>1,t=this.getCurrentFileName(),o=this.getCurrentFileType(),a=this.getCurrentThumbnailUrl(),l=Boolean(this.el.querySelector("[slot='menu-items']"))||this.downloadButtonEnabled,h=Boolean(this.el.querySelector("[slot='toolbar']")),d=n("lightbox",{"lightbox--closing":this.closing,"lightbox--hide-menu":!l,"lightbox--hide-toolbar":!h});return e(s,{key:"711c0392474fa14a7fac934bac030614277b00bb",onKeydown:this.onKeyDown},e("section",{key:"c7a1346ba3f62fcb9ffa548cafe9863fea547abf","aria-hidden":String(!this.isOpen),"aria-label":this.label,"aria-modal":"true",class:d,id:"lightbox",onMouseDown:this.onPointerDown,onMouseMove:this.onPointerMove,onMouseOut:this.onPointerUp,onMouseUp:this.onPointerUp,onTouchEnd:this.onPointerUp,onTouchMove:this.onPointerMove,onTouchStart:this.onPointerDown,ref:i=>this.modalEl=i,role:"dialog",tabIndex:this.isOpen?0:-1},e("div",{key:"693d8618fa2160a65c92752f1905bc1dcec916d0",class:"lightbox__body",role:"document"},e("header",{key:"4ebbd00119a77c104f00bf5ecac020af03ea389c",class:"lightbox__header"},e("button",{key:"56a6a0f54ff17b609af4edd0e5923b1155f2fa6e","aria-label":this.closeButtonLabel,class:"lightbox__close-button",onClick:this.onCloseButtonClick},e("swirl-icon-close",{key:"0816497d2f8012e860146c6a8494edde9bc834d2"})),e("div",{key:"4c22c991a5f8f1f6b691d4f9b1e08c6d30b45569",class:"lightbox__toolbar"},e("slot",{key:"1891cad14a36356781d4a048cff42a650bffb214",name:"toolbar"})),!this.hideMenu&&e("swirl-popover-trigger",{key:"371d1f3dea6b3264e3192b6f7dc6336efb1a2284",swirlPopover:this.menu},e("button",{key:"73b7f96f9fc510c0e6dfeea714681c7ba71539d4","aria-label":this.menuTriggerLabel,class:"lightbox__menu-button"},e("swirl-icon-more-vertikal",{key:"a8eeb497a471968a5c00bf69e5acdf513f3f84d6"})))),e("div",{key:"b6ea4cfdd22f2e3137c971d541dc0e20e51a17fa","aria-roledescription":"carousel",class:"lightbox__content",role:"group"},e("div",{key:"14f010e3ff24ff158f280680f86afd14039edbd7","aria-atomic":"false","aria-live":"polite",class:"lightbox__slides",onClick:this.onBackdropClick,onContextMenu:this.onContextMenu,ref:i=>this.slidesContainer=i},e("slot",{key:"efeec16ff88ff1f58d3e8c56f4f16290f3ec08f8",onSlotchange:this.registerSlides}))),e("div",{key:"d2178f1d694ef3e41960872a920157337c455e1e",class:"lightbox__controls"},e("button",{key:"583737358a6018e3fb694da1e89ddd0f0456dc69","aria-label":this.previousSlideButtonLabel,class:"lightbox__previous-slide-button",disabled:0===this.activeSlideIndex,onClick:this.onPreviousSlideClick},e("swirl-icon-arrow-left",{key:"5b3c53f7c3de10df0bc450efeac73b0d3ba1a055"})),e("button",{key:"dad26a76dbf5321a3a121a0f00ada47ef96f89a4","aria-label":this.nextSlideButtonLabel,class:"lightbox__next-slide-button",disabled:this.activeSlideIndex===this.slides.length-1,onClick:this.onNextSlideClick},e("swirl-icon-arrow-right",{key:"2a3e12886335250986ba13b27c526890cc61c9ef"}))),i&&e("span",{key:"6dc3eb07c58459904cebc3c55b1a3ea61d04b7f9",class:"lightbox__pagination"},e("span",{key:"cc9efa1750bac95f556619b87b9ad530364ddf29","aria-current":"page"},this.activeSlideIndex+1)," /"," ",this.slides.length)),!this.hideMenu&&e("swirl-popover",{key:"8e9909d8f4ecba8dfa143657685376a9c4d23647",animation:"scale-in-y",disableScrollLock:!0,id:"slide-menu",label:this.menuLabel,placement:"bottom-end",ref:i=>this.menu=i},e("swirl-stack",{key:"86e96e34f5bfd024f21ad20cb5533702c0b87a75"},e("div",{key:"0ba6335bf5b625fef945a03f3d30229dcbb4d9fe",class:"lightbox__meta"},a&&e("div",{key:"0cc28e6a455db3f9e3b5b38b500e2e9d4e4be105",class:"lightbox__thumbnail"},e("swirl-thumbnail",{key:"1994f956fa046cf197ff519416792ecfc27c25cb",alt:"",src:a})),e("div",{key:"9ed5a72ff591a77835bf8ddc7cf905c73fb6d4ee",class:"lightbox__file-info"},e("swirl-text",{key:"5d404ac3bfcae7933ee21c996c0df458476e42c3",truncate:!0,weight:"semibold"},t),e("swirl-text",{key:"58f21622b74914fc2523bfa7d34c171cba96fdd9",color:"subdued",size:"sm",truncate:!0},o))),l&&e("swirl-separator",{key:"975065e045ecd021ad2f196be3f05e4a9f94ee7f"}),e("swirl-action-list",{key:"fb09c171d08e50f688fa6c3f60cbbd23e83cb709"},this.downloadButtonEnabled&&e("swirl-action-list-item",{key:"c3576a179fb57f9f3115234d6a757a0dc58b3ee8",icon:"<swirl-icon-download></swirl-icon-download>",label:this.downloadButtonLabel,onClick:this.onDownloadButtonClick}),e("slot",{key:"438269a75c8c02c58c329bce89651d170d2ccedd",name:"menu-items"}))))))}get el(){return o(this)}static get watchers(){return{activeSlideIndex:["watchActiveSlideIndex"]}}};r.style=':host{display:block}:host *{box-sizing:border-box}.lightbox{position:fixed;z-index:var(--s-z-40);background-color:rgba(0, 0, 0, 1);inset:0}.lightbox[aria-hidden="true"]{display:none}@media (min-width: 768px){.lightbox{background-color:rgba(0, 0, 0, 0.8)}}.lightbox:not(.lightbox--closing) .lightbox__body{animation:0.15s lightbox-fade-in}@media (prefers-reduced-motion){.lightbox:not(.lightbox--closing) .lightbox__body{animation:none}}.lightbox--closing{animation:0.15s lightbox-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.lightbox--closing{animation:none}}.lightbox--hide-menu .lightbox__menu{display:none}.lightbox--hide-toolbar .lightbox__toolbar{display:none}.lightbox__body{position:relative;width:100%;height:100%}.lightbox__header{position:absolute;z-index:1;top:0;right:0;left:0;display:flex;padding:var(--s-space-12) var(--s-space-16);justify-content:space-between;align-items:flex-start;pointer-events:none}.lightbox__toolbar{pointer-events:auto}.lightbox__controls{position:absolute;z-index:1;top:50%;right:0;left:0;display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:space-between;align-items:flex-start;pointer-events:none}@media (min-width: 768px){.lightbox__controls{display:flex}}.lightbox__close-button,.lightbox__menu-button,.lightbox__previous-slide-button,.lightbox__next-slide-button{display:inline-flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);cursor:pointer;transition:opacity 0.15s;pointer-events:auto}.lightbox__close-button:disabled,.lightbox__menu-button:disabled,.lightbox__previous-slide-button:disabled,.lightbox__next-slide-button:disabled{pointer-events:none;opacity:0}.lightbox__content{overflow:hidden;width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.lightbox__slides{display:flex;width:100%;height:100%}.lightbox__slides ::slotted(*){flex-basis:100%;flex-shrink:0;transition:transform 0.3s}@media (min-width: 768px){.lightbox__slides ::slotted(*){padding:4rem 5rem}}@media (prefers-reduced-motion){.lightbox__slides ::slotted(*){transition:none}}.lightbox__pagination{position:absolute;bottom:var(--s-space-32);left:50%;padding:var(--s-space-4) var(--s-space-12);border-radius:var(--s-border-radius-base);color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.6);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);transform:translateX(-50%);pointer-events:none}@media (min-width: 768px){.lightbox__pagination{display:none}}.lightbox__meta{display:flex;padding-top:var(--s-space-4);padding-right:var(--s-space-16);padding-bottom:var(--s-space-4);padding-left:var(--s-space-16);align-items:center;gap:var(--s-space-12)}@media (min-width: 768px){.lightbox__meta{max-width:18rem}}.lightbox__thumbnail{display:inline-flex;flex-shrink:0}.lightbox__file-info{display:flex;min-width:0;flex-grow:1;flex-direction:column}@keyframes lightbox-fade-in{from{opacity:0}to{opacity:1}}@keyframes lightbox-fade-out{from{opacity:1}to{opacity:0}}';export{r as swirl_lightbox}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as e,c as s,h as t,H as i,g as l}from"./p-e212b5b7.js";import{c}from"./p-a5dce9e6.js";import{q as a}from"./p-5848d900.js";const r=class{constructor(t){e(this,t),this.searchChange=s(this,"searchChange",7),this.valueChange=s(this,"valueChange",7),this.select=e=>{e.stopPropagation(),this.value=e.detail,this.valueChange.emit(this.value),this.multiSelect||this.swirlPopover.close()},this.unselectOption=e=>{this.allowDeselect&&(this.value=this.value.filter((s=>s!==e)),this.valueChange.emit(this.value))},this.onSlotChange=()=>{this.updateOptions()},this.onOpen=e=>{this.placement=e.detail.position?.placement,this.open=!0,this.withSearch&&Boolean(this.searchInput)?this.searchInput.focus():this.optionList.querySelector('[tabIndex="0"]')?.focus()},this.onClose=()=>{Boolean(this.searchInput)&&(this.searchInput.value="",this.searchChange.emit("")),this.open=!1,this.input.focus()},this.onKeyDown=e=>{if("Space"===e.code||"Enter"===e.code){if(e.target===this.searchInput)return;e.preventDefault(),this.swirlPopover.open(this.el)}else"ArrowDown"===e.code&&e.target===this.searchInput&&this.optionList.querySelector('[tabIndex="0"]')?.focus()},this.onSearchInput=e=>{this.searchChange.emit(e.target.value)},this.allowDeselect=!0,this.disabled=void 0,this.emptyListLabel="No results found.",this.inline=void 0,this.invalid=void 0,this.label=void 0,this.multiSelect=void 0,this.required=void 0,this.searchInputLabel="Search options",this.searchLoading=void 0,this.searchPlaceholder=void 0,this.selectId=Math.round(1e6*Math.random()).toString(),this.swirlAriaDescribedby=void 0,this.value=void 0,this.withSearch=void 0,this.options=[],this.open=void 0,this.placement=void 0}componentWillLoad(){queueMicrotask((()=>{this.updateOptions(),this.observeSlotChanges()}))}disconnectedCallback(){this.observer?.disconnect()}onWindowFocusIn(e){e.target===this.el.querySelector("input")&&e.stopImmediatePropagation()}observeSlotChanges(){this.observer=new MutationObserver((()=>{this.updateOptions()})),this.observer.observe(this.el,{childList:!0,subtree:!0})}updateOptions(){this.options=a(this.el,"swirl-option-list-item")}render(){const e=Boolean(this.value)?this.value?.map((e=>this.options.find((s=>s.value===e))?.label)).join(", "):"",s=!0===this.invalid||!1===this.invalid?String(this.invalid):void 0,l=this.el.closest("swirl-form-control"),a=l?.inline||"outside"===l?.labelPosition?-12:-16,r=c("select",`select--placement-${this.placement}`,{"select--disabled":this.disabled,"select--inline":this.inline,"select--multi":this.multiSelect,"select--search-loading":this.searchLoading});return t(i,{key:"1d10a0ddcc86344ac46939e59f9b1ffff21ac1bf",onKeyDown:this.onKeyDown},t("div",{key:"9b0269fbff0db34337c70db2ec3b5207926a7d72",class:r},t("swirl-popover-trigger",{key:"992df10671b0d383f72498bbec7171b1394af0e3",swirlPopover:this.swirlPopover,setAriaAttributes:!1},t("input",{key:"e8aa13cd1187d4f85830d847f2c0821204af49a6","aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-invalid":s,class:"select__input",disabled:this.disabled,readOnly:!0,ref:e=>this.input=e,type:"text",value:e})),t("span",{key:"cd88e6ac4226cfab559d4a76a2f210d21e92f615",class:"select__multi-select-values"},this.value?.map((e=>this.options.find((s=>s.value===e))))?.map((e=>t("swirl-tag",{"aria-hidden":"true",label:e?.label,onRemove:()=>this.unselectOption(e?.value),removable:!this.disabled&&this.allowDeselect})))),t("span",{key:"ce726838340f0134949858a086dfe0a9df7c90f2",class:"select__indicator"},t(this.open?"swirl-icon-expand-less":"swirl-icon-expand-more",null)),t("swirl-popover",{key:"8545f9fecb69669d491279e36fe095a9242dd4cc",animation:"scale-in-y",class:"select__popover",id:`select-options-${this.selectId}`,label:this.label,offset:[0,a],onPopoverClose:this.onClose,onPopoverOpen:this.onOpen,ref:e=>this.swirlPopover=e,useContainerWidth:"swirl-form-control"},this.withSearch&&t("div",{key:"63a2390791ab72c86e03ed0c91b7362944d57ab0",class:"select__search"},t("swirl-icon-search",{key:"7f14d873830f700465ea031a38af9a16701c70ab",class:"select__search-icon",size:20}),t("input",{key:"8c9d1983bec02903ba6b500ad510f8f745c8c998","aria-label":this.searchInputLabel,class:"select__search-input",onInput:this.onSearchInput,placeholder:this.searchPlaceholder,ref:e=>this.searchInput=e,type:"search"}),this.searchLoading&&t("swirl-spinner",{key:"cdee4fbbbe67ad841941cdb8f11a41444b7f6ca8",class:"select__search-spinner",size:"s"})),t("swirl-option-list",{key:"15d164af64da1a3df267b14be0de4a892754dd6b",allowDeselect:this.allowDeselect,onValueChange:this.select,multiSelect:this.multiSelect,ref:e=>this.optionList=e,value:this.value},!this.searchLoading&&t("div",{key:"56083d8f90e10069d52d0a798de8c953134a65ff","aria-disabled":"true",class:"select__empty-list-label",role:"option"},t("swirl-text",{key:"91e537995cc2ef3c99d92640f8c1000896ae36d1",color:"subdued",weight:"medium"},this.emptyListLabel)),t("slot",{key:"a72244fb617dbc181570736b2ebb27831c8ebe36",onSlotchange:this.onSlotChange})))))}get el(){return l(this)}};r.style=".sc-swirl-select-h{display:block;width:100%}.sc-swirl-select-h *.sc-swirl-select{box-sizing:border-box}.select.sc-swirl-select{position:relative;display:flex;width:100%}.select.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:var(--s-space-16)}@media (min-width: 768px){.select.sc-swirl-select .sc-swirl-select::part(popover__scroll-container){padding-top:0}}.select--placement-top-start.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:-2.25rem}.select--multi.sc-swirl-select .select__input.sc-swirl-select{position:absolute;width:100%;height:100%;pointer-events:none;opacity:0}.select--multi.sc-swirl-select .select__multi-select-values.sc-swirl-select{display:flex}.select--disabled.sc-swirl-select .select__input.sc-swirl-select{color:var(--s-text-disabled)}.select--disabled.sc-swirl-select .select__indicator.sc-swirl-select{color:var(--s-icon-disabled)}.select--inline.sc-swirl-select .select__indicator.sc-swirl-select{transform:translateY(-50%)}.select--search-loading.sc-swirl-select .select__search-input.sc-swirl-select{padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8))}.select__input.sc-swirl-select{display:block;overflow:hidden;width:100%;height:1.25rem;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default}.select__input.sc-swirl-select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__multi-select-values.sc-swirl-select{display:none;overflow:hidden;width:100%;min-height:1.25rem;padding-right:calc(1.5rem + var(--s-space-8));flex-wrap:wrap;gap:var(--s-space-8)}.select__multi-select-values.sc-swirl-select .sc-swirl-select::part(tag){height:1.25rem;padding:0 var(--s-space-4)}.select__indicator.sc-swirl-select{position:absolute;top:50%;right:0;display:inline-flex;color:var(--s-icon-default);transform:translateY(calc(-50% - var(--s-space-8)))}.select__search.sc-swirl-select{position:relative;display:flex;width:100%;padding:0.0625rem var(--s-space-8);border-bottom:0.0625rem solid var(--s-border-default);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.select__search.sc-swirl-select{position:sticky;z-index:1;top:0;padding-top:var(--s-space-8);padding-right:0.0625rem;padding-left:0.0625rem}}.select__search-icon.sc-swirl-select{position:absolute;top:50%;left:calc(var(--s-space-8) * 2);display:inline-flex;color:var(--s-icon-default);transform:translateY(-50%)}@media (min-width: 768px){.select__search-icon.sc-swirl-select{left:var(--s-space-12);margin-top:var(--s-space-4);padding:0.0625rem}}.select__search-input.sc-swirl-select{width:100%;height:2.5rem;padding-right:var(--s-space-12);padding-left:calc(var(--s-space-12) + 1.25rem + var(--s-space-8));align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.select__search-input.sc-swirl-select:focus:not(:focus-visible){outline:none}.select__search-input.sc-swirl-select:focus-visible{outline-color:var(--s-focus-default)}.select__search-input.sc-swirl-select::-moz-placeholder{color:var(--s-text-subdued)}.select__search-input.sc-swirl-select::placeholder{color:var(--s-text-subdued)}.select__search-input.sc-swirl-select::-webkit-search-decoration,.select__search-input.sc-swirl-select::-webkit-search-cancel-button,.select__search-input.sc-swirl-select::-webkit-search-results-button,.select__search-input.sc-swirl-select::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__search-input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__search-spinner.sc-swirl-select{position:absolute;top:50%;right:var(--s-space-12);display:inline-flex;transform:translateY(-50%)}@media (min-width: 768px){.select__search-spinner.sc-swirl-select{margin-top:var(--s-space-4)}}.select__empty-list-label.sc-swirl-select{padding:var(--s-space-12) var(--s-space-12) 0}.select__empty-list-label.sc-swirl-select:not(:only-child){display:none}@media (min-width: 768px){.select__empty-list-label.sc-swirl-select{padding:var(--s-space-12) var(--s-space-12) var(--s-space-8)}}";export{r as swirl_select}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as e,c as i,h as t,F as s,H as r,g as a}from"./p-e212b5b7.js";import{c}from"./p-a5dce9e6.js";const o=class{constructor(t){e(this,t),this.expandedChange=i(this,"expandedChange",7),this.itemSelected=i(this,"itemSelected",7),this.onFocus=()=>{this.selected||this.select()},this.onClickCollapse=e=>{e.preventDefault(),e.stopPropagation(),this.collapse()},this.onClickExpand=e=>{e.preventDefault(),e.stopPropagation(),this.expand()},this.active=void 0,this.href=void 0,this.icon=void 0,this.itemId=void 0,this.label=void 0,this.expanded=!1,this.hasChildren=!1,this.level=0,this.selected=!1}componentWillLoad(){this.updateLevel(),this.hasChildren=Boolean(this.el.querySelector("swirl-tree-view-item"))}async expand(){this.expanded||(this.expanded=!0,this.expandedChange.emit(this.expanded))}async collapse(){this.expanded&&(this.expanded=!1,this.expandedChange.emit(this.expanded))}async select(e){this.selected=!0,e&&this.link?.focus(),this.itemSelected.emit(this.el)}async unselect(){this.selected=!1}updateLevel(){let e=this.el.parentElement?.closest("swirl-tree-view-item");for(;Boolean(e);)this.level+=1,e=e.parentElement?.closest("swirl-tree-view-item")}render(){const e=Boolean(this.el.querySelector('[slot="tags"]')),i=Boolean(this.icon)&&/\p{Extended_Pictographic}/u.test(this.icon),a=c("tree-view-item",{"tree-view-item--active":this.active,"tree-view-item--has-tags":e});return t(r,{key:"a350471e6d4a63098c22ac8856fb642bef79a8e4",id:this.itemId,role:"none"},t("li",{key:"6485eca3fa6bc73bc6d849946d3cd3f8447c1f96",class:a,role:"none"},t("a",{key:"523ccc5dc330ef55bbde7d7fc6175095265500cd","aria-current":this.active?"page":void 0,"aria-expanded":this.hasChildren?String(this.expanded):void 0,"aria-level":this.level+1,"aria-owns":this.hasChildren?`${this.itemId}-children`:void 0,"aria-selected":String(this.selected),class:"tree-view-item__link",href:this.href,onFocus:this.onFocus,style:{paddingLeft:`calc(${this.level} * var(--s-space-12) + var(--s-space-4))`},ref:e=>this.link=e,role:"treeitem",tabIndex:this.selected?0:-1},t("span",{key:"38545839a14a02be2d5215cf8243d8442315d01f",class:"tree-view-item__toggle-icon"},this.hasChildren&&t(s,{key:"5985b994251fbeba1d4951ef97d2d886be896b47"},this.expanded?t("swirl-icon-expand-more",{onClick:this.onClickCollapse,size:24}):t("swirl-icon-chevron-right",{onClick:this.onClickExpand,size:24}))),Boolean(this.icon)&&t(s,{key:"5cf0e41959520d380cb4e26fcde2f7ad7a5ad2d8"},t("span",{key:"a1ba2c49d276f726d41d31c857f08977b4dca993",class:"tree-view-item__icon"},i?this.icon:t("swirl-icon",{glyph:this.icon,size:24}))),t("span",{key:"18c2483d1878e9922e571d74f9994865fff69d9f",class:"tree-view-item__label"},this.label),t("span",{key:"09b24c4ff18845f056c6d490fb3795cf84d81a9a",class:"tree-view-item__tags"},t("slot",{key:"bc45bf6afa16260be7218d2608237251983c7e33",name:"tags"}))),t("ul",{key:"491569e41d788183e23ac3e8fc9beeb483c35573","aria-label":this.label,class:"tree-view-item__children",id:`${this.itemId}-children`,role:"group",style:{display:this.expanded&&this.hasChildren?void 0:"none"}},t("slot",{key:"22c80b13b2044b77c5c1acaa62044127dbe9cf0e"}))))}get el(){return a(this)}};o.style=".sc-swirl-tree-view-item-h{display:block;flex-grow:1}.sc-swirl-tree-view-item-h *.sc-swirl-tree-view-item{box-sizing:border-box}.tree-view-item.sc-swirl-tree-view-item{list-style:none}.tree-view-item--active.sc-swirl-tree-view-item>.tree-view-item__link.sc-swirl-tree-view-item{background-color:var(--s-background-hovered)}.tree-view-item--has-tags.sc-swirl-tree-view-item .tree-view-item__tags.sc-swirl-tree-view-item{display:flex}.tree-view-item__children.sc-swirl-tree-view-item{display:flex;margin:0;padding:0;flex-direction:column;gap:var(--s-space-2)}.tree-view-item__link.sc-swirl-tree-view-item{display:flex;height:2.25rem;padding:var(--s-space-4) var(--s-space-8) var(--s-space-4) var(--s-space-4);align-items:center;border-radius:var(--s-border-radius-sm);color:var(--s-text-default);background-color:var(--s-background-default);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);text-decoration:none;gap:var(--s-space-4)}.tree-view-item__link.sc-swirl-tree-view-item:hover{background-color:var(--s-background-hovered)}.tree-view-item__link.sc-swirl-tree-view-item:active{background-color:var(--s-background-pressed)}.tree-view-item__link.sc-swirl-tree-view-item:focus:not(:focus-visible){outline:none}.tree-view-item__link.sc-swirl-tree-view-item:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__link.sc-swirl-tree-view-item{font-size:var(--s-font-size-sm)}}.tree-view-item__icon.sc-swirl-tree-view-item{display:block;width:1.5rem;height:1.5rem;margin-right:var(--s-space-4);flex-grow:0;flex-shrink:0;color:var(--s-icon-default);font-size:var(--s-font-size-lg)}.tree-view-item__icon.sc-swirl-tree-view-item .sc-swirl-tree-view-item::part(icon){width:100%;height:100%}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__icon.sc-swirl-tree-view-item{width:1.25rem;height:1.25rem;font-size:var(--s-font-size-base)}}.tree-view-item__toggle-icon.sc-swirl-tree-view-item{display:block;width:1.5rem;height:1.5rem;flex-grow:0;flex-shrink:0;color:var(--s-icon-default)}.tree-view-item__toggle-icon.sc-swirl-tree-view-item .sc-swirl-tree-view-item::part(icon){width:100%;height:100%}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__toggle-icon.sc-swirl-tree-view-item{width:1.25rem;height:1.25rem}}.tree-view-item__label.sc-swirl-tree-view-item{overflow:hidden;min-width:5rem;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}.tree-view-item__tags.sc-swirl-tree-view-item{display:none;padding-left:var(--s-space-4);align-items:center;gap:var(--s-space-4)}";export{o as swirl_tree_view_item}
|