@xplor-education/core-stencil-components 2.0.0

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

@@ -0,0 +1,419 @@
+import { Host, h } from "@stencil/core";
+export class XplorInputText {
+    constructor() {
+        /**
+         * Input value
+         */
+        this.value = '';
+        /**
+         * Input label
+         */
+        this.label = '';
+        /**
+         * Input placeholder
+         */
+        this.placeholder = '';
+        /**
+         * Input type (text, email, password, number, etc.)
+         */
+        this.type = 'text';
+        /**
+         * Background color
+         */
+        this.bgColor = 'white';
+        /**
+         * Border/focus color
+         */
+        this.color = '#008480';
+        /**
+         * Whether the input is disabled
+         */
+        this.disabled = false;
+        /**
+         * Whether the input is readonly
+         */
+        this.readonly = false;
+        /**
+         * Whether to hide validation details
+         */
+        this.hideDetails = 'auto';
+        /**
+         * Error message
+         */
+        this.error = '';
+        /**
+         * Helper text
+         */
+        this.helperText = '';
+        /**
+         * Whether the input is required
+         */
+        this.required = false;
+        this.isFocused = false;
+        this.handleInput = (event) => {
+            const target = event.target;
+            this.value = target.value;
+            this.xplorInput.emit(this.value);
+        };
+        this.handleChange = (event) => {
+            const target = event.target;
+            this.value = target.value;
+            this.xplorChange.emit(this.value);
+        };
+        this.handleFocus = (event) => {
+            this.isFocused = true;
+            this.xplorFocus.emit(event);
+        };
+        this.handleBlur = (event) => {
+            this.isFocused = false;
+            this.xplorBlur.emit(event);
+        };
+    }
+    render() {
+        const containerClasses = {
+            'xplor-input-text': true,
+            'xplor-input-text--focused': this.isFocused,
+            'xplor-input-text--disabled': this.disabled,
+            'xplor-input-text--error': !!this.error,
+        };
+        const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
+        return (h(Host, { key: '63a41a0420e4006ee19740d408c9c6dc1f609a96' }, h("div", { key: '2b5c2990098b4fe843e70a52eae25d284abc5dfc', class: containerClasses }, this.label && (h("label", { key: '9f0184741293bfd453b78e1edc0eb3f3c02bd12e', class: "xplor-input-text__label" }, this.label, this.required && h("span", { key: '3ec943a28889363da1356aa69392f906b0bc6542', class: "xplor-input-text__required" }, "*"))), h("div", { key: 'a7f83624fb3564fbeb59d8d984c039980354c6af', class: "xplor-input-text__field" }, h("input", { key: '0a886666e4086099333e22ee4aa3406e81a73917', type: this.type, class: "xplor-input-text__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
+                backgroundColor: this.bgColor,
+            } }), h("slot", { key: '8d854313cb392c2a3b8ff63b9f193fa38af672ec', name: "append-inner" })), showDetails && (h("div", { key: '0a9b055a64e296ead6b0f20ffc717782f89b6718', class: "xplor-input-text__details" }, this.error && h("div", { key: '2101193d34660879589cb581e2beddba2fd93363', class: "xplor-input-text__error-message" }, this.error), !this.error && this.helperText && h("div", { key: '648b517eb3b510680036e2514ab23a00d9dc90fc', class: "xplor-input-text__helper-text" }, this.helperText))), h("slot", { key: '754393f25fa96e8bf7a91e51f91ae8afe3d03e7b', name: "append" }))));
+    }
+    static get is() { return "xplor-input-text"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xplor-input-text.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xplor-input-text.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "attribute": "placeholder",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input placeholder"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "type": {
+                "type": "string",
+                "attribute": "type",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input type (text, email, password, number, etc.)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'text'"
+            },
+            "bgColor": {
+                "type": "string",
+                "attribute": "bg-color",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Background color"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'white'"
+            },
+            "color": {
+                "type": "string",
+                "attribute": "color",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Border/focus color"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'#008480'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is readonly"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "hideDetails": {
+                "type": "any",
+                "attribute": "hide-details",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | 'auto'",
+                    "resolved": "\"auto\" | boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to hide validation details"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'auto'"
+            },
+            "error": {
+                "type": "string",
+                "attribute": "error",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "helperText": {
+                "type": "string",
+                "attribute": "helper-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "required": {
+                "type": "boolean",
+                "attribute": "required",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is required"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isFocused": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xplorInput",
+                "name": "xplorInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Input event"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "xplorChange",
+                "name": "xplorChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Change event"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "xplorFocus",
+                "name": "xplorFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Focus event"
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "xplorBlur",
+                "name": "xplorBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Blur event"
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=xplor-input-text.js.map

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

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