@pushengineering/umg-web-components 2.0.0

package/dist/packages/web-components/components/rich-text/rich-text.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 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;
+};
+const { prefix: j } = u;
+let i = class extends c {
+  constructor() {
+    super(...arguments), this.size = "bodyMd", this.alignment = "start";
+  }
+  textClasses() {
+    const t = {};
+    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())}">
+                <div class="rich-text-skeleton">
+                    <div class="skeleton"></div>
+                    <div class="skeleton"></div>
+                    <div class="skeleton"></div>
+                    <div class="skeleton"></div>
+                    <div class="skeleton"></div>
+                </div>
+            </slot>
+        `;
+  }
+};
+i.styles = v([
+  p,
+  f,
+  b`
+            .rich-text-skeleton {
+                display: flex;
+                flex-direction: column;
+                gap: 1rem;
+                width: 100%;
+            }
+            .skeleton {
+                background-color: rgb(var(--um-color-skeleton-bg, 1));
+                height: 0.5rem;
+                border-radius: 0.5rem;
+                width: 100%;
+            }
+            .rich-text {
+                color: inherit
+            }
+
+            /* Text line-height */
+            .txt--line-height-extra-loose {
+                line-height: calc(1 + 1 / max(1, var(--um-font-size-body-scale, 1)));
+            }
+            .txt--line-height-loose {
+                line-height: calc(1 + 0.8 / max(1, var(--um-font-size-body-scale, 1)));
+            }
+            .txt--line-height-regular {
+                line-height: calc(1 + 0.5 / max(1, var(--um-font-size-body-scale, 1)));
+            }
+            .txt--line-height-compact {
+                line-height: calc(1 + 0.3 / max(1, var(--um-font-size-body-scale, 1)));
+            }
+
+            /* 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;
+                }
+            }
+        `,
+  d
+]);
+s([
+  r({ type: String })
+], i.prototype, "size", 2);
+s([
+  r({ type: String })
+], i.prototype, "lineHeight", 2);
+s([
+  r({ type: String })
+], i.prototype, "alignment", 2);
+s([
+  r({ type: String })
+], i.prototype, "mobileAlignment", 2);
+i = s([
+  x(`${j}-rich-text`)
+], i);
+export {
+  i as RichText
+};

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

@@ -0,0 +1,400 @@
+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 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 h } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/state.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 m } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/style-map.js";
+import { paddingToCssShorthandArray as f, mergePaddingArrays as b } from "../../scripts/utilities/paddingTransformations.js";
+import { global as _ } from "../../styles/global.js";
+import { settings as w } from "../../scripts/settings.js";
+import { mergeStyles as v } from "../../scripts/mergeStyles.js";
+import { css as y } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
+var x = Object.defineProperty, P = Object.getOwnPropertyDescriptor, i = (e, a, d, r) => {
+  for (var n = r > 1 ? void 0 : r ? P(a, d) : a, s = e.length - 1, c; s >= 0; s--)
+    (c = e[s]) && (n = (r ? c(a, d, n) : c(n)) || n);
+  return r && n && x(a, d, n), n;
+};
+const { prefix: S } = w;
+let t = class extends g {
+  constructor() {
+    super(...arguments), this.outerWidth = "full-width", this.innerWidth = "page-width", this.compactHeader = !1, this.bleedContent = !1, this._withoutHeader = !0, this._withoutFooter = !0;
+  }
+  handleSlotchange(e) {
+    e.target && e.target.getAttribute("name") === "footer-link" && (this._withoutFooter = !1), (e.target && e.target.getAttribute("name") === "title" || e.target.getAttribute("name") === "header-link" || e.target.getAttribute("name") === "subtitle" || e.target.getAttribute("name") === "description") && (this._withoutHeader = !1);
+  }
+  firstUpdated() {
+    this.mobilePadding && this.convertMobilePadding(this.mobilePadding);
+  }
+  updated(e) {
+    e.has("mobilePadding") && this.mobilePadding && this.mobilePadding && this.convertMobilePadding(this.mobilePadding);
+  }
+  convertMobilePadding(e) {
+    if (e) {
+      const d = [f(e)];
+      this._mobilePadding = b(d);
+    }
+  }
+  sectionClasses() {
+    const e = {
+      section: !0,
+      "section--compact-header": this.compactHeader,
+      "section--without-header": this._withoutHeader,
+      "section--without-footer": this._withoutFooter
+    };
+    return this.outerWidth && (e["section-width--" + this.outerWidth] = !0), e;
+  }
+  sectionInnerClasses() {
+    const e = {};
+    return this.innerWidth && (e["section-inner-width--" + this.innerWidth] = !0), this.bleedContent && (e["section-inner--bleed-content"] = !0), e;
+  }
+  sectionStyles() {
+    let e = {};
+    return this.maxInnerWidth && (e = {
+      ...e,
+      "--um-size-max-section-width": this.maxInnerWidth / 16 + "rem"
+    }), this.colorText && (e = {
+      ...e,
+      "--um-color-section-text": this.colorText
+    }), this.colorBg && (e = {
+      ...e,
+      "--um-color-section-bg": this.colorBg
+    }), this.paddingTop && (e = {
+      ...e,
+      "--um-space-section-padding-top": Number(this.paddingTop) / 16 + "rem"
+    }), this.paddingBottom && (e = {
+      ...e,
+      "--um-space-section-padding-bottom": Number(this.paddingBottom) / 16 + "rem"
+    }), this.paddingLeft && (e = {
+      ...e,
+      "--um-space-section-padding-left": Number(this.paddingLeft) / 16 + "rem"
+    }), this.paddingRight && (e = {
+      ...e,
+      "--um-space-section-padding-right": Number(this.paddingRight) / 16 + "rem"
+    }), this._mobilePadding && typeof this._mobilePadding == "object" && "rem" in this._mobilePadding && (e = {
+      ...e,
+      "--um-space-section-mobile-padding-top": this._mobilePadding.rem.top,
+      "--um-space-section-mobile-padding-right": this._mobilePadding.rem.right,
+      "--um-space-section-mobile-padding-bottom": this._mobilePadding.rem.bottom,
+      "--um-space-section-mobile-padding-left": this._mobilePadding.rem.left
+    }), e;
+  }
+  headerStyles() {
+    let e = {};
+    return this._withoutHeader && (e = {
+      ...e,
+      display: "none"
+    }), e;
+  }
+  footerStyles() {
+    let e = {};
+    return this._withoutFooter && (e = {
+      ...e,
+      display: "none"
+    }), e;
+  }
+  header() {
+    return l`
+            <div
+                part="section-header"
+                class="section__header"
+                style="${m(this.headerStyles())}"
+                >
+                <div class="header">
+                    <div part="header__main" class="header-main">
+                        <div class="title" part="header-title">
+                            <slot 
+                                name="title" 
+                                @slotchange=${this.handleSlotchange}
+                                >
+                            </slot>
+                        </div>
+                        <div class="header__link" part="header-link">
+                            <slot 
+                                name="header-link" 
+                                @slotchange=${this.handleSlotchange}
+                                >
+                            </slot>
+                        </div>
+                    </div>
+                    <slot 
+                        name="subtitle" 
+                        @slotchange=${this.handleSlotchange}
+                        >
+                    </slot>
+                    <slot 
+                        name="description" 
+                        @slotchange=${this.handleSlotchange}
+                        >
+                    </slot>
+                </div>
+            </div>
+            `;
+  }
+  footer() {
+    return l`
+            <div
+                part="section_footer"
+                class="section__footer"
+                style="${m(this.footerStyles())}"
+                >
+                <div class="footer">
+                    <div class="footer__link" part="footer-link">
+                        <slot
+                            name="footer-link"
+                            @slotchange=${this.handleSlotchange}
+                            >
+                        </slot>
+                    </div>
+                </div>
+            </div>
+        `;
+  }
+  render() {
+    return l`
+            <section
+                class="${p(this.sectionClasses())}"
+                style="${m(this.sectionStyles())}"
+                part="section"
+                >
+                <div
+                    class="section__inner${p(this.sectionInnerClasses())}"
+                    part="section-inner"
+                    >
+                    ${this.header()}
+                    <div
+                        class="section__content"
+                        part="section-content"
+                        >
+                        <slot name="content"></slot>
+                    </div>
+                    ${this.footer()}
+                </div>
+            </section>
+      `;
+  }
+};
+t.styles = v([
+  _,
+  y`
+            :host {
+                display: block;
+                width: 100%;
+            }
+
+            /* Layout */
+            .section {
+                margin: 0 auto;
+                margin-top: var(--um-space-section-margin-top, 0);
+                margin-bottom: var(--um-space-section-margin-bottom, 0);
+                max-width: var(--um-size-page-width, 75rem);
+                width: 100%;
+            }
+
+            .section__inner {
+                color: rgb(var(--um-color-section-text, var(--um-color-page-text, var(--um-color-base-text))), 1);
+                background-color: rgb(var(--um-color-section-bg, var(--um-color-page-bg, var(--um-color-base-bg))), 1);
+            }
+
+            /* Section widths */
+
+            /* Outer section width */
+            .section.section-width--full-width,
+            .section.section-width--full-bleed {
+                max-width: 100%;
+            }
+
+            /* Inner section width */
+            .section-inner-width--full-width .section__content,
+            .section-inner-width--full-bleed .section__content {
+                max-width: 100%;
+            }
+
+            .section-inner-width--page-width .section__header,
+            .section-inner-width--page-width .section__content,
+            .section-inner-width--page-width .section__footer {
+                margin: 0 auto;
+                max-width:  var(--um-size-page-width, 75rem);
+                width: 100%;
+            }
+            .section-inner-width--full-bleed .section__header,
+            .section-inner-width--full-bleed .section__content,
+            .section-inner-width--full-bleed .section__footer,
+            .section-inner-width--full-width .section__header,
+            .section-inner-width--full-width .section__content,
+            .section-inner-width--full-width .section__footer {
+                margin: 0 auto;
+                max-width:  var(--um-size-max-section-width);
+                width: 100%;
+            }
+            
+            /* Header */
+            .header {
+                display: flex;
+                flex-direction: column;
+                gap: var(--um--space-16, 1rem);
+                padding-top: var(--um-space-section-padding-top, 1.5rem);
+                padding-bottom: var(--um-space-32, 2rem);
+            }
+            @media only screen and (max-width: 48rem) {
+                .header {
+                    padding-top: var(--um-space-section-mobile-padding-top, 1.5rem);
+                }
+            }
+            
+            .header-main {
+                display: flex;
+                align-items: center;
+                column-gap: var(--um-space-16, 1rem);
+                row-gap: var(--um-space-12, 0.75rem);
+                flex-wrap: wrap;
+            }
+            .header-main .title {
+                flex: 1;
+            }
+            
+            @media screen and (max-width: 48rem) {
+                .header-main .title {
+                    flex: 1 0 100%;
+                }
+            }
+            
+            /* Compact header */
+            .section--compact-header .header {
+                gap: 0;
+                padding-bottom: var(--um-space-12, 0.75rem);
+            }
+            
+            /* Footer */
+            .footer {
+                display: flex;
+                justify-content: center;
+                padding-top: var(--um-space-32, 2rem);
+                padding-bottom: var(--um-space-section-padding-bottom, 1.5rem);
+            }
+            @media only screen and (max-width: 48rem) {
+                .footer {
+                    padding-bottom: var(--um-space-section-mobile-padding-bottom, 1.5rem);
+                }
+            }
+
+            /* Empty header and footer */
+            .section--without-header .section__header,
+            .section--without-footer .section__footer {
+                display: none;
+            }
+
+            /* Padding states */
+            .section__inner > * {
+                padding-left: var(--um-space-section-padding-left, 1.5rem);
+                padding-right: var(--um-space-section-padding-right, 1.5rem);
+            }
+            @media only screen and (max-width: 48rem) {
+                .section__inner > * {
+                    padding-left: var(--um-space-section-mobile-padding-left, 1rem);
+                    padding-right: var(--um-space-section-mobile-padding-right, 1rem);
+                }
+            }
+
+            .section--without-header :not(.section-inner-width--full-bleed) .section__content {
+                padding-top: var(--um-space-section-padding-top, 1.5rem);
+            }
+            .section--without-footer :not(.section-inner-width--full-bleed) .section__content {
+                padding-bottom: var(--um-space-section-padding-bottom, 1.5rem);
+            }
+            @media only screen and (max-width: 48rem) {
+                .section--without-header :not(.section-inner-width--full-bleed) .section__content {
+                    padding-top: var(--um-space-section-mobile-padding-top, 1.5rem);
+                }
+                .section--without-footer :not(.section-inner-width--full-bleed) .section__content {
+                    padding-bottom: var(--um-space-section-mobile-padding-bottom, 1.5rem);
+                }
+            }
+
+
+            /* Desktop full bleed removes all padding except header and footer */
+            .section-inner-width--full-bleed {
+                padding: 0;
+            }
+
+            /* Header and footer always padded */
+            .section-inner-width--full-bleed .section__header,
+            .section-inner-width--full-bleed .section__footer {
+                padding-left: var(--um-space-section-padding-left, 1.5rem);
+                padding-right: var(--um-space-section-padding-right, 1.5rem);
+            }
+
+            @media only screen and (min-width: 48.06rem) {
+                /* Content always full bleed on mobile*/
+                .section.section-width--page-width .section-inner-width--full-bleed .section__content {
+                    padding-left: var(--um-space-section-padding-left, 1.5rem);
+                    padding-right: var(--um-space-section-padding-right, 1.5rem);
+                }
+            }
+            @media only screen and (max-width: 48rem) {
+                /* Header and footer always padded */
+                .section-inner-width--full-bleed .section__header,
+                .section-inner-width--full-bleed .section__footer {
+                    padding-left: var(--um-space-section-mobile-padding-left, 1rem);
+                    padding-right: var(--um-space-section-mobile-padding-right, 1rem);
+                }
+            }
+
+            /* Full bleed side removes content padding */
+            .section-inner-width--full-bleed .section__content {
+                padding: 0;
+            }
+        `
+]);
+i([
+  o()
+], t.prototype, "outerWidth", 2);
+i([
+  o()
+], t.prototype, "innerWidth", 2);
+i([
+  o({ type: Number })
+], t.prototype, "maxInnerWidth", 2);
+i([
+  o({ type: Boolean })
+], t.prototype, "compactHeader", 2);
+i([
+  o({ type: Boolean })
+], t.prototype, "bleedContent", 2);
+i([
+  o()
+], t.prototype, "mobilePadding", 2);
+i([
+  o()
+], t.prototype, "paddingTop", 2);
+i([
+  o()
+], t.prototype, "paddingBottom", 2);
+i([
+  o()
+], t.prototype, "paddingLeft", 2);
+i([
+  o()
+], t.prototype, "paddingRight", 2);
+i([
+  o()
+], t.prototype, "colorBg", 2);
+i([
+  o()
+], t.prototype, "colorText", 2);
+i([
+  h()
+], t.prototype, "_withoutHeader", 2);
+i([
+  h()
+], t.prototype, "_withoutFooter", 2);
+i([
+  h()
+], t.prototype, "_mobilePadding", 2);
+t = i([
+  u(`${S}-section`)
+], t);
+export {
+  t as Section
+};