@getflip/swirl-components 0.241.3 → 0.242.0

package/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-10-08T14:03:33",
+  "timestamp": "2024-10-22T16:19:20",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.18.1",

package/dist/cjs/swirl-image-grid.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-2ab5d772.js');
 const index$1 = require('./index-9f94303c.js');
 
-const swirlImageGridCss = ":host{display:block}:host *{box-sizing:border-box}.image-grid{display:grid;overflow:hidden;width:100%;min-height:0;border-radius:var(--s-border-radius-sm);gap:var(--s-space-2)}.image-grid--item-count-1{grid-template-columns:100%;grid-template-rows:100%}.image-grid--item-count-2{grid-template-columns:repeat(2, calc(50% - var(--s-space-2) / 2))}.image-grid--item-count-3{grid-template-columns:calc(100% / 3 * 2 - var(--space-2) / 2) calc(\n      100% / 3 - var(--s-space-2) / 2\n    )}.image-grid--item-count-3 ::slotted(*:nth-child(1)){grid-column-start:1;grid-row-start:1;grid-row-end:3}.image-grid--item-count-3 ::slotted(*:nth-child(3)){grid-column-start:2}.image-grid--item-count-4{grid-template-columns:repeat(2, calc(50% - var(--s-space-2) / 2));grid-template-rows:repeat(2, calc(50% - var(--s-space-2) / 2))}";
+const swirlImageGridCss = ":host{display:block}:host *{box-sizing:border-box}.image-grid{display:grid;overflow:hidden;width:100%;min-height:0;border-radius:var(--s-border-radius-sm);gap:var(--s-space-2)}.image-grid--item-count-1{grid-template-columns:100%;grid-template-rows:100%}.image-grid--item-count-2{grid-template-columns:repeat(2, calc(50% - var(--s-space-2) / 2))}.image-grid--item-count-3{grid-template-columns:calc(100% / 3 * 2) calc(\n      100% / 3 - var(--s-space-2) / 2\n    );grid-template-rows:calc(50% - var(--s-space-2) / 2)}.image-grid--item-count-3 ::slotted(*:nth-child(1)){grid-column-start:1;grid-row-start:1;grid-row-end:3}.image-grid--item-count-3 ::slotted(*:nth-child(3)){grid-column-start:2}.image-grid--item-count-4{grid-template-columns:repeat(2, calc(50% - var(--s-space-2) / 2));grid-template-rows:repeat(2, calc(50% - var(--s-space-2) / 2))}";
 const SwirlImageGridStyle0 = swirlImageGridCss;
 
 const SwirlImageGrid = class {
@@ -17,6 +17,20 @@ const SwirlImageGrid = class {
                 this.items[3].overlay = `+${this.items.length - 4}`;
             }
         };
+        this.caculateAspectRatio = () => {
+            switch (this.items.length) {
+                case 1:
+                    return this.aspectRatio;
+                case 2:
+                    return "2/1";
+                case 3:
+                    return "3/2";
+                case 4:
+                    return "1";
+                default:
+                    return "1";
+            }
+        };
         this.aspectRatio = "1/1";
         this.label = undefined;
         this.items = [];
