kemet-ui 4.0.2 → 5.0.0

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/input/index.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 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { FormSubmitController } from '../../utilities/form-controller';\nimport { emitEvent } from '../../utilities/events';\nimport { 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 *\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  /** @internal */\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 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  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      components.forEach((component: any) => {\n        if (component.checkValidity) {\n          component.checkValidity();\n\n          if (!component.checkValidity()) {\n            component.status = '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: component.validity ? component.validity : {},\n                  element: component,\n                },\n              }),\n            );\n          }\n\n          if (component.checkLimitValidity && !component.checkLimitValidity()) {\n            component.status = '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: var(--kemet-color-font-base);\n  --kemet-input-border: 1px solid var(--kemet-input-color);\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-base);\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-base);\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/styles.css.d.ts

@@ -0,0 +1,5 @@
+import * as lit from 'lit';
+
+declare const _default: lit.CSSResult;
+
+export { _default as default };

package/dist/elements/input/styles.css.js

@@ -0,0 +1,169 @@
+// src/elements/input/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+  /* public */
+  --kemet-input-height: 50px;
+  --kemet-input-color: var(--kemet-color-font-base);
+  --kemet-input-border: 1px solid var(--kemet-input-color);
+  --kemet-input-padding-y: 0.5rem;
+  --kemet-input-padding-x: 1rem;
+  --kemet-input-icon-gap: 3rem;
+  --kemet-input-font-color: var(--kemet-input-color);
+
+
+  /* private */
+  --_kemet-input-border-radius: 0;
+  --_kemet-input-background-color: transparent;
+  --_kemet-input-icon-left-padding: var(--kemet-input-padding-x);
+  --_kemet-input-icon-right-padding: var(--kemet-input-padding-x);
+
+  position: relative;
+  display: block;
+}
+
+input {
+  color: var(--kemet-input-font-color);
+  display: block;
+  font-size: 1rem;
+  width: 100%;
+  height: var(--kemet-input-height);
+  border: var(--kemet-input-border);
+  appearance: none;
+  box-sizing: border-box;
+  background-color: var(--_kemet-input-background-color);
+  border-radius: var(--_kemet-input-border-radius);
+  padding-left: var(--_kemet-input-icon-left-padding);
+  padding-right: var(--_kemet-input-icon-right-padding);
+  padding-top: var(--kemet-input-padding-y);
+  padding-bottom: var(--kemet-input-padding-y);
+}
+
+:host([polarity=dark]) {
+  --kemet-input-color: var(--kemet-color-font-inverse-base);
+  --kemet-input-font-color: var(--kemet-color-font-inverse-base);
+}
+
+:host([icon-left]) {
+  --_kemet-input-icon-left-padding: var(--kemet-input-icon-gap);
+}
+
+:host([icon-right]) {
+  --_kemet-input-icon-right-padding: var(--kemet-input-icon-gap);
+}
+
+input[type=color] {
+  min-width: 10rem;
+}
+
+input[type=search]::-webkit-search-decoration,
+input[type=search]::-webkit-search-cancel-button,
+input[type=search]::-webkit-search-results-button,
+input[type=search]::-webkit-search-results-decoration {
+  display: none;
+}
+
+
+
+:host([appearance=brand]) {
+  --kemet-input-color: var(--kemet-color-brand-primary-base);
+}
+
+:host([appearance=error]) {
+  --kemet-input-color: var(--kemet-color-font-error);
+}
+
+:host([appearance=success]) {
+  --kemet-input-color: var(--kemet-color-font-success);
+}
+
+:host([appearance=warning]) {
+  --kemet-input-color: var(--kemet-color-font-warning);
+}
+
+:host([appearance=link]) {
+  --kemet-input-color: var(--kemet-color-font-link);
+}
+
+
+:host([appearance=brand][filled]) {
+  --_kemet-input-background-color: var(--kemet-color-brand-primary-base);
+}
+
+:host([appearance=error][filled]) {
+  --_kemet-input-background-color: var(--kemet-color-font-error);
+}
+
+:host([appearance=success][fiiled]) {
+  --_kemet-input-background-color: var(--kemet-color-font-success);
+}
+
+:host([appearance=warning][filled]) {
+  --_kemet-input-background-color: var(--kemet-color-font-warning);
+}
+
+:host([appearance=link][filled]) {
+  --_kemet-input-background-color: var(--kemet-color-font-link);
+}
+
+:host([disabled]) {
+  --kemet-input-color: var(--kemet-color-font-disabled);
+}
+
+:host([rounded]) {
+  --_kemet-input-border-radius: var(--kemet-border-radius-md);
+}
+
+:host([rounded=sm])  {
+  --_kemet-input-border-radius: var(--kemet-border-radius-sm);
+}
+
+:host([rounded=lg]) {
+  --_kemet-input-border-radius: var(--kemet-border-radius-lg);
+}
+
+:host([rounded=xl])  {
+  --_kemet-input-border-radius: var(--kemet-border-radius-xl);
+}
+
+:host([rounded=circle]) {
+  --_kemet-input-border-radius: var(--kemet-border-radius-circle);
+}
+
+:host([rounded=pill])  {
+  --_kemet-input-border-radius: var(--kemet-border-radius-pill);
+}
+
+:host([filled]) {
+  --kemet-input-font-color: var(--kemet-color-font-inverse-base);
+  --_kemet-input-background-color: var(--kemet-color-background-inverse);
+  --kemet-input-border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+
+kemet-icon,
+::slotted(kemet-icon) {
+  color: var(--kemet-input-font-color);
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+kemet-icon.left,
+:host([icon-left]) ::slotted(kemet-icon) {
+  left: 1rem;
+}
+
+kemet-icon.right,
+:host([icon-right]) ::slotted(kemet-icon) {
+  right: 1rem;
+}
+
+kemet-icon.eye,
+kemet-icon.search {
+  cursor: pointer;
+}
+`;
+export {
+  styles_css_default as default
+};
+//# sourceMappingURL=styles.css.js.map

package/dist/elements/input/styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/input/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n  /* public */\n  --kemet-input-height: 50px;\n  --kemet-input-color: var(--kemet-color-font-base);\n  --kemet-input-border: 1px solid var(--kemet-input-color);\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-base);\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-base);\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":";AAAA,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;","names":[]}

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

@@ -0,0 +1,118 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import { e as EnumRoundedSizes, E as EnumAppearances, H as HTMLKemetFieldElement, K as KemetCombo } from '../../constants-W9QKPlZP.js';
+import '../../form-controller-3q581XcZ.js';
+
+interface InterfaceSelections {
+    element: HTMLUListElement;
+    text: string;
+    id: string;
+}
+/**
+ * @since 3.1.0
+ * @status stable
+ *
+ * @tagname kemet-multi-input
+ * @summary An input element that accepts multiple items from a combo.
+ *
+ * @prop {string} slug - Used for the id of the input. Should match the slug used in a control if applicable.
+ * @prop {string} name - The name of the input
+ * @prop {string} placeholder - The placeholder attribute
+ * @prop {boolean} disabled - The disable attribute
+ * @prop {boolean} required - The required attribute
+ * @prop {string} value - The input's value
+ * @prop {boolean} invalid - States whether the input is invalid
+ * @prop {string} status - The status of the input
+ * @prop {boolean} validateOnBlur - Activates validation on blur
+ * @prop {EnumRoundedSizes} rounded - Displays rounded corners
+ * @prop {boolean} filled - Displays a filled input box
+ * @prop {ValidityState} validity - The HTML5 validity object.
+
+ *
+ * @csspart input
+ *
+ * @cssproperty --kemet-input-combo-height - The height of the input.
+ * @cssproperty --kemet-input-combo-color - The color of the input.
+ * @cssproperty --kemet-input-combo-border - The border of the input.
+ * @cssproperty --kemet-input-combo-padding-y - The padding on the input.
+ * @cssproperty --kemet-input-combo-padding-x - The padding on the input.
+ * @cssproperty --kemet-input-combo-icon-gap - The icon gap of the input.
+ * @cssproperty --kemet-input-combo-font-color - The font color of the input.
+ * @cssproperty --kemet-input-combo-chip-font-color - The font color of the chip.
+ * @cssproperty --kemet-input-combo-chip-background-color - The background color of the chip.
+ *
+ * @event kemet-input-combo-focus - Fires when the input receives focus
+ * @event kemet-input-combo-blur - Fires when the input loses focus
+ * @event kemet-input-combo-input - Fires when the input receives input
+ * @event kemet-input-combo-change - Fires when the input changes
+ * @event kemet-input-combo-invalid - Fires when the input is invalid
+ *
+ */
+declare class InputCombo extends LitElement {
+    static styles: lit.CSSResult[];
+    slug: string;
+    placeholder: string;
+    disabled: boolean;
+    filled: boolean;
+    rounded?: EnumRoundedSizes;
+    name: string;
+    appearance?: EnumAppearances;
+    required: boolean;
+    invalid: boolean;
+    validateOnBlur: boolean;
+    value: string;
+    selections: InterfaceSelections[];
+    paddingLeft: number;
+    field: HTMLKemetFieldElement;
+    combo: KemetCombo;
+    chips: {
+        offsetWidth: number;
+    };
+    input: HTMLInputElement;
+    firstUpdated(): void;
+    updated(): void;
+    render(): lit_html.TemplateResult<1>;
+    /**
+     * Handles when a selection is made from a combo
+     * @private
+     * @param event
+     */
+    addComboItem(event: Event): void;
+    /**
+     * Handles when the input receives input
+     * @private
+     */
+    handleInput(event: Event): void;
+    /**
+     * Handles when the input is focused
+     */
+    handleFocus(): void;
+    handleBlur(): void;
+    handleChange(event: Event): void;
+    handleInvalid(event: Event): void;
+    /**
+     * Renders the chips from the selections of the combo
+     * @private
+     */
+    makeSelections(): lit_html.TemplateResult<1> | null;
+    /**
+     * calculates padding to properly place the cursor of the input
+     * @private
+     */
+    calculatePadding(): void;
+    /**
+     * handle removing a chip from the selections
+     * @private
+     */
+    handleRemoveChip(event: MouseEvent): void;
+    handleComboClose(event: MouseEvent): void;
+    handleKeydown(event: KeyboardEvent): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-input-combo': InputCombo;
+    }
+}
+
+export { type InterfaceSelections, InputCombo as default };