@justifi/webcomponents 4.19.3 → 4.20.0

package/dist/collection/ui-components/custom-popper/custom-popper.js

@@ -0,0 +1,239 @@
+import { h } from "@stencil/core";
+import { createPopper } from "@popperjs/core";
+export class CustomPopper {
+    constructor() {
+        this.placement = 'bottom';
+        this.offset = [0, 10];
+        this.strategy = 'absolute';
+        this.trigger = 'click';
+        this.anchorRef = undefined;
+        this.isOpen = false;
+    }
+    componentDidLoad() {
+        this.popperInstance = createPopper(this.anchorRef, this.popperContentRef, this.popperOptions);
+        if (this.trigger === 'click') {
+            window.addEventListener('click', this.handleClick.bind(this));
+        }
+        else if (this.trigger === 'hover') {
+            this.anchorRef.addEventListener('mouseenter', this.show.bind(this));
+            this.anchorRef.addEventListener('mouseleave', this.hide.bind(this));
+            this.popperContentRef.addEventListener('mouseenter', this.show.bind(this));
+            this.popperContentRef.addEventListener('mouseleave', this.hide.bind(this));
+        }
+        else if (this.trigger === 'focus') {
+            this.anchorRef.addEventListener('focus', this.show.bind(this));
+            this.anchorRef.addEventListener('blur', this.hide.bind(this));
+        }
+    }
+    disconnectedCallback() {
+        if (this.trigger === 'click') {
+            window.removeEventListener('click', this.handleClick.bind(this));
+        }
+        else if (this.trigger === 'hover') {
+            this.anchorRef.removeEventListener('mouseenter', this.show.bind(this));
+            this.anchorRef.removeEventListener('mouseleave', this.hide.bind(this));
+            this.popperContentRef.removeEventListener('mouseenter', this.show.bind(this));
+            this.popperContentRef.removeEventListener('mouseleave', this.hide.bind(this));
+        }
+        else if (this.trigger === 'focus') {
+            this.anchorRef.removeEventListener('focus', this.show.bind(this));
+            this.anchorRef.removeEventListener('blur', this.hide.bind(this));
+        }
+    }
+    handleClick(event) {
+        const path = event.composedPath();
+        const isAnchorClicked = path.includes(this.anchorRef);
+        const isPopperContentClicked = path.includes(this.popperContentRef);
+        if (!this.isOpen && isAnchorClicked) {
+            this.show();
+        }
+        else if (this.isOpen && !isPopperContentClicked) {
+            this.hide();
+        }
+        else if (this.isOpen && isAnchorClicked) {
+            this.hide();
+        }
+    }
+    get popperOptions() {
+        return {
+            placement: this.placement,
+            modifiers: [
+                {
+                    name: 'offset',
+                    options: {
+                        offset: this.offset,
+                    },
+                },
+            ],
+            strategy: this.strategy,
+        };
+    }
+    show() {
+        this.isOpen = true;
+        this.popperContentRef.setAttribute('data-show', '');
+        this.popperInstance.update();
+        this.showEvent.emit();
+    }
+    hide() {
+        this.isOpen = false;
+        this.popperContentRef.removeAttribute('data-show');
+        this.popperInstance.update();
+        this.hideEvent.emit();
+    }
+    render() {
+        return (h("div", { key: '2fd0d1c55f982d9882b17f26c1e997de8de53768' }, h("style", { key: 'ae7fb7b0eae12cfcea357299b6457f523831ac12' }, `
+          .popper-content {
+            display: none;
+          }
+          .popper-content[data-show] {
+            display: block;
+            z-index: 1030;
+          }
+          `), h("div", { key: '2c747dff168ef5e84642d5c490ffa4e8fc5c2350', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '720f23f2a51da2bb9de5c17d7a548d5ddf90ea53' }))));
+    }
+    static get is() { return "custom-popper"; }
+    static get properties() {
+        return {
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "@popperjs/core",
+                            "id": "../../node_modules/.pnpm/@popperjs+core@2.11.8/node_modules/@popperjs/core/index.d.ts::Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "placement",
+                "reflect": false,
+                "defaultValue": "'bottom'"
+            },
+            "offset": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "[number, number]",
+                    "resolved": "[number, number]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "[0, 10]"
+            },
+            "strategy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PositioningStrategy",
+                    "resolved": "\"absolute\" | \"fixed\"",
+                    "references": {
+                        "PositioningStrategy": {
+                            "location": "import",
+                            "path": "@popperjs/core",
+                            "id": "../../node_modules/.pnpm/@popperjs+core@2.11.8/node_modules/@popperjs/core/index.d.ts::PositioningStrategy"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "strategy",
+                "reflect": false,
+                "defaultValue": "'absolute'"
+            },
+            "trigger": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "trigger",
+                "reflect": false,
+                "defaultValue": "'click'"
+            },
+            "anchorRef": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement",
+                    "resolved": "HTMLElement",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "showEvent",
+                "name": "showEvent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "hideEvent",
+                "name": "hideEvent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/ui-components/filters/table-filters-menu.js

