@pushengineering/umg-web-components 2.0.0

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

@@ -0,0 +1,233 @@
+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 { css as e } from "../../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
+const s = e`
+
+    /* Slider component */
+
+    /* Flex columns for slider controls*/
+    .slider-component {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        margin: 0 auto;
+    }
+
+    /* Slider scroll container */
+    .slider {
+        scrollbar-color: rgb(var(--um-color-page-text)) rgba(var(--um-color-page-text), 0.04);
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+
+        @media (prefers-reduced-motion) {
+            scroll-behavior: auto;
+        }
+    }
+
+    .slider--selectable ::slotted(*) {
+        cursor: pointer;
+    }
+
+    .slider::-webkit-scrollbar {
+        height: var(--space-4);
+        width: var(--space-4);
+        display: none;
+    }
+
+    .slider::-webkit-scrollbar-thumb {
+        background: rgb(var(--color-section-text, var(--um-color-base-text, 0,0,0)), 0.05);
+        border-radius: var(--space-4);
+        border: 0;
+    }
+
+    .slider::-webkit-scrollbar-track {
+        background: rgb(var(--color-section-text, var(--um-color-base-text, 0,0,0)), 0.1);
+        border-radius: var(--space-4);
+    }
+
+    /* Mobie slider enabled */
+    @media screen and (max-width: 48rem) {
+        .slider.slider--tablet {
+            position: relative;
+            flex-wrap: inherit;
+            overflow-x: auto;
+            scroll-snap-type: x mandatory;
+            scroll-behavior: smooth;
+        }
+    }
+
+    /* Desktop slider enabled */
+    @media screen and (min-width: 48.06rem) {
+        .slider.slider--desktop {
+            position: relative;
+            flex-wrap: inherit;
+            overflow-x: auto;
+            scroll-snap-type: x mandatory;
+            scroll-behavior: smooth;
+        }
+    }
+
+    /* Slides layout */
+
+    .slider.grid.grid--gapless {
+        gap: 0;
+    }
+
+    /* Mobile classes */
+    @media screen and (max-width: 30rem) {
+        /* Peek */
+        .slider.grid--peek.grid--1-col-tablet-down ::slotted(*) {
+            width: calc(100%
+                - var(--um-space-grid-mobile-horizontal, 1rem)
+                - 2rem
+            )
+        }
+        .slider.grid--peek.grid--2-col-tablet-down ::slotted(*) {
+            width: calc(50%
+                - var(--um-space-grid-mobile-horizontal, 1rem)
+                - 1rem
+            )
+        }
+        /* Gapless */
+        .slider.grid--gapless.grid--1-col-tablet-down ::slotted(*) {
+             width: 100%;
+         }
+        .slider.grid--gapless.grid--2-col-tablet-down ::slotted(*) {
+             width: 50%;
+         }
+         /* Gapless + Peek */
+        .slider.grid--peek.grid--gapless.grid--1-col-tablet-down  ::slotted(*) {
+            width: calc(100% - (var(--um-space-grid-mobile-horizontal, 1rem) * 5 ))
+        }
+        .slider.grid--peek.grid--gapless.grid--2-col-tablet-down  ::slotted(*) {
+            width: calc(50% - (var(--um-space-grid-mobile-horizontal, 1rem) * 3 ))
+        }
+    }
+
+    /* Tablet portrait classes */
+    @media screen and (min-width: 30.06rem) and (max-width: 48rem) {
+        /* Peek */
+        .slider.grid--peek.grid--2-col-tablet ::slotted(*) {
+            width: calc(50%
+                - var(--um-space-grid-mobile-horizontal, 1rem)
+                - 2rem
+            )
+        }
+        .slider.grid--peek.grid--3-col-tablet ::slotted(*) {
+            width: calc(33.33%
+                - var(--um-space-grid-mobile-horizontal, 1rem)
+                - 1rem
+            )
+        }
+        /* Gapless */
+        .slider.grid.grid--gapless.grid--2-col-tablet ::slotted(*) {
+            width: 50%;
+        }
+        .slider.grid.grid--gapless.grid--3-col-tablet ::slotted(*) {
+            width: 33.33%;
+        }
+        /* Gapless + Peek */
+        .slider.grid.grid--gapless.grid--peek.grid--2-col-tablet ::slotted(*) {
+            width: calc(50% - (var(--um-space-grid-mobile-horizontal, 1rem) * 5 ))
+        }
+        .slider.grid.grid--gapless.grid--peek.grid--3-col-tablet ::slotted(*) {
+            width: calc(33.33% - (var(--um-space-grid-mobile-horizontal, 1rem) * 3 ))
+        }
+    }
+
+    /* Tablet landscape classes */
+    @media screen and (min-width: 48.06rem) and (max-width: 64rem) {
+        /* Peek */
+        .slider.grid--peek.grid--2-col-tablet ::slotted(*) {
+            width: calc(50%
+                - var(--um-space-grid-desktop-horizontal, 1rem)
+                - 2rem
+            )
+        }
+        .slider.grid--peek.grid--3-col-tablet ::slotted(*) {
+            width: calc(33.33%
+                - var(--um-space-grid-desktop-horizontal, 1rem)
+                - 1rem
+            )
+        }
+        /* Gapless */
+        .slider.grid.grid--gapless.grid--2-col-tablet ::slotted(*) {
+            width: 50%;
+        }
+        .slider.grid.grid--gapless.grid--3-col-tablet ::slotted(*) {
+            width: 33.33%;
+        }
+        /* Gapless + Peek */
+        .slider.grid.grid--gapless.grid--peek.grid--2-col-tablet ::slotted(*) {
+            width: calc(50% - (var(--um-space-grid-desktop-horizontal, 1rem) * 4 ))
+        }
+        .slider.grid.grid--gapless.grid--peek.grid--3-col-tablet ::slotted(*) {
+            width: calc(33.33% - (var(--um-space-grid-desktop-horizontal, 1rem) * 2 ))
+        }
+    }
+
+    /* Desktop variable */
+    @media screen and (min-width: 64.06rem) {
+        .slider.grid--peek ::slotted(*) {
+            width: calc(100%
+                / var(--um-grid-desktop-columns, 4)
+                - var(--um-space-grid-desktop-horizontal, 1rem)
+                * var(--um-grid-desktop-peek, 3)
+            )
+        }
+        /* Gapless */
+        .slider.grid.grid--gapless ::slotted(*) {
+             width: var(--um-grid-desktop-columns-width, 25%);
+         }
+         /* Gapless + Peek */
+         .slider.grid.grid--gapless.grid--peek.grid--1-col-desktop ::slotted(*) {
+             width: calc((100% / var(--um-grid-desktop-columns, 4)) - 9rem);
+         }
+         .slider.grid.grid--gapless.grid--peek.grid--2-col-desktop ::slotted(*) {
+             width: calc((100% / var(--um-grid-desktop-columns, 4)) - 5rem);
+         }
+         .slider.grid.grid--gapless.grid--peek.grid--3-col-desktop ::slotted(*) {
+             width: calc((100% / var(--um-grid-desktop-columns, 4)) - 3rem);
+         }
+         .slider.grid.grid--gapless.grid--peek.grid--4-col-desktop ::slotted(*) {
+             width: calc((100% / var(--um-grid-desktop-columns, 4)) - 2rem);
+         }
+         .slider.grid.grid--gapless.grid--peek.grid--5-col-desktop ::slotted(*) {
+             width: calc((100% / var(--um-grid-desktop-columns, 4)) - 1rem);
+         }
+         .slider.grid.grid--gapless.grid--peek.grid--6-col-desktop ::slotted(*) {
+             width: calc((100% / var(--um-grid-desktop-columns, 4)) - 0.5rem);
+         }
+    }
+
+    /* Slides */
+    ::slotted(*) {
+        scroll-snap-align: start;
+        margin-bottom: 0;
+    }
+
+    /* Slider controls */
+    umg-slider-controls {
+        display: none;
+    }
+
+    @media screen and (min-width: 48.06rem) {
+        .slider-component--desktop umg-slider-controls {
+            display: block
+        }
+    }
+    @media screen and (max-width: 48rem) {
+        .slider-component--tablet umg-slider-controls {
+            display: block
+        }
+    }
+
+    .slider-controls--top umg-slider-controls {
+        order: 2;
+    }
+
+`;
+export {
+  s as slider
+};

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

