mypgs 1.1.5 → 1.3.3

package/assets/javascript/components/_menu.js

@@ -1,92 +1,56 @@
-import { pgs_dropdown } from "./_dropdown";
+import { PGS_dropdown } from "./_dropdown";
+
+const API = new WeakMap();
 
 //= DROP DOWN MENU
-export function PGS_menu() {
+function PGS_menu_init(root = document) {
+
+    pgs(root).querySelectorAll('menu').forEach(MENU => {
+        if (API.has(MENU)) return;
 
-    pgs(document).querySelectorAll('menu-horizontal').forEach(MENU => {
+        MENU.querySelectorAll('li').forEach(li => {
+            const ul = li.querySelector("ul");
 
-        MENU.querySelectorAll('nav > ul > li.menu-item-has-children').forEach(li => {
-            if (li.querySelector("ul")) {
-                const ul = li.querySelector("ul");
+            if (ul) {
 
                 const button = document.createElement("button");
-                button.className = "icon-down";
                 button.type = "button";
                 button.innerHTML = "<span>&#9207;</span>";
+                pgs(button).add("menu-buttonIcon");
                 li.querySelector("a").insertAdjacentElement("afterend", button);
 
                 pgs(li).add("dropdown")
                 pgs(button).add("dropdown-button")
                 pgs(button).add("buttonNohover")
                 pgs(ul).add("dropdown-content")
-                pgs(ul).add("menu-vertical")
+
             }
         });
-    });
-
-    pgs(document).querySelectorAll('menu-vertical').forEach(MENU => {
-
-        MENU.querySelectorAll('.menu-item-has-children').forEach((li, index) => {
-            const ul = li.querySelector("ul");
-
-            if (!ul) return
 
-            const button = document.createElement("button");
-            button.className = "icon-down buttonIcon";
-            button.type = "button";
-
-            // ID unico per aria-controls
-            const submenuId = `vertical-submenu-${index}`;
-            ul.id = submenuId;
-
-            // Stato iniziale
-            pgs(button).add("buttonIcon")
-            button.setAttribute("aria-expanded", "false");
-            button.setAttribute("aria-controls", submenuId);
-            button.setAttribute("aria-label", "Apri sottomenu");
-            button.innerHTML = "<span aria-hidden='true'>&#9207;</span>";
-            li.querySelector("a").insertAdjacentElement("afterend", button);
-
-            function toggleMenu() {
-                // const isOpena = ul.classList.toggle("open");
-                const isOpen = pgs(ul).state.toggle("open");
-                button.setAttribute("aria-expanded", isOpen);
-                button.setAttribute("aria-label", isOpen ? "Chiudi sottomenu" : "Apri sottomenu");
-            };
-
-            // Click
-            button.addEventListener("click", toggleMenu);
-            button.addEventListener("keydown", (e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                    e.preventDefault();
-                    toggleMenu();
-                }
-            });
+        API.set(MENU, {
+            element: MENU,
+            type: "horizontal",
+            // items: () => Array.from(MENU.querySelectorAll('nav > ul > li')),
+            // submenus: () => Array.from(MENU.querySelectorAll('.menu-item-has-children > ul')),
+            // dropdowns: () => Array.from(MENU.querySelectorAll('.menu-item-has-children')).map(PGS_dropdown_api).filter(Boolean),
+            refresh: () => {
+                PGS_menu_init(MENU.parentNode || document);
+                return API.get(MENU);
+            },
         });
+        PGS_dropdown.init(MENU);
+    });
 
-        // pgs(document).querySelectorAll('menu-vertical').forEach(MENU => {
-
-        //     MENU.querySelectorAll('.menu-item-has-children').forEach(li => {
-        //         if (li.querySelector("ul")) {
-        //             const ul = li.querySelector("ul");
-
-        //             const button = document.createElement("button");
-        //             button.className = "icon-down";
-        //             button.type = "button";
-        //             button.innerHTML = "<span>&#9207;</span>";
-        //             li.querySelector("a").insertAdjacentElement("afterend", button);
+}
 
+PGS_menu_init()
 
-        //             pgs(button).add("buttonIcon")
-        //             button.addEventListener("click", () => {
-        //                 ul.classList.toggle("open")
-        //             })
-        //         }
-        //     });
-        // });
-    });
-    pgs_dropdown()
+function PGS_menu_api(selector) {
+    return API.get(selector);
 }
 
-//# INIT PGS_menu
-PGS_menu()
+//# EXPORT
+export const PGS_menu = {
+    init: PGS_menu_init,
+    api: PGS_menu_api
+};

package/assets/javascript/components/_modals.js

@@ -1,7 +1,9 @@
 //# MODAL
-PGS_modal()
-export function PGS_modal(selector = "modal") {
+const API = new WeakMap();
+
+export function PGS_modal_init(selector = "modal") {
     pgs(document).querySelectorAll(selector).forEach(MODAL => {
+        if (API.has(MODAL)) return;
 
         const BUTTON_OPEN = pgs(MODAL).querySelector("modal-button");        
         const DIALOG = MODAL.querySelector("dialog");
@@ -54,9 +56,14 @@ export function PGS_modal(selector = "modal") {
         //+ FN OPEN 
         function openModal(e) {
             e?.stopImmediatePropagation();
+            if (DIALOG.open) {
+                closeModal(e);
+                return;
+            }
+
             if (!DIALOG.open) document.querySelectorAll("dialog[open]").forEach((dlg) => dlg.close());
             statusModal(true);
-            DIALOG.open ? closeModal(e) : topLevel ? DIALOG.showModal() : DIALOG.show();
+            topLevel ? DIALOG.showModal() : DIALOG.show();
             // modalCustomEvents('modal:open', { event: e });
             MODAL.dispatchEvent(new CustomEvent('modal:open'));
             DIALOG.dispatchEvent(new CustomEvent('modal:open'));
@@ -72,6 +79,14 @@ export function PGS_modal(selector = "modal") {
             DIALOG.dispatchEvent(new CustomEvent('modal:close'));
         }
 
+        function forceOpen(e) {
+            if (!DIALOG.open) openModal(e);
+        }
+
+        function forceClose(e) {
+            if (DIALOG.open) closeModal(e);
+        }
+
         //+ fn OPEN ON HISTORY
         function openModalOnHistory() {
             const params = new URLSearchParams(window.location.search);
@@ -117,7 +132,33 @@ export function PGS_modal(selector = "modal") {
                 } catch (_) { }
             });
         }
+
+        API.set(MODAL, {
+            element: MODAL,
+            button: BUTTON_OPEN,
+            dialog: DIALOG,
+            closeButton: BUTTON_CLOSE,
+            open: forceOpen,
+            close: forceClose,
+            toggle: openModal,
+            refresh: () => {
+                PGS_modal_init(selector);
+                return API.get(MODAL);
+            },
+            isOpen: () => DIALOG.open,
+        });
     });
 }
 
 //# INIT PGS_modal
+PGS_modal_init()
+
+//# API
+export function PGS_modal_api(selector) {
+    return API.get(selector);
+}
+
+export const PGS_modal = {
+    init: PGS_modal_init,
+    api: PGS_modal_api
+};

package/assets/javascript/components/_notifications.js

@@ -0,0 +1,162 @@
+//= PGS_notification
+const fn_notification = {
+    _escapeHtml(value) {
+        return String(value ?? "");
+    },
+
+    _getDuration(notification) {
+        const rawDuration = notification.duration;
+        const duration = Number.parseInt(rawDuration, 10);
+
+        return Number.isNaN(duration) ? 5000 : duration;
+    },
+
+    _getApi(notification) {
+        const element = String(notification.element || "notification").trim();
+
+        return element === "toast" ? PGS_notification.toast : PGS_notification.alert;
+    },
+
+    _getType(notification, api) {
+        const type = String(notification.type || "info").trim();
+
+        return typeof api[type] === "function" ? type : "info";
+    },
+
+    _getData(root) {
+        try {
+            return JSON.parse(root.dataset.notification || "{}");
+        } catch (error) {
+            console.warn("PGS notification: dati non validi", error);
+            return {};
+        }
+    },
+
+    _getContent(title, content) {
+        const safeContent = this._escapeHtml(content);
+        const safeTitle = this._escapeHtml(title);
+
+        if (!safeTitle) return safeContent;
+        if (!safeContent) return `<span pgs="notification-element-title">${safeTitle}</span>`;
+
+        return `
+            <span pgs="notification-element-title">${safeTitle}</span>
+            <br>
+            <span pgs="notification-element-content">${safeContent}</span>
+        `;
+    },
+
+    initNotification(type, containerToken, icon, text, timeout, methodDelete = "replace", link = null) {
+        let containerNotification = pgs(document).querySelector(containerToken);
+
+        //== Create Container
+        if (!containerNotification) {
+            const newContainer = document.createElement("div");
+            pgs(newContainer).add(containerToken);
+            newContainer.setAttribute("aria-live", "polite");
+            newContainer.setAttribute("aria-relevant", "additions");
+            document.body.appendChild(newContainer);
+            containerNotification = newContainer;
+        }
+
+        //== Create Notification
+        const notification = document.createElement(link ? "a" : "div");
+        if (methodDelete == "replace") containerNotification.innerHTML = "";
+        if (link) notification.href = link;
+        if (timeout > 0) notification.style.setProperty("--notification-timeout", timeout + "ms");
+        pgs(notification).state.add(type);
+        pgs(notification).add("notification-element");
+        notification.setAttribute("role", type == "error" ? "alert" : "status")
+        notification.innerHTML = `${icon} <p>${text}</p>`;
+        containerNotification.appendChild(notification);
+
+
+        //+ Animation delete 
+        function deleteNotification() {
+            methodDelete == "stack" ? notification.style.translate = "120%" : notification.style.opacity = "0";
+            setTimeout(() => notification.remove(), 300);
+        }
+
+        //== Timeout delete
+        if (timeout > 0) setTimeout(() => { deleteNotification() }, timeout);
+
+        //== button delete
+        const btnDelete = document.createElement("button");
+        btnDelete.type = "button";
+        btnDelete.ariaLabel = "Rimuovi notifica";
+        btnDelete.innerHTML = '<i class="fa-solid fa-xmark"></i>';
+        btnDelete.setAttribute("pgs", "buttonClose");
+        notification.insertAdjacentElement("afterbegin", btnDelete);
+
+        //== event
+
+        btnDelete.addEventListener("click", function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            e.stopImmediatePropagation()
+            deleteNotification(e); // Esegue la tua funzione
+        });
+    },
+
+    deleteAll(containerToken) {
+        let containerNotification = pgs(document).querySelector(containerToken);
+        if (containerNotification) containerNotification.innerHTML = "";
+    },
+
+    trigger(root = document) {
+        pgs(root).querySelectorAll("notificationTrigger").forEach(element => {
+            if (!element || element.dataset.initialize === "true") return;
+
+            element.dataset.initialize = "true";
+
+            const notification = this._getData(element);
+            const title = String(notification.title || "").trim();
+            const content = String(notification.message || "").trim();
+
+            if (!title && !content) {
+                element.remove();
+                return;
+            }
+
+            const link = notification.link || null;
+            const icon = notification.icon || undefined;
+            const duration = this._getDuration(notification);
+            const api = this._getApi(notification);
+            const type = this._getType(notification, api);
+            const formattedContent = this._getContent(title, content);
+
+            if (api === PGS_notification.toast) api[type](formattedContent, duration, icon);
+            else api[type](formattedContent, link, duration, icon);
+
+            element.remove();
+        });
+    }
+};
+
+//# EXPORT 
+export function PGS_notificationTrigger_init(root = document) {
+    return fn_notification.trigger(root);
+}
+
+export const PGS_notification = {
+    trigger: PGS_notificationTrigger_init,
+    alert: {
+        error: (text = "Errore", link = null, timeout = 0, icon = '<i class="fa-solid fa-circle-xmark"></i>') => fn_notification.initNotification("error", "notification", icon, text, timeout, "stack", link),
+        success: (text = "Aggiornato", link = null, timeout = 0, icon = '<i class="fa-solid fa-check"></i>') => fn_notification.initNotification("success", "notification", icon, text, timeout, "stack", link),
+        info: (text = "Aggiornamento", link = null, timeout = 0, icon = '<i class="fa-solid fa-circle-info"></i>',) => fn_notification.initNotification("info", "notification", icon, text, timeout, "stack", link),
+        warning: (text = "Attenzione", link = null, timeout = 0, icon = '<i class="fa-solid fa-triangle-exclamation"></i>') => fn_notification.initNotification("warning", "notification", icon, text, timeout, "stack", link),
+        deleteAll: () => fn_notification.deleteAll("notification")
+    },
+    toast: {
+        error: (text = "Errore", timeout = 4000, icon = '<i class="fa-solid fa-circle-xmark"></i>',) => fn_notification.initNotification("error", "toast", icon, text, timeout),
+        success: (text = "Aggiornato", timeout = 4000, icon = '<i class="fa-solid fa-check"></i>',) => fn_notification.initNotification("success", "toast", icon, text, timeout),
+        info: (text = "Aggiornamento", timeout = 0, icon = '<i class="fa-solid fa-circle-info"></i>',) => fn_notification.initNotification("info", "toast", icon, text, timeout),
+        warning: (text = "Attenzione", timeout = 4000, icon = '<i class="fa-solid fa-triangle-exclamation"></i>',) => fn_notification.initNotification("warning", "toast", icon, text, timeout),
+        deleteAll: () => fn_notification.deleteAll("toast")
+    }
+};
+
+
+//= EXECUTE 
+if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", () => PGS_notificationTrigger_init());
+else PGS_notificationTrigger_init();

package/assets/javascript/components/_slides.js

@@ -162,10 +162,13 @@ class PGS_Slides {
                 const last = children[children.length - 1];
                 return last?.classList.contains("view") || false;
             },
+            refresh: () => {
+                PGS_slides_init(this.selector.parentNode || document);
+                return API.get(this.selector);
+            },
         });
     }
 }
-PGS_slides_init();
 
 //# INIT 
 export function PGS_slides_init(root = document) {
@@ -177,7 +180,14 @@ export function PGS_slides_init(root = document) {
     });
 }
 
