kemet-ui 4.0.0 → 4.0.2

package/dist/chunk-ETLBNDW5.mjs

@@ -0,0 +1,563 @@
+import {
+  emitEvent
+} from "./chunk-LHEY3UOF.mjs";
+import {
+  FormSubmitController
+} from "./chunk-VDX3OED3.mjs";
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/input.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/styles/elements/input.ts
+import { css } from "lit";
+var stylesBase = css`
+  :host {
+    --kemet-input-height: 50px;
+    --kemet-input-padding: 0.5rem 1rem;
+    --kemet-input-border: 1px solid rgb(var(--kemet-color-foreground));
+    --kemet-input-border-color-error: 1px solid rgb(var(--kemet-color-error));
+    --kemet-input-border-color-success: 1px solid rgb(var(--kemet-color-success));
+    --kemet-input-border-color-warning: 1px solid rgb(var(--kemet-color-warning));
+    --kemet-input-icon-left-padding: 3rem;
+    --kemet-input-icon-right-padding: 3rem;
+    --kemet-input-border-radius-rounded: 0;
+    --kemet-input-border-filled: none;
+    --kemet-input-color-filled: rgb(var(--kemet-color-white));
+    --kemet-input-background-color-filled: rgb(var(--kemet-color-primary));
+    --kemet-input-color-filled: rgb(var(--kemet-color-white));
+    --kemet-input-background-color-error: rgb(var(--kemet-color-error));
+    --kemet-input-background-color-success: rgb(var(--kemet-color-success));
+    --kemet-input-background-color-warning: rgb(var(--kemet-color-warning));
+
+    position: relative;
+    display: block;
+  }
+
+  input {
+    color: rgb(var(--kemet-color-text));
+    display: block;
+    font-size: 1rem;
+    width: 100%;
+    height: var(--kemet-input-height);
+    padding: var(--kemet-input-padding);
+    border: var(--kemet-input-border);
+    appearance: none;
+    box-sizing: border-box;
+    background-color: transparent;
+    border-radius: var(--kemet-input-border-radius-rounded);
+  }
+
+  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([status='error']) input {
+    border: var(--kemet-input-border-color-error);
+  }
+
+  :host([status='success']) input {
+    border: var(--kemet-input-border-color-success);
+  }
+
+  :host([status='warning']) input {
+    border: var(--kemet-input-border-color-warning);
+  }
+
+  :host([disabled]) input {
+    opacity: 0.5;
+  }
+
+  :host([icon-left]) input {
+    padding-left: var(--kemet-input-icon-left-padding);
+  }
+
+  :host([icon-right]) input {
+    padding-right: var(--kemet-input-icon-right-padding);
+  }
+
+  :host([rounded]) input {
+    --kemet-input-border-radius-rounded: var(--kemet-border-radius-md);
+  }
+
+  :host([rounded='sm']) input {
+    --kemet-input-border-radius-rounded: var(--kemet-border-radius-sm);
+  }
+
+  :host([rounded='lg']) input {
+    --kemet-input-border-radius-rounded: var(--kemet-border-radius-lg);
+  }
+
+  :host([rounded='xl']) input {
+    --kemet-input-border-radius-rounded: var(--kemet-border-radius-xl);
+  }
+
+  :host([rounded='circle']) input {
+    --kemet-input-border-radius-rounded: var(--kemet-border-radius-circle);
+  }
+
+  :host([rounded='pill']) input {
+    --kemet-input-border-radius-rounded: var(--kemet-border-radius-pill);
+  }
+
+  :host([filled]) input {
+    border: var(--kemet-input-border-filled);
+    color: var(--kemet-input-color-filled);
+    background-color: var(--kemet-input-background-color-filled);
+  }
+
+  :host([filled]) kemet-icon,
+  :host([filled]) input::placeholder {
+    color: var(--kemet-input-color-filled);
+  }
+
+  :host([status='error'][filled]) input {
+    background-color: var(--kemet-input-background-color-error);
+  }
+
+  :host([status='success'][filled]) input {
+    background-color: var(--kemet-input-background-color-success);
+  }
+
+  :host([status='warning'][filled]) input {
+    background-color: var(--kemet-input-background-color-warning);
+  }
+
+  kemet-icon-bootstrap,
+  ::slotted(kemet-icon-bootstrap) {
+    color: rgb(var(--kemet-color-text));
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  kemet-icon-bootstrap.left,
+  :host([icon-left]) ::slotted(kemet-icon-bootstrap) {
+    left: 1rem;
+  }
+
+  kemet-icon-bootstrap.right,
+  :host([icon-right]) ::slotted(kemet-icon-bootstrap) {
+    right: 1rem;
+  }
+
+  kemet-icon-bootstrap.eye,
+  kemet-icon-bootstrap.search {
+    cursor: pointer;
+  }
+
+  :host([status='error']) ::slotted(kemet-icon-bootstrap) {
+    color: rgb(var(--kemet-color-error));
+  }
+
+  :host([status='warning']) ::slotted(kemet-icon-bootstrap) {
+    color: rgb(var(--kemet-color-error));
+  }
+
+  :host([status='success']) ::slotted(kemet-icon-bootstrap) {
+    color: rgb(var(--kemet-color-success));
+  }
+`;
+
+// src/elements/input.ts
+var inputTypes = ["text", "color", "date", "datetime-local", "email", "password", "hidden", "month", "number", "reset", "search", "tel", "time", "url", "week"];
+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 ariaAutoComplete = ["inline", "list", "both", "none"];
+var EnumAriaAutoComplete = /* @__PURE__ */ ((EnumAriaAutoComplete2) => {
+  EnumAriaAutoComplete2["Inline"] = "inline";
+  EnumAriaAutoComplete2["List"] = "list";
+  EnumAriaAutoComplete2["Both"] = "both";
+  EnumAriaAutoComplete2["None"] = "none";
+  return EnumAriaAutoComplete2;
+})(EnumAriaAutoComplete || {});
+var autoComplete = ["on", "off", "additional-name", "address-level1", "address-level2", "address-level3", "address-level4", "address-line1", "address-line2", "address-line3", "bday", "bday-year", "bday-day", "bday-month", "billing", "cc-additional-name"];
+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 inputModes = ["none", "text", "decimal", "numeric", "tel", "search", "email", "url"];
+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 KemetInput = class extends LitElement {
+  constructor() {
+    super();
+    this.name = "input";
+    this.type = "text" /* Text */;
+    this.value = "";
+    this.status = "standard" /* Standard */;
+    this.validateOnBlur = false;
+    this.isPasswordVisible = false;
+    this.focused = false;
+    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-status-change", (event) => this.handleStatus(event));
+    }
+  }
+  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-bootstrap class="search right" icon="x-lg" @click=${() => this.handleClear()}></kemet-icon-bootstrap>
+      `;
+    }
+    return null;
+  }
+  makeVisibilityToggle() {
+    if (this.type === "password" /* Password */) {
+      this.iconRight = true;
+      return html`<kemet-icon-bootstrap
+        class="eye right"
+        icon="${this.isPasswordVisible ? "eye" : "eye-slash"}"
+        @click=${() => this.togglePasswordVisibility()}
+      ></kemet-icon-bootstrap>`;
+    }
+    return null;
+  }
+  /**
+   * Handles when the input receives focus
+   * @private
+   */
+  handleFocus() {
+    this.focused = true;
+    emitEvent(this, "kemet-focus", 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-blur", this);
+  }
+  /**
+   * Handles when the input changes value
+   * @private
+   */
+  handleChange(event) {
+    this.value = this.input.value;
+    if (this.input.checkValidity() && this.checkLimitValidity() && this.status !== "success" /* Success */) {
+      this.invalid = false;
+      this.status = "standard" /* Standard */;
+      this.validity = this.input.validity;
+      emitEvent(this, "kemet-status-change", {
+        status: "standard" /* Standard */,
+        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", {
+      status: this.status,
+      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.status = "error" /* Error */;
+      emitEvent(this, "kemet-status-change", {
+        status: "error" /* Error */,
+        validity: this.input?.validity,
+        element: this,
+        value: event.target.value
+      });
+    }
+  }
+  handleStatus(event) {
+    this.status = 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", {
+      status: this.status,
+      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();
+  }
+};
+KemetInput.styles = [stylesBase];
+__decorateClass([
+  property({ type: String })
+], KemetInput.prototype, "slug", 2);
+__decorateClass([
+  property({ type: String })
+], KemetInput.prototype, "name", 2);
+__decorateClass([
+  property({ type: String })
+], KemetInput.prototype, "placeholder", 2);
+__decorateClass([
+  property({ type: Number })
+], KemetInput.prototype, "minlength", 2);
+__decorateClass([
+  property({ type: Number })
+], KemetInput.prototype, "maxlength", 2);
+__decorateClass([
+  property({ type: String })
+], KemetInput.prototype, "min", 2);
+__decorateClass([
+  property({ type: String })
+], KemetInput.prototype, "max", 2);
+__decorateClass([
+  property({ type: Number })
+], KemetInput.prototype, "step", 2);
+__decorateClass([
+  property({ type: String })
+], KemetInput.prototype, "autocomplete", 2);
+__decorateClass([
+  property({ type: String })
+], KemetInput.prototype, "pattern", 2);
+__decorateClass([
+  property({ type: String })
+], KemetInput.prototype, "inputmode", 2);
+__decorateClass([
+  property({ type: Boolean })
+], KemetInput.prototype, "autofocus", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetInput.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean })
+], KemetInput.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetInput.prototype, "required", 2);
+__decorateClass([
+  property({ type: String })
+], KemetInput.prototype, "type", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetInput.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetInput.prototype, "invalid", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetInput.prototype, "status", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "validate-on-blur" })
+], KemetInput.prototype, "validateOnBlur", 2);
+__decorateClass([
+  property({ type: String, attribute: "aria-autocomplete" })
+], KemetInput.prototype, "ariaAutoComplete", 2);
+__decorateClass([
+  property({ type: String, attribute: "aria-controls" })
+], KemetInput.prototype, "ariaControls", 2);
+__decorateClass([
+  property({ type: String, attribute: "aria-activedescendant" })
+], KemetInput.prototype, "ariaActiveDescendant", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetInput.prototype, "filled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "icon-right" })
+], KemetInput.prototype, "iconRight", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "icon-left" })
+], KemetInput.prototype, "iconLeft", 2);
+__decorateClass([
+  property({ type: Object })
+], KemetInput.prototype, "validity", 2);
+__decorateClass([
+  property({ type: Boolean })
+], KemetInput.prototype, "isPasswordVisible", 2);
+__decorateClass([
+  property({ type: String })
+], KemetInput.prototype, "inputType", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetInput.prototype, "focused", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetInput.prototype, "rounded", 2);
+__decorateClass([
+  state()
+], KemetInput.prototype, "field", 2);
+__decorateClass([
+  state()
+], KemetInput.prototype, "form", 2);
+__decorateClass([
+  state()
+], KemetInput.prototype, "input", 2);
+KemetInput = __decorateClass([
+  customElement("kemet-input")
+], KemetInput);
+
+export {
+  inputTypes,
+  EnumInputTypes,
+  ariaAutoComplete,
+  EnumAriaAutoComplete,
+  autoComplete,
+  EnumAutoComplete,
+  inputModes,
+  EnumInputModes,
+  KemetInput
+};
+//# sourceMappingURL=chunk-ETLBNDW5.mjs.map

package/dist/chunk-ETLBNDW5.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/input.ts","../src/styles/elements/input.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { FormSubmitController } from '../utilities/form-controller';\nimport { emitEvent } from '../utilities/events';\nimport KemetField from '../elements/field';\nimport KemetCount from './count';\nimport { stylesBase } from '../styles/elements/input';\nimport { EnumStatuses, TypeRoundedSizes, TypeStatus } from '../utilities/constants';\n\nexport const inputTypes = ['text', 'color', 'date', 'datetime-local', 'email', 'password', 'hidden', 'month', 'number', 'reset', 'search', 'tel', 'time', 'url', 'week'] as const;\nexport enum EnumInputTypes {\n  Text = 'text',\n  Color = 'color',\n  Date = 'date',\n  DateTimeLocal = 'datetime-local',\n  Email = 'email',\n  Password = 'password',\n  Hidden = 'hidden',\n  Month = 'month',\n  Number = 'number',\n  Reset = 'reset',\n  Search = 'search',\n  Tel = 'tel',\n  Time = 'time',\n  Url = 'url',\n  Week = 'week'\n}\nexport type TypeInputTypes = typeof inputTypes[number];\n\nexport const ariaAutoComplete = ['inline', 'list', 'both', 'none'] as const;\nexport enum EnumAriaAutoComplete {\n  Inline = 'inline',\n  List = 'list',\n  Both = 'both',\n  None = 'none'\n}\nexport type TypeAriaAutoComplete = typeof ariaAutoComplete[number];\n\nexport const autoComplete = ['on', 'off', 'additional-name', 'address-level1', 'address-level2', 'address-level3', 'address-level4', 'address-line1', 'address-line2', 'address-line3', 'bday', 'bday-year', 'bday-day', 'bday-month', 'billing', 'cc-additional-name'] as const;\nexport enum EnumAutoComplete {\n  On = 'on',\n  Off = 'off',\n  AdditionalName = 'additional-name',\n  AddressLevel1 = 'address-level1',\n  AddressLevel2 = 'address-level2',\n  AddressLevel3 = 'address-level3',\n  AddressLevel4 = 'address-level4',\n  AddressLine1 = 'address-line1',\n  AddressLine2 = 'address-line2',\n  AddressLine3 = 'address-line3',\n  Bday = 'bday',\n  BdayYear = 'bday-year',\n  BdayDay = 'bday-day',\n  BdayMonth = 'bday-month',\n  Billing = 'billing',\n  CcAdditionalName = 'cc-additional-name'\n}\nexport type TypeAutoComplete = typeof autoComplete[number];\n\nexport const inputModes = ['none', 'text', 'decimal', 'numeric', 'tel', 'search', 'email', 'url'] as const;\nexport enum EnumInputModes {\n  None = 'none',\n  Text = 'text',\n  Decimal = 'decimal',\n  Numeric = 'numeric',\n  Tel = 'tel',\n  Search = 'search',\n  Email = 'email',\n  Url = 'url'\n}\nexport type TypeInputModes = typeof inputModes[number];\n\n\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-input\n * @summary An enhanced input element.\n *\n * @prop {string} slug - Used for the id of the input. Should match the slug used in a control if applicable.\n * @prop {string} name - The name of the input\n * @prop {string} placeholder - The placeholder attribute\n * @prop {string} minlength - The minlength attribute\n * @prop {string} maxlength - The maxlength attribute\n * @prop {string} min - The min attribute\n * @prop {string} max - The max attribute\n * @prop {string} step - The step attribute\n * @prop {TypeAutoComplete} autocomplete - The autocomplete attribute\n * @prop {string} pattern - The pattern attribute\n * @prop {TypeInputModes} inputmode - The input mode attribute\n * @prop {boolean} autofocus - The autofocus attribute\n * @prop {boolean} disabled - The disable attribute\n * @prop {boolean} readonly - The readonly attribute\n * @prop {boolean} required - The required attribute\n * @prop {string} type - The type of input\n * @prop {string} value - The input's value\n * @prop {boolean} invalid - States whether the input is invalid\n * @prop {string} status - The status of the input\n * @prop {boolean} validateOnBlur - Activates validation on blur\n * @prop {TypeAriaAutoComplete} ariaAutoComplete - Aria Autocomplete\n * @prop {string} ariaControls - Aria Controls\n * @prop {string} ariaActiveDescendant - Aria Active Descendant\n * @prop {TypeRoundedSizes} rounded - Displays rounded corners\n * @prop {boolean} filled - Displays a filled input box\n * @prop {string} iconRight - Custom Icon to the right of the input\n * @prop {string} iconLeft - Custom Icon to the left of the input\n * @prop {number} iconSize - Size of the icons\n * @prop {object} validity - The HTML5 validity object.\n * @prop {boolean} isPasswordVisible - Manages password visibility\n * @prop {string} inputType - Input Type of keypress handled through handleInput(e)\n * @prop {boolean} focused - Determines if the input is focused\n *\n * @csspart input\n *\n * @cssproperty --kemet-input-height - The height of the input.\n * @cssproperty --kemet-input-padding - The padding on the input.\n * @cssproperty --kemet-input-border - The border of the input.\n * @cssproperty --kemet-input-border-color-error -  The border of the error state.\n * @cssproperty --kemet-input-border-color-success - The border of the success state.\n * @cssproperty --kemet-input-border-color-warning - The border of the warning state.\n * @cssproperty --kemet-input-icon-left-padding - The icon-left padding.\n * @cssproperty --kemet-input-icon-right-padding - The icon-right padding.\n * @cssproperty --kemet-input-border-radius-rounded - The border radius on rounded.\n * @cssproperty --kemet-input-border-filled - The border on filled.\n * @cssproperty --kemet-input-color-filled - The color on filled.\n * @cssproperty --kemet-input-background-color-filled - The background-color on filled.\n * @cssproperty --kemet-input-background-color-error - The error state background color.\n * @cssproperty --kemet-input-background-color-success - The success state background color.\n * @cssproperty --kemet-input-background-color-warning - The warning state background color.\n *\n * @event kemet-focus - Fires when the input receives focus\n * @event kemet-blur - Fires when the input loses focus\n * @event kemet-status-change Fires when there's a change in status. This event includes an object that reports: 1) the status. 2) HTML5 validity object. 3) the component element.\n * Use the validity object to support custom validation messages.\n * @event kemet-input - Fires when the input receives input\n *\n */\n\n@customElement('kemet-input')\nexport default class KemetInput extends LitElement {\n  /** @internal */\n  formSubmitController: FormSubmitController;\n\n  static styles = [stylesBase];\n\n  @property({ type: String })\n  slug: string;\n\n  @property({ type: String })\n  name: string = 'input';\n\n  @property({ type: String })\n  placeholder: string;\n\n  @property({ type: Number })\n  minlength: number;\n\n  @property({ type: Number })\n  maxlength: number;\n\n  @property({ type: String })\n  min: string;\n\n  @property({ type: String })\n  max: string;\n\n  @property({ type: Number })\n  step: number;\n\n  @property({ type: String })\n  autocomplete: TypeAutoComplete;\n\n  @property({ type: String })\n  pattern: string;\n\n  @property({ type: String })\n  inputmode: TypeInputModes;\n\n  @property({ type: Boolean })\n  autofocus: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean;\n\n  @property({ type: Boolean })\n  readonly: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  required: boolean;\n\n  @property({ type: String })\n  type: TypeInputTypes = EnumInputTypes.Text;\n\n  @property({ type: String, reflect: true })\n  value: string = '';\n\n  @property({ type: Boolean, reflect: true })\n  invalid: boolean;\n\n  @property({ type: String, reflect: true })\n  status: TypeStatus = EnumStatuses.Standard;\n\n  @property({ type: Boolean, attribute: 'validate-on-blur' })\n  validateOnBlur: boolean = false;\n\n  @property({ type: String, attribute: 'aria-autocomplete' })\n  ariaAutoComplete: TypeAriaAutoComplete;\n\n  @property({ type: String, attribute: 'aria-controls' })\n  ariaControls: string;\n\n  @property({ type: String, attribute: 'aria-activedescendant' })\n  ariaActiveDescendant: string;\n\n  @property({ type: Boolean, reflect: true })\n  filled: boolean;\n\n  @property({ type: Boolean, reflect: true, attribute: 'icon-right' })\n  iconRight: boolean;\n\n  @property({ type: Boolean, reflect: true, attribute: 'icon-left' })\n  iconLeft: boolean;\n\n  @property({ type: Object })\n  validity: object;\n\n  @property({ type: Boolean })\n  isPasswordVisible: boolean = false;\n\n  @property({ type: String })\n  inputType: string;\n\n  @property({ type: Boolean, reflect: true })\n  focused: boolean = false;\n\n  @property({ type: String, reflect: true })\n  rounded: TypeRoundedSizes;\n\n  @state()\n  field: KemetField;\n\n  @state()\n  form: HTMLFormElement;\n\n  @state()\n  input: HTMLInputElement;\n\n  constructor() {\n    super();\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n  }\n\n  firstUpdated() {\n    // elements\n    this.input = this.shadowRoot.querySelector('input');\n    this.field = this.closest('kemet-field');\n    this.form = this.closest('form');\n    this.slug = this.field ? this.field.slug : 'input';\n\n    if (this.field) {\n      this.field.addEventListener('kemet-status-change', (event: CustomEvent) => this.handleStatus(event));\n    }\n  }\n\n  render() {\n    return html`\n      <div>\n        <slot name=\"left\" @slotchange=${this.handleLeftChange}></slot>\n        <input\n          part=\"input\"\n          id=${this.slug}\n          name=${this.name}\n          placeholder=${ifDefined(this.placeholder)}\n          minlength=${ifDefined(this.minlength)}\n          maxlength=${ifDefined(this.maxlength)}\n          min=${ifDefined(this.min)}\n          max=${ifDefined(this.max)}\n          step=${ifDefined(this.step)}\n          autocomplete=${ifDefined(this.autocomplete)}\n          aria-autocomplete=${ifDefined(this.ariaAutoComplete)}\n          aria-controls=${ifDefined(this.ariaControls)}\n          aria-activedescendant=${ifDefined(this.ariaActiveDescendant)}\n          pattern=${ifDefined(this.pattern)}\n          inputmode=${ifDefined(this.inputmode)}\n          aria-invalid=${this.invalid ? 'true' : 'false'}\n          ?autofocus=${this.autofocus}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .type=\"${this.type === 'password' && this.isPasswordVisible ? 'text' : this.type}\"\n          .value=${live(this.value)}\n          @change=${this.handleChange}\n          @input=${this.handleInput}\n          @invalid=${this.handleInvalid}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}\n        />\n        <slot name=\"right\" @slotchange=${this.handleRightChange}></slot>\n        ${this.makeIconClear()} ${this.makeVisibilityToggle()}\n      </div>\n    `;\n  }\n\n  handleLeftChange() {\n    const left = this.querySelector('[slot=\"left\"]');\n    if (left) this.iconLeft = true;\n  }\n\n  handleRightChange() {\n    const right = this.querySelector('[slot=\"right\"]');\n    if (right) this.iconRight = true;\n  }\n\n  makeIconClear() {\n    if (this.type === 'search' && this.value !== '') {\n      return html`\n        <kemet-icon-bootstrap class=\"search right\" icon=\"x-lg\" @click=${() => this.handleClear()}></kemet-icon-bootstrap>\n      `;\n    }\n\n    return null;\n  }\n\n  makeVisibilityToggle() {\n    if (this.type === EnumInputTypes.Password) {\n      this.iconRight = true;\n      return html`<kemet-icon-bootstrap\n        class=\"eye right\"\n        icon=\"${this.isPasswordVisible ? 'eye' : 'eye-slash'}\"\n        @click=${() => this.togglePasswordVisibility()}\n      ></kemet-icon-bootstrap>`;\n    }\n\n    return null;\n  }\n\n  /**\n   * Handles when the input receives focus\n   * @private\n   */\n  handleFocus() {\n    this.focused = true;\n    emitEvent(this, 'kemet-focus', this);\n  }\n\n  /**\n   * Handles when the input loses focus\n   * @private\n   */\n  handleBlur() {\n    if (this.validateOnBlur && this.form) {\n      this.input?.reportValidity();\n      this.validity = this.input?.validity;\n    }\n\n    this.focused = false;\n    emitEvent(this, 'kemet-blur', this);\n  }\n\n  /**\n   * Handles when the input changes value\n   * @private\n   */\n  handleChange(event: Event) {\n    this.value = this.input.value;\n\n    if (this.input.checkValidity() && this.checkLimitValidity() && this.status !== EnumStatuses.Success) {\n      this.invalid = false;\n      this.status = EnumStatuses.Standard;\n      this.validity = this.input.validity;\n\n      emitEvent(this, 'kemet-status-change', {\n        status: EnumStatuses.Standard,\n        validity: this.input.validity,\n        element: this,\n        value: (event.target as HTMLInputElement).value,\n      });\n    }\n  }\n\n  /**\n   * Handles when the input receives input\n   * @private\n   */\n  handleInput(event: InputEvent) {\n    this.value = this.input.value;\n    emitEvent(this, 'kemet-input', {\n      status: this.status,\n      validity: this.input.validity,\n      element: event.target as HTMLInputElement,\n      value: (event.target as HTMLInputElement).value,\n    });\n  }\n\n  /**\n   * Handles when the input has an error\n   * @private\n   */\n  handleInvalid(event: Event) {\n    this.validity = this.input?.validity;\n\n    if (this.validateOnBlur) {\n      this.invalid = true;\n      this.status = EnumStatuses.Error;\n\n      emitEvent(this, 'kemet-status-change', {\n        status: EnumStatuses.Error,\n        validity: this.input?.validity,\n        element: this,\n        value: (event.target as HTMLInputElement).value,\n      });\n    }\n  }\n\n  handleStatus(event: CustomEvent) {\n    this.status = event.detail.status;\n  }\n\n  /**\n   * Toggles password visibility\n   * @private\n   */\n  togglePasswordVisibility() {\n    this.isPasswordVisible = !this.isPasswordVisible;\n  }\n\n  /**\n   * Handles the clear button for search\n   * @private\n   */\n  handleClear() {\n    this.value = '';\n    emitEvent(this, 'kemet-input', {\n      status: this.status,\n      validity: this.input.validity,\n      element: this,\n      value: '',\n    });\n  }\n\n  /**\n   * Checks the validity of the character limit for the count component\n   * @public\n   * @method checkLimitValidity\n   * @returns {boolean}\n   */\n  checkLimitValidity(): boolean {\n    if (this.field) {\n      const count = this.field.querySelector('kemet-count') as KemetCount;\n      if (count) {\n        return this.value.length < count.limit;\n      }\n    }\n\n    return true;\n  }\n\n\n  /**\n   * Checks the validity of the standard input\n   * @public\n   * @method checkValidity\n   * @returns {boolean}\n   */\n  checkValidity(): boolean {\n    return this.input?.checkValidity();\n  }\n\n  /**\n   * Focuses the standard input\n   * @public\n   * @method focus\n   * @returns {void}\n   */\n  focus(): void {\n    this.input?.focus();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-input': KemetInput\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesBase = css`\n  :host {\n    --kemet-input-height: 50px;\n    --kemet-input-padding: 0.5rem 1rem;\n    --kemet-input-border: 1px solid rgb(var(--kemet-color-foreground));\n    --kemet-input-border-color-error: 1px solid rgb(var(--kemet-color-error));\n    --kemet-input-border-color-success: 1px solid rgb(var(--kemet-color-success));\n    --kemet-input-border-color-warning: 1px solid rgb(var(--kemet-color-warning));\n    --kemet-input-icon-left-padding: 3rem;\n    --kemet-input-icon-right-padding: 3rem;\n    --kemet-input-border-radius-rounded: 0;\n    --kemet-input-border-filled: none;\n    --kemet-input-color-filled: rgb(var(--kemet-color-white));\n    --kemet-input-background-color-filled: rgb(var(--kemet-color-primary));\n    --kemet-input-color-filled: rgb(var(--kemet-color-white));\n    --kemet-input-background-color-error: rgb(var(--kemet-color-error));\n    --kemet-input-background-color-success: rgb(var(--kemet-color-success));\n    --kemet-input-background-color-warning: rgb(var(--kemet-color-warning));\n\n    position: relative;\n    display: block;\n  }\n\n  input {\n    color: rgb(var(--kemet-color-text));\n    display: block;\n    font-size: 1rem;\n    width: 100%;\n    height: var(--kemet-input-height);\n    padding: var(--kemet-input-padding);\n    border: var(--kemet-input-border);\n    appearance: none;\n    box-sizing: border-box;\n    background-color: transparent;\n    border-radius: var(--kemet-input-border-radius-rounded);\n  }\n\n  input[type='color'] {\n    min-width: 10rem;\n  }\n\n  input[type='search']::-webkit-search-decoration,\n  input[type='search']::-webkit-search-cancel-button,\n  input[type='search']::-webkit-search-results-button,\n  input[type='search']::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  :host([status='error']) input {\n    border: var(--kemet-input-border-color-error);\n  }\n\n  :host([status='success']) input {\n    border: var(--kemet-input-border-color-success);\n  }\n\n  :host([status='warning']) input {\n    border: var(--kemet-input-border-color-warning);\n  }\n\n  :host([disabled]) input {\n    opacity: 0.5;\n  }\n\n  :host([icon-left]) input {\n    padding-left: var(--kemet-input-icon-left-padding);\n  }\n\n  :host([icon-right]) input {\n    padding-right: var(--kemet-input-icon-right-padding);\n  }\n\n  :host([rounded]) input {\n    --kemet-input-border-radius-rounded: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded='sm']) input {\n    --kemet-input-border-radius-rounded: var(--kemet-border-radius-sm);\n  }\n\n  :host([rounded='lg']) input {\n    --kemet-input-border-radius-rounded: var(--kemet-border-radius-lg);\n  }\n\n  :host([rounded='xl']) input {\n    --kemet-input-border-radius-rounded: var(--kemet-border-radius-xl);\n  }\n\n  :host([rounded='circle']) input {\n    --kemet-input-border-radius-rounded: var(--kemet-border-radius-circle);\n  }\n\n  :host([rounded='pill']) input {\n    --kemet-input-border-radius-rounded: var(--kemet-border-radius-pill);\n  }\n\n  :host([filled]) input {\n    border: var(--kemet-input-border-filled);\n    color: var(--kemet-input-color-filled);\n    background-color: var(--kemet-input-background-color-filled);\n  }\n\n  :host([filled]) kemet-icon,\n  :host([filled]) input::placeholder {\n    color: var(--kemet-input-color-filled);\n  }\n\n  :host([status='error'][filled]) input {\n    background-color: var(--kemet-input-background-color-error);\n  }\n\n  :host([status='success'][filled]) input {\n    background-color: var(--kemet-input-background-color-success);\n  }\n\n  :host([status='warning'][filled]) input {\n    background-color: var(--kemet-input-background-color-warning);\n  }\n\n  kemet-icon-bootstrap,\n  ::slotted(kemet-icon-bootstrap) {\n    color: rgb(var(--kemet-color-text));\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  kemet-icon-bootstrap.left,\n  :host([icon-left]) ::slotted(kemet-icon-bootstrap) {\n    left: 1rem;\n  }\n\n  kemet-icon-bootstrap.right,\n  :host([icon-right]) ::slotted(kemet-icon-bootstrap) {\n    right: 1rem;\n  }\n\n  kemet-icon-bootstrap.eye,\n  kemet-icon-bootstrap.search {\n    cursor: pointer;\n  }\n\n  :host([status='error']) ::slotted(kemet-icon-bootstrap) {\n    color: rgb(var(--kemet-color-error));\n  }\n\n  :host([status='warning']) ::slotted(kemet-icon-bootstrap) {\n    color: rgb(var(--kemet-color-error));\n  }\n\n  :host([status='success']) ::slotted(kemet-icon-bootstrap) {\n    color: rgb(var(--kemet-color-success));\n  }\n`;\n"],"mappings":"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","names":["EnumInputTypes","EnumAriaAutoComplete","EnumAutoComplete","EnumInputModes"]}