{"version":3,"names":["AdsSelectOption","disabled","value","text","attributes","h","Object","assign","SelectItemTypes","adsSelectCss","AdsSelectStyle0","AdsSelect","constructor","hostRef","this","generateOptionGroup","item","hasItems","items","length","map","option","generateOption","label","generateOptions","type","undefined","OPTION","OPTGROUP","updateSelectValue","isNullOrUndefinedOrEmpty","internalSelected","el","shadowRoot","querySelector","setInternalSelected","newValue","ButtonLevels","TERTIARY","ButtonSizes","DEFAULT","setAttribute","identifier","generateId","component","onSelectChange","bind","selected","handleIdentifierChange","onValueChange","newSelected","Promise","resolve","evt","$target","currentTarget","selectChange","emit","isNullOrUndefined","selectChangeHandler","componentDidLoad","Pipeline.addComponent","disconnectedCallback","Pipeline.removeComponent","render","tabIndex","labelAttributes","srLabel","labelClasses","push","getClassFromLevel","level","getClassFromSize","size","isReversed","selectAttributes","autoFocus","form","multiple","name","required","$label","part","class","$elements","key","onChange","_a","Host","join","reverse"],"sources":["src/components/ads-select/components/ads-select-option.tsx","src/components/ads-select/ads-select.types.ts","src/components/ads-select/ads-select.scss?tag=ads-select&encapsulation=shadow","src/components/ads-select/ads-select.tsx"],"sourcesContent":["import { FunctionalComponent, VNode, h } from '@stencil/core';\n\ninterface AdsSelectOptionProps {\n  disabled: boolean;\n  value: string;\n  text: string;\n}\n\nexport const AdsSelectOption: FunctionalComponent<AdsSelectOptionProps> = ({ disabled, value, text }) => {\n  const attributes = {\n    disabled: disabled ? true : null,\n  };\n  return (<option value={value} {...attributes}>{`${text}`}</option>) as VNode;\n};\n","/**\n * A collection of select item types\n */\nexport enum SelectItemTypes {\n  OPTION = 'option',\n  OPTGROUP = 'optgroup',\n}\n\nexport type SelectItemTypeOption = 'option';\nexport type SelectItemTypeOptGroup = 'optgroup';\n\n/**\n * Selection type\n * @docs\n */\nexport type SelectItemType = SelectItemTypeOption | SelectItemTypeOptGroup;\n\n/**\n * An interface for the select item type\n */\nexport interface SelectItem {\n  type?: SelectItemTypeOption | SelectItemTypeOptGroup;\n}\n\n/**\n * An interface for the select option\n * @docs\n */\nexport interface SelectOption extends SelectItem {\n  disabled?: boolean;\n  value: string;\n  text: string;\n}\n\n/**\n * An interface for the select option-group\n * @docs\n */\nexport interface SelectOptionGroup extends SelectItem {\n  disabled?: boolean;\n  label: string;\n  items?: Array<SelectOption>;\n}\n\n/**\n * An interface for the change event\n * @docs\n */\nexport interface SelectChangeEvent {\n  evt?: Event;\n  value?: string;\n}\n\n/**\n * An interface that describes the file selection handler\n */\nexport type SelectChangeHandler = (evt: SelectChangeEvent) => void;\n","@import 'core';\n\n/**\n * @prop --ads-select-label-color: Label text color\n *\n * @prop --ads-select-label-margin-left: Label left margin\n * @prop --ads-select-label-margin-right: Label right margin\n *\n * @prop --ads-select-trigger-arrow-left: Select arrow left position\n * @prop --ads-select-trigger-arrow-right: Select arrow right position\n *\n * @prop --ads-select-trigger-padding-left: Select trigger left padding\n * @prop --ads-select-trigger-padding-right: Select trigger right padding\n *\n * @prop --ads-select-trigger-width: Select trigger width\n */\n\n:host {\n  display: block;\n}\n\n:host([theme='default']) {\n  @include ads-vars-component-button-default;\n  @include ads-vars-component-select-default;\n}\n\n:host([theme='dark']) {\n  @include ads-vars-component-button-dark;\n  @include ads-vars-component-select-dark;\n}\n\n:host([dir='ltr']) {\n  @include ads-vars-component-select-ltr;\n}\n\n:host([dir='rtl']) {\n  @include ads-vars-component-select-rtl;\n}\n\n.c-select {\n  @include ads-select;\n}\n","/* eslint-disable @typescript-eslint/no-unsafe-call */\n/* eslint-disable @typescript-eslint/no-unsafe-member-access */\nimport { Component, Element, Event, EventEmitter, Host, Method, Prop, State, VNode, Watch, h } from '@stencil/core';\n\nimport * as Pipeline from '../core/utils/pipeline';\nimport { AdsSelectOption } from './components/ads-select-option';\nimport { BaseComponent } from '../core/interfaces/BaseComponent';\nimport { ButtonLevel, ButtonLevels, ButtonSize, ButtonSizes, Theme } from '../core/types/globalTypes';\nimport { SelectChangeEvent, SelectChangeHandler, SelectItem, SelectItemTypes, SelectOption, SelectOptionGroup } from './ads-select.types';\nimport { generateId, getClassFromLevel, getClassFromSize } from '../core/utils/components';\nimport { isNullOrUndefined, isNullOrUndefinedOrEmpty } from 'utils/index';\n\n/**\n * The Select component displays mutually exclusive options in a list of text. The Select parent label describes the item the user is selecting for and changes after selection to display the selected item. The Select component uses the default browser styling for the list.\n * @tag `<ads-select>`\n * @slot label - Label of the input\n * @example <ads-select><option value=\"lycaenidae\">Lycaenidae</option><option value=\"papilionidae\">Papilionidae</option><option value=\"riodinidae\">Riodinidae</option></ads-select>\n */\n@Component({\n  tag: 'ads-select',\n  styleUrl: 'ads-select.scss',\n  shadow: true,\n})\nexport class AdsSelect implements BaseComponent {\n  /**\n   * @hidden\n   */\n  public component: string;\n\n  constructor() {\n    this.el.setAttribute('id', this.identifier || generateId('ads-select'));\n    this.component = 'ads-select';\n\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n    this.onSelectChange = this.onSelectChange.bind(this);\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n    this.updateSelectValue = this.updateSelectValue.bind(this);\n    this.internalSelected = this.selected;\n  }\n\n  @Element() private el: HTMLAdsSelectElement;\n\n  /**\n   * @hidden\n   */\n  @State() internalSelected: string;\n\n  /**\n   * The unique identifier (optional)\n   */\n  @Prop({ attribute: 'id' }) identifier?: string;\n\n  /**\n   * The theme for this component instance (optional)\n   * Values: \"default\", \"dark\"\n   */\n  @Prop({ reflect: true }) theme?: Theme;\n\n  /**\n   * Specifies if the select should automatically get focus (optional)\n   * @default false\n   */\n  @Prop({ reflect: true, attribute: 'autofocus' }) autoFocus = false;\n\n  /**\n   * Determines whether select is disabled or not (optional)\n   * @default false\n   */\n  @Prop({ reflect: true, attribute: 'disabled' }) disabled = false;\n\n  /**\n   * Defines which form the select belongs to. e.g. '#register-form' (optional)\n   */\n  @Prop({ reflect: true, attribute: 'form' }) form?: string;\n\n  /**\n   * Text to display as the aria-label on the select (optional)\n   */\n  @Prop({ reflect: true }) srLabel?: string;\n\n  /**\n   * The options or options group for the select (optional)\n   */\n  @Prop() items?: SelectItem[];\n\n  /**\n   * The level of the button: primary | secondary | tertiary (optional)\n   * @default \"tertiary\"\n   */\n  @Prop({ reflect: true }) level: ButtonLevel = ButtonLevels.TERTIARY;\n\n  /**\n   * Specifies that multiple options can be selected at once (optional)\n   * @default false\n   */\n  @Prop({ reflect: true, attribute: 'multiple' }) multiple = false;\n\n  /**\n   * The name of the control (optional)\n   */\n  @Prop({ reflect: true, attribute: 'name' }) name?: string;\n\n  /**\n   * Specifies whether or not the elements are in a reversed order (optional)\n   * @default false\n   */\n  @Prop({ reflect: true }) isReversed = false;\n\n  /**\n   * Specifies that the user is required to select a value before submitting the form (optional)\n   * @default false\n   */\n  @Prop({ reflect: true, attribute: 'required' }) required = false;\n\n  /**\n   * The selected value (optional)\n   */\n  @Prop({ reflect: true }) selected?: string;\n\n  /**\n   * The size of the button (optional)\n   * @default \"default\"\n   */\n  @Prop({ reflect: true }) size: ButtonSize = ButtonSizes.DEFAULT;\n\n  /**\n   * Callback function triggered on selection change (optional)\n   */\n  @Prop() selectChangeHandler?: SelectChangeHandler;\n\n  /**\n   * Handle identifier property changes\n   * @param {string} newValue The new value for \"identifier\"\n   * @hidden\n   */\n  @Watch('identifier')\n  handleIdentifierChange(newValue: string): void {\n    this.el.setAttribute('id', newValue || generateId('ads-select'));\n  }\n\n  /**\n   * Watch for selected prop change\n   * @param {boolean}   newSelected  The new value for 'selected'\n   * @hidden\n   */\n  @Watch('selected')\n  onValueChange(newSelected: string): void {\n    if (newSelected !== undefined && newSelected !== null) {\n      this.setInternalSelected(this.selected);\n    }\n  }\n\n  /**\n   * Emits the 'selectChange' custom event.\n   * Usage: `document.querySelector('ads-select').addEventListener('selectChange', function(evt) {});`\n   * @event\n   */\n  @Event({ bubbles: false }) selectChange: EventEmitter<SelectChangeEvent>;\n\n  /**\n   * Returns the selected option value\n   * @return {Promise<string>}  The selected option value\n   */\n  @Method()\n  value(): Promise<string> {\n    return Promise.resolve(this.internalSelected);\n  }\n\n  /**\n   * Handle select change events\n   * @param   {Event} evt     The select change event\n   * @returns {void}\n   */\n  private onSelectChange(evt: Event): void {\n    const $target = evt.currentTarget as HTMLSelectElement;\n    const value = $target.value;\n\n    this.selectChange.emit({ evt, value });\n    if (!isNullOrUndefined(this.selectChangeHandler)) {\n      this.selectChangeHandler({ evt, value });\n    }\n\n    // Update state if no prop is provided and then update the selection\n    if (this.selected === undefined || this.selected === null) {\n      this.setInternalSelected(this.selected);\n    } else {\n      this.updateSelectValue();\n    }\n  }\n\n  /**\n   * Generate an option-group\n   * @param {SelectOptionGroup} item    The item to generated a select option-group for\n   * @returns {VNode}                   The generated option-group\n   */\n  private generateOptionGroup = (item: SelectOptionGroup): VNode => {\n    const hasItems = item.items && item.items.length > -1;\n    const items = hasItems\n      ? item.items.map((option) => {\n          return this.generateOption(option);\n        })\n      : null;\n\n    const attributes = {\n      disabled: item.disabled ? true : null,\n    };\n\n    return (\n      <optgroup label={item.label} {...attributes}>\n        {items}\n      </optgroup>\n    ) as VNode;\n  };\n\n  /**\n   * Generate an option\n   * @param {SelectOption}  item    The item to generate a select option for\n   * @returns {VNode}               The generated select option\n   */\n  private generateOption = (item: SelectOption): VNode => {\n    return (<AdsSelectOption disabled={item.disabled ? true : null} value={item.value} text={item.text} />) as VNode;\n  };\n\n  /**\n   * Generate the select options\n   * @param {SelectOption[]|SelectOptionGroup[]}  items   The select options or option-groups\n   * @returns {VNode[]}                                   The select options\n   */\n  private generateOptions = (items: SelectItem[]): VNode[] => {\n    return items.map((item) => {\n      if (item.type === undefined || item.type === SelectItemTypes.OPTION) {\n        return this.generateOption(item as SelectOption);\n      } else if (item.type === SelectItemTypes.OPTGROUP) {\n        return this.generateOptionGroup(item as SelectOptionGroup);\n      }\n    });\n  };\n\n  /**\n   * Updates the selected option based on the internal state\n   * @returns {void}\n   */\n  private updateSelectValue = (): void => {\n    if (!isNullOrUndefinedOrEmpty(this.internalSelected)) {\n      this.el.shadowRoot.querySelector('select').value = this.internalSelected;\n    }\n  };\n\n  /**\n   * Sets the internal state to the given value\n   * @param   {string}  newValue  The new selected option value\n   * @returns {void}\n   */\n  private setInternalSelected = (newValue: string): void => {\n    this.internalSelected = newValue;\n    this.updateSelectValue();\n  };\n\n  protected componentDidLoad(): void {\n    Pipeline.addComponent(this.el);\n    this.updateSelectValue();\n  }\n\n  protected disconnectedCallback(): void {\n    Pipeline.removeComponent(this.el);\n  }\n\n  protected render(): VNode {\n    const attributes = {\n      tabIndex: this.disabled ? -1 : null,\n    };\n\n    const labelAttributes = {\n      'aria-label': !isNullOrUndefinedOrEmpty(this.srLabel) ? this.srLabel : null,\n    };\n\n    const labelClasses: string[] = ['c-select'];\n    labelClasses.push(getClassFromLevel(this.level));\n    labelClasses.push(getClassFromSize(this.size));\n    labelClasses.push(this.disabled ? 'is-disabled' : null);\n    labelClasses.push(this.isReversed ? 'is-reversed' : null);\n\n    const selectAttributes = {\n      autoFocus: this.autoFocus ? true : null,\n      disabled: this.disabled ? true : null,\n      form: this.form,\n      multiple: this.multiple ? true : null,\n      name: this.name,\n      required: this.required ? true : null,\n    };\n\n    // Generate the label element, if required\n    const $label =\n      (this.el as HTMLElement).querySelector('[slot=\"label\"]') !== null\n        ? ((\n            <span part=\"label\" class=\"c-select__label\">\n              <slot name=\"label\" />\n            </span>\n          ) as VNode)\n        : null;\n\n    const $elements = [\n      $label,\n      (\n        <span part=\"trigger\" class=\"c-select__trigger\">\n          <select {...selectAttributes} onChange={this.onSelectChange}>\n            {this.items?.length ? this.generateOptions(this.items) : null}\n          </select>\n        </span>\n      ) as VNode,\n    ];\n\n    return (\n      <Host {...attributes}>\n        <label part=\"select\" class={labelClasses.join(' ')} {...labelAttributes}>\n          {!this.isReversed ? $elements : $elements.reverse()}\n        </label>\n      </Host>\n    ) as VNode;\n  }\n}\n"],"mappings":"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","ignoreList":[]}