@getflip/swirl-components 0.400.0 → 0.401.0

package/dist/swirl-components/p-07265507.entry.js

@@ -1 +0,0 @@
-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,D as a,k 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,k as m,q as f}from"./p-wi_3Z3FQ.js";const u=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=this.enableFlip?[a(e),p(),h()]:[a(e),p()];this.position=await r(this.triggerEl,this.contentContainer,{middleware:t,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=m(),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?f(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 f(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:"455e31122faf8e5766c7c3f505ea50f4837e5d2f",style:{display:this.active?"inline-flex":"none"}},t("div",{key:"b9e370e001eadee537375c65c006da022e926f8f",class:e,onKeyDown:this.onKeydown},t("div",{key:"5bf0a111ae45a0b78cb5b1fd182f6e6cae4ef918","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:"2f4351d341b6b052136d50955c113dc8749da370",class:"popover__handle"}),t("div",{key:"9076bbc0a9b87ead06ff6782553fe338a5fabf8e",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:"f0311a5c9c70f7c7012d24dcd54a12155bf4c9c0"}))),this.active&&t("div",{key:"03b8839d5ef459920dde306baeeb71e3932b1c84",class:"popover__backdrop",onClick:this.onCloseButtonClick})))}get el(){return s(this)}};u.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 g=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"]}}};g.style=".sc-swirl-popover-trigger-h{display:contents}";export{u as swirl_popover,g as swirl_popover_trigger}

package/dist/swirl-components/p-db5758e5.entry.js

@@ -1 +0,0 @@
-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 p=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&&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,p="password"===this.type&&!this.disabled,a=this.clearable&&!this.disabled&&!this.readonly&&Boolean(this.value)&&!p&&!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":a,"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:"288582bcca41f2ae8cf3c904ed02fcb0a976be7b"},e("div",{key:"817b0708b7bebf147ded143b4f0dea6206959d49",class:l},this.prefixLabel&&e("span",{key:"1e1bd63e29fb41cdc58237b78e55b6744bb28cda",class:"text-input__prefix"},this.prefixLabel),e(t,{key:"731a75748b874b5414668e4c4d412fa078b54b3e","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:"2ac53e8616fba0f233c51e95b7a0686d03dc552c",class:"text-input__suffix"},this.suffixLabel),a&&e("button",{key:"48f457dfb8c41726623a34b68ba5f7622705145f","aria-label":this.clearButtonLabel,class:"text-input__clear-button",onClick:this.handleClearClick,part:"text-input__clear-button",type:"button"},e("swirl-icon-cancel",{key:"5f853517b77fcb680f985c5a4624732026c7d39a",size:this.iconSize})),p&&e("button",{key:"a11670fac677c71297420e1ab2b7ce23dfe99671","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:"e098155b27a7d5dd49019b2c1956b0b94e0c3035",class:"text-input__stepper"},e("button",{key:"008c30c8f3bc1d7b4227db185b367d0216c051da","aria-hidden":"true",class:"text-input__step-button",onClick:this.increaseValue,tabIndex:-1,type:"button"},e("swirl-icon-expand-less",{key:"656e442c33bd16d69057fb59158d0900e8640b2c",size:this.iconSize})),e("button",{key:"f1123bb4c9440e71727846782135c31a912cebf5","aria-hidden":"true",class:"text-input__step-button",onClick:this.decreaseValue,tabIndex:-1,type:"button"},e("swirl-icon-expand-more",{key:"bbd40a1605fa6b3757d308fd5fca6ef5cd133b59",size:this.iconSize}))),o&&e("span",{key:"98b9121e7b79872e05cd4d4d1c956405118ba0b8",class:"text-input__character-counter","aria-live":"polite"},e("swirl-visually-hidden",{key:"339c0dd5c187d8e7818ae3dc4a75a878b3f81f6c"},this.characterCounterLabel),u," ",Boolean(this.maxLength)?`/ ${this.maxLength}`:"")))}static get watchers(){return{value:["watchValue"]}}};p.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{p as swirl_text_input}