@db-ux/wc-core-components 4.12.0 → 4.13.0-shell-f221975

package/dist/cjs/db-header.cjs.entry.js

@@ -1,145 +0,0 @@
-'use strict';
-
-var index = require('./index-C313bRqJ.js');
-var constants = require('./constants-bMY2_d8A.js');
-var index$1 = require('./index-spuu3sXz.js');
-var navigation = require('./navigation-Bah882nU.js');
-require('./floating-components-DlstoCKH.js');
-
-const DBHeader = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.toggle = index.createEvent(this, "toggle");
-        this.initialized = false;
-        this.forcedToMobile = false;
-        this.observer = undefined;
-    }
-    handleToggle(event) {
-        if (event && event.stopPropagation) {
-            event.stopPropagation();
-        }
-        const open = !index$1.getBoolean(this.drawerOpen, "drawerOpen");
-        if (this.toggle) {
-            this.toggle.emit(open);
-        }
-    }
-    handleNavigationItemClick(event) {
-        if (navigation.isEventTargetNavigationItem(event)) {
-            this.handleToggle();
-        }
-    }
-    setupObserver(element) {
-        if (!element)
-            return;
-        const parent = element.closest("db-header");
-        if (!parent || this.observer)
-            return;
-        this.observer = new MutationObserver((mutations) => {
-            if (mutations.some((mutation) => {
-                var _a;
-                const attr = mutation.target.attributes.getNamedItem((_a = mutation.attributeName) !== null && _a !== void 0 ? _a : "");
-                return (attr === null || attr === void 0 ? void 0 : attr.value) !== mutation.oldValue;
-            })) {
-                this.enableAttributePassing(element, "db-header");
-            }
-        });
-        this.observer.observe(parent, {
-            attributes: true,
-            attributeOldValue: true,
-        });
-    }
-    /**
-     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
-     * @param element  the ref for the component
-     * @param customElementSelector  the custom element like `my-component`
-     */
-    enableAttributePassing(element, customElementSelector) {
-        const parent = element === null || element === void 0 ? void 0 : element.closest(customElementSelector);
-        if (element && parent) {
-            const attributes = parent.attributes;
-            for (let i = 0; i < attributes.length; i++) {
-                const attr = attributes.item(i);
-                if (attr && attr.name !== 'data-density' &&
-                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
-                    if (attr.value) {
-                        element.setAttribute(attr.name, attr.value);
-                    }
-                    else {
-                        element.removeAttribute(attr.name);
-                    }
-                    parent.removeAttribute(attr.name);
-                }
-                else if (attr && ["style"].includes(attr.name)) {
-                    element.setAttribute(attr.name, attr.value);
-                    parent.removeAttribute(attr.name);
-                }
-                else if (attr && attr.name === "class") {
-                    const isWebComponent = attr.value.includes("hydrated");
-                    const value = attr.value.replace("hydrated", "").trim();
-                    const currentClass = element.getAttribute("class");
-                    element.setAttribute(attr.name, `${currentClass ? currentClass : ""}${value ? ` ${value}` : ""}`);
-                    if (isWebComponent) {
-                        // Stencil is using this class for lazy loading component
-                        parent.setAttribute("class", "hydrated");
-                    }
-                    else {
-                        parent.removeAttribute(attr.name);
-                    }
-                }
-            }
-        }
-    }
-    watch0Fn() {
-        if (this.initialized && this._ref && this.forceMobile) {
-            // Adds this attribute to the header to enable all styling which would have
-            // @media screen and (min-width: $db-screens-m) to show mobile navigation on a desktop device
-            index$1.addAttributeToChildren(this._ref, {
-                key: "data-force-mobile",
-                value: "true",
-            });
-            this.forcedToMobile = true;
-        }
-    }
-    watch0() {
-        this.watch0Fn();
-    }
-    componentDidLoad() {
-        if (typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect) {
-            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
-            if (connectedElement) {
-                connectedElement.remove();
-            }
-        }
-        this.enableAttributePassing(this._ref, "db-header");
-        const onMountHook_0 = () => {
-            this.initialized = true;
-        };
-        onMountHook_0();
-        const onMountHook_1 = () => {
-            this.setupObserver(this._ref);
-        };
-        onMountHook_1();
-        this.watch0Fn();
-    }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
-    }
-    render() {
-        var _a, _b, _c;
-        return (index.h("header", { key: 'aeeac33c4b9db2b9749b24ccca840aa03bac81df', class: index$1.cls("db-header", this.className), ref: (el) => {
-                this._ref = el;
-            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-width": this.width, "data-on-forcing-mobile": this.forceMobile && !this.forcedToMobile }, index.h("div", { key: '1078f960dbc6ed24664b5ff5c23c3524d725b822', class: "db-header-meta-navigation" }, index.h("slot", { key: 'c55739d8ae17254c2aa457795a31017a07ab5a88', name: "metaNavigation" })), index.h("div", { key: '6e82ab28439854dec6bcc6dcf9ed3fa36c6f5e69', class: "db-header-navigation-bar" }, index.h("div", { key: '7e991f8cdee7c1767ea3aefdd9a01c662fb5d178', class: "db-header-brand-container" }, index.h("slot", { key: 'a1e2aea32b28520095612367e97a8b955f93bd96', name: "brand" })), index.h("div", { key: '273f17e3b8594dad83d8fbad021008405d865176', class: "db-header-navigation-container" }, index.h("div", { key: '8bd9a08a0f3cf8083d238963c2cc3715edf1d5a4', class: "db-header-navigation" }, index.h("slot", { key: 'abfd95ef152c34e53806c114f243ff26b63a9bbe' })), index.h("div", { key: '4a61c6d86a0362913b45a432095a621ca22d1268', class: "db-header-primary-action" }, index.h("slot", { key: '3b79bfc6d85a0a39fcb3ca2550be0a2a36b6a682', name: "primaryAction" }))), index.h("div", { key: '1c506669010a04ae260b692811ed17d76a3ecc03', class: "db-header-action-container" }, index.h("div", { key: 'aa522f5b0010a1747a1bc7f550c3700a0bad4e8a', class: "db-header-burger-menu-container" }, index.h("db-button", { key: '2223a3865ed4ea94e3a3849e73e4113e1db0fb66', icon: "menu", variant: "ghost", noText: true, onClick: () => this.handleToggle() }, (_c = this.burgerMenuLabel) !== null && _c !== void 0 ? _c : constants.DEFAULT_BURGER_MENU)), index.h("div", { key: '86f41a6b354de871ac3f4d9cf8b7205c699ba189', class: "db-header-secondary-action" }, index.h("slot", { key: '43e443323eb93871bb19cbea2222da6eb8ebd0e8', name: "secondaryAction" })))), index.h("db-drawer", { key: '8a8474e8a7f54d827f5844f76dea9ce44ef565e0', class: "db-header-drawer", spacing: "small", rounded: true, closeButtonId: this.closeButtonId, closeButtonText: this.closeButtonText, open: index$1.getBoolean(this.drawerOpen), onClose: () => this.handleToggle() }, index.h("div", { key: '21f360dc09f2d53aea13fde8b13c1ffb3781f558', class: "db-header-drawer-navigation" }, index.h("div", { key: '0c567049a2c1788decb48b10b0115348d2f3b406', class: "db-header-navigation", onClick: (event) => this.handleNavigationItemClick(event) }, index.h("slot", { key: '1403d518f5f63eca522ccecaf5a4b5f153649a33' })), index.h("div", { key: 'c624cf3f4ea7e89a87e430ef96b34fa4ce6d4236', class: "db-header-meta-navigation" }, index.h("slot", { key: '4fde72b2d7d8c098a8a09160e8f36ca2ddbd0702', name: "metaNavigation" }))), index.h("div", { key: '91d6fc1b39b3cfc39b8563956971f56a168da218', class: "db-header-secondary-action" }, index.h("slot", { key: 'a9745f3cf4c91db6a3cd0bc4e4bf904b8bc7a2aa', name: "secondaryAction" })))));
-    }
-    get rootElement() { return index.getElement(this); }
-    static get watchers() { return {
-        "initialized": [{
-                "watch0": 0
-            }],
-        "_ref": [{
-                "watch0": 0
-            }]
-    }; }
-};
-
-exports.db_header = DBHeader;

package/dist/cjs/db-navigation-item.cjs.entry.js

@@ -1,182 +0,0 @@
-'use strict';
-
-var index = require('./index-C313bRqJ.js');
-var constants = require('./constants-bMY2_d8A.js');
-var index$1 = require('./index-spuu3sXz.js');
-var navigation = require('./navigation-Bah882nU.js');
-require('./floating-components-DlstoCKH.js');
-
-const DBNavigationItem = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.click = index.createEvent(this, "click");
-        this.initialized = false;
-        this.hasAreaPopup = false;
-        this.hasSubNavigation = true;
-        this.isSubNavigationExpanded = false;
-        this.autoClose = false;
-        this.navigationItemSafeTriangle = undefined;
-        this.subNavigationId = undefined;
-        this.subNavigationToggleId = undefined;
-        this.observer = undefined;
-    }
-    handleNavigationItemClick(event) {
-        var _a;
-        if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.nodeName) === "A") {
-            this.autoClose = true;
-            void index$1.delay(() => {
-                this.autoClose = false;
-            }, 1000);
-        }
-    }
-    handleClick(event) {
-        if (this.click) {
-            event.stopPropagation();
-            this.click.emit(event);
-        }
-        if (this.hasAreaPopup) {
-            this.isSubNavigationExpanded = true;
-        }
-    }
-    handleBackClick(event) {
-        event.stopPropagation();
-        this.isSubNavigationExpanded = false;
-    }
-    setupObserver(element) {
-        if (!element)
-            return;
-        const parent = element.closest("db-navigation-item");
-        if (!parent || this.observer)
-            return;
-        this.observer = new MutationObserver((mutations) => {
-            if (mutations.some((mutation) => {
-                var _a;
-                const attr = mutation.target.attributes.getNamedItem((_a = mutation.attributeName) !== null && _a !== void 0 ? _a : "");
-                return (attr === null || attr === void 0 ? void 0 : attr.value) !== mutation.oldValue;
-            })) {
-                this.enableAttributePassing(element, "db-navigation-item");
-            }
-        });
-        this.observer.observe(parent, {
-            attributes: true,
-            attributeOldValue: true,
-        });
-    }
-    /**
-     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
-     * @param element  the ref for the component
-     * @param customElementSelector  the custom element like `my-component`
-     */
-    enableAttributePassing(element, customElementSelector) {
-        const parent = element === null || element === void 0 ? void 0 : element.closest(customElementSelector);
-        if (element && parent) {
-            const attributes = parent.attributes;
-            for (let i = 0; i < attributes.length; i++) {
-                const attr = attributes.item(i);
-                if (attr && attr.name !== 'data-density' &&
-                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
-                    if (attr.value) {
-                        element.setAttribute(attr.name, attr.value);
-                    }
-                    else {
-                        element.removeAttribute(attr.name);
-                    }
-                    parent.removeAttribute(attr.name);
-                }
-                else if (attr && ["style"].includes(attr.name)) {
-                    element.setAttribute(attr.name, attr.value);
-                    parent.removeAttribute(attr.name);
-                }
-                else if (attr && attr.name === "class") {
-                    const isWebComponent = attr.value.includes("hydrated");
-                    const value = attr.value.replace("hydrated", "").trim();
-                    const currentClass = element.getAttribute("class");
-                    element.setAttribute(attr.name, `${currentClass ? currentClass : ""}${value ? ` ${value}` : ""}`);
-                    if (isWebComponent) {
-                        // Stencil is using this class for lazy loading component
-                        parent.setAttribute("class", "hydrated");
-                    }
-                    else {
-                        parent.removeAttribute(attr.name);
-                    }
-                }
-            }
-        }
-    }
-    watch0Fn() {
-        if (this.subNavigationExpanded !== undefined) {
-            this.isSubNavigationExpanded = !!index$1.getBoolean(this.subNavigationExpanded, "subNavigationExpanded");
-        }
-    }
-    watch0() {
-        this.watch0Fn();
-    }
-    watch1Fn() {
-        var _a;
-        if (this.initialized && this._ref) {
-            const subNavigationSlot = this._ref.querySelector("menu");
-            if (subNavigationSlot) {
-                if (((_a = subNavigationSlot.children) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                    this.hasAreaPopup = true;
-                    if (!this.navigationItemSafeTriangle) {
-                        this.navigationItemSafeTriangle = new navigation.NavigationItemSafeTriangle(this._ref, subNavigationSlot);
-                    }
-                }
-                else {
-                    this.hasSubNavigation = false;
-                }
-            }
-        }
-    }
-    watch1() {
-        this.watch1Fn();
-    }
-    componentDidLoad() {
-        if (typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect) {
-            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
-            if (connectedElement) {
-                connectedElement.remove();
-            }
-        }
-        this.enableAttributePassing(this._ref, "db-navigation-item");
-        const onMountHook_0 = () => {
-            var _a;
-            this.initialized = true;
-            const subNavId = `sub-nav-${(_a = this.id) !== null && _a !== void 0 ? _a : index$1.uuid()}`;
-            this.subNavigationId = subNavId;
-            this.subNavigationToggleId = `${subNavId}-toggle`;
-        };
-        onMountHook_0();
-        const onMountHook_1 = () => {
-            this.setupObserver(this._ref);
-        };
-        onMountHook_1();
-        this.watch0Fn();
-        this.watch1Fn();
-    }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
-    }
-    render() {
-        var _a, _b, _c;
-        return (index.h("li", { key: 'c7821549626fe4b55c4bc6907832c972723bc174', class: index$1.cls("db-navigation-item", this.className), ref: (el) => {
-                this._ref = el;
-            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, onMouseOver: () => { var _a; return (_a = this.navigationItemSafeTriangle) === null || _a === void 0 ? void 0 : _a.enableFollow(); }, onMouseLeave: () => { var _a; return (_a = this.navigationItemSafeTriangle) === null || _a === void 0 ? void 0 : _a.disableFollow(); }, onMouseMove: (event) => { var _a; return (_a = this.navigationItemSafeTriangle) === null || _a === void 0 ? void 0 : _a.followByMouseEvent(event); }, "data-width": this.width, "data-icon": this.icon, "data-show-icon": index$1.getBooleanAsString(this.showIcon, "showIcon"), "data-active": this.active, "data-wrap": index$1.getBooleanAsString(this.wrap, "wrap"), "aria-disabled": index$1.getBooleanAsString(this.disabled, "disabled") }, !index$1.getBoolean(this.hideSubNavigation, "hideSubNavigation") &&
-            this.hasSubNavigation ? (index.h(index.Fragment, null, index.h("button", { class: "db-navigation-item-expand-button", id: this.subNavigationToggleId, "aria-haspopup": this.hasAreaPopup ? "true" : undefined, "aria-expanded": this.isSubNavigationExpanded, "aria-controls": this.subNavigationId, disabled: index$1.getBoolean(this.disabled, "disabled"), onClick: (event) => this.handleClick(event) }, this.text ? this.text : index.h("slot", { name: "expandButton" })), index.h("menu", { class: "db-sub-navigation", id: this.subNavigationId, "aria-labelledby": this.subNavigationToggleId, "data-force-close": this.autoClose, onClick: (event) => this.handleNavigationItemClick(event) }, this.hasAreaPopup ? (index.h("div", { class: "db-mobile-navigation-back" }, index.h("db-button", { icon: "arrow_left", variant: "ghost", id: this.backButtonId, onClick: (event) => this.handleBackClick(event) }, (_c = this.backButtonText) !== null && _c !== void 0 ? _c : constants.DEFAULT_BACK))) : null, index.h("slot", { name: "subNavigation" })))) : this.text ? (this.text) : (index.h("slot", null))));
-    }
-    get rootElement() { return index.getElement(this); }
-    static get watchers() { return {
-        "subNavigationExpanded": [{
-                "watch0": 0
-            }],
-        "initialized": [{
-                "watch1": 0
-            }],
-        "_ref": [{
-                "watch1": 0
-            }]
-    }; }
-};
-
-exports.db_navigation_item = DBNavigationItem;

