@pushengineering/umg-web-components 2.0.0

package/dist/packages/web-components/components/deferred-media/deferred-media.js

@@ -0,0 +1,212 @@
+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 u } 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 { state as l } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/state.js";
+import { classMap as h } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/class-map.js";
+import { styleMap as f } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/style-map.js";
+import { global as b } from "../../styles/global.js";
+import { settings as _ } from "../../scripts/settings.js";
+import { mergeStyles as y } from "../../scripts/mergeStyles.js";
+import "../modal/modal.js";
+import "../button-icon/button-icon.js";
+import { css as v } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
+var g = Object.defineProperty, M = Object.getOwnPropertyDescriptor, i = (e, r, n, s) => {
+  for (var o = s > 1 ? void 0 : s ? M(r, n) : r, p = e.length - 1, m; p >= 0; p--)
+    (m = e[p]) && (o = (s ? m(r, n, o) : m(o)) || o);
+  return s && o && g(r, n, o), o;
+};
+const { prefix: A } = _;
+let t = class extends c {
+  constructor() {
+    super(), this.source = "", this.title = "", this.enableModal = !1, this.showButtonOnHover = !1, this._videoPlaying = !1, this._modalOpen = !1, this.addEventListener("open-modal", this.handleButtonClick), this.addEventListener("close-modal", this.handleButtonClick), this.addEventListener("media-details", this.eventNotifications);
+  }
+  async eventNotifications(e) {
+    e.type === "media-details" && (e.detail.mediaAspectRatio && (this._mediaAspectRatio = e.detail.mediaAspectRatio.toString()), e.detail.mobileMediaAspectRatio ? this._mobileMediaAspectRatio = e.detail.mobileMediaAspectRatio.toString() : e.detail.mediaAspectRatio && (this._mobileMediaAspectRatio = e.detail.mobileMediaAspectRatio.toString()));
+  }
+  handleButtonClick(e) {
+    e.type === "open-modal" && (this.enableModal ? this._modalOpen = !0 : this._videoPlaying = !0), e.type === "close-modal" && (this._videoPlaying = !1, this._modalOpen = !1);
+  }
+  deferredMediaClasses() {
+    return {
+      "deferred-media": !0,
+      "deferred-media--button-hover": this.showButtonOnHover
+    };
+  }
+  deferredMediaStyles() {
+    let e = {};
+    return this._mediaAspectRatio && (e = {
+      ...e,
+      "--um-aspect-ratio": this._mediaAspectRatio
+    }), this._mobileMediaAspectRatio ? e = {
+      ...e,
+      "--um-mobile-aspect-ratio": this._mobileMediaAspectRatio
+    } : this._mediaAspectRatio && (e = {
+      ...e,
+      "--um-mobile-aspect-ratio": this._mediaAspectRatio
+    }), e;
+  }
+  coverTemplate() {
+    return a`
+            <slot name="image"></slot>
+            <div class="deferred-media__play">
+                <slot name="media-play">
+                    <umg-button-icon 
+                        clickAction="open-modal" 
+                        type="button" 
+                        icon="play" 
+                        size="3xLarge" 
+                        label="Click to play a video" 
+                        borderRadius="full" 
+                        borderWidth='40' 
+                        colorBgOpacity="0.1"
+                        padding="24"
+                        extendInteraction
+                        ?border=${!0}
+                        exportparts="button-icon"
+                        >
+                    </umg-button-icon>
+                </slot>
+            </div>
+        `;
+  }
+  createModal() {
+    if (this.enableModal)
+      return a`
+                <umg-modal ?visible=${this._modalOpen}>
+                    ${this.renderVideoInPopup()}
+                </umg-modal>
+            `;
+  }
+  videoTemplate() {
+    return a`
+            <div
+                slot="content"
+                class="video-container"
+                >
+                <iframe
+                    class="video-holder__item"
+                    src="${this.source}"
+                    title="${this.title}"
+                    allow="autoplay; fullscreen; picture-in-picture;"
+                    allowfullscreen
+                ></iframe>
+            </div>
+        `;
+  }
+  renderVideoInPopup() {
+    if (this._modalOpen)
+      return a`
+                ${this.videoTemplate()}
+            `;
+  }
+  renderVideoInBlock() {
+    return a`
+            ${this._videoPlaying ? this.videoTemplate() : this.coverTemplate()}
+        `;
+  }
+  render() {
+    return a`
+            <div
+                part="deferred-media"
+                class="${h(this.deferredMediaClasses())}"
+                style="${f(this.deferredMediaStyles())}"
+                ?enableModal=${this.enableModal}
+                >
+                <div class="deferred-media__image">
+                    ${this.renderVideoInBlock()}
+                </div>
+                ${this.createModal()}
+            </div>
+        `;
+  }
+};
+t.styles = y([
+  b,
+  v`
+            .deferred-media {
+                width: 100%;
+            }
+
+            
+            /* Adapt banner to media height */
+            .deferred-media__image {
+                position: relative;
+                width: 100%;
+                aspect-ratio: var(--um-mobile-aspect-ratio);
+                height: auto;
+            }
+
+            @media only screen and (min-width: 30.06rem) {
+                .deferred-media__image {
+                    aspect-ratio: var(--um-aspect-ratio);
+                }
+            }
+
+            .deferred-media__play {
+                position: absolute;
+                inset: 0;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                z-index: 100;
+            }
+            .video-container {
+                height: 0;
+                padding-bottom: 56.25%;
+                position: relative;
+                width: 100%;
+            }
+            .video-holder__item {
+                border: 0;
+                height: 100%;
+                inset: 0;
+                position: absolute;
+                width: 100%;
+            }
+            umg-button-icon::part(button-icon) {
+                --um-space-button-icon-padding: var(--um-space-media-button-padding, var(--um-space-24, 1.5rem));
+                --um-color-button-icon-text: var(--um-color-button-media-icon-text, 255,255,255);
+                --um-color-button-icon-bg: var(--um-color-button-media-icon-bg, 255,255,255);
+            }
+            .deferred-media--button-hover .deferred-media__play {
+                opacity: 0;
+                background-color: rgb(0,0,0,0.2);
+                transition: opacity 0.3s;
+            }
+            .deferred-media--button-hover .deferred-media__play:hover {
+                opacity: 1;
+            }
+        `
+]);
+i([
+  d({ type: String })
+], t.prototype, "source", 2);
+i([
+  d({ type: String })
+], t.prototype, "title", 2);
+i([
+  d({ type: Boolean })
+], t.prototype, "enableModal", 2);
+i([
+  d({ type: Boolean })
+], t.prototype, "showButtonOnHover", 2);
+i([
+  l()
+], t.prototype, "_mediaAspectRatio", 2);
+i([
+  l()
+], t.prototype, "_mobileMediaAspectRatio", 2);
+i([
+  l()
+], t.prototype, "_videoPlaying", 2);
+i([
+  l()
+], t.prototype, "_modalOpen", 2);
+t = i([
+  u(`${A}-deferred-media`)
+], t);
+export {
+  t as DeferredMedia
+};

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

