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/collection/components/xplor-input-select/xplor-input-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"xplor-input-select.js","sourceRoot":"","sources":["../../../src/components/xplor-input-select/xplor-input-select.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
1	+ {"version":3,"file":"xplor-input-select.js","sourceRoot":"","sources":["../../../src/components/xplor-input-select/xplor-input-select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AActG,MAAM,OAAO,gBAAgB;IAL7B;QAgBE;;WAEG;QACsB,UAAK,GAAgB,IAAI,CAAC;QAEnD;;WAEG;QACK,UAAK,GAAW,EAAE,CAAC;QAE3B;;WAEG;QACK,gBAAW,GAAW,WAAW,CAAC;QAE1C;;WAEG;QACK,YAAO,GAAmB,EAAE,CAAC;QAErC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAElC;;WAEG;QACK,YAAO,GAAW,OAAO,CAAC;QAElC;;WAEG;QACK,UAAK,GAAW,SAAS,CAAC;QAElC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAElC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAElC;;WAEG;QACK,gBAAW,GAAqB,MAAM,CAAC;QAE/C;;WAEG;QACK,UAAK,GAAW,EAAE,CAAC;QAE3B;;WAEG;QACK,eAAU,GAAW,EAAE,CAAC;QAEhC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAOzB,WAAM,GAAY,KAAK,CAAC;QACxB,cAAS,GAAY,KAAK,CAAC;QAC3B,iBAAY,GAAiD,IAAI,CAAC;QAClE,qBAAgB,GAAW,CAAC,CAAC,CAAC;QA2F/B,uBAAkB,GAAG,GAAG,EAAE;YAChC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,qBAAqB,EAAE,CAAC;gBACnD,IAAI,CAAC,YAAY,GAAG;oBAClB,GAAG,EAAE,IAAI,CAAC,MAAM,GAAG,CAAC;oBACpB,IAAI,EAAE,IAAI,CAAC,IAAI;oBACf,KAAK,EAAE,IAAI,CAAC,KAAK;iBAClB,CAAC;YACJ,CAAC;QACH,CAAC,CAAC;QAEM,uBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;YACjD,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE,CAAC;gBACrE,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACtB,CAAC;QACH,CAAC,CAAC;QAEM,mBAAc,GAAG,GAAG,EAAE;YAC5B,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACrC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;oBACjB,IAAI,CAAC,kBAAkB,EAAE,CAAC;oBAC1B,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC;gBAC7B,CAAC;gBACD,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;gBAC3B,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;oBACjB,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC;gBAC7B,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAEM,sBAAiB,GAAG,CAAC,MAAoB,EAAE,EAAE;YACnD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;gBACjE,MAAM,KAAK,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,MAAM,CAAC,KAAK,CAAC,CAAC;gBAEhE,IAAI,KAAK,GAAG,CAAC,CAAC,EAAE,CAAC;oBACf,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC;gBAC1D,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,YAAY,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;gBAC/C,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;gBAC1B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACtB,CAAC;YAED,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC,CAAC;QAEM,eAAU,GAAG,CAAC,MAAoB,EAAW,EAAE;YACrD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;gBACjE,OAAO,YAAY,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC7C,CAAC;YACD,OAAO,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,CAAC;QACrC,CAAC,CAAC;QAEM,oBAAe,GAAG,GAAW,EAAE;YACrC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;gBACjE,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC;oBAAE,OAAO,IAAI,CAAC,WAAW,CAAC;gBAEvD,MAAM,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAClD,YAAY,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,CACjC,CAAC;gBACF,OAAO,GAAG,eAAe,CAAC,MAAM,WAAW,CAAC;YAC9C,CAAC;YAED,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC;YAC5E,OAAO,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;QAClE,CAAC,CAAC;KA2HH;IAzRC,gBAAgB;QACd,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC9D,CAAC;IAED,oBAAoB;QAClB,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IACjE,CAAC;IAGD,aAAa,CAAC,KAAoB;;QAChC,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;QACzC,IAAI,YAAY,KAAK,CAAC;YAAE,OAAO;QAE/B,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;YAClB,KAAK,WAAW;gBACd,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;oBACjB,IAAI,CAAC,kBAAkB,EAAE,CAAC;oBAC1B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;oBACnB,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC;gBAC5B,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,GAAG,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACnG,CAAC;gBACD,IAAI,CAAC,yBAAyB,EAAE,CAAC;gBACjC,MAAM;YAER,KAAK,SAAS;gBACZ,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;oBACjB,IAAI,CAAC,kBAAkB,EAAE,CAAC;oBAC1B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;oBACnB,IAAI,CAAC,gBAAgB,GAAG,YAAY,GAAG,CAAC,CAAC;gBAC3C,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,CAAC;gBACnG,CAAC;gBACD,IAAI,CAAC,yBAAyB,EAAE,CAAC;gBACjC,MAAM;YAER,KAAK,OAAO,CAAC;YACb,KAAK,GAAG;gBACN,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,gBAAgB,IAAI,CAAC,IAAI,IAAI,CAAC,gBAAgB,GAAG,YAAY,EAAE,CAAC;oBACtF,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC;gBAC9D,CAAC;qBAAM,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;oBACxB,IAAI,CAAC,cAAc,EAAE,CAAC;gBACxB,CAAC;gBACD,MAAM;YAER,KAAK,QAAQ;gBACX,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;gBACpB,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC;gBAC3B,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,EAAE,CAAC;gBACvB,MAAM;YAER,KAAK,MAAM;gBACT,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;oBAChB,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC;oBAC1B,IAAI,CAAC,yBAAyB,EAAE,CAAC;gBACnC,CAAC;gBACD,MAAM;YAER,KAAK,KAAK;gBACR,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;oBAChB,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,IAAI,CAAC,gBAAgB,GAAG,YAAY,GAAG,CAAC,CAAC;oBACzC,IAAI,CAAC,yBAAyB,EAAE,CAAC;gBACnC,CAAC;gBACD,MAAM;YAER,KAAK,KAAK;gBACR,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;gBACpB,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC;gBAC3B,MAAM;QACV,CAAC;IACH,CAAC;IAEO,yBAAyB;QAC/B,qBAAqB,CAAC,GAAG,EAAE;YACzB,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,gBAAgB,IAAI,CAAC,EAAE,CAAC;gBACjD,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,uBAAuB,IAAI,CAAC,gBAAgB,IAAI,CAAgB,CAAC;gBACpH,IAAI,aAAa,EAAE,CAAC;oBAClB,aAAa,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;gBACrD,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAyED,MAAM;QACJ,MAAM,gBAAgB,GAAG;YACvB,oBAAoB,EAAE,IAAI;YAC1B,0BAA0B,EAAE,IAAI,CAAC,MAAM;YACvC,6BAA6B,EAAE,IAAI,CAAC,SAAS;YAC7C,8BAA8B,EAAE,IAAI,CAAC,QAAQ;YAC7C,2BAA2B,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK;SAC1C,CAAC;QAEF,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,KAAK,KAAK,IAAI,CAAC,IAAI,CAAC,WAAW,KAAK,MAAM,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;QACnH,MAAM,SAAS,GAAG,sBAAsB,CAAC;QACzC,MAAM,OAAO,GAAG,oBAAoB,CAAC;QACrC,MAAM,OAAO,GAAG,oBAAoB,CAAC;QACrC,MAAM,QAAQ,GAAG,qBAAqB,CAAC;QACvC,MAAM,kBAAkB,GAAG,IAAI,CAAC,gBAAgB,IAAI,CAAC,CAAC,CAAC,CAAC,uBAAuB,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;QAEnH,gDAAgD;QAChD,MAAM,gBAAgB,GAAa,EAAE,CAAC;QACtC,IAAI,IAAI,CAAC,KAAK;YAAE,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC/C,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU;YAAE,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpE,MAAM,eAAe,GAAG,gBAAgB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QAE7F,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,gBAAgB,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;gBAC7D,IAAI,CAAC,KAAK,IAAI,CACb,8DAAO,KAAK,EAAC,2BAA2B,EAAC,EAAE,EAAE,OAAO;oBACjD,IAAI,CAAC,KAAK;oBACV,IAAI,CAAC,QAAQ,IAAI,6DAAM,KAAK,EAAC,8BAA8B,QAAS,CAC/D,CACT;gBAED,4DACE,KAAK,EAAC,2BAA2B,EACjC,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC,EACjC,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,mBACjB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAC/B,SAAS,mBACR,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,2BAC3B,kBAAkB,qBACxB,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,gBACrC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,sBACxD,eAAe,mBAClB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,mBAClC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;oBAEjD,4DAAK,KAAK,EAAC,2BAA2B,IACnC,IAAI,CAAC,eAAe,EAAE,CACnB;oBACN,6DAAM,KAAK,EAAC,2BAA2B,iBAAa,MAAM,IAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAQ,CACvF;gBAEL,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,YAAY,IAAI,CACnC,4DACE,KAAK,EAAC,0BAA0B,EAChC,IAAI,EAAC,SAAS,EACd,EAAE,EAAE,SAAS,gBACD,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,IAAI,SAAS,0BAC/B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACxD,KAAK,EAAE;wBACL,QAAQ,EAAE,OAAO;wBACjB,GAAG,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI;wBACjC,IAAI,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,IAAI;wBACnC,KAAK,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,IAAI;qBACtC,IAEA,IAAI,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CAC3B,WAAK,KAAK,EAAC,2BAA2B,EAAC,IAAI,EAAC,QAAQ,mBAAe,MAAM,2BAA2B,CACrG,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBACjC,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;oBACzC,OAAO,CACL,WACE,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,EAAE,EAAE,uBAAuB,KAAK,EAAE,uBACf,KAAK,EACxB,IAAI,EAAC,QAAQ,mBACE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC1C,KAAK,EAAE;4BACL,4BAA4B,EAAE,IAAI;4BAClC,sCAAsC,EAAE,QAAQ;4BAChD,yCAAyC,EAAE,KAAK,KAAK,IAAI,CAAC,gBAAgB;yBAC3E,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC;wBAE5C,IAAI,CAAC,QAAQ,IAAI,CAChB,aACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,8BAA8B,EACpC,OAAO,EAAE,QAAQ,EACjB,QAAQ,QACR,QAAQ,EAAE,CAAC,CAAC,kBACE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,iBAC7B,MAAM,GAClB,CACH;wBACD,WAAK,KAAK,EAAC,oCAAoC;4BAC7C,WAAK,KAAK,EAAC,kCAAkC,IAAE,MAAM,CAAC,KAAK,CAAO;4BACjE,MAAM,CAAC,QAAQ,IAAI,CAClB,WAAK,KAAK,EAAC,qCAAqC,IAAE,MAAM,CAAC,QAAQ,CAAO,CACzE,CACG,CACF,CACP,CAAC;gBACJ,CAAC,CAAC,CACH,CACG,CACP;gBAEA,WAAW,IAAI,CACd,4DAAK,KAAK,EAAC,6BAA6B;oBACrC,IAAI,CAAC,KAAK,IAAI,4DAAK,KAAK,EAAC,mCAAmC,EAAC,EAAE,EAAE,OAAO,EAAE,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAO;oBACzG,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,IAAI,4DAAK,KAAK,EAAC,iCAAiC,EAAC,EAAE,EAAE,QAAQ,IAAG,IAAI,CAAC,UAAU,CAAO,CACjH,CACP,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

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

@@ -36,10 +36,10 @@ export class XplorInputSend {
         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 is() { return "xplor-input-send"; }
     static get encapsulation() { return "scoped"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"xplor-input-send.js","sourceRoot":"","sources":["../../../src/components/xplor-input-send/xplor-input-send.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAOrF,MAAM,OAAO,cAAc;IAL3B;QAMY,gBAAW,GAAW,mBAAmB,CAAC;QAC1C,aAAQ,GAAY,KAAK,CAAC;QAET,UAAK,GAAW,EAAE,CAAC;QACpC,eAAU,GAAW,MAAM,CAAC;QAC5B,eAAU,GAAsC,SAAS,CAAC;QAEzD,kBAAa,GAAW,EAAE,CAAC;QAW5B,gBAAW,GAAG,CAAC,KAAY,EAAE,EAAE;YACnC,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;YAC/C,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,KAAK,CAAC;YACjC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;YACzB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC5C,CAAC,CAAC;QAEM,kBAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC7C,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;gBAC3C,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,UAAU,EAAE,CAAC;YACtB,CAAC;QACL,CAAC,CAAC;QAEM,eAAU,GAAG,GAAG,EAAE;YACtB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,EAAE,CAAC;gBAC9C,OAAO;YACX,CAAC;YAED,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,CAAC;YAC/C,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;YAEhB,oCAAoC;YACpC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBACf,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;YACzB,CAAC;QACL,CAAC,CAAC;~~KAgCL~~;~~IA/DG~~,iBAAiB;QACb,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;IACpC,CAAC;IA+BD,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,4DACI,KAAK,EAAE;oBACH,YAAY,EAAE,IAAI;oBAClB,sBAAsB,EAAE,IAAI,CAAC,QAAQ;iBACxC;gBAED,8DACI,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,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,~~GAC3B~~;gBACF,qEACI,KAAK,EAAC,oBAAoB,EAC1B,IAAI,EAAE,IAAI,CAAC,UAAU,EACrB,IAAI,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,EAChF,OAAO,EAAE,IAAI,CAAC,UAAU,GAC1B,CACA,CACH,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["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"]}
1	+ {"version":3,"file":"xplor-input-send.js","sourceRoot":"","sources":["../../../src/components/xplor-input-send/xplor-input-send.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

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

@@ -1,6 +1,10 @@
 import { Host, h } from "@stencil/core";
+let inputTextIdCounter = 0;
 export class XplorInputText {
     constructor() {
+        this.inputId = `xplor-input-text-${++inputTextIdCounter}`;
+        this.errorId = `${this.inputId}-error`;
+        this.helperId = `${this.inputId}-helper`;
         /**
          * Input value
          */
@@ -77,9 +81,9 @@ export class XplorInputText {
             '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 is() { return "xplor-input-text"; }
     static get encapsulation() { return "scoped"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"xplor-input-text.js","sourceRoot":"","sources":["../../../src/components/xplor-input-text/xplor-input-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;~~AAOrF~~,MAAM,OAAO,cAAc;IAL3B;~~QAME~~;;WAEG;QACsB,UAAK,GAAW,EAAE,CAAC;QAE5C;;WAEG;QACK,UAAK,GAAW,EAAE,CAAC;QAE3B;;WAEG;QACK,gBAAW,GAAW,EAAE,CAAC;QAEjC;;WAEG;QACK,SAAI,GAAW,MAAM,CAAC;QAE9B;;WAEG;QACK,YAAO,GAAW,OAAO,CAAC;QAElC;;WAEG;QACK,UAAK,GAAW,SAAS,CAAC;QAElC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAElC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAElC;;WAEG;QACK,gBAAW,GAAqB,MAAM,CAAC;QAE/C;;WAEG;QACK,UAAK,GAAW,EAAE,CAAC;QAE3B;;WAEG;QACK,eAAU,GAAW,EAAE,CAAC;QAEhC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAsBzB,cAAS,GAAY,KAAK,CAAC;QAE5B,gBAAW,GAAG,CAAC,KAAY,EAAE,EAAE;YACrC,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;YAChD,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAC1B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC,CAAC;QAEM,iBAAY,GAAG,CAAC,KAAY,EAAE,EAAE;YACtC,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;YAChD,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC,CAAC;QAEM,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC1C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC,CAAC;QAEM,eAAU,GAAG,CAAC,KAAiB,EAAE,EAAE;YACzC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC7B,CAAC,CAAC;~~KAsDH~~;~~IApDC~~,MAAM;QACJ,MAAM,gBAAgB,GAAG;YACvB,kBAAkB,EAAE,IAAI;YACxB,2BAA2B,EAAE,IAAI,CAAC,SAAS;YAC3C,4BAA4B,EAAE,IAAI,CAAC,QAAQ;YAC3C,yBAAyB,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK;SACxC,CAAC;QAEF,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,KAAK,KAAK,IAAI,CAAC,IAAI,CAAC,WAAW,KAAK,MAAM,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;QAEnH,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,gBAAgB;gBACzB,IAAI,CAAC,KAAK,IAAI,CACb,8DAAO,KAAK,EAAC,yBAAyB;~~oBACnC~~,IAAI,CAAC,KAAK;oBACV,IAAI,CAAC,QAAQ,IAAI,6DAAM,KAAK,EAAC,4BAA4B,QAAS,CAC7D,CACT;gBAED,4DAAK,KAAK,EAAC,yBAAyB;oBAClC,8DACE,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;4BACL,eAAe,EAAE,IAAI,CAAC,OAAO;yBAC9B,~~GACD~~;oBACF,6DAAM,IAAI,EAAC,cAAc,GAAG,CACxB;gBAEL,WAAW,IAAI,CACd,4DAAK,KAAK,EAAC,2BAA2B;oBACnC,IAAI,CAAC,KAAK,IAAI,4DAAK,KAAK,EAAC,iCAAiC,~~IAAE~~,IAAI,CAAC,KAAK,CAAO;~~oBAC7E~~,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,IAAI,4DAAK,KAAK,EAAC,+BAA+B,~~IAAE~~,IAAI,CAAC,UAAU,CAAO,~~CACjG~~,CACP;gBAED,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}
1	+ {"version":3,"file":"xplor-input-text.js","sourceRoot":"","sources":["../../../src/components/xplor-input-text/xplor-input-text.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

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

@@ -1,6 +1,10 @@
 import { Host, h } from "@stencil/core";
+let inputTextAreaIdCounter = 0;
 export class XplorInputTextArea {
     constructor() {
+        this.inputId = `xplor-input-text-area-${++inputTextAreaIdCounter}`;
+        this.errorId = `${this.inputId}-error`;
+        this.helperId = `${this.inputId}-helper`;
         /**
          * Input value
          */
@@ -79,9 +83,9 @@ export class XplorInputTextArea {
         };
         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 is() { return "xplor-input-text-area"; }
     static get encapsulation() { return "scoped"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"xplor-input-text-area.js","sourceRoot":"","sources":["../../../src/components/xplor-input-text-area/xplor-input-text-area.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;~~AAOrF~~,MAAM,OAAO,kBAAkB;IAL/B;~~QAME~~;;WAEG;QACsB,UAAK,GAAW,EAAE,CAAC;QAE5C;;WAEG;QACK,UAAK,GAAW,EAAE,CAAC;QAE3B;;WAEG;QACK,gBAAW,GAAW,EAAE,CAAC;QAEjC;;WAEG;QACK,YAAO,GAAW,OAAO,CAAC;QAElC;;WAEG;QACK,UAAK,GAAW,SAAS,CAAC;QAElC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAElC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAElC;;WAEG;QACK,cAAS,GAAY,IAAI,CAAC;QAElC;;WAEG;QACK,SAAI,GAAW,CAAC,CAAC;QAEzB;;WAEG;QACK,gBAAW,GAAqB,MAAM,CAAC;QAE/C;;WAEG;QACK,UAAK,GAAW,EAAE,CAAC;QAE3B;;WAEG;QACK,eAAU,GAAW,EAAE,CAAC;QAEhC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAiBzB,cAAS,GAAY,KAAK,CAAC;QAE5B,gBAAW,GAAG,CAAC,KAAY,EAAE,EAAE;YACrC,MAAM,MAAM,GAAG,KAAK,CAAC,MAA6B,CAAC;YACnD,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAC1B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC,CAAC;QAEM,iBAAY,GAAG,CAAC,KAAY,EAAE,EAAE;YACtC,MAAM,MAAM,GAAG,KAAK,CAAC,MAA6B,CAAC;YACnD,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;YAChB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;YACvB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC,CAAC;~~KA8DH~~;~~IA5DC~~,MAAM;QACJ,MAAM,gBAAgB,GAAG;YACvB,uBAAuB,EAAE,IAAI;YAC7B,gCAAgC,EAAE,IAAI,CAAC,SAAS;YAChD,iCAAiC,EAAE,IAAI,CAAC,QAAQ;YAChD,8BAA8B,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK;SAC7C,CAAC;QAEF,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;QACzF,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,KAAK,KAAK,IAAI,CAAC,IAAI,CAAC,WAAW,KAAK,MAAM,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;QAEnH,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,gBAAgB;gBACzB,IAAI,CAAC,KAAK,IAAI,CACb,8DAAO,KAAK,EAAC,8BAA8B;~~oBACxC~~,IAAI,CAAC,KAAK;oBACV,IAAI,CAAC,QAAQ,IAAI,6DAAM,KAAK,EAAC,iCAAiC,QAAS,CAClE,CACT;gBAED,4DAAK,KAAK,EAAC,8BAA8B;oBACvC,iEACE,KAAK,EAAC,8BAA8B,EACpC,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,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EACtC,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,EACtC,KAAK,EAAE;4BACL,eAAe,EAAE,IAAI,CAAC,OAAO;yBAC9B,~~GACD~~;oBACD,eAAe,IAAI,CAClB,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,8BAA8B,EACpC,OAAO,EAAE,IAAI,CAAC,WAAW,gBACd,OAAO,aAGX,CACV,CACG;gBAEL,WAAW,IAAI,CACd,4DAAK,KAAK,EAAC,gCAAgC;oBACxC,IAAI,CAAC,KAAK,IAAI,4DAAK,KAAK,EAAC,sCAAsC,~~IAAE~~,IAAI,CAAC,KAAK,CAAO;~~oBAClF~~,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,IAAI,4DAAK,KAAK,EAAC,oCAAoC,~~IAAE~~,IAAI,CAAC,UAAU,CAAO,~~CACtG~~,CACP,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}
1	+ {"version":3,"file":"xplor-input-text-area.js","sourceRoot":"","sources":["../../../src/components/xplor-input-text-area/xplor-input-text-area.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

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

@@ -1,6 +1,10 @@
 import { Host, h } from "@stencil/core";
+let inputTextSecondaryIdCounter = 0;
 export class XplorInputTextSecondary {
     constructor() {
+        this.inputId = `xplor-input-text-secondary-${++inputTextSecondaryIdCounter}`;
+        this.errorId = `${this.inputId}-error`;
+        this.helperId = `${this.inputId}-helper`;
         this.value = '';
         this.label = '';
         this.placeholder = '';
@@ -42,9 +46,9 @@ export class XplorInputTextSecondary {
             '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 is() { return "xplor-input-text-secondary"; }
     static get encapsulation() { return "scoped"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"xplor-input-text-secondary.js","sourceRoot":"","sources":["../../../src/components/xplor-input-text-secondary/xplor-input-text-secondary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;~~AAOrF~~,MAAM,OAAO,uBAAuB;IALpC;~~QAM2B~~,UAAK,GAAW,EAAE,CAAC;QACpC,UAAK,GAAW,EAAE,CAAC;QACnB,gBAAW,GAAW,EAAE,CAAC;QACzB,SAAI,GAAW,MAAM,CAAC;QACtB,YAAO,GAAW,OAAO,CAAC;QAC1B,aAAQ,GAAY,KAAK,CAAC;QAC1B,aAAQ,GAAY,KAAK,CAAC;QAC1B,gBAAW,GAAqB,MAAM,CAAC;QACvC,UAAK,GAAW,EAAE,CAAC;QACnB,eAAU,GAAW,EAAE,CAAC;QACxB,aAAQ,GAAY,KAAK,CAAC;QAC1B,YAAO,GAAY,KAAK,CAAC;QAOxB,cAAS,GAAY,KAAK,CAAC;QAE5B,gBAAW,GAAG,CAAC,KAAY,EAAE,EAAE;YACrC,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;YAChD,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAC1B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC,CAAC;QAEM,iBAAY,GAAG,CAAC,KAAY,EAAE,EAAE;YACtC,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;YAChD,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC,CAAC;QAEM,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC1C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC,CAAC;QAEM,eAAU,GAAG,CAAC,KAAiB,EAAE,EAAE;YACzC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC7B,CAAC,CAAC;~~KAuDH~~;~~IArDC~~,MAAM;QACJ,MAAM,gBAAgB,GAAG;YACvB,iBAAiB,EAAE,IAAI;YACvB,0BAA0B,EAAE,IAAI,CAAC,SAAS;YAC1C,2BAA2B,EAAE,IAAI,CAAC,QAAQ;YAC1C,wBAAwB,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK;YACtC,wBAAwB,EAAE,IAAI,CAAC,OAAO;SACvC,CAAC;QAEF,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,KAAK,KAAK,IAAI,CAAC,IAAI,CAAC,WAAW,KAAK,MAAM,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;QAEnH,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,gBAAgB;gBACzB,IAAI,CAAC,KAAK,IAAI,CACb,8DAAO,KAAK,EAAC,wBAAwB;~~oBAClC~~,IAAI,CAAC,KAAK;oBACV,IAAI,CAAC,QAAQ,IAAI,6DAAM,KAAK,EAAC,2BAA2B,QAAS,CAC5D,CACT;gBAED,4DAAK,KAAK,EAAC,wBAAwB;oBACjC,8DACE,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;4BACL,eAAe,EAAE,IAAI,CAAC,OAAO;yBAC9B,~~GACD~~;oBACF,6DAAM,IAAI,EAAC,cAAc,GAAG,CACxB;gBAEL,WAAW,IAAI,CACd,4DAAK,KAAK,EAAC,0BAA0B;oBAClC,IAAI,CAAC,KAAK,IAAI,4DAAK,KAAK,EAAC,gCAAgC,~~IAAE~~,IAAI,CAAC,KAAK,CAAO;~~oBAC5E~~,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,IAAI,4DAAK,KAAK,EAAC,8BAA8B,~~IAAE~~,IAAI,CAAC,UAAU,CAAO,~~CAChG~~,CACP;gBAED,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}
1	+ {"version":3,"file":"xplor-input-text-secondary.js","sourceRoot":"","sources":["../../../src/components/xplor-input-text-secondary/xplor-input-text-secondary.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

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

@@ -17,6 +17,10 @@ export 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;
@@ -29,7 +33,7 @@ export 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 is() { return "xplor-input-title"; }
     static get encapsulation() { return "scoped"; }
@@ -124,6 +128,26 @@ export class XplorInputTitle {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "attribute": "aria-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Title'"
             }
         };
     }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"xplor-input-title.js","sourceRoot":"","sources":["../../../src/components/xplor-input-title/xplor-input-title.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,eAAe;IAL5B;QAME;;WAEG;QACsB,UAAK,GAAW,EAAE,CAAC;QAE5C;;WAEG;QACK,gBAAW,GAAW,EAAE,CAAC;QAEjC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAElC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;~~QAY1B~~,gBAAW,GAAG,CAAC,KAAY,EAAE,EAAE;YACrC,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;YAChD,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAC1B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC,CAAC;QAEM,iBAAY,GAAG,CAAC,KAAY,EAAE,EAAE;YACtC,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;YAChD,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC,CAAC;~~KAkBH~~;~~IAhBC~~,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DACE,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,GAC3B,CACG,CACR,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["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"]}
1	+ {"version":3,"file":"xplor-input-title.js","sourceRoot":"","sources":["../../../src/components/xplor-input-title/xplor-input-title.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,eAAe;IAL5B;QAME;;WAEG;QACsB,UAAK,GAAW,EAAE,CAAC;QAE5C;;WAEG;QACK,gBAAW,GAAW,EAAE,CAAC;QAEjC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAElC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAElC;;WAEG;QACK,cAAS,GAAW,OAAO,CAAC;QAY5B,gBAAW,GAAG,CAAC,KAAY,EAAE,EAAE;YACrC,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;YAChD,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAC1B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC,CAAC;QAEM,iBAAY,GAAG,CAAC,KAAY,EAAE,EAAE;YACtC,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;YAChD,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC,CAAC;KAmBH;IAjBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DACE,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,GAC3B,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

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

@@ -1,7 +1,11 @@
 import { h, Host } from "@stencil/core";
 export class XplorLinks {
+    constructor() {
+        /** 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 is() { return "xplor-links"; }
     static get encapsulation() { return "shadow"; }
@@ -35,6 +39,26 @@ export class XplorLinks {
                 "getter": false,
                 "setter": false,
                 "reflect": false
+            },
+            "imageAlt": {
+                "type": "string",
+                "attribute": "image-alt",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alt text for the image"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
             }
         };
     }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"xplor-links.js","sourceRoot":"","sources":["../../../src/components/xplor-links/xplor-links.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAMzD,MAAM,OAAO,UAAU;~~IAErB~~,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,SAAS,IAAI,CAAC,KAAK,EAAE;YAChC,0DAAG,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,oBAAoB;gBACxC,GAAG;;gBACmB,GAAG,CACxB;YACJ,4DAAK,KAAK,EAAC,6CAA6C;gBACtD,2DAAI,KAAK,EAAC,wBAAwB,iDAAgD,CAC9E;YACN,4DAAK,KAAK,EAAC,yBAAyB;gBAClC,4DAAK,KAAK,EAAC,2DAA2D;oBACpE,4DAAK,KAAK,EAAC,UAAU;wBACnB,2DAAI,KAAK,EAAC,6EAA6E,0BAElF;wBACL,0DAAG,KAAK,EAAC,8BAA8B,kJAGnC,CACA;oBACN,2DAAI,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,gEAAgE;wBACpF;4BACE,4DAAK,KAAK,EAAC,2BAA2B;gCACpC,4DACE,KAAK,EAAC,sBAAsB,EAC5B,GAAG,EAAC,2JAA2J,EAC/J,GAAG,~~EAAC,~~EAAE,~~GACN~~;gCACF;oCACE,2DAAI,KAAK,EAAC,wDAAwD,uBAAsB;oCACxF,0DAAG,KAAK,EAAC,yCAAyC,uBAAqB,CACnE,CACF,CACH,CACF,CACD,CACF,CACD,CACR,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\n@Component({\n tag: 'xplor-links',\n styleUrl: 'xplor-links.css',\n shadow: true,\n})\nexport class XplorLinks {\n @Prop() brand: string;\n render() {\n return (\n <Host class={`theme-${this.brand}`}>\n <a class=\"x-link\" href=\"https://google.com\">\n {' '}\n googole this is a link{' '}\n </a>\n <div class=\"bg-black p-2 rounded-md flex justify-center\">\n <h1 class=\"text-primary font-sans\">This is a Stencil component using Tailwind</h1>\n </div>\n <div class=\"bg-white py-24 sm:py-32\">\n <div class=\"mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3\">\n <div class=\"max-w-xl\">\n <h2 class=\"text-pretty text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl\">\n Meet our leadership\n </h2>\n <p class=\"mt-6 text-lg/8 text-gray-600\">\n We’re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the\n best results for our clients.\n </p>\n </div>\n <ul role=\"list\" class=\"grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2\">\n <li>\n <div class=\"flex items-center gap-x-6\">\n <img\n class=\"size-16 rounded-full\"\n 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\"\n alt~~=\"~~\"\n />\n <div>\n <h3 class=\"text-base/7 font-semibold tracking-tight text-gray-900\">Leslie Alexander</h3>\n <p class=\"text-sm/6 font-semibold text-indigo-600\">Co-Founder / CEO</p>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"xplor-links.js","sourceRoot":"","sources":["../../../src/components/xplor-links/xplor-links.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAMzD,MAAM,OAAO,UAAU;IALvB;QAQE,6BAA6B;QACrB,aAAQ,GAAW,EAAE,CAAC;KA0C/B;IAzCC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,SAAS,IAAI,CAAC,KAAK,EAAE;YAChC,0DAAG,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,oBAAoB;gBACxC,GAAG;;gBACmB,GAAG,CACxB;YACJ,4DAAK,KAAK,EAAC,6CAA6C;gBACtD,2DAAI,KAAK,EAAC,wBAAwB,iDAAgD,CAC9E;YACN,4DAAK,KAAK,EAAC,yBAAyB;gBAClC,4DAAK,KAAK,EAAC,2DAA2D;oBACpE,4DAAK,KAAK,EAAC,UAAU;wBACnB,2DAAI,KAAK,EAAC,6EAA6E,0BAElF;wBACL,0DAAG,KAAK,EAAC,8BAA8B,kJAGnC,CACA;oBACN,2DAAI,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,gEAAgE;wBACpF;4BACE,4DAAK,KAAK,EAAC,2BAA2B;gCACpC,4DACE,KAAK,EAAC,sBAAsB,EAC5B,GAAG,EAAC,2JAA2J,EAC/J,GAAG,EAAE,IAAI,CAAC,QAAQ,GAClB;gCACF;oCACE,2DAAI,KAAK,EAAC,wDAAwD,uBAAsB;oCACxF,0DAAG,KAAK,EAAC,yCAAyC,uBAAqB,CACnE,CACF,CACH,CACF,CACD,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\n@Component({\n tag: 'xplor-links',\n styleUrl: 'xplor-links.css',\n shadow: true,\n})\nexport class XplorLinks {\n @Prop() brand: string;\n\n /** Alt text for the image */\n @Prop() imageAlt: string = '';\n render() {\n return (\n <Host class={`theme-${this.brand}`}>\n <a class=\"x-link\" href=\"https://google.com\">\n {' '}\n googole this is a link{' '}\n </a>\n <div class=\"bg-black p-2 rounded-md flex justify-center\">\n <h1 class=\"text-primary font-sans\">This is a Stencil component using Tailwind</h1>\n </div>\n <div class=\"bg-white py-24 sm:py-32\">\n <div class=\"mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3\">\n <div class=\"max-w-xl\">\n <h2 class=\"text-pretty text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl\">\n Meet our leadership\n </h2>\n <p class=\"mt-6 text-lg/8 text-gray-600\">\n We’re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the\n best results for our clients.\n </p>\n </div>\n <ul role=\"list\" class=\"grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2\">\n <li>\n <div class=\"flex items-center gap-x-6\">\n <img\n class=\"size-16 rounded-full\"\n 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\"\n alt={this.imageAlt}\n />\n <div>\n <h3 class=\"text-base/7 font-semibold tracking-tight text-gray-900\">Leslie Alexander</h3>\n <p class=\"text-sm/6 font-semibold text-indigo-600\">Co-Founder / CEO</p>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}