@tessera-ui/core 0.4.0

package/dist/collection/components/input/input.js

@@ -0,0 +1,583 @@
+import { h, Host, } from "@stencil/core";
+import { generateId } from "../../utils/aria";
+/**
+ * @slot prefix - Content before the input (e.g., icon or currency symbol).
+ * @slot suffix - Content after the input (e.g., icon or clear button).
+ * @slot help-text - Help text displayed below the input.
+ *
+ * @part base - The outer wrapper.
+ * @part label - The label element.
+ * @part input - The native input element.
+ * @part prefix - The prefix slot wrapper.
+ * @part suffix - The suffix slot wrapper.
+ * @part help-text - The help text wrapper.
+ * @part error-text - The error message wrapper.
+ */
+export class TsInput {
+    hostEl;
+    inputEl;
+    inputId = generateId('ts-input');
+    /** The input's value. */
+    value = '';
+    /** The input type. */
+    type = 'text';
+    /** The input's size. */
+    size = 'md';
+    /** Label text displayed above the input. */
+    label;
+    /** Placeholder text. */
+    placeholder;
+    /** Help text displayed below the input. */
+    helpText;
+    /** Renders the input in an error state with an error message. */
+    error;
+    /** Makes the input required. */
+    required = false;
+    /** Renders the input as disabled. */
+    disabled = false;
+    /** Renders the input as readonly. */
+    readonly = false;
+    /** Maximum character length. */
+    maxlength;
+    /** Minimum character length. */
+    minlength;
+    /** Pattern for validation (regex string). */
+    pattern;
+    /** Autocomplete attribute. */
+    autocomplete;
+    /** Name attribute for form submission. */
+    name;
+    /** Whether the input is currently focused. */
+    hasFocus = false;
+    /** Emitted when the value changes (on input). */
+    tsInput;
+    /** Emitted when the value changes (on blur / commit). */
+    tsChange;
+    /** Emitted when the input gains focus. */
+    tsFocus;
+    /** Emitted when the input loses focus. */
+    tsBlur;
+    /** Emitted on validation. */
+    tsValidate;
+    handleValueChange(newValue, oldValue) {
+        if (newValue !== oldValue && this.inputEl) {
+            this.inputEl.value = newValue;
+        }
+    }
+    /** Programmatically focus the input. */
+    async setFocus() {
+        this.inputEl?.focus();
+    }
+    /** Programmatically select the input text. */
+    async selectText() {
+        this.inputEl?.select();
+    }
+    handleInput = (event) => {
+        const target = event.target;
+        const previousValue = this.value;
+        this.value = target.value;
+        this.tsInput.emit({ value: this.value, previousValue });
+    };
+    handleChange = () => {
+        this.tsChange.emit({ value: this.value, previousValue: this.value });
+        // Run native validation
+        if (this.inputEl) {
+            const valid = this.inputEl.checkValidity();
+            this.tsValidate.emit({
+                valid,
+                message: this.inputEl.validationMessage,
+            });
+        }
+    };
+    handleFocus = () => {
+        this.hasFocus = true;
+        this.tsFocus.emit();
+    };
+    handleBlur = () => {
+        this.hasFocus = false;
+        this.tsBlur.emit();
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const hasError = !!this.error;
+        const labelId = `${this.inputId}-label`;
+        const helpId = `${this.inputId}-help`;
+        const errorId = `${this.inputId}-error`;
+        return (h(Host, { key: 'dad72942d32c6df8756d8c42b238364799a9df83', class: {
+                'ts-input': true,
+                [`ts-input--${this.size}`]: true,
+                'ts-input--focused': this.hasFocus,
+                'ts-input--disabled': this.disabled,
+                'ts-input--error': hasError,
+            } }, this.label && (h("label", { key: 'a012025c350bd6f593d19477793263b79a68a4f7', class: "input__label", part: "label", id: labelId, htmlFor: this.inputId }, this.label, this.required && h("span", { key: '71316213839857560e4ed37950985196d17242e4', class: "input__required", "aria-hidden": "true" }, " *"))), h("div", { key: '098dd8b4dcaadf87798307b14c2c5def6fc4359e', class: {
+                'input__wrapper': true,
+                'input__wrapper--focused': this.hasFocus,
+                'input__wrapper--error': hasError,
+                'input__wrapper--disabled': this.disabled,
+            }, part: "base" }, h("span", { key: 'c2b7252cde16f5a08ca6e4beeb88fb9e4a48fc32', class: "input__prefix", part: "prefix" }, h("slot", { key: 'adf46d466d45c9937406846ed3762b0ed41a04db', name: "prefix" })), h("input", { key: 'e0649a147ae0ef54e497443f0cd9e607b87a0ffb', ref: (el) => (this.inputEl = el), id: this.inputId, class: "input__native", part: "input", type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autoComplete: this.autocomplete, name: this.name, "aria-labelledby": this.label ? labelId : undefined, "aria-describedby": hasError ? errorId : this.helpText ? helpId : undefined, "aria-invalid": hasError ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }), h("span", { key: 'bec3bfcd47130f240d609f461f74140a970fa7cb', class: "input__suffix", part: "suffix" }, h("slot", { key: '1ddd5c810ab5542a019a842a4bb3c725877ac1b0', name: "suffix" }))), hasError && (h("div", { key: '0e9e25e65ced8ee9ddf5091aa8e32408a6489f17', class: "input__error", part: "error-text", id: errorId, role: "alert" }, this.error)), !hasError && this.helpText && (h("div", { key: 'b28ff0b6e908edd201e17b4da927685f2fa77943', class: "input__help", part: "help-text", id: helpId }, this.helpText))));
+    }
+    static get is() { return "ts-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The input's value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| 'text'\n    | 'email'\n    | 'password'\n    | 'number'\n    | 'tel'\n    | 'url'\n    | 'search'",
+                    "resolved": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The input type."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'text'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TsSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {
+                        "TsSize": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::TsSize",
+                            "referenceLocation": "TsSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The input's size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text displayed above the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
+            },
+            "helpText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Help text displayed below the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "help-text"
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders the input in an error state with an error message."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the input required."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders the input as disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders the input as readonly."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "maxlength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum character length."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "maxlength"
+            },
+            "minlength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum character length."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "minlength"
+            },
+            "pattern": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Pattern for validation (regex string)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pattern"
+            },
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Autocomplete attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autocomplete"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name attribute for form submission."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasFocus": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tsInput",
+                "name": "tsInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the value changes (on input)."
+                },
+                "complexType": {
+                    "original": "TsChangeEventDetail<string>",
+                    "resolved": "TsChangeEventDetail<string>",
+                    "references": {
+                        "TsChangeEventDetail": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::TsChangeEventDetail",
+                            "referenceLocation": "TsChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "tsChange",
+                "name": "tsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the value changes (on blur / commit)."
+                },
+                "complexType": {
+                    "original": "TsChangeEventDetail<string>",
+                    "resolved": "TsChangeEventDetail<string>",
+                    "references": {
+                        "TsChangeEventDetail": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::TsChangeEventDetail",
+                            "referenceLocation": "TsChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "tsFocus",
+                "name": "tsFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input gains focus."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "tsBlur",
+                "name": "tsBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input loses focus."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "tsValidate",
+                "name": "tsValidate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on validation."
+                },
+                "complexType": {
+                    "original": "TsValidationEventDetail",
+                    "resolved": "TsValidationEventDetail",
+                    "references": {
+                        "TsValidationEventDetail": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::TsValidationEventDetail",
+                            "referenceLocation": "TsValidationEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically focus the input.",
+                    "tags": []
+                }
+            },
+            "selectText": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically select the input text.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }];
+    }
+}
+//# sourceMappingURL=input.js.map

