@pushengineering/umg-web-components 2.0.6 → 3.0.1

package/dist/components/banner/banner.js

@@ -1,145 +1,187 @@
-import { css as g, LitElement as u, html as r } from "lit";
-import { customElement as y } from "lit/decorators/custom-element.js";
-import { property as i } from "lit/decorators/property.js";
-import { state as d } from "lit/decorators/state.js";
-import { ifDefined as o } from "lit/directives/if-defined.js";
-import { classMap as p } from "lit/directives/class-map.js";
-import { styleMap as b } from "lit/directives/style-map.js";
-import { global as _ } from "../../styles/global.js";
-import { settings as f } from "../../scripts/settings.js";
-import { mergeStyles as v } from "../../scripts/mergeStyles.js";
-import "../box/box.js";
-import "../vertical-stack/vertical-stack.js";
-var x = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (t, s, l, c) => {
-  for (var a = c > 1 ? void 0 : c ? w(s, l) : s, h = t.length - 1, m; h >= 0; h--)
-    (m = t[h]) && (a = (c ? m(s, l, a) : m(a)) || a);
-  return c && a && x(s, l, a), a;
-};
-const { prefix: A } = f;
-let e = class extends u {
-  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`
+import { __decorate } from '../../node_modules/.pnpm/@rollup_plugin-typescript@11.1.6_rollup@4.16.1_tslib@2.6.2_typescript@5.4.5/node_modules/tslib/tslib.es6.js';
+import { css, LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { state } from 'lit/decorators/state.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { global } from '../../styles/global.js';
+import { settings } from '../../scripts/settings.js';
+import { mergeStyles } from '../../scripts/mergeStyles.js';
+import '../box/box.js';
+import '../vertical-stack/vertical-stack.js';
+
+const { prefix } = settings;
+let Banner = class Banner extends LitElement {
+    constructor() {
+        super();
+        this.height = 'medium';
+        this.contentPosition = 'over';
+        this.contentFullWidth = false;
+        this.contentAlign = 'center';
+        this.contentJustify = 'center';
+        this._headerHeight = '';
+        this._withoutContent = true;
+        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(event) {
+        if (event.type === 'media-details') {
+            if (event.detail.mediaAspectRatio) {
+                this._mediaAspectRatio = event.detail.mediaAspectRatio.toString();
+            }
+            if (event.detail.mobileMediaAspectRatio) {
+                this._mobileMediaAspectRatio = event.detail.mobileMediaAspectRatio.toString();
+            }
+            else if (event.detail.mediaAspectRatio) {
+                this._mediaAspectRatio = event.detail.mediaAspectRatio.toString();
+            }
+        }
+        if (event.type === 'header-details') {
+            this._headerHeight = event.detail.height;
+        }
+    }
+    handleSlotchange(e) {
+        if (e.target && e.target.getAttribute('name') === 'content') {
+            this._withoutContent = false;
+        }
+    }
+    bannerClasses() {
+        const classes = {};
+        classes['media-height--' + this.height] = true;
+        if (this.contentPosition === 'under'
+            || this.contentPosition === 'above'
+            || this.contentPosition === 'side') {
+            classes['content--inline'] = true;
+            classes['content-position--' + this.contentPosition] = true;
+        }
+        return classes;
+    }
+    bannerStyles() {
+        let styles = {};
+        if (this._mediaAspectRatio) {
+            styles = {
+                ...styles,
+                '--umg-aspect-ratio': this._mediaAspectRatio,
+            };
+        }
+        if (this._mobileMediaAspectRatio) {
+            styles = {
+                ...styles,
+                '--umg-mobile-aspect-ratio': this._mobileMediaAspectRatio,
+            };
+        }
+        else if (this._mediaAspectRatio) {
+            styles = {
+                ...styles,
+                '--umg-mobile-aspect-ratio': this._mediaAspectRatio,
+            };
+        }
+        if (this._headerHeight && this.height === 'stretch') {
+            styles = {
+                ...styles,
+                '--umg-size-header-outer-height': this._headerHeight + 'px'
+            };
+        }
+        return styles;
+    }
+    bannercontentClasses() {
+        const classes = {};
+        classes['content-align--' + this.contentAlign] = true;
+        classes['content-justify--' + this.contentJustify] = true;
+        classes['content--without-content'] = this._withoutContent;
+        return classes;
+    }
+    bannercontentStyles() {
+        let styles = {};
+        styles = {
+            ...styles,
+            '--umg-size-width': this.contentFullWidth ? '100%' : 'auto',
+        };
+        return styles;
+    }
+    contentOuter() {
+        return html `
             <umg-box
-                part="banner-content-container"
-                class="banner-content__inner"
-                padding=${this.contentPosition === "over" ? o(this.contentOuterPadding) : "0"}
+                part="banner-content-inner"
+                class="banner__content-inner"
+                padding=${this.contentPosition === 'over' ? ifDefined(this.contentOuterPadding) : '0'}
                 mobilePadding='0'
                 >
                 ${this.contentInner(this.contentFullWidth)}
             </umg-box>
         `;
-  }
-  contentInner(t) {
-    return r`
+    }
+    contentInner(fullWidth) {
+        return html `
             <umg-box
-                part="content-container"
-                class="content__container"
-                padding=${o(this.contentInnerPadding)}
-                mobilePadding=${o(this.mobilePadding)}
+                part="banner-content-caption"
+                class="banner__content-caption"
+                padding=${ifDefined(this.contentInnerPadding)}
+                mobilePadding=${ifDefined(this.mobilePadding)}
                 adaptivePadding
-                colorText=${o(this.colorText)}
-                colorBg=${o(this.contentPosition === "side" ? void 0 : o(this.colorBg))}
-                opacity=${this.contentPosition === "side" ? "0" : o(this.opacity)}
-                width="${t ? "fill" : "fit-content"}"
+                width="${fullWidth ? 'fill' : 'fit-content'}"
                 >
                 <umg-vertical-stack
+                    class="caption-inner"
                     align=${this.contentJustify}
                     mobileAlign=${this.mobileContentJustify ? this.mobileContentJustify : this.contentJustify}
-                    gap="${o(this.contentSpacing)}"
+                    spacing="${ifDefined(this.contentSpacing)}"
                     >
                     <slot name="content" @slotchange=${this.handleSlotchange}></slot>
                 </umg-vertical-stack>
             </umg-box> `;
-  }
-  content() {
-    return this.contentPosition === "over" || this.contentPosition === "side" ? r`
+    }
+    content() {
+        if (this.contentPosition === 'over' || this.contentPosition === 'side') {
+            return html `
                 ${this.contentOuter()}
-            ` : r`
-            ${this.contentInner(!0)}
+            `;
+        }
+        return html `
+            ${this.contentInner(true)}
         `;
-  }
-  render() {
-    return r`
+    }
+    render() {
+        return html `
             <div
-                class="banner${p(this.bannerClasses())}"
-                style="${b(this.bannerStyles())}"
                 part="banner"
+                class="banner${classMap(this.bannerClasses())}"
+                style="${styleMap(this.bannerStyles())}"
                 >
-                <div class="banner__inner" part="banner-container">
-                    <div class="banner-media" part="banner-media-container">
+                <div
+                    part="banner-container"
+                    class="banner__container"
+                    >
+                    <div
+                        part="banner-media"
+                        class="banner__media"
+                        >
                         <slot name="media"></slot>
                     </div>
                     <div
-                        class="banner-content${p(this.bannercontentClasses())}"
-                        style="${b(this.bannercontentStyles())}"
                         part="banner-content"
+                        class="banner__content${classMap(this.bannercontentClasses())}"
+                        style="${styleMap(this.bannercontentStyles())}"
                         >
                         ${this.content()}
                     </div>
                 </div>
             </div>
         `;
-  }
+    }
 };
