@getflip/swirl-components 0.512.0 → 0.513.0

package/dist/swirl-components/p-7d94ff80.entry.js

@@ -1 +0,0 @@
-import{r as e,c as s,h as t,a as i,d as l}from"./p-BdGaOt5L.js";import{c}from"./p-orsBiyT_.js";import{q as a}from"./p-CCck-DTo.js";const r=class{constructor(t){e(this,t),this.searchChange=s(this,"searchChange",7),this.valueChange=s(this,"valueChange",7),this.allowDeselect=!0,this.emptyListLabel="No results found.",this.searchInputLabel="Search options",this.selectId=Math.round(1e6*Math.random()).toString(),this.options=[],this.typeaheadBuffer="",this.select=e=>{e.stopPropagation(),this.value=e.detail,this.multiSelect||this.swirlPopover.close()},this.unselectOption=e=>{this.allowDeselect&&(this.value=this.value.filter((s=>s!==e)))},this.onSlotChange=()=>{this.updateOptions()},this.onOpen=e=>{this.placement=e.detail.position?.placement,this.open=!0,this.typeaheadBuffer="",clearTimeout(this.typeaheadTimeout),this.withSearch&&Boolean(this.searchInput)?this.searchInput.focus():this.optionList.querySelector('[tabIndex="0"]')?.focus()},this.onClose=()=>{Boolean(this.searchInput)&&(this.searchInput.value="",this.searchChange.emit("")),this.typeaheadBuffer="",clearTimeout(this.typeaheadTimeout),this.open=!1,this.input.focus()},this.onKeyDown=e=>{if("Space"===e.code||"Enter"===e.code){if(e.target===this.searchInput)return;e.preventDefault(),this.swirlPopover.open(this.el)}else"ArrowDown"===e.code&&e.target===this.searchInput?this.optionList.querySelector('[tabIndex="0"]')?.focus():this.isTypeaheadKey(e)&&(e.preventDefault(),e.stopPropagation(),this.handleTypeahead(e.key))},this.onSearchInput=e=>{this.searchChange.emit(e.target.value)}}componentWillLoad(){queueMicrotask((()=>{this.updateOptions(),this.observeSlotChanges()}))}disconnectedCallback(){this.observer?.disconnect(),clearTimeout(this.typeaheadTimeout)}onWindowFocusIn(e){e.target===this.el.querySelector("input")&&e.stopImmediatePropagation()}onValueChange(e,s){e?.length===s?.length&&e?.every((e=>s?.includes(e)))||this.valueChange.emit(this.value)}observeSlotChanges(){this.observer=new MutationObserver((()=>{this.updateOptions()})),this.observer.observe(this.el,{childList:!0,subtree:!0})}updateOptions(){this.options=a(this.el,"swirl-option-list-item")}isTypeaheadKey(e){return e.target!==this.searchInput&&!(e.metaKey||e.ctrlKey||e.altKey)&&1===e.key.length&&" "!==e.key}handleTypeahead(e){const s=e.toLowerCase();if(clearTimeout(this.typeaheadTimeout),this.typeaheadBuffer.length>0&&[...this.typeaheadBuffer].every((e=>e===s)))this.typeaheadBuffer+=s,this.cycleTypeahead(s);else{const e=this.typeaheadBuffer.length>1&&1===new Set(this.typeaheadBuffer).size;this.typeaheadBuffer=e?s:this.typeaheadBuffer+s,this.prefixMatchTypeahead(this.typeaheadBuffer)||(this.typeaheadBuffer=s,this.prefixMatchTypeahead(this.typeaheadBuffer))}this.typeaheadTimeout=setTimeout((()=>{this.typeaheadBuffer=""}),500)}cycleTypeahead(e){const s=this.options.filter((e=>!e.disabled)).filter((s=>s.label?.toLowerCase().startsWith(e)));if(0===s.length)return;const t=this.getTypeaheadAnchorValue(),i=s.findIndex((e=>e.value===t));this.applyTypeaheadMatch(s[(i+1)%s.length])}prefixMatchTypeahead(e){const s=this.options.filter((e=>!e.disabled)).find((s=>s.label?.toLowerCase().startsWith(e)));return!!s&&(this.applyTypeaheadMatch(s),!0)}getTypeaheadAnchorValue(){if(this.open){const e=this.options.find((e=>e.querySelector('[role="option"][tabindex="0"]')));return e?.value}return this.value?.[this.value.length-1]}applyTypeaheadMatch(e){this.open&&this.optionList.focusItemWithValue(e.value)}getValueLabel(){return Boolean(this.value)?this.value?.map((e=>this.options.find((s=>s.value===e))?.label)).join(", "):""}render(){const e=this.getValueLabel(),s=!0===this.invalid||!1===this.invalid?String(this.invalid):void 0,l=this.el.closest("swirl-form-control"),a=this.standalone?[-8,0]:l?.inline||"outside"===l?.labelPosition?[0,-12]:[0,-16],r=c("select",`select--placement-${this.placement}`,{"select--disabled":this.disabled,"select--inline":this.inline,"select--multi":this.multiSelect,"select--search-loading":this.searchLoading,"select--standalone":this.standalone});return t(i,{key:"cd2ebc3f06c45bf23f700307898c17fcb43ac66c",onKeyDown:this.onKeyDown},t("div",{key:"25ebb41429381a9676347da1931a492d5b2b3c75",class:r},t("swirl-popover-trigger",{key:"77508033b1604f3ebd8de4051a40b5ace92c287e",swirlPopover:this.swirlPopover,setAriaAttributes:!1},t("swirl-stack",{key:"3bda3bbf226878ab6f5c04f736a4c117cb4f1f6e",class:"select__value-container"},this.standalone&&t("span",{key:"6b9246b4309c8a0b5214aa52f9f0949fe057b1e8","aria-hidden":"true",class:"select__resize-helper"},e),t("input",{key:"247f23ee5edd372768f95558cd9de57035910050","aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-invalid":s,class:"select__input",disabled:this.disabled,readOnly:!0,ref:e=>this.input=e,type:"text",value:e}))),t("span",{key:"0274bf2cdda4e4203aeb0a63997417f9e5494c00",class:"select__multi-select-values"},this.value?.map((e=>this.options.find((s=>s.value===e))))?.map((e=>t("swirl-tag",{"aria-hidden":"true",label:e?.label,onRemove:()=>this.unselectOption(e?.value),removable:!this.disabled&&this.allowDeselect&&!e?.disabled})))),t("span",{key:"5a3a2d8b00d2c4f5818edd8f3c6862d14b62596e",class:"select__indicator"},t(this.open?"swirl-icon-expand-less":"swirl-icon-expand-more",{size:this.standalone?20:24})),t("swirl-popover",{key:"7660cdecafd124f2e011691c8562f35cd91e77a7",animation:"scale-in-y",class:"select__popover",id:`select-options-${this.selectId}`,label:this.label,offset:a,onPopoverClose:this.onClose,onPopoverOpen:this.onOpen,ref:e=>this.swirlPopover=e,useContainerWidth:!this.standalone&&"swirl-form-control"},this.withSearch&&t("div",{key:"fa4662e27d2bbed8eb5138f74e1ed9d8cb047e45",class:"select__search"},t("swirl-icon-search",{key:"1f7011fc3010813d78327e110460a42477b42c0f",class:"select__search-icon",size:20}),t("input",{key:"e678d46c74672bccf08739f25c6a6819e4ab77c1","aria-label":this.searchInputLabel,class:"select__search-input",onInput:this.onSearchInput,placeholder:this.searchPlaceholder,ref:e=>this.searchInput=e,type:"search"}),this.searchLoading&&t("swirl-spinner",{key:"ff17da88f9f0373538344e17295df43e49679d16",class:"select__search-spinner",size:"s"})),t("swirl-option-list",{key:"12a30f19bde3cc18776c3d0be1c78cbea1b122d8",class:"select__option-list",allowDeselect:this.allowDeselect,onValueChange:this.select,multiSelect:this.multiSelect,ref:e=>this.optionList=e,value:this.value},!this.searchLoading&&t("div",{key:"0f01d8805c9d319e6b580aed05fecb53154695f1","aria-disabled":"true",class:"select__empty-list-label",role:"option"},t("swirl-text",{key:"d1f0bcfb842c6f9cbf5b817082b75ccb2f7e59c2",color:"subdued",weight:"medium"},this.emptyListLabel)),t("slot",{key:"f849b8d08f0f1dd4853a7715750f8aedbf96f5c0",onSlotchange:this.onSlotChange})))))}get el(){return l(this)}static get watchers(){return{value:[{onValueChange:0}]}}};r.style='.sc-swirl-select-h{display:block;width:100%}.sc-swirl-select-h *.sc-swirl-select{box-sizing:border-box}.select.sc-swirl-select{position:relative;display:flex;width:100%}.select.sc-swirl-select .sc-swirl-select::part(popover__content),.select.sc-swirl-select .sc-swirl-select [part~="popover__content"]{margin-top:var(--s-space-16)}@media (min-width: 768px){.select.sc-swirl-select .sc-swirl-select::part(popover__scroll-container){padding-top:0}}.select--placement-top-start.sc-swirl-select .sc-swirl-select::part(popover__content),.select--placement-top-start.sc-swirl-select .sc-swirl-select [part~="popover__content"]{margin-top:-2.25rem}.select--multi.sc-swirl-select .select__input.sc-swirl-select{position:absolute;width:100%;height:100%;pointer-events:none;opacity:0}.select--multi.sc-swirl-select .select__multi-select-values.sc-swirl-select{display:flex}.select--disabled.sc-swirl-select .select__input.sc-swirl-select{color:var(--s-text-disabled)}.select--disabled.sc-swirl-select .select__indicator.sc-swirl-select{color:var(--s-icon-disabled)}.select--inline.sc-swirl-select .select__indicator.sc-swirl-select{transform:translateY(-50%)}.select--standalone.sc-swirl-select{width:-moz-fit-content;width:fit-content}.select--standalone.sc-swirl-select .select__indicator.sc-swirl-select{position:relative;top:auto;right:auto;cursor:pointer;transform:none}.select--standalone.sc-swirl-select .select__input.sc-swirl-select{padding-right:var(--s-space-8);font-weight:var(--s-font-weight-medium);cursor:pointer}.select--standalone.sc-swirl-select .select__value-container.sc-swirl-select{width:-moz-min-content;width:min-content}.select--search-loading.sc-swirl-select .select__search-input.sc-swirl-select{padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8))}.select__resize-helper.sc-swirl-select{display:block;width:auto;height:0;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));padding-right:var(--s-space-8);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left;white-space:pre;white-space:pre;vertical-align:top;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;opacity:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__resize-helper.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__input.sc-swirl-select{display:block;overflow:hidden;width:100%;height:1.25rem;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default}.select__input.sc-swirl-select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__multi-select-values.sc-swirl-select{display:none;overflow:hidden;width:100%;min-height:1.25rem;padding-right:calc(1.5rem + var(--s-space-8));flex-wrap:wrap;flex-shrink:0;gap:var(--s-space-8)}.select__multi-select-values.sc-swirl-select .sc-swirl-select::part(tag),.select__multi-select-values.sc-swirl-select .sc-swirl-select [part~="tag"]{height:1.25rem;padding:0 var(--s-space-4)}.select__indicator.sc-swirl-select{position:absolute;top:50%;right:0;display:inline-flex;color:var(--s-icon-default);transform:translateY(calc(-50% - var(--s-space-8)));pointer-events:none}.select__search.sc-swirl-select{position:relative;display:flex;width:100%;padding:0.0625rem var(--s-space-8);border-bottom:0.0625rem solid var(--s-border-default)}@media (min-width: 768px){.select__search.sc-swirl-select{position:sticky;z-index:1;top:0;padding-top:var(--s-space-8);padding-right:0.0625rem;padding-left:0.0625rem}}.select__search-icon.sc-swirl-select{position:absolute;top:50%;left:calc(var(--s-space-8) * 2);display:inline-flex;color:var(--s-icon-default);transform:translateY(-50%)}@media (min-width: 768px){.select__search-icon.sc-swirl-select{left:var(--s-space-12);margin-top:var(--s-space-4);padding:0.0625rem}}.select__search-input.sc-swirl-select{width:100%;height:2.5rem;padding-right:var(--s-space-12);padding-left:calc(var(--s-space-12) + 1.25rem + var(--s-space-8));align-items:center;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.select__search-input.sc-swirl-select:focus:not(:focus-visible){outline:none}.select__search-input.sc-swirl-select:focus-visible{outline-color:var(--s-focus-default)}.select__search-input.sc-swirl-select::-moz-placeholder{color:var(--s-text-subdued)}.select__search-input.sc-swirl-select::placeholder{color:var(--s-text-subdued)}.select__search-input.sc-swirl-select::-webkit-search-decoration,.select__search-input.sc-swirl-select::-webkit-search-cancel-button,.select__search-input.sc-swirl-select::-webkit-search-results-button,.select__search-input.sc-swirl-select::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__search-input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__popover.sc-swirl-select::part(popover__scroll-container),.select__popover.sc-swirl-select [part~="popover__scroll-container"]{padding:0;overflow:hidden;display:flex;flex-direction:column}.select__popover.sc-swirl-select .select__search.sc-swirl-select{flex-shrink:0}.select__popover.sc-swirl-select .select__option-list.sc-swirl-select{padding:var(--s-space-4);overflow:auto;min-height:0}.select__search-spinner.sc-swirl-select{position:absolute;top:50%;right:var(--s-space-12);display:inline-flex;transform:translateY(-50%)}@media (min-width: 768px){.select__search-spinner.sc-swirl-select{margin-top:var(--s-space-4)}}.select__empty-list-label.sc-swirl-select{padding:var(--s-space-12) var(--s-space-12) 0}.select__empty-list-label.sc-swirl-select:not(:only-child){display:none}@media (min-width: 768px){.select__empty-list-label.sc-swirl-select{padding:var(--s-space-12) var(--s-space-12) var(--s-space-8)}}';export{r as swirl_select}