@ukic/web-components 3.29.0 → 3.30.0

package/dist/core/p-fc4b7d2b.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icAccordionCss","IcAccordionStyle0","accordionIds","EXPANDED_CONTENT_OPENED_CLASS","Accordion","constructor","hostRef","this","accordionId","CONTENT_VISIBILITY_PROPERTY","disabled","expanded","heading","message","size","theme","toggleExpanded","accordionClicked","emit","id","setAccordionAnimation","el","duration","property","delay","window","matchMedia","matches","style","transitionDuration","transitionProperty","transitionDelay","setExpandedContentStyle","ev","expandedContent","propertyName","clientHeight","classList","add","height","hideExpandedContent","setProperty","animateExpandedContent","expandedContentEl","elementHeight","scrollHeight","addEventListener","e","remove","watchDisabledHandler","removeDisabledFalse","handleExpandedWatch","setFocus","_a","accordionBtnHeading","focus","componentWillLoad","disconnectedCallback","removeEventListener","componentDidLoad","render","h","Host","key","class","ref","tabindex","onClick","isSlotUsed","name","variant","innerHTML","chevronIcon","role"],"sources":["src/components/ic-accordion/ic-accordion.css?tag=ic-accordion&encapsulation=shadow","src/components/ic-accordion/ic-accordion.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n  border-bottom: var(--ic-space-1px) solid var(--ic-accordion-divider);\n}\n\n:host .expand-chevron {\n  color: var(--ic-accordion-chevron);\n}\n\n:host(.ic-accordion-disabled) .expand-chevron {\n  color: var(--ic-accordion-chevron-disabled);\n}\n\n.section-button.small {\n  padding: var(--ic-space-xxs) var(--ic-space-xs);\n}\n\n.section-button.large {\n  padding: var(--ic-space-sm) var(--ic-space-xs);\n}\n\n:host(:first-of-type) {\n  border-top: var(--ic-space-1px) solid var(--ic-accordion-divider);\n}\n\n:focus {\n  outline: none;\n}\n\n.section-button {\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding: var(--ic-space-xs);\n  font-weight: var(--ic-font-weight-bold);\n  border: none;\n}\n\n.section-header {\n  --ic-typography-color: var(--ic-accordion-heading-text);\n\n  color: var(--ic-accordion-heading-text);\n  text-align: left;\n  flex: 1 0;\n}\n\n:host(.ic-accordion-disabled) .section-header {\n  --ic-typography-color: var(--ic-accordion-heading-text-disabled);\n\n  color: var(--ic-accordion-heading-text-disabled);\n}\n\nbutton:hover {\n  background-color: var(--ic-accordion-background-hover);\n  cursor: pointer;\n}\n\nbutton:active {\n  background-color: var(--ic-accordion-background-pressed);\n}\n\nbutton:focus {\n  box-shadow: var(--ic-border-focus);\n  border-radius: var(--ic-border-radius);\n  transition: var(--ic-transition-duration-fast);\n}\n\nbutton:disabled {\n  pointer-events: none;\n}\n\n.icon-container {\n  margin: 0 var(--ic-space-xs) 0 0;\n  display: flex;\n  align-items: center;\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n  color: var(--ic-accordion-icon);\n}\n\n:host(.ic-accordion-disabled) .icon-container {\n  color: var(--ic-accordion-icon-disabled);\n}\n\n::slotted(svg) {\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n}\n\n.expand-chevron {\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n  margin-left: calc(var(--ic-space-xl) + var(--ic-space-xs));\n  transform: rotate(90deg);\n  justify-self: end;\n}\n\n.content-expanded-chevron {\n  transform: rotate(-90deg);\n}\n\n.expanded-content {\n  --ic-typography-color: var(--ic-accordion-body-text);\n\n  color: var(--ic-accordion-body-text);\n  height: 0;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  visibility: var(--ic-expanded-content-visibility, hidden);\n}\n\n.expanded-content-inner {\n  padding: var(--ic-space-xs);\n}\n\n.expanded-content-opened {\n  overflow: visible;\n}\n\n@media (forced-colors: active) {\n  button:focus {\n    border: var(--ic-border-hc) !important;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  button:focus {\n    transition: none;\n  }\n}\n","import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Watch,\n  Method,\n} from \"@stencil/core\";\nimport { isSlotUsed, removeDisabledFalse } from \"../../utils/helpers\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\n\nlet accordionIds = 0;\nconst EXPANDED_CONTENT_OPENED_CLASS = \"expanded-content-opened\";\n\n/**\n * @slot heading - Content is placed as the accordion heading.\n * @slot icon - Content is placed to the left of the heading.\n */\n\n@Component({\n  tag: \"ic-accordion\",\n  styleUrl: \"ic-accordion.css\",\n  shadow: true,\n})\nexport class Accordion {\n  private accordionId = `ic-accordion-${accordionIds++}`;\n  private expandedContentEl?: HTMLDivElement;\n  private accordionBtnHeading?: HTMLButtonElement;\n  private CONTENT_VISIBILITY_PROPERTY = \"--ic-expanded-content-visibility\";\n\n  @Element() el: HTMLIcAccordionElement;\n\n  /**\n   * If `true`, the accordion will be disabled.\n   */\n  @Prop() disabled?: boolean = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   * If `true`, the accordion appears expanded.\n   */\n  @Prop({ mutable: true }) expanded?: boolean = false;\n\n  /**\n   * The section header outlining section content.\n   */\n  @Prop() heading?: string = \"\";\n\n  /**\n   * The main body message of the accordion.\n   */\n  @Prop() message?: string = \"\";\n\n  /**\n   * The size of the accordion.\n   */\n  @Prop() size?: IcSizes = \"medium\";\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * @internal Emitted when accordion is clicked.\n   */\n  @Event() accordionClicked: EventEmitter<{ id: string }>;\n\n  // Every time expanded is set via toggleExpanded or accordionGroup, animate to open or close\n  @Watch(\"expanded\")\n  handleExpandedWatch(): void {\n    this.animateExpandedContent();\n  }\n\n  /**\n   * Sets focus on accordion heading.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.accordionBtnHeading?.focus();\n  }\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  disconnectedCallback(): void {\n    const expandedContentEl = this.expandedContentEl;\n    if (expandedContentEl) {\n      expandedContentEl.removeEventListener(\n        \"transitionend\",\n        (e) => this.setExpandedContentStyle(e, expandedContentEl),\n        true\n      );\n      expandedContentEl.removeEventListener(\n        \"transitionend\",\n        (e) => this.hideExpandedContent(e, expandedContentEl),\n        true\n      );\n    }\n  }\n\n  componentDidLoad(): void {\n    // So accordion opens by default if expanded set to true\n    if (this.expanded && this.expandedContentEl) {\n      this.expandedContentEl.style.height = \"auto\";\n      this.expandedContentEl.style.setProperty(\n        this.CONTENT_VISIBILITY_PROPERTY,\n        \"visible\"\n      );\n      this.expandedContentEl.classList.add(EXPANDED_CONTENT_OPENED_CLASS);\n    }\n  }\n\n  private toggleExpanded = (): void => {\n    this.expanded = !this.expanded;\n    this.accordionClicked.emit({ id: this.accordionId });\n  };\n\n  // Set accordion animation\n  private setAccordionAnimation = (\n    el: HTMLElement,\n    duration: string,\n    property: string,\n    delay: string\n  ) => {\n    if (!window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) {\n      el.style.transitionDuration = `${duration}ms`;\n      el.style.transitionProperty = property;\n      el.style.transitionDelay = delay;\n    } else {\n      el.style.transitionDuration = \"0ms\";\n      el.style.transitionProperty = \"none\";\n      el.style.transitionDelay = \"0ms\";\n    }\n  };\n\n  private setExpandedContentStyle = (\n    ev: TransitionEvent,\n    expandedContent: HTMLDivElement\n  ) => {\n    if (ev.propertyName === \"height\" && expandedContent.clientHeight > 0) {\n      expandedContent.classList.add(EXPANDED_CONTENT_OPENED_CLASS);\n      expandedContent.style.height = \"auto\";\n    }\n  };\n\n  private hideExpandedContent = (\n    ev: TransitionEvent,\n    expandedContent: HTMLDivElement\n  ) => {\n    if (ev.propertyName === \"height\" && expandedContent.clientHeight === 0) {\n      expandedContent.style.setProperty(\n        this.CONTENT_VISIBILITY_PROPERTY,\n        \"hidden\"\n      );\n    }\n  };\n\n  private animateExpandedContent = () => {\n    if (this.expandedContentEl) {\n      const expandedContentEl = this.expandedContentEl;\n      const elementHeight = expandedContentEl.scrollHeight;\n      if (elementHeight > 0 && this.expanded) {\n        expandedContentEl.style.setProperty(\n          this.CONTENT_VISIBILITY_PROPERTY,\n          \"visible\"\n        );\n        expandedContentEl.style.height = `${elementHeight}px`;\n        this.setAccordionAnimation(\n          expandedContentEl,\n          \"300\",\n          \"height\",\n          \"ease-out\"\n        );\n\n        expandedContentEl.addEventListener(\n          \"transitionend\",\n          (e: TransitionEvent) => {\n            this.setExpandedContentStyle(e, expandedContentEl);\n          }\n        );\n      } else if (!this.expanded) {\n        const expandedContentEl = this.expandedContentEl;\n        expandedContentEl.style.height = `${expandedContentEl.scrollHeight}px`;\n        if (expandedContentEl.scrollHeight > 0 && !this.expanded) {\n          expandedContentEl.style.height = \"0\";\n          this.setAccordionAnimation(\n            expandedContentEl,\n            \"300\",\n            \"height\",\n            \"ease-in\"\n          );\n          expandedContentEl.classList.remove(EXPANDED_CONTENT_OPENED_CLASS);\n        }\n        expandedContentEl.addEventListener(\"transitionend\", (e) => {\n          this.hideExpandedContent(e, expandedContentEl);\n        });\n      }\n    }\n  };\n\n  render() {\n    const { size, disabled, expanded, theme } = this;\n    return (\n      <Host\n        id={this.accordionId}\n        class={{\n          [\"ic-accordion-disabled\"]: !!disabled,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n        aria-disabled={disabled ? \"true\" : \"false\"}\n      >\n        <button\n          ref={(el) => (this.accordionBtnHeading = el)}\n          id={`${this.accordionId}-button`}\n          disabled={disabled}\n          tabindex={disabled ? -1 : 0}\n          class={{\n            [`${size}`]: true,\n            [\"section-button\"]: true,\n            [\"section-button-open\"]: !!expanded && !disabled,\n          }}\n          aria-expanded={`${expanded}`}\n          aria-controls=\"expanded-content-area\"\n          onClick={this.toggleExpanded}\n        >\n          {isSlotUsed(this.el, \"icon\") && (\n            <div class=\"icon-container\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          <ic-typography variant=\"subtitle-large\" class=\"section-header\">\n            {isSlotUsed(this.el, \"heading\") ? (\n              <slot name=\"heading\" />\n            ) : (\n              this.heading\n            )}\n          </ic-typography>\n          <span\n            class={{\n              [\"expand-chevron\"]: true,\n              [\"content-expanded-chevron\"]: !!expanded && !disabled,\n            }}\n            aria-hidden=\"true\"\n            innerHTML={chevronIcon}\n          />\n        </button>\n        <div\n          class={{\n            [\"expanded-content\"]: true,\n          }}\n          aria-labelledby={`${this.accordionId}-button`}\n          role=\"region\"\n          aria-hidden={`${!expanded}`}\n          id=\"expanded-content-area\"\n          ref={(el) => (this.expandedContentEl = el)}\n        >\n          <div class=\"expanded-content-inner\">\n            {this.message ? (\n              <ic-typography variant=\"body\">{this.message}</ic-typography>\n            ) : (\n              <slot />\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"uKAAA,MAAMA,EAAiB,mjJACvB,MAAAC,EAAeD,ECcf,IAAIE,EAAe,EACnB,MAAMC,EAAgC,0B,MAYzBC,EAAS,MALtB,WAAAC,CAAAC,G,6DAMUC,KAAAC,YAAc,gBAAgBN,MAG9BK,KAAAE,4BAA8B,mCAO9BF,KAAAG,SAAqB,MASJH,KAAAI,SAAqB,MAKtCJ,KAAAK,QAAmB,GAKnBL,KAAAM,QAAmB,GAKnBN,KAAAO,KAAiB,SAKjBP,KAAAQ,MAAsB,UAqDtBR,KAAAS,eAAiB,KACvBT,KAAKI,UAAYJ,KAAKI,SACtBJ,KAAKU,iBAAiBC,KAAK,CAAEC,GAAIZ,KAAKC,aAAc,EAI9CD,KAAAa,sBAAwB,CAC9BC,EACAC,EACAC,EACAC,KAEA,IAAKC,OAAOC,WAAW,oCAAoCC,QAAS,CAClEN,EAAGO,MAAMC,mBAAqB,GAAGP,MACjCD,EAAGO,MAAME,mBAAqBP,EAC9BF,EAAGO,MAAMG,gBAAkBP,C,KACtB,CACLH,EAAGO,MAAMC,mBAAqB,MAC9BR,EAAGO,MAAME,mBAAqB,OAC9BT,EAAGO,MAAMG,gBAAkB,K,GAIvBxB,KAAAyB,wBAA0B,CAChCC,EACAC,KAEA,GAAID,EAAGE,eAAiB,UAAYD,EAAgBE,aAAe,EAAG,CACpEF,EAAgBG,UAAUC,IAAInC,GAC9B+B,EAAgBN,MAAMW,OAAS,M,GAI3BhC,KAAAiC,oBAAsB,CAC5BP,EACAC,KAEA,GAAID,EAAGE,eAAiB,UAAYD,EAAgBE,eAAiB,EAAG,CACtEF,EAAgBN,MAAMa,YACpBlC,KAAKE,4BACL,S,GAKEF,KAAAmC,uBAAyB,KAC/B,GAAInC,KAAKoC,kBAAmB,CAC1B,MAAMA,EAAoBpC,KAAKoC,kBAC/B,MAAMC,EAAgBD,EAAkBE,aACxC,GAAID,EAAgB,GAAKrC,KAAKI,SAAU,CACtCgC,EAAkBf,MAAMa,YACtBlC,KAAKE,4BACL,WAEFkC,EAAkBf,MAAMW,OAAS,GAAGK,MACpCrC,KAAKa,sBACHuB,EACA,MACA,SACA,YAGFA,EAAkBG,iBAChB,iBACCC,IACCxC,KAAKyB,wBAAwBe,EAAGJ,EAAkB,G,MAGjD,IAAKpC,KAAKI,SAAU,CACzB,MAAMgC,EAAoBpC,KAAKoC,kBAC/BA,EAAkBf,MAAMW,OAAS,GAAGI,EAAkBE,iBACtD,GAAIF,EAAkBE,aAAe,IAAMtC,KAAKI,SAAU,CACxDgC,EAAkBf,MAAMW,OAAS,IACjChC,KAAKa,sBACHuB,EACA,MACA,SACA,WAEFA,EAAkBN,UAAUW,OAAO7C,E,CAErCwC,EAAkBG,iBAAiB,iBAAkBC,IACnDxC,KAAKiC,oBAAoBO,EAAGJ,EAAkB,G,IAlKtD,oBAAAM,GACEC,EAAoB3C,KAAKG,SAAUH,KAAKc,G,CAmC1C,mBAAA8B,GACE5C,KAAKmC,wB,CAOP,cAAMU,G,OACJC,EAAA9C,KAAK+C,uBAAmB,MAAAD,SAAA,SAAAA,EAAEE,O,CAG5B,iBAAAC,GACEN,EAAoB3C,KAAKG,SAAUH,KAAKc,G,CAG1C,oBAAAoC,GACE,MAAMd,EAAoBpC,KAAKoC,kBAC/B,GAAIA,EAAmB,CACrBA,EAAkBe,oBAChB,iBACCX,GAAMxC,KAAKyB,wBAAwBe,EAAGJ,IACvC,MAEFA,EAAkBe,oBAChB,iBACCX,GAAMxC,KAAKiC,oBAAoBO,EAAGJ,IACnC,K,EAKN,gBAAAgB,GAEE,GAAIpD,KAAKI,UAAYJ,KAAKoC,kBAAmB,CAC3CpC,KAAKoC,kBAAkBf,MAAMW,OAAS,OACtChC,KAAKoC,kBAAkBf,MAAMa,YAC3BlC,KAAKE,4BACL,WAEFF,KAAKoC,kBAAkBN,UAAUC,IAAInC,E,EA4FzC,MAAAyD,GACE,MAAM9C,KAAEA,EAAIJ,SAAEA,EAAQC,SAAEA,EAAQI,MAAEA,GAAUR,KAC5C,OACEsD,EAACC,EAAI,CAAAC,IAAA,2CACH5C,GAAIZ,KAAKC,YACTwD,MAAO,CACL,CAAC,2BAA4BtD,EAC7B,CAAC,YAAYK,KAAUA,IAAU,WAClC,gBACcL,EAAW,OAAS,SAEnCmD,EAAA,UAAAE,IAAA,2CACEE,IAAM5C,GAAQd,KAAK+C,oBAAsBjC,EACzCF,GAAI,GAAGZ,KAAKC,qBACZE,SAAUA,EACVwD,SAAUxD,GAAY,EAAI,EAC1BsD,MAAO,CACL,CAAC,GAAGlD,KAAS,KACb,CAAC,kBAAmB,KACpB,CAAC,yBAA0BH,IAAaD,GACzC,gBACc,GAAGC,IAAU,gBACd,wBACdwD,QAAS5D,KAAKS,gBAEboD,EAAW7D,KAAKc,GAAI,SACnBwC,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACTH,EAAA,QAAAE,IAAA,2CAAMM,KAAK,UAGfR,EAAA,iBAAAE,IAAA,2CAAeO,QAAQ,iBAAiBN,MAAM,kBAC3CI,EAAW7D,KAAKc,GAAI,WACnBwC,EAAA,QAAMQ,KAAK,YAEX9D,KAAY,SAGhBsD,EAAA,QAAAE,IAAA,2CACEC,MAAO,CACL,CAAC,kBAAmB,KACpB,CAAC,8BAA+BrD,IAAaD,GAC9C,cACW,OACZ6D,UAAWC,KAGfX,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,CAAC,oBAAqB,MACvB,kBACgB,GAAGzD,KAAKC,qBACzBiE,KAAK,SAAQ,cACA,IAAI9D,IACjBQ,GAAG,wBACH8C,IAAM5C,GAAQd,KAAKoC,kBAAoBtB,GAEvCwC,EAAA,OAAAE,IAAA,2CAAKC,MAAM,0BACRzD,KAAKM,QACJgD,EAAA,iBAAeS,QAAQ,QAAQ/D,KAAKM,SAEpCgD,EAAA,e","ignoreList":[]}