@@ -0,0 +1,96 @@
+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 u } from "../../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
+import { customElement as g } 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 s } 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 { settings as f } from "../../scripts/settings.js";
+import { mergeStyles as h } from "../../scripts/mergeStyles.js";
+import "../link-group/link-group.js";
+import "../button-icon/button-icon.js";
+var d = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (i, p, l, a) => {
+  for (var e = a > 1 ? void 0 : a ? b(p, l) : p, m = i.length - 1, n; m >= 0; m--)
+    (n = i[m]) && (e = (a ? n(p, l, e) : n(e)) || e);
+  return a && e && d(p, l, e), e;
+};
+const { prefix: $ } = f;
+let t = class extends u {
+  constructor() {
+    super(...arguments), this.target = "_self", this.size = "large", this.spacing = "normal", this.justify = "start", this.mobileJustify = "center", this.border = !1, this.padding = "0";
+  }
+  socialLinks() {
+    if (this.data)
+      return this.data.map((i) => c`
+                    <umg-button-icon
+                        as="link"
+                        url="${s(i.url)}"
+                        target="${this.target}"
+                        icon="${i.icon}"
+                        size="${this.size}"
+                        label="${i.name}"
+                        padding=${this.padding}
+                        colorText="${s(this.colorText)}"
+                        colorbg="${s(this.colorBg)}"
+                        colorBgOpacity="${s(this.colorBgOpacity)}"
+                        borderRadius="${s(this.borderRadius)}"
+                        ?border="${this.border}"
+                        >
+                    </umg-button-icon>
+                `);
+  }
+  render() {
+    return c`
+            <umg-link-group
+                spacing="${this.spacing}"
+                justify="${this.justify}"
+                mobileJustify="${this.mobileJustify}"
+                >
+                ${this.socialLinks()}
+            </umg-link-group>
+        `;
+  }
+};
+t.styles = h([y]);
+o([
+  r()
+], t.prototype, "target", 2);
+o([
+  r()
+], t.prototype, "size", 2);
+o([
+  r()
+], t.prototype, "spacing", 2);
+o([
+  r()
+], t.prototype, "justify", 2);
+o([
+  r()
+], t.prototype, "mobileJustify", 2);
+o([
+  r()
+], t.prototype, "colorText", 2);
+o([
+  r()
+], t.prototype, "colorBg", 2);
+o([
+  r({ type: Number })
+], t.prototype, "colorBgOpacity", 2);
+o([
+  r()
+], t.prototype, "borderRadius", 2);
+o([
+  r({ type: Boolean })
+], t.prototype, "border", 2);
+o([
+  r()
+], t.prototype, "padding", 2);
+o([
+  r({ type: Object })
+], t.prototype, "data", 2);
+t = o([
+  g(`${$}-socials`)
+], t);
+export {
+  t as Socials
+};

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

