@xplortech/apollo-core 2.11.0 → 3.0.0

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

@@ -14,19 +14,23 @@ export class Button {
     componentDidRender() {
         const attrs = this.el.attributes;
         const dataAttrs = Object.keys(attrs)
-            .filter((k) => {
-            const propertyName = attrs[k].name;
-            if (propertyName) {
-                return propertyName.includes('data-test') || propertyName.includes('aria-');
-            }
-            return false;
+            .map((key) => Number(key))
+            .filter((index) => {
+            const attr = attrs[index];
+            return attr?.name.includes('data-test') || attr?.name.includes('aria-') || false;
         })
-            .reduce((acc, k) => (Object.assign(Object.assign({}, acc), { [attrs[k].name]: attrs[k].value })), {});
+            .reduce((acc, index) => {
+            const attr = attrs[index];
+            if (attr) {
+                acc[attr.name] = attr.value;
+            }
+            return acc;
+        }, {});
         const button = this.el.querySelector('button');
         if (button) {
-            Object.keys(dataAttrs).forEach((k) => {
-                button.setAttribute(k, dataAttrs[k]);
-                this.el.removeAttribute(k);
+            Object.entries(dataAttrs).forEach(([name, value]) => {
+                button.setAttribute(name, value);
+                this.el.removeAttribute(name);
             });
         }
     }
@@ -50,8 +54,7 @@ export class Button {
         }
     }
     render() {
-        var _a;
-        return (h(Host, { key: '4fa90ae10b235af3fbfadb40097c5cc238e40dc6', class: {
+        return (h(Host, { key: 'd46884793521c327622838ceca0af98ec897912b', class: {
                 'xpl-button': true,
                 [`xpl-button--${this.size}`]: true,
                 [`xpl-button--${this.variant}`]: true,
@@ -61,12 +64,12 @@ export class Button {
                 'xpl-button--icon-only': this.iconOnly,
                 'xpl-button--disabled': this.disabled,
                 'xpl-button--loading': this.isLoading && !this.link,
-            } }, this.link ? (h("slot", null)) : (h("button", Object.assign({}, ((_a = this.controlAttrs) !== null && _a !== void 0 ? _a : {}), { disabled: this.disabled, onClick: (e) => this.handleLoadingState(e), type: this.isLoading &&
+            } }, this.link ? (h("slot", null)) : (h("button", { ...(this.controlAttrs ?? {}), disabled: this.disabled, onClick: (e) => this.handleLoadingState(e), type: this.isLoading &&
                 (this.type === 'submit' ||
                     this.type === 'reset' ||
                     this.type === undefined)
                 ? 'button'
-                : this.type, name: this.name, value: this.value, form: this.form, "aria-busy": this.isLoading ? 'true' : undefined }), this.icon && h("span", { class: "xpl-button__icon" }, this.renderIcon()), h("slot", null), this.isLoading && (h("span", { class: "xpl-button__loading-overlay", "aria-hidden": "true" }, h("span", { class: "xpl-button__loading-spinner" }, h("xpl-icon", { icon: "loader-4" }))))))));
+                : this.type, name: this.name, value: this.value, form: this.form, "aria-busy": this.isLoading ? 'true' : undefined }, this.icon && h("span", { class: "xpl-button__icon" }, this.renderIcon()), h("slot", null), this.isLoading && (h("span", { class: "xpl-button__loading-overlay", "aria-hidden": "true" }, h("span", { class: "xpl-button__loading-spinner" }, h("xpl-icon", { icon: "loader-4" }))))))));
     }
     static get is() { return "xpl-button"; }
     static get properties() {

package/dist/collection/components/xpl-button-row/xpl-button-row.js

@@ -6,7 +6,7 @@ export class ButtonRow {
         this.onTertiary = () => this.clickTertiary.emit();
     }
     render() {
-        return (h(Host, { key: '9cd6193bed50a82872803b95bd5fc56c9347dd1a', class: "xpl-button-row" }, h("div", { key: 'eefebfcad667ceec154117b9318e2ff88c420f8f', class: "xpl-button-row-inner" }, h("div", { key: '94633d213b36306cf51a70e04d21a964ca13c430', class: "xpl-button-row__left" }, this.secondary && (h("xpl-button", { key: '2e47003e6f35f5acd7a6129c903d4591cc10759f', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary))), h("div", { key: '05397d469cd97188f56934354850a8c3cd77e4d6', class: "xpl-button-row__right" }, this.tertiary && (h("xpl-button", { key: 'd3f6a953144e8e64aa34a37c9c80f7363dc0ee9c', variant: "subtle", type: "button", onClick: this.onTertiary }, this.tertiary)), this.secondary && (h("xpl-button", { key: 'abd03f3c33a48517a7f268ecf302767e605a2400', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary)), this.primary && (h("xpl-button", { key: 'be417c38b0427e9cdbbacb700d4651677cff8ec9', class: "xpl-button-row__primary", onClick: this.onPrimary }, this.primary))))));
+        return (h(Host, { key: 'de570ef3de32367d44cfaa7004e749a51bc6fde9', class: "xpl-button-row" }, h("div", { key: '6bafe5cbb76355b987023cab4d1530e71065ea55', class: "xpl-button-row-inner" }, h("div", { key: '09ab6b0f3b7ed5790b675520d445ed3279224c3c', class: "xpl-button-row__left" }, this.secondary && (h("xpl-button", { key: '8f08a18126a27e6f1a72d8609e5533f466c3a88b', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary))), h("div", { key: '0df1b38697afee3eb45af00989baac17ae2a2d00', class: "xpl-button-row__right" }, this.tertiary && (h("xpl-button", { key: '289a41a34091201ecba3af76ed2ab86c84341ba4', variant: "subtle", type: "button", onClick: this.onTertiary }, this.tertiary)), this.secondary && (h("xpl-button", { key: '742dd05eea13de9ccc2747b0146c3779bd7b4e66', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary)), this.primary && (h("xpl-button", { key: '0eafc10b3d2b8f70d0f18a3ef0798ca6250ee0d5', class: "xpl-button-row__primary", onClick: this.onPrimary }, this.primary))))));
     }
     static get is() { return "xpl-button-row"; }
     static get properties() {

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

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { v4 as uuid } from "uuid";
 import flatpickr from "flatpickr";
+import { isBrowser } from "../../utils/lifecycle";
 const arrowSvg = (rotate = false) => `<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="${rotate
     ? 'M0.557948 5.6813L6.06209 0.132167C6.23831 -0.0440556 6.52327 -0.0440556 6.69949 0.132167L7.44187 0.874551C7.61809 1.05077 7.61809 1.33573 7.44187 1.51195L2.99882 6L7.44187 10.488C7.61809 10.6643 7.61809 10.9492 7.44187 11.1254L6.69949 11.8678C6.52327 12.0441 6.23831 12.0441 6.06209 11.8678L0.557948 6.3187C0.381726 6.14248 0.381726 5.85752 0.557948 5.6813Z'
     : 'M7.44187 6.3187L1.93773 11.8678C1.76151 12.0441 1.47655 12.0441 1.30033 11.8678L0.557948 11.1254C0.381726 10.9492 0.381726 10.6643 0.557948 10.488L5.001 6L0.557948 1.51195C0.381726 1.33573 0.381726 1.05077 0.557948 0.874551L1.30033 0.132167C1.47655 -0.0440556 1.76151 -0.0440556 1.93773 0.132167L7.44187 5.6813C7.6181 5.85752 7.6181 6.14248 7.44187 6.3187Z'}" /></svg>`;
@@ -21,9 +22,12 @@ export class Calendar {
         }
     }
     componentWillLoad() {
-        this.calendarInputId = this.inputId;
+        this.calendarInputId = this.inputId ?? '';
     }
     componentDidLoad() {
+        if (!isBrowser()) {
+            return;
+        }
         this.flatpickrInstance = flatpickr(this.inputElement, {
             allowInput: true,
             dateFormat: this.dateFormat,
@@ -36,9 +40,8 @@ export class Calendar {
             inline: true,
             monthSelectorType: 'dropdown',
             onChange: (selectedDates) => {
-                var _a;
                 if (this.mode === 'single') {
-                    this.dateSelected.emit((_a = selectedDates[0]) === null || _a === void 0 ? void 0 : _a.toISOString());
+                    this.dateSelected.emit(selectedDates[0]?.toISOString());
                 }
                 else {
                     this.dateSelected.emit(selectedDates.map((date) => date.toISOString()));
@@ -52,8 +55,9 @@ export class Calendar {
         }
     }
     render() {
-        return (h(Host, { key: '8693d0e9612e2995b03f6392387758c843db0be5', class: "xpl-calendar" }, h("input", { key: '29077057568f288f42d4e0eb94e2fa83ce6ea9c6', class: "xpl-calendar-input", type: "text", id: this.calendarInputId, ref: (el) => {
-                this.inputElement = el;
+        return (h(Host, { key: '871a989fee5abc19ac9e00fca79534dd79b0a773', class: "xpl-calendar" }, h("input", { key: '3dc76b7045ac76ff76d2f1ca80625034aff7d013', class: "xpl-calendar-input", type: "text", id: this.calendarInputId, ref: (el) => {
+                if (el)
+                    this.inputElement = el;
             } })));
     }
     static get is() { return "xpl-calendar"; }

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

@@ -10,17 +10,16 @@ export class Checkbox {
         };
     }
     render() {
-        var _a;
-        return (h(Host, { key: 'd173bab038a25f785864e5614b29ec2fde832786', class: {
+        return (h(Host, { key: 'd16058b571f7af6d2a83cbdce15b12bccadf0036', class: {
                 'xpl-checkbox-radio-container': true,
-                styled: this.styled,
-                disabled: this.disabled,
-            } }, h("input", { key: 'badfc1e403ba5b51b757823354c4cec86f678116', class: "xpl-checkbox", type: "checkbox", "aria-label": ((_a = this.ariaLabel) !== null && _a !== void 0 ? _a : '').trim() || undefined, checked: this.checked, "data-id": this.dataId, disabled: this.disabled, id: this.id, indeterminate: this.indeterminate, onChange: this.onChange, name: this.name, required: this.required, value: this.value }), h("label", { key: 'b56888525a7b3d9544d8595b71d1ffe36f00e7b8', class: {
+                styled: !!this.styled,
+                disabled: !!this.disabled,
+            } }, h("input", { key: '1001a243623e338fc4fefc9f58f251439c2fb74f', class: "xpl-checkbox", type: "checkbox", "aria-label": (this.ariaLabel ?? '').trim() || undefined, checked: this.checked, "data-id": this.dataId, disabled: this.disabled, id: this.id, indeterminate: this.indeterminate, onChange: this.onChange, name: this.name, required: this.required, value: this.value }), h("label", { key: '37e85b721cef98c8ccc448e08dbf9d9c968bd0a6', class: {
                 'xpl-label': true,
-                'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, h("slot", { key: 'a5f06411725e10f5e5fafc33ff5e8f4adfec9e5b' }), this.description && (h("small", { key: '16ac47d9316e4a78f732cb3c0851efd8eaf903f2', class: {
+                'xpl-label--disabled': !!this.disabled,
+            }, htmlFor: this.id }, h("slot", { key: 'ef36d317d97e26098396b1131a1acce6bce5ae8f' }), this.description && (h("small", { key: '9d710e4fa3f366965307908ca2e216ac46310f30', class: {
                 'xpl-description': true,
-                'xpl-description--disabled': this.disabled,
+                'xpl-description--disabled': !!this.disabled,
             } }, this.description)))));
     }
     static get is() { return "xpl-checkbox"; }

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

@@ -7,16 +7,16 @@ export class Choicelist {
             const choice = this.choices[choiceIndex];
             if (this.multi) {
                 this.selected = this.selected.map((isSelected, index) => index === choiceIndex ? !isSelected : isSelected);
-                if ((choice === null || choice === void 0 ? void 0 : choice.value) !== undefined) {
+                if (choice?.value !== undefined) {
                     const changedValues = this.choices
                         .filter((_, index) => this.selected[index])
-                        .map((c, index) => { var _a; return (_a = c.value) !== null && _a !== void 0 ? _a : this.selected[index]; });
+                        .map((c, index) => c.value ?? this.selected[index]);
                     this.choicelistValueChange.emit(changedValues);
                 }
             }
             else {
                 this.selected = this.selected.map((_, index) => index === choiceIndex);
-                if ((choice === null || choice === void 0 ? void 0 : choice.value) !== undefined) {
+                if (choice?.value !== undefined) {
                     this.choicelistValueChange.emit(choice.value);
                 }
             }
@@ -36,13 +36,13 @@ export class Choicelist {
         this.onChoicesPropChange(this.choices);
     }
     render() {
-        return (h(Host, { key: 'a5ced1a4f1e3e5323dbc247c66ddf5ad489edc5f', class: "xpl-choicelist-container" }, this.heading !== undefined || this.description !== undefined ? (h("div", { class: "xpl-choicelist-heading" }, this.heading && h("h3", null, this.heading), this.description && h("p", null, this.description))) : null, this.choices && (h("ul", { key: '70f4738e8f5d1e1a72858d139eb4a3b531973449', class: {
+        return (h(Host, { key: '0db2f4a4109a65ae2ab01259b960f83dd3b8bbeb', class: "xpl-choicelist-container" }, this.heading !== undefined || this.description !== undefined ? (h("div", { class: "xpl-choicelist-heading" }, this.heading && h("h3", null, this.heading), this.description && h("p", null, this.description))) : null, this.choices && (h("ul", { key: '53915c9efd628e455b5604f4eacbc67504a52ca5', class: {
                 'xpl-choicelist': true,
-                'xpl-choicelist--styled': this.styled,
+                'xpl-choicelist--styled': !!this.styled,
             } }, this.choices.map((choice, i) => {
             const inner = this.renderChoice(choice, i);
             return (h("li", { class: {
-                    selected: this.styled && this.selected[i],
+                    selected: !!this.styled && !!this.selected[i],
                 } }, inner, choice.children && (h("ul", null, choice.children.map((child, j) => {
                 const childInner = this.renderChoice(child, j);
                 return h("li", null, childInner);

package/dist/collection/components/xpl-content-area/xpl-content-area.js

@@ -4,7 +4,7 @@ export class ContentArea {
         this.size = 'wide';
     }
     render() {
-        return (h(Host, { key: '926cdfb1b6e52baabfb46bac6d837c5f1ba45183' }, h("main", { key: '71dacea3a70c90ae0471a1ec3c39add237faa119', class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, h("div", { key: '5e53fe46cf9dc459d4a9d1f0540464b8bd695d8a', class: "xpl-content-area" }, h("slot", { key: '2f74936219cf75dccd583ee01a173807f0f80079' })))));
+        return (h(Host, { key: '97fd281e5aa7ba1805f1424e80d6018ca5fdafe0' }, h("main", { key: '6a6f315e74225f66105874998c679183f2c743f5', class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, h("div", { key: 'c46017f1a0fd8b278f7b817de82629eb777515fd', class: "xpl-content-area" }, h("slot", { key: 'cc6d45297d23770880778810952f7e95445bb800' })))));
     }
     static get is() { return "xpl-content-area"; }
     static get properties() {

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class Dashboard {
     render() {
-        return (h(Host, { key: '1eb93f83a05cfe198aed91b0d8771bdbe6e7aaee' }, h("dl", { key: 'bdb8f39b30d318ae25a203ac75966f12a9299b35', class: "xpl-dashboard" }, h("slot", { key: 'caf043e38777ac0a397782957f0936bb34436f63' }))));
+        return (h(Host, { key: '65628c79753f54949bfe0a6dfede9bf4e09cf585' }, h("dl", { key: 'aa6444eea3322331350fbc1b0db6b23e316d393e', class: "xpl-dashboard" }, h("slot", { key: '3b54ed1755a0cc72ef5527afafdf156660afcfdf' }))));
     }
     static get is() { return "xpl-dashboard"; }
 }

package/dist/collection/components/xpl-data-card/xpl-data-card.js

@@ -1,6 +1,9 @@
-import { h, Host } from "@stencil/core";
+import { Host, h } from "@stencil/core";
+import { hostHasNamedSlot } from "../../utils/slot-presence";
+const GRAPH_CONTENT_SLOT = 'graph-content';
 export class DataCard {
     constructor() {
+        this.graphContentPresent = false;
         this.leadingIcon = true;
         this.tooltipTextSmallStat = '';
         this.tooltipTextStat = '';
@@ -11,6 +14,20 @@ export class DataCard {
     watchShortStat(newValue) {
         this.shortStat = newValue;
     }
+    connectedCallback() {
+        this.syncGraphContentSlot();
+        this.connectGraphContentSlotObserver();
+    }
+    disconnectedCallback() {
+        if (this.graphContentSlotSyncTimeoutId !== undefined) {
+            clearTimeout(this.graphContentSlotSyncTimeoutId);
+            this.graphContentSlotSyncTimeoutId = undefined;
+        }
+        this.disconnectGraphContentSlotObserver();
+    }
+    componentWillLoad() {
+        this.syncGraphContentSlot();
+    }
     componentDidLoad() {
         if (this.link) {
             const anchorEl = this.el.getElementsByTagName('a')[0] || this.el.getElementsByTagName('button')[0];
@@ -21,9 +38,51 @@ export class DataCard {
             anchorEl.appendChild(anchorSpan);
         }
     }
+    componentWillRender() {
+        this.disconnectGraphContentSlotObserver();
+    }
+    componentDidRender() {
+        this.scheduleGraphContentSlotSync();
+    }
+    connectGraphContentSlotObserver() {
+        this.disconnectGraphContentSlotObserver();
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        this.graphContentSlotObserver = new MutationObserver(() => {
+            this.scheduleGraphContentSlotSync();
+        });
+        this.graphContentSlotObserver.observe(this.el, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['slot'],
+        });
+    }
+    disconnectGraphContentSlotObserver() {
+        this.graphContentSlotObserver?.disconnect();
+        this.graphContentSlotObserver = undefined;
+    }
+    scheduleGraphContentSlotSync() {
+        if (this.graphContentSlotSyncTimeoutId !== undefined) {
+            clearTimeout(this.graphContentSlotSyncTimeoutId);
+        }
+        this.graphContentSlotSyncTimeoutId = setTimeout(() => {
+            this.graphContentSlotSyncTimeoutId = undefined;
+            if (!this.el.isConnected) {
+                return;
+            }
+            this.syncGraphContentSlot();
+            this.connectGraphContentSlotObserver();
+        }, 0);
+    }
+    syncGraphContentSlot() {
+        const hasGraphContent = hostHasNamedSlot(this.el, GRAPH_CONTENT_SLOT);
+        if (hasGraphContent !== this.graphContentPresent) {
+            this.graphContentPresent = hasGraphContent;
+        }
+    }
     render() {
-        const contentSlot = 'graph-content';
-        const hasContentSlot = this.el.querySelector(`[slot="${contentSlot}"]`);
         const bgColorHue = this.variant === 'secondary' ? 'purple' : 'orange';
         const headerClasses = `xpl-data-card__header xpl-data-card__header--${this.variant === 'secondary' ? 'secondary' : 'primary'}`;
         const smallStatIcon = this.smallStatVariant === 'positive'
@@ -31,8 +90,8 @@ export class DataCard {
             : this.smallStatVariant === 'negative'
                 ? 'arrow-down-right'
                 : 'dash';
-        return (h(Host, { key: 'cbf0c9eb79fbd3e66c683e821e9b992d46d5ec1a', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, h("dt", { key: '92bc8a02b1acfa3c080a2a975d43118be54f10d5', class: headerClasses }, h("header", { key: 'f6a0baa73ab0e9d3a6eb9252acba54677a1083dc' }, !!this.leadingIcon && this.icon && (h("span", { key: 'dad99548c0ded82140b345e9887747c31ee9f6c7', class: `xpl-data-card__icon--${this.variant}` }, h("xpl-icon", { key: 'd591758d2ce1647ea67f03a27e4ae2efd29e4652', icon: this.icon, "background-color": bgColorHue, size: 20 }))), h("slot", { key: '07760d38b11971d96d7841c9897aa13481ea234c', name: "title" }, this.name)), this.link && (h("span", { key: '6ac3587f2ab1375cee605b22fe515e2c9a489e72', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: '160ebeeedc59a31e0ea3480dd393ec4623afb831', icon: "chevron-right", size: 16 })))), h("dd", { key: 'dcf0703823e9f58f71a112a83de3d65cd43e1ae1', class: "xpl-data-card__body" }, h("div", { key: 'd7551579d17cfebed3dac59d32b56eb166afb530', class: "xpl-data-card__left" }, h("span", { key: 'c5c412c76f9785de5ff8686db3dcb71540b79b1f', class: "xpl-data-card-stat xpl-data-card-stat--long" }, this.stat), this.tooltipTextStat ? (h("xpl-tooltip", { text: this.tooltipTextStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, this.shortStat ? this.shortStat : this.stat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, h("abbr", { title: this.stat }, this.shortStat ? this.shortStat : this.stat))), this.smallStatVariant ? (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (this.smallStatIcon &&
-            (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat)))), !!this.detail && h("span", { key: 'b33a9a133cf0a18deaccf6e3772ab1a797f9fa1f', class: "xpl-data-card__detail" }, this.detail)), hasContentSlot && (h("div", { key: 'e9dc031341b49ebf121cbe8cc081df6978aa13ad', class: "xpl-data-card__right" }, h("slot", { key: '37c8414e9dc60052f1d5a69d86ece17b7cdbc1da', name: contentSlot }))))));
+        return (h(Host, { key: '05aef87fdbc999cc563d9da2ae6207ffce5351cf', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, h("dt", { key: '833d00cd995e5d9f96c70e6f1af04f260076aea7', class: headerClasses }, h("header", { key: '283890fe21047be8ee81b64588a686f4f6339d28' }, !!this.leadingIcon && this.icon && (h("span", { key: '2c3e365280efb2c6c18a7d08261fc30e8d808da3', class: `xpl-data-card__icon--${this.variant}` }, h("xpl-icon", { key: '3564e1275b28e1693a45c51b4fc7936317b62e2f', icon: this.icon, "background-color": bgColorHue, size: 20 }))), h("slot", { key: 'd5469c77ca2a1ec16e702ee8ab94c230dbbe742a', name: "title" }, this.name)), this.link && (h("span", { key: '7a560cecc871b0e223372ecca08129d9f95d2c6e', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: 'f85ebee53967bc2ddd78291aaa63c85145d74930', icon: "chevron-right", size: 16 })))), h("dd", { key: 'c19eb772979606076a22f72b8ecb4261f7371374', class: "xpl-data-card__body" }, h("div", { key: '1ab9f94a29394608a18990ad4a06a663abd2f0a6', class: "xpl-data-card__left" }, h("span", { key: '41d8633f93cf7e2c220df4b51768e9b7c2295474', class: "xpl-data-card-stat xpl-data-card-stat--long" }, this.stat), this.tooltipTextStat ? (h("xpl-tooltip", { text: this.tooltipTextStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, this.shortStat ? this.shortStat : this.stat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, h("abbr", { title: this.stat }, this.shortStat ? this.shortStat : this.stat))), this.smallStatVariant ? (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (this.smallStatIcon &&
+            (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat)))), !!this.detail && h("span", { key: '5dfcb6891ce3529bee2f240d85238a895ea6c61d', class: "xpl-data-card__detail" }, this.detail)), this.graphContentPresent && (h("div", { key: '5b58f77c7a49e1aa157b73feb63e4ef1b5d36c0a', class: "xpl-data-card__right" }, h("slot", { key: '962482c44556b3722119cace638ea176af2f9533', name: GRAPH_CONTENT_SLOT }))))));
     }
     static get is() { return "xpl-data-card"; }
     static get properties() {
@@ -289,6 +348,11 @@ export class DataCard {
             }
         };
     }
+    static get states() {
+        return {
+            "graphContentPresent": {}
+        };
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{

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

@@ -3,7 +3,7 @@ export class Divider {
     render() {
         let className = 'xpl-divider';
         className += ` xpl-divider--${this.tier}`;
-        return (h(Host, { key: '1926b1e92a89dc5039042d29491f246cf3900efa', class: className }, h("span", { key: '492651208216149bfd4d2ed7cc8610b2bc8b05ea' }, h("slot", { key: '1e8b9e121ab1cb946b7a13d2bacbeea9a490a289' }))));
+        return (h(Host, { key: '942681efa6bd2c3806109240a5ac5c179b112551', class: className }, h("span", { key: 'ce0b0ada57e7a51319260c88c10e411e3aaf2992' }, h("slot", { key: 'da50f574acdf87def6ff77ef743bf38cc8717a79' }))));
     }
     static get is() { return "xpl-divider"; }
     static get properties() {

package/dist/collection/components/xpl-dropdown/xpl-dropdown-group/xpl-dropdown-group.js

@@ -1,26 +1,11 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s)
-        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-            t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { Host, h } from "@stencil/core";
 export class DropdownGroup {
     render() {
         const { groupName, options } = this;
         const hasOptions = options && options.length;
         const mappedOptions = hasOptions &&
-            options.map((_a) => {
-                var { groupName: optsGroupName } = _a, properties = __rest(_a, ["groupName"]);
-                return optsGroupName ? (h("xpl-dropdown-group", Object.assign({ label: optsGroupName }, properties))) : (h("xpl-dropdown-option", Object.assign({}, properties)));
-            });
-        return (h(Host, { key: 'e6326e88bf725b9f3f9c2701dbb6e62a185ad2e7', role: "group", "aria-label": groupName }, h("li", { key: '92b0a065e228bf368fc8a6214d7d3d86c986f4dd', class: "xpl-dropdown-list-item" }, h("xpl-dropdown-heading", { key: '60cda98e80262dfd23b5fe0b18370d8b6245d39a', label: groupName }), h("ul", { key: '7a7c186e05a04286650d7292e156deb41638f703', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: 'da798e46d297ec28a0880cf04e4f0e20220ab28a', name: "options" })))));
+            options.map(({ groupName: optsGroupName, ...properties }) => optsGroupName ? (h("xpl-dropdown-group", { label: optsGroupName, ...properties })) : (h("xpl-dropdown-option", { ...properties })));
+        return (h(Host, { key: '232eccef872d6563c056b3b709d3a741473de2b0', role: "group", "aria-label": groupName }, h("li", { key: '2185c7b55139ab7b144290c94ab53675a6224b46', class: "xpl-dropdown-list-item" }, h("xpl-dropdown-heading", { key: '26c0d13d0742fd34eb629c668bd929e5541fffb8', label: groupName }), h("ul", { key: '0f13b81deda008bf0588393ff1a4102a5c7a171d', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: '70cf6f662d1471c815f5e7c747080d7558efe407', name: "options" })))));
     }
     static get is() { return "xpl-dropdown-group"; }
     static get properties() {

package/dist/collection/components/xpl-dropdown/xpl-dropdown-heading/xpl-dropdown-heading.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class DropdownHeading {
     render() {
-        return (h(Host, { key: 'e4444b617fe160dbf259f4ecc2aafd6166859dce', class: { 'xpl-dropdown-heading': true }, role: "presentation" }, h("span", { key: '1e1e37499c0add5b53fcd0a836f97fa5b9e1a9bd' }, this.label || h("slot", { key: 'c310120a37646452e989db2ead01d77a89b96f0d', name: "heading" }))));
+        return (h(Host, { key: '04265224adcc5b65f53d2e35d0cfef470931ce41', class: { 'xpl-dropdown-heading': true }, role: "presentation" }, h("span", { key: '27293255cdfe35d207f3f0155beae3dc4b737e0d' }, this.label || h("slot", { key: 'b5bbee144360b2e5da681864e3dae6c2cafd2552', name: "heading" }))));
     }
     static get is() { return "xpl-dropdown-heading"; }
     static get properties() {

package/dist/collection/components/xpl-dropdown/xpl-dropdown-option/xpl-dropdown-option.js

@@ -1,5 +1,8 @@
 import { Host, h } from "@stencil/core";
 export class DropdownOptionCpnt {
+    constructor() {
+        this.dropdown = null;
+    }
     componentWillLoad() {
         this.dropdown = this.hostElement.closest('xpl-dropdown');
     }
@@ -22,7 +25,8 @@ export class DropdownOptionCpnt {
         const navigationKeys = ['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'Tab'];
         const { closeOnSelect, mode, selectOnFocus } = this.dropdown;
         if (selectOnFocus && navigationKeys.includes(ev.key)) {
-            const hostElement = document.activeElement.closest('xpl-dropdown-option');
+            const { activeElement } = document;
+            const hostElement = activeElement?.closest('xpl-dropdown-option') ?? null;
             const component = {
                 component: { hostElement },
             };
@@ -49,11 +53,11 @@ export class DropdownOptionCpnt {
     }
     render() {
         const { label, isSelected, isDisabled, value, subtitle, icon } = this;
-        return (h(Host, { key: '66ffacb152e80f270877a189488048ef6b36b7af', class: {
+        return (h(Host, { key: 'f4fa4b0a3150fafd4b1c259aa140925219487898', class: {
                 'xpl-dropdown-option': true,
-                'xpl-dropdown-option--disabled': isDisabled,
-                'xpl-dropdown-option--selected': isSelected,
-            }, role: "option", "aria-checked": isSelected, "aria-disabled": isDisabled, "aria-selected": isSelected, value: value }, h("li", { key: '274fa639d506ef3feb5bafc3f0b21ed8bf80e95a', class: "xpl-dropdown-list-item" }, icon && (h("xpl-icon", { key: 'e7f63ede84adca57d99baa06dc1555d3afacd02c', class: "xpl-dropdown-list-item__icon", icon: icon, size: 20 })), label || h("slot", { key: 'cc0874abba079616e8516d366981a38ddef550b1', name: "option" }), subtitle && h("span", { key: '37cd186edb0de3f4c33b9faa2dfa983424a011bd', class: "xpl-dropdown-list-item__subtitle" }, subtitle))));
+                'xpl-dropdown-option--disabled': !!isDisabled,
+                'xpl-dropdown-option--selected': !!isSelected,
+            }, role: "option", "aria-checked": isSelected, "aria-disabled": isDisabled, "aria-selected": isSelected, value: value }, h("li", { key: '417af38233cd4765cc54a0cc4541bb5caeaf10ab', class: "xpl-dropdown-list-item" }, icon && (h("xpl-icon", { key: '48cbe69b056142ce5ef5cd6c608a99f1defd2e9f', class: "xpl-dropdown-list-item__icon", icon: icon, size: 20 })), label || h("slot", { key: '14b86d61bab431487cdef906a0a9b138d6ab4bbb', name: "option" }), subtitle && h("span", { key: 'c7ff5ee61b08f7a94d107183127c0b9cff0b49b5', class: "xpl-dropdown-list-item__subtitle" }, subtitle))));
     }
     static get is() { return "xpl-dropdown-option"; }
     static get properties() {