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

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

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

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

	@@ -1 +1 @@
1	- {"file":"xplor-checkbox.js","mappings":"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","names":["XplorCheckbox","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-checkbox/xplor-checkbox.scss?tag=xplor-checkbox&encapsulation=shadow","src/components/xplor-checkbox/xplor-checkbox.tsx"],"sourcesContent":["/* custom-checkbox.scss */\n$color-gray-400: #d1d5db;\n$color-gray-600: #6b7280;\n$color-gray-700: #374151;\n$color-green-100: #d1fae5;\n$color-green-200: #a7f3d0;\n$color-green-300: #6ee7b7;\n$color-green-600: #059669;\n$color-red-100: #fee2e2;\n$color-red-200: #fecaca;\n$color-red-300: #fca5a5;\n$color-red-500: #ef4444;\n$color-white: white;\n\n$checkbox-size: 20px;\n$checkbox-radius: 4px;\n$border-width: 2px;\n$icon-size: 16px;\n$transition-speed: 0.15s;\n$focus-ring-opacity: 0.1;\n$disabled-opacity: 0.4;\n\n:host {\n display: inline-block;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.checkbox-wrapper {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n}\n\n.checkbox {\n width: $checkbox-size;\n height: $checkbox-size;\n border-radius: $checkbox-radius;\n border: $border-width solid $color-gray-600;\n background: $color-white;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all $transition-speed ease;\n outline: none;\n position: relative;\n\n // Hover state (unselected)\n &.hover {\n background: $color-green-100;\n border-color: $color-green-600;\n }\n\n // Focus state (unselected)\n &.focus {\n background: $color-green-200;\n border-color: $color-green-600;\n box-shadow: 0 0 0 3px rgba($color-green-600, $focus-ring-opacity);\n }\n\n // Pressed state (unselected)\n &.pressed {\n background: $color-green-300;\n border-color: $color-green-600;\n }\n\n // Selected (checked) state\n &.checked {\n background: $color-green-600;\n border-color: $color-green-600;\n\n &.hover {\n background: $color-green-100;\n border-color: $color-green-600;\n\n .check-icon {\n color: $color-green-600;\n }\n }\n\n &.focus {\n background: $color-green-200;\n border-color: $color-green-600;\n box-shadow: 0 0 0 3px rgba($color-green-600, $focus-ring-opacity);\n\n .check-icon {\n color: $color-green-600;\n }\n }\n\n &.pressed {\n background: $color-green-300;\n border-color: $color-green-600;\n\n .check-icon {\n color: $color-green-600;\n }\n }\n }\n\n // Indeterminate state\n &.indeterminate {\n background: $color-green-600;\n border-color: $color-green-600;\n\n &.hover {\n background: $color-green-100;\n border-color: $color-green-600;\n\n .indeterminate-icon {\n color: $color-green-600;\n }\n }\n\n &.focus {\n background: $color-green-200;\n border-color: $color-green-600;\n box-shadow: 0 0 0 3px rgba($color-green-600, $focus-ring-opacity);\n\n .indeterminate-icon {\n color: $color-green-600;\n }\n }\n\n &.pressed {\n background: $color-green-300;\n border-color: $color-green-600;\n\n .indeterminate-icon {\n color: $color-green-600;\n }\n }\n }\n\n // Error state (unselected)\n &.error {\n border-color: $color-red-500;\n\n &.hover {\n background: $color-red-100;\n border-color: $color-red-500;\n }\n\n &.focus {\n background: $color-red-200;\n border-color: $color-red-500;\n box-shadow: 0 0 0 3px rgba($color-red-500, $focus-ring-opacity);\n }\n\n &.pressed {\n background: $color-red-300;\n border-color: $color-red-500;\n }\n\n // Error + checked\n &.checked {\n background: $color-red-500;\n border-color: $color-red-500;\n\n &.hover {\n background: $color-red-100;\n border-color: $color-red-500;\n\n .check-icon {\n color: $color-red-500;\n }\n }\n\n &.focus {\n background: $color-red-200;\n border-color: $color-red-500;\n box-shadow: 0 0 0 3px rgba($color-red-500, $focus-ring-opacity);\n\n .check-icon {\n color: $color-red-500;\n }\n }\n\n &.pressed {\n background: $color-red-300;\n border-color: $color-red-500;\n\n .check-icon {\n color: $color-red-500;\n }\n }\n }\n\n // Error + indeterminate\n &.indeterminate {\n background: $color-red-500;\n border-color: $color-red-500;\n\n &.hover {\n background: $color-red-100;\n border-color: $color-red-500;\n\n .indeterminate-icon {\n color: $color-red-500;\n }\n }\n\n &.focus {\n background: $color-red-200;\n border-color: $color-red-500;\n box-shadow: 0 0 0 3px rgba($color-red-500, $focus-ring-opacity);\n\n .indeterminate-icon {\n color: $color-red-500;\n }\n }\n\n &.pressed {\n background: $color-red-300;\n border-color: $color-red-500;\n\n .indeterminate-icon {\n color: $color-red-500;\n }\n }\n }\n }\n\n // Disabled state\n &.disabled {\n opacity: $disabled-opacity;\n cursor: not-allowed;\n border-color: $color-gray-400;\n background: $color-white;\n\n &.checked,\n &.indeterminate {\n background: $color-gray-400;\n border-color: $color-gray-400;\n }\n }\n}\n\n.check-icon,\n.indeterminate-icon {\n width: $icon-size;\n height: $icon-size;\n color: $color-white;\n}\n\n.label {\n font-size: 14px;\n color: $color-gray-700;\n user-select: none;\n\n .checkbox.disabled~& {\n opacity: $disabled-opacity;\n }\n}","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}"],"version":3}
1	+ {"file":"xplor-checkbox.js","mappings":"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","names":["XplorCheckbox","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-checkbox/xplor-checkbox.scss?tag=xplor-checkbox&encapsulation=shadow","src/components/xplor-checkbox/xplor-checkbox.tsx"],"sourcesContent":["/* custom-checkbox.scss */\n$color-gray-400: #d1d5db;\n$color-gray-600: #6b7280;\n$color-gray-700: #374151;\n$color-green-100: #d1fae5;\n$color-green-200: #a7f3d0;\n$color-green-300: #6ee7b7;\n$color-green-600: #059669;\n$color-red-100: #fee2e2;\n$color-red-200: #fecaca;\n$color-red-300: #fca5a5;\n$color-red-500: #ef4444;\n$color-white: white;\n\n$checkbox-size: 20px;\n$checkbox-radius: 4px;\n$border-width: 2px;\n$icon-size: 16px;\n$transition-speed: 0.15s;\n$focus-ring-opacity: 0.1;\n$disabled-opacity: 0.4;\n\n:host {\n display: inline-block;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.checkbox-wrapper {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n}\n\n.checkbox {\n width: $checkbox-size;\n height: $checkbox-size;\n border-radius: $checkbox-radius;\n border: $border-width solid $color-gray-600;\n background: $color-white;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all $transition-speed ease;\n outline: none;\n position: relative;\n\n // Hover state (unselected)\n &.hover {\n background: $color-green-100;\n border-color: $color-green-600;\n }\n\n // Focus state (unselected)\n &.focus {\n background: $color-green-200;\n border-color: $color-green-600;\n box-shadow: 0 0 0 3px rgba($color-green-600, $focus-ring-opacity);\n }\n\n // Pressed state (unselected)\n &.pressed {\n background: $color-green-300;\n border-color: $color-green-600;\n }\n\n // Selected (checked) state\n &.checked {\n background: $color-green-600;\n border-color: $color-green-600;\n\n &.hover {\n background: $color-green-100;\n border-color: $color-green-600;\n\n .check-icon {\n color: $color-green-600;\n }\n }\n\n &.focus {\n background: $color-green-200;\n border-color: $color-green-600;\n box-shadow: 0 0 0 3px rgba($color-green-600, $focus-ring-opacity);\n\n .check-icon {\n color: $color-green-600;\n }\n }\n\n &.pressed {\n background: $color-green-300;\n border-color: $color-green-600;\n\n .check-icon {\n color: $color-green-600;\n }\n }\n }\n\n // Indeterminate state\n &.indeterminate {\n background: $color-green-600;\n border-color: $color-green-600;\n\n &.hover {\n background: $color-green-100;\n border-color: $color-green-600;\n\n .indeterminate-icon {\n color: $color-green-600;\n }\n }\n\n &.focus {\n background: $color-green-200;\n border-color: $color-green-600;\n box-shadow: 0 0 0 3px rgba($color-green-600, $focus-ring-opacity);\n\n .indeterminate-icon {\n color: $color-green-600;\n }\n }\n\n &.pressed {\n background: $color-green-300;\n border-color: $color-green-600;\n\n .indeterminate-icon {\n color: $color-green-600;\n }\n }\n }\n\n // Error state (unselected)\n &.error {\n border-color: $color-red-500;\n\n &.hover {\n background: $color-red-100;\n border-color: $color-red-500;\n }\n\n &.focus {\n background: $color-red-200;\n border-color: $color-red-500;\n box-shadow: 0 0 0 3px rgba($color-red-500, $focus-ring-opacity);\n }\n\n &.pressed {\n background: $color-red-300;\n border-color: $color-red-500;\n }\n\n // Error + checked\n &.checked {\n background: $color-red-500;\n border-color: $color-red-500;\n\n &.hover {\n background: $color-red-100;\n border-color: $color-red-500;\n\n .check-icon {\n color: $color-red-500;\n }\n }\n\n &.focus {\n background: $color-red-200;\n border-color: $color-red-500;\n box-shadow: 0 0 0 3px rgba($color-red-500, $focus-ring-opacity);\n\n .check-icon {\n color: $color-red-500;\n }\n }\n\n &.pressed {\n background: $color-red-300;\n border-color: $color-red-500;\n\n .check-icon {\n color: $color-red-500;\n }\n }\n }\n\n // Error + indeterminate\n &.indeterminate {\n background: $color-red-500;\n border-color: $color-red-500;\n\n &.hover {\n background: $color-red-100;\n border-color: $color-red-500;\n\n .indeterminate-icon {\n color: $color-red-500;\n }\n }\n\n &.focus {\n background: $color-red-200;\n border-color: $color-red-500;\n box-shadow: 0 0 0 3px rgba($color-red-500, $focus-ring-opacity);\n\n .indeterminate-icon {\n color: $color-red-500;\n }\n }\n\n &.pressed {\n background: $color-red-300;\n border-color: $color-red-500;\n\n .indeterminate-icon {\n color: $color-red-500;\n }\n }\n }\n }\n\n // Disabled state\n &.disabled {\n opacity: $disabled-opacity;\n cursor: not-allowed;\n border-color: $color-gray-400;\n background: $color-white;\n\n &.checked,\n &.indeterminate {\n background: $color-gray-400;\n border-color: $color-gray-400;\n }\n }\n}\n\n.check-icon,\n.indeterminate-icon {\n width: $icon-size;\n height: $icon-size;\n color: $color-white;\n}\n\n.label {\n font-size: 14px;\n color: $color-gray-700;\n user-select: none;\n\n .checkbox.disabled~& {\n opacity: $disabled-opacity;\n }\n}","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}"],"version":3}

