@c2n/text-field 0.0.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nguyen Thai Vinh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,14 @@
+# @c2n/text-field
+
+`c2-text-field` is a single-line input in a themeable field: icon slots, an optional clear button, helper and error text, and a character counter.
+
+```html
+<c2-text-field type="email" placeholder="you@example.com" help="We never share it." clearable>
+  <svg slot="prefix-icon" viewBox="0 0 24 24">…</svg>
+</c2-text-field>
+```
+
+- Attributes: `type`, `name`, `autocomplete`, `placeholder`, `value`, `maxlength`, `minlength`, `pattern`, `required`, `disabled`, `readonly`, `error`, `error-text`, `help`, `clearable`.
+- Slots: `prefix-icon`, `suffix-icon`, `clear-icon`, `help-icon`, `supporting-text`.
+- Events: `input`, `change` (re-dispatched from the inner input), `clear`.
+- Theming: `--c2-text-field--*` with `__hover`, `__focus`, `__error`, `__read-only`, `__disabled` states, plus `__icon`, `__clear-icon`, `__help-icon` and `__supporting-text` parts. Pair with `c2-label` for a caption.

package/dist/chunks/text-field-DkffSesv.js

@@ -0,0 +1,230 @@
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { classMap } from "lit/directives/class-map.js";
+import { live } from "lit/directives/live.js";
+import { addClasses } from "@c2n/core/css-helper.js";
+import { redispatchEvent } from "@c2n/core/dom-helper.js";
+//#region src/text-field.scss?inline
+var text_field_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: inline-flex;\n  flex-direction: column;\n  gap: var(--c2-text-field__supporting-text--gap,4px);\n  vertical-align: middle;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.c2-text-field-row {\n  display: flex;\n  align-items: center;\n  gap: var(--c2-text-field__help-icon--gap,8px);\n}\n\n.c2-text-field {\n  display: flex;\n  flex: 1;\n  min-width: 0;\n  align-items: center;\n  box-sizing: border-box;\n  position: relative;\n  cursor: text;\n  text-align: inherit;\n  min-height: var(--c2-text-field--min-height,36px);\n  gap: var(--c2-text-field--gap,8px);\n  padding-top: var(--c2-text-field--padding-top,6px);\n  padding-bottom: var(--c2-text-field--padding-bottom,6px);\n  padding-right: var(--c2-text-field--padding-right,10px);\n  padding-left: var(--c2-text-field--padding-left,12px);\n  border-top: var(--c2-text-field--border-top,1px solid #bcbcc6);\n  border-bottom: var(--c2-text-field--border-bottom,1px solid #bcbcc6);\n  border-right: var(--c2-text-field--border-right,1px solid #bcbcc6);\n  border-left: var(--c2-text-field--border-left,1px solid #bcbcc6);\n  border-top-left-radius: var(--c2-text-field--border-top-left-radius,6px);\n  border-top-right-radius: var(--c2-text-field--border-top-right-radius,6px);\n  border-bottom-left-radius: var(--c2-text-field--border-bottom-left-radius,6px);\n  border-bottom-right-radius: var(--c2-text-field--border-bottom-right-radius,6px);\n  color: var(--c2-text-field--color,#18181b);\n  background: var(--c2-text-field--background,#ffffff);\n  font-size: var(--c2-text-field--font-size,14px);\n  font-weight: var(--c2-text-field--font-weight);\n  font-style: var(--c2-text-field--font-style);\n  font-family: var(--c2-text-field--font-family);\n  line-height: var(--c2-text-field--line-height,20px);\n  outline: var(--c2-text-field__focus--outline,3px solid rgba(71, 110, 249, 0.2));\n  outline-color: transparent;\n  outline-offset: var(--c2-text-field__focus--outline-offset,0px);\n  will-change: border, background, outline-color;\n  transition: border 250ms cubic-bezier(0.2, 0, 0, 1), background 250ms cubic-bezier(0.2, 0, 0, 1), outline-color 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.c2-text-field .input {\n  flex: 1;\n  min-width: 0;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: inherit;\n  caret-color: inherit;\n  font: inherit;\n  line-height: inherit;\n  text-align: inherit;\n}\n.c2-text-field .input::placeholder {\n  font-weight: var(--c2-text-field__placeholder--font-weight);\n  font-style: var(--c2-text-field__placeholder--font-style);\n  color: var(--c2-text-field__placeholder--color,#71717a);\n  opacity: var(--c2-text-field__placeholder--opacity,1);\n}\n.c2-text-field .input::-webkit-search-cancel-button, .c2-text-field .input::-webkit-search-decoration {\n  appearance: none;\n}\n@media (forced-colors: active) {\n  .c2-text-field .input {\n    background: Field;\n  }\n}\n.c2-text-field:hover {\n  border-top: var(--c2-text-field__hover--border-top,var(--c2-text-field--border-top,1px solid #a1a1aa));\n  border-bottom: var(--c2-text-field__hover--border-bottom,var(--c2-text-field--border-bottom,1px solid #a1a1aa));\n  border-right: var(--c2-text-field__hover--border-right,var(--c2-text-field--border-right,1px solid #a1a1aa));\n  border-left: var(--c2-text-field__hover--border-left,var(--c2-text-field--border-left,1px solid #a1a1aa));\n}\n.c2-text-field.focus-within {\n  border-top: var(--c2-text-field__focus--border-top,var(--c2-text-field--border-top,1px solid #476ef9));\n  border-bottom: var(--c2-text-field__focus--border-bottom,var(--c2-text-field--border-bottom,1px solid #476ef9));\n  border-right: var(--c2-text-field__focus--border-right,var(--c2-text-field--border-right,1px solid #476ef9));\n  border-left: var(--c2-text-field__focus--border-left,var(--c2-text-field--border-left,1px solid #476ef9));\n  color: var(--c2-text-field__focus--color,var(--c2-text-field--color,#18181b));\n  background: var(--c2-text-field__focus--background,var(--c2-text-field--background,#ffffff));\n  outline: var(--c2-text-field__focus--outline,3px solid rgba(71, 110, 249, 0.2));\n  outline-offset: var(--c2-text-field__focus--outline-offset,0px);\n}\n.c2-text-field.error {\n  border-top: var(--c2-text-field__error--border-top,1px solid #dc2626);\n  border-bottom: var(--c2-text-field__error--border-bottom,1px solid #dc2626);\n  border-right: var(--c2-text-field__error--border-right,1px solid #dc2626);\n  border-left: var(--c2-text-field__error--border-left,1px solid #dc2626);\n  color: var(--c2-text-field__error--color,var(--c2-text-field--color,#18181b));\n  background: var(--c2-text-field__error--background,var(--c2-text-field--background,#ffffff));\n}\n.c2-text-field.error.focus-within {\n  outline: var(--c2-text-field__error__focus--outline,3px solid rgba(220, 38, 38, 0.2));\n}\n.c2-text-field.read-only {\n  cursor: default;\n  border-top: var(--c2-text-field__read-only--border-top,1px solid #e4e4e7);\n  border-bottom: var(--c2-text-field__read-only--border-bottom,1px solid #e4e4e7);\n  border-right: var(--c2-text-field__read-only--border-right,1px solid #e4e4e7);\n  border-left: var(--c2-text-field__read-only--border-left,1px solid #e4e4e7);\n  color: var(--c2-text-field__read-only--color,var(--c2-text-field--color,#18181b));\n  background: var(--c2-text-field__read-only--background,#fafafa);\n}\n.c2-text-field.disabled {\n  cursor: default;\n  opacity: var(--c2-text-field__disabled--opacity,0.38);\n  pointer-events: none;\n}\n\n::slotted([slot=prefix-icon]),\n::slotted([slot=suffix-icon]) {\n  flex: none;\n  width: var(--c2-text-field__icon--size,16px);\n  height: var(--c2-text-field__icon--size,16px);\n  color: var(--c2-text-field__icon--color,#71717a);\n  --c2-feather-icon--size: var(--c2-text-field__icon--size,16px);\n  --c2-mat-icon--font-size: var(--c2-text-field__icon--size,16px);\n}\n\n.clear-button {\n  flex: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0;\n  padding: 0;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  width: var(--c2-text-field__clear-icon--size,16px);\n  height: var(--c2-text-field__clear-icon--size,16px);\n  color: var(--c2-text-field__clear-icon--color,#a1a1aa);\n  transition: color 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.clear-button:hover, .clear-button:focus-visible {\n  color: var(--c2-text-field__clear-icon__hover--color,#18181b);\n}\n.clear-button:focus-visible {\n  outline: var(--c2-text-field__focus--outline,3px solid rgba(71, 110, 249, 0.2));\n  outline-offset: 2px;\n  border-radius: 4px;\n}\n.clear-button svg,\n.clear-button ::slotted(*) {\n  width: 100%;\n  height: 100%;\n  --c2-feather-icon--size: var(--c2-text-field__clear-icon--size,16px);\n  --c2-mat-icon--font-size: var(--c2-text-field__clear-icon--size,16px);\n}\n\n::slotted([slot=help-icon]) {\n  flex: none;\n  width: var(--c2-text-field__help-icon--size,16px);\n  height: var(--c2-text-field__help-icon--size,16px);\n  color: var(--c2-text-field__help-icon--color,#71717a);\n  --c2-feather-icon--size: var(--c2-text-field__help-icon--size,16px);\n  --c2-mat-icon--font-size: var(--c2-text-field__help-icon--size,16px);\n}\n\n.supporting-text {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 12px;\n  font-size: var(--c2-text-field__supporting-text--font-size,12px);\n  line-height: var(--c2-text-field__supporting-text--line-height,16px);\n  color: var(--c2-text-field__supporting-text--color,#71717a);\n}\n.supporting-text.error {\n  color: var(--c2-text-field__supporting-text__error--color,#dc2626);\n}\n.supporting-text .supporting-text__message {\n  flex: 1;\n  min-width: 0;\n}\n.supporting-text .supporting-text__counter {\n  flex: none;\n  font-variant-numeric: tabular-nums;\n}";
+//#endregion
+//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+//#region src/text-field.ts
+var TextField = class TextField extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.readOnly = false;
+		this.disabled = false;
+		this.error = false;
+		this.maxLength = -1;
+		this.minLength = -1;
+		this.pattern = "";
+		this.required = false;
+		this.type = "text";
+		this.name = "";
+		this.autocomplete = "";
+		this.placeholder = "";
+		this.value = "";
+		this.errorText = "";
+		this.help = "";
+		this.clearable = false;
+		this.dirty = false;
+		this.focused = false;
+		this.hasSupportingSlot = false;
+		this.handleFocus = () => {
+			this.focus();
+		};
+		this.handleClear = (event) => {
+			event.stopPropagation();
+			if (!this.input) return;
+			this.input.value = "";
+			this.value = "";
+			this.dirty = true;
+			this.input.focus();
+			this.dispatchEvent(new Event("clear", {
+				bubbles: true,
+				composed: true
+			}));
+			this.dispatchEvent(new Event("input", {
+				bubbles: true,
+				composed: true
+			}));
+			this.dispatchEvent(new Event("change", {
+				bubbles: true,
+				composed: true
+			}));
+		};
+	}
+	static {
+		this.styles = unsafeCSS(text_field_default);
+	}
+	/** Restores the initial value (the `value` attribute) and clears the dirty and error flags. */
+	reset() {
+		this.dirty = false;
+		this.value = this.getAttribute("value") ?? "";
+		this.error = false;
+	}
+	/** True once the user has typed in the field. */
+	isDirty() {
+		return this.dirty;
+	}
+	attributeChangedCallback(attribute, newValue, oldValue) {
+		if (attribute === "value" && this.dirty) return;
+		super.attributeChangedCallback(attribute, newValue, oldValue);
+	}
+	focus(options) {
+		this.input?.focus(options);
+		this.focused = true;
+	}
+	blur() {
+		this.input?.blur();
+		this.focused = false;
+	}
+	/** Selects the whole text. */
+	select() {
+		this.input?.select();
+	}
+	handleInput(event) {
+		this.dirty = true;
+		this.value = event.target.value;
+		redispatchEvent(this, event);
+	}
+	handleFocusin(event) {
+		this.focused = true;
+		redispatchEvent(this, event);
+	}
+	/** A click anywhere on the field (icons, padding) focuses the input. */
+	forwardFocusin(event) {
+		if (event.defaultPrevented || event.target === this.input) return;
+		this.input?.focus();
+	}
+	handleFocusout(event) {
+		this.focused = false;
+		redispatchEvent(this, event);
+	}
+	handleSupportingSlotChange(event) {
+		const slot = event.target;
+		this.hasSupportingSlot = slot.assignedNodes({ flatten: true }).length > 0;
+	}
+	renderPrefixSlot() {
+		return html`<slot name="prefix-icon"></slot>`;
+	}
+	renderSuffixSlot() {
+		return html`<slot name="suffix-icon"></slot>`;
+	}
+	renderHelpIconSlot() {
+		return html`<slot name="help-icon"></slot>`;
+	}
+	renderClearButton() {
+		if (!this.clearable || !this.value || this.disabled || this.readOnly) return nothing;
+		return html`<button class="clear-button" type="button" aria-label="Clear" tabindex="-1" @click=${this.handleClear}>
+      <slot name="clear-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="12" cy="12" r="10"></circle>
+          <line x1="15" y1="9" x2="9" y2="15"></line>
+          <line x1="9" y1="9" x2="15" y2="15"></line>
+        </svg>
+      </slot>
+    </button>`;
+	}
+	renderSupportingText() {
+		const message = this.error && !this.disabled && !!this.errorText ? this.errorText : this.help;
+		const counter = this.maxLength > 0 ? `${this.value.length} / ${this.maxLength}` : "";
+		if (!message && !counter && !this.hasSupportingSlot) return html`<slot name="supporting-text" hidden @slotchange=${this.handleSupportingSlotChange}></slot>`;
+		return html`<div class="supporting-text ${classMap({ error: this.error && !this.disabled })}">
+      <div class="supporting-text__message">
+        <slot name="supporting-text" @slotchange=${this.handleSupportingSlotChange}>${message}</slot>
+      </div>
+      ${counter ? html`<span class="supporting-text__counter">${counter}</span>` : nothing}
+    </div>`;
+	}
+	redispatchEvent(event) {
+		redispatchEvent(this, event);
+	}
+	updated(changed) {
+		if (changed.has("disabled") || changed.has("error") || changed.has("readOnly") || changed.has("focused")) addClasses(this, this.stateClasses);
+	}
+	get stateClasses() {
+		return {
+			disabled: this.disabled,
+			error: !this.disabled && this.error,
+			"read-only": this.readOnly,
+			"focus-within": this.focused
+		};
+	}
+	render() {
+		const classes = this.stateClasses;
+		return html`<div class="c2-text-field-row">
+        <div class="c2-text-field ${classMap(classes)}" @click=${this.forwardFocusin}>
+          ${this.renderPrefixSlot()}
+          <input
+            type=${this.type}
+            class="input"
+            name=${ifDefined(this.name || void 0)}
+            autocomplete=${ifDefined(this.autocomplete || void 0)}
+            maxlength=${ifDefined(this.maxLength > -1 ? this.maxLength : void 0)}
+            minlength=${ifDefined(this.minLength > -1 ? this.minLength : void 0)}
+            pattern=${ifDefined(this.pattern || void 0)}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readOnly}
+            ?required=${this.required}
+            aria-invalid=${this.error ? "true" : nothing}
+            placeholder=${this.placeholder || nothing}
+            .value=${live(this.value)}
+            @change=${this.redispatchEvent}
+            @select=${this.redispatchEvent}
+            @focusin=${this.handleFocusin}
+            @focusout=${this.handleFocusout}
+            @input=${this.handleInput}
+          />
+          ${this.renderClearButton()} ${this.renderSuffixSlot()}
+        </div>
+        ${this.renderHelpIconSlot()}
+      </div>
+      ${this.renderSupportingText()}`;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], TextField.prototype, "readOnly", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], TextField.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], TextField.prototype, "error", void 0);
+__decorate([property({ type: Number })], TextField.prototype, "maxLength", void 0);
+__decorate([property({ type: Number })], TextField.prototype, "minLength", void 0);
+__decorate([property({ type: String })], TextField.prototype, "pattern", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], TextField.prototype, "required", void 0);
+__decorate([property({ type: String })], TextField.prototype, "type", void 0);
+__decorate([property({ type: String })], TextField.prototype, "name", void 0);
+__decorate([property({ type: String })], TextField.prototype, "autocomplete", void 0);
+__decorate([property({ type: String })], TextField.prototype, "placeholder", void 0);
+__decorate([property({ type: String })], TextField.prototype, "value", void 0);
+__decorate([property({ attribute: "error-text" })], TextField.prototype, "errorText", void 0);
+__decorate([property({ type: String })], TextField.prototype, "help", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], TextField.prototype, "clearable", void 0);
+__decorate([state()], TextField.prototype, "dirty", void 0);
+__decorate([state()], TextField.prototype, "focused", void 0);
+__decorate([state()], TextField.prototype, "hasSupportingSlot", void 0);
+__decorate([query(".input")], TextField.prototype, "input", void 0);
+TextField = __decorate([customElement("c2-text-field")], TextField);
+//#endregion
+export { __decorate as n, TextField as t };

