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

@xplor-education/core-stencil-components 2.0.0 → 2.1.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 (122) hide show

package/components/xplor-input-file.js CHANGED Viewed

@@ -82,7 +82,7 @@ const XplorInputFile$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputFile e
         };
         const visibleFiles = this.selectedFiles.slice(0, this.maxChips);
         const additionalCount = this.selectedFiles.length - this.maxChips;
-        return (h(Host, { key: '40fb5f31ec8451dc63096f535164de6f6eb11014' }, h("div", { key: 'b52686901e2d3bbd56cfb0ee3088bfbf5f8ec365', class: containerClasses }, this.label && (h("label", { key: 'f73832f4c1a8f41690db70e301474d56c6c969b7', class: "xplor-input-file__label" }, this.label)), h("div", { key: '46512b939981a4b4f07ad87f5f9c82c9acb0e7a2', class: "xplor-input-file__field" }, h("span", { key: 'd30c938dff0d36ab2973ce69c29388ed6391317d', class: "xplor-input-file__icon" }, this.prependInnerIcon), h("div", { key: '9d6bb0b0e5ec09e81f9ee57360d84f2239bf5270', class: "xplor-input-file__content" }, this.selectedFiles.length === 0 ? (h("span", { class: "xplor-input-file__placeholder" }, this.placeholder)) : (h("div", { class: "xplor-input-file__chips" }, visibleFiles.map((file) => (h("div", { class: "xplor-input-file__chip", key: file.name }, h("span", { class: "xplor-input-file__chip-text" }, file.name), this.showSize && file.size && (h("span", { class: "xplor-input-file__chip-size" }, "(", this.formatFileSize(file.size), ")"))))), additionalCount > 0 && (h("span", { class: "xplor-input-file__additional" }, "+", additionalCount, " additional file", additionalCount > 1 ? 's' : ''))))), this.selectedFiles.length > 0 && !this.disabled && (h("button", { key: 'a1300d4dce7eed67552774efeb8edc8ce1a41dd7', type: "button", class: "xplor-input-file__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715")), h("input", { key: '41285fdb00cc6e52466b665d5c1fd5bbb4fc54e1', ref: (el) => (this.fileInputRef = el), type: "file", class: "xplor-input-file__input", multiple: this.multiple, accept: this.accept, disabled: this.disabled, onChange: this.handleFileChange })), this.counter && this.selectedFiles.length > 0 && (h("div", { key: 'e11fcc8dab8fb8d73fda9f6b82f2187e65ba61c2', class: "xplor-input-file__counter" }, this.selectedFiles.length, " file", this.selectedFiles.length > 1 ? 's' : '', " selected")))));
+        return (h(Host, { key: 'b8022fdd28a3e0087bc2a044856c3013d1f32245' }, h("div", { key: '11c0494c76f5aed1fe03cff7b706c7bc809becda', class: containerClasses }, this.label && (h("label", { key: 'fca295123c0766e9ff4b1ae28abfc2662a345992', class: "xplor-input-file__label" }, this.label)), h("div", { key: 'a63356f0857b420f1f707caa2e5e6ac587616949', class: "xplor-input-file__field" }, h("span", { key: 'f2b6f89f35d36a71a4c2bae38175cd16f897102d', class: "xplor-input-file__icon" }, this.prependInnerIcon), h("div", { key: '0b6b59139696a1a1e9aee3f10b7069743f4d1934', class: "xplor-input-file__content" }, this.selectedFiles.length === 0 ? (h("span", { class: "xplor-input-file__placeholder" }, this.placeholder)) : (h("div", { class: "xplor-input-file__chips" }, visibleFiles.map((file) => (h("div", { class: "xplor-input-file__chip", key: file.name }, h("span", { class: "xplor-input-file__chip-text" }, file.name), this.showSize && file.size && (h("span", { class: "xplor-input-file__chip-size" }, "(", this.formatFileSize(file.size), ")"))))), additionalCount > 0 && (h("span", { class: "xplor-input-file__additional" }, "+", additionalCount, " additional file", additionalCount > 1 ? 's' : ''))))), this.selectedFiles.length > 0 && !this.disabled && (h("button", { key: 'b0f312f157de2caf74c8c630d7c109fb6af4d7c0', type: "button", class: "xplor-input-file__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715")), h("input", { key: '1b36ee20fe74f12cb0634fa8a6f11f0b18a8869c', ref: (el) => (this.fileInputRef = el), type: "file", class: "xplor-input-file__input", multiple: this.multiple, accept: this.accept, disabled: this.disabled, onChange: this.handleFileChange })), this.counter && this.selectedFiles.length > 0 && (h("div", { key: '3db41f5660476718819e7315edbc59a9fa834178', class: "xplor-input-file__counter" }, this.selectedFiles.length, " file", this.selectedFiles.length > 1 ? 's' : '', " selected")))));
     }
     static get style() { return xplorInputFileCss; }
 }, [2, "xplor-input-file", {

package/components/xplor-input-search.js CHANGED Viewed

@@ -52,9 +52,9 @@ const XplorInputSearch$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputSear
             'xplor-input-search--focused': this.isFocused,
             'xplor-input-search--disabled': this.disabled,
         };
-        return (h(Host, { key: 'c608c1ad9c73dc708aaf5d985b0e376ad7923b59' }, h("div", { key: '8efabc2eea7bf741658a8d01f4b6ed14b259de82', class: containerClasses }, h("div", { key: '82384b7cf2967ca26e8d3b1358a5c9266fa09f20', class: "xplor-input-search__field" }, h("input", { key: '57a6c1dc9fff69f25bd75ad78e9c092e593cbee1', type: "text", class: "xplor-input-search__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), style: {
+        return (h(Host, { key: '5b56e2a7105a8046e9d8a0260e4ccc3e3f74f2d1' }, h("div", { key: '1056cd0367b2a02a9ca0b6327ee64fe451aa822f', class: containerClasses }, h("div", { key: 'b52566008beabead371696c73213c0c44d71caad', class: "xplor-input-search__field" }, h("input", { key: '59c5434a7cedc56128d8acb5d3718e89a4521f60', type: "text", class: "xplor-input-search__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), style: {
                 backgroundColor: this.bgColor,
-            } }), h("slot", { key: '8656098e81af32b857589443a89f009791429d2d', name: "append-inner" }, h("button", { key: 'ca36754aec41e189e4b870103fe82efb8667d895', type: "button", class: "xplor-input-search__button", onClick: this.handleSearch, disabled: this.disabled, "data-testid": "input-search-button" }, h("svg", { key: '3e5f9f080c757f46e17641c549bfda7eeb0d9b30', viewBox: "0 0 24 24", class: "xplor-input-search__icon" }, h("path", { key: 'c5814684ea375fe19074f47234cc11f919a4db5c', d: "M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" }))))))));
+            } }), h("slot", { key: '8a1ff9183e52e0b1907a2d592cf26ce92b8c3eb2', name: "append-inner" }, h("button", { key: '9680a805a44074e1ca6544fc6cc1b6dc56b3cd3c', type: "button", class: "xplor-input-search__button", onClick: this.handleSearch, disabled: this.disabled, "data-testid": "input-search-button" }, h("svg", { key: 'b5889fd0aed963aa7f31a11fa705597caaa3d000', viewBox: "0 0 24 24", class: "xplor-input-search__icon" }, h("path", { key: '78cd1c79a24b46b662d3be5bea287db253c0abe9', d: "M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" }))))))));
     }
     static get style() { return xplorInputSearchCss; }
 }, [6, "xplor-input-search", {

package/components/xplor-input-select.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
-const xplorInputSelectCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\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    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \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.sc-xplor-input-select {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-input-select {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-input-select {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-input-select {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-input-select {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-input-select {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-input-select, ul.sc-xplor-input-select {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-input-select li.sc-xplor-input-select, ul.sc-xplor-input-select li.sc-xplor-input-select {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-input-select, ul.mdc-list.sc-xplor-input-select {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-input-select li.mdc-list-item.sc-xplor-input-select, ul.mdc-list.sc-xplor-input-select li.mdc-list-item.sc-xplor-input-select {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-input-select {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \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.sc-xplor-input-select {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-input-select {\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.sc-xplor-input-select {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-input-select .mdc-text-field--outlined.sc-xplor-input-select .mdc-notched-outline__notch.sc-xplor-input-select {\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.sc-xplor-input-select .mdc-notched-outline__notch.sc-xplor-input-select {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-input-select .mdc-notched-outline.sc-xplor-input-select .mdc-notched-outline__notch.sc-xplor-input-select {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-input-select {\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.sc-xplor-input-select:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-input-select {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-input-select-h {\n  display: block;\n}\n\n.xplor-input-select.sc-xplor-input-select {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n.xplor-input-select__label.sc-xplor-input-select {\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.6);\n  margin-bottom: 0.25rem;\n}\n.xplor-input-select__required.sc-xplor-input-select {\n  color: #d32f2f;\n  margin-left: 0.25rem;\n}\n.xplor-input-select__field.sc-xplor-input-select {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.875rem 1rem;\n  border: 1px solid rgba(0, 0, 0, 0.23);\n  border-radius: 1rem;\n  background-color: white;\n  cursor: pointer;\n  transition: border-color 0.2s ease;\n  gap: 0.5rem;\n}\n.xplor-input-select__field.sc-xplor-input-select:hover:not(.xplor-input-select--disabled .xplor-input-select__field) {\n  border-color: rgba(0, 0, 0, 0.6);\n}\n.xplor-input-select--open.sc-xplor-input-select .xplor-input-select__field.sc-xplor-input-select {\n  border-color: #008480;\n  border-width: 2px;\n  padding: calc(0.875rem - 1px) calc(1rem - 1px);\n}\n.xplor-input-select--error.sc-xplor-input-select .xplor-input-select__field.sc-xplor-input-select {\n  border-color: #d32f2f;\n}\n.xplor-input-select--disabled.sc-xplor-input-select .xplor-input-select__field.sc-xplor-input-select {\n  background-color: rgba(0, 0, 0, 0.04);\n  cursor: not-allowed;\n}\n.xplor-input-select--disabled.sc-xplor-input-select .xplor-input-select__value.sc-xplor-input-select {\n  color: rgba(0, 0, 0, 0.38);\n}\n.xplor-input-select__value.sc-xplor-input-select {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: rgba(0, 0, 0, 0.87);\n}\n.xplor-input-select__arrow.sc-xplor-input-select {\n  font-size: 0.75rem;\n  color: rgba(0, 0, 0, 0.54);\n  transition: transform 0.2s ease;\n  flex-shrink: 0;\n}\n.xplor-input-select__menu.sc-xplor-input-select {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  margin-top: 0.25rem;\n  max-height: 300px;\n  overflow-y: auto;\n  background-color: white;\n  border-radius: 0.5rem;\n  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);\n  z-index: 1000;\n}\n.xplor-input-select__empty.sc-xplor-input-select {\n  padding: 1rem;\n  text-align: center;\n  color: rgba(0, 0, 0, 0.6);\n}\n.xplor-input-select__option.sc-xplor-input-select {\n  display: flex;\n  align-items: center;\n  padding: 0.875rem 1.25rem;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n  gap: 0.75rem;\n}\n.xplor-input-select__option.sc-xplor-input-select:hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.xplor-input-select__option--selected.sc-xplor-input-select {\n  background-color: rgba(0, 132, 128, 0.08);\n}\n.xplor-input-select__checkbox.sc-xplor-input-select {\n  flex-shrink: 0;\n  width: 1.125rem;\n  height: 1.125rem;\n  cursor: pointer;\n}\n.xplor-input-select__option-content.sc-xplor-input-select {\n  flex: 1;\n  min-width: 0;\n}\n.xplor-input-select__option-title.sc-xplor-input-select {\n  font-size: 1rem;\n  color: rgba(0, 0, 0, 0.87);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.xplor-input-select__option-subtitle.sc-xplor-input-select {\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.6);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.xplor-input-select__details.sc-xplor-input-select {\n  min-height: 1.25rem;\n  padding: 0 1rem;\n  font-size: 0.75rem;\n}\n.xplor-input-select__error-message.sc-xplor-input-select {\n  color: #d32f2f;\n}\n.xplor-input-select__helper-text.sc-xplor-input-select {\n  color: rgba(0, 0, 0, 0.6);\n}";
+const xplorInputSelectCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\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    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \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.sc-xplor-input-select {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-input-select {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-input-select {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-input-select {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-input-select {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-input-select {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-input-select, ul.sc-xplor-input-select {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-input-select li.sc-xplor-input-select, ul.sc-xplor-input-select li.sc-xplor-input-select {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-input-select, ul.mdc-list.sc-xplor-input-select {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-input-select li.mdc-list-item.sc-xplor-input-select, ul.mdc-list.sc-xplor-input-select li.mdc-list-item.sc-xplor-input-select {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-input-select {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \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.sc-xplor-input-select {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-input-select {\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.sc-xplor-input-select {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-input-select .mdc-text-field--outlined.sc-xplor-input-select .mdc-notched-outline__notch.sc-xplor-input-select {\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.sc-xplor-input-select .mdc-notched-outline__notch.sc-xplor-input-select {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-input-select .mdc-notched-outline.sc-xplor-input-select .mdc-notched-outline__notch.sc-xplor-input-select {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-input-select {\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.sc-xplor-input-select:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-input-select {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-input-select-h {\n  display: block;\n}\n\n.xplor-input-select.sc-xplor-input-select {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n.xplor-input-select__label.sc-xplor-input-select {\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.6);\n  margin-bottom: 0.25rem;\n}\n.xplor-input-select__required.sc-xplor-input-select {\n  color: #d32f2f;\n  margin-left: 0.25rem;\n}\n.xplor-input-select__field.sc-xplor-input-select {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.875rem 1rem;\n  border: 1px solid rgba(0, 0, 0, 0.23);\n  border-radius: 1rem;\n  background-color: white;\n  cursor: pointer;\n  transition: border-color 0.2s ease;\n  gap: 0.5rem;\n}\n.xplor-input-select__field.sc-xplor-input-select:hover:not(.xplor-input-select--disabled .xplor-input-select__field) {\n  border-color: rgba(0, 0, 0, 0.6);\n}\n.xplor-input-select--open.sc-xplor-input-select .xplor-input-select__field.sc-xplor-input-select {\n  border-color: #008480;\n  border-width: 2px;\n  padding: calc(0.875rem - 1px) calc(1rem - 1px);\n}\n.xplor-input-select--error.sc-xplor-input-select .xplor-input-select__field.sc-xplor-input-select {\n  border-color: #d32f2f;\n}\n.xplor-input-select--disabled.sc-xplor-input-select .xplor-input-select__field.sc-xplor-input-select {\n  background-color: rgba(0, 0, 0, 0.04);\n  cursor: not-allowed;\n}\n.xplor-input-select--disabled.sc-xplor-input-select .xplor-input-select__value.sc-xplor-input-select {\n  color: rgba(0, 0, 0, 0.38);\n}\n.xplor-input-select__value.sc-xplor-input-select {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: rgba(0, 0, 0, 0.87);\n}\n.xplor-input-select__arrow.sc-xplor-input-select {\n  font-size: 0.75rem;\n  color: rgba(0, 0, 0, 0.54);\n  transition: transform 0.2s ease;\n  flex-shrink: 0;\n}\n.xplor-input-select__menu.sc-xplor-input-select {\n  max-height: 300px;\n  overflow-y: auto;\n  background-color: white;\n  border-radius: 0.5rem;\n  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);\n  z-index: 9999;\n}\n.xplor-input-select__empty.sc-xplor-input-select {\n  padding: 1rem;\n  text-align: center;\n  color: rgba(0, 0, 0, 0.6);\n}\n.xplor-input-select__option.sc-xplor-input-select {\n  display: flex;\n  align-items: center;\n  padding: 0.875rem 1.25rem;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n  gap: 0.75rem;\n}\n.xplor-input-select__option.sc-xplor-input-select:hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.xplor-input-select__option--selected.sc-xplor-input-select {\n  background-color: rgba(0, 132, 128, 0.08);\n}\n.xplor-input-select__checkbox.sc-xplor-input-select {\n  flex-shrink: 0;\n  width: 1.125rem;\n  height: 1.125rem;\n  cursor: pointer;\n}\n.xplor-input-select__option-content.sc-xplor-input-select {\n  flex: 1;\n  min-width: 0;\n}\n.xplor-input-select__option-title.sc-xplor-input-select {\n  font-size: 1rem;\n  color: rgba(0, 0, 0, 0.87);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.xplor-input-select__option-subtitle.sc-xplor-input-select {\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.6);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.xplor-input-select__details.sc-xplor-input-select {\n  min-height: 1.25rem;\n  padding: 0 1rem;\n  font-size: 0.75rem;\n}\n.xplor-input-select__error-message.sc-xplor-input-select {\n  color: #d32f2f;\n}\n.xplor-input-select__helper-text.sc-xplor-input-select {\n  color: rgba(0, 0, 0, 0.6);\n}";
 const XplorInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputSelect extends H {
     constructor() {
@@ -61,6 +61,17 @@ const XplorInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputSele
         this.required = false;
         this.isOpen = false;
         this.isFocused = false;
+        this.menuPosition = null;
+        this.updateMenuPosition = () => {
+            if (this.fieldRef) {
+                const rect = this.fieldRef.getBoundingClientRect();
+                this.menuPosition = {
+                    top: rect.bottom + 4,
+                    left: rect.left,
+                    width: rect.width,
+                };
+            }
+        };
         this.handleOutsideClick = (event) => {
             if (this.selectRef && !this.selectRef.contains(event.target)) {
                 this.isOpen = false;
@@ -68,6 +79,9 @@ const XplorInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputSele
         };
         this.toggleDropdown = () => {
             if (!this.disabled && !this.readonly) {
+                if (!this.isOpen) {
+                    this.updateMenuPosition();
+                }
                 this.isOpen = !this.isOpen;
             }
         };
@@ -122,10 +136,15 @@ const XplorInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputSele
             'xplor-input-select--error': !!this.error,
         };
         const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
-        return (h(Host, { key: '186b55603079f4fec337dc824c2e3a4776472ae6' }, h("div", { key: '07d765115aa286e8da1f13fc76f55c6c6e9008c1', class: containerClasses, ref: (el) => (this.selectRef = el) }, this.label && (h("label", { key: '6e1116ba611eee1673ffdb71c5bb15455afd5921', class: "xplor-input-select__label" }, this.label, this.required && h("span", { key: '77cefc98c67261ebcddac9c179f01cd6615306e8', class: "xplor-input-select__required" }, "*"))), h("div", { key: 'b65e671edced0c0f1780ecdd74cc23197310a550', class: "xplor-input-select__field", onClick: this.toggleDropdown }, h("div", { key: '52e7b58288c7d4c7ad4d505ae03f75204d461f15', class: "xplor-input-select__value" }, this.getDisplayValue()), h("span", { key: '7c780d75bc62648aed641e0d4be4e4d55065099b', class: "xplor-input-select__arrow" }, this.isOpen ? '▲' : '▼')), this.isOpen && (h("div", { key: '809f4c0254c09d61cdf597e467daf8d1f5f7667c', class: "xplor-input-select__menu" }, this.options.length === 0 ? (h("div", { class: "xplor-input-select__empty" }, "No options available")) : (this.options.map((option) => (h("div", { key: option.value, class: {
+        return (h(Host, { key: 'e5865a9d55129458a5357cf05f15115f1007019b' }, h("div", { key: '66d54f5d1bb7514301427de3ad5bbf7746309cec', class: containerClasses, ref: (el) => (this.selectRef = el) }, this.label && (h("label", { key: 'dfa166182add3a83872a05e4a20b77f654921231', class: "xplor-input-select__label" }, this.label, this.required && h("span", { key: '0da6997f30e1861b35e67e80974fce115560cc9b', class: "xplor-input-select__required" }, "*"))), h("div", { key: 'f828546abc6121bcabcdbc905a0e43aa012bb5a9', class: "xplor-input-select__field", onClick: this.toggleDropdown, ref: (el) => (this.fieldRef = el) }, h("div", { key: '13692cc57a5c3c1da3915ca80f8324d091732ebb', class: "xplor-input-select__value" }, this.getDisplayValue()), h("span", { key: '0a372cf751bc459d957130c50fb4387405e9f21f', class: "xplor-input-select__arrow" }, this.isOpen ? '▲' : '▼')), this.isOpen && this.menuPosition && (h("div", { key: '13e8536c6ce8220041364675d459dc2ee3ef7613', class: "xplor-input-select__menu", style: {
+                position: 'fixed',
+                top: `${this.menuPosition.top}px`,
+                left: `${this.menuPosition.left}px`,
+                width: `${this.menuPosition.width}px`,
+            } }, this.options.length === 0 ? (h("div", { class: "xplor-input-select__empty" }, "No options available")) : (this.options.map((option) => (h("div", { key: option.value, class: {
                 'xplor-input-select__option': true,
                 'xplor-input-select__option--selected': this.isSelected(option),
-            }, onClick: () => this.handleOptionClick(option) }, this.multiple && (h("input", { type: "checkbox", class: "xplor-input-select__checkbox", checked: this.isSelected(option), readOnly: true })), h("div", { class: "xplor-input-select__option-content" }, h("div", { class: "xplor-input-select__option-title" }, option.title), option.subtitle && (h("div", { class: "xplor-input-select__option-subtitle" }, option.subtitle))))))))), showDetails && (h("div", { key: '73f7808a7261cce5b3dc6e28e9771d9d669835d7', class: "xplor-input-select__details" }, this.error && h("div", { key: '9e934df8f33b080fd528fa99d0c5a4cb78c8f03a', class: "xplor-input-select__error-message" }, this.error), !this.error && this.helperText && h("div", { key: '8c0bdbc7304c433cca0d85d09c213f6ccf5f3b29', class: "xplor-input-select__helper-text" }, this.helperText))))));
+            }, onClick: () => this.handleOptionClick(option) }, this.multiple && (h("input", { type: "checkbox", class: "xplor-input-select__checkbox", checked: this.isSelected(option), readOnly: true })), h("div", { class: "xplor-input-select__option-content" }, h("div", { class: "xplor-input-select__option-title" }, option.title), option.subtitle && (h("div", { class: "xplor-input-select__option-subtitle" }, option.subtitle))))))))), showDetails && (h("div", { key: '240b60564cf80cc66b879bb4431885270c64db5b', class: "xplor-input-select__details" }, this.error && h("div", { key: 'bbb2a2e796650c153e901aa87188a386c2f5b9f7', class: "xplor-input-select__error-message" }, this.error), !this.error && this.helperText && h("div", { key: 'a36ccb1626e1b5a9d19f2ee106213fd943177aa8', class: "xplor-input-select__helper-text" }, this.helperText))))));
     }
     static get style() { return xplorInputSelectCss; }
 }, [2, "xplor-input-select", {
@@ -143,7 +162,8 @@ const XplorInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputSele
         "helperText": [1, "helper-text"],
         "required": [4],
         "isOpen": [32],
-        "isFocused": [32]
+        "isFocused": [32],
+        "menuPosition": [32]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/components/xplor-input-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"xplor-input-select.js","mappings":"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","names":["XplorInputSelect","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-input-select/xplor-input-select.scss?tag=xplor-input-select&encapsulation=scoped","src/components/xplor-input-select/xplor-input-select.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.xplor-input-select {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n\n &__label {\n font-size: 0.875rem;\n color: rgba(0, 0, 0, 0.6);\n margin-bottom: 0.25rem;\n }\n\n &__required {\n color: #d32f2f;\n margin-left: 0.25rem;\n }\n\n &__field {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0.875rem 1rem;\n border: 1px solid rgba(0, 0, 0, 0.23);\n border-radius: 1rem;\n background-color: white;\n cursor: pointer;\n transition: border-color 0.2s ease;\n gap: 0.5rem;\n\n &:hover:not(.xplor-input-select--disabled &) {\n border-color: rgba(0, 0, 0, 0.6);\n }\n }\n\n &--open {\n .xplor-input-select__field {\n border-color: #008480;\n border-width: 2px;\n padding: calc(0.875rem - 1px) calc(1rem - 1px);\n }\n }\n\n &--error {\n .xplor-input-select__field {\n border-color: #d32f2f;\n }\n }\n\n &--disabled {\n .xplor-input-select__field {\n background-color: rgba(0, 0, 0, 0.04);\n cursor: not-allowed;\n }\n\n .xplor-input-select__value {\n color: rgba(0, 0, 0, 0.38);\n }\n }\n\n &__value {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: rgba(0, 0, 0, 0.87);\n }\n\n &__arrow {\n font-size: 0.75rem;\n color: rgba(0, 0, 0, 0.54);\n transition: transform 0.2s ease;\n flex-shrink: 0;\n }\n\n &__menu {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n margin-top: 0.25rem;\n max-height: 300px;\n overflow-y: auto;\n background-color: white;\n border-radius: 0.5rem;\n box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),\n 0px 8px 10px 1px rgba(0, 0, 0, 0.14),\n 0px 3px 14px 2px rgba(0, 0, 0, 0.12);\n z-index: 1000;\n }\n\n &__empty {\n padding: 1rem;\n text-align: center;\n color: rgba(0, 0, 0, 0.6);\n }\n\n &__option {\n display: flex;\n align-items: center;\n padding: 0.875rem 1.25rem;\n cursor: pointer;\n transition: background-color 0.2s ease;\n gap: 0.75rem;\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.04);\n }\n\n &--selected {\n background-color: rgba(0, 132, 128, 0.08);\n }\n }\n\n &__checkbox {\n flex-shrink: 0;\n width: 1.125rem;\n height: 1.125rem;\n cursor: pointer;\n }\n\n &__option-content {\n flex: 1;\n min-width: 0;\n }\n\n &__option-title {\n font-size: 1rem;\n color: rgba(0, 0, 0, 0.87);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &__option-subtitle {\n font-size: 0.875rem;\n color: rgba(0, 0, 0, 0.6);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &__details {\n min-height: 1.25rem;\n padding: 0 1rem;\n font-size: 0.75rem;\n }\n\n &__error-message {\n color: #d32f2f;\n }\n\n &__helper-text {\n color: rgba(0, 0, 0, 0.6);\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\n\nexport interface SelectOption {\n value: any;\n title: string;\n subtitle?: string;\n [key: string]: any;\n}\n\n@Component({\n tag: 'xplor-input-select',\n styleUrl: 'xplor-input-select.scss',\n scoped: true,\n})\nexport class XplorInputSelect {\n private selectRef: HTMLDivElement;\n\n /*\n Selected value(s)\n /\n @Prop({ mutable: true }) value: any \| any[] = null;\n\n /\n Input label\n /\n @Prop() label: string = '';\n\n /\n Input placeholder\n /\n @Prop() placeholder: string = 'Select...';\n\n /\n Options array\n /\n @Prop() options: SelectOption[] = [];\n\n /\n Whether multiple selection is allowed\n /\n @Prop() multiple: boolean = false;\n\n /\n Background color\n /\n @Prop() bgColor: string = 'white';\n\n /\n Border/focus color\n /\n @Prop() color: string = '#008480';\n\n /\n Whether the select is disabled\n /\n @Prop() disabled: boolean = false;\n\n /\n Whether the select is readonly\n /\n @Prop() readonly: boolean = false;\n\n /\n Whether to hide validation details\n /\n @Prop() hideDetails: boolean \| 'auto' = 'auto';\n\n /\n Error message\n /\n @Prop() error: string = '';\n\n /\n Helper text\n /\n @Prop() helperText: string = '';\n\n /\n Whether the input is required\n /\n @Prop() required: boolean = false;\n\n /\n Change event\n /\n @Event() xplorChange: EventEmitter<any>;\n\n @State() isOpen: boolean = false;\n @State() isFocused: boolean = false;\n\n componentDidLoad() {\n document.addEventListener('click', this.handleOutsideClick);\n }\n\n disconnectedCallback() {\n document.removeEventListener('click', this.handleOutsideClick);\n }\n\n private handleOutsideClick = (event: MouseEvent) => {\n if (this.selectRef && !this.selectRef.contains(event.target as Node)) {\n this.isOpen = false;\n }\n };\n\n private toggleDropdown = () => {\n if (!this.disabled && !this.readonly) {\n this.isOpen = !this.isOpen;\n }\n };\n\n private handleOptionClick = (option: SelectOption) => {\n if (this.multiple) {\n const currentValue = Array.isArray(this.value) ? this.value : [];\n const index = currentValue.findIndex((v) => v === option.value);\n\n if (index > -1) {\n this.value = currentValue.filter((_, i) => i !== index);\n } else {\n this.value = [...currentValue, option.value];\n }\n } else {\n this.value = option.value;\n this.isOpen = false;\n }\n\n this.xplorChange.emit(this.value);\n };\n\n private isSelected = (option: SelectOption): boolean => {\n if (this.multiple) {\n const currentValue = Array.isArray(this.value) ? this.value : [];\n return currentValue.includes(option.value);\n }\n return this.value === option.value;\n };\n\n private getDisplayValue = (): string => {\n if (this.multiple) {\n const currentValue = Array.isArray(this.value) ? this.value : [];\n if (currentValue.length === 0) return this.placeholder;\n\n const selectedOptions = this.options.filter((opt) =>\n currentValue.includes(opt.value)\n );\n return `${selectedOptions.length} selected`;\n }\n\n const selectedOption = this.options.find((opt) => opt.value === this.value);\n return selectedOption ? selectedOption.title : this.placeholder;\n };\n\n render() {\n const containerClasses = {\n 'xplor-input-select': true,\n 'xplor-input-select--open': this.isOpen,\n 'xplor-input-select--focused': this.isFocused,\n 'xplor-input-select--disabled': this.disabled,\n 'xplor-input-select--error': !!this.error,\n };\n\n const showDetails = this.hideDetails === false \|\| (this.hideDetails === 'auto' && (this.error \|\| this.helperText));\n\n return (\n <Host>\n <div class={containerClasses} ref={(el) => (this.selectRef = el)}>\n {this.label && (\n <label class=\"xplor-input-select__label\">\n {this.label}\n {this.required && <span class=\"xplor-input-select__required\"></span>}\n </label>\n )}\n\n <div class=\"xplor-input-select__field\" onClick={this.toggleDropdown}>\n <div class=\"xplor-input-select__value\">\n {this.getDisplayValue()}\n </div>\n <span class=\"xplor-input-select__arrow\">{this.isOpen ? '▲' : '▼'}</span>\n </div>\n\n {this.isOpen && (\n <div class=\"xplor-input-select__menu\">\n {this.options.length === 0 ? (\n <div class=\"xplor-input-select__empty\">No options available</div>\n ) : (\n this.options.map((option) => (\n <div\n key={option.value}\n class={{\n 'xplor-input-select__option': true,\n 'xplor-input-select__option--selected': this.isSelected(option),\n }}\n onClick={() => this.handleOptionClick(option)}\n >\n {this.multiple && (\n <input\n type=\"checkbox\"\n class=\"xplor-input-select__checkbox\"\n checked={this.isSelected(option)}\n readOnly\n />\n )}\n <div class=\"xplor-input-select__option-content\">\n <div class=\"xplor-input-select__option-title\">{option.title}</div>\n {option.subtitle && (\n <div class=\"xplor-input-select__option-subtitle\">{option.subtitle}</div>\n )}\n </div>\n </div>\n ))\n )}\n </div>\n )}\n\n {showDetails && (\n <div class=\"xplor-input-select__details\">\n {this.error && <div class=\"xplor-input-select__error-message\">{this.error}</div>}\n {!this.error && this.helperText && <div class=\"xplor-input-select__helper-text\">{this.helperText}</div>}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"xplor-input-select.js","mappings":"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","names":["XplorInputSelect","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-input-select/xplor-input-select.scss?tag=xplor-input-select&encapsulation=scoped","src/components/xplor-input-select/xplor-input-select.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.xplor-input-select {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n\n &__label {\n font-size: 0.875rem;\n color: rgba(0, 0, 0, 0.6);\n margin-bottom: 0.25rem;\n }\n\n &__required {\n color: #d32f2f;\n margin-left: 0.25rem;\n }\n\n &__field {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0.875rem 1rem;\n border: 1px solid rgba(0, 0, 0, 0.23);\n border-radius: 1rem;\n background-color: white;\n cursor: pointer;\n transition: border-color 0.2s ease;\n gap: 0.5rem;\n\n &:hover:not(.xplor-input-select--disabled &) {\n border-color: rgba(0, 0, 0, 0.6);\n }\n }\n\n &--open {\n .xplor-input-select__field {\n border-color: #008480;\n border-width: 2px;\n padding: calc(0.875rem - 1px) calc(1rem - 1px);\n }\n }\n\n &--error {\n .xplor-input-select__field {\n border-color: #d32f2f;\n }\n }\n\n &--disabled {\n .xplor-input-select__field {\n background-color: rgba(0, 0, 0, 0.04);\n cursor: not-allowed;\n }\n\n .xplor-input-select__value {\n color: rgba(0, 0, 0, 0.38);\n }\n }\n\n &__value {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: rgba(0, 0, 0, 0.87);\n }\n\n &__arrow {\n font-size: 0.75rem;\n color: rgba(0, 0, 0, 0.54);\n transition: transform 0.2s ease;\n flex-shrink: 0;\n }\n\n &__menu {\n max-height: 300px;\n overflow-y: auto;\n background-color: white;\n border-radius: 0.5rem;\n box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),\n 0px 8px 10px 1px rgba(0, 0, 0, 0.14),\n 0px 3px 14px 2px rgba(0, 0, 0, 0.12);\n z-index: 9999;\n }\n\n &__empty {\n padding: 1rem;\n text-align: center;\n color: rgba(0, 0, 0, 0.6);\n }\n\n &__option {\n display: flex;\n align-items: center;\n padding: 0.875rem 1.25rem;\n cursor: pointer;\n transition: background-color 0.2s ease;\n gap: 0.75rem;\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.04);\n }\n\n &--selected {\n background-color: rgba(0, 132, 128, 0.08);\n }\n }\n\n &__checkbox {\n flex-shrink: 0;\n width: 1.125rem;\n height: 1.125rem;\n cursor: pointer;\n }\n\n &__option-content {\n flex: 1;\n min-width: 0;\n }\n\n &__option-title {\n font-size: 1rem;\n color: rgba(0, 0, 0, 0.87);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &__option-subtitle {\n font-size: 0.875rem;\n color: rgba(0, 0, 0, 0.6);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &__details {\n min-height: 1.25rem;\n padding: 0 1rem;\n font-size: 0.75rem;\n }\n\n &__error-message {\n color: #d32f2f;\n }\n\n &__helper-text {\n color: rgba(0, 0, 0, 0.6);\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\n\nexport interface SelectOption {\n value: any;\n title: string;\n subtitle?: string;\n [key: string]: any;\n}\n\n@Component({\n tag: 'xplor-input-select',\n styleUrl: 'xplor-input-select.scss',\n scoped: true,\n})\nexport class XplorInputSelect {\n private selectRef: HTMLDivElement;\n private fieldRef: HTMLDivElement;\n\n /*\n Selected value(s)\n /\n @Prop({ mutable: true }) value: any \| any[] = null;\n\n /\n Input label\n /\n @Prop() label: string = '';\n\n /\n Input placeholder\n /\n @Prop() placeholder: string = 'Select...';\n\n /\n Options array\n /\n @Prop() options: SelectOption[] = [];\n\n /\n Whether multiple selection is allowed\n /\n @Prop() multiple: boolean = false;\n\n /\n Background color\n /\n @Prop() bgColor: string = 'white';\n\n /\n Border/focus color\n /\n @Prop() color: string = '#008480';\n\n /\n Whether the select is disabled\n /\n @Prop() disabled: boolean = false;\n\n /\n Whether the select is readonly\n /\n @Prop() readonly: boolean = false;\n\n /\n Whether to hide validation details\n /\n @Prop() hideDetails: boolean \| 'auto' = 'auto';\n\n /\n Error message\n /\n @Prop() error: string = '';\n\n /\n Helper text\n /\n @Prop() helperText: string = '';\n\n /\n Whether the input is required\n /\n @Prop() required: boolean = false;\n\n /\n Change event\n /\n @Event() xplorChange: EventEmitter<any>;\n\n @State() isOpen: boolean = false;\n @State() isFocused: boolean = false;\n @State() menuPosition: { top: number; left: number; width: number } = null;\n\n componentDidLoad() {\n document.addEventListener('click', this.handleOutsideClick);\n }\n\n disconnectedCallback() {\n document.removeEventListener('click', this.handleOutsideClick);\n }\n\n private updateMenuPosition = () => {\n if (this.fieldRef) {\n const rect = this.fieldRef.getBoundingClientRect();\n this.menuPosition = {\n top: rect.bottom + 4,\n left: rect.left,\n width: rect.width,\n };\n }\n };\n\n private handleOutsideClick = (event: MouseEvent) => {\n if (this.selectRef && !this.selectRef.contains(event.target as Node)) {\n this.isOpen = false;\n }\n };\n\n private toggleDropdown = () => {\n if (!this.disabled && !this.readonly) {\n if (!this.isOpen) {\n this.updateMenuPosition();\n }\n this.isOpen = !this.isOpen;\n }\n };\n\n private handleOptionClick = (option: SelectOption) => {\n if (this.multiple) {\n const currentValue = Array.isArray(this.value) ? this.value : [];\n const index = currentValue.findIndex((v) => v === option.value);\n\n if (index > -1) {\n this.value = currentValue.filter((_, i) => i !== index);\n } else {\n this.value = [...currentValue, option.value];\n }\n } else {\n this.value = option.value;\n this.isOpen = false;\n }\n\n this.xplorChange.emit(this.value);\n };\n\n private isSelected = (option: SelectOption): boolean => {\n if (this.multiple) {\n const currentValue = Array.isArray(this.value) ? this.value : [];\n return currentValue.includes(option.value);\n }\n return this.value === option.value;\n };\n\n private getDisplayValue = (): string => {\n if (this.multiple) {\n const currentValue = Array.isArray(this.value) ? this.value : [];\n if (currentValue.length === 0) return this.placeholder;\n\n const selectedOptions = this.options.filter((opt) =>\n currentValue.includes(opt.value)\n );\n return `${selectedOptions.length} selected`;\n }\n\n const selectedOption = this.options.find((opt) => opt.value === this.value);\n return selectedOption ? selectedOption.title : this.placeholder;\n };\n\n render() {\n const containerClasses = {\n 'xplor-input-select': true,\n 'xplor-input-select--open': this.isOpen,\n 'xplor-input-select--focused': this.isFocused,\n 'xplor-input-select--disabled': this.disabled,\n 'xplor-input-select--error': !!this.error,\n };\n\n const showDetails = this.hideDetails === false \|\| (this.hideDetails === 'auto' && (this.error \|\| this.helperText));\n\n return (\n <Host>\n <div class={containerClasses} ref={(el) => (this.selectRef = el)}>\n {this.label && (\n <label class=\"xplor-input-select__label\">\n {this.label}\n {this.required && <span class=\"xplor-input-select__required\"></span>}\n </label>\n )}\n\n <div class=\"xplor-input-select__field\" onClick={this.toggleDropdown} ref={(el) => (this.fieldRef = el)}>\n <div class=\"xplor-input-select__value\">\n {this.getDisplayValue()}\n </div>\n <span class=\"xplor-input-select__arrow\">{this.isOpen ? '▲' : '▼'}</span>\n </div>\n\n {this.isOpen && this.menuPosition && (\n <div\n class=\"xplor-input-select__menu\"\n style={{\n position: 'fixed',\n top: `${this.menuPosition.top}px`,\n left: `${this.menuPosition.left}px`,\n width: `${this.menuPosition.width}px`,\n }}\n >\n {this.options.length === 0 ? (\n <div class=\"xplor-input-select__empty\">No options available</div>\n ) : (\n this.options.map((option) => (\n <div\n key={option.value}\n class={{\n 'xplor-input-select__option': true,\n 'xplor-input-select__option--selected': this.isSelected(option),\n }}\n onClick={() => this.handleOptionClick(option)}\n >\n {this.multiple && (\n <input\n type=\"checkbox\"\n class=\"xplor-input-select__checkbox\"\n checked={this.isSelected(option)}\n readOnly\n />\n )}\n <div class=\"xplor-input-select__option-content\">\n <div class=\"xplor-input-select__option-title\">{option.title}</div>\n {option.subtitle && (\n <div class=\"xplor-input-select__option-subtitle\">{option.subtitle}</div>\n )}\n </div>\n </div>\n ))\n )}\n </div>\n )}\n\n {showDetails && (\n <div class=\"xplor-input-select__details\">\n {this.error && <div class=\"xplor-input-select__error-message\">{this.error}</div>}\n {!this.error && this.helperText && <div class=\"xplor-input-select__helper-text\">{this.helperText}</div>}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/xplor-input-send.js CHANGED Viewed

@@ -44,10 +44,10 @@ const XplorInputSend$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputSend e
         this.internalValue = this.value;
     }
     render() {
-        return (h(Host, { key: 'bbf2f299e9c78afed930b178f67494f3c9171ca0' }, h("div", { key: 'a9e29fbc660b5fcc9ad5e8c0a543d39b39073cf9', class: {
+        return (h(Host, { key: '87d0d49d2a9e9061152b294e6b7a91ffae7f39b0' }, h("div", { key: 'ef857693127c5945ff78c20e431609b051df32e7', class: {
                 'input-send': true,
                 'input-send--disabled': this.disabled,
-            } }, h("input", { key: '645f813fd6aad4905635c392afd87ead717bd3d4', ref: (el) => (this.inputEl = el), type: "text", class: "input-send__input", placeholder: this.placeholder, value: this.internalValue, onInput: this.handleInput, onKeyDown: this.handleKeyDown, disabled: this.disabled, maxLength: this.maxLength }), h("xplor-button", { key: '0c5ea75208baea586babbd9ecfa8a433da65e2be', class: "input-send__button", text: this.buttonText, type: this.disabled || !this.internalValue.trim() ? 'disabled' : this.buttonType, onClick: this.handleSend }))));
+            } }, h("input", { key: '93aca7121d132bb72d812db77f8ff85be31a00aa', ref: (el) => (this.inputEl = el), type: "text", class: "input-send__input", placeholder: this.placeholder, value: this.internalValue, onInput: this.handleInput, onKeyDown: this.handleKeyDown, disabled: this.disabled, maxLength: this.maxLength }), h("xplor-button", { key: '92b64ec5e3c14cace28aacb12f58185e07b63f71', class: "input-send__button", text: this.buttonText, type: this.disabled || !this.internalValue.trim() ? 'disabled' : this.buttonType, onClick: this.handleSend }))));
     }
     static get style() { return xplorInputSendCss; }
 }, [2, "xplor-input-send", {

package/components/xplor-input-text-area.js CHANGED Viewed

@@ -87,9 +87,9 @@ const XplorInputTextArea$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputTe
         };
         const showClearButton = this.clearable && this.value && !this.readonly && !this.disabled;
         const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
-        return (h(Host, { key: '1acbd7f541a1673ead7718eba34c514ffdc7057c' }, h("div", { key: 'e7e9c3964c63d585b1837362da89720f353a7b7d', class: containerClasses }, this.label && (h("label", { key: '4313a150717b50a08d82179292e1b3eb38c53821', class: "xplor-input-text-area__label" }, this.label, this.required && h("span", { key: '96ecf54bf62d2f519c72f48e7698683eb9b2c869', class: "xplor-input-text-area__required" }, "*"))), h("div", { key: '36317993f4045d9dc86cf85e67cf7fd2a0e663c2', class: "xplor-input-text-area__field" }, h("textarea", { key: '9c98044198dae93a6a46fcbc26239208203befc1', class: "xplor-input-text-area__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, rows: this.rows, onInput: this.handleInput, onChange: this.handleChange, onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), style: {
+        return (h(Host, { key: '310d900ed96c59bc8b0f19d40fc1573c1a08c220' }, h("div", { key: '0a1903c53b92932e7a98bf910c00b912a1fa078e', class: containerClasses }, this.label && (h("label", { key: '9c86a8f36b0007ecfdba4c70e3c76fa65a34d4e6', class: "xplor-input-text-area__label" }, this.label, this.required && h("span", { key: '5d57cbb3cd28c4533cfd42286bf16924f9937b4c', class: "xplor-input-text-area__required" }, "*"))), h("div", { key: '09feb36c8fe79b5a366d8c0f93495a363ec6596f', class: "xplor-input-text-area__field" }, h("textarea", { key: 'e05d3c094930b2993b5c959b1dfce569ad1b01d0', class: "xplor-input-text-area__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, rows: this.rows, onInput: this.handleInput, onChange: this.handleChange, onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), style: {
                 backgroundColor: this.bgColor,
-            } }), showClearButton && (h("button", { key: '8495d86ff604f538cb7b2144eea778dafc414a74', type: "button", class: "xplor-input-text-area__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715"))), showDetails && (h("div", { key: 'd51398eb122563ced96d1e92d381740a6cb484d2', class: "xplor-input-text-area__details" }, this.error && h("div", { key: '83d436bf141d4f4594f5c1dfeae9ab3de7ac4301', class: "xplor-input-text-area__error-message" }, this.error), !this.error && this.helperText && h("div", { key: 'db6c99c12fc9197785b10b8703d81fdb21488934', class: "xplor-input-text-area__helper-text" }, this.helperText))))));
+            } }), showClearButton && (h("button", { key: '3e95a44af498eb259fab45a653ed3ed2ce7ef3b7', type: "button", class: "xplor-input-text-area__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715"))), showDetails && (h("div", { key: 'cf21757ef973e21a44abba969baad7b88c0a273a', class: "xplor-input-text-area__details" }, this.error && h("div", { key: 'bdfd559501f15f928a44ed7cfe797bb47b614092', class: "xplor-input-text-area__error-message" }, this.error), !this.error && this.helperText && h("div", { key: '0eb05a84b610b3971e76cbd5f566f32ba260eacb', class: "xplor-input-text-area__helper-text" }, this.helperText))))));
     }
     static get style() { return xplorInputTextAreaCss; }
 }, [2, "xplor-input-text-area", {

package/components/xplor-input-text-secondary.js CHANGED Viewed

@@ -51,9 +51,9 @@ const XplorInputTextSecondary$1 = /*@__PURE__*/ proxyCustomElement(class XplorIn
             'input-secondary--dirty': this.isDirty,
         };
         const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
-        return (h(Host, { key: 'd7b5a95dba54e640b3bc0fb0e5e5ad07d209f21c' }, h("div", { key: 'dc0cc65fb5f74f8ed8f173c0736899afb5201ad1', class: containerClasses }, this.label && (h("label", { key: '328c402c4e0a05252ea0dd965c7b274c06e99864', class: "input-secondary__label" }, this.label, this.required && h("span", { key: '6c4217b11971405df02ee5a7a07ece655860cabf', class: "input-secondary__required" }, "*"))), h("div", { key: '30179854ac1c1eaa8a6c3f39cdf7a0fff4c45103', class: "input-secondary__field" }, h("input", { key: 'ddb142835cf10d39fea9ff1b2023ed0cad968f9f', type: this.type, class: "input-secondary__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
+        return (h(Host, { key: 'd6c2b61f7fc153bd32577086f5c0ffcc335cbf4a' }, h("div", { key: 'b7cfabd013e84a7b72e6ca4cd7cd592bcd9de4df', class: containerClasses }, this.label && (h("label", { key: 'd5dfe32ab50128b1a3ff824e82b98f4ae75fcd17', class: "input-secondary__label" }, this.label, this.required && h("span", { key: '5de6c309872715b1bdd1f0aad9f577618f43f63f', class: "input-secondary__required" }, "*"))), h("div", { key: '5295e7d9cc7ee5ab401ee5a1182241791f2d81db', class: "input-secondary__field" }, h("input", { key: '146cf2b3413de110e7aaadd19fc8da7bb824af4a', type: this.type, class: "input-secondary__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
                 backgroundColor: this.bgColor,
-            } }), h("slot", { key: 'a2a0a03935964ba65591508ec50081323ac2c33a', name: "append-inner" })), showDetails && (h("div", { key: 'f3b0025dbaaf4a6bbbef5d1f0edd5866e0e79267', class: "input-secondary__details" }, this.error && h("div", { key: '91835745a04b17003b3c2254c6a5c405d36f3b08', class: "input-secondary__error-message" }, this.error), !this.error && this.helperText && h("div", { key: '96948fed46bb7765699a57c1017d0dbe3c4e2ec7', class: "input-secondary__helper-text" }, this.helperText))), h("slot", { key: 'e0ef7c8cea7a11cc05636e3d020737957fc49040', name: "append" }))));
+            } }), h("slot", { key: '8b72be3ae83c0de2f8c9f70198c012c0a25fb470', name: "append-inner" })), showDetails && (h("div", { key: 'a540ae6fd62ca09ca1ce337fd71d9b93950071d0', class: "input-secondary__details" }, this.error && h("div", { key: '1b899f4df036b2d648d7d6f87767d0ced8202a73', class: "input-secondary__error-message" }, this.error), !this.error && this.helperText && h("div", { key: 'ec2ba7e7cfc715235360bf9444bb054301537dc3', class: "input-secondary__helper-text" }, this.helperText))), h("slot", { key: '8dfc77b85e9d89c8c3fdbae4569e7b1ddc6ccb0d', name: "append" }))));
     }
     static get style() { return xplorInputTextSecondaryCss; }
 }, [6, "xplor-input-text-secondary", {

package/components/xplor-input-text.js CHANGED Viewed

@@ -86,9 +86,9 @@ const XplorInputText$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputText e
             'xplor-input-text--error': !!this.error,
         };
         const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
-        return (h(Host, { key: '63a41a0420e4006ee19740d408c9c6dc1f609a96' }, h("div", { key: '2b5c2990098b4fe843e70a52eae25d284abc5dfc', class: containerClasses }, this.label && (h("label", { key: '9f0184741293bfd453b78e1edc0eb3f3c02bd12e', class: "xplor-input-text__label" }, this.label, this.required && h("span", { key: '3ec943a28889363da1356aa69392f906b0bc6542', class: "xplor-input-text__required" }, "*"))), h("div", { key: 'a7f83624fb3564fbeb59d8d984c039980354c6af', class: "xplor-input-text__field" }, h("input", { key: '0a886666e4086099333e22ee4aa3406e81a73917', type: this.type, class: "xplor-input-text__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
+        return (h(Host, { key: 'eefd18f18a4a0303cccca87db9256d2d7033e767' }, h("div", { key: 'cf152d49ce4ed953162467a4cc6d9e8392380d4c', class: containerClasses }, this.label && (h("label", { key: '78e7c0178ec1dedda68f6fdce7cb1f1dd13840fd', class: "xplor-input-text__label" }, this.label, this.required && h("span", { key: '1eaf01ca583263e7047444bbfe6b2636d8fde241', class: "xplor-input-text__required" }, "*"))), h("div", { key: '7318153a1c55ad38196cea03555238b8f2c37d51', class: "xplor-input-text__field" }, h("input", { key: '41c1c60d8dbdea750477a17d32b110ef826e73a6', type: this.type, class: "xplor-input-text__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
                 backgroundColor: this.bgColor,
-            } }), h("slot", { key: '8d854313cb392c2a3b8ff63b9f193fa38af672ec', name: "append-inner" })), showDetails && (h("div", { key: '0a9b055a64e296ead6b0f20ffc717782f89b6718', class: "xplor-input-text__details" }, this.error && h("div", { key: '2101193d34660879589cb581e2beddba2fd93363', class: "xplor-input-text__error-message" }, this.error), !this.error && this.helperText && h("div", { key: '648b517eb3b510680036e2514ab23a00d9dc90fc', class: "xplor-input-text__helper-text" }, this.helperText))), h("slot", { key: '754393f25fa96e8bf7a91e51f91ae8afe3d03e7b', name: "append" }))));
+            } }), h("slot", { key: '48461bf663591d51ebd1ee4b6fbdc25680b322fb', name: "append-inner" })), showDetails && (h("div", { key: '5ed0aecf6e5751e771882f9ab9cd58aafb44ba01', class: "xplor-input-text__details" }, this.error && h("div", { key: 'b34fffee42d3f663b923a1b9fe14c7a0a19539b2', class: "xplor-input-text__error-message" }, this.error), !this.error && this.helperText && h("div", { key: '7bf60893cc66f8916ebe3bc3bace1e827812541d', class: "xplor-input-text__helper-text" }, this.helperText))), h("slot", { key: 'c10099eb2c41e38cc65170a5acb6897b949b8173', name: "append" }))));
     }
     static get style() { return xplorInputTextCss; }
 }, [6, "xplor-input-text", {

package/components/xplor-input-title.js CHANGED Viewed

@@ -36,7 +36,7 @@ const XplorInputTitle$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputTitle
         };
     }
     render() {
-        return (h(Host, { key: '7c7192c83a6642754940924a7e59a41911ac5988' }, h("input", { key: 'e5ba49fe7a49b22dd740c170652007f7a7d86cad', type: "text", class: "xplor-input-title", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onInput: this.handleInput, onChange: this.handleChange })));
+        return (h(Host, { key: '8aaf2d386451218e3261ffec5c37d512905776ef' }, h("input", { key: '0b79c0e500edcbd89a1e6f7bf4e1ea1b584b7a3e', type: "text", class: "xplor-input-title", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onInput: this.handleInput, onChange: this.handleChange })));
     }
     static get style() { return xplorInputTitleCss; }
 }, [2, "xplor-input-title", {

package/components/xplor-links.js CHANGED Viewed

@@ -9,7 +9,7 @@ const XplorLinks$1 = /*@__PURE__*/ proxyCustomElement(class XplorLinks extends H
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: '790a4cfec621e97ea4de475fa53e57a77a3cd12f', class: `theme-${this.brand}` }, h("a", { key: '13cb8ca17ea4717aed386a4a4e2cb3c4402a94f0', class: "x-link", href: "https://google.com" }, ' ', "googole this is a link", ' '), h("div", { key: '69005a5165c15a0fb175b8eea7b4d409edede8f6', class: "bg-black p-2 rounded-md flex justify-center" }, h("h1", { key: '7b02c87ac23ea8ab57b4ed50c5196701574c2e61', class: "text-primary font-sans" }, "This is a Stencil component using Tailwind")), h("div", { key: '43656b47443543dc22c2155c34d0fa48dc837a63', class: "bg-white py-24 sm:py-32" }, h("div", { key: '7d6233d14a660cb47b7e1d819c1cc636219efbf2', class: "mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3" }, h("div", { key: '8b1d3e79dfd215fb70d9a5ffafc337b78bf7f05c', class: "max-w-xl" }, h("h2", { key: 'a124d7943e4c3143850b5ce7411a0c39d17d4646', class: "text-pretty text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl" }, "Meet our leadership"), h("p", { key: '97687d43671e3fb5138892f16d94a88a53ea2da7', class: "mt-6 text-lg/8 text-gray-600" }, "We\u2019re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the best results for our clients.")), h("ul", { key: 'cbe0df5fe4848e59ab77dcb316283ca072c5601c', role: "list", class: "grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2" }, h("li", { key: 'c386756c84360e832fe8ad9673f137b2622d52d1' }, h("div", { key: 'd5f92709313deb415d9868e18f30d33da7f46f9c', class: "flex items-center gap-x-6" }, h("img", { key: '786e4a048269b46c0e3969578de897551496c562', class: "size-16 rounded-full", src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", alt: "" }), h("div", { key: '75d001f9e1670f1f9be6eec0177797c8d9957e2f' }, h("h3", { key: '9f8bf97a2fe329f6c790f40cd8e3a59251a25cc6', class: "text-base/7 font-semibold tracking-tight text-gray-900" }, "Leslie Alexander"), h("p", { key: 'f848b02a1fe071682ca36a4900fb9d19938db71e', class: "text-sm/6 font-semibold text-indigo-600" }, "Co-Founder / CEO")))))))));
+        return (h(Host, { key: '4e672b4eb8d386705f07f8d647a4a4cdabde607f', class: `theme-${this.brand}` }, h("a", { key: '8b23a97b669f6682588a568cc644a17cc92c8364', class: "x-link", href: "https://google.com" }, ' ', "googole this is a link", ' '), h("div", { key: '0b6bc1a1c77648137899cb8e554a93f1e56e4a15', class: "bg-black p-2 rounded-md flex justify-center" }, h("h1", { key: 'c2f23df8712e1763bf9d6910c0bea40a5ff476bf', class: "text-primary font-sans" }, "This is a Stencil component using Tailwind")), h("div", { key: 'e09c835f279ae0c2f70f2864ab4afa5942e1c900', class: "bg-white py-24 sm:py-32" }, h("div", { key: '5b390160da6205dc508018ab53a5f09ab80602d1', class: "mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3" }, h("div", { key: 'd7cf64efb0c15d643a74f67c11a3b9bc0807cd6d', class: "max-w-xl" }, h("h2", { key: '78c877f919bd7098a79de55f2ef65d7538f418c5', class: "text-pretty text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl" }, "Meet our leadership"), h("p", { key: '74b69e6d9f0d99b8653704e9fac32fa4ce50f211', class: "mt-6 text-lg/8 text-gray-600" }, "We\u2019re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the best results for our clients.")), h("ul", { key: 'c8e457f3529ad8340c84d5bad80431b3c42318c8', role: "list", class: "grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2" }, h("li", { key: '7cc055d330ab0ef28a10965f4fae52ba48b0f957' }, h("div", { key: '47faf4cf76fe5363bde5c318abd8a9ff21972f00', class: "flex items-center gap-x-6" }, h("img", { key: 'ecea3e92117d535dbd3c97d0868d5888c61a3b26', class: "size-16 rounded-full", src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", alt: "" }), h("div", { key: '4978dd776ab303b667c5a5a8e2c90e2a51b30829' }, h("h3", { key: 'f49b65df05b1659a27dd6a5c82c11e1b9e18306d', class: "text-base/7 font-semibold tracking-tight text-gray-900" }, "Leslie Alexander"), h("p", { key: 'e74b5a0caf90fef101dcbdf01e2aa6d823f0e36d', class: "text-sm/6 font-semibold text-indigo-600" }, "Co-Founder / CEO")))))))));
     }
     static get style() { return xplorLinksCss; }
 }, [1, "xplor-links", {

package/components/xplor-modal-persistent.js CHANGED Viewed

@@ -28,7 +28,7 @@ const XplorModalPersistent$1 = /*@__PURE__*/ proxyCustomElement(class XplorModal
         this.loading = false;
     }
     render() {
-        return (h(Host, { key: '607487d12b9744b7915c168a702b9f53c1edd18a' }, h("xplor-modal", { key: '72213498ca31332338afda4b1a8520fd34fbec19', open: this.open, width: this.width, maxWidth: this.maxWidth, maxHeight: this.maxHeight, loading: this.loading, persistent: true, onXplorClose: () => this.xplorClose.emit() }, h("slot", { key: '4841432590db3562ca033f57325aca10b947c60f', name: "title", slot: "title" }), h("slot", { key: '78263228bc06c994c6107b0fea103b25a5171f7f', name: "subtitle", slot: "subtitle" }), h("slot", { key: 'b51d5bf90aa0b9c3889a897adda36eaaf1a72659', name: "body", slot: "body" }), h("slot", { key: '4c4c403072d0a0f10da0eeeefbe73e05d4a9f33d', name: "actions", slot: "actions" }))));
+        return (h(Host, { key: '60cd29fcdff8efad4d0b24f4532acb86e4f6220b' }, h("xplor-modal", { key: '6252525de022fcc1098e2e179c4aedb81ebb15d3', open: this.open, width: this.width, maxWidth: this.maxWidth, maxHeight: this.maxHeight, loading: this.loading, persistent: true, onXplorClose: () => this.xplorClose.emit() }, h("slot", { key: '484eeecc00f647e920878512f5e6bd61b41ba825', name: "title", slot: "title" }), h("slot", { key: 'e3fb52e2f19fdd4346fc4d014a0391dcc3e7c156', name: "subtitle", slot: "subtitle" }), h("slot", { key: 'aa8a47b1afa24229269c08783fe0b69c5a258adc', name: "body", slot: "body" }), h("slot", { key: '8d1711d5e3223922596a26ce4eb9d30288c259ed', name: "actions", slot: "actions" }))));
     }
 }, [4, "xplor-modal-persistent", {
         "open": [4],

package/components/xplor-radio-btn.d.ts ADDED Viewed

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

package/components/xplor-radio-btn.js ADDED Viewed

@@ -0,0 +1,36 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+const xplorRadioBtnCss = "/* 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}";
+const XplorRadioBtn$1 = /*@__PURE__*/ proxyCustomElement(class XplorRadioBtn extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        return (h(Host, { key: '350aae21c138b87e3dfce7ebdb2d74747d5abc93' }, h("h1", { key: 'f7546bbab5c85aa0ed4d180116200790444f8c5f' }, "I'm a button"), h("slot", { key: '79492d83d93da17775f56c21e2a600cafdea2c44' })));
+    }
+    static get style() { return xplorRadioBtnCss; }
+}, [1, "xplor-radio-btn"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-radio-btn"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-radio-btn":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorRadioBtn$1);
+            }
+            break;
+    } });
+}
+const XplorRadioBtn = XplorRadioBtn$1;
+const defineCustomElement = defineCustomElement$1;
+export { XplorRadioBtn, defineCustomElement };
+//# sourceMappingURL=xplor-radio-btn.js.map
+//# sourceMappingURL=xplor-radio-btn.js.map

package/components/xplor-radio-btn.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"xplor-radio-btn.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,mnNAAmnN;;MCO/nNA,eAAa,iBAAAC,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;;;;;;IACxB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAqB,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,cAAA,CAAA,EACrB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorRadioBtn","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-radio-btn/xplor-radio-btn.scss?tag=xplor-radio-btn&encapsulation=shadow","src/components/xplor-radio-btn/xplor-radio-btn.tsx"],"sourcesContent":[":host {\n display: block;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'xplor-radio-btn',\n styleUrl: 'xplor-radio-btn.scss',\n shadow: true,\n})\nexport class XplorRadioBtn {\n render() {\n return (\n <Host>\n <h1>I'm a button</h1>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/xplor-section-card.js CHANGED Viewed

@@ -11,11 +11,11 @@ const XplorSectionCard$1 = /*@__PURE__*/ proxyCustomElement(class XplorSectionCa
         this.padding = '1.5rem';
     }
     render() {
-        return (h(Host, { key: '667ddbeb2048497ae0ec2d23876f50058e9b4870' }, h("div", { key: 'ccbce0700966f088c5a053df2169d466529d4ce3', class: {
+        return (h(Host, { key: 'f0bb8af2883a5441f3e325c4267ad3cec5716c9a' }, h("div", { key: 'a7611e3f28ca8d84782146adb2b906c789f4a338', class: {
                 'section-card': true,
                 'section-card--outlined': this.outlined,
                 'section-card--rounded': this.rounded,
-            }, style: { padding: this.padding } }, h("slot", { key: 'edd611a0afe1e5343ddedabf7d1daec8962a037b', name: "title" }), h("slot", { key: '2543fd02c710dd9045a7e5920ddc625712febc71', name: "subtitle" }), h("div", { key: 'bdd87422f48d711b43e6a1bf3f27a08d33819d1e', class: "section-card__body" }, h("slot", { key: '4989480c1010e3bae58cfeba4e0637e5fc1397da', name: "body" })), h("div", { key: '891bd2f17631f7f2732dbb04caefb26503d30e75', class: "section-card__actions" }, h("slot", { key: '8d49640f1c96c75afb915ed4acd1dd574ae4c2b9', name: "actions" })))));
+            }, style: { padding: this.padding } }, h("slot", { key: 'e1a7153c70bf52f1d539dfc4f0b95d571aaa97da', name: "title" }), h("slot", { key: '90d1df5bf54fc04271e0f762a6f6df09f9a5cc32', name: "subtitle" }), h("div", { key: '81c011fa1950cee54769b7940b92722d3dcdd4d5', class: "section-card__body" }, h("slot", { key: '5c8bba79d0900c8db7feb677ff1a6dc379bcad65', name: "body" })), h("div", { key: 'd71137c24f428c4001c06c3038565368423e71cd', class: "section-card__actions" }, h("slot", { key: '06b994a9fb3626a0054b6192b5bb666b89710f54', name: "actions" })))));
     }
     static get style() { return xplorSectionCardCss; }
 }, [6, "xplor-section-card", {

package/components/xplor-section-heading.js CHANGED Viewed

@@ -9,11 +9,11 @@ const XplorSectionHeading$1 = /*@__PURE__*/ proxyCustomElement(class XplorSectio
         this.size = 'medium';
     }
     render() {
-        return (h(Host, { key: '4c30a434a144abb7ba1925a4fe98847fb8a0e09c' }, h("span", { key: 'faa456eebb9ba58d55945f0b5f6db9e02efd9d31', class: {
+        return (h(Host, { key: '6ee4041528bf178feb4b641c6f6f937c28ed2e8e' }, h("span", { key: 'e9758f23fe78a18f5ebf77092225c4d3b2a29965', class: {
                 'section-heading': true,
                 'section-heading--small': this.size === 'small',
                 'section-heading--large': this.size === 'large',
-            } }, h("slot", { key: '3a164def63f5365f6a76702e7a8462fe0ce4fcc9' }, this.text))));
+            } }, h("slot", { key: 'e0191f9f23da9858ffbb204554fec2c1012d1cd3' }, this.text))));
     }
     static get style() { return xplorSectionHeadingCss; }
 }, [6, "xplor-section-heading", {

package/components/xplor-table.js CHANGED Viewed

@@ -185,11 +185,11 @@ const XplorTable$1 = /*@__PURE__*/ proxyCustomElement(class XplorTable extends H
         if (this.hasScrolled)
             className += ' xpl-table--has-scrolled';
         const paginatedData = this.getPaginatedData();
-        return (h(Host, { key: '2d97030af789ed65f7021cb28a7afc2419fbccd5', class: "xplor-table" }, h("div", { key: 'e790897b07a94c98f28af0c1a8d9acbc0bded6c6', class: "bg-white rounded-lg shadow-sm border border-gray-200 p-6 max-w-6xl mx-auto" }, h("div", { key: 'a1f167a0de10b05288715269bc9c469a547c6102', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
+        return (h(Host, { key: '3f20eb245a5a7cb281d4d62c4decd5479a4a172f', class: "xplor-table" }, h("div", { key: '1a28e8efbe4743b4dc77cfe62eeb21f317a9cbea', class: "bg-white rounded-lg shadow-sm border border-gray-200 p-6 max-w-6xl mx-auto" }, h("div", { key: 'a20608a0f5d4cde341974fb887f6bf0fcd1bce2d', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
                 this.container = el;
-            } }, h("div", { key: '84ab92d9467e4ac9d866a3220ccba9d63b8c8cc8', class: "mb-6" }, h("h1", { key: 'f8746a5162a38476937b83d9549a2fad2a030f8a', class: "text-xl font-semibold text-gray-900 mb-4" }, "Head Counts Report"), h("div", { key: '1e7188d1e0a7dd74f466dab3e6ee00189ab88e53', class: "flex flex-wrap items-center gap-4 mb-6" }, h("div", { key: 'c3f2d92bef894ccc749e1249536154147a324711', class: "flex items-center gap-2" }, h("label", { key: '6156ed236c96b1e1f7d480bc97bb0ab8b0b01a87', class: "text-sm text-gray-600 font-medium" }, "Date Range"), h("select", { key: 'da1caff2afb5a1b4786adec7fd9ca7a9480c0f57', class: "border border-gray-300 rounded px-3 py-1.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-teal-500",
+            } }, h("div", { key: '179d76f9152adf12775024ab4b8a272539ae1931', class: "mb-6" }, h("h1", { key: '636955cf3e3b34e0dfd96d61b1dc055a8bd25421', class: "text-xl font-semibold text-gray-900 mb-4" }, "Head Counts Report"), h("div", { key: 'dbb17a39f87faf48f840cb0a0912e766d26fd3c6', class: "flex flex-wrap items-center gap-4 mb-6" }, h("div", { key: '093859d4da39cdbda7c9d2bdde59dbe18e6379bc', class: "flex items-center gap-2" }, h("label", { key: '01a133d35d6b97bb2c4e231ae6ebe8f4082f2955', class: "text-sm text-gray-600 font-medium" }, "Date Range"), h("select", { key: 'df99b873a684c2ae59f4d8ee5f2df68de8d0424d', class: "border border-gray-300 rounded px-3 py-1.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-teal-500",
             // value={this.selectedDateRange}
-            onInput: this.handleDateRangeChange }, h("option", { key: '6c31c50fe2119d1f5086e3f33ddff4903a290a03', value: "All" }, "All"), h("option", { key: '17d4c7b7c52763065dab2f5dceb85ddd8d23e892', value: "Today" }, "Today"), h("option", { key: '1ec247907dc275825d6a8a105b3c841d2de131f0', value: "This Week" }, "This Week"), h("option", { key: '3fa99b268c42232eb3dccf73dd125b27608d2ba8', value: "This Month" }, "This Month"), h("option", { key: 'bfeea456dde4d67cdc12b00cdba0b694fb5fa3cf', value: "Custom" }, "Custom Range")), h("button", { key: 'f5d3badb19132f137573b4248f0ce99e95e38daa', class: "p-1.5 border border-gray-300 rounded hover:bg-gray-50" }, h("svg", { key: 'f32657ec8d66d3e1a10cdb304406999a933ad7ee', class: "w-4 h-4 text-gray-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: '4b63cca1e36df1a5cd5b598f558fc5bd88f25f17', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" })))), h("button", { key: 'f5133d241b1669c8ae425a76b69a25db91bc9e69', onClick: this.handleFilterReports, class: "bg-teal-600 hover:bg-teal-700 text-white px-4 py-1.5 rounded text-sm font-medium transition-colors" }, "Filter Reports"), h("button", { key: '4df30f93e7b019be1ad293a7e70fad80df5c42a8', onClick: this.handleDownloadAll, class: "flex items-center gap-2 text-gray-600 hover:text-gray-800 text-sm" }, h("svg", { key: '18dc2f9716e0f5bc095d84349f85703f38d23238', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: 'cbcfc4fd12a099008c3fcbf762cbfccc63b1706c', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" })), "Download All"))), h("table", { key: 'cf9f942709fcc413f99891d612b1640eed94debf', class: `w-full ${className}` }, this.columns && (h("thead", { key: 'baeee3644d8fb2fd9e2d038200b24d433bbdf87b' }, this.columns.map((column, i) => {
+            onInput: this.handleDateRangeChange }, h("option", { key: '7886a61f2329e9ed9cc8ee7a2cf6addea173cca1', value: "All" }, "All"), h("option", { key: '582f916607bb0cf80e0bae5bc0d6a2a555629139', value: "Today" }, "Today"), h("option", { key: 'e6b1b8b081ee25a4ed86a41e2de2e18a904b0696', value: "This Week" }, "This Week"), h("option", { key: '9db97f27a005fe23d2e5c60f8920b867a8f6c6e5', value: "This Month" }, "This Month"), h("option", { key: '3328f1c88fe0da23ede3010441f0fe4e2063b2ec', value: "Custom" }, "Custom Range")), h("button", { key: '31041e09d90e476f7c795b29eb6f11b014ff7bfd', class: "p-1.5 border border-gray-300 rounded hover:bg-gray-50" }, h("svg", { key: '1bafb7b5f685358f03d9c4aab68ae30eb49118dd', class: "w-4 h-4 text-gray-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: 'e59bce624afdfb75f2c0118fc6ff83daab003246', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" })))), h("button", { key: '67ff7cd34e44e071f73d5d4e4f46df5ae386aa00', onClick: this.handleFilterReports, class: "bg-teal-600 hover:bg-teal-700 text-white px-4 py-1.5 rounded text-sm font-medium transition-colors" }, "Filter Reports"), h("button", { key: '5b23efc3355a5e4907b06696e29ca1f5b9d5c4f2', onClick: this.handleDownloadAll, class: "flex items-center gap-2 text-gray-600 hover:text-gray-800 text-sm" }, h("svg", { key: 'f787cf0f0759c4536786bc3e1ce2db99324ba085', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: '1a21159e06c0371d4d43abc98a1e5d2c4919fa2f', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" })), "Download All"))), h("table", { key: '7ba170b68b794cd1dc031e801405d0f09c8d0e8f', class: `w-full ${className}` }, this.columns && (h("thead", { key: 'e79458ad7b197620a6ba37084fd009a3685340cc' }, this.columns.map((column, i) => {
             const iconType = getIconType(this.sortTypeArray[i]);
             const isColumnSortable = !!(this.isSortable &&
                 this.sortableColumns[i]);
@@ -222,11 +222,11 @@ const XplorTable$1 = /*@__PURE__*/ proxyCustomElement(class XplorTable extends H
             //     id="__xpl-icon-sort"
             // ></xpl-icon>
             )))));
-        }))), h("tbody", { key: 'b0715075cfba14dd9ac1e783e0c27a197e41a725' }, paginatedData.map((row, rowNum) => (h("tr", { class: `border-b border-gray-100 hover:bg-gray-50` }, row.map((cell, i) => (h("td", { class: "py-3 px-4 text-sm text-gray-900" }, this.multiselect && i === 0 ? (h("label", { class: "flex items-center gap-2", htmlFor: `__xpl-table-row-${rowNum}` }, h("input", { id: `__xpl-table-row-${rowNum}`, checked: !!this.selected[rowNum], type: "checkbox", onChange: (e) => this.selectOne(e, rowNum), value: this.selectedValues
+        }))), h("tbody", { key: '138ffddb19a8573fc00894a5e9b981cecbe3ac40' }, paginatedData.map((row, rowNum) => (h("tr", { class: `border-b border-gray-100 hover:bg-gray-50` }, row.map((cell, i) => (h("td", { class: "py-3 px-4 text-sm text-gray-900" }, this.multiselect && i === 0 ? (h("label", { class: "flex items-center gap-2", htmlFor: `__xpl-table-row-${rowNum}` }, h("input", { id: `__xpl-table-row-${rowNum}`, checked: !!this.selected[rowNum], type: "checkbox", onChange: (e) => this.selectOne(e, rowNum), value: this.selectedValues
                 .length > 0
                 ? this
                     .selectedValues[rowNum]
-                : `xpl-table-checkbox-${rowNum}` }), h("div", { innerHTML: cell }))) : (h("div", { innerHTML: cell })))))))))), h("div", { key: '658aec34fd3394c205d12ab67d06c6f1bb385aa6', id: "pagination", class: "w-full flex items-center justify-between mt-6 text-sm" }, h("div", { key: 'aa7d796792186a3bd76f4201ead86e2055d65cf9', class: "flex items-center gap-2" }, h("button", { key: '7517d034c1456224fb24a0d66c3f60a446e96ef0', onClick: () => this.handlePagination('first'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === 1 }, h("svg", { key: '9af8fe875c042ffdd8fd7015b01703d29789a1af', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: '41a1023ce1243190df484411ac9390ccd1496f10', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M11 19l-7-7 7-7m8 14l-7-7 7-7" }))), h("button", { key: 'ac9f0e09603e4bd45d6aa10dd45303f8bc90f892', onClick: () => this.handlePagination('prev'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === 1 }, h("svg", { key: 'af67ed98c91a36076f1578e5eaa49321aa919984', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: 'f0e3498f7b8e784e4848c0190eaab285f1c220af', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M15 19l-7-7 7-7" })))), h("span", { key: '29ae566f6e8f3cbaad39998165529b5022073a56', class: "text-gray-600" }, "Page ", this.currentPage, " of ", this.totalPages), h("div", { key: '91da8153fd11fac318ef63b768e3ce0fda3e4b63', class: "flex items-center gap-2" }, h("button", { key: 'f8e399e46605f060d09c0f1fcc5864dae84949fd', onClick: () => this.handlePagination('next'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === this.totalPages }, h("svg", { key: '93a0154407f0034993b31f79f746b905d8c720ba', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: '67341c2e70e6e0e51bca7f6c0f8d790577efb80c', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 5l7 7-7 7" }))), h("button", { key: '6c4e12bf4877e44ffb5cb6cec4a91dd41c76a95d', onClick: () => this.handlePagination('last'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === this.totalPages }, h("svg", { key: 'b476cb40832e1116db85780080839fe87fc75777', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: 'da32eb5c65018fe776af2f65ccd433573b21822e', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M13 5l7 7-7 7M5 5l7 7-7 7" })))))))));
+                : `xpl-table-checkbox-${rowNum}` }), h("div", { innerHTML: cell }))) : (h("div", { innerHTML: cell })))))))))), h("div", { key: 'e82751ff914c2279cecdfbaa176e97f6e935732a', id: "pagination", class: "w-full flex items-center justify-between mt-6 text-sm" }, h("div", { key: '4ed42566de46b43af24a36884832017947f117ef', class: "flex items-center gap-2" }, h("button", { key: 'a0c61305cbcace0eda2964da23085f58a8fc31a7', onClick: () => this.handlePagination('first'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === 1 }, h("svg", { key: '322225c61fc14d0c6d8a201a3ff07cce094822c7', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: 'ae66792c0cf51383d2657ff5302383e4067761ce', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M11 19l-7-7 7-7m8 14l-7-7 7-7" }))), h("button", { key: 'bc660dbbcf14d7ddf25820c337d212c11804b988', onClick: () => this.handlePagination('prev'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === 1 }, h("svg", { key: '365d59f74128819af1f163f125e393994a2e69ad', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: '0b7c6305962e722c161d30e3b3ffe804c5d4c73e', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M15 19l-7-7 7-7" })))), h("span", { key: '2e0245cf9e2d23a944492432cd5c33bb915ecd2b', class: "text-gray-600" }, "Page ", this.currentPage, " of ", this.totalPages), h("div", { key: '5692bf81ffa24c2e10c8edb7d7a5ff6655816f7a', class: "flex items-center gap-2" }, h("button", { key: 'f60c4847070a3eb4e19e59c7c25141ce68ddbe81', onClick: () => this.handlePagination('next'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === this.totalPages }, h("svg", { key: '5f45f52d2dd1718691f582e765dd7cc3aa476dce', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: 'ad63a63e8956c6648781d7160761f8e310c5becc', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 5l7 7-7 7" }))), h("button", { key: '2ee1f6498fb0ccb4e2ea9a4e4d7651053b97851c', onClick: () => this.handlePagination('last'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === this.totalPages }, h("svg", { key: 'e247cc56f3cfc8d870a7891fd0c457645473e3e1', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: '791f2af81bce193fbfcb41985feccec5338cee80', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M13 5l7 7-7 7M5 5l7 7-7 7" })))))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/xplor-text-bubble.js CHANGED Viewed

@@ -9,11 +9,11 @@ const XplorTextBubble$1 = /*@__PURE__*/ proxyCustomElement(class XplorTextBubble
         this.color = 'orange';
     }
     render() {
-        return (h(Host, { key: '5b22dd9c96119743c998364cdd27667709f4e52f' }, h("div", { key: 'd42bc901517dce4e629a5d19fe2667925afcdf6e', class: {
+        return (h(Host, { key: '61174051f7acc2747a0c95e1599a8ca04a9bc5e6' }, h("div", { key: 'fe266a910f906422a4e5d9e73d4f4d0570fa8c79', class: {
                 'text-bubble': true,
                 'text-bubble--green': this.color === 'green',
                 'text-bubble--orange': this.color === 'orange',
-            } }, h("slot", { key: '1ee2dc33d86906cdebd22019c3794ad1be606c1a' }))));
+            } }, h("slot", { key: '1286ac72861f5da019bece897343778d40acdc36' }))));
     }
     static get style() { return xplorTextBubbleCss; }
 }, [6, "xplor-text-bubble", {

package/components/xplor-text-field.js CHANGED Viewed

@@ -133,10 +133,10 @@ const XplorTextField$1 = /*@__PURE__*/ proxyCustomElement(class XplorTextField e
     }
     render() {
         const labelFloating = this.isFocused || this.hasValue;
-        return (h(Host, { key: 'e5addac91e0cd95aae82078fca048c9cf3d63899' }, h("div", { key: '5af015996b692ba7a9da193d85aa982a3c314e5f', class: this.computedClasses }, h("div", { key: 'ce8f119584d984368ed267c6343d36d5023a7cc4', class: "xplor-text-field__wrapper", style: { backgroundColor: this.bgColor } }, h("div", { key: '65da1d866155e01344fafb88deb23b7c3e781e47', class: "xplor-text-field__input-wrapper" }, this.label && (h("label", { key: '2b21d90a9e9621262e87669ac64b588d712015de', class: {
+        return (h(Host, { key: '93fdd30e48260ae52b33c18368637b1e7fdd7b6b' }, h("div", { key: 'ef93e7bc3588c225dfb7fef553f1146aecfcc027', class: this.computedClasses }, h("div", { key: '5ffdd5634f410b2432e549403040e9ce7fdb0da4', class: "xplor-text-field__wrapper", style: { backgroundColor: this.bgColor } }, h("div", { key: '08ab012b2ccb2698256f149563cc1ed47052e694', class: "xplor-text-field__input-wrapper" }, this.label && (h("label", { key: 'c4f359a167cb4cb47ba39355c56f7249523d8ef7', class: {
                 'xplor-text-field__label': true,
                 'xplor-text-field__label--floating': labelFloating,
-            } }, h("slot", { key: 'eca54b3a90bce7b2437bb8f6034a72d38e95145a', name: "label" }, this.label), this.required && h("span", { key: 'dc29dc197c8ec0613602b199ddacb2901301b496', class: "xplor-text-field__required" }, "*"))), h("input", { key: 'ff58f03b2fd6ccd30e901e70116ddf13e392ec6c', ref: (el) => (this.inputElement = el), class: "xplor-text-field__input", type: this.type, value: this.value, placeholder: this.isFocused ? this.placeholder : '', disabled: this.disabled, readonly: this.readonly, required: this.required, maxlength: this.maxlength, min: this.min, max: this.max, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, "aria-invalid": this.hasError ? 'true' : 'false', "aria-describedby": this.hasError ? 'error-messages' : undefined }), h("div", { key: '01c6224679cf4709b51015943bb163d5e6cc929a', class: "xplor-text-field__append-inner" }, this.clearable && this.hasValue && !this.disabled && !this.readonly && (h("button", { key: 'e212288acbed1693c8a31c9fb01de80ed5d7509c', type: "button", class: "xplor-text-field__clear-btn", onClick: this.handleClear, "aria-label": "Clear" }, h("svg", { key: '8c457ed9da2b09b0457c12db18e7a4924251dfca', width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: '947f8e2599d17fb4fc763b864b1ab2fec0ca2ab2', d: "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" })))), h("slot", { key: '53062cd78fbbbadf85aa722e23c78f477145a34e', name: "append-inner" })), h("fieldset", { key: 'accd6fc547d7112f5806a82dc6826bbd386d9596', class: "xplor-text-field__outline" }, h("legend", { key: 'ef077a25a838e77901a747c65296529b694f6559', class: { 'xplor-text-field__outline-legend': true, 'xplor-text-field__outline-legend--floating': labelFloating } }, labelFloating && this.label ? h("span", null, this.label, this.required && '*') : h("span", null, "\u200B")))), h("div", { key: '7374765a73e8e4cc21ad265290a35ed07a1fc2de', class: "xplor-text-field__append" }, h("slot", { key: '3cfeb58881b2103a516cfe38f6bedd0583c18aed', name: "append" }))), this.showDetails && (h("div", { key: '81677f56be4a7e77a415b5b21ea67448bed1c9ee', class: "xplor-text-field__details" }, this.hasError && (h("div", { key: '20539967a3acbc1f2165df9cbe85f9bad7fd577c', id: "error-messages", class: "xplor-text-field__error-messages" }, this.errorMessages.map((error) => (h("div", { class: "xplor-text-field__error" }, error))))))))));
+            } }, h("slot", { key: 'cfd751bb2bbe51c6a847b6ac6317559b06feae39', name: "label" }, this.label), this.required && h("span", { key: '0d53dea42c4b288ec44c699aac77670ff45167b9', class: "xplor-text-field__required" }, "*"))), h("input", { key: 'cbb7810c082c222a6aebe67fbfdfcce7804ff82c', ref: (el) => (this.inputElement = el), class: "xplor-text-field__input", type: this.type, value: this.value, placeholder: this.isFocused ? this.placeholder : '', disabled: this.disabled, readonly: this.readonly, required: this.required, maxlength: this.maxlength, min: this.min, max: this.max, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, "aria-invalid": this.hasError ? 'true' : 'false', "aria-describedby": this.hasError ? 'error-messages' : undefined }), h("div", { key: '24a63d349c6a425854ed76c6ddb4a30ed5e91566', class: "xplor-text-field__append-inner" }, this.clearable && this.hasValue && !this.disabled && !this.readonly && (h("button", { key: '9145e93c91f67f98f0759370515552c66aeaae28', type: "button", class: "xplor-text-field__clear-btn", onClick: this.handleClear, "aria-label": "Clear" }, h("svg", { key: '8dc823a286290bc563939bdee1b13bac39a6596d', width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: 'd2f82e862b8331992aadd769366ef4bae2b744fd', d: "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" })))), h("slot", { key: '40cc5d4ba05c8e13a4697af6da86069b8f8d0003', name: "append-inner" })), h("fieldset", { key: 'd066e7b23972b722cd9e1dca0a008ba3e412cde7', class: "xplor-text-field__outline" }, h("legend", { key: 'b8a3597b17f85b6877499cf7d984a874b0a124eb', class: { 'xplor-text-field__outline-legend': true, 'xplor-text-field__outline-legend--floating': labelFloating } }, labelFloating && this.label ? h("span", null, this.label, this.required && '*') : h("span", null, "\u200B")))), h("div", { key: 'b116ffbdb2e0fa04aee252137c3300c5939df4e4', class: "xplor-text-field__append" }, h("slot", { key: '5ff712dd69e453d488f3fc3cdad49a72ed9d5779', name: "append" }))), this.showDetails && (h("div", { key: '48ffb972bfb61eab4c33c61a4610f54ab6172cf6', class: "xplor-text-field__details" }, this.hasError && (h("div", { key: '301bcf461bc00f3c4f5c5a322781f43a8451a597', id: "error-messages", class: "xplor-text-field__error-messages" }, this.errorMessages.map((error) => (h("div", { class: "xplor-text-field__error" }, error))))))))));
     }
     get el() { return this; }
     static get watchers() { return {