@xplortech/apollo-core 2.11.0 → 2.12.0

package/dist/esm/xpl-pagination.entry.js

@@ -0,0 +1,110 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-ukZKsqqq.js';
+
+const Pagination = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.pageChange = createEvent(this, "pageChange", 7);
+        this.rowsPerPageChange = createEvent(this, "rowsPerPageChange", 7);
+        this.totalPages = 1;
+        this.withPageControl = false;
+        this.currentPage = 1;
+        this.rowsPerPageOptions = '10,25,50,100,150';
+        this.selectedRowsPerPage = 10;
+        this.rowsPerPageSelectRef = null;
+        this.pageSelectRef = null;
+        this.pageChoices = [];
+        this.handleNextPage = () => {
+            if (this.currentPage < this.totalPages) {
+                this.currentPage += 1;
+            }
+        };
+        this.handlePrevPage = () => {
+            if (this.currentPage > 1) {
+                this.currentPage -= 1;
+            }
+        };
+        this.handlePageChange = (event) => {
+            const newValue = parseInt(event.detail, 10);
+            if (!Number.isNaN(newValue)) {
+                this.currentPage = newValue;
+            }
+        };
+        this.handleRowsChange = (event) => {
+            const newValue = parseInt(event.detail, 10);
+            if (!Number.isNaN(newValue)) {
+                this.selectedRowsPerPage = newValue;
+            }
+        };
+    }
+    get rowsPerPageOptionsArray() {
+        return this.rowsPerPageOptions.split(',').map(Number);
+    }
+    onPageUpdate(newValue) {
+        if (newValue < 1) {
+            this.currentPage = 1;
+        }
+        else if (newValue > this.totalPages) {
+            this.currentPage = this.totalPages;
+        }
+        this.buildPageChoices();
+        this.pageChange.emit(this.currentPage);
+    }
+    onTotalPagesUpdate() {
+        if (this.currentPage > this.totalPages) {
+            this.currentPage = this.totalPages;
+            return;
+        }
+        this.buildPageChoices();
+    }
+    onRowsPerPageUpdate(newValue) {
+        this.rowsPerPageChange.emit(newValue);
+    }
+    buildPageChoices() {
+        this.pageChoices = Array.from({ length: this.totalPages }, (_, index) => ({
+            label: `Page ${index + 1}`,
+            value: (index + 1).toString(),
+            isSelected: index + 1 === this.currentPage,
+        }));
+    }
+    componentWillLoad() {
+        this.buildPageChoices();
+    }
+    componentDidLoad() {
+        this.rowsPerPageSelectRef?.addEventListener('changeEvent', this.handleRowsChange);
+        this.pageSelectRef?.addEventListener('changeEvent', this.handlePageChange);
+    }
+    disconnectedCallback() {
+        this.rowsPerPageSelectRef?.removeEventListener('changeEvent', this.handleRowsChange);
+        this.pageSelectRef?.removeEventListener('changeEvent', this.handlePageChange);
+    }
+    render() {
+        const disablePrev = this.currentPage <= 1;
+        const disableNext = this.currentPage >= this.totalPages;
+        return (h(Host, { key: '9184904c32aa8d4e552f9493f343a162b8f2d8ee', class: {
+                'xpl-pagination': true,
+                'xpl-pagination__with-page-control': this.withPageControl,
+                'xpl-pagination__no-page-control': !this.withPageControl,
+            } }, this.withPageControl && (h("div", { key: '26febbb3a6bf061bfcf8d61190dc7947aa04efb1', class: "xpl-pagination__rows-per-page" }, h("label", { key: '7a5b406ee8bfd2582e8b543db14b39a493ff2d9c', class: "xpl-pagination__rows-label" }, "Rows per page:"), h("xpl-select", { key: 'd82e693f4ada5897f163ae5243c047348be63a08', class: "xpl-pagination__rows-per-page-select", dropdownFlipFallbackPlacements: ['bottom-start'], dropdownPlacement: "top-start", choices: this.rowsPerPageOptionsArray.map((option) => ({
+                label: option.toString(),
+                value: option.toString(),
+                isSelected: option === this.selectedRowsPerPage,
+            })), ref: (el) => {
+                this.rowsPerPageSelectRef = el ?? null;
+            } }))), h("div", { key: '23fdb444921471c1121a82f6b17050beea69a93c', class: "xpl-pagination__pager" }, h("button", { key: 'bae0457c8c0cda02feb837de3c20965aabc937c0', class: "xpl-pagination__pager-button xpl-pagination__pager-button-prev", disabled: disablePrev, onClick: this.handlePrevPage, "aria-label": "Previous Page", tabindex: "0" }, h("xpl-icon", { key: '714f2d15b2e2c129d2bd70c28858ac95ae3518a7', icon: "arrow-left", size: 20 })), h("xpl-select", { key: 'c52b9974fc675706cdcfe43fe939225a4561cef5', class: "xpl-pagination__page-select", dropdownFlipFallbackPlacements: ['bottom-start'], dropdownPlacement: "top-start", choices: this.pageChoices, "custom-display-value": true, ref: (el) => {
+                this.pageSelectRef = el ?? null;
+            } }, h("div", { key: '7dcc6c4b3f0b0470986006c2ab7dbcfcbaba0f92', slot: "custom-display-value" }, `${this.currentPage} of ${this.totalPages}`)), h("button", { key: '0afaf6e4b4acd626e7972c0fb5d5f8aad1e16f2a', class: "xpl-pagination__pager-button xpl-pagination__pager-button-next", disabled: disableNext, onClick: this.handleNextPage, "aria-label": "Next Page", tabindex: "0" }, h("xpl-icon", { key: '3759f242a05741cf53938539cd69b9074c6cf323', icon: "arrow-right", size: 20 })))));
+    }
+    static get watchers() { return {
+        "currentPage": [{
+                "onPageUpdate": 0
+            }],
+        "totalPages": [{
+                "onTotalPagesUpdate": 0
+            }],
+        "selectedRowsPerPage": [{
+                "onRowsPerPageUpdate": 0
+            }]
+    }; }
+};
+
+export { Pagination as xpl_pagination };

