@pushengineering/umg-web-components 2.0.0

package/dist/packages/web-components/components/header/header.js

@@ -0,0 +1,368 @@
+import "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as p } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
+import { LitElement as m } from "../../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
+import { customElement as u } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as i } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as h } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/state.js";
+import { query as g } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/query.js";
+import { queryAssignedElements as _ } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+import { classMap as y } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/class-map.js";
+import { styleMap as c } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/style-map.js";
+import { debounce as v } from "../../scripts/utilities/debounce.js";
+import { global as f } from "../../styles/global.js";
+import { settings as w } from "../../scripts/settings.js";
+import { mergeStyles as b } from "../../scripts/mergeStyles.js";
+import { css as H } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
+var x = Object.defineProperty, S = Object.getOwnPropertyDescriptor, r = (e, a, n, s) => {
+  for (var o = s > 1 ? void 0 : s ? S(a, n) : a, d = e.length - 1, l; d >= 0; d--)
+    (l = e[d]) && (o = (s ? l(a, n, o) : l(o)) || o);
+  return s && o && x(a, n, o), o;
+};
+const { prefix: k } = w;
+let t = class extends m {
+  constructor() {
+    super(...arguments), this.width = "page-width", this.paddingTop = "", this.paddingBottom = "", this.layout = "logo-left", this.logoHidden = !1, this.menuHidden = !1, this.socialsHidden = !1, this.signupHidden = !1, this.colorText = "", this.colorBg = "", this.sticky = !1, this.stickyHideOnScroll = !1, this.transparent = !1, this._transparentScrolling = !1, this._currentScrollPosition = 0, this._debouncedEventsHandler = v((e) => {
+      this._eventsHandler(e);
+    }, 100), this._eventsHandler = (e) => {
+      e.type === "scroll" && this._stickyScroll();
+    }, this._removeTransparency = () => {
+      (window.scrollY || document.documentElement.scrollTop) > 0 ? this._transparentScrolling = !0 : this._transparentScrolling = !1;
+    };
+  }
+  firstUpdated() {
+    this._resizeObserver = new ResizeObserver(() => this._initHeader()), this._resizeObserver.observe(this);
+  }
+  updated(e) {
+    super.updated(e), e.has("stickyHideOnScroll") && (this.stickyHideOnScroll ? window.addEventListener("scroll", this._debouncedEventsHandler) : (window.removeEventListener("scroll", this._debouncedEventsHandler), this.removeAttribute("scrolling-down"))), e.has("transparent") && (this.sticky && this.transparent ? window.addEventListener("scroll", this._removeTransparency) : (window.removeEventListener("scroll", this._removeTransparency), this._transparentScrolling = !1));
+  }
+  disconnectedCallback() {
+    this.sticky && this.transparent && window.removeEventListener("scroll", this._removeTransparency), this.sticky && this.stickyHideOnScroll && window.removeEventListener("scroll", this._debouncedEventsHandler), super.disconnectedCallback();
+  }
+  _initHeader() {
+    this._currentScrollPosition = window.scrollY || document.documentElement.scrollTop, this._headerOuterHeight = this.getBoundingClientRect().bottom;
+    const e = this.offsetHeight;
+    this.style.setProperty("--um-size-header-inner-height", `${e / 16}rem`), this.style.setProperty("--um-size-header-outer-height", `${this._headerOuterHeight / 16}rem`);
+    const a = new CustomEvent("header-details", {
+      detail: {
+        height: this._headerOuterHeight
+      },
+      bubbles: !0,
+      composed: !0
+    });
+    this.dispatchEvent(a);
+  }
+  _stickyScroll() {
+    const e = window.scrollY || document.documentElement.scrollTop;
+    this.stickyHideOnScroll ? this._headerOuterHeight && e <= this._headerOuterHeight ? this.removeAttribute("scrolling-down") : e > this._currentScrollPosition ? this.setAttribute("scrolling-down", "") : this.removeAttribute("scrolling-down") : this.removeAttribute("scrolling-down"), this._currentScrollPosition = e <= 0 ? 0 : e;
+  }
+  headerClasses() {
+    const e = {
+      "header--logo-hidden": this.logoHidden,
+      "header--menu-hidden": this.menuHidden,
+      "header--socials-hidden": this.socialsHidden,
+      "header--signup-hidden": this.signupHidden
+    };
+    return this.layout && (e["header--" + this.layout] = !0), e;
+  }
+  headerStyles() {
+    let e = {};
+    return this.paddingTop && (e = {
+      ...e,
+      "--um-space-header-padding-top": "var(--um-space-" + this.paddingTop + ")"
+    }), this.paddingBottom && (e = {
+      ...e,
+      "--um-space-header-padding-bottom": "var(--um-space-" + this.paddingBottom + ")"
+    }), this.colorText && (e = {
+      ...e,
+      "--um-color-section-text": this.colorText
+    }), this.colorBg && (e = {
+      ...e,
+      "--um-color-section-bg": this.colorBg
+    }), this.transparent && !this._transparentScrolling && (e = {
+      ...e,
+      "--um-color-section-bg": "0,0,0,0"
+    }), e;
+  }
+  headerInnerStyles() {
+    let e = {};
+    return this.width === "full-width" && (e = {
+      ...e,
+      "--um-size-page-width": "100%"
+    }), e;
+  }
+  render() {
+    return p`
+            <header>
+                <div
+                    part="header"
+                    class="header${y(this.headerClasses())}"
+                    style="${c(this.headerStyles())}"
+                    >
+                    <div
+                        class="header__inner"
+                        style="${c(this.headerInnerStyles())}"
+                        part="header-inner"
+                        >
+                        <div class="header__menu-drawer">
+                            <slot name="header-drawer"></slot>
+                        </div>
+                        <div class="header__logo">
+                            <slot name="logo"></slot>
+                        </div>
+                        <div class="header__menu">
+                            <slot name="menu"></slot>
+                        </div>
+                        <div class="header__actions">
+                            <div class="header__cart">
+                                <slot name="user"></slot>
+                            </div>
+                            <div class="header__socials">
+                                <slot name="socials"></slot>
+                            </div>
+                            <div class="header__signup">
+                                <slot name="signup"></slot>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </header>
+        `;
+  }
+};
+t.styles = b([
+  f,
+  H`
+            :host {
+                display:block;
+                position: relative;
+                z-index: 600;
+            }
+
+            /* Header */
+            .header {
+                color: rgba(var(--um-color-section-text, var(--um-color-base-text, 62,62,62)));
+                background-color: rgba(var(--um-color-section-bg, var(--um-color-base-bg, 246,246,246)));
+                transition: all var(--um-animation, 0.4s) ease;
+                overflow: hidden;
+            }
+            .header__inner {
+                display: flex;
+                align-items: center;
+                margin: 0 auto;
+                max-width: var(--um-size-page-width, 75rem);
+                transition: padding var(--um-animation, 0.4s) ease;
+            }
+            @media screen and (max-width: 48rem) {
+                .header {
+                    padding-top: calc(var(--um-space-header-padding-top, 1rem) * 0.5);
+                    padding-bottom: calc(var(--um-space-header-padding-bottom, 1rem) * 0.5);
+                }
+                .header__inner {
+                    gap: var(--um-space-24, 1rem);
+                    padding-left: calc(var(--um-space-header-padding-left, 1.5rem) * 0.5);
+                    padding-right: calc(var(--um-space-header-padding-right, 1.5rem) * 0.5);
+                }
+            }
+            @media screen and (min-width: 48.06rem) {
+                .header {
+                    padding-top: var(--um-space-header-padding-top, 1rem);
+                    padding-bottom: var(--um-space-header-padding-bottom, 1rem);
+                }
+                .header__inner {
+                    gap: var(--um-space-24, 1.5rem);
+                    padding-left: var(--um-space-header-padding-left, 1.5rem);
+                    padding-right: var(--um-space-header-padding-right, 1.5rem);
+                }
+            }
+
+            /* Sticky header */
+            :host([sticky]) {
+                position: sticky;
+                top: 0;
+                z-index: 1001;
+            }
+            :host([transparent]) {
+                position: absolute;
+                width: 100%;
+            }
+            :host([transparent][sticky]) {
+                position: fixed;
+                width: 100%;
+            }
+            :host([sticky][scrolling-down]) header {
+                transform: translateY(-100%)
+            }
+            header {
+                transition: all var(--um-animation, 0.4s) ease;
+            }
+
+            /* Header Contents */
+            .header .header__menu {
+                margin-right: auto;
+            }
+            .header__actions {
+                align-items: center;
+                display: flex;
+                gap: var(--um-space-32, 2rem);
+                margin-left: auto;
+            }
+            .header__signup {
+                white-space: nowrap;
+            }
+
+            /* Hidden header contents */
+            .header--logo-hidden .header__logo slot,
+            .header--menu-hidden .header__menu slot,
+            .header--socials-hidden .header__socials,
+            .header--signup-hidden .header__signup {
+                display: none;
+            }
+
+            /* Mobile header */
+            .header__menu-drawer {
+                display: block;
+            }
+
+            @media only screen and (min-width: 64.06rem) {
+                .header__menu-drawer {
+                    display: none;
+                }
+
+                /* Alternative header layouts */
+                /* Logo center */
+                .header--logo-center .header__menu {
+                    width: 100%;
+                }
+                .header--logo-center .header__logo {
+                    display: flex;
+                    order: 2;
+                    justify-content: center;
+                    width: 100%;
+                }
+                .header--logo-center .header__actions {
+                    justify-content: flex-end;
+                    order: 3;
+                    width: 100%;
+                }
+                .header--logo-center.header--menu-hidden .header__logo {
+                    width: 66.666%;
+                }
+
+                /* Nav center */
+                .header--nav-center .header__menu {
+                    display: flex;
+                    flex: 1;
+                    justify-content: center;
+                }
+                .header--nav-center .header__logo {
+                    margin-right: auto
+                }
+                .header--nav-center .header__actions {
+                    margin-left: auto
+                }
+                .header--nav-center .header__logo,
+                .header--nav-center .header__actions {
+                    flex: 1;
+                }
+                .header--nav-center .header__actions {
+                    display: flex;
+                    justify-content: flex-end;
+                }
+
+                /* Logo left Content right */
+                .header--content-right .header__menu {
+                    display: flex;
+                    flex: 1;
+                    justify-content: right;
+                }
+
+                .header--content-right .header__logo {
+                    margin-left: auto
+                }
+                .header--content-right.header--socials-hidden.header--signup-hidden .header__inner {
+                    padding-right: 0;
+                }
+            }
+            @media only screen and (max-width: 64rem) {
+                .header__menu,
+                .header__socials,
+                .header--nav-center .header__menu {
+                    display: none;
+                }
+                .header__menu-drawer {
+                    display: block;
+                    margin-right: auto;
+                    width: 100%;
+                }
+                .header__logo {
+                    display: flex;
+                    justify-content: center;
+                    width: 100%;
+                }
+                .header__actions {
+                    justify-content: flex-end;
+                    width: 100%;
+                }
+            }
+        `
+]);
+r([
+  i()
+], t.prototype, "width", 2);
+r([
+  i()
+], t.prototype, "paddingTop", 2);
+r([
+  i()
+], t.prototype, "paddingBottom", 2);
+r([
+  i({ type: String })
+], t.prototype, "layout", 2);
+r([
+  i({ type: Boolean })
+], t.prototype, "logoHidden", 2);
+r([
+  i({ type: Boolean })
+], t.prototype, "menuHidden", 2);
+r([
+  i({ type: Boolean })
+], t.prototype, "socialsHidden", 2);
+r([
+  i({ type: Boolean })
+], t.prototype, "signupHidden", 2);
+r([
+  i()
+], t.prototype, "colorText", 2);
+r([
+  i()
+], t.prototype, "colorBg", 2);
+r([
+  i({ type: Boolean })
+], t.prototype, "sticky", 2);
+r([
+  i({ type: Boolean })
+], t.prototype, "stickyHideOnScroll", 2);
+r([
+  i({ type: Boolean })
+], t.prototype, "transparent", 2);
+r([
+  h()
+], t.prototype, "_headerOuterHeight", 2);
+r([
+  h()
+], t.prototype, "_transparentScrolling", 2);
+r([
+  h()
+], t.prototype, "_currentScrollPosition", 2);
+r([
+  g(".header")
+], t.prototype, "_header", 2);
+r([
+  _({ slot: "menu" })
+], t.prototype, "_menu", 2);
+t = r([
+  u(`${k}-header`)
+], t);
+export {
+  t as Header
+};

