finpro/dist/chunk-6MOAK36B.js

Design System

import{b as m,d as g,f as _,g as b,h as x}from"./chunk-MZYIQ6EQ.js";import{a as h}from"./chunk-23UFIOHV.js";import{a as u}from"./chunk-2M6HTKCC.js";import{a as f}from"./chunk-JA3VZI2D.js";import{a as c,b as l,g as d,h as n,i as r,j as a,k as v}from"./chunk-GBPY57YZ.js";import{a as i}from"./chunk-NZ3RGSR6.js";var z=c`:host{width:200px;display:inline-block}.select-wrapper{width:100%;position:relative;--padding-vertical:var(--fp-size-2xs);--padding-horizontal:var(--fp-size-s);--background-color:var(--fp-color-primary-background);--border-color:var(--fp-color-border);--border-focus-color:var(--fp-color-primary-hover);--icon-color:var(--fp-color-content-tertiary);--text-color:var(--fp-color-content-primary);--label-color:var(--fp-color-content-secondary);--placeholder-color:var(--fp-color-content-tertiary);--height:var(--fp-size-5xl);--menu-padding:0 var(--fp-size-l);--menu-margin-top:var(--fp-size-2xs);--font-size:var(--fp-font-size-m);--disabled-color:var(--fp-color-tertiary);--z-index:1;--menu-height:250px}:host([size='large']) .select-wrapper{--height:var(--fp-size-6xl);--padding-vertical:var(--fp-size-s);--padding-horizontal:var(--fp-size-l)}:host([size='small']) .select-wrapper{--height:var(--fp-size-3xl);--padding-vertical:var(--fp-size-4xs);--padding-horizontal:var(--fp-size-4xs);--font-size:var(--fp-font-size-s)}.placeholder{color:var(--placeholder-color);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}:host([disabled]) .placeholder{--placeholder-color:var(--fp-color-content-passive)}.invalid{--border-color:var(--fp-color-danger);--border-focus-color:var(--fp-color-danger-hover);--label-color:var(--fp-color-danger)}.select-input{display:flex;align-items:center;justify-content:space-between;cursor:pointer;outline:0;box-sizing:border-box;height:var(--height);border:solid 1px var(--border-color);font:var(--fp-font-title-3-regular);padding:0 var(--padding-horizontal);border-radius:var(--fp-border-radius-s);color:var(--text-color);user-select:none}.remove-all{display:none}.remove-all::after{content:'';position:absolute;left:1.5rem;bottom:4px;height:1rem;border-left:1px solid var(--fp-color-border)}.selected .remove-all{display:block}:host([disabled]) .remove-all,:host([disabled]) .remove-all::after{display:none}.dropdown-icon{font-size:var(--fp-font-size-m)}.dropdown-icon.open{display:none}.select-open .dropdown-icon.open{display:inline-block}.select-open .dropdown-icon.closed{display:none}.selected .dropdown-icon{--icon-color:var(--fp-color-secondary)}:host([disabled]) .dropdown-icon{--icon-color:var(--fp-color-content-passive)}.select-open .select-input{border:solid 1px var(--border-focus-color)}:host([disabled]){cursor:not-allowed}:host([disabled]) .select-input{pointer-events:none;background-color:var(--disabled-color)}.select-input .selected-options{padding:0;margin:0;list-style:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.selected-options li{display:inline;font-size:var(--font-size);color:var(--text-color)}.selected-options li:not(:last-child)::after{content:', '}:host([disabled]) .selected-options li{color:var(--fp-color-content-passive)}.select-input .actions{display:flex;align-items:center;justify-content:center;gap:var(--fp-size-2xs);margin-left:var(--fp-size-2xs)}.popover{--left:0;--top:0;position:fixed;border:solid 1px var(--border-color);background-color:var(--background-color);font:var(--fp-font-title-3-regular);border-radius:var(--fp-border-radius-s);padding:var(--menu-padding);outline:0;box-sizing:border-box;max-height:var(--menu-height);overflow-y:auto;display:none;flex-direction:column;z-index:var(--z-index);width:100%;top:var(--top);left:var(--left)}.select-open .popover{display:flex;border:solid 1px var(--border-focus-color)}fp-icon{color:var(--icon-color)}label{position:absolute;display:block;top:var(--padding-vertical);left:var(--padding-horizontal);right:calc(var(--fp-size-2xs) + var(--fp-size-l) + var(--fp-size-2xs));max-width:max-content;transition:all ease-in .2s;pointer-events:none;font:var(--fp-font-title-3-regular);font-size:var(--font-size);color:var(--placeholder-color);padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:where(.select-open,.selected) label{top:0;left:var(--fp-size-2xs);transform:translateY(-50%);font:var(--fp-font-caption);color:var(--label-color);padding:0 var(--fp-size-4xs);background-color:var(--fp-color-primary-background);pointer-events:initial;right:var(--padding-horizontal)}:host([label-fixed]) .select-wrapper{padding-top:var(--fp-size-l)}:host([label-fixed]) label{top:0;left:0;right:0;padding:0;transition:none;transform:none;pointer-events:initial;font:var(--fp-font-caption);color:var(--label-color)}.help-text,.invalid-text{margin:var(--fp-size-4xs) 0 0 var(--fp-size-2xs);font:var(--fp-font-title-4-regular);padding:var(--fp-size-4xs) var(--fp-input-padding-horizontal)}.help-text{color:var(--fp-color-content-secondary)}.invalid-text{color:var(--fp-color-danger)}.select-open .help-text,.select-open .invalid-text{visibility:hidden}`,O=z;var o=class extends f{constructor(){super(...arguments);this.size="medium";this.required=!1;this.disabled=!1;this.multiple=!1;this.labelFixed=!1;this._isPopoverOpen=!1;this._selectedOptions=[];this._additionalSelectedOptionCount=0;this._isInvalid=!1;this._connectedOptions=[];this._cleanUpPopover=null;this._clickOutsideHandler=e=>{var s;let t=e.composedPath();(s=t==null?void 0:t.find(p=>p.tagName==="FP-SELECT"))!=null&&s.contains(this)||(this.close(),this._checkRequired())}}static get styles(){return[O]}get options(){return this._connectedOptions}get opened(){return this._isPopoverOpen}get selectedOptions(){return this._selectedOptions}get additionalSelectedOptionCount(){return this._additionalSelectedOptionCount}get isInvalid(){return this._isInvalid}open(){this._isPopoverOpen=!0,this._setupPopover(),document.addEventListener("click",this._clickOutsideHandler)}close(){this._isPopoverOpen=!1,this._cleanUpPopover&&this._cleanUpPopover(),document.removeEventListener("click",this._clickOutsideHandler)}_setupPopover(){this._cleanUpPopover=b(this._selectInput,this._popover,()=>{x(this._selectInput,this._popover,{placement:"bottom",strategy:"fixed",middleware:[m(),g(8),_({apply(e){Object.assign(e.elements.floating.style,{width:`${e.elements.reference.getBoundingClientRect().width}px`})}})]}).then(({x:e,y:t})=>{this._popover.style.setProperty("--left",`${e}px`),this._popover.style.setProperty("--top",`${t}px`)})})}connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),this._cleanUpPopover&&this._cleanUpPopover()}inputTemplate(){let e=l`<ul class="selected-options">
      ${this._selectedOptions.map(y=>l`<li>${y.text}</li>`)}
    </ul>`,t=this._additionalSelectedOptionCount?l`<span>+${this._additionalSelectedOptionCount}</span>`:null,s=l`<fp-button
        class="remove-all"
        size="small"
        variant="tertiary"
        kind="neutral"
        icon="x"
        @click=${this._onClickRemove}></fp-button>`,p=this._showPlaceHolder?l`<span class="placeholder">${this.placeholder}</span>`:"";return l`<div
      class="select-input"
      ?disabled=${this.disabled}
      @click=${this._onClickSelectInput}
    >
      ${p} ${e} ${t}
      <div class="actions">
        ${this.multiple?s:null}
        <fp-icon
          class="dropdown-icon open"
          name="chevron-up"
        ></fp-icon>

        <fp-icon
          class="dropdown-icon closed"
          name="chevron-down"
        ></fp-icon>
      </div>
    </div>`}menuTemplate(){return l`<div class="popover" @fp-select-option=${this._handleSelectOptionEvent}>
      <slot></slot>
    </div>`}render(){let e=this._isInvalid&&this.customInvalidText?l`<p class="invalid-text">${this.customInvalidText}</p>`:"",t=this.helpText&&!e?l`<p class="help-text">${this.helpText}</p>`:"",s=this.label?l`<label>${this.label}</label>`:"";return l`<div
      class=${u({"select-wrapper":!0,"select-open":this.opened,selected:this._selectedOptions.length>0,invalid:this._isInvalid})}
      tabindex="-1"
    >
      ${s} ${this.inputTemplate()} ${this.menuTemplate()} ${t} ${e}
    </div> `}get _showPlaceHolder(){return this.label&&!this.labelFixed?!this._selectedOptions.length&&this._isPopoverOpen:!this._selectedOptions.length}_onClickSelectInput(){this._isPopoverOpen?this.close():this.open()}_handleSelectEvent(){this._onFpSelect(this._selectedOptions)}_handleSingleSelect(e){let t=this._connectedOptions.find(s=>s.value!==e.value&&s.selected);t&&(t.selected=!1),this._selectedOptions=[e],this._handleSelectEvent(),this._isPopoverOpen=!1}_handleMultipleSelect(e){let{value:t}=e;e.selected?this._selectedOptions=[...this._selectedOptions,e]:this._selectedOptions=this._selectedOptions.filter(s=>s.value!==t),this._handleSelectEvent()}_handleSelectOptionEvent(e){let t=e.detail;this.multiple?this._handleMultipleSelect(t):this._handleSingleSelect(t)}_onClickRemove(e){e.stopPropagation(),this._connectedOptions.filter(t=>t.selected).forEach(t=>{t.selected=!1}),this._selectedOptions=[],this._handleSelectEvent()}_checkAdditionalItemCount(){if(!this.multiple)return;let e=0;for(let t of this._selectedOptionsItems)if(t.offsetLeft<this._selectedOptionsContainer.offsetWidth)e++;else break;this._additionalSelectedOptionCount=this._selectedOptionsItems.length-e}_checkRequired(){this.required&&(this._isInvalid=this._selectedOptions.length===0)}updated(e){e.has("_selectedOptions")&&e.get("_selectedOptions")instanceof Array?(this._checkRequired(),this._checkAdditionalItemCount()):e.has("multiple")&&typeof e.get("multiple")=="boolean"&&(this._connectedOptions.forEach(t=>{t.multiple=this.multiple,t.selected=!1}),this._selectedOptions=[])}registerOption(e){if(this._connectedOptions.push(e),e.selected){let t={value:e.value,text:e.textContent,selected:e.selected};this.multiple?this._selectedOptions=[...this._selectedOptions,t]:this._selectedOptions=[t],this.requestUpdate()}}unregisterOption(e){this._connectedOptions.splice(this._connectedOptions.indexOf(e),1),this._selectedOptions=this._selectedOptions.filter(t=>t.value!==e.value)}};i([n({reflect:!0})],o.prototype,"label",2),i([n({})],o.prototype,"placeholder",2),i([n({type:String,reflect:!0})],o.prototype,"size",2),i([n({type:Boolean})],o.prototype,"required",2),i([n({type:Boolean,reflect:!0})],o.prototype,"disabled",2),i([n({type:Boolean})],o.prototype,"multiple",2),i([n({type:Boolean,attribute:"label-fixed",reflect:!0})],o.prototype,"labelFixed",2),i([n({type:String,attribute:"help-text"})],o.prototype,"helpText",2),i([n({type:String,attribute:"invalid-text"})],o.prototype,"customInvalidText",2),i([r()],o.prototype,"_isPopoverOpen",2),i([r()],o.prototype,"_selectedOptions",2),i([r()],o.prototype,"_additionalSelectedOptionCount",2),i([r()],o.prototype,"_isInvalid",2),i([a(".selected-options")],o.prototype,"_selectedOptionsContainer",2),i([v(".selected-options li")],o.prototype,"_selectedOptionsItems",2),i([a(".popover")],o.prototype,"_popover",2),i([a(".select-input")],o.prototype,"_selectInput",2),i([h("fp-select")],o.prototype,"_onFpSelect",2),o=i([d("fp-select")],o);export{o as a};
//# sourceMappingURL=chunk-6MOAK36B.js.map