@kyndryl-design-system/shidoka-applications 2.43.0 → 2.43.2
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/components/reusable/checkbox/checkboxSubgroup.d.ts.map +1 -1
- package/components/reusable/checkbox/checkboxSubgroup.js +3 -3
- package/components/reusable/checkbox/checkboxSubgroup.js.map +1 -1
- package/components/reusable/dropdown/dropdown.d.ts.map +1 -1
- package/components/reusable/dropdown/dropdown.js +7 -4
- package/components/reusable/dropdown/dropdown.js.map +1 -1
- package/components/reusable/dropdown/dropdownOption.d.ts.map +1 -1
- package/components/reusable/dropdown/dropdownOption.js +6 -5
- package/components/reusable/dropdown/dropdownOption.js.map +1 -1
- package/components/reusable/sideDrawer/sideDrawer.js +2 -2
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkboxSubgroup.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/checkbox/checkboxSubgroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC;;;;GAIG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,MAAU;IAEhC,gBAAgB;IAEhB,OAAO,EAAG,GAAG,CAAC;IAEd,gBAAgB;IAEhB,SAAS,
|
|
1
|
+
{"version":3,"file":"checkboxSubgroup.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/checkbox/checkboxSubgroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC;;;;GAIG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,MAAU;IAEhC,gBAAgB;IAEhB,OAAO,EAAG,GAAG,CAAC;IAEd,gBAAgB;IAEhB,SAAS,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEd,MAAM;IAWf,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,qBAAqB;IA+CpB,iBAAiB;IASjB,oBAAoB;CAO9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,gBAAgB,CAAC;KAC3C;CACF"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{l as t,e as n}from"../../../vendor/lit-461e78e6.js";import{i as c,s as h,x as l}from"../../../vendor/lit-element-c6c02f24.js";var
|
|
1
|
+
import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{l as t,e as n}from"../../../vendor/lit-461e78e6.js";import{i as c,s as h,x as l}from"../../../vendor/lit-element-c6c02f24.js";var a=c`*,
|
|
2
2
|
*::before,
|
|
3
3
|
*::after {
|
|
4
4
|
box-sizing: border-box;
|
|
@@ -18,12 +18,12 @@ slot[name=parent] {
|
|
|
18
18
|
|
|
19
19
|
.children {
|
|
20
20
|
padding-left: 26px;
|
|
21
|
-
}`;let
|
|
21
|
+
}`;let o=class extends h{render(){return l`
|
|
22
22
|
<div class="toggle-button">
|
|
23
23
|
<slot name="parent" @slotchange=${this._handleSlotchange}></slot>
|
|
24
24
|
<div class="children">
|
|
25
25
|
<slot @slotchange=${this._handleSlotchange}></slot>
|
|
26
26
|
</div>
|
|
27
27
|
</div>
|
|
28
|
-
`}_handleSlotchange(){const e=this._children.filter((e=>e.checked)).length;this._syncParent(e)}_syncParent(e){this._parent[0].indeterminate=e<this._children.length&&e>0}_handleCheckboxChange(e){e.stopPropagation();const t=e.composedPath().find((e=>"SLOT"===e.nodeName&&"parent"===e.getAttribute("name")));let n=this._children.filter((e=>e.checked)).length;t?n=e.detail.checked?this._children.length:0:e.detail.checked?n+=1:n-=1,this._syncParent(n);const c=this._children.map((e=>e.value)),h=this._children.length>0&&n===this._children.length,l=new CustomEvent("on-checkbox-subgroup-change",{bubbles:!0,composed:!0,detail:{isParent:t,parentChecked:h,parentValue:this._parent[0].value,checked:e.detail.checked,value:e.detail.value,childValues:c}});this.dispatchEvent(l)}connectedCallback(){super.connectedCallback(),this.addEventListener("on-checkbox-change",(e=>this._handleCheckboxChange(e)))}disconnectedCallback(){this.removeEventListener("on-checkbox-change",(e=>this._handleCheckboxChange(e))),super.disconnectedCallback()}};
|
|
28
|
+
`}_handleSlotchange(){const e=this._children.filter((e=>e.checked)).length;this._syncParent(e)}_syncParent(e){this._parent[0].indeterminate=e<this._children.length&&e>0}_handleCheckboxChange(e){e.stopPropagation();const t=e.composedPath().find((e=>"SLOT"===e.nodeName&&"parent"===e.getAttribute("name")));let n=this._children.filter((e=>e.checked)).length;t?n=e.detail.checked?this._children.length:0:e.detail.checked?n+=1:n-=1,this._syncParent(n);const c=this._children.map((e=>e.value)),h=this._children.length>0&&n===this._children.length,l=new CustomEvent("on-checkbox-subgroup-change",{bubbles:!0,composed:!0,detail:{isParent:t,parentChecked:h,parentValue:this._parent[0].value,checked:e.detail.checked,value:e.detail.value,childValues:c}});this.dispatchEvent(l)}connectedCallback(){super.connectedCallback(),this.addEventListener("on-checkbox-change",(e=>this._handleCheckboxChange(e)))}disconnectedCallback(){this.removeEventListener("on-checkbox-change",(e=>this._handleCheckboxChange(e))),super.disconnectedCallback()}};o.styles=a,e([t({slot:"parent",selector:"kyn-checkbox"})],o.prototype,"_parent",void 0),e([t({selector:"kyn-checkbox"})],o.prototype,"_children",void 0),o=e([n("kyn-checkbox-subgroup")],o);export{o as CheckboxSubgroup};
|
|
29
29
|
//# sourceMappingURL=checkboxSubgroup.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkboxSubgroup.js","sources":["../../../../src/components/reusable/checkbox/checkboxSubgroup.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, queryAssignedElements } from 'lit/decorators.js';\nimport Styles from './checkboxSubgroup.scss';\n\n/**\n * Checkbox subgroup\n * @slot unnamed - Slot for child kyn-checkboxes.\n * @slot parent - Slot for parent kyn-checkbox.\n */\n@customElement('kyn-checkbox-subgroup')\nexport class CheckboxSubgroup extends LitElement {\n static override styles = Styles;\n\n /** @internal */\n @queryAssignedElements({ slot: 'parent', selector: 'kyn-checkbox' })\n _parent!: any;\n\n /** @internal */\n @queryAssignedElements({ selector: 'kyn-checkbox' })\n _children
|
|
1
|
+
{"version":3,"file":"checkboxSubgroup.js","sources":["../../../../src/components/reusable/checkbox/checkboxSubgroup.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, queryAssignedElements } from 'lit/decorators.js';\nimport Styles from './checkboxSubgroup.scss';\n\n/**\n * Checkbox subgroup\n * @slot unnamed - Slot for child kyn-checkboxes.\n * @slot parent - Slot for parent kyn-checkbox.\n */\n@customElement('kyn-checkbox-subgroup')\nexport class CheckboxSubgroup extends LitElement {\n static override styles = Styles;\n\n /** @internal */\n @queryAssignedElements({ slot: 'parent', selector: 'kyn-checkbox' })\n _parent!: any;\n\n /** @internal */\n @queryAssignedElements({ selector: 'kyn-checkbox' })\n _children!: Array<any>;\n\n override render() {\n return html`\n <div class=\"toggle-button\">\n <slot name=\"parent\" @slotchange=${this._handleSlotchange}></slot>\n <div class=\"children\">\n <slot @slotchange=${this._handleSlotchange}></slot>\n </div>\n </div>\n `;\n }\n\n private _handleSlotchange() {\n const CheckedBoxesCount = this._children.filter(\n (checkbox) => checkbox.checked\n ).length;\n\n this._syncParent(CheckedBoxesCount);\n }\n\n private _syncParent(count: number) {\n // sync Parent indeterminate state\n this._parent[0].indeterminate = count < this._children.length && count > 0;\n }\n\n private _handleCheckboxChange(e: any) {\n e.stopPropagation();\n\n const isParent = e\n .composedPath()\n .find(\n (el: HTMLElement) =>\n el.nodeName === 'SLOT' && el.getAttribute('name') === 'parent'\n );\n let checkedBoxesCount = this._children.filter(\n (checkbox) => checkbox.checked\n ).length;\n\n if (isParent) {\n checkedBoxesCount = e.detail.checked ? this._children.length : 0;\n } else {\n if (e.detail.checked) {\n checkedBoxesCount += 1;\n } else {\n checkedBoxesCount -= 1;\n }\n }\n\n this._syncParent(checkedBoxesCount);\n\n const ChildValues = this._children.map((checkbox) => {\n return checkbox.value;\n });\n\n const ParentChecked =\n this._children.length > 0 && checkedBoxesCount === this._children.length;\n\n const event = new CustomEvent('on-checkbox-subgroup-change', {\n bubbles: true,\n composed: true,\n detail: {\n isParent: isParent,\n parentChecked: ParentChecked,\n parentValue: this._parent[0].value,\n checked: e.detail.checked,\n value: e.detail.value,\n childValues: ChildValues,\n },\n });\n this.dispatchEvent(event);\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n // capture child checkboxes change event\n this.addEventListener('on-checkbox-change', (e: any) =>\n this._handleCheckboxChange(e)\n );\n }\n\n override disconnectedCallback() {\n this.removeEventListener('on-checkbox-change', (e: any) =>\n this._handleCheckboxChange(e)\n );\n\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-checkbox-subgroup': CheckboxSubgroup;\n }\n}\n"],"names":["CheckboxSubgroup","LitElement","render","html","this","_handleSlotchange","CheckedBoxesCount","_children","filter","checkbox","checked","length","_syncParent","count","_parent","indeterminate","_handleCheckboxChange","e","stopPropagation","isParent","composedPath","find","el","nodeName","getAttribute","checkedBoxesCount","detail","ChildValues","map","value","ParentChecked","event","CustomEvent","bubbles","composed","parentChecked","parentValue","childValues","dispatchEvent","connectedCallback","super","addEventListener","disconnectedCallback","removeEventListener","styles","Styles","__decorate","queryAssignedElements","slot","selector","prototype","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;GAUO,IAAMA,EAAN,cAA+BC,EAW3B,MAAAC,GACP,OAAOC,CAAI;;0CAE2BC,KAAKC;;8BAEjBD,KAAKC;;;KAIhC,CAEO,iBAAAA,GACN,MAAMC,EAAoBF,KAAKG,UAAUC,QACtCC,GAAaA,EAASC,UACvBC,OAEFP,KAAKQ,YAAYN,EAClB,CAEO,WAAAM,CAAYC,GAElBT,KAAKU,QAAQ,GAAGC,cAAgBF,EAAQT,KAAKG,UAAUI,QAAUE,EAAQ,CAC1E,CAEO,qBAAAG,CAAsBC,GAC5BA,EAAEC,kBAEF,MAAMC,EAAWF,EACdG,eACAC,MACEC,GACiB,SAAhBA,EAAGC,UAAmD,WAA5BD,EAAGE,aAAa,UAEhD,IAAIC,EAAoBrB,KAAKG,UAAUC,QACpCC,GAAaA,EAASC,UACvBC,OAEEQ,EACFM,EAAoBR,EAAES,OAAOhB,QAAUN,KAAKG,UAAUI,OAAS,EAE3DM,EAAES,OAAOhB,QACXe,GAAqB,EAErBA,GAAqB,EAIzBrB,KAAKQ,YAAYa,GAEjB,MAAME,EAAcvB,KAAKG,UAAUqB,KAAKnB,GAC/BA,EAASoB,QAGZC,EACJ1B,KAAKG,UAAUI,OAAS,GAAKc,IAAsBrB,KAAKG,UAAUI,OAE9DoB,EAAQ,IAAIC,YAAY,8BAA+B,CAC3DC,SAAS,EACTC,UAAU,EACVR,OAAQ,CACNP,SAAUA,EACVgB,cAAeL,EACfM,YAAahC,KAAKU,QAAQ,GAAGe,MAC7BnB,QAASO,EAAES,OAAOhB,QAClBmB,MAAOZ,EAAES,OAAOG,MAChBQ,YAAaV,KAGjBvB,KAAKkC,cAAcP,EACpB,CAEQ,iBAAAQ,GACPC,MAAMD,oBAGNnC,KAAKqC,iBAAiB,sBAAuBxB,GAC3Cb,KAAKY,sBAAsBC,IAE9B,CAEQ,oBAAAyB,GACPtC,KAAKuC,oBAAoB,sBAAuB1B,GAC9Cb,KAAKY,sBAAsBC,KAG7BuB,MAAME,sBACP,GAhGe1C,EAAM4C,OAAGC,EAIzBC,EAAA,CADCC,EAAsB,CAAEC,KAAM,SAAUC,SAAU,kBACrCjD,EAAAkD,UAAA,eAAA,GAIdJ,EAAA,CADCC,EAAsB,CAAEE,SAAU,kBACZjD,EAAAkD,UAAA,iBAAA,GATZlD,EAAgB8C,EAAA,CAD5BK,EAAc,0BACFnD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAavC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,QAAQ,CAAC;AAChB,OAAO,WAAW,CAAC;;AAwBnB;;;;;;;;;GASG;AACH,qBACa,QAAS,SAAQ,aAAqB;IACjD,OAAgB,MAAM,MAAgB;IAEtC,kBAAkB;IAElB,KAAK,SAAM;IAEX,iDAAiD;IAEjD,IAAI,SAAQ;IAEZ,kCAAkC;IAElC,MAAM,UAAS;IAEf,uCAAuC;IAEvC,OAAO,SAAM;IAEb,4BAA4B;IAE5B,WAAW,SAAM;IAEjB,iCAAiC;IAEjC,IAAI,UAAS;IAEb,qCAAqC;IAErC,UAAU,UAAS;IAEnB,0CAA0C;IAE1C,YAAY,UAAS;IAErB,0CAA0C;IAE1C,QAAQ,UAAS;IAEjB,mCAAmC;IAEnC,QAAQ,UAAS;IAEjB,+BAA+B;IAE/B,SAAS,UAAS;IAElB,+BAA+B;IAE/B,QAAQ,UAAS;IAEjB,wCAAwC;IAExC,QAAQ,UAAS;IAEjB,wEAAwE;IAExE,SAAS,UAAS;IAElB,uCAAuC;IAEvC,aAAa,SAAgB;IAE7B,gCAAgC;IAEhC,YAAY,SAAa;IAEzB,8CAA8C;IAE9C,aAAa,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,CAAU;IAE/C;;OAEG;IAEH,gBAAgB,UAAS;IAEzB;;OAEG;IAEH,sBAAsB,UAAS;IAE/B,iCAAiC;IAEjC,WAAW;;;;;;;;;MAAuB;IAElC,4CAA4C;IAE5C,cAAc,UAAS;IAEvB;;OAEG;IAEH,YAAY;;;;;;;;;MAAuB;IAEnC;;;OAGG;IAEH,cAAc,SAAM;IAEpB;;;OAGG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,UAAU,SAAM;IAEhB;;;OAGG;IAEH,aAAa,SAA4B;IAEzC;;;OAGG;IAEH,OAAO,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAErB;;;OAGG;IAEH,eAAe,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAE7B;;;OAGG;IAEH,QAAQ,EAAG,gBAAgB,CAAC;IAE5B;;;OAGG;IAEH,QAAQ,EAAG,WAAW,CAAC;IAEvB;;;OAGG;IAEH,SAAS,EAAG,WAAW,CAAC;IAExB;;;OAGG;IAEH,eAAe,EAAG,WAAW,CAAC;IAE9B;;;OAGG;IAEH,gBAAgB,EAAG,gBAAgB,CAAC;IAEpC;;;OAGG;IAEH,YAAY,UAAS;IAErB;;;OAGG;IAEH,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAM;IAE1B;;OAEG;IACH,iBAAiB,EAAE,GAAG,CAAS;IAE/B;;OAEG;IACH,sBAAsB,SAAM;IAEnB,MAAM;
|
|
1
|
+
{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"names":[],"mappings":"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"}
|
|
@@ -577,9 +577,6 @@ slot[name=icon]::slotted(*) {
|
|
|
577
577
|
opacity: 0;
|
|
578
578
|
z-index: -1;
|
|
579
579
|
}
|
|
580
|
-
.options input::placeholder {
|
|
581
|
-
color: var(--kd-color-text-variant-placeholder);
|
|
582
|
-
}
|
|
583
580
|
.options.upwards {
|
|
584
581
|
transform-origin: bottom;
|
|
585
582
|
top: auto;
|
|
@@ -728,6 +725,10 @@ kyn-tag-group {
|
|
|
728
725
|
.add-option kyn-button {
|
|
729
726
|
flex-shrink: 0;
|
|
730
727
|
margin-left: auto;
|
|
728
|
+
}
|
|
729
|
+
|
|
730
|
+
.placeholder-text {
|
|
731
|
+
color: var(--kd-color-text-variant-placeholder);
|
|
731
732
|
}`;const b={title:"Dropdown",selectedOptions:"List of selected options",requiredText:"Required",errorText:"Error",clearAll:"Clear all",clear:"Clear",addItem:"Add item...",add:"Add"},x="Enter",f="Escape",k="ArrowDown",y="ArrowUp";let w=class extends(p(h)){constructor(){super(...arguments),this.label="",this.size="md",this.inline=!1,this.caption="",this.placeholder="",this.open=!1,this.searchable=!1,this.filterSearch=!1,this.multiple=!1,this.required=!1,this.hideLabel=!1,this.disabled=!1,this.hideTags=!1,this.selectAll=!1,this.selectAllText="Select all",this.menuMinWidth="initial",this.openDirection="auto",this.selectAllChecked=!1,this.selectAllIndeterminate=!1,this.textStrings=b,this.allowAddOption=!1,this._textStrings=b,this.newOptionValue="",this.text="",this.searchText="",this.assistiveText="Dropdown menu options.",this._openUpwards=!1,this._tags=[],this.searchTextEntered=!1,this.prevSearchKeydownIndex=-1}render(){var e;return d`
|
|
732
733
|
<div
|
|
733
734
|
class="dropdown"
|
|
@@ -804,7 +805,9 @@ kyn-tag-group {
|
|
|
804
805
|
@click=${e=>this.handleSearchClick(e)}
|
|
805
806
|
/>
|
|
806
807
|
`:d`
|
|
807
|
-
<span
|
|
808
|
+
<span
|
|
809
|
+
class="${i({"placeholder-text":""===this.text})}"
|
|
810
|
+
>
|
|
808
811
|
${this.multiple||""===this.value?this.placeholder:this.text}
|
|
809
812
|
</span>
|
|
810
813
|
`}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.js","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html } from 'lit';\nimport {\n customElement,\n property,\n state,\n query,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport DropdownScss from './dropdown.scss';\nimport { FormMixin } from '../../../common/mixins/form-input';\nimport { deepmerge } from 'deepmerge-ts';\n\nimport './dropdownOption';\nimport '../tag';\nimport '../button';\n\nimport downIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-down.svg';\nimport errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/error-filled.svg';\nimport clearIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/close-simple.svg';\n\nconst _defaultTextStrings = {\n title: 'Dropdown',\n selectedOptions: 'List of selected options',\n requiredText: 'Required',\n errorText: 'Error',\n clearAll: 'Clear all',\n clear: 'Clear',\n addItem: 'Add item...',\n add: 'Add',\n};\n\nconst KEY = {\n Enter: 'Enter',\n Escape: 'Escape',\n ArrowDown: 'ArrowDown',\n ArrowUp: 'ArrowUp',\n} as const;\n\n/**\n * Dropdown, single select.\n * @fires on-change - Captures the input event and emits the selected value and original event details.\n * @fires on-search - Capture the search input event and emits the search text.\n * @fires on-clear-all - Captures the the multi-select clear all button click event and emits the value.\n * @fires on-add-option - Captures the add button click and emits the newly added option.\n * @fires on-clear-all - Captures the the multi-select clear all button click event and emits the value.\n * @slot unnamed - Slot for dropdown options.\n * @slot tooltip - Slot for tooltip.\n */\n@customElement('kyn-dropdown')\nexport class Dropdown extends FormMixin(LitElement) {\n static override styles = DropdownScss;\n\n /** Label text. */\n @property({ type: String })\n label = '';\n\n /** Dropdown size/height. \"sm\", \"md\", or \"lg\". */\n @property({ type: String })\n size = 'md';\n\n /** Dropdown inline style type. */\n @property({ type: Boolean })\n inline = false;\n\n /** Optional text beneath the input. */\n @property({ type: String })\n caption = '';\n\n /** Dropdown placeholder. */\n @property({ type: String })\n placeholder = '';\n\n /** Listbox/drawer open state. */\n @property({ type: Boolean })\n open = false;\n\n /** Makes the dropdown searchable. */\n @property({ type: Boolean })\n searchable = false;\n\n /** Searchable variant filters results. */\n @property({ type: Boolean })\n filterSearch = false;\n\n /** Enabled multi-select functionality. */\n @property({ type: Boolean })\n multiple = false;\n\n /** Makes the dropdown required. */\n @property({ type: Boolean })\n required = false;\n\n /** Visually hide the label. */\n @property({ type: Boolean })\n hideLabel = false;\n\n /** Dropdown disabled state. */\n @property({ type: Boolean })\n disabled = false;\n\n /** Hide the tags below multi-select. */\n @property({ type: Boolean })\n hideTags = false;\n\n /** Adds a \"Select all\" option to the top of a multi-select dropdown. */\n @property({ type: Boolean })\n selectAll = false;\n\n /** \"Select all\" text customization. */\n @property({ type: String })\n selectAllText = 'Select all';\n\n /** Menu CSS min-width value. */\n @property({ type: String })\n menuMinWidth = 'initial';\n\n /** Controls direction that dropdown opens. */\n @property({ type: String })\n openDirection: 'auto' | 'up' | 'down' = 'auto';\n\n /** Is \"Select All\" box checked.\n * @internal\n */\n @property({ type: Boolean })\n selectAllChecked = false;\n\n /** Is \"Select All\" indeterminate.\n * @internal\n */\n @property({ type: Boolean })\n selectAllIndeterminate = false;\n\n /** Text string customization. */\n @property({ type: Object })\n textStrings = _defaultTextStrings;\n\n /** Enables the \"Add New Option\" feature. */\n @property({ type: Boolean })\n allowAddOption = false;\n\n /** Internal text strings.\n * @internal\n */\n @state()\n _textStrings = _defaultTextStrings;\n\n /**\n * New dropdown option value.\n * @ignore\n */\n @state()\n newOptionValue = '';\n\n /**\n * Selected option text, automatically derived.\n * @ignore\n */\n @state()\n text = '';\n\n /**\n * Search input value.\n */\n @property({ type: String })\n searchText = '';\n\n /**\n * Assistive text for screen readers.\n * @ignore\n */\n @state()\n assistiveText = 'Dropdown menu options.';\n\n /**\n * Queries any slotted options.\n * @ignore\n */\n @queryAssignedElements({ selector: 'kyn-dropdown-option' })\n options!: Array<any>;\n\n /**\n * Queries any slotted selected options.\n * @ignore\n */\n @queryAssignedElements({ selector: 'kyn-dropdown-option[selected]' })\n selectedOptions!: Array<any>;\n\n /**\n * Queries the .search DOM element.\n * @ignore\n */\n @query('.search')\n searchEl!: HTMLInputElement;\n\n /**\n * Queries the .select DOM element.\n * @ignore\n */\n @query('.select')\n buttonEl!: HTMLElement;\n\n /**\n * Queries the .options DOM element.\n * @ignore\n */\n @query('.options')\n listboxEl!: HTMLElement;\n\n /**\n * Queries the .clear-multiple DOM element.\n * @ignore\n */\n @query('.clear-multiple')\n clearMultipleEl!: HTMLElement;\n\n /**\n * Queries the .add-option-input DOM element.\n * @ignore\n */\n @query('.add-option-input')\n addOptionInputEl!: HTMLInputElement;\n\n /**\n * Open drawer upwards.\n * @ignore\n */\n @state()\n _openUpwards = false;\n\n /**\n * Tags value/text reference.\n * @ignore\n */\n @state()\n _tags: Array<object> = [];\n\n /** Toggles on clicking enter key in the search input.\n * @internal\n */\n searchTextEntered: any = false;\n\n /** Toggles on clicking enter key in the search input.\n * @internal\n */\n prevSearchKeydownIndex = -1;\n\n override render() {\n return html`\n <div\n class=\"dropdown\"\n ?disabled=${this.disabled}\n ?open=${this.open}\n ?inline=${this.inline}\n ?searchable=${this.searchable}\n >\n <label\n id=\"label-${this.name}\"\n class=\"label-text ${this.hideLabel || this.inline ? 'sr-only' : ''}\"\n for=${this.name}\n aria-disabled=${this.disabled}\n @click=${() => this._handleLabelClick()}\n >\n ${this.required\n ? html`<abbr\n class=\"required\"\n title=${this._textStrings.requiredText}\n role=\"img\"\n aria-label=${this._textStrings?.requiredText || 'Required'}\n >*</abbr\n >`\n : null}\n ${this.label}\n <slot name=\"tooltip\"></slot>\n </label>\n\n <div\n class=${classMap({\n wrapper: true,\n open: this.open,\n })}\n >\n <div class=\"custom\">\n <div\n class=\"${classMap({\n select: true,\n 'input-custom': true,\n 'size--sm': this.size === 'sm',\n 'size--lg': this.size === 'lg',\n inline: this.inline,\n })}\"\n aria-labelledby=\"label-${this.name}\"\n aria-expanded=${this.open}\n aria-controls=\"options\"\n role=\"combobox\"\n id=${this.name}\n name=${this.name}\n title=${this._textStrings.title}\n ?required=${this.required}\n ?disabled=${this.disabled}\n ?invalid=${this._isInvalid}\n tabindex=${this.disabled ? '' : '0'}\n @click=${() => this.handleClick()}\n @keydown=${(e: any) => this.handleButtonKeydown(e)}\n @mousedown=${(e: any) => {\n if (!this.searchable) {\n e.preventDefault();\n }\n }}\n @blur=${(e: any) => e.stopPropagation()}\n >\n ${this.multiple && this.value.length\n ? html`\n <button\n class=\"clear-multiple\"\n aria-label=\"${this.value\n .length} items selected. Clear selections\"\n ?disabled=${this.disabled}\n title=${this._textStrings.clear}\n @click=${(e: Event) => this.handleClearMultiple(e)}\n >\n ${this.value.length}\n <span style=\"display:flex;\" slot=\"icon\"\n >${unsafeSVG(clearIcon)}</span\n >\n </button>\n `\n : null}\n ${this.searchable\n ? html`\n <input\n class=\"search\"\n type=\"text\"\n placeholder=${this.placeholder}\n value=${this.searchText}\n ?disabled=${this.disabled}\n aria-disabled=${this.disabled}\n @keydown=${(e: any) => this.handleSearchKeydown(e)}\n @input=${(e: any) => this.handleSearchInput(e)}\n @blur=${(e: any) => e.stopPropagation()}\n @click=${(e: any) => this.handleSearchClick(e)}\n />\n `\n : html`\n <span aria-disabled=${this.disabled}>\n ${this.multiple\n ? this.placeholder\n : this.value === ''\n ? this.placeholder\n : this.text}\n </span>\n `}\n\n <span class=\"arrow-icon\">${unsafeSVG(downIcon)}</span>\n </div>\n\n <div\n id=\"options\"\n class=${classMap({\n options: true,\n open: this.open,\n upwards: this._openUpwards,\n })}\n aria-hidden=${!this.open}\n @keydown=${this.handleListKeydown}\n @blur=${this.handleListBlur}\n >\n ${this.allowAddOption\n ? html`\n <div class=\"add-option\">\n <input\n class=\"add-option-input\"\n type=\"text\"\n placeholder=${this._textStrings.addItem}\n .value=${this.newOptionValue}\n aria-label=\"Add new option\"\n @input=${this._handleInputNewOption}\n @keydown=${this._onAddOptionInputKeydown}\n @focus=${this._onAddOptionInputFocus}\n />\n <kyn-button\n type=\"button\"\n size=\"small\"\n kind=\"secondary\"\n @on-click=${this._handleAddOption}\n >\n ${this._textStrings.add}\n </kyn-button>\n </div>\n `\n : null}\n\n <div role=\"listbox\" aria-labelledby=\"label-${this.name}\">\n ${this.multiple && this.selectAll\n ? html`\n <kyn-dropdown-option\n class=\"select-all\"\n value=\"selectAll\"\n multiple\n ?selected=${this.selectAllChecked}\n ?indeterminate=${this.selectAllIndeterminate}\n ?disabled=${this.disabled}\n >\n ${this.selectAllText}\n </kyn-dropdown-option>\n `\n : null}\n\n <slot\n id=\"children\"\n @slotchange=${() => this.handleSlotChange()}\n ></slot>\n </div>\n </div>\n </div>\n ${this.searchText !== ''\n ? html`\n <kyn-button\n ?disabled=${this.disabled}\n class=\"clear-button dropdown-clear\"\n kind=\"ghost\"\n size=\"small\"\n description=${this._textStrings.clearAll}\n @click=${(e: Event) => this.handleClear(e)}\n >\n <span style=\"display:flex;\" slot=\"icon\"\n >${unsafeSVG(clearIcon)}</span\n >\n </kyn-button>\n `\n : null}\n </div>\n ${this.renderHelperContent()}\n </div>\n `;\n }\n\n private _onAddOptionInputKeydown(e: KeyboardEvent) {\n e.stopPropagation();\n switch (e.key) {\n case KEY.Enter:\n this._handleAddOption();\n break;\n case KEY.Escape:\n this.newOptionValue = '';\n this.open = false;\n this.buttonEl.focus();\n break;\n case KEY.ArrowDown:\n this.handleKeyboard(e, 40, 'addOption');\n break;\n case KEY.ArrowUp:\n this.handleKeyboard(e, 38, 'addOption');\n break;\n }\n }\n\n private _onAddOptionInputFocus() {\n this.assistiveText = 'Add new option input';\n }\n\n private _handleAddOption() {\n const v = this.newOptionValue.trim();\n if (!v) return;\n this.dispatchEvent(\n new CustomEvent('on-add-option', { detail: { value: v } })\n );\n this.newOptionValue = '';\n }\n\n private renderHelperContent() {\n return html`\n ${\n this.multiple && !this.hideTags && this._tags.length\n ? html`\n <kyn-tag-group\n filter\n role=\"list\"\n aria-label=${this._textStrings.selectedOptions}\n >\n ${this._tags.map((tag: any) => {\n return html`\n <kyn-tag\n role=\"listitem\"\n label=${tag.text}\n ?disabled=${this.disabled || tag.disabled}\n @on-close=${() => this.handleTagClear(tag)}\n ></kyn-tag>\n `;\n })}\n </kyn-tag-group>\n `\n : null\n }\n ${\n this.caption !== ''\n ? html`\n <div class=\"caption\" aria-disabled=${this.disabled}>\n ${this.caption}\n </div>\n `\n : null\n }\n ${\n this._isInvalid\n ? html`\n <div class=\"error\">\n <span\n class=\"error-icon\"\n role=\"img\"\n title=${this._textStrings.errorText}\n aria-label=${this._textStrings.errorText}\n >${unsafeSVG(errorIcon)}</span\n >\n ${this.invalidText || this._internalValidationMsg}\n </div>\n `\n : null\n }\n\n <div\n class=\"assistive-text\"\n role=\"status\"\n aria-live=\"assertive\"\n aria-relevant=\"additions text\"\n >\n ${this.assistiveText}\n </div>\n </div>\n `;\n }\n\n override firstUpdated() {\n // set a default placeholder if none provided\n if (this.placeholder === '') {\n if (this.searchable) {\n this.placeholder = 'Search';\n } else {\n if (this.multiple) {\n this.placeholder = 'Select items';\n } else {\n this.placeholder = 'Select an option';\n }\n }\n }\n }\n\n private handleSlotChange() {\n this.updateChildOptions();\n this._updateOptions();\n this._updateSelectedText();\n }\n\n private updateChildOptions() {\n // Get all slotted kyn-dropdown-option elements\n const slot = this.shadowRoot?.querySelector('#children') as HTMLSlotElement;\n const options = slot.assignedElements({ flatten: true }) as HTMLElement[];\n\n // Pass allowAddOption to each kyn-dropdown-option\n options.forEach((option) => {\n if (option.tagName === 'KYN-DROPDOWN-OPTION') {\n (option as any).allowAddOption = this.allowAddOption;\n }\n });\n }\n\n private handleClick() {\n if (!this.disabled) {\n this.open = !this.open;\n\n // focus search input if searchable\n if (this.searchable) {\n this.searchEl.focus();\n } else {\n this.buttonEl.focus();\n }\n }\n }\n\n private _handleLabelClick() {\n if (!this.disabled) {\n this.open = !this.open;\n\n if (this.searchable) {\n this.searchEl.focus();\n } else {\n this.buttonEl.focus();\n }\n }\n }\n\n private handleButtonKeydown(e: any) {\n this.handleKeyboard(e, e.keyCode, 'button');\n }\n\n private handleListKeydown(e: any) {\n const TAB_KEY_CODE = 9;\n\n if (e.keyCode !== TAB_KEY_CODE) {\n e.preventDefault();\n }\n\n this.handleKeyboard(e, e.keyCode, 'list');\n }\n\n private handleListBlur(e: FocusEvent): void {\n this.options.forEach((o) => (o.highlighted = false));\n const target = e.relatedTarget as HTMLElement | null;\n\n if (\n target &&\n (target.closest('kyn-dropdown-option') ||\n target.classList.contains('search') ||\n target.closest('.add-option'))\n ) {\n return;\n }\n\n this.open = false;\n this.assistiveText = 'Dropdown menu options.';\n }\n\n private handleKeyboard(e: any, keyCode: number, target: string) {\n const SPACEBAR_KEY_CODE = [0, 32];\n const ENTER_KEY_CODE = 13;\n const DOWN_ARROW_KEY_CODE = 40;\n const UP_ARROW_KEY_CODE = 38;\n const ESCAPE_KEY_CODE = 27;\n\n // get highlighted element + index and selected element\n const visibleOptions = [\n ...Array.from(this.shadowRoot?.querySelectorAll('.select-all') || []),\n ...this.options.filter((option: any) => option.style.display !== 'none'),\n ];\n // visibleOptions.forEach((e) => (e.tabIndex = 0));\n\n const highlightedEl = visibleOptions.find(\n (option: any) => option.highlighted\n );\n const selectedEl = visibleOptions.find((option: any) => option.selected);\n let highlightedIndex = highlightedEl\n ? visibleOptions.indexOf(highlightedEl)\n : visibleOptions.find((option: any) => option.selected)\n ? visibleOptions.indexOf(selectedEl)\n : 0;\n\n // prevent page scroll on spacebar press\n if (SPACEBAR_KEY_CODE.includes(keyCode)) {\n e.preventDefault();\n }\n\n const isListboxElOpened = this.open;\n // open the listbox\n if (target === 'button' || target === 'addOption') {\n let openDropdown =\n SPACEBAR_KEY_CODE.includes(keyCode) ||\n keyCode === ENTER_KEY_CODE ||\n keyCode == DOWN_ARROW_KEY_CODE ||\n keyCode == UP_ARROW_KEY_CODE;\n\n if (e.target === this.clearMultipleEl && keyCode === ENTER_KEY_CODE) {\n openDropdown = false;\n visibleOptions[highlightedIndex].highlighted = false;\n visibleOptions[highlightedIndex].selected =\n !visibleOptions[highlightedIndex].selected;\n highlightedIndex = 0;\n if (keyCode !== ENTER_KEY_CODE) return;\n }\n\n if (openDropdown) {\n this.open = true;\n\n if (\n this.allowAddOption &&\n target === 'button' &&\n keyCode === ENTER_KEY_CODE\n ) {\n setTimeout(() => {\n this.addOptionInputEl?.focus();\n }, 100);\n } else {\n // scroll to highlighted option\n if (!this.multiple && this.value !== '') {\n visibleOptions[highlightedIndex].scrollIntoView({\n block: 'nearest',\n });\n }\n }\n }\n }\n switch (keyCode) {\n case 0:\n case 32:\n case ENTER_KEY_CODE: {\n // select highlighted option\n visibleOptions[highlightedIndex].highlighted = true;\n if (isListboxElOpened) {\n if (this.multiple) {\n visibleOptions[highlightedIndex].selected =\n !visibleOptions[highlightedIndex].selected;\n this._handleClick({\n detail: {\n value: visibleOptions[highlightedIndex].value,\n selected: visibleOptions[highlightedIndex].selected,\n },\n });\n } else {\n visibleOptions.forEach((e) => (e.selected = false));\n visibleOptions[highlightedIndex].selected = true;\n this.open = false;\n this.assistiveText = `Selected ${visibleOptions[highlightedIndex].value}`;\n }\n }\n return;\n }\n case DOWN_ARROW_KEY_CODE: {\n // go to next option\n let nextIndex =\n !highlightedEl && !selectedEl\n ? 0\n : highlightedIndex === visibleOptions.length - 1\n ? 0\n : highlightedIndex + 1;\n\n // skip disabled options\n if (visibleOptions[nextIndex].disabled) {\n nextIndex =\n nextIndex === visibleOptions.length - 1 ? 0 : nextIndex + 1;\n }\n\n visibleOptions[nextIndex].focus();\n visibleOptions[highlightedIndex].highlighted = false;\n visibleOptions[nextIndex].highlighted = true;\n\n // scroll to option\n visibleOptions[nextIndex].scrollIntoView({ block: 'nearest' });\n\n this.assistiveText = visibleOptions[nextIndex].text;\n return;\n }\n case UP_ARROW_KEY_CODE: {\n // go to previous option\n let nextIndex =\n highlightedIndex === 0\n ? visibleOptions.length - 1\n : highlightedIndex - 1;\n\n // skip disabled options\n if (visibleOptions[nextIndex].disabled) {\n nextIndex =\n nextIndex === 0 ? visibleOptions.length - 1 : nextIndex - 1;\n }\n\n visibleOptions[nextIndex].focus();\n visibleOptions[highlightedIndex].highlighted = false;\n visibleOptions[nextIndex].highlighted = true;\n\n // scroll to option\n visibleOptions[nextIndex].scrollIntoView({ block: 'nearest' });\n\n this.assistiveText = visibleOptions[nextIndex].text;\n return;\n }\n case ESCAPE_KEY_CODE: {\n // close listbox\n this.open = false;\n\n // restore focus\n if (this.searchable) {\n this.searchEl.focus();\n } else {\n this.buttonEl.focus();\n }\n\n this.assistiveText = 'Dropdown menu options.';\n return;\n }\n default: {\n return;\n }\n }\n }\n\n private handleClearMultiple(e: any) {\n e.stopPropagation();\n\n // clear values\n if (this.multiple) {\n const Slot: any = this.shadowRoot?.querySelector('slot#children');\n const Options: Array<any> = Slot.assignedElements();\n const DisabledSelectedOptions: Array<any> = Options.filter(\n (option: any) => option.selected && option.disabled\n ).map((option: any) => option.value);\n\n this.value = DisabledSelectedOptions.length\n ? DisabledSelectedOptions\n : [];\n } else {\n this.value = '';\n }\n\n this._validate(true, false);\n this._updateSelectedOptions();\n this.emitValue();\n\n const event = new CustomEvent('on-clear-all', {\n detail: {\n value: this.value,\n },\n });\n this.dispatchEvent(event);\n }\n\n private handleTagClear(tag: any) {\n // remove value\n this.updateValue(tag.value, false);\n this._updateSelectedOptions();\n this.emitValue();\n }\n\n private handleClear(e: any) {\n e.stopPropagation();\n\n // reset search input text\n this.text = '';\n this.searchText = '';\n this.searchEl.value = '';\n\n this._emitSearch();\n\n if (this.filterSearch) {\n // reveal all options\n this.options.map((option: any) => {\n option.style.display = 'block';\n });\n }\n\n // clear selection for single select\n if (!this.multiple) {\n this.value = '';\n this._validate(true, false);\n this._updateSelectedOptions();\n this.emitValue();\n }\n }\n\n private handleSearchClick(e: any) {\n e.stopPropagation();\n this.open = true;\n }\n\n private handleSearchKeydown(e: any) {\n e.stopPropagation();\n\n const ENTER_KEY_CODE = 13;\n const ESCAPE_KEY_CODE = 27;\n const option = this.options.find((option) => option.highlighted);\n const highlightedIndex = this.options.findIndex(\n (option) => option.highlighted\n );\n this.searchTextEntered = false;\n // select option\n if (e.keyCode === ENTER_KEY_CODE) {\n this.searchTextEntered = true;\n if (option) {\n if (this.prevSearchKeydownIndex !== highlightedIndex) {\n if (this.multiple) {\n option.selected = !option.selected;\n } else {\n this.options.forEach((e) => (e.selected = false));\n option.selected = true;\n this.open = false;\n }\n this.updateValue(option.value, option.selected);\n }\n\n if (option.selected) {\n this.assistiveText = `Selected ${option.innerHTML}`;\n this.prevSearchKeydownIndex = highlightedIndex;\n } else {\n this.assistiveText = `Deselected ${option.innerHTML}`;\n }\n } else {\n this.assistiveText = 'No item matched.';\n }\n }\n\n // close listbox\n if (e.keyCode === ESCAPE_KEY_CODE) {\n this.open = false;\n this.buttonEl.focus();\n }\n }\n\n private handleSearchInput(e: any) {\n const value = e.target.value;\n this.searchText = value;\n this.open = true;\n\n this._emitSearch();\n\n if (this.filterSearch) {\n // hide items that don't match\n this.options.map((option: any) => {\n const text = option.text;\n if (text.toLowerCase().includes(value.toLowerCase())) {\n option.style.display = 'block';\n } else {\n option.style.display = 'none';\n }\n });\n } else {\n // find matches\n const options = this.options.filter((option: any) => {\n const text = option.text;\n return text.toLowerCase().startsWith(value.toLowerCase());\n });\n\n // reset options highlighted state\n this.options.forEach((option) => (option.highlighted = false));\n\n // option highlight and scroll\n if (value !== '' && options.length) {\n options[0].highlighted = true;\n options[0].scrollIntoView({ block: 'nearest' });\n if (this.searchTextEntered) this.assistiveText = 'Option Matched';\n }\n }\n }\n\n private _updateSelectedOptions() {\n // set selected state for each option\n this.options.forEach((option: any) => {\n if (this.multiple) {\n option.selected = this.value.includes(option.value);\n } else {\n option.selected = this.value === option.value;\n }\n });\n }\n\n private _handleClick(e: any) {\n if (e.detail.value === 'selectAll') {\n this.selectAllChecked = e.detail.selected;\n\n const Slot: any = this.shadowRoot?.querySelector('slot#children');\n const Options: Array<any> = Slot.assignedElements();\n const DisabledSelectedOptions: Array<any> = Options.filter(\n (option: any) => option.selected && option.disabled\n ).map((option: any) => option.value);\n\n if (e.detail.selected) {\n this.value = this.options\n .filter(\n (option) => !option.disabled || (option.disabled && option.selected)\n )\n .map((option) => {\n return option.value;\n });\n this.assistiveText = 'Selected all items.';\n } else {\n this.value = DisabledSelectedOptions.length\n ? DisabledSelectedOptions\n : [];\n this.assistiveText = 'Deselected all items.';\n }\n\n this._validate(true, false);\n } else {\n this.updateValue(e.detail.value, e.detail.selected);\n this.assistiveText = e.detail.selected\n ? `Selected ${e.detail.value}`\n : `Deselected ${e.detail.value}`;\n }\n\n this._updateSelectedOptions();\n\n // close listbox\n if (!this.multiple) {\n this.open = false;\n }\n\n // emit selected value\n this.emitValue();\n }\n\n private _handleBlur(e: any) {\n const relatedTarget = e.detail.origEvent.relatedTarget;\n\n if (\n !relatedTarget ||\n (relatedTarget?.localName !== 'kyn-dropdown-option' &&\n relatedTarget.localName !== 'kyn-dropdown')\n ) {\n this.open = false;\n }\n }\n\n private _handleClickOut(e: Event) {\n if (!e.composedPath().includes(this)) {\n this.open = false;\n }\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n // preserve FormMixin connectedCallback function\n this._onConnected();\n\n document.addEventListener('click', (e) => this._handleClickOut(e));\n\n // capture child options click event\n this.addEventListener('on-click', (e: any) => this._handleClick(e));\n this.addEventListener('on-remove-option', () => this._handleRemoveOption());\n\n // capture child options blur event\n this.addEventListener('on-blur', (e: any) => this._handleBlur(e));\n }\n\n override disconnectedCallback() {\n // preserve FormMixin disconnectedCallback function\n this._onDisconnected();\n\n document.removeEventListener('click', (e) => this._handleClickOut(e));\n this.removeEventListener('on-click', (e: any) => this._handleClick(e));\n this.removeEventListener('on-remove-option', () =>\n this._handleRemoveOption()\n );\n this.removeEventListener('on-blur', (e: any) => this._handleBlur(e));\n\n super.disconnectedCallback();\n }\n\n private updateValue(value: string, selected = false) {\n // set value\n if (this.multiple) {\n const values =\n this.value === '' ? [] : JSON.parse(JSON.stringify(this.value));\n\n // update array\n if (selected) {\n values.push(value);\n } else {\n const index = values.indexOf(value);\n values.splice(index, 1);\n }\n\n this.value = values;\n } else {\n this.value = value;\n }\n\n this._validate(true, false);\n\n // reset focus\n if (!this.multiple) {\n if (this.searchable) {\n this.searchEl.focus();\n } else {\n this.buttonEl.focus();\n }\n }\n }\n\n private _validate(interacted: Boolean, report: Boolean) {\n // set validity flags\n const Validity = {\n customError: this.invalidText !== '',\n valueMissing:\n this.required &&\n (!this.value ||\n (this.multiple && !this.value.length) ||\n (!this.multiple && this.value === '')),\n };\n\n // set validationMessage\n const InternalMsg =\n this.required && !this.value.length ? 'Please fill out this field.' : '';\n const ValidationMessage =\n this.invalidText !== '' ? this.invalidText : InternalMsg;\n\n // set validity on custom element, anchor to buttonEl\n this._internals.setValidity(Validity, ValidationMessage, this.buttonEl);\n\n // set internal validation message if value was changed by user input\n if (interacted) {\n this._internalValidationMsg = InternalMsg;\n }\n\n // focus the buttonEl to show validity\n if (report) {\n this._internals.reportValidity();\n }\n }\n\n private emitValue() {\n const event = new CustomEvent('on-change', {\n detail: {\n value: this.value,\n },\n });\n this.dispatchEvent(event);\n }\n\n private _emitSearch() {\n const event = new CustomEvent('on-search', {\n detail: {\n searchText: this.searchText,\n },\n });\n this.dispatchEvent(event);\n }\n\n override willUpdate(changedProps: any) {\n if (changedProps.has('textStrings')) {\n this._textStrings = deepmerge(_defaultTextStrings, this.textStrings);\n }\n }\n\n override updated(changedProps: any) {\n // preserve FormMixin updated function\n this._onUpdated(changedProps);\n\n if (changedProps.has('value')) {\n this._updateOptions();\n\n const Slot: any = this.shadowRoot?.querySelector('slot#children');\n const Options: Array<any> = Slot.assignedElements().filter(\n (option: any) => !option.disabled\n );\n const SelectedOptions: Array<any> = Options.filter(\n (option: any) => option.selected\n );\n\n // sync \"Select All\" checkbox state\n this.selectAllChecked = SelectedOptions.length === Options.length;\n\n // sync \"Select All\" indeterminate state\n this.selectAllIndeterminate =\n SelectedOptions.length < Options.length && SelectedOptions.length > 0;\n\n this._updateTags();\n this._updateSelectedText();\n }\n\n if (changedProps.has('open') || changedProps.has('openDirection')) {\n if (this.open && !this.searchable) {\n // focus listbox if not searchable\n this.listboxEl.focus({ preventScroll: true });\n this.assistiveText =\n 'Selecting items. Use up and down arrow keys to navigate.';\n }\n\n if (this.openDirection === 'up') {\n this._openUpwards = true;\n } else if (this.openDirection === 'down') {\n this._openUpwards = false;\n } else if (this.open) {\n const openThreshold = 0.6;\n this._openUpwards =\n this.buttonEl.getBoundingClientRect().top >\n window.innerHeight * openThreshold;\n }\n\n if (this.open && !this.multiple) {\n this.options\n .find((option) => option.selected)\n ?.scrollIntoView({ block: 'nearest' });\n }\n }\n\n if (changedProps.has('multiple')) {\n // set multiple for each option\n this.options.forEach((option: any) => {\n option.multiple = this.multiple;\n });\n }\n\n if (changedProps.has('searchText') && this.searchEl) {\n this.searchEl.value = this.searchText;\n }\n\n if (changedProps.has('allowAddOption')) {\n this.updateChildOptions();\n }\n }\n\n // add selected options to Tags array\n private _updateTags() {\n if (this.multiple) {\n const Options: any = Array.from(\n this.querySelectorAll('kyn-dropdown-option')\n );\n const Tags: Array<object> = [];\n\n if (Options) {\n Options.forEach((option: any) => {\n if (option.selected) {\n Tags.push({\n value: option.value,\n text: option.textContent,\n disabled: option.disabled,\n });\n }\n });\n\n this._tags = Tags;\n }\n }\n }\n\n private _updateOptions() {\n const Options: any = Array.from(\n this.querySelectorAll('kyn-dropdown-option')\n );\n\n Options.forEach((option: any) => {\n // set option multiple state\n option.multiple = this.multiple;\n\n if (this.multiple) {\n const Selected = this.value.includes(option.value);\n // set option selected state\n option.selected = Selected;\n } else {\n option.selected = this.value === option.value;\n }\n });\n }\n\n private _handleInputNewOption(e: Event) {\n const target = e.target as HTMLInputElement;\n this.newOptionValue = target.value;\n }\n\n private _handleRemoveOption() {\n this.assistiveText = 'MY option removed ';\n setTimeout(() => {\n this.open = false;\n this.buttonEl.focus();\n }, 100);\n }\n\n private _updateSelectedText() {\n // update selected option text\n const AllOptions: any = Array.from(\n this.querySelectorAll('kyn-dropdown-option')\n );\n\n if (!this.multiple) {\n if (AllOptions.length && this.value !== '') {\n const option = AllOptions.find(\n (option: any) => option.value === this.value\n );\n if (option) {\n this.text = option.textContent.trim();\n } else {\n this.text = '';\n console.warn(`No dropdown option found with value: ${this.value}`);\n }\n }\n\n // set search input value\n if (this.searchable && this.text) {\n this.searchText = this.text === this.placeholder ? '' : this.text;\n this.searchEl.value = this.searchText;\n }\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-dropdown': Dropdown;\n }\n}\n"],"names":["_defaultTextStrings","title","selectedOptions","requiredText","errorText","clearAll","clear","addItem","add","KEY","Dropdown","FormMixin","LitElement","constructor","this","label","size","inline","caption","placeholder","open","searchable","filterSearch","multiple","required","hideLabel","disabled","hideTags","selectAll","selectAllText","menuMinWidth","openDirection","selectAllChecked","selectAllIndeterminate","textStrings","allowAddOption","_textStrings","newOptionValue","text","searchText","assistiveText","_openUpwards","_tags","searchTextEntered","prevSearchKeydownIndex","render","html","name","_handleLabelClick","_a","classMap","wrapper","select","_isInvalid","handleClick","e","handleButtonKeydown","preventDefault","stopPropagation","value","length","handleClearMultiple","unsafeSVG","clearIcon","handleSearchKeydown","handleSearchInput","handleSearchClick","downIcon","options","upwards","handleListKeydown","handleListBlur","_handleInputNewOption","_onAddOptionInputKeydown","_onAddOptionInputFocus","_handleAddOption","handleSlotChange","handleClear","renderHelperContent","key","buttonEl","focus","handleKeyboard","v","trim","dispatchEvent","CustomEvent","detail","map","tag","handleTagClear","errorIcon","invalidText","_internalValidationMsg","firstUpdated","updateChildOptions","_updateOptions","_updateSelectedText","shadowRoot","querySelector","assignedElements","flatten","forEach","option","tagName","searchEl","keyCode","o","highlighted","target","relatedTarget","closest","classList","contains","SPACEBAR_KEY_CODE","visibleOptions","Array","from","querySelectorAll","filter","style","display","highlightedEl","find","selectedEl","selected","highlightedIndex","indexOf","includes","isListboxElOpened","openDropdown","clearMultipleEl","setTimeout","addOptionInputEl","scrollIntoView","block","_handleClick","nextIndex","DisabledSelectedOptions","_validate","_updateSelectedOptions","emitValue","event","updateValue","_emitSearch","findIndex","innerHTML","toLowerCase","startsWith","_handleBlur","origEvent","localName","_handleClickOut","composedPath","connectedCallback","super","_onConnected","document","addEventListener","_handleRemoveOption","disconnectedCallback","_onDisconnected","removeEventListener","values","JSON","parse","stringify","push","index","splice","interacted","report","Validity","customError","valueMissing","InternalMsg","ValidationMessage","_internals","setValidity","reportValidity","willUpdate","changedProps","has","deepmerge","updated","_onUpdated","Options","SelectedOptions","_updateTags","listboxEl","preventScroll","openThreshold","getBoundingClientRect","top","window","innerHeight","_b","Tags","textContent","Selected","AllOptions","console","warn","styles","DropdownScss","__decorate","property","type","String","prototype","Boolean","Object","state","queryAssignedElements","selector","query","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"dropdown.js","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html } from 'lit';\nimport {\n customElement,\n property,\n state,\n query,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport DropdownScss from './dropdown.scss';\nimport { FormMixin } from '../../../common/mixins/form-input';\nimport { deepmerge } from 'deepmerge-ts';\n\nimport './dropdownOption';\nimport '../tag';\nimport '../button';\n\nimport downIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-down.svg';\nimport errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/error-filled.svg';\nimport clearIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/close-simple.svg';\n\nconst _defaultTextStrings = {\n title: 'Dropdown',\n selectedOptions: 'List of selected options',\n requiredText: 'Required',\n errorText: 'Error',\n clearAll: 'Clear all',\n clear: 'Clear',\n addItem: 'Add item...',\n add: 'Add',\n};\n\nconst KEY = {\n Enter: 'Enter',\n Escape: 'Escape',\n ArrowDown: 'ArrowDown',\n ArrowUp: 'ArrowUp',\n} as const;\n\n/**\n * Dropdown, single select.\n * @fires on-change - Captures the input event and emits the selected value and original event details.\n * @fires on-search - Capture the search input event and emits the search text.\n * @fires on-clear-all - Captures the the multi-select clear all button click event and emits the value.\n * @fires on-add-option - Captures the add button click and emits the newly added option.\n * @fires on-clear-all - Captures the the multi-select clear all button click event and emits the value.\n * @slot unnamed - Slot for dropdown options.\n * @slot tooltip - Slot for tooltip.\n */\n@customElement('kyn-dropdown')\nexport class Dropdown extends FormMixin(LitElement) {\n static override styles = DropdownScss;\n\n /** Label text. */\n @property({ type: String })\n label = '';\n\n /** Dropdown size/height. \"sm\", \"md\", or \"lg\". */\n @property({ type: String })\n size = 'md';\n\n /** Dropdown inline style type. */\n @property({ type: Boolean })\n inline = false;\n\n /** Optional text beneath the input. */\n @property({ type: String })\n caption = '';\n\n /** Dropdown placeholder. */\n @property({ type: String })\n placeholder = '';\n\n /** Listbox/drawer open state. */\n @property({ type: Boolean })\n open = false;\n\n /** Makes the dropdown searchable. */\n @property({ type: Boolean })\n searchable = false;\n\n /** Searchable variant filters results. */\n @property({ type: Boolean })\n filterSearch = false;\n\n /** Enabled multi-select functionality. */\n @property({ type: Boolean })\n multiple = false;\n\n /** Makes the dropdown required. */\n @property({ type: Boolean })\n required = false;\n\n /** Visually hide the label. */\n @property({ type: Boolean })\n hideLabel = false;\n\n /** Dropdown disabled state. */\n @property({ type: Boolean })\n disabled = false;\n\n /** Hide the tags below multi-select. */\n @property({ type: Boolean })\n hideTags = false;\n\n /** Adds a \"Select all\" option to the top of a multi-select dropdown. */\n @property({ type: Boolean })\n selectAll = false;\n\n /** \"Select all\" text customization. */\n @property({ type: String })\n selectAllText = 'Select all';\n\n /** Menu CSS min-width value. */\n @property({ type: String })\n menuMinWidth = 'initial';\n\n /** Controls direction that dropdown opens. */\n @property({ type: String })\n openDirection: 'auto' | 'up' | 'down' = 'auto';\n\n /** Is \"Select All\" box checked.\n * @internal\n */\n @property({ type: Boolean })\n selectAllChecked = false;\n\n /** Is \"Select All\" indeterminate.\n * @internal\n */\n @property({ type: Boolean })\n selectAllIndeterminate = false;\n\n /** Text string customization. */\n @property({ type: Object })\n textStrings = _defaultTextStrings;\n\n /** Enables the \"Add New Option\" feature. */\n @property({ type: Boolean })\n allowAddOption = false;\n\n /** Internal text strings.\n * @internal\n */\n @state()\n _textStrings = _defaultTextStrings;\n\n /**\n * New dropdown option value.\n * @ignore\n */\n @state()\n newOptionValue = '';\n\n /**\n * Selected option text, automatically derived.\n * @ignore\n */\n @state()\n text = '';\n\n /**\n * Search input value.\n */\n @property({ type: String })\n searchText = '';\n\n /**\n * Assistive text for screen readers.\n * @ignore\n */\n @state()\n assistiveText = 'Dropdown menu options.';\n\n /**\n * Queries any slotted options.\n * @ignore\n */\n @queryAssignedElements({ selector: 'kyn-dropdown-option' })\n options!: Array<any>;\n\n /**\n * Queries any slotted selected options.\n * @ignore\n */\n @queryAssignedElements({ selector: 'kyn-dropdown-option[selected]' })\n selectedOptions!: Array<any>;\n\n /**\n * Queries the .search DOM element.\n * @ignore\n */\n @query('.search')\n searchEl!: HTMLInputElement;\n\n /**\n * Queries the .select DOM element.\n * @ignore\n */\n @query('.select')\n buttonEl!: HTMLElement;\n\n /**\n * Queries the .options DOM element.\n * @ignore\n */\n @query('.options')\n listboxEl!: HTMLElement;\n\n /**\n * Queries the .clear-multiple DOM element.\n * @ignore\n */\n @query('.clear-multiple')\n clearMultipleEl!: HTMLElement;\n\n /**\n * Queries the .add-option-input DOM element.\n * @ignore\n */\n @query('.add-option-input')\n addOptionInputEl!: HTMLInputElement;\n\n /**\n * Open drawer upwards.\n * @ignore\n */\n @state()\n _openUpwards = false;\n\n /**\n * Tags value/text reference.\n * @ignore\n */\n @state()\n _tags: Array<object> = [];\n\n /** Toggles on clicking enter key in the search input.\n * @internal\n */\n searchTextEntered: any = false;\n\n /** Toggles on clicking enter key in the search input.\n * @internal\n */\n prevSearchKeydownIndex = -1;\n\n override render() {\n return html`\n <div\n class=\"dropdown\"\n ?disabled=${this.disabled}\n ?open=${this.open}\n ?inline=${this.inline}\n ?searchable=${this.searchable}\n >\n <label\n id=\"label-${this.name}\"\n class=\"label-text ${this.hideLabel || this.inline ? 'sr-only' : ''}\"\n for=${this.name}\n aria-disabled=${this.disabled}\n @click=${() => this._handleLabelClick()}\n >\n ${this.required\n ? html`<abbr\n class=\"required\"\n title=${this._textStrings.requiredText}\n role=\"img\"\n aria-label=${this._textStrings?.requiredText || 'Required'}\n >*</abbr\n >`\n : null}\n ${this.label}\n <slot name=\"tooltip\"></slot>\n </label>\n\n <div\n class=${classMap({\n wrapper: true,\n open: this.open,\n })}\n >\n <div class=\"custom\">\n <div\n class=\"${classMap({\n select: true,\n 'input-custom': true,\n 'size--sm': this.size === 'sm',\n 'size--lg': this.size === 'lg',\n inline: this.inline,\n })}\"\n aria-labelledby=\"label-${this.name}\"\n aria-expanded=${this.open}\n aria-controls=\"options\"\n role=\"combobox\"\n id=${this.name}\n name=${this.name}\n title=${this._textStrings.title}\n ?required=${this.required}\n ?disabled=${this.disabled}\n ?invalid=${this._isInvalid}\n tabindex=${this.disabled ? '' : '0'}\n @click=${() => this.handleClick()}\n @keydown=${(e: any) => this.handleButtonKeydown(e)}\n @mousedown=${(e: any) => {\n if (!this.searchable) {\n e.preventDefault();\n }\n }}\n @blur=${(e: any) => e.stopPropagation()}\n >\n ${this.multiple && this.value.length\n ? html`\n <button\n class=\"clear-multiple\"\n aria-label=\"${this.value\n .length} items selected. Clear selections\"\n ?disabled=${this.disabled}\n title=${this._textStrings.clear}\n @click=${(e: Event) => this.handleClearMultiple(e)}\n >\n ${this.value.length}\n <span style=\"display:flex;\" slot=\"icon\"\n >${unsafeSVG(clearIcon)}</span\n >\n </button>\n `\n : null}\n ${this.searchable\n ? html`\n <input\n class=\"search\"\n type=\"text\"\n placeholder=${this.placeholder}\n value=${this.searchText}\n ?disabled=${this.disabled}\n aria-disabled=${this.disabled}\n @keydown=${(e: any) => this.handleSearchKeydown(e)}\n @input=${(e: any) => this.handleSearchInput(e)}\n @blur=${(e: any) => e.stopPropagation()}\n @click=${(e: any) => this.handleSearchClick(e)}\n />\n `\n : html`\n <span\n class=\"${classMap({\n 'placeholder-text': this.text === '',\n })}\"\n >\n ${this.multiple\n ? this.placeholder\n : this.value === ''\n ? this.placeholder\n : this.text}\n </span>\n `}\n\n <span class=\"arrow-icon\">${unsafeSVG(downIcon)}</span>\n </div>\n\n <div\n id=\"options\"\n class=${classMap({\n options: true,\n open: this.open,\n upwards: this._openUpwards,\n })}\n aria-hidden=${!this.open}\n @keydown=${this.handleListKeydown}\n @blur=${this.handleListBlur}\n >\n ${this.allowAddOption\n ? html`\n <div class=\"add-option\">\n <input\n class=\"add-option-input\"\n type=\"text\"\n placeholder=${this._textStrings.addItem}\n .value=${this.newOptionValue}\n aria-label=\"Add new option\"\n @input=${this._handleInputNewOption}\n @keydown=${this._onAddOptionInputKeydown}\n @focus=${this._onAddOptionInputFocus}\n />\n <kyn-button\n type=\"button\"\n size=\"small\"\n kind=\"secondary\"\n @on-click=${this._handleAddOption}\n >\n ${this._textStrings.add}\n </kyn-button>\n </div>\n `\n : null}\n\n <div role=\"listbox\" aria-labelledby=\"label-${this.name}\">\n ${this.multiple && this.selectAll\n ? html`\n <kyn-dropdown-option\n class=\"select-all\"\n value=\"selectAll\"\n multiple\n ?selected=${this.selectAllChecked}\n ?indeterminate=${this.selectAllIndeterminate}\n ?disabled=${this.disabled}\n >\n ${this.selectAllText}\n </kyn-dropdown-option>\n `\n : null}\n\n <slot\n id=\"children\"\n @slotchange=${() => this.handleSlotChange()}\n ></slot>\n </div>\n </div>\n </div>\n ${this.searchText !== ''\n ? html`\n <kyn-button\n ?disabled=${this.disabled}\n class=\"clear-button dropdown-clear\"\n kind=\"ghost\"\n size=\"small\"\n description=${this._textStrings.clearAll}\n @click=${(e: Event) => this.handleClear(e)}\n >\n <span style=\"display:flex;\" slot=\"icon\"\n >${unsafeSVG(clearIcon)}</span\n >\n </kyn-button>\n `\n : null}\n </div>\n ${this.renderHelperContent()}\n </div>\n `;\n }\n\n private _onAddOptionInputKeydown(e: KeyboardEvent) {\n e.stopPropagation();\n switch (e.key) {\n case KEY.Enter:\n this._handleAddOption();\n break;\n case KEY.Escape:\n this.newOptionValue = '';\n this.open = false;\n this.buttonEl.focus();\n break;\n case KEY.ArrowDown:\n this.handleKeyboard(e, 40, 'addOption');\n break;\n case KEY.ArrowUp:\n this.handleKeyboard(e, 38, 'addOption');\n break;\n }\n }\n\n private _onAddOptionInputFocus() {\n this.assistiveText = 'Add new option input';\n }\n\n private _handleAddOption() {\n const v = this.newOptionValue.trim();\n if (!v) return;\n this.dispatchEvent(\n new CustomEvent('on-add-option', { detail: { value: v } })\n );\n this.newOptionValue = '';\n }\n\n private renderHelperContent() {\n return html`\n ${\n this.multiple && !this.hideTags && this._tags.length\n ? html`\n <kyn-tag-group\n filter\n role=\"list\"\n aria-label=${this._textStrings.selectedOptions}\n >\n ${this._tags.map((tag: any) => {\n return html`\n <kyn-tag\n role=\"listitem\"\n label=${tag.text}\n ?disabled=${this.disabled || tag.disabled}\n @on-close=${() => this.handleTagClear(tag)}\n ></kyn-tag>\n `;\n })}\n </kyn-tag-group>\n `\n : null\n }\n ${\n this.caption !== ''\n ? html`\n <div class=\"caption\" aria-disabled=${this.disabled}>\n ${this.caption}\n </div>\n `\n : null\n }\n ${\n this._isInvalid\n ? html`\n <div class=\"error\">\n <span\n class=\"error-icon\"\n role=\"img\"\n title=${this._textStrings.errorText}\n aria-label=${this._textStrings.errorText}\n >${unsafeSVG(errorIcon)}</span\n >\n ${this.invalidText || this._internalValidationMsg}\n </div>\n `\n : null\n }\n\n <div\n class=\"assistive-text\"\n role=\"status\"\n aria-live=\"assertive\"\n aria-relevant=\"additions text\"\n >\n ${this.assistiveText}\n </div>\n </div>\n `;\n }\n\n override firstUpdated() {\n // set a default placeholder if none provided\n if (this.placeholder === '') {\n if (this.searchable) {\n this.placeholder = 'Search';\n } else {\n if (this.multiple) {\n this.placeholder = 'Select items';\n } else {\n this.placeholder = 'Select an option';\n }\n }\n }\n }\n\n private handleSlotChange() {\n this.updateChildOptions();\n this._updateOptions();\n this._updateSelectedText();\n }\n\n private updateChildOptions() {\n // Get all slotted kyn-dropdown-option elements\n const slot = this.shadowRoot?.querySelector('#children') as HTMLSlotElement;\n const options = slot.assignedElements({ flatten: true }) as HTMLElement[];\n\n // Pass allowAddOption to each kyn-dropdown-option\n options.forEach((option) => {\n if (option.tagName === 'KYN-DROPDOWN-OPTION') {\n (option as any).allowAddOption = this.allowAddOption;\n }\n });\n }\n\n private handleClick() {\n if (!this.disabled) {\n this.open = !this.open;\n\n // focus search input if searchable\n if (this.searchable) {\n this.searchEl.focus();\n } else {\n this.buttonEl.focus();\n }\n }\n }\n\n private _handleLabelClick() {\n if (!this.disabled) {\n this.open = !this.open;\n\n if (this.searchable) {\n this.searchEl.focus();\n } else {\n this.buttonEl.focus();\n }\n }\n }\n\n private handleButtonKeydown(e: any) {\n this.handleKeyboard(e, e.keyCode, 'button');\n }\n\n private handleListKeydown(e: any) {\n const TAB_KEY_CODE = 9;\n\n if (e.keyCode !== TAB_KEY_CODE) {\n e.preventDefault();\n }\n\n this.handleKeyboard(e, e.keyCode, 'list');\n }\n\n private handleListBlur(e: FocusEvent): void {\n this.options.forEach((o) => (o.highlighted = false));\n const target = e.relatedTarget as HTMLElement | null;\n\n if (\n target &&\n (target.closest('kyn-dropdown-option') ||\n target.classList.contains('search') ||\n target.closest('.add-option'))\n ) {\n return;\n }\n\n this.open = false;\n this.assistiveText = 'Dropdown menu options.';\n }\n\n private handleKeyboard(e: any, keyCode: number, target: string) {\n const SPACEBAR_KEY_CODE = [0, 32];\n const ENTER_KEY_CODE = 13;\n const DOWN_ARROW_KEY_CODE = 40;\n const UP_ARROW_KEY_CODE = 38;\n const ESCAPE_KEY_CODE = 27;\n\n // get highlighted element + index and selected element\n const visibleOptions = [\n ...Array.from(this.shadowRoot?.querySelectorAll('.select-all') || []),\n ...this.options.filter((option: any) => option.style.display !== 'none'),\n ];\n // visibleOptions.forEach((e) => (e.tabIndex = 0));\n\n const highlightedEl = visibleOptions.find(\n (option: any) => option.highlighted\n );\n const selectedEl = visibleOptions.find((option: any) => option.selected);\n let highlightedIndex = highlightedEl\n ? visibleOptions.indexOf(highlightedEl)\n : visibleOptions.find((option: any) => option.selected)\n ? visibleOptions.indexOf(selectedEl)\n : 0;\n\n // prevent page scroll on spacebar press\n if (SPACEBAR_KEY_CODE.includes(keyCode)) {\n e.preventDefault();\n }\n\n const isListboxElOpened = this.open;\n // open the listbox\n if (target === 'button' || target === 'addOption') {\n let openDropdown =\n SPACEBAR_KEY_CODE.includes(keyCode) ||\n keyCode === ENTER_KEY_CODE ||\n keyCode == DOWN_ARROW_KEY_CODE ||\n keyCode == UP_ARROW_KEY_CODE;\n\n if (e.target === this.clearMultipleEl && keyCode === ENTER_KEY_CODE) {\n openDropdown = false;\n visibleOptions[highlightedIndex].highlighted = false;\n visibleOptions[highlightedIndex].selected =\n !visibleOptions[highlightedIndex].selected;\n highlightedIndex = 0;\n if (keyCode !== ENTER_KEY_CODE) return;\n }\n\n if (openDropdown) {\n this.open = true;\n\n if (\n this.allowAddOption &&\n target === 'button' &&\n keyCode === ENTER_KEY_CODE\n ) {\n setTimeout(() => {\n this.addOptionInputEl?.focus();\n }, 100);\n } else {\n // scroll to highlighted option\n if (!this.multiple && this.value !== '') {\n visibleOptions[highlightedIndex].scrollIntoView({\n block: 'nearest',\n });\n }\n }\n }\n }\n switch (keyCode) {\n case 0:\n case 32:\n case ENTER_KEY_CODE: {\n // select highlighted option\n visibleOptions[highlightedIndex].highlighted = true;\n if (isListboxElOpened) {\n if (this.multiple) {\n visibleOptions[highlightedIndex].selected =\n !visibleOptions[highlightedIndex].selected;\n this._handleClick({\n detail: {\n value: visibleOptions[highlightedIndex].value,\n selected: visibleOptions[highlightedIndex].selected,\n },\n });\n } else {\n visibleOptions.forEach((e) => (e.selected = false));\n visibleOptions[highlightedIndex].selected = true;\n this.open = false;\n this.assistiveText = `Selected ${visibleOptions[highlightedIndex].value}`;\n }\n }\n return;\n }\n case DOWN_ARROW_KEY_CODE: {\n // go to next option\n let nextIndex =\n !highlightedEl && !selectedEl\n ? 0\n : highlightedIndex === visibleOptions.length - 1\n ? 0\n : highlightedIndex + 1;\n\n // skip disabled options\n if (visibleOptions[nextIndex].disabled) {\n nextIndex =\n nextIndex === visibleOptions.length - 1 ? 0 : nextIndex + 1;\n }\n\n visibleOptions[nextIndex].focus();\n visibleOptions[highlightedIndex].highlighted = false;\n visibleOptions[nextIndex].highlighted = true;\n\n // scroll to option\n visibleOptions[nextIndex].scrollIntoView({ block: 'nearest' });\n\n this.assistiveText = visibleOptions[nextIndex].text;\n return;\n }\n case UP_ARROW_KEY_CODE: {\n // go to previous option\n let nextIndex =\n highlightedIndex === 0\n ? visibleOptions.length - 1\n : highlightedIndex - 1;\n\n // skip disabled options\n if (visibleOptions[nextIndex].disabled) {\n nextIndex =\n nextIndex === 0 ? visibleOptions.length - 1 : nextIndex - 1;\n }\n\n visibleOptions[nextIndex].focus();\n visibleOptions[highlightedIndex].highlighted = false;\n visibleOptions[nextIndex].highlighted = true;\n\n // scroll to option\n visibleOptions[nextIndex].scrollIntoView({ block: 'nearest' });\n\n this.assistiveText = visibleOptions[nextIndex].text;\n return;\n }\n case ESCAPE_KEY_CODE: {\n // close listbox\n this.open = false;\n\n // restore focus\n if (this.searchable) {\n this.searchEl.focus();\n } else {\n this.buttonEl.focus();\n }\n\n this.assistiveText = 'Dropdown menu options.';\n return;\n }\n default: {\n return;\n }\n }\n }\n\n private handleClearMultiple(e: any) {\n e.stopPropagation();\n\n // clear values\n if (this.multiple) {\n const Slot: any = this.shadowRoot?.querySelector('slot#children');\n const Options: Array<any> = Slot.assignedElements();\n const DisabledSelectedOptions: Array<any> = Options.filter(\n (option: any) => option.selected && option.disabled\n ).map((option: any) => option.value);\n\n this.value = DisabledSelectedOptions.length\n ? DisabledSelectedOptions\n : [];\n } else {\n this.value = '';\n }\n\n this._validate(true, false);\n this._updateSelectedOptions();\n this.emitValue();\n\n const event = new CustomEvent('on-clear-all', {\n detail: {\n value: this.value,\n },\n });\n this.dispatchEvent(event);\n }\n\n private handleTagClear(tag: any) {\n // remove value\n this.updateValue(tag.value, false);\n this._updateSelectedOptions();\n this.emitValue();\n }\n\n private handleClear(e: any) {\n e.stopPropagation();\n\n // reset search input text\n this.text = '';\n this.searchText = '';\n this.searchEl.value = '';\n\n this._emitSearch();\n\n if (this.filterSearch) {\n // reveal all options\n this.options.map((option: any) => {\n option.style.display = 'block';\n });\n }\n\n // clear selection for single select\n if (!this.multiple) {\n this.value = '';\n this._validate(true, false);\n this._updateSelectedOptions();\n this.emitValue();\n }\n }\n\n private handleSearchClick(e: any) {\n e.stopPropagation();\n this.open = true;\n }\n\n private handleSearchKeydown(e: any) {\n e.stopPropagation();\n\n const ENTER_KEY_CODE = 13;\n const ESCAPE_KEY_CODE = 27;\n const option = this.options.find((option) => option.highlighted);\n const highlightedIndex = this.options.findIndex(\n (option) => option.highlighted\n );\n this.searchTextEntered = false;\n // select option\n if (e.keyCode === ENTER_KEY_CODE) {\n this.searchTextEntered = true;\n if (option) {\n if (this.prevSearchKeydownIndex !== highlightedIndex) {\n if (this.multiple) {\n option.selected = !option.selected;\n } else {\n this.options.forEach((e) => (e.selected = false));\n option.selected = true;\n this.open = false;\n }\n this.updateValue(option.value, option.selected);\n }\n\n if (option.selected) {\n this.assistiveText = `Selected ${option.innerHTML}`;\n this.prevSearchKeydownIndex = highlightedIndex;\n } else {\n this.assistiveText = `Deselected ${option.innerHTML}`;\n }\n } else {\n this.assistiveText = 'No item matched.';\n }\n }\n\n // close listbox\n if (e.keyCode === ESCAPE_KEY_CODE) {\n this.open = false;\n this.buttonEl.focus();\n }\n }\n\n private handleSearchInput(e: any) {\n const value = e.target.value;\n this.searchText = value;\n this.open = true;\n\n this._emitSearch();\n\n if (this.filterSearch) {\n // hide items that don't match\n this.options.map((option: any) => {\n const text = option.text;\n if (text.toLowerCase().includes(value.toLowerCase())) {\n option.style.display = 'block';\n } else {\n option.style.display = 'none';\n }\n });\n } else {\n // find matches\n const options = this.options.filter((option: any) => {\n const text = option.text;\n return text.toLowerCase().startsWith(value.toLowerCase());\n });\n\n // reset options highlighted state\n this.options.forEach((option) => (option.highlighted = false));\n\n // option highlight and scroll\n if (value !== '' && options.length) {\n options[0].highlighted = true;\n options[0].scrollIntoView({ block: 'nearest' });\n if (this.searchTextEntered) this.assistiveText = 'Option Matched';\n }\n }\n }\n\n private _updateSelectedOptions() {\n // set selected state for each option\n this.options.forEach((option: any) => {\n if (this.multiple) {\n option.selected = this.value.includes(option.value);\n } else {\n option.selected = this.value === option.value;\n }\n });\n }\n\n private _handleClick(e: any) {\n if (e.detail.value === 'selectAll') {\n this.selectAllChecked = e.detail.selected;\n\n const Slot: any = this.shadowRoot?.querySelector('slot#children');\n const Options: Array<any> = Slot.assignedElements();\n const DisabledSelectedOptions: Array<any> = Options.filter(\n (option: any) => option.selected && option.disabled\n ).map((option: any) => option.value);\n\n if (e.detail.selected) {\n this.value = this.options\n .filter(\n (option) => !option.disabled || (option.disabled && option.selected)\n )\n .map((option) => {\n return option.value;\n });\n this.assistiveText = 'Selected all items.';\n } else {\n this.value = DisabledSelectedOptions.length\n ? DisabledSelectedOptions\n : [];\n this.assistiveText = 'Deselected all items.';\n }\n\n this._validate(true, false);\n } else {\n this.updateValue(e.detail.value, e.detail.selected);\n this.assistiveText = e.detail.selected\n ? `Selected ${e.detail.value}`\n : `Deselected ${e.detail.value}`;\n }\n\n this._updateSelectedOptions();\n\n // close listbox\n if (!this.multiple) {\n this.open = false;\n }\n\n // emit selected value\n this.emitValue();\n }\n\n private _handleBlur(e: any) {\n const relatedTarget = e.detail.origEvent.relatedTarget;\n\n if (\n !relatedTarget ||\n (relatedTarget?.localName !== 'kyn-dropdown-option' &&\n relatedTarget.localName !== 'kyn-dropdown')\n ) {\n this.open = false;\n }\n }\n\n private _handleClickOut(e: Event) {\n if (!e.composedPath().includes(this)) {\n this.open = false;\n }\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n // preserve FormMixin connectedCallback function\n this._onConnected();\n\n document.addEventListener('click', (e) => this._handleClickOut(e));\n\n // capture child options click event\n this.addEventListener('on-click', (e: any) => this._handleClick(e));\n this.addEventListener('on-remove-option', () => this._handleRemoveOption());\n\n // capture child options blur event\n this.addEventListener('on-blur', (e: any) => this._handleBlur(e));\n }\n\n override disconnectedCallback() {\n // preserve FormMixin disconnectedCallback function\n this._onDisconnected();\n\n document.removeEventListener('click', (e) => this._handleClickOut(e));\n this.removeEventListener('on-click', (e: any) => this._handleClick(e));\n this.removeEventListener('on-remove-option', () =>\n this._handleRemoveOption()\n );\n this.removeEventListener('on-blur', (e: any) => this._handleBlur(e));\n\n super.disconnectedCallback();\n }\n\n private updateValue(value: string, selected = false) {\n // set value\n if (this.multiple) {\n const values =\n this.value === '' ? [] : JSON.parse(JSON.stringify(this.value));\n\n // update array\n if (selected) {\n values.push(value);\n } else {\n const index = values.indexOf(value);\n values.splice(index, 1);\n }\n\n this.value = values;\n } else {\n this.value = value;\n }\n\n this._validate(true, false);\n\n // reset focus\n if (!this.multiple) {\n if (this.searchable) {\n this.searchEl.focus();\n } else {\n this.buttonEl.focus();\n }\n }\n }\n\n private _validate(interacted: Boolean, report: Boolean) {\n // set validity flags\n const Validity = {\n customError: this.invalidText !== '',\n valueMissing:\n this.required &&\n (!this.value ||\n (this.multiple && !this.value.length) ||\n (!this.multiple && this.value === '')),\n };\n\n // set validationMessage\n const InternalMsg =\n this.required && !this.value.length ? 'Please fill out this field.' : '';\n const ValidationMessage =\n this.invalidText !== '' ? this.invalidText : InternalMsg;\n\n // set validity on custom element, anchor to buttonEl\n this._internals.setValidity(Validity, ValidationMessage, this.buttonEl);\n\n // set internal validation message if value was changed by user input\n if (interacted) {\n this._internalValidationMsg = InternalMsg;\n }\n\n // focus the buttonEl to show validity\n if (report) {\n this._internals.reportValidity();\n }\n }\n\n private emitValue() {\n const event = new CustomEvent('on-change', {\n detail: {\n value: this.value,\n },\n });\n this.dispatchEvent(event);\n }\n\n private _emitSearch() {\n const event = new CustomEvent('on-search', {\n detail: {\n searchText: this.searchText,\n },\n });\n this.dispatchEvent(event);\n }\n\n override willUpdate(changedProps: any) {\n if (changedProps.has('textStrings')) {\n this._textStrings = deepmerge(_defaultTextStrings, this.textStrings);\n }\n }\n\n override updated(changedProps: any) {\n // preserve FormMixin updated function\n this._onUpdated(changedProps);\n\n if (changedProps.has('value')) {\n this._updateOptions();\n\n const Slot: any = this.shadowRoot?.querySelector('slot#children');\n const Options: Array<any> = Slot.assignedElements().filter(\n (option: any) => !option.disabled\n );\n const SelectedOptions: Array<any> = Options.filter(\n (option: any) => option.selected\n );\n\n // sync \"Select All\" checkbox state\n this.selectAllChecked = SelectedOptions.length === Options.length;\n\n // sync \"Select All\" indeterminate state\n this.selectAllIndeterminate =\n SelectedOptions.length < Options.length && SelectedOptions.length > 0;\n\n this._updateTags();\n this._updateSelectedText();\n }\n\n if (changedProps.has('open') || changedProps.has('openDirection')) {\n if (this.open && !this.searchable) {\n // focus listbox if not searchable\n this.listboxEl.focus({ preventScroll: true });\n this.assistiveText =\n 'Selecting items. Use up and down arrow keys to navigate.';\n }\n\n if (this.openDirection === 'up') {\n this._openUpwards = true;\n } else if (this.openDirection === 'down') {\n this._openUpwards = false;\n } else if (this.open) {\n const openThreshold = 0.6;\n this._openUpwards =\n this.buttonEl.getBoundingClientRect().top >\n window.innerHeight * openThreshold;\n }\n\n if (this.open && !this.multiple) {\n this.options\n .find((option) => option.selected)\n ?.scrollIntoView({ block: 'nearest' });\n }\n }\n\n if (changedProps.has('multiple')) {\n // set multiple for each option\n this.options.forEach((option: any) => {\n option.multiple = this.multiple;\n });\n }\n\n if (changedProps.has('searchText') && this.searchEl) {\n this.searchEl.value = this.searchText;\n }\n\n if (changedProps.has('allowAddOption')) {\n this.updateChildOptions();\n }\n }\n\n // add selected options to Tags array\n private _updateTags() {\n if (this.multiple) {\n const Options: any = Array.from(\n this.querySelectorAll('kyn-dropdown-option')\n );\n const Tags: Array<object> = [];\n\n if (Options) {\n Options.forEach((option: any) => {\n if (option.selected) {\n Tags.push({\n value: option.value,\n text: option.textContent,\n disabled: option.disabled,\n });\n }\n });\n\n this._tags = Tags;\n }\n }\n }\n\n private _updateOptions() {\n const Options: any = Array.from(\n this.querySelectorAll('kyn-dropdown-option')\n );\n\n Options.forEach((option: any) => {\n // set option multiple state\n option.multiple = this.multiple;\n\n if (this.multiple) {\n const Selected = this.value.includes(option.value);\n // set option selected state\n option.selected = Selected;\n } else {\n option.selected = this.value === option.value;\n }\n });\n }\n\n private _handleInputNewOption(e: Event) {\n const target = e.target as HTMLInputElement;\n this.newOptionValue = target.value;\n }\n\n private _handleRemoveOption() {\n this.assistiveText = 'MY option removed ';\n setTimeout(() => {\n this.open = false;\n this.buttonEl.focus();\n }, 100);\n }\n\n private _updateSelectedText() {\n // update selected option text\n const AllOptions: any = Array.from(\n this.querySelectorAll('kyn-dropdown-option')\n );\n\n if (!this.multiple) {\n if (AllOptions.length && this.value !== '') {\n const option = AllOptions.find(\n (option: any) => option.value === this.value\n );\n if (option) {\n this.text = option.textContent.trim();\n } else {\n this.text = '';\n console.warn(`No dropdown option found with value: ${this.value}`);\n }\n }\n\n // set search input value\n if (this.searchable && this.text) {\n this.searchText = this.text === this.placeholder ? '' : this.text;\n this.searchEl.value = this.searchText;\n }\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-dropdown': Dropdown;\n }\n}\n"],"names":["_defaultTextStrings","title","selectedOptions","requiredText","errorText","clearAll","clear","addItem","add","KEY","Dropdown","FormMixin","LitElement","constructor","this","label","size","inline","caption","placeholder","open","searchable","filterSearch","multiple","required","hideLabel","disabled","hideTags","selectAll","selectAllText","menuMinWidth","openDirection","selectAllChecked","selectAllIndeterminate","textStrings","allowAddOption","_textStrings","newOptionValue","text","searchText","assistiveText","_openUpwards","_tags","searchTextEntered","prevSearchKeydownIndex","render","html","name","_handleLabelClick","_a","classMap","wrapper","select","_isInvalid","handleClick","e","handleButtonKeydown","preventDefault","stopPropagation","value","length","handleClearMultiple","unsafeSVG","clearIcon","handleSearchKeydown","handleSearchInput","handleSearchClick","downIcon","options","upwards","handleListKeydown","handleListBlur","_handleInputNewOption","_onAddOptionInputKeydown","_onAddOptionInputFocus","_handleAddOption","handleSlotChange","handleClear","renderHelperContent","key","buttonEl","focus","handleKeyboard","v","trim","dispatchEvent","CustomEvent","detail","map","tag","handleTagClear","errorIcon","invalidText","_internalValidationMsg","firstUpdated","updateChildOptions","_updateOptions","_updateSelectedText","shadowRoot","querySelector","assignedElements","flatten","forEach","option","tagName","searchEl","keyCode","o","highlighted","target","relatedTarget","closest","classList","contains","SPACEBAR_KEY_CODE","visibleOptions","Array","from","querySelectorAll","filter","style","display","highlightedEl","find","selectedEl","selected","highlightedIndex","indexOf","includes","isListboxElOpened","openDropdown","clearMultipleEl","setTimeout","addOptionInputEl","scrollIntoView","block","_handleClick","nextIndex","DisabledSelectedOptions","_validate","_updateSelectedOptions","emitValue","event","updateValue","_emitSearch","findIndex","innerHTML","toLowerCase","startsWith","_handleBlur","origEvent","localName","_handleClickOut","composedPath","connectedCallback","super","_onConnected","document","addEventListener","_handleRemoveOption","disconnectedCallback","_onDisconnected","removeEventListener","values","JSON","parse","stringify","push","index","splice","interacted","report","Validity","customError","valueMissing","InternalMsg","ValidationMessage","_internals","setValidity","reportValidity","willUpdate","changedProps","has","deepmerge","updated","_onUpdated","Options","SelectedOptions","_updateTags","listboxEl","preventScroll","openThreshold","getBoundingClientRect","top","window","innerHeight","_b","Tags","textContent","Selected","AllOptions","console","warn","styles","DropdownScss","__decorate","property","type","String","prototype","Boolean","Object","state","queryAssignedElements","selector","query","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsBA,MAAMA,EAAsB,CAC1BC,MAAO,WACPC,gBAAiB,2BACjBC,aAAc,WACdC,UAAW,QACXC,SAAU,YACVC,MAAO,QACPC,QAAS,cACTC,IAAK,OAGDC,EACG,QADHA,EAEI,SAFJA,EAGO,YAHPA,EAIK,UAcE,IAAAC,EAAN,cAAuBC,EAAUC,IAAjC,WAAAC,uBAKLC,KAAKC,MAAG,GAIRD,KAAIE,KAAG,KAIPF,KAAMG,QAAG,EAITH,KAAOI,QAAG,GAIVJ,KAAWK,YAAG,GAIdL,KAAIM,MAAG,EAIPN,KAAUO,YAAG,EAIbP,KAAYQ,cAAG,EAIfR,KAAQS,UAAG,EAIXT,KAAQU,UAAG,EAIXV,KAASW,WAAG,EAIZX,KAAQY,UAAG,EAIXZ,KAAQa,UAAG,EAIXb,KAASc,WAAG,EAIZd,KAAae,cAAG,aAIhBf,KAAYgB,aAAG,UAIfhB,KAAaiB,cAA2B,OAMxCjB,KAAgBkB,kBAAG,EAMnBlB,KAAsBmB,wBAAG,EAIzBnB,KAAWoB,YAAGlC,EAIdc,KAAcqB,gBAAG,EAMjBrB,KAAYsB,aAAGpC,EAOfc,KAAcuB,eAAG,GAOjBvB,KAAIwB,KAAG,GAMPxB,KAAUyB,WAAG,GAObzB,KAAa0B,cAAG,yBAwDhB1B,KAAY2B,cAAG,EAOf3B,KAAK4B,MAAkB,GAKvB5B,KAAiB6B,mBAAQ,EAKzB7B,KAAsB8B,wBAAI,CAqgC3B,CAngCU,MAAAC,SACP,OAAOC,CAAI;;;oBAGKhC,KAAKY;gBACTZ,KAAKM;kBACHN,KAAKG;sBACDH,KAAKO;;;sBAGLP,KAAKiC;8BACGjC,KAAKW,WAAaX,KAAKG,OAAS,UAAY;gBAC1DH,KAAKiC;0BACKjC,KAAKY;mBACZ,IAAMZ,KAAKkC;;YAElBlC,KAAKU,SACHsB,CAAI;;wBAEMhC,KAAKsB,aAAajC;;8BAEM,UAAnBW,KAAKsB,oBAAc,IAAAa,OAAA,EAAAA,EAAA9C,eAAgB;;iBAGlD;YACFW,KAAKC;;;;;kBAKCmC,EAAS,CACfC,SAAS,EACT/B,KAAMN,KAAKM;;;;uBAKA8B,EAAS,CAChBE,QAAQ,EACR,gBAAgB,EAChB,WAA0B,OAAdtC,KAAKE,KACjB,WAA0B,OAAdF,KAAKE,KACjBC,OAAQH,KAAKG;uCAEUH,KAAKiC;8BACdjC,KAAKM;;;mBAGhBN,KAAKiC;qBACHjC,KAAKiC;sBACJjC,KAAKsB,aAAanC;0BACda,KAAKU;0BACLV,KAAKY;yBACNZ,KAAKuC;yBACLvC,KAAKY,SAAW,GAAK;uBACvB,IAAMZ,KAAKwC;yBACRC,GAAWzC,KAAK0C,oBAAoBD;2BAClCA,IACPzC,KAAKO,YACRkC,EAAEE,gBACH;sBAEMF,GAAWA,EAAEG;;gBAEpB5C,KAAKS,UAAYT,KAAK6C,MAAMC,OAC1Bd,CAAI;;;oCAGchC,KAAK6C,MAChBC;kCACS9C,KAAKY;8BACTZ,KAAKsB,aAAa9B;+BAChBiD,GAAazC,KAAK+C,oBAAoBN;;wBAE9CzC,KAAK6C,MAAMC;;2BAERE,EAAUC;;;oBAInB;gBACFjD,KAAKO,WACHyB,CAAI;;;;oCAIchC,KAAKK;8BACXL,KAAKyB;kCACDzB,KAAKY;sCACDZ,KAAKY;iCACT6B,GAAWzC,KAAKkD,oBAAoBT;+BACtCA,GAAWzC,KAAKmD,kBAAkBV;8BACnCA,GAAWA,EAAEG;+BACZH,GAAWzC,KAAKoD,kBAAkBX;;oBAGhDT,CAAI;;+BAESI,EAAS,CAChB,mBAAkC,KAAdpC,KAAKwB;;wBAGzBxB,KAAKS,UAEY,KAAfT,KAAK6C,MADL7C,KAAKK,YAGLL,KAAKwB;;;;yCAIUwB,EAAUK;;;;;sBAK7BjB,EAAS,CACfkB,SAAS,EACThD,KAAMN,KAAKM,KACXiD,QAASvD,KAAK2B;6BAED3B,KAAKM;yBACTN,KAAKwD;sBACRxD,KAAKyD;;gBAEXzD,KAAKqB,eACHW,CAAI;;;;;sCAKgBhC,KAAKsB,aAAa7B;iCACvBO,KAAKuB;;iCAELvB,KAAK0D;mCACH1D,KAAK2D;iCACP3D,KAAK4D;;;;;;oCAMF5D,KAAK6D;;0BAEf7D,KAAKsB,aAAa5B;;;oBAI1B;;2DAEyCM,KAAKiC;kBAC9CjC,KAAKS,UAAYT,KAAKc,UACpBkB,CAAI;;;;;oCAKYhC,KAAKkB;yCACAlB,KAAKmB;oCACVnB,KAAKY;;0BAEfZ,KAAKe;;sBAGX;;;;gCAIY,IAAMf,KAAK8D;;;;;YAKX,KAApB9D,KAAKyB,WACHO,CAAI;;8BAEYhC,KAAKY;;;;gCAIHZ,KAAKsB,aAAa/B;2BACtBkD,GAAazC,KAAK+D,YAAYtB;;;uBAGnCO,EAAUC;;;gBAInB;;UAEJjD,KAAKgE;;KAGZ,CAEO,wBAAAL,CAAyBlB,GAE/B,OADAA,EAAEG,kBACMH,EAAEwB,KACR,KAAKtE,EACHK,KAAK6D,mBACL,MACF,KAAKlE,EACHK,KAAKuB,eAAiB,GACtBvB,KAAKM,MAAO,EACZN,KAAKkE,SAASC,QACd,MACF,KAAKxE,EACHK,KAAKoE,eAAe3B,EAAG,GAAI,aAC3B,MACF,KAAK9C,EACHK,KAAKoE,eAAe3B,EAAG,GAAI,aAGhC,CAEO,sBAAAmB,GACN5D,KAAK0B,cAAgB,sBACtB,CAEO,gBAAAmC,GACN,MAAMQ,EAAIrE,KAAKuB,eAAe+C,OACzBD,IACLrE,KAAKuE,cACH,IAAIC,YAAY,gBAAiB,CAAEC,OAAQ,CAAE5B,MAAOwB,MAEtDrE,KAAKuB,eAAiB,GACvB,CAEO,mBAAAyC,GACN,OAAOhC,CAAI;UAELhC,KAAKS,WAAaT,KAAKa,UAAYb,KAAK4B,MAAMkB,OAC1Cd,CAAI;;;;+BAIahC,KAAKsB,aAAalC;;oBAE7BY,KAAK4B,MAAM8C,KAAKC,GACT3C,CAAI;;;gCAGC2C,EAAInD;oCACAxB,KAAKY,UAAY+D,EAAI/D;oCACrB,IAAMZ,KAAK4E,eAAeD;;;;gBAMhD;UAGa,KAAjB3E,KAAKI,QACD4B,CAAI;qDACmChC,KAAKY;oBACtCZ,KAAKI;;gBAGX;UAGJJ,KAAKuC,WACDP,CAAI;;;;;4BAKUhC,KAAKsB,aAAahC;iCACbU,KAAKsB,aAAahC;uBAC5B0D,EAAU6B;;oBAEb7E,KAAK8E,aAAe9E,KAAK+E;;gBAG/B;;;;;;;;YASF/E,KAAK0B;;;KAId,CAEQ,YAAAsD,GAEkB,KAArBhF,KAAKK,cACHL,KAAKO,WACPP,KAAKK,YAAc,SAEfL,KAAKS,SACPT,KAAKK,YAAc,eAEnBL,KAAKK,YAAc,mBAI1B,CAEO,gBAAAyD,GACN9D,KAAKiF,qBACLjF,KAAKkF,iBACLlF,KAAKmF,qBACN,CAEO,kBAAAF,UAEsB,QAAf9C,EAAAnC,KAAKoF,kBAAU,IAAAjD,OAAA,EAAAA,EAAEkD,cAAc,cACvBC,iBAAiB,CAAEC,SAAS,IAGzCC,SAASC,IACQ,wBAAnBA,EAAOC,UACRD,EAAepE,eAAiBrB,KAAKqB,eACvC,GAEJ,CAEO,WAAAmB,GACDxC,KAAKY,WACRZ,KAAKM,MAAQN,KAAKM,KAGdN,KAAKO,WACPP,KAAK2F,SAASxB,QAEdnE,KAAKkE,SAASC,QAGnB,CAEO,iBAAAjC,GACDlC,KAAKY,WACRZ,KAAKM,MAAQN,KAAKM,KAEdN,KAAKO,WACPP,KAAK2F,SAASxB,QAEdnE,KAAKkE,SAASC,QAGnB,CAEO,mBAAAzB,CAAoBD,GAC1BzC,KAAKoE,eAAe3B,EAAGA,EAAEmD,QAAS,SACnC,CAEO,iBAAApC,CAAkBf,GACH,IAEjBA,EAAEmD,SACJnD,EAAEE,iBAGJ3C,KAAKoE,eAAe3B,EAAGA,EAAEmD,QAAS,OACnC,CAEO,cAAAnC,CAAehB,GACrBzC,KAAKsD,QAAQkC,SAASK,GAAOA,EAAEC,aAAc,IAC7C,MAAMC,EAAStD,EAAEuD,cAGfD,IACCA,EAAOE,QAAQ,wBACdF,EAAOG,UAAUC,SAAS,WAC1BJ,EAAOE,QAAQ,kBAKnBjG,KAAKM,MAAO,EACZN,KAAK0B,cAAgB,yBACtB,CAEO,cAAA0C,CAAe3B,EAAQmD,EAAiBG,SAC9C,MAAMK,EAAoB,CAAC,EAAG,IAOxBC,EAAiB,IAClBC,MAAMC,MAAoB,UAAfvG,KAAKoF,kBAAU,IAAAjD,OAAA,EAAAA,EAAEqE,iBAAiB,iBAAkB,OAC/DxG,KAAKsD,QAAQmD,QAAQhB,GAAyC,SAAzBA,EAAOiB,MAAMC,WAIjDC,EAAgBP,EAAeQ,MAClCpB,GAAgBA,EAAOK,cAEpBgB,EAAaT,EAAeQ,MAAMpB,GAAgBA,EAAOsB,WAC/D,IAAIC,EAAmBJ,EACnBP,EAAeY,QAAQL,GACvBP,EAAeQ,MAAMpB,GAAgBA,EAAOsB,WAC5CV,EAAeY,QAAQH,GACvB,EAGAV,EAAkBc,SAAStB,IAC7BnD,EAAEE,iBAGJ,MAAMwE,EAAoBnH,KAAKM,KAE/B,GAAe,WAAXyF,GAAkC,cAAXA,EAAwB,CACjD,IAAIqB,EACFhB,EAAkBc,SAAStB,IA/BR,KAgCnBA,GA/BwB,IAgCxBA,GA/BsB,IAgCtBA,EAEF,GAAInD,EAAEsD,SAAW/F,KAAKqH,iBApCD,KAoCoBzB,IACvCwB,GAAe,EACff,EAAeW,GAAkBlB,aAAc,EAC/CO,EAAeW,GAAkBD,UAC9BV,EAAeW,GAAkBD,SACpCC,EAAmB,EAzCA,KA0CfpB,GAA4B,OAG9BwB,IACFpH,KAAKM,MAAO,EAGVN,KAAKqB,gBACM,WAAX0E,GAlDiB,KAmDjBH,EAEA0B,YAAW,WACc,QAAvBnF,EAAAnC,KAAKuH,wBAAkB,IAAApF,GAAAA,EAAAgC,OAAO,GAC7B,KAGEnE,KAAKS,UAA2B,KAAfT,KAAK6C,OACzBwD,EAAeW,GAAkBQ,eAAe,CAC9CC,MAAO,YAKhB,CACD,OAAQ7B,GACN,KAAK,EACL,KAAK,GACL,KArEqB,GAyFnB,OAlBAS,EAAeW,GAAkBlB,aAAc,OAC3CqB,IACEnH,KAAKS,UACP4F,EAAeW,GAAkBD,UAC9BV,EAAeW,GAAkBD,SACpC/G,KAAK0H,aAAa,CAChBjD,OAAQ,CACN5B,MAAOwD,EAAeW,GAAkBnE,MACxCkE,SAAUV,EAAeW,GAAkBD,cAI/CV,EAAeb,SAAS/C,GAAOA,EAAEsE,UAAW,IAC5CV,EAAeW,GAAkBD,UAAW,EAC5C/G,KAAKM,MAAO,EACZN,KAAK0B,cAAgB,YAAY2E,EAAeW,GAAkBnE,WAKxE,KA1F0B,GA0FA,CAExB,IAAI8E,EACDf,GAAkBE,EAEfE,IAAqBX,EAAevD,OAAS,EAC7C,EACAkE,EAAmB,EAHnB,EAmBN,OAbIX,EAAesB,GAAW/G,WAC5B+G,EACEA,IAActB,EAAevD,OAAS,EAAI,EAAI6E,EAAY,GAG9DtB,EAAesB,GAAWxD,QAC1BkC,EAAeW,GAAkBlB,aAAc,EAC/CO,EAAesB,GAAW7B,aAAc,EAGxCO,EAAesB,GAAWH,eAAe,CAAEC,MAAO,iBAElDzH,KAAK0B,cAAgB2E,EAAesB,GAAWnG,KAEhD,CACD,KAlHwB,GAkHA,CAEtB,IAAImG,EACmB,IAArBX,EACIX,EAAevD,OAAS,EACxBkE,EAAmB,EAgBzB,OAbIX,EAAesB,GAAW/G,WAC5B+G,EACgB,IAAdA,EAAkBtB,EAAevD,OAAS,EAAI6E,EAAY,GAG9DtB,EAAesB,GAAWxD,QAC1BkC,EAAeW,GAAkBlB,aAAc,EAC/CO,EAAesB,GAAW7B,aAAc,EAGxCO,EAAesB,GAAWH,eAAe,CAAEC,MAAO,iBAElDzH,KAAK0B,cAAgB2E,EAAesB,GAAWnG,KAEhD,CACD,KAxIsB,GAoJpB,OAVAxB,KAAKM,MAAO,EAGRN,KAAKO,WACPP,KAAK2F,SAASxB,QAEdnE,KAAKkE,SAASC,aAGhBnE,KAAK0B,cAAgB,0BAGvB,QACE,OAGL,CAEO,mBAAAqB,CAAoBN,SAI1B,GAHAA,EAAEG,kBAGE5C,KAAKS,SAAU,CACjB,MAEMmH,GAF2B,QAAfzF,EAAAnC,KAAKoF,kBAAU,IAAAjD,OAAA,EAAAA,EAAEkD,cAAc,kBAChBC,mBACmBmB,QACjDhB,GAAgBA,EAAOsB,UAAYtB,EAAO7E,WAC3C8D,KAAKe,GAAgBA,EAAO5C,QAE9B7C,KAAK6C,MAAQ+E,EAAwB9E,OACjC8E,EACA,EACL,MACC5H,KAAK6C,MAAQ,GAGf7C,KAAK6H,WAAU,GAAM,GACrB7H,KAAK8H,yBACL9H,KAAK+H,YAEL,MAAMC,EAAQ,IAAIxD,YAAY,eAAgB,CAC5CC,OAAQ,CACN5B,MAAO7C,KAAK6C,SAGhB7C,KAAKuE,cAAcyD,EACpB,CAEO,cAAApD,CAAeD,GAErB3E,KAAKiI,YAAYtD,EAAI9B,OAAO,GAC5B7C,KAAK8H,yBACL9H,KAAK+H,WACN,CAEO,WAAAhE,CAAYtB,GAClBA,EAAEG,kBAGF5C,KAAKwB,KAAO,GACZxB,KAAKyB,WAAa,GAClBzB,KAAK2F,SAAS9C,MAAQ,GAEtB7C,KAAKkI,cAEDlI,KAAKQ,cAEPR,KAAKsD,QAAQoB,KAAKe,IAChBA,EAAOiB,MAAMC,QAAU,OAAO,IAK7B3G,KAAKS,WACRT,KAAK6C,MAAQ,GACb7C,KAAK6H,WAAU,GAAM,GACrB7H,KAAK8H,yBACL9H,KAAK+H,YAER,CAEO,iBAAA3E,CAAkBX,GACxBA,EAAEG,kBACF5C,KAAKM,MAAO,CACb,CAEO,mBAAA4C,CAAoBT,GAC1BA,EAAEG,kBAEF,MAEM6C,EAASzF,KAAKsD,QAAQuD,MAAMpB,GAAWA,EAAOK,cAC9CkB,EAAmBhH,KAAKsD,QAAQ6E,WACnC1C,GAAWA,EAAOK,cAErB9F,KAAK6B,mBAAoB,EANF,KAQnBY,EAAEmD,UACJ5F,KAAK6B,mBAAoB,EACrB4D,GACEzF,KAAK8B,yBAA2BkF,IAC9BhH,KAAKS,SACPgF,EAAOsB,UAAYtB,EAAOsB,UAE1B/G,KAAKsD,QAAQkC,SAAS/C,GAAOA,EAAEsE,UAAW,IAC1CtB,EAAOsB,UAAW,EAClB/G,KAAKM,MAAO,GAEdN,KAAKiI,YAAYxC,EAAO5C,MAAO4C,EAAOsB,WAGpCtB,EAAOsB,UACT/G,KAAK0B,cAAgB,YAAY+D,EAAO2C,YACxCpI,KAAK8B,uBAAyBkF,GAE9BhH,KAAK0B,cAAgB,cAAc+D,EAAO2C,aAG5CpI,KAAK0B,cAAgB,oBA5BD,KAiCpBe,EAAEmD,UACJ5F,KAAKM,MAAO,EACZN,KAAKkE,SAASC,QAEjB,CAEO,iBAAAhB,CAAkBV,GACxB,MAAMI,EAAQJ,EAAEsD,OAAOlD,MAMvB,GALA7C,KAAKyB,WAAaoB,EAClB7C,KAAKM,MAAO,EAEZN,KAAKkI,cAEDlI,KAAKQ,aAEPR,KAAKsD,QAAQoB,KAAKe,IACHA,EAAOjE,KACX6G,cAAcnB,SAASrE,EAAMwF,eACpC5C,EAAOiB,MAAMC,QAAU,QAEvBlB,EAAOiB,MAAMC,QAAU,MACxB,QAEE,CAEL,MAAMrD,EAAUtD,KAAKsD,QAAQmD,QAAQhB,GACtBA,EAAOjE,KACR6G,cAAcC,WAAWzF,EAAMwF,iBAI7CrI,KAAKsD,QAAQkC,SAASC,GAAYA,EAAOK,aAAc,IAGzC,KAAVjD,GAAgBS,EAAQR,SAC1BQ,EAAQ,GAAGwC,aAAc,EACzBxC,EAAQ,GAAGkE,eAAe,CAAEC,MAAO,YAC/BzH,KAAK6B,oBAAmB7B,KAAK0B,cAAgB,kBAEpD,CACF,CAEO,sBAAAoG,GAEN9H,KAAKsD,QAAQkC,SAASC,IAChBzF,KAAKS,SACPgF,EAAOsB,SAAW/G,KAAK6C,MAAMqE,SAASzB,EAAO5C,OAE7C4C,EAAOsB,SAAW/G,KAAK6C,QAAU4C,EAAO5C,KACzC,GAEJ,CAEO,YAAA6E,CAAajF,SACnB,GAAuB,cAAnBA,EAAEgC,OAAO5B,MAAuB,CAClC7C,KAAKkB,iBAAmBuB,EAAEgC,OAAOsC,SAEjC,MAEMa,GAF2B,QAAfzF,EAAAnC,KAAKoF,kBAAU,IAAAjD,OAAA,EAAAA,EAAEkD,cAAc,kBAChBC,mBACmBmB,QACjDhB,GAAgBA,EAAOsB,UAAYtB,EAAO7E,WAC3C8D,KAAKe,GAAgBA,EAAO5C,QAE1BJ,EAAEgC,OAAOsC,UACX/G,KAAK6C,MAAQ7C,KAAKsD,QACfmD,QACEhB,IAAYA,EAAO7E,UAAa6E,EAAO7E,UAAY6E,EAAOsB,WAE5DrC,KAAKe,GACGA,EAAO5C,QAElB7C,KAAK0B,cAAgB,wBAErB1B,KAAK6C,MAAQ+E,EAAwB9E,OACjC8E,EACA,GACJ5H,KAAK0B,cAAgB,yBAGvB1B,KAAK6H,WAAU,GAAM,EACtB,MACC7H,KAAKiI,YAAYxF,EAAEgC,OAAO5B,MAAOJ,EAAEgC,OAAOsC,UAC1C/G,KAAK0B,cAAgBe,EAAEgC,OAAOsC,SAC1B,YAAYtE,EAAEgC,OAAO5B,QACrB,cAAcJ,EAAEgC,OAAO5B,QAG7B7C,KAAK8H,yBAGA9H,KAAKS,WACRT,KAAKM,MAAO,GAIdN,KAAK+H,WACN,CAEO,WAAAQ,CAAY9F,GAClB,MAAMuD,EAAgBvD,EAAEgC,OAAO+D,UAAUxC,gBAGtCA,GAC6B,yBAA7BA,eAAAA,EAAeyC,YACc,iBAA5BzC,EAAcyC,aAEhBzI,KAAKM,MAAO,EAEf,CAEO,eAAAoI,CAAgBjG,GACjBA,EAAEkG,eAAezB,SAASlH,QAC7BA,KAAKM,MAAO,EAEf,CAEQ,iBAAAsI,GACPC,MAAMD,oBAGN5I,KAAK8I,eAELC,SAASC,iBAAiB,SAAUvG,GAAMzC,KAAK0I,gBAAgBjG,KAG/DzC,KAAKgJ,iBAAiB,YAAavG,GAAWzC,KAAK0H,aAAajF,KAChEzC,KAAKgJ,iBAAiB,oBAAoB,IAAMhJ,KAAKiJ,wBAGrDjJ,KAAKgJ,iBAAiB,WAAYvG,GAAWzC,KAAKuI,YAAY9F,IAC/D,CAEQ,oBAAAyG,GAEPlJ,KAAKmJ,kBAELJ,SAASK,oBAAoB,SAAU3G,GAAMzC,KAAK0I,gBAAgBjG,KAClEzC,KAAKoJ,oBAAoB,YAAa3G,GAAWzC,KAAK0H,aAAajF,KACnEzC,KAAKoJ,oBAAoB,oBAAoB,IAC3CpJ,KAAKiJ,wBAEPjJ,KAAKoJ,oBAAoB,WAAY3G,GAAWzC,KAAKuI,YAAY9F,KAEjEoG,MAAMK,sBACP,CAEO,WAAAjB,CAAYpF,EAAekE,GAAW,GAE5C,GAAI/G,KAAKS,SAAU,CACjB,MAAM4I,EACW,KAAfrJ,KAAK6C,MAAe,GAAKyG,KAAKC,MAAMD,KAAKE,UAAUxJ,KAAK6C,QAG1D,GAAIkE,EACFsC,EAAOI,KAAK5G,OACP,CACL,MAAM6G,EAAQL,EAAOpC,QAAQpE,GAC7BwG,EAAOM,OAAOD,EAAO,EACtB,CAED1J,KAAK6C,MAAQwG,CACd,MACCrJ,KAAK6C,MAAQA,EAGf7C,KAAK6H,WAAU,GAAM,GAGhB7H,KAAKS,WACJT,KAAKO,WACPP,KAAK2F,SAASxB,QAEdnE,KAAKkE,SAASC,QAGnB,CAEO,SAAA0D,CAAU+B,EAAqBC,GAErC,MAAMC,EAAW,CACfC,YAAkC,KAArB/J,KAAK8E,YAClBkF,aACEhK,KAAKU,YACHV,KAAK6C,OACJ7C,KAAKS,WAAaT,KAAK6C,MAAMC,SAC5B9C,KAAKS,UAA2B,KAAfT,KAAK6C,QAIxBoH,EACJjK,KAAKU,WAAaV,KAAK6C,MAAMC,OAAS,8BAAgC,GAClEoH,EACiB,KAArBlK,KAAK8E,YAAqB9E,KAAK8E,YAAcmF,EAG/CjK,KAAKmK,WAAWC,YAAYN,EAAUI,EAAmBlK,KAAKkE,UAG1D0F,IACF5J,KAAK+E,uBAAyBkF,GAI5BJ,GACF7J,KAAKmK,WAAWE,gBAEnB,CAEO,SAAAtC,GACN,MAAMC,EAAQ,IAAIxD,YAAY,YAAa,CACzCC,OAAQ,CACN5B,MAAO7C,KAAK6C,SAGhB7C,KAAKuE,cAAcyD,EACpB,CAEO,WAAAE,GACN,MAAMF,EAAQ,IAAIxD,YAAY,YAAa,CACzCC,OAAQ,CACNhD,WAAYzB,KAAKyB,cAGrBzB,KAAKuE,cAAcyD,EACpB,CAEQ,UAAAsC,CAAWC,GACdA,EAAaC,IAAI,iBACnBxK,KAAKsB,aAAemJ,EAAUvL,EAAqBc,KAAKoB,aAE3D,CAEQ,OAAAsJ,CAAQH,WAIf,GAFAvK,KAAK2K,WAAWJ,GAEZA,EAAaC,IAAI,SAAU,CAC7BxK,KAAKkF,iBAEL,MACM0F,GAD2B,QAAfzI,EAAAnC,KAAKoF,kBAAU,IAAAjD,OAAA,EAAAA,EAAEkD,cAAc,kBAChBC,mBAAmBmB,QACjDhB,IAAiBA,EAAO7E,WAErBiK,EAA8BD,EAAQnE,QACzChB,GAAgBA,EAAOsB,WAI1B/G,KAAKkB,iBAAmB2J,EAAgB/H,SAAW8H,EAAQ9H,OAG3D9C,KAAKmB,uBACH0J,EAAgB/H,OAAS8H,EAAQ9H,QAAU+H,EAAgB/H,OAAS,EAEtE9C,KAAK8K,cACL9K,KAAKmF,qBACN,CAED,GAAIoF,EAAaC,IAAI,SAAWD,EAAaC,IAAI,iBAAkB,CAQjE,GAPIxK,KAAKM,OAASN,KAAKO,aAErBP,KAAK+K,UAAU5G,MAAM,CAAE6G,eAAe,IACtChL,KAAK0B,cACH,4DAGuB,OAAvB1B,KAAKiB,cACPjB,KAAK2B,cAAe,OACf,GAA2B,SAAvB3B,KAAKiB,cACdjB,KAAK2B,cAAe,OACf,GAAI3B,KAAKM,KAAM,CACpB,MAAM2K,EAAgB,GACtBjL,KAAK2B,aACH3B,KAAKkE,SAASgH,wBAAwBC,IACtCC,OAAOC,YAAcJ,CACxB,CAEGjL,KAAKM,OAASN,KAAKS,WAGjB,QAFJ6K,EAAAtL,KAAKsD,QACFuD,MAAMpB,GAAWA,EAAOsB,kBACvB,IAAAuE,GAAAA,EAAA9D,eAAe,CAAEC,MAAO,YAE/B,CAEG8C,EAAaC,IAAI,aAEnBxK,KAAKsD,QAAQkC,SAASC,IACpBA,EAAOhF,SAAWT,KAAKS,QAAQ,IAI/B8J,EAAaC,IAAI,eAAiBxK,KAAK2F,WACzC3F,KAAK2F,SAAS9C,MAAQ7C,KAAKyB,YAGzB8I,EAAaC,IAAI,mBACnBxK,KAAKiF,oBAER,CAGO,WAAA6F,GACN,GAAI9K,KAAKS,SAAU,CACjB,MAAMmK,EAAetE,MAAMC,KACzBvG,KAAKwG,iBAAiB,wBAElB+E,EAAsB,GAExBX,IACFA,EAAQpF,SAASC,IACXA,EAAOsB,UACTwE,EAAK9B,KAAK,CACR5G,MAAO4C,EAAO5C,MACdrB,KAAMiE,EAAO+F,YACb5K,SAAU6E,EAAO7E,UAEpB,IAGHZ,KAAK4B,MAAQ2J,EAEhB,CACF,CAEO,cAAArG,GACeoB,MAAMC,KACzBvG,KAAKwG,iBAAiB,wBAGhBhB,SAASC,IAIf,GAFAA,EAAOhF,SAAWT,KAAKS,SAEnBT,KAAKS,SAAU,CACjB,MAAMgL,EAAWzL,KAAK6C,MAAMqE,SAASzB,EAAO5C,OAE5C4C,EAAOsB,SAAW0E,CACnB,MACChG,EAAOsB,SAAW/G,KAAK6C,QAAU4C,EAAO5C,KACzC,GAEJ,CAEO,qBAAAa,CAAsBjB,GAC5B,MAAMsD,EAAStD,EAAEsD,OACjB/F,KAAKuB,eAAiBwE,EAAOlD,KAC9B,CAEO,mBAAAoG,GACNjJ,KAAK0B,cAAgB,qBACrB4F,YAAW,KACTtH,KAAKM,MAAO,EACZN,KAAKkE,SAASC,OAAO,GACpB,IACJ,CAEO,mBAAAgB,GAEN,MAAMuG,EAAkBpF,MAAMC,KAC5BvG,KAAKwG,iBAAiB,wBAGxB,IAAKxG,KAAKS,SAAU,CAClB,GAAIiL,EAAW5I,QAAyB,KAAf9C,KAAK6C,MAAc,CAC1C,MAAM4C,EAASiG,EAAW7E,MACvBpB,GAAgBA,EAAO5C,QAAU7C,KAAK6C,QAErC4C,EACFzF,KAAKwB,KAAOiE,EAAO+F,YAAYlH,QAE/BtE,KAAKwB,KAAO,GACZmK,QAAQC,KAAK,wCAAwC5L,KAAK6C,SAE7D,CAGG7C,KAAKO,YAAcP,KAAKwB,OAC1BxB,KAAKyB,WAAazB,KAAKwB,OAASxB,KAAKK,YAAc,GAAKL,KAAKwB,KAC7DxB,KAAK2F,SAAS9C,MAAQ7C,KAAKyB,WAE9B,CACF,GAtsCe7B,EAAMiM,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACPtM,EAAAuM,UAAA,aAAA,GAIXJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACNtM,EAAAuM,UAAA,YAAA,GAIZJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACHxM,EAAAuM,UAAA,cAAA,GAIfJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACLtM,EAAAuM,UAAA,eAAA,GAIbJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACDtM,EAAAuM,UAAA,mBAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACLxM,EAAAuM,UAAA,YAAA,GAIbJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACCxM,EAAAuM,UAAA,kBAAA,GAInBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACGxM,EAAAuM,UAAA,oBAAA,GAIrBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDxM,EAAAuM,UAAA,gBAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDxM,EAAAuM,UAAA,gBAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACAxM,EAAAuM,UAAA,iBAAA,GAIlBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDxM,EAAAuM,UAAA,gBAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDxM,EAAAuM,UAAA,gBAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACAxM,EAAAuM,UAAA,iBAAA,GAIlBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACWtM,EAAAuM,UAAA,qBAAA,GAI7BJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACOtM,EAAAuM,UAAA,oBAAA,GAIzBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UAC6BtM,EAAAuM,UAAA,qBAAA,GAM/CJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACOxM,EAAAuM,UAAA,wBAAA,GAMzBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACaxM,EAAAuM,UAAA,8BAAA,GAI/BJ,EAAA,CADCC,EAAS,CAAEC,KAAMI,UACgBzM,EAAAuM,UAAA,mBAAA,GAIlCJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACKxM,EAAAuM,UAAA,sBAAA,GAMvBJ,EAAA,CADCO,KACkC1M,EAAAuM,UAAA,oBAAA,GAOnCJ,EAAA,CADCO,KACmB1M,EAAAuM,UAAA,sBAAA,GAOpBJ,EAAA,CADCO,KACS1M,EAAAuM,UAAA,YAAA,GAMVJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACFtM,EAAAuM,UAAA,kBAAA,GAOhBJ,EAAA,CADCO,KACwC1M,EAAAuM,UAAA,qBAAA,GAOzCJ,EAAA,CADCQ,EAAsB,CAAEC,SAAU,yBACd5M,EAAAuM,UAAA,eAAA,GAOrBJ,EAAA,CADCQ,EAAsB,CAAEC,SAAU,mCACN5M,EAAAuM,UAAA,uBAAA,GAO7BJ,EAAA,CADCU,EAAM,YACqB7M,EAAAuM,UAAA,gBAAA,GAO5BJ,EAAA,CADCU,EAAM,YACgB7M,EAAAuM,UAAA,gBAAA,GAOvBJ,EAAA,CADCU,EAAM,aACiB7M,EAAAuM,UAAA,iBAAA,GAOxBJ,EAAA,CADCU,EAAM,oBACuB7M,EAAAuM,UAAA,uBAAA,GAO9BJ,EAAA,CADCU,EAAM,sBAC6B7M,EAAAuM,UAAA,wBAAA,GAOpCJ,EAAA,CADCO,KACoB1M,EAAAuM,UAAA,oBAAA,GAOrBJ,EAAA,CADCO,KACyB1M,EAAAuM,UAAA,aAAA,GAzLfvM,EAAQmM,EAAA,CADpBW,EAAc,iBACF9M"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdownOption.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/dropdown/dropdownOption.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAGvC,OAAO,aAAa,CAAC;AACrB,OAAO,WAAW,CAAC;AAOnB;;;;;;GAMG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,MAAsB;IAE5C,oBAAoB;IAEpB,KAAK,SAAM;IAEX;;OAEG;IAEH,QAAQ,UAAS;IAEjB,6BAA6B;IAE7B,QAAQ,UAAS;IAEjB,mDAAmD;IAEnD,cAAc,UAAS;IAEvB;;;OAGG;IAEH,WAAW,UAAS;IAEpB;;OAEG;IAEH,QAAQ,UAAS;IAEjB,wBAAwB;IAExB,SAAS,UAAS;IAElB;;;OAGG;IAEH,IAAI,EAAE,GAAG,CAAM;IAEf,oEAAoE;IAEpE,aAAa,UAAS;IAGb,IAAI,SAAY;IAGhB,YAAY,SAAY;IAExB,MAAM;
|
|
1
|
+
{"version":3,"file":"dropdownOption.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/dropdown/dropdownOption.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAGvC,OAAO,aAAa,CAAC;AACrB,OAAO,WAAW,CAAC;AAOnB;;;;;;GAMG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,MAAsB;IAE5C,oBAAoB;IAEpB,KAAK,SAAM;IAEX;;OAEG;IAEH,QAAQ,UAAS;IAEjB,6BAA6B;IAE7B,QAAQ,UAAS;IAEjB,mDAAmD;IAEnD,cAAc,UAAS;IAEvB;;;OAGG;IAEH,WAAW,UAAS;IAEpB;;OAEG;IAEH,QAAQ,UAAS;IAEjB,wBAAwB;IAExB,SAAS,UAAS;IAElB;;;OAGG;IAEH,IAAI,EAAE,GAAG,CAAM;IAEf,oEAAoE;IAEpE,aAAa,UAAS;IAGb,IAAI,SAAY;IAGhB,YAAY,SAAY;IAExB,MAAM;IAiEN,UAAU,CAAC,YAAY,EAAE,GAAG;IAMrC,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,WAAW;IA0BnB,OAAO,CAAC,UAAU;CAWnB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,cAAc,CAAC;KACvC;CACF"}
|
|
@@ -61,7 +61,7 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../.
|
|
|
61
61
|
kyn-checkbox {
|
|
62
62
|
display: inline-block;
|
|
63
63
|
vertical-align: text-bottom;
|
|
64
|
-
margin-right:
|
|
64
|
+
margin-right: -4px;
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
.remove-option {
|
|
@@ -82,7 +82,6 @@ kyn-checkbox {
|
|
|
82
82
|
@pointerup=${e=>this.handleClick(e)}
|
|
83
83
|
@blur=${e=>this.handleBlur(e)}
|
|
84
84
|
>
|
|
85
|
-
<slot name="icon"></slot>
|
|
86
85
|
<span class="text">
|
|
87
86
|
${this.multiple?a`
|
|
88
87
|
<kyn-checkbox
|
|
@@ -94,10 +93,11 @@ kyn-checkbox {
|
|
|
94
93
|
notFocusable
|
|
95
94
|
.indeterminate=${this.indeterminate}
|
|
96
95
|
>
|
|
97
|
-
<slot
|
|
98
|
-
@slotchange=${e=>this.handleSlotChange(e)}
|
|
99
|
-
></slot>
|
|
100
96
|
</kyn-checkbox>
|
|
97
|
+
|
|
98
|
+
<slot
|
|
99
|
+
@slotchange=${e=>this.handleSlotChange(e)}
|
|
100
|
+
></slot>
|
|
101
101
|
`:a`
|
|
102
102
|
<slot
|
|
103
103
|
@slotchange=${e=>this.handleSlotChange(e)}
|
|
@@ -105,6 +105,7 @@ kyn-checkbox {
|
|
|
105
105
|
`}
|
|
106
106
|
</span>
|
|
107
107
|
|
|
108
|
+
<slot name="icon" style="display:flex"></slot>
|
|
108
109
|
${this.selected&&!this.multiple?a` <span class="check-icon">${t(r)}</span> `:this.allowAddOption&&this.removable?a`
|
|
109
110
|
<kyn-button
|
|
110
111
|
class="remove-option"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdownOption.js","sources":["../../../../src/components/reusable/dropdown/dropdownOption.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport '../checkbox';\nimport '../button';\n\nimport checkIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/check.svg';\nimport clearIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\n\nimport DropdownOptionScss from './dropdownOption.scss';\n\n/**\n * Dropdown option.\n * @fires on-click - Emits the option details to the parent dropdown.\n * @fires on-remove-option - Emits the option that is removed.\n * @slot unnamed - Slot for option text.\n * @slot icon - Slot for option icon. Icon size should be 16px only.\n */\n@customElement('kyn-dropdown-option')\nexport class DropdownOption extends LitElement {\n static override styles = DropdownOptionScss;\n\n /** Option value. */\n @property({ type: String })\n value = '';\n\n /** Internal text strings.\n * @internal\n */\n @property({ type: Boolean })\n selected = false;\n\n /** Option disabled state. */\n @property({ type: Boolean })\n disabled = false;\n\n /** Allow Add Option state, derived from parent. */\n @property({ type: Boolean })\n allowAddOption = false;\n\n /**\n * Option highlighted state for keyboard navigation, automatically derived.\n * @ignore\n */\n @state()\n highlighted = false;\n\n /** Multi-select state, derived from parent.\n * @ignore\n */\n @property({ type: Boolean })\n multiple = false;\n\n /** Removable option. */\n @property({ type: Boolean })\n removable = false;\n\n /**\n * Option text, automatically derived.\n * @ignore\n */\n @state()\n text: any = '';\n\n /** Determines whether the checkbox is in an indeterminate state. */\n @property({ type: Boolean, reflect: true })\n indeterminate = false;\n\n @property({ type: String, reflect: true })\n override role = 'option';\n\n @property({ type: String, reflect: true, attribute: 'aria-selected' })\n override ariaSelected = 'option';\n\n override render() {\n return html`\n <div\n class=\"option\"\n ?highlighted=${this.highlighted}\n ?selected=${this.selected}\n ?disabled=${this.disabled}\n aria-disabled=${this.disabled}\n ?multiple=${this.multiple}\n title=${this.text}\n @pointerup=${(e: any) => this.handleClick(e)}\n @blur=${(e: any) => this.handleBlur(e)}\n >\n <
|
|
1
|
+
{"version":3,"file":"dropdownOption.js","sources":["../../../../src/components/reusable/dropdown/dropdownOption.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport '../checkbox';\nimport '../button';\n\nimport checkIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/check.svg';\nimport clearIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\n\nimport DropdownOptionScss from './dropdownOption.scss';\n\n/**\n * Dropdown option.\n * @fires on-click - Emits the option details to the parent dropdown.\n * @fires on-remove-option - Emits the option that is removed.\n * @slot unnamed - Slot for option text.\n * @slot icon - Slot for option icon. Icon size should be 16px only.\n */\n@customElement('kyn-dropdown-option')\nexport class DropdownOption extends LitElement {\n static override styles = DropdownOptionScss;\n\n /** Option value. */\n @property({ type: String })\n value = '';\n\n /** Internal text strings.\n * @internal\n */\n @property({ type: Boolean })\n selected = false;\n\n /** Option disabled state. */\n @property({ type: Boolean })\n disabled = false;\n\n /** Allow Add Option state, derived from parent. */\n @property({ type: Boolean })\n allowAddOption = false;\n\n /**\n * Option highlighted state for keyboard navigation, automatically derived.\n * @ignore\n */\n @state()\n highlighted = false;\n\n /** Multi-select state, derived from parent.\n * @ignore\n */\n @property({ type: Boolean })\n multiple = false;\n\n /** Removable option. */\n @property({ type: Boolean })\n removable = false;\n\n /**\n * Option text, automatically derived.\n * @ignore\n */\n @state()\n text: any = '';\n\n /** Determines whether the checkbox is in an indeterminate state. */\n @property({ type: Boolean, reflect: true })\n indeterminate = false;\n\n @property({ type: String, reflect: true })\n override role = 'option';\n\n @property({ type: String, reflect: true, attribute: 'aria-selected' })\n override ariaSelected = 'option';\n\n override render() {\n return html`\n <div\n class=\"option\"\n ?highlighted=${this.highlighted}\n ?selected=${this.selected}\n ?disabled=${this.disabled}\n aria-disabled=${this.disabled}\n ?multiple=${this.multiple}\n title=${this.text}\n @pointerup=${(e: any) => this.handleClick(e)}\n @blur=${(e: any) => this.handleBlur(e)}\n >\n <span class=\"text\">\n ${this.multiple\n ? html`\n <kyn-checkbox\n type=\"checkbox\"\n value=${this.value}\n .checked=${this.selected}\n ?checked=${this.selected}\n ?disabled=${this.disabled}\n notFocusable\n .indeterminate=${this.indeterminate}\n >\n </kyn-checkbox>\n\n <slot\n @slotchange=${(e: any) => this.handleSlotChange(e)}\n ></slot>\n `\n : html`\n <slot\n @slotchange=${(e: any) => this.handleSlotChange(e)}\n ></slot>\n `}\n </span>\n\n <slot name=\"icon\" style=\"display:flex\"></slot>\n ${this.selected && !this.multiple\n ? html` <span class=\"check-icon\">${unsafeSVG(checkIcon)}</span> `\n : this.allowAddOption && this.removable\n ? html`\n <kyn-button\n class=\"remove-option\"\n kind=\"ghost\"\n size=\"small\"\n aria-label=\"Delete ${this.value}\"\n description=\"Delete ${this.value}\"\n ?disabled=${this.disabled}\n @click=${(e: Event) => this.handleRemoveClick(e)}\n @mousedown=${(e: Event) => e.stopPropagation()}\n @keydown=${(e: KeyboardEvent) => e.stopPropagation()}\n @focus=${(e: KeyboardEvent) => e.stopPropagation()}\n >\n <span slot=\"icon\" class=\"clear-icon\">\n ${unsafeSVG(clearIcon)}\n </span>\n </kyn-button>\n `\n : null}\n </div>\n `;\n }\n\n override willUpdate(changedProps: any) {\n if (changedProps.has('selected')) {\n this.ariaSelected = this.selected.toString();\n }\n }\n\n private handleRemoveClick(e: Event) {\n e.stopPropagation();\n const event = new CustomEvent('on-remove-option', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.value,\n },\n });\n this.dispatchEvent(event);\n }\n\n private handleSlotChange(e: any) {\n // set text prop from slotted text, for ease of access\n const nodes = e.target.assignedNodes({ flatten: true });\n let text = '';\n\n for (let i = 0; i < nodes.length; i++) {\n text += nodes[i].textContent.trim();\n }\n\n this.text = text;\n }\n\n private handleClick(e: Event) {\n // prevent click if disabled\n if (this.disabled) {\n return;\n }\n\n // update selected state\n if (this.multiple) {\n this.selected = !this.selected;\n } else {\n this.selected = true;\n }\n\n // emit selected value, bubble so it can be captured by the parent dropdown\n const event = new CustomEvent('on-click', {\n bubbles: true,\n composed: true,\n detail: {\n selected: this.selected,\n value: this.value,\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n\n private handleBlur(e: any) {\n // emit blur event, bubble so it can be captured by the parent dropdown\n const event = new CustomEvent('on-blur', {\n bubbles: true,\n composed: true,\n detail: {\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-dropdown-option': DropdownOption;\n }\n}\n"],"names":["DropdownOption","LitElement","constructor","this","value","selected","disabled","allowAddOption","highlighted","multiple","removable","text","indeterminate","role","ariaSelected","render","html","e","handleClick","handleBlur","handleSlotChange","unsafeSVG","checkIcon","handleRemoveClick","stopPropagation","clearIcon","willUpdate","changedProps","has","toString","event","CustomEvent","bubbles","composed","detail","dispatchEvent","nodes","target","assignedNodes","flatten","i","length","textContent","trim","origEvent","styles","DropdownOptionScss","__decorate","property","type","String","prototype","Boolean","state","reflect","attribute","customElement"],"mappings":"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"}
|
|
@@ -258,7 +258,7 @@ form {
|
|
|
258
258
|
transform: translateX(100%);
|
|
259
259
|
}
|
|
260
260
|
dialog::backdrop {
|
|
261
|
-
background:
|
|
261
|
+
background: rgba(0, 0, 0, 0);
|
|
262
262
|
transition: display 400ms allow-discrete, overlay 400ms allow-discrete, background-color 400ms;
|
|
263
263
|
}
|
|
264
264
|
dialog[open] {
|
|
@@ -266,7 +266,7 @@ form {
|
|
|
266
266
|
transform: none;
|
|
267
267
|
}
|
|
268
268
|
dialog[open]::backdrop {
|
|
269
|
-
|
|
269
|
+
background-color: rgba(0, 0, 0, 0.4);
|
|
270
270
|
}
|
|
271
271
|
}
|
|
272
272
|
.no-backdrop {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kyndryl-design-system/shidoka-applications",
|
|
3
|
-
"version": "2.43.
|
|
3
|
+
"version": "2.43.2",
|
|
4
4
|
"description": "Shidoka Web Components for Applications",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "index.js",
|
|
@@ -93,7 +93,7 @@
|
|
|
93
93
|
"lint-staged": "^15.4.3",
|
|
94
94
|
"lit-analyzer": "^2.0.3",
|
|
95
95
|
"lit-css-loader": "^3.0.0",
|
|
96
|
-
"playwright": "^1.53.
|
|
96
|
+
"playwright": "^1.53.1",
|
|
97
97
|
"postcss": "^8.4.21",
|
|
98
98
|
"prettier": "^2.8.2",
|
|
99
99
|
"prismjs-components-importer": "^0.2.0",
|