@xplortech/apollo-core 1.0.0-beta.8 → 2.4.2

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

@@ -0,0 +1,206 @@
+import { Host, h, } from "@stencil/core";
+export class XplTabs {
+    constructor() {
+        this.fullWidth = false;
+        this.selectedValue = this.getDefaultValue();
+        this.activeBarPosition = {
+            left: 0,
+            width: 0,
+        };
+        this.isMobileSelectChange = false;
+        this.tabHeadings = [];
+        this.tabPanels = [];
+        this.handleTabChange = (target) => {
+            this.updateTabsSelectedState(target);
+        };
+    }
+    onWindowResize() {
+        this.updateActiveBarPosition();
+    }
+    getDefaultValue() {
+        var _a, _b;
+        return this.value || ((_b = (_a = this.tabHeadings) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.getAttribute('target')) || '';
+    }
+    updateActiveBarPosition() {
+        const tabHeading = this.tabHeadings.find((heading) => heading.getAttribute('target') === this.selectedValue);
+        if (!this.headingsContainerRef || !tabHeading) {
+            return;
+        }
+        const tabRect = tabHeading.getBoundingClientRect();
+        const containerRect = this.headingsContainerRef.getBoundingClientRect();
+        this.activeBarPosition = {
+            left: tabRect.left - containerRect.left,
+            width: tabRect.width,
+        };
+    }
+    updateTabsSelectedState(newValue) {
+        this.tabHeadings.forEach((tabHeading) => {
+            const isSelected = newValue === tabHeading.getAttribute('target');
+            if (isSelected) {
+                tabHeading.setAttribute('selected', '');
+            }
+            else {
+                tabHeading.removeAttribute('selected');
+            }
+        });
+        this.tabPanels.forEach((tabPanel) => {
+            const isSelected = newValue === tabPanel.getAttribute('target');
+            if (isSelected) {
+                tabPanel.setAttribute('selected', '');
+            }
+            else {
+                tabPanel.removeAttribute('selected');
+            }
+        });
+        requestAnimationFrame(() => {
+            this.selectedValue = newValue;
+            this.updateActiveBarPosition();
+        });
+    }
+    collectTabs() {
+        this.tabHeadings = Array.from(this.el.querySelectorAll('xpl-tab'));
+        this.tabPanels = Array.from(this.el.querySelectorAll('xpl-tab-panel'));
+        this.handleTabChange(this.getDefaultValue());
+    }
+    renderChoices() {
+        return this.tabHeadings.map((tabHeading) => {
+            var _a, _b;
+            return ({
+                label: Array.from((_b = (_a = tabHeading.querySelector('.xpl-tab__button')) === null || _a === void 0 ? void 0 : _a.childNodes) !== null && _b !== void 0 ? _b : [])
+                    .filter((node) => node.nodeType === Node.TEXT_NODE)
+                    .map((node) => node.textContent.trim())
+                    .join(' '),
+                value: tabHeading.getAttribute('target'),
+            });
+        });
+    }
+    connectedCallback() {
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        this.observer = new MutationObserver(() => {
+            this.collectTabs();
+        });
+        this.observer.observe(this.el, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    componentDidLoad() {
+        this.collectTabs();
+    }
+    render() {
+        return (h(Host, { key: 'c6858318e3adea4fb9a5587d16aff2778a69af0d', class: {
+                'xpl-tabs': true,
+                'xpl-tabs--full-width': this.fullWidth,
+            } }, h("xpl-select", { key: 'f6e67e41dc20da4bd6c3d9d4b60045e0e55c7343', classNames: "xpl-tabs__mobile-select", choices: this.renderChoices(), selectedValues: this.selectedValue, onDropdownStateChange: (event) => {
+                if (event.detail) {
+                    this.isMobileSelectChange = true;
+                }
+            }, onChangeEvent: (event) => {
+                if (this.isMobileSelectChange) {
+                    const selectedValue = event.detail.toString();
+                    this.handleTabChange(selectedValue);
+                    this.tabChange.emit(selectedValue);
+                    this.isMobileSelectChange = false;
+                }
+            } }), h("nav", { key: '297eb4c0695adf1bea03de7e6874a0b61e108319', class: "xpl-tabs__headings", role: "tablist", ref: (el) => {
+                this.headingsContainerRef = el;
+            }, onTabChange: (event) => {
+                this.isMobileSelectChange = false;
+                this.handleTabChange(event.detail);
+            } }, h("div", { key: 'cd60b8acf47bb319bc92852d5f62ba456acee6f0', class: "xpl-tabs__active-bar", style: {
+                transform: `translateX(${this.activeBarPosition.left}px)`,
+                width: `${this.activeBarPosition.width}px`,
+            } }), h("slot", { key: 'a4b73230bfc7178381780a5136a5c1d820be7d65', name: "heading" })), h("div", { key: 'e5d4cf94e1c75dabe73d8a5cc2d00cc97466f1b2', class: "xpl-tabs__panels" }, h("slot", { key: 'e3d2fbfed0ebc74f2fc41f74574e202e834e2129', name: "panel" }))));
+    }
+    static get is() { return "xpl-tabs"; }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected tab target value, defaults to the first tab"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to make the tabs full width"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "full-width",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedValue": {},
+            "activeBarPosition": {},
+            "isMobileSelectChange": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tabChange",
+                "name": "tabChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event that emits the target of the selected tab"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "updateTabsSelectedState"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "onWindowResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}

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

@@ -1,29 +1,29 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class XplTag {
-  render() {
-    return (h(Host, { class: "xpl-tag-container" }, h("button", { class: "xpl-tag", onClick: () => {
-        this.close.emit();
-      } }, h("slot", null)), h("button", { class: "xpl-tag__close", onClick: () => {
-        this.close.emit();
-      } }, "\u00D7")));
-  }
-  static get is() { return "xpl-tag"; }
-  static get events() {
-    return [{
-        "method": "close",
-        "name": "close",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
+    render() {
+        return (h(Host, { key: '4a5d37bbd7458d289bf7ea272bd3f944e5f1f1a8', class: "xpl-tag-container" }, h("button", { key: '65701bf44741a791ab8d60db2de0f3308c83df33', class: "xpl-tag", onClick: () => {
+                this.close.emit();
+            } }, h("slot", { key: 'bd3a1e0af2dbfbc70e18082a1cd0c02710f6ef26' })), h("button", { key: '13224cc6cc44e1c4ed9515019906ba3217edffd7', class: "xpl-tag__close", onClick: () => {
+                this.close.emit();
+            } }, "\u00D7")));
+    }
+    static get is() { return "xpl-tag"; }
+    static get events() {
+        return [{
+                "method": "close",
+                "name": "close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback function that is called when tag text or `x` icon is clicked"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
 }

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

@@ -0,0 +1,82 @@
+export default {
+    title: 'Components/Toast',
+    component: 'xpl-toast',
+    argTypes: {
+        variant: {
+            options: ['neutral', 'warning', 'success'],
+            control: {
+                type: 'select',
+            },
+        },
+        showIcon: { control: 'boolean' },
+        showAction: { control: 'boolean' },
+        dismissible: { control: 'boolean' },
+        toastTitle: { control: 'text', required: true },
+        caption: { control: 'text', required: false },
+        timeout: { control: 'number', required: false },
+    },
+};
+export const Toast = ({ variant, showIcon, dismissible, toastTitle, caption, showAction, timeout, }) => `
+    <p style="color: var(--xpl-color-red-600); font-family: var(--xpl-font-family-default);">
+        Use the "Remount Component" button to reload the toast
+    </p>
+    <xpl-toast
+        variant="${variant}"
+        show-icon="${showIcon}"
+        caption="${caption}"
+        dismissible="${dismissible}"
+        timeout="${timeout}"
+    >
+        <p slot="title">${toastTitle}</p>
+        ${showAction
+    ? `<xpl-button slot="action" size="sm" variant="${variant}">Test Action</xpl-button>`
+    : ''}
+    </xpl-toast>
+`;
+Toast.args = {
+    variant: 'neutral',
+    showIcon: true,
+    showAction: false,
+    dismissible: true,
+    toastTitle: 'This is a toast',
+    caption: 'This is the caption',
+    timeout: 8000,
+};
+Toast.parameters = {
+    'web-component': {
+        render: Toast(Toast.args),
+    },
+    html: {
+        render: (({ variant, showIcon, dismissible, toastTitle, caption, showAction }) => {
+            const getIcon = () => {
+                switch (variant) {
+                    case 'warning':
+                        return '<xpl-icon icon="alert-hex" size="24" />';
+                    case 'success':
+                        return '<xpl-icon icon="check-circle" size="24" />';
+                    default:
+                        return '<xpl-icon icon="comment-alt" size="24" />';
+                }
+            };
+            return `
+                <div class="toast toast--${variant}">
+                    <div class="toast__left">
+                        ${showIcon ? `<span class="toast__icon">${getIcon()}</span>` : ''}
+                        <div class="toast__notification">
+                            <p class="toast__title">${toastTitle}</p>
+                            <p class="xpl-toast__caption">
+                                ${caption === null || caption === void 0 ? void 0 : caption.substring(0, 85)}
+                            </p>
+                        </div>
+                    </div>
+                    <div class="toast__action">
+                        ${showAction ? `<button class="toast__button">Test Action</button>` : ''}
+                    </div>
+                    ${dismissible
+                ? `<button class="toast__close"><xpl-icon icon="x" /></button>`
+                : ''}
+                </div>
+            `;
+        })(Toast.args),
+    },
+};

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

@@ -0,0 +1,162 @@
+import { Host, h } from "@stencil/core";
+export class XplToast {
+    constructor() {
+        this.variant = 'neutral';
+        this.showIcon = true;
+        this.dismissable = true;
+        this.timeout = 8000;
+        this.handleAnimationEnd = () => {
+            var _a, _b;
+            if ((_a = this.el) === null || _a === void 0 ? void 0 : _a.classList.contains('xpl-toast--dismissed'))
+                (_b = this.el) === null || _b === void 0 ? void 0 : _b.remove();
+        };
+        this.getIcon = () => {
+            switch (this.variant) {
+                case 'warning':
+                    return h("xpl-icon", { size: 24, icon: "alert-hex" });
+                case 'success':
+                    return h("xpl-icon", { size: 24, icon: "check-circle" });
+                default:
+                    return h("xpl-icon", { size: 24, icon: "comment-alt" });
+            }
+        };
+        this.dismiss = () => {
+            var _a;
+            (_a = this.el) === null || _a === void 0 ? void 0 : _a.classList.add('xpl-toast--dismissed');
+        };
+    }
+    componentDidLoad() {
+        const actionCount = this.actionSlot.children.length;
+        if (actionCount < 1) {
+            setTimeout(() => {
+                this.dismiss();
+            }, this.timeout);
+        }
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: '6a4c1dfe86f62c39db5573a0bb1eef2c14616085', class: `xpl-toast xpl-toast--${this.variant}`, onAnimationEnd: this.handleAnimationEnd }, h("div", { key: '282a4c5fc37e538d3359a0c38e7cd30e2a29e311', class: "xpl-toast__left" }, this.showIcon && (h("div", { key: 'dfb6bb1923f5c9e1b1dae80630cc7977529e834f', class: `xpl-toast__icon xpl-toast__icon--${this.variant}` }, this.getIcon())), h("div", { key: '9a1755b484e316be08b89044ae3c55e7a30c3795', class: "xpl-toast__notification" }, h("p", { key: 'afa9572dcb109c58c6c4045e14b604010da95230', class: "xpl-toast__title" }, h("slot", { key: '0b80b8719e79a1e01bcf8ec125db8d9762f1a1d7', name: "title" })), this.caption !== '' && (h("p", { key: '7debe4dd50870bc6478a86e7742450f667dfee3a', class: "xpl-toast__caption" }, (_a = this.caption) === null || _a === void 0 ? void 0 : _a.substring(0, 85))))), h("div", { key: '194104f419162bd4157fb5e8885983ca40467d9c', class: "xpl-toast__action", ref: (el) => {
+                this.actionSlot = el;
+            } }, h("slot", { key: 'c63cc79ec725417c4f317dd72511e72b24f8280e', name: "action" })), this.dismissable && (h("div", { key: '3328ad43d7cd4026d5b4488dc2d920031be0ca34', class: "xpl-toast__close" }, h("button", { key: 'ce3b27ae3c1570806916b3d668678513df5065ed', tabIndex: 0, onClick: this.dismiss }, h("xpl-icon", { key: 'be1a177568f933417b62ce2a2705441d00b3118f', icon: "x" }))))));
+    }
+    static get is() { return "xpl-toast"; }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'neutral' | 'warning' | 'success'",
+                    "resolved": "\"neutral\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "property",
+                            "text": "{string} - The variant of the toast"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'neutral'"
+            },
+            "showIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "property",
+                            "text": "{boolean} - Whether or not to show the icon"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-icon",
+                "defaultValue": "true"
+            },
+            "caption": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "property",
+                            "text": "{string} - The caption of the toast, limited to 85 characters"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "caption"
+            },
+            "dismissable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "property",
+                            "text": "{boolean} - Whether or not the toast is dismissible"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismissable",
+                "defaultValue": "true"
+            },
+            "timeout": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "property",
+                            "text": "{number} - The timeout for the toast to dismiss in ms, default 8 seconds"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "timeout",
+                "defaultValue": "8000"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,84 @@
+export default {
+    title: 'Components/Toggle',
+    argTypes: {
+        checked: {
+            control: {
+                type: 'boolean',
+            },
+        },
+        variant: {
+            options: ['default', 'small'],
+            control: {
+                type: 'select',
+            },
+        },
+        heading: {
+            type: { name: 'string', required: true },
+        },
+        label: {
+            type: { name: 'string', required: true },
+        },
+        description: {
+            type: { name: 'string', required: false },
+        },
+        disabled: {
+            control: {
+                type: 'boolean',
+            },
+        },
+    },
+};
+export const Toggle = ({ checked, description, disabled, label, heading, variant }) => {
+    let attrs = '';
+    if (checked)
+        attrs += ` checked`;
+    if (description)
+        attrs += ` description="${description}"`;
+    if (heading)
+        attrs += ` heading="${heading}"`;
+    if (label)
+        attrs += ` label="${label}"`;
+    if (variant === 'small')
+        attrs += ' variant="small"';
+    if (disabled)
+        attrs += ` disabled`;
+    return `<xpl-toggle${attrs}></xpl-toggle>`;
+};
+Toggle.args = {
+    checked: false,
+    heading: 'Toggle Heading',
+    label: 'Label',
+    variant: 'default',
+    description: 'Lorem ipsum dolor sit amet',
+    disabled: false,
+};
+Toggle.parameters = {
+    layout: 'centered',
+    'web-component': {
+        render: Toggle(Toggle.args),
+    },
+    html: {
+        render: (({ checked, description, disabled, heading, label, variant }) => {
+            let attrs = '';
+            if (disabled)
+                attrs += ` disabled`;
+            if (checked)
+                attrs += ` checked`;
+            let className = 'xpl-toggle';
+            if (variant === 'small')
+                className += ' xpl-toggle--small';
+            return `<div class="xpl-toggle-container">${heading || description
+                ? `
+    <label for="id">
+        ${heading}${description
+                    ? `
+        <small>${description}</small>`
+                    : ''}
+    </label>`
+                : ''}
+    <input class="${className}" id="id" type="checkbox"${attrs}></input>
+    <label for="id">${label}</label>
+</div>`;
+        })(Toggle.args),
+    },
+};