{"version":3,"names":["adsExpansionPanelCss","AdsExpansionPanel","constructor","hostRef","this","setInternalExpanded","newValue","internalExpanded","updateContentPanel","onClickHandler","evt","expansionChange","emit","expanded","isNullOrUndefined","expansionChangeHandler","undefined","onKeyDownHandler","code","preventDefault","el","setAttribute","identifier","generateId","component","handleIdentifierChange","onValueChange","newExpanded","shadowRoot","querySelector","classList","add","remove","componentWillLoad","isDefaultExpanded","componentDidLoad","Pipeline.addComponent","disconnectedCallback","Pipeline.removeComponent","render","toggleAttributes","role","toString","tabIndex","contentAttributes","$icon","data","iconDownPathData","height","iconDownHeight","width","iconDownWidth","h","class","Object","assign","onClick","onKeyDown","name","generateSVGImage","id"],"sources":["src/components/ads-expansion-panel/ads-expansion-panel.scss?tag=ads-expansion-panel&encapsulation=shadow","src/components/ads-expansion-panel/ads-expansion-panel.tsx"],"sourcesContent":["@import 'core';\n\n/**\n * @prop --ads-expansion-panel-border-color: Toggle border color\n * @prop --ads-expansion-panel-content-background-color: Content background color\n * @prop --ads-expansion-panel-content-color: Content text color\n * @prop --ads-expansion-panel-content-padding: Content padding\n *\n * @prop --ads-expansion-panel-hr-color: Horizontal Rule Color\n *\n * @prop --ads-expansion-panel-toggle-background-color-hover: Hovered toggle background color\n * @prop --ads-expansion-panel-toggle-background-color: Toggle Background color\n * @prop --ads-expansion-panel-toggle-color-hover: Hovered toggle text color\n * @prop --ads-expansion-panel-toggle-color: Toggle text color\n * @prop --ads-expansion-panel-toggle-icon-color-hover: Hovered Toggle icon color\n * @prop --ads-expansion-panel-toggle-icon-color: Toggle icon color\n * @prop --ads-expansion-panel-toggle-padding: Toggle padding\n */\n\n:host {\n  display: block;\n}\n\n::slotted(*) {\n  display: contents !important;\n}\n\n:host([theme='default']) {\n  @include ads-vars-component-expansion-panel-default;\n}\n\n:host([theme='dark']) {\n  @include ads-vars-component-expansion-panel-dark;\n}\n\n:host([dir='ltr']) {\n  @include ads-vars-component-expansion-panel-ltr;\n}\n\n:host([dir='rtl']) {\n  @include ads-vars-component-expansion-panel-rtl;\n}\n\n.c-expansion-panel {\n  @include ads-expansion-panel;\n}\n","import * as Pipeline from '../core/utils/pipeline';\nimport { BaseComponent } from '../core/interfaces/BaseComponent';\nimport { Component, Element, Event, EventEmitter, Prop, State, VNode, Watch, h } from '@stencil/core';\nimport { ExpansionChangeEvent, ExpansionChangeHandler } from './ads-expansion-panel.types';\nimport { Theme } from '../core/types/globalTypes';\nimport { generateId } from '../core/utils/components';\nimport { generateSVGImage, isNullOrUndefined } from 'utils/index';\nimport { height as iconDownHeight, svgPathData as iconDownPathData, width as iconDownWidth } from '@fortawesome/pro-regular-svg-icons/faChevronDown';\n\n/**\n * The Expansion Panel component enables large amounts of content to be displayed in a small space through progressive disclosure.\n * The header title describes the category of the content enabling the user to decide which sections are relevant for them.\n * @tag `<ads-expansion-panel>`\n * @slot toggle - Content rendered as rich text inside the component toggle\n * @slot content - Content rendered as rich text inside the component panel\n * @example <ads-expansion-panel>Hello world</ads-expansion-panel>\n */\n@Component({\n  tag: 'ads-expansion-panel',\n  styleUrl: 'ads-expansion-panel.scss',\n  shadow: true,\n})\nexport class AdsExpansionPanel implements BaseComponent {\n  /**\n   * @hidden\n   */\n  public component: string;\n\n  constructor() {\n    this.el.setAttribute('id', this.identifier || generateId('ads-expansion-panel'));\n    this.component = 'ads-expansion-panel';\n  }\n\n  /**\n   * The component element\n   * @hidden\n   */\n  @Element() el: HTMLAdsExpansionPanelElement;\n\n  /**\n   * @hidden\n   */\n  @State() internalExpanded: boolean;\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   * Whether or not the panel is expanded (optional)\n   */\n  @Prop({ reflect: true, attribute: 'expanded' }) expanded?: boolean;\n\n  /**\n   * Whether or not the panel is expanded on first render (optional)\n   * @default false\n   */\n  @Prop({ reflect: true }) isDefaultExpanded = false;\n\n  /**\n   * Callback function triggered on expansion change (optional)\n   */\n  @Prop() expansionChangeHandler?: ExpansionChangeHandler;\n\n  /**\n   * Emits the 'expansionChange' custom event.<br/>\n   * Usage: `document.querySelector('ads-select').addEventListener('expansionChange', function(evt) {});`\n   * @event\n   */\n  @Event({ bubbles: false }) expansionChange: EventEmitter<ExpansionChangeEvent>;\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-expansion-panel'));\n  }\n\n  /**\n   * Watch for expanded prop change\n   * @param {boolean}   newExpanded  The new value for 'expanded'\n   * @private\n   * @hidden\n   */\n  @Watch('expanded')\n  onValueChange(newExpanded: boolean): void {\n    if (newExpanded !== undefined && newExpanded !== null) {\n      this.setInternalExpanded(this.expanded);\n    }\n  }\n\n  /**\n   * Sets the internal state to the given value\n   * @param   {boolean}  newValue  The new selected option value\n   * @returns {void}\n   */\n  private setInternalExpanded = (newValue: boolean): void => {\n    this.internalExpanded = newValue;\n    this.updateContentPanel();\n  };\n\n  /**\n   * Update the classes on the content panel\n   * @returns {void}\n   */\n  private updateContentPanel(): void {\n    if (this.internalExpanded) {\n      this.el.shadowRoot.querySelector('.c-expansion-panel').classList.add('is-expanded');\n    } else {\n      this.el.shadowRoot.querySelector('.c-expansion-panel').classList.remove('is-expanded');\n    }\n  }\n\n  /**\n   * Handle click events\n   * @param   {Event}   evt   The original event\n   * @returns {void}\n   */\n  private onClickHandler = (evt: Event): void => {\n    this.expansionChange.emit({ evt, expanded: this.internalExpanded });\n    if (!isNullOrUndefined(this.expansionChangeHandler)) {\n      this.expansionChangeHandler({ evt, expanded: this.internalExpanded });\n    }\n    if (this.expanded === undefined || this.expanded === null) {\n      this.setInternalExpanded(!this.internalExpanded);\n    }\n  };\n\n  /**\n   * Handle key down events\n   * @param {KeyboardEvent}   evt     The keyboard event\n   * @returns {void}\n   */\n  private onKeyDownHandler = (evt: KeyboardEvent): void => {\n    if (evt.code !== 'Tab') {\n      evt.preventDefault();\n    }\n    if (evt.code !== 'Enter' && evt.code !== 'Space') {\n      return;\n    }\n    this.expansionChange.emit({ evt, expanded: this.internalExpanded });\n    if (!isNullOrUndefined(this.expansionChangeHandler)) {\n      this.expansionChangeHandler({ evt, expanded: this.internalExpanded });\n    }\n    if (this.expanded === undefined || this.expanded === null) {\n      this.setInternalExpanded(!this.internalExpanded);\n    }\n  };\n\n  protected componentWillLoad(): void {\n    this.internalExpanded =\n      this.expanded !== undefined && this.expanded !== null\n        ? this.expanded\n        : this.isDefaultExpanded !== undefined && this.isDefaultExpanded !== null\n        ? this.isDefaultExpanded\n        : false;\n  }\n\n  protected componentDidLoad(): void {\n    Pipeline.addComponent(this.el);\n    this.updateContentPanel();\n  }\n\n  protected disconnectedCallback(): void {\n    Pipeline.removeComponent(this.el);\n  }\n\n  protected render(): VNode {\n    const toggleAttributes = {\n      role: 'button',\n      'aria-controls': `ads:expansion-panel:${this.identifier}:content`,\n      'aria-expanded': this.internalExpanded.toString(),\n      tabIndex: 0,\n    };\n\n    const contentAttributes = {\n      'aria-hidden': (!this.internalExpanded).toString(),\n    };\n\n    const $icon = { data: iconDownPathData, height: iconDownHeight, width: iconDownWidth };\n\n    return (\n      <div class=\"c-expansion-panel\">\n        <div class=\"c-expansion-panel__toggle\" {...toggleAttributes} onClick={this.onClickHandler} onKeyDown={this.onKeyDownHandler}>\n          <slot name=\"toggle\" />\n          <span class=\"c-expansion-panel__toggle__icon\" role=\"presentation\">\n            {generateSVGImage($icon)}\n          </span>\n        </div>\n        {this.internalExpanded && <hr class=\"c-expansion-panel__hr\"></hr>}\n        <div class=\"c-expansion-panel__content\" id={`ads:expansion-panel:${this.identifier}:content`} {...contentAttributes}>\n          <slot name=\"content\" />\n        </div>\n      </div>\n    ) as VNode;\n  }\n}\n"],"mappings":"+RAAA,MAAMA,EAAuB,2tH,MCsBhBC,EAAiB,MAM5B,WAAAC,CAAAC,G,2DA8EQC,KAAAC,oBAAuBC,IAC7BF,KAAKG,iBAAmBD,EACxBF,KAAKI,oBAAoB,EAoBnBJ,KAAAK,eAAkBC,IACxBN,KAAKO,gBAAgBC,KAAK,CAAEF,MAAKG,SAAUT,KAAKG,mBAChD,IAAKO,EAAkBV,KAAKW,wBAAyB,CACnDX,KAAKW,uBAAuB,CAAEL,MAAKG,SAAUT,KAAKG,kB,CAEpD,GAAIH,KAAKS,WAAaG,WAAaZ,KAAKS,WAAa,KAAM,CACzDT,KAAKC,qBAAqBD,KAAKG,iB,GAS3BH,KAAAa,iBAAoBP,IAC1B,GAAIA,EAAIQ,OAAS,MAAO,CACtBR,EAAIS,gB,CAEN,GAAIT,EAAIQ,OAAS,SAAWR,EAAIQ,OAAS,QAAS,CAChD,M,CAEFd,KAAKO,gBAAgBC,KAAK,CAAEF,MAAKG,SAAUT,KAAKG,mBAChD,IAAKO,EAAkBV,KAAKW,wBAAyB,CACnDX,KAAKW,uBAAuB,CAAEL,MAAKG,SAAUT,KAAKG,kB,CAEpD,GAAIH,KAAKS,WAAaG,WAAaZ,KAAKS,WAAa,KAAM,CACzDT,KAAKC,qBAAqBD,KAAKG,iB,iIA3FU,M,sCAnC3CH,KAAKgB,GAAGC,aAAa,KAAMjB,KAAKkB,YAAcC,EAAW,wBACzDnB,KAAKoB,UAAY,qB,CAsDnB,sBAAAC,CAAuBnB,GACrBF,KAAKgB,GAAGC,aAAa,KAAMf,GAAYiB,EAAW,uB,CAUpD,aAAAG,CAAcC,GACZ,GAAIA,IAAgBX,WAAaW,IAAgB,KAAM,CACrDvB,KAAKC,oBAAoBD,KAAKS,S,EAkB1B,kBAAAL,GACN,GAAIJ,KAAKG,iBAAkB,CACzBH,KAAKgB,GAAGQ,WAAWC,cAAc,sBAAsBC,UAAUC,IAAI,c,KAChE,CACL3B,KAAKgB,GAAGQ,WAAWC,cAAc,sBAAsBC,UAAUE,OAAO,c,EAwClE,iBAAAC,GACR7B,KAAKG,iBACHH,KAAKS,WAAaG,WAAaZ,KAAKS,WAAa,KAC7CT,KAAKS,SACLT,KAAK8B,oBAAsBlB,WAAaZ,KAAK8B,oBAAsB,KACnE9B,KAAK8B,kBACL,K,CAGE,gBAAAC,GACRC,EAAsBhC,KAAKgB,IAC3BhB,KAAKI,oB,CAGG,oBAAA6B,GACRC,EAAyBlC,KAAKgB,G,CAGtB,MAAAmB,GACR,MAAMC,EAAmB,CACvBC,KAAM,SACN,gBAAiB,uBAAuBrC,KAAKkB,qBAC7C,gBAAiBlB,KAAKG,iBAAiBmC,WACvCC,SAAU,GAGZ,MAAMC,EAAoB,CACxB,gBAAiBxC,KAAKG,kBAAkBmC,YAG1C,MAAMG,EAAQ,CAAEC,KAAMC,cAAkBC,OAAQC,SAAgBC,MAAOC,SAEvE,OACEC,EAAA,OAAKC,MAAM,qBACTD,EAAA,MAAAE,OAAAC,OAAA,CAAKF,MAAM,6BAAgCb,EAAgB,CAAEgB,QAASpD,KAAKK,eAAgBgD,UAAWrD,KAAKa,mBACzGmC,EAAA,QAAMM,KAAK,WACXN,EAAA,QAAMC,MAAM,kCAAkCZ,KAAK,gBAChDkB,EAAiBd,KAGrBzC,KAAKG,kBAAoB6C,EAAA,MAAIC,MAAM,0BACpCD,EAAA,MAAAE,OAAAC,OAAA,CAAKF,MAAM,6BAA6BO,GAAI,uBAAuBxD,KAAKkB,sBAA0BsB,GAChGQ,EAAA,QAAMM,KAAK,a"}