@pushengineering/umg-web-components 2.0.6 → 3.0.1

package/dist/components/menu/menu.js

@@ -1,239 +1,299 @@
-import { css as d, LitElement as p, html as n, nothing as h } from "lit";
-import { customElement as v } from "lit/decorators/custom-element.js";
-import { property as o } from "lit/decorators/property.js";
-import { styleMap as f } from "lit/directives/style-map.js";
-import { classMap as c } from "lit/directives/class-map.js";
-import { global as _ } from "../../styles/global.js";
-import { settings as y } from "../../scripts/settings.js";
-import { mergeStyles as b } from "../../scripts/mergeStyles.js";
-import "../disclosure/disclosure.js";
-var g = Object.defineProperty, x = Object.getOwnPropertyDescriptor, a = (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 } = y;
-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) => {
-      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);
+import { __decorate } from '../../node_modules/.pnpm/@rollup_plugin-typescript@11.1.6_rollup@4.16.1_tslib@2.6.2_typescript@5.4.5/node_modules/tslib/tslib.es6.js';
+import { css, LitElement, html, nothing } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { global } from '../../styles/global.js';
+import { settings } from '../../scripts/settings.js';
+import { mergeStyles } from '../../scripts/mergeStyles.js';
+import '../disclosure/disclosure.js';
+
+const { prefix } = settings;
+let Menu = class Menu extends LitElement {
+    constructor() {
+        super();
+        this.src = '';
+        this.layout = 'extended';
+        this.vertical = false;
+        this.hideMenuTitle = false;
+        this.submenuWidth = 'page-width';
+        this._outsideClick = (e) => {
+            if (!e.composedPath().includes(this)) {
+                this._closeDisclosures();
+            }
+        };
+        this.addEventListener('summary-click', this._handleMenuEvents);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('click', this._outsideClick);
+        super.disconnectedCallback();
     }
-    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`
+    async firstUpdated() {
+        if (this.data === undefined && this.src) {
+            await this.fetchData();
+        }
+    }
+    async fetchData() {
+        this.data = await fetch(this.src).then((res) => res.json());
+        this.requestUpdate();
+    }
+    _handleMenuEvents(e) {
+        if (e.type === 'summary-click'
+            && e.detail.eventName === 'open') {
+            const activeMenu = e.detail.target;
+            const menus = this.shadowRoot?.querySelectorAll('umg-disclosure');
+            if (menus && menus.length) {
+                menus.forEach(menu => {
+                    if (menu !== activeMenu) {
+                        menu.closeDisclosure();
+                    }
+                });
+            }
+            this.dispatchEvent(new CustomEvent('overlay-open', {
+                bubbles: true,
+                composed: true,
+            }));
+            window.addEventListener('click', this._outsideClick);
+        }
+        if (e.type === 'summary-click'
+            && e.detail.eventName === 'close') {
+            this.dispatchEvent(new CustomEvent('overlay-close', {
+                bubbles: true,
+                composed: true,
+            }));
+            window.removeEventListener('click', this._outsideClick);
+        }
+    }
+    _closeDisclosures() {
+        const menus = this.shadowRoot?.querySelectorAll('umg-disclosure');
+        if (menus && menus.length) {
+            menus.forEach(menu => {
+                menu.closeDisclosure();
+            });
+        }
+        this.dispatchEvent(new CustomEvent('overlay-close', {
+            bubbles: true,
+            composed: true,
+        }));
+        window.removeEventListener('click', this._outsideClick);
+    }
+    menuStyles() {
+        let styles = {};
+        if (this.submenuWidth === 'full-width') {
+            styles = {
+                ...styles,
+                '--umg-size-content-max-width': '100%',
+            };
+        }
+        return styles;
+    }
+    menuClasses() {
+        const classes = {};
+        if (this.layout === 'compact') {
+            classes['menu--compact'] = true;
+        }
+        return classes;
+    }
+    menuListClasses() {
+        const classes = {};
+        if (this.vertical && this.layout !== 'compact') {
+            classes['menu-list--vertical'] = true;
+        }
+        if (this.layout === 'extended') {
+            classes['menu-list--extended'] = true;
+        }
+        if (this.layout === 'compact') {
+            classes['menu-list--compact'] = true;
+        }
+        return classes;
+    }
+    menuTitle(title) {
+        if (this.layout === 'extended' && !this.hideMenuTitle) {
+            return html `
                 <li class="menu__title" part="menu__title">
                     <span>
-                        ${e}
+                        ${title}
                     </span>
                 </li>
-            ` : h;
-  }
-  menuItemClasses(e) {
-    if (Array.isArray(e) && e.length)
-      return e.join(" ");
-  }
-  menuList() {
-    if (this.data)
-      return n`
+            `;
+        }
+        return nothing;
+    }
+    menuList() {
+        if (this.data) {
+            return html `
             <nav>
                 <ul
                     part="menu"
-                    class="menu${c(this.menuClasses())}"
-                    style="${f(this.menuStyles())}"
+                    class="menu${classMap(this.menuClasses())}"
+                    style="${styleMap(this.menuStyles())}"
                     >
-                    ${this.data.map((e) => n`
+                    ${this.data.map((itemOne) => {
+                return html `
                         <li>
-                            ${e.subItems ? n`
+                            ${itemOne.subItems ? html `
                                 <umg-disclosure
                                     class="menu-disclosure"
+                                    detailsWidth=${this.layout === 'extended' ? 'fill' : 'fit-content'}
                                     overlay
                                     >
-                                    <span slot="summary" class="summary" part="summary">
-                                        ${e.linkText}
+                                    <span slot="summary" class="summary ${this.activeUrl === itemOne.linkUrl ? 'active' : ''}" part="summary">
+                                        ${itemOne.linkText}
                                     </span>
                                     <span slot="icon" class="summary-icon" part="summary-icon">
                                         <umg-icon
                                             part="icon"
                                             icon="chevron-down"
-                                            size="xSmall"
+                                            size="xsmall"
                                             >
                                         </umg-icon>
                                     </span>
                                     <div
                                         slot="content"
-                                        class="menu__container${c(this.menuListClasses())}"
+                                        class="menu__container${classMap(this.menuListClasses())}"
                                         >
                                         <ul class="menu__list" part="menu-list">
-                                            ${this.menuTitle(e.linkText)}
-                                            ${e.subItems.map((t) => n`
+                                            ${this.menuTitle(itemOne.linkText)}
+                                            ${itemOne.subItems.map((itemTwo) => {
+                    return html `
                                                 <li slot="items">
-                                                    ${t.subItems ? n`
+                                                    ${itemTwo.subItems ? html `
                                                         <div class="submenu" part="submenu">
                                                             <span class="submenu__title" part="submenu-title">
-                                                                ${t.linkText}
+                                                                ${itemTwo.linkText}
                                                             </span>
                                                             <ul class="submenu__list" part="submenu-list">
-                                                                ${t.subItems.map((i) => n`
+                                                                ${itemTwo.subItems.map((itemThree) => {
+                        return html `
                                                                     <li part="submenu-item" slot="items">
-                                                                        <a class="submenu__link" part="submenu-link" href="${i.linkUrl}">
-                                                                            ${i.linkText}
+                                                                        <a class="submenu__link" part="submenu-link" href="${itemThree.linkUrl}">
+                                                                            ${itemThree.linkText}
                                                                         </a>
                                                                     </li>
-                                                                `)}
+                                                                `;
+                    })}
                                                             </ul>
                                                         </div>
-                                                    ` : n`
-                                                        <a class="menu__link" href="${t.linkUrl}">
-                                                            ${t.linkText}
+                                                    ` : html `
+                                                        <a class="menu__link" href="${itemTwo.linkUrl}">
+                                                            ${itemTwo.linkText}
                                                         </a>
                                                     `}
                                                 </li>
-                                            `)}
+                                            `;
+                })}
                                         </ul>
                                     </div>
                                 </umg-disclosure>
-                            ` : n`
-                                <a class="menu__link" part="submenu-title ${this.menuItemClasses(e.linkClasses)}" href="${e.linkUrl}">
-                                    ${e.linkText}
+                            ` : html `
+                                <a class="menu__link ${this.activeUrl === itemOne.linkUrl ? 'active' : ''}" part="submenu-title" href="${itemOne.linkUrl}">
+                                    ${itemOne.linkText}
                                 </a>
                             `}
                         </li>
-                    `)}
+                    `;
+            })}
                 </ul>
             </nav>
         `;
-  }
-  render() {
-    return n`
+        }
+    }
+    render() {
+        return html `
             ${this.menuList()}
         `;
-  }
+    }
 };
