@pushengineering/umg-web-components 2.0.6 → 3.0.1

package/dist/components/caption-card/caption-card.js

@@ -1,88 +1,135 @@
-import { css as m, LitElement as u, html as l } from "lit";
-import { customElement as g } from "lit/decorators/custom-element.js";
-import { property as o } from "lit/decorators/property.js";
-import { state as d } from "lit/decorators/state.js";
-import { ifDefined as v } from "lit/directives/if-defined.js";
-import { classMap as h } from "lit/directives/class-map.js";
-import { styleMap as f } from "lit/directives/style-map.js";
-import { EventManager as b } from "../../classes/event-manager/event-manager.js";
-import { global as y } from "../../styles/global.js";
-import { settings as _ } from "../../scripts/settings.js";
-import { mergeStyles as x } from "../../scripts/mergeStyles.js";
-import "../box/box.js";
-import "../vertical-stack/vertical-stack.js";
-import "../popover/popover.js";
-var E = Object.defineProperty, C = Object.getOwnPropertyDescriptor, i = (t, r, s, n) => {
-  for (var a = n > 1 ? void 0 : n ? C(r, s) : r, p = t.length - 1, c; p >= 0; p--)
-    (c = t[p]) && (a = (n ? c(r, s, a) : c(a)) || a);
-  return n && a && E(r, s, a), a;
-};
-const { prefix: M } = _;
-let e = class extends u {
-  constructor() {
-    super(), this.position = "under", this.colorBlend = !1, this.border = !1, this.opacityOverlay = 0, this.cardPopover = !1, this._popoverVisible = !1, this.cardEventManager = new b(this), this._eventsHandler = (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())), this.cardPopover && (t.pointerType !== "touch" && (t.type === "pointerenter" && !this._popoverVisible && (this._popoverVisible = !0), t.type === "pointerleave" && this._popoverVisible && (this._popoverVisible = !1)), t.pointerType === "touch" && t.type === "pointerenter" && !this._popoverVisible && (this._popoverVisible = !0), t.type === "close-popover" && this._popoverVisible && (this._popoverVisible = !1), t.type === "focusin" && !this._popoverVisible && (this._popoverVisible = !0), t.type === "focusout" && this._popoverVisible && (t.currentTarget.contains(t.relatedTarget) || (this._popoverVisible = !1)));
-    }, this.cardEventManager.addEventListener("media-details", this._eventsHandler);
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.cardPopover && (this.cardEventManager.addEventListener("close-popover", this._eventsHandler), this.cardEventManager.addEventListener("pointerenter", this._eventsHandler), this.cardEventManager.addEventListener("pointerleave", this._eventsHandler), this.cardEventManager.addEventListener("focusin", this._eventsHandler), this.cardEventManager.addEventListener("focusout", this._eventsHandler));
-  }
-  disconnectedCallback() {
-    this.cardPopover && (this.cardEventManager.removeEventListener("close-popover", this._eventsHandler), this.cardEventManager.removeEventListener("pointerenter", this._eventsHandler), this.cardEventManager.removeEventListener("pointerleave", this._eventsHandler), this.cardEventManager.removeEventListener("focusin", this._eventsHandler), this.cardEventManager.removeEventListener("focusout", this._eventsHandler)), super.disconnectedCallback();
-  }
-  popoverClose() {
-    this._popoverVisible = !1;
-  }
-  cardClasses() {
-    const t = {
-      "caption-card--border": this.border
-    };
-    return this.position === "under" && (t["caption--inline"] = !0, t["caption-position--" + this.position] = !0), this.position === "over" && (t["caption-position--" + this.position] = !0), t;
-  }
-  cardStyles() {
-    let t = {};
-    return t = {
-      "--um-caption-card-overlay-opacity": this.opacityOverlay,
-      "--um-aspect-ratio": this._mediaAspectRatio,
-      "--um-mobile-aspect-ratio": this._mobileMediaAspectRatio
-    }, this.colorText && (t = {
-      ...t,
-      "--um-color-box-text": this.colorText,
-      "--um-color-icon-text": this.colorText
-    }), this.colorBg && (t = {
-      ...t,
-      "--um-color-box-bg": this.colorBg
-    }), this.opacityBg && (t = {
-      ...t,
-      "--um-opacity-box-bg": this.opacityBg
-    }), this.borderRadius && (t = {
-      ...t,
-      "--um-border-caption-card-radius": "var(--um-border-radius-" + this.borderRadius + ")"
-    }), this.colorOverlay && (t = {
-      ...t,
-      "--um-caption-card-overlay-color": this.colorOverlay
-    }), t;
-  }
-  captionClasses() {
-    const t = {};
-    return this.align && (t["caption-align--" + this.align] = !0), this.justify && (t["caption-justify--" + this.justify] = !0), t;
-  }
-  popoverContent() {
-    if (this.cardPopover)
-      return l`
-                <umg-popover slot="popover" ?visible=${this._popoverVisible}>
-                    <slot name="popover-title" slot="title"></slot>
-                    <slot name="popover-content" slot="content"></slot>
-                </umg-popover>
-            `;
-  }
-  render() {
-    return l`
+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 { slotInitialised } from '../../scripts/utilities/slotInitialised.js';
+import { EventManager } from '../../classes/event-manager/event-manager.js';
+import { global } from '../../styles/global.js';
+import { settings } from '../../scripts/settings.js';
+import { mergeStyles } from '../../scripts/mergeStyles.js';
+import './card-popover.js';
+import '../box/box.js';
+import '../vertical-stack/vertical-stack.js';
+
+const { prefix } = settings;
+let CaptionCard = class CaptionCard extends LitElement {
+    constructor() {
+        super();
+        this.position = 'under';
+        this.colorBlend = false;
+        this.border = false;
+        this._hasPopover = false;
+        this._cardPopover = null;
+        this._tabElements = null;
+        this.eventManager = new EventManager(this);
+        this._eventsHandler = (e) => {
+            if (e.type === 'media-details') {
+                if (e.detail.mediaAspectRatio) {
+                    this._mediaAspectRatio = e.detail.mediaAspectRatio.toString();
+                }
+                if (e.detail.mobileMediaAspectRatio) {
+                    this._mobileMediaAspectRatio = e.detail.mobileMediaAspectRatio.toString();
+                }
+                else if (e.detail.mediaAspectRatio) {
+                    this._mediaAspectRatio = e.detail.mediaAspectRatio.toString();
+                }
+            }
+            if (this._cardPopover) {
+                if (e.key === 'Escape' && this._cardPopover.hasAttribute('visible')) {
+                    this._cardPopover.removeAttribute('visible');
+                    document.body.style.overflow = 'hidden';
+                }
+                if (e.pointerType !== 'touch') {
+                    if (e.type === 'pointerenter' || e.type === 'focusin') {
+                        this._cardPopover.setAttribute('visible', '');
+                    }
+                    if (e.type === 'pointerleave' || e.type === 'focusout') {
+                        if (!e.currentTarget.contains(e.relatedTarget)) {
+                            this._cardPopover.removeAttribute('visible');
+                        }
+                    }
+                }
+                if (e.pointerType === 'touch'
+                    && e.type === 'pointerenter'
+                    && !this._cardPopover.hasAttribute('visible')) {
+                    this._cardPopover.setAttribute('visible', '');
+                    document.body.style.overflow = 'hidden';
+                }
+            }
+        };
+        this.eventManager.addEventListener('media-details', this._eventsHandler);
+        this.eventManager.addEventListener('keyup', this._eventsHandler);
+    }
+    _handleSlotChange(e) {
+        this._hasPopover = slotInitialised(e, 'popover');
+        this._cardPopover = this.querySelector('umg-card-popover');
+        this._tabElements = this.querySelectorAll('a[href], button, video, iframe, umg-button, umg-link');
+        this._tabElements.forEach(element => {
+            element.setAttribute('tabindex', '-1');
+        });
+        this.setAttribute('tabindex', '0');
+        this.setAttribute('aria-describedby', 'popover-content');
+    }
+    updated() {
+        if (this._hasPopover) {
+            this.eventManager.addEventListener('pointerenter', this._eventsHandler);
+            this.eventManager.addEventListener('pointerleave', this._eventsHandler);
+            this.eventManager.addEventListener('focusin', this._eventsHandler);
+            this.eventManager.addEventListener('focusout', this._eventsHandler);
+        }
+        else if (!this._hasPopover) {
+            this.eventManager.removeEventListener('pointerenter', this._eventsHandler);
+            this.eventManager.removeEventListener('pointerleave', this._eventsHandler);
+            this.eventManager.removeEventListener('focusin', this._eventsHandler);
+            this.eventManager.removeEventListener('focusout', this._eventsHandler);
+        }
+    }
+    cardClasses() {
+        const classes = {
+            'caption-card--border': this.border
+        };
+        if (this.position === 'under') {
+            classes['caption--inline'] = true;
+            classes['caption-position--' + this.position] = true;
+        }
+        if (this.position === 'over') {
+            classes['caption-position--' + this.position] = true;
+        }
+        return classes;
+    }
+    cardStyles() {
+        let styles = {};
+        styles = {
+            '--umg-aspect-ratio': this._mediaAspectRatio,
+            '--umg-mobile-aspect-ratio': this._mobileMediaAspectRatio,
+        };
+        return styles;
+    }
+    captionClasses() {
+        const classes = {};
+        if (this.align) {
+            classes['caption-align--' + this.align] = true;
+        }
+        if (this.justify) {
+            classes['caption-justify--' + this.justify] = true;
+        }
+        return classes;
+    }
+    mobileGap() {
+        if (this.spacing) {
+            return Number(this.spacing) * 0.75;
+        }
+    }
+    render() {
+        return html `
             <div
                 part="caption-card"
-                class="caption-card${h(this.cardClasses())}"
-                style="${f(this.cardStyles())}"
-                tabindex=${this.cardPopover ? "0" : "-1"}
+                class="caption-card${classMap(this.cardClasses())}"
+                style="${styleMap(this.cardStyles())}"
                 >
                 <div class="caption-card__inner">
                     <div part="media" class="media">
@@ -91,18 +138,20 @@ let e = class extends u {
                             <slot name="badge"></slot>
                         </div>
                     </div>
-                    <div part="caption" class="caption${h(this.captionClasses())}">
+                    <div part="caption" class="caption${classMap(this.captionClasses())}">
                         <div class="caption-inner">
                             <umg-box
-                                padding=${v(this.padding)}
-                                mobilePadding=${v(this.mobilePadding)}
-                                fixPadding
-                                ?colorBlend="${this.colorBlend}"
+                                class="caption-content"
                                 blendDirection="to-top"
+                                padding=${ifDefined(this.padding)}
+                                mobilePadding=${ifDefined(this.mobilePadding)}
+                                ?colorBlend="${this.colorBlend}"
+                                fixPadding
                                 >
                                 <umg-vertical-stack
                                     class="caption-stack"
-                                    gap="${this.spacing ? this.spacing : "12"}"
+                                    spacing="${ifDefined(this.spacing)}"
+                                    mobileSpacing="${ifDefined(this.mobileGap())}"
                                     justify="space-between"
                                     >
                                     <slot name="content"></slot>
@@ -110,15 +159,15 @@ let e = class extends u {
                             </umg-box>
                         </div>
                     </div>
-                    ${this.popoverContent()}
                 </div>
+                <slot name="popover" @slotchange=${this._handleSlotChange}></slot>
             </div>
         `;
-  }
+    }
 };
-e.styles = x([
-  y,
-  m`
+CaptionCard.styles = mergeStyles([
+    global,
+    css `
             :host {
                 position: relative;
                 display: block;
@@ -136,14 +185,13 @@ e.styles = x([
             .caption-card__inner {
                 height: 100%;
                 position: relative;
-                border-radius: var(--um-border-caption-card-radius);
                 overflow: hidden;
+                border-radius: var(--umg-border-base-corner-radius);
             }
 
             /* Card overlay */
-            .caption-card__inner::after {
+            .caption-card__inner .media::after {
                 content: '';
-                background-color: rgba(var(--um-caption-card-overlay-color),var(--um-caption-card-overlay-opacity, 0));
                 display: block;
                 height: 100%;
                 left: 0;
@@ -152,25 +200,41 @@ e.styles = x([
                 width: 100%;
                 z-index: 1;
                 pointer-events: none;
+                background-color: var(--umg-color-overlay-background);
+                border-radius: var(--umg-border-base-corner-radius) var(--umg-border-base-corner-radius) 0 0;
+            }
+
+            /* Standard border */
+            .caption-card__inner {
+                border-width: var(--umg-border-base-width, 0);
+                border-style: solid;
+                border-color: var(--umg-color-base-border, rgb(0,0,0,0));
+                --umg-color-base-text: var(--umg-color-card-text);
+                --umg-color-base-background: var(--umg-color-card-background);
             }
 
             /* Card padded border */
             .caption-card--border .caption-card__inner {
-                padding: var(--um-space-16);
-                background-color: rgb(var(--um-color-box-bg), var(--um-opacity-box-bg))
+                padding: var(--umg-space-padding, 1rem);
+                background-color: var(--umg-color-card-background, rgb(240,240,240));
+            }
+            .caption-card--border .caption-content {
+                --umg-color-base-background: transparent;
             }
-            .caption-card--border .caption ::part(box-content) {
-                background-color: transparent;
+            .caption-card--border.caption-position--over .caption {
+                padding: var(--umg-space-padding, 1rem);
             }
 
-            /* Card badge */
-            .badge {
-                position: absolute;
-                top: 0;
-                left: 0;
-                z-index: 1;
-                letter-spacing: 0.07rem;
-                pointer-events: none;
+            @supports (color: rgb(from white r g b)) {
+                .caption-card__inner {
+                    border-color: rgb(from var(--umg-color-base-border, rgb(0,0,0)) r g b / alpha);
+                }
+                .caption-card__inner .media::after {
+                    background-color: rgb(from var(--umg-color-overlay-background) r g b / calc(alpha * var(--umg-opacity-overlay-background)));
+                }
+                .caption-card--border .caption-card__inner {
+                    background-color: rgb(from var(--umg-color-card-background, rgb(240,240,240)) r g b / alpha)
+                }
             }
 
             /** Caption content */
@@ -178,21 +242,38 @@ e.styles = x([
                 flex: 1;
                 z-index: 20;
             }
-            .caption pu-vertical-stack ::slotted(:last-child) {
+            .caption umg-vertical-stack ::slotted(:last-child) {
                 margin-top: auto;
             }
 
+            .caption-inner ::part(box-content) {
+                border-radius: 0;
+            }
+
+            /* Card badge */
+            .badge {
+                position: absolute;
+                top: 1rem;
+                left: 1rem;
+                z-index: 1;
+                letter-spacing: 0.07rem;
+                pointer-events: none;
+            }
+
             /** Media content */
             .media {
                 position: relative;
-                aspect-ratio: var(--um-mobile-aspect-ratio);
+                aspect-ratio: var(--umg-mobile-aspect-ratio);
                 flex-shrink: 1;
+                padding: var(--umg-space-caption-card-media-padding);
                 height: auto;
+                border-radius: calc(var(--umg-border-base-corner-radius) * 0.7) calc(var(--umg-border-base-corner-radius) * 0.7) 0 0;
+                overflow: hidden;
             }
 
             @media only screen and (min-width: 30.06rem) {
                 .media {
-                    aspect-ratio: var(--um-aspect-ratio);
+                    aspect-ratio: var(--umg-aspect-ratio);
                 }
             }
 
@@ -218,9 +299,9 @@ e.styles = x([
                     z-index: 10;
                 }
                 .caption-position--over {
-                    aspect-ratio: var(--um-mobile-aspect-ratio);
+                    aspect-ratio: var(--umg-mobile-aspect-ratio);
                     height: auto;
-                    aspect-ratio: var(--um-aspect-ratio);
+                    aspect-ratio: var(--umg-aspect-ratio);
                 }
             }
 
@@ -265,65 +346,50 @@ e.styles = x([
                 z-index: 10;
                 cursor: pointer;
             }
-        `
+        `,
 ]);
-i([
-  o()
-], e.prototype, "position", 2);
-i([
-  o()
-], e.prototype, "align", 2);
-i([
-  o()
-], e.prototype, "justify", 2);
-i([
-  o()
-], e.prototype, "padding", 2);
-i([
-  o()
-], e.prototype, "mobilePadding", 2);
-i([
-  o()
-], e.prototype, "spacing", 2);
-i([
-  o()
-], e.prototype, "colorBg", 2);
-i([
-  o()
-], e.prototype, "colorText", 2);
-i([
-  o()
-], e.prototype, "opacityBg", 2);
-i([
-  o({ type: Boolean })
-], e.prototype, "colorBlend", 2);
-i([
-  o({ type: Boolean })
-], e.prototype, "border", 2);
-i([
-  o()
-], e.prototype, "borderRadius", 2);
-i([
-  o()
-], e.prototype, "colorOverlay", 2);
-i([
-  o({ type: Number })
-], e.prototype, "opacityOverlay", 2);
-i([
-  o({ type: Boolean })
-], e.prototype, "cardPopover", 2);
-i([
-  d()
-], e.prototype, "_mediaAspectRatio", 2);
-i([
-  d()
-], e.prototype, "_mobileMediaAspectRatio", 2);
-i([
-  d()
-], e.prototype, "_popoverVisible", 2);
-e = i([
-  g(`${M}-caption-card`)
-], e);
-export {
-  e as CaptionCard
-};
+__decorate([
+    property()
+], CaptionCard.prototype, "position", void 0);
+__decorate([
+    property()
+], CaptionCard.prototype, "align", void 0);
+__decorate([
+    property()
+], CaptionCard.prototype, "justify", void 0);
+__decorate([
+    property()
+], CaptionCard.prototype, "padding", void 0);
+__decorate([
+    property()
+], CaptionCard.prototype, "mobilePadding", void 0);
+__decorate([
+    property()
+], CaptionCard.prototype, "spacing", void 0);
+__decorate([
+    property({ type: Boolean })
+], CaptionCard.prototype, "colorBlend", void 0);
+__decorate([
+    property({ type: Boolean })
+], CaptionCard.prototype, "border", void 0);
+__decorate([
+    state()
+], CaptionCard.prototype, "_mediaAspectRatio", void 0);
+__decorate([
+    state()
+], CaptionCard.prototype, "_mobileMediaAspectRatio", void 0);
+__decorate([
+    state()
+], CaptionCard.prototype, "_hasPopover", void 0);
+__decorate([
+    state()
+], CaptionCard.prototype, "_cardPopover", void 0);
+__decorate([
+    state()
+], CaptionCard.prototype, "_tabElements", void 0);
+CaptionCard = __decorate([
+    customElement(`${prefix}-caption-card`)
+], CaptionCard);
+
+export { CaptionCard };
+//# sourceMappingURL=caption-card.js.map

package/dist/components/caption-card/caption-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"caption-card.js","sources":["../../../src/components/caption-card/caption-card.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/dist/components/caption-card/card-popover.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+import '../box/index.js';
+import '../vertical-stack/index.js';
+import '../horizontal-stack/index.js';
+import '../button-icon/index.js';
+export declare class CardPopover extends LitElement {
+    visible: boolean;
+    private _closePopover;
+    popoverClasses(): any;
+    popoverStyles(): {
+        visibility: string;
+    };
+    closeButton(): import("lit").TemplateResult<1> | undefined;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}
+//# sourceMappingURL=card-popover.d.ts.map

package/dist/components/caption-card/card-popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-popover.d.ts","sourceRoot":"","sources":["../../../src/components/caption-card/card-popover.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAA;AAW3C,OAAO,iBAAiB,CAAA;AACxB,OAAO,4BAA4B,CAAA;AACnC,OAAO,8BAA8B,CAAA;AACrC,OAAO,yBAAyB,CAAA;AAIhC,qBAEa,WAAY,SAAQ,UAAU;IAGvC,OAAO,UAAQ;IAEf,OAAO,CAAC,aAAa;IAKrB,cAAc;IAOd,aAAa;;;IAQb,WAAW;IAeX,MAAM;IAyBN,MAAM,CAAC,MAAM,+BAiJX;CACL"}