@pushengineering/umg-web-components 2.0.0

package/dist/packages/web-components/components/event-table/event-table.js

@@ -0,0 +1,74 @@
+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 p } 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 d } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/property.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 u } from "../../scripts/settings.js";
+import { mergeStyles as b } from "../../scripts/mergeStyles.js";
+import "./event.js";
+import "./event-date.js";
+import "./event-content.js";
+import { css as h } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
+var g = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (i, r, o, t) => {
+  for (var e = t > 1 ? void 0 : t ? w(r, o) : r, l = i.length - 1, a; l >= 0; l--)
+    (a = i[l]) && (e = (t ? a(r, o, e) : a(e)) || e);
+  return t && e && g(r, o, e), e;
+};
+const { prefix: x } = u;
+let s = class extends p {
+  constructor() {
+    super(...arguments), this.divider = !1;
+  }
+  tableClasses() {
+    return {
+      "inline-event--divider": this.divider
+    };
+  }
+  render() {
+    return m`
+            <div
+                part="event-table"
+                class="inline-event${c(this.tableClasses())}"
+                role="table"
+                aria-label="Events"
+                >
+                <div role="rowgroup">
+                    <slot name="event"></slot>
+                </div>
+            </div>
+        `;
+  }
+};
+s.styles = b([
+  f,
+  h`
+            :host {
+                width: 100%;
+            }
+
+            /* Rows */
+            .inline-event > * {
+                color: inherit;
+                display: flex;
+                flex-direction: column;
+                gap: var(--um-space-32, 2rem);
+                width: 100%;
+            }
+
+            /* Divider */
+            .inline-event--divider > * {
+                gap: var(--um-space-20, 1.25rem);
+            }
+        `
+]);
+n([
+  d({ type: Boolean })
+], s.prototype, "divider", 2);
+s = n([
+  v(`${x}-event-table`)
+], s);
+export {
+  s as EventTable
+};

package/dist/packages/web-components/components/event-table/event.js

@@ -0,0 +1,45 @@
+import "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as l } 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 a } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { global as v } from "../../styles/global.js";
+import { settings as f } from "../../scripts/settings.js";
+import { mergeStyles as c } from "../../scripts/mergeStyles.js";
+import { css as _ } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
+var d = Object.defineProperty, u = Object.getOwnPropertyDescriptor, x = (n, r, m, t) => {
+  for (var e = t > 1 ? void 0 : t ? u(r, m) : r, i = n.length - 1, s; i >= 0; i--)
+    (s = n[i]) && (e = (t ? s(r, m, e) : s(e)) || e);
+  return t && e && d(r, m, e), e;
+};
+const { prefix: g } = f;
+let o = class extends p {
+  render() {
+    return l`
+        <div class="inline-event__item" part="event-item" role="row">
+            <slot></slot>
+        </div>
+        `;
+  }
+};
+o.styles = c([
+  v,
+  _`
+            .inline-event__item {
+                display: flex;
+                gap: var(--um-space-32, 2rem);
+                width: 100%;
+            }
+            @media only screen and (max-width: 48rem) {
+                .inline-event__item {
+                    flex-direction: column;
+                    gap: var(--um-space-8, 0.5rem);
+                }
+            }
+        `
+]);
+o = x([
+  a(`${g}-event`)
+], o);
+export {
+  o as Event
+};

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

