kemet-ui 1.4.0 → 2.0.1

package/dist/components/kemet-tabs/kemet-tabs.js

@@ -1,9 +1,10 @@
+import { __decorate } from "tslib";
 /* eslint-disable no-lonely-if */
 /* eslint-disable no-case-declarations */
 import { LitElement, html } from 'lit';
-import { stylesKemetTabs } from './styles.js';
-import { emitEvent } from '../../utilities/misc/events.js';
-
+import { stylesKemetTabs } from './styles';
+import { emitEvent } from '../../utilities/misc/events';
+import { customElement, property, query, state } from 'lit/decorators.js';
 /**
  * @since 1.0.0
  * @status stable
@@ -34,7 +35,7 @@ import { emitEvent } from '../../utilities/misc/events.js';
  *
  * @cssproperty --kemet-tabs-ink-size - The thickness of the ink. Default: 6px.
  * @cssproperty --kemet-tabs-ink-radius - The radius on the ink. Default:  6px.
- * @cssproperty --kemet-tabs-ink-color - The color of the ink. Default:  var(--kemet-color-primary).
+ * @cssproperty --kemet-tabs-ink-color - The color of the ink. Default:  var(--kemet-color-background).
  * @cssproperty --kemet-tabs-divider-size - The thickness of the divider. Default: 1px.
  * @cssproperty --kemet-tabs-divider-color - The color of the divider. Default:  var(--kemet-color-gray4).
  * @cssproperty --kemet-tabs-transition-speed - The transition speed of the panels. Default:  0.5s.
@@ -43,86 +44,29 @@ import { emitEvent } from '../../utilities/misc/events.js';
  * @event kemet-tab-changed - Fires when a tab is changed
  *
  */
