@getflip/swirl-components 0.363.2 → 0.363.4
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-modal.cjs.entry.js +10 -10
- package/dist/cjs/swirl-time-input.cjs.entry.js +2 -1
- package/dist/collection/components/swirl-modal/swirl-modal.js +10 -10
- package/dist/collection/components/swirl-time-input/swirl-time-input.js +2 -1
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -1
- package/dist/components/swirl-modal.js +10 -10
- package/dist/components/swirl-time-input.js +2 -1
- package/dist/esm/swirl-modal.entry.js +10 -10
- package/dist/esm/swirl-time-input.entry.js +2 -1
- package/dist/swirl-components/p-4c87fcab.entry.js +1 -0
- package/dist/swirl-components/p-c94f245b.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/package.json +1 -1
- package/dist/swirl-components/p-0846e5fa.entry.js +0 -1
- package/dist/swirl-components/p-a6609f84.entry.js +0 -1
package/components.json
CHANGED
|
@@ -128,7 +128,7 @@ const SwirlModal = class {
|
|
|
128
128
|
this.determineScrollStatus();
|
|
129
129
|
});
|
|
130
130
|
setTimeout(() => {
|
|
131
|
-
this.focusTrap
|
|
131
|
+
this.focusTrap?.activate();
|
|
132
132
|
this.handleAutoFocus();
|
|
133
133
|
}, 200);
|
|
134
134
|
}
|
|
@@ -146,7 +146,7 @@ const SwirlModal = class {
|
|
|
146
146
|
this.closing = true;
|
|
147
147
|
this.unlockBodyScroll();
|
|
148
148
|
setTimeout(() => {
|
|
149
|
-
this.focusTrap
|
|
149
|
+
this.focusTrap?.deactivate();
|
|
150
150
|
this.isOpen = false;
|
|
151
151
|
this.modalClose.emit();
|
|
152
152
|
this.closing = false;
|
|
@@ -235,29 +235,29 @@ const SwirlModal = class {
|
|
|
235
235
|
"modal--sidebar-scrolled-down": this.sidebarScrolledDown,
|
|
236
236
|
"modal--sidebar-scrollable": this.sidebarScrollable,
|
|
237
237
|
});
|
|
238
|
-
return (index.h(index.Host, { key: '
|
|
238
|
+
return (index.h(index.Host, { key: '7c24fee5323e2df19dabcb9a5a91655f0f28d4a1' }, index.h("section", { key: '4c30f0c893b6dbff9583c739793c877db7776d13', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, index.h("div", { key: '9c54e0b2b50d584c7e1ee97f2228d3d7d9b3cdf8', class: "modal__backdrop", onClick: this.onBackdropClick }), index.h("div", { key: 'ac2f5576bfbf714ba3a6bf1eda46c25d30237737', class: "modal__body", style: !this.isFullscreen
|
|
239
239
|
? {
|
|
240
240
|
"--swirl-modal-max-height": this.maxHeight,
|
|
241
241
|
"--swirl-modal-height": this.height,
|
|
242
242
|
minHeight: this.minHeight,
|
|
243
243
|
maxWidth: this.maxWidth,
|
|
244
244
|
}
|
|
245
|
-
: {} }, index.h("aside", { key: '
|
|
245
|
+
: {} }, index.h("aside", { key: '8ef849f9a5e17ccceb7cff955e39bc28892dd28c', class: "modal__sidebar" }, this.sidebarLabel && (index.h("header", { key: '2352dc5cb17e549f064dcd5ed0abfb7d99fec9e3', class: index$1.classnames("modal__sidebar-header", {
|
|
246
246
|
"modal__sidebar-header--has-close-button": this.hasSidebarCloseButton,
|
|
247
|
-
}) }, this.hasSidebarCloseButton && (index.h("swirl-button", { key: '
|
|
247
|
+
}) }, this.hasSidebarCloseButton && (index.h("swirl-button", { key: '004b9da5c81869306984a3aa87519ae452800fd1', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), index.h("swirl-heading", { key: '69bde9ad0b480e9969e56c089c29117bf1f28d10', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), index.h("div", { key: 'a6346c2c7fde58212c6f5097d5d70606c3183e1b', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, index.h("slot", { key: '02bcee4978aa640ecbb3b4417cdb3e50291445cb', name: "sidebar-content" })), index.h("div", { key: '136c44311e48b3b88db6c642f245915656e59233', class: "modal__sidebar-footer" }, index.h("slot", { key: 'a5e8df9f9147b7da7fd96a7efb9b3f71d4075d45', name: "sidebar-footer" }))), index.h("div", { key: 'bb0170d8b569589cb559fedadfb3a0723c618934', class: "modal__main-content" }, index.h("header", { key: 'ee87585b97d37bd9521a3efb97af9c24fea9d83e', class: "modal__custom-header" }, index.h("slot", { key: '5ee6d3e095940d24906edb710a574a13d82566ec', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (index.h("header", { key: '387bfdb294a2da6dca9126e19127548770d7e323', class: "modal__header" }, index.h("div", { key: '4a54700cd7a2824447892206073af4f5dbec9451', class: "modal__header-bar" }, !this.hideCloseButton && (index.h("swirl-button", { key: 'd6c3c80fb0c2cdee570e987bcc290e6581246f74', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
|
|
248
248
|
? "<swirl-icon-close></swirl-icon-close>"
|
|
249
|
-
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (index.h("swirl-button", { key: '
|
|
249
|
+
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (index.h("swirl-button", { key: 'c3879455946bd91bf57c33fd8693fe0601933ead', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
|
|
250
250
|
? "<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>"
|
|
251
251
|
: "<swirl-icon-open-in-full></swirl-icon-open-in-full>", label: this.isFullscreen
|
|
252
252
|
? this.fullscreenDisableButtonLabel
|
|
253
|
-
: this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (index.h("swirl-heading", { key: '
|
|
253
|
+
: this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (index.h("swirl-heading", { key: 'd3b7a16db9e4feae042a90ae3d2d8505757205ff', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), index.h("div", { key: '3b55bc21765c6d3ed98cd7c8787fe69906164aeb', class: "modal__content-container", style: {
|
|
254
254
|
gap: this.contentGap
|
|
255
255
|
? `var(--s-space-${this.contentGap})`
|
|
256
256
|
: undefined,
|
|
257
|
-
} }, index.h("div", { key: '
|
|
257
|
+
} }, index.h("div", { key: 'd417c7f1e060b64bc7be2b98bffd5a1d1d460c0a', class: "modal__primary-content", style: {
|
|
258
258
|
maxWidth: this.primaryContentMaxWidth,
|
|
259
259
|
flex: this.primaryContentFlex,
|
|
260
|
-
} }, index.h("div", { key: '
|
|
260
|
+
} }, index.h("div", { key: '36fc3cce5333dec26141a19ed94e16d0e536bd32', class: "modal__header-tools" }, index.h("slot", { key: '36df33eb9c484e602ed9c5d245f50e4ebcbff514', name: "header-tools" })), index.h("div", { key: '3a1fd477b1d5b70291d163f3e0c2759fde8dd34c', class: "modal__content", onScroll: this.determineMainScrollStatus, ref: (el) => (this.scrollContainer = el) }, index.h("slot", { key: 'cdd147f7e0320742091611b92ef5318065d6bd2f' }))), index.h("div", { key: 'bafcb6677a0da44e76e56ca189a8dbf4afa1f573', class: "modal__secondary-content", style: {
|
|
261
261
|
maxWidth: this.secondaryContentMaxWidth,
|
|
262
262
|
flex: this.secondaryContentFlex,
|
|
263
263
|
padding: Boolean(this.secondaryContentPadding)
|
|
@@ -275,7 +275,7 @@ const SwirlModal = class {
|
|
|
275
275
|
paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
|
|
276
276
|
? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
|
|
277
277
|
: undefined,
|
|
278
|
-
} }, index.h("slot", { key: '
|
|
278
|
+
} }, index.h("slot", { key: 'c6061a71b7d66b3e204ff7c4f075ae4908c4cfae', name: "secondary-content" }))), index.h("div", { key: 'd1501d2c4431b43d053a67e3fb99922dea905dcb', class: "modal__custom-footer" }, index.h("slot", { key: '404cb5ab7559754b1944fbb675518afcfffcadfd', name: "custom-footer" })), showControls && (index.h("footer", { key: 'f2cadd2076b5c180494935945894fd468e0c46ba', class: "modal__controls" }, index.h("swirl-button-group", { key: 'd24df43e386d5431f5df152c5840bd290dbb38fd', wrap: true }, this.secondaryActionLabel && (index.h("swirl-button", { key: '1cb65ccd7d85057820d2afb79e647f078d70a9c7', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (index.h("swirl-button", { key: '705ca5cf78b9d0f0c576288cf94f6d9208e66def', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
|
|
279
279
|
}
|
|
280
280
|
get el() { return index.getElement(this); }
|
|
281
281
|
};
|
|
@@ -56,6 +56,7 @@ const SwirlTimeInput = class {
|
|
|
56
56
|
watchValue(newValue, oldValue) {
|
|
57
57
|
if (newValue !== oldValue) {
|
|
58
58
|
this.valueChange.emit(newValue);
|
|
59
|
+
this.mask.value = newValue;
|
|
59
60
|
}
|
|
60
61
|
}
|
|
61
62
|
updateIconSize(smallIcon) {
|
|
@@ -144,7 +145,7 @@ const SwirlTimeInput = class {
|
|
|
144
145
|
const className = index$2.classnames("time-input", {
|
|
145
146
|
"time-input--inline": this.inline,
|
|
146
147
|
});
|
|
147
|
-
return (index.h(index.Host, { key: '
|
|
148
|
+
return (index.h(index.Host, { key: 'bb150e1e738e6b70dd32089de213f0ad8ce49db8' }, index.h("div", { key: '58728d57b1349781a97070a9b8d47d27123946ab', class: className }, index.h("input", { key: '84e63c31acfc49b1b54fbce93c0351ed3359da28', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text" }), index.h("span", { key: '98ac3a262dee95ab34e94f80a7632d074b881f64', class: "time-input__icon" }, index.h("swirl-icon-time-outlined", { key: '8266ab31d312c5d5947feb6c77dfe20b727cc601', size: this.iconSize })))));
|
|
148
149
|
}
|
|
149
150
|
get el() { return index.getElement(this); }
|
|
150
151
|
static get watchers() { return {
|
|
@@ -124,7 +124,7 @@ export class SwirlModal {
|
|
|
124
124
|
this.determineScrollStatus();
|
|
125
125
|
});
|
|
126
126
|
setTimeout(() => {
|
|
127
|
-
this.focusTrap
|
|
127
|
+
this.focusTrap?.activate();
|
|
128
128
|
this.handleAutoFocus();
|
|
129
129
|
}, 200);
|
|
130
130
|
}
|
|
@@ -142,7 +142,7 @@ export class SwirlModal {
|
|
|
142
142
|
this.closing = true;
|
|
143
143
|
this.unlockBodyScroll();
|
|
144
144
|
setTimeout(() => {
|
|
145
|
-
this.focusTrap
|
|
145
|
+
this.focusTrap?.deactivate();
|
|
146
146
|
this.isOpen = false;
|
|
147
147
|
this.modalClose.emit();
|
|
148
148
|
this.closing = false;
|
|
@@ -231,29 +231,29 @@ export class SwirlModal {
|
|
|
231
231
|
"modal--sidebar-scrolled-down": this.sidebarScrolledDown,
|
|
232
232
|
"modal--sidebar-scrollable": this.sidebarScrollable,
|
|
233
233
|
});
|
|
234
|
-
return (h(Host, { key: '
|
|
234
|
+
return (h(Host, { key: '7c24fee5323e2df19dabcb9a5a91655f0f28d4a1' }, h("section", { key: '4c30f0c893b6dbff9583c739793c877db7776d13', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, h("div", { key: '9c54e0b2b50d584c7e1ee97f2228d3d7d9b3cdf8', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'ac2f5576bfbf714ba3a6bf1eda46c25d30237737', class: "modal__body", style: !this.isFullscreen
|
|
235
235
|
? {
|
|
236
236
|
"--swirl-modal-max-height": this.maxHeight,
|
|
237
237
|
"--swirl-modal-height": this.height,
|
|
238
238
|
minHeight: this.minHeight,
|
|
239
239
|
maxWidth: this.maxWidth,
|
|
240
240
|
}
|
|
241
|
-
: {} }, h("aside", { key: '
|
|
241
|
+
: {} }, h("aside", { key: '8ef849f9a5e17ccceb7cff955e39bc28892dd28c', class: "modal__sidebar" }, this.sidebarLabel && (h("header", { key: '2352dc5cb17e549f064dcd5ed0abfb7d99fec9e3', class: classnames("modal__sidebar-header", {
|
|
242
242
|
"modal__sidebar-header--has-close-button": this.hasSidebarCloseButton,
|
|
243
|
-
}) }, this.hasSidebarCloseButton && (h("swirl-button", { key: '
|
|
243
|
+
}) }, this.hasSidebarCloseButton && (h("swirl-button", { key: '004b9da5c81869306984a3aa87519ae452800fd1', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), h("swirl-heading", { key: '69bde9ad0b480e9969e56c089c29117bf1f28d10', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), h("div", { key: 'a6346c2c7fde58212c6f5097d5d70606c3183e1b', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, h("slot", { key: '02bcee4978aa640ecbb3b4417cdb3e50291445cb', name: "sidebar-content" })), h("div", { key: '136c44311e48b3b88db6c642f245915656e59233', class: "modal__sidebar-footer" }, h("slot", { key: 'a5e8df9f9147b7da7fd96a7efb9b3f71d4075d45', name: "sidebar-footer" }))), h("div", { key: 'bb0170d8b569589cb559fedadfb3a0723c618934', class: "modal__main-content" }, h("header", { key: 'ee87585b97d37bd9521a3efb97af9c24fea9d83e', class: "modal__custom-header" }, h("slot", { key: '5ee6d3e095940d24906edb710a574a13d82566ec', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: '387bfdb294a2da6dca9126e19127548770d7e323', class: "modal__header" }, h("div", { key: '4a54700cd7a2824447892206073af4f5dbec9451', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: 'd6c3c80fb0c2cdee570e987bcc290e6581246f74', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
|
|
244
244
|
? "<swirl-icon-close></swirl-icon-close>"
|
|
245
|
-
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: '
|
|
245
|
+
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: 'c3879455946bd91bf57c33fd8693fe0601933ead', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
|
|
246
246
|
? "<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>"
|
|
247
247
|
: "<swirl-icon-open-in-full></swirl-icon-open-in-full>", label: this.isFullscreen
|
|
248
248
|
? this.fullscreenDisableButtonLabel
|
|
249
|
-
: this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: '
|
|
249
|
+
: this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: 'd3b7a16db9e4feae042a90ae3d2d8505757205ff', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: '3b55bc21765c6d3ed98cd7c8787fe69906164aeb', class: "modal__content-container", style: {
|
|
250
250
|
gap: this.contentGap
|
|
251
251
|
? `var(--s-space-${this.contentGap})`
|
|
252
252
|
: undefined,
|
|
253
|
-
} }, h("div", { key: '
|
|
253
|
+
} }, h("div", { key: 'd417c7f1e060b64bc7be2b98bffd5a1d1d460c0a', class: "modal__primary-content", style: {
|
|
254
254
|
maxWidth: this.primaryContentMaxWidth,
|
|
255
255
|
flex: this.primaryContentFlex,
|
|
256
|
-
} }, h("div", { key: '
|
|
256
|
+
} }, h("div", { key: '36fc3cce5333dec26141a19ed94e16d0e536bd32', class: "modal__header-tools" }, h("slot", { key: '36df33eb9c484e602ed9c5d245f50e4ebcbff514', name: "header-tools" })), h("div", { key: '3a1fd477b1d5b70291d163f3e0c2759fde8dd34c', class: "modal__content", onScroll: this.determineMainScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", { key: 'cdd147f7e0320742091611b92ef5318065d6bd2f' }))), h("div", { key: 'bafcb6677a0da44e76e56ca189a8dbf4afa1f573', class: "modal__secondary-content", style: {
|
|
257
257
|
maxWidth: this.secondaryContentMaxWidth,
|
|
258
258
|
flex: this.secondaryContentFlex,
|
|
259
259
|
padding: Boolean(this.secondaryContentPadding)
|
|
@@ -271,7 +271,7 @@ export class SwirlModal {
|
|
|
271
271
|
paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
|
|
272
272
|
? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
|
|
273
273
|
: undefined,
|
|
274
|
-
} }, h("slot", { key: '
|
|
274
|
+
} }, h("slot", { key: 'c6061a71b7d66b3e204ff7c4f075ae4908c4cfae', name: "secondary-content" }))), h("div", { key: 'd1501d2c4431b43d053a67e3fb99922dea905dcb', class: "modal__custom-footer" }, h("slot", { key: '404cb5ab7559754b1944fbb675518afcfffcadfd', name: "custom-footer" })), showControls && (h("footer", { key: 'f2cadd2076b5c180494935945894fd468e0c46ba', class: "modal__controls" }, h("swirl-button-group", { key: 'd24df43e386d5431f5df152c5840bd290dbb38fd', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: '1cb65ccd7d85057820d2afb79e647f078d70a9c7', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '705ca5cf78b9d0f0c576288cf94f6d9208e66def', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
|
|
275
275
|
}
|
|
276
276
|
static get is() { return "swirl-modal"; }
|
|
277
277
|
static get originalStyleUrls() {
|
|
@@ -47,6 +47,7 @@ export class SwirlTimeInput {
|
|
|
47
47
|
watchValue(newValue, oldValue) {
|
|
48
48
|
if (newValue !== oldValue) {
|
|
49
49
|
this.valueChange.emit(newValue);
|
|
50
|
+
this.mask.value = newValue;
|
|
50
51
|
}
|
|
51
52
|
}
|
|
52
53
|
updateIconSize(smallIcon) {
|
|
@@ -135,7 +136,7 @@ export class SwirlTimeInput {
|
|
|
135
136
|
const className = classnames("time-input", {
|
|
136
137
|
"time-input--inline": this.inline,
|
|
137
138
|
});
|
|
138
|
-
return (h(Host, { key: '
|
|
139
|
+
return (h(Host, { key: 'bb150e1e738e6b70dd32089de213f0ad8ce49db8' }, h("div", { key: '58728d57b1349781a97070a9b8d47d27123946ab', class: className }, h("input", { key: '84e63c31acfc49b1b54fbce93c0351ed3359da28', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text" }), h("span", { key: '98ac3a262dee95ab34e94f80a7632d074b881f64', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: '8266ab31d312c5d5947feb6c77dfe20b727cc601', size: this.iconSize })))));
|
|
139
140
|
}
|
|
140
141
|
static get is() { return "swirl-time-input"; }
|
|
141
142
|
static get encapsulation() { return "scoped"; }
|