package/dist/esm/xpl-panel.entry.js

@@ -0,0 +1,19 @@
+import { r as registerInstance, h, H as Host } from './index-ukZKsqqq.js';
+
+const XplPanel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.accent = 'none';
+        this.padding = 'default';
+    }
+    render() {
+        const hasAccent = this.accent !== 'none';
+        return (h(Host, { key: '2be99cac0dda8442b54752745f3bf647df334e70', class: {
+                'xpl-panel': true,
+                [`xpl-panel--accent-${this.accent}`]: hasAccent,
+                [`xpl-panel--padding-${this.padding}`]: true,
+            } }, hasAccent && h("div", { key: 'ff25fa59eff4d886540a5abc3b637478b533b23b', "aria-hidden": "true", class: "xpl-panel__accent" }), h("div", { key: '415205b25333615cfe22d41fdfaf4e114547746b', class: "xpl-panel__content" }, h("slot", { key: '5573ed5bb1cb102720d2c6e1245656fba8d36b8f' }))));
+    }
+};
+
+export { XplPanel as xpl_panel };

package/dist/esm/xpl-popover.entry.js

@@ -0,0 +1,263 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-ukZKsqqq.js';
+import { t as throttle } from './index-BhYfWG18.js';
+import './_commonjsHelpers-BFTU3MAI.js';
+
+const Popover = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.isOpenChange = createEvent(this, "isOpenChange", 7);
+        this.isOpen = false;
+        this.disabled = false;
+        this.position = 'bottom-middle';
+        this.display = 'arrow';
+        this.isOpenState = this.isOpen;
+        this.actualPosition = this.position;
+        this.togglePopover = () => {
+            if (this.disabled) {
+                return;
+            }
+            this.isOpenState = !this.isOpenState;
+        };
+        this.handleKeyDown = (e) => {
+            if (e.key === 'Escape' && this.isOpenState) {
+                this.isOpenState = false;
+            }
+        };
+        this.handleClickOutside = ({ target }) => {
+            if (!target || !(target instanceof Node)) {
+                return;
+            }
+            const isInside = this.el.contains(target);
+            if (!isInside && this.isOpenState) {
+                this.isOpenState = false;
+            }
+        };
+        this.handleWindowBlur = () => {
+            if (!this.isOpenState) {
+                return;
+            }
+            if (this.blurCloseTimeoutId !== undefined) {
+                clearTimeout(this.blurCloseTimeoutId);
+            }
+            this.blurCloseTimeoutId = setTimeout(() => {
+                this.blurCloseTimeoutId = undefined;
+                const active = document.activeElement;
+                if (this.isOpenState &&
+                    active instanceof HTMLIFrameElement &&
+                    !this.el.contains(active)) {
+                    this.isOpenState = false;
+                }
+            }, 0);
+        };
+    }
+    onIsOpenPropChange(newValue) {
+        this.isOpenState = newValue;
+    }
+    onIsOpenStateChange(newValue) {
+        this.updateActualPosition(newValue);
+        this.isOpenChange.emit(newValue);
+    }
+    updateActualPosition(opened) {
+        const { triggerRef } = this;
+        const { contentRef } = this;
+        if (!triggerRef || !contentRef || !opened) {
+            return;
+        }
+        const preferredOrderMap = {
+            'top-left': [
+                'top-left',
+                'bottom-left',
+                'top-right',
+                'bottom-right',
+                'top-middle',
+                'bottom-middle',
+            ],
+            'bottom-left': [
+                'bottom-left',
+                'top-left',
+                'bottom-right',
+                'top-right',
+                'bottom-middle',
+                'top-middle',
+            ],
+            'top-right': [
+                'top-right',
+                'bottom-right',
+                'top-left',
+                'bottom-left',
+                'top-middle',
+                'bottom-middle',
+            ],
+            'bottom-right': [
+                'bottom-right',
+                'top-right',
+                'bottom-left',
+                'top-left',
+                'bottom-middle',
+                'top-middle',
+            ],
+            'middle-left': [
+                'middle-left',
+                'middle-right',
+                'bottom-left',
+                'top-left',
+                'bottom-middle',
+                'top-middle',
+            ],
+            'middle-right': [
+                'middle-right',
+                'middle-left',
+                'bottom-right',
+                'top-right',
+                'bottom-middle',
+                'top-middle',
+            ],
+            'top-middle': [
+                'top-middle',
+                'top-start',
+                'top-end',
+                'bottom-middle',
+                'top-left',
+                'top-right',
+            ],
+            'bottom-middle': [
+                'bottom-middle',
+                'bottom-start',
+                'bottom-end',
+                'top-middle',
+                'bottom-left',
+                'bottom-right',
+            ],
+            'top-start': [
+                'top-start',
+                'bottom-start',
+                'top-end',
+                'bottom-end',
+                'top-middle',
+                'bottom-middle',
+            ],
+            'top-end': [
+                'top-end',
+                'bottom-end',
+                'top-start',
+                'bottom-start',
+                'top-middle',
+                'bottom-middle',
+            ],
+            'bottom-start': [
+                'bottom-start',
+                'top-start',
+                'bottom-end',
+                'top-end',
+                'bottom-middle',
+                'top-middle',
+            ],
+            'bottom-end': [
+                'bottom-end',
+                'top-end',
+                'bottom-start',
+                'top-start',
+                'bottom-middle',
+                'top-middle',
+            ],
+        };
+        const fitsPosition = (position) => {
+            const { top: triggerTop, left: triggerLeft, bottom: triggerBottom, right: triggerRight, } = triggerRef.getBoundingClientRect();
+            const { width: popoverWidth, height: popoverHeight } = contentRef.getBoundingClientRect();
+            const { innerWidth: screenWidth, innerHeight: screenHeight } = window;
+            const visibleBottom = triggerBottom + popoverHeight < screenHeight;
+            const visibleTop = triggerTop - popoverHeight >= 0;
+            const visibleLeft = triggerLeft - popoverWidth >= 0;
+            const visibleRight = triggerRight + popoverWidth < screenWidth;
+            const triggerCenterY = (triggerTop + triggerBottom) / 2;
+            const visibleVerticallyMiddle = (horizontallyVisible) => horizontallyVisible &&
+                triggerCenterY - popoverHeight / 2 >= 0 &&
+                triggerCenterY + popoverHeight / 2 <= screenHeight;
+            const triggerCenterX = (triggerLeft + triggerRight) / 2;
+            const visibleHorizontallyMiddle = (verticallyVisible) => verticallyVisible &&
+                triggerCenterX - popoverWidth / 2 >= 0 &&
+                triggerCenterX + popoverWidth / 2 <= screenWidth;
+            const fitsAlignedStart = triggerLeft + popoverWidth < screenWidth;
+            const fitsAlignedEnd = triggerRight - popoverWidth >= 0;
+            switch (position) {
+                case 'top-left':
+                    return visibleBottom && visibleLeft;
+                case 'middle-left':
+                    return visibleVerticallyMiddle(visibleLeft);
+                case 'bottom-left':
+                    return visibleTop && visibleLeft;
+                case 'top-right':
+                    return visibleBottom && visibleRight;
+                case 'middle-right':
+                    return visibleVerticallyMiddle(visibleRight);
+                case 'bottom-right':
+                    return visibleTop && visibleRight;
+                case 'top-middle':
+                    return visibleHorizontallyMiddle(visibleTop);
+                case 'bottom-middle':
+                    return visibleHorizontallyMiddle(visibleBottom);
+                case 'top-start':
+                    return visibleTop && fitsAlignedStart;
+                case 'top-end':
+                    return visibleTop && fitsAlignedEnd;
+                case 'bottom-start':
+                    return visibleBottom && fitsAlignedStart;
+                case 'bottom-end':
+                    return visibleBottom && fitsAlignedEnd;
+                default:
+                    return false;
+            }
+        };
+        const preferredOrder = preferredOrderMap[this.position];
+        const actual = preferredOrder.find(fitsPosition) || this.position;
+        this.actualPosition = actual;
+    }
+    connectedCallback() {
+        document.addEventListener('mousedown', this.handleClickOutside);
+        document.addEventListener('keydown', this.handleKeyDown);
+        window.addEventListener('blur', this.handleWindowBlur);
+        this.updateListener = throttle(() => {
+            this.updateActualPosition(this.isOpenState);
+        });
+        ['resize', 'scroll'].forEach((event) => {
+            window.addEventListener(event, this.updateListener, {
+                passive: true,
+            });
+        });
+    }
+    disconnectedCallback() {
+        if (this.blurCloseTimeoutId !== undefined) {
+            clearTimeout(this.blurCloseTimeoutId);
+            this.blurCloseTimeoutId = undefined;
+        }
+        document.removeEventListener('mousedown', this.handleClickOutside);
+        document.removeEventListener('keydown', this.handleKeyDown);
+        window.removeEventListener('blur', this.handleWindowBlur);
+        ['resize', 'scroll'].forEach((event) => {
+            window.removeEventListener(event, this.updateListener);
+        });
+    }
+    render() {
+        return (h(Host, { key: '0e697fc04e3fd17595eb05f70104c6ffaa2c641c' }, h("div", { key: '749de61a600d9eb55074910d3093217b3fb08863', class: {
+                'xpl-popover': true,
+                [`xpl-popover--${this.actualPosition}`]: true,
+                'xpl-popover--is-open': this.isOpenState,
+            } }, h("span", { key: 'd42b2a4893a5dc18e4298e5ed79eac0c93996385', role: "button", tabindex: "0", "aria-haspopup": "dialog", "aria-expanded": this.isOpenState ? 'true' : 'false', onClick: this.togglePopover, ref: (el) => {
+                this.triggerRef = el;
+            } }, h("slot", { key: 'e99d7e89b3d825ae716a93c423d31854914e5fa9', name: "trigger" })), this.display === 'arrow' && (h("div", { key: '18809dc747e4646920238a0b05e54be568e63311', class: "xpl-popover__arrow" }, h("svg", { key: 'b3f78f3c82cc0969cd4c36117f562eb538864cbe', width: "17", height: "14", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'c2f12882970e1e599e7e508e5cd57210b7d08015', d: "M0 5h15l-7.5 7.5L0 5Z", fill: "white", stroke: "none", class: "arrow-fill" }), h("path", { key: 'bce5aecd1ee49ae8252a27bf8db0677c891beb54', d: "M0 5 L7.5 12.5 L15 5", fill: "none", stroke: "black", "stroke-width": "1", class: "arrow-stroke" })))), h("div", { key: 'd970490de0d7ed8413afcc8fa1b1f0985352b796', class: {
+                'xpl-popover__content': true,
+                [`xpl-popover__content--display-${this.display}`]: true,
+            }, ref: (el) => (this.contentRef = el) }, h("slot", { key: '742a4d13a4bb0e21ab0135f316bfec76da6fde82' })))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "isOpen": [{
+                "onIsOpenPropChange": 0
+            }],
+        "isOpenState": [{
+                "onIsOpenStateChange": 0
+            }]
+    }; }
+};
+
+export { Popover as xpl_popover };

