@xplortech/apollo-core 2.10.0 → 2.12.0

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

@@ -0,0 +1,72 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-ukZKsqqq.js';
+
+const Banner = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.action = createEvent(this, "action", 7);
+        this.dismiss = createEvent(this, "dismiss", 7);
+        this.secondaryAction = createEvent(this, "secondaryAction", 7);
+        this.appearance = 'information';
+        this.hasIcon = true;
+        this.isDismissible = true;
+        this.isSection = false;
+        this.truncateDesc = false;
+    }
+    getIcon() {
+        switch (this.appearance) {
+            case 'positive':
+                return 'circle-check';
+            case 'warning':
+                return 'triangle-warning';
+            case 'error':
+                return 'octagon-warning';
+            default:
+                return 'circle-info';
+        }
+    }
+    getActionButtonState() {
+        if (this.isSection) {
+            if (this.appearance === 'positive') {
+                return 'success';
+            }
+            if (this.appearance === 'error') {
+                return 'warning';
+            }
+            return undefined;
+        }
+        return this.appearance === 'error' ? 'warning' : undefined;
+    }
+    getActionButtonVariant() {
+        if (this.isSection)
+            return 'subtle';
+        return this.appearance === 'error' ? 'primary' : 'subtle';
+    }
+    getAriaLabel() {
+        if (this.isSection) {
+            return this.heading?.trim() || 'Section banner';
+        }
+        return {
+            information: 'Information banner',
+            positive: 'Positive banner',
+            warning: 'Warning banner',
+            error: 'Error banner',
+        }[this.appearance];
+    }
+    render() {
+        const hasAction = !!this.actionText?.trim();
+        const hasSecondaryAction = !!this.secondaryActionText?.trim();
+        const actionVariant = this.getActionButtonVariant();
+        const actionState = this.getActionButtonState();
+        const isHeadingPresent = !!this.heading?.trim();
+        const isDescPresent = !!this.description?.trim();
+        return (h(Host, { key: '476c72c3dad23d9d62a8d68a826fb75a93fc88ee', class: {
+                'xpl-banner': true,
+                'xpl-banner--section': this.isSection,
+                [`xpl-banner--${this.appearance}`]: true,
+                'xpl-banner--truncate-desc': this.truncateDesc,
+                'xpl-banner--no-icon': this.isSection && !this.hasIcon,
+            }, role: "region", "aria-label": this.getAriaLabel() }, (!this.isSection || this.hasIcon) && (h("div", { key: 'b81395caa66c8c56a54535a5ace6fd3a027b0075', class: "xpl-banner__icon", "aria-hidden": "true" }, h("xpl-icon", { key: 'e8dd31a592ba17dd1825630a4f1ba9bc7323891a', icon: this.getIcon(), size: 24 }))), h("div", { key: '034eab05c801635fdbfb7ea549c4472407f3f09f', class: "xpl-banner__body" }, isHeadingPresent && h("p", { key: 'c9216bd4c11c1d3bda0e1654282d9a713e955968', class: "xpl-banner__heading" }, this.heading), isDescPresent && (h("p", { key: 'e67d92d7b71b678b19627741a01d2e4b26ef7093', class: "xpl-banner__description", title: this.truncateDesc ? this.description : undefined }, this.description))), (hasAction || hasSecondaryAction) && (h("div", { key: 'dd4d7bcae4bde9d16124b27993d7d1b2e96e086e', class: "xpl-banner__actions" }, hasAction && (h("xpl-button", { key: '51df92818c4194c76c609776f85aa31c7bffb34b', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.action.emit() }, this.actionText)), hasSecondaryAction && (h("xpl-button", { key: '7f911d3a81190cde339f69a2d93eb0c2518c9036', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.secondaryAction.emit() }, this.secondaryActionText)))), this.isDismissible && (h("button", { key: 'b9d1b8d15f0adac5b7eaa5c3e287c4b0fe7b987e', class: "xpl-banner__dismiss", type: "button", "aria-label": `Dismiss ${this.isSection ? 'section ' : ''}banner`, onClick: () => this.dismiss.emit() }, h("xpl-icon", { key: '528fd238ccfb1e52c7fe5c0d093f30a4fa4603bd', icon: "xmark", size: 24, "aria-hidden": "true" })))));
+    }
+};
+
+export { Banner as xpl_banner };

