@xplor-education/core-stencil-components 2.0.0

package/components/xplor-input-select.js

@@ -0,0 +1,168 @@
+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 XplorInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputSelect extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.xplorChange = createEvent(this, "xplorChange");
+        /**
+         * Selected value(s)
+         */
+        this.value = null;
+        /**
+         * Input label
+         */
+        this.label = '';
+        /**
+         * Input placeholder
+         */
+        this.placeholder = 'Select...';
+        /**
+         * Options array
+         */
+        this.options = [];
+        /**
+         * Whether multiple selection is allowed
+         */
+        this.multiple = false;
+        /**
+         * Background color
+         */
+        this.bgColor = 'white';
+        /**
+         * Border/focus color
+         */
+        this.color = '#008480';
+        /**
+         * Whether the select is disabled
+         */
+        this.disabled = false;
+        /**
+         * Whether the select is readonly
+         */
+        this.readonly = false;
+        /**
+         * Whether to hide validation details
+         */
+        this.hideDetails = 'auto';
+        /**
+         * Error message
+         */
+        this.error = '';
+        /**
+         * Helper text
+         */
+        this.helperText = '';
+        /**
+         * Whether the input is required
+         */
+        this.required = false;
+        this.isOpen = false;
+        this.isFocused = false;
+        this.handleOutsideClick = (event) => {
+            if (this.selectRef && !this.selectRef.contains(event.target)) {
+                this.isOpen = false;
+            }
+        };
+        this.toggleDropdown = () => {
+            if (!this.disabled && !this.readonly) {
+                this.isOpen = !this.isOpen;
+            }
+        };
+        this.handleOptionClick = (option) => {
+            if (this.multiple) {
+                const currentValue = Array.isArray(this.value) ? this.value : [];
+                const index = currentValue.findIndex((v) => v === option.value);
+                if (index > -1) {
+                    this.value = currentValue.filter((_, i) => i !== index);
+                }
+                else {
+                    this.value = [...currentValue, option.value];
+                }
+            }
+            else {
+                this.value = option.value;
+                this.isOpen = false;
+            }
+            this.xplorChange.emit(this.value);
+        };
+        this.isSelected = (option) => {
+            if (this.multiple) {
+                const currentValue = Array.isArray(this.value) ? this.value : [];
+                return currentValue.includes(option.value);
+            }
+            return this.value === option.value;
+        };
+        this.getDisplayValue = () => {
+            if (this.multiple) {
+                const currentValue = Array.isArray(this.value) ? this.value : [];
+                if (currentValue.length === 0)
+                    return this.placeholder;
+                const selectedOptions = this.options.filter((opt) => currentValue.includes(opt.value));
+                return `${selectedOptions.length} selected`;
+            }
+            const selectedOption = this.options.find((opt) => opt.value === this.value);
+            return selectedOption ? selectedOption.title : this.placeholder;
+        };
+    }
+    componentDidLoad() {
+        document.addEventListener('click', this.handleOutsideClick);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleOutsideClick);
+    }
+    render() {
+        const containerClasses = {
+            'xplor-input-select': true,
+            'xplor-input-select--open': this.isOpen,
+            'xplor-input-select--focused': this.isFocused,
+            'xplor-input-select--disabled': this.disabled,
+            '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: {
+                '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))))));
+    }
+    static get style() { return xplorInputSelectCss; }
+}, [2, "xplor-input-select", {
+        "value": [1032],
+        "label": [1],
+        "placeholder": [1],
+        "options": [16],
+        "multiple": [4],
+        "bgColor": [1, "bg-color"],
+        "color": [1],
+        "disabled": [4],
+        "readonly": [4],
+        "hideDetails": [8, "hide-details"],
+        "error": [1],
+        "helperText": [1, "helper-text"],
+        "required": [4],
+        "isOpen": [32],
+        "isFocused": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-input-select"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-input-select":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorInputSelect$1);
+            }
+            break;
+    } });
+}
+
+const XplorInputSelect = XplorInputSelect$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorInputSelect, defineCustomElement };
+//# sourceMappingURL=xplor-input-select.js.map
+
+//# sourceMappingURL=xplor-input-select.js.map

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

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

