@pushengineering/umg-web-components 2.0.0

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

@@ -0,0 +1,389 @@
+import "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as r } 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 u } 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 { state as d } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/state.js";
+import { ifDefined as o } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/if-defined.js";
+import { classMap as p } 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 { global as y } from "../../styles/global.js";
+import { settings as _ } from "../../scripts/settings.js";
+import { mergeStyles as f } from "../../scripts/mergeStyles.js";
+import "../box/box.js";
+import "../vertical-stack/vertical-stack.js";
+import { css as v } 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, n = (t, s, h, c) => {
+  for (var a = c > 1 ? void 0 : c ? w(s, h) : s, l = t.length - 1, m; l >= 0; l--)
+    (m = t[l]) && (a = (c ? m(s, h, a) : m(a)) || a);
+  return c && a && x(s, h, a), a;
+};
+const { prefix: A } = _;
+let e = class extends g {
+  constructor() {
+    super(), this.height = "medium", this.contentPosition = "over", this.contentFullWidth = !1, this.contentAlign = "center", this.contentJustify = "center", this._headerHeight = "", this._withoutContent = !0, this.addEventListener("media-details", this.eventNotifications);
+  }
+  connectedCallback() {
+    super.connectedCallback(), window.addEventListener("header-details", this.eventNotifications.bind(this));
+  }
+  disconnectedCallback() {
+    window.removeEventListener("header-details", this.eventNotifications.bind(this)), super.disconnectedCallback();
+  }
+  async eventNotifications(t) {
+    t.type === "media-details" && (t.detail.mediaAspectRatio && (this._mediaAspectRatio = t.detail.mediaAspectRatio.toString()), t.detail.mobileMediaAspectRatio ? this._mobileMediaAspectRatio = t.detail.mobileMediaAspectRatio.toString() : t.detail.mediaAspectRatio && (this._mediaAspectRatio = t.detail.mediaAspectRatio.toString())), t.type === "header-details" && (this._headerHeight = t.detail.height);
+  }
+  handleSlotchange(t) {
+    t.target && t.target.getAttribute("name") === "content" && (this._withoutContent = !1);
+  }
+  bannerClasses() {
+    const t = {};
+    return t["media-height--" + this.height] = !0, (this.contentPosition === "under" || this.contentPosition === "above" || this.contentPosition === "side") && (t["content--inline"] = !0, t["content-position--" + this.contentPosition] = !0), t;
+  }
+  bannerStyles() {
+    let t = {};
+    return this.contentPosition === "side" && (t = {
+      ...t,
+      "--um-color-box-bg": this.colorBg,
+      "--um-opacity-box-bg": this.opacity
+    }), this._mediaAspectRatio && (t = {
+      ...t,
+      "--um-aspect-ratio": this._mediaAspectRatio
+    }), this._mobileMediaAspectRatio ? t = {
+      ...t,
+      "--um-mobile-aspect-ratio": this._mobileMediaAspectRatio
+    } : this._mediaAspectRatio && (t = {
+      ...t,
+      "--um-mobile-aspect-ratio": this._mediaAspectRatio
+    }), this._headerHeight && this.height === "stretch" && (t = {
+      ...t,
+      "--um-size-header-outer-height": this._headerHeight + "px"
+    }), this.overlayColor && (t = {
+      ...t,
+      "--um-banner-overlay-color": this.overlayColor
+    }), this.overlayOpacity && (t = {
+      ...t,
+      "--um-banner-overlay-opacity": this.overlayOpacity
+    }), t;
+  }
+  bannercontentClasses() {
+    const t = {};
+    return t["content-align--" + this.contentAlign] = !0, t["content-justify--" + this.contentJustify] = !0, t["content--without-content"] = this._withoutContent, t;
+  }
+  bannercontentStyles() {
+    let t = {};
+    return t = {
+      ...t,
+      "--um-size-box-width": this.contentFullWidth ? "100%" : "auto"
+    }, t;
+  }
+  contentOuter() {
+    return r`
+            <umg-box
+                part="banner-content-container"
+                class="banner-content__inner"
+                padding=${this.contentPosition === "over" ? o(this.contentOuterPadding) : "0"}
+                mobilePadding='0'
+                >
+                ${this.contentInner(this.contentFullWidth)}
+            </umg-box>
+        `;
+  }
+  contentInner(t) {
+    return r`
+            <umg-box
+                part="content-container"
+                class="content__container"
+                padding=${o(this.contentInnerPadding)}
+                mobilePadding=${o(this.mobilePadding)}
+                colorText=${o(this.colorText)}
+                colorBg=${o(this.contentPosition === "side" ? void 0 : o(this.colorBg))}
+                opacity=${this.contentPosition === "side" ? "0" : o(this.opacity)}
+                width="${t ? "expand" : "shrink"}"
+                >
+                <umg-vertical-stack
+                    align=${this.contentJustify}
+                    mobileAlign=${this.mobileContentJustify ? this.mobileContentJustify : this.contentJustify}
+                    gap="${o(this.contentSpacing)}"
+                    >
+                    <slot name="content" @slotchange=${this.handleSlotchange}></slot>
+                </umg-vertical-stack>
+            </umg-box> `;
+  }
+  content() {
+    return this.contentPosition === "over" || this.contentPosition === "side" ? r`
+                ${this.contentOuter()}
+            ` : r`
+            ${this.contentInner(!0)}
+        `;
+  }
+  render() {
+    return r`
+            <div
+                class="banner${p(this.bannerClasses())}"
+                style="${b(this.bannerStyles())}"
+                part="banner"
+                >
+                <div class="banner__inner" part="banner-container">
+                    <div class="banner-media" part="banner-media-container">
+                        <slot name="media"></slot>
+                    </div>
+                    <div
+                        class="banner-content${p(this.bannercontentClasses())}"
+                        style="${b(this.bannercontentStyles())}"
+                        part="banner-content"
+                        >
+                        ${this.content()}
+                    </div>
+                </div>
+            </div>
+        `;
+  }
+};
+e.styles = f([
+  y,
+  v`
+            :host {
+                position: relative;
+                display: block;
+                width: 100%;
+                overflow: hidden;
+            }
+
+            /* Media overlay */
+            .banner__inner {
+                position: relative;
+            }
+
+            .banner:not(.content--inline) .banner__inner::after {
+                content: '';
+                display: block;
+                position: absolute;
+                top: 0;
+                left: 0;
+                height: 100%;
+                width: 100%;
+                z-index: 1;
+                background-color: rgb(var(--um-banner-overlay-color, 255,255,255),var(--um-banner-overlay-opacity, 0));
+            }
+
+            /* Mobile content */
+            @media only screen and (max-width: 48.06rem) {
+                /* Apply caption background to inner section on mobile at 100% opacity for full bleed background colour */
+                .banner__inner {
+                    background-color: rgb(var(--um-color-box-bg), 1);
+                }
+                /* Always make content box 100% width on mobile */
+                .banner-content__inner .content__container::part(box-content) {
+                    --um-opacity-box-bg: 1!important;
+                }
+            }
+
+            /* Banner media height */
+            @media only screen and (max-width: 30rem) {
+                .media-height--xsmall .banner-media {
+                    height: 10em;
+                }
+                .media-height--small .banner-media {
+                    height: 15rem;
+                }
+                .media-height--medium .banner-media {
+                    height: 20rem;
+                }
+                .media-height--large .banner-media {
+                    height: 25rem;
+                }
+                .media-height--xlarge .banner-media {
+                    height: 30rem;
+                }
+            }
+            @media only screen and (min-width: 30.06rem) {
+                .media-height--xsmall .banner-media {
+                    height: 15rem;
+                }
+                .media-height--small .banner-media {
+                    height: 20rem;
+                }
+                .media-height--medium .banner-media {
+                    height: 25rem;
+                }
+                .media-height--large .banner-media {
+                    height: 30rem;
+                }
+                .media-height--xlarge .banner-media {
+                    height: 40rem;
+                }
+            }
+
+            .media-height--stretch .banner-media {
+                height: calc(100vh - var(--um-size-header-outer-height, 0px));
+            }
+
+            /* Adapt banner to media height */
+            .banner.media-height--adapt .banner-media {
+                aspect-ratio: var(--um-mobile-aspect-ratio);
+                height: auto;
+            }
+            @media only screen and (min-width: 30.06rem) {
+                .banner.media-height--adapt .banner-media {
+                    aspect-ratio: var(--um-aspect-ratio);
+                }
+            }
+
+            /* Without content? */
+            .content--without-content {
+                display: none;
+            }
+
+            /* Content positions */
+
+            @media only screen and (max-width: 48.06rem) {
+                /* All positions - mobile content box is full width */
+                .content__container {
+                    width: 100%;
+                }
+            }
+
+            /* Desktop content over media */
+            @media only screen and (min-width: 48.06rem) {
+                .banner:not(.content--inline) .banner-content {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    height: 100%;
+                    width: 100%;
+                    z-index: 10;
+                }
+            }
+
+            /* Desktop content to side of media */
+            .content-position--side .banner__inner {
+                background-color: rgb(var(--um-color-box-bg), var(--um-opacity-box-bg))
+            }
+
+            @media only screen and (min-width: 48.06rem) {
+                .content--inline.content-position--side .banner__inner {
+                    flex-direction: row-reverse
+                }
+                .content--inline.content-position--side .banner-media {
+                    flex: 1 0 auto;
+                    width: 60%;
+                }
+                .content--inline.content-position--side .banner-content ::slotted(*) {
+                    height: 100%;
+                }
+            }
+
+            /* Inline with media, side/above/under*/
+            .content--inline .banner__inner {
+                display: flex;
+                flex-direction: column;
+            }
+
+            .content-position--above .banner-media {
+                order: 2;
+            }
+            .content-position--above .banner-content {
+                order: 1;
+            }
+            .content-position--under .banner-media {
+                order: 1;
+            }
+            .content-position--under .banner-content {
+                order: 2;
+            }
+
+            /* Content over media box alignments */
+            .banner-content__inner {
+                height: 100%;
+            }
+            .banner-content__inner:not(.content__container)::part(box-content) {
+               background-color: transparent;
+               display: flex;
+            }
+            .content__container::part(box-content) {
+               height: auto;
+            }
+
+            .content-justify--start .banner-content__inner:not(.content__container)::part(box-content) {
+                justify-content: start;
+            }
+            .content-justify--center .banner-content__inner:not(.content__container)::part(box-content) {
+                justify-content: center;
+            }
+            .content-justify--end .banner-content__inner:not(.content__container)::part(box-content) {
+                justify-content: end;
+            }
+            .content-align--start .banner-content__inner:not(.content__container)::part(box-content) {
+                align-items: start;
+            }
+            .content-align--center .banner-content__inner:not(.content__container)::part(box-content) {
+                align-items: center;
+            }
+            .content-align--end .banner-content__inner:not(.content__container)::part(box-content) {
+                align-items: end;
+            }
+        `
+]);
+n([
+  i()
+], e.prototype, "height", 2);
+n([
+  i()
+], e.prototype, "contentPosition", 2);
+n([
+  i({ type: Boolean })
+], e.prototype, "contentFullWidth", 2);
+n([
+  i()
+], e.prototype, "contentAlign", 2);
+n([
+  i()
+], e.prototype, "contentJustify", 2);
+n([
+  i()
+], e.prototype, "mobileContentJustify", 2);
+n([
+  i()
+], e.prototype, "contentSpacing", 2);
+n([
+  i()
+], e.prototype, "contentInnerPadding", 2);
+n([
+  i()
+], e.prototype, "contentOuterPadding", 2);
+n([
+  i()
+], e.prototype, "mobilePadding", 2);
+n([
+  i()
+], e.prototype, "colorText", 2);
+n([
+  i()
+], e.prototype, "colorBg", 2);
+n([
+  i()
+], e.prototype, "opacity", 2);
+n([
+  i()
+], e.prototype, "overlayColor", 2);
+n([
+  i({ type: Number })
+], e.prototype, "overlayOpacity", 2);
+n([
+  d()
+], e.prototype, "_mediaAspectRatio", 2);
+n([
+  d()
+], e.prototype, "_mobileMediaAspectRatio", 2);
+n([
+  d()
+], e.prototype, "_headerHeight", 2);
+n([
+  d()
+], e.prototype, "_withoutContent", 2);
+e = n([
+  u(`${A}-banner`)
+], e);
+export {
+  e as Banner
+};

