@pushengineering/umg-web-components 2.0.0

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

@@ -0,0 +1,82 @@
+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 v } 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 { queryAssignedElements as d } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+import { global as c } from "../../styles/global.js";
+import { settings as u } from "../../scripts/settings.js";
+import { mergeStyles as f } from "../../scripts/mergeStyles.js";
+import { EventManager as h } from "../../classes/event-manager/event-manager.js";
+import "./media.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, _ = Object.getOwnPropertyDescriptor, l = (t, e, r, a) => {
+  for (var i = a > 1 ? void 0 : a ? _(e, r) : e, m = t.length - 1, o; m >= 0; m--)
+    (o = t[m]) && (i = (a ? o(e, r, i) : o(i)) || i);
+  return a && i && g(e, r, i), i;
+};
+const { prefix: y } = u;
+let s = class extends v {
+  constructor() {
+    super(), this.mediaEventManager = new h(this), this._customEventsHandler = (t) => {
+      t.type === "active-media" && this._updateActiveMedia(t.detail.mediaId);
+    }, this.mediaEventManager.addEventListener("active-media", this._customEventsHandler);
+  }
+  _updateActiveMedia(t) {
+    t && this._mediaItems.forEach((e) => {
+      e.hasAttribute("active") && e.removeAttribute("active"), t === e.getAttribute("mediaId") && e.setAttribute("active", "");
+    });
+  }
+  render() {
+    return n`
+            <div class="media-gallery">
+                <div class="media-main">
+                    <div class="media-stack">
+                        <slot name="media"></slot>
+                    </div>
+                </div>
+                <div class="media-thumbnails">
+                    <slot name="thumbnail-slider"></slot>
+                </div>
+            </div>
+      `;
+  }
+};
+s.styles = f([
+  c,
+  b`
+            .media-main {
+                padding-bottom: var(--um-space-grid-desktop-vertical, var(--um-space-16, 1rem));
+            }
+            .media-stack {
+                border: 0.0625rem solid rgb(0,0,0,0.1);
+                position: relative;
+                aspect-ratio: 1/1;
+            }
+            .media-stack ::slotted(*) {
+                visibility: hidden;
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                z-index: 1;
+            }
+            .media-stack ::slotted(*[active]) {
+                visibility: visible;
+                position: relative;
+                z-index: 10;
+            }
+        `
+]);
+l([
+  d({ slot: "media", selector: "umg-media" })
+], s.prototype, "_mediaItems", 2);
+l([
+  d({ slot: "thumbnail-slider", selector: "umg-thumbnail-slider" })
+], s.prototype, "_slideItems", 2);
+s = l([
+  p(`${y}-media-gallery`)
+], s);
+export {
+  s as MediaGallery
+};

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

@@ -0,0 +1,31 @@
+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 f } from "../../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
+import { property as l } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/property.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 { settings as u } from "../../scripts/settings.js";
+var d = Object.defineProperty, v = Object.getOwnPropertyDescriptor, n = (i, t, o, e) => {
+  for (var r = e > 1 ? void 0 : e ? v(t, o) : t, s = i.length - 1, m; s >= 0; s--)
+    (m = i[s]) && (r = (e ? m(t, o, r) : m(r)) || r);
+  return e && r && d(t, o, r), r;
+};
+const { prefix: _ } = u;
+let p = class extends f {
+  constructor() {
+    super(...arguments), this.mediaId = "";
+  }
+  render() {
+    return a`
+            <slot></slot>
+        `;
+  }
+};
+n([
+  l()
+], p.prototype, "mediaId", 2);
+p = n([
+  c(`${_}-media`)
+], p);
+export {
+  p as Media
+};

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

