@pushengineering/umg-web-components 2.0.0

package/dist/packages/web-components/components/image/image.js

@@ -0,0 +1,157 @@
+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 g } from "../../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
+import { customElement as f } 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 { ifDefined as c } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/if-defined.js";
+import { styleMap as d } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/style-map.js";
+import { classMap as p } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/class-map.js";
+import { global as u } from "../../styles/global.js";
+import { placeholderMedia as y } from "../../styles/placeholder-media.js";
+import { settings as v } 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 b = Object.defineProperty, x = Object.getOwnPropertyDescriptor, e = (t, r, h, o) => {
+  for (var a = o > 1 ? void 0 : o ? x(r, h) : r, m = t.length - 1, n; m >= 0; m--)
+    (n = t[m]) && (a = (o ? n(r, h, a) : n(a)) || a);
+  return o && a && b(r, h, a), a;
+};
+const { prefix: C } = v;
+let i = class extends g {
+  constructor() {
+    super(...arguments), this.imgAlt = "", this.width = 100, this.height = 100, this.fit = "contain", this.load = "lazy";
+  }
+  dispatchEvents() {
+    const t = this.width / this.height, r = new CustomEvent("media-details", {
+      detail: {
+        mediaAspectRatio: t,
+        mobileMediaAspectRatio: t
+      },
+      bubbles: !0,
+      composed: !0
+    });
+    this.dispatchEvent(r);
+  }
+  containerStyles() {
+    let t = {};
+    return this.width && this.height && (t = {
+      ...t,
+      "--um-size-image-width": this.width,
+      "--um-size-image-height": this.height
+    }), t;
+  }
+  containerClasses() {
+    const t = {};
+    return t["image-fit--" + this.fit] = !!(this.fit !== "none" && this.fit), t;
+  }
+  imageClasses() {
+    const t = {};
+    return t["image-fit"] = !!(this.fit !== "none" && this.fit), t["image-fit--" + this.fit] = !!(this.fit !== "none" && this.fit), t;
+  }
+  image() {
+    return this.src ? l`
+            <img
+                class="image ${p(this.imageClasses())}"
+                part="image"
+                width="${this.width}"
+                height="${this.height}"
+                src="${c(this.src)}"
+                srcset="${c(this.srcSet)}"
+                sizes="${c(this.sizes)}"
+                alt="${this.imgAlt}"
+                loading="${this.load}"
+                >
+            ` : l`
+            <div
+                part="placeholder"
+                class="placeholder image image--desktop${p(this.imageClasses())}"
+                style="aspect-ratio: ${this.width / this.height}"
+                >
+                <div part="placeholder-inner" class="placeholder-inner">
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512" fill="currentcolor">
+                        <path d="M0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96z"/>
+                    </svg>
+                </div>
+            </div>
+        `;
+  }
+  render() {
+    return this.dispatchEvents(), l`
+        <div
+            class="image-container${p(this.imageClasses())}"
+            style=${d(this.containerStyles())}
+            part="image-container"
+            >
+            ${this.image()}
+        </div>
+        `;
+  }
+};
+i.styles = w([
+  u,
+  y,
+  $`
+            :host {
+                display: block;
+                height: 100%;
+            }
+            .image-container {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                height: 100%;
+            }
+            .image-container.image-fit--cover,
+            .image-container.image-fit--contain {
+                width: 100%;
+            }
+            .image {
+                display: block;
+                height: auto;
+                max-width: 100%;
+            }
+
+            /* Image fit */
+            .image.image-fit {
+                height: 100%;
+                width: 100%;
+                max-width: initial;
+            }
+            .image.image-fit--cover {
+                object-fit: cover;
+            }
+            .image.image-fit--contain {
+                object-fit: contain;
+            }
+        `
+]);
+e([
+  s()
+], i.prototype, "imgAlt", 2);
+e([
+  s()
+], i.prototype, "src", 2);
+e([
+  s()
+], i.prototype, "srcSet", 2);
+e([
+  s()
+], i.prototype, "sizes", 2);
+e([
+  s({ type: Number })
+], i.prototype, "width", 2);
+e([
+  s({ type: Number })
+], i.prototype, "height", 2);
+e([
+  s({ type: String })
+], i.prototype, "fit", 2);
+e([
+  s({ type: String })
+], i.prototype, "load", 2);
+i = e([
+  f(`${C}-image`)
+], i);
+export {
+  i as Image
+};