package/dist/text-field-clear.js

@@ -0,0 +1,49 @@
+import { n as __decorate, t as TextField } from "./chunks/text-field-DkffSesv.js";
+import { html, nothing, unsafeCSS } from "lit";
+import { customElement, state } from "lit/decorators.js";
+//#region src/text-field-clear.scss?inline
+var text_field_clear_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n.clear-icon {\n  cursor: pointer;\n  width: var(--c2-text-field-clear__clear-icon--size,24px);\n  color: var(--c2-text-field-clear__clear-icon--color,rgb(70, 70, 70));\n  display: flex;\n  align-items: center;\n}";
+//#endregion
+//#region src/text-field-clear.ts
+var TextFieldClear = class TextFieldClear extends TextField {
+	constructor(..._args) {
+		super(..._args);
+		this.showClear = false;
+		this.clearHandle = () => {
+			this.value = "";
+			this.showClear = false;
+		};
+	}
+	static {
+		this.styles = [unsafeCSS(text_field_clear_default), TextField.styles];
+	}
+	handleInput(event) {
+		super.handleInput(event);
+		this.showClear = !!this.value;
+	}
+	renderClearIcon() {
+		return this.showClear ? html`<div class="clear-icon" @click=${this.clearHandle}>
+          <slot name="clear-icon">
+            <svg
+              viewBox="0 0 24 24"
+              class="default-clear-icon"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </slot>
+        </div>` : nothing;
+	}
+	renderSuffixSlot() {
+		return html`${this.renderClearIcon()} ${super.renderSuffixSlot()}`;
+	}
+};
+__decorate([state()], TextFieldClear.prototype, "showClear", void 0);
+TextFieldClear = __decorate([customElement("c2-text-field-clear")], TextFieldClear);
+//#endregion
+export { TextFieldClear };