-s.styles = b([
-  _,
-  d`
+Menu.styles = mergeStyles([
+    global,
+    css `
             .menu {
                 display: flex;
-                gap: var(--um-space-8, 0.5rem);
+                gap: var(--umg-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);
+                font-family: var(--umg-font-menu-family, inherit);
+                font-size: var(--umg-font-menu-size, inherit);
                 letter-spacing: 0.05rem;
                 list-style: none;
                 margin: 0;
                 padding: 0;
+                color: var(--umg-color-base-text, rgb(0,0,0));
+                --umg-space-summary-padding: 0;
+                --umg-space-details-padding: 0;
             }
+            @supports (color: rgb(from white r g b)) {
+                .menu {
+                    color: rgb(from var(--umg-color-base-text, rgb(0,0,0)) r g b);
+                }
+            }
+
             .menu__title {
-                font-weight: var(--um-font-weight-menu, 700);
+                font-weight: var(--umg-font-menu-weight, 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);
+                border-bottom-width: 0.0625rem;
+                border-bottom-style: solid;
+                border-bottom-color: var(--umg-color-details-text, var(--umg-color-base-text, rgb(0,0,0,0.8)));
+                padding-bottom: var(--umg-space-12, 0.75rem);
             }
+            @supports (color: rgb(from white r g b)) {
+                .menu__title {
+                    border-bottom-color: rgb(from var(--umg-color-details-text, var(--umg-color-base-text, rgb(0,0,0,0.8))) r g b / calc(alpha * var(--umg-opacity-border, 0.8)));
+                }
+            }
+
             .menu > li > * {
                 display: inline-block;
-                padding: var(--um-space-8, 0.5rem) var(--um-space-12, 0.75rem);
+                padding: var(--umg-space-8, 0.5rem) var(--umg-space-12, 0.75rem);
             }
             .menu__link {
                 color: inherit;
                 text-decoration: none;
-                transition: all var(--um-animation-duration-04, 0.4s) ease;
+                transition: all var(--umg-animation-duration-04, 0.4s) ease;
             }
-            .menu__link:hover {
+            .menu__link:hover,
+            .menu__link.active,
+            .summary.active  {
                 text-decoration: underline;
                 text-underline-offset: 0.3rem;
             }
+            .menu__link.active,
+            .summary.active 
+            {
+                text-decoration-thickness: 0.125rem;
+            }
             
             /* Menu disclosure */
             .menu-disclosure {
                 position: initial;
+                --umg-color-base-border: transparent;
             }
 
             .menu-disclosure::part(disclosure-drawer) {
-                top: var(--um-size-header-inner-height, 0);
+                top: var(--umg-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);
+                gap: var(--umg-space-4, 0.25rem);
             }
             .menu__list {
-                font-family: var(--um-font-family-menu, inherit);
-                font-size: var(--um-font-size-menu, inherit);
+                font-family: var(--umg-font-menu-family, inherit);
+                font-size: var(--umg-font-menu-size, inherit);
                 list-style: none;
-                padding: var(--um-space-32, 2rem) var(--um-space-48, 3rem);
+                padding: var(--umg-space-32, 2rem) var(--umg-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);
+                column-gap: var(--umg-space-32, 2rem);
+                row-gap: var(--umg-space-20, 1.25rem);
                 margin: 0 auto;
-                max-width: var(--um-size-page-width, 75rem);
+                max-width: var(--umg-size-content-max-width, 75rem);
                 width: 100%;
             }
 
@@ -242,88 +302,90 @@ s.styles = b([
                 top: 4.5rem;
                 left: unset;
                 right: unset;
-                border-radius: var(--um-border-radius-30);
+                border-radius: var(--umg-border-radius-20);
             }
             .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);
+                border-width: 0.0625rem;
+                border-style: solid;
+                border-color: var(--umg-color-details-text, var(--umg-color-base-text, rgb(0,0,0,0.8)));
+                border-radius: var(--umg-border-radius-20);
+            }
+            @supports (color: rgb(from white r g b)) {
+                .menu.menu--compact .menu-disclosure::part(disclosure-content) {
+                    border-color: rgb(from var(--umg-color-details-text, var(--umg-color-base-text, rgb(0,0,0,0.8))) r g b / calc(alpha * var(--umg-opacity-border, 0.8)));
+                }
             }
+
             .menu-list--compact .menu__list {
-                padding: var(--um-space-24, 1.5rem);
+                padding: var(--umg-space-24, 1.5rem);
             }
             .menu-list--compact .menu__list > *:not(:last-child) {
-                margin-bottom: var(--um-space-24, 1.5rem);
+                margin-bottom: var(--umg-space-24, 1.5rem);
             }
             .menu-list--compact .submenu__list {
                 flex-direction: column;
-                gap: var(--um-space-4, 0.25rem);
+                gap: var(--umg-space-4, 0.25rem);
             }
             .menu-list--compact .submenu__link {
-                padding: var(--um-space-4, 0.25rem) 0;
+                padding: var(--umg-space-4, 0.25rem) 0;
             }
 
             /* Submenus */
             .submenu {
                 display: flex;
                 flex-direction: column;
-                gap: var(--um-space-12, 0.75rem);
+                gap: var(--umg-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);
+                font-size: var(--umg-font-body-size-xs, 0.75rem);
+                font-weight: var(--umg-font-base-weight-light, 300);
+                padding-right: var(--umg-space-8, 0.5rem);
                 text-transform: uppercase;
             }
             .submenu__list {
                 display: flex;
-                gap: var(--um-space-12, 0.75rem);
+                gap: var(--umg-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: var(--umg-space-4, 0.25rem) var(--umg-space-8, 0.5rem);
                 padding-left: 0;
                 text-decoration: none;
-                transition: all var(--um-animation-duration-04, 0.4s) ease;
+                transition: all var(--umg-animation-duration-04, 0.4s) ease;
             }
             .submenu__link:hover {
                 text-decoration: underline;
                 text-underline-offset: 0.3rem;
             }
-        `
+        `,
 ]);
-a([
-  o()
-], s.prototype, "src", 2);
-a([
-  o({ type: Object })
-], s.prototype, "data", 2);
-a([
-  o()
-], s.prototype, "layout", 2);
-a([
-  o({ type: Boolean })
-], s.prototype, "vertical", 2);
-a([
-  o({ type: Boolean })
-], s.prototype, "hideMenuTitle", 2);
-a([
-  o()
-], s.prototype, "width", 2);
-a([
-  o({ type: Boolean })
-], s.prototype, "divider", 2);
-a([
-  o()
-], s.prototype, "colorText", 2);
-a([
-  o()
-], s.prototype, "colorBg", 2);
-s = a([
-  v(`${w}-menu`)
-], s);
-export {
-  s as Menu
-};
+__decorate([
+    property()
+], Menu.prototype, "src", void 0);
+__decorate([
+    property({ type: Object })
+], Menu.prototype, "data", void 0);
+__decorate([
+    property()
+], Menu.prototype, "activeUrl", void 0);
+__decorate([
+    property()
+], Menu.prototype, "layout", void 0);
+__decorate([
+    property({ type: Boolean })
+], Menu.prototype, "vertical", void 0);
+__decorate([
+    property({ type: Boolean })
+], Menu.prototype, "hideMenuTitle", void 0);
+__decorate([
+    property()
+], Menu.prototype, "submenuWidth", void 0);
+Menu = __decorate([
+    customElement(`${prefix}-menu`)
+], Menu);
+
+export { Menu };
+//# sourceMappingURL=menu.js.map

package/dist/components/menu/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","sources":["../../../src/components/menu/menu.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/dist/components/menu-bar/index.d.ts

@@ -1,2 +1,3 @@
 import { MenuBar } from './menu-bar';
 export { MenuBar };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/menu-bar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/menu-bar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAEpC,OAAO,EAAE,OAAO,EAAE,CAAA"}

package/dist/components/menu-bar/menu-bar.d.ts

@@ -7,10 +7,8 @@ export declare class MenuBar extends LitElement {
     justify: string;
     mobileJustify: string;
     padding?: string | undefined;
-    colorBg: string | undefined;
-    colorText: string | undefined;
-    opacity: string | undefined;
     menuClasses(): any;
     render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultArray;
 }
+//# sourceMappingURL=menu-bar.d.ts.map

package/dist/components/menu-bar/menu-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-bar.d.ts","sourceRoot":"","sources":["../../../src/components/menu-bar/menu-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAA;AAM3C,OAAO,QAAQ,CAAA;AACf,OAAO,eAAe,CAAA;AAQtB,qBAEa,OAAQ,SAAQ,UAAU;IAGnC,MAAM,UAAQ;IAGd,OAAO,SAAW;IAGlB,OAAO,SAAU;IAGjB,aAAa,SAAU;IAGvB,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAE5B,WAAW;IAOX,MAAM;IAmBN,MAAM,CAAC,MAAM,+BAwCX;CACL"}