mypgs 1.3.4 → 1.3.6

package/AI_GUIDELINES.md

@@ -281,7 +281,7 @@ Avoid: rewriting the whole button.
   display: inline-flex;
   gap: 12px;
   padding: 14px 22px;
-  border-radius: 999px;
+  border-radius: 99px;
   background: #ff6161;
 }
 ```

package/assets/javascript/patterns/_header.js

@@ -1,107 +1,111 @@
 //# HEADER
 const header = pgs(document).querySelector("header");
-const headerElements = pgs(header).querySelectorAll("header-element");
-headerElements.forEach(element => PGS_header(element));
 
 //= HEADER
-function PGS_header(selectHeader) {
+function PGS_header(selectHeader = document) {
+    
+    if (!header) return;
 
-    //= INIT
-    if (selectHeader.getAttribute("data-initialize") == "true") return;
-    selectHeader.setAttribute("data-initialize", "true");
+    const headerElements = pgs(header).querySelectorAll("header-element");
+    
+    if (!headerElements.length) return;
 
-    //= ACTIVE MOBILE 
-    let menuAttivate = false;
-    let childsWidthSAVE;
+    headerElements.forEach(selectHeader => {
 
-    function mobileActive(headerElement) {
+        //== ACTIVE MOBILE 
+        let menuAttivate = false;
+        let childsWidthSAVE;
 
-        //=== header
-        let style = window.getComputedStyle(headerElement);
-        let padding = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
-        let gap = parseFloat(style.gap);
-        let headerElementWidth = parseInt(headerElement.offsetWidth - padding);
-        let childsWidth;
+        function mobileActive(headerElement) {
 
-        if (menuAttivate) {
-            childsWidth = childsWidthSAVE;
-        } else {
-            let childs = [];
-
-            // Esclude l'area mobile dedicata e l'hamburger, poi misura i figli sempre visibili su desktop.
-            Array.from(headerElement.children)
-                .filter(el => !pgs(el).contains("header-element-onlyMobile"))
-                .forEach(child => {
-                    if (pgs(child).contains("header-element-hamburger")) return;
-                    childs.push(...child.children);
-                });
+            //=== header
+            let style = window.getComputedStyle(headerElement);
+            let padding = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+            let gap = parseFloat(style.gap);
+            let headerElementWidth = parseInt(headerElement.offsetWidth - padding);
+            let childsWidth;
 
-            gap = Math.round(gap * (childs.length - 1));
-            let childsReduce = childs.reduce((totalWidth, child) => totalWidth + child.offsetWidth, 0) - 2;
+            if (menuAttivate) {
+                childsWidth = childsWidthSAVE;
+            } else {
+                let childs = [];
 
-            childsWidth = childsReduce + gap;
-        }
+                // Esclude l'area mobile dedicata e l'hamburger, poi misura i figli sempre visibili su desktop.
+                Array.from(headerElement.children)
+                    .filter(el => !pgs(el).contains("header-element-onlyMobile"))
+                    .forEach(child => {
+                        if (pgs(child).contains("header-element-hamburger")) return;
+                        childs.push(...child.children);
+                    });
 
-        //===set data
-        if (window.innerWidth < 600) {
-            header.setAttribute("data-header-mobileActive", "true");
-            selectHeader.setAttribute("data-header-mobileActive", "true");
-        } else if (headerElementWidth < childsWidth) {
-            header.setAttribute("data-header-mobileActive", "true");
-            headerElement.setAttribute("data-header-mobileActive", "true");
-            menuAttivate = true;
-            childsWidthSAVE = childsWidth;
-        } else {
-            header.setAttribute("data-header-mobileActive", "false");
-            headerElement.setAttribute("data-header-mobileActive", "false");
-        }
-    }
+                gap = Math.round(gap * (childs.length - 1));
+                let childsReduce = childs.reduce((totalWidth, child) => totalWidth + child.offsetWidth, 0) - 2;
 
-    //== observer (throttled to avoid ResizeObserver loop warnings)
-    let resizeRafId = 0;
-    const scheduleMobileActive = () => {
-        if (resizeRafId) return;
-        resizeRafId = requestAnimationFrame(() => {
-            resizeRafId = 0;
-            mobileActive(selectHeader);
-        });
-    };
+                childsWidth = childsReduce + gap;
+            }
 
-    let observer = new ResizeObserver(scheduleMobileActive);
-    observer.observe(selectHeader);
-    scheduleMobileActive();
+            //===set data
+            if (window.innerWidth < 600) {
+                pgs(header).state.add("mobileActive");
+                pgs(selectHeader).state.add("mobileActive");
+            } else if (headerElementWidth < childsWidth) {
+                pgs(header).state.add("mobileActive");
+                pgs(headerElement).state.add("mobileActive");
+                menuAttivate = true;
+                childsWidthSAVE = childsWidth;
+            } else {
+                pgs(header).state.remove("mobileActive");
+                pgs(headerElement).state.remove("mobileActive");
+            }
+        }
 
+        //== observer (throttled to avoid ResizeObserver loop warnings)
+        let resizeRafId = 0;
+        const scheduleMobileActive = () => {
+            if (resizeRafId) return;
+            resizeRafId = requestAnimationFrame(() => {
+                resizeRafId = 0;
+                mobileActive(selectHeader);
+            });
+        };
+
+        let observer = new ResizeObserver(scheduleMobileActive);
+        observer.observe(selectHeader);
+        scheduleMobileActive();
+    });
+
+    // Ripristina la posizione dell'header quando si esce dalla modalità mobile
+    window.addEventListener("resize", () => {
+        if (window.innerWidth > 768) header.style.transform = "translateY(0)";
+    });
 }
-
-
+PGS_header();
 
 
 //= HEADER HEIGHT
-const body = document.querySelector("body");
 function headerHeight() {
-    const headerElements = document.querySelectorAll("header > [data-initialize=true]");
+    if (!header) return;
     const wordPressBar = window.getComputedStyle(document.documentElement).marginTop ?? 0;
+    const headerHeight = header.offsetHeight
 
-    const totalHeight = Array.from(headerElements)
-        .map(el => el.offsetHeight)
-        .reduce((sum, h) => sum + h);
-
-    const height = totalHeight + parseInt(wordPressBar);
-
-    body.style.setProperty('--heightOfHeader', `${height}px`);
+    const body = document.querySelector("body");
+    const height = headerHeight + parseInt(wordPressBar);
     const scrollHeight = document.querySelector("header").getAttribute("data-header-scroll") === "true" ? 0 : height;
+    body.style.setProperty('--heightOfHeader', `${height}px`);
     body.style.setProperty('--heightOfHeaderScroll', `${scrollHeight}px`);
-
 }
 headerHeight()
 window.addEventListener("resize", headerHeight);
 window.addEventListener("scroll", headerHeight);
 
 
+
+
 //= SCROLL
 // Nasconde l'header quando si scorre verso il basso e lo mostra quando si scorre verso l'alto su dispositivi con larghezza fino a 900px.
 let lastScrollY = window.scrollY;
 window.addEventListener("scroll", () => {
+    if (!header) return;
     let currentScrollY = window.scrollY;
 
     if (window.innerHeight <= 900) {
@@ -122,13 +126,7 @@ window.addEventListener("scroll", () => {
 
 });
 
-// Ripristina la posizione dell'header quando si esce dalla modalità mobile
-window.addEventListener("resize", () => {
-    if (window.innerWidth > 768) header.style.transform = "translateY(0)";
-});
 
-// MOBILE ACTIVE
-if (window.innerWidth < 600) {
-    document.querySelector("header").setAttribute("data-header-mobileActive", "true");
-    document.querySelector("[pgs~=header-element]").setAttribute("data-header-mobileActive", "true");
-}
+
+
+

package/assets/scss/base/_body.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 //== BASE
 [pgs~="bodyBase"] {
     background-color: var(--color-background);

package/assets/scss/base/_color.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 //= COLOR
 //== LIGHTMODE & DARKMODE
 :root {

package/assets/scss/base/_general.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 //# GENERAL
 [pgs~=initP] {
 

package/assets/scss/base/_heading.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 //# HEADING
 [pgs~=initP] {
     [pgs~=h1] {

package/assets/scss/base/_variables.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 //+ MIXIN
 // = SETTINGS 
 :root {

package/assets/scss/components/_accordion.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 //# ACCORDION
 [pgs~=accordion] {
     padding: 0 !important;

package/assets/scss/components/_button.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 //# BUTTON
 [pgs~=button] {
     @include button()

package/assets/scss/components/_form.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 //# FORM
 [pgs~=textarea] {
     @include textarea();

package/assets/scss/components/_logo.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 //# LOGO 
 [pgs~="logo"] {
     display: flex;

package/assets/scss/components/_menu.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 //# MENU
 [pgs~=menu] {
     ul {

package/assets/scss/components/_modals.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 html:has(dialog[open]) {
     overflow: hidden;
     position: relative;

package/assets/scss/components/_notification.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 //= NOTIFICATION GROUP / TRIGGER
 [pgs~="notificationTrigger"] {}
 

package/assets/scss/components/_searchbar.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 //= SEARCH BAR
 [pgs~="searchbar"] {
     position: relative;

package/assets/scss/components/_slides.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 [pgs~="slides"] {
     display: flex;
     flex-direction: column;

package/assets/scss/components/_stepTabs.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 [pgs~=stepTabs] {
     [pgs~=stepTabs-container] {
         [pgs~=tab] {

package/assets/scss/components/_steps.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 ol[pgs~="steps"] {
     color: var(--color-black);
 

package/assets/scss/index.scss

@@ -1,16 +1,16 @@
-//+ MIXIN
-@import "./mixin/mixin.scss";
+@use "sass:meta";
+@use "./mixin/mixin" as *;
 /*
 |--------------------------------------------------------------------------
 | Base
 |--------------------------------------------------------------------------
 */
-@import "base/variables";
-@import "base/color";
-@import "base/html";
-@import "base/body";
-@import "base/heading";
-@import "base/general";
+@include meta.load-css("base/variables");
+@include meta.load-css("base/color");
+@include meta.load-css("base/html");
+@include meta.load-css("base/body");
+@include meta.load-css("base/heading");
+@include meta.load-css("base/general");
 
 /*
 |--------------------------------------------------------------------------
@@ -18,11 +18,11 @@
 |--------------------------------------------------------------------------
 */
 [pgs~=initP] {
-    @import "layout/layout";
-    @import "layout/flex";
-    @import "layout/grid";
-    @import "layout/pageShell";
-    @import "layout/gap";
+    @include meta.load-css("layout/layout");
+    @include meta.load-css("layout/flex");
+    @include meta.load-css("layout/grid");
+    @include meta.load-css("layout/pageShell");
+    @include meta.load-css("layout/gap");
 }
 
 /*
@@ -31,21 +31,21 @@
 |--------------------------------------------------------------------------
 */
 [pgs~=initP] {
-    @import "components/button";
-    @import "components/form";
-    @import "components/menu";
-    @import "components/accordion";
-    @import "components/breadcumbs";
-    @import "components/dropdown";
-    @import "components/modals";
-    @import "components/slides";
-    @import "components/steps";
-    @import "components/table";
-    @import "components/stepTabs";
-    @import "components/notification";
-    @import "components/tooltip";
-    @import "components/searchbar";
-    @import "components/logo";
+    @include meta.load-css("components/button");
+    @include meta.load-css("components/form");
+    @include meta.load-css("components/menu");
+    @include meta.load-css("components/accordion");
+    @include meta.load-css("components/breadcumbs");
+    @include meta.load-css("components/dropdown");
+    @include meta.load-css("components/modals");
+    @include meta.load-css("components/slides");
+    @include meta.load-css("components/steps");
+    @include meta.load-css("components/table");
+    @include meta.load-css("components/stepTabs");
+    @include meta.load-css("components/notification");
+    @include meta.load-css("components/tooltip");
+    @include meta.load-css("components/searchbar");
+    @include meta.load-css("components/logo");
 }
 
 /*
@@ -54,7 +54,7 @@
 |--------------------------------------------------------------------------
 */
 [pgs~=initP] {
-    @import "patterns/header";
-    @import "patterns/footer";
-    @import "patterns/cookieConsent";
-}
+    @include meta.load-css("patterns/header");
+    @include meta.load-css("patterns/footer");
+    @include meta.load-css("patterns/cookieConsent");
+}

package/assets/scss/layout/_flex.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 
 //= FLEX 
 

package/assets/scss/layout/_grid.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 //== GRID
 @for $i from 1 through 10 {
     [pgs~=grid-#{$i}] {

package/assets/scss/layout/_layout.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 //# SEMANTIC
 [pgs~=main] {
     @include main;

package/assets/scss/layout/_pageShell.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 //# pageShell
 $aside-size: 400px;
 $content-size: 500px;

package/assets/scss/mixin/_mx-base.scss

@@ -1,3 +1,6 @@
+@use "settings" as *;
+@use "mx-responsive" as *;
+
 //= TEXTAREA
 @mixin textarea() {
     align-items: flex-start;
@@ -95,7 +98,7 @@
 
 
 @mixin h1(){
-    @include heading($h1,false);
+    @include heading($h1, false);
 }
 
 @mixin h2(){
@@ -123,4 +126,4 @@
     background-color: $color;
     -webkit-mask: $url center/contain no-repeat;
     mask: $url center/contain no-repeat;
-}
+}

package/assets/scss/mixin/_mx-card.scss

@@ -1,3 +1,7 @@
+@use "settings" as *;
+@use "mx-button" as *;
+@use "mx-responsive" as *;
+
 @mixin card-insideImg() {
     $cardImgPadding: calc(var(--card-padding) * -1);
     border-radius: var(--border-radius);
@@ -74,4 +78,4 @@
             --fa-secondary-color: var(--color-warning);
         }
     }
-}
+}

package/assets/scss/mixin/_mx-form-addon.scss

@@ -1,3 +1,6 @@
+@use "mx-button" as *;
+@use "mx-form" as *;
+
 //= checkboxBackground 
 @mixin checkboxBackground() {
     position: relative;
@@ -177,4 +180,4 @@
         outline: unset;
         --button-background: trasparent;
     }
-}
+}

package/assets/scss/mixin/_mx-form.scss

@@ -1,3 +1,6 @@
+@use "mx-base" as *;
+@use "mx-button" as *;
+
 //=FORM
 //== INPUT 
 @mixin input($padding: 15px) {
@@ -268,8 +271,8 @@
             &::after {
                 $size: 0.4rem;
                 content: "";
-                top: $size / 2;
-                left: $size / 2;
+                top: calc($size / 2);
+                left: calc($size / 2);
                 display: inline-block;
                 width: calc(var(--checkbox-size) - $size);
                 height: calc(var(--checkbox-size) - $size);
@@ -519,4 +522,4 @@
             }
         }
     }
-}
+}

package/assets/scss/mixin/_mx-responsive.scss

@@ -1,3 +1,5 @@
+@use "settings" as *;
+
 //= FLEX 
 //== column
 @mixin flexColumn() {
@@ -350,4 +352,4 @@
 //     * {
 //         outline: gray solid 0.1px
 //     }
-// }
+// }

package/assets/scss/mixin/_settings.scss

@@ -0,0 +1,31 @@
+//+ devices
+$watch: 315px;
+$mobile: 430px;
+$big-mobile: 615px;
+$tablet: 800px;
+$big-tablet: 900px;
+$laptop: 1100px;
+
+@use "sass:list";
+
+@function fibonacci($n) {
+    $sequence: 0 1;
+
+    @for $_ from 1 through $n {
+        $last: list.nth($sequence, list.length($sequence));
+        $previous: list.nth($sequence, list.length($sequence) - 1);
+        $new: $last + $previous;
+
+        $sequence: list.append($sequence, $new);
+    }
+
+    @return list.nth($sequence, list.length($sequence));
+}
+
+$base-fibonacci-size: 0.05rem;
+
+$h1: fibonacci(11) * $base-fibonacci-size; // 7.2rem
+$h2: fibonacci(10) * $base-fibonacci-size; // 4.45rem
+$h3: fibonacci(9) * $base-fibonacci-size;  // 2.75rem
+$h4: fibonacci(8) * $base-fibonacci-size;  // 1.7rem
+$h5: fibonacci(8) * $base-fibonacci-size;  // 1.7rem

package/assets/scss/mixin/mixin.scss

@@ -1,35 +1,11 @@
-//+ devices 
-$watch: 315px;
-$mobile: 430px;
-$big-mobile: 615px;
-$tablet: 800px;
-$big-tablet: 900px;
-$laptop: 1100px;
-
-@function fibonacci($n) {
-    $sequence: 0 1;
-    @for $_ from 1 through $n {
-        $new: nth($sequence, length($sequence)) + nth($sequence, length($sequence) - 1);
-        $sequence: append($sequence, $new);
-    }
-    @return nth($sequence, length($sequence));
-}
-
-$base-fibonacci-size: 0.05rem;
-$h1: fibonacci(11) * $base-fibonacci-size; // 7.12rem
-$h2: fibonacci(10) * $base-fibonacci-size; // 4.4rem
-$h3: fibonacci(9) * $base-fibonacci-size;  // 2.72rem
-$h4: fibonacci(8) * $base-fibonacci-size;  // 1.68rem
-$h5: fibonacci(8) * $base-fibonacci-size;  // 1.68rem
-
-//= IMPORT ADVANCED
-@import "mx-base";
-@import "mx-responsive";
-@import "mx-form";
-@import "mx-form-addon";
-@import "mx-button";
-@import "mx-color";
-@import "mx-semantic";
-@import "mx-card";
-
- 
+@forward "settings";
+@forward "mx-base";
+@forward "mx-responsive";
+@forward "mx-form";
+@forward "mx-form-addon";
+@forward "mx-button";
+@forward "mx-color";
+@forward "mx-semantic";
+@forward "mx-card";
+
+ 

package/assets/scss/patterns/_cookieConsent.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 [pgs~=cookieConsent] {
     --cookie-bg: var(--color-box);
     --cookie-color: var(--color-black);
@@ -82,7 +84,7 @@
 
         [pgs~=cookieConsent-panel-badge] {
             font-size: 1.35rem;
-            border-radius: 999px;
+            border-radius: 99px;
             padding: 0.25rem 0.75rem;
             background: var(--color-success-background);
             color: var(--color-success);

package/assets/scss/patterns/_footer.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 [pgs~="footer"] {
     --footer-color: var(--color-whiteFixed);
     --footer-background: var(--color-blackFixed);