package/components/xplor-combobox.js CHANGED Viewed

@@ -217,23 +217,32 @@ const XplorCombobox$1 = /*@__PURE__*/ proxyCustomElement(class XplorCombobox ext
     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"))))));
     }
     get el() { return this; }
     static get style() { return xplorComboboxCss; }
@@ -242,6 +251,7 @@ const XplorCombobox$1 = /*@__PURE__*/ proxyCustomElement(class XplorCombobox ext
         "value": [1032],
         "placeholder": [1],
         "label": [1],
+        "ariaLabel": [1, "aria-label"],
         "disabled": [4],
         "readonly": [4],
         "clearable": [4],

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

	@@ -1 +1 @@
1	- {"file":"xplor-combobox.js","mappings":"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","names":["XplorCombobox","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-combobox/xplor-combobox.scss?tag=xplor-combobox&encapsulation=scoped","src/components/xplor-combobox/xplor-combobox.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.combobox {\n position: relative;\n width: 100%;\n\n &--disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n\n &--readonly {\n .combobox__input {\n background-color: #f5f5f5;\n }\n }\n}\n\n.combobox__label {\n display: block;\n font-size: 0.875rem;\n font-weight: 500;\n color: #424242;\n margin-bottom: 0.5rem;\n}\n\n.combobox__input-wrapper {\n position: relative;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 0.5rem;\n border: 1px solid #bdbdbd;\n border-radius: 4px;\n padding: 0.5rem;\n background-color: #fff;\n transition: border-color 0.2s, box-shadow 0.2s;\n\n &:focus-within {\n border-color: #1976d2;\n box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);\n }\n}\n\n.combobox__chips {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n}\n\n.combobox__chip {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n padding: 0.25rem 0.5rem;\n background-color: #e8f5e9;\n border-radius: 16px;\n font-size: 0.875rem;\n color: #2e7d32;\n}\n\n.combobox__chip-label {\n line-height: 1;\n}\n\n.combobox__chip-remove {\n background: none;\n border: none;\n font-size: 1.25rem;\n line-height: 1;\n cursor: pointer;\n padding: 0;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #2e7d32;\n border-radius: 50%;\n transition: background-color 0.2s;\n\n &:hover:not(:disabled) {\n background-color: rgba(46, 125, 50, 0.1);\n }\n\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n}\n\n.combobox__input {\n flex: 1;\n min-width: 120px;\n border: none;\n outline: none;\n font-family: inherit;\n font-size: 1rem;\n padding: 0.25rem;\n background: transparent;\n color: #212121;\n\n &::placeholder {\n color: #9e9e9e;\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n\n &[readonly] {\n cursor: default;\n }\n}\n\n.combobox__actions {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n flex-shrink: 0;\n}\n\n.combobox__clear {\n background: none;\n border: none;\n font-size: 1.25rem;\n line-height: 1;\n cursor: pointer;\n padding: 0;\n width: 1.5rem;\n height: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #757575;\n border-radius: 50%;\n transition: background-color 0.2s;\n\n &:hover {\n background-color: #f5f5f5;\n color: #212121;\n }\n}\n\n.combobox__icon {\n font-size: 0.75rem;\n color: #757575;\n pointer-events: none;\n transition: transform 0.2s;\n\n .combobox--open & {\n transform: rotate(180deg);\n }\n}\n\n.combobox__dropdown {\n position: absolute;\n top: calc(100% + 4px);\n left: 0;\n right: 0;\n max-height: 300px;\n overflow-y: auto;\n background-color: #fff;\n border: 1px solid #e0e0e0;\n border-radius: 4px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n z-index: 1000;\n}\n\n.combobox__item {\n padding: 0.75rem 1rem;\n cursor: pointer;\n transition: background-color 0.2s;\n color: #212121;\n\n &:hover:not(&--disabled) {\n background-color: #f5f5f5;\n }\n\n &--highlighted {\n background-color: #e3f2fd;\n }\n\n &--selected {\n background-color: #1976d2;\n color: #fff;\n\n &:hover {\n background-color: #1565c0;\n }\n }\n\n &--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n &--create {\n background-color: #fff9c4;\n border-top: 1px solid #e0e0e0;\n\n &:hover {\n background-color: #fff59d;\n }\n\n &.combobox__item--highlighted {\n background-color: #fff176;\n }\n }\n}\n\n.combobox__create-label {\n color: #757575;\n font-size: 0.875rem;\n}\n\n.combobox__no-results {\n padding: 1rem;\n text-align: center;\n color: #757575;\n font-size: 0.875rem;\n}","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"],"version":3}
1	+ {"file":"xplor-combobox.js","mappings":"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","names":["XplorCombobox","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-combobox/xplor-combobox.scss?tag=xplor-combobox&encapsulation=scoped","src/components/xplor-combobox/xplor-combobox.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.combobox {\n position: relative;\n width: 100%;\n\n &--disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n\n &--readonly {\n .combobox__input {\n background-color: #f5f5f5;\n }\n }\n}\n\n.combobox__label {\n display: block;\n font-size: 0.875rem;\n font-weight: 500;\n color: #424242;\n margin-bottom: 0.5rem;\n}\n\n.combobox__input-wrapper {\n position: relative;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 0.5rem;\n border: 1px solid #bdbdbd;\n border-radius: 4px;\n padding: 0.5rem;\n background-color: #fff;\n transition: border-color 0.2s, box-shadow 0.2s;\n\n &:focus-within {\n border-color: #1976d2;\n box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);\n }\n}\n\n.combobox__chips {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n}\n\n.combobox__chip {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n padding: 0.25rem 0.5rem;\n background-color: #e8f5e9;\n border-radius: 16px;\n font-size: 0.875rem;\n color: #2e7d32;\n}\n\n.combobox__chip-label {\n line-height: 1;\n}\n\n.combobox__chip-remove {\n background: none;\n border: none;\n font-size: 1.25rem;\n line-height: 1;\n cursor: pointer;\n padding: 0;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #2e7d32;\n border-radius: 50%;\n transition: background-color 0.2s;\n\n &:hover:not(:disabled) {\n background-color: rgba(46, 125, 50, 0.1);\n }\n\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n}\n\n.combobox__input {\n flex: 1;\n min-width: 120px;\n border: none;\n outline: none;\n font-family: inherit;\n font-size: 1rem;\n padding: 0.25rem;\n background: transparent;\n color: #212121;\n\n &::placeholder {\n color: #9e9e9e;\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n\n &[readonly] {\n cursor: default;\n }\n}\n\n.combobox__actions {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n flex-shrink: 0;\n}\n\n.combobox__clear {\n background: none;\n border: none;\n font-size: 1.25rem;\n line-height: 1;\n cursor: pointer;\n padding: 0;\n width: 1.5rem;\n height: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #757575;\n border-radius: 50%;\n transition: background-color 0.2s;\n\n &:hover {\n background-color: #f5f5f5;\n color: #212121;\n }\n}\n\n.combobox__icon {\n font-size: 0.75rem;\n color: #757575;\n pointer-events: none;\n transition: transform 0.2s;\n\n .combobox--open & {\n transform: rotate(180deg);\n }\n}\n\n.combobox__dropdown {\n position: absolute;\n top: calc(100% + 4px);\n left: 0;\n right: 0;\n max-height: 300px;\n overflow-y: auto;\n background-color: #fff;\n border: 1px solid #e0e0e0;\n border-radius: 4px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n z-index: 1000;\n}\n\n.combobox__item {\n padding: 0.75rem 1rem;\n cursor: pointer;\n transition: background-color 0.2s;\n color: #212121;\n\n &:hover:not(&--disabled) {\n background-color: #f5f5f5;\n }\n\n &--highlighted {\n background-color: #e3f2fd;\n }\n\n &--selected {\n background-color: #1976d2;\n color: #fff;\n\n &:hover {\n background-color: #1565c0;\n }\n }\n\n &--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n &--create {\n background-color: #fff9c4;\n border-top: 1px solid #e0e0e0;\n\n &:hover {\n background-color: #fff59d;\n }\n\n &.combobox__item--highlighted {\n background-color: #fff176;\n }\n }\n}\n\n.combobox__create-label {\n color: #757575;\n font-size: 0.875rem;\n}\n\n.combobox__no-results {\n padding: 1rem;\n text-align: center;\n color: #757575;\n font-size: 0.875rem;\n}","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"],"version":3}

package/components/xplor-datatable.js CHANGED Viewed

@@ -179,18 +179,24 @@ const XplorDatatable$1 = /*@__PURE__*/ proxyCustomElement(class XplorDatatable e
                 '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())));
     }
     get el() { return this; }

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

	@@ -1 +1 @@
1	- {"file":"xplor-datatable.js","mappings":"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","names":["XplorDatatable","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-datatable/xplor-datatable.scss?tag=xplor-datatable&encapsulation=shadow","src/components/xplor-datatable/xplor-datatable.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n}\n\n.datatable-container {\n background: white;\n border: 1px solid #e3e4e5;\n border-radius: 8px;\n overflow: hidden;\n}\n\n.table-wrapper {\n width: 100%;\n overflow: auto;\n position: relative;\n\n &.has-height {\n max-height: 100%;\n }\n\n &.is-empty {\n min-height: 200px;\n }\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n background: white;\n\n thead {\n background: #f7f8f9;\n position: sticky;\n top: 0;\n z-index: 10;\n\n tr {\n border-bottom: 1px solid #e3e4e5;\n }\n\n th {\n padding: 12px 16px;\n text-align: left;\n font-size: 0.75rem;\n font-weight: 600;\n color: #1a1a1a;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n border-right: 1px solid #e3e4e5;\n white-space: nowrap;\n user-select: none;\n\n &:last-child {\n border-right: none;\n }\n\n &.sortable {\n cursor: pointer;\n transition: background-color 0.2s;\n\n &:hover {\n background: #eef0f1;\n }\n }\n\n &.sorted {\n background: #e5e7e9;\n }\n\n &.fixed {\n position: sticky;\n left: 0;\n z-index: 11;\n background: #f7f8f9;\n }\n\n &.align-left {\n text-align: left;\n }\n\n &.align-center {\n text-align: center;\n }\n\n &.align-right {\n text-align: right;\n }\n\n .header-content {\n display: flex;\n align-items: center;\n gap: 8px;\n justify-content: space-between;\n }\n\n .sort-icon {\n flex-shrink: 0;\n color: #999;\n transition: color 0.2s;\n\n &.active {\n color: #008480;\n }\n }\n }\n }\n\n tbody {\n tr {\n border-bottom: 1px solid #f0f0f0;\n transition: background-color 0.15s;\n\n &:last-child {\n border-bottom: 1px solid #e3e4e5;\n }\n\n &.clickable {\n cursor: pointer;\n }\n\n &.selected {\n background-color: rgba(0, 132, 128, 0.08);\n\n &:hover {\n background-color: rgba(0, 132, 128, 0.12);\n }\n }\n\n &.empty-row {\n cursor: default;\n\n &:hover {\n background: transparent;\n }\n }\n }\n\n td {\n padding: 12px 16px;\n font-size: 0.875rem;\n color: #333;\n border-right: 1px solid #f0f0f0;\n\n &:last-child {\n border-right: none;\n }\n\n &.align-left {\n text-align: left;\n }\n\n &.align-center {\n text-align: center;\n }\n\n &.align-right {\n text-align: right;\n }\n }\n\n .select-column {\n width: 50px;\n text-align: center;\n position: sticky;\n left: 0;\n background: inherit;\n z-index: 1;\n }\n }\n\n // Horizontal lines variant\n .horizontal-lines & {\n thead th {\n border-right: none;\n }\n\n tbody td {\n border-right: none;\n }\n\n tbody tr {\n border-bottom: 1px solid #e3e4e5;\n }\n }\n\n // Striped variant\n .striped & {\n tbody tr:nth-child(even) {\n background-color: #fafafa;\n\n &.selected {\n background-color: rgba(0, 132, 128, 0.08);\n }\n }\n }\n\n // Hover effect\n &.hover tbody tr:not(.empty-row):hover {\n background-color: #f5f5f5;\n\n &.selected {\n background-color: rgba(0, 132, 128, 0.12);\n }\n }\n}\n\n// Checkbox styling\n.checkbox-label {\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0;\n cursor: pointer;\n\n input[type='checkbox'] {\n width: 18px;\n height: 18px;\n cursor: pointer;\n accent-color: #008480;\n margin: 0;\n }\n}\n\n// Empty state\n.empty-state {\n text-align: center;\n padding: 40px 20px;\n color: #999;\n\n p {\n margin: 0;\n font-size: 0.875rem;\n }\n}\n\n// Skeleton loader\n.skeleton-loader {\n tr {\n cursor: default !important;\n\n &:hover {\n background: transparent !important;\n }\n }\n\n .skeleton {\n background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\n background-size: 200% 100%;\n animation: skeleton-loading 1.5s ease-in-out infinite;\n border-radius: 4px;\n\n &-text {\n height: 16px;\n width: 80%;\n }\n\n &-checkbox {\n height: 18px;\n width: 18px;\n margin: 0 auto;\n }\n }\n}\n\n@keyframes skeleton-loading {\n 0% {\n background-position: 200% 0;\n }\n\n 100% {\n background-position: -200% 0;\n }\n}\n\n// Footer\n.datatable-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n border-top: 1px solid #e3e4e5;\n background: #fafafa;\n flex-wrap: wrap;\n gap: 16px;\n\n .footer-info {\n font-size: 0.875rem;\n color: #666;\n }\n\n .footer-controls {\n display: flex;\n align-items: center;\n gap: 24px;\n flex-wrap: wrap;\n }\n\n .per-page-selector {\n label {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 0.875rem;\n color: #666;\n }\n\n select {\n padding: 4px 8px;\n border: 1px solid #d0d0d0;\n border-radius: 4px;\n background: white;\n font-size: 0.875rem;\n cursor: pointer;\n transition: border-color 0.2s;\n\n &:hover {\n border-color: #008480;\n }\n\n &:focus {\n outline: none;\n border-color: #008480;\n box-shadow: 0 0 0 2px rgba(0, 132, 128, 0.1);\n }\n }\n }\n\n .pagination-controls {\n display: flex;\n align-items: center;\n gap: 8px;\n\n .page-info {\n font-size: 0.875rem;\n color: #333;\n padding: 0 8px;\n }\n\n .pagination-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: 1px solid #d0d0d0;\n border-radius: 4px;\n background: white;\n color: #333;\n cursor: pointer;\n transition: all 0.2s;\n\n &:hover:not(:disabled) {\n border-color: #008480;\n background: #f0fffe;\n color: #008480;\n }\n\n &:active:not(:disabled) {\n background: #e0f9f8;\n }\n\n &:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n }\n\n svg {\n width: 16px;\n height: 16px;\n }\n }\n }\n}\n\n// Responsive adjustments\n@media (max-width: 768px) {\n .datatable-footer {\n flex-direction: column;\n align-items: stretch;\n\n .footer-controls {\n justify-content: space-between;\n }\n }\n}","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"],"version":3}
1	+ {"file":"xplor-datatable.js","mappings":"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","names":["XplorDatatable","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-datatable/xplor-datatable.scss?tag=xplor-datatable&encapsulation=shadow","src/components/xplor-datatable/xplor-datatable.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n}\n\n.datatable-container {\n background: white;\n border: 1px solid #e3e4e5;\n border-radius: 8px;\n overflow: hidden;\n}\n\n.table-wrapper {\n width: 100%;\n overflow: auto;\n position: relative;\n\n &.has-height {\n max-height: 100%;\n }\n\n &.is-empty {\n min-height: 200px;\n }\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n background: white;\n\n thead {\n background: #f7f8f9;\n position: sticky;\n top: 0;\n z-index: 10;\n\n tr {\n border-bottom: 1px solid #e3e4e5;\n }\n\n th {\n padding: 12px 16px;\n text-align: left;\n font-size: 0.75rem;\n font-weight: 600;\n color: #1a1a1a;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n border-right: 1px solid #e3e4e5;\n white-space: nowrap;\n user-select: none;\n\n &:last-child {\n border-right: none;\n }\n\n &.sortable {\n cursor: pointer;\n transition: background-color 0.2s;\n\n &:hover {\n background: #eef0f1;\n }\n }\n\n &.sorted {\n background: #e5e7e9;\n }\n\n &.fixed {\n position: sticky;\n left: 0;\n z-index: 11;\n background: #f7f8f9;\n }\n\n &.align-left {\n text-align: left;\n }\n\n &.align-center {\n text-align: center;\n }\n\n &.align-right {\n text-align: right;\n }\n\n .header-content {\n display: flex;\n align-items: center;\n gap: 8px;\n justify-content: space-between;\n }\n\n .sort-icon {\n flex-shrink: 0;\n color: #999;\n transition: color 0.2s;\n\n &.active {\n color: #008480;\n }\n }\n }\n }\n\n tbody {\n tr {\n border-bottom: 1px solid #f0f0f0;\n transition: background-color 0.15s;\n\n &:last-child {\n border-bottom: 1px solid #e3e4e5;\n }\n\n &.clickable {\n cursor: pointer;\n }\n\n &.selected {\n background-color: rgba(0, 132, 128, 0.08);\n\n &:hover {\n background-color: rgba(0, 132, 128, 0.12);\n }\n }\n\n &.empty-row {\n cursor: default;\n\n &:hover {\n background: transparent;\n }\n }\n }\n\n td {\n padding: 12px 16px;\n font-size: 0.875rem;\n color: #333;\n border-right: 1px solid #f0f0f0;\n\n &:last-child {\n border-right: none;\n }\n\n &.align-left {\n text-align: left;\n }\n\n &.align-center {\n text-align: center;\n }\n\n &.align-right {\n text-align: right;\n }\n }\n\n .select-column {\n width: 50px;\n text-align: center;\n position: sticky;\n left: 0;\n background: inherit;\n z-index: 1;\n }\n }\n\n // Horizontal lines variant\n .horizontal-lines & {\n thead th {\n border-right: none;\n }\n\n tbody td {\n border-right: none;\n }\n\n tbody tr {\n border-bottom: 1px solid #e3e4e5;\n }\n }\n\n // Striped variant\n .striped & {\n tbody tr:nth-child(even) {\n background-color: #fafafa;\n\n &.selected {\n background-color: rgba(0, 132, 128, 0.08);\n }\n }\n }\n\n // Hover effect\n &.hover tbody tr:not(.empty-row):hover {\n background-color: #f5f5f5;\n\n &.selected {\n background-color: rgba(0, 132, 128, 0.12);\n }\n }\n}\n\n// Checkbox styling\n.checkbox-label {\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0;\n cursor: pointer;\n\n input[type='checkbox'] {\n width: 18px;\n height: 18px;\n cursor: pointer;\n accent-color: #008480;\n margin: 0;\n }\n}\n\n// Empty state\n.empty-state {\n text-align: center;\n padding: 40px 20px;\n color: #999;\n\n p {\n margin: 0;\n font-size: 0.875rem;\n }\n}\n\n// Skeleton loader\n.skeleton-loader {\n tr {\n cursor: default !important;\n\n &:hover {\n background: transparent !important;\n }\n }\n\n .skeleton {\n background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\n background-size: 200% 100%;\n animation: skeleton-loading 1.5s ease-in-out infinite;\n border-radius: 4px;\n\n &-text {\n height: 16px;\n width: 80%;\n }\n\n &-checkbox {\n height: 18px;\n width: 18px;\n margin: 0 auto;\n }\n }\n}\n\n@keyframes skeleton-loading {\n 0% {\n background-position: 200% 0;\n }\n\n 100% {\n background-position: -200% 0;\n }\n}\n\n// Footer\n.datatable-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n border-top: 1px solid #e3e4e5;\n background: #fafafa;\n flex-wrap: wrap;\n gap: 16px;\n\n .footer-info {\n font-size: 0.875rem;\n color: #666;\n }\n\n .footer-controls {\n display: flex;\n align-items: center;\n gap: 24px;\n flex-wrap: wrap;\n }\n\n .per-page-selector {\n label {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 0.875rem;\n color: #666;\n }\n\n select {\n padding: 4px 8px;\n border: 1px solid #d0d0d0;\n border-radius: 4px;\n background: white;\n font-size: 0.875rem;\n cursor: pointer;\n transition: border-color 0.2s;\n\n &:hover {\n border-color: #008480;\n }\n\n &:focus {\n outline: none;\n border-color: #008480;\n box-shadow: 0 0 0 2px rgba(0, 132, 128, 0.1);\n }\n }\n }\n\n .pagination-controls {\n display: flex;\n align-items: center;\n gap: 8px;\n\n .page-info {\n font-size: 0.875rem;\n color: #333;\n padding: 0 8px;\n }\n\n .pagination-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: 1px solid #d0d0d0;\n border-radius: 4px;\n background: white;\n color: #333;\n cursor: pointer;\n transition: all 0.2s;\n\n &:hover:not(:disabled) {\n border-color: #008480;\n background: #f0fffe;\n color: #008480;\n }\n\n &:active:not(:disabled) {\n background: #e0f9f8;\n }\n\n &:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n }\n\n svg {\n width: 16px;\n height: 16px;\n }\n }\n }\n}\n\n// Responsive adjustments\n@media (max-width: 768px) {\n .datatable-footer {\n flex-direction: column;\n align-items: stretch;\n\n .footer-controls {\n justify-content: space-between;\n }\n }\n}","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"],"version":3}