import { r as registerInstance, h, a as getElement } from './index-ytAlchvh.js';
import { q as queryAll } from './index-DOYZ5uJz.js';

/**
 * @param {HTMLElement} element DOM element for component instantiation and scope
 * @param {Object} options
 * @param {String} options.itemSelector Selector for the items
 * @param {String} options.parentItemSelector Selector for the parent items
 * @param {String} options.listSelector Selector for the lists
 * @param {Boolean} options.attachClickListener Whether or not to bind click events
 */
class CategoryFilter {
  /**
   * @static
   * Shorthand for instance creation and initialisation.
   *
   * @param {HTMLElement} root DOM element for component instantiation and scope
   *
   * @return {CategoryFilter} An instance of CategoryFilter.
   */
  static autoInit(root, { CATEGORY_FILTER: defaultOptions = {} } = {}) {
    const categoryFilter = new CategoryFilter(root, defaultOptions);
    categoryFilter.init();
    root.ECLCategoryFilter = categoryFilter;
    return categoryFilter;
  }

  constructor(
    element,
    {
      itemSelector = '.ecl-category-filter__item',
      parentItemSelector = 'ecl-category-filter__item--has-children',
      listSelector = '.ecl-category-filter__list',
      attachClickListener = true,
    } = {},
  ) {
    // Check element
    if (!element || element.nodeType !== Node.ELEMENT_NODE) {
      throw new TypeError(
        'DOM element should be given to initialize this widget.',
      );
    }

    this.element = element;

    // Options
    this.itemSelector = itemSelector;
    this.parentItemSelector = parentItemSelector;
    this.listSelector = listSelector;
    this.attachClickListener = attachClickListener;

    // Private variables
    this.items = null;

    // Bind `this` for use in callbacks
    this.handleClickExpand = this.handleClickExpand.bind(this);
    this.expandParents = this.expandParents.bind(this);
  }

  /**
   * Initialise component.
   */
  init() {
    if (!ECL) {
      throw new TypeError('Called init but ECL is not present');
    }
    ECL.components = ECL.components || new Map();
    // Query elementslur
    this.items = queryAll(this.itemSelector, this.element);
    const e = { preventDefault: () => null };
    // Bind click event on open
    if (this.attachClickListener && this.items) {
      this.items.forEach((item) => {
        item.addEventListener('click', this.handleClickExpand);
        // Epand the needed items if there is a current item set
        if (item.getAttribute('aria-current')) {
          e.target = item;
          this.handleClickExpand(e);
          this.expandParents(item);
        }
      });
    }

    // Set ecl initialized attribute
    this.element.setAttribute('data-ecl-auto-initialized', 'true');
    ECL.components.set(this.element, this);
  }

  /**
   * Destroy component.
   */
  destroy() {
    if (this.attachClickListener && this.items) {
      this.items.forEach((item) => {
        item.removeEventListener('click', this.handleClickExpand, false);
      });
    }
    if (this.element) {
      this.element.removeAttribute('data-ecl-auto-initialized');
      ECL.components.delete(this.element);
    }
  }

  /**
   * Expand parents of the given item.
   * @param {Node} item
   */
  expandParents(item) {
    if (!item) return;
    const e = { preventDefault: () => null };
    const parent = item.closest(this.listSelector)?.previousElementSibling;
    if (parent && parent.classList.contains(this.parentItemSelector)) {
      e.target = parent;
      this.handleClickExpand(e);
      this.expandParents(parent);
    }
  }

  /**
   * Expand tree list item.
   * @param {Event} e
   */
  handleClickExpand(e) {
    // Get item even if we clicked on the icon
    const treeItem = e.target.closest(this.itemSelector);
    const isNotInit = typeof e.stopPropagation === 'function';
    // Toggle current item
    if (isNotInit) {
      this.items.forEach((item) => {
        if (item === treeItem) {
          item.setAttribute('aria-current', true);
        } else {
          item.removeAttribute('aria-current');
        }
      });
    }

    // Toggle expanded
    const isExpanded = treeItem.getAttribute('aria-expanded');
    if (isExpanded && isExpanded === 'true') {
      e.preventDefault();
      treeItem.setAttribute('aria-expanded', 'false');
      treeItem.parentElement.classList.remove(
        'ecl-category-filter__list-item--open',
      );
    } else if (isExpanded && isExpanded === 'false') {
      e.preventDefault();
      treeItem.setAttribute('aria-expanded', 'true');
      treeItem.parentElement.classList.add(
        'ecl-category-filter__list-item--open',
      );
    }

    if (isExpanded && isNotInit) {
      // For first level, keep only one item open
      if (treeItem.classList.contains('ecl-category-filter__item--level-1')) {
        this.items.forEach((item) => {
          if (item !== treeItem) {
            item.parentElement.classList.remove(
              'ecl-category-filter__list-item--open',
            );
            if (item.classList.contains(this.parentItemSelector)) {
              item.setAttribute('aria-expanded', 'false');
            }
          }
        });
      }
    }
  }
}

