@justifi/webcomponents 4.19.3 → 4.20.1

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: 'ff19898ad40884372621978edd5a44aa4b0a3b53' }, h("style", { key: '9d1c65abf4971046c219312792d9836656dda63a' }, `
+          .popper-content {
+            display: none;
+          }
+          .popper-content[data-show] {
+            display: block;
+            z-index: 1030;
+          }
+          `), h("div", { key: '50d1dabe33b1b0a3d9c82e8fb68e2aef1e81e549', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '1d1eae013b2e61dd8285c014f388d2c2d68406c5' }))));
+    }
+    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: 'dd6aae6e43579e8f833b1f3f6a6227d2522d79ec', class: "d-flex gap-2" }, h("div", { key: '6decd268cf11d67c3f9e3c2b22e60cbdf328763a', class: "dropdown pb-3" }, h(Button, { key: 'af22247916f55da650da95006e3317316a4122f5', 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: '0516d664adf8feccb9dd9cb74023241867285bd6', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: 'd42f891b0b30fa152e03bfe3fbcb12da4707974b', class: "dropdown-menu", part: "dropdown-menu", "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: '77eb00715458275e6df23da973103046364f50aa' })))), h("div", { key: 'c9070c2d5ee453cf3a97908514877975c55813b8' }, h(Button, { key: '99b38ff5ac51ee21227832b2200f2dcdec40a70c', 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.`);
+    }
+};