@iamproperty/components 7.1.0--beta7 → 7.2.1--beta1

package/assets/js/components/video-card/video-card.component.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"video-card.component.min.js","sources":["../_global.js","../../modules/card.module.js","video-card.component.js"],"sourcesContent":["// @ts-nocheck\nexport const trackComponentRegistered = (componentName) => {\n    // Data layer Web component created\n    window.dataLayer = window.dataLayer || [];\n    window.dataLayer.push({\n        event: 'customElementRegistered',\n        element: componentName,\n    });\n};\nexport const trackComponent = (component, componentName, trackEvents) => {\n    // Data layer Web component created\n    window.dataLayer = window.dataLayer || [];\n    window.dataLayer.push({\n        event: 'customElementAdded',\n        element: componentName,\n    });\n    trackEvents.forEach((eventName) => {\n        component.addEventListener(eventName, function (event) {\n            const eventDetails = {\n                event: eventName,\n                element: componentName,\n                target: event.target,\n            };\n            Object.keys(event.detail).forEach((eventKey) => {\n                const eventDetail = event.detail[eventKey];\n                eventDetails[eventKey] = eventDetail;\n            });\n            window.dataLayer.push(eventDetails);\n        });\n    });\n    return true;\n};\n","export const cardHTML = `<div class=\"card__head\" part=\"head\">\n  <slot name=\"head\"></slot>\n</div>\n<div class=\"card__badges\"><slot name=\"badges\"></slot></div>\n<slot name=\"checkbox\" class=\"activate-prevent-hover\"></slot>\n<div class=\"card__body\" part=\"body\">\n  <slot></slot>\n  <slot name=\"secondary\" part=\"secondary\"></slot>\n</div>\n<div class=\"card__details\" part=\"details\">\n  <slot name=\"details\"></slot>\n</div>\n<div class=\"card__footer\" part=\"footer\">\n  <slot name=\"footer\"></slot>\n</div>`;\nexport const setupCard = (cardComponent) => {\n    cardComponent.classList.add('card');\n    const cardHead = cardComponent.shadowRoot.querySelector('.card__head');\n    const cardBody = cardComponent.shadowRoot.querySelector('.card__body');\n    if (cardComponent.hasAttribute('data-image')) {\n        cardHead.innerHTML += `<img src=\"${cardComponent.getAttribute('data-image')}\" alt=\"\" loading=\"lazy\" part=\"image\" />`;\n    }\n    // Inset the HTML for the data total or icon fallback\n    if (cardComponent.hasAttribute('data-total')) {\n        cardBody.insertAdjacentHTML('beforeend', `<div class=\"card__total\">${cardComponent.getAttribute('data-total')}</div>`);\n    }\n    else if (cardComponent.querySelector('[slot=\"total-icon\"]')) {\n        cardBody.insertAdjacentHTML('beforeend', `<div class=\"card__total\"><slot name=\"total-icon\"></slot></div>`);\n    }\n    if (!cardComponent.querySelector('[slot=\"badges\"]')) {\n        cardComponent.shadowRoot.querySelector('.card__badges').classList.add('empty');\n    }\n    else {\n        cardComponent.shadowRoot.querySelector('.card__badges').classList.remove('empty');\n    }\n};\n","var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\n// @ts-nocheck\nimport { trackComponent, trackComponentRegistered } from '../_global.js';\nimport { cardHTML, setupCard } from '../../modules/card.module.js';\ntrackComponentRegistered('iam-video-card');\nclass iamVideoCard extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const loadCSS = `@import \"${assetLocation}/css/components/video-card.component.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n    \n    ${loadCSS}\n    </style>\n    ${cardHTML}\n    <dialog>\n      <div class=\"embed\"></div>\n    </dialog>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        return __awaiter(this, void 0, void 0, function* () {\n            const cardComponent = this;\n            const cardHead = cardComponent.shadowRoot.querySelector('.card__head');\n            const randLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));\n            const link_id = randLetter + Date.now();\n            let dialog;\n            let embed;\n            setupCard(cardComponent);\n            // Check if youtube or vimeo video link is present\n            if (cardComponent.querySelector('[data-youtube]'))\n                cardComponent.setAttribute('data-youtube', cardComponent.querySelector('[data-youtube]').getAttribute('data-youtube'));\n            if (cardComponent.querySelector('[data-vimeo]'))\n                cardComponent.setAttribute('data-vimeo', cardComponent.querySelector('[data-vimeo]').getAttribute('data-vimeo'));\n            // General dialog stuff\n            if (cardComponent.hasAttribute('data-youtube') || cardComponent.hasAttribute('data-vimeo')) {\n                cardHead.setAttribute('tabindex', '0');\n                // Add dialog to page\n                if (!document.getElementById(`${link_id}-dialog`)) {\n                    document.body.insertAdjacentHTML('beforeend', `<dialog id=\"${link_id}-dialog\"><div class=\"embed\" id=\"${link_id}\"></div></dialog>`);\n                }\n                dialog = document.getElementById(`${link_id}-dialog`);\n                embed = document.getElementById(link_id);\n            }\n            // Youtube\n            if (cardComponent.hasAttribute('data-youtube')) {\n                // Load the scripts only once\n                if (!document.body.classList.contains('youtubeLoaded')) {\n                    const loaded = yield this.loadYouTubeScripts();\n                }\n                cardHead.addEventListener('click', function () {\n                    const customEvent = new CustomEvent('play-video', {\n                        detail: { 'Video Type': 'YoutTube', ID: cardComponent.getAttribute('data-youtube') },\n                    });\n                    cardComponent.dispatchEvent(customEvent);\n                    cardComponent.createYoutTubeVideo(embed);\n                    dialog.showModal();\n                });\n                dialog.addEventListener('close', (event) => {\n                    if (window.player[embed.getAttribute('id')] &&\n                        typeof window.player[embed.getAttribute('id')].pauseVideo == 'function') {\n                        window.player[embed.getAttribute('id')].pauseVideo();\n                    }\n                    const customEvent = new CustomEvent('close-video', {\n                        detail: { 'Video Type': 'YoutTube', ID: cardComponent.getAttribute('data-youtube') },\n                    });\n                    cardComponent.dispatchEvent(customEvent);\n                });\n            }\n            else if (cardComponent.hasAttribute('data-vimeo')) {\n                // Vimeo\n                cardHead.addEventListener('click', function () {\n                    const videoId = cardComponent.getAttribute('data-vimeo');\n                    const customEvent = new CustomEvent('play-video', {\n                        detail: { 'Video Type': 'Vimeo', ID: videoId },\n                    });\n                    cardComponent.dispatchEvent(customEvent);\n                    if (!embed.querySelector('iframe'))\n                        embed.innerHTML = `<iframe src=\"https://player.vimeo.com/video/${videoId}?autoplay=1\" width=\"100%\" height=\"100%\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>`;\n                    dialog.showModal();\n                });\n                dialog.addEventListener('close', (event) => {\n                    embed.innerHTML = ``; // Remove the video since we cant pause it\n                    const customEvent = new CustomEvent('close-video', {\n                        detail: { 'Video Type': 'Vimeo', ID: cardComponent.getAttribute('data-vimeo') },\n                    });\n                    cardComponent.dispatchEvent(customEvent);\n                });\n            }\n            trackComponent(cardComponent, 'iam-video-card', ['play-video', 'close-video']);\n        });\n    }\n    loadYouTubeScripts() {\n        return new Promise((resolve, reject) => {\n            const image = new Image();\n            image.onload = function () {\n                // This code loads the IFrame Player API code asynchronously.\n                const tag = document.createElement('script');\n                tag.src = 'https://www.youtube.com/iframe_api';\n                const firstScriptTag = document.getElementsByTagName('script')[0];\n                firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\n                document.body.classList.add('youtubeLoaded');\n                resolve(true);\n            };\n            image.onerror = function () {\n                reject(false);\n            };\n            image.src = 'https://youtube.com/favicon.ico';\n        });\n    }\n    createYoutTubeVideo(target) {\n        if (typeof window.player == 'undefined') {\n            window.player = [];\n        }\n        const link_id = target.getAttribute('id');\n        const video_id = this.getAttribute('data-youtube');\n        console.log(window.player);\n        if (typeof window.player[link_id] != 'undefined' && typeof window.player[link_id].pauseVideo == 'function') {\n            window.player[link_id].playVideo();\n            return false;\n        }\n        // This function creates an <iframe> (and YouTube player) after the API code downloads.\n        //function onYouTubeIframeAPIReady() {\n        window.player[link_id] = new YT.Player(link_id, {\n            height: '100%',\n            width: '100%',\n            videoId: video_id,\n            playerVars: {\n                modestbranding: 1,\n                playsinline: 1,\n                rel: 0,\n                showinfo: 0,\n            },\n            events: {\n                onReady: onPlayerReady,\n                onStateChange: onPlayerStateChange,\n            },\n        });\n        //}\n        //onYouTubeIframeAPIReady();\n        // The API will call this function when the video player is ready.\n        function onPlayerReady(event) {\n            // Play the video straight away\n            event.target.playVideo();\n        }\n        // The API calls this function when the player's state changes.\n        // The function indicates that when playing a video (state=1)\n        let done = false;\n        function onPlayerStateChange(event) {\n            if (event.data == YT.PlayerState.PLAYING && !done) {\n                const link = document.getElementById(link_id);\n                link.classList.add('player-ready');\n                done = true;\n            }\n        }\n    }\n    static get observedAttributes() {\n        return ['data-image'];\n    }\n    attributeChangedCallback(attrName, oldVal, newVal) {\n        switch (attrName) {\n            case 'data-image': {\n                if (oldVal != newVal) {\n                    const cardHeadImg = this.shadowRoot.querySelector('.card__head img');\n                    if (cardHeadImg)\n                        cardHeadImg.setAttribute('src', newVal);\n                }\n                break;\n            }\n        }\n    }\n}\nexport default iamVideoCard;\n"],"names":["trackComponentRegistered","componentName","trackComponent","component","trackEvents","eventName","event","eventDetails","eventKey","eventDetail","cardHTML","setupCard","cardComponent","cardHead","cardBody","__awaiter","thisArg","_arguments","P","generator","adopt","value","resolve","reject","fulfilled","step","e","rejected","result","iamVideoCard","template","link_id","dialog","embed","customEvent","videoId","image","tag","firstScriptTag","target","video_id","onPlayerReady","onPlayerStateChange","done","attrName","oldVal","newVal","cardHeadImg"],"mappings":"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"}
+{"version":3,"file":"video-card.component.min.js","sources":["../_global.js","../../modules/card.module.js","video-card.component.js"],"sourcesContent":["export const trackComponentRegistered = (componentName) => {\n    // Data layer Web component created\n    window.dataLayer = window.dataLayer || [];\n    window.dataLayer.push({\n        event: 'customElementRegistered',\n        element: componentName,\n    });\n};\nexport const trackComponent = (component, componentName, trackEvents) => {\n    // Data layer Web component created\n    window.dataLayer = window.dataLayer || [];\n    window.dataLayer.push({\n        event: 'customElementAdded',\n        element: componentName,\n    });\n    trackEvents.forEach((eventName) => {\n        component.addEventListener(eventName, function (event) {\n            const eventDetails = {\n                event: eventName,\n                element: componentName,\n                target: event.target,\n            };\n            Object.keys(event.detail).forEach((eventKey) => {\n                const eventDetail = event.detail[eventKey];\n                eventDetails[eventKey] = eventDetail;\n            });\n            window.dataLayer.push(eventDetails);\n        });\n    });\n    return true;\n};\n","export const cardHTML = `<div class=\"card__head\" part=\"head\">\n  <slot name=\"head\"></slot>\n</div>\n<div class=\"card__badges\"><slot name=\"badges\"></slot></div>\n<slot name=\"checkbox\" class=\"activate-prevent-hover\"></slot>\n<div class=\"card__body\" part=\"body\">\n  <slot></slot>\n  <slot name=\"secondary\" part=\"secondary\"></slot>\n</div>\n<div class=\"card__details\" part=\"details\">\n  <slot name=\"details\"></slot>\n</div>\n<div class=\"card__footer\" part=\"footer\">\n  <slot name=\"footer\"></slot>\n</div>`;\nexport const setupCard = (cardComponent) => {\n    cardComponent.classList.add('card');\n    const cardHead = cardComponent.shadowRoot.querySelector('.card__head');\n    const cardBody = cardComponent.shadowRoot.querySelector('.card__body');\n    if (cardComponent.hasAttribute('data-image')) {\n        cardHead.innerHTML += `<img src=\"${cardComponent.getAttribute('data-image')}\" alt=\"\" loading=\"lazy\" part=\"image\" />`;\n    }\n    // Inset the HTML for the data total or icon fallback\n    if (cardComponent.hasAttribute('data-total')) {\n        cardBody.insertAdjacentHTML('beforeend', `<div class=\"card__total\">${cardComponent.getAttribute('data-total')}</div>`);\n    }\n    else if (cardComponent.querySelector('[slot=\"total-icon\"]')) {\n        cardBody.insertAdjacentHTML('beforeend', `<div class=\"card__total\"><slot name=\"total-icon\"></slot></div>`);\n    }\n    if (!cardComponent.querySelector('[slot=\"badges\"]')) {\n        cardComponent.shadowRoot.querySelector('.card__badges').classList.add('empty');\n    }\n    else {\n        cardComponent.shadowRoot.querySelector('.card__badges').classList.remove('empty');\n    }\n};\n","var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nimport { trackComponent, trackComponentRegistered } from '../_global.js';\nimport { cardHTML, setupCard } from '../../modules/card.module.js';\ntrackComponentRegistered('iam-video-card');\nclass iamVideoCard extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const loadCSS = `@import \"${assetLocation}/css/components/video-card.component.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n    \n    ${loadCSS}\n    </style>\n    ${cardHTML}\n    <dialog>\n      <div class=\"embed\"></div>\n    </dialog>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        return __awaiter(this, void 0, void 0, function* () {\n            // eslint-disable-next-line @typescript-eslint/no-this-alias\n            const cardComponent = this;\n            const cardHead = cardComponent.shadowRoot.querySelector('.card__head');\n            const randLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));\n            const link_id = randLetter + Date.now();\n            let dialog;\n            let embed;\n            setupCard(cardComponent);\n            // Check if youtube or vimeo video link is present\n            if (cardComponent.querySelector('[data-youtube]'))\n                cardComponent.setAttribute('data-youtube', cardComponent.querySelector('[data-youtube]').getAttribute('data-youtube'));\n            if (cardComponent.querySelector('[data-vimeo]'))\n                cardComponent.setAttribute('data-vimeo', cardComponent.querySelector('[data-vimeo]').getAttribute('data-vimeo'));\n            // General dialog stuff\n            if (cardComponent.hasAttribute('data-youtube') || cardComponent.hasAttribute('data-vimeo')) {\n                cardHead.setAttribute('tabindex', '0');\n                // Add dialog to page\n                if (!document.getElementById(`${link_id}-dialog`)) {\n                    document.body.insertAdjacentHTML('beforeend', `<dialog id=\"${link_id}-dialog\"><div class=\"embed\" id=\"${link_id}\"></div></dialog>`);\n                }\n                dialog = document.getElementById(`${link_id}-dialog`);\n                embed = document.getElementById(link_id);\n            }\n            // Youtube\n            if (cardComponent.hasAttribute('data-youtube')) {\n                // Load the scripts only once\n                if (!document.body.classList.contains('youtubeLoaded')) {\n                    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n                    const loaded = yield this.loadYouTubeScripts();\n                }\n                cardHead.addEventListener('click', function () {\n                    const customEvent = new CustomEvent('play-video', {\n                        detail: { 'Video Type': 'YoutTube', ID: cardComponent.getAttribute('data-youtube') },\n                    });\n                    cardComponent.dispatchEvent(customEvent);\n                    cardComponent.createYoutTubeVideo(embed);\n                    dialog.showModal();\n                });\n                dialog.addEventListener('close', () => {\n                    if (window.player[embed.getAttribute('id')] &&\n                        typeof window.player[embed.getAttribute('id')].pauseVideo == 'function') {\n                        window.player[embed.getAttribute('id')].pauseVideo();\n                    }\n                    const customEvent = new CustomEvent('close-video', {\n                        detail: { 'Video Type': 'YoutTube', ID: cardComponent.getAttribute('data-youtube') },\n                    });\n                    cardComponent.dispatchEvent(customEvent);\n                });\n            }\n            else if (cardComponent.hasAttribute('data-vimeo')) {\n                // Vimeo\n                cardHead.addEventListener('click', function () {\n                    const videoId = cardComponent.getAttribute('data-vimeo');\n                    const customEvent = new CustomEvent('play-video', {\n                        detail: { 'Video Type': 'Vimeo', ID: videoId },\n                    });\n                    cardComponent.dispatchEvent(customEvent);\n                    if (!embed.querySelector('iframe'))\n                        embed.innerHTML = `<iframe src=\"https://player.vimeo.com/video/${videoId}?autoplay=1\" width=\"100%\" height=\"100%\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>`;\n                    dialog.showModal();\n                });\n                dialog.addEventListener('close', () => {\n                    embed.innerHTML = ``; // Remove the video since we cant pause it\n                    const customEvent = new CustomEvent('close-video', {\n                        detail: { 'Video Type': 'Vimeo', ID: cardComponent.getAttribute('data-vimeo') },\n                    });\n                    cardComponent.dispatchEvent(customEvent);\n                });\n            }\n            trackComponent(cardComponent, 'iam-video-card', ['play-video', 'close-video']);\n        });\n    }\n    loadYouTubeScripts() {\n        return new Promise((resolve, reject) => {\n            const image = new Image();\n            image.onload = function () {\n                // This code loads the IFrame Player API code asynchronously.\n                const tag = document.createElement('script');\n                tag.src = 'https://www.youtube.com/iframe_api';\n                const firstScriptTag = document.getElementsByTagName('script')[0];\n                firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\n                document.body.classList.add('youtubeLoaded');\n                resolve(true);\n            };\n            image.onerror = function () {\n                reject(false);\n            };\n            image.src = 'https://youtube.com/favicon.ico';\n        });\n    }\n    createYoutTubeVideo(target) {\n        if (typeof window.player == 'undefined') {\n            window.player = [];\n        }\n        const link_id = target.getAttribute('id');\n        const video_id = this.getAttribute('data-youtube');\n        console.log(window.player);\n        if (typeof window.player[link_id] != 'undefined' && typeof window.player[link_id].pauseVideo == 'function') {\n            window.player[link_id].playVideo();\n            return false;\n        }\n        // This function creates an <iframe> (and YouTube player) after the API code downloads.\n        //function onYouTubeIframeAPIReady() {\n        window.player[link_id] = new YT.Player(link_id, {\n            height: '100%',\n            width: '100%',\n            videoId: video_id,\n            playerVars: {\n                modestbranding: 1,\n                playsinline: 1,\n                rel: 0,\n                showinfo: 0,\n            },\n            events: {\n                onReady: onPlayerReady,\n                onStateChange: onPlayerStateChange,\n            },\n        });\n        //}\n        //onYouTubeIframeAPIReady();\n        // The API will call this function when the video player is ready.\n        function onPlayerReady(event) {\n            // Play the video straight away\n            event.target.playVideo();\n        }\n        // The API calls this function when the player's state changes.\n        // The function indicates that when playing a video (state=1)\n        let done = false;\n        function onPlayerStateChange(event) {\n            if (event.data == YT.PlayerState.PLAYING && !done) {\n                const link = document.getElementById(link_id);\n                link.classList.add('player-ready');\n                done = true;\n            }\n        }\n    }\n    static get observedAttributes() {\n        return ['data-image'];\n    }\n    attributeChangedCallback(attrName, oldVal, newVal) {\n        switch (attrName) {\n            case 'data-image': {\n                if (oldVal != newVal) {\n                    const cardHeadImg = this.shadowRoot.querySelector('.card__head img');\n                    if (cardHeadImg)\n                        cardHeadImg.setAttribute('src', newVal);\n                }\n                break;\n            }\n        }\n    }\n}\nexport default iamVideoCard;\n"],"names":["trackComponentRegistered","componentName","trackComponent","component","trackEvents","eventName","event","eventDetails","eventKey","eventDetail","cardHTML","setupCard","cardComponent","cardHead","cardBody","__awaiter","thisArg","_arguments","P","generator","adopt","value","resolve","reject","fulfilled","step","e","rejected","result","iamVideoCard","template","link_id","dialog","embed","customEvent","videoId","image","tag","firstScriptTag","target","video_id","onPlayerReady","onPlayerStateChange","done","attrName","oldVal","newVal","cardHeadImg"],"mappings":"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"}

