kemet-ui 3.0.1 → 3.1.0

package/dist/components/kemet-icon/spec.js

@@ -0,0 +1,69 @@
+import { html, render } from 'lit';
+import { expect } from '@wdio/globals';
+import { waitFor } from '@testing-library/dom';
+import './kemet-icon';
+describe('Icon', () => {
+    const templates = {
+        default: html `<kemet-icon></kemet-icon>`,
+        fontAwesomeBrands: html `<kemet-icon set="font-awesome-brands"></kemet-icon>`,
+        fontAwesomeRegular: html `<kemet-icon set="font-awesome-regular"></kemet-icon>`,
+        fontAwesomeSolid: html `<kemet-icon set="font-awesome-solid"></kemet-icon>`,
+        invalidSet: html `<kemet-icon set="invalid"></kemet-icon>`,
+        inline: html `
+      <kemet-icon>
+        <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+          <path d="M 16 2 C 13.25 2 11 4.25 11 7 C 11 8.957031 12.113281 10.875 13.15625 12.4375 C 13.289063 12.640625 13.429688 12.8125 13.5625 13 L 8 13 L 8 16.15625 L 9.15625 16 L 14.90625 15.1875 L 14 28.9375 L 13.9375 30 L 18.0625 30 L 18 28.9375 L 17.09375 15.1875 L 22.84375 16 L 24 16.15625 L 24 13 L 18.4375 13 C 18.570313 12.8125 18.710938 12.640625 18.84375 12.4375 C 19.886719 10.875 21 8.957031 21 7 C 21 4.25 18.75 2 16 2 Z M 16 4 C 17.667969 4 19 5.332031 19 7 C 19 8.078125 18.113281 9.914063 17.15625 11.34375 C 16.574219 12.21875 16.367188 12.429688 16 12.875 C 15.632813 12.429688 15.425781 12.21875 14.84375 11.34375 C 13.886719 9.914063 13 8.078125 13 7 C 13 5.332031 14.332031 4 16 4 Z"></path>
+        </svg>
+      </kemet-icon>
+    `,
+        inlineText: html `
+      <kemet-icon>
+        <span>No Icon</span>
+      </kemet-icon>
+    `,
+    };
+    // TODO why is this failing
+    it.skip('displays an icon', async () => {
+        render(templates.default, document.body);
+        await waitFor(() => {
+            const svg = document.querySelector('kemet-icon').shadowRoot.querySelector('svg');
+            expect(svg).toBeTruthy();
+        });
+    });
+    it('display an inline icon', async () => {
+        render(templates.inline, document.body);
+        await waitFor(() => {
+            const svg = document.querySelector('kemet-icon').querySelector('svg');
+            expect(svg).toBeTruthy();
+        });
+    });
+    it('renders nothing when no icon is passed inline', async () => {
+        render(templates.inlineText, document.body);
+        await waitFor(() => {
+            const kemetIcon = document.querySelector('kemet-icon');
+            const hasIcon = kemetIcon.shadowRoot.querySelector('svg');
+            expect(hasIcon).toBeFalsy();
+        });
+    });
+    it('renders the font awesome brand set', () => {
+        render(templates.fontAwesomeBrands, document.body);
+        const kemetIcon = document.querySelector('kemet-icon');
+        expect(kemetIcon.set).toBe('font-awesome-brands');
+    });
+    it('renders the font awesome regular set', () => {
+        render(templates.fontAwesomeRegular, document.body);
+        const kemetIcon = document.querySelector('kemet-icon');
+        expect(kemetIcon.set).toBe('font-awesome-regular');
+    });
+    it('renders the font awesome solid set', () => {
+        render(templates.fontAwesomeSolid, document.body);
+        const kemetIcon = document.querySelector('kemet-icon');
+        expect(kemetIcon.set).toBe('font-awesome-solid');
+    });
+    it('renders default set', () => {
+        render(templates.invalidSet, document.body);
+        const kemetIcon = document.querySelector('kemet-icon');
+        expect(kemetIcon.set).toBe('invalid');
+    });
+});
+//# sourceMappingURL=spec.js.map