package/dist/text-field.js

@@ -0,0 +1,2 @@
+import { t as TextField } from "./chunks/text-field-DkffSesv.js";
+export { TextField };

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@c2n/text-field",
+  "version": "0.0.6",
+  "type": "module",
+  "main": "dist/text-field.js",
+  "exports": {
+    ".": {
+      "default": "./dist/text-field.js",
+      "types": "./types/src/text-field.d.ts"
+    },
+    "./text-field-clear.js": {
+      "default": "./dist/text-field-clear.js",
+      "types": "./types/src/text-field-clear.d.ts"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types"
+  ],
+  "keywords": [
+    "text-field",
+    "web component",
+    "lit"
+  ],
+  "author": "code2nguyen@gmail.com",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/code2nguyen/web-components.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "wireit",
+    "type-check": "wireit"
+  },
+  "wireit": {
+    "type-check": {
+      "dependencies": [
+        "../../core:build"
+      ],
+      "command": "tsc -p tsconfig.lib.json --composite false"
+    },
+    "build": {
+      "dependencies": [
+        "type-check"
+      ],
+      "command": "vite build"
+    }
+  },
+  "dependencies": {
+    "@c2n/core": "0.0.6",
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "@c2n/config": "*"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "2921054bc75299da66dad11c1e374246ff88a51e"
+}

