kemet-ui 1.0.0 → 1.2.0

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

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

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/kemet-carousel-link.js

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

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

@@ -0,0 +1,47 @@
+import { html, css, LitElement } from 'lit';
+
+export default class KemetCarouselNext 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.next()} @click=${() => this.next()}>
+        <slot></slot>
+      </span>
+    `;
+  }
+
+  next() {
+    if (!this.disabled) {
+      this.dispatchEvent(new CustomEvent('kemet-carousel-next', {
+        bubbles: true,
+        composed: true,
+        detail: this,
+      }));
+    }
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-carousel-next') || customElements.define('kemet-carousel-next', KemetCarouselNext);

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

@@ -0,0 +1,47 @@
+import { html, css, LitElement } from 'lit';
+
+export class KemetCarouselPrev 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.prev()} @click=${() => this.prev()}>
+        <slot></slot>
+      </span>
+    `;
+  }
+
+  prev() {
+    if (!this.disabled) {
+      this.dispatchEvent(new CustomEvent('kemet-carousel-prev', {
+        bubbles: true,
+        composed: true,
+        detail: this,
+      }));
+    }
+  }
+}
+
+// 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);