npm - @govtechsg/sgds-web-component - Versions diffs - 3.5.6 → 3.5.7-rc.2 - Mend

@govtechsg/sgds-web-component 3.5.6 → 3.5.7-rc.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.

Files changed (66) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@govtechsg/sgds-web-component",
-  "version": "3.5.6",
+  "version": "3.5.7-rc.2",
   "description": "",
   "main": "./index.umd.js",
   "module": "./index.js",

package/react/components/Checkbox/checkbox.cjs.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var lit = require('lit');
-var css_248z = lit.css`.form-check-input[type=checkbox]{border-radius:var(--sgds-form-border-radius-md)}.form-check-input:checked,.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path d="M14.347 3.979a.522.522 0 0 1 0 .739L7.043 12.02a.521.521 0 0 1-.738 0L2.653 8.369a.522.522 0 1 1 .739-.738l3.282 3.283 6.934-6.935a.52.52 0 0 1 .739 0Z" fill="%23fff"/></svg>')}.form-check-input:indeterminate,.form-check-input[indeterminate]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:indeterminate:focus,.form-check-input:indeterminate:hover,.form-check-input[indeterminate]:focus-visible,.form-check-input[indeterminate]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}.form-check-input:checked.is-invalid,.form-check-input:indeterminate.is-invalid,.form-check-input[checked].is-invalid,.form-check-input[indeterminate].is-invalid{background-color:var(--sgds-form-danger-surface-default)}.form-check-label{flex:1}`;
+var css_248z = lit.css`.form-check-input[type=checkbox]{border-radius:var(--sgds-form-border-radius-md)}.form-check-input:checked,.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path d="M14.347 3.979a.522.522 0 0 1 0 .739L7.043 12.02a.521.521 0 0 1-.738 0L2.653 8.369a.522.522 0 1 1 .739-.738l3.282 3.283 6.934-6.935a.52.52 0 0 1 .739 0Z" fill="%23fff"/></svg>')}.form-check-input:indeterminate,.form-check-input[indeterminate]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:indeterminate:focus,.form-check-input:indeterminate:hover,.form-check-input[indeterminate]:focus-visible,.form-check-input[indeterminate]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}.form-check-input:checked.is-invalid,.form-check-input:indeterminate.is-invalid,.form-check-input[checked].is-invalid,.form-check-input[indeterminate].is-invalid{background-color:var(--sgds-form-danger-surface-default)}.form-check-label{flex:1}.form-check{margin:var(--sgds-form-padding-inline-sm) 0;padding:0}`;
 exports["default"] = css_248z;
 //# sourceMappingURL=checkbox.cjs.js.map

package/react/components/Checkbox/checkbox.js CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
-var css_248z = css`.form-check-input[type=checkbox]{border-radius:var(--sgds-form-border-radius-md)}.form-check-input:checked,.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path d="M14.347 3.979a.522.522 0 0 1 0 .739L7.043 12.02a.521.521 0 0 1-.738 0L2.653 8.369a.522.522 0 1 1 .739-.738l3.282 3.283 6.934-6.935a.52.52 0 0 1 .739 0Z" fill="%23fff"/></svg>')}.form-check-input:indeterminate,.form-check-input[indeterminate]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:indeterminate:focus,.form-check-input:indeterminate:hover,.form-check-input[indeterminate]:focus-visible,.form-check-input[indeterminate]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}.form-check-input:checked.is-invalid,.form-check-input:indeterminate.is-invalid,.form-check-input[checked].is-invalid,.form-check-input[indeterminate].is-invalid{background-color:var(--sgds-form-danger-surface-default)}.form-check-label{flex:1}`;
+var css_248z = css`.form-check-input[type=checkbox]{border-radius:var(--sgds-form-border-radius-md)}.form-check-input:checked,.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path d="M14.347 3.979a.522.522 0 0 1 0 .739L7.043 12.02a.521.521 0 0 1-.738 0L2.653 8.369a.522.522 0 1 1 .739-.738l3.282 3.283 6.934-6.935a.52.52 0 0 1 .739 0Z" fill="%23fff"/></svg>')}.form-check-input:indeterminate,.form-check-input[indeterminate]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:indeterminate:focus,.form-check-input:indeterminate:hover,.form-check-input[indeterminate]:focus-visible,.form-check-input[indeterminate]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}.form-check-input:checked.is-invalid,.form-check-input:indeterminate.is-invalid,.form-check-input[checked].is-invalid,.form-check-input[indeterminate].is-invalid{background-color:var(--sgds-form-danger-surface-default)}.form-check-label{flex:1}.form-check{margin:var(--sgds-form-padding-inline-sm) 0;padding:0}`;
 export { css_248z as default };
 //# sourceMappingURL=checkbox.js.map

package/react/components/ComboBox/sgds-combo-box-option.cjs.js CHANGED Viewed

@@ -45,6 +45,12 @@ class SgdsComboBoxOption extends optionElement.OptionElement {
                 this.checkbox ? this._handleCheckboxClick() : this._handleNonCheckboxClick();
             }
         });
+        this.shadowRoot.addEventListener("click", e => {
+            const element = e.target;
+            if (element.classList.contains("dropdown-item")) {
+                this._handleCheckboxClick();
+            }
+        });
     }
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);

