{"version":3,"sources":["../src/elements/rotator.ts","../src/styles/elements/rotator.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { stylesRotator } from '../styles/elements/rotator';\n\nexport const effects = ['fade', 'flip'] as const;\nexport enum EnumEffects {\n  Fade = 'fade',\n  Flip = 'flip',\n}\nexport type TypeEffects = typeof effects[number];\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-rotator\n * @summary A component that rotates through an array of text.\n *\n * @prop {number} activeSlide - The index number for the current slide.\n * @prop {string} width - The width of the rotator block.\n * @prop {string} height - The height of the rotator block.\n * @prop {array} messages - Text in the rotator. Supports HTML.\n * @prop {TypeEffects} effect - The transition effect type.\n * @prop {number} rotationSpeed - How fast, in seconds, each slide lasts. Stop the rotator with 0.\n *\n * @cssproperty --kemet-rotator-transition-speed - How long, in css time units, the transition effect lasts.\n *\n */\n\n@customElement('kemet-rotator')\nexport default class KemetRotator extends LitElement {\n  static styles = [stylesRotator];\n\n  @property({ type: Number })\n  activeSlide: number = 0;\n\n  @property({ type: String })\n  width: string = 'auto';\n\n  @property({ type: String })\n  height: string = 'auto';\n\n  @property({ type: Array })\n  messages: string[] = [];\n\n  @property({ type: String, reflect: true })\n  effect: TypeEffects = EnumEffects.Fade;\n\n  @property({ type: Number, attribute: 'rotation-speed' })\n  rotationSpeed: number = 3;\n\n  @state()\n  prevSlide: number | null;\n\n  firstUpdated() {\n    // standard properties\n    this.prevSlide = null;\n\n    window.addEventListener('resize', this.setDimensions.bind(this));\n  }\n\n  updated(changed: Map<string, never>) {\n    const widthHasChanged = !!changed.get('width');\n    const heightHasChanged = !!changed.get('height');\n\n    this.setDimensions();\n\n    // only trigger slide updates when width and height has not changed\n    if (!widthHasChanged && !heightHasChanged) {\n      setTimeout(() => {\n        if (this.rotationSpeed > 0) {\n          this.nextSlide();\n        }\n      }, this.rotationSpeed * 1000);\n    }\n  }\n\n  render() {\n    const setWidth = this.effect === 'flip' ? `width:${this.width};` : '';\n    const setHeight = this.effect === 'flip' ? `height:${this.height};` : '';\n\n    return html`\n      <span class=\"rotator\" style=\"${setWidth} ${setHeight}\">\n        ${this.makeMessages()}\n      </span>\n    `;\n  }\n\n  makeMessages() {\n    return this.messages.map((message, index) => {\n      const setActiveClass = this.activeSlide === index ? 'rotator__slide--active' : '';\n      const setPrevClass = this.prevSlide === index ? 'rotator__slide--prev' : '';\n\n      return html`\n        <span class=\"rotator__slide ${setActiveClass} ${setPrevClass}\">\n          ${unsafeHTML(message)}\n        </span>\n      `;\n    });\n  }\n\n  setDimensions() {\n    if (this.effect === 'flip') {\n      this.width = `${this.offsetWidth}px`;\n\n      const slides = this.shadowRoot.querySelectorAll('.rotator__slide');\n      let tallest = 0;\n\n      slides.forEach((slide: HTMLElement) => {\n        if (slide.offsetHeight > tallest) {\n          tallest = slide.offsetHeight;\n        }\n      });\n\n      this.height = `${tallest}px`;\n    }\n  }\n\n  /**\n   * Rotates to the next slide.\n   * @public\n   * @method nextSlide\n   * @returns {void}\n   */\n  nextSlide() {\n    if (this.activeSlide < this.messages.length - 1) {\n      this.activeSlide += 1;\n      this.prevSlide = this.activeSlide - 1;\n    } else {\n      this.activeSlide = 0;\n      this.prevSlide = this.messages.length - 1;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-rotator': KemetRotator\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesRotator = css`\n  :host {\n    --kemet-rotator-transition-speed: 500ms;\n\n    display: flex;\n  }\n\n  .rotator__slide {\n    pointer-events: none;\n  }\n\n  .rotator__slide--active {\n    pointer-events: auto;\n  }\n\n  /* fade effect */\n  :host([effect=\"fade\"]) .rotator {\n    display: inline-flex;\n    flex-wrap: nowrap;\n    flex-direction: row;\n  }\n\n  :host([effect=\"fade\"]) .rotator__slide {\n    width: 100%;\n    flex: none;\n    opacity: 0;\n    box-sizing: border-box;\n    transition: all var(--kemet-rotator-transition-speed) ease;\n  }\n\n  :host([effect=\"fade\"]) .rotator__slide:not(:first-child) {\n    margin-left: -100%; /* this is the bulk of the overlay trick */\n  }\n\n  :host([effect=\"fade\"]) .rotator__slide--active {\n    opacity: 1;\n  }\n\n  /* flip effect */\n  :host([effect=\"flip\"]) .rotator {\n    display: flex;\n    position: relative;\n\n    perspective: 500;\n  }\n\n  :host([effect=\"flip\"]) .rotator__slide {\n    display: block;\n    width: auto;\n    position: absolute;\n    top: -20px;\n    left: 0;\n\n    opacity: 0;\n\n    transform: rotateX(90deg);\n    transform-origin: 0% 0%;\n    transition: all var(--kemet-rotator-transition-speed) ease;\n  }\n\n  :host([effect=\"flip\"]) .rotator__slide--active {\n    top: 0;\n    opacity: 1;\n\n    transform: rotateX(0deg);\n  }\n\n  :host([effect=\"flip\"]) .rotator__slide--prev {\n    top: 40px;;\n    transform: rotateX(-90deg);\n  }\n`;\n"],"mappings":";;;;;AAAA,SAAS,MAAM,kBAAkB;AACjC,SAAS,eAAe,UAAU,aAAa;AAC/C,SAAS,kBAAkB;;;ACF3B,SAAS,WAAW;AAEb,IAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ADGtB,IAAM,UAAU,CAAC,QAAQ,MAAM;AAC/B,IAAK,cAAL,kBAAKA,iBAAL;AACL,EAAAA,aAAA,UAAO;AACP,EAAAA,aAAA,UAAO;AAFG,SAAAA;AAAA,GAAA;AAyBZ,IAAqB,eAArB,cAA0C,WAAW;AAAA,EAArD;AAAA;AAIE,uBAAsB;AAGtB,iBAAgB;AAGhB,kBAAiB;AAGjB,oBAAqB,CAAC;AAGtB,kBAAsB;AAGtB,yBAAwB;AAAA;AAAA,EAKxB,eAAe;AAEb,SAAK,YAAY;AAEjB,WAAO,iBAAiB,UAAU,KAAK,cAAc,KAAK,IAAI,CAAC;AAAA,EACjE;AAAA,EAEA,QAAQ,SAA6B;AACnC,UAAM,kBAAkB,CAAC,CAAC,QAAQ,IAAI,OAAO;AAC7C,UAAM,mBAAmB,CAAC,CAAC,QAAQ,IAAI,QAAQ;AAE/C,SAAK,cAAc;AAGnB,QAAI,CAAC,mBAAmB,CAAC,kBAAkB;AACzC,iBAAW,MAAM;AACf,YAAI,KAAK,gBAAgB,GAAG;AAC1B,eAAK,UAAU;AAAA,QACjB;AAAA,MACF,GAAG,KAAK,gBAAgB,GAAI;AAAA,IAC9B;AAAA,EACF;AAAA,EAEA,SAAS;AACP,UAAM,WAAW,KAAK,WAAW,SAAS,SAAS,KAAK,KAAK,MAAM;AACnE,UAAM,YAAY,KAAK,WAAW,SAAS,UAAU,KAAK,MAAM,MAAM;AAEtE,WAAO;AAAA,qCAC0B,QAAQ,IAAI,SAAS;AAAA,UAChD,KAAK,aAAa,CAAC;AAAA;AAAA;AAAA,EAG3B;AAAA,EAEA,eAAe;AACb,WAAO,KAAK,SAAS,IAAI,CAAC,SAAS,UAAU;AAC3C,YAAM,iBAAiB,KAAK,gBAAgB,QAAQ,2BAA2B;AAC/E,YAAM,eAAe,KAAK,cAAc,QAAQ,yBAAyB;AAEzE,aAAO;AAAA,sCACyB,cAAc,IAAI,YAAY;AAAA,YACxD,WAAW,OAAO,CAAC;AAAA;AAAA;AAAA,IAG3B,CAAC;AAAA,EACH;AAAA,EAEA,gBAAgB;AACd,QAAI,KAAK,WAAW,QAAQ;AAC1B,WAAK,QAAQ,GAAG,KAAK,WAAW;AAEhC,YAAM,SAAS,KAAK,WAAW,iBAAiB,iBAAiB;AACjE,UAAI,UAAU;AAEd,aAAO,QAAQ,CAAC,UAAuB;AACrC,YAAI,MAAM,eAAe,SAAS;AAChC,oBAAU,MAAM;AAAA,QAClB;AAAA,MACF,CAAC;AAED,WAAK,SAAS,GAAG,OAAO;AAAA,IAC1B;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,YAAY;AACV,QAAI,KAAK,cAAc,KAAK,SAAS,SAAS,GAAG;AAC/C,WAAK,eAAe;AACpB,WAAK,YAAY,KAAK,cAAc;AAAA,IACtC,OAAO;AACL,WAAK,cAAc;AACnB,WAAK,YAAY,KAAK,SAAS,SAAS;AAAA,IAC1C;AAAA,EACF;AACF;AAvGqB,aACZ,SAAS,CAAC,aAAa;AAG9B;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAHP,aAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GANP,aAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GATP,aAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,MAAM,CAAC;AAAA,GAZN,aAanB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAftB,aAgBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,iBAAiB,CAAC;AAAA,GAlBpC,aAmBnB;AAGA;AAAA,EADC,MAAM;AAAA,GArBY,aAsBnB;AAtBmB,eAArB;AAAA,EADC,cAAc,eAAe;AAAA,GACT;","names":["EnumEffects"]}