@@ -0,0 +1,276 @@
+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 h } 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 a } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/property.js";
+import { ifDefined as d } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/if-defined.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 x } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/style-map.js";
+import "../box/box.js";
+import "../vertical-stack/vertical-stack.js";
+import { global as _ } from "../../styles/global.js";
+import { mediaSize as y } from "./styles/media-size.js";
+import { settings as f } from "../../scripts/settings.js";
+import { mergeStyles as u } 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 v = Object.defineProperty, C = Object.getOwnPropertyDescriptor, e = (i, r, s, n) => {
+  for (var o = n > 1 ? void 0 : n ? C(r, s) : r, m = i.length - 1, l; m >= 0; m--)
+    (l = i[m]) && (o = (n ? l(r, s, o) : l(o)) || o);
+  return n && o && v(r, s, o), o;
+};
+const { prefix: w } = f;
+let t = class extends h {
+  constructor() {
+    super(...arguments), this.setSizeBy = "width", this.mediaHeight = "adapt", this.mediaWidth = "medium", this.mediaOnRight = !1, this.blendMedia = !1, this.alignContent = "center", this.mobileAlignContent = "center", this.justifyContent = "center", this.mobileJustifyContent = "center", this.spacing = "8";
+  }
+  gridClasses() {
+    const i = {};
+    return i["media-text__grid--" + this.mediaWidth] = this.setSizeBy === "width", i["media-height--" + this.mediaHeight] = this.setSizeBy === "height", i["media-height"] = this.setSizeBy === "height", i["media-right"] = this.mediaOnRight, i["media-blend"] = this.blendMedia, i;
+  }
+  contentStackClasses() {
+    const i = {};
+    return i["align--" + this.alignContent] = !0, i["justify--" + this.justifyContent] = !0, i["mobile-justify--" + this.mobileJustifyContent] = !0, i["mobile-align--" + this.mobileAlignContent] = !0, i;
+  }
+  mediaTextStyles() {
+    let i = {};
+    return i = {
+      ...i,
+      "--um-color-box-bg": this.colorBg,
+      "--um-opacity-box-bg": this.opacity
+    }, i;
+  }
+  render() {
+    return p`
+            <div
+                class="media-text"
+                style="${x(this.mediaTextStyles())}"
+                part="media-text"
+                >
+                <div
+                    class="media-text__grid${g(this.gridClasses())}"
+                    part="media-text-grid"
+                    >
+                    <div
+                        class="media-text__media"
+                        part="media"
+                        >
+                        <slot name="media"></slot>
+                    </div>
+                    <div
+                        class="media-text__content"
+                        part="content"
+                        >
+                        <umg-box
+                            class="media-text__content-inner"
+                            padding="${d(this.padding)}"
+                            mobilePadding="${d(this.mobilePadding)}"
+                            paddingTop="${d(this.paddingTop)}"
+                            paddingLeft="${d(this.paddingLeft)}"
+                            paddingRight="${d(this.paddingRight)}"
+                            paddingBottom="${d(this.paddingBottom)}"
+                            colortext="${d(this.colorText)}"
+                            colorBg="${d(this.colorBg)}"
+                            opacity="${d(this.opacity)}"
+                            width="expand"
+                            exportparts="box,box-content"
+                            >
+                            <umg-vertical-stack
+                                class="media-text__content-stack${g(this.contentStackClasses())}"
+                                gap=${this.spacing}
+                                justify="${this.alignContent}"
+                                mobileJustify="${this.mobileJustifyContent}"
+                                align="${this.justifyContent}"
+                                mobileAlign="${this.mobileAlignContent}"
+                                >
+                                <slot name="content"></slot>
+                            </umg-vertical-stack>
+                        </umg-box>
+                    </div>
+                </div>
+            </div>
+        `;
+  }
+};
+t.styles = u([
+  _,
+  y,
+  b`
+            :host {
+                display: block;
+                width: 100%;
+            }
+
+            /* Height set by value */
+            .media-text__grid.media-height {
+                overflow: hidden;
+            }
+
+            /** Prevent extended clicks outside the container */
+            .media-text,
+            .media-text__media {
+                position: relative
+            }
+
+            /* Content position */
+            .media-text__grid.media-right div:first-child {
+                order: 1;
+            }
+            .media-text__grid.media-right div:last-child {
+                order: 2;
+            }
+
+            @media screen and (min-width: 48.06rem) {
+                .media-text__grid.media-right div:first-child {
+                order: 2;
+            }
+                .media-text__grid.media-right div:last-child {
+                    order: 1;
+                }
+            }
+
+            /* Blend media */
+            .media-text__grid.media-blend .media-text__media {
+                background-color: rgb(var(--um-color-box-bg), var(--um-opacity-box-bg, 1));
+            }
+            @media only screen and (min-width: 48.06rem) {
+                .media-text__grid.media-blend .media-text__media ::slotted(*) {
+                    mask-image: linear-gradient(to right, rgb(0,0,0) 0 70%, transparent 100%);
+                }
+                .media-text__grid.media-blend.media-right .media-text__media ::slotted(*) {
+                    mask-image: linear-gradient(to left, rgb(0,0,0) 0 70%, transparent 100%);
+                }
+            }
+            @media only screen and (max-width: 48rem) {
+                .media-text__grid.media-blend .media-text__media ::slotted(*) {
+                    mask-image: linear-gradient(to bottom, rgb(0,0,0) 0 70%, transparent 100%);
+                }
+            }
+
+            /* Content */
+            .media-text__content {
+                display: flex;
+                width: auto;
+            }
+
+            /* Text content alignment */
+            .justify--start {
+                text-align: left;
+            }
+            .justify--center {
+                text-align: center;
+            }
+            .justify--end {
+                text-align: right;
+            }
+            @media screen and (max-width: 48.06rem) {
+                .mobile-align--start {
+                    text-align: left;
+                }
+                .mobile-align--center {
+                    text-align: center;
+                }
+                .mobile-align--end {
+                    text-align: right;
+                }
+            }
+
+            /* Normalise heights in grid layouts */
+            @media screen and (max-width: 48.06rem) {
+                .media-text,
+                .media-text__grid {
+                    height: 100%;
+                }
+                .media-text__grid {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: stretch;
+                }
+                .media-text__grid > div:last-child {
+                    display: flex;flex: 1 0 auto;
+                }
+            }
+
+            /* Desktop */
+            @media screen and (min-width: 48.06rem) {
+                /* Media left/right position */
+                .media-right .media-text__container {
+                    flex-direction: row-reverse;
+                }
+                /* Constrain text width */
+                .media-text__grid:not(.media-text__grid--2Xlarge, .media-text__grid--xLarge) .justify--start.media-text__content-stack {
+                    max-width: 80%;
+                }
+                .media-text__grid:not(.media-text__grid--2Xlarge, .media-text__grid--xLarge) .justify--end.media-text__content-stack {
+                    max-width: 80%;
+                    margin-left: auto;
+                }
+                .media-text__grid:not(.media-text__grid--2Xlarge, .media-text__grid--xLarge) .justify--center.media-text__content-stack {
+                    max-width: 80%;
+                    margin: 0 auto;
+                }
+            }
+        `
+]);
+e([
+  a()
+], t.prototype, "setSizeBy", 2);
+e([
+  a()
+], t.prototype, "mediaHeight", 2);
+e([
+  a()
+], t.prototype, "mediaWidth", 2);
+e([
+  a({ type: Boolean })
+], t.prototype, "mediaOnRight", 2);
+e([
+  a({ type: Boolean })
+], t.prototype, "blendMedia", 2);
+e([
+  a()
+], t.prototype, "alignContent", 2);
+e([
+  a()
+], t.prototype, "mobileAlignContent", 2);
+e([
+  a()
+], t.prototype, "justifyContent", 2);
+e([
+  a()
+], t.prototype, "mobileJustifyContent", 2);
+e([
+  a()
+], t.prototype, "spacing", 2);
+e([
+  a()
+], t.prototype, "padding", 2);
+e([
+  a()
+], t.prototype, "mobilePadding", 2);
+e([
+  a()
+], t.prototype, "paddingTop", 2);
+e([
+  a()
+], t.prototype, "paddingRight", 2);
+e([
+  a()
+], t.prototype, "paddingBottom", 2);
+e([
+  a()
+], t.prototype, "paddingLeft", 2);
+e([
+  a()
+], t.prototype, "colorBg", 2);
+e([
+  a()
+], t.prototype, "colorText", 2);
+e([
+  a()
+], t.prototype, "opacity", 2);
+t = e([
+  c(`${w}-media-text`)
+], t);
+export {
+  t as MediaText
+};