package/react/components/ComboBox/sgds-combo-box-option.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sgds-combo-box-option.cjs.js","sources":["../../../../src/components/ComboBox/sgds-combo-box-option.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { OptionElement } from \"../../base/option-element\";\nimport SgdsCheckbox from \"../Checkbox/sgds-checkbox\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n\n/*\n @summary ComboBoxOption is the option of the Combobox\n \n @slot default - The label of the option\n /\nexport class SgdsComboBoxOption extends OptionElement {\n /* @internal /\n static override dependencies = {\n \"sgds-icon\": SgdsIcon,\n \"sgds-checkbox\": SgdsCheckbox\n };\n\n /\n @internal If true, this item is rendered as a checkbox item.\n * This property is controlled by its combo box parent\n */\n @property({ type: Boolean, reflect: true }) checkbox = false;\n\n connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n if (e.key === \"Enter\") {\n this.checkbox ? this._handleCheckboxClick() : this._handleNonCheckboxClick();\n }\n });\n }\n\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n\n const parent = this.closest(\"sgds-combo-box\");\n if (parent?.multiSelect) {\n this.checkbox = true;\n }\n }\n private _handleNonCheckboxClick() {\n if (!this.checkbox) {\n this.emit(\"i-sgds-select\");\n }\n }\n private _handleCheckboxClick() {\n this.shadowRoot.querySelector(\"sgds-checkbox\").click();\n }\n\n private _handleCheckboxChange(e: Event) {\n const checkbox = e.target as HTMLInputElement;\n this.active = checkbox.checked;\n this.active ? this.emit(\"i-sgds-select\") : this.emit(\"i-sgds-unselect\");\n }\n\n protected _renderItemContent = () => {\n return this.checkbox\n ? html`\n <sgds-checkbox ?checked=${this.active} .disabled=${this.disabled} @sgds-change=${this._handleCheckboxChange}>\n <slot></slot>\n </sgds-checkbox>\n `\n : html`\n <div class=\"normal-item-content\" @click=${this._handleNonCheckboxClick}>\n <slot></slot>\n ${this.active ? html` <sgds-icon name=\"check\"></sgds-icon> ` : nothing}\n </div>\n `;\n };\n}\n\nexport default SgdsComboBoxOption;\n"],"names":["OptionElement","html","nothing","SgdsIcon","SgdsCheckbox","__decorate","property"],"mappings":";;;;;;;;;;;;AAMA;;;;AAIG;AACG,MAAO,kBAAmB,SAAQA,2BAAa,CAAA;AAArD,IAAA,WAAA,GAAA;;AAOE;;;AAGG;QACyC,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;~~QAkCnD~~,IAAkB,CAAA,kBAAA,GAAG,MAAK;YAClC,OAAO,IAAI,CAAC,QAAQ;kBAChBC,QAAI,CAAA,CAAA;oCACwB,IAAI,CAAC,MAAM,CAAc,WAAA,EAAA,IAAI,CAAC,QAAQ,CAAA,cAAA,EAAiB,IAAI,CAAC,qBAAqB,CAAA;;;AAG5G,QAAA,CAAA;kBACDA,QAAI,CAAA,CAAA;AACwC,kDAAA,EAAA,IAAI,CAAC,uBAAuB,CAAA;;cAElE,IAAI,CAAC,MAAM,GAAGA,QAAI,CAAA,CAAwC,sCAAA,CAAA,GAAGC,WAAO,CAAA;;SAEzE,CAAC;AACR,SAAC,CAAC;KACH;~~IA9CC~~,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAgB,KAAI;AACpD,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;AACrB,gBAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,oBAAoB,EAAE,GAAG,IAAI,CAAC,uBAAuB,EAAE,CAAC;aAC9E;AACH,SAAC,CAAC,CAAC;KACJ;AAED,IAAA,YAAY,CAAC,iBAAyC,EAAA;AACpD,QAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QAEtC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;QAC9C,IAAI,MAAM,aAAN,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAN,MAAM,CAAE,WAAW,EAAE;AACvB,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACtB;KACF;~~IACO~~,uBAAuB,GAAA;AAC7B,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAClB,YAAA,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;SAC5B;KACF;IACO,oBAAoB,GAAA;QAC1B,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,KAAK,EAAE,CAAC;KACxD;AAEO,IAAA,qBAAqB,CAAC,CAAQ,EAAA;AACpC,QAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,MAA0B,CAAC;AAC9C,QAAA,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,OAAO,CAAC;QAC/B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;KACzE;;~~AA1CD~~;AACgB,kBAAA,CAAA,YAAY,GAAG;AAC7B,IAAA,WAAW,EAAEC,iBAAQ;AACrB,IAAA,eAAe,EAAEC,yBAAY;AAC9B,CAH2B,CAG1B;AAM0CC,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}
1	+ {"version":3,"file":"sgds-combo-box-option.cjs.js","sources":["../../../../src/components/ComboBox/sgds-combo-box-option.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { OptionElement } from \"../../base/option-element\";\nimport SgdsCheckbox from \"../Checkbox/sgds-checkbox\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n\n/*\n @summary ComboBoxOption is the option of the Combobox\n \n @slot default - The label of the option\n /\nexport class SgdsComboBoxOption extends OptionElement {\n /* @internal /\n static override dependencies = {\n \"sgds-icon\": SgdsIcon,\n \"sgds-checkbox\": SgdsCheckbox\n };\n\n /\n @internal If true, this item is rendered as a checkbox item.\n * This property is controlled by its combo box parent\n */\n @property({ type: Boolean, reflect: true }) checkbox = false;\n\n connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n if (e.key === \"Enter\") {\n this.checkbox ? this._handleCheckboxClick() : this._handleNonCheckboxClick();\n }\n });\n\n this.shadowRoot.addEventListener(\"click\", e => {\n const element = e.target as HTMLElement;\n\n if (element.classList.contains(\"dropdown-item\")) {\n this._handleCheckboxClick();\n }\n });\n }\n\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n\n const parent = this.closest(\"sgds-combo-box\");\n if (parent?.multiSelect) {\n this.checkbox = true;\n }\n }\n\n private _handleNonCheckboxClick() {\n if (!this.checkbox) {\n this.emit(\"i-sgds-select\");\n }\n }\n private _handleCheckboxClick() {\n this.shadowRoot.querySelector(\"sgds-checkbox\").click();\n }\n\n private _handleCheckboxChange(e: Event) {\n const checkbox = e.target as HTMLInputElement;\n this.active = checkbox.checked;\n this.active ? this.emit(\"i-sgds-select\") : this.emit(\"i-sgds-unselect\");\n }\n\n protected _renderItemContent = () => {\n return this.checkbox\n ? html`\n <sgds-checkbox ?checked=${this.active} .disabled=${this.disabled} @sgds-change=${this._handleCheckboxChange}>\n <slot></slot>\n </sgds-checkbox>\n `\n : html`\n <div class=\"normal-item-content\" @click=${this._handleNonCheckboxClick}>\n <slot></slot>\n ${this.active ? html` <sgds-icon name=\"check\"></sgds-icon> ` : nothing}\n </div>\n `;\n };\n}\n\nexport default SgdsComboBoxOption;\n"],"names":["OptionElement","html","nothing","SgdsIcon","SgdsCheckbox","__decorate","property"],"mappings":";;;;;;;;;;;;AAMA;;;;AAIG;AACG,MAAO,kBAAmB,SAAQA,2BAAa,CAAA;AAArD,IAAA,WAAA,GAAA;;AAOE;;;AAGG;QACyC,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;QA2CnD,IAAkB,CAAA,kBAAA,GAAG,MAAK;YAClC,OAAO,IAAI,CAAC,QAAQ;kBAChBC,QAAI,CAAA,CAAA;oCACwB,IAAI,CAAC,MAAM,CAAc,WAAA,EAAA,IAAI,CAAC,QAAQ,CAAA,cAAA,EAAiB,IAAI,CAAC,qBAAqB,CAAA;;;AAG5G,QAAA,CAAA;kBACDA,QAAI,CAAA,CAAA;AACwC,kDAAA,EAAA,IAAI,CAAC,uBAAuB,CAAA;;cAElE,IAAI,CAAC,MAAM,GAAGA,QAAI,CAAA,CAAwC,sCAAA,CAAA,GAAGC,WAAO,CAAA;;SAEzE,CAAC;AACR,SAAC,CAAC;KACH;IAvDC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAgB,KAAI;AACpD,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;AACrB,gBAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,oBAAoB,EAAE,GAAG,IAAI,CAAC,uBAAuB,EAAE,CAAC;aAC9E;AACH,SAAC,CAAC,CAAC;QAEH,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,IAAG;AAC5C,YAAA,MAAM,OAAO,GAAG,CAAC,CAAC,MAAqB,CAAC;YAExC,IAAI,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,EAAE;gBAC/C,IAAI,CAAC,oBAAoB,EAAE,CAAC;aAC7B;AACH,SAAC,CAAC,CAAC;KACJ;AAED,IAAA,YAAY,CAAC,iBAAyC,EAAA;AACpD,QAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QAEtC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;QAC9C,IAAI,MAAM,aAAN,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAN,MAAM,CAAE,WAAW,EAAE;AACvB,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACtB;KACF;IAEO,uBAAuB,GAAA;AAC7B,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAClB,YAAA,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;SAC5B;KACF;IACO,oBAAoB,GAAA;QAC1B,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,KAAK,EAAE,CAAC;KACxD;AAEO,IAAA,qBAAqB,CAAC,CAAQ,EAAA;AACpC,QAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,MAA0B,CAAC;AAC9C,QAAA,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,OAAO,CAAC;QAC/B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;KACzE;;AAnDD;AACgB,kBAAA,CAAA,YAAY,GAAG;AAC7B,IAAA,WAAW,EAAEC,iBAAQ;AACrB,IAAA,eAAe,EAAEC,yBAAY;AAC9B,CAH2B,CAG1B;AAM0CC,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}

package/react/components/ComboBox/sgds-combo-box-option.js CHANGED Viewed

@@ -41,6 +41,12 @@ class SgdsComboBoxOption extends OptionElement {
                 this.checkbox ? this._handleCheckboxClick() : this._handleNonCheckboxClick();
             }
         });
+        this.shadowRoot.addEventListener("click", e => {
+            const element = e.target;
+            if (element.classList.contains("dropdown-item")) {
+                this._handleCheckboxClick();
+            }
+        });
     }
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);