package/types/src/text-field-clear.d.ts

@@ -0,0 +1,28 @@
+import { CSSResult, nothing } from 'lit';
+import { TextField } from './text-field';
+/**
+ * A `c2-text-field` that always shows a clear button while it has a value. Prefer `c2-text-field` with the
+ * `clearable` attribute; this element remains for markup that cannot toggle attributes. Inherits every attribute,
+ * slot, event and CSS variable of `c2-text-field`.
+ *
+ * @tag c2-text-field-clear
+ *
+ * @slot clear-icon - Replaces the default cross icon.
+ *
+ * @cssproperty {pixel} [--c2-text-field-clear__clear-icon--size=24px]
+ * @cssproperty {color} [--c2-text-field-clear__clear-icon--color=rgb(70, 70, 70)]
+ */
+export declare class TextFieldClear extends TextField {
+    static styles: CSSResult | CSSResult[];
+    showClear: boolean;
+    protected handleInput(event: InputEvent): void;
+    protected clearHandle: () => void;
+    renderClearIcon(): import("lit-html").TemplateResult<1> | typeof nothing;
+    protected renderSuffixSlot(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-text-field-clear': TextFieldClear;
+    }
+}
+//# sourceMappingURL=text-field-clear.d.ts.map

package/types/src/text-field-clear.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field-clear.d.ts","sourceRoot":"","sources":["../../src/text-field-clear.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAQ,OAAO,EAAa,MAAM,KAAK,CAAA;AAIzD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAExC;;;;;;;;;;;GAWG;AACH,qBACa,cAAe,SAAQ,SAAS;IAC3C,OAAgB,MAAM,EAAE,SAAS,GAAG,SAAS,EAAE,CAAqD;IAE3F,SAAS,UAAQ;cAEP,WAAW,CAAC,KAAK,EAAE,UAAU;IAKhD,SAAS,CAAC,WAAW,aAGpB;IAED,eAAe;cAqBI,gBAAgB;CAGpC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,cAAc,CAAA;KACtC;CACF"}

