@total_onion/onion-library 3.2.0 → 3.2.2

package/public/block-product-info-v3/product-info-v3.js

@@ -0,0 +1,7 @@
+export default function productinfov3Js(options = {}) {
+  const { block } = options;
+  try {
+  } catch (error) {
+    console.error(error);
+  }
+}

package/public/block-raw-html-v3/raw-html-v3.js

@@ -0,0 +1,7 @@
+export default function rawHtmlV3(options = {}) {
+  try {
+    const { block } = options;
+  } catch (error) {
+    console.error(error);
+  }
+}

package/public/block-responsive-table-v3/responsive-table-v3.css

@@ -0,0 +1,50 @@
+@layer base-styles {
+  .responsive-table-v3__wrapper {
+    display: grid;
+    grid-auto-flow: column;
+    grid-gap: calc(var(--global-inline-spacing) * var(--table-spacing-gap-desktop));
+    gap: calc(var(--global-inline-spacing) * var(--table-spacing-gap-desktop));
+    overflow: auto;
+  }
+  .responsive-table-v3__headings {
+    display: grid;
+    grid-auto-flow: column;
+    grid-column: 1/var(--headings);
+    grid-template-columns: subgrid;
+  }
+  .responsive-table-v3__heading {
+    grid-row: 1;
+    background-color: var(--background-column-headers);
+    padding: calc(5 / var(--design-reference) * var(--screen-width));
+  }
+  @media screen and (min-width: 768px) {
+    .responsive-table-v3__heading {
+      padding: calc(5 / var(--design-reference) * var(--screen-width));
+    }
+  }
+  @media screen and (min-width: 1024px) {
+    .responsive-table-v3__heading {
+      padding: calc(5 / var(--design-reference) * var(--screen-width));
+    }
+  }
+  .responsive-table-v3__item {
+    display: grid;
+    grid-auto-flow: column;
+    grid-column: 1/var(--headings);
+    grid-template-columns: subgrid;
+  }
+  .responsive-table-v3__item-value {
+    background-color: var(--background-colour-items);
+    padding: calc(5 / var(--design-reference) * var(--screen-width));
+  }
+  @media screen and (min-width: 768px) {
+    .responsive-table-v3__item-value {
+      padding: calc(5 / var(--design-reference) * var(--screen-width));
+    }
+  }
+  @media screen and (min-width: 1024px) {
+    .responsive-table-v3__item-value {
+      padding: calc(5 / var(--design-reference) * var(--screen-width));
+    }
+  }
+}

package/public/block-responsive-table-v3/responsive-table-v3.js

@@ -0,0 +1,7 @@
+export default function responsivetableJs(options = {}) {
+  try {
+    const { block } = options;
+  } catch (error) {
+    console.error(error);
+  }
+}

package/public/block-scrolling-banner-v3/scrolling-banner-v3.css

