@xplortech/apollo-core 2.11.0 → 3.0.0

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

@@ -0,0 +1,112 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+
+const Pagination = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pageChange = index.createEvent(this, "pageChange", 7);
+        this.rowsPerPageChange = index.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 (index.h(index.Host, { key: '23b4aec5d70fcfa1ec02089716f7649d15fcb0ca', class: {
+                'xpl-pagination': true,
+                'xpl-pagination__with-page-control': this.withPageControl,
+                'xpl-pagination__no-page-control': !this.withPageControl,
+            } }, this.withPageControl && (index.h("div", { key: '2383d3488dc1435f1384f98cf07459cfb6ccb1bc', class: "xpl-pagination__rows-per-page" }, index.h("label", { key: 'be3f5e3815a11f5cb02710d253e02e10fdf6236d', class: "xpl-pagination__rows-label" }, "Rows per page:"), index.h("xpl-select", { key: 'dd06add7fde18b8616b18fc945e78457ddedb8b7', 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;
+            } }))), index.h("div", { key: '9a41a8e940f04ba2da9a7e9331d5ff496043771f', class: "xpl-pagination__pager" }, index.h("button", { key: 'cfe0a954aaa79e5b8af00a86d384bf9d1d2831b8', class: "xpl-pagination__pager-button xpl-pagination__pager-button-prev", disabled: disablePrev, onClick: this.handlePrevPage, "aria-label": "Previous Page", tabindex: "0" }, index.h("xpl-icon", { key: 'd3cf107b6f1a2cc02c50e0bd23b19b857ebd812d', icon: "arrow-left", size: 20 })), index.h("xpl-select", { key: '90d4c563a755c83a759b8e4028aac09b8a0be715', class: "xpl-pagination__page-select", dropdownFlipFallbackPlacements: ['bottom-start'], dropdownPlacement: "top-start", choices: this.pageChoices, "custom-display-value": true, ref: (el) => {
+                this.pageSelectRef = el ?? null;
+            } }, index.h("div", { key: '3f9071ff9ba2094c5014628366519db328efc466', slot: "custom-display-value" }, `${this.currentPage} of ${this.totalPages}`)), index.h("button", { key: '474df34b27cd0cd6ffcb58c4408691f5bf765c99', class: "xpl-pagination__pager-button xpl-pagination__pager-button-next", disabled: disableNext, onClick: this.handleNextPage, "aria-label": "Next Page", tabindex: "0" }, index.h("xpl-icon", { key: '0466f500b1cc7f2fa8e22da485e889775a53b2e8', icon: "arrow-right", size: 20 })))));
+    }
+    static get watchers() { return {
+        "currentPage": [{
+                "onPageUpdate": 0
+            }],
+        "totalPages": [{
+                "onTotalPagesUpdate": 0
+            }],
+        "selectedRowsPerPage": [{
+                "onRowsPerPageUpdate": 0
+            }]
+    }; }
+};
+
+exports.xpl_pagination = Pagination;

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

@@ -0,0 +1,21 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+
+const XplPanel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.accent = 'none';
+        this.padding = 'default';
+    }
+    render() {
+        const hasAccent = this.accent !== 'none';
+        return (index.h(index.Host, { key: '7e2a96b285cc06379f8f7f98ae44affcfac0c8dc', class: {
+                'xpl-panel': true,
+                [`xpl-panel--accent-${this.accent}`]: hasAccent,
+                [`xpl-panel--padding-${this.padding}`]: true,
+            } }, hasAccent && index.h("div", { key: '3a6740a44c18c9973c86a314d26bd565971c19f2', "aria-hidden": "true", class: "xpl-panel__accent" }), index.h("div", { key: 'd4951bd49e7600a58fa0ecb31fddf4df1dfe7956', class: "xpl-panel__content" }, index.h("slot", { key: '2374d130b274a64e875b0c4b1ce03b34d96554b4' }))));
+    }
+};
+
+exports.xpl_panel = XplPanel;

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

@@ -0,0 +1,265 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+var index$1 = require('./index-DP4JWqOH.js');
+require('./_commonjsHelpers-BJu3ubxk.js');
+
+const Popover = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.isOpenChange = index.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 = index$1.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 (index.h(index.Host, { key: 'b747fcdda5987a1d0506486d325cdf9a57cab6a8' }, index.h("div", { key: '547d595121db1b713c204eb5ac173828fff4b35b', class: {
+                'xpl-popover': true,
+                [`xpl-popover--${this.actualPosition}`]: true,
+                'xpl-popover--is-open': this.isOpenState,
+            } }, index.h("span", { key: 'd12773148d327475c8ff51fbb5a717c95231cabf', role: "button", tabindex: "0", "aria-haspopup": "dialog", "aria-expanded": this.isOpenState ? 'true' : 'false', onClick: this.togglePopover, ref: (el) => {
+                this.triggerRef = el;
+            } }, index.h("slot", { key: '6322dc3b9e7292eeb41aaf5c662aa99273868c7d', name: "trigger" })), this.display === 'arrow' && (index.h("div", { key: '2a3fe87cc9a82c8e914f6917a999bdd4433b9042', class: "xpl-popover__arrow" }, index.h("svg", { key: 'a191461ac07cf6693d5461aa4d343214e62ed6ef', width: "17", height: "14", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '61003e404b4e031057e0d2ef39a31bc9b7fba6df', d: "M0 5h15l-7.5 7.5L0 5Z", fill: "white", stroke: "none", class: "arrow-fill" }), index.h("path", { key: '15de3ff2ec9657fd3e47410de79d2362076c797b', d: "M0 5 L7.5 12.5 L15 5", fill: "none", stroke: "black", "stroke-width": "1", class: "arrow-stroke" })))), index.h("div", { key: 'ec4ae8672673fa63b918ab6222a6fbf7099758ff', class: {
+                'xpl-popover__content': true,
+                [`xpl-popover__content--display-${this.display}`]: true,
+            }, ref: (el) => (this.contentRef = el) }, index.h("slot", { key: '50c82f8c1833c91f6e2aabdfe3773725c9d9296d' })))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "isOpen": [{
+                "onIsOpenPropChange": 0
+            }],
+        "isOpenState": [{
+                "onIsOpenStateChange": 0
+            }]
+    }; }
+};
+
+exports.xpl_popover = Popover;

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