+PGS_slides_init();
+
 //# API 
 export function PGS_slides_api(selector) {
     return API.get(selector);
 }
+
+export const PGS_slides = {
+    init: PGS_slides_init,
+    api: PGS_slides_api
+};

package/assets/javascript/components/_stepTabs.js

@@ -1,8 +1,7 @@
 const API = new WeakMap();
-PGS_stepTabs()
 
-export function PGS_stepTabs() {
-    pgs(document).querySelectorAll("stepTabs").forEach(tabsWizard => {
+export function PGS_stepTabs_init(root = document) {
+    pgs(root).querySelectorAll("stepTabs").forEach(tabsWizard => {
         if (tabsWizard.dataset.stepTabsInitialized === "true") return;
         tabsWizard.dataset.stepTabsInitialized = "true";
 
@@ -117,21 +116,34 @@ export function PGS_stepTabs() {
         //-(API) 
         // tabsWizard.addEventListener("stepTabs:reset", () => restartTab());
         API.set(tabsWizard, {
+            element: tabsWizard,
+            container: tabsContainer,
             restart: restartTab,
             goTo,
             next: () => goTo(current + 1),
             prev: () => goTo(current - 1),
             toggleLock: (step, lock = true) => typeof step === "number" && allTab[step] && (pgs(allTab[step]).state.toggle("is-locked", lock), goTo(current)),
+            refresh: () => {
+                PGS_stepTabs_init(tabsWizard.parentNode || document);
+                return API.get(tabsWizard);
+            },
             getCurrent: () => current,
             getState: () => ({ current, total }),
         });
     });
 }
 
-export function PGS_tabs_api(selector) {
+PGS_stepTabs_init()
+
+export function PGS_stepTabs_api(selector) {
     return API.get(selector);
 }
 
+export const PGS_stepTabs = {
+    init: PGS_stepTabs_init,
+    api: PGS_stepTabs_api
+};
+
 /* 
     / EXAMPLE
     // vai allo step 2

package/assets/javascript/components/_steps.js

@@ -1,6 +1,8 @@
+const API = new WeakMap();
 
-export function PGS_ol() {
-    pgs(document).querySelectorAll("steps").forEach(steps => {
+export function PGS_steps_init(root = document) {
+    pgs(root).querySelectorAll("steps").forEach(steps => {
+        if (API.has(steps)) return;
 
         pgs(steps).querySelectorAll("steps-step").forEach((li, index) => {
             
@@ -16,12 +18,36 @@ export function PGS_ol() {
             }
             
             //= line
-            const line = document.createElement("span");
-            pgs(line).add("steps-step-line")
-            li.insertAdjacentElement("afterbegin", line);
+            if (!pgs(li).querySelector("steps-step-line")) {
+                const line = document.createElement("span");
+                pgs(line).add("steps-step-line")
+                li.insertAdjacentElement("afterbegin", line);
+            }
+        });
+
+        API.set(steps, {
+            element: steps,
+            steps: () => Array.from(pgs(steps).querySelectorAll("steps-step")),
+            getStep: (index) => pgs(steps).querySelectorAll("steps-step")[index],
+            getTotal: () => pgs(steps).querySelectorAll("steps-step").length,
+            refresh: () => {
+                API.delete(steps);
+                PGS_steps_init(steps.parentNode || document);
+                return API.get(steps);
+            },
         });
     });
 }
 
 //# INIT PGS_ol
-PGS_ol()
+PGS_steps_init()
+
+//# API
+export function PGS_steps_api(selector) {
+    return API.get(selector);
+}
+
+export const PGS_steps = {
+    init: PGS_steps_init,
+    api: PGS_steps_api
+};

package/assets/javascript/functions/_formValidate.js

@@ -1,4 +1,4 @@
-import { PGS_toast } from "../functions/_notifications.js";
+import { PGS_notification } from "../components/_notifications.js";
 
 
 export class PGS_formValidate {
@@ -15,8 +15,8 @@ export class PGS_formValidate {
 
         let message = field.getAttribute("data-form-field-message");
 
-        if (i == 0 && message) PGS_toast.error(message);
-        else if (i == 0) PGS_toast.error("Compila tutti i campi!");
+        if (i == 0 && message) PGS_notification.toast.error(message);
+        else if (i == 0) PGS_notification.toast.error("Compila tutti i campi!");
     }
 
     //+ REMOVE
@@ -202,7 +202,7 @@ export class PGS_formValidate {
     }
 
     ifSuccess(text = "Inviato con successo") {
-        if (this.validate() == true) PGS_toast.success(text)
+        if (this.validate() == true) PGS_notification.toast.success(text)
     }
 
     // + -------------------------
@@ -214,4 +214,3 @@ export class PGS_formValidate {
         return this;
     }
 }
-

package/assets/javascript/index.js

@@ -1,5 +1,6 @@
 //= PGS
-import "./_pgs.js";
+import { pgs } from "./_pgs.js";
+export { pgs } from "./_pgs.js";
 
 //= BASE
 import "./base/_darkmode.js";
@@ -8,13 +9,16 @@ import "./base/_object.js";
 //= CN 
 import "./components/_accordion.js";
 import "./components/_dropdown.js";
-import "./components/_exeNotifications.js";
 import "./components/_menu.js"
 import "./components/_modals.js";
 import "./components/_slides.js"
 import "./components/_steps.js";
 import "./components/_stepTabs.js";
+import "./components/_notifications.js";
 
-//= patterns 
+//= IMPORT REGISTRY
+import "./_imports.js";
+
+//= PATTERNS 
 import "./patterns/_header.js";
-import "./patterns/_cookieConsent.js";
+import "./patterns/_cookieConsent.js";

package/assets/javascript/patterns/_cookieConsent.js

@@ -96,7 +96,7 @@ function assignCookieRuntimeAttributes({ root, analyticsToggle, acceptAllButton,
 }
 
 //= CookieConsent
-document.addEventListener('DOMContentLoaded', function () {
+function initCookieConsent() {
     const root = pgs(document).querySelector('cookieConsent');
     if (!root) return;
 
@@ -206,4 +206,10 @@ document.addEventListener('DOMContentLoaded', function () {
     } else {
         setBannerVisibility(true);
     }
-});
+}
+
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initCookieConsent);
+} else {
+    initCookieConsent();
+}

package/assets/javascript/patterns/_header.js

@@ -4,7 +4,7 @@ const headerElements = pgs(header).querySelectorAll("header-element");
 headerElements.forEach(element => PGS_header(element));
 
 //= HEADER
-export function PGS_header(selectHeader) {
+function PGS_header(selectHeader) {
 
     //= INIT
     if (selectHeader.getAttribute("data-initialize") == "true") return;

package/assets/javascript/pgs.d.ts

@@ -31,7 +31,6 @@ declare global {
     value: string | null;
     state: PgsStateApi;
     option: PgsOptionApi;
-    modules: PgsOptionApi;
   }
 
   interface PgsDocumentApi extends PgsQueryableApi {
@@ -44,6 +43,20 @@ declare global {
     (root: Document): PgsDocumentApi;
     (root: Element): PgsElementApi;
     (root: Document | Element): PgsApi;
+    registerImport(...modules: unknown[]): PgsFunction;
+    registerModules(modules: Record<string, any>): PgsFunction;
+    import(...names: string[]): Record<string, any>;
+    accordion?: any;
+    dropdown?: any;
+    menu?: any;
+    modal?: any;
+    notification?: any;
+    slides?: any;
+    stepTabs?: any;
+    steps?: any;
+    formValidate?: any;
+    scrollHorizontal?: any;
+    [moduleName: string]: any;
   }
 
   interface PgsBag extends PgsElementApi {}
@@ -51,4 +64,6 @@ declare global {
   var pgs: PgsFunction;
 }
 
-export {};
+export function pgs(root: Document): PgsDocumentApi;
+export function pgs(root: Element): PgsElementApi;
+export function pgs(root: Document | Element): PgsApi;

package/assets/scss/base/_html.scss

@@ -1,4 +1,26 @@
 [pgs~="htmlBase"] {
     scroll-behavior: smooth;
     font-size: 62.5%;
-}
+
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    scroll-margin-top: calc(var(--heightOfHeader) + 5vh);
+
+    // Reset properties 
+    * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+        scroll-margin-top: calc(var(--heightOfHeader) + 5vh);
+    }
+
+    &:root,
+    :root {
+        interpolate-size: allow-keywords;
+    }
+
+    @view-transition {
+        navigation: auto;
+    }
+}