@pushengineering/umg-web-components 2.0.2 → 2.0.4

package/dist/classes/event-manager/event-manager.d.ts

@@ -0,0 +1,52 @@
+/**
+ * EventManager is a utility class for managing event listeners and dispatching custom events on an HTMLElement.
+ *
+ * @class
+ */
+export declare class EventManager {
+    /**
+     * The HTMLElement or object to which the event management is associated.
+     * @private
+     * @type {HTMLElement}
+     */
+    private target;
+    /**
+     * Allows one or more event listeners to be assigned by the event manager on a HTMLElement or object.
+     * @private
+     * @type {Map}
+     */
+    private listeners;
+    /**
+     * Creates an instance of EventManager.
+     *
+     * @constructor
+     * @param {EventTarget} target - The element or object to manage events for.
+     */
+    constructor(target: EventTarget);
+    /**
+     * Adds an event listener to the associated HTMLElement or target object.
+     *
+     * @param {string} eventType - The type of the event to listen for.
+     * @param {EventListenerOrEventListenerObject} handler - The callback function to execute when the event is triggered.
+     * @param {AddEventListenerOptions} [options] - An options object that specifies characteristics about the event listener.
+     * @returns {() => void} - A function to remove the added event listener.
+     */
+    addEventListener(eventType: string, handler: EventListenerOrEventListenerObject, options?: AddEventListenerOptions): () => void;
+    /**
+     * Removes an event listener from the associated HTMLElement or target object.
+     *
+     * @param {string} eventType - The type of the event for which to remove the listener.
+     * @param {EventListenerOrEventListenerObject} handler - The event listener function to remove.
+     * @param {EventListenerOptions} [options] - An options object that specifies characteristics about the event listener.
+     */
+    removeEventListener(eventType: string, handler: EventListenerOrEventListenerObject, options?: EventListenerOptions): void;
+    /**
+     * Dispatches a custom event on the associated HTMLElement.
+     *
+     * @template T - The type of the event detail.
+     * @param {string} eventType - The type of the custom event.
+     * @param {T} detail - The data associated with the custom event.
+     * @param {CustomEventInit} [options] - An options object that specifies characteristics about the custom event.
+     */
+    dispatchCustomEvent<T>(eventType: string, detail: T, options?: CustomEventInit): void;
+}

package/dist/classes/event-manager/types.d.ts

@@ -0,0 +1,6 @@
+export interface SlideEvent extends CustomEvent {
+    detail: {
+        slideNumber: string;
+        mediaId: string;
+    };
+}

package/dist/classes/index.d.ts

@@ -0,0 +1 @@
+export { EventManager } from './event-manager/event-manager';

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+import { ButtonSize } from '../../types';
+import '../box';
+import '../text';
+export declare class Badge extends LitElement {
+    size: ButtonSize;
+    colorBg: string | undefined;
+    colorText: string | undefined;
+    border?: boolean | undefined;
+    borderRadius: string;
+    opacity: string | undefined;
+    fontSize: string | undefined;
+    fontWeight: string | undefined;
+    fontStyle: string | undefined;
+    badgeStyles(): {};
+    badgeClasses(): any;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}

package/dist/{packages/web-components/components → components}/badge/badge.js

@@ -1,24 +1,21 @@
-import "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
-import { html as g } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
-import { LitElement as c } 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 r } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/property.js";
-import { ifDefined as p } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/if-defined.js";
-import { styleMap as n } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/style-map.js";
-import { classMap as h } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/class-map.js";
+import { css as g, LitElement as b, html as c } from "lit";
+import { customElement as n } from "lit/decorators/custom-element.js";
+import { property as o } from "lit/decorators/property.js";
+import { ifDefined as a } from "lit/directives/if-defined.js";
+import { styleMap as u } from "lit/directives/style-map.js";
+import { classMap as h } from "lit/directives/class-map.js";
 import "../box/box.js";
 import "../text/text.js";
