@trendyol/baklava 2.0.0-beta.56 → 2.0.0-beta.57

package/dist/baklava.js

@@ -1,2 +1,2 @@
-import{a as g}from"./chunk-C5HFLPOK.js";import{a as b}from"./chunk-IDG5M2QP.js";import{a as I}from"./chunk-EX6STMCI.js";import{a as D}from"./chunk-RQQTHSVK.js";import{b as h,d as w}from"./chunk-M623DR5J.js";import{b as P}from"./chunk-LPQ6QJUJ.js";import{a as B}from"./chunk-JHOV25H6.js";import{a as s}from"./chunk-YFAHSZVL.js";import{a as n}from"./chunk-A25HQAVJ.js";import{c,f as i}from"./chunk-WFBCOT52.js";import{a as m}from"./chunk-KAHH46F6.js";import{a as x}from"./chunk-KWTSWXUL.js";import"./chunk-KWAF5LTC.js";import{a as r}from"./chunk-OEJUFPBS.js";import{a}from"./chunk-54XXQVFL.js";import{b as f,e as p}from"./chunk-FEQIC2KZ.js";import"./chunk-KQBKSEYJ.js";import"./chunk-5VLVLBWY.js";import{a as d}from"./chunk-H37QVPNF.js";import{a as u}from"./chunk-WIJU4SW3.js";import{a as l}from"./chunk-EADA5CG6.js";import"./chunk-ENFFFE4I.js";import"./chunk-2TVOKUHE.js";import{a as o,b as t,c as e}from"./chunk-WXJKPVRA.js";import"./chunk-72IJCTLJ.js";import"./chunk-23UFIOHV.js";import"./chunk-HG7OBTQS.js";import"./chunk-NZ3RGSR6.js";export{r as BlAlert,a as BlBadge,l as BlButton,f as BlCheckbox,p as BlCheckboxGroup,d as BlDialog,u as BlDrawer,w as BlDropdown,P as BlDropdownGroup,h as BlDropdownItem,e as BlIcon,s as BlInput,B as BlPagination,n as BlProgressIndicator,c as BlRadio,i as BlRadioGroup,m as BlSelect,x as BlSelectOption,I as BlTab,g as BlTabGroup,b as BlTabPanel,D as BlTooltip,t as getIconPath,o as setIconPath};
+import{a as g}from"./chunk-C5HFLPOK.js";import{a as b}from"./chunk-IDG5M2QP.js";import{a as I}from"./chunk-EX6STMCI.js";import{a as D}from"./chunk-RQQTHSVK.js";import{b as h,d as w}from"./chunk-M623DR5J.js";import{b as P}from"./chunk-LPQ6QJUJ.js";import{a as B}from"./chunk-JHOV25H6.js";import{a as s}from"./chunk-YFAHSZVL.js";import{a as n}from"./chunk-A25HQAVJ.js";import{c,f as i}from"./chunk-WFBCOT52.js";import{a as m}from"./chunk-6BJAHDFH.js";import{a as x}from"./chunk-KWTSWXUL.js";import"./chunk-KWAF5LTC.js";import{a as r}from"./chunk-OEJUFPBS.js";import{a}from"./chunk-54XXQVFL.js";import{b as f,e as p}from"./chunk-TVJJYVZH.js";import"./chunk-KQBKSEYJ.js";import"./chunk-5VLVLBWY.js";import{a as d}from"./chunk-H37QVPNF.js";import{a as u}from"./chunk-WIJU4SW3.js";import{a as l}from"./chunk-EADA5CG6.js";import"./chunk-ENFFFE4I.js";import"./chunk-2TVOKUHE.js";import{a as o,b as t,c as e}from"./chunk-WXJKPVRA.js";import"./chunk-72IJCTLJ.js";import"./chunk-23UFIOHV.js";import"./chunk-HG7OBTQS.js";import"./chunk-NZ3RGSR6.js";export{r as BlAlert,a as BlBadge,l as BlButton,f as BlCheckbox,p as BlCheckboxGroup,d as BlDialog,u as BlDrawer,w as BlDropdown,P as BlDropdownGroup,h as BlDropdownItem,e as BlIcon,s as BlInput,B as BlPagination,n as BlProgressIndicator,c as BlRadio,i as BlRadioGroup,m as BlSelect,x as BlSelectOption,I as BlTab,g as BlTabGroup,b as BlTabPanel,D as BlTooltip,t as getIconPath,o as setIconPath};
 //# sourceMappingURL=baklava.js.map

package/dist/chunk-6BJAHDFH.js

