@pushengineering/umg-web-components 2.0.0

package/dist/packages/web-components/components/number-field/number-field.js

@@ -0,0 +1,339 @@
+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 "../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--)
+    (p = r[u]) && (s = (l ? p(n, a, s) : p(s)) || s);
+  return l && s && $(n, a, s), s;
+};
+const { prefix: w } = y;
+let e = class extends m {
+  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;
+  }
+  changeEvent() {
+    this.dispatchEvent(new CustomEvent("change", {
+      detail: {
+        eventName: this.name,
+        fieldId: this.id,
+        value: this.value
+      },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  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.changeEvent();
+    }, 500)();
+  }
+  fieldClasses() {
+    return {
+      "label-hidden": this.hideLabel,
+      "field--required": this.required,
+      "field--symbols": this.layout === "symbols",
+      "field--min": Number(this.value) === this.min,
+      "field--max": Number(this.value) >= this.max
+    };
+  }
+  inputClasses() {
+    return {
+      "input--error": this.error
+    };
+  }
+  labelClasses() {
+    return {
+      "visually-hidden": this.hideLabel
+    };
+  }
+  renderLabel() {
+    return o`
+            <label class="field__label${d(this.labelClasses())}" for="${this.id}">
+                <slot name="label">
+                    <umg-text as="span" variant="bodySm">Label:</umg-text>
+                </slot>
+            </label>
+        `;
+  }
+  renderButtons() {
+    return this.layout === "symbols" ? o`
+            <umg-button-icon
+                part="increase"
+                class="spinner increase"
+                icon="plus"
+                size="small"
+                @click="${() => this.setNumericalValue("plus")}"
+                >
+            </umg-button-icon>
+            <umg-button-icon
+                part="decrease"
+                class="spinner decrease"
+                icon="minus"
+                size="small"
+                @click="${() => this.setNumericalValue("minus")}"
+                >
+            </umg-button-icon>
+        ` : o`
+                <umg-button-icon
+                    part="increase"
+                    class="spinner increase"
+                    icon="chevron-up"
+                    size="xSmall"
+                    @click="${() => this.setNumericalValue("plus")}"
+                    >
+                </umg-button-icon>
+                <umg-button-icon
+                    part="decrease"
+                    class="spinner decrease"
+                    icon="chevron-down"
+                    size="xSmall"
+                    @click="${() => this.setNumericalValue("minus")}"
+                    >
+                </umg-button-icon>
+            `;
+  }
+  renderNumber() {
+    return o`
+        <div class="input-container">
+            ${this.renderButtons()}
+            <input
+                part="text-field"
+                class="input${d(this.inputClasses())}"
+                id="${this.id}"
+                name="${this.name}"
+                step="${this.step}"
+                min="${this.min}"
+                max="${this.max}"
+                type="number"
+                value="${this.value}"
+                ?disabled="${this.disabled}"
+                ?required="${this.required}"
+                placeholder="${h(this.placeholder)}"
+                @keyup="${() => this.setNumericalValue("value")}"
+                >
+        </div>
+        `;
+  }
+  renderErrorMessage() {
+    if (this.error)
+      return o`
+                <span class="error-text">
+                    <slot name="error-message"></slot>
+                </span>
+            `;
+  }
+  render() {
+    return o`
+            <div class="field${d(this.fieldClasses())}">
+                <div class="field__inner">
+                    ${this.renderLabel()}
+                    ${this.renderNumber()}
+                    ${this.renderErrorMessage()}
+                </div>
+            </div>
+            `;
+  }
+};
+e.styles = g([
+  v,
+  x`
+            :host([disabled]) {
+                opacity: 0.4;
+                pointer-events: none;
+            }
+
+            :host([disabled]) .spinner:hover {
+                background-color: rgb(0,0,0,0);
+            }
+
+            /** Field container */
+            .field {
+                display: flex;
+                flex-direction: column;
+                position: relative;
+                font-size: var(--um-font-size-bodySm, 0.875rem);
+            }
+
+            .field:not(.label-hidden) .field__inner {
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+            }
+
+            /** Property styles */
+            .field--inline .field__inner {
+                flex-direction: row;
+            }
+            .field--required .input-container::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                bottom: 0;
+                display: block;
+                border-right: 0.25rem solid rgba(var(--um-color-base-text-warning, 200,0,0), 0.7);
+                width: 0;
+                height: 100%;
+                z-index: 1;
+            }
+
+            /* Field label */
+            .field__label {
+                color: inherit;
+                font-size: inherit;
+                margin-bottom: var(--um-space-4, 0.25rem);
+            }
+
+            /* Input container */
+            .input-container {
+                position: relative;
+                -moz-appearance: textfield;
+            }
+
+            /* Input tag */
+            input {
+                border: var(--um-border-input-width, 0.0625rem) solid rgba(var(--um-color-input-border, var(--um-color-section-text, 0,0,0), var(--um-opacity-input-border, 0.2)));
+                border-radius: var(--um-border-input-radius, 0);
+                font-family: var(--um-font-family-body, Roboto, Arial, Helvetica, sans-serif);
+                font-size: inherit;
+                padding: 0 var(--um-space-8, 0.5rem);
+                height: var(--um-space-40);
+                width: 3.5rem;
+            }
+            input::-webkit-outer-spin-button {
+                appearance: none;
+            }
+            input::-webkit-inner-spin-button {
+                appearance: none;
+            }
+
+            /** Input states */
+            .input--error {
+                border: 0.0625rem solid rgba(var(--um-color-base-text-warning, 245,0,0), 1);
+            }
+
+            /** Spinner buttons */
+            :host(:not([disabled])) .field--min .spinner.decrease::part(button-icon) {
+                opacity: 0.4;
+                pointer-events: none;
+                cursor: default;
+            }
+            :host(:not([disabled])) .field--max .spinner.increase::part(button-icon) {
+                opacity: 0.4;
+                pointer-events: none;
+                cursor: default;
+            }
+            .spinner {
+                position: absolute;
+                height: 50%;
+                right: 0rem;
+                border-left: 0.0625rem solid rgba(var(--um-color-input-border, var(--um-color-section-text, 0,0,0), var(--um-opacity-input-border, 0.2)));
+                --um-space-button-icon-padding: 0;
+            }
+            .spinner::part(button-icon) {
+                padding: 0.2rem;
+            }
+            .spinner:hover {
+                background-color: rgb(0,0,0,0.1);
+            }
+            .spinner.increase {
+                top: 0;
+            }
+            .spinner.decrease {
+                bottom: 0;
+            }
+
+            /** Symbol spinner buttons */
+            .field--symbols .input-container {
+                display: flex;
+                align-items: stretch;
+            }
+            .field--symbols input {
+                order: 2;
+                text-align: center;
+                height: 1.75rem;
+                width: 2.5rem;
+            }
+            .field--symbols .spinner {
+                border: none;
+                position: relative;
+                height: 1.75rem;
+            }
+            .field--symbols .spinner::part(button-icon) {
+                padding: 0.45rem;
+            }
+            .field--symbols .spinner.increase {
+                border-left: none;
+                order: 3;
+            }
+            .field--symbols .spinner.decrease {
+                border-right: none;
+                order: 1;
+            }
+
+            /** Error text */
+            .error-text {
+                color: rgba(var(--um-color-base-text-warning, 245,0,0), 1);
+                font-size: calc(var(--um-font-size-body-scale, 1) * var(--um-font-size-body-sm, 0.875rem));
+                padding-top: var(--um-space-4, 0.25rem);
+            }
+        `
+]);
+t([
+  i({ type: Boolean })
+], e.prototype, "hideLabel", 2);
+t([
+  i()
+], e.prototype, "layout", 2);
+t([
+  i()
+], e.prototype, "placeholder", 2);
+t([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+t([
+  i({ type: Boolean })
+], e.prototype, "required", 2);
+t([
+  i()
+], e.prototype, "id", 2);
+t([
+  i({ type: Boolean })
+], e.prototype, "error", 2);
+t([
+  i()
+], e.prototype, "name", 2);
+t([
+  i({ reflect: !0 })
+], e.prototype, "value", 2);
+t([
+  i({ type: Number })
+], e.prototype, "step", 2);
+t([
+  i({ type: Number })
+], e.prototype, "min", 2);
+t([
+  i({ type: Number })
+], e.prototype, "max", 2);
+t([
+  b("input")
+], e.prototype, "_input", 2);
+e = t([
+  c(`${w}-number-field`)
+], e);
+export {
+  e as NumberField
+};

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

@@ -0,0 +1,77 @@
+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 c } from "../../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
+import { customElement as m } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as v } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as d } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/state.js";
+import { classMap as y } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/class-map.js";
+import { global as b } from "../../styles/global.js";
+import { settings as h } from "../../scripts/settings.js";
+import { mergeStyles as f } from "../../scripts/mergeStyles.js";
+import { css as u } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
+var w = Object.defineProperty, O = Object.getOwnPropertyDescriptor, i = (r, s, l, t) => {
+  for (var e = t > 1 ? void 0 : t ? O(s, l) : s, n = r.length - 1, a; n >= 0; n--)
+    (a = r[n]) && (e = (t ? a(s, l, e) : a(e)) || e);
+  return t && e && w(s, l, e), e;
+};
+const { prefix: _ } = h;
+let o = class extends c {
+  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 p`
+            <div class="menu-overlay${y(this.overlayClasses())}"></div>
+        `;
+  }
+};
+o.styles = f([
+  b,
+  u`
+            .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;
+            }
+        `
+]);
+i([
+  v()
+], o.prototype, "colorText", 2);
+i([
+  v()
+], o.prototype, "colorBg", 2);
+i([
+  d()
+], o.prototype, "_visible", 2);
+o = i([
+  m(`${_}-overlay`)
+], o);
+export {
+  o as Overlay
+};

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

