kemet-ui 4.0.2 → 5.0.0

package/dist/chunk-U4JLLOLD.mjs

@@ -1,112 +0,0 @@
-import {
-  stylesBase
-} from "./chunk-CK7STPSD.mjs";
-import {
-  emitEvent
-} from "./chunk-LHEY3UOF.mjs";
-import {
-  __decorateClass
-} from "./chunk-SAWN7RJP.mjs";
-
-// src/elements/timer.ts
-import { html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-var formats = ["seconds", "minutes", "hours", "days"];
-var EnumFormats = /* @__PURE__ */ ((EnumFormats2) => {
-  EnumFormats2["Seconds"] = "seconds";
-  EnumFormats2["Minutes"] = "minutes";
-  EnumFormats2["Hours"] = "hours";
-  EnumFormats2["Days"] = "days";
-  return EnumFormats2;
-})(EnumFormats || {});
-var KemetTimer = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.format = "seconds";
-    this.amount = 10;
-  }
-  firstUpdated() {
-    if (this.expires) {
-      this.countDown();
-    } else {
-      this.timer(this.getTimeInSeconds(this.amount));
-    }
-    emitEvent(this, "kemet-start", this);
-    emitEvent(this, "kemet-increment", this.getTimeInSeconds(this.amount));
-  }
-  updated(prevProps) {
-    const hasFormatOrAmountChanged = prevProps.get("format") || prevProps.get("amount");
-    const hasExpiredChanged = prevProps.get("expires");
-    if (hasFormatOrAmountChanged) {
-      clearInterval(this.interval);
-      this.timer(this.getTimeInSeconds(this.amount));
-    }
-    if (hasExpiredChanged) {
-      clearInterval(this.interval);
-      this.countDown();
-    }
-  }
-  render() {
-    return html`<slot></slot>`;
-  }
-  getTimeInSeconds(time) {
-    switch (this.format) {
-      case "minutes":
-        return time * 60;
-      case "hours":
-        return time * 60 * 60;
-      case "days":
-        return time * 60 * 60 * 24;
-      default:
-        return time;
-    }
-  }
-  timer(seconds = 0) {
-    const now = Date.now();
-    const then = now + seconds * 1e3;
-    this.interval = setInterval(() => {
-      const secondsLeft = Math.round((then - Date.now()) / 1e3);
-      if (secondsLeft < 0) {
-        clearInterval(this.interval);
-        emitEvent(this, "kemet-complete", this);
-        return;
-      }
-      emitEvent(this, "kemet-increment", secondsLeft);
-    }, 1e3);
-  }
-  countDown() {
-    const expires = new Date(this.expires).getTime();
-    this.interval = setInterval(() => {
-      const secondsLeft = Math.round((expires - Date.now()) / 1e3);
-      if (secondsLeft < 0) {
-        clearInterval(this.interval);
-        emitEvent(this, "kemet-complete", this);
-        return;
-      }
-      emitEvent(this, "kemet-increment", secondsLeft);
-    }, 1e3);
-  }
-};
-KemetTimer.styles = [stylesBase];
-__decorateClass([
-  property({ type: String })
-], KemetTimer.prototype, "format", 2);
-__decorateClass([
-  property({ type: Number })
-], KemetTimer.prototype, "amount", 2);
-__decorateClass([
-  property({ type: String })
-], KemetTimer.prototype, "expires", 2);
-__decorateClass([
-  state()
-], KemetTimer.prototype, "interval", 2);
-KemetTimer = __decorateClass([
-  customElement("kemet-timer")
-], KemetTimer);
-
-export {
-  formats,
-  EnumFormats,
-  KemetTimer
-};
-//# sourceMappingURL=chunk-U4JLLOLD.mjs.map

