@getflip/swirl-components 0.400.0 → 0.401.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/components.json +1 -1
- package/dist/cjs/swirl-popover_2.cjs.entry.js +12 -5
- package/dist/cjs/swirl-text-input.cjs.entry.js +2 -2
- package/dist/collection/components/swirl-popover/swirl-popover.js +13 -6
- package/dist/collection/components/swirl-text-input/swirl-text-input.js +2 -2
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +4 -1
- package/dist/components/swirl-popover2.js +14 -7
- package/dist/components/swirl-text-input2.js +2 -2
- package/dist/esm/swirl-popover_2.entry.js +14 -7
- package/dist/esm/swirl-text-input.entry.js +2 -2
- package/dist/swirl-components/p-4dd08eeb.entry.js +1 -0
- package/dist/swirl-components/p-cad1d8fb.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/package.json +68 -68
- package/dist/swirl-components/p-07265507.entry.js +0 -1
- package/dist/swirl-components/p-db5758e5.entry.js +0 -1
package/components.json
CHANGED
|
@@ -50,9 +50,16 @@ const SwirlPopover = class {
|
|
|
50
50
|
const offsetOptions = typeof this.offset === "number"
|
|
51
51
|
? { mainAxis: this.offset, crossAxis: 0 }
|
|
52
52
|
: { mainAxis: this.offset[0], crossAxis: this.offset[1] };
|
|
53
|
+
const shiftPaddingX = utils.getPixelsFromRemToken("--s-space-16");
|
|
54
|
+
const shiftWithPadding = floatingUi_dom_browser_min.k({
|
|
55
|
+
padding: {
|
|
56
|
+
left: shiftPaddingX,
|
|
57
|
+
right: shiftPaddingX,
|
|
58
|
+
},
|
|
59
|
+
});
|
|
53
60
|
const middleware = this.enableFlip
|
|
54
|
-
? [floatingUi_dom_browser_min.D(offsetOptions),
|
|
55
|
-
: [floatingUi_dom_browser_min.D(offsetOptions),
|
|
61
|
+
? [floatingUi_dom_browser_min.D(offsetOptions), shiftWithPadding, floatingUi_dom_browser_min.b()]
|
|
62
|
+
: [floatingUi_dom_browser_min.D(offsetOptions), shiftWithPadding];
|
|
56
63
|
this.position = await floatingUi_dom_browser_min.P(this.triggerEl, this.contentContainer, {
|
|
57
64
|
middleware,
|
|
58
65
|
placement: this.placement,
|
|
@@ -268,14 +275,14 @@ const SwirlPopover = class {
|
|
|
268
275
|
"popover--transparent": this.transparent,
|
|
269
276
|
"popover--padded": this.padded,
|
|
270
277
|
});
|
|
271
|
-
return (index.h(index.Host, { key: '
|
|
278
|
+
return (index.h(index.Host, { key: 'cae2c409308bf89dc66f2b89456568046aaded46', style: { display: this.active ? "inline-flex" : "none" } }, index.h("div", { key: 'db3717521769c75c2653098cbb625224dbb2eb55', class: className, onKeyDown: this.onKeydown }, index.h("div", { key: '3aab5c2bb11f1beea924f3c7de4e65a1fc8eb1d7', "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", id: this.popoverId, part: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
|
|
272
279
|
top: Boolean(this.position) ? `${this.position?.y}px` : "",
|
|
273
280
|
left: Boolean(this.position) ? `${this.position?.x}px` : "",
|
|
274
|
-
}, tabindex: "-1" }, index.h("span", { key: '
|
|
281
|
+
}, tabindex: "-1" }, index.h("span", { key: '8e448d47cb436bf6480559afc079eb6bce38fe12', class: "popover__handle" }), index.h("div", { key: '86c8939a2de68df053efacb31bdc97707007259f', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
|
|
275
282
|
maxHeight: !mobile && Boolean(this.maxHeight)
|
|
276
283
|
? this.maxHeight
|
|
277
284
|
: undefined,
|
|
278
|
-
} }, index.h("slot", { key: '
|
|
285
|
+
} }, index.h("slot", { key: 'a5cd47d451b4cd8874b3f76a2dcab3818d71ab1c' }))), this.active && (index.h("div", { key: '05fbf70a43239cca62a57ca654aa78c3914069da', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
|
|
279
286
|
}
|
|
280
287
|
get el() { return index.getElement(this); }
|
|
281
288
|
};
|
|
@@ -135,7 +135,7 @@ const SwirlTextInput = class {
|
|
|
135
135
|
}
|
|
136
136
|
}
|
|
137
137
|
handleAutoSelect(event) {
|
|
138
|
-
if (!this.autoSelect) {
|
|
138
|
+
if (!(this.autoSelect || this.readonly)) {
|
|
139
139
|
return;
|
|
140
140
|
}
|
|
141
141
|
event.target.select();
|
|
@@ -166,7 +166,7 @@ const SwirlTextInput = class {
|
|
|
166
166
|
"text-input--inline": this.inline,
|
|
167
167
|
"text-input--show-password": this.type === "password" && this.showPassword,
|
|
168
168
|
});
|
|
169
|
-
return (index.h(index.Host, { key: '
|
|
169
|
+
return (index.h(index.Host, { key: 'f822fb9a0003530bed7e53b2a6395fa0ead91d6c' }, index.h("div", { key: 'b8a048e87b0a8366b0243a8da2f80fd3571fbd6b', class: className }, this.prefixLabel && (index.h("span", { key: '20636fdec405901ebd416fce525a9c89b1ed9dbe', class: "text-input__prefix" }, this.prefixLabel)), index.h(Tag, { key: '8b192a2783028e0eb1fb5703026daccef7170808', "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: !Boolean(this.suffixLabel) ? this.placeholder : undefined, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, name: this.inputName, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.value, readonly: this.readonly }, this.rows > 1 && this.value), this.suffixLabel && (index.h("span", { key: '7b05575e9fc5f5f362f9aa23784177f16eb92660', class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (index.h("button", { key: '860576e47f0e34aed31a0c53a6d7d8fa4e57557b', "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.handleClearClick, part: "text-input__clear-button", type: "button" }, index.h("swirl-icon-cancel", { key: '763a1558a792a017ba4a947bf7bd47220f88ee0c', size: this.iconSize }))), showPasswordToggle && (index.h("button", { key: '584dd45c5dedb11cf9c7348a49b1ca15f959742c', "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (index.h("swirl-icon-visibility-off", { size: this.iconSize })) : (index.h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (index.h("span", { key: 'fbad244a2f8584c0003f581f66dc26bb9cb1f04c', class: "text-input__stepper" }, index.h("button", { key: '921cd8c3e64560ba46a7a06fd5147e132dd7bed4', "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, index.h("swirl-icon-expand-less", { key: 'df8eeb01df755b56dc0a465a02a1d76dbecafe59', size: this.iconSize })), index.h("button", { key: 'fee840a7e4a142f468292a9a69e8958869673e87', "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, index.h("swirl-icon-expand-more", { key: 'e9af53254c8f1d68c121eb8634444b410a4cb1e3', size: this.iconSize })))), showCharacterCounter && (index.h("span", { key: '88dd11daf949bcb20d1a18bd77ab64a76000b30b', class: "text-input__character-counter", "aria-live": "polite" }, index.h("swirl-visually-hidden", { key: 'f55d1fa26b458ff6b09e80f79f32b25236cc6d5f' }, this.characterCounterLabel), characterCount, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
|
|
170
170
|
}
|
|
171
171
|
static get watchers() { return {
|
|
172
172
|
"value": ["watchValue"]
|
|
@@ -2,7 +2,7 @@ import { autoUpdate, computePosition, flip, offset, shift, } from "@floating-ui/
|
|
|
2
2
|
import { h, Host, } from "@stencil/core";
|
|
3
3
|
import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
|
|
4
4
|
import classnames from "classnames";
|
|
5
|
-
import { getActiveElement, isMobileViewport, querySelectorAllDeep, } from "../../utils";
|
|
5
|
+
import { getActiveElement, getPixelsFromRemToken, isMobileViewport, querySelectorAllDeep, } from "../../utils";
|
|
6
6
|
/**
|
|
7
7
|
* @slot slot - The popover content.
|
|
8
8
|
*/
|
|
@@ -45,9 +45,16 @@ export class SwirlPopover {
|
|
|
45
45
|
const offsetOptions = typeof this.offset === "number"
|
|
46
46
|
? { mainAxis: this.offset, crossAxis: 0 }
|
|
47
47
|
: { mainAxis: this.offset[0], crossAxis: this.offset[1] };
|
|
48
|
+
const shiftPaddingX = getPixelsFromRemToken("--s-space-16");
|
|
49
|
+
const shiftWithPadding = shift({
|
|
50
|
+
padding: {
|
|
51
|
+
left: shiftPaddingX,
|
|
52
|
+
right: shiftPaddingX,
|
|
53
|
+
},
|
|
54
|
+
});
|
|
48
55
|
const middleware = this.enableFlip
|
|
49
|
-
? [offset(offsetOptions),
|
|
50
|
-
: [offset(offsetOptions),
|
|
56
|
+
? [offset(offsetOptions), shiftWithPadding, flip()]
|
|
57
|
+
: [offset(offsetOptions), shiftWithPadding];
|
|
51
58
|
this.position = await computePosition(this.triggerEl, this.contentContainer, {
|
|
52
59
|
middleware,
|
|
53
60
|
placement: this.placement,
|
|
@@ -263,14 +270,14 @@ export class SwirlPopover {
|
|
|
263
270
|
"popover--transparent": this.transparent,
|
|
264
271
|
"popover--padded": this.padded,
|
|
265
272
|
});
|
|
266
|
-
return (h(Host, { key: '
|
|
273
|
+
return (h(Host, { key: 'cae2c409308bf89dc66f2b89456568046aaded46', style: { display: this.active ? "inline-flex" : "none" } }, h("div", { key: 'db3717521769c75c2653098cbb625224dbb2eb55', class: className, onKeyDown: this.onKeydown }, h("div", { key: '3aab5c2bb11f1beea924f3c7de4e65a1fc8eb1d7', "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", id: this.popoverId, part: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
|
|
267
274
|
top: Boolean(this.position) ? `${this.position?.y}px` : "",
|
|
268
275
|
left: Boolean(this.position) ? `${this.position?.x}px` : "",
|
|
269
|
-
}, tabindex: "-1" }, h("span", { key: '
|
|
276
|
+
}, tabindex: "-1" }, h("span", { key: '8e448d47cb436bf6480559afc079eb6bce38fe12', class: "popover__handle" }), h("div", { key: '86c8939a2de68df053efacb31bdc97707007259f', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
|
|
270
277
|
maxHeight: !mobile && Boolean(this.maxHeight)
|
|
271
278
|
? this.maxHeight
|
|
272
279
|
: undefined,
|
|
273
|
-
} }, h("slot", { key: '
|
|
280
|
+
} }, h("slot", { key: 'a5cd47d451b4cd8874b3f76a2dcab3818d71ab1c' }))), this.active && (h("div", { key: '05fbf70a43239cca62a57ca654aa78c3914069da', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
|
|
274
281
|
}
|
|
275
282
|
static get is() { return "swirl-popover"; }
|
|
276
283
|
static get encapsulation() { return "shadow"; }
|
|
@@ -124,7 +124,7 @@ export class SwirlTextInput {
|
|
|
124
124
|
}
|
|
125
125
|
}
|
|
126
126
|
handleAutoSelect(event) {
|
|
127
|
-
if (!this.autoSelect) {
|
|
127
|
+
if (!(this.autoSelect || this.readonly)) {
|
|
128
128
|
return;
|
|
129
129
|
}
|
|
130
130
|
event.target.select();
|
|
@@ -155,7 +155,7 @@ export class SwirlTextInput {
|
|
|
155
155
|
"text-input--inline": this.inline,
|
|
156
156
|
"text-input--show-password": this.type === "password" && this.showPassword,
|
|
157
157
|
});
|
|
158
|
-
return (h(Host, { key: '
|
|
158
|
+
return (h(Host, { key: 'f822fb9a0003530bed7e53b2a6395fa0ead91d6c' }, h("div", { key: 'b8a048e87b0a8366b0243a8da2f80fd3571fbd6b', class: className }, this.prefixLabel && (h("span", { key: '20636fdec405901ebd416fce525a9c89b1ed9dbe', class: "text-input__prefix" }, this.prefixLabel)), h(Tag, { key: '8b192a2783028e0eb1fb5703026daccef7170808', "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: !Boolean(this.suffixLabel) ? this.placeholder : undefined, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, name: this.inputName, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.value, readonly: this.readonly }, this.rows > 1 && this.value), this.suffixLabel && (h("span", { key: '7b05575e9fc5f5f362f9aa23784177f16eb92660', class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (h("button", { key: '860576e47f0e34aed31a0c53a6d7d8fa4e57557b', "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.handleClearClick, part: "text-input__clear-button", type: "button" }, h("swirl-icon-cancel", { key: '763a1558a792a017ba4a947bf7bd47220f88ee0c', size: this.iconSize }))), showPasswordToggle && (h("button", { key: '584dd45c5dedb11cf9c7348a49b1ca15f959742c', "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (h("swirl-icon-visibility-off", { size: this.iconSize })) : (h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (h("span", { key: 'fbad244a2f8584c0003f581f66dc26bb9cb1f04c', class: "text-input__stepper" }, h("button", { key: '921cd8c3e64560ba46a7a06fd5147e132dd7bed4', "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-less", { key: 'df8eeb01df755b56dc0a465a02a1d76dbecafe59', size: this.iconSize })), h("button", { key: 'fee840a7e4a142f468292a9a69e8958869673e87', "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-more", { key: 'e9af53254c8f1d68c121eb8634444b410a4cb1e3', size: this.iconSize })))), showCharacterCounter && (h("span", { key: '88dd11daf949bcb20d1a18bd77ab64a76000b30b', class: "text-input__character-counter", "aria-live": "polite" }, h("swirl-visually-hidden", { key: 'f55d1fa26b458ff6b09e80f79f32b25236cc6d5f' }, this.characterCounterLabel), characterCount, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
|
|
159
159
|
}
|
|
160
160
|
static get is() { return "swirl-text-input"; }
|
|
161
161
|
static get encapsulation() { return "scoped"; }
|