@xplortech/apollo-core 2.10.0 → 2.12.0

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

@@ -0,0 +1,18 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+
+const BreadcrumbItem = class {
+    constructor(hostRef) {
+        index.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 (index.h(index.Host, { key: '05e99f78af5eab5e1cec089972ffb032eea34e88', class: "xpl-breadcrumb-item", role: "listitem" }, index.h("li", { key: 'a692a2e091bf8038fc04f675dcaaac0f2e7a7c2f', role: "none" }, index.h("slot", { key: 'f4b90f80b4eba10d285ff104b529d22bdc8f0e0b' })), index.h("span", { key: 'a6b05807f7683d9ebbffdc3566c3f1754bb41206', innerHTML: this.chevron })));
+    }
+};
+
+exports.xpl_breadcrumb_item = BreadcrumbItem;

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

@@ -0,0 +1,14 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+
+const Breadcrumbs = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: 'ec9689395d536e7018469193ba61c094d79fa004' }, index.h("nav", { key: 'ffb0b88d3b331a22d1ae620aeb67ad901c801153', class: "xpl-breadcrumbs", "aria-label": "Breadcrumb" }, index.h("ol", { key: '9649caceca01e86584682f4843c30fe080b364e1', role: "list" }, index.h("slot", { key: '68f438d33b5cd458cd0643a4f28c04dd824366c7' })))));
+    }
+};
+
+exports.xpl_breadcrumbs = Breadcrumbs;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BaXVr8ux.js');
+var index = require('./index-3cBvw409.js');
 
 const ButtonRow = class {
     constructor(hostRef) {
@@ -13,7 +13,7 @@ const ButtonRow = class {
         this.onTertiary = () => this.clickTertiary.emit();
     }
     render() {
-        return (index.h(index.Host, { key: 'cd6436989f07af18d1e696a26e3e990d99859b2e', class: "xpl-button-row" }, index.h("div", { key: '67a9ab3127bdd31d416d716bf06a2548d4b04341', class: "xpl-button-row-inner" }, index.h("div", { key: 'f4c9e84868a5476500ffd65381fafe6c427e63ad', class: "xpl-button-row__left" }, this.secondary && (index.h("xpl-button", { key: '9c264293c00634759559c8109657f8a58451dc06', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary))), index.h("div", { key: 'df3443bd9afa937c4936e7b902da146f4a999f56', class: "xpl-button-row__right" }, this.tertiary && (index.h("xpl-button", { key: '85912cdbc02ac6587085564dbfb4f0647b656d7d', variant: "subtle", type: "button", onClick: this.onTertiary }, this.tertiary)), this.secondary && (index.h("xpl-button", { key: 'cbb4302e9853d751b7b75e386c6d9441037c301e', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary)), this.primary && (index.h("xpl-button", { key: '10991142b7062283d129ba3428e5d3f1c060a973', class: "xpl-button-row__primary", onClick: this.onPrimary }, this.primary))))));
+        return (index.h(index.Host, { key: '060eb37a03ab854c56b383cf2ed598915f8b4c6f', class: "xpl-button-row" }, index.h("div", { key: '169e722e0ccb0045680001755943aa1087c70a79', class: "xpl-button-row-inner" }, index.h("div", { key: '8a49375971621161e3c1ad692ef9257b1c4bac43', class: "xpl-button-row__left" }, this.secondary && (index.h("xpl-button", { key: '3cc16072ce7e9b4731b50fbaf647659b842763ad', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary))), index.h("div", { key: 'e1d248e9b65f241f5eee07d2808ee3cb67b6c867', class: "xpl-button-row__right" }, this.tertiary && (index.h("xpl-button", { key: '827f7c01fb4617bb10acfc79b20a515718c6d539', variant: "subtle", type: "button", onClick: this.onTertiary }, this.tertiary)), this.secondary && (index.h("xpl-button", { key: '726167a62d0b3dc6f19b6e38abaa446cb474a07c', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary)), this.primary && (index.h("xpl-button", { key: '2d7d7fe4e965ce093d969936ff96d224762499e1', class: "xpl-button-row__primary", onClick: this.onPrimary }, this.primary))))));
     }
 };
 

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

@@ -0,0 +1,81 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+
+const Button = class {
+    constructor(hostRef) {
+        index.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 index.h("xpl-icon", { icon: this.icon });
+        }
+        return null;
+    }
+    handleLoadingState(e) {
+        if (this.isLoading) {
+            e.preventDefault();
+            e.stopPropagation();
+            e.stopImmediatePropagation();
+        }
+    }
+    render() {
+        return (index.h(index.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 ? (index.h("slot", null)) : (index.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 && index.h("span", { class: "xpl-button__icon" }, this.renderIcon()), index.h("slot", null), this.isLoading && (index.h("span", { class: "xpl-button__loading-overlay", "aria-hidden": "true" }, index.h("span", { class: "xpl-button__loading-spinner" }, index.h("xpl-icon", { icon: "loader-4" }))))))));
+    }
+    get el() { return index.getElement(this); }
+};
+
+exports.xpl_button = Button;

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

@@ -1,7 +1,8 @@
 'use strict';
 
-var index = require('./index-BaXVr8ux.js');
+var index = require('./index-3cBvw409.js');
 var index$1 = require('./index-BvmWjxWc.js');
+var lifecycle = require('./lifecycle-DeSsFfQZ.js');
 var v4 = require('./v4-_2BfiRUa.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
@@ -26,9 +27,12 @@ const Calendar = class {
         }
     }
     componentWillLoad() {
-        this.calendarInputId = this.inputId;
+        this.calendarInputId = this.inputId ?? '';
     }
     componentDidLoad() {
+        if (!lifecycle.isBrowser()) {
+            return;
+        }
         this.flatpickrInstance = index$1.flatpickr(this.inputElement, {
             allowInput: true,
             dateFormat: this.dateFormat,
@@ -41,9 +45,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()));
@@ -57,8 +60,9 @@ const Calendar = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '180c1c356f07920c05487c50dd534284004cfce5', class: "xpl-calendar" }, index.h("input", { key: '6f46ef2a9c81043eb65a66208e71ce7e8504abea', class: "xpl-calendar-input", type: "text", id: this.calendarInputId, ref: (el) => {
-                this.inputElement = el;
+        return (index.h(index.Host, { key: '76d2b26fe34d766b1e1348f7d5336c5ec478bae9', class: "xpl-calendar" }, index.h("input", { key: '8f015adda8e5c4f7a5f0dd9815bdead0249e3a4e', class: "xpl-calendar-input", type: "text", id: this.calendarInputId, ref: (el) => {
+                if (el)
+                    this.inputElement = el;
             } })));
     }
 };

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

@@ -0,0 +1,32 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+var v4 = require('./v4-_2BfiRUa.js');
+
+const Checkbox = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.checkboxChange = index.createEvent(this, "checkboxChange", 7);
+        this.id = v4.v4();
+        this.ariaLabel = '';
+        this.onChange = (event) => {
+            const target = event.target;
+            this.checkboxChange.emit(target.checked);
+        };
+    }
+    render() {
+        return (index.h(index.Host, { key: 'fba24f4540febb1d52a143ae8249978820731422', class: {
+                'xpl-checkbox-radio-container': true,
+                styled: !!this.styled,
+                disabled: !!this.disabled,
+            } }, index.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 }), index.h("label", { key: '84548eea585da460e834d1e34b24e0b3724a38ea', class: {
+                'xpl-label': true,
+                'xpl-label--disabled': !!this.disabled,
+            }, htmlFor: this.id }, index.h("slot", { key: 'f9451918bee8abc6dea4fd65acef75bb13b69e4d' }), this.description && (index.h("small", { key: '02db357e5080d87595bdfd5baac1be2a2bb771d7', class: {
+                'xpl-description': true,
+                'xpl-description--disabled': !!this.disabled,
+            } }, this.description)))));
+    }
+};
+
+exports.xpl_checkbox = Checkbox;

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

