@xplortech/apollo-core 2.11.0 → 2.12.0

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

@@ -0,0 +1,493 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+var index$1 = require('./index-DP4JWqOH.js');
+var lifecycle = require('./lifecycle-DeSsFfQZ.js');
+var v4 = require('./v4-_2BfiRUa.js');
+require('./_commonjsHelpers-BJu3ubxk.js');
+
+let measureContext;
+function getMeasureContext() {
+    if (!lifecycle.isBrowser()) {
+        return null;
+    }
+    if (measureContext === undefined) {
+        measureContext = document.createElement('canvas').getContext('2d');
+        if (measureContext) {
+            measureContext.font =
+                "14px apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif";
+        }
+    }
+    return measureContext;
+}
+function tagWidth(text) {
+    const context = getMeasureContext();
+    if (!context) {
+        return 0;
+    }
+    return context.measureText(text).width + 44;
+}
+function getDisplayValue(choice) {
+    return choice.label || choice.value || '';
+}
+function choiceKey(choice) {
+    return choice.value || choice.label || '';
+}
+function flattenChoices(choices) {
+    return choices.flatMap((choice) => choice.groupName && choice.options ? choice.options : [choice]);
+}
+const Select = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.selectChange = index.createEvent(this, "selectChange", 7);
+        this.changeEvent = index.createEvent(this, "changeEvent", 7);
+        this.dropdownStateChange = index.createEvent(this, "dropdownStateChange", 7);
+        this.triggerDropdown = index.createEvent(this, "triggerDropdown", 7);
+        this.choices = [];
+        this.selectIcon = 'chevron-down';
+        this.dropdownPlacement = 'bottom-start';
+        this.mode = 'single';
+        this.truncate = true;
+        this.active = false;
+        this.id = v4.v4();
+        this.keepFocus = false;
+        this.visibleChoices = Infinity;
+        this.choicesState = [];
+        this.value = this.calculateValue();
+        this.dropdownOpenState = false;
+        this.container = null;
+        this.dropdown = null;
+        this.handleResizeThrottled = index$1.throttle(() => {
+            this.maybeTruncateChoices();
+        }, 250);
+        this.handleTabKeyDown = (e) => {
+            if (e.key === 'Tab')
+                this.keepFocus = true;
+        };
+        this.handleTagRemove = (tagToRemove) => {
+            const isItemMatch = (item) => (tagToRemove?.value && item.value === tagToRemove.value) ||
+                (tagToRemove?.label && item.label === tagToRemove.label);
+            this.choicesState = this.choicesState.map((choice) => ({
+                ...choice,
+                isSelected: isItemMatch(choice) ? false : choice.isSelected,
+                options: choice.options?.map((option) => ({
+                    ...option,
+                    isSelected: isItemMatch(option) ? false : option.isSelected,
+                })),
+            }));
+        };
+        this.handleDropdownScroll = (e) => {
+            const list = this.dropdown?.querySelector('.xpl-dropdown-list');
+            if (!list) {
+                return;
+            }
+            const { scrollTop, scrollHeight, clientHeight } = list;
+            const atTop = scrollTop === 0;
+            const atBottom = scrollTop + clientHeight >= scrollHeight;
+            if ((atTop && e.deltaY < 0) || (atBottom && e.deltaY > 0)) {
+                e.preventDefault();
+            }
+        };
+    }
+    onChoicesPropChanged(_choices) {
+        this.choicesState = this.initializeChoicesState();
+    }
+    onSelectedValuesPropChanged() {
+        this.choicesState = this.initializeChoicesState();
+    }
+    onChoicesStateChanged() {
+        this.update();
+    }
+    handleValueStateChange(newValue) {
+        this.selectChange.emit(newValue);
+        this.changeEvent.emit(this.mode === 'single' ? newValue : !newValue?.length ? [] : newValue.split('|'));
+        if (this.customDisplayValue && this.container !== null) {
+            const customDisplayElements = this.container.querySelectorAll('.custom-display-value');
+            customDisplayElements.forEach((el) => {
+                el.classList.toggle('display-active', newValue.length > 0);
+                el.classList.toggle('display-inactive', newValue.length === 0);
+            });
+            const placeholderElements = this.container.querySelectorAll('.placeholder');
+            placeholderElements.forEach((el) => {
+                el.classList.toggle('placeholder-hidden', newValue.length > 0);
+            });
+        }
+    }
+    onDropdownOpenStateChanged(newValue) {
+        this.dropdownStateChange.emit(newValue);
+    }
+    initializeChoicesState() {
+        return (this.choices ?? []).map((choice) => {
+            const valueToCompare = typeof this.selectedValues === 'string'
+                ? [this.selectedValues]
+                : this.selectedValues;
+            return {
+                ...choice,
+                isSelected: choice.isSelected || valueToCompare?.includes(choiceKey(choice)) === true,
+                options: choice.options?.map((option) => ({
+                    ...option,
+                    isSelected: option.isSelected || valueToCompare?.includes(choiceKey(option)) === true,
+                })),
+            };
+        });
+    }
+    maybeTruncateChoices() {
+        if (!lifecycle.isBrowser())
+            return;
+        if (this.mode === 'single' || !this.truncate)
+            return;
+        const containerWidth = this.container?.getBoundingClientRect().width;
+        let visibleChoices = 0;
+        let visibleChoicesWidth = 0;
+        const actualNumList = flattenChoices(this.choicesState)?.filter((a) => a.isSelected);
+        if (!actualNumList.length)
+            return;
+        const actualNumSelected = actualNumList.length;
+        actualNumList.forEach((_, i) => {
+            visibleChoicesWidth += tagWidth(getDisplayValue(actualNumList[i]));
+            if (visibleChoicesWidth > (containerWidth ?? 0) - 140) {
+                return null;
+            }
+            visibleChoices += 1;
+            return null;
+        });
+        if (visibleChoices >= actualNumSelected)
+            visibleChoices = Infinity;
+        if (visibleChoices < 1)
+            visibleChoices = 1;
+        this.visibleChoices = visibleChoices;
+    }
+    closeDropdown() {
+        if (!this.dropdown?.isOpen) {
+            return;
+        }
+        this.dropdown.isOpen = false;
+        this.active = false;
+    }
+    calculateValue() {
+        const selectedChoices = flattenChoices(this.choicesState).filter((choice) => choice.isSelected);
+        if (!selectedChoices.length) {
+            return '';
+        }
+        if (this.mode === 'single') {
+            return choiceKey(selectedChoices[0]);
+        }
+        return selectedChoices.map((choice) => choiceKey(choice)).join('|');
+    }
+    update() {
+        this.value = this.calculateValue();
+        this.maybeTruncateChoices();
+    }
+    renderLabel() {
+        if (!this.label && !this.description)
+            return null;
+        return (index.h("label", { class: {
+                'xpl-label': true,
+                'xpl-label--disabled': !!this.disabled,
+            }, htmlFor: this.id }, this.label, this.description && (index.h("small", { class: {
+                'xpl-description': true,
+                'xpl-description--disabled': !!this.disabled,
+            } }, this.description))));
+    }
+    renderSelectedTags() {
+        let visibleChoices = 0;
+        const selectedChoices = flattenChoices(this.choicesState).filter((choice) => choice.isSelected);
+        if (!selectedChoices.length) {
+            return null;
+        }
+        const tags = selectedChoices.map((_, i) => {
+            if (visibleChoices >= this.visibleChoices)
+                return null;
+            visibleChoices += 1;
+            return (index.h("xpl-tag", { onClose: () => this.handleTagRemove(selectedChoices[i]) }, getDisplayValue(selectedChoices[i])));
+        });
+        return tags;
+    }
+    renderError() {
+        if (!this.error)
+            return null;
+        return (index.h("label", { class: "xpl-input-error", htmlFor: this.id }, index.h("xpl-icon", { icon: "circle-warning" }), this.error));
+    }
+    componentWillLoad() {
+        this.choicesState = this.initializeChoicesState();
+    }
+    handleClickEvent(e) {
+        const el = e.target;
+        const select = el.closest('.xpl-select');
+        if (select === null || select !== this.container) {
+            this.closeDropdown();
+        }
+    }
+    handleKeyDown(e) {
+        if (e.key === 'Escape' &&
+            (this.active || this.container?.contains(document.activeElement))) {
+            this.closeDropdown();
+        }
+    }
+    handleResize() {
+        this.handleResizeThrottled();
+    }
+    componentDidLoad() {
+        if (this.truncateRafId !== undefined) {
+            cancelAnimationFrame(this.truncateRafId);
+        }
+        this.truncateRafId = requestAnimationFrame(() => {
+            this.truncateRafId = undefined;
+            this.maybeTruncateChoices();
+        });
+    }
+    disconnectedCallback() {
+        this.handleResizeThrottled?.cancel();
+        if (this.truncateRafId !== undefined) {
+            cancelAnimationFrame(this.truncateRafId);
+            this.truncateRafId = undefined;
+        }
+    }
+    handleDropdownTrigger() {
+        if (this.disabled) {
+            return;
+        }
+        const prevState = this.dropdown?.isOpen ?? false;
+        const nextState = !prevState;
+        const e = this.triggerDropdown.emit({
+            prevState,
+            nextState,
+        });
+        if (!e.defaultPrevented) {
+            this.dropdownOpenState = nextState;
+            if (this.dropdown) {
+                this.dropdown.isOpen = nextState;
+            }
+        }
+    }
+    async reset() {
+        this.closeDropdown();
+        this.choicesState = this.choicesState.map((choice) => ({
+            ...choice,
+            isSelected: false,
+            options: choice.options?.map((option) => ({
+                ...option,
+                isSelected: false,
+            })),
+        }));
+    }
+    render() {
+        const selectedChoices = flattenChoices(this.choicesState).filter((choice) => choice.isSelected);
+        const displayedValue = selectedChoices[0]?.label || selectedChoices[0]?.value;
+        const isTextTruncated = selectedChoices.length > 1 &&
+            this.visibleChoices < Infinity &&
+            this.truncate &&
+            !this.customDisplayValue;
+        const truncatedText = `+ ${Math.abs(this.choicesState.filter((a) => a.isSelected).length - this.visibleChoices)} more`;
+        return (index.h(index.Host, { key: 'efb901a6da94614137b07be9c89b3777e65f60d9', class: {
+                'xpl-select': true,
+                'xpl-select--disabled': !!this.disabled,
+                'xpl-select--no-truncate': !this.truncate,
+                [this.classNames ?? '']: !!this.classNames,
+            }, onKeyDown: this.handleTabKeyDown, ref: (el) => {
+                this.container = el;
+            } }, this.renderLabel(), index.h("div", { key: '6d4b42bf301188182be36b7b9adfde4669771a22', class: {
+                'xpl-input': true,
+                'xpl-input--disabled': !!this.disabled,
+                'xpl-input--error': this.error !== undefined,
+            } }, index.h("div", { key: '3687745a851d263557bb9d0f7c2d7eaa4546daa9', class: "xpl-input-wrapper" }, index.h("button", { key: '6fa71fa27e684134b9e3ee915b8548a127dfbdf6', class: "xpl-select__trigger", disabled: this.disabled, id: this.id, onKeyDown: this.handleTabKeyDown, onClick: (e) => {
+                e.preventDefault();
+                this.handleDropdownTrigger();
+            }, type: "button" }, index.h("div", { key: '00975fd72169662e5314f48634722c18c10e8bd9', class: {
+                'xpl-select-value': true,
+                'xpl-select-value--active': this.mode === 'multi' && this.value.length > 0,
+                'has-value': this.value.length > 0,
+            } }, (() => {
+            if (this.customDisplayValue) {
+                return (index.h(index.Fragment, null, index.h("div", { class: {
+                        'custom-display-value': true,
+                        'custom-display-value--inactive': this.value.length === 0,
+                    } }, index.h("slot", { name: "custom-display-value" })), index.h("span", { class: {
+                        'xpl-placeholder--hidden': this.value.length > 0,
+                    } }, this.placeholder)));
+            }
+            if (this.mode === 'single') {
+                return displayedValue || this.placeholder;
+            }
+            if (this.value.length > 0) {
+                return this.renderSelectedTags();
+            }
+            return this.placeholder;
+        })(), isTextTruncated && truncatedText), index.h("xpl-icon", { key: 'b17474211ca60ee3e70c7b3427f50b8c47dcb57c', class: "xpl-select__chevron-down", icon: this.selectIcon ?? 'chevron-down' }))), !this.disabled && (index.h("xpl-dropdown", { key: '793f48f587c8db42de0bdcefb20d9f2dd05eec83', ref: (el) => {
+                this.dropdown = el ?? null;
+            }, isOpen: this.dropdownOpenState, options: this.choicesState, selectedValues: this.selectedValues, mode: this.mode, triggerId: this.id, update: (_e, { component }) => {
+                const { options } = component;
+                if (options && options.length > 0) {
+                    this.choicesState = options;
+                }
+            }, onIsOpenChange: (e) => {
+                this.dropdownOpenState = e.detail;
+            }, onWheel: this.handleDropdownScroll, anchorToTrigger: true, flipFallbackPlacements: this.dropdownFlipFallbackPlacements, placement: this.dropdownPlacement })), this.renderError()), index.h("input", { key: 'beadce243c290f7d191d29961446285f332759af', type: "hidden", name: this.name, value: this.value })));
+    }
+    static get watchers() { return {
+        "choices": [{
+                "onChoicesPropChanged": 0
+            }],
+        "selectedValues": [{
+                "onSelectedValuesPropChanged": 0
+            }],
+        "choicesState": [{
+                "onChoicesStateChanged": 0
+            }],
+        "value": [{
+                "handleValueStateChange": 0
+            }],
+        "dropdownOpenState": [{
+                "onDropdownOpenStateChanged": 0
+            }]
+    }; }
+};
+
+const Tag = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.close = index.createEvent(this, "close", 7);
+        this.tagDragEnd = index.createEvent(this, "tagDragEnd", 7);
+        this.tagDragStart = index.createEvent(this, "tagDragStart", 7);
+        this.tagRemove = index.createEvent(this, "tagRemove", 7);
+        this.dismissAriaLabelSuffix = 'tag';
+        this.isDragging = false;
+        this.disabled = false;
+        this.dismissible = true;
+        this.isDraggable = false;
+        this.size = 'default';
+        this.handleTagClick = (_event) => {
+            if (this.disabled) {
+                return;
+            }
+            if (!this.isDraggable) {
+                this.close.emit();
+            }
+        };
+        this.setDragPreviewToHost = (event) => {
+            if (!event.dataTransfer) {
+                return;
+            }
+            try {
+                const rect = this.el.getBoundingClientRect();
+                const offsetX = Math.max(0, event.clientX - rect.left);
+                const offsetY = Math.max(0, event.clientY - rect.top);
+                event.dataTransfer.setDragImage(this.el, offsetX, offsetY);
+            }
+            catch {
+            }
+        };
+        this.handleContentKeyDown = (event) => {
+            if (this.disabled) {
+                return;
+            }
+            if (event.key !== 'Enter' && event.key !== ' ') {
+                return;
+            }
+            event.preventDefault();
+        };
+        this.handleDismissClick = (event) => {
+            event.stopPropagation();
+            if (this.disabled) {
+                return;
+            }
+            this.close.emit();
+            this.tagRemove.emit();
+        };
+        this.handleDragStart = (event) => {
+            this.isDragging = true;
+            if (event.dataTransfer) {
+                event.dataTransfer.effectAllowed = 'move';
+                this.setDragPreviewToHost(event);
+                if (this.tagId) {
+                    event.dataTransfer.setData('application/x-tag-id', this.tagId);
+                }
+                event.dataTransfer.setData('text/plain', this.getContentLabelText());
+            }
+            this.tagDragStart.emit({
+                tagId: this.tagId,
+                content: this.getContentLabelText(),
+                originalEvent: event,
+            });
+        };
+        this.handleDragEnd = (event) => {
+            this.isDragging = false;
+            const wasDropped = event.dataTransfer?.dropEffect === 'move';
+            this.tagDragEnd.emit({
+                tagId: this.tagId,
+                dropped: wasDropped,
+                originalEvent: event,
+            });
+        };
+        this.handleDragOver = (event) => {
+            if (this.disabled || !this.isDraggable) {
+                return;
+            }
+            event.preventDefault();
+            if (event.dataTransfer) {
+                event.dataTransfer.dropEffect = 'move';
+            }
+        };
+        this.handleDragEnter = (event) => {
+            if (this.disabled || !this.isDraggable) {
+                return;
+            }
+            event.preventDefault();
+        };
+        this.handleHostDragStart = (event) => {
+            if (event.target === this.el && this.isDraggable) {
+                event.preventDefault();
+            }
+        };
+    }
+    onDisabledChange(newValue) {
+        if (newValue && this.isDragging) {
+            this.isDragging = false;
+        }
+    }
+    onIsDraggableChange(newValue) {
+        if (!newValue && this.isDragging) {
+            this.isDragging = false;
+        }
+    }
+    componentDidRender() {
+        queueMicrotask(() => this.syncDismissAriaLabelSuffix());
+    }
+    getContentLabelText() {
+        return (this.el.querySelector('.xpl-tag__content')?.textContent ?? '').trim();
+    }
+    syncDismissAriaLabelSuffix() {
+        if (!this.el.isConnected) {
+            return;
+        }
+        const trimmed = this.getContentLabelText();
+        const next = trimmed === '' ? 'tag' : trimmed;
+        if (next !== this.dismissAriaLabelSuffix) {
+            this.dismissAriaLabelSuffix = next;
+        }
+    }
+    render() {
+        const dragEnabled = this.isDraggable && !this.disabled;
+        return (index.h(index.Host, { key: 'dc8048cbcdc849eef7f7ae81987760151bcf72bc', class: {
+                'xpl-tag': true,
+                'xpl-tag-container': true,
+                'xpl-tag--disabled': this.disabled,
+                'xpl-tag--dismissible': this.dismissible,
+                'xpl-tag--dragging': this.isDragging,
+                'xpl-tag--draggable': dragEnabled,
+                'xpl-tag--sm': this.size === 'sm',
+            }, onDragOver: dragEnabled ? this.handleDragOver : undefined, onDragEnter: dragEnabled ? this.handleDragEnter : undefined, onDragStart: this.isDraggable ? this.handleHostDragStart : undefined }, dragEnabled ? (index.h("div", { class: "xpl-tag__content xpl-tag", role: "button", tabIndex: 0, draggable: true, "aria-grabbed": String(this.isDragging), onClick: this.handleTagClick, onKeyDown: this.handleContentKeyDown, onDragStart: this.handleDragStart, onDragEnd: this.handleDragEnd }, index.h("slot", null))) : (index.h("button", { class: "xpl-tag__content xpl-tag", type: "button", disabled: this.disabled, onClick: this.handleTagClick }, index.h("slot", null))), this.dismissible && (index.h("button", { key: '3c6007ea3377848cb83ffcfbcb11b84a4ce1219d', class: "xpl-tag__dismiss xpl-tag__close", type: "button", draggable: false, disabled: this.disabled, "aria-label": `Dismiss ${this.dismissAriaLabelSuffix}`, onClick: this.handleDismissClick }, index.h("xpl-icon", { key: '7d45494a1327aff09948d687997e531e2e96be4e', icon: "xmark", size: 10 })))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "disabled": [{
+                "onDisabledChange": 0
+            }],
+        "isDraggable": [{
+                "onIsDraggableChange": 0
+            }]
+    }; }
+};
+
+exports.xpl_select = Select;
+exports.xpl_tag = Tag;

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

