@everymatrix/blog-articles-grid 1.0.69

package/dist/collection/components/blog-articles-grid/blog-articles-grid.js

@@ -0,0 +1,740 @@
+import { h } from "@stencil/core";
+import { translate } from "../../utils/locale.utils";
+import { getDevicePlatform, getDeviceCustom } from "../../utils/utils";
+import "../../../../../helper-pagination/dist/types/index";
+export class BlogArticlesGrid {
+    constructor() {
+        this.clientStylingContent = '';
+        this.defaultStyling = `
+  div#PaginationContainer {
+    justify-content: right;
+  }
+  .LeftItems button .NavigationButton {
+    display: none;
+  }
+  .LeftItems button:after, .RightItems button:after {
+    padding: 7px 12px;
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 46px;
+  }
+  .LeftItems button:after {
+    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.2em' viewBox='0 0 320 512'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z'/%3E%3C/svg%3E");
+  }
+  .RightItems button:after {
+    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.2em' viewBox='0 0 320 512'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E");
+    display: block;
+    height: 38px;
+  }
+  div.LeftItems button, div.RightItems button {
+    width: unset;
+    height: 40px;
+    background-color: #fff;
+    color: #000;
+    border: 1px solid #000;
+    overflow: hidden;
+    &:disabled {
+      background-color: #989898;
+    }
+  }
+  div.LeftItems button {
+    min-width: 60px;
+    border-radius: 20px 0 0 20px;
+    border-right: 0;
+  }
+  div.RightItems button {
+    display: flex;
+    min-width: 100px;
+    justify-content: space-evenly;
+    align-items: center;
+    border-radius: 0 20px 20px 0;
+    text-transform: none;
+  }
+  .RightItems button .NavigationButton {
+    padding: 12px 0 12px 12px;
+    font-weight: 700;
+  }`;
+        this.setClientStyling = () => {
+            this.clientStylingContent += this.clientStyling;
+            const sheet = document.createElement('style');
+            sheet.innerHTML = this.clientStylingContent;
+            this.stylingContainer.prepend(sheet);
+        };
+        this.setImage = (image) => {
+            let source = '';
+            switch (this.device) {
+                case 'mobile':
+                    source = image.sources[0].pictureSource;
+                    break;
+                case 'tablet':
+                    source = image.sources[1].pictureSource;
+                    break;
+                case 'desktop':
+                    source = image.sources[2].pictureSource;
+                    break;
+            }
+            return source;
+        };
+        this.renderContentConditionally = (content) => {
+            if (!content)
+                return;
+            const hasBanner = content.indexOf('<bannermatrix-banner') !== -1;
+            if (!hasBanner) {
+                return h("div", { class: "BlogContent", innerHTML: content });
+            }
+            if (this.bannerMatrixReady) {
+                return h("div", { class: "BlogContent", innerHTML: content });
+            }
+            return null;
+        };
+        this.cmsEndpoint = undefined;
+        this.language = 'en';
+        this.userRoles = 'everyone';
+        this.cmsEnv = 'stage';
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.showPublishingDate = true;
+        this.showImage = true;
+        this.showTitle = true;
+        this.showContent = true;
+        this.showButton = true;
+        this.usePostmessage = undefined;
+        this.postMessageEvent = '';
+        this.blogsLimit = '0';
+        this.paginationActive = undefined;
+        this.arrowsActive = undefined;
+        this.secondaryArrowsActive = undefined;
+        this.numberedNavActive = undefined;
+        this.intlDateTimeFormat = '';
+        this.page = '1';
+        this.paginationBlogList = {
+            offset: 0
+        };
+        this.currentPage = 0;
+        this.hasErrors = false;
+        this.isLoading = true;
+        this.bannerMatrixReady = false;
+        this.nextPage = '';
+        this.previousPage = '';
+        this.device = '';
+        this.blogData = undefined;
+        this.totalBlogs = 0;
+    }
+    getArticleId(postId, slug, customPath) {
+        if (this.usePostmessage) {
+            window.postMessage({ type: this.postMessageEvent, postId, slug, customPath });
+        }
+        else {
+            this.articleActionButton.emit({ postId, slug, customPath });
+        }
+    }
+    // Rerender when bannermatrix has finished loaded. Issue when bannermatrix passed as content from CMS.
+    handleBannerReady() {
+        this.bannerMatrixReady = true;
+    }
+    watchEndpoint(newValue, oldValue) {
+        this.currentPage = parseInt(this.page) - 1;
+        if (newValue && newValue != oldValue && this.cmsEndpoint && this.language) {
+            this.getBlogArticleGrid();
+        }
+    }
+    handleStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.fetchClientStyling().then(_ => this.setClientStyling());
+        }
+    }
+    hpPageChange(event) {
+        var _a, _b;
+        this.paginationBlogList = event.detail;
+        this.currentPage = Math.floor(((_a = this.paginationBlogList) === null || _a === void 0 ? void 0 : _a.offset) / ((_b = this.paginationBlogList) === null || _b === void 0 ? void 0 : _b.limit));
+        if (this.page) {
+            this.currentPage = this.currentPage + +this.page - 1;
+        }
+        if (this.currentPage + 1 > this.lastPage) {
+            this.nextPage = null;
+            return;
+        }
+        if (this.currentPage < 0) {
+            this.previousPage = null;
+            return;
+        }
+        window.postMessage({ type: 'BlogArticlesGridActivePagination', currentPage: this.currentPage }, window.location.href);
+        this.getBlogArticleGrid();
+    }
+    sortArticlesByDate(arr) {
+        arr.sort((a, b) => {
+            if (a.publishingDate > b.publishingDate)
+                return -1;
+            if (a.publishingDate < b.publishingDate)
+                return 1;
+            return 0;
+        });
+        return arr;
+    }
+    findLatestFeatured(array) {
+        let featuredItems = array.filter(item => item.isFeaturedPost);
+        if (featuredItems.length === 0) {
+            return null;
+        }
+        featuredItems = this.sortArticlesByDate(featuredItems);
+        return featuredItems[0];
+    }
+    moveLatestFeatureToStart(articlesArray, latestFeatured) {
+        const index = articlesArray.indexOf(latestFeatured);
+        if (index !== -1) {
+            articlesArray.splice(index, 1);
+            articlesArray.unshift(latestFeatured);
+        }
+        return articlesArray;
+    }
+    getBlogArticleGrid(page) {
+        this.isLoading = true;
+        let url = new URL(`${this.cmsEndpoint}/${this.language}/blog-posts`);
+        url.searchParams.append('per_page', this.blogsLimit);
+        url.searchParams.append('page', JSON.stringify(page ? page : this.currentPage + 1));
+        url.searchParams.append('env', this.cmsEnv);
+        url.searchParams.append('userRoles', this.userRoles);
+        url.searchParams.append('device', getDevicePlatform());
+        fetch(url.href)
+            .then((res) => {
+            if (res.status >= 300) {
+                this.hasErrors = true;
+                throw new Error('There was an error while fetching the data');
+            }
+            return res.json();
+        })
+            .then((blogContent) => {
+            this.lastPage = +blogContent.pages.last.match(/&page=(\d+)/)[1];
+            let blogItems = blogContent.items;
+            this.nextPage = blogContent.pages.next;
+            this.previousPage = blogContent.pages.previous;
+            this.totalBlogs = blogContent.total;
+            const latestFeatured = this.findLatestFeatured(blogItems);
+            this.blogData = this.sortArticlesByDate(blogItems);
+            this.blogData = this.moveLatestFeatureToStart(blogItems, latestFeatured);
+            this.blogData.items = blogItems.map((item) => {
+                return Object.assign(Object.assign({}, item), { publishingDate: new Date(item.publishingDate).toLocaleDateString() });
+            });
+            this.isLoading = false;
+            this.hasErrors = false;
+        })
+            .catch((err) => {
+            this.hasErrors = true;
+            console.log('Error', err);
+        })
+            .finally(() => this.isLoading = false);
+    }
+    connectedCallback() {
+        if (this.cmsEndpoint && this.language && this.blogsLimit) {
+            if (this.page) {
+                this.currentPage = this.currentPage + +this.page - 1;
+                this.getBlogArticleGrid(+this.page);
+            }
+            else {
+                this.getBlogArticleGrid();
+            }
+        }
+    }
+    componentWillLoad() {
+        if (this.clientStylingUrl)
+            return this.fetchClientStyling();
+    }
+    componentDidLoad() {
+        if (this.clientStyling || this.clientStylingUrl)
+            this.setClientStyling();
+        window.postMessage({ type: 'BlogArticlesGridLoaded' }, window.location.href);
+        this.device = getDeviceCustom();
+    }
+    fetchClientStyling() {
+        if (!this.clientStylingUrl)
+            return;
+        return new Promise(resolve => {
+            fetch(this.clientStylingUrl)
+                .then((res) => res.text())
+                .then((data) => {
+                resolve(data);
+                this.clientStylingContent += data;
+            })
+                .catch((err) => {
+                console.error('Error fetching Client Styling:', err);
+            });
+        });
+    }
+    formatDate(dateString) {
+        return new Intl.DateTimeFormat(this.intlDateTimeFormat).format(new Date(dateString));
+    }
+    render() {
+        var _a, _b;
+        if (this.hasErrors) {
+            return (h("div", { class: "BlogsContainer" }, h("div", { class: "ErrorMessage" }, translate('error', this.language))));
+        }
+        // Create an array to store the placeholder elements for each card
+        const placeholderCards = [];
+        // Loop through the blogsLimit in order to generate the desired number of cards
+        for (let i = 0; i < parseInt(this.blogsLimit); i++) {
+            placeholderCards.push(h("div", { class: "GridContainer FeaturedPost Skeleton" }, h("div", { class: "GridWrapper" }, h("div", { class: "GridSector" }, h("div", { class: "VisualContent LoadingImage" })), h("div", { class: "GridSector" }, h("div", { class: "BlogTitle LoadingStripe LoadingSmallStripe" }), h("div", { class: "BlogDetails LoadingStripe LoadingMediumStripe" }), h("div", { class: "BlogLink LoadingStripe LoadingLongStripe" })))));
+        }
+        return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "BlogPageContainer" }, h("div", { class: "BlogGridPaginationWrapper" }, this.paginationActive == true && this.totalBlogs > +this.blogsLimit && h("helper-pagination", { "next-page": this.nextPage, "prev-page": this.previousPage, offset: this.paginationBlogList.offset, limit: parseInt(this.blogsLimit, 10), total: (_b = (_a = this.blogData) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.length, language: this.language, "client-styling": this.clientStyling || this.defaultStyling, "arrows-active": this.arrowsActive || true, "secondary-arrows-active": this.secondaryArrowsActive || false, "numbered-nav-active": this.numberedNavActive || false })), (!this.isLoading) &&
+            h("div", { class: `GridContainerWrapper BlogPage-${this.currentPage}` }, this.blogData && this.blogData.map((data) => {
+                var _a, _b;
+                return h("div", { key: data.postID, class: data.isFeaturedPost ? 'GridContainer FeaturedPost' : 'GridContainer' }, h("div", { class: "GridWrapper" }, h("div", { class: "GridSector" }, this.showPublishingDate &&
+                    h("div", { class: "BlogDate" }, this.formatDate(data === null || data === void 0 ? void 0 : data.publishingDate)), this.showImage && ((_a = data.image) === null || _a === void 0 ? void 0 : _a.src) ? (h("div", { class: "VisualContent", style: { background: `url(${this.setImage(data.image)}) no-repeat center center / cover` } })) : (((_b = data.video) === null || _b === void 0 ? void 0 : _b.sources[this.device]) ? (h("video", { class: "VisualContent", src: data.video.sources[this.device], controls: true })) : (h("h1", { class: "VisualContent", style: { color: "#fff" } }, "No Image")))), h("div", { class: "GridSector" }, this.showTitle &&
+                    h("div", { class: "BlogTitle" }, data === null || data === void 0 ? void 0 : data.title), this.showContent &&
+                    this.renderContentConditionally(data === null || data === void 0 ? void 0 : data.descriptionPreview), this.showButton &&
+                    h("div", { class: "BlogLink" }, h("button", { onClick: () => this.getArticleId(data === null || data === void 0 ? void 0 : data.postID, data === null || data === void 0 ? void 0 : data.slug, data === null || data === void 0 ? void 0 : data.customPath) }, translate('readmore', this.language))))));
+            })), (this.isLoading) &&
+            h("div", { class: "GridContainerWrapper LoadingGrid" }, placeholderCards))));
+    }
+    static get is() { return "blog-articles-grid"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["blog-articles-grid.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["blog-articles-grid.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "cmsEndpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Endpoint URL for the source of data"
+                },
+                "attribute": "cms-endpoint",
+                "reflect": true
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Language of the widget"
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "userRoles": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "User roles"
+                },
+                "attribute": "user-roles",
+                "reflect": true,
+                "defaultValue": "'everyone'"
+            },
+            "cmsEnv": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "CMS Endpoint stage"
+                },
+                "attribute": "cms-env",
+                "reflect": true,
+                "defaultValue": "'stage'"
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via string"
+                },
+                "attribute": "client-styling",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via url"
+                },
+                "attribute": "client-styling-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "showPublishingDate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Property used to display the publishing date"
+                },
+                "attribute": "show-publishing-date",
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "showImage": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Property used to display the image"
+                },
+                "attribute": "show-image",
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "showTitle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Property used to display the image"
+                },
+                "attribute": "show-title",
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "showContent": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Property used to display the description"
+                },
+                "attribute": "show-content",
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "showButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Property used to display the button"
+                },
+                "attribute": "show-button",
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "usePostmessage": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use postMessage event to communicate"
+                },
+                "attribute": "use-postmessage",
+                "reflect": true
+            },
+            "postMessageEvent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Event name to be sent when the button is clicked"
+                },
+                "attribute": "post-message-event",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "blogsLimit": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Customize pagination: Activate pagination numbered navigation"
+                },
+                "attribute": "blogs-limit",
+                "reflect": true,
+                "defaultValue": "'0'"
+            },
+            "paginationActive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Customize pagination: Activate pagination"
+                },
+                "attribute": "pagination-active",
+                "reflect": true
+            },
+            "arrowsActive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Customize pagination: Activate pagination arrows"
+                },
+                "attribute": "arrows-active",
+                "reflect": true
+            },
+            "secondaryArrowsActive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Customize pagination: Activate pagination secondary arrows"
+                },
+                "attribute": "secondary-arrows-active",
+                "reflect": true
+            },
+            "numberedNavActive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Customize pagination: Activate pagination numbered navigation"
+                },
+                "attribute": "numbered-nav-active",
+                "reflect": true
+            },
+            "intlDateTimeFormat": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Intl date format"
+                },
+                "attribute": "intl-date-time-format",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "page": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Page to particularly be opened on start"
+                },
+                "attribute": "page",
+                "reflect": true,
+                "defaultValue": "'1'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "paginationBlogList": {},
+            "currentPage": {},
+            "hasErrors": {},
+            "isLoading": {},
+            "bannerMatrixReady": {},
+            "nextPage": {},
+            "previousPage": {},
+            "device": {},
+            "blogData": {},
+            "totalBlogs": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "articleActionButton",
+                "name": "articleActionButton",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Object",
+                    "resolved": "Object",
+                    "references": {
+                        "Object": {
+                            "location": "global",
+                            "id": "global::Object"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "page",
+                "methodName": "watchEndpoint"
+            }, {
+                "propName": "hasErrors",
+                "methodName": "watchEndpoint"
+            }, {
+                "propName": "cmsEndpoint",
+                "methodName": "watchEndpoint"
+            }, {
+                "propName": "language",
+                "methodName": "watchEndpoint"
+            }, {
+                "propName": "cmsEnv",
+                "methodName": "watchEndpoint"
+            }, {
+                "propName": "userRoles",
+                "methodName": "watchEndpoint"
+            }, {
+                "propName": "blogsLimit",
+                "methodName": "watchEndpoint"
+            }, {
+                "propName": "clientStyling",
+                "methodName": "handleStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleStylingChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "BannerMatrixReady",
+                "method": "handleBannerReady",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "hpPageChange",
+                "method": "hpPageChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}