@sankhyatronics/sankhya-cms 0.1.1 → 0.1.2

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":[]}