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

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

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

Files changed (293) hide show

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: 'c03b31f6576f7a103227964d33a40cb4e659c3ce' }, h("div", { key: '3f29fe2801d281c6e110a512156527cabce854a8', class: containerClasses }, this.label && (h("label", { key: 'b2d3bcb28e66d80a43fbca6e6bc37f1c967982ba', class: "xplor-input-text-area__label", htmlFor: this.inputId }, this.label, this.required && h("span", { key: '73c21af6cba3faff373a0d1700a8577ee3fffb46', class: "xplor-input-text-area__required" }, "*"))), h("div", { key: 'f9f60ad9aa09747bdd77b51f7576d4d9811b5c81', class: "xplor-input-text-area__field" }, h("textarea", { key: 'd41b249092b9478a5fb323042a1e7397b1326dd0', 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: '8cb817547c0c494c2f82216a9f07a78bc4c5314d', type: "button", class: "xplor-input-text-area__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715"))), showDetails && (h("div", { key: 'e0f4d72ac96eda8ce0913cb80f11a65b1adfc0c4', class: "xplor-input-text-area__details" }, this.error && h("div", { key: '7eb06f00783c62614af72fc769b585b167f8d25b', class: "xplor-input-text-area__error-message", id: this.errorId }, this.error), !this.error && this.helperText && h("div", { key: 'c9f5ad0158da20c2a743e7fb304a04eeb6a0270b', 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: 'cba1682d9584d1dad7da1974dee2ba86423e5a8b' }, h("div", { key: '2dd7399f266c15a9654dcb8075edd69501f464e0', class: containerClasses }, this.label && (h("label", { key: '445608b567e7673386bb99791f63e852c6b95627', class: "input-secondary__label", htmlFor: this.inputId }, this.label, this.required && h("span", { key: '3e926e2b17ada694064559525a86dab2f64bbb39', class: "input-secondary__required" }, "*"))), h("div", { key: 'f2b73b8eed06c0ad8931e67e8d26e6d13effa14d', class: "input-secondary__field" }, h("input", { key: 'dd3506bb5fd1e14f3e30600f3b00b28446f7fa87', 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: 'ae3d7ee9248d8098e36bd44a8e07454cbdfecb32', name: "append-inner" })), showDetails && (h("div", { key: '9cf7faef29234709d7301ede1d635dda4eabf3ac', class: "input-secondary__details" }, this.error && h("div", { key: '7315826f15369e3a98cd629d484a34bc373f753d', class: "input-secondary__error-message", id: this.errorId }, this.error), !this.error && this.helperText && h("div", { key: '356726d208da52b6e4c973f06511132a26f70069', class: "input-secondary__helper-text", id: this.helperId }, this.helperText))), h("slot", { key: '190b4ed0fd2e6253dcae23ac4637bab3e0b26d81', 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: '1e49e53ce1525bdfa81b550739c97b3927a919e6' }, h("input", { key: '74dd032886da4bca30a5f38a15b18903f03c5095', 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: 'e26ac5962cb44c6e05a39034e76b6f35d076cb60', class: `theme-${this.brand}` }, h("a", { key: '030c76cf101abf498a2828bffef051f5e01d3a65', class: "x-link", href: "https://google.com" }, ' ', "googole this is a link", ' '), h("div", { key: '13ef22eb8e5ddc49976006b138b7bac0e379d85c', class: "bg-black p-2 rounded-md flex justify-center" }, h("h1", { key: '39e7adc65ee5b26b4be9c111eabdb295fc964065', class: "text-primary font-sans" }, "This is a Stencil component using Tailwind")), h("div", { key: 'dae9ed47cdaa4afb6a6b70ca82c9b3c280f39215', class: "bg-white py-24 sm:py-32" }, h("div", { key: '32f746f7ec8c3337fff37e445dfb7e31a42e68c9', class: "mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3" }, h("div", { key: '309dfd3930301f77cf83eea80579063d1c4aee85', class: "max-w-xl" }, h("h2", { key: '6fac68cca56d79303a1d92b86d059f7f91296b3e', class: "text-pretty text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl" }, "Meet our leadership"), h("p", { key: 'd759f98a1c30f4636592a5aa5ffa8f06cfa93dbe', 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: '978c9a043988f63c53b2ec9f7e0e73367dd72f41', 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: '6ae95678b9ef5ed2ad60c62661aa4a6c966f2740' }, h("div", { key: '0a98faa21b7216205d1ad44d977bcade55ce3162', class: "flex items-center gap-x-6" }, h("img", { key: '58c7a75c098911ca434d5de959ca358a80cb5598', 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: '314a9de00a4ac46b67a12cc57ca8392ccea7cfd8' }, h("h3", { key: 'd87b6c4fcdcf68e7bd9b9b29428cfe10de9e03fd', class: "text-base/7 font-semibold tracking-tight text-gray-900" }, "Leslie Alexander"), h("p", { key: '254489d8c64e765276fbfb72cd88221a0e2575ad', 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"]}

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

@@ -33,6 +33,7 @@ export class XplorModal {
          * Whether to show the title area (for spacing)
          */
         this.showTitle = true;
+        this.previouslyFocusedElement = null;
         this.handleBackdropClick = () => {
             if (!this.persistent) {
                 this.closeModal();
@@ -49,14 +50,68 @@ export class XplorModal {
     handleOpenChange(newValue) {
         if (newValue) {
             document.body.style.overflow = 'hidden';
+            this.previouslyFocusedElement = document.activeElement;
+            requestAnimationFrame(() => {
+                this.setInitialFocus();
+            });
         }
         else {
             document.body.style.overflow = '';
+            if (this.previouslyFocusedElement) {
+                this.previouslyFocusedElement.focus();
+                this.previouslyFocusedElement = null;
+            }
         }
     }
     disconnectedCallback() {
         document.body.style.overflow = '';
     }
+    handleKeyDown(event) {
+        if (!this.open)
+            return;
+        if (event.key === 'Escape' && !this.persistent) {
+            event.preventDefault();
+            this.closeModal();
+            return;
+        }
+        if (event.key === 'Tab') {
+            this.trapFocus(event);
+        }
+    }
+    getFocusableElements() {
+        if (!this.dialogEl)
+            return [];
+        const selectors = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+        return Array.from(this.dialogEl.querySelectorAll(selectors));
+    }
+    trapFocus(event) {
+        const focusableElements = this.getFocusableElements();
+        if (focusableElements.length === 0)
+            return;
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+        if (event.shiftKey) {
+            if (document.activeElement === firstElement) {
+                event.preventDefault();
+                lastElement.focus();
+            }
+        }
+        else {
+            if (document.activeElement === lastElement) {
+                event.preventDefault();
+                firstElement.focus();
+            }
+        }
+    }
+    setInitialFocus() {
+        const focusableElements = this.getFocusableElements();
+        if (focusableElements.length > 0) {
+            focusableElements[0].focus();
+        }
+        else if (this.dialogEl) {
+            this.dialogEl.focus();
+        }
+    }
     render() {
         if (!this.open) {
             return null;
@@ -73,7 +128,10 @@ export class XplorModal {
                 width: this.width,
                 maxWidth: this.maxWidth,
                 maxHeight: this.maxHeight,
-            }, onClick: this.handleCardClick }, h("button", { type: "button", class: "xplor-modal__close-btn", onClick: this.closeModal, "aria-label": "Close modal", "data-testid": "common-modal-close-button" }, "\u2715"), h("div", { class: "xplor-modal__title" }, h("slot", { name: "title" })), h("div", { class: "xplor-modal__subtitle" }, h("slot", { name: "subtitle" })), h("div", { class: bodyClasses }, this.loading ? (h("div", { class: "xplor-modal__loading" }, h("div", { class: "xplor-modal__spinner" }))) : (h("slot", { name: "body" }))), h("div", { class: "xplor-modal__actions" }, h("slot", { name: "actions" }))))));
+            }, onClick: this.handleCardClick, role: "dialog", "aria-modal": "true", "aria-labelledby": this.ariaLabel ? undefined : 'xplor-modal-title', "aria-label": this.ariaLabel, tabindex: "-1", ref: (el) => (this.dialogEl = el) }, h("button", { type: "button", class: "xplor-modal__close-btn", onClick: this.closeModal, "aria-label": "Close modal", "data-testid": "common-modal-close-button" }, "\u2715"), h("div", { class: "xplor-modal__title", id: "xplor-modal-title" }, h("slot", { name: "title" })), h("div", { class: "xplor-modal__subtitle" }, h("slot", { name: "subtitle" })), h("div", { class: bodyClasses }, this.loading ? (h("div", { class: "xplor-modal__loading", role: "status", "aria-label": "Loading" }, h("div", { class: "xplor-modal__spinner" }))) : ([
+            h("slot", { name: "body" }),
+            h("slot", null)
+        ])), h("div", { class: "xplor-modal__actions" }, h("slot", { name: "actions" }))))));
     }
     static get is() { return "xplor-modal"; }
     static get encapsulation() { return "scoped"; }
@@ -248,6 +306,25 @@ export class XplorModal {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "true"
+            },
+            "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 modal (used if no title slot)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
             }
         };
     }
@@ -269,11 +346,21 @@ export class XplorModal {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "open",
                 "methodName": "handleOpenChange"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 //# sourceMappingURL=xplor-modal.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"xplor-modal.js","sourceRoot":"","sources":["../../../src/components/xplor-modal/xplor-modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAOrF,MAAM,OAAO,UAAU;IALvB;QAME;;WAEG;QACsB,SAAI,GAAY,KAAK,CAAC;QAE/C;;WAEG;QACK,UAAK,GAAW,OAAO,CAAC;QAEhC;;WAEG;QACK,aAAQ,GAAW,KAAK,CAAC;QAEjC;;WAEG;QACK,cAAS,GAAW,KAAK,CAAC;QAElC;;WAEG;QACK,eAAU,GAAY,IAAI,CAAC;QAEnC;;WAEG;QACK,eAAU,GAAY,KAAK,CAAC;QAEpC;;WAEG;QACK,YAAO,GAAY,KAAK,CAAC;QAEjC;;WAEG;QACK,cAAS,GAAY,IAAI,CAAC;QAoB1B,wBAAmB,GAAG,GAAG,EAAE;YACjC,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;gBACrB,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,CAAC;QACH,CAAC,CAAC;QAEM,oBAAe,GAAG,CAAC,KAAY,EAAE,EAAE;YACzC,KAAK,CAAC,eAAe,EAAE,CAAC;QAC1B,CAAC,CAAC;QAEM,eAAU,GAAG,GAAG,EAAE;YACxB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;QACzB,CAAC,CAAC;KAiEH;IA1FC,gBAAgB,CAAC,QAAiB;QAChC,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC1C,CAAC;aAAM,CAAC;YACN,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;QACpC,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;IACpC,CAAC;IAiBD,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,OAAO,IAAI,CAAC;QACd,CAAC;QAED,MAAM,WAAW,GAAG;YAClB,mBAAmB,EAAE,IAAI;YACzB,+BAA+B,EAAE,IAAI,CAAC,UAAU;SACjD,CAAC;QAEF,MAAM,WAAW,GAAG;YAClB,mBAAmB,EAAE,IAAI;YACzB,6BAA6B,EAAE,CAAC,IAAI,CAAC,SAAS;SAC/C,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,WAAK,KAAK,EAAC,uBAAuB,EAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB;gBAClE,WACE,KAAK,EAAE,WAAW,EAClB,KAAK,EAAE;wBACL,KAAK,EAAE,IAAI,CAAC,KAAK;wBACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;wBACvB,SAAS,EAAE,IAAI,CAAC,SAAS;qBAC1B,EACD,OAAO,EAAE,IAAI,CAAC,eAAe;oBAE7B,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,wBAAwB,EAC9B,OAAO,EAAE,IAAI,CAAC,UAAU,gBACb,aAAa,iBACZ,2BAA2B,aAGhC;oBAET,WAAK,KAAK,EAAC,oBAAoB;wBAC7B,YAAM,IAAI,EAAC,OAAO,GAAG,CACjB;oBAEN,WAAK,KAAK,EAAC,uBAAuB;wBAChC,YAAM,IAAI,EAAC,UAAU,GAAG,CACpB;oBAEN,WAAK,KAAK,EAAE,WAAW,IACpB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACd,WAAK,KAAK,EAAC,sBAAsB;wBAC/B,WAAK,KAAK,EAAC,sBAAsB,GAAO,CACpC,CACP,CAAC,CAAC,CAAC,CACF,YAAM,IAAI,EAAC,MAAM,GAAG,CACrB,CACG;oBAEN,WAAK,KAAK,EAAC,sBAAsB;wBAC/B,YAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Watch } from '@stencil/core';\n\n@Component({\n tag: 'xplor-modal',\n styleUrl: 'xplor-modal.scss',\n scoped: true,\n})\nexport class XplorModal {\n /*\n Whether the modal is open\n /\n @Prop({ mutable: true }) open: boolean = false;\n\n /\n Modal width\n /\n @Prop() width: string = '600px';\n\n /\n Maximum width\n /\n @Prop() maxWidth: string = '90%';\n\n /\n Maximum height\n /\n @Prop() maxHeight: string = '90%';\n\n /\n Whether the modal content is scrollable\n /\n @Prop() scrollable: boolean = true;\n\n /\n Persistent mode - prevents closing on backdrop click\n /\n @Prop() persistent: boolean = false;\n\n /\n Loading state\n /\n @Prop() loading: boolean = false;\n\n /\n Whether to show the title area (for spacing)\n /\n @Prop() showTitle: boolean = true;\n\n /\n Close event\n */\n @Event() xplorClose: EventEmitter<void>;\n\n @Watch('open')\n handleOpenChange(newValue: boolean) {\n if (newValue) {\n document.body.style.overflow = 'hidden';\n } else {\n document.body.style.overflow = '';\n }\n }\n\n disconnectedCallback() {\n document.body.style.overflow = '';\n }\n\n private handleBackdropClick = () => {\n if (!this.persistent) {\n this.closeModal();\n }\n };\n\n private handleCardClick = (event: Event) => {\n event.stopPropagation();\n };\n\n private closeModal = () => {\n this.open = false;\n this.xplorClose.emit();\n };\n\n render() {\n if (!this.open) {\n return null;\n }\n\n const cardClasses = {\n 'xplor-modal__card': true,\n 'xplor-modal__card--scrollable': this.scrollable,\n };\n\n const bodyClasses = {\n 'xplor-modal__body': true,\n 'xplor-modal__body--no-title': !this.showTitle,\n };\n\n return (\n <Host>\n <div class=\"xplor-modal__backdrop\" onClick={this.handleBackdropClick}>\n <div\n class={cardClasses}\n style={{\n width: this.width,\n maxWidth: this.maxWidth,\n maxHeight: this.maxHeight,\n }}\n onClick={this.handleCardClick}\n >\n <button\n type=\"button\"\n class=\"xplor-modal__close-btn\"\n onClick={this.closeModal}\n aria-label=\"Close modal\"\n data-testid=\"common-modal-close-button\"\n >\n ✕\n </button>\n\n <div class=\"xplor-modal__title\">\n <slot name=\"title\" />\n </div>\n\n <div class=\"xplor-modal__subtitle\">\n <slot name=\"subtitle\" />\n </div>\n\n <div class={bodyClasses}>\n {this.loading ? (\n <div class=\"xplor-modal__loading\">\n <div class=\"xplor-modal__spinner\"></div>\n </div>\n ) : (\n <slot name=\"body\" />\n )}\n </div>\n\n <div class=\"xplor-modal__actions\">\n <slot name=\"actions\" />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"xplor-modal.js","sourceRoot":"","sources":["../../../src/components/xplor-modal/xplor-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Watch, Element, Listen } from '@stencil/core';\n\n@Component({\n tag: 'xplor-modal',\n styleUrl: 'xplor-modal.scss',\n scoped: true,\n})\nexport class XplorModal {\n /*\n Whether the modal is open\n /\n @Prop({ mutable: true }) open: boolean = false;\n\n /\n Modal width\n /\n @Prop() width: string = '600px';\n\n /\n Maximum width\n /\n @Prop() maxWidth: string = '90%';\n\n /\n Maximum height\n /\n @Prop() maxHeight: string = '90%';\n\n /\n Whether the modal content is scrollable\n /\n @Prop() scrollable: boolean = true;\n\n /\n Persistent mode - prevents closing on backdrop click\n /\n @Prop() persistent: boolean = false;\n\n /\n Loading state\n /\n @Prop() loading: boolean = false;\n\n /\n Whether to show the title area (for spacing)\n /\n @Prop() showTitle: boolean = true;\n\n /\n Accessible label for the modal (used if no title slot)\n /\n @Prop() ariaLabel: string;\n\n /\n Close event\n */\n @Event() xplorClose: EventEmitter<void>;\n\n @Element() el: HTMLElement;\n\n private previouslyFocusedElement: HTMLElement \| null = null;\n private dialogEl: HTMLElement;\n\n @Watch('open')\n handleOpenChange(newValue: boolean) {\n if (newValue) {\n document.body.style.overflow = 'hidden';\n this.previouslyFocusedElement = document.activeElement as HTMLElement;\n requestAnimationFrame(() => {\n this.setInitialFocus();\n });\n } else {\n document.body.style.overflow = '';\n if (this.previouslyFocusedElement) {\n this.previouslyFocusedElement.focus();\n this.previouslyFocusedElement = null;\n }\n }\n }\n\n disconnectedCallback() {\n document.body.style.overflow = '';\n }\n\n @Listen('keydown')\n handleKeyDown(event: KeyboardEvent) {\n if (!this.open) return;\n\n if (event.key === 'Escape' && !this.persistent) {\n event.preventDefault();\n this.closeModal();\n return;\n }\n\n if (event.key === 'Tab') {\n this.trapFocus(event);\n }\n }\n\n private getFocusableElements(): HTMLElement[] {\n if (!this.dialogEl) return [];\n const selectors = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n return Array.from(this.dialogEl.querySelectorAll(selectors)) as HTMLElement[];\n }\n\n private trapFocus(event: KeyboardEvent) {\n const focusableElements = this.getFocusableElements();\n if (focusableElements.length === 0) return;\n\n const firstElement = focusableElements[0];\n const lastElement = focusableElements[focusableElements.length - 1];\n\n if (event.shiftKey) {\n if (document.activeElement === firstElement) {\n event.preventDefault();\n lastElement.focus();\n }\n } else {\n if (document.activeElement === lastElement) {\n event.preventDefault();\n firstElement.focus();\n }\n }\n }\n\n private setInitialFocus() {\n const focusableElements = this.getFocusableElements();\n if (focusableElements.length > 0) {\n focusableElements[0].focus();\n } else if (this.dialogEl) {\n this.dialogEl.focus();\n }\n }\n\n private handleBackdropClick = () => {\n if (!this.persistent) {\n this.closeModal();\n }\n };\n\n private handleCardClick = (event: Event) => {\n event.stopPropagation();\n };\n\n private closeModal = () => {\n this.open = false;\n this.xplorClose.emit();\n };\n\n render() {\n if (!this.open) {\n return null;\n }\n\n const cardClasses = {\n 'xplor-modal__card': true,\n 'xplor-modal__card--scrollable': this.scrollable,\n };\n\n const bodyClasses = {\n 'xplor-modal__body': true,\n 'xplor-modal__body--no-title': !this.showTitle,\n };\n\n return (\n <Host>\n <div class=\"xplor-modal__backdrop\" onClick={this.handleBackdropClick}>\n <div\n class={cardClasses}\n style={{\n width: this.width,\n maxWidth: this.maxWidth,\n maxHeight: this.maxHeight,\n }}\n onClick={this.handleCardClick}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={this.ariaLabel ? undefined : 'xplor-modal-title'}\n aria-label={this.ariaLabel}\n tabindex=\"-1\"\n ref={(el) => (this.dialogEl = el)}\n >\n <button\n type=\"button\"\n class=\"xplor-modal__close-btn\"\n onClick={this.closeModal}\n aria-label=\"Close modal\"\n data-testid=\"common-modal-close-button\"\n >\n ✕\n </button>\n\n <div class=\"xplor-modal__title\" id=\"xplor-modal-title\">\n <slot name=\"title\" />\n </div>\n\n <div class=\"xplor-modal__subtitle\">\n <slot name=\"subtitle\" />\n </div>\n\n <div class={bodyClasses}>\n {this.loading ? (\n <div class=\"xplor-modal__loading\" role=\"status\" aria-label=\"Loading\">\n <div class=\"xplor-modal__spinner\"></div>\n </div>\n ) : ([\n <slot name=\"body\" />,\n <slot />\n ])}\n </div>\n\n <div class=\"xplor-modal__actions\">\n <slot name=\"actions\" />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/xplor-nav-tabs/xplor-nav-tabs.js CHANGED Viewed

@@ -11,8 +11,45 @@ export class XplorNavTabs {
             this.xplorChange.emit(item.value);
         };
     }
+    handleKeyDown(event) {
+        const enabledItems = this.items.filter(item => !item.disabled);
+        if (enabledItems.length === 0)
+            return;
+        const currentIndex = enabledItems.findIndex(item => item.value === this.value);
+        let newIndex = currentIndex;
+        switch (event.key) {
+            case 'ArrowRight':
+                event.preventDefault();
+                newIndex = currentIndex < enabledItems.length - 1 ? currentIndex + 1 : 0;
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                newIndex = currentIndex > 0 ? currentIndex - 1 : enabledItems.length - 1;
+                break;
+            case 'Home':
+                event.preventDefault();
+                newIndex = 0;
+                break;
+            case 'End':
+                event.preventDefault();
+                newIndex = enabledItems.length - 1;
+                break;
+            default:
+                return;
+        }
+        const newItem = enabledItems[newIndex];
+        this.value = newItem.value;
+        this.xplorChange.emit(newItem.value);
+        // Focus the newly active tab button
+        const buttons = this.el.querySelectorAll('button[role="tab"]');
+        const allItemIndex = this.items.indexOf(newItem);
+        const targetButton = buttons[allItemIndex];
+        if (targetButton) {
+            targetButton.focus();
+        }
+    }
     render() {
-        return (h(Host, { key: '30bab02780d071338f386b6a72559bbd65212118' }, h("div", { key: '2684dbbd4a812bbb88d55baeb42b281c2f3bf753', class: {
+        return (h(Host, { key: '1a94314129f0f6c94df3196ef7e2a493b6626fd7' }, h("div", { key: '71b0ee2d2baab1fed571ed88f04fc49754b2952e', class: {
                 'nav-tabs': true,
                 'nav-tabs--grow': this.grow,
                 [`nav-tabs--${this.color}`]: true,
@@ -20,7 +57,7 @@ export class XplorNavTabs {
                 'nav-tabs__tab': true,
                 'nav-tabs__tab--active': this.value === item.value,
                 'nav-tabs__tab--disabled': item.disabled,
-            }, onClick: () => this.handleTabClick(item), disabled: item.disabled, role: "tab", "aria-selected": this.value === item.value ? 'true' : 'false', type: "button" }, item.label))), h("slot", { key: 'dae806f8f498015b5837c799cb024fc3d688cc8d' }))));
+            }, onClick: () => this.handleTabClick(item), disabled: item.disabled, role: "tab", "aria-selected": this.value === item.value ? 'true' : 'false', tabIndex: this.value === item.value ? 0 : -1, type: "button" }, item.label))), h("slot", { key: 'fbf08f6785a81babc1c29359f0dff202dca18d6c' }))));
     }
     static get is() { return "xplor-nav-tabs"; }
     static get encapsulation() { return "scoped"; }
@@ -140,5 +177,15 @@ export class XplorNavTabs {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 //# sourceMappingURL=xplor-nav-tabs.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"xplor-nav-tabs.js","sourceRoot":"","sources":["../../../src/components/xplor-nav-tabs/xplor-nav-tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;~~AAa9E~~,MAAM,OAAO,YAAY;IALzB;~~QAOY~~,UAAK,GAAiB,EAAE,CAAC;QACzB,UAAK,GAA4B,SAAS,CAAC;QAC3C,SAAI,GAAY,KAAK,CAAC;QAItB,mBAAc,GAAG,CAAC,IAAgB,EAAE,EAAE;YAC1C,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;YACxB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACtC,CAAC,CAAC;~~KAmCL~~;~~IAjCG~~,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,4DACI,KAAK,EAAE;oBACH,UAAU,EAAE,IAAI;oBAChB,gBAAgB,EAAE,IAAI,CAAC,IAAI;oBAC3B,CAAC,aAAa,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;iBACpC,EACD,IAAI,EAAC,SAAS;gBAEb,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACtB,cACI,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,KAAK,EAAE;wBACH,eAAe,EAAE,IAAI;wBACrB,uBAAuB,EAAE,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK;wBAClD,yBAAyB,EAAE,IAAI,CAAC,QAAQ;qBAC3C,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EACxC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,KAAK,mBACK,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC3D,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,KAAK,CACN,CACZ,CAAC;gBACF,8DAAQ,CACN,CACH,CACV,CAAC;IACN,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACJ","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\nexport interface NavTabItem {\n label: string;\n value: string;\n disabled?: boolean;\n}\n\n@Component({\n tag: 'xplor-nav-tabs',\n styleUrl: 'xplor-nav-tabs.scss',\n scoped: true,\n})\nexport class XplorNavTabs {\n @Prop({ mutable: true }) value: string;\n @Prop() items: NavTabItem[] = [];\n @Prop() color: 'primary' \| 'secondary' = 'primary';\n @Prop() grow: boolean = false;\n\n @Event() xplorChange: EventEmitter<string>;\n\n private handleTabClick = (item: NavTabItem) => {\n if (item.disabled) return;\n\n this.value = item.value;\n this.xplorChange.emit(item.value);\n };\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'nav-tabs': true,\n 'nav-tabs--grow': this.grow,\n [`nav-tabs--${this.color}`]: true,\n }}\n role=\"tablist\"\n >\n {this.items.map((item) => (\n <button\n key={item.value}\n class={{\n 'nav-tabs__tab': true,\n 'nav-tabs__tab--active': this.value === item.value,\n 'nav-tabs__tab--disabled': item.disabled,\n }}\n onClick={() => this.handleTabClick(item)}\n disabled={item.disabled}\n role=\"tab\"\n aria-selected={this.value === item.value ? 'true' : 'false'}\n type=\"button\"\n >\n {item.label}\n </button>\n ))}\n <slot />\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"xplor-nav-tabs.js","sourceRoot":"","sources":["../../../src/components/xplor-nav-tabs/xplor-nav-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Element, Listen } from '@stencil/core';\n\nexport interface NavTabItem {\n label: string;\n value: string;\n disabled?: boolean;\n}\n\n@Component({\n tag: 'xplor-nav-tabs',\n styleUrl: 'xplor-nav-tabs.scss',\n scoped: true,\n})\nexport class XplorNavTabs {\n @Element() el: HTMLElement;\n\n @Prop({ mutable: true }) value: string;\n @Prop() items: NavTabItem[] = [];\n @Prop() color: 'primary' \| 'secondary' = 'primary';\n @Prop() grow: boolean = false;\n\n @Event() xplorChange: EventEmitter<string>;\n\n private handleTabClick = (item: NavTabItem) => {\n if (item.disabled) return;\n\n this.value = item.value;\n this.xplorChange.emit(item.value);\n };\n\n @Listen('keydown')\n handleKeyDown(event: KeyboardEvent) {\n const enabledItems = this.items.filter(item => !item.disabled);\n if (enabledItems.length === 0) return;\n\n const currentIndex = enabledItems.findIndex(item => item.value === this.value);\n let newIndex = currentIndex;\n\n switch (event.key) {\n case 'ArrowRight':\n event.preventDefault();\n newIndex = currentIndex < enabledItems.length - 1 ? currentIndex + 1 : 0;\n break;\n case 'ArrowLeft':\n event.preventDefault();\n newIndex = currentIndex > 0 ? currentIndex - 1 : enabledItems.length - 1;\n break;\n case 'Home':\n event.preventDefault();\n newIndex = 0;\n break;\n case 'End':\n event.preventDefault();\n newIndex = enabledItems.length - 1;\n break;\n default:\n return;\n }\n\n const newItem = enabledItems[newIndex];\n this.value = newItem.value;\n this.xplorChange.emit(newItem.value);\n\n // Focus the newly active tab button\n const buttons = this.el.querySelectorAll('button[role=\"tab\"]');\n const allItemIndex = this.items.indexOf(newItem);\n const targetButton = buttons[allItemIndex] as HTMLButtonElement;\n if (targetButton) {\n targetButton.focus();\n }\n }\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'nav-tabs': true,\n 'nav-tabs--grow': this.grow,\n [`nav-tabs--${this.color}`]: true,\n }}\n role=\"tablist\"\n >\n {this.items.map((item) => (\n <button\n key={item.value}\n class={{\n 'nav-tabs__tab': true,\n 'nav-tabs__tab--active': this.value === item.value,\n 'nav-tabs__tab--disabled': item.disabled,\n }}\n onClick={() => this.handleTabClick(item)}\n disabled={item.disabled}\n role=\"tab\"\n aria-selected={this.value === item.value ? 'true' : 'false'}\n tabIndex={this.value === item.value ? 0 : -1}\n type=\"button\"\n >\n {item.label}\n </button>\n ))}\n <slot />\n </div>\n </Host>\n );\n }\n}\n"]}