@@ -0,0 +1,68 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+var v4 = require('./v4-_2BfiRUa.js');
+
+const Choicelist = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.choicelistChange = index.createEvent(this, "choicelistChange", 7);
+        this.choicelistValueChange = index.createEvent(this, "choicelistValueChange", 7);
+        this.name = v4.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 ? (index.h("xpl-checkbox", { value: value, description: description, name: this.name, checked: checked, onCheckboxChange: (event) => this.onChoiceChange(event.detail, choiceIndex) }, label)) : (index.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 (index.h(index.Host, { key: 'e46ee9af6a052090343eeadbcba66997b38d2edc', class: "xpl-choicelist-container" }, this.heading !== undefined || this.description !== undefined ? (index.h("div", { class: "xpl-choicelist-heading" }, this.heading && index.h("h3", null, this.heading), this.description && index.h("p", null, this.description))) : null, this.choices && (index.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 (index.h("li", { class: {
+                    selected: !!this.styled && !!this.selected[i],
+                } }, inner, choice.children && (index.h("ul", null, choice.children.map((child, j) => {
+                const childInner = this.renderChoice(child, j);
+                return index.h("li", null, childInner);
+            })))));
+        })))));
+    }
+    static get watchers() { return {
+        "choices": [{
+                "onChoicesPropChange": 0
+            }],
+        "selected": [{
+                "onSelectedChange": 0
+            }]
+    }; }
+};
+
+exports.xpl_choicelist = Choicelist;

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