@@ -0,0 +1,41 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+
+const ProgressBar = class {
+    constructor(hostRef) {
+        index.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 (index.h(index.Host, { key: '7c374a5f2f89aed6b0c3a0daa4cc843efea8d262', class: {
+                'xpl-progress-bar': true,
+                [`xpl-progress-bar--${this.size}`]: true,
+                [`xpl-progress-bar--${this.variant}`]: true,
+                'xpl-progress-bar--complete': this.isComplete,
+            } }, index.h("div", { key: 'f1be4a82fbb87ffac27bb2b8d0f479ad36aae340', class: "xpl-progress-bar__wrapper" }, (this.label || this.showStatusIcon) && (index.h("div", { key: 'd415f09b3d0d237bc348b33470162d2b44048856', class: "xpl-progress-bar__header" }, this.label && index.h("div", { key: '48bc06b81c4445d811e6cd5f3ac086192cbcb392', class: "xpl-progress-bar__label" }, this.label), this.showStatusIcon && (index.h("div", { key: 'd31ccfc3ed1f956fdc89e01ca262b606219bb78e', class: "xpl-progress-bar__icon" }, this.isError ? (index.h("xpl-icon", { icon: "circle-xmark-1" })) : (index.h("xpl-icon", { icon: "circle-check-1" })))))), index.h("div", { key: '5c97c6193a2ebb0626052953f1a11c9afc258da8', class: "xpl-progress-bar__row" }, this.isIndeterminate ? (index.h("div", { class: "xpl-progress-bar__track xpl-progress-bar__track--indeterminate", role: "progressbar", "aria-label": this.label || 'Progress' }, index.h("div", { class: "xpl-progress-bar__indeterminate" }))) : (index.h("progress", { class: "xpl-progress-bar__progress", value: this.clampedValue, max: this.max, "aria-label": this.label || 'Progress' }))), this.helperText && (index.h("div", { key: '8e78ed094ab41425272b1818cc004a9094c3632d', class: "xpl-progress-bar__helper" }, this.helperText)))));
+    }
+};
+
+exports.xpl_progress_bar = ProgressBar;

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

@@ -0,0 +1,74 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+
+const ProgressIndicator = class {
+    constructor(hostRef) {
+        index.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$1, isFinished) {
+        if (isFinished) {
+            return (index.h("xpl-icon", { icon: "check-2", size: 20, class: "xpl-progress-indicator-step-checkmark" }));
+        }
+        if (!this.showNumbers) {
+            return index.h("span", { class: "xpl-progress-indicator-step-dot" });
+        }
+        return index.h("span", { class: "xpl-progress-indicator-step-number" }, index$1 + 1);
+    }
+    renderStep(step, index$1) {
+        const isFinished = this.currentStep > index$1;
+        const isActive = this.currentStep === index$1;
+        const isHorizontal = this.layout === 'horizontal';
+        const circle = (index.h("div", { class: "xpl-progress-indicator-step-circle" }, this.renderStepContent(index$1, isFinished)));
+        const label = this.showLabels && index.h("div", { class: "xpl-progress-indicator-step-text" }, step);
+        const content = isHorizontal ? (index.h("div", { class: "xpl-progress-indicator-step-content" }, circle, label)) : ([circle, label]);
+        return (index.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 (index.h(index.Host, { key: '2fa8128b81b665f0733e3c905cb99eaa1917e719', class: hostClasses, role: "group", "aria-label": ariaLabel }, index.h("div", { key: '279079d456f72748c77ac9f06281c838307ba092', 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
+            }]
+    }; }
+};
+
+exports.xpl_progress_indicator = ProgressIndicator;

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

@@ -0,0 +1,14 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+
+const SecondaryNav = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: '6fd3db4309ecb98fb1739fd69d964297a77a46eb', class: "xpl-secondary-nav" }, index.h("nav", { key: 'c08a1df306cee05760b6761409ebfb4ba87c2e4f', "aria-label": "Secondary Nav" }, index.h("slot", { key: '9d5d0657bdd581bce000f1ace49be8c1d018fe47' }))));
+    }
+};
+
+exports.xpl_secondary_nav = SecondaryNav;