{"version":3,"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"],"names":["adsExpansionPanelCss","AdsExpansionPanel","[object Object]","hostRef","this","isDefaultExpanded","setInternalExpanded","newValue","internalExpanded","updateContentPanel","onClickHandler","evt","expansionChange","emit","expanded","isNullOrUndefined","expansionChangeHandler","undefined","onKeyDownHandler","code","preventDefault","el","setAttribute","identifier","generateId","component","newExpanded","shadowRoot","querySelector","classList","add","remove","Pipeline.addComponent","Pipeline.removeComponent","toggleAttributes","role","aria-controls","aria-expanded","toString","tabIndex","contentAttributes","aria-hidden","$icon","data","iconDownPathData","height","iconDownHeight","width","iconDownWidth","h","class","Object","assign","onClick","onKeyDown","name","generateSVGImage","id"],"mappings":"+RAAA,MAAMA,EAAuB,iuHCsBhBC,EAAiB,MAM5BC,YAAAC,8DAoCyBC,KAAAC,kBAAoB,MA0CrCD,KAAAE,oBAAuBC,IAC7BH,KAAKI,iBAAmBD,EACxBH,KAAKK,sBAoBCL,KAAAM,eAAkBC,IACxBP,KAAKQ,gBAAgBC,KAAK,CAAEF,IAAAA,EAAKG,SAAUV,KAAKI,mBAChD,IAAKO,EAAkBX,KAAKY,wBAAyB,CACnDZ,KAAKY,uBAAuB,CAAEL,IAAAA,EAAKG,SAAUV,KAAKI,mBAEpD,GAAIJ,KAAKU,WAAaG,WAAab,KAAKU,WAAa,KAAM,CACzDV,KAAKE,qBAAqBF,KAAKI,oBAS3BJ,KAAAc,iBAAoBP,IAC1B,GAAIA,EAAIQ,OAAS,MAAO,CACtBR,EAAIS,iBAEN,GAAIT,EAAIQ,OAAS,SAAWR,EAAIQ,OAAS,QAAS,CAChD,OAEFf,KAAKQ,gBAAgBC,KAAK,CAAEF,IAAAA,EAAKG,SAAUV,KAAKI,mBAChD,IAAKO,EAAkBX,KAAKY,wBAAyB,CACnDZ,KAAKY,uBAAuB,CAAEL,IAAAA,EAAKG,SAAUV,KAAKI,mBAEpD,GAAIJ,KAAKU,WAAaG,WAAab,KAAKU,WAAa,KAAM,CACzDV,KAAKE,qBAAqBF,KAAKI,oBA9HjCJ,KAAKiB,GAAGC,aAAa,KAAMlB,KAAKmB,YAAcC,EAAW,wBACzDpB,KAAKqB,UAAY,sBAsDnBvB,uBAAuBK,GACrBH,KAAKiB,GAAGC,aAAa,KAAMf,GAAYiB,EAAW,wBAUpDtB,cAAcwB,GACZ,GAAIA,IAAgBT,WAAaS,IAAgB,KAAM,CACrDtB,KAAKE,oBAAoBF,KAAKU,WAkB1BZ,qBACN,GAAIE,KAAKI,iBAAkB,CACzBJ,KAAKiB,GAAGM,WAAWC,cAAc,sBAAsBC,UAAUC,IAAI,mBAChE,CACL1B,KAAKiB,GAAGM,WAAWC,cAAc,sBAAsBC,UAAUE,OAAO,gBAwClE7B,oBACRE,KAAKI,iBACHJ,KAAKU,WAAaG,WAAab,KAAKU,WAAa,KAC7CV,KAAKU,SACLV,KAAKC,oBAAsBY,WAAab,KAAKC,oBAAsB,KACnED,KAAKC,kBACL,MAGEH,mBACR8B,EAAsB5B,KAAKiB,IAC3BjB,KAAKK,qBAGGP,uBACR+B,EAAyB7B,KAAKiB,IAGtBnB,SACR,MAAMgC,EAAmB,CACvBC,KAAM,SACNC,gBAAiB,uBAAuBhC,KAAKmB,qBAC7Cc,gBAAiBjC,KAAKI,iBAAiB8B,WACvCC,SAAU,GAGZ,MAAMC,EAAoB,CACxBC,gBAAiBrC,KAAKI,kBAAkB8B,YAG1C,MAAMI,EAAQ,CAAEC,KAAMC,EAAAA,YAAkBC,OAAQC,EAAAA,OAAgBC,MAAOC,EAAAA,OAEvE,OACEC,EAAA,MAAA,CAAKC,MAAM,qBACTD,EAAA,MAAAE,OAAAC,OAAA,CAAKF,MAAM,6BAAgChB,EAAgB,CAAEmB,QAASjD,KAAKM,eAAgB4C,UAAWlD,KAAKc,mBACzG+B,EAAA,OAAA,CAAMM,KAAK,WACXN,EAAA,OAAA,CAAMC,MAAM,kCAAkCf,KAAK,gBAChDqB,EAAiBd,KAGrBtC,KAAKI,kBAAoByC,EAAA,KAAA,CAAIC,MAAM,0BACpCD,EAAA,MAAAE,OAAAC,OAAA,CAAKF,MAAM,6BAA6BO,GAAI,uBAAuBrD,KAAKmB,sBAA0BiB,GAChGS,EAAA,OAAA,CAAMM,KAAK","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"]}