package/dist/collection/components/input/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  State,\n  Event,\n  Watch,\n  h,\n  Host,\n  Element,\n  Method,\n} from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsSize, TsChangeEventDetail, TsValidationEventDetail } from '../../types';\nimport { generateId } from '../../utils/aria';\n\n/**\n * @slot prefix - Content before the input (e.g., icon or currency symbol).\n * @slot suffix - Content after the input (e.g., icon or clear button).\n * @slot help-text - Help text displayed below the input.\n *\n * @part base - The outer wrapper.\n * @part label - The label element.\n * @part input - The native input element.\n * @part prefix - The prefix slot wrapper.\n * @part suffix - The suffix slot wrapper.\n * @part help-text - The help text wrapper.\n * @part error-text - The error message wrapper.\n */\n@Component({\n  tag: 'ts-input',\n  styleUrl: 'input.css',\n  shadow: true,\n})\nexport class TsInput {\n  @Element() hostEl!: HTMLElement;\n\n  private inputEl?: HTMLInputElement;\n  private inputId = generateId('ts-input');\n\n  /** The input's value. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** The input type. */\n  @Prop({ reflect: true }) type:\n    | 'text'\n    | 'email'\n    | 'password'\n    | 'number'\n    | 'tel'\n    | 'url'\n    | 'search' = 'text';\n\n  /** The input's size. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  /** Label text displayed above the input. */\n  @Prop() label?: string;\n\n  /** Placeholder text. */\n  @Prop() placeholder?: string;\n\n  /** Help text displayed below the input. */\n  @Prop() helpText?: string;\n\n  /** Renders the input in an error state with an error message. */\n  @Prop() error?: string;\n\n  /** Makes the input required. */\n  @Prop({ reflect: true }) required = false;\n\n  /** Renders the input as disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Renders the input as readonly. */\n  @Prop({ reflect: true }) readonly = false;\n\n  /** Maximum character length. */\n  @Prop() maxlength?: number;\n\n  /** Minimum character length. */\n  @Prop() minlength?: number;\n\n  /** Pattern for validation (regex string). */\n  @Prop() pattern?: string;\n\n  /** Autocomplete attribute. */\n  @Prop() autocomplete?: string;\n\n  /** Name attribute for form submission. */\n  @Prop() name?: string;\n\n  /** Whether the input is currently focused. */\n  @State() hasFocus = false;\n\n  /** Emitted when the value changes (on input). */\n  @Event({ eventName: 'tsInput' }) tsInput!: EventEmitter<TsChangeEventDetail<string>>;\n\n  /** Emitted when the value changes (on blur / commit). */\n  @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<TsChangeEventDetail<string>>;\n\n  /** Emitted when the input gains focus. */\n  @Event({ eventName: 'tsFocus' }) tsFocus!: EventEmitter<void>;\n\n  /** Emitted when the input loses focus. */\n  @Event({ eventName: 'tsBlur' }) tsBlur!: EventEmitter<void>;\n\n  /** Emitted on validation. */\n  @Event({ eventName: 'tsValidate' }) tsValidate!: EventEmitter<TsValidationEventDetail>;\n\n  @Watch('value')\n  handleValueChange(newValue: string, oldValue: string): void {\n    if (newValue !== oldValue && this.inputEl) {\n      this.inputEl.value = newValue;\n    }\n  }\n\n  /** Programmatically focus the input. */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.inputEl?.focus();\n  }\n\n  /** Programmatically select the input text. */\n  @Method()\n  async selectText(): Promise<void> {\n    this.inputEl?.select();\n  }\n\n  private handleInput = (event: Event): void => {\n    const target = event.target as HTMLInputElement;\n    const previousValue = this.value;\n    this.value = target.value;\n    this.tsInput.emit({ value: this.value, previousValue });\n  };\n\n  private handleChange = (): void => {\n    this.tsChange.emit({ value: this.value, previousValue: this.value });\n\n    // Run native validation\n    if (this.inputEl) {\n      const valid = this.inputEl.checkValidity();\n      this.tsValidate.emit({\n        valid,\n        message: this.inputEl.validationMessage,\n      });\n    }\n  };\n\n  private handleFocus = (): void => {\n    this.hasFocus = true;\n    this.tsFocus.emit();\n  };\n\n  private handleBlur = (): void => {\n    this.hasFocus = false;\n    this.tsBlur.emit();\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const hasError = !!this.error;\n    const labelId = `${this.inputId}-label`;\n    const helpId = `${this.inputId}-help`;\n    const errorId = `${this.inputId}-error`;\n\n    return (\n      <Host\n        class={{\n          'ts-input': true,\n          [`ts-input--${this.size}`]: true,\n          'ts-input--focused': this.hasFocus,\n          'ts-input--disabled': this.disabled,\n          'ts-input--error': hasError,\n        }}\n      >\n        {this.label && (\n          <label class=\"input__label\" part=\"label\" id={labelId} htmlFor={this.inputId}>\n            {this.label}\n            {this.required && <span class=\"input__required\" aria-hidden=\"true\"> *</span>}\n          </label>\n        )}\n\n        <div\n          class={{\n            'input__wrapper': true,\n            'input__wrapper--focused': this.hasFocus,\n            'input__wrapper--error': hasError,\n            'input__wrapper--disabled': this.disabled,\n          }}\n          part=\"base\"\n        >\n          <span class=\"input__prefix\" part=\"prefix\">\n            <slot name=\"prefix\" />\n          </span>\n\n          <input\n            ref={(el) => (this.inputEl = el)}\n            id={this.inputId}\n            class=\"input__native\"\n            part=\"input\"\n            type={this.type}\n            value={this.value}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            readOnly={this.readonly}\n            required={this.required}\n            maxlength={this.maxlength}\n            minlength={this.minlength}\n            pattern={this.pattern}\n            autoComplete={this.autocomplete}\n            name={this.name}\n            aria-labelledby={this.label ? labelId : undefined}\n            aria-describedby={hasError ? errorId : this.helpText ? helpId : undefined}\n            aria-invalid={hasError ? 'true' : undefined}\n            aria-required={this.required ? 'true' : undefined}\n            onInput={this.handleInput}\n            onChange={this.handleChange}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n\n          <span class=\"input__suffix\" part=\"suffix\">\n            <slot name=\"suffix\" />\n          </span>\n        </div>\n\n        {hasError && (\n          <div class=\"input__error\" part=\"error-text\" id={errorId} role=\"alert\">\n            {this.error}\n          </div>\n        )}\n\n        {!hasError && this.helpText && (\n          <div class=\"input__help\" part=\"help-text\" id={helpId}>\n            {this.helpText}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}