-
-export default class KemetTabs extends LitElement {
-  static get styles() {
-    return [stylesKemetTabs];
-  }
-
-  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,
-      },
-      placement: {
-        type: String,
-        reflect: true,
-      },
-      divider: {
-        type: Boolean,
-      },
-      tabsAlign: {
-        type: String,
-        reflect: true,
-        attribute: 'tabs-align',
-      },
-      ink: {
-        type: Object,
-      },
-      hideInk: {
-        type: Boolean,
-        attribute: 'hide-ink',
-      },
-      overflow: {
-        type: Boolean,
-        reflect: true,
-      },
-    };
-  }
-
-  constructor() {
-    super();
-
-    // managed properties
-    this.selectedIndex = 0;
-    this.panelPosition = 0;
-    this.panelEffect = 'none';
-    this.placement = 'top';
-    this.tabsAlign = 'center';
-    this.hideInk = false;
-
-    this.addEventListener('kemet-tab-selected', this.tabSelectedChange.bind(this));
-    this.addEventListener('kemet-tab-close', this.handleTabClose.bind(this));
-    window.addEventListener('resize', this.handleResize.bind(this));
-  }
-
-  firstUpdated() {
-    // standard properties
-    this.tabs = [];
-    this.panels = [];
-    this.xDown = null;
-    this.yDown = null;
-
-    this.links = this.shadowRoot.getElementById('links');
-  }
-
-  render() {
-    return html`
+let KemetTabs = class KemetTabs extends LitElement {
+    constructor() {
+        super();
+        this.selectedIndex = 0;
+        this.panelPosition = 0;
+        this.panelEffect = 'none';
+        this.placement = 'top';
+        this.tabsAlign = 'center';
+        this.hideInk = false;
+        this.addEventListener('kemet-tab-selected', this.tabSelectedChange.bind(this));
+        this.addEventListener('kemet-tab-close', this.handleTabClose.bind(this));
+        window.addEventListener('resize', this.handleResize.bind(this));
+    }
+    firstUpdated() {
+        // standard properties
+        this.tabs = [];
+        this.panels = [];
+        this.xDown = null;
+        this.yDown = null;
+        this.links = this.shadowRoot.getElementById('links');
+    }
+    render() {
+        return html `
       ${this.makeLeftArrow()}
       ${this.makeRightArrow()}
       <div id="links" part="links">
@@ -139,420 +83,441 @@ export default class KemetTabs extends LitElement {
         </div>
       </section>
     `;
-  }
-
-  updated() {
-    this.determineFade();
-  }
-
-  handleLinksSlotChange() {
-    const tabs = this.querySelectorAll('kemet-tab');
-    let index = 0;
-
-    tabs.forEach((tab) => {
-      // give each tab an index to select by if link/panel is not used
-      tab.index = index;
-      index += 1;
-
-      // store the list of tabs
-      this.tabs = this.tabs.concat(tab);
-
-      // add keyboard support
-      tab.addEventListener('keydown', event => this.handleTabKeydown(event));
-    });
-
-    // default to the first tab/panel selected
-    if (this.tabs.length > 0) this.tabs[0].selected = true;
-
-    setTimeout(() => {
-      this.selectTab();
-    }, 1);
-    this.determineOverflow();
-  }
-
-  handlePanelsSlotChange() {
-    const panels = this.querySelectorAll('kemet-tab-panel');
-    const panelElement = this.shadowRoot.getElementById('panels');
-    let index = 0;
-
-    panels.forEach((panel) => {
-      // give each panel an index to select by if link/panel is not used
-      panel.index = index;
-      index += 1;
-
-      // store the list of panels
-      this.panels = this.panels.concat(panel);
-    });
-
-    // default to the first tab/panel selected
-    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);
-    }
-
-    this.selectPanel();
-  }
-
-  handleLeftArrow() {
-    const selectedElement = this.tabs.find(tab => tab.selected) || this.tabs[0];
-    const previousElement = selectedElement.previousElementSibling;
-    const selectedIndex = this.tabs.findIndex(tab => tab.selected);
-
-    if (this.selected) {
-      this.selected = previousElement ? previousElement.link : selectedElement.link;
-    } else {
-      this.selectedIndex = selectedIndex > 0 ? selectedIndex - 1 : 0;
     }
-
-    if (previousElement) {
-      this.links.scrollLeft = previousElement.offsetLeft - 20;
+    updated() {
+        this.determineFade();
+        this.determineStacked();
     }
-
-    this.selectTab();
-    this.selectPanel();
-  }
-
-  handleRightArrow() {
-    const selectedElement = this.tabs.find(tab => tab.selected) || this.tabs[this.tabs.length - 1];
-    const nextElement = selectedElement.nextElementSibling;
-    const selectedIndex = this.tabs.findIndex(tab => tab.selected);
-
-    if (this.selected) {
-      this.selected = nextElement ? nextElement.link : selectedElement.link;
-    } else {
-      this.selectedIndex = selectedIndex < this.tabs.length - 1
-        ? selectedIndex + 1
-        : this.tabs.length - 1;
+    handleLinksSlotChange() {
+        const tabs = this.querySelectorAll('kemet-tab');
+        let index = 0;
+        tabs.forEach((tab) => {
+            // give each tab an index to select by if link/panel is not used
+            tab.index = index;
+            index += 1;
+            // store the list of tabs
+            this.tabs = this.tabs.concat(tab);
+            // add keyboard support
+            tab.addEventListener('keydown', event => this.handleTabKeydown(event));
+        });
+        // default to the first tab/panel selected
+        if (this.tabs.length > 0)
+            this.tabs[0].selected = true;
+        setTimeout(() => {
+            this.selectTab();
+        }, 1);
+        this.determineOverflow();
     }
-
-    if (nextElement) {
-      this.links.scrollLeft = nextElement.offsetLeft - 20;
-    }
-
-    this.selectTab();
-    this.selectPanel();
-  }
-
-  handleTabClose(event) {
-    const tab = event.detail;
-    const panel = this.panels[tab.index];
-
-    this.selected = this.tabs[0].link;
-    this.selectedIndex = 0;
-
-    panel.remove();
-    tab.remove();
-  }
-
-  makeInk(location) {
-    if (this.hideInk) {
-      return null;
+    handlePanelsSlotChange() {
+        const panels = this.querySelectorAll('kemet-tab-panel');
+        const panelElement = this.shadowRoot.getElementById('panels');
+        let index = 0;
+        panels.forEach((panel) => {
+            // give each panel an index to select by if link/panel is not used
+            panel.index = index;
+            index += 1;
+            // store the list of panels
+            this.panels = this.panels.concat(panel);
+        });
+        // default to the first tab/panel selected
+        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);
+        }
+        this.selectPanel();
     }
-
-    if ((this.placement === 'top' || this.placement === 'bottom') && this.ink && location === 'links') {
-      return html`<div part="ink" style="width:${this.ink.width}; transform:translateX(${this.ink.positionX})"></div>`;
+    handleLeftArrow() {
+        const selectedElement = this.tabs.find(tab => tab.selected) || this.tabs[0];
+        const previousElement = selectedElement.previousElementSibling;
+        const selectedIndex = this.tabs.findIndex(tab => tab.selected);
+        if (this.selected) {
+            this.selected = previousElement ? previousElement.link : selectedElement.link;
+        }
+        else {
+            this.selectedIndex = selectedIndex > 0 ? selectedIndex - 1 : 0;
+        }
+        if (previousElement) {
+            this.links.scrollLeft = previousElement.offsetLeft - 20;
+        }
+        this.selectTab();
+        this.selectPanel();
     }
-
-    if ((this.placement === 'left' || this.placement === 'right') && this.ink && location === 'host') {
-      return html`<div part="ink" style="height:${this.ink.height}; transform:translateY(${this.ink.positionY})"></div>`;
+    handleRightArrow() {
+        const selectedElement = this.tabs.find(tab => tab.selected) || this.tabs[this.tabs.length - 1];
+        const nextElement = selectedElement.nextElementSibling;
+        const selectedIndex = this.tabs.findIndex(tab => tab.selected);
+        if (this.selected) {
+            this.selected = nextElement ? nextElement.link : selectedElement.link;
+        }
+        else {
+            this.selectedIndex = selectedIndex < this.tabs.length - 1
+                ? selectedIndex + 1
+                : this.tabs.length - 1;
+        }
+        if (nextElement) {
+            this.links.scrollLeft = nextElement.offsetLeft - 20;
+        }
+        this.selectTab();
+        this.selectPanel();
     }
-
-    return null;
-  }
-
-  makeDivider() {
-    if (this.divider) {
-      return html`<div part="divider"></div>`;
+    handleTabClose(event) {
+        const tab = event.detail;
+        const panel = this.panels[tab.index];
+        this.selected = this.tabs[0].link;
+        this.selectedIndex = 0;
+        panel.remove();
+        tab.remove();
     }
-
-    return null;
-  }
-
-  makeLeftArrow() {
-    if (this.overflow) {
-      return html`<kemet-icon icon='chevron-left' size="20" @click=${() => this.handleLeftArrow()}></kemet-icon>`;
+    makeInk(location) {
+        if (this.hideInk) {
+            return null;
+        }
+        if ((this.placement === 'top' || this.placement === 'bottom') && this.ink && location === 'links') {
+            return html `<div part="ink" style="width:${this.ink.width}; transform:translateX(${this.ink.positionX})"></div>`;
+        }
+        if ((this.placement === 'left' || this.placement === 'right') && this.ink && location === 'host') {
+            return html `<div part="ink" style="height:${this.ink.height}; transform:translateY(${this.ink.positionY})"></div>`;
+        }
+        return null;
     }
-
-    return null;
-  }
-
-  makeRightArrow() {
-    if (this.overflow) {
-      return html`<kemet-icon icon='chevron-right' size="20" @click=${() => this.handleRightArrow()}></kemet-icon>`;
+    makeDivider() {
+        if (this.divider) {
+            return html `<div part="divider"></div>`;
+        }
+        return null;
     }
-
-    return null;
-  }
-
-  selectTab() {
-    const marginLeft = this.links ? parseInt(window.getComputedStyle(this.links).marginLeft.replace('px', ''), 10) : 0;
-    const overflowOffset = this.overflow ? marginLeft : 0;
-
-    // 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;
-
-          this.ink = {
-            width: `${tab.offsetWidth}px`,
-            height: `${tab.offsetHeight}px`,
-            positionX: `${tab.offsetLeft - overflowOffset}px`,
-            positionY: `${tab.offsetTop}px`,
-          };
-
-          this.links.scrollLeft = tab.offsetLeft - overflowOffset;
-        } else {
-          tab.selected = false;
+    makeLeftArrow() {
+        if (this.overflow) {
+            return html `<kemet-icon icon='chevron-left' size="20" @click=${() => this.handleLeftArrow()}></kemet-icon>`;
         }
-      });
-
-      // otherwise select by index
-    } else {
-      this.tabs.forEach((tab) => {
-        if (this.selectedIndex === tab.index) {
-          tab.selected = true;
-
-          this.ink = {
-            width: `${tab.offsetWidth}px`,
-            height: `${tab.offsetHeight}px`,
-            positionX: `${tab.offsetLeft - overflowOffset}px`,
-            positionY: `${tab.offsetTop}px`,
-          };
-
-          this.links.scrollLeft = tab.offsetLeft - overflowOffset;
-        } else {
-          tab.selected = false;
+        return null;
+    }
+    makeRightArrow() {
+        if (this.overflow) {
+            return html `<kemet-icon icon='chevron-right' size="20" @click=${() => this.handleRightArrow()}></kemet-icon>`;
         }
-      });
+        return null;
     }
-  }
-
-  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');
+    selectTab() {
+        const marginLeft = this.links ? parseInt(window.getComputedStyle(this.links).marginLeft.replace('px', ''), 10) : 0;
+        const overflowOffset = this.overflow ? marginLeft : 0;
+        // 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;
+                    this.ink = {
+                        width: `${tab.offsetWidth}px`,
+                        height: `${tab.offsetHeight}px`,
+                        positionX: `${tab.offsetLeft - overflowOffset}px`,
+                        positionY: `${tab.offsetTop}px`,
+                    };
+                    this.links.scrollLeft = tab.offsetLeft - overflowOffset;
+                }
+                else {
+                    tab.selected = false;
+                }
+            });
+            // otherwise select by index
         }
-
-        if (this.placement === 'left' || this.placement === 'right') {
-          panel.classList.add('vertical');
+        else {
+            this.tabs.forEach((tab) => {
+                if (this.selectedIndex === tab.index) {
+                    tab.selected = true;
+                    this.ink = {
+                        width: `${tab.offsetWidth}px`,
+                        height: `${tab.offsetHeight}px`,
+                        positionX: `${tab.offsetLeft - overflowOffset}px`,
+                        positionY: `${tab.offsetTop}px`,
+                    };
+                    this.links.scrollLeft = tab.offsetLeft - overflowOffset;
+                }
+                else {
+                    tab.selected = false;
+                }
+            });
         }
-
-        if (panelName === this.selected) {
-          panel.selected = true;
-          this.animatePanel(panelName, null);
-        } else {
-          panel.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 (this.placement === 'left' || this.placement === 'right') {
+                    panel.classList.add('vertical');
+                }
+                if (panelName === this.selected) {
+                    panel.selected = true;
+                    this.animatePanel(panelName, null);
+                }
+                else {
+                    panel.selected = false;
+                }
+            });
+            // otherwise select by index
         }
-      });
-
-      // otherwise select by index
-    } else {
-      this.panels.forEach((panel) => {
-        if (this.panelEffect === 'fade' && panel.index !== 0) {
-          panel.classList.add('push');
+        else {
+            this.panels.forEach((panel) => {
+                if (this.panelEffect === 'fade' && panel.index !== 0) {
+                    panel.classList.add('push');
+                }
+                if (this.placement === 'left' || this.placement === 'right') {
+                    panel.classList.add('vertical');
+                }
+                if (this.selectedIndex === panel.index) {
+                    panel.selected = true;
+                    this.animatePanel(null, panel.index);
+                }
+                else {
+                    panel.selected = false;
+                }
+            });
         }
-
-        if (this.placement === 'left' || this.placement === 'right') {
-          panel.classList.add('vertical');
+    }
+    dispatchTabChange() {
+        const details = {
+            currentTabName: this.selected,
+            currentTabIndex: this.selectedIndex,
+        };
+        emitEvent(this, 'kemet-tab-changed', details);
+    }
+    tabSelectedChange(event) {
+        if (this.selected) {
+            // if selected has been set, use the string attribute
+            this.selected = event.detail.getAttribute('link');
         }
-
-        if (this.selectedIndex === panel.index) {
-          panel.selected = true;
-          this.animatePanel(null, panel.index);
-        } else {
-          panel.selected = false;
+        else {
+            // otherwise use the generated index
+            this.selectedIndex = event.detail.index;
         }
-      });
-    }
-  }
-
-  dispatchTabChange() {
-    emitEvent(this, 'kemet-tab-changed', this.selected);
-  }
-
-  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.selectTab();
+        this.selectPanel();
+        this.dispatchTabChange();
     }
-
-    this.selectTab();
-    this.selectPanel();
-    this.dispatchTabChange();
-  }
-
-  determineFade() {
-    this.panels.forEach((panel) => {
-      // add fade class if panel effect is fade
-      if (this.panelEffect === 'fade') panel.classList.add('fade');
-    });
-  }
-
-  determineOverflow() {
-    const tabsContainerWidth = this.offsetWidth;
-    const tabElements = this.querySelectorAll('kemet-tab');
-
-    let totalTabsWidth = 0;
-
-    tabElements.forEach((tab) => {
-      totalTabsWidth += tab.offsetWidth;
-    });
-
-    if (totalTabsWidth > tabsContainerWidth && (this.placement === 'top' || this.placement === 'bottom')) {
-      this.overflow = true;
-    } else {
-      this.overflow = false;
+    determineFade() {
+        this.panels.forEach((panel) => {
+            // add fade class if panel effect is fade
+            if (this.panelEffect === 'fade')
+                panel.classList.add('fade');
+        });
     }
-  }
-
-  handleResize() {
-    if (this.tabs && this.panels) {
-      const marginLeft = this.links ? parseInt(window.getComputedStyle(this.links).marginLeft.replace('px', ''), 10) : 0;
-      const overflowOffset = this.overflow ? marginLeft : 0;
-      const selectedElement = this.tabs.find(tab => tab.selected);
-
-      if (selectedElement) {
-        this.ink = {
-          width: `${selectedElement.offsetWidth}px`,
-          height: `${selectedElement.offsetHeight}px`,
-          positionX: `${selectedElement.offsetLeft - overflowOffset}px`,
-          positionY: `${selectedElement.offsetTop}px`,
-        };
-      }
-
-      this.determineOverflow();
-
-      if (this.selected) {
-        this.animatePanel(this.selected, null);
-      } else {
-        this.animatePanel(null, this.selectedIndex);
-      }
+    determineStacked() {
+        this.panels.forEach((panel) => {
+            // add fade class if panel effect is fade
+            if (this.panelEffect === 'stacked')
+                panel.classList.add('stacked');
+        });
     }
-  }
-
-  animatePanel(panelName, panelIndex) {
-    if (panelName) {
-      const selectedPanel = this.querySelector(`[panel="${panelName}"]`);
-      if (selectedPanel) this.panelPosition = selectedPanel.offsetLeft * -1;
-    } else {
-      if (this.panels[panelIndex]) this.panelPosition = this.panels[panelIndex].offsetLeft * -1;
+    determineOverflow() {
+        const tabsContainerWidth = this.offsetWidth;
+        const tabElements = this.querySelectorAll('kemet-tab');
+        let totalTabsWidth = 0;
+        tabElements.forEach((tab) => {
+            totalTabsWidth += tab.offsetWidth;
+        });
+        if (totalTabsWidth > tabsContainerWidth && (this.placement === 'top' || this.placement === 'bottom')) {
+            this.overflow = true;
+        }
+        else {
+            this.overflow = false;
+        }
     }
-  }
-
-  handleTabKeydown(event) {
-    if (this.selected) {
-      switch (event.key) {
-        case 'Home':
-          this.selected = this.tabs[0].getAttribute('link');
-          break;
-        case 'End':
-          this.selected = this.tabs[this.tabs.length - 1].getAttribute('link');
-          break;
-        case 'ArrowRight':
-          const nextLinkElement = this.querySelector('kemet-tab[selected]').nextElementSibling;
-          const nextLink = nextLinkElement ? nextLinkElement.getAttribute('link') : false;
-
-          if (nextLink) {
-            this.selected = nextLink;
-          }
-          break;
-        case 'ArrowLeft':
-          const previousLinkElement = this.querySelector('kemet-tab[selected]').previousElementSibling;
-          const previousLink = previousLinkElement ? previousLinkElement.getAttribute('link') : false;
-
-          if (previousLink) {
-            this.selected = previousLink;
-          }
-          break;
-        default: break;
-      }
-
-      this.tabs.find(tab => tab.link === this.selected).focus();
-    } else {
-      switch (event.key) {
-        case 'Home':
-          this.selectedIndex = 0;
-          break;
-        case 'End':
-          this.selectedIndex = this.tabs.length - 1;
-          break;
-        case 'ArrowRight':
-          if (this.selectedIndex < this.tabs.length - 1) {
-            this.selectedIndex += 1;
-          } else {
-            this.selectedIndex = this.tabs.length - 1;
-          }
-          break;
-        case 'ArrowLeft':
-          if (this.selectedIndex < 1) {
-            this.selectedIndex = 0;
-          } else {
-            this.selectedIndex -= 1;
-          }
-          break;
-        default: break;
-      }
-
-      this.tabs[this.selectedIndex].focus();
+    handleResize() {
+        if (this.tabs && this.panels) {
+            const marginLeft = this.links ? parseInt(window.getComputedStyle(this.links).marginLeft.replace('px', ''), 10) : 0;
+            const overflowOffset = this.overflow ? marginLeft : 0;
+            const selectedElement = this.tabs.find(tab => tab.selected);
+            if (selectedElement) {
+                this.ink = {
+                    width: `${selectedElement.offsetWidth}px`,
+                    height: `${selectedElement.offsetHeight}px`,
+                    positionX: `${selectedElement.offsetLeft - overflowOffset}px`,
+                    positionY: `${selectedElement.offsetTop}px`,
+                };
+            }
+            this.determineOverflow();
+            if (this.selected) {
+                this.animatePanel(this.selected, null);
+            }
+            else {
+                this.animatePanel(null, this.selectedIndex);
+            }
+        }
     }
-  }
-
-  handleTouchStart(event) {
-    this.xDown = event.touches[0].clientX;
-    this.yDown = event.touches[0].clientY;
-  }
-
-  handleTouchMove(event) {
-    if (!this.xDown || !this.yDown) {
-      return;
+    animatePanel(panelName, panelIndex) {
+        if (panelName) {
+            const selectedPanel = this.querySelector(`[panel="${panelName}"]`);
+            if (selectedPanel)
+                this.panelPosition = selectedPanel.offsetLeft * -1;
+        }
+        else {
+            if (this.panels[panelIndex])
+                this.panelPosition = this.panels[panelIndex].offsetLeft * -1;
+        }
     }
-
-    const xUp = event.touches[0].clientX;
-    const yUp = event.touches[0].clientY;
-    const xDiff = this.xDown - xUp;
-    const yDiff = this.yDown - yUp;
-    const nextElement = this.querySelector('kemet-tab-panel[selected]').nextElementSibling;
-    const next = nextElement ? nextElement.getAttribute('panel') : false;
-    const previousElement = this.querySelector('kemet-tab-panel[selected]').previousElementSibling;
-    const previous = previousElement ? previousElement.getAttribute('panel') : false;
-
-    if (Math.abs(xDiff) > Math.abs(yDiff)) {
-      if (xDiff > 0) {
+    handleTabKeydown(event) {
         if (this.selected) {
-          if (next) this.selected = next;
-        } else {
-          if (this.selectedIndex < this.tabs.length) this.selectedIndex += 1;
+            switch (event.key) {
+                case 'Home':
+                    this.selected = this.tabs[0].getAttribute('link');
+                    break;
+                case 'End':
+                    this.selected = this.tabs[this.tabs.length - 1].getAttribute('link');
+                    break;
+                case 'ArrowRight':
+                    const nextLinkElement = this.querySelector('kemet-tab[selected]').nextElementSibling;
+                    const nextLink = nextLinkElement ? nextLinkElement.getAttribute('link') : false;
+                    if (nextLink) {
+                        this.selected = nextLink;
+                    }
+                    break;
+                case 'ArrowLeft':
+                    const previousLinkElement = this.querySelector('kemet-tab[selected]').previousElementSibling;
+                    const previousLink = previousLinkElement ? previousLinkElement.getAttribute('link') : false;
+                    if (previousLink) {
+                        this.selected = previousLink;
+                    }
+                    break;
+                default: break;
+            }
+            this.tabs.find(tab => tab.link === this.selected).focus();
         }
-      } else {
-        if (this.selected) {
-          if (previous) this.selected = previous;
-        } else {
-          if (this.selectedIndex > 0) this.selectedIndex -= 1;
+        else {
+            switch (event.key) {
+                case 'Home':
+                    this.selectedIndex = 0;
+                    break;
+                case 'End':
+                    this.selectedIndex = this.tabs.length - 1;
+                    break;
+                case 'ArrowRight':
+                    if (this.selectedIndex < this.tabs.length - 1) {
+                        this.selectedIndex += 1;
+                    }
+                    else {
+                        this.selectedIndex = this.tabs.length - 1;
+                    }
+                    break;
+                case 'ArrowLeft':
+                    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) {
+        var _a, _b;
+        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;
+        const nextElement = (_a = this.querySelector('kemet-tab-panel[selected]')) === null || _a === void 0 ? void 0 : _a.nextElementSibling;
+        const next = nextElement ? nextElement.getAttribute('panel') : false;
+        const previousElement = (_b = this.querySelector('kemet-tab-panel[selected]')) === null || _b === void 0 ? void 0 : _b.previousElementSibling;
+        const previous = previousElement ? previousElement.getAttribute('panel') : false;
+        if (Math.abs(xDiff) > Math.abs(yDiff)) {
+            if (xDiff > 0) {
+                if (this.selected) {
+                    if (next)
+                        this.selected = next;
+                }
+                else {
+                    if (this.selectedIndex < this.tabs.length)
+                        this.selectedIndex += 1;
+                }
+            }
+            else {
+                if (this.selected) {
+                    if (previous)
+                        this.selected = previous;
+                }
+                else {
+                    if (this.selectedIndex > 0)
+                        this.selectedIndex -= 1;
+                }
+            }
+            this.selectTab();
+            this.selectPanel();
         }
-      }
-
-      this.selectTab();
-      this.selectPanel();
+        this.xDown = null;
+        this.yDown = null;
     }
-
-    this.xDown = null;
-    this.yDown = null;
-  }
-}
-
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-tabs') || customElements.define('kemet-tabs', KemetTabs);
+};
+KemetTabs.styles = [stylesKemetTabs];
+__decorate([
+    property({ type: String, reflect: true })
+], KemetTabs.prototype, "selected", void 0);
+__decorate([
+    property({ type: Number })
+], KemetTabs.prototype, "selectedIndex", void 0);
+__decorate([
+    property({ type: Number })
+], KemetTabs.prototype, "panelPosition", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'panel-effect' })
+], KemetTabs.prototype, "panelEffect", void 0);
+__decorate([
+    property({ type: Boolean })
+], KemetTabs.prototype, "swipe", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], KemetTabs.prototype, "placement", void 0);
+__decorate([
+    property({ type: Boolean })
+], KemetTabs.prototype, "divider", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'tabs-align' })
+], KemetTabs.prototype, "tabsAlign", void 0);
+__decorate([
+    property({ type: Object })
+], KemetTabs.prototype, "ink", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hide-ink' })
+], KemetTabs.prototype, "hideInk", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetTabs.prototype, "overflow", void 0);
+__decorate([
+    state()
+], KemetTabs.prototype, "tabs", void 0);
+__decorate([
+    state()
+], KemetTabs.prototype, "panels", void 0);
+__decorate([
+    state()
+], KemetTabs.prototype, "xDown", void 0);
+__decorate([
+    state()
+], KemetTabs.prototype, "yDown", void 0);
+__decorate([
+    state()
+], KemetTabs.prototype, "links", void 0);
+__decorate([
+    query('#panels')
+], KemetTabs.prototype, "panelsElement", void 0);
+KemetTabs = __decorate([
+    customElement('kemet-tabs')
+], KemetTabs);
+export default KemetTabs;
+//# sourceMappingURL=kemet-tabs.js.map