{"version":3,"names":["ShowMore","componentDidRender","this","expanded","getHideableElements","forEach","el","removeAttribute","setAccordionHeight","refAccordionDiv","scrollHeight","collapsedHeight","componentDidLoad","setAttribute","isMultipleOfElements","window","addEventListener","render","accessibilityButtonClass","getFirstFocusableHideableElement","h","Host","key","class","ref","onTransitionEnd","_e","onAccordionDivTransitionEnd","fadeBottom","style","maxHeight","refAccessibilityButton1","type","onClick","event","onAccessibilityButtonClick","onFocus","_event","refAccessibilityButton2","display","refAccordionButton","buttonClass","onAccordionButtonClick","toString","showLessText","showMoreText","bold","name","transform","preventDefault","firstFocusableElement","focus","getBoundingClientRect","top","scrollIntoView","height","includes","setTimeout","accordionTop","accordionBottom","Math","max","getVisibleElements","map","bottom","visibleElementsQuantity","Number","split","elementSelector","Array","from","querySelectorAll","querySelector"],"sources":["src/webcomponents/lk-show-more/lk-show-more.tsx"],"sourcesContent":["import { Component, Prop, h, State, Host } from \"@stencil/core\";\n\n\n@Component({\n  tag: \"lk-show-more\"\n})\n\nexport class ShowMore {\n\n  @Prop({ reflect: true }) showMoreText: string = \"Se mer\";\n  @Prop({ reflect: true }) showLessText: string = \"Se mindre\";\n  @Prop() buttonClass: string = \"button--secondary\";\n  @Prop() fadeBottom: boolean = true;\n  @Prop() collapsedHeight: string = \"10em\";\n  @State() expanded = false;\n  \n  refAccordionDiv: HTMLDivElement;\n  refAccordionButton: HTMLButtonElement;\n  refAccessibilityButton1: HTMLButtonElement;\n  refAccessibilityButton2: HTMLButtonElement;\n\n  componentDidRender() {\n    if (this.expanded) {\n      this.getHideableElements().forEach((el: HTMLElement) => el.removeAttribute(\"hidden\"));\n      this.setAccordionHeight(this.refAccordionDiv.scrollHeight);\n    } else {\n      this.setAccordionHeight(this.collapsedHeight);\n    }\n  }\n\n  componentDidLoad() {\n    if (this.expanded) {\n      this.setAccordionHeight(\"none\");\n    } else {\n      this.getHideableElements().forEach((el: HTMLElement) => el.setAttribute(\"hidden\", \"true\"));\n    }\n    if (this.isMultipleOfElements(this.collapsedHeight)) {\n      window.addEventListener(\"resize\", () => {\n        if (!this.expanded) {\n          this.setAccordionHeight(this.collapsedHeight);\n        }\n      });\n    }\n  }\n\n  render() {\n\n    let accessibilityButtonClass = `${this.expanded && this.isMultipleOfElements(this.collapsedHeight) && this.getFirstFocusableHideableElement()\n      ? \"visually-hidden\" : \"no-display\"}`;\n\n    return (\n      <Host class=\"show-more\">\n        <div\n          ref={el => this.refAccordionDiv = el}\n          class=\"show-more__accordion\"\n          onTransitionEnd={_e => this.onAccordionDivTransitionEnd()}\n        >\n\n          <slot />\n\n          {this.fadeBottom ?\n            <span\n              class=\"show-more__accordion__fade\"\n              style={this.expanded ? { maxHeight: \"0px\" } : null}\n            ></span> : null\n          }\n\n        </div>\n\n        <div class=\"margin-top--base margin-bottom--large align-center\">\n          <button\n            ref={el => this.refAccessibilityButton1 = el}\n            class={accessibilityButtonClass}\n            type=\"button\"\n            onClick={event => { this.onAccessibilityButtonClick(event) }}\n            onFocus={_event => { this.refAccessibilityButton2.style.display = \"none\" }}\n            aria-label=\"Gå til nytt innhold\"\n          />\n\n          <button\n            ref={el => this.refAccordionButton = el}\n            class={`button ${this.buttonClass}`}\n            type=\"button\"\n            onClick={event => { this.onAccordionButtonClick(event) }}\n            aria-expanded={this.expanded.toString()}\n          >\n            <span class=\"button__text\">\n              {this.expanded ? this.showLessText : this.showMoreText}\n            </span>\n\n            <lk-icon\n              class=\"button__icon\"\n              bold\n              aria-hidden=\"true\"\n              name=\"interface-arrows-button-down\"\n              style={this.expanded ? { transform: \"rotate(-180deg)\" } : null}\n            ></lk-icon>\n          </button>\n\n          <button\n            ref={el => this.refAccessibilityButton2 = el}\n            class={accessibilityButtonClass}\n            type=\"button\"\n            onClick={event => { this.onAccessibilityButtonClick(event) }}\n            onFocus={_event => { this.refAccessibilityButton1.style.display = \"none\" }}\n            aria-label=\"Gå til nytt innhold\"\n          />\n        </div>\n      </Host>\n    )\n\n  }\n\n  onAccordionButtonClick(event) {\n    event.preventDefault();\n    this.expanded = !this.expanded;\n  }\n\n  onAccessibilityButtonClick(event) {\n    event.preventDefault();\n    if (this.expanded) {\n      let firstFocusableElement = this.getFirstFocusableHideableElement();\n      if (firstFocusableElement)\n        firstFocusableElement.focus();\n    }\n  }\n\n  onAccordionDivTransitionEnd() {\n    if (this.expanded) {\n      this.refAccordionDiv.style.maxHeight = \"none\";\n    }\n    if (!this.expanded) {\n      this.getHideableElements().forEach((el: HTMLElement) => el.setAttribute(\"hidden\", \"true\"));\n      if (this.refAccordionButton.getBoundingClientRect().top < 0)\n        this.refAccordionButton.scrollIntoView();\n    }\n  }\n\n  isMultipleOfElements(height) {\n    return height.toString().includes(\" \");\n  }\n\n  setAccordionHeight(height) {\n    if (this.refAccordionDiv.style.maxHeight == \"none\")\n      this.refAccordionDiv.style.maxHeight = this.refAccordionDiv.scrollHeight + \"px\";\n\n    setTimeout(() => {\n      if (typeof height === \"number\") {\n        this.refAccordionDiv.style.maxHeight = height + \"px\";\n      } else if (this.isMultipleOfElements(height)) {\n        const accordionTop = this.refAccordionDiv.getBoundingClientRect().top;\n        const accordionBottom = Math.max(...this.getVisibleElements().map(el => el.getBoundingClientRect().bottom));\n        this.refAccordionDiv.style.maxHeight = accordionBottom - accordionTop + \"px\";\n      } else {\n        this.refAccordionDiv.style.maxHeight = height;\n      }\n    }, 1)\n  }\n\n  getVisibleElements(): Array<any> {\n    if (this.isMultipleOfElements(this.collapsedHeight)) {\n      const visibleElementsQuantity = Number(this.collapsedHeight.split(\" \")[0]);\n      const elementSelector = this.collapsedHeight.split(\" \")[1];\n      return Array.from(this.refAccordionDiv.querySelectorAll(`${elementSelector}:nth-child(-n+${visibleElementsQuantity})`));\n    }\n    return [];\n  }\n\n  getHideableElements(): Array<any> {\n    if (this.isMultipleOfElements(this.collapsedHeight)) {\n      const visibleElementsQuantity = Number(this.collapsedHeight.split(\" \")[0]);\n      const elementSelector = this.collapsedHeight.split(\" \")[1];\n      return Array.from(this.refAccordionDiv.querySelectorAll(`${elementSelector}:nth-child(n+${visibleElementsQuantity + 1})`));\n    }\n    return [];\n  }\n\n  getFirstFocusableHideableElement(): HTMLElement {\n    if (this.isMultipleOfElements(this.collapsedHeight)) {\n      const visibleElementsQuantity = Number(this.collapsedHeight.split(\" \")[0]);\n      const elementSelector = this.collapsedHeight.split(\" \")[1];\n      return this.refAccordionDiv.querySelector(\n        `${elementSelector}:nth-child(n+${visibleElementsQuantity + 1}) \n        a[href]:not([tabindex='-1']), \n        button:not([disabled]):not([tabindex='-1']), \n        [tabindex]:not([tabindex='-1'])`\n      );\n    }\n    return null;\n  }\n\n}\n\n"],"mappings":"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","ignoreList":[]}