@@ -0,0 +1,153 @@
+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 l } from "../../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
+import { customElement as f } 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 g } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/class-map.js";
+import { styleMap as m } 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 h } from "../../scripts/settings.js";
+import { mergeStyles as v } from "../../scripts/mergeStyles.js";
+import { css as y } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
+var _ = Object.defineProperty, b = Object.getOwnPropertyDescriptor, e = (t, i, n, a) => {
+  for (var r = a > 1 ? void 0 : a ? b(i, n) : i, p = t.length - 1, d; p >= 0; p--)
+    (d = t[p]) && (r = (a ? d(i, n, r) : d(r)) || r);
+  return a && r && _(i, n, r), r;
+};
+const { prefix: x } = h;
+let o = class extends l {
+  constructor() {
+    super(...arguments), this.width = "page-width", this.paddingTop = "", this.paddingBottom = "", this.socialsHidden = !1, this.centerContent = !1, this.colortext = "", this.colorBg = "";
+  }
+  footerClasses() {
+    return {
+      footer: !0,
+      "footer--socials-hidden": this.socialsHidden,
+      "footer--center": this.centerContent
+    };
+  }
+  footerStyles() {
+    let t = {};
+    return this.paddingTop && (t = {
+      ...t,
+      "--um-space-footer-padding-top": "var(--um-space-" + this.paddingTop + ")"
+    }), this.paddingBottom && (t = {
+      ...t,
+      "--um-space-footer-padding-bottom": "var(--um-space-" + this.paddingBottom + ")"
+    }), this.colortext && (t = {
+      ...t,
+      "--um-color-section-text": this.colortext
+    }), this.colorBg && (t = {
+      ...t,
+      "--um-color-section-bg": this.colorBg
+    }), t;
+  }
+  footerInnerStyles() {
+    let t = {};
+    return this.width === "full-width" && (t = {
+      ...t,
+      "--um-size-page-width": "100%"
+    }), t;
+  }
+  render() {
+    return c`
+            <footer
+                part="footer"
+                class="${g(this.footerClasses())}"
+                style="${m(this.footerStyles())}"
+                >
+                <div
+                    part="footer-inner"
+                    class="footer__inner"
+                    style="${m(this.footerInnerStyles())}"
+                    >
+                    <slot name="links"></slot>
+                    <div class="footer__socials">
+                        <slot name="socials"></slot>
+                    </div>
+                </div>
+            </footer>
+        `;
+  }
+};
+o.styles = v([
+  u,
+  y`
+            .footer {
+                color: rgba(var(--um-color-section-text, var(--um-color-base-text, 62,62,62)), 1);
+                background-color: rgba(var(--um-color-section-bg, var(--um-color-base-bg, 246,246,246)), 1);
+            }
+            .footer__inner {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                margin: 0 auto;
+                max-width: var(--um-size-page-width, 75rem);
+            }
+
+            @media screen and (max-width: 48rem) {
+                .footer {
+                    padding-top: var(--um-space-footer-padding-top, 3rem);
+                    padding-bottom: var(--um-space-footer-padding-bottom, 3rem);
+                }
+                .footer__inner {
+                    flex-direction: column;
+                    padding-left: calc(var(--um-space-footer-padding-left, 1.5rem) * 0.5);
+                    padding-right: calc(var(--um-space-footer-padding-right, 1.5rem) * 0.5);
+                }
+                .footer__socials {
+                    margin-bottom: var(--um-space-32, 2rem);
+                    order: -1;
+                }
+            }
+            @media screen and (min-width: 48.06rem) {
+                .footer {
+                    padding-top: var(--um-space-footer-padding-top, 3rem);
+                    padding-bottom: var(--um-space-footer-padding-bottom, 3rem);
+                }
+                .footer__inner {
+                    gap: var(--um-space-24, 1.5rem);
+                    padding-left: var(--um-space-footer-padding-left, 1.5rem);
+                    padding-right: var(--um-space-footer-padding-right, 1.5rem);
+                }
+            }
+
+            /* Socials hidden */
+            .footer--socials-hidden .footer__socials {
+                display: none;
+            }
+
+            /* Centered content */
+            .footer--center .footer__inner {
+                gap: var(--um-space-32, 2rem);
+                justify-content: center;
+            }
+        `
+]);
+e([
+  s()
+], o.prototype, "width", 2);
+e([
+  s({ type: Number })
+], o.prototype, "paddingTop", 2);
+e([
+  s({ type: Number })
+], o.prototype, "paddingBottom", 2);
+e([
+  s({ type: Boolean })
+], o.prototype, "socialsHidden", 2);
+e([
+  s({ type: Boolean })
+], o.prototype, "centerContent", 2);
+e([
+  s()
+], o.prototype, "colortext", 2);
+e([
+  s()
+], o.prototype, "colorBg", 2);
+o = e([
+  f(`${x}-footer`)
+], o);
+export {
+  o as Footer
+};

package/dist/packages/web-components/components/grid/grid-cell.js

@@ -0,0 +1,40 @@
+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 f } from "../../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
+import { customElement as a } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { global as c } from "../../styles/global.js";
+import { settings as n } from "../../scripts/settings.js";
+import { mergeStyles as g } 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 d = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, h = (l, e, s, t) => {
+  for (var r = t > 1 ? void 0 : t ? _(e, s) : e, o = l.length - 1, i; o >= 0; o--)
+    (i = l[o]) && (r = (t ? i(e, s, r) : i(r)) || r);
+  return t && r && d(e, s, r), r;
+};
+const { prefix: u } = n;
+let m = class extends f {
+  render() {
+    return p`
+        <div
+            class="grid-item"
+            part="grid-cell"
+            >
+            <slot></slot>
+        </div>
+    `;
+  }
+};
+m.styles = g([
+  c,
+  v`
+            .grid-item {
+                height: 100%;
+            }
+        `
+]);
+m = h([
+  a(`${u}-grid-cell`)
+], m);
+export {
+  m as GridCell
+};

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

