@kyndryl-design-system/shidoka-applications 1.3.6 → 1.3.8
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/dropdown/dropdown.d.ts.map +1 -1
- package/components/reusable/dropdown/dropdown.js +2 -2
- package/components/reusable/dropdown/dropdown.js.map +1 -1
- package/components/reusable/modal/modal.scss.js +9 -0
- package/components/reusable/modal/modal.scss.js.map +1 -1
- package/components/reusable/pagination/Pagination.d.ts +2 -0
- package/components/reusable/pagination/Pagination.d.ts.map +1 -1
- package/components/reusable/pagination/Pagination.js.map +1 -1
- package/components/reusable/table/data-table.stories.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAUvC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,2DAA2D,CAAC;AAMnE;;;;;GAKG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,+BAAgB;IAEtC,OAAgB,iBAAiB;;;;MAG/B;IAEF;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,iDAAiD;IAEjD,IAAI,SAAQ;IAEZ,kCAAkC;IAElC,MAAM,UAAS;IAEf,uCAAuC;IAEvC,OAAO,SAAM;IAEb,4BAA4B;IAE5B,WAAW,SAAM;IAEjB,qBAAqB;IAErB,IAAI,SAAM;IAEV,iCAAiC;IAEjC,IAAI,UAAS;IAEb,qCAAqC;IAErC,UAAU,UAAS;IAEnB,0CAA0C;IAE1C,QAAQ,UAAS;IAEjB,mCAAmC;IAEnC,QAAQ,UAAS;IAEjB,+BAA+B;IAE/B,QAAQ,UAAS;IAEjB,6BAA6B;IAE7B,WAAW,SAAM;IAEjB,wCAAwC;IAExC,QAAQ,UAAS;IAEjB,wEAAwE;IAExE,SAAS,UAAS;IAElB,uCAAuC;IAEvC,aAAa,SAAgB;IAE7B;;;OAGG;IAEH,KAAK,EAAE,GAAG,CAAM;IAEhB;;;OAGG;IAEH,IAAI,SAAM;IAEV;;;OAGG;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,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAwLN,YAAY;
|
|
1
|
+
{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAUvC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,2DAA2D,CAAC;AAMnE;;;;;GAKG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,+BAAgB;IAEtC,OAAgB,iBAAiB;;;;MAG/B;IAEF;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,iDAAiD;IAEjD,IAAI,SAAQ;IAEZ,kCAAkC;IAElC,MAAM,UAAS;IAEf,uCAAuC;IAEvC,OAAO,SAAM;IAEb,4BAA4B;IAE5B,WAAW,SAAM;IAEjB,qBAAqB;IAErB,IAAI,SAAM;IAEV,iCAAiC;IAEjC,IAAI,UAAS;IAEb,qCAAqC;IAErC,UAAU,UAAS;IAEnB,0CAA0C;IAE1C,QAAQ,UAAS;IAEjB,mCAAmC;IAEnC,QAAQ,UAAS;IAEjB,+BAA+B;IAE/B,QAAQ,UAAS;IAEjB,6BAA6B;IAE7B,WAAW,SAAM;IAEjB,wCAAwC;IAExC,QAAQ,UAAS;IAEjB,wEAAwE;IAExE,SAAS,UAAS;IAElB,uCAAuC;IAEvC,aAAa,SAAgB;IAE7B;;;OAGG;IAEH,KAAK,EAAE,GAAG,CAAM;IAEhB;;;OAGG;IAEH,IAAI,SAAM;IAEV;;;OAGG;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,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAwLN,YAAY;IAerB,OAAO,CAAC,gBAAgB;IAIxB;;;OAGG;IACI,cAAc;IAKrB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,cAAc;IAsHtB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,mBAAmB;IAoB3B,OAAO,CAAC,iBAAiB;IAqBzB,OAAO,CAAC,YAAY;IAwBpB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,eAAe;IAUd,iBAAiB;IAgBjB,oBAAoB;IAa7B,OAAO,CAAC,WAAW;IA8BnB,OAAO,CAAC,YAAY;IAmBpB,OAAO,CAAC,SAAS;IASR,OAAO,CAAC,YAAY,EAAE,GAAG;IAyFlC,OAAO,CAAC,eAAe;CA4BxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,QAAQ,CAAC;KAC1B;CACF"}
|
|
@@ -42,7 +42,7 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
|
|
|
42
42
|
<input
|
|
43
43
|
class="search"
|
|
44
44
|
type="text"
|
|
45
|
-
placeholder
|
|
45
|
+
placeholder=${this.placeholder}
|
|
46
46
|
value=${this.searchText}
|
|
47
47
|
?disabled=${this.disabled}
|
|
48
48
|
@keydown=${e=>this.handleSearchKeydown(e)}
|
|
@@ -128,5 +128,5 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
|
|
|
128
128
|
${this.assistiveText}
|
|
129
129
|
</div>
|
|
130
130
|
</div>
|
|
131
|
-
`}firstUpdated(){""===this.placeholder&&(this.multiple?this.placeholder="Select items":this.placeholder="Select an option")}handleSlotChange(){this.resetSelection()}resetSelection(){this._updateChildren(),this.emitValue()}handleClick(){this.disabled||(this.open=!this.open,this.searchable&&this.searchEl.focus())}handleButtonKeydown(e){this.handleKeyboard(e,e.keyCode,"button")}handleListKeydown(e){9!==e.keyCode&&e.preventDefault(),this.handleKeyboard(e,e.keyCode,"list")}handleListBlur(e){this.options.forEach((e=>e.highlighted=!1)),(!e.relatedTarget||e.relatedTarget&&"kyn-dropdown-option"!==e.relatedTarget.localName)&&(this.open=!1),this.assistiveText="Dropdown menu options."}handleKeyboard(e,t,i){const s=[0,32],l=this.options.find((e=>e.highlighted)),o=this.options.find((e=>e.selected)),a=l?this.options.indexOf(l):this.options.find((e=>e.selected))?this.options.indexOf(o):0;if(s.includes(t)&&e.preventDefault(),"button"===i){(s.includes(t)||13===t||40==t||38==t)&&(this.open=!0,this.options[a].highlighted=!0,this.multiple||""===this.value||this.options[a].scrollIntoView({block:"nearest"}))}switch(t){case 13:return void("list"===i&&(this.updateValue(this.options[a].value,!this.options[a].selected),this.assistiveText="Selected an item."));case 40:{let e=l||o?a===this.options.length-1?0:a+1:0;return this.options[e].disabled&&(e=e===this.options.length-1?0:e+1),this.options[a].highlighted=!1,this.options[e].highlighted=!0,this.options[e].scrollIntoView({block:"nearest"}),void(this.assistiveText=this.options[e].text)}case 38:{let e=0===a?this.options.length-1:a-1;return this.options[e].disabled&&(e=0===e?this.options.length-1:e-1),this.options[a].highlighted=!1,this.options[e].highlighted=!0,this.options[e].scrollIntoView({block:"nearest"}),void(this.assistiveText=this.options[e].text)}case 27:return this.open=!1,this.searchable?this.searchEl.focus():this.buttonEl.focus(),void(this.assistiveText="Dropdown menu options.");default:return}}handleClearMultiple(e){e.stopPropagation(),this.multiple?this.value=[]:this.value="",this.emitValue()}handleTagClear(e){this.updateValue(e,!1),this.emitValue()}handleClear(e){e.stopPropagation(),this.text="",this.searchText="",this.searchEl.value="",this.multiple||(this.value="",this.emitValue())}handleSearchClick(e){e.stopPropagation(),this.open=!0}handleButtonBlur(e){var t,i;(null===(t=e.relatedTarget)||void 0===t?void 0:t.classList.contains("options"))||(null===(i=e.relatedTarget)||void 0===i?void 0:i.classList.contains("search"))||(this.open=!1)}handleSearchBlur(e){var t,i;e.relatedTarget&&("kyn-dropdown-option"===e.relatedTarget.localName||(null===(t=e.relatedTarget)||void 0===t?void 0:t.classList.contains("options"))||(null===(i=e.relatedTarget)||void 0===i?void 0:i.classList.contains("select")))||(this.open=!1)}handleSearchKeydown(e){e.stopPropagation();const t=this.options.find((e=>e.highlighted));13===e.keyCode&&t&&(this.updateValue(t.value,t.selected),this.assistiveText="Selected an item."),27===e.keyCode&&(this.open=!1,this.buttonEl.focus())}handleSearchInput(e){const t=e.target.value;this.searchText=t,this.open=!0;const i=this.options.filter((e=>e.text.toLowerCase().startsWith(t.toLowerCase())));this.options.forEach((e=>e.highlighted=!1)),""!==t&&i.length&&(i[0].highlighted=!0,i[0].scrollIntoView({block:"nearest"}))}_handleClick(e){"selectAll"===e.detail.value?(e.detail.selected?(this.value=this.options.filter((e=>!e.disabled)).map((e=>e.value)),this.assistiveText="Selected all items."):(this.value=[],this.assistiveText="Deselected all items."),this._setValidity()):(this.updateValue(e.detail.value,e.detail.selected),this.assistiveText="Selected an item."),this.emitValue()}_handleBlur(e){const t=e.detail.origEvent.relatedTarget;(!t||"kyn-dropdown-option"!==t.localName&&"kyn-dropdown"!==t.localName)&&(this.open=!1)}_handleFormdata(e){this.multiple?this.value.forEach((t=>{e.formData.append(this.name,t)})):e.formData.append(this.name,this.value)}connectedCallback(){super.connectedCallback(),this.addEventListener("on-click",(e=>this._handleClick(e))),this.addEventListener("on-blur",(e=>this._handleBlur(e))),this.internals.form&&this.internals.form.addEventListener("formdata",(e=>this._handleFormdata(e)))}disconnectedCallback(){this.addEventListener("on-click",(e=>this._handleClick(e))),this.addEventListener("on-blur",(e=>this._handleBlur(e))),this.internals.form&&this.internals.form.removeEventListener("formdata",(e=>this._handleFormdata(e))),super.disconnectedCallback()}updateValue(e,t=!1){const i=JSON.parse(JSON.stringify(this.value));if(this.multiple){if(t)i.push(e);else{const t=i.indexOf(e);i.splice(t,1)}this.value=i}else this.value=e;this._setValidity(),this.multiple||(this.searchable?this.searchEl.focus():this.buttonEl.focus())}_setValidity(){this.required&&(!this.value||this.multiple&&!this.value.length||!this.multiple&&""===this.value?(this.internals.setValidity({valueMissing:!0},"This field is required."),this.internalValidationMsg=this.internals.validationMessage):(this.internals.setValidity({}),this.internalValidationMsg=""))}emitValue(){const e=new CustomEvent("on-change",{detail:{value:this.value}});this.dispatchEvent(e)}updated(e){(e.has("invalidText")||e.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg);const t=e.get("value");if((this.multiple?e.has("value")&&void 0!==t&&""!==t&&t!==this.value:e.has("value")&&void 0!==t&&t!==this.value)&&(this.multiple||(this.open=!1),this.options.forEach((e=>{this.multiple?e.selected=this.value.includes(e.value):e.selected=this.value===e.value})),!this.multiple)){if(this.options.length&&""!==this.value){const e=this.options.find((e=>e.value===this.value)).shadowRoot.querySelector("slot").assignedNodes({flatten:!0});let t="";for(let i=0;i<e.length;i++)t+=e[i].textContent.trim();this.text=t}this.searchText=this.text===this.placeholder?"":this.text,this.searchEl&&(this.searchEl.value=this.searchText)}e.has("open")&&this.open&&!this.searchable&&(this.listboxEl.focus({preventScroll:!0}),this.assistiveText="Selecting items. Use up and down arrow keys to navigate."),e.has("multiple")&&this.options.forEach((e=>{e.multiple=this.multiple}))}_updateChildren(){var e;const t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector("slot#children"),i=null==t?void 0:t.assignedElements();if(i){const e=[];let t="";i.forEach((i=>{i.multiple=this.multiple,i.selected&&(this.multiple?e.push(i.value):t=i.value)})),this.multiple?this.value=e:this.value=t}}};v.styles=d,v.shadowRootOptions={...i.shadowRootOptions,delegatesFocus:!0},v.formAssociated=!0,e([o()],v.prototype,"internals",void 0),e([l({type:String})],v.prototype,"size",void 0),e([l({type:Boolean})],v.prototype,"inline",void 0),e([l({type:String})],v.prototype,"caption",void 0),e([l({type:String})],v.prototype,"placeholder",void 0),e([l({type:String})],v.prototype,"name",void 0),e([l({type:Boolean})],v.prototype,"open",void 0),e([l({type:Boolean})],v.prototype,"searchable",void 0),e([l({type:Boolean})],v.prototype,"multiple",void 0),e([l({type:Boolean})],v.prototype,"required",void 0),e([l({type:Boolean})],v.prototype,"disabled",void 0),e([l({type:String})],v.prototype,"invalidText",void 0),e([l({type:Boolean})],v.prototype,"hideTags",void 0),e([l({type:Boolean})],v.prototype,"selectAll",void 0),e([l({type:String})],v.prototype,"selectAllText",void 0),e([o()],v.prototype,"value",void 0),e([o()],v.prototype,"text",void 0),e([o()],v.prototype,"searchText",void 0),e([o()],v.prototype,"assistiveText",void 0),e([n({selector:"kyn-dropdown-option"})],v.prototype,"options",void 0),e([n({selector:"kyn-dropdown-option[selected]"})],v.prototype,"selectedOptions",void 0),e([a(".search")],v.prototype,"searchEl",void 0),e([a(".select")],v.prototype,"buttonEl",void 0),e([a(".options")],v.prototype,"listboxEl",void 0),e([o()],v.prototype,"internalValidationMsg",void 0),e([o()],v.prototype,"isInvalid",void 0),v=e([s("kyn-dropdown")],v);export{v as Dropdown};
|
|
131
|
+
`}firstUpdated(){""===this.placeholder&&(this.searchable?this.placeholder="Search":this.multiple?this.placeholder="Select items":this.placeholder="Select an option")}handleSlotChange(){this.resetSelection()}resetSelection(){this._updateChildren(),this.emitValue()}handleClick(){this.disabled||(this.open=!this.open,this.searchable&&this.searchEl.focus())}handleButtonKeydown(e){this.handleKeyboard(e,e.keyCode,"button")}handleListKeydown(e){9!==e.keyCode&&e.preventDefault(),this.handleKeyboard(e,e.keyCode,"list")}handleListBlur(e){this.options.forEach((e=>e.highlighted=!1)),(!e.relatedTarget||e.relatedTarget&&"kyn-dropdown-option"!==e.relatedTarget.localName)&&(this.open=!1),this.assistiveText="Dropdown menu options."}handleKeyboard(e,t,i){const s=[0,32],l=this.options.find((e=>e.highlighted)),o=this.options.find((e=>e.selected)),a=l?this.options.indexOf(l):this.options.find((e=>e.selected))?this.options.indexOf(o):0;if(s.includes(t)&&e.preventDefault(),"button"===i){(s.includes(t)||13===t||40==t||38==t)&&(this.open=!0,this.options[a].highlighted=!0,this.multiple||""===this.value||this.options[a].scrollIntoView({block:"nearest"}))}switch(t){case 13:return void("list"===i&&(this.updateValue(this.options[a].value,!this.options[a].selected),this.assistiveText="Selected an item."));case 40:{let e=l||o?a===this.options.length-1?0:a+1:0;return this.options[e].disabled&&(e=e===this.options.length-1?0:e+1),this.options[a].highlighted=!1,this.options[e].highlighted=!0,this.options[e].scrollIntoView({block:"nearest"}),void(this.assistiveText=this.options[e].text)}case 38:{let e=0===a?this.options.length-1:a-1;return this.options[e].disabled&&(e=0===e?this.options.length-1:e-1),this.options[a].highlighted=!1,this.options[e].highlighted=!0,this.options[e].scrollIntoView({block:"nearest"}),void(this.assistiveText=this.options[e].text)}case 27:return this.open=!1,this.searchable?this.searchEl.focus():this.buttonEl.focus(),void(this.assistiveText="Dropdown menu options.");default:return}}handleClearMultiple(e){e.stopPropagation(),this.multiple?this.value=[]:this.value="",this.emitValue()}handleTagClear(e){this.updateValue(e,!1),this.emitValue()}handleClear(e){e.stopPropagation(),this.text="",this.searchText="",this.searchEl.value="",this.multiple||(this.value="",this.emitValue())}handleSearchClick(e){e.stopPropagation(),this.open=!0}handleButtonBlur(e){var t,i;(null===(t=e.relatedTarget)||void 0===t?void 0:t.classList.contains("options"))||(null===(i=e.relatedTarget)||void 0===i?void 0:i.classList.contains("search"))||(this.open=!1)}handleSearchBlur(e){var t,i;e.relatedTarget&&("kyn-dropdown-option"===e.relatedTarget.localName||(null===(t=e.relatedTarget)||void 0===t?void 0:t.classList.contains("options"))||(null===(i=e.relatedTarget)||void 0===i?void 0:i.classList.contains("select")))||(this.open=!1)}handleSearchKeydown(e){e.stopPropagation();const t=this.options.find((e=>e.highlighted));13===e.keyCode&&t&&(this.updateValue(t.value,t.selected),this.assistiveText="Selected an item."),27===e.keyCode&&(this.open=!1,this.buttonEl.focus())}handleSearchInput(e){const t=e.target.value;this.searchText=t,this.open=!0;const i=this.options.filter((e=>e.text.toLowerCase().startsWith(t.toLowerCase())));this.options.forEach((e=>e.highlighted=!1)),""!==t&&i.length&&(i[0].highlighted=!0,i[0].scrollIntoView({block:"nearest"}))}_handleClick(e){"selectAll"===e.detail.value?(e.detail.selected?(this.value=this.options.filter((e=>!e.disabled)).map((e=>e.value)),this.assistiveText="Selected all items."):(this.value=[],this.assistiveText="Deselected all items."),this._setValidity()):(this.updateValue(e.detail.value,e.detail.selected),this.assistiveText="Selected an item."),this.emitValue()}_handleBlur(e){const t=e.detail.origEvent.relatedTarget;(!t||"kyn-dropdown-option"!==t.localName&&"kyn-dropdown"!==t.localName)&&(this.open=!1)}_handleFormdata(e){this.multiple?this.value.forEach((t=>{e.formData.append(this.name,t)})):e.formData.append(this.name,this.value)}connectedCallback(){super.connectedCallback(),this.addEventListener("on-click",(e=>this._handleClick(e))),this.addEventListener("on-blur",(e=>this._handleBlur(e))),this.internals.form&&this.internals.form.addEventListener("formdata",(e=>this._handleFormdata(e)))}disconnectedCallback(){this.addEventListener("on-click",(e=>this._handleClick(e))),this.addEventListener("on-blur",(e=>this._handleBlur(e))),this.internals.form&&this.internals.form.removeEventListener("formdata",(e=>this._handleFormdata(e))),super.disconnectedCallback()}updateValue(e,t=!1){const i=JSON.parse(JSON.stringify(this.value));if(this.multiple){if(t)i.push(e);else{const t=i.indexOf(e);i.splice(t,1)}this.value=i}else this.value=e;this._setValidity(),this.multiple||(this.searchable?this.searchEl.focus():this.buttonEl.focus())}_setValidity(){this.required&&(!this.value||this.multiple&&!this.value.length||!this.multiple&&""===this.value?(this.internals.setValidity({valueMissing:!0},"This field is required."),this.internalValidationMsg=this.internals.validationMessage):(this.internals.setValidity({}),this.internalValidationMsg=""))}emitValue(){const e=new CustomEvent("on-change",{detail:{value:this.value}});this.dispatchEvent(e)}updated(e){(e.has("invalidText")||e.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg);const t=e.get("value");if((this.multiple?e.has("value")&&void 0!==t&&""!==t&&t!==this.value:e.has("value")&&void 0!==t&&t!==this.value)&&(this.multiple||(this.open=!1),this.options.forEach((e=>{this.multiple?e.selected=this.value.includes(e.value):e.selected=this.value===e.value})),!this.multiple)){if(this.options.length&&""!==this.value){const e=this.options.find((e=>e.value===this.value)).shadowRoot.querySelector("slot").assignedNodes({flatten:!0});let t="";for(let i=0;i<e.length;i++)t+=e[i].textContent.trim();this.text=t}this.searchText=this.text===this.placeholder?"":this.text,this.searchEl&&(this.searchEl.value=this.searchText)}e.has("open")&&this.open&&!this.searchable&&(this.listboxEl.focus({preventScroll:!0}),this.assistiveText="Selecting items. Use up and down arrow keys to navigate."),e.has("multiple")&&this.options.forEach((e=>{e.multiple=this.multiple}))}_updateChildren(){var e;const t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector("slot#children"),i=null==t?void 0:t.assignedElements();if(i){const e=[];let t="";i.forEach((i=>{i.multiple=this.multiple,i.selected&&(this.multiple?e.push(i.value):t=i.value)})),this.multiple?this.value=e:this.value=t}}};v.styles=d,v.shadowRootOptions={...i.shadowRootOptions,delegatesFocus:!0},v.formAssociated=!0,e([o()],v.prototype,"internals",void 0),e([l({type:String})],v.prototype,"size",void 0),e([l({type:Boolean})],v.prototype,"inline",void 0),e([l({type:String})],v.prototype,"caption",void 0),e([l({type:String})],v.prototype,"placeholder",void 0),e([l({type:String})],v.prototype,"name",void 0),e([l({type:Boolean})],v.prototype,"open",void 0),e([l({type:Boolean})],v.prototype,"searchable",void 0),e([l({type:Boolean})],v.prototype,"multiple",void 0),e([l({type:Boolean})],v.prototype,"required",void 0),e([l({type:Boolean})],v.prototype,"disabled",void 0),e([l({type:String})],v.prototype,"invalidText",void 0),e([l({type:Boolean})],v.prototype,"hideTags",void 0),e([l({type:Boolean})],v.prototype,"selectAll",void 0),e([l({type:String})],v.prototype,"selectAllText",void 0),e([o()],v.prototype,"value",void 0),e([o()],v.prototype,"text",void 0),e([o()],v.prototype,"searchText",void 0),e([o()],v.prototype,"assistiveText",void 0),e([n({selector:"kyn-dropdown-option"})],v.prototype,"options",void 0),e([n({selector:"kyn-dropdown-option[selected]"})],v.prototype,"selectedOptions",void 0),e([a(".search")],v.prototype,"searchEl",void 0),e([a(".select")],v.prototype,"buttonEl",void 0),e([a(".options")],v.prototype,"listboxEl",void 0),e([o()],v.prototype,"internalValidationMsg",void 0),e([o()],v.prototype,"isInvalid",void 0),v=e([s("kyn-dropdown")],v);export{v as Dropdown};
|
|
132
132
|
//# sourceMappingURL=dropdown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.js","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"sourcesContent":["import { 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 './dropdownOption';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport downIcon from '@carbon/icons/es/chevron--down/24';\nimport errorIcon from '@carbon/icons/es/warning--filled/24';\nimport clearIcon from '@carbon/icons/es/close/24';\nimport clearIcon16 from '@carbon/icons/es/close/16';\n\n/**\n * Dropdown, single select.\n * @fires on-change - Captures the input event and emits the selected value and original event details.\n * @slot unnamed - Slot for dropdown options.\n * @slot label - Slot for input label.\n */\n@customElement('kyn-dropdown')\nexport class Dropdown extends LitElement {\n static override styles = DropdownScss;\n\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /**\n * Associate the component with forms.\n * @ignore\n */\n static formAssociated = true;\n\n /**\n * Attached internals for form association.\n * @ignore\n */\n @state()\n internals = this.attachInternals();\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 /** Dropdown name. */\n @property({ type: String })\n name = '';\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 /** 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 /** Dropdown disabled state. */\n @property({ type: Boolean })\n disabled = false;\n\n /** Dropdown invalid text. */\n @property({ type: String })\n invalidText = '';\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 /**\n * Selected option value.\n * @ignore\n */\n @state()\n value: any = '';\n\n /**\n * Selected option text, automatically derived.\n * @ignore\n */\n @state()\n text = '';\n\n /**\n * Search input value.\n * @ignore\n */\n @state()\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 * Internal validation message.\n * @ignore\n */\n @state()\n internalValidationMsg = '';\n\n /**\n * isInvalid when internalValidationMsg or invalidText is non-empty.\n * @ignore\n */\n @state()\n isInvalid = false;\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 for=${this.name} id=\"label-${this.name}\" class=\"label-text\">\n ${this.required ? html`<span class=\"required\">*</span>` : null}\n <slot name=\"label\"></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 'size--sm': this.size === 'sm',\n 'size--lg': this.size === 'lg',\n inline: this.inline,\n })}\"\n role=\"button\"\n aria-labelledby=\"label-${this.name}\"\n ?required=${this.required}\n ?disabled=${this.disabled}\n ?invalid=${this.isInvalid}\n tabindex=${this.searchable ? '-1' : '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) => this.handleButtonBlur(e)}\n >\n ${this.multiple && this.value.length\n ? html`\n <button\n class=\"clear-multiple\"\n aria-label=\"Clear selections\"\n @click=${(e: Event) => this.handleClearMultiple(e)}\n >\n ${this.value.length}\n <kd-icon .icon=${clearIcon16}></kd-icon>\n </button>\n `\n : null}\n ${this.searchable\n ? html`\n <input\n class=\"search\"\n type=\"text\"\n placeholder=\"Search\"\n value=${this.searchText}\n ?disabled=${this.disabled}\n @keydown=${(e: any) => this.handleSearchKeydown(e)}\n @input=${(e: any) => this.handleSearchInput(e)}\n @blur=${(e: any) => this.handleSearchBlur(e)}\n @click=${(e: any) => this.handleSearchClick(e)}\n />\n `\n : html`\n <span>\n ${this.multiple\n ? this.placeholder\n : this.value === ''\n ? this.placeholder\n : this.text}\n </span>\n `}\n\n <kd-icon class=\"arrow-icon\" .icon=${downIcon}></kd-icon>\n </div>\n\n <ul\n class=${classMap({\n options: true,\n open: this.open,\n })}\n role=\"listbox\"\n tabindex=\"0\"\n aria-expanded=${this.open}\n aria-hidden=${!this.open}\n @keydown=${(e: any) => this.handleListKeydown(e)}\n @blur=${(e: any) => this.handleListBlur(e)}\n >\n ${this.multiple && this.selectAll\n ? html`\n <kyn-dropdown-option\n class=\"select-all\"\n value=\"selectAll\"\n multiple\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 </ul>\n </div>\n\n ${this.searchable && this.searchEl && this.searchText !== ''\n ? html`\n <button\n class=\"clear\"\n aria-label=\"Clear search text\"\n @click=${(e: any) => this.handleClear(e)}\n >\n <kd-icon .icon=${clearIcon}></kd-icon>\n </button>\n `\n : null}\n ${this.isInvalid\n ? html` <kd-icon class=\"error-icon\" .icon=${errorIcon}></kd-icon> `\n : null}\n </div>\n\n ${this.multiple && !this.hideTags && this.value.length\n ? html`\n <div class=\"tags\">\n ${this.value.map((value: string) => {\n const option = this.options.find(\n (option) => option.value === value\n );\n const nodes = option.shadowRoot\n .querySelector('slot')\n .assignedNodes({\n flatten: true,\n });\n let text = '';\n for (let i = 0; i < nodes.length; i++) {\n text += nodes[i].textContent.trim();\n }\n\n return html`\n <button\n class=\"tag\"\n aria-label=\"Deselect ${text}\"\n @click=${() => this.handleTagClear(option.value)}\n >\n ${text}\n <kd-icon .icon=${clearIcon16}></kd-icon>\n </button>\n `;\n })}\n </div>\n `\n : null}\n ${this.caption !== ''\n ? html` <div class=\"caption\">${this.caption}</div> `\n : null}\n ${this.isInvalid\n ? html`\n <div class=\"error\">\n ${this.invalidText || this.internalValidationMsg}\n </div>\n `\n : null}\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.multiple) {\n this.placeholder = 'Select items';\n } else {\n this.placeholder = 'Select an option';\n }\n }\n }\n\n private handleSlotChange() {\n this.resetSelection();\n }\n\n /**\n * Retrieves the selected values from the list of child options and sets value property.\n * @function\n */\n public resetSelection() {\n this._updateChildren();\n this.emitValue();\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 }\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: any) {\n this.options.forEach((option) => (option.highlighted = false));\n\n // don't blur if clicking an option inside\n if (\n !e.relatedTarget ||\n (e.relatedTarget && e.relatedTarget.localName !== 'kyn-dropdown-option')\n ) {\n this.open = false;\n }\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 highlightedEl = this.options.find(\n (option: any) => option.highlighted\n );\n const selectedEl = this.options.find((option: any) => option.selected);\n const highlightedIndex = highlightedEl\n ? this.options.indexOf(highlightedEl)\n : this.options.find((option: any) => option.selected)\n ? this.options.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 // open the listbox\n if (target === 'button') {\n const 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 (openDropdown) {\n this.open = true;\n this.options[highlightedIndex].highlighted = true;\n\n // scroll to highlighted option\n if (!this.multiple && this.value !== '') {\n this.options[highlightedIndex].scrollIntoView({ block: 'nearest' });\n }\n }\n }\n\n switch (keyCode) {\n case ENTER_KEY_CODE: {\n // select highlighted option\n if (target === 'list') {\n this.updateValue(\n this.options[highlightedIndex].value,\n !this.options[highlightedIndex].selected\n );\n this.assistiveText = 'Selected an item.';\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 === this.options.length - 1\n ? 0\n : highlightedIndex + 1;\n\n // skip disabled options\n if (this.options[nextIndex].disabled) {\n nextIndex = nextIndex === this.options.length - 1 ? 0 : nextIndex + 1;\n }\n\n this.options[highlightedIndex].highlighted = false;\n this.options[nextIndex].highlighted = true;\n\n // scroll to option\n this.options[nextIndex].scrollIntoView({ block: 'nearest' });\n\n this.assistiveText = this.options[nextIndex].text;\n return;\n }\n case UP_ARROW_KEY_CODE: {\n // go to previous option\n let nextIndex =\n highlightedIndex === 0\n ? this.options.length - 1\n : highlightedIndex - 1;\n\n // skip disabled options\n if (this.options[nextIndex].disabled) {\n nextIndex = nextIndex === 0 ? this.options.length - 1 : nextIndex - 1;\n }\n\n this.options[highlightedIndex].highlighted = false;\n this.options[nextIndex].highlighted = true;\n\n // scroll to option\n this.options[nextIndex].scrollIntoView({ block: 'nearest' });\n\n this.assistiveText = this.options[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 this.value = [];\n } else {\n this.value = '';\n }\n\n this.emitValue();\n }\n\n private handleTagClear(value: string) {\n // remove value\n this.updateValue(value, false);\n\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 // clear selection for single select\n if (!this.multiple) {\n this.value = '';\n this.emitValue();\n }\n }\n\n private handleSearchClick(e: any) {\n e.stopPropagation();\n this.open = true;\n }\n\n private handleButtonBlur(e: any) {\n // don't blur if entering listbox or search input\n if (\n !e.relatedTarget?.classList.contains('options') &&\n !e.relatedTarget?.classList.contains('search')\n ) {\n this.open = false;\n }\n }\n\n private handleSearchBlur(e: any) {\n // don't blur if entering listbox of button\n if (\n !e.relatedTarget ||\n (e.relatedTarget.localName !== 'kyn-dropdown-option' &&\n !e.relatedTarget?.classList.contains('options') &&\n !e.relatedTarget?.classList.contains('select'))\n ) {\n this.open = false;\n }\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\n // select option\n if (e.keyCode === ENTER_KEY_CODE && option) {\n this.updateValue(option.value, option.selected);\n this.assistiveText = 'Selected an item.';\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 // 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 }\n }\n\n private _handleClick(e: any) {\n if (e.detail.value === 'selectAll') {\n if (e.detail.selected) {\n this.value = this.options\n .filter((option) => !option.disabled)\n .map((option) => {\n return option.value;\n });\n this.assistiveText = 'Selected all items.';\n } else {\n this.value = [];\n this.assistiveText = 'Deselected all items.';\n }\n\n this._setValidity();\n } else {\n this.updateValue(e.detail.value, e.detail.selected);\n this.assistiveText = 'Selected an item.';\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 _handleFormdata(e: any) {\n if (this.multiple) {\n this.value.forEach((value: string) => {\n e.formData.append(this.name, value);\n });\n } else {\n e.formData.append(this.name, this.value);\n }\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n // capture child options click event\n this.addEventListener('on-click', (e: any) => this._handleClick(e));\n\n // capture child options blur event\n this.addEventListener('on-blur', (e: any) => this._handleBlur(e));\n\n if (this.internals.form) {\n this.internals.form.addEventListener('formdata', (e) =>\n this._handleFormdata(e)\n );\n }\n }\n\n override disconnectedCallback() {\n this.addEventListener('on-click', (e: any) => this._handleClick(e));\n this.addEventListener('on-blur', (e: any) => this._handleBlur(e));\n\n if (this.internals.form) {\n this.internals.form.removeEventListener('formdata', (e) =>\n this._handleFormdata(e)\n );\n }\n\n super.disconnectedCallback();\n }\n\n private updateValue(value: string, selected = false) {\n const values = JSON.parse(JSON.stringify(this.value));\n\n // set value\n if (this.multiple) {\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._setValidity();\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 _setValidity() {\n if (this.required) {\n if (\n !this.value ||\n (this.multiple && !this.value.length) ||\n (!this.multiple && this.value === '')\n ) {\n this.internals.setValidity(\n { valueMissing: true },\n 'This field is required.'\n );\n this.internalValidationMsg = this.internals.validationMessage;\n } else {\n this.internals.setValidity({});\n this.internalValidationMsg = '';\n }\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 override updated(changedProps: any) {\n if (\n changedProps.has('invalidText') ||\n changedProps.has('internalValidationMsg')\n ) {\n //check if any (internal / external )error msg. present then isInvalid is true\n this.isInvalid =\n this.invalidText !== '' || this.internalValidationMsg !== ''\n ? true\n : false;\n }\n\n const oldValue = changedProps.get('value');\n const valueChanged = this.multiple\n ? changedProps.has('value') &&\n oldValue !== undefined &&\n oldValue !== '' &&\n oldValue !== this.value\n : changedProps.has('value') &&\n oldValue !== undefined &&\n oldValue !== this.value;\n\n if (valueChanged) {\n // close listbox\n if (!this.multiple) {\n this.open = false;\n }\n\n // set form data value\n // if (this.multiple) {\n // const entries = new FormData();\n // this.value.forEach((value: string) => {\n // entries.append(this.name, value);\n // });\n // this.internals.setFormValue(entries);\n // } else {\n // this.internals.setFormValue(this.value);\n // }\n\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 // update selected option text\n if (!this.multiple) {\n if (this.options.length && this.value !== '') {\n const option = this.options.find(\n (option) => option.value === this.value\n );\n const nodes = option.shadowRoot.querySelector('slot').assignedNodes({\n flatten: true,\n });\n let text = '';\n for (let i = 0; i < nodes.length; i++) {\n text += nodes[i].textContent.trim();\n }\n this.text = text;\n }\n\n // set search input value\n this.searchText = this.text === this.placeholder ? '' : this.text;\n if (this.searchEl) {\n this.searchEl.value = this.searchText;\n }\n }\n }\n\n if (changedProps.has('open')) {\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\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\n private _updateChildren() {\n const Slot: any = this.shadowRoot?.querySelector('slot#children');\n const Options = Slot?.assignedElements();\n\n // get value from selected options\n if (Options) {\n const values: any = [];\n let value = '';\n Options.forEach((option: any) => {\n option.multiple = this.multiple;\n\n if (option.selected) {\n if (this.multiple) {\n values.push(option.value);\n } else {\n value = option.value;\n }\n }\n });\n\n // set initial values\n if (this.multiple) {\n this.value = values;\n } else {\n this.value = value;\n }\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-dropdown': Dropdown;\n }\n}\n"],"names":["Dropdown","LitElement","constructor","this","internals","attachInternals","size","inline","caption","placeholder","name","open","searchable","multiple","required","disabled","invalidText","hideTags","selectAll","selectAllText","value","text","searchText","assistiveText","internalValidationMsg","isInvalid","render","html","classMap","wrapper","select","handleClick","e","handleButtonKeydown","preventDefault","handleButtonBlur","length","handleClearMultiple","clearIcon16","handleSearchKeydown","handleSearchInput","handleSearchBlur","handleSearchClick","downIcon","options","handleListKeydown","handleListBlur","handleSlotChange","searchEl","handleClear","clearIcon","errorIcon","map","option","find","nodes","shadowRoot","querySelector","assignedNodes","flatten","i","textContent","trim","handleTagClear","firstUpdated","resetSelection","_updateChildren","emitValue","focus","handleKeyboard","keyCode","forEach","highlighted","relatedTarget","localName","target","SPACEBAR_KEY_CODE","highlightedEl","selectedEl","selected","highlightedIndex","indexOf","includes","scrollIntoView","block","updateValue","nextIndex","buttonEl","stopPropagation","_a","classList","contains","_b","filter","toLowerCase","startsWith","_handleClick","detail","_setValidity","_handleBlur","origEvent","_handleFormdata","formData","append","connectedCallback","super","addEventListener","form","disconnectedCallback","removeEventListener","values","JSON","parse","stringify","push","index","splice","setValidity","valueMissing","validationMessage","event","CustomEvent","dispatchEvent","updated","changedProps","has","oldValue","get","undefined","listboxEl","preventScroll","Slot","Options","assignedElements","styles","DropdownScss","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","type","String","Boolean","queryAssignedElements","selector","query","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"dropdown.js","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"sourcesContent":["import { 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 './dropdownOption';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport downIcon from '@carbon/icons/es/chevron--down/24';\nimport errorIcon from '@carbon/icons/es/warning--filled/24';\nimport clearIcon from '@carbon/icons/es/close/24';\nimport clearIcon16 from '@carbon/icons/es/close/16';\n\n/**\n * Dropdown, single select.\n * @fires on-change - Captures the input event and emits the selected value and original event details.\n * @slot unnamed - Slot for dropdown options.\n * @slot label - Slot for input label.\n */\n@customElement('kyn-dropdown')\nexport class Dropdown extends LitElement {\n static override styles = DropdownScss;\n\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /**\n * Associate the component with forms.\n * @ignore\n */\n static formAssociated = true;\n\n /**\n * Attached internals for form association.\n * @ignore\n */\n @state()\n internals = this.attachInternals();\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 /** Dropdown name. */\n @property({ type: String })\n name = '';\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 /** 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 /** Dropdown disabled state. */\n @property({ type: Boolean })\n disabled = false;\n\n /** Dropdown invalid text. */\n @property({ type: String })\n invalidText = '';\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 /**\n * Selected option value.\n * @ignore\n */\n @state()\n value: any = '';\n\n /**\n * Selected option text, automatically derived.\n * @ignore\n */\n @state()\n text = '';\n\n /**\n * Search input value.\n * @ignore\n */\n @state()\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 * Internal validation message.\n * @ignore\n */\n @state()\n internalValidationMsg = '';\n\n /**\n * isInvalid when internalValidationMsg or invalidText is non-empty.\n * @ignore\n */\n @state()\n isInvalid = false;\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 for=${this.name} id=\"label-${this.name}\" class=\"label-text\">\n ${this.required ? html`<span class=\"required\">*</span>` : null}\n <slot name=\"label\"></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 'size--sm': this.size === 'sm',\n 'size--lg': this.size === 'lg',\n inline: this.inline,\n })}\"\n role=\"button\"\n aria-labelledby=\"label-${this.name}\"\n ?required=${this.required}\n ?disabled=${this.disabled}\n ?invalid=${this.isInvalid}\n tabindex=${this.searchable ? '-1' : '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) => this.handleButtonBlur(e)}\n >\n ${this.multiple && this.value.length\n ? html`\n <button\n class=\"clear-multiple\"\n aria-label=\"Clear selections\"\n @click=${(e: Event) => this.handleClearMultiple(e)}\n >\n ${this.value.length}\n <kd-icon .icon=${clearIcon16}></kd-icon>\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 @keydown=${(e: any) => this.handleSearchKeydown(e)}\n @input=${(e: any) => this.handleSearchInput(e)}\n @blur=${(e: any) => this.handleSearchBlur(e)}\n @click=${(e: any) => this.handleSearchClick(e)}\n />\n `\n : html`\n <span>\n ${this.multiple\n ? this.placeholder\n : this.value === ''\n ? this.placeholder\n : this.text}\n </span>\n `}\n\n <kd-icon class=\"arrow-icon\" .icon=${downIcon}></kd-icon>\n </div>\n\n <ul\n class=${classMap({\n options: true,\n open: this.open,\n })}\n role=\"listbox\"\n tabindex=\"0\"\n aria-expanded=${this.open}\n aria-hidden=${!this.open}\n @keydown=${(e: any) => this.handleListKeydown(e)}\n @blur=${(e: any) => this.handleListBlur(e)}\n >\n ${this.multiple && this.selectAll\n ? html`\n <kyn-dropdown-option\n class=\"select-all\"\n value=\"selectAll\"\n multiple\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 </ul>\n </div>\n\n ${this.searchable && this.searchEl && this.searchText !== ''\n ? html`\n <button\n class=\"clear\"\n aria-label=\"Clear search text\"\n @click=${(e: any) => this.handleClear(e)}\n >\n <kd-icon .icon=${clearIcon}></kd-icon>\n </button>\n `\n : null}\n ${this.isInvalid\n ? html` <kd-icon class=\"error-icon\" .icon=${errorIcon}></kd-icon> `\n : null}\n </div>\n\n ${this.multiple && !this.hideTags && this.value.length\n ? html`\n <div class=\"tags\">\n ${this.value.map((value: string) => {\n const option = this.options.find(\n (option) => option.value === value\n );\n const nodes = option.shadowRoot\n .querySelector('slot')\n .assignedNodes({\n flatten: true,\n });\n let text = '';\n for (let i = 0; i < nodes.length; i++) {\n text += nodes[i].textContent.trim();\n }\n\n return html`\n <button\n class=\"tag\"\n aria-label=\"Deselect ${text}\"\n @click=${() => this.handleTagClear(option.value)}\n >\n ${text}\n <kd-icon .icon=${clearIcon16}></kd-icon>\n </button>\n `;\n })}\n </div>\n `\n : null}\n ${this.caption !== ''\n ? html` <div class=\"caption\">${this.caption}</div> `\n : null}\n ${this.isInvalid\n ? html`\n <div class=\"error\">\n ${this.invalidText || this.internalValidationMsg}\n </div>\n `\n : null}\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.resetSelection();\n }\n\n /**\n * Retrieves the selected values from the list of child options and sets value property.\n * @function\n */\n public resetSelection() {\n this._updateChildren();\n this.emitValue();\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 }\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: any) {\n this.options.forEach((option) => (option.highlighted = false));\n\n // don't blur if clicking an option inside\n if (\n !e.relatedTarget ||\n (e.relatedTarget && e.relatedTarget.localName !== 'kyn-dropdown-option')\n ) {\n this.open = false;\n }\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 highlightedEl = this.options.find(\n (option: any) => option.highlighted\n );\n const selectedEl = this.options.find((option: any) => option.selected);\n const highlightedIndex = highlightedEl\n ? this.options.indexOf(highlightedEl)\n : this.options.find((option: any) => option.selected)\n ? this.options.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 // open the listbox\n if (target === 'button') {\n const 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 (openDropdown) {\n this.open = true;\n this.options[highlightedIndex].highlighted = true;\n\n // scroll to highlighted option\n if (!this.multiple && this.value !== '') {\n this.options[highlightedIndex].scrollIntoView({ block: 'nearest' });\n }\n }\n }\n\n switch (keyCode) {\n case ENTER_KEY_CODE: {\n // select highlighted option\n if (target === 'list') {\n this.updateValue(\n this.options[highlightedIndex].value,\n !this.options[highlightedIndex].selected\n );\n this.assistiveText = 'Selected an item.';\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 === this.options.length - 1\n ? 0\n : highlightedIndex + 1;\n\n // skip disabled options\n if (this.options[nextIndex].disabled) {\n nextIndex = nextIndex === this.options.length - 1 ? 0 : nextIndex + 1;\n }\n\n this.options[highlightedIndex].highlighted = false;\n this.options[nextIndex].highlighted = true;\n\n // scroll to option\n this.options[nextIndex].scrollIntoView({ block: 'nearest' });\n\n this.assistiveText = this.options[nextIndex].text;\n return;\n }\n case UP_ARROW_KEY_CODE: {\n // go to previous option\n let nextIndex =\n highlightedIndex === 0\n ? this.options.length - 1\n : highlightedIndex - 1;\n\n // skip disabled options\n if (this.options[nextIndex].disabled) {\n nextIndex = nextIndex === 0 ? this.options.length - 1 : nextIndex - 1;\n }\n\n this.options[highlightedIndex].highlighted = false;\n this.options[nextIndex].highlighted = true;\n\n // scroll to option\n this.options[nextIndex].scrollIntoView({ block: 'nearest' });\n\n this.assistiveText = this.options[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 this.value = [];\n } else {\n this.value = '';\n }\n\n this.emitValue();\n }\n\n private handleTagClear(value: string) {\n // remove value\n this.updateValue(value, false);\n\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 // clear selection for single select\n if (!this.multiple) {\n this.value = '';\n this.emitValue();\n }\n }\n\n private handleSearchClick(e: any) {\n e.stopPropagation();\n this.open = true;\n }\n\n private handleButtonBlur(e: any) {\n // don't blur if entering listbox or search input\n if (\n !e.relatedTarget?.classList.contains('options') &&\n !e.relatedTarget?.classList.contains('search')\n ) {\n this.open = false;\n }\n }\n\n private handleSearchBlur(e: any) {\n // don't blur if entering listbox of button\n if (\n !e.relatedTarget ||\n (e.relatedTarget.localName !== 'kyn-dropdown-option' &&\n !e.relatedTarget?.classList.contains('options') &&\n !e.relatedTarget?.classList.contains('select'))\n ) {\n this.open = false;\n }\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\n // select option\n if (e.keyCode === ENTER_KEY_CODE && option) {\n this.updateValue(option.value, option.selected);\n this.assistiveText = 'Selected an item.';\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 // 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 }\n }\n\n private _handleClick(e: any) {\n if (e.detail.value === 'selectAll') {\n if (e.detail.selected) {\n this.value = this.options\n .filter((option) => !option.disabled)\n .map((option) => {\n return option.value;\n });\n this.assistiveText = 'Selected all items.';\n } else {\n this.value = [];\n this.assistiveText = 'Deselected all items.';\n }\n\n this._setValidity();\n } else {\n this.updateValue(e.detail.value, e.detail.selected);\n this.assistiveText = 'Selected an item.';\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 _handleFormdata(e: any) {\n if (this.multiple) {\n this.value.forEach((value: string) => {\n e.formData.append(this.name, value);\n });\n } else {\n e.formData.append(this.name, this.value);\n }\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n // capture child options click event\n this.addEventListener('on-click', (e: any) => this._handleClick(e));\n\n // capture child options blur event\n this.addEventListener('on-blur', (e: any) => this._handleBlur(e));\n\n if (this.internals.form) {\n this.internals.form.addEventListener('formdata', (e) =>\n this._handleFormdata(e)\n );\n }\n }\n\n override disconnectedCallback() {\n this.addEventListener('on-click', (e: any) => this._handleClick(e));\n this.addEventListener('on-blur', (e: any) => this._handleBlur(e));\n\n if (this.internals.form) {\n this.internals.form.removeEventListener('formdata', (e) =>\n this._handleFormdata(e)\n );\n }\n\n super.disconnectedCallback();\n }\n\n private updateValue(value: string, selected = false) {\n const values = JSON.parse(JSON.stringify(this.value));\n\n // set value\n if (this.multiple) {\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._setValidity();\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 _setValidity() {\n if (this.required) {\n if (\n !this.value ||\n (this.multiple && !this.value.length) ||\n (!this.multiple && this.value === '')\n ) {\n this.internals.setValidity(\n { valueMissing: true },\n 'This field is required.'\n );\n this.internalValidationMsg = this.internals.validationMessage;\n } else {\n this.internals.setValidity({});\n this.internalValidationMsg = '';\n }\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 override updated(changedProps: any) {\n if (\n changedProps.has('invalidText') ||\n changedProps.has('internalValidationMsg')\n ) {\n //check if any (internal / external )error msg. present then isInvalid is true\n this.isInvalid =\n this.invalidText !== '' || this.internalValidationMsg !== ''\n ? true\n : false;\n }\n\n const oldValue = changedProps.get('value');\n const valueChanged = this.multiple\n ? changedProps.has('value') &&\n oldValue !== undefined &&\n oldValue !== '' &&\n oldValue !== this.value\n : changedProps.has('value') &&\n oldValue !== undefined &&\n oldValue !== this.value;\n\n if (valueChanged) {\n // close listbox\n if (!this.multiple) {\n this.open = false;\n }\n\n // set form data value\n // if (this.multiple) {\n // const entries = new FormData();\n // this.value.forEach((value: string) => {\n // entries.append(this.name, value);\n // });\n // this.internals.setFormValue(entries);\n // } else {\n // this.internals.setFormValue(this.value);\n // }\n\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 // update selected option text\n if (!this.multiple) {\n if (this.options.length && this.value !== '') {\n const option = this.options.find(\n (option) => option.value === this.value\n );\n const nodes = option.shadowRoot.querySelector('slot').assignedNodes({\n flatten: true,\n });\n let text = '';\n for (let i = 0; i < nodes.length; i++) {\n text += nodes[i].textContent.trim();\n }\n this.text = text;\n }\n\n // set search input value\n this.searchText = this.text === this.placeholder ? '' : this.text;\n if (this.searchEl) {\n this.searchEl.value = this.searchText;\n }\n }\n }\n\n if (changedProps.has('open')) {\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\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\n private _updateChildren() {\n const Slot: any = this.shadowRoot?.querySelector('slot#children');\n const Options = Slot?.assignedElements();\n\n // get value from selected options\n if (Options) {\n const values: any = [];\n let value = '';\n Options.forEach((option: any) => {\n option.multiple = this.multiple;\n\n if (option.selected) {\n if (this.multiple) {\n values.push(option.value);\n } else {\n value = option.value;\n }\n }\n });\n\n // set initial values\n if (this.multiple) {\n this.value = values;\n } else {\n this.value = value;\n }\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-dropdown': Dropdown;\n }\n}\n"],"names":["Dropdown","LitElement","constructor","this","internals","attachInternals","size","inline","caption","placeholder","name","open","searchable","multiple","required","disabled","invalidText","hideTags","selectAll","selectAllText","value","text","searchText","assistiveText","internalValidationMsg","isInvalid","render","html","classMap","wrapper","select","handleClick","e","handleButtonKeydown","preventDefault","handleButtonBlur","length","handleClearMultiple","clearIcon16","handleSearchKeydown","handleSearchInput","handleSearchBlur","handleSearchClick","downIcon","options","handleListKeydown","handleListBlur","handleSlotChange","searchEl","handleClear","clearIcon","errorIcon","map","option","find","nodes","shadowRoot","querySelector","assignedNodes","flatten","i","textContent","trim","handleTagClear","firstUpdated","resetSelection","_updateChildren","emitValue","focus","handleKeyboard","keyCode","forEach","highlighted","relatedTarget","localName","target","SPACEBAR_KEY_CODE","highlightedEl","selectedEl","selected","highlightedIndex","indexOf","includes","scrollIntoView","block","updateValue","nextIndex","buttonEl","stopPropagation","_a","classList","contains","_b","filter","toLowerCase","startsWith","_handleClick","detail","_setValidity","_handleBlur","origEvent","_handleFormdata","formData","append","connectedCallback","super","addEventListener","form","disconnectedCallback","removeEventListener","values","JSON","parse","stringify","push","index","splice","setValidity","valueMissing","validationMessage","event","CustomEvent","dispatchEvent","updated","changedProps","has","oldValue","get","undefined","listboxEl","preventScroll","Slot","Options","assignedElements","styles","DropdownScss","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","type","String","Boolean","queryAssignedElements","selector","query","customElement"],"mappings":"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"}
|
|
@@ -28,6 +28,10 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
|
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
+
:host {
|
|
32
|
+
display: inline-block;
|
|
33
|
+
}
|
|
34
|
+
|
|
31
35
|
dialog {
|
|
32
36
|
padding: 32px;
|
|
33
37
|
color: inherit;
|
|
@@ -74,6 +78,11 @@ button:active {
|
|
|
74
78
|
color: var(--kd-color-text-pressed);
|
|
75
79
|
}
|
|
76
80
|
|
|
81
|
+
.anchor {
|
|
82
|
+
display: inline-block;
|
|
83
|
+
width: 100%;
|
|
84
|
+
}
|
|
85
|
+
|
|
77
86
|
header {
|
|
78
87
|
margin-bottom: 32px;
|
|
79
88
|
margin-right: 16px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"modal.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -9,6 +9,8 @@ import './pagination-navigation-buttons';
|
|
|
9
9
|
* navigate through large datasets by splitting them into discrete chunks.
|
|
10
10
|
* Integrates with other utility components like items range display, page size dropdown,
|
|
11
11
|
* and navigation buttons.
|
|
12
|
+
* @fires on-page-size-change - Dispatched when the page size changes.
|
|
13
|
+
* @fires on-page-number-change - Dispatched when the currently active page changes.
|
|
12
14
|
*
|
|
13
15
|
*/
|
|
14
16
|
export declare class Pagination extends LitElement {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/pagination/Pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAMvC,OAAO,0BAA0B,CAAC;AAClC,OAAO,iCAAiC,CAAC;AACzC,OAAO,iCAAiC,CAAC;AAEzC
|
|
1
|
+
{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/pagination/Pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAMvC,OAAO,0BAA0B,CAAC;AAClC,OAAO,iCAAiC,CAAC;AACzC,OAAO,iCAAiC,CAAC;AAEzC;;;;;;;;;;GAUG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,iCAAY;IAElC,kDAAkD;IAElD,KAAK,SAAK;IAEV,iCAAiC;IAEjC,UAAU,SAAK;IAEf,yCAAyC;IAEzC,QAAQ,SAAK;IAEb,0CAA0C;IAE1C,eAAe,EAAE,MAAM,EAAE,CAAgC;IAEzD,uCAAuC;IAEvC,aAAa,SAAmB;IAEhC,8CAA8C;IAE9C,cAAc,UAAS;IAEvB,6CAA6C;IAE7C,oBAAoB,UAAS;IAE7B,6CAA6C;IAE7C,qBAAqB,UAAS;IAE9B;;;OAGG;IAEH,QAAQ,UAAkC;IAE1C;;;;;OAKG;IACH,OAAO,CAAC,oBAAoB;IAK5B;;;;;OAKG;IACH,OAAO,CAAC,sBAAsB;IAIrB,MAAM;CAoChB;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,UAAU,CAAC;KAC9B;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.js","sources":["../../../../src/components/reusable/pagination/Pagination.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { PAGE_SIZE_LABEL, BREAKPOINT } from './constants';\nimport styles from './pagination.scss';\n\nimport './pagination-items-range';\nimport './pagination-page-size-dropdown';\nimport './pagination-navigation-buttons';\n\n/**\n * `kyn-pagination` Web Component.\n *\n * A component that provides pagination functionality, enabling the user to\n * navigate through large datasets by splitting them into discrete chunks.\n * Integrates with other utility components like items range display, page size dropdown,\n * and navigation buttons.\n *\n */\n@customElement('kyn-pagination')\nexport class Pagination extends LitElement {\n static override styles = [styles];\n\n /** Total number of items that need pagination. */\n @property({ type: Number })\n count = 0;\n\n /** Current active page number.*/\n @property({ type: Number, reflect: true })\n pageNumber = 1;\n\n /** Number of items displayed per page.*/\n @property({ type: Number })\n pageSize = 5;\n\n /** Available options for the page size.*/\n @property({ type: Array<Number> })\n pageSizeOptions: number[] = [5, 10, 20, 30, 40, 50, 100];\n\n /** Label for the page size dropdown.*/\n @property({ type: String })\n pageSizeLabel = PAGE_SIZE_LABEL;\n\n /** Option to hide the items range display. */\n @property({ type: Boolean })\n hideItemsRange = false;\n\n /** Option to hide the page size dropdown. */\n @property({ type: Boolean })\n hidePageSizeDropdown = false;\n\n /** Option to hide the navigation buttons. */\n @property({ type: Boolean })\n hideNavigationButtons = false;\n\n /**\n * Determines the device type the component is being rendered on.\n * @ignore\n */\n @state()\n isMobile = window.innerWidth < BREAKPOINT;\n\n /**\n * Handler for the event when the page size is changed by the user.\n * Updates the `pageSize` and resets the `pageNumber` to 1.\n *\n * @param e - The emitted custom event with the selected page size.\n */\n private handlePageSizeChange(e: CustomEvent) {\n this.pageSize = e.detail.value;\n this.pageNumber = 1;\n }\n\n /**\n * Handler for the event when the page number is changed by the user.\n * Updates the `pageNumber`.\n *\n * @param e - The emitted custom event with the selected page number.\n */\n private handlePageNumberChange(e: CustomEvent) {\n this.pageNumber = e.detail.value;\n }\n\n override render() {\n const numberOfPages = Math.ceil(this.count / this.pageSize);\n\n return html`\n ${!this.hideItemsRange\n ? html`\n <kyn-pagination-items-range\n .pageNumber=${this.pageNumber}\n .pageSize=${this.pageSize}\n .count=${this.count}\n ></kyn-pagination-items-range>\n `\n : null}\n ${this.isMobile\n ? null\n : !this.hidePageSizeDropdown\n ? html`\n <kyn-pagination-page-size-dropdown\n .pageSize=${this.pageSize}\n .pageSizeOptions=${this.pageSizeOptions}\n .pageSizeLabel=${this.pageSizeLabel}\n @on-page-size-change=${this.handlePageSizeChange}\n ></kyn-pagination-page-size-dropdown>\n `\n : null}\n ${!this.hideNavigationButtons\n ? html`\n <kyn-pagination-navigation-buttons\n .pageNumber=${this.pageNumber}\n .numberOfPages=${numberOfPages}\n @on-page-number-change=${this.handlePageNumberChange}\n ></kyn-pagination-navigation-buttons>\n `\n : null}\n `;\n }\n}\n\n// Define the custom element in the global namespace\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-pagination': Pagination;\n }\n}\n"],"names":["Pagination","LitElement","constructor","this","count","pageNumber","pageSize","pageSizeOptions","pageSizeLabel","PAGE_SIZE_LABEL","hideItemsRange","hidePageSizeDropdown","hideNavigationButtons","isMobile","window","innerWidth","BREAKPOINT","handlePageSizeChange","e","detail","value","handlePageNumberChange","render","numberOfPages","Math","ceil","html","styles","__decorate","property","type","Number","prototype","reflect","String","Boolean","state","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Pagination.js","sources":["../../../../src/components/reusable/pagination/Pagination.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { PAGE_SIZE_LABEL, BREAKPOINT } from './constants';\nimport styles from './pagination.scss';\n\nimport './pagination-items-range';\nimport './pagination-page-size-dropdown';\nimport './pagination-navigation-buttons';\n\n/**\n * `kyn-pagination` Web Component.\n *\n * A component that provides pagination functionality, enabling the user to\n * navigate through large datasets by splitting them into discrete chunks.\n * Integrates with other utility components like items range display, page size dropdown,\n * and navigation buttons.\n * @fires on-page-size-change - Dispatched when the page size changes.\n * @fires on-page-number-change - Dispatched when the currently active page changes.\n *\n */\n@customElement('kyn-pagination')\nexport class Pagination extends LitElement {\n static override styles = [styles];\n\n /** Total number of items that need pagination. */\n @property({ type: Number })\n count = 0;\n\n /** Current active page number.*/\n @property({ type: Number, reflect: true })\n pageNumber = 1;\n\n /** Number of items displayed per page.*/\n @property({ type: Number })\n pageSize = 5;\n\n /** Available options for the page size.*/\n @property({ type: Array<Number> })\n pageSizeOptions: number[] = [5, 10, 20, 30, 40, 50, 100];\n\n /** Label for the page size dropdown.*/\n @property({ type: String })\n pageSizeLabel = PAGE_SIZE_LABEL;\n\n /** Option to hide the items range display. */\n @property({ type: Boolean })\n hideItemsRange = false;\n\n /** Option to hide the page size dropdown. */\n @property({ type: Boolean })\n hidePageSizeDropdown = false;\n\n /** Option to hide the navigation buttons. */\n @property({ type: Boolean })\n hideNavigationButtons = false;\n\n /**\n * Determines the device type the component is being rendered on.\n * @ignore\n */\n @state()\n isMobile = window.innerWidth < BREAKPOINT;\n\n /**\n * Handler for the event when the page size is changed by the user.\n * Updates the `pageSize` and resets the `pageNumber` to 1.\n *\n * @param e - The emitted custom event with the selected page size.\n */\n private handlePageSizeChange(e: CustomEvent) {\n this.pageSize = e.detail.value;\n this.pageNumber = 1;\n }\n\n /**\n * Handler for the event when the page number is changed by the user.\n * Updates the `pageNumber`.\n *\n * @param e - The emitted custom event with the selected page number.\n */\n private handlePageNumberChange(e: CustomEvent) {\n this.pageNumber = e.detail.value;\n }\n\n override render() {\n const numberOfPages = Math.ceil(this.count / this.pageSize);\n\n return html`\n ${!this.hideItemsRange\n ? html`\n <kyn-pagination-items-range\n .pageNumber=${this.pageNumber}\n .pageSize=${this.pageSize}\n .count=${this.count}\n ></kyn-pagination-items-range>\n `\n : null}\n ${this.isMobile\n ? null\n : !this.hidePageSizeDropdown\n ? html`\n <kyn-pagination-page-size-dropdown\n .pageSize=${this.pageSize}\n .pageSizeOptions=${this.pageSizeOptions}\n .pageSizeLabel=${this.pageSizeLabel}\n @on-page-size-change=${this.handlePageSizeChange}\n ></kyn-pagination-page-size-dropdown>\n `\n : null}\n ${!this.hideNavigationButtons\n ? html`\n <kyn-pagination-navigation-buttons\n .pageNumber=${this.pageNumber}\n .numberOfPages=${numberOfPages}\n @on-page-number-change=${this.handlePageNumberChange}\n ></kyn-pagination-navigation-buttons>\n `\n : null}\n `;\n }\n}\n\n// Define the custom element in the global namespace\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-pagination': Pagination;\n }\n}\n"],"names":["Pagination","LitElement","constructor","this","count","pageNumber","pageSize","pageSizeOptions","pageSizeLabel","PAGE_SIZE_LABEL","hideItemsRange","hidePageSizeDropdown","hideNavigationButtons","isMobile","window","innerWidth","BREAKPOINT","handlePageSizeChange","e","detail","value","handlePageNumberChange","render","numberOfPages","Math","ceil","html","styles","__decorate","property","type","Number","prototype","reflect","String","Boolean","state","customElement"],"mappings":"y2BAsBO,IAAMA,EAAN,cAAyBC,EAAzBC,kCAKLC,KAAKC,MAAG,EAIRD,KAAUE,WAAG,EAIbF,KAAQG,SAAG,EAIXH,KAAAI,gBAA4B,CAAC,EAAG,GAAI,GAAI,GAAI,GAAI,GAAI,KAIpDJ,KAAaK,cAAGC,EAIhBN,KAAcO,gBAAG,EAIjBP,KAAoBQ,sBAAG,EAIvBR,KAAqBS,uBAAG,EAOxBT,KAAAU,SAAWC,OAAOC,WAAaC,CA2DhC,CAnDSC,qBAAqBC,GAC3Bf,KAAKG,SAAWY,EAAEC,OAAOC,MACzBjB,KAAKE,WAAa,CACnB,CAQOgB,uBAAuBH,GAC7Bf,KAAKE,WAAaa,EAAEC,OAAOC,KAC5B,CAEQE,SACP,MAAMC,EAAgBC,KAAKC,KAAKtB,KAAKC,MAAQD,KAAKG,UAElD,OAAOoB,CAAI;QACNvB,KAAKO,eAQJ,KAPAgB,CAAI;;4BAEcvB,KAAKE;0BACPF,KAAKG;uBACRH,KAAKC;;;QAIpBD,KAAKU,UAEFV,KAAKQ,qBADN,KAEAe,CAAI;;0BAEYvB,KAAKG;iCACEH,KAAKI;+BACPJ,KAAKK;qCACCL,KAAKc;;;QAIjCd,KAAKS,sBAQJ,KAPAc,CAAI;;4BAEcvB,KAAKE;+BACFkB;uCACQpB,KAAKkB;;;KAKzC,GAjGerB,EAAA2B,OAAS,CAACA,GAI1BC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACR/B,EAAAgC,UAAA,aAAA,GAIVJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQE,SAAS,KACpBjC,EAAAgC,UAAA,kBAAA,GAIfJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACL/B,EAAAgC,UAAA,gBAAA,GAIbJ,EAAA,CADCC,EAAS,CAAEC,cAC6C9B,EAAAgC,UAAA,uBAAA,GAIzDJ,EAAA,CADCC,EAAS,CAAEC,KAAMI,UACclC,EAAAgC,UAAA,qBAAA,GAIhCJ,EAAA,CADCC,EAAS,CAAEC,KAAMK,WACKnC,EAAAgC,UAAA,sBAAA,GAIvBJ,EAAA,CADCC,EAAS,CAAEC,KAAMK,WACWnC,EAAAgC,UAAA,4BAAA,GAI7BJ,EAAA,CADCC,EAAS,CAAEC,KAAMK,WACYnC,EAAAgC,UAAA,6BAAA,GAO9BJ,EAAA,CADCQ,KACyCpC,EAAAgC,UAAA,gBAAA,GAxC/BhC,EAAU4B,EAAA,CADtBS,EAAc,mBACFrC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/table/data-table.stories.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAIhE,OAAO,6DAA6D,CAAC;AACrE,OAAO,2DAA2D,CAAC;AAGnE,OAAO,SAAS,CAAC;AACjB,OAAO,cAAc,CAAC;AACtB,OAAO,6BAA6B,CAAC;AACrC,OAAO,+BAA+B,CAAC;AAGvC,QAAA,MAAM,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"data-table.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/table/data-table.stories.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAIhE,OAAO,6DAA6D,CAAC;AACrE,OAAO,2DAA2D,CAAC;AAGnE,OAAO,SAAS,CAAC;AACjB,OAAO,cAAc,CAAC;AACtB,OAAO,6BAA6B,CAAC;AACrC,OAAO,+BAA+B,CAAC;AAGvC,QAAA,MAAM,IAAI,EAAE,IAgCX,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,KAAK,KAAK,GAAG,QAAQ,GAAG;IACtB,IAAI,CAAC,EAAE;QACL,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;KAC5B,CAAC;CACH,CAAC;AAqYF,eAAO,MAAM,UAAU,SAAU,GAAG,yCA4CnC,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KASvB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAS1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAcvB,CAAC"}
|