@@ -0,0 +1,35 @@
+import{b as m,c as f,e as g,g as _,h as x}from"./chunk-KWAF5LTC.js";import{a as b}from"./chunk-ENFFFE4I.js";import{a as u}from"./chunk-23UFIOHV.js";import{a as c,b as i,f as d,g as v,h as n,i as r,j as a,k as h}from"./chunk-HG7OBTQS.js";import{a as l}from"./chunk-NZ3RGSR6.js";var z=c`:host{width:200px;display:inline-block}.select-wrapper{width:100%;position:relative;--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-xs);--background-color:var(--bl-color-primary-background);--border-color:var(--bl-color-border);--border-focus-color:var(--bl-color-primary-hover);--icon-color:var(--bl-color-content-tertiary);--text-color:var(--bl-color-content-primary);--label-color:var(--bl-color-content-secondary);--placeholder-color:var(--bl-color-content-tertiary);--height:var(--bl-size-2xl);--menu-padding:0 var(--bl-size-m);--menu-margin-top:var(--bl-size-2xs);--font-size:var(--bl-font-size-m);--disabled-color:var(--bl-color-tertiary);--z-index:1;--menu-height:250px}:host([size='large']) .select-wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m)}:host([size='small']) .select-wrapper{--height:var(--bl-size-xl);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-xs);--font-size:var(--bl-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(--bl-color-content-passive)}.invalid{--border-color:var(--bl-color-danger);--border-focus-color:var(--bl-color-danger-hover);--label-color:var(--bl-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(--bl-font-title-3-regular);padding:0 var(--padding-horizontal);border-radius:var(--bl-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(--bl-color-border)}.selected .remove-all{display:block}:host([disabled]) .remove-all,:host([disabled]) .remove-all::after{display:none}.dropdown-icon{font-size:var(--bl-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(--bl-color-secondary)}:host([disabled]) .dropdown-icon{--icon-color:var(--bl-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(--bl-color-content-passive)}.select-input .actions{display:flex;align-items:center;justify-content:center;gap:var(--bl-size-2xs);margin-left:var(--bl-size-2xs)}.popover{--left:0;--top:0;position:fixed;border:solid 1px var(--border-color);background-color:var(--background-color);font:var(--bl-font-title-3-regular);border-radius:var(--bl-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)}bl-icon{color:var(--icon-color)}label{position:absolute;display:block;top:var(--padding-vertical);left:var(--padding-horizontal);right:calc(var(--bl-size-2xs) + var(--bl-size-m) + var(--bl-size-2xs));max-width:max-content;transition:all ease-in .2s;pointer-events:none;font:var(--bl-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(--bl-size-2xs);transform:translateY(-50%);font:var(--bl-font-caption);color:var(--label-color);padding:0 var(--bl-size-3xs);background-color:var(--bl-color-primary-background);pointer-events:initial;right:var(--padding-horizontal)}:host([label-fixed]) .select-wrapper{padding-top:var(--bl-size-m)}:host([label-fixed]) label{top:0;left:0;right:0;padding:0;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--label-color)}.help-text,.invalid-text{margin:var(--bl-size-3xs) 0 0 var(--bl-size-2xs);font:var(--bl-font-title-4-regular);padding:var(--bl-size-3xs) var(--bl-input-padding-horizontal)}.help-text{color:var(--bl-color-content-secondary)}.invalid-text{color:var(--bl-color-danger)}.select-open .help-text,.select-open .invalid-text{visibility:hidden}`,O=z;var o=class extends d{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==="BL-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=_(this._selectInput,this._popover,()=>{x(this._selectInput,this._popover,{placement:"bottom",strategy:"fixed",middleware:[m(),f(8),g({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=i`<ul class="selected-options">
+      ${this._selectedOptions.map(y=>i`<li>${y.text}</li>`)}
+    </ul>`,t=this._additionalSelectedOptionCount?i`<span>+${this._additionalSelectedOptionCount}</span>`:null,s=i`<bl-button
+        class="remove-all"
+        size="small"
+        variant="tertiary"
+        kind="neutral"
+        icon="close"
+        @click=${this._onClickRemove}></bl-button>`,p=this._showPlaceHolder?i`<span class="placeholder">${this.placeholder}</span>`:"";return i`<div
+      class="select-input"
+      ?disabled=${this.disabled}
+      @click=${this._onClickSelectInput}
+    >
+      ${p} ${e} ${t}
+      <div class="actions">
+        ${this.multiple?s:null}
+        <bl-icon
+          class="dropdown-icon open"
+          name="arrow_up"
+        ></bl-icon>
+
+        <bl-icon
+          class="dropdown-icon closed"
+          name="arrow_down"
+        ></bl-icon>
+      </div>
+    </div>`}menuTemplate(){return i`<div class="popover" @bl-select-option=${this._handleSelectOptionEvent}>
+      <slot></slot>
+    </div>`}render(){let e=this._isInvalid&&this.customInvalidText?i`<p class="invalid-text">${this.customInvalidText}</p>`:"",t=this.helpText&&!e?i`<p class="help-text">${this.helpText}</p>`:"",s=this.label?i`<label>${this.label}</label>`:"";return i`<div
+      class=${b({"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._onBlSelect(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)}};l([n({})],o.prototype,"label",2),l([n({})],o.prototype,"placeholder",2),l([n({type:String,reflect:!0})],o.prototype,"size",2),l([n({type:Boolean})],o.prototype,"required",2),l([n({type:Boolean})],o.prototype,"disabled",2),l([n({type:Boolean})],o.prototype,"multiple",2),l([n({type:Boolean,attribute:"label-fixed"})],o.prototype,"labelFixed",2),l([n({type:String,attribute:"help-text"})],o.prototype,"helpText",2),l([n({type:String,attribute:"invalid-text"})],o.prototype,"customInvalidText",2),l([r()],o.prototype,"_isPopoverOpen",2),l([r()],o.prototype,"_selectedOptions",2),l([r()],o.prototype,"_additionalSelectedOptionCount",2),l([r()],o.prototype,"_isInvalid",2),l([a(".selected-options")],o.prototype,"_selectedOptionsContainer",2),l([h(".selected-options li")],o.prototype,"_selectedOptionsItems",2),l([a(".popover")],o.prototype,"_popover",2),l([a(".select-input")],o.prototype,"_selectInput",2),l([u("bl-select")],o.prototype,"_onBlSelect",2),o=l([v("bl-select")],o);export{o as a};
+//# sourceMappingURL=chunk-6BJAHDFH.js.map

package/dist/chunk-6BJAHDFH.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/select/bl-select.css", "../src/components/select/bl-select.ts"],
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{width:200px;display:inline-block}.select-wrapper{width:100%;position:relative;--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-xs);--background-color:var(--bl-color-primary-background);--border-color:var(--bl-color-border);--border-focus-color:var(--bl-color-primary-hover);--icon-color:var(--bl-color-content-tertiary);--text-color:var(--bl-color-content-primary);--label-color:var(--bl-color-content-secondary);--placeholder-color:var(--bl-color-content-tertiary);--height:var(--bl-size-2xl);--menu-padding:0 var(--bl-size-m);--menu-margin-top:var(--bl-size-2xs);--font-size:var(--bl-font-size-m);--disabled-color:var(--bl-color-tertiary);--z-index:1;--menu-height:250px}:host([size='large']) .select-wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m)}:host([size='small']) .select-wrapper{--height:var(--bl-size-xl);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-xs);--font-size:var(--bl-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(--bl-color-content-passive)}.invalid{--border-color:var(--bl-color-danger);--border-focus-color:var(--bl-color-danger-hover);--label-color:var(--bl-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(--bl-font-title-3-regular);padding:0 var(--padding-horizontal);border-radius:var(--bl-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(--bl-color-border)}.selected .remove-all{display:block}:host([disabled]) .remove-all,:host([disabled]) .remove-all::after{display:none}.dropdown-icon{font-size:var(--bl-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(--bl-color-secondary)}:host([disabled]) .dropdown-icon{--icon-color:var(--bl-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(--bl-color-content-passive)}.select-input .actions{display:flex;align-items:center;justify-content:center;gap:var(--bl-size-2xs);margin-left:var(--bl-size-2xs)}.popover{--left:0;--top:0;position:fixed;border:solid 1px var(--border-color);background-color:var(--background-color);font:var(--bl-font-title-3-regular);border-radius:var(--bl-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)}bl-icon{color:var(--icon-color)}label{position:absolute;display:block;top:var(--padding-vertical);left:var(--padding-horizontal);right:calc(var(--bl-size-2xs) + var(--bl-size-m) + var(--bl-size-2xs));max-width:max-content;transition:all ease-in .2s;pointer-events:none;font:var(--bl-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(--bl-size-2xs);transform:translateY(-50%);font:var(--bl-font-caption);color:var(--label-color);padding:0 var(--bl-size-3xs);background-color:var(--bl-color-primary-background);pointer-events:initial;right:var(--padding-horizontal)}:host([label-fixed]) .select-wrapper{padding-top:var(--bl-size-m)}:host([label-fixed]) label{top:0;left:0;right:0;padding:0;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--label-color)}.help-text,.invalid-text{margin:var(--bl-size-3xs) 0 0 var(--bl-size-2xs);font:var(--bl-font-title-4-regular);padding:var(--bl-size-3xs) var(--bl-input-padding-horizontal)}.help-text{color:var(--bl-color-content-secondary)}.invalid-text{color:var(--bl-color-danger)}.select-open .help-text,.select-open .invalid-text{visibility:hidden}`;\nexport default styles;\n", "import { LitElement, html, CSSResultGroup, PropertyValues } from 'lit';\nimport { customElement, property, state, query, queryAll } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { computePosition, flip, MiddlewareArguments, offset, size, autoUpdate } from '@floating-ui/dom';\nimport style from '../select/bl-select.css';\nimport '../icon/bl-icon';\nimport '../select/option/bl-select-option';\nimport type BlSelectOption from './option/bl-select-option';\nimport { event, EventDispatcher } from '../../utilities/event';\n\nexport interface ISelectOption {\n  value: string;\n  text: string;\n  selected: boolean;\n}\n\nexport type SelectSize = 'medium' | 'large' | 'small';\n\nexport type CleanUpFunction = () => void;\n\n@customElement('bl-select')\nexport default class BlSelect extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /* Declare reactive properties */\n  /**\n   * Sets the label value\n   */\n  @property({})\n  label?: string;\n\n  /**\n   * Sets the placeholder value. If left blank, the label value (if specified) is set as placeholder.\n   */\n  @property({})\n  placeholder?: string;\n\n  /**\n   * Sets the size value. Select component's height value will be changed accordingly\n   */\n  @property({ type: String, reflect: true })\n  size: SelectSize = 'medium';\n\n  /**\n   * When option is not selected, shows component in error state\n   */\n  @property({ type: Boolean })\n  required = false;\n\n  /**\n   * Shows the component in disabled state.\n   */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * Allows multiple options to be selected\n   */\n  @property({ type: Boolean })\n  multiple = false;\n\n  /**\n   * Makes label as fixed positioned\n   */\n  @property({ type: Boolean, attribute: 'label-fixed' })\n  labelFixed = false;\n\n  /**\n   * Adds help text\n   */\n  @property({ type: String, attribute: 'help-text' })\n  helpText?: string;\n\n  /**\n   * Set custom error message\n   */\n  @property({ type: String, attribute: 'invalid-text' })\n  customInvalidText?: string;\n\n  /* Declare internal reactive properties */\n  @state()\n  private _isPopoverOpen = false;\n\n  @state()\n  private _selectedOptions: ISelectOption[] = [];\n\n  @state()\n  private _additionalSelectedOptionCount = 0;\n\n  @state()\n  private _isInvalid = false;\n\n  @query('.selected-options')\n  private _selectedOptionsContainer!: HTMLElement;\n\n  @queryAll('.selected-options li')\n  private _selectedOptionsItems!: Array<HTMLElement>;\n\n  @query('.popover')\n  private _popover: HTMLElement;\n\n  @query('.select-input')\n  private _selectInput: HTMLElement;\n\n  @event('bl-select') private _onBlSelect: EventDispatcher<ISelectOption[]>;\n\n  private _connectedOptions: BlSelectOption[] = [];\n\n  private _cleanUpPopover: CleanUpFunction | null = null;\n\n  get options() {\n    return this._connectedOptions;\n  }\n\n  get opened() {\n    return this._isPopoverOpen;\n  }\n\n  get selectedOptions() {\n    return this._selectedOptions;\n  }\n\n  get additionalSelectedOptionCount() {\n    return this._additionalSelectedOptionCount;\n  }\n\n  get isInvalid() {\n    return this._isInvalid;\n  }\n\n  open() {\n    this._isPopoverOpen = true;\n    this._setupPopover();\n    document.addEventListener('click', this._clickOutsideHandler);\n  }\n\n  close() {\n    this._isPopoverOpen = false;\n    this._cleanUpPopover && this._cleanUpPopover();\n    document.removeEventListener('click', this._clickOutsideHandler);\n  }\n\n  private _clickOutsideHandler = (event: MouseEvent) => {\n    const eventPath = event.composedPath() as HTMLElement[];\n\n    if (!eventPath?.find(el => el.tagName === 'BL-SELECT')?.contains(this)) {\n      this.close();\n      this._checkRequired();\n    }\n  };\n\n  private _setupPopover() {\n    this._cleanUpPopover = autoUpdate(this._selectInput, this._popover, () => {\n      computePosition(this._selectInput, this._popover, {\n        placement: 'bottom',\n        strategy: 'fixed',\n        middleware: [\n          flip(),\n          offset(8),\n          size({\n            apply(args: MiddlewareArguments) {\n              Object.assign(args.elements.floating.style, {\n                width: `${args.elements.reference.getBoundingClientRect().width}px`,\n              });\n            },\n          }),\n        ],\n      }).then(({ x, y }) => {\n        this._popover.style.setProperty('--left', `${x}px`);\n        this._popover.style.setProperty('--top', `${y}px`);\n      });\n    });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n  }\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this._cleanUpPopover && this._cleanUpPopover();\n  }\n\n  private inputTemplate() {\n    const inputSelectedOptions = html`<ul class=\"selected-options\">\n      ${this._selectedOptions.map(item => html`<li>${item.text}</li>`)}\n    </ul>`;\n    const _selectedItemCount = this._additionalSelectedOptionCount\n      ? html`<span>+${this._additionalSelectedOptionCount}</span>`\n      : null;\n    const removeButton = html`<bl-button\n        class=\"remove-all\"\n        size=\"small\"\n        variant=\"tertiary\"\n        kind=\"neutral\"\n        icon=\"close\"\n        @click=${this._onClickRemove}></bl-button>`;\n    const placeholder = this._showPlaceHolder\n      ? html`<span class=\"placeholder\">${this.placeholder}</span>`\n      : '';\n\n    return html`<div\n      class=\"select-input\"\n      ?disabled=${this.disabled}\n      @click=${this._onClickSelectInput}\n    >\n      ${placeholder} ${inputSelectedOptions} ${_selectedItemCount}\n      <div class=\"actions\">\n        ${this.multiple ? removeButton : null}\n        <bl-icon\n          class=\"dropdown-icon open\"\n          name=\"arrow_up\"\n        ></bl-icon>\n\n        <bl-icon\n          class=\"dropdown-icon closed\"\n          name=\"arrow_down\"\n        ></bl-icon>\n      </div>\n    </div>`;\n  }\n\n  private menuTemplate() {\n    return html`<div class=\"popover\" @bl-select-option=${this._handleSelectOptionEvent}>\n      <slot></slot>\n    </div>`;\n  }\n\n  render() {\n    const invalidMessage = this._isInvalid && this.customInvalidText\n      ? html`<p class=\"invalid-text\">${this.customInvalidText}</p>` : ``;\n    const helpMessage = this.helpText && !invalidMessage\n      ? html`<p class=\"help-text\">${this.helpText}</p>` : ``;\n    const label = this.label\n      ? html`<label>${this.label}</label>` : '';\n\n    return html`<div\n      class=${classMap({\n      'select-wrapper': true,\n      'select-open': this.opened,\n      'selected': this._selectedOptions.length > 0,\n      'invalid': this._isInvalid,\n    })}\n      tabindex=\"-1\"\n    >\n      ${label} ${this.inputTemplate()} ${this.menuTemplate()} ${helpMessage} ${invalidMessage}\n    </div> `;\n  }\n\n  private get _showPlaceHolder() {\n    if (this.label && !this.labelFixed) {\n      return !this._selectedOptions.length && this._isPopoverOpen;\n    }\n    return !this._selectedOptions.length;\n  }\n\n  private _onClickSelectInput() {\n    this._isPopoverOpen ? this.close() : this.open();\n  }\n\n  private _handleSelectEvent() {\n    this._onBlSelect(this._selectedOptions);\n  }\n\n  private _handleSingleSelect(optionItem: ISelectOption) {\n    const oldItem = this._connectedOptions.find(option => option.value !== optionItem.value && option.selected);\n\n    if (oldItem) {\n      oldItem.selected = false;\n    }\n\n    this._selectedOptions = [optionItem];\n    this._handleSelectEvent();\n    this._isPopoverOpen = false;\n  }\n\n  private _handleMultipleSelect(optionItem: ISelectOption) {\n    const { value } = optionItem;\n\n    if (!optionItem.selected) {\n      this._selectedOptions = this._selectedOptions.filter(item => item.value !== value);\n    } else {\n      this._selectedOptions = [...this._selectedOptions, optionItem];\n    }\n\n    this._handleSelectEvent();\n  }\n\n  private _handleSelectOptionEvent(e: CustomEvent) {\n    const optionItem = e.detail as ISelectOption;\n\n    if (this.multiple) {\n      this._handleMultipleSelect(optionItem);\n    } else {\n      this._handleSingleSelect(optionItem);\n    }\n  }\n\n  private _onClickRemove(e: MouseEvent) {\n    e.stopPropagation();\n\n    this._connectedOptions\n      .filter(option => option.selected)\n      .forEach(option => {\n        option.selected = false;\n      });\n\n    this._selectedOptions = [];\n    this._handleSelectEvent();\n  }\n\n  private _checkAdditionalItemCount() {\n    if (!this.multiple) return;\n\n    let visibleItems = 0;\n    for(const value of this._selectedOptionsItems) {\n      if (value.offsetLeft < this._selectedOptionsContainer.offsetWidth) {\n        visibleItems++;\n      } else {\n        break;\n      }\n    }\n\n    this._additionalSelectedOptionCount = this._selectedOptionsItems.length - visibleItems;\n  }\n\n  private _checkRequired() {\n    if (this.required) {\n      this._isInvalid = this._selectedOptions.length === 0;\n    }\n  }\n\n  protected updated(_changedProperties: PropertyValues) {\n    if (\n      _changedProperties.has('_selectedOptions') &&\n      _changedProperties.get('_selectedOptions') instanceof Array\n    ) {\n      this._checkRequired();\n      this._checkAdditionalItemCount();\n    } else if (\n      _changedProperties.has('multiple') &&\n      typeof _changedProperties.get('multiple') === 'boolean'\n    ) {\n      this._connectedOptions.forEach(option => {\n        option.multiple = this.multiple;\n        option.selected = false;\n      });\n      this._selectedOptions = [];\n    }\n  }\n\n  /**\n   * This method is used by `bl-select-option` component to register itself to bl-select.\n   * @param option BlSelectOption reference to be registered\n   */\n  registerOption(option: BlSelectOption) {\n    this._connectedOptions.push(option);\n\n    if (option.selected) {\n      const optionItem = {\n        value: option.value,\n        text: option.textContent,\n        selected: option.selected,\n      } as ISelectOption;\n\n      if (this.multiple) {\n        this._selectedOptions = [...this._selectedOptions, optionItem];\n      } else {\n        this._selectedOptions = [optionItem];\n      }\n\n      this.requestUpdate();\n    }\n  }\n\n  /**\n   * This method is used by `bl-select-option` component to unregister itself from bl-select.\n   * @param option BlSelectOption reference to be unregistered\n   */\n  unregisterOption(option: BlSelectOption) {\n    this._connectedOptions.splice(this._connectedOptions.indexOf(option), 1);\n    this._selectedOptions = this._selectedOptions.filter(item => item.value !== option.value);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-select': BlSelect;\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["styles", "r", "bl_select_default", "BlSelect", "s", "event", "_a", "eventPath", "el", "bl_select_default", "N", "z", "b", "T", "k", "args", "x", "y", "inputSelectedOptions", "$", "item", "_selectedItemCount", "removeButton", "placeholder", "invalidMessage", "helpMessage", "label", "o", "optionItem", "oldItem", "option", "value", "visibleItems", "_changedProperties", "__decorateClass", "e", "t", "i", "n"]
+}

package/dist/chunk-TVJJYVZH.js

@@ -0,0 +1,24 @@
+import{a as v}from"./chunk-KQBKSEYJ.js";import{a as d}from"./chunk-5VLVLBWY.js";import{a as f}from"./chunk-2TVOKUHE.js";import{a as l}from"./chunk-23UFIOHV.js";import{a as s,b as a,f as n,g as c,h as r,j as m}from"./chunk-HG7OBTQS.js";import{a as t}from"./chunk-NZ3RGSR6.js";var E=s`:host{display:inline-block;vertical-align:middle}:host *{outline:0}label{display:flex;gap:var(--bl-size-2xs);color:var(--bl-color-secondary);font:var(--bl-font-title-3);cursor:pointer;user-select:none}.label{word-break:break-all}input{appearance:none;position:absolute}.check-mark{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--bl-size-m);height:var(--bl-size-m);min-width:var(--bl-size-m);min-height:var(--bl-size-m);max-width:var(--bl-size-m);max-height:var(--bl-size-m);border:1px solid var(--bl-color-border);border-radius:var(--bl-border-radius-xs);color:var(--bl-color-content-primary-contrast);font-size:var(--bl-font-size-2xs);background-color:var(--bl-color-primary-background)}:host([checked]) .label,:host(:hover) .label,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .label{color:var(--bl-color-primary)}:host(:is([checked],[indeterminate])) .check-mark{background-color:var(--bl-color-primary);border:0}:host([disabled]){cursor:not-allowed;pointer-events:none}:host([disabled]) .check-mark,:host([disabled]) .label{color:var(--bl-color-content-passive)}:host([disabled]) .check-mark{background-color:var(--bl-color-secondary-background)}:host(:not([disabled])) input:focus-visible+.check-mark{box-shadow:0 0 0 1px white,0 0 0 3px var(--bl-color-primary)}`,g=E;var O=s`:host{display:flex;flex-direction:row}fieldset{border:0;padding:0}legend{font:var(--bl-font-title-3-medium);color:var(--bl-color-content-primary)}.options{display:flex;flex-flow:var(--bl-checkbox-direction,column) wrap;gap:var(--bl-size-m);margin-block:var(--bl-size-xs)}`,k=O;var p="bl-checkbox-group",u="bl-checkbox-group-change",o=class extends d(n){constructor(){super(...arguments);this.value=[];this.required=!1;this.focusedOptionIndex=0}static get styles(){return[k]}get options(){return[].slice.call(this.querySelectorAll(h))}get checkedOptions(){return this.options.filter(e=>e.checked).map(e=>e.value)}get availableOptions(){return this.options.filter(e=>!e.disabled)}connectedCallback(){super.connectedCallback(),this.tabIndex=0,this.addEventListener("focus",this.handleFocus),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focus",this.handleFocus),this.removeEventListener("keydown",this.handleKeyDown)}updated(e){e.has("value")&&(this.setValue(this.checkedOptions.join(",")),this.onChange(this.value))}handleOptionChecked(){this.value=this.checkedOptions}handleKeyDown(e){if(["ArrowDown","ArrowRight"].includes(e.key))this.focusedOptionIndex++;else if(["ArrowUp","ArrowLeft"].includes(e.key))this.focusedOptionIndex--;else if(e.key==="Tab"){if(e.shiftKey?this.focusedOptionIndex--:this.focusedOptionIndex++,this.focusedOptionIndex===this.availableOptions.length){this.tabIndex=0,this.focusedOptionIndex=0;return}}else return;this.focusedOptionIndex=Math.max(0,Math.min(this.focusedOptionIndex,this.availableOptions.length-1)),this.availableOptions[this.focusedOptionIndex].focus(),e.preventDefault()}handleFocus(){this.availableOptions[this.focusedOptionIndex].focus()}render(){return a`<fieldset role="group" aria-labelledby="label" aria-required=${this.required}>
+      <legend id="label">${this.label}</legend>
+      <div class="options" @bl-checkbox-change=${this.handleOptionChecked}>
+        <slot></slot>
+      </div>
+    </fieldset>`}};t([r({type:String})],o.prototype,"label",2),t([r({type:Array,reflect:!0})],o.prototype,"value",2),t([r({type:Boolean,reflect:!0})],o.prototype,"required",2),t([l("bl-checkbox-group-change")],o.prototype,"onChange",2),o=t([c(p)],o);var h="bl-checkbox",i=class extends d(n){constructor(){super(...arguments);this.checked=!1;this.required=!1;this.disabled=!1;this.indeterminate=!1;this.handleFieldValueChange=e=>{this.checked=e.detail.includes(this.value)}}static get styles(){return[g]}connectedCallback(){var e;super.connectedCallback(),this.field=this.closest(p),(e=this.field)==null||e.addEventListener(u,this.handleFieldValueChange)}disconnectedCallback(){var e;super.disconnectedCallback(),(e=this.field)==null||e.removeEventListener(u,this.handleFieldValueChange)}updated(e){e.has("checked")&&this.required&&this.checked&&this.setValue(this.value)}update(e){super.update(e),this.indeterminate&&this.checked&&(this.checked=!1,this.requestUpdate("checked",!0))}focus(){this.checkboxElement.tabIndex=0,this.checkboxElement.focus(),this.onFocus(this.value)}blur(){this.onBlur(this.value),this.field&&(this.checkboxElement.tabIndex=-1)}handleChange(e){let b=e.target;this.checked=b.checked,this.onChange(b.checked),this.indeterminate=!1}render(){let e="";return this.checked&&(e="check"),this.indeterminate&&(e="minus"),a`
+      <label>
+        <input
+          type="checkbox"
+          .checked=${v(this.checked)}
+          ?disabled=${this.disabled}
+          aria-required=${this.required}
+          aria-labelledby="label"
+          aria-readonly=${this.disabled}
+          .indeterminate=${this.indeterminate}
+          @change=${this.handleChange}
+          value=${f(this.value)}
+          @blur=${this.blur}
+        />
+        <div class="check-mark">${e?a`<bl-icon name="${e}"></bl-icon>`:null}</div>
+        <span class="label"><slot></slot></span>
+      </label>
+    `}};t([r({type:Boolean,reflect:!0})],i.prototype,"checked",2),t([r()],i.prototype,"value",2),t([r({type:Boolean,reflect:!0})],i.prototype,"required",2),t([r({type:Boolean,reflect:!0})],i.prototype,"disabled",2),t([r({type:Boolean,reflect:!0})],i.prototype,"indeterminate",2),t([l("bl-checkbox-change")],i.prototype,"onChange",2),t([l("bl-focus")],i.prototype,"onFocus",2),t([l("bl-blur")],i.prototype,"onBlur",2),t([m("[type=checkbox]")],i.prototype,"checkboxElement",2),i=t([c(h)],i);export{h as a,i as b,p as c,u as d,o as e};
+//# sourceMappingURL=chunk-TVJJYVZH.js.map

package/dist/chunk-TVJJYVZH.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/checkbox-group/checkbox/bl-checkbox.css", "../src/components/checkbox-group/bl-checkbox-group.css", "../src/components/checkbox-group/bl-checkbox-group.ts", "../src/components/checkbox-group/checkbox/bl-checkbox.ts"],
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;vertical-align:middle}:host *{outline:0}label{display:flex;gap:var(--bl-size-2xs);color:var(--bl-color-secondary);font:var(--bl-font-title-3);cursor:pointer;user-select:none}.label{word-break:break-all}input{appearance:none;position:absolute}.check-mark{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--bl-size-m);height:var(--bl-size-m);min-width:var(--bl-size-m);min-height:var(--bl-size-m);max-width:var(--bl-size-m);max-height:var(--bl-size-m);border:1px solid var(--bl-color-border);border-radius:var(--bl-border-radius-xs);color:var(--bl-color-content-primary-contrast);font-size:var(--bl-font-size-2xs);background-color:var(--bl-color-primary-background)}:host([checked]) .label,:host(:hover) .label,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .label{color:var(--bl-color-primary)}:host(:is([checked],[indeterminate])) .check-mark{background-color:var(--bl-color-primary);border:0}:host([disabled]){cursor:not-allowed;pointer-events:none}:host([disabled]) .check-mark,:host([disabled]) .label{color:var(--bl-color-content-passive)}:host([disabled]) .check-mark{background-color:var(--bl-color-secondary-background)}:host(:not([disabled])) input:focus-visible+.check-mark{box-shadow:0 0 0 1px white,0 0 0 3px var(--bl-color-primary)}`;\nexport default styles;\n", "import {css} from 'lit';\nexport const styles = css`:host{display:flex;flex-direction:row}fieldset{border:0;padding:0}legend{font:var(--bl-font-title-3-medium);color:var(--bl-color-content-primary)}.options{display:flex;flex-flow:var(--bl-checkbox-direction,column) wrap;gap:var(--bl-size-m);margin-block:var(--bl-size-xs)}`;\nexport default styles;\n", "import { FormControlMixin } from '@open-wc/form-control';\nimport { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport 'element-internals-polyfill';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport style from './bl-checkbox-group.css';\nimport BlCheckbox, { blCheckboxTag } from './checkbox/bl-checkbox';\n\nexport const blCheckboxGroupTag = 'bl-checkbox-group';\n\nexport const blChangeEventName = 'bl-checkbox-group-change';\n\n/**\n * @tag bl-checkbox-group\n * @summary Baklava Button component\n *\n * @cssproperty --bl-checkbox-direction - Can be used for showing checkbox options as columns instead of rows. Options are `row` or `column`\n */\n@customElement(blCheckboxGroupTag)\nexport default class BlCheckboxGroup extends FormControlMixin(LitElement) {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /**\n   * Sets the checkbox group label\n   */\n  @property({ type: String })\n  label: string;\n\n  /**\n   * Set and gets the actual value of the field\n   */\n  @property({ type: Array, reflect: true })\n  value: string[] = [];\n\n  /**\n   * Sets option as required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  get options(): BlCheckbox[] {\n    return [].slice.call(this.querySelectorAll(blCheckboxTag));\n  }\n\n  get checkedOptions(): string[] {\n    return this.options.filter(opt => opt.checked).map(opt => opt.value);\n  }\n\n  get availableOptions(): BlCheckbox[] {\n    return this.options.filter(option => !option.disabled);\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.tabIndex = 0;\n    this.addEventListener('focus', this.handleFocus);\n    this.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('focus', this.handleFocus);\n    this.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  updated(changedProperties: Map<string, unknown>): void {\n    if (changedProperties.has('value')) {\n      this.setValue(this.checkedOptions.join(','));\n      this.onChange(this.value);\n    }\n  }\n\n  /**\n   * Fires when checkbox group value changed\n   */\n  @event('bl-checkbox-group-change') private onChange: EventDispatcher<string[]>;\n\n  private focusedOptionIndex = 0;\n\n  private handleOptionChecked() {\n    this.value = this.checkedOptions;\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    // Next option\n    if (['ArrowDown', 'ArrowRight'].includes(event.key)) {\n      this.focusedOptionIndex++;\n\n      // Previous option\n    } else if (['ArrowUp', 'ArrowLeft'].includes(event.key)) {\n      this.focusedOptionIndex--;\n\n      // next or previous option with tab / hold shift & tab\n    } else if (event.key === 'Tab') {\n      event.shiftKey ? this.focusedOptionIndex-- : this.focusedOptionIndex++;\n\n      if (this.focusedOptionIndex === this.availableOptions.length) {\n        this.tabIndex = 0;\n        this.focusedOptionIndex = 0;\n        return;\n      }\n    } else {\n      // Other keys are not our interest here\n      return;\n    }\n\n    // Don't exceed array indexes\n    this.focusedOptionIndex = Math.max(\n      0,\n      Math.min(this.focusedOptionIndex, this.availableOptions.length - 1)\n    );\n\n    this.availableOptions[this.focusedOptionIndex].focus();\n\n    event.preventDefault();\n  }\n\n  private handleFocus() {\n    this.availableOptions[this.focusedOptionIndex].focus();\n  }\n\n  render(): TemplateResult {\n    return html`<fieldset role=\"group\" aria-labelledby=\"label\" aria-required=${this.required}>\n      <legend id=\"label\">${this.label}</legend>\n      <div class=\"options\" @bl-checkbox-change=${this.handleOptionChecked}>\n        <slot></slot>\n      </div>\n    </fieldset>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [blCheckboxGroupTag]: BlCheckboxGroup;\n  }\n  interface HTMLElementEventMap {\n    [blChangeEventName]: CustomEvent<string[]>;\n  }\n}\n", "import { FormControlMixin } from '@open-wc/form-control';\nimport { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { live } from 'lit/directives/live.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport 'element-internals-polyfill';\nimport { event, EventDispatcher } from '../../../utilities/event';\nimport '../../icon/bl-icon';\nimport type BlCheckboxGroup from '../bl-checkbox-group';\nimport style from './bl-checkbox.css';\nimport { blCheckboxGroupTag, blChangeEventName } from '../bl-checkbox-group';\n\nexport const blCheckboxTag = 'bl-checkbox';\n\n/**\n * @tag bl-checkbox\n * @summary Baklava Checkbox component\n */\n@customElement(blCheckboxTag)\nexport default class BlCheckbox extends FormControlMixin(LitElement) {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /**\n   * Sets the checked state for checkbox\n   */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /**\n   * Sets the checkbox value\n   */\n  @property()\n  value: string;\n\n  /**\n   * Sets checkbox as required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * Sets the disabled state for checkbox\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Sets the indeterminate state for checkbox\n   */\n  @property({ type: Boolean, reflect: true })\n  indeterminate = false;\n\n  /**\n   * Fires whenever user change the value of the checkbox.\n   */\n  @event('bl-checkbox-change') private onChange: EventDispatcher<boolean>;\n\n  /**\n   * Fires when checkbox is focused\n   */\n  @event('bl-focus') private onFocus: EventDispatcher<string>;\n\n  /**\n   * Fires when checkbox is blurred\n   */\n  @event('bl-blur') private onBlur: EventDispatcher<string>;\n\n  @query('[type=checkbox]') checkboxElement: HTMLElement;\n\n  protected field: BlCheckboxGroup | null;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.field = this.closest<BlCheckboxGroup>(blCheckboxGroupTag);\n    this.field?.addEventListener(blChangeEventName, this.handleFieldValueChange);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.field?.removeEventListener(blChangeEventName, this.handleFieldValueChange);\n  }\n\n  updated(changedProperties: Map<string, unknown>): void {\n    if (changedProperties.has('checked') && this.required && this.checked) {\n      this.setValue(this.value);\n    }\n  }\n\n  update(changedProperties: Map<string, unknown>) {\n    super.update(changedProperties);\n    if (this.indeterminate && this.checked) {\n      this.checked = false;\n      this.requestUpdate('checked', true);\n    }\n  }\n\n  /**\n   * Focuses this option\n   */\n  focus() {\n    this.checkboxElement.tabIndex = 0;\n    this.checkboxElement.focus();\n    this.onFocus(this.value);\n  }\n\n  /**\n   * Blurs from this option\n   */\n  blur() {\n    this.onBlur(this.value);\n    if (!this.field) return;\n    this.checkboxElement.tabIndex = -1;\n  }\n\n  private handleChange(event: CustomEvent) {\n    const target = event.target as HTMLInputElement;\n    this.checked = target.checked;\n    this.onChange(target.checked);\n    this.indeterminate = false;\n  }\n\n  private handleFieldValueChange = (event: CustomEvent<Array<string>>) => {\n    this.checked = event.detail.includes(this.value);\n  };\n\n  render(): TemplateResult {\n    let icon = '';\n    if (this.checked) icon = 'check';\n    if (this.indeterminate) icon = 'minus';\n\n    return html`\n      <label>\n        <input\n          type=\"checkbox\"\n          .checked=${live(this.checked)}\n          ?disabled=${this.disabled}\n          aria-required=${this.required}\n          aria-labelledby=\"label\"\n          aria-readonly=${this.disabled}\n          .indeterminate=${this.indeterminate}\n          @change=${this.handleChange}\n          value=${ifDefined(this.value)}\n          @blur=${this.blur}\n        />\n        <div class=\"check-mark\">${icon ? html`<bl-icon name=\"${icon}\"></bl-icon>` : null}</div>\n        <span class=\"label\"><slot></slot></span>\n      </label>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [blCheckboxTag]: BlCheckbox;\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["styles", "r", "bl_checkbox_default", "styles", "r", "bl_checkbox_group_default", "blCheckboxGroupTag", "blChangeEventName", "BlCheckboxGroup", "FormControlMixin", "s", "bl_checkbox_group_default", "blCheckboxTag", "opt", "option", "changedProperties", "event", "$", "__decorateClass", "e", "n", "blCheckboxTag", "BlCheckbox", "FormControlMixin", "s", "event", "bl_checkbox_default", "_a", "blCheckboxGroupTag", "blChangeEventName", "changedProperties", "target", "icon", "$", "l", "__decorateClass", "e", "i", "n"]
+}

package/dist/components/checkbox-group/bl-checkbox-group.js

@@ -1,2 +1,2 @@
-import{c as a,d as b,e as c}from"../../chunk-FEQIC2KZ.js";import"../../chunk-KQBKSEYJ.js";import"../../chunk-5VLVLBWY.js";import"../../chunk-2TVOKUHE.js";import"../../chunk-WXJKPVRA.js";import"../../chunk-72IJCTLJ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-HG7OBTQS.js";import"../../chunk-NZ3RGSR6.js";export{b as blChangeEventName,a as blCheckboxGroupTag,c as default};
+import{c as a,d as b,e as c}from"../../chunk-TVJJYVZH.js";import"../../chunk-KQBKSEYJ.js";import"../../chunk-5VLVLBWY.js";import"../../chunk-2TVOKUHE.js";import"../../chunk-WXJKPVRA.js";import"../../chunk-72IJCTLJ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-HG7OBTQS.js";import"../../chunk-NZ3RGSR6.js";export{b as blChangeEventName,a as blCheckboxGroupTag,c as default};
 //# sourceMappingURL=bl-checkbox-group.js.map

package/dist/components/checkbox-group/checkbox/bl-checkbox.js

@@ -1,2 +1,2 @@
-import{a,b}from"../../../chunk-FEQIC2KZ.js";import"../../../chunk-KQBKSEYJ.js";import"../../../chunk-5VLVLBWY.js";import"../../../chunk-2TVOKUHE.js";import"../../../chunk-WXJKPVRA.js";import"../../../chunk-72IJCTLJ.js";import"../../../chunk-23UFIOHV.js";import"../../../chunk-HG7OBTQS.js";import"../../../chunk-NZ3RGSR6.js";export{a as blCheckboxTag,b as default};
+import{a,b}from"../../../chunk-TVJJYVZH.js";import"../../../chunk-KQBKSEYJ.js";import"../../../chunk-5VLVLBWY.js";import"../../../chunk-2TVOKUHE.js";import"../../../chunk-WXJKPVRA.js";import"../../../chunk-72IJCTLJ.js";import"../../../chunk-23UFIOHV.js";import"../../../chunk-HG7OBTQS.js";import"../../../chunk-NZ3RGSR6.js";export{a as blCheckboxTag,b as default};
 //# sourceMappingURL=bl-checkbox.js.map

package/dist/components/pagination/bl-pagination.js

@@ -1,2 +1,2 @@
-import{a}from"../../chunk-JHOV25H6.js";import"../../chunk-YFAHSZVL.js";import"../../chunk-KAHH46F6.js";import"../../chunk-KWTSWXUL.js";import"../../chunk-KWAF5LTC.js";import"../../chunk-KQBKSEYJ.js";import"../../chunk-5VLVLBWY.js";import"../../chunk-EADA5CG6.js";import"../../chunk-ENFFFE4I.js";import"../../chunk-2TVOKUHE.js";import"../../chunk-WXJKPVRA.js";import"../../chunk-72IJCTLJ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-HG7OBTQS.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
+import{a}from"../../chunk-JHOV25H6.js";import"../../chunk-YFAHSZVL.js";import"../../chunk-6BJAHDFH.js";import"../../chunk-KWTSWXUL.js";import"../../chunk-KWAF5LTC.js";import"../../chunk-KQBKSEYJ.js";import"../../chunk-5VLVLBWY.js";import"../../chunk-EADA5CG6.js";import"../../chunk-ENFFFE4I.js";import"../../chunk-2TVOKUHE.js";import"../../chunk-WXJKPVRA.js";import"../../chunk-72IJCTLJ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-HG7OBTQS.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
 //# sourceMappingURL=bl-pagination.js.map

package/dist/components/select/bl-select.js

@@ -1,2 +1,2 @@
-import{a}from"../../chunk-KAHH46F6.js";import"../../chunk-KWTSWXUL.js";import"../../chunk-KWAF5LTC.js";import"../../chunk-ENFFFE4I.js";import"../../chunk-WXJKPVRA.js";import"../../chunk-72IJCTLJ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-HG7OBTQS.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
+import{a}from"../../chunk-6BJAHDFH.js";import"../../chunk-KWTSWXUL.js";import"../../chunk-KWAF5LTC.js";import"../../chunk-ENFFFE4I.js";import"../../chunk-WXJKPVRA.js";import"../../chunk-72IJCTLJ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-HG7OBTQS.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
 //# sourceMappingURL=bl-select.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trendyol/baklava",
-  "version": "2.0.0-beta.56",
+  "version": "2.0.0-beta.57",
   "description": "Trendyol Baklava Design System",
   "main": "dist/baklava.js",
   "module": "dist/baklava.js",

package/dist/chunk-FEQIC2KZ.js

@@ -1,24 +0,0 @@
-import{a as v}from"./chunk-KQBKSEYJ.js";import{a as d}from"./chunk-5VLVLBWY.js";import{a as f}from"./chunk-2TVOKUHE.js";import{a as l}from"./chunk-23UFIOHV.js";import{a,b as s,f as n,g as c,h as o,j as m}from"./chunk-HG7OBTQS.js";import{a as t}from"./chunk-NZ3RGSR6.js";var E=a`:host{display:inline-block;vertical-align:middle}:host *{outline:0}label{display:flex;align-items:center;gap:var(--bl-size-2xs);color:var(--bl-color-secondary);font:var(--bl-font-title-3);cursor:pointer;user-select:none}input{appearance:none;position:absolute}.check-mark{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--bl-size-m);height:var(--bl-size-m);border:1px solid var(--bl-color-border);border-radius:var(--bl-border-radius-xs);color:var(--bl-color-content-primary-contrast);font-size:var(--bl-font-size-2xs)}:host([checked]) .label,:host(:hover) .label,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .label{color:var(--bl-color-primary)}:host(:is([checked],[indeterminate])) .check-mark{background-color:var(--bl-color-primary);border:0}:host([disabled]){cursor:not-allowed;pointer-events:none}:host([disabled]) .check-mark,:host([disabled]) .label{color:var(--bl-color-content-passive)}:host([disabled]) .check-mark{background-color:var(--bl-color-secondary-background)}:host(:not([disabled])) input:focus-visible+.check-mark{box-shadow:0 0 0 1px white,0 0 0 3px var(--bl-color-primary)}`,g=E;var O=a`:host{display:flex;flex-direction:row}fieldset{border:0;padding:0}legend{font:var(--bl-font-title-3-medium);color:var(--bl-color-content-primary)}.options{display:flex;flex-flow:var(--bl-checkbox-direction,column) wrap;gap:var(--bl-size-m);margin-block:var(--bl-size-xs)}`,k=O;var p="bl-checkbox-group",u="bl-checkbox-group-change",r=class extends d(n){constructor(){super(...arguments);this.value=[];this.required=!1;this.focusedOptionIndex=0}static get styles(){return[k]}get options(){return[].slice.call(this.querySelectorAll(h))}get checkedOptions(){return this.options.filter(e=>e.checked).map(e=>e.value)}get availableOptions(){return this.options.filter(e=>!e.disabled)}connectedCallback(){super.connectedCallback(),this.tabIndex=0,this.addEventListener("focus",this.handleFocus),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focus",this.handleFocus),this.removeEventListener("keydown",this.handleKeyDown)}updated(e){e.has("value")&&(this.setValue(this.checkedOptions.join(",")),this.onChange(this.value))}handleOptionChecked(){this.value=this.checkedOptions}handleKeyDown(e){if(["ArrowDown","ArrowRight"].includes(e.key))this.focusedOptionIndex++;else if(["ArrowUp","ArrowLeft"].includes(e.key))this.focusedOptionIndex--;else if(e.key==="Tab"){if(e.shiftKey?this.focusedOptionIndex--:this.focusedOptionIndex++,this.focusedOptionIndex===this.availableOptions.length){this.tabIndex=0,this.focusedOptionIndex=0;return}}else return;this.focusedOptionIndex=Math.max(0,Math.min(this.focusedOptionIndex,this.availableOptions.length-1)),this.availableOptions[this.focusedOptionIndex].focus(),e.preventDefault()}handleFocus(){this.availableOptions[this.focusedOptionIndex].focus()}render(){return s`<fieldset role="group" aria-labelledby="label" aria-required=${this.required}>
-      <legend id="label">${this.label}</legend>
-      <div class="options" @bl-checkbox-change=${this.handleOptionChecked}>
-        <slot></slot>
-      </div>
-    </fieldset>`}};t([o({type:String})],r.prototype,"label",2),t([o({type:Array,reflect:!0})],r.prototype,"value",2),t([o({type:Boolean,reflect:!0})],r.prototype,"required",2),t([l("bl-checkbox-group-change")],r.prototype,"onChange",2),r=t([c(p)],r);var h="bl-checkbox",i=class extends d(n){constructor(){super(...arguments);this.checked=!1;this.required=!1;this.disabled=!1;this.indeterminate=!1;this.handleFieldValueChange=e=>{this.checked=e.detail.includes(this.value)}}static get styles(){return[g]}connectedCallback(){var e;super.connectedCallback(),this.field=this.closest(p),(e=this.field)==null||e.addEventListener(u,this.handleFieldValueChange)}disconnectedCallback(){var e;super.disconnectedCallback(),(e=this.field)==null||e.removeEventListener(u,this.handleFieldValueChange)}updated(e){e.has("checked")&&this.required&&this.checked&&this.setValue(this.value)}update(e){super.update(e),this.indeterminate&&this.checked&&(this.checked=!1,this.requestUpdate("checked",!0))}focus(){this.checkboxElement.tabIndex=0,this.checkboxElement.focus(),this.onFocus(this.value)}blur(){this.onBlur(this.value),this.field&&(this.checkboxElement.tabIndex=-1)}handleChange(e){let b=e.target;this.checked=b.checked,this.onChange(b.checked),this.indeterminate=!1}render(){let e="";return this.checked&&(e="check"),this.indeterminate&&(e="minus"),s`
-      <label>
-        <input
-          type="checkbox"
-          .checked=${v(this.checked)}
-          ?disabled=${this.disabled}
-          aria-required=${this.required}
-          aria-labelledby="label"
-          aria-readonly=${this.disabled}
-          .indeterminate=${this.indeterminate}
-          @change=${this.handleChange}
-          value=${f(this.value)}
-          @blur=${this.blur}
-        />
-        <div class="check-mark">${e?s`<bl-icon name="${e}"></bl-icon>`:null}</div>
-        <span class="label"><slot></slot></span>
-      </label>
-    `}};t([o({type:Boolean,reflect:!0})],i.prototype,"checked",2),t([o()],i.prototype,"value",2),t([o({type:Boolean,reflect:!0})],i.prototype,"required",2),t([o({type:Boolean,reflect:!0})],i.prototype,"disabled",2),t([o({type:Boolean,reflect:!0})],i.prototype,"indeterminate",2),t([l("bl-checkbox-change")],i.prototype,"onChange",2),t([l("bl-focus")],i.prototype,"onFocus",2),t([l("bl-blur")],i.prototype,"onBlur",2),t([m("[type=checkbox]")],i.prototype,"checkboxElement",2),i=t([c(h)],i);export{h as a,i as b,p as c,u as d,r as e};
-//# sourceMappingURL=chunk-FEQIC2KZ.js.map

package/dist/chunk-FEQIC2KZ.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/components/checkbox-group/checkbox/bl-checkbox.css", "../src/components/checkbox-group/bl-checkbox-group.css", "../src/components/checkbox-group/bl-checkbox-group.ts", "../src/components/checkbox-group/checkbox/bl-checkbox.ts"],
-  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;vertical-align:middle}:host *{outline:0}label{display:flex;align-items:center;gap:var(--bl-size-2xs);color:var(--bl-color-secondary);font:var(--bl-font-title-3);cursor:pointer;user-select:none}input{appearance:none;position:absolute}.check-mark{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--bl-size-m);height:var(--bl-size-m);border:1px solid var(--bl-color-border);border-radius:var(--bl-border-radius-xs);color:var(--bl-color-content-primary-contrast);font-size:var(--bl-font-size-2xs)}:host([checked]) .label,:host(:hover) .label,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .label{color:var(--bl-color-primary)}:host(:is([checked],[indeterminate])) .check-mark{background-color:var(--bl-color-primary);border:0}:host([disabled]){cursor:not-allowed;pointer-events:none}:host([disabled]) .check-mark,:host([disabled]) .label{color:var(--bl-color-content-passive)}:host([disabled]) .check-mark{background-color:var(--bl-color-secondary-background)}:host(:not([disabled])) input:focus-visible+.check-mark{box-shadow:0 0 0 1px white,0 0 0 3px var(--bl-color-primary)}`;\nexport default styles;\n", "import {css} from 'lit';\nexport const styles = css`:host{display:flex;flex-direction:row}fieldset{border:0;padding:0}legend{font:var(--bl-font-title-3-medium);color:var(--bl-color-content-primary)}.options{display:flex;flex-flow:var(--bl-checkbox-direction,column) wrap;gap:var(--bl-size-m);margin-block:var(--bl-size-xs)}`;\nexport default styles;\n", "import { FormControlMixin } from '@open-wc/form-control';\nimport { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport 'element-internals-polyfill';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport style from './bl-checkbox-group.css';\nimport BlCheckbox, { blCheckboxTag } from './checkbox/bl-checkbox';\n\nexport const blCheckboxGroupTag = 'bl-checkbox-group';\n\nexport const blChangeEventName = 'bl-checkbox-group-change';\n\n/**\n * @tag bl-checkbox-group\n * @summary Baklava Button component\n *\n * @cssproperty --bl-checkbox-direction - Can be used for showing checkbox options as columns instead of rows. Options are `row` or `column`\n */\n@customElement(blCheckboxGroupTag)\nexport default class BlCheckboxGroup extends FormControlMixin(LitElement) {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /**\n   * Sets the checkbox group label\n   */\n  @property({ type: String })\n  label: string;\n\n  /**\n   * Set and gets the actual value of the field\n   */\n  @property({ type: Array, reflect: true })\n  value: string[] = [];\n\n  /**\n   * Sets option as required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  get options(): BlCheckbox[] {\n    return [].slice.call(this.querySelectorAll(blCheckboxTag));\n  }\n\n  get checkedOptions(): string[] {\n    return this.options.filter(opt => opt.checked).map(opt => opt.value);\n  }\n\n  get availableOptions(): BlCheckbox[] {\n    return this.options.filter(option => !option.disabled);\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.tabIndex = 0;\n    this.addEventListener('focus', this.handleFocus);\n    this.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('focus', this.handleFocus);\n    this.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  updated(changedProperties: Map<string, unknown>): void {\n    if (changedProperties.has('value')) {\n      this.setValue(this.checkedOptions.join(','));\n      this.onChange(this.value);\n    }\n  }\n\n  /**\n   * Fires when checkbox group value changed\n   */\n  @event('bl-checkbox-group-change') private onChange: EventDispatcher<string[]>;\n\n  private focusedOptionIndex = 0;\n\n  private handleOptionChecked() {\n    this.value = this.checkedOptions;\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    // Next option\n    if (['ArrowDown', 'ArrowRight'].includes(event.key)) {\n      this.focusedOptionIndex++;\n\n      // Previous option\n    } else if (['ArrowUp', 'ArrowLeft'].includes(event.key)) {\n      this.focusedOptionIndex--;\n\n      // next or previous option with tab / hold shift & tab\n    } else if (event.key === 'Tab') {\n      event.shiftKey ? this.focusedOptionIndex-- : this.focusedOptionIndex++;\n\n      if (this.focusedOptionIndex === this.availableOptions.length) {\n        this.tabIndex = 0;\n        this.focusedOptionIndex = 0;\n        return;\n      }\n    } else {\n      // Other keys are not our interest here\n      return;\n    }\n\n    // Don't exceed array indexes\n    this.focusedOptionIndex = Math.max(\n      0,\n      Math.min(this.focusedOptionIndex, this.availableOptions.length - 1)\n    );\n\n    this.availableOptions[this.focusedOptionIndex].focus();\n\n    event.preventDefault();\n  }\n\n  private handleFocus() {\n    this.availableOptions[this.focusedOptionIndex].focus();\n  }\n\n  render(): TemplateResult {\n    return html`<fieldset role=\"group\" aria-labelledby=\"label\" aria-required=${this.required}>\n      <legend id=\"label\">${this.label}</legend>\n      <div class=\"options\" @bl-checkbox-change=${this.handleOptionChecked}>\n        <slot></slot>\n      </div>\n    </fieldset>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [blCheckboxGroupTag]: BlCheckboxGroup;\n  }\n  interface HTMLElementEventMap {\n    [blChangeEventName]: CustomEvent<string[]>;\n  }\n}\n", "import { FormControlMixin } from '@open-wc/form-control';\nimport { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { live } from 'lit/directives/live.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport 'element-internals-polyfill';\nimport { event, EventDispatcher } from '../../../utilities/event';\nimport '../../icon/bl-icon';\nimport type BlCheckboxGroup from '../bl-checkbox-group';\nimport style from './bl-checkbox.css';\nimport { blCheckboxGroupTag, blChangeEventName } from '../bl-checkbox-group';\n\nexport const blCheckboxTag = 'bl-checkbox';\n\n/**\n * @tag bl-checkbox\n * @summary Baklava Checkbox component\n */\n@customElement(blCheckboxTag)\nexport default class BlCheckbox extends FormControlMixin(LitElement) {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /**\n   * Sets the checked state for checkbox\n   */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /**\n   * Sets the checkbox value\n   */\n  @property()\n  value: string;\n\n  /**\n   * Sets checkbox as required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * Sets the disabled state for checkbox\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Sets the indeterminate state for checkbox\n   */\n  @property({ type: Boolean, reflect: true })\n  indeterminate = false;\n\n  /**\n   * Fires whenever user change the value of the checkbox.\n   */\n  @event('bl-checkbox-change') private onChange: EventDispatcher<boolean>;\n\n  /**\n   * Fires when checkbox is focused\n   */\n  @event('bl-focus') private onFocus: EventDispatcher<string>;\n\n  /**\n   * Fires when checkbox is blurred\n   */\n  @event('bl-blur') private onBlur: EventDispatcher<string>;\n\n  @query('[type=checkbox]') checkboxElement: HTMLElement;\n\n  protected field: BlCheckboxGroup | null;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.field = this.closest<BlCheckboxGroup>(blCheckboxGroupTag);\n    this.field?.addEventListener(blChangeEventName, this.handleFieldValueChange);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.field?.removeEventListener(blChangeEventName, this.handleFieldValueChange);\n  }\n\n  updated(changedProperties: Map<string, unknown>): void {\n    if (changedProperties.has('checked') && this.required && this.checked) {\n      this.setValue(this.value);\n    }\n  }\n\n  update(changedProperties: Map<string, unknown>) {\n    super.update(changedProperties);\n    if (this.indeterminate && this.checked) {\n      this.checked = false;\n      this.requestUpdate('checked', true);\n    }\n  }\n\n  /**\n   * Focuses this option\n   */\n  focus() {\n    this.checkboxElement.tabIndex = 0;\n    this.checkboxElement.focus();\n    this.onFocus(this.value);\n  }\n\n  /**\n   * Blurs from this option\n   */\n  blur() {\n    this.onBlur(this.value);\n    if (!this.field) return;\n    this.checkboxElement.tabIndex = -1;\n  }\n\n  private handleChange(event: CustomEvent) {\n    const target = event.target as HTMLInputElement;\n    this.checked = target.checked;\n    this.onChange(target.checked);\n    this.indeterminate = false;\n  }\n\n  private handleFieldValueChange = (event: CustomEvent<Array<string>>) => {\n    this.checked = event.detail.includes(this.value);\n  };\n\n  render(): TemplateResult {\n    let icon = '';\n    if (this.checked) icon = 'check';\n    if (this.indeterminate) icon = 'minus';\n\n    return html`\n      <label>\n        <input\n          type=\"checkbox\"\n          .checked=${live(this.checked)}\n          ?disabled=${this.disabled}\n          aria-required=${this.required}\n          aria-labelledby=\"label\"\n          aria-readonly=${this.disabled}\n          .indeterminate=${this.indeterminate}\n          @change=${this.handleChange}\n          value=${ifDefined(this.value)}\n          @blur=${this.blur}\n        />\n        <div class=\"check-mark\">${icon ? html`<bl-icon name=\"${icon}\"></bl-icon>` : null}</div>\n        <span class=\"label\"><slot></slot></span>\n      </label>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [blCheckboxTag]: BlCheckbox;\n  }\n}\n"],
-  "mappings": "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",
-  "names": ["styles", "r", "bl_checkbox_default", "styles", "r", "bl_checkbox_group_default", "blCheckboxGroupTag", "blChangeEventName", "BlCheckboxGroup", "FormControlMixin", "s", "bl_checkbox_group_default", "blCheckboxTag", "opt", "option", "changedProperties", "event", "$", "__decorateClass", "e", "n", "blCheckboxTag", "BlCheckbox", "FormControlMixin", "s", "event", "bl_checkbox_default", "_a", "blCheckboxGroupTag", "blChangeEventName", "changedProperties", "target", "icon", "$", "l", "__decorateClass", "e", "i", "n"]
-}

package/dist/chunk-KAHH46F6.js

@@ -1,35 +0,0 @@
-import{b as f,c as m,e as _,g,h as x}from"./chunk-KWAF5LTC.js";import{a as b}from"./chunk-ENFFFE4I.js";import{a as u}from"./chunk-23UFIOHV.js";import{a as c,b as i,f as d,g as v,h as n,i as r,j as a,k as h}from"./chunk-HG7OBTQS.js";import{a as l}from"./chunk-NZ3RGSR6.js";var z=c`:host{width:200px;display:inline-block}.select-wrapper{width:100%;position:relative;--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-xs);--background-color:#fff;--border-color:var(--bl-color-border);--border-focus-color:var(--bl-color-primary-hover);--icon-color:var(--bl-color-content-tertiary);--text-color:var(--bl-color-content-primary);--label-color:var(--bl-color-content-secondary);--placeholder-color:var(--bl-color-content-tertiary);--height:var(--bl-size-2xl);--menu-padding:0 var(--bl-size-m);--menu-margin-top:var(--bl-size-2xs);--font-size:var(--bl-font-size-m);--disabled-color:var(--bl-color-tertiary);--z-index:1;--menu-height:250px}:host([size='large']) .select-wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m)}:host([size='small']) .select-wrapper{--height:var(--bl-size-xl);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-xs);--font-size:var(--bl-font-size-s)}.placeholder{color:var(--placeholder-color)}:host([disabled]) .placeholder{--placeholder-color:var(--bl-color-content-passive)}.invalid{--border-color:var(--bl-color-danger);--border-focus-color:var(--bl-color-danger-hover);--label-color:var(--bl-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(--bl-font-title-3-regular);padding:0 var(--padding-horizontal);border-radius:var(--bl-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(--bl-color-border)}.selected .remove-all{display:block}:host([disabled]) .remove-all,:host([disabled]) .remove-all::after{display:none}.dropdown-icon{font-size:var(--bl-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(--bl-color-secondary)}:host([disabled]) .dropdown-icon{--icon-color:var(--bl-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(--bl-color-content-passive)}.select-input .actions{display:flex;align-items:center;justify-content:center;gap:var(--bl-size-2xs);margin-left:var(--bl-size-2xs)}.popover{--left:0;--top:0;position:fixed;border:solid 1px var(--border-color);background-color:var(--background-color);font:var(--bl-font-title-3-regular);border-radius:var(--bl-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)}bl-icon{color:var(--icon-color)}label{position:absolute;display:flex;align-items:center;top:var(--padding-vertical);left:var(--padding-horizontal);transition:all ease-in .2s;pointer-events:none;font:var(--bl-font-title-3-regular);font-size:var(--font-size);color:var(--placeholder-color);padding:0}:where(.select-open,.selected) label{top:0;left:var(--bl-size-2xs);transform:translateY(-50%);font:var(--bl-font-caption);color:var(--label-color);padding:0 var(--bl-size-3xs);background-color:var(--bl-color-primary-background);pointer-events:initial}:host([label-fixed]) .select-wrapper{padding-top:var(--bl-size-m)}:host([label-fixed]) label{top:0;left:0;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--label-color);padding:0}.help-text,.invalid-text{margin:var(--bl-size-3xs) 0 0 var(--bl-size-2xs);font:var(--bl-font-title-4-regular);padding:var(--bl-size-3xs) var(--bl-input-padding-horizontal)}.help-text{color:var(--bl-color-content-secondary)}.invalid-text{color:var(--bl-color-danger)}.select-open .help-text,.select-open .invalid-text{visibility:hidden}`,O=z;var o=class extends d{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==="BL-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=g(this._selectInput,this._popover,()=>{x(this._selectInput,this._popover,{placement:"bottom",strategy:"fixed",middleware:[f(),m(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=i`<ul class="selected-options">
-      ${this._selectedOptions.map(y=>i`<li>${y.text}</li>`)}
-    </ul>`,t=this._additionalSelectedOptionCount?i`<span>+${this._additionalSelectedOptionCount}</span>`:null,s=i`<bl-button
-        class="remove-all"
-        size="small"
-        variant="tertiary"
-        kind="neutral"
-        icon="close"
-        @click=${this._onClickRemove}></bl-button>`,p=this._showPlaceHolder?i`<span class="placeholder">${this.placeholder}</span>`:"";return i`<div
-      class="select-input"
-      ?disabled=${this.disabled}
-      @click=${this._onClickSelectInput}
-    >
-      ${p} ${e} ${t}
-      <div class="actions">
-        ${this.multiple?s:null}
-        <bl-icon
-          class="dropdown-icon open"
-          name="arrow_up"
-        ></bl-icon>
-
-        <bl-icon
-          class="dropdown-icon closed"
-          name="arrow_down"
-        ></bl-icon>
-      </div>
-    </div>`}menuTemplate(){return i`<div class="popover" @bl-select-option=${this._handleSelectOptionEvent}>
-      <slot></slot>
-    </div>`}render(){let e=this._isInvalid&&this.customInvalidText?i`<p class="invalid-text">${this.customInvalidText}</p>`:"",t=this.helpText&&!e?i`<p class="help-text">${this.helpText}</p>`:"",s=this.label?i`<label>${this.label}</label>`:"";return i`<div
-      class=${b({"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._onBlSelect(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)}};l([n({})],o.prototype,"label",2),l([n({})],o.prototype,"placeholder",2),l([n({type:String,reflect:!0})],o.prototype,"size",2),l([n({type:Boolean})],o.prototype,"required",2),l([n({type:Boolean})],o.prototype,"disabled",2),l([n({type:Boolean})],o.prototype,"multiple",2),l([n({type:Boolean,attribute:"label-fixed"})],o.prototype,"labelFixed",2),l([n({type:String,attribute:"help-text"})],o.prototype,"helpText",2),l([n({type:String,attribute:"invalid-text"})],o.prototype,"customInvalidText",2),l([r()],o.prototype,"_isPopoverOpen",2),l([r()],o.prototype,"_selectedOptions",2),l([r()],o.prototype,"_additionalSelectedOptionCount",2),l([r()],o.prototype,"_isInvalid",2),l([a(".selected-options")],o.prototype,"_selectedOptionsContainer",2),l([h(".selected-options li")],o.prototype,"_selectedOptionsItems",2),l([a(".popover")],o.prototype,"_popover",2),l([a(".select-input")],o.prototype,"_selectInput",2),l([u("bl-select")],o.prototype,"_onBlSelect",2),o=l([v("bl-select")],o);export{o as a};
-//# sourceMappingURL=chunk-KAHH46F6.js.map

package/dist/chunk-KAHH46F6.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/components/select/bl-select.css", "../src/components/select/bl-select.ts"],
-  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{width:200px;display:inline-block}.select-wrapper{width:100%;position:relative;--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-xs);--background-color:#fff;--border-color:var(--bl-color-border);--border-focus-color:var(--bl-color-primary-hover);--icon-color:var(--bl-color-content-tertiary);--text-color:var(--bl-color-content-primary);--label-color:var(--bl-color-content-secondary);--placeholder-color:var(--bl-color-content-tertiary);--height:var(--bl-size-2xl);--menu-padding:0 var(--bl-size-m);--menu-margin-top:var(--bl-size-2xs);--font-size:var(--bl-font-size-m);--disabled-color:var(--bl-color-tertiary);--z-index:1;--menu-height:250px}:host([size='large']) .select-wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m)}:host([size='small']) .select-wrapper{--height:var(--bl-size-xl);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-xs);--font-size:var(--bl-font-size-s)}.placeholder{color:var(--placeholder-color)}:host([disabled]) .placeholder{--placeholder-color:var(--bl-color-content-passive)}.invalid{--border-color:var(--bl-color-danger);--border-focus-color:var(--bl-color-danger-hover);--label-color:var(--bl-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(--bl-font-title-3-regular);padding:0 var(--padding-horizontal);border-radius:var(--bl-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(--bl-color-border)}.selected .remove-all{display:block}:host([disabled]) .remove-all,:host([disabled]) .remove-all::after{display:none}.dropdown-icon{font-size:var(--bl-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(--bl-color-secondary)}:host([disabled]) .dropdown-icon{--icon-color:var(--bl-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(--bl-color-content-passive)}.select-input .actions{display:flex;align-items:center;justify-content:center;gap:var(--bl-size-2xs);margin-left:var(--bl-size-2xs)}.popover{--left:0;--top:0;position:fixed;border:solid 1px var(--border-color);background-color:var(--background-color);font:var(--bl-font-title-3-regular);border-radius:var(--bl-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)}bl-icon{color:var(--icon-color)}label{position:absolute;display:flex;align-items:center;top:var(--padding-vertical);left:var(--padding-horizontal);transition:all ease-in .2s;pointer-events:none;font:var(--bl-font-title-3-regular);font-size:var(--font-size);color:var(--placeholder-color);padding:0}:where(.select-open,.selected) label{top:0;left:var(--bl-size-2xs);transform:translateY(-50%);font:var(--bl-font-caption);color:var(--label-color);padding:0 var(--bl-size-3xs);background-color:var(--bl-color-primary-background);pointer-events:initial}:host([label-fixed]) .select-wrapper{padding-top:var(--bl-size-m)}:host([label-fixed]) label{top:0;left:0;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--label-color);padding:0}.help-text,.invalid-text{margin:var(--bl-size-3xs) 0 0 var(--bl-size-2xs);font:var(--bl-font-title-4-regular);padding:var(--bl-size-3xs) var(--bl-input-padding-horizontal)}.help-text{color:var(--bl-color-content-secondary)}.invalid-text{color:var(--bl-color-danger)}.select-open .help-text,.select-open .invalid-text{visibility:hidden}`;\nexport default styles;\n", "import { LitElement, html, CSSResultGroup, PropertyValues } from 'lit';\nimport { customElement, property, state, query, queryAll } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { computePosition, flip, MiddlewareArguments, offset, size, autoUpdate } from '@floating-ui/dom';\nimport style from '../select/bl-select.css';\nimport '../icon/bl-icon';\nimport '../select/option/bl-select-option';\nimport type BlSelectOption from './option/bl-select-option';\nimport { event, EventDispatcher } from '../../utilities/event';\n\nexport interface ISelectOption {\n  value: string;\n  text: string;\n  selected: boolean;\n}\n\nexport type SelectSize = 'medium' | 'large' | 'small';\n\nexport type CleanUpFunction = () => void;\n\n@customElement('bl-select')\nexport default class BlSelect extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /* Declare reactive properties */\n  /**\n   * Sets the label value\n   */\n  @property({})\n  label?: string;\n\n  /**\n   * Sets the placeholder value. If left blank, the label value (if specified) is set as placeholder.\n   */\n  @property({})\n  placeholder?: string;\n\n  /**\n   * Sets the size value. Select component's height value will be changed accordingly\n   */\n  @property({ type: String, reflect: true })\n  size: SelectSize = 'medium';\n\n  /**\n   * When option is not selected, shows component in error state\n   */\n  @property({ type: Boolean })\n  required = false;\n\n  /**\n   * Shows the component in disabled state.\n   */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * Allows multiple options to be selected\n   */\n  @property({ type: Boolean })\n  multiple = false;\n\n  /**\n   * Makes label as fixed positioned\n   */\n  @property({ type: Boolean, attribute: 'label-fixed' })\n  labelFixed = false;\n\n  /**\n   * Adds help text\n   */\n  @property({ type: String, attribute: 'help-text' })\n  helpText?: string;\n\n  /**\n   * Set custom error message\n   */\n  @property({ type: String, attribute: 'invalid-text' })\n  customInvalidText?: string;\n\n  /* Declare internal reactive properties */\n  @state()\n  private _isPopoverOpen = false;\n\n  @state()\n  private _selectedOptions: ISelectOption[] = [];\n\n  @state()\n  private _additionalSelectedOptionCount = 0;\n\n  @state()\n  private _isInvalid = false;\n\n  @query('.selected-options')\n  private _selectedOptionsContainer!: HTMLElement;\n\n  @queryAll('.selected-options li')\n  private _selectedOptionsItems!: Array<HTMLElement>;\n\n  @query('.popover')\n  private _popover: HTMLElement;\n\n  @query('.select-input')\n  private _selectInput: HTMLElement;\n\n  @event('bl-select') private _onBlSelect: EventDispatcher<ISelectOption[]>;\n\n  private _connectedOptions: BlSelectOption[] = [];\n\n  private _cleanUpPopover: CleanUpFunction | null = null;\n\n  get options() {\n    return this._connectedOptions;\n  }\n\n  get opened() {\n    return this._isPopoverOpen;\n  }\n\n  get selectedOptions() {\n    return this._selectedOptions;\n  }\n\n  get additionalSelectedOptionCount() {\n    return this._additionalSelectedOptionCount;\n  }\n\n  get isInvalid() {\n    return this._isInvalid;\n  }\n\n  open() {\n    this._isPopoverOpen = true;\n    this._setupPopover();\n    document.addEventListener('click', this._clickOutsideHandler);\n  }\n\n  close() {\n    this._isPopoverOpen = false;\n    this._cleanUpPopover && this._cleanUpPopover();\n    document.removeEventListener('click', this._clickOutsideHandler);\n  }\n\n  private _clickOutsideHandler = (event: MouseEvent) => {\n    const eventPath = event.composedPath() as HTMLElement[];\n\n    if (!eventPath?.find(el => el.tagName === 'BL-SELECT')?.contains(this)) {\n      this.close();\n      this._checkRequired();\n    }\n  };\n\n  private _setupPopover() {\n    this._cleanUpPopover = autoUpdate(this._selectInput, this._popover, () => {\n      computePosition(this._selectInput, this._popover, {\n        placement: 'bottom',\n        strategy: 'fixed',\n        middleware: [\n          flip(),\n          offset(8),\n          size({\n            apply(args: MiddlewareArguments) {\n              Object.assign(args.elements.floating.style, {\n                width: `${args.elements.reference.getBoundingClientRect().width}px`,\n              });\n            },\n          }),\n        ],\n      }).then(({ x, y }) => {\n        this._popover.style.setProperty('--left', `${x}px`);\n        this._popover.style.setProperty('--top', `${y}px`);\n      });\n    });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n  }\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this._cleanUpPopover && this._cleanUpPopover();\n  }\n\n  private inputTemplate() {\n    const inputSelectedOptions = html`<ul class=\"selected-options\">\n      ${this._selectedOptions.map(item => html`<li>${item.text}</li>`)}\n    </ul>`;\n    const _selectedItemCount = this._additionalSelectedOptionCount\n      ? html`<span>+${this._additionalSelectedOptionCount}</span>`\n      : null;\n    const removeButton = html`<bl-button\n        class=\"remove-all\"\n        size=\"small\"\n        variant=\"tertiary\"\n        kind=\"neutral\"\n        icon=\"close\"\n        @click=${this._onClickRemove}></bl-button>`;\n    const placeholder = this._showPlaceHolder\n      ? html`<span class=\"placeholder\">${this.placeholder}</span>`\n      : '';\n\n    return html`<div\n      class=\"select-input\"\n      ?disabled=${this.disabled}\n      @click=${this._onClickSelectInput}\n    >\n      ${placeholder} ${inputSelectedOptions} ${_selectedItemCount}\n      <div class=\"actions\">\n        ${this.multiple ? removeButton : null}\n        <bl-icon\n          class=\"dropdown-icon open\"\n          name=\"arrow_up\"\n        ></bl-icon>\n\n        <bl-icon\n          class=\"dropdown-icon closed\"\n          name=\"arrow_down\"\n        ></bl-icon>\n      </div>\n    </div>`;\n  }\n\n  private menuTemplate() {\n    return html`<div class=\"popover\" @bl-select-option=${this._handleSelectOptionEvent}>\n      <slot></slot>\n    </div>`;\n  }\n\n  render() {\n    const invalidMessage = this._isInvalid && this.customInvalidText\n      ? html`<p class=\"invalid-text\">${this.customInvalidText}</p>` : ``;\n    const helpMessage = this.helpText && !invalidMessage\n      ? html`<p class=\"help-text\">${this.helpText}</p>` : ``;\n    const label = this.label\n      ? html`<label>${this.label}</label>` : '';\n\n    return html`<div\n      class=${classMap({\n      'select-wrapper': true,\n      'select-open': this.opened,\n      'selected': this._selectedOptions.length > 0,\n      'invalid': this._isInvalid,\n    })}\n      tabindex=\"-1\"\n    >\n      ${label} ${this.inputTemplate()} ${this.menuTemplate()} ${helpMessage} ${invalidMessage}\n    </div> `;\n  }\n\n  private get _showPlaceHolder() {\n    if (this.label && !this.labelFixed) {\n      return !this._selectedOptions.length && this._isPopoverOpen;\n    }\n    return !this._selectedOptions.length;\n  }\n\n  private _onClickSelectInput() {\n    this._isPopoverOpen ? this.close() : this.open();\n  }\n\n  private _handleSelectEvent() {\n    this._onBlSelect(this._selectedOptions);\n  }\n\n  private _handleSingleSelect(optionItem: ISelectOption) {\n    const oldItem = this._connectedOptions.find(option => option.value !== optionItem.value && option.selected);\n\n    if (oldItem) {\n      oldItem.selected = false;\n    }\n\n    this._selectedOptions = [optionItem];\n    this._handleSelectEvent();\n    this._isPopoverOpen = false;\n  }\n\n  private _handleMultipleSelect(optionItem: ISelectOption) {\n    const { value } = optionItem;\n\n    if (!optionItem.selected) {\n      this._selectedOptions = this._selectedOptions.filter(item => item.value !== value);\n    } else {\n      this._selectedOptions = [...this._selectedOptions, optionItem];\n    }\n\n    this._handleSelectEvent();\n  }\n\n  private _handleSelectOptionEvent(e: CustomEvent) {\n    const optionItem = e.detail as ISelectOption;\n\n    if (this.multiple) {\n      this._handleMultipleSelect(optionItem);\n    } else {\n      this._handleSingleSelect(optionItem);\n    }\n  }\n\n  private _onClickRemove(e: MouseEvent) {\n    e.stopPropagation();\n\n    this._connectedOptions\n      .filter(option => option.selected)\n      .forEach(option => {\n        option.selected = false;\n      });\n\n    this._selectedOptions = [];\n    this._handleSelectEvent();\n  }\n\n  private _checkAdditionalItemCount() {\n    if (!this.multiple) return;\n\n    let visibleItems = 0;\n    for(const value of this._selectedOptionsItems) {\n      if (value.offsetLeft < this._selectedOptionsContainer.offsetWidth) {\n        visibleItems++;\n      } else {\n        break;\n      }\n    }\n\n    this._additionalSelectedOptionCount = this._selectedOptionsItems.length - visibleItems;\n  }\n\n  private _checkRequired() {\n    if (this.required) {\n      this._isInvalid = this._selectedOptions.length === 0;\n    }\n  }\n\n  protected updated(_changedProperties: PropertyValues) {\n    if (\n      _changedProperties.has('_selectedOptions') &&\n      _changedProperties.get('_selectedOptions') instanceof Array\n    ) {\n      this._checkRequired();\n      this._checkAdditionalItemCount();\n    } else if (\n      _changedProperties.has('multiple') &&\n      typeof _changedProperties.get('multiple') === 'boolean'\n    ) {\n      this._connectedOptions.forEach(option => {\n        option.multiple = this.multiple;\n        option.selected = false;\n      });\n      this._selectedOptions = [];\n    }\n  }\n\n  /**\n   * This method is used by `bl-select-option` component to register itself to bl-select.\n   * @param option BlSelectOption reference to be registered\n   */\n  registerOption(option: BlSelectOption) {\n    this._connectedOptions.push(option);\n\n    if (option.selected) {\n      const optionItem = {\n        value: option.value,\n        text: option.textContent,\n        selected: option.selected,\n      } as ISelectOption;\n\n      if (this.multiple) {\n        this._selectedOptions = [...this._selectedOptions, optionItem];\n      } else {\n        this._selectedOptions = [optionItem];\n      }\n\n      this.requestUpdate();\n    }\n  }\n\n  /**\n   * This method is used by `bl-select-option` component to unregister itself from bl-select.\n   * @param option BlSelectOption reference to be unregistered\n   */\n  unregisterOption(option: BlSelectOption) {\n    this._connectedOptions.splice(this._connectedOptions.indexOf(option), 1);\n    this._selectedOptions = this._selectedOptions.filter(item => item.value !== option.value);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-select': BlSelect;\n  }\n}\n"],
-  "mappings": "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",
-  "names": ["styles", "r", "bl_select_default", "BlSelect", "s", "event", "_a", "eventPath", "el", "bl_select_default", "N", "z", "b", "T", "k", "args", "x", "y", "inputSelectedOptions", "$", "item", "_selectedItemCount", "removeButton", "placeholder", "invalidMessage", "helpMessage", "label", "o", "optionItem", "oldItem", "option", "value", "visibleItems", "_changedProperties", "__decorateClass", "e", "t", "i", "n"]
-}