@@ -0,0 +1,105 @@
+import "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as c } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
+import { LitElement as g } from "../../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
+import { customElement as n } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as s } 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 { styleMap as h } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/style-map.js";
+import { global as u } from "../../styles/global.js";
+import { settings as b } from "../../scripts/settings.js";
+import { mergeStyles as f } from "../../scripts/mergeStyles.js";
+import { css as v } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
+var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, o = (e, i, p, a) => {
+  for (var t = a > 1 ? void 0 : a ? x(i, p) : i, m = e.length - 1, l; m >= 0; m--)
+    (l = e[m]) && (t = (a ? l(i, p, t) : l(t)) || t);
+  return a && t && y(i, p, t), t;
+};
+const { prefix: _ } = b;
+let r = class extends g {
+  constructor() {
+    super(...arguments), this.divider = !1, this.colorText = "", this.colorBg = "";
+  }
+  pageClasses() {
+    return {
+      "page--divider": this.divider
+    };
+  }
+  pageStyles() {
+    let e = {};
+    return this.sectionMargins && (e = {
+      ...e,
+      "--um-space-section-margin-top": this.sectionMargins / 16 + "rem",
+      "--um-space-section-margin-bottom": this.sectionMargins / 16 + "rem"
+    }), this.width && (e = {
+      ...e,
+      "--um-size-page-width": this.width / 16 + "rem"
+    }), this.colorText && (e = {
+      ...e,
+      "--um-color-page-text": this.colorText
+    }), this.colorBg && (e = {
+      ...e,
+      "--um-color-page-bg": this.colorBg
+    }), e;
+  }
+  render() {
+    return c`
+        <main
+            id="page"
+            class="page${d(this.pageClasses())}"
+            style="${h(this.pageStyles())}"
+            part="page"
+            >
+            <div class="page__inner" part="page-inner">
+                <slot></slot>
+            </div>
+        </main>
+      `;
+  }
+};
+r.styles = f([
+  u,
+  v`
+            :host {
+                display: block;
+                position: relative;
+                width: 100%;
+            }
+
+            .page {
+                color: rgb(var(--um-color-page-text, var(--um-color-base-text)));
+                background-color: rgb(var(--um-color-page-bg, var(--um-color-base-bg)));
+            }
+
+            /* Divider */
+            .page--divider {
+                border-bottom: 0.065rem solid rgba(var(--um-color-border),1);
+                border-top: 0.065rem solid rgba(var(--um-color-border),1);
+            }
+
+            /* First section's top margin is removed if set by the page */
+            ::slotted(*:first-child) {
+                --um-space-section-margin-top: 0;
+            }
+        `
+]);
+o([
+  s({ type: Number })
+], r.prototype, "width", 2);
+o([
+  s({ type: Number })
+], r.prototype, "sectionMargins", 2);
+o([
+  s({ type: Boolean })
+], r.prototype, "divider", 2);
+o([
+  s()
+], r.prototype, "colorText", 2);
+o([
+  s()
+], r.prototype, "colorBg", 2);
+r = o([
+  n(`${_}-page`)
+], r);
+export {
+  r as Page
+};

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

