{"version":3,"sources":["../src/elements/select.ts","../src/styles/elements/select.ts"],"sourcesContent":["import { html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { FormSubmitController } from '../utilities/form-controller';\nimport { emitEvent } from '../utilities/events';\nimport { stylesSelect } from '../styles/elements/select';\n\nimport type KemetOption from './option';\nimport './icon-bootstrap';\nimport KemetField from './field';\nimport { EnumStatuses, TypeRoundedSizes } from '../utilities/constants';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-select\n * @summary An enhanced select element.\n *\n * @prop {string} slug - A string the uniquely identifies the select\n * @prop {string} name - The name of the select\n * @prop {string} value - The value of the select\n * @prop {array} options - The options the select contains\n * @prop {string} status - The status of the select\n * @prop {boolean} required - Determines whether the field is required\n * @prop {boolean} disabled - Determines whether the field is disabled\n * @prop {boolean} multiple - Support of multiple choice selections\n * @prop {string} icon - The dropdown icon\n * @prop {number} iconSize - The dropdown icon size\n * @prop {boolean} filled - Displays a filled select\n * @prop {TypeRoundedSizes} rounded - Displays rounded corners\n *\n * @csspart select\n *\n * @cssproperty --kemet-select-padding - The padding on the textarea.\n * @cssproperty --kemet-select-border - The border of the textarea.\n * @cssproperty --kemet-select-border-color-error - The border of the error state.\n * @cssproperty --kemet-select-border-color-success - The border of the success state.\n * @cssproperty --kemet-select-border-color-warning - The border of the warning state.\n * @cssproperty --kemet-select-border-radius-rounded - The border radius on rounded.\n * @cssproperty --kemet-select-border-filled - The border on filled.\n * @cssproperty --kemet-select-color-filled - The color on filled.\n * @cssproperty --kemet-select-background-color-filled - The background-color on filled.\n * @cssproperty --kemet-select-background-color-error - The error state background color.\n * @cssproperty --kemet-select-background-color-success - The success state background color.\n * @cssproperty --kemet-select-background-color-warning - The warning state background color.\n * @cssproperty --kemet-select-icon-right - The space on the right of the icon.\n *\n * @event kemet-focus - Fires when the input receives focus\n * @event kemet-blur - Fires when the input loses focus\n * @event kemet-status-change - Fires when there's a change in status\n * @event kemet-change - Fires when the select input changes\n *\n */\n\ninterface IOptions {\n  label: string;\n  value: string;\n  disabled: boolean;\n  selected: boolean;\n}\n\n@customElement('kemet-select')\nexport default class KemetSelect extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [stylesSelect];\n\n  @property({ type: String })\n  slug: string;\n\n  @property({ type: String })\n  name: string = 'select';\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: Array })\n  options: IOptions[];\n\n  @property({ type: String, reflect: true })\n  status: string;\n\n  @property({ type: Boolean, reflect: true })\n  required: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean;\n\n  @property({ type: Boolean })\n  multiple: boolean;\n\n  @property({ type: String })\n  icon: string = 'chevron-down';\n\n  @property({ type: Number, attribute: 'icon-size' })\n  iconSize: number = 18;\n\n  @property({ type: Boolean, reflect: true })\n  filled: boolean;\n\n  @property({ reflect: true })\n  rounded: TypeRoundedSizes;\n\n  @state()\n  invalid: boolean;\n\n  @state()\n  control: KemetField;\n\n  @state()\n  select: HTMLSelectElement;\n\n  @state()\n  selectedOption: HTMLOptionElement;\n\n  @state()\n  optionElements: NodeListOf<KemetOption>;\n\n  @state()\n  hasFocus: boolean;\n\n  constructor() {\n    super();\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n\n    /** @internal */\n    this.control = this.closest('kemet-field');\n  }\n\n  firstUpdated() {\n    this.select = this.shadowRoot.querySelector('select');\n    this.selectedOption = this.querySelector('[selected]');\n    this.value = this.selectedOption ? this.selectedOption.value : '';\n  }\n\n  render() {\n    return html`\n      <select\n        part=\"select\"\n        id=${this.slug}\n        name=${this.name}\n        ?required=${this.required}\n        ?disabled=${this.disabled}\n        ?multiple=${this.multiple}\n        @change=${this.handleChange}\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n        @invalid=${this.handleInvalid}\n      >\n        ${this.makeOptions()}\n      </select>\n      ${this.makeIcon()}\n      <slot @slotchange=${() => this.makeOptions()}></slot>\n    `;\n  }\n\n  /**\n   * Generates the option elements\n   * @private\n   * @returns {TemplateResult} An option element\n   */\n  makeOptions(): TemplateResult<1>[] {\n    this.options = [];\n    this.optionElements = this.querySelectorAll('kemet-option');\n\n    this.optionElements.forEach((option: KemetOption) => {\n      this.options = this.options.concat({\n        label: option.label,\n        value: option.value,\n        disabled: option.disabled,\n        selected: option.selected,\n      });\n    });\n\n    return this.options.map(\n      option => html`<option value=${option.value} ?disabled=${option.disabled} ?selected=${option.selected}>\n        ${option.label}\n      </option>`,\n    );\n  }\n\n  /**\n   * Generates a dropdown icon\n   * @private\n   */\n  makeIcon() {\n    if (this.icon || this.icon !== '') {\n      return html`<kemet-icon-bootstrap icon=${this.icon} size=${this.iconSize}></kemet-icon-bootstrap>`;\n    }\n\n    return null;\n  }\n\n  /**\n   * Handles when the input receives focus\n   * @private\n   */\n  handleFocus() {\n    this.hasFocus = true;\n    emitEvent(this, 'kemet-focus', this);\n  }\n\n  /**\n   * Handles when the input loses focus\n   * @private\n   */\n  handleBlur() {\n    this.hasFocus = false;\n    emitEvent(this, 'kemet-blur', this);\n\n    this.select.checkValidity();\n\n    if (!this.select.checkValidity()) {\n      this.invalid = true;\n      this.status = EnumStatuses.Error;\n      this.control.status = EnumStatuses.Error;\n\n      emitEvent(this, 'kemet-status-change', {\n        status: EnumStatuses.Error,\n        validity: this.select.validity,\n        element: this,\n      });\n    }\n  }\n\n  /**\n   * Handles when the input changes value\n   * @private\n   */\n  handleChange(event: Event) {\n    this.value = this.select.value;\n    emitEvent(this, 'kemet-change', {\n      status: this.status,\n      validity: this.select.validity,\n      element: this,\n      value: (event.target as HTMLSelectElement).value,\n    });\n\n    if (this.select.checkValidity()) {\n      this.invalid = false;\n      this.status = EnumStatuses.Standard;\n\n      emitEvent(this, 'kemet-status-change', {\n        status: EnumStatuses.Standard,\n        validity: this.select.validity,\n        element: this,\n        value: (event.target as HTMLSelectElement).value,\n      });\n    }\n  }\n\n  /**\n   * Handles when the input has an error\n   * @private\n   */\n  handleInvalid() {\n    this.invalid = true;\n    this.status = EnumStatuses.Error;\n\n    emitEvent(this, 'kemet-status-change', {\n      status: EnumStatuses.Error,\n      validity: this.select.validity,\n      element: this,\n    });\n  }\n\n  /**\n   * Checks the validity of the standard select\n   * @public\n   * @returns {boolean}\n   */\n  checkValidity(): boolean {\n    return this.select.checkValidity();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-select': KemetSelect\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesSelect = css`\n  :host {\n    --kemet-select-padding: 1rem;\n    --kemet-select-border: 1px solid rgb(var(--kemet-color-foreground));\n    --kemet-select-border-color-error: 1px solid rgb(var(--kemet-color-error));\n    --kemet-select-border-color-success: 1px solid rgb(var(--kemet-color-success));\n    --kemet-select-border-color-warning: 1px solid rgb(var(--kemet-color-warning));\n    --kemet-select-border-radius-rounded: var(--kemet-border-radius-md);\n    --kemet-select-border-filled: none;\n    --kemet-select-color-filled: rgb(var(--kemet-color-white));\n    --kemet-select-background-color-filled: rgb(var(--kemet-color-primary));\n    --kemet-select-background-color-error: rgb(var(--kemet-color-error));\n    --kemet-select-background-color-success: rgb(var(--kemet-color-success));\n    --kemet-select-background-color-warning: rgb(var(--kemet-color-warning));\n    --kemet-select-icon-right: 1rem;\n    --kemet-select-border-radius-rounded: 0;\n\n    position: relative;\n    display: block;\n  }\n\n  select {\n    color: rgb(var(--kemet-color-text));\n    display: block;\n    font-size: 1rem;\n    width: 100%;\n    padding: var(--kemet-select-padding);\n    border: var(--kemet-select-border);\n    appearance: none;\n    box-sizing: border-box;\n    background-color: transparent;\n    border-radius: var(--kemet-select-border-radius-rounded);\n  }\n\n  option {\n    color: rgb(var(--kemet-color-black));\n  }\n\n  :host([status='error']) select {\n    border: var(--kemet-select-border-color-error);\n  }\n\n  :host([status='success']) select {\n    border: var(--kemet-select-border-color-success);\n  }\n\n  :host([status='warning']) select {\n    border: var(--kemet-select-border-color-warning);\n  }\n\n  :host([disabled]) select {\n    opacity: 0.5;\n  }\n\n  :host([rounded]) select {\n    --kemet-select-border-radius-rounded: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=sm]) select {\n    --kemet-select-border-radius-rounded: var(--kemet-border-radius-sm);\n  }\n\n  :host([rounded=md]) select {\n    --kemet-select-border-radius-rounded: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=lg]) select {\n    --kemet-select-border-radius-rounded: var(--kemet-border-radius-lg);\n  }\n\n  :host([rounded=xl]) select {\n    --kemet-select-border-radius-rounded: var(--kemet-border-radius-xl);\n  }\n\n  :host([rounded=circle]) select {\n    --kemet-select-border-radius-rounded: var(--kemet-border-radius-circle);\n  }\n\n  :host([rounded=pill]) select {\n    --kemet-select-border-radius-rounded: var(--kemet-border-radius-pill);\n  }\n\n  :host([filled]) select {\n    border: var(--kemet-select-border-filled);\n    color: var(--kemet-select-color-filled);\n    background-color: var(--kemet-select-background-color-filled);\n  }\n\n  :host([status='error'][filled]) select {\n    background-color: var(--kemet-select-background-color-error);\n  }\n\n  :host([status='success'][filled]) select {\n    background-color: var(--kemet-select-background-color-success);\n  }\n\n  :host([status='warning'][filled]) select {\n    background-color: var(--kemet-select-background-color-warning);\n  }\n\n  kemet-icon-bootstrap {\n    position: absolute;\n    right: var(--kemet-select-icon-right);\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  :host([filled]) kemet-icon-bootstrap {\n    color: var(--kemet-select-color-filled);\n  }\n`;\n"],"mappings":"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","names":[]}