/******/ (() => { // webpackBootstrap
/*!****************************************!*\
  !*** ./assets/src/blocks/tabs/view.js ***!
  \****************************************/
/**
 * Functionality for the HM Tab block.
 *
 * Adapted from the code provided on https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role
 */

/**
 * Change to tabs.
 *
 * @param {HTMLElement} tab          Tab element.
 * @param {HTMLElement} blockElement Tab block element.
 */

function activateTab(tab, blockElement) {
  blockElement.classList.add('thim-blocks-tabs--is-focused');
  const handleClickOutside = event => {
    if (event.target !== blockElement && !blockElement.contains(event.target)) {
      blockElement.classList.remove('thim-blocks-tabs--is-focused');
      document.removeEventListener('click', handleClickOutside);
    }
  };

  // Skip activating if tab is already selected.
  if (tab.getAttribute('aria-selected') === 'true') {
    // But clicking on an active tab, should focus container.
    document.addEventListener('click', handleClickOutside);
    return;
  }
  const panel = document.getElementById(tab.getAttribute('aria-controls'));
  const tabPanels = blockElement.querySelectorAll('[role="tabpanel"]');

  // Remove all current selected tabs
  tab.parentElement.querySelectorAll('[role="tab"][aria-selected="true"]').forEach(t => {
    t.setAttribute('aria-selected', false);
    t.setAttribute('tabindex', -1);
    t.classList.remove('is-active');
  });

  // Set this tab as selected
  tab.setAttribute('aria-selected', true);
  tab.setAttribute('tabindex', 0);
  tab.classList.add('is-active');

  // Hide all tab panels
  tabPanels.forEach(p => {
    if (p.getAttribute('id') === panel.getAttribute('id')) {
      p.removeAttribute('hidden');
      p.classList.add('thim-blocks-tab-item--is-active');
    } else {
      p.setAttribute('hidden', true);
      p.classList.remove('thim-blocks-tab-item--is-active');
    }
  });

  // Unfocus after switching tabs.
  blockElement.classList.remove('thim-blocks-tabs--focused');
}

/**
 * Handle click event on tab.
 *
 * @param {Object}      e            Event
 * @param {HTMLElement} blockElement Tab block element.
 */
function handleTabClick(e, blockElement) {
  const tabBtn = e.target.closest('button[role="tab"]');
  if (!tabBtn) return;
  activateTab(tabBtn, blockElement);
}

/**
 * Handle key navigation on tab element.
 *
 * @param {Object}      e            Event
 * @param {HTMLElement} blockElement Tab block element.
 */
function handleKeydown(e, blockElement) {
  if (!(e.keyCode === 39 || e.keyCode === 37)) {
    return;
  }
  const tab = blockElement.querySelector('[role="tab"][aria-selected="true"]');
  const tabs = blockElement.querySelectorAll('[role="tab"]');
  const currentTabIndex = Array.from(tabs).findIndex(t => tab.getAttribute('id') === t.getAttribute('id'));

  // Work out the next tab.
  let nextTabIndex = e.keyCode === 37 ? currentTabIndex - 1 : currentTabIndex + 1;
  nextTabIndex = Math.min(Math.max(nextTabIndex, 0), tabs.length);
  if (nextTabIndex !== currentTabIndex) {
    activateTab(tabs[nextTabIndex], blockElement);
    tabs[currentTabIndex].blur();
    tabs[nextTabIndex].focus();
  }
}
function createTabs(blockElement) {
  return Array.from(blockElement.querySelectorAll('.thim-blocks-tab-item')).map((tabItemEl, i) => {
    const tabBtnElement = document.createElement('button');
    tabBtnElement.setAttribute('role', 'tab');
    tabBtnElement.setAttribute('tabindex', i === 0 ? '0' : '-1');
    tabBtnElement.setAttribute('aria-controls', tabItemEl.id);
    tabBtnElement.setAttribute('id', tabItemEl.id.replace('thim-blocks-tab-item-', 'thim-blocks-tabs-button-'));
    tabBtnElement.setAttribute('aria-selected', i === 0 ? 'true' : 'false');
    tabBtnElement.classList.add('thim-blocks-tabs__nav-button');
    tabBtnElement.classList.toggle('is-active', i === 0);
    const titleEl = tabItemEl.querySelector('.thim-blocks-tab-item__title');
    const dataIcon = tabItemEl.dataset.icon;
    const iconHTML = dataIcon ? `<i class="${dataIcon}"></i>` : '';
    const textHTML = titleEl ? titleEl.textContent : '';
    tabBtnElement.innerHTML = iconHTML + textHTML;
    return tabBtnElement;
  });
}

/**
 * Initialize tab block.
 *
 * Ensure initial state is correct.
 *
 * @param {HTMLElement} blockElement Tab block.
 */
function initTabBlock(blockElement) {
  // TODO: Re-use placeholder navigation elements instead of replacing.
  const placeholderNav = blockElement.querySelector('.thim-blocks-tabs__nav');
  if (placeholderNav) {
    placeholderNav.parentNode.removeChild(placeholderNav);
  }
  const tabsListElement = document.createElement('div');
  tabsListElement.classList.add('thim-blocks-tabs__nav');
  tabsListElement.setAttribute('role', 'tablist');
  const customTabContainerId = blockElement.dataset.tablistContainerId;
  if (customTabContainerId && document.getElementById(customTabContainerId)) {
    document.getElementById(customTabContainerId).prepend(tabsListElement);
  } else {
    blockElement.prepend(tabsListElement);
  }
  const tabs = createTabs(blockElement);

  // Add a click event handler to each tab
  tabs.forEach(tabBtnElement => {
    tabsListElement.appendChild(tabBtnElement);
    const panel = document.getElementById(tabBtnElement.getAttribute('aria-controls'));
    const isActive = tabBtnElement.classList.contains('is-active');
    if (isActive) {
      panel.classList.add('thim-blocks-tab-item--is-active');
      panel.removeAttribute('hidden');
    } else {
      panel.classList.remove('thim-blocks-tab-item--is-active');
      panel.setAttribute('hidden', true);
    }
    tabBtnElement.addEventListener('click', event => {
      handleTabClick(event, blockElement);
    });
  });
  tabsListElement.addEventListener('keydown', event => {
    handleKeydown(event, blockElement);
  });

  // When the tab block is first scrolled into view, add the class thim-blocks-tabs--is-visible
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        window.setTimeout(() => {
          entry.target.classList.add('thim-blocks-tabs--is-visible');
        }, 250);
        observer.unobserve(entry.target); // Optional, if you only want it to happen once
      }
    });
  });
  observer.observe(blockElement);
  blockElement.classList.add('thim-blocks-tabs--is-initialized');
}

/**
 * Kick it all off.
 */
function bootstrap() {
  document.querySelectorAll('.thim-blocks-tabs').forEach(el => initTabBlock(el));
}
if (document.readyState !== 'loading') {
  bootstrap();
} else {
  document.addEventListener('DOMContentLoaded', bootstrap);
}
/******/ })()
;
//# sourceMappingURL=view.js.map