@cbpds/web-components/dist/cjs/cbp-subnav.cjs.entry.js

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-cd71cbd5.js');
const utils = require('./utils-99c9e716.js');
const store = require('./store-f67f3d11.js');

const cbpSubnavCss = "cbp-subnav{display:block}";
const CbpSubnavStyle0 = cbpSubnavCss;

const CbpSubNav = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.subnavItems = [];
        this.activeItem = null;
        this.accessibilityText = 'Sub-Navigation';
        this.flat = undefined;
        this.store = undefined;
        this.context = undefined;
        this.sx = {};
    }
    updateActiveItem(newValue) {
        const ActiveItem = this.host.querySelector(`cbp-subnav-item[name="${newValue}"]`);
        this.activeItem = ActiveItem;
        this.subnavItems.forEach(el => {
            el.open = false;
        });
        if (ActiveItem)
            ActiveItem.open = true;
        setTimeout(() => {
            ActiveItem === null || ActiveItem === void 0 ? void 0 : ActiveItem.querySelector('a').focus();
        }, 101);
    }
    updateCurrent(newValue) {
        const CurrentItem = this.host.querySelector(`cbp-subnav-item[name="${newValue}"]`);
        this.currentItem = CurrentItem;
        this.subnavItems.forEach(item => {
            if (item == CurrentItem)
                item.current = true;
            else
                item.current = false;
        });
    }
    handleSubnavItemClick({ detail: { host } }) {
        this.subnavItems.forEach((subnavItem) => {
            if (host == subnavItem) {
                if (this.store) {
                    const TopParent = this.findParent(subnavItem);
                    store.state.currentPage = host.name;
                    store.state.currentParent = TopParent.name;
                }
            }
            else {
                subnavItem.current = false;
            }
        });
    }
    findParent(subnavItem) {
        const Parent = subnavItem.parentElement.closest('cbp-subnav-item');
        if (!Parent)
            return subnavItem;
        else
            return this.findParent(Parent);
    }
    componentWillLoad() {
        this.subnavItems = Array.from(this.host.querySelectorAll('cbp-subnav-item'));
        this.currentItem = this.host.querySelector('cbp-subnav-item[current]');
        this.subnavItems.forEach(subnavItem => {
            subnavItem.addEventListener('subnavItemClick', (e) => {
                this.handleSubnavItemClick(e);
            });
        });
        if (typeof this.sx == 'string') {
            this.sx = JSON.parse(this.sx) || {};
        }
        utils.setCSSProps(this.host, Object.assign({}, this.sx));
    }
    render() {
        var _a, _b;
        if (this.store) {
            if (((_a = this.currentItem) === null || _a === void 0 ? void 0 : _a.name) != store.state.currentPage) {
                this.updateCurrent(store.state.currentPage);
            }
            if (((_b = this.activeItem) === null || _b === void 0 ? void 0 : _b.name) != store.state.activeItemName) {
                this.updateActiveItem(store.state.activeItemName);
            }
        }
        return (index.h(index.Host, { key: '11ec6b59257413cae1709687de7f24fb6ca0522c' }, index.h("nav", { key: 'f9d1c7ba630d8938a70b6f594f8c47f4d195525d', "aria-label": this.accessibilityText }, index.h("slot", { key: '2627f9f6a71a317ed18c11f73c93139d9d9b6ee1' }))));
    }
    get host() { return index.getElement(this); }
};
CbpSubNav.style = CbpSubnavStyle0;

exports.cbp_subnav = CbpSubNav;

//# sourceMappingURL=cbp-subnav.cjs.entry.js.map