@getflip/swirl-components 0.177.0 → 0.177.1

package/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-03-26T08:32:38",
+  "timestamp": "2024-03-26T08:52:27",
   "compiler": {
     "name": "@stencil/core",
     "version": "3.3.1",

package/dist/cjs/swirl-lightbox.cjs.entry.js

@@ -87,6 +87,11 @@ const SwirlLightbox = class {
       }
       this.close();
     };
+    this.onContextMenu = (event) => {
+      if (!this.downloadButtonEnabled) {
+        event.preventDefault();
+      }
+    };
     this.closeButtonLabel = "Close modal";
     this.downloadButtonEnabled = true;
     this.downloadButtonLabel = "Download";
@@ -240,7 +245,7 @@ const SwirlLightbox = class {
       "lightbox--closing": this.closing,
       "lightbox--hide-menu": !hasMenuItems,
     });
-    return (index.h(index.Host, null, index.h("section", { "aria-hidden": "true", "aria-label": this.label, 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) }, index.h("div", { class: "lightbox__body", role: "document" }, index.h("header", { class: "lightbox__header" }, index.h("button", { "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, index.h("swirl-icon-close", null)), !this.hideMenu && (index.h("swirl-popover-trigger", { popover: this.menu }, index.h("button", { "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, index.h("swirl-icon-more-vertikal", null))))), index.h("div", { "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, index.h("div", { "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, ref: (el) => (this.slidesContainer = el) }, index.h("slot", { onSlotchange: this.registerSlides }))), index.h("div", { class: "lightbox__controls" }, index.h("button", { "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, index.h("swirl-icon-arrow-left", null)), index.h("button", { "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", null))), showPagination && (index.h("span", { class: "lightbox__pagination" }, index.h("span", { "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))), !this.hideMenu && (index.h("swirl-popover", { animation: "scale-in-y", disableScrollLock: true, id: "slide-menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, index.h("swirl-stack", null, index.h("div", { class: "lightbox__meta" }, currentThumbnailUrl && (index.h("div", { class: "lightbox__thumbnail" }, index.h("swirl-thumbnail", { alt: "", src: currentThumbnailUrl }))), index.h("div", { class: "lightbox__file-info" }, index.h("swirl-text", { truncate: true, weight: "semibold" }, currentFileName), index.h("swirl-text", { color: "subdued", size: "sm", truncate: true }, currentFileType))), hasMenuItems && index.h("swirl-separator", null), index.h("swirl-action-list", null, this.downloadButtonEnabled && (index.h("swirl-action-list-item", { icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), index.h("slot", { name: "menu-items" }))))))));
+    return (index.h(index.Host, null, index.h("section", { "aria-hidden": "true", "aria-label": this.label, 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) }, index.h("div", { class: "lightbox__body", role: "document" }, index.h("header", { class: "lightbox__header" }, index.h("button", { "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, index.h("swirl-icon-close", null)), !this.hideMenu && (index.h("swirl-popover-trigger", { popover: this.menu }, index.h("button", { "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, index.h("swirl-icon-more-vertikal", null))))), index.h("div", { "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, index.h("div", { "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (el) => (this.slidesContainer = el) }, index.h("slot", { onSlotchange: this.registerSlides }))), index.h("div", { class: "lightbox__controls" }, index.h("button", { "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, index.h("swirl-icon-arrow-left", null)), index.h("button", { "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", null))), showPagination && (index.h("span", { class: "lightbox__pagination" }, index.h("span", { "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))), !this.hideMenu && (index.h("swirl-popover", { animation: "scale-in-y", disableScrollLock: true, id: "slide-menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, index.h("swirl-stack", null, index.h("div", { class: "lightbox__meta" }, currentThumbnailUrl && (index.h("div", { class: "lightbox__thumbnail" }, index.h("swirl-thumbnail", { alt: "", src: currentThumbnailUrl }))), index.h("div", { class: "lightbox__file-info" }, index.h("swirl-text", { truncate: true, weight: "semibold" }, currentFileName), index.h("swirl-text", { color: "subdued", size: "sm", truncate: true }, currentFileType))), hasMenuItems && index.h("swirl-separator", null), index.h("swirl-action-list", null, this.downloadButtonEnabled && (index.h("swirl-action-list-item", { icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), index.h("slot", { name: "menu-items" }))))))));
   }
   get el() { return index.getElement(this); }
 };