@xplortech/apollo-core 2.11.0 → 3.0.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: '74e82ed3665bf7d8337d16f6253c2ae79d421473', class: {
+                'xpl-tabs': true,
+                'xpl-tabs--full-width': this.fullWidth,
+                'xpl-tabs--segment': isSegment,
+            }, "data-choices-tick": this.choicesTick }, index.h("xpl-select", { key: '8b706667897c20145cdd528b692affb0db7f7ebc', 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: 'd23f6edc5da0525e4c8fc10aa30af64986fdda36', "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: 'd2d080ffc049a408f2d93f3ce3bc694c0954ece3', class: "xpl-tabs__active-bar", style: {
+                transform: `translateX(${this.activeBarPosition.left}px)`,
+                width: `${this.activeBarPosition.width}px`,
+            } })), index.h("slot", { key: '8c4b1403048b0eba5125abfc22494641aaf955cf', name: "heading" })), index.h("div", { key: '54a04bd883f364457cdf5922cad8ac2b42eceb61', class: "xpl-tabs__panels" }, index.h("slot", { key: '2b51ebd00605dfbd76c6018d74f63f954016a025', 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: '8628e33a84d0ca36d5b99c791cf7860cadae6fb8', class: `xpl-toast xpl-toast--${this.variant}`, onAnimationEnd: this.handleAnimationEnd }, index.h("div", { key: 'd1ea50362731f7cef97152eac2962f4d4084c514', class: "xpl-toast__left" }, this.showIcon && (index.h("div", { key: '7eab4f78d0f8a2f5af12eeb1d74b14c300914841', class: `xpl-toast__icon xpl-toast__icon--${this.variant}` }, this.getIcon())), index.h("div", { key: '335be6f702b7300498d2960cb7184fe1fec059b4', class: "xpl-toast__notification" }, index.h("p", { key: '1178d039190352d0482ae7486711ab2adfd2cc8f', class: "xpl-toast__title" }, index.h("slot", { key: '75a98536db36c7a140b3d908cbd8f3d2e201ca81', name: "title" })), this.caption !== '' && (index.h("p", { key: '009bba836fe9abbf34edf4618dd172961e9440fa', class: "xpl-toast__caption" }, this.caption?.substring(0, 85))))), index.h("div", { key: '4f47e498ea0c7627d9041a7a2e898fcecff9f59c', class: "xpl-toast__action", ref: (el) => {
+                if (el) {
+                    this.actionSlot = el;
+                }
+            } }, index.h("slot", { key: '6ad3199d265b1298ea8200ba53690dcc92bdbf92', name: "action" })), this.isDismissible && (index.h("div", { key: 'b1a1a790a592f5e4c7573c819b0c997a210bd68a', class: "xpl-toast__close" }, index.h("xpl-button", { key: '2d9ad71fc8f8233f2fc12453ca8268fd5f1d8f74', 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: '20b5e00613ac0f2567224d3ff2bcd7b7f761a8fc', class: containerClassName }, (this.heading || this.description) && (index.h("label", { key: 'a41dfe6403c629ef05792ba8dc7f0632fca9ca37', 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: 'b0e1d30a0f5b358a7f588d3f8f0bc32f440b69df', 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: 'a59406c7cccf8a43349841bb060496ce0832823f', 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: '276ce3ec937627fd9d21f2b3771d9c779c5f91f1', 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: 'd834b3f68a399f33c02e2a7d85623d9fbe2a21e2', 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: '54c4638e003685ade49f243f688e3ff5997f8759', class: "toolbar" }, index.h("p", { key: '92815a7d1b10582742906aefa0ee9ef81311c459', class: "selected-item-count" }, this.selectedItemCount, " Selected"), index.h("div", { key: 'dc1b9ee686a57bd7bca45785f90586751770f556', class: "actions" }, index.h("slot", { key: '2cc26af5467e9ad44962bd1ac65f0b1087f86f7f', name: "actions-left" }), index.h("slot", { key: 'f5f46662191f52c79f81ffd1ce47a492041c10ad', 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: '834ba80f410bd7ed079b674b6f1d110235aaf826' }, index.h("div", { key: 'e45a7048339ce835ecabf5ef832a5ef2df6ded70', class: "xpl-tooltip-container" }, index.h("slot", { key: 'f56272df982aa6dc72ba2bf9776017235223de95' }), index.h("div", { key: 'c5b1054301d08e1b83da61b565f0116f83f395c7', class: `xpl-tooltip xpl-tooltip--${this.position}` }, this.text, !this.hideArrow && (index.h("div", { key: 'e6a833629cf409644969d9c4da461a2016f2986b', class: "xpl-tooltip-arrow" }, index.h(TooltipArrow, { key: '7a5893a25978635864ada200aea48660ca90d33c' })))))));
+    }
+};
+
+exports.xpl_tooltip = Tooltip;