@pushengineering/umg-web-components 2.0.1 → 2.0.3

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

@@ -1,20 +1,17 @@
-import "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
-import { html as c } 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 n } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/custom-element.js";
-import { property as s } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/property.js";
-import { classMap as d } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/class-map.js";
-import { styleMap as h } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/style-map.js";
-import { global as u } from "../../styles/global.js";
-import { settings as b } from "../../scripts/settings.js";
+import { css as c, LitElement as g, html as n } from "lit";
+import { customElement as d } from "lit/decorators/custom-element.js";
+import { property as s } from "lit/decorators/property.js";
+import { classMap as h } from "lit/directives/class-map.js";
+import { styleMap as u } from "lit/directives/style-map.js";
+import { global as b } from "../../styles/global.js";
+import { settings as v } from "../../scripts/settings.js";
 import { mergeStyles as f } from "../../scripts/mergeStyles.js";
-import { css as v } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
 var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, o = (e, i, p, a) => {
-  for (var t = a > 1 ? void 0 : a ? x(i, p) : i, m = e.length - 1, l; m >= 0; m--)
-    (l = e[m]) && (t = (a ? l(i, p, t) : l(t)) || t);
+  for (var t = a > 1 ? void 0 : a ? x(i, p) : i, l = e.length - 1, m; l >= 0; l--)
+    (m = e[l]) && (t = (a ? m(i, p, t) : m(t)) || t);
   return a && t && y(i, p, t), t;
 };
