@xplortech/apollo-core 2.10.0 → 2.12.0

package/dist/collection/components/xpl-radio/radio.stories.js

@@ -1,4 +1,13 @@
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
+import { waitForHydration } from "../../../../.storybook/utils/wait-for-hydration";
 export default {
+    tags: ['vrt'],
+    beforeEach() {
+        setAutoSnapshotOptions({ enable: true });
+    },
+    async play({ canvasElement }) {
+        await waitForHydration(canvasElement);
+    },
     title: 'Components/Radio',
     argTypes: {
         label: {

package/dist/collection/components/xpl-radio/xpl-radio.js

@@ -20,16 +20,16 @@ export class Radio {
         return Boolean(this.checked);
     }
     render() {
-        return (h(Host, { key: 'a8c73f86c07a42b9d44e7778fcac685b6d6ea476', class: {
+        return (h(Host, { key: '3b69e40977913d82102f8ddad0daaf04c1fdae91', class: {
                 'xpl-checkbox-radio-container': true,
-                styled: this.styled,
-                disabled: this.disabled,
-            } }, h("input", { key: 'c63e056408613a586a18e6dac90cd576c604114f', class: "xpl-radio", type: "radio", checked: this.isChecked, disabled: this.disabled, id: this.id, name: this.name, required: this.required, onChange: this.onChange, value: this.value }), h("label", { key: 'd2c64304f89a583cae05c111b1a82524c2f130b3', class: {
+                styled: !!this.styled,
+                disabled: !!this.disabled,
+            } }, h("input", { key: '480a7b9ed8a94630a9e1d31ae39dfa5ca4977869', class: "xpl-radio", type: "radio", checked: this.isChecked, disabled: this.disabled, id: this.id, name: this.name, required: this.required, onChange: this.onChange, value: this.value }), h("label", { key: 'aa582808dda2a90ad877ac1267df68df3bce6f38', class: {
                 'xpl-label': true,
-                'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, h("slot", { key: '12970b242bb30cf2fd68a73db5c6f3f252262355' }), this.description && (h("small", { key: '1224b9d9f183d46a95535216d24150c1141b6cfe', class: {
+                'xpl-label--disabled': !!this.disabled,
+            }, htmlFor: this.id }, h("slot", { key: 'a75c287415b7d989ba2bfd1a3c4ec122afe345e6' }), this.description && (h("small", { key: '774a273dafdf7e5e82ddd2a99c439cae7f6f9bd1', class: {
                 'xpl-description': true,
-                'xpl-description--disabled': this.disabled,
+                'xpl-description--disabled': !!this.disabled,
             } }, this.description)))));
     }
     static get is() { return "xpl-radio"; }

package/dist/collection/components/xpl-secondary-nav/secondary-nav.stories.js

@@ -1,7 +1,12 @@
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
 export default {
     title: 'Components/Navigation/Secondary Nav',
+    tags: ['vrt'],
+    beforeEach() {
+        setAutoSnapshotOptions({ enable: true });
+    },
 };
-export const SecondaryNav = (_) => `
+export const SecondaryNav = () => `
         <div class="secondary-nav-storybook-container">
             <xpl-secondary-nav>
                 <ul>
@@ -11,7 +16,7 @@ export const SecondaryNav = (_) => `
                         </a>
                     </xpl-nav-item>
                     <xpl-nav-item>
-                        <a href="javascript:;">
+                        <a class="active" href="javascript:;">
                             Board
                         </a>
                     </xpl-nav-item>
@@ -33,7 +38,7 @@ export const SecondaryNav = (_) => `
                 </ul>
             </xpl-secondary-nav>
         </div>`;
-const HtmlSecondaryNav = (_) => `
+const HtmlSecondaryNav = () => `
         <div class="xpl-secondary-nav">
             <nav aria-label="Secondary Nav">
                 <ul>
@@ -43,7 +48,7 @@ const HtmlSecondaryNav = (_) => `
                         </a>
                     </li>
                     <li class="xpl-nav-item">
-                        <a href="javascript:;">
+                        <a class="active" href="javascript:;">
                             Board
                         </a>
                     </li>
@@ -73,6 +78,6 @@ SecondaryNav.parameters = {
         render: SecondaryNav(SecondaryNav.args),
     },
     html: {
-        render: HtmlSecondaryNav(SecondaryNav.args),
+        render: HtmlSecondaryNav(),
     },
 };

package/dist/collection/components/xpl-secondary-nav/xpl-secondary-nav.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SecondaryNav {
     render() {
-        return (h(Host, { key: 'bf9cbd4351297a28d6d98d3bf1e0612fac1f5136', class: "xpl-secondary-nav" }, h("nav", { key: '764de50287c88f53f19005d50b177e85f71f7f43', "aria-label": "Secondary Nav" }, h("slot", { key: 'd7fe629382a06f62dde9f08db082854e986ba406' }))));
+        return (h(Host, { key: '9d5cdbf77eba7913892f083ccaab8f878455c11e', class: "xpl-secondary-nav" }, h("nav", { key: '4b56938320beada9e879c71866c3c48d37020f47', "aria-label": "Secondary Nav" }, h("slot", { key: '613ff6145ce13a4eee2b2dcae31b63eb89a860d0' }))));
     }
     static get is() { return "xpl-secondary-nav"; }
 }

package/dist/collection/components/xpl-select/select.stories.js

@@ -1,7 +1,10 @@
 import { v4 as uuid } from "uuid";
-import iconData from "@xplortech/apollo-icons/build/data.json";
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
 export default {
     title: 'Components/Select',
+    beforeEach() {
+        setAutoSnapshotOptions({ enable: true });
+    },
     parameters: {
         actions: {
             handles: ['selectChange', 'dropdownStateChange', 'changeEvent', 'triggerDropdown'],
@@ -47,9 +50,8 @@ export default {
             type: { name: 'string', required: false },
         },
         selectIcon: {
-            options: Object.keys(iconData),
             control: {
-                type: 'select',
+                type: 'text',
             },
         },
         selectedValues: {
@@ -69,14 +71,14 @@ export default {
             description: 'Prevent the default action when triggerDropdown event fires',
         },
     },
-    tags: ['beta'],
+    tags: ['beta', 'vrt'],
 };
 const script = (choices, { id, scriptSelectedValues = null, preventDefault = false }) => `
     (function() {
         const select = document.getElementById("${id}");
         select.choices = ${JSON.stringify(choices)};
 
-        if (${(scriptSelectedValues === null || scriptSelectedValues === void 0 ? void 0 : scriptSelectedValues.length) > 0}) {
+        if (${Array.isArray(scriptSelectedValues) ? scriptSelectedValues.length > 0 : Boolean(scriptSelectedValues)}) {
             select.selectedValues = ${JSON.stringify(scriptSelectedValues)};
         }
 
@@ -102,15 +104,15 @@ export const Select = ({ label, description, disabled, error, errorMessage, mode
             options: [
                 {
                     label: 'Choice 1',
-                    subtitle: `${subtitle}`,
+                    subtitle,
                 },
                 {
                     label: 'Choice 2',
-                    subtitle: `${subtitle}`,
+                    subtitle,
                 },
                 {
                     label: 'Choice 3',
-                    subtitle: `${subtitle}`,
+                    subtitle,
                 },
             ],
         },
@@ -283,6 +285,7 @@ SelectWValues.args = {
     customDisplayValueContent: 'Custom Display Value',
     selectedValues: 'choice-1,choice-2',
     selectIcon: '',
+    subtitle: 'Subtitle',
     preventDefaultTriggerDropdown: false,
 };
 SelectWValues.parameters = {

package/dist/collection/components/xpl-select/xpl-select.js

@@ -1,13 +1,33 @@
 import { v4 as uuid } from "uuid";
 import { Fragment, h, Host, } from "@stencil/core";
 import throttle from "lodash.throttle";
+import { isBrowser } from "../../utils/lifecycle";
+let measureContext;
+function getMeasureContext() {
+    if (!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 = document.createElement('canvas').getContext('2d');
-    context.font = "14px apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif";
+    const context = getMeasureContext();
+    if (!context) {
+        return 0;
+    }
     return context.measureText(text).width + 44;
 }
 function getDisplayValue(choice) {
-    return choice.label || choice.value;
+    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]);
@@ -36,15 +56,23 @@ export class Select {
                 this.keepFocus = true;
         };
         this.handleTagRemove = (tagToRemove) => {
-            const isItemMatch = (item) => ((tagToRemove === null || tagToRemove === void 0 ? void 0 : tagToRemove.value) && item.value === tagToRemove.value) ||
-                ((tagToRemove === null || tagToRemove === void 0 ? void 0 : tagToRemove.label) && item.label === tagToRemove.label);
-            this.choicesState = this.choicesState.map((choice) => {
-                var _a;
-                return (Object.assign(Object.assign({}, choice), { isSelected: isItemMatch(choice) ? false : choice.isSelected, options: (_a = choice.options) === null || _a === void 0 ? void 0 : _a.map((option) => (Object.assign(Object.assign({}, option), { isSelected: isItemMatch(option) ? false : option.isSelected }))) }));
-            });
+            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 { scrollTop, scrollHeight, clientHeight } = this.dropdown.querySelector('.xpl-dropdown-list');
+            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)) {
@@ -63,7 +91,7 @@ export class Select {
     }
     handleValueStateChange(newValue) {
         this.selectChange.emit(newValue);
-        this.changeEvent.emit(this.mode === 'single' ? newValue : !(newValue === null || newValue === void 0 ? void 0 : newValue.length) ? [] : newValue.split('|'));
+        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) => {
@@ -80,28 +108,35 @@ export class Select {
         this.dropdownStateChange.emit(newValue);
     }
     initializeChoicesState() {
-        return this.choices.map((choice) => {
-            var _a;
+        return (this.choices ?? []).map((choice) => {
             const valueToCompare = typeof this.selectedValues === 'string'
                 ? [this.selectedValues]
                 : this.selectedValues;
-            return Object.assign(Object.assign({}, choice), { isSelected: choice.isSelected || (valueToCompare === null || valueToCompare === void 0 ? void 0 : valueToCompare.includes(choice.value || choice.label)), options: (_a = choice.options) === null || _a === void 0 ? void 0 : _a.map((option) => (Object.assign(Object.assign({}, option), { isSelected: option.isSelected || (valueToCompare === null || valueToCompare === void 0 ? void 0 : valueToCompare.includes(option.value || option.label)) }))) });
+            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() {
-        var _a, _b;
+        if (!isBrowser())
+            return;
         if (this.mode === 'single' || !this.truncate)
             return;
-        const containerWidth = (_a = this.container) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
+        const containerWidth = this.container?.getBoundingClientRect().width;
         let visibleChoices = 0;
         let visibleChoicesWidth = 0;
-        const actualNumList = (_b = flattenChoices(this.choicesState)) === null || _b === void 0 ? void 0 : _b.filter((a) => a.isSelected);
+        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 - 140) {
+            if (visibleChoicesWidth > (containerWidth ?? 0) - 140) {
                 return null;
             }
             visibleChoices += 1;
@@ -114,8 +149,7 @@ export class Select {
         this.visibleChoices = visibleChoices;
     }
     closeDropdown() {
-        var _a;
-        if (!((_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.isOpen)) {
+        if (!this.dropdown?.isOpen) {
             return;
         }
         this.dropdown.isOpen = false;
@@ -127,9 +161,9 @@ export class Select {
             return '';
         }
         if (this.mode === 'single') {
-            return selectedChoices[0].value || selectedChoices[0].label;
+            return choiceKey(selectedChoices[0]);
         }
-        return selectedChoices.map((choice) => choice.value || choice.label).join('|');
+        return selectedChoices.map((choice) => choiceKey(choice)).join('|');
     }
     update() {
         this.value = this.calculateValue();
@@ -140,10 +174,10 @@ export class Select {
             return null;
         return (h("label", { class: {
                 'xpl-label': true,
-                'xpl-label--disabled': this.disabled,
+                'xpl-label--disabled': !!this.disabled,
             }, htmlFor: this.id }, this.label, this.description && (h("small", { class: {
                 'xpl-description': true,
-                'xpl-description--disabled': this.disabled,
+                'xpl-description--disabled': !!this.disabled,
             } }, this.description))));
     }
     renderSelectedTags() {
@@ -163,7 +197,7 @@ export class Select {
     renderError() {
         if (!this.error)
             return null;
-        return (h("label", { class: "xpl-input-error", htmlFor: this.id }, h("xpl-icon", { icon: "alert-circle" }), this.error));
+        return (h("label", { class: "xpl-input-error", htmlFor: this.id }, h("xpl-icon", { icon: "circle-warning" }), this.error));
     }
     componentWillLoad() {
         this.choicesState = this.initializeChoicesState();
@@ -176,9 +210,8 @@ export class Select {
         }
     }
     handleKeyDown(e) {
-        var _a;
         if (e.key === 'Escape' &&
-            (this.active || ((_a = this.container) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement)))) {
+            (this.active || this.container?.contains(document.activeElement))) {
             this.closeDropdown();
         }
     }
@@ -186,20 +219,26 @@ export class Select {
         this.handleResizeThrottled();
     }
     componentDidLoad() {
-        requestAnimationFrame(() => {
+        if (this.truncateRafId !== undefined) {
+            cancelAnimationFrame(this.truncateRafId);
+        }
+        this.truncateRafId = requestAnimationFrame(() => {
+            this.truncateRafId = undefined;
             this.maybeTruncateChoices();
         });
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.handleResizeThrottled) === null || _a === void 0 ? void 0 : _a.cancel();
+        this.handleResizeThrottled?.cancel();
+        if (this.truncateRafId !== undefined) {
+            cancelAnimationFrame(this.truncateRafId);
+            this.truncateRafId = undefined;
+        }
     }
     handleDropdownTrigger() {
-        var _a, _b;
         if (this.disabled) {
             return;
         }
-        const prevState = (_b = (_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.isOpen) !== null && _b !== void 0 ? _b : false;
+        const prevState = this.dropdown?.isOpen ?? false;
         const nextState = !prevState;
         const e = this.triggerDropdown.emit({
             prevState,
@@ -214,35 +253,38 @@ export class Select {
     }
     async reset() {
         this.closeDropdown();
-        this.choicesState = this.choicesState.map((choice) => {
-            var _a;
-            return (Object.assign(Object.assign({}, choice), { isSelected: false, options: (_a = choice.options) === null || _a === void 0 ? void 0 : _a.map((option) => (Object.assign(Object.assign({}, option), { isSelected: false }))) }));
-        });
+        this.choicesState = this.choicesState.map((choice) => ({
+            ...choice,
+            isSelected: false,
+            options: choice.options?.map((option) => ({
+                ...option,
+                isSelected: false,
+            })),
+        }));
     }
     render() {
-        var _a, _b, _c, _d;
         const selectedChoices = flattenChoices(this.choicesState).filter((choice) => choice.isSelected);
-        const displayedValue = ((_a = selectedChoices[0]) === null || _a === void 0 ? void 0 : _a.label) || ((_b = selectedChoices[0]) === null || _b === void 0 ? void 0 : _b.value);
+        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 (h(Host, { key: '72887e1c0864e77cf43e502d30a796e32942f643', class: {
+        return (h(Host, { key: 'efb901a6da94614137b07be9c89b3777e65f60d9', class: {
                 'xpl-select': true,
-                'xpl-select--disabled': this.disabled,
+                'xpl-select--disabled': !!this.disabled,
                 'xpl-select--no-truncate': !this.truncate,
-                [(_c = this.classNames) !== null && _c !== void 0 ? _c : '']: !!this.classNames,
+                [this.classNames ?? '']: !!this.classNames,
             }, onKeyDown: this.handleTabKeyDown, ref: (el) => {
                 this.container = el;
-            } }, this.renderLabel(), h("div", { key: '2d1aa67dcf1fa9aaa5b51b1eb944958a1741ee45', class: {
+            } }, this.renderLabel(), h("div", { key: '6d4b42bf301188182be36b7b9adfde4669771a22', class: {
                 'xpl-input': true,
-                'xpl-input--disabled': this.disabled,
-                'xpl-input--error': ((_d = this.error) === null || _d === void 0 ? void 0 : _d.length) >= 0,
-            } }, h("div", { key: 'bc34bf6bb4c306753030ec05d011dfe80377256d', class: "xpl-input-wrapper" }, h("button", { key: 'f9a1c1ce4014e780cf866f75f8852d0b234e5ccd', class: "xpl-select__trigger", disabled: this.disabled, id: this.id, onKeyDown: this.handleTabKeyDown, onClick: (e) => {
+                'xpl-input--disabled': !!this.disabled,
+                'xpl-input--error': this.error !== undefined,
+            } }, h("div", { key: '3687745a851d263557bb9d0f7c2d7eaa4546daa9', class: "xpl-input-wrapper" }, 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" }, h("div", { key: '1dbd694fb71a136f578382c7d70e2a2c6077c62c', class: {
+            }, type: "button" }, 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,
@@ -262,8 +304,8 @@ export class Select {
                 return this.renderSelectedTags();
             }
             return this.placeholder;
-        })(), isTextTruncated && truncatedText), h("xpl-icon", { key: '5fd8e1d7b0be5b3daf4c2daecbb5d6e4f02d7493', class: "xpl-select__chevron-down", icon: this.selectIcon }))), !this.disabled && (h("xpl-dropdown", { key: '312b8917cd407224c0802b8cfc285168c26a8de6', ref: (el) => {
-                this.dropdown = el;
+        })(), isTextTruncated && truncatedText), h("xpl-icon", { key: 'b17474211ca60ee3e70c7b3427f50b8c47dcb57c', class: "xpl-select__chevron-down", icon: this.selectIcon ?? 'chevron-down' }))), !this.disabled && (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) {
@@ -271,7 +313,7 @@ export class Select {
                 }
             }, onIsOpenChange: (e) => {
                 this.dropdownOpenState = e.detail;
-            }, onWheel: this.handleDropdownScroll, anchorToTrigger: true, flipFallbackPlacements: this.dropdownFlipFallbackPlacements, placement: this.dropdownPlacement })), this.renderError()), h("input", { key: '3c88344463e124f7ed752bd249563f3f8f7b9204', type: "hidden", name: this.name, value: this.value })));
+            }, onWheel: this.handleDropdownScroll, anchorToTrigger: true, flipFallbackPlacements: this.dropdownFlipFallbackPlacements, placement: this.dropdownPlacement })), this.renderError()), h("input", { key: 'beadce243c290f7d191d29961446285f332759af', type: "hidden", name: this.name, value: this.value })));
     }
     static get is() { return "xpl-select"; }
     static get properties() {

package/dist/collection/components/xpl-side-nav/side-nav-slot-utils.js

@@ -0,0 +1,35 @@
+export function getHostSlottedElements(host, slotName, hostTagName) {
+    const direct = Array.from(host.children).filter((child) => child.getAttribute('slot') === slotName);
+    if (direct.length > 0) {
+        return direct;
+    }
+    const relocated = Array.from(host.querySelectorAll(`[slot="${slotName}"]`)).filter((node) => node.closest(hostTagName) === host);
+    if (relocated.length > 0) {
+        return relocated;
+    }
+    const slotEl = Array.from(host.querySelectorAll(`slot[name="${slotName}"]`)).find((s) => s.closest(hostTagName) === host);
+    if (slotEl && typeof slotEl.assignedNodes === 'function') {
+        return slotEl
+            .assignedNodes({ flatten: true })
+            .filter((node) => node.nodeType === Node.ELEMENT_NODE);
+    }
+    return [];
+}
+export function hasHostSlottedContent(host, slotName, hostTagName) {
+    return getHostSlottedElements(host, slotName, hostTagName).length > 0;
+}
+let sectionChildrenIdCounter = 0;
+export function ensureSideNavSectionChildrenId(host, existing) {
+    if (existing) {
+        return existing;
+    }
+    const fromDom = host.querySelector('.xpl-side-nav-section__children')?.id;
+    if (fromDom) {
+        return fromDom;
+    }
+    if (host.id) {
+        return `${host.id}-children`;
+    }
+    sectionChildrenIdCounter += 1;
+    return `xpl-side-nav-section-children-${sectionChildrenIdCounter}`;
+}