package/dist/packages/web-components/components/header-drawer/header-drawer.js

@@ -0,0 +1,292 @@
+import "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as t } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
+import { LitElement as m } from "../../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
+import { customElement as d } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as n } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as p } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/state.js";
+import { query as h } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/query.js";
+import { styleMap as f } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/style-map.js";
+import { global as w } from "../../styles/global.js";
+import { settings as b } from "../../scripts/settings.js";
+import { mergeStyles as g } from "../../scripts/mergeStyles.js";
+import "../disclosure/disclosure.js";
+import "./menu-drawer.js";
+import "../icon/icon.js";
+import { css as y } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
+var v = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, a = (e, r, o, l) => {
+  for (var i = l > 1 ? void 0 : l ? _(r, o) : r, c = e.length - 1, u; c >= 0; c--)
+    (u = e[c]) && (i = (l ? u(r, o, i) : u(i)) || i);
+  return l && i && v(r, o, i), i;
+};
+const { prefix: x } = b;
+let s = class extends m {
+  constructor() {
+    super(...arguments), this.src = "", this.direction = "down", this._drawerOpen = !1;
+  }
+  async firstUpdated() {
+    this.data === void 0 && this.src && await this.fetchData();
+  }
+  async fetchData() {
+    this.data = await fetch(this.src).then((e) => e.json()), this.requestUpdate();
+  }
+  closeDrawer() {
+    this._drawerOpen = !1, this._drawer.closeDisclosure(), document.body.removeAttribute("style"), this._closeActiveDrawers();
+  }
+  _openDrawer() {
+    this._drawerOpen = !0, document.body.style.overflow = "hidden";
+  }
+  _closeDrawer() {
+    this._drawerOpen = !1, document.body.removeAttribute("style"), this._closeActiveDrawers();
+  }
+  _closeActiveDrawers() {
+    var e;
+    if (!this._drawerOpen) {
+      const r = (e = this.shadowRoot) == null ? void 0 : e.querySelectorAll("umg-menu-drawer");
+      r && r.length && r.forEach((o) => {
+        o.closeDrawer();
+      });
+    }
+  }
+  menuDrawerStyles() {
+    let e = {};
+    return this.colorText && (e = {
+      ...e,
+      "--um-color-menu-drawer-text": this.colorText
+    }), this.colorBg && (e = {
+      ...e,
+      "--um-color-menu-drawer-bg": this.colorBg,
+      "--um-color-disclosure-bg": "var(--um-color-menu-drawer-bg)"
+    }), e;
+  }
+  menuList() {
+    if (this.data)
+      return t`
+            <nav>
+                <ul class="menu__list" part="menu-list">
+                    ${this.data.map((e) => t`
+                        <li>
+                            ${e.subItems ? t`
+                                <umg-menu-drawer>
+                                    <span slot="summary">
+                                        ${e.linkText}
+                                    </span>
+                                    <span slot="summary-back">
+                                        ${e.linkText}
+                                    </span>
+                                    <ul slot="submenu" class="submenu">
+                                        ${e.subItems.map((r) => t`
+                                            <li>
+                                                ${r.subItems ? t`
+                                                    <umg-menu-drawer>
+                                                        <span slot="summary">
+                                                            ${r.linkText}
+                                                        </span>
+                                                        <span slot="summary-back">
+                                                            ${r.linkText}
+                                                        </span>
+                                                        <ul slot="submenu" class="submenu">
+                                                            ${r.subItems.map((o) => t`
+                                                                <li>
+                                                                    <a
+                                                                        class="submenu__link"
+                                                                        href="${o.linkUrl}"
+                                                                        @click=${this.closeDrawer}
+                                                                        part="submenu-link"
+                                                                        >
+                                                                        ${o.linkText}
+                                                                    </a>
+                                                                </li>
+                                                            `)}
+                                                        </ul>
+                                                    </umg-menu-drawer>
+                                                ` : t`
+                                                    <a
+                                                        class="submenu__link"
+                                                        href="${r.linkUrl}"
+                                                        @click=${this.closeDrawer}
+                                                        part="submenu-link"
+                                                        >
+                                                        ${r.linkText}
+                                                    </a>
+                                                `}
+                                            </li>
+                                        `)}
+                                    </ul>
+                                </umg-menu-drawer>
+                            ` : t`
+                                <a
+                                    class="submenu__link"
+                                    href="${e.linkUrl}"
+                                    @click=${this.closeDrawer}
+                                    part="submenu-link"
+                                    >
+                                    ${e.linkText}
+                                </a>
+                            `}
+                        </li>
+                    `)}
+                </ul>
+            </nav>
+        `;
+  }
+  render() {
+    return t`
+            <umg-disclosure
+                part="disclosure"
+                class="header-drawer"
+                style="${f(this.menuDrawerStyles())}"
+                direction=${this.direction}
+                overlay
+                exportparts="disclosure,disclosure-summary,disclosure-drawer,disclosure-content"
+                >
+                <span slot="icon">
+                    <umg-icon
+                        part="icon"
+                        class="icon icon--open"
+                        icon="bars"
+                        size="2xLarge"
+                        ?open=${this._drawerOpen}
+                        @click=${this._openDrawer}
+                        role="presentation"
+                        aria-hidden="true"
+                        focusable="false"
+                        >
+                    </umg-icon>
+                    <umg-icon
+                        part="icon"
+                        class="icon icon--close"
+                        icon="close"
+                        size="2xLarge"
+                        ?open=${this._drawerOpen}
+                        @click=${this._closeDrawer}
+                        role="presentation"
+                        aria-hidden="true"
+                        focusable="false"
+                        >
+                    </umg-icon>
+                </span>
+                <div slot="content" class="menu">
+                    <div
+                        part="menu-drawer"
+                        class="menu-drawer"
+                        >
+                        ${this.menuList()}
+                    </div>
+                    <div
+                        part="socials"
+                        class="socials"
+                    >
+                        <slot name="socials"></slot>
+                    </div>
+                </div>
+            </umg-disclosure>
+      `;
+  }
+};
+s.styles = g([
+  w,
+  y`
+            /* Burger button */
+            .icon--close {
+                display: none;
+            }
+            .icon[open].icon--close {
+                display: block;
+            }
+            .icon--open {
+                display: block;
+            }
+            .icon[open].icon--open {
+                display: none;
+            }
+
+            /* Header drawer */
+            .header-drawer {
+                position: initial;
+            }
+            .header-drawer::part(disclosure-drawer) {
+                top: var(--um-size-header-inner-height, 0);
+            }
+
+            /* Menu drawer */
+            .menu {
+                display: flex;
+                flex-direction: column;
+                height: calc(100svh - var(--um-size-header-outer-height));
+                font-family: var(--um-font-family-menu, inherit);
+                font-size: var(--um-font-size-menu, inherit);
+                letter-spacing: 0.05rem;
+            }
+            .menu-drawer {
+                flex: 1;
+                position: relative;
+                overflow-x: hidden;
+            }
+
+            .menu__list {
+                display: flex;
+                flex-direction: column;
+                color: rgb(var(--um-color-menu-drawer-text, var(--um-color-section-text, var(--um-color-base-text, 62,62,62))), 1);
+                list-style: none;
+                margin: 0;
+                padding: var(--um-space-32, 2rem) 0;
+            }
+
+            /* Submenus */
+            .submenu {
+                display: flex;
+                flex-direction: column;
+                list-style: none;
+                margin: 0;
+                padding: 0;
+                width: 100%;
+            }
+            .submenu__link {
+                display: block;
+                color: inherit;
+                padding: var(--um-space-12, 0.75rem) var(--um-space-24, 1.5rem);
+                text-decoration: none;
+                transition: background-color var(--um-animation-duration-04, 0.4s) ease;
+            }
+            .submenu__link:hover {
+                background-color: rgba(var(--um-color-page-bg), 0.7);
+            }
+
+            /* Socials */
+            .socials {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding: var(--um-space-16, 1rem);
+                background-color: rgb(var(--um-color-menu-drawer-text, var(--um-color-section-text, var(--um-color-page-text, 62,62,62))), 0.5);
+                --um-color-icon-text: rgba(var(--um-color-disclosure-bg, var(--um-color-section-bg, 240, 240, 240)), 1);
+            }
+        `
+]);
+a([
+  n()
+], s.prototype, "src", 2);
+a([
+  n({ type: Object })
+], s.prototype, "data", 2);
+a([
+  n({ type: String })
+], s.prototype, "direction", 2);
+a([
+  n()
+], s.prototype, "colorText", 2);
+a([
+  n()
+], s.prototype, "colorBg", 2);
+a([
+  p()
+], s.prototype, "_drawerOpen", 2);
+a([
+  h("umg-disclosure")
+], s.prototype, "_drawer", 2);
+s = a([
+  d(`${x}-header-drawer`)
+], s);
+export {
+  s as HeaderDrawer
+};