kemet-ui 5.0.4 → 5.0.5

package/dist/elements/input/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/input/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/form-controller.ts","../../../src/utilities/events.ts","../../../src/elements/input/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { FormSubmitController } from '../../utilities/form-controller';\nimport { emitEvent } from '../../utilities/events';\nimport { EnumAppearances, EnumRoundedSizes } from '../../utilities/constants';\nimport HTMLKemetFieldElement from '../field';\nimport HTMLKemetCountElement from '../count';\nimport styles from './styles.css.ts';\n\nexport enum EnumInputTypes {\n  Text = 'text',\n  Color = 'color',\n  Date = 'date',\n  DateTimeLocal = 'datetime-local',\n  Email = 'email',\n  Password = 'password',\n  Hidden = 'hidden',\n  Month = 'month',\n  Number = 'number',\n  Reset = 'reset',\n  Search = 'search',\n  Tel = 'tel',\n  Time = 'time',\n  Url = 'url',\n  Week = 'week'\n}\n\nexport enum EnumAriaAutoComplete {\n  Inline = 'inline',\n  List = 'list',\n  Both = 'both',\n  None = 'none'\n}\n\nexport enum EnumAutoComplete {\n  On = 'on',\n  Off = 'off',\n  AdditionalName = 'additional-name',\n  AddressLevel1 = 'address-level1',\n  AddressLevel2 = 'address-level2',\n  AddressLevel3 = 'address-level3',\n  AddressLevel4 = 'address-level4',\n  AddressLine1 = 'address-line1',\n  AddressLine2 = 'address-line2',\n  AddressLine3 = 'address-line3',\n  Bday = 'bday',\n  BdayYear = 'bday-year',\n  BdayDay = 'bday-day',\n  BdayMonth = 'bday-month',\n  Billing = 'billing',\n  CcAdditionalName = 'cc-additional-name'\n}\n\nexport enum EnumInputModes {\n  None = 'none',\n  Text = 'text',\n  Decimal = 'decimal',\n  Numeric = 'numeric',\n  Tel = 'tel',\n  Search = 'search',\n  Email = 'email',\n  Url = 'url'\n}\n\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-input\n * @summary An enhanced input element.\n * @ssrsafe yes\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 {EnumAutoComplete} autocomplete - The autocomplete attribute\n * @prop {string} pattern - The pattern attribute\n * @prop {EnumInputModes} 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 {EnumAriaAutoComplete} ariaAutoComplete - Aria Autocomplete\n * @prop {string} ariaControls - Aria Controls\n * @prop {string} ariaActiveDescendant - Aria Active Descendant\n * @prop {EnumRoundedSizes} 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 * @slot left - Allows you to place an icon to the left of the input.\n * @slot right - Allows you to place an icon to the right of the input.\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-focus - Fires when the input receives focus\n * @event kemet-input-blur - Fires when the input loses focus\n * @event kemet-input-appearance-change Fires when there's a change in status. This event includes an object that reports: 1) the status. 2) HTML5 validity object. 3) the component element. 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 HTMLKemetInputElement extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [styles];\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?: EnumAutoComplete;\n\n  @property({ type: String })\n  pattern?: string;\n\n  @property({ type: String })\n  inputmode?: EnumInputModes;\n\n  @property({ type: Boolean })\n  autofocus: boolean = false;\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: EnumInputTypes = EnumInputTypes.Text;\n\n  @property({ type: String, reflect: true })\n  value: string = '';\n\n  @property({ type: Boolean, reflect: true })\n  invalid?: boolean;\n\n  @property({ type: String, reflect: true })\n  appearance: EnumAppearances = EnumAppearances.Neutral;\n\n  @property({ type: Boolean, attribute: 'validate-on-blur' })\n  validateOnBlur: boolean = false;\n\n  @property({ type: String, attribute: 'aria-autocomplete' })\n  ariaAutoComplete: EnumAriaAutoComplete = null as any;\n\n  @property({ type: String, attribute: 'aria-controls' })\n  ariaControls?: string;\n\n  @property({ type: String, attribute: 'aria-activedescendant' })\n  ariaActiveDescendant?: string;\n\n  @property({ type: Boolean, reflect: true })\n  filled?: boolean;\n\n  @property({ type: Boolean, reflect: true, attribute: 'icon-right' })\n  iconRight: boolean = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'icon-left' })\n  iconLeft: boolean = false;\n\n  @property({ type: Object })\n  validity!: object;\n\n  @property({ type: Boolean })\n  isPasswordVisible: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  focused: boolean = false;\n\n  @property({ type: String, reflect: true })\n  rounded?: EnumRoundedSizes;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @state()\n  field!: HTMLKemetFieldElement;\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') as HTMLInputElement;\n    this.field = this.closest('kemet-field') as HTMLKemetFieldElement;\n    this.form = this.closest('form') as HTMLFormElement;\n    this.slug = this.field ? this.field.slug : 'input';\n\n    if (this.field) {\n      this.field.addEventListener('kemet-appearance-change', (event: Event) => this.handleStatus(event));\n    }\n\n    emitEvent(this, 'kemet-input-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    return html`\n      <div>\n        <slot name=\"left\" @slotchange=${this.handleLeftChange}></slot>\n        <input\n          part=\"input\"\n          id=${this.slug}\n          name=${this.name}\n          placeholder=${ifDefined(this.placeholder)}\n          minlength=${ifDefined(this.minlength)}\n          maxlength=${ifDefined(this.maxlength)}\n          min=${ifDefined(this.min)}\n          max=${ifDefined(this.max)}\n          step=${ifDefined(this.step)}\n          autocomplete=${ifDefined(this.autocomplete)}\n          aria-autocomplete=${ifDefined(this.ariaAutoComplete)}\n          aria-controls=${ifDefined(this.ariaControls)}\n          aria-activedescendant=${ifDefined(this.ariaActiveDescendant)}\n          pattern=${ifDefined(this.pattern)}\n          inputmode=${ifDefined(this.inputmode)}\n          aria-invalid=${this.invalid ? 'true' : 'false'}\n          ?autofocus=${this.autofocus}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .type=\"${this.type === 'password' && this.isPasswordVisible ? 'text' : this.type}\"\n          .value=${live(this.value)}\n          @change=${this.handleChange}\n          @input=${this.handleInput}\n          @invalid=${this.handleInvalid}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}\n        />\n        <slot name=\"right\" @slotchange=${this.handleRightChange}></slot>\n        ${this.makeIconClear()} ${this.makeVisibilityToggle()}\n      </div>\n    `;\n  }\n\n  handleLeftChange() {\n    const left = this.querySelector('[slot=\"left\"]');\n    if (left) this.iconLeft = true;\n  }\n\n  handleRightChange() {\n    const right = this.querySelector('[slot=\"right\"]');\n    if (right) this.iconRight = true;\n  }\n\n  makeIconClear() {\n    if (this.type === 'search' && this.value !== '') {\n      return html`\n        <kemet-icon class=\"search right\" name=\"x-lg\" @click=${() => this.handleClear()}></kemet-icon>\n      `;\n    }\n\n    return null;\n  }\n\n  makeVisibilityToggle() {\n    if (this.type === EnumInputTypes.Password) {\n      this.iconRight = true;\n      return html`<kemet-icon\n        class=\"eye right\"\n        name=\"${this.isPasswordVisible ? 'eye' : 'eye-slash'}\"\n        @click=${() => this.togglePasswordVisibility()}\n      ></kemet-icon>`;\n    }\n\n    return null;\n  }\n\n  /**\n   * Handles when the input receives focus\n   * @private\n   */\n  handleFocus() {\n    this.focused = true;\n    emitEvent(this, 'kemet-input-focus', { focused: true, element: this });\n  }\n\n  /**\n   * Handles when the input loses focus\n   * @private\n   */\n  handleBlur() {\n    if (this.validateOnBlur && this.form) {\n      this.input?.reportValidity();\n      this.validity = this.input?.validity;\n    }\n\n    this.focused = false;\n    emitEvent(this, 'kemet-input-blur', { focused: false, element: this });\n  }\n\n  /**\n   * Handles when the input changes value\n   * @private\n   */\n  handleChange(event: Event) {\n    this.value = this.input.value;\n\n    if (this.input.checkValidity() && this.checkLimitValidity() && this.appearance !== EnumAppearances.Success) {\n      this.invalid = false;\n      this.validity = this.input.validity;\n\n      emitEvent(this, 'kemet-input-appearance-change', {\n        appearance: EnumAppearances.Neutral,\n        validity: this.input.validity,\n        element: this,\n        value: (event.target as HTMLInputElement).value,\n      });\n    }\n  }\n\n  /**\n   * Handles when the input receives input\n   * @private\n   */\n  handleInput(event: InputEvent) {\n    this.value = this.input.value;\n    emitEvent(this, 'kemet-input-input', {\n      appearance: this.appearance,\n      validity: this.input.validity,\n      element: event.target as HTMLInputElement,\n      value: (event.target as HTMLInputElement).value,\n    });\n  }\n\n  /**\n   * Handles when the input has an error\n   * @private\n   */\n  handleInvalid(event: Event) {\n    this.validity = this.input?.validity;\n\n    if (this.validateOnBlur) {\n      this.invalid = true;\n      this.appearance = EnumAppearances.Error;\n\n      emitEvent(this, 'kemet-input-appearance-change', {\n        status: EnumAppearances.Error,\n        validity: this.input?.validity,\n        element: this,\n        value: (event.target as HTMLInputElement).value,\n      });\n    }\n  }\n\n  handleStatus(event: Event) {\n    this.appearance = (event as CustomEvent).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', {\n      status: this.appearance,\n      validity: this.input.validity,\n      element: this,\n      value: '',\n    });\n  }\n\n  /**\n   * Checks the validity of the character limit for the count component\n   * @public\n   * @method checkLimitValidity\n   * @returns {boolean}\n   */\n  checkLimitValidity(): boolean {\n    if (this.field) {\n      const count = this.field.querySelector('kemet-count') as HTMLKemetCountElement;\n      if (count) {\n        return this.value.length < count.limit;\n      }\n    }\n\n    return true;\n  }\n\n\n  /**\n   * Checks the validity of the standard input\n   * @public\n   * @method checkValidity\n   * @returns {boolean}\n   */\n  checkValidity(): boolean {\n    return this.input?.checkValidity();\n  }\n\n  /**\n   * Focuses the standard input\n   * @public\n   * @method focus\n   * @returns {void}\n   */\n  focus(): void {\n    this.input?.focus();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-input': HTMLKemetInputElement\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","import { EnumAppearances } from \"./constants\";\n\nexport class FormSubmitController {\n  host: any;\n  form: HTMLFormElement | null | undefined;\n  options: {\n    form: (input: any) => HTMLFormElement | null | undefined;\n    name: (input: any) => string;\n    value: (input: any) => any;\n    disabled: (input: any) => boolean;\n  };\n\n  constructor(host: any, options: Partial<{\n    form: (input: any) => HTMLFormElement | null | undefined;\n    name: (input: any) => string;\n    value: (input: any) => any;\n    disabled: (input: any) => boolean;\n  }> = {}) {\n    (this.host = host).addController(this);\n\n    this.options = {\n      form: (input: any) => input.closest('form'),\n      name: (input: any) => input.name,\n      value: (input: any) => input.value,\n      disabled: (input: any) => input.disabled,\n      ...options,\n    };\n\n    this.handleFormData = this.handleFormData.bind(this);\n    this.handleFormSubmit = this.handleFormSubmit.bind(this);\n\n\n  }\n\n  hostConnected() {\n    console.log('what?!');\n    this.form = this.options.form(this.host);\n\n    if (this.form) {\n      console.log('Adding form listeners');\n      this.form.addEventListener('formdata', this.handleFormData);\n      this.form.addEventListener('submit', this.handleFormSubmit);\n    }\n  }\n\n  hostDisconnected() {\n    if (this.form) {\n      this.form.removeEventListener('formdata', this.handleFormData);\n      this.form.removeEventListener('submit', this.handleFormSubmit);\n      this.form = undefined;\n    }\n  }\n\n  handleFormData(event: FormDataEvent) {\n    const disabled = this.options.disabled(this.host);\n    const name = this.options.name(this.host);\n    const value = this.options.value(this.host);\n\n    if (!disabled && typeof name === 'string' && typeof value !== 'undefined') {\n      // TODO recreate a scenario where value will be an array\n      // if (Array.isArray(value)) {\n      //   value.forEach((val) => {\n      //     event.formData?.append(name, val.toString());\n      //   });\n      // } else {\n      //   event.formData?.append(name, value.toString());\n      // }\n      event.formData?.append(name, value.toString());\n    }\n  }\n\n  handleFormSubmit(event: SubmitEvent) {\n    console.log('~~Form submitted~~');\n    event.preventDefault();\n    event.stopImmediatePropagation();\n\n    const disabled = this.options.disabled(this.host);\n    this.form = this.options.form(this.host);\n\n    if (this.form && !disabled) {\n      const components = this.form.querySelectorAll('kemet-input, kemet-textarea, kemet-select, kemet-checkbox, kemet-radios');\n\n      components.forEach((component: any) => {\n        if (component.checkValidity) {\n          component.checkValidity();\n\n          if (!component.checkValidity()) {\n            component.appearance = EnumAppearances.Error;\n            component.invalid = true;\n\n            component.dispatchEvent(\n              new CustomEvent('kemet-input-status', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                  status: EnumAppearances.Error,\n                  validity: component.validity ? component.validity : {},\n                  element: component,\n                },\n              }),\n            );\n          }\n\n          if (component.checkLimitValidity && !component.checkLimitValidity()) {\n            component.appearance = EnumAppearances.Error;\n            component.invalid = true;\n\n            component.dispatchEvent(\n              new CustomEvent('kemet-input-status', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                  status: 'error',\n                  validity: { passedLimit: true },\n                  element: component,\n                },\n              }),\n            );\n          }\n        }\n      });\n    }\n  }\n\n  submit() {\n    const button = document.createElement('button');\n\n    if (this.form) {\n      button.type = 'submit';\n      button.style.position = 'absolute';\n      button.style.width = '0';\n      button.style.height = '0';\n      button.style.clip = 'rect(0 0 0 0)';\n      button.style.clipPath = 'inset(50%)';\n      button.style.overflow = 'hidden';\n      button.style.whiteSpace = 'nowrap';\n      this.form.append(button);\n      button.click();\n      button.remove();\n    }\n  }\n}\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-input-height: 50px;\n  --kemet-input-color: inherit;\n  --kemet-input-border: 1px solid;\n  --kemet-input-padding-y: 0.5rem;\n  --kemet-input-padding-x: 1rem;\n  --kemet-input-icon-gap: 3rem;\n  --kemet-input-font-color: var(--kemet-input-color);\n\n\n  /* private */\n  --_kemet-input-border-radius: 0;\n  --_kemet-input-background-color: transparent;\n  --_kemet-input-icon-left-padding: var(--kemet-input-padding-x);\n  --_kemet-input-icon-right-padding: var(--kemet-input-padding-x);\n\n  position: relative;\n  display: block;\n}\n\ninput {\n  color: var(--kemet-input-font-color);\n  display: block;\n  font-size: 1rem;\n  width: 100%;\n  height: var(--kemet-input-height);\n  border: var(--kemet-input-border);\n  appearance: none;\n  box-sizing: border-box;\n  background-color: var(--_kemet-input-background-color);\n  border-radius: var(--_kemet-input-border-radius);\n  padding-left: var(--_kemet-input-icon-left-padding);\n  padding-right: var(--_kemet-input-icon-right-padding);\n  padding-top: var(--kemet-input-padding-y);\n  padding-bottom: var(--kemet-input-padding-y);\n}\n\n:host([polarity=dark]) {\n  --kemet-input-color: var(--kemet-color-font-inverse-base);\n  --kemet-input-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([icon-left]) {\n  --_kemet-input-icon-left-padding: var(--kemet-input-icon-gap);\n}\n\n:host([icon-right]) {\n  --_kemet-input-icon-right-padding: var(--kemet-input-icon-gap);\n}\n\ninput[type=color] {\n  min-width: 10rem;\n}\n\ninput[type=search]::-webkit-search-decoration,\ninput[type=search]::-webkit-search-cancel-button,\ninput[type=search]::-webkit-search-results-button,\ninput[type=search]::-webkit-search-results-decoration {\n  display: none;\n}\n\n\n\n:host([appearance=brand]) {\n  --kemet-input-color: var(--kemet-color-brand-primary-darker);\n}\n\n:host([appearance=error]) {\n  --kemet-input-color: var(--kemet-color-font-error);\n}\n\n:host([appearance=success]) {\n  --kemet-input-color: var(--kemet-color-font-success);\n}\n\n:host([appearance=warning]) {\n  --kemet-input-color: var(--kemet-color-font-warning);\n}\n\n:host([appearance=link]) {\n  --kemet-input-color: var(--kemet-color-font-link);\n}\n\n\n:host([appearance=brand][filled]) {\n  --_kemet-input-background-color: var(--kemet-color-brand-primary-darker);\n}\n\n:host([appearance=error][filled]) {\n  --_kemet-input-background-color: var(--kemet-color-font-error);\n}\n\n:host([appearance=success][fiiled]) {\n  --_kemet-input-background-color: var(--kemet-color-font-success);\n}\n\n:host([appearance=warning][filled]) {\n  --_kemet-input-background-color: var(--kemet-color-font-warning);\n}\n\n:host([appearance=link][filled]) {\n  --_kemet-input-background-color: var(--kemet-color-font-link);\n}\n\n:host([disabled]) {\n  --kemet-input-color: var(--kemet-color-font-disabled);\n}\n\n:host([rounded]) {\n  --_kemet-input-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm])  {\n  --_kemet-input-border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=lg]) {\n  --_kemet-input-border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl])  {\n  --_kemet-input-border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  --_kemet-input-border-radius: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill])  {\n  --_kemet-input-border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([filled]) {\n  --kemet-input-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-input-background-color: var(--kemet-color-background-inverse);\n  --kemet-input-border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n\nkemet-icon,\n::slotted(kemet-icon) {\n  color: var(--kemet-input-font-color);\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\nkemet-icon.left,\n:host([icon-left]) ::slotted(kemet-icon) {\n  left: 1rem;\n}\n\nkemet-icon.right,\n:host([icon-right]) ::slotted(kemet-icon) {\n  right: 1rem;\n}\n\nkemet-icon.eye,\nkemet-icon.search {\n  cursor: pointer;\n}\n`;\n"],"mappings":"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","names":["EnumInputTypes","EnumAriaAutoComplete","EnumAutoComplete","EnumInputModes"]}
+{"version":3,"sources":["../../../src/elements/input/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/form-controller.ts","../../../src/utilities/events.ts","../../../src/elements/input/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { FormSubmitController } from '../../utilities/form-controller';\nimport { emitEvent } from '../../utilities/events';\nimport { EnumAppearances, EnumRoundedSizes } from '../../utilities/constants';\nimport HTMLKemetFieldElement from '../field';\nimport HTMLKemetCountElement from '../count';\nimport styles from './styles.css.ts';\n\nexport enum EnumInputTypes {\n  Text = 'text',\n  Color = 'color',\n  Date = 'date',\n  DateTimeLocal = 'datetime-local',\n  Email = 'email',\n  Password = 'password',\n  Hidden = 'hidden',\n  Month = 'month',\n  Number = 'number',\n  Reset = 'reset',\n  Search = 'search',\n  Tel = 'tel',\n  Time = 'time',\n  Url = 'url',\n  Week = 'week'\n}\n\nexport enum EnumAriaAutoComplete {\n  Inline = 'inline',\n  List = 'list',\n  Both = 'both',\n  None = 'none'\n}\n\nexport enum EnumAutoComplete {\n  On = 'on',\n  Off = 'off',\n  AdditionalName = 'additional-name',\n  AddressLevel1 = 'address-level1',\n  AddressLevel2 = 'address-level2',\n  AddressLevel3 = 'address-level3',\n  AddressLevel4 = 'address-level4',\n  AddressLine1 = 'address-line1',\n  AddressLine2 = 'address-line2',\n  AddressLine3 = 'address-line3',\n  Bday = 'bday',\n  BdayYear = 'bday-year',\n  BdayDay = 'bday-day',\n  BdayMonth = 'bday-month',\n  Billing = 'billing',\n  CcAdditionalName = 'cc-additional-name'\n}\n\nexport enum EnumInputModes {\n  None = 'none',\n  Text = 'text',\n  Decimal = 'decimal',\n  Numeric = 'numeric',\n  Tel = 'tel',\n  Search = 'search',\n  Email = 'email',\n  Url = 'url'\n}\n\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-input\n * @summary An enhanced input element.\n * @ssrsafe yes\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 {EnumAutoComplete} autocomplete - The autocomplete attribute\n * @prop {string} pattern - The pattern attribute\n * @prop {EnumInputModes} 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 {EnumAriaAutoComplete} ariaAutoComplete - Aria Autocomplete\n * @prop {string} ariaControls - Aria Controls\n * @prop {string} ariaActiveDescendant - Aria Active Descendant\n * @prop {EnumRoundedSizes} 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 * @slot left - Allows you to place an icon to the left of the input.\n * @slot right - Allows you to place an icon to the right of the input.\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-focus - Fires when the input receives focus\n * @event kemet-input-blur - Fires when the input loses focus\n * @event kemet-input-appearance-change Fires when there's a change in status. This event includes an object that reports: 1) the status. 2) HTML5 validity object. 3) the component element. 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 HTMLKemetInputElement extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [styles];\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?: EnumAutoComplete;\n\n  @property({ type: String })\n  pattern?: string;\n\n  @property({ type: String })\n  inputmode?: EnumInputModes;\n\n  @property({ type: Boolean })\n  autofocus: boolean = false;\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: EnumInputTypes = EnumInputTypes.Text;\n\n  @property({ type: String, reflect: true })\n  value: string = '';\n\n  @property({ type: Boolean, reflect: true })\n  invalid?: boolean;\n\n  @property({ type: String, reflect: true })\n  appearance: EnumAppearances = EnumAppearances.Neutral;\n\n  @property({ type: Boolean, attribute: 'validate-on-blur' })\n  validateOnBlur: boolean = false;\n\n  @property({ type: String, attribute: 'aria-autocomplete' })\n  ariaAutoComplete: EnumAriaAutoComplete = null as any;\n\n  @property({ type: String, attribute: 'aria-controls' })\n  ariaControls?: string;\n\n  @property({ type: String, attribute: 'aria-activedescendant' })\n  ariaActiveDescendant?: string;\n\n  @property({ type: Boolean, reflect: true })\n  filled?: boolean;\n\n  @property({ type: Boolean, reflect: true, attribute: 'icon-right' })\n  iconRight: boolean = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'icon-left' })\n  iconLeft: boolean = false;\n\n  @property({ type: Object })\n  validity!: object;\n\n  @property({ type: Boolean })\n  isPasswordVisible: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  focused: boolean = false;\n\n  @property({ type: String, reflect: true })\n  rounded?: EnumRoundedSizes;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @state()\n  field!: HTMLKemetFieldElement;\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  updated(changedProperties: Map<string, any>) {\n    if (changedProperties.has('appearance')) {\n      emitEvent(this, 'kemet-input-appearance-change', {\n        appearance: this.appearance,\n        element: this,\n      });\n    }\n  }\n\n  firstUpdated() {\n    // elements\n    this.input = this.shadowRoot?.querySelector('input') as HTMLInputElement;\n    this.field = this.closest('kemet-field') as HTMLKemetFieldElement;\n    this.form = this.closest('form') as HTMLFormElement;\n    this.slug = this.field ? this.field.slug : 'input';\n\n    if (this.field) {\n      this.field.addEventListener('kemet-appearance-change', (event: Event) => this.handleStatus(event));\n    }\n\n    emitEvent(this, 'kemet-input-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    return html`\n      <div>\n        <slot name=\"left\" @slotchange=${this.handleLeftChange}></slot>\n        <input\n          part=\"input\"\n          id=${this.slug}\n          name=${this.name}\n          placeholder=${ifDefined(this.placeholder)}\n          minlength=${ifDefined(this.minlength)}\n          maxlength=${ifDefined(this.maxlength)}\n          min=${ifDefined(this.min)}\n          max=${ifDefined(this.max)}\n          step=${ifDefined(this.step)}\n          autocomplete=${ifDefined(this.autocomplete)}\n          aria-autocomplete=${ifDefined(this.ariaAutoComplete)}\n          aria-controls=${ifDefined(this.ariaControls)}\n          aria-activedescendant=${ifDefined(this.ariaActiveDescendant)}\n          pattern=${ifDefined(this.pattern)}\n          inputmode=${ifDefined(this.inputmode)}\n          aria-invalid=${this.invalid ? 'true' : 'false'}\n          ?autofocus=${this.autofocus}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .type=\"${this.type === 'password' && this.isPasswordVisible ? 'text' : this.type}\"\n          .value=${live(this.value)}\n          @change=${this.handleChange}\n          @input=${this.handleInput}\n          @invalid=${this.handleInvalid}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}\n        />\n        <slot name=\"right\" @slotchange=${this.handleRightChange}></slot>\n        ${this.makeIconClear()} ${this.makeVisibilityToggle()}\n      </div>\n    `;\n  }\n\n  handleLeftChange() {\n    const left = this.querySelector('[slot=\"left\"]');\n    if (left) this.iconLeft = true;\n  }\n\n  handleRightChange() {\n    const right = this.querySelector('[slot=\"right\"]');\n    if (right) this.iconRight = true;\n  }\n\n  makeIconClear() {\n    if (this.type === 'search' && this.value !== '') {\n      return html`\n        <kemet-icon class=\"search right\" name=\"x-lg\" @click=${() => this.handleClear()}></kemet-icon>\n      `;\n    }\n\n    return null;\n  }\n\n  makeVisibilityToggle() {\n    if (this.type === EnumInputTypes.Password) {\n      this.iconRight = true;\n      return html`<kemet-icon\n        class=\"eye right\"\n        name=\"${this.isPasswordVisible ? 'eye' : 'eye-slash'}\"\n        @click=${() => this.togglePasswordVisibility()}\n      ></kemet-icon>`;\n    }\n\n    return null;\n  }\n\n  /**\n   * Handles when the input receives focus\n   * @private\n   */\n  handleFocus() {\n    this.focused = true;\n    emitEvent(this, 'kemet-input-focus', { focused: true, element: this });\n  }\n\n  /**\n   * Handles when the input loses focus\n   * @private\n   */\n  handleBlur() {\n    if (this.validateOnBlur && this.form) {\n      this.input?.reportValidity();\n      this.validity = this.input?.validity;\n    }\n\n    this.focused = false;\n    emitEvent(this, 'kemet-input-blur', { focused: false, element: this });\n  }\n\n  /**\n   * Handles when the input changes value\n   * @private\n   */\n  handleChange(event: Event) {\n    this.value = this.input.value;\n\n    if (this.input.checkValidity() && this.checkLimitValidity() && this.appearance !== EnumAppearances.Success) {\n      this.invalid = false;\n      this.validity = this.input.validity;\n\n      emitEvent(this, 'kemet-input-appearance-change', {\n        appearance: EnumAppearances.Neutral,\n        validity: this.input.validity,\n        element: this,\n        value: (event.target as HTMLInputElement).value,\n      });\n    }\n  }\n\n  /**\n   * Handles when the input receives input\n   * @private\n   */\n  handleInput(event: InputEvent) {\n    this.value = this.input.value;\n    this.appearance = EnumAppearances.Neutral;\n\n    emitEvent(this, 'kemet-input-input', {\n      appearance: this.appearance,\n      validity: this.input.validity,\n      element: event.target as HTMLInputElement,\n      value: (event.target as HTMLInputElement).value,\n    });\n  }\n\n  /**\n   * Handles when the input has an error\n   * @private\n   */\n  handleInvalid(event: Event) {\n    this.validity = this.input?.validity;\n\n    if (this.validateOnBlur) {\n      this.invalid = true;\n      this.appearance = EnumAppearances.Error;\n\n      emitEvent(this, 'kemet-input-appearance-change', {\n        appearance: EnumAppearances.Error,\n        validity: this.input?.validity,\n        element: this,\n        value: (event.target as HTMLInputElement).value,\n      });\n    }\n  }\n\n  handleStatus(event: Event) {\n    this.appearance = (event as CustomEvent).detail.appearance;\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', {\n      status: this.appearance,\n      validity: this.input.validity,\n      element: this,\n      value: '',\n    });\n  }\n\n  /**\n   * Checks the validity of the character limit for the count component\n   * @public\n   * @method checkLimitValidity\n   * @returns {boolean}\n   */\n  checkLimitValidity(): boolean {\n    if (this.field) {\n      const count = this.field.querySelector('kemet-count') as HTMLKemetCountElement;\n      if (count) {\n        return this.value.length < count.limit;\n      }\n    }\n\n    return true;\n  }\n\n\n  /**\n   * Checks the validity of the standard input\n   * @public\n   * @method checkValidity\n   * @returns {boolean}\n   */\n  checkValidity(): boolean {\n    return this.input?.checkValidity();\n  }\n\n  /**\n   * Focuses the standard input\n   * @public\n   * @method focus\n   * @returns {void}\n   */\n  focus(): void {\n    this.input?.focus();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-input': HTMLKemetInputElement\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","import { EnumAppearances } from \"./constants\";\n\nexport class FormSubmitController {\n  host: any;\n  form: HTMLFormElement | null | undefined;\n  options: {\n    form: (input: any) => HTMLFormElement | null | undefined;\n    name: (input: any) => string;\n    value: (input: any) => any;\n    disabled: (input: any) => boolean;\n  };\n\n  constructor(host: any, options: Partial<{\n    form: (input: any) => HTMLFormElement | null | undefined;\n    name: (input: any) => string;\n    value: (input: any) => any;\n    disabled: (input: any) => boolean;\n  }> = {}) {\n    (this.host = host).addController(this);\n\n    this.options = {\n      form: (input: any) => input.closest('form'),\n      name: (input: any) => input.name,\n      value: (input: any) => input.value,\n      disabled: (input: any) => input.disabled,\n      ...options,\n    };\n\n    this.handleFormData = this.handleFormData.bind(this);\n    this.handleFormSubmit = this.handleFormSubmit.bind(this);\n\n\n  }\n\n  hostConnected() {\n    this.form = this.options.form(this.host);\n\n    if (this.form) {\n      this.form.addEventListener('formdata', this.handleFormData);\n      this.form.addEventListener('submit', this.handleFormSubmit);\n    }\n  }\n\n  hostDisconnected() {\n    if (this.form) {\n      this.form.removeEventListener('formdata', this.handleFormData);\n      this.form.removeEventListener('submit', this.handleFormSubmit);\n      this.form = undefined;\n    }\n  }\n\n  handleFormData(event: FormDataEvent) {\n    const disabled = this.options.disabled(this.host);\n    const name = this.options.name(this.host);\n    const value = this.options.value(this.host);\n\n    if (!disabled && typeof name === 'string' && typeof value !== 'undefined') {\n      // TODO recreate a scenario where value will be an array\n      // if (Array.isArray(value)) {\n      //   value.forEach((val) => {\n      //     event.formData?.append(name, val.toString());\n      //   });\n      // } else {\n      //   event.formData?.append(name, value.toString());\n      // }\n      event.formData?.append(name, value.toString());\n    }\n  }\n\n  handleFormSubmit(event: SubmitEvent) {\n    event.preventDefault();\n    event.stopImmediatePropagation();\n\n    const disabled = this.options.disabled(this.host);\n    this.form = this.options.form(this.host);\n\n    if (this.form && !disabled) {\n      const components = this.form.querySelectorAll('kemet-input, kemet-textarea, kemet-select, kemet-checkbox, kemet-radios');\n\n\n      components.forEach((component: any) => {\n        if (component.checkValidity) {\n          component.checkValidity();\n\n          if (!component.checkValidity()) {\n            console.log('invalid', component);\n            component.appearance = EnumAppearances.Error;\n            component.invalid = true;\n\n            component.dispatchEvent(\n              new CustomEvent('kemet-input-status', {\n                detail: {\n                  appearance: EnumAppearances.Error,\n                  validity: component.validity ? component.validity : {},\n                  element: component,\n                },\n              }),\n            );\n          }\n\n          if (component.checkLimitValidity && !component.checkLimitValidity()) {\n            component.appearance = EnumAppearances.Error;\n            component.invalid = true;\n\n            component.dispatchEvent(\n              new CustomEvent('kemet-input-status', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                  status: 'error',\n                  validity: { passedLimit: true },\n                  element: component,\n                },\n              }),\n            );\n          }\n        }\n      });\n    }\n  }\n\n  submit() {\n    const button = document.createElement('button');\n\n    if (this.form) {\n      button.type = 'submit';\n      button.style.position = 'absolute';\n      button.style.width = '0';\n      button.style.height = '0';\n      button.style.clip = 'rect(0 0 0 0)';\n      button.style.clipPath = 'inset(50%)';\n      button.style.overflow = 'hidden';\n      button.style.whiteSpace = 'nowrap';\n      this.form.append(button);\n      button.click();\n      button.remove();\n    }\n  }\n}\n","export const emitEvent = (element: HTMLElement, name: string, detail: any, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-input-height: 50px;\n  --kemet-input-color: inherit;\n  --kemet-input-border: 1px solid;\n  --kemet-input-padding-y: 0.5rem;\n  --kemet-input-padding-x: 1rem;\n  --kemet-input-icon-gap: 3rem;\n  --kemet-input-font-color: var(--kemet-input-color);\n\n\n  /* private */\n  --_kemet-input-border-radius: 0;\n  --_kemet-input-background-color: transparent;\n  --_kemet-input-icon-left-padding: var(--kemet-input-padding-x);\n  --_kemet-input-icon-right-padding: var(--kemet-input-padding-x);\n\n  position: relative;\n  display: block;\n}\n\ninput {\n  color: var(--kemet-input-font-color);\n  display: block;\n  font-size: 1rem;\n  width: 100%;\n  height: var(--kemet-input-height);\n  border: var(--kemet-input-border);\n  appearance: none;\n  box-sizing: border-box;\n  background-color: var(--_kemet-input-background-color);\n  border-radius: var(--_kemet-input-border-radius);\n  padding-left: var(--_kemet-input-icon-left-padding);\n  padding-right: var(--_kemet-input-icon-right-padding);\n  padding-top: var(--kemet-input-padding-y);\n  padding-bottom: var(--kemet-input-padding-y);\n}\n\n:host([polarity=dark]) {\n  --kemet-input-color: var(--kemet-color-font-inverse-base);\n  --kemet-input-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([icon-left]) {\n  --_kemet-input-icon-left-padding: var(--kemet-input-icon-gap);\n}\n\n:host([icon-right]) {\n  --_kemet-input-icon-right-padding: var(--kemet-input-icon-gap);\n}\n\ninput[type=color] {\n  min-width: 10rem;\n}\n\ninput[type=search]::-webkit-search-decoration,\ninput[type=search]::-webkit-search-cancel-button,\ninput[type=search]::-webkit-search-results-button,\ninput[type=search]::-webkit-search-results-decoration {\n  display: none;\n}\n\n\n\n:host([appearance=brand]) {\n  --kemet-input-color: var(--kemet-color-brand-primary-darker);\n}\n\n:host([appearance=error]) {\n  --kemet-input-color: var(--kemet-color-font-error);\n}\n\n:host([appearance=success]) {\n  --kemet-input-color: var(--kemet-color-font-success);\n}\n\n:host([appearance=warning]) {\n  --kemet-input-color: var(--kemet-color-font-warning);\n}\n\n:host([appearance=link]) {\n  --kemet-input-color: var(--kemet-color-font-link);\n}\n\n\n:host([appearance=brand][filled]) {\n  --_kemet-input-background-color: var(--kemet-color-brand-primary-darker);\n}\n\n:host([appearance=error][filled]) {\n  --_kemet-input-background-color: var(--kemet-color-font-error);\n}\n\n:host([appearance=success][fiiled]) {\n  --_kemet-input-background-color: var(--kemet-color-font-success);\n}\n\n:host([appearance=warning][filled]) {\n  --_kemet-input-background-color: var(--kemet-color-font-warning);\n}\n\n:host([appearance=link][filled]) {\n  --_kemet-input-background-color: var(--kemet-color-font-link);\n}\n\n:host([disabled]) {\n  --kemet-input-color: var(--kemet-color-font-disabled);\n}\n\n:host([rounded]) {\n  --_kemet-input-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm])  {\n  --_kemet-input-border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=lg]) {\n  --_kemet-input-border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl])  {\n  --_kemet-input-border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  --_kemet-input-border-radius: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill])  {\n  --_kemet-input-border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([filled]) {\n  --kemet-input-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-input-background-color: var(--kemet-color-background-inverse);\n  --kemet-input-border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n\nkemet-icon,\n::slotted(kemet-icon) {\n  color: var(--kemet-input-font-color);\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\nkemet-icon.left,\n:host([icon-left]) ::slotted(kemet-icon) {\n  left: 1rem;\n}\n\nkemet-icon.right,\n:host([icon-right]) ::slotted(kemet-icon) {\n  right: 1rem;\n}\n\nkemet-icon.eye,\nkemet-icon.search {\n  cursor: pointer;\n}\n`;\n"],"mappings":"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","names":["EnumInputTypes","EnumAriaAutoComplete","EnumAutoComplete","EnumInputModes"]}