package/dist/esm/xpl-breadcrumb-item.entry.js

@@ -0,0 +1,16 @@
+import { r as registerInstance, h, H as Host } from './index-ukZKsqqq.js';
+
+const BreadcrumbItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.chevron = `<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-right" class="svg-inline--fa fa-chevron-right fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+        <path fill="currentColor" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path>
+    </svg>
+    `;
+    }
+    render() {
+        return (h(Host, { key: '05e99f78af5eab5e1cec089972ffb032eea34e88', class: "xpl-breadcrumb-item", role: "listitem" }, h("li", { key: 'a692a2e091bf8038fc04f675dcaaac0f2e7a7c2f', role: "none" }, h("slot", { key: 'f4b90f80b4eba10d285ff104b529d22bdc8f0e0b' })), h("span", { key: 'a6b05807f7683d9ebbffdc3566c3f1754bb41206', innerHTML: this.chevron })));
+    }
+};
+
+export { BreadcrumbItem as xpl_breadcrumb_item };

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

@@ -0,0 +1,12 @@
+import { r as registerInstance, h, H as Host } from './index-ukZKsqqq.js';
+
+const Breadcrumbs = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: 'ec9689395d536e7018469193ba61c094d79fa004' }, h("nav", { key: 'ffb0b88d3b331a22d1ae620aeb67ad901c801153', class: "xpl-breadcrumbs", "aria-label": "Breadcrumb" }, h("ol", { key: '9649caceca01e86584682f4843c30fe080b364e1', role: "list" }, h("slot", { key: '68f438d33b5cd458cd0643a4f28c04dd824366c7' })))));
+    }
+};
+
+export { Breadcrumbs as xpl_breadcrumbs };

