@xplortech/apollo-core 2.10.0 → 2.12.0

package/dist/cjs/xpl-side-nav-item.cjs.entry.js

@@ -0,0 +1,130 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+var sideNavSlotUtils = require('./side-nav-slot-utils-DMog5BVN.js');
+
+const SideNavItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.expandedChange = index.createEvent(this, "expandedChange", 7);
+        this.navigate = index.createEvent(this, "navigate", 7);
+        this.hasTrailingSlot = false;
+        this.disabled = false;
+        this.expanded = false;
+        this.hasChildren = false;
+        this.hidden = false;
+        this.link = false;
+        this.selected = false;
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            if (this.hasChildren) {
+                this.expanded = !this.expanded;
+                this.expandedChange.emit(this.expanded);
+            }
+            else {
+                this.navigate.emit();
+            }
+        };
+    }
+    syncLinkHasChildrenExclusivity() {
+        this.enforceLinkExcludesHasChildren();
+    }
+    connectedCallback() {
+        this.syncTrailingSlot();
+        this.connectTrailingSlotObserver();
+    }
+    disconnectedCallback() {
+        if (this.trailingSlotSyncTimeoutId !== undefined) {
+            clearTimeout(this.trailingSlotSyncTimeoutId);
+            this.trailingSlotSyncTimeoutId = undefined;
+        }
+        this.disconnectTrailingSlotObserver();
+    }
+    componentWillLoad() {
+        this.syncLinkHasChildrenExclusivity();
+        this.syncTrailingSlot();
+    }
+    componentWillRender() {
+        this.syncLinkHasChildrenExclusivity();
+        this.disconnectTrailingSlotObserver();
+    }
+    componentDidRender() {
+        this.scheduleTrailingSlotSync();
+    }
+    connectTrailingSlotObserver() {
+        this.disconnectTrailingSlotObserver();
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        this.trailingSlotObserver = new MutationObserver(() => {
+            this.scheduleTrailingSlotSync();
+        });
+        this.trailingSlotObserver.observe(this.el, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['slot'],
+        });
+    }
+    disconnectTrailingSlotObserver() {
+        this.trailingSlotObserver?.disconnect();
+        this.trailingSlotObserver = undefined;
+    }
+    scheduleTrailingSlotSync() {
+        if (this.trailingSlotSyncTimeoutId !== undefined) {
+            clearTimeout(this.trailingSlotSyncTimeoutId);
+        }
+        this.trailingSlotSyncTimeoutId = setTimeout(() => {
+            this.trailingSlotSyncTimeoutId = undefined;
+            if (!this.el.isConnected) {
+                return;
+            }
+            this.syncTrailingSlot();
+            this.connectTrailingSlotObserver();
+        }, 0);
+    }
+    syncTrailingSlot() {
+        const next = sideNavSlotUtils.hasHostSlottedContent(this.el, 'trailing', 'xpl-side-nav-item');
+        if (next !== this.hasTrailingSlot) {
+            this.hasTrailingSlot = next;
+        }
+    }
+    enforceLinkExcludesHasChildren() {
+        if (!this.link)
+            return;
+        if (this.hasChildren) {
+            this.hasChildren = false;
+        }
+        if (this.el.hasAttribute('has-children')) {
+            this.el.removeAttribute('has-children');
+        }
+    }
+    render() {
+        const showAutoChevron = this.hasChildren && !this.hasTrailingSlot;
+        const buttonClass = {
+            'xpl-side-nav-item__link': true,
+            expanded: this.expanded,
+            selected: this.selected,
+        };
+        return (index.h(index.Host, { key: '173aa913d77c88522069cb4beef76d5b04b9beb1', class: {
+                'xpl-side-nav-item': true,
+                'xpl-side-nav-item--link-disabled': this.link && this.disabled,
+            } }, this.link ? (index.h("slot", null)) : (index.h("button", { type: "button", class: buttonClass, "aria-current": this.selected ? 'page' : undefined, "aria-expanded": this.hasChildren ? (this.expanded ? 'true' : 'false') : undefined, onClick: this.handleClick, disabled: this.disabled }, index.h("span", { class: "xpl-side-nav-item__leading" }, index.h("slot", { name: "leading" }, this.icon ? (index.h("xpl-icon", { icon: this.icon, size: 16 })) : null)), index.h("span", { class: "xpl-side-nav-item__label" }, this.label ?? ''), (this.hasTrailingSlot || this.hasChildren) && (index.h("span", { class: {
+                'xpl-side-nav-item__trailing': true,
+                'xpl-side-nav-item__trailing--chevron': showAutoChevron,
+                expanded: showAutoChevron && this.expanded,
+            }, "aria-hidden": showAutoChevron ? 'true' : undefined }, index.h("slot", { name: "trailing" }, showAutoChevron ? (index.h("xpl-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down', size: 16 })) : null))))), this.hasChildren && !this.link && (index.h("div", { key: '7611d4a00248e27f0e5d38fb4890950854e5023e', class: `xpl-side-nav-item__children ${this.expanded ? 'expanded' : ''}`, inert: !this.expanded ? true : undefined }, index.h("div", { key: '79676aa8d5f3d9396629cf7b9d9f5ebc142fc2ad', class: "xpl-side-nav-item__children-inner" }, index.h("slot", { key: '42bcc845f6b7f9085f0095f1337c2cf3f4be6698' }))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "hasChildren": [{
+                "syncLinkHasChildrenExclusivity": 0
+            }],
+        "link": [{
+                "syncLinkHasChildrenExclusivity": 0
+            }]
+    }; }
+};
+
+exports.xpl_side_nav_item = SideNavItem;

package/dist/cjs/xpl-side-nav-section.cjs.entry.js

@@ -0,0 +1,105 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+var sideNavSlotUtils = require('./side-nav-slot-utils-DMog5BVN.js');
+
+const SideNavSection = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.expandedChange = index.createEvent(this, "expandedChange", 7);
+        this.hasBadgeSlot = false;
+        this.hasNamedBadgeSlot = false;
+        this.collapsible = true;
+        this.expanded = false;
+        this.handleHeaderClick = () => {
+            if (!this.collapsible)
+                return;
+            this.expanded = !this.expanded;
+            this.expandedChange.emit(this.expanded);
+        };
+    }
+    connectedCallback() {
+        this.syncBadgeSlot();
+        this.connectBadgeSlotObserver();
+    }
+    disconnectedCallback() {
+        if (this.badgeSlotSyncTimeoutId !== undefined) {
+            clearTimeout(this.badgeSlotSyncTimeoutId);
+            this.badgeSlotSyncTimeoutId = undefined;
+        }
+        this.disconnectBadgeSlotObserver();
+    }
+    componentWillLoad() {
+        this.childrenId = sideNavSlotUtils.ensureSideNavSectionChildrenId(this.el, this.childrenId);
+        this.syncBadgeSlot();
+    }
+    componentWillRender() {
+        this.disconnectBadgeSlotObserver();
+    }
+    componentDidRender() {
+        this.scheduleBadgeSlotSync();
+    }
+    connectBadgeSlotObserver() {
+        this.disconnectBadgeSlotObserver();
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        this.badgeSlotObserver = new MutationObserver(() => {
+            this.scheduleBadgeSlotSync();
+        });
+        this.badgeSlotObserver.observe(this.el, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['slot'],
+        });
+    }
+    disconnectBadgeSlotObserver() {
+        this.badgeSlotObserver?.disconnect();
+        this.badgeSlotObserver = undefined;
+    }
+    scheduleBadgeSlotSync() {
+        if (this.badgeSlotSyncTimeoutId !== undefined) {
+            clearTimeout(this.badgeSlotSyncTimeoutId);
+        }
+        this.badgeSlotSyncTimeoutId = setTimeout(() => {
+            this.badgeSlotSyncTimeoutId = undefined;
+            if (!this.el.isConnected) {
+                return;
+            }
+            this.syncBadgeSlot();
+            this.connectBadgeSlotObserver();
+        }, 0);
+    }
+    syncBadgeSlot() {
+        const badges = sideNavSlotUtils.getHostSlottedElements(this.el, 'badge', 'xpl-side-nav-section');
+        const hasBadgeSlot = sideNavSlotUtils.hasHostSlottedContent(this.el, 'badge', 'xpl-side-nav-section');
+        const hasNamedBadgeSlot = badges.some((badge) => badge.textContent?.trim() || badge.getAttribute('aria-label')?.trim());
+        if (hasBadgeSlot !== this.hasBadgeSlot) {
+            this.hasBadgeSlot = hasBadgeSlot;
+        }
+        if (hasNamedBadgeSlot !== this.hasNamedBadgeSlot) {
+            this.hasNamedBadgeSlot = hasNamedBadgeSlot;
+        }
+    }
+    render() {
+        const showChildren = !this.collapsible || this.expanded;
+        const hasHeading = !!this.heading?.trim();
+        const childrenId = this.childrenId ?? sideNavSlotUtils.ensureSideNavSectionChildrenId(this.el, this.childrenId);
+        const titleRow = [
+            index.h("span", { key: 'c39c7044ae5ae1238df9aaf644a73b192dfd7f2b', class: "xpl-side-nav-section__title" }, this.heading ?? ''),
+            index.h("span", { key: 'a47fcc5b501f01d735cd2b9035063a2fa2c97a91', class: "xpl-side-nav-section__badge", hidden: !this.hasBadgeSlot }, index.h("slot", { key: '06785bbb8eeb928b9ee7e04198df20fcf5bd739e', name: "badge" })),
+            this.collapsible ? (index.h("span", { class: "xpl-side-nav-section__chevron", "aria-hidden": "true" }, index.h("xpl-icon", { icon: this.expanded ? 'chevron-down' : 'chevron-right', size: 16 }))) : null,
+        ];
+        return (index.h(index.Host, { key: '4ce2adbf830659bb0803d477386a004d47aa4335', class: {
+                'xpl-side-nav-section': true,
+                'xpl-side-nav-section--static': !this.collapsible,
+            } }, this.collapsible ? (index.h("button", { type: "button", class: "xpl-side-nav-section__header", "aria-expanded": this.expanded ? 'true' : 'false', "aria-controls": childrenId, "aria-label": hasHeading || this.hasNamedBadgeSlot ? undefined : 'Toggle section', onClick: this.handleHeaderClick }, titleRow)) : (index.h("div", { class: "xpl-side-nav-section__header" }, titleRow)), index.h("div", { key: '2ccafafd7d73fc8eaf367e718e9c2681ece0e936', id: childrenId, class: {
+                'xpl-side-nav-section__children': true,
+                expanded: showChildren,
+            }, inert: !showChildren ? true : undefined }, index.h("div", { key: 'eaac1a443982eeca891d676511fe5bdb3f78db19', class: "xpl-side-nav-section__children-inner" }, index.h("slot", { key: '67143e298920cff3b28a6db4fd2a2ac18935b991' })))));
+    }
+    get el() { return index.getElement(this); }
+};
+
+exports.xpl_side_nav_section = SideNavSection;

package/dist/cjs/xpl-side-nav.cjs.entry.js

@@ -0,0 +1,272 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+var lifecycle = require('./lifecycle-DeSsFfQZ.js');
+
+const SIDE_NAV_MOBILE_MQ = '(max-width: 767px)';
+const SIDE_NAV_CLOSE_ANIMATION_MS = 600;
+
+const SideNav = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.openChange = index.createEvent(this, "openChange", 7);
+        this.drawerClosing = false;
+        this.hasHeaderSlot = false;
+        this.open = false;
+        this.onViewportChange = () => {
+            this.clearCloseTransition();
+            this.syncDocKeyDownListener();
+        };
+        this.focusToggleAfterClose = () => {
+            if (!this.isBelowMdBreakpoint())
+                return;
+            if (this.toggleFocusTimeoutId !== undefined) {
+                clearTimeout(this.toggleFocusTimeoutId);
+            }
+            this.toggleFocusTimeoutId = setTimeout(() => {
+                this.toggleFocusTimeoutId = undefined;
+                this.el.querySelector('.xpl-side-nav__toggle button')?.focus();
+            }, 0);
+        };
+        this.focusDrawerOnOpen = () => {
+            if (!this.isBelowMdBreakpoint())
+                return;
+            if (this.drawerFocusTimeoutId !== undefined) {
+                clearTimeout(this.drawerFocusTimeoutId);
+            }
+            this.drawerFocusTimeoutId = setTimeout(() => {
+                this.drawerFocusTimeoutId = undefined;
+                const wrapper = this.el.querySelector('.xpl-side-nav__wrapper');
+                const first = wrapper
+                    ? this.getFocusableElements().find((el) => wrapper.contains(el))
+                    : undefined;
+                const fallback = this.el.querySelector('.xpl-side-nav__toggle button');
+                (first ?? fallback)?.focus();
+            }, 0);
+        };
+        this.onBackdropClick = () => this.setOpenState(false);
+        this.onDocKeyDown = (e) => {
+            if (!this.isMobileDrawerActive())
+                return;
+            if (this.shouldYieldFocusToExternalModal())
+                return;
+            switch (e.key.toLowerCase()) {
+                case 'escape': {
+                    if (!this.open)
+                        return;
+                    if (this.anyDescendantPopoverIsOpen())
+                        return;
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.setOpenState(false);
+                    return;
+                }
+                case 'tab': {
+                    this.trapTabKey(e);
+                    break;
+                }
+            }
+        };
+        this.onToggleClick = () => this.setOpenState(!this.open);
+    }
+    onOpenChanged(newValue, oldValue) {
+        if (oldValue && !newValue && this.isBelowMdBreakpoint()) {
+            this.drawerClosing = true;
+            if (this.closeTransitionTimeoutId !== undefined) {
+                clearTimeout(this.closeTransitionTimeoutId);
+            }
+            this.closeTransitionTimeoutId = setTimeout(() => {
+                this.closeTransitionTimeoutId = undefined;
+                this.drawerClosing = false;
+                this.syncDocKeyDownListener();
+            }, SIDE_NAV_CLOSE_ANIMATION_MS);
+        }
+        else {
+            this.clearCloseTransition();
+        }
+        this.syncDocKeyDownListener();
+        if (oldValue && !newValue)
+            this.focusToggleAfterClose();
+        if (!oldValue && newValue)
+            this.focusDrawerOnOpen();
+    }
+    connectedCallback() {
+        if (lifecycle.isBrowser() && typeof window.matchMedia === 'function') {
+            this.mobileMq = window.matchMedia(SIDE_NAV_MOBILE_MQ);
+            this.mobileMq.addEventListener('change', this.onViewportChange);
+        }
+        this.syncDocKeyDownListener();
+        this.syncHeaderSlot();
+        this.connectHeaderSlotObserver();
+    }
+    componentWillLoad() {
+        this.syncHeaderSlot();
+    }
+    componentWillRender() {
+        this.disconnectHeaderSlotObserver();
+    }
+    componentDidRender() {
+        this.scheduleHeaderSlotSync();
+    }
+    componentDidLoad() {
+        if (this.open) {
+            this.syncDocKeyDownListener();
+            this.focusDrawerOnOpen();
+        }
+    }
+    disconnectedCallback() {
+        if (this.toggleFocusTimeoutId !== undefined) {
+            clearTimeout(this.toggleFocusTimeoutId);
+            this.toggleFocusTimeoutId = undefined;
+        }
+        if (this.drawerFocusTimeoutId !== undefined) {
+            clearTimeout(this.drawerFocusTimeoutId);
+            this.drawerFocusTimeoutId = undefined;
+        }
+        this.clearCloseTransition();
+        this.mobileMq?.removeEventListener('change', this.onViewportChange);
+        this.mobileMq = undefined;
+        this.removeDocKeyDownListener();
+        if (this.headerSlotSyncTimeoutId !== undefined) {
+            clearTimeout(this.headerSlotSyncTimeoutId);
+            this.headerSlotSyncTimeoutId = undefined;
+        }
+        this.disconnectHeaderSlotObserver();
+    }
+    async toggle() {
+        this.setOpenState(!this.open);
+    }
+    async setOpen(open) {
+        this.setOpenState(open);
+    }
+    removeDocKeyDownListener() {
+        this.el.ownerDocument.removeEventListener('keydown', this.onDocKeyDown, false);
+    }
+    syncDocKeyDownListener() {
+        this.removeDocKeyDownListener();
+        if (this.isMobileDrawerActive()) {
+            this.el.ownerDocument.addEventListener('keydown', this.onDocKeyDown, false);
+        }
+    }
+    isBelowMdBreakpoint() {
+        return this.mobileMq?.matches ?? false;
+    }
+    isMobileDrawerActive() {
+        return (this.open || this.drawerClosing) && this.isBelowMdBreakpoint();
+    }
+    clearCloseTransition() {
+        if (this.closeTransitionTimeoutId !== undefined) {
+            clearTimeout(this.closeTransitionTimeoutId);
+            this.closeTransitionTimeoutId = undefined;
+        }
+        this.drawerClosing = false;
+    }
+    shouldYieldFocusToExternalModal() {
+        const active = this.el.ownerDocument.activeElement;
+        if (!active || this.el.contains(active))
+            return false;
+        return active.closest('[aria-modal="true"]') !== null;
+    }
+    anyDescendantPopoverIsOpen() {
+        const hosts = this.el.querySelectorAll('xpl-popover');
+        for (let i = 0; i < hosts.length; i += 1) {
+            const inner = hosts[i].querySelector('.xpl-popover');
+            if (inner?.classList.contains('xpl-popover--is-open')) {
+                return true;
+            }
+        }
+        return false;
+    }
+    setOpenState(open) {
+        const wasOpen = this.open;
+        if (open === wasOpen)
+            return;
+        this.open = open;
+        this.openChange.emit(open);
+        if (wasOpen && !open)
+            this.focusToggleAfterClose();
+    }
+    getFocusableElements() {
+        const selector = 'button:not([disabled]), a[href]:not([tabindex="-1"]), input:not([disabled]), [tabindex]:not([tabindex="-1"])';
+        const active = this.el.ownerDocument.activeElement;
+        return Array.from(this.el.querySelectorAll(selector)).filter((node) => !node.closest('[inert]') && (node.offsetParent !== null || node === active));
+    }
+    trapTabKey(e) {
+        if (this.shouldYieldFocusToExternalModal())
+            return;
+        const focusable = this.getFocusableElements();
+        if (focusable.length === 0)
+            return;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        const active = this.el.ownerDocument.activeElement;
+        if (e.shiftKey) {
+            if (active === first || !this.el.contains(active)) {
+                e.preventDefault();
+                last.focus();
+            }
+        }
+        else if (active === last || !this.el.contains(active)) {
+            e.preventDefault();
+            first.focus();
+        }
+    }
+    connectHeaderSlotObserver() {
+        this.disconnectHeaderSlotObserver();
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        this.headerSlotObserver = new MutationObserver(() => {
+            this.scheduleHeaderSlotSync();
+        });
+        this.headerSlotObserver.observe(this.el, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['slot'],
+        });
+    }
+    disconnectHeaderSlotObserver() {
+        this.headerSlotObserver?.disconnect();
+        this.headerSlotObserver = undefined;
+    }
+    scheduleHeaderSlotSync() {
+        if (this.headerSlotSyncTimeoutId !== undefined) {
+            clearTimeout(this.headerSlotSyncTimeoutId);
+        }
+        this.headerSlotSyncTimeoutId = setTimeout(() => {
+            this.headerSlotSyncTimeoutId = undefined;
+            if (!this.el.isConnected) {
+                return;
+            }
+            this.syncHeaderSlot();
+            this.connectHeaderSlotObserver();
+        }, 0);
+    }
+    syncHeaderSlot() {
+        const projectsToHeader = (node) => {
+            if (node.closest('xpl-side-nav') !== this.el) {
+                return false;
+            }
+            return node.parentElement === this.el || node.closest('.xpl-side-nav__header') !== null;
+        };
+        const next = Array.from(this.el.querySelectorAll('[slot="nav-header"]')).some(projectsToHeader);
+        if (next !== this.hasHeaderSlot) {
+            this.hasHeaderSlot = next;
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: '3cb4a93f442dcbdea0acf45159022b06f35af657', class: {
+                'xpl-side-nav': true,
+                'xpl-side-nav--open': this.open,
+            } }, index.h("xpl-button", { key: 'e79ef7af139c6ba1321e060713fdf18ab3ea3cd9', class: "xpl-side-nav__toggle", variant: "tertiary", iconOnly: true, icon: this.open ? 'sidebar-left-hide' : 'sidebar-left-show', "aria-expanded": this.open ? 'true' : 'false', "aria-label": this.open ? 'Close navigation menu' : 'Open navigation menu', onClick: this.onToggleClick }), index.h("div", { key: '99858cfceab9a2ac92b4f8a81a987b2a3e80713c', class: "xpl-side-nav__wrapper" }, index.h("nav", { key: 'f47e3f61c810d2186d5ba29691b34106a7ca8f3f', class: "xpl-side-nav__content", "aria-label": this.label }, index.h("div", { key: '57a14d8b5dd3771134f2f624ae2c781efc2e06e1', class: "xpl-side-nav__scroll-area" }, this.hasHeaderSlot && (index.h("div", { key: '9ab9401928d3dee69d6fb62662ee6b02fc43b149', class: "xpl-side-nav__header" }, index.h("slot", { key: 'f1c0014d095bb70b0008d4ded191fae0f31f4395', name: "nav-header" }))), index.h("div", { key: 'a68ffd32329d32c19414f0853a6c6b9a011e7d94', class: "xpl-side-nav__section" }, index.h("slot", { key: '897aadd37f865fbea5a2f69b87c6d491b21ca8fd', name: "section" }))), index.h("div", { key: 'a6ef338238ed7b8d083d0553aa7e7b35c842100b', class: "xpl-side-nav__footer" }, index.h("slot", { key: '332d1e28d9567a2293586ad6ab7d1955e533a7c8', name: "nav-footer" })))), index.h("xpl-backdrop", { key: 'd593316822b8d8974a0a94ebf6c9eda84c1d6836', class: "xpl-side-nav__backdrop", onClick: this.onBackdropClick })));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "open": [{
+                "onOpenChanged": 0
+            }]
+    }; }
+};
+
+exports.xpl_side_nav = SideNav;

