@pushengineering/umg-web-components 2.0.2 → 2.0.4

package/dist/components/menu-bar/menu-bar.js

@@ -0,0 +1,110 @@
+import { css as c, LitElement as u, html as y } from "lit";
+import { customElement as g } from "lit/decorators/custom-element.js";
+import { property as r } from "lit/decorators/property.js";
+import { classMap as f } from "lit/directives/class-map.js";
+import { ifDefined as a } from "lit/directives/if-defined.js";
+import "../box/box.js";
+import "../link-group/link-group.js";
+import { global as h } from "../../styles/global.js";
+import { settings as b } from "../../scripts/settings.js";
+import { mergeStyles as d } from "../../scripts/mergeStyles.js";
+var x = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (i, e, m, p) => {
+  for (var s = p > 1 ? void 0 : p ? v(e, m) : e, n = i.length - 1, l; n >= 0; n--)
+    (l = i[n]) && (s = (p ? l(e, m, s) : l(s)) || s);
+  return p && s && x(e, m, s), s;
+};
+const { prefix: $ } = b;
+let t = class extends u {
+  constructor() {
+    super(...arguments), this.sticky = !1, this.spacing = "normal", this.justify = "start", this.mobileJustify = "start";
+  }
+  menuClasses() {
+    const i = {};
+    return i.sticky = this.sticky, i;
+  }
+  render() {
+    return y`
+           <nav part="menu-bar" class="menu-bar${f(this.menuClasses())}">
+                <umg-box
+                    padding="${a(this.padding)}"
+                    colorText="${a(this.colorText)}"
+                    colorBg="${a(this.colorBg)}"
+                    opacity="${a(this.opacity)}"
+                    >
+                    <umg-link-group
+                        spacing="${this.spacing}"
+                        justify="${this.justify}"
+                        mobileJustify="${this.mobileJustify}"
+                        noWrap
+                        >
+                        <slot name="link"></slot>
+                    </umg-link-group>
+                </umg-box>
+           </nav>
+        `;
+  }
+};
+t.styles = d([
+  h,
+  c`
+            :host([sticky]) {
+                position: sticky;
+                top: 0;
+                z-index: 1001;
+            }
+            :host {
+                display: block;
+                color: rgb(var(--um-color-box-text));
+                background-color: rgb(var(--um-color-box-bg));
+                margin: auto;
+                width: 100%;
+            }
+            .menu-bar {
+                display: flex;
+                justify-content: center;
+                position: sticky;
+                top:0;
+                margin: 0 auto;
+                max-width: var(--um-size-max-section-width);
+                width: 100%;
+            }
+
+            ::slotted(*) {
+                letter-spacing: 0.07rem;
+            }
+
+            ::slotted(umg-link:last-child) {
+                margin-right: var(--um-space-8);
+            }
+        `
+]);
+o([
+  r({ type: Boolean })
+], t.prototype, "sticky", 2);
+o([
+  r()
+], t.prototype, "spacing", 2);
+o([
+  r()
+], t.prototype, "justify", 2);
+o([
+  r()
+], t.prototype, "mobileJustify", 2);
+o([
+  r()
+], t.prototype, "padding", 2);
+o([
+  r()
+], t.prototype, "colorBg", 2);
+o([
+  r()
+], t.prototype, "colorText", 2);
+o([
+  r()
+], t.prototype, "opacity", 2);
+t = o([
+  g(`${$}-menu-bar`)
+], t);
+export {
+  t as MenuBar
+};

package/dist/components/modal/index.d.ts

@@ -0,0 +1,2 @@
+import { Modal } from './modal';
+export { Modal };

package/dist/components/modal/modal.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+import '../button-icon';
+export declare class Modal extends LitElement {
+    visible: boolean;
+    layout: string;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    modalClasses(): any;
+    toggleModal(): void;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}

package/dist/{packages/web-components/components → components}/modal/modal.js

