@xplortech/apollo-core 2.11.0 → 3.0.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: '33de33212fc2c0fe5ed3ae6cd8aba38178052a03', 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: 'd9e6ea08b992177a943eb43e64702deee74a95d8', class: `xpl-side-nav-item__children ${this.expanded ? 'expanded' : ''}`, inert: !this.expanded ? true : undefined }, index.h("div", { key: '7a5709e3c20d569fbc7ab1425280096dc21cb40f', class: "xpl-side-nav-item__children-inner" }, index.h("slot", { key: '883d0336ad81eb78b52dab740440191e57f92618' }))))));
+    }
+    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: 'c3a19938fa87b21552b5fdff800baf2ee97c186c', class: "xpl-side-nav-section__title" }, this.heading ?? ''),
+            index.h("span", { key: '9303238b226f336cbf0527ef91c2c5d8bce7771c', class: "xpl-side-nav-section__badge", hidden: !this.hasBadgeSlot }, index.h("slot", { key: '40921f618390e462b0ac69adc0206acd82b884ca', 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: 'fae9c5e2d179a174aae5114a21a442fa787269ad', 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: 'c33a5478f2c226b915fddf006802312eb7de29e9', id: childrenId, class: {
+                'xpl-side-nav-section__children': true,
+                expanded: showChildren,
+            }, inert: !showChildren ? true : undefined }, index.h("div", { key: 'ed7de4040c1e5677ad3b74eb65fc4f6357bab3b6', class: "xpl-side-nav-section__children-inner" }, index.h("slot", { key: '3f8434e92bb7fcdd7c8a825481a12ef24ba1da28' })))));
+    }
+    get el() { return index.getElement(this); }
+};
+
+exports.xpl_side_nav_section = SideNavSection;

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

@@ -0,0 +1,276 @@
+'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 headerNodes = Array.from(this.el.querySelectorAll('[slot="nav-header"]')).filter(projectsToHeader);
+        const next = headerNodes.length > 0;
+        if (next !== this.hasHeaderSlot) {
+            this.hasHeaderSlot = next;
+            return;
+        }
+        if (next && headerNodes.some((node) => node.parentElement === this.el))
+            index.forceUpdate(this);
+    }
+    render() {
+        return (index.h(index.Host, { key: '9d8ca908a77dd47e5789708ebb87e0e76ac5a22e', class: {
+                'xpl-side-nav': true,
+                'xpl-side-nav--open': this.open,
+            } }, index.h("xpl-button", { key: 'eab3df496e7ec249b78f76e9250361b1dccc3cd6', 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: '4f46792c09ff5c98ae87f27bfb3050c74b847c3f', class: "xpl-side-nav__wrapper" }, index.h("nav", { key: '55a34c0ba7498f7ad531b519d5d9e6f6a225cfc9', class: "xpl-side-nav__content", "aria-label": this.label }, index.h("div", { key: '8ff330aef09d3ae1624f8752efbff3a2720e55c5', class: "xpl-side-nav__scroll-area" }, this.hasHeaderSlot && (index.h("div", { key: '19c0235f1b45454cbe8fd9403351cfabebc5f539', class: "xpl-side-nav__header" }, index.h("slot", { key: '77a3a18b401714a746c8d8f0d2457e9a949068ca', name: "nav-header" }))), index.h("div", { key: '8a7c00b508d238f0043dc5dfc6c141d7255967bd', class: "xpl-side-nav__section" }, index.h("slot", { key: 'b4b11bf6937840704cb9d40483e6b19014bd5236', name: "section" }))), index.h("div", { key: '766bcd4652c5c680975a3c61c4b2fe4759351a4e', class: "xpl-side-nav__footer" }, index.h("slot", { key: '04acabfdb7f27e8ed6b6569001493f985f344a1e', name: "nav-footer" })))), index.h("xpl-backdrop", { key: '9e0c074fbb705e7b665672c79ed85e62e28d2e95', 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: '4c8f4f0e0742c67f965d04aed382259cd120d922', 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: '0031856dad46059b22c544b17d9c3c486fad49ef', class: "xpl-slideout" }, this.backdrop && this.isOpen && (index.h("xpl-backdrop", { key: '476ebe60d3761a12edce8a70b79c5458a3a49b88', onClick: this.handleClose })), index.h("aside", { key: 'e093e4f88719d109e1b76e5843fa799adf77023a', class: `slideout slideout--${!this.isOpen && 'closed'}` }, index.h("header", { key: '861ce3bafb6f104cd088788e86d5dec891d34559', class: "header" }, index.h("div", { key: 'f4a9a82d62a118acf4847ae32f6699755103cdeb', class: "title" }, index.h("slot", { key: '142fabb21a5894d0e505b3555b1de49a3457f01a', name: "title" }), index.h("xpl-button", { key: 'b5424c903db35139aca7070a223c3e8ccad0286d', class: "close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleClose }, index.h("xpl-icon", { key: 'a7597b061ba78ec8877f4ca119ddfe4fb6f07057', icon: "xmark" }))), index.h("div", { key: 'fbd6496bcd1854cbbe584a62a27621cc6c730472', class: "subtitle" }, index.h("slot", { key: 'a9a059571945b74f064d1b4c6a672a7964ff20d7', name: "subtitle" })), index.h("div", { key: '575d405c99e6a0ded114d274832d7c9a119f8acd', class: "search" }, index.h("slot", { key: '6db25fde2a6decdfe2f280aae9f784b1e992d070', name: "search" }))), index.h("xpl-divider", { key: 'dd382afb3181fbad00b1efacd438842c23249978', tier: 0, class: "divider top" }), index.h("article", { key: 'a8832b326372ede5872d2004308f8dff30955e1a', class: "content", tabIndex: 0 }, index.h("slot", { key: 'e46c7df8ebc6caecbc82117dd7b5097377dcf163', name: "content" })), this.showFooter && (index.h("footer", { key: '41e237ffa63f9dfc50ca1792848f4087375edecc' }, index.h("xpl-divider", { key: '888ece8b783152856696cf792c1db7abedd393fa', tier: 0, class: "divider bottom" }), index.h("div", { key: '4ee6dcf7cb794ca32c3e0095b9d3ffdda2578870', class: "footer" }, index.h("slot", { key: '286ecc097c88e7b6655fb27f707cb6163e49374b', name: "tertiary" }), index.h("slot", { key: '9154a9de3de154cb8f228a00875d81b4c8d1899a', name: "secondary" }), index.h("slot", { key: 'c510b271b930b8419b8ed26e4a9ce444453f9330', name: "primary" })))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "isOpen": [{
+                "watchPropHandler": 0
+            }]
+    }; }
+};
+
+exports.xpl_slideout = Slideout;