package/dist/packages/web-components/components/media-text/styles/media-size.js

@@ -0,0 +1,119 @@
+import "../../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
+import "../../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
+import "../../../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
+import { css as e } from "../../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
+const m = e`
+
+    @media screen and (min-width: 48.06rem ) {
+        .media-text__grid {
+            display: grid;
+            grid-template-columns: repeat(12, [start] 1fr);
+        }
+        
+        /* Media size by height */
+        .media-text__grid.media-height {
+            display: flex;
+        }
+        .media-text__grid.media-height .media-text__media {
+            flex: 0 1 auto;
+        }
+        .media-text__grid.media-height .media-text__content {
+            flex: 1 0 auto;
+        }
+        .media-text__grid.media-height--xsmall {
+            height: 15rem;
+        }
+        .media-text__grid.media-height--small {
+            height: 20rem;
+        }
+        .media-text__grid.media-height--medium {
+            height: 25rem;
+        }
+        .media-text__grid.media-height--large {
+            height: 30rem;
+        }
+        .media-text__grid.media-height--xlarge {
+            height: 37rem;
+        }
+
+        /* Media width sizing */
+        .media-text__grid--2Xlarge .media-text__media {
+            grid-column: start / span 8;
+        }
+        .media-text__grid--xLarge .media-text__media {
+            grid-column: start / span 7;
+        }
+        .media-text__grid--large .media-text__media {
+            grid-column: start / span 6;
+        }
+        .media-text__grid--medium .media-text__media {
+            grid-column: start / span 5;
+        }
+        .media-text__grid--small .media-text__media {
+            grid-column: start / span 4;
+        }
+        .media-text__grid--xSmall .media-text__media {
+            grid-column: start / span 3;
+        }
+        .media-text__grid--2Xlarge.media-right .media-text__media {
+            grid-column: span 7;
+        }
+        .media-text__grid--xLarge.media-right .media-text__media {
+            grid-column: span 7;
+        }
+        .media-text__grid--large.media-right .media-text__media {
+            grid-column: span 6;
+        }
+        .media-text__grid--medium.media-right .media-text__media {
+            grid-column: span 5;
+        }
+        .media-text__grid--small.media-right .media-text__media {
+            grid-column: span 4;
+        }
+        .media-text__grid--xSmall.media-right .media-text__media {
+            grid-column: span 3;
+        }
+
+        /* Text content width sizing */
+        .media-text__grid--2Xlarge .media-text__content {
+            grid-column: span 4;
+        }
+        .media-text__grid--xLarge .media-text__content {
+            grid-column: span 5;
+        }
+        .media-text__grid--large .media-text__content {
+            grid-column: span 6;
+        }
+        .media-text__grid--medium .media-text__content {
+            grid-column: span 7;
+        }
+        .media-text__grid--small .media-text__content {
+            grid-column: span 8;
+        }
+        .media-text__grid--xSmall .media-text__content {
+            grid-column: span 9;
+        }
+        .media-text__grid--2Xlarge.media-right .media-text__content {
+            grid-column: start / span 4;
+        }
+        .media-text__grid--xLarge.media-right .media-text__content {
+            grid-column: start / span 5;
+        }
+        .media-text__grid--large.media-right .media-text__content {
+            grid-column: start / span 6;
+        }
+        .media-text__grid--medium.media-right .media-text__content {
+            grid-column: start / span 7;
+        }
+        .media-text__grid--small.media-right .media-text__content {
+            grid-column: start / span 8;
+        }
+        .media-text__grid--xSmall.media-right .media-text__content {
+            grid-column: start / span 9;
+        }
+    }
+
+`;
+export {
+  m as mediaSize
+};