@@ -0,0 +1,106 @@
+import "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as u } 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 m } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/property.js";
+import { classMap as a } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/class-map.js";
+import { styleMap as c } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/style-map.js";
+import { global as f } from "../../styles/global.js";
+import { grid as h } from "../../styles/grid.js";
+import { settings as k } from "../../scripts/settings.js";
+import { mergeStyles as y } from "../../scripts/mergeStyles.js";
+import "./grid-cell.js";
+import { css as b } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
+var w = Object.defineProperty, v = Object.getOwnPropertyDescriptor, e = (s, r, l, i) => {
+  for (var t = i > 1 ? void 0 : i ? v(r, l) : r, p = s.length - 1, d; p >= 0; p--)
+    (d = s[p]) && (t = (i ? d(r, l, t) : d(t)) || t);
+  return i && t && w(r, l, t), t;
+};
+const { prefix: C } = k;
+let o = class extends g {
+  constructor() {
+    super(...arguments), this.columns = 4, this.mobileColumns = "1", this.gapless = !1, this.fill = !1;
+  }
+  gridClasses() {
+    const s = {};
+    return s["grid--gapless"] = !!this.gapless, s["grid--fill"] = !!this.fill, s["grid--" + this.columns + "-col-tablet"] = this.columns < 3, s["grid--3-col-tablet"] = this.columns >= 3, s["grid--" + this.columns + "-col-desktop"] = !0, s["grid--" + this.mobileColumns + "-col-tablet-down"] = !0, s;
+  }
+  gridStyles() {
+    let s = {};
+    return this.columns === 6 && (s = {
+      ...s,
+      "--um-grid-desktop-columns-width": "16.66%",
+      "--um-grid-desktop-columns": "6",
+      "--um-grid-desktop-gaps": "5",
+      "--um-grid-desktop-peek": "1.5"
+    }), this.columns === 5 && (s = {
+      ...s,
+      "--um-grid-desktop-columns-width": "20%",
+      "--um-grid-desktop-columns": "5",
+      "--um-grid-desktop-gaps": "4",
+      "--um-grid-desktop-peek": "2"
+    }), this.columns === 4 && (s = {
+      ...s,
+      "--um-grid-desktop-columns-width": "25%",
+      "--um-grid-desktop-columns": "4",
+      "--um-grid-desktop-gaps": "3",
+      "--um-grid-desktop-peek": "2.5"
+    }), this.columns === 3 && (s = {
+      ...s,
+      "--um-grid-desktop-columns-width": "33.33%",
+      "--um-grid-desktop-columns": "3",
+      "--um-grid-desktop-gaps": "2",
+      "--um-grid-desktop-peek": "3"
+    }), this.columns === 2 && (s = {
+      ...s,
+      "--um-grid-desktop-columns-width": "50%",
+      "--um-grid-desktop-columns": "2",
+      "--um-grid-desktop-gaps": "1",
+      "--um-grid-desktop-peek": "4"
+    }), this.columns === 1 && (s = {
+      ...s,
+      "--um-grid-desktop-columns-width": "100%",
+      "--um-grid-desktop-columns": "1",
+      "--um-grid-desktop-gaps": "0",
+      "--um-grid-desktop-peek": "9"
+    }), s;
+  }
+  render() {
+    return u`
+        <div
+            class="grid${a(this.gridClasses())}"
+            style="${c(this.gridStyles())}"
+            part="grid"
+            >
+            <slot></slot>
+        </div>
+    `;
+  }
+};
+o.styles = y([
+  f,
+  b`
+            :host {
+                display: block;
+            }
+        `,
+  h
+]);
+e([
+  m({ type: Number })
+], o.prototype, "columns", 2);
+e([
+  m()
+], o.prototype, "mobileColumns", 2);
+e([
+  m({ type: Boolean })
+], o.prototype, "gapless", 2);
+e([
+  m({ type: Boolean })
+], o.prototype, "fill", 2);
+o = e([
+  n(`${C}-grid`)
+], o);
+export {
+  o as Grid
+};