@pushengineering/umg-web-components 2.0.0

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

@@ -0,0 +1,359 @@
+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 { 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 "../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 {
+  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");
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.windowEventManager.addEventListener("click", this._eventsHandler), this.windowEventManager.addEventListener("change", this._eventsHandler);
+  }
+  disconnectedCallback() {
+    this.windowEventManager.removeEventListener("click", this._eventsHandler), super.disconnectedCallback();
+  }
+  updated(e) {
+    if (e.has("defaultLabel"))
+      if (this.defaultLabel) {
+        if (this.options && this.options.length > this.selectedItem) {
+          const t = this.options[this.selectedItem];
+          this._currentSelectedLabel = t ? t.label : "";
+        }
+      } else
+        this._currentSelectedLabel = "";
+  }
+  _eventsDispatcher(e, t) {
+    if (!t)
+      throw new Error("Missing custom event type");
+    const a = { bubbles: !0, composed: !0 };
+    let o = {};
+    t == "select-close" && (t = "disclosure", o = { eventName: "close" }, this.eventManager.dispatchCustomEvent(t, o, a)), t === "option-change" && (t = "change", o = {
+      eventName: this.name,
+      fieldId: this.id,
+      value: e.target.value
+    }, this.windowEventManager.dispatchCustomEvent(t, o, a));
+  }
+  /** Render UX */
+  _onOptionChange(e) {
+    const t = e.target.dataset.label;
+    t && (this._currentSelectedLabel = t, this._eventsDispatcher(e, "select-close"), this._eventsDispatcher(e, "option-change"));
+  }
+  optionsListClasses() {
+    return {
+      "select--disabled": this.disabled,
+      "select--border": this.border
+    };
+  }
+  optionsListStyles() {
+    let e = {};
+    return this.colorText && (e = {
+      ...e,
+      "--um-color-input-text": this.colorText,
+      "--um-color-icon-text": this.colorText,
+      "--um-color-disclosure-text": this.colorText,
+      "--um-color-input-border": this.colorText
+    }), this.colorBg && (e = {
+      ...e,
+      "--um-color-input-bg": this.colorBg,
+      "--um-color-disclosure-bg": this.colorBg
+    }), this.borderRadius !== "0" && (e = {
+      ...e,
+      "--um-border-input-radius": "var(--um-border-radius-" + this.borderRadius + ")"
+    }), 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>
+        `;
+  }
+  currentOptionLabel() {
+    if (this._currentSelectedLabel)
+      return c`
+                <umg-text
+                    slot="summary"
+                    class="current-selection"
+                    as="span"
+                    variant="bodySm"
+                    withoutMargin
+                    >
+                    ${this._currentSelectedLabel}
+                </umg-text>
+            `;
+  }
+  render() {
+    return c`
+            <div
+                part="select"
+                class="select ${h(this.optionsListClasses())}"
+                style="${v(this.optionsListStyles())}"
+            >
+                <umg-disclosure overlay justifySummary="space-between">
+                    <div slot="summary">
+                        <umg-text
+                            class="label"
+                            as="span"
+                            variant="bodySm"
+                            withoutMargin
+                            >
+                            ${this.label} 
+                        </umg-text>
+                        ${this.currentOptionLabel()}
+                    </div>
+                    <umg-icon
+                        slot="icon"
+                        part="carat"
+                        class="carat"
+                        icon="chevron-down"
+                        size="xSmall"
+                        >
+                    </umg-icon>
+                    <div slot="content" class="content">
+                        ${this.optionsList()}
+                    </div>
+                </umg-disclosure>
+        </div>
+        `;
+  }
+};
+r.styles = f([
+  g,
+  x`
+            :host {
+                display: block;
+                width: fit-content
+            }
+
+            /* Select box */
+            .select {
+                color: rgb(var(--um-color-input-text, var(--um-color-section-trext, var(--um-color-base-text, 0,0,0))), 1);
+
+                width: fit-content;
+            }
+            .select.select--disabled {
+                opacity: 0.4;
+                pointer-events: none;
+                cursor: default;
+            }
+            umg-disclosure::part(disclosure-summary) { 
+                background-color: rgb(var(--um-color-input-bg, var(--color-section-bg, var(--um-color-base-bg, 255,255,255))), 1);
+            }
+            .select--border umg-disclosure::part(disclosure-summary) {
+                border: var(--um-border-input-width, 0.0625rem) solid rgba(var(--um-color-input-border, var(--um-color-input-text, var(--um-color-section-text, 0,0,0))), var(--um-opacity-input-border, 1));
+                border-radius: var(--um-border-input-radius, 0);
+                padding: 0 var(--um-space-16, 1rem);
+                min-width: 14rem;
+            }
+            .select--border umg-disclosure::part(disclosure-content) {
+                border-radius: var(--um-border-input-radius, 0);
+            }
+
+            /* Disclosure */
+            umg-disclosure::part(disclosure-summary) {
+                padding: 0 var(--um-space-12, 0.75rem);
+                line-height: 0;
+            }
+            umg-disclosure::part(disclosure-drawer) {
+                top: 3rem;
+            }
+            umg-disclosure .current-selection {
+                padding-left: var(--um-space-4, 0.25rem);
+                opacity: 0.5;
+            }
+            umg-disclosure .content {
+                overflow: hidden;
+                border: var(--um-border-input-width, 0.0625rem) solid rgba(var(--um-color-input-border, var(--um-color-input-text, var(--um-color-section-text, 0,0,0))), var(--um-opacity-input-border, 1));
+                border-radius: var(--um-border-input-radius, 0);
+            }
+
+            /* Form elements */
+            fieldset {
+                border: none;
+                padding: 0;
+                margin: 0;
+            }
+
+            /* Select box list/group */
+            .select-list {
+                list-style: none;
+                margin: 0;
+                padding: 0;
+                max-height: 15rem;
+            }
+            .select-list {
+                min-width: 10rem;
+                overflow-y: auto;
+            }
+            .select-list li {
+                gap: var(--um-space-12);
+            }
+            .select-list li {
+                display: flex;
+                align-items: center;
+            }
+
+            /* Select box scrollbar */
+            .select-list::-webkit-scrollbar {
+                width: 0.25rem;
+            }
+            .select-list::-webkit-scrollbar-track {
+                background: rgb(var(--color-section-text, var(--um-color-base-text, 0,0,0)), 0.05);
+                border-radius: var(--um-border-radius-30);
+            }
+            .select-list::-webkit-scrollbar-thumb {
+                background: rgb(var(--color-section-text, var(--um-color-base-text, 0,0,0)), 0.1);
+                border-radius: var(--um-border-radius-30);
+            }
+
+            /* Inputs */
+            .select-list input[type=radio] ~ label umg-icon {
+                visibility: hidden;
+            }
+            .select-list input[type=radio]:checked ~ label umg-icon {
+                visibility: visible;
+            }
+            .select-list input[type=radio]:focus-visible ~ label {
+                color: red;
+            }
+            .select-list input[type=radio]:focus ~ label {
+                color: red;
+            }
+            .select-list input[type=checkbox] ~ label umg-icon {
+                visibility: visible;
+                border: var(--um-border-input-width, 0.0625rem) solid rgba(var(--um-color-input-border, var(--um-color-input-text, var(--um-color-section-text, 0,0,0))), var(--um-opacity-input-border, 1));
+                border-radius: min(calc(var(--um-border-input-radius, 0) * 0.5), 0.3rem);
+                padding: 0.0625rem;
+            }
+            .select-list input[type=checkbox]:checked ~ label umg-icon::part(icon) {
+                visibility: visible;
+            }
+            .select-list input[type=checkbox]:not(:checked) ~ label umg-icon::part(icon) {
+                visibility: hidden;
+            }
+            
+            /* Input labels */
+            .select-list li,
+            .select-list label {
+                cursor: pointer;
+            }
+            .select-list label {
+                display: flex;
+                align-items: center;
+                gap: var(--um-space-12, 0.75rem);
+                padding: 0.375rem var(--space-8, 0.5rem);
+                width: 100%;
+            }
+            .select-list label .count {
+                opacity: 0.4;
+                font-style: italic;
+            }
+            .select-list li:first-child label {
+                margin-top: var(--um-space-12);
+            }
+            .select-list li:last-child label {
+                margin-bottom: var(--um-space-12);
+            }
+            .select-list label:hover {
+                background-color: rgb(var(--um-color-section-text, var(--um-color-base-text,  0,0,0)), 0.05);
+            }
+
+            /** Mobile styles */
+            @media screen and (max-width: 48rem) {
+                :host, .select {
+                    width: 100%;
+                }
+                .select {
+                    padding: 0;
+                }
+            }
+        `
+]);
+s([
+  i()
+], r.prototype, "id", 2);
+s([
+  i({ type: Array })
+], r.prototype, "options", 2);
+s([
+  i()
+], r.prototype, "label", 2);
+s([
+  i()
+], r.prototype, "name", 2);
+s([
+  i({ type: Number })
+], r.prototype, "selectedItem", 2);
+s([
+  i({ type: Boolean })
+], r.prototype, "defaultLabel", 2);
+s([
+  i()
+], r.prototype, "colorText", 2);
+s([
+  i()
+], r.prototype, "colorBg", 2);
+s([
+  i({ type: Boolean })
+], r.prototype, "border", 2);
+s([
+  i()
+], r.prototype, "borderRadius", 2);
+s([
+  i({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled", 2);
+s([
+  b()
+], r.prototype, "_currentSelectedLabel", 2);
+r = s([
+  p(`${_}-select`)
+], r);
+export {
+  r as Select
+};

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

@@ -0,0 +1,68 @@
+import "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as p } 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 { property as a } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/property.js";
+import { customElement as d } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { global as f } from "../../styles/global.js";
+import { settings as h } from "../../scripts/settings.js";
+import { mergeStyles as u } from "../../scripts/mergeStyles.js";
+import { css as v } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
+var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, n = (m, r, o, s) => {
+  for (var t = s > 1 ? void 0 : s ? _(r, o) : r, i = m.length - 1, l; i >= 0; i--)
+    (l = m[i]) && (t = (s ? l(r, o, t) : l(t)) || t);
+  return s && t && y(r, o, t), t;
+};
+const { prefix: g } = h;
+let e = class extends c {
+  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()}
+        `;
+  }
+};
+e.styles = u([
+  f,
+  v`
+            :host {
+                display: block;
+            }
+            .slide {
+                height: 100%;
+            }
+            ::slotted(*) {
+                height: 100%;
+            }
+        `
+]);
+n([
+  a()
+], e.prototype, "contentType", 2);
+n([
+  a({ type: Boolean })
+], e.prototype, "active", 2);
+e = n([
+  d(`${g}-slide`)
+], e);
+export {
+  e as Slide
+};

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

