kemet-ui 4.0.2 → 5.0.0

package/dist/elements/input/index.js

@@ -0,0 +1,684 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/elements/input/index.ts
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { live } from "lit/directives/live.js";
+
+// src/utilities/form-controller.ts
+var FormSubmitController = class {
+  constructor(host, options = {}) {
+    (this.host = host).addController(this);
+    this.options = {
+      form: (input) => input.closest("form"),
+      name: (input) => input.name,
+      value: (input) => input.value,
+      disabled: (input) => input.disabled,
+      ...options
+    };
+    this.handleFormData = this.handleFormData.bind(this);
+    this.handleFormSubmit = this.handleFormSubmit.bind(this);
+  }
+  hostConnected() {
+    this.form = this.options.form(this.host);
+    if (this.form) {
+      this.form.addEventListener("formdata", this.handleFormData);
+      this.form.addEventListener("submit", this.handleFormSubmit);
+    }
+  }
+  hostDisconnected() {
+    if (this.form) {
+      this.form.removeEventListener("formdata", this.handleFormData);
+      this.form.removeEventListener("submit", this.handleFormSubmit);
+      this.form = void 0;
+    }
+  }
+  handleFormData(event) {
+    const disabled = this.options.disabled(this.host);
+    const name = this.options.name(this.host);
+    const value = this.options.value(this.host);
+    if (!disabled && typeof name === "string" && typeof value !== "undefined") {
+      event.formData?.append(name, value.toString());
+    }
+  }
+  handleFormSubmit(event) {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    const disabled = this.options.disabled(this.host);
+    this.form = this.options.form(this.host);
+    if (this.form && !disabled) {
+      const components = this.form.querySelectorAll("kemet-input, kemet-textarea, kemet-select, kemet-checkbox, kemet-radios");
+      components.forEach((component) => {
+        if (component.checkValidity) {
+          component.checkValidity();
+          if (!component.checkValidity()) {
+            component.status = "error";
+            component.invalid = true;
+            component.dispatchEvent(
+              new CustomEvent("kemet-input-status", {
+                bubbles: true,
+                composed: true,
+                detail: {
+                  status: "error",
+                  validity: component.validity ? component.validity : {},
+                  element: component
+                }
+              })
+            );
+          }
+          if (component.checkLimitValidity && !component.checkLimitValidity()) {
+            component.status = "error";
+            component.invalid = true;
+            component.dispatchEvent(
+              new CustomEvent("kemet-input-status", {
+                bubbles: true,
+                composed: true,
+                detail: {
+                  status: "error",
+                  validity: { passedLimit: true },
+                  element: component
+                }
+              })
+            );
+          }
+        }
+      });
+    }
+  }
+  submit() {
+    const button = document.createElement("button");
+    if (this.form) {
+      button.type = "submit";
+      button.style.position = "absolute";
+      button.style.width = "0";
+      button.style.height = "0";
+      button.style.clip = "rect(0 0 0 0)";
+      button.style.clipPath = "inset(50%)";
+      button.style.overflow = "hidden";
+      button.style.whiteSpace = "nowrap";
+      this.form.append(button);
+      button.click();
+      button.remove();
+    }
+  }
+};
+
+// src/utilities/events.ts
+var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
+  element.dispatchEvent(
+    new CustomEvent(name, { bubbles, composed, detail })
+  );
+};
+
+// src/elements/input/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+  /* public */
+  --kemet-input-height: 50px;
+  --kemet-input-color: var(--kemet-color-font-base);
+  --kemet-input-border: 1px solid var(--kemet-input-color);
+  --kemet-input-padding-y: 0.5rem;
+  --kemet-input-padding-x: 1rem;
+  --kemet-input-icon-gap: 3rem;
+  --kemet-input-font-color: var(--kemet-input-color);
+
+
+  /* private */
+  --_kemet-input-border-radius: 0;
+  --_kemet-input-background-color: transparent;
+  --_kemet-input-icon-left-padding: var(--kemet-input-padding-x);
+  --_kemet-input-icon-right-padding: var(--kemet-input-padding-x);
+
+  position: relative;
+  display: block;
+}
+
+input {
+  color: var(--kemet-input-font-color);
+  display: block;
+  font-size: 1rem;
+  width: 100%;
+  height: var(--kemet-input-height);
+  border: var(--kemet-input-border);
+  appearance: none;
+  box-sizing: border-box;
+  background-color: var(--_kemet-input-background-color);
+  border-radius: var(--_kemet-input-border-radius);
+  padding-left: var(--_kemet-input-icon-left-padding);
+  padding-right: var(--_kemet-input-icon-right-padding);
+  padding-top: var(--kemet-input-padding-y);
+  padding-bottom: var(--kemet-input-padding-y);
+}
+
+:host([polarity=dark]) {
+  --kemet-input-color: var(--kemet-color-font-inverse-base);
+  --kemet-input-font-color: var(--kemet-color-font-inverse-base);
+}
+
+:host([icon-left]) {
+  --_kemet-input-icon-left-padding: var(--kemet-input-icon-gap);
+}
+
+:host([icon-right]) {
+  --_kemet-input-icon-right-padding: var(--kemet-input-icon-gap);
+}
+
+input[type=color] {
+  min-width: 10rem;
+}
+
+input[type=search]::-webkit-search-decoration,
+input[type=search]::-webkit-search-cancel-button,
+input[type=search]::-webkit-search-results-button,
+input[type=search]::-webkit-search-results-decoration {
+  display: none;
+}
+
+
+
+:host([appearance=brand]) {
+  --kemet-input-color: var(--kemet-color-brand-primary-base);
+}
+
+:host([appearance=error]) {
+  --kemet-input-color: var(--kemet-color-font-error);
+}
+
+:host([appearance=success]) {
+  --kemet-input-color: var(--kemet-color-font-success);
+}
+
+:host([appearance=warning]) {
+  --kemet-input-color: var(--kemet-color-font-warning);
+}
+
+:host([appearance=link]) {
+  --kemet-input-color: var(--kemet-color-font-link);
+}
+
+
+:host([appearance=brand][filled]) {
+  --_kemet-input-background-color: var(--kemet-color-brand-primary-base);
+}
+
+:host([appearance=error][filled]) {
+  --_kemet-input-background-color: var(--kemet-color-font-error);
+}
+
+:host([appearance=success][fiiled]) {
+  --_kemet-input-background-color: var(--kemet-color-font-success);
+}
+
+:host([appearance=warning][filled]) {
+  --_kemet-input-background-color: var(--kemet-color-font-warning);
+}
+
+:host([appearance=link][filled]) {
+  --_kemet-input-background-color: var(--kemet-color-font-link);
+}
+
+:host([disabled]) {
+  --kemet-input-color: var(--kemet-color-font-disabled);
+}
+
+:host([rounded]) {
+  --_kemet-input-border-radius: var(--kemet-border-radius-md);
+}
+
+:host([rounded=sm])  {
+  --_kemet-input-border-radius: var(--kemet-border-radius-sm);
+}
+
+:host([rounded=lg]) {
+  --_kemet-input-border-radius: var(--kemet-border-radius-lg);
+}
+
+:host([rounded=xl])  {
+  --_kemet-input-border-radius: var(--kemet-border-radius-xl);
+}
+
+:host([rounded=circle]) {
+  --_kemet-input-border-radius: var(--kemet-border-radius-circle);
+}
+
+:host([rounded=pill])  {
+  --_kemet-input-border-radius: var(--kemet-border-radius-pill);
+}
+
+:host([filled]) {
+  --kemet-input-font-color: var(--kemet-color-font-inverse-base);
+  --_kemet-input-background-color: var(--kemet-color-background-inverse);
+  --kemet-input-border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+
+kemet-icon,
+::slotted(kemet-icon) {
+  color: var(--kemet-input-font-color);
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+kemet-icon.left,
+:host([icon-left]) ::slotted(kemet-icon) {
+  left: 1rem;
+}
+
+kemet-icon.right,
+:host([icon-right]) ::slotted(kemet-icon) {
+  right: 1rem;
+}
+
+kemet-icon.eye,
+kemet-icon.search {
+  cursor: pointer;
+}
+`;
+
+// src/elements/input/index.ts
+var EnumInputTypes = /* @__PURE__ */ ((EnumInputTypes2) => {
+  EnumInputTypes2["Text"] = "text";
+  EnumInputTypes2["Color"] = "color";
+  EnumInputTypes2["Date"] = "date";
+  EnumInputTypes2["DateTimeLocal"] = "datetime-local";
+  EnumInputTypes2["Email"] = "email";
+  EnumInputTypes2["Password"] = "password";
+  EnumInputTypes2["Hidden"] = "hidden";
+  EnumInputTypes2["Month"] = "month";
+  EnumInputTypes2["Number"] = "number";
+  EnumInputTypes2["Reset"] = "reset";
+  EnumInputTypes2["Search"] = "search";
+  EnumInputTypes2["Tel"] = "tel";
+  EnumInputTypes2["Time"] = "time";
+  EnumInputTypes2["Url"] = "url";
+  EnumInputTypes2["Week"] = "week";
+  return EnumInputTypes2;
+})(EnumInputTypes || {});
+var EnumAriaAutoComplete = /* @__PURE__ */ ((EnumAriaAutoComplete2) => {
+  EnumAriaAutoComplete2["Inline"] = "inline";
+  EnumAriaAutoComplete2["List"] = "list";
+  EnumAriaAutoComplete2["Both"] = "both";
+  EnumAriaAutoComplete2["None"] = "none";
+  return EnumAriaAutoComplete2;
+})(EnumAriaAutoComplete || {});
+var EnumAutoComplete = /* @__PURE__ */ ((EnumAutoComplete2) => {
+  EnumAutoComplete2["On"] = "on";
+  EnumAutoComplete2["Off"] = "off";
+  EnumAutoComplete2["AdditionalName"] = "additional-name";
+  EnumAutoComplete2["AddressLevel1"] = "address-level1";
+  EnumAutoComplete2["AddressLevel2"] = "address-level2";
+  EnumAutoComplete2["AddressLevel3"] = "address-level3";
+  EnumAutoComplete2["AddressLevel4"] = "address-level4";
+  EnumAutoComplete2["AddressLine1"] = "address-line1";
+  EnumAutoComplete2["AddressLine2"] = "address-line2";
+  EnumAutoComplete2["AddressLine3"] = "address-line3";
+  EnumAutoComplete2["Bday"] = "bday";
+  EnumAutoComplete2["BdayYear"] = "bday-year";
+  EnumAutoComplete2["BdayDay"] = "bday-day";
+  EnumAutoComplete2["BdayMonth"] = "bday-month";
+  EnumAutoComplete2["Billing"] = "billing";
+  EnumAutoComplete2["CcAdditionalName"] = "cc-additional-name";
+  return EnumAutoComplete2;
+})(EnumAutoComplete || {});
+var EnumInputModes = /* @__PURE__ */ ((EnumInputModes2) => {
+  EnumInputModes2["None"] = "none";
+  EnumInputModes2["Text"] = "text";
+  EnumInputModes2["Decimal"] = "decimal";
+  EnumInputModes2["Numeric"] = "numeric";
+  EnumInputModes2["Tel"] = "tel";
+  EnumInputModes2["Search"] = "search";
+  EnumInputModes2["Email"] = "email";
+  EnumInputModes2["Url"] = "url";
+  return EnumInputModes2;
+})(EnumInputModes || {});
+var HTMLKemetInputElement = class extends LitElement {
+  constructor() {
+    super();
+    this.name = "input";
+    this.autofocus = false;
+    this.type = "text" /* Text */;
+    this.value = "";
+    this.appearance = "neutral" /* Neutral */;
+    this.validateOnBlur = false;
+    this.ariaAutoComplete = null;
+    this.iconRight = false;
+    this.iconLeft = false;
+    this.isPasswordVisible = false;
+    this.focused = false;
+    this.dom = "initializing";
+    this.formSubmitController = new FormSubmitController(this);
+  }
+  firstUpdated() {
+    this.input = this.shadowRoot?.querySelector("input");
+    this.field = this.closest("kemet-field");
+    this.form = this.closest("form");
+    this.slug = this.field ? this.field.slug : "input";
+    if (this.field) {
+      this.field.addEventListener("kemet-appearance-change", (event) => this.handleStatus(event));
+    }
+    emitEvent(this, "kemet-input-mounted", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    });
+    this.dom = "mounted";
+  }
+  render() {
+    return html`
+      <div>
+        <slot name="left" @slotchange=${this.handleLeftChange}></slot>
+        <input
+          part="input"
+          id=${this.slug}
+          name=${this.name}
+          placeholder=${ifDefined(this.placeholder)}
+          minlength=${ifDefined(this.minlength)}
+          maxlength=${ifDefined(this.maxlength)}
+          min=${ifDefined(this.min)}
+          max=${ifDefined(this.max)}
+          step=${ifDefined(this.step)}
+          autocomplete=${ifDefined(this.autocomplete)}
+          aria-autocomplete=${ifDefined(this.ariaAutoComplete)}
+          aria-controls=${ifDefined(this.ariaControls)}
+          aria-activedescendant=${ifDefined(this.ariaActiveDescendant)}
+          pattern=${ifDefined(this.pattern)}
+          inputmode=${ifDefined(this.inputmode)}
+          aria-invalid=${this.invalid ? "true" : "false"}
+          ?autofocus=${this.autofocus}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          ?required=${this.required}
+          .type="${this.type === "password" && this.isPasswordVisible ? "text" : this.type}"
+          .value=${live(this.value)}
+          @change=${this.handleChange}
+          @input=${this.handleInput}
+          @invalid=${this.handleInvalid}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+        />
+        <slot name="right" @slotchange=${this.handleRightChange}></slot>
+        ${this.makeIconClear()} ${this.makeVisibilityToggle()}
+      </div>
+    `;
+  }
+  handleLeftChange() {
+    const left = this.querySelector('[slot="left"]');
+    if (left) this.iconLeft = true;
+  }
+  handleRightChange() {
+    const right = this.querySelector('[slot="right"]');
+    if (right) this.iconRight = true;
+  }
+  makeIconClear() {
+    if (this.type === "search" && this.value !== "") {
+      return html`
+        <kemet-icon class="search right" name="x-lg" @click=${() => this.handleClear()}></kemet-icon>
+      `;
+    }
+    return null;
+  }
+  makeVisibilityToggle() {
+    if (this.type === "password" /* Password */) {
+      this.iconRight = true;
+      return html`<kemet-icon
+        class="eye right"
+        name="${this.isPasswordVisible ? "eye" : "eye-slash"}"
+        @click=${() => this.togglePasswordVisibility()}
+      ></kemet-icon>`;
+    }
+    return null;
+  }
+  /**
+   * Handles when the input receives focus
+   * @private
+   */
+  handleFocus() {
+    this.focused = true;
+    emitEvent(this, "kemet-input-focus", { focused: true, element: this });
+  }
+  /**
+   * Handles when the input loses focus
+   * @private
+   */
+  handleBlur() {
+    if (this.validateOnBlur && this.form) {
+      this.input?.reportValidity();
+      this.validity = this.input?.validity;
+    }
+    this.focused = false;
+    emitEvent(this, "kemet-input-blur", { focused: false, element: this });
+  }
+  /**
+   * Handles when the input changes value
+   * @private
+   */
+  handleChange(event) {
+    this.value = this.input.value;
+    if (this.input.checkValidity() && this.checkLimitValidity() && this.appearance !== "success" /* Success */) {
+      this.invalid = false;
+      this.validity = this.input.validity;
+      emitEvent(this, "kemet-input-appearance-change", {
+        appearance: "neutral" /* Neutral */,
+        validity: this.input.validity,
+        element: this,
+        value: event.target.value
+      });
+    }
+  }
+  /**
+   * Handles when the input receives input
+   * @private
+   */
+  handleInput(event) {
+    this.value = this.input.value;
+    emitEvent(this, "kemet-input-input", {
+      appearance: this.appearance,
+      validity: this.input.validity,
+      element: event.target,
+      value: event.target.value
+    });
+  }
+  /**
+   * Handles when the input has an error
+   * @private
+   */
+  handleInvalid(event) {
+    this.validity = this.input?.validity;
+    if (this.validateOnBlur) {
+      this.invalid = true;
+      this.appearance = "error" /* Error */;
+      emitEvent(this, "kemet-input-appearance-change", {
+        status: "error" /* Error */,
+        validity: this.input?.validity,
+        element: this,
+        value: event.target.value
+      });
+    }
+  }
+  handleStatus(event) {
+    this.appearance = event.detail.status;
+  }
+  /**
+   * Toggles password visibility
+   * @private
+   */
+  togglePasswordVisibility() {
+    this.isPasswordVisible = !this.isPasswordVisible;
+  }
+  /**
+   * Handles the clear button for search
+   * @private
+   */
+  handleClear() {
+    this.value = "";
+    emitEvent(this, "kemet-input-input", {
+      status: this.appearance,
+      validity: this.input.validity,
+      element: this,
+      value: ""
+    });
+  }
+  /**
+   * Checks the validity of the character limit for the count component
+   * @public
+   * @method checkLimitValidity
+   * @returns {boolean}
+   */
+  checkLimitValidity() {
+    if (this.field) {
+      const count = this.field.querySelector("kemet-count");
+      if (count) {
+        return this.value.length < count.limit;
+      }
+    }
+    return true;
+  }
+  /**
+   * Checks the validity of the standard input
+   * @public
+   * @method checkValidity
+   * @returns {boolean}
+   */
+  checkValidity() {
+    return this.input?.checkValidity();
+  }
+  /**
+   * Focuses the standard input
+   * @public
+   * @method focus
+   * @returns {void}
+   */
+  focus() {
+    this.input?.focus();
+  }
+};
+HTMLKemetInputElement.styles = [styles_css_default];
+__decorateClass([
+  property({ type: String })
+], HTMLKemetInputElement.prototype, "slug", 2);
+__decorateClass([
+  property({ type: String })
+], HTMLKemetInputElement.prototype, "name", 2);
+__decorateClass([
+  property({ type: String })
+], HTMLKemetInputElement.prototype, "placeholder", 2);
+__decorateClass([
+  property({ type: Number })
+], HTMLKemetInputElement.prototype, "minlength", 2);
+__decorateClass([
+  property({ type: Number })
+], HTMLKemetInputElement.prototype, "maxlength", 2);
+__decorateClass([
+  property({ type: String })
+], HTMLKemetInputElement.prototype, "min", 2);
+__decorateClass([
+  property({ type: String })
+], HTMLKemetInputElement.prototype, "max", 2);
+__decorateClass([
+  property({ type: Number })
+], HTMLKemetInputElement.prototype, "step", 2);
+__decorateClass([
+  property({ type: String })
+], HTMLKemetInputElement.prototype, "autocomplete", 2);
+__decorateClass([
+  property({ type: String })
+], HTMLKemetInputElement.prototype, "pattern", 2);
+__decorateClass([
+  property({ type: String })
+], HTMLKemetInputElement.prototype, "inputmode", 2);
+__decorateClass([
+  property({ type: Boolean })
+], HTMLKemetInputElement.prototype, "autofocus", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], HTMLKemetInputElement.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean })
+], HTMLKemetInputElement.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], HTMLKemetInputElement.prototype, "required", 2);
+__decorateClass([
+  property({ type: String })
+], HTMLKemetInputElement.prototype, "type", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], HTMLKemetInputElement.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], HTMLKemetInputElement.prototype, "invalid", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], HTMLKemetInputElement.prototype, "appearance", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "validate-on-blur" })
+], HTMLKemetInputElement.prototype, "validateOnBlur", 2);
+__decorateClass([
+  property({ type: String, attribute: "aria-autocomplete" })
+], HTMLKemetInputElement.prototype, "ariaAutoComplete", 2);
+__decorateClass([
+  property({ type: String, attribute: "aria-controls" })
+], HTMLKemetInputElement.prototype, "ariaControls", 2);
+__decorateClass([
+  property({ type: String, attribute: "aria-activedescendant" })
+], HTMLKemetInputElement.prototype, "ariaActiveDescendant", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], HTMLKemetInputElement.prototype, "filled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "icon-right" })
+], HTMLKemetInputElement.prototype, "iconRight", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "icon-left" })
+], HTMLKemetInputElement.prototype, "iconLeft", 2);
+__decorateClass([
+  property({ type: Object })
+], HTMLKemetInputElement.prototype, "validity", 2);
+__decorateClass([
+  property({ type: Boolean })
+], HTMLKemetInputElement.prototype, "isPasswordVisible", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], HTMLKemetInputElement.prototype, "focused", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], HTMLKemetInputElement.prototype, "rounded", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], HTMLKemetInputElement.prototype, "polarity", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], HTMLKemetInputElement.prototype, "dom", 2);
+__decorateClass([
+  state()
+], HTMLKemetInputElement.prototype, "field", 2);
+__decorateClass([
+  state()
+], HTMLKemetInputElement.prototype, "form", 2);
+__decorateClass([
+  state()
+], HTMLKemetInputElement.prototype, "input", 2);
+HTMLKemetInputElement = __decorateClass([
+  customElement("kemet-input")
+], HTMLKemetInputElement);
+export {
+  EnumAriaAutoComplete,
+  EnumAutoComplete,
+  EnumInputModes,
+  EnumInputTypes,
+  HTMLKemetInputElement as default
+};
+//# sourceMappingURL=index.js.map