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

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

@@ -0,0 +1,28 @@
+'use strict';
+
+var index = require('./index-D__N_vw2.js');
+
+const XplToolbar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.selectedItemCount = 0;
+    }
+    componentDidLoad() {
+        const firstActionRight = this.el.querySelector('[slot="actions-right"]');
+        if (firstActionRight !== null)
+            firstActionRight.style.marginLeft = 'auto';
+    }
+    listenToSelectedItemCountChange(event) {
+        this.selectedItemCount = event.detail.length;
+    }
+    render() {
+        return (index.h(index.Host, { key: '097500ed053ff1f15d30fc62e2efa556f8f95ef2', class: {
+                'xpl-toolbar': true,
+                dark: true,
+                hidden: this.selectedItemCount === 0,
+            } }, index.h("div", { key: 'c2e73f623f8afe7ca8e9e367b173067992b661fa', class: "toolbar" }, index.h("p", { key: '63c1b1f5edee4abc4fea15bdb6d483a682854403', class: "selected-item-count" }, this.selectedItemCount, " Selected"), index.h("div", { key: 'bc387680fee35312128aac1e2d2a9e83e78b86af', class: "actions" }, index.h("slot", { key: 'a8e3e41f75565cbf9b8fc86665ecabdcf2f674f3', name: "actions-left" }), index.h("slot", { key: 'b3e82f6aabb8279f39248b551570d8937cf35aa6', name: "actions-right" })))));
+    }
+    get el() { return index.getElement(this); }
+};
+
+exports.xpl_toolbar = XplToolbar;

package/dist/collection/collection-manifest.json

