kemet-ui 0.2.0 → 1.1.0

package/dist/components/kemet-carousel/kemet-carousel-first.js

@@ -0,0 +1,47 @@
+import { html, css, LitElement } from 'lit';
+
+export class KemetCarouselFirst extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          cursor: pointer;
+        }
+
+        :host([disabled]) {
+          cursor: not-allowed;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      disabled: {
+        type: Boolean,
+        reflect: true,
+      },
+    };
+  }
+
+  render() {
+    return html`
+      <span tabindex="0" @keyup=${() => this.first()} @click=${() => this.first()}>
+        <slot></slot>
+      </span>
+    `;
+  }
+
+  first() {
+    if (!this.disabled) {
+      this.dispatchEvent(new CustomEvent('kemet-carousel-first', {
+        bubbles: true,
+        composed: true,
+        detail: this,
+      }));
+    }
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-carousel-first') || customElements.define('kemet-carousel-first', KemetCarouselFirst);

package/dist/components/kemet-carousel/kemet-carousel-last.js

@@ -0,0 +1,47 @@
+import { html, css, LitElement } from 'lit';
+
+export class KemetCarouselLast extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          cursor: pointer;
+        }
+
+        :host([disabled]) {
+          cursor: not-allowed;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      disabled: {
+        type: Boolean,
+        reflect: true,
+      },
+    };
+  }
+
+  render() {
+    return html`
+      <span tabindex="0" @keyup=${() => this.last()} @click=${() => this.last()}>
+        <slot></slot>
+      </span>
+    `;
+  }
+
+  last() {
+    if (!this.disabled) {
+      this.dispatchEvent(new CustomEvent('kemet-carousel-last', {
+        bubbles: true,
+        composed: true,
+        detail: this,
+      }));
+    }
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-carousel-last') || customElements.define('kemet-carousel-last', KemetCarouselLast);

package/dist/components/{kemet-carousel-link.js → kemet-carousel/kemet-carousel-link.js}

@@ -1,6 +1,6 @@
 import { html, css, LitElement } from 'lit';
 
-export class KemetCarouselLink extends LitElement {
+export default class KemetCarouselLink extends LitElement {
   static get properties() {
     return {
       slide: {
@@ -21,6 +21,10 @@ export class KemetCarouselLink extends LitElement {
   static get styles() {
     return [
       css`
+        :host([selected]) {
+          color: var(--kemet-carousel-link-selected-color, var(--kemet-color-primary));
+        }
+
         :host(:not([selected])) {
           cursor: pointer;
         }
@@ -51,4 +55,5 @@ export class KemetCarouselLink extends LitElement {
   }
 }
 
-window.customElements.define('kemet-carousel-link', KemetCarouselLink);
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-carousel-link') || customElements.define('kemet-carousel-link', KemetCarouselLink);

package/dist/components/{kemet-carousel-next.js → kemet-carousel/kemet-carousel-next.js}

@@ -1,6 +1,6 @@
 import { html, css, LitElement } from 'lit';
 
-export class KemetCarouselNext extends LitElement {
+export default class KemetCarouselNext extends LitElement {
   static get styles() {
     return [
       css`
@@ -43,4 +43,5 @@ export class KemetCarouselNext extends LitElement {
   }
 }
 
-window.customElements.define('kemet-carousel-next', KemetCarouselNext);
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-carousel-next') || customElements.define('kemet-carousel-next', KemetCarouselNext);

package/dist/components/{kemet-carousel-prev.js → kemet-carousel/kemet-carousel-prev.js}

@@ -43,4 +43,5 @@ export class KemetCarouselPrev extends LitElement {
   }
 }
 
-window.customElements.define('kemet-carousel-prev', KemetCarouselPrev);
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-carousel-prev') || customElements.define('kemet-carousel-prev', KemetCarouselPrev);

package/dist/components/kemet-carousel/kemet-carousel-slide.js

@@ -0,0 +1,51 @@
+import { html, css, LitElement } from 'lit';
+
+export default class KemetCarouselSlide extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host,
+        :host *,
+        :host *::before,
+        *::after {
+          box-sizing: border-box;
+        }
+
+        :host {
+          flex: 0 0 auto;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      /**
+       * Determines if the slide is selected
+       */
+      selected: {
+        type: Boolean,
+        reflect: true,
+      },
+      'aria-hidden': {
+        type: String,
+        reflect: true,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.selected = false;
+    this['aria-hidden'] = 'true';
+  }
+
+  render() {
+    return html`
+      <slot></slot>
+    `;
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-carousel-slide') || customElements.define('kemet-carousel-slide', KemetCarouselSlide);

package/dist/components/kemet-carousel/kemet-carousel-total.js

@@ -0,0 +1,36 @@
+import { html, css, LitElement } from 'lit';
+
+export class KemetCarouselTotal extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: inline-block;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      total: {
+        type: Number,
+      },
+    };
+  }
+
+  firstUpdated() {
+    this.carousel = this.closest('kemet-carousel');
+  }
+
+  updated() {
+    this.total = this.carousel.total;
+  }
+
+  render() {
+    return html`${this.total}`;
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-carousel-total') || customElements.define('kemet-carousel-total', KemetCarouselTotal);