@pushengineering/umg-web-components 2.0.0

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

@@ -0,0 +1,328 @@
+import "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as n, nothing as d } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
+import { LitElement as p } from "../../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
+import { customElement as h } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as a } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/property.js";
+import { styleMap as v } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/style-map.js";
+import { classMap as c } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/class-map.js";
+import { global as f } from "../../styles/global.js";
+import { settings as _ } from "../../scripts/settings.js";
+import { mergeStyles as b } from "../../scripts/mergeStyles.js";
+import "../disclosure/disclosure.js";
+import { css as y } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
+var g = Object.defineProperty, x = Object.getOwnPropertyDescriptor, o = (e, t, i, l) => {
+  for (var r = l > 1 ? void 0 : l ? x(t, i) : t, u = e.length - 1, m; u >= 0; u--)
+    (m = e[u]) && (r = (l ? m(t, i, r) : m(r)) || r);
+  return l && r && g(t, i, r), r;
+};
+const { prefix: w } = _;
+let s = class extends p {
+  constructor() {
+    super(), this.src = "", this.layout = "extended", this.vertical = !1, this.hideMenuTitle = !1, this.width = "page-width", this.divider = !1, this._outsideClick = (e) => {
+      console.log("outside click"), e.composedPath().includes(this) || this._closeDisclosures();
+    }, this.addEventListener("summary-click", this._handleMenuEvents);
+  }
+  disconnectedCallback() {
+    window.removeEventListener("click", this._outsideClick), super.disconnectedCallback();
+  }
+  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();
+  }
+  _handleMenuEvents(e) {
+    var t;
+    if (e.type === "summary-click" && e.detail.eventName === "open") {
+      const i = e.detail.target, l = (t = this.shadowRoot) == null ? void 0 : t.querySelectorAll("umg-disclosure");
+      l && l.length && l.forEach((r) => {
+        r !== i && r.closeDisclosure();
+      }), this.dispatchEvent(new CustomEvent("overlay-open", {
+        bubbles: !0,
+        composed: !0
+      })), window.addEventListener("click", this._outsideClick);
+    }
+    e.type === "summary-click" && e.detail.eventName === "close" && (this.dispatchEvent(new CustomEvent("overlay-close", {
+      bubbles: !0,
+      composed: !0
+    })), window.removeEventListener("click", this._outsideClick));
+  }
+  _closeDisclosures() {
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelectorAll("umg-disclosure");
+    e && e.length && e.forEach((i) => {
+      i.closeDisclosure();
+    }), this.dispatchEvent(new CustomEvent("overlay-close", {
+      bubbles: !0,
+      composed: !0
+    })), window.removeEventListener("click", this._outsideClick);
+  }
+  menuStyles() {
+    let e = {};
+    return this.width === "full-width" && (e = {
+      ...e,
+      "--um-size-page-width": "100%"
+    }), this.colorText && (e = {
+      ...e,
+      "--um-color-disclosure-text": this.colorText
+    }), this.colorBg && (e = {
+      ...e,
+      "--um-color-disclosure-bg": this.colorBg
+    }), e;
+  }
+  menuClasses() {
+    const e = {};
+    return this.layout === "compact" && (e["menu--compact"] = !0), e;
+  }
+  menuListClasses() {
+    const e = {};
+    return this.vertical && this.layout !== "compact" && (e["menu-list--vertical"] = !0), this.divider && (e["menu-list--divider"] = !0), this.layout === "extended" && (e["menu-list--extended"] = !0), this.layout === "compact" && (e["menu-list--compact"] = !0), e;
+  }
+  menuTitle(e) {
+    return this.layout === "extended" && !this.hideMenuTitle ? n`
+                <li class="menu__title" part="menu__title">
+                    <span>
+                        ${e}
+                    </span>
+                </li>
+            ` : d;
+  }
+  menuList() {
+    if (this.data)
+      return n`
+            <nav>
+                <ul
+                    part="menu"
+                    class="menu${c(this.menuClasses())}"
+                    style="${v(this.menuStyles())}"
+                    >
+                    ${this.data.map((e) => n`
+                        <li>
+                            ${e.subItems ? n`
+                                <umg-disclosure
+                                    class="menu-disclosure"
+                                    overlay
+                                    >
+                                    <span slot="summary" class="summary" part="summary">
+                                        ${e.linkText}
+                                    </span>
+                                    <span slot="icon" class="summary-icon" part="summary-icon">
+                                        <umg-icon
+                                            part="icon"
+                                            icon="chevron-down"
+                                            size="xSmall"
+                                            >
+                                        </umg-icon>
+                                    </span>
+                                    <div
+                                        slot="content"
+                                        class="menu__container${c(this.menuListClasses())}"
+                                        >
+                                        <ul class="menu__list" part="menu-list">
+                                            ${this.menuTitle(e.linkText)}
+                                            ${e.subItems.map((t) => n`
+                                                <li slot="items">
+                                                    ${t.subItems ? n`
+                                                        <div class="submenu" part="submenu">
+                                                            <span class="submenu__title" part="submenu-title">
+                                                                ${t.linkText}
+                                                            </span>
+                                                            <ul class="submenu__list" part="submenu-list">
+                                                                ${t.subItems.map((i) => n`
+                                                                    <li part="submenu-item" slot="items">
+                                                                        <a class="submenu__link" part="submenu-link" href="${i.linkUrl}">
+                                                                            ${i.linkText}
+                                                                        </a>
+                                                                    </li>
+                                                                `)}
+                                                            </ul>
+                                                        </div>
+                                                    ` : n`
+                                                        <a class="menu__link" href="${t.linkUrl}">
+                                                            ${t.linkText}
+                                                        </a>
+                                                    `}
+                                                </li>
+                                            `)}
+                                        </ul>
+                                    </div>
+                                </umg-disclosure>
+                            ` : n`
+                                <a class="menu__link" part="submenu-title" href="${e.linkUrl}">
+                                    ${e.linkText}
+                                </a>
+                            `}
+                        </li>
+                    `)}
+                </ul>
+            </nav>
+        `;
+  }
+  render() {
+    return n`
+            ${this.menuList()}
+        `;
+  }
+};
+s.styles = b([
+  f,
+  y`
+            .menu {
+                display: flex;
+                gap: var(--um-space-8, 0.5rem);
+                align-items: center;
+                color: rgb(var(--um-color-menu-text, var(--um-color-section-text, var(--um-color-base-text, 62,62,62))), 1);
+                font-family: var(--um-font-family-menu, inherit);
+                font-size: var(--um-font-size-menu, inherit);
+                letter-spacing: 0.05rem;
+                list-style: none;
+                margin: 0;
+                padding: 0;
+            }
+            .menu__title {
+                font-weight: var(--um-font-weight-menu, 700);
+                text-transform: uppercase;
+                width: 100%;
+                border-bottom: 0.0625rem solid rgb(var(--um-color-disclosure-text, var(--um-color-section-text, var(--um-color-base-text, 62,62,62))), 0.1);
+                padding-bottom: var(--um-space-12, 0.75rem);
+            }
+            .menu > li > * {
+                display: inline-block;
+                padding: var(--um-space-8, 0.5rem) var(--um-space-12, 0.75rem);
+            }
+            .menu__link {
+                color: inherit;
+                text-decoration: none;
+                transition: all var(--um-animation-duration-04, 0.4s) ease;
+            }
+            .menu__link:hover {
+                text-decoration: underline;
+                text-underline-offset: 0.3rem;
+            }
+            
+            /* Menu disclosure */
+            .menu-disclosure {
+                position: initial;
+            }
+
+            .menu-disclosure::part(disclosure-drawer) {
+                top: var(--um-size-header-inner-height, 0);
+            }
+
+            /* Menus */
+            .menu__container.menu-list--divider {
+                border-top: 0.0625rem solid rgb(var(--um-color-menu-text, var(--um-color-section-text, var(--um-color-base-text, 62,62,62))), 0.1);
+
+            }
+            .menu__container.menu-list--vertical .submenu__list {
+                flex-direction: column;
+                gap: var(--um-space-4, 0.25rem);
+            }
+            .menu__list {
+                font-family: var(--um-font-family-menu, inherit);
+                font-size: var(--um-font-size-menu, inherit);
+                list-style: none;
+                padding: var(--um-space-32, 2rem) var(--um-space-48, 3rem);
+            }
+
+            /* Extended */
+            .menu-list--extended .menu__list {
+                display: flex;
+                flex-wrap: wrap;
+                column-gap: var(--um-space-32, 2rem);
+                row-gap: var(--um-space-20, 1.25rem);
+                margin: 0 auto;
+                max-width: var(--um-size-page-width, 75rem);
+                width: 100%;
+            }
+
+            /* Compact */
+            .menu.menu--compact .menu-disclosure::part(disclosure-drawer) {
+                top: 4.5rem;
+                left: unset;
+                right: unset;
+                border-radius: var(--um-border-radius-30);
+            }
+            .menu.menu--compact .menu-disclosure::part(disclosure-content) {
+                border: 0.0625rem solid rgb(var(--um-color-disclosure-text, var(--um-color-section-text, var(--um-color-base-text, 62,62,62))), 0.8);
+                border-radius: var(--um-border-radius-30);
+            }
+            .menu-list--compact .menu__list {
+                padding: var(--um-space-24, 1.5rem);
+            }
+            .menu-list--compact .menu__list > *:not(:last-child) {
+                margin-bottom: var(--um-space-24, 1.5rem);
+            }
+            .menu-list--compact .submenu__list {
+                flex-direction: column;
+                gap: var(--um-space-4, 0.25rem);
+            }
+            .menu-list--compact .submenu__link {
+                padding: var(--um-space-4, 0.25rem) 0;
+            }
+
+            /* Submenus */
+            .submenu {
+                display: flex;
+                flex-direction: column;
+                gap: var(--um-space-12, 0.75rem);
+            }
+            .submenu__title {
+                font-size: var(--um-font-size-body-xs, 0.75rem);
+                font-weight: var(--um-font-weight-light, 300);
+                padding-right: var(--um-space-8, 0.5rem);
+                text-transform: uppercase;
+            }
+            .submenu__list {
+                display: flex;
+                gap: var(--um-space-12, 0.75rem);
+                list-style: none;
+                padding: 0;
+            }
+            .submenu__link {
+                display: block;
+                color: inherit;
+                padding: var(--um-space-4, 0.25rem) var(--um-space-8, 0.5rem);
+                padding-left: 0;
+                text-decoration: none;
+                transition: all var(--um-animation-duration-04, 0.4s) ease;
+            }
+            .submenu__link:hover {
+                text-decoration: underline;
+                text-underline-offset: 0.3rem;
+            }
+        `
+]);
+o([
+  a()
+], s.prototype, "src", 2);
+o([
+  a({ type: Object })
+], s.prototype, "data", 2);
+o([
+  a()
+], s.prototype, "layout", 2);
+o([
+  a({ type: Boolean })
+], s.prototype, "vertical", 2);
+o([
+  a({ type: Boolean })
+], s.prototype, "hideMenuTitle", 2);
+o([
+  a()
+], s.prototype, "width", 2);
+o([
+  a({ type: Boolean })
+], s.prototype, "divider", 2);
+o([
+  a()
+], s.prototype, "colorText", 2);
+o([
+  a()
+], s.prototype, "colorBg", 2);
+s = o([
+  h(`${w}-menu`)
+], s);
+export {
+  s as Menu
+};

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