-e.styles = v([
-  _,
-  g`
+Banner.styles = mergeStyles([
+    global,
+    css `
             :host {
                 position: relative;
                 display: block;
@@ -148,11 +190,11 @@ e.styles = v([
             }
 
             /* Media overlay */
-            .banner__inner {
+            .banner__container {
                 position: relative;
             }
 
-            .banner:not(.content--inline) .banner__inner::after {
+            .banner:not(.content--inline) .banner__container::after {
                 content: '';
                 display: block;
                 position: absolute;
@@ -161,69 +203,68 @@ e.styles = v([
                 height: 100%;
                 width: 100%;
                 z-index: 1;
-                background-color: rgb(var(--um-banner-overlay-color, 255,255,255),var(--um-banner-overlay-opacity, 0));
+                background-color: var(--umg-color-overlay-background, 255,255,255,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;
+            @supports (color: rgb(from white r g b)) {
+                .banner:not(.content--inline) .banner__container::after {
+                    background-color: rgb(from var(--umg-color-overlay-background, 255,255,255,0) r g b / alpha);
                 }
             }
 
+            /* Caption color */
+            .banner__content-caption  {
+                --umg-color-base-text: var(--umg-color-caption-text);
+                --umg-color-base-background: var(--umg-color-caption-background);
+            }
+
             /* Banner media height */
             @media only screen and (max-width: 30rem) {
-                .media-height--xsmall .banner-media {
+                .media-height--xsmall .banner__media {
                     height: 10em;
                 }
-                .media-height--small .banner-media {
+                .media-height--small .banner__media {
                     height: 15rem;
                 }
-                .media-height--medium .banner-media {
+                .media-height--medium .banner__media {
                     height: 20rem;
                 }
-                .media-height--large .banner-media {
+                .media-height--large .banner__media {
                     height: 25rem;
                 }
-                .media-height--xlarge .banner-media {
+                .media-height--xlarge .banner__media {
                     height: 30rem;
                 }
             }
             @media only screen and (min-width: 30.06rem) {
-                .media-height--xsmall .banner-media {
+                .media-height--xsmall .banner__media {
                     height: 15rem;
                 }
-                .media-height--small .banner-media {
+                .media-height--small .banner__media {
                     height: 20rem;
                 }
-                .media-height--medium .banner-media {
+                .media-height--medium .banner__media {
                     height: 25rem;
                 }
-                .media-height--large .banner-media {
+                .media-height--large .banner__media {
                     height: 30rem;
                 }
-                .media-height--xlarge .banner-media {
+                .media-height--xlarge .banner__media {
                     height: 40rem;
                 }
             }
 
-            .media-height--stretch .banner-media {
-                height: calc(100vh - var(--um-size-header-outer-height, 0px));
+            .media-height--stretch .banner__media {
+                height: calc(100vh - var(--umg-size-header-outer-height, 0px));
             }
 
             /* Adapt banner to media height */
-            .banner.media-height--adapt .banner-media {
-                aspect-ratio: var(--um-mobile-aspect-ratio);
+            .banner.media-height--adapt .banner__media {
+                aspect-ratio: var(--umg-mobile-aspect-ratio);
                 height: auto;
             }
             @media only screen and (min-width: 48.06rem) {
-                .banner.media-height--adapt .banner-media {
-                    aspect-ratio: var(--um-aspect-ratio);
+                .banner.media-height--adapt .banner__media {
+                    aspect-ratio: var(--umg-aspect-ratio);
                 }
             }
 
@@ -236,14 +277,14 @@ e.styles = v([
 
             @media only screen and (max-width: 48.06rem) {
                 /* All positions - mobile content box is full width */
-                .content__container {
+                .banner__content-caption {
                     width: 100%;
                 }
             }
 
             /* Desktop content over media */
             @media only screen and (min-width: 48.06rem) {
-                .banner:not(.content--inline) .banner-content {
+                .banner:not(.content--inline) .banner__content {
                     position: absolute;
                     top: 0;
                     left: 0;
@@ -254,134 +295,146 @@ e.styles = v([
             }
 
             /* Desktop content to side of media */
-            .content-position--side .banner__inner {
-                background-color: rgb(var(--um-color-box-bg), var(--um-opacity-box-bg))
+            .content-position--side .banner__content {
+                position: relative;
+            }
+            .content-position--side .banner__content-inner {
+                position: relative;
+                z-index: 10;
+            }
+            .content-position--side .banner__content-caption::part(box-content) {
+                background-color: transparent;
+            }
+            .content-position--side .banner__content:after {
+                content: '';
+                position: absolute;
+                inset: 0;
+                z-index: 0;
+                background-color: var(--umg-color-caption-background);
+            }
+            @supports (color: rgb(from white r g b)) {
+                .content-position--side .banner__content:after {
+                    background-color: rgb(from var(--umg-color-caption-background) r g b / alpha);
+                }
+            }
+            .content-position--side .banner__container {
+                background-color: var(--umg-color-base-background);
+            }
+            @supports (color: rgb(from white r g b)) {
+                .content-position--side .banner__container {
+                    background-color: rgb(from var(--umg-color-base-background) r g b / alpha);
+                }
             }
 
             @media only screen and (min-width: 48.06rem) {
-                .content--inline.content-position--side .banner__inner {
+                .content--inline.content-position--side .banner__container {
                     flex-direction: row-reverse
                 }
-                .content--inline.content-position--side .banner-media {
+                .content--inline.content-position--side .banner__media {
                     flex: 1 0 auto;
-                    width: 60%;
+                    width: 70%;
                 }
-                .content--inline.content-position--side .banner-content ::slotted(*) {
+                .content--inline.content-position--side .banner__content ::slotted(*) {
                     height: 100%;
                 }
             }
 
             /* Inline with media, side/above/under*/
-            .content--inline .banner__inner {
+            .content--inline .banner__container {
                 display: flex;
                 flex-direction: column;
             }
 
-            .content-position--above .banner-media {
+            .content-position--above .banner__media {
                 order: 2;
             }
-            .content-position--above .banner-content {
+            .content-position--above .banner__content {
                 order: 1;
             }
-            .content-position--under .banner-media {
+            .content-position--under .banner__media {
                 order: 1;
             }
-            .content-position--under .banner-content {
+            .content-position--under .banner__content {
                 order: 2;
             }
 
             /* Content over media box alignments */
-            .banner-content__inner {
+            .banner__content-inner {
                 height: 100%;
             }
-            .banner-content__inner:not(.content__container)::part(box-content) {
+            .banner__content-inner::part(box-content) {
                background-color: transparent;
                display: flex;
             }
-            .content__container::part(box-content) {
+            .banner__content-caption::part(box-content) {
                height: auto;
             }
 
-            .content-justify--start .banner-content__inner:not(.content__container)::part(box-content) {
+            .content-justify--start .banner__content-inner::part(box-content) {
                 justify-content: start;
             }
-            .content-justify--center .banner-content__inner:not(.content__container)::part(box-content) {
+            .content-justify--center .banner__content-inner::part(box-content) {
                 justify-content: center;
             }
-            .content-justify--end .banner-content__inner:not(.content__container)::part(box-content) {
+            .content-justify--end .banner__content-inner::part(box-content) {
                 justify-content: end;
             }
-            .content-align--start .banner-content__inner:not(.content__container)::part(box-content) {
+            .content-align--start .banner__content-inner::part(box-content) {
                 align-items: start;
             }
-            .content-align--center .banner-content__inner:not(.content__container)::part(box-content) {
+            .content-align--center .banner__content-inner::part(box-content) {
                 align-items: center;
             }
-            .content-align--end .banner-content__inner:not(.content__container)::part(box-content) {
+            .content-align--end .banner__content-inner::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([
-  y(`${A}-banner`)
-], e);
-export {
-  e as Banner
-};
+__decorate([
+    property()
+], Banner.prototype, "height", void 0);
+__decorate([
+    property()
+], Banner.prototype, "contentPosition", void 0);
+__decorate([
+    property({ type: Boolean })
+], Banner.prototype, "contentFullWidth", void 0);
+__decorate([
+    property()
+], Banner.prototype, "contentAlign", void 0);
+__decorate([
+    property()
+], Banner.prototype, "contentJustify", void 0);
+__decorate([
+    property()
+], Banner.prototype, "mobileContentJustify", void 0);
+__decorate([
+    property()
+], Banner.prototype, "contentSpacing", void 0);
+__decorate([
+    property()
+], Banner.prototype, "contentInnerPadding", void 0);
+__decorate([
+    property()
+], Banner.prototype, "contentOuterPadding", void 0);
+__decorate([
+    property()
+], Banner.prototype, "mobilePadding", void 0);
+__decorate([
+    state()
+], Banner.prototype, "_mediaAspectRatio", void 0);
+__decorate([
+    state()
+], Banner.prototype, "_mobileMediaAspectRatio", void 0);
+__decorate([
+    state()
+], Banner.prototype, "_headerHeight", void 0);
+__decorate([
+    state()
+], Banner.prototype, "_withoutContent", void 0);
+Banner = __decorate([
+    customElement(`${prefix}-banner`)
+], Banner);
+
+export { Banner };
+//# sourceMappingURL=banner.js.map