@@ -0,0 +1,158 @@
+import "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as s, nothing as d } 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 o } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/property.js";
+import { classMap as h } 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 { settings as f } from "../../scripts/settings.js";
+import { mergeStyles as v } from "../../scripts/mergeStyles.js";
+import "../text/text.js";
+import { css as y } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
+var g = Object.defineProperty, w = Object.getOwnPropertyDescriptor, i = (t, a, p, l) => {
+  for (var e = l > 1 ? void 0 : l ? w(a, p) : a, n = t.length - 1, m; n >= 0; n--)
+    (m = t[n]) && (e = (l ? m(a, p, e) : m(e)) || e);
+  return l && e && g(a, p, e), e;
+};
+const { prefix: x } = f;
+let r = class extends c {
+  constructor() {
+    super(...arguments), this.columnLabels = [], this.rowData = [], this.title = "", this.hideTitle = !1;
+  }
+  descriptionClasses() {
+    const t = {};
+    return t["visually-hidden"] = this.hideTitle, t;
+  }
+  tableHeader() {
+    return Array.isArray(this.columnLabels) ? s`
+                <div
+                    class="table-header row"
+                    part="table-header"
+                    role="rowgroup"
+                    >
+                    ${this.columnLabels.map((t) => s`
+                        <div
+                            class="table-cell"
+                            part="table-cell"
+                            role="columnheader"
+                            >
+                            <umg-text
+                                as="span"
+                                alignment="start"
+                                fontWeight="bold"
+                                >
+                                ${t}
+                            </umg-text>
+                        </div>
+                    `)}
+                </div>
+            ` : d;
+  }
+  tableRows() {
+    return this.rowData && Array.isArray(this.rowData) ? s` ${this.rowData.map((t) => {
+      if (Array.isArray(t))
+        return s`
+                    <div
+                        class="table-row row"
+                        part="table-row"
+                        role="rowgroup"
+                        >
+                        ${t.map((a) => s`
+                            <div
+                                class="table-cell"
+                                part="table-cell"
+                                role="cell"
+                                >
+                                <umg-text
+                                    as="span"
+                                    variant="bodySm"
+                                    alignment="start"
+                                    >
+                                    ${a}
+                                </umg-text>
+                            </div>
+                        `)}
+                    </div>
+                `;
+    })}` : d;
+  }
+  render() {
+    return s`
+            <div
+                class="table"
+                part = "table"
+                role = "table"
+                aria-label="${this.title}"
+                aria-describedby="TableDescription"
+                >
+                <div
+                    id="TableDescription"
+                    class="table-description ${h(this.descriptionClasses())}"
+                    part = "table-description"
+                    >
+                    <umg-text
+                        slot="description"
+                        as="h2"
+                        variant="headingLg"
+                        fontWeight="bold"
+                        >
+                        ${this.title}
+                    </umg-text>
+                </div>
+                <div class="table-body">
+                    ${this.tableHeader()}
+                    ${this.tableRows()}
+                </div>
+            </div>
+         `;
+  }
+};
+r.styles = v([
+  u,
+  y`
+            :host {
+                display: block;
+            }
+
+            .row {
+                display: flex;
+                justify-content: start;
+                gap: var(--um-space-16);
+                padding: var(--um-space-4, 0.25rem) 0;
+            }
+            .row > * {
+                width: 10%;
+            }
+            .row > *:first-child {
+                flex-grow: 1;
+                width: 50%;
+            }
+
+            /* Mobile */
+            @media screen and(max-width: 48rem) {
+
+            }
+
+            /* Desktop */
+            @media screen and (min-width: 48.06rem) {
+            }
+        `
+]);
+i([
+  o({ type: Array })
+], r.prototype, "columnLabels", 2);
+i([
+  o({ type: Array })
+], r.prototype, "rowData", 2);
+i([
+  o()
+], r.prototype, "title", 2);
+i([
+  o({ type: Boolean })
+], r.prototype, "hideTitle", 2);
+r = i([
+  b(`${x}-table`)
+], r);
+export {
+  r as Table
+};