@@ -0,0 +1,15 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+
+const ContentArea = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.size = 'wide';
+    }
+    render() {
+        return (index.h(index.Host, { key: '1b43a3fa4173d34533cf7015005b3e37792f0af6' }, index.h("main", { key: '0b0f905db96103b7a7c24cd40af26c448422ce85', class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, index.h("div", { key: 'b495ccc07df5e617f147057d7003805c431386d5', class: "xpl-content-area" }, index.h("slot", { key: '093b4b9830e0f6a8bee554bc8bac255d4944784d' })))));
+    }
+};
+
+exports.xpl_content_area = ContentArea;

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

@@ -0,0 +1,14 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+
+const Dashboard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: '3f8c104ae7775cda5f23ff515d8de7013d0ca09c' }, index.h("dl", { key: 'f68ec082b0f3587eb9977a03289097d3e838488d', class: "xpl-dashboard" }, index.h("slot", { key: 'f67b34cfe1683d3ee2f70be9d3d075603e536559' }))));
+    }
+};
+
+exports.xpl_dashboard = Dashboard;

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

@@ -0,0 +1,111 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+var slotPresence = require('./slot-presence-HmQUW2Ba.js');
+
+const GRAPH_CONTENT_SLOT = 'graph-content';
+const DataCard = class {
+    constructor(hostRef) {
+        index.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 = slotPresence.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 (index.h(index.Host, { key: '7480f4a5839e985f317f697984ec3752a0e5f4fb', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, index.h("dt", { key: 'ee0d40e32b700fa8dcda517454f7dfe88439f705', class: headerClasses }, index.h("header", { key: '405d707dafdd90942bb7122904d0d8a7ef1e989a' }, !!this.leadingIcon && this.icon && (index.h("span", { key: 'd2f505eab301051b854355cbe8e8608153f1c509', class: `xpl-data-card__icon--${this.variant}` }, index.h("xpl-icon", { key: 'e4c3366b8ec3e0a55b2cc47877d832c72ff018ac', icon: this.icon, "background-color": bgColorHue, size: 20 }))), index.h("slot", { key: 'a2d1c4b93e4860d046f6da66d5b82a19f60e7346', name: "title" }, this.name)), this.link && (index.h("span", { key: '8966de78de4d6fac11841afaec872a2c2f3d1db0', class: "xpl-data-card__header-arrow" }, index.h("xpl-icon", { key: '62bc6170d62a773e5e38830c53a4abb0335a9fa8', icon: "chevron-right", size: 16 })))), index.h("dd", { key: 'b10cbb97c475155819c8f35afa2b294153c7153a', class: "xpl-data-card__body" }, index.h("div", { key: '4bf749bdcea4cd4b8a53cee3476e249556357038', class: "xpl-data-card__left" }, index.h("span", { key: '8285b0cca2a5f8be35d9096980085d1e0ed6cebc', class: "xpl-data-card-stat xpl-data-card-stat--long" }, this.stat), this.tooltipTextStat ? (index.h("xpl-tooltip", { text: this.tooltipTextStat }, index.h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, this.shortStat ? this.shortStat : this.stat))) : (index.h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, index.h("abbr", { title: this.stat }, this.shortStat ? this.shortStat : this.stat))), this.smallStatVariant ? (this.tooltipTextSmallStat ? (index.h("xpl-tooltip", { text: this.tooltipTextSmallStat }, index.h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, index.h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (index.h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, index.h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (this.smallStatIcon &&
+            (this.tooltipTextSmallStat ? (index.h("xpl-tooltip", { text: this.tooltipTextSmallStat }, index.h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, index.h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat))) : (index.h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, index.h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat)))), !!this.detail && index.h("span", { key: 'fbb5c740dc2a637198aad042800efb713fff154b', class: "xpl-data-card__detail" }, this.detail)), this.graphContentPresent && (index.h("div", { key: 'b8f8f8fd70e1984edad76060e8b32db62c22bf5c', class: "xpl-data-card__right" }, index.h("slot", { key: 'a3c1a9e98111de7a091ded98aded8e722af1f806', name: GRAPH_CONTENT_SLOT }))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "stat": [{
+                "watchStat": 0
+            }],
+        "shortStat": [{
+                "watchShortStat": 0
+            }]
+    }; }
+};
+
+exports.xpl_data_card = DataCard;