@sankhyatronics/sankhya-cms 0.1.1 → 0.1.3

package/dist/chunk-XHBC23TV.js

@@ -1,254 +0,0 @@
-import {
-  reducedMotionStyles
-} from "./chunk-3VE6VFJ4.js";
-import {
-  buttonResetStyles,
-  controlBaseStyles
-} from "./chunk-RHAOQ6K4.js";
-import {
-  __decorateClass
-} from "./chunk-EUXUH3YW.js";
-
-// src/carousel/Carousel.ts
-import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-var Carousel = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.autoPlay = true;
-    this.interval = 5e3;
-    this.showArrows = true;
-    this.showIndicators = true;
-    this.index = 0;
-    this.count = 0;
-    this.paused = false;
-    this.pause = () => {
-      this.paused = true;
-    };
-    this.resume = () => {
-      this.paused = false;
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("mouseenter", this.pause);
-    this.addEventListener("mouseleave", this.resume);
-    this.addEventListener("focusin", this.pause);
-    this.addEventListener("focusout", this.resume);
-  }
-  disconnectedCallback() {
-    this.stopTimer();
-    this.removeEventListener("mouseenter", this.pause);
-    this.removeEventListener("mouseleave", this.resume);
-    this.removeEventListener("focusin", this.pause);
-    this.removeEventListener("focusout", this.resume);
-    super.disconnectedCallback();
-  }
-  updated(changed) {
-    if (changed.has("index") || changed.has("count")) this.syncSlides();
-    if (changed.has("autoPlay") || changed.has("interval") || changed.has("count")) this.restartTimer();
-  }
-  get slides() {
-    return this.shadowRoot?.querySelector("slot")?.assignedElements({ flatten: true }) ?? [];
-  }
-  syncSlides() {
-    this.slides.forEach((el, i) => el.toggleAttribute("data-st-active", i === this.index));
-  }
-  onSlotChange() {
-    this.count = this.slides.length;
-    if (this.index >= this.count) this.index = 0;
-    this.syncSlides();
-  }
-  stopTimer() {
-    if (this.timer !== void 0) clearInterval(this.timer);
-    this.timer = void 0;
-  }
-  restartTimer() {
-    this.stopTimer();
-    if (!this.autoPlay || this.count < 2) return;
-    this.timer = setInterval(() => {
-      if (!this.paused) this.go(this.index + 1, "next");
-    }, this.interval);
-  }
-  go(target, direction) {
-    if (this.count === 0) return;
-    this.setAttribute("data-direction", direction);
-    this.index = (target + this.count) % this.count;
-    this.dispatchEvent(
-      new CustomEvent("carousel-change", {
-        detail: { index: this.index },
-        bubbles: true,
-        composed: true
-      })
-    );
-    this.restartTimer();
-  }
-  render() {
-    const multiple = this.count > 1;
-    return html`
-      <slot @slotchange=${this.onSlotChange}></slot>
-      ${this.showArrows && multiple ? html`
-            <button part="nav-button prev" class="nav prev" aria-label="Previous Slide" @click=${() => this.go(this.index - 1, "prev")}>&#10094;</button>
-            <button part="nav-button next" class="nav next" aria-label="Next Slide" @click=${() => this.go(this.index + 1, "next")}>&#10095;</button>
-          ` : nothing}
-      ${this.showIndicators && multiple ? html`<div class="indicators" part="indicators">
-            ${Array.from(
-      { length: this.count },
-      (_, i) => html`
-                <button
-                  part="dot"
-                  class="dot ${i === this.index ? "active" : ""}"
-                  aria-label="Go to slide ${i + 1}"
-                  aria-current=${i === this.index ? "true" : "false"}
-                  @click=${() => this.go(i, i > this.index ? "next" : "prev")}
-                ></button>
-              `
-    )}
-          </div>` : nothing}
-    `;
-  }
-};
-Carousel.styles = css`
-    ${controlBaseStyles}
-
-    :host {
-      display: block;
-      position: relative;
-      width: 100%;
-      overflow: hidden;
-    }
-
-    ::slotted(*) {
-      display: none !important;
-    }
-
-    ::slotted([data-st-active]) {
-      display: block !important;
-      animation: st-carousel-in-next 0.4s ease both;
-    }
-
-    :host([data-direction='prev']) ::slotted([data-st-active]) {
-      animation-name: st-carousel-in-prev;
-    }
-
-    @keyframes st-carousel-in-next {
-      from {
-        transform: translateX(10%);
-        opacity: 0;
-      }
-      to {
-        transform: none;
-        opacity: 1;
-      }
-    }
-
-    @keyframes st-carousel-in-prev {
-      from {
-        transform: translateX(-10%);
-        opacity: 0;
-      }
-      to {
-        transform: none;
-        opacity: 1;
-      }
-    }
-
-    .nav {
-      ${buttonResetStyles}
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      z-index: 10;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: var(--st-size-38);
-      height: var(--st-size-38);
-      border-radius: var(--st-radius-circle);
-      border: 1px solid var(--st-color-border);
-      background: var(--st-color-surface);
-      color: var(--st-color-text-strong);
-      font-size: var(--st-text-xl);
-      opacity: 0.8;
-      transition:
-        opacity 0.3s ease,
-        transform 0.3s ease;
-    }
-
-    .nav:hover {
-      opacity: 1;
-      transform: translateY(-50%) scale(1.1);
-    }
-
-    .prev {
-      left: var(--st-space-12);
-    }
-
-    .next {
-      right: var(--st-space-12);
-    }
-
-    .indicators {
-      position: absolute;
-      bottom: var(--st-space-24);
-      left: 50%;
-      transform: translateX(-50%);
-      z-index: 10;
-      display: flex;
-      gap: var(--st-space-12);
-    }
-
-    .dot {
-      ${buttonResetStyles}
-      width: var(--st-space-12);
-      height: var(--st-space-12);
-      padding: 0;
-      border-radius: var(--st-radius-circle);
-      background: var(--st-color-border-strong);
-      transition:
-        background 0.3s ease,
-        transform 0.3s ease;
-    }
-
-    .dot:hover {
-      background: var(--st-color-text-muted);
-    }
-
-    .dot.active {
-      background: var(--st-color-text-strong);
-      transform: scale(1.2);
-    }
-
-    ${reducedMotionStyles}
-    @media (prefers-reduced-motion: reduce) {
-      ::slotted([data-st-active]) {
-        animation: none;
-      }
-    }
-  `;
-__decorateClass([
-  property({ type: Boolean, attribute: "auto-play" })
-], Carousel.prototype, "autoPlay", 2);
-__decorateClass([
-  property({ type: Number })
-], Carousel.prototype, "interval", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "show-arrows" })
-], Carousel.prototype, "showArrows", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "show-indicators" })
-], Carousel.prototype, "showIndicators", 2);
-__decorateClass([
-  state()
-], Carousel.prototype, "index", 2);
-__decorateClass([
-  state()
-], Carousel.prototype, "count", 2);
-Carousel = __decorateClass([
-  customElement("st-carousel")
-], Carousel);
-
-export {
-  Carousel
-};
-//# sourceMappingURL=chunk-XHBC23TV.js.map

