{"version":3,"sources":["../src/elements/multi-input.ts","../src/styles/elements/multi-input.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport {\n customElement, property, query, state,\n} from 'lit/decorators.js';\nimport { live } from 'lit/directives/live.js';\nimport { stylesBase } from '../styles/elements/multi-input';\nimport { emitEvent } from '../utilities/events';\nimport { EnumKeyCodes as EnumKeys, EnumStatuses, TypeRoundedSizes, TypeStatus } from '../utilities/constants';\nimport KemetField from './field';\nimport KemetCombo from './combo';\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 *\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 {TypeRoundedSizes} 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-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-focus - Fires when the input receives focus\n * @event kemet-blur - Fires when the input loses focus\n * @event kemet-input - Fires when the input receives input\n * @event kemet-change - Fires when the input changes\n * @event kemet-invalid - Fires when the input is invalid\n *\n */\n\n@customElement('kemet-multi-input')\nexport default class KemetMultiInput extends LitElement {\n  static styles = [stylesBase];\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({ reflect: true })\n  rounded: TypeRoundedSizes;\n\n  @property({ type: String })\n  name: string = 'input';\n\n  @property({ reflect: true })\n  status: TypeStatus = EnumStatuses.Standard;\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: KemetField;\n\n  @state()\n  combo: KemetCombo;\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');\n    this.combo = this.field.querySelector('kemet-combo');\n\n    document.addEventListener('click', this.handleComboClose.bind(this));\n\n    if (this.combo) {\n      this.combo.addEventListener('kemet-selection', (event: CustomEvent) => 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: CustomEvent) {\n    this.value = '';\n    this.status = EnumStatuses.Standard;\n    const isPresent = this.selections.find(selection => selection.id === event.detail.id);\n    if (!isPresent) this.selections = [...this.selections, event.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', {\n      element: this,\n      validity: this.input.validity,\n      status: this.status,\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-focus', this);\n  }\n\n  handleBlur() {\n    emitEvent(this, 'kemet-blur', this);\n    if (this.validateOnBlur) {\n      this.input.checkValidity();\n    }\n  }\n\n  handleChange(event: Event) {\n    emitEvent(this, 'kemet-change', {\n      element: this,\n      validity: this.input.validity,\n      status: this.status,\n      value: (event.target as HTMLInputElement).value\n    });\n  }\n\n  handleInvalid(event: Event) {\n    this.status = EnumStatuses.Error;\n    emitEvent(this, 'kemet-invalid', {\n      element: this,\n      validity: this.input.validity,\n      status: this.status,\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) {\n    const text = event.target.closest('[part=chip]').querySelector('span').innerText;\n    this.selections = this.selections.filter(selection => selection.text !== text);\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 === EnumKeys.ESCAPE) {\n      this.combo.show = false;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-multi-input': KemetMultiInput\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesBase = css`\n  :host {\n    --kemet-input-height: 50px;\n    --kemet-input-padding: 0.5rem 1rem;\n    --kemet-input-border: 1px solid rgb(var(--kemet-color-foreground));\n    --kemet-input-border-radius-rounded: var(--kemet-border-radius-lg);\n    --kemet-input-border-filled: none;\n    --kemet-input-color-filled: rgb(var(--kemet-color-white));\n    --kemet-input-background-color-filled: rgb(var(--kemet-color-primary));\n    --kemet-input-color-filled: rgb(var(--kemet-color-white));\n    --kemet-input-background-color-error: rgb(var(--kemet-color-error));\n    --kemet-input-background-color-success: rgb(var(--kemet-color-success));\n    --kemet-input-background-color-warning: rgb(var(--kemet-color-warning));\n    --kemet-input-border-radius-rounded: 0;\n\n    --kemet-multi-input-chip-color: rgb(var(--kemet-color-background));\n    --kemet-multi-input-chip-background: rgb(var(--kemet-color-foreground));\n\n    position: relative;\n    display: block;\n  }\n\n  input {\n    color: rgb(var(--kemet-color-text));\n    display: block;\n    font-size: 1rem;\n    width: 100%;\n    height: var(--kemet-input-height);\n    padding: var(--kemet-input-padding);\n    border: var(--kemet-input-border);\n    appearance: none;\n    box-sizing: border-box;\n    background-color: transparent;\n    border-radius: var(--kemet-input-border-radius-rounded);\n  }\n\n  :host([status=error]) input {\n    --kemet-input-border: 1px solid rgb(var(--kemet-color-error));\n  }\n\n  :host([status=success]) input {\n    --kemet-input-border: 1px solid rgb(var(--kemet-color-success));\n  }\n\n  :host([status=warning]) input {\n    --kemet-input-border: 1px solid rgb(var(--kemet-color-warning));\n  }\n\n  :host([disabled]) input {\n    opacity: 0.5;\n  }\n\n  :host([rounded]) input {\n    --kemet-input-border-radius-rounded: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=sm]) input {\n    --kemet-input-border-radius-rounded: var(--kemet-border-radius-sm);\n  }\n\n  :host([rounded=lg]) input {\n    --kemet-input-border-radius-rounded: var(--kemet-border-radius-lg);\n  }\n\n  :host([rounded=xl]) input {\n    --kemet-input-border-radius-rounded: var(--kemet-border-radius-xl);\n  }\n\n  :host([rounded=circle]) input {\n    --kemet-input-border-radius-rounded: var(--kemet-border-radius-circle);\n  }\n\n  :host([rounded=pill]) input {\n    --kemet-input-border-radius-rounded: var(--kemet-border-radius-pill);\n  }\n\n  :host([rounded=circle]) input {\n    --kemet-input-border-radius-rounded: var(--kemet-border-radius-circle);\n  }\n\n  :host([filled]) input {\n    border: var(--kemet-input-border-filled);\n    color: var(--kemet-input-color-filled);\n    background-color: var(--kemet-input-background-color-filled);\n  }\n\n  div {\n    display: flex;\n    gap: 1rem;\n    flex-direction: column;\n  }\n\n  ul {\n    display: flex;\n    gap: 0.5rem;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    flex-wrap: wrap;\n  }\n\n  li {\n    display: flex;\n    gap: 0.5rem;\n    align-items: center;\n    padding: 0.25rem 0.5rem;\n    color: var(--kemet-multi-input-chip-color);\n    background-color: var(--kemet-multi-input-chip-background);\n  }\n\n  :host([rounded]) li {\n    border-radius: var(--kemet-input-border-radius-rounded);\n  }\n\n  button {\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":";;;;;;;;AAAA,SAAS,MAAM,kBAAkB;AACjC;AAAA,EACC;AAAA,EAAe;AAAA,EAAU;AAAA,EAAO;AAAA,OAC1B;AACP,SAAS,YAAY;;;ACJrB,SAAS,WAAW;AAEb,IAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AD+D1B,IAAqB,kBAArB,cAA6C,WAAW;AAAA,EAAxD;AAAA;AAIE,gBAAe;AAGf,uBAAsB;AAGtB,oBAAoB;AAGpB,kBAAkB;AAMlB,gBAAe;AAGf;AAGA,oBAAoB;AAMpB,0BAA0B;AAG1B,iBAAgB;AAGhB,sBAAoC,CAAC;AAAA;AAAA,EAiBrC,eAAe;AAEb,SAAK,QAAQ,KAAK,QAAQ,aAAa;AACvC,SAAK,QAAQ,KAAK,MAAM,cAAc,aAAa;AAEnD,aAAS,iBAAiB,SAAS,KAAK,iBAAiB,KAAK,IAAI,CAAC;AAEnE,QAAI,KAAK,OAAO;AACd,WAAK,MAAM,iBAAiB,mBAAmB,CAAC,UAAuB,KAAK,aAAa,KAAK,CAAC;AAAA,IACjG;AAAA,EACF;AAAA,EAEA,UAAU;AACR,QAAI,KAAK,MAAO,MAAK,iBAAiB;AAAA,EACxC;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA,eAII,KAAK,IAAI;AAAA,iBACP,KAAK,IAAI;AAAA,wBACF,KAAK,WAAW;AAAA,sBAClB,KAAK,QAAQ;AAAA,sBACb,KAAK,QAAQ;AAAA,mBAChB,KAAK,WAAW;AAAA,mBAChB,KAAK,WAAW;AAAA,kBACjB,KAAK,UAAU;AAAA,oBACb,KAAK,YAAY;AAAA,qBAChB,KAAK,aAAa;AAAA,qBAClB,KAAK,aAAa;AAAA,mBACpB,KAAK,KAAK,KAAK,CAAC;AAAA;AAAA,WAExB,KAAK,eAAe,CAAC;AAAA;AAAA;AAAA,EAG9B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,aAAa,OAAoB;AAC/B,SAAK,QAAQ;AACb,SAAK;AACL,UAAM,YAAY,KAAK,WAAW,KAAK,eAAa,UAAU,OAAO,MAAM,OAAO,EAAE;AACpF,QAAI,CAAC,UAAW,MAAK,aAAa,CAAC,GAAG,KAAK,YAAY,MAAM,MAAM;AAAA,EACrE;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,YAAY,OAAc;AACxB,SAAK,QAAS,MAAM,OAA4B;AAChD,cAAU,MAAM,eAAe;AAAA,MAC7B,SAAS;AAAA,MACT,UAAU,KAAK,MAAM;AAAA,MACrB,QAAQ,KAAK;AAAA,MACb,OAAQ,MAAM,OAA4B;AAAA,IAC5C,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,cAAc;AACZ,cAAU,MAAM,eAAe,IAAI;AAAA,EACrC;AAAA,EAEA,aAAa;AACX,cAAU,MAAM,cAAc,IAAI;AAClC,QAAI,KAAK,gBAAgB;AACvB,WAAK,MAAM,cAAc;AAAA,IAC3B;AAAA,EACF;AAAA,EAEA,aAAa,OAAc;AACzB,cAAU,MAAM,gBAAgB;AAAA,MAC9B,SAAS;AAAA,MACT,UAAU,KAAK,MAAM;AAAA,MACrB,QAAQ,KAAK;AAAA,MACb,OAAQ,MAAM,OAA4B;AAAA,IAC5C,CAAC;AAAA,EACH;AAAA,EAEA,cAAc,OAAc;AAC1B,SAAK;AACL,cAAU,MAAM,iBAAiB;AAAA,MAC/B,SAAS;AAAA,MACT,UAAU,KAAK,MAAM;AAAA,MACrB,QAAQ,KAAK;AAAA,MACb,OAAQ,MAAM,OAA4B;AAAA,IAC5C,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,iBAAiB;AACf,UAAM,aAAa,KAAK,WAAW,IAAI,eAAa;AAAA;AAAA,gBAExC,UAAU,IAAI;AAAA,yBACL,KAAK,gBAAgB;AAAA;AAAA,KAEzC;AAED,QAAI,KAAK,YAAY;AACnB,aAAO,wBAAwB,UAAU;AAAA,IAC3C;AAEA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,mBAAmB;AACjB,SAAK,cAAc,KAAK,MAAM,cAAc;AAAA,EAC9C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,iBAAiB,OAAO;AACtB,UAAM,OAAO,MAAM,OAAO,QAAQ,aAAa,EAAE,cAAc,MAAM,EAAE;AACvE,SAAK,aAAa,KAAK,WAAW,OAAO,eAAa,UAAU,SAAS,IAAI;AAAA,EAC/E;AAAA,EAEA,iBAAiB,OAAmB;AAClC,QAAI,MAAM,WAAW,QAAQ,KAAK,OAAO;AACvC,WAAK,MAAM,OAAO;AAAA,IACpB;AAAA,EACF;AAAA,EAEA,cAAc,OAAsB;AAClC,QAAI,MAAM,+BAAyB;AACjC,WAAK,MAAM,OAAO;AAAA,IACpB;AAAA,EACF;AACF;AAxMqB,gBACZ,SAAS,CAAC,UAAU;AAG3B;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAHP,gBAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GANP,gBAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GATR,gBAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GAZR,gBAanB;AAGA;AAAA,EADC,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAfR,gBAgBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAlBP,gBAmBnB;AAGA;AAAA,EADC,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GArBR,gBAsBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GAxBR,gBAyBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GA3BR,gBA4BnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,mBAAmB,CAAC;AAAA,GA9BvC,gBA+BnB;AAGA;AAAA,EADC,MAAM;AAAA,GAjCY,gBAkCnB;AAGA;AAAA,EADC,MAAM;AAAA,GApCY,gBAqCnB;AAGA;AAAA,EADC,MAAM;AAAA,GAvCY,gBAwCnB;AAGA;AAAA,EADC,MAAM;AAAA,GA1CY,gBA2CnB;AAGA;AAAA,EADC,MAAM;AAAA,GA7CY,gBA8CnB;AAGA;AAAA,EADC,MAAM,cAAc;AAAA,GAhDF,gBAiDnB;AAGA;AAAA,EADC,MAAM,OAAO;AAAA,GAnDK,gBAoDnB;AApDmB,kBAArB;AAAA,EADC,cAAc,mBAAmB;AAAA,GACb;","names":[]}