package/dist/packages/web-components/components/banner-image/banner-image.js

@@ -0,0 +1,161 @@
+import "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as h, nothing as d } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
+import { LitElement as n } from "../../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
+import { customElement as b } 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 c } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/class-map.js";
+import { ifDefined as m } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/if-defined.js";
+import { global as y } from "../../styles/global.js";
+import { placeholderMedia as u } from "../../styles/placeholder-media.js";
+import { settings as f } from "../../scripts/settings.js";
+import { mergeStyles as w } 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 v = Object.defineProperty, S = Object.getOwnPropertyDescriptor, e = (s, r, a, l) => {
+  for (var o = l > 1 ? void 0 : l ? S(r, a) : r, p = s.length - 1, g; p >= 0; p--)
+    (g = s[p]) && (o = (l ? g(r, a, o) : g(o)) || o);
+  return l && o && v(r, a, o), o;
+};
+const { prefix: z } = f;
+let t = class extends n {
+  constructor() {
+    super(...arguments), this.imgAlt = "", this.width = 100, this.height = 100, this.mobileHeight = this.width, this.mobileWidth = this.height, this.load = "lazy";
+  }
+  dispatchEvents() {
+    const s = this.width / this.height, r = this.mobileWidth / this.mobileHeight, a = new CustomEvent("media-details", {
+      detail: {
+        mediaAspectRatio: s,
+        mobileMediaAspectRatio: r
+      },
+      bubbles: !0,
+      composed: !0
+    });
+    this.dispatchEvent(a);
+  }
+  imageClasses() {
+    const s = {};
+    return s["without-mobile"] = !this.mobileSrc, s;
+  }
+  mobileImage() {
+    return this.mobileSrc ? h`
+                <img
+                    class="image image--mobile"
+                    width="${this.mobileWidth}"
+                    height="${this.mobileHeight}"
+                    src="${m(this.mobileSrc)}"
+                    srcset="${m(this.mobileSrcSet)}"
+                    sizes="${m(this.mobileSizes)}"
+                    alt="${this.imgAlt}"
+                    loading="${this.load}"
+                    part="image"
+                    >
+            ` : d;
+  }
+  desktopImage() {
+    return this.src ? h`
+                <img
+                    class="image image--desktop${c(this.imageClasses())}"
+                    width="${this.width}"
+                    height="${this.height}"
+                    src="${m(this.src)}"
+                    srcset="${m(this.imgSrcSet)}"
+                    sizes="${m(this.sizes)}"
+                    alt="${this.imgAlt}"
+                    loading="${this.load}"
+                    part="image"
+                    >
+            ` : h`
+            <div class="placeholder image image--desktop${c(this.imageClasses())}" style="aspect-ratio: ${this.width / this.height}">
+                <div class="placeholder-inner">
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512" fill="currentcolor">
+                        <path d="M70.5 138.1C31 172.2 16 219.1 16 272c0 52 18.4 91.6 46.9 118.3C91.6 417.2 131.5 432 176 432h8.4c18.2 0 34.8-10.3 42.9-26.5l23.2-46.3C257.6 345 272.1 336 288 336s30.4 9 37.5 23.2l23.2 46.3c8.1 16.3 24.8 26.5 42.9 26.5H400c44.5 0 84.4-14.8 113.1-41.7C541.6 363.6 560 324 560 272c0-52.9-15-99.8-54.5-133.9C465.6 103.6 398.1 80 288 80s-177.6 23.6-217.5 58.1zM0 272C0 160 64 64 288 64s288 96 288 208s-80 176-176 176h-8.4c-24.2 0-46.4-13.7-57.2-35.4l-23.2-46.3c-4.4-8.8-13.3-14.3-23.2-14.3s-18.8 5.5-23.2 14.3l-23.2 46.3c-10.8 21.7-33 35.4-57.2 35.4H176C80 448 0 384 0 272zm160 32a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm0-112a64 64 0 1 1 0 128 64 64 0 1 1 0-128zm304 64a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm-112 0a64 64 0 1 1 128 0 64 64 0 1 1 -128 0z"/>
+                    </svg>
+                </div>
+            </div>
+        `;
+  }
+  getImage() {
+    return h`
+            ${this.desktopImage()}
+            ${this.mobileImage()}
+        `;
+  }
+  render() {
+    return this.dispatchEvents(), h`
+            ${this.getImage()}
+        `;
+  }
+};
+t.styles = w([
+  y,
+  u,
+  $`
+            .image {
+                object-fit: cover;
+                height: 100%;
+                width: 100%;
+                max-width: 100%;
+            }
+
+            /* Art directed images */
+            .image--desktop {
+                display: block;
+            }
+            .image--mobile {
+                display: none;
+            }
+
+            @media only screen and (max-width: 48rem) {
+                .image--desktop {
+                    display: none;
+                }
+                .image--mobile {
+                    display: block;
+                }
+                .without-mobile.image--desktop {
+                    display: block;
+                }
+            }
+        `
+]);
+e([
+  i()
+], t.prototype, "imgAlt", 2);
+e([
+  i()
+], t.prototype, "src", 2);
+e([
+  i({ type: String })
+], t.prototype, "imgSrcSet", 2);
+e([
+  i({ type: String })
+], t.prototype, "sizes", 2);
+e([
+  i({ type: Number })
+], t.prototype, "width", 2);
+e([
+  i({ type: Number })
+], t.prototype, "height", 2);
+e([
+  i()
+], t.prototype, "mobileSrc", 2);
+e([
+  i({ type: String })
+], t.prototype, "mobileSrcSet", 2);
+e([
+  i({ type: String })
+], t.prototype, "mobileSizes", 2);
+e([
+  i({ type: Number })
+], t.prototype, "mobileHeight", 2);
+e([
+  i({ type: Number })
+], t.prototype, "mobileWidth", 2);
+e([
+  i()
+], t.prototype, "load", 2);
+t = e([
+  b(`${z}-banner-image`)
+], t);
+export {
+  t as BannerImage
+};