kemet-ui 1.4.0 → 2.0.0

package/dist/components/kemet-scroll-snap/kemet-scroll-snap-paginator.js

@@ -1,6 +1,8 @@
-import { html, css, LitElement } from 'lit';
-import { emitEvent } from '../../utilities/misc/events.js';
-
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { emitEvent } from '../../utilities/misc/events';
+import { stylesScrollSnapPaginator } from './styles';
 /**
  * @since 1.0.0
  * @status stable
@@ -23,105 +25,40 @@ import { emitEvent } from '../../utilities/misc/events.js';
  * @event kemet-scroll-snap-focus - Fires when a set of slides are focused on.
  *
  */
-
-export default class KemetScrollSnapPaginator extends LitElement {
-  static get styles() {
-    return css`
-      :host {
-        margin: auto;
-        padding: var(--kemet-scroll-snap-paginator-padding, 1rem 0);
-      }
-
-      nav {
-        display: flex;
-        gap: var(--kemet-scroll-snap-paginator-gap, 0.5rem);
-      }
-
-      :host([center]) nav {
-        justify-content: center;
-      }
-
-      .link {
-        cursor: pointer;
-        color: var(--kemet-scroll-snap-paginator-link-color, var(--kemet-color-primary));
-      }
-    `;
-  }
-
-  static get properties() {
-    return {
-      slides: {
-        type: Array,
-      },
-      icon: {
-        type: String,
-      },
-      size: {
-        type: Number,
-      },
-      center: {
-        type: Boolean,
-        reflect: true,
-      },
-      hideFocusedLinks: {
-        type: Boolean,
-        attribute: 'hide-focused-links',
-      },
-      useNumberPages: {
-        type: Boolean,
-        reflect: true,
-        attribute: 'use-number-pages',
-      },
-      useLabelPages: {
-        type: Boolean,
-        reflect: true,
-        attribute: 'use-label-pages',
-      },
-    };
-  }
-
-  constructor() {
-    super();
-
-    // managed properties
-    this.slides = [];
-    this.icon = 'circle-fill';
-    this.size = 16;
-    this.hideFocusedLinks = false;
-    this.useNumberPages = false;
-    this.useLabelPages = false;
-  }
-
-  updated() {
-    const scrollSnapElement = this.closest('kemet-scroll-snap');
-
-    if (scrollSnapElement) {
-      scrollSnapElement.addEventListener('kemet-scroll-snap-make-slides', (event) => {
-        this.slides = event.detail;
-      });
+let KemetScrollSnapPaginator = class KemetScrollSnapPaginator extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.slides = [];
+        this.icon = 'circle-fill';
+        this.size = 16;
+        this.hideFocusedLinks = false;
+        this.useNumberPages = false;
+        this.useLabelPages = false;
+    }
+    updated() {
+        const scrollSnapElement = this.closest('kemet-scroll-snap');
+        if (scrollSnapElement) {
+            scrollSnapElement.addEventListener('kemet-scroll-snap-make-slides', (event) => {
+                this.slides = event.detail;
+            });
+        }
     }
-  }
-
-  render() {
-    return html`
+    render() {
+        return html `
       <nav part="nav">${this.makePagination()}</nav>
     `;
-  }
-
-  makePagination() {
-    let counter = 0;
-
-    if (this.slides) {
-      return this.slides.map((slide) => {
-        counter = counter += 1;
-
-        if (slide.focused) {
-          return html`
+    }
+    makePagination() {
+        let counter = 0;
+        if (this.slides) {
+            return this.slides.map((slide) => {
+                counter = counter += 1;
+                if (slide.focused) {
+                    return html `
             <span part="span">${this.pageDisplay(slide, counter)}</span>
           `;
-        }
-
-        return html`
+                }
+                return html `
           <span
             class="link"
             tabindex="0"
@@ -132,34 +69,52 @@ export default class KemetScrollSnapPaginator extends LitElement {
             ${this.pageDisplay(slide, counter)}
           </span>
         `;
-      });
+            });
+        }
+        return null;
     }
-
-    return null;
-  }
-
-  pageDisplay(slide, visibleIndex) {
-    if (this.useNumberPages) {
-      return visibleIndex;
+    pageDisplay(slide, visibleIndex) {
+        if (this.useNumberPages) {
+            return visibleIndex;
+        }
+        if (this.useLabelPages) {
+            return slide.label;
+        }
+        return html `<kemet-icon icon=${this.icon} size=${this.size}></kemet-icon>`;
     }
-
-    if (this.useLabelPages) {
-      return slide.label;
+    slideLink(index) {
+        emitEvent(this, 'kemet-scroll-snap-focus', index);
     }
-
-    return html`<kemet-icon icon=${this.icon} size=${this.size}></kemet-icon>`;
-  }
-
-  slideLink(index) {
-    emitEvent(this, 'kemet-scroll-snap-focus', index);
-  }
-
-  handleKeyboardInput(event, id) {
-    if (event.code === 'Enter' || event.code === 'Space') {
-      this.slideLink(id);
+    handleKeyboardInput(event, id) {
+        if (event.code === 'Enter' || event.code === 'Space') {
+            this.slideLink(id);
+        }
     }
-  }
-}
-
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-scroll-snap-paginator') || customElements.define('kemet-scroll-snap-paginator', KemetScrollSnapPaginator);
+};
+KemetScrollSnapPaginator.styles = [stylesScrollSnapPaginator];
+__decorate([
+    property({ type: Array })
+], KemetScrollSnapPaginator.prototype, "slides", void 0);
+__decorate([
+    property({ type: String })
+], KemetScrollSnapPaginator.prototype, "icon", void 0);
+__decorate([
+    property({ type: Number })
+], KemetScrollSnapPaginator.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetScrollSnapPaginator.prototype, "center", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hide-focused-links' })
+], KemetScrollSnapPaginator.prototype, "hideFocusedLinks", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'use-number-pages' })
+], KemetScrollSnapPaginator.prototype, "useNumberPages", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'use-label-pages' })
+], KemetScrollSnapPaginator.prototype, "useLabelPages", void 0);
+KemetScrollSnapPaginator = __decorate([
+    customElement('kemet-scroll-snap-paginator')
+], KemetScrollSnapPaginator);
+export default KemetScrollSnapPaginator;
+//# sourceMappingURL=kemet-scroll-snap-paginator.js.map

package/dist/components/kemet-scroll-snap/kemet-scroll-snap-paginator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-scroll-snap-paginator.js","sourceRoot":"","sources":["../../../src/components/kemet-scroll-snap/kemet-scroll-snap-paginator.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesScrollSnapPaginator } from './styles';\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. Default: 1rem 0.\n * @cssproperty --kemet-scroll-snap-paginator-gap - The space between pagination items. Default: 0.5rem.\n * @cssproperty --kemet-scroll-snap-paginator-link-color - The color of a linkable pagination item. Default: var(--kemet-color-primary).\n *\n * @event kemet-scroll-snap-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: any[] = [];\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\n  updated() {\n    const scrollSnapElement = this.closest('kemet-scroll-snap');\n\n    if (scrollSnapElement) {\n      scrollSnapElement.addEventListener('kemet-scroll-snap-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 => 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, visibleIndex) {\n    if (this.useNumberPages) {\n      return visibleIndex;\n    }\n\n    if (this.useLabelPages) {\n      return slide.label;\n    }\n\n    return html`<kemet-icon icon=${this.icon} size=${this.size}></kemet-icon>`;\n  }\n\n  slideLink(index) {\n    emitEvent(this, 'kemet-scroll-snap-focus', index);\n  }\n\n  handleKeyboardInput(event, id) {\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"]}

package/dist/components/kemet-scroll-snap/kemet-scroll-snap-slide.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-scroll-snap-slide
+ * @summary A slide in a scroll snap component.
+ *
+ * @prop {boolean} focused - Is true when the slide is fully visible in it's container.
+ * @prop {number} index - Identifies the slide.
+ * @prop {string} label - Labels the slide.
+ *
+ * @cssproperty --kemet-scroll-snap-slide-width - The width of the slide. Default: 100%.
+ * @cssproperty --kemet-scroll-snap-slide-align - The slide alignment. Default: center.
+ *
+ */
+export default class KemetScrollSnapSlide extends LitElement {
+    static styles: import("lit").CSSResult[];
+    focused: boolean;
+    index: number;
+    label: string;
+    updated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    addTabIndex(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-scroll-snap-slide': KemetScrollSnapSlide;
+    }
+}

package/dist/components/kemet-scroll-snap/kemet-scroll-snap-slide.js

@@ -1,5 +1,6 @@
+import { __decorate } from "tslib";
 import { html, css, LitElement } from 'lit';
-
+import { customElement, property } from 'lit/decorators.js';
 /**
  * @since 1.0.0
  * @status stable
@@ -8,57 +9,45 @@ import { html, css, LitElement } from 'lit';
  * @summary A slide in a scroll snap component.
  *
  * @prop {boolean} focused - Is true when the slide is fully visible in it's container.
- * @prop {string} index - Identifies the slide.
+ * @prop {number} index - Identifies the slide.
  * @prop {string} label - Labels the slide.
  *
  * @cssproperty --kemet-scroll-snap-slide-width - The width of the slide. Default: 100%.
  * @cssproperty --kemet-scroll-snap-slide-align - The slide alignment. Default: center.
  *
  */
-
-export default class KemetScrollSnapSlide extends LitElement {
-  static get styles() {
-    return css`
-      :host {
-        display: block;
-        flex: 0 0 auto;
-        width: var(--kemet-scroll-snap-slide-width, 100%);
-        scroll-snap-align: var(--kemet-scroll-snap-slide-align, center);
-      }
-    `;
-  }
-
-  static get properties() {
-    return {
-      focused: {
-        type: Boolean,
-        reflect: true,
-      },
-      index: {
-        type: String,
-        reflect: true,
-      },
-      label: {
-        type: String,
-        reflect: true,
-      },
-    };
-  }
-
-  updated() {
-    this.addTabIndex();
-  }
-
-  render() {
-    return html`
+let KemetScrollSnapSlide = class KemetScrollSnapSlide extends LitElement {
+    updated() {
+        this.addTabIndex();
+    }
+    render() {
+        return html `
       <slot></slot>
     `;
-  }
-
-  addTabIndex() {
-    this.setAttribute('tabindex', '0');
-  }
-}
-
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-scroll-snap-slide') || customElements.define('kemet-scroll-snap-slide', KemetScrollSnapSlide);
+    }
+    addTabIndex() {
+        this.setAttribute('tabindex', '0');
+    }
+};
+KemetScrollSnapSlide.styles = [css `
+    :host {
+      display: block;
+      flex: 0 0 auto;
+      width: var(--kemet-scroll-snap-slide-width, 100%);
+      scroll-snap-align: var(--kemet-scroll-snap-slide-align, center);
+    }
+  `];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetScrollSnapSlide.prototype, "focused", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], KemetScrollSnapSlide.prototype, "index", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], KemetScrollSnapSlide.prototype, "label", void 0);
+KemetScrollSnapSlide = __decorate([
+    customElement('kemet-scroll-snap-slide')
+], KemetScrollSnapSlide);
+export default KemetScrollSnapSlide;
+//# sourceMappingURL=kemet-scroll-snap-slide.js.map

package/dist/components/kemet-scroll-snap/kemet-scroll-snap-slide.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-scroll-snap-slide.js","sourceRoot":"","sources":["../../../src/components/kemet-scroll-snap/kemet-scroll-snap-slide.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D;;;;;;;;;;;;;;GAcG;AAGH,IAAqB,oBAAoB,GAAzC,MAAqB,oBAAqB,SAAQ,UAAU;IAmB1D,OAAO;QACL,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;IAED,WAAW;QACT,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;IACrC,CAAC;CACF,CAAA;AA/BQ,2BAAM,GAAG,CAAC,GAAG,CAAA;;;;;;;GAOnB,CAAC,CAAC;AAGH;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAC5B;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAC5B;AAjBK,oBAAoB;IADxC,aAAa,CAAC,yBAAyB,CAAC;GACpB,oBAAoB,CAgCxC;eAhCoB,oBAAoB","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-scroll-snap-slide\n * @summary A slide in a scroll snap component.\n *\n * @prop {boolean} focused - Is true when the slide is fully visible in it's container.\n * @prop {number} index - Identifies the slide.\n * @prop {string} label - Labels the slide.\n *\n * @cssproperty --kemet-scroll-snap-slide-width - The width of the slide. Default: 100%.\n * @cssproperty --kemet-scroll-snap-slide-align - The slide alignment. Default: center.\n *\n */\n\n@customElement('kemet-scroll-snap-slide')\nexport default class KemetScrollSnapSlide extends LitElement {\n  static styles = [css`\n    :host {\n      display: block;\n      flex: 0 0 auto;\n      width: var(--kemet-scroll-snap-slide-width, 100%);\n      scroll-snap-align: var(--kemet-scroll-snap-slide-align, center);\n    }\n  `];\n\n  @property({ type: Boolean, reflect: true })\n  focused: boolean;\n\n  @property({ type: Number, reflect: true })\n  index: number;\n\n  @property({ type: String, reflect: true })\n  label: string;\n\n  updated() {\n    this.addTabIndex();\n  }\n\n  render() {\n    return html`\n      <slot></slot>\n    `;\n  }\n\n  addTabIndex() {\n    this.setAttribute('tabindex', '0');\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-scroll-snap-slide': KemetScrollSnapSlide\n  }\n}\n"]}

