@pushengineering/umg-web-components 2.0.10 → 3.0.2

package/dist/components/slider/slider.js

@@ -1,202 +1,349 @@
-import { css as c, LitElement as _, html as n, nothing as f } from "lit";
-import { customElement as m } from "lit/decorators/custom-element.js";
-import { property as i } from "lit/decorators/property.js";
-import { state as r } from "lit/decorators.js";
-import { classMap as u } from "lit/directives/class-map.js";
-import { styleMap as g } from "lit/directives/style-map.js";
-import { query as y } from "lit/decorators/query.js";
-import { queryAssignedElements as S } from "lit/decorators/query-assigned-elements.js";
-import "../../scripts/polyfills/scrollyfills.js";
-import { debounce as b } from "../../scripts/utilities/debounce.js";
-import { global as k } from "../../styles/global.js";
-import { slider as P } from "./styles/slider.js";
-import { grid as v } from "../../styles/grid.js";
-import { settings as C } from "../../scripts/settings.js";
-import { mergeStyles as w } from "../../scripts/mergeStyles.js";
-import "./slide.js";
-import "./slider-controls.js";
-import "../button-icon/button-icon.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 } = C;
-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);
+import { __decorate } from '../../node_modules/.pnpm/@rollup_plugin-typescript@11.1.6_rollup@4.16.1_tslib@2.6.2_typescript@5.4.5/node_modules/tslib/tslib.es6.js';
+import { css, LitElement, html, nothing } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { query } from 'lit/decorators/query.js';
+import { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';
+import '../../scripts/polyfills/scrollyfills.js';
+import { debounce } from '../../scripts/utilities/debounce.js';
+import { global } from '../../styles/global.js';
+import { slider } from './styles/slider.js';
+import { grid } from '../../styles/grid.js';
+import { settings } from '../../scripts/settings.js';
+import { mergeStyles } from '../../scripts/mergeStyles.js';
+import './slide.js';
+import './slider-controls.js';
+import '../button-icon/button-icon.js';
+
+var Slider_1;
+const { prefix } = settings;
+let Slider = Slider_1 = class Slider extends LitElement {
+    constructor() {
+        super();
+        this.accessibleName = 'Slider accessible name';
+        this.accessibleDescription = '';
+        this.contentType = 'slider';
+        this.controlType = 'counter';
+        this.controlPosition = 'under';
+        this.desktopSlider = false;
+        this.mobileSlider = false;
+        this.peek = false;
+        this.autoPlay = false;
+        this.autoPlaySpeed = 5;
+        this.desktopColumns = 4;
+        this.mobileColumns = '2';
+        this.gaplessColumns = false;
+        this.fill = false;
+        this._totalPages = 1;
+        this._currentPage = 1;
+        this._playing = false;
+        this._sliderItemsToShow = [];
+        this._firstSlide = null;
+        this._secondSlide = null;
+        this._sliderItemOffset = 0;
+        this._slidesPerPage = 1;
+        this._loopSlides = false;
+        this._scrolling = false;
+        this._isSlideVisible = (entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    entry.target.shadowRoot?.querySelector('div')?.setAttribute('aria-hidden', 'false');
+                    entry.target.querySelectorAll('a, button').forEach(elem => {
+                        elem.removeAttribute('tabindex');
+                    });
+                }
+                else {
+                    entry.target.shadowRoot?.querySelector('div')?.setAttribute('aria-hidden', 'true');
+                    entry.target.querySelectorAll('a, button').forEach(elem => {
+                        elem.setAttribute('tabindex', '-1');
+                    });
+                }
+            });
+        };
+        this._sliderId = Math.floor(Math.random() * 100000000).toString();
+        Slider_1.eventTypes.forEach(type => {
+            this.addEventListener(type, this._customEventsHandler);
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.initialise();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this._resizeObserver !== undefined) {
+            this._resizeObserver.disconnect();
+        }
+        if (this._slideVisibleObserver !== undefined) {
+            this._slideVisibleObserver.disconnect();
+        }
+        this._resetAutoplay();
+    }
+    slidesChanged() {
+        this.initialise();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('_sliderItemsToShow')) {
+            this._sliderSetup();
+        }
+    }
+    async initialise() {
+        try {
+            await this.updateComplete;
+        }
+        catch (e) {
+            console.log('Initialise error', e);
+        }
+        if (this._sliderItems.length > 0) {
+            this._sliderItemsToShow = Array.from(this._sliderItems).filter((element) => element.clientWidth > 0);
+        }
+    }
+    _sliderSetup() {
+        if (this._sliderItemsToShow.length < 2)
+            return;
+        this._firstSlide = this._sliderItemsToShow[0];
+        this._secondSlide = this._sliderItemsToShow[1];
+        this._playing = false;
+        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;
+        if (this.contentType === 'slideshow') {
+            this._slideshowSetup();
+        }
+        if (this._resizeObserver === undefined) {
+            const debouncedResizeCallback = debounce(() => this.initialise(), 100);
+            this._resizeObserver = new ResizeObserver(debouncedResizeCallback);
+            this._resizeObserver.observe(this);
+        }
+    }
+    _slideshowSetup() {
+        this.desktopSlider = true;
+        this.mobileSlider = true;
+        this._loopSlides = true;
+        if (this.autoPlay) {
+            this._resetAutoplay();
+            this.play();
+        }
+        this._slideVisibleObserver = new IntersectionObserver(this._isSlideVisible, {
+            root: this,
+            rootMargin: '0px',
+            threshold: 1.0,
+        });
+        this._sliderItems.forEach((item, index) => {
+            this._slideVisibleObserver?.observe(item);
+            const slide = item.shadowRoot?.querySelector('div');
+            slide?.setAttribute('aria-label', `${index + 1} of ${this._sliderItems.length}`);
+        });
+    }
+    _customEventsHandler(e) {
+        e.preventDefault();
+        if (e.type === 'previous-slide') {
+            this._slideNavigation(e.type);
+            this.pause();
+        }
+        if (e.type === 'next-slide') {
+            this._nextButtonClick();
+            this.pause();
+        }
+        if (e.type === 'slide-link') {
+            this._slideLink(e);
+        }
+        if (e.type === 'play-slider') {
+            this.play();
+        }
+        if (e.type === 'pause-slider') {
+            this.pause();
+        }
+        if (e.type === 'pause-over') {
+            this.pausePlay();
+        }
+        if (e.type === 'pause-out') {
+            this.play();
+        }
+    }
+    _updateCurrentPage() {
+        this._currentPage = Math.round(this._slider.scrollLeft / this._sliderItemOffset) + 1;
+    }
+    _scrollEnd() {
+        this._scrolling = false;
+        this._updateCurrentPage();
+    }
+    _resetAutoplay() {
+        clearInterval(this._autoRotate);
+    }
+    _slideNavigation(type) {
+        this._resetAutoplay();
+        this._playing = false;
+        if (this._scrolling && 'onscrollend' in window) {
+            return;
+        }
+        this._scrolling = true;
+        if (type === 'previous-slide') {
+            this._previousButtonClick();
+        }
+        else {
+            this._nextButtonClick();
+        }
+        this._updateCurrentPage();
     }