package/dist/esm/xpl-progress-bar.entry.js

@@ -0,0 +1,39 @@
+import { r as registerInstance, h, H as Host } from './index-ukZKsqqq.js';
+
+const ProgressBar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.max = 100;
+        this.size = 'lg';
+        this.value = 0;
+        this.variant = 'default';
+    }
+    get clampedValue() {
+        return Math.max(0, Math.min(this.max, this.value));
+    }
+    get isComplete() {
+        return this.value >= this.max && this.variant === 'default';
+    }
+    get isError() {
+        return this.variant === 'error';
+    }
+    get isSuccess() {
+        return this.variant === 'success' || this.isComplete;
+    }
+    get showStatusIcon() {
+        return this.isSuccess || this.isError;
+    }
+    get isIndeterminate() {
+        return this.variant === 'indeterminate';
+    }
+    render() {
+        return (h(Host, { key: 'e6c2e96d1af4b56204eba288d35b065fbe7d3c71', class: {
+                'xpl-progress-bar': true,
+                [`xpl-progress-bar--${this.size}`]: true,
+                [`xpl-progress-bar--${this.variant}`]: true,
+                'xpl-progress-bar--complete': this.isComplete,
+            } }, h("div", { key: '5d8e7731bf5588c8549398dca087e7f39078eec0', class: "xpl-progress-bar__wrapper" }, (this.label || this.showStatusIcon) && (h("div", { key: 'b36f70ed46b5a8dd46a9f8ea0b5188b90f33741e', class: "xpl-progress-bar__header" }, this.label && h("div", { key: '1fed869f23b4c449c56ff4b40d79fe315118de94', class: "xpl-progress-bar__label" }, this.label), this.showStatusIcon && (h("div", { key: '8ec535833016b380a133599311aa02f8a7765901', class: "xpl-progress-bar__icon" }, this.isError ? (h("xpl-icon", { icon: "circle-xmark-1" })) : (h("xpl-icon", { icon: "circle-check-1" })))))), h("div", { key: 'ea1e88ff71d2e10a71df1c6d63269b16b0c03129', class: "xpl-progress-bar__row" }, this.isIndeterminate ? (h("div", { class: "xpl-progress-bar__track xpl-progress-bar__track--indeterminate", role: "progressbar", "aria-label": this.label || 'Progress' }, h("div", { class: "xpl-progress-bar__indeterminate" }))) : (h("progress", { class: "xpl-progress-bar__progress", value: this.clampedValue, max: this.max, "aria-label": this.label || 'Progress' }))), this.helperText && (h("div", { key: '71a2ceee37369f823b598f385dd895b807693aa1', class: "xpl-progress-bar__helper" }, this.helperText)))));
+    }
+};
+
+export { ProgressBar as xpl_progress_bar };