@@ -1,40 +1,67 @@
 {
   "entries": [
-    "./components/xpl-dropdown/xpl-dropdown-option/xpl-dropdown-option.js",
-    "./components/xpl-application-shell/xpl-application-shell.js",
-    "./components/xpl-avatar/xpl-avatar.js",
-    "./components/xpl-backdrop/xpl-backdrop.js",
-    "./components/xpl-badge/xpl-badge.js",
-    "./components/xpl-breadcrumbs/xpl-breadcrumb-item/xpl-breadcrumb-item.js",
-    "./components/xpl-breadcrumbs/xpl-breadcrumbs/xpl-breadcrumbs.js",
-    "./components/xpl-button/xpl-button.js",
-    "./components/xpl-button-row/xpl-button-row.js",
-    "./components/xpl-checkbox/xpl-checkbox.js",
-    "./components/xpl-choicelist/xpl-choicelist.js",
-    "./components/xpl-content-area/xpl-content-area.js",
-    "./components/xpl-divider/xpl-divider.js",
-    "./components/xpl-dropdown/xpl-dropdown.js",
-    "./components/xpl-dropdown/xpl-dropdown-group/xpl-dropdown-group.js",
-    "./components/xpl-dropdown/xpl-dropdown-heading/xpl-dropdown-heading.js",
-    "./components/xpl-grid/xpl-grid.js",
-    "./components/xpl-grid-item/xpl-grid-item.js",
-    "./components/xpl-input/xpl-input.js",
-    "./components/xpl-list/xpl-list.js",
-    "./components/xpl-main-nav/xpl-main-nav.js",
-    "./components/xpl-nav-item/xpl-nav-item.js",
-    "./components/xpl-pagination/xpl-pagination.js",
-    "./components/xpl-radio/xpl-radio.js",
-    "./components/xpl-secondary-nav/xpl-secondary-nav.js",
-    "./components/xpl-select/xpl-select.js",
-    "./components/xpl-table/xpl-table.js",
-    "./components/xpl-tag/xpl-tag.js",
-    "./components/xpl-toggle/xpl-toggle.js",
-    "./components/xpl-utility-bar/xpl-utility-bar.js"
+    "components/xpl-accordion/xpl-accordion.js",
+    "components/xpl-application-shell/xpl-application-shell.js",
+    "components/xpl-avatar/xpl-avatar.js",
+    "components/xpl-backdrop/xpl-backdrop.js",
+    "components/xpl-badge/xpl-badge.js",
+    "components/xpl-breadcrumbs/xpl-breadcrumb-item/xpl-breadcrumb-item.js",
+    "components/xpl-breadcrumbs/xpl-breadcrumbs/xpl-breadcrumbs.js",
+    "components/xpl-button/xpl-button.js",
+    "components/xpl-button-row/xpl-button-row.js",
+    "components/xpl-calendar/xpl-calendar.js",
+    "components/xpl-checkbox/xpl-checkbox.js",
+    "components/xpl-choicelist/xpl-choicelist.js",
+    "components/xpl-content-area/xpl-content-area.js",
+    "components/xpl-dashboard/xpl-dashboard.js",
+    "components/xpl-icon/xpl-icon.js",
+    "components/xpl-data-card/xpl-data-card.js",
+    "components/xpl-divider/xpl-divider.js",
+    "components/xpl-dropdown/xpl-dropdown.js",
+    "components/xpl-dropdown/xpl-dropdown-group/xpl-dropdown-group.js",
+    "components/xpl-dropdown/xpl-dropdown-heading/xpl-dropdown-heading.js",
+    "components/xpl-dropdown/xpl-dropdown-option/xpl-dropdown-option.js",
+    "components/xpl-dynamic-table/xpl-dynamic-table.js",
+    "components/xpl-dynamic-table-cell/xpl-dynamic-table-cell.js",
+    "components/xpl-dynamic-table-row/xpl-dynamic-table-row.js",
+    "components/xpl-grid/xpl-grid.js",
+    "components/xpl-grid-item/xpl-grid-item.js",
+    "components/xpl-header-accordion/xpl-header-accordion.js",
+    "components/xpl-input/xpl-input.js",
+    "components/xpl-input/xpl-input-color/xpl-input-color.js",
+    "components/xpl-input/xpl-input-date/xpl-input-date.js",
+    "components/xpl-input/xpl-input-file/xpl-input-file.js",
+    "components/xpl-input/xpl-input-time/xpl-input-time.js",
+    "components/xpl-large-card/xpl-large-card.js",
+    "components/xpl-list/xpl-list.js",
+    "components/xpl-main-nav/xpl-main-nav.js",
+    "components/xpl-modal/xpl-modal.js",
+    "components/xpl-nav-item/xpl-nav-item.js",
+    "components/xpl-pagination/xpl-pagination.js",
+    "components/xpl-popover/xpl-popover.js",
+    "components/xpl-progress/xpl-progress.js",
+    "components/xpl-radio/xpl-radio.js",
+    "components/xpl-secondary-nav/xpl-secondary-nav.js",
+    "components/xpl-select/xpl-select.js",
+    "components/xpl-skeleton/xpl-skeleton.js",
+    "components/xpl-slideout/xpl-slideout.js",
+    "components/xpl-tab/xpl-tab.js",
+    "components/xpl-tab-panel/xpl-tab-panel.js",
+    "components/xpl-table/xpl-table.js",
+    "components/xpl-table-header/xpl-table-header.js",
+    "components/xpl-table-header-cell/xpl-table-header-cell.js",
+    "components/xpl-tabs/xpl-tabs.js",
+    "components/xpl-tag/xpl-tag.js",
+    "components/xpl-toast/xpl-toast.js",
+    "components/xpl-toggle/xpl-toggle.js",
+    "components/xpl-toolbar/xpl-toolbar.js",
+    "components/xpl-tooltip/xpl-tooltip.js",
+    "components/xpl-utility-bar/xpl-utility-bar.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.22.2",
-    "typescriptVersion": "4.9.4"
+    "version": "4.41.3",
+    "typescriptVersion": "5.8.3"
   },
   "collections": [],
   "bundles": []

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

@@ -0,0 +1,76 @@
+export default {
+    title: 'Components/Accordion',
+    component: 'xpl-accordion',
+    argTypes: {
+        header: { type: { name: 'string', required: true } },
+        description: { type: { name: 'string' } },
+        borderType: {
+            options: ['none', 'bottom', 'bordered'],
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: ['1', '2', '3'],
+            control: {
+                type: 'select',
+            },
+        },
+        initialExpanded: { type: { name: 'boolean' } },
+    },
+    tags: ['beta'],
+};
+export const Accordion = ({ header, description, borderType, size, initialExpanded, }) => `
+    <xpl-accordion
+        header="${header}"
+        description="${description}"
+        initial-expanded=${initialExpanded}
+        border-type="${borderType}"
+        size="${size}"
+    >
+        <div slot="content" class="content">
+            <strong>Slot Small</strong> Replace me with your content.
+        </div>
+    </xpl-accordion>
+`;
+Accordion.args = {
+    borderType: 'bottom',
+    description: 'Accordion Description',
+    header: 'Accordion Title',
+    initialExpanded: false,
+    size: '3',
+};
+Accordion.parameters = {
+    'web-component': {
+        render: Accordion(Accordion.args),
+    },
+    html: {
+        render: (({ borderType, description, header, initialExpanded, size }) => `
+                <div
+                    class="xpl-accordion ${{
+            none: '',
+            bottom: `xpl-accordion--border-bottom`,
+            bordered: `xpl-accordion--border-bordered`,
+        }[borderType]}"
+                    header="${header}"
+                    description="${description}"
+                    initial-expanded="${initialExpanded}"
+                >
+                    <div class="xpl-accordion">
+                        <button class="xpl-accordion-toggle-area">
+                            <header class="xpl-accordion-header xpl-accordion-header--size-${size}">
+                                ${header}
+                                <xpl-icon class="false xpl-accordion-icon-chevron" icon="chevron-down" size="16"></xpl-icon>
+                            </header>
+                            <span class="xpl-accordion-description">
+                                ${description}
+                            </span>
+                        </button>
+                    </div>
+                    <div role="region" class="xpl-accordion-content--${!initialExpanded ? 'hidden' : 'shown'}">
+                        <strong>Slot Small</strong> Replace me with your content.
+                    </div>
+                </div>
+        `)(Accordion.args),
+    },
+};

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

@@ -0,0 +1,236 @@
+import { Host, h } from "@stencil/core";
+export class XplAccordion {
+    constructor() {
+        this.initialExpanded = false;
+        this.size = '3';
+        this.borderType = 'none';
+        this.expanded = this.initialExpanded;
+        this.toggleAccordion = (evt) => {
+            evt.stopPropagation();
+            this.expanded = !this.expanded;
+        };
+    }
+    watchInitialExpanded() {
+        this.expanded = this.initialExpanded;
+    }
+    async parentCheckboxChange(checked) {
+        const childCheckboxes = this.el.querySelectorAll('.xpl-accordion-content .xpl-checkbox:not([disabled])');
+        childCheckboxes.forEach((checkbox) => {
+            checkbox.checked = checked;
+        });
+        return null;
+    }
+    handleChildCheckboxChange() {
+        const childCheckboxes = this.el.querySelectorAll('.xpl-accordion-content .xpl-checkbox:not([disabled])');
+        const checkedCount = Array.from(childCheckboxes).filter((checkbox) => checkbox.checked).length;
+        const parentCheckbox = this.el.querySelector('.xpl-accordion-header xpl-checkbox') ||
+            this.el.querySelector('.xpl-accordion-header input');
+        if (parentCheckbox) {
+            switch (checkedCount) {
+                case 0:
+                    parentCheckbox.checked = false;
+                    parentCheckbox.indeterminate = false;
+                    break;
+                case childCheckboxes.length:
+                    parentCheckbox.checked = true;
+                    parentCheckbox.indeterminate = false;
+                    break;
+                default:
+                    parentCheckbox.checked = false;
+                    parentCheckbox.indeterminate = true;
+            }
+        }
+    }
+    listenToChangeEvent() {
+        this.handleChildCheckboxChange();
+    }
+    render() {
+        const accordionBorder = {
+            none: '',
+            bordered: `xpl-accordion--border-bordered${this.expanded ? '--expanded' : ''}`,
+            bottom: `xpl-accordion--border-bottom${this.expanded ? '--expanded' : ''}`,
+        }[this.borderType];
+        return (h(Host, { key: '196af13fff0f920975af9c4a6ebe726a98e5a663', class: `xpl-accordion ${accordionBorder}` }, h("button", { key: '724993d5464ef62e7bc6ec0d63334fcebf8d93fa', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "xpl-accordion-toggle-area", onClick: this.toggleAccordion, type: "button" }, h("header", { key: '8b38921367d44ff8e2dbfb5fcecf4712f480b907', class: `xpl-accordion-header xpl-accordion-header--size-${this.size}` }, h("slot", { key: 'a940edeb394372f71cc927db8dfa622ce2c281f8', name: "heading" }, this.header), h("xpl-icon", { key: '9e8e85697f46f808802cc4466046ada165e372e6', size: 16, icon: "chevron-down", class: `xpl-accordion-icon-chevron ${this.expanded ? 'xpl-accordion-icon-chevron--rotate' : ''}` })), h("div", { key: 'a91f59cd8a2450b8d46ba9880a05f67a8d1cbb62', class: "xpl-accordion-description" }, h("slot", { key: '6cc83b45061eb6349dd7f8934bc49b4f1a3b878d', name: "description" }, this.description))), h("section", { key: '72d5e5b77651c23a08b52849079e42456a5aed6d', id: this.contentId, role: "region", class: `xpl-accordion-content xpl-accordion-content--${!this.expanded ? 'hidden' : 'shown'} ${this.expanded
+                ? {
+                    none: '',
+                    bordered: 'xpl-accordion-content--shown-bordered',
+                    bottom: 'xpl-accordion-content--shown-border-bottom',
+                }[this.borderType]
+                : ''}` }, h("slot", { key: '46231eeef0f6457a26e70aaf3a976a5a2b6076c3', name: "content" }))));
+    }
+    static get is() { return "xpl-accordion"; }
+    static get properties() {
+        return {
+            "contentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An optional id of the content slot"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "content-id"
+            },
+            "header": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the text for the header of the accordion"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "header"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "if defined, a text field that displays under the header"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "initialExpanded": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set if the content is shown\n false: the accordion is collapsed (default)\n true: the accordion is expanded"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "initial-expanded",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'1' | '2' | '3'",
+                    "resolved": "\"1\" | \"2\" | \"3\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set the size of the header and icon size can be 1(default),2,3"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'3'"
+            },
+            "borderType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'' | 'none' | 'bottom' | 'bordered'",
+                    "resolved": "\"\" | \"bordered\" | \"bottom\" | \"none\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "set the border of the accordion\n none: there\u2019s no border wrapping the header\n bottom:there\u2019s a border below the header\n bordered: the header is wrapped by a white panel with a rounded border around it on every side"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "border-type",
+                "defaultValue": "'none'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "expanded": {}
+        };
+    }
+    static get methods() {
+        return {
+            "parentCheckboxChange": {
+                "complexType": {
+                    "signature": "(checked: boolean) => Promise<null>",
+                    "parameters": [{
+                            "name": "checked",
+                            "type": "boolean",
+                            "docs": "- Whether the parent checkbox is checked"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLInputElement": {
+                            "location": "global",
+                            "id": "global::HTMLInputElement"
+                        }
+                    },
+                    "return": "Promise<null>"
+                },
+                "docs": {
+                    "text": "Updates the parent checkbox state and sets all child checkboxes to the same checked value.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "checked - Whether the parent checkbox is checked"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "initialExpanded",
+                "methodName": "watchInitialExpanded"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "checkboxChange",
+                "method": "listenToChangeEvent",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}