package/dist/elements/input-combo/index.d.ts

@@ -1,7 +1,7 @@
 import * as lit_html from 'lit-html';
 import * as lit from 'lit';
 import { LitElement } from 'lit';
-import { d as EnumRoundedSizes, E as EnumAppearances, H as HTMLKemetFieldElement, K as KemetCombo } from '../../constants-C4-3KYlX.js';
+import { e as EnumRoundedSizes, E as EnumAppearances, H as HTMLKemetFieldElement, K as KemetCombo } from '../../constants-BsAfWV-a.js';
 import '../../form-controller-3q581XcZ.js';
 
 interface InterfaceSelections {

package/dist/elements/input-combo/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/input-combo/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/input-combo/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, query, state } from '../../utilities/decorators';\nimport { live } from 'lit/directives/live.js';\nimport { emitEvent } from '../../utilities/events';\nimport { EnumKeyCodes, EnumAppearances, TypeRoundedSizes, TypeAppearance, EnumRoundedSizes } from '../../utilities/constants';\nimport HTMLKemetFieldElement from '../field';\nimport HTMLKemetComboElement from '../combo';\nimport styles from './styles.css.ts';\n\nexport interface InterfaceSelections {\n  element: HTMLUListElement;\n  text: string;\n  id: string;\n}\n\n/**\n * @since 3.1.0\n * @status stable\n *\n * @tagname kemet-multi-input\n * @summary An input element that accepts multiple items from a combo.\n * @ssrsafe yes\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 {boolean} disabled - The disable attribute\n * @prop {boolean} required - The required attribute\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 {EnumRoundedSizes} rounded - Displays rounded corners\n * @prop {boolean} filled - Displays a filled input box\n * @prop {ValidityState} validity - The HTML5 validity object.\n\n *\n * @csspart input\n *\n * @cssproperty --kemet-input-combo-height - The height of the input.\n * @cssproperty --kemet-input-combo-color - The color of the input.\n * @cssproperty --kemet-input-combo-border - The border of the input.\n * @cssproperty --kemet-input-combo-padding-y - The padding on the input.\n * @cssproperty --kemet-input-combo-padding-x - The padding on the input.\n * @cssproperty --kemet-input-combo-icon-gap - The icon gap of the input.\n * @cssproperty --kemet-input-combo-font-color - The font color of the input.\n * @cssproperty --kemet-input-combo-chip-font-color - The font color of the chip.\n * @cssproperty --kemet-input-combo-chip-background-color - The background color of the chip.\n *\n * @event kemet-input-combo-focus - Fires when the input receives focus\n * @event kemet-input-combo-blur - Fires when the input loses focus\n * @event kemet-input-combo-input - Fires when the input receives input\n * @event kemet-input-combo-change - Fires when the input changes\n * @event kemet-input-combo-invalid - Fires when the input is invalid\n *\n */\n\n@customElement('kemet-input-combo')\nexport default class InputCombo extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  slug: string = 'input';\n\n  @property({ type: String })\n  placeholder: string = '';\n\n  @property({ type: Boolean })\n  disabled: boolean = false;\n\n  @property({ type: Boolean })\n  filled: boolean = false;\n\n  @property({ type: String,reflect: true })\n  rounded?: EnumRoundedSizes;\n\n  @property({ type: String })\n  name: string = 'input';\n\n  @property({ reflect: true })\n  appearance?: EnumAppearances;\n\n  @property({ type: Boolean })\n  required: boolean = false;\n\n  @property({ type: Boolean })\n  invalid!: boolean;\n\n  @property({ type: Boolean, attribute: 'validate-on-blur' })\n  validateOnBlur: boolean = false;\n\n  @state()\n  value: string = '';\n\n  @state()\n  selections: InterfaceSelections[] = [];\n\n  @state()\n  paddingLeft!: number;\n\n  @state()\n  field!: HTMLKemetFieldElement;\n\n  @state()\n  combo!: HTMLKemetComboElement;\n\n  @query('[part=chips]')\n  chips!: { offsetWidth: number; };\n\n  @query('input')\n  input!: HTMLInputElement;\n\n  firstUpdated() {\n    // elements\n    this.field = this.closest('kemet-field') as HTMLKemetFieldElement;\n    this.combo = this.field.querySelector('kemet-combo') as HTMLKemetComboElement;\n\n    document.addEventListener('click', this.handleComboClose.bind(this));\n\n    if (this.combo) {\n      this.combo.addEventListener('kemet-combo-selection', (event: Event) => this.addComboItem(event));\n    }\n  }\n\n  updated() {\n    if (this.chips) this.calculatePadding();\n  }\n\n  render() {\n    return html`\n      <div>\n        <input\n          part=\"input\"\n          id=${this.slug}\n          name=${this.name}\n          placeholder=${this.placeholder}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n          @input=${this.handleInput}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}\n          @change=${this.handleChange}\n          @invalid=${this.handleInvalid}\n          @keydown=${this.handleKeydown}\n          .value=${live(this.value)}\n        />\n         ${this.makeSelections()}\n      </div>\n    `;\n  }\n\n  /**\n   * Handles when a selection is made from a combo\n   * @private\n   * @param event\n   */\n\n  addComboItem(event: Event) {\n    this.value = '';\n    this.appearance = EnumAppearances.Neutral;\n    const isPresent = this.selections.find(selection => selection.id === (event as CustomEvent).detail.id);\n    if (!isPresent) this.selections = [...this.selections, (event as CustomEvent).detail];\n  }\n\n  /**\n   * Handles when the input receives input\n   * @private\n   */\n  handleInput(event: Event) {\n    this.value = (event.target as HTMLInputElement).value;\n    emitEvent(this, 'kemet-input-combo-input', {\n      element: this,\n      validity: this.input.validity,\n      status: this.appearance,\n      value: (event.target as HTMLInputElement).value\n    });\n  }\n\n  /**\n   * Handles when the input is focused\n   */\n  handleFocus() {\n    emitEvent(this, 'kemet-input-combo-focus', { element: this });\n  }\n\n  handleBlur() {\n    emitEvent(this, 'kemet-input-combo-blur', { element: this });\n    if (this.validateOnBlur) {\n      this.input.checkValidity();\n    }\n  }\n\n  handleChange(event: Event) {\n    emitEvent(this, 'kemet-input-combo-change', {\n      element: this,\n      validity: this.input.validity,\n      status: this.appearance,\n      value: (event.target as HTMLInputElement).value\n    });\n  }\n\n  handleInvalid(event: Event) {\n    this.appearance = EnumAppearances.Error;\n    emitEvent(this, 'kemet-input-combo-invalid', {\n      element: this,\n      validity: this.input.validity,\n      status: this.appearance,\n      value: (event.target as HTMLInputElement).value\n    });\n  }\n\n  /**\n   * Renders the chips from the selections of the combo\n   * @private\n   */\n  makeSelections() {\n    const selections = this.selections.map(selection => html`\n      <li part=\"chip\">\n        <span>${selection.text}</span>\n        <button @click=${this.handleRemoveChip}>&times;</button>\n      </li>\n    `);\n\n    if (this.selections) {\n      return html`<ul part=\"chips\">${selections}</ul>`;\n    }\n\n    return null;\n  }\n\n  /**\n   * calculates padding to properly place the cursor of the input\n   * @private\n   */\n  calculatePadding() {\n    this.paddingLeft = this.chips.offsetWidth + 16;\n  }\n\n  /**\n   * handle removing a chip from the selections\n   * @private\n   */\n  handleRemoveChip(event: MouseEvent) {\n    const chip = (event.target as Element).closest('[part=chip]');\n    if (chip) {\n      const span = chip.querySelector('span');\n      if (span) {\n        const text = span.innerText;\n        this.selections = this.selections.filter(selection => selection.text !== text);\n      }\n    }\n  }\n\n  handleComboClose(event: MouseEvent) {\n    if (event.target !== this && this.combo) {\n      this.combo.show = false;\n    }\n  }\n\n  handleKeydown(event: KeyboardEvent) {\n    if (event.key === EnumKeyCodes.ESCAPE) {\n      this.combo.show = false;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-input-combo': InputCombo\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-input-combo-height: 50px;\n  --kemet-input-combo-color: var(--kemet-color-font-base);\n  --kemet-input-combo-border: 1px solid var(--kemet-input-combo-color);\n  --kemet-input-combo-padding-y: 0.5rem;\n  --kemet-input-combo-padding-x: 1rem;\n  --kemet-input-combo-icon-gap: 3rem;\n  --kemet-input-combo-font-color: var(--kemet-input-combo-color);\n  --kemet-input-combo-chip-font-color: var(--kemet-color-font-inverse-base);\n  --kemet-input-combo-chip-background-color: var(--kemet-color-background-inverse);\n\n  /* private */\n  --_kemet-input-combo-border-radius: var(--kemet-input-combo-border-radius);\n  --_kemet-input-combo-background-color: transparent;\n  --_kemet-input-combo-icon-left-padding: var(--kemet-input-combo-padding-x);\n  --_kemet-input-combo-icon-right-padding: var(--kemet-input-combo-padding-x);\n\n  position: relative;\n  display: block;\n}\n\ninput {\n  color: var(--kemet-input-combo-font-color);\n  display: block;\n  font-size: 1rem;\n  width: 100%;\n  height: var(--kemet-input-combo-height);\n  border: var(--kemet-input-combo-border);\n  appearance: none;\n  box-sizing: border-box;\n  background-color: var(--_kemet-input-combo-background-color);\n  border-radius: var(--_kemet-input-combo-border-radius);\n  padding-left: var(--_kemet-input-combo-icon-left-padding);\n  padding-right: var(--_kemet-input-combo-icon-right-padding);\n  padding-top: var(--kemet-input-combo-padding-y);\n  padding-bottom: var(--kemet-input-combo-padding-y);\n}\n\n:host([polarity=dark]) {\n  --kemet-input-combo-color: var(--kemet-color-font-inverse-base);\n  --kemet-input-combo-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([icon-left]) {\n  --_kemet-input-combo-icon-left-padding: var(--kemet-input-combo-icon-gap);\n}\n\n:host([icon-right]) {\n  --_kemet-input-combo-icon-right-padding: var(--kemet-input-combo-icon-gap);\n}\n\n:host([appearance=brand]) {\n  --kemet-input-combo-color: var(--kemet-color-brand-primary-darker);\n}\n\n:host([appearance=error]) {\n  --kemet-input-combo-color: var(--kemet-color-font-error);\n}\n\n:host([appearance=success]) {\n  --kemet-input-combo-color: var(--kemet-color-font-success);\n}\n\n:host([appearance=warning]) {\n  --kemet-input-combo-color: var(--kemet-color-font-warning);\n}\n\n:host([appearance=link]) {\n  --kemet-input-combo-color: var(--kemet-color-font-link);\n}\n\n:host([appearance=brand][filled]) {\n  --_kemet-input-combo-background-color: var(--kemet-color-brand-primary-darker);\n}\n\n:host([appearance=error][filled]) {\n  --_kemet-input-combo-background-color: var(--kemet-color-font-error);\n}\n\n:host([appearance=success][fiiled]) {\n  --_kemet-input-combo-background-color: var(--kemet-color-font-success);\n}\n\n:host([appearance=warning][filled]) {\n  --_kemet-input-combo-background-color: var(--kemet-color-font-warning);\n}\n\n:host([appearance=link][filled]) {\n  --_kemet-input-combo-background-color: var(--kemet-color-font-link);\n}\n\n:host([disabled]) {\n  --kemet-input-combo-color: var(--kemet-color-font-disabled);\n}\n\n:host([rounded]) {\n  --_kemet-input-combo-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm])  {\n  --_kemet-input-combo-border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=lg]) {\n  --_kemet-input-combo-border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl])  {\n  --_kemet-input-combo-border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  --_kemet-input-combo-border-radius: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill])  {\n  --_kemet-input-combo-border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([filled]) {\n  --kemet-input-combo-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-input-combo-background-color: var(--kemet-color-background-inverse);\n  --kemet-input-combo-border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n\nkemet-icon,\n::slotted(kemet-icon) {\n  color: var(--kemet-input-combo-font-color);\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\nkemet-icon.left,\n:host([icon-left]) ::slotted(kemet-icon) {\n  left: 1rem;\n}\n\nkemet-icon.right,\n:host([icon-right]) ::slotted(kemet-icon) {\n  right: 1rem;\n}\n\n\ndiv {\n  display: flex;\n  gap: 1rem;\n  flex-direction: column;\n}\n\nul {\n  display: flex;\n  gap: 0.5rem;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  flex-wrap: wrap;\n}\n\nli {\n  display: flex;\n  gap: 0.5rem;\n  align-items: center;\n  padding: 0.25rem 0.5rem;\n  color: var(--kemet-input-combo-chip-font-color);\n  background-color: var(--kemet-input-combo-chip-background-color);\n}\n\n:host([rounded]) li {\n  border-radius: var(--_kemet-input-combo-border-radius);\n}\n\nbutton {\n  color: inherit;\n  cursor: pointer;\n  font-size: 1.25rem;\n  padding: 0;\n  border: 0;\n  background-color: transparent\n}\n`;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/elements/input-combo/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/input-combo/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, query, state } from '../../utilities/decorators';\nimport { live } from 'lit/directives/live.js';\nimport { emitEvent } from '../../utilities/events';\nimport { EnumKeyCodes, EnumAppearances, TypeRoundedSizes, TypeAppearance, EnumRoundedSizes } from '../../utilities/constants';\nimport HTMLKemetFieldElement from '../field';\nimport HTMLKemetComboElement from '../combo';\nimport styles from './styles.css.ts';\n\nexport interface InterfaceSelections {\n  element: HTMLUListElement;\n  text: string;\n  id: string;\n}\n\n/**\n * @since 3.1.0\n * @status stable\n *\n * @tagname kemet-multi-input\n * @summary An input element that accepts multiple items from a combo.\n * @ssrsafe yes\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 {boolean} disabled - The disable attribute\n * @prop {boolean} required - The required attribute\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 {EnumRoundedSizes} rounded - Displays rounded corners\n * @prop {boolean} filled - Displays a filled input box\n * @prop {ValidityState} validity - The HTML5 validity object.\n\n *\n * @csspart input\n *\n * @cssproperty --kemet-input-combo-height - The height of the input.\n * @cssproperty --kemet-input-combo-color - The color of the input.\n * @cssproperty --kemet-input-combo-border - The border of the input.\n * @cssproperty --kemet-input-combo-padding-y - The padding on the input.\n * @cssproperty --kemet-input-combo-padding-x - The padding on the input.\n * @cssproperty --kemet-input-combo-icon-gap - The icon gap of the input.\n * @cssproperty --kemet-input-combo-font-color - The font color of the input.\n * @cssproperty --kemet-input-combo-chip-font-color - The font color of the chip.\n * @cssproperty --kemet-input-combo-chip-background-color - The background color of the chip.\n *\n * @event kemet-input-combo-focus - Fires when the input receives focus\n * @event kemet-input-combo-blur - Fires when the input loses focus\n * @event kemet-input-combo-input - Fires when the input receives input\n * @event kemet-input-combo-change - Fires when the input changes\n * @event kemet-input-combo-invalid - Fires when the input is invalid\n *\n */\n\n@customElement('kemet-input-combo')\nexport default class InputCombo extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  slug: string = 'input';\n\n  @property({ type: String })\n  placeholder: string = '';\n\n  @property({ type: Boolean })\n  disabled: boolean = false;\n\n  @property({ type: Boolean })\n  filled: boolean = false;\n\n  @property({ type: String,reflect: true })\n  rounded?: EnumRoundedSizes;\n\n  @property({ type: String })\n  name: string = 'input';\n\n  @property({ reflect: true })\n  appearance?: EnumAppearances;\n\n  @property({ type: Boolean })\n  required: boolean = false;\n\n  @property({ type: Boolean })\n  invalid!: boolean;\n\n  @property({ type: Boolean, attribute: 'validate-on-blur' })\n  validateOnBlur: boolean = false;\n\n  @state()\n  value: string = '';\n\n  @state()\n  selections: InterfaceSelections[] = [];\n\n  @state()\n  paddingLeft!: number;\n\n  @state()\n  field!: HTMLKemetFieldElement;\n\n  @state()\n  combo!: HTMLKemetComboElement;\n\n  @query('[part=chips]')\n  chips!: { offsetWidth: number; };\n\n  @query('input')\n  input!: HTMLInputElement;\n\n  firstUpdated() {\n    // elements\n    this.field = this.closest('kemet-field') as HTMLKemetFieldElement;\n    this.combo = this.field.querySelector('kemet-combo') as HTMLKemetComboElement;\n\n    document.addEventListener('click', this.handleComboClose.bind(this));\n\n    if (this.combo) {\n      this.combo.addEventListener('kemet-combo-selection', (event: Event) => this.addComboItem(event));\n    }\n  }\n\n  updated() {\n    if (this.chips) this.calculatePadding();\n  }\n\n  render() {\n    return html`\n      <div>\n        <input\n          part=\"input\"\n          id=${this.slug}\n          name=${this.name}\n          placeholder=${this.placeholder}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n          @input=${this.handleInput}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}\n          @change=${this.handleChange}\n          @invalid=${this.handleInvalid}\n          @keydown=${this.handleKeydown}\n          .value=${live(this.value)}\n        />\n         ${this.makeSelections()}\n      </div>\n    `;\n  }\n\n  /**\n   * Handles when a selection is made from a combo\n   * @private\n   * @param event\n   */\n\n  addComboItem(event: Event) {\n    this.value = '';\n    this.appearance = EnumAppearances.Neutral;\n    const isPresent = this.selections.find(selection => selection.id === (event as CustomEvent).detail.id);\n    if (!isPresent) this.selections = [...this.selections, (event as CustomEvent).detail];\n  }\n\n  /**\n   * Handles when the input receives input\n   * @private\n   */\n  handleInput(event: Event) {\n    this.value = (event.target as HTMLInputElement).value;\n    emitEvent(this, 'kemet-input-combo-input', {\n      element: this,\n      validity: this.input.validity,\n      status: this.appearance,\n      value: (event.target as HTMLInputElement).value\n    });\n  }\n\n  /**\n   * Handles when the input is focused\n   */\n  handleFocus() {\n    emitEvent(this, 'kemet-input-combo-focus', { element: this });\n  }\n\n  handleBlur() {\n    emitEvent(this, 'kemet-input-combo-blur', { element: this });\n    if (this.validateOnBlur) {\n      this.input.checkValidity();\n    }\n  }\n\n  handleChange(event: Event) {\n    emitEvent(this, 'kemet-input-combo-change', {\n      element: this,\n      validity: this.input.validity,\n      status: this.appearance,\n      value: (event.target as HTMLInputElement).value\n    });\n  }\n\n  handleInvalid(event: Event) {\n    this.appearance = EnumAppearances.Error;\n    emitEvent(this, 'kemet-input-combo-invalid', {\n      element: this,\n      validity: this.input.validity,\n      status: this.appearance,\n      value: (event.target as HTMLInputElement).value\n    });\n  }\n\n  /**\n   * Renders the chips from the selections of the combo\n   * @private\n   */\n  makeSelections() {\n    const selections = this.selections.map(selection => html`\n      <li part=\"chip\">\n        <span>${selection.text}</span>\n        <button @click=${this.handleRemoveChip}>&times;</button>\n      </li>\n    `);\n\n    if (this.selections) {\n      return html`<ul part=\"chips\">${selections}</ul>`;\n    }\n\n    return null;\n  }\n\n  /**\n   * calculates padding to properly place the cursor of the input\n   * @private\n   */\n  calculatePadding() {\n    this.paddingLeft = this.chips.offsetWidth + 16;\n  }\n\n  /**\n   * handle removing a chip from the selections\n   * @private\n   */\n  handleRemoveChip(event: MouseEvent) {\n    const chip = (event.target as Element).closest('[part=chip]');\n    if (chip) {\n      const span = chip.querySelector('span');\n      if (span) {\n        const text = span.innerText;\n        this.selections = this.selections.filter(selection => selection.text !== text);\n      }\n    }\n  }\n\n  handleComboClose(event: MouseEvent) {\n    if (event.target !== this && this.combo) {\n      this.combo.show = false;\n    }\n  }\n\n  handleKeydown(event: KeyboardEvent) {\n    if (event.key === EnumKeyCodes.ESCAPE) {\n      this.combo.show = false;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-input-combo': InputCombo\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","export const emitEvent = (element: HTMLElement, name: string, detail: any, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-input-combo-height: 50px;\n  --kemet-input-combo-color: var(--kemet-color-font-base);\n  --kemet-input-combo-border: 1px solid var(--kemet-input-combo-color);\n  --kemet-input-combo-padding-y: 0.5rem;\n  --kemet-input-combo-padding-x: 1rem;\n  --kemet-input-combo-icon-gap: 3rem;\n  --kemet-input-combo-font-color: var(--kemet-input-combo-color);\n  --kemet-input-combo-chip-font-color: var(--kemet-color-font-inverse-base);\n  --kemet-input-combo-chip-background-color: var(--kemet-color-background-inverse);\n\n  /* private */\n  --_kemet-input-combo-border-radius: var(--kemet-input-combo-border-radius);\n  --_kemet-input-combo-background-color: transparent;\n  --_kemet-input-combo-icon-left-padding: var(--kemet-input-combo-padding-x);\n  --_kemet-input-combo-icon-right-padding: var(--kemet-input-combo-padding-x);\n\n  position: relative;\n  display: block;\n}\n\ninput {\n  color: var(--kemet-input-combo-font-color);\n  display: block;\n  font-size: 1rem;\n  width: 100%;\n  height: var(--kemet-input-combo-height);\n  border: var(--kemet-input-combo-border);\n  appearance: none;\n  box-sizing: border-box;\n  background-color: var(--_kemet-input-combo-background-color);\n  border-radius: var(--_kemet-input-combo-border-radius);\n  padding-left: var(--_kemet-input-combo-icon-left-padding);\n  padding-right: var(--_kemet-input-combo-icon-right-padding);\n  padding-top: var(--kemet-input-combo-padding-y);\n  padding-bottom: var(--kemet-input-combo-padding-y);\n}\n\n:host([polarity=dark]) {\n  --kemet-input-combo-color: var(--kemet-color-font-inverse-base);\n  --kemet-input-combo-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([icon-left]) {\n  --_kemet-input-combo-icon-left-padding: var(--kemet-input-combo-icon-gap);\n}\n\n:host([icon-right]) {\n  --_kemet-input-combo-icon-right-padding: var(--kemet-input-combo-icon-gap);\n}\n\n:host([appearance=brand]) {\n  --kemet-input-combo-color: var(--kemet-color-brand-primary-darker);\n}\n\n:host([appearance=error]) {\n  --kemet-input-combo-color: var(--kemet-color-font-error);\n}\n\n:host([appearance=success]) {\n  --kemet-input-combo-color: var(--kemet-color-font-success);\n}\n\n:host([appearance=warning]) {\n  --kemet-input-combo-color: var(--kemet-color-font-warning);\n}\n\n:host([appearance=link]) {\n  --kemet-input-combo-color: var(--kemet-color-font-link);\n}\n\n:host([appearance=brand][filled]) {\n  --_kemet-input-combo-background-color: var(--kemet-color-brand-primary-darker);\n}\n\n:host([appearance=error][filled]) {\n  --_kemet-input-combo-background-color: var(--kemet-color-font-error);\n}\n\n:host([appearance=success][fiiled]) {\n  --_kemet-input-combo-background-color: var(--kemet-color-font-success);\n}\n\n:host([appearance=warning][filled]) {\n  --_kemet-input-combo-background-color: var(--kemet-color-font-warning);\n}\n\n:host([appearance=link][filled]) {\n  --_kemet-input-combo-background-color: var(--kemet-color-font-link);\n}\n\n:host([disabled]) {\n  --kemet-input-combo-color: var(--kemet-color-font-disabled);\n}\n\n:host([rounded]) {\n  --_kemet-input-combo-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm])  {\n  --_kemet-input-combo-border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=lg]) {\n  --_kemet-input-combo-border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl])  {\n  --_kemet-input-combo-border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n  --_kemet-input-combo-border-radius: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill])  {\n  --_kemet-input-combo-border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([filled]) {\n  --kemet-input-combo-font-color: var(--kemet-color-font-inverse-base);\n  --_kemet-input-combo-background-color: var(--kemet-color-background-inverse);\n  --kemet-input-combo-border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n\nkemet-icon,\n::slotted(kemet-icon) {\n  color: var(--kemet-input-combo-font-color);\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\nkemet-icon.left,\n:host([icon-left]) ::slotted(kemet-icon) {\n  left: 1rem;\n}\n\nkemet-icon.right,\n:host([icon-right]) ::slotted(kemet-icon) {\n  right: 1rem;\n}\n\n\ndiv {\n  display: flex;\n  gap: 1rem;\n  flex-direction: column;\n}\n\nul {\n  display: flex;\n  gap: 0.5rem;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  flex-wrap: wrap;\n}\n\nli {\n  display: flex;\n  gap: 0.5rem;\n  align-items: center;\n  padding: 0.25rem 0.5rem;\n  color: var(--kemet-input-combo-chip-font-color);\n  background-color: var(--kemet-input-combo-chip-background-color);\n}\n\n:host([rounded]) li {\n  border-radius: var(--_kemet-input-combo-border-radius);\n}\n\nbutton {\n  color: inherit;\n  cursor: pointer;\n  font-size: 1.25rem;\n  padding: 0;\n  border: 0;\n  background-color: transparent\n}\n`;\n"],"mappings":"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","names":[]}

package/dist/elements/input-file/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/input-file/index.ts","../../../src/utilities/decorators.ts","../../../src/elements/input-file/styles.css.ts","../../../src/elements/input-file/loaders.css.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from '../../utilities/decorators';\nimport styles from './styles.css.ts';\nimport loaderStyles from './loaders.css.ts';\nimport { emitEvent } from '../../utilities/events';\n\nconst formatBytes = (bytes: number, decimals = 2) => {\n  if (bytes === 0) return '0 Bytes';\n\n  const k = 1024;\n  const dm = decimals < 0 ? 0 : decimals;\n  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];\n\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n\n  return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;\n};\n\n/**\n * @since 1.3.0\n * @status stable\n *\n * @tagname kemet-input-file\n * @summary Displays a file to be uploaded.\n * @ssrsafe yes\n *\n * @prop {string} name - The name of the file\n * @prop {number} loaded - The number of bytes loaded\n * @prop {number} size - The file size in bytes\n * @prop {string} type - The file type\n * @prop {string} status - The status of the file. Values are complete | uploading | error.\n * @prop {number} percent - Percentage of file completion that's calculated by the loaded property.\n * @prop {string} message - An error message to give to users\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @cssproperty --kemet-upload-file-color - The default text color.\n * @cssproperty --kemet-upload-file-padding - The padding around the file.\n * @cssproperty --kemet-upload-file-border - The border around the file.\n *\n * @csspart percentage - Area that displays the percentage.\n * @csspart filename - Area that displays file name.\n * @csspart loaded - Area that displays how much has uploaded.\n * @csspart message - Area for the error message.\n * @csspart indicator - Area for status icon.\n *\n * @fires kemet-input-file-mounted - Fired when the input file is mounted to the DOM\n * @detail {HTMLElement} element - The input file element\n */\n\n@customElement('kemet-input-file')\nexport default class InputFile extends LitElement {\n  static styles = [styles, loaderStyles];\n\n  @property({ type: String })\n  name!: string;\n\n  @property({ type: Number })\n  loaded: number = 0;\n\n  @property({ type: Number })\n  size: number = 0;\n\n  @property({ type: String })\n  type!: string;\n\n  @property({ type: String, reflect: true })\n  status!: string;\n\n  @property({ type: Number })\n  percent: number = 0;\n\n  @property({ type: String })\n  message!: string;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-input-file-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  updated() {\n    this.percent = this.calculatePercent();\n  }\n\n  render() {\n    return html`\n      <div class=\"percentage\" part=\"percentage\">\n        <span>${this.percent}%</span>\n      </div>\n      <div>\n        <h3 part=\"filename\">${this.name}</h3>\n        <span part=\"loaded\">${formatBytes(this.loaded)} / ${formatBytes(this.size)}</span>\n        ${this.message ? html`<div class=\"message\" part=\"message\">${this.message}</div>` : null}\n      </div>\n      <div class=\"indicator\" part=\"indicator\">\n        ${this.getStatusIcon()}\n      </div>\n    `;\n  }\n\n  calculatePercent() {\n    const percent = Math.round((this.loaded * 100.0) / this.size);\n    return percent > 100 ? 100 : percent;\n  }\n\n  getStatusIcon() {\n    if (this.status === 'uploading') {\n      return html`<div class=\"lds-ripple\"><div></div><div></div></div>`;\n    }\n\n    if (this.status === 'complete') {\n      return html`<kemet-icon name=\"check-circle\" size=\"48\"></kemet-icon>`;\n    }\n\n    if (this.status === 'error') {\n      return html`<kemet-icon name=\"exclamation-circle\" size=\"48\"></kemet-icon>`;\n    }\n\n    return null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-input-file': InputFile\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","import { css } from 'lit';\n\nexport default css`:host {\n  --kemet-upload-file-ripple-color: var(--kemet-color-font-active);\n  --kemet-upload-file-color: inherit;\n  --kemet-upload-file-padding: 0.5rem 1rem;\n  --kemet-upload-file-border: 1px solid;\n\n  color: var(--kemet-upload-file-color);\n  display: grid;\n  gap: 1rem;\n  grid-template-columns: auto 1fr auto;\n  align-items: center;\n  height: 100%;\n  max-height: 50%;\n  padding: var(--kemet-upload-file-padding);\n  border: var(--kemet-upload-file-border);\n}\n\n:host([status=error]) {\n  border: 1px solid var(--kemet-color-font-error);\n}\n\n:host([status=complete]) {\n  border: 1px solid var(--kemet-color-font-success);\n}\n\nh3 {\n  margin: 0;\n}\n\n.percentage {\n  font-size: clamp(2rem, 3vw, 2.5rem);\n  align-self: center;\n  justify-self: center;\n}\n\n.indicator {\n  transform: scale(0.8);\n}\n\n:host([status=complete]) .message,\n:host([status=complete]) .indicator {\n  color: rgb(var(--kemet-color-success));\n}\n\n:host([status=error]) .message,\n:host([status=error]) .indicator {\n  color: rgb(var(--kemet-color-error));\n}\n`;\n","import { css } from 'lit';\n\nexport default css`.lds-ripple {\n  display: inline-block;\n  position: relative;\n  width: 80px;\n  height: 80px;\n}\n\n.lds-ripple div {\n  position: absolute;\n  border: 4px solid var(--kemet-upload-file-ripple-color);\n  opacity: 1;\n  border-radius: var(--kemet-border-radius-circle);\n  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;\n}\n\n.lds-ripple div:nth-child(2) {\n  animation-delay: -0.5s;\n}\n\n@keyframes lds-ripple {\n  0% {\n    top: 36px;\n    left: 36px;\n    width: 0;\n    height: 0;\n    opacity: 0;\n  }\n  4.9% {\n    top: 36px;\n    left: 36px;\n    width: 0;\n    height: 0;\n    opacity: 0;\n  }\n  5% {\n    top: 36px;\n    left: 36px;\n    width: 0;\n    height: 0;\n    opacity: 1;\n  }\n  100% {\n    top: 0px;\n    left: 0px;\n    width: 72px;\n    height: 72px;\n    opacity: 0;\n  }\n}\n`;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":"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","names":["css"]}
+{"version":3,"sources":["../../../src/elements/input-file/index.ts","../../../src/utilities/decorators.ts","../../../src/elements/input-file/styles.css.ts","../../../src/elements/input-file/loaders.css.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from '../../utilities/decorators';\nimport styles from './styles.css.ts';\nimport loaderStyles from './loaders.css.ts';\nimport { emitEvent } from '../../utilities/events';\n\nconst formatBytes = (bytes: number, decimals = 2) => {\n  if (bytes === 0) return '0 Bytes';\n\n  const k = 1024;\n  const dm = decimals < 0 ? 0 : decimals;\n  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];\n\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n\n  return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;\n};\n\n/**\n * @since 1.3.0\n * @status stable\n *\n * @tagname kemet-input-file\n * @summary Displays a file to be uploaded.\n * @ssrsafe yes\n *\n * @prop {string} name - The name of the file\n * @prop {number} loaded - The number of bytes loaded\n * @prop {number} size - The file size in bytes\n * @prop {string} type - The file type\n * @prop {string} status - The status of the file. Values are complete | uploading | error.\n * @prop {number} percent - Percentage of file completion that's calculated by the loaded property.\n * @prop {string} message - An error message to give to users\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @cssproperty --kemet-upload-file-color - The default text color.\n * @cssproperty --kemet-upload-file-padding - The padding around the file.\n * @cssproperty --kemet-upload-file-border - The border around the file.\n *\n * @csspart percentage - Area that displays the percentage.\n * @csspart filename - Area that displays file name.\n * @csspart loaded - Area that displays how much has uploaded.\n * @csspart message - Area for the error message.\n * @csspart indicator - Area for status icon.\n *\n * @fires kemet-input-file-mounted - Fired when the input file is mounted to the DOM\n * @detail {HTMLElement} element - The input file element\n */\n\n@customElement('kemet-input-file')\nexport default class InputFile extends LitElement {\n  static styles = [styles, loaderStyles];\n\n  @property({ type: String })\n  name!: string;\n\n  @property({ type: Number })\n  loaded: number = 0;\n\n  @property({ type: Number })\n  size: number = 0;\n\n  @property({ type: String })\n  type!: string;\n\n  @property({ type: String, reflect: true })\n  status!: string;\n\n  @property({ type: Number })\n  percent: number = 0;\n\n  @property({ type: String })\n  message!: string;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-input-file-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  updated() {\n    this.percent = this.calculatePercent();\n  }\n\n  render() {\n    return html`\n      <div class=\"percentage\" part=\"percentage\">\n        <span>${this.percent}%</span>\n      </div>\n      <div>\n        <h3 part=\"filename\">${this.name}</h3>\n        <span part=\"loaded\">${formatBytes(this.loaded)} / ${formatBytes(this.size)}</span>\n        ${this.message ? html`<div class=\"message\" part=\"message\">${this.message}</div>` : null}\n      </div>\n      <div class=\"indicator\" part=\"indicator\">\n        ${this.getStatusIcon()}\n      </div>\n    `;\n  }\n\n  calculatePercent() {\n    const percent = Math.round((this.loaded * 100.0) / this.size);\n    return percent > 100 ? 100 : percent;\n  }\n\n  getStatusIcon() {\n    if (this.status === 'uploading') {\n      return html`<div class=\"lds-ripple\"><div></div><div></div></div>`;\n    }\n\n    if (this.status === 'complete') {\n      return html`<kemet-icon name=\"check-circle\" size=\"48\"></kemet-icon>`;\n    }\n\n    if (this.status === 'error') {\n      return html`<kemet-icon name=\"exclamation-circle\" size=\"48\"></kemet-icon>`;\n    }\n\n    return null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-input-file': InputFile\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","import { css } from 'lit';\n\nexport default css`:host {\n  --kemet-upload-file-ripple-color: var(--kemet-color-font-active);\n  --kemet-upload-file-color: inherit;\n  --kemet-upload-file-padding: 0.5rem 1rem;\n  --kemet-upload-file-border: 1px solid;\n\n  color: var(--kemet-upload-file-color);\n  display: grid;\n  gap: 1rem;\n  grid-template-columns: auto 1fr auto;\n  align-items: center;\n  height: 100%;\n  max-height: 50%;\n  padding: var(--kemet-upload-file-padding);\n  border: var(--kemet-upload-file-border);\n}\n\n:host([status=error]) {\n  border: 1px solid var(--kemet-color-font-error);\n}\n\n:host([status=complete]) {\n  border: 1px solid var(--kemet-color-font-success);\n}\n\nh3 {\n  margin: 0;\n}\n\n.percentage {\n  font-size: clamp(2rem, 3vw, 2.5rem);\n  align-self: center;\n  justify-self: center;\n}\n\n.indicator {\n  transform: scale(0.8);\n}\n\n:host([status=complete]) .message,\n:host([status=complete]) .indicator {\n  color: rgb(var(--kemet-color-success));\n}\n\n:host([status=error]) .message,\n:host([status=error]) .indicator {\n  color: rgb(var(--kemet-color-error));\n}\n`;\n","import { css } from 'lit';\n\nexport default css`.lds-ripple {\n  display: inline-block;\n  position: relative;\n  width: 80px;\n  height: 80px;\n}\n\n.lds-ripple div {\n  position: absolute;\n  border: 4px solid var(--kemet-upload-file-ripple-color);\n  opacity: 1;\n  border-radius: var(--kemet-border-radius-circle);\n  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;\n}\n\n.lds-ripple div:nth-child(2) {\n  animation-delay: -0.5s;\n}\n\n@keyframes lds-ripple {\n  0% {\n    top: 36px;\n    left: 36px;\n    width: 0;\n    height: 0;\n    opacity: 0;\n  }\n  4.9% {\n    top: 36px;\n    left: 36px;\n    width: 0;\n    height: 0;\n    opacity: 0;\n  }\n  5% {\n    top: 36px;\n    left: 36px;\n    width: 0;\n    height: 0;\n    opacity: 1;\n  }\n  100% {\n    top: 0px;\n    left: 0px;\n    width: 72px;\n    height: 72px;\n    opacity: 0;\n  }\n}\n`;\n","export const emitEvent = (element: HTMLElement, name: string, detail: any, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":"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","names":["css"]}

package/dist/elements/input-files/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/input-files/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/input-files/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { emitEvent } from '../../utilities/events';\nimport HTMLKemetInputFileElement from '../input-file';\nimport styles from './styles.css.ts';\n\n\nexport interface InterfaceUploadChangeDetails {\n  event: Event | DragEvent;\n  files: FileList;\n  fileElement: HTMLKemetInputFileElement;\n}\n\nconst preventDefaults = (event: Event) => {\n  event.preventDefault();\n  event.stopPropagation();\n};\n\n/**\n * @since 1.3.0\n * @status stable\n *\n * @tagname kemet-input-files\n * @summary An interface for inputing files.\n * @ssrsafe yes\n *\n * @prop {string} slug - A unique identifier for the component\n * @prop {string} accept - Determines what file types are accepted\n * @prop {boolean} multiple - Allows for multiple files\n * @prop {boolean} over - Automatically is true when a file is being dragged over the upload area\n * @prop {string} heading - Descriptive text for the upload area\n * @prop {boolean} mobile - Displays the component in a mobile context\n * @prop {string} breakpoint - Controls the point at which the component is considered mobile\n * @prop {boolean} noDragDrop - Is true if drag and drop support is not detected\n * @prop {number} maxSize - The maximum file size for uploads\n * @prop {string} buttonLabel - The browse files button text\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @event kemet-input-files-change - Fires when files have been added\n *\n * @csspart upload - The area where files are dropped.\n * @csspart heading - The description in the upload area.\n * @csspart button - The button in the upload area.\n * @csspart files - The area where uploaded files are listed.\n *\n * @cssproperty --kemet-upload-color - The default text color.\n * @cssproperty --kemet-upload-height - The height.\n * @cssproperty --kemet-upload-border - The border.\n * @cssproperty --kemet-upload-background-color - The background color.\n *\n * @fires kemet-input-files-mounted - Fired when the input files is mounted to the DOM\n * @detail {HTMLElement} element - The input files element\n */\n\n@customElement('kemet-input-files')\nexport default class InputFiles extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  slug: string = 'upload';\n\n  @property({ type: String })\n  accept!: string;\n\n  @property({ type: Boolean })\n  multiple!: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  over!: boolean;\n\n  @property({ type: String })\n  heading: string = 'Drag & Drop Files';\n\n  @property({ type: Boolean, reflect: true })\n  mobile!: boolean;\n\n  @property({ type: String, reflect: true })\n  breakpoint: string = '600px';\n\n  @property({ type: Boolean, reflect: true, attribute: 'no-drag-drop' })\n  noDragDrop!: boolean;\n\n  @property({ type: Number, attribute: 'max-size' })\n  maxSize!: number;\n\n  @property({ type: String, attribute: 'button-label' })\n  buttonLabel: string = 'Browse Files';\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @state()\n  fileInputElement!: HTMLInputElement;\n\n  @state()\n  upload!: HTMLElement;\n\n  firstUpdated() {\n    this.fileInputElement = this.shadowRoot?.querySelector('[type=\"file\"]') as HTMLInputElement;\n    this.upload = this.shadowRoot?.querySelector('.upload') as HTMLElement;\n\n    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n      this.upload?.addEventListener(eventName, event => preventDefaults(event), false);\n    });\n\n    ['dragenter', 'dragover'].forEach((eventName) => {\n      this.upload?.addEventListener(eventName, () => { this.over = true; }, false);\n    });\n\n    ['dragleave', 'drop'].forEach((eventName) => {\n      this.upload.addEventListener(eventName, () => { this.over = false; }, false);\n    });\n\n    this.isMobile();\n    this.hasDragDrop();\n\n    window.addEventListener('resize', () => { this.isMobile(); });\n    this.upload.addEventListener('drop', event => this.handleDrop(event), false);\n\n    emitEvent(this, 'kemet-input-files-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    return html`\n      <div class=\"upload\" part=\"upload\">\n        <kemet-icon name=\"cloud-arrow-up\" size=\"128\"></kemet-icon>\n        <input\n          type=\"file\"\n          id=${this.slug}\n          ?multiple=${this.multiple}\n          accept=${ifDefined(this.accept) ? this.accept : null}\n          @change=${(event: Event) => this.handleChange(event)}\n        />\n        <h3 class=\"heading\" part=\"heading\">${this.heading}</h3>\n        <label class=\"button\" part=\"button\" for=${this.slug}>${this.buttonLabel}</label>\n      </div>\n      <div class=\"files\" part=\"files\">\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  handleChange(event: Event) {\n    emitEvent(this, 'kemet-input-files-change', {\n      event,\n      files: this.fileInputElement.files,\n      fileElement: this.fileInputElement,\n    });\n  }\n\n  handleDrop(event: DragEvent) {\n    emitEvent(this, 'kemet-input-files-change', {\n      event,\n      files: event?.dataTransfer?.files || [],\n      fileElement: this.fileInputElement,\n    });\n  }\n\n  isMobile() {\n    const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);\n    this.mobile = mediaQuery.matches;\n  }\n\n  hasDragDrop() {\n    this.noDragDrop = !('draggable' in document.createElement('span'));\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-input-files': InputFiles\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  --kemet-upload-color: inherit;\n  --kemet-upload-height: 364px;\n  --kemet-upload-border: 0;\n  --kemet-upload-background-color: transparent;\n\n  color: var(--kemet-upload-color);\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  height: var(--kemet-upload-height);\n  border: var(--kemet-upload-border);\n  background-color: var(--kemet-upload-background-color);\n}\n\n:host([mobile]) {\n  display: flex;\n  gap: 2rem;\n  flex-direction: column;\n  height: auto;\n}\n\ninput {\n  display: none;\n}\n\n.button {\n  cursor: pointer;\n  font-size: 1rem;\n  display: block;\n  color: inherit;\n  padding: 0.5rem 1rem;\n  border: 1px solid;\n  background-color: transparent;\n}\n\n.upload {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: var(--kemet-upload-margin);\n  flex-direction: column;\n  border: 2px dashed;\n}\n\n:host([over]) .upload {\n  background-color: var(--kemet-color-background-success);\n}\n\n:host([mobile]) .upload {\n  height: 280px;\n}\n\n.files {\n  display: flex;\n  gap: 1rem;\n  flex-direction: column;\n  padding: 0 1rem;\n  overflow: auto;\n}\n\n:host([mobile]) .files {\n  padding: 0;\n}\n\n.heading {\n  font-size: 1.25rem;\n  margin: 0 0 2rem 0;\n}\n\n:host([no-drag-drop]) .heading {\n  display: none;\n}\n`;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/elements/input-files/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/input-files/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { emitEvent } from '../../utilities/events';\nimport HTMLKemetInputFileElement from '../input-file';\nimport styles from './styles.css.ts';\n\n\nexport interface InterfaceUploadChangeDetails {\n  event: Event | DragEvent;\n  files: FileList;\n  fileElement: HTMLKemetInputFileElement;\n}\n\nconst preventDefaults = (event: Event) => {\n  event.preventDefault();\n  event.stopPropagation();\n};\n\n/**\n * @since 1.3.0\n * @status stable\n *\n * @tagname kemet-input-files\n * @summary An interface for inputing files.\n * @ssrsafe yes\n *\n * @prop {string} slug - A unique identifier for the component\n * @prop {string} accept - Determines what file types are accepted\n * @prop {boolean} multiple - Allows for multiple files\n * @prop {boolean} over - Automatically is true when a file is being dragged over the upload area\n * @prop {string} heading - Descriptive text for the upload area\n * @prop {boolean} mobile - Displays the component in a mobile context\n * @prop {string} breakpoint - Controls the point at which the component is considered mobile\n * @prop {boolean} noDragDrop - Is true if drag and drop support is not detected\n * @prop {number} maxSize - The maximum file size for uploads\n * @prop {string} buttonLabel - The browse files button text\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @event kemet-input-files-change - Fires when files have been added\n *\n * @csspart upload - The area where files are dropped.\n * @csspart heading - The description in the upload area.\n * @csspart button - The button in the upload area.\n * @csspart files - The area where uploaded files are listed.\n *\n * @cssproperty --kemet-upload-color - The default text color.\n * @cssproperty --kemet-upload-height - The height.\n * @cssproperty --kemet-upload-border - The border.\n * @cssproperty --kemet-upload-background-color - The background color.\n *\n * @fires kemet-input-files-mounted - Fired when the input files is mounted to the DOM\n * @detail {HTMLElement} element - The input files element\n */\n\n@customElement('kemet-input-files')\nexport default class InputFiles extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  slug: string = 'upload';\n\n  @property({ type: String })\n  accept!: string;\n\n  @property({ type: Boolean })\n  multiple!: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  over!: boolean;\n\n  @property({ type: String })\n  heading: string = 'Drag & Drop Files';\n\n  @property({ type: Boolean, reflect: true })\n  mobile!: boolean;\n\n  @property({ type: String, reflect: true })\n  breakpoint: string = '600px';\n\n  @property({ type: Boolean, reflect: true, attribute: 'no-drag-drop' })\n  noDragDrop!: boolean;\n\n  @property({ type: Number, attribute: 'max-size' })\n  maxSize!: number;\n\n  @property({ type: String, attribute: 'button-label' })\n  buttonLabel: string = 'Browse Files';\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @state()\n  fileInputElement!: HTMLInputElement;\n\n  @state()\n  upload!: HTMLElement;\n\n  firstUpdated() {\n    this.fileInputElement = this.shadowRoot?.querySelector('[type=\"file\"]') as HTMLInputElement;\n    this.upload = this.shadowRoot?.querySelector('.upload') as HTMLElement;\n\n    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n      this.upload?.addEventListener(eventName, event => preventDefaults(event), false);\n    });\n\n    ['dragenter', 'dragover'].forEach((eventName) => {\n      this.upload?.addEventListener(eventName, () => { this.over = true; }, false);\n    });\n\n    ['dragleave', 'drop'].forEach((eventName) => {\n      this.upload.addEventListener(eventName, () => { this.over = false; }, false);\n    });\n\n    this.isMobile();\n    this.hasDragDrop();\n\n    window.addEventListener('resize', () => { this.isMobile(); });\n    this.upload.addEventListener('drop', event => this.handleDrop(event), false);\n\n    emitEvent(this, 'kemet-input-files-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    return html`\n      <div class=\"upload\" part=\"upload\">\n        <kemet-icon name=\"cloud-arrow-up\" size=\"128\"></kemet-icon>\n        <input\n          type=\"file\"\n          id=${this.slug}\n          ?multiple=${this.multiple}\n          accept=${ifDefined(this.accept) ? this.accept : null}\n          @change=${(event: Event) => this.handleChange(event)}\n        />\n        <h3 class=\"heading\" part=\"heading\">${this.heading}</h3>\n        <label class=\"button\" part=\"button\" for=${this.slug}>${this.buttonLabel}</label>\n      </div>\n      <div class=\"files\" part=\"files\">\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  handleChange(event: Event) {\n    emitEvent(this, 'kemet-input-files-change', {\n      event,\n      files: this.fileInputElement.files,\n      fileElement: this.fileInputElement,\n    });\n  }\n\n  handleDrop(event: DragEvent) {\n    emitEvent(this, 'kemet-input-files-change', {\n      event,\n      files: event?.dataTransfer?.files || [],\n      fileElement: this.fileInputElement,\n    });\n  }\n\n  isMobile() {\n    const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);\n    this.mobile = mediaQuery.matches;\n  }\n\n  hasDragDrop() {\n    this.noDragDrop = !('draggable' in document.createElement('span'));\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-input-files': InputFiles\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","export const emitEvent = (element: HTMLElement, name: string, detail: any, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  --kemet-upload-color: inherit;\n  --kemet-upload-height: 364px;\n  --kemet-upload-border: 0;\n  --kemet-upload-background-color: transparent;\n\n  color: var(--kemet-upload-color);\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  height: var(--kemet-upload-height);\n  border: var(--kemet-upload-border);\n  background-color: var(--kemet-upload-background-color);\n}\n\n:host([mobile]) {\n  display: flex;\n  gap: 2rem;\n  flex-direction: column;\n  height: auto;\n}\n\ninput {\n  display: none;\n}\n\n.button {\n  cursor: pointer;\n  font-size: 1rem;\n  display: block;\n  color: inherit;\n  padding: 0.5rem 1rem;\n  border: 1px solid;\n  background-color: transparent;\n}\n\n.upload {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: var(--kemet-upload-margin);\n  flex-direction: column;\n  border: 2px dashed;\n}\n\n:host([over]) .upload {\n  background-color: var(--kemet-color-background-success);\n}\n\n:host([mobile]) .upload {\n  height: 280px;\n}\n\n.files {\n  display: flex;\n  gap: 1rem;\n  flex-direction: column;\n  padding: 0 1rem;\n  overflow: auto;\n}\n\n:host([mobile]) .files {\n  padding: 0;\n}\n\n.heading {\n  font-size: 1.25rem;\n  margin: 0 0 2rem 0;\n}\n\n:host([no-drag-drop]) .heading {\n  display: none;\n}\n`;\n"],"mappings":"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","names":[]}