@@ -0,0 +1,101 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+
+const SideNavHeaderItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.navigate = index.createEvent(this, "navigate", 7);
+        this.hasLeadingSlot = false;
+        this.hasTrailingSlot = false;
+        this.selected = false;
+        this.type = 'product-label';
+        this.handleClick = () => {
+            if (this.type !== 'sub-account')
+                return;
+            this.navigate.emit();
+        };
+    }
+    connectedCallback() {
+        this.syncSlots();
+        this.connectSlotObserver();
+    }
+    disconnectedCallback() {
+        if (this.slotSyncTimeoutId !== undefined) {
+            clearTimeout(this.slotSyncTimeoutId);
+            this.slotSyncTimeoutId = undefined;
+        }
+        this.disconnectSlotObserver();
+    }
+    componentWillLoad() {
+        this.syncSlots();
+    }
+    componentWillRender() {
+        this.disconnectSlotObserver();
+    }
+    componentDidRender() {
+        this.scheduleSlotSync();
+    }
+    connectSlotObserver() {
+        this.disconnectSlotObserver();
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        this.slotObserver = new MutationObserver(() => {
+            this.scheduleSlotSync();
+        });
+        this.slotObserver.observe(this.el, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['slot'],
+        });
+    }
+    disconnectSlotObserver() {
+        this.slotObserver?.disconnect();
+        this.slotObserver = undefined;
+    }
+    scheduleSlotSync() {
+        if (this.slotSyncTimeoutId !== undefined) {
+            clearTimeout(this.slotSyncTimeoutId);
+        }
+        this.slotSyncTimeoutId = setTimeout(() => {
+            this.slotSyncTimeoutId = undefined;
+            if (!this.el.isConnected) {
+                return;
+            }
+            this.syncSlots();
+            this.connectSlotObserver();
+        }, 0);
+    }
+    syncSlots() {
+        const isOwn = (node) => node.closest('xpl-side-nav-header-item') === this.el;
+        const hasLeading = Array.from(this.el.querySelectorAll('[slot="leading"]')).some(isOwn);
+        const hasTrailing = Array.from(this.el.querySelectorAll('[slot="trailing"]')).some(isOwn);
+        if (hasLeading !== this.hasLeadingSlot) {
+            this.hasLeadingSlot = hasLeading;
+        }
+        if (hasTrailing !== this.hasTrailingSlot) {
+            this.hasTrailingSlot = hasTrailing;
+        }
+    }
+    render() {
+        const isSubAccount = this.type === 'sub-account';
+        const showLeading = !!this.icon || this.hasLeadingSlot;
+        const subAccountFallbackLabel = isSubAccount && !this.label?.trim() ? 'Sub-account' : undefined;
+        const showAutoChevron = isSubAccount && !this.hasTrailingSlot;
+        const showTrailing = this.hasTrailingSlot || showAutoChevron;
+        const leading = showLeading ? (index.h("span", { class: "xpl-side-nav-header-item__leading" }, index.h("slot", { name: "leading" }, this.icon ? index.h("xpl-icon", { icon: this.icon, size: 16 }) : null))) : null;
+        const trailing = showTrailing ? (index.h("span", { class: "xpl-side-nav-header-item__trailing", "aria-hidden": showAutoChevron ? 'true' : undefined }, index.h("slot", { name: "trailing" }, showAutoChevron ? (index.h("xpl-icon", { icon: "chevron-expand-y", size: 16 })) : null))) : null;
+        const content = (index.h("span", { key: '0e94b81665c43c6dad594f6d78f153863cb0a5dd', class: "xpl-side-nav-header-item__content" }, leading, index.h("span", { key: '556354c3df994e36b803326e88bada417f20f2a4', class: "xpl-side-nav-header-item__label" }, this.label ?? ''), trailing));
+        return (index.h(index.Host, { key: 'f596403c230bcdf1aa35283f5943204d8a16debb', class: {
+                'xpl-side-nav-header-item': true,
+                'xpl-side-nav-header-item--product-label': !isSubAccount,
+                'xpl-side-nav-header-item--sub-account': isSubAccount,
+                'xpl-side-nav-header-item--selected': isSubAccount && this.selected,
+            } }, isSubAccount ? (index.h("button", { type: "button", class: "xpl-side-nav-header-item__header", "aria-current": this.selected ? 'true' : undefined, "aria-label": subAccountFallbackLabel, onClick: this.handleClick }, content)) : (index.h("div", { class: "xpl-side-nav-header-item__header" }, content))));
+    }
+    get el() { return index.getElement(this); }
+};
+
+exports.xpl_side_nav_header_item = SideNavHeaderItem;