@@ -0,0 +1,89 @@
+import { h } from "@stencil/core";
+import { Button } from "../button";
+import { hasFilters } from "./utils";
+export class TableFiltersMenu {
+    constructor() {
+        this.anchorButton = undefined;
+        this.menu = undefined;
+        this.showClearButton = false;
+        this.params = undefined;
+        this.clearParams = undefined;
+    }
+    watchParamsHandler(newValue) {
+        this.showClearButton = hasFilters(newValue);
+    }
+    show() {
+        this.menu.classList.add('show');
+    }
+    hide() {
+        this.menu.classList.remove('show');
+    }
+    render() {
+        return (h("div", { key: '26c76e4989db63505bbb6d4ecfed10f964839c73', class: "d-flex gap-2" }, h("div", { key: '5b9b28d3c1daeb5c38fd5f2fb2529e8251f6d193', class: "dropdown pb-3" }, h(Button, { key: '45adcccffe23b4d357f0870f961eecfa0a8b3199', variant: "primary", type: "button dropdown-toggle", ref: (el) => (this.anchorButton = el), class: "btn btn-primary dropdown-toggle", "data-test-id": "open-filters-button", "data-bs-toggle": "dropdown" }, "Filters"), h("custom-popper", { key: '8f381f3db3956a642107bba64f2a2a4370bae2cf', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: '8e5cb0a64848e0720732fc95206deaf56ca338c9', class: "dropdown-menu", part: "dropdown-menu", "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: 'a102749963913d0a58e0210ea9c3bf3d4a14c1f3' })))), h("div", { key: 'ac38e6b46ce79967e66da4d40c0778df0b07e1a6' }, h(Button, { key: '2c8ef6ff571121b8cab1b17f2ac7035792f1d7f4', variant: "secondary", onClick: () => this.clearParams(), hidden: !this.showClearButton, "data-test-id": "clear-filters-button" }, "Clear Filters"))));
+    }
+    static get is() { return "table-filters-menu"; }
+    static get properties() {
+        return {
+            "params": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "params",
+                "reflect": false
+            },
+            "clearParams": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "anchorButton": {},
+            "menu": {},
+            "showClearButton": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "params",
+                "methodName": "watchParamsHandler"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "showEvent",
+                "method": "show",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "hideEvent",
+                "method": "hide",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/ui-components/filters/utils.js

@@ -0,0 +1,20 @@
+export const onFilterChange = (newFilters, params) => {
+    let newParams = Object.assign({}, params);
+    delete newParams.before_cursor;
+    delete newParams.after_cursor;
+    Object.keys(newFilters).forEach((key) => {
+        if (newFilters[key].length) {
+            newParams[key] = newFilters[key];
+        }
+        else {
+            delete newParams[key];
+        }
+    });
+    return newParams;
+};
+export const hasFilters = (params) => {
+    const paginationKeys = ['after_cursor', 'before_cursor'];
+    const paramKeys = Object.keys(params);
+    const filterKeys = paramKeys.filter((paramKey) => !paginationKeys.includes(paramKey));
+    return !!filterKeys.length;
+};

package/dist/collection/utils/check-pkg-version.js

@@ -0,0 +1,19 @@
+import packageJson from "../../package.json";
+const latestVersion = async (packageName) => {
+    const response = await fetch('https://registry.npmjs.org/' + packageName + '/latest');
+    const json = await response.json();
+    return json.version;
+};
+export const checkPkgVersion = async () => {
+    const version = packageJson.version;
+    const packageName = packageJson.name;
+    const latest = await latestVersion(packageName);
+    // remove rc from version and everything that comes after -rc
+    const latestNotRC = latest.replace(/-rc.*/, '');
+    // checkif there's a major version difference
+    const versionParts = version.split('.');
+    const latestParts = latest.split('.');
+    if (versionParts[0] !== latestParts[0]) {
+        console.warn(`The package ${packageName} is out of date. The latest version is ${latestNotRC}. Please update.`);
+    }
+};