package/dist/elements/input-otp/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/input-otp/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/input-otp/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, queryAll, state } from '../../utilities/decorators';\nimport { EnumKeyCodes } from '../../utilities/constants';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\n\n/**\n * @since 4.1.0\n * @status stable\n *\n * @tagname kemet-input-otp\n * @summary An input element that accepts multiple items from a combo.\n * @ssrsafe yes\n *\n * @prop {number} digits - The number of inputs.\n * @prop {string} pattern - The pattern to match against for stripping characters\n * @prop {string} value - All digits entered by the user combined in one string.\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n *\n * @csspart input - The input elements.\n *\n * @cssproperty --kemet-otp-input-color - The text color of the otp inputs.\n * @cssproperty --kemet-otp-input-min-width - The minimum width of the otp inputs.\n * @cssproperty --kemet-otp-input-font-size - The font size of the otp inputs.\n * @cssproperty --kemet-otp-input-border - The border of the otp inputs.\n * @cssproperty --kemet-otp-input-border-radius - The border radius of the otp inputs.\n *\n * @event kemet-input-otp-completed - Fires when otp is filled out completely\n * @event kemet-input-otp-mounted - Fires when the component is mounted\n *\n */\n\n@customElement('kemet-input-otp')\nexport default class KemetInputOtp extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Number })\n  digits: number = 6;\n\n  @property({ type: String, reflect: true })\n  value: string = '';\n\n  @property()\n  pattern!: string;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @state()\n  autoFocus: boolean = true;\n\n  @state()\n  values: string[] = [];\n\n  @state()\n  lastInput!: string;\n\n  @state()\n  completed: boolean = false;\n\n  @queryAll('input')\n  inputElements!: NodeListOf<HTMLInputElement>;\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-input-otp-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  updated() {\n    this.determineCompleted();\n  }\n\n  render() {\n    return this.makeInputs();\n  }\n\n  determineCompleted() {\n    const hasBlankValues = this.values.includes('');\n    if (this.values.length === this.digits && !hasBlankValues && !this.completed) {\n      emitEvent(this, 'kemet-input-otp-completed', {\n        detail: { value: this.value, element: this },\n        bubbles: true,\n        composed: true,\n      });\n      this.completed = true;\n    }\n  }\n\n  makeInputs() {\n    return Array.from(\n      { length: this.digits },\n      (_, index) => html`\n        <label>\n          <span>Enter digit ${index + 1}</span>\n          <input\n            part=\"input\"\n            id=\"${index}\"\n            maxlength=\"1\"\n            @input=${this.handleInput}\n            @keydown=${this.handleKeyDown}\n            @paste=${this.handlePaste}\n          />\n        </label>\n      `\n    );\n  }\n\n  eatCharacters(inputValue: string) {\n    const regex = new RegExp(this.pattern);\n    return inputValue.replace(regex, '');\n  }\n\n  handleInput(event: InputEvent) {\n    const input = event.target as HTMLInputElement;\n    const currentIndex = parseInt(input.getAttribute('id') ?? '0');\n    const nextInput = this.inputElements[currentIndex + 1];\n\n    if (this.pattern) {\n      input.value = this.eatCharacters(input.value);\n    }\n\n    this.values[currentIndex] = input.value;\n    this.value = this.values.join('');\n    this.lastInput = input.value;\n\n    const fullDigits = this.values.length === this.digits && !!input.value;\n\n    if (!fullDigits) {\n      this.completed = false;\n    }\n\n    if (nextInput && this.autoFocus && !!input.value) {\n      nextInput.focus();\n    }\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    this.autoFocus = event.key !== EnumKeyCodes.BACKSPACE;\n  }\n\n  handlePaste(event: ClipboardEvent) {\n    event.preventDefault();\n    const pasteData = event.clipboardData?.getData('text') ?? '';\n\n    // Trim and limit to number of digits\n    const charactersString = this.eatCharacters(pasteData.trim().slice(0, this.digits).split('').join(''));\n    const charactersArray = charactersString.split('');\n\n    // Fill the inputs and values array one by one\n    charactersArray.forEach((character, index) => {\n      const input = this.inputElements[index];\n      if (input && !!character) {\n        input.value = character;\n        this.values[index] = character;\n      }\n    });\n\n    const lastFilled = this.inputElements[charactersArray.length - 1];\n    lastFilled?.focus();\n    this.value = this.values.join('');\n    this.determineCompleted();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-input-otp': KemetInputOtp\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  --kemet-otp-input-font-color: var(--kemet-color-font-base);\n  --kemet-otp-input-min-width: 3rem;\n  --kemet-otp-input-font-size: 2rem;\n  --kemet-otp-input-border: 1px solid;\n  --kemet-otp-input-border-radius: var(--kemet-border-radius-md);\n\n  display: grid;\n  gap: 1rem;\n  grid-template-columns: repeat(auto-fit, minmax(var(--kemet-otp-input-min-width), 1fr));\n}\n\n:host([polarity=\"dark\"]) {\n  --kemet-otp-input-font-color: var(--kemet-color-font-inverse-base);\n}\n\nlabel {\n  display: flex;\n  aspect-ratio: 4/3;\n}\n\nspan {\n  position: absolute;\n  margin: -1px;\n  width: 1px;\n  height: 1px;\n  display: block;\n  overflow: hidden;\n  border-width: 0;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n}\n\n[part=\"input\"] {\n  color: var(--kemet-otp-input-font-color);\n  text-align: center;\n  width: 100%;\n  height: 100%;\n  font-size: var(--kemet-otp-input-font-size);\n  border: var(--kemet-otp-input-border);\n  border-radius: var(--kemet-otp-input-border-radius);\n}\n`;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/elements/input-otp/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/input-otp/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, queryAll, state } from '../../utilities/decorators';\nimport { EnumKeyCodes } from '../../utilities/constants';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\n\n/**\n * @since 4.1.0\n * @status stable\n *\n * @tagname kemet-input-otp\n * @summary An input element that accepts multiple items from a combo.\n * @ssrsafe yes\n *\n * @prop {number} digits - The number of inputs.\n * @prop {string} pattern - The pattern to match against for stripping characters\n * @prop {string} value - All digits entered by the user combined in one string.\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n *\n * @csspart input - The input elements.\n *\n * @cssproperty --kemet-otp-input-color - The text color of the otp inputs.\n * @cssproperty --kemet-otp-input-min-width - The minimum width of the otp inputs.\n * @cssproperty --kemet-otp-input-font-size - The font size of the otp inputs.\n * @cssproperty --kemet-otp-input-border - The border of the otp inputs.\n * @cssproperty --kemet-otp-input-border-radius - The border radius of the otp inputs.\n *\n * @event kemet-input-otp-completed - Fires when otp is filled out completely\n * @event kemet-input-otp-mounted - Fires when the component is mounted\n *\n */\n\n@customElement('kemet-input-otp')\nexport default class KemetInputOtp extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Number })\n  digits: number = 6;\n\n  @property({ type: String, reflect: true })\n  value: string = '';\n\n  @property()\n  pattern!: string;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  @state()\n  autoFocus: boolean = true;\n\n  @state()\n  values: string[] = [];\n\n  @state()\n  lastInput!: string;\n\n  @state()\n  completed: boolean = false;\n\n  @queryAll('input')\n  inputElements!: NodeListOf<HTMLInputElement>;\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-input-otp-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  updated() {\n    this.determineCompleted();\n  }\n\n  render() {\n    return this.makeInputs();\n  }\n\n  determineCompleted() {\n    const hasBlankValues = this.values.includes('');\n    if (this.values.length === this.digits && !hasBlankValues && !this.completed) {\n      emitEvent(this, 'kemet-input-otp-completed', {\n        detail: { value: this.value, element: this },\n        bubbles: true,\n        composed: true,\n      });\n      this.completed = true;\n    }\n  }\n\n  makeInputs() {\n    return Array.from(\n      { length: this.digits },\n      (_, index) => html`\n        <label>\n          <span>Enter digit ${index + 1}</span>\n          <input\n            part=\"input\"\n            id=\"${index}\"\n            maxlength=\"1\"\n            @input=${this.handleInput}\n            @keydown=${this.handleKeyDown}\n            @paste=${this.handlePaste}\n          />\n        </label>\n      `\n    );\n  }\n\n  eatCharacters(inputValue: string) {\n    const regex = new RegExp(this.pattern);\n    return inputValue.replace(regex, '');\n  }\n\n  handleInput(event: InputEvent) {\n    const input = event.target as HTMLInputElement;\n    const currentIndex = parseInt(input.getAttribute('id') ?? '0');\n    const nextInput = this.inputElements[currentIndex + 1];\n\n    if (this.pattern) {\n      input.value = this.eatCharacters(input.value);\n    }\n\n    this.values[currentIndex] = input.value;\n    this.value = this.values.join('');\n    this.lastInput = input.value;\n\n    const fullDigits = this.values.length === this.digits && !!input.value;\n\n    if (!fullDigits) {\n      this.completed = false;\n    }\n\n    if (nextInput && this.autoFocus && !!input.value) {\n      nextInput.focus();\n    }\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    this.autoFocus = event.key !== EnumKeyCodes.BACKSPACE;\n  }\n\n  handlePaste(event: ClipboardEvent) {\n    event.preventDefault();\n    const pasteData = event.clipboardData?.getData('text') ?? '';\n\n    // Trim and limit to number of digits\n    const charactersString = this.eatCharacters(pasteData.trim().slice(0, this.digits).split('').join(''));\n    const charactersArray = charactersString.split('');\n\n    // Fill the inputs and values array one by one\n    charactersArray.forEach((character, index) => {\n      const input = this.inputElements[index];\n      if (input && !!character) {\n        input.value = character;\n        this.values[index] = character;\n      }\n    });\n\n    const lastFilled = this.inputElements[charactersArray.length - 1];\n    lastFilled?.focus();\n    this.value = this.values.join('');\n    this.determineCompleted();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-input-otp': KemetInputOtp\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","export const emitEvent = (element: HTMLElement, name: string, detail: any, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  --kemet-otp-input-font-color: var(--kemet-color-font-base);\n  --kemet-otp-input-min-width: 3rem;\n  --kemet-otp-input-font-size: 2rem;\n  --kemet-otp-input-border: 1px solid;\n  --kemet-otp-input-border-radius: var(--kemet-border-radius-md);\n\n  display: grid;\n  gap: 1rem;\n  grid-template-columns: repeat(auto-fit, minmax(var(--kemet-otp-input-min-width), 1fr));\n}\n\n:host([polarity=\"dark\"]) {\n  --kemet-otp-input-font-color: var(--kemet-color-font-inverse-base);\n}\n\nlabel {\n  display: flex;\n  aspect-ratio: 4/3;\n}\n\nspan {\n  position: absolute;\n  margin: -1px;\n  width: 1px;\n  height: 1px;\n  display: block;\n  overflow: hidden;\n  border-width: 0;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n}\n\n[part=\"input\"] {\n  color: var(--kemet-otp-input-font-color);\n  text-align: center;\n  width: 100%;\n  height: 100%;\n  font-size: var(--kemet-otp-input-font-size);\n  border: var(--kemet-otp-input-border);\n  border-radius: var(--kemet-otp-input-border-radius);\n}\n`;\n"],"mappings":"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","names":[]}

package/dist/elements/loader/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/loader/index.ts","../../../src/utilities/decorators.ts","../../../src/elements/loader/styles.css.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from '../../utilities/decorators';\nimport styles from './styles.css.ts';\nimport { emitEvent } from '../../utilities/events';\n\nexport enum EnumVariants {\n  NO_BORDER = 'no-border',\n  BORDER_TOP = 'border-top',\n  DOUBLE_BORDER = 'double-border',\n  DOUBLE_SPINNERS = 'double-spinners',\n  THREE_DOTS = 'three-dots',\n  FULL_CIRCLE = 'full-circle',\n  SPINNER = 'spinner',\n  MESH = 'mesh',\n}\n\n/**\n * @since 5.0.0\n * @status stable\n *\n * @tagname kemet-loader\n * @summary Displays animations for a loading state.\n *\n * @prop {string} variant - The style of loader to display\n * @prop {number} size - How large to make the loader.\n * @ssrsafe yes\n *\n * @csspart loader - The main loader container\n *\n * @cssproperty --kemet-loader-color - The color of the loader.\n * @cssproperty --kemet-loader-thickness - The thickness of the loader.\n * @cssproperty --kemet-loader-dot-size - The size of the dots in the loader.\n * @cssproperty --kemet-loader-size - The size of the loader.\n *\n * @fires kemet-loader-mounted - Fired when the loader is mounted to the DOM\n * @detail {HTMLElement} element - The loader element\n */\n@customElement('kemet-loader')\nexport default class KemetLoader extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String, reflect: true })\n  variant: EnumVariants = EnumVariants.NO_BORDER;\n\n  @property({ type: Number })\n  size: number = 48;\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-loader-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n  }\n\n  render() {\n    if (\n      this.variant === EnumVariants.THREE_DOTS ||\n      this.variant === EnumVariants.FULL_CIRCLE ||\n      this.variant === EnumVariants.MESH\n    ) {\n      this.style.setProperty('--kemet-loader-dot-size', `${this.size}px`);\n      return html`\n        <div part=\"loader\">\n          ${this.makeLoader()}\n        </div>\n      `;\n    }\n\n    if (this.variant === EnumVariants.SPINNER) {\n      this.style.setProperty('--kemet-loader-size', `${this.size}px`);\n      return html`\n        <div part=\"loader\">\n          ${this.makeLoader()}\n        </div>\n      `;\n    }\n\n    return html`\n      <div style=\"width: ${this.size}px; height: ${this.size}px;\" part=\"loader\">\n        ${this.makeLoader()}\n      </div>\n    `;\n  }\n\n  makeLoader() {\n    switch (this.variant) {\n      case EnumVariants.NO_BORDER:\n        return html`\n          <div class=\"nb-spinner\"></div>\n        `;\n      case EnumVariants.BORDER_TOP:\n        return html`\n          <div class=\"bt-spinner\"></div>\n        `;\n      case EnumVariants.DOUBLE_BORDER:\n        return html`\n          <div class=\"db-spinner\"></div>\n        `;\n      case EnumVariants.DOUBLE_SPINNERS:\n        return html`\n          <div class=\"dbl-spinner\" style=\"width: ${this.size}px; height: ${this.size}px;\"></div>\n          <div class=\"dbl-spinner dbl-spinner--2\" style=\"width: ${this.size}px; height: ${this.size}px;\"></div>\n        `;\n      case EnumVariants.THREE_DOTS:\n        return html`\n          <div class=\"dot-loader\"></div>\n          <div class=\"dot-loader dot-loader--2\"></div>\n          <div class=\"dot-loader dot-loader--3\"></div>\n        `;\n      case EnumVariants.FULL_CIRCLE:\n        return html`\n          <div class=\"circle-loader\">\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n          </div>\n        `;\n      case EnumVariants.SPINNER:\n        return html`\n          <div class=\"ml-loader\">\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n          </div>\n        `;\n      case EnumVariants.MESH:\n        return html`\n          <div class=\"mesh-loader\">\n            <div class=\"set-one\">\n              <div class=\"circle\"></div>\n              <div class=\"circle\"></div>\n            </div>\n            <div class=\"set-two\">\n              <div class=\"circle\"></div>\n              <div class=\"circle\"></div>\n            </div>\n          </div>\n        `;\n    }\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","import { css } from 'lit';\n\nexport default css`:host {\n  --kemet-loader-color: var(--kemet-color-brand-primary-base);\n  --kemet-loader-thickness: 4px;\n  --kemet-loader-dot-size: 24px;\n  --kemet-loader-size: 48px;\n\n  /* private variables */\n  --_kemet-loader-three-dot-gap: calc(var(--kemet-loader-dot-size) * 0.5);\n  --_kemet-loader-circle-radius: calc(var(--kemet-loader-dot-size) * 2.04);\n  --_kemet-loader-spinner-radius: calc(var(--kemet-loader-size) * 0.43);\n  --_kemet-loader-spinner-bar-width: calc(var(--kemet-loader-size) * 0.07);\n  --_kemet-loader-spinner-bar-height: calc(var(--kemet-loader-size) * 0.26);\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n}\n\n:host([variant=three-dots]) > div {\n  display: inline-flex;\n  gap: var(--_kemet-loader-three-dot-gap);\n  align-items: center;\n  justify-content: center;\n}\n\n/* NO BORDER SPINNER */\n.nb-spinner {\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  background: transparent;\n  border-top: var(--kemet-loader-thickness) solid;\n  border-right: var(--kemet-loader-thickness) solid transparent;\n  border-radius: 50%;\n  animation: 1s spin linear infinite;\n}\n\n/* BORDER TOP SPINNER */\n.bt-spinner {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: transparent;\n  border: var(--kemet-loader-thickness) solid;\n  border-top-color: var(--kemet-loader-color);\n  animation: 1s spin linear infinite;\n}\n\n/* DOUBLE BORDER SPINNER */\n.db-spinner {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: transparent;\n  border: var(--kemet-loader-thickness) solid #222;\n  border-top-color: var(--kemet-loader-color);\n  border-bottom-color: var(--kemet-loader-color);\n  animation: 1s spin linear infinite;\n}\n\n/* DOUBLE SPINNER */\n.double-spinner {\n  position: relative;\n}\n\n.dbl-spinner {\n  position: absolute;\n  border-radius: 50%;\n  background-color: transparent;\n  border: var(--kemet-loader-thickness) solid transparent;\n  border-top: var(--kemet-loader-thickness) solid;\n  border-left: var(--kemet-loader-thickness) solid;\n  animation: 2s spin linear infinite;\n}\n\n.dbl-spinner--2 {\n  border: var(--kemet-loader-thickness) solid transparent;\n  border-right: var(--kemet-loader-thickness) solid var(--kemet-loader-color);\n  border-bottom: var(--kemet-loader-thickness) solid var(--kemet-loader-color);\n  animation: 1s spin linear infinite;\n}\n\n\n/* 3 DOT LOADER */\n.dot-loader {\n  width: var(--kemet-loader-dot-size);\n  height: var(--kemet-loader-dot-size);\n  border-radius: 50%;\n  background-color: var(--kemet-loader-color);\n  position: relative;\n  animation: 1.2s grow ease-in-out infinite;\n}\n\n.dot-loader--2 {\n  animation: 1.2s grow ease-in-out infinite 0.15555s;\n}\n\n.dot-loader--3 {\n  animation: 1.2s grow ease-in-out infinite 0.3s;\n}\n\n\n/* CIRCLE DOT LOADER */\n.circle-loader {\n  position: relative;\n  display: flex;\n  align-self: center;\n  justify-self: center;\n  width: calc(var(--_kemet-loader-circle-radius) * 2 + var(--kemet-loader-dot-size));\n  height: calc(var(--_kemet-loader-circle-radius) * 2 + var(--kemet-loader-dot-size));\n}\n\n.circle-loader div {\n  height: var(--kemet-loader-dot-size);\n  width: var(--kemet-loader-dot-size);\n  background-color: var(--kemet-loader-color);\n  border-radius: 50%;\n  position: absolute;\n  animation: 0.8s opaque ease-in-out infinite both;\n  transform: translate(-50%, -50%);\n}\n\n.circle-loader > div:nth-child(1) {\n  top: calc(50% + var(--_kemet-loader-circle-radius) * -1);\n  left: 50%;\n}\n\n.circle-loader > div:nth-child(2) {\n  top: calc(50% + var(--_kemet-loader-circle-radius) * -0.707);\n  left: calc(50% + var(--_kemet-loader-circle-radius) * 0.707);\n  animation-delay: 0.1s;\n}\n\n.circle-loader > div:nth-child(3) {\n  top: 50%;\n  left: calc(50% + var(--_kemet-loader-circle-radius));\n  animation-delay: 0.2s;\n}\n\n.circle-loader > div:nth-child(4) {\n  top: calc(50% + var(--_kemet-loader-circle-radius) * 0.707);\n  left: calc(50% + var(--_kemet-loader-circle-radius) * 0.707);\n  animation-delay: 0.3s;\n}\n\n.circle-loader > div:nth-child(5) {\n  top: calc(50% + var(--_kemet-loader-circle-radius));\n  left: 50%;\n  animation-delay: 0.4s;\n}\n\n.circle-loader > div:nth-child(6) {\n  top: calc(50% + var(--_kemet-loader-circle-radius) * 0.707);\n  left: calc(50% + var(--_kemet-loader-circle-radius) * -0.707);\n  animation-delay: 0.5s;\n}\n\n.circle-loader > div:nth-child(7) {\n  top: 50%;\n  left: calc(50% + var(--_kemet-loader-circle-radius) * -1);\n  animation-delay: 0.6s;\n}\n\n.circle-loader > div:nth-child(8) {\n  top: calc(50% + var(--_kemet-loader-circle-radius) * -0.707);\n  left: calc(50% + var(--_kemet-loader-circle-radius) * -0.707);\n  animation-delay: 0.7s;\n}\n\n\n/* MESH LOADER */\n.mesh-loader {\n  overflow: hidden;\n  height: inherit;\n  width: inherit;\n}\n\n.mesh-loader .circle {\n  width: var(--kemet-loader-dot-size);\n  height: var(--kemet-loader-dot-size);\n  position: absolute;\n  background: var(--kemet-loader-color);\n  border-radius: 50%;\n  margin: calc(var(--kemet-loader-dot-size) / -2);\n  animation: mesh 3s ease-in-out infinite -1.5s;\n}\n\n.mesh-loader > div .circle:last-child {\n  animation-delay: 0s;\n}\n\n.mesh-loader > div {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n}\n\n.mesh-loader > div:last-child {\n  transform: rotate(90deg);\n}\n\n\n/* SPINNER 13 */\n.ml-loader {\n  position: relative;\n  width: calc(var(--_kemet-loader-spinner-radius) * 2);\n  height: calc(var(--_kemet-loader-spinner-radius) * 2);\n}\n\n.ml-loader div {\n  transform-origin: var(--_kemet-loader-spinner-radius) var(--_kemet-loader-spinner-radius);\n  animation: 1.2s opaque ease-in-out infinite both;\n}\n\n.ml-loader div::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0;\n  left: calc(var(--_kemet-loader-spinner-radius) - var(--_kemet-loader-spinner-bar-width) / 2);\n  width: var(--_kemet-loader-spinner-bar-width);\n  height: var(--_kemet-loader-spinner-bar-height);\n  border-radius: 10px;\n  background-color: var(--kemet-loader-color);\n}\n\n.ml-loader div:nth-child(1) {\n  transform: rotate(0);\n}\n\n.ml-loader div:nth-child(2) {\n  transform: rotate(30deg);\n  animation-delay: 0.1s;\n}\n\n.ml-loader div:nth-child(3) {\n  transform: rotate(60deg);\n  animation-delay: 0.2s;\n}\n\n.ml-loader div:nth-child(4) {\n  transform: rotate(90deg);\n  animation-delay: 0.3s;\n}\n\n.ml-loader div:nth-child(5) {\n  transform: rotate(120deg);\n  animation-delay: 0.4s;\n}\n\n.ml-loader div:nth-child(6) {\n  transform: rotate(150deg);\n  animation-delay: 0.5s;\n}\n\n.ml-loader div:nth-child(7) {\n  transform: rotate(180deg);\n  animation-delay: 0.6s;\n}\n\n.ml-loader div:nth-child(8) {\n  transform: rotate(210deg);\n  animation-delay: 0.7s;\n}\n\n.ml-loader div:nth-child(9) {\n  transform: rotate(240deg);\n  animation-delay: 0.8s;\n}\n\n.ml-loader div:nth-child(10) {\n  transform: rotate(270deg);\n  animation-delay: 0.9s;\n}\n\n.ml-loader div:nth-child(11) {\n  transform: rotate(300deg);\n  animation-delay: 1s;\n}\n\n.ml-loader div:nth-child(12) {\n  transform: rotate(330deg);\n  animation-delay: 1.1s;\n}\n\n.ml-loader div:nth-child(13) {\n  transform: rotate(360deg);\n  animation-delay: 1.2s;\n}\n\n\n\n@keyframes rotate {\n  100% {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes spin {\n  from {\n    -webkit-transform: rotate(0deg);\n    transform: rotate(0deg);\n  }\n  to {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes spinBack {\n  from {\n    -webkit-transform: rotate(0deg);\n    transform: rotate(0deg);\n  }\n  to {\n    -webkit-transform: rotate(-720deg);\n    transform: rotate(-720deg);\n  }\n}\n\n@keyframes spinBorder {\n  0% {\n    -webkit-transform: rotate(0deg);\n    transform: rotate(0deg);\n    border-width: 15px;\n  }\n  50% {\n    -webkit-transform: rotate(180deg);\n    transform: rotate(180deg);\n    border-width: 3px;\n  }\n  100% {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n    border-width: 15px;\n  }\n}\n\n@keyframes grow {\n  0%, 40%, 100% {\n    -webkit-transform: scale(0);\n            transform: scale(0);\n  }\n  40% {\n    -webkit-transform: scale(1);\n            transform: scale(1);\n  }\n}\n\n@keyframes pulsate {\n  0% {\n    -webkit-transform: rotate(45deg) scale(0.8);\n    transform: rotate(45deg) scale(0.8);\n    transform: rotate(45deg) scale(0.8);\n  }\n  5% {\n    -webkit-transform: rotate(45deg) scale(0.9);\n    transform: rotate(45deg) scale(0.9);\n  }\n  10% {\n    -webkit-transform: rotate(45deg) scale(0.8);\n    transform: rotate(45deg) scale(0.8);\n  }\n  15% {\n    -webkit-transform: rotate(45deg) scale(1);\n    transform: rotate(45deg) scale(1);\n  }\n  50% {\n    -webkit-transform: rotate(45deg) scale(0.8);\n    transform: rotate(45deg) scale(0.8);\n  }\n  100% {\n    -webkit-transform: rotate(45deg) scale(0.8);\n    transform: rotate(45deg) scale(0.8);\n  }\n}\n\n@keyframes opaque {\n  0% {\n    opacity: 0.1;\n  }\n  40% {\n    opacity: 1;\n  }\n  80% {\n    opacity: 0.1;\n  }\n  100% {\n    opacity: 0.1;\n  }\n}\n\n@keyframes mesh {\n  0% {\n    -webkit-transform-origin: 50% -100%;\n    transform-origin: 50% -100%;\n    -webkit-transform: rotate(0);\n    transform: rotate(0);\n  }\n  50% {\n    -webkit-transform-origin: 50% -100%;\n    transform-origin: 50% -100%;\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n  50.1% {\n    -webkit-transform-origin: 50% 200%;\n    transform-origin: 50% 200%;\n    -webkit-transform: rotate(0deg);\n    transform: rotate(0deg);\n  }\n  100% {\n    -webkit-transform-origin: 50% 200%;\n    transform-origin: 50% 200%;\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n`;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,MAAM,kBAA6B;;;ACA5C,SAAS,UAAU,OAAO,OAAO,gBAAgB;AACjD,SAAS,iBAAiB,wBAAwB;AAO3C,IAAM,gBAAgB,CAAC,YAAoB,CAAC,sBACjD,OAAO,mBAAmB,eAAe,CAAC,eAAe,IAAI,OAAO,IAChE,iBAAiB,OAAO,EAAE,iBAAiB,IAC3C;;;ACXN,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACFR,IAAM,YAAY,CAAC,SAAS,MAAM,QAAQ,UAAU,MAAM,WAAW,SAAS;AACnF,UAAQ;AAAA,IACN,IAAI,YAAY,MAAM,EAAE,SAAS,UAAU,OAAO,CAAC;AAAA,EACrD;AACF;;;AHCO,IAAK,eAAL,kBAAKA,kBAAL;AACL,EAAAA,cAAA,eAAY;AACZ,EAAAA,cAAA,gBAAa;AACb,EAAAA,cAAA,mBAAgB;AAChB,EAAAA,cAAA,qBAAkB;AAClB,EAAAA,cAAA,gBAAa;AACb,EAAAA,cAAA,iBAAc;AACd,EAAAA,cAAA,aAAU;AACV,EAAAA,cAAA,UAAO;AARG,SAAAA;AAAA,GAAA;AAiCZ,IAAqB,cAArB,cAAyC,WAAW;AAAA,EAApD;AAAA;AAIE,mBAAwB;AAGxB,gBAAe;AAAA;AAAA,EAEf,eAAe;AACb,cAAU,MAAM,wBAAwB;AAAA,MACtC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEA,SAAS;AACP,QACE,KAAK,YAAY,iCACjB,KAAK,YAAY,mCACjB,KAAK,YAAY,mBACjB;AACA,WAAK,MAAM,YAAY,2BAA2B,GAAG,KAAK,IAAI,IAAI;AAClE,aAAO;AAAA;AAAA,YAED,KAAK,WAAW,CAAC;AAAA;AAAA;AAAA,IAGzB;AAEA,QAAI,KAAK,YAAY,yBAAsB;AACzC,WAAK,MAAM,YAAY,uBAAuB,GAAG,KAAK,IAAI,IAAI;AAC9D,aAAO;AAAA;AAAA,YAED,KAAK,WAAW,CAAC;AAAA;AAAA;AAAA,IAGzB;AAEA,WAAO;AAAA,2BACgB,KAAK,IAAI,eAAe,KAAK,IAAI;AAAA,UAClD,KAAK,WAAW,CAAC;AAAA;AAAA;AAAA,EAGzB;AAAA,EAEA,aAAa;AACX,YAAQ,KAAK,SAAS;AAAA,MACpB,KAAK;AACH,eAAO;AAAA;AAAA;AAAA,MAGT,KAAK;AACH,eAAO;AAAA;AAAA;AAAA,MAGT,KAAK;AACH,eAAO;AAAA;AAAA;AAAA,MAGT,KAAK;AACH,eAAO;AAAA,mDACoC,KAAK,IAAI,eAAe,KAAK,IAAI;AAAA,kEAClB,KAAK,IAAI,eAAe,KAAK,IAAI;AAAA;AAAA,MAE7F,KAAK;AACH,eAAO;AAAA;AAAA;AAAA;AAAA;AAAA,MAKT,KAAK;AACH,eAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAYT,KAAK;AACH,eAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAgBT,KAAK;AACH,eAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAYX;AAAA,EACF;AACF;AAvHqB,YACZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAHtB,YAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GANP,YAOnB;AAPmB,cAArB;AAAA,EADC,cAAc,cAAc;AAAA,GACR;","names":["EnumVariants"]}
+{"version":3,"sources":["../../../src/elements/loader/index.ts","../../../src/utilities/decorators.ts","../../../src/elements/loader/styles.css.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from '../../utilities/decorators';\nimport styles from './styles.css.ts';\nimport { emitEvent } from '../../utilities/events';\n\nexport enum EnumVariants {\n  NO_BORDER = 'no-border',\n  BORDER_TOP = 'border-top',\n  DOUBLE_BORDER = 'double-border',\n  DOUBLE_SPINNERS = 'double-spinners',\n  THREE_DOTS = 'three-dots',\n  FULL_CIRCLE = 'full-circle',\n  SPINNER = 'spinner',\n  MESH = 'mesh',\n}\n\n/**\n * @since 5.0.0\n * @status stable\n *\n * @tagname kemet-loader\n * @summary Displays animations for a loading state.\n *\n * @prop {string} variant - The style of loader to display\n * @prop {number} size - How large to make the loader.\n * @ssrsafe yes\n *\n * @csspart loader - The main loader container\n *\n * @cssproperty --kemet-loader-color - The color of the loader.\n * @cssproperty --kemet-loader-thickness - The thickness of the loader.\n * @cssproperty --kemet-loader-dot-size - The size of the dots in the loader.\n * @cssproperty --kemet-loader-size - The size of the loader.\n *\n * @fires kemet-loader-mounted - Fired when the loader is mounted to the DOM\n * @detail {HTMLElement} element - The loader element\n */\n@customElement('kemet-loader')\nexport default class KemetLoader extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String, reflect: true })\n  variant: EnumVariants = EnumVariants.NO_BORDER;\n\n  @property({ type: Number })\n  size: number = 48;\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-loader-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n  }\n\n  render() {\n    if (\n      this.variant === EnumVariants.THREE_DOTS ||\n      this.variant === EnumVariants.FULL_CIRCLE ||\n      this.variant === EnumVariants.MESH\n    ) {\n      this.style.setProperty('--kemet-loader-dot-size', `${this.size}px`);\n      return html`\n        <div part=\"loader\">\n          ${this.makeLoader()}\n        </div>\n      `;\n    }\n\n    if (this.variant === EnumVariants.SPINNER) {\n      this.style.setProperty('--kemet-loader-size', `${this.size}px`);\n      return html`\n        <div part=\"loader\">\n          ${this.makeLoader()}\n        </div>\n      `;\n    }\n\n    return html`\n      <div style=\"width: ${this.size}px; height: ${this.size}px;\" part=\"loader\">\n        ${this.makeLoader()}\n      </div>\n    `;\n  }\n\n  makeLoader() {\n    switch (this.variant) {\n      case EnumVariants.NO_BORDER:\n        return html`\n          <div class=\"nb-spinner\"></div>\n        `;\n      case EnumVariants.BORDER_TOP:\n        return html`\n          <div class=\"bt-spinner\"></div>\n        `;\n      case EnumVariants.DOUBLE_BORDER:\n        return html`\n          <div class=\"db-spinner\"></div>\n        `;\n      case EnumVariants.DOUBLE_SPINNERS:\n        return html`\n          <div class=\"dbl-spinner\" style=\"width: ${this.size}px; height: ${this.size}px;\"></div>\n          <div class=\"dbl-spinner dbl-spinner--2\" style=\"width: ${this.size}px; height: ${this.size}px;\"></div>\n        `;\n      case EnumVariants.THREE_DOTS:\n        return html`\n          <div class=\"dot-loader\"></div>\n          <div class=\"dot-loader dot-loader--2\"></div>\n          <div class=\"dot-loader dot-loader--3\"></div>\n        `;\n      case EnumVariants.FULL_CIRCLE:\n        return html`\n          <div class=\"circle-loader\">\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n          </div>\n        `;\n      case EnumVariants.SPINNER:\n        return html`\n          <div class=\"ml-loader\">\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n            <div></div>\n          </div>\n        `;\n      case EnumVariants.MESH:\n        return html`\n          <div class=\"mesh-loader\">\n            <div class=\"set-one\">\n              <div class=\"circle\"></div>\n              <div class=\"circle\"></div>\n            </div>\n            <div class=\"set-two\">\n              <div class=\"circle\"></div>\n              <div class=\"circle\"></div>\n            </div>\n          </div>\n        `;\n    }\n  }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n  typeof customElements !== 'undefined' && !customElements.get(tagName)\n    ? litCustomElement(tagName)(classOrDescriptor)\n    : classOrDescriptor;\n","import { css } from 'lit';\n\nexport default css`:host {\n  --kemet-loader-color: var(--kemet-color-brand-primary-base);\n  --kemet-loader-thickness: 4px;\n  --kemet-loader-dot-size: 24px;\n  --kemet-loader-size: 48px;\n\n  /* private variables */\n  --_kemet-loader-three-dot-gap: calc(var(--kemet-loader-dot-size) * 0.5);\n  --_kemet-loader-circle-radius: calc(var(--kemet-loader-dot-size) * 2.04);\n  --_kemet-loader-spinner-radius: calc(var(--kemet-loader-size) * 0.43);\n  --_kemet-loader-spinner-bar-width: calc(var(--kemet-loader-size) * 0.07);\n  --_kemet-loader-spinner-bar-height: calc(var(--kemet-loader-size) * 0.26);\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n}\n\n:host([variant=three-dots]) > div {\n  display: inline-flex;\n  gap: var(--_kemet-loader-three-dot-gap);\n  align-items: center;\n  justify-content: center;\n}\n\n/* NO BORDER SPINNER */\n.nb-spinner {\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  background: transparent;\n  border-top: var(--kemet-loader-thickness) solid;\n  border-right: var(--kemet-loader-thickness) solid transparent;\n  border-radius: 50%;\n  animation: 1s spin linear infinite;\n}\n\n/* BORDER TOP SPINNER */\n.bt-spinner {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: transparent;\n  border: var(--kemet-loader-thickness) solid;\n  border-top-color: var(--kemet-loader-color);\n  animation: 1s spin linear infinite;\n}\n\n/* DOUBLE BORDER SPINNER */\n.db-spinner {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: transparent;\n  border: var(--kemet-loader-thickness) solid #222;\n  border-top-color: var(--kemet-loader-color);\n  border-bottom-color: var(--kemet-loader-color);\n  animation: 1s spin linear infinite;\n}\n\n/* DOUBLE SPINNER */\n.double-spinner {\n  position: relative;\n}\n\n.dbl-spinner {\n  position: absolute;\n  border-radius: 50%;\n  background-color: transparent;\n  border: var(--kemet-loader-thickness) solid transparent;\n  border-top: var(--kemet-loader-thickness) solid;\n  border-left: var(--kemet-loader-thickness) solid;\n  animation: 2s spin linear infinite;\n}\n\n.dbl-spinner--2 {\n  border: var(--kemet-loader-thickness) solid transparent;\n  border-right: var(--kemet-loader-thickness) solid var(--kemet-loader-color);\n  border-bottom: var(--kemet-loader-thickness) solid var(--kemet-loader-color);\n  animation: 1s spin linear infinite;\n}\n\n\n/* 3 DOT LOADER */\n.dot-loader {\n  width: var(--kemet-loader-dot-size);\n  height: var(--kemet-loader-dot-size);\n  border-radius: 50%;\n  background-color: var(--kemet-loader-color);\n  position: relative;\n  animation: 1.2s grow ease-in-out infinite;\n}\n\n.dot-loader--2 {\n  animation: 1.2s grow ease-in-out infinite 0.15555s;\n}\n\n.dot-loader--3 {\n  animation: 1.2s grow ease-in-out infinite 0.3s;\n}\n\n\n/* CIRCLE DOT LOADER */\n.circle-loader {\n  position: relative;\n  display: flex;\n  align-self: center;\n  justify-self: center;\n  width: calc(var(--_kemet-loader-circle-radius) * 2 + var(--kemet-loader-dot-size));\n  height: calc(var(--_kemet-loader-circle-radius) * 2 + var(--kemet-loader-dot-size));\n}\n\n.circle-loader div {\n  height: var(--kemet-loader-dot-size);\n  width: var(--kemet-loader-dot-size);\n  background-color: var(--kemet-loader-color);\n  border-radius: 50%;\n  position: absolute;\n  animation: 0.8s opaque ease-in-out infinite both;\n  transform: translate(-50%, -50%);\n}\n\n.circle-loader > div:nth-child(1) {\n  top: calc(50% + var(--_kemet-loader-circle-radius) * -1);\n  left: 50%;\n}\n\n.circle-loader > div:nth-child(2) {\n  top: calc(50% + var(--_kemet-loader-circle-radius) * -0.707);\n  left: calc(50% + var(--_kemet-loader-circle-radius) * 0.707);\n  animation-delay: 0.1s;\n}\n\n.circle-loader > div:nth-child(3) {\n  top: 50%;\n  left: calc(50% + var(--_kemet-loader-circle-radius));\n  animation-delay: 0.2s;\n}\n\n.circle-loader > div:nth-child(4) {\n  top: calc(50% + var(--_kemet-loader-circle-radius) * 0.707);\n  left: calc(50% + var(--_kemet-loader-circle-radius) * 0.707);\n  animation-delay: 0.3s;\n}\n\n.circle-loader > div:nth-child(5) {\n  top: calc(50% + var(--_kemet-loader-circle-radius));\n  left: 50%;\n  animation-delay: 0.4s;\n}\n\n.circle-loader > div:nth-child(6) {\n  top: calc(50% + var(--_kemet-loader-circle-radius) * 0.707);\n  left: calc(50% + var(--_kemet-loader-circle-radius) * -0.707);\n  animation-delay: 0.5s;\n}\n\n.circle-loader > div:nth-child(7) {\n  top: 50%;\n  left: calc(50% + var(--_kemet-loader-circle-radius) * -1);\n  animation-delay: 0.6s;\n}\n\n.circle-loader > div:nth-child(8) {\n  top: calc(50% + var(--_kemet-loader-circle-radius) * -0.707);\n  left: calc(50% + var(--_kemet-loader-circle-radius) * -0.707);\n  animation-delay: 0.7s;\n}\n\n\n/* MESH LOADER */\n.mesh-loader {\n  overflow: hidden;\n  height: inherit;\n  width: inherit;\n}\n\n.mesh-loader .circle {\n  width: var(--kemet-loader-dot-size);\n  height: var(--kemet-loader-dot-size);\n  position: absolute;\n  background: var(--kemet-loader-color);\n  border-radius: 50%;\n  margin: calc(var(--kemet-loader-dot-size) / -2);\n  animation: mesh 3s ease-in-out infinite -1.5s;\n}\n\n.mesh-loader > div .circle:last-child {\n  animation-delay: 0s;\n}\n\n.mesh-loader > div {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n}\n\n.mesh-loader > div:last-child {\n  transform: rotate(90deg);\n}\n\n\n/* SPINNER 13 */\n.ml-loader {\n  position: relative;\n  width: calc(var(--_kemet-loader-spinner-radius) * 2);\n  height: calc(var(--_kemet-loader-spinner-radius) * 2);\n}\n\n.ml-loader div {\n  transform-origin: var(--_kemet-loader-spinner-radius) var(--_kemet-loader-spinner-radius);\n  animation: 1.2s opaque ease-in-out infinite both;\n}\n\n.ml-loader div::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0;\n  left: calc(var(--_kemet-loader-spinner-radius) - var(--_kemet-loader-spinner-bar-width) / 2);\n  width: var(--_kemet-loader-spinner-bar-width);\n  height: var(--_kemet-loader-spinner-bar-height);\n  border-radius: 10px;\n  background-color: var(--kemet-loader-color);\n}\n\n.ml-loader div:nth-child(1) {\n  transform: rotate(0);\n}\n\n.ml-loader div:nth-child(2) {\n  transform: rotate(30deg);\n  animation-delay: 0.1s;\n}\n\n.ml-loader div:nth-child(3) {\n  transform: rotate(60deg);\n  animation-delay: 0.2s;\n}\n\n.ml-loader div:nth-child(4) {\n  transform: rotate(90deg);\n  animation-delay: 0.3s;\n}\n\n.ml-loader div:nth-child(5) {\n  transform: rotate(120deg);\n  animation-delay: 0.4s;\n}\n\n.ml-loader div:nth-child(6) {\n  transform: rotate(150deg);\n  animation-delay: 0.5s;\n}\n\n.ml-loader div:nth-child(7) {\n  transform: rotate(180deg);\n  animation-delay: 0.6s;\n}\n\n.ml-loader div:nth-child(8) {\n  transform: rotate(210deg);\n  animation-delay: 0.7s;\n}\n\n.ml-loader div:nth-child(9) {\n  transform: rotate(240deg);\n  animation-delay: 0.8s;\n}\n\n.ml-loader div:nth-child(10) {\n  transform: rotate(270deg);\n  animation-delay: 0.9s;\n}\n\n.ml-loader div:nth-child(11) {\n  transform: rotate(300deg);\n  animation-delay: 1s;\n}\n\n.ml-loader div:nth-child(12) {\n  transform: rotate(330deg);\n  animation-delay: 1.1s;\n}\n\n.ml-loader div:nth-child(13) {\n  transform: rotate(360deg);\n  animation-delay: 1.2s;\n}\n\n\n\n@keyframes rotate {\n  100% {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes spin {\n  from {\n    -webkit-transform: rotate(0deg);\n    transform: rotate(0deg);\n  }\n  to {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes spinBack {\n  from {\n    -webkit-transform: rotate(0deg);\n    transform: rotate(0deg);\n  }\n  to {\n    -webkit-transform: rotate(-720deg);\n    transform: rotate(-720deg);\n  }\n}\n\n@keyframes spinBorder {\n  0% {\n    -webkit-transform: rotate(0deg);\n    transform: rotate(0deg);\n    border-width: 15px;\n  }\n  50% {\n    -webkit-transform: rotate(180deg);\n    transform: rotate(180deg);\n    border-width: 3px;\n  }\n  100% {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n    border-width: 15px;\n  }\n}\n\n@keyframes grow {\n  0%, 40%, 100% {\n    -webkit-transform: scale(0);\n            transform: scale(0);\n  }\n  40% {\n    -webkit-transform: scale(1);\n            transform: scale(1);\n  }\n}\n\n@keyframes pulsate {\n  0% {\n    -webkit-transform: rotate(45deg) scale(0.8);\n    transform: rotate(45deg) scale(0.8);\n    transform: rotate(45deg) scale(0.8);\n  }\n  5% {\n    -webkit-transform: rotate(45deg) scale(0.9);\n    transform: rotate(45deg) scale(0.9);\n  }\n  10% {\n    -webkit-transform: rotate(45deg) scale(0.8);\n    transform: rotate(45deg) scale(0.8);\n  }\n  15% {\n    -webkit-transform: rotate(45deg) scale(1);\n    transform: rotate(45deg) scale(1);\n  }\n  50% {\n    -webkit-transform: rotate(45deg) scale(0.8);\n    transform: rotate(45deg) scale(0.8);\n  }\n  100% {\n    -webkit-transform: rotate(45deg) scale(0.8);\n    transform: rotate(45deg) scale(0.8);\n  }\n}\n\n@keyframes opaque {\n  0% {\n    opacity: 0.1;\n  }\n  40% {\n    opacity: 1;\n  }\n  80% {\n    opacity: 0.1;\n  }\n  100% {\n    opacity: 0.1;\n  }\n}\n\n@keyframes mesh {\n  0% {\n    -webkit-transform-origin: 50% -100%;\n    transform-origin: 50% -100%;\n    -webkit-transform: rotate(0);\n    transform: rotate(0);\n  }\n  50% {\n    -webkit-transform-origin: 50% -100%;\n    transform-origin: 50% -100%;\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n  50.1% {\n    -webkit-transform-origin: 50% 200%;\n    transform-origin: 50% 200%;\n    -webkit-transform: rotate(0deg);\n    transform: rotate(0deg);\n  }\n  100% {\n    -webkit-transform-origin: 50% 200%;\n    transform-origin: 50% 200%;\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n`;\n","export const emitEvent = (element: HTMLElement, name: string, detail: any, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,MAAM,kBAA6B;;;ACA5C,SAAS,UAAU,OAAO,OAAO,gBAAgB;AACjD,SAAS,iBAAiB,wBAAwB;AAO3C,IAAM,gBAAgB,CAAC,YAAoB,CAAC,sBACjD,OAAO,mBAAmB,eAAe,CAAC,eAAe,IAAI,OAAO,IAChE,iBAAiB,OAAO,EAAE,iBAAiB,IAC3C;;;ACXN,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACFR,IAAM,YAAY,CAAC,SAAsB,MAAc,QAAa,UAAU,MAAM,WAAW,SAAS;AAC7G,UAAQ;AAAA,IACN,IAAI,YAAY,MAAM,EAAE,SAAS,UAAU,OAAO,CAAC;AAAA,EACrD;AACF;;;AHCO,IAAK,eAAL,kBAAKA,kBAAL;AACL,EAAAA,cAAA,eAAY;AACZ,EAAAA,cAAA,gBAAa;AACb,EAAAA,cAAA,mBAAgB;AAChB,EAAAA,cAAA,qBAAkB;AAClB,EAAAA,cAAA,gBAAa;AACb,EAAAA,cAAA,iBAAc;AACd,EAAAA,cAAA,aAAU;AACV,EAAAA,cAAA,UAAO;AARG,SAAAA;AAAA,GAAA;AAiCZ,IAAqB,cAArB,cAAyC,WAAW;AAAA,EAApD;AAAA;AAIE,mBAAwB;AAGxB,gBAAe;AAAA;AAAA,EAEf,eAAe;AACb,cAAU,MAAM,wBAAwB;AAAA,MACtC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEA,SAAS;AACP,QACE,KAAK,YAAY,iCACjB,KAAK,YAAY,mCACjB,KAAK,YAAY,mBACjB;AACA,WAAK,MAAM,YAAY,2BAA2B,GAAG,KAAK,IAAI,IAAI;AAClE,aAAO;AAAA;AAAA,YAED,KAAK,WAAW,CAAC;AAAA;AAAA;AAAA,IAGzB;AAEA,QAAI,KAAK,YAAY,yBAAsB;AACzC,WAAK,MAAM,YAAY,uBAAuB,GAAG,KAAK,IAAI,IAAI;AAC9D,aAAO;AAAA;AAAA,YAED,KAAK,WAAW,CAAC;AAAA;AAAA;AAAA,IAGzB;AAEA,WAAO;AAAA,2BACgB,KAAK,IAAI,eAAe,KAAK,IAAI;AAAA,UAClD,KAAK,WAAW,CAAC;AAAA;AAAA;AAAA,EAGzB;AAAA,EAEA,aAAa;AACX,YAAQ,KAAK,SAAS;AAAA,MACpB,KAAK;AACH,eAAO;AAAA;AAAA;AAAA,MAGT,KAAK;AACH,eAAO;AAAA;AAAA;AAAA,MAGT,KAAK;AACH,eAAO;AAAA;AAAA;AAAA,MAGT,KAAK;AACH,eAAO;AAAA,mDACoC,KAAK,IAAI,eAAe,KAAK,IAAI;AAAA,kEAClB,KAAK,IAAI,eAAe,KAAK,IAAI;AAAA;AAAA,MAE7F,KAAK;AACH,eAAO;AAAA;AAAA;AAAA;AAAA;AAAA,MAKT,KAAK;AACH,eAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAYT,KAAK;AACH,eAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAgBT,KAAK;AACH,eAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAYX;AAAA,EACF;AACF;AAvHqB,YACZ,SAAS,CAAC,kBAAM;AAGvB;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAHtB,YAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GANP,YAOnB;AAPmB,cAArB;AAAA,EADC,cAAc,cAAc;AAAA,GACR;","names":["EnumVariants"]}

package/dist/elements/password/index.d.ts

@@ -1,6 +1,6 @@
 import * as lit from 'lit';
 import { LitElement, TemplateResult } from 'lit';
-import { E as EnumAppearances, H as HTMLKemetFieldElement, c as HTMLKemetInputElement, f as HTMLKemetTextareaElement } from '../../constants-C4-3KYlX.js';
+import { E as EnumAppearances, H as HTMLKemetFieldElement, c as HTMLKemetInputElement, f as HTMLKemetTextareaElement } from '../../constants-BsAfWV-a.js';
 import 'lit-html';
 import '../../form-controller-3q581XcZ.js';