const eclCategoryFilterEcCss = () => `.ecl-category-filter.sc-ecl-category-filter-ec{max-width:18rem}.ecl-category-filter__list-item.sc-ecl-category-filter-ec{display:flex;flex-direction:column;position:relative}.ecl-category-filter__item.sc-ecl-category-filter-ec{align-items:center;appearance:none;background-color:transparent;border:none;box-sizing:border-box;color:var(--cm-on-surface-brand,var(--c-d));display:flex;font:var(--f-s);justify-content:space-between;min-height:44px;padding:var(--s-xs) var(--s-m);text-align:left;text-decoration:none}.ecl-category-filter__item.sc-ecl-category-filter-ec:hover{background-color:var(--cm-surface-low-2);cursor:pointer}.ecl-category-filter__item.sc-ecl-category-filter-ec:focus-visible{outline:2px solid var(--cm-border-primary,var(--c-p));outline-offset:-2px}.ecl-category-filter__item-icon.sc-ecl-category-filter-ec{align-self:flex-start;color:var(--cm-on-surface,var(--c-p));flex-shrink:0;margin-inline-end:var(--s-xs);margin-top:6px}.ecl-category-filter__item--level-1.sc-ecl-category-filter-ec .ecl-category-filter__item-icon.sc-ecl-category-filter-ec{margin-inline-end:0;margin-inline-start:var(--s-xs)}.ecl-category-filter__item--level-1.ecl-category-filter__item--has-children.sc-ecl-category-filter-ec{padding-inline-end:var(--s-xs)}.ecl-category-filter__list.sc-ecl-category-filter-ec{list-style:none;margin:0;padding:0}.ecl-category-filter__list.sc-ecl-category-filter-ec .ecl-category-filter__list.sc-ecl-category-filter-ec .ecl-category-filter__item.sc-ecl-category-filter-ec{border-bottom:0;justify-content:normal}.ecl-category-filter__list-item.sc-ecl-category-filter-ec:last-child .ecl-category-filter__item.sc-ecl-category-filter-ec{border-bottom:0}.ecl-category-filter__item[aria-current=true].sc-ecl-category-filter-ec{font-weight:700}.ecl-category-filter__list-item.sc-ecl-category-filter-ec .ecl-category-filter__list.sc-ecl-category-filter-ec{display:none}.ecl-category-filter__list-item--open.sc-ecl-category-filter-ec{background-color:var(--cm-surface-low-1)}.ecl-category-filter__list-item--open.sc-ecl-category-filter-ec:before{background-color:var(--cm-border,var(--c-p));content:"";display:inline-block;height:100%;left:0;position:absolute;top:0;width:4px;z-index:1}.ecl-category-filter__list-item--open.sc-ecl-category-filter-ec:dir(rtl):before{left:auto;right:0}.ecl-category-filter__list-item--open.sc-ecl-category-filter-ec .ecl-category-filter__item.sc-ecl-category-filter-ec{border-bottom:0}.ecl-category-filter__list-item--open.sc-ecl-category-filter-ec>.ecl-category-filter__item.sc-ecl-category-filter-ec .ecl-category-filter__item-icon.sc-ecl-category-filter-ec{transform:rotate(180deg)}.ecl-category-filter__list-item--open.sc-ecl-category-filter-ec .ecl-category-filter__item--level-1.sc-ecl-category-filter-ec .ecl-category-filter__item-icon.sc-ecl-category-filter-ec{transform:rotate(0deg)}.ecl-category-filter__list-item--open.sc-ecl-category-filter-ec>.ecl-category-filter__list.sc-ecl-category-filter-ec{display:block}.ecl-category-filter__item--level-2.sc-ecl-category-filter-ec{padding-inline-start:calc(var(--s-m) + var(--s-xl)*1)}.ecl-category-filter__item--level-2.ecl-category-filter__item--has-children.sc-ecl-category-filter-ec{padding-inline-start:calc(var(--s-m) + var(--s-xl)*0)}.ecl-category-filter__item--level-3.sc-ecl-category-filter-ec{padding-inline-start:calc(var(--s-m) + var(--s-xl)*2)}.ecl-category-filter__item--level-3.ecl-category-filter__item--has-children.sc-ecl-category-filter-ec{padding-inline-start:calc(var(--s-m) + var(--s-xl)*1)}.ecl-category-filter__item--level-4.sc-ecl-category-filter-ec{padding-inline-start:calc(var(--s-m) + var(--s-xl)*3)}.ecl-category-filter__item--level-4.ecl-category-filter__item--has-children.sc-ecl-category-filter-ec{padding-inline-start:calc(var(--s-m) + var(--s-xl)*2)}.no-js.sc-ecl-category-filter-ec .ecl-category-filter__list-item.sc-ecl-category-filter-ec .ecl-category-filter__item.sc-ecl-category-filter-ec{border-bottom:0}.no-js.sc-ecl-category-filter-ec .ecl-category-filter__list-item.sc-ecl-category-filter-ec .ecl-category-filter__list.sc-ecl-category-filter-ec{display:block}.ecl-category-filter__item-icon.sc-ecl-category-filter-ec.sc-ecl-category-filter-ec{margin:-3px 0!important}`;