package/assets/js/modules/applied-filters.js

@@ -1,4 +1,3 @@
-// @ts-nocheck
 function createAppliedFilters(container, filters) {
     function addFilterButton(filters, input, notSet = true) {
         let shouldRemoveFilter = false;
@@ -76,28 +75,28 @@ function createAppliedFilters(container, filters) {
         }
     }
     // check for inputs on load
-    Array.from(container.querySelectorAll('input[type="checkbox"]:checked, input:not([type="checkbox"]):not([type="radio"])')).forEach((input, index) => {
+    Array.from(container.querySelectorAll('input[type="checkbox"]:checked, input:not([type="checkbox"]):not([type="radio"])')).forEach((input) => {
         addFilterButton(filters, input, false);
     });
     const dialog = container.closest('dialog');
     if (dialog) {
         const observer = new MutationObserver(function (event) {
             if (event[0].attributeName == 'open') {
-                Array.from(container.querySelectorAll('input[type="checkbox"]:checked, input:not([type="checkbox"]):not([type="radio"])')).forEach((input, index) => {
+                Array.from(container.querySelectorAll('input[type="checkbox"]:checked, input:not([type="checkbox"]):not([type="radio"])')).forEach((input) => {
                     addFilterButton(filters, input, false);
                 });
             }
         });
         observer.observe(dialog, { attributes: true });
     }
-    container.addEventListener('tags-set', function (event) {
+    container.addEventListener('tags-set', function () {
         filters.innerHTML = '';
-        Array.from(container.querySelectorAll('input[type="checkbox"]:checked, input:not([type="checkbox"]):not([type="radio"])')).forEach((input, index) => {
+        Array.from(container.querySelectorAll('input[type="checkbox"]:checked, input:not([type="checkbox"]):not([type="radio"])')).forEach((input) => {
             addFilterButton(filters, input, false);
         });
     });
     // check for change in displayed inputs
-    Array.from(container.querySelectorAll('input[type="checkbox"]:checked, input:not([type="checkbox"]):not([type="radio"])')).forEach((input, index) => {
+    Array.from(container.querySelectorAll('input[type="checkbox"]:checked, input:not([type="checkbox"]):not([type="radio"])')).forEach((input) => {
         input.addEventListener('change', function (event) {
             if (!container.hasAttribute('data-keep-same'))
                 addFilterButton(filters, input);
@@ -120,7 +119,7 @@ function createAppliedFilters(container, filters) {
                 const name = names[t];
                 let selector = `[name="${name}"]`;
                 if (name.match(/\[(.*)\]/)) {
-                    const newName = name.replace(/\[(.*)\]/, `[]`);
+                    //const newName = name.replace(/\[(.*)\]/, `[]`);
                     const value = name.replace(/.*\[(.*)\]/, `$1`);
                     selector = `[value="${value}"]`;
                 }
@@ -129,13 +128,13 @@ function createAppliedFilters(container, filters) {
                     const input = inputs[i];
                     if (input.getAttribute('type') != 'radio' && input.getAttribute('type') != 'checkbox') {
                         input.value = '';
-                        var event = new Event('force');
+                        const event = new Event('force');
                         if (!container.hasAttribute('data-nosubmit'))
                             input.closest('form').dispatchEvent(event);
                     }
                     else {
                         input.checked = false;
-                        var event = new Event('force');
+                        const event = new Event('force');
                         if (!container.hasAttribute('data-nosubmit'))
                             input.closest('form').dispatchEvent(event);
                     }

package/assets/js/modules/carousel.js

@@ -1,4 +1,3 @@
-// @ts-nocheck
 export const generateThumbnailList = function (carouselComponent) {
     const thumbnailImages = [];
     Array.from(carouselComponent.querySelectorAll(':scope > div')).forEach((slide, index) => {
@@ -25,7 +24,7 @@ export const generatePipsHTML = function (carouselComponent, thumbnailImages) {
     }
     return pips;
 };
-const getProgressMax = function (itemCount, visibleItems) {
+export const getProgressMax = function (itemCount, visibleItems) {
     if (visibleItems == 1) {
         return itemCount;
     }
@@ -58,7 +57,7 @@ export const carousel = function (carouselComponent) {
         stepperStart = 'touchstart';
     }
     // On scroll we need to make sure the buttons get corrected and the next testimonial is shown
-    carouselInner.addEventListener('scroll', function (e) {
+    carouselInner.addEventListener('scroll', function () {
         clearTimeout(scrollTimeout);
         scrollTimeout = setTimeout(function () {
             const scrollArea = carouselInner.clientWidth;
@@ -76,7 +75,7 @@ export const carousel = function (carouselComponent) {
             if (leftOverSpace > 0 && lastItemInView) {
                 targetSlide = Math.floor(itemCount / visibleItems) * visibleItems + 1;
             }
-            Array.from(carouselElement.querySelectorAll('.carousel__controls button')).forEach((button, index) => {
+            Array.from(carouselElement.querySelectorAll('.carousel__controls button')).forEach((button) => {
                 button.removeAttribute('aria-current');
             });
             carouselElement.querySelector('.control-' + targetSlide).setAttribute('aria-current', true);
@@ -103,7 +102,7 @@ export const carousel = function (carouselComponent) {
         for (let target = e.target; target && target != this; target = target.parentNode) {
             if (typeof target.matches == 'function' && target.matches('button')) {
                 e.preventDefault();
-                Array.from(carouselControls.querySelectorAll('button')).forEach((button, index) => {
+                Array.from(carouselControls.querySelectorAll('button')).forEach((button) => {
                     button.removeAttribute('aria-current');
                 });
                 target.setAttribute('aria-current', true);
@@ -125,7 +124,7 @@ export const carousel = function (carouselComponent) {
     }, false);
     carouselElement.addEventListener('click', function (e) {
         const scrollArea = carouselInner.clientWidth;
-        const scrollWidth = carouselInner.scrollWidth;
+        //const scrollWidth = carouselInner.scrollWidth;
         const itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;
         const visibleItems = Math.round(scrollArea / itemWidth);
         const lastItemOffset = carouselComponent.querySelector(':scope > div:last-child').offsetLeft;
@@ -161,7 +160,7 @@ export const carousel = function (carouselComponent) {
             }
         }
     }, false);
-    carouselProgress.addEventListener(stepperStart, function (event) {
+    carouselProgress.addEventListener(stepperStart, function () {
         clearInterval(stepperInterval);
         stepperInterval = setInterval(function () {
             scrollArea = carouselInner.clientWidth;
@@ -174,10 +173,10 @@ export const carousel = function (carouselComponent) {
             carouselProgress.style.setProperty('--percent', percent + '%');
         }, 10);
     });
-    carouselProgress.addEventListener(stepperEvent, function (event) {
+    carouselProgress.addEventListener(stepperEvent, function () {
         clearInterval(stepperInterval);
     });
-    carouselProgress.addEventListener('change', function (e) {
+    carouselProgress.addEventListener('change', function () {
         clearInterval(stepperInterval);
         const target = carouselComponent.querySelector(`:scope > *:nth-child(${carouselProgress.value})`);
         carouselInner.scroll({
@@ -185,7 +184,7 @@ export const carousel = function (carouselComponent) {
             left: target ? target.offsetLeft - carouselInner.getBoundingClientRect().left : 0,
             behavior: 'smooth',
         });
-        const direction = target.matches('.btn-next') ? 'next' : 'prev';
+        //const direction = target.matches('.btn-next') ? 'next' : 'prev';
         const customEvent = new CustomEvent(`slider-changed`, {
             detail: {
                 slide: carouselProgress.value,

package/assets/js/modules/chart.js

@@ -437,7 +437,8 @@ function createChartKeyItem(chartID, index, text, chartKey, chartOuter, previous
     return previousInput;
 }
 export const createChartGuidelines = function (chartElement, chartOuter, chartGuidelines) {
-    let { min, max, yaxis, increment, guidelines } = getChartData(chartElement, chartOuter);
+    const { increment, guidelines } = getChartData(chartElement, chartOuter);
+    let { min, max, yaxis } = getChartData(chartElement, chartOuter);
     if (guidelines.length)
         yaxis = guidelines;
     const startDay = min;
@@ -460,7 +461,8 @@ export const createChartGuidelines = function (chartElement, chartOuter, chartGu
     }
 };
 export const createChartYaxis = function (chartElement, chartOuter, chartYaxis) {
-    let { min, max, yaxis, increment } = getChartData(chartElement, chartOuter);
+    const { yaxis, increment } = getChartData(chartElement, chartOuter);
+    let { min, max } = getChartData(chartElement, chartOuter);
     const startDay = min;
     if (increment == 'days') {
         max = numberOfDays(min, max);
@@ -682,7 +684,7 @@ function createKeyTotals(chartElement, chartOuter) {
         const keyPercent = Math.round((keyTotal / chartTotal) * 100);
         if (chartElement.hasAttribute('data-currency')) {
             if (chartElement.getAttribute('data-currency') == 'GBP') {
-                // @ts-ignore
+                // @ts-expect-error Not sure
                 keyTotal = new Intl.NumberFormat('en-GB', {
                     style: 'currency',
                     currency: 'GBP',

package/assets/js/modules/chart.module.js

@@ -1,3 +1,4 @@
+import { ucfirst, unsnake } from './helpers.js';
 // #region Functions that setup and trigger other functions
 export const addClasses = (chartElement, chartOuter) => {
     // add colour classes
@@ -16,6 +17,10 @@ export const addClasses = (chartElement, chartOuter) => {
     return true;
 };
 export const setupChart = (chartElement, chartOuter, tableElement) => {
+    if (chartElement.tagName == 'IAM-DOUGHNUTCHART') {
+        setupDoughnutChart(chartElement, chartOuter, tableElement);
+        return true;
+    }
     // #region Reset the chart
     // empty divs to re-populate
     const chartKey = chartOuter.querySelector('.chart__key');
@@ -39,6 +44,21 @@ export const setupChart = (chartElement, chartOuter, tableElement) => {
     }
     return true;
 };
+export const setupDoughnutChart = (chartElement, chartOuter, tableElement) => {
+    // #region Reset the chart
+    // empty divs to re-populate
+    const chartKey = chartOuter.querySelector('.chart__key');
+    chartKey.innerHTML = '';
+    // Remove old input fields
+    Array.from(chartOuter.querySelectorAll(':scope > input[type="checkbox"],:scope > input[type="radio"]')).map((element) => {
+        element.remove();
+    });
+    // #endregion
+    setCellData(chartElement, tableElement);
+    createChartKey(chartOuter, tableElement, chartKey);
+    createdoughnuts(chartOuter);
+    return true;
+};
 // #endregion
 // #region Event handlers and observers
 export const setEventListener = function (chartElement, chartOuter) {
@@ -81,6 +101,9 @@ export const setEventListener = function (chartElement, chartOuter) {
         });
         shadowTable.innerHTML = table.innerHTML;
         setCellData(chartElement, shadowTable);
+        if (chartElement.tagName == 'IAM-DOUGHNUTCHART') {
+            createdoughnuts(chartOuter);
+        }
     });
 };
 export const setEventObservers = function (chartElement, chartOuter) {
@@ -116,6 +139,14 @@ export const setEventObservers = function (chartElement, chartOuter) {
     observer2.observe(chartElement, { attributes: true });
     return true;
 };
+function getCoordinatesForPercent(percent, doughnutCount) {
+    // This moves the start point to the top middle point like a clock
+    if (doughnutCount > 1)
+        percent = percent - 0.25;
+    const x = Math.cos(2 * Math.PI * percent);
+    const y = Math.sin(2 * Math.PI * percent);
+    return [x * 100, y * 100];
+}
 // #endregion
 // #region GET functions
 export const getChartData = function (chartElement) {
@@ -293,6 +324,7 @@ export const createChartKey = function (chartOuter, tableElement, chartKey) {
     return true;
 };
 function createChartKeyItem(chartID, index, text, chartKey, chartOuter, previousInput) {
+    var _a;
     const input = document.createElement('input');
     input.setAttribute('name', `${chartID}-dataset-${index}`);
     input.setAttribute('id', `${chartID}-dataset-${index}`);
@@ -310,12 +342,15 @@ function createChartKeyItem(chartID, index, text, chartKey, chartOuter, previous
     label.setAttribute('for', `${chartID}-dataset-${index}`);
     label.setAttribute('data-label', `${text}`);
     label.setAttribute('part', `key`);
+    const total = (_a = chartOuter.querySelector(`tbody tr td:nth-child(${index + 1})`)) === null || _a === void 0 ? void 0 : _a.getAttribute('data-numeric');
+    label.setAttribute('data-numeric', total);
     label.innerHTML = `${text}`;
     chartKey.append(label);
     return previousInput;
 }
 export const createChartGuidelines = function (chartElement, chartGuidelines) {
-    let { min, max, yaxis, guidelines } = getChartData(chartElement);
+    const { min, max, yaxis } = getChartData(chartElement);
+    let { guidelines } = getChartData(chartElement);
     if (!guidelines.length)
         guidelines = yaxis;
     chartGuidelines.innerHTML = '';
@@ -351,5 +386,77 @@ export const createTooltips = function (chartOuter) {
         //title.removeAttribute('title'); // TODO add a supports query for anchor positioning
     });
 };
+export const createdoughnuts = function (chartOuter) {
+    let returnString = '';
+    const chartInner = chartOuter.querySelector('.chart');
+    let doughnutWrapper = chartOuter.querySelector('.doughnuts');
+    if (!doughnutWrapper) {
+        doughnutWrapper = document.createElement('div');
+        doughnutWrapper.setAttribute('class', 'doughnuts');
+        chartInner.append(doughnutWrapper);
+    }
+    Array.from(chartInner.querySelectorAll('tbody tr')).forEach((item, index) => {
+        let paths = '';
+        let tooltips = '';
+        let cumulativePercent = 0;
+        let total = 0;
+        const titleKey = item.querySelectorAll('td')[0];
+        const title = titleKey.innerHTML;
+        let doughnutCount = 0;
+        const rowTotal = item.getAttribute('data-numeric');
+        // Work out the total amount
+        Array.from(item.querySelectorAll('td')).forEach((td, subindex) => {
+            const display = getComputedStyle(td).display;
+            if (subindex != 0 && display != 'none') {
+                let value = td.getAttribute('data-numeric');
+                value = value.replace('£', '');
+                value = value.replace('%', '');
+                value = value.replace(',', '');
+                value = Number.parseInt(value);
+                total += value;
+                doughnutCount++;
+            }
+        });
+        // Create the paths
+        Array.from(item.querySelectorAll('td')).forEach((td, subindex) => {
+            var _a, _b;
+            const display = getComputedStyle(td).display;
+            if (subindex != 0 && doughnutCount == 1 && display != 'none') {
+                const pathData = `M 0 0 L 100 0 A 100 100 0 1 1 100 -0.01 L 0 0`;
+                paths += `<path d="${pathData}" style="${td.getAttribute('style')} --path-index: ${subindex};"></path>`;
+                tooltips += `<span class="h5 mb-0" part="popover">${ucfirst(unsnake(td.getAttribute('data-label'))).trim()}<br/>${td.hasAttribute('data-second') ? `${td.getAttribute('data-second-label')}: ${td.getAttribute('data-second')}<br/>` : ''}${(_a = td.querySelector('[part="popover"]')) === null || _a === void 0 ? void 0 : _a.innerHTML}</span>`;
+            }
+            else if (subindex != 0) {
+                let value = td.getAttribute('data-numeric');
+                const hide = display == 'none' ? 'display: none;' : '';
+                value = value.replace('£', '');
+                value = value.replace('%', '');
+                value = value.replace(',', '');
+                value = Number.parseInt(value);
+                const percent = value / total;
+                const [startX, startY] = getCoordinatesForPercent(cumulativePercent, doughnutCount);
+                const [endX, endY] = getCoordinatesForPercent(cumulativePercent + percent, doughnutCount);
+                const largeArcFlag = percent > 0.5 ? 1 : 0; // if the slice is more than 50%, take the large arc (the long way around)
+                const pathData = [
+                    `M 0 0`,
+                    `L ${startX ? startX.toFixed(0) : 0} ${startY ? startY.toFixed(0) : 0}`, // Move
+                    `A 100 100 0 ${largeArcFlag} 1 ${endX ? endX.toFixed(0) : 0} ${endY ? endY.toFixed(0) : 0}`, // Arc
+                    `L 0 0`, // Line
+                ].join(' ');
+                paths += `<path d="${pathData}" style="${td.getAttribute('style')} --path-index: ${subindex};${hide}"></path>`;
+                tooltips += `<span class="h5 mb-0" part="popover">${ucfirst(unsnake(td.getAttribute('data-label'))).trim()}<br/>${td.hasAttribute('data-second') ? `${td.getAttribute('data-second-label')}: ${td.getAttribute('data-second')}<br/>` : ''}${(_b = td.querySelector('[part="popover"]')) === null || _b === void 0 ? void 0 : _b.innerHTML}</span>`;
+                // each slice starts where the last slice ended, so keep a cumulative percent
+                if (display != 'none')
+                    cumulativePercent += percent;
+            }
+        });
+        returnString += `<div class="doughnut">
+  <svg viewBox="-105 -105 210 210" preserveAspectRatio="none" style="--row-index: ${index + 1};">${paths}</svg>
+  <div class="doughnut__title" data-numeric="${rowTotal}"><span class="h5 mb-0">${title}</span></div>
+  <div class="tooltips">${tooltips}</div>
+</div>`;
+    });
+    doughnutWrapper.innerHTML = returnString;
+};
 // #endregion
 export default setupChart;

package/assets/js/modules/dialogs.js

@@ -1,6 +1,5 @@
-// @ts-nocheck
 const extendDialogs = (body) => {
-    Array.from(body.querySelectorAll('dialog[open]')).forEach((dialog, index) => {
+    Array.from(body.querySelectorAll('dialog[open]')).forEach((dialog) => {
         const parent = dialog.closest('.dialog__wrapper');
         if (!parent) {
             dialog.removeAttribute('open');
@@ -29,7 +28,7 @@ const extendDialogs = (body) => {
                 dialog.setAttribute('style', `max-width: ${firstWidth}px;`);
             }
             // When the modal is opened we want to make sure any duplicate checkboxes are matching the originals
-            Array.from(dialog.querySelectorAll('[data-duplicate]')).forEach((element, index) => {
+            Array.from(dialog.querySelectorAll('[data-duplicate]')).forEach((element) => {
                 const id = element.getAttribute('data-duplicate');
                 const originalInput = document.getElementById(id);
                 if (element.checked != originalInput.checked) {
@@ -50,7 +49,7 @@ const extendDialogs = (body) => {
             event.preventDefault();
             dialog.close();
             // Remove active class from exiting active buttons
-            Array.from(document.querySelectorAll('.dialog__wrapper > button')).forEach((btnElement, index) => {
+            Array.from(document.querySelectorAll('.dialog__wrapper > button')).forEach((btnElement) => {
                 btnElement.classList.remove('active');
             });
             const closeEvent = new CustomEvent('dialog-closed', {
@@ -69,7 +68,7 @@ const extendDialogs = (body) => {
         if (event && event.target instanceof HTMLElement && event.target.closest('button[formmethod="dialog"]')) {
             const dialog = event.target.closest('dialog[open]');
             // Remove active class from exiting active buttons
-            Array.from(document.querySelectorAll('.dialog__wrapper > button')).forEach((btnElement, index) => {
+            Array.from(document.querySelectorAll('.dialog__wrapper > button')).forEach((btnElement) => {
                 btnElement.classList.remove('active');
             });
             window.dataLayer = window.dataLayer || [];
@@ -120,7 +119,7 @@ const extendDialogs = (body) => {
                 }
             }
             // Remove active class from exiting active buttons
-            Array.from(document.querySelectorAll('.dialog__wrapper > button')).forEach((btnElement, index) => {
+            Array.from(document.querySelectorAll('.dialog__wrapper > button')).forEach((btnElement) => {
                 btnElement.removeAttribute('aria-expanded');
             });
             if (popover.hasAttribute('open')) {
@@ -171,7 +170,7 @@ const extendDialogs = (body) => {
             !event.target.closest('.dialog__wrapper > button')) {
             if (document.querySelector('.dialog__wrapper:not([data-keep-open]) > dialog[open]'))
                 document.querySelector('.dialog__wrapper:not([data-keep-open]) > dialog[open]').close();
-            Array.from(document.querySelectorAll('.dialog__wrapper:not([data-keep-open]) > button')).forEach((btnElement, index) => {
+            Array.from(document.querySelectorAll('.dialog__wrapper:not([data-keep-open]) > button')).forEach((btnElement) => {
                 btnElement.removeAttribute('aria-expanded');
             });
         }

package/assets/js/modules/drawer.js

@@ -1,5 +1,4 @@
-// @ts-nocheck
-const drawer = (element) => {
+const drawer = () => {
     const observer = new IntersectionObserver(function ([e]) {
         e.target.classList.toggle('in-view', e.intersectionRatio > 0);
         document.getElementById('showDrawer').checked = false;

package/assets/js/modules/dynamicEvents.js

@@ -1,4 +1,3 @@
-// @ts-nocheck
 // Create the event listeners
 const createDynamicEvents = () => {
     // Change event
@@ -26,7 +25,7 @@ const splitEvents = (element, events) => {
     if (!events)
         return false;
     // Split out each event
-    Array.from(JSON.parse(events)).forEach((event, index) => {
+    Array.from(JSON.parse(events)).forEach((event) => {
         checkConditions(element, event);
     });
 };
@@ -62,7 +61,7 @@ const runEvent = (element, event, eventType) => {
             if (document.querySelector(event['target'])) {
                 const hideElement = document.querySelector(event['target']);
                 hideElement.classList.add('js-hide');
-                Array.from(hideElement.querySelectorAll('[data-required]')).forEach((input, index) => {
+                Array.from(hideElement.querySelectorAll('[data-required]')).forEach((input) => {
                     input.removeAttribute('required');
                 });
             }
@@ -71,7 +70,7 @@ const runEvent = (element, event, eventType) => {
             if (document.querySelector(event['target'])) {
                 const showElement = document.querySelector(event['target']);
                 showElement.classList.remove('js-hide');
-                Array.from(showElement.querySelectorAll('[data-required]')).forEach((input, index) => {
+                Array.from(showElement.querySelectorAll('[data-required]')).forEach((input) => {
                     if (!input.closest('.js-hide'))
                         input.setAttribute('required', 'true');
                 });
@@ -85,7 +84,7 @@ const runEvent = (element, event, eventType) => {
             document.querySelector(`${event['target']}`).dispatchEvent(theEvent);
             break;
         case 'setAttribute':
-            Array.from(document.querySelectorAll(`${event['target']}`)).forEach(function (element, index) {
+            Array.from(document.querySelectorAll(`${event['target']}`)).forEach(function (element) {
                 element.setAttribute(event['attribute'], event['value']);
             });
             break;
@@ -93,7 +92,7 @@ const runEvent = (element, event, eventType) => {
             document.querySelector(`${event['target']}`).focus();
             break;
         case 'removeAttribute':
-            Array.from(document.querySelectorAll(`${event['target']}`)).forEach(function (element, index) {
+            Array.from(document.querySelectorAll(`${event['target']}`)).forEach(function (element) {
                 element.removeAttribute(event['attribute']);
             });
             break;
@@ -118,7 +117,7 @@ const populateForm = function (element, event) {
     const form = document.querySelector(event['target']);
     if (!values)
         return false;
-    Object.keys(values).forEach((field, index) => {
+    Object.keys(values).forEach((field) => {
         if (document.getElementById(field) && document.getElementById(field).tagName == 'SPAN')
             document.getElementById(field).innerHTML = values[field];
         if (form.querySelector(`select[name="${field}"] [value="${values[field]}"]`)) {
@@ -127,7 +126,7 @@ const populateForm = function (element, event) {
                 form.querySelector(`select[name="${field}"]`).disabled = true;
         }
         else if (form.querySelector(`input[name="${field}"][type="radio"][value="${values[field]}"]`)) {
-            Array.from(form.querySelectorAll(`input[name="${field}"][type="radio"]`)).forEach(function (input, index) {
+            Array.from(form.querySelectorAll(`input[name="${field}"][type="radio"]`)).forEach(function (input) {
                 input.disabled = true;
             });
             form.querySelector(`input[name="${field}"][type="radio"][value="${values[field]}"]`).checked = true;

package/assets/js/modules/fileupload.js

@@ -1,4 +1,3 @@
-// @ts-nocheck
 function fileupload(fileupload, wrapper) {
     const filesWrapper = wrapper.querySelector('.files');
     const dropArea = wrapper.querySelector('.drop-area');
@@ -20,7 +19,6 @@ function fileupload(fileupload, wrapper) {
     };
     wrapper.addEventListener('click', (event) => {
         if (event && event.target instanceof HTMLElement && event.target.closest('.btn-primary')) {
-            const button = event.target.closest('.btn-primary');
             // If the input allows multiples then use the buffer clone input
             errorMsgExt.classList.remove('d-block');
             errorMsgSize.classList.remove('d-block');
@@ -41,10 +39,12 @@ function fileupload(fileupload, wrapper) {
             input.files = dt.files; // Assign the updates list
             const changeEvent = new Event('change');
             input.dispatchEvent(changeEvent);
+            const fileRemovedEvent = new CustomEvent('fileRemoved', { detail: { removedFile: button === null || button === void 0 ? void 0 : button.dataset.file } });
+            fileupload.dispatchEvent(fileRemovedEvent);
         }
     });
     // Buffer input change event
-    cloneInput.addEventListener('change', (event) => {
+    cloneInput.addEventListener('change', () => {
         if (input.hasAttribute('multiple')) {
             const filesArray = [...input.files, ...cloneInput.files];
             const fileNames = [];
@@ -70,16 +70,16 @@ function fileupload(fileupload, wrapper) {
         const changeEvent = new Event('change');
         input.dispatchEvent(changeEvent);
     });
-    cloneInput.addEventListener('dragenter', (event) => {
+    cloneInput.addEventListener('dragenter', () => {
         cloneInput.classList.add('focus');
     });
-    cloneInput.addEventListener('dragleave', (event) => {
+    cloneInput.addEventListener('dragleave', () => {
         cloneInput.classList.remove('focus');
     });
-    cloneInput.addEventListener('drop', (event) => {
+    cloneInput.addEventListener('drop', () => {
         cloneInput.classList.remove('focus');
     });
-    input.addEventListener('change', (event) => {
+    input.addEventListener('change', () => {
         if (input.files.length == 1) {
             const file = input.files[0];
             const size = file.size / 1000;

package/assets/js/modules/filterlist.js

@@ -1,22 +1,21 @@
-// @ts-nocheck
 function filterlist(list, input) {
     addFilterlistEventListeners(list, input);
 }
 function addFilterlistEventListeners(list, input) {
     let timer;
-    input.addEventListener('keyup', (event) => {
+    input.addEventListener('keyup', () => {
         clearTimeout(timer);
         timer = setTimeout(function () {
             filterTheList(list, input.value);
         }, 500);
     });
-    input.addEventListener('change', (event) => {
+    input.addEventListener('change', () => {
         clearTimeout(timer);
         filterTheList(list, input.value);
     });
 }
 export const filterTheList = function (list, searchTerm) {
-    Array.from(list.querySelectorAll(':scope > li')).forEach((item, index) => {
+    Array.from(list.querySelectorAll(':scope > li')).forEach((item) => {
         const content = item.textContent.toLowerCase();
         item.classList.add('d-none');
         if (content.includes(searchTerm.toLowerCase()))