package/dist/packages/web-components/components/index.js

@@ -0,0 +1,82 @@
+import { Banner as e } from "./banner/banner.js";
+import { BannerImage as x } from "./banner-image/banner-image.js";
+import { Box as p } from "./box/box.js";
+import { Button as a } from "./button/button.js";
+import { ButtonIcon as n } from "./button-icon/button-icon.js";
+import { ButtonGroup as d } from "./button-group/button-group.js";
+import { CaptionCard as u } from "./caption-card/caption-card.js";
+import { DeferredMedia as S } from "./deferred-media/deferred-media.js";
+import { Disclosure as g } from "./disclosure/disclosure.js";
+import { EventTable as b } from "./event-table/event-table.js";
+import { Footer as G } from "./footer/footer.js";
+import { Grid as s } from "./grid/grid.js";
+import { Header as D } from "./header/header.js";
+import { HeaderDrawer as H } from "./header-drawer/header-drawer.js";
+import { HorizontalStack as h } from "./horizontal-stack/horizontal-stack.js";
+import { Icon as C } from "./icon/icon.js";
+import { Image as V } from "./image/image.js";
+import { Link as z } from "./link/link.js";
+import { LinkGroup as N } from "./link-group/link-group.js";
+import { Logo as R } from "./logo/logo.js";
+import { MediaGallery as q } from "./media-gallery/media-gallery.js";
+import { MediaText as J } from "./media-text/media-text.js";
+import { Menu as Q } from "./menu/menu.js";
+import { Modal as W } from "./modal/modal.js";
+import { NumberField as Y } from "./number-field/number-field.js";
+import { Overlay as _ } from "./overlay/overlay.js";
+import { Page as oo } from "./page/page.js";
+import { Popover as eo } from "./popover/popover.js";
+import { Section as xo } from "./section/section.js";
+import { Select as po } from "./select/select.js";
+import { Slider as ao } from "./slider/slider.js";
+import { Socials as no } from "./socials/socials.js";
+import { Table as co } from "./table/table.js";
+import { Text as Bo } from "./text/text.js";
+import { TextField as To } from "./text-field/text-field.js";
+import { RichText as Mo } from "./rich-text/rich-text.js";
+import { ThumbnailSlider as ko } from "./thumbnail-slider/thumbnail-slider.js";
+import { Video as Io } from "./video/video.js";
+import { VerticalStack as vo } from "./vertical-stack/vertical-stack.js";
+import { Badge as Fo } from "./badge/badge.js";
+export {
+  Fo as Badge,
+  e as Banner,
+  x as BannerImage,
+  p as Box,
+  a as Button,
+  d as ButtonGroup,
+  n as ButtonIcon,
+  u as CaptionCard,
+  S as DeferredMedia,
+  g as Disclosure,
+  b as EventTable,
+  G as Footer,
+  s as Grid,
+  D as Header,
+  H as HeaderDrawer,
+  h as HorizontalStack,
+  C as Icon,
+  V as Image,
+  z as Link,
+  N as LinkGroup,
+  R as Logo,
+  q as MediaGallery,
+  J as MediaText,
+  Q as Menu,
+  W as Modal,
+  Y as NumberField,
+  _ as Overlay,
+  oo as Page,
+  eo as Popover,
+  Mo as RichText,
+  xo as Section,
+  po as Select,
+  ao as Slider,
+  no as Socials,
+  co as Table,
+  Bo as Text,
+  To as TextField,
+  ko as ThumbnailSlider,
+  vo as VerticalStack,
+  Io as Video
+};

