@newlogic-digital/ui 3.0.1 → 3.1.0

package/src/scripts/Utils/Functions/+.js

@@ -1,6 +1,6 @@
-export { default as bodyLoaded } from './bodyLoaded.js';
-import './dataValue.js';
-export { default as importScript } from './importScript.js';
-export { default as importStyle } from './importStyle.js';
-export { default as inView } from './inView.js';
-export { default as loadStimulus } from './loadStimulus.js';
+import './dataValue.js'
+export { default as fetchHandler } from './fetchHandler.js'
+export { default as importScript } from './importScript.js'
+export { default as importStyle } from './importStyle.js'
+export { default as inView } from './inView.js'
+export { default as loadStimulus } from './loadStimulus.js'

package/src/scripts/Utils/Functions/dataValue.js

@@ -1,49 +1,52 @@
 Element.prototype._addDataValue = function(key, value) {
-    key = `data-${key}`;
+    key = `data-${key}`
 
-    let attribute = this.getAttribute(key);
+    let attribute = this.getAttribute(key)
 
     if (attribute === null) {
-        this.setAttribute(key, value);
+        this.setAttribute(key, value)
     } else {
-        value = value.split(" ");
-        attribute = attribute.split(" ");
+        value = value.split(' ')
+        attribute = attribute.split(' ')
 
-        value.map(value => {
-            !attribute.includes(value) && attribute.push(value)
-        });
+        value.map(value => !attribute.includes(value) && attribute.push(value))
 
-        this.setAttribute(key, attribute.join(" "));
+        this.setAttribute(key, attribute.join(' '))
     }
 }
 
 Element.prototype._removeDataValue = function(key, value) {
-    let result = [];
+    const result = []
 
-    key = `data-${key}`;
+    key = `data-${key}`
 
-    let attribute = this.getAttribute(key);
+    const attribute = this.getAttribute(key)
 
-    if (attribute === null) {
-        return;
-    }
+    if (attribute === null) return
 
-    attribute.split(" ").map(attribute => {
-        !value.split(" ").includes(attribute) && result.push(attribute)
-    });
+    attribute.split(' ').map(attribute => !value.split(' ').includes(attribute) && result.push(attribute))
 
     if (result.length !== 0) {
-        this.setAttribute(key, result.join(" "));
+        this.setAttribute(key, result.join(' '))
     } else {
-        this.removeAttribute(key);
+        this.removeAttribute(key)
     }
 }
 
 Element.prototype._hasDataValue = function(key, value) {
-    key = `data-${key}`;
+    key = `data-${key}`
 
-    let attribute = this.getAttribute(key);
+    const attribute = this.getAttribute(key)
+
+    if (attribute === null) return false
+    return attribute.split(' ').includes(value)
+}
 
-    if (attribute === null) return false;
-    return attribute.split(" ").includes(value);
-}
+Element.prototype._getDataValue = function(key) {
+    key = `data-${key}`
+
+    const attribute = this.getAttribute(key)
+
+    if (attribute === null) return ''
+    return attribute
+}

package/src/scripts/Utils/Functions/importScript.js

