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

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

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

Files changed (318) hide show

package/dist/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 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}
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, Element, Listen } 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 @Element() el: HTMLElement;\n\n private selectRef: HTMLDivElement;\n private fieldRef: HTMLDivElement;\n\n /*\n Accessible label for the select when no visible label is provided\n /\n @Prop() ariaLabel: string;\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 @State() highlightedIndex: number = -1;\n\n componentDidLoad() {\n document.addEventListener('click', this.handleOutsideClick);\n }\n\n disconnectedCallback() {\n document.removeEventListener('click', this.handleOutsideClick);\n }\n\n @Listen('keydown')\n handleKeyDown(event: KeyboardEvent) {\n const totalOptions = this.options.length;\n if (totalOptions === 0) return;\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n if (!this.isOpen) {\n this.updateMenuPosition();\n this.isOpen = true;\n this.highlightedIndex = 0;\n } else {\n this.highlightedIndex = this.highlightedIndex < totalOptions - 1 ? this.highlightedIndex + 1 : 0;\n }\n this.scrollToHighlightedOption();\n break;\n\n case 'ArrowUp':\n event.preventDefault();\n if (!this.isOpen) {\n this.updateMenuPosition();\n this.isOpen = true;\n this.highlightedIndex = totalOptions - 1;\n } else {\n this.highlightedIndex = this.highlightedIndex > 0 ? this.highlightedIndex - 1 : totalOptions - 1;\n }\n this.scrollToHighlightedOption();\n break;\n\n case 'Enter':\n case ' ':\n event.preventDefault();\n if (this.isOpen && this.highlightedIndex >= 0 && this.highlightedIndex < totalOptions) {\n this.handleOptionClick(this.options[this.highlightedIndex]);\n } else if (!this.isOpen) {\n this.toggleDropdown();\n }\n break;\n\n case 'Escape':\n event.preventDefault();\n this.isOpen = false;\n this.highlightedIndex = -1;\n this.fieldRef?.focus();\n break;\n\n case 'Home':\n if (this.isOpen) {\n event.preventDefault();\n this.highlightedIndex = 0;\n this.scrollToHighlightedOption();\n }\n break;\n\n case 'End':\n if (this.isOpen) {\n event.preventDefault();\n this.highlightedIndex = totalOptions - 1;\n this.scrollToHighlightedOption();\n }\n break;\n\n case 'Tab':\n this.isOpen = false;\n this.highlightedIndex = -1;\n break;\n }\n }\n\n private scrollToHighlightedOption() {\n requestAnimationFrame(() => {\n if (this.selectRef && this.highlightedIndex >= 0) {\n const highlightedEl = this.selectRef.querySelector(`[data-option-index=\"${this.highlightedIndex}\"]`) as HTMLElement;\n if (highlightedEl) {\n highlightedEl.scrollIntoView({ block: 'nearest' });\n }\n }\n });\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 this.highlightedIndex = -1;\n }\n this.isOpen = !this.isOpen;\n if (!this.isOpen) {\n this.highlightedIndex = -1;\n }\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 const listboxId = 'input-select-listbox';\n const labelId = 'input-select-label';\n const errorId = 'input-select-error';\n const helperId = 'input-select-helper';\n const activeDescendantId = this.highlightedIndex >= 0 ? `input-select-option-${this.highlightedIndex}` : undefined;\n\n // Build aria-describedby from error/helper text\n const describedByParts: string[] = [];\n if (this.error) describedByParts.push(errorId);\n if (!this.error && this.helperText) describedByParts.push(helperId);\n const ariaDescribedBy = describedByParts.length > 0 ? describedByParts.join(' ') : undefined;\n\n return (\n <Host>\n <div class={containerClasses} ref={(el) => (this.selectRef = el)}>\n {this.label && (\n <label class=\"xplor-input-select__label\" id={labelId}>\n {this.label}\n {this.required && <span class=\"xplor-input-select__required\"></span>}\n </label>\n )}\n\n <div\n class=\"xplor-input-select__field\"\n onClick={this.toggleDropdown}\n ref={(el) => (this.fieldRef = el)}\n role=\"combobox\"\n tabindex={this.disabled ? -1 : 0}\n aria-expanded={this.isOpen ? 'true' : 'false'}\n aria-haspopup=\"listbox\"\n aria-controls={this.isOpen ? listboxId : undefined}\n aria-activedescendant={activeDescendantId}\n aria-labelledby={this.label ? labelId : undefined}\n aria-label={!this.label ? (this.ariaLabel \|\| this.placeholder) : undefined}\n aria-describedby={ariaDescribedBy}\n aria-required={this.required ? 'true' : undefined}\n aria-disabled={this.disabled ? 'true' : undefined}\n >\n <div class=\"xplor-input-select__value\">\n {this.getDisplayValue()}\n </div>\n <span class=\"xplor-input-select__arrow\" aria-hidden=\"true\">{this.isOpen ? '▲' : '▼'}</span>\n </div>\n\n {this.isOpen && this.menuPosition && (\n <div\n class=\"xplor-input-select__menu\"\n role=\"listbox\"\n id={listboxId}\n aria-label={this.label \|\| this.ariaLabel \|\| 'Options'}\n aria-multiselectable={this.multiple ? 'true' : undefined}\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\" role=\"option\" aria-disabled=\"true\">No options available</div>\n ) : (\n this.options.map((option, index) => {\n const selected = this.isSelected(option);\n return (\n <div\n key={option.value}\n id={`input-select-option-${index}`}\n data-option-index={index}\n role=\"option\"\n aria-selected={selected ? 'true' : 'false'}\n class={{\n 'xplor-input-select__option': true,\n 'xplor-input-select__option--selected': selected,\n 'xplor-input-select__option--highlighted': index === this.highlightedIndex,\n }}\n onClick={() => this.handleOptionClick(option)}\n >\n {this.multiple && (\n <input\n type=\"checkbox\"\n class=\"xplor-input-select__checkbox\"\n checked={selected}\n readOnly\n tabindex={-1}\n aria-checked={selected ? 'true' : 'false'}\n aria-hidden=\"true\"\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 )}\n </div>\n )}\n\n {showDetails && (\n <div class=\"xplor-input-select__details\">\n {this.error && <div class=\"xplor-input-select__error-message\" id={errorId} role=\"alert\">{this.error}</div>}\n {!this.error && this.helperText && <div class=\"xplor-input-select__helper-text\" id={helperId}>{this.helperText}</div>}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
-import { d as defineCustomElement$2 } from './p-DIv_A5Gj.js';
+import { d as defineCustomElement$2 } from './p-B5rS_jjI.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}";
@@ -44,10 +44,10 @@ const XplorInputSend$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputSend e
         this.internalValue = this.value;
     }
     render() {
-        return (h(Host, { key: '87d0d49d2a9e9061152b294e6b7a91ffae7f39b0' }, h("div", { key: 'ef857693127c5945ff78c20e431609b051df32e7', class: {
+        return (h(Host, { key: 'bcce41da602a265f2ee48f278e1f173dcb7a478c' }, h("div", { key: '5db92c3276ea1e021fa872d8f7b34e0c20b6d6ea', class: {
                 'input-send': true,
                 'input-send--disabled': this.disabled,
-            } }, 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 }))));
+            } }, h("input", { key: '9395e4d6f8190e3010fd9c0323a4a4c51643c998', 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, "aria-label": this.placeholder || 'Type a message' }), h("xplor-button", { key: 'f4d9784400fd7c31c2766af49fe3971216f5828f', 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/dist/components/xplor-input-send.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"xplor-input-send.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,o+OAAo+O;;MCOj/OA,gBAAc,iBAAAC,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;AAL3B,IAAA,WAAA,GAAA;;;;;AAMY,QAAA,IAAW,CAAA,WAAA,GAAW,mBAAmB;AACzC,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAER,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AACnC,QAAA,IAAU,CAAA,UAAA,GAAW,MAAM;AAC3B,QAAA,IAAU,CAAA,UAAA,GAAsC,SAAS;AAExD,QAAA,IAAa,CAAA,aAAA,GAAW,EAAE;AAW3B,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAY,KAAI;AACnC,YAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B;AAC9C,YAAA,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,KAAK;AAChC,YAAA,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK;YACxB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;AAC3C,SAAC;AAEO,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,KAAoB,KAAI;YAC7C,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;gBAC1C,KAAK,CAAC,cAAc,EAAE;gBACtB,IAAI,CAAC,UAAU,EAAE;;AAEzB,SAAC;AAEO,QAAA,IAAU,CAAA,UAAA,GAAG,MAAK;AACtB,YAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,EAAE;gBAC7C;;AAGJ,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;AAC9C,YAAA,IAAI,CAAC,aAAa,GAAG,EAAE;AACvB,YAAA,IAAI,CAAC,KAAK,GAAG,EAAE;;AAGf,YAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AACd,gBAAA,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;;AAE5B,SAAC;~~AAgCJ~~;~~IA/DG~~,iBAAiB,GAAA;AACb,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK;;IAgCnC,MAAM,GAAA;QACF,QACI,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAE;AACH,gBAAA,YAAY,EAAE,IAAI;gBAClB,sBAAsB,EAAE,IAAI,CAAC,QAAQ;AACxC,aAAA,EAAA,EAED,~~CACI~~,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,~~EAAA~~,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAChC,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,mBAAmB,EACzB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,aAAa,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,~~EAC3B~~,CAAA,EACF,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAC,oBAAoB,EAC1B,IAAI,EAAE,IAAI,CAAC,UAAU,EACrB,IAAI,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,GAAG,UAAU,GAAG,IAAI,CAAC,UAAU,EAChF,OAAO,EAAE,IAAI,CAAC,UAAU,GAC1B,CACA,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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}
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 aria-label={this.placeholder \|\| 'Type a message'}\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/dist/components/xplor-input-text-area.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './in
 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}";
+let inputTextAreaIdCounter = 0;
 const XplorInputTextArea$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputTextArea extends H {
     constructor() {
         super();
@@ -9,6 +10,9 @@ const XplorInputTextArea$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputTe
         this.xplorInput = createEvent(this, "xplorInput");
         this.xplorChange = createEvent(this, "xplorChange");
         this.xplorClear = createEvent(this, "xplorClear");
+        this.inputId = `xplor-input-text-area-${++inputTextAreaIdCounter}`;
+        this.errorId = `${this.inputId}-error`;
+        this.helperId = `${this.inputId}-helper`;
         /**
          * Input value
          */