@@ -0,0 +1,258 @@
+import "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as o, nothing as b } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
+import { LitElement as f } from "../../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
+import { property as l } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/property.js";
+import { customElement as y } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { state as m } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/state.js";
+import { map as c } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/map.js";
+import { range as d } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/range.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 _ } from "../../styles/global.js";
+import { controls as v } from "./styles/controls.js";
+import { linkState as g } from "../../styles/link.js";
+import { settings as $ } from "../../scripts/settings.js";
+import { mergeStyles as P } from "../../scripts/mergeStyles.js";
+var C = Object.defineProperty, k = Object.getOwnPropertyDescriptor, i = (t, s, r, n) => {
+  for (var u = n > 1 ? void 0 : n ? k(s, r) : s, a = t.length - 1, p; a >= 0; a--)
+    (p = t[a]) && (u = (n ? p(s, r, u) : p(u)) || u);
+  return n && u && C(s, r, u), u;
+};
+const { prefix: O } = $;
+let e = class extends f {
+  constructor() {
+    super(...arguments), this.sliderId = "", this.controlType = "counter", this.controlPosition = "under", this.numberOfSlides = 1, this.slidesPerPage = 1, this.currentPage = 1, this.autoPlay = !1, this.loopSlides = !1, this.playing = !0, this._pauseHold = !1, this._positionInside = !1, this._positionControls = (t) => {
+      t.forEach((s) => {
+        this === s.target && (!s.isIntersecting ? this._positionInside = !0 : this._positionInside = !1);
+      });
+    };
+  }
+  updated(t) {
+    if (super.updated(t), this.controlPosition === "outside") {
+      const s = {
+        root: document.querySelector("document"),
+        rootMargin: "0px -112px 0px -112px",
+        threshold: 1
+      };
+      !this._overflowObserver && this && (this._overflowObserver = new IntersectionObserver(this._positionControls, s), this._overflowObserver.observe(this));
+    }
+  }
+  _dispatchControlAction(t, s) {
+    const r = t.currentTarget;
+    if (!(r && r.getAttribute("disabled")) && ("onscrollend" in window || (r.style.setProperty("pointer-events", "none"), setTimeout(() => {
+      r.style.setProperty("pointer-events", "auto");
+    }, 1100 / this.slidesPerPage)), (s === "pause-slider" || s === "play-slider") && this.dispatchEvent(new CustomEvent(s, { bubbles: !0, composed: !0 })), (s === "previous-slide" || s === "next-slide") && this.dispatchEvent(new CustomEvent(s, { bubbles: !0, composed: !0 })), s === "pause-over" && (this.dispatchEvent(new CustomEvent(s, { bubbles: !0, composed: !0 })), this.playing ? this._pauseHold = !0 : this._pauseHold = !1), s === "pause-out" && this.playing && (this.dispatchEvent(new CustomEvent(s, { bubbles: !0, composed: !0 })), this._pauseHold = !1), s === "slide-link")) {
+      const n = t.currentTarget, u = n ? n.dataset.slide : null;
+      this.dispatchEvent(
+        new CustomEvent(
+          s,
+          {
+            detail: {
+              slideNumber: u
+            },
+            bubbles: !0,
+            composed: !0
+          }
+        )
+      );
+    }
+  }
+  controlClasses() {
+    const t = {};
+    return this.controlPosition === "outside" && !this._positionInside ? t["slider-controls--outside"] = !0 : (this.controlPosition === "outside" && this._positionInside || this.controlPosition === "inside") && (t["slider-controls--inside"] = !0), t;
+  }
+  counterClasses() {
+    const t = {};
+    return t["slider-counter--" + this.controlType] = !0, t.caption = this.controlType === "counter" || this.controlType === "numbers", t;
+  }
+  numberButtons() {
+    return o`
+            ${c(d(1, this.numberOfSlides + 1, 1), (t) => t === this.currentPage ? o`
+                        <button
+                            class="slider-counter__link slider-counter__link--numbers link link--active"
+                            @click="${(s) => this._dispatchControlAction(s, "slide-link")}"
+                            data-slide=${t}
+                            >
+                            ${t}
+                        </button>
+                    ` : o`
+                    <button
+                        class="slider-counter__link slider-counter__link--numbers link"
+                        @click="${(s) => this._dispatchControlAction(s, "slide-link")}"
+                        data-slide=${t}
+                        >
+                        ${t}
+                    </button>
+                `)}
+        `;
+  }
+  dotButtons() {
+    return o`
+            ${c(d(1, this.numberOfSlides + 1, 1), (t) => t === this.currentPage ? o`
+                        <button
+                            class="slider-counter__link slider-counter__link--dots slider-counter__link--active link"
+                            @click="${(s) => this._dispatchControlAction(s, "slide-link")}"
+                            data-slide="${t}"
+                            >
+                            <span class="dot"></span>
+                        </button>
+                    ` : o`
+                    <button
+                        class="slider-counter__link slider-counter__link--dots link"
+                        @click="${(s) => this._dispatchControlAction(s, "slide-link")}"
+                        data-slide="${t}"
+                        >
+                        <span class="dot"></span>
+                    </button>
+                `)}
+        `;
+  }
+  controlVisualType() {
+    return this.controlType === "counter" ? o`
+                <span
+                    class="slider-counter--current"
+                    part="counter-current"
+                    >
+                    ${this.currentPage}
+                </span>
+                <span
+                    aria-hidden="true"
+                    part="counter-seperator"
+                    >
+                    /
+                </span>
+                <span class="visually-hidden">of</span>
+                <span
+                    class="slider-counter--total"
+                    part="counter-total"
+                    >
+                    ${this.numberOfSlides}
+                </span>
+            ` : this.controlType === "numbers" ? o`
+                    ${this.numberButtons()}
+                ` : o`
+                ${this.dotButtons()}
+            `;
+  }
+  autoPlayButtons() {
+    return this.autoPlay && this.playing ? o`
+            <div class="autoplay-buttons" part="autoplay-container">
+                <umg-button-icon
+                    for=${this.sliderId}
+                    label="Pause slides"
+                    icon=${this._pauseHold === !0 ? "play-pause" : "pause"}
+                    size="small"
+                    @click="${(t) => this._dispatchControlAction(t, "pause-slider")}"
+                    @mouseover="${(t) => this._dispatchControlAction(t, "pause-over")}"
+                    @mouseout="${(t) => this._dispatchControlAction(t, "pause-out")}"
+                    @focusin="${(t) => this._dispatchControlAction(t, "pause-over")}"
+                    @focusout="${(t) => this._dispatchControlAction(t, "pause-out")}"
+                    >
+                </umg-button-icon>
+            </div>
+            ` : this.autoPlay && !this.playing ? o`
+                <umg-button-icon
+                    class="autoplay-buttons"
+                    for=${this.sliderId}
+                    label="Autoplay slides"
+                    icon="play"
+                    size="small"
+                    @click="${(t) => this._dispatchControlAction(t, "play-slider")}"
+                    >
+                </umg-button-icon>
+            ` : b;
+  }
+  navigationButton(t) {
+    const s = t === "next" ? !this.loopSlides && this.currentPage === this.numberOfSlides : !this.loopSlides && this.currentPage === 1, r = t === "next" ? "next-slide" : "previous-slide";
+    return this.controlPosition === "under" ? o`
+                <umg-button-icon
+                    class="${t}-button"
+                    for=${this.sliderId}
+                    label="Next"
+                    icon="chevron-${t === "next" ? "right" : "left"}"
+                    size="small"
+                    ?disabled=${s}
+                    @click="${(n) => this._dispatchControlAction(n, r)}"
+                    >
+                </umg-button-icon>
+            ` : o`
+            <umg-button-icon
+                id="OuterButton"
+                class="${t}-button"
+                for=${this.sliderId}
+                label="Next"
+                icon="chevron-${t === "next" ? "right" : "left"}"
+                size="large"
+                padding="12"
+                ?disabled=${s}
+                colorText="255,255,255"
+                colorBg="0,0,0"
+                colorBgOpacity="0.3"
+                border
+                borderWidth="10"
+                borderRadius="40"
+                @click="${(n) => this._dispatchControlAction(n, r)}"
+                >
+            </umg-button-icon>
+        `;
+  }
+  render() {
+    if (this.numberOfSlides > 1)
+      return o`
+                <div class="slider-controls${h(this.controlClasses())}" part="slider-controls">
+                    ${this.navigationButton("previous")}
+                    <div class="slider-counter${h(this.counterClasses())}" part="slider-counter">
+                        ${this.controlVisualType()}
+                    </div>
+                    ${this.navigationButton("next")}
+                    ${this.autoPlayButtons()}
+                </div>
+            `;
+  }
+};
+e.styles = P([
+  _,
+  v,
+  g
+]);
+i([
+  l()
+], e.prototype, "sliderId", 2);
+i([
+  l()
+], e.prototype, "controlType", 2);
+i([
+  l()
+], e.prototype, "controlPosition", 2);
+i([
+  l({ type: Number })
+], e.prototype, "numberOfSlides", 2);
+i([
+  l({ type: Number })
+], e.prototype, "slidesPerPage", 2);
+i([
+  l({ type: Number })
+], e.prototype, "currentPage", 2);
+i([
+  l({ type: Boolean })
+], e.prototype, "autoPlay", 2);
+i([
+  l({ type: Boolean })
+], e.prototype, "loopSlides", 2);
+i([
+  l({ type: Boolean })
+], e.prototype, "playing", 2);
+i([
+  l({ state: !0, type: Boolean })
+], e.prototype, "_pauseHold", 2);
+i([
+  m()
+], e.prototype, "_positionInside", 2);
+i([
+  m()
+], e.prototype, "_overflowObserver", 2);
+e = i([
+  y(`${O}-slider-controls`)
+], e);
+export {
+  e as SliderControls
+};