@getflip/swirl-components 0.213.0 → 0.213.2

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 CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2024-07-12T08:47:06",
2
+ "timestamp": "2024-07-12T11:19:09",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.18.1",
@@ -151,7 +151,7 @@ const SwirlLightbox = class {
151
151
  },
152
152
  },
153
153
  });
154
- this.focusTrap.activate();
154
+ this.focusTrap?.activate();
155
155
  });
156
156
  }
157
157
  /**
@@ -162,7 +162,7 @@ const SwirlLightbox = class {
162
162
  return;
163
163
  }
164
164
  this.closing = true;
165
- this.focusTrap.deactivate();
165
+ this.focusTrap?.deactivate();
166
166
  this.unlockBodyScroll();
167
167
  setTimeout(() => {
168
168
  this.isOpen = false;
@@ -264,7 +264,7 @@ const SwirlLightbox = class {
264
264
  "lightbox--hide-menu": !hasMenuItems,
265
265
  "lightbox--hide-toolbar": !hasToolbar,
266
266
  });
267
- return (index.h(index.Host, { key: '012891b0db835105a7580bad43bccce2b389769d', onKeydown: this.onKeyDown }, index.h("section", { key: 'b293082c033d560d15dc78118f95b4bca5bca954', "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: '5fe1877d3e6c56db2277b1d4de02f5471a81435e', class: "lightbox__body", role: "document" }, index.h("header", { key: '53ee69774f4525b937758d1614991a8e508a41b2', class: "lightbox__header" }, index.h("button", { key: '6bc6027025c29da201e60326f60b0287a5ed25f6', "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, index.h("swirl-icon-close", { key: '1e1c5a418da66c5aab172142c660365631c80db8' })), index.h("div", { key: 'b4a31f60db6fe4bc738527a25f1dcfc239619748', class: "lightbox__toolbar" }, index.h("slot", { key: '3d7d99d8f63701dbc8c7f091d388eacbf30288da', name: "toolbar" })), !this.hideMenu && (index.h("swirl-popover-trigger", { key: 'd7a17fcf78810181ae21e979f652152f8842afae', swirlPopover: this.menu }, index.h("button", { key: '9836e1a84fda8ab4419486051a402eb928ea8914', "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, index.h("swirl-icon-more-vertikal", { key: 'ddf16aee28f502ec5eb960833533f1bec6e667e3' }))))), index.h("div", { key: 'b7448e6187d1b97439fcbbd70c03f2a01ebeca18', "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, index.h("div", { key: 'c65b7f37ef28a0cf7f2744cb0f5d64b8872a1990', "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (el) => (this.slidesContainer = el) }, index.h("slot", { key: 'df683e35aa1750cb69424d4b83ce70d3946faf84', onSlotchange: this.registerSlides }))), index.h("div", { key: '9ff646ddac7774be9ed4f668470f54cf0d0113cc', class: "lightbox__controls" }, index.h("button", { key: 'b07e6b6c8708394d826791f216f7bc7b0f307839', "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, index.h("swirl-icon-arrow-left", { key: 'af25abff2e4ca1cf6d5b16b43a77ea028b90e571' })), index.h("button", { key: '3a22bfdfa042251d74ecdbc4d87516ea300c5ced', "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: '248a0b730aacf7381b20134253c41984a9b91a24' }))), showPagination && (index.h("span", { key: '1807b6f0d21fb2410772a682373678458329ac38', class: "lightbox__pagination" }, index.h("span", { key: '23376bbf8611300e5d4d158975d23796191b02ea', "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))), !this.hideMenu && (index.h("swirl-popover", { key: '519bf63ab4ee728ba357637db647e8e7abeb9fbf', 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: '023c442075b900f00d50523213dfc466f813de23' }, index.h("div", { key: '0dc758f7b9eb51c23e95c6338dfe31327e190be0', class: "lightbox__meta" }, currentThumbnailUrl && (index.h("div", { key: 'e703f937124d3698d3404d0da19adbaceba4cf58', class: "lightbox__thumbnail" }, index.h("swirl-thumbnail", { key: 'f97ae890ec3497533f7272eb0b973e3e04a79b3a', alt: "", src: currentThumbnailUrl }))), index.h("div", { key: '4a53904b0f1b9760b5fe796e9fa7ad141c87fae0', class: "lightbox__file-info" }, index.h("swirl-text", { key: 'f98d773d89087ac30d6b74db1d65fb86ce8e880e', truncate: true, weight: "semibold" }, currentFileName), index.h("swirl-text", { key: '8df08e6b94f940fb13029bd31b19a9af7b22eea8', color: "subdued", size: "sm", truncate: true }, currentFileType))), hasMenuItems && index.h("swirl-separator", { key: '44dd5efecd57e94cab79ef012929f208c46b1158' }), index.h("swirl-action-list", { key: '77fd5492f4e037cb8ea2a2d840967b520baed782' }, this.downloadButtonEnabled && (index.h("swirl-action-list-item", { key: '1c7650890e90b283eed2746eaa22e2e72d951418', icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), index.h("slot", { key: '7955b578c31f23970abe13f46b25b53d5ae5cf50', name: "menu-items" }))))))));
267
+ return (index.h(index.Host, { key: '6f38a02323c43b2068f4325e3d644a1cf3836d08', onKeydown: this.onKeyDown }, index.h("section", { key: 'c7b37a6ea2b219b019e135ab72a982cc6c397eb2', "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: 'ba45b8d5c3066c6050e23888208c23b9fbceecef', class: "lightbox__body", role: "document" }, index.h("header", { key: '38b9fbec51a8e8893729d68cc2e78fa2808cc02f', class: "lightbox__header" }, index.h("button", { key: '5c9748775b0fb8303005dbd3ea4f4460bca135a3', "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, index.h("swirl-icon-close", { key: '470336593999047c371f8ffefc1bdcc53454a824' })), index.h("div", { key: 'c8362fb5fa227be5968984256550e016436cf7d4', class: "lightbox__toolbar" }, index.h("slot", { key: '6644556b4386c215eae9f7750fbcfcc84bd70627', name: "toolbar" })), !this.hideMenu && (index.h("swirl-popover-trigger", { key: 'b32143c69f2d23324549d0035dfe67b819bb035e', swirlPopover: this.menu }, index.h("button", { key: '65dd4bd6cf8dcd0388a21b66b0ef9fe6ab3ea46f', "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, index.h("swirl-icon-more-vertikal", { key: '6c0ae26d6db0a9eeda62f6e7e4b50a1583da3139' }))))), index.h("div", { key: '9098924cfb4e236818e0b99a46c1d182bbafc667', "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, index.h("div", { key: '62207dbf4df5cdef6430c45caf3a6364d1a2cd89', "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (el) => (this.slidesContainer = el) }, index.h("slot", { key: '73d3cdddef1a02a2a620eefeb4104adc900e4b9c', onSlotchange: this.registerSlides }))), index.h("div", { key: 'b074e1f32dd0c57536092e4e7e62c497ab5ef982', class: "lightbox__controls" }, index.h("button", { key: '6b18629bee35d41169433a141058a0eec4b4bbe1', "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, index.h("swirl-icon-arrow-left", { key: 'a985ec6541a5d14f6a80d31badfb2326b7859feb' })), index.h("button", { key: 'dacf055ac17e8cb0acf8f886ffaebfc6433dbe40', "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: 'a5b1b929bf83d959bf156907e27d2745961a3253' }))), showPagination && (index.h("span", { key: '8522b6ba8a13e937fef9c52a9f0ba4ea3db3be9a', class: "lightbox__pagination" }, index.h("span", { key: 'a91b35586cebed170a14f25650b2e0aad7612114', "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))), !this.hideMenu && (index.h("swirl-popover", { key: '10fd0b20ae94675060c3862e066d58115487c5ec', 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: '3d230ae7bb3a13ff267691eea08fb296e25f5d3c' }, index.h("div", { key: '912b5d37523c60014c40b8a44901e9b57e16a943', class: "lightbox__meta" }, currentThumbnailUrl && (index.h("div", { key: 'f6cb69f77c7d01bba6f678639223336904276cf7', class: "lightbox__thumbnail" }, index.h("swirl-thumbnail", { key: '0c5454ff4e7c8d434f098ad263b3da6e6792c43d', alt: "", src: currentThumbnailUrl }))), index.h("div", { key: 'd2e7c5b8c3836ec12f22fa93bc4795500d54ccd3', class: "lightbox__file-info" }, index.h("swirl-text", { key: 'd8128db7fa6aa56a8e0b08657925ae9c4137a440', truncate: true, weight: "semibold" }, currentFileName), index.h("swirl-text", { key: '6d8effcdc5b6198786c4302fcf2aa17ee878e66f', color: "subdued", size: "sm", truncate: true }, currentFileType))), hasMenuItems && index.h("swirl-separator", { key: '206b0b31b24d0cb0c605916fd4ac846c3f5ad719' }), index.h("swirl-action-list", { key: '0060ce14704b2c2c6967b5399b2b2db83a327063' }, this.downloadButtonEnabled && (index.h("swirl-action-list-item", { key: '526ed63e300600eb41ec615950d9c7de0ce5f8ae', icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), index.h("slot", { key: 'df2fa48984cdf48a0787ed7d514d4c7d43f2a4c0', name: "menu-items" }))))))));
268
268
  }
269
269
  get el() { return index.getElement(this); }
270
270
  };