@pushengineering/umg-web-components 2.0.0

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

@@ -0,0 +1,374 @@
+import "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as n, nothing as c } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
+import { LitElement as _ } 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 { state as r } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/state.js";
+import { query as f } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/query.js";
+import { queryAssignedElements as g } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+import { classMap as u } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/class-map.js";
+import { styleMap as y } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/style-map.js";
+import "../../scripts/polyfills/scrollyfills.js";
+import { debounce as S } from "../../scripts/utilities/debounce.js";
+import { global as b } from "../../styles/global.js";
+import { slider as k } from "./styles/slider.js";
+import { grid as P } from "../../styles/grid.js";
+import { settings as v } from "../../scripts/settings.js";
+import { mergeStyles as C } from "../../scripts/mergeStyles.js";
+import "./slide.js";
+import "./slider-controls.js";
+import "../button-icon/button-icon.js";
+import { css as w } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
+var I = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, s = (e, o, a, d) => {
+  for (var l = d > 1 ? void 0 : d ? $(o, a) : o, h = e.length - 1, p; h >= 0; h--)
+    (p = e[h]) && (l = (d ? p(o, a, l) : p(l)) || l);
+  return d && l && I(o, a, l), l;
+};
+const { prefix: T } = v;
+let t = class extends _ {
+  constructor() {
+    super(), this.accessibleName = "Slider accessible name", this.accessibleDescription = "", this.contentType = "slider", this.controlType = "counter", this.controlPosition = "under", this.desktopSlider = !1, this.mobileSlider = !1, this.peek = !1, this.autoPlay = !1, this.autoPlaySpeed = 5, this.desktopColumns = 4, this.mobileColumns = "2", this.gaplessColumns = !1, this.fill = !1, this._totalPages = 1, this._currentPage = 1, this._playing = !1, this._sliderItemsToShow = [], this._firstSlide = null, this._secondSlide = null, this._sliderItemOffset = 0, this._slidesPerPage = 1, this._loopSlides = !1, this._scrolling = !1, this._isSlideVisible = (e) => {
+      e.forEach((o) => {
+        var a, d, l, h;
+        o.isIntersecting ? ((d = (a = o.target.shadowRoot) == null ? void 0 : a.querySelector("div")) == null || d.setAttribute("aria-hidden", "false"), o.target.querySelectorAll("a, button").forEach((p) => {
+          p.removeAttribute("tabindex");
+        })) : ((h = (l = o.target.shadowRoot) == null ? void 0 : l.querySelector("div")) == null || h.setAttribute("aria-hidden", "true"), o.target.querySelectorAll("a, button").forEach((p) => {
+          p.setAttribute("tabindex", "-1");
+        }));
+      });
+    }, this._sliderId = Math.floor(Math.random() * 1e8).toString(), t.eventTypes.forEach((e) => {
+      this.addEventListener(e, this._customEventsHandler);
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.initialise();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._resizeObserver !== void 0 && this._resizeObserver.disconnect(), this._slideVisibleObserver !== void 0 && this._slideVisibleObserver.disconnect(), this._resetAutoplay();
+  }
+  slidesChanged() {
+    this.initialise();
+  }
+  updated(e) {
+    e.has("_sliderItemsToShow") && this._sliderSetup();
+  }
+  async initialise() {
+    try {
+      await this.updateComplete;
+    } catch (e) {
+      console.log("Initialise error", e);
+    }
+    this._sliderItems.length > 0 && (this._sliderItemsToShow = Array.from(this._sliderItems).filter(
+      (e) => e.clientWidth > 0
+    ));
+  }
+  _sliderSetup() {
+    if (!(this._sliderItemsToShow.length < 2) && (this._firstSlide = this._sliderItemsToShow[0], this._secondSlide = this._sliderItemsToShow[1], this._playing = !1, this._sliderItemOffset = this._secondSlide.offsetLeft - this._firstSlide.offsetLeft, this._slidesPerPage = this._sliderItemOffset > 0 ? Math.round(this._slider.clientWidth / this._sliderItemOffset) : 0, this._totalPages = this._slidesPerPage > 0 ? this._sliderItemsToShow.length - this._slidesPerPage + 1 : 1, this.contentType === "slideshow" && this._slideshowSetup(), this._resizeObserver === void 0)) {
+      const e = S(() => this.initialise(), 100);
+      this._resizeObserver = new ResizeObserver(e), this._resizeObserver.observe(this);
+    }
+  }
+  _slideshowSetup() {
+    this.desktopSlider = !0, this.mobileSlider = !0, this._loopSlides = !0, this.autoPlay && (this._resetAutoplay(), this.play()), this._slideVisibleObserver = new IntersectionObserver(this._isSlideVisible, {
+      root: this,
+      rootMargin: "0px",
+      threshold: 1
+    }), this._sliderItems.forEach((e, o) => {
+      var d, l;
+      (d = this._slideVisibleObserver) == null || d.observe(e);
+      const a = (l = e.shadowRoot) == null ? void 0 : l.querySelector("div");
+      a == null || a.setAttribute("aria-label", `${o + 1} of ${this._sliderItems.length}`);
+    });
+  }
+  _customEventsHandler(e) {
+    e.preventDefault(), e.type === "previous-slide" && (this._slideNavigation(e.type), this.pause()), e.type === "next-slide" && (this._nextButtonClick(), this.pause()), e.type === "slide-link" && this._slideLink(e), e.type === "play-slider" && this.play(), e.type === "pause-slider" && this.pause(), e.type === "pause-over" && this.pausePlay(), e.type === "pause-out" && this.play();
+  }
+  _updateCurrentPage() {
+    this._currentPage = Math.round(this._slider.scrollLeft / this._sliderItemOffset) + 1;
+  }
+  _scrollEnd() {
+    this._scrolling = !1, this._updateCurrentPage();
+  }
+  _resetAutoplay() {
+    clearInterval(this._autoRotate);
+  }
+  _slideNavigation(e) {
+    this._resetAutoplay(), this._playing = !1, !(this._scrolling && "onscrollend" in window) && (this._scrolling = !0, e === "previous-slide" ? this._previousButtonClick() : this._nextButtonClick(), this._updateCurrentPage());
+  }
+  _previousButtonClick() {
+    if (!this._secondSlide || !this._firstSlide)
+      return;
+    const e = this._secondSlide.offsetLeft - this._firstSlide.offsetLeft;
+    if (this._loopSlides && this._currentPage === 1) {
+      this._slider.scrollTo({ left: e * this._sliderItemsToShow.length }), this._currentPage = this._totalPages;
+      return;
+    }
+    this._slider.scrollTo({
+      left: this._slider.scrollLeft - e
+    });
+  }
+  _nextButtonClick() {
+    if (!(!this._secondSlide || !this._firstSlide)) {
+      if (this._loopSlides && this._currentPage === this._totalPages) {
+        this._slider.scrollTo({ left: 0 }), this._currentPage = 1;
+        return;
+      }
+      this._slider.scrollTo({
+        left: this._slider.scrollLeft + (this._secondSlide.offsetLeft - this._firstSlide.offsetLeft)
+      });
+    }
+  }
+  _slideLink(e) {
+    if (!this._secondSlide || !this._firstSlide)
+      return;
+    this._resetAutoplay(), this._playing = !1;
+    const o = parseInt(e.detail.slideNumber), d = (this._secondSlide.offsetLeft - this._firstSlide.offsetLeft) * (o - 1);
+    this._slider.scrollTo({
+      left: d
+    });
+  }
+  _autoRotateSlides() {
+    if (!this._sliderItemsToShow.length || !this._firstSlide)
+      return;
+    const e = this._currentPage === this._totalPages ? 0 : this._slider.scrollLeft + this._sliderItemsToShow[1].offsetLeft - this._firstSlide.offsetLeft;
+    this._slider.scrollTo({
+      left: e
+    });
+  }
+  play() {
+    this._resetAutoplay(), this.autoPlay && (this._playing = !0, this._slider.setAttribute("aria-live", "off"), this._autoRotate = setInterval(() => this._autoRotateSlides(), this.autoPlaySpeed * 1e3));
+  }
+  pause() {
+    this._resetAutoplay(), this.autoPlay && (this._slider.setAttribute("aria-live", "polite"), this._playing = !1);
+  }
+  pausePlay() {
+    this._resetAutoplay(), this._slider.setAttribute("aria-live", "polite");
+  }
+  resumePlay() {
+    !this.autoPlay || !this._playing || this.play();
+  }
+  sliderComponentClasses() {
+    const e = {};
+    return e["slider-component--desktop"] = this.desktopSlider, e["slider-component--tablet"] = this.mobileSlider, e["slider-controls--top"] = this.contentType === "slideshow", e;
+  }
+  gridClasses() {
+    const e = {};
+    return e.slider = this.mobileSlider || this.desktopSlider, e["slider--slideshow"] = this.contentType === "slideshow", e["slider--desktop"] = this.desktopSlider, e["slider--tablet"] = this.mobileSlider, e["grid--gapless"] = this.gaplessColumns, e["grid--fill"] = this.fill, e["grid--peek"] = this.peek && this._totalPages > 1, e["grid--" + this.desktopColumns + "-col-tablet"] = this.desktopColumns < 3, e["grid--3-col-tablet"] = this.desktopColumns >= 3, e["grid--" + this.desktopColumns + "-col-desktop"] = !0, e["grid--" + this.mobileColumns + "-col-tablet-down"] = !0, e;
+  }
+  gridStyles() {
+    let e = {};
+    return this.desktopColumns === 6 && (e = {
+      ...e,
+      "--um-grid-desktop-columns-width": "16.66%",
+      "--um-grid-desktop-columns": "6",
+      "--um-grid-desktop-gaps": "5",
+      "--um-grid-desktop-peek": "1.5"
+    }), this.desktopColumns === 5 && (e = {
+      ...e,
+      "--um-grid-desktop-columns-width": "20%",
+      "--um-grid-desktop-columns": "5",
+      "--um-grid-desktop-gaps": "4",
+      "--um-grid-desktop-peek": "2"
+    }), this.desktopColumns === 4 && (e = {
+      ...e,
+      "--um-grid-desktop-columns-width": "25%",
+      "--um-grid-desktop-columns": "4",
+      "--um-grid-desktop-gaps": "3",
+      "--um-grid-desktop-peek": "2.5"
+    }), this.desktopColumns === 3 && (e = {
+      ...e,
+      "--um-grid-desktop-columns-width": "33.33%",
+      "--um-grid-desktop-columns": "3",
+      "--um-grid-desktop-gaps": "2",
+      "--um-grid-desktop-peek": "3"
+    }), this.desktopColumns === 2 && (e = {
+      ...e,
+      "--um-grid-desktop-columns-width": "50%",
+      "--um-grid-desktop-columns": "2",
+      "--um-grid-desktop-gaps": "1",
+      "--um-grid-desktop-peek": "4"
+    }), this.desktopColumns === 1 && (e = {
+      ...e,
+      "--um-grid-desktop-columns-width": "100%",
+      "--um-grid-desktop-columns": "1",
+      "--um-grid-desktop-gaps": "0",
+      "--um-grid-desktop-peek": "9"
+    }), e;
+  }
+  sliderContent() {
+    return this.contentType === "slider" ? n`
+                <ul
+                    id=${"Slider-" + this._sliderId}
+                    class="slider-container grid${u(this.gridClasses())}"
+                    part="slider-container"
+                    role="list"
+                    aria-label="${this.accessibleName}"
+                    @scrollend="${this._scrollEnd}"
+                    >
+                    <slot @slotchange=${this.slidesChanged}></slot>
+                </ul>
+            ` : n`
+            <div
+                id=${"Slider-" + this._sliderId}
+                class="slider-container grid${u(this.gridClasses())}"
+                part="slider-container"
+                role="region"
+                aria-live="polite"
+                aria-atomic="true"
+                aria-label="${this.accessibleName}"
+                aria-description="${this.accessibleDescription}"
+                @scrollend="${this._scrollEnd}"
+                @mouseover="${this.pausePlay}"
+                @mouseout="${this.resumePlay}"
+                @focusin="${this.pausePlay}"
+                @focusout="${this.resumePlay}"
+                >
+                <slot @slotchange=${this.slidesChanged}></slot>
+            </div>
+        `;
+  }
+  sliderControls() {
+    return this.desktopSlider || this.mobileSlider ? n`
+                <umg-slider-controls
+                    sliderId=${"Slider-" + this._sliderId}
+                    controlType=${this.controlType}
+                    controlPosition=${this.controlPosition}
+                    slidesPerPage=${this._slidesPerPage}
+                    numberOfSlides=${this._totalPages}
+                    currentPage=${this._currentPage}
+                    ?playing=${this._playing}
+                    ?autoPlay=${this.autoPlay}
+                    ?loopSlides=${this._loopSlides}
+                >
+                </umg-slider-controls>
+            ` : c;
+  }
+  render() {
+    return n`
+        <div
+            class="slider-component slider-mobile-gutter${u(this.sliderComponentClasses())}"
+            style="${y(this.gridStyles())}"
+            part="slider"
+            >
+            ${this.sliderContent()}
+            ${this.sliderControls()}
+        </div>
+      `;
+  }
+};
+t.eventTypes = [
+  "previous-slide",
+  "next-slide",
+  "slide-link",
+  "pause-slider",
+  "play-slider",
+  "pause-over",
+  "pause-out"
+];
+t.styles = C([
+  b,
+  w`
+            :host {
+                display: block;
+                width: 100%;
+            }
+        `,
+  P,
+  k
+]);
+s([
+  i()
+], t.prototype, "accessibleName", 2);
+s([
+  i()
+], t.prototype, "accessibleDescription", 2);
+s([
+  i()
+], t.prototype, "contentType", 2);
+s([
+  i()
+], t.prototype, "controlType", 2);
+s([
+  i()
+], t.prototype, "controlPosition", 2);
+s([
+  i({ type: Boolean })
+], t.prototype, "desktopSlider", 2);
+s([
+  i({ type: Boolean })
+], t.prototype, "mobileSlider", 2);
+s([
+  i({ type: Boolean })
+], t.prototype, "peek", 2);
+s([
+  i({ type: Boolean })
+], t.prototype, "autoPlay", 2);
+s([
+  i({ type: Number })
+], t.prototype, "autoPlaySpeed", 2);
+s([
+  i({ type: Number })
+], t.prototype, "desktopColumns", 2);
+s([
+  i()
+], t.prototype, "mobileColumns", 2);
+s([
+  i({ type: Boolean })
+], t.prototype, "gaplessColumns", 2);
+s([
+  i({ type: Boolean })
+], t.prototype, "fill", 2);
+s([
+  r()
+], t.prototype, "_sliderId", 2);
+s([
+  i({ type: Number })
+], t.prototype, "_totalPages", 2);
+s([
+  g()
+], t.prototype, "_sliderItems", 2);
+s([
+  f('[id^="Slider-"]')
+], t.prototype, "_slider", 2);
+s([
+  r()
+], t.prototype, "_currentPage", 2);
+s([
+  r()
+], t.prototype, "_playing", 2);
+s([
+  r()
+], t.prototype, "_sliderItemsToShow", 2);
+s([
+  r()
+], t.prototype, "_firstSlide", 2);
+s([
+  r()
+], t.prototype, "_secondSlide", 2);
+s([
+  r()
+], t.prototype, "_sliderItemOffset", 2);
+s([
+  r()
+], t.prototype, "_slidesPerPage", 2);
+s([
+  r()
+], t.prototype, "_loopSlides", 2);
+s([
+  r()
+], t.prototype, "_scrolling", 2);
+s([
+  r()
+], t.prototype, "_autoRotate", 2);
+s([
+  r()
+], t.prototype, "_slideVisibleObserver", 2);
+s([
+  r()
+], t.prototype, "_resizeObserver", 2);
+t = s([
+  m(`${T}-slider`)
+], t);
+export {
+  t as Slider
+};

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

@@ -0,0 +1,98 @@
+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 t } from "../../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
+const s = t`
+    .slider-controls {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: var(--um-space-8, 0.5rem) 0;
+        font-family: var(--um-font-family-body, Roboto, Arial, Helvetica, sans-serif);
+    }
+    @media screen and (min-width: 48.06rem) {
+        .slider-controls {
+            margin-top: var(--um-space-16);
+            gap: 1rem
+        }
+    }
+    .slider-counter {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: var(--um-font-size-body-xs, 0.75rem);
+        font-weight: var(--um-font-weight-light, 300);
+    }
+    .slider-counter__link {
+        font-weight: var(--um-font-weight-light, 300);
+        padding: var(--um-space-12, 0.75rem) var(--um-space-8, 0.5rem);
+    }
+    @media screen and (min-width: 48.06rem) {
+        .slider-counter__link {
+            font-weight: var(--um-font-weight-light, 300);
+            padding: var(--um-space-12, 0.75rem);
+        }
+    }
+    .slider-counter__link .dot {
+        display: block;
+        background-color: transparent;
+        border: 0.06rem solid rgba(var(--um-color-section-text, var(--um-color-base-text, 62,62,62), .5));
+        border-radius: 50%;
+        padding: 0;
+        width: var(--um-space-8, 0.5rem);
+        height: var(--um-space-8, 0.5rem);
+    }
+    .slider-counter__link--active .dot {
+        background-color: rgb(var(--um-color-section-text, var(--um-color-base-text, 62,62,62)));
+    }
+
+    /* Position */
+    .slider-controls--inside,
+    .slider-controls--outside {
+        height: 0.1px; /* required by outside button intersection observer */
+        margin: 0;
+        padding: 0;
+    }
+    .slider-controls--inside .slider-counter,
+    .slider-controls--outside .slider-counter,
+    .slider-controls--inside .autoplay-buttons,
+    .slider-controls--outside .autoplay-buttons {
+        display: none;
+    }
+    .slider-controls--inside .previous-button,
+    .slider-controls--inside .next-button,
+    .slider-controls--outside .previous-button,
+    .slider-controls--outside .next-button {
+        position: absolute;
+        z-index: 1000;
+        top: 30%;
+        transform: translateY(-50%);
+    }
+    .slider-controls--inside .previous-button,
+    .slider-controls--outside .previous-button {
+        left: 0.5rem
+    }
+    .slider-controls--inside .next-button,
+    .slider-controls--outside .next-button {
+        right: 0.5rem
+    }
+    @media screen and (min-width: 30rem) {
+        .slider-controls--inside .previous-button,
+        .slider-controls--inside .next-button,
+        .slider-controls--outside .previous-button,
+        .slider-controls--outside .next-button {
+            top: 50%;
+        }
+    }
+    @media screen and (min-width: 64.06rem) {
+        .slider-controls--outside .previous-button {
+            left: -5rem
+        }
+        .slider-controls--outside .next-button {
+            right: -5rem
+        }
+    }
+`;
+export {
+  s as controls
+};