const eclCategoryFilterEuCss = () => `.ecl-category-filter.sc-ecl-category-filter-eu{max-width:18rem}.ecl-category-filter__list-item.sc-ecl-category-filter-eu{display:flex;flex-direction:column;position:relative}.ecl-category-filter__item.sc-ecl-category-filter-eu{align-items:center;appearance:none;background-color:transparent;border:none;border-bottom:1px solid var(--c-p-20);box-sizing:border-box;color:var(--cm-on-surface-brand,var(--c-d));display:flex;font:var(--f-s);justify-content:space-between;min-height:44px;padding:var(--s-xs) var(--s-m);text-align:left;text-decoration:none}.ecl-category-filter__item.sc-ecl-category-filter-eu:hover{background-color:var(--c-p-20);cursor:pointer}.ecl-category-filter__item.sc-ecl-category-filter-eu:focus-visible{outline:2px solid var(--cm-border-primary,var(--c-p));outline-offset:-2px}.ecl-category-filter__item-icon.sc-ecl-category-filter-eu{align-self:flex-start;color:var(--cm-on-surface,var(--c-p));flex-shrink:0;margin-inline-end:var(--s-xs);margin-top:6px}.ecl-category-filter__item--level-1.sc-ecl-category-filter-eu .ecl-category-filter__item-icon.sc-ecl-category-filter-eu{margin-inline-end:0;margin-inline-start:var(--s-xs)}.ecl-category-filter__item--level-1.ecl-category-filter__item--has-children.sc-ecl-category-filter-eu{padding-inline-end:var(--s-xs)}.ecl-category-filter__list.sc-ecl-category-filter-eu{list-style:none;margin:0;padding:0}.ecl-category-filter__list.sc-ecl-category-filter-eu .ecl-category-filter__list.sc-ecl-category-filter-eu .ecl-category-filter__item.sc-ecl-category-filter-eu{border-bottom:0;justify-content:normal}.ecl-category-filter__list-item.sc-ecl-category-filter-eu:last-child .ecl-category-filter__item.sc-ecl-category-filter-eu{border-bottom:0}.ecl-category-filter__item[aria-current=true].sc-ecl-category-filter-eu{font-weight:700}.ecl-category-filter__list-item.sc-ecl-category-filter-eu .ecl-category-filter__list.sc-ecl-category-filter-eu{display:none}.ecl-category-filter__list-item--open.sc-ecl-category-filter-eu{background-color:var(--c-p-10)}.ecl-category-filter__list-item--open.sc-ecl-category-filter-eu:before{background-color:var(--cm-border,var(--c-p));content:"";display:inline-block;height:100%;left:0;position:absolute;top:0;width:4px;z-index:1}.ecl-category-filter__list-item--open.sc-ecl-category-filter-eu:dir(rtl):before{left:auto;right:0}.ecl-category-filter__list-item--open.sc-ecl-category-filter-eu .ecl-category-filter__item.sc-ecl-category-filter-eu{border-bottom:0}.ecl-category-filter__list-item--open.sc-ecl-category-filter-eu>.ecl-category-filter__item.sc-ecl-category-filter-eu .ecl-category-filter__item-icon.sc-ecl-category-filter-eu{transform:rotate(180deg)}.ecl-category-filter__list-item--open.sc-ecl-category-filter-eu .ecl-category-filter__item--level-1.sc-ecl-category-filter-eu .ecl-category-filter__item-icon.sc-ecl-category-filter-eu{transform:rotate(0deg)}.ecl-category-filter__list-item--open.sc-ecl-category-filter-eu>.ecl-category-filter__list.sc-ecl-category-filter-eu{display:block}.ecl-category-filter__item--level-2.sc-ecl-category-filter-eu{padding-inline-start:calc(var(--s-m) + var(--s-l)*1)}.ecl-category-filter__item--level-2.ecl-category-filter__item--has-children.sc-ecl-category-filter-eu{padding-inline-start:calc(var(--s-m) + var(--s-l)*0)}.ecl-category-filter__item--level-3.sc-ecl-category-filter-eu{padding-inline-start:calc(var(--s-m) + var(--s-l)*2)}.ecl-category-filter__item--level-3.ecl-category-filter__item--has-children.sc-ecl-category-filter-eu{padding-inline-start:calc(var(--s-m) + var(--s-l)*1)}.ecl-category-filter__item--level-4.sc-ecl-category-filter-eu{padding-inline-start:calc(var(--s-m) + var(--s-l)*3)}.ecl-category-filter__item--level-4.ecl-category-filter__item--has-children.sc-ecl-category-filter-eu{padding-inline-start:calc(var(--s-m) + var(--s-l)*2)}.no-js.sc-ecl-category-filter-eu .ecl-category-filter__list-item.sc-ecl-category-filter-eu .ecl-category-filter__item.sc-ecl-category-filter-eu{border-bottom:0}.no-js.sc-ecl-category-filter-eu .ecl-category-filter__list-item.sc-ecl-category-filter-eu .ecl-category-filter__list.sc-ecl-category-filter-eu{display:block}.ecl-category-filter__item-icon.sc-ecl-category-filter-eu.sc-ecl-category-filter-eu{margin:-3px 0!important}`;