-import { global as u } from "../../styles/global.js";
-import { settings as f } from "../../scripts/settings.js";
-import { mergeStyles as y } from "../../scripts/mergeStyles.js";
-import { css as x } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
-var v = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, o = (t, a, d, i) => {
-  for (var s = i > 1 ? void 0 : i ? $(a, d) : a, m = t.length - 1, l; m >= 0; m--)
-    (l = t[m]) && (s = (i ? l(a, d, s) : l(s)) || s);
-  return i && s && v(a, d, s), s;
+import { global as f } from "../../styles/global.js";
+import { settings as y } from "../../scripts/settings.js";
+import { mergeStyles as x } from "../../scripts/mergeStyles.js";
+var v = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, r = (t, i, d, p) => {
+  for (var s = p > 1 ? void 0 : p ? $(i, d) : i, l = t.length - 1, m; l >= 0; l--)
+    (m = t[l]) && (s = (p ? m(i, d, s) : m(s)) || s);
+  return p && s && v(i, d, s), s;
 };
-const { prefix: z } = f;
-let e = class extends c {
+const { prefix: z } = y;
+let e = class extends b {
   constructor() {
     super(...arguments), this.size = "small", this.border = !1, this.borderRadius = "0";
   }
@@ -43,26 +40,27 @@ let e = class extends c {
     return this.border && (t["badge--border"] = !0), t["badge--size-" + this.size] = !0, t;
   }
   render() {
-    return g`
+    return c`
             <div
                 class="badge${h(this.badgeClasses())}"
-                style="${n(this.badgeStyles())}"
+                style="${u(this.badgeStyles())}"
                 part="badge"
                 >
                 <div class="badge__content" part="badge-content">
                     <umg-box
                         padding="0"
-                        colorText=${this.colorText ? this.colorText : "255,255,255"}
-                        colorBg=${this.colorBg ? this.colorBg : "0,0,0"}
+                        colorText=${a(this.colorText)}
+                        colorBg=${a(this.colorBg)}
                         ?border=${this.border}
                         borderRadius=${this.borderRadius}
-                        opacity=${p(this.opacity)}
+                        opacity=${a(this.opacity)}
+                        exportparts="box, box-content"
                         >
                         <umg-text
                             as="span"
-                            variant="${p(this.fontSize)}"
-                            fontWeight="${p(this.fontWeight)}"
-                            fontStyle="${p(this.fontStyle)}"
+                            variant="${a(this.fontSize)}"
+                            fontWeight="${a(this.fontWeight)}"
+                            fontStyle="${a(this.fontStyle)}"
                             lineHeight="compact"
                             withoutMargin
                             >
@@ -74,9 +72,9 @@ let e = class extends c {
         `;
   }
 };
-e.styles = y([
-  u,
-  x`
+e.styles = x([
+  f,
+  g`
             :host {
                 display: block;
             }
@@ -111,35 +109,35 @@ e.styles = y([
             }
         `
 ]);
-o([
-  r()
+r([
+  o()
 ], e.prototype, "size", 2);
-o([
-  r()
+r([
+  o()
 ], e.prototype, "colorBg", 2);
-o([
-  r()
+r([
+  o()
 ], e.prototype, "colorText", 2);
-o([
-  r({ type: Boolean })
+r([
+  o({ type: Boolean })
 ], e.prototype, "border", 2);
-o([
-  r()
+r([
+  o()
 ], e.prototype, "borderRadius", 2);
-o([
-  r()
+r([
+  o()
 ], e.prototype, "opacity", 2);
-o([
-  r()
+r([
+  o()
 ], e.prototype, "fontSize", 2);
-o([
-  r()
+r([
+  o()
 ], e.prototype, "fontWeight", 2);
-o([
-  r()
+r([
+  o()
 ], e.prototype, "fontStyle", 2);
-e = o([
-  b(`${z}-badge`)
+e = r([
+  n(`${z}-badge`)
 ], e);
 export {
   e as Badge

package/dist/components/badge/index.d.ts

@@ -0,0 +1,2 @@
+import { Badge } from './badge';
+export { Badge };

package/dist/components/banner/banner.d.ts

@@ -0,0 +1,39 @@
+import { LitElement } from 'lit';
+import type { ContentAlign, BoxPosition, BoxHeight } from '../../types';
+import '../box/';
+import '../vertical-stack/';
+export declare class Banner extends LitElement {
+    height: BoxHeight;
+    contentPosition: BoxPosition;
+    contentFullWidth: boolean;
+    contentAlign: ContentAlign;
+    contentJustify: ContentAlign;
+    mobileContentJustify: string | undefined;
+    contentSpacing: string | undefined;
+    contentInnerPadding: string | undefined;
+    contentOuterPadding: string | undefined;
+    mobilePadding: string | undefined;
+    colorText: string | undefined;
+    colorBg: string | undefined;
+    opacity: string | undefined;
+    overlayColor: string | undefined;
+    overlayOpacity: number | undefined;
+    _mediaAspectRatio: undefined | string;
+    _mobileMediaAspectRatio: undefined | string;
+    _headerHeight: string;
+    _withoutContent: boolean;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    eventNotifications(event: any): Promise<void>;
+    handleSlotchange(e: Event): void;
+    bannerClasses(): any;
+    bannerStyles(): {};
+    bannercontentClasses(): any;
+    bannercontentStyles(): {};
+    contentOuter(): import("lit").TemplateResult<1>;
+    contentInner(fullWidth: boolean): import("lit").TemplateResult<1>;
+    content(): import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}

package/dist/{packages/web-components/components → components}/banner/banner.js

@@ -1,25 +1,22 @@
-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 { 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";
-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;
+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 } = _;
-let e = class extends g {
+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);
   }
@@ -95,10 +92,11 @@ let e = class extends g {
                 class="content__container"
                 padding=${o(this.contentInnerPadding)}
                 mobilePadding=${o(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 ? "expand" : "shrink"}"
+                width="${t ? "fill" : "fit-content"}"
                 >
                 <umg-vertical-stack
                     align=${this.contentJustify}
@@ -139,9 +137,9 @@ let e = class extends g {
         `;
   }
 };
-e.styles = f([
-  y,
-  v`
+e.styles = v([
+  _,
+  g`
             :host {
                 position: relative;
                 display: block;
@@ -223,7 +221,7 @@ e.styles = f([
                 aspect-ratio: var(--um-mobile-aspect-ratio);
                 height: auto;
             }
-            @media only screen and (min-width: 30.06rem) {
+            @media only screen and (min-width: 48.06rem) {
                 .banner.media-height--adapt .banner-media {
                     aspect-ratio: var(--um-aspect-ratio);
                 }
@@ -382,7 +380,7 @@ n([
   d()
 ], e.prototype, "_withoutContent", 2);
 e = n([
-  u(`${A}-banner`)
+  y(`${A}-banner`)
 ], e);
 export {
   e as Banner

package/dist/components/banner/index.d.ts

@@ -0,0 +1,3 @@
+import { Banner } from './banner';
+import { BannerImage } from '../banner-image/';
+export { Banner, BannerImage };

package/dist/components/banner-image/banner-image.d.ts

@@ -0,0 +1,23 @@
+import { LitElement, nothing } from 'lit';
+import type { ImageLazy } from '../../types';
+export declare class BannerImage extends LitElement {
+    imgAlt: string;
+    src: string | undefined;
+    imgSrcSet?: string | undefined;
+    sizes?: string | undefined;
+    width: number;
+    height: number;
+    mobileSrc?: string | undefined;
+    mobileSrcSet?: string | undefined;
+    mobileSizes?: string | undefined;
+    mobileHeight: number;
+    mobileWidth: number;
+    load: ImageLazy;
+    dispatchEvents(): void;
+    imageClasses(): any;
+    mobileImage(): import("lit").TemplateResult<1> | typeof nothing;
+    desktopImage(): import("lit").TemplateResult<1>;
+    getImage(): import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}

package/dist/{packages/web-components/components → components}/banner-image/banner-image.js

@@ -1,27 +1,24 @@
-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;
+import { css as d, LitElement as n, html as a, nothing as b } from "lit";
+import { customElement as y } from "lit/decorators/custom-element.js";
+import { property as i } from "lit/decorators/property.js";
+import { classMap as c } from "lit/directives/class-map.js";
+import { ifDefined as m } from "lit/directives/if-defined.js";
+import { global as u } from "../../styles/global.js";
+import { placeholderMedia as f } from "../../styles/placeholder-media.js";
+import { settings as w } from "../../scripts/settings.js";
+import { mergeStyles as $ } from "../../scripts/mergeStyles.js";
+var v = Object.defineProperty, S = Object.getOwnPropertyDescriptor, e = (s, r, h, l) => {
+  for (var o = l > 1 ? void 0 : l ? S(r, h) : r, p = s.length - 1, g; p >= 0; p--)
+    (g = s[p]) && (o = (l ? g(r, h, o) : g(o)) || o);
+  return l && o && v(r, h, o), o;
 };
-const { prefix: z } = f;
+const { prefix: z } = w;
 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", {
+    const s = this.width / this.height, r = this.mobileWidth / this.mobileHeight, h = new CustomEvent("media-details", {
       detail: {
         mediaAspectRatio: s,
         mobileMediaAspectRatio: r
@@ -29,14 +26,14 @@ let t = class extends n {
       bubbles: !0,
       composed: !0
     });
-    this.dispatchEvent(a);
+    this.dispatchEvent(h);
   }
   imageClasses() {
     const s = {};
     return s["without-mobile"] = !this.mobileSrc, s;
   }
   mobileImage() {
-    return this.mobileSrc ? h`
+    return this.mobileSrc ? a`
                 <img
                     class="image image--mobile"
                     width="${this.mobileWidth}"
@@ -48,10 +45,10 @@ let t = class extends n {
                     loading="${this.load}"
                     part="image"
                     >
-            ` : d;
+            ` : b;
   }
   desktopImage() {
-    return this.src ? h`
+    return this.src ? a`
                 <img
                     class="image image--desktop${c(this.imageClasses())}"
                     width="${this.width}"
@@ -63,7 +60,7 @@ let t = class extends n {
                     loading="${this.load}"
                     part="image"
                     >
-            ` : h`
+            ` : a`
             <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">
@@ -74,21 +71,21 @@ let t = class extends n {
         `;
   }
   getImage() {
-    return h`
+    return a`
             ${this.desktopImage()}
             ${this.mobileImage()}
         `;
   }
   render() {
-    return this.dispatchEvents(), h`
+    return this.dispatchEvents(), a`
             ${this.getImage()}
         `;
   }
 };
-t.styles = w([
-  y,
+t.styles = $([
   u,
-  $`
+  f,
+  d`
             .image {
                 object-fit: cover;
                 height: 100%;
@@ -154,7 +151,7 @@ e([
   i()
 ], t.prototype, "load", 2);
 t = e([
-  b(`${z}-banner-image`)
+  y(`${z}-banner-image`)
 ], t);
 export {
   t as BannerImage

package/dist/components/banner-image/index.d.ts

@@ -0,0 +1,2 @@
+import { BannerImage } from './banner-image';
+export { BannerImage };

package/dist/components/box/box.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+import type { Direction } from '../../types';
+export declare class Box extends LitElement {
+    maxWidth: number | undefined;
+    padding?: string | undefined;
+    mobilePadding?: string | undefined;
+    paddingTop?: string | undefined;
+    paddingRight?: string | undefined;
+    paddingBottom?: string | undefined;
+    paddingLeft?: string | undefined;
+    adaptivePadding: boolean;
+    colorText: string | undefined;
+    colorBg: string | undefined;
+    colorBlend: boolean;
+    blendDirection: Direction;
+    border?: boolean | undefined;
+    borderRadius: string;
+    opacity: string | undefined;
+    private _mergedPadding;
+    private _mobilePadding;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string, any>): void;
+    getPadding(): string[][] | undefined;
+    boxStyles(): {};
+    boxClasses(): any;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}