@@ -0,0 +1,143 @@
+import "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as m } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
+import { LitElement as d } from "../../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
+import { customElement as c } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as p } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/property.js";
+import { classMap as v } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/class-map.js";
+import { global as g } from "../../styles/global.js";
+import { settings as u } from "../../scripts/settings.js";
+import { mergeStyles as b } from "../../scripts/mergeStyles.js";
+import "../button-icon/button-icon.js";
+import { css as _ } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
+var f = Object.defineProperty, h = Object.getOwnPropertyDescriptor, n = (e, t, a, l) => {
+  for (var o = l > 1 ? void 0 : l ? h(t, a) : t, i = e.length - 1, r; i >= 0; i--)
+    (r = e[i]) && (o = (l ? r(t, a, o) : r(o)) || o);
+  return l && o && f(t, a, o), o;
+};
+const { prefix: x } = u;
+let s = class extends d {
+  constructor() {
+    super(), this.visible = !1, this.addEventListener("keyup", (e) => {
+      e.code.toUpperCase() === "ESCAPE" && this.toggleModal();
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback(), window.addEventListener("toggle-modal", this.toggleModal.bind(this));
+  }
+  disconnectedCallback() {
+    window.removeEventListener("toggle-modal", this.toggleModal.bind(this)), super.disconnectedCallback();
+  }
+  modalClasses() {
+    return {
+      "modal--visible": !!this.visible
+    };
+  }
+  toggleModal() {
+    if (this.visible = !this.visible, !this.visible) {
+      const e = new CustomEvent("close-modal", {
+        bubbles: !0,
+        composed: !0
+      });
+      this.dispatchEvent(e);
+    }
+  }
+  render() {
+    return m`
+            <div
+                part="modal"
+                class="modal${v(this.modalClasses())}"
+                >
+                <div class="modal__close">
+                    <umg-button-icon
+                        @click=${this.toggleModal}
+                        type="button"
+                        icon="close"
+                        size="xLarge"
+                        label="Close modal"
+                        borderRadius="full"
+                        borderWidth='10' 
+                        colorText="80,80,80"
+                        colorBg="255,255,255"
+                        colorBgOpacity="0.7"
+                        border
+                        >
+                    </umg-button-icon>
+                </div>
+                <div class="modal__content">
+                    <div class="modal__content-inner">
+                        <slot name="content"></slot>
+                    </div>
+                </div>
+            </div>
+      `;
+  }
+};
+s.styles = b([
+  g,
+  _`
+            /* Base */
+            .modal {
+                display: none;
+                position: fixed;
+                top: 0;
+                left: 0;
+                bottom: 0;
+                overflow-y: scroll;
+                overflow-x: hidden;
+                width: 100%;
+                z-index: 101;
+                background-color: rgba(var(--um-color-modal-bg, 255, 255, 255), var(--um-opacity-modal-bg, 0.9));
+            }
+            .modal--visible {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+            }
+            .modal__content {
+                padding: var(--um-space-48, 3rem) 0;
+                width: calc(var(--um-breakpoint-lg, 64rem) - var(--um-space-48, 3rem));
+            }
+            .modal__content-inner {
+                padding: 0 var(--um-space-24, 1.5rem);
+            }
+            .modal__content-inner ::slotted(*) {
+                display: block;
+                margin-bottom: var(--um-space-grid-desktop-vertical, 1.5rem);
+            }
+            .modal__close {
+                position: fixed;
+                right: var(--um-space-24, 1.5rem);
+                top: var(--um-space-24, 1.5rem);
+                z-index: 201;
+            }
+
+            @media only screen and (max-width: 64rem) {
+                .modal__close {
+                    top: var(--um-space-12, 0.75rem);
+                    right: var(--um-space-12, 0.75rem);
+                }
+
+                .modal__content {
+                    padding: var(--um-space-64, 4rem) 0;
+                    width: 100%;
+                }
+
+                .modal__content-inner {
+                    padding: 0 var(--um-space-16, 1rem);
+                    position: relative;
+                }
+                .modal__content-inner ::slotted(*) {
+                    margin-bottom: var(--um-space-grid-mobile-vertical, 1rem);
+                }
+            }
+        `
+]);
+n([
+  p({ type: Boolean })
+], s.prototype, "visible", 2);
+s = n([
+  c(`${x}-modal`)
+], s);
+export {
+  s as Modal
+};