@@ -1,19 +1,17 @@
-function importScript(url) {
+export default function importScript(url) {
     return new Promise((resolve, reject) => {
         if (document.querySelector(`script[src="${url}"]`) === null) {
-            const script = document.createElement('script');
+            const script = document.createElement('script')
 
-            script._importScript = new Promise((load, error) => {
-                script.src = url;
-                script.onload = () => {load(); resolve()};
-                script.onerror = () => {error(); reject()};
-            });
+            script._importScript = new Promise((resolve, reject) => {
+                script.src = url
+                script.onload = resolve
+                script.onerror = reject
+            }).then(resolve).catch(reject)
 
-            document.head.appendChild(script);
+            document.head.appendChild(script)
         } else {
-            document.querySelector(`script[src="${url}"]`)._importScript.then(resolve);
+            document.querySelector(`script[src="${url}"]`)._importScript.then(resolve)
         }
     })
 }
-
-export default importScript;

package/src/scripts/Utils/Functions/importStyle.js

@@ -1,5 +1,18 @@
-export default function importStyle (url) {
-    if (document.querySelector(`link[href="${url}"]`) === null) {
-        document.head.insertAdjacentHTML("beforeend", `<link rel="stylesheet" href="${url}" />`);
-    }
-}
+export default function importStyle(url) {
+    return new Promise((resolve, reject) => {
+        if (document.querySelector(`link[href="${url}"]`) === null) {
+            const style = document.createElement('link')
+
+            style._importStyle = new Promise((resolve, reject) => {
+                style.href = url
+                style.rel = 'stylesheet'
+                style.onload = resolve
+                style.onerror = reject
+            }).then(resolve).catch(reject)
+
+            document.head.prepend(style)
+        } else {
+            document.querySelector(`link[href="${url}"]`)._importStyle.then(resolve)
+        }
+    })
+}

package/src/scripts/Utils/Functions/inView.js

@@ -1,27 +1,25 @@
-export default function inView(element, callback, options) {
-    let inView = false;
+export default function inView(element, options) {
+    let inView = false
 
-    if (typeof IntersectionObserver === "undefined" && callback) {
-        callback();
-        return false;
-    }
+    return new Promise((resolve) => {
+        if (typeof IntersectionObserver === 'undefined') {
+            resolve()
+            return false
+        }
 
-    if (typeof options === "undefined") {
-        options = {};
-    }
+        if (typeof options === 'undefined') {
+            options = {}
+        }
 
-    if (typeof options.rootMargin === "undefined") {
-        options.rootMargin = "100px";
-    }
+        if (typeof options.rootMargin === 'undefined') {
+            options.rootMargin = '100px'
+        }
 
-    new IntersectionObserver(
-        entries => {
+        new IntersectionObserver(entries => {
             if (entries[0].isIntersecting && inView === false) {
-                inView = entries[0].isIntersecting;
-                if (callback) {
-                    callback()
-                }
+                inView = entries[0].isIntersecting
+                resolve()
             }
-        }, options
-    ).observe(element);
-}
+        }, options).observe(element)
+    })
+}

package/src/scripts/Utils/Functions/loadStimulus.js

@@ -1,37 +1,39 @@
-let dynamicControllers = ["ui-input", "ui-select", "ui-wsw", "c-cookieconsent", "c-form-cookieconsent"];
-let dynamicActions = [[`a[href^="#"]`, "click->lib#anchor"], [`.ui-btn`, "click->lib#ripple"]];
+const dynamicControllers = ['ui-input', 'ui-select', 'ui-text', 'ui-checkbox', 'ui-radio', 'c-cookieconsent', 'c-form-cookieconsent']
+const dynamicActions = [['.ui-btn', 'click->lib#ripple']]
+
+if (!('scrollBehavior' in document.documentElement.style)) {
+    dynamicActions.push(['a[href^="#"]', 'click->lib#anchor'])
+}
 
 function loadControllers(parent, selectors) {
     if (parent !== null) {
-        selectors.forEach((selector) => {
-            [...parent.getElementsByClassName(selector)].filter((element) => {
-                if (element.getAttribute("data-controller") === null) {
-                    element.setAttribute("data-controller", element.className.split(" ")[0]);
+        selectors.forEach(selector => {
+            [...parent.getElementsByClassName(selector)].forEach(element => {
+                if (element.getAttribute('data-controller') === null) {
+                    element.setAttribute('data-controller', selector)
                 }
-            });
-        });
+            })
+        })
     }
 }
 
 function loadActions(parent, selectors) {
     if (parent !== null) {
-        selectors.forEach((selector) => {
-            [...parent.querySelectorAll(selector[0])].filter((element) => {
-                let attribute = element.getAttribute("data-action");
+        selectors.forEach(selector => {
+            parent.querySelectorAll(selector[0]).forEach(element => {
+                const attribute = element.getAttribute('data-action')
 
                 if (attribute === null) {
-                    element.setAttribute("data-action", selector[1]);
+                    element.setAttribute('data-action', selector[1])
                 } else if (attribute.indexOf(selector[1]) === -1) {
-                    element.setAttribute("data-action", `${attribute} ${selector[1]}`);
+                    element.setAttribute('data-action', `${attribute} ${selector[1]}`)
                 }
-            });
-        });
+            })
+        })
     }
 }
 
-function loadStimulus(selector) {
-    loadControllers(selector, dynamicControllers);
-    loadActions(selector, dynamicActions);
+export default function loadStimulus(selector) {
+    loadControllers(selector, dynamicControllers)
+    loadActions(selector, dynamicActions)
 }
-
-export default loadStimulus;

package/src/scripts/Utils/cdn.js

@@ -1,5 +1,7 @@
 export default {
-    "recaptcha": "https://www.google.com/recaptcha/api.js?render={apikey}",
-    "seamless": "https://cdn.jsdelivr.net/npm/seamless-scroll-polyfill@1.2.3/dist/es5/seamless.min.js",
-    "pickr_css": "https://cdn.jsdelivr.net/npm/@simonwep/pickr@1.8.0/dist/themes/nano.min.css"
-}
+    recaptcha: 'https://www.google.com/recaptcha/enterprise.js?render={apikey}',
+    seamless: 'https://cdn.jsdelivr.net/npm/seamless-scroll-polyfill@2.1.6/lib/bundle.min.js',
+    pickr_css: 'https://cdn.jsdelivr.net/npm/@simonwep/pickr@1.8.0/dist/themes/nano.min.css',
+    tippy: 'https://cdn.jsdelivr.net/combine/npm/tippy.js@6.3.7/dist/tippy.css,npm/tippy.js@6.3.1/dist/svg-arrow.css,npm/tippy.js@6.3.7/themes/light-border.css,npm/tippy.js@6.3.7/animations/scale.css',
+    datepicker: 'https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/dist/css/datepicker.min.css'
+}

package/src/scripts/Utils/global.js

@@ -1,40 +1,17 @@
-if ('serviceWorker' in navigator && location.protocol === "https:") {
-    window.addEventListener('load', function () {
-        if (!document.documentElement.classList.contains("no-sw")) {
-            navigator.serviceWorker.register('/sw.js').catch(function (e) {
-                console.error('Error during service worker registration:', e);
-            });
+if ('serviceWorker' in navigator && location.protocol === 'https:') {
+    window.addEventListener('load', () => {
+        if (!document.documentElement.classList.contains('no-sw')) {
+            navigator.serviceWorker.register('/sw.js').catch(e => {
+                console.error('Error during service worker registration:', e)
+            })
         } else {
-            navigator.serviceWorker.getRegistrations().then(function (registrations) {
+            navigator.serviceWorker.getRegistrations().then(registrations => {
                 if (registrations.length > 0) {
-                    for (let registration of registrations) {
+                    for (const registration of registrations) {
                         registration.unregister()
                     }
                 }
-            });
+            })
         }
-    });
+    })
 }
-
-if (document.body.classList.contains("is-body-preload")) {
-    document.body.classList.remove("is-body-preload");
-    setTimeout(function () {
-        document.body.classList.add("is-body-loaded");
-    }, 300);
-}
-
-if (document.querySelector("[data-loadcss]") !== null) {
-    if (typeof document.fonts !== "undefined") {
-        document.fonts.ready.then(function () {
-            document.documentElement.classList.add("wf-active");
-        });
-
-        setTimeout(() => {
-            if (!document.documentElement.classList.contains("wf-active")) {
-                document.documentElement.classList.add("wf-active");
-            }
-        }, 500);
-    } else {
-        document.documentElement.classList.add("wf-active");
-    }
-}

package/src/scripts/main.js

@@ -1,6 +1,6 @@
-import "./Utils/global.js";
-import "./Libraries/+.js";
-import "./Layout/+.js";
-import "./Sections/+.js";
-import "./Components/+.js";
-import "./Ui/+.js";
+import './Utils/global.js'
+import './Libraries/+.js'
+import './Layout/+.js'
+import './Sections/+.js'
+import './Components/+.js'
+import './Ui/+.js'

package/src/styles/Components/CookieConsent.css

@@ -1,210 +1,71 @@
 .c-cookieconsent {
   position: fixed;
+  inset: 0;
   display: none;
-  z-index: 1;
-  color: rgb(var(--color-invert));
-  left: 1rem;
-  bottom: 1rem;
-  background-color: rgb(var(--color-default));
-  padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
-
-  @media (--media-400) {
-    display: block;
-    transform: translateY(100%);
-
-    &.is-animate {
-      &:before {
-        transform: translateX(-50%) translateY(0);
-      }
-    }
-
-    &.is-mobile-show {
-      &:before {
-        transform: translateY(125%) translateX(-50%);
-        opacity: 0;
-        z-index: -2;
-      }
-    }
-
-    &.is-background-light {
-      &:after {
-        background-color: rgb(var(--color-background));
-      }
-    }
-
-    &:after {
-      position: absolute;
-      inset: 0;
-      background-color: rgb(var(--color-default));
-      content: "";
-      z-index: -1;
-    }
-
-    &:before {
-      color: rgb(var(--color-invert));
-      font-size: 0.875rem;
-      height: 2.625rem;
-      display: block;
-      position: absolute;
-      background-color: rgb(var(--color-default));
-      left: 50%;
-      bottom: 100%;
-      content: attr(data-title);
-      line-height: 2.625rem;
-      padding: 0 1.5rem;
-      transform: translateY(125%) translateX(-50%);
-      white-space: nowrap;
-      cursor: pointer;
-      transition: var(--transition-opacity), var(--transition-transform);
-      margin-bottom: calc(0.625rem + env(safe-area-inset-bottom));
-      border-radius: var(--radius);
-    }
+  z-index: var(--z-50);
+  background-color: rgb(var(--color-dark) / 0.75);
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  @media print {
+    display: none !important;
   }
 
-  &.is-background-light {
-    color: rgb(var(--color-default));
-    background-color: rgb(var(--color-background));
-    box-shadow: 0 1px 3px 0 rgba(60, 64, 67, .3), 0 4px 8px 3px rgba(60, 64, 67, .15);
-  }
-
-  @media (--media-min-960) {
-    width: 40rem;
+  &:not(.is-animate) {
+    animation: 0.5s ease 0s forwards 1 fade-out;
   }
 
-  @media (--media-only-768) {
-    left: 50%;
-    width: 40rem;
-    margin-left: -20rem;
-    bottom: 0;
+  &.is-animate {
+    animation: 0.5s ease 0s backwards 1 fade-in;
   }
 
-  @media (--media-400) {
-    left: 0;
-    right: 0;
-    bottom: 0;
+  &:--state-active {
+    display: flex;
   }
 
-  &:not(.is-animate) {
-    @media (--media-min-768) {
-      animation: 0.5s ease 0s forwards 1 slideOutDown;
-    }
+  & .wrp {
+    max-width: 32rem;
+    width: calc(100% - 2rem);
+    border-radius: var(--radius);
+    padding: 2rem;
 
-    @media (--media-min-960) {
-      animation: 0.5s ease 0s forwards 1 fadeOutLeft;
-    }
+    @nest :--type-center& {
+      max-width: 26rem;
+      text-align: center;
 
-    @media (--media-400) {
-      &.is-mobile-show {
-        animation: 0.5s ease 0s forwards 1 slideOutDown;
+      & .ui-image {
+        margin-left: auto;
+        margin-right: auto;
       }
     }
-  }
-
-  &.is-animate {
-    @media (--media-min-768) {
-      animation: 0.5s ease 0s backwards 1 slideInUp;
-    }
 
-    @media (--media-min-960) {
-      animation: 0.5s ease 0s backwards 1 fadeInLeft;
-    }
+    & .wrp_c_head {
+      margin-bottom: 1rem;
 
-    @media (--media-400) {
-      &.is-mobile-show {
-        animation: 0.5s ease 0s forwards 1 slideInUp;
+      @media (--media-t) {
+        margin-bottom: 1.5rem;
       }
     }
-  }
 
-  &[data-state="active"] {
-    display: block;
-
-    @media (--media-400) {
-      max-width: 100%;
+    & .wrp_c_body {
+      & .ui-text {
+        --ui-text-size: 0.875rem;
+      }
     }
-  }
 
-  & .wrp {
-    & .wrp_c_options {
+    & .wrp_c_foot {
       display: flex;
-      margin-top: 1.5rem;
       align-items: center;
+      margin-top: 1.5rem;
 
-      @media (--media-400) {
-        justify-content: center;
-        flex-wrap: wrap;
-        flex-direction: column;
+      @media (--media-t) {
+        margin-top: 2rem;
       }
 
       & .ui-link {
-        margin-right: 1rem;
-
-        @media (--media-400) {
-          margin: 0 1rem 1rem;
-        }
-
-        & span {
-          display: block;
-
-          @media (--media-min-768) {
-            font-size: 0.75rem;
-          }
-
-          &:before {
-            border-color: rgb(var(--color-invert));
-
-            @nest .is-background-light& {
-              border-color: rgb(var(--color-default));
-            }
-          }
-        }
+        font-weight: var(--font-normal);
       }
-
-      & .ui-btn {
-
-        @media (--media-min-768) {
-          margin-left: auto;
-          padding: 0.625rem 0.75rem;
-        }
-
-        @media (--media-400) {
-          margin-top: 0.375rem;
-        }
-
-        &[data-lib-cookieconsent-approve] {
-          color: rgb(var(--color-success));
-        }
-
-        & span {
-          &:not(.icon-l) {
-            @media (--media-min-768) {
-              font-size: 0.75rem;
-            }
-          }
-
-          &.icon-l {
-            &:before {
-              font-size: 1rem;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  & p {
-    margin: 0;
-    font-size: 0.875rem;
-
-    @media (--media-min-768) {
-      font-size: 0.75rem;
-      line-height: 2;
-      padding-right: 1rem;
-    }
-
-    @media (--media-400) {
-      line-height: 1.75;
-      text-align: center;
     }
   }
-}
+}

package/src/styles/Components/Dialog/Default.css

@@ -2,7 +2,8 @@
   --c-dialog-py: 1rem;
   --c-dialog-px: 1.5rem;
   --c-dialog-offset-y: 2rem;
-  animation: 0.3s ease 0s backwards 1 fadeInDown;
+
+  animation: 0.3s ease 0s backwards 1 fade-in-down;
   position: relative;
   z-index: var(--z-30);
   display: flex;
@@ -16,31 +17,32 @@
   border-bottom: var(--c-dialog-offset-y) solid transparent;
   width: calc(100% - 2rem);
 
-  @nest [data-state*="hiding"] & {
-    animation: 0.3s ease 0s forwards 1 fadeOutUp;
+  @nest :--state-hiding & {
+    animation: 0.3s ease 0s forwards 1 fade-out-up;
   }
 
-  @media (--media-min-768) {
+  @media (--media-t) {
     --c-dialog-offset-y: 4rem;
+
     width: 100%;
     min-width: 18.75rem;
     max-width: 40rem;
   }
 
-  &[data-size="sm"] {
+  &:--size-sm {
     max-width: 31.25rem;
   }
 
-  &[data-size="base"] {
+  &:--size-base {
     max-width: none;
     width: auto;
   }
 
-  &[data-size="lg"] {
+  &:--size-lg {
     max-width: 80rem;
   }
 
-  &[data-type="scrollable"] {
+  &:--type-scrollable {
     height: 100%;
 
     & .wrp_dialog_body {
@@ -63,7 +65,7 @@
     flex-direction: column;
     max-height: 100%;
 
-    @media (--media-min-768) {
+    @media (--media-t) {
       --c-dialog-py: 1.25rem;
     }
   }
@@ -72,10 +74,5 @@
     position: absolute;
     right: 1rem;
     top: 1rem;
-    transition: var(--transition-opacity);
-
-    &:hover {
-      opacity: 0.8;
-    }
   }
-}
+}