@@ -0,0 +1,93 @@
+@layer base-styles {
+  .scrolling-banner-v3 {
+    display: flex;
+    overflow-x: hidden;
+    flex-wrap: nowrap;
+  }
+  .scrolling-banner-v3__banner-container,
+  .scrolling-banner-v3 > .scrolling-banner-v3 {
+    overflow-x: hidden;
+    color: var(--banner-text-colour);
+    font-weight: var(--weight-extra-bold);
+    width: 100%;
+    display: flex;
+    flex-wrap: nowrap;
+    line-height: 1;
+    text-transform: uppercase;
+    height: auto;
+    z-index: 99;
+    place-self: var(--position);
+  }
+  .scrolling-banner-v3__wrapper {
+    display: grid;
+    grid-template: "main"/1fr;
+    width: 100%;
+    height: auto;
+  }
+  .scrolling-banner-v3__container {
+    width: auto;
+    display: flex;
+    justify-content: flex-start;
+    grid-area: main;
+    position: absolute;
+    left: 0;
+    height: auto;
+  }
+  .scrolling-banner-v3__inner {
+    width: auto;
+    height: auto;
+    overflow-y: hidden;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    align-self: flex-start;
+    white-space: nowrap;
+    font-size: calc(var(--text-size-mobile) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+  }
+  @media screen and (min-width: 768px) {
+    .scrolling-banner-v3__inner {
+      font-size: calc(var(--text-size-portrait) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+    }
+  }
+  @media screen and (min-width: 1024px) {
+    .scrolling-banner-v3__inner {
+      font-size: calc(var(--text-size-desktop) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+    }
+  }
+  .scrolling-banner-v3__separator {
+    margin: auto calc(25 / var(--design-reference) * var(--screen-width));
+    position: relative;
+    height: 0.3em;
+    width: 0.3em;
+    display: grid;
+  }
+  @media screen and (min-width: 768px) {
+    .scrolling-banner-v3__separator {
+      margin: auto calc(25 / var(--design-reference) * var(--screen-width));
+    }
+  }
+  @media screen and (min-width: 1024px) {
+    .scrolling-banner-v3__separator {
+      margin: auto calc(25 / var(--design-reference) * var(--screen-width));
+    }
+  }
+  .scrolling-banner-v3__separator::before {
+    content: "";
+    background-color: var(--banner-text-colour);
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    display: grid;
+    z-index: 1;
+    place-self: center;
+    border-radius: 50%;
+  }
+  .scrolling-banner-v3__separator--image {
+    width: 1.5em;
+    width: var(--separator-image-width, 1.5em);
+    height: auto;
+  }
+  .scrolling-banner-v3--text-shadow {
+    text-shadow: calc(var(--text-shadow-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--text-shadow-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--text-shadow-blur) / var(--desktop-design-reference) * var(--screen-width-static)) var(--text-shadow-colour);
+  }
+}

package/public/block-scrolling-banner-v3/scrolling-banner-v3.js

@@ -0,0 +1,118 @@
+export default function scrollingbannerv3Js(options = {}) {
+  try {
+    const { block } = options;
+    scrollingbannerJs(block);
+  } catch (error) {
+    console.error(error);
+  }
+}
+function scrollingbannerJs(block) {
+  if (!block) {
+    return;
+  }
+  const bannerElement = block.querySelector(".scrolling-banner-v3__banner-container") ?? block.querySelector(".scrolling-banner-v3");
+  if (!bannerElement) {
+    return;
+  }
+  const initializedBanners = /* @__PURE__ */ new WeakMap();
+  try {
+    if (!initializedBanners.has(bannerElement)) {
+      bannerInit(bannerElement, initializedBanners, block);
+    }
+    const wrapper = bannerElement.querySelector(
+      ".scrolling-banner-v3__wrapper"
+    );
+    if (window.ResizeObserver) {
+      const resizeObserver = new ResizeObserver(() => {
+        resetBanner(bannerElement, initializedBanners);
+        bannerInit(bannerElement, initializedBanners, block);
+      });
+      resizeObserver.observe(wrapper);
+    } else {
+      window.addEventListener("resize", () => {
+        resetBanner(bannerElement, initializedBanners);
+        bannerInit(bannerElement, initializedBanners, block);
+      });
+    }
+  } catch (error) {
+    console.error(error);
+  }
+}
+function bannerInit(bannerElement, initializedBanners, block) {
+  if (initializedBanners.has(bannerElement)) {
+    return;
+  }
+  const container = bannerElement.querySelector(
+    ".scrolling-banner-v3__container"
+  );
+  const wrapper = bannerElement.querySelector(
+    ".scrolling-banner-v3__wrapper"
+  );
+  const inner = bannerElement.querySelector(".scrolling-banner-v3__inner");
+  const speed = bannerElement.dataset.speed ?? 3;
+  const wrapperWidth = wrapper.clientWidth;
+  const innerContentWidth = inner.clientWidth;
+  if (innerContentWidth == 0) {
+    return;
+  }
+  const multiplier = Number(Math.round(wrapperWidth / innerContentWidth));
+  for (let index = 0; index < multiplier; index++) {
+    const newInner = inner.cloneNode(true);
+    newInner.classList.add("clone");
+    container.appendChild(newInner);
+  }
+  const containerHeight = inner.clientHeight;
+  wrapper.setAttribute("style", `min-height: ${containerHeight}px`);
+  const newTickerContainer = container.cloneNode(true);
+  newTickerContainer.classList.add("clone");
+  wrapper.appendChild(newTickerContainer);
+  const animation1 = [
+    { transform: "translateX(0%)" },
+    { transform: "translateX(-100%)" }
+  ];
+  const animation2 = [
+    { transform: "translateX(100%)" },
+    { transform: "translateX(0%)" }
+  ];
+  const bannerLength = Math.floor(container.getBoundingClientRect().width);
+  const singleBannerCycleTime = bannerLength * 100 / speed;
+  let timing = {
+    duration: singleBannerCycleTime,
+    iterations: Infinity,
+    fill: "both"
+  };
+  let timing2 = timing;
+  const containers = bannerElement.querySelectorAll(
+    ".scrolling-banner-v3__container"
+  );
+  containers[0].style.transform = "translateX(0%)";
+  containers[1].style.transform = "translateX(100%)";
+  containers[0].offsetWidth;
+  const anim1 = containers[0].animate(animation1, timing);
+  const anim2 = containers[1].animate(animation2, timing2);
+  initializedBanners.set(bannerElement, { anim1, anim2 });
+  function pauseAnimations() {
+    anim1.pause();
+    anim2.pause();
+  }
+  function resumeAnimations() {
+    anim1.play();
+    anim2.play();
+  }
+  if (bannerElement.querySelector("a")) {
+    block.addEventListener("mouseover", pauseAnimations);
+    block.addEventListener("mouseleave", resumeAnimations);
+  }
+}
+function resetBanner(bannerElement, initializedBanners) {
+  const data = initializedBanners.get(bannerElement);
+  if (data) {
+    data.anim1?.cancel();
+    data.anim2?.cancel();
+    initializedBanners.delete(bannerElement);
+  }
+  bannerElement.querySelectorAll(
+    ".scrolling-banner-v3__container.clone, .scrolling-banner-v3__inner.clone"
+  ).forEach((el) => el.remove());
+  bannerElement.querySelector(".scrolling-banner-v3__wrapper").removeAttribute("style");
+}

package/public/block-section-separator-v3/section-separator-v3.css

@@ -0,0 +1,43 @@
+@layer base-styles {
+  .section-separator-v3 {
+    display: grid;
+    display: var(--display-mobile, grid);
+  }
+  @media screen and (min-width: 768px) {
+    .section-separator-v3 {
+      display: grid;
+      display: var(--display-portrait, grid);
+    }
+  }
+  @media screen and (min-width: 1024px) {
+    .section-separator-v3 {
+      display: grid;
+      display: var(--display-desktop, grid);
+    }
+  }
+  .section-separator-v3__separator-image {
+    width: 100%;
+    position: absolute;
+    display: block;
+    translate: 0 -50%;
+    height: auto;
+    top: 0;
+  }
+  .section-separator-v3__secondary-image {
+    position: absolute;
+    place-self: center var(--horizontal-position);
+    translate: var(--horizontal-offset) var(--vertical-offset);
+    top: 0;
+    max-width: calc(var(--max-width-mobile) / var(--design-reference) * var(--screen-width));
+  }
+  @media screen and (min-width: 768px) {
+    .section-separator-v3__secondary-image {
+      max-width: calc(var(--max-width-portrait) / var(--design-reference) * var(--screen-width));
+    }
+  }
+  @media screen and (min-width: 768px) and (min-width: 1024px) {
+    .section-separator-v3__secondary-image {
+      max-width: calc(var(--max-width-desktop) / var(--design-reference) * var(--screen-width));
+    }
+  }
+}

package/public/block-section-separator-v3/section-separator-v3.js

@@ -0,0 +1,7 @@
+export default function sectionseparatorv3Js(options = {}) {
+  try {
+    const { block } = options;
+  } catch (error) {
+    console.error(error);
+  }
+}

package/public/block-single-column-container-v3/single-column-container-v3.css

@@ -0,0 +1,14 @@
+@layer base-styles {
+  .single-column-container-v3 {
+    display: grid;
+    grid-template: "main"/1fr;
+    place-items: center;
+    position: relative;
+  }
+  .single-column-container-v3__block-container {
+    display: grid;
+    grid-area: main;
+    z-index: 5;
+    width: 100%;
+  }
+}

package/public/block-single-column-container-v3/single-column-container-v3.js

@@ -0,0 +1,7 @@
+export default function singlecolumncontainerv3Js(options = {}) {
+  try {
+    const { block } = options;
+  } catch (error) {
+    console.error(error);
+  }
+}

package/public/block-single-responsive-image-v3/single-responsive-image-v3.css

@@ -0,0 +1,61 @@
+@layer base-styles {
+  .single-responsive-image-v3__picture {
+    margin: auto;
+    width: 100%;
+    width: var(--image-width-mobile, 100%);
+    height: 100%;
+    grid-area: main;
+    grid-area: var(--image-grid-area, main);
+    position: relative;
+    position: var(--image-position, relative);
+    translate: var(--image-offset-horiz) var(--image-offset-vert);
+    inset: 0;
+    min-height: 0;
+    display: flex;
+    z-index: var(--image-z-index);
+    border: calc(var(--image-border-width) / var(--desktop-design-reference) * var(--screen-width-static)) var(--image-border-style) var(--image-border-colour);
+  }
+  @media screen and (min-width: 768px) {
+    .single-responsive-image-v3__picture {
+      width: 100%;
+      width: var(--image-width-portrait, 100%);
+    }
+  }
+  @media screen and (min-width: 1024px) {
+    .single-responsive-image-v3__picture {
+      width: 100%;
+      width: var(--image-width, 100%);
+    }
+  }
+  .single-responsive-image-v3__image {
+    position: relative;
+    -o-object-fit: cover;
+    object-fit: cover;
+    -o-object-fit: var(--image-fit-style, cover);
+    object-fit: var(--image-fit-style, cover);
+    -o-object-position: var(--image-object-position-align);
+    object-position: var(--image-object-position-align);
+    opacity: 1;
+    opacity: var(--image-opacity, 1);
+    aspect-ratio: var(--image-aspect-ratio-mobile, var(--image-aspect-ratio-desktop));
+    border-radius: var(--image-border-radius);
+    min-height: calc(var(--image-min-height-mobile) - (0px - var(--cancel-header-height)));
+    min-height: calc(var(--image-min-height-mobile) - (var(--global-site-header-height, 0px) - var(--cancel-header-height)));
+  }
+  @media screen and (min-width: 768px) {
+    .single-responsive-image-v3__image {
+      aspect-ratio: var(--image-aspect-ratio-portrait);
+    }
+  }
+  @media screen and (min-width: 1024px) {
+    .single-responsive-image-v3__image {
+      aspect-ratio: var(--image-aspect-ratio-desktop);
+      min-height: calc(var(--image-min-height-desktop) - (0px - var(--cancel-header-height)));
+      min-height: calc(var(--image-min-height-desktop) - (var(--global-site-header-height, 0px) - var(--cancel-header-height)));
+    }
+  }
+  .single-responsive-image-v3 {
+    display: flex;
+    align-items: stretch;
+  }
+}

package/public/block-single-responsive-image-v3/single-responsive-image-v3.js

@@ -0,0 +1,7 @@
+export default function singleresponsiveimagev3Js(options = {}) {
+  try {
+    const { block } = options;
+  } catch (error) {
+    console.error(error);
+  }
+}

package/public/block-site-copyright-notice-v3/site-copyright-notice-v3.css

@@ -0,0 +1,20 @@
+@layer base-styles {
+  .site-copyright-notice-v3 {
+    color: black;
+    color: var(--site-copyright-notice-colour, black);
+    font-size: calc(14px / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+    font-size: calc(var(--site-copyright-font-size-mobile, 14px) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+  }
+  @media screen and (min-width: 768px) {
+    .site-copyright-notice-v3 {
+      font-size: calc(16px / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+      font-size: calc(var(--site-copyright-font-size-portrait, 16px) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+    }
+  }
+  @media screen and (min-width: 1024px) {
+    .site-copyright-notice-v3 {
+      font-size: calc(18px / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+      font-size: calc(var(--site-copyright-font-size-desktop, 18px) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+    }
+  }
+}

package/public/block-site-copyright-notice-v3/site-copyright-notice-v3.js

@@ -0,0 +1,44 @@
+export default function sitecopyrightnoticev3Js(options = {}) {
+  try {
+    customElements.define(
+      "site-copyright-notice-v3",
+      class extends HTMLElement {
+        static observedAttributes = ["data-copyright-text"];
+        constructor() {
+          super();
+          let template = document.querySelector(
+            "#site-copyright-notice-v3"
+          );
+          let templateContent = template.content;
+          this.appendChild(
+            document.importNode(templateContent, true)
+          );
+          this.classList.add("loaded");
+        }
+        connectedCallback() {
+          console.log("Custom element added to page.");
+          this.querySelector(
+            ".site-copyright-notice-v3__title"
+          ).innerText = this.dataset.copyrightText;
+        }
+        // disconnectedCallback() {
+        // 	console.log('Custom element removed from page.');
+        // }
+        // connectedMoveCallback() {
+        // 	console.log('Custom element moved with moveBefore()');
+        // }
+        // adoptedCallback() {
+        // 	console.log('Custom element moved to new page.');
+        // }
+        attributeChangedCallback(name, oldValue, newValue) {
+          console.log(`Attribute ${name} has changed.`);
+          this.querySelector(
+            ".site-copyright-notice-v3__title"
+          ).innerText = this.dataset.copyrightText;
+        }
+      }
+    );
+  } catch (error) {
+    console.error(error);
+  }
+}

package/public/block-site-logo-container-v3/site-logo-container-v3.css

@@ -0,0 +1,18 @@
+.site-logo-container-v3__site-logo {
+  margin: auto;
+  pointer-events: all;
+  max-width: calc(var(--site-logo-max-width-mobile) / var(--design-reference) * var(--screen-width));
+}
+@media screen and (min-width: 768px) {
+  .site-logo-container-v3__site-logo {
+    max-width: calc(var(--site-logo-max-width-portrait) / var(--design-reference) * var(--screen-width));
+  }
+}
+@media screen and (min-width: 1024px) {
+  .site-logo-container-v3__site-logo {
+    max-width: calc(var(--site-logo-max-width-desktop) / var(--design-reference) * var(--screen-width));
+  }
+}
+.site-logo-container-v3__site-logo-link {
+  display: flex;
+}

package/public/block-site-logo-container-v3/site-logo-container-v3.js

@@ -0,0 +1,7 @@
+export default function sitelogocontainerv3Js(options = {}) {
+  try {
+    const { block } = options;
+  } catch (error) {
+    console.error(error);
+  }
+}

package/public/block-site-title-and-tagline-v3/site-title-and-tagline-v3.css

@@ -0,0 +1,12 @@
+.site-title-and-tagline-v3 {
+  display: grid;
+  grid-template: "main"/1fr;
+  place-items: center;
+  text-align: center;
+}
+.site-title-and-tagline-v3__title {
+  font-weight: bold;
+}
+.site-title-and-tagline-v3__tagline {
+  font-weight: bold;
+}

package/public/block-site-title-and-tagline-v3/site-title-and-tagline-v3.js

@@ -0,0 +1,7 @@
+export default function sitetitleandtaglinev3Js(options = {}) {
+  try {
+    const { block } = options;
+  } catch (error) {
+    console.error(error);
+  }
+}

package/public/block-smash-balloon-social-media-v3/smash-balloon-social-media-v3.css

@@ -0,0 +1,25 @@
+.smash-balloon-social-media-v3 {
+  position: relative;
+  max-width: 100vw;
+}
+.smash-balloon-social-media-v3__instagram {
+  width: 100%;
+  position: relative;
+  pointer-events: all;
+}
+.smash-balloon-social-media-v3__instagram .sbi-owl-stage,
+.smash-balloon-social-media-v3__instagram .sbi-owl-item {
+  min-width: calc(190 / var(--desktop-design-reference) * var(--screen-width-static));
+}
+.smash-balloon-social-media-v3[data-marquee] .sbi-owl-stage {
+  transition: none !important;
+  animation: sbiScroll 30s linear infinite;
+}
+@keyframes sbiScroll {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    transform: translate3d(-50%, 0, 0);
+  }
+}

package/public/block-smash-balloon-social-media-v3/smash-balloon-social-media-v3.js

@@ -0,0 +1,8 @@
+export default function smashballoonsocialmediav3Js(options = {}) {
+  try {
+    const { block } = options;
+    if (!block) return;
+  } catch (error) {
+    console.error(error);
+  }
+}

package/public/block-social-networks-v3/social-networks-v3.css

@@ -0,0 +1,74 @@
+.social-networks-v3 {
+  display: flex;
+  gap: 10px;
+}
+.social-networks-v3 .component-social-networks-v3 {
+  display: flex;
+  width: 100%;
+  justify-content: var(--alignment-mobile);
+}
+@media screen and (min-width: 768px) {
+  .social-networks-v3 .component-social-networks-v3 {
+    justify-content: var(--alignment-portrait);
+  }
+}
+@media screen and (min-width: 1024px) {
+  .social-networks-v3 .component-social-networks-v3 {
+    justify-content: var(--alignment-desktop);
+  }
+}
+.social-networks-v3 .component-social-networks-v3__inner-container {
+  display: flex;
+  width: -moz-max-content;
+  width: max-content;
+  gap: calc(var(--gap-mobile) / var(--design-reference) * var(--screen-width));
+  flex-direction: var(--direction-mobile);
+}
+@media screen and (min-width: 768px) {
+  .social-networks-v3 .component-social-networks-v3__inner-container {
+    gap: calc(var(--gap-portrait) / var(--design-reference) * var(--screen-width));
+    flex-direction: var(--direction-portrait);
+  }
+}
+@media screen and (min-width: 1024px) {
+  .social-networks-v3 .component-social-networks-v3__inner-container {
+    gap: calc(var(--gap-desktop) / var(--design-reference) * var(--screen-width));
+    flex-direction: var(--direction-desktop);
+  }
+}
+.social-networks-v3 .component-social-networks-v3__image {
+  display: block;
+  width: calc(var(--width-mobile) / var(--design-reference) * var(--screen-width));
+  height: calc(var(--width-mobile) / var(--design-reference) * var(--screen-width));
+}
+@media screen and (min-width: 768px) {
+  .social-networks-v3 .component-social-networks-v3__image {
+    width: calc(var(--width-portrait) / var(--design-reference) * var(--screen-width));
+    height: calc(var(--width-portrait) / var(--design-reference) * var(--screen-width));
+  }
+}
+@media screen and (min-width: 1024px) {
+  .social-networks-v3 .component-social-networks-v3__image {
+    width: calc(var(--width-desktop) / var(--design-reference) * var(--screen-width));
+    height: calc(var(--width-desktop) / var(--design-reference) * var(--screen-width));
+  }
+}
+.social-networks-v3 .component-social-networks-v3__link-container {
+  display: flex;
+  align-items: center;
+  gap: calc(15 / var(--design-reference) * var(--screen-width));
+}
+.social-networks-v3 .component-social-networks-v3__image {
+  height: auto;
+  width: calc(var(--width-mobile) / var(--design-reference) * var(--screen-width));
+}
+@media screen and (min-width: 768px) {
+  .social-networks-v3 .component-social-networks-v3__image {
+    width: calc(var(--width-portrait) / var(--design-reference) * var(--screen-width));
+  }
+}
+@media screen and (min-width: 1024px) {
+  .social-networks-v3 .component-social-networks-v3__image {
+    width: calc(var(--width-desktop) / var(--design-reference) * var(--screen-width));
+  }
+}

package/public/block-social-networks-v3/social-networks-v3.js

@@ -0,0 +1,7 @@
+export default function socialnetworksv3Js(options = {}) {
+  try {
+    const { block } = options;
+  } catch (error) {
+    console.error(error);
+  }
+}