@itcenteratunihelsinki/huds-lib 0.8.57 → 0.8.59

package/components/hy-tabs2.js.map

@@ -1 +1 @@
-{"file":"hy-tabs2.js","mappings":"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","names":[],"sources":["./src/components/hy-tabs/hy-tabs.scss?tag=hy-tabs","./src/components/hy-tabs/hy-tabs.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-tabs__container {\n  .hy-tablist-container {\n    border-bottom: 1px solid var(--grayscale-tabs-border);\n    position: relative;\n  }\n\n  .hy-tab-scroll {\n    background-color: rgba(255, 255, 255, 0.8);\n    border: 0;\n    height: 100%;\n    margin: 0;\n    padding: 0;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    z-index: 4;\n\n    &.is-hidden {\n      display: none;\n      visibility: hidden;\n    }\n\n    &.is-disabled {\n      background-color: var(--grayscale-medium);\n\n      &:hover {\n        cursor: none;\n      }\n    }\n\n    &:focus,\n    &:hover {\n      outline: none;\n      cursor: pointer;\n    }\n\n    span {\n      align-items: center;\n      background-color: var(--grayscale-black);\n      border-radius: 100%;\n      display: inline-flex;\n      height: 32px;\n      justify-content: center;\n      width: 32px;\n\n      svg {\n        fill: var(--grayscale-white);\n        height: 16px;\n        width: 16px;\n      }\n    }\n\n    &__left {\n      left: 0;\n      padding-right: 8px;\n\n      svg {\n        transform: translateX(-1px);\n      }\n    }\n\n    &__right {\n      padding-left: 8px;\n      right: 0;\n\n      svg {\n        transform: translateX(1px);\n      }\n    }\n  }\n\n  [role=\"tablist\"] {\n    display: flex;\n    flex-direction: row;\n    margin: 0 0 -0.1em;\n    overflow: scroll;\n    position: relative;\n    scrollbar-width: none;\n    white-space: nowrap;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  [role=\"tablist\"] a {\n    display: flex;\n    max-width: 47.56%;\n    text-decoration: none;\n    flex-shrink: 0;\n\n    &:not(:first-of-type) {\n      margin-left: 6px;\n    }\n\n    @include breakpoint($narrow) {\n      max-width: 35.37%;\n    }\n\n    @include breakpoint($wide) {\n      max-width: 23.13%;\n    }\n\n    @include breakpoint($extrawide) {\n      max-width: 23.03%;\n    }\n  }\n\n  [role=\"tab\"] {\n    align-items: stretch;\n    background-color: transparent;\n    border: 0;\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    margin-bottom: 6px;\n    padding: 0;\n\n    > span {\n      @include font-size(14px, 14px);\n      @include font-weight($bold);\n      align-items: center;\n      background-color: var(--grayscale-background-box);\n      border: 0;\n      color: var(--link-blue);\n      display: flex;\n      font-family: var(--main-font-family);\n      hyphens: auto;\n      letter-spacing: -0.5px;\n      padding: 8px 8px 7px;\n      pointer-events: none;\n      position: relative;\n      text-align: left;\n      white-space: normal;\n      word-break: break-word;\n\n      @include breakpoint($narrow) {\n        @include font-size(16px, 18px);\n        padding: 16px 12px 10px;\n      }\n\n      @include breakpoint($extrawide) {\n        @include font-size(18px, 20px);\n        letter-spacing: -0.6px;\n        padding: 16px 16px 14px;\n      }\n\n      @supports (overflow-wrap: anywhere) {\n        overflow-wrap: anywhere;\n      }\n\n      overflow-wrap: break-word;\n\n      @supports (overflow-wrap: anywhere) {\n        overflow-wrap: anywhere;\n      }\n\n      overflow-wrap: break-word;\n    }\n  }\n\n  // No sidebar\n  [role=\"tab\"].large {\n    @include breakpoint($extrawide) {\n      margin: 0 12px 0 0;\n    }\n  }\n\n  [role=\"tab\"][aria-selected=\"true\"] {\n    border-bottom-width: 0;\n    border: 1px solid var(--grayscale-dark);\n    margin-bottom: 0;\n    z-index: 3;\n\n    > span {\n      background-color: var(--grayscale-white);\n      color: var(--grayscale-black);\n      padding-bottom: 13px;\n\n      @include breakpoint($narrow) {\n        padding-bottom: 16px;\n      }\n\n      @include breakpoint($extrawide) {\n        padding-bottom: 20px;\n      }\n\n      &:before {\n        background-color: var(--grayscale-white);\n        bottom: 0;\n        content: \"\";\n        height: 4px;\n        left: 0;\n        position: absolute;\n        right: 0;\n        transform: translateY(50%);\n      }\n\n      &:after {\n        background-color: var(--grayscale-black);\n        bottom: 0;\n        content: \"\";\n        height: 4px;\n        left: 8px;\n        position: absolute;\n        right: 8px;\n      }\n    }\n  }\n\n  [role=\"tab\"]:hover {\n    border-radius: 0;\n    color: inherit;\n    cursor: pointer;\n    text-decoration: none;\n\n    span {\n      background-color: var(--hover-gray);\n      color: var(--brand-main-active);\n    }\n  }\n\n  [role=\"tabpanel\"] {\n    border: 1px solid var(--grayscale-dark);\n    padding: 28px 12px;\n    position: relative;\n    z-index: 2;\n\n    @include breakpoint($narrow) {\n      padding: 38px 15px;\n    }\n\n    @include breakpoint($wide) {\n      padding: 40px 20px;\n    }\n  }\n\n  [role=\"tabpanel\"]:focus {\n    outline: 1px solid var(--brand-main-active);\n  }\n}\n","import {Component, ComponentInterface, h, Prop, State, Listen, Element} from \"@stencil/core\";\n// For easy reference\nlet keys = {\n  end: 35,\n  home: 36,\n  left: 37,\n  up: 38,\n  right: 39,\n  down: 40,\n  delete: 46,\n};\n\n// Add or substract depending on key pressed\nlet direction = {\n  37: -1,\n  38: -1,\n  39: 1,\n  40: 1,\n};\nlet checkTimeout;\nlet focusTimeout;\nlet scrollTimeout;\n\n@Component({\n  tag: \"hy-tabs\",\n  styleUrl: \"hy-tabs.scss\",\n  shadow: false,\n})\nexport class HyTabs implements ComponentInterface {\n  @Prop() tabId?: string;\n  @Prop() tabListLabel: string = \"\";\n  @State() focusTimeoutCleared: boolean = true;\n  @State() tabButtonTitles: object[];\n  @State() tabPanelsState: NodeListOf<Element>[];\n  @State() tabButtons: NodeListOf<Element>[];\n  @State() tabList: NodeListOf<Element>[];\n  @Element() el: HTMLElement;\n  @Prop() headerstyle: string = \"common\";\n\n  componentWillLoad() {\n    const tabItems = this.el.querySelectorAll(\"hy-tabs-item\");\n    if (tabItems) {\n      this.tabButtonTitles = Array.from(tabItems).map((panel) => {\n        return {\n          title: panel.getAttribute(\"tab-title\"),\n          id: panel.getAttribute(\"tab-title\").toLowerCase().replace(/\\W/g, \"-\"),\n        };\n      });\n    }\n  }\n\n  componentDidLoad() {\n    let hyMainDiv = this.el.closest(\".hy-main\");\n    if (hyMainDiv) {\n      if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n        this.headerstyle = \"large\";\n      }\n    }\n\n    const tabContainer = this.el.querySelector(\".hy-tabs__container\") as any;\n\n    if (tabContainer) {\n      this.generateArrays(tabContainer);\n\n      const leftButton = this.el.querySelectorAll(\".hy-tab-scroll__left\")[0];\n      const rightButton = this.el.querySelectorAll(\".hy-tab-scroll__right\")[0];\n      const tabList = this.tabList as any;\n\n      this.checkScrollHidden(tabList, leftButton, rightButton);\n\n      tabList.addEventListener(\n        \"scroll\",\n        () => {\n          scrollTimeout = setTimeout(() => {\n            window.clearTimeout(scrollTimeout);\n            this.checkScrollHidden(tabList, leftButton, rightButton);\n          }, 250);\n        },\n        false\n      );\n\n      if (tabList.offSetWidth <= document.body.scrollWidth) {\n        leftButton.classList.add(\"is-hidden\");\n        rightButton.classList.add(\"is-hidden\");\n      }\n\n      const oneTabWidth = 250;\n      rightButton.addEventListener(\"click\", (e) => {\n        e.preventDefault();\n        rightButton.classList.add(\"is-disabled\");\n        tabList.scrollBy({\n          top: 0,\n          left: +oneTabWidth,\n          behavior: \"smooth\",\n        });\n        checkTimeout = window.setTimeout(() => {\n          window.clearTimeout(checkTimeout);\n          this.checkScrollHidden(tabList, leftButton, rightButton);\n          rightButton.classList.remove(\"is-disabled\");\n        }, 250);\n      });\n\n      leftButton.addEventListener(\"click\", (e) => {\n        e.preventDefault();\n        leftButton.classList.add(\"is-disabled\");\n        tabList.scrollBy({\n          top: 0,\n          left: -oneTabWidth,\n          behavior: \"smooth\",\n        });\n        checkTimeout = window.setTimeout(() => {\n          window.clearTimeout(checkTimeout);\n          this.checkScrollHidden(tabList, leftButton, rightButton);\n          leftButton.classList.remove(\"is-disabled\");\n        }, 250);\n      });\n    }\n  }\n\n  generateArrays(tc) {\n    this.tabList = tc.querySelectorAll('[role=\"tablist\"]')[0] as any;\n    this.tabButtons = tc.querySelectorAll('[role=\"tab\"]') as any;\n    this.tabPanelsState = [tc.querySelectorAll('[role=\"tabpanel\"]')] as any;\n\n    if (this.tabButtons.length > 0) {\n      this.addListeners(this.tabButtons, 1);\n      this.activateTab(this.tabButtons[0], true);\n    }\n  }\n\n  addListeners(tabs, index) {\n    if (tabs.length > 1) {\n      for (let i = 0; i < tabs.length; ++i) {\n        tabs[index].addEventListener(\"click\", this.clickEventListener);\n        tabs[index].addEventListener(\"keydown\", this.keydownEventListener);\n        //tabs[index].addEventListener('keyup', this.keyupEventListener);\n        tabs[index].index = index;\n      }\n    }\n  }\n\n  checkScrollHidden(tablist, leftButton, rightButton) {\n    if (tablist.scrollLeft === 0) {\n      leftButton.classList.add(\"is-hidden\");\n    } else {\n      leftButton.classList.remove(\"is-hidden\");\n    }\n    if (tablist.scrollLeft + tablist.clientWidth >= tablist.scrollWidth - 1) {\n      rightButton.classList.add(\"is-hidden\");\n    } else {\n      rightButton.classList.remove(\"is-hidden\");\n    }\n  }\n\n  // When a tab is clicked, activateTab is fired to activate it\n  @Listen(\"click\")\n  clickEventListener(event) {\n    if (event) {\n      const target = event.target;\n      const tabs = this.tabButtonTitles;\n      if (tabs) {\n        tabs.forEach((tab) => {\n          const id = Object.values(tab)[1];\n          if (id === target.id) {\n            this.activateTab(target, true);\n          }\n        });\n        event.stopPropagation();\n        event.stopImmediatePropagation();\n      }\n    }\n  }\n\n  @Listen(\"keydown\")\n  keydownEventListener(event) {\n    const key = event.keyCode;\n    const tabs = this.tabButtonTitles as any;\n    switch (key) {\n      case keys.end:\n        event.preventDefault();\n        // Activate last tab\n        this.activateTab(tabs[tabs.length - 1], true);\n        break;\n      case keys.home:\n        event.preventDefault();\n        // Activate first tab\n        this.activateTab(tabs[0], true);\n        break;\n\n      // Up and down are in keydown\n      // because we need to prevent page scroll >:)\n      case keys.up:\n      case keys.down:\n        if (this.focusTimeoutCleared) {\n          this.determineOrientation(event);\n        }\n        break;\n    }\n  }\n\n  @Listen(\"keydown\")\n  keyupEventListener(event) {\n    const key = event.keyCode;\n\n    switch (key) {\n      case keys.left:\n      case keys.right:\n        if (event.target.role === \"tab\") {\n          event.preventDefault();\n          if (this.focusTimeoutCleared) {\n            this.determineOrientation(event);\n          }\n        }\n        break;\n    }\n    event.stopPropagation();\n    event.stopImmediatePropagation();\n  }\n\n  determineOrientation(event) {\n    const leftButton = this.el.querySelectorAll(\".hy-tab-scroll__left\")[0];\n    const rightButton = this.el.querySelectorAll(\".hy-tab-scroll__right\")[0];\n    const tabList = this.tabList as any;\n\n    this.checkScrollHidden(tabList, leftButton, rightButton);\n    const key = event.keyCode;\n    const vertical = tabList.getAttribute(\"aria-orientation\") == \"vertical\";\n    let proceed = false;\n    if (vertical) {\n      if (key === keys.up || key === keys.down) {\n        event.preventDefault();\n        proceed = true;\n      }\n    } else {\n      if (key === keys.left || key === keys.right) {\n        proceed = true;\n      }\n    }\n\n    if (proceed) {\n      this.switchTabOnArrowPress(event);\n    }\n  }\n\n  switchTabOnArrowPress(event) {\n    const pressed = event.keyCode;\n\n    if (direction[pressed]) {\n      const target = event.target;\n      const tabs = this.tabButtons as any;\n\n      for (let i = 0; i < tabs.length; i++) {\n        if (tabs[i].id === target.id) {\n          if (i > 0) {\n            if (direction[pressed] === -1) {\n              tabs[i - 1].focus();\n              this.focusEventHandler(tabs[i - 1]);\n              break;\n            }\n          }\n          if (i < tabs.length - 1) {\n            if (direction[pressed] === 1) {\n              tabs[i + 1].focus();\n              this.focusEventHandler(tabs[i + 1]);\n              break;\n            }\n          }\n        }\n      }\n    }\n  }\n\n  // Activates any given tab panel\n  activateTab(tab, setFocus) {\n    setFocus = setFocus || true;\n    // Deactivate all other tabs\n    this.deactivateTabs(this.tabButtons);\n    // Remove tabindex attribute\n    tab.removeAttribute(\"tabindex\");\n    tab.setAttribute(\"aria-selected\", \"true\");\n    const controls = tab.getAttribute(\"aria-controls\");\n    this.el.querySelector(`#${controls}`).removeAttribute(\"hidden\");\n    if (setFocus) {\n      tab.focus();\n    }\n  }\n\n  // Deactivate all tabs and tab panels\n  deactivateTabs(tabs) {\n    for (let t = 0; t < tabs.length; t++) {\n      tabs[t].setAttribute(\"tabindex\", \"-1\");\n      tabs[t].setAttribute(\"aria-selected\", \"false\");\n      tabs[t].removeEventListener(\"focus\", this.focusEventHandler);\n    }\n    const panels = this.tabPanelsState[0];\n    for (let p = 0; p < panels.length; p++) {\n      panels[p].setAttribute(\"hidden\", \"hidden\");\n    }\n  }\n\n  @Listen(\"focus\")\n  focusEventHandler(tab) {\n    const target = tab;\n    this.focusTimeoutCleared = false;\n    focusTimeout = window.setTimeout(() => {\n      window.clearTimeout(focusTimeout);\n      this.focusTimeoutCleared = true;\n      const focused = document.activeElement;\n      if (target === focused) {\n        this.activateTab(target, false);\n      }\n    }, 250);\n  }\n\n  render() {\n    const classComponentAttributes = [\"hy-tabs__container\", `hy-tabs__container__${this.headerstyle}`].join(\" \");\n    const id = this.tabId.toLowerCase().replace(/\\W/g, \"-\");\n\n    if (window.location.hash) {\n      const tabHash = window.location.hash.substring(1);\n      const isUrlHashed = this.tabButtonTitles.some((tab) => tab[\"id\"] === tabHash);\n\n      if (isUrlHashed) {\n        const hashElement = document.getElementById(tabHash);\n\n        if (hashElement) {\n          this.activateTab(hashElement, true);\n          const hashElementRect = hashElement.getBoundingClientRect();\n          window.scrollTo({top: window.scrollY + hashElementRect.top - 200, behavior: \"smooth\"});\n        }\n      }\n    }\n\n    return [\n      <hy-box pt=\"1.25, 1.25, 1.5, 2.5\" />,\n      <div id={id} class={classComponentAttributes}>\n        <div class=\"hy-tablist-container\">\n          <button tabindex=\"-1\" class=\"hy-tab-scroll hy-tab-scroll__left is-hidden\" aria-hidden=\"true\">\n            <span>\n              <hy-icon icon={\"hy-icon-caret-left\"} size={16} />\n            </span>\n          </button>\n          <div role=\"tablist\" aria-label={this.tabListLabel}>\n            {this.tabButtonTitles &&\n              this.tabButtonTitles.map((item) => {\n                const title = Object.values(item)[0];\n                const id = title.toLowerCase().replace(/\\W/g, \"-\");\n\n                const titleAsId = title.toLowerCase().replace(/\\W/g, \"-\");\n                const tabItemHref = \"#\" + titleAsId;\n\n                return (\n                  <a href={tabItemHref} tabindex=\"-1\">\n                    <button\n                      aria-selected=\"false\"\n                      aria-controls={`${id}-tab`}\n                      class={this.headerstyle}\n                      role=\"tab\"\n                      id={id}\n                    >\n                      <span>{title}</span>\n                    </button>\n                  </a>\n                );\n              })}\n          </div>\n          <button tabindex=\"-1\" class=\"hy-tab-scroll hy-tab-scroll__right\" aria-hidden=\"true\">\n            <span>\n              <hy-icon icon={\"hy-icon-caret-right\"} size={16} />\n            </span>\n          </button>\n        </div>\n        <slot></slot>\n      </div>,\n      <hy-box mb=\"1.75, 1.75, 2, 2.5\" />,\n    ];\n  }\n}\n"],"version":3}
+{"file":"hy-tabs2.js","mappings":"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","names":[],"sources":["./src/components/hy-tabs/hy-tabs.scss?tag=hy-tabs","./src/components/hy-tabs/hy-tabs.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-tabs__container {\n  .hy-tablist-container {\n    border-bottom: 1px solid var(--grayscale-tabs-border);\n    position: relative;\n  }\n\n  .hy-tab-scroll {\n    background-color: rgba(255, 255, 255, 0.8);\n    border: 0;\n    height: 100%;\n    margin: 0;\n    padding: 0;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    z-index: 4;\n\n    &.is-hidden {\n      display: none;\n      visibility: hidden;\n    }\n\n    &.is-disabled {\n      background-color: var(--grayscale-medium);\n\n      &:hover {\n        cursor: none;\n      }\n    }\n\n    &:focus,\n    &:hover {\n      outline: none;\n      cursor: pointer;\n    }\n\n    span {\n      align-items: center;\n      background-color: var(--grayscale-black);\n      border-radius: 100%;\n      display: inline-flex;\n      height: 32px;\n      justify-content: center;\n      width: 32px;\n\n      svg {\n        fill: var(--grayscale-white);\n        height: 16px;\n        width: 16px;\n      }\n    }\n\n    &__left {\n      left: 0;\n      padding-right: 8px;\n\n      svg {\n        transform: translateX(-1px);\n      }\n    }\n\n    &__right {\n      padding-left: 8px;\n      right: 0;\n\n      svg {\n        transform: translateX(1px);\n      }\n    }\n  }\n\n  [role=\"tablist\"] {\n    display: flex;\n    flex-direction: row;\n    margin: 0 0 -0.1em;\n    overflow: scroll;\n    position: relative;\n    scrollbar-width: none;\n    white-space: nowrap;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  [role=\"tablist\"] a {\n    display: flex;\n    max-width: 47.56%;\n    text-decoration: none;\n    flex-shrink: 0;\n\n    &:not(:first-of-type) {\n      margin-left: 6px;\n    }\n\n    @include breakpoint($narrow) {\n      max-width: 35.37%;\n    }\n\n    @include breakpoint($wide) {\n      max-width: 23.13%;\n    }\n\n    @include breakpoint($extrawide) {\n      max-width: 23.03%;\n    }\n  }\n\n  [role=\"tab\"] {\n    align-items: stretch;\n    background-color: transparent;\n    border: 0;\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    margin-bottom: 6px;\n    padding: 0;\n\n    > span {\n      @include font-size(14px, 14px);\n      @include font-weight($bold);\n      align-items: center;\n      background-color: var(--grayscale-background-box);\n      border: 0;\n      color: var(--link-blue);\n      display: flex;\n      font-family: var(--main-font-family);\n      hyphens: auto;\n      letter-spacing: -0.5px;\n      padding: 8px 8px 7px;\n      pointer-events: none;\n      position: relative;\n      text-align: left;\n      white-space: normal;\n      word-break: break-word;\n\n      @include breakpoint($narrow) {\n        @include font-size(16px, 18px);\n        padding: 16px 12px 10px;\n      }\n\n      @include breakpoint($extrawide) {\n        @include font-size(18px, 20px);\n        letter-spacing: -0.6px;\n        padding: 16px 16px 14px;\n      }\n\n      @supports (overflow-wrap: anywhere) {\n        overflow-wrap: anywhere;\n      }\n\n      overflow-wrap: break-word;\n\n      @supports (overflow-wrap: anywhere) {\n        overflow-wrap: anywhere;\n      }\n\n      overflow-wrap: break-word;\n    }\n  }\n\n  // No sidebar\n  [role=\"tab\"].large {\n    @include breakpoint($extrawide) {\n      margin: 0 12px 0 0;\n    }\n  }\n\n  [role=\"tab\"][aria-selected=\"true\"] {\n    border-bottom-width: 0;\n    border: 1px solid var(--grayscale-dark);\n    margin-bottom: 0;\n    z-index: 3;\n\n    > span {\n      background-color: var(--grayscale-white);\n      color: var(--grayscale-black);\n      padding-bottom: 13px;\n\n      @include breakpoint($narrow) {\n        padding-bottom: 16px;\n      }\n\n      @include breakpoint($extrawide) {\n        padding-bottom: 20px;\n      }\n\n      &:before {\n        background-color: var(--grayscale-white);\n        bottom: 0;\n        content: \"\";\n        height: 4px;\n        left: 0;\n        position: absolute;\n        right: 0;\n        transform: translateY(50%);\n      }\n\n      &:after {\n        background-color: var(--grayscale-black);\n        bottom: 0;\n        content: \"\";\n        height: 4px;\n        left: 8px;\n        position: absolute;\n        right: 8px;\n      }\n    }\n  }\n\n  [role=\"tab\"]:hover {\n    border-radius: 0;\n    color: inherit;\n    cursor: pointer;\n    text-decoration: none;\n\n    span {\n      background-color: var(--hover-gray);\n      color: var(--brand-main-active);\n    }\n  }\n\n  [role=\"tabpanel\"] {\n    border: 1px solid var(--grayscale-dark);\n    padding: 28px 12px;\n    position: relative;\n    z-index: 2;\n\n    @include breakpoint($narrow) {\n      padding: 38px 15px;\n    }\n\n    @include breakpoint($wide) {\n      padding: 40px 20px;\n    }\n  }\n\n  [role=\"tabpanel\"]:focus {\n    outline: 1px solid var(--brand-main-active);\n  }\n}\n","import {Component, ComponentInterface, h, Prop, State, Listen, Element} from \"@stencil/core\";\n// For easy reference\nlet keys = {\n  end: 35,\n  home: 36,\n  left: 37,\n  up: 38,\n  right: 39,\n  down: 40,\n  delete: 46,\n};\n\n// Add or substract depending on key pressed\nlet direction = {\n  37: -1,\n  38: -1,\n  39: 1,\n  40: 1,\n};\nlet checkTimeout;\nlet focusTimeout;\nlet scrollTimeout;\n\n@Component({\n  tag: \"hy-tabs\",\n  styleUrl: \"hy-tabs.scss\",\n  shadow: false,\n})\nexport class HyTabs implements ComponentInterface {\n  @Prop() tabId?: string;\n  @Prop() tabListLabel: string = \"\";\n  @State() focusTimeoutCleared: boolean = true;\n  @State() tabButtonTitles: object[];\n  @State() tabPanelsState: NodeListOf<Element>[];\n  @State() tabButtons: NodeListOf<Element>[];\n  @State() tabList: NodeListOf<Element>[];\n  @Element() el: HTMLElement;\n  @Prop() headerstyle: string = \"common\";\n\n  componentWillLoad() {\n    const tabItems = this.el.querySelectorAll(\"hy-tabs-item\");\n    if (tabItems) {\n      this.tabButtonTitles = Array.from(tabItems).map((panel) => {\n        return {\n          title: panel.getAttribute(\"tab-title\"),\n          id: panel.getAttribute(\"tab-title\").toLowerCase().replace(/\\W/g, \"-\"),\n        };\n      });\n    }\n  }\n\n  componentDidLoad() {\n    let hyMainDiv = this.el.closest(\".hy-main\");\n    if (hyMainDiv) {\n      if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n        this.headerstyle = \"large\";\n      }\n    }\n\n    const tabContainer = this.el.querySelector(\".hy-tabs__container\") as any;\n\n    if (tabContainer) {\n      this.generateArrays(tabContainer);\n\n      const leftButton = this.el.querySelectorAll(\".hy-tab-scroll__left\")[0];\n      const rightButton = this.el.querySelectorAll(\".hy-tab-scroll__right\")[0];\n      const tabList = this.tabList as any;\n\n      this.checkScrollHidden(tabList, leftButton, rightButton);\n\n      tabList.addEventListener(\n        \"scroll\",\n        () => {\n          scrollTimeout = setTimeout(() => {\n            window.clearTimeout(scrollTimeout);\n            this.checkScrollHidden(tabList, leftButton, rightButton);\n          }, 250);\n        },\n        false\n      );\n\n      if (tabList.offSetWidth <= document.body.scrollWidth) {\n        leftButton.classList.add(\"is-hidden\");\n        rightButton.classList.add(\"is-hidden\");\n      }\n\n      const oneTabWidth = 250;\n      rightButton.addEventListener(\"click\", (e) => {\n        e.preventDefault();\n        rightButton.classList.add(\"is-disabled\");\n        tabList.scrollBy({\n          top: 0,\n          left: +oneTabWidth,\n          behavior: \"smooth\",\n        });\n        checkTimeout = window.setTimeout(() => {\n          window.clearTimeout(checkTimeout);\n          this.checkScrollHidden(tabList, leftButton, rightButton);\n          rightButton.classList.remove(\"is-disabled\");\n        }, 250);\n      });\n\n      leftButton.addEventListener(\"click\", (e) => {\n        e.preventDefault();\n        leftButton.classList.add(\"is-disabled\");\n        tabList.scrollBy({\n          top: 0,\n          left: -oneTabWidth,\n          behavior: \"smooth\",\n        });\n        checkTimeout = window.setTimeout(() => {\n          window.clearTimeout(checkTimeout);\n          this.checkScrollHidden(tabList, leftButton, rightButton);\n          leftButton.classList.remove(\"is-disabled\");\n        }, 250);\n      });\n    }\n  }\n\n  generateArrays(tc) {\n    this.tabList = tc.querySelectorAll('[role=\"tablist\"]')[0] as any;\n    this.tabButtons = tc.querySelectorAll('[role=\"tab\"]') as any;\n    this.tabPanelsState = [tc.querySelectorAll('[role=\"tabpanel\"]')] as any;\n\n    if (this.tabButtons.length > 0) {\n      this.addListeners(this.tabButtons, 1);\n      this.activateTab(this.tabButtons[0], true);\n    }\n  }\n\n  addListeners(tabs, index) {\n    if (tabs.length > 1) {\n      for (let i = 0; i < tabs.length; ++i) {\n        tabs[index].addEventListener(\"click\", this.clickEventListener);\n        tabs[index].addEventListener(\"keydown\", this.keydownEventListener);\n        //tabs[index].addEventListener('keyup', this.keyupEventListener);\n        tabs[index].index = index;\n      }\n    }\n  }\n\n  checkScrollHidden(tablist, leftButton, rightButton) {\n    if (tablist.scrollLeft === 0) {\n      leftButton.classList.add(\"is-hidden\");\n    } else {\n      leftButton.classList.remove(\"is-hidden\");\n    }\n    if (tablist.scrollLeft + tablist.clientWidth >= tablist.scrollWidth - 1) {\n      rightButton.classList.add(\"is-hidden\");\n    } else {\n      rightButton.classList.remove(\"is-hidden\");\n    }\n  }\n\n  // When a tab is clicked, activateTab is fired to activate it\n  @Listen(\"click\")\n  clickEventListener(event) {\n    if (event) {\n      const target = event.target;\n      const tabs = this.tabButtonTitles;\n      if (tabs) {\n        tabs.forEach((tab) => {\n          const id = Object.values(tab)[1];\n          if (id === target.id) {\n            this.activateTab(target, true);\n          }\n        });\n        event.stopPropagation();\n        event.stopImmediatePropagation();\n      }\n    }\n  }\n\n  @Listen(\"keydown\")\n  keydownEventListener(event) {\n    const key = event.keyCode;\n    const tabs = this.tabButtonTitles as any;\n    switch (key) {\n      case keys.end:\n        event.preventDefault();\n        // Activate last tab\n        this.activateTab(tabs[tabs.length - 1], true);\n        break;\n      case keys.home:\n        event.preventDefault();\n        // Activate first tab\n        this.activateTab(tabs[0], true);\n        break;\n\n      // Up and down are in keydown\n      // because we need to prevent page scroll >:)\n      case keys.up:\n      case keys.down:\n        if (this.focusTimeoutCleared) {\n          this.determineOrientation(event);\n        }\n        break;\n    }\n  }\n\n  @Listen(\"keydown\")\n  keyupEventListener(event) {\n    const key = event.keyCode;\n\n    switch (key) {\n      case keys.left:\n      case keys.right:\n        if (event.target.role === \"tab\") {\n          event.preventDefault();\n          if (this.focusTimeoutCleared) {\n            this.determineOrientation(event);\n          }\n        }\n        break;\n    }\n    event.stopPropagation();\n    event.stopImmediatePropagation();\n  }\n\n  determineOrientation(event) {\n    const leftButton = this.el.querySelectorAll(\".hy-tab-scroll__left\")[0];\n    const rightButton = this.el.querySelectorAll(\".hy-tab-scroll__right\")[0];\n    const tabList = this.tabList as any;\n\n    this.checkScrollHidden(tabList, leftButton, rightButton);\n    const key = event.keyCode;\n    const vertical = tabList.getAttribute(\"aria-orientation\") == \"vertical\";\n    let proceed = false;\n    if (vertical) {\n      if (key === keys.up || key === keys.down) {\n        event.preventDefault();\n        proceed = true;\n      }\n    } else {\n      if (key === keys.left || key === keys.right) {\n        proceed = true;\n      }\n    }\n\n    if (proceed) {\n      this.switchTabOnArrowPress(event);\n    }\n  }\n\n  switchTabOnArrowPress(event) {\n    const pressed = event.keyCode;\n\n    if (direction[pressed]) {\n      const target = event.target;\n      const tabs = this.tabButtons as any;\n\n      for (let i = 0; i < tabs.length; i++) {\n        if (tabs[i].id === target.id) {\n          if (i > 0) {\n            if (direction[pressed] === -1) {\n              tabs[i - 1].focus();\n              this.focusEventHandler(tabs[i - 1]);\n              break;\n            }\n          }\n          if (i < tabs.length - 1) {\n            if (direction[pressed] === 1) {\n              tabs[i + 1].focus();\n              this.focusEventHandler(tabs[i + 1]);\n              break;\n            }\n          }\n        }\n      }\n    }\n  }\n\n  // Activates any given tab panel\n  activateTab(tab, setFocus) {\n    setFocus = setFocus || true;\n    // Deactivate all other tabs\n    this.deactivateTabs(this.tabButtons);\n    // Remove tabindex attribute\n    tab.removeAttribute(\"tabindex\");\n    tab.setAttribute(\"aria-selected\", \"true\");\n    const controls = tab.getAttribute(\"aria-controls\");\n    this.el.querySelector(`#${controls}`).removeAttribute(\"hidden\");\n    if (setFocus) {\n      tab.focus();\n    }\n  }\n\n  // Deactivate all tabs and tab panels\n  deactivateTabs(tabs) {\n    for (let t = 0; t < tabs.length; t++) {\n      tabs[t].setAttribute(\"tabindex\", \"-1\");\n      tabs[t].setAttribute(\"aria-selected\", \"false\");\n      tabs[t].removeEventListener(\"focus\", this.focusEventHandler);\n    }\n    const panels = this.tabPanelsState[0];\n    for (let p = 0; p < panels.length; p++) {\n      panels[p].setAttribute(\"hidden\", \"hidden\");\n    }\n  }\n\n  @Listen(\"focus\")\n  focusEventHandler(tab) {\n    const target = tab;\n    this.focusTimeoutCleared = false;\n    focusTimeout = window.setTimeout(() => {\n      window.clearTimeout(focusTimeout);\n      this.focusTimeoutCleared = true;\n      const focused = document.activeElement;\n      if (target === focused) {\n        this.activateTab(target, false);\n      }\n    }, 250);\n  }\n\n  render() {\n    const classComponentAttributes = [\"hy-tabs__container\", `hy-tabs__container__${this.headerstyle}`].join(\" \");\n    const id = this.tabId.toLowerCase().replace(/\\W/g, \"-\");\n\n    if (window.location.hash) {\n      const tabHash = window.location.hash.substring(1);\n      const isUrlHashed = this.tabButtonTitles.some((tab) => tab[\"id\"] === tabHash);\n\n      if (isUrlHashed) {\n        const hashElement = document.getElementById(tabHash);\n\n        if (hashElement) {\n          this.activateTab(hashElement, true);\n          const hashElementRect = hashElement.getBoundingClientRect();\n          window.scrollTo({top: window.scrollY + hashElementRect.top - 200, behavior: \"smooth\"});\n        }\n      }\n    }\n\n    return [\n      <hy-box pt=\"1.25, 1.25, 1.5, 2.5\" />,\n      <div id={id} class={classComponentAttributes}>\n        <div class=\"hy-tablist-container\">\n          <button tabindex=\"-1\" class=\"hy-tab-scroll hy-tab-scroll__left is-hidden\" aria-hidden=\"true\">\n            <span>\n              <hy-icon icon={\"hy-icon-caret-left\"} size={16} />\n            </span>\n          </button>\n          <div role=\"tablist\" aria-label={this.tabListLabel}>\n            {this.tabButtonTitles &&\n              this.tabButtonTitles.map((item) => {\n                const title = Object.values(item)[0];\n                const id = title.toLowerCase().replace(/\\W/g, \"-\");\n\n                const titleAsId = title.toLowerCase().replace(/\\W/g, \"-\");\n                const tabItemHref = \"#\" + titleAsId;\n\n                return (\n                  <a href={tabItemHref} tabindex=\"-1\">\n                    <button\n                      aria-selected=\"false\"\n                      aria-controls={`${id}-tab`}\n                      class={this.headerstyle}\n                      role=\"tab\"\n                      id={id}\n                    >\n                      <span>{title}</span>\n                    </button>\n                  </a>\n                );\n              })}\n          </div>\n          <button tabindex=\"-1\" class=\"hy-tab-scroll hy-tab-scroll__right\" aria-hidden=\"true\">\n            <span>\n              <hy-icon icon={\"hy-icon-caret-right\"} size={16} />\n            </span>\n          </button>\n        </div>\n        <slot></slot>\n      </div>,\n      <hy-box mb=\"1.75, 1.75, 2, 2.5\" />,\n    ];\n  }\n}\n"],"version":3}

