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

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

@@ -1,178 +1,223 @@
-import { Host, h, } from '@stencil/core';
+import { h, Host } from "@stencil/core";
 export class XplPagination {
-  constructor() {
-    /**
-     * Private `_goto` method respects the `waitForCallback` prop --
-     * it will always emit the `page` event, but won't actually update
-     * the state of what the current page is, leaving that to the caller
-     * to update once (presumably) some other data has loaded.
-     */
-    this._goto = (n) => {
-      this.page.emit(n);
-      if (!this.waitForCallback) {
-        this.current = n;
-      }
-    };
-    this.goPrev = () => {
-      if (this.current > 1)
-        this._goto(this.current - 1);
-    };
-    this.goNext = () => {
-      const numPages = Math.ceil(this.total / this.perPage);
-      if (this.current < numPages)
-        this._goto(this.current + 1);
-    };
-    this.total = undefined;
-    this.perPage = undefined;
-    this.waitForCallback = undefined;
-    this.current = 1;
-  }
-  /**
-   * Calling `goto` with a page number (which should probably be
-   * taken from the `page` event) updates the pagination's state
-   * and re-renders it, showing the appropriate buttons given the current page.
-   * @param n
-   */
-  async goto(n) {
-    this.current = n;
-  }
-  render() {
-    const numPages = Math.ceil(this.total / this.perPage);
-    let showing = [1];
-    if (numPages < 7)
-      showing = [1, 2, 3, 4, 5, 6];
-    if (this.current <= 3 || this.current >= numPages - 2) {
-      showing = [1, 2, 3, '...', numPages - 2, numPages - 1, numPages];
+    constructor() {
+        this.totalPages = 1;
+        this.withPageControl = false;
+        this.currentPage = 1;
+        this.rowsPerPageOptions = '10,25,50,100,150';
+        this.selectedRowsPerPage = 10;
+        this.rowsPerPageSelectRef = null;
+        this.pageSelectRef = null;
+        this.handleNextPage = () => {
+            if (this.currentPage < this.totalPages) {
+                this.currentPage += 1;
+            }
+        };
+        this.handlePrevPage = () => {
+            if (this.currentPage > 1) {
+                this.currentPage -= 1;
+            }
+        };
+        this.handlePageChange = (event) => {
+            const newValue = parseInt(event.detail, 10);
+            if (!Number.isNaN(newValue)) {
+                this.currentPage = newValue;
+            }
+        };
+        this.handleRowsChange = (event) => {
+            const newValue = parseInt(event.detail, 10);
+            if (!Number.isNaN(newValue)) {
+                this.selectedRowsPerPage = newValue;
+            }
+        };
     }
-    else {
-      showing = [
-        1,
-        '...',
-        this.current - 1,
-        this.current,
-        this.current + 1,
-        '...',
-        numPages,
-      ];
+    get rowsPerPageOptionsArray() {
+        return this.rowsPerPageOptions.split(',').map(Number);
     }
-    const showingFirst = (this.current - 1) * this.perPage + 1;
-    const showingLast = Math.min(showingFirst + this.perPage - 1, this.total);
-    return (h(Host, null, h("div", { class: "xpl-pagination" }, h("div", null, h("p", null, "Showing ", h("span", null, showingFirst), " to", ' ', h("span", null, showingLast), " of", ' ', h("span", null, this.total), " results")), h("div", null, h("nav", { "aria-label": "Pagination" }, h("button", { onClick: this.goPrev, class: "xpl-pagination-prev" }, h("span", null, "Previous"), h("svg", { viewBox: "0 0 20 20", "aria-hidden": "true" }, h("path", { "fill-rule": "evenodd", d: "M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z", "clip-rule": "evenodd" }))), showing.map((n) => {
-      if (n === '...') {
-        return (h("span", { class: "xpl-pagination-ellipsis" }, "..."));
-      }
-      if (n === this.current) {
-        return (h("button", { "aria-current": "page", class: "xpl-pagination-current" }, n));
-      }
-      return (h("button", { onClick: () => this._goto(n) }, n));
-    }), h("button", { onClick: this.goNext, class: "xpl-pagination-next" }, h("span", null, "Next"), h("svg", { viewBox: "0 0 20 20", "aria-hidden": "true" }, h("path", { "fill-rule": "evenodd", d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", "clip-rule": "evenodd" }))))))));
-  }
-  static get is() { return "xpl-pagination"; }
-  static get properties() {
-    return {
-      "total": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "total",
-        "reflect": false
-      },
-      "perPage": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "per-page",
-        "reflect": false
-      },
-      "waitForCallback": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "wait-for-callback",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "current": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "page",
-        "name": "page",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+    onPageUpdate(newValue) {
+        if (newValue < 1) {
+            this.currentPage = 1;
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "goto": {
-        "complexType": {
-          "signature": "(n: number) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "n"
-                }],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Calling `goto` with a page number (which should probably be\ntaken from the `page` event) updates the pagination's state\nand re-renders it, showing the appropriate buttons given the current page.",
-          "tags": [{
-              "name": "param",
-              "text": "n"
-            }]
+        else if (newValue > this.totalPages) {
+            this.currentPage = this.totalPages;
         }
-      }
-    };
-  }
+        this.pageChange.emit(this.currentPage);
+    }
+    onRowsPerPageUpdate(newValue) {
+        this.rowsPerPageChange.emit(newValue);
+    }
+    componentDidLoad() {
+        var _a, _b;
+        (_a = this.rowsPerPageSelectRef) === null || _a === void 0 ? void 0 : _a.addEventListener('changeEvent', this.handleRowsChange);
+        (_b = this.pageSelectRef) === null || _b === void 0 ? void 0 : _b.addEventListener('changeEvent', this.handlePageChange);
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.rowsPerPageSelectRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('changeEvent', this.handleRowsChange);
+        (_b = this.pageSelectRef) === null || _b === void 0 ? void 0 : _b.removeEventListener('changeEvent', this.handlePageChange);
+    }
+    render() {
+        const disablePrev = this.currentPage <= 1;
+        const disableNext = this.currentPage >= this.totalPages;
+        return (h(Host, { key: '15d277d40eff79d5fb48867b89370759eb9ca8c7', class: `xpl-pagination xpl-pagination__${this.withPageControl ? 'with' : 'no'}-page-control` }, this.withPageControl && (h("div", { key: '482bbca4e67c513f715573343f4f2d0f0a7281ee', class: "xpl-pagination__rows-per-page" }, h("label", { key: '5a6b3a0f06e6b37b3e6f17021417bac5ce866a69', class: "xpl-pagination__rows-label" }, "Rows per page:"), h("xpl-select", { key: '295db6e36fcf861ffd4f25550322552c6641084c', class: "xpl-pagination__rows-per-page-select", choices: this.rowsPerPageOptionsArray.map((option) => ({
+                label: option.toString(),
+                value: option.toString(),
+                isSelected: option === this.selectedRowsPerPage,
+            })), ref: (el) => {
+                this.rowsPerPageSelectRef = el;
+            } }))), h("div", { key: '87c7b3e4bf11be1668512f325139899496f2dd7a', class: "xpl-pagination__pager" }, h("button", { key: 'c020001ed61d227b9febd71bb9e411b3eeead985', class: "xpl-pagination__pager-button xpl-pagination__pager-button-prev", disabled: disablePrev, onClick: this.handlePrevPage, "aria-label": "Previous Page", tabindex: "0" }, h("xpl-icon", { key: '3484457471eb692e3dc140b47f6d8bfd72899fe3', icon: "arrow-left", size: 20 })), h("xpl-select", { key: 'f0897900308b3015db171f6b60382dd537f9dd71', class: "xpl-pagination__page-select", choices: Array.from({ length: this.totalPages }, (_, index) => ({
+                label: `Page ${index + 1}`,
+                value: (index + 1).toString(),
+                isSelected: index + 1 === this.currentPage,
+            })), "custom-display-value": true, ref: (el) => {
+                this.pageSelectRef = el;
+            } }, h("div", { key: '4c2184875c70ceac615c6efd05ef32f65d777152', slot: "custom-display-value" }, `${this.currentPage} of ${this.totalPages}`)), h("button", { key: '91c856b44bf3b752280b36f69a53d4c2ed97da19', class: "xpl-pagination__pager-button xpl-pagination__pager-button-next", disabled: disableNext, onClick: this.handleNextPage, "aria-label": "Next Page", tabindex: "0" }, h("xpl-icon", { key: '538a33cbddd6d4e26b782e0a3178018b61f0dec4', icon: "arrow-right", size: 20 })))));
+    }
+    static get is() { return "xpl-pagination"; }
+    static get properties() {
+        return {
+            "totalPages": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total number of pages."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "total-pages",
+                "defaultValue": "1"
+            },
+            "withPageControl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to allow go to page navigation."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "with-page-control",
+                "defaultValue": "false"
+            },
+            "currentPage": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The current active page (1-based).\nMarked as mutable so we can update from inside this component."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current-page",
+                "defaultValue": "1"
+            },
+            "rowsPerPageOptions": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The rows-per-page options offered in the dropdown."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rows-per-page-options",
+                "defaultValue": "'10,25,50,100,150'"
+            },
+            "selectedRowsPerPage": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The currently selected rows-per-page."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-rows-per-page",
+                "defaultValue": "10"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pageChange",
+                "name": "pageChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted whenever the current page changes."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "rowsPerPageChange",
+                "name": "rowsPerPageChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted whenever the rows-per-page changes."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "currentPage",
+                "methodName": "onPageUpdate"
+            }, {
+                "propName": "selectedRowsPerPage",
+                "methodName": "onRowsPerPageUpdate"
+            }];
+    }
 }

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

@@ -0,0 +1,164 @@
+export default {
+    title: 'Components/Popover',
+    parameters: {
+        actions: {
+            handles: ['isOpenChange'],
+        },
+    },
+};
+export const Simple = ({ isOpen = true, position, display }) => {
+    const attributes = {
+        'is-open': isOpen,
+        position,
+        display,
+    };
+    return `
+    <div style="padding: 100px; display: flex; justify-content: center;">
+      <xpl-popover ${Object.entries(attributes)
+        .map(([key, value]) => `${key}="${value}"`)
+        .join(' ')}>
+        <xpl-button slot="trigger">
+          Toggle Popover
+        </xpl-button>
+        <div style="padding: 1rem; background: white; color: black; border: 1px solid #ccc; border-radius: 4px;">
+          This is the popover content.
+        </div>
+      </xpl-popover>
+    </div>
+  `;
+};
+export const LargerTrigger = ({ isOpen = true, position }) => {
+    const attributes = {
+        'is-open': isOpen,
+        position,
+    };
+    return `
+    <div style="padding: 100px; display: flex; justify-content: center;">
+      <xpl-popover ${Object.entries(attributes)
+        .map(([key, value]) => `${key}="${value}"`)
+        .join(' ')}>
+        <button slot="trigger" style="cursor: pointer; height: 128px; background-color: gray">
+          Toggle Popover
+        </button>
+        <div style="padding: 1rem; background: white; color: black; border: 1px solid #ccc; border-radius: 4px;">
+          This is the popover content.
+        </div>
+      </xpl-popover>
+    </div>
+  `;
+};
+export const LargerContent = ({ isOpen = true, position }) => {
+    const attributes = {
+        'is-open': isOpen,
+        position,
+    };
+    return `
+    <div style="padding: 100px; display: flex; justify-content: center;">
+      <xpl-popover ${Object.entries(attributes)
+        .map(([key, value]) => `${key}="${value}"`)
+        .join(' ')}>
+        <xpl-button slot="trigger">
+          Toggle Popover
+        </xpl-button>
+        <div style="padding: 1rem; background: white; color: black; border: 1px solid #ccc; border-radius: 4px;">
+          <span class="xpl-text-title-4">Title</span>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+            tincidunt, nunc at bibendum facilisis, nunc nisl aliquet nunc, eget
+            aliquam nisl nunc eget nunc. Sed tincidunt, nunc at bibendum
+            facilisis, nunc nisl aliquet nunc, eget aliquam nisl nunc eget nunc.
+            </p>
+           <div style="display: flex; gap: 1rem;">
+            <xpl-button size="small" variant="primary">Primary</xpl-button>
+            <xpl-button size="small" variant="secondary">Secondary</xpl-button>
+            </div>
+        </div>
+      </xpl-popover>
+    </div>
+  `;
+};
+[Simple, LargerTrigger, LargerContent].forEach((comp) => {
+    comp.argTypes = {
+        isOpen: {
+            control: 'boolean',
+            description: 'Whether the popover is open initially',
+        },
+        position: {
+            control: {
+                type: 'select',
+            },
+            options: [
+                'top-left',
+                'middle-left',
+                'bottom-left',
+                'top-right',
+                'middle-right',
+                'bottom-right',
+                'top-start',
+                'top-middle',
+                'top-end',
+                'bottom-start',
+                'bottom-middle',
+                'bottom-end',
+            ],
+        },
+        display: {
+            control: {
+                type: 'select',
+            },
+            options: ['arrow', 'menu'],
+            description: 'Display style of the popover',
+        },
+    };
+    comp.args = {
+        isOpen: true,
+        position: 'top-middle',
+        display: 'arrow',
+    };
+    comp.parameters = {
+        layout: 'centered',
+        'web-component': {
+            render: comp(comp.args),
+        },
+        html: {
+            render: (({ isOpen = true, position = 'top-middle', display = 'arrow' }) => `
+            <div class="xpl-popover xpl-popover--${position} ${isOpen ? 'xpl-popover--is-open' : ''}">
+
+                >
+                    <button
+                        onClick={togglePopover}
+                    >
+                        Toggle Popover
+                    </button>
+
+                    <div class="xpl-popover__arrow">
+                        <svg
+                            width="17"
+                            height="14"
+                            xmlns="http://www.w3.org/2000/svg"
+                        >
+                            <path
+                                d="M0 5h15l-7.5 7.5L0 5Z"
+                                fill="white"
+                                stroke="none"
+                                class="arrow-fill"
+                            />
+
+                            <path
+                                d="M0 5 L7.5 12.5 L15 5"
+                                fill="none"
+                                stroke="black"
+                                stroke-width="1"
+                                class="arrow-stroke"
+                            />
+                        </svg>
+                    </div>
+
+                    <div class="xpl-popover__content xpl-popover__content--display-${display}">
+                        Content for the popover goes here.
+                    </div>
+                </div>
+                `)(comp.args),
+        },
+    };
+});