@getflip/swirl-components 0.252.0 → 0.252.1
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 +1 -1
- package/dist/cjs/swirl-image-grid-item.cjs.entry.js +6 -4
- package/dist/cjs/swirl-shell-navigation-item.cjs.entry.js +1 -1
- package/dist/collection/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/collection/components/swirl-image-grid-item/swirl-image-grid-item.js +6 -4
- package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.stories.js +4 -4
- package/dist/collection/components/swirl-shell-navigation-item/swirl-shell-navigation-item.css +18 -14
- package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/components/swirl-image-grid-item.js +6 -4
- package/dist/components/swirl-shell-navigation-item.js +1 -1
- package/dist/esm/swirl-image-grid-item.entry.js +6 -4
- package/dist/esm/swirl-shell-navigation-item.entry.js +1 -1
- package/dist/swirl-components/p-7e293fb7.entry.js +1 -0
- package/dist/swirl-components/p-d2b58951.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-image-grid-item/swirl-image-grid-item.d.ts +1 -0
- package/package.json +1 -1
- package/dist/swirl-components/p-9428f8b6.entry.js +0 -1
- package/dist/swirl-components/p-a03f56fa.entry.js +0 -1
package/components.json
CHANGED
|
@@ -67,9 +67,11 @@ const SwirlImageGridItem = class {
|
|
|
67
67
|
this.computedSrc = this.src;
|
|
68
68
|
this.gifPaused = false;
|
|
69
69
|
}
|
|
70
|
+
componentWillLoad() {
|
|
71
|
+
this.computedSrc = this.src;
|
|
72
|
+
}
|
|
70
73
|
componentDidLoad() {
|
|
71
74
|
this.setupIntersectionObserver();
|
|
72
|
-
this.computedSrc = this.src;
|
|
73
75
|
if (this.img?.complete) {
|
|
74
76
|
this.loaded = true;
|
|
75
77
|
}
|
|
@@ -128,16 +130,16 @@ const SwirlImageGridItem = class {
|
|
|
128
130
|
"image-grid-item--has-error": this.error,
|
|
129
131
|
"image-grid-item--has-overlay": this.overlay,
|
|
130
132
|
});
|
|
131
|
-
return (index.h(index.Host, { key: '
|
|
133
|
+
return (index.h(index.Host, { key: 'cdc714907ae1fc9c9624f56f41b9fcf0025eb285', "data-sibling-count": siblingCount, role: "listitem" }, index.h(Tag, { key: '5464cfb479a797e4dfa90c47079998948f2e3157', class: className, type: this.interactive ? "button" : undefined }, index.h("div", { key: '6f25439257b6df1507c7799c4a3b59b2c7a6e7d0', class: "image-grid-item__background", style: {
|
|
132
134
|
backgroundImage: showBlurredBackground
|
|
133
135
|
? `url(${this.computedSrc})`
|
|
134
136
|
: undefined,
|
|
135
137
|
} }), this.loading !== "intersecting" ||
|
|
136
138
|
this.inViewport ||
|
|
137
|
-
this.gifPaused ? (index.h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined, onError: this.onError, onLoad: this.onLoad, ref: (el) => (this.img = el), src: this.computedSrc })) : (index.h("div", { class: "image-grid-item__loading-placeholder" })), this.showGifControls && (index.h("swirl-stack", { key: '
|
|
139
|
+
this.gifPaused ? (index.h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined, onError: this.onError, onLoad: this.onLoad, ref: (el) => (this.img = el), src: this.computedSrc })) : (index.h("div", { class: "image-grid-item__loading-placeholder" })), this.showGifControls && (index.h("swirl-stack", { key: 'fb75324360455d6cfe7e2284e7412377cc855427', class: "image-grid-item__gif-controls", orientation: "horizontal", spacing: "4" }, index.h("button", { key: 'c830ee3ce7ae6dec733814c87ead9e86e9f849bd', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--button", onClick: this.handleControlClick, type: "button", "aria-label": this.gifPaused ? this.gifPlayLabel : this.gifPauseLabel }, this.gifPaused ? (index.h("swirl-icon-play-arrow", { size: 20 })) : (index.h("swirl-icon-pause", { size: 20 }))), index.h("div", { key: '095c819753f83f4626adfedb8a0f684263b295bb', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--label" }, index.h("swirl-icon-gif", { key: '64bc862874b6823ceabaaf0aa23a5a2b0f3c5358', size: 20 })))), this.loaded &&
|
|
138
140
|
!this.error &&
|
|
139
141
|
this.icon &&
|
|
140
|
-
!Boolean(this.overlay) && (index.h("div", { key: '
|
|
142
|
+
!Boolean(this.overlay) && (index.h("div", { key: '3c555ad4e984cc83e3d1b0c4a890357f2733dd79', class: "image-grid-item__icon", innerHTML: this.icon })), this.overlay && (index.h("div", { key: '6bbf9b518ef50a33b67a7bfcd6401a910343efbc', class: "image-grid-item__overlay" }, this.overlay)), !this.loaded && (index.h("div", { key: 'b9a362e3241d12569702f3a4a23ad982cd578343', class: "image-grid-item__spinner" }, index.h("swirl-spinner", { key: '8321dbb7ecc0f011267542aab3f4778c80ee1af0' }))), this.loaded && this.error && (index.h("div", { key: '5d4b51352870858fc00e89d59ea66ad3323568dd', class: "image-grid-item__error" }, index.h("swirl-icon-error", { key: 'caf660c996da50aea9089a4ed3d186598685d03b', color: "critical" }))))));
|
|
141
143
|
}
|
|
142
144
|
get el() { return index.getElement(this); }
|
|
143
145
|
static get watchers() { return {
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-2ab5d772.js');
|
|
6
6
|
const index$1 = require('./index-9f94303c.js');
|
|
7
7
|
|
|
8
|
-
const swirlShellNavigationItemCss = "/**\n* seems the container query does not work as expected\n*/\n\n:host {\n display: inline-flex;\n width: 100%;\n}\n\n:host * {\n box-sizing: border-box;\n }\n\n.shell-navigation-item {\n --swirl-app-icon-size: 1.5rem;\n\n position: relative;\n display: flex;\n width: 100%;\n height: 3rem;\n padding: var(--s-space-8);\n flex-shrink: 0;\n justify-content: flex-start;\n align-items: center;\n border: none;\n border-radius: var(--s-border-radius-sm);\n color: var(--s-text-default);\n background-color: var(--s-surface-overlay-default);\n font: inherit;\n font-size: var(--s-font-size-sm);\n font-weight: var(--s-font-weight-medium);\n line-height: var(--s-line-height-sm);\n text-decoration: none;\n cursor: pointer;\n container-type: size;\n gap: var(--s-space-12);\n}\n\n.shell-navigation-item:hover {\n background-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item:hover .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item:active {\n background-color: var(--s-surface-sunken-pressed);\n }\n\n.shell-navigation-item:active .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n }\n\n.shell-navigation-item:focus {\n outline: none;\n }\n\n.shell-navigation-item:focus-visible {\n z-index: 1;\n box-shadow: 0 0 0 0.125rem var(--s-focus-default);\n }\n\n.shell-navigation-item.shell-navigation-item--boxed {\n --swirl-app-icon-size: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--boxed .shell-navigation-item__icon {\n overflow: hidden;\n border-
|
|
8
|
+
const swirlShellNavigationItemCss = "/**\n* seems the container query does not work as expected\n*/\n\n:host {\n display: inline-flex;\n width: 100%;\n}\n\n:host * {\n box-sizing: border-box;\n }\n\n.shell-navigation-item {\n --swirl-app-icon-size: 1.5rem;\n --swirl-shell-navigation-item-gradient: linear-gradient(\n rgba(0, 0, 0, 0),\n rgba(0, 0, 0, 0.8)\n );\n\n position: relative;\n display: flex;\n width: 100%;\n height: 3rem;\n padding: var(--s-space-8);\n flex-shrink: 0;\n justify-content: flex-start;\n align-items: center;\n border: none;\n border-radius: var(--s-border-radius-sm);\n color: var(--s-text-default);\n background-color: var(--s-surface-overlay-default);\n font: inherit;\n font-size: var(--s-font-size-sm);\n font-weight: var(--s-font-weight-medium);\n line-height: var(--s-line-height-sm);\n text-decoration: none;\n cursor: pointer;\n container-type: size;\n gap: var(--s-space-12);\n}\n\n.shell-navigation-item:hover {\n background-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item:hover .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item:active {\n background-color: var(--s-surface-sunken-pressed);\n }\n\n.shell-navigation-item:active .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n }\n\n.shell-navigation-item:focus {\n outline: none;\n }\n\n.shell-navigation-item:focus-visible {\n z-index: 1;\n box-shadow: 0 0 0 0.125rem var(--s-focus-default);\n }\n\n.shell-navigation-item.shell-navigation-item--boxed {\n --swirl-app-icon-size: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--boxed .shell-navigation-item__icon {\n overflow: hidden;\n border-radius: var(--s-border-radius-sm);\n background-color: var(--s-background-default);\n box-shadow: 0 0 0 var(--s-border-width-default) var(--s-border-default);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled {\n --swirl-app-icon-size: 100%;\n\n height: auto;\n padding: 0;\n align-items: start;\n border-radius: var(--s-border-radius-base);\n flex-direction: column;\n container-type: inline-size;\n gap: var(--s-space-8);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled:hover {\n background-color: transparent;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled:hover .shell-navigation-item__label {\n text-decoration: underline;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled ::slotted(*) {\n position: absolute;\n top: var(--s-space-12);\n left: var(--s-space-12);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled ::slotted(swirl-app-icon) {\n position: inherit;\n width: 100%;\n height: 100%;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__icon {\n overflow: hidden;\n width: 100%;\n min-width: 100%;\n height: auto;\n min-height: auto;\n border-radius: var(--s-border-radius-base);\n background-color: var(--s-surface-sunken-hovered);\n aspect-ratio: 1;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled.shell-navigation-item--gradient .shell-navigation-item__icon::after {\n position: absolute;\n display: inline-block;\n width: 100%;\n border-radius: var(--s-border-radius-base);\n background-image: var(--swirl-shell-navigation-item-gradient);\n content: \"\";\n aspect-ratio: 1;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge {\n position: absolute;\n top: -0.375rem;\n right: -0.375rem;\n padding: var(--s-space-2);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label {\n display: -webkit-box;\n overflow: hidden;\n color: var(--s-text-default);\n font-weight: var(--s-font-weight-semibold);\n text-align: start;\n white-space: normal;\n text-overflow: unset;\n overflow-wrap: anywhere;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline {\n position: absolute;\n bottom: var(--s-space-12);\n left: var(--s-space-12);\n margin-right: var(--s-space-12);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--light {\n color: rgba(242, 242, 242, 1);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--dark {\n color: rgb(25, 25, 25);\n }\n\n.shell-navigation-item.shell-navigation-item--active {\n background-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__icon {\n color: var(--s-icon-highlight);\n }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__label {\n color: var(--s-text-highlight);\n }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item.shell-navigation-item--active:hover {\n background-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item.shell-navigation-item--active:hover .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item.shell-navigation-item--active:active {\n background-color: var(--s-surface-sunken-pressed);\n }\n\n.shell-navigation-item.shell-navigation-item--active:active .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n }\n\n@media (min-width: 992px) {\n\n.shell-navigation-item {\n background-color: var(--s-surface-sunken-default)\n}\n }\n\n.shell-navigation-item__icon {\n display: inline-flex;\n width: 2rem;\n min-width: 2rem;\n height: 2rem;\n min-height: 2rem;\n justify-content: center;\n align-items: center;\n}\n\n.shell-navigation-item__label {\n overflow: hidden;\n min-width: 0;\n flex-grow: 1;\n text-align: start;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.shell-navigation-item__badge {\n --swirl-badge-border-color: var(--swirl-shell-background);\n}\n\n@container (max-width: 4rem) {\n .shell-navigation-item__label {\n display: none;\n }\n\n .shell-navigation-item__badge {\n position: absolute;\n top: var(--s-space-4);\n right: var(--s-space-4);\n padding: var(--s-space-2);\n }\n\n .shell-navigation-item--gradient .shell-navigation-item__icon {\n --swirl-shell-navigation-item-gradient: none;\n }\n\n .shell-navigation-item__badge--dot {\n top: var(--s-space-8);\n right: var(--s-space-8);\n }\n}\n\n@container (min-width: 10rem) {\n .shell-navigation-item__badge--dot {\n padding-right: var(--s-space-4);\n }\n}\n";
|
|
9
9
|
const SwirlShellNavigationItemStyle0 = swirlShellNavigationItemCss;
|
|
10
10
|
|
|
11
11
|
const SwirlShellNavigationItem = class {
|