package/dist/packages/web-components/components/link/link.js

@@ -0,0 +1,95 @@
+import "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as p } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
+import { LitElement as f } 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 m } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/property.js";
+import { ifDefined as c } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/if-defined.js";
+import { classMap as d } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/class-map.js";
+import { global as h } from "../../styles/global.js";
+import { settings as g } from "../../scripts/settings.js";
+import { mergeStyles as v } 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 y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (i, r, l, n) => {
+  for (var e = n > 1 ? void 0 : n ? b(r, l) : r, s = i.length - 1, a; s >= 0; s--)
+    (a = i[s]) && (e = (n ? a(r, l, e) : a(e)) || e);
+  return n && e && y(r, l, e), e;
+};
+const { prefix: k } = g;
+let t = class extends f {
+  constructor() {
+    super(...arguments), this.url = void 0, this.target = "_self", this.underline = !1;
+  }
+  linkClasses() {
+    return {
+      "link--underline": this.underline
+    };
+  }
+  render() {
+    return p`
+            <a
+                part="link"
+                href="${c(this.url)}"
+                class="link${d(this.linkClasses())}"
+                target="${this.target}"
+                >
+                <slot part="label"></slot>
+                <slot name="label" part="label"></slot>
+            </a>
+        `;
+  }
+};
+t.styles = v([
+  h,
+  x`
+            :host {
+                display: inline-block;
+            }
+            .link {
+                display: inline-flex;
+                align-items: center;
+                gap: 0.5rem;
+                flex-wrap: nowrap;
+                white-space: nowrap;
+                color: inherit;
+                font-family: var(--um-font-family-body, Roboto, Arial, Helvetica, sans-serif);
+                font-size: var(--um-font-size-body-sm, 0.875rem);
+                font-weight: var(--um-font-weight-regular, 400);
+                line-height: normal;
+                text-underline-offset: 0.3rem;
+            }
+            .link ::slotted(umg-icon) {
+                padding-top: 2px;
+            }
+            .link:focus-visible {
+                outline: 0.1rem solid rgba(var(--um-color-page-text, var(--um-color-section-text, 62,62,62)), 1);
+            }
+            .link:not(.link--underline) {
+                text-decoration: none;
+            }
+            .link:not(.link--underline):hover {
+                text-decoration: underline;
+            }
+            /*  Underline */
+            .link--underline {
+                text-decoration: underline;
+            }
+            .link--underline:hover {
+                text-decoration: none;
+            }
+        `
+]);
+o([
+  m()
+], t.prototype, "url", 2);
+o([
+  m()
+], t.prototype, "target", 2);
+o([
+  m({ type: Boolean })
+], t.prototype, "underline", 2);
+t = o([
+  u(`${k}-link`)
+], t);
+export {
+  t as Link
+};

package/dist/packages/web-components/components/link-group/link-group.js

