@trendyol/baklava 2.0.0-beta.81 → 2.0.0-beta.83
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/baklava-react.d.ts +5 -0
- package/dist/baklava-react.d.ts.map +1 -1
- package/dist/baklava-react.js +1 -1
- package/dist/baklava-react.js.map +3 -3
- package/dist/baklava.d.ts +1 -0
- package/dist/baklava.d.ts.map +1 -1
- package/dist/baklava.js +1 -1
- package/dist/chunk-54ROO7JA.js +5 -0
- package/dist/chunk-54ROO7JA.js.map +7 -0
- package/dist/chunk-ANYJUR6Q.js +2 -0
- package/dist/chunk-ANYJUR6Q.js.map +7 -0
- package/dist/{chunk-VAF7XRXM.js → chunk-GT47M6BF.js} +3 -3
- package/dist/{chunk-VAF7XRXM.js.map → chunk-GT47M6BF.js.map} +3 -3
- package/dist/{chunk-N455HW4V.js → chunk-K5PH753D.js} +2 -2
- package/dist/{chunk-N455HW4V.js.map → chunk-K5PH753D.js.map} +1 -1
- package/dist/{chunk-WUDM5U5Z.js → chunk-VB5RPJV3.js} +2 -2
- package/dist/{chunk-WUDM5U5Z.js.map → chunk-VB5RPJV3.js.map} +1 -1
- package/dist/components/dropdown/bl-dropdown.js +1 -1
- package/dist/components/dropdown/item/bl-dropdown-item.js +1 -1
- package/dist/components/pagination/bl-pagination.js +1 -1
- package/dist/components/popover/bl-popover.d.ts +79 -0
- package/dist/components/popover/bl-popover.d.ts.map +1 -0
- package/dist/components/popover/bl-popover.js +2 -0
- package/dist/components/popover/bl-popover.js.map +7 -0
- package/dist/components/popover/bl-popover.test.d.ts +2 -0
- package/dist/components/popover/bl-popover.test.d.ts.map +1 -0
- package/dist/components/select/bl-select.d.ts.map +1 -1
- package/dist/components/select/bl-select.js +1 -1
- package/dist/components/tooltip/bl-tooltip.js +1 -1
- package/dist/custom-elements.json +121 -0
- package/package.json +2 -2
- package/dist/chunk-5ODNFE7B.js +0 -2
- package/dist/chunk-5ODNFE7B.js.map +0 -7
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{b as y,
|
|
1
|
+
import{a as m}from"./chunk-3B64VOWB.js";import{b as y,d as g,f as x,g as _,h as O}from"./chunk-ANYJUR6Q.js";import{a as f}from"./chunk-DJOD4BTL.js";import{a as p}from"./chunk-OLPYXE2P.js";import{a as b}from"./chunk-KPAWUBRO.js";import{a as h}from"./chunk-23UFIOHV.js";import{a as d,b as n,f as c,g as u,h as l,i as r,j as a,k as v}from"./chunk-57PTZNIL.js";import{a as o}from"./chunk-NZ3RGSR6.js";var T=d`:host{width:200px;display:inline-block}.select-wrapper{width:100%;position:relative;display:flex;flex-direction:column;gap:var(--bl-size-3xs);--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:100;--menu-height:250px;--popover-position:var(--bl-popover-position,fixed)}: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)}:host([disabled]) .select-wrapper{--placeholder-color:var(--bl-color-content-passive)}.dirty.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;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);-webkit-user-select:none;user-select:none}.placeholder{color:var(--placeholder-color);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.select-wrapper.selected .placeholder,:host([label]:not([label-fixed])) .select-wrapper:not(.select-open) .placeholder{display: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,.select-input:focus-visible{border:solid 1px var(--border-focus-color);outline:0}:host([disabled]){cursor:not-allowed}:host([disabled]) .select-input{pointer-events:none;background-color:var(--disabled-color)}.select-input .selected-options{flex:1;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:', '}.select-input:not(.has-overflowed-options) .additional-selection-count{display:none}: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:var(--popover-position);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]) label{position:static;padding:0;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--label-color)}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-content-secondary)}.select-open .help-text,.select-open .invalid-text{visibility:hidden}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}.dirty.invalid .help-text{display:none}`,w=T;var t=class extends f(c){constructor(){super(...arguments);this.size="medium";this.required=!1;this.disabled=!1;this.multiple=!1;this.labelFixed=!1;this._isPopoverOpen=!1;this._additionalSelectedOptionCount=0;this._connectedOptions=[];this._cleanUpPopover=null;this._selectedOptions=[];this.dirty=!1;this._interactOutsideHandler=e=>{var s;let i=e.composedPath();(s=i==null?void 0:i.find(z=>z.tagName==="BL-SELECT"))!=null&&s.contains(this)||this.close()};this.focusedOptionIndex=-1}static get styles(){return[w]}get value(){return this._value}set value(e){if(this._value=e,Array.isArray(e)){let i=new FormData;e.forEach(s=>i.append(this.name,`${s}`)),this.setValue(i)}else this.setValue(e);this.setOptionsSelected()}shouldFormValueUpdate(){return this.value!==null&&this.value!==""}setOptionsSelected(){this._connectedOptions.forEach(e=>e.selected=this.value===e.value||Array.isArray(this.value)&&this.value.includes(e.value)),this._selectedOptions=[...this.options.filter(e=>e.selected)]}get options(){return this._connectedOptions}get opened(){return this._isPopoverOpen}get selectedOptions(){return this._selectedOptions}get additionalSelectedOptionCount(){return this._additionalSelectedOptionCount}validityCallback(){if(this.customInvalidText)return this.customInvalidText;let e=document.createElement("select");return e.required=this.required,e.validationMessage}reportValidity(){return this.dirty=!0,this.checkValidity()}resetFormControl(){this.value=this._initialValue}open(){this._isPopoverOpen=!0,this._setupPopover(),document.addEventListener("click",this._interactOutsideHandler,!0),document.addEventListener("focus",this._interactOutsideHandler,!0)}close(){this._isPopoverOpen=!1,this.focusedOptionIndex=-1,this._cleanUpPopover&&this._cleanUpPopover(),document.removeEventListener("click",this._interactOutsideHandler,!0),document.removeEventListener("focus",this._interactOutsideHandler,!0)}_setupPopover(){this._cleanUpPopover=_(this._selectInput,this._popover,()=>{O(this._selectInput,this._popover,{placement:"bottom",strategy:"fixed",middleware:[y(),g(8),x({apply(e){Object.assign(e.elements.floating.style,{width:`${e.elements.reference.getBoundingClientRect().width}px`})}})]}).then(({x:e,y:i})=>{this._popover.style.setProperty("--left",`${e}px`),this._popover.style.setProperty("--top",`${i}px`)})})}connectedCallback(){var e;super.connectedCallback(),(e=this.form)==null||e.addEventListener("submit",i=>{this.reportValidity()||i.preventDefault()})}disconnectedCallback(){super.disconnectedCallback(),this._cleanUpPopover&&this._cleanUpPopover()}inputTemplate(){let e=n`<ul class="selected-options">
|
|
2
2
|
${this._selectedOptions.map(s=>n`<li>${s.textContent}</li>`)}
|
|
3
3
|
</ul>`,i=n`<bl-button
|
|
4
4
|
class="remove-all"
|
|
@@ -38,5 +38,5 @@ import{b as y,c as g,e as x,g as _,h as O}from"./chunk-5ODNFE7B.js";import{a as
|
|
|
38
38
|
<slot></slot>
|
|
39
39
|
</div>
|
|
40
40
|
<div class="hint">${e} ${i}</div>
|
|
41
|
-
</div> `}handleKeydown(e){this.focusedOptionIndex===-1&&["Enter","Space"].includes(e.code)?(this.togglePopover(),e.preventDefault()):this._isPopoverOpen===!1&&["ArrowDown","ArrowUp"].includes(e.code)?(this.open(),e.preventDefault()):e.code==="Escape"?(this.close(),e.preventDefault()):this._isPopoverOpen&&["ArrowDown","ArrowUp"].includes(e.code)&&(e.code==="ArrowDown"&&this.focusedOptionIndex++,e.code==="ArrowUp"&&this.focusedOptionIndex--,this.focusedOptionIndex=Math.max(0,Math.min(this.focusedOptionIndex,this.options.length-1)),this.options[this.focusedOptionIndex].focus(),e.preventDefault())}togglePopover(){this._isPopoverOpen?this.close():this.open()}_handleSelectEvent(){this._onBlSelect(this._selectedOptions.map(e=>({value:e.value,selected:e.selected,text:e.textContent})))}_handleSingleSelect(e){this.value=e.value,this._handleSelectEvent(),this._isPopoverOpen=!1}_handleMultipleSelect(){this.value=this._connectedOptions.filter(e=>e.selected).map(e=>e.value),this._handleSelectEvent()}_handleSelectOptionEvent(e){let i=e.target;this.dirty=!0,this.multiple?this._handleMultipleSelect():this._handleSingleSelect(i)}_onClickRemove(e){e.stopPropagation(),this._connectedOptions.filter(i=>i.selected).forEach(i=>{i.selected=!1}),this.value=null,this._additionalSelectedOptionCount=0,this._handleSelectEvent()}_checkAdditionalItemCount(){if(!this.multiple||!this.selectedOptionsItems||this.selectedOptionsItems.length<2)return
|
|
42
|
-
//# sourceMappingURL=chunk-
|
|
41
|
+
</div> `}handleKeydown(e){this.focusedOptionIndex===-1&&["Enter","Space"].includes(e.code)?(this.togglePopover(),e.preventDefault()):this._isPopoverOpen===!1&&["ArrowDown","ArrowUp"].includes(e.code)?(this.open(),e.preventDefault()):e.code==="Escape"?(this.close(),e.preventDefault()):this._isPopoverOpen&&["ArrowDown","ArrowUp"].includes(e.code)&&(e.code==="ArrowDown"&&this.focusedOptionIndex++,e.code==="ArrowUp"&&this.focusedOptionIndex--,this.focusedOptionIndex=Math.max(0,Math.min(this.focusedOptionIndex,this.options.length-1)),this.options[this.focusedOptionIndex].focus(),e.preventDefault())}togglePopover(){this._isPopoverOpen?this.close():this.open()}_handleSelectEvent(){this._onBlSelect(this._selectedOptions.map(e=>({value:e.value,selected:e.selected,text:e.textContent})))}_handleSingleSelect(e){this.value=e.value,this._handleSelectEvent(),this._isPopoverOpen=!1}_handleMultipleSelect(){this.value=this._connectedOptions.filter(e=>e.selected).map(e=>e.value),this._handleSelectEvent()}_handleSelectOptionEvent(e){let i=e.target;this.dirty=!0,this.multiple?this._handleMultipleSelect():this._handleSingleSelect(i)}_onClickRemove(e){e.stopPropagation(),this._connectedOptions.filter(i=>i.selected).forEach(i=>{i.selected=!1}),this.value=null,this._additionalSelectedOptionCount=0,this._handleSelectEvent()}_checkAdditionalItemCount(){if(!this.multiple||!this.selectedOptionsItems||this.selectedOptionsItems.length<2){this._additionalSelectedOptionCount=0;return}let e=[...this.selectedOptionsItems].findIndex(i=>i.offsetLeft>this.selectedOptionsContainer.offsetWidth);e>-1?this._additionalSelectedOptionCount=this.selectedOptionsItems.length-e:this._additionalSelectedOptionCount=0}firstUpdated(){this.value===void 0&&(this.value=""),this._initialValue=this._value}updated(e){e.has("multiple")&&typeof e.get("multiple")=="boolean"&&(this.value=null),this._checkAdditionalItemCount()}registerOption(e){this._connectedOptions.push(e),e.selected&&(this.multiple?(Array.isArray(this.value)||(this.value=[]),this.value=[...this.value,e.value]):this.value=e.value),this.setOptionsSelected(),this.requestUpdate()}unregisterOption(e){this._connectedOptions.splice(this._connectedOptions.indexOf(e),1)}};t.formControlValidators=[m],o([l()],t.prototype,"name",2),o([l()],t.prototype,"value",1),o([l({reflect:!0})],t.prototype,"label",2),o([l({})],t.prototype,"placeholder",2),o([l({type:String,reflect:!0})],t.prototype,"size",2),o([l({type:Boolean,reflect:!0})],t.prototype,"required",2),o([l({type:Boolean,reflect:!0})],t.prototype,"disabled",2),o([l({type:Boolean})],t.prototype,"multiple",2),o([l({type:Boolean,attribute:"label-fixed",reflect:!0})],t.prototype,"labelFixed",2),o([l({type:String,attribute:"help-text"})],t.prototype,"helpText",2),o([l({type:String,attribute:"invalid-text"})],t.prototype,"customInvalidText",2),o([r()],t.prototype,"_isPopoverOpen",2),o([r()],t.prototype,"_additionalSelectedOptionCount",2),o([a(".selected-options")],t.prototype,"selectedOptionsContainer",2),o([v(".selected-options li")],t.prototype,"selectedOptionsItems",2),o([a(".popover")],t.prototype,"_popover",2),o([a(".select-input")],t.prototype,"_selectInput",2),o([h("bl-select")],t.prototype,"_onBlSelect",2),o([r()],t.prototype,"_selectedOptions",2),o([r()],t.prototype,"dirty",2),o([a(".select-input")],t.prototype,"validationTarget",2),t=o([u("bl-select")],t);export{t as a};
|
|
42
|
+
//# sourceMappingURL=chunk-GT47M6BF.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/components/select/bl-select.css", "../src/components/select/bl-select.ts"],
|
|
4
|
-
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{width:200px;display:inline-block}.select-wrapper{width:100%;position:relative;display:flex;flex-direction:column;gap:var(--bl-size-3xs);--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:100;--menu-height:250px;--popover-position:var(--bl-popover-position,fixed)}: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)}:host([disabled]) .select-wrapper{--placeholder-color:var(--bl-color-content-passive)}.dirty.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;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);-webkit-user-select:none;user-select:none}.placeholder{color:var(--placeholder-color);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.select-wrapper.selected .placeholder,:host([label]:not([label-fixed])) .select-wrapper:not(.select-open) .placeholder{display: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,.select-input:focus-visible{border:solid 1px var(--border-focus-color);outline:0}:host([disabled]){cursor:not-allowed}:host([disabled]) .select-input{pointer-events:none;background-color:var(--disabled-color)}.select-input .selected-options{flex:1;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:', '}.select-input:not(.has-overflowed-options) .additional-selection-count{display:none}: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:var(--popover-position);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]) label{position:static;padding:0;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--label-color)}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-content-secondary)}.select-open .help-text,.select-open .invalid-text{visibility:hidden}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}.dirty.invalid .help-text{display:none}`;\nexport default styles;\n", "import { autoUpdate, computePosition, flip, MiddlewareArguments, offset, size } from '@floating-ui/dom';\nimport { FormControlMixin, requiredValidator } from '@open-wc/form-control';\nimport { FormValue } from '@open-wc/form-helpers';\nimport 'element-internals-polyfill';\nimport { CSSResultGroup, html, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, query, queryAll, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport '../icon/bl-icon';\nimport style from '../select/bl-select.css';\nimport '../select/option/bl-select-option';\nimport type BlSelectOption from './option/bl-select-option';\n\nexport interface ISelectOption<T> {\n value: T;\n text: string;\n selected: boolean;\n}\n\nexport type SelectSize = 'medium' | 'large' | 'small';\n\nexport type CleanUpFunction = () => void;\n\n\n/**\n * @tag bl-select\n * @summary Baklava Select component\n *\n * @cssproperty --bl-popover-position - Sets the positioning strategy of select popover. You can set it as `absolute` if you need to show popover relative to its trigger element. Default value is `fixed`\n */\n@customElement('bl-select')\nexport default class BlSelect<ValueType extends FormValue = string> extends FormControlMixin(LitElement) {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n static formControlValidators = [requiredValidator];\n\n /**\n * Sets name of the select field\n */\n @property()\n name: string;\n\n private _value: ValueType | ValueType[] | null;\n\n private _initialValue: ValueType | ValueType[] | null;\n\n /**\n * Sets the value of the select\n */\n @property()\n get value(): ValueType | ValueType[] | null {\n return this._value;\n }\n\n set value(val: ValueType | ValueType[] | null) {\n this._value = val;\n\n if (Array.isArray(val)) {\n const formData = new FormData();\n val.forEach((option) => formData.append(this.name, `${option}`));\n this.setValue(formData);\n } else {\n this.setValue(val);\n }\n\n this.setOptionsSelected();\n }\n\n shouldFormValueUpdate(): boolean {\n return this.value !== null && this.value !== '';\n }\n\n /* Declare reactive properties */\n /**\n * Sets the label value\n */\n @property({ reflect: true })\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, reflect: true })\n required = false;\n\n /**\n * Shows the component in disabled state.\n */\n @property({ type: Boolean, reflect: true })\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', reflect: true })\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\n @state()\n private _additionalSelectedOptionCount = 0;\n\n @query('.selected-options')\n private selectedOptionsContainer!: HTMLElement;\n\n @queryAll('.selected-options li')\n private selectedOptionsItems!: NodeListOf<HTMLElement>;\n\n @query('.popover')\n private _popover: HTMLElement;\n\n @query('.select-input')\n private _selectInput: HTMLElement;\n\n /**\n * Fires when selection changes\n */\n @event('bl-select') private _onBlSelect: EventDispatcher<ISelectOption<ValueType>[]>;\n\n private _connectedOptions: BlSelectOption<ValueType>[] = [];\n\n private _cleanUpPopover: CleanUpFunction | null = null;\n\n private setOptionsSelected() {\n this._connectedOptions\n .forEach(\n (option) => option.selected = (\n this.value === option.value ||\n (Array.isArray(this.value) && this.value.includes(option.value))\n )\n );\n\n this._selectedOptions = [...this.options\n .filter(option => option.selected)\n ];\n }\n\n get options() {\n return this._connectedOptions;\n }\n\n get opened() {\n return this._isPopoverOpen;\n }\n\n @state()\n private _selectedOptions: BlSelectOption<ValueType>[] = [];\n\n @state()\n private dirty = false;\n\n get selectedOptions(): BlSelectOption<ValueType>[] {\n return this._selectedOptions;\n }\n\n get additionalSelectedOptionCount() {\n return this._additionalSelectedOptionCount;\n }\n\n validityCallback(): string | void {\n if (this.customInvalidText) {\n return this.customInvalidText;\n }\n const select = document.createElement('select');\n select.required = this.required;\n\n return select.validationMessage;\n }\n\n reportValidity() {\n this.dirty = true;\n return this.checkValidity();\n }\n\n resetFormControl(): void {\n this.value = this._initialValue;\n }\n\n @query('.select-input')\n validationTarget: HTMLElement;\n\n open() {\n this._isPopoverOpen = true;\n this._setupPopover();\n document.addEventListener('click', this._interactOutsideHandler, true);\n document.addEventListener('focus', this._interactOutsideHandler, true);\n }\n\n close() {\n this._isPopoverOpen = false;\n this.focusedOptionIndex = -1;\n this._cleanUpPopover && this._cleanUpPopover();\n document.removeEventListener('click', this._interactOutsideHandler, true);\n document.removeEventListener('focus', this._interactOutsideHandler, true);\n }\n\n private _interactOutsideHandler = (event: MouseEvent | FocusEvent) => {\n const eventPath = event.composedPath() as HTMLElement[];\n\n if (!eventPath?.find(el => el.tagName === 'BL-SELECT')?.contains(this)) {\n this.close();\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(): void {\n super.connectedCallback();\n\n this.form?.addEventListener('submit', (e: SubmitEvent) => {\n if (!this.reportValidity()) {\n e.preventDefault();\n }\n });\n }\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.textContent}</li>`)}\n </ul>`;\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\n return html`<div\n class=${classMap({\n 'select-input': true,\n 'has-overflowed-options': this._additionalSelectedOptionCount > 0\n })}\n tabindex=\"${this.disabled ? '-1' : 0}\"\n @click=${this.togglePopover}\n >\n <span class=\"placeholder\">${this.placeholder}</span>\n ${inputSelectedOptions}\n <span class=\"additional-selection-count\">+${this._additionalSelectedOptionCount}</span>\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 render() {\n const invalidMessage = !this.checkValidity()\n ? html`<p id=\"errorMessage\" aria-live=\"polite\" class=\"invalid-text\">\n ${this.validationMessage}\n </p>`: '';\n\n const helpMessage = this.helpText && !invalidMessage\n ? html`<p class=\"help-text\">${this.helpText}</p>` : '';\n\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.validity.valid,\n 'dirty': this.dirty\n })}\n @keydown=${this.handleKeydown}\n >\n ${label}\n ${this.inputTemplate()}\n <div class=\"popover\" tabindex=\"${ifDefined(this._isPopoverOpen ? undefined : '-1')}\" @bl-select-option=${this._handleSelectOptionEvent}>\n <slot></slot>\n </div>\n <div class=\"hint\">${invalidMessage} ${helpMessage}</div>\n </div> `;\n }\n\n private focusedOptionIndex = -1;\n\n private handleKeydown(event: KeyboardEvent) {\n if (this.focusedOptionIndex === -1 && ['Enter', 'Space'].includes(event.code)) {\n this.togglePopover();\n event.preventDefault();\n } else if (this._isPopoverOpen === false && ['ArrowDown', 'ArrowUp'].includes(event.code)) {\n this.open();\n event.preventDefault();\n } else if (event.code === 'Escape') {\n this.close();\n event.preventDefault();\n } else if (this._isPopoverOpen && ['ArrowDown', 'ArrowUp'].includes(event.code)) {\n event.code === 'ArrowDown' && this.focusedOptionIndex++;\n event.code === 'ArrowUp' && this.focusedOptionIndex--;\n\n // Don't exceed array indexes\n this.focusedOptionIndex = Math.max(\n 0,\n Math.min(this.focusedOptionIndex, this.options.length - 1)\n );\n\n this.options[this.focusedOptionIndex].focus();\n\n event.preventDefault();\n }\n\n }\n\n private togglePopover() {\n this._isPopoverOpen ? this.close() : this.open();\n }\n\n private _handleSelectEvent() {\n this._onBlSelect(this._selectedOptions.map(option => ({\n value: option.value,\n selected: option.selected,\n text: option.textContent\n } as ISelectOption<ValueType>)));\n }\n\n private _handleSingleSelect(optionItem: BlSelectOption<ValueType>) {\n this.value = optionItem.value;\n\n this._handleSelectEvent();\n this._isPopoverOpen = false;\n }\n\n private _handleMultipleSelect() {\n this.value = this._connectedOptions.filter((option) => option.selected).map(option => option.value);\n\n this._handleSelectEvent();\n }\n\n private _handleSelectOptionEvent(e: CustomEvent) {\n const optionItem = e.target as BlSelectOption<ValueType>;\n this.dirty = true;\n\n if (this.multiple) {\n this._handleMultipleSelect();\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.value = null;\n this._additionalSelectedOptionCount = 0;\n this._handleSelectEvent();\n }\n\n private _checkAdditionalItemCount() {\n if (!this.multiple || !this.selectedOptionsItems || this.selectedOptionsItems.length < 2) return;\n\n const firstNonVisibleItemIndex = [...this.selectedOptionsItems]\n .findIndex((item) => item.offsetLeft > this.selectedOptionsContainer.offsetWidth);\n\n if (firstNonVisibleItemIndex > -1) {\n this._additionalSelectedOptionCount = this.selectedOptionsItems.length - firstNonVisibleItemIndex;\n } else {\n this._additionalSelectedOptionCount = 0;\n }\n }\n\n protected firstUpdated(): void {\n if (this.value === undefined) {\n this.value = '' as ValueType;\n }\n\n this._initialValue = this._value;\n }\n\n protected updated(_changedProperties: PropertyValues) {\n if (\n _changedProperties.has('multiple') &&\n typeof _changedProperties.get('multiple') === 'boolean'\n ) {\n this.value = null;\n }\n\n this._checkAdditionalItemCount();\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<ValueType>) {\n this._connectedOptions.push(option);\n\n if (option.selected) {\n if (this.multiple) {\n if (!Array.isArray(this.value)) {\n this.value = [];\n }\n this.value = [...this.value, option.value];\n } else {\n this.value = option.value;\n }\n }\n\n this.setOptionsSelected();\n this.requestUpdate();\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<ValueType>) {\n this._connectedOptions.splice(this._connectedOptions.indexOf(option), 1);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-select': BlSelect;\n }\n}\n"],
|
|
5
|
-
"mappings": "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
|
|
6
|
-
"names": ["styles", "i", "bl_select_default", "BlSelect", "FormControlMixin", "s", "event", "_a", "eventPath", "el", "bl_select_default", "val", "formData", "option", "select", "
|
|
4
|
+
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{width:200px;display:inline-block}.select-wrapper{width:100%;position:relative;display:flex;flex-direction:column;gap:var(--bl-size-3xs);--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:100;--menu-height:250px;--popover-position:var(--bl-popover-position,fixed)}: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)}:host([disabled]) .select-wrapper{--placeholder-color:var(--bl-color-content-passive)}.dirty.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;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);-webkit-user-select:none;user-select:none}.placeholder{color:var(--placeholder-color);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.select-wrapper.selected .placeholder,:host([label]:not([label-fixed])) .select-wrapper:not(.select-open) .placeholder{display: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,.select-input:focus-visible{border:solid 1px var(--border-focus-color);outline:0}:host([disabled]){cursor:not-allowed}:host([disabled]) .select-input{pointer-events:none;background-color:var(--disabled-color)}.select-input .selected-options{flex:1;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:', '}.select-input:not(.has-overflowed-options) .additional-selection-count{display:none}: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:var(--popover-position);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]) label{position:static;padding:0;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--label-color)}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-content-secondary)}.select-open .help-text,.select-open .invalid-text{visibility:hidden}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}.dirty.invalid .help-text{display:none}`;\nexport default styles;\n", "import { autoUpdate, computePosition, flip, MiddlewareArguments, offset, size } from '@floating-ui/dom';\nimport { FormControlMixin, requiredValidator } from '@open-wc/form-control';\nimport { FormValue } from '@open-wc/form-helpers';\nimport 'element-internals-polyfill';\nimport { CSSResultGroup, html, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, query, queryAll, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport '../icon/bl-icon';\nimport style from '../select/bl-select.css';\nimport '../select/option/bl-select-option';\nimport type BlSelectOption from './option/bl-select-option';\n\nexport interface ISelectOption<T> {\n value: T;\n text: string;\n selected: boolean;\n}\n\nexport type SelectSize = 'medium' | 'large' | 'small';\n\nexport type CleanUpFunction = () => void;\n\n\n/**\n * @tag bl-select\n * @summary Baklava Select component\n *\n * @cssproperty --bl-popover-position - Sets the positioning strategy of select popover. You can set it as `absolute` if you need to show popover relative to its trigger element. Default value is `fixed`\n */\n@customElement('bl-select')\nexport default class BlSelect<ValueType extends FormValue = string> extends FormControlMixin(LitElement) {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n static formControlValidators = [requiredValidator];\n\n /**\n * Sets name of the select field\n */\n @property()\n name: string;\n\n private _value: ValueType | ValueType[] | null;\n\n private _initialValue: ValueType | ValueType[] | null;\n\n /**\n * Sets the value of the select\n */\n @property()\n get value(): ValueType | ValueType[] | null {\n return this._value;\n }\n\n set value(val: ValueType | ValueType[] | null) {\n this._value = val;\n\n if (Array.isArray(val)) {\n const formData = new FormData();\n val.forEach((option) => formData.append(this.name, `${option}`));\n this.setValue(formData);\n } else {\n this.setValue(val);\n }\n\n this.setOptionsSelected();\n }\n\n shouldFormValueUpdate(): boolean {\n return this.value !== null && this.value !== '';\n }\n\n /* Declare reactive properties */\n /**\n * Sets the label value\n */\n @property({ reflect: true })\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, reflect: true })\n required = false;\n\n /**\n * Shows the component in disabled state.\n */\n @property({ type: Boolean, reflect: true })\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', reflect: true })\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\n @state()\n private _additionalSelectedOptionCount = 0;\n\n @query('.selected-options')\n private selectedOptionsContainer!: HTMLElement;\n\n @queryAll('.selected-options li')\n private selectedOptionsItems!: NodeListOf<HTMLElement>;\n\n @query('.popover')\n private _popover: HTMLElement;\n\n @query('.select-input')\n private _selectInput: HTMLElement;\n\n /**\n * Fires when selection changes\n */\n @event('bl-select') private _onBlSelect: EventDispatcher<ISelectOption<ValueType>[]>;\n\n private _connectedOptions: BlSelectOption<ValueType>[] = [];\n\n private _cleanUpPopover: CleanUpFunction | null = null;\n\n private setOptionsSelected() {\n this._connectedOptions\n .forEach(\n (option) => option.selected = (\n this.value === option.value ||\n (Array.isArray(this.value) && this.value.includes(option.value))\n )\n );\n\n this._selectedOptions = [...this.options\n .filter(option => option.selected)\n ];\n }\n\n get options() {\n return this._connectedOptions;\n }\n\n get opened() {\n return this._isPopoverOpen;\n }\n\n @state()\n private _selectedOptions: BlSelectOption<ValueType>[] = [];\n\n @state()\n private dirty = false;\n\n get selectedOptions(): BlSelectOption<ValueType>[] {\n return this._selectedOptions;\n }\n\n get additionalSelectedOptionCount() {\n return this._additionalSelectedOptionCount;\n }\n\n validityCallback(): string | void {\n if (this.customInvalidText) {\n return this.customInvalidText;\n }\n const select = document.createElement('select');\n select.required = this.required;\n\n return select.validationMessage;\n }\n\n reportValidity() {\n this.dirty = true;\n return this.checkValidity();\n }\n\n resetFormControl(): void {\n this.value = this._initialValue;\n }\n\n @query('.select-input')\n validationTarget: HTMLElement;\n\n open() {\n this._isPopoverOpen = true;\n this._setupPopover();\n document.addEventListener('click', this._interactOutsideHandler, true);\n document.addEventListener('focus', this._interactOutsideHandler, true);\n }\n\n close() {\n this._isPopoverOpen = false;\n this.focusedOptionIndex = -1;\n this._cleanUpPopover && this._cleanUpPopover();\n document.removeEventListener('click', this._interactOutsideHandler, true);\n document.removeEventListener('focus', this._interactOutsideHandler, true);\n }\n\n private _interactOutsideHandler = (event: MouseEvent | FocusEvent) => {\n const eventPath = event.composedPath() as HTMLElement[];\n\n if (!eventPath?.find(el => el.tagName === 'BL-SELECT')?.contains(this)) {\n this.close();\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(): void {\n super.connectedCallback();\n\n this.form?.addEventListener('submit', (e: SubmitEvent) => {\n if (!this.reportValidity()) {\n e.preventDefault();\n }\n });\n }\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.textContent}</li>`)}\n </ul>`;\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\n return html`<div\n class=${classMap({\n 'select-input': true,\n 'has-overflowed-options': this._additionalSelectedOptionCount > 0\n })}\n tabindex=\"${this.disabled ? '-1' : 0}\"\n @click=${this.togglePopover}\n >\n <span class=\"placeholder\">${this.placeholder}</span>\n ${inputSelectedOptions}\n <span class=\"additional-selection-count\">+${this._additionalSelectedOptionCount}</span>\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 render() {\n const invalidMessage = !this.checkValidity()\n ? html`<p id=\"errorMessage\" aria-live=\"polite\" class=\"invalid-text\">\n ${this.validationMessage}\n </p>`: '';\n\n const helpMessage = this.helpText && !invalidMessage\n ? html`<p class=\"help-text\">${this.helpText}</p>` : '';\n\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.validity.valid,\n 'dirty': this.dirty\n })}\n @keydown=${this.handleKeydown}\n >\n ${label}\n ${this.inputTemplate()}\n <div class=\"popover\" tabindex=\"${ifDefined(this._isPopoverOpen ? undefined : '-1')}\" @bl-select-option=${this._handleSelectOptionEvent}>\n <slot></slot>\n </div>\n <div class=\"hint\">${invalidMessage} ${helpMessage}</div>\n </div> `;\n }\n\n private focusedOptionIndex = -1;\n\n private handleKeydown(event: KeyboardEvent) {\n if (this.focusedOptionIndex === -1 && ['Enter', 'Space'].includes(event.code)) {\n this.togglePopover();\n event.preventDefault();\n } else if (this._isPopoverOpen === false && ['ArrowDown', 'ArrowUp'].includes(event.code)) {\n this.open();\n event.preventDefault();\n } else if (event.code === 'Escape') {\n this.close();\n event.preventDefault();\n } else if (this._isPopoverOpen && ['ArrowDown', 'ArrowUp'].includes(event.code)) {\n event.code === 'ArrowDown' && this.focusedOptionIndex++;\n event.code === 'ArrowUp' && this.focusedOptionIndex--;\n\n // Don't exceed array indexes\n this.focusedOptionIndex = Math.max(\n 0,\n Math.min(this.focusedOptionIndex, this.options.length - 1)\n );\n\n this.options[this.focusedOptionIndex].focus();\n\n event.preventDefault();\n }\n\n }\n\n private togglePopover() {\n this._isPopoverOpen ? this.close() : this.open();\n }\n\n private _handleSelectEvent() {\n this._onBlSelect(this._selectedOptions.map(option => ({\n value: option.value,\n selected: option.selected,\n text: option.textContent\n } as ISelectOption<ValueType>)));\n }\n\n private _handleSingleSelect(optionItem: BlSelectOption<ValueType>) {\n this.value = optionItem.value;\n\n this._handleSelectEvent();\n this._isPopoverOpen = false;\n }\n\n private _handleMultipleSelect() {\n this.value = this._connectedOptions.filter((option) => option.selected).map(option => option.value);\n\n this._handleSelectEvent();\n }\n\n private _handleSelectOptionEvent(e: CustomEvent) {\n const optionItem = e.target as BlSelectOption<ValueType>;\n this.dirty = true;\n\n if (this.multiple) {\n this._handleMultipleSelect();\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.value = null;\n this._additionalSelectedOptionCount = 0;\n this._handleSelectEvent();\n }\n\n private _checkAdditionalItemCount() {\n if (!this.multiple || !this.selectedOptionsItems || this.selectedOptionsItems.length < 2) {\n this._additionalSelectedOptionCount = 0;\n return;\n }\n\n const firstNonVisibleItemIndex = [...this.selectedOptionsItems]\n .findIndex((item) => item.offsetLeft > this.selectedOptionsContainer.offsetWidth);\n\n if (firstNonVisibleItemIndex > -1) {\n this._additionalSelectedOptionCount = this.selectedOptionsItems.length - firstNonVisibleItemIndex;\n } else {\n this._additionalSelectedOptionCount = 0;\n }\n }\n\n protected firstUpdated(): void {\n if (this.value === undefined) {\n this.value = '' as ValueType;\n }\n\n this._initialValue = this._value;\n }\n\n protected updated(_changedProperties: PropertyValues) {\n if (\n _changedProperties.has('multiple') &&\n typeof _changedProperties.get('multiple') === 'boolean'\n ) {\n this.value = null;\n }\n\n this._checkAdditionalItemCount();\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<ValueType>) {\n this._connectedOptions.push(option);\n\n if (option.selected) {\n if (this.multiple) {\n if (!Array.isArray(this.value)) {\n this.value = [];\n }\n this.value = [...this.value, option.value];\n } else {\n this.value = option.value;\n }\n }\n\n this.setOptionsSelected();\n this.requestUpdate();\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<ValueType>) {\n this._connectedOptions.splice(this._connectedOptions.indexOf(option), 1);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-select': BlSelect;\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["styles", "i", "bl_select_default", "BlSelect", "FormControlMixin", "s", "event", "_a", "eventPath", "el", "bl_select_default", "val", "formData", "option", "select", "P", "z", "b", "O", "k", "args", "x", "y", "e", "inputSelectedOptions", "item", "removeButton", "o", "invalidMessage", "helpMessage", "label", "l", "optionItem", "firstNonVisibleItemIndex", "_changedProperties", "requiredValidator", "__decorateClass", "t", "i"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as b,b as u,c as f,d as g,
|
|
1
|
+
import{a as b,b as u,c as f,d as g,e as w,g as y,h as x}from"./chunk-ANYJUR6Q.js";import{a as m}from"./chunk-OLPYXE2P.js";import{a as r}from"./chunk-23UFIOHV.js";import{a as n,b as p,f as d,g as h,h as c,i as v,j as i}from"./chunk-57PTZNIL.js";import{a as e}from"./chunk-NZ3RGSR6.js";var z=n`.trigger{display:inline-block;cursor:pointer}.tooltip{position:fixed;box-sizing:border-box;border:0;background-color:var(--bl-color-secondary);color:var(--bl-color-content-primary-contrast);border-radius:var(--bl-size-3xs);pointer-events:none;font:var(--bl-font-title-3-regular);padding:var(--bl-size-m);z-index:999;width:max-content;hyphens:auto;--max-viewport:calc(100vw - var(--bl-size-s));--tooltip-max-width:424px;max-width:min(var(--max-viewport),var(--tooltip-max-width))}.tooltip:not(.visible){visibility:hidden}.arrow{position:absolute;background-color:var(--bl-color-secondary);width:var(--bl-size-2xs);height:var(--bl-size-2xs);transform:rotate(45deg)}`,E=z;var t=class extends d{constructor(){super(...arguments);this.placement="top";this._visible=!1}static get styles(){return[E]}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.handleKeyDown),this.popoverAutoUpdateCleanup&&this.popoverAutoUpdateCleanup()}setTooltip(){this.popoverAutoUpdateCleanup=y(this.trigger,this.tooltip,()=>{x(this.trigger,this.tooltip,{placement:this.placement,strategy:"fixed",middleware:[g(8),w({padding:5}),u(),f(),b({element:this.arrow,padding:5})]}).then(({x:o,y:k,placement:C,middlewareData:s})=>{if(Object.assign(this.tooltip.style,{left:`${o}px`,top:`${k}px`}),s.arrow){let{x:a,y:l}=s.arrow;Object.assign(this.arrow.style,{left:a!=null?`${a}px`:"",top:l!=null?`${l}px`:""});let $={top:"bottom",right:"left",bottom:"top",left:"right"},D=C.split("-")[0],S=$[D];this.arrow.style.setProperty(S,"-4px")}})})}show(){this._visible=!0,this.setTooltip(),this.onShow("Show event fired!")}hide(){this._visible=!1,this.onHide("Hide event fired!")}get visible(){return this._visible}handleKeyDown(o){this._visible&&o.key==="Escape"&&(o.stopPropagation(),this.hide())}render(){let o=m({tooltip:!0,visible:this._visible});return p`<slot
|
|
2
2
|
class="trigger"
|
|
3
3
|
name="tooltip-trigger"
|
|
4
4
|
aria-describedby="tooltip"
|
|
@@ -12,4 +12,4 @@ import{a as b,b as u,c as f,d as g,f as w,g as y,h as x}from"./chunk-5ODNFE7B.js
|
|
|
12
12
|
<slot id="tooltip" role="tooltip" aria-live=${this._visible?"polite":"off"}></slot>
|
|
13
13
|
<div class="arrow" aria-hidden="true"></div>
|
|
14
14
|
</div>`}};e([i(".tooltip")],t.prototype,"tooltip",2),e([i(".trigger")],t.prototype,"trigger",2),e([i(".arrow")],t.prototype,"arrow",2),e([c({type:String})],t.prototype,"placement",2),e([v()],t.prototype,"_visible",2),e([r("bl-tooltip-show")],t.prototype,"onShow",2),e([r("bl-tooltip-hide")],t.prototype,"onHide",2),t=e([h("bl-tooltip")],t);export{t as a};
|
|
15
|
-
//# sourceMappingURL=chunk-
|
|
15
|
+
//# sourceMappingURL=chunk-K5PH753D.js.map
|
|
@@ -3,5 +3,5 @@
|
|
|
3
3
|
"sources": ["../src/components/tooltip/bl-tooltip.css", "../src/components/tooltip/bl-tooltip.ts"],
|
|
4
4
|
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`.trigger{display:inline-block;cursor:pointer}.tooltip{position:fixed;box-sizing:border-box;border:0;background-color:var(--bl-color-secondary);color:var(--bl-color-content-primary-contrast);border-radius:var(--bl-size-3xs);pointer-events:none;font:var(--bl-font-title-3-regular);padding:var(--bl-size-m);z-index:999;width:max-content;hyphens:auto;--max-viewport:calc(100vw - var(--bl-size-s));--tooltip-max-width:424px;max-width:min(var(--max-viewport),var(--tooltip-max-width))}.tooltip:not(.visible){visibility:hidden}.arrow{position:absolute;background-color:var(--bl-color-secondary);width:var(--bl-size-2xs);height:var(--bl-size-2xs);transform:rotate(45deg)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { computePosition, flip, shift, offset, arrow, inline, autoUpdate } from '@floating-ui/dom';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ReferenceElement } from '@floating-ui/core';\nimport style from './bl-tooltip.css';\nimport { event, EventDispatcher } from '../../utilities/event';\n\nexport type Placement =\n | 'top-start'\n | 'top'\n | 'top-end'\n | 'bottom-start'\n | 'bottom'\n | 'bottom-end'\n | 'left-start'\n | 'left'\n | 'left-end'\n | 'right-start'\n | 'right'\n | 'right-end';\n\n/**\n * @tag bl-tooltip\n * @summary Baklava Tooltip component\n *\n * @property {string} placement - Sets the tooltip placement\n */\n@customElement('bl-tooltip')\nexport default class BlTooltip extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n @query('.tooltip') private tooltip: HTMLElement;\n @query('.trigger') private trigger: ReferenceElement;\n @query('.arrow') private arrow: HTMLElement;\n\n /**\n * Sets placement of the tooltip\n */\n @property({ type: String })\n placement: Placement = 'top';\n\n @state() private _visible = false;\n\n /**\n * Fires when hovering over a trigger\n */\n @event('bl-tooltip-show') private onShow: EventDispatcher<string>;\n\n /**\n * Fires when leaving over from trigger\n */\n @event('bl-tooltip-hide') private onHide: EventDispatcher<string>;\n\n connectedCallback() {\n super.connectedCallback();\n\n this.addEventListener('keydown', this.handleKeyDown);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n this.removeEventListener('keydown', this.handleKeyDown);\n\n this.popoverAutoUpdateCleanup && this.popoverAutoUpdateCleanup();\n }\n\n private popoverAutoUpdateCleanup: () => void;\n\n private setTooltip() {\n this.popoverAutoUpdateCleanup = autoUpdate(this.trigger, this.tooltip, () => {\n computePosition(this.trigger, this.tooltip, {\n placement: this.placement,\n strategy: 'fixed',\n middleware: [\n offset(8),\n shift({ padding: 5 }),\n flip(),\n inline(),\n arrow({ element: this.arrow, padding: 5 }),\n ],\n }).then(({ x, y, placement, middlewareData }) => {\n Object.assign(this.tooltip.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n\n if (middlewareData.arrow) {\n const {x: arrowX, y: arrowY} = middlewareData.arrow;\n\n Object.assign(this.arrow.style, {\n left: arrowX != null ? `${arrowX}px` : '',\n top: arrowY != null ? `${arrowY}px` : '',\n });\n\n const arrowFlipDirections = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n };\n const tooltipPlacement = placement.split('-')[0] as keyof typeof arrowFlipDirections;\n const arrowDirection = arrowFlipDirections[tooltipPlacement];\n\n this.arrow.style.setProperty(arrowDirection, '-4px');\n }\n });\n });\n }\n\n /**\n * Shows tooltip\n */\n show() {\n this._visible = true;\n this.setTooltip();\n this.onShow('Show event fired!');\n }\n\n /**\n * Hides tooltip\n */\n hide() {\n this._visible = false;\n this.onHide('Hide event fired!');\n }\n\n /**\n * Gives the visibility status of the tooltip\n */\n get visible(): boolean {\n return this._visible;\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n if (this._visible && event.key === 'Escape') {\n event.stopPropagation();\n this.hide();\n }\n }\n\n render(): TemplateResult {\n const classes = classMap({\n tooltip: true,\n visible: this._visible,\n });\n\n return html`<slot\n class=\"trigger\"\n name=\"tooltip-trigger\"\n aria-describedby=\"tooltip\"\n @focus=${{ handleEvent: () => this.show(), capture: true }}\n @blur=${{ handleEvent: () => this.hide(), capture: true }}\n @mouseover=${() => this.show()}\n @mouseleave=${() => this.hide()}\n >\n </slot>\n <div class=${classes}>\n <slot id=\"tooltip\" role=\"tooltip\" aria-live=${this._visible ? 'polite' : 'off'}></slot>\n <div class=\"arrow\" aria-hidden=\"true\"></div>\n </div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bl-tooltip': BlTooltip;\n }\n}\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
|
-
"names": ["styles", "i", "bl_tooltip_default", "BlTooltip", "s", "bl_tooltip_default", "
|
|
6
|
+
"names": ["styles", "i", "bl_tooltip_default", "BlTooltip", "s", "bl_tooltip_default", "P", "z", "O", "D", "b", "T", "u", "x", "y", "placement", "middlewareData", "arrowX", "arrowY", "arrowFlipDirections", "tooltipPlacement", "arrowDirection", "event", "classes", "o", "__decorateClass", "e", "t"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as h}from"./chunk-KQBXYF3J.js";import{b as y,
|
|
1
|
+
import{a as h}from"./chunk-KQBXYF3J.js";import{b as y,d as g,f as k,g as w,h as x}from"./chunk-ANYJUR6Q.js";import{a as f}from"./chunk-OLPYXE2P.js";import{a as l}from"./chunk-KPAWUBRO.js";import{a as s}from"./chunk-23UFIOHV.js";import{a,b as d,f as c,g as u,h as r,i as b,j as n}from"./chunk-57PTZNIL.js";import{a as e}from"./chunk-NZ3RGSR6.js";var O=a`:host{position:relative;display:inline-block}.popover{--left:0;--top:0;--border-color:var(--bl-color-primary);position:fixed;z-index:1;display:none;flex-direction:column;align-items:flex-start;padding:var(--bl-size-m);gap:var(--bl-size-xs);overflow-y:auto;background:var(--bl-color-primary-background);border:1px solid var(--border-color);box-shadow:0 10px 15px -8px #27314226;border-radius:var(--bl-size-3xs);left:var(--left);top:var(--top);box-sizing:border-box}:host([kind='neutral']) .popover{--border-color:var(--bl-color-secondary)}:host([kind='success']) .popover{--border-color:var(--bl-color-success)}:host([kind='danger']) .popover{--border-color:var(--bl-color-danger)}.visible{display:flex}`,_=O;var m="bl-dropdown",t=class extends c{constructor(){super(...arguments);this._cleanUpPopover=null;this._isPopoverOpen=!1;this.label="Dropdown Button";this.variant="primary";this.kind="default";this.size="medium";this.disabled=!1;this._handleClickOutside=o=>{let p=o.composedPath();!p.includes(this._popover)&&!p.includes(this._dropdownButton)&&this.close()};this.focusedOptionIndex=-1}static get styles(){return[_]}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this._cleanUpPopover&&this._cleanUpPopover(),this.removeEventListener("keydown",this.handleKeyDown)}get opened(){return this._isPopoverOpen}_handleClick(){!this._isPopoverOpen&&!this.disabled?this.open():this.close()}_setupPopover(){this._cleanUpPopover=w(this._dropdownButton,this._popover,()=>{x(this._dropdownButton,this._popover,{placement:"bottom-start",strategy:"fixed",middleware:[y(),g(8),k({apply(o){Object.assign(o.elements.floating.style,{minWidth:`${o.elements.reference.getBoundingClientRect().width}px`})}})]}).then(({x:o,y:p})=>{this._popover.style.setProperty("--left",`${o}px`),this._popover.style.setProperty("--top",`${p}px`)})})}handleKeyDown(o){if(["ArrowDown","ArrowRight"].includes(o.key))this.focusedOptionIndex++;else if(["ArrowUp","ArrowLeft"].includes(o.key))this.focusedOptionIndex--;else if(o.key==="Escape"){this.focusedOptionIndex=-1,this.close();return}else return;this.focusedOptionIndex=Math.max(0,Math.min(this.focusedOptionIndex,this.options.length-1)),this.options[this.focusedOptionIndex].focus(),o.preventDefault()}get options(){return[].slice.call(this.querySelectorAll(v))}open(){this._isPopoverOpen=!0,this._setupPopover(),this.onOpen("Dropdown opened!"),document.addEventListener("click",this._handleClickOutside)}close(){this._isPopoverOpen=!1,this.onClose("Dropdown closed!"),this._cleanUpPopover&&this._cleanUpPopover(),document.removeEventListener("click",this._handleClickOutside)}render(){let o=f({popover:!0,visible:this.opened});return d`<bl-button
|
|
2
2
|
dropdown
|
|
3
3
|
.active=${this.opened}
|
|
4
4
|
?disabled=${l(this.disabled)}
|
|
@@ -18,4 +18,4 @@ import{a as h}from"./chunk-KQBXYF3J.js";import{b as y,c as g,e as k,g as w,h as
|
|
|
18
18
|
@click="${this._handleClick}"
|
|
19
19
|
><slot></slot>
|
|
20
20
|
</bl-button>`}};e([r({type:String})],i.prototype,"icon",2),e([s("bl-dropdown-item-click")],i.prototype,"onClick",2),e([n("[role=menuitem]")],i.prototype,"menuElement",2),i=e([u(v)],i);export{v as a,i as b,m as c,t as d};
|
|
21
|
-
//# sourceMappingURL=chunk-
|
|
21
|
+
//# sourceMappingURL=chunk-VB5RPJV3.js.map
|
|
@@ -3,5 +3,5 @@
|
|
|
3
3
|
"sources": ["../src/components/dropdown/bl-dropdown.css", "../src/components/dropdown/bl-dropdown.ts", "../src/components/dropdown/item/bl-dropdown-item.css", "../src/components/dropdown/item/bl-dropdown-item.ts"],
|
|
4
4
|
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{position:relative;display:inline-block}.popover{--left:0;--top:0;--border-color:var(--bl-color-primary);position:fixed;z-index:1;display:none;flex-direction:column;align-items:flex-start;padding:var(--bl-size-m);gap:var(--bl-size-xs);overflow-y:auto;background:var(--bl-color-primary-background);border:1px solid var(--border-color);box-shadow:0 10px 15px -8px #27314226;border-radius:var(--bl-size-3xs);left:var(--left);top:var(--top);box-sizing:border-box}:host([kind='neutral']) .popover{--border-color:var(--bl-color-secondary)}:host([kind='success']) .popover{--border-color:var(--bl-color-success)}:host([kind='danger']) .popover{--border-color:var(--bl-color-danger)}.visible{display:flex}`;\nexport default styles;\n", "import { LitElement, html, CSSResultGroup, TemplateResult } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport {\n computePosition,\n flip,\n offset,\n autoUpdate,\n size,\n MiddlewareArguments,\n} from '@floating-ui/dom';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport style from './bl-dropdown.css';\n\nimport '../button/bl-button';\nimport { ButtonSize, ButtonVariant, ButtonKind } from '../button/bl-button';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport BlDropdownItem, { blDropdownItemTag } from './item/bl-dropdown-item';\n\nexport type CleanUpFunction = () => void;\n\nexport const blDropdownTag = 'bl-dropdown';\n\n/**\n * @tag bl-dropdown\n * @summary Baklava Dropdown component\n */\n@customElement(blDropdownTag)\nexport default class BlDropdown extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n @query('bl-button')\n private _dropdownButton: HTMLElement;\n\n @query('.popover')\n private _popover: HTMLElement;\n\n private _cleanUpPopover: CleanUpFunction | null = null;\n\n @state() private _isPopoverOpen = false;\n\n /**\n * Sets the dropdown button label\n */\n @property({ type: String, reflect: true })\n label = 'Dropdown Button';\n\n /**\n * Sets the dropdown button variant\n */\n @property({ type: String, reflect: true })\n variant: ButtonVariant = 'primary';\n\n /**\n * Sets the dropdown button kind\n */\n @property({ type: String, reflect: true })\n kind: ButtonKind = 'default';\n\n /**\n * Sets the dropdown button size\n */\n @property({ type: String, reflect: true })\n size: ButtonSize = 'medium';\n\n /**\n * Sets button as disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Fires when dropdown opened\n */\n @event('bl-dropdown-open') private onOpen: EventDispatcher<string>;\n\n /**\n * Fires when dropdown closed\n */\n @event('bl-dropdown-close') private onClose: EventDispatcher<string>;\n\n connectedCallback() {\n super.connectedCallback();\n this.addEventListener('keydown', this.handleKeyDown);\n }\n disconnectedCallback() {\n super.disconnectedCallback();\n\n this._cleanUpPopover && this._cleanUpPopover();\n this.removeEventListener('keydown', this.handleKeyDown);\n }\n\n get opened() {\n return this._isPopoverOpen;\n }\n\n private _handleClick() {\n !this._isPopoverOpen && !this.disabled ? this.open() : this.close();\n }\n\n private _handleClickOutside = (event: MouseEvent) => {\n const eventPath = event.composedPath() as HTMLElement[];\n if (!eventPath.includes(this._popover) && !eventPath.includes(this._dropdownButton)) {\n this.close();\n }\n };\n\n private _setupPopover() {\n this._cleanUpPopover = autoUpdate(this._dropdownButton, this._popover, () => {\n computePosition(this._dropdownButton, this._popover, {\n placement: 'bottom-start',\n strategy: 'fixed',\n middleware: [\n flip(),\n offset(8),\n size({\n apply(args: MiddlewareArguments) {\n Object.assign(args.elements.floating.style, {\n minWidth: `${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 private focusedOptionIndex = -1;\n\n private handleKeyDown(event: KeyboardEvent) {\n // Next action\n if (['ArrowDown', 'ArrowRight'].includes(event.key)) {\n this.focusedOptionIndex++;\n\n // Previous action\n } else if (['ArrowUp', 'ArrowLeft'].includes(event.key)) {\n this.focusedOptionIndex--;\n // Select action\n } else if (event.key === 'Escape') {\n this.focusedOptionIndex = -1;\n this.close()\n return;\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.options.length - 1)\n );\n\n this.options[this.focusedOptionIndex].focus();\n\n event.preventDefault();\n }\n\n get options(): BlDropdownItem[] {\n return [].slice.call(this.querySelectorAll(blDropdownItemTag));\n }\n\n open() {\n this._isPopoverOpen = true;\n this._setupPopover();\n this.onOpen('Dropdown opened!');\n document.addEventListener('click', this._handleClickOutside);\n }\n\n close() {\n this._isPopoverOpen = false;\n this.onClose('Dropdown closed!');\n this._cleanUpPopover && this._cleanUpPopover();\n document.removeEventListener('click', this._handleClickOutside);\n }\n\n render(): TemplateResult {\n const popoverClasses = classMap({\n popover: true,\n visible: this.opened,\n });\n\n return html`<bl-button\n dropdown\n .active=${this.opened}\n ?disabled=${ifDefined(this.disabled)}\n variant=\"${this.variant}\"\n kind=\"${this.kind}\"\n size=\"${this.size}\"\n aria-label=\"${ifDefined(this.label)}\"\n @bl-click=\"${this._handleClick}\"\n >\n ${this.label}\n </bl-button>\n <div class=\"${popoverClasses}\" role=\"menu\" aria-expanded=\"${this.opened}\"><slot></slot></div> `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [blDropdownTag]: BlDropdown;\n }\n}\n", "import {css} from 'lit';\nexport const styles = css`:host{width:100%;--bl-button-display:block;--bl-button-justify:start}`;\nexport default styles;\n", "import { LitElement, html, CSSResultGroup, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { event, EventDispatcher } from '../../../utilities/event';\nimport type BlDropdownGroup from '../group/bl-dropdown-group';\nimport type BlDropdown from '../bl-dropdown';\n\nimport { blDropdownGroupTag } from '../group/bl-dropdown-group';\nimport { blDropdownTag } from '../bl-dropdown';\n\nimport style from './bl-dropdown-item.css';\n\nimport '../../button/bl-button';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport BlButton from '../../button/bl-button';\n\nexport const blDropdownItemTag = 'bl-dropdown-item';\n\n/**\n * @tag bl-dropdown-item\n * @summary Baklava Dropdown Item component\n */\n@customElement(blDropdownItemTag)\nexport default class BlDropdownItem extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets the icon name. Shows icon with bl-icon component\n */\n\n @property({ type: String })\n icon?: string;\n\n @event('bl-dropdown-item-click') private onClick: EventDispatcher<string>;\n\n private _handleClick() {\n this.onClick('Action clicked!');\n }\n\n @query('[role=menuitem]') private menuElement: BlButton;\n\n /**\n * Focuses this action\n */\n focus() {\n this.menuElement.focus();\n }\n\n private BlDropdownGroupField: BlDropdownGroup | null;\n private BlDropdownField: BlDropdown | null;\n\n connectedCallback(): void {\n super.connectedCallback();\n\n this.BlDropdownGroupField = this.closest<BlDropdownGroup>(blDropdownGroupTag);\n this.BlDropdownField = this.closest<BlDropdown>(blDropdownTag);\n\n if (!this.BlDropdownField && !this.BlDropdownGroupField) {\n console.warn(`bl-dropdown-item is designed to be used inside a ${blDropdownGroupTag} or ${blDropdownTag}`, this);\n }\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n }\n\n render(): TemplateResult {\n return html`<bl-button\n variant=\"tertiary\"\n kind=\"neutral\"\n icon=\"${ifDefined(this.icon)}\"\n role=\"menuitem\"\n @click=\"${this._handleClick}\"\n ><slot></slot>\n </bl-button>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [blDropdownItemTag]: BlDropdownItem;\n }\n}\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
|
-
"names": ["styles", "i", "bl_dropdown_default", "blDropdownTag", "BlDropdown", "s", "event", "eventPath", "bl_dropdown_default", "
|
|
6
|
+
"names": ["styles", "i", "bl_dropdown_default", "blDropdownTag", "BlDropdown", "s", "event", "eventPath", "bl_dropdown_default", "P", "z", "b", "O", "args", "x", "y", "blDropdownItemTag", "popoverClasses", "o", "__decorateClass", "i", "t", "e", "styles", "i", "bl_dropdown_item_default", "blDropdownItemTag", "BlDropdownItem", "s", "bl_dropdown_item_default", "blDropdownGroupTag", "blDropdownTag", "y", "__decorateClass", "e", "event", "i"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{c as a,d as b}from"../../chunk-
|
|
1
|
+
import{c as a,d as b}from"../../chunk-VB5RPJV3.js";import"../../chunk-KQBXYF3J.js";import"../../chunk-ANYJUR6Q.js";import"../../chunk-MCWRM3WC.js";import"../../chunk-OLPYXE2P.js";import"../../chunk-KPAWUBRO.js";import"../../chunk-F3ZH5IV7.js";import"../../chunk-RLMJN536.js";import"../../chunk-23UFIOHV.js";import"../../chunk-57PTZNIL.js";import"../../chunk-NZ3RGSR6.js";export{a as blDropdownTag,b as default};
|
|
2
2
|
//# sourceMappingURL=bl-dropdown.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a,b}from"../../../chunk-
|
|
1
|
+
import{a,b}from"../../../chunk-VB5RPJV3.js";import"../../../chunk-KQBXYF3J.js";import"../../../chunk-ANYJUR6Q.js";import"../../../chunk-MCWRM3WC.js";import"../../../chunk-OLPYXE2P.js";import"../../../chunk-KPAWUBRO.js";import"../../../chunk-F3ZH5IV7.js";import"../../../chunk-RLMJN536.js";import"../../../chunk-23UFIOHV.js";import"../../../chunk-57PTZNIL.js";import"../../../chunk-NZ3RGSR6.js";export{a as blDropdownItemTag,b as default};
|
|
2
2
|
//# sourceMappingURL=bl-dropdown-item.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a}from"../../chunk-J774WKKH.js";import"../../chunk-
|
|
1
|
+
import{a}from"../../chunk-J774WKKH.js";import"../../chunk-GT47M6BF.js";import"../../chunk-THIPCHAK.js";import"../../chunk-2FBI46AY.js";import"../../chunk-RST5NVHY.js";import"../../chunk-3B64VOWB.js";import"../../chunk-ANYJUR6Q.js";import"../../chunk-EPJ347EQ.js";import"../../chunk-DJOD4BTL.js";import"../../chunk-MCWRM3WC.js";import"../../chunk-OLPYXE2P.js";import"../../chunk-KPAWUBRO.js";import"../../chunk-F3ZH5IV7.js";import"../../chunk-RLMJN536.js";import"../../chunk-23UFIOHV.js";import"../../chunk-57PTZNIL.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
|
|
2
2
|
//# sourceMappingURL=bl-pagination.js.map
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
|
|
2
|
+
export declare type Placement = 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end';
|
|
3
|
+
/**
|
|
4
|
+
* @tag bl-popover
|
|
5
|
+
* @summary Baklava Popover component
|
|
6
|
+
*
|
|
7
|
+
* @cssproperty [--bl-popover-arrow-display=none] - Sets the display of popovers arrow. Set as `block` to make arrow visible.
|
|
8
|
+
* @cssproperty [--bl-popover-background-color=--bl-color-primary-background] - Sets the background color of popover.
|
|
9
|
+
* @cssproperty [--bl-popover-border-color=--bl-color-primary-hover] - Sets the border color of popover.
|
|
10
|
+
* @cssproperty [--bl-popover-padding=--bl-size-m] - Sets the padding of popover.
|
|
11
|
+
* @cssproperty [--bl-popover-border-radius=--bl-size-3xs] - Sets the border radius of popover.
|
|
12
|
+
* @cssproperty [--bl-popover-position=fixed] - Sets the position of popover. You can set it to `absolute` if parent element is a fixed positioned element like drawer or dialog.
|
|
13
|
+
*/
|
|
14
|
+
export default class BlPopover extends LitElement {
|
|
15
|
+
static get styles(): CSSResultGroup;
|
|
16
|
+
private popover;
|
|
17
|
+
private arrow;
|
|
18
|
+
/**
|
|
19
|
+
* Sets placement of the popover
|
|
20
|
+
*/
|
|
21
|
+
placement: Placement;
|
|
22
|
+
/**
|
|
23
|
+
* Target elements state
|
|
24
|
+
*/
|
|
25
|
+
_target: string | Element;
|
|
26
|
+
/**
|
|
27
|
+
* Sets size of popover same as trigger element
|
|
28
|
+
*/
|
|
29
|
+
fitSize: boolean;
|
|
30
|
+
/**
|
|
31
|
+
* Sets the distance between popover and target/trigger element
|
|
32
|
+
*/
|
|
33
|
+
offset: number;
|
|
34
|
+
/**
|
|
35
|
+
* Visibility state
|
|
36
|
+
*/
|
|
37
|
+
private _visible;
|
|
38
|
+
/**
|
|
39
|
+
* Fires when the popover is shown
|
|
40
|
+
*/
|
|
41
|
+
private onBlPopoverShow;
|
|
42
|
+
/**
|
|
43
|
+
* Fires when popover becomes hidden
|
|
44
|
+
*/
|
|
45
|
+
private onBlPopoverHide;
|
|
46
|
+
connectedCallback(): void;
|
|
47
|
+
disconnectedCallback(): void;
|
|
48
|
+
private getMiddleware;
|
|
49
|
+
private _handleClickOutside;
|
|
50
|
+
private popoverAutoUpdateCleanup;
|
|
51
|
+
private setPopover;
|
|
52
|
+
/**
|
|
53
|
+
* Sets the target element of the popover to align and trigger.
|
|
54
|
+
* It can be a string id of the target element or can be a direct Element reference of it.
|
|
55
|
+
*/
|
|
56
|
+
get target(): string | Element;
|
|
57
|
+
set target(value: string | Element);
|
|
58
|
+
/**
|
|
59
|
+
* Shows popover
|
|
60
|
+
*/
|
|
61
|
+
show(): void;
|
|
62
|
+
/**
|
|
63
|
+
* Hides popover
|
|
64
|
+
*/
|
|
65
|
+
hide(): void;
|
|
66
|
+
/**
|
|
67
|
+
* Gives the visibility status of the popover
|
|
68
|
+
*/
|
|
69
|
+
get visible(): boolean;
|
|
70
|
+
private _handlePopoverShowEvent;
|
|
71
|
+
private _handleKeyupEvent;
|
|
72
|
+
render(): TemplateResult;
|
|
73
|
+
}
|
|
74
|
+
declare global {
|
|
75
|
+
interface HTMLElementTagNameMap {
|
|
76
|
+
'bl-popover': BlPopover;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
//# sourceMappingURL=bl-popover.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bl-popover.d.ts","sourceRoot":"","sources":["../../../src/components/popover/bl-popover.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAkBvE,oBAAY,SAAS,GACjB,WAAW,GACX,KAAK,GACL,SAAS,GACT,cAAc,GACd,QAAQ,GACR,YAAY,GACZ,YAAY,GACZ,MAAM,GACN,UAAU,GACV,aAAa,GACb,OAAO,GACP,WAAW,CAAC;AAEhB;;;;;;;;;;GAUG;AAEH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,UAAU;IAC/C,MAAM,KAAK,MAAM,IAAI,cAAc,CAElC;IAEkB,OAAO,CAAC,OAAO,CAAc;IAC/B,OAAO,CAAC,KAAK,CAAc;IAE5C;;OAEG;IAEH,SAAS,EAAE,SAAS,CAAY;IAEhC;;OAEG;IACM,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC;IAGnC;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,MAAM,SAAK;IAEX;;OAEG;IACM,OAAO,CAAC,QAAQ,CAAS;IAElC;;OAEG;IACuB,OAAO,CAAC,eAAe,CAA0B;IAE3E;;OAEG;IACuB,OAAO,CAAC,eAAe,CAA0B;IAE3E,iBAAiB;IAQjB,oBAAoB;IAMpB,OAAO,CAAC,aAAa;IAuBrB,OAAO,CAAC,mBAAmB,CAKzB;IAEF,OAAO,CAAC,wBAAwB,CAAa;IAE7C,OAAO,CAAC,UAAU;IA4ClB;;;OAGG;IACH,IACI,MAAM,IAAI,MAAM,GAAG,OAAO,CAE7B;IAED,IAAI,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,EAUjC;IAED;;OAEG;IACH,IAAI;IASJ;;OAEG;IACH,IAAI;IAQJ;;OAEG;IACH,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,OAAO,CAAC,uBAAuB;IAM/B,OAAO,CAAC,iBAAiB;IAOzB,MAAM,IAAI,cAAc;CAWzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{a}from"../../chunk-54ROO7JA.js";import"../../chunk-ANYJUR6Q.js";import"../../chunk-OLPYXE2P.js";import"../../chunk-RLMJN536.js";import"../../chunk-23UFIOHV.js";import"../../chunk-57PTZNIL.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
|
|
2
|
+
//# sourceMappingURL=bl-popover.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bl-popover.test.d.ts","sourceRoot":"","sources":["../../../src/components/popover/bl-popover.test.ts"],"names":[],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bl-select.d.ts","sourceRoot":"","sources":["../../../src/components/select/bl-select.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"bl-select.d.ts","sourceRoot":"","sources":["../../../src/components/select/bl-select.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a}from"../../chunk-
|
|
1
|
+
import{a}from"../../chunk-GT47M6BF.js";import"../../chunk-THIPCHAK.js";import"../../chunk-3B64VOWB.js";import"../../chunk-ANYJUR6Q.js";import"../../chunk-DJOD4BTL.js";import"../../chunk-OLPYXE2P.js";import"../../chunk-KPAWUBRO.js";import"../../chunk-F3ZH5IV7.js";import"../../chunk-RLMJN536.js";import"../../chunk-23UFIOHV.js";import"../../chunk-57PTZNIL.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
|
|
2
2
|
//# sourceMappingURL=bl-select.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a}from"../../chunk-
|
|
1
|
+
import{a}from"../../chunk-K5PH753D.js";import"../../chunk-ANYJUR6Q.js";import"../../chunk-OLPYXE2P.js";import"../../chunk-RLMJN536.js";import"../../chunk-23UFIOHV.js";import"../../chunk-57PTZNIL.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
|
|
2
2
|
//# sourceMappingURL=bl-tooltip.js.map
|