@@ -1,23 +1,20 @@
-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 { css as m, LitElement as c, html as b } from "lit";
+import { customElement as p } from "lit/decorators/custom-element.js";
+import { property as n } from "lit/decorators/property.js";
+import { classMap as u } from "lit/directives/class-map.js";
+import { global as v } from "../../styles/global.js";
+import { settings as g } from "../../scripts/settings.js";
+import { mergeStyles as f } 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;
+var h = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, d = (e, r, a, l) => {
+  for (var o = l > 1 ? void 0 : l ? _(r, a) : r, i = e.length - 1, s; i >= 0; i--)
+    (s = e[i]) && (o = (l ? s(r, a, o) : s(o)) || o);
+  return l && o && h(r, a, o), o;
 };
-const { prefix: x } = u;
-let s = class extends d {
+const { prefix: y } = g;
+let t = class extends c {
   constructor() {
-    super(), this.visible = !1, this.addEventListener("keyup", (e) => {
+    super(), this.visible = !1, this.layout = "list", this.addEventListener("keyup", (e) => {
       e.code.toUpperCase() === "ESCAPE" && this.toggleModal();
     });
   }
@@ -28,9 +25,10 @@ let s = class extends d {
     window.removeEventListener("toggle-modal", this.toggleModal.bind(this)), super.disconnectedCallback();
   }
   modalClasses() {
-    return {
+    const e = {
       "modal--visible": !!this.visible
     };
+    return e["modal-layout--" + this.layout] = !0, e;
   }
   toggleModal() {
     if (this.visible = !this.visible, !this.visible) {
@@ -42,10 +40,10 @@ let s = class extends d {
     }
   }
   render() {
-    return m`
+    return b`
             <div
                 part="modal"
-                class="modal${v(this.modalClasses())}"
+                class="modal${u(this.modalClasses())}"
                 >
                 <div class="modal__close">
                     <umg-button-icon
@@ -55,10 +53,10 @@ let s = class extends d {
                         size="xLarge"
                         label="Close modal"
                         borderRadius="full"
-                        borderWidth='10' 
-                        colorText="80,80,80"
-                        colorBg="255,255,255"
-                        colorBgOpacity="0.7"
+                        borderWidth='0' 
+                        colorText="240,240,240"
+                        colorBg="0,0,0"
+                        colorBgOpacity="0"
                         border
                         >
                     </umg-button-icon>
@@ -72,27 +70,47 @@ let s = class extends d {
       `;
   }
 };
-s.styles = b([
-  g,
-  _`
+t.styles = f([
+  v,
+  m`
             /* Base */
             .modal {
+                background-color: rgba(var(--um-color-modal-bg, 255, 255, 255), var(--um-opacity-modal-bg, 0.95));
+                backdrop-filter: blur(0.205rem);
                 display: none;
                 position: fixed;
                 top: 0;
                 left: 0;
                 bottom: 0;
-                overflow-y: scroll;
+                overflow-y: auto;
                 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));
+                z-index: 2000;
             }
+
+            .modal::-webkit-scrollbar {
+                width: 0.25rem;
+            }
+            .modal::-webkit-scrollbar-track {
+                background: rgb(var(--color-section-text, var(--um-color-base-text, 0,0,0)), 0.05);
+                border-radius: var(--um-border-radius-30);
+            }
+            .modal::-webkit-scrollbar-thumb{
+                background: rgb(var(--color-section-text, var(--um-color-base-text, 0,0,0)), 0.1);
+                border-radius: var(--um-border-radius-30);
+            }
+
             .modal--visible {
                 display: flex;
                 flex-direction: column;
                 align-items: center;
             }
+
+            /* Internal layout */
+            .modal-layout--single {
+                justify-content: center;
+            }
+
             .modal__content {
                 padding: var(--um-space-48, 3rem) 0;
                 width: calc(var(--um-breakpoint-lg, 64rem) - var(--um-space-48, 3rem));
@@ -105,16 +123,24 @@ s.styles = b([
                 margin-bottom: var(--um-space-grid-desktop-vertical, 1.5rem);
             }
             .modal__close {
+                background-color: rgba(var(--um-color-modal-bg, 255, 255, 255), 1);
+                box-shadow: 0 0 1rem 0.125rem rgb(0,0,0,0.5);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding: var(--um-space-16) 0;
                 position: fixed;
-                right: var(--um-space-24, 1.5rem);
-                top: var(--um-space-24, 1.5rem);
+                right: 0;
+                top: 0;
+                left: 0;
                 z-index: 201;
+                width: 100%;
             }
 
             @media only screen and (max-width: 64rem) {
                 .modal__close {
-                    top: var(--um-space-12, 0.75rem);
-                    right: var(--um-space-12, 0.75rem);
+                    top: initial;
+                    bottom: 0;
                 }
 
                 .modal__content {
@@ -132,12 +158,15 @@ s.styles = b([
             }
         `
 ]);
-n([
-  p({ type: Boolean })
-], s.prototype, "visible", 2);
-s = n([
-  c(`${x}-modal`)
-], s);
+d([
+  n({ type: Boolean })
+], t.prototype, "visible", 2);
+d([
+  n()
+], t.prototype, "layout", 2);
+t = d([
+  p(`${y}-modal`)
+], t);
 export {
-  s as Modal
+  t as Modal
 };

package/dist/components/multiselect/index.d.ts

@@ -0,0 +1,2 @@
+import { Multiselect } from './multiselect';
+export { Multiselect };

package/dist/components/multiselect/multiselect.d.ts

@@ -0,0 +1,60 @@
+import { LitElement } from 'lit';
+import { EventManager } from '../../classes/event-manager/event-manager';
+import '../disclosure';
+import '../text';
+import '../icon';
+import '../button-group';
+interface Option {
+    id: string;
+    name: string;
+    label: string;
+    value: string;
+    count: number;
+    pluralType: string;
+    disabled: boolean;
+}
+interface groupOptions {
+    id: string;
+    name: string;
+    label: string;
+    groups: OptionGroup[];
+}
+interface OptionGroup {
+    groupLabel: string;
+    options: Option[];
+}
+export declare class Multiselect extends LitElement {
+    id: string;
+    options: Option[];
+    groupOptions: groupOptions | undefined;
+    label: string;
+    name: string;
+    selectedItem: number;
+    defaultLabel: boolean;
+    border: boolean;
+    borderRadius: string;
+    multiselect: boolean;
+    disabled: boolean;
+    _checkedInputs: Array<HTMLInputElement>;
+    _currentSelectedLabel: string;
+    windowEventManager: EventManager;
+    eventManager: EventManager;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string, any>): void;
+    private _eventsHandler;
+    private _eventsDispatcher;
+    private _getCheckedValues;
+    /** Render UX */
+    private _onRadioChange;
+    private _onMultiSelectChange;
+    optionsListClasses(): any;
+    optionsListStyles(): {};
+    optionsContent(): import("lit").TemplateResult<1> | undefined;
+    selectRadios(): import("lit").TemplateResult<1>;
+    selectCheckboxes(): import("lit").TemplateResult<1>;
+    currentRadioLabel(): import("lit").TemplateResult<1> | undefined;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}
+export {};

package/dist/components/number-field/index.d.ts

@@ -0,0 +1,2 @@
+import { NumberField } from './number-field';
+export { NumberField };

package/dist/components/number-field/number-field.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+import '../button-icon';
+export declare class NumberField extends LitElement {
+    hideLabel: boolean;
+    layout: string;
+    placeholder: string | undefined;
+    disabled: boolean;
+    required: boolean;
+    id: string;
+    error: boolean;
+    name: string;
+    value: string;
+    step: number;
+    min: number;
+    max: number;
+    _input: HTMLInputElement | undefined;
+    changeEvent(): void;
+    setNumericalValue(operator: string): void;
+    fieldClasses(): any;
+    inputClasses(): any;
+    labelClasses(): any;
+    renderLabel(): import("lit").TemplateResult<1>;
+    renderButtons(): import("lit").TemplateResult<1>;
+    renderNumber(): import("lit").TemplateResult<1>;
+    renderErrorMessage(): import("lit").TemplateResult<1> | undefined;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}

package/dist/{packages/web-components/components → components}/number-field/number-field.js

@@ -1,24 +1,21 @@
-import "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
-import { html as o } 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 c } 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 { classMap as d } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/class-map.js";
-import { query as b } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/query.js";
-import { ifDefined as h } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/if-defined.js";
-import { debounce as f } from "../../scripts/utilities/debounce.js";
-import { global as v } from "../../styles/global.js";
-import { settings as y } from "../../scripts/settings.js";
-import { mergeStyles as g } from "../../scripts/mergeStyles.js";
+import { css as m, LitElement as c, html as o } from "lit";
+import { customElement as b } from "lit/decorators/custom-element.js";
+import { property as i } from "lit/decorators/property.js";
+import { classMap as d } from "lit/directives/class-map.js";
+import { query as h } from "lit/decorators/query.js";
+import { ifDefined as f } from "lit/directives/if-defined.js";
+import { debounce as v } from "../../scripts/utilities/debounce.js";
+import { global as y } from "../../styles/global.js";
+import { settings as g } from "../../scripts/settings.js";
+import { mergeStyles as x } from "../../scripts/mergeStyles.js";
 import "../button-icon/button-icon.js";
-import { css as x } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
-var $ = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, t = (r, n, a, l) => {
-  for (var s = l > 1 ? void 0 : l ? _(n, a) : n, u = r.length - 1, p; u >= 0; u--)
+var _ = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, t = (r, n, a, l) => {
+  for (var s = l > 1 ? void 0 : l ? $(n, a) : n, u = r.length - 1, p; u >= 0; u--)
     (p = r[u]) && (s = (l ? p(n, a, s) : p(s)) || s);
-  return l && s && $(n, a, s), s;
+  return l && s && _(n, a, s), s;
 };
-const { prefix: w } = y;
-let e = class extends m {
+const { prefix: w } = g;
+let e = class extends c {
   constructor() {
     super(...arguments), this.hideLabel = !1, this.layout = "arrows", this.placeholder = void 0, this.disabled = !1, this.required = !1, this.id = "", this.error = !1, this.name = "", this.value = "1", this.step = 1, this.min = 1, this.max = 1e3;
   }
@@ -36,7 +33,7 @@ let e = class extends m {
   setNumericalValue(r) {
     this.disabled = !0;
     const n = this.value;
-    this._input && (r === "plus" ? (this._input.stepUp(), this.value = this._input.value, this.disabled = !1) : r === "minus" ? (this._input.stepDown(), this.value = this._input.value, this.disabled = !1) : (this.value = this._input.value, this.disabled = !1)), n !== this.value && f(() => {
+    this._input && (r === "plus" ? (this._input.stepUp(), this.value = this._input.value, this.disabled = !1) : r === "minus" ? (this._input.stepDown(), this.value = this._input.value, this.disabled = !1) : (this.value = this._input.value, this.disabled = !1)), n !== this.value && v(() => {
       this.changeEvent();
     }, 500)();
   }
@@ -121,7 +118,7 @@ let e = class extends m {
                 value="${this.value}"
                 ?disabled="${this.disabled}"
                 ?required="${this.required}"
-                placeholder="${h(this.placeholder)}"
+                placeholder="${f(this.placeholder)}"
                 @keyup="${() => this.setNumericalValue("value")}"
                 >
         </div>
@@ -147,9 +144,9 @@ let e = class extends m {
             `;
   }
 };
-e.styles = g([
-  v,
-  x`
+e.styles = x([
+  y,
+  m`
             :host([disabled]) {
                 opacity: 0.4;
                 pointer-events: none;
@@ -329,10 +326,10 @@ t([
   i({ type: Number })
 ], e.prototype, "max", 2);
 t([
-  b("input")
+  h("input")
 ], e.prototype, "_input", 2);
 e = t([
-  c(`${w}-number-field`)
+  b(`${w}-number-field`)
 ], e);
 export {
   e as NumberField

package/dist/components/overlay/index.d.ts

@@ -0,0 +1,2 @@
+import { Overlay } from './overlay';
+export { Overlay };

package/dist/components/overlay/overlay.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+export declare class Overlay extends LitElement {
+    colorText: string;
+    colorBg: string;
+    _visible: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    openOverlay(): void;
+    closeOverlay(): void;
+    overlayClasses(): any;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}

package/dist/components/overlay/overlay.js

@@ -0,0 +1,74 @@
+import { css as c, LitElement as p, html as m } from "lit";
+import { customElement as d } from "lit/decorators/custom-element.js";
+import { property as v } from "lit/decorators/property.js";
+import { state as y } from "lit/decorators/state.js";
+import { classMap as b } from "lit/directives/class-map.js";
+import { global as h } from "../../styles/global.js";
+import { settings as u } from "../../scripts/settings.js";
+import { mergeStyles as f } from "../../scripts/mergeStyles.js";
+var w = Object.defineProperty, O = Object.getOwnPropertyDescriptor, l = (r, s, i, t) => {
+  for (var e = t > 1 ? void 0 : t ? O(s, i) : s, n = r.length - 1, a; n >= 0; n--)
+    (a = r[n]) && (e = (t ? a(s, i, e) : a(e)) || e);
+  return t && e && w(s, i, e), e;
+};
+const { prefix: _ } = u;
+let o = class extends p {
+  constructor() {
+    super(...arguments), this.colorText = "", this.colorBg = "", this._visible = !1;
+  }
+  connectedCallback() {
+    super.connectedCallback(), window.addEventListener("overlay-open", this.openOverlay.bind(this)), window.addEventListener("overlay-close", this.closeOverlay.bind(this));
+  }
+  disconnectedCallback() {
+    window.removeEventListener("overlay-open", this.openOverlay.bind(this)), window.removeEventListener("overlay-close", this.closeOverlay.bind(this)), super.disconnectedCallback();
+  }
+  openOverlay() {
+    this._visible = !0;
+  }
+  closeOverlay() {
+    this._visible = !1;
+  }
+  overlayClasses() {
+    const r = {};
+    return this._visible && (r["menu-overlay--visible"] = !0), r;
+  }
+  render() {
+    return m`
+            <div class="menu-overlay${b(this.overlayClasses())}"></div>
+        `;
+  }
+};
+o.styles = f([
+  h,
+  c`
+            .menu-overlay {
+                display: none;
+                position: absolute;
+                inset: 0;
+                height: 100%;
+                width: 100%;
+                z-index: 500;
+                background-color: rgb(var(--um-color-modal-bg, 0,0,0), 0.7);
+                pointer-events: none;
+            }
+
+            .menu-overlay--visible {
+                display: block;
+            }
+        `
+]);
+l([
+  v()
+], o.prototype, "colorText", 2);
+l([
+  v()
+], o.prototype, "colorBg", 2);
+l([
+  y()
+], o.prototype, "_visible", 2);
+o = l([
+  d(`${_}-overlay`)
+], o);
+export {
+  o as Overlay
+};

package/dist/components/page/index.d.ts

@@ -0,0 +1,2 @@
+import { Page } from './page';
+export { Page };

package/dist/components/page/page.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+import { PageWidthScale } from '../../types';
+export declare class Page extends LitElement {
+    width: PageWidthScale;
+    sectionMargins: number | undefined;
+    divider: boolean;
+    colorText: string;
+    colorBg: string;
+    pageClasses(): any;
+    pageStyles(): {};
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}