-    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 = b(() => this.initialise(), 100);
-      this._resizeObserver = new ResizeObserver(e), this._resizeObserver.observe(this);
+    _previousButtonClick() {
+        if (!this._secondSlide || !this._firstSlide)
+            return;
+        const slideOffset = this._secondSlide.offsetLeft - this._firstSlide.offsetLeft;
+        if (this._loopSlides && this._currentPage === 1) {
+            this._slider.scrollTo({ left: slideOffset * this._sliderItemsToShow.length });
+            this._currentPage = this._totalPages;
+            return;
+        }
+        this._slider.scrollTo({
+            left: this._slider.scrollLeft - slideOffset,
+        });
     }
-  }
-  _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;
+    _nextButtonClick() {
+        if (!this._secondSlide || !this._firstSlide)
+            return;
+        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),
+        });
     }
-    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 = false;
+        const slideNumber = parseInt(e.detail.slideNumber);
+        const slidesWidth = this._secondSlide.offsetLeft - this._firstSlide.offsetLeft;
+        const slideScrollPosition = slidesWidth * (slideNumber - 1);
+        this._slider.scrollTo({
+            left: slideScrollPosition,
+        });
     }
-  }
-  _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`
+    _autoRotateSlides() {
+        if (!this._sliderItemsToShow.length || !this._firstSlide)
+            return;
+        const slideScrollPosition = this._currentPage === this._totalPages ? 0 : this._slider.scrollLeft + this._sliderItemsToShow[1].offsetLeft - this._firstSlide.offsetLeft;
+        this._slider.scrollTo({
+            left: slideScrollPosition,
+        });
+    }
+    play() {
+        this._resetAutoplay();
+        if (!this.autoPlay)
+            return;
+        this._playing = true;
+        this._slider.setAttribute('aria-live', 'off');
+        this._autoRotate = setInterval(() => this._autoRotateSlides(), this.autoPlaySpeed * 1000);
+    }
+    pause() {
+        this._resetAutoplay();
+        if (!this.autoPlay)
+            return;
+        this._slider.setAttribute('aria-live', 'polite');
+        this._playing = false;
+    }
+    pausePlay() {
+        this._resetAutoplay();
+        this._slider.setAttribute('aria-live', 'polite');
+    }
+    resumePlay() {
+        if (!this.autoPlay || !this._playing)
+            return;
+        this.play();
+    }
+    sliderComponentClasses() {
+        const classes = {};
+        classes['slider-component--desktop'] = this.desktopSlider;
+        classes['slider-component--tablet'] = this.mobileSlider;
+        classes['slider-controls--top'] = this.contentType === 'slideshow';
+        return classes;
+    }
+    gridClasses() {
+        const classes = {};
+        classes['slider'] = this.mobileSlider || this.desktopSlider;
+        classes['slider--slideshow'] = this.contentType === 'slideshow';
+        classes['slider--desktop'] = this.desktopSlider;
+        classes['slider--tablet'] = this.mobileSlider;
+        classes['grid--gapless'] = this.gaplessColumns;
+        classes['grid--fill'] = this.fill;
+        classes['grid--peek'] = this.peek && this._totalPages > 1;
+        classes['grid--' + this.desktopColumns + '-col-tablet'] = this.desktopColumns < 3;
+        classes['grid--3-col-tablet'] = this.desktopColumns >= 3;
+        classes['grid--' + this.desktopColumns + '-col-desktop'] = true;
+        classes['grid--' + this.mobileColumns + '-col-tablet-down'] = true;
+        return classes;
+    }
+    gridStyles() {
+        let styles = {};
+        if (this.desktopColumns === 6) {
+            styles = {
+                ...styles,
+                '--umg-grid-desktop-columns-width': '16.66%',
+                '--umg-grid-desktop-columns': '6',
+                '--umg-grid-desktop-gaps': '5',
+                '--umg-grid-desktop-peek': '1.5',
+            };
+        }
+        if (this.desktopColumns === 5) {
+            styles = {
+                ...styles,
+                '--umg-grid-desktop-columns-width': '20%',
+                '--umg-grid-desktop-columns': '5',
+                '--umg-grid-desktop-gaps': '4',
+                '--umg-grid-desktop-peek': '2',
+            };
+        }
+        if (this.desktopColumns === 4) {
+            styles = {
+                ...styles,
+                '--umg-grid-desktop-columns-width': '25%',
+                '--umg-grid-desktop-columns': '4',
+                '--umg-grid-desktop-gaps': '3',
+                '--umg-grid-desktop-peek': '2.5',
+            };
+        }
+        if (this.desktopColumns === 3) {
+            styles = {
+                ...styles,
+                '--umg-grid-desktop-columns-width': '33.33%',
+                '--umg-grid-desktop-columns': '3',
+                '--umg-grid-desktop-gaps': '2',
+                '--umg-grid-desktop-peek': '3',
+            };
+        }
+        if (this.desktopColumns === 2) {
+            styles = {
+                ...styles,
+                '--umg-grid-desktop-columns-width': '50%',
+                '--umg-grid-desktop-columns': '2',
+                '--umg-grid-desktop-gaps': '1',
+                '--umg-grid-desktop-peek': '4',
+            };
+        }
+        if (this.desktopColumns === 1) {
+            styles = {
+                ...styles,
+                '--umg-grid-desktop-columns-width': '100%',
+                '--umg-grid-desktop-columns': '1',
+                '--umg-grid-desktop-gaps': '0',
+                '--umg-grid-desktop-peek': '9',
+            };
+        }
+        return styles;
+    }
+    sliderContent() {
+        if (this.contentType === 'slider') {
+            return html `
                 <ul