package/components/xplor-input-send.d.ts

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

package/components/xplor-input-send.js

@@ -0,0 +1,87 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { d as defineCustomElement$2 } from './p-CBSi5kQB.js';
+
+const xplorInputSendCss = "@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-send {\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-send {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-input-send {\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-send {\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-send {\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-send {\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-send, ul.sc-xplor-input-send {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-input-send li.sc-xplor-input-send, ul.sc-xplor-input-send li.sc-xplor-input-send {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-input-send, ul.mdc-list.sc-xplor-input-send {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-input-send li.mdc-list-item.sc-xplor-input-send, ul.mdc-list.sc-xplor-input-send li.mdc-list-item.sc-xplor-input-send {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-input-send {\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-send {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-input-send {\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-send {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-input-send .mdc-text-field--outlined.sc-xplor-input-send .mdc-notched-outline__notch.sc-xplor-input-send {\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-send .mdc-notched-outline__notch.sc-xplor-input-send {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-input-send .mdc-notched-outline.sc-xplor-input-send .mdc-notched-outline__notch.sc-xplor-input-send {\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-send {\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-send: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-send {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-input-send-h {\n  display: block;\n  width: 100%;\n}\n\n.input-send.sc-xplor-input-send {\n  display: flex;\n  gap: 0.5rem;\n  align-items: stretch;\n  width: 100%;\n}\n.input-send--disabled.sc-xplor-input-send {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.input-send__input.sc-xplor-input-send {\n  flex: 1;\n  padding: 0.75rem 1rem;\n  border: 1px solid #bdbdbd;\n  border-radius: 4px;\n  font-family: inherit;\n  font-size: 1rem;\n  line-height: 1.5;\n  color: #212121;\n  background-color: #fff;\n  transition: border-color 0.2s, box-shadow 0.2s;\n}\n.input-send__input.sc-xplor-input-send:focus {\n  outline: none;\n  border-color: #1976d2;\n  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);\n}\n.input-send__input.sc-xplor-input-send::placeholder {\n  color: #9e9e9e;\n}\n.input-send__input.sc-xplor-input-send:disabled {\n  background-color: #f5f5f5;\n  cursor: not-allowed;\n}\n\n.input-send__button.sc-xplor-input-send {\n  flex-shrink: 0;\n}";
+
+const XplorInputSend$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputSend extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.xplorSend = createEvent(this, "xplorSend");
+        this.xplorValueChange = createEvent(this, "xplorValueChange");
+        this.placeholder = 'Type a message...';
+        this.disabled = false;
+        this.value = '';
+        this.buttonText = 'Send';
+        this.buttonType = 'primary';
+        this.internalValue = '';
+        this.handleInput = (event) => {
+            const input = event.target;
+            this.internalValue = input.value;
+            this.value = input.value;
+            this.xplorValueChange.emit(input.value);
+        };
+        this.handleKeyDown = (event) => {
+            if (event.key === 'Enter' && !event.shiftKey) {
+                event.preventDefault();
+                this.handleSend();
+            }
+        };
+        this.handleSend = () => {
+            if (this.disabled || !this.internalValue.trim()) {
+                return;
+            }
+            this.xplorSend.emit(this.internalValue.trim());
+            this.internalValue = '';
+            this.value = '';
+            // Focus back on input after sending
+            if (this.inputEl) {
+                this.inputEl.focus();
+            }
+        };
+    }
+    componentWillLoad() {
+        this.internalValue = this.value;
+    }
+    render() {
+        return (h(Host, { key: 'bbf2f299e9c78afed930b178f67494f3c9171ca0' }, h("div", { key: 'a9e29fbc660b5fcc9ad5e8c0a543d39b39073cf9', 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 }))));
+    }
+    static get style() { return xplorInputSendCss; }
+}, [2, "xplor-input-send", {
+        "placeholder": [1],
+        "disabled": [4],
+        "maxLength": [2, "max-length"],
+        "value": [1025],
+        "buttonText": [1, "button-text"],
+        "buttonType": [1, "button-type"],
+        "internalValue": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-input-send", "xplor-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-input-send":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorInputSend$1);
+            }
+            break;
+        case "xplor-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const XplorInputSend = XplorInputSend$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorInputSend, defineCustomElement };
+//# sourceMappingURL=xplor-input-send.js.map
+
+//# sourceMappingURL=xplor-input-send.js.map

package/components/xplor-input-send.js.map

@@ -0,0 +1 @@
+{"file":"xplor-input-send.js","mappings":"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","names":["XplorInputSend","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-input-send/xplor-input-send.scss?tag=xplor-input-send&encapsulation=scoped","src/components/xplor-input-send/xplor-input-send.tsx"],"sourcesContent":[":host {\n    display: block;\n    width: 100%;\n}\n\n.input-send {\n    display: flex;\n    gap: 0.5rem;\n    align-items: stretch;\n    width: 100%;\n\n    &--disabled {\n        opacity: 0.6;\n        cursor: not-allowed;\n    }\n}\n\n.input-send__input {\n    flex: 1;\n    padding: 0.75rem 1rem;\n    border: 1px solid #bdbdbd;\n    border-radius: 4px;\n    font-family: inherit;\n    font-size: 1rem;\n    line-height: 1.5;\n    color: #212121;\n    background-color: #fff;\n    transition: border-color 0.2s, box-shadow 0.2s;\n\n    &:focus {\n        outline: none;\n        border-color: #1976d2;\n        box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);\n    }\n\n    &::placeholder {\n        color: #9e9e9e;\n    }\n\n    &:disabled {\n        background-color: #f5f5f5;\n        cursor: not-allowed;\n    }\n}\n\n.input-send__button {\n    flex-shrink: 0;\n}","import { Component, Host, h, Prop, State, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n    tag: 'xplor-input-send',\n    styleUrl: 'xplor-input-send.scss',\n    scoped: true,\n})\nexport class XplorInputSend {\n    @Prop() placeholder: string = 'Type a message...';\n    @Prop() disabled: boolean = false;\n    @Prop() maxLength: number;\n    @Prop({ mutable: true }) value: string = '';\n    @Prop() buttonText: string = 'Send';\n    @Prop() buttonType: 'primary' | 'secondary' | 'ghost' = 'primary';\n\n    @State() internalValue: string = '';\n\n    @Event() xplorSend: EventEmitter<string>;\n    @Event() xplorValueChange: EventEmitter<string>;\n\n    private inputEl: HTMLInputElement;\n\n    componentWillLoad() {\n        this.internalValue = this.value;\n    }\n\n    private handleInput = (event: Event) => {\n        const input = event.target as HTMLInputElement;\n        this.internalValue = input.value;\n        this.value = input.value;\n        this.xplorValueChange.emit(input.value);\n    };\n\n    private handleKeyDown = (event: KeyboardEvent) => {\n        if (event.key === 'Enter' && !event.shiftKey) {\n            event.preventDefault();\n            this.handleSend();\n        }\n    };\n\n    private handleSend = () => {\n        if (this.disabled || !this.internalValue.trim()) {\n            return;\n        }\n\n        this.xplorSend.emit(this.internalValue.trim());\n        this.internalValue = '';\n        this.value = '';\n\n        // Focus back on input after sending\n        if (this.inputEl) {\n            this.inputEl.focus();\n        }\n    };\n\n    render() {\n        return (\n            <Host>\n                <div\n                    class={{\n                        'input-send': true,\n                        'input-send--disabled': this.disabled,\n                    }}\n                >\n                    <input\n                        ref={(el) => (this.inputEl = el)}\n                        type=\"text\"\n                        class=\"input-send__input\"\n                        placeholder={this.placeholder}\n                        value={this.internalValue}\n                        onInput={this.handleInput}\n                        onKeyDown={this.handleKeyDown}\n                        disabled={this.disabled}\n                        maxLength={this.maxLength}\n                    />\n                    <xplor-button\n                        class=\"input-send__button\"\n                        text={this.buttonText}\n                        type={this.disabled || !this.internalValue.trim() ? 'disabled' : this.buttonType}\n                        onClick={this.handleSend}\n                    />\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/components/xplor-input-text-area.d.ts

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

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

@@ -0,0 +1,131 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+
+const xplorInputTextAreaCss = "@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-text-area {\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-text-area {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-input-text-area {\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-text-area {\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-text-area {\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-text-area {\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-text-area, ul.sc-xplor-input-text-area {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-input-text-area li.sc-xplor-input-text-area, ul.sc-xplor-input-text-area li.sc-xplor-input-text-area {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-input-text-area, ul.mdc-list.sc-xplor-input-text-area {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-input-text-area li.mdc-list-item.sc-xplor-input-text-area, ul.mdc-list.sc-xplor-input-text-area li.mdc-list-item.sc-xplor-input-text-area {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-input-text-area {\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-text-area {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-input-text-area {\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-text-area {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-input-text-area .mdc-text-field--outlined.sc-xplor-input-text-area .mdc-notched-outline__notch.sc-xplor-input-text-area {\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-text-area .mdc-notched-outline__notch.sc-xplor-input-text-area {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-input-text-area .mdc-notched-outline.sc-xplor-input-text-area .mdc-notched-outline__notch.sc-xplor-input-text-area {\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-text-area {\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-text-area: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-text-area {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-input-text-area-h {\n  display: block;\n}\n\n.xplor-input-text-area.sc-xplor-input-text-area {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n.xplor-input-text-area__label.sc-xplor-input-text-area {\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.6);\n  margin-bottom: 0.25rem;\n}\n.xplor-input-text-area__required.sc-xplor-input-text-area {\n  color: #d32f2f;\n  margin-left: 0.25rem;\n}\n.xplor-input-text-area__field.sc-xplor-input-text-area {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n}\n.xplor-input-text-area__input.sc-xplor-input-text-area {\n  width: 100%;\n  padding: 0.875rem 1rem;\n  font-size: 1rem;\n  font-family: inherit;\n  border: 1px solid rgba(0, 0, 0, 0.23);\n  border-radius: 1rem;\n  outline: none;\n  resize: vertical;\n  min-height: 56px;\n  transition: border-color 0.2s ease;\n}\n.xplor-input-text-area__input.sc-xplor-input-text-area::placeholder {\n  color: rgba(0, 0, 0, 0.38);\n}\n.xplor-input-text-area__input.sc-xplor-input-text-area:hover:not(:disabled) {\n  border-color: rgba(0, 0, 0, 0.6);\n}\n.xplor-input-text-area__input.sc-xplor-input-text-area:focus {\n  border-color: #008480;\n  border-width: 2px;\n  padding: calc(0.875rem - 1px) calc(1rem - 1px);\n}\n.xplor-input-text-area__input.sc-xplor-input-text-area:disabled {\n  background-color: rgba(0, 0, 0, 0.04);\n  color: rgba(0, 0, 0, 0.38);\n  cursor: not-allowed;\n  resize: none;\n}\n.xplor-input-text-area__input.sc-xplor-input-text-area:read-only {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.xplor-input-text-area__clear.sc-xplor-input-text-area {\n  position: absolute;\n  right: 0.75rem;\n  top: 0.75rem;\n  width: 1.5rem;\n  height: 1.5rem;\n  border: none;\n  background: transparent;\n  color: rgba(0, 0, 0, 0.54);\n  cursor: pointer;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color 0.2s ease;\n}\n.xplor-input-text-area__clear.sc-xplor-input-text-area:hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.xplor-input-text-area__clear.sc-xplor-input-text-area:active {\n  background-color: rgba(0, 0, 0, 0.08);\n}\n.xplor-input-text-area--error.sc-xplor-input-text-area .xplor-input-text-area__input.sc-xplor-input-text-area {\n  border-color: #d32f2f;\n}\n.xplor-input-text-area__details.sc-xplor-input-text-area {\n  min-height: 1.25rem;\n  padding: 0 1rem;\n  font-size: 0.75rem;\n}\n.xplor-input-text-area__error-message.sc-xplor-input-text-area {\n  color: #d32f2f;\n}\n.xplor-input-text-area__helper-text.sc-xplor-input-text-area {\n  color: rgba(0, 0, 0, 0.6);\n}";
+
+const XplorInputTextArea$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputTextArea extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.xplorInput = createEvent(this, "xplorInput");
+        this.xplorChange = createEvent(this, "xplorChange");
+        this.xplorClear = createEvent(this, "xplorClear");
+        /**
+         * Input value
+         */
+        this.value = '';
+        /**
+         * Input label
+         */
+        this.label = '';
+        /**
+         * Input placeholder
+         */
+        this.placeholder = '';
+        /**
+         * Background color
+         */
+        this.bgColor = 'white';
+        /**
+         * Border/focus color
+         */
+        this.color = '#008480';
+        /**
+         * Whether the input is disabled
+         */
+        this.disabled = false;
+        /**
+         * Whether the input is readonly
+         */
+        this.readonly = false;
+        /**
+         * Whether to show clear button
+         */
+        this.clearable = true;
+        /**
+         * Number of rows
+         */
+        this.rows = 3;
+        /**
+         * Whether to hide validation details
+         */
+        this.hideDetails = 'auto';
+        /**
+         * Error message
+         */
+        this.error = '';
+        /**
+         * Helper text
+         */
+        this.helperText = '';
+        /**
+         * Whether the input is required
+         */
+        this.required = false;
+        this.isFocused = false;
+        this.handleInput = (event) => {
+            const target = event.target;
+            this.value = target.value;
+            this.xplorInput.emit(this.value);
+        };
+        this.handleChange = (event) => {
+            const target = event.target;
+            this.value = target.value;
+            this.xplorChange.emit(this.value);
+        };
+        this.handleClear = () => {
+            this.value = '';
+            this.xplorClear.emit();
+            this.xplorChange.emit(this.value);
+        };
+    }
+    render() {
+        const containerClasses = {
+            'xplor-input-text-area': true,
+            'xplor-input-text-area--focused': this.isFocused,
+            'xplor-input-text-area--disabled': this.disabled,
+            'xplor-input-text-area--error': !!this.error,
+        };
+        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: {
+                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))))));
+    }
+    static get style() { return xplorInputTextAreaCss; }
+}, [2, "xplor-input-text-area", {
+        "value": [1025],
+        "label": [1],
+        "placeholder": [1],
+        "bgColor": [1, "bg-color"],
+        "color": [1],
+        "disabled": [4],
+        "readonly": [4],
+        "clearable": [4],
+        "rows": [2],
+        "hideDetails": [8, "hide-details"],
+        "error": [1],
+        "helperText": [1, "helper-text"],
+        "required": [4],
+        "isFocused": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-input-text-area"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-input-text-area":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorInputTextArea$1);
+            }
+            break;
+    } });
+}
+
+const XplorInputTextArea = XplorInputTextArea$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorInputTextArea, defineCustomElement };
+//# sourceMappingURL=xplor-input-text-area.js.map
+
+//# sourceMappingURL=xplor-input-text-area.js.map

