@pushengineering/umg-web-components 2.0.0

package/dist/packages/web-components/components/button-icon/button-icon.js

@@ -0,0 +1,246 @@
+import "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as l } 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 m } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as e } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/property.js";
+import { ifDefined as b } 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 d } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/style-map.js";
+import { global as f } from "../../styles/global.js";
+import { iconSize as y } from "../../styles/icon-size.js";
+import { settings as g } from "../../scripts/settings.js";
+import { mergeStyles as v } from "../../scripts/mergeStyles.js";
+import "../icon/icon.js";
+import { css as x } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
+var $ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, i = (t, n, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? w(n, a) : n, c = t.length - 1, u; c >= 0; c--)
+    (u = t[c]) && (r = (s ? u(n, a, r) : u(r)) || r);
+  return s && r && $(n, a, r), r;
+};
+const { prefix: I } = g;
+let o = class extends h {
+  constructor() {
+    super(), this.as = "button", this.for = void 0, this.clickAction = void 0, this.url = void 0, this.target = "_self", this.type = "button", this.icon = "user", this.size = "xLarge", this.extendInteraction = !1, this.disabled = !1, this.padding = "", this.border = !1, this.label = "Accessible", this._extendedInteraction();
+  }
+  async _extendedInteraction() {
+    await this.updateComplete, !this.disabled && this.as === "link" && this.url !== void 0 && this.extendInteraction && this.dispatchEvent(new CustomEvent("extend-interaction", {
+      detail: {
+        url: this.url,
+        target: this.target
+      },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  handleClick() {
+    if (!this.disabled && this.clickAction) {
+      const t = new CustomEvent(this.clickAction, {
+        bubbles: !0,
+        composed: !0
+      });
+      this.dispatchEvent(t);
+    }
+  }
+  buttonIconClasses() {
+    return {
+      "btn--border": this.border,
+      "btn--extend-interactive": this.extendInteraction
+    };
+  }
+  buttonIconStyles() {
+    let t = {};
+    return this.border && (t = {
+      ...t,
+      "--um-border-button-icon-width": "var(--um-border-width-" + this.borderWidth + ")"
+    }), this.borderRadius && (t = {
+      ...t,
+      "--um-border-button-icon-radius": "var(--um-border-radius-" + this.borderRadius + ")"
+    }), this.padding && (t = {
+      ...t,
+      "--um-space-button-icon-padding": "var(--um-space-" + this.padding + ", 0)"
+    }), this.colorBgOpacity && (t = {
+      ...t,
+      "--um-opacity-button-icon-bg": this.colorBgOpacity
+    }), this.colorBg && (t = {
+      ...t,
+      "--um-color-button-icon-bg": this.colorBg
+    }), this.colorText && (t = {
+      ...t,
+      "--um-color-button-icon-text": this.colorText
+    }), this.size && (t = {
+      ...t,
+      "--um-font-size-button-icon": y(this.size)
+    }), t;
+  }
+  buttonAs() {
+    if (this.as === "button" || this.url === void 0 || this.url === "")
+      return l`
+                <button
+                    type=${this.type}
+                    class="button-icon${p(this.buttonIconClasses())}"
+                    style="${d(this.buttonIconStyles())}"
+                    ?disabled=${this.disabled}
+                    aria-label=${this.label}
+                    aria-controls=${b(this.for)}
+                    clickAction=${b(this.clickAction)}
+                    @click=${this.handleClick}
+                    part="button-icon"
+                    >
+                    <umg-icon 
+                        icon=${this.icon} 
+                        part="umg-icon" 
+                        exportparts="icon"
+                        >
+                    </umg-icon>
+                </button>
+            `;
+    if (this.url)
+      return l`
+                <a
+                    href="${this.url}"
+                    class="button-icon${p(this.buttonIconClasses())}"
+                    style="${d(this.buttonIconStyles())}"
+                    target="${this.target}"
+                    ?disabled=${this.disabled}
+                    aria-label=${this.label}
+                    part="button-icon"
+                    >
+                    <umg-icon
+                        icon=${this.icon}
+                        part="umg-icon"
+                        exportparts="icon"
+                        >
+                    </umg-icon>
+                </a>
+            `;
+  }
+  render() {
+    return l`
+            ${this.buttonAs()}
+      `;
+  }
+};
+o.styles = v([
+  f,
+  x`
+            :host {
+                display: inline-flex;
+            }
+            button[disabled] {
+                opacity: 0.3;
+                cursor: default;
+            }
+            .button-icon {
+                cursor: pointer;
+                color: rgb(var(--um-color-button-icon-text, 0,0,0), var(--um-opacity-button-icon-inactive, 1));
+                background-color: rgb(var(--um-color-button-icon-bg, 240,240,240), var(--um-opacity-button-icon-bg, 0));
+                border: none;
+                border-radius: var(--um-border-button-icon-radius, 0);
+                font-size: var(--um-font-size-button-icon, 1.5rem);
+                padding: 0;
+            }
+            a.button-icon {
+                display: inline-block;
+                line-height: normal
+            }
+            .button-icon > * {
+                position: relative;
+                display: block;
+                padding: var(--um-space-button-icon-padding, 0.5rem);
+            }
+
+            /* States */
+            .button-icon:hover {
+                opacity: 0.7;
+            }
+            .button-icon[disabled]:hover {
+                opacity: 0.3;
+            }
+
+            /* Behaviour */
+            .btn--extend-interactive::after {
+                content: '';
+                position:absolute;
+                top:0;
+                left:0;
+                height: 100%;
+                width: 100%;
+                z-index: 1;
+            }
+
+            /* Shape */
+            .btn--border > *::after {
+                content: '';
+                position: absolute;
+                left: 0;
+                right: 0;
+                top: 0;
+                bottom: 0;
+                box-shadow: 0 0 0 var(--um-border-button-icon-width, var(--um-border-width-10, 0.0625rem)) rgb(var(--um-color-button-icon-text, 255,255,255), var(--um-opacity-button-icon-border, 0.8));
+                border-radius: var(--um-border-button-icon-radius, 0);
+            }
+            .button-icon:hover > *::after {
+                box-shadow: 0 0 0 var(--um-border-button-icon-width, var(--um-border-width-10, 0.0625rem)) rgb(var(--um-color-button-icon-text, 255,255,255), 1);
+            }
+        `
+]);
+i([
+  e()
+], o.prototype, "as", 2);
+i([
+  e()
+], o.prototype, "for", 2);
+i([
+  e()
+], o.prototype, "clickAction", 2);
+i([
+  e()
+], o.prototype, "url", 2);
+i([
+  e()
+], o.prototype, "target", 2);
+i([
+  e()
+], o.prototype, "type", 2);
+i([
+  e()
+], o.prototype, "icon", 2);
+i([
+  e()
+], o.prototype, "size", 2);
+i([
+  e({ type: Boolean })
+], o.prototype, "extendInteraction", 2);
+i([
+  e({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled", 2);
+i([
+  e()
+], o.prototype, "padding", 2);
+i([
+  e({ type: Boolean })
+], o.prototype, "border", 2);
+i([
+  e()
+], o.prototype, "borderRadius", 2);
+i([
+  e()
+], o.prototype, "borderWidth", 2);
+i([
+  e()
+], o.prototype, "colorText", 2);
+i([
+  e()
+], o.prototype, "colorBg", 2);
+i([
+  e({ type: Number })
+], o.prototype, "colorBgOpacity", 2);
+i([
+  e()
+], o.prototype, "label", 2);
+o = i([
+  m(`${I}-button-icon`)
+], o);
+export {
+  o as ButtonIcon
+};

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

@@ -0,0 +1,331 @@
+import "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as l } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
+import { LitElement as m } 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 o } 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 v } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/if-defined.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 { EventManager as g } from "../../classes/event-manager/event-manager.js";
+import { global as b } from "../../styles/global.js";
+import { settings as y } from "../../scripts/settings.js";
+import { mergeStyles as _ } from "../../scripts/mergeStyles.js";
+import "../box/box.js";
+import "../vertical-stack/vertical-stack.js";
+import "../popover/popover.js";
+import { css as x } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.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 } = y;
+let e = class extends m {
+  constructor() {
+    super(), this.position = "under", this.colorBlend = !1, this.border = !1, this.opacityOverlay = 0, this.cardPopover = !1, this._popoverVisible = !1, this.cardEventManager = new g(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`
+            <div
+                part="caption-card"
+                class="caption-card${h(this.cardClasses())}"
+                style="${f(this.cardStyles())}"
+                tabindex=${this.cardPopover ? "0" : "-1"}
+                >
+                <div class="caption-card__inner">
+                    <div part="media" class="media">
+                        <slot name="media"></slot>
+                        <div class="badge">
+                            <slot name="badge"></slot>
+                        </div>
+                    </div>
+                    <div part="caption" class="caption${h(this.captionClasses())}">
+                        <div class="caption-inner">
+                            <umg-box
+                                padding=${v(this.padding)}
+                                mobilePadding=${v(this.mobilePadding)}
+                                ?colorBlend="${this.colorBlend}"
+                                blendDirection="to-top"
+                                >
+                                <umg-vertical-stack
+                                    class="caption-stack"
+                                    gap="${this.spacing ? this.spacing : "12"}"
+                                    justify="space-between"
+                                    >
+                                    <slot name="content"></slot>
+                                </umg-vertical-stack>
+                            </umg-box>
+                        </div>
+                    </div>
+                    ${this.popoverContent()}
+                </div>
+            </div>
+        `;
+  }
+};
+e.styles = _([
+  b,
+  x`
+            :host {
+                position: relative;
+                display: block;
+                height: 100%;
+                width: 100%;
+            }
+
+            /** Card */
+            .caption-card {
+                position: relative;
+                height: 100%;
+                width: 100%;
+                overflow: hidden;
+            }
+            .caption-card__inner {
+                height: 100%;
+                position: relative;
+                border-radius: var(--um-border-caption-card-radius);
+                overflow: hidden;
+            }
+
+            /* Card overlay */
+            .caption-card__inner::after {
+                content: '';
+                background-color: rgba(var(--um-caption-card-overlay-color),var(--um-caption-card-overlay-opacity, 0));
+                display: block;
+                height: 100%;
+                left: 0;
+                position: absolute;
+                top: 0;
+                width: 100%;
+                z-index: 1;
+                pointer-events: none;
+            }
+
+            /* 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))
+            }
+            .caption-card--border .caption ::part(box-content) {
+                background-color: transparent;
+            }
+
+            /* Card badge */
+            .badge {
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: 1;
+                letter-spacing: 0.07rem;
+                pointer-events: none;
+            }
+
+            /** Caption content */
+            .caption {
+                flex: 1;
+                z-index: 20;
+            }
+            .caption pu-vertical-stack ::slotted(:last-child) {
+                margin-top: auto;
+            }
+
+            /** Media content */
+            .media {
+                position: relative;
+                aspect-ratio: var(--um-mobile-aspect-ratio);
+                flex-shrink: 1;
+                height: auto;
+            }
+
+            @media only screen and (min-width: 30.06rem) {
+                .media {
+                    aspect-ratio: var(--um-aspect-ratio);
+                }
+            }
+
+            /* Caption positioning */
+            .caption--inline .caption-card__inner {
+                display: flex;
+                flex-direction: column;
+            }
+            .caption-position--under .media {
+                order: 1;
+            }
+            .caption-position--under .caption {
+                order: 2;
+            }
+            
+            @media only screen and (min-width: 30.06rem) {
+                .caption-card:not(.caption--inline) .caption {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    height: 100%;
+                    width: 100%;
+                    z-index: 10;
+                }
+                .caption-position--over {
+                    aspect-ratio: var(--um-mobile-aspect-ratio);
+                    height: auto;
+                    aspect-ratio: var(--um-aspect-ratio);
+                }
+            }
+
+            /* Caption alignment */
+            .caption-card .caption-inner {
+                display: flex;
+                height: 100%;
+                width: 100%;
+            }
+            .caption-align--start .caption-inner {
+                align-items: start;
+            }
+            .caption-align--center .caption-inner {
+                align-items: center;
+            }
+            .caption-align--end .caption-inner {
+                align-items: end;
+            }
+
+            /* Caption text alignment */
+            .caption-justify--start .caption-inner {
+                justify-content: start;
+                text-align: left;
+            }
+            .caption-justify--center .caption-inner {
+                justify-content: center;
+                text-align: center;
+            }
+            .caption-justify--end .caption-inner {
+                justify-content: end;
+                text-align: right;
+            }
+
+            /* Extended interaction */
+            .caption-card.is-button .media {
+                position: relative;
+            }
+            .caption-card.is-button .media::after {
+                content: '';
+                position: absolute;
+                inset: 0;
+                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([
+  u(`${M}-caption-card`)
+], e);
+export {
+  e as CaptionCard
+};