-                    id=${"Slider-" + this._sliderId}
-                    class="slider-container grid${u(this.gridClasses())}"
+                    id=${'Slider-' + this._sliderId}
+                    class="slider-container grid${classMap(this.gridClasses())}"
                     part="slider-container"
                     role="list"
                     aria-label="${this.accessibleName}"
@@ -204,10 +351,12 @@ let t = class extends _ {
                     >
                     <slot @slotchange=${this.slidesChanged}></slot>
                 </ul>
-            ` : n`
+            `;
+        }
+        return html `
             <div
-                id=${"Slider-" + this._sliderId}
-                class="slider-container grid${u(this.gridClasses())}"
+                id=${'Slider-' + this._sliderId}
+                class="slider-container grid${classMap(this.gridClasses())}"
                 part="slider-container"
                 role="region"
                 aria-live="polite"
@@ -223,11 +372,12 @@ let t = class extends _ {
                 <slot @slotchange=${this.slidesChanged}></slot>
             </div>
         `;
-  }
-  sliderControls() {
-    return this.desktopSlider || this.mobileSlider ? n`
+    }
+    sliderControls() {
+        if (this.desktopSlider || this.mobileSlider) {
+            return html `
                 <umg-slider-controls
-                    sliderId=${"Slider-" + this._sliderId}
+                    sliderId=${'Slider-' + this._sliderId}
                     controlType=${this.controlType}
                     controlPosition=${this.controlPosition}
                     slidesPerPage=${this._slidesPerPage}
@@ -238,134 +388,136 @@ let t = class extends _ {
                     ?loopSlides=${this._loopSlides}
                 >
                 </umg-slider-controls>
-            ` : f;
-  }
-  render() {
-    return n`
+            `;
+        }
+        return nothing;
+    }
+    render() {
+        return html `
         <div
-            class="slider-component slider-mobile-gutter${u(this.sliderComponentClasses())}"
-            style="${g(this.gridStyles())}"
+            class="slider-component slider-mobile-gutter${classMap(this.sliderComponentClasses())}"
+            style="${styleMap(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"
+Slider.eventTypes = [
+    'previous-slide',
+    'next-slide',
+    'slide-link',
+    'pause-slider',
+    'play-slider',
+    'pause-over',
+    'pause-out',
 ];
-t.styles = w([
-  k,
-  c`
+Slider.styles = mergeStyles([
+    global,
+    css `
             :host {
                 display: block;
                 width: 100%;
             }
         `,
-  v,
-  P
+    grid,
+    slider,
 ]);
-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([
-  S()
-], t.prototype, "_sliderItems", 2);
-s([
-  y('[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
-};
+__decorate([
+    property()
+], Slider.prototype, "accessibleName", void 0);
+__decorate([
+    property()
+], Slider.prototype, "accessibleDescription", void 0);
+__decorate([
+    property()
+], Slider.prototype, "contentType", void 0);
+__decorate([
+    property()
+], Slider.prototype, "controlType", void 0);
+__decorate([
+    property()
+], Slider.prototype, "controlPosition", void 0);
+__decorate([
+    property({ type: Boolean })
+], Slider.prototype, "desktopSlider", void 0);
+__decorate([
+    property({ type: Boolean })
+], Slider.prototype, "mobileSlider", void 0);
+__decorate([
+    property({ type: Boolean })
+], Slider.prototype, "peek", void 0);
+__decorate([
+    property({ type: Boolean })
+], Slider.prototype, "autoPlay", void 0);
+__decorate([
+    property({ type: Number })
+], Slider.prototype, "autoPlaySpeed", void 0);
+__decorate([
+    property({ type: Number })
+], Slider.prototype, "desktopColumns", void 0);
+__decorate([
+    property()
+], Slider.prototype, "mobileColumns", void 0);
+__decorate([
+    property({ type: Boolean })
+], Slider.prototype, "gaplessColumns", void 0);
+__decorate([
+    property({ type: Boolean })
+], Slider.prototype, "fill", void 0);
+__decorate([
+    state()
+], Slider.prototype, "_sliderId", void 0);
+__decorate([
+    property({ type: Number })
+], Slider.prototype, "_totalPages", void 0);
+__decorate([
+    queryAssignedElements()
+], Slider.prototype, "_sliderItems", void 0);
+__decorate([
+    query('[id^="Slider-"]')
+], Slider.prototype, "_slider", void 0);
+__decorate([
+    state()
+], Slider.prototype, "_currentPage", void 0);
+__decorate([
+    state()
+], Slider.prototype, "_playing", void 0);
+__decorate([
+    state()
+], Slider.prototype, "_sliderItemsToShow", void 0);
+__decorate([
+    state()
+], Slider.prototype, "_firstSlide", void 0);
+__decorate([
+    state()
+], Slider.prototype, "_secondSlide", void 0);
+__decorate([
+    state()
+], Slider.prototype, "_sliderItemOffset", void 0);
+__decorate([
+    state()
+], Slider.prototype, "_slidesPerPage", void 0);
+__decorate([
+    state()
+], Slider.prototype, "_loopSlides", void 0);
+__decorate([
+    state()
+], Slider.prototype, "_scrolling", void 0);
+__decorate([
+    state()
+], Slider.prototype, "_autoRotate", void 0);
+__decorate([
+    state()
+], Slider.prototype, "_slideVisibleObserver", void 0);
+__decorate([
+    state()
+], Slider.prototype, "_resizeObserver", void 0);
+Slider = Slider_1 = __decorate([
+    customElement(`${prefix}-slider`)
+], Slider);
+
+export { Slider };
+//# sourceMappingURL=slider.js.map