package/dist/esm/xpl-button-row.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-CXkZUm1c.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-ukZKsqqq.js';
 
 const ButtonRow = class {
     constructor(hostRef) {
@@ -11,7 +11,7 @@ const ButtonRow = class {
         this.onTertiary = () => this.clickTertiary.emit();
     }
     render() {
-        return (h(Host, { key: 'cd6436989f07af18d1e696a26e3e990d99859b2e', class: "xpl-button-row" }, h("div", { key: '67a9ab3127bdd31d416d716bf06a2548d4b04341', class: "xpl-button-row-inner" }, h("div", { key: 'f4c9e84868a5476500ffd65381fafe6c427e63ad', class: "xpl-button-row__left" }, this.secondary && (h("xpl-button", { key: '9c264293c00634759559c8109657f8a58451dc06', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary))), h("div", { key: 'df3443bd9afa937c4936e7b902da146f4a999f56', class: "xpl-button-row__right" }, this.tertiary && (h("xpl-button", { key: '85912cdbc02ac6587085564dbfb4f0647b656d7d', variant: "subtle", type: "button", onClick: this.onTertiary }, this.tertiary)), this.secondary && (h("xpl-button", { key: 'cbb4302e9853d751b7b75e386c6d9441037c301e', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary)), this.primary && (h("xpl-button", { key: '10991142b7062283d129ba3428e5d3f1c060a973', class: "xpl-button-row__primary", onClick: this.onPrimary }, this.primary))))));
+        return (h(Host, { key: '060eb37a03ab854c56b383cf2ed598915f8b4c6f', class: "xpl-button-row" }, h("div", { key: '169e722e0ccb0045680001755943aa1087c70a79', class: "xpl-button-row-inner" }, h("div", { key: '8a49375971621161e3c1ad692ef9257b1c4bac43', class: "xpl-button-row__left" }, this.secondary && (h("xpl-button", { key: '3cc16072ce7e9b4731b50fbaf647659b842763ad', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary))), h("div", { key: 'e1d248e9b65f241f5eee07d2808ee3cb67b6c867', class: "xpl-button-row__right" }, this.tertiary && (h("xpl-button", { key: '827f7c01fb4617bb10acfc79b20a515718c6d539', variant: "subtle", type: "button", onClick: this.onTertiary }, this.tertiary)), this.secondary && (h("xpl-button", { key: '726167a62d0b3dc6f19b6e38abaa446cb474a07c', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary)), this.primary && (h("xpl-button", { key: '2d7d7fe4e965ce093d969936ff96d224762499e1', class: "xpl-button-row__primary", onClick: this.onPrimary }, this.primary))))));
     }
 };
 

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

@@ -0,0 +1,79 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-ukZKsqqq.js';
+
+const Button = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.disabled = false;
+        this.fullWidth = false;
+        this.icon = '';
+        this.iconOnly = false;
+        this.iconPosition = 'start';
+        this.isLoading = false;
+        this.sentiment = 'neutral';
+        this.size = 'default';
+        this.variant = 'primary';
+    }
+    componentDidRender() {
+        const attrs = this.el.attributes;
+        const dataAttrs = Object.keys(attrs)
+            .map((key) => Number(key))
+            .filter((index) => {
+            const attr = attrs[index];
+            return attr?.name.includes('data-test') || attr?.name.includes('aria-') || false;
+        })
+            .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.entries(dataAttrs).forEach(([name, value]) => {
+                button.setAttribute(name, value);
+                this.el.removeAttribute(name);
+            });
+        }
+    }
+    handleDisabledClick(e) {
+        if (this.disabled) {
+            e.preventDefault();
+            e.stopImmediatePropagation();
+        }
+    }
+    renderIcon() {
+        if (this.icon) {
+            return h("xpl-icon", { icon: this.icon });
+        }
+        return null;
+    }
+    handleLoadingState(e) {
+        if (this.isLoading) {
+            e.preventDefault();
+            e.stopPropagation();
+            e.stopImmediatePropagation();
+        }
+    }
+    render() {
+        return (h(Host, { key: '88b28108ae3675732cc51462438c4d067223fbcd', class: {
+                'xpl-button': true,
+                [`xpl-button--${this.size}`]: true,
+                [`xpl-button--${this.variant}`]: true,
+                [`xpl-button--${this.state ? this.state : this.sentiment}`]: true,
+                [this.icon ? `xpl-button__icon-position--${this.iconPosition}` : '']: !!this.icon,
+                'xpl-button--full-width': this.fullWidth,
+                '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", { ...(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" }))))))));
+    }
+    get el() { return getElement(this); }
+};
+
+export { Button as xpl_button };

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

@@ -1,5 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-CXkZUm1c.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-ukZKsqqq.js';
 import { f as flatpickr } from './index-CH4yJ6Qx.js';
+import { i as isBrowser } from './lifecycle-Dqb1pIRo.js';
 import { v as v4 } from './v4-CK3_k8jD.js';
 
 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
@@ -24,9 +25,12 @@ const Calendar = class {
         }
     }
     componentWillLoad() {
-        this.calendarInputId = this.inputId;
+        this.calendarInputId = this.inputId ?? '';
     }
     componentDidLoad() {
+        if (!isBrowser()) {
+            return;
+        }
         this.flatpickrInstance = flatpickr(this.inputElement, {
             allowInput: true,
             dateFormat: this.dateFormat,
@@ -39,9 +43,8 @@ const Calendar = class {
             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()));
@@ -55,8 +58,9 @@ const Calendar = class {
         }
     }
     render() {
-        return (h(Host, { key: '180c1c356f07920c05487c50dd534284004cfce5', class: "xpl-calendar" }, h("input", { key: '6f46ef2a9c81043eb65a66208e71ce7e8504abea', class: "xpl-calendar-input", type: "text", id: this.calendarInputId, ref: (el) => {
-                this.inputElement = el;
+        return (h(Host, { key: '76d2b26fe34d766b1e1348f7d5336c5ec478bae9', class: "xpl-calendar" }, h("input", { key: '8f015adda8e5c4f7a5f0dd9815bdead0249e3a4e', class: "xpl-calendar-input", type: "text", id: this.calendarInputId, ref: (el) => {
+                if (el)
+                    this.inputElement = el;
             } })));
     }
 };

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

@@ -0,0 +1,30 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-ukZKsqqq.js';
+import { v as v4 } from './v4-CK3_k8jD.js';
+
+const Checkbox = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.checkboxChange = createEvent(this, "checkboxChange", 7);
+        this.id = v4();
+        this.ariaLabel = '';
+        this.onChange = (event) => {
+            const target = event.target;
+            this.checkboxChange.emit(target.checked);
+        };
+    }
+    render() {
+        return (h(Host, { key: 'fba24f4540febb1d52a143ae8249978820731422', class: {
+                'xpl-checkbox-radio-container': true,
+                styled: !!this.styled,
+                disabled: !!this.disabled,
+            } }, h("input", { key: '1663fd03d0f76952ddbe1a8ce87ea7c76c31631c', 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: '84548eea585da460e834d1e34b24e0b3724a38ea', class: {
+                'xpl-label': true,
+                'xpl-label--disabled': !!this.disabled,
+            }, htmlFor: this.id }, h("slot", { key: 'f9451918bee8abc6dea4fd65acef75bb13b69e4d' }), this.description && (h("small", { key: '02db357e5080d87595bdfd5baac1be2a2bb771d7', class: {
+                'xpl-description': true,
+                'xpl-description--disabled': !!this.disabled,
+            } }, this.description)))));
+    }
+};
+
+export { Checkbox as xpl_checkbox };

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

@@ -0,0 +1,66 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-ukZKsqqq.js';
+import { v as v4 } from './v4-CK3_k8jD.js';
+
+const Choicelist = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.choicelistChange = createEvent(this, "choicelistChange", 7);
+        this.choicelistValueChange = createEvent(this, "choicelistValueChange", 7);
+        this.name = v4();
+        this.onChoiceChange = (_value, choiceIndex) => {
+            const choice = this.choices[choiceIndex];
+            if (this.multi) {
+                this.selected = this.selected.map((isSelected, index) => index === choiceIndex ? !isSelected : isSelected);
+                if (choice?.value !== undefined) {
+                    const changedValues = this.choices
+                        .filter((_, index) => 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?.value !== undefined) {
+                    this.choicelistValueChange.emit(choice.value);
+                }
+            }
+        };
+        this.renderChoice = ({ description, label, value, checked }, choiceIndex) => this.multi ? (h("xpl-checkbox", { value: value, description: description, name: this.name, checked: checked, onCheckboxChange: (event) => this.onChoiceChange(event.detail, choiceIndex) }, label)) : (h("xpl-radio", { value: value, description: description, name: this.name, checked: checked, onRadioChange: (event) => this.onChoiceChange(event.detail, choiceIndex) }, label));
+    }
+    onChoicesPropChange(newValue) {
+        this.selected =
+            newValue !== undefined && newValue !== null && newValue.length > 0
+                ? newValue.map((item) => item.checked || false)
+                : [];
+    }
+    onSelectedChange(newValue) {
+        this.choicelistChange.emit(newValue);
+    }
+    componentWillLoad() {
+        this.onChoicesPropChange(this.choices);
+    }
+    render() {
+        return (h(Host, { key: 'e46ee9af6a052090343eeadbcba66997b38d2edc', 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: '4f995575dae9b8b1a8f136b3a336fd5ccce7e3f1', class: {
+                'xpl-choicelist': true,
+                '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],
+                } }, inner, choice.children && (h("ul", null, choice.children.map((child, j) => {
+                const childInner = this.renderChoice(child, j);
+                return h("li", null, childInner);
+            })))));
+        })))));
+    }
+    static get watchers() { return {
+        "choices": [{
+                "onChoicesPropChange": 0
+            }],
+        "selected": [{
+                "onSelectedChange": 0
+            }]
+    }; }
+};
+
+export { Choicelist as xpl_choicelist };

package/dist/esm/xpl-content-area.entry.js

@@ -0,0 +1,13 @@
+import { r as registerInstance, h, H as Host } from './index-ukZKsqqq.js';
+
+const ContentArea = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.size = 'wide';
+    }
+    render() {
+        return (h(Host, { key: '1b43a3fa4173d34533cf7015005b3e37792f0af6' }, h("main", { key: '0b0f905db96103b7a7c24cd40af26c448422ce85', class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, h("div", { key: 'b495ccc07df5e617f147057d7003805c431386d5', class: "xpl-content-area" }, h("slot", { key: '093b4b9830e0f6a8bee554bc8bac255d4944784d' })))));
+    }
+};
+
+export { ContentArea as xpl_content_area };

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

