npm - @xplor-education/core-stencil-components - Versions diffs - 2.0.0 - Mend

@xplor-education/core-stencil-components 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (724) hide show

package/dist/components/xplor-combobox.js.map ADDED Viewed

@@ -0,0 +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}

package/dist/components/xplor-datatable.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface XplorDatatable extends Components.XplorDatatable, HTMLElement {}
+export const XplorDatatable: {
+    prototype: XplorDatatable;
+    new (): XplorDatatable;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/xplor-datatable.js ADDED Viewed

@@ -0,0 +1,244 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+const xplorDatatableCss = "/* on mobile browsers, I set a width of 100% */\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  /* html[data-theme='office'] {\n    --color-primary: rgb(219, 59, 3);\n    --color-secondary: rgb(0, 119, 107);\n    --color-buttons: #89da59;\n    --color-typography: #ff320e;\n  }\n\n  html {\n    --color-primary: #db3b03;\n    --color-primary-50: #db3b03;\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgb(0, 119, 107);\n    --color-tertiary: rgb(128, 104, 186);\n  } */\n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    /* Fallback */\n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    /* Fallback */\n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n/* on large screens, I use a different layout, so 600px are sufficient */\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce {\n    width: 600px !important;\n  }\n}\nh1 {\n  color: var(--color-primary);\n  /* Header/H1 */\n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; /* 116.667% */\n}\n\nh2 {\n  color: var(--grey-1100252525, #252525);\n  /* Header/H2 Bold */\n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; /* 118.75% */\n  letter-spacing: 0.25px;\n}\n\nh3 {\n  color: var(--grey-1100252525, #252525);\n  /* Header/H3 */\n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; /* 133.333% */\n}\n\n.overline {\n  color: var(--grey-1100252525, #252525);\n  /* Overline/Regular */\n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; /* 133.333% */\n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol,\nul {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol li,\nul li {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list,\nul.mdc-list {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list li.mdc-list-item,\nul.mdc-list li.mdc-list-item {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label {\n  color: var(--Orange-900-Primary, #db3b03);\n  /* Caption 1/Regular */\n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; /* 133.333% */\n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded .mdc-text-field--outlined .mdc-notched-outline__notch {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused .mdc-notched-outline__notch {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n: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.table-wrapper.has-height {\n  max-height: 100%;\n}\n.table-wrapper.is-empty {\n  min-height: 200px;\n}\n\ntable {\n  width: 100%;\n  border-collapse: collapse;\n  background: white;\n}\ntable thead {\n  background: #f7f8f9;\n  position: sticky;\n  top: 0;\n  z-index: 10;\n}\ntable thead tr {\n  border-bottom: 1px solid #e3e4e5;\n}\ntable thead 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}\ntable thead th:last-child {\n  border-right: none;\n}\ntable thead th.sortable {\n  cursor: pointer;\n  transition: background-color 0.2s;\n}\ntable thead th.sortable:hover {\n  background: #eef0f1;\n}\ntable thead th.sorted {\n  background: #e5e7e9;\n}\ntable thead th.fixed {\n  position: sticky;\n  left: 0;\n  z-index: 11;\n  background: #f7f8f9;\n}\ntable thead th.align-left {\n  text-align: left;\n}\ntable thead th.align-center {\n  text-align: center;\n}\ntable thead th.align-right {\n  text-align: right;\n}\ntable thead th .header-content {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  justify-content: space-between;\n}\ntable thead th .sort-icon {\n  flex-shrink: 0;\n  color: #999;\n  transition: color 0.2s;\n}\ntable thead th .sort-icon.active {\n  color: #008480;\n}\ntable tbody tr {\n  border-bottom: 1px solid #f0f0f0;\n  transition: background-color 0.15s;\n}\ntable tbody tr:last-child {\n  border-bottom: 1px solid #e3e4e5;\n}\ntable tbody tr.clickable {\n  cursor: pointer;\n}\ntable tbody tr.selected {\n  background-color: rgba(0, 132, 128, 0.08);\n}\ntable tbody tr.selected:hover {\n  background-color: rgba(0, 132, 128, 0.12);\n}\ntable tbody tr.empty-row {\n  cursor: default;\n}\ntable tbody tr.empty-row:hover {\n  background: transparent;\n}\ntable tbody td {\n  padding: 12px 16px;\n  font-size: 0.875rem;\n  color: #333;\n  border-right: 1px solid #f0f0f0;\n}\ntable tbody td:last-child {\n  border-right: none;\n}\ntable tbody td.align-left {\n  text-align: left;\n}\ntable tbody td.align-center {\n  text-align: center;\n}\ntable tbody td.align-right {\n  text-align: right;\n}\ntable tbody .select-column {\n  width: 50px;\n  text-align: center;\n  position: sticky;\n  left: 0;\n  background: inherit;\n  z-index: 1;\n}\n.horizontal-lines table thead th {\n  border-right: none;\n}\n.horizontal-lines table tbody td {\n  border-right: none;\n}\n.horizontal-lines table tbody tr {\n  border-bottom: 1px solid #e3e4e5;\n}\n.striped table tbody tr:nth-child(even) {\n  background-color: #fafafa;\n}\n.striped table tbody tr:nth-child(even).selected {\n  background-color: rgba(0, 132, 128, 0.08);\n}\ntable.hover tbody tr:not(.empty-row):hover {\n  background-color: #f5f5f5;\n}\ntable.hover tbody tr:not(.empty-row):hover.selected {\n  background-color: rgba(0, 132, 128, 0.12);\n}\n\n.checkbox-label {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0;\n  cursor: pointer;\n}\n.checkbox-label input[type=checkbox] {\n  width: 18px;\n  height: 18px;\n  cursor: pointer;\n  accent-color: #008480;\n  margin: 0;\n}\n\n.empty-state {\n  text-align: center;\n  padding: 40px 20px;\n  color: #999;\n}\n.empty-state p {\n  margin: 0;\n  font-size: 0.875rem;\n}\n\n.skeleton-loader tr {\n  cursor: default !important;\n}\n.skeleton-loader tr:hover {\n  background: transparent !important;\n}\n.skeleton-loader .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.skeleton-loader .skeleton-text {\n  height: 16px;\n  width: 80%;\n}\n.skeleton-loader .skeleton-checkbox {\n  height: 18px;\n  width: 18px;\n  margin: 0 auto;\n}\n\n@keyframes skeleton-loading {\n  0% {\n    background-position: 200% 0;\n  }\n  100% {\n    background-position: -200% 0;\n  }\n}\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.datatable-footer .footer-info {\n  font-size: 0.875rem;\n  color: #666;\n}\n.datatable-footer .footer-controls {\n  display: flex;\n  align-items: center;\n  gap: 24px;\n  flex-wrap: wrap;\n}\n.datatable-footer .per-page-selector label {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 0.875rem;\n  color: #666;\n}\n.datatable-footer .per-page-selector 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.datatable-footer .per-page-selector select:hover {\n  border-color: #008480;\n}\n.datatable-footer .per-page-selector select:focus {\n  outline: none;\n  border-color: #008480;\n  box-shadow: 0 0 0 2px rgba(0, 132, 128, 0.1);\n}\n.datatable-footer .pagination-controls {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.datatable-footer .pagination-controls .page-info {\n  font-size: 0.875rem;\n  color: #333;\n  padding: 0 8px;\n}\n.datatable-footer .pagination-controls .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.datatable-footer .pagination-controls .pagination-btn:hover:not(:disabled) {\n  border-color: #008480;\n  background: #f0fffe;\n  color: #008480;\n}\n.datatable-footer .pagination-controls .pagination-btn:active:not(:disabled) {\n  background: #e0f9f8;\n}\n.datatable-footer .pagination-controls .pagination-btn:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n.datatable-footer .pagination-controls .pagination-btn svg {\n  width: 16px;\n  height: 16px;\n}\n\n@media (max-width: 768px) {\n  .datatable-footer {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .datatable-footer .footer-controls {\n    justify-content: space-between;\n  }\n}";
+const XplorDatatable$1 = /*@__PURE__*/ proxyCustomElement(class XplorDatatable extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.rowClick = createEvent(this, "rowClick");
+        this.xplorSelectionChange = createEvent(this, "xplorSelectionChange");
+        this.paginationChange = createEvent(this, "paginationChange");
+        this.sortChange = createEvent(this, "sortChange");
+        /**
+         * Array of column definitions for the table headers
+         */
+        this.headers = [];
+        /**
+         * Array of data items to display in the table
+         */
+        this.items = [];
+        /**
+         * Whether the table is in a loading state
+         */
+        this.loading = false;
+        /**
+         * Pagination configuration object
+         */
+        this.pagination = {
+            page: 1,
+            perpage: 10,
+            total: 0,
+        };
+        /**
+         * Array of selected items (for multiselect)
+         */
+        this.selected = [];
+        /**
+         * Enable row selection with checkboxes
+         */
+        this.canSelect = false;
+        /**
+         * Enable horizontal lines between rows
+         */
+        this.horizontalLines = true;
+        /**
+         * Enable striped row styling
+         */
+        this.striped = false;
+        /**
+         * Show skeleton loader when loading
+         */
+        this.skeletonLoader = true;
+        /**
+         * Enable hover effect on rows
+         */
+        this.hover = true;
+        /**
+         * Per page options for pagination
+         */
+        this.perPageOptions = [10, 25, 50, 100];
+        this.sortBy = null;
+        this.sortDirection = null;
+        this.internalSelected = new Set();
+        this.allSelected = false;
+        this.handleSort = (column) => {
+            if (column.sortable === false)
+                return;
+            if (this.sortBy === column.value) {
+                // Cycle through: asc -> desc -> null
+                if (this.sortDirection === 'asc') {
+                    this.sortDirection = 'desc';
+                }
+                else if (this.sortDirection === 'desc') {
+                    this.sortDirection = null;
+                    this.sortBy = null;
+                }
+            }
+            else {
+                this.sortBy = column.value;
+                this.sortDirection = 'asc';
+            }
+            this.sortChange.emit({
+                column: this.sortBy,
+                direction: this.sortDirection,
+            });
+        };
+        this.handleSelectAll = (e) => {
+            const target = e.target;
+            const checked = target.checked;
+            if (checked) {
+                this.items.forEach(item => this.internalSelected.add(item));
+            }
+            else {
+                this.internalSelected.clear();
+            }
+            this.allSelected = checked;
+            this.internalSelected = new Set(this.internalSelected);
+            this.xplorSelectionChange.emit(Array.from(this.internalSelected));
+        };
+        this.handleSelectOne = (e, item) => {
+            const target = e.target;
+            const checked = target.checked;
+            if (checked) {
+                this.internalSelected.add(item);
+            }
+            else {
+                this.internalSelected.delete(item);
+            }
+            this.internalSelected = new Set(this.internalSelected);
+            this.updateAllSelectedState();
+            this.xplorSelectionChange.emit(Array.from(this.internalSelected));
+        };
+        this.handleRowClick = (item, e) => {
+            // Don't trigger row click if clicking on checkbox or interactive elements
+            const target = e.target;
+            if (target.tagName === 'INPUT' || target.closest('input')) {
+                return;
+            }
+            this.rowClick.emit(item);
+        };
+        this.handlePageChange = (newPage) => {
+            const updatedPagination = Object.assign(Object.assign({}, this.pagination), { page: newPage });
+            this.paginationChange.emit(updatedPagination);
+        };
+        this.handlePerPageChange = (e) => {
+            const target = e.target;
+            const perpage = parseInt(target.value, 10);
+            if (!isNaN(perpage)) {
+                const updatedPagination = Object.assign(Object.assign({}, this.pagination), { page: 1, // Reset to first page
+                    perpage });
+                this.paginationChange.emit(updatedPagination);
+            }
+        };
+    }
+    componentWillLoad() {
+        this.internalSelected = new Set(this.selected);
+    }
+    watchSelected(newSelected) {
+        this.internalSelected = new Set(newSelected);
+        this.updateAllSelectedState();
+    }
+    watchItems() {
+        this.updateAllSelectedState();
+    }
+    updateAllSelectedState() {
+        if (this.items.length === 0) {
+            this.allSelected = false;
+            return;
+        }
+        this.allSelected = this.items.every(item => this.internalSelected.has(item));
+    }
+    getSortIcon(column) {
+        if (this.sortBy !== column.value) {
+            return (h("svg", { class: "sort-icon", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M8 3L11 6H5L8 3Z", fill: "currentColor", opacity: "0.3" }), h("path", { d: "M8 13L5 10H11L8 13Z", fill: "currentColor", opacity: "0.3" })));
+        }
+        if (this.sortDirection === 'asc') {
+            return (h("svg", { class: "sort-icon active", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M8 3L11 6H5L8 3Z", fill: "currentColor" }), h("path", { d: "M8 13L5 10H11L8 13Z", fill: "currentColor", opacity: "0.3" })));
+        }
+        return (h("svg", { class: "sort-icon active", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M8 3L11 6H5L8 3Z", fill: "currentColor", opacity: "0.3" }), h("path", { d: "M8 13L5 10H11L8 13Z", fill: "currentColor" })));
+    }
+    ;
+    renderSkeletonLoader() {
+        return (h("tbody", { class: "skeleton-loader" }, Array.from({ length: this.pagination.perpage }).map(() => (h("tr", null, this.canSelect && (h("td", null, h("div", { class: "skeleton skeleton-checkbox" }))), this.headers.map(() => (h("td", null, h("div", { class: "skeleton skeleton-text" })))))))));
+    }
+    renderPagination() {
+        const totalPages = Math.ceil(this.pagination.total / this.pagination.perpage);
+        const currentPage = this.pagination.page;
+        const start = (currentPage - 1) * this.pagination.perpage + 1;
+        const end = Math.min(currentPage * this.pagination.perpage, this.pagination.total);
+        return (h("div", { class: "datatable-footer" }, h("div", { class: "footer-info" }, this.pagination.total > 0 ? (h("span", null, "Showing ", start, " to ", end, " of ", this.pagination.total, " entries")) : (h("span", null, "No entries"))), h("div", { class: "footer-controls" }, h("div", { class: "per-page-selector" }, h("label", null, "Rows per page:", h("select", { onInput: this.handlePerPageChange }, this.perPageOptions.map(option => (h("option", { value: option, selected: option === this.pagination.perpage }, option)))))), h("div", { class: "pagination-controls" }, h("button", { class: "pagination-btn", disabled: currentPage === 1, onClick: () => this.handlePageChange(1), "aria-label": "First page" }, h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M11 12L7 8L11 4M5 4V12", stroke: "currentColor", "stroke-width": "1.5" }))), h("button", { class: "pagination-btn", disabled: currentPage === 1, onClick: () => this.handlePageChange(currentPage - 1), "aria-label": "Previous page" }, h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M10 12L6 8L10 4", stroke: "currentColor", "stroke-width": "1.5" }))), h("span", { class: "page-info" }, "Page ", currentPage, " of ", totalPages || 1), h("button", { class: "pagination-btn", disabled: currentPage >= totalPages, onClick: () => this.handlePageChange(currentPage + 1), "aria-label": "Next page" }, h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M6 4L10 8L6 12", stroke: "currentColor", "stroke-width": "1.5" }))), h("button", { class: "pagination-btn", disabled: currentPage >= totalPages, onClick: () => this.handlePageChange(totalPages), "aria-label": "Last page" }, h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M5 4L9 8L5 12M11 4V12", stroke: "currentColor", "stroke-width": "1.5" })))))));
+    }
+    render() {
+        const tableHeight = typeof this.height === 'number' ? `${this.height}px` : this.height;
+        const hasHeight = !!this.height;
+        return (h(Host, { key: '779f32a211bb2d9d5d70363112970f00d62d9ccf', class: "xplor-datatable" }, h("div", { key: '27995dd2f98074fe0bd223b52ae3b25cc48a8ab6', class: "datatable-container" }, h("div", { key: '379d7b6999df3d94e2fa6618394e14fa9e99d96b', class: {
+                'table-wrapper': true,
+                'has-height': hasHeight,
+                '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: {
+                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 => {
+            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]))))));
+        })))))), this.pagination && this.pagination.total > 0 && this.renderPagination())));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "selected": ["watchSelected"],
+        "items": ["watchItems"]
+    }; }
+    static get style() { return xplorDatatableCss; }
+}, [1, "xplor-datatable", {
+        "headers": [16],
+        "items": [16],
+        "loading": [4],
+        "pagination": [16],
+        "selected": [16],
+        "canSelect": [4, "can-select"],
+        "horizontalLines": [4, "horizontal-lines"],
+        "striped": [4],
+        "height": [8],
+        "skeletonLoader": [4, "skeleton-loader"],
+        "hover": [4],
+        "perPageOptions": [16, "per-page-options"],
+        "sortBy": [32],
+        "sortDirection": [32],
+        "internalSelected": [32],
+        "allSelected": [32]
+    }, undefined, {
+        "selected": ["watchSelected"],
+        "items": ["watchItems"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-datatable"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-datatable":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorDatatable$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+const XplorDatatable = XplorDatatable$1;
+const defineCustomElement = defineCustomElement$1;
+export { XplorDatatable, defineCustomElement };
+//# sourceMappingURL=xplor-datatable.js.map
+//# sourceMappingURL=xplor-datatable.js.map

package/dist/components/xplor-datatable.js.map ADDED Viewed

@@ -0,0 +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}

package/dist/components/xplor-date-picker.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface XplorDatePicker extends Components.XplorDatePicker, HTMLElement {}
+export const XplorDatePicker: {
+    prototype: XplorDatePicker;
+    new (): XplorDatePicker;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;