@pushengineering/umg-web-components 2.0.0

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

@@ -0,0 +1,245 @@
+import "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as a } 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 { classMap as n } 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 i } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/property.js";
+import { global as c } from "../../styles/global.js";
+import { fontSizes as d, fontWeights as f, fontStyle as u, fontMargins as y } from "../../styles/fonts.js";
+import { settings as b } from "../../scripts/settings.js";
+import { mergeStyles as w } 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 S = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, r = (t, s, h, l) => {
+  for (var o = l > 1 ? void 0 : l ? $(s, h) : s, p = t.length - 1, g; p >= 0; p--)
+    (g = t[p]) && (o = (l ? g(s, h, o) : g(o)) || o);
+  return l && o && S(s, h, o), o;
+};
+const { prefix: k } = b;
+let e = class extends m {
+  constructor() {
+    super(...arguments), this.as = "p", this.variant = "bodyMd", this.color = "default", this.fontWeight = "regular", this.fontStyle = "normal", this.withoutMargin = !1, this.transform = "none", this.truncate = !1, this.breakWord = !1, this.hidden = !1;
+  }
+  textClasses() {
+    const t = {
+      text: !0,
+      "txt--truncate": this.truncate,
+      "txt--breakword": this.breakWord,
+      "txt--hidden": this.hidden
+    };
+    return this.color && (t["txt--color-" + this.color] = !0), this.variant && (t["txt--" + this.variant] = !0), this.lineHeight && (t["txt--line-height-" + this.lineHeight] = !0), this.spacing && (t["txt--spacing-" + this.spacing] = !0), this.fontWeight && (t["txt--" + this.fontWeight] = !0), this.fontStyle && (t["txt--" + this.fontStyle] = !0), this.alignment && (t["txt--align-" + this.alignment] = this.alignment), this.mobileAlignment ? t["txt--mobile-align-" + this.mobileAlignment] = !0 : t["txt--mobile-align-" + this.alignment] = this.alignment, this.withoutMargin && this.as !== "span" && (t["text--without-margin"] = !0), this.transform !== "none" && (t["txt-transform--" + this.transform] = !0), t;
+  }
+  textAs(t) {
+    switch (this.as) {
+      case "p":
+        return a`<p part="p-text paragraph" class="paragraph${n(t)}"><slot></slot></p>`;
+      case "h1":
+        return a`<h1 part="h1-text heading" class="heading${n(t)}"><slot></slot></h1>`;
+      case "h2":
+        return a`<h2 part="h2-text heading" class="heading${n(t)}"><slot></slot></h2>`;
+      case "h3":
+        return a`<h3 part="h3-text heading" class="heading${n(t)}"><slot></slot></h3>`;
+      case "h4":
+        return a`<h4 part="h4-text heading" class="heading${n(t)}"><slot></slot></h4>`;
+      case "h5":
+        return a`<h5 part="h5-text heading" class="heading${n(t)}"><slot></slot></h5>`;
+      case "skeleton":
+        return a`<div class="skeleton${n(t)}"><slot></slot></div>`;
+      default:
+        return a`
+        <span part="span-text span" class="span${n(t)}"><slot></slot></span>`;
+    }
+  }
+  render() {
+    return a`${this.textAs(this.textClasses())}`;
+  }
+};
+e.styles = w([
+  c,
+  d,
+  f,
+  u,
+  y,
+  v`
+            .skeleton {
+                display: flex;
+                background-color: rgb(var(--um-color-skeleton-bg, 1));
+                height: 0.5rem;
+                border-radius: 0.5rem;
+                min-width: 5rem;
+            }
+
+            span.span.text {
+                margin-bottom: 0;
+            }
+            .heading,
+            .paragraph {
+                margin-top: 0;
+                text-align: inherit;
+            }
+    
+            .heading.text--without-margin,
+            .paragraph.text--without-margin,
+            .skeleton.text--without-margin {
+                margin-bottom: 0;
+            }
+
+            /** Color */
+            .txt--color-default {
+                color: inherit
+            }
+            .txt--color-subdued {
+                color: rgba(var(--um-color-base-text-subdued), 1)
+            }
+            .txt--color-warning {
+                color: rgba(var(--um-color-base-text-warning), 1)
+            }
+            .txt--color-inverse {
+                color: rgba(var(--um-color-base-text-inverse), 1);
+            }
+            .txt-transform--uppercase {
+                text-transform: uppercase;
+            }
+            .txt-transform--capitalize {
+                text-transform: capitalize
+            }
+            .txt-transform--lowercase {
+                text-transform: lowercase;
+            }
+            .txt--truncate {
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+            .txt--breakword {
+                overflow-wrap: anywhere;
+                word-break: normal;
+            }
+            .txt--hidden {
+                position: absolute !important;
+                overflow: hidden;
+                width: 1px;
+                height: 1px;
+                margin: -1px;
+                padding: 0;
+                border: 0;
+                clip: rect(0 0 0 0);
+                word-wrap: normal !important;
+            }
+
+            /* Text line-height */
+            .txt--line-height-extra-loose.heading, 
+            .txt--line-height-extra-loose.paragraph {
+                line-height: calc(1 + 1 / max(1, var(--um-font-size-body-scale, 1)));
+            }
+            .txt--line-height-loose.heading, 
+            .txt--line-height-loose.paragraph {
+                line-height: calc(1 + 0.8 / max(1, var(--um-font-size-body-scale, 1)));
+            }
+            .txt--line-height-normal.heading, 
+            .txt--line-height-normal.paragraph {
+                line-height: calc(1 + 0.5 / max(1, var(--um-font-size-body-scale, 1)));
+            }
+            .txt--line-height-compact.heading, 
+            .txt--line-height-compact.paragraph {
+                line-height: calc(1 + 0.3 / max(1, var(--um-font-size-body-scale, 1)));
+            }
+
+            /* Text kerning */
+            .txt--spacing-extra-loose.heading, 
+            .txt--spacing-extra-loose.paragraph,
+            .txt--spacing-extra-loose.span {
+                letter-spacing: 0.1rem;
+            }
+            .txt--spacing-loose.heading, 
+            .txt--spacing-loose.paragraph,
+            .txt--spacing-loose.span {
+                letter-spacing: 0.05rem;
+            }
+            .txt--spacing-normal.heading, 
+            .txt--spacing-normal.paragraph,
+            .txt--spacing-normal.span {
+                letter-spacing: inherit;
+            }
+
+            /* Text justification */
+            @media screen and (max-width: 48rem) {
+                .txt--mobile-align-start {
+                    text-align: left;
+                }
+                .txt--mobile-align-center {
+                    text-align: center;
+                }
+                .txt--mobile-align-end {
+                    text-align: right;
+                }
+                .txt--mobile-align-justify {
+                    text-align: justify;
+                }
+            }
+            @media screen and (min-width: 48.06rem) {
+                .txt--margin {
+                    margin-bottom: var(--um-space-16, 1rem);
+                }
+                .txt--align-start {
+                    text-align: left;
+                }
+                .txt--align-center {
+                    text-align: center;
+                }
+                .txt--align-end {
+                    text-align: right;
+                }
+                .txt--align-justify {
+                    text-align: justify;
+                }
+            }
+        `
+]);
+r([
+  i({ type: String })
+], e.prototype, "as", 2);
+r([
+  i({ type: String })
+], e.prototype, "variant", 2);
+r([
+  i({ type: String })
+], e.prototype, "color", 2);
+r([
+  i({ type: String })
+], e.prototype, "fontWeight", 2);
+r([
+  i({ type: String })
+], e.prototype, "fontStyle", 2);
+r([
+  i({ type: String })
+], e.prototype, "lineHeight", 2);
+r([
+  i({ type: String })
+], e.prototype, "spacing", 2);
+r([
+  i({ type: String })
+], e.prototype, "alignment", 2);
+r([
+  i({ type: String })
+], e.prototype, "mobileAlignment", 2);
+r([
+  i({ type: Boolean })
+], e.prototype, "withoutMargin", 2);
+r([
+  i()
+], e.prototype, "transform", 2);
+r([
+  i({ type: Boolean })
+], e.prototype, "truncate", 2);
+r([
+  i({ type: Boolean })
+], e.prototype, "breakWord", 2);
+r([
+  i({ type: Boolean })
+], e.prototype, "hidden", 2);
+e = r([
+  x(`${k}-text`)
+], e);
+export {
+  e as Text
+};

