@getflip/swirl-components 0.234.0 → 0.235.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/components.json +1 -1
- package/dist/cjs/swirl-lightbox.cjs.entry.js +19 -12
- 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-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-tree-view-item.js +9 -3
- package/dist/esm/swirl-lightbox.entry.js +19 -12
- 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-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-9f4d5705.entry.js +0 -1
- package/dist/swirl-components/p-fc9b30f6.entry.js +0 -1
package/components.json
CHANGED
|
@@ -49,6 +49,9 @@ const SwirlLightbox = class {
|
|
|
49
49
|
this.setSlideAttributes();
|
|
50
50
|
};
|
|
51
51
|
this.onPointerDown = (event) => {
|
|
52
|
+
if (this.slides.length <= 1) {
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
52
55
|
this.dragging = true;
|
|
53
56
|
this.dragStartPosition =
|
|
54
57
|
event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
|
|
@@ -57,6 +60,9 @@ const SwirlLightbox = class {
|
|
|
57
60
|
});
|
|
58
61
|
};
|
|
59
62
|
this.onPointerMove = async (event) => {
|
|
63
|
+
if (!this.dragging) {
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
60
66
|
const isMultiTouch = !(event instanceof MouseEvent) && event.touches.length > 1;
|
|
61
67
|
const imageViewer = this.slides[this.activeSlideIndex]?.shadowRoot?.querySelector("swirl-file-viewer-image");
|
|
62
68
|
const showsZoomedImage = Boolean(imageViewer)
|
|
@@ -65,19 +71,20 @@ const SwirlLightbox = class {
|
|
|
65
71
|
if (isMultiTouch || showsZoomedImage) {
|
|
66
72
|
return;
|
|
67
73
|
}
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
this.
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
});
|
|
78
|
-
}
|
|
74
|
+
event.preventDefault();
|
|
75
|
+
const deltaX = event instanceof MouseEvent
|
|
76
|
+
? event.clientX - this.dragStartPosition
|
|
77
|
+
: event.touches[0].clientX - this.dragStartPosition;
|
|
78
|
+
this.slides.forEach((slide) => {
|
|
79
|
+
const pixelOffset = this.activeSlideIndex * slide.getBoundingClientRect().width;
|
|
80
|
+
this.dragDelta = deltaX;
|
|
81
|
+
slide.style.transform = `translate3d(${(-pixelOffset + this.dragDelta) / 16}rem, 0, 0)`;
|
|
82
|
+
});
|
|
79
83
|
};
|
|
80
84
|
this.onPointerUp = () => {
|
|
85
|
+
if (!this.dragging) {
|
|
86
|
+
return;
|
|
87
|
+
}
|
|
81
88
|
this.dragging = false;
|
|
82
89
|
this.dragStartPosition = undefined;
|
|
83
90
|
const dragRatio = this.dragDelta /
|
|
@@ -268,7 +275,7 @@ const SwirlLightbox = class {
|
|
|
268
275
|
"lightbox--hide-menu": !hasMenuItems,
|
|
269
276
|
"lightbox--hide-toolbar": !hasToolbar,
|
|
270
277
|
});
|
|
271
|
-
return (index.h(index.Host, { key: '
|
|
278
|
+
return (index.h(index.Host, { key: '711c0392474fa14a7fac934bac030614277b00bb', onKeydown: this.onKeyDown }, index.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 }, index.h("div", { key: '693d8618fa2160a65c92752f1905bc1dcec916d0', class: "lightbox__body", role: "document" }, index.h("header", { key: '4ebbd00119a77c104f00bf5ecac020af03ea389c', class: "lightbox__header" }, index.h("button", { key: '56a6a0f54ff17b609af4edd0e5923b1155f2fa6e', "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, index.h("swirl-icon-close", { key: '0816497d2f8012e860146c6a8494edde9bc834d2' })), index.h("div", { key: '4c22c991a5f8f1f6b691d4f9b1e08c6d30b45569', class: "lightbox__toolbar" }, index.h("slot", { key: '1891cad14a36356781d4a048cff42a650bffb214', name: "toolbar" })), !this.hideMenu && (index.h("swirl-popover-trigger", { key: '371d1f3dea6b3264e3192b6f7dc6336efb1a2284', swirlPopover: this.menu }, index.h("button", { key: '73b7f96f9fc510c0e6dfeea714681c7ba71539d4', "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, index.h("swirl-icon-more-vertikal", { key: 'a8eeb497a471968a5c00bf69e5acdf513f3f84d6' }))))), index.h("div", { key: 'b6ea4cfdd22f2e3137c971d541dc0e20e51a17fa', "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, index.h("div", { key: '14f010e3ff24ff158f280680f86afd14039edbd7', "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (el) => (this.slidesContainer = el) }, index.h("slot", { key: 'efeec16ff88ff1f58d3e8c56f4f16290f3ec08f8', onSlotchange: this.registerSlides }))), index.h("div", { key: 'd2178f1d694ef3e41960872a920157337c455e1e', class: "lightbox__controls" }, index.h("button", { key: '583737358a6018e3fb694da1e89ddd0f0456dc69', "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, index.h("swirl-icon-arrow-left", { key: '5b3c53f7c3de10df0bc450efeac73b0d3ba1a055' })), index.h("button", { key: 'dad26a76dbf5321a3a121a0f00ada47ef96f89a4', "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick }, index.h("swirl-icon-arrow-right", { key: '2a3e12886335250986ba13b27c526890cc61c9ef' }))), showPagination && (index.h("span", { key: '6dc3eb07c58459904cebc3c55b1a3ea61d04b7f9', class: "lightbox__pagination" }, index.h("span", { key: 'cc9efa1750bac95f556619b87b9ad530364ddf29', "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))), !this.hideMenu && (index.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) }, index.h("swirl-stack", { key: '86e96e34f5bfd024f21ad20cb5533702c0b87a75' }, index.h("div", { key: '0ba6335bf5b625fef945a03f3d30229dcbb4d9fe', class: "lightbox__meta" }, currentThumbnailUrl && (index.h("div", { key: '0cc28e6a455db3f9e3b5b38b500e2e9d4e4be105', class: "lightbox__thumbnail" }, index.h("swirl-thumbnail", { key: '1994f956fa046cf197ff519416792ecfc27c25cb', alt: "", src: currentThumbnailUrl }))), index.h("div", { key: '9ed5a72ff591a77835bf8ddc7cf905c73fb6d4ee', class: "lightbox__file-info" }, index.h("swirl-text", { key: '5d404ac3bfcae7933ee21c996c0df458476e42c3', truncate: true, weight: "semibold" }, currentFileName), index.h("swirl-text", { key: '58f21622b74914fc2523bfa7d34c171cba96fdd9', color: "subdued", size: "sm", truncate: true }, currentFileType))), hasMenuItems && index.h("swirl-separator", { key: '975065e045ecd021ad2f196be3f05e4a9f94ee7f' }), index.h("swirl-action-list", { key: 'fb09c171d08e50f688fa6c3f60cbbd23e83cb709' }, this.downloadButtonEnabled && (index.h("swirl-action-list-item", { key: 'c3576a179fb57f9f3115234d6a757a0dc58b3ee8', icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), index.h("slot", { key: '438269a75c8c02c58c329bce89651d170d2ccedd', name: "menu-items" }))))))));
|
|
272
279
|
}
|
|
273
280
|
get el() { return index.getElement(this); }
|
|
274
281
|
static get watchers() { return {
|
|
@@ -43,10 +43,16 @@ const SwirlTreeViewItem = class {
|
|
|
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 = class {
|
|
|
74
80
|
"tree-view-item--active": this.active,
|
|
75
81
|
"tree-view-item--has-tags": hasTags,
|
|
76
82
|
});
|
|
77
|
-
return (index.h(index.Host, { key: '
|
|
83
|
+
return (index.h(index.Host, { key: 'a350471e6d4a63098c22ac8856fb642bef79a8e4', id: this.itemId, role: "none" }, index.h("li", { key: '6485eca3fa6bc73bc6d849946d3cd3f8447c1f96', class: className, role: "none" }, index.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 }, index.h("span", { key: '
|
|
85
|
+
}, ref: (el) => (this.link = el), role: "treeitem", tabIndex: this.selected ? 0 : -1 }, index.h("span", { key: '38545839a14a02be2d5215cf8243d8442315d01f', class: "tree-view-item__toggle-icon" }, this.hasChildren && (index.h(index.Fragment, { key: '5985b994251fbeba1d4951ef97d2d886be896b47' }, this.expanded ? (index.h("swirl-icon-expand-more", { onClick: this.onClickCollapse, size: 24 })) : (index.h("swirl-icon-chevron-right", { onClick: this.onClickExpand, size: 24 }))))), Boolean(this.icon) && (index.h(index.Fragment, { key: '5cf0e41959520d380cb4e26fcde2f7ad7a5ad2d8' }, index.h("span", { key: 'a1ba2c49d276f726d41d31c857f08977b4dca993', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (index.h("swirl-icon", { glyph: this.icon, size: 24 }))))), index.h("span", { key: '18c2483d1878e9922e571d74f9994865fff69d9f', class: "tree-view-item__label" }, this.label), index.h("span", { key: '09b24c4ff18845f056c6d490fb3795cf84d81a9a', class: "tree-view-item__tags" }, index.h("slot", { key: 'bc45bf6afa16260be7218d2608237251983c7e33', name: "tags" }))), index.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
|
-
} }, index.h("slot", { key: '
|
|
87
|
+
} }, index.h("slot", { key: '22c80b13b2044b77c5c1acaa62044127dbe9cf0e' })))));
|
|
82
88
|
}
|
|
83
89
|
get el() { return index.getElement(this); }
|
|
84
90
|
};
|