@xplor-education/core-stencil-components 2.0.0

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

@@ -0,0 +1,591 @@
+import { Host, h } from "@stencil/core";
+export class XplorTextField {
+    constructor() {
+        /**
+         * The current value of the text field
+         */
+        this.value = '';
+        /**
+         * The label text for the input
+         */
+        this.label = '';
+        /**
+         * Placeholder text when input is empty
+         */
+        this.placeholder = '';
+        /**
+         * Input type (text, email, password, number, etc.)
+         */
+        this.type = 'text';
+        /**
+         * Color variant (primary, secondary, success, error, warning, info)
+         */
+        this.color = 'secondary';
+        /**
+         * Visual variant style
+         */
+        this.variant = 'outlined';
+        /**
+         * Background color
+         */
+        this.bgColor = 'white';
+        /**
+         * Error messages to display
+         */
+        this.errorMessages = [];
+        /**
+         * When to show details: true (always), false (never), 'auto' (only when error)
+         */
+        this.hideDetails = 'auto';
+        /**
+         * Whether the field is disabled
+         */
+        this.disabled = false;
+        /**
+         * Whether the field is readonly
+         */
+        this.readonly = false;
+        /**
+         * Whether the field is required
+         */
+        this.required = false;
+        /**
+         * Whether the field has been modified (dirty state)
+         */
+        this.isDirty = false;
+        /**
+         * Whether the field should be clearable
+         */
+        this.clearable = false;
+        /**
+         * Custom CSS classes to apply
+         */
+        this.customClass = '';
+        /**
+         * Internal focused state
+         */
+        this.isFocused = false;
+        /**
+         * Internal hasValue state
+         */
+        this.hasValue = false;
+        this.handleInput = (e) => {
+            const target = e.target;
+            this.value = target.value;
+            this.valueChange.emit(target.value);
+        };
+        this.handleFocus = (e) => {
+            this.isFocused = true;
+            this.inputFocus.emit(e);
+        };
+        this.handleBlur = (e) => {
+            this.isFocused = false;
+            this.inputBlur.emit(e);
+        };
+        this.handleClear = (e) => {
+            e.stopPropagation();
+            this.value = '';
+            this.valueChange.emit('');
+            this.clearClick.emit();
+            if (this.inputElement) {
+                this.inputElement.focus();
+            }
+        };
+    }
+    handleValueChange(newValue) {
+        this.hasValue = !!newValue;
+    }
+    componentWillLoad() {
+        this.hasValue = !!this.value;
+    }
+    get hasError() {
+        return this.errorMessages && this.errorMessages.length > 0;
+    }
+    get showDetails() {
+        if (typeof this.hideDetails === 'boolean') {
+            return !this.hideDetails;
+        }
+        // hideDetails === 'auto'
+        return this.hasError;
+    }
+    get computedClasses() {
+        return {
+            'xplor-text-field': true,
+            [`xplor-text-field--${this.variant}`]: true,
+            [`xplor-text-field--${this.color}`]: true,
+            'xplor-text-field--focused': this.isFocused,
+            'xplor-text-field--error': this.hasError,
+            'xplor-text-field--disabled': this.disabled,
+            'xplor-text-field--readonly': this.readonly,
+            'xplor-text-field--dirty': this.isDirty,
+            'xplor-text-field--has-value': this.hasValue || this.isFocused,
+            [this.customClass]: !!this.customClass,
+        };
+    }
+    render() {
+        const labelFloating = this.isFocused || this.hasValue;
+        return (h(Host, { key: 'e5addac91e0cd95aae82078fca048c9cf3d63899' }, h("div", { key: '5af015996b692ba7a9da193d85aa982a3c314e5f', class: this.computedClasses }, h("div", { key: 'ce8f119584d984368ed267c6343d36d5023a7cc4', class: "xplor-text-field__wrapper", style: { backgroundColor: this.bgColor } }, h("div", { key: '65da1d866155e01344fafb88deb23b7c3e781e47', class: "xplor-text-field__input-wrapper" }, this.label && (h("label", { key: '2b21d90a9e9621262e87669ac64b588d712015de', class: {
+                'xplor-text-field__label': true,
+                'xplor-text-field__label--floating': labelFloating,
+            } }, h("slot", { key: 'eca54b3a90bce7b2437bb8f6034a72d38e95145a', name: "label" }, this.label), this.required && h("span", { key: 'dc29dc197c8ec0613602b199ddacb2901301b496', class: "xplor-text-field__required" }, "*"))), h("input", { key: 'ff58f03b2fd6ccd30e901e70116ddf13e392ec6c', ref: (el) => (this.inputElement = el), class: "xplor-text-field__input", type: this.type, value: this.value, placeholder: this.isFocused ? this.placeholder : '', disabled: this.disabled, readonly: this.readonly, required: this.required, maxlength: this.maxlength, min: this.min, max: this.max, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, "aria-invalid": this.hasError ? 'true' : 'false', "aria-describedby": this.hasError ? 'error-messages' : undefined }), h("div", { key: '01c6224679cf4709b51015943bb163d5e6cc929a', class: "xplor-text-field__append-inner" }, this.clearable && this.hasValue && !this.disabled && !this.readonly && (h("button", { key: 'e212288acbed1693c8a31c9fb01de80ed5d7509c', type: "button", class: "xplor-text-field__clear-btn", onClick: this.handleClear, "aria-label": "Clear" }, h("svg", { key: '8c457ed9da2b09b0457c12db18e7a4924251dfca', width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: '947f8e2599d17fb4fc763b864b1ab2fec0ca2ab2', d: "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" })))), h("slot", { key: '53062cd78fbbbadf85aa722e23c78f477145a34e', name: "append-inner" })), h("fieldset", { key: 'accd6fc547d7112f5806a82dc6826bbd386d9596', class: "xplor-text-field__outline" }, h("legend", { key: 'ef077a25a838e77901a747c65296529b694f6559', class: { 'xplor-text-field__outline-legend': true, 'xplor-text-field__outline-legend--floating': labelFloating } }, labelFloating && this.label ? h("span", null, this.label, this.required && '*') : h("span", null, "\u200B")))), h("div", { key: '7374765a73e8e4cc21ad265290a35ed07a1fc2de', class: "xplor-text-field__append" }, h("slot", { key: '3cfeb58881b2103a516cfe38f6bedd0583c18aed', name: "append" }))), this.showDetails && (h("div", { key: '81677f56be4a7e77a415b5b21ea67448bed1c9ee', class: "xplor-text-field__details" }, this.hasError && (h("div", { key: '20539967a3acbc1f2165df9cbe85f9bad7fd577c', id: "error-messages", class: "xplor-text-field__error-messages" }, this.errorMessages.map((error) => (h("div", { class: "xplor-text-field__error" }, error))))))))));
+    }
+    static get is() { return "xplor-text-field"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xplor-text-field.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xplor-text-field.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": "The current value of the text field"
+                },
+                "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": "The label text for the input"
+                },
+                "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": "Placeholder text when input is empty"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "type": {
+                "type": "string",
+                "attribute": "type",
+                "mutable": false,
+                "complexType": {
+                    "original": "'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search'",
+                    "resolved": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input type (text, email, password, number, etc.)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'text'"
+            },
+            "color": {
+                "type": "string",
+                "attribute": "color",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info'",
+                    "resolved": "\"error\" | \"info\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color variant (primary, secondary, success, error, warning, info)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'secondary'"
+            },
+            "variant": {
+                "type": "string",
+                "attribute": "variant",
+                "mutable": false,
+                "complexType": {
+                    "original": "'outlined' | 'filled' | 'underlined'",
+                    "resolved": "\"filled\" | \"outlined\" | \"underlined\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant style"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'outlined'"
+            },
+            "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'"
+            },
+            "errorMessages": {
+                "type": "unknown",
+                "attribute": "error-messages",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error messages to display"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "hideDetails": {
+                "type": "any",
+                "attribute": "hide-details",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | 'auto'",
+                    "resolved": "\"auto\" | boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When to show details: true (always), false (never), 'auto' (only when error)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'auto'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the field 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 field is readonly"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "attribute": "required",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the field is required"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isDirty": {
+                "type": "boolean",
+                "attribute": "is-dirty",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the field has been modified (dirty state)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "clearable": {
+                "type": "boolean",
+                "attribute": "clearable",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the field should be clearable"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "customClass": {
+                "type": "string",
+                "attribute": "custom-class",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom CSS classes to apply"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "maxlength": {
+                "type": "number",
+                "attribute": "maxlength",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum length of input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "min": {
+                "type": "number",
+                "attribute": "min",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum value (for number type)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "max": {
+                "type": "number",
+                "attribute": "max",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum value (for number type)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isFocused": {},
+            "hasValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when value changes"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "inputBlur",
+                "name": "inputBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when input loses focus"
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "inputFocus",
+                "name": "inputFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when input gains focus"
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "clearClick",
+                "name": "clearClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when clear button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }];
+    }
+}
+//# sourceMappingURL=xplor-text-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xplor-text-field.js","sourceRoot":"","sources":["../../../src/components/xplor-text-field/xplor-text-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Event, EventEmitter, Watch, Element } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-text-field',\n  styleUrl: 'xplor-text-field.scss',\n  scoped: true,\n})\nexport class XplorTextField {\n  @Element() el: HTMLElement;\n\n  /**\n   * The current value of the text field\n   */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * The label text for the input\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Placeholder text when input is empty\n   */\n  @Prop() placeholder: string = '';\n\n  /**\n   * Input type (text, email, password, number, etc.)\n   */\n  @Prop() type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' = 'text';\n\n  /**\n   * Color variant (primary, secondary, success, error, warning, info)\n   */\n  @Prop() color: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' = 'secondary';\n\n  /**\n   * Visual variant style\n   */\n  @Prop() variant: 'outlined' | 'filled' | 'underlined' = 'outlined';\n\n  /**\n   * Background color\n   */\n  @Prop() bgColor: string = 'white';\n\n  /**\n   * Error messages to display\n   */\n  @Prop() errorMessages: string[] = [];\n\n  /**\n   * When to show details: true (always), false (never), 'auto' (only when error)\n   */\n  @Prop() hideDetails: boolean | 'auto' = 'auto';\n\n  /**\n   * Whether the field is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the field is readonly\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * Whether the field is required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Whether the field has been modified (dirty state)\n   */\n  @Prop() isDirty: boolean = false;\n\n  /**\n   * Whether the field should be clearable\n   */\n  @Prop() clearable: boolean = false;\n\n  /**\n   * Custom CSS classes to apply\n   */\n  @Prop() customClass: string = '';\n\n  /**\n   * Maximum length of input\n   */\n  @Prop() maxlength: number;\n\n  /**\n   * Minimum value (for number type)\n   */\n  @Prop() min: number;\n\n  /**\n   * Maximum value (for number type)\n   */\n  @Prop() max: number;\n\n  /**\n   * Internal focused state\n   */\n  @State() isFocused: boolean = false;\n\n  /**\n   * Internal hasValue state\n   */\n  @State() hasValue: boolean = false;\n\n  /**\n   * Emitted when value changes\n   */\n  @Event() valueChange: EventEmitter<string>;\n\n  /**\n   * Emitted when input loses focus\n   */\n  @Event() inputBlur: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when input gains focus\n   */\n  @Event() inputFocus: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when clear button is clicked\n   */\n  @Event() clearClick: EventEmitter<void>;\n\n  private inputElement?: HTMLInputElement;\n\n  @Watch('value')\n  handleValueChange(newValue: string) {\n    this.hasValue = !!newValue;\n  }\n\n  componentWillLoad() {\n    this.hasValue = !!this.value;\n  }\n\n  private handleInput = (e: Event) => {\n    const target = e.target as HTMLInputElement;\n    this.value = target.value;\n    this.valueChange.emit(target.value);\n  };\n\n  private handleFocus = (e: FocusEvent) => {\n    this.isFocused = true;\n    this.inputFocus.emit(e);\n  };\n\n  private handleBlur = (e: FocusEvent) => {\n    this.isFocused = false;\n    this.inputBlur.emit(e);\n  };\n\n  private handleClear = (e: MouseEvent) => {\n    e.stopPropagation();\n    this.value = '';\n    this.valueChange.emit('');\n    this.clearClick.emit();\n    if (this.inputElement) {\n      this.inputElement.focus();\n    }\n  };\n\n  private get hasError(): boolean {\n    return this.errorMessages && this.errorMessages.length > 0;\n  }\n\n  private get showDetails(): boolean {\n    if (typeof this.hideDetails === 'boolean') {\n      return !this.hideDetails;\n    }\n    // hideDetails === 'auto'\n    return this.hasError;\n  }\n\n  private get computedClasses(): { [key: string]: boolean } {\n    return {\n      'xplor-text-field': true,\n      [`xplor-text-field--${this.variant}`]: true,\n      [`xplor-text-field--${this.color}`]: true,\n      'xplor-text-field--focused': this.isFocused,\n      'xplor-text-field--error': this.hasError,\n      'xplor-text-field--disabled': this.disabled,\n      'xplor-text-field--readonly': this.readonly,\n      'xplor-text-field--dirty': this.isDirty,\n      'xplor-text-field--has-value': this.hasValue || this.isFocused,\n      [this.customClass]: !!this.customClass,\n    };\n  }\n\n  render() {\n    const labelFloating = this.isFocused || this.hasValue;\n\n    return (\n      <Host>\n        <div class={this.computedClasses}>\n          <div class=\"xplor-text-field__wrapper\" style={{ backgroundColor: this.bgColor }}>\n            <div class=\"xplor-text-field__input-wrapper\">\n              {/* Label */}\n              {this.label && (\n                <label\n                  class={{\n                    'xplor-text-field__label': true,\n                    'xplor-text-field__label--floating': labelFloating,\n                  }}\n                >\n                  <slot name=\"label\">{this.label}</slot>\n                  {this.required && <span class=\"xplor-text-field__required\">*</span>}\n                </label>\n              )}\n\n              {/* Input */}\n              <input\n                ref={(el) => (this.inputElement = el)}\n                class=\"xplor-text-field__input\"\n                type={this.type}\n                value={this.value}\n                placeholder={this.isFocused ? this.placeholder : ''}\n                disabled={this.disabled}\n                readonly={this.readonly}\n                required={this.required}\n                maxlength={this.maxlength}\n                min={this.min}\n                max={this.max}\n                onInput={this.handleInput}\n                onFocus={this.handleFocus}\n                onBlur={this.handleBlur}\n                aria-invalid={this.hasError ? 'true' : 'false'}\n                aria-describedby={this.hasError ? 'error-messages' : undefined}\n              />\n\n              {/* Append Inner Slot */}\n              <div class=\"xplor-text-field__append-inner\">\n                {this.clearable && this.hasValue && !this.disabled && !this.readonly && (\n                  <button\n                    type=\"button\"\n                    class=\"xplor-text-field__clear-btn\"\n                    onClick={this.handleClear}\n                    aria-label=\"Clear\"\n                  >\n                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                      <path d=\"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z\" />\n                    </svg>\n                  </button>\n                )}\n                <slot name=\"append-inner\" />\n              </div>\n\n              {/* Field Outline */}\n              <fieldset class=\"xplor-text-field__outline\">\n                <legend class={{ 'xplor-text-field__outline-legend': true, 'xplor-text-field__outline-legend--floating': labelFloating }}>\n                  {labelFloating && this.label ? <span>{this.label}{this.required && '*'}</span> : <span>​</span>}\n                </legend>\n              </fieldset>\n            </div>\n\n            {/* Append Slot (outside input wrapper) */}\n            <div class=\"xplor-text-field__append\">\n              <slot name=\"append\" />\n            </div>\n          </div>\n\n          {/* Details (error messages) */}\n          {this.showDetails && (\n            <div class=\"xplor-text-field__details\">\n              {this.hasError && (\n                <div id=\"error-messages\" class=\"xplor-text-field__error-messages\">\n                  {this.errorMessages.map((error) => (\n                    <div class=\"xplor-text-field__error\">{error}</div>\n                  ))}\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}