package/types/src/text-field.d.ts

@@ -0,0 +1,170 @@
+import { CSSResult, LitElement, nothing, type PropertyValues } from 'lit';
+export type TextFieldType = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'number';
+/**
+ * A single-line input wrapped in a themeable field. The native `<input>` keeps its behaviour (`type`, `name`,
+ * `autocomplete`, `maxlength`, `pattern`, `input`/`change` events); the field adds `prefix-icon` / `suffix-icon` slots
+ * sized by `--c2-text-field__icon--size`, an optional clear button (`clearable`), helper text (`help`), an error
+ * message (`error` + `error-text`), a character counter when `maxlength` is set, and a `help-icon` slot beside the
+ * field. Pair it with `c2-label` for a caption. Give the host a `width`: the field fills it.
+ *
+ * @tag c2-text-field
+ *
+ * @slot prefix-icon - Icon (or short adornment text) at the start of the field: an inline SVG, a `c2-feather-*` icon or a `c2-mat-icon`.
+ * @slot suffix-icon - Icon or adornment at the end of the field, after the clear button.
+ * @slot clear-icon - Replaces the default cross of the clear button.
+ * @slot help-icon - Icon shown beside the field, outside the border, e.g. a tooltip trigger.
+ * @slot supporting-text - Rich helper content below the field. `help` and `error-text` are the plain-text shortcuts.
+ *
+ * @event {InputEvent} input - Re-dispatched from the inner input on every keystroke; `value` is already updated.
+ * @event {Event} change - Re-dispatched from the inner input when the value is committed (blur or Enter).
+ * @event {Event} clear - Fired after the clear button emptied the field (an `input` and a `change` event follow).
+ *
+ * @cssproperty {pixel} [--c2-text-field--min-height=36px]
+ * @cssproperty {pixel} [--c2-text-field--gap=8px] - Space between the icons and the text.
+ *
+ * @cssproperty {border-radius} [--c2-text-field--border-top-left-radius=6px]
+ * @cssproperty {border-radius} [--c2-text-field--border-top-right-radius=6px]
+ * @cssproperty {border-radius} [--c2-text-field--border-bottom-left-radius=6px]
+ * @cssproperty {border-radius} [--c2-text-field--border-bottom-right-radius=6px]
+ *
+ * @cssproperty {padding} [--c2-text-field--padding-top=6px]
+ * @cssproperty {padding} [--c2-text-field--padding-right=10px]
+ * @cssproperty {padding} [--c2-text-field--padding-bottom=6px]
+ * @cssproperty {padding} [--c2-text-field--padding-left=12px]
+ *
+ * @cssproperty {border} [--c2-text-field--border-top=1px solid #bcbcc6]
+ * @cssproperty {border} [--c2-text-field--border-right=1px solid #bcbcc6]
+ * @cssproperty {border} [--c2-text-field--border-bottom=1px solid #bcbcc6]
+ * @cssproperty {border} [--c2-text-field--border-left=1px solid #bcbcc6]
+ *
+ * @cssproperty {color} [--c2-text-field--color=#18181b]
+ * @cssproperty {color} [--c2-text-field--background=#ffffff]
+ *
+ * @cssproperty {font-size} [--c2-text-field--font-size=14px]
+ * @cssproperty {font-weight} --c2-text-field--font-weight
+ * @cssproperty {font-style} --c2-text-field--font-style
+ * @cssproperty {font-family} --c2-text-field--font-family
+ * @cssproperty {pixel} [--c2-text-field--line-height=20px]
+ *
+ * @cssproperty {color} [--c2-text-field__placeholder--color=#71717a]
+ * @cssproperty {opacity} [--c2-text-field__placeholder--opacity=1]
+ * @cssproperty {font-weight} --c2-text-field__placeholder--font-weight
+ * @cssproperty {font-style} --c2-text-field__placeholder--font-style
+ *
+ * @cssproperty {border} [--c2-text-field__hover--border-top=1px solid #a1a1aa]
+ * @cssproperty {border} [--c2-text-field__hover--border-right=1px solid #a1a1aa]
+ * @cssproperty {border} [--c2-text-field__hover--border-bottom=1px solid #a1a1aa]
+ * @cssproperty {border} [--c2-text-field__hover--border-left=1px solid #a1a1aa]
+ *
+ * @cssproperty {border} [--c2-text-field__focus--border-top=1px solid #476ef9]
+ * @cssproperty {border} [--c2-text-field__focus--border-right=1px solid #476ef9]
+ * @cssproperty {border} [--c2-text-field__focus--border-bottom=1px solid #476ef9]
+ * @cssproperty {border} [--c2-text-field__focus--border-left=1px solid #476ef9]
+ * @cssproperty {color} --c2-text-field__focus--color
+ * @cssproperty {color} --c2-text-field__focus--background
+ * @cssproperty {outline} [--c2-text-field__focus--outline=3px solid rgba(71, 110, 249, 0.2)]
+ * @cssproperty {pixel} [--c2-text-field__focus--outline-offset=0px]
+ *
+ * @cssproperty {border} [--c2-text-field__error--border-top=1px solid #dc2626]
+ * @cssproperty {border} [--c2-text-field__error--border-right=1px solid #dc2626]
+ * @cssproperty {border} [--c2-text-field__error--border-bottom=1px solid #dc2626]
+ * @cssproperty {border} [--c2-text-field__error--border-left=1px solid #dc2626]
+ * @cssproperty {color} --c2-text-field__error--color
+ * @cssproperty {color} --c2-text-field__error--background
+ * @cssproperty {outline} [--c2-text-field__error__focus--outline=3px solid rgba(220, 38, 38, 0.2)]
+ *
+ * @cssproperty {border} [--c2-text-field__read-only--border-top=1px solid #e4e4e7]
+ * @cssproperty {border} [--c2-text-field__read-only--border-right=1px solid #e4e4e7]
+ * @cssproperty {border} [--c2-text-field__read-only--border-bottom=1px solid #e4e4e7]
+ * @cssproperty {border} [--c2-text-field__read-only--border-left=1px solid #e4e4e7]
+ * @cssproperty {color} --c2-text-field__read-only--color
+ * @cssproperty {color} [--c2-text-field__read-only--background=#fafafa]
+ *
+ * @cssproperty {opacity} [--c2-text-field__disabled--opacity=0.38]
+ *
+ * @cssproperty {pixel} [--c2-text-field__icon--size=16px]
+ * @cssproperty {color} [--c2-text-field__icon--color=#71717a]
+ *
+ * @cssproperty {pixel} [--c2-text-field__clear-icon--size=16px]
+ * @cssproperty {color} [--c2-text-field__clear-icon--color=#a1a1aa]
+ * @cssproperty {color} [--c2-text-field__clear-icon__hover--color=#18181b]
+ *
+ * @cssproperty {pixel} [--c2-text-field__help-icon--size=16px]
+ * @cssproperty {color} [--c2-text-field__help-icon--color=#71717a]
+ * @cssproperty {pixel} [--c2-text-field__help-icon--gap=8px] - Space between the field and the help icon.
+ *
+ * @cssproperty {pixel} [--c2-text-field__supporting-text--gap=4px] - Space between the field and the helper line.
+ * @cssproperty {font-size} [--c2-text-field__supporting-text--font-size=12px]
+ * @cssproperty {pixel} [--c2-text-field__supporting-text--line-height=16px]
+ * @cssproperty {color} [--c2-text-field__supporting-text--color=#71717a]
+ * @cssproperty {color} [--c2-text-field__supporting-text__error--color=#dc2626]
+ */
+export declare class TextField extends LitElement {
+    static styles: CSSResult | CSSResult[];
+    /** Shows the value but refuses edits. Rendered on a light grey background. */
+    readOnly: boolean;
+    /** Disables the input and dims the field. */
+    disabled: boolean;
+    /** Marks the field invalid: red border and, when set, `error-text` replaces the helper text. */
+    error: boolean;
+    /** Maximum number of characters. Forwarded to the input and shown as a `n / max` counter under the field. */
+    maxLength: number;
+    /** Minimum number of characters, forwarded to the input. */
+    minLength: number;
+    /** Regular expression the value must match, forwarded to the input. */
+    pattern: string;
+    /** Marks the input required (native validation). Pair with a `required` `c2-label` to show the indicator. */
+    required: boolean;
+    /** Input type: `text`, `email`, `password`, `search`, `tel`, `url` or `number`. */
+    type: TextFieldType;
+    /** Form field name forwarded to the input. */
+    name: string;
+    /** `autocomplete` hint forwarded to the input, e.g. `email` or `current-password`. */
+    autocomplete: string;
+    /** Text shown while the field is empty. */
+    placeholder: string;
+    /** The current text. Setting the attribute after the user has typed no longer updates it, like a native input. */
+    value: string;
+    /** Message shown under the field while `error` is set. */
+    errorText: string;
+    /** Helper text shown under the field. */
+    help: string;
+    /** Shows a clear button at the end of the field while it has a value. */
+    clearable: boolean;
+    private dirty;
+    private focused;
+    private hasSupportingSlot;
+    private readonly input?;
+    /** Restores the initial value (the `value` attribute) and clears the dirty and error flags. */
+    reset(): void;
+    handleFocus: () => void;
+    /** True once the user has typed in the field. */
+    isDirty(): boolean;
+    attributeChangedCallback(attribute: string, newValue: string | null, oldValue: string | null): void;
+    focus(options?: FocusOptions | undefined): void;
+    blur(): void;
+    /** Selects the whole text. */
+    select(): void;
+    protected handleInput(event: InputEvent): void;
+    protected handleFocusin(event: Event): void;
+    /** A click anywhere on the field (icons, padding) focuses the input. */
+    protected forwardFocusin(event: Event): void;
+    protected handleFocusout(event: Event): void;
+    protected handleClear: (event: Event) => void;
+    private handleSupportingSlotChange;
+    protected renderPrefixSlot(): import("lit-html").TemplateResult<1>;
+    protected renderSuffixSlot(): import("lit-html").TemplateResult<1>;
+    protected renderHelpIconSlot(): import("lit-html").TemplateResult<1>;
+    protected renderClearButton(): import("lit-html").TemplateResult<1> | typeof nothing;
+    protected renderSupportingText(): import("lit-html").TemplateResult<1>;
+    private redispatchEvent;
+    protected updated(changed: PropertyValues): void;
+    private get stateClasses();
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-text-field': TextField;
+    }
+}
+//# sourceMappingURL=text-field.d.ts.map