package/dist/components/kemet-scroll-snap/kemet-scroll-snap.d.ts

@@ -0,0 +1,46 @@
+import { LitElement } from 'lit';
+import { TypeAxis, TypePagination } from './types';
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-scroll-snap
+ * @summary A scroll-snap implementation for responsive sliders.
+ *
+ * @prop {string} axis - Determines the direction the component flows. Values include: (horizontal | vertical)
+ * @prop {string} pagination - Determines where to display the paginator. Values include: (top | right | bottom | left)
+ *
+ * @slot slides - Place your slides here.
+ * @slot pagination - Place the paginator component here if you want one.
+ *
+ * @csspart slides - The slides container.
+ * @csspart pagination - The pagination element.
+ *
+ * @cssproperty --kemet-scroll-snap-gap - Space between the slides. Default: 1.5rem.
+ * @cssproperty --kemet-scroll-snap-horizontal-max-width - The horizontal max width of the container. Default: 1024px.
+ * @cssproperty --kemet-scroll-snap-vertical-height - The vertical height of the container. Default: 100vh.
+ * @cssproperty --kemet-scroll-snap-slides-vertical-padding - Padding on the vertical axis. Default: 0 2rem.
+ *
+ * @event kemet-scroll-snap-make-slides - Fires when slide data has been created.
+ *
+ */
+export default class KemetScrollSnap extends LitElement {
+    static styles: import("lit").CSSResult[];
+    axis: TypeAxis;
+    pagination: TypePagination;
+    isTouchDevice: boolean;
+    slides: any[];
+    constructor();
+    firstUpdated(): void;
+    updated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    setFocusedSlides(): void;
+    makeSlides(): void;
+    focusSlide(index: any): void;
+    setVerticalAttribute(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-scroll-snap': KemetScrollSnap;
+    }
+}