package/dist/chunk-U4JLLOLD.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/elements/timer.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { stylesBase } from '../styles/elements/timer';\nimport { emitEvent } from '../utilities/events';\n\nexport const formats = ['seconds', 'minutes', 'hours', 'days'] as const;\nexport enum EnumFormats {\n  Seconds = 'seconds',\n  Minutes = 'minutes',\n  Hours = 'hours',\n  Days = 'days'\n}\nexport type TypeFormats = typeof formats[number];\n\n/**\n * @since 3.1.0\n * @status stable\n *\n * @tagname kemet-timer\n * @summary Counts down from a specified amount of time or date.\n *\n * @prop {TypeFormats} format - The format of the amount property\n * @prop {number} amount - The amount of time to set the timer\n * @prop {string} expires - Begins a count down to a specified time, accepts a string that matches value given for a Date constructor\n *\n * @event kemet-start - Fires when the timer starts\n * @event kemet-complete - Fires when the timer reaches 0\n * @event kemet-increment - Fires on tick of the timer\n *\n */\n\n@customElement('kemet-timer')\nexport default class KemetTimer extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: String })\n  format: TypeFormats = 'seconds';\n\n  @property({ type: Number })\n  amount: number = 10;\n\n  @property({ type: String })\n  expires: string;\n\n  /** @internal */\n  @state()\n  interval;\n\n  firstUpdated() {\n    if (this.expires) {\n      this.countDown();\n    } else {\n      this.timer(this.getTimeInSeconds(this.amount));\n    }\n\n    emitEvent(this, 'kemet-start', this);\n    emitEvent(this, 'kemet-increment', this.getTimeInSeconds(this.amount));\n  }\n\n  updated(prevProps) {\n    const hasFormatOrAmountChanged = prevProps.get('format') || prevProps.get('amount');\n    const hasExpiredChanged = prevProps.get('expires');\n\n    if (hasFormatOrAmountChanged) {\n      clearInterval(this.interval);\n      this.timer(this.getTimeInSeconds(this.amount));\n    }\n\n    if (hasExpiredChanged) {\n      clearInterval(this.interval);\n      this.countDown();\n    }\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  getTimeInSeconds(time: number): number {\n    switch (this.format) {\n      case 'minutes': return time * 60;\n      case 'hours': return time * 60 * 60;\n      case 'days': return time * 60 * 60 * 24;\n      default: return time;\n    }\n  }\n\n  timer(seconds: number = 0) {\n    const now = Date.now();\n    const then = now + seconds * 1000;\n\n    this.interval = setInterval(() => {\n      const secondsLeft = Math.round((then - Date.now()) / 1000);\n\n      if (secondsLeft < 0) {\n        clearInterval(this.interval);\n        emitEvent(this, 'kemet-complete', this);\n        return;\n      }\n\n      emitEvent(this, 'kemet-increment', secondsLeft);\n    }, 1000);\n  }\n\n  countDown() {\n    const expires = new Date(this.expires).getTime();\n\n    this.interval = setInterval(() => {\n      const secondsLeft = Math.round((expires - Date.now()) / 1000);\n\n      if (secondsLeft < 0) {\n        clearInterval(this.interval);\n        emitEvent(this, 'kemet-complete', this);\n        return;\n      }\n\n      emitEvent(this, 'kemet-increment', secondsLeft);\n    }, 1000);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-timer': KemetTimer\n  }\n}\n"],"mappings":";;;;;;;;;;;AAAA,SAAS,MAAM,kBAAkB;AACjC,SAAS,eAAe,UAAU,aAAa;AAIxC,IAAM,UAAU,CAAC,WAAW,WAAW,SAAS,MAAM;AACtD,IAAK,cAAL,kBAAKA,iBAAL;AACL,EAAAA,aAAA,aAAU;AACV,EAAAA,aAAA,aAAU;AACV,EAAAA,aAAA,WAAQ;AACR,EAAAA,aAAA,UAAO;AAJG,SAAAA;AAAA,GAAA;AA0BZ,IAAqB,aAArB,cAAwC,WAAW;AAAA,EAAnD;AAAA;AAIE,kBAAsB;AAGtB,kBAAiB;AAAA;AAAA,EASjB,eAAe;AACb,QAAI,KAAK,SAAS;AAChB,WAAK,UAAU;AAAA,IACjB,OAAO;AACL,WAAK,MAAM,KAAK,iBAAiB,KAAK,MAAM,CAAC;AAAA,IAC/C;AAEA,cAAU,MAAM,eAAe,IAAI;AACnC,cAAU,MAAM,mBAAmB,KAAK,iBAAiB,KAAK,MAAM,CAAC;AAAA,EACvE;AAAA,EAEA,QAAQ,WAAW;AACjB,UAAM,2BAA2B,UAAU,IAAI,QAAQ,KAAK,UAAU,IAAI,QAAQ;AAClF,UAAM,oBAAoB,UAAU,IAAI,SAAS;AAEjD,QAAI,0BAA0B;AAC5B,oBAAc,KAAK,QAAQ;AAC3B,WAAK,MAAM,KAAK,iBAAiB,KAAK,MAAM,CAAC;AAAA,IAC/C;AAEA,QAAI,mBAAmB;AACrB,oBAAc,KAAK,QAAQ;AAC3B,WAAK,UAAU;AAAA,IACjB;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,EACT;AAAA,EAEA,iBAAiB,MAAsB;AACrC,YAAQ,KAAK,QAAQ;AAAA,MACnB,KAAK;AAAW,eAAO,OAAO;AAAA,MAC9B,KAAK;AAAS,eAAO,OAAO,KAAK;AAAA,MACjC,KAAK;AAAQ,eAAO,OAAO,KAAK,KAAK;AAAA,MACrC;AAAS,eAAO;AAAA,IAClB;AAAA,EACF;AAAA,EAEA,MAAM,UAAkB,GAAG;AACzB,UAAM,MAAM,KAAK,IAAI;AACrB,UAAM,OAAO,MAAM,UAAU;AAE7B,SAAK,WAAW,YAAY,MAAM;AAChC,YAAM,cAAc,KAAK,OAAO,OAAO,KAAK,IAAI,KAAK,GAAI;AAEzD,UAAI,cAAc,GAAG;AACnB,sBAAc,KAAK,QAAQ;AAC3B,kBAAU,MAAM,kBAAkB,IAAI;AACtC;AAAA,MACF;AAEA,gBAAU,MAAM,mBAAmB,WAAW;AAAA,IAChD,GAAG,GAAI;AAAA,EACT;AAAA,EAEA,YAAY;AACV,UAAM,UAAU,IAAI,KAAK,KAAK,OAAO,EAAE,QAAQ;AAE/C,SAAK,WAAW,YAAY,MAAM;AAChC,YAAM,cAAc,KAAK,OAAO,UAAU,KAAK,IAAI,KAAK,GAAI;AAE5D,UAAI,cAAc,GAAG;AACnB,sBAAc,KAAK,QAAQ;AAC3B,kBAAU,MAAM,kBAAkB,IAAI;AACtC;AAAA,MACF;AAEA,gBAAU,MAAM,mBAAmB,WAAW;AAAA,IAChD,GAAG,GAAI;AAAA,EACT;AACF;AAvFqB,WACZ,SAAS,CAAC,UAAU;AAG3B;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAHP,WAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GANP,WAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GATP,WAUnB;AAIA;AAAA,EADC,MAAM;AAAA,GAbY,WAcnB;AAdmB,aAArB;AAAA,EADC,cAAc,aAAa;AAAA,GACP;","names":["EnumFormats"]}

package/dist/chunk-VDX3OED3.mjs

@@ -1,102 +0,0 @@
-// src/utilities/form-controller.ts
-var FormSubmitController = class {
-  constructor(host, options = void 0) {
-    (this.host = host).addController(this);
-    this.options = {
-      form: (input) => input.closest("form"),
-      name: (input) => input.name,
-      value: (input) => input.value,
-      disabled: (input) => input.disabled,
-      ...options
-    };
-    this.handleFormData = this.handleFormData.bind(this);
-    this.handleFormSubmit = this.handleFormSubmit.bind(this);
-  }
-  hostConnected() {
-    this.form = this.options.form(this.host);
-    if (this.form) {
-      this.form.addEventListener("formdata", this.handleFormData);
-      this.form.addEventListener("submit", this.handleFormSubmit);
-    }
-  }
-  hostDisconnected() {
-    if (this.form) {
-      this.form.removeEventListener("formdata", this.handleFormData);
-      this.form.removeEventListener("submit", this.handleFormSubmit);
-      this.form = void 0;
-    }
-  }
-  handleFormData(event) {
-    const disabled = this.options.disabled(this.host);
-    const name = this.options.name(this.host);
-    const value = this.options.value(this.host);
-    if (!disabled && typeof name === "string" && typeof value !== "undefined") {
-      event.formData?.append(name, value.toString());
-    }
-  }
-  handleFormSubmit(event) {
-    event.preventDefault();
-    event.stopImmediatePropagation();
-    const disabled = this.options.disabled(this.host);
-    this.form = this.options.form(this.host);
-    if (this.form && !disabled) {
-      const components = this.form.querySelectorAll("kemet-input, kemet-textarea, kemet-select, kemet-checkbox, kemet-radios");
-      components.forEach((component) => {
-        if (component.checkValidity) {
-          component.checkValidity();
-          if (!component.checkValidity()) {
-            component.status = "error";
-            component.invalid = true;
-            component.dispatchEvent(
-              new CustomEvent("kemet-input-status", {
-                bubbles: true,
-                composed: true,
-                detail: {
-                  status: "error",
-                  validity: component.validity ? component.validity : {},
-                  element: component
-                }
-              })
-            );
-          }
-          if (component.checkLimitValidity && !component.checkLimitValidity()) {
-            component.status = "error";
-            component.invalid = true;
-            component.dispatchEvent(
-              new CustomEvent("kemet-input-status", {
-                bubbles: true,
-                composed: true,
-                detail: {
-                  status: "error",
-                  validity: { passedLimit: true },
-                  element: component
-                }
-              })
-            );
-          }
-        }
-      });
-    }
-  }
-  submit() {
-    const button = document.createElement("button");
-    if (this.form) {
-      button.type = "submit";
-      button.style.position = "absolute";
-      button.style.width = "0";
-      button.style.height = "0";
-      button.style.clip = "rect(0 0 0 0)";
-      button.style.clipPath = "inset(50%)";
-      button.style.overflow = "hidden";
-      button.style.whiteSpace = "nowrap";
-      this.form.append(button);
-      button.click();
-      button.remove();
-    }
-  }
-};
-
-export {
-  FormSubmitController
-};
-//# sourceMappingURL=chunk-VDX3OED3.mjs.map

package/dist/chunk-VDX3OED3.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/utilities/form-controller.ts"],"sourcesContent":["export class FormSubmitController {\n  host;\n  form;\n  options;\n\n  constructor(host, options = undefined) {\n    (this.host = host).addController(this);\n\n    this.options = {\n      form: input => input.closest('form'),\n      name: input => input.name,\n      value: input => input.value,\n      disabled: input => input.disabled,\n      ...options,\n    };\n\n    this.handleFormData = this.handleFormData.bind(this);\n    this.handleFormSubmit = this.handleFormSubmit.bind(this);\n  }\n\n  hostConnected() {\n    this.form = this.options.form(this.host);\n\n    if (this.form) {\n      this.form.addEventListener('formdata', this.handleFormData);\n      this.form.addEventListener('submit', this.handleFormSubmit);\n    }\n  }\n\n  hostDisconnected() {\n    if (this.form) {\n      this.form.removeEventListener('formdata', this.handleFormData);\n      this.form.removeEventListener('submit', this.handleFormSubmit);\n      this.form = undefined;\n    }\n  }\n\n  handleFormData(event) {\n    const disabled = this.options.disabled(this.host);\n    const name = this.options.name(this.host);\n    const value = this.options.value(this.host);\n\n    if (!disabled && typeof name === 'string' && typeof value !== 'undefined') {\n      // TODO recreate a scenario where value will be an array\n      // if (Array.isArray(value)) {\n      //   value.forEach((val) => {\n      //     event.formData?.append(name, val.toString());\n      //   });\n      // } else {\n      //   event.formData?.append(name, value.toString());\n      // }\n      event.formData?.append(name, value.toString());\n    }\n  }\n\n  handleFormSubmit(event) {\n    event.preventDefault();\n    event.stopImmediatePropagation();\n\n    const disabled = this.options.disabled(this.host);\n    this.form = this.options.form(this.host);\n\n    if (this.form && !disabled) {\n      const components = this.form.querySelectorAll('kemet-input, kemet-textarea, kemet-select, kemet-checkbox, kemet-radios');\n\n      components.forEach((component) => {\n        if (component.checkValidity) {\n          component.checkValidity();\n\n          if (!component.checkValidity()) {\n            component.status = 'error';\n            component.invalid = true;\n\n            component.dispatchEvent(\n              new CustomEvent('kemet-input-status', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                  status: 'error',\n                  validity: component.validity ? component.validity : {},\n                  element: component,\n                },\n              }),\n            );\n          }\n\n          if (component.checkLimitValidity && !component.checkLimitValidity()) {\n            component.status = 'error';\n            component.invalid = true;\n\n            component.dispatchEvent(\n              new CustomEvent('kemet-input-status', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                  status: 'error',\n                  validity: { passedLimit: true },\n                  element: component,\n                },\n              }),\n            );\n          }\n        }\n      });\n    }\n  }\n\n  submit() {\n    const button = document.createElement('button');\n\n    if (this.form) {\n      button.type = 'submit';\n      button.style.position = 'absolute';\n      button.style.width = '0';\n      button.style.height = '0';\n      button.style.clip = 'rect(0 0 0 0)';\n      button.style.clipPath = 'inset(50%)';\n      button.style.overflow = 'hidden';\n      button.style.whiteSpace = 'nowrap';\n      this.form.append(button);\n      button.click();\n      button.remove();\n    }\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-VHOXQRZV.mjs

@@ -1,450 +0,0 @@
-import {
-  emitEvent
-} from "./chunk-LHEY3UOF.mjs";
-import {
-  __decorateClass
-} from "./chunk-SAWN7RJP.mjs";
-
-// src/elements/carousel.ts
-import { html, LitElement } from "lit";
-import {
-  customElement,
-  property,
-  state,
-  query
-} from "lit/decorators.js";
-
-// src/styles/elements/carousel.ts
-import { css } from "lit";
-var stylesCarousel = css`
-  :host,
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  :host {
-    --kemet-carousel-width: 100%;
-    --kemet-carousel-height: auto;
-    --kemet-carousel-toolbar-gap: 1rem;
-    --kemet-carousel-toolbar-justify-content: center;
-    --kemet-carousel-toolbar-padding: 1rem;
-    --kemet-carousel-toolbar-inner-width: 100%;
-    --kemet-carousel-toolbar-inner-bottom: 0;
-    --kemet-carousel-toolbar-inner-top: auto;
-    --kemet-carousel-toolbar-inner-color: rgb(var(--kemet-color-white));
-    --kemet-carousel-toolbar-inner-background-color: rgb(var(--kemet-color-black) / 40%);
-    --kemet-carousel-slides-border: 1px solid rgb(var(--kemet-color-gray-50));
-    --kemet-carousel-transition-speed: 300ms;
-    --kemet-carousel-arrows-opacity: 0.25;
-    --kemet-carousel-arrows-transition-speed: 300ms;
-    --kemet-carousel-arrows-opacity-hover: 1;
-
-    position: relative;
-    display: grid;
-    grid-template-columns: minmax(0, 1fr);
-    align-items: center;
-    width: var(--kemet-carousel-width);
-    height: var(--kemet-carousel-height);
-    overflow: visible;
-  }
-
-  :host([arrows]) {
-    grid-template-columns: auto minmax(0, 1fr) auto;
-  }
-
-  .toolbar {
-    display: flex;
-    gap: var(--kemet-carousel-toolbar-gap);
-    align-items: center;
-    justify-content: var(--kemet-carousel-toolbar-justify-content);
-    line-height: 1;
-    padding: var(--kemet-carousel-toolbar-padding);
-  }
-
-  :host([inner]) .toolbar {
-    width: var(--kemet-carousel-toolbar-inner-width);
-    position: absolute;
-    bottom: var(--kemet-carousel-toolbar-inner-bottom);
-    top: var(--kemet-carousel-toolbar-inner-top);
-    color: var(--kemet-carousel-toolbar-inner-color);
-    background-color: var(--kemet-carousel-toolbar-inner-background-color);
-  }
-
-  .slides {
-    overflow: hidden;
-    position: relative;
-    padding: 1rem 0;
-    border: var(--kemet-carousel-slides-border);
-  }
-
-  .slider {
-    display: flex;
-    flex-wrap: nowrap;
-    transition: transform var(--kemet-carousel-transition-speed) ease;
-  }
-
-  ::slotted([slot='next']),
-  ::slotted([slot='prev']) {
-    opacity: var(--kemet-carousel-arrows-opacity);
-    transition: opacity var(--kemet-carousel-arrows-transition-speed) ease-in-out;
-  }
-
-  :host(:hover) ::slotted([slot='next']),
-  :host(:hover) ::slotted([slot='prev']) {
-    opacity: var(--kemet-carousel-arrows-opacity-hover);
-  }
-`;
-
-// src/elements/carousel.ts
-var KemetCarousel = class extends LitElement {
-  constructor() {
-    super();
-    this.index = 0;
-    this.total = 0;
-    this.sliderWidth = "auto";
-    this.sliderTranslateX = "0";
-    this.inner = false;
-    this.arrows = false;
-    this.options = {
-      perView: 1,
-      perMove: 1,
-      gap: 12,
-      slideshow: 0,
-      rewind: true,
-      center: false
-    };
-    this.breakpoints = {
-      768: {
-        perView: 2,
-        gap: 24,
-        rewind: false
-      },
-      1280: {
-        perView: 2.5,
-        center: true
-      }
-    };
-    this.slides = [];
-    this.links = [];
-    this.addEventListener("kemet-first-activated", this.handleFirst.bind(this));
-    this.addEventListener("kemet-last-activated", this.handleLast.bind(this));
-    this.addEventListener("kemet-next-activated", this.handleNext.bind(this));
-    this.addEventListener("kemet-prev-activated", this.handlePrev.bind(this));
-    this.addEventListener("kemet-link-activated", this.handleLink.bind(this));
-  }
-  firstUpdated() {
-    this.toolbarSlotElement = this.querySelector('[slot="toolbar"]');
-    this.informationElement = this.querySelector("kemet-carousel-information");
-    window.addEventListener("resize", () => {
-      this.setSlideSize();
-      this.setToolbarSize();
-      this.updateIndex(this.index);
-    });
-    this.sliderElement?.addEventListener("transitionend", this.handleTransitionEnd.bind(this));
-    this.swipeMove = (event) => {
-      event.preventDefault();
-      let pageX;
-      if ("touches" in event) {
-        pageX = event.touches[0].pageX;
-      } else {
-        pageX = event.pageX;
-      }
-      const currentSlide = this.slides[this.index];
-      this.sliderTranslateX = `${pageX - this.startX - currentSlide.offsetLeft}px`;
-    };
-    this.setSlideSize();
-    this.goToSlide(this.index);
-  }
-  updated(prevProps) {
-    this.setSlideSize();
-    this.setToolbarSize();
-    if (prevProps.has("index")) {
-      this.updateIndex(this.index);
-      this.slideShowID = window.setTimeout(() => {
-        if (this.getOption("slideshow") > 0) {
-          this.updateIndex(this.index + 1);
-          clearTimeout(this.slideShowID);
-        }
-      }, this.getOption("slideshow") * 1e3);
-    }
-  }
-  render() {
-    return html`
-      <slot name="prev" @slotchange=${this.handleArrows}></slot>
-      <div id="container" class="container" part="container">
-        <section
-          id="slides"
-          class="slides"
-          part="slides"
-          @mousedown=${this.swipeStart}
-          @mouseup=${this.swipeEnd}
-          @touchstart=${this.swipeStart}
-          @touchend=${this.swipeEnd}
-          @mouseleave=${this.swipeLeave}
-        >
-          <div id="slider" class="slider" part="slider" style="width:${this.sliderWidth}; transform:translateX(${this.sliderTranslateX});">
-            <slot name="slides" @slotchange="${this.handleSlotChange}"></slot>
-          </div>
-        </section>
-        ${this.makeToolbar()}
-      </div>
-      <slot name="next" @slotchange=${this.handleArrows}></slot>
-    `;
-  }
-  swipeStart(event) {
-    if ("touches" in event) {
-      this.startX = event.touches[0].pageX;
-    } else {
-      this.startX = event.pageX;
-    }
-    this.addEventListener("mousemove", this.swipeMove);
-    this.addEventListener("touchmove", this.swipeMove);
-  }
-  swipeEnd(event) {
-    this.updateIndex(this.swipeUpdate(event));
-    this.removeEventListener("mousemove", this.swipeMove, false);
-    this.removeEventListener("touchmove", this.swipeMove, false);
-  }
-  swipeUpdate(event) {
-    let pageX;
-    if ("changedTouches" in event) {
-      pageX = event.changedTouches[0].pageX;
-    } else {
-      pageX = event.pageX;
-    }
-    const direction = this.startX > pageX ? "right" : "left";
-    const threshold = this.slidesElement.offsetWidth / 3;
-    const diff = this.startX - pageX;
-    const shouldUpdate = Math.abs(diff) > threshold;
-    let { index } = this;
-    if (shouldUpdate && direction === "right") {
-      index = this.index >= this.slides.length - 1 ? this.index : this.index + 1;
-    }
-    if (shouldUpdate && direction === "left") {
-      index = this.index < 1 ? 0 : this.index - 1;
-    }
-    return index;
-  }
-  swipeLeave() {
-    this.updateIndex(this.index);
-    this.removeEventListener("mousemove", this.swipeMove, false);
-    this.removeEventListener("touchmove", this.swipeMove, false);
-  }
-  setSlideSize() {
-    this.slideWidth = this.containerElement?.offsetWidth / this.getOption("perView");
-    this.slides.forEach((slide) => {
-      slide.style.marginLeft = `${this.getOption("gap") / 2}px`;
-      slide.style.marginRight = `${this.getOption("gap") / 2}px`;
-      slide.style.width = `${this.slideWidth - this.getOption("gap")}px`;
-    });
-    this.sliderWidth = `${this.slideWidth * this.slides.length}px`;
-  }
-  setToolbarSize() {
-    if (this.inner && this.toolbarElement) {
-      const width = this.slidesElement.offsetWidth;
-      this.toolbarElement.style.width = `${width}px`;
-    }
-  }
-  makeToolbar() {
-    if (this.toolbarSlotElement) {
-      return html`
-        <section id="toolbar" class="toolbar" part="toolbar">
-          <slot name="toolbar"></slot>
-        </section>
-      `;
-    }
-    return null;
-  }
-  handleSlotChange() {
-    const slides = this.querySelectorAll("kemet-carousel-slide");
-    const links = this.querySelectorAll("kemet-carousel-link");
-    slides.forEach((slide) => {
-      this.slides.push(slide);
-    });
-    this.updateInformation();
-    this.total = slides.length;
-    slides[this.index].selected = true;
-    links.forEach((link) => {
-      this.links.push(link);
-    });
-  }
-  handleArrows() {
-    this.arrows = true;
-  }
-  handleFirst() {
-    this.updateIndex(0);
-  }
-  handleLast() {
-    this.updateIndex(this.slides.length - 1);
-  }
-  handleNext() {
-    let newIndex = this.index + this.getOption("perMove");
-    if (newIndex >= this.slides.length) {
-      if (this.getOption("rewind")) {
-        newIndex = 0;
-      } else {
-        newIndex = this.index;
-      }
-    }
-    this.updateIndex(newIndex);
-  }
-  handlePrev() {
-    let newIndex = this.index - this.getOption("perMove");
-    if (newIndex < 0) {
-      if (this.getOption("rewind")) {
-        newIndex = this.slides.length - 1;
-      } else {
-        newIndex = this.index;
-      }
-    }
-    this.updateIndex(newIndex);
-  }
-  updateIndex(newIndex) {
-    let currentSlide = this.slides[this.index];
-    let currentLink = this.links[newIndex];
-    this.links.forEach((link) => {
-      link.selected = false;
-    });
-    if (!currentLink) {
-      [currentLink] = this.links;
-    }
-    if (currentLink) {
-      currentLink.selected = true;
-    }
-    if (currentSlide) {
-      currentSlide.setAttribute("aria-hidden", "true");
-      if (newIndex > -1 && newIndex < this.slides.length) {
-        this.index = newIndex;
-      } else {
-        console.warn("An invalid index number was entered. The kemet-carousel has been reset to the first slide.");
-        this.index = 0;
-      }
-      this.goToSlide(this.index);
-      currentSlide = this.slides[this.index];
-      currentSlide.setAttribute("aria-hidden", "false");
-      this.slides.forEach((slide) => {
-        slide.selected = false;
-      });
-      currentSlide.selected = true;
-      emitEvent(this, "kemet-change-start", this);
-      this.updateInformation();
-    }
-  }
-  updateInformation() {
-    this.informationSlot = this.slides[this.index].querySelector('[slot="information"]');
-    if (this.informationElement) {
-      if (this.informationSlot) {
-        this.informationElement.innerHTML = this.informationSlot.outerHTML;
-      } else {
-        this.informationElement.innerHTML = "";
-      }
-    }
-  }
-  goToSlide(index) {
-    if (this.getOption("center") === true) {
-      const slidesCenter = this.slidesElement.offsetWidth / 2;
-      const slideX = this.slideWidth * index;
-      this.sliderTranslateX = `${slideX - (slideX - slidesCenter) - this.slideWidth / 2 - slideX}px`;
-    } else {
-      this.sliderTranslateX = `${this.slideWidth * index * -1}px`;
-    }
-  }
-  handleTransitionEnd() {
-    const currentElement = this.querySelector("kemet-carousel-current");
-    if (currentElement) {
-      currentElement.current = this.index + 1;
-    }
-    emitEvent(this, "kemet-change-finished", this);
-  }
-  handleLink(event) {
-    this.updateIndex(event.detail.slide);
-  }
-  getOption(option) {
-    const breakpoints = Object.keys(this.breakpoints);
-    let value = this.options[option];
-    breakpoints.forEach((breakpoint) => {
-      if (window.matchMedia(`(min-width: ${breakpoint}px)`).matches && this.breakpoints[breakpoint][option] !== void 0) {
-        value = this.breakpoints[breakpoint][option];
-      }
-      return value;
-    });
-    return value;
-  }
-};
-KemetCarousel.styles = [stylesCarousel];
-__decorateClass([
-  property({ type: Number, reflect: true })
-], KemetCarousel.prototype, "index", 2);
-__decorateClass([
-  property({ type: Number })
-], KemetCarousel.prototype, "total", 2);
-__decorateClass([
-  property({ type: String })
-], KemetCarousel.prototype, "sliderWidth", 2);
-__decorateClass([
-  property({ type: String })
-], KemetCarousel.prototype, "sliderTranslateX", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], KemetCarousel.prototype, "inner", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], KemetCarousel.prototype, "arrows", 2);
-__decorateClass([
-  property({ type: Object })
-], KemetCarousel.prototype, "options", 2);
-__decorateClass([
-  property({ type: Object })
-], KemetCarousel.prototype, "breakpoints", 2);
-__decorateClass([
-  state()
-], KemetCarousel.prototype, "slides", 2);
-__decorateClass([
-  state()
-], KemetCarousel.prototype, "links", 2);
-__decorateClass([
-  state()
-], KemetCarousel.prototype, "toolbarSlotElement", 2);
-__decorateClass([
-  state()
-], KemetCarousel.prototype, "informationElement", 2);
-__decorateClass([
-  state()
-], KemetCarousel.prototype, "swipeMove", 2);
-__decorateClass([
-  state()
-], KemetCarousel.prototype, "handleSlideShow", 2);
-__decorateClass([
-  state()
-], KemetCarousel.prototype, "slideShowID", 2);
-__decorateClass([
-  state()
-], KemetCarousel.prototype, "startX", 2);
-__decorateClass([
-  state()
-], KemetCarousel.prototype, "slideWidth", 2);
-__decorateClass([
-  state()
-], KemetCarousel.prototype, "informationSlot", 2);
-__decorateClass([
-  query("#container")
-], KemetCarousel.prototype, "containerElement", 2);
-__decorateClass([
-  query("#slides")
-], KemetCarousel.prototype, "slidesElement", 2);
-__decorateClass([
-  query("#slider")
-], KemetCarousel.prototype, "sliderElement", 2);
-__decorateClass([
-  query("#toolbar")
-], KemetCarousel.prototype, "toolbarElement", 2);
-KemetCarousel = __decorateClass([
-  customElement("kemet-carousel")
-], KemetCarousel);
-
-export {
-  KemetCarousel
-};
-//# sourceMappingURL=chunk-VHOXQRZV.mjs.map