package/dist/components/kemet-icon/spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spec.js","sourceRoot":"","sources":["../../../src/components/kemet-icon/spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, render } from 'lit';\nimport { expect } from '@wdio/globals';\nimport { waitFor } from '@testing-library/dom';\n\nimport './kemet-icon';\n\ndescribe('Icon', () => {\n  const templates = {\n    default: html`<kemet-icon></kemet-icon>`,\n    fontAwesomeBrands: html`<kemet-icon set=\"font-awesome-brands\"></kemet-icon>`,\n    fontAwesomeRegular: html`<kemet-icon set=\"font-awesome-regular\"></kemet-icon>`,\n    fontAwesomeSolid: html`<kemet-icon set=\"font-awesome-solid\"></kemet-icon>`,\n    invalidSet: html`<kemet-icon set=\"invalid\"></kemet-icon>`,\n    inline: html`\n      <kemet-icon>\n        <svg viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M 16 2 C 13.25 2 11 4.25 11 7 C 11 8.957031 12.113281 10.875 13.15625 12.4375 C 13.289063 12.640625 13.429688 12.8125 13.5625 13 L 8 13 L 8 16.15625 L 9.15625 16 L 14.90625 15.1875 L 14 28.9375 L 13.9375 30 L 18.0625 30 L 18 28.9375 L 17.09375 15.1875 L 22.84375 16 L 24 16.15625 L 24 13 L 18.4375 13 C 18.570313 12.8125 18.710938 12.640625 18.84375 12.4375 C 19.886719 10.875 21 8.957031 21 7 C 21 4.25 18.75 2 16 2 Z M 16 4 C 17.667969 4 19 5.332031 19 7 C 19 8.078125 18.113281 9.914063 17.15625 11.34375 C 16.574219 12.21875 16.367188 12.429688 16 12.875 C 15.632813 12.429688 15.425781 12.21875 14.84375 11.34375 C 13.886719 9.914063 13 8.078125 13 7 C 13 5.332031 14.332031 4 16 4 Z\"></path>\n        </svg>\n      </kemet-icon>\n    `,\n    inlineText: html`\n      <kemet-icon>\n        <span>No Icon</span>\n      </kemet-icon>\n    `,\n  };\n\n  // TODO why is this failing\n  it.skip('displays an icon', async () => {\n    render(templates.default, document.body);\n    await waitFor(() => {\n      const svg = document.querySelector('kemet-icon').shadowRoot.querySelector('svg');\n      expect(svg).toBeTruthy();\n    });\n  });\n\n  it('display an inline icon', async () => {\n    render(templates.inline, document.body);\n    await waitFor(() => {\n      const svg = document.querySelector('kemet-icon').querySelector('svg');\n      expect(svg).toBeTruthy();\n    });\n  });\n\n  it('renders nothing when no icon is passed inline', async () => {\n    render(templates.inlineText, document.body);\n    await waitFor(() => {\n      const kemetIcon = document.querySelector('kemet-icon');\n      const hasIcon = kemetIcon.shadowRoot.querySelector('svg');\n      expect(hasIcon).toBeFalsy();\n    });\n  });\n\n  it('renders the font awesome brand set', () => {\n    render(templates.fontAwesomeBrands, document.body);\n    const kemetIcon = document.querySelector('kemet-icon');\n    expect(kemetIcon.set).toBe('font-awesome-brands');\n  });\n\n  it('renders the font awesome regular set', () => {\n    render(templates.fontAwesomeRegular, document.body);\n    const kemetIcon = document.querySelector('kemet-icon');\n    expect(kemetIcon.set).toBe('font-awesome-regular');\n  });\n\n  it('renders the font awesome solid set', () => {\n    render(templates.fontAwesomeSolid, document.body);\n    const kemetIcon = document.querySelector('kemet-icon');\n    expect(kemetIcon.set).toBe('font-awesome-solid');\n  });\n\n  it('renders default set', () => {\n    render(templates.invalidSet, document.body);\n    const kemetIcon = document.querySelector('kemet-icon');\n    expect(kemetIcon.set).toBe('invalid');\n  });\n});\n"]}

package/dist/components/kemet-input/docs/stories.d.ts

@@ -5,7 +5,7 @@ import '../../kemet-tabs/kemet-tab';
 import '../../kemet-tabs/kemet-tab-panel';
 declare const meta: Meta;
 export default meta;
-declare type Story = StoryObj;
+type Story = StoryObj;
 export declare const Standard: Story;
 export declare const Rounded: Story;
 export declare const Filled: Story;

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

@@ -91,7 +91,7 @@ let KemetInput = class KemetInput extends LitElement {
         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));
+            this.field.addEventListener('kemet-password-status', (event) => this.handleStatus(event));
         }
     }
     render() {

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

@@ -1 +1 @@
-{"version":3,"file":"kemet-input.js","sourceRoot":"","sources":["../../../src/components/kemet-input/kemet-input.ts"],"names":[],"mappings":"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","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/controllers/forms';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { KemetFieldInterface } from '../kemet-field/types';\nimport { stylesBase } from './styles';\nimport { TypeAriaAutoComplete, TypeAutoComplete, TypeStatus } from './types';\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 {string} autocomplete - The autocomplete attribute\n * @prop {string} pattern - The pattern attribute\n * @prop {string} 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 {string} ariaAutoComplete - Aria Autocomplete\n * @prop {string} ariaControls - Aria Controls\n * @prop {string} ariaActiveDescendant - Aria Active Descendant\n * @prop {boolean} 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-input-focused - Fires when the input receives and loses focus\n * @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.\n * Use the validity object to support custom validation messages.\n * @event kemet-input-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: string;\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: string = '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 = '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  rounded: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  filled: boolean;\n\n  @property({ type: String, reflect: true, attribute: 'icon-right' })\n  iconRight: string;\n\n  @property({ type: String, reflect: true, attribute: 'icon-left' })\n  iconLeft: string;\n\n  @property({ type: Number })\n  iconSize: number = 20;\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  @state()\n  field: KemetFieldInterface;\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('fmc-password-status', (event: CustomEvent) => this.handleStatus(event));\n    }\n  }\n\n  render() {\n    return html`\n      <div>\n        ${this.makeIconLeft()}\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        ${this.makeIconRight()} ${this.makeIconClear()} ${this.makeVisibilityToggle()}\n      </div>\n    `;\n  }\n\n  makeIconRight() {\n    if (this.iconRight) {\n      return html`\n        <kemet-icon class=\"right\" icon=\"${this.iconRight}\" size=\"${this.iconSize ? this.iconSize : 20}\"></kemet-icon>\n      `;\n    }\n\n    return null;\n  }\n\n  makeIconLeft() {\n    if (this.iconLeft) {\n      return html`\n        <kemet-icon class=\"left\" icon=\"${this.iconLeft}\" size=\"${this.iconSize ? this.iconSize : 16}\"></kemet-icon>\n      `;\n    }\n\n    return null;\n  }\n\n  makeIconClear() {\n    if (this.type === 'search' && this.value !== '') {\n      return html`\n        <kemet-icon class=\"search right\" icon=\"x-lg\" size=\"${this.iconSize}\" @click=${() => this.handleClear()}></kemet-icon>\n      `;\n    }\n\n    return null;\n  }\n\n  makeVisibilityToggle() {\n    if (this.type === 'password') {\n      return html`<kemet-icon\n        class=\"eye right\"\n        icon=\"${this.setPasswordIcon()}\"\n        @click=${() => this.togglePasswordVisibility()}\n      ></kemet-icon>`;\n    }\n\n    return null;\n  }\n\n  setPasswordIcon() {\n    if (this.isPasswordVisible) {\n      return 'eye';\n    }\n\n    return 'eye-slash';\n  }\n\n  /**\n   * Handles when the input receives focus\n   * @private\n   */\n  handleFocus() {\n    this.focused = true;\n    emitEvent(this, 'kemet-input-focused', true);\n  }\n\n  /**\n   * Handles when the input loses focus\n   * @private\n   */\n  handleBlur() {\n    if (this.validateOnBlur && this.form && !this.form.noValidate) {\n      this.input?.checkValidity();\n      this.validity = this.input?.validity;\n    }\n\n    this.focused = false;\n    emitEvent(this, 'kemet-input-focused', false);\n  }\n\n  /**\n   * Handles when the input changes value\n   * @private\n   */\n  handleChange() {\n    this.value = this.input.value;\n\n    if (this.input.checkValidity() && this.checkLimitValidity() && this.status !== 'success') {\n      this.invalid = false;\n      this.status = 'standard';\n      this.validity = this.input.validity;\n\n      emitEvent(this, 'kemet-input-status', {\n        status: 'standard',\n        validity: this.input.validity,\n        element: this,\n      });\n    }\n  }\n\n  /**\n   * Handles when the input receives input\n   * @private\n   */\n  handleInput() {\n    this.value = this.input.value;\n    emitEvent(this, 'kemet-input-input', this.value);\n  }\n\n  /**\n   * Handles when the input has an error\n   * @private\n   */\n  handleInvalid() {\n    this.validity = this.input?.validity;\n\n    if (this.validateOnBlur) {\n      this.invalid = true;\n      this.status = 'error';\n\n      emitEvent(this, 'kemet-input-status', {\n        status: 'error',\n        validity: this.input?.validity,\n        element: this,\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-input', this.value);\n  }\n\n  /**\n   * Checks the validity of the character limit for the count component\n   * @public\n   * @returns {boolean}\n   */\n  checkLimitValidity(): boolean {\n    if (this.field) {\n      const count = this.field.querySelector('kemet-count');\n      if (count) {\n        return this.value.length < count.limit;\n      }\n    }\n\n    return true;\n  }\n\n  /**\n   * Checks the validity of the standard input\n   * @public\n   * @returns {boolean}\n   */\n  checkValidity(): boolean {\n    return this.input?.checkValidity();\n  }\n\n  /**\n   * Focuses the standard input\n   * @public\n   */\n  focus() {\n    this.input?.focus();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-input': KemetInput\n  }\n}\n"]}
+{"version":3,"file":"kemet-input.js","sourceRoot":"","sources":["../../../src/components/kemet-input/kemet-input.ts"],"names":[],"mappings":"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","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/controllers/forms';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { KemetFieldInterface } from '../kemet-field/types';\nimport { stylesBase } from './styles';\nimport { TypeAriaAutoComplete, TypeAutoComplete, TypeStatus } from './types';\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 {string} autocomplete - The autocomplete attribute\n * @prop {string} pattern - The pattern attribute\n * @prop {string} 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 {string} ariaAutoComplete - Aria Autocomplete\n * @prop {string} ariaControls - Aria Controls\n * @prop {string} ariaActiveDescendant - Aria Active Descendant\n * @prop {boolean} 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-input-focused - Fires when the input receives and loses focus\n * @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.\n * Use the validity object to support custom validation messages.\n * @event kemet-input-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: string;\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: string = '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 = '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  rounded: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  filled: boolean;\n\n  @property({ type: String, reflect: true, attribute: 'icon-right' })\n  iconRight: string;\n\n  @property({ type: String, reflect: true, attribute: 'icon-left' })\n  iconLeft: string;\n\n  @property({ type: Number })\n  iconSize: number = 20;\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  @state()\n  field: KemetFieldInterface;\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-password-status', (event: CustomEvent) => this.handleStatus(event));\n    }\n  }\n\n  render() {\n    return html`\n      <div>\n        ${this.makeIconLeft()}\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        ${this.makeIconRight()} ${this.makeIconClear()} ${this.makeVisibilityToggle()}\n      </div>\n    `;\n  }\n\n  makeIconRight() {\n    if (this.iconRight) {\n      return html`\n        <kemet-icon class=\"right\" icon=\"${this.iconRight}\" size=\"${this.iconSize ? this.iconSize : 20}\"></kemet-icon>\n      `;\n    }\n\n    return null;\n  }\n\n  makeIconLeft() {\n    if (this.iconLeft) {\n      return html`\n        <kemet-icon class=\"left\" icon=\"${this.iconLeft}\" size=\"${this.iconSize ? this.iconSize : 16}\"></kemet-icon>\n      `;\n    }\n\n    return null;\n  }\n\n  makeIconClear() {\n    if (this.type === 'search' && this.value !== '') {\n      return html`\n        <kemet-icon class=\"search right\" icon=\"x-lg\" size=\"${this.iconSize}\" @click=${() => this.handleClear()}></kemet-icon>\n      `;\n    }\n\n    return null;\n  }\n\n  makeVisibilityToggle() {\n    if (this.type === 'password') {\n      return html`<kemet-icon\n        class=\"eye right\"\n        icon=\"${this.setPasswordIcon()}\"\n        @click=${() => this.togglePasswordVisibility()}\n      ></kemet-icon>`;\n    }\n\n    return null;\n  }\n\n  setPasswordIcon() {\n    if (this.isPasswordVisible) {\n      return 'eye';\n    }\n\n    return 'eye-slash';\n  }\n\n  /**\n   * Handles when the input receives focus\n   * @private\n   */\n  handleFocus() {\n    this.focused = true;\n    emitEvent(this, 'kemet-input-focused', true);\n  }\n\n  /**\n   * Handles when the input loses focus\n   * @private\n   */\n  handleBlur() {\n    if (this.validateOnBlur && this.form && !this.form.noValidate) {\n      this.input?.checkValidity();\n      this.validity = this.input?.validity;\n    }\n\n    this.focused = false;\n    emitEvent(this, 'kemet-input-focused', false);\n  }\n\n  /**\n   * Handles when the input changes value\n   * @private\n   */\n  handleChange() {\n    this.value = this.input.value;\n\n    if (this.input.checkValidity() && this.checkLimitValidity() && this.status !== 'success') {\n      this.invalid = false;\n      this.status = 'standard';\n      this.validity = this.input.validity;\n\n      emitEvent(this, 'kemet-input-status', {\n        status: 'standard',\n        validity: this.input.validity,\n        element: this,\n      });\n    }\n  }\n\n  /**\n   * Handles when the input receives input\n   * @private\n   */\n  handleInput() {\n    this.value = this.input.value;\n    emitEvent(this, 'kemet-input-input', this.value);\n  }\n\n  /**\n   * Handles when the input has an error\n   * @private\n   */\n  handleInvalid() {\n    this.validity = this.input?.validity;\n\n    if (this.validateOnBlur) {\n      this.invalid = true;\n      this.status = 'error';\n\n      emitEvent(this, 'kemet-input-status', {\n        status: 'error',\n        validity: this.input?.validity,\n        element: this,\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-input', this.value);\n  }\n\n  /**\n   * Checks the validity of the character limit for the count component\n   * @public\n   * @returns {boolean}\n   */\n  checkLimitValidity(): boolean {\n    if (this.field) {\n      const count = this.field.querySelector('kemet-count');\n      if (count) {\n        return this.value.length < count.limit;\n      }\n    }\n\n    return true;\n  }\n\n  /**\n   * Checks the validity of the standard input\n   * @public\n   * @returns {boolean}\n   */\n  checkValidity(): boolean {\n    return this.input?.checkValidity();\n  }\n\n  /**\n   * Focuses the standard input\n   * @public\n   */\n  focus() {\n    this.input?.focus();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-input': KemetInput\n  }\n}\n"]}