package/dist/esm/xpl-progress-indicator.entry.js

@@ -0,0 +1,72 @@
+import { r as registerInstance, h, H as Host } from './index-ukZKsqqq.js';
+
+const ProgressIndicator = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.currentStep = 0;
+        this.layout = 'horizontal';
+        this.showLabels = true;
+        this.showNumbers = true;
+    }
+    validateCurrentStep() {
+        if (!this.steps || this.steps.length === 0)
+            return;
+        const max = this.steps.length;
+        if (this.currentStep < 0) {
+            this.currentStep = 0;
+        }
+        else if (this.currentStep > max) {
+            this.currentStep = max;
+        }
+    }
+    renderStepContent(index, isFinished) {
+        if (isFinished) {
+            return (h("xpl-icon", { icon: "check-2", size: 20, class: "xpl-progress-indicator-step-checkmark" }));
+        }
+        if (!this.showNumbers) {
+            return h("span", { class: "xpl-progress-indicator-step-dot" });
+        }
+        return h("span", { class: "xpl-progress-indicator-step-number" }, index + 1);
+    }
+    renderStep(step, index) {
+        const isFinished = this.currentStep > index;
+        const isActive = this.currentStep === index;
+        const isHorizontal = this.layout === 'horizontal';
+        const circle = (h("div", { class: "xpl-progress-indicator-step-circle" }, this.renderStepContent(index, isFinished)));
+        const label = this.showLabels && h("div", { class: "xpl-progress-indicator-step-text" }, step);
+        const content = isHorizontal ? (h("div", { class: "xpl-progress-indicator-step-content" }, circle, label)) : ([circle, label]);
+        return (h("div", { class: {
+                'xpl-progress-indicator-step': true,
+                'xpl-progress-indicator-step-active': isActive,
+                'xpl-progress-indicator-step-finished': isFinished,
+            }, role: "listitem", "aria-label": `${step}, ${isFinished ? 'completed' : isActive ? 'current' : 'upcoming'}`, "aria-current": isActive ? 'step' : undefined }, content));
+    }
+    render() {
+        const steps = this.steps || [];
+        const hostClasses = {
+            'xpl-progress-indicator': true,
+            'xpl-progress-indicator-horizontal': this.layout === 'horizontal',
+            'xpl-progress-indicator-vertical': this.layout === 'vertical',
+            'xpl-progress-indicator-no-labels': !this.showLabels,
+        };
+        const totalSteps = steps.length;
+        const allComplete = this.currentStep >= totalSteps;
+        const currentStepNumber = Math.min(this.currentStep + 1, totalSteps);
+        const ariaLabel = totalSteps > 0
+            ? allComplete
+                ? `Progress: all ${totalSteps} ${totalSteps === 1 ? 'step' : 'steps'} complete`
+                : `Progress: step ${currentStepNumber} of ${totalSteps}`
+            : 'Progress';
+        return (h(Host, { key: 'bba19d0d09e3bf9ae1fa1e04824f84f4a74b3431', class: hostClasses, role: "group", "aria-label": ariaLabel }, h("div", { key: '529becbce8bfcc02ddf0f4de3c550bfef94ec7ba', class: "xpl-progress-indicator-container", role: "list" }, steps.map((step, index) => this.renderStep(step, index)))));
+    }
+    static get watchers() { return {
+        "steps": [{
+                "validateCurrentStep": 0
+            }],
+        "currentStep": [{
+                "validateCurrentStep": 0
+            }]
+    }; }
+};
+
+export { ProgressIndicator as xpl_progress_indicator };

package/dist/esm/xpl-secondary-nav.entry.js

@@ -0,0 +1,12 @@
+import { r as registerInstance, h, H as Host } from './index-ukZKsqqq.js';
+
+const SecondaryNav = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: '9d5cdbf77eba7913892f083ccaab8f878455c11e', class: "xpl-secondary-nav" }, h("nav", { key: '4b56938320beada9e879c71866c3c48d37020f47', "aria-label": "Secondary Nav" }, h("slot", { key: '613ff6145ce13a4eee2b2dcae31b63eb89a860d0' }))));
+    }
+};
+
+export { SecondaryNav as xpl_secondary_nav };