package/dist/chunk-XHBC23TV.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/carousel/Carousel.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\n\r\nimport { buttonResetStyles, controlBaseStyles } from '../shared/styles';\r\nimport { reducedMotionStyles } from '../shared/section-styles';\r\nimport type { CarouselChangeEventDetail } from './CarouselEvents';\r\n\r\n/**\r\n * Cycles through its slotted children, one visible at a time, with optional autoplay, arrows and\r\n * dot indicators. The incoming slide slides in from the travel direction (CSS keyframes in place\r\n * of the source's framer-motion spring). Autoplay pauses while hovered or focused and stops when\r\n * the element is disconnected.\r\n */\r\n@customElement('st-carousel')\r\nexport class Carousel extends LitElement {\r\n  static styles = css`\r\n    ${controlBaseStyles}\r\n\r\n    :host {\r\n      display: block;\r\n      position: relative;\r\n      width: 100%;\r\n      overflow: hidden;\r\n    }\r\n\r\n    ::slotted(*) {\r\n      display: none !important;\r\n    }\r\n\r\n    ::slotted([data-st-active]) {\r\n      display: block !important;\r\n      animation: st-carousel-in-next 0.4s ease both;\r\n    }\r\n\r\n    :host([data-direction='prev']) ::slotted([data-st-active]) {\r\n      animation-name: st-carousel-in-prev;\r\n    }\r\n\r\n    @keyframes st-carousel-in-next {\r\n      from {\r\n        transform: translateX(10%);\r\n        opacity: 0;\r\n      }\r\n      to {\r\n        transform: none;\r\n        opacity: 1;\r\n      }\r\n    }\r\n\r\n    @keyframes st-carousel-in-prev {\r\n      from {\r\n        transform: translateX(-10%);\r\n        opacity: 0;\r\n      }\r\n      to {\r\n        transform: none;\r\n        opacity: 1;\r\n      }\r\n    }\r\n\r\n    .nav {\r\n      ${buttonResetStyles}\r\n      position: absolute;\r\n      top: 50%;\r\n      transform: translateY(-50%);\r\n      z-index: 10;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      width: var(--st-size-38);\r\n      height: var(--st-size-38);\r\n      border-radius: var(--st-radius-circle);\r\n      border: 1px solid var(--st-color-border);\r\n      background: var(--st-color-surface);\r\n      color: var(--st-color-text-strong);\r\n      font-size: var(--st-text-xl);\r\n      opacity: 0.8;\r\n      transition:\r\n        opacity 0.3s ease,\r\n        transform 0.3s ease;\r\n    }\r\n\r\n    .nav:hover {\r\n      opacity: 1;\r\n      transform: translateY(-50%) scale(1.1);\r\n    }\r\n\r\n    .prev {\r\n      left: var(--st-space-12);\r\n    }\r\n\r\n    .next {\r\n      right: var(--st-space-12);\r\n    }\r\n\r\n    .indicators {\r\n      position: absolute;\r\n      bottom: var(--st-space-24);\r\n      left: 50%;\r\n      transform: translateX(-50%);\r\n      z-index: 10;\r\n      display: flex;\r\n      gap: var(--st-space-12);\r\n    }\r\n\r\n    .dot {\r\n      ${buttonResetStyles}\r\n      width: var(--st-space-12);\r\n      height: var(--st-space-12);\r\n      padding: 0;\r\n      border-radius: var(--st-radius-circle);\r\n      background: var(--st-color-border-strong);\r\n      transition:\r\n        background 0.3s ease,\r\n        transform 0.3s ease;\r\n    }\r\n\r\n    .dot:hover {\r\n      background: var(--st-color-text-muted);\r\n    }\r\n\r\n    .dot.active {\r\n      background: var(--st-color-text-strong);\r\n      transform: scale(1.2);\r\n    }\r\n\r\n    ${reducedMotionStyles}\r\n    @media (prefers-reduced-motion: reduce) {\r\n      ::slotted([data-st-active]) {\r\n        animation: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  @property({ type: Boolean, attribute: 'auto-play' })\r\n  autoPlay = true;\r\n\r\n  /** Autoplay delay in milliseconds. */\r\n  @property({ type: Number })\r\n  interval = 5000;\r\n\r\n  @property({ type: Boolean, attribute: 'show-arrows' })\r\n  showArrows = true;\r\n\r\n  @property({ type: Boolean, attribute: 'show-indicators' })\r\n  showIndicators = true;\r\n\r\n  @state() private index = 0;\r\n  @state() private count = 0;\r\n  private paused = false;\r\n  private timer?: ReturnType<typeof setInterval>;\r\n\r\n  connectedCallback() {\r\n    super.connectedCallback();\r\n    this.addEventListener('mouseenter', this.pause);\r\n    this.addEventListener('mouseleave', this.resume);\r\n    this.addEventListener('focusin', this.pause);\r\n    this.addEventListener('focusout', this.resume);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.stopTimer();\r\n    this.removeEventListener('mouseenter', this.pause);\r\n    this.removeEventListener('mouseleave', this.resume);\r\n    this.removeEventListener('focusin', this.pause);\r\n    this.removeEventListener('focusout', this.resume);\r\n    super.disconnectedCallback();\r\n  }\r\n\r\n  protected updated(changed: Map<string, unknown>) {\r\n    if (changed.has('index') || changed.has('count')) this.syncSlides();\r\n    if (changed.has('autoPlay') || changed.has('interval') || changed.has('count')) this.restartTimer();\r\n  }\r\n\r\n  private pause = () => {\r\n    this.paused = true;\r\n  };\r\n\r\n  private resume = () => {\r\n    this.paused = false;\r\n  };\r\n\r\n  private get slides(): Element[] {\r\n    return this.shadowRoot?.querySelector('slot')?.assignedElements({ flatten: true }) ?? [];\r\n  }\r\n\r\n  private syncSlides() {\r\n    this.slides.forEach((el, i) => el.toggleAttribute('data-st-active', i === this.index));\r\n  }\r\n\r\n  private onSlotChange() {\r\n    this.count = this.slides.length;\r\n    if (this.index >= this.count) this.index = 0;\r\n    this.syncSlides();\r\n  }\r\n\r\n  private stopTimer() {\r\n    if (this.timer !== undefined) clearInterval(this.timer);\r\n    this.timer = undefined;\r\n  }\r\n\r\n  private restartTimer() {\r\n    this.stopTimer();\r\n    if (!this.autoPlay || this.count < 2) return;\r\n    this.timer = setInterval(() => {\r\n      if (!this.paused) this.go(this.index + 1, 'next');\r\n    }, this.interval);\r\n  }\r\n\r\n  private go(target: number, direction: 'next' | 'prev') {\r\n    if (this.count === 0) return;\r\n    this.setAttribute('data-direction', direction);\r\n    this.index = (target + this.count) % this.count;\r\n    this.dispatchEvent(\r\n      new CustomEvent<CarouselChangeEventDetail>('carousel-change', {\r\n        detail: { index: this.index },\r\n        bubbles: true,\r\n        composed: true,\r\n      }),\r\n    );\r\n    this.restartTimer();\r\n  }\r\n\r\n  render() {\r\n    const multiple = this.count > 1;\r\n    return html`\r\n      <slot @slotchange=${this.onSlotChange}></slot>\r\n      ${this.showArrows && multiple\r\n        ? html`\r\n            <button part=\"nav-button prev\" class=\"nav prev\" aria-label=\"Previous Slide\" @click=${() => this.go(this.index - 1, 'prev')}>&#10094;</button>\r\n            <button part=\"nav-button next\" class=\"nav next\" aria-label=\"Next Slide\" @click=${() => this.go(this.index + 1, 'next')}>&#10095;</button>\r\n          `\r\n        : nothing}\r\n      ${this.showIndicators && multiple\r\n        ? html`<div class=\"indicators\" part=\"indicators\">\r\n            ${Array.from(\r\n              { length: this.count },\r\n              (_, i) => html`\r\n                <button\r\n                  part=\"dot\"\r\n                  class=\"dot ${i === this.index ? 'active' : ''}\"\r\n                  aria-label=\"Go to slide ${i + 1}\"\r\n                  aria-current=${i === this.index ? 'true' : 'false'}\r\n                  @click=${() => this.go(i, i > this.index ? 'next' : 'prev')}\r\n                ></button>\r\n              `,\r\n            )}\r\n          </div>`\r\n        : nothing}\r\n    `;\r\n  }\r\n}\r\n"],"mappings":"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","names":[]}