-const { prefix: _ } = b;
+const { prefix: _ } = v;
 let r = class extends g {
   constructor() {
     super(...arguments), this.divider = !1, this.colorText = "", this.colorBg = "";
@@ -42,11 +39,11 @@ let r = class extends g {
     }), e;
   }
   render() {
-    return c`
+    return n`
         <main
             id="page"
-            class="page${d(this.pageClasses())}"
-            style="${h(this.pageStyles())}"
+            class="page${h(this.pageClasses())}"
+            style="${u(this.pageStyles())}"
             part="page"
             >
             <div class="page__inner" part="page-inner">
@@ -57,8 +54,8 @@ let r = class extends g {
   }
 };
 r.styles = f([
-  u,
-  v`
+  b,
+  c`
             :host {
                 display: block;
                 position: relative;
@@ -98,7 +95,7 @@ o([
   s()
 ], r.prototype, "colorBg", 2);
 r = o([
-  n(`${_}-page`)
+  d(`${_}-page`)
 ], r);
 export {
   r as Page

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

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

package/dist/components/popover/popover.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+import { EventManager } from '../../classes/event-manager/event-manager.js';
+import '../box/';
+import '../vertical-stack/';
+import '../horizontal-stack/';
+import '../button-icon/';
+export declare class Popover extends LitElement {
+    visible: boolean;
+    eventManager: EventManager;
+    private _eventsDispatcher;
+    closePopover(): void;
+    popoverClasses(): any;
+    popoverStyles(): {
+        visibility: string;
+    };
+    closeButton(): import("lit").TemplateResult<1> | undefined;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}

package/dist/components/popover/popover.js

@@ -0,0 +1,181 @@
+import { css as c, LitElement as v, html as l } from "lit";
+import { customElement as d } from "lit/decorators/custom-element.js";
+import { property as m } from "lit/decorators/property.js";
+import { classMap as u } from "lit/directives/class-map.js";
+import { styleMap as b } from "lit/directives/style-map.js";
+import { EventManager as f } from "../../classes/event-manager/event-manager.js";
+import { global as g } from "../../styles/global.js";
+import { settings as h } from "../../scripts/settings.js";
+import { mergeStyles as y } from "../../scripts/mergeStyles.js";
+import "../box/box.js";
+import "../vertical-stack/vertical-stack.js";
+import "../horizontal-stack/horizontal-stack.js";
+import "../button-icon/button-icon.js";
+var x = Object.defineProperty, w = Object.getOwnPropertyDescriptor, p = (o, r, t, i) => {
+  for (var e = i > 1 ? void 0 : i ? w(r, t) : r, n = o.length - 1, a; n >= 0; n--)
+    (a = o[n]) && (e = (i ? a(r, t, e) : a(e)) || e);
+  return i && e && x(r, t, e), e;
+};
+const { prefix: _ } = h;
+let s = class extends v {
+  constructor() {
+    super(...arguments), this.visible = !1, this.eventManager = new f(this);
+  }
+  _eventsDispatcher(o) {
+    if (!o)
+      throw new Error("Missing custom event type");
+    const r = { bubbles: !0, composed: !0 }, t = {};
+    o === "close" && (o = "close-popover", this.eventManager.dispatchCustomEvent(o, t, r));
+  }
+  closePopover() {
+    this.visible = !1, this._eventsDispatcher("close");
+  }
+  popoverClasses() {
+    return {
+      "popover--visible": this.visible
+    };
+  }
+  popoverStyles() {
+    return {
+      visibility: this.visible ? "visible" : "hidden"
+    };
+  }
+  closeButton() {
+    if (this.visible)
+      return l`
+                <umg-button-icon
+                    part="close-button"
+                    class="close-button"
+                    icon="close"
+                    padding="4"
+                    @click="${this.closePopover}"
+                    >
+                </umg-button-icon>
+            `;
+  }
+  render() {
+    return l`
+            <div
+                class="popover${u(this.popoverClasses())}"
+                style="${b(this.popoverStyles())}"
+                >
+                <div class="popover-inner">
+                    <div class="popover-content">
+                        <div class="popover-title">
+                            <slot name="title"></slot>
+                            ${this.closeButton()}
+                        </div>
+                        <slot name="content"></slot>
+                    </div>
+                </div>
+            </div>
+        `;
+  }
+};
+s.styles = y([
+  g,
+  c`
+            .popover {
+                background-color: rgb(var(--um-color-box-bg), 0.9);
+                position: fixed;
+                visibility: hidden;
+                inset: 0;
+                z-index: 1000;
+                flex-direction: column;
+                justify-content: stretch;
+                overflow: hidden;
+            }
+            
+            .popover-inner {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                height: 100%;
+                width: 100%;
+                overflow-y: auto;
+            }
+
+            .popover-inner::-webkit-scrollbar {
+                width: 0.25rem;
+            }
+            .popover-inner::-webkit-scrollbar-track {
+                background: rgb(var(--color-section-text, var(--um-color-base-text, 0,0,0)), 0.05);
+                border-radius: var(--um-border-radius-30);
+            }
+            .popover-inner::-webkit-scrollbar-thumb{
+                background: rgb(var(--color-section-text, var(--um-color-base-text, 0,0,0)), 0.1);
+                border-radius: var(--um-border-radius-30);
+            }
+
+            .popover-content {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: start;
+                gap: var(--um-space-24);
+                padding: var(--um-space-24);
+                color: rgba(var(--um-color-box-text, var(--um-color-section-text, 0,0,0)), 1);
+                width: 100%;
+            }
+            
+            @media only screen and (hover: hover) {
+                .close-button {
+                    display: none;
+                }
+                .popover {
+                    position: absolute;
+                    border-radius: var(--um-border-caption-card-radius);
+                }
+                .popover-inner {
+                    opacity: 0;
+                    max-width: 320px;
+                    margin: 0 auto;
+                }
+                .popover--visible .popover-inner {
+                    opacity: 1;
+                    transition: opacity 0.3s
+                }
+                .popover-title {
+                    display: none;
+                }
+            }
+
+            @media screen and (hover: none) {
+                .close-button {
+                    display: block;
+                    margin-left: auto;
+                }
+                .popover-inner {
+                    padding: var(--um-space-24);
+                    transform: translateX(100%);
+                    margin: 0 auto;
+                }
+                .popover--visible .popover-inner {
+                    transform: translateX(0);
+                    transition: all 0.3s
+                }
+                .popover-content {
+                    border: rgb(var(--um-color-border, var(--um-color-box-text, 235,235,235))) var(--um-border-box-width, 0.0625rem) solid;
+                    border-radius: var(--um-border-radius-30);
+                    background-color: rgba(var(--um-color-box-bg, var(--um-color-section-bg, 245,245,245)), 1);
+                    padding: var(--um-space-24);
+                }
+                .popover-title {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    width: 100%;
+                }
+            }
+        `
+]);
+p([
+  m({ type: Boolean, reflect: !0 })
+], s.prototype, "visible", 2);
+s = p([
+  d(`${_}-popover`)
+], s);
+export {
+  s as Popover
+};

package/dist/components/rich-text/index.d.ts

@@ -0,0 +1,2 @@
+import { RichText } from './rich-text';
+export { RichText };

package/dist/components/rich-text/rich-text.d.ts

@@ -0,0 +1,11 @@
+import { LitElement } from 'lit';
+import type { TextVariant, TextAlignment, TextLineHeight } from '../../types';
+export declare class RichText extends LitElement {
+    size: TextVariant;
+    lineHeight: TextLineHeight | undefined;
+    alignment: TextAlignment;
+    mobileAlignment: TextAlignment | undefined;
+    textClasses(): any;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}

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

@@ -1,20 +1,17 @@
-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 { classMap as h } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/class-map.js";
-import { customElement as x } 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 { global as p } from "../../styles/global.js";
-import { fontSizes as f, fontMargins as d } from "../../styles/fonts.js";
-import { settings as u } from "../../scripts/settings.js";
-import { mergeStyles as v } from "../../scripts/mergeStyles.js";
-import { css as b } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
-var y = Object.defineProperty, z = Object.getOwnPropertyDescriptor, s = (t, l, o, n) => {
-  for (var e = n > 1 ? void 0 : n ? z(l, o) : l, a = t.length - 1, m; a >= 0; a--)
-    (m = t[a]) && (e = (n ? m(l, o, e) : m(e)) || e);
-  return n && e && y(l, o, e), e;
+import { css as g, LitElement as c, html as h } from "lit";
+import { classMap as x } from "lit/directives/class-map.js";
+import { customElement as p } from "lit/decorators/custom-element.js";
+import { property as r } from "lit/decorators/property.js";
+import { global as d } from "../../styles/global.js";
+import { fontSizes as f, fontMargins as u } from "../../styles/fonts.js";
+import { settings as v } from "../../scripts/settings.js";
+import { mergeStyles as b } from "../../scripts/mergeStyles.js";
+var y = Object.defineProperty, z = Object.getOwnPropertyDescriptor, l = (t, n, o, s) => {
+  for (var e = s > 1 ? void 0 : s ? z(n, o) : n, a = t.length - 1, m; a >= 0; a--)
+    (m = t[a]) && (e = (s ? m(n, o, e) : m(e)) || e);
+  return s && e && y(n, o, e), e;
 };
-const { prefix: j } = u;
+const { prefix: j } = v;
 let i = class extends c {
   constructor() {
     super(...arguments), this.size = "bodyMd", this.alignment = "start";
@@ -24,8 +21,8 @@ let i = class extends c {
     return this.size && (t["txt--" + this.size] = !0), this.lineHeight && (t["txt--line-height-" + this.lineHeight] = !0), this.alignment && (t["txt--align-" + this.alignment] = !0), this.mobileAlignment ? t["txt--mobile-align-" + this.mobileAlignment] = !0 : t["txt--mobile-align-" + this.alignment] = !0, t;
   }
   render() {
-    return g`
-            <slot name="content" class="rich-text${h(this.textClasses())}">
+    return h`
+            <slot name="content" class="rich-text${x(this.textClasses())}">
                 <div class="rich-text-skeleton">
                     <div class="skeleton"></div>
                     <div class="skeleton"></div>
@@ -37,10 +34,10 @@ let i = class extends c {
         `;
   }
 };
-i.styles = v([
-  p,
+i.styles = b([
+  d,
   f,
-  b`
+  g`
             .rich-text-skeleton {
                 display: flex;
                 flex-direction: column;
@@ -104,22 +101,22 @@ i.styles = v([
                 }
             }
         `,
-  d
+  u
 ]);
-s([
+l([
   r({ type: String })
 ], i.prototype, "size", 2);
-s([
+l([
   r({ type: String })
 ], i.prototype, "lineHeight", 2);
-s([
+l([
   r({ type: String })
 ], i.prototype, "alignment", 2);
-s([
+l([
   r({ type: String })
 ], i.prototype, "mobileAlignment", 2);
-i = s([
-  x(`${j}-rich-text`)
+i = l([
+  p(`${j}-rich-text`)
 ], i);
 export {
   i as RichText

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

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

package/dist/components/section/section.d.ts

@@ -0,0 +1,33 @@
+import { LitElement } from 'lit';
+import type { PaddingScale } from '../../types';
+export declare class Section extends LitElement {
+    outerWidth: string;
+    innerWidth: string;
+    maxInnerWidth: number | undefined;
+    compactHeader: boolean;
+    mobileBleed: boolean;
+    mobilePadding: string | undefined;
+    paddingTop: PaddingScale | undefined;
+    paddingBottom: PaddingScale | undefined;
+    paddingLeft: PaddingScale | undefined;
+    paddingRight: PaddingScale | undefined;
+    colorBg: string | undefined;
+    colorText: string | undefined;
+    private _withoutHeader;
+    private _withoutFooter;
+    private _mobilePadding;
+    handleSlotchange(e: Event): void;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string, any>): void;
+    isNumeric: (string: unknown) => boolean;
+    convertMobilePadding(mobilePadding: string): void;
+    sectionClasses(): any;
+    sectionInnerClasses(): any;
+    sectionStyles(): {};
+    headerStyles(): {};
+    footerStyles(): {};
+    header(): import("lit").TemplateResult<1>;
+    footer(): import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}