@@ -0,0 +1,255 @@
+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 _ } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as n } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as h } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/state.js";
+import { query as d } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/query.js";
+import { classMap as u } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/class-map.js";
+import { global as y } from "../../styles/global.js";
+import { settings as f } from "../../scripts/settings.js";
+import { mergeStyles as v } from "../../scripts/mergeStyles.js";
+import { css as b } 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, t = (e, r, l, i) => {
+  for (var o = i > 1 ? void 0 : i ? w(r, l) : r, a = e.length - 1, c; a >= 0; a--)
+    (c = e[a]) && (o = (i ? c(r, l, o) : c(o)) || o);
+  return i && o && g(r, l, o), o;
+};
+const { prefix: C } = f;
+let s = class extends p {
+  constructor() {
+    super(...arguments), this.direction = "down", this.overlay = !1, this.justifySummary = "start", this.iconAnimation = "flip", this._open = !1, this.closeDisclosure = () => {
+      this._open = !1, this._disclosure.removeAttribute("open"), setTimeout(() => {
+        this._disclosureContent.classList.remove("opening");
+      });
+    }, this.openDisclosure = () => {
+      this._open = !0, this._disclosure.setAttribute("open", ""), setTimeout(() => {
+        this._disclosureContent.classList.add("opening");
+      });
+    }, this._handleDisclosure = (e) => {
+      e.type === "disclosure" && (e.detail.eventName === "close" && this.closeDisclosure(), e.detail.eventName === "open" && this.openDisclosure());
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), window.addEventListener("disclosure", this._handleDisclosure);
+  }
+  disconnectedCallback() {
+    window.removeEventListener("disclosure", this._handleDisclosure), super.disconnectedCallback();
+  }
+  _handleSummaryClick(e) {
+    e.stopImmediatePropagation();
+    const r = this._open ? "close" : "open";
+    this._open ? (setTimeout(() => {
+      this._disclosureContent.classList.remove("opening");
+    }), window.removeEventListener("disclosure", this._handleDisclosure)) : (setTimeout(() => {
+      this._disclosureContent.classList.add("opening");
+    }), window.addEventListener("disclosure", this._handleDisclosure)), this._open = !this._open, this.dispatchEvent(new CustomEvent("summary-click", {
+      detail: {
+        eventName: r,
+        target: this
+      },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  summaryClasses() {
+    const e = {};
+    return e["disclosure__summary--icon-" + this.iconAnimation] = !0, e["disclosure__summary--justify-" + this.justifySummary] = !0, e;
+  }
+  drawerClasses() {
+    const e = {};
+    return e["disclosure__drawer--overlay"] = this.overlay, e;
+  }
+  contentClasses() {
+    const e = {};
+    return this.direction === "from-left" ? e["open--" + this.direction] = !0 : this.direction === "from-right" ? e["open--" + this.direction] = !0 : this.direction === "up" ? e["open--" + this.direction] = !0 : e["open--down"] = !0, e;
+  }
+  render() {
+    return m`
+            <details
+                part="disclosure"
+                class="disclosure"
+                >
+                <summary
+                    part="disclosure-summary"
+                    class="disclosure__summary${u(this.summaryClasses())}"
+                    aria-label="Main Menu"
+                    role="button"
+                    aria-expanded=${this._open}
+                    @click=${(e) => this._handleSummaryClick(e)}
+                    >
+                    <slot name="summary"></slot>
+                    <slot name="icon"></slot>
+                </summary>
+                <div
+                    part="disclosure-drawer"
+                    class="disclosure__drawer${u(this.drawerClasses())}"
+                    aria-hidden=${!this._open}
+                    >
+                    <div
+                        part="disclosure-content"
+                        class="disclosure__content${u(this.contentClasses())}"
+                        aria-hidden=${!this._open}
+                        >
+                        <slot name="content"></slot>
+                    </div>
+                </div>
+            </details>
+        `;
+  }
+};
+s.styles = v([
+  y,
+  b`
+            :host([overlay]) {
+                position: relative;
+            }
+
+            ::slotted(*[slot=summary]) {
+                flex: 0 1 auto;
+            }
+            ::slotted(*[slot=icon]) {
+                transition: transform 0.2s ease;
+            }
+
+            .disclosure[open] .disclosure__summary--icon-flip ::slotted(*[slot=icon]) {
+                transform: rotate(180deg);
+            }
+
+            /** Summary */
+            details summary::-webkit-details-marker {
+                display:none;
+            }
+
+            .disclosure__summary {
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: start;
+                gap: var(--um-space-8, 0.5rem);
+                color: inherit;
+                list-style: none;
+                height: 2.5rem;
+                padding: var(--um-space-disclosure-padding, 0);
+                border: 0.0625rem solid rgb(var(--um-color-disclosure-border, var(--um-color-border), 225,225,225), var(--um-opacity-disclosure-border, 0));
+                border-radius: var(--um-border-disclosure-radius, 0);
+            }
+
+            /** Summary justify content */
+            .disclosure__summary--justify-center {
+                justify-content: center;
+            }
+            .disclosure__summary--justify-end {
+                justify-content: end;
+            }
+            .disclosure__summary--justify-space-between {
+                justify-content: space-between;
+            }
+
+            .disclosure__summary--icon-left {
+                flex-direction: row-reverse;
+            }
+
+            /** Drawer */
+            .disclosure__drawer {
+                overflow: hidden;
+                visibility: hidden;
+                min-width: fit-content;
+            }
+            .disclosure__drawer--overlay {
+                position: absolute;
+                top: 2.5rem;
+                left: 0;
+                right: 0;
+                z-index: 200;
+            }
+
+            /* Open states */
+            .disclosure__content {
+                visibility: hidden;
+                color: rgb(var(--um-color-disclosure-text, var(--um-color-section-text, 0,0,0)), 1);
+                background-color: rgba(var(--um-color-disclosure-bg, var(--um-color-section-bg, 255, 255, 255)), 1);
+            }
+            
+            .disclosure[open] .disclosure__drawer.opening {
+                visibility: visible;
+            }
+
+            .disclosure[open] .disclosure__content.opening {
+                transition: transform 0.2s ease, visibility 0.2s ease;
+                visibility: visible;
+            }
+
+            /* Content open direction */
+            .disclosure__content.open--down {
+                transform: translateY(-100%);
+            }
+            .disclosure[open] .disclosure__content.open--down.opening {
+                transform: translateY(0);
+            }
+            .disclosure__content.open--from-left {
+                transform: translateX(-100%);
+            }
+            .disclosure[open] .disclosure__content.open--from-left.opening {
+                transform: translateX(0);
+            }
+            .disclosure__content.open--from-right {
+                transform: translateX(100%);
+            }
+            .disclosure[open] .disclosure__content.open--from-right.opening {
+                transform: translateX(0);
+            }
+            .disclosure__content.open--up {
+                transform: translateY(100%);
+            }
+            .disclosure[open] .disclosure__content.open--up.opening {
+                transform: translateX(0);
+            }
+
+            .disclosure__content {
+                overflow-y: auto;
+            }
+
+            .disclosure__content::-webkit-scrollbar {
+                width: 0.125rem;
+            }
+            .disclosure__content::-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);
+            }
+            .disclosure__content::-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);
+            }
+        `
+]);
+t([
+  n()
+], s.prototype, "direction", 2);
+t([
+  n({ type: Boolean })
+], s.prototype, "overlay", 2);
+t([
+  n()
+], s.prototype, "justifySummary", 2);
+t([
+  n()
+], s.prototype, "iconAnimation", 2);
+t([
+  h()
+], s.prototype, "_open", 2);
+t([
+  d("summary")
+], s.prototype, "_summary", 2);
+t([
+  d("details")
+], s.prototype, "_disclosure", 2);
+t([
+  d(".disclosure__content")
+], s.prototype, "_disclosureContent", 2);
+s = t([
+  _(`${C}-disclosure`)
+], s);
+export {
+  s as Disclosure
+};

package/dist/packages/web-components/components/event-table/event-content.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 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 p } 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 { classMap as c } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/class-map.js";
+import { global as _ } from "../../styles/global.js";
+import { settings as f } from "../../scripts/settings.js";
+import { mergeStyles as u } from "../../scripts/mergeStyles.js";
+import { css as g } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
+var x = Object.defineProperty, y = Object.getOwnPropertyDescriptor, a = (r, i, s, n) => {
+  for (var e = n > 1 ? void 0 : n ? y(i, s) : i, l = r.length - 1, o; l >= 0; l--)
+    (o = r[l]) && (e = (n ? o(i, s, e) : o(e)) || e);
+  return n && e && x(i, s, e), e;
+};
+const { prefix: b } = f;
+let t = class extends d {
+  constructor() {
+    super(...arguments), this.divider = !1;
+  }
+  inlineClasses() {
+    return {
+      "inline-event__inner--divider": this.divider
+    };
+  }
+  render() {
+    return m`
+        <div class="inline-event__inner${c(this.inlineClasses())}">
+            <div class="inline-event__details" part="event-details" role="cell">
+                <slot name="venue"></slot>
+                <slot name="location"></slot>
+                <slot name="supporting"></slot>
+            </div>
+            <div
+                class="inline-event__links"
+                part="event-links"
+                role="cell"
+                >
+                <slot name="links"></slot>
+            </div>
+        </div>
+        `;
+  }
+};
+t.styles = u([
+  _,
+  g`
+            :host {
+                display: block;
+                flex: 1;
+            }
+            .inline-event__inner {
+                display: flex;
+                width: 100%;
+            }
+            .inline-event__details {
+                display: flex;
+                flex-direction: column;
+                gap: var(--um-space-4, 0.25rem);
+            }
+            .inline-event__details ::slotted([slot=supporting]){
+                margin-top: var(--um-space-16);
+            }
+            .inline-event__links {
+                display: flex;
+                flex-shrink: 0;
+                gap: var(--um-space-16, 1rem);
+                margin-left: auto;
+            }
+            @media only screen and (max-width: 48rem) {
+                .inline-event__inner {
+                    flex-direction: column;
+                    padding: 0;
+                    gap: var(--um-space-16, 1rem);
+                }
+                .inline-event__details {
+                    display: flex;
+                    flex-direction: column;
+                    gap: var(--um-space-4, 0.25rem);
+                }
+                .inline-event__links {
+                    margin-left: 0;
+                }
+            }
+
+            /* Divider */
+            .inline-event__inner--divider {
+                border-bottom: 1px solid rgb(var(--um-color-divider-bg, var(--um-color-section-text)), var(--um-opacity-divider-bg, 1));
+                padding-bottom: var(--um-space-20, 1.25rem);
+            }
+            @media only screen and (max-width: 48rem) {
+                .inline-event__inner--divider {
+                    padding-bottom: var(--um-space-20, 1.25rem);
+                }
+            }
+        `
+]);
+a([
+  v({ type: Boolean })
+], t.prototype, "divider", 2);
+t = a([
+  p(`${b}-event-content`)
+], t);
+export {
+  t as EventContent
+};

package/dist/packages/web-components/components/event-table/event-date.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 n } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
+import { LitElement as a } from "../../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
+import { customElement as p } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { global as d } from "../../styles/global.js";
+import { settings as f } from "../../scripts/settings.js";
+import { mergeStyles as v } from "../../scripts/mergeStyles.js";
+import { css as c } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
+var _ = Object.defineProperty, h = Object.getOwnPropertyDescriptor, g = (l, r, s, t) => {
+  for (var e = t > 1 ? void 0 : t ? h(r, s) : r, o = l.length - 1, i; o >= 0; o--)
+    (i = l[o]) && (e = (t ? i(r, s, e) : i(e)) || e);
+  return t && e && _(r, s, e), e;
+};
+const { prefix: x } = f;
+let m = class extends a {
+  render() {
+    return n`
+        <div class="inline-event__date" role="cell">
+            <slot></slot>
+        </div>
+        `;
+  }
+};
+m.styles = v([
+  d,
+  c`
+        :host {
+            display: block;
+            flex-shrink: 1;
+            padding-right: var(--um-space-12, 0.75rem);
+            width: 9rem;
+        }
+            @media only screen and (max-width: 48rem) {
+                .inline-event__date {
+                    padding: 0;
+                }
+            }
+        `
+]);
+m = g([
+  p(`${x}-event-date`)
+], m);
+export {
+  m as EventDate
+};