@@ -0,0 +1,12 @@
+import { r as registerInstance, h, H as Host } from './index-ukZKsqqq.js';
+
+const Dashboard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: '3f8c104ae7775cda5f23ff515d8de7013d0ca09c' }, h("dl", { key: 'f68ec082b0f3587eb9977a03289097d3e838488d', class: "xpl-dashboard" }, h("slot", { key: 'f67b34cfe1683d3ee2f70be9d3d075603e536559' }))));
+    }
+};
+
+export { Dashboard as xpl_dashboard };

package/dist/esm/xpl-data-card.entry.js

@@ -0,0 +1,109 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-ukZKsqqq.js';
+import { h as hostHasNamedSlot } from './slot-presence-_r9-FML8.js';
+
+const GRAPH_CONTENT_SLOT = 'graph-content';
+const DataCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.graphContentPresent = false;
+        this.leadingIcon = true;
+        this.tooltipTextSmallStat = '';
+        this.tooltipTextStat = '';
+    }
+    watchStat(newValue) {
+        this.stat = newValue;
+    }
+    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];
+            const anchorText = document.createTextNode(this.name);
+            const anchorSpan = document.createElement('span');
+            anchorSpan.appendChild(anchorText);
+            anchorEl.setAttribute('class', 'xpl-data-card__anchor');
+            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 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'
+            ? 'arrow-up-right'
+            : this.smallStatVariant === 'negative'
+                ? 'arrow-down-right'
+                : 'dash';
+        return (h(Host, { key: '7480f4a5839e985f317f697984ec3752a0e5f4fb', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, h("dt", { key: 'ee0d40e32b700fa8dcda517454f7dfe88439f705', class: headerClasses }, h("header", { key: '405d707dafdd90942bb7122904d0d8a7ef1e989a' }, !!this.leadingIcon && this.icon && (h("span", { key: 'd2f505eab301051b854355cbe8e8608153f1c509', class: `xpl-data-card__icon--${this.variant}` }, h("xpl-icon", { key: 'e4c3366b8ec3e0a55b2cc47877d832c72ff018ac', icon: this.icon, "background-color": bgColorHue, size: 20 }))), h("slot", { key: 'a2d1c4b93e4860d046f6da66d5b82a19f60e7346', name: "title" }, this.name)), this.link && (h("span", { key: '8966de78de4d6fac11841afaec872a2c2f3d1db0', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: '62bc6170d62a773e5e38830c53a4abb0335a9fa8', icon: "chevron-right", size: 16 })))), h("dd", { key: 'b10cbb97c475155819c8f35afa2b294153c7153a', class: "xpl-data-card__body" }, h("div", { key: '4bf749bdcea4cd4b8a53cee3476e249556357038', class: "xpl-data-card__left" }, h("span", { key: '8285b0cca2a5f8be35d9096980085d1e0ed6cebc', 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: 'fbb5c740dc2a637198aad042800efb713fff154b', class: "xpl-data-card__detail" }, this.detail)), this.graphContentPresent && (h("div", { key: 'b8f8f8fd70e1984edad76060e8b32db62c22bf5c', class: "xpl-data-card__right" }, h("slot", { key: 'a3c1a9e98111de7a091ded98aded8e722af1f806', name: GRAPH_CONTENT_SLOT }))))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "stat": [{
+                "watchStat": 0
+            }],
+        "shortStat": [{
+                "watchShortStat": 0
+            }]
+    }; }
+};
+
+export { DataCard as xpl_data_card };