@getflip/swirl-components 0.298.0 → 0.299.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.
- package/README.md +4 -4
- package/components.json +8 -4
- package/dist/cjs/swirl-lightbox.cjs.entry.js +3 -2
- package/dist/cjs/swirl-skeleton-box.cjs.entry.js +4 -4
- package/dist/collection/assets/pdfjs/pdf.worker.min.js +22 -0
- package/dist/collection/components/swirl-lightbox/swirl-lightbox.js +3 -2
- package/dist/collection/components/swirl-lightbox/swirl-lightbox.stories.js +1 -1
- package/dist/collection/components/swirl-skeleton-box/swirl-skeleton-box.css +4 -0
- package/dist/collection/components/swirl-skeleton-box/swirl-skeleton-box.js +4 -4
- package/dist/components/assets/pdfjs/pdf.worker.min.js +22 -0
- package/dist/components/swirl-lightbox.js +3 -2
- package/dist/components/swirl-skeleton-box.js +4 -4
- package/dist/esm/swirl-lightbox.entry.js +3 -2
- package/dist/esm/swirl-skeleton-box.entry.js +4 -4
- package/dist/swirl-components/p-ce86d711.entry.js +1 -0
- package/dist/swirl-components/p-ea76572f.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-skeleton-box/swirl-skeleton-box.d.ts +1 -1
- package/package.json +1 -1
- package/vscode-data.json +3 -0
- package/dist/swirl-components/p-360a7193.entry.js +0 -1
- package/dist/swirl-components/p-9122a6b8.entry.js +0 -1
package/README.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# Swirl Web Component Library
|
|
2
2
|
|
|
3
|
-
The Swirl Web Component
|
|
4
|
-
development for the Flip
|
|
5
|
-
are composable, performant, accessible and well-tested, while
|
|
6
|
-
the UX and UI design requirements of the Swirl Design System.
|
|
3
|
+
The Swirl Web Component library provides a framework-agnostic foundation for UI
|
|
4
|
+
development for the Flip apps and integrations. It implements a set of solid UI
|
|
5
|
+
components that are composable, performant, accessible and well-tested, while
|
|
6
|
+
also satisfying the UX and UI design requirements of the Swirl Design System.
|
|
7
7
|
|
|
8
8
|
[Check the Documentation](https://swirl-storybook.flip-app.dev/)
|
package/components.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2025-
|
|
2
|
+
"timestamp": "2025-03-04T09:18:35",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "@stencil/core",
|
|
5
5
|
"version": "4.18.1",
|
|
@@ -50982,10 +50982,10 @@
|
|
|
50982
50982
|
},
|
|
50983
50983
|
{
|
|
50984
50984
|
"name": "borderRadius",
|
|
50985
|
-
"type": "\"base\" | \"pill\" | \"s\" | \"sm\"",
|
|
50985
|
+
"type": "\"base\" | \"none\" | \"pill\" | \"s\" | \"sm\"",
|
|
50986
50986
|
"complexType": {
|
|
50987
50987
|
"original": "SwirlSkeletonBoxBorderRadius",
|
|
50988
|
-
"resolved": "\"base\" | \"pill\" | \"s\" | \"sm\"",
|
|
50988
|
+
"resolved": "\"base\" | \"none\" | \"pill\" | \"s\" | \"sm\"",
|
|
50989
50989
|
"references": {
|
|
50990
50990
|
"SwirlSkeletonBoxBorderRadius": {
|
|
50991
50991
|
"location": "local",
|
|
@@ -51005,6 +51005,10 @@
|
|
|
51005
51005
|
"value": "base",
|
|
51006
51006
|
"type": "string"
|
|
51007
51007
|
},
|
|
51008
|
+
{
|
|
51009
|
+
"value": "none",
|
|
51010
|
+
"type": "string"
|
|
51011
|
+
},
|
|
51008
51012
|
{
|
|
51009
51013
|
"value": "pill",
|
|
51010
51014
|
"type": "string"
|
|
@@ -62188,7 +62192,7 @@
|
|
|
62188
62192
|
"path": "src/components/swirl-shell-navigation-item/swirl-shell-navigation-item.tsx"
|
|
62189
62193
|
},
|
|
62190
62194
|
"src/components/swirl-skeleton-box/swirl-skeleton-box.tsx::SwirlSkeletonBoxBorderRadius": {
|
|
62191
|
-
"declaration": "export type SwirlSkeletonBoxBorderRadius
|
|
62195
|
+
"declaration": "export type SwirlSkeletonBoxBorderRadius =\n | \"s\"\n | \"sm\"\n | \"base\"\n | \"pill\"\n | \"none\";",
|
|
62192
62196
|
"docstring": "",
|
|
62193
62197
|
"path": "src/components/swirl-skeleton-box/swirl-skeleton-box.tsx"
|
|
62194
62198
|
},
|
|
@@ -255,7 +255,8 @@ const SwirlLightbox = class {
|
|
|
255
255
|
});
|
|
256
256
|
}
|
|
257
257
|
getCurrentFileName() {
|
|
258
|
-
|
|
258
|
+
const activeSlide = this.slides[this.activeSlideIndex];
|
|
259
|
+
return activeSlide?.fileName || activeSlide?.file?.split("/").pop();
|
|
259
260
|
}
|
|
260
261
|
getCurrentFileType() {
|
|
261
262
|
return this.slides[this.activeSlideIndex]?.type;
|
|
@@ -297,7 +298,7 @@ const SwirlLightbox = class {
|
|
|
297
298
|
"lightbox--hide-menu": !hasMenuItems,
|
|
298
299
|
"lightbox--hide-toolbar": !hasToolbar,
|
|
299
300
|
});
|
|
300
|
-
return (index.h(index.Host, { key: '
|
|
301
|
+
return (index.h(index.Host, { key: 'd3d03598de6bc850b14983c65f50c4956f337db4', onKeydown: this.onKeyDown }, index.h("section", { key: '035520946bc86d9fd39f69a929429155f39128ac', "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: '924c6ddcf773f739a02f3eac40a85bebb05b00d8', class: "lightbox__body", role: "document" }, index.h("header", { key: 'abde93a32e109d23045b60ef021b5a6e395c5106', class: "lightbox__header" }, index.h("button", { key: 'cd106ff12b26c1cd4f20eff9b9b606c1eb3c2b0c', "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, index.h("swirl-icon-close", { key: '3daadf28b1572117fd80ef2ee5a01c9a5bf553a1' })), index.h("div", { key: '09faa1918dd1d158fb8db1ac62c92e9b7ef18dfc', class: "lightbox__toolbar" }, index.h("slot", { key: '494edef3a0449c2605b55abde0be66f92ad1191b', name: "toolbar" })), !this.hideMenu && (index.h("swirl-popover-trigger", { key: '48d9ea9f7fb0a8a56a402d2f52b72d82e2fafb0b', swirlPopover: this.menu }, index.h("button", { key: '4f8a369b128d508bd720e0fa66a8a45114d762d4', "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, index.h("swirl-icon-more-vertikal", { key: '882646fcab72ca10537c6a42b8109bdd38eb8283' }))))), index.h("div", { key: 'bb96acbb12f5cc7fa2fa7769bf2ee0257f1c2461', "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, index.h("div", { key: '60d4900f96d5833894267c2ad07c9880425ff010', "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (el) => (this.slidesContainer = el) }, index.h("slot", { key: 'd29256b029b979ff95c214577cfedc1791a16b28', onSlotchange: this.registerSlides }))), index.h("div", { key: '6413fa0b0c71cfc02e53297f8593cc094bcc3bfe', class: "lightbox__controls" }, index.h("button", { key: 'fc77b0028b862e949d007b34c2e19e6beea7ed59', "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, index.h("swirl-icon-arrow-left", { key: 'a577e41ca07cdfce79f1800f34b6ad55f0fd4fe0' })), index.h("button", { key: '69dca0c03facabd87f06a684c2f9cd5b634c67a9', "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: '43672103b69379f241dfb29dd136d4b44415af1e' }))), showPagination && (index.h("span", { key: '59c60639d329faa44bbcd9c3aaee602c8bc2a4ed', class: "lightbox__pagination" }, index.h("span", { key: '40fcf4e2a7a9363811aaa7ee68830d4f560f2d8d', "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))), !this.hideMenu && (index.h("swirl-popover", { key: '12c4c54e98cf2e3f26f97b9a5cc772e1ebc65eb6', 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: 'a02a33c1b7691396289aadb12fdc19086f13f72d' }, index.h("div", { key: 'dfe31fde3473c57810bdaf2b6c0e203bbe1fc588', class: "lightbox__meta" }, currentThumbnailUrl && (index.h("div", { key: '93539bc099e182a312b4d33e5bb75edd1a5acd2e', class: "lightbox__thumbnail" }, index.h("swirl-thumbnail", { key: '7bb1a238d96e2f85784703539e2201a3092f8c9e', alt: "", src: currentThumbnailUrl }))), index.h("div", { key: '59e97cd3a4dcee146524968816b45be44c8707a3', class: "lightbox__file-info" }, index.h("swirl-text", { key: '5e54b16cd8f73a15831d481f2d2067e1f0104f58', truncate: true, weight: "semibold" }, currentFileName), index.h("swirl-text", { key: 'd910adcec06527a16a7af587e7318b339ba89141', color: "subdued", size: "sm", truncate: true }, currentFileType))), hasMenuItems && index.h("swirl-separator", { key: '09b367a3dc2d06a3c5cfc80b436b1ddd747cca79' }), index.h("swirl-action-list", { key: '62cd42d711c2efe345c2f71ee0afe0f78b9b806b' }, this.downloadButtonEnabled && (index.h("swirl-action-list-item", { key: '7a93b6d1de3eac5d1af132d1feedae7912b61498', icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), index.h("slot", { key: 'ef2f9c8e826085094737fec86b19526bc7ee1c7b', name: "menu-items" }))))))));
|
|
301
302
|
}
|
|
302
303
|
get el() { return index.getElement(this); }
|
|
303
304
|
static get watchers() { return {
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-1a9a1551.js');
|
|
6
6
|
const index$1 = require('./index-9f94303c.js');
|
|
7
7
|
|
|
8
|
-
const swirlSkeletonBoxCss = ":host{display:block}:host *{box-sizing:border-box}.skeleton-box{position:relative;overflow:hidden;min-height:var(--s-font-size-sm);background-color:var(--s-surface-raised-hovered)}.skeleton-box:before{position:relative;z-index:1;display:block;width:100%;height:100%;background-image:linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0) 0,\n rgba(255, 255, 255, 0) 12%,\n var(--s-surface-raised-default) 50%,\n rgba(255, 255, 255, 0) 88%,\n rgba(255, 255, 255, 0) 100%\n );content:\"\";transform:translateX(-100%);animation:skeleton-box-shimmer 3s infinite}@keyframes skeleton-box-shimmer{100%{transform:translateX(100%)}}.skeleton-box--static:before{display:none}.skeleton-box--border-radius-pill{border-radius:100rem}";
|
|
8
|
+
const swirlSkeletonBoxCss = ":host{display:block}:host *{box-sizing:border-box}.skeleton-box{position:relative;overflow:hidden;min-height:var(--s-font-size-sm);background-color:var(--s-surface-raised-hovered)}.skeleton-box:before{position:relative;z-index:1;display:block;width:100%;height:100%;background-image:linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0) 0,\n rgba(255, 255, 255, 0) 12%,\n var(--s-surface-raised-default) 50%,\n rgba(255, 255, 255, 0) 88%,\n rgba(255, 255, 255, 0) 100%\n );content:\"\";transform:translateX(-100%);animation:skeleton-box-shimmer 3s infinite}@keyframes skeleton-box-shimmer{100%{transform:translateX(100%)}}.skeleton-box--static:before{display:none}.skeleton-box--border-radius-pill{border-radius:100rem}.skeleton-box--border-radius-none{border-radius:0}";
|
|
9
9
|
const SwirlSkeletonBoxStyle0 = swirlSkeletonBoxCss;
|
|
10
10
|
|
|
11
11
|
const SwirlSkeletonBox = class {
|
|
@@ -19,13 +19,13 @@ const SwirlSkeletonBox = class {
|
|
|
19
19
|
}
|
|
20
20
|
render() {
|
|
21
21
|
const className = index$1.classnames("skeleton-box", `skeleton-box--border-radius-${this.borderRadius}`, { "skeleton-box--static": !this.animated });
|
|
22
|
-
return (index.h(index.Host, { key: '
|
|
22
|
+
return (index.h(index.Host, { key: '23da455bc33e38b34976684865dc0051585c3040', style: {
|
|
23
23
|
width: !Boolean(this.width) && !Boolean(this.aspectRatio)
|
|
24
24
|
? "100%"
|
|
25
25
|
: undefined,
|
|
26
|
-
} }, index.h("div", { key: '
|
|
26
|
+
} }, index.h("div", { key: 'a7226d23181a3e1ea3a824cc37e9ce6e7b2f34cb', class: className, style: {
|
|
27
27
|
aspectRatio: this.aspectRatio,
|
|
28
|
-
borderRadius: this.borderRadius !== "pill"
|
|
28
|
+
borderRadius: this.borderRadius !== "pill" && this.borderRadius !== "none"
|
|
29
29
|
? `var(--s-border-radius-${this.borderRadius})`
|
|
30
30
|
: undefined,
|
|
31
31
|
height: this.height,
|