@@ -0,0 +1,126 @@
+import "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as n } 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 m } 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 g } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/class-map.js";
+import { global as b } from "../../styles/global.js";
+import { groupSpacing as f, groupMobileJustify as h, groupMobileAlign as d, groupJustify as y, groupAlign as w } from "../../styles/group.js";
+import { settings as v } from "../../scripts/settings.js";
+import { mergeStyles as k } 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 j = Object.defineProperty, J = Object.getOwnPropertyDescriptor, e = (r, s, p, a) => {
+  for (var t = a > 1 ? void 0 : a ? J(s, p) : s, l = r.length - 1, u; l >= 0; l--)
+    (u = r[l]) && (t = (a ? u(s, p, t) : u(t)) || t);
+  return a && t && j(s, p, t), t;
+};
+const { prefix: S } = v;
+let o = class extends c {
+  constructor() {
+    super(...arguments), this.spacing = "normal", this.justify = "start", this.noWrap = !1, this.stack = !1, this.mobileStack = !1;
+  }
+  getClasses() {
+    const r = {};
+    return r["group-spacing--" + this.spacing] = !0, r["group--no-wrap"] = this.noWrap, r["group--stack"] = this.stack, r["group--mobile-stack"] = this.mobileStack, this.stack ? r["group-align--" + this.justify] = !0 : r["group-justify--" + this.justify] = !0, this.mobileStack ? r["group-mobile-align--" + this.mobileJustify] = !0 : this.mobileJustify ? r["group-mobile-justify--" + this.mobileJustify] = !0 : r["group-mobile-justify--" + this.justify] = !0, r;
+  }
+  render() {
+    return n`
+            <div
+                class="link-group${g(this.getClasses())}"
+                part="link-group"
+                >
+                <slot></slot>
+            </div>
+        `;
+  }
+};
+o.styles = k([
+  b,
+  f,
+  h,
+  d,
+  y,
+  w,
+  x`
+
+            :host([noWrap]) {
+                display: block;
+                width: 100%;
+            }
+            .link-group {
+                display: flex;
+                flex-wrap: wrap;
+                width: 100%;
+            }
+
+            /** Prevent link wrapping */
+            .group--no-wrap {
+                flex-wrap: nowrap;
+                overflow-y: auto;
+                max-width: 100%;
+                scrollbar-color: rgb(var(--um-color-section-text, var(--um-color-base-text, 0,0,0)), 0.1) rgb(var(--um-color-section-text, var(--um-color-base-text, 0,0,0)), 0.05);;
+                scrollbar-width: thin;
+                padding: var(--um-space-8) 0;
+            }
+
+            .group--no-wrap ::slotted(:last-child) {
+                margin-right: var(--um-space-24);
+            }
+
+            /** Horizontal scrolling */
+            @media (hover: none) {
+                .group--no-wrap::-webkit-scrollbar {
+                    display: none;
+                }
+            }
+            @media (hover: hover) {
+                .group--no-wrap::-webkit-scrollbar {
+                    height: 0.25rem;
+                }
+                .group--no-wrap::-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);
+                }
+                .group--no-wrap::-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);
+                }
+            }
+
+            /** Force vertical stacking */
+            @media screen and (max-width: 48rem) {
+                .group--mobile-stack:not(.group--no-wrap) {
+                    flex-direction: column;
+                }
+            }
+            @media screen and (min-width: 48.06rem) {
+                .group--stack:not(.group--no-wrap) {
+                    flex-direction: column;
+                }
+            }
+        `
+]);
+e([
+  i()
+], o.prototype, "spacing", 2);
+e([
+  i()
+], o.prototype, "justify", 2);
+e([
+  i()
+], o.prototype, "mobileJustify", 2);
+e([
+  i({ type: Boolean })
+], o.prototype, "noWrap", 2);
+e([
+  i({ type: Boolean })
+], o.prototype, "stack", 2);
+e([
+  i({ type: Boolean })
+], o.prototype, "mobileStack", 2);
+o = e([
+  m(`${S}-link-group`)
+], o);
+export {
+  o as LinkGroup
+};

package/dist/packages/web-components/components/logo/logo.js

