npm - @xplor-education/core-stencil-components - Versions diffs - 2.1.0 → 3.0.0 - Mend

@xplor-education/core-stencil-components 2.1.0 → 3.0.0

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 (293) hide show

package/dist/collection/components/xplor-checkbox/xplor-checkbox.js CHANGED Viewed

@@ -1,6 +1,8 @@
 import { h } from "@stencil/core";
+let checkboxIdCounter = 0;
 export class XplorCheckbox {
     constructor() {
+        this.labelId = `xplor-checkbox-label-${++checkboxIdCounter}`;
         this.initialChecked = false;
         this.initialIndeterminate = false;
         this.disabled = false;
@@ -72,7 +74,7 @@ export class XplorCheckbox {
         this.indeterminate = this.initialIndeterminate;
     }
     render() {
-        return (h("div", { key: 'b8e50575c4ab946f2bd1949a552abf98218c3cc0', class: "checkbox-wrapper" }, h("div", { key: '4e1ea41fed9f07346be31da5436eeb4d8961d559', class: this.getCheckboxClass(), onClick: this.handleClick, onMouseEnter: () => this.isHovered = true, onMouseLeave: () => this.isHovered = false, onMouseDown: () => this.isPressed = true, onMouseUp: () => this.isPressed = false, onFocus: () => this.isFocused = true, onBlur: () => this.isFocused = false, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, tabIndex: this.disabled ? -1 : 0, role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : this.checked.toString(), "aria-disabled": this.disabled.toString() }, this.checked && (h("svg", { key: 'de6740ce5950517792bbcacd5019af968d0d75f8', class: "check-icon", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '25b2882bc42793685ce25b4a06ae35a3f33fb195', d: "M13.3334 4L6.00002 11.3333L2.66669 8", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.indeterminate && (h("svg", { key: 'a54be57758d0447a8575a1d141fa592e55e8cbdc', class: "indeterminate-icon", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '12350f7a694cac2f3f18327a2a3626a414167a58', d: "M3.33331 8H12.6666", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })))), this.label && h("span", { key: '8185cd091331cf4aed793dbdffcb674d478d5d3a', class: "label" }, this.label)));
+        return (h("div", { key: '02d3efb24ac53caa742721720ec6d212eb159a55', class: "checkbox-wrapper" }, h("div", { key: '1d1024d0dfb9328d607919dad86bfa25def7bf35', class: this.getCheckboxClass(), onClick: this.handleClick, onMouseEnter: () => this.isHovered = true, onMouseLeave: () => this.isHovered = false, onMouseDown: () => this.isPressed = true, onMouseUp: () => this.isPressed = false, onFocus: () => this.isFocused = true, onBlur: () => this.isFocused = false, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, tabIndex: this.disabled ? -1 : 0, role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : this.checked.toString(), "aria-disabled": this.disabled.toString(), "aria-labelledby": this.label ? this.labelId : undefined }, this.checked && (h("svg", { key: 'e5bd243560546d47bfc77d753df3020fb1abb417', class: "check-icon", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '19da038d854b218177b668da5b8e8c3489dd377d', d: "M13.3334 4L6.00002 11.3333L2.66669 8", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.indeterminate && (h("svg", { key: '069ce072241705fabb0a740271d7b6e6192e35a8', class: "indeterminate-icon", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'afc9851ff1e2ecb32cb7f0037c72844e8ae1a625', d: "M3.33331 8H12.6666", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })))), this.label && h("span", { key: '4fbc5b3bbf78fd53aa0ee5a65e1a3b1b76cbb114', class: "label", id: this.labelId }, this.label)));
     }
     static get is() { return "xplor-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/xplor-checkbox/xplor-checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"xplor-checkbox.js","sourceRoot":"","sources":["../../../src/components/xplor-checkbox/xplor-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;~~AAOtF~~,MAAM,OAAO,aAAa;IAL1B;QAMU,mBAAc,GAAY,KAAK,CAAC;QAChC,yBAAoB,GAAY,KAAK,CAAC;QAEtC,aAAQ,GAAY,KAAK,CAAC;QAC1B,UAAK,GAAY,KAAK,CAAC;QACvB,UAAK,GAAW,EAAE,CAAC;QAElB,YAAO,GAAY,KAAK,CAAC;QACzB,kBAAa,GAAY,KAAK,CAAC;QAC/B,cAAS,GAAY,KAAK,CAAC;QAC3B,cAAS,GAAY,KAAK,CAAC;QAC3B,cAAS,GAAY,KAAK,CAAC;QAiB1B,gBAAW,GAAG,GAAG,EAAE;YAC3B,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;gBACvB,wCAAwC;gBACxC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;gBAC3B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACtB,CAAC;iBAAM,CAAC;gBACN,uCAAuC;gBACvC,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;YAC/B,CAAC;YAED,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;gBACvB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,aAAa,EAAE,IAAI,CAAC,aAAa;aAClC,CAAC,CAAC;QACL,CAAC,CAAC;QAEM,kBAAa,GAAG,CAAC,CAAgB,EAAE,EAAE;YAC3C,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;gBACvC,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;gBACtB,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,CAAC;QACH,CAAC,CAAC;QAEM,gBAAW,GAAG,CAAC,CAAgB,EAAE,EAAE;YACzC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;gBACvC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACzB,CAAC;QACH,CAAC,CAAC;QAEM,qBAAgB,GAAG,GAAG,EAAE;YAC9B,MAAM,OAAO,GAAG,CAAC,UAAU,CAAC,CAAC;YAE7B,IAAI,IAAI,CAAC,OAAO;gBAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YAC1C,IAAI,IAAI,CAAC,aAAa;gBAAE,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;YACtD,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YAC5C,IAAI,IAAI,CAAC,KAAK;gBAAE,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACtC,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAAE,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC5D,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAAE,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC5D,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YAE9D,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC3B,CAAC,CAAC;~~KA+CH~~;~~IAxGC~~,gBAAgB,CAAC,QAAiB;QAChC,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC;IAC1B,CAAC;IAGD,sBAAsB,CAAC,QAAiB;QACtC,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;IAChC,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;QACnC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,oBAAoB,CAAC;IACjD,CAAC;IA+CD,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,kBAAkB;YAC3B,4DACE,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,EAC9B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,EACzC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,GAAG,KAAK,EAC1C,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,EACxC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,GAAG,KAAK,EACvC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,EACpC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,GAAG,KAAK,EACpC,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAChC,IAAI,EAAC,UAAU,kBACD,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,mBACrD,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE;~~gBAEtC~~,IAAI,CAAC,OAAO,IAAI,CACf,4DAAK,KAAK,EAAC,YAAY,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM;oBACrD,6DACE,CAAC,EAAC,sCAAsC,EACxC,MAAM,EAAC,cAAc,kBACR,GAAG,oBACD,OAAO,qBACN,OAAO,GACvB,CACE,CACP;gBACA,IAAI,CAAC,aAAa,IAAI,CACrB,4DAAK,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM;oBAC7D,6DACE,CAAC,EAAC,oBAAoB,EACtB,MAAM,EAAC,cAAc,kBACR,GAAG,oBACD,OAAO,GACtB,CACE,CACP,CACG;YACL,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,OAAO,~~IAAE~~,IAAI,CAAC,KAAK,CAAQ,~~CAClD~~,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, State, Event, EventEmitter, h, Watch } from '@stencil/core';\n\n@Component({\n tag: 'xplor-checkbox',\n styleUrl: 'xplor-checkbox.scss',\n shadow: true,\n})\nexport class XplorCheckbox {\n @Prop() initialChecked: boolean = false;\n @Prop() initialIndeterminate: boolean = false;\n\n @Prop() disabled: boolean = false;\n @Prop() error: boolean = false;\n @Prop() label: string = '';\n\n @State() checked: boolean = false;\n @State() indeterminate: boolean = false;\n @State() isHovered: boolean = false;\n @State() isFocused: boolean = false;\n @State() isPressed: boolean = false;\n\n @Event() checkboxChange: EventEmitter<{ checked: boolean; indeterminate: boolean }>;\n\n @Watch('initialChecked')\n watchCheckedProp(newValue: boolean) {\n this.checked = newValue;\n }\n\n @Watch('initialIndeterminate')\n watchIndeterminateProp(newValue: boolean) {\n this.indeterminate = newValue;\n }\n\n componentWillLoad() {\n this.checked = this.initialChecked;\n this.indeterminate = this.initialIndeterminate;\n } private handleClick = () => {\n if (this.disabled) return;\n\n if (this.indeterminate) {\n // If indeterminate, go to checked state\n this.indeterminate = false;\n this.checked = true;\n } else {\n // Toggle between checked and unchecked\n this.checked = !this.checked;\n }\n\n this.checkboxChange.emit({\n checked: this.checked,\n indeterminate: this.indeterminate\n });\n };\n\n private handleKeyDown = (e: KeyboardEvent) => {\n if (this.disabled) return;\n if (e.key === ' ' \|\| e.key === 'Enter') {\n e.preventDefault();\n this.isPressed = true;\n this.handleClick();\n }\n };\n\n private handleKeyUp = (e: KeyboardEvent) => {\n if (e.key === ' ' \|\| e.key === 'Enter') {\n this.isPressed = false;\n }\n };\n\n private getCheckboxClass = () => {\n const classes = ['checkbox'];\n\n if (this.checked) classes.push('checked');\n if (this.indeterminate) classes.push('indeterminate');\n if (this.disabled) classes.push('disabled');\n if (this.error) classes.push('error');\n if (this.isHovered && !this.disabled) classes.push('hover');\n if (this.isFocused && !this.disabled) classes.push('focus');\n if (this.isPressed && !this.disabled) classes.push('pressed');\n\n return classes.join(' ');\n };\n\n render() {\n return (\n <div class=\"checkbox-wrapper\">\n <div\n class={this.getCheckboxClass()}\n onClick={this.handleClick}\n onMouseEnter={() => this.isHovered = true}\n onMouseLeave={() => this.isHovered = false}\n onMouseDown={() => this.isPressed = true}\n onMouseUp={() => this.isPressed = false}\n onFocus={() => this.isFocused = true}\n onBlur={() => this.isFocused = false}\n onKeyDown={this.handleKeyDown}\n onKeyUp={this.handleKeyUp}\n tabIndex={this.disabled ? -1 : 0}\n role=\"checkbox\"\n aria-checked={this.indeterminate ? 'mixed' : this.checked.toString()}\n aria-disabled={this.disabled.toString()}\n >\n {this.checked && (\n <svg class=\"check-icon\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M13.3334 4L6.00002 11.3333L2.66669 8\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n )}\n {this.indeterminate && (\n <svg class=\"indeterminate-icon\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M3.33331 8H12.6666\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n </svg>\n )}\n </div>\n {this.label && <span class=\"label\">{this.label}</span>}\n </div>\n );\n }\n}"]}
1	+ {"version":3,"file":"xplor-checkbox.js","sourceRoot":"","sources":["../../../src/components/xplor-checkbox/xplor-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, EventEmitter, h, Watch } from '@stencil/core';\n\nlet checkboxIdCounter = 0;\n\n@Component({\n tag: 'xplor-checkbox',\n styleUrl: 'xplor-checkbox.scss',\n shadow: true,\n})\nexport class XplorCheckbox {\n private labelId = `xplor-checkbox-label-${++checkboxIdCounter}`;\n @Prop() initialChecked: boolean = false;\n @Prop() initialIndeterminate: boolean = false;\n\n @Prop() disabled: boolean = false;\n @Prop() error: boolean = false;\n @Prop() label: string = '';\n\n @State() checked: boolean = false;\n @State() indeterminate: boolean = false;\n @State() isHovered: boolean = false;\n @State() isFocused: boolean = false;\n @State() isPressed: boolean = false;\n\n @Event() checkboxChange: EventEmitter<{ checked: boolean; indeterminate: boolean }>;\n\n @Watch('initialChecked')\n watchCheckedProp(newValue: boolean) {\n this.checked = newValue;\n }\n\n @Watch('initialIndeterminate')\n watchIndeterminateProp(newValue: boolean) {\n this.indeterminate = newValue;\n }\n\n componentWillLoad() {\n this.checked = this.initialChecked;\n this.indeterminate = this.initialIndeterminate;\n } private handleClick = () => {\n if (this.disabled) return;\n\n if (this.indeterminate) {\n // If indeterminate, go to checked state\n this.indeterminate = false;\n this.checked = true;\n } else {\n // Toggle between checked and unchecked\n this.checked = !this.checked;\n }\n\n this.checkboxChange.emit({\n checked: this.checked,\n indeterminate: this.indeterminate\n });\n };\n\n private handleKeyDown = (e: KeyboardEvent) => {\n if (this.disabled) return;\n if (e.key === ' ' \|\| e.key === 'Enter') {\n e.preventDefault();\n this.isPressed = true;\n this.handleClick();\n }\n };\n\n private handleKeyUp = (e: KeyboardEvent) => {\n if (e.key === ' ' \|\| e.key === 'Enter') {\n this.isPressed = false;\n }\n };\n\n private getCheckboxClass = () => {\n const classes = ['checkbox'];\n\n if (this.checked) classes.push('checked');\n if (this.indeterminate) classes.push('indeterminate');\n if (this.disabled) classes.push('disabled');\n if (this.error) classes.push('error');\n if (this.isHovered && !this.disabled) classes.push('hover');\n if (this.isFocused && !this.disabled) classes.push('focus');\n if (this.isPressed && !this.disabled) classes.push('pressed');\n\n return classes.join(' ');\n };\n\n render() {\n return (\n <div class=\"checkbox-wrapper\">\n <div\n class={this.getCheckboxClass()}\n onClick={this.handleClick}\n onMouseEnter={() => this.isHovered = true}\n onMouseLeave={() => this.isHovered = false}\n onMouseDown={() => this.isPressed = true}\n onMouseUp={() => this.isPressed = false}\n onFocus={() => this.isFocused = true}\n onBlur={() => this.isFocused = false}\n onKeyDown={this.handleKeyDown}\n onKeyUp={this.handleKeyUp}\n tabIndex={this.disabled ? -1 : 0}\n role=\"checkbox\"\n aria-checked={this.indeterminate ? 'mixed' : this.checked.toString()}\n aria-disabled={this.disabled.toString()}\n aria-labelledby={this.label ? this.labelId : undefined}\n >\n {this.checked && (\n <svg class=\"check-icon\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M13.3334 4L6.00002 11.3333L2.66669 8\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n )}\n {this.indeterminate && (\n <svg class=\"indeterminate-icon\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M3.33331 8H12.6666\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n </svg>\n )}\n </div>\n {this.label && <span class=\"label\" id={this.labelId}>{this.label}</span>}\n </div>\n );\n }\n}"]}

package/dist/collection/components/xplor-combobox/xplor-combobox.js CHANGED Viewed

@@ -207,23 +207,32 @@ export class XplorCombobox {
     render() {
         const hasValue = this.multiple ? this.selectedItems.length > 0 : this.value !== null && this.searchQuery !== '';
         const showCreateOption = this.canCreateNew();
-        return (h(Host, { key: '64bfbc829a52c048f8270ab328f73607bd94ebc1' }, h("div", { key: '25d9cf959f68c555befdfd5d2351cbb1964b1e46', class: {
+        const listboxId = 'combobox-listbox';
+        const labelId = 'combobox-label';
+        const activeDescendantId = this.highlightedIndex >= 0 ? `combobox-option-${this.highlightedIndex}` : undefined;
+        return (h(Host, { key: '5c3fb39153fe1a83d72b4ad3aa60d4602014916c' }, h("div", { key: 'ed9f80ab76d19c842e9da6a016040fdf68395332', class: {
                 'combobox': true,
                 'combobox--disabled': this.disabled,
                 'combobox--readonly': this.readonly,
                 'combobox--open': this.isOpen,
-            } }, this.label && (h("label", { key: '5d6afc2c5c9b3c84abca67469b87c1acb88b9517', class: "combobox__label" }, this.label)), h("div", { key: '5d7666d518792cc71c7062453f308771499056f9', class: "combobox__input-wrapper" }, this.multiple && this.selectedItems.length > 0 && (h("div", { key: 'c16c2887b644a9c47034b70a949a7d4dcc403233', class: "combobox__chips" }, this.selectedItems.map(value => (h("div", { class: "combobox__chip" }, h("span", { class: "combobox__chip-label" }, this.getSelectedItemLabel(value)), h("button", { type: "button", class: "combobox__chip-remove", onClick: () => this.removeItem(value), disabled: this.disabled || this.readonly }, "\u00D7")))))), h("input", { key: '28721137cc8339ac1c0881319dc4718ed2c04cf2', ref: (el) => (this.inputEl = el), type: "text", class: "combobox__input", placeholder: this.placeholder, value: this.searchQuery, onFocus: this.handleInputFocus, onInput: this.handleInputChange, onKeyDown: this.handleInputKeyDown, disabled: this.disabled, readonly: this.readonly, autocomplete: "off" }), h("div", { key: 'ba914008002039d274efd11f9790e9d13613a048', class: "combobox__actions" }, this.clearable && hasValue && !this.disabled && !this.readonly && (h("button", { key: '3b442197e1a6e0b94157dfb6f3a5d5e5529419dc', type: "button", class: "combobox__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u00D7")), h("span", { key: 'cdafaeb0392798f291892342d50a0cec7234b7a1', class: "combobox__icon" }, "\u25BC"))), this.isOpen && (this.filteredItems.length > 0 || showCreateOption) && (h("div", { key: 'd50da0e18e34a079345c13498efbf3c61fb6be28', class: "combobox__dropdown", ref: (el) => (this.dropdownEl = el) }, this.filteredItems.map((item, index) => (h("div", { key: item.value, "data-index": index, class: {
-                'combobox__item': true,
-                'combobox__item--highlighted': index === this.highlightedIndex,
-                'combobox__item--selected': this.multiple
-                    ? this.selectedItems.includes(item.value)
-                    : this.value === item.value,
-                'combobox__item--disabled': item.disabled,
-            }, onClick: () => this.selectItem(item) }, item.label))), showCreateOption && (h("div", { key: '9801a00634c1b6a1ed4bf1f97dc5c5321dc8c189', "data-index": this.filteredItems.length, class: {
+            } }, this.label && (h("label", { key: 'a5837bdc2fe30046a56a659a942c82c6612e5eed', class: "combobox__label", id: labelId }, this.label)), h("div", { key: '84022a8390a2024ef29d7dbdb5bd3b34c1da2305', class: "combobox__input-wrapper" }, this.multiple && this.selectedItems.length > 0 && (h("div", { key: '7df2befc1d6104e8b5472c800fe30eda0ecac550', class: "combobox__chips" }, this.selectedItems.map(value => {
+            const chipLabel = this.getSelectedItemLabel(value);
+            return (h("div", { class: "combobox__chip" }, h("span", { class: "combobox__chip-label" }, chipLabel), h("button", { type: "button", class: "combobox__chip-remove", onClick: () => this.removeItem(value), disabled: this.disabled || this.readonly, "aria-label": `Remove ${chipLabel}` }, "\u00D7")));
+        }))), h("input", { key: '4b01ffb37bfe750c24081ec839fcd6b70f87bde0', ref: (el) => (this.inputEl = el), type: "text", class: "combobox__input", placeholder: this.placeholder, value: this.searchQuery, onFocus: this.handleInputFocus, onInput: this.handleInputChange, onKeyDown: this.handleInputKeyDown, disabled: this.disabled, readonly: this.readonly, autocomplete: "off", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-controls": this.isOpen ? listboxId : undefined, "aria-activedescendant": activeDescendantId, "aria-labelledby": this.label ? labelId : undefined, "aria-label": !this.label ? (this.ariaLabel || this.placeholder) : undefined, "aria-autocomplete": "list" }), h("div", { key: 'f1fa0b56edeb6c5e25eebd34a9d143a0ecca1173', class: "combobox__actions" }, this.clearable && hasValue && !this.disabled && !this.readonly && (h("button", { key: '5179310582b9aef4739985dbeefd35bda1bb86bb', type: "button", class: "combobox__clear", onClick: this.handleClear, "aria-label": "Clear selection" }, "\u00D7")), h("span", { key: '93c5431addfcaf88e51d38907304a4e289c3183d', class: "combobox__icon", "aria-hidden": "true" }, "\u25BC"))), this.isOpen && (this.filteredItems.length > 0 || showCreateOption) && (h("div", { key: '9fba0e29de90f8bdcdd4861fbb0fb06a20fa980b', class: "combobox__dropdown", ref: (el) => (this.dropdownEl = el), role: "listbox", id: listboxId, "aria-label": this.label || this.ariaLabel || 'Options' }, this.filteredItems.map((item, index) => {
+            const isSelected = this.multiple
+                ? this.selectedItems.includes(item.value)
+                : this.value === item.value;
+            return (h("div", { key: item.value, id: `combobox-option-${index}`, "data-index": index, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": item.disabled ? 'true' : undefined, class: {
+                    'combobox__item': true,
+                    'combobox__item--highlighted': index === this.highlightedIndex,
+                    'combobox__item--selected': isSelected,
+                    'combobox__item--disabled': item.disabled,
+                }, onClick: () => this.selectItem(item) }, item.label));
+        }), showCreateOption && (h("div", { key: '880bc30bc32c87dfb9ecf9b706162299e80fd1c5', id: `combobox-option-${this.filteredItems.length}`, "data-index": this.filteredItems.length, role: "option", "aria-selected": "false", class: {
                 'combobox__item': true,
                 'combobox__item--create': true,
                 'combobox__item--highlighted': this.highlightedIndex === this.filteredItems.length,
-            }, onClick: () => this.createNewItem() }, h("span", { key: '4d563ce7576c3caa2b343bfe18dbdf2c29f0ceb2', class: "combobox__create-label" }, this.createMessage, ":"), ' ', h("strong", { key: 'e792de9d6e8586757271e0838b9035da7c3f47cb' }, "\"", this.searchQuery, "\""))))), this.isOpen && this.filteredItems.length === 0 && !showCreateOption && (h("div", { key: 'f163e417e711ec833320a8f6d687a3202741b1fe', class: "combobox__dropdown" }, h("div", { key: '30831097ffecac58be272ff9fe6931e2d7bd4a34', class: "combobox__no-results" }, "No results found"))))));
+            }, onClick: () => this.createNewItem() }, h("span", { key: 'd0ff5841add7495a79a1e9453b87706971cf8907', class: "combobox__create-label" }, this.createMessage, ":"), ' ', h("strong", { key: 'e1b1e94a5afce2ab3f5a714a7c593e59d9d22ff0' }, "\"", this.searchQuery, "\""))))), this.isOpen && this.filteredItems.length === 0 && !showCreateOption && (h("div", { key: '0a95426511036f918cd42999cd1543fc26efbff2', class: "combobox__dropdown", role: "listbox", id: listboxId }, h("div", { key: '551dc3ad968c049c5bbf2a9da71d45e203e15df7', class: "combobox__no-results", role: "option", "aria-disabled": "true" }, "No results found"))))));
     }
     static get is() { return "xplor-combobox"; }
     static get encapsulation() { return "scoped"; }
@@ -323,6 +332,25 @@ export class XplorCombobox {
                 "setter": false,
                 "reflect": false
             },
+            "ariaLabel": {
+                "type": "string",
+                "attribute": "aria-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the input when no visible label is provided"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "disabled": {
                 "type": "boolean",
                 "attribute": "disabled",

package/dist/collection/components/xplor-combobox/xplor-combobox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"xplor-combobox.js","sourceRoot":"","sources":["../../../src/components/xplor-combobox/xplor-combobox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Event, EventEmitter, Element, Listen } from '@stencil/core';\n\nexport interface ComboboxItem {\n label: string;\n value: any;\n disabled?: boolean;\n [key: string]: any;\n}\n\n@Component({\n tag: 'xplor-combobox',\n styleUrl: 'xplor-combobox.scss',\n scoped: true,\n})\nexport class XplorCombobox {\n @Element() el: HTMLElement;\n\n /*\n Array of items to display in the dropdown\n /\n @Prop() items: ComboboxItem[] = [];\n\n /\n Selected value(s)\n /\n @Prop({ mutable: true }) value: any = null;\n\n /\n Placeholder text\n /\n @Prop() placeholder: string = 'Type to search or add...';\n\n /\n Label for the input\n /\n @Prop() label: string;\n\n /\n Disable the combobox\n /\n @Prop() disabled: boolean = false;\n\n /\n Make the combobox readonly\n /\n @Prop() readonly: boolean = false;\n\n /\n Clear button\n /\n @Prop() clearable: boolean = false;\n\n /\n Allow multiple selection\n /\n @Prop() multiple: boolean = false;\n\n /\n Allow creating new items\n /\n @Prop() allowCustom: boolean = true;\n\n /\n Message to display when creating new item\n */\n @Prop() createMessage: string = 'Create';\n\n @State() isOpen: boolean = false;\n @State() searchQuery: string = '';\n @State() filteredItems: ComboboxItem[] = [];\n @State() selectedItems: any[] = [];\n @State() highlightedIndex: number = -1;\n @State() customItems: ComboboxItem[] = [];\n\n @Event() xplorChange: EventEmitter<any>;\n @Event() xplorSelect: EventEmitter<ComboboxItem>;\n @Event() xplorCreate: EventEmitter<string>;\n @Event() xplorClear: EventEmitter<void>;\n @Event() xplorSearch: EventEmitter<string>;\n\n private inputEl: HTMLInputElement;\n private dropdownEl: HTMLDivElement;\n\n componentWillLoad() {\n this.filterItems();\n if (this.value !== null) {\n if (this.multiple && Array.isArray(this.value)) {\n this.selectedItems = this.value;\n } else if (!this.multiple) {\n const allItems = [...this.items, ...this.customItems];\n const selectedItem = allItems.find(item => item.value === this.value);\n if (selectedItem) {\n this.searchQuery = selectedItem.label;\n }\n }\n }\n }\n\n @Listen('click', { target: 'document' })\n handleDocumentClick(event: MouseEvent) {\n const target = event.target as Node;\n if (!this.el.contains(target)) {\n this.isOpen = false;\n }\n }\n\n private filterItems() {\n const query = this.searchQuery.toLowerCase();\n const allItems = [...this.items, ...this.customItems];\n\n if (query === '') {\n this.filteredItems = allItems;\n return;\n }\n\n this.filteredItems = allItems.filter(item =>\n item.label.toLowerCase().includes(query)\n );\n }\n\n private canCreateNew(): boolean {\n if (!this.allowCustom \|\| this.searchQuery.trim() === '') {\n return false;\n }\n\n const allItems = [...this.items, ...this.customItems];\n const exactMatch = allItems.some(\n item => item.label.toLowerCase() === this.searchQuery.toLowerCase()\n );\n\n return !exactMatch;\n }\n\n private handleInputFocus = () => {\n if (this.disabled \|\| this.readonly) return;\n this.isOpen = true;\n this.highlightedIndex = -1;\n };\n\n private handleInputChange = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.searchQuery = input.value;\n this.filterItems();\n this.isOpen = true;\n this.highlightedIndex = -1;\n this.xplorSearch.emit(this.searchQuery);\n\n if (!this.multiple && this.searchQuery === '') {\n this.value = null;\n this.xplorChange.emit(null);\n }\n };\n\n private handleInputKeyDown = (event: KeyboardEvent) => {\n if (this.disabled \|\| this.readonly) return;\n\n const totalItems = this.filteredItems.length + (this.canCreateNew() ? 1 : 0);\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n this.isOpen = true;\n this.highlightedIndex = Math.min(this.highlightedIndex + 1, totalItems - 1);\n this.scrollToHighlighted();\n break;\n\n case 'ArrowUp':\n event.preventDefault();\n this.highlightedIndex = Math.max(this.highlightedIndex - 1, -1);\n this.scrollToHighlighted();\n break;\n\n case 'Enter':\n event.preventDefault();\n if (this.highlightedIndex >= 0) {\n if (this.highlightedIndex < this.filteredItems.length) {\n this.selectItem(this.filteredItems[this.highlightedIndex]);\n } else if (this.canCreateNew()) {\n this.createNewItem();\n }\n } else if (this.canCreateNew() && this.searchQuery.trim() !== '') {\n this.createNewItem();\n }\n break;\n\n case 'Escape':\n event.preventDefault();\n this.isOpen = false;\n this.inputEl?.blur();\n break;\n\n case 'Backspace':\n if (this.multiple && this.searchQuery === '' && this.selectedItems.length > 0) {\n event.preventDefault();\n this.removeItem(this.selectedItems[this.selectedItems.length - 1]);\n }\n break;\n }\n };\n\n private scrollToHighlighted() {\n if (this.dropdownEl && this.highlightedIndex >= 0) {\n const highlightedEl = this.dropdownEl.querySelector(`[data-index=\"${this.highlightedIndex}\"]`) as HTMLElement;\n if (highlightedEl) {\n highlightedEl.scrollIntoView({ block: 'nearest' });\n }\n }\n }\n\n private selectItem(item: ComboboxItem) {\n if (item.disabled) return;\n\n if (this.multiple) {\n if (!this.selectedItems.includes(item.value)) {\n this.selectedItems = [...this.selectedItems, item.value];\n this.value = this.selectedItems;\n this.xplorChange.emit(this.value);\n }\n this.searchQuery = '';\n this.filterItems();\n } else {\n this.value = item.value;\n this.searchQuery = item.label;\n this.isOpen = false;\n this.xplorChange.emit(this.value);\n }\n\n this.xplorSelect.emit(item);\n this.inputEl?.focus();\n }\n\n private createNewItem() {\n const newValue = this.searchQuery.trim();\n const newItem: ComboboxItem = {\n label: newValue,\n value: newValue,\n };\n\n this.customItems = [...this.customItems, newItem];\n this.selectItem(newItem);\n this.xplorCreate.emit(newValue);\n }\n\n private removeItem(value: any) {\n this.selectedItems = this.selectedItems.filter(v => v !== value);\n this.value = this.selectedItems;\n this.xplorChange.emit(this.value);\n }\n\n private handleClear = () => {\n this.value = this.multiple ? [] : null;\n this.selectedItems = [];\n this.searchQuery = '';\n this.filterItems();\n this.xplorChange.emit(this.value);\n this.xplorClear.emit();\n this.inputEl?.focus();\n };\n\n private getSelectedItemLabel(value: any): string {\n const allItems = [...this.items, ...this.customItems];\n const item = allItems.find(i => i.value === value);\n return item ? item.label : value;\n }\n\n render() {\n const hasValue = this.multiple ? this.selectedItems.length > 0 : this.value !== null && this.searchQuery !== '';\n const showCreateOption = this.canCreateNew();\n\n return (\n <Host>\n <div\n class={{\n 'combobox': true,\n 'combobox--disabled': this.disabled,\n 'combobox--readonly': this.readonly,\n 'combobox--open': this.isOpen,\n }}\n >\n {this.label && (\n <label class=\"combobox__label\">{this.label}</label>\n )}\n\n <div class=\"combobox__input-wrapper\">\n {this.multiple && this.selectedItems.length > 0 && (\n <div class=\"combobox__chips\">\n {this.selectedItems.map(value => (\n <div class=\"combobox__chip\">\n <span class=\"combobox__chip-label\">\n {this.getSelectedItemLabel(value)}\n </span>\n <button\n type=\"button\"\n class=\"combobox__chip-remove\"\n onClick={() => this.removeItem(value)}\n disabled={this.disabled \|\| this.readonly}\n >\n ×\n </button>\n </div>\n ))}\n </div>\n )}\n\n <input\n ref={(el) => (this.inputEl = el)}\n type=\"text\"\n class=\"combobox__input\"\n placeholder={this.placeholder}\n value={this.searchQuery}\n onFocus={this.handleInputFocus}\n onInput={this.handleInputChange}\n onKeyDown={this.handleInputKeyDown}\n disabled={this.disabled}\n readonly={this.readonly}\n autocomplete=\"off\"\n />\n\n <div class=\"combobox__actions\">\n {this.clearable && hasValue && !this.disabled && !this.readonly && (\n <button\n type=\"button\"\n class=\"combobox__clear\"\n onClick={this.handleClear}\n aria-label=\"Clear\"\n >\n ×\n </button>\n )}\n <span class=\"combobox__icon\">▼</span>\n </div>\n </div>\n\n {this.isOpen && (this.filteredItems.length > 0 \|\| showCreateOption) && (\n <div class=\"combobox__dropdown\" ref={(el) => (this.dropdownEl = el)}>\n {this.filteredItems.map((item, index) => (\n <div\n key={item.value}\n data-index={index}\n class={{\n 'combobox__item': true,\n 'combobox__item--highlighted': index === this.highlightedIndex,\n 'combobox__item--selected': this.multiple\n ? this.selectedItems.includes(item.value)\n : this.value === item.value,\n 'combobox__item--disabled': item.disabled,\n }}\n onClick={() => this.selectItem(item)}\n >\n {item.label}\n </div>\n ))}\n\n {showCreateOption && (\n <div\n data-index={this.filteredItems.length}\n class={{\n 'combobox__item': true,\n 'combobox__item--create': true,\n 'combobox__item--highlighted': this.highlightedIndex === this.filteredItems.length,\n }}\n onClick={() => this.createNewItem()}\n >\n <span class=\"combobox__create-label\">{this.createMessage}:</span>{' '}\n <strong>\"{this.searchQuery}\"</strong>\n </div>\n )}\n </div>\n )}\n\n {this.isOpen && this.filteredItems.length === 0 && !showCreateOption && (\n <div class=\"combobox__dropdown\">\n <div class=\"combobox__no-results\">No results found</div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"xplor-combobox.js","sourceRoot":"","sources":["../../../src/components/xplor-combobox/xplor-combobox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Event, EventEmitter, Element, Listen } from '@stencil/core';\n\nexport interface ComboboxItem {\n label: string;\n value: any;\n disabled?: boolean;\n [key: string]: any;\n}\n\n@Component({\n tag: 'xplor-combobox',\n styleUrl: 'xplor-combobox.scss',\n scoped: true,\n})\nexport class XplorCombobox {\n @Element() el: HTMLElement;\n\n /*\n Array of items to display in the dropdown\n /\n @Prop() items: ComboboxItem[] = [];\n\n /\n Selected value(s)\n /\n @Prop({ mutable: true }) value: any = null;\n\n /\n Placeholder text\n /\n @Prop() placeholder: string = 'Type to search or add...';\n\n /\n Label for the input\n /\n @Prop() label: string;\n\n /\n Accessible label for the input when no visible label is provided\n /\n @Prop() ariaLabel: string;\n\n /\n Disable the combobox\n /\n @Prop() disabled: boolean = false;\n\n /\n Make the combobox readonly\n /\n @Prop() readonly: boolean = false;\n\n /\n Clear button\n /\n @Prop() clearable: boolean = false;\n\n /\n Allow multiple selection\n /\n @Prop() multiple: boolean = false;\n\n /\n Allow creating new items\n /\n @Prop() allowCustom: boolean = true;\n\n /\n Message to display when creating new item\n */\n @Prop() createMessage: string = 'Create';\n\n @State() isOpen: boolean = false;\n @State() searchQuery: string = '';\n @State() filteredItems: ComboboxItem[] = [];\n @State() selectedItems: any[] = [];\n @State() highlightedIndex: number = -1;\n @State() customItems: ComboboxItem[] = [];\n\n @Event() xplorChange: EventEmitter<any>;\n @Event() xplorSelect: EventEmitter<ComboboxItem>;\n @Event() xplorCreate: EventEmitter<string>;\n @Event() xplorClear: EventEmitter<void>;\n @Event() xplorSearch: EventEmitter<string>;\n\n private inputEl: HTMLInputElement;\n private dropdownEl: HTMLDivElement;\n\n componentWillLoad() {\n this.filterItems();\n if (this.value !== null) {\n if (this.multiple && Array.isArray(this.value)) {\n this.selectedItems = this.value;\n } else if (!this.multiple) {\n const allItems = [...this.items, ...this.customItems];\n const selectedItem = allItems.find(item => item.value === this.value);\n if (selectedItem) {\n this.searchQuery = selectedItem.label;\n }\n }\n }\n }\n\n @Listen('click', { target: 'document' })\n handleDocumentClick(event: MouseEvent) {\n const target = event.target as Node;\n if (!this.el.contains(target)) {\n this.isOpen = false;\n }\n }\n\n private filterItems() {\n const query = this.searchQuery.toLowerCase();\n const allItems = [...this.items, ...this.customItems];\n\n if (query === '') {\n this.filteredItems = allItems;\n return;\n }\n\n this.filteredItems = allItems.filter(item =>\n item.label.toLowerCase().includes(query)\n );\n }\n\n private canCreateNew(): boolean {\n if (!this.allowCustom \|\| this.searchQuery.trim() === '') {\n return false;\n }\n\n const allItems = [...this.items, ...this.customItems];\n const exactMatch = allItems.some(\n item => item.label.toLowerCase() === this.searchQuery.toLowerCase()\n );\n\n return !exactMatch;\n }\n\n private handleInputFocus = () => {\n if (this.disabled \|\| this.readonly) return;\n this.isOpen = true;\n this.highlightedIndex = -1;\n };\n\n private handleInputChange = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.searchQuery = input.value;\n this.filterItems();\n this.isOpen = true;\n this.highlightedIndex = -1;\n this.xplorSearch.emit(this.searchQuery);\n\n if (!this.multiple && this.searchQuery === '') {\n this.value = null;\n this.xplorChange.emit(null);\n }\n };\n\n private handleInputKeyDown = (event: KeyboardEvent) => {\n if (this.disabled \|\| this.readonly) return;\n\n const totalItems = this.filteredItems.length + (this.canCreateNew() ? 1 : 0);\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n this.isOpen = true;\n this.highlightedIndex = Math.min(this.highlightedIndex + 1, totalItems - 1);\n this.scrollToHighlighted();\n break;\n\n case 'ArrowUp':\n event.preventDefault();\n this.highlightedIndex = Math.max(this.highlightedIndex - 1, -1);\n this.scrollToHighlighted();\n break;\n\n case 'Enter':\n event.preventDefault();\n if (this.highlightedIndex >= 0) {\n if (this.highlightedIndex < this.filteredItems.length) {\n this.selectItem(this.filteredItems[this.highlightedIndex]);\n } else if (this.canCreateNew()) {\n this.createNewItem();\n }\n } else if (this.canCreateNew() && this.searchQuery.trim() !== '') {\n this.createNewItem();\n }\n break;\n\n case 'Escape':\n event.preventDefault();\n this.isOpen = false;\n this.inputEl?.blur();\n break;\n\n case 'Backspace':\n if (this.multiple && this.searchQuery === '' && this.selectedItems.length > 0) {\n event.preventDefault();\n this.removeItem(this.selectedItems[this.selectedItems.length - 1]);\n }\n break;\n }\n };\n\n private scrollToHighlighted() {\n if (this.dropdownEl && this.highlightedIndex >= 0) {\n const highlightedEl = this.dropdownEl.querySelector(`[data-index=\"${this.highlightedIndex}\"]`) as HTMLElement;\n if (highlightedEl) {\n highlightedEl.scrollIntoView({ block: 'nearest' });\n }\n }\n }\n\n private selectItem(item: ComboboxItem) {\n if (item.disabled) return;\n\n if (this.multiple) {\n if (!this.selectedItems.includes(item.value)) {\n this.selectedItems = [...this.selectedItems, item.value];\n this.value = this.selectedItems;\n this.xplorChange.emit(this.value);\n }\n this.searchQuery = '';\n this.filterItems();\n } else {\n this.value = item.value;\n this.searchQuery = item.label;\n this.isOpen = false;\n this.xplorChange.emit(this.value);\n }\n\n this.xplorSelect.emit(item);\n this.inputEl?.focus();\n }\n\n private createNewItem() {\n const newValue = this.searchQuery.trim();\n const newItem: ComboboxItem = {\n label: newValue,\n value: newValue,\n };\n\n this.customItems = [...this.customItems, newItem];\n this.selectItem(newItem);\n this.xplorCreate.emit(newValue);\n }\n\n private removeItem(value: any) {\n this.selectedItems = this.selectedItems.filter(v => v !== value);\n this.value = this.selectedItems;\n this.xplorChange.emit(this.value);\n }\n\n private handleClear = () => {\n this.value = this.multiple ? [] : null;\n this.selectedItems = [];\n this.searchQuery = '';\n this.filterItems();\n this.xplorChange.emit(this.value);\n this.xplorClear.emit();\n this.inputEl?.focus();\n };\n\n private getSelectedItemLabel(value: any): string {\n const allItems = [...this.items, ...this.customItems];\n const item = allItems.find(i => i.value === value);\n return item ? item.label : value;\n }\n\n render() {\n const hasValue = this.multiple ? this.selectedItems.length > 0 : this.value !== null && this.searchQuery !== '';\n const showCreateOption = this.canCreateNew();\n const listboxId = 'combobox-listbox';\n const labelId = 'combobox-label';\n const activeDescendantId = this.highlightedIndex >= 0 ? `combobox-option-${this.highlightedIndex}` : undefined;\n\n return (\n <Host>\n <div\n class={{\n 'combobox': true,\n 'combobox--disabled': this.disabled,\n 'combobox--readonly': this.readonly,\n 'combobox--open': this.isOpen,\n }}\n >\n {this.label && (\n <label class=\"combobox__label\" id={labelId}>{this.label}</label>\n )}\n\n <div class=\"combobox__input-wrapper\">\n {this.multiple && this.selectedItems.length > 0 && (\n <div class=\"combobox__chips\">\n {this.selectedItems.map(value => {\n const chipLabel = this.getSelectedItemLabel(value);\n return (\n <div class=\"combobox__chip\">\n <span class=\"combobox__chip-label\">\n {chipLabel}\n </span>\n <button\n type=\"button\"\n class=\"combobox__chip-remove\"\n onClick={() => this.removeItem(value)}\n disabled={this.disabled \|\| this.readonly}\n aria-label={`Remove ${chipLabel}`}\n >\n ×\n </button>\n </div>\n );\n })}\n </div>\n )}\n\n <input\n ref={(el) => (this.inputEl = el)}\n type=\"text\"\n class=\"combobox__input\"\n placeholder={this.placeholder}\n value={this.searchQuery}\n onFocus={this.handleInputFocus}\n onInput={this.handleInputChange}\n onKeyDown={this.handleInputKeyDown}\n disabled={this.disabled}\n readonly={this.readonly}\n autocomplete=\"off\"\n role=\"combobox\"\n aria-expanded={this.isOpen ? 'true' : 'false'}\n aria-haspopup=\"listbox\"\n aria-controls={this.isOpen ? listboxId : undefined}\n aria-activedescendant={activeDescendantId}\n aria-labelledby={this.label ? labelId : undefined}\n aria-label={!this.label ? (this.ariaLabel \|\| this.placeholder) : undefined}\n aria-autocomplete=\"list\"\n />\n\n <div class=\"combobox__actions\">\n {this.clearable && hasValue && !this.disabled && !this.readonly && (\n <button\n type=\"button\"\n class=\"combobox__clear\"\n onClick={this.handleClear}\n aria-label=\"Clear selection\"\n >\n ×\n </button>\n )}\n <span class=\"combobox__icon\" aria-hidden=\"true\">▼</span>\n </div>\n </div>\n\n {this.isOpen && (this.filteredItems.length > 0 \|\| showCreateOption) && (\n <div\n class=\"combobox__dropdown\"\n ref={(el) => (this.dropdownEl = el)}\n role=\"listbox\"\n id={listboxId}\n aria-label={this.label \|\| this.ariaLabel \|\| 'Options'}\n >\n {this.filteredItems.map((item, index) => {\n const isSelected = this.multiple\n ? this.selectedItems.includes(item.value)\n : this.value === item.value;\n return (\n <div\n key={item.value}\n id={`combobox-option-${index}`}\n data-index={index}\n role=\"option\"\n aria-selected={isSelected ? 'true' : 'false'}\n aria-disabled={item.disabled ? 'true' : undefined}\n class={{\n 'combobox__item': true,\n 'combobox__item--highlighted': index === this.highlightedIndex,\n 'combobox__item--selected': isSelected,\n 'combobox__item--disabled': item.disabled,\n }}\n onClick={() => this.selectItem(item)}\n >\n {item.label}\n </div>\n );\n })}\n\n {showCreateOption && (\n <div\n id={`combobox-option-${this.filteredItems.length}`}\n data-index={this.filteredItems.length}\n role=\"option\"\n aria-selected=\"false\"\n class={{\n 'combobox__item': true,\n 'combobox__item--create': true,\n 'combobox__item--highlighted': this.highlightedIndex === this.filteredItems.length,\n }}\n onClick={() => this.createNewItem()}\n >\n <span class=\"combobox__create-label\">{this.createMessage}:</span>{' '}\n <strong>\"{this.searchQuery}\"</strong>\n </div>\n )}\n </div>\n )}\n\n {this.isOpen && this.filteredItems.length === 0 && !showCreateOption && (\n <div class=\"combobox__dropdown\" role=\"listbox\" id={listboxId}>\n <div class=\"combobox__no-results\" role=\"option\" aria-disabled=\"true\">No results found</div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/xplor-datatable/xplor-datatable.js CHANGED Viewed

@@ -169,18 +169,24 @@ export class XplorDatatable {
                 'horizontal-lines': this.horizontalLines,
                 'striped': this.striped,
                 'is-empty': this.items.length === 0,
-            }, style: hasHeight ? { height: tableHeight } : {} }, h("table", { key: '5f46224fe7ecc2fd3781e11d592fee5c8d80e9f2', class: { 'hover': this.hover } }, h("thead", { key: 'd20432aa1d6551dd324a60ed594cd5ebc2c80198' }, h("tr", { key: '62cc50e679f8345caba6f92a7ae117b68728425d' }, this.canSelect && (h("th", { key: 'dfffb0bf421458b192db6eae3538da8a752f5356', class: "select-column" }, h("label", { key: '17cdb037cee9b2d0cce729e0761f03b4bca14354', class: "checkbox-label" }, h("input", { key: 'ecba2511bab5cd9a25a01eb1e7038e1400492392', type: "checkbox", checked: this.allSelected, indeterminate: this.internalSelected.size > 0 &&
-                this.internalSelected.size < this.items.length, onChange: this.handleSelectAll })))), this.headers.map(header => (h("th", { class: {
+            }, style: hasHeight ? { height: tableHeight } : {} }, h("table", { key: '5f46224fe7ecc2fd3781e11d592fee5c8d80e9f2', class: { 'hover': this.hover } }, h("thead", { key: 'd20432aa1d6551dd324a60ed594cd5ebc2c80198' }, h("tr", { key: '62cc50e679f8345caba6f92a7ae117b68728425d' }, this.canSelect && (h("th", { key: 'dfffb0bf421458b192db6eae3538da8a752f5356', class: "select-column" }, h("label", { key: '17cdb037cee9b2d0cce729e0761f03b4bca14354', class: "checkbox-label" }, h("input", { key: '668128d3f8238449b965df2825e164a2e12a4626', type: "checkbox", checked: this.allSelected, indeterminate: this.internalSelected.size > 0 &&
+                this.internalSelected.size < this.items.length, onChange: this.handleSelectAll, "aria-label": "Select all rows" })))), this.headers.map(header => (h("th", { class: {
                 sortable: header.sortable !== false,
                 sorted: this.sortBy === header.value,
                 fixed: header.fixed,
                 [`align-${header.align || 'left'}`]: true,
-            }, style: header.width ? { width: typeof header.width === 'number' ? `${header.width}px` : header.width } : {}, onClick: () => header.sortable !== false && this.handleSort(header) }, h("div", { class: "header-content" }, h("span", null, header.text), header.sortable !== false && this.getSortIcon(header))))))), this.loading && this.skeletonLoader ? (this.renderSkeletonLoader()) : (h("tbody", null, this.items.length === 0 ? (h("tr", { class: "empty-row" }, h("td", { colSpan: this.headers.length + (this.canSelect ? 1 : 0) }, h("div", { class: "empty-state" }, h("p", null, "No data available"))))) : (this.items.map(item => {
+            }, style: header.width ? { width: typeof header.width === 'number' ? `${header.width}px` : header.width } : {}, onClick: () => header.sortable !== false && this.handleSort(header), "aria-sort": header.sortable !== false && this.sortBy === header.value
+                ? this.sortDirection === 'asc'
+                    ? 'ascending'
+                    : this.sortDirection === 'desc'
+                        ? 'descending'
+                        : 'none'
+                : undefined }, h("div", { class: "header-content" }, h("span", null, header.text), header.sortable !== false && this.getSortIcon(header))))))), this.loading && this.skeletonLoader ? (this.renderSkeletonLoader()) : (h("tbody", null, this.items.length === 0 ? (h("tr", { class: "empty-row" }, h("td", { colSpan: this.headers.length + (this.canSelect ? 1 : 0) }, h("div", { class: "empty-state" }, h("p", null, "No data available"))))) : (this.items.map(item => {
             const isSelected = this.internalSelected.has(item);
             return (h("tr", { class: {
                     selected: isSelected,
                     clickable: true,
-                }, onClick: (e) => this.handleRowClick(item, e) }, this.canSelect && (h("td", { class: "select-column" }, h("label", { class: "checkbox-label" }, h("input", { type: "checkbox", checked: isSelected, onChange: (e) => this.handleSelectOne(e, item) })))), this.headers.map(header => (h("td", { class: `align-${header.align || 'left'}` }, h("slot", { name: `item.${header.value}` }, item[header.value]))))));
+                }, onClick: (e) => this.handleRowClick(item, e), "aria-selected": this.canSelect ? isSelected ? 'true' : 'false' : undefined }, this.canSelect && (h("td", { class: "select-column" }, h("label", { class: "checkbox-label" }, h("input", { type: "checkbox", checked: isSelected, onChange: (e) => this.handleSelectOne(e, item) })))), this.headers.map(header => (h("td", { class: `align-${header.align || 'left'}` }, h("slot", { name: `item.${header.value}` }, item[header.value]))))));
         })))))), this.pagination && this.pagination.total > 0 && this.renderPagination())));
     }
     static get is() { return "xplor-datatable"; }

package/dist/collection/components/xplor-datatable/xplor-datatable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"xplor-datatable.js","sourceRoot":"","sources":["../../../src/components/xplor-datatable/xplor-datatable.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n State,\n Element,\n Event,\n EventEmitter,\n h,\n Watch,\n Host,\n} from '@stencil/core';\n\nexport interface DatatableColumn {\n text: string;\n value: string;\n sortable?: boolean;\n width?: string \| number;\n align?: 'left' \| 'center' \| 'right';\n fixed?: boolean;\n}\n\nexport interface DatatablePagination {\n page: number;\n perpage: number;\n total: number;\n pages?: number;\n}\n\n@Component({\n tag: 'xplor-datatable',\n styleUrl: 'xplor-datatable.scss',\n shadow: true,\n})\nexport class XplorDatatable {\n @Element() el: HTMLXplorDatatableElement;\n\n /*\n Array of column definitions for the table headers\n /\n @Prop() headers: DatatableColumn[] = [];\n\n /\n Array of data items to display in the table\n /\n @Prop() items: any[] = [];\n\n /\n Whether the table is in a loading state\n /\n @Prop() loading: boolean = false;\n\n /\n Pagination configuration object\n /\n @Prop() pagination: DatatablePagination = {\n page: 1,\n perpage: 10,\n total: 0,\n };\n\n /\n Array of selected items (for multiselect)\n /\n @Prop() selected: any[] = [];\n\n /\n Enable row selection with checkboxes\n /\n @Prop() canSelect: boolean = false;\n\n /\n Enable horizontal lines between rows\n /\n @Prop() horizontalLines: boolean = true;\n\n /\n Enable striped row styling\n /\n @Prop() striped: boolean = false;\n\n /\n Fixed header height (e.g., \"400px\" or 400)\n /\n @Prop() height?: string \| number;\n\n /\n Show skeleton loader when loading\n /\n @Prop() skeletonLoader: boolean = true;\n\n /\n Enable hover effect on rows\n /\n @Prop() hover: boolean = true;\n\n /\n Per page options for pagination\n /\n @Prop() perPageOptions: number[] = [10, 25, 50, 100];\n\n /\n Emitted when a row is clicked\n /\n @Event() rowClick: EventEmitter<any>;\n\n /\n Emitted when row selection changes\n /\n @Event() xplorSelectionChange: EventEmitter<any[]>;\n\n /\n Emitted when pagination changes\n /\n @Event() paginationChange: EventEmitter<DatatablePagination>;\n\n /\n Emitted when sorting changes\n /\n @Event() sortChange: EventEmitter<{ column: string; direction: 'asc' \| 'desc' \| null }>;\n\n @State() sortBy: string \| null = null;\n @State() sortDirection: 'asc' \| 'desc' \| null = null;\n @State() internalSelected: Set<any> = new Set();\n @State() allSelected: boolean = false;\n\n componentWillLoad() {\n this.internalSelected = new Set(this.selected);\n }\n\n @Watch('selected')\n watchSelected(newSelected: any[]) {\n this.internalSelected = new Set(newSelected);\n this.updateAllSelectedState();\n }\n\n @Watch('items')\n watchItems() {\n this.updateAllSelectedState();\n }\n\n private updateAllSelectedState() {\n if (this.items.length === 0) {\n this.allSelected = false;\n return;\n }\n this.allSelected = this.items.every(item => this.internalSelected.has(item));\n }\n\n private handleSort = (column: DatatableColumn) => {\n if (column.sortable === false) return;\n\n if (this.sortBy === column.value) {\n // Cycle through: asc -> desc -> null\n if (this.sortDirection === 'asc') {\n this.sortDirection = 'desc';\n } else if (this.sortDirection === 'desc') {\n this.sortDirection = null;\n this.sortBy = null;\n }\n } else {\n this.sortBy = column.value;\n this.sortDirection = 'asc';\n }\n\n this.sortChange.emit({\n column: this.sortBy,\n direction: this.sortDirection,\n });\n };\n\n private handleSelectAll = (e: Event) => {\n const target = e.target as HTMLInputElement;\n const checked = target.checked;\n\n if (checked) {\n this.items.forEach(item => this.internalSelected.add(item));\n } else {\n this.internalSelected.clear();\n }\n\n this.allSelected = checked;\n this.internalSelected = new Set(this.internalSelected);\n this.xplorSelectionChange.emit(Array.from(this.internalSelected));\n };\n\n private handleSelectOne = (e: Event, item: any) => {\n const target = e.target as HTMLInputElement;\n const checked = target.checked;\n\n if (checked) {\n this.internalSelected.add(item);\n } else {\n this.internalSelected.delete(item);\n }\n\n this.internalSelected = new Set(this.internalSelected);\n this.updateAllSelectedState();\n this.xplorSelectionChange.emit(Array.from(this.internalSelected));\n };\n\n private handleRowClick = (item: any, e: MouseEvent) => {\n // Don't trigger row click if clicking on checkbox or interactive elements\n const target = e.target as HTMLElement;\n if (target.tagName === 'INPUT' \|\| target.closest('input')) {\n return;\n }\n\n this.rowClick.emit(item);\n };\n\n private handlePageChange = (newPage: number) => {\n const updatedPagination = {\n ...this.pagination,\n page: newPage,\n };\n this.paginationChange.emit(updatedPagination);\n };\n\n private handlePerPageChange = (e: Event) => {\n const target = e.target as HTMLSelectElement;\n const perpage = parseInt(target.value, 10);\n if (!isNaN(perpage)) {\n const updatedPagination = {\n ...this.pagination,\n page: 1, // Reset to first page\n perpage,\n };\n this.paginationChange.emit(updatedPagination);\n }\n };\n\n private getSortIcon(column: DatatableColumn) {\n if (this.sortBy !== column.value) {\n return (\n <svg class=\"sort-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M8 3L11 6H5L8 3Z\" fill=\"currentColor\" opacity=\"0.3\" />\n <path d=\"M8 13L5 10H11L8 13Z\" fill=\"currentColor\" opacity=\"0.3\" />\n </svg>\n );\n }\n\n if (this.sortDirection === 'asc') {\n return (\n <svg class=\"sort-icon active\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M8 3L11 6H5L8 3Z\" fill=\"currentColor\" />\n <path d=\"M8 13L5 10H11L8 13Z\" fill=\"currentColor\" opacity=\"0.3\" />\n </svg>\n );\n }\n\n return (\n <svg class=\"sort-icon active\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M8 3L11 6H5L8 3Z\" fill=\"currentColor\" opacity=\"0.3\" />\n <path d=\"M8 13L5 10H11L8 13Z\" fill=\"currentColor\" />\n </svg>\n );\n };\n\n private renderSkeletonLoader() {\n return (\n <tbody class=\"skeleton-loader\">\n {Array.from({ length: this.pagination.perpage }).map(() => (\n <tr>\n {this.canSelect && (\n <td>\n <div class=\"skeleton skeleton-checkbox\"></div>\n </td>\n )}\n {this.headers.map(() => (\n <td>\n <div class=\"skeleton skeleton-text\"></div>\n </td>\n ))}\n </tr>\n ))}\n </tbody>\n );\n }\n\n private renderPagination() {\n const totalPages = Math.ceil(this.pagination.total / this.pagination.perpage);\n const currentPage = this.pagination.page;\n const start = (currentPage - 1) this.pagination.perpage + 1;\n const end = Math.min(currentPage * this.pagination.perpage, this.pagination.total);\n\n return (\n <div class=\"datatable-footer\">\n <div class=\"footer-info\">\n {this.pagination.total > 0 ? (\n <span>\n Showing {start} to {end} of {this.pagination.total} entries\n </span>\n ) : (\n <span>No entries</span>\n )}\n </div>\n\n <div class=\"footer-controls\">\n <div class=\"per-page-selector\">\n <label>\n Rows per page:\n <select onInput={this.handlePerPageChange}>\n {this.perPageOptions.map(option => (\n <option value={option} selected={option === this.pagination.perpage}>{option}</option>\n ))}\n </select>\n </label>\n </div>\n\n <div class=\"pagination-controls\">\n <button\n class=\"pagination-btn\"\n disabled={currentPage === 1}\n onClick={() => this.handlePageChange(1)}\n aria-label=\"First page\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M11 12L7 8L11 4M5 4V12\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n </svg>\n </button>\n\n <button\n class=\"pagination-btn\"\n disabled={currentPage === 1}\n onClick={() => this.handlePageChange(currentPage - 1)}\n aria-label=\"Previous page\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M10 12L6 8L10 4\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n </svg>\n </button>\n\n <span class=\"page-info\">\n Page {currentPage} of {totalPages \|\| 1}\n </span>\n\n <button\n class=\"pagination-btn\"\n disabled={currentPage >= totalPages}\n onClick={() => this.handlePageChange(currentPage + 1)}\n aria-label=\"Next page\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M6 4L10 8L6 12\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n </svg>\n </button>\n\n <button\n class=\"pagination-btn\"\n disabled={currentPage >= totalPages}\n onClick={() => this.handlePageChange(totalPages)}\n aria-label=\"Last page\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M5 4L9 8L5 12M11 4V12\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n );\n }\n\n render() {\n const tableHeight = typeof this.height === 'number' ? `${this.height}px` : this.height;\n const hasHeight = !!this.height;\n\n return (\n <Host class=\"xplor-datatable\">\n <div class=\"datatable-container\">\n <div\n class={{\n 'table-wrapper': true,\n 'has-height': hasHeight,\n 'horizontal-lines': this.horizontalLines,\n 'striped': this.striped,\n 'is-empty': this.items.length === 0,\n }}\n style={hasHeight ? { height: tableHeight } : {}}\n >\n <table class={{ 'hover': this.hover }}>\n <thead>\n <tr>\n {this.canSelect && (\n <th class=\"select-column\">\n <label class=\"checkbox-label\">\n <input\n type=\"checkbox\"\n checked={this.allSelected}\n indeterminate={\n this.internalSelected.size > 0 &&\n this.internalSelected.size < this.items.length\n }\n onChange={this.handleSelectAll}\n />\n </label>\n </th>\n )}\n {this.headers.map(header => (\n <th\n class={{\n sortable: header.sortable !== false,\n sorted: this.sortBy === header.value,\n fixed: header.fixed,\n [`align-${header.align \|\| 'left'}`]: true,\n }}\n style={header.width ? { width: typeof header.width === 'number' ? `${header.width}px` : header.width } : {}}\n onClick={() => header.sortable !== false && this.handleSort(header)}\n >\n <div class=\"header-content\">\n <span>{header.text}</span>\n {header.sortable !== false && this.getSortIcon(header)}\n </div>\n </th>\n ))}\n </tr>\n </thead>\n\n {this.loading && this.skeletonLoader ? (\n this.renderSkeletonLoader()\n ) : (\n <tbody>\n {this.items.length === 0 ? (\n <tr class=\"empty-row\">\n <td colSpan={this.headers.length + (this.canSelect ? 1 : 0)}>\n <div class=\"empty-state\">\n <p>No data available</p>\n </div>\n </td>\n </tr>\n ) : (\n this.items.map(item => {\n const isSelected = this.internalSelected.has(item);\n return (\n <tr\n class={{\n selected: isSelected,\n clickable: true,\n }}\n onClick={(e) => this.handleRowClick(item, e)}\n >\n {this.canSelect && (\n <td class=\"select-column\">\n <label class=\"checkbox-label\">\n <input\n type=\"checkbox\"\n checked={isSelected}\n onChange={(e) => this.handleSelectOne(e, item)}\n />\n </label>\n </td>\n )}\n {this.headers.map(header => (\n <td class={`align-${header.align \|\| 'left'}`}>\n <slot name={`item.${header.value}`}>\n {item[header.value]}\n </slot>\n </td>\n ))}\n </tr>\n );\n })\n )}\n </tbody>\n )}\n </table>\n </div>\n\n {this.pagination && this.pagination.total > 0 && this.renderPagination()}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"xplor-datatable.js","sourceRoot":"","sources":["../../../src/components/xplor-datatable/xplor-datatable.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n State,\n Element,\n Event,\n EventEmitter,\n h,\n Watch,\n Host,\n} from '@stencil/core';\n\nexport interface DatatableColumn {\n text: string;\n value: string;\n sortable?: boolean;\n width?: string \| number;\n align?: 'left' \| 'center' \| 'right';\n fixed?: boolean;\n}\n\nexport interface DatatablePagination {\n page: number;\n perpage: number;\n total: number;\n pages?: number;\n}\n\n@Component({\n tag: 'xplor-datatable',\n styleUrl: 'xplor-datatable.scss',\n shadow: true,\n})\nexport class XplorDatatable {\n @Element() el: HTMLXplorDatatableElement;\n\n /*\n Array of column definitions for the table headers\n /\n @Prop() headers: DatatableColumn[] = [];\n\n /\n Array of data items to display in the table\n /\n @Prop() items: any[] = [];\n\n /\n Whether the table is in a loading state\n /\n @Prop() loading: boolean = false;\n\n /\n Pagination configuration object\n /\n @Prop() pagination: DatatablePagination = {\n page: 1,\n perpage: 10,\n total: 0,\n };\n\n /\n Array of selected items (for multiselect)\n /\n @Prop() selected: any[] = [];\n\n /\n Enable row selection with checkboxes\n /\n @Prop() canSelect: boolean = false;\n\n /\n Enable horizontal lines between rows\n /\n @Prop() horizontalLines: boolean = true;\n\n /\n Enable striped row styling\n /\n @Prop() striped: boolean = false;\n\n /\n Fixed header height (e.g., \"400px\" or 400)\n /\n @Prop() height?: string \| number;\n\n /\n Show skeleton loader when loading\n /\n @Prop() skeletonLoader: boolean = true;\n\n /\n Enable hover effect on rows\n /\n @Prop() hover: boolean = true;\n\n /\n Per page options for pagination\n /\n @Prop() perPageOptions: number[] = [10, 25, 50, 100];\n\n /\n Emitted when a row is clicked\n /\n @Event() rowClick: EventEmitter<any>;\n\n /\n Emitted when row selection changes\n /\n @Event() xplorSelectionChange: EventEmitter<any[]>;\n\n /\n Emitted when pagination changes\n /\n @Event() paginationChange: EventEmitter<DatatablePagination>;\n\n /\n Emitted when sorting changes\n /\n @Event() sortChange: EventEmitter<{ column: string; direction: 'asc' \| 'desc' \| null }>;\n\n @State() sortBy: string \| null = null;\n @State() sortDirection: 'asc' \| 'desc' \| null = null;\n @State() internalSelected: Set<any> = new Set();\n @State() allSelected: boolean = false;\n\n componentWillLoad() {\n this.internalSelected = new Set(this.selected);\n }\n\n @Watch('selected')\n watchSelected(newSelected: any[]) {\n this.internalSelected = new Set(newSelected);\n this.updateAllSelectedState();\n }\n\n @Watch('items')\n watchItems() {\n this.updateAllSelectedState();\n }\n\n private updateAllSelectedState() {\n if (this.items.length === 0) {\n this.allSelected = false;\n return;\n }\n this.allSelected = this.items.every(item => this.internalSelected.has(item));\n }\n\n private handleSort = (column: DatatableColumn) => {\n if (column.sortable === false) return;\n\n if (this.sortBy === column.value) {\n // Cycle through: asc -> desc -> null\n if (this.sortDirection === 'asc') {\n this.sortDirection = 'desc';\n } else if (this.sortDirection === 'desc') {\n this.sortDirection = null;\n this.sortBy = null;\n }\n } else {\n this.sortBy = column.value;\n this.sortDirection = 'asc';\n }\n\n this.sortChange.emit({\n column: this.sortBy,\n direction: this.sortDirection,\n });\n };\n\n private handleSelectAll = (e: Event) => {\n const target = e.target as HTMLInputElement;\n const checked = target.checked;\n\n if (checked) {\n this.items.forEach(item => this.internalSelected.add(item));\n } else {\n this.internalSelected.clear();\n }\n\n this.allSelected = checked;\n this.internalSelected = new Set(this.internalSelected);\n this.xplorSelectionChange.emit(Array.from(this.internalSelected));\n };\n\n private handleSelectOne = (e: Event, item: any) => {\n const target = e.target as HTMLInputElement;\n const checked = target.checked;\n\n if (checked) {\n this.internalSelected.add(item);\n } else {\n this.internalSelected.delete(item);\n }\n\n this.internalSelected = new Set(this.internalSelected);\n this.updateAllSelectedState();\n this.xplorSelectionChange.emit(Array.from(this.internalSelected));\n };\n\n private handleRowClick = (item: any, e: MouseEvent) => {\n // Don't trigger row click if clicking on checkbox or interactive elements\n const target = e.target as HTMLElement;\n if (target.tagName === 'INPUT' \|\| target.closest('input')) {\n return;\n }\n\n this.rowClick.emit(item);\n };\n\n private handlePageChange = (newPage: number) => {\n const updatedPagination = {\n ...this.pagination,\n page: newPage,\n };\n this.paginationChange.emit(updatedPagination);\n };\n\n private handlePerPageChange = (e: Event) => {\n const target = e.target as HTMLSelectElement;\n const perpage = parseInt(target.value, 10);\n if (!isNaN(perpage)) {\n const updatedPagination = {\n ...this.pagination,\n page: 1, // Reset to first page\n perpage,\n };\n this.paginationChange.emit(updatedPagination);\n }\n };\n\n private getSortIcon(column: DatatableColumn) {\n if (this.sortBy !== column.value) {\n return (\n <svg class=\"sort-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M8 3L11 6H5L8 3Z\" fill=\"currentColor\" opacity=\"0.3\" />\n <path d=\"M8 13L5 10H11L8 13Z\" fill=\"currentColor\" opacity=\"0.3\" />\n </svg>\n );\n }\n\n if (this.sortDirection === 'asc') {\n return (\n <svg class=\"sort-icon active\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M8 3L11 6H5L8 3Z\" fill=\"currentColor\" />\n <path d=\"M8 13L5 10H11L8 13Z\" fill=\"currentColor\" opacity=\"0.3\" />\n </svg>\n );\n }\n\n return (\n <svg class=\"sort-icon active\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M8 3L11 6H5L8 3Z\" fill=\"currentColor\" opacity=\"0.3\" />\n <path d=\"M8 13L5 10H11L8 13Z\" fill=\"currentColor\" />\n </svg>\n );\n };\n\n private renderSkeletonLoader() {\n return (\n <tbody class=\"skeleton-loader\">\n {Array.from({ length: this.pagination.perpage }).map(() => (\n <tr>\n {this.canSelect && (\n <td>\n <div class=\"skeleton skeleton-checkbox\"></div>\n </td>\n )}\n {this.headers.map(() => (\n <td>\n <div class=\"skeleton skeleton-text\"></div>\n </td>\n ))}\n </tr>\n ))}\n </tbody>\n );\n }\n\n private renderPagination() {\n const totalPages = Math.ceil(this.pagination.total / this.pagination.perpage);\n const currentPage = this.pagination.page;\n const start = (currentPage - 1) this.pagination.perpage + 1;\n const end = Math.min(currentPage * this.pagination.perpage, this.pagination.total);\n\n return (\n <div class=\"datatable-footer\">\n <div class=\"footer-info\">\n {this.pagination.total > 0 ? (\n <span>\n Showing {start} to {end} of {this.pagination.total} entries\n </span>\n ) : (\n <span>No entries</span>\n )}\n </div>\n\n <div class=\"footer-controls\">\n <div class=\"per-page-selector\">\n <label>\n Rows per page:\n <select onInput={this.handlePerPageChange}>\n {this.perPageOptions.map(option => (\n <option value={option} selected={option === this.pagination.perpage}>{option}</option>\n ))}\n </select>\n </label>\n </div>\n\n <div class=\"pagination-controls\">\n <button\n class=\"pagination-btn\"\n disabled={currentPage === 1}\n onClick={() => this.handlePageChange(1)}\n aria-label=\"First page\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M11 12L7 8L11 4M5 4V12\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n </svg>\n </button>\n\n <button\n class=\"pagination-btn\"\n disabled={currentPage === 1}\n onClick={() => this.handlePageChange(currentPage - 1)}\n aria-label=\"Previous page\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M10 12L6 8L10 4\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n </svg>\n </button>\n\n <span class=\"page-info\">\n Page {currentPage} of {totalPages \|\| 1}\n </span>\n\n <button\n class=\"pagination-btn\"\n disabled={currentPage >= totalPages}\n onClick={() => this.handlePageChange(currentPage + 1)}\n aria-label=\"Next page\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M6 4L10 8L6 12\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n </svg>\n </button>\n\n <button\n class=\"pagination-btn\"\n disabled={currentPage >= totalPages}\n onClick={() => this.handlePageChange(totalPages)}\n aria-label=\"Last page\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M5 4L9 8L5 12M11 4V12\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n );\n }\n\n render() {\n const tableHeight = typeof this.height === 'number' ? `${this.height}px` : this.height;\n const hasHeight = !!this.height;\n\n return (\n <Host class=\"xplor-datatable\">\n <div class=\"datatable-container\">\n <div\n class={{\n 'table-wrapper': true,\n 'has-height': hasHeight,\n 'horizontal-lines': this.horizontalLines,\n 'striped': this.striped,\n 'is-empty': this.items.length === 0,\n }}\n style={hasHeight ? { height: tableHeight } : {}}\n >\n <table class={{ 'hover': this.hover }}>\n <thead>\n <tr>\n {this.canSelect && (\n <th class=\"select-column\">\n <label class=\"checkbox-label\">\n <input\n type=\"checkbox\"\n checked={this.allSelected}\n indeterminate={\n this.internalSelected.size > 0 &&\n this.internalSelected.size < this.items.length\n }\n onChange={this.handleSelectAll}\n aria-label=\"Select all rows\"\n />\n </label>\n </th>\n )}\n {this.headers.map(header => (\n <th\n class={{\n sortable: header.sortable !== false,\n sorted: this.sortBy === header.value,\n fixed: header.fixed,\n [`align-${header.align \|\| 'left'}`]: true,\n }}\n style={header.width ? { width: typeof header.width === 'number' ? `${header.width}px` : header.width } : {}}\n onClick={() => header.sortable !== false && this.handleSort(header)}\n aria-sort={\n header.sortable !== false && this.sortBy === header.value\n ? this.sortDirection === 'asc'\n ? 'ascending'\n : this.sortDirection === 'desc'\n ? 'descending'\n : 'none'\n : undefined\n }\n >\n <div class=\"header-content\">\n <span>{header.text}</span>\n {header.sortable !== false && this.getSortIcon(header)}\n </div>\n </th>\n ))}\n </tr>\n </thead>\n\n {this.loading && this.skeletonLoader ? (\n this.renderSkeletonLoader()\n ) : (\n <tbody>\n {this.items.length === 0 ? (\n <tr class=\"empty-row\">\n <td colSpan={this.headers.length + (this.canSelect ? 1 : 0)}>\n <div class=\"empty-state\">\n <p>No data available</p>\n </div>\n </td>\n </tr>\n ) : (\n this.items.map(item => {\n const isSelected = this.internalSelected.has(item);\n return (\n <tr\n class={{\n selected: isSelected,\n clickable: true,\n }}\n onClick={(e) => this.handleRowClick(item, e)}\n aria-selected={this.canSelect ? isSelected ? 'true' : 'false' : undefined}\n >\n {this.canSelect && (\n <td class=\"select-column\">\n <label class=\"checkbox-label\">\n <input\n type=\"checkbox\"\n checked={isSelected}\n onChange={(e) => this.handleSelectOne(e, item)}\n />\n </label>\n </td>\n )}\n {this.headers.map(header => (\n <td class={`align-${header.align \|\| 'left'}`}>\n <slot name={`item.${header.value}`}>\n {item[header.value]}\n </slot>\n </td>\n ))}\n </tr>\n );\n })\n )}\n </tbody>\n )}\n </table>\n </div>\n\n {this.pagination && this.pagination.total > 0 && this.renderPagination()}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/xplor-date-picker/xplor-date-picker.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+let datePickerIdCounter = 0;
 export class XplorDatePicker {
     constructor() {
         /** Selected date in YYYY-MM-DD format */
@@ -28,6 +29,9 @@ export class XplorDatePicker {
         this.isOpen = false;
         this.inputText = '';
         this.dropdownPosition = 'bottom';
+        this.inputId = `xplor-date-picker-${++datePickerIdCounter}`;
+        this.labelId = `${this.inputId}-label`;
+        this.errorId = `${this.inputId}-error`;
         this.toggleDropdown = () => {
             if (this.disabled || this.readonly)
                 return;
@@ -193,16 +197,16 @@ export class XplorDatePicker {
     }
     render() {
         const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && this.error);
-        const calendarIcon = (h("svg", { key: '9a8e37792f14af7af7f14ec86602b5c9bfb28b56', class: "date-picker__icon-svg", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("rect", { key: 'bfbc6e0022ea0c4d5d9ebd49636d9d8b32c2d32c', x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), h("line", { key: '0d1fd4f951edd7bf388709e4db248d1421c67832', x1: "16", y1: "2", x2: "16", y2: "6" }), h("line", { key: '0995228bc198c5a09de2c9213a4713c2b3e3f054', x1: "8", y1: "2", x2: "8", y2: "6" }), h("line", { key: 'c938471721e6e72b25cbc7d46ddf823f5a37bfe5', x1: "3", y1: "10", x2: "21", y2: "10" })));
-        return (h(Host, { key: '5acf3baf9f4d5cece68b25339a68a05f572a1bb9' }, h("div", { key: 'b1c2d84e87ab4d99a1af317397c6b442fbb49f93', class: {
+        const calendarIcon = (h("svg", { key: '8e3f3be13346ec15a3e4e2a9e9ccf3481cf8c87b', class: "date-picker__icon-svg", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("rect", { key: '1f5d918d65a44a7b8f9dec0609ef125c96b1ccdf', x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), h("line", { key: 'd2a5ccfbe2e4afe8ed5d9277c49b09169c6ae651', x1: "16", y1: "2", x2: "16", y2: "6" }), h("line", { key: '8d114a93b8f1c4d8fc65360f34afaecc14148328', x1: "8", y1: "2", x2: "8", y2: "6" }), h("line", { key: '40b3ab407c3872d6eda481a64f8210b505e202cc', x1: "3", y1: "10", x2: "21", y2: "10" })));
+        return (h(Host, { key: '7c04e985b0a900863965311e69a336d859852e66' }, h("div", { key: '15b17203d293c694130493bf45b8bd6d38c7bd36', class: {
                 'date-picker': true,
                 'date-picker--disabled': this.disabled,
                 'date-picker--error': !!this.error,
                 'date-picker--open': this.isOpen,
-            } }, this.label && (h("label", { key: '94d43b8d44f60806824f4ef72fe4cb0113441351', class: "date-picker__label" }, this.label, this.required && h("span", { key: '2ae8a33b2a46d7e81a990368390f52c167879013', class: "date-picker__required" }, "*"))), this.display === 'text' ? (h("div", { class: "date-picker__text-display", onClick: this.handleTextClick }, h("span", { class: "date-picker__text-value" }, this.value ? this.formatDateForDisplay(this.value) : this.placeholder), calendarIcon)) : (h("div", { class: "date-picker__field" }, h("input", { type: "text", class: "date-picker__input", value: this.inputText, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onInput: this.handleInputChange, style: { backgroundColor: this.bgColor } }), h("div", { class: "date-picker__actions" }, this.clearable && this.value && !this.disabled && !this.readonly && (h("button", { type: "button", class: "date-picker__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u00D7")), h("button", { type: "button", class: "date-picker__icon-btn", onClick: this.toggleDropdown, disabled: this.disabled, "aria-label": "Open calendar" }, calendarIcon)))), showDetails && (h("div", { key: 'eff419a0def4d85e0df8e3182132eeeb57454cef', class: "date-picker__details" }, this.error && h("div", { key: '554878b0d415e16dd8715f58db0da94259a2e3c8', class: "date-picker__error-message" }, this.error))), this.isOpen && (h("div", { key: '75ec84dd8849b3007cb4f99b73098e52b458a476', class: {
+            } }, this.label && (h("label", { key: 'e9e03dde337f9c2259611f1f1f4748bb92d86cfb', class: "date-picker__label", id: this.labelId, htmlFor: this.inputId }, this.label, this.required && h("span", { key: '4e68d0071f5224c9fc30df8864898a4906f6efba', class: "date-picker__required" }, "*"))), this.display === 'text' ? (h("div", { class: "date-picker__text-display", onClick: this.handleTextClick, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "dialog", role: "button", tabIndex: 0 }, h("span", { class: "date-picker__text-value" }, this.value ? this.formatDateForDisplay(this.value) : this.placeholder), calendarIcon)) : (h("div", { class: "date-picker__field" }, h("input", { id: this.inputId, type: "text", class: "date-picker__input", value: this.inputText, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onInput: this.handleInputChange, style: { backgroundColor: this.bgColor }, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "dialog", "aria-describedby": this.error ? this.errorId : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined }), h("div", { class: "date-picker__actions" }, this.clearable && this.value && !this.disabled && !this.readonly && (h("button", { type: "button", class: "date-picker__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u00D7")), h("button", { type: "button", class: "date-picker__icon-btn", onClick: this.toggleDropdown, disabled: this.disabled, "aria-label": "Open calendar" }, calendarIcon)))), showDetails && (h("div", { key: '4e9fd12626bf5436604e28a236a304d60c452b50', class: "date-picker__details" }, this.error && h("div", { key: 'a40425ac84ee81671f4289f4323db9a9a472d3c7', class: "date-picker__error-message", id: this.errorId }, this.error))), this.isOpen && (h("div", { key: '86c55873b678dcfe74c09475cbde7657f1983799', class: {
                 'date-picker__dropdown': true,
                 'date-picker__dropdown--top': this.dropdownPosition === 'top',
-            } }, h("xplor-inline-date-picker", { key: '74c870356063103474e60245888b8b2ae67fcd1a', selectedDate: this.value, min: this.min, max: this.max, readonly: this.readonly, color: this.color, startWeekOnSunday: this.startWeekOnSunday, onDateSelected: this.handleDateSelected }))))));
+            } }, h("xplor-inline-date-picker", { key: 'bd1636e13522a65ea6377857edea2928a6182282', selectedDate: this.value, min: this.min, max: this.max, readonly: this.readonly, color: this.color, startWeekOnSunday: this.startWeekOnSunday, onDateSelected: this.handleDateSelected }))))));
     }
     static get is() { return "xplor-date-picker"; }
     static get encapsulation() { return "scoped"; }