kemet-ui 1.4.0 → 2.0.0

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

@@ -1,9 +1,11 @@
-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';
-import { emitEvent } from '../../utilities/misc/events.js';
-
+import { FormSubmitController } from '../../utilities/controllers/forms';
+import { emitEvent } from '../../utilities/misc/events';
+import { stylesBase } from './styles';
 /**
  * @since 1.0.0
  * @status stable
@@ -68,271 +70,33 @@ import { emitEvent } from '../../utilities/misc/events.js';
  * @event kemet-input-input - Fires when the input receives input
  *
  */
-
-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);
+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 {
-      slug: {
-        type: String,
-      },
-      name: {
-        type: String,
-      },
-      placeholder: {
-        type: String,
-      },
-      minlength: {
-        type: String,
-      },
-      maxlength: {
-        type: String,
-      },
-      min: {
-        type: String,
-      },
-      max: {
-        type: String,
-      },
-      step: {
-        type: String,
-      },
-      autocomplete: {
-        type: String,
-      },
-      pattern: {
-        type: String,
-      },
-      inputmode: {
-        type: String,
-      },
-      autofocus: {
-        type: Boolean,
-      },
-      disabled: {
-        type: Boolean,
-        reflect: true,
-      },
-      readonly: {
-        type: Boolean,
-      },
-      required: {
-        type: Boolean,
-        reflect: true,
-      },
-      type: {
-        type: String,
-      },
-      value: {
-        type: String,
-      },
-      invalid: {
-        type: Boolean,
-        reflect: true,
-      },
-      status: {
-        type: String,
-        reflect: true,
-      },
-      validateOnBlur: {
-        type: Boolean,
-        attribute: 'validate-on-blur',
-      },
-      ariaAutoComplete: {
-        type: String,
-        attribute: 'aria-autocomplete',
-      },
-      ariaControls: {
-        type: String,
-        attribute: 'aria-controls',
-      },
-      ariaActiveDescendant: {
-        type: String,
-        attribute: 'aria-activedescendant',
-      },
-      rounded: {
-        type: Boolean,
-        reflect: true,
-      },
-      filled: {
-        type: Boolean,
-        reflect: true,
-      },
-      iconRight: {
-        type: String,
-        reflect: true,
-        attribute: 'icon-right',
-      },
-      iconLeft: {
-        type: String,
-        reflect: true,
-        attribute: 'icon-left',
-      },
-      iconSize: {
-        type: Number,
-      },
-      validity: {
-        type: Object,
-      },
-      isPasswordVisible: {
-        type: Boolean,
-      },
-      inputType: {
-        type: String,
-      },
-      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;
-
-    /** @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));
     }
-  }
-
-  render() {
-    return html`
+    render() {
+        return html `
       <div>
         ${this.makeIconLeft()}
         <input
@@ -367,202 +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';
     }
-
-    return null;
-  }
-
-  setPasswordIcon() {
-    if (this.isPasswordVisible) {
-      return 'eye';
+    /**
+     * Handles when the input receives focus
+     * @private
+     */
+    handleFocus() {
+        this.focused = true;
+        emitEvent(this, 'kemet-input-focused', true);
     }
-
-    return 'eye-slash';
-  }
-
-  /**
-   * Handles when the input receives focus
-   * @private
-   */
-  handleFocus() {
-    this.focused = true;
-    emitEvent(this, 'kemet-input-focused', 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;
+    /**
+     * 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);
+    }
+    /**
+     * 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;
+            emitEvent(this, 'kemet-input-status', {
+                status: 'standard',
+                validity: this.input.validity,
+                element: this,
+            });
+        }
+    }
+    /**
+     * Handles when the input receives input
+     * @private
+     */
+    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;
     }
-
-    this.focused = false;
-    emitEvent(this, 'kemet-input-focused', 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;
-
-      emitEvent(this, 'kemet-input-status', {
-        status: 'standard',
-        validity: this.input.validity,
-        element: this,
-      });
+    /**
+     * 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;
-    emitEvent(this, 'kemet-input-input', 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';
-
-      emitEvent(this, 'kemet-input-status', {
-        status: 'error',
-        validity: this.input.validity,
-        element: this,
-      });
+    /**
+     * Checks the validity of the standard input
+     * @public
+     * @returns {boolean}
+     */
+    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 = '';
-    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;
-      }
+    /**
+     * Focuses the standard input
+     * @public
+     */
+    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