@@ -26,7 +40,8 @@ const SwirlImageGrid = class {
     }
     render() {
         const className = index$1.classnames("image-grid", `image-grid--item-count-${Math.min(4, this.items.length)}`);
-        return (index.h(index.Host, { key: '8aa0201454ae7cac1368fb5ee923568220f23994' }, index.h("div", { key: 'c1bc6c32ab59053042a83f29aea5023431bceb04', "aria-label": this.label, class: className, role: "list", style: { aspectRatio: this.aspectRatio } }, index.h("slot", { key: '67124f8c2703cb1042a431ccd1972df71fa6618d', onSlotchange: this.updateItems }))));
+        const aspectRatio = this.caculateAspectRatio();
+        return (index.h(index.Host, { key: '95a2b995672ed04da173df7e6c4463044e78014d' }, index.h("div", { key: '44fb98feabe360972f20a5ad7f7db30b826ebe47', "aria-label": this.label, class: className, role: "list", style: { aspectRatio: aspectRatio } }, index.h("slot", { key: 'e6a71271c34969eb7addc50f21c2081084f9aab3', onSlotchange: this.updateItems }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -75,7 +75,7 @@ const SwirlToolbar = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'b99b48ca99a102b317587c27deabd8fcd2ef4862' }, index.h("swirl-stack", { key: '384ddc14cb2ed8adb4914fe02c44898bacab2386', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8" }, index.h("slot", { key: '8be3a8baba733641d3aac1f1b0854f0191e1e702' }))));
+        return (index.h(index.Host, { key: 'b99b48ca99a102b317587c27deabd8fcd2ef4862' }, index.h("swirl-stack", { key: '5f37a4b04ae86acc12e7c923466d1ccafe80dc61', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8", wrap: true }, index.h("slot", { key: '468bbff3894acf369feda7a56db6b432445e71f6' }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/collection/components/swirl-image-grid/swirl-image-grid.css

@@ -25,9 +25,10 @@
 }
 
 .image-grid--item-count-3 {
-  grid-template-columns: calc(100% / 3 * 2 - var(--space-2) / 2) calc(
+  grid-template-columns: calc(100% / 3 * 2) calc(
       100% / 3 - var(--s-space-2) / 2
     );
+  grid-template-rows: calc(50% - var(--s-space-2) / 2);
 }
 
 .image-grid--item-count-3 ::slotted(*:nth-child(1)) {

package/dist/collection/components/swirl-image-grid/swirl-image-grid.js

@@ -8,6 +8,20 @@ export class SwirlImageGrid {
                 this.items[3].overlay = `+${this.items.length - 4}`;
             }
         };
+        this.caculateAspectRatio = () => {
+            switch (this.items.length) {
+                case 1:
+                    return this.aspectRatio;
+                case 2:
+                    return "2/1";
+                case 3:
+                    return "3/2";
+                case 4:
+                    return "1";
+                default:
+                    return "1";
+            }
+        };
         this.aspectRatio = "1/1";
         this.label = undefined;
         this.items = [];
@@ -17,7 +31,8 @@ export class SwirlImageGrid {
     }
     render() {
         const className = classnames("image-grid", `image-grid--item-count-${Math.min(4, this.items.length)}`);
-        return (h(Host, { key: '8aa0201454ae7cac1368fb5ee923568220f23994' }, h("div", { key: 'c1bc6c32ab59053042a83f29aea5023431bceb04', "aria-label": this.label, class: className, role: "list", style: { aspectRatio: this.aspectRatio } }, h("slot", { key: '67124f8c2703cb1042a431ccd1972df71fa6618d', onSlotchange: this.updateItems }))));
+        const aspectRatio = this.caculateAspectRatio();
+        return (h(Host, { key: '95a2b995672ed04da173df7e6c4463044e78014d' }, h("div", { key: '44fb98feabe360972f20a5ad7f7db30b826ebe47', "aria-label": this.label, class: className, role: "list", style: { aspectRatio: aspectRatio } }, h("slot", { key: 'e6a71271c34969eb7addc50f21c2081084f9aab3', onSlotchange: this.updateItems }))));
     }
     static get is() { return "swirl-image-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-image-grid/swirl-image-grid.stories.js

@@ -19,8 +19,8 @@ export const SwirlImageGrid = Template.bind({});
 SwirlImageGrid.args = {
     aspectRatio: "16 / 9",
     slot: `
-    <swirl-image-grid-item alt="Cute dog in a blanket" interactive src="/sample.jpg"></swirl-image-grid-item>
-    <swirl-image-grid-item alt="Cute dog in a blanket" interactive src="/sample-2.jpg"></swirl-image-grid-item>
-    <swirl-image-grid-item alt="Blinking cat" interactive src="/sample.gif" show-gif-controls></swirl-image-grid-item>
+    <swirl-image-grid-item alt="Cute dog in a blanket" interactive loading="intersecting" src="/sample.jpg"></swirl-image-grid-item>
+    <swirl-image-grid-item alt="Cute dog in a blanket" interactive loading="intersecting" src="/sample-2.jpg"></swirl-image-grid-item>
+    <swirl-image-grid-item alt="Blinking cat" interactive loading="intersecting" src="/sample.gif" show-gif-controls></swirl-image-grid-item>
   `,
 };

package/dist/collection/components/swirl-toolbar/swirl-toolbar.js

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { getActiveElement } from "../../utils";
 export class SwirlToolbar {
     constructor() {
@@ -66,7 +66,7 @@ export class SwirlToolbar {
         });
     }
     render() {
-        return (h(Host, { key: 'b99b48ca99a102b317587c27deabd8fcd2ef4862' }, h("swirl-stack", { key: '384ddc14cb2ed8adb4914fe02c44898bacab2386', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8" }, h("slot", { key: '8be3a8baba733641d3aac1f1b0854f0191e1e702' }))));
+        return (h(Host, { key: 'b99b48ca99a102b317587c27deabd8fcd2ef4862' }, h("swirl-stack", { key: '5f37a4b04ae86acc12e7c923466d1ccafe80dc61', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8", wrap: true }, h("slot", { key: '468bbff3894acf369feda7a56db6b432445e71f6' }))));
     }
     static get is() { return "swirl-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-toolbar/swirl-toolbar.spec.js

@@ -15,7 +15,7 @@ describe("swirl-toolbar", () => {
         expect(page.root).toEqualHtml(`
       <swirl-toolbar>
         <mock:shadow-root>
-          <swirl-stack align="center" aria-orientation="horizontal" orientation="horizontal" role="toolbar" spacing="8">
+          <swirl-stack align="center" aria-orientation="horizontal" orientation="horizontal" role="toolbar" spacing="8" wrap="">
             <slot></slot>
           </swirl-stack>
         </mock:shadow-root>