package/dist/components/kemet-input/spec.d.ts

@@ -0,0 +1 @@
+import './kemet-input';

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

@@ -0,0 +1,83 @@
+import { html, render } from 'lit';
+import { expect } from '@wdio/globals';
+import userEvent from '@testing-library/user-event';
+import { fireEvent, waitFor } from '@testing-library/dom';
+import './kemet-input';
+describe('Input', () => {
+    const templates = {
+        default: html `<kemet-input></kemet-input>`,
+        disabled: html `<kemet-input disabled></kemet-input>`,
+        search: html `<kemet-input type="search"></kemet-input>`,
+        icons: html `<kemet-input icon-left="chevron-left" icon-right="chevron-right"></kemet-input>`,
+        validateImmediately: html `<kemet-input required validate-on-blur pattern="^[a-zA-Z0-9]*$"></kemet-input>`,
+        password: html `
+      <kemet-field slug="field" label="Password">
+        <kemet-input type="password" pattern="^[a-zA-Z0-9]*$" required validate-on-blur placeholder="Password"></kemet-input>
+      </kemet-field>
+    `,
+    };
+    it('handles changes to the input properly', async () => {
+        render(templates.default, document.body);
+        const kemetInput = document.querySelector('kemet-input');
+        await waitFor(async () => {
+            const input = kemetInput.shadowRoot.querySelector('input');
+            // TODO figure out why useEvent is not generating code coverage
+            fireEvent.change(input, { target: { value: 'test' } });
+            fireEvent.blur(input);
+            expect(kemetInput.status).toBe('standard');
+        });
+    });
+    it('focuses correctly', async () => {
+        render(templates.default, document.body);
+        const kemetInput = document.querySelector('kemet-input');
+        await waitFor(async () => {
+            kemetInput.focus();
+            fireEvent.focus(kemetInput.shadowRoot.querySelector('input'));
+            expect(kemetInput.focused).toBe(true);
+        });
+    });
+    it('renders a left and right icon', async () => {
+        render(templates.icons, document.body);
+    });
+    it('should not set a value when user types into a disabled field', async () => {
+        render(templates.disabled, document.body);
+        const kemetInput = document.querySelector('kemet-input');
+        await waitFor(async () => {
+            await userEvent.type(kemetInput.shadowRoot.querySelector('input'), 'random text');
+            await userEvent.click(document.body);
+            expect(kemetInput.value).toBeFalsy();
+        });
+    });
+    it('should error on blur when validate-on-blur is set and invalid value is entered', async () => {
+        render(templates.validateImmediately, document.body);
+        const kemetInput = document.querySelector('kemet-input');
+        await waitFor(async () => {
+            const input = kemetInput.shadowRoot.querySelector('input');
+            fireEvent.change(input, 'te$t');
+            fireEvent.blur(input);
+            expect(kemetInput.status).toBe('error');
+        });
+    });
+    it('should display a visibility icon and toggle it on a password input', async () => {
+        render(templates.password, document.body);
+        const passwordInput = document.querySelector('[type="password"]');
+        await waitFor(async () => {
+            const visibilityIcon = passwordInput.shadowRoot.querySelector('kemet-icon');
+            if (visibilityIcon)
+                await userEvent.click(visibilityIcon);
+            expect(visibilityIcon.getAttribute('icon')).toBe('eye');
+        });
+    });
+    it('should clear user text when close button is clicked on search type', async () => {
+        render(templates.search, document.body);
+        const kemetInput = document.querySelector('kemet-input');
+        await waitFor(async () => {
+            await userEvent.type(kemetInput.shadowRoot.querySelector('input'), 'random text');
+            expect(kemetInput.value).toBe('random text');
+            const closeIcon = kemetInput.shadowRoot.querySelector('kemet-icon');
+            await userEvent.click(closeIcon);
+            expect(kemetInput.value).toBe('');
+        });
+    });
+});
+//# sourceMappingURL=spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spec.js","sourceRoot":"","sources":["../../../src/components/kemet-input/spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,SAAS,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAG1D,OAAO,eAAe,CAAC;AAEvB,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IACrB,MAAM,SAAS,GAAG;QAChB,OAAO,EAAE,IAAI,CAAA,6BAA6B;QAC1C,QAAQ,EAAE,IAAI,CAAA,sCAAsC;QACpD,MAAM,EAAE,IAAI,CAAA,2CAA2C;QACvD,KAAK,EAAE,IAAI,CAAA,iFAAiF;QAC5F,mBAAmB,EAAE,IAAI,CAAA,gFAAgF;QACzG,QAAQ,EAAE,IAAI,CAAA;;;;KAIb;KACF,CAAC;IAEF,EAAE,CAAC,uCAAuC,EAAE,KAAK,IAAI,EAAE;QACrD,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QACzC,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QAEzD,MAAM,OAAO,CAAC,KAAK,IAAI,EAAE;YACvB,MAAM,KAAK,GAAG,UAAU,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YAC3D,+DAA+D;YAC/D,SAAS,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC;YACvD,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACtB,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC7C,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mBAAmB,EAAE,KAAK,IAAI,EAAE;QACjC,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QACzC,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QAEzD,MAAM,OAAO,CAAC,KAAK,IAAI,EAAE;YACvB,UAAU,CAAC,KAAK,EAAE,CAAC;YACnB,SAAS,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC;YAC9D,MAAM,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACxC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;QAC7C,MAAM,CAAC,SAAS,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IACzC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8DAA8D,EAAE,KAAK,IAAI,EAAE;QAC5E,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QAC1C,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QAEzD,MAAM,OAAO,CAAC,KAAK,IAAI,EAAE;YACvB,MAAM,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC,CAAC;YAClF,MAAM,SAAS,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;YACrC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,SAAS,EAAE,CAAC;QACvC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gFAAgF,EAAE,KAAK,IAAI,EAAE;QAC9F,MAAM,CAAC,SAAS,CAAC,mBAAmB,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QACrD,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QAEzD,MAAM,OAAO,CAAC,KAAK,IAAI,EAAE;YACvB,MAAM,KAAK,GAAG,UAAU,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YAC3D,SAAS,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;YAChC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACtB,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC1C,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oEAAoE,EAAE,KAAK,IAAI,EAAE;QAClF,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QAC1C,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;QAElE,MAAM,OAAO,CAAC,KAAK,IAAI,EAAE;YACvB,MAAM,cAAc,GAAG,aAAa,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAc,CAAC;YACzF,IAAI,cAAc;gBAAE,MAAM,SAAS,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;YAC1D,MAAM,CAAC,cAAc,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1D,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oEAAoE,EAAE,KAAK,IAAI,EAAE;QAClF,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QACxC,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QAEzD,MAAM,OAAO,CAAC,KAAK,IAAI,EAAE;YACvB,MAAM,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC,CAAC;YAClF,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YAC7C,MAAM,SAAS,GAAG,UAAU,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAc,CAAC;YACjF,MAAM,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;YACjC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACpC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { html, render } from 'lit';\nimport { expect } from '@wdio/globals';\nimport userEvent from '@testing-library/user-event';\nimport { fireEvent, waitFor } from '@testing-library/dom';\n\nimport KemetIcon from '../kemet-icon/kemet-icon';\nimport './kemet-input';\n\ndescribe('Input', () => {\n  const templates = {\n    default: html`<kemet-input></kemet-input>`,\n    disabled: html`<kemet-input disabled></kemet-input>`,\n    search: html`<kemet-input type=\"search\"></kemet-input>`,\n    icons: html`<kemet-input icon-left=\"chevron-left\" icon-right=\"chevron-right\"></kemet-input>`,\n    validateImmediately: html`<kemet-input required validate-on-blur pattern=\"^[a-zA-Z0-9]*$\"></kemet-input>`,\n    password: html`\n      <kemet-field slug=\"field\" label=\"Password\">\n        <kemet-input type=\"password\" pattern=\"^[a-zA-Z0-9]*$\" required validate-on-blur placeholder=\"Password\"></kemet-input>\n      </kemet-field>\n    `,\n  };\n\n  it('handles changes to the input properly', async () => {\n    render(templates.default, document.body);\n    const kemetInput = document.querySelector('kemet-input');\n\n    await waitFor(async () => {\n      const input = kemetInput.shadowRoot.querySelector('input');\n      // TODO figure out why useEvent is not generating code coverage\n      fireEvent.change(input, { target: { value: 'test' } });\n      fireEvent.blur(input);\n      expect(kemetInput.status).toBe('standard');\n    });\n  });\n\n  it('focuses correctly', async () => {\n    render(templates.default, document.body);\n    const kemetInput = document.querySelector('kemet-input');\n\n    await waitFor(async () => {\n      kemetInput.focus();\n      fireEvent.focus(kemetInput.shadowRoot.querySelector('input'));\n      expect(kemetInput.focused).toBe(true);\n    });\n  });\n\n  it('renders a left and right icon', async () => {\n    render(templates.icons, document.body);\n  });\n\n  it('should not set a value when user types into a disabled field', async () => {\n    render(templates.disabled, document.body);\n    const kemetInput = document.querySelector('kemet-input');\n\n    await waitFor(async () => {\n      await userEvent.type(kemetInput.shadowRoot.querySelector('input'), 'random text');\n      await userEvent.click(document.body);\n      expect(kemetInput.value).toBeFalsy();\n    });\n  });\n\n  it('should error on blur when validate-on-blur is set and invalid value is entered', async () => {\n    render(templates.validateImmediately, document.body);\n    const kemetInput = document.querySelector('kemet-input');\n\n    await waitFor(async () => {\n      const input = kemetInput.shadowRoot.querySelector('input');\n      fireEvent.change(input, 'te$t');\n      fireEvent.blur(input);\n      expect(kemetInput.status).toBe('error');\n    });\n  });\n\n  it('should display a visibility icon and toggle it on a password input', async () => {\n    render(templates.password, document.body);\n    const passwordInput = document.querySelector('[type=\"password\"]');\n\n    await waitFor(async () => {\n      const visibilityIcon = passwordInput.shadowRoot.querySelector('kemet-icon') as KemetIcon;\n      if (visibilityIcon) await userEvent.click(visibilityIcon);\n      expect(visibilityIcon.getAttribute('icon')).toBe('eye');\n    });\n  });\n\n  it('should clear user text when close button is clicked on search type', async () => {\n    render(templates.search, document.body);\n    const kemetInput = document.querySelector('kemet-input');\n\n    await waitFor(async () => {\n      await userEvent.type(kemetInput.shadowRoot.querySelector('input'), 'random text');\n      expect(kemetInput.value).toBe('random text');\n      const closeIcon = kemetInput.shadowRoot.querySelector('kemet-icon') as KemetIcon;\n      await userEvent.click(closeIcon);\n      expect(kemetInput.value).toBe('');\n    });\n  });\n});\n"]}