const EclCategoryFilter = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.styleClass = '';
        this.noScript = false;
    }
    getClass() {
        const styleClasses = [
            `ecl-category-filter`,
            this.styleClass
        ];
        if (this.colorMode) {
            styleClasses.push(`ecl-color-mode--${this.colorMode}`);
        }
        return styleClasses.join(' ');
    }
    componentWillLoad() {
        var _a;
        this.theme = (_a = document.documentElement.getAttribute('data-ecl-theme')) !== null && _a !== void 0 ? _a : (this.theme || 'ec');
    }
    componentDidRender() {
        const items = Array.from(this.el.querySelectorAll('.ecl-category-filter__item--level-1'));
        if (items[0]) {
            const lastItem = items[items.length - 1];
            lastItem.parentElement.parentElement.style.border = 'none';
        }
        if (!this.noScript) {
            window.ECL = window.ECL || {};
            ECL.CategoryFilter = CategoryFilter;
            const categoryFilter = new CategoryFilter(this.el.firstElementChild);
            categoryFilter.init();
        }
    }
    render() {
        return (h("nav", { key: 'd8dbe5af69a29bd86a4f73063f887d8306f53c07', class: this.getClass(), "data-ecl-category-filter": true }, h("ul", { key: 'e54a0d4973382703d9c5795a4bbe5bc37c483ba1', class: "ecl-category-filter__list" }, h("slot", { key: 'c4dfc0edc820485f0cfdeefdc230f1b6d53cdc1a' }))));
    }
    static get assetsDirs() { return ["build"]; }
    get el() { return getElement(this); }
};
EclCategoryFilter.style = {
    ec: eclCategoryFilterEcCss(),
    eu: eclCategoryFilterEuCss()
};

export { EclCategoryFilter as ecl_category_filter };