package/dist/packages/web-components/components/text-field/text-field.js

@@ -0,0 +1,257 @@
+import "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as s } 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 h } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as t } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/property.js";
+import { classMap as a } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/class-map.js";
+import { global as m } from "../../styles/global.js";
+import { settings as f } from "../../scripts/settings.js";
+import { mergeStyles as b } 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, y = Object.getOwnPropertyDescriptor, i = (e, o, n, d) => {
+  for (var l = d > 1 ? void 0 : d ? y(o, n) : o, p = e.length - 1, u; p >= 0; p--)
+    (u = e[p]) && (l = (d ? u(o, n, l) : u(l)) || l);
+  return d && l && v(o, n, l), l;
+};
+const { prefix: x } = f;
+let r = class extends c {
+  constructor() {
+    super(...arguments), this.type = "text", this.hideLabel = !1, this.multiline = !1, this.placeholder = "", this.disabled = !1, this.required = !1, this.id = "", this.error = !1, this.name = "", this.value = "";
+  }
+  fieldClasses() {
+    const e = {
+      "field__inner--required": this.required
+    };
+    return (this.type === "checkbox" || this.type === "radio") && (e["field__inner--inline"] = !0), e;
+  }
+  inputClasses() {
+    return {
+      field__input: !0,
+      "field__input--multiline": this.multiline,
+      "field__input--error": this.error
+    };
+  }
+  labelClasses() {
+    return {
+      field__label: !0,
+      "field__label--disabled": this.disabled,
+      "visually-hidden": this.hideLabel
+    };
+  }
+  renderLabel(e) {
+    return s`
+            <label class="${a(e)}" for="${this.id}">
+                <slot name="label"></slot>
+            </label>
+        `;
+  }
+  renderInput(e) {
+    return s`
+        <div class="input">
+            <input
+                part="text-field"
+                class="${a(e)}"
+                id="${this.id}"
+                type="${this.type}"
+                ?disabled="${this.disabled}"
+                ?required="${this.required}"
+                placeholder="${this.placeholder}"
+                name="${this.name}"
+                value="${this.value}"
+                >
+        </div>
+        `;
+  }
+  renderTextarea(e) {
+    return s`
+        <div class="input">
+            <textarea
+                part="text-filed"
+                class="${a(e)}"
+                id="${this.id}"
+                ?disabled="${this.disabled}"
+                ?required="${this.required}"
+                placeholder="${this.placeholder}"
+                value="${this.value}"
+                >
+            </textarea>
+        </div>
+        `;
+  }
+  renderErrorMessage() {
+    if (this.error)
+      return s`
+                <span class="field__error-text">
+                    <slot name="error-message"></slot>
+                </span>
+            `;
+  }
+  inputAs(e) {
+    switch (this.type) {
+      case "checkbox":
+      case "radio":
+        return s`
+            <div class="field__inner${a(e)}">
+                ${this.renderInput(this.inputClasses())}
+                ${this.renderLabel(this.labelClasses())}
+            </div>
+        `;
+      default:
+        return s`
+            <div class="field__inner${a(e)}">
+                ${this.renderLabel(this.labelClasses())}
+                ${this.renderInput(this.inputClasses())}
+            </div>
+        `;
+    }
+  }
+  checkIfMultiline() {
+    return this.multiline ? s`
+                <div class="field__inner${a(this.fieldClasses())}">
+                    ${this.renderLabel(this.labelClasses())}
+                    ${this.renderTextarea(this.inputClasses())}
+                </div>
+            ` : s`
+                ${this.inputAs(this.fieldClasses())}
+            `;
+  }
+  render() {
+    return s`
+            <div class="field">
+                ${this.checkIfMultiline()}
+                ${this.renderErrorMessage()}
+            </div>
+        `;
+  }
+};
+r.styles = b([
+  m,
+  _`
+            /* Base */
+            .field {
+                display: flex;
+                flex-direction: column;
+                position: relative;
+                font-size: var(--um-font-size-bodySm, 0.875rem);
+            }
+            .field__inner {
+                align-items: flex-start;
+                display: flex;
+            }
+            .field__inner:not(.field__inner--inline) {
+                flex-direction: column;
+            }
+
+            /* Required */
+            .field__inner--required .input::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                bottom: 0;
+                display: block;
+                border-right: 0.25rem solid rgba(var(--um-color-base-text-warning, 200,0,0), 0.7);
+                width: 0;
+                height: 100%;
+                z-index: 1;
+            }
+
+            /* Field label */
+            .field__label {
+                color: inherit;
+                font-size: inherit;
+                margin-bottom: var(--um-space-4, 0.25rem);
+            }
+
+            /* Field input */
+            .field__input {
+                border: 0.0625rem solid rgba(var(--um-color-input-border, var(--um-color-section-text, 0,0,0), var(--um-opacity-input-border, 0.2)));
+                border-radius: var(--um-border-input-radius, 0);
+                font-family: var(--um-font-family-body, Roboto, Arial, Helvetica, sans-serif);
+                font-size: inherit;
+                height: var(--um-space-40, 2rem);
+                padding: var(--um-space-8, 0.5rem);
+                width: 100%;
+            }
+
+            /* Textarea */
+            .field__input--multiline {
+                min-height: var(--um-space-112, 7rem);
+            }
+
+            /* Error state */
+            .field__input--error {
+                border: 0.0625rem solid rgba(var(--um-color-base-text-warning, 245,0,0), 1);
+            }
+            .field__error-text {
+                color: rgba(var(--um-color-base-text-warning, 245,0,0), 1);
+                font-size: calc(var(--um-font-size-body-scale, 1) * var(--um-font-size-body-sm, 0.875rem));
+                padding-top: var(--um-space-4, 0.25rem);
+            }
+
+            /* Disabled */
+            :host([disabled]) {
+                --um-color-button-icon-text: var(--um-color-border-disabled, 236, 236, 236);
+            }
+
+            .field__input[disabled] {
+                cursor: default;
+                background-color: rgb(255,255,255,1);
+                color: rgb(var(--um-color-base-text-disabled, 200, 200, 200),1);
+                border-color: rgb(var(--um-color-border-disabled, 236, 236, 236), 1);
+            }
+            .field__label--disabled {
+                color: rgb(var(--um-color-base-text-disabled,200, 200, 200),1);
+            }
+
+            /** Input Types */
+            .input {
+                position: relative;
+            }
+
+            /* Radio/check */
+            .field__input[type=checkbox],
+            .field__input[type=radio] {
+                height: auto;
+                margin: 0.3rem 0.5rem 0 0;
+                padding: 0;
+                width: auto;
+            }
+        `
+]);
+i([
+  t()
+], r.prototype, "type", 2);
+i([
+  t({ type: Boolean })
+], r.prototype, "hideLabel", 2);
+i([
+  t({ type: Boolean })
+], r.prototype, "multiline", 2);
+i([
+  t()
+], r.prototype, "placeholder", 2);
+i([
+  t({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled", 2);
+i([
+  t({ type: Boolean })
+], r.prototype, "required", 2);
+i([
+  t()
+], r.prototype, "id", 2);
+i([
+  t({ type: Boolean })
+], r.prototype, "error", 2);
+i([
+  t()
+], r.prototype, "name", 2);
+i([
+  t({ reflect: !0 })
+], r.prototype, "value", 2);
+r = i([
+  h(`${x}-text-field`)
+], r);
+export {
+  r as TextField
+};

package/dist/packages/web-components/components/thumbnail-slider/thumbnail-slide.js

@@ -0,0 +1,51 @@
+import "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
+import "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
+import "../../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
+import { property as n } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/property.js";
+import { customElement as c } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { Slide as a } from "../slider/slide.js";
+import { settings as d } from "../../scripts/settings.js";
+import { css as f } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
+var u = Object.defineProperty, b = Object.getOwnPropertyDescriptor, l = (m, t, s, e) => {
+  for (var r = e > 1 ? void 0 : e ? b(t, s) : t, i = m.length - 1, p; i >= 0; i--)
+    (p = m[i]) && (r = (e ? p(t, s, r) : p(r)) || r);
+  return e && r && u(t, s, r), r;
+};
+const { prefix: v } = d;
+let o = class extends a {
+  constructor() {
+    super(...arguments), this.mediaId = "";
+  }
+};
+o.styles = [
+  a.styles,
+  f`
+            :host {
+                padding: var(--um-space-4, 0.25rem);
+            }
+            :host([active]) {
+                padding: 0;
+                position: relative;
+            }
+            :host([active])::after {
+                content: '';
+                display: block;
+                position: absolute;
+                inset: 0;
+                background-color: rgb(255,255,255,0.2);
+                cursor: default;
+            }
+            li {
+                border: 0.0625rem solid rgb(0,0,0,0.1);
+            }
+        `
+];
+l([
+  n()
+], o.prototype, "mediaId", 2);
+o = l([
+  c(`${v}-thumbnail-slide`)
+], o);
+export {
+  o as ThumbnailSlide
+};

package/dist/packages/web-components/components/thumbnail-slider/thumbnail-slider.js

@@ -0,0 +1,88 @@
+import { customElement as c } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as n } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/property.js";
+import { Slider as u } from "../slider/slider.js";
+import "./thumbnail-slide.js";
+import { settings as p } from "../../scripts/settings.js";
+import { EventManager as h } from "../../classes/event-manager/event-manager.js";
+var v = Object.defineProperty, m = Object.getOwnPropertyDescriptor, d = (e, t, s, r) => {
+  for (var i = r > 1 ? void 0 : r ? m(t, s) : t, o = e.length - 1, l; o >= 0; o--)
+    (l = e[o]) && (i = (r ? l(t, s, i) : l(i)) || i);
+  return r && i && v(t, s, i), i;
+};
+const { prefix: f } = p;
+let a = class extends u {
+  constructor() {
+    super(), this.currentMediaId = "", this.contentType = "slider", this.desktopSlider = !0, this.mobileSlider = !0, this.slideEventManager = new h(this);
+    const e = [...this.constructor.eventTypes];
+    e.push("active-slide"), e.forEach((t) => {
+      this.addEventListener(t, this._customEventsHandler);
+    }), this._initialiseSlides();
+  }
+  async _initialiseSlides() {
+    await this.updateComplete, this._updateActiveSlide(this.currentMediaId), this._sliderItems.forEach((e) => {
+      e.addEventListener("click", () => {
+        const t = {
+          mediaId: e.getAttribute("mediaId")
+        };
+        this._eventsDispatcher("active-slide", t);
+      });
+    });
+  }
+  slidesChanged() {
+    super.slidesChanged(), this._initialiseSlides();
+  }
+  _updateActiveSlide(e) {
+    e && this._sliderItems.forEach((t, s) => {
+      t.hasAttribute("active") && t.removeAttribute("active");
+      const r = t.getAttribute("mediaId");
+      if (e === r) {
+        t.setAttribute("active", ""), this._updateActiveMedia(r);
+        const i = {
+          slideNumber: s + 1
+        };
+        this._eventsDispatcher("slide-link", i);
+      }
+    });
+  }
+  _updateActiveMedia(e) {
+    this.slideEventManager.dispatchCustomEvent(
+      "active-media",
+      { mediaId: e },
+      { bubbles: !0, composed: !0 }
+    );
+  }
+  _eventsDispatcher(e, t) {
+    if (!e)
+      throw new Error("Missing custom event type");
+    const s = { bubbles: !0, composed: !0 };
+    e == "active-slide" && this.slideEventManager.dispatchCustomEvent(e, t, s), e == "slide-link" && this.slideEventManager.dispatchCustomEvent(e, t, s);
+  }
+  _customEventsHandler(e) {
+    super._customEventsHandler(e), e.type === "active-slide" && this._updateActiveSlide(e.detail.mediaId);
+  }
+  updated(e) {
+    super.updated(e), e.has("currentMediaId") && e.get("currentMediaId") && this._updateActiveSlide(this.currentMediaId);
+  }
+  gridClasses() {
+    const e = super.gridClasses();
+    return e["slider--selectable"] = !0, e;
+  }
+};
+d([
+  n({ reflect: !0 })
+], a.prototype, "currentMediaId", 2);
+d([
+  n({ state: !0 })
+], a.prototype, "contentType", 2);
+d([
+  n({ state: !0, type: Boolean })
+], a.prototype, "desktopSlider", 2);
+d([
+  n({ state: !0, type: Boolean })
+], a.prototype, "mobileSlider", 2);
+a = d([
+  c(`${f}-thumbnail-slider`)
+], a);
+export {
+  a as ThumbnailSlider
+};