@pushengineering/umg-web-components 2.0.2 → 2.0.3

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

@@ -1,28 +1,25 @@
-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;
+import { css as g, LitElement as u, html as l } from "lit";
+import { customElement as f } from "lit/decorators/custom-element.js";
+import { property as o } from "lit/decorators/property.js";
+import { state as m } from "lit/decorators/state.js";
+import { classMap as p } from "lit/directives/class-map.js";
+import { styleMap as h } from "lit/directives/style-map.js";
+import { paddingToCssShorthandArray as b, mergePaddingArrays as _ } from "../../scripts/utilities/paddingTransformations.js";
+import { global as w } from "../../styles/global.js";
+import { settings as v } from "../../scripts/settings.js";
+import { mergeStyles as y } from "../../scripts/mergeStyles.js";
+var x = Object.defineProperty, P = Object.getOwnPropertyDescriptor, i = (e, a, r, d) => {
+  for (var n = d > 1 ? void 0 : d ? P(a, r) : a, s = e.length - 1, c; s >= 0; s--)
+    (c = e[s]) && (n = (d ? c(a, r, n) : c(n)) || n);
+  return d && n && x(a, r, n), n;
 };
-const { prefix: S } = w;
-let t = class extends g {
+const { prefix: S } = v;
+let t = class extends u {
   constructor() {
-    super(...arguments), this.outerWidth = "full-width", this.innerWidth = "page-width", this.compactHeader = !1, this.bleedContent = !1, this._withoutHeader = !0, this._withoutFooter = !0;
+    super(...arguments), this.outerWidth = "full-width", this.innerWidth = "page-width", this.compactHeader = !1, this.mobileBleed = !1, this._withoutHeader = !0, this._withoutFooter = !0, this.isNumeric = (e) => (typeof e == "number" || typeof e == "string" && e.trim() !== "") && !isNaN(e);
   }
   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);
+    e.target && e.target.getAttribute("name") === "footer-link" && (this._withoutFooter = !1), (e.target && e.target.getAttribute("name") === "toolbar" || 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);
@@ -32,8 +29,8 @@ let t = class extends g {
   }
   convertMobilePadding(e) {
     if (e) {
-      const d = [f(e)];
-      this._mobilePadding = b(d);
+      const r = [b(e)];
+      this._mobilePadding = _(r);
     }
   }
   sectionClasses() {
@@ -47,11 +44,14 @@ let t = class extends g {
   }
   sectionInnerClasses() {
     const e = {};
-    return this.innerWidth && (e["section-inner-width--" + this.innerWidth] = !0), this.bleedContent && (e["section-inner--bleed-content"] = !0), e;
+    return this.innerWidth && !this.isNumeric(this.innerWidth) && (e["section-inner-width--" + this.innerWidth] = !0), this.mobileBleed && (e["section-inner--bleed-content"] = !0), e;
   }
   sectionStyles() {
     let e = {};
-    return this.maxInnerWidth && (e = {
+    return this.innerWidth && this.isNumeric(this.innerWidth) && (e = {
+      ...e,
+      "--um-size-page-width": Number(this.innerWidth) / 16 + "rem"
+    }), this.maxInnerWidth && (e = {
       ...e,
       "--um-size-max-section-width": this.maxInnerWidth / 16 + "rem"
     }), this.colorText && (e = {
@@ -99,9 +99,14 @@ let t = class extends g {
             <div
                 part="section-header"
                 class="section__header"
-                style="${m(this.headerStyles())}"
+                style="${h(this.headerStyles())}"
                 >
                 <div class="header">
+                    <slot
+                        name="toolbar"
+                        @slotchange=${this.handleSlotchange}
+                        >
+                    </slot>
                     <div part="header__main" class="header-main">
                         <div class="title" part="header-title">
                             <slot 
@@ -137,7 +142,7 @@ let t = class extends g {
             <div
                 part="section_footer"
                 class="section__footer"
-                style="${m(this.footerStyles())}"
+                style="${h(this.footerStyles())}"
                 >
                 <div class="footer">
                     <div class="footer__link" part="footer-link">
@@ -155,7 +160,7 @@ let t = class extends g {
     return l`
             <section
                 class="${p(this.sectionClasses())}"
-                style="${m(this.sectionStyles())}"
+                style="${h(this.sectionStyles())}"
                 part="section"
                 >
                 <div
@@ -175,9 +180,9 @@ let t = class extends g {
       `;
   }
 };
-t.styles = v([
-  _,
-  y`
+t.styles = y([
+  w,
+  g`
             :host {
                 display: block;
                 width: 100%;
@@ -205,12 +210,16 @@ t.styles = v([
                 max-width: 100%;
             }
 
-            /* Inner section width */
-            .section-inner-width--full-width .section__content,
-            .section-inner-width--full-bleed .section__content {
-                max-width: 100%;
+            /* Content areas width */
+            .section__header,
+            .section__content,
+            .section__footer {
+                margin: 0 auto;
+                max-width:  var(--um-size-page-width, 75rem);
+                width: 100%;
             }
 
+            /* Content areas page width */
             .section-inner-width--page-width .section__header,
             .section-inner-width--page-width .section__content,
             .section-inner-width--page-width .section__footer {
@@ -218,6 +227,14 @@ t.styles = v([
                 max-width:  var(--um-size-page-width, 75rem);
                 width: 100%;
             }
+
+            /* Content only 100% */
+            .section-inner-width--full-width .section__content,
+            .section-inner-width--full-bleed .section__content {
+                max-width: 100%;
+            }
+
+             /* Content all areas 100% width */
             .section-inner-width--full-bleed .section__header,
             .section-inner-width--full-bleed .section__content,
             .section-inner-width--full-bleed .section__footer,
@@ -225,7 +242,7 @@ t.styles = v([
             .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);
+                max-width:  var(--um-size-max-section-width, var(--um-size-max-page-width));
                 width: 100%;
             }
             
@@ -304,36 +321,21 @@ t.styles = v([
                 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 {
+                .section--without-header :not(.section-inner-width--full-bleed, .section-inner--bleed-content) .section__content {
                     padding-top: var(--um-space-section-mobile-padding-top, 1.5rem);
                 }
-                .section--without-footer :not(.section-inner-width--full-bleed) .section__content {
+                .section--without-footer :not(.section-inner-width--full-bleed, .section-inner--bleed-content) .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);
@@ -341,7 +343,17 @@ t.styles = v([
                 }
             }
 
-            /* Full bleed side removes content padding */
+            /* All outer page values - mobile content expands full bleed on sides */
+            @media only screen and (max-width: 48.06rem) {
+                .section-inner--bleed-content .section__content {
+                    padding-top: 0;
+                    padding-right: 0;
+                    padding-bottom: 0;
+                    padding-left: 0;
+                }
+            }
+
+            /* Full bleed inner section - remove all content padding */
             .section-inner-width--full-bleed .section__content {
                 padding: 0;
             }
@@ -361,7 +373,7 @@ i([
 ], t.prototype, "compactHeader", 2);
 i([
   o({ type: Boolean })
-], t.prototype, "bleedContent", 2);
+], t.prototype, "mobileBleed", 2);
 i([
   o()
 ], t.prototype, "mobilePadding", 2);
@@ -384,16 +396,16 @@ i([
   o()
 ], t.prototype, "colorText", 2);
 i([
-  h()
+  m()
 ], t.prototype, "_withoutHeader", 2);
 i([
-  h()
+  m()
 ], t.prototype, "_withoutFooter", 2);
 i([
-  h()
+  m()
 ], t.prototype, "_mobilePadding", 2);
 t = i([
-  u(`${S}-section`)
+  f(`${S}-section`)
 ], t);
 export {
   t as Section

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

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

package/dist/components/select/select.d.ts

@@ -0,0 +1,44 @@
+import { LitElement } from 'lit';
+import { EventManager } from '../../classes/event-manager/event-manager';
+import '../disclosure';
+import '../text';
+import '../icon';
+interface Option {
+    id: string;
+    name: string;
+    label: string;
+    value: string;
+    count: number;
+    pluralType: string;
+    disabled: boolean;
+}
+export declare class Select extends LitElement {
+    id: string;
+    options: Option[];
+    label: string;
+    name: string;
+    selectedItem: number;
+    defaultLabel: boolean;
+    colorText: string | undefined;
+    colorBg: string | undefined;
+    border: boolean;
+    borderRadius: string;
+    disabled: boolean;
+    _currentSelectedLabel: string;
+    windowEventManager: EventManager;
+    eventManager: EventManager;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string, any>): void;
+    private _eventsHandler;
+    private _eventsDispatcher;
+    /** Render UX */
+    private _onOptionChange;
+    optionsListClasses(): any;
+    optionsListStyles(): {};
+    optionsList(): import("lit").TemplateResult<1> | undefined;
+    currentOptionLabel(): import("lit").TemplateResult<1> | undefined;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}
+export {};

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

@@ -1,26 +1,23 @@
-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 m } from "../../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
-import { customElement as p } 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 { state as b } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/state.js";
-import { classMap as h } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/class-map.js";
-import { styleMap as v } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/style-map.js";
+import { css as m, LitElement as p, html as c } from "lit";
+import { customElement as b } from "lit/decorators/custom-element.js";
+import { property as i } from "lit/decorators/property.js";
+import { state as h } from "lit/decorators.js";
+import { classMap as v } from "lit/directives/class-map.js";
+import { styleMap as g } from "lit/directives/style-map.js";
 import { EventManager as u } from "../../classes/event-manager/event-manager.js";
-import { global as g } from "../../styles/global.js";
-import { settings as y } from "../../scripts/settings.js";
-import { mergeStyles as f } from "../../scripts/mergeStyles.js";
+import { global as y } from "../../styles/global.js";
+import { settings as f } from "../../scripts/settings.js";
+import { mergeStyles as x } from "../../scripts/mergeStyles.js";
 import "../disclosure/disclosure.js";
 import "../text/text.js";
 import "../icon/icon.js";
-import { css as x } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
 var w = Object.defineProperty, L = Object.getOwnPropertyDescriptor, s = (e, t, a, o) => {
   for (var l = o > 1 ? void 0 : o ? L(t, a) : t, n = e.length - 1, d; n >= 0; n--)
     (d = e[n]) && (l = (o ? d(t, a, l) : d(l)) || l);
   return o && l && w(t, a, l), l;
 };
-const { prefix: _ } = y;
-let r = class extends m {
+const { prefix: _ } = f;
+let r = class extends p {
   constructor() {
     super(...arguments), this.id = "", this.options = [], this.label = "Select box", this.name = "", this.selectedItem = 0, this.defaultLabel = !1, this.border = !1, this.borderRadius = "0", this.disabled = !1, this._currentSelectedLabel = "", this.windowEventManager = new u(window), this.eventManager = new u(this), this._eventsHandler = async (e) => {
       e.type === "click" && !e.composedPath().includes(this) && this._eventsDispatcher(e, "select-close");
@@ -82,58 +79,45 @@ let r = class extends m {
     }), e;
   }
   optionsList() {
-    return c`
-        <fieldset>
-            <legend class="visually-hidden">${this.label}</legend>
-            <ul class="select-list" @change="${this._onOptionChange}">
-                ${this.options.map((e, t) => c`
-                    <li role="option" tabindex="-1">
-                        <input
-                            class="visually-hidden"
-                            type="radio"
-                            id="${e.id}"
-                            name="${e.name}"
-                            value="${e.value}"
-                            data-label="${e.label}"
-                            ?checked="${this.selectedItem === t}"
-                            ?disabled="${e.disabled}"
-                            />
-                        <label for="${e.id}">
-                            <umg-icon icon="check" size="xSmall"></umg-icon>
-                            <umg-text
-                                    as="span"
-                                    variant="bodySm"
-                                    withoutMargin
-                                >
-                                ${e.label}
-                            </umg-text>
-                        </label>
-                    </li>
-                `)}
-            </ul>
-        </fieldset>
-        `;
+    if (Array.isArray(this.options) && this.options.length)
+      return c`
+            <fieldset>
+                <legend class="visually-hidden">${this.label}</legend>
+                <ul class="select-list" @change="${this._onOptionChange}">
+                    ${this.options.map((e, t) => c`
+                        <li role="option" tabindex="-1">
+                            <input
+                                class="visually-hidden"
+                                type="radio"
+                                id="${e.id}"
+                                name="${e.name}"
+                                value="${e.value}"
+                                data-label="${e.label}"
+                                ?checked="${this.selectedItem === t}"
+                                ?disabled="${e.disabled}"
+                                />
+                            <label for="${e.id}">
+                                <umg-icon icon="check" size="xSmall"></umg-icon>
+                                    ${e.label}
+                            </label>
+                        </li>
+                    `)}
+                </ul>
+            </fieldset>
+            `;
   }
   currentOptionLabel() {
     if (this._currentSelectedLabel)
       return c`
-                <umg-text
-                    slot="summary"
-                    class="current-selection"
-                    as="span"
-                    variant="bodySm"
-                    withoutMargin
-                    >
-                    ${this._currentSelectedLabel}
-                </umg-text>
+                ${this._currentSelectedLabel}
             `;
   }
   render() {
     return c`
             <div
                 part="select"
-                class="select ${h(this.optionsListClasses())}"
-                style="${v(this.optionsListStyles())}"
+                class="select ${v(this.optionsListClasses())}"
+                style="${g(this.optionsListStyles())}"
             >
                 <umg-disclosure overlay justifySummary="space-between">
                     <div slot="summary">
@@ -163,9 +147,9 @@ let r = class extends m {
         `;
   }
 };
-r.styles = f([
-  g,
-  x`
+r.styles = x([
+  y,
+  m`
             :host {
                 display: block;
                 width: fit-content
@@ -286,6 +270,7 @@ r.styles = f([
             .select-list label {
                 display: flex;
                 align-items: center;
+                font-size: var(--um-font-size-body-sm, 0.875rem);
                 gap: var(--um-space-12, 0.75rem);
                 padding: 0.375rem var(--space-8, 0.5rem);
                 width: 100%;
@@ -295,10 +280,10 @@ r.styles = f([
                 font-style: italic;
             }
             .select-list li:first-child label {
-                margin-top: var(--um-space-12);
+                margin-top: var(--um-space-8);
             }
             .select-list li:last-child label {
-                margin-bottom: var(--um-space-12);
+                margin-bottom: var(--um-space-8);
             }
             .select-list label:hover {
                 background-color: rgb(var(--um-color-section-text, var(--um-color-base-text,  0,0,0)), 0.05);
@@ -349,10 +334,10 @@ s([
   i({ type: Boolean, reflect: !0 })
 ], r.prototype, "disabled", 2);
 s([
-  b()
+  h()
 ], r.prototype, "_currentSelectedLabel", 2);
 r = s([
-  p(`${_}-select`)
+  b(`${_}-select`)
 ], r);
 export {
   r as Select

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

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

package/dist/components/slider/slide.d.ts

@@ -0,0 +1,8 @@
+import { LitElement } from 'lit';
+export declare class Slide extends LitElement {
+    contentType: string;
+    active: boolean;
+    content(): import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}

package/dist/components/slider/slide.js

@@ -0,0 +1,65 @@
+import { css as d, LitElement as a, html as p } from "lit";
+import { property as c } from "lit/decorators/property.js";
+import { customElement as f } from "lit/decorators/custom-element.js";
+import { global as h } from "../../styles/global.js";
+import { settings as u } from "../../scripts/settings.js";
+import { mergeStyles as v } from "../../scripts/mergeStyles.js";
+var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, n = (m, r, o, s) => {
+  for (var e = s > 1 ? void 0 : s ? _(r, o) : r, i = m.length - 1, l; i >= 0; i--)
+    (l = m[i]) && (e = (s ? l(r, o, e) : l(e)) || e);
+  return s && e && y(r, o, e), e;
+};
+const { prefix: g } = u;
+let t = class extends a {
+  constructor() {
+    super(...arguments), this.contentType = "slider", this.active = !1;
+  }
+  content() {
+    return this.contentType === "slider" ? p`
+                <li class="slide grid__item" part="slide">
+                    <slot></slot>
+                </li>
+            ` : p`
+            <div
+                class="slide grid__item"
+                part="slide"
+                role="group"
+                aria-roledescription="slide"
+                aria-hidden="false"
+                >
+                <slot></slot>
+            </div>
+        `;
+  }
+  render() {
+    return p`
+            ${this.content()}
+        `;
+  }
+};
+t.styles = v([
+  h,
+  d`
+            :host {
+                display: block;
+            }
+            .slide {
+                height: 100%;
+            }
+            ::slotted(*) {
+                height: 100%;
+            }
+        `
+]);
+n([
+  c()
+], t.prototype, "contentType", 2);
+n([
+  c({ type: Boolean })
+], t.prototype, "active", 2);
+t = n([
+  f(`${g}-slide`)
+], t);
+export {
+  t as Slide
+};

package/dist/components/slider/slider-controls.d.ts

@@ -0,0 +1,27 @@
+import { LitElement, nothing } from 'lit';
+export declare class SliderControls extends LitElement {
+    sliderId: string;
+    controlType: string;
+    controlPosition: string;
+    numberOfSlides: number;
+    slidesPerPage: number;
+    currentPage: number;
+    autoPlay: boolean;
+    loopSlides: boolean;
+    playing: boolean;
+    _pauseHold: boolean;
+    _positionInside: boolean;
+    _overflowObserver: IntersectionObserver | undefined;
+    updated(changedProperties: Map<string, any>): void;
+    private _positionControls;
+    private _dispatchControlAction;
+    controlClasses(): any;
+    counterClasses(): any;
+    numberButtons(): import("lit").TemplateResult<1>;
+    dotButtons(): import("lit").TemplateResult<1>;
+    controlVisualType(): import("lit").TemplateResult<1>;
+    autoPlayButtons(): import("lit").TemplateResult<1> | typeof nothing;
+    navigationButton(direction: string): import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1> | undefined;
+    static styles: import("lit").CSSResultArray;
+}