package/types/src/text-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../src/text-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAQ,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAS1F,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,CAAA;AAE/F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkGG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,EAAE,SAAS,GAAG,SAAS,EAAE,CAAoB;IAInE,8EAA8E;IAClC,QAAQ,UAAQ;IAE5D,6CAA6C;IACD,QAAQ,UAAQ;IAE5D,gGAAgG;IACpD,KAAK,UAAQ;IAIzD,6GAA6G;IACjF,SAAS,SAAK;IAE1C,4DAA4D;IAChC,SAAS,SAAK;IAE1C,uEAAuE;IAC3C,OAAO,SAAK;IAExC,6GAA6G;IACjE,QAAQ,UAAQ;IAI5D,mFAAmF;IACvD,IAAI,EAAE,aAAa,CAAS;IAExD,8CAA8C;IAClB,IAAI,SAAK;IAErC,sFAAsF;IAC1D,YAAY,SAAK;IAE7C,2CAA2C;IACf,WAAW,SAAK;IAE5C,kHAAkH;IACtF,KAAK,SAAK;IAEtC,0DAA0D;IACnB,SAAS,SAAK;IAIrD,yCAAyC;IACb,IAAI,SAAK;IAErC,yEAAyE;IAC7B,SAAS,UAAQ;IAGpD,OAAO,CAAC,KAAK,CAAQ;IACrB,OAAO,CAAC,OAAO,CAAQ;IACvB,OAAO,CAAC,iBAAiB,CAAQ;IAGzB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAyB;IAEjE,+FAA+F;IAC/F,KAAK;IAML,WAAW,aAEV;IAED,iDAAiD;IACjD,OAAO;IAIE,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAU5F,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,SAAS,GAAG,IAAI;IAK/C,IAAI,IAAI,IAAI;IAKrB,8BAA8B;IAC9B,MAAM,IAAI,IAAI;IAId,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,UAAU;IAMvC,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,KAAK;IAKpC,wEAAwE;IACxE,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,KAAK;IAKrC,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,KAAK;IAKrC,SAAS,CAAC,WAAW,GAAI,OAAO,KAAK,UAUpC;IAED,OAAO,CAAC,0BAA0B;IAKlC,SAAS,CAAC,gBAAgB;IAI1B,SAAS,CAAC,gBAAgB;IAI1B,SAAS,CAAC,kBAAkB;IAI5B,SAAS,CAAC,iBAAiB;IAa3B,SAAS,CAAC,oBAAoB;IAe9B,OAAO,CAAC,eAAe;cAIJ,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAMzD,OAAO,KAAK,YAAY,GAOvB;IAEQ,MAAM;CA+BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,SAAS,CAAA;KAC3B;CACF"}