@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
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
|
-
import { P, N,
|
|
2
|
+
import { P, N, k, D, b } from './floating-ui.dom.browser.min.js';
|
|
3
3
|
import { d as disableBodyScroll, e as enableBodyScroll } from './bodyScrollLock.esm.js';
|
|
4
4
|
import { c as classNames } from './index2.js';
|
|
5
|
-
import { i as isMobileViewport, k as getActiveElement, q as querySelectorAllDeep } from './utils.js';
|
|
5
|
+
import { i as isMobileViewport, t as getPixelsFromRemToken, k as getActiveElement, q as querySelectorAllDeep } from './utils.js';
|
|
6
6
|
|
|
7
7
|
const swirlPopoverCss = ":host{position:relative;z-index:var(--s-z-40)}:host *{box-sizing:border-box}:host{--swirl-resource-list-item-background-default:var(\n --s-surface-overlay-default\n );--swirl-resource-list-item-background-hovered:var(\n --s-surface-overlay-hovered\n );--swirl-resource-list-item-background-pressed:var(\n --s-surface-overlay-pressed\n )}.popover--active:not(.popover--closing) .popover__backdrop{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__backdrop{animation:none}}.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-slide-in}@media (min-width: 768px){.popover--active:not(.popover--closing) .popover__content{transform-origin:top left;animation:0.15s popover-fade-scale-in-xy}}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--closing .popover__backdrop{animation:0.15s popover-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.popover--closing .popover__backdrop{animation:none}}.popover--closing .popover__content{animation:0.15s popover-slide-out;animation-fill-mode:forwards}@media (min-width: 768px){.popover--closing .popover__content{animation:0.15s popover-fade-out}}@media (prefers-reduced-motion){.popover--closing .popover__content{animation:none}}.popover--inactive .popover__content{display:none}@media (max-width: 767px){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:0.15s popover-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:none}}.popover--fullscreen-bottom-sheet .popover__backdrop{display:none}.popover--fullscreen-bottom-sheet .popover__content{top:0;border-top-left-radius:0;border-top-right-radius:0}.popover--fullscreen-bottom-sheet .popover__scroll-container{height:100%;max-height:none;padding-top:0;padding-bottom:0}.popover--fullscreen-bottom-sheet .popover__handle{display:none}}@media (min-width: 768px){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-scale-in-y}}@media (prefers-reduced-motion){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}}@media (prefers-reduced-motion){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--transparent .popover__content{background-color:transparent;box-shadow:none}}@media (min-width: 768px){.popover--transparent .popover__scroll-container{padding:0}}.popover__backdrop{position:fixed;z-index:0;background-color:rgba(0, 0, 0, 0.2);animation:0.15s popover-backdrop-fade-in;inset:0}@media (prefers-reduced-motion){.popover__backdrop{animation:none}}@media (min-width: 768px){.popover__backdrop{display:none}}.popover__content{position:fixed;z-index:2;right:0;bottom:0;left:0;overflow:hidden;border-top-left-radius:var(--s-border-radius-xl);border-top-right-radius:var(--s-border-radius-xl);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.popover__content{right:unset;bottom:unset;left:unset;max-width:22.5rem;border-radius:var(--s-border-radius-base);animation:none;box-shadow:var(--s-shadow-level-2)}}.popover__scroll-container{overflow-x:hidden;overflow-y:auto;width:100%;max-height:90vh;padding-top:var(--s-space-24);padding-bottom:var(--s-space-24);overscroll-behavior:contain}@media (min-width: 768px){.popover__scroll-container{max-height:22rem;padding-top:0;padding-bottom:0}}@media (min-width: 768px){.popover--padded .popover__scroll-container{padding:var(--s-space-4)}}.popover__handle{position:absolute;top:var(--s-space-8);left:50%;width:2.5rem;height:0.375rem;border-radius:0.1875rem;background-color:var(--s-border-default);transform:translatex(-50%)}@media (min-width: 768px){.popover__handle{display:none}}@keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@keyframes popover-fade-scale-in-xy{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popover-fade-scale-in-y{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}";
|
|
8
8
|
|
|
@@ -50,9 +50,16 @@ const SwirlPopover = /*@__PURE__*/ proxyCustomElement(class SwirlPopover extends
|
|
|
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 = getPixelsFromRemToken("--s-space-16");
|
|
54
|
+
const shiftWithPadding = k({
|
|
55
|
+
padding: {
|
|
56
|
+
left: shiftPaddingX,
|
|
57
|
+
right: shiftPaddingX,
|
|
58
|
+
},
|
|
59
|
+
});
|
|
53
60
|
const middleware = this.enableFlip
|
|
54
|
-
? [D(offsetOptions),
|
|
55
|
-
: [D(offsetOptions),
|
|
61
|
+
? [D(offsetOptions), shiftWithPadding, b()]
|
|
62
|
+
: [D(offsetOptions), shiftWithPadding];
|
|
56
63
|
this.position = await P(this.triggerEl, this.contentContainer, {
|
|
57
64
|
middleware,
|
|
58
65
|
placement: this.placement,
|
|
@@ -268,14 +275,14 @@ const SwirlPopover = /*@__PURE__*/ proxyCustomElement(class SwirlPopover extends
|
|
|
268
275
|
"popover--transparent": this.transparent,
|
|
269
276
|
"popover--padded": this.padded,
|
|
270
277
|
});
|
|
271
|
-
return (h(Host, { key: '
|
|
278
|
+
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: {
|
|
272
279
|
top: Boolean(this.position) ? `${this.position?.y}px` : "",
|
|
273
280
|
left: Boolean(this.position) ? `${this.position?.x}px` : "",
|
|
274
|
-
}, tabindex: "-1" }, h("span", { key: '
|
|
281
|
+
}, 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: {
|
|
275
282
|
maxHeight: !mobile && Boolean(this.maxHeight)
|
|
276
283
|
? this.maxHeight
|
|
277
284
|
: undefined,
|
|
278
|
-
} }, h("slot", { key: '
|
|
285
|
+
} }, h("slot", { key: 'a5cd47d451b4cd8874b3f76a2dcab3818d71ab1c' }))), this.active && (h("div", { key: '05fbf70a43239cca62a57ca654aa78c3914069da', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
|
|
279
286
|
}
|
|
280
287
|
get el() { return this; }
|
|
281
288
|
static get style() { return swirlPopoverCss; }
|
|
@@ -139,7 +139,7 @@ const SwirlTextInput = /*@__PURE__*/ proxyCustomElement(class SwirlTextInput ext
|
|
|
139
139
|
}
|
|
140
140
|
}
|
|
141
141
|
handleAutoSelect(event) {
|
|
142
|
-
if (!this.autoSelect) {
|
|
142
|
+
if (!(this.autoSelect || this.readonly)) {
|
|
143
143
|
return;
|
|
144
144
|
}
|
|
145
145
|
event.target.select();
|
|
@@ -170,7 +170,7 @@ const SwirlTextInput = /*@__PURE__*/ proxyCustomElement(class SwirlTextInput ext
|
|
|
170
170
|
"text-input--inline": this.inline,
|
|
171
171
|
"text-input--show-password": this.type === "password" && this.showPassword,
|
|
172
172
|
});
|
|
173
|
-
return (h(Host, { key: '
|
|
173
|
+
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}` : "")))));
|
|
174
174
|
}
|
|
175
175
|
static get watchers() { return {
|
|
176
176
|
"value": ["watchValue"]
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-g4wOnHIT.js';
|
|
2
|
-
import { P, N,
|
|
2
|
+
import { P, N, k, D, b } from './floating-ui.dom.browser.min-BtsCuEVE.js';
|
|
3
3
|
import { d as disableBodyScroll, e as enableBodyScroll } from './bodyScrollLock.esm-B0kNlhKL.js';
|
|
4
4
|
import { c as classnames } from './index-orsBiyT_.js';
|
|
5
|
-
import { i as isMobileViewport, k as getActiveElement, q as querySelectorAllDeep } from './utils-wi_3Z3FQ.js';
|
|
5
|
+
import { i as isMobileViewport, o as getPixelsFromRemToken, k as getActiveElement, q as querySelectorAllDeep } from './utils-wi_3Z3FQ.js';
|
|
6
6
|
|
|
7
7
|
const swirlPopoverCss = ":host{position:relative;z-index:var(--s-z-40)}:host *{box-sizing:border-box}:host{--swirl-resource-list-item-background-default:var(\n --s-surface-overlay-default\n );--swirl-resource-list-item-background-hovered:var(\n --s-surface-overlay-hovered\n );--swirl-resource-list-item-background-pressed:var(\n --s-surface-overlay-pressed\n )}.popover--active:not(.popover--closing) .popover__backdrop{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__backdrop{animation:none}}.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-slide-in}@media (min-width: 768px){.popover--active:not(.popover--closing) .popover__content{transform-origin:top left;animation:0.15s popover-fade-scale-in-xy}}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--closing .popover__backdrop{animation:0.15s popover-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.popover--closing .popover__backdrop{animation:none}}.popover--closing .popover__content{animation:0.15s popover-slide-out;animation-fill-mode:forwards}@media (min-width: 768px){.popover--closing .popover__content{animation:0.15s popover-fade-out}}@media (prefers-reduced-motion){.popover--closing .popover__content{animation:none}}.popover--inactive .popover__content{display:none}@media (max-width: 767px){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:0.15s popover-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:none}}.popover--fullscreen-bottom-sheet .popover__backdrop{display:none}.popover--fullscreen-bottom-sheet .popover__content{top:0;border-top-left-radius:0;border-top-right-radius:0}.popover--fullscreen-bottom-sheet .popover__scroll-container{height:100%;max-height:none;padding-top:0;padding-bottom:0}.popover--fullscreen-bottom-sheet .popover__handle{display:none}}@media (min-width: 768px){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-scale-in-y}}@media (prefers-reduced-motion){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}}@media (prefers-reduced-motion){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--transparent .popover__content{background-color:transparent;box-shadow:none}}@media (min-width: 768px){.popover--transparent .popover__scroll-container{padding:0}}.popover__backdrop{position:fixed;z-index:0;background-color:rgba(0, 0, 0, 0.2);animation:0.15s popover-backdrop-fade-in;inset:0}@media (prefers-reduced-motion){.popover__backdrop{animation:none}}@media (min-width: 768px){.popover__backdrop{display:none}}.popover__content{position:fixed;z-index:2;right:0;bottom:0;left:0;overflow:hidden;border-top-left-radius:var(--s-border-radius-xl);border-top-right-radius:var(--s-border-radius-xl);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.popover__content{right:unset;bottom:unset;left:unset;max-width:22.5rem;border-radius:var(--s-border-radius-base);animation:none;box-shadow:var(--s-shadow-level-2)}}.popover__scroll-container{overflow-x:hidden;overflow-y:auto;width:100%;max-height:90vh;padding-top:var(--s-space-24);padding-bottom:var(--s-space-24);overscroll-behavior:contain}@media (min-width: 768px){.popover__scroll-container{max-height:22rem;padding-top:0;padding-bottom:0}}@media (min-width: 768px){.popover--padded .popover__scroll-container{padding:var(--s-space-4)}}.popover__handle{position:absolute;top:var(--s-space-8);left:50%;width:2.5rem;height:0.375rem;border-radius:0.1875rem;background-color:var(--s-border-default);transform:translatex(-50%)}@media (min-width: 768px){.popover__handle{display:none}}@keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@keyframes popover-fade-scale-in-xy{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popover-fade-scale-in-y{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}";
|
|
8
8
|
|
|
@@ -48,9 +48,16 @@ const SwirlPopover = class {
|
|
|
48
48
|
const offsetOptions = typeof this.offset === "number"
|
|
49
49
|
? { mainAxis: this.offset, crossAxis: 0 }
|
|
50
50
|
: { mainAxis: this.offset[0], crossAxis: this.offset[1] };
|
|
51
|
+
const shiftPaddingX = getPixelsFromRemToken("--s-space-16");
|
|
52
|
+
const shiftWithPadding = k({
|
|
53
|
+
padding: {
|
|
54
|
+
left: shiftPaddingX,
|
|
55
|
+
right: shiftPaddingX,
|
|
56
|
+
},
|
|
57
|
+
});
|
|
51
58
|
const middleware = this.enableFlip
|
|
52
|
-
? [D(offsetOptions),
|
|
53
|
-
: [D(offsetOptions),
|
|
59
|
+
? [D(offsetOptions), shiftWithPadding, b()]
|
|
60
|
+
: [D(offsetOptions), shiftWithPadding];
|
|
54
61
|
this.position = await P(this.triggerEl, this.contentContainer, {
|
|
55
62
|
middleware,
|
|
56
63
|
placement: this.placement,
|
|
@@ -266,14 +273,14 @@ const SwirlPopover = class {
|
|
|
266
273
|
"popover--transparent": this.transparent,
|
|
267
274
|
"popover--padded": this.padded,
|
|
268
275
|
});
|
|
269
|
-
return (h(Host, { key: '
|
|
276
|
+
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: {
|
|
270
277
|
top: Boolean(this.position) ? `${this.position?.y}px` : "",
|
|
271
278
|
left: Boolean(this.position) ? `${this.position?.x}px` : "",
|
|
272
|
-
}, tabindex: "-1" }, h("span", { key: '
|
|
279
|
+
}, 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: {
|
|
273
280
|
maxHeight: !mobile && Boolean(this.maxHeight)
|
|
274
281
|
? this.maxHeight
|
|
275
282
|
: undefined,
|
|
276
|
-
} }, h("slot", { key: '
|
|
283
|
+
} }, h("slot", { key: 'a5cd47d451b4cd8874b3f76a2dcab3818d71ab1c' }))), this.active && (h("div", { key: '05fbf70a43239cca62a57ca654aa78c3914069da', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
|
|
277
284
|
}
|
|
278
285
|
get el() { return getElement(this); }
|
|
279
286
|
};
|
|
@@ -133,7 +133,7 @@ const SwirlTextInput = class {
|
|
|
133
133
|
}
|
|
134
134
|
}
|
|
135
135
|
handleAutoSelect(event) {
|
|
136
|
-
if (!this.autoSelect) {
|
|
136
|
+
if (!(this.autoSelect || this.readonly)) {
|
|
137
137
|
return;
|
|
138
138
|
}
|
|
139
139
|
event.target.select();
|
|
@@ -164,7 +164,7 @@ const SwirlTextInput = class {
|
|
|
164
164
|
"text-input--inline": this.inline,
|
|
165
165
|
"text-input--show-password": this.type === "password" && this.showPassword,
|
|
166
166
|
});
|
|
167
|
-
return (h(Host, { key: '
|
|
167
|
+
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}` : "")))));
|
|
168
168
|
}
|
|
169
169
|
static get watchers() { return {
|
|
170
170
|
"value": ["watchValue"]
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as o,c as e,h as t,H as i,d as s}from"./p-g4wOnHIT.js";import{P as r,N as n,k as a,D as p,b as h}from"./p-BtsCuEVE.js";import{d as c,e as d}from"./p-B0kNlhKL.js";import{c as l}from"./p-orsBiyT_.js";import{i as v,o as m,k as f,q as u}from"./p-wi_3Z3FQ.js";const g=class{constructor(t){o(this,t),this.popoverClose=e(this,"popoverClose",7),this.popoverOpen=e(this,"popoverOpen",7),this.animation="scale-in-xy",this.enableFlip=!0,this.maxHeight="22rem",this.offset=8,this.padded=!0,this.placement="bottom-start",this.returnFocusToTrigger=!0,this.active=!1,this.closing=!1,this.toggle=o=>{o.stopPropagation(),this.active?this.close():this.open()},this.onKeydown=o=>{"Escape"===o.code&&this.active&&(o.stopImmediatePropagation(),o.stopPropagation(),this.close())},this.reposition=async()=>{const o=v();if(!Boolean(this.triggerEl)||!Boolean(this.contentContainer))return;if(o)return void(this.position=void 0);const e="number"==typeof this.offset?{mainAxis:this.offset,crossAxis:0}:{mainAxis:this.offset[0],crossAxis:this.offset[1]},t=m("--s-space-16"),i=a({padding:{left:t,right:t}}),s=this.enableFlip?[p(e),i,h()]:[p(e),i];this.position=await r(this.triggerEl,this.contentContainer,{middleware:s,placement:this.placement,strategy:"fixed"})},this.onCloseButtonClick=()=>{this.close()}}componentDidLoad(){this.connectTrigger(),this.updateTriggerAttributes(),Boolean(this.trigger)&&console.warn('[Swirl] The "trigger" prop of swirl-popover is deprecated and will be removed with the next major release. Please use the swirl-popover-trigger component instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlpopovertrigger--docs')}disconnectedCallback(){this.unlockBodyScroll()}onWindowFocusIn(o){if(!this.active)return;const e=/^((?!chrome|android).)*safari/i.test(navigator.userAgent),t="webkit"in window,i=e||t,s=o.target,r=o.relatedTarget,n=f(),a=!this.el.contains(s)&&!this.el.contains(n),p=s!==this.triggerEl&&!this.triggerEl?.contains(s),h=i&&!this.el.contains(r||s)&&r!==this.el;["SWIRL-TAB"].includes(s.tagName)||!a||!p||i&&!h||this.close()}onWindowBlur(){if(!this.active||this.closing)return;const o=document.activeElement;o&&["IFRAME"].includes(o.tagName)&&this.close()}onWindowClick(o){if(!this.active||this.closing)return;const e=o.target,t=this.el.contains(e),i=o.composedPath().some((o=>!!(Boolean(o)&&o instanceof Node)&&this.el.contains(o))),s=e===this.triggerEl||this.triggerEl.contains(e)||o.composedPath().includes(this.triggerEl);t||i||s||this.close()}async close(o){!this.closing&&this.active&&(this.popoverClose.emit(),this.disableAutoUpdate&&this.disableAutoUpdate(),this.closing=!0,setTimeout((()=>{this.active=!1,this.closing=!1,this.updateTriggerAttributes()}),150),this.unlockBodyScroll(),this.returnFocusToTrigger&&!o&&this.getNativeTriggerElement()?.focus())}async open(o,e){if(this.triggerEl=o||this.triggerEl,this.active||!Boolean(this.triggerEl))return;this.adjustWidth(),this.active=!0,this.updateTriggerAttributes();const t=this.getFocusableChildren();requestAnimationFrame((async()=>{await this.reposition(),this.popoverOpen.emit({position:this.position}),t.length>0&&!e?t[0].focus():e||this.contentContainer.focus(),this.disableAutoUpdate&&this.disableAutoUpdate(),this.disableAutoUpdate=n(this.triggerEl,this.contentContainer,(()=>this.reposition())),this.scrollContainer.scrollTop=0,this.lockBodyScroll()}))}async isOpen(){return this.active&&!this.closing}connectTrigger(){Boolean(this.trigger)?(this.triggerEl="string"==typeof this.trigger?u(this.triggerContainer||document.body,`#${this.trigger}`)[0]:this.trigger,Boolean(this.triggerEl)&&this.triggerEl.addEventListener("click",(o=>{this.toggle(o)}))):this.triggerEl=void 0}getNativeTriggerElement(){return this.triggerEl?.tagName.startsWith("SWIRL-")&&(this.triggerEl?.children[0]||this.triggerEl?.shadowRoot?.children[0])||this.triggerEl}updateTriggerAttributes(){if(!Boolean(this.triggerEl))return;const o=this.getNativeTriggerElement();o.setAttribute("aria-controls",this.el.id),o.setAttribute("aria-expanded",String(this.active)),o.setAttribute("aria-haspopup","dialog")}getFocusableChildren(){return u(this.el,'[role="menuitem"], [role="menuitemradio"], [role="option"]')}adjustWidth(){let o=this.useContainerWidth;[!0,"true"].includes(this.useContainerWidth)?o=!0:[!1,"false"].includes(this.useContainerWidth)&&(o=!1);const e=!window.matchMedia("(min-width: 768px)").matches;if(Boolean(o)&&!e){const e="string"==typeof o&&this.el.closest(o)||this.el.parentElement;this.contentContainer.style.maxWidth="none",this.contentContainer.style.width=e.getBoundingClientRect().width+"px"}else this.contentContainer.style.maxWidth="",this.contentContainer.style.width=""}lockBodyScroll(){v()&&!this.disableScrollLock&&Boolean(this.scrollContainer)&&c(this.scrollContainer)}unlockBodyScroll(){v()&&!this.disableScrollLock&&Boolean(this.scrollContainer)&&d(this.scrollContainer)}render(){const o=!window.matchMedia("(min-width: 768px)").matches,e=l("popover",`popover--animation-${this.animation}`,`popover--placement-${this.position?.placement}`,{"popover--active":this.active,"popover--closing":this.closing,"popover--fullscreen-bottom-sheet":this.fullscreenBottomSheet,"popover--inactive":!this.active,"popover--transparent":this.transparent,"popover--padded":this.padded});return t(i,{key:"cae2c409308bf89dc66f2b89456568046aaded46",style:{display:this.active?"inline-flex":"none"}},t("div",{key:"db3717521769c75c2653098cbb625224dbb2eb55",class:e,onKeyDown:this.onKeydown},t("div",{key:"3aab5c2bb11f1beea924f3c7de4e65a1fc8eb1d7","aria-hidden":this.active?"false":"true","aria-label":this.label,class:"popover__content",id:this.popoverId,part:"popover__content",role:"dialog",ref:o=>this.contentContainer=o,style:{top:Boolean(this.position)?`${this.position?.y}px`:"",left:Boolean(this.position)?`${this.position?.x}px`:""},tabindex:"-1"},t("span",{key:"8e448d47cb436bf6480559afc079eb6bce38fe12",class:"popover__handle"}),t("div",{key:"86c8939a2de68df053efacb31bdc97707007259f",class:"popover__scroll-container",part:"popover__scroll-container",ref:o=>this.scrollContainer=o,style:{maxHeight:!o&&Boolean(this.maxHeight)?this.maxHeight:void 0}},t("slot",{key:"a5cd47d451b4cd8874b3f76a2dcab3818d71ab1c"}))),this.active&&t("div",{key:"05fbf70a43239cca62a57ca654aa78c3914069da",class:"popover__backdrop",onClick:this.onCloseButtonClick})))}get el(){return s(this)}};g.style=":host{position:relative;z-index:var(--s-z-40)}:host *{box-sizing:border-box}:host{--swirl-resource-list-item-background-default:var(\n --s-surface-overlay-default\n );--swirl-resource-list-item-background-hovered:var(\n --s-surface-overlay-hovered\n );--swirl-resource-list-item-background-pressed:var(\n --s-surface-overlay-pressed\n )}.popover--active:not(.popover--closing) .popover__backdrop{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__backdrop{animation:none}}.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-slide-in}@media (min-width: 768px){.popover--active:not(.popover--closing) .popover__content{transform-origin:top left;animation:0.15s popover-fade-scale-in-xy}}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--closing .popover__backdrop{animation:0.15s popover-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.popover--closing .popover__backdrop{animation:none}}.popover--closing .popover__content{animation:0.15s popover-slide-out;animation-fill-mode:forwards}@media (min-width: 768px){.popover--closing .popover__content{animation:0.15s popover-fade-out}}@media (prefers-reduced-motion){.popover--closing .popover__content{animation:none}}.popover--inactive .popover__content{display:none}@media (max-width: 767px){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:0.15s popover-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:none}}.popover--fullscreen-bottom-sheet .popover__backdrop{display:none}.popover--fullscreen-bottom-sheet .popover__content{top:0;border-top-left-radius:0;border-top-right-radius:0}.popover--fullscreen-bottom-sheet .popover__scroll-container{height:100%;max-height:none;padding-top:0;padding-bottom:0}.popover--fullscreen-bottom-sheet .popover__handle{display:none}}@media (min-width: 768px){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-scale-in-y}}@media (prefers-reduced-motion){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}}@media (prefers-reduced-motion){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--transparent .popover__content{background-color:transparent;box-shadow:none}}@media (min-width: 768px){.popover--transparent .popover__scroll-container{padding:0}}.popover__backdrop{position:fixed;z-index:0;background-color:rgba(0, 0, 0, 0.2);animation:0.15s popover-backdrop-fade-in;inset:0}@media (prefers-reduced-motion){.popover__backdrop{animation:none}}@media (min-width: 768px){.popover__backdrop{display:none}}.popover__content{position:fixed;z-index:2;right:0;bottom:0;left:0;overflow:hidden;border-top-left-radius:var(--s-border-radius-xl);border-top-right-radius:var(--s-border-radius-xl);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.popover__content{right:unset;bottom:unset;left:unset;max-width:22.5rem;border-radius:var(--s-border-radius-base);animation:none;box-shadow:var(--s-shadow-level-2)}}.popover__scroll-container{overflow-x:hidden;overflow-y:auto;width:100%;max-height:90vh;padding-top:var(--s-space-24);padding-bottom:var(--s-space-24);overscroll-behavior:contain}@media (min-width: 768px){.popover__scroll-container{max-height:22rem;padding-top:0;padding-bottom:0}}@media (min-width: 768px){.popover--padded .popover__scroll-container{padding:var(--s-space-4)}}.popover__handle{position:absolute;top:var(--s-space-8);left:50%;width:2.5rem;height:0.375rem;border-radius:0.1875rem;background-color:var(--s-border-default);transform:translatex(-50%)}@media (min-width: 768px){.popover__handle{display:none}}@keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@keyframes popover-fade-scale-in-xy{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popover-fade-scale-in-y{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}";const b=class{constructor(e){o(this,e),this.hidePopoverWhenInvisible=!0,this.setAriaAttributes=!0,this.triggerOnClick=!0,this.triggerOnHover=!1,this.triggerIsActive=!1,this.popoverMouseEnter=()=>{this.stopHoverLingerTimer()},this.popoverMouseLeave=()=>{this.triggerIsActive&&this.mouseleaveHandler()},this.onMouseenter=()=>{this.triggerOnHover&&(this.stopHoverLingerTimer(),this.triggerIsActive=!0,this.hoverDelayReference=setTimeout((()=>{this.hoverDelayReference=void 0,this.triggerOnHover&&this.mouseenterHandler()}),this.hoverDelay))},this.mouseenterHandler=()=>{const o=this.getPopoverEl(),e=this.getTriggerEl();o.open(e,!0),o.addEventListener("popoverOpen",(()=>{this.updateTriggerElAriaAttributes(!0)}),{once:!0}),o.addEventListener("popoverClose",(()=>{this.updateTriggerElAriaAttributes(!1)}),{once:!0})},this.onMouseleave=()=>{clearTimeout(this.hoverDelayReference),this.mouseleaveHandler()},this.mouseleaveHandler=()=>{this.triggerOnHover&&this.startHoverLingerTimer()},this.onClick=()=>{if(!this.triggerOnClick)return;const o=this.getPopoverEl(),e=this.getTriggerEl();o.open(e),o.addEventListener("popoverOpen",(()=>{this.updateTriggerElAriaAttributes(!0)}),{once:!0}),o.addEventListener("popoverClose",(()=>{this.updateTriggerElAriaAttributes(!1)}),{once:!0})},this.updateTriggerElAriaAttributes=o=>{if(!this.setAriaAttributes)return;const e=this.getTriggerEl();if(!Boolean(e))return;const t=this.getPopoverEl()?.id;e.tagName.startsWith("SWIRL-")?(e.setAttribute("swirl-aria-controls",t),e.setAttribute("swirl-aria-expanded",String(o||"false")),e.setAttribute("swirl-aria-haspopup","dialog")):(e.setAttribute("aria-controls",t),e.setAttribute("aria-expanded",String(o||"false")),e.setAttribute("aria-haspopup","dialog"))}}componentDidLoad(){if(this.updateTriggerElAriaAttributes(),this.setupHoverListeners(),this.hidePopoverWhenInvisible){this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange.bind(this),{root:this.parentScrollContainer,threshold:1});const o=this.el.querySelector("*");if(!Boolean(o))return;this.intersectionObserver.observe(o)}}disconnectedCallback(){this.intersectionObserver?.disconnect();const o=this.getPopoverEl();Boolean(o)&&(o.removeEventListener("mouseenter",this.popoverMouseEnter),o.removeEventListener("mouseleave",this.popoverMouseLeave))}watchPopover(){this.updateTriggerElAriaAttributes()}watchHover(){clearTimeout(this.hoverDelayReference),clearTimeout(this.hoverLingerReference)}getPopoverEl(){return"string"==typeof this.swirlPopover?document.querySelector(`#${this.swirlPopover}`):this.swirlPopover?.el??this.swirlPopover}getTriggerEl(){return 1!==this.el.children.length&&console.warn('[Swirl] The "swirl-popover-trigger" component expects exactly one child element.'),this.el.children[0]}onVisibilityChange(o){!o[0].isIntersecting&&this.isPopoverOpen()&&this.getPopoverEl()?.close()}setupHoverListeners(){const o=this.getPopoverEl();Boolean(o)&&(o.addEventListener("mouseenter",this.popoverMouseEnter),o.addEventListener("mouseleave",this.popoverMouseLeave))}startHoverLingerTimer(){clearTimeout(this.hoverLingerReference),this.hoverLingerReference=setTimeout((()=>{this.triggerIsActive&&this.isPopoverOpen()&&this.getPopoverEl().close(!0),this.triggerIsActive=!1}),this.hoverLingerDuration)}stopHoverLingerTimer(){clearTimeout(this.hoverLingerReference)}isPopoverOpen(){const o=this.getPopoverEl(),e=o?.shadowRoot.firstChild?.classList.contains("popover--active");return e}render(){return t(i,{key:"d3f1b4af05f94975b38cafde3a106020f24f95ca",onClick:this.onClick,onMouseenter:this.onMouseenter,onMouseleave:this.onMouseleave},t("slot",{key:"f3fd3bfd98a966bf1dc8a7c6f49fcc874eb3ea54"}))}get el(){return s(this)}static get watchers(){return{swirlPopover:["watchPopover"],triggerOnHover:["watchHover"]}}};b.style=".sc-swirl-popover-trigger-h{display:contents}";export{g as swirl_popover,b as swirl_popover_trigger}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,c as i,h as e,H as s}from"./p-g4wOnHIT.js";import{c as n}from"./p-orsBiyT_.js";import{D as r}from"./p-BKpD2IO9.js";import"./p-wi_3Z3FQ.js";const a=class{constructor(e){t(this,e),this.clear=i(this,"clear",7),this.inputBlur=i(this,"inputBlur",7),this.inputFocus=i(this,"inputFocus",7),this.valueChange=i(this,"valueChange",7),this.autoComplete="on",this.characterCounterLabel="Used characters",this.clearButtonLabel="Clear input",this.fontSize="default",this.passwordToggleLabel="Toggle password display",this.rows=1,this.type="text",this.iconSize=24,this.showPassword=!1,this.mediaQueryUnsubscribe=()=>{},this.handleClearClick=()=>{this.inputEl.value="",this.value="",this.valueChange.emit(""),this.inputEl.focus(),this.clear.emit()},this.onChange=t=>{this.value=t.target.value},this.onBlur=t=>{this.inputBlur.emit(t)},this.onFocus=t=>{this.inputFocus.emit(t),this.handleAutoSelect(t)},this.onInput=t=>{this.onChange(t)},this.onKeyPress=t=>{"number"===this.type&&["+","-","e"].includes(t.key)&&t.preventDefault()},this.decreaseValue=()=>{if("number"!==this.type)return;const t=this.step||1;let i=this.inputEl.valueAsNumber;isNaN(this.inputEl.valueAsNumber)&&(i=void 0!==this.min?this.min+1:1),this.value=String(Math.max(this.min||-1/0,i-t)),this.valueChange.emit(this.value)},this.increaseValue=()=>{if("number"!==this.type)return;const t=this.step||1;let i=this.inputEl.valueAsNumber;isNaN(this.inputEl.valueAsNumber)&&(i=void 0!==this.min?this.min-1:-1),this.value=String(Math.min(this.max||1/0,i+t)),this.valueChange.emit(this.value)},this.togglePassword=()=>{"password"===this.type&&(this.showPassword=!this.showPassword)}}componentDidLoad(){this.mediaQueryUnsubscribe=r.subscribe((t=>{this.updateIconSize(t)})),this.autoFocus&&setTimeout((()=>{this.inputEl.focus()}))}componentDidRender(){this.adjustInputSize()}disconnectedCallback(){this.mediaQueryUnsubscribe()}async blurInput(){this.inputEl.blur()}async focusInput(){this.inputEl.focus()}watchValue(t,i){t!==i&&this.valueChange.emit(t)}updateIconSize(t){this.iconSize=t?20:24}adjustInputSize(){(this.rows>1||this.autoGrow)&&(this.inputEl.style.width="",this.inputEl.style.height="",this.inputEl.style.height=Boolean(this.inputEl.scrollHeight)?this.inputEl.scrollHeight/16+"rem":""),1!==this.rows||this.autoGrow||(this.inputEl.style.height="",this.inputEl.style.width="",!this.suffixLabel||"password"===this.type||this.disableDynamicWidth||Boolean(this.placeholder)||(this.inputEl.style.width=this.inputEl.scrollWidth/16+"rem"))}handleAutoSelect(t){(this.autoSelect||this.readonly)&&t.target.select()}render(){const t=1!==this.rows||this.autoGrow?"textarea":"input",i=!0===this.invalid||!1===this.invalid?String(this.invalid):void 0,r="number"===this.type&&!this.disabled&&!this.readonly,a="password"===this.type&&!this.disabled,p=this.clearable&&!this.disabled&&!this.readonly&&Boolean(this.value)&&!a&&!r,u=this.value?.length??0,o=this.showCharacterCounter&&(!this.showCharacterCounterNearLimit||u>=.8*this.maxLength),h="password"===this.type&&this.showPassword?"text":this.type,l=n("text-input",`text-input--font-size-${this.fontSize}`,`text-input--type-${this.type}`,{"text-input--auto-grow":this.autoGrow,"text-input--clearable":p,"text-input--disable-dynamic-width":this.disableDynamicWidth||Boolean(this.placeholder),"text-input--has-suffix":Boolean(this.suffixLabel),"text-input--inline":this.inline,"text-input--show-password":"password"===this.type&&this.showPassword});return e(s,{key:"f822fb9a0003530bed7e53b2a6395fa0ead91d6c"},e("div",{key:"b8a048e87b0a8366b0243a8da2f80fd3571fbd6b",class:l},this.prefixLabel&&e("span",{key:"20636fdec405901ebd416fce525a9c89b1ed9dbe",class:"text-input__prefix"},this.prefixLabel),e(t,{key:"8b192a2783028e0eb1fb5703026daccef7170808","aria-autocomplete":this.swirlAriaAutocomplete,"aria-controls":this.swirlAriaControls,"aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-expanded":this.swirlAriaExpanded,"aria-invalid":i,autoComplete:this.autoComplete,autoFocus:this.autoFocus,class:"text-input__input",disabled:this.disabled,inputMode:this.mode,maxLength:this.maxLength,max:"number"===this.type?this.max:void 0,min:"number"===this.type?this.min:void 0,onBlur:this.onBlur,onFocus:this.onFocus,onInput:this.onInput,onKeyPress:this.onKeyPress,placeholder:Boolean(this.suffixLabel)?void 0:this.placeholder,ref:t=>this.inputEl=t,required:this.required,role:this.swirlRole,name:this.inputName,rows:this.rows>1?this.rows:this.autoGrow?1:void 0,spellcheck:this.spellCheck,step:"number"===this.type?this.step:void 0,type:h,value:this.value,readonly:this.readonly},this.rows>1&&this.value),this.suffixLabel&&e("span",{key:"7b05575e9fc5f5f362f9aa23784177f16eb92660",class:"text-input__suffix"},this.suffixLabel),p&&e("button",{key:"860576e47f0e34aed31a0c53a6d7d8fa4e57557b","aria-label":this.clearButtonLabel,class:"text-input__clear-button",onClick:this.handleClearClick,part:"text-input__clear-button",type:"button"},e("swirl-icon-cancel",{key:"763a1558a792a017ba4a947bf7bd47220f88ee0c",size:this.iconSize})),a&&e("button",{key:"584dd45c5dedb11cf9c7348a49b1ca15f959742c","aria-label":this.passwordToggleLabel,class:"text-input__password-toggle",onClick:this.togglePassword,type:"button"},e(this.showPassword?"swirl-icon-visibility-off":"swirl-icon-visibility",{size:this.iconSize})),r&&e("span",{key:"fbad244a2f8584c0003f581f66dc26bb9cb1f04c",class:"text-input__stepper"},e("button",{key:"921cd8c3e64560ba46a7a06fd5147e132dd7bed4","aria-hidden":"true",class:"text-input__step-button",onClick:this.increaseValue,tabIndex:-1,type:"button"},e("swirl-icon-expand-less",{key:"df8eeb01df755b56dc0a465a02a1d76dbecafe59",size:this.iconSize})),e("button",{key:"fee840a7e4a142f468292a9a69e8958869673e87","aria-hidden":"true",class:"text-input__step-button",onClick:this.decreaseValue,tabIndex:-1,type:"button"},e("swirl-icon-expand-more",{key:"e9af53254c8f1d68c121eb8634444b410a4cb1e3",size:this.iconSize}))),o&&e("span",{key:"88dd11daf949bcb20d1a18bd77ab64a76000b30b",class:"text-input__character-counter","aria-live":"polite"},e("swirl-visually-hidden",{key:"f55d1fa26b458ff6b09e80f79f32b25236cc6d5f"},this.characterCounterLabel),u," ",Boolean(this.maxLength)?`/ ${this.maxLength}`:"")))}static get watchers(){return{value:["watchValue"]}}};a.style='.sc-swirl-text-input-h{display:block;width:100%}.sc-swirl-text-input-h *.sc-swirl-text-input{box-sizing:border-box}.text-input.sc-swirl-text-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm);cursor:text}.text-input--auto-grow.sc-swirl-text-input .text-input__input.sc-swirl-text-input{max-height:none}.text-input--clearable.sc-swirl-text-input,.text-input--type-number.sc-swirl-text-input,.text-input--type-password.sc-swirl-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--clearable.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input,.text-input--type-number.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input,.text-input--type-password.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--show-password.sc-swirl-text-input .text-input__input.sc-swirl-text-input{width:100%}.text-input--font-size-sm.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--font-size-sm.sc-swirl-text-input .text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input--font-size-base.sc-swirl-text-input{--swirl-text-input-placeholder-size:var(--s-font-size-base);font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--font-size-base.sc-swirl-text-input .text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}}.text-input--has-suffix.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type="password"]){width:0.25rem;min-width:0.25rem}.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input{width:2rem;height:1.125rem;justify-content:center;background-color:var(--s-surface-raised-default)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:first-of-type{border-top-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:last-of-type{border-bottom-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:hover{background-color:var(--s-surface-raised-hovered)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-less.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-more.sc-swirl-text-input{width:1rem}.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:0}}.text-input--inline.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{top:calc(100% + var(--s-space-12) + var(--s-border-width-default));right:calc(-1 * var(--s-space-12));max-width:6rem}.text-input__input.sc-swirl-text-input{display:inline-flex;width:100%;max-height:13.75rem;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);resize:none;caret-color:var(--s-border-highlight)}.text-input__input.sc-swirl-text-input:focus{outline:none}.text-input__input.sc-swirl-text-input:disabled{color:var(--s-text-subdued);background-color:transparent}.text-input__input.sc-swirl-text-input::-webkit-outer-spin-button,.text-input__input.sc-swirl-text-input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.text-input__input[type="number"].sc-swirl-text-input{-moz-appearance:textfield}.text-input__input.sc-swirl-text-input::-moz-placeholder{font-size:var(--swirl-text-input-placeholder-size)}.text-input__input.sc-swirl-text-input::placeholder{font-size:var(--swirl-text-input-placeholder-size)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input--disable-dynamic-width.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type="password"]){width:100%;min-width:0}.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__clear-button.sc-swirl-text-input:focus:not(:focus-visible),.text-input__password-toggle.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__clear-button.sc-swirl-text-input:focus-visible,.text-input__password-toggle.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{top:-0.625rem}}.text-input__stepper.sc-swirl-text-input{position:absolute;top:-1.4375rem;right:0;display:flex;flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__stepper.sc-swirl-text-input{top:-1.25rem}}.text-input__step-button.sc-swirl-text-input{display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__step-button.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__step-button.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}.text-input__character-counter.sc-swirl-text-input{position:absolute;top:-1.375rem;right:0;display:flex;color:var(--s-text-subdued);line-height:var(--s-line-height-sm);flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__character-counter.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input__prefix.sc-swirl-text-input{padding-right:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}.text-input__suffix.sc-swirl-text-input{padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}';export{a as swirl_text_input}
|