package/dist/components/kemet-input/types.d.ts

@@ -1,6 +1,6 @@
-export declare type TypeStatus = 'standard' | 'error' | 'success' | 'warning';
-export declare type TypeAriaAutoComplete = 'inline' | 'list' | 'both' | 'none';
-export declare type TypeAutoComplete = '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';
+export type TypeStatus = 'standard' | 'error' | 'success' | 'warning';
+export type TypeAriaAutoComplete = 'inline' | 'list' | 'both' | 'none';
+export type TypeAutoComplete = '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';
 export interface KemetInputInterface extends HTMLElement {
     slug?: string;
     name?: string;

package/dist/components/kemet-modal/docs/stories.d.ts

@@ -7,6 +7,6 @@ import '../../kemet-tabs/kemet-tab-panel';
 import '../../kemet-button/kemet-button';
 declare const meta: Meta;
 export default meta;
-declare type Story = StoryObj;
+type Story = StoryObj;
 export declare const Standard: Story;
 export declare const Rounded: Story;

package/dist/components/kemet-modal/docs/stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-modal/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAIxD,OAAO,gBAAgB,CAAC;AACxB,OAAO,sBAAsB,CAAC;AAE9B,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,iCAAiC,CAAC;AAEzC,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,aAAa;IACxB,IAAI,EAAE;QACJ,eAAe,EAAE,IAAI;KACtB;IACD,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,gBAAgB,EAAE,aAAa,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,iBAAiB,EAAE,eAAe,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,EAAE,eAAe,EAAE,aAAa,CAAC;SACpM;KACF;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QACpD,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,OAAO,EAAE,EAAE;QAC/B,IAAI,OAAO,EAAE;YACX,OAAO,IAAI,CAAA;;;;OAIV,CAAC;SACH;QAED,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,IAAI,CAAA;4BACe,GAAG,EAAE,CAAC,SAAS,EAAE;2BAClB,IAAI,CAAC,MAAM,aAAa,IAAI,CAAC,OAAO,YAAY,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,sBAAsB,IAAI,CAAC,YAAY;;UAE9H,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;GAKzC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CACjC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAChC,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;KACd;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport type { Meta, StoryObj } from '@storybook/web-components';\nimport { TypeEffect } from '../types';\n\nimport '../kemet-modal';\nimport '../kemet-modal-close';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\nimport '../../kemet-button/kemet-button';\n\nconst meta: Meta = {\n  title: 'Components / Modal',\n  component: 'kemet-modal',\n  args: {\n    displayCloseBtn: true,\n  },\n  argTypes: {\n    effect: {\n      control: { type: 'select' },\n      options: ['fadein-scaleup', 'slide-right', 'slide-bottom', 'newspaper', 'fall', 'side-fall', 'flip-horizontal', 'flip-vertical', 'sign-3d', 'super-scaled', 'slit', 'rotate-bottom', 'rotate-left'],\n    },\n  },\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => {\n  const openModal = () => {\n    const modal = document.querySelector('kemet-modal');\n    modal.opened = true;\n  };\n\n  const makeCloseBtn = (display) => {\n    if (display) {\n      return html`\n        <kemet-modal-close tabindex=\"0\" role=\"button\" aria-label=\"Close Button\" style=\"display:flex;\">\n          <kemet-icon icon=\"x-circle\" size=\"24\" kemet-background-color=\"white\" kemet-border-radius=\"circle\"></kemet-icon>\n        </kemet-modal-close>\n      `;\n    }\n\n    return null;\n  };\n\n  return html`\n    <kemet-button @click=\"${() => openModal()}\">Open Modal</kemet-button>\n    <kemet-modal ?opened=${args.opened} ?rounded=${args.rounded} effect=\"${ifDefined(args.effect)}\" ?close-on-click=\"${args.closeOnClick}\">\n      <div kemet-padding=\"xl\">\n        ${makeCloseBtn(args.displayCloseBtn)}\n        <h2 kemet-margin=\"none\">Modal Title</h2>\n        <p>Your modal contents <a href=\"http://google.com\" kemet-color=\"primary\"><strong>here</strong></a>.</p>\n      </div>\n    </kemet-modal>\n  `;\n};\n\nexport const Standard: Story = {\n  render: (args) => Template(args),\n};\n\nexport const Rounded: Story = {\n  render: (args) => Template(args),\n  args: {\n    rounded: true\n  }\n};\n"]}
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-modal/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAIxD,OAAO,gBAAgB,CAAC;AACxB,OAAO,sBAAsB,CAAC;AAE9B,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,iCAAiC,CAAC;AAEzC,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,aAAa;IACxB,IAAI,EAAE;QACJ,eAAe,EAAE,IAAI;KACtB;IACD,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,gBAAgB,EAAE,aAAa,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,iBAAiB,EAAE,eAAe,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,EAAE,eAAe,EAAE,aAAa,CAAC;SACpM;KACF;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QACpD,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,OAAO,EAAE,EAAE;QAC/B,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,IAAI,CAAA;;;;OAIV,CAAC;QACJ,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,IAAI,CAAA;4BACe,GAAG,EAAE,CAAC,SAAS,EAAE;2BAClB,IAAI,CAAC,MAAM,aAAa,IAAI,CAAC,OAAO,YAAY,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,sBAAsB,IAAI,CAAC,YAAY;;UAE9H,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;GAKzC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CACjC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAChC,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;KACd;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport type { Meta, StoryObj } from '@storybook/web-components';\nimport { TypeEffect } from '../types';\n\nimport '../kemet-modal';\nimport '../kemet-modal-close';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\nimport '../../kemet-button/kemet-button';\n\nconst meta: Meta = {\n  title: 'Components / Modal',\n  component: 'kemet-modal',\n  args: {\n    displayCloseBtn: true,\n  },\n  argTypes: {\n    effect: {\n      control: { type: 'select' },\n      options: ['fadein-scaleup', 'slide-right', 'slide-bottom', 'newspaper', 'fall', 'side-fall', 'flip-horizontal', 'flip-vertical', 'sign-3d', 'super-scaled', 'slit', 'rotate-bottom', 'rotate-left'],\n    },\n  },\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => {\n  const openModal = () => {\n    const modal = document.querySelector('kemet-modal');\n    modal.opened = true;\n  };\n\n  const makeCloseBtn = (display) => {\n    if (display) {\n      return html`\n        <kemet-modal-close tabindex=\"0\" role=\"button\" aria-label=\"Close Button\" style=\"display:flex;\">\n          <kemet-icon icon=\"x-circle\" size=\"24\" kemet-background-color=\"white\" kemet-border-radius=\"circle\"></kemet-icon>\n        </kemet-modal-close>\n      `;\n    }\n\n    return null;\n  };\n\n  return html`\n    <kemet-button @click=\"${() => openModal()}\">Open Modal</kemet-button>\n    <kemet-modal ?opened=${args.opened} ?rounded=${args.rounded} effect=\"${ifDefined(args.effect)}\" ?close-on-click=\"${args.closeOnClick}\">\n      <div kemet-padding=\"xl\">\n        ${makeCloseBtn(args.displayCloseBtn)}\n        <h2 kemet-margin=\"none\">Modal Title</h2>\n        <p>Your modal contents <a href=\"http://google.com\" kemet-color=\"primary\"><strong>here</strong></a>.</p>\n      </div>\n    </kemet-modal>\n  `;\n};\n\nexport const Standard: Story = {\n  render: (args) => Template(args),\n};\n\nexport const Rounded: Story = {\n  render: (args) => Template(args),\n  args: {\n    rounded: true\n  }\n};\n"]}

package/dist/components/kemet-modal/kemet-modal-close.js.map

@@ -1 +1 @@
-{"version":3,"file":"kemet-modal-close.js","sourceRoot":"","sources":["../../../src/components/kemet-modal/kemet-modal-close.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAExD;;;;;;;;;GASG;AAGH,IAAqB,eAAe,GAApC,MAAqB,eAAgB,SAAQ,UAAU;IAarD,MAAM;QACJ,OAAO,IAAI,CAAA;qBACM,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE;KAC/D,CAAC;IACJ,CAAC;IAED,KAAK;QACH,SAAS,CAAC,IAAI,EAAE,2BAA2B,EAAE,IAAI,CAAC,CAAC;IACrD,CAAC;CACF,CAAA;AArBQ,sBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;KAQF;CACF,CAAC;AAXiB,eAAe;IADnC,aAAa,CAAC,mBAAmB,CAAC;GACd,eAAe,CAsBnC;eAtBoB,eAAe","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-modal-close\n * @summary A close button for a modal.\n *\n * @event kemet-modal-close-pressed - Fires when the close button is pressed\n *\n */\n\n@customElement('kemet-modal-close')\nexport default class KemetModalClose extends LitElement {\n  static styles = [\n    css`\n      :host {\n        position: absolute;\n        top: 0.5rem;\n        right: 0.5rem;\n        border-radius: var(--kemet-border-radius-circle);\n        cursor: pointer;\n      }\n    `,\n  ];\n\n  render() {\n    return html`\n      <slot @keyup=${() => this.close()} @click=${() => this.close()}></slot>\n    `;\n  }\n\n  close() {\n    emitEvent(this, 'kemet-modal-close-pressed', this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-modal-close': KemetModalClose\n  }\n}\n"]}
+{"version":3,"file":"kemet-modal-close.js","sourceRoot":"","sources":["../../../src/components/kemet-modal/kemet-modal-close.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAExD;;;;;;;;;GASG;AAGY,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAarD,MAAM;QACJ,OAAO,IAAI,CAAA;qBACM,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE;KAC/D,CAAC;IACJ,CAAC;IAED,KAAK;QACH,SAAS,CAAC,IAAI,EAAE,2BAA2B,EAAE,IAAI,CAAC,CAAC;IACrD,CAAC;;AApBM,sBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;KAQF;CACF,AAVY,CAUX;AAXiB,eAAe;IADnC,aAAa,CAAC,mBAAmB,CAAC;GACd,eAAe,CAsBnC;eAtBoB,eAAe","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-modal-close\n * @summary A close button for a modal.\n *\n * @event kemet-modal-close-pressed - Fires when the close button is pressed\n *\n */\n\n@customElement('kemet-modal-close')\nexport default class KemetModalClose extends LitElement {\n  static styles = [\n    css`\n      :host {\n        position: absolute;\n        top: 0.5rem;\n        right: 0.5rem;\n        border-radius: var(--kemet-border-radius-circle);\n        cursor: pointer;\n      }\n    `,\n  ];\n\n  render() {\n    return html`\n      <slot @keyup=${() => this.close()} @click=${() => this.close()}></slot>\n    `;\n  }\n\n  close() {\n    emitEvent(this, 'kemet-modal-close-pressed', this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-modal-close': KemetModalClose\n  }\n}\n"]}

package/dist/components/kemet-modal/kemet-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"kemet-modal.js","sourceRoot":"","sources":["../../../src/components/kemet-modal/kemet-modal.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport {\n  customElement, property, query, state,\n} from 'lit/decorators.js';\nimport { stylesBase, stylesEffects } from './styles';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { TypeEffect } from './types';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-modal\n * @summary A dialog that has many built-in effects and flexible styles.\n *\n * @prop {boolean} opened\n * @prop {string} effect\n * @prop {boolean} closeOnClick\n * @prop {string} breakpoint\n * @prop {boolean} mobile\n *\n * @csspart dialog - The main contents of the modal.\n * @csspart overlay - The surrounding scrim of the modal.\n *\n * @cssproperty --kemet-modal-radius - The mount of rounding for rounded corners\n * @cssproperty --kemet-modal-dialog-min-width - The minimum width of the dialog.\n * @cssproperty --kemet-modal-dialog-max-width - The maximum width of the dialog.\n * @cssproperty --kemet-modal-dialog-background-color - The background color of the dialog.\n * @cssproperty --kemet-modal-dialog-mobile-width - The width of the mobile dialog.\n * @cssproperty --kemet-modal-dialog-mobile-margin - The margins of the mobile dialog.\n * @cssproperty --kemet-modal-dialog-mobile-padding - The padding of the mobile dialog.\n * @cssproperty --kemet-modal-overlay-background-color - The color of the backdrop overlay.\n *\n * @event kemet-modal-opened - Fires when the modal opens\n * @event kemet-modal-closed - Fires when the modal closes\n *\n */\n\n@customElement('kemet-modal')\nexport default class KemetModal extends LitElement {\n  static styles = [stylesBase, stylesEffects];\n\n  @property({ type: Boolean, reflect: true })\n  opened: boolean = false;\n\n  @property({ type: String, reflect: true })\n  effect: TypeEffect;\n\n  @property({ type: Boolean, attribute: 'close-on-click' })\n  closeOnClick: boolean = false;\n\n  @property({ type: String })\n  breakpoint: string = '600px';\n\n  @property({ type: Boolean, reflect: true })\n  mobile: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  rounded: boolean;\n\n  /** @internal */\n  @query('dialog')\n  dialogElement: HTMLDialogElement;\n\n  /** @internal */\n  @state()\n  focusableSelector: string;\n\n  /** @internal */\n  @state()\n  focusableElements: NodeListOf<Element>;\n\n  constructor() {\n    super();\n\n    // bindings\n    this.addEventListener('kemet-modal-close-pressed', () => { this.handleClose(); });\n  }\n\n  firstUpdated() {\n    // standard properties\n    /** @internal */\n    this.focusableSelector = 'body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]';\n    this.focusableElements = this.querySelectorAll(this.focusableSelector);\n\n    // events\n    this.addEventListener('keyup', (event) => {\n      if (event.key === 'Escape') {\n        this.handleClose();\n      }\n    });\n\n    this.addEventListener('click', (event) => {\n      const targetElement = event.target as HTMLElement;\n      if (this.opened && this.closeOnClick && targetElement.tagName.toLowerCase() === 'kemet-modal') {\n        this.handleClose();\n      }\n    });\n\n    window.addEventListener('resize', () => {\n      this.isMobile();\n    });\n\n    this.focusableElements.forEach((element) => {\n      element.addEventListener('keydown', (event: KeyboardEvent) => this.handleFocusableDown(event));\n    });\n  }\n\n  updated(prevProps: Map<string, never>) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      this.handleOpen();\n    }\n\n    if (prevProps.get('opened') && this.opened === false) {\n      this.handleClose();\n    }\n\n    this.isMobile();\n  }\n\n  render() {\n    return html`\n      <dialog part=\"dialog\" @close=${() => this.handleClose()}>\n        <slot></slot>\n      </dialog>\n      <div class=\"overlay\" part=\"overlay\"></div>\n    `;\n  }\n\n  isMobile() {\n    const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);\n    this.mobile = mediaQuery.matches;\n  }\n\n  handleOpen() {\n    this.opened = true;\n    if (this.dialogElement?.showModal) this.dialogElement.showModal();\n    emitEvent(this, 'kemet-modal-opened', this);\n  }\n\n  handleClose() {\n    this.opened = false;\n    if (this.dialogElement?.close) this.dialogElement.close();\n    emitEvent(this, 'kemet-modal-closed', this);\n  }\n\n  handleFocusableDown(event: KeyboardEvent) {\n    const firstFocusable = this.focusableElements[0] as HTMLElement;\n    const lastFocusable = this.focusableElements[this.focusableElements.length - 1] as HTMLElement;\n\n    if (event.key === 'Tab') {\n      if (event.shiftKey && document.activeElement === firstFocusable) {\n        event.preventDefault();\n        lastFocusable.focus();\n      } else if (!event.shiftKey && document.activeElement === lastFocusable) {\n        event.preventDefault();\n        firstFocusable.focus();\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-modal': KemetModal\n  }\n}\n"]}
+{"version":3,"file":"kemet-modal.js","sourceRoot":"","sources":["../../../src/components/kemet-modal/kemet-modal.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport {\n  customElement, property, query, state,\n} from 'lit/decorators.js';\nimport { stylesBase, stylesEffects } from './styles';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { TypeEffect } from './types';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-modal\n * @summary A dialog that has many built-in effects and flexible styles.\n *\n * @prop {boolean} opened\n * @prop {string} effect\n * @prop {boolean} closeOnClick\n * @prop {string} breakpoint\n * @prop {boolean} mobile\n *\n * @csspart dialog - The main contents of the modal.\n * @csspart overlay - The surrounding scrim of the modal.\n *\n * @cssproperty --kemet-modal-radius - The mount of rounding for rounded corners\n * @cssproperty --kemet-modal-dialog-min-width - The minimum width of the dialog.\n * @cssproperty --kemet-modal-dialog-max-width - The maximum width of the dialog.\n * @cssproperty --kemet-modal-dialog-background-color - The background color of the dialog.\n * @cssproperty --kemet-modal-dialog-mobile-width - The width of the mobile dialog.\n * @cssproperty --kemet-modal-dialog-mobile-margin - The margins of the mobile dialog.\n * @cssproperty --kemet-modal-dialog-mobile-padding - The padding of the mobile dialog.\n * @cssproperty --kemet-modal-overlay-background-color - The color of the backdrop overlay.\n *\n * @event kemet-modal-opened - Fires when the modal opens\n * @event kemet-modal-closed - Fires when the modal closes\n *\n */\n\n@customElement('kemet-modal')\nexport default class KemetModal extends LitElement {\n  static styles = [stylesBase, stylesEffects];\n\n  @property({ type: Boolean, reflect: true })\n  opened: boolean = false;\n\n  @property({ type: String, reflect: true })\n  effect: TypeEffect;\n\n  @property({ type: Boolean, attribute: 'close-on-click' })\n  closeOnClick: boolean = false;\n\n  @property({ type: String })\n  breakpoint: string = '600px';\n\n  @property({ type: Boolean, reflect: true })\n  mobile: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  rounded: boolean;\n\n  /** @internal */\n  @query('dialog')\n  dialogElement: HTMLDialogElement;\n\n  /** @internal */\n  @state()\n  focusableSelector: string;\n\n  /** @internal */\n  @state()\n  focusableElements: NodeListOf<Element>;\n\n  constructor() {\n    super();\n\n    // bindings\n    this.addEventListener('kemet-modal-close-pressed', () => { this.handleClose(); });\n  }\n\n  firstUpdated() {\n    // standard properties\n    /** @internal */\n    this.focusableSelector = 'body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]';\n    this.focusableElements = this.querySelectorAll(this.focusableSelector);\n\n    // events\n    this.addEventListener('keyup', (event) => {\n      if (event.key === 'Escape') {\n        this.handleClose();\n      }\n    });\n\n    this.addEventListener('click', (event) => {\n      const targetElement = event.target as HTMLElement;\n      if (this.opened && this.closeOnClick && targetElement.tagName.toLowerCase() === 'kemet-modal') {\n        this.handleClose();\n      }\n    });\n\n    window.addEventListener('resize', () => {\n      this.isMobile();\n    });\n\n    this.focusableElements.forEach((element) => {\n      element.addEventListener('keydown', (event: KeyboardEvent) => this.handleFocusableDown(event));\n    });\n  }\n\n  updated(prevProps: Map<string, never>) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      this.handleOpen();\n    }\n\n    if (prevProps.get('opened') && this.opened === false) {\n      this.handleClose();\n    }\n\n    this.isMobile();\n  }\n\n  render() {\n    return html`\n      <dialog part=\"dialog\" @close=${() => this.handleClose()}>\n        <slot></slot>\n      </dialog>\n      <div class=\"overlay\" part=\"overlay\"></div>\n    `;\n  }\n\n  isMobile() {\n    const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);\n    this.mobile = mediaQuery.matches;\n  }\n\n  handleOpen() {\n    this.opened = true;\n    if (this.dialogElement?.showModal) this.dialogElement.showModal();\n    emitEvent(this, 'kemet-modal-opened', this);\n  }\n\n  handleClose() {\n    this.opened = false;\n    if (this.dialogElement?.close) this.dialogElement.close();\n    emitEvent(this, 'kemet-modal-closed', this);\n  }\n\n  handleFocusableDown(event: KeyboardEvent) {\n    const firstFocusable = this.focusableElements[0] as HTMLElement;\n    const lastFocusable = this.focusableElements[this.focusableElements.length - 1] as HTMLElement;\n\n    if (event.key === 'Tab') {\n      if (event.shiftKey && document.activeElement === firstFocusable) {\n        event.preventDefault();\n        lastFocusable.focus();\n      } else if (!event.shiftKey && document.activeElement === lastFocusable) {\n        event.preventDefault();\n        firstFocusable.focus();\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-modal': KemetModal\n  }\n}\n"]}

package/dist/components/kemet-modal/types.d.ts

@@ -1,4 +1,4 @@
-export declare type TypeEffect = 'fadein-scaleup' | 'slide-right' | 'slide-bottom' | 'newspaper' | 'fall' | 'side-fall' | 'flip-horizontal' | 'flip-vertical' | 'sign-3d' | 'super-scaled' | 'slit' | 'rotate-bottom' | 'rotate-left';
+export type TypeEffect = 'fadein-scaleup' | 'slide-right' | 'slide-bottom' | 'newspaper' | 'fall' | 'side-fall' | 'flip-horizontal' | 'flip-vertical' | 'sign-3d' | 'super-scaled' | 'slit' | 'rotate-bottom' | 'rotate-left';
 export interface KemetModalInterface extends HTMLElement {
     opened?: boolean;
     effect?: TypeEffect;

package/dist/components/kemet-multi-input/docs/stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import '../kemet-multi-input';
+import '../../kemet-field/kemet-field';
+import '../../kemet-combo/kemet-combo';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Standard: Story;

package/dist/components/kemet-multi-input/docs/stories.js

@@ -0,0 +1,33 @@
+import { html } from 'lit';
+import '../kemet-multi-input';
+import '../../kemet-field/kemet-field';
+import '../../kemet-combo/kemet-combo';
+const meta = {
+    title: 'Components / Multi Input',
+    component: 'kemet-multi-input',
+    args: {
+        options: [
+            'Art',
+            'Automotive',
+            'Bar',
+            'Beauty',
+            'Contractor',
+            'Finance',
+            'Market',
+            'Medical',
+            'Restaurant',
+            'Technology',
+        ],
+    },
+};
+export default meta;
+const Template = args => html `
+  <kemet-field slug="categories" label="Categories">
+    <kemet-multi-input slot="input" name="categories" rounded></kemet-multi-input>
+    <kemet-combo slot="component" .options=${args.options}></kemet-combo>
+  </kemet-field>
+`;
+export const Standard = {
+    render: args => Template(args),
+};
+//# sourceMappingURL=stories.js.map

package/dist/components/kemet-multi-input/docs/stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-multi-input/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,+BAA+B,CAAC;AACvC,OAAO,+BAA+B,CAAC;AAEvC,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,mBAAmB;IAC9B,IAAI,EAAE;QACJ,OAAO,EAAE;YACP,KAAK;YACL,YAAY;YACZ,KAAK;YACL,QAAQ;YACR,YAAY;YACZ,SAAS;YACT,QAAQ;YACR,SAAS;YACT,YAAY;YACZ,YAAY;SACb;KACF;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;;;6CAGgB,IAAI,CAAC,OAAO;;CAExD,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CAC/B,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-multi-input';\nimport '../../kemet-field/kemet-field';\nimport '../../kemet-combo/kemet-combo';\n\nconst meta: Meta = {\n  title: 'Components / Multi Input',\n  component: 'kemet-multi-input',\n  args: {\n    options: [\n      'Art',\n      'Automotive',\n      'Bar',\n      'Beauty',\n      'Contractor',\n      'Finance',\n      'Market',\n      'Medical',\n      'Restaurant',\n      'Technology',\n    ],\n  },\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = args => html`\n  <kemet-field slug=\"categories\" label=\"Categories\">\n    <kemet-multi-input slot=\"input\" name=\"categories\" rounded></kemet-multi-input>\n    <kemet-combo slot=\"component\" .options=${args.options}></kemet-combo>\n  </kemet-field>\n`;\n\nexport const Standard: Story = {\n  render: args => Template(args),\n};\n"]}

package/dist/components/kemet-multi-input/kemet-multi-input.d.ts

@@ -0,0 +1,116 @@
+import { LitElement } from 'lit';
+import { IComboSelection } from './types';
+/**
+ * @since 3.1.0
+ * @status stable
+ *
+ * @tagname kemet-multi-input
+ * @summary An input element that accepts multiple items from a combo.
+ *
+ * @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 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.
+ * @cssproperty --kemet-input-padding - The padding on the input.
+ * @cssproperty --kemet-input-border - The border of the input.
+ * @cssproperty --kemet-input-border-color-error -  The border of the error state.
+ * @cssproperty --kemet-input-border-color-success - The border of the success state.
+ * @cssproperty --kemet-input-border-color-warning - The border of the warning state.
+ * @cssproperty --kemet-input-icon-left-padding - The icon-left padding.
+ * @cssproperty --kemet-input-icon-right-padding - The icon-right padding.
+ * @cssproperty --kemet-input-border-radius-rounded - The border radius on rounded.
+ * @cssproperty --kemet-input-border-filled - The border on filled.
+ * @cssproperty --kemet-input-color-filled - The color on filled.
+ * @cssproperty --kemet-input-background-color-filled - The background-color on filled.
+ * @cssproperty --kemet-input-background-color-error - The error state background color.
+ * @cssproperty --kemet-input-background-color-success - The success state background color.
+ * @cssproperty --kemet-input-background-color-warning - The warning state background color.
+ *
+ * @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
+ *
+ */
+export default class KemetMultiInput extends LitElement {
+    /** @internal */
+    static styles: import("lit").CSSResult[];
+    rounded: boolean;
+    name: string;
+    value: string;
+    selections: IComboSelection[];
+    paddingLeft: number;
+    field: any;
+    combo: any;
+    chips: any;
+    firstUpdated(): void;
+    updated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * Handles when a selection is made from a combo
+     * @private
+     * @param event
+     */
+    addComboItem(event: CustomEvent): void;
+    /**
+     * Handles when the input receives input
+     * @private
+     */
+    handleInput(event: any): void;
+    /**
+     * Handles when the input is focused
+     */
+    handleFocus(event: any): void;
+    /**
+     * Renders the chips from the selections of the combo
+     * @private
+     */
+    makeSelections(): import("lit-html").TemplateResult<1>;
+    /**
+     * calculates padding to properly place the cursor of the input
+     * @private
+     */
+    calculatePadding(): void;
+    /**
+     * handle removing a chip from the selections
+     * @private
+     */
+    handleRemoveChip(event: any): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-multi-input': KemetMultiInput;
+    }
+}