package/components/hy-tiny-text.js.map

@@ -1 +1 @@
-{"file":"hy-tiny-text.js","mappings":";;AAAA,MAAM,WAAW,GAAG,0zCAA0zC;;MCOj0C,QAAQ;;;;;;EACnB,MAAM;IACJ,MAAM,eAAe,GAAG,CAAC,cAAc,CAAC,CAAC;IACzC,QACE,WAAK,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,IACnC,eAAa,CACT,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/tiny-text/tiny-text.scss?tag=hy-tiny-text&encapsulation=shadow","./src/components/tiny-text/tiny-text.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-tiny-text {\n  color: var(--grayscale-dark);\n  font-family: var(--main-font-family);\n  font-size: 12px;\n  letter-spacing: -0.07px;\n  line-height: 16px;\n}\n","import {Component, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-tiny-text\",\n  styleUrl: \"tiny-text.scss\",\n  shadow: true,\n})\nexport class TinyText {\n  render() {\n    const classAttributes = [\"hy-tiny-text\"];\n    return (\n      <div class={classAttributes.join(\" \")}>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"hy-tiny-text.js","mappings":";;AAAA,MAAM,WAAW,GAAG,0zCAA0zC;;MCOj0C,QAAQ;;;;;;EACnB,MAAM;IACJ,MAAM,eAAe,GAAG,CAAC,cAAc,CAAC,CAAC;IACzC,QACE,WAAK,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,IACnC,eAAa,CACT,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/hy-tiny-text/tiny-text.scss?tag=hy-tiny-text&encapsulation=shadow","./src/components/hy-tiny-text/tiny-text.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-tiny-text {\n  color: var(--grayscale-dark);\n  font-family: var(--main-font-family);\n  font-size: 12px;\n  letter-spacing: -0.07px;\n  line-height: 16px;\n}\n","import {Component, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-tiny-text\",\n  styleUrl: \"tiny-text.scss\",\n  shadow: true,\n})\nexport class TinyText {\n  render() {\n    const classAttributes = [\"hy-tiny-text\"];\n    return (\n      <div class={classAttributes.join(\" \")}>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/components/hy-video.js

@@ -4,7 +4,7 @@ import { d as defineCustomElement$4 } from './hy-box2.js';
 import { d as defineCustomElement$3 } from './heading.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const hyVideoCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}a.hy-video{text-decoration:none}.hy-video__video-container{display:inline-block;margin-bottom:22px;position:relative;width:100%}.hy-video__video-container iframe{border:0;height:100%;overflow:hidden;width:100%}@supports (aspect-ratio: 16/9){.hy-video__video-container iframe{aspect-ratio:16/9;height:auto}}.hy-video__video-container .hy-video__preview-image{height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;top:0;width:100%}.hy-video__video-container .hy-video__play{background-color:var(--grayscale-white);left:50%;position:absolute;top:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.hy-video__video-container .hy-video__play button{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:transparent;border:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:24px}@media (min-width: 30rem){.hy-video__video-container .hy-video__play button{padding:36px}}.hy-video__video-container .hy-video__play button:hover{cursor:pointer}.hy-video__video-container .hy-video__play button .hy-video__button-label{font-size:0.9375rem;line-height:18px;color:var(--link-blue);font-family:var(--main-font-family);font-weight:bold;letter-spacing:-0.1px;text-align:center;text-transform:uppercase}@media (min-width: 30rem){.hy-video__video-container .hy-video__play button .hy-video__button-label{font-size:1.0625rem;line-height:20px;letter-spacing:-0.14px}}@media (min-width: 75.0625rem){.hy-video__video-container .hy-video__play button .hy-video__button-label{font-size:1.0625rem;line-height:20px;letter-spacing:-0.16px}}.hy-video__video-container .hy-video__play button svg{fill:var(--link-blue);height:44px;width:44px}@media (min-width: 60rem){.hy-video__video-container .hy-video__play button svg{height:80px;width:80px}}.hy-video__video-container .hy-video__play__simple{background-color:rgba(0, 0, 0, 0.2);position:absolute;width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.hy-video__video-container .hy-video__play__simple:hover{cursor:pointer}.hy-video__video-container .hy-video__play__simple button{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:transparent;border:none;display:-webkit-box;display:-ms-flexbox;display:flex}.hy-video__video-container .hy-video__play__simple button svg{fill:var(--grayscale-white);height:44px;width:44px}@media (min-width: 60rem){.hy-video__video-container .hy-video__play__simple button svg{height:80px;width:80px}}.hy-video__video-container>*:not(.hy-video__label,.hy-video__play,.hy-video__play__simple){bottom:0;left:0;position:absolute;right:0;top:0}.hy-video__video-container:after{content:\"\";display:block;padding-top:56.25%}.hy-video:not(.hy-video--horizontal){display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media (min-width: 1601px){.hy-video:not(.hy-video--horizontal):not(.hy-video__default,.hy-video--list){max-width:66%}}.hy-video--list .hy-video__meta__details{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;gap:32px;margin:0}.hy-video--list .hy-video__meta__details--item{margin-right:0;padding-right:0}.hy-video__label{font-size:0.75rem;line-height:14px;display:inline-block;background-color:var(--grayscale-black);color:var(--grayscale-white);font-family:var(--main-font-family);font-weight:bold;letter-spacing:-0.5px;padding:6px 8px;margin:0 0 22px;text-transform:uppercase}.hy-video.hy-video--horizontal{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@media (min-width: 60rem){.hy-video.hy-video--horizontal{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.hy-video.hy-video--horizontal .hy-video__meta{padding-left:0;width:100%}@media (min-width: 60rem){.hy-video.hy-video--horizontal .hy-video__meta{padding-left:2.5%;width:57.24%}}.hy-video__meta__title h2.hy-heading,.hy-video__meta__title h3.hy-heading{border:none;margin:8px 0 12px 0 !important;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-break:break-word;padding:0 !important}@media (min-width: 60rem){.hy-video__meta__title h2.hy-heading,.hy-video__meta__title h3.hy-heading{margin:0 0 16px 0 !important}}.hy-video__meta__details{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin-bottom:12px}@media (min-width: 60rem){.hy-video__meta__details{margin-bottom:16px}}.hy-video__meta__details--item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-right:44px;min-width:87px;padding-right:46px;place-content:center space-between}.hy-video__meta__description__content{font-size:0.9375rem;line-height:22px;color:var(--grayscale-black);display:block;font-family:var(--main-font-family);letter-spacing:0;width:100%}@media (min-width: 30rem){.hy-video__meta__description__content{font-size:1.0625rem;line-height:26px}}.hy-video__meta__description__more-button{font-size:1rem;line-height:24px;color:var(--brand-main-light);font-family:var(--main-font-family)}.hy-video__meta__description__more-button:hover{cursor:pointer}.hy-video__meta__label{font-size:0.9375rem;line-height:18px;font-weight:700;color:var(--grayscale-black);font-family:var(--main-font-family);margin-bottom:4px}.hy-video__meta__content{font-size:0.9375rem;line-height:22px;color:var(--grayscale-black);font-family:var(--main-font-family);letter-spacing:-0.5px}@media (min-width: 30rem){.hy-video__meta__content{font-size:1.0625rem;line-height:26px;letter-spacing:-0.56px}}";
+const hyVideoCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}a.hy-video{text-decoration:none}.hy-video__video-container{display:inline-block;margin-bottom:22px;position:relative;width:100%}.hy-video__video-container iframe{border:0;height:100%;overflow:hidden;width:100%}@supports (aspect-ratio: 16/9){.hy-video__video-container iframe{aspect-ratio:16/9;height:auto}}.hy-video__video-container .hy-video__preview-image{height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;top:0;width:100%}.hy-video__video-container .hy-video__play{background-color:var(--grayscale-white);left:50%;position:absolute;top:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.hy-video__video-container .hy-video__play button{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:transparent;border:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:24px}@media (min-width: 30rem){.hy-video__video-container .hy-video__play button{padding:36px}}.hy-video__video-container .hy-video__play button:hover{cursor:pointer}.hy-video__video-container .hy-video__play button .hy-video__button-label{font-size:0.9375rem;line-height:18px;color:var(--link-blue);font-family:var(--main-font-family);font-weight:bold;letter-spacing:-0.1px;text-align:center;text-transform:uppercase}@media (min-width: 30rem){.hy-video__video-container .hy-video__play button .hy-video__button-label{font-size:1.0625rem;line-height:20px;letter-spacing:-0.14px}}@media (min-width: 75.0625rem){.hy-video__video-container .hy-video__play button .hy-video__button-label{font-size:1.0625rem;line-height:20px;letter-spacing:-0.16px}}.hy-video__video-container .hy-video__play button svg{fill:var(--link-blue);height:44px;width:44px}@media (min-width: 60rem){.hy-video__video-container .hy-video__play button svg{height:80px;width:80px}}.hy-video__video-container .hy-video__play__simple{background-color:rgba(0, 0, 0, 0.2);position:absolute;width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.hy-video__video-container .hy-video__play__simple:hover{cursor:pointer}.hy-video__video-container .hy-video__play__simple button{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:transparent;border:none;display:-webkit-box;display:-ms-flexbox;display:flex}.hy-video__video-container .hy-video__play__simple button svg{fill:var(--grayscale-white);height:44px;width:44px}@media (min-width: 60rem){.hy-video__video-container .hy-video__play__simple button svg{height:80px;width:80px}}.hy-video__video-container>*:not(.hy-video__label,.hy-video__play,.hy-video__play__simple){bottom:0;left:0;position:absolute;right:0;top:0}.hy-video__video-container:after{content:\"\";display:block;padding-top:56.25%}.hy-video:not(.hy-video--horizontal){display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media (min-width: 1601px){.hy-video:not(.hy-video--horizontal):not(.hy-video__default,.hy-video--list){max-width:66%}}.hy-video--list .hy-video__meta__details{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;gap:32px;margin:0}.hy-video--list .hy-video__meta__details--item{margin-right:0;padding-right:0}.hy-video__label{font-size:0.75rem;line-height:14px;display:inline-block;background-color:var(--grayscale-black);color:var(--grayscale-white);font-family:var(--main-font-family);font-weight:bold;letter-spacing:-0.5px;padding:6px 8px;margin:0 0 22px;text-transform:uppercase}.hy-video.hy-video--horizontal{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@media (min-width: 60rem){.hy-video.hy-video--horizontal{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.hy-video.hy-video--horizontal .hy-video__meta{padding-left:0;width:100%}@media (min-width: 60rem){.hy-video.hy-video--horizontal .hy-video__meta{padding-left:2.5%;width:57.24%}}.hy-video__meta__title h2.hy-heading,.hy-video__meta__title h3.hy-heading{border:none;margin:8px 0 12px 0 !important;-ms-hyphens:auto;hyphens:auto;word-break:break-word;padding:0 !important}@media (min-width: 60rem){.hy-video__meta__title h2.hy-heading,.hy-video__meta__title h3.hy-heading{margin:0 0 16px 0 !important}}.hy-video__meta__details{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin-bottom:12px}@media (min-width: 60rem){.hy-video__meta__details{margin-bottom:16px}}.hy-video__meta__details--item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-right:44px;min-width:87px;padding-right:46px;place-content:center space-between}.hy-video__meta__description__content{font-size:0.9375rem;line-height:22px;color:var(--grayscale-black);display:block;font-family:var(--main-font-family);letter-spacing:0;width:100%}@media (min-width: 30rem){.hy-video__meta__description__content{font-size:1.0625rem;line-height:26px}}.hy-video__meta__description__more-button{font-size:1rem;line-height:24px;color:var(--brand-main-light);font-family:var(--main-font-family)}.hy-video__meta__description__more-button:hover{cursor:pointer}.hy-video__meta__label{font-size:0.9375rem;line-height:18px;font-weight:700;color:var(--grayscale-black);font-family:var(--main-font-family);margin-bottom:4px}.hy-video__meta__content{font-size:0.9375rem;line-height:22px;color:var(--grayscale-black);font-family:var(--main-font-family);letter-spacing:-0.5px}@media (min-width: 30rem){.hy-video__meta__content{font-size:1.0625rem;line-height:26px;letter-spacing:-0.56px}}";
 
 const HyVideo$1 = /*@__PURE__*/ proxyCustomElement(class HyVideo extends HTMLElement {
   constructor() {

package/components/hy-video.js.map

@@ -1 +1 @@
-{"file":"hy-video.js","mappings":"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","names":["HyVideo"],"sources":["./src/components/hy-video/hy-video.scss?tag=hy-video","./src/components/hy-video/hy-video.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\na.hy-video {\n  text-decoration: none;\n}\n\n.hy-video__video-container {\n  display: inline-block;\n  margin-bottom: 22px;\n  position: relative;\n  width: 100%;\n\n  iframe {\n    border: 0;\n    height: 100%;\n    overflow: hidden;\n    width: 100%;\n\n    @supports (aspect-ratio: 16 / 9) {\n      aspect-ratio: 16 / 9;\n      height: auto;\n    }\n  }\n\n  .hy-video__preview-image {\n    height: 100%;\n    left: 0;\n    object-fit: cover;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n\n  .hy-video__play {\n    background-color: var(--grayscale-white);\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translateX(-50%) translateY(-50%);\n\n    button {\n      align-items: center;\n      background: transparent;\n      border: none;\n      display: flex;\n      flex-direction: column;\n      padding: 24px;\n\n      @include breakpoint($narrow) {\n        padding: 36px;\n      }\n\n      &:hover {\n        cursor: pointer;\n      }\n    }\n\n    button .hy-video__button-label {\n      @include font-size(15px, 18px);\n\n      color: var(--link-blue);\n      font-family: var(--main-font-family);\n      font-weight: bold;\n      letter-spacing: -0.1px;\n      text-align: center;\n      text-transform: uppercase;\n\n      @include breakpoint($narrow) {\n        @include font-size(17px, 20px);\n\n        letter-spacing: -0.14px;\n      }\n\n      @include breakpoint($extrawide) {\n        @include font-size(17px, 20px);\n\n        letter-spacing: -0.16px;\n      }\n    }\n\n    button svg {\n      fill: var(--link-blue);\n      height: 44px;\n      width: 44px;\n\n      @include breakpoint($wide) {\n        height: 80px;\n        width: 80px;\n      }\n    }\n  }\n\n  .hy-video__play__simple {\n    background-color: rgba(#000000, 0.2);\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    button {\n      align-items: center;\n      background: transparent;\n      border: none;\n      display: flex;\n    }\n\n    button svg {\n      fill: var(--grayscale-white);\n      height: 44px;\n      width: 44px;\n\n      @include breakpoint($wide) {\n        height: 80px;\n        width: 80px;\n      }\n    }\n  }\n\n  > *:not(.hy-video__label, .hy-video__play, .hy-video__play__simple) {\n    bottom: 0;\n    left: 0;\n    position: absolute;\n    right: 0;\n    top: 0;\n  }\n\n  &:after {\n    content: \"\";\n    display: block;\n    // 16:9 ratio\n    padding-top: calc(9 / 16) * 100%;\n  }\n}\n\n.hy-video:not(.hy-video--horizontal) {\n  display: flex;\n  flex-direction: column;\n\n  &:not(.hy-video__default, .hy-video--list) {\n    @include breakpoint($xlarge) {\n      max-width: 66%;\n    }\n  }\n}\n\n.hy-video--list {\n  .hy-video__meta__details {\n    justify-content: flex-start;\n    gap: 32px;\n    margin: 0;\n  }\n  .hy-video__meta__details--item {\n    margin-right: 0;\n    padding-right: 0;\n  }\n}\n\n.hy-video__label {\n  // font: h5 small size\n  @include font-size(12px, 14px);\n  display: inline-block;\n  background-color: var(--grayscale-black);\n  color: var(--grayscale-white);\n  font-family: var(--main-font-family);\n  font-weight: bold;\n  letter-spacing: -0.5px;\n  padding: 6px 8px;\n  margin: 0 0 22px;\n  text-transform: uppercase;\n}\n\n.hy-video.hy-video--horizontal {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  @include breakpoint($wide) {\n    flex-direction: row;\n  }\n\n  .hy-video__meta {\n    padding-left: 0;\n    width: 100%;\n\n    @include breakpoint($wide) {\n      padding-left: 2.5%;\n      width: 57.24%;\n    }\n  }\n}\n\n.hy-video__meta__title {\n  h2.hy-heading,\n  h3.hy-heading {\n    border: none;\n    margin: 8px 0 12px 0 !important;\n    hyphens: auto;\n    word-break: break-word;\n    padding: 0 !important;\n\n    @include breakpoint($wide) {\n      margin: 0 0 16px 0 !important;\n    }\n  }\n}\n\n.hy-video__meta__details {\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 12px;\n\n  @include breakpoint($wide) {\n    margin-bottom: 16px;\n  }\n}\n\n.hy-video__meta__details--item {\n  display: flex;\n  flex-direction: column;\n  margin-right: 44px;\n  min-width: 87px;\n  padding-right: 46px;\n  place-content: center space-between;\n}\n\n.hy-video__meta__description__content {\n  @include font-size(15px, 22px);\n\n  color: var(--grayscale-black);\n  display: block;\n  font-family: var(--main-font-family);\n  letter-spacing: 0;\n  width: 100%;\n\n  @include breakpoint($narrow) {\n    @include font-size(17px, 26px);\n  }\n}\n\n.hy-video__meta__description__more-button {\n  @include font-size(16px, 24px);\n  color: var(--brand-main-light);\n  font-family: var(--main-font-family);\n\n  &:hover {\n    cursor: pointer;\n  }\n}\n\n.hy-video__meta__label {\n  @include font-size(15px, 18px);\n  @include font-weight($bold);\n  color: var(--grayscale-black);\n  font-family: var(--main-font-family);\n  margin-bottom: 4px;\n}\n\n.hy-video__meta__content {\n  @include font-size(15px, 22px);\n\n  color: var(--grayscale-black);\n  font-family: var(--main-font-family);\n  letter-spacing: -0.5px;\n\n  @include breakpoint($narrow) {\n    @include font-size(17px, 26px);\n\n    letter-spacing: -0.56px;\n  }\n}\n","import {Component, Prop, h, Element, State} from \"@stencil/core\";\nimport {HeadingVarians} from \"../../utils/utils\";\n\n@Component({\n  tag: \"hy-video\",\n  styleUrl: \"hy-video.scss\",\n  shadow: false,\n})\nexport class HyVideo {\n  @Element() el: HTMLElement;\n\n  /** Video title */\n  @Prop() videoTitle: string;\n  /** Video description */\n  @Prop() videoDescription: string;\n  /** Context label */\n  @Prop() contextLabel: string;\n  /** Should context label be visible */\n  @Prop() contextLabelVisible: boolean = false;\n  /** Preview image url */\n  @Prop() previewImageUrl: string;\n  /** Url to video, used with preview image */\n  @Prop() linkToVideo: string;\n  /** Label for play button if preview image is provided */\n  @Prop() playButtonLabel: string;\n  /** Should play button be visible */\n  @Prop() playButtonVisible: boolean = false;\n  /** Series label */\n  @Prop() seriesLabel: string = \"In this series\";\n  /** Series count */\n  @Prop() seriesCount: string = null;\n  /** Views count number */\n  @Prop() views: string;\n  /** Label for views number */\n  @Prop() viewsLabel: string;\n  /** Duration number */\n  @Prop() duration: string;\n  /** Label for duration number */\n  @Prop() durationLabel: string;\n  /** Date added date as string */\n  @Prop() dateAdded: string;\n  /** Label for date added */\n  @Prop() dateAddedLabel: string;\n  /** Use horizontal layout where metadata is on side */\n  @Prop() horizontal: boolean = false;\n\n  @Prop() disableLazy: boolean = false;\n\n  @Prop() headerstyle: string = \"default\";\n\n  @Prop() showMoreLabel: string = \"Show more\";\n\n  @Prop() showLessLabel: string = \"Show less\";\n\n  @Prop() simplePlayButton: boolean = false;\n\n  @Prop() styleList: boolean = false;\n\n  @State() descCollapsed: boolean = false;\n\n  componentDidLoad() {\n    let hyMainDiv = this.el.closest(\".hy-main\");\n    if (hyMainDiv) {\n      if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n        this.headerstyle = \"large\";\n      }\n    }\n\n    if (this.videoDescription && this.videoDescription.match(/\\S/g).length > 255) {\n      this.descCollapsed = true;\n    }\n  }\n\n  renderPreviewWithLink = () => {\n    return this.linkToVideo ? (\n      <a title={this.videoTitle} href={this.linkToVideo} class=\"hy-video__link-to-video\">\n        <img\n          loading={this.disableLazy ? \"eager\" : \"lazy\"}\n          class=\"hy-video__preview-image\"\n          src={this.previewImageUrl}\n          alt={this.videoTitle}\n        />\n      </a>\n    ) : (\n      <img\n        loading={this.disableLazy ? \"eager\" : \"lazy\"}\n        class=\"hy-video__preview-image\"\n        src={this.previewImageUrl}\n        alt={this.videoTitle}\n      />\n    );\n  };\n\n  renderPlayButton = () => {\n    if (this.simplePlayButton) {\n      return (\n        <span class=\"hy-video__play__simple\">\n          <button type=\"button\">\n            <hy-icon icon={\"hy-icon-video\"} class={\"hy-video__play-icon\"} size={20} />\n          </button>\n        </span>\n      );\n    } else {\n      return (\n        <span class=\"hy-video__play\">\n          <button type=\"button\">\n            <hy-icon icon={\"hy-icon-video\"} class={\"hy-video__play-icon\"} size={20} />\n            <span class=\"hy-video__button-label\">{this.playButtonLabel}</span>\n          </button>\n        </span>\n      );\n    }\n  };\n\n  truncate = (str, n) => {\n    return str.length > n ? str.substr(0, n - 1) + \"...\" : str;\n  };\n\n  render() {\n    const classAttributes = [\n      \"hy-video\",\n      this.horizontal ? \"hy-video--horizontal\" : \"\",\n      !this.styleList ? `hy-video__${this.headerstyle}` : \"\",\n      this.styleList ? \"hy-video--list\" : \"\",\n    ].join(\" \");\n\n    const maxChars = 255;\n    const charCount = this.videoDescription ? this.videoDescription.match(/\\S/g).length : 0;\n\n    if (this.linkToVideo && this.styleList) {\n      return [\n        <a href={this.linkToVideo} class={classAttributes}>\n          {this.videoTitle && !this.horizontal && !this.styleList && (\n            <hy-heading class=\"hy-video__meta__title\" heading={HeadingVarians.h2}>\n              {this.videoTitle}\n            </hy-heading>\n          )}\n          <div class=\"hy-video__video-container\">\n            {this.previewImageUrl ? (\n              <div>\n                {this.renderPreviewWithLink()}\n                <slot name=\"video\"></slot>\n              </div>\n            ) : (\n              <slot name=\"video\"></slot>\n            )}\n            {this.playButtonVisible && this.renderPlayButton()}\n          </div>\n          <div class=\"hy-video__meta\">\n            {(this.videoTitle && this.horizontal) ||\n              (this.styleList && (\n                <hy-heading class=\"hy-video__meta__title\" heading={HeadingVarians.h3}>\n                  {this.videoTitle}\n                </hy-heading>\n              ))}\n            {this.contextLabelVisible && <span class=\"hy-video__label\">{this.contextLabel}</span>}\n            {(this.duration || this.views || this.dateAdded || this.seriesCount) && (\n              <div class=\"hy-video__meta__details\">\n                {this.duration && (\n                  <div class=\"hy-video__meta__details--item\">\n                    <span class=\"hy-video__meta__label\">{this.durationLabel}</span>\n                    <span class=\"hy-video__meta__content\">{this.duration}</span>\n                  </div>\n                )}\n                {this.views && (\n                  <div class=\"hy-video__meta__details--item\">\n                    <span class=\"hy-video__meta__label\">{this.viewsLabel}</span>\n                    <span class=\"hy-video__meta__content\">{this.views}</span>\n                  </div>\n                )}\n                {this.dateAdded && (\n                  <div class=\"hy-video__meta__details--item\">\n                    <span class=\"hy-video__meta__label\">{this.dateAddedLabel}</span>\n                    <span class=\"hy-video__meta__content\">{this.dateAdded}</span>\n                  </div>\n                )}\n                {!this.views && this.seriesCount && (\n                  <div class=\"hy-video__meta__details--item\">\n                    <span class=\"hy-video__meta__label\">{this.seriesLabel}</span>\n                    <span class=\"hy-video__meta__content\">{this.seriesCount}</span>\n                  </div>\n                )}\n              </div>\n            )}\n            {this.videoDescription && (\n              <div class=\"hy-video__meta__description\" aria-expanded={this.descCollapsed ? \"false\" : \"true\"}>\n                <div class=\"hy-video__meta__description__content\">\n                  {this.descCollapsed ? this.truncate(this.videoDescription, 255) : this.videoDescription}\n                </div>\n                {charCount > maxChars && (\n                  <span\n                    class=\"hy-video__meta__description__more-button\"\n                    role=\"button\"\n                    tabindex=\"0\"\n                    aria-expanded={this.descCollapsed ? \"false\" : \"true\"}\n                    onClick={() => (this.descCollapsed = !this.descCollapsed)}\n                    onKeyDown={(e) => {\n                      if (e.key != \" \") return;\n                      e.preventDefault();\n                      this.descCollapsed = !this.descCollapsed;\n                    }}\n                  >\n                    {this.descCollapsed ? this.showMoreLabel : this.showLessLabel}\n                  </span>\n                )}\n              </div>\n            )}\n          </div>\n        </a>,\n      ];\n    } else {\n      return [\n        <div class={classAttributes}>\n          {this.videoTitle && !this.horizontal && !this.styleList && (\n            <hy-heading class=\"hy-video__meta__title\" heading={HeadingVarians.h2}>\n              {this.videoTitle}\n            </hy-heading>\n          )}\n          <div class=\"hy-video__video-container\">\n            {this.previewImageUrl ? (\n              <div>\n                {this.renderPreviewWithLink()}\n                <slot name=\"video\"></slot>\n              </div>\n            ) : (\n              <slot name=\"video\"></slot>\n            )}\n            {this.playButtonVisible && this.renderPlayButton()}\n          </div>\n          <div class=\"hy-video__meta\">\n            {(this.videoTitle && this.horizontal) ||\n              (this.styleList && (\n                <hy-heading class=\"hy-video__meta__title\" heading={HeadingVarians.h2}>\n                  {this.videoTitle}\n                </hy-heading>\n              ))}\n            {this.contextLabelVisible && <span class=\"hy-video__label\">{this.contextLabel}</span>}\n            {(this.duration || this.views || this.dateAdded) && (\n              <div class=\"hy-video__meta__details\">\n                {this.duration && (\n                  <div class=\"hy-video__meta__details--item\">\n                    <span class=\"hy-video__meta__label\">{this.durationLabel}</span>\n                    <span class=\"hy-video__meta__content\">{this.duration}</span>\n                  </div>\n                )}\n                {this.views && (\n                  <div class=\"hy-video__meta__details--item\">\n                    <span class=\"hy-video__meta__label\">{this.viewsLabel}</span>\n                    <span class=\"hy-video__meta__content\">{this.views}</span>\n                  </div>\n                )}\n                {this.dateAdded && (\n                  <div class=\"hy-video__meta__details--item\">\n                    <span class=\"hy-video__meta__label\">{this.dateAddedLabel}</span>\n                    <span class=\"hy-video__meta__content\">{this.dateAdded}</span>\n                  </div>\n                )}\n              </div>\n            )}\n            {this.videoDescription && (\n              <div class=\"hy-video__meta__description\" aria-expanded={this.descCollapsed ? \"false\" : \"true\"}>\n                <div class=\"hy-video__meta__description__content\">\n                  {this.descCollapsed ? this.truncate(this.videoDescription, 255) : this.videoDescription}\n                </div>\n                {charCount > maxChars && (\n                  <span\n                    class=\"hy-video__meta__description__more-button\"\n                    role=\"button\"\n                    tabindex=\"0\"\n                    aria-expanded={this.descCollapsed ? \"false\" : \"true\"}\n                    onClick={() => (this.descCollapsed = !this.descCollapsed)}\n                    onKeyDown={(e) => {\n                      if (e.key != \" \") return;\n                      e.preventDefault();\n                      this.descCollapsed = !this.descCollapsed;\n                    }}\n                  >\n                    {this.descCollapsed ? this.showMoreLabel : this.showLessLabel}\n                  </span>\n                )}\n              </div>\n            )}\n          </div>\n        </div>,\n        <hy-box mb=\"1.75, 1.75, 2, 2.5\" />,\n      ];\n    }\n  }\n}\n"],"version":3}
+{"file":"hy-video.js","mappings":"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","names":["HyVideo"],"sources":["./src/components/hy-video/hy-video.scss?tag=hy-video","./src/components/hy-video/hy-video.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\na.hy-video {\n  text-decoration: none;\n}\n\n.hy-video__video-container {\n  display: inline-block;\n  margin-bottom: 22px;\n  position: relative;\n  width: 100%;\n\n  iframe {\n    border: 0;\n    height: 100%;\n    overflow: hidden;\n    width: 100%;\n\n    @supports (aspect-ratio: 16 / 9) {\n      aspect-ratio: 16 / 9;\n      height: auto;\n    }\n  }\n\n  .hy-video__preview-image {\n    height: 100%;\n    left: 0;\n    object-fit: cover;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n\n  .hy-video__play {\n    background-color: var(--grayscale-white);\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translateX(-50%) translateY(-50%);\n\n    button {\n      align-items: center;\n      background: transparent;\n      border: none;\n      display: flex;\n      flex-direction: column;\n      padding: 24px;\n\n      @include breakpoint($narrow) {\n        padding: 36px;\n      }\n\n      &:hover {\n        cursor: pointer;\n      }\n    }\n\n    button .hy-video__button-label {\n      @include font-size(15px, 18px);\n\n      color: var(--link-blue);\n      font-family: var(--main-font-family);\n      font-weight: bold;\n      letter-spacing: -0.1px;\n      text-align: center;\n      text-transform: uppercase;\n\n      @include breakpoint($narrow) {\n        @include font-size(17px, 20px);\n\n        letter-spacing: -0.14px;\n      }\n\n      @include breakpoint($extrawide) {\n        @include font-size(17px, 20px);\n\n        letter-spacing: -0.16px;\n      }\n    }\n\n    button svg {\n      fill: var(--link-blue);\n      height: 44px;\n      width: 44px;\n\n      @include breakpoint($wide) {\n        height: 80px;\n        width: 80px;\n      }\n    }\n  }\n\n  .hy-video__play__simple {\n    background-color: rgba(#000000, 0.2);\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    button {\n      align-items: center;\n      background: transparent;\n      border: none;\n      display: flex;\n    }\n\n    button svg {\n      fill: var(--grayscale-white);\n      height: 44px;\n      width: 44px;\n\n      @include breakpoint($wide) {\n        height: 80px;\n        width: 80px;\n      }\n    }\n  }\n\n  > *:not(.hy-video__label, .hy-video__play, .hy-video__play__simple) {\n    bottom: 0;\n    left: 0;\n    position: absolute;\n    right: 0;\n    top: 0;\n  }\n\n  &:after {\n    content: \"\";\n    display: block;\n    // 16:9 ratio\n    padding-top: calc(9 / 16) * 100%;\n  }\n}\n\n.hy-video:not(.hy-video--horizontal) {\n  display: flex;\n  flex-direction: column;\n\n  &:not(.hy-video__default, .hy-video--list) {\n    @include breakpoint($xlarge) {\n      max-width: 66%;\n    }\n  }\n}\n\n.hy-video--list {\n  .hy-video__meta__details {\n    justify-content: flex-start;\n    gap: 32px;\n    margin: 0;\n  }\n  .hy-video__meta__details--item {\n    margin-right: 0;\n    padding-right: 0;\n  }\n}\n\n.hy-video__label {\n  // font: h5 small size\n  @include font-size(12px, 14px);\n  display: inline-block;\n  background-color: var(--grayscale-black);\n  color: var(--grayscale-white);\n  font-family: var(--main-font-family);\n  font-weight: bold;\n  letter-spacing: -0.5px;\n  padding: 6px 8px;\n  margin: 0 0 22px;\n  text-transform: uppercase;\n}\n\n.hy-video.hy-video--horizontal {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  @include breakpoint($wide) {\n    flex-direction: row;\n  }\n\n  .hy-video__meta {\n    padding-left: 0;\n    width: 100%;\n\n    @include breakpoint($wide) {\n      padding-left: 2.5%;\n      width: 57.24%;\n    }\n  }\n}\n\n.hy-video__meta__title {\n  h2.hy-heading,\n  h3.hy-heading {\n    border: none;\n    margin: 8px 0 12px 0 !important;\n    hyphens: auto;\n    word-break: break-word;\n    padding: 0 !important;\n\n    @include breakpoint($wide) {\n      margin: 0 0 16px 0 !important;\n    }\n  }\n}\n\n.hy-video__meta__details {\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 12px;\n\n  @include breakpoint($wide) {\n    margin-bottom: 16px;\n  }\n}\n\n.hy-video__meta__details--item {\n  display: flex;\n  flex-direction: column;\n  margin-right: 44px;\n  min-width: 87px;\n  padding-right: 46px;\n  place-content: center space-between;\n}\n\n.hy-video__meta__description__content {\n  @include font-size(15px, 22px);\n\n  color: var(--grayscale-black);\n  display: block;\n  font-family: var(--main-font-family);\n  letter-spacing: 0;\n  width: 100%;\n\n  @include breakpoint($narrow) {\n    @include font-size(17px, 26px);\n  }\n}\n\n.hy-video__meta__description__more-button {\n  @include font-size(16px, 24px);\n  color: var(--brand-main-light);\n  font-family: var(--main-font-family);\n\n  &:hover {\n    cursor: pointer;\n  }\n}\n\n.hy-video__meta__label {\n  @include font-size(15px, 18px);\n  @include font-weight($bold);\n  color: var(--grayscale-black);\n  font-family: var(--main-font-family);\n  margin-bottom: 4px;\n}\n\n.hy-video__meta__content {\n  @include font-size(15px, 22px);\n\n  color: var(--grayscale-black);\n  font-family: var(--main-font-family);\n  letter-spacing: -0.5px;\n\n  @include breakpoint($narrow) {\n    @include font-size(17px, 26px);\n\n    letter-spacing: -0.56px;\n  }\n}\n","import {Component, Prop, h, Element, State} from \"@stencil/core\";\nimport {HeadingVarians} from \"../../utils/utils\";\n\n@Component({\n  tag: \"hy-video\",\n  styleUrl: \"hy-video.scss\",\n  shadow: false,\n})\nexport class HyVideo {\n  @Element() el: HTMLElement;\n\n  /** Video title */\n  @Prop() videoTitle: string;\n  /** Video description */\n  @Prop() videoDescription: string;\n  /** Context label */\n  @Prop() contextLabel: string;\n  /** Should context label be visible */\n  @Prop() contextLabelVisible: boolean = false;\n  /** Preview image url */\n  @Prop() previewImageUrl: string;\n  /** Url to video, used with preview image */\n  @Prop() linkToVideo: string;\n  /** Label for play button if preview image is provided */\n  @Prop() playButtonLabel: string;\n  /** Should play button be visible */\n  @Prop() playButtonVisible: boolean = false;\n  /** Series label */\n  @Prop() seriesLabel: string = \"In this series\";\n  /** Series count */\n  @Prop() seriesCount: string = null;\n  /** Views count number */\n  @Prop() views: string;\n  /** Label for views number */\n  @Prop() viewsLabel: string;\n  /** Duration number */\n  @Prop() duration: string;\n  /** Label for duration number */\n  @Prop() durationLabel: string;\n  /** Date added date as string */\n  @Prop() dateAdded: string;\n  /** Label for date added */\n  @Prop() dateAddedLabel: string;\n  /** Use horizontal layout where metadata is on side */\n  @Prop() horizontal: boolean = false;\n\n  @Prop() disableLazy: boolean = false;\n\n  @Prop() headerstyle: string = \"default\";\n\n  @Prop() showMoreLabel: string = \"Show more\";\n\n  @Prop() showLessLabel: string = \"Show less\";\n\n  @Prop() simplePlayButton: boolean = false;\n\n  @Prop() styleList: boolean = false;\n\n  @State() descCollapsed: boolean = false;\n\n  componentDidLoad() {\n    let hyMainDiv = this.el.closest(\".hy-main\");\n    if (hyMainDiv) {\n      if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n        this.headerstyle = \"large\";\n      }\n    }\n\n    if (this.videoDescription && this.videoDescription.match(/\\S/g).length > 255) {\n      this.descCollapsed = true;\n    }\n  }\n\n  renderPreviewWithLink = () => {\n    return this.linkToVideo ? (\n      <a title={this.videoTitle} href={this.linkToVideo} class=\"hy-video__link-to-video\">\n        <img\n          loading={this.disableLazy ? \"eager\" : \"lazy\"}\n          class=\"hy-video__preview-image\"\n          src={this.previewImageUrl}\n          alt={this.videoTitle}\n        />\n      </a>\n    ) : (\n      <img\n        loading={this.disableLazy ? \"eager\" : \"lazy\"}\n        class=\"hy-video__preview-image\"\n        src={this.previewImageUrl}\n        alt={this.videoTitle}\n      />\n    );\n  };\n\n  renderPlayButton = () => {\n    if (this.simplePlayButton) {\n      return (\n        <span class=\"hy-video__play__simple\">\n          <button type=\"button\">\n            <hy-icon icon={\"hy-icon-video\"} class={\"hy-video__play-icon\"} size={20} />\n          </button>\n        </span>\n      );\n    } else {\n      return (\n        <span class=\"hy-video__play\">\n          <button type=\"button\">\n            <hy-icon icon={\"hy-icon-video\"} class={\"hy-video__play-icon\"} size={20} />\n            <span class=\"hy-video__button-label\">{this.playButtonLabel}</span>\n          </button>\n        </span>\n      );\n    }\n  };\n\n  truncate = (str, n) => {\n    return str.length > n ? str.substr(0, n - 1) + \"...\" : str;\n  };\n\n  render() {\n    const classAttributes = [\n      \"hy-video\",\n      this.horizontal ? \"hy-video--horizontal\" : \"\",\n      !this.styleList ? `hy-video__${this.headerstyle}` : \"\",\n      this.styleList ? \"hy-video--list\" : \"\",\n    ].join(\" \");\n\n    const maxChars = 255;\n    const charCount = this.videoDescription ? this.videoDescription.match(/\\S/g).length : 0;\n\n    if (this.linkToVideo && this.styleList) {\n      return [\n        <a href={this.linkToVideo} class={classAttributes}>\n          {this.videoTitle && !this.horizontal && !this.styleList && (\n            <hy-heading class=\"hy-video__meta__title\" heading={HeadingVarians.h2}>\n              {this.videoTitle}\n            </hy-heading>\n          )}\n          <div class=\"hy-video__video-container\">\n            {this.previewImageUrl ? (\n              <div>\n                {this.renderPreviewWithLink()}\n                <slot name=\"video\"></slot>\n              </div>\n            ) : (\n              <slot name=\"video\"></slot>\n            )}\n            {this.playButtonVisible && this.renderPlayButton()}\n          </div>\n          <div class=\"hy-video__meta\">\n            {(this.videoTitle && this.horizontal) ||\n              (this.styleList && (\n                <hy-heading class=\"hy-video__meta__title\" heading={HeadingVarians.h3}>\n                  {this.videoTitle}\n                </hy-heading>\n              ))}\n            {this.contextLabelVisible && <span class=\"hy-video__label\">{this.contextLabel}</span>}\n            {(this.duration || this.views || this.dateAdded || this.seriesCount) && (\n              <div class=\"hy-video__meta__details\">\n                {this.duration && (\n                  <div class=\"hy-video__meta__details--item\">\n                    <span class=\"hy-video__meta__label\">{this.durationLabel}</span>\n                    <span class=\"hy-video__meta__content\">{this.duration}</span>\n                  </div>\n                )}\n                {this.views && (\n                  <div class=\"hy-video__meta__details--item\">\n                    <span class=\"hy-video__meta__label\">{this.viewsLabel}</span>\n                    <span class=\"hy-video__meta__content\">{this.views}</span>\n                  </div>\n                )}\n                {this.dateAdded && (\n                  <div class=\"hy-video__meta__details--item\">\n                    <span class=\"hy-video__meta__label\">{this.dateAddedLabel}</span>\n                    <span class=\"hy-video__meta__content\">{this.dateAdded}</span>\n                  </div>\n                )}\n                {!this.views && this.seriesCount && (\n                  <div class=\"hy-video__meta__details--item\">\n                    <span class=\"hy-video__meta__label\">{this.seriesLabel}</span>\n                    <span class=\"hy-video__meta__content\">{this.seriesCount}</span>\n                  </div>\n                )}\n              </div>\n            )}\n            {this.videoDescription && (\n              <div class=\"hy-video__meta__description\" aria-expanded={this.descCollapsed ? \"false\" : \"true\"}>\n                <div class=\"hy-video__meta__description__content\">\n                  {this.descCollapsed ? this.truncate(this.videoDescription, 255) : this.videoDescription}\n                </div>\n                {charCount > maxChars && (\n                  <span\n                    class=\"hy-video__meta__description__more-button\"\n                    role=\"button\"\n                    tabindex=\"0\"\n                    aria-expanded={this.descCollapsed ? \"false\" : \"true\"}\n                    onClick={() => (this.descCollapsed = !this.descCollapsed)}\n                    onKeyDown={(e) => {\n                      if (e.key != \" \") return;\n                      e.preventDefault();\n                      this.descCollapsed = !this.descCollapsed;\n                    }}\n                  >\n                    {this.descCollapsed ? this.showMoreLabel : this.showLessLabel}\n                  </span>\n                )}\n              </div>\n            )}\n          </div>\n        </a>,\n      ];\n    } else {\n      return [\n        <div class={classAttributes}>\n          {this.videoTitle && !this.horizontal && !this.styleList && (\n            <hy-heading class=\"hy-video__meta__title\" heading={HeadingVarians.h2}>\n              {this.videoTitle}\n            </hy-heading>\n          )}\n          <div class=\"hy-video__video-container\">\n            {this.previewImageUrl ? (\n              <div>\n                {this.renderPreviewWithLink()}\n                <slot name=\"video\"></slot>\n              </div>\n            ) : (\n              <slot name=\"video\"></slot>\n            )}\n            {this.playButtonVisible && this.renderPlayButton()}\n          </div>\n          <div class=\"hy-video__meta\">\n            {(this.videoTitle && this.horizontal) ||\n              (this.styleList && (\n                <hy-heading class=\"hy-video__meta__title\" heading={HeadingVarians.h2}>\n                  {this.videoTitle}\n                </hy-heading>\n              ))}\n            {this.contextLabelVisible && <span class=\"hy-video__label\">{this.contextLabel}</span>}\n            {(this.duration || this.views || this.dateAdded) && (\n              <div class=\"hy-video__meta__details\">\n                {this.duration && (\n                  <div class=\"hy-video__meta__details--item\">\n                    <span class=\"hy-video__meta__label\">{this.durationLabel}</span>\n                    <span class=\"hy-video__meta__content\">{this.duration}</span>\n                  </div>\n                )}\n                {this.views && (\n                  <div class=\"hy-video__meta__details--item\">\n                    <span class=\"hy-video__meta__label\">{this.viewsLabel}</span>\n                    <span class=\"hy-video__meta__content\">{this.views}</span>\n                  </div>\n                )}\n                {this.dateAdded && (\n                  <div class=\"hy-video__meta__details--item\">\n                    <span class=\"hy-video__meta__label\">{this.dateAddedLabel}</span>\n                    <span class=\"hy-video__meta__content\">{this.dateAdded}</span>\n                  </div>\n                )}\n              </div>\n            )}\n            {this.videoDescription && (\n              <div class=\"hy-video__meta__description\" aria-expanded={this.descCollapsed ? \"false\" : \"true\"}>\n                <div class=\"hy-video__meta__description__content\">\n                  {this.descCollapsed ? this.truncate(this.videoDescription, 255) : this.videoDescription}\n                </div>\n                {charCount > maxChars && (\n                  <span\n                    class=\"hy-video__meta__description__more-button\"\n                    role=\"button\"\n                    tabindex=\"0\"\n                    aria-expanded={this.descCollapsed ? \"false\" : \"true\"}\n                    onClick={() => (this.descCollapsed = !this.descCollapsed)}\n                    onKeyDown={(e) => {\n                      if (e.key != \" \") return;\n                      e.preventDefault();\n                      this.descCollapsed = !this.descCollapsed;\n                    }}\n                  >\n                    {this.descCollapsed ? this.showMoreLabel : this.showLessLabel}\n                  </span>\n                )}\n              </div>\n            )}\n          </div>\n        </div>,\n        <hy-box mb=\"1.75, 1.75, 2, 2.5\" />,\n      ];\n    }\n  }\n}\n"],"version":3}