package/dist/cjs/navigation-Bah882nU.js

@@ -1,138 +0,0 @@
-'use strict';
-
-var floatingComponents = require('./floating-components-DlstoCKH.js');
-
-const isEventTargetNavigationItem = (event) => {
-    var _a, _b;
-    const { target } = event;
-    return Boolean(!((_a = target === null || target === void 0 ? void 0 : target.classList) === null || _a === void 0 ? void 0 : _a.contains('db-navigation-item-expand-button')) && ((_b = target === null || target === void 0 ? void 0 : target.parentElement) === null || _b === void 0 ? void 0 : _b.classList.contains('db-navigation-item')));
-};
-class NavigationItemSafeTriangle {
-    constructor(element, subNavigation) {
-        var _a;
-        this.parentSubNavigation = null;
-        this.initialized = false;
-        this.mouseX = 0;
-        this.mouseY = 0;
-        this.element = element;
-        this.subNavigation = subNavigation;
-        if (!this.element || !this.subNavigation) {
-            return;
-        }
-        this.parentSubNavigation = (_a = this.element) === null || _a === void 0 ? void 0 : _a.closest('.db-sub-navigation');
-        /*
-         * only initiate if:
-         * 1. item is not at root navigation level
-         * 2. item is not in the mobile navigation / within db-drawer
-         */
-        if (this.parentSubNavigation && !this.element.closest('.db-drawer')) {
-            this.init();
-        }
-    }
-    init() {
-        var _a, _b, _c;
-        const parentElementWidth = (_b = (_a = this.parentSubNavigation) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) !== null && _b !== void 0 ? _b : 0;
-        // the triangle has the width of the sub-navigation, current nav-item can be wider.
-        // so the width of the triangle must be adapted to a possibly wider nav-item.
-        (_c = this.element) === null || _c === void 0 ? void 0 : _c.style.setProperty('--db-navigation-item-inline-size', `${parentElementWidth}px`);
-        this.initialized = true;
-    }
-    enableFollow() {
-        var _a, _b;
-        if (!this.initialized || this.triangleData || !this.element || !this.subNavigation) {
-            return;
-        }
-        const dataOutsidePair = floatingComponents.handleDataOutside(this.subNavigation);
-        const itemRect = this.element.getBoundingClientRect();
-        const parentElementWidth = (_b = (_a = this.parentSubNavigation) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) !== null && _b !== void 0 ? _b : 0;
-        this.triangleData = {
-            itemRect,
-            parentElementWidth,
-            subNavigationHeight: this.subNavigation.getBoundingClientRect().height,
-            padding: (parentElementWidth - itemRect.width) / 2,
-            outsideVX: dataOutsidePair.vx,
-            outsideVY: dataOutsidePair.vy
-        };
-    }
-    disableFollow() {
-        this.triangleData = undefined;
-    }
-    getTriangleTipX() {
-        if (!this.triangleData)
-            return 0;
-        if (this.triangleData.outsideVX === 'right') {
-            // vertical flipped triangle needs an inverted x pos
-            return this.triangleData.itemRect.width - this.mouseX;
-        }
-        // triangle stops shrinking from 75% x pos
-        return Math.min(this.mouseX, this.triangleData.itemRect.width * 0.75);
-    }
-    getTriangleTipY() {
-        if (!this.triangleData)
-            return 0;
-        // padding must be added to the y pos of the tip so that the y pos matches the cursor
-        const mouseYLimited = Math.max(Math.min(this.mouseY, this.triangleData.itemRect.height), 0) + this.triangleData.padding;
-        if (this.triangleData.outsideVY === 'bottom') {
-            // add offset to tip y pos to match corrected sub-navigation y pos
-            return mouseYLimited + (this.triangleData.subNavigationHeight - this.triangleData.padding * 2 - this.triangleData.itemRect.height);
-        }
-        return mouseYLimited;
-    }
-    hasMouseEnteredSubNavigation() {
-        if (!this.triangleData) {
-            return false;
-        }
-        const isSubNavigationOnLeftSide = this.triangleData.outsideVX === 'right';
-        if (isSubNavigationOnLeftSide && this.mouseX < -1 * this.triangleData.padding) {
-            return true;
-        }
-        if (!isSubNavigationOnLeftSide && this.mouseX > this.triangleData.parentElementWidth - this.triangleData.padding) {
-            return true;
-        }
-        return false;
-    }
-    getTriangleCoordinates(variant) {
-        if (!this.triangleData) {
-            return;
-        }
-        if (variant === 'fill-gap') {
-            const itemHeight = `${this.triangleData.itemRect.height + 2 * this.triangleData.padding}px`;
-            const xStart = `${this.triangleData.parentElementWidth - this.triangleData.padding}px`;
-            return {
-                lb: `${xStart} ${itemHeight}`,
-                lt: `${xStart} 0`,
-                rt: '100% 0',
-                rb: `100% ${itemHeight}`
-            };
-        }
-        const tipX = this.getTriangleTipX();
-        const tipY = this.getTriangleTipY();
-        const lb = `${tipX}px ${tipY}px`;
-        const lt = `${tipX}px ${tipY}px`;
-        return {
-            lb,
-            lt,
-            rt: '100% 0',
-            rb: '100% 100%'
-        };
-    }
-    followByMouseEvent(event) {
-        if (!this.initialized || !this.triangleData || !this.element || !this.subNavigation) {
-            return;
-        }
-        this.mouseX = event.clientX - this.triangleData.itemRect.left;
-        this.mouseY = event.clientY - this.triangleData.itemRect.top;
-        const isOverSubNavigation = this.hasMouseEnteredSubNavigation();
-        const coordinates = this.getTriangleCoordinates(isOverSubNavigation ? 'fill-gap' : 'safe-triangle');
-        if (!coordinates) {
-            return;
-        }
-        this.element.style.setProperty('--db-navigation-item-clip-path', `polygon(${coordinates.lb}, ${coordinates.lt}, ${coordinates.rt}, ${coordinates.rb})`);
-        if (isOverSubNavigation) {
-            this.triangleData = undefined;
-        }
-    }
-}
-
-exports.NavigationItemSafeTriangle = NavigationItemSafeTriangle;
-exports.isEventTargetNavigationItem = isEventTargetNavigationItem;

package/dist/collection/components/brand/index.js

@@ -1,2 +0,0 @@
-import { DBBrand } from "./brand";
-export default DBBrand;

package/dist/collection/components/header/index.js

@@ -1,2 +0,0 @@
-import { DBHeader } from "./header";
-export default DBHeader;

package/dist/collection/components/navigation/index.js

@@ -1,2 +0,0 @@
-import { DBNavigation } from "./navigation";
-export default DBNavigation;

package/dist/collection/components/navigation-item/index.js

@@ -1,2 +0,0 @@
-import { DBNavigationItem } from "./navigation-item";
-export default DBNavigationItem;