@getflip/swirl-components 0.176.0 → 0.177.1

package/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-03-25T10:50:25",
+  "timestamp": "2024-03-26T08:52:27",
   "compiler": {
     "name": "@stencil/core",
     "version": "3.3.1",
@@ -6375,6 +6375,10 @@
         {
           "name": "slot",
           "text": "tools - Optional tools to be displayed on the right side of the item"
+        },
+        {
+          "name": "slot",
+          "text": "additional-content - Optional additional content displayed at the bottom of the item"
         }
       ],
       "usage": {},
@@ -6450,6 +6454,10 @@
       "listeners": [],
       "styles": [],
       "slots": [
+        {
+          "name": "additional-content",
+          "docs": "Optional additional content displayed at the bottom of the item"
+        },
         {
           "name": "slot",
           "docs": "The description"

package/dist/cjs/swirl-description-list-item.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-1de6abbd.js');
 const index$1 = require('./index-2ddd0598.js');
 
-const swirlDescriptionListItemCss = ":host{display:block}:host *{box-sizing:border-box}.description-list-item{display:flex;max-width:100%;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);align-items:center;color:var(--s-text-default);line-height:var(--s-line-height-base);justfiy-content:space-between;gap:var(--s-space-16)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.description-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.description-list-item--bordered{padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.description-list-item:not(.description-list-item--has-tools) .description-list-item__tools{display:none}.description-list-item__text-container{flex-grow:1}.description-list-item__term{display:block;margin-bottom:var(--s-space-4);font-weight:var(--s-font-weight-semibold);overflow-wrap:break-word}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.description-list-item__term{margin-bottom:var(--s-space-2)}}.description-list-item__tooltip{display:inline-flex;vertical-align:middle;margin-left:var(--s-space-4)}.description-list-item__description{display:block;max-width:40rem;margin:0;overflow-wrap:break-word}.description-list-item__tools{flex-shrink:0}";
+const swirlDescriptionListItemCss = ":host{display:block}:host *{box-sizing:border-box}.description-list-item__inner{display:flex;max-width:100%;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);align-items:flex-start;color:var(--s-text-default);line-height:var(--s-line-height-base);justfiy-content:space-between;gap:var(--s-space-16)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.description-list-item__inner{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.description-list-item--bordered{padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.description-list-item:not(.description-list-item--has-tools) .description-list-item__tools{display:none}.description-list-item:not(.description-list-item--has-additional-content) .description-list-item__additional-content{display:none}.description-list-item__text-container{flex-grow:1}.description-list-item__term{display:block;margin-bottom:var(--s-space-4);font-weight:var(--s-font-weight-semibold);overflow-wrap:break-word}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.description-list-item__term{margin-bottom:var(--s-space-2)}}.description-list-item__tooltip{display:inline-flex;margin-left:var(--s-space-4);vertical-align:middle}.description-list-item__description{display:block;max-width:40rem;margin:0;overflow-wrap:break-word}.description-list-item__tools{display:flex;min-height:2.625rem;flex-shrink:0;align-items:center}.description-list-item__additional-content{padding-bottom:var(--s-space-8);flex-basis:100%;flex-shrink:0}";
 
 const SwirlDescriptionListItem = class {
   constructor(hostRef) {
@@ -17,11 +17,13 @@ const SwirlDescriptionListItem = class {
   }
   render() {
     const hasTools = Boolean(this.el.querySelector('[slot="tools"]'));
+    const hasAdditionalContent = Boolean(this.el.querySelector('[slot="additional-content"]'));
     const className = index$1.classnames("description-list-item", {
       "description-list-item--bordered": this.bordered,
+      "description-list-item--has-additional-content": hasAdditionalContent,
       "description-list-item--has-tools": hasTools,
     });
-    return (index.h(index.Host, { role: "listitem" }, index.h("div", { class: className, part: "description-list-item", role: "group" }, index.h("div", { class: "description-list-item__text-container" }, index.h("div", { class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term, this.tooltip && (index.h("span", { class: "description-list-item__tooltip" }, index.h("swirl-tooltip", { content: this.tooltip, position: "right" }, index.h("swirl-icon-info", { size: 16, tabIndex: 0 }))))), index.h("div", { style: { maxWidth: this.maxWidth }, class: "description-list-item__description", role: "definition" }, index.h("slot", null))), index.h("div", { class: "description-list-item__tools" }, index.h("slot", { name: "tools" })))));
+    return (index.h(index.Host, { role: "listitem" }, index.h("div", { class: className, part: "description-list-item", role: "group" }, index.h("div", { class: "description-list-item__inner" }, index.h("div", { class: "description-list-item__text-container" }, index.h("div", { class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term, this.tooltip && (index.h("span", { class: "description-list-item__tooltip" }, index.h("swirl-tooltip", { content: this.tooltip, position: "right" }, index.h("swirl-icon-info", { size: 16, tabIndex: 0 }))))), index.h("div", { style: { maxWidth: this.maxWidth }, class: "description-list-item__description", role: "definition" }, index.h("slot", null))), index.h("div", { class: "description-list-item__tools" }, index.h("slot", { name: "tools" }))), index.h("div", { class: "description-list-item__additional-content" }, index.h("slot", { name: "additional-content" })))));
   }
   get el() { return index.getElement(this); }
 };

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); }
 };