@getflip/swirl-components 0.70.1 → 0.71.1

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

@@ -1 +0,0 @@
-import{r as s,c as i,h as e,H as t,g as l}from"./p-3fca9a05.js";import{c as r}from"./p-b7898321.js";import{q as o}from"./p-646e00de.js";const c=class{constructor(e){s(this,e),this.valueChange=i(this,"valueChange",7),this.select=s=>{this.value=s.detail,this.valueChange.emit(this.value),this.multiSelect||this.popover.close()},this.unselectOption=s=>{this.value=this.value.filter((i=>i!==s)),this.valueChange.emit(this.value)},this.onSlotChange=()=>{this.updateOptions()},this.onOpen=s=>{var i;this.placement=null===(i=s.detail.position)||void 0===i?void 0:i.placement,this.open=!0},this.onClose=()=>{this.open=!1},this.onKeyDown=s=>{"Space"!==s.code&&"Enter"!==s.code||(s.preventDefault(),this.popover.open())},this.disabled=void 0,this.inline=void 0,this.invalid=void 0,this.label=void 0,this.multiSelect=void 0,this.required=void 0,this.selectId=Math.round(1e6*Math.random()).toString(),this.swirlAriaDescribedby=void 0,this.value=void 0,this.options=[],this.open=void 0,this.placement=void 0}componentWillLoad(){queueMicrotask((()=>{this.updateOptions()}))}onWindowFocusIn(s){s.target===this.el.querySelector("input")&&s.stopImmediatePropagation()}updateOptions(){this.options=o(this.el,"swirl-option-list-item")}render(){var s,i;const l=Boolean(this.value)?null===(s=this.value)||void 0===s?void 0:s.map((s=>{var i;return null===(i=this.options.find((i=>i.value===s)))||void 0===i?void 0:i.label})).join(", "):"",o=!0===this.invalid||!1===this.invalid?String(this.invalid):void 0,c=r("select",`select--placement-${this.placement}`,{"select--disabled":this.disabled,"select--inline":this.inline,"select--multi":this.multiSelect});return e(t,{onKeyDown:this.onKeyDown},e("div",{class:c},e("input",{"aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-invalid":o,class:"select__input",disabled:this.disabled,id:`trigger-${this.selectId}`,readOnly:!0,type:"text",value:l}),e("span",{class:"select__multi-select-values"},null===(i=this.value)||void 0===i?void 0:i.map((s=>this.options.find((i=>i.value===s)))).map((s=>e("swirl-tag",{"aria-hidden":"true",label:null==s?void 0:s.label,onRemove:()=>this.unselectOption(null==s?void 0:s.value),removable:!this.disabled})))),e("span",{class:"select__indicator"},e(this.open?"swirl-icon-expand-less":"swirl-icon-expand-more",null)),e("swirl-popover",{animation:"scale-in-y",class:"select__popover",label:this.label,offset:[0,-16],onPopoverClose:this.onClose,onPopoverOpen:this.onOpen,popoverId:`select-options-${this.selectId}`,ref:s=>this.popover=s,trigger:`trigger-${this.selectId}`,useContainerWidth:"swirl-form-control"},e("swirl-option-list",{onValueChange:this.select,multiSelect:this.multiSelect,value:this.value},e("slot",{onSlotchange:this.onSlotChange})))))}get el(){return l(this)}};c.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){margin-top:var(--s-space-16)}.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;visibility:hidden;width:100%;height:100%}.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__input.sc-swirl-select{display:block;overflow:hidden;width:100%;height:1.375rem;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.375rem;padding-right:calc(1.5rem + var(--s-space-8));flex-wrap:wrap;gap:var(--s-space-8)}.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)))}";export{c as swirl_select}