@baloise/ds-core 0.0.5-nightly.e56f740

package/dist/collection/components/bal-nav/bal-nav.js

@@ -0,0 +1,509 @@
+import { __decorate, __metadata } from "tslib";
+import { h, Host, } from "@stencil/core";
+import { BEM } from "../../utils/bem";
+import { Logger } from "../../utils/log";
+import { ListenToMutation } from "../../utils/mutation";
+import { ListenToBreakpoints, balBreakpoints } from "../../utils/breakpoints";
+import { NavMetaLinkItem } from "./models/bal-nav-meta-link-item";
+import { NavMetaButton } from "./models/bal-nav-meta-button";
+import { BalScrollHandler } from "../../utils/scroll";
+import { ListenToConfig, defaultConfig, } from "../../utils/config";
+import { i18nNavBars } from "./bal-nav.i18n";
+import { balBrowser } from "../../utils/browser";
+import { waitAfterIdleCallback, waitForComponent } from "../../utils/helpers";
+export class NavMetaBar {
+    constructor() {
+        this.navId = `bal-nav-${NavIds++}`;
+        this.bodyScrollHandler = new BalScrollHandler();
+        this.hasRenderedWithFlyoutActive = false;
+        this.mutationObserverActive = true;
+        /**
+         * EVENT BINDING
+         * ------------------------------------------------------
+         */
+        this.onOptionChange = async () => {
+            this.linkItems = this.options.map(option => new NavMetaLinkItem(option, this));
+            this.metaButtons = this.buttons.map(button => new NavMetaButton(button, this));
+        };
+        this.onTouchToggleFlyout = (_ev) => {
+            this.closeAllPopups();
+            this.toggleFlyout();
+            if (balBrowser.hasWindow && window.scrollY > 0) {
+                window.scrollTo(0, 0);
+            }
+            if (this.isFlyoutActive) {
+                this.bodyScrollHandler.disable();
+            }
+            else {
+                this.bodyScrollHandler.enable();
+            }
+        };
+        this.onPopupOpen = (triggers) => {
+            if (this.isTouch) {
+                if (balBrowser.hasWindow && window.scrollY > 0) {
+                    window.scrollTo(0, 0);
+                }
+            }
+            triggers.forEach(trigger => {
+                if (trigger.classList.contains('bal-nav__popup--desktop')) {
+                    trigger.inverted = false;
+                }
+                else if (trigger.classList.contains('bal-nav__popup--touch-bottom')) {
+                    trigger.color = 'primary';
+                }
+                else if (trigger.classList.contains('bal-nav__popup--touch-top')) {
+                    trigger.color = 'primary';
+                }
+            });
+            this.bodyScrollHandler.disable();
+        };
+        this.onPopupClose = (triggers) => {
+            if (!this.isFlyoutActive) {
+                this.bodyScrollHandler.enable();
+            }
+            triggers.forEach(trigger => {
+                if (trigger.classList.contains('bal-nav__popup--desktop')) {
+                    trigger.inverted = true;
+                }
+                else if (trigger.classList.contains('bal-nav__popup--touch-bottom')) {
+                    trigger.color = 'info';
+                }
+                else if (trigger.classList.contains('bal-nav__popup--touch-top')) {
+                    trigger.color = 'light';
+                }
+            });
+        };
+        this.onMetaBarTabChange = (ev) => {
+            if (ev.detail !== this.activeMetaLinkValue) {
+                this.activeMetaLinkValue = ev.detail;
+                const activeMetaItem = this.linkItems.find(item => item.value === this.activeMetaLinkValue);
+                if (activeMetaItem && activeMetaItem.mainLinkItems.length > 0) {
+                    this.activeMenuLinkValue = activeMetaItem.mainLinkItems[0].value;
+                }
+            }
+        };
+        this.onMenuBarTabChange = (value) => {
+            if (this.activeMenuLinkValue === value) {
+                this.toggleFlyout();
+            }
+            else {
+                this.openFlyout();
+            }
+            this.activeMenuLinkValue = value;
+        };
+        this.isTouch = balBreakpoints.isTouch;
+        this.isDesktop = balBreakpoints.isDesktop;
+        this.language = defaultConfig.language;
+        this.region = defaultConfig.region;
+        this.isFlyoutActive = false;
+        this.activeMetaLinkValue = undefined;
+        this.activeMenuLinkValue = undefined;
+        this.logo = undefined;
+        this.options = [];
+        this.linkItems = [];
+        this.buttons = [];
+        this.metaButtons = [];
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    async optionChanged() {
+        this.onOptionChange();
+        this.updateTabs();
+    }
+    async buttonChanged() {
+        this.onOptionChange();
+    }
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    connectedCallback() {
+        this.bodyScrollHandler.connect();
+    }
+    componentWillLoad() {
+        this.onOptionChange();
+        this.updateTabs();
+    }
+    disconnectedCallback() {
+        this.bodyScrollHandler.disconnect();
+    }
+    /**
+     * LISTENERS
+     * ------------------------------------------------------
+     */
+    listenToPopupChanges(event) {
+        const target = event.target;
+        if (target && target.nodeName === 'BAL-POPUP') {
+            const id = target.id;
+            const triggers = Array.from(this.el.querySelectorAll(`[bal-popup="${id}"]`));
+            if (event.detail === true) {
+                this.onPopupOpen(triggers);
+                const isTouchMetaTopButtonClicked = triggers.some(triggerEl => triggerEl.classList.contains('bal-nav__popup--touch-top'));
+                if (isTouchMetaTopButtonClicked) {
+                    this.closeFlyout();
+                }
+            }
+            else {
+                this.onPopupClose(triggers);
+            }
+        }
+    }
+    async clickOnOutside(ev) {
+        var _a, _b, _c, _d, _e;
+        if (this.isDesktop) {
+            if (this.hasRenderedWithFlyoutActive) {
+                const targetIsInMetaBar = (_b = (_a = this.metaBarEl) === null || _a === void 0 ? void 0 : _a.querySelector('.bal-nav-meta-bar__container')) === null || _b === void 0 ? void 0 : _b.contains(ev.target);
+                const targetIsInMenuBar = (_d = (_c = this.menuBarEl) === null || _c === void 0 ? void 0 : _c.querySelector('.bal-nav-menu-bar__container')) === null || _d === void 0 ? void 0 : _d.contains(ev.target);
+                if (!targetIsInMetaBar && !targetIsInMenuBar) {
+                    this.closeFlyout();
+                    const tabs = (_e = this.menuBarEl) === null || _e === void 0 ? void 0 : _e.querySelector('.bal-tabs');
+                    tabs.closeAccordion();
+                }
+            }
+        }
+    }
+    mutationListener() {
+        this.onOptionChange();
+    }
+    breakpointListener(breakpoints) {
+        if (this.isTouch !== breakpoints.touch) {
+            this.isTouch = breakpoints.touch;
+            this.isDesktop = breakpoints.desktop;
+            this.closeAllPopups();
+            this.closeFlyout();
+        }
+        if (this.isTouch) {
+            this.updateTabs();
+        }
+    }
+    linkItemClickListener(item) {
+        if (item && item.toJson) {
+            this.balNavItemClick.emit(item.toJson());
+        }
+    }
+    accordionClickListener(item) {
+        if (this.isTouch && item) {
+            this.updateActiveItem(item);
+        }
+    }
+    /**
+     * @internal define config for the component
+     */
+    async configChanged(state) {
+        this.language = state.language;
+        this.region = state.region;
+    }
+    /**
+     * GETTERS
+     * ------------------------------------------------------
+     */
+    get activeMenuLinkItems() {
+        const foundLinkItem = this.linkItems.find(item => item.value === this.activeMetaLinkValue);
+        if (foundLinkItem) {
+            return foundLinkItem.mainLinkItems;
+        }
+        return [];
+    }
+    get activeMenuLinkItem() {
+        const foundLinkItem = this.activeMenuLinkItems.find(item => item.value === this.activeMenuLinkValue);
+        return foundLinkItem ? foundLinkItem : undefined;
+    }
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    toggleFlyout() {
+        if (this.isFlyoutActive) {
+            this.closeFlyout();
+        }
+        else {
+            this.openFlyout();
+        }
+    }
+    closeFlyout() {
+        this.isFlyoutActive = false;
+    }
+    openFlyout() {
+        this.isFlyoutActive = true;
+    }
+    async updateActiveItem(item) {
+        if ('NavMetaLinkItem' === item.type) {
+            this.activeMetaLinkValue = this.activeMetaLinkValue === item.value ? undefined : item.value;
+            this.activeMenuLinkValue = undefined;
+        }
+        if ('NavMenuLinkItem' === item.type) {
+            this.activeMenuLinkValue = this.activeMenuLinkValue === item.value ? undefined : item.value;
+        }
+        await waitForComponent(this.el);
+        await waitAfterIdleCallback();
+        const elementToScroll = this.el.querySelector(`#${item.id}`);
+        if (elementToScroll) {
+            elementToScroll.scrollIntoView({
+                behavior: 'smooth',
+            });
+            // location.href = '#'
+            // location.href = `#${item.id}`
+        }
+    }
+    updateTabs() {
+        var _a, _b;
+        const previousActiveMetaLinkValue = this.activeMetaLinkValue;
+        const newActiveMetaLinkValue = ((_a = this.linkItems.find(item => item.active)) === null || _a === void 0 ? void 0 : _a.value) || previousActiveMetaLinkValue;
+        if (previousActiveMetaLinkValue !== newActiveMetaLinkValue) {
+            this.activeMetaLinkValue = newActiveMetaLinkValue;
+        }
+        const previousActiveMenuLinkValue = this.activeMenuLinkValue;
+        const newActiveMenuLinkValue = ((_b = this.activeMenuLinkItems.find(item => item.active)) === null || _b === void 0 ? void 0 : _b.value) || previousActiveMenuLinkValue;
+        if (previousActiveMenuLinkValue !== newActiveMenuLinkValue) {
+            this.activeMenuLinkValue = newActiveMenuLinkValue;
+        }
+    }
+    closeAllPopups() {
+        const popups = Array.from(this.el.querySelectorAll('bal-popup'));
+        popups.forEach(popup => popup.dismiss());
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const block = BEM.block('nav');
+        const flyoutBlock = block.element('flyout');
+        this.hasRenderedWithFlyoutActive = this.isFlyoutActive;
+        return (h(Host, { id: this.navId, class: Object.assign({}, block.class()) }, h("div", { class: {
+                'bal-nav-meta-bar-transform': true,
+                'bal-nav-meta-bar-transform-touch': this.isTouch,
+            } }, this.isDesktop ? (h("bal-nav-meta-bar", { variant: "primary", size: "small", position: "sticky-top", ref: metaBarEl => (this.metaBarEl = metaBarEl) }, h("bal-stack", { space: "auto" }, this.linkItems.length > 1 ? (h("bal-tabs", { spaceless: true, inverted: true, context: "meta", value: this.activeMetaLinkValue, onBalChange: ev => this.onMetaBarTabChange(ev) }, this.linkItems.map(item => item.render()))) : (h("span", null)), h("bal-stack", { id: "bal-nav__meta-buttons", space: "x-small", "fit-content": true }, this.metaButtons.map(button => button.renderAtMetaBar()))))) : (''), this.isDesktop ? (h("bal-nav-menu-bar", { position: "fixed-top", ref: menuBarEl => (this.menuBarEl = menuBarEl) }, h("bal-stack", { space: "auto", "space-row": "none", "use-wrap": true }, this.renderLogo(), h("bal-tabs", { context: "navigation", accordion: true, spaceless: true, value: this.activeMenuLinkValue }, (_a = this.linkItems
+            .find(item => item.value === this.activeMetaLinkValue)) === null || _a === void 0 ? void 0 : _a.mainLinkItems.map(item => item.render({
+            onClick: () => this.onMenuBarTabChange(item.value),
+        })))), this.isFlyoutActive ? (h("bal-nav-menu-flyout", null, h("bal-nav-link", { role: "listitem", variant: "overview", href: (_c = (_b = this.activeMenuLinkItem) === null || _b === void 0 ? void 0 : _b.overviewLink) === null || _c === void 0 ? void 0 : _c.href, target: (_e = (_d = this.activeMenuLinkItem) === null || _d === void 0 ? void 0 : _d.overviewLink) === null || _e === void 0 ? void 0 : _e.target, onClick: () => { var _a; return this.linkItemClickListener((_a = this.activeMenuLinkItem) === null || _a === void 0 ? void 0 : _a.overviewLink); } }, (_g = (_f = this.activeMenuLinkItem) === null || _f === void 0 ? void 0 : _f.overviewLink) === null || _g === void 0 ? void 0 :
+            _g.label, ' ', ((_j = (_h = this.activeMenuLinkItem) === null || _h === void 0 ? void 0 : _h.overviewLink) === null || _j === void 0 ? void 0 : _j.label) ? '➞' : ''), this.renderGridLinks(this.activeMenuLinkItem))) : (''))) : (''), h("div", null, h("slot", null))), this.isTouch ? (h("bal-nav-meta-bar", { variant: "white", size: "normal" }, h("bal-stack", { space: "auto" }, this.renderLogo(), h("bal-stack", { space: "x-small", "fit-content": true }, this.metaButtons.map(button => button.renderAtTouchTopMetaBar()), h("bal-button", { square: true, color: this.isFlyoutActive ? 'primary' : 'light', icon: this.isFlyoutActive ? 'close' : 'menu-bars', "aria-label": this.isFlyoutActive ? i18nNavBars[this.language].close : i18nNavBars[this.language].open, onClick: ev => this.onTouchToggleFlyout(ev) }))))) : (''), this.isTouch ? (h("div", { class: Object.assign(Object.assign({}, flyoutBlock.class()), flyoutBlock.modifier('visible').class(this.isFlyoutActive)) }, h("nav", { class: Object.assign({}, flyoutBlock.element('container').class()) }, h("ul", { class: Object.assign({}, block.element('mobile-meta-list').class()) }, this.linkItems.map(item => item.renderTouch({
+            activeMetaLinkValue: this.activeMetaLinkValue,
+            activeMenuLinkValue: this.activeMenuLinkValue,
+        })))))) : (''), this.isTouch && this.isFlyoutActive ? (h("bal-nav-meta-bar", { variant: "grey", size: "normal" }, h("bal-stack", { space: "x-small", align: "center" }, this.metaButtons.map(button => button.renderAtTouchBottomMetaBar())))) : ('')));
+    }
+    renderGridLinks(linkItem) {
+        var _a, _b;
+        if (!linkItem) {
+            return '';
+        }
+        return (h("bal-nav-link-grid", null, h("bal-nav-link-grid-col", null, (_a = linkItem.sectionLinkItems) === null || _a === void 0 ? void 0 : _a.map(itemGroup => itemGroup.render())), h("bal-nav-link-grid-col", { "static-col": true }, (_b = linkItem.serviceLinkItems) === null || _b === void 0 ? void 0 : _b.map(itemGroup => itemGroup.render()))));
+    }
+    renderTouchMenuAccordions(metaItem) {
+        return (h("bal-list", { "accordion-one-level": true, class: "pt-xxx-small pb-normal" }, metaItem.mainLinkItems.map(menuItem => {
+            var _a, _b, _c;
+            return menuItem.isLink ? (h("bal-list-item", { "sub-accordion-item": true, href: menuItem.href, target: menuItem.target }, h("bal-list-item-content", null, h("bal-list-item-title", { "visual-level": "medium", level: "span" }, menuItem.label)))) : (h("bal-list-item", { accordion: true, "sub-accordion-item": true }, h("bal-list-item-accordion-head", { icon: "nav-go-down", "accordion-open": menuItem.active }, h("bal-list-item-content", null, h("bal-list-item-title", { "visual-level": "medium", level: "span" }, menuItem.label))), h("bal-list-item-accordion-body", null, h("div", { style: { width: '100%' } }, h("bal-nav-link", { role: "listitem", variant: "overview", href: (_a = menuItem.overviewLink) === null || _a === void 0 ? void 0 : _a.href, target: (_b = menuItem.overviewLink) === null || _b === void 0 ? void 0 : _b.target, onClick: () => this.linkItemClickListener(menuItem.overviewLink) }, (_c = menuItem.overviewLink) === null || _c === void 0 ? void 0 : _c.label), h("div", { class: "pt-normal" }, this.renderGridLinks(menuItem))))));
+        })));
+    }
+    renderLogo() {
+        var _a, _b, _c, _d, _e, _f;
+        const Link = ((_a = this.logo) === null || _a === void 0 ? void 0 : _a.href) ? 'a' : ((_b = this.logo) === null || _b === void 0 ? void 0 : _b.clickable) ? 'button' : 'div';
+        return (h(Link, { class: "bal-nav__logo", "aria-label": (_c = this.logo) === null || _c === void 0 ? void 0 : _c.ariaLabel, title: (_d = this.logo) === null || _d === void 0 ? void 0 : _d.htmlTitle, href: (_e = this.logo) === null || _e === void 0 ? void 0 : _e.href, target: (_f = this.logo) === null || _f === void 0 ? void 0 : _f.target, onClick: () => {
+                var _a, _b;
+                return this.balNavItemClick.emit({
+                    value: 'logo',
+                    label: 'Logo',
+                    href: (_a = this.logo) === null || _a === void 0 ? void 0 : _a.href,
+                    target: (_b = this.logo) === null || _b === void 0 ? void 0 : _b.target,
+                });
+            } }, h("bal-logo", { animated: true })));
+    }
+    static get is() { return "bal-nav"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bal-nav.sass"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bal-nav.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "logo": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BalProps.BalNavLogoLink",
+                    "resolved": "BalNavLogoLink",
+                    "references": {
+                        "BalProps": {
+                            "location": "global",
+                            "id": "global::BalProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Link level structure."
+                }
+            },
+            "options": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BalProps.BalNavOptions",
+                    "resolved": "BalNavMetaLinkItem[]",
+                    "references": {
+                        "BalProps": {
+                            "location": "global",
+                            "id": "global::BalProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Link level structure."
+                },
+                "defaultValue": "[]"
+            },
+            "buttons": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BalProps.BalNavMetaButtons",
+                    "resolved": "BalNavMetaButton[]",
+                    "references": {
+                        "BalProps": {
+                            "location": "global",
+                            "id": "global::BalProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Link level structure."
+                },
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isTouch": {},
+            "isDesktop": {},
+            "language": {},
+            "region": {},
+            "isFlyoutActive": {},
+            "activeMetaLinkValue": {},
+            "activeMenuLinkValue": {},
+            "linkItems": {},
+            "metaButtons": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "balNavItemClick",
+                "name": "balNavItemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a nav link item is clicked. This event can be used to\nadd data tracking"
+                },
+                "complexType": {
+                    "original": "BalEvents.BalNavItemClickDetail",
+                    "resolved": "BalNavClickedItem",
+                    "references": {
+                        "BalEvents": {
+                            "location": "global",
+                            "id": "global::BalEvents"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "configChanged": {
+                "complexType": {
+                    "signature": "(state: BalConfigState) => Promise<void>",
+                    "parameters": [{
+                            "name": "state",
+                            "type": "BalConfigState",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "BalConfigState": {
+                            "location": "import",
+                            "path": "../../utils/config",
+                            "id": "src/utils/config/index.ts::BalConfigState"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "define config for the component"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "options",
+                "methodName": "optionChanged"
+            }, {
+                "propName": "buttons",
+                "methodName": "buttonChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "balChange",
+                "method": "listenToPopupChanges",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "clickOnOutside",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}
+__decorate([
+    Logger('bal-nav'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], NavMetaBar.prototype, "createLogger", null);
+__decorate([
+    ListenToMutation({ tags: ['bal-popup'] }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NavMetaBar.prototype, "mutationListener", null);
+__decorate([
+    ListenToBreakpoints(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], NavMetaBar.prototype, "breakpointListener", null);
+__decorate([
+    ListenToConfig(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], NavMetaBar.prototype, "configChanged", null);
+let NavIds = 0;

package/dist/collection/components/bal-nav/bal-nav.types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/bal-nav/components/accordion-button.js

@@ -0,0 +1,6 @@
+import { h } from "@stencil/core";
+import { BEM } from "../../../utils/bem";
+export const AccordionButton = ({ id, label, level, open, link, href, target, onClick, }) => {
+    const block = BEM.block('nav');
+    return link ? (h("a", { id: id, class: Object.assign({}, block.element(`mobile-${level}-item`).class()), href: href, target: target, onClick: ev => onClick(ev) }, h("span", null, label))) : (h("button", { id: id, class: Object.assign({}, block.element(`mobile-${level}-item`).class()), onClick: ev => onClick(ev) }, h("span", null, label), h("bal-icon", { name: "nav-go-down", size: "small", turn: open })));
+};

package/dist/collection/components/bal-nav/components/overview-link.js

@@ -0,0 +1,9 @@
+import { h } from "@stencil/core";
+import { BEM } from "../../../utils/bem";
+export const OverviewLink = ({ item, isMenu, onClick }) => {
+    const block = BEM.block('nav');
+    if (!item) {
+        return '';
+    }
+    return (h("a", { class: Object.assign(Object.assign({}, block.element('mobile-overview-link').class()), block.element('mobile-overview-link').modifier('menu').class(!!isMenu)), href: item.href, target: item.target, onClick: ev => onClick(ev) }, item.label, " ", item.label ? '➞' : ''));
+};

package/dist/collection/components/bal-nav/components/section-list.js

@@ -0,0 +1,15 @@
+import { h } from "@stencil/core";
+import { BEM } from "../../../utils/bem";
+export const SectionList = ({ items }) => {
+    const block = BEM.block('nav');
+    const hasNoItems = !(items && items.length > 0);
+    if (hasNoItems) {
+        return '';
+    }
+    return (h("ul", { class: Object.assign({}, block.element('mobile-section-list').class()) }, items === null || items === void 0 ? void 0 : items.map(itemGroup => {
+        var _a;
+        return (h("li", null, h("a", { class: Object.assign({}, block.element('mobile-section-item').class()), href: itemGroup.href, target: itemGroup.target }, itemGroup.label), itemGroup.linkItems && itemGroup.linkItems.length > 0 ? (h("ul", { class: Object.assign({}, block.element('mobile-links-list').class()) }, (_a = itemGroup.linkItems) === null || _a === void 0 ? void 0 : _a.map(item => {
+            return (h("li", null, h("a", { class: Object.assign({}, block.element('mobile-links').class()), href: item.href, target: item.target }, item.label)));
+        }))) : ('')));
+    })));
+};

package/dist/collection/components/bal-nav/components/service-list.js

@@ -0,0 +1,15 @@
+import { h } from "@stencil/core";
+import { BEM } from "../../../utils/bem";
+export const ServiceList = ({ items }) => {
+    const block = BEM.block('nav');
+    const hasNoItems = !(items && items.length > 0);
+    if (hasNoItems) {
+        return '';
+    }
+    return (h("ul", { class: Object.assign({}, block.element('mobile-section-list').class()) }, items === null || items === void 0 ? void 0 : items.map(serviceGroup => {
+        var _a;
+        return (h("li", null, h("a", { class: Object.assign({}, block.element('mobile-section-item').class()), href: serviceGroup.href, target: serviceGroup.target }, serviceGroup.label), h("ul", { class: Object.assign({}, block.element('mobile-links-list').class()) }, (_a = serviceGroup.linkItems) === null || _a === void 0 ? void 0 : _a.map(item => {
+            return (h("li", null, h("a", { class: Object.assign({}, block.element('mobile-links').class()), href: item.href, target: item.target }, item.label)));
+        }))));
+    })));
+};

package/dist/collection/components/bal-nav/models/bal-nav-link-item.js

@@ -0,0 +1,53 @@
+import { h } from "@stencil/core";
+import { BEM } from "../../../utils/bem";
+export class NavLinkItem {
+    constructor(item, observer) {
+        this.observer = observer;
+        this.clickable = false;
+        this.active = false;
+        this.data = undefined;
+        this.label = item.label;
+        this.id = `nav-link-item-${NavLinkItemIDs++}`;
+        this.value = item.value || this.id;
+        this.href = item.href;
+        this.target = item.target;
+        this.active = !!item.active;
+        this.clickable = !!item.clickable;
+        this.data = item.data;
+        this.onClick = (ev) => {
+            this.observer.linkItemClickListener(this);
+            if (item.onClick) {
+                item.onClick(ev);
+            }
+        };
+        this.onAccordionClick = (ev) => {
+            this.observer.accordionClickListener(this);
+            if (item.onAccordionClick) {
+                item.onAccordionClick(ev);
+            }
+        };
+    }
+    get type() {
+        return 'NavLinkItem';
+    }
+    get isLink() {
+        return this.href !== undefined && this.href !== null && this.href !== '';
+    }
+    toJson() {
+        return {
+            label: this.label,
+            value: this.value,
+            href: this.href,
+            target: this.target,
+            data: this.data,
+        };
+    }
+    renderTouch(_context) {
+        const block = BEM.block('nav');
+        return (h("li", null, h("a", { id: this.id, class: Object.assign(Object.assign(Object.assign({}, block.element('mobile-links').class()), block.element('mobile-links').modifier('selected').class(this.active)), block.element('mobile-links').modifier('clickable').class(this.clickable)), href: this.href, target: this.target, onClick: ev => this.onClick(ev) }, this.label)));
+    }
+    render(_context) {
+        return (h("bal-nav-link", { role: "listitem", href: this.href, target: this.target, clickable: this.clickable, selected: this.active, onClick: ev => this.onClick(ev) }, this.label));
+    }
+}
+let NavLinkItemIDs = 0;

package/dist/collection/components/bal-nav/models/bal-nav-menu-link-item.js

@@ -0,0 +1,42 @@
+import { h } from "@stencil/core";
+import { NavLinkItem } from "./bal-nav-link-item";
+import { NavSectionLinkItem } from "./bal-nav-section-link-item";
+import { NavServiceLinkItem } from "./bal-nav-service-link-item";
+import { AccordionButton } from "../components/accordion-button";
+import { OverviewLink } from "../components/overview-link";
+import { BEM } from "../../../utils/bem";
+export class NavMenuLinkItem extends NavLinkItem {
+    constructor(item, observer) {
+        super(item, observer);
+        this.sectionLinkItems = [];
+        this.serviceLinkItems = [];
+        this.id = `nav-menu-link-item-${NavMenuLinkItemIDs++}`;
+        this.value = item.value || this.id;
+        this.sectionLinkItems = (item.sectionLinkItems || []).map(item => new NavSectionLinkItem(item, observer));
+        this.serviceLinkItems = (item.serviceLinkItems || []).map(item => new NavServiceLinkItem(item, observer));
+        this.overviewLink = item.overviewLink ? new NavLinkItem(item.overviewLink, observer) : undefined;
+    }
+    get type() {
+        return 'NavMenuLinkItem';
+    }
+    renderTouch(context) {
+        const block = BEM.block('nav');
+        const hasSectionLinkItems = this.sectionLinkItems && this.sectionLinkItems.length > 0;
+        const hasServiceLinkItems = this.serviceLinkItems && this.serviceLinkItems.length > 0;
+        const isSelected = (context === null || context === void 0 ? void 0 : context.activeMenuLinkValue) === this.value;
+        return (h("li", null, h(AccordionButton, { id: this.id, level: "menu", label: this.label, href: this.href, target: this.target, link: hasSectionLinkItems || hasServiceLinkItems ? false : this.isLink, open: isSelected, onClick: ev => this.onAccordionClick(ev) }), isSelected ? (h(OverviewLink, { item: this.overviewLink, onClick: ev => this.onClick(ev), isMenu: true })) : (''), isSelected && hasSectionLinkItems ? (h("ul", { class: Object.assign({}, block.element('mobile-section-list').class()) }, this.sectionLinkItems.map(item => item.renderTouch()))) : (''), isSelected && hasServiceLinkItems ? (h("ul", { class: Object.assign({}, block.element('mobile-service-list').class()) }, this.serviceLinkItems.map(item => item.renderTouch()))) : ('')));
+    }
+    render(context) {
+        const hasChildren = this.sectionLinkItems.length > 0 || this.serviceLinkItems.length > 0;
+        if (!hasChildren && this.isLink) {
+            return h("bal-tab-item", { label: this.label, value: this.value, href: this.href, target: this.target });
+        }
+        return (h("bal-tab-item", { label: this.label, value: this.value, onBalNavigate: ev => {
+                context === null || context === void 0 ? void 0 : context.onClick();
+                if (this.onClick) {
+                    this.onClick(ev.detail);
+                }
+            } }));
+    }
+}
+let NavMenuLinkItemIDs = 0;