package/react/components/ComboBox/sgds-combo-box-option.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sgds-combo-box-option.js","sources":["../../../../src/components/ComboBox/sgds-combo-box-option.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { OptionElement } from \"../../base/option-element\";\nimport SgdsCheckbox from \"../Checkbox/sgds-checkbox\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n\n/*\n @summary ComboBoxOption is the option of the Combobox\n \n @slot default - The label of the option\n /\nexport class SgdsComboBoxOption extends OptionElement {\n /* @internal /\n static override dependencies = {\n \"sgds-icon\": SgdsIcon,\n \"sgds-checkbox\": SgdsCheckbox\n };\n\n /\n @internal If true, this item is rendered as a checkbox item.\n * This property is controlled by its combo box parent\n */\n @property({ type: Boolean, reflect: true }) checkbox = false;\n\n connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n if (e.key === \"Enter\") {\n this.checkbox ? this._handleCheckboxClick() : this._handleNonCheckboxClick();\n }\n });\n }\n\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n\n const parent = this.closest(\"sgds-combo-box\");\n if (parent?.multiSelect) {\n this.checkbox = true;\n }\n }\n private _handleNonCheckboxClick() {\n if (!this.checkbox) {\n this.emit(\"i-sgds-select\");\n }\n }\n private _handleCheckboxClick() {\n this.shadowRoot.querySelector(\"sgds-checkbox\").click();\n }\n\n private _handleCheckboxChange(e: Event) {\n const checkbox = e.target as HTMLInputElement;\n this.active = checkbox.checked;\n this.active ? this.emit(\"i-sgds-select\") : this.emit(\"i-sgds-unselect\");\n }\n\n protected _renderItemContent = () => {\n return this.checkbox\n ? html`\n <sgds-checkbox ?checked=${this.active} .disabled=${this.disabled} @sgds-change=${this._handleCheckboxChange}>\n <slot></slot>\n </sgds-checkbox>\n `\n : html`\n <div class=\"normal-item-content\" @click=${this._handleNonCheckboxClick}>\n <slot></slot>\n ${this.active ? html` <sgds-icon name=\"check\"></sgds-icon> ` : nothing}\n </div>\n `;\n };\n}\n\nexport default SgdsComboBoxOption;\n"],"names":[],"mappings":";;;;;;;;AAMA;;;;AAIG;AACG,MAAO,kBAAmB,SAAQ,aAAa,CAAA;AAArD,IAAA,WAAA,GAAA;;AAOE;;;AAGG;QACyC,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;~~QAkCnD~~,IAAkB,CAAA,kBAAA,GAAG,MAAK;YAClC,OAAO,IAAI,CAAC,QAAQ;kBAChB,IAAI,CAAA,CAAA;oCACwB,IAAI,CAAC,MAAM,CAAc,WAAA,EAAA,IAAI,CAAC,QAAQ,CAAA,cAAA,EAAiB,IAAI,CAAC,qBAAqB,CAAA;;;AAG5G,QAAA,CAAA;kBACD,IAAI,CAAA,CAAA;AACwC,kDAAA,EAAA,IAAI,CAAC,uBAAuB,CAAA;;cAElE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA,CAAwC,sCAAA,CAAA,GAAG,OAAO,CAAA;;SAEzE,CAAC;AACR,SAAC,CAAC;KACH;~~IA9CC~~,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAgB,KAAI;AACpD,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;AACrB,gBAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,oBAAoB,EAAE,GAAG,IAAI,CAAC,uBAAuB,EAAE,CAAC;aAC9E;AACH,SAAC,CAAC,CAAC;KACJ;AAED,IAAA,YAAY,CAAC,iBAAyC,EAAA;AACpD,QAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QAEtC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;QAC9C,IAAI,MAAM,aAAN,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAN,MAAM,CAAE,WAAW,EAAE;AACvB,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACtB;KACF;~~IACO~~,uBAAuB,GAAA;AAC7B,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAClB,YAAA,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;SAC5B;KACF;IACO,oBAAoB,GAAA;QAC1B,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,KAAK,EAAE,CAAC;KACxD;AAEO,IAAA,qBAAqB,CAAC,CAAQ,EAAA;AACpC,QAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,MAA0B,CAAC;AAC9C,QAAA,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,OAAO,CAAC;QAC/B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;KACzE;;~~AA1CD~~;AACgB,kBAAA,CAAA,YAAY,GAAG;AAC7B,IAAA,WAAW,EAAE,QAAQ;AACrB,IAAA,eAAe,EAAE,YAAY;AAC9B,CAH2B,CAG1B;AAM0C,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
1	+ {"version":3,"file":"sgds-combo-box-option.js","sources":["../../../../src/components/ComboBox/sgds-combo-box-option.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { OptionElement } from \"../../base/option-element\";\nimport SgdsCheckbox from \"../Checkbox/sgds-checkbox\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n\n/*\n @summary ComboBoxOption is the option of the Combobox\n \n @slot default - The label of the option\n /\nexport class SgdsComboBoxOption extends OptionElement {\n /* @internal /\n static override dependencies = {\n \"sgds-icon\": SgdsIcon,\n \"sgds-checkbox\": SgdsCheckbox\n };\n\n /\n @internal If true, this item is rendered as a checkbox item.\n * This property is controlled by its combo box parent\n */\n @property({ type: Boolean, reflect: true }) checkbox = false;\n\n connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n if (e.key === \"Enter\") {\n this.checkbox ? this._handleCheckboxClick() : this._handleNonCheckboxClick();\n }\n });\n\n this.shadowRoot.addEventListener(\"click\", e => {\n const element = e.target as HTMLElement;\n\n if (element.classList.contains(\"dropdown-item\")) {\n this._handleCheckboxClick();\n }\n });\n }\n\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n\n const parent = this.closest(\"sgds-combo-box\");\n if (parent?.multiSelect) {\n this.checkbox = true;\n }\n }\n\n private _handleNonCheckboxClick() {\n if (!this.checkbox) {\n this.emit(\"i-sgds-select\");\n }\n }\n private _handleCheckboxClick() {\n this.shadowRoot.querySelector(\"sgds-checkbox\").click();\n }\n\n private _handleCheckboxChange(e: Event) {\n const checkbox = e.target as HTMLInputElement;\n this.active = checkbox.checked;\n this.active ? this.emit(\"i-sgds-select\") : this.emit(\"i-sgds-unselect\");\n }\n\n protected _renderItemContent = () => {\n return this.checkbox\n ? html`\n <sgds-checkbox ?checked=${this.active} .disabled=${this.disabled} @sgds-change=${this._handleCheckboxChange}>\n <slot></slot>\n </sgds-checkbox>\n `\n : html`\n <div class=\"normal-item-content\" @click=${this._handleNonCheckboxClick}>\n <slot></slot>\n ${this.active ? html` <sgds-icon name=\"check\"></sgds-icon> ` : nothing}\n </div>\n `;\n };\n}\n\nexport default SgdsComboBoxOption;\n"],"names":[],"mappings":";;;;;;;;AAMA;;;;AAIG;AACG,MAAO,kBAAmB,SAAQ,aAAa,CAAA;AAArD,IAAA,WAAA,GAAA;;AAOE;;;AAGG;QACyC,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;QA2CnD,IAAkB,CAAA,kBAAA,GAAG,MAAK;YAClC,OAAO,IAAI,CAAC,QAAQ;kBAChB,IAAI,CAAA,CAAA;oCACwB,IAAI,CAAC,MAAM,CAAc,WAAA,EAAA,IAAI,CAAC,QAAQ,CAAA,cAAA,EAAiB,IAAI,CAAC,qBAAqB,CAAA;;;AAG5G,QAAA,CAAA;kBACD,IAAI,CAAA,CAAA;AACwC,kDAAA,EAAA,IAAI,CAAC,uBAAuB,CAAA;;cAElE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA,CAAwC,sCAAA,CAAA,GAAG,OAAO,CAAA;;SAEzE,CAAC;AACR,SAAC,CAAC;KACH;IAvDC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAgB,KAAI;AACpD,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;AACrB,gBAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,oBAAoB,EAAE,GAAG,IAAI,CAAC,uBAAuB,EAAE,CAAC;aAC9E;AACH,SAAC,CAAC,CAAC;QAEH,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,IAAG;AAC5C,YAAA,MAAM,OAAO,GAAG,CAAC,CAAC,MAAqB,CAAC;YAExC,IAAI,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,EAAE;gBAC/C,IAAI,CAAC,oBAAoB,EAAE,CAAC;aAC7B;AACH,SAAC,CAAC,CAAC;KACJ;AAED,IAAA,YAAY,CAAC,iBAAyC,EAAA;AACpD,QAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QAEtC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;QAC9C,IAAI,MAAM,aAAN,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAN,MAAM,CAAE,WAAW,EAAE;AACvB,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACtB;KACF;IAEO,uBAAuB,GAAA;AAC7B,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAClB,YAAA,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;SAC5B;KACF;IACO,oBAAoB,GAAA;QAC1B,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,KAAK,EAAE,CAAC;KACxD;AAEO,IAAA,qBAAqB,CAAC,CAAQ,EAAA;AACpC,QAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,MAA0B,CAAC;AAC9C,QAAA,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,OAAO,CAAC;QAC/B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;KACzE;;AAnDD;AACgB,kBAAA,CAAA,YAAY,GAAG;AAC7B,IAAA,WAAW,EAAE,QAAQ;AACrB,IAAA,eAAe,EAAE,YAAY;AAC9B,CAH2B,CAG1B;AAM0C,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/react/components/ComboBox/sgds-combo-box.cjs.js CHANGED Viewed

@@ -4,11 +4,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
+var live_js = require('lit/directives/live.js');
 var lit = require('lit');
 var decorators_js = require('lit/decorators.js');
 var classMap_js = require('lit/directives/class-map.js');
 var ifDefined_js = require('lit/directives/if-defined.js');
-var live_js = require('lit/directives/live.js');
 var ref_js = require('lit/directives/ref.js');
 var selectElement = require('../../base/select-element.cjs.js');
 var watch = require('../../utils/watch.cjs.js');
@@ -37,15 +37,32 @@ class SgdsComboBox extends selectElement.SelectElement {
         this.multiSelect = false;
         /** If true, renders badge that fills width of combobox */
         this.badgeFullWidth = false;
+        /** If true, a clear button will be enabled on focus */
+        this.clearable = false;
         /** The function used to filter the menu list, given the user's input value. */
         this.filterFunction = (inputValue, item) => {
             return item.label.toLowerCase().startsWith(inputValue.toLowerCase());
         };
         this.optionList = [];
         this.emptyMenu = false;
+        // Used to show and hide the clear button
+        this.isFocused = false;
     }
     connectedCallback() {
         super.connectedCallback();
+        this.addEventListener("focus", async () => {
+            this.isFocused = true;
+        });
+        this.addEventListener("blur", async () => {
+            this.isFocused = false;
+        });
+        this.addEventListener("keydown", (e) => {
+            var _a, _b;
+            if (e.key === "Enter" &&
+                ((_b = (_a = e.target.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".form-clearable")) === null || _b === void 0 ? void 0 : _b.matches(":focus"))) {
+                this._handleClear();
+            }
+        });
         this.addEventListener("sgds-hide", async () => {
             const sgdsInput = await this._input;
             sgdsInput.focus();
@@ -286,6 +303,15 @@ class SgdsComboBox extends selectElement.SelectElement {
             }
         }
     }
+    // For clearing the value
+    async _handleClear() {
+        var _a;
+        this.value = "";
+        (_a = this.options) === null || _a === void 0 ? void 0 : _a.forEach(o => (o.active = false));
+        const sgdsInput = await this._input;
+        sgdsInput.focus();
+        this.showMenu();
+    }
     /** For form reset  */
     async _mixinResetFormControl() {
         this.value = this.defaultValue;
@@ -324,6 +350,7 @@ class SgdsComboBox extends selectElement.SelectElement {
      */
     _renderInput() {
         const wantFeedbackStyle = this.hasFeedback;
+        const showButton = (this.isFocused || this.menuIsOpen) && this.value !== "" && this.clearable;
         return lit.html `
       <div
         ${ref_js.ref(this.myDropdown)}
@@ -369,7 +396,22 @@ class SgdsComboBox extends selectElement.SelectElement {
             : ""}"
           />
         </div>
-        <sgds-icon name="chevron-down" size="md"></sgds-icon>
+        ${showButton
+            ? lit.html `
+              <sgds-icon
+                id=${`${this._controlId}-combobox-clear-button`}
+                tabindex="0"
+                class="form-clearable"
+                name="xcircle-fill"
+                size="md"
+                @click=${this._handleClear}
+                aria-hidden=${showButton ? "false" : "true"}
+              ></sgds-icon>
+            `
+            : lit.nothing}
+        <sgds-icon name=${this.menuIsOpen ? "chevron-up" : "chevron-down"} size="md"></sgds-icon>
       </div>
     `;
     }
@@ -382,6 +424,7 @@ class SgdsComboBox extends selectElement.SelectElement {
         ${this._renderLabel()}
         <!-- The input -->
         ${this._renderInput()} ${this._renderFeedback()}
         <ul id=${this.dropdownMenuId} class="dropdown-menu" part="menu" tabindex="-1" ${ref_js.ref(this.menuRef)}>
           <slot id="default" @slotchange=${this._handleDefaultSlotChange}
             ><div class="empty-menu">No options</div></slot
@@ -415,6 +458,9 @@ tslib.__decorate([
 tslib.__decorate([
     decorators_js.property({ type: Boolean, reflect: true })
 ], SgdsComboBox.prototype, "badgeFullWidth", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: Boolean, reflect: true })
+], SgdsComboBox.prototype, "clearable", void 0);
 tslib.__decorate([
     decorators_js.property()
 ], SgdsComboBox.prototype, "filterFunction", void 0);
@@ -430,6 +476,9 @@ tslib.__decorate([
 tslib.__decorate([
     decorators_js.state()
 ], SgdsComboBox.prototype, "emptyMenu", void 0);
+tslib.__decorate([
+    decorators_js.state()
+], SgdsComboBox.prototype, "isFocused", void 0);
 tslib.__decorate([
     watch.watch("value", { waitUntilFirstUpdate: true })
 ], SgdsComboBox.prototype, "_handleValueChange", null);

package/react/components/ComboBox/sgds-combo-box.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sgds-combo-box.cjs.js","sources":["../../../../src/components/ComboBox/sgds-combo-box.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements, queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { SelectElement, SgdsOptionData } from \"../../base/select-element\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsBadge } from \"../Badge/sgds-badge\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport comboBoxStyle from \"./combo-box.css\";\nimport formTextControlStyle from \"../../styles/form-text-control.css\";\nimport { SgdsComboBoxOption } from \"./sgds-combo-box-option\";\n\nimport { repeat } from \"lit/directives/repeat.js\";\n\n/*\n Each item in the ComboBox has a label to display\n * and a value (the actual data / ID).\n /\ntype SgdsComboBoxOptionData = SgdsOptionData;\n/\n @summary ComboBox component is used for users to make one or more selections from a list through user input, keyboard or mouse actions\n \n @slot default - default slot to pass in sgds-combo-box-option\n \n @event sgds-select - Emitted when the combo box's selected value changes.\n * @event sgds-change - Emitted when the combo box's value changes.\n * @event sgds-input - Emitted when user input is received and its value changes.\n * @event sgds-focus - Emitted when user input is focused.\n * @event sgds-blur - Emitted when user input is blurred.\n /\n\nexport class SgdsComboBox extends SelectElement {\n static styles = [...SelectElement.styles, formTextControlStyle, comboBoxStyle];\n\n /* @internal /\n static dependencies = {\n \"sgds-combo-box-option\": SgdsComboBoxOption,\n \"sgds-icon\": SgdsIcon,\n \"sgds-badge\": SgdsBadge\n };\n\n /* If true, renders multiple checkbox selection items. If false, single-select. /\n @property({ type: Boolean, reflect: true }) multiSelect = false;\n\n /* If true, renders badge that fills width of combobox /\n @property({ type: Boolean, reflect: true }) badgeFullWidth = false;\n\n /* The function used to filter the menu list, given the user's input value. /\n @property()\n filterFunction: (inputValue: string, item: SgdsComboBoxOptionData) => boolean = (inputValue, item) => {\n return item.label.toLowerCase().startsWith(inputValue.toLowerCase());\n };\n\n @queryAsync(\"input#multi-select-input-tracker\") private _multiSelectInput: Promise<HTMLInputElement>;\n\n @queryAssignedElements({ flatten: true, selector: \"sgds-combo-box-option\" })\n protected options: SgdsComboBoxOption[];\n\n @state() optionList: SgdsComboBoxOptionData[] = [];\n @state() emptyMenu = false;\n\n connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener(\"sgds-hide\", async () => {\n const sgdsInput = await this._input;\n sgdsInput.focus();\n this.options.forEach(o => o.removeAttribute(\"hidden\"));\n // reset emptyMenu state\n this.emptyMenu = false;\n });\n }\n async firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n this.menuList.forEach(o => {\n const comboBoxOption = document.createElement(\"sgds-combo-box-option\") as SgdsComboBoxOption;\n comboBoxOption.innerText = o.label;\n comboBoxOption.value = o.value;\n comboBoxOption.checkbox = this.multiSelect;\n comboBoxOption.active = this.value.includes(o.value);\n this.appendChild(comboBoxOption);\n });\n this._setupValidation(this.menuList);\n\n if (this.menuIsOpen && !this.readonly) {\n this.showMenu();\n }\n }\n\n protected async _handleDefaultSlotChange(e: Event) {\n const assignedElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n assignedElements.forEach(option => {\n option.addEventListener(\"i-sgds-select\", (e: CustomEvent) => {\n if (option.hasAttribute(\"disabled\")) return;\n this._handleItemSelected(e);\n });\n if (this.value.includes(option.getAttribute(\"value\"))) {\n option.setAttribute(\"active\", \"true\");\n }\n if (this.multiSelect) {\n option.addEventListener(\"i-sgds-unselect\", (e: CustomEvent) => {\n const option = e.target as SgdsComboBoxOption;\n if (option.disabled) return;\n this._handleItemUnselect(e);\n });\n }\n });\n\n /* this will trigger _updateValueAndDisplayValue /\n await this.updateComplete;\n this.optionList = await this._getMenuListFromOptions(assignedElements);\n this._setupValidation(this.optionList);\n }\n\n private async _setupValidation(list: SgdsComboBoxOptionData[]) {\n if (this.value && list.length > 0) {\n const valueArray = this.value.split(\";\");\n const initialSelectedItem = list.filter(({ value }) => valueArray.includes(value));\n this.selectedItems = [...initialSelectedItem, ...this.selectedItems];\n\n if (!this.multiSelect) {\n this.displayValue = initialSelectedItem[0]?.label;\n }\n this.multiSelect ? (this.input = await this._multiSelectInput) : (this.input = await this._input);\n\n this._mixinValidate(this.input);\n }\n }\n @watch(\"value\", { waitUntilFirstUpdate: true })\n async _handleValueChange() {\n // when value change, always emit a change event\n this.emit(\"sgds-change\");\n this.options.forEach(o => o.removeAttribute(\"hidden\"));\n if (this.value) {\n this.emit(\"sgds-select\");\n }\n\n const sgdsInput = await this._input;\n this._mixinSetFormValue();\n\n if (this.multiSelect) {\n this._mixinValidate(this.input);\n } else {\n this._mixinValidate(sgdsInput);\n }\n\n // When value is updated by user and it doesn't map to selectedItems, we should re-map selectedItems\n const selectedItemVal = this.selectedItems.map(val => val.value).join(\";\");\n if (selectedItemVal !== this.value) {\n this._updateValueAndDisplayValue(this.optionList);\n }\n\n if (!this._isTouched && this.value === \"\") return;\n this.invalid = !this._mixinReportValidity();\n }\n\n @watch(\"optionList\", { waitUntilFirstUpdate: true })\n _handleOptionListChange() {\n this._updateValueAndDisplayValue(this.optionList);\n }\n @watch(\"menuList\", { waitUntilFirstUpdate: true })\n _handleMenuListChange() {\n const newMenu = this.menuList.map(o => {\n const comboBoxOption = document.createElement(\"sgds-combo-box-option\") as SgdsComboBoxOption;\n comboBoxOption.innerText = o.label;\n comboBoxOption.value = o.value;\n comboBoxOption.checkbox = this.multiSelect;\n comboBoxOption.active = this.value.includes(o.value);\n return comboBoxOption;\n });\n this.replaceChildren(...newMenu);\n }\n\n private _updateValueAndDisplayValue(list: SgdsComboBoxOptionData[]) {\n const valueArray = this.value.split(\";\");\n const initialSelectedItem = list.filter(({ value }) => valueArray.includes(value));\n this.selectedItems = [...initialSelectedItem];\n\n // When the new filtered items don't match value we update it\n const updatedValue = initialSelectedItem.map(item => item.value).join(\";\");\n if (updatedValue !== this.value) {\n this.value = updatedValue;\n }\n\n if (!this.multiSelect) {\n this.displayValue = initialSelectedItem[0]?.label ?? \"\";\n }\n }\n\n // Called each time the user types in the <sgds-input>, we set .value and show the menu\n private async _handleInputChange(e: CustomEvent) {\n this.emit(\"sgds-input\");\n const input = e.target as HTMLInputElement;\n this.displayValue = input.value;\n // There is a race condition in certain situations where this.optionList is not fully updated during slotchange\n // Hence instead of using this.optionList, we have to perform a query on the <sgds-combo-box-option> elements\n const optionList = this.options.map(o => ({ value: o.value, label: o.textContent.trim() }));\n this.filteredList = optionList.filter(item => this.filterFunction(this.displayValue, item));\n\n // reset menu list when displayValue\n if (this.displayValue === \"\" && !this.multiSelect) {\n this.selectedItems = [];\n this.value = this.selectedItems.join(\";\");\n this.options.forEach(o => (o.active = false));\n }\n\n this.invalid = false;\n this.showMenu();\n\n // Filtering for slots\n this.emptyMenu = this.filteredList.length === 0;\n const filteredValues = this.filteredList.map(l => l.value);\n\n this.options.forEach(o => {\n if (!filteredValues.includes(o.value)) {\n o.hidden = true;\n } else {\n o.hidden = false;\n }\n });\n if (this.displayValue === \"\") {\n this.options.forEach(o => (o.hidden = false));\n await this.updateComplete;\n }\n }\n\n /\n Called whenever an <sgds-combo-box-option> dispatches sgds-select\"\n /\n protected async _handleItemSelected(e: Event) {\n const itemEl = e.target as SgdsComboBoxOption;\n const itemLabel = itemEl.textContent?.trim() ?? \"\";\n const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n const foundItem = this.filteredList.find(i => i.value.toString() === itemValueAttr) \|\| {\n label: itemLabel,\n value: itemValueAttr\n };\n\n if (this.multiSelect) {\n if (!this.selectedItems.some(i => i.value === foundItem.value)) {\n this.selectedItems = [...this.selectedItems, foundItem];\n setTimeout(() => (this.displayValue = \"\"));\n }\n this.hideMenu();\n this.value = this.selectedItems.map(i => i.value).join(\";\");\n } else {\n // Single-select\n // Only update active states if a new item is selected\n if (this.selectedItems.length === 0 \|\| this.selectedItems[0].value !== foundItem.value) {\n // Remove active from all options\n this.options.forEach(o => (o.active = false));\n // Set active only on the selected item\n itemEl.active = true;\n this.selectedItems = [foundItem];\n this.value = foundItem.value.toString();\n this.displayValue = foundItem.label;\n this.hideMenu();\n }\n // If the same item is clicked again, do nothing (keep active state)\n }\n }\n\n private _handleItemUnselect(e: CustomEvent) {\n const itemEl = e.target as SgdsComboBoxOption;\n itemEl.removeAttribute(\"active\");\n\n const itemLabel = itemEl.textContent?.trim() ?? \"\";\n const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n const foundItem = this.filteredList.find(i => i.value.toString() === itemValueAttr) \|\| {\n label: itemLabel,\n value: itemValueAttr\n };\n\n this.selectedItems = this.selectedItems.filter(i => i.value !== foundItem.value);\n this.value = this.selectedItems.map(i => i.value).join(\";\");\n }\n\n private async _handleBadgeDismissed(e: CustomEvent, item: SgdsComboBoxOptionData) {\n e.preventDefault();\n const removedValue = item.value;\n this.options?.forEach(o => (o.value === removedValue ? (o.active = false) : null));\n this.selectedItems = this.selectedItems.filter(i => i.value !== item.value);\n this.value = this.selectedItems.map(i => i.value).join(\";\");\n }\n\n private async _handleMultiSelectKeyDown(e: KeyboardEvent) {\n // Only do this in multi-select mode\n if (!this.multiSelect) {\n return;\n }\n\n if (e.key === \"Backspace\" && this.multiSelect) {\n if (this.displayValue.trim() === \"\" && this.selectedItems.length > 0) {\n const removedValue = this.selectedItems[this.selectedItems.length - 1].value;\n this.options?.forEach(o => (o.value === removedValue ? (o.active = false) : null));\n this.selectedItems = this.selectedItems.slice(0, -1);\n this.value = this.selectedItems.map(i => i.value).join(\";\");\n }\n }\n }\n\n protected _handleFocus() {\n this.emit(\"sgds-focus\");\n }\n\n protected async _handleInputBlur(e: Event) {\n e.preventDefault();\n this.emit(\"sgds-blur\");\n if (this.multiSelect) {\n const displayValueMatchedSelectedItems = this.selectedItems.filter(({ label }) => this.displayValue === label);\n if (displayValueMatchedSelectedItems.length <= 0) {\n this.displayValue = \"\";\n }\n } else {\n // Single select\n if (this.selectedItems.length > 0) {\n this.displayValue = this.selectedItems[0].label;\n } else {\n this.displayValue = \"\";\n }\n }\n }\n\n /* For form reset /\n protected async _mixinResetFormControl() {\n this.value = this.defaultValue;\n if (!this.multiSelect) {\n //reset menu\n this.options.forEach(o => {\n o.active = o.value === this.value;\n });\n const initialOption = this.options.filter(o => o.value === this.value);\n if (initialOption.length <= 0) {\n this.displayValue = \"\";\n } else {\n this.displayValue = initialOption[0].textContent.trim();\n }\n this._mixinResetValidity(await this._input);\n } else {\n const valueArray = this.value.split(\";\");\n // reset menu\n this.options.forEach(o => {\n o.active = valueArray.includes(o.value);\n });\n const initialOption = this.options.filter(o => valueArray.includes(o.value));\n this.selectedItems = initialOption.map(o => ({ value: o.value, label: o.textContent.trim() }));\n this._mixinResetValidity(await this._multiSelectInput);\n }\n }\n /\n Used `repeat` helper from Lit to render instead of .map:\n * The reassigning of value is affecting the truncation on badge as it is not triggering the slot change event.\n \n To compare this to lit-html's default handling for lists, consider reversing a large list of names:\n * For a list created using Array.map, lit-html maintains the DOM nodes for the list items, but reassigns the values\n * For a list created using repeat, the repeat directive reorders the existing DOM nodes, so the nodes representing the first list item move to the last position.\n */\n protected _renderInput() {\n const wantFeedbackStyle = this.hasFeedback;\n\n return html`\n <div\n ${ref(this.myDropdown)}\n class=\"form-control-group ${classMap({\n disabled: this.disabled,\n readonly: this.readonly,\n \"is-invalid\": this.invalid && wantFeedbackStyle\n })}\"\n @click=${this._handleClick}\n >\n <div class=\"combobox-input-container\">\n ${this.multiSelect\n ? html`\n ${repeat(\n this.selectedItems,\n item => item.value,\n item =>\n html`<sgds-badge\n outlined\n variant=\"neutral\"\n show\n dismissible\n ?fullwidth=${this.badgeFullWidth}\n @sgds-hide=${e => this._handleBadgeDismissed(e, item)}\n >${item.label}</sgds-badge\n >`\n )}\n `\n : nothing}\n <input\n class=\"form-control\"\n type=\"text\"\n id=${this._controlId}\n name=${ifDefined(this.name)}\n placeholder=${ifDefined(this.placeholder)}\n aria-invalid=${this.invalid ? \"true\" : \"false\"}\n ?autofocus=${this.autofocus}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n .value=${this.displayValue.trim()}\n @input=${this._handleInputChange}\n @blur=${this._handleInputBlur}\n @focus=${this._handleFocus}\n aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n ? `${this._controlId}-invalid`\n : \"\"}\"\n />\n </div>\n <sgds-icon name=\"chevron-down\" size=\"md\"></sgds-icon>\n </div>\n `;\n }\n render() {\n return html`\n <div\n class=${classMap({ \"form-control-container\": true, disabled: this.disabled, combobox: true })}\n @keydown=${this._handleMultiSelectKeyDown}\n >\n ${this._renderLabel()}\n <!-- The input -->\n ${this._renderInput()} ${this._renderFeedback()}\n <ul id=${this.dropdownMenuId} class=\"dropdown-menu\" part=\"menu\" tabindex=\"-1\" ${ref(this.menuRef)}>\n <slot id=\"default\" @slotchange=${this._handleDefaultSlotChange}\n ><div class=\"empty-menu\">No options</div></slot\n >\n ${this.emptyMenu && this.optionList.length > 0 ? html`<div class=\"empty-menu\">No options</div>` : nothing}\n </ul>\n </div>\n\n <!-- Required an input element for constraint validation -->\n ${this.multiSelect\n ? html`<input\n .value=${live(this.value)}\n id=\"multi-select-input-tracker\"\n class=\"visually-hidden\"\n ?required=${this.required}\n />`\n : nothing}\n `;\n }\n}\n\nexport default SgdsComboBox;\n\n//TODO:\n// Replace this.optionList ?\n// During slotchange event _handleDefaultSlotChange, we try to populate this.optionList to obtain value attribute and textContent as label from <sgds-combo-box-option>\n// However, it has race conditions in certain situation like nextjs, where the last option's label (essentially the slot of <sgds-combo-box-option>) may not be available immediately.\n// To circumvent this, I avoid relying on this.optionList to perform filterFunction onInput handler and query this.options directly at the point of user typing.\n// To prevent confusion, this.optionList should ideally be removed in future iterations\n"],"names":["SelectElement","html","ref","classMap","repeat","nothing","ifDefined","live","formTextControlStyle","comboBoxStyle","SgdsComboBoxOption","SgdsIcon","SgdsBadge","__decorate","property","queryAsync","queryAssignedElements","state","watch"],"mappings":"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"}
1	+ {"version":3,"file":"sgds-combo-box.cjs.js","sources":["../../../../src/components/ComboBox/sgds-combo-box.ts"],"sourcesContent":["import { live } from \"lit/directives/live.js\";\nimport { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements, queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\n\nimport { ref } from \"lit/directives/ref.js\";\nimport { SelectElement, SgdsOptionData } from \"../../base/select-element\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsBadge } from \"../Badge/sgds-badge\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport comboBoxStyle from \"./combo-box.css\";\nimport formTextControlStyle from \"../../styles/form-text-control.css\";\nimport { SgdsComboBoxOption } from \"./sgds-combo-box-option\";\n\nimport { repeat } from \"lit/directives/repeat.js\";\n\n/*\n Each item in the ComboBox has a label to display\n * and a value (the actual data / ID).\n /\ntype SgdsComboBoxOptionData = SgdsOptionData;\n/\n @summary ComboBox component is used for users to make one or more selections from a list through user input, keyboard or mouse actions\n \n @slot default - default slot to pass in sgds-combo-box-option\n \n @event sgds-select - Emitted when the combo box's selected value changes.\n * @event sgds-change - Emitted when the combo box's value changes.\n * @event sgds-input - Emitted when user input is received and its value changes.\n * @event sgds-focus - Emitted when user input is focused.\n * @event sgds-blur - Emitted when user input is blurred.\n /\n\nexport class SgdsComboBox extends SelectElement {\n static styles = [...SelectElement.styles, formTextControlStyle, comboBoxStyle];\n\n /* @internal /\n static dependencies = {\n \"sgds-combo-box-option\": SgdsComboBoxOption,\n \"sgds-icon\": SgdsIcon,\n \"sgds-badge\": SgdsBadge\n };\n\n /* If true, renders multiple checkbox selection items. If false, single-select. /\n @property({ type: Boolean, reflect: true }) multiSelect = false;\n\n /* If true, renders badge that fills width of combobox /\n @property({ type: Boolean, reflect: true }) badgeFullWidth = false;\n\n /* If true, a clear button will be enabled on focus /\n @property({ type: Boolean, reflect: true }) clearable = false;\n\n /* The function used to filter the menu list, given the user's input value. /\n @property()\n filterFunction: (inputValue: string, item: SgdsComboBoxOptionData) => boolean = (inputValue, item) => {\n return item.label.toLowerCase().startsWith(inputValue.toLowerCase());\n };\n\n @queryAsync(\"input#multi-select-input-tracker\") private _multiSelectInput: Promise<HTMLInputElement>;\n\n @queryAssignedElements({ flatten: true, selector: \"sgds-combo-box-option\" })\n protected options: SgdsComboBoxOption[];\n\n @state() optionList: SgdsComboBoxOptionData[] = [];\n @state() emptyMenu = false;\n\n // Used to show and hide the clear button\n @state() isFocused = false;\n\n connectedCallback(): void {\n super.connectedCallback();\n\n this.addEventListener(\"focus\", async () => {\n this.isFocused = true;\n });\n\n this.addEventListener(\"blur\", async () => {\n this.isFocused = false;\n });\n\n this.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n if (\n e.key === \"Enter\" &&\n (e.target as HTMLElement).shadowRoot?.querySelector(\".form-clearable\")?.matches(\":focus\")\n ) {\n this._handleClear();\n }\n });\n\n this.addEventListener(\"sgds-hide\", async () => {\n const sgdsInput = await this._input;\n sgdsInput.focus();\n\n this.options.forEach(o => o.removeAttribute(\"hidden\"));\n // reset emptyMenu state\n this.emptyMenu = false;\n });\n }\n async firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n this.menuList.forEach(o => {\n const comboBoxOption = document.createElement(\"sgds-combo-box-option\") as SgdsComboBoxOption;\n comboBoxOption.innerText = o.label;\n comboBoxOption.value = o.value;\n comboBoxOption.checkbox = this.multiSelect;\n comboBoxOption.active = this.value.includes(o.value);\n this.appendChild(comboBoxOption);\n });\n this._setupValidation(this.menuList);\n\n if (this.menuIsOpen && !this.readonly) {\n this.showMenu();\n }\n }\n\n protected async _handleDefaultSlotChange(e: Event) {\n const assignedElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n assignedElements.forEach(option => {\n option.addEventListener(\"i-sgds-select\", (e: CustomEvent) => {\n if (option.hasAttribute(\"disabled\")) return;\n this._handleItemSelected(e);\n });\n if (this.value.includes(option.getAttribute(\"value\"))) {\n option.setAttribute(\"active\", \"true\");\n }\n if (this.multiSelect) {\n option.addEventListener(\"i-sgds-unselect\", (e: CustomEvent) => {\n const option = e.target as SgdsComboBoxOption;\n if (option.disabled) return;\n this._handleItemUnselect(e);\n });\n }\n });\n\n /* this will trigger _updateValueAndDisplayValue /\n await this.updateComplete;\n this.optionList = await this._getMenuListFromOptions(assignedElements);\n\n this._setupValidation(this.optionList);\n }\n\n private async _setupValidation(list: SgdsComboBoxOptionData[]) {\n if (this.value && list.length > 0) {\n const valueArray = this.value.split(\";\");\n const initialSelectedItem = list.filter(({ value }) => valueArray.includes(value));\n this.selectedItems = [...initialSelectedItem, ...this.selectedItems];\n\n if (!this.multiSelect) {\n this.displayValue = initialSelectedItem[0]?.label;\n }\n this.multiSelect ? (this.input = await this._multiSelectInput) : (this.input = await this._input);\n\n this._mixinValidate(this.input);\n }\n }\n @watch(\"value\", { waitUntilFirstUpdate: true })\n async _handleValueChange() {\n // when value change, always emit a change event\n this.emit(\"sgds-change\");\n this.options.forEach(o => o.removeAttribute(\"hidden\"));\n if (this.value) {\n this.emit(\"sgds-select\");\n }\n\n const sgdsInput = await this._input;\n this._mixinSetFormValue();\n\n if (this.multiSelect) {\n this._mixinValidate(this.input);\n } else {\n this._mixinValidate(sgdsInput);\n }\n\n // When value is updated by user and it doesn't map to selectedItems, we should re-map selectedItems\n const selectedItemVal = this.selectedItems.map(val => val.value).join(\";\");\n if (selectedItemVal !== this.value) {\n this._updateValueAndDisplayValue(this.optionList);\n }\n\n if (!this._isTouched && this.value === \"\") return;\n this.invalid = !this._mixinReportValidity();\n }\n\n @watch(\"optionList\", { waitUntilFirstUpdate: true })\n _handleOptionListChange() {\n this._updateValueAndDisplayValue(this.optionList);\n }\n\n @watch(\"menuList\", { waitUntilFirstUpdate: true })\n _handleMenuListChange() {\n const newMenu = this.menuList.map(o => {\n const comboBoxOption = document.createElement(\"sgds-combo-box-option\") as SgdsComboBoxOption;\n comboBoxOption.innerText = o.label;\n comboBoxOption.value = o.value;\n comboBoxOption.checkbox = this.multiSelect;\n comboBoxOption.active = this.value.includes(o.value);\n return comboBoxOption;\n });\n this.replaceChildren(...newMenu);\n }\n\n private _updateValueAndDisplayValue(list: SgdsComboBoxOptionData[]) {\n const valueArray = this.value.split(\";\");\n const initialSelectedItem = list.filter(({ value }) => valueArray.includes(value));\n this.selectedItems = [...initialSelectedItem];\n\n // When the new filtered items don't match value we update it\n const updatedValue = initialSelectedItem.map(item => item.value).join(\";\");\n if (updatedValue !== this.value) {\n this.value = updatedValue;\n }\n\n if (!this.multiSelect) {\n this.displayValue = initialSelectedItem[0]?.label ?? \"\";\n }\n }\n\n // Called each time the user types in the <sgds-input>, we set .value and show the menu\n private async _handleInputChange(e: CustomEvent) {\n this.emit(\"sgds-input\");\n const input = e.target as HTMLInputElement;\n this.displayValue = input.value;\n // There is a race condition in certain situations where this.optionList is not fully updated during slotchange\n // Hence instead of using this.optionList, we have to perform a query on the <sgds-combo-box-option> elements\n const optionList = this.options.map(o => ({ value: o.value, label: o.textContent.trim() }));\n this.filteredList = optionList.filter(item => this.filterFunction(this.displayValue, item));\n\n // reset menu list when displayValue\n if (this.displayValue === \"\" && !this.multiSelect) {\n this.selectedItems = [];\n this.value = this.selectedItems.join(\";\");\n this.options.forEach(o => (o.active = false));\n }\n\n this.invalid = false;\n this.showMenu();\n\n // Filtering for slots\n this.emptyMenu = this.filteredList.length === 0;\n const filteredValues = this.filteredList.map(l => l.value);\n\n this.options.forEach(o => {\n if (!filteredValues.includes(o.value)) {\n o.hidden = true;\n } else {\n o.hidden = false;\n }\n });\n if (this.displayValue === \"\") {\n this.options.forEach(o => (o.hidden = false));\n await this.updateComplete;\n }\n }\n\n /\n Called whenever an <sgds-combo-box-option> dispatches sgds-select\"\n /\n protected async _handleItemSelected(e: Event) {\n const itemEl = e.target as SgdsComboBoxOption;\n const itemLabel = itemEl.textContent?.trim() ?? \"\";\n const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n const foundItem = this.filteredList.find(i => i.value.toString() === itemValueAttr) \|\| {\n label: itemLabel,\n value: itemValueAttr\n };\n\n if (this.multiSelect) {\n if (!this.selectedItems.some(i => i.value === foundItem.value)) {\n this.selectedItems = [...this.selectedItems, foundItem];\n setTimeout(() => (this.displayValue = \"\"));\n }\n this.hideMenu();\n this.value = this.selectedItems.map(i => i.value).join(\";\");\n } else {\n // Single-select\n // Only update active states if a new item is selected\n if (this.selectedItems.length === 0 \|\| this.selectedItems[0].value !== foundItem.value) {\n // Remove active from all options\n this.options.forEach(o => (o.active = false));\n // Set active only on the selected item\n itemEl.active = true;\n this.selectedItems = [foundItem];\n this.value = foundItem.value.toString();\n this.displayValue = foundItem.label;\n this.hideMenu();\n }\n // If the same item is clicked again, do nothing (keep active state)\n }\n }\n\n private _handleItemUnselect(e: CustomEvent) {\n const itemEl = e.target as SgdsComboBoxOption;\n itemEl.removeAttribute(\"active\");\n\n const itemLabel = itemEl.textContent?.trim() ?? \"\";\n const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n const foundItem = this.filteredList.find(i => i.value.toString() === itemValueAttr) \|\| {\n label: itemLabel,\n value: itemValueAttr\n };\n\n this.selectedItems = this.selectedItems.filter(i => i.value !== foundItem.value);\n this.value = this.selectedItems.map(i => i.value).join(\";\");\n }\n\n private async _handleBadgeDismissed(e: CustomEvent, item: SgdsComboBoxOptionData) {\n e.preventDefault();\n const removedValue = item.value;\n this.options?.forEach(o => (o.value === removedValue ? (o.active = false) : null));\n this.selectedItems = this.selectedItems.filter(i => i.value !== item.value);\n this.value = this.selectedItems.map(i => i.value).join(\";\");\n }\n\n private async _handleMultiSelectKeyDown(e: KeyboardEvent) {\n // Only do this in multi-select mode\n if (!this.multiSelect) {\n return;\n }\n\n if (e.key === \"Backspace\" && this.multiSelect) {\n if (this.displayValue.trim() === \"\" && this.selectedItems.length > 0) {\n const removedValue = this.selectedItems[this.selectedItems.length - 1].value;\n this.options?.forEach(o => (o.value === removedValue ? (o.active = false) : null));\n this.selectedItems = this.selectedItems.slice(0, -1);\n this.value = this.selectedItems.map(i => i.value).join(\";\");\n }\n }\n }\n\n protected _handleFocus() {\n this.emit(\"sgds-focus\");\n }\n\n protected async _handleInputBlur(e: Event) {\n e.preventDefault();\n\n this.emit(\"sgds-blur\");\n\n if (this.multiSelect) {\n const displayValueMatchedSelectedItems = this.selectedItems.filter(({ label }) => this.displayValue === label);\n if (displayValueMatchedSelectedItems.length <= 0) {\n this.displayValue = \"\";\n }\n } else {\n // Single select\n if (this.selectedItems.length > 0) {\n this.displayValue = this.selectedItems[0].label;\n } else {\n this.displayValue = \"\";\n }\n }\n }\n\n // For clearing the value\n protected async _handleClear() {\n this.value = \"\";\n this.options?.forEach(o => (o.active = false));\n\n const sgdsInput = await this._input;\n sgdsInput.focus();\n this.showMenu();\n }\n\n /* For form reset /\n protected async _mixinResetFormControl() {\n this.value = this.defaultValue;\n if (!this.multiSelect) {\n //reset menu\n this.options.forEach(o => {\n o.active = o.value === this.value;\n });\n const initialOption = this.options.filter(o => o.value === this.value);\n if (initialOption.length <= 0) {\n this.displayValue = \"\";\n } else {\n this.displayValue = initialOption[0].textContent.trim();\n }\n this._mixinResetValidity(await this._input);\n } else {\n const valueArray = this.value.split(\";\");\n // reset menu\n this.options.forEach(o => {\n o.active = valueArray.includes(o.value);\n });\n const initialOption = this.options.filter(o => valueArray.includes(o.value));\n this.selectedItems = initialOption.map(o => ({ value: o.value, label: o.textContent.trim() }));\n this._mixinResetValidity(await this._multiSelectInput);\n }\n }\n\n /\n Used `repeat` helper from Lit to render instead of .map:\n * The reassigning of value is affecting the truncation on badge as it is not triggering the slot change event.\n \n To compare this to lit-html's default handling for lists, consider reversing a large list of names:\n * For a list created using Array.map, lit-html maintains the DOM nodes for the list items, but reassigns the values\n * For a list created using repeat, the repeat directive reorders the existing DOM nodes, so the nodes representing the first list item move to the last position.\n */\n protected _renderInput() {\n const wantFeedbackStyle = this.hasFeedback;\n const showButton = (this.isFocused \|\| this.menuIsOpen) && this.value !== \"\" && this.clearable;\n\n return html`\n <div\n ${ref(this.myDropdown)}\n class=\"form-control-group ${classMap({\n disabled: this.disabled,\n readonly: this.readonly,\n \"is-invalid\": this.invalid && wantFeedbackStyle\n })}\"\n @click=${this._handleClick}\n >\n <div class=\"combobox-input-container\">\n ${this.multiSelect\n ? html`\n ${repeat(\n this.selectedItems,\n item => item.value,\n item =>\n html`<sgds-badge\n outlined\n variant=\"neutral\"\n show\n dismissible\n ?fullwidth=${this.badgeFullWidth}\n @sgds-hide=${e => this._handleBadgeDismissed(e, item)}\n >${item.label}</sgds-badge\n >`\n )}\n `\n : nothing}\n <input\n class=\"form-control\"\n type=\"text\"\n id=${this._controlId}\n name=${ifDefined(this.name)}\n placeholder=${ifDefined(this.placeholder)}\n aria-invalid=${this.invalid ? \"true\" : \"false\"}\n ?autofocus=${this.autofocus}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n .value=${this.displayValue.trim()}\n @input=${this._handleInputChange}\n @blur=${this._handleInputBlur}\n @focus=${this._handleFocus}\n aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n ? `${this._controlId}-invalid`\n : \"\"}\"\n />\n </div>\n\n ${showButton\n ? html`\n <sgds-icon\n id=${`${this._controlId}-combobox-clear-button`}\n tabindex=\"0\"\n class=\"form-clearable\"\n name=\"xcircle-fill\"\n size=\"md\"\n @click=${this._handleClear}\n aria-hidden=${showButton ? \"false\" : \"true\"}\n ></sgds-icon>\n `\n : nothing}\n\n <sgds-icon name=${this.menuIsOpen ? \"chevron-up\" : \"chevron-down\"} size=\"md\"></sgds-icon>\n </div>\n `;\n }\n render() {\n return html`\n <div\n class=${classMap({ \"form-control-container\": true, disabled: this.disabled, combobox: true })}\n @keydown=${this._handleMultiSelectKeyDown}\n >\n ${this._renderLabel()}\n <!-- The input -->\n ${this._renderInput()} ${this._renderFeedback()}\n\n <ul id=${this.dropdownMenuId} class=\"dropdown-menu\" part=\"menu\" tabindex=\"-1\" ${ref(this.menuRef)}>\n <slot id=\"default\" @slotchange=${this._handleDefaultSlotChange}\n ><div class=\"empty-menu\">No options</div></slot\n >\n ${this.emptyMenu && this.optionList.length > 0 ? html`<div class=\"empty-menu\">No options</div>` : nothing}\n </ul>\n </div>\n\n <!-- Required an input element for constraint validation -->\n ${this.multiSelect\n ? html`<input\n .value=${live(this.value)}\n id=\"multi-select-input-tracker\"\n class=\"visually-hidden\"\n ?required=${this.required}\n />`\n : nothing}\n `;\n }\n}\n\nexport default SgdsComboBox;\n\n//TODO:\n// Replace this.optionList ?\n// During slotchange event _handleDefaultSlotChange, we try to populate this.optionList to obtain value attribute and textContent as label from <sgds-combo-box-option>\n// However, it has race conditions in certain situation like nextjs, where the last option's label (essentially the slot of <sgds-combo-box-option>) may not be available immediately.\n// To circumvent this, I avoid relying on this.optionList to perform filterFunction onInput handler and query this.options directly at the point of user typing.\n// To prevent confusion, this.optionList should ideally be removed in future iterations\n"],"names":["SelectElement","html","ref","classMap","repeat","nothing","ifDefined","live","formTextControlStyle","comboBoxStyle","SgdsComboBoxOption","SgdsIcon","SgdsBadge","__decorate","property","queryAsync","queryAssignedElements","state","watch"],"mappings":"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"}

package/react/components/ComboBox/sgds-combo-box.js CHANGED Viewed

@@ -1,10 +1,10 @@
 'use client';
 import { __decorate } from 'tslib';
+import { live } from 'lit/directives/live.js';
 import { html, nothing } from 'lit';
 import { property, queryAsync, queryAssignedElements, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { live } from 'lit/directives/live.js';
 import { ref } from 'lit/directives/ref.js';
 import { SelectElement } from '../../base/select-element.js';
 import { watch } from '../../utils/watch.js';
@@ -33,15 +33,32 @@ class SgdsComboBox extends SelectElement {
         this.multiSelect = false;
         /** If true, renders badge that fills width of combobox */
         this.badgeFullWidth = false;
+        /** If true, a clear button will be enabled on focus */
+        this.clearable = false;
         /** The function used to filter the menu list, given the user's input value. */
         this.filterFunction = (inputValue, item) => {
             return item.label.toLowerCase().startsWith(inputValue.toLowerCase());
         };
         this.optionList = [];
         this.emptyMenu = false;
+        // Used to show and hide the clear button
+        this.isFocused = false;
     }
     connectedCallback() {
         super.connectedCallback();
+        this.addEventListener("focus", async () => {
+            this.isFocused = true;
+        });
+        this.addEventListener("blur", async () => {
+            this.isFocused = false;
+        });
+        this.addEventListener("keydown", (e) => {
+            var _a, _b;
+            if (e.key === "Enter" &&
+                ((_b = (_a = e.target.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".form-clearable")) === null || _b === void 0 ? void 0 : _b.matches(":focus"))) {
+                this._handleClear();
+            }
+        });
         this.addEventListener("sgds-hide", async () => {
             const sgdsInput = await this._input;
             sgdsInput.focus();
@@ -282,6 +299,15 @@ class SgdsComboBox extends SelectElement {
             }
         }
     }
+    // For clearing the value
+    async _handleClear() {
+        var _a;
+        this.value = "";
+        (_a = this.options) === null || _a === void 0 ? void 0 : _a.forEach(o => (o.active = false));
+        const sgdsInput = await this._input;
+        sgdsInput.focus();
+        this.showMenu();
+    }
     /** For form reset  */
     async _mixinResetFormControl() {
         this.value = this.defaultValue;
@@ -320,6 +346,7 @@ class SgdsComboBox extends SelectElement {
      */
     _renderInput() {
         const wantFeedbackStyle = this.hasFeedback;
+        const showButton = (this.isFocused || this.menuIsOpen) && this.value !== "" && this.clearable;
         return html `
       <div
         ${ref(this.myDropdown)}
@@ -365,7 +392,22 @@ class SgdsComboBox extends SelectElement {
             : ""}"
           />
         </div>
-        <sgds-icon name="chevron-down" size="md"></sgds-icon>
+        ${showButton
+            ? html `
+              <sgds-icon
+                id=${`${this._controlId}-combobox-clear-button`}
+                tabindex="0"
+                class="form-clearable"
+                name="xcircle-fill"
+                size="md"
+                @click=${this._handleClear}
+                aria-hidden=${showButton ? "false" : "true"}
+              ></sgds-icon>
+            `
+            : nothing}
+        <sgds-icon name=${this.menuIsOpen ? "chevron-up" : "chevron-down"} size="md"></sgds-icon>
       </div>
     `;
     }
@@ -378,6 +420,7 @@ class SgdsComboBox extends SelectElement {
         ${this._renderLabel()}
         <!-- The input -->
         ${this._renderInput()} ${this._renderFeedback()}
         <ul id=${this.dropdownMenuId} class="dropdown-menu" part="menu" tabindex="-1" ${ref(this.menuRef)}>
           <slot id="default" @slotchange=${this._handleDefaultSlotChange}
             ><div class="empty-menu">No options</div></slot
@@ -411,6 +454,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SgdsComboBox.prototype, "badgeFullWidth", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsComboBox.prototype, "clearable", void 0);
 __decorate([
     property()
 ], SgdsComboBox.prototype, "filterFunction", void 0);
@@ -426,6 +472,9 @@ __decorate([
 __decorate([
     state()
 ], SgdsComboBox.prototype, "emptyMenu", void 0);
+__decorate([
+    state()
+], SgdsComboBox.prototype, "isFocused", void 0);
 __decorate([
     watch("value", { waitUntilFirstUpdate: true })
 ], SgdsComboBox.prototype, "_handleValueChange", null);