kemet-ui 0.2.0 → 1.1.0

package/dist/components/kemet-tabs.js

@@ -1,350 +0,0 @@
-/* eslint-disable no-lonely-if */
-/* eslint-disable no-case-declarations */
-import { LitElement, html, css } from 'lit';
-
-export class KemetTabs extends LitElement {
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: block;
-          overflow: hidden;
-        }
-
-        ::slotted([slot='links']) {
-          overflow: auto;
-        }
-
-        ::slotted([slot='panels']) {
-          display: flex;
-        }
-
-        :host([panel-effect='slide']) #panels {
-          transition: transform var(--kemet-tabs-transition-speed, 0.5s) linear;
-        }
-
-        :host([panel-effect='fade']) ::slotted([slot='panels']) {
-          flex-flow: row nowrap;
-        }
-      `,
-    ];
-  }
-
-  static get properties() {
-    return {
-      selected: {
-        type: String,
-        reflect: true,
-      },
-      selectedIndex: {
-        type: Number,
-      },
-      panelPosition: {
-        type: Number,
-      },
-      panelEffect: {
-        type: String,
-        reflect: true,
-        attribute: 'panel-effect',
-      },
-      swipe: {
-        type: Boolean,
-      },
-    };
-  }
-
-  constructor() {
-    super();
-
-    // managed properties
-    this.selectedIndex = 0;
-    this.panelPosition = 0;
-    this.panelEffect = 'none';
-
-    // standard properties
-    this.tabs = [];
-    this.panels = [];
-    this.xDown = null;
-    this.yDown = null;
-
-    this.keyCodes = {
-      ENTER: 13,
-      SPACE: 32,
-      HOME: 36,
-      END: 35,
-      RIGHT: 39,
-      LEFT: 37,
-    };
-
-    this.addEventListener('kemet-tab-selected', this.tabSelectedChange.bind(this));
-    window.addEventListener('resize', this.handleResize.bind(this));
-  }
-
-  render() {
-    return html`
-      <slot name="links"></slot>
-      <section id="panels" part="panels" style="transform: translateX(${this.panelPosition}px)">
-        <slot name="panels"></slot>
-      </section>
-    `;
-  }
-
-  firstUpdated() {
-    this.init();
-  }
-
-  updated() {
-    this.selectTab();
-    this.selectPanel();
-    this.determineFade();
-  }
-
-  init() {
-    const tabs = this.querySelectorAll('kemet-tab');
-    const panels = this.querySelectorAll('kemet-tab-panel');
-    const panelElement = this.shadowRoot.getElementById('panels');
-    const index = {
-      tabs: 0,
-      panels: 0,
-    };
-
-    tabs.forEach((tab) => {
-      // give each tab an index to select by if link/panel is not used
-      tab.index = index.tabs;
-      index.tabs += 1;
-
-      // store the list of tabs
-      this.tabs = this.tabs.concat(tab);
-
-      // add keyboard support
-      tab.addEventListener('keydown', event => this.handleTabKeydown(event));
-    });
-
-    panels.forEach((panel) => {
-      // give each panel an index to select by if link/panel is not used
-      panel.index = index.panels;
-      index.panels += 1;
-
-      // store the list of panels
-      this.panels = this.panels.concat(panel);
-    });
-
-    // default to the first tab/panel selected
-    if (this.tabs.length > 0) this.tabs[0].selected = true;
-    if (this.panels.length > 0) this.panels[0].selected = true;
-
-    // add swipe support
-    if (this.swipe) {
-      panelElement.addEventListener('touchstart', event => this.handleTouchStart(event), false);
-      panelElement.addEventListener('touchmove', event => this.handleTouchMove(event), false);
-    }
-  }
-
-  selectTab() {
-    // if the user uses the selected attribute select by it
-    if (this.selected) {
-      this.tabs.forEach((tab) => {
-        const tabName = tab.getAttribute('link');
-
-        if (tabName === this.selected) {
-          tab.selected = true;
-          this.selected = tabName;
-        } else {
-          tab.selected = false;
-        }
-      });
-
-      // otherwise select by index
-    } else {
-      this.tabs.forEach((tab) => {
-        if (this.selectedIndex === tab.index) {
-          tab.selected = true;
-        } else {
-          tab.selected = false;
-        }
-      });
-    }
-  }
-
-  selectPanel() {
-    // if the user uses the selected attribute select by it
-    if (this.selected) {
-      this.panels.forEach((panel) => {
-        const panelName = panel.getAttribute('panel');
-
-        if (this.panelEffect === 'fade' && panel.index !== 0) {
-          panel.classList.add('push');
-        }
-
-        if (panelName === this.selected) {
-          panel.selected = true;
-          this.animatePanel(panelName, null);
-        } else {
-          panel.selected = false;
-        }
-      });
-
-      // otherwise select by index
-    } else {
-      this.panels.forEach((panel) => {
-        if (this.panelEffect === 'fade' && panel.index !== 0) {
-          panel.classList.add('push');
-        }
-
-        if (this.selectedIndex === panel.index) {
-          panel.selected = true;
-          this.animatePanel(null, panel.index);
-        } else {
-          panel.selected = false;
-        }
-      });
-    }
-  }
-
-  dispatchTabChange() {
-    const tabChanged = new CustomEvent('kemet-tab-changed', {
-      bubbles: true,
-      composed: true,
-      detail: this.selected,
-    });
-
-    this.dispatchEvent(tabChanged);
-  }
-
-  tabSelectedChange(event) {
-    if (this.selected) {
-      // if selected has been set, use the string attribute
-      this.selected = event.detail.getAttribute('link');
-    } else {
-      // otherwise use the generated index
-      this.selectedIndex = event.detail.index;
-    }
-
-    this.dispatchTabChange();
-  }
-
-  determineFade() {
-    this.panels.forEach((panel) => {
-      // add fade class if panel effect is fade
-      if (this.panelEffect === 'fade') panel.classList.add('fade');
-    });
-  }
-
-  handleResize() {
-    if (this.selected) {
-      this.animatePanel(this.selected, null);
-    } else {
-      this.animatePanel(null, this.selectedIndex);
-    }
-  }
-
-  animatePanel(panelName, panelIndex) {
-    if (panelName) {
-      const selectedPanel = this.querySelector(`[panel="${panelName}"]`);
-      if (selectedPanel) this.panelPosition = selectedPanel.offsetLeft * -1;
-    } else {
-      this.panelPosition = this.panels[panelIndex].offsetLeft * -1;
-    }
-  }
-
-  handleTabKeydown(event) {
-    if (this.selected) {
-      switch (event.keyCode) {
-        case this.keyCodes.HOME:
-          this.selected = this.tabs[0].getAttribute('link');
-          break;
-        case this.keyCodes.END:
-          this.selected = this.tabs[this.tabs.length - 1].getAttribute('link');
-          break;
-        case this.keyCodes.RIGHT:
-          const nextLinkElement = this.querySelector('kemet-tab[selected]').nextElementSibling;
-          const nextLink = nextLinkElement ? nextLinkElement.getAttribute('link') : false;
-
-          if (nextLink) {
-            this.selected = nextLink;
-          }
-          break;
-        case this.keyCodes.LEFT:
-          const previousLinkElement = this.querySelector('kemet-tab[selected]').previousElementSibling;
-          const previousLink = previousLinkElement ? previousLinkElement.getAttribute('link') : false;
-
-          if (previousLink) {
-            this.selected = previousLink;
-          }
-          break;
-        default: break;
-      }
-
-      this.querySelector(`[link=${this.selected}]`).focus();
-    } else {
-      switch (event.keyCode) {
-        case this.keyCodes.HOME:
-          this.selectedIndex = 0;
-          break;
-        case this.keyCodes.END:
-          this.selectedIndex = this.tabs.length - 1;
-          break;
-        case this.keyCodes.RIGHT:
-          if (this.selectedIndex < this.tabs.length - 1) {
-            this.selectedIndex += 1;
-          } else {
-            this.selectedIndex = this.tabs.length - 1;
-          }
-          break;
-        case this.keyCodes.LEFT:
-          if (this.selectedIndex < 1) {
-            this.selectedIndex = 0;
-          } else {
-            this.selectedIndex -= 1;
-          }
-          break;
-        default: break;
-      }
-
-      this.tabs[this.selectedIndex].focus();
-    }
-  }
-
-  handleTouchStart(event) {
-    this.xDown = event.touches[0].clientX;
-    this.yDown = event.touches[0].clientY;
-  }
-
-  handleTouchMove(event) {
-    if (!this.xDown || !this.yDown) {
-      return;
-    }
-
-    const xUp = event.touches[0].clientX;
-    const yUp = event.touches[0].clientY;
-    const xDiff = this.xDown - xUp;
-    const yDiff = this.yDown - yUp;
-
-    if (Math.abs(xDiff) > Math.abs(yDiff)) {
-      if (xDiff > 0) {
-        if (this.selected) {
-          const nextElement = this.querySelector('kemet-tab-panel[selected]').nextElementSibling;
-          const next = nextElement ? nextElement.getAttribute('panel') : false;
-
-          if (next) this.selected = next;
-        } else {
-          this.selectedIndex += 1;
-        }
-      } else {
-        if (this.selected) {
-          const previousElement = this.querySelector('kemet-tab-panel[selected]').previousElementSibling;
-          const previous = previousElement ? previousElement.getAttribute('panel') : false;
-
-          if (previous) this.selected = previous;
-        } else {
-          this.selectedIndex -= 1;
-        }
-      }
-    }
-
-    this.xDown = null;
-    this.yDown = null;
-  }
-}
-
-window.customElements.define('kemet-tabs', KemetTabs);

package/dist/styles/scss/components/_config.scss

@@ -1,29 +0,0 @@
-$header-height: 64px;
-$drawer-width: 280px;
-$drawer-height: 280px;
-$carousel-height: 18rem;
-
-$colors: (
-  white-75: rgba(255, 255, 255, 0.75),
-  white-rich: rgba(242, 242, 242, 1),
-
-  black-10: rgba(0, 0, 0, 0.1),
-  black-25: rgba(0, 0, 0, 0.25),
-
-  primary: rgba(12, 74, 110, 1),
-  primary-75: rgba(12, 74, 110, 0.75),
-
-  link: rgba(0, 125, 193, 1)
-);
-
-:root {
-  --kemet-color-white: #fff;
-  --kemet-color-white-75: #{map-get($colors, 'white-75')};
-  --kemet-color-white-rich: #{map-get($colors, 'white-rich')};
-  --kemet-color-black: #000;
-  --kemet-color-black-25: #{map-get($colors, 'black-25')};
-  --kemet-color-black-10: #{map-get($colors, 'black-10')};
-  --kemet-color-primary: #{map-get($colors, 'primary')};
-  --kemet-color-primary-75: #{map-get($colors, 'primary-75')};
-  --kemet-color-link: #{map-get($colors, 'link')};
-}

package/dist/styles/scss/components/accordion.scss

@@ -1,58 +0,0 @@
-@use 'config' as *;
-
-kemet-accordion {
-  background: #{map-get($colors, 'white')};
-  box-shadow: 0 15px 30px -10px var(--kemet-color-black-10);
-}
-
-kemet-accordion [slot='trigger'] {
-  display: flex;
-  align-items: center;
-  padding: 1rem;
-  border-bottom: 1px solid var(--kemet-color-primary);
-}
-
-kemet-accordion [slot='trigger'] > :first-child {
-  color: var(--kemet-color-primary);
-  flex: 1;
-}
-
-kemet-accordion .plus,
-kemet-accordion .minus {
-  width: 24px;
-  height: 24px;
-  position: relative;
-  border-radius: 50%;
-  border: 1px solid var(--kemet-color-primary);
-}
-
-kemet-accordion .plus::before,
-kemet-accordion .minus::before {
-  line-height: 0;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-kemet-accordion .plus::before {
-  content: '+';
-}
-
-kemet-accordion .minus::before {
-  content: '-';
-}
-
-kemet-accordion .plus,
-kemet-accordion[opened] .minus {
-  display: block;
-}
-
-kemet-accordion[opened] .plus,
-kemet-accordion .minus {
-  display: none;
-}
-
-kemet-accordion [slot='panel'] {
-  padding: 1rem;
-}

package/dist/styles/scss/components/carousel.scss

@@ -1,64 +0,0 @@
-@use 'config' as *;
-
-kemet-carousel {
-  --kemet-carousel-height: 18rem;
-  margin-bottom: 1rem;
-}
-
-kemet-carousel[pagination='bottom'] {
-  margin-bottom: 3.5rem;
-}
-
-kemet-carousel [slot='slides'] {
-  height: 100%;
-  border-radius: 1rem;
-  border: 2px solid var(--kemet-color-primary);
-}
-
-kemet-carousel [slot='pagination'],
-kemet-carousel[pagination='top'] [slot='pagination'] > *,
-kemet-carousel[pagination='bottom'] [slot='pagination'] > * {
-  display: flex;
-}
-
-kemet-carousel[pagination='bottom'] [slot='pagination'] {
-  margin-top: 1rem;
-}
-
-kemet-carousel[pagination='top'] [slot='pagination'] {
-  margin-bottom: 0.5rem;
-}
-
-kemet-carousel[pagination='left'] [slot='pagination'],
-kemet-carousel[pagination='right'] [slot='pagination'] {
-  width: 3rem;
-  height: 100%;
-  align-items: center;
-  justify-content: space-between;
-  flex-direction: column;
-}
-
-kemet-carousel[pagination='left'] [slot='pagination'] > *,
-kemet-carousel[pagination='right'] [slot='pagination'] > * {
-  margin: 0.5rem;
-}
-
-kemet-carousel-slide {
-  display: flex;
-}
-
-kemet-carousel-slide img,
-kemet-carousel-slide iframe {
-  width: 100%;
-  border-radius: 1rem;
-}
-
-kemet-carousel-slide > div {
-  margin: auto;
-}
-
-kemet-carousel-link {
-  position: relative;
-  top: 1px;
-  margin: 0 0.5rem;
-}

package/dist/styles/scss/components/flipcard.scss

@@ -1,14 +0,0 @@
-kemet-flipcard-trigger.full-image {
-  display: flex;
-}
-
-kemet-flipcard-trigger.full-image img {
-  max-width: 100%;
-}
-
-kemet-flipcard::part(front),
-kemet-flipcard::part(back) {
-  border: 2px solid var(--kemet-color-primary);
-  border-radius: 1rem;
-  overflow: hidden;
-}

package/dist/styles/scss/components/modal.scss

@@ -1,12 +0,0 @@
-@use 'config' as *;
-
-kemet-modal {
-  --kemet-modal-max-width: 75vw;
-}
-
-kemet-modal .content {
-  padding: 1rem 2rem 2rem;
-  border-radius: 1rem;
-  color: var(--kemet-color-white-rich);
-  background: var(--kemet-color-primary);
-}

package/dist/styles/scss/components/scrollsnap.scss

@@ -1,68 +0,0 @@
-@use 'config' as *;
-
-kemet-scroll-snap-slide {
-  padding: 2rem;
-  box-sizing: border-box;
-}
-
-kemet-scroll-snap-paginator {
-  font-size: 3rem;
-  display: block;
-  text-align: center;
-}
-
-kemet-scroll-snap-paginator ul {
-  display: inline-flex;
-  gap: 0.5rem;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-kemet-scroll-snap-paginator .link {
-  cursor: pointer;
-  color: var(--kemet-color-link);
-}
-
-/* horizontal */
-kemet-scroll-snap[axis='horizontal'] kemet-scroll-snap {
-  max-width: 1440px;
-}
-
-@media screen and (min-width: 640px) {
-  kemet-scroll-snap[axis='horizontal'] kemet-scroll-snap-slide {
-    max-width: 48vw;
-  }
-}
-
-@media screen and (min-width: 1025px) {
-  kemet-scroll-snap[axis='horizontal'] kemet-scroll-snap-slide {
-    max-width: 33vw;
-  }
-}
-
-kemet-scroll-snap[axis='horizontal'] [slot='slides'] {
-  scrollbar-width: none;
-}
-
-kemet-scroll-snap[axis='horizontal'] [slot='slides']::-webkit-scrollbar {
-  display: none;
-  width: 0;
-  background: transparent;
-}
-
-/* vertical */
-html[kemet-scroll-snap-axis='vertical'] {
-  overflow: hidden;
-}
-
-kemet-scroll-snap[axis='vertical'] [slot='slides'] {
-  overflow-x: hidden;
-}
-
-kemet-scroll-snap[axis='vertical'] kemet-scroll-snap-slide {
-  --kemet-scroll-snap-slide-align: start;
-
-  max-width: 1440px;
-  margin: auto;
-}

package/dist/styles/scss/components/tabs.scss

@@ -1,73 +0,0 @@
-@use 'config' as *;
-
-kemet-tabs.horizontal [slot='links'] {
-  margin: 1rem 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-}
-
-@media screen and (min-width: 768px) {
-  kemet-tabs.horizontal [slot='links'] {
-    flex-direction: row;
-    border-bottom: 1px solid var(--kemet-color-primary);
-  }
-}
-
-kemet-tabs.horizontal kemet-tab {
-  white-space: nowrap;
-  padding: 0.5rem 1rem;
-  border-left: 4px solid transparent;
-}
-
-@media screen and (min-width: 768px) {
-  kemet-tabs.horizontal kemet-tab {
-    padding: 1rem;
-  }
-}
-
-kemet-tabs.horizontal kemet-tab[selected] {
-  border-left: 4px solid var(--kemet-color-primary);
-}
-
-@media screen and (min-width: 768px) {
-  kemet-tabs.horizontal kemet-tab[selected] {
-    border-left: 0;
-    border-bottom: 4px solid var(--kemet-color-primary);
-  }
-}
-
-
-kemet-tabs.vertical {
-  display: flex;
-  flex-direction: column;
-}
-
-@media screen and (min-width: 768px) {
-  kemet-tabs.vertical {
-    flex-direction: row;
-  }
-}
-
-kemet-tabs.vertical [slot='links'] {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  justify-content: space-around;
-}
-
-@media screen and (min-width: 768px) {
-  kemet-tabs.vertical [slot='links'] {
-    min-width: 148px;
-    margin-right: 2rem;
-    border-right: 1px solid var(--kemet-color-primary);
-  }
-}
-
-kemet-tabs.vertical kemet-tab {
-  padding: 1rem 0;
-}
-
-kemet-tabs.vertical kemet-tab[selected] {
-  border-right: 4px solid var(--kemet-color-primary);
-}