kemet-ui 1.3.1 → 2.0.0

package/dist/components/kemet-input/kemet-input.js

@@ -1,370 +1,102 @@
-import { html, css, LitElement } from 'lit';
+import { __decorate } from "tslib";
+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';
-import { FormSubmitController } from '../../utilities/controllers/forms.js';
-
-export default class KemetInput extends LitElement {
-  static get styles() {
-    return [
-      css`
-        :host {
-          position: relative;
-          display: block;
-        }
-
-        input {
-          display: block;
-          font-size: 1rem;
-          width: 100%;
-          height: var(--kemet-input-height, 50px);
-          padding: var(--kemet-input-padding, 0.5rem 1rem);
-          border: var(--kemet-input-border, 1px solid var(--kemet-color-primary));
-          appearance: none;
-          box-sizing: border-box;
-        }
-
-        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, 1px solid var(--kemet-color-error));
-        }
-
-        :host([status='success']) input {
-          border: var(--kemet-input-border-color-success, 1px solid var(--kemet-color-success));
-        }
-
-        :host([status='warning']) input {
-          border: var(--kemet-input-border-color-warning, 1px solid var(--kemet-color-warning));
-        }
-
-        :host([disabled]) input {
-          opacity: 0.5;
-        }
-
-        :host([icon-left]) input {
-          padding-left: var(--kemet-input-icon-left-padding, 3rem);
-        }
-
-        :host([icon-right]) input {
-          padding-right: var(--kemet-input-icon-right-padding, 3rem);
-        }
-
-        :host([rounded]) input {
-          border-radius: var(--kemet-input-border-radius-rounded, var(--kemet-border-radius));
-        }
-
-        :host([filled]) input {
-          border: var(--kemet-input-border-filled, none);
-          color: var(--kemet-input-color-filled, var(--kemet-color-white));
-          background-color: var(--kemet-input-background-color-filled, var(--kemet-color-primary));
-        }
-
-        :host([filled]) kemet-icon,
-        :host([filled]) input::placeholder {
-          color: var(--kemet-input-color-filled, var(--kemet-color-white));
-        }
-
-        :host([status='error'][filled]) input {
-          background-color: var(--kemet-input-background-color-error, var(--kemet-color-error));
-        }
-
-        :host([status='success'][filled]) input {
-          background-color: var(--kemet-input-background-color-success, var(--kemet-color-success));
-        }
-
-        :host([status='warning'][filled]) input {
-          background-color: var(--kemet-input-background-color-warning, var(--kemet-color-warning));
-        }
-
-        kemet-icon {
-          color: var(--kemet-color-primary);
-          position: absolute;
-          top: 50%;
-          transform: translateY(-50%);
-        }
-
-        kemet-icon.left {
-          left: 1rem;
-        }
-
-        kemet-icon.right {
-          right: 1rem;
-        }
-
-        kemet-icon.eye,
-        kemet-icon.search {
-          cursor: pointer;
-        }
-
-        :host([status='error']) kemet-icon {
-          color: var(--kemet-color-error);
-        }
-
-        :host([status='warning']) kemet-icon {
-          color: var(--kemet-color-error);
-        }
-
-        :host([status='success']) kemet-icon {
-          color: var(--kemet-color-success);
+import { FormSubmitController } from '../../utilities/controllers/forms';
+import { emitEvent } from '../../utilities/misc/events';
+import { stylesBase } from './styles';
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-input
+ * @summary An enhanced input element.
+ *
+ * @prop {string} slug - Used for the id of the input. Should match the slug used in a control if applicable.
+ * @prop {string} name - The name of the input
+ * @prop {string} placeholder - The placeholder attribute
+ * @prop {string} minlength - The minlength attribute
+ * @prop {string} maxlength - The maxlength attribute
+ * @prop {string} min - The min attribute
+ * @prop {string} max - The max attribute
+ * @prop {string} step - The step attribute
+ * @prop {string} autocomplete - The autocomplete attribute
+ * @prop {string} pattern - The pattern attribute
+ * @prop {string} inputmode - The input mode attribute
+ * @prop {boolean} autofocus - The autofocus attribute
+ * @prop {boolean} disabled - The disable attribute
+ * @prop {boolean} readonly - The readonly attribute
+ * @prop {boolean} required - The required attribute
+ * @prop {string} type - The type of input
+ * @prop {string} value - The input's value
+ * @prop {boolean} invalid - States whether or not the input is invalid
+ * @prop {string} status - The status of the input
+ * @prop {boolean} validateOnBlur - Activates validation on blur
+ * @prop {string} ariaAutoComplete - Aria Autocomplete
+ * @prop {string} ariaControls - Aria Controls
+ * @prop {string} ariaActiveDescendant - Aria Active Descendant
+ * @prop {boolean} rounded - Displays rounded corners
+ * @prop {boolean} filled - Displays a filled input box
+ * @prop {string} iconRight - Custom Icon to the right of the input
+ * @prop {string} iconLeft - Custom Icon to the left of the input
+ * @prop {number} iconSize - Size of the icons
+ * @prop {object} validity - The HTML5 validity object.
+ * @prop {boolean} isPasswordVisible - Manages password visibility
+ * @prop {string} inputType - Input Type of keypress handled through handleInput(e)
+ * @prop {boolean} focused - Determines if the input is focused
+ *
+ * @csspart input
+ *
+ * @cssproperty --kemet-input-height - The height of the input. Default: 50px.
+ * @cssproperty -kemet-input-padding - The padding on the input. Default: 0.5rem 1rem.
+ * @cssproperty -kemet-input-border - The border of the input. Default: 1px solid var(--kemet-color-primary).
+ * @cssproperty -kemet-input-border-color-error -  The border of the error state. Default: 1px solid var(--kemet-color-error).
+ * @cssproperty -kemet-input-border-color-success - The border of the success state. Default: 1px solid var(--kemet-color-success).
+ * @cssproperty -kemet-input-border-color-warning - The border of the warning state. Default: 1px solid var(--kemet-color-warning) |
+ * @cssproperty -kemet-input-icon-left-padding - The icon-left padding. Default: 3rem.
+ * @cssproperty -kemet-input-icon-right-padding - The icon-right padding. Default: 3rem.
+ * @cssproperty -kemet-input-border-radius-rounded - The border radius on rounded. Default: var(--kemet-border-radius).
+ * @cssproperty -kemet-input-border-filled - The border on filled. Default: none.
+ * @cssproperty -kemet-input-color-filled - The color on filled. Default: var(--kemet-color-white).
+ * @cssproperty -kemet-input-background-color-filled - The background-color on filled. Default: var(--kemet-color-primary).
+ * @cssproperty -kemet-input-background-color-error - The error state background color. Default: var(--kemet-color-error).
+ * @cssproperty -kemet-input-background-color-success - The success state background color. Default: var(--kemet-color-success).
+ * @cssproperty -kemet-input-background-color-warning - The warning state background color. Default: var(--kemet-color-warning).
+ *
+ * @event kemet-input-focused - Fires when the input receives and loses focus
+ * @event kemet-input-status 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.
+ * Use the validity object to support custom validation messages.
+ * @event kemet-input-input - Fires when the input receives input
+ *
+ */
+let KemetInput = class KemetInput extends LitElement {
+    constructor() {
+        super();
+        this.name = 'input';
+        this.type = 'text';
+        this.value = '';
+        this.status = 'standard';
+        this.validateOnBlur = false;
+        this.iconSize = 20;
+        this.isPasswordVisible = false;
+        this.focused = false;
+        /** @internal */
+        this.formSubmitController = new FormSubmitController(this);
+    }
+    ;
+    firstUpdated() {
+        // elements
+        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('fmc-password-status', event => this.handleStatus(event));
         }
-      `,
-    ];
-  }
-
-  static get properties() {
-    return {
-      /**
-       * Used for the id of the input. Should match the slug used in a control if applicable.
-       */
-      slug: {
-        type: String,
-      },
-      /**
-       * The name of the input
-       */
-      name: {
-        type: String,
-      },
-      /**
-       * The placeholder attribute
-       */
-      placeholder: {
-        type: String,
-      },
-      /**
-       * The minlength attribute
-       */
-      minlength: {
-        type: String,
-      },
-      /**
-       * The maxlength attribute
-       */
-      maxlength: {
-        type: String,
-      },
-      /**
-       * The min attribute
-       */
-      min: {
-        type: String,
-      },
-      /**
-       * The max attribute
-       */
-      max: {
-        type: String,
-      },
-      /**
-       * The step attribute
-       */
-      step: {
-        type: String,
-      },
-      /**
-       * The autocomplete attribute
-       */
-      autocomplete: {
-        type: String,
-      },
-      /**
-       * The pattern attribute
-       */
-      pattern: {
-        type: String,
-      },
-      /**
-       * The input mode attribute
-       */
-      inputmode: {
-        type: String,
-      },
-      /**
-       * The autofocus attribute
-       */
-      autofocus: {
-        type: Boolean,
-      },
-      /**
-       * The disable attribute
-       */
-      disabled: {
-        type: Boolean,
-        reflect: true,
-      },
-      /**
-       * The readonly attribute
-       */
-      readonly: {
-        type: Boolean,
-      },
-      /**
-       * The required attribute
-       */
-      required: {
-        type: Boolean,
-        reflect: true,
-      },
-      /**
-       * The type of input
-       */
-      type: {
-        type: String,
-      },
-      /**
-       * The input's value
-       */
-      value: {
-        type: String,
-      },
-      /**
-       * States whether or not the input is invalid
-       */
-      invalid: {
-        type: Boolean,
-        reflect: true,
-      },
-      /**
-       * The status of the input
-       */
-      status: {
-        type: String,
-        reflect: true,
-      },
-      /**
-       * Activates validation on blur
-       */
-      validateOnBlur: {
-        type: Boolean,
-        attribute: 'validate-on-blur',
-      },
-      /**
-       * Aria Autocomplete
-       */
-      ariaAutoComplete: {
-        type: String,
-        attribute: 'aria-autocomplete',
-      },
-      /**
-       * Aria Controls
-       */
-      ariaControls: {
-        type: String,
-        attribute: 'aria-controls',
-      },
-      /**
-       * Aria Active Descendant
-       */
-      ariaActiveDescendant: {
-        type: String,
-        attribute: 'aria-activedescendant',
-      },
-      /**
-       * Displays rounded corners
-       */
-      rounded: {
-        type: Boolean,
-        reflect: true,
-      },
-      /**
-       * Displays a filled input box
-       */
-      filled: {
-        type: Boolean,
-        reflect: true,
-      },
-      /**
-       * Custom Icon to the right of the input
-       */
-      iconRight: {
-        type: String,
-        reflect: true,
-        attribute: 'icon-right',
-      },
-      /**
-       * Custom Icon to the left of the input
-       */
-      iconLeft: {
-        type: String,
-        reflect: true,
-        attribute: 'icon-left',
-      },
-      /**
-       * Size of the icons
-       */
-      iconSize: {
-        type: Number,
-      },
-      /**
-       * The HTML5 validity object.
-       */
-      validity: {
-        type: Object,
-      },
-      /**
-       * Manages password visibility
-       */
-      isPasswordVisible: {
-        type: Boolean,
-      },
-      /**
-       * Input Type of keypress handled through handleInput(e)
-       */
-      inputType: {
-        type: String,
-      },
-      /**
-       * Determines if the input is focused
-       */
-      focused: {
-        type: Boolean,
-        reflect: true,
-      },
-    };
-  }
-
-  constructor() {
-    super();
-
-    // managed properties
-    this.name = 'input';
-    this.type = 'text';
-    this.value = '';
-    this.status = 'standard';
-    this.iconSize = 20;
-    this.validateOnBlur = false;
-    this.isPasswordVisible = false;
-    this.focused = false;
-
-    /**
-     * Used only for form reactive controller
-     */
-    this.formSubmitController = new FormSubmitController(this);
-  }
-
-  firstUpdated() {
-    // elements
-    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('fmc-password-status', event => this.handleStatus(event));
     }
-  }
-
-  render() {
-    return html`
+    render() {
+        return html `
       <div>
         ${this.makeIconLeft()}
         <input
@@ -399,263 +131,287 @@ export default class KemetInput extends LitElement {
         ${this.makeIconRight()} ${this.makeIconClear()} ${this.makeVisibilityToggle()}
       </div>
     `;
-  }
-
-  /**
-   * Makes the right icon
-   * @private
-   * @returns {templateResult} A right icon
-   */
-  makeIconRight() {
-    if (this.iconRight) {
-      return html`
+    }
+    /**
+     * Makes the right icon
+     * @private
+     * @returns {templateResult} A right icon
+     */
+    makeIconRight() {
+        if (this.iconRight) {
+            return html `
         <kemet-icon class="right" icon="${this.iconRight}" size="${this.iconSize ? this.iconSize : 20}"></kemet-icon>
       `;
+        }
+        return null;
     }
-
-    return null;
-  }
-
-  /**
-   * Makes the left icon
-   * @private
-   * @returns {templateResult} A left icon
-   */
-  makeIconLeft() {
-    if (this.iconLeft) {
-      return html`
+    /**
+     * Makes the left icon
+     * @private
+     * @returns {templateResult} A left icon
+     */
+    makeIconLeft() {
+        if (this.iconLeft) {
+            return html `
         <kemet-icon class="left" icon="${this.iconLeft}" size="${this.iconSize ? this.iconSize : 16}"></kemet-icon>
       `;
+        }
+        return null;
     }
-
-    return null;
-  }
-
-  /**
-   * Makes a clear icon for search.
-   * @private
-   * @returns {templateResult} A search icon
-   */
-  makeIconClear() {
-    if (this.type === 'search' && this.value !== '') {
-      return html`
+    /**
+     * Makes a clear icon for search.
+     * @private
+     * @returns {templateResult} A search icon
+     */
+    makeIconClear() {
+        if (this.type === 'search' && this.value !== '') {
+            return html `
         <kemet-icon class="search right" icon="x-lg" size="${this.iconSize}" @click=${() => this.handleClear()}></kemet-icon>
       `;
+        }
+        return null;
     }
-
-    return null;
-  }
-
-  /**
-   * Makes a password visibility toggle button
-   * @returns {templateResult} A mask or unmask icon
-   */
-  makeVisibilityToggle() {
-    if (this.type === 'password') {
-      return html`<kemet-icon
+    /**
+     * Makes a password visibility toggle button
+     * @returns {templateResult} A mask or unmask icon
+     */
+    makeVisibilityToggle() {
+        if (this.type === 'password') {
+            return html `<kemet-icon
         class="eye right"
         icon="${this.setPasswordIcon()}"
         @click=${() => this.togglePasswordVisibility()}
       ></kemet-icon>`;
+        }
+        return null;
+    }
+    setPasswordIcon() {
+        if (this.isPasswordVisible) {
+            return 'eye';
+        }
+        return 'eye-slash';
+    }
+    /**
+     * Handles when the input receives focus
+     * @private
+     */
+    handleFocus() {
+        this.focused = true;
+        emitEvent(this, 'kemet-input-focused', true);
     }
-
-    return null;
-  }
-
-  setPasswordIcon() {
-    if (this.isPasswordVisible) {
-      return 'eye';
+    /**
+     * Handles when the input loses focus
+     * @private
+     */
+    handleBlur() {
+        var _a, _b;
+        if (this.validateOnBlur && this.form && !this.form.noValidate) {
+            (_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity();
+            this.validity = (_b = this.input) === null || _b === void 0 ? void 0 : _b.validity;
+        }
+        this.focused = false;
+        emitEvent(this, 'kemet-input-focused', false);
     }
-
-    return 'eye-slash';
-  }
-
-  /**
-   * Handles when the input receives focus
-   * @private
-   */
-  handleFocus() {
-    this.focused = true;
-
     /**
-     * Fires when the input receives and loses focus
+     * Handles when the input changes value
+     * @private
      */
-    this.dispatchEvent(
-      new CustomEvent('kemet-input-focused', {
-        bubbles: true,
-        composed: true,
-        detail: true,
-      }),
-    );
-  }
-
-  /**
-   * Handles when the input loses focus
-   * @private
-   */
-  handleBlur() {
-    if (this.validateOnBlur && this.form && !this.form.noValidate) {
-      this.input.checkValidity();
-      this.validity = this.input.validity;
+    handleChange() {
+        this.value = this.input.value;
+        if (this.input.checkValidity() && this.checkLimitValidity() && this.status !== 'success') {
+            this.invalid = false;
+            this.status = 'standard';
+            this.validity = this.input.validity;
+            emitEvent(this, 'kemet-input-status', {
+                status: 'standard',
+                validity: this.input.validity,
+                element: this,
+            });
+        }
     }
-
-    this.focused = false;
-
     /**
-     * Fires when the input receives and loses focus
+     * Handles when the input receives input
+     * @private
      */
-    this.dispatchEvent(
-      new CustomEvent('kemet-input-focused', {
-        bubbles: true,
-        composed: true,
-        detail: false,
-      }),
-    );
-  }
-
-  /**
-   * Handles when the input changes value
-   * @private
-   */
-  handleChange() {
-    this.value = this.input.value;
-
-    if (this.input.checkValidity() && this.checkLimitValidity() && this.status !== 'success') {
-      this.invalid = false;
-      this.status = 'standard';
-      this.validity = this.input.validity;
-
-      /**
-       * 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.
-       * Use the validity object to support custom validation messages.
-       */
-      this.dispatchEvent(
-        new CustomEvent('kemet-input-status', {
-          bubbles: true,
-          composed: true,
-          detail: {
-            status: 'standard',
-            validity: this.input.validity,
-            element: this,
-          },
-        }),
-      );
+    handleInput() {
+        this.value = this.input.value;
+        emitEvent(this, 'kemet-input-input', this.value);
+    }
+    /**
+     * Handles when the input has an error
+     * @private
+     */
+    handleInvalid() {
+        var _a, _b;
+        this.validity = (_a = this.input) === null || _a === void 0 ? void 0 : _a.validity;
+        if (this.validateOnBlur) {
+            this.invalid = true;
+            this.status = 'error';
+            emitEvent(this, 'kemet-input-status', {
+                status: 'error',
+                validity: (_b = this.input) === null || _b === void 0 ? void 0 : _b.validity,
+                element: this,
+            });
+        }
+    }
+    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-input', this.value);
+    }
+    /**
+     * Checks the validity of the character limit for the count component
+     * @private
+     * @returns {boolean}
+     */
+    checkLimitValidity() {
+        if (this.field) {
+            const count = this.field.querySelector('kemet-count');
+            if (count) {
+                return this.value.length < count.limit;
+            }
+        }
+        return true;
     }
-  }
-
-  /**
-   * Handles when the input receives input
-   * @private
-   */
-  handleInput() {
-    this.value = this.input.value;
-
     /**
-     * Fires when the input receives input
+     * Checks the validity of the standard input
+     * @public
+     * @returns {boolean}
      */
-    this.dispatchEvent(
-      new CustomEvent('kemet-input-input', {
-        bubbles: true,
-        composed: true,
-        detail: this.value,
-      }),
-    );
-  }
-
-  /**
-   * Handles when the input has an error
-   * @private
-   */
-  handleInvalid() {
-    this.validity = this.input.validity;
-
-    if (this.validateOnBlur) {
-      this.invalid = true;
-      this.status = 'error';
-
-      /**
-       * Fires when there's a change in status
-       */
-      this.dispatchEvent(
-        new CustomEvent('kemet-input-status', {
-          bubbles: true,
-          composed: true,
-          detail: {
-            status: 'error',
-            validity: this.input.validity,
-            element: this,
-          },
-        }),
-      );
+    checkValidity() {
+        var _a;
+        return (_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity();
     }
-  }
-
-  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 = '';
-
     /**
-     * Fires when the input receives input
+     * Focuses the standard input
+     * @public
      */
-    this.dispatchEvent(
-      new CustomEvent('kemet-input-input', {
-        bubbles: true,
-        composed: true,
-        detail: this.value,
-      }),
-    );
-  }
-
-  /**
-   * Checks the validity of the character limit for the count component
-   * @private
-   * @returns {boolean}
-   */
-  checkLimitValidity() {
-    if (this.field) {
-      const count = this.field.querySelector('kemet-count');
-      if (count) {
-        return this.value.length < count.limit;
-      }
+    focus() {
+        var _a;
+        (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus();
     }
-
-    return true;
-  }
-
-  /**
-   * Checks the validity of the standard input
-   * @public
-   * @returns {boolean}
-   */
-  checkValidity() {
-    return this.input.checkValidity();
-  }
-
-  /**
-   * Focuses the standard input
-   * @public
-   */
-  focus() {
-    this.input.focus();
-  }
-}
-
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-input') || customElements.define('kemet-input', KemetInput);
+};
+KemetInput.styles = [stylesBase];
+__decorate([
+    property({ type: String })
+], KemetInput.prototype, "slug", void 0);
+__decorate([
+    property({ type: String })
+], KemetInput.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], KemetInput.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Number })
+], KemetInput.prototype, "minlength", void 0);
+__decorate([
+    property({ type: Number })
+], KemetInput.prototype, "maxlength", void 0);
+__decorate([
+    property({ type: String })
+], KemetInput.prototype, "min", void 0);
+__decorate([
+    property({ type: String })
+], KemetInput.prototype, "max", void 0);
+__decorate([
+    property({ type: Number })
+], KemetInput.prototype, "step", void 0);
+__decorate([
+    property({ type: String })
+], KemetInput.prototype, "autocomplete", void 0);
+__decorate([
+    property({ type: String })
+], KemetInput.prototype, "pattern", void 0);
+__decorate([
+    property({ type: String })
+], KemetInput.prototype, "inputmode", void 0);
+__decorate([
+    property({ type: Boolean })
+], KemetInput.prototype, "autofocus", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetInput.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], KemetInput.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetInput.prototype, "required", void 0);
+__decorate([
+    property({ type: String })
+], KemetInput.prototype, "type", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], KemetInput.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetInput.prototype, "invalid", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], KemetInput.prototype, "status", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'validate-on-blur' })
+], KemetInput.prototype, "validateOnBlur", void 0);
+__decorate([
+    property({ type: String, attribute: 'aria-autocomplete' })
+], KemetInput.prototype, "ariaAutoComplete", void 0);
+__decorate([
+    property({ type: String, attribute: 'aria-controls' })
+], KemetInput.prototype, "ariaControls", void 0);
+__decorate([
+    property({ type: String, attribute: 'aria-activedescendant' })
+], KemetInput.prototype, "ariaActiveDescendant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetInput.prototype, "rounded", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetInput.prototype, "filled", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'icon-right' })
+], KemetInput.prototype, "iconRight", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'icon-left' })
+], KemetInput.prototype, "iconLeft", void 0);
+__decorate([
+    property({ type: Number })
+], KemetInput.prototype, "iconSize", void 0);
+__decorate([
+    property({ type: Object })
+], KemetInput.prototype, "validity", void 0);
+__decorate([
+    property({ type: Boolean })
+], KemetInput.prototype, "isPasswordVisible", void 0);
+__decorate([
+    property({ type: String })
+], KemetInput.prototype, "inputType", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetInput.prototype, "focused", void 0);
+__decorate([
+    state()
+], KemetInput.prototype, "field", void 0);
+__decorate([
+    state()
+], KemetInput.prototype, "form", void 0);
+__decorate([
+    state()
+], KemetInput.prototype, "input", void 0);
+KemetInput = __decorate([
+    customElement('kemet-input')
+], KemetInput);
+export default KemetInput;
+//# sourceMappingURL=kemet-input.js.map