npm - @getflip/swirl-components - Versions diffs - 0.129.1 → 0.131.0 - Mend

@getflip/swirl-components 0.129.1 → 0.131.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.

Files changed (862) hide show

package/dist/collection/components/swirl-avatar/swirl-avatar.css CHANGED Viewed

@@ -40,12 +40,29 @@
     outline-color: var(--s-focus-default);
   }
-.avatar--size-2xs {
+.avatar--size-3xs {
   width: 1.25rem;
   height: 1.25rem;
   font-size: 0.625rem;
 }
+.avatar--size-3xs.avatar--has-icon {
+    padding-right: 0.125rem;
+    padding-left: 0.125rem;
+  }
+.avatar--size-3xs.avatar--variant-square,
+  .avatar--size-3xs.avatar--variant-square .avatar__image,
+  .avatar--size-3xs.avatar--variant-square .avatar__initials {
+    border-radius: 0.25rem;
+  }
+.avatar--size-2xs {
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 0.625rem;
+}
 .avatar--size-2xs.avatar--has-icon {
     padding-right: 0.125rem;
     padding-left: 0.125rem;

package/dist/collection/components/swirl-avatar/swirl-avatar.js CHANGED Viewed

@@ -1,7 +1,8 @@
 import { h, Host } from "@stencil/core";
 import classnames from "classnames";
 const swirlAvatarSizeMappings = {
-  "2xs": 20,
+  "3xs": 20,
+  "2xs": 24,
   xs: 28,
   s: 32,
   m: 40,
@@ -242,7 +243,7 @@ export class SwirlAvatar {
         "mutable": false,
         "complexType": {
           "original": "SwirlAvatarSize",
-          "resolved": "\"2xl\" | \"2xs\" | \"l\" | \"m\" | \"s\" | \"xl\" | \"xs\"",
+          "resolved": "\"2xl\" | \"2xs\" | \"3xs\" | \"l\" | \"m\" | \"s\" | \"xl\" | \"xs\"",
           "references": {
             "SwirlAvatarSize": {
               "location": "local",

package/dist/collection/components/swirl-avatar/swirl-avatar.stories.js CHANGED Viewed

@@ -36,7 +36,6 @@ export default {
 const Template = (args) => {
   const element = generateStoryElement("swirl-avatar", args);
   element.innerHTML = `
-  <swirl-badge aria-label="3 new messages" label="3" size="s" slot="tool"></swirl-badge>
 `;
   return element;
 };

package/dist/collection/components/swirl-file-viewer/swirl-file-viewer.css CHANGED Viewed

@@ -2,6 +2,7 @@
   display: block;
   width: 100%;
   height: 100%;
+  pointer-events: none;
 }
   :host * {

package/dist/collection/components/swirl-file-viewer/viewers/swirl-file-viewer-audio/swirl-file-viewer-audio.css CHANGED Viewed

@@ -2,6 +2,7 @@
   display: inline-flex;
   width: 100%;
   height: 100%;
+  pointer-events: auto;
 }
   :host * {

package/dist/collection/components/swirl-file-viewer/viewers/swirl-file-viewer-csv/swirl-file-viewer-csv.css CHANGED Viewed

@@ -3,6 +3,7 @@
   display: inline-flex;
   width: 100%;
   max-height: 100%;
+  pointer-events: auto;
 }
   :host * {

package/dist/collection/components/swirl-file-viewer/viewers/swirl-file-viewer-image/swirl-file-viewer-image.css CHANGED Viewed

@@ -2,6 +2,7 @@
   position: relative;
   display: inline-flex;
   max-height: 100%;
+  pointer-events: auto;
 }
   :host * {

package/dist/collection/components/swirl-file-viewer/viewers/swirl-file-viewer-pdf/swirl-file-viewer-pdf.css CHANGED Viewed

@@ -3,6 +3,7 @@
   display: inline-flex;
   width: 100%;
   height: 100%;
+  pointer-events: auto;
 }
   :host(.file-viewer-pdf--view-mode-side-by-side) .file-viewer-pdf__pages {

package/dist/collection/components/swirl-file-viewer/viewers/swirl-file-viewer-text/swirl-file-viewer-text.css CHANGED Viewed

@@ -3,6 +3,7 @@
   display: inline-flex;
   width: 100%;
   max-height: 100%;
+  pointer-events: auto;
 }
   :host * {

package/dist/collection/components/swirl-file-viewer/viewers/swirl-file-viewer-video/swirl-file-viewer-video.css CHANGED Viewed

@@ -2,6 +2,7 @@
   display: inline-flex;
   width: 100%;
   max-height: 100%;
+  pointer-events: auto;
 }
   :host * {

package/dist/collection/components/swirl-lightbox/swirl-lightbox.css CHANGED Viewed

@@ -20,7 +20,7 @@
 @media (min-width: 768px) {
 .lightbox {
-    background-color: rgba(0, 0, 0, 0.6)
+    background-color: rgba(0, 0, 0, 0.8)
 }
   }

package/dist/collection/components/swirl-lightbox/swirl-lightbox.js CHANGED Viewed

@@ -14,17 +14,6 @@ export class SwirlLightbox {
       this.slides[this.activeSlideIndex]?.download();
       this.menu.close();
     };
-    this.onKeyDown = (event) => {
-      if (event.code === "Escape") {
-        this.close();
-      }
-      else if (event.code === "ArrowLeft") {
-        this.onPreviousSlideClick();
-      }
-      else if (event.code === "ArrowRight") {
-        this.onNextSlideClick();
-      }
-    };
     this.onNextSlideClick = () => {
       this.activateSlide(Math.min(this.slides.length - 1, this.activeSlideIndex + 1));
     };
@@ -86,6 +75,12 @@ export class SwirlLightbox {
         this.resetSlidePositions();
       }
     };
+    this.onBackdropClick = (event) => {
+      if (event.target !== this.slidesContainer) {
+        return;
+      }
+      this.close();
+    };
     this.closeButtonLabel = "Close modal";
     this.downloadButtonLabel = "Download";
     this.hideMenu = undefined;
@@ -109,6 +104,17 @@ export class SwirlLightbox {
     this.modal?.destroy();
     this.unlockBodyScroll();
   }
+  onKeyDown(event) {
+    if (event.code === "Escape") {
+      this.close();
+    }
+    else if (event.code === "ArrowLeft") {
+      this.onPreviousSlideClick();
+    }
+    else if (event.code === "ArrowRight") {
+      this.onNextSlideClick();
+    }
+  }
   /**
    * Open the lightbox.
    */
@@ -220,7 +226,7 @@ export class SwirlLightbox {
     const className = classnames("lightbox", {
       "lightbox--closing": this.closing,
     });
-    return (h(Host, null, 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, onKeyDown: this.onKeyDown, onTouchEnd: this.onPointerUp, onTouchMove: this.onPointerMove, onTouchStart: this.onPointerDown, ref: (el) => (this.modalEl = el) }, h("div", { class: "lightbox__body", role: "document" }, h("header", { class: "lightbox__header" }, h("button", { "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, h("swirl-icon-close", null)), !this.hideMenu && (h("swirl-popover-trigger", { popover: this.menu }, h("button", { "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, h("swirl-icon-more-vertikal", null))))), h("div", { "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, h("div", { "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides" }, h("slot", { onSlotchange: this.registerSlides }))), h("div", { class: "lightbox__controls" }, h("button", { "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, h("swirl-icon-arrow-left", null)), h("button", { "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick }, h("swirl-icon-arrow-right", null))), showPagination && (h("span", { class: "lightbox__pagination" }, h("span", { "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))), !this.hideMenu && (h("swirl-popover", { animation: "scale-in-y", disableScrollLock: true, id: "slide-menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", null, h("div", { class: "lightbox__meta" }, currentThumbnailUrl && (h("div", { class: "lightbox__thumbnail" }, h("swirl-thumbnail", { alt: "", src: currentThumbnailUrl }))), h("div", { class: "lightbox__file-info" }, h("swirl-text", { truncate: true, weight: "semibold" }, currentFileName), h("swirl-text", { color: "subdued", size: "sm", truncate: true }, currentFileType))), h("swirl-separator", null), h("swirl-action-list", null, h("swirl-action-list-item", { icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick }), h("slot", { name: "menu-items" }))))))));
+    return (h(Host, null, 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) }, h("div", { class: "lightbox__body", role: "document" }, h("header", { class: "lightbox__header" }, h("button", { "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, h("swirl-icon-close", null)), !this.hideMenu && (h("swirl-popover-trigger", { popover: this.menu }, h("button", { "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, h("swirl-icon-more-vertikal", null))))), h("div", { "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, h("div", { "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, ref: (el) => (this.slidesContainer = el) }, h("slot", { onSlotchange: this.registerSlides }))), h("div", { class: "lightbox__controls" }, h("button", { "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, h("swirl-icon-arrow-left", null)), h("button", { "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick }, h("swirl-icon-arrow-right", null))), showPagination && (h("span", { class: "lightbox__pagination" }, h("span", { "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))), !this.hideMenu && (h("swirl-popover", { animation: "scale-in-y", disableScrollLock: true, id: "slide-menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", null, h("div", { class: "lightbox__meta" }, currentThumbnailUrl && (h("div", { class: "lightbox__thumbnail" }, h("swirl-thumbnail", { alt: "", src: currentThumbnailUrl }))), h("div", { class: "lightbox__file-info" }, h("swirl-text", { truncate: true, weight: "semibold" }, currentFileName), h("swirl-text", { color: "subdued", size: "sm", truncate: true }, currentFileType))), h("swirl-separator", null), h("swirl-action-list", null, h("swirl-action-list-item", { icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick }), h("slot", { name: "menu-items" }))))))));
   }
   static get is() { return "swirl-lightbox"; }
   static get encapsulation() { return "shadow"; }
@@ -449,4 +455,13 @@ export class SwirlLightbox {
     };
   }
   static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "keydown",
+        "method": "onKeyDown",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

package/dist/collection/components/swirl-lightbox/swirl-lightbox.spec.js CHANGED Viewed

@@ -119,21 +119,18 @@ describe("swirl-lightbox", () => {
         </swirl-lightbox>
       `,
     });
+    page.rootInstance.modal.shown = true;
     // wait for animation
     await new Promise((resolve) => setTimeout(resolve, 300));
     const slides = page.rootInstance.slides;
-    page.root.shadowRoot
-      .querySelector("#lightbox")
-      .dispatchEvent(new KeyboardEvent("keydown", { code: "ArrowRight" }));
+    page.doc.dispatchEvent(new KeyboardEvent("keydown", { code: "ArrowRight" }));
     // wait for animation
     await new Promise((resolve) => setTimeout(resolve, 300));
     expect(slides[0].getAttribute("active")).toBe("true");
     expect(slides[1].getAttribute("active")).toBe("true");
     expect(slides[2].getAttribute("active")).toBe("true");
     expect(page.rootInstance.activeSlideIndex).toBe(1);
-    page.root.shadowRoot
-      .querySelector("#lightbox")
-      .dispatchEvent(new KeyboardEvent("keydown", { code: "ArrowLeft" }));
+    page.doc.dispatchEvent(new KeyboardEvent("keydown", { code: "ArrowLeft" }));
     // wait for animation
     await new Promise((resolve) => setTimeout(resolve, 300));
     expect(slides[0].getAttribute("active")).toBe("true");

package/dist/collection/components/swirl-popover/swirl-popover.js CHANGED Viewed

@@ -108,7 +108,9 @@ export class SwirlPopover {
       .some((el) => Boolean(el) && el instanceof Node
       ? this.el.contains(el)
       : false);
-    const clickedTrigger = target === this.triggerEl || this.triggerEl.contains(target);
+    const clickedTrigger = target === this.triggerEl ||
+      this.triggerEl.contains(target) ||
+      event.composedPath().includes(this.triggerEl);
     if (!clickedChild && !clickedShadowChild && !clickedTrigger) {
       this.close();
     }

package/dist/collection/components/swirl-time-input/swirl-time-input.js CHANGED Viewed

@@ -32,6 +32,7 @@ export class SwirlTimeInput {
       this.valueChange.emit(newValue);
     };
     this.onBlur = (event) => {
+      this.inputBlur.emit(event);
       const input = event.target;
       const dateValue = parse(input.value, this.format, new Date());
       if (!isValid(dateValue) && Boolean(this.value)) {
@@ -51,6 +52,7 @@ export class SwirlTimeInput {
       event.preventDefault();
     };
     this.onFocus = (event) => {
+      this.inputFocus.emit(event);
       this.handleAutoSelect(event);
     };
     this.autoFocus = undefined;
@@ -312,6 +314,44 @@ export class SwirlTimeInput {
   }
   static get events() {
     return [{
+        "method": "inputBlur",
+        "name": "inputBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
+          "references": {
+            "FocusEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "inputFocus",
+        "name": "inputFocus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
+          "references": {
+            "FocusEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
         "method": "valueChange",
         "name": "valueChange",
         "bubbles": true,