@@ -0,0 +1,161 @@
+import "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as m } 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 y } 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 { ifDefined as p } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/if-defined.js";
+import { classMap as n } 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 { global as u } from "../../styles/global.js";
+import { settings as d } from "../../scripts/settings.js";
+import { mergeStyles as v } from "../../scripts/mergeStyles.js";
+import "../image/image.js";
+import { css as w } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
+var S = Object.defineProperty, b = Object.getOwnPropertyDescriptor, e = (i, l, g, r) => {
+  for (var s = r > 1 ? void 0 : r ? b(l, g) : l, h = i.length - 1, a; h >= 0; h--)
+    (a = i[h]) && (s = (r ? a(l, g, s) : a(s)) || s);
+  return r && s && S(l, g, s), s;
+};
+const { prefix: $ } = d;
+let t = class extends c {
+  constructor() {
+    super(...arguments), this.url = "/", this.height = 80, this.title = "Logo Title", this.showTitle = !1, this.imgWidth = 80, this.imgHeight = 80;
+  }
+  logoStyles() {
+    let i = {};
+    return i = {
+      ...i,
+      "--um-size-logo-height": this.height / 16 + "rem"
+    }, i;
+  }
+  logoClasses() {
+    return {
+      "logo--show-title": this.showTitle
+    };
+  }
+  titleClasses() {
+    return {
+      "visually-hidden": !this.showTitle
+    };
+  }
+  image() {
+    return this.imgSrc ? m`
+                <umg-image
+                    class="logo__image"
+                    part="logo-image"
+                    imgAlt=${this.title}
+                    src="${p(this.imgSrc)}"
+                    width=${this.imgWidth}
+                    height=${this.imgHeight}
+                    srcSet="${p(this.imgSrcSet)}"
+                    sizes="${p(this.imgSizes)}"
+                    lazy="lazy"
+                    >
+                </umg-image>
+            ` : m`
+            <svg class="logo__image placeholder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" role="presentation" aria-hidden="true" focusable="false" fill="currentColor">
+                <path d="M469.33,512H42.67A42.79,42.79,0,0,1,0,469.33V42.67A42.79,42.79,0,0,1,42.67,0H469.33A42.79,42.79,0,0,1,512,42.67V469.33A42.79,42.79,0,0,1,469.33,512Z"/>
+            </svg>
+        `;
+  }
+  render() {
+    return m`
+            <h1
+                class="logo${n(this.logoClasses())}"
+                style=${f(this.logoStyles())}
+                part="logo"
+                >
+                <a href="${this.url}">
+                    ${this.image()}
+                    <span class="logo-title ${n(this.titleClasses())}">
+                        ${this.title}
+                    </span>
+                </a>
+        </h1>
+      `;
+  }
+};
+t.styles = v([
+  u,
+  w`
+            :host {
+                display: block;
+            }
+            .placeholder {
+                display: block;
+                height: 100%;
+                width: 100%;
+                color: rgb(var(--um-color-skeleton-bg, 230, 230, 230));
+
+            }
+            .logo {
+                display: flex;
+                align-items: center;
+                color: inherit;
+                margin: 0;
+                height: var(--um-size-logo-height);
+                line-height: 1;
+            }
+            .logo a {
+                display: block;
+                color: inherit;
+                text-decoration: none;
+                height: 100%;
+            }
+            .logo-title:not(.visually-hidden) {
+                display: inline-block;
+                font-family: var(--um-font-family-logo, var(--um-font-family-heading, 'Roboto Serif', Times, 'Times New Roman', Georgia, serif));
+                font-size: var(--um-font-size-logo, 1.75rem);
+            }
+
+            @media only screen and (max-width: 48rem) {
+                .logo {
+                    height: var(--um-size-mobile-logo-height, calc(var(--um-size-logo-height, 5rem) / 1.25));
+                }
+            }
+
+            /* Hide image for title */
+            .logo--show-title {
+                line-height: inherit;
+            }
+            .logo--show-title .logo__image {
+                display: none;
+            }
+            .logo--show-title a {
+                height: auto;
+            }
+        `
+]);
+e([
+  o()
+], t.prototype, "url", 2);
+e([
+  o({ type: Number })
+], t.prototype, "height", 2);
+e([
+  o()
+], t.prototype, "title", 2);
+e([
+  o({ type: Boolean })
+], t.prototype, "showTitle", 2);
+e([
+  o({ type: String })
+], t.prototype, "imgSrc", 2);
+e([
+  o({ type: String })
+], t.prototype, "imgSrcSet", 2);
+e([
+  o({ type: String })
+], t.prototype, "imgSizes", 2);
+e([
+  o({ type: Number })
+], t.prototype, "imgWidth", 2);
+e([
+  o({ type: Number })
+], t.prototype, "imgHeight", 2);
+t = e([
+  y(`${$}-logo`)
+], t);
+export {
+  t as Logo
+};