{"version":3,"names":["ClearButton","label","clickHandler","h","class","onClick","generateSVGImage","data","svgPathData","height","width","adsFileSelectCss","AdsFileSelectStyle0","AdsFileSelect","constructor","hostRef","this","clearHandler","reset","onFileInputChange","evt","target","isNullOrUndefined","onFileSelectionChange","files","buttonClickHandler","getInputElement","click","disableKeyUpHandler","keyCode","key","toLowerCase","preventDefault","stopPropagation","keyUpHandler","generateLabelFromFiles","length","name","Dictionary","get","count","el","setAttribute","identifier","generateId","component","registerComponent","handleIdentifierChange","newValue","undefined","value","Promise","resolve","newFiles","fileSelect","emit","fileSelectHandler","shadowRoot","querySelector","componentDidLoad","Pipeline.addComponent","autoFocus","fileSelectEl","focus","disconnectedCallback","Pipeline.removeComponent","render","HostClassNames","disabled","push","required","inputAttributes","form","onChange","isNullOrUndefinedOrEmpty","accept","multiple","fileNames","placeholder","Host","onKeyUp","join","tabIndex","type","Object","assign","id"],"sources":["src/components/ads-file-select/components/clear-button/ClearButton.tsx","src/components/ads-file-select/ads-file-select.scss?tag=ads-file-select&encapsulation=shadow","src/components/ads-file-select/ads-file-select.tsx"],"sourcesContent":["import { FunctionalComponent, VNode, h } from '@stencil/core';\nimport { generateSVGImage } from 'utils/imageHelper';\nimport { height, svgPathData, width } from '@fortawesome/pro-light-svg-icons/faTimesCircle';\n\n/**\n * Interface for the clear button\n * @hidden\n */\ninterface ClearButtonProps {\n  label: string;\n  clickHandler: (evt: MouseEvent) => void;\n}\n\n/**\n * Generates a clear button\n * @return {FunctionalComponent<IModalButtonProps>} The clear button\n */\nexport const ClearButton: FunctionalComponent<ClearButtonProps> = ({ label, clickHandler }: ClearButtonProps) => {\n  return (\n    <button class=\"c-file-select__clear\" aria-label={label} data-track=\"true\" data-track-value={label} onClick={clickHandler}>\n      {generateSVGImage({ data: svgPathData, height, width })}\n    </button>\n  ) as VNode;\n};\n","@import 'core';\n\n/**\n * @prop --ads-file-select-clear-color: Clear button text color\n * @prop --ads-file-select-clear-color-hover: Hovered clear button text color\n *\n * @prop --ads-file-select-button-background-color: Button background color\n * @prop --ads-file-select-button-background-color-disabled: Disabled button background color\n * @prop --ads-file-select-button-background-color-hover: Hovered button background color\n *\n * @prop --ads-file-select-button-border-color: Button border color\n * @prop --ads-file-select-button-border-color-disabled: Disabled button border color\n * @prop --ads-file-select-button-border-color-hover: Hovered button border color\n\n * @prop --ads-file-select-button-border-left-hover: Hovered button border left color\n *\n * @prop --ads-file-select-button-color: Button text color\n * @prop --ads-file-select-button-color-disabled: Disabled button text color\n * @prop --ads-file-select-button-color-hover: Hovered button text color\n *\n * @prop --ads-file-select-files-background-color: Files background color\n * @prop --ads-file-select-files-background-color-disabled: Disabled files background color\n * @prop --ads-file-select-files-background-color-hover: Hovered files background color\n *\n * @prop --ads-file-select-files-border-color: Files border color\n * @prop --ads-file-select-files-border-color-disabled: Disabled files border color\n * @prop --ads-file-select-files-border-color-hover: Hovered files border color\n *\n * @prop --ads-file-select-files-color: Files text color\n * @prop --ads-file-select-files-color-disabled: Disabled files text color\n * @prop --ads-file-select-files-color-hover: Hovered files text color\n *\n * @prop --ads-file-select-files-padding-left: Files padding left\n * @prop --ads-file-select-files-padding-right: Files padding right\n */\n\n:host {\n  display: block;\n  position: relative;\n  width: 100%;\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n}\n\n:host([theme='default']) {\n  @include ads-vars-component-file-select-default;\n}\n\n:host([theme='dark']) {\n  @include ads-vars-component-file-select-dark;\n}\n\n:host([dir='ltr']) {\n  @include ads-vars-component-file-select-ltr;\n}\n\n:host([dir='rtl']) {\n  @include ads-vars-component-file-select-rtl;\n}\n\n.c-file-select {\n  @include ads-file-select;\n}\n","import * as Pipeline from '../core/utils/pipeline';\nimport { BaseComponent } from '../core/interfaces/BaseComponent';\nimport { ClearButton } from './components/clear-button/ClearButton';\nimport { Component, Element, Event, EventEmitter, Host, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { Dictionary } from '../core/classes/Dictionary';\nimport { FileSelectEvent, FileSelectHandler } from './ads-file-select.types';\nimport { Theme } from '../core/types/globalTypes';\nimport { generateId } from '../core/utils/components';\nimport { isNullOrUndefined, isNullOrUndefinedOrEmpty } from 'utils/collection';\n\n/**\n * The File Select component enables users to select a file by browsing from the local computer.\n * Selecting the browse button displays the computer operating system dialog for file selection.\n * Once a file is selected and the “open” button is clicked the File Select displayed the name of the selected file and a cancel “X” button.\n * The file select component consists of placeholder text indicating the action (i.e. Choose file) and an integrated Browse button.\n * @tag `<ads-file-select>`\n * @example <ads-file-select name=\"customName\"></ads-file-select>\n */\n@Component({\n  tag: 'ads-file-select',\n  styleUrl: 'ads-file-select.scss',\n  shadow: true,\n})\nexport class AdsFileSelect implements BaseComponent {\n  /**\n   * @hidden\n   */\n  public component: string;\n\n  constructor() {\n    this.el.setAttribute('id', this.identifier || generateId('ads-file-select'));\n    this.component = 'ads-file-select';\n    Dictionary.registerComponent(this);\n  }\n\n  @Element() private el: HTMLAdsFileSelectElement;\n\n  /**\n   * The internal state of selected files\n   * @hidden\n   */\n  @State() files: FileList;\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 the types of files that are accepted (optional)\n   */\n  @Prop({ reflect: true }) accept?: string;\n\n  /**\n   * Whether or not the file upload button should automatically get focus upon page load (optional)\n   * @default false\n   */\n  @Prop({ attribute: 'autofocus', reflect: true }) autoFocus = false;\n\n  /**\n   * Whether or not a file must be selected before submitting (optional)\n   * @default false\n   */\n  @Prop({ attribute: 'disabled', reflect: true }) disabled = false;\n\n  /**\n   * Specifies the form element the element belongs to.\n   * The value of this attribute must be the id attribute\n   * of a <form> element in the same document. (optional)\n   */\n  @Prop({ reflect: true }) form?: string;\n\n  /**\n   * Specifies that the user is allowed to enter more than one value (optional)\n   * @default false\n   */\n  @Prop({ attribute: 'multiple', reflect: true }) multiple = false;\n\n  /**\n   * The value of the name attribute (optional)\n   */\n  @Prop({ attribute: 'name', reflect: true }) name?: string;\n\n  /**\n   * Whether or not a file must be selected before submitting (optional)\n   * @default false\n   */\n  @Prop({ attribute: 'required', reflect: true }) required = false;\n\n  /**\n   * The label for the input (optional).\n   * Translations for the default value can be configured, if required, via the `BROWSE` key.\n   * @default \"Browse\"\n   */\n  @Prop({ reflect: true }) label = Dictionary.get('Browse', 'BROWSE');\n\n  /**\n   * The placeholder for the input (optional).\n   * Translations for the default value can be configured, if required, via the `CHOOSE_FILE` key.\n   * @default \"Choose file\"\n   */\n  @Prop({ attribute: 'placeholder', reflect: true }) placeholder = Dictionary.get('Choose file', 'CHOOSE_FILE');\n\n  /**\n   * Callback function triggered on file selection change (optional)\n   */\n  @Prop() fileSelectHandler?: FileSelectHandler;\n\n  /**\n   * Emits the 'adsFileSelectChanged' custom event.\n   * Usage: `document.querySelector('ads-file-select').addEventListener('adsFileSelectChanged', function(evt) {});`\n   * @event\n   */\n  @Event({ bubbles: false }) fileSelect: EventEmitter<FileSelectEvent>;\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-file-select'));\n  }\n\n  /**\n   * Resets the file select.\n   * Usage: `document.querySelector('ads-file-select').reset();`\n   */\n  @Method()\n  async reset(): Promise<void> {\n    this.onFileSelectionChange(undefined);\n    // Reset the vanilla input element too\n    this.getInputElement().value = '';\n    return Promise.resolve();\n  }\n\n  /**\n   * Returns the currently selected files\n   * @return {Promise<FileList>}  The currently selected files\n   */\n  @Method()\n  value(): Promise<FileList> {\n    return Promise.resolve(this.files);\n  }\n\n  /**\n   * Handle clear button interaction events\n   * @return {Promise<void>}  The reset promise\n   */\n  private clearHandler = (): Promise<void> => {\n    return this.reset();\n  };\n\n  /**\n   * Handle file input changes\n   * @param {Event} evt the triggering event\n   * @private\n   * @hidden\n   */\n  private onFileInputChange = (evt: Event) => {\n    const target = evt.target as HTMLInputElement;\n    if (isNullOrUndefined(target)) {\n      return;\n    }\n    this.onFileSelectionChange(target.files, evt);\n  };\n\n  /**\n   * Calls the event and the handler and updates local state if prop is not provided\n   * @param {FileList} newFiles the new files\n   * @param {Event} evt the triggering event\n   */\n  private onFileSelectionChange(newFiles: FileList, evt?: Event) {\n    this.fileSelect.emit({ evt, files: newFiles });\n    if (!isNullOrUndefined(this.fileSelectHandler)) {\n      this.fileSelectHandler({ evt, files: newFiles });\n    }\n    this.files = newFiles;\n  }\n\n  /**\n   * Handle button click events\n   * @private\n   * @hidden\n   */\n  private buttonClickHandler = (): void => {\n    this.getInputElement().click();\n  };\n\n  /**\n   * Disable the enter key for the file select button\n   * @param {KeyboardEvent}   evt     The keyboard event\n   * @return {void}\n   */\n  private disableKeyUpHandler = (evt: KeyboardEvent): void => {\n    const keyCode = evt.key.toLowerCase() || 0;\n    if (keyCode === 'enter') {\n      evt.preventDefault();\n      evt.stopPropagation();\n    }\n  };\n\n  /**\n   * Handle keyboard events\n   * @param {KeyboardEvent}   evt     The keyboard event\n   */\n  private keyUpHandler = (evt: KeyboardEvent): void => {\n    const keyCode = evt.key.toLowerCase() || 0;\n    switch (keyCode) {\n      case 'enter':\n        this.getInputElement().click();\n        break;\n      default:\n        return;\n    }\n  };\n\n  /**\n   * Generate the label\n   * @return {string} the label\n   */\n  private generateLabelFromFiles = (): string => {\n    if (this.files.length === 1) {\n      return this.files[0].name;\n    }\n    return Dictionary.get(`${this.files.length} files`, 'X_FILES', { count: this.files.length });\n  };\n\n  /**\n   * Gets the input element\n   * @returns {HTMLInputElement} the input element\n   */\n  private getInputElement(): HTMLInputElement {\n    return this.el.shadowRoot.querySelector('.c-file-select__input');\n  }\n\n  protected componentDidLoad(): void {\n    Pipeline.addComponent(this.el);\n    if (this.autoFocus) {\n      const fileSelectEl: HTMLElement = this.el.shadowRoot.querySelector('.c-file-select');\n      fileSelectEl.focus();\n    }\n  }\n\n  protected disconnectedCallback(): void {\n    Pipeline.removeComponent(this.el);\n  }\n\n  protected render(): HTMLElement {\n    const HostClassNames = ['c-file-select'];\n    if (this.disabled) {\n      HostClassNames.push('is-disabled');\n    }\n    if (this.required) {\n      HostClassNames.push('is-required');\n    }\n\n    const inputAttributes: {\n      form: string;\n      name: string;\n      onChange: (evt: Event) => void;\n      accept?: string;\n      autofocus?: boolean;\n      multiple?: boolean;\n      disabled?: boolean;\n      'aria-disabled'?: boolean;\n      required?: boolean;\n      'aria-required'?: boolean;\n    } = {\n      form: this.form,\n      name: this.name,\n      onChange: this.onFileInputChange,\n    };\n\n    if (!isNullOrUndefinedOrEmpty(this.accept)) {\n      inputAttributes['accept'] = this.accept;\n    }\n    if (this.multiple) {\n      inputAttributes['multiple'] = true;\n    }\n    if (this.disabled) {\n      inputAttributes['disabled'] = true;\n      inputAttributes['aria-disabled'] = true;\n    }\n    if (this.required) {\n      inputAttributes['required'] = true;\n      inputAttributes['aria-required'] = true;\n    }\n\n    const fileNames = !isNullOrUndefined(this.files) && this.files.length ? this.generateLabelFromFiles() : this.placeholder;\n    return (\n      <Host onKeyUp={this.keyUpHandler}>\n        <div class={HostClassNames.join(' ')} tabIndex={0}>\n          <div class=\"c-file-select__files\">\n            <span class=\"c-file-select__files__label\">{fileNames}</span>\n            {this.files && !this.disabled ? <ClearButton label=\"Clear\" clickHandler={this.clearHandler} /> : null}\n          </div>\n          <button\n            class=\"c-file-select__button\"\n            data-track=\"true\"\n            data-track-value={this.label}\n            onClick={this.buttonClickHandler}\n            onKeyUp={this.disableKeyUpHandler}\n            type=\"button\"\n          >\n            {this.label}\n          </button>\n          <input class=\"c-file-select__input\" id={`ads:file-select:${this.identifier}:input`} type=\"file\" {...inputAttributes} />\n        </div>\n      </Host>\n    ) as HTMLElement;\n  }\n}\n"],"mappings":"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","ignoreList":[]}