package/components/xplor-input-text-area.js.map

@@ -0,0 +1 @@
+{"file":"xplor-input-text-area.js","mappings":"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","names":["XplorInputTextArea","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-input-text-area/xplor-input-text-area.scss?tag=xplor-input-text-area&encapsulation=scoped","src/components/xplor-input-text-area/xplor-input-text-area.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.xplor-input-text-area {\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    position: relative;\n    display: flex;\n    align-items: flex-start;\n  }\n\n  &__input {\n    width: 100%;\n    padding: 0.875rem 1rem;\n    font-size: 1rem;\n    font-family: inherit;\n    border: 1px solid rgba(0, 0, 0, 0.23);\n    border-radius: 1rem;\n    outline: none;\n    resize: vertical;\n    min-height: 56px;\n    transition: border-color 0.2s ease;\n\n    &::placeholder {\n      color: rgba(0, 0, 0, 0.38);\n    }\n\n    &:hover:not(:disabled) {\n      border-color: rgba(0, 0, 0, 0.6);\n    }\n\n    &:focus {\n      border-color: #008480;\n      border-width: 2px;\n      padding: calc(0.875rem - 1px) calc(1rem - 1px);\n    }\n\n    &:disabled {\n      background-color: rgba(0, 0, 0, 0.04);\n      color: rgba(0, 0, 0, 0.38);\n      cursor: not-allowed;\n      resize: none;\n    }\n\n    &:read-only {\n      background-color: rgba(0, 0, 0, 0.04);\n    }\n  }\n\n  &__clear {\n    position: absolute;\n    right: 0.75rem;\n    top: 0.75rem;\n    width: 1.5rem;\n    height: 1.5rem;\n    border: none;\n    background: transparent;\n    color: rgba(0, 0, 0, 0.54);\n    cursor: pointer;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: background-color 0.2s ease;\n\n    &:hover {\n      background-color: rgba(0, 0, 0, 0.04);\n    }\n\n    &:active {\n      background-color: rgba(0, 0, 0, 0.08);\n    }\n  }\n\n  &--error {\n    .xplor-input-text-area__input {\n      border-color: #d32f2f;\n    }\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\n@Component({\n  tag: 'xplor-input-text-area',\n  styleUrl: 'xplor-input-text-area.scss',\n  scoped: true,\n})\nexport class XplorInputTextArea {\n  /**\n   * Input value\n   */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * Input label\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Input placeholder\n   */\n  @Prop() placeholder: string = '';\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 input is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the input is readonly\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * Whether to show clear button\n   */\n  @Prop() clearable: boolean = true;\n\n  /**\n   * Number of rows\n   */\n  @Prop() rows: number = 3;\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   * Input event\n   */\n  @Event() xplorInput: EventEmitter<string>;\n\n  /**\n   * Change event\n   */\n  @Event() xplorChange: EventEmitter<string>;\n\n  /**\n   * Clear event\n   */\n  @Event() xplorClear: EventEmitter<void>;\n\n  @State() isFocused: boolean = false;\n\n  private handleInput = (event: Event) => {\n    const target = event.target as HTMLTextAreaElement;\n    this.value = target.value;\n    this.xplorInput.emit(this.value);\n  };\n\n  private handleChange = (event: Event) => {\n    const target = event.target as HTMLTextAreaElement;\n    this.value = target.value;\n    this.xplorChange.emit(this.value);\n  };\n\n  private handleClear = () => {\n    this.value = '';\n    this.xplorClear.emit();\n    this.xplorChange.emit(this.value);\n  };\n\n  render() {\n    const containerClasses = {\n      'xplor-input-text-area': true,\n      'xplor-input-text-area--focused': this.isFocused,\n      'xplor-input-text-area--disabled': this.disabled,\n      'xplor-input-text-area--error': !!this.error,\n    };\n\n    const showClearButton = this.clearable && this.value && !this.readonly && !this.disabled;\n    const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          {this.label && (\n            <label class=\"xplor-input-text-area__label\">\n              {this.label}\n              {this.required && <span class=\"xplor-input-text-area__required\">*</span>}\n            </label>\n          )}\n\n          <div class=\"xplor-input-text-area__field\">\n            <textarea\n              class=\"xplor-input-text-area__input\"\n              value={this.value}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              readonly={this.readonly}\n              required={this.required}\n              rows={this.rows}\n              onInput={this.handleInput}\n              onChange={this.handleChange}\n              onFocus={() => (this.isFocused = true)}\n              onBlur={() => (this.isFocused = false)}\n              style={{\n                backgroundColor: this.bgColor,\n              }}\n            />\n            {showClearButton && (\n              <button\n                type=\"button\"\n                class=\"xplor-input-text-area__clear\"\n                onClick={this.handleClear}\n                aria-label=\"Clear\"\n              >\n                ✕\n              </button>\n            )}\n          </div>\n\n          {showDetails && (\n            <div class=\"xplor-input-text-area__details\">\n              {this.error && <div class=\"xplor-input-text-area__error-message\">{this.error}</div>}\n              {!this.error && this.helperText && <div class=\"xplor-input-text-area__helper-text\">{this.helperText}</div>}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/xplor-input-text-secondary.d.ts

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