@@ -87,9 +91,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: '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: {
+        return (h(Host, { key: '8d29b69ab2e27bd4e1b285cf2c592b22a79518f2' }, h("div", { key: 'd6fa4df24c83488f1e88e8e9ddffeed3c4ebd0d7', class: containerClasses }, this.label && (h("label", { key: '5be952c8c6ce762a578d22da1b883512118ea3d4', class: "xplor-input-text-area__label", htmlFor: this.inputId }, this.label, this.required && h("span", { key: '20c3fd980d575e9e0c3f5573d02556bf9e14099e', class: "xplor-input-text-area__required" }, "*"))), h("div", { key: 'bd37545a117401be68d17f0346321e35d39e544a', class: "xplor-input-text-area__field" }, h("textarea", { key: '164d86d89c96572adca9deec4292b8339c8efd50', id: this.inputId, 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: '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))))));
+            }, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.error ? this.errorId : this.helperText ? this.helperId : undefined }), showClearButton && (h("button", { key: 'a818cd20c397af9517c1ed013f534ee2d53ccfc3', type: "button", class: "xplor-input-text-area__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715"))), showDetails && (h("div", { key: '6b2a6d5a6d8d7e66eef815dbebf3e2ea1c4f80b7', class: "xplor-input-text-area__details" }, this.error && h("div", { key: '8e22ad68e9a5609b7abfa30751685c570c0e3dca', class: "xplor-input-text-area__error-message", id: this.errorId }, this.error), !this.error && this.helperText && h("div", { key: '0eaa1976d2ac0c2e25c301fd23e690f28d9a3494', class: "xplor-input-text-area__helper-text", id: this.helperId }, this.helperText))))));
     }
     static get style() { return xplorInputTextAreaCss; }
 }, [2, "xplor-input-text-area", {

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

	@@ -1 +1 @@
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}
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\nlet inputTextAreaIdCounter = 0;\n\n@Component({\n tag: 'xplor-input-text-area',\n styleUrl: 'xplor-input-text-area.scss',\n scoped: true,\n})\nexport class XplorInputTextArea {\n private inputId = `xplor-input-text-area-${++inputTextAreaIdCounter}`;\n private errorId = `${this.inputId}-error`;\n private helperId = `${this.inputId}-helper`;\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\" htmlFor={this.inputId}>\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 id={this.inputId}\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 aria-invalid={this.error ? 'true' : undefined}\n aria-required={this.required ? 'true' : undefined}\n aria-describedby={this.error ? this.errorId : this.helperText ? this.helperId : undefined}\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\" id={this.errorId}>{this.error}</div>}\n {!this.error && this.helperText && <div class=\"xplor-input-text-area__helper-text\" id={this.helperId}>{this.helperText}</div>}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -2,6 +2,7 @@ import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './in
 const xplorInputTextSecondaryCss = "@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-secondary {\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-secondary {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-input-text-secondary {\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-secondary {\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-secondary {\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-secondary {\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-secondary, ul.sc-xplor-input-text-secondary {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-input-text-secondary li.sc-xplor-input-text-secondary, ul.sc-xplor-input-text-secondary li.sc-xplor-input-text-secondary {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-input-text-secondary, ul.mdc-list.sc-xplor-input-text-secondary {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-input-text-secondary li.mdc-list-item.sc-xplor-input-text-secondary, ul.mdc-list.sc-xplor-input-text-secondary li.mdc-list-item.sc-xplor-input-text-secondary {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-input-text-secondary {\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-secondary {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-input-text-secondary {\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-secondary {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-input-text-secondary .mdc-text-field--outlined.sc-xplor-input-text-secondary .mdc-notched-outline__notch.sc-xplor-input-text-secondary {\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-secondary .mdc-notched-outline__notch.sc-xplor-input-text-secondary {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-input-text-secondary .mdc-notched-outline.sc-xplor-input-text-secondary .mdc-notched-outline__notch.sc-xplor-input-text-secondary {\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-secondary {\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-secondary: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-secondary {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-input-text-secondary-h {\n  display: block;\n}\n\n.input-secondary.sc-xplor-input-text-secondary {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n.input-secondary__label.sc-xplor-input-text-secondary {\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.6);\n  margin-bottom: 0.25rem;\n}\n.input-secondary__required.sc-xplor-input-text-secondary {\n  color: #d32f2f;\n  margin-left: 0.25rem;\n}\n.input-secondary__field.sc-xplor-input-text-secondary {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.input-secondary__input.sc-xplor-input-text-secondary {\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: 16px;\n  outline: none;\n  transition: border-color 0.2s ease, border-width 0.2s ease;\n}\n.input-secondary__input.sc-xplor-input-text-secondary::placeholder {\n  color: rgba(0, 0, 0, 0.38);\n}\n.input-secondary__input.sc-xplor-input-text-secondary:hover:not(:disabled) {\n  border-color: rgba(0, 0, 0, 0.6);\n}\n.input-secondary__input.sc-xplor-input-text-secondary:focus {\n  border-color: #008480;\n  border-width: 2px;\n  padding: calc(0.875rem - 1px) calc(1rem - 1px);\n}\n.input-secondary__input.sc-xplor-input-text-secondary:disabled {\n  background-color: rgba(0, 0, 0, 0.04);\n  color: rgba(0, 0, 0, 0.38);\n  cursor: not-allowed;\n}\n.input-secondary__input.sc-xplor-input-text-secondary:read-only {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.input-secondary--dirty.sc-xplor-input-text-secondary .input-secondary__input.sc-xplor-input-text-secondary {\n  border-color: #008480;\n  border-width: 2px;\n  padding: calc(0.875rem - 1px) calc(1rem - 1px);\n}\n.input-secondary--error.sc-xplor-input-text-secondary .input-secondary__input.sc-xplor-input-text-secondary {\n  border-color: #d32f2f;\n}\n.input-secondary__details.sc-xplor-input-text-secondary {\n  min-height: 1.25rem;\n  padding: 0 1rem;\n  font-size: 0.75rem;\n}\n.input-secondary__error-message.sc-xplor-input-text-secondary {\n  color: #d32f2f;\n}\n.input-secondary__helper-text.sc-xplor-input-text-secondary {\n  color: rgba(0, 0, 0, 0.6);\n}";
+let inputTextSecondaryIdCounter = 0;
 const XplorInputTextSecondary$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputTextSecondary extends H {
     constructor() {
         super();
@@ -10,6 +11,9 @@ const XplorInputTextSecondary$1 = /*@__PURE__*/ proxyCustomElement(class XplorIn
         this.xplorChange = createEvent(this, "xplorChange");
         this.xplorFocus = createEvent(this, "xplorFocus");
         this.xplorBlur = createEvent(this, "xplorBlur");
+        this.inputId = `xplor-input-text-secondary-${++inputTextSecondaryIdCounter}`;
+        this.errorId = `${this.inputId}-error`;
+        this.helperId = `${this.inputId}-helper`;
         this.value = '';
         this.label = '';
         this.placeholder = '';
@@ -51,9 +55,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: '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: {
+        return (h(Host, { key: '805c82be35d46be51ebc3e29e78345ae81bf1368' }, h("div", { key: 'df8e81a6553efbd0dade36a7d5871e8d1d789213', class: containerClasses }, this.label && (h("label", { key: '289689dbe52f2ae19af90664ae99240eee499d61', class: "input-secondary__label", htmlFor: this.inputId }, this.label, this.required && h("span", { key: '7e711647c5cdc04033f2f774eee8d810835685ae', class: "input-secondary__required" }, "*"))), h("div", { key: '6cab22daaade60aa7e5130afda2f2692c1ae73b1', class: "input-secondary__field" }, h("input", { key: 'eb9cc2994c5f68d15683c4584ac270bcb5c20664', id: this.inputId, 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: '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" }))));
+            }, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.error ? this.errorId : this.helperText ? this.helperId : undefined }), h("slot", { key: 'e51cb67efac2e7037c2a903d78164348ce56998d', name: "append-inner" })), showDetails && (h("div", { key: '5c490ba173da365e8b9393ffee34a4259e9b3dbd', class: "input-secondary__details" }, this.error && h("div", { key: '4415c1feb83542ef0f0202fc48dfb13effc9d4c4', class: "input-secondary__error-message", id: this.errorId }, this.error), !this.error && this.helperText && h("div", { key: 'fb7e6c208fef2ea8139325438c19612538e1d845', class: "input-secondary__helper-text", id: this.helperId }, this.helperText))), h("slot", { key: 'e2479a9561cb0bf63f1115b2fc0b1d768bc705ed', name: "append" }))));
     }
     static get style() { return xplorInputTextSecondaryCss; }
 }, [6, "xplor-input-text-secondary", {

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

	@@ -1 +1 @@
1	- {"file":"xplor-input-text-secondary.js","mappings":";;AAAA,MAAM,0BAA0B,GAAG,q+RAAq+R;;~~MCO3/RA~~,yBAAuB,iBAAAC,kBAAA,CAAA,MAAA,uBAAA,SAAAC,CAAA,CAAA;AALpC,IAAA,WAAA,GAAA;;;;;;;~~AAM2B~~,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AACnC,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAClB,QAAA,IAAW,CAAA,WAAA,GAAW,EAAE;AACxB,QAAA,IAAI,CAAA,IAAA,GAAW,MAAM;AACrB,QAAA,IAAO,CAAA,OAAA,GAAW,OAAO;AACzB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAW,CAAA,WAAA,GAAqB,MAAM;AACtC,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAClB,QAAA,IAAU,CAAA,UAAA,GAAW,EAAE;AACvB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAOvB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAE3B,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAY,KAAI;AACrC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAC/C,YAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;YACzB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AAClC,SAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,KAAY,KAAI;AACtC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAC/C,YAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;YACzB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AACnC,SAAC;AAEO,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;AAC1C,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACrB,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC;AAC7B,SAAC;AAEO,QAAA,IAAA,CAAA,UAAU,GAAG,CAAC,KAAiB,KAAI;AACzC,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;AAC5B,SAAC;~~AAuDF~~;~~IArDC~~,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,iBAAiB,EAAE,IAAI;YACvB,0BAA0B,EAAE,IAAI,CAAC,SAAS;YAC1C,2BAA2B,EAAE,IAAI,CAAC,QAAQ;AAC1C,YAAA,wBAAwB,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK;YACtC,wBAAwB,EAAE,IAAI,CAAC,OAAO;SACvC;QAED,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,KAAK,KAAK,KAAK,IAAI,CAAC,WAAW,KAAK,MAAM,KAAK,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC;AAElH,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EACzB,IAAI,CAAC,KAAK,KACT,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,~~EAClC~~,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,QAAQ,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,2BAA2B,EAAS,EAAA,GAAA,CAAA,CAC5D,CACT,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,wBAAwB,EAC9B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,KAAK,EAAE;gBACL,eAAe,EAAE,IAAI,CAAC,OAAO;~~aAC9B~~,~~EACD~~,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,cAAc,EAAA,CAAG,CACxB,EAEL,WAAW,KACV,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EAClC,IAAI,CAAC,KAAK,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gCAAgC,EAAE,~~EAAA~~,IAAI,CAAC,KAAK,CAAO,~~EAC5E~~,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,IAAI,~~CAAA~~,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,~~EAAK~~,KAAK,EAAC,8BAA8B,EAAE,EAAA,IAAI,CAAC,UAAU,CAAO,~~CAChG~~,CACP,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorInputTextSecondary","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-input-text-secondary/xplor-input-text-secondary.scss?tag=xplor-input-text-secondary&encapsulation=scoped","src/components/xplor-input-text-secondary/xplor-input-text-secondary.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.input-secondary {\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: center;\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: 16px;\n outline: none;\n transition: border-color 0.2s ease, border-width 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 }\n\n &:read-only {\n background-color: rgba(0, 0, 0, 0.04);\n }\n }\n\n &--dirty {\n .input-secondary__input {\n border-color: #008480;\n border-width: 2px;\n padding: calc(0.875rem - 1px) calc(1rem - 1px);\n }\n }\n\n &--error {\n .input-secondary__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-secondary',\n styleUrl: 'xplor-input-text-secondary.scss',\n scoped: true,\n})\nexport class XplorInputTextSecondary {\n @Prop({ mutable: true }) value: string = '';\n @Prop() label: string = '';\n @Prop() placeholder: string = '';\n @Prop() type: string = 'text';\n @Prop() bgColor: string = 'white';\n @Prop() disabled: boolean = false;\n @Prop() readonly: boolean = false;\n @Prop() hideDetails: boolean \| 'auto' = 'auto';\n @Prop() error: string = '';\n @Prop() helperText: string = '';\n @Prop() required: boolean = false;\n @Prop() isDirty: boolean = false;\n\n @Event() xplorInput: EventEmitter<string>;\n @Event() xplorChange: EventEmitter<string>;\n @Event() xplorFocus: EventEmitter<FocusEvent>;\n @Event() xplorBlur: EventEmitter<FocusEvent>;\n\n @State() isFocused: boolean = false;\n\n private handleInput = (event: Event) => {\n const target = event.target as HTMLInputElement;\n this.value = target.value;\n this.xplorInput.emit(this.value);\n };\n\n private handleChange = (event: Event) => {\n const target = event.target as HTMLInputElement;\n this.value = target.value;\n this.xplorChange.emit(this.value);\n };\n\n private handleFocus = (event: FocusEvent) => {\n this.isFocused = true;\n this.xplorFocus.emit(event);\n };\n\n private handleBlur = (event: FocusEvent) => {\n this.isFocused = false;\n this.xplorBlur.emit(event);\n };\n\n render() {\n const containerClasses = {\n 'input-secondary': true,\n 'input-secondary--focused': this.isFocused,\n 'input-secondary--disabled': this.disabled,\n 'input-secondary--error': !!this.error,\n 'input-secondary--dirty': this.isDirty,\n };\n\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=\"input-secondary__label\">\n {this.label}\n {this.required && <span class=\"input-secondary__required\">*</span>}\n </label>\n )}\n\n <div class=\"input-secondary__field\">\n <input\n type={this.type}\n class=\"input-secondary__input\"\n value={this.value}\n placeholder={this.placeholder}\n disabled={this.disabled}\n readonly={this.readonly}\n required={this.required}\n onInput={this.handleInput}\n onChange={this.handleChange}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n style={{\n backgroundColor: this.bgColor,\n }}\n />\n <slot name=\"append-inner\" />\n </div>\n\n {showDetails && (\n <div class=\"input-secondary__details\">\n {this.error && <div class=\"input-secondary__error-message\">{this.error}</div>}\n {!this.error && this.helperText && <div class=\"input-secondary__helper-text\">{this.helperText}</div>}\n </div>\n )}\n\n <slot name=\"append\" />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"xplor-input-text-secondary.js","mappings":"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","names":["XplorInputTextSecondary","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-input-text-secondary/xplor-input-text-secondary.scss?tag=xplor-input-text-secondary&encapsulation=scoped","src/components/xplor-input-text-secondary/xplor-input-text-secondary.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.input-secondary {\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: center;\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: 16px;\n outline: none;\n transition: border-color 0.2s ease, border-width 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 }\n\n &:read-only {\n background-color: rgba(0, 0, 0, 0.04);\n }\n }\n\n &--dirty {\n .input-secondary__input {\n border-color: #008480;\n border-width: 2px;\n padding: calc(0.875rem - 1px) calc(1rem - 1px);\n }\n }\n\n &--error {\n .input-secondary__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\nlet inputTextSecondaryIdCounter = 0;\n\n@Component({\n tag: 'xplor-input-text-secondary',\n styleUrl: 'xplor-input-text-secondary.scss',\n scoped: true,\n})\nexport class XplorInputTextSecondary {\n private inputId = `xplor-input-text-secondary-${++inputTextSecondaryIdCounter}`;\n private errorId = `${this.inputId}-error`;\n private helperId = `${this.inputId}-helper`;\n @Prop({ mutable: true }) value: string = '';\n @Prop() label: string = '';\n @Prop() placeholder: string = '';\n @Prop() type: string = 'text';\n @Prop() bgColor: string = 'white';\n @Prop() disabled: boolean = false;\n @Prop() readonly: boolean = false;\n @Prop() hideDetails: boolean \| 'auto' = 'auto';\n @Prop() error: string = '';\n @Prop() helperText: string = '';\n @Prop() required: boolean = false;\n @Prop() isDirty: boolean = false;\n\n @Event() xplorInput: EventEmitter<string>;\n @Event() xplorChange: EventEmitter<string>;\n @Event() xplorFocus: EventEmitter<FocusEvent>;\n @Event() xplorBlur: EventEmitter<FocusEvent>;\n\n @State() isFocused: boolean = false;\n\n private handleInput = (event: Event) => {\n const target = event.target as HTMLInputElement;\n this.value = target.value;\n this.xplorInput.emit(this.value);\n };\n\n private handleChange = (event: Event) => {\n const target = event.target as HTMLInputElement;\n this.value = target.value;\n this.xplorChange.emit(this.value);\n };\n\n private handleFocus = (event: FocusEvent) => {\n this.isFocused = true;\n this.xplorFocus.emit(event);\n };\n\n private handleBlur = (event: FocusEvent) => {\n this.isFocused = false;\n this.xplorBlur.emit(event);\n };\n\n render() {\n const containerClasses = {\n 'input-secondary': true,\n 'input-secondary--focused': this.isFocused,\n 'input-secondary--disabled': this.disabled,\n 'input-secondary--error': !!this.error,\n 'input-secondary--dirty': this.isDirty,\n };\n\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=\"input-secondary__label\" htmlFor={this.inputId}>\n {this.label}\n {this.required && <span class=\"input-secondary__required\">*</span>}\n </label>\n )}\n\n <div class=\"input-secondary__field\">\n <input\n id={this.inputId}\n type={this.type}\n class=\"input-secondary__input\"\n value={this.value}\n placeholder={this.placeholder}\n disabled={this.disabled}\n readonly={this.readonly}\n required={this.required}\n onInput={this.handleInput}\n onChange={this.handleChange}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n style={{\n backgroundColor: this.bgColor,\n }}\n aria-invalid={this.error ? 'true' : undefined}\n aria-required={this.required ? 'true' : undefined}\n aria-describedby={this.error ? this.errorId : this.helperText ? this.helperId : undefined}\n />\n <slot name=\"append-inner\" />\n </div>\n\n {showDetails && (\n <div class=\"input-secondary__details\">\n {this.error && <div class=\"input-secondary__error-message\" id={this.errorId}>{this.error}</div>}\n {!this.error && this.helperText && <div class=\"input-secondary__helper-text\" id={this.helperId}>{this.helperText}</div>}\n </div>\n )}\n\n <slot name=\"append\" />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -2,6 +2,7 @@ import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './in
 const xplorInputTextCss = "@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 {\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 {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-input-text {\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 {\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 {\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 {\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, ul.sc-xplor-input-text {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-input-text li.sc-xplor-input-text, ul.sc-xplor-input-text li.sc-xplor-input-text {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-input-text, ul.mdc-list.sc-xplor-input-text {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-input-text li.mdc-list-item.sc-xplor-input-text, ul.mdc-list.sc-xplor-input-text li.mdc-list-item.sc-xplor-input-text {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-input-text {\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 {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-input-text {\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 {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-input-text .mdc-text-field--outlined.sc-xplor-input-text .mdc-notched-outline__notch.sc-xplor-input-text {\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 .mdc-notched-outline__notch.sc-xplor-input-text {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-input-text .mdc-notched-outline.sc-xplor-input-text .mdc-notched-outline__notch.sc-xplor-input-text {\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 {\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: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 {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-input-text-h {\n  display: block;\n}\n\n.xplor-input-text.sc-xplor-input-text {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n.xplor-input-text__label.sc-xplor-input-text {\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.6);\n  margin-bottom: 0.25rem;\n}\n.xplor-input-text__required.sc-xplor-input-text {\n  color: #d32f2f;\n  margin-left: 0.25rem;\n}\n.xplor-input-text__field.sc-xplor-input-text {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.xplor-input-text__input.sc-xplor-input-text {\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  transition: border-color 0.2s ease;\n}\n.xplor-input-text__input.sc-xplor-input-text::placeholder {\n  color: rgba(0, 0, 0, 0.38);\n}\n.xplor-input-text__input.sc-xplor-input-text:hover:not(:disabled) {\n  border-color: rgba(0, 0, 0, 0.6);\n}\n.xplor-input-text__input.sc-xplor-input-text:focus {\n  border-color: #008480;\n  border-width: 2px;\n  padding: calc(0.875rem - 1px) calc(1rem - 1px);\n}\n.xplor-input-text__input.sc-xplor-input-text:disabled {\n  background-color: rgba(0, 0, 0, 0.04);\n  color: rgba(0, 0, 0, 0.38);\n  cursor: not-allowed;\n}\n.xplor-input-text__input.sc-xplor-input-text:read-only {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.xplor-input-text--error.sc-xplor-input-text .xplor-input-text__input.sc-xplor-input-text {\n  border-color: #d32f2f;\n}\n.xplor-input-text__details.sc-xplor-input-text {\n  min-height: 1.25rem;\n  padding: 0 1rem;\n  font-size: 0.75rem;\n}\n.xplor-input-text__error-message.sc-xplor-input-text {\n  color: #d32f2f;\n}\n.xplor-input-text__helper-text.sc-xplor-input-text {\n  color: rgba(0, 0, 0, 0.6);\n}";
+let inputTextIdCounter = 0;
 const XplorInputText$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputText extends H {
     constructor() {
         super();
@@ -10,6 +11,9 @@ const XplorInputText$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputText e
         this.xplorChange = createEvent(this, "xplorChange");
         this.xplorFocus = createEvent(this, "xplorFocus");
         this.xplorBlur = createEvent(this, "xplorBlur");
+        this.inputId = `xplor-input-text-${++inputTextIdCounter}`;
+        this.errorId = `${this.inputId}-error`;
+        this.helperId = `${this.inputId}-helper`;
         /**
          * Input value
          */
@@ -86,9 +90,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: '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: {
+        return (h(Host, { key: 'c7da02996d0b420a58337eb30bec6d38fe9e395f' }, h("div", { key: '229582f2e17300332a14fd58ff60cd1a43d10f40', class: containerClasses }, this.label && (h("label", { key: '2fc2d7c76396e98397df42d6b793d070d061c918', class: "xplor-input-text__label", htmlFor: this.inputId }, this.label, this.required && h("span", { key: '2bc7348d1a415a36aae485c61743b0fd3f98d363', class: "xplor-input-text__required" }, "*"))), h("div", { key: 'f6f79203738d3827dbd06faaea60f94022d5d965', class: "xplor-input-text__field" }, h("input", { key: 'ff6a346441f195cd71c5e6c585fffd24b79ce181', id: this.inputId, 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: '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" }))));
+            }, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.error ? this.errorId : this.helperText ? this.helperId : undefined }), h("slot", { key: 'fa160af8991c46e7418960e2058d85a912aa182c', name: "append-inner" })), showDetails && (h("div", { key: 'bd131696fea277bcc3c727cb2a9a901a9c360f53', class: "xplor-input-text__details" }, this.error && h("div", { key: '7a5351abc5cb7ed0dc1a5a71262f86a34230020a', class: "xplor-input-text__error-message", id: this.errorId }, this.error), !this.error && this.helperText && h("div", { key: '7457664c7a216c5c4a9c18de4030a76796dd97bc', class: "xplor-input-text__helper-text", id: this.helperId }, this.helperText))), h("slot", { key: '2acc8a1746276cb19b6d8a0b2dd0054a5fa7f6ac', name: "append" }))));
     }
     static get style() { return xplorInputTextCss; }
 }, [6, "xplor-input-text", {

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

	@@ -1 +1 @@
1	- {"file":"xplor-input-text.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,6xQAA6xQ;;~~MCO1yQA~~,gBAAc,iBAAAC,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;AAL3B,IAAA,WAAA,GAAA;;;;;;;~~AAME~~;;AAEG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAE3C;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAE1B;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAW,EAAE;AAEhC;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAW,MAAM;AAE7B;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAW,OAAO;AAEjC;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,SAAS;AAEjC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjC;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAqB,MAAM;AAE9C;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAE1B;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAW,EAAE;AAE/B;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAsBxB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAE3B,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAY,KAAI;AACrC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAC/C,YAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;YACzB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AAClC,SAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,KAAY,KAAI;AACtC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAC/C,YAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;YACzB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AACnC,SAAC;AAEO,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;AAC1C,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACrB,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC;AAC7B,SAAC;AAEO,QAAA,IAAA,CAAA,UAAU,GAAG,CAAC,KAAiB,KAAI;AACzC,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;AAC5B,SAAC;~~AAsDF~~;~~IApDC~~,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,kBAAkB,EAAE,IAAI;YACxB,2BAA2B,EAAE,IAAI,CAAC,SAAS;YAC3C,4BAA4B,EAAE,IAAI,CAAC,QAAQ;AAC3C,YAAA,yBAAyB,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK;SACxC;QAED,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,KAAK,KAAK,KAAK,IAAI,CAAC,WAAW,KAAK,MAAM,KAAK,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC;AAElH,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EACzB,IAAI,CAAC,KAAK,KACT,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,~~EACnC~~,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,QAAQ,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,4BAA4B,EAAS,EAAA,GAAA,CAAA,CAC7D,CACT,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClC,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,yBAAyB,EAC/B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,KAAK,EAAE;gBACL,eAAe,EAAE,IAAI,CAAC,OAAO;~~aAC9B~~,~~EACD~~,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,cAAc,EAAA,CAAG,CACxB,EAEL,WAAW,KACV,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACnC,IAAI,CAAC,KAAK,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iCAAiC,EAAE,~~EAAA~~,IAAI,CAAC,KAAK,CAAO,~~EAC7E~~,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,IAAI,~~CAAA~~,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,~~EAAK~~,KAAK,EAAC,+BAA+B,EAAE,EAAA,IAAI,CAAC,UAAU,CAAO,~~CACjG~~,CACP,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorInputText","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-input-text/xplor-input-text.scss?tag=xplor-input-text&encapsulation=scoped","src/components/xplor-input-text/xplor-input-text.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.xplor-input-text {\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: center;\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 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 }\n\n &:read-only {\n background-color: rgba(0, 0, 0, 0.04);\n }\n }\n\n &--error {\n .xplor-input-text__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',\n styleUrl: 'xplor-input-text.scss',\n scoped: true,\n})\nexport class XplorInputText {\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 Input type (text, email, password, number, etc.)\n /\n @Prop() type: string = 'text';\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 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 Focus event\n /\n @Event() xplorFocus: EventEmitter<FocusEvent>;\n\n /\n Blur event\n /\n @Event() xplorBlur: EventEmitter<FocusEvent>;\n\n @State() isFocused: boolean = false;\n\n private handleInput = (event: Event) => {\n const target = event.target as HTMLInputElement;\n this.value = target.value;\n this.xplorInput.emit(this.value);\n };\n\n private handleChange = (event: Event) => {\n const target = event.target as HTMLInputElement;\n this.value = target.value;\n this.xplorChange.emit(this.value);\n };\n\n private handleFocus = (event: FocusEvent) => {\n this.isFocused = true;\n this.xplorFocus.emit(event);\n };\n\n private handleBlur = (event: FocusEvent) => {\n this.isFocused = false;\n this.xplorBlur.emit(event);\n };\n\n render() {\n const containerClasses = {\n 'xplor-input-text': true,\n 'xplor-input-text--focused': this.isFocused,\n 'xplor-input-text--disabled': this.disabled,\n 'xplor-input-text--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}>\n {this.label && (\n <label class=\"xplor-input-text__label\">\n {this.label}\n {this.required && <span class=\"xplor-input-text__required\"></span>}\n </label>\n )}\n\n <div class=\"xplor-input-text__field\">\n <input\n type={this.type}\n class=\"xplor-input-text__input\"\n value={this.value}\n placeholder={this.placeholder}\n disabled={this.disabled}\n readonly={this.readonly}\n required={this.required}\n onInput={this.handleInput}\n onChange={this.handleChange}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n style={{\n backgroundColor: this.bgColor,\n }}\n />\n <slot name=\"append-inner\" />\n </div>\n\n {showDetails && (\n <div class=\"xplor-input-text__details\">\n {this.error && <div class=\"xplor-input-text__error-message\">{this.error}</div>}\n {!this.error && this.helperText && <div class=\"xplor-input-text__helper-text\">{this.helperText}</div>}\n </div>\n )}\n\n <slot name=\"append\" />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"xplor-input-text.js","mappings":"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","names":["XplorInputText","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-input-text/xplor-input-text.scss?tag=xplor-input-text&encapsulation=scoped","src/components/xplor-input-text/xplor-input-text.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.xplor-input-text {\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: center;\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 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 }\n\n &:read-only {\n background-color: rgba(0, 0, 0, 0.04);\n }\n }\n\n &--error {\n .xplor-input-text__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\nlet inputTextIdCounter = 0;\n\n@Component({\n tag: 'xplor-input-text',\n styleUrl: 'xplor-input-text.scss',\n scoped: true,\n})\nexport class XplorInputText {\n private inputId = `xplor-input-text-${++inputTextIdCounter}`;\n private errorId = `${this.inputId}-error`;\n private helperId = `${this.inputId}-helper`;\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 Input type (text, email, password, number, etc.)\n /\n @Prop() type: string = 'text';\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 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 Focus event\n /\n @Event() xplorFocus: EventEmitter<FocusEvent>;\n\n /\n Blur event\n /\n @Event() xplorBlur: EventEmitter<FocusEvent>;\n\n @State() isFocused: boolean = false;\n\n private handleInput = (event: Event) => {\n const target = event.target as HTMLInputElement;\n this.value = target.value;\n this.xplorInput.emit(this.value);\n };\n\n private handleChange = (event: Event) => {\n const target = event.target as HTMLInputElement;\n this.value = target.value;\n this.xplorChange.emit(this.value);\n };\n\n private handleFocus = (event: FocusEvent) => {\n this.isFocused = true;\n this.xplorFocus.emit(event);\n };\n\n private handleBlur = (event: FocusEvent) => {\n this.isFocused = false;\n this.xplorBlur.emit(event);\n };\n\n render() {\n const containerClasses = {\n 'xplor-input-text': true,\n 'xplor-input-text--focused': this.isFocused,\n 'xplor-input-text--disabled': this.disabled,\n 'xplor-input-text--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}>\n {this.label && (\n <label class=\"xplor-input-text__label\" htmlFor={this.inputId}>\n {this.label}\n {this.required && <span class=\"xplor-input-text__required\"></span>}\n </label>\n )}\n\n <div class=\"xplor-input-text__field\">\n <input\n id={this.inputId}\n type={this.type}\n class=\"xplor-input-text__input\"\n value={this.value}\n placeholder={this.placeholder}\n disabled={this.disabled}\n readonly={this.readonly}\n required={this.required}\n onInput={this.handleInput}\n onChange={this.handleChange}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n style={{\n backgroundColor: this.bgColor,\n }}\n aria-invalid={this.error ? 'true' : undefined}\n aria-required={this.required ? 'true' : undefined}\n aria-describedby={this.error ? this.errorId : this.helperText ? this.helperId : undefined}\n />\n <slot name=\"append-inner\" />\n </div>\n\n {showDetails && (\n <div class=\"xplor-input-text__details\">\n {this.error && <div class=\"xplor-input-text__error-message\" id={this.errorId}>{this.error}</div>}\n {!this.error && this.helperText && <div class=\"xplor-input-text__helper-text\" id={this.helperId}>{this.helperText}</div>}\n </div>\n )}\n\n <slot name=\"append\" />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -24,6 +24,10 @@ const XplorInputTitle$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputTitle
          * Whether the input is readonly
          */
         this.readonly = false;
+        /**
+         * Accessible label for the input
+         */
+        this.ariaLabel = 'Title';
         this.handleInput = (event) => {
             const target = event.target;
             this.value = target.value;
@@ -36,14 +40,15 @@ const XplorInputTitle$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputTitle
         };
     }
     render() {
-        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 })));
+        return (h(Host, { key: 'ef2d69909fe74019c12da557fa136e0389336e05' }, h("input", { key: 'dfdc0a0072ec511a1edfc68a6fad9e4169064f8f', type: "text", class: "xplor-input-title", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, "aria-label": this.ariaLabel, onInput: this.handleInput, onChange: this.handleChange })));
     }
     static get style() { return xplorInputTitleCss; }
 }, [2, "xplor-input-title", {
         "value": [1025],
         "placeholder": [1],
         "disabled": [4],
-        "readonly": [4]
+        "readonly": [4],
+        "ariaLabel": [1, "aria-label"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

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

	@@ -1 +1 @@
1	- {"file":"xplor-input-title.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,s/OAAs/O;;MCOpgPA,iBAAe,iBAAAC,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;AAL5B,IAAA,WAAA,GAAA;;;;;AAME;;AAEG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAE3C;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAW,EAAE;AAEhC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;~~AAYzB~~,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAY,KAAI;AACrC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAC/C,YAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;YACzB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AAClC,SAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,KAAY,KAAI;AACtC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAC/C,YAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;YACzB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AACnC,SAAC;~~AAkBF~~;~~IAhBC~~,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,mBAAmB,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,~~EACvB~~,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAA,CAC3B,CACG~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["XplorInputTitle","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-input-title/xplor-input-title.scss?tag=xplor-input-title&encapsulation=scoped","src/components/xplor-input-title/xplor-input-title.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.xplor-input-title {\n width: 100%;\n height: 39px;\n font-size: 28px;\n font-family: inherit;\n font-weight: 400;\n border: none;\n border-bottom: 1px solid rgba(0, 0, 0, 0.42);\n outline: none;\n padding: 0 0 4px 0;\n background: transparent;\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-bottom-color: rgba(0, 0, 0, 0.87);\n }\n\n &:focus {\n border-bottom-width: 2px;\n border-bottom-color: #008480;\n padding-bottom: 3px;\n }\n\n &:disabled {\n color: rgba(0, 0, 0, 0.38);\n border-bottom-color: rgba(0, 0, 0, 0.26);\n cursor: not-allowed;\n }\n\n &:read-only {\n color: rgba(0, 0, 0, 0.6);\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'xplor-input-title',\n styleUrl: 'xplor-input-title.scss',\n scoped: true,\n})\nexport class XplorInputTitle {\n /*\n Input value\n /\n @Prop({ mutable: true }) value: string = '';\n\n /\n Input placeholder\n /\n @Prop() placeholder: string = '';\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 Input event\n /\n @Event() xplorInput: EventEmitter<string>;\n\n /\n Change event\n */\n @Event() xplorChange: EventEmitter<string>;\n\n private handleInput = (event: Event) => {\n const target = event.target as HTMLInputElement;\n this.value = target.value;\n this.xplorInput.emit(this.value);\n };\n\n private handleChange = (event: Event) => {\n const target = event.target as HTMLInputElement;\n this.value = target.value;\n this.xplorChange.emit(this.value);\n };\n\n render() {\n return (\n <Host>\n <input\n type=\"text\"\n class=\"xplor-input-title\"\n value={this.value}\n placeholder={this.placeholder}\n disabled={this.disabled}\n readonly={this.readonly}\n onInput={this.handleInput}\n onChange={this.handleChange}\n />\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"xplor-input-title.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,s/OAAs/O;;MCOpgPA,iBAAe,iBAAAC,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;AAL5B,IAAA,WAAA,GAAA;;;;;AAME;;AAEG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAE3C;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAW,EAAE;AAEhC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjC;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAW,OAAO;AAY3B,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAY,KAAI;AACrC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAC/C,YAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;YACzB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AAClC,SAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,KAAY,KAAI;AACtC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAC/C,YAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;YACzB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AACnC,SAAC;AAmBF;IAjBC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,mBAAmB,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,SAAS,EAC1B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAA,CAC3B,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorInputTitle","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-input-title/xplor-input-title.scss?tag=xplor-input-title&encapsulation=scoped","src/components/xplor-input-title/xplor-input-title.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.xplor-input-title {\n width: 100%;\n height: 39px;\n font-size: 28px;\n font-family: inherit;\n font-weight: 400;\n border: none;\n border-bottom: 1px solid rgba(0, 0, 0, 0.42);\n outline: none;\n padding: 0 0 4px 0;\n background: transparent;\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-bottom-color: rgba(0, 0, 0, 0.87);\n }\n\n &:focus {\n border-bottom-width: 2px;\n border-bottom-color: #008480;\n padding-bottom: 3px;\n }\n\n &:disabled {\n color: rgba(0, 0, 0, 0.38);\n border-bottom-color: rgba(0, 0, 0, 0.26);\n cursor: not-allowed;\n }\n\n &:read-only {\n color: rgba(0, 0, 0, 0.6);\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'xplor-input-title',\n styleUrl: 'xplor-input-title.scss',\n scoped: true,\n})\nexport class XplorInputTitle {\n /*\n Input value\n /\n @Prop({ mutable: true }) value: string = '';\n\n /\n Input placeholder\n /\n @Prop() placeholder: string = '';\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 Accessible label for the input\n /\n @Prop() ariaLabel: string = 'Title';\n\n /\n Input event\n /\n @Event() xplorInput: EventEmitter<string>;\n\n /\n Change event\n */\n @Event() xplorChange: EventEmitter<string>;\n\n private handleInput = (event: Event) => {\n const target = event.target as HTMLInputElement;\n this.value = target.value;\n this.xplorInput.emit(this.value);\n };\n\n private handleChange = (event: Event) => {\n const target = event.target as HTMLInputElement;\n this.value = target.value;\n this.xplorChange.emit(this.value);\n };\n\n render() {\n return (\n <Host>\n <input\n type=\"text\"\n class=\"xplor-input-title\"\n value={this.value}\n placeholder={this.placeholder}\n disabled={this.disabled}\n readonly={this.readonly}\n aria-label={this.ariaLabel}\n onInput={this.handleInput}\n onChange={this.handleChange}\n />\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/xplor-links.js CHANGED Viewed

@@ -7,13 +7,16 @@ const XplorLinks$1 = /*@__PURE__*/ proxyCustomElement(class XplorLinks extends H
         super();
         this.__registerHost();
         this.__attachShadow();
+        /** Alt text for the image */
+        this.imageAlt = '';
     }
     render() {
-        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")))))))));
+        return (h(Host, { key: '1d0963855eaf79dacbae5d6a5b86cc6b6ae84632', class: `theme-${this.brand}` }, h("a", { key: 'd95d148b5745909e17a51e7d44e6412956a4844b', class: "x-link", href: "https://google.com" }, ' ', "googole this is a link", ' '), h("div", { key: '05c27ca582f5d298e00a46240700088f3ef1c250', class: "bg-black p-2 rounded-md flex justify-center" }, h("h1", { key: '9f4180eef39b9006277a72534d385ce3b742e40c', class: "text-primary font-sans" }, "This is a Stencil component using Tailwind")), h("div", { key: 'fe5ffb8f988e0df18e53a04873d6dfe63e7ca26e', class: "bg-white py-24 sm:py-32" }, h("div", { key: '09bd7b00cd955c991e662f3f71addac329d4b189', class: "mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3" }, h("div", { key: '36f6bd91ab4db26df78b21e533c2f584ba656d26', class: "max-w-xl" }, h("h2", { key: '165380866054da7add2a455b15370f4cd8a7ad65', class: "text-pretty text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl" }, "Meet our leadership"), h("p", { key: '726b4e94c27bafe707c6a48f6604a28cb15d1c47', 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: 'a884c969151b0b935d40e5a98d9418d5a8bcc415', 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: 'c5b4adca7d9a2038462dcd2958b95b5a7c661314' }, h("div", { key: '4a013658a1982d345000bbce12ace33b5e6bd2d8', class: "flex items-center gap-x-6" }, h("img", { key: 'c93cc4184e758ca5d1b9942bbbec8a5afb219732', 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: this.imageAlt }), h("div", { key: 'a05b6b18dbf663af70b0c7840d034973b2cc15df' }, h("h3", { key: '7d6ff8ca21af23e69497e067f346b3b0b61de42c', class: "text-base/7 font-semibold tracking-tight text-gray-900" }, "Leslie Alexander"), h("p", { key: '33528098f6f09a748251f49a8e0b377992f2c4e1', class: "text-sm/6 font-semibold text-indigo-600" }, "Co-Founder / CEO")))))))));
     }
     static get style() { return xplorLinksCss; }
 }, [1, "xplor-links", {
-        "brand": [1]
+        "brand": [1],
+        "imageAlt": [1, "image-alt"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {