@xplortech/apollo-core 2.11.0 → 3.0.0

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: 'd16058b571f7af6d2a83cbdce15b12bccadf0036', class: {
+                'xpl-checkbox-radio-container': true,
+                styled: !!this.styled,
+                disabled: !!this.disabled,
+            } }, index.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 }), index.h("label", { key: '37e85b721cef98c8ccc448e08dbf9d9c968bd0a6', class: {
+                'xpl-label': true,
+                'xpl-label--disabled': !!this.disabled,
+            }, htmlFor: this.id }, index.h("slot", { key: 'ef36d317d97e26098396b1131a1acce6bce5ae8f' }), this.description && (index.h("small", { key: '9d710e4fa3f366965307908ca2e216ac46310f30', 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: '0db2f4a4109a65ae2ab01259b960f83dd3b8bbeb', 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: '53915c9efd628e455b5604f4eacbc67504a52ca5', 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: '97fd281e5aa7ba1805f1424e80d6018ca5fdafe0' }, index.h("main", { key: '6a6f315e74225f66105874998c679183f2c743f5', class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, index.h("div", { key: 'c46017f1a0fd8b278f7b817de82629eb777515fd', class: "xpl-content-area" }, index.h("slot", { key: 'cc6d45297d23770880778810952f7e95445bb800' })))));
+    }
+};
+
+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: '65628c79753f54949bfe0a6dfede9bf4e09cf585' }, index.h("dl", { key: 'aa6444eea3322331350fbc1b0db6b23e316d393e', class: "xpl-dashboard" }, index.h("slot", { key: '3b54ed1755a0cc72ef5527afafdf156660afcfdf' }))));
+    }
+};
+
+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: '05aef87fdbc999cc563d9da2ae6207ffce5351cf', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, index.h("dt", { key: '833d00cd995e5d9f96c70e6f1af04f260076aea7', class: headerClasses }, index.h("header", { key: '283890fe21047be8ee81b64588a686f4f6339d28' }, !!this.leadingIcon && this.icon && (index.h("span", { key: '2c3e365280efb2c6c18a7d08261fc30e8d808da3', class: `xpl-data-card__icon--${this.variant}` }, index.h("xpl-icon", { key: '3564e1275b28e1693a45c51b4fc7936317b62e2f', icon: this.icon, "background-color": bgColorHue, size: 20 }))), index.h("slot", { key: 'd5469c77ca2a1ec16e702ee8ab94c230dbbe742a', name: "title" }, this.name)), this.link && (index.h("span", { key: '7a560cecc871b0e223372ecca08129d9f95d2c6e', class: "xpl-data-card__header-arrow" }, index.h("xpl-icon", { key: 'f85ebee53967bc2ddd78291aaa63c85145d74930', icon: "chevron-right", size: 16 })))), index.h("dd", { key: 'c19eb772979606076a22f72b8ecb4261f7371374', class: "xpl-data-card__body" }, index.h("div", { key: '1ab9f94a29394608a18990ad4a06a663abd2f0a6', class: "xpl-data-card__left" }, index.h("span", { key: '41d8633f93cf7e2c220df4b51768e9b7c2295474', 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: '5dfcb6891ce3529bee2f240d85238a895ea6c61d', class: "xpl-data-card__detail" }, this.detail)), this.graphContentPresent && (index.h("div", { key: '5b58f77c7a49e1aa157b73feb63e4ef1b5d36c0a', class: "xpl-data-card__right" }, index.h("slot", { key: '962482c44556b3722119cace638ea176af2f9533', 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;