@swisspost/design-system-components 9.0.0-next.3 → 9.0.0-next.30

package/dist/collection/components/post-mainnavigation/post-mainnavigation.js

@@ -0,0 +1,267 @@
+import { Host, h } from "@stencil/core";
+const SCROLL_REPEAT_INTERVAL = 100; // Interval for repeated scrolling when holding down scroll button
+const NAVBAR_DISABLE_DURATION = 400; // Duration to temporarily disable navbar interactions during scrolling
+const NAVIGATION_LIST_SELECTOR = 'post-list > [role="list"]:not(post-megadropdown *)';
+const NAVIGATION_ITEM_SELECTOR = 'post-list-item :is(a, button):not(post-megadropdown *)';
+export class PostMainnavigation {
+    constructor() {
+        this.canScrollLeft = false;
+        this.canScrollRight = false;
+        this.translationAmount = 0;
+    }
+    header;
+    navbar;
+    rightScrollButton;
+    leftScrollButton;
+    scrollRepeatInterval;
+    navbarDisableTimer;
+    resizeObserver;
+    mutationObserver = new MutationObserver(async (mutations) => {
+        // Wait for all elements to be hydrated
+        await Promise.all(mutations
+            .flatMap((mutation) => Array.from(mutation.addedNodes))
+            .map((item) => item.componentOnReady ? item.componentOnReady() : Promise.resolve(item)));
+        // Recalculate scrollability after DOM changes
+        this.checkScrollability();
+    });
+    host;
+    /**
+     * Update navbar translation when 'translateAmount' changes and recalculate scrollability
+     */
+    onTranslateAmountChanges(value) {
+        this.navbar.style.marginInlineStart = `-${value}px`;
+        this.checkScrollability();
+    }
+    /**
+     * Retrieves a reference to the closest 'post-header' element when the main navigation is added to the DOM.
+     * This ensures that we can interact with the header for mobile menu toggling.
+     */
+    connectedCallback() {
+        this.header = this.host.closest('post-header');
+    }
+    /**
+     * Cleans up references and disconnects the MutationObserver when the main navigation is removed from the DOM.
+     */
+    disconnectedCallback() {
+        this.header = null;
+        this.mutationObserver.disconnect();
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    }
+    componentDidLoad() {
+        setTimeout(() => this.checkScrollability()); // Initial check to determine if scrolling is needed
+        this.resizeObserver = new ResizeObserver(() => {
+            this.checkScrollability();
+        });
+        // Observe the navbar and the navigation list for size changes
+        if (this.navbar) {
+            this.resizeObserver.observe(this.navbar);
+            const navList = this.navigationList;
+            if (navList) {
+                this.resizeObserver.observe(navList);
+            }
+        }
+        this.mutationObserver.observe(this.navigationList, { subtree: true, childList: true }); // Recheck scrollability when navigation list changes
+        this.fixLayoutShift();
+        // Handle focus changes and adjust scroll as needed
+        this.navbar.addEventListener('focusin', e => this.adjustTranslation(e));
+    }
+    // Hack that duplicates navigation elements to fix the layout shift on active elements
+    fixLayoutShift() {
+        // Select first level of main navigation elements, both the links and the megadropdown trigger buttons
+        const children = this.host.querySelectorAll('nav > post-list > div > post-list-item > a, nav > post-list > div > post-list-item > post-megadropdown-trigger > button');
+        // Update HTML so that the content is duplicated
+        children.forEach(child => (child.innerHTML = `<span class="nav-el-active">${child.innerHTML}</span><span class="nav-el-inactive"aria-hidden="true">${child.innerHTML}</span>`));
+    }
+    handleBackButtonClick() {
+        if (this.header)
+            this.header.toggleMobileMenu();
+    }
+    /**
+     * Moves focus on the navbar and adjusts scrolling to bring focused element into view.
+     */
+    adjustTranslation(e) {
+        const focusedElement = e.target;
+        if (!this.canScroll || !focusedElement.matches(NAVIGATION_ITEM_SELECTOR))
+            return;
+        // We need to move the element into the view before it is focused to avoid browser default behavior
+        e.preventDefault();
+        this.withoutTransition(() => {
+            // Try scrolling in both directions, only the necessary translation will actually occur
+            this.translateRightTo(focusedElement);
+            this.translateLeftTo(focusedElement);
+            focusedElement.focus();
+        });
+    }
+    /**
+     * Checks if scrolling is possible in either direction (left or right) and updates the state accordingly.
+     */
+    checkScrollability() {
+        const { scrollWidth, clientWidth } = this.navbar;
+        const couldScroll = this.canScroll;
+        if (scrollWidth === clientWidth) {
+            // If scroll width equals client width, scrolling is disabled in both directions
+            this.canScrollLeft = this.canScrollRight = false;
+        }
+        else {
+            this.canScrollLeft = this.translationAmount > 0; // Scrolling left is possible if not at the start
+            this.canScrollRight = clientWidth + this.translationAmount < scrollWidth; // Scrolling right is possible if not at the end
+        }
+        if (couldScroll && !this.canScroll) {
+            this.withoutTransition(() => (this.translationAmount = 0));
+        }
+    }
+    /**
+     * Returns whether scrolling is enabled in either the left or right direction.
+     */
+    get canScroll() {
+        return this.canScrollLeft || this.canScrollRight;
+    }
+    /**
+     * Handles the scrolling behavior when a user clicks on the left or right scroll buttons.
+     */
+    handleScrollButtonClick(direction) {
+        if (!this.canScroll)
+            return;
+        // Disable interaction with the navbar during scrolling
+        this.disableNavbar();
+        // Perform the initial scroll action
+        this.scroll(direction);
+        // Repeat the scrolling action while the button is held down
+        this.scrollRepeatInterval = setInterval(() => {
+            this.scroll(direction);
+        }, SCROLL_REPEAT_INTERVAL);
+    }
+    /**
+     * Stops the repeated scrolling when the mouse button is released.
+     */
+    stopScrolling() {
+        if (this.scrollRepeatInterval)
+            clearInterval(this.scrollRepeatInterval);
+    }
+    scroll(direction) {
+        const navigationItems = Array.from(this.navigationItems);
+        if (direction === 'left')
+            navigationItems.reverse();
+        for (const item of navigationItems) {
+            const couldScroll = direction === 'left' ? this.translateLeftTo(item, true) : this.translateRightTo(item, true);
+            if (couldScroll)
+                break;
+        }
+    }
+    translateRightTo(navigationItem, skipSmallTranslation = false) {
+        const listItem = navigationItem.closest('post-list-item');
+        // Calculate the right edge position of the list item relative to the left of the screen
+        const rightEdgePosition = listItem.offsetLeft + listItem.offsetWidth;
+        // Calculate the last visible position on the screen, right before the right scroll button
+        const lastVisiblePosition = this.host.clientWidth - this.rightScrollButton.clientWidth;
+        // If the item is already fully visible, no translation is needed
+        if (rightEdgePosition < lastVisiblePosition)
+            return false;
+        const translationIncrease = rightEdgePosition - lastVisiblePosition + 1; // + 1 because offset values are rounded
+        // If the required scroll distance is too small (less than half the width of the item), avoid unnecessary scroll
+        if (skipSmallTranslation && translationIncrease < listItem.clientWidth / 2)
+            return false;
+        // Calculate the maximum translation amount to prevent scrolling past the end of the content
+        const maximumTranslation = this.navbar.scrollWidth - this.host.clientWidth;
+        // Adjust the translation amount, ensuring it doesn't exceed the maximum scrollable area
+        const { marginRight } = getComputedStyle(this.navigationList);
+        this.translationAmount =
+            Math.min(this.translationAmount + translationIncrease, maximumTranslation) +
+                parseInt(marginRight);
+        return true;
+    }
+    translateLeftTo(navigationItem, skipSmallTranslation = false) {
+        const listItem = navigationItem.closest('post-list-item');
+        // Get the left edge position of the list item relative to the left of the screen
+        const leftEdgePosition = listItem.offsetLeft;
+        // Calculate the first visible position on the screen to the left, right after the left scroll button
+        const firstVisiblePosition = this.leftScrollButton.clientWidth;
+        // If the item is already fully visible, no translation is needed
+        if (leftEdgePosition > firstVisiblePosition)
+            return false;
+        const translationDecrease = firstVisiblePosition - leftEdgePosition + 1; // + 1 because offset values are rounded
+        // If the required scroll distance is too small (less than half the width of the item), don't perform the scroll
+        if (skipSmallTranslation && translationDecrease < listItem.clientWidth / 2)
+            return false;
+        // Calculate the minimum allowed translation amount (no negative scrolling allowed)
+        const minimumTranslation = 0;
+        // Adjust the translation amount, ensuring it doesn't go below the minimum scrollable area
+        const { marginLeft } = getComputedStyle(this.navigationList);
+        this.translationAmount = Math.max(this.translationAmount - translationDecrease - parseInt(marginLeft), minimumTranslation);
+        return true;
+    }
+    /**
+     * Returns the navigation list container element
+     */
+    get navigationList() {
+        return this.navbar.querySelector(NAVIGATION_LIST_SELECTOR);
+    }
+    /**
+     * Returns the navigation items
+     */
+    get navigationItems() {
+        return this.navbar.querySelectorAll(NAVIGATION_ITEM_SELECTOR);
+    }
+    /**
+     * Temporarily disables interactions with the navbar during scrolling to prevent accidental clicks.
+     * Re-enables interactions after a brief delay to avoid blocking the user entirely.
+     */
+    disableNavbar() {
+        if (this.navbarDisableTimer)
+            clearTimeout(this.navbarDisableTimer);
+        this.navbar.style.pointerEvents = 'none';
+        this.navbarDisableTimer = setTimeout(() => {
+            this.navbar.style.pointerEvents = 'initial';
+        }, NAVBAR_DISABLE_DURATION);
+    }
+    /**
+     * Allows to translate the navbar without a transition
+     */
+    withoutTransition(callback) {
+        const transition = this.navbar.style.transition;
+        this.navbar.style.transition = 'none';
+        callback();
+        setTimeout(() => {
+            this.navbar.style.transition = transition;
+        });
+    }
+    render() {
+        return (h(Host, { key: '3c740536fd968e22d22a8117766df12800e6eb6e', slot: "post-mainnavigation" }, h("div", { key: '113602ca8b5ee48c290b31b77329b34d85df40bd', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: '6cd5e18449f1a9340a6c35c0b97385f0a4bf6ede', name: "back-button" })), h("nav", { key: '6fb39c4a929f973468407928b43f877233fa9326', ref: el => (this.navbar = el) }, h("slot", { key: 'dd9957b2dea293bc7153239f817ac76f37db3728' })), h("div", { key: '3942637952cec7095dbbcfa16aea1a3768a52fdb', class: `left-scroll-button${this.canScrollLeft ? '' : ' d-none'}`, "aria-hidden": "true" }, h("button", { key: '381b0aef119a161e6e3ac8f396ef8a214df0c439', type: "button", tabindex: "-1", ref: el => (this.leftScrollButton = el), onMouseDown: () => this.handleScrollButtonClick('left') }, h("post-icon", { key: '632835cf735a1d5487d1e18861622318041b9fb3', "aria-hidden": "true", name: "chevronleft" }))), h("div", { key: '2cb6c7222c5e755ba1fdfc8c9e68d73299efe0de', class: `right-scroll-button${this.canScrollRight ? '' : ' d-none'}`, "aria-hidden": "true" }, h("button", { key: 'd665cde32ea285134522a00689accf3cc40c927c', type: "button", tabindex: "-1", ref: el => (this.rightScrollButton = el), onMouseDown: () => this.handleScrollButtonClick('right') }, h("post-icon", { key: '13530078ad9aa9b48bdfd5bd78c8aa8d6ea910d0', "aria-hidden": "true", name: "chevronright" })))));
+    }
+    static get is() { return "post-mainnavigation"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./post-mainnavigation.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-mainnavigation.css"]
+        };
+    }
+    static get states() {
+        return {
+            "canScrollLeft": {},
+            "canScrollRight": {},
+            "translationAmount": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "translationAmount",
+                "methodName": "onTranslateAmountChanges"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "mouseup",
+                "method": "stopScrolling",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}

package/dist/collection/components/post-megadropdown/post-megadropdown.css

@@ -0,0 +1 @@
+@keyframes slide-in{0%{transform:translateX(100%)}100%{transform:translateX(0%)}}@keyframes slide-out{from{transform:translateX(0%)}to{transform:translateX(100%)}}@keyframes slide-down{from{transform:translateY(-100%)}to{transform:translateY(0%)}}@keyframes slide-up{0%{transform:translateY(0%)}100%{transform:translateY(-100%)}}*,::before,::after{box-sizing:border-box}.megadropdown-container{box-shadow:0 8px 6px rgba(0,0,0,.16);position:absolute;background-color:#fafafa;border:none;z-index:1;width:100%;inset-block-start:100%;inset-inline-start:0;border-radius:0}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.megadropdown-container{border-block-end:1px solid CanvasText}}.megadropdown-container.slide-in{animation:slide-down 350ms forwards}.megadropdown-container.slide-out{animation:slide-up 350ms forwards}@media screen and (max-width: 1023.98px){.megadropdown-container{z-index:4;position:fixed;inset-block-start:var(--header-navigation-current-inset);inset-inline:0;height:calc(min(var(--header-scroll-parent-height, 100dvh),100dvh) - var(--header-height));border-top:unset;overflow-y:auto;overscroll-behavior:contain}.megadropdown-container.slide-in{animation:slide-in 350ms forwards}.megadropdown-container.slide-out{animation:slide-out 350ms forwards}}.megadropdown{padding:31px 40px 40px;background-color:#fafafa}@media screen and (max-width: 1023.98px){.megadropdown{display:flex;flex-direction:column;width:inherit;padding:16px 32px 24px}}@media screen and (max-width: 599.98px){.megadropdown{padding-inline:16px}}.megadropdown .megadropdown-content{gap:1.5rem;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(15vw, 100%), 1fr));grid-auto-rows:1fr auto;grid-auto-flow:dense}@media screen and (max-width: 1023.98px){.megadropdown .megadropdown-content{grid-template-columns:repeat(auto-fit, minmax(min(35vw, 100%), 1fr))}}@media screen and (max-width: 599.98px){.megadropdown .megadropdown-content{grid-template-columns:1fr}}.megadropdown h2{display:none;margin-top:0;margin-bottom:8px;font-weight:900}.megadropdown h2 a{text-decoration:none;display:none;font-weight:inherit;border-bottom:0;border-top:0}@media screen and (max-width: 1023.98px){.megadropdown h2{display:block;font-size:1.25rem}}@media screen and (max-width: 599.98px){.megadropdown h2{font-size:1.125rem}}.megadropdown post-list{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0px}.megadropdown post-list>[role=list]{flex-direction:unset;display:unset}.megadropdown post-list>*{width:100%}.megadropdown post-list .list-title{display:flex;flex-direction:column-reverse;height:100%}.megadropdown post-list .list-title h3{font-size:20px;display:block;font-weight:900}.megadropdown post-list .list-title h3:not(:has(a)),.megadropdown post-list .list-title h3 a{padding:16px 12px 14px 8px}.megadropdown post-list .list-title h3:not(:has(a)){position:relative}.megadropdown post-list .list-title h3:not(:has(a))::before{content:"";background-color:#050400;bottom:0;width:100%;height:2px;position:absolute;left:0}.megadropdown post-list .list-title h3 a{border-radius:0;text-decoration:none;font-size:inherit;display:flex;align-items:center;justify-content:space-between;min-height:53px;width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative;height:unset;font-weight:900}.megadropdown post-list .list-title h3 a::before{content:"";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}.megadropdown post-list .list-title h3 a.selected,.megadropdown post-list .list-title h3 a[aria-expanded=true]{background-color:#050400;color:#fff}.megadropdown post-list .list-title h3 a:hover{background-color:#504f4b;color:#fff}.megadropdown post-list .list-title h3 a:hover::before{background-color:#504f4b}.megadropdown post-list .list-title h3 a::before{height:2px}@media screen and (max-width: 1023.98px){.megadropdown post-list .list-title h3{font-size:1rem}.megadropdown post-list .list-title h3:not(:has(a)),.megadropdown post-list .list-title h3 a{padding:14px 12px 12px 8px}}@media screen and (max-width: 599.98px){.megadropdown post-list .list-title h3{font-size:.875rem}}.megadropdown post-list-item>a{padding-block:13px 12px;padding-inline-start:8px;display:flex;text-decoration:none;width:100%;min-width:100%;height:auto;min-height:48px;white-space:normal;word-break:break-word}.megadropdown post-list-item>a:hover{border-block-width:0}@media screen and (min-width: 1024px){.megadropdown post-list-item>a{font-size:1.25rem}}@media screen and (max-width: 1023.98px){.megadropdown post-list-item>a{padding-block:12px 11px}}@media screen and (max-width: 599.98px){.megadropdown post-list-item>a{font-size:.875rem}}.megadropdown .back-button{display:none;margin-bottom:2rem}.megadropdown .back-button .btn{width:auto}@media screen and (max-width: 1023.98px){.megadropdown .back-button{order:-1;display:block}}.megadropdown .close-button{position:absolute;top:1rem;right:1rem}@media screen and (max-width: 1023.98px){.megadropdown .close-button{display:none}}

package/dist/collection/components/post-megadropdown/post-megadropdown.js

@@ -0,0 +1,284 @@
+import { getFocusableChildren } from "../../utils/get-focusable-children";
+import { h, Host } from "@stencil/core";
+import { breakpoint } from "../../utils/breakpoints";
+export class PostMegadropdown {
+    constructor() {
+        this.device = breakpoint.get('name');
+        this.isVisible = false;
+        this.animationClass = null;
+    }
+    firstFocusableEl;
+    lastFocusableEl;
+    host;
+    /** Tracks the currently active dropdown instance. */
+    static activeDropdown = null;
+    breakpointChange(e) {
+        this.device = e.detail;
+        if (this.device === 'desktop' && this.isVisible) {
+            this.animationClass = null;
+        }
+    }
+    /**
+     * Emits when the dropdown is shown or hidden.
+     * The event payload is an object.
+     * `isVisible` is true when the dropdown gets opened and false when it gets closed
+     * `focusParent` determines whether after the closing of the mega dropdown, the focus should go back to the trigger parent or naturally go to the next focusable element in the page
+     **/
+    postToggleMegadropdown;
+    disconnectedCallback() {
+        this.removeListeners();
+        window.removeEventListener('postBreakpoint:name', this.breakpointChange.bind(this));
+        if (PostMegadropdown.activeDropdown === this) {
+            PostMegadropdown.activeDropdown = null;
+        }
+    }
+    componentWillRender() {
+        this.getFocusableElements();
+    }
+    /**
+     * Toggles the dropdown visibility based on its current state.
+     */
+    async toggle() {
+        if (this.isVisible) {
+            this.hide();
+        }
+        else {
+            await this.show();
+        }
+    }
+    /**
+     * Displays the dropdown.
+     */
+    async show() {
+        if (PostMegadropdown.activeDropdown && PostMegadropdown.activeDropdown !== this) {
+            // Close the previously active dropdown without animation
+            PostMegadropdown.activeDropdown.forceClose();
+        }
+        else {
+            this.animationClass = 'slide-in';
+        }
+        this.isVisible = true;
+        PostMegadropdown.activeDropdown = this;
+        this.postToggleMegadropdown.emit({ isVisible: this.isVisible });
+        if (this.firstFocusableEl &&
+            window.getComputedStyle(this.firstFocusableEl).display !== 'none') {
+            this.firstFocusableEl.focus();
+        }
+        this.addListeners();
+    }
+    /**
+     * Hides the dropdown with an animation.
+     */
+    async hide(focusParent = true, forceClose = false) {
+        this.postToggleMegadropdown.emit({ isVisible: false, focusParent: focusParent });
+        if (forceClose) {
+            this.forceClose();
+        }
+        else {
+            this.animationClass = 'slide-out';
+        }
+    }
+    /**
+     * Sets focus to the first focusable element within the component.
+     */
+    async focusFirst() {
+        this.firstFocusableEl?.focus();
+    }
+    connectedCallback() {
+        window.addEventListener('postBreakpoint:name', this.breakpointChange.bind(this));
+    }
+    /**
+     * Forces the dropdown to close without animation.
+     */
+    forceClose() {
+        this.isVisible = false;
+        this.animationClass = null;
+        this.postToggleMegadropdown.emit({ isVisible: this.isVisible, focusParent: false });
+        this.removeListeners();
+    }
+    handleAnimationEnd() {
+        if (this.animationClass === 'slide-out') {
+            this.isVisible = false;
+            this.animationClass = null;
+            PostMegadropdown.activeDropdown = null;
+            this.removeListeners();
+        }
+    }
+    handleClickOutside = (event) => {
+        if (this.device !== 'desktop')
+            return;
+        const target = event.target;
+        if (this.host.contains(target)) {
+            return;
+        }
+        if (target instanceof HTMLElement) {
+            const trigger = target.closest('post-megadropdown-trigger');
+            if (trigger) {
+                const targetDropdownId = trigger.getAttribute('for');
+                if (targetDropdownId !== this.host.id) {
+                    return;
+                }
+            }
+        }
+        this.hide(false);
+    };
+    addListeners() {
+        this.host.addEventListener('keydown', e => this.keyboardHandler(e));
+        document.addEventListener('keyup', e => this.handleTabOutside(e));
+        document.addEventListener('mousedown', this.handleClickOutside);
+    }
+    removeListeners() {
+        this.host.removeEventListener('keydown', e => this.keyboardHandler(e));
+        document.removeEventListener('keyup', e => this.handleTabOutside(e));
+        document.removeEventListener('mousedown', this.handleClickOutside);
+    }
+    getFocusableElements() {
+        const focusableEls = Array.from(this.host.querySelectorAll('post-list-item, h3, .back-button'));
+        const focusableChildren = focusableEls.flatMap(el => Array.from(getFocusableChildren(el)));
+        this.firstFocusableEl = focusableChildren[0];
+        this.lastFocusableEl = focusableChildren[focusableChildren.length - 1];
+    }
+    // Loop through the focusable children
+    keyboardHandler(e) {
+        if (e.key === 'Tab' && this.device !== 'desktop') {
+            if (e.shiftKey && document.activeElement === this.firstFocusableEl) {
+                // If back tab (TAB + Shift) and first element is focused, focus goes to the last element of the megadropdown
+                e.preventDefault();
+                this.lastFocusableEl.focus();
+            }
+            else if (!e.shiftKey && document.activeElement === this.lastFocusableEl) {
+                // If TAB and last element is focused, focus goes back to the first element of the megadropdown
+                e.preventDefault();
+                this.firstFocusableEl.focus();
+            }
+        }
+    }
+    handleTabOutside(e) {
+        if (e.key === 'Tab' && this.device === 'desktop') {
+            if (!this.host.contains(e.target)) {
+                this.hide(false);
+            }
+        }
+    }
+    render() {
+        const containerStyle = this.isVisible ? {} : { display: 'none' };
+        return (h(Host, { key: '823a6bf8bfa10457db0fe6d0693d514d747ad559' }, h("div", { key: '7bf71bd92e5cf548ac66acbb08ee0e39145f5e1e', class: `megadropdown-container ${this.animationClass || ''}`, style: containerStyle, onAnimationEnd: () => this.handleAnimationEnd() }, h("div", { key: '0d37ac5f97521db3003f619465ed771b14291966', class: "megadropdown" }, h("slot", { key: '5b43cc2a8978eb42b5626f62a84c639e9abffb10', name: "megadropdown-title" }), h("div", { key: 'e8e3a768ad28e14597f9671137dc6815baea5666', class: "megadropdown-content" }, h("slot", { key: 'f230793ceb2daca7d79e3098e057acbba5c2d879' })), h("div", { key: 'd008a5f9f25fbd722023c7f966541ebc29e8cc01', onClick: () => this.hide(true), class: "back-button" }, h("slot", { key: 'aec3e3119e5dd90b715f269f677f6b98008d215a', name: "back-button" })), h("div", { key: 'f2c283e08b13cb78b8af1b7779758b2b924f343c', onClick: () => this.hide(true), class: "close-button" }, h("slot", { key: '72a40613d8b0b8c50354f510d66290c661c86f69', name: "close-button" }))))));
+    }
+    static get is() { return "post-megadropdown"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["post-megadropdown.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-megadropdown.css"]
+        };
+    }
+    static get states() {
+        return {
+            "device": {},
+            "isVisible": {},
+            "animationClass": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "postToggleMegadropdown",
+                "name": "postToggleMegadropdown",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits when the dropdown is shown or hidden.\nThe event payload is an object.\n`isVisible` is true when the dropdown gets opened and false when it gets closed\n`focusParent` determines whether after the closing of the mega dropdown, the focus should go back to the trigger parent or naturally go to the next focusable element in the page"
+                },
+                "complexType": {
+                    "original": "{ isVisible: boolean; focusParent?: boolean }",
+                    "resolved": "{ isVisible: boolean; focusParent?: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggles the dropdown visibility based on its current state.",
+                    "tags": []
+                }
+            },
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Displays the dropdown.",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "(focusParent?: boolean, forceClose?: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "focusParent",
+                            "type": "boolean",
+                            "docs": ""
+                        }, {
+                            "name": "forceClose",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Hides the dropdown with an animation.",
+                    "tags": []
+                }
+            },
+            "focusFirst": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus to the first focusable element within the component.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}

package/dist/collection/components/post-megadropdown-trigger/post-megadropdown-trigger.css

@@ -0,0 +1 @@
+post-megadropdown-trigger{width:100%;position:relative;z-index:3}