@xplortech/apollo-core 2.11.0 → 2.12.0

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

@@ -0,0 +1,373 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+
+const PILL_LABEL_ICON_SELECTORS = '.xpl-button__icon, xpl-icon, xpl-badge';
+let xplTabsInstanceCounter = 0;
+function tabHeadingLabelFromElement(tab) {
+    const pillInner = tab.querySelector('xpl-button button');
+    if (pillInner) {
+        const clone = pillInner.cloneNode(true);
+        if (clone instanceof HTMLElement) {
+            clone.querySelectorAll(PILL_LABEL_ICON_SELECTORS).forEach((node) => node.remove());
+            const text = clone.textContent?.replace(/\s+/g, ' ').trim();
+            if (text) {
+                return text;
+            }
+        }
+    }
+    const underline = tab.querySelector('.xpl-tab__button');
+    if (underline) {
+        const text = Array.from(underline.childNodes)
+            .filter((node) => node.nodeType === Node.TEXT_NODE)
+            .map((node) => (node.textContent ?? '').trim())
+            .join(' ')
+            .replace(/\s+/g, ' ')
+            .trim();
+        if (text) {
+            return text;
+        }
+    }
+    return tab.getAttribute('target') ?? '';
+}
+const Tabs = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tabChange = index.createEvent(this, "tabChange", 7);
+        this.tabHeadings = [];
+        this.tabPanels = [];
+        this.tablistKeydownBound = false;
+        this.activeBarPosition = {
+            left: 0,
+            width: 0,
+        };
+        this.choicesTick = 1;
+        this.isMobileSelectChange = false;
+        this.selectedValue = '';
+        this.disabled = false;
+        this.fullWidth = false;
+        this.type = 'tabs';
+        this.handleTabChange = (target) => {
+            this.applySelection(target);
+        };
+        this.onTablistKeydown = async (ev) => {
+            if (this.disabled) {
+                return;
+            }
+            const tabHost = ev.target?.closest?.('xpl-tab');
+            if (!tabHost || !this.tabHeadings.includes(tabHost)) {
+                return;
+            }
+            const { key } = ev;
+            const rtl = this.isTablistRtl();
+            let moveForward = false;
+            let moveBackward = false;
+            if (rtl) {
+                if (key === 'ArrowLeft' || key === 'ArrowDown') {
+                    moveForward = true;
+                }
+                else if (key === 'ArrowRight' || key === 'ArrowUp') {
+                    moveBackward = true;
+                }
+            }
+            else if (key === 'ArrowRight' || key === 'ArrowDown') {
+                moveForward = true;
+            }
+            else if (key === 'ArrowLeft' || key === 'ArrowUp') {
+                moveBackward = true;
+            }
+            const isArrow = moveForward || moveBackward;
+            const isHome = key === 'Home';
+            const isEnd = key === 'End';
+            if (!isArrow && !isHome && !isEnd) {
+                return;
+            }
+            const enabled = this.getEnabledTabHeadingsSync();
+            if (enabled.length === 0) {
+                return;
+            }
+            const currentIndex = enabled.indexOf(tabHost);
+            if (currentIndex === -1) {
+                return;
+            }
+            let nextIndex;
+            if (isArrow) {
+                if (moveForward) {
+                    nextIndex = (currentIndex + 1) % enabled.length;
+                }
+                else {
+                    nextIndex = (currentIndex - 1 + enabled.length) % enabled.length;
+                }
+            }
+            else if (isHome) {
+                nextIndex = 0;
+            }
+            else {
+                nextIndex = enabled.length - 1;
+            }
+            const nextTab = enabled[nextIndex];
+            const nextValue = nextTab?.getAttribute('target');
+            if (!nextValue) {
+                return;
+            }
+            const currentTarget = tabHost.getAttribute('target');
+            ev.preventDefault();
+            if (nextValue === currentTarget) {
+                return;
+            }
+            this.applySelection(nextValue);
+            await nextTab.focusTrigger();
+            this.tabChange.emit(nextValue);
+        };
+    }
+    onDisabledChanged() {
+        this.syncGroupDisabledOnTabs();
+        if (!this.disabled) {
+            this.syncRovingTabindex();
+        }
+    }
+    onFullWidthChanged() {
+        this.syncFullWidthOnTabs();
+    }
+    onTypeChanged() {
+        this.syncVariantOnTabs();
+    }
+    onValueChanged(newValue) {
+        this.applySelection(newValue);
+    }
+    connectedCallback() {
+        if (!this.el.hasAttribute('data-tabs-instance-id')) {
+            xplTabsInstanceCounter += 1;
+            this.el.setAttribute('data-tabs-instance-id', `xpl-tg-${xplTabsInstanceCounter}`);
+        }
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        this.observer = new MutationObserver(() => {
+            this.collectTabs(true);
+        });
+        this.observer.observe(this.el, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    disconnectedCallback() {
+        this.observer?.disconnect();
+        if (this.headingsContainerRef && this.tablistKeydownBound) {
+            this.headingsContainerRef.removeEventListener('keydown', this.onTablistKeydown);
+            this.tablistKeydownBound = false;
+        }
+        if (this.rafId !== undefined) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = undefined;
+        }
+    }
+    componentWillLoad() {
+        this.selectedValue = this.getDefaultValue();
+    }
+    componentDidLoad() {
+        this.collectTabs(false);
+        this.attachTablistKeydown();
+    }
+    componentDidUpdate() {
+        this.updateActiveBarPosition();
+        this.syncRovingTabindex();
+    }
+    componentDidRender() {
+        if (!this.tablistKeydownBound && this.headingsContainerRef) {
+            this.attachTablistKeydown();
+        }
+    }
+    onWindowResize() {
+        this.updateActiveBarPosition();
+    }
+    syncGroupDisabledOnTabs() {
+        this.tabHeadings.forEach((tabHeading) => {
+            if (this.disabled) {
+                tabHeading.setAttribute('data-group-disabled', '');
+            }
+            else {
+                tabHeading.removeAttribute('data-group-disabled');
+            }
+        });
+    }
+    applySelection(newValue) {
+        this.tabHeadings.forEach((tabHeading) => {
+            const isSelected = newValue === tabHeading.getAttribute('target');
+            if (isSelected) {
+                tabHeading.setAttribute('selected', '');
+            }
+            else {
+                tabHeading.removeAttribute('selected');
+            }
+        });
+        this.tabPanels.forEach((tabPanel) => {
+            const isSelected = newValue === tabPanel.getAttribute('target');
+            if (isSelected) {
+                tabPanel.setAttribute('selected', '');
+            }
+            else {
+                tabPanel.removeAttribute('selected');
+            }
+        });
+        this.syncGroupDisabledOnTabs();
+        if (this.rafId !== undefined) {
+            cancelAnimationFrame(this.rafId);
+        }
+        this.rafId = requestAnimationFrame(() => {
+            this.rafId = undefined;
+            this.selectedValue = newValue;
+            this.updateActiveBarPosition();
+            this.syncRovingTabindex();
+        });
+    }
+    isOwnedTabOrPanel(node) {
+        return node.closest('xpl-tabs') === this.el;
+    }
+    collectTabs(bumpChoicesTick) {
+        this.tabHeadings = Array.from(this.el.querySelectorAll('xpl-tab')).filter((tab) => this.isOwnedTabOrPanel(tab));
+        this.tabPanels = Array.from(this.el.querySelectorAll('xpl-tab-panel')).filter((panel) => this.isOwnedTabOrPanel(panel));
+        this.syncVariantOnTabs();
+        this.syncFullWidthOnTabs();
+        this.applySelection(this.getDefaultValue());
+        if (bumpChoicesTick) {
+            this.choicesTick += 1;
+        }
+    }
+    syncVariantOnTabs() {
+        this.tabHeadings.forEach((tabHeading) => {
+            tabHeading.variant = this.type;
+        });
+    }
+    syncFullWidthOnTabs() {
+        this.tabHeadings.forEach((tabHeading) => {
+            tabHeading.fullWidth = this.fullWidth;
+        });
+    }
+    getDefaultValue() {
+        return this.value || this.tabHeadings?.[0]?.getAttribute('target') || '';
+    }
+    async syncRovingTabindex() {
+        if (this.disabled) {
+            return;
+        }
+        await Promise.all(this.tabHeadings.map(async (tabHeading) => {
+            const target = tabHeading.getAttribute('target') ?? '';
+            const isSelected = target === this.selectedValue;
+            await tabHeading.setTabIndex(isSelected ? 0 : -1);
+        }));
+    }
+    getEnabledTabHeadingsSync() {
+        return this.tabHeadings.filter((tabHeading) => {
+            if (this.disabled || tabHeading.hasAttribute('disabled')) {
+                return false;
+            }
+            const btn = tabHeading.variant === 'segment'
+                ? tabHeading.querySelector('xpl-button button')
+                : tabHeading.querySelector('.xpl-tab__button');
+            return Boolean(btn && !btn.disabled);
+        });
+    }
+    attachTablistKeydown() {
+        const nav = this.headingsContainerRef;
+        if (!nav || this.tablistKeydownBound) {
+            return;
+        }
+        nav.addEventListener('keydown', this.onTablistKeydown);
+        this.tablistKeydownBound = true;
+    }
+    isTablistRtl() {
+        const nav = this.headingsContainerRef;
+        if (!nav) {
+            return false;
+        }
+        return getComputedStyle(nav).direction === 'rtl';
+    }
+    renderChoices() {
+        return this.tabHeadings.map((tabHeading) => {
+            const target = tabHeading.getAttribute('target') ?? '';
+            const tabDisabled = this.disabled || tabHeading.hasAttribute('disabled');
+            const icon = tabHeading.getAttribute('icon') || undefined;
+            return {
+                label: tabHeadingLabelFromElement(tabHeading),
+                value: target,
+                isDisabled: tabDisabled,
+                ...(icon ? { icon } : {}),
+            };
+        });
+    }
+    updateActiveBarPosition() {
+        if (this.type === 'segment') {
+            return;
+        }
+        const tabHeading = this.tabHeadings.find((heading) => heading.getAttribute('target') === this.selectedValue);
+        if (!this.headingsContainerRef || !tabHeading) {
+            return;
+        }
+        const tabRect = tabHeading.getBoundingClientRect();
+        const containerRect = this.headingsContainerRef.getBoundingClientRect();
+        const nextLeft = tabRect.left - containerRect.left;
+        const nextWidth = tabRect.width;
+        if (this.activeBarPosition.left === nextLeft &&
+            this.activeBarPosition.width === nextWidth) {
+            return;
+        }
+        this.activeBarPosition = {
+            left: nextLeft,
+            width: nextWidth,
+        };
+    }
+    mobileSelectClassNames() {
+        const base = 'xpl-tabs__mobile-select';
+        if (this.type === 'segment') {
+            return `${base} xpl-tabs__mobile-select--segment`;
+        }
+        return base;
+    }
+    render() {
+        const isSegment = this.type === 'segment';
+        return (index.h(index.Host, { key: 'a863b42f5319f956e3cd698b52c93cec54279fa5', class: {
+                'xpl-tabs': true,
+                'xpl-tabs--full-width': this.fullWidth,
+                'xpl-tabs--segment': isSegment,
+            }, "data-choices-tick": this.choicesTick }, index.h("xpl-select", { key: '4f8bf1edbb495e898576ca8024871d40a9df9073', classNames: this.mobileSelectClassNames(), choices: this.renderChoices(), disabled: this.disabled, selectedValues: this.selectedValue, onDropdownStateChange: (event) => {
+                if (event.detail) {
+                    this.isMobileSelectChange = true;
+                }
+            }, onChangeEvent: (event) => {
+                if (this.isMobileSelectChange) {
+                    const selectedValue = event.detail.toString();
+                    this.handleTabChange(selectedValue);
+                    this.tabChange.emit(selectedValue);
+                    this.isMobileSelectChange = false;
+                }
+            } }), index.h("nav", { key: 'c1e9234eb57af90d6aeff31be11ee3c6d758477f', "aria-orientation": "horizontal", class: "xpl-tabs__headings", role: "tablist", ref: (el) => {
+                this.headingsContainerRef = el;
+            }, onTabChange: (event) => {
+                event.stopPropagation();
+                this.isMobileSelectChange = false;
+                this.handleTabChange(event.detail);
+                this.tabChange.emit(event.detail);
+            } }, !isSegment && (index.h("div", { key: '86543a7b4edc639e4cf617953fa8f3cd4446895b', class: "xpl-tabs__active-bar", style: {
+                transform: `translateX(${this.activeBarPosition.left}px)`,
+                width: `${this.activeBarPosition.width}px`,
+            } })), index.h("slot", { key: '0e651ef5fb2413200e40fa95016b546926f012a3', name: "heading" })), index.h("div", { key: 'd9bd0669b7618edf56f518fe797d86da51526018', class: "xpl-tabs__panels" }, index.h("slot", { key: '7c9f18ab1d25351c57b7750c7dd1a528a14c26bb', name: "panel" }))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "disabled": [{
+                "onDisabledChanged": 0
+            }],
+        "fullWidth": [{
+                "onFullWidthChanged": 0
+            }],
+        "type": [{
+                "onTypeChanged": 0
+            }],
+        "value": [{
+                "onValueChanged": 0
+            }]
+    }; }
+};
+
+exports.xpl_tabs = Tabs;

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

@@ -0,0 +1,91 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+
+let dismissablePropDeprecationWarned = false;
+function warnDismissableDeprecation() {
+    if (dismissablePropDeprecationWarned)
+        return;
+    dismissablePropDeprecationWarned = true;
+    console.warn('[xpl-toast] The "dismissable" prop is deprecated (misspelled). Use "dismissible" instead.');
+}
+const Toast = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.caption = '';
+        this.dismissible = true;
+        this.showIcon = true;
+        this.timeout = 8000;
+        this.variant = 'neutral';
+        this.handleAnimationEnd = () => {
+            if (this.el?.classList.contains('xpl-toast--dismissed'))
+                this.el?.remove();
+        };
+        this.getIcon = () => {
+            switch (this.variant) {
+                case 'warning':
+                    return index.h("xpl-icon", { size: 24, icon: "octagon-warning" });
+                case 'success':
+                    return index.h("xpl-icon", { size: 24, icon: "circle-check" });
+                default:
+                    return index.h("xpl-icon", { size: 24, icon: "message-writing" });
+            }
+        };
+        this.dismiss = () => {
+            this.el?.classList.add('xpl-toast--dismissed');
+        };
+    }
+    handleDismissableChange() {
+        if (this.dismissable !== undefined) {
+            warnDismissableDeprecation();
+        }
+    }
+    handleTimeoutChange() {
+        this.scheduleAutoDismiss();
+    }
+    disconnectedCallback() {
+        this.clearAutoDismissTimer();
+    }
+    componentWillLoad() {
+        this.handleDismissableChange();
+    }
+    componentDidLoad() {
+        this.scheduleAutoDismiss();
+    }
+    get isDismissible() {
+        return this.dismissable ?? this.dismissible;
+    }
+    clearAutoDismissTimer() {
+        if (this.dismissTimerId !== undefined) {
+            clearTimeout(this.dismissTimerId);
+            this.dismissTimerId = undefined;
+        }
+    }
+    scheduleAutoDismiss() {
+        this.clearAutoDismissTimer();
+        const actionCount = this.actionSlot?.children?.length ?? 0;
+        if (actionCount < 1 && this.timeout > 0) {
+            this.dismissTimerId = setTimeout(() => {
+                this.dismiss();
+            }, this.timeout);
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: 'cb45af3749d6db4042cf89a296fc5215d42249fd', class: `xpl-toast xpl-toast--${this.variant}`, onAnimationEnd: this.handleAnimationEnd }, index.h("div", { key: '0af19edba28e74246fe9eabbdf314c71cb2eefb9', class: "xpl-toast__left" }, this.showIcon && (index.h("div", { key: '7684b67f9a507516799269b7c30e864ea2b854fc', class: `xpl-toast__icon xpl-toast__icon--${this.variant}` }, this.getIcon())), index.h("div", { key: '566ce59e4617b203bb4e9a02ffc07fc422257fda', class: "xpl-toast__notification" }, index.h("p", { key: 'f5a449e9dc150b12f5a364d8247a3a1247325cab', class: "xpl-toast__title" }, index.h("slot", { key: '0062ab257b833cacde007e7ca4dfa0a38d38e88f', name: "title" })), this.caption !== '' && (index.h("p", { key: '824755a3cdec234965fcedc5a9c156b173dc77ad', class: "xpl-toast__caption" }, this.caption?.substring(0, 85))))), index.h("div", { key: '241131c2221a67a5f9969d2701ab7ed8aeb2d8cf', class: "xpl-toast__action", ref: (el) => {
+                if (el) {
+                    this.actionSlot = el;
+                }
+            } }, index.h("slot", { key: '2eda8f8f3f7e3e1a4c608d5b5433557b55d3cbf7', name: "action" })), this.isDismissible && (index.h("div", { key: '92440f49d0c6356f6221471381718b314a928ee2', class: "xpl-toast__close" }, index.h("xpl-button", { key: 'eb8e975cc5361d8a9b44f6ca8bc3f5a3163c041c', variant: "tertiary", size: "sm", iconOnly: true, icon: "xmark", type: "button", "aria-label": "Dismiss notification", onClick: this.dismiss })))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "dismissable": [{
+                "handleDismissableChange": 0
+            }],
+        "timeout": [{
+                "handleTimeoutChange": 0
+            }]
+    }; }
+};
+
+exports.xpl_toast = Toast;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BaXVr8ux.js');
+var index = require('./index-3cBvw409.js');
 var v4 = require('./v4-_2BfiRUa.js');
 
 const Toggle = class {
@@ -21,13 +21,13 @@ const Toggle = class {
         let className = 'xpl-toggle';
         if (this.variant === 'small')
             className += ' xpl-toggle--small';
-        return (index.h(index.Host, { key: 'c57e1813c72cba62eed2927763277341bb0d3f77', class: containerClassName }, (this.heading || this.description) && (index.h("label", { key: '00ba33da343a47681982f6437f1cb45060d70ae9', class: {
+        return (index.h(index.Host, { key: '8088d36a67f046fc7c094b3e1426c8d533c2930e', class: containerClassName }, (this.heading || this.description) && (index.h("label", { key: '93f1f01ca1c709f77230bc4245a5a77f0f3b48df', class: {
                 'xpl-label': true,
-                'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, this.heading, this.description && (index.h("small", { key: '8ec4104abdb16ca405577f061c4cb68580317bc4', class: {
+                'xpl-label--disabled': !!this.disabled,
+            }, htmlFor: this.id }, this.heading, this.description && (index.h("small", { key: '6b39f78fc5991e00d87e792a15f16c60a176a73d', class: {
                 'xpl-description': true,
-                'xpl-description--disabled': this.disabled,
-            } }, this.description)))), index.h("input", { key: 'face83ccc22985b6d0a4c8b9e4c8dcf1d9d6b72a', class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name, onChange: this.onChange }), this.label && index.h("label", { key: 'aa89637f4b60b050a168fcf02e6702d9ed9bd186', htmlFor: this.id }, this.label)));
+                'xpl-description--disabled': !!this.disabled,
+            } }, this.description)))), index.h("input", { key: '6d178f3d74d18172f2c25370269a7eb4399dc3aa', class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name, onChange: this.onChange }), this.label && index.h("label", { key: '2c5310d15e41aedb505a8df32c65aaafc8ffbd70', htmlFor: this.id }, this.label)));
     }
 };
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BaXVr8ux.js');
+var index = require('./index-3cBvw409.js');
 
 const Toolbar = class {
     constructor(hostRef) {
@@ -16,11 +16,11 @@ const Toolbar = class {
         this.selectedItemCount = event.detail.length;
     }
     render() {
-        return (index.h(index.Host, { key: 'eda1f57ef1a207b82f622f090dd30f21d60bbc61', class: {
+        return (index.h(index.Host, { key: '6407dc110234806b694bd78e98920c96db62b678', class: {
                 'xpl-toolbar': true,
                 dark: true,
                 hidden: this.selectedItemCount === 0,
-            } }, index.h("div", { key: 'fe703bf7fb49ebe27f4eee7973ea1e24c5ed50a4', class: "toolbar" }, index.h("p", { key: 'd0d9cb84b4828688aabbabb3395ff3c18c4d2a78', class: "selected-item-count" }, this.selectedItemCount, " Selected"), index.h("div", { key: 'c1259be179d245e4c18a3690f800eb493f491ba9', class: "actions" }, index.h("slot", { key: '40000dda8efbfd0aa7175e0e5db1c1c9f4e7e89f', name: "actions-left" }), index.h("slot", { key: '255e21ebb1af8fde1bb76a1a1243eeadc4146d3d', name: "actions-right" })))));
+            } }, index.h("div", { key: '42c9e451f0f796bf8b3ed967699deb4824ae9d76', class: "toolbar" }, index.h("p", { key: 'bc5a48dfc2f431a4e88337fa792920413048e059', class: "selected-item-count" }, this.selectedItemCount, " Selected"), index.h("div", { key: 'ff4caddf1a499b238df37b5ed62543168fe32f4e', class: "actions" }, index.h("slot", { key: 'dd8225846c76dd50c943a4adc0e373717dc9c5c2', name: "actions-left" }), index.h("slot", { key: '066999024eb8cc98be2cfec8077b2afab99e3feb', name: "actions-right" })))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -0,0 +1,18 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+
+const TooltipArrow = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "13" }, index.h("path", { d: "M0.5 5h15l-7.5 7.5L0.5 5Z", fill: "white", stroke: "none", class: "xpl-tooltip-arrow__fill" }), index.h("path", { d: "M0.5 5 L8 12.5 L15.5 5", fill: "none", stroke: "black", "stroke-width": "1", class: "xpl-tooltip-arrow__stroke" })));
+
+const Tooltip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.position = 'top-middle';
+        this.hideArrow = false;
+    }
+    render() {
+        return (index.h(index.Host, { key: '1c9ac51c0d216a2822ec5637a02fa133c4055fe6' }, index.h("div", { key: '391476229ce86ce8502c7516d79a755d162c4bbb', class: "xpl-tooltip-container" }, index.h("slot", { key: '66e1f7420b538f6134170cb2ddfaaadb4f788783' }), index.h("div", { key: '017b59ec94760da135f7f4a00b042be023d7849f', class: `xpl-tooltip xpl-tooltip--${this.position}` }, this.text, !this.hideArrow && (index.h("div", { key: '248aa16bbc3a7945ce6cf57bc5ce832f3676cc91', class: "xpl-tooltip-arrow" }, index.h(TooltipArrow, { key: 'ca8a4d517630feb5833509644a335f08fa775b8b' })))))));
+    }
+};
+
+exports.xpl_tooltip = Tooltip;