@@ -0,0 +1,163 @@
+import "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as a } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
+import { LitElement as c } from "../../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
+import { customElement as v } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as m } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/property.js";
+import { classMap as u } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/class-map.js";
+import { styleMap as b } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/style-map.js";
+import { EventManager as d } from "../../classes/event-manager/event-manager.js";
+import { global as h } from "../../styles/global.js";
+import { settings as f } from "../../scripts/settings.js";
+import { mergeStyles as g } from "../../scripts/mergeStyles.js";
+import "../box/box.js";
+import "../vertical-stack/vertical-stack.js";
+import "../horizontal-stack/horizontal-stack.js";
+import "../button-icon/button-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 x = Object.defineProperty, w = Object.getOwnPropertyDescriptor, l = (e, t, r, s) => {
+  for (var o = s > 1 ? void 0 : s ? w(t, r) : t, n = e.length - 1, p; n >= 0; n--)
+    (p = e[n]) && (o = (s ? p(t, r, o) : p(o)) || o);
+  return s && o && x(t, r, o), o;
+};
+const { prefix: _ } = f;
+let i = class extends c {
+  constructor() {
+    super(...arguments), this.visible = !1, this.eventManager = new d(this);
+  }
+  _eventsDispatcher(e) {
+    if (!e)
+      throw new Error("Missing custom event type");
+    const t = { bubbles: !0, composed: !0 }, r = {};
+    e === "close" && (e = "close-popover", this.eventManager.dispatchCustomEvent(e, r, t));
+  }
+  closePopover() {
+    this.visible = !1, this._eventsDispatcher("close");
+  }
+  popoverClasses() {
+    return {
+      "popover--visible": this.visible
+    };
+  }
+  popoverStyles() {
+    return {
+      visibility: this.visible ? "visible" : "hidden"
+    };
+  }
+  closeButton() {
+    if (this.visible)
+      return a`
+                <umg-button-icon
+                    part="close-button"
+                    class="close-button"
+                    icon="close"
+                    padding="4"
+                    @click="${this.closePopover}"
+                    >
+                </umg-button-icon>
+            `;
+  }
+  render() {
+    return a`
+            <div
+                class="popover${u(this.popoverClasses())}"
+                style="${b(this.popoverStyles())}"
+                >
+                <div class="popover-inner">
+                    <umg-vertical-stack
+                        align="center"
+                        justify="center"
+                        >
+                        <umg-box
+                            class="popover-content"
+                            opacity="1"
+                            padding="24"
+                            borderRadius="40"
+                            border
+                            >
+                            <umg-vertical-stack gap="20">
+                                <umg-horizontal-stack
+                                    class="popover-title"
+                                    align="center"
+                                    justify="center"
+                                    mobileJustify="space-between"
+                                    >
+                                    <slot name="title" alignment="start"></slot>
+                                    ${this.closeButton()}
+                                </umg-horizontal-stack>
+                                <slot name="content"></slot>
+                            </umg-vertical-stack>
+                        </umg-box>
+                    </umg-vertical-stack>
+                </div>
+            </div>
+        `;
+  }
+};
+i.styles = g([
+  h,
+  y`
+            .popover {
+                background-color: rgb(var(--um-color-box-bg), 0.95);
+                position: fixed;
+                visibility: hidden;
+                inset: 0;
+                z-index: 100;
+                flex-direction: column;
+                justify-content: stretch;
+                overflow: hidden;
+            }
+            
+            .popover-inner {
+                height: 100%;
+                width: 100%;
+            }
+            
+            @media only screen and (hover: hover) {
+                .close-button {
+                    display: none;
+                }
+                .popover {
+                    position: absolute;
+                    border-radius: var(--um-border-caption-card-radius);
+                }
+                .popover-inner {
+                    opacity: 0;
+                    max-width: 320px;
+                    margin: 0 auto;
+                }
+                .popover-inner .popover-content::part(box) {
+                    border: none;
+                    --um-opacity-box-bg: 0;
+                }
+                .popover--visible .popover-inner {
+                    opacity: 1;
+                    transition: opacity 0.3s
+                }
+            }
+
+            @media screen and (hover: none) {
+                .popover-inner {
+                    padding: var(--um-space-24);
+                    transform: translateX(100%);
+                    max-width: 22rem;
+                    margin: 0 auto;
+                }
+                .popover--visible .popover-inner {
+                    transform: translateX(0);
+                    transition: all 0.3s
+                }
+                .popover-inner .popover-title::part(horizontal-stack) {
+                    justify-content: space-between;
+                }
+            }
+        `
+]);
+l([
+  m({ type: Boolean, reflect: !0 })
+], i.prototype, "visible", 2);
+i = l([
+  v(`${_}-popover`)
+], i);
+export {
+  i as Popover
+};