package/dist/cjs/xpl-skeleton.cjs.entry.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+
+const Skeleton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.shape = 'rectangle';
+        this.size = 'custom';
+    }
+    render() {
+        return (index.h(index.Host, { key: 'd5f7861a88adeaa570b9101e0b0ffc89d22c6fe1', class: {
+                'xpl-skeleton': true,
+                [`xpl-skeleton--shape-${this.shape}`]: true,
+                [`xpl-skeleton--size-${this.size}`]: true,
+                [this.classNames ?? '']: !!this.classNames,
+                'xpl-skeleton--full-width': !!this.fullWidth,
+            }, style: {
+                width: this.width || undefined,
+                height: this.height || undefined,
+                margin: this.margin || undefined,
+            } }));
+    }
+};
+
+exports.xpl_skeleton = Skeleton;

package/dist/cjs/xpl-slideout.cjs.entry.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+
+const Slideout = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.isOpenChange = index.createEvent(this, "isOpenChange", 7);
+        this.isOpen = false;
+        this.backdrop = false;
+        this.variant = 'default';
+        this.showFooter = true;
+        this.handleClose = () => {
+            this.isOpen = false;
+        };
+    }
+    watchPropHandler(newValue) {
+        this.isOpen = newValue;
+        this.isOpenChange.emit(newValue);
+    }
+    handleScroll() {
+        const content = this.el.querySelector('.content');
+        if (!content) {
+            return;
+        }
+        if (content.scrollHeight > content.clientHeight) {
+            content.classList.add('has-shadow');
+        }
+        else {
+            content.classList.remove('has-shadow');
+        }
+    }
+    componentDidLoad() {
+        this.handleScroll();
+    }
+    render() {
+        return (index.h(index.Host, { key: '9f0e122ce05688523e4bc55fbeafb584b0bacaf9', class: "xpl-slideout" }, this.backdrop && this.isOpen && (index.h("xpl-backdrop", { key: '62f708a14d6e45b9bed40b0d2587186543463a25', onClick: this.handleClose })), index.h("aside", { key: 'cb9499d3295d6cc29f2e007d12fcd80eee2bc794', class: `slideout slideout--${!this.isOpen && 'closed'}` }, index.h("header", { key: 'ca191a1c3387e69d4cff95d112d1bf834693316f', class: "header" }, index.h("div", { key: '252035d87faac31b3706a2abd4cae0fbddaaa3e8', class: "title" }, index.h("slot", { key: 'a5961cfd192bb02aec2ab6a522bf656487f4083e', name: "title" }), index.h("xpl-button", { key: 'd58b03a81b394dc6b91f86f9db5c756929796df7', class: "close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleClose }, index.h("xpl-icon", { key: '4ebb45aa90f5017f0651c190909eb4759a02dfaa', icon: "xmark" }))), index.h("div", { key: 'f67edca86dfc31bb2d69ce00f409610f5010d9a8', class: "subtitle" }, index.h("slot", { key: '390190ad442a301937d9733632fd9fd15416fe6a', name: "subtitle" })), index.h("div", { key: '8a50eae2c57ac9c1f15643758e75f821feb9c9e5', class: "search" }, index.h("slot", { key: '96ae8ec7a5a630d0e51510cf64c7888241bcfd9a', name: "search" }))), index.h("xpl-divider", { key: '467308913b114d26438b0eea2ed64642d26286c5', tier: 0, class: "divider top" }), index.h("article", { key: 'b0377d229795fc7371665df458765037da1178ad', class: "content", tabIndex: 0 }, index.h("slot", { key: 'bf4c5ee2de34e50b605465ad9f253e54be803d6d', name: "content" })), this.showFooter && (index.h("footer", { key: 'edf941b295e97010fd22b7077ed15f5ca409fe5d' }, index.h("xpl-divider", { key: '57d7514ae797fc4e309fcc3966abfea992f6aecb', tier: 0, class: "divider bottom" }), index.h("div", { key: 'df72450ab64fcc163edbbf5514c88b4e17496e51', class: "footer" }, index.h("slot", { key: '2cbb005039f013fdcf76304c470a5dbdfca58d19', name: "tertiary" }), index.h("slot", { key: '97270ca76edd0d27970f6358b78e834b8140a715', name: "secondary" }), index.h("slot", { key: 'c742e527e1ff5878f6d0fcfeb23b2c32c409e260', name: "primary" })))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "isOpen": [{
+                "watchPropHandler": 0
+            }]
+    }; }
+};
+
+exports.xpl_slideout = Slideout;