{"version":3,"sources":["../src/elements/scroll-snap-paginator.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emitEvent } from '../utilities/events';\nimport { stylesScrollSnapPaginator } from '../styles/elements/scroll-snap';\nimport KemetScrollSnapSlide from './scroll-snap-slide';\nimport './icon-bootstrap';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-scroll-snap-paginator\n * @summary The scroll snap's pagination.\n *\n * @prop {array} slides - Information about each slide.\n * @prop {string} icon - A string representing which icon to use for pagination. Supports icons used in kemet-icon.\n * @prop {number} size - The size in pixels of the icons.\n * @prop {boolean} center - Determines whether to center the pagination items.\n * @prop {boolean} hideFocusedLinks - Will hide inactive pagination items if set to true.\n * @prop {boolean} useNumberPages - If set to true, the pages in the pagination iterator will appear as a set of numbers.\n * @prop {boolean} useLabelPages - If set to true, the pages in the pagination iterator will appear as the label set on the slide.\n *\n * @cssproperty --kemet-scroll-snap-paginator-padding - The padding on the container.\n * @cssproperty --kemet-scroll-snap-paginator-gap - The space between pagination items.\n * @cssproperty --kemet-scroll-snap-paginator-link-color - The color of a linkable pagination item.\n *\n * @event kemet-focus - Fires when a set of slides are focused on.\n *\n */\n\n@customElement('kemet-scroll-snap-paginator')\nexport default class KemetScrollSnapPaginator extends LitElement {\n  static styles = [stylesScrollSnapPaginator];\n\n  @property({ type: Array })\n  slides: KemetScrollSnapSlide[] = [];\n\n  @property({ type: String })\n  icon: string = 'circle-fill';\n\n  @property({ type: Number })\n  size: number = 16;\n\n  @property({ type: Boolean, reflect: true })\n  center: boolean;\n\n  @property({ type: Boolean, attribute: 'hide-focused-links' })\n  hideFocusedLinks: boolean = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'use-number-pages' })\n  useNumberPages: boolean = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'use-label-pages' })\n  useLabelPages: boolean = false;\n\n  updated() {\n    const scrollSnapElement = this.closest('kemet-scroll-snap');\n\n    if (scrollSnapElement) {\n      scrollSnapElement.addEventListener('kemet-make-slides', (event: CustomEvent) => {\n        this.slides = event.detail;\n      });\n    }\n  }\n\n  render() {\n    return html`\n      <nav part=\"nav\">${this.makePagination()}</nav>\n    `;\n  }\n\n  makePagination() {\n    let counter = 0;\n\n    if (this.slides) {\n      return this.slides.map((slide) => {\n        counter = counter += 1;\n\n        if (slide.focused) {\n          return html`\n            <span part=\"span\">${this.pageDisplay(slide, counter)}</span>\n          `;\n        }\n\n        return html`\n          <span\n            class=\"link\"\n            tabindex=\"0\"\n            role=\"button\"\n            @keyup=\"${(event: KeyboardEvent) => this.handleKeyboardInput(event, slide.id)}\"\n            @click=${() => this.slideLink(slide.id)}\n            aria-label=\"${slide.label}\">\n            ${this.pageDisplay(slide, counter)}\n          </span>\n        `;\n      });\n    }\n\n    return null;\n  }\n\n  pageDisplay(slide: KemetScrollSnapSlide, visibleIndex: number) {\n    if (this.useNumberPages) {\n      return visibleIndex;\n    }\n\n    if (this.useLabelPages) {\n      return slide.label;\n    }\n\n    return html`<kemet-icon-bootstrap icon=${this.icon} size=${this.size}></kemet-icon-bootstrap>`;\n  }\n\n  slideLink(index: string) {\n    emitEvent(this, 'kemet-focus', index);\n  }\n\n  handleKeyboardInput(event: KeyboardEvent, id: string) {\n    if (event.code === 'Enter' || event.code === 'Space') {\n      this.slideLink(id);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-scroll-snap-paginator': KemetScrollSnapPaginator\n  }\n}\n"],"mappings":";;;;;;;;;;;AAAA,SAAS,MAAM,kBAAkB;AACjC,SAAS,eAAe,gBAAgB;AA8BxC,IAAqB,2BAArB,cAAsD,WAAW;AAAA,EAAjE;AAAA;AAIE,kBAAiC,CAAC;AAGlC,gBAAe;AAGf,gBAAe;AAMf,4BAA4B;AAG5B,0BAA0B;AAG1B,yBAAyB;AAAA;AAAA,EAEzB,UAAU;AACR,UAAM,oBAAoB,KAAK,QAAQ,mBAAmB;AAE1D,QAAI,mBAAmB;AACrB,wBAAkB,iBAAiB,qBAAqB,CAAC,UAAuB;AAC9E,aAAK,SAAS,MAAM;AAAA,MACtB,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,wBACa,KAAK,eAAe,CAAC;AAAA;AAAA,EAE3C;AAAA,EAEA,iBAAiB;AACf,QAAI,UAAU;AAEd,QAAI,KAAK,QAAQ;AACf,aAAO,KAAK,OAAO,IAAI,CAAC,UAAU;AAChC,kBAAU,WAAW;AAErB,YAAI,MAAM,SAAS;AACjB,iBAAO;AAAA,gCACe,KAAK,YAAY,OAAO,OAAO,CAAC;AAAA;AAAA,QAExD;AAEA,eAAO;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKO,CAAC,UAAyB,KAAK,oBAAoB,OAAO,MAAM,EAAE,CAAC;AAAA,qBACpE,MAAM,KAAK,UAAU,MAAM,EAAE,CAAC;AAAA,0BACzB,MAAM,KAAK;AAAA,cACvB,KAAK,YAAY,OAAO,OAAO,CAAC;AAAA;AAAA;AAAA,MAGxC,CAAC;AAAA,IACH;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,YAAY,OAA6B,cAAsB;AAC7D,QAAI,KAAK,gBAAgB;AACvB,aAAO;AAAA,IACT;AAEA,QAAI,KAAK,eAAe;AACtB,aAAO,MAAM;AAAA,IACf;AAEA,WAAO,kCAAkC,KAAK,IAAI,SAAS,KAAK,IAAI;AAAA,EACtE;AAAA,EAEA,UAAU,OAAe;AACvB,cAAU,MAAM,eAAe,KAAK;AAAA,EACtC;AAAA,EAEA,oBAAoB,OAAsB,IAAY;AACpD,QAAI,MAAM,SAAS,WAAW,MAAM,SAAS,SAAS;AACpD,WAAK,UAAU,EAAE;AAAA,IACnB;AAAA,EACF;AACF;AA3FqB,yBACZ,SAAS,CAAC,yBAAyB;AAG1C;AAAA,EADC,SAAS,EAAE,MAAM,MAAM,CAAC;AAAA,GAHN,yBAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GANP,yBAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GATP,yBAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAZvB,yBAanB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,qBAAqB,CAAC;AAAA,GAfzC,yBAgBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,mBAAmB,CAAC;AAAA,GAlBtD,yBAmBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,kBAAkB,CAAC;AAAA,GArBrD,yBAsBnB;AAtBmB,2BAArB;AAAA,EADC,cAAc,6BAA6B;AAAA,GACvB;","names":[]}