kemet-ui 4.0.0 → 4.0.2

package/dist/chunk-JA5Z4MY5.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/carousel-current.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport type KemetCarousel from './carousel';\n\n/**\n *\n * @since 1.1.0\n * @status stable\n *\n * @tagname kemet-carousel-current\n * @summary Displays the active slide number.\n *\n * @prop {number} current - The current slide number.\n *\n */\n\n@customElement('kemet-carousel-current')\nexport default class KemetCarouselCurrent extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: inline-block;\n      }\n    `,\n  ];\n\n  @property({ type: Number })\n  current: number;\n\n  @state()\n  carousel: KemetCarousel | null;\n\n  firstUpdated() {\n    this.carousel = this.closest('kemet-carousel');\n  }\n\n  updated() {\n    this.current = this.carousel?.index as number + 1;\n  }\n\n  render() {\n    return html`${this.current}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-carousel-current': KemetCarouselCurrent\n  }\n}\n"],"mappings":";;;;;AAAA,SAAS,MAAM,KAAK,kBAAkB;AACtC,SAAS,eAAe,UAAU,aAAa;AAgB/C,IAAqB,uBAArB,cAAkD,WAAW;AAAA,EAe3D,eAAe;AACb,SAAK,WAAW,KAAK,QAAQ,gBAAgB;AAAA,EAC/C;AAAA,EAEA,UAAU;AACR,SAAK,UAAU,KAAK,UAAU,QAAkB;AAAA,EAClD;AAAA,EAEA,SAAS;AACP,WAAO,OAAO,KAAK,OAAO;AAAA,EAC5B;AACF;AA1BqB,qBACZ,SAAS;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAKF;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GATP,qBAUnB;AAGA;AAAA,EADC,MAAM;AAAA,GAZY,qBAanB;AAbmB,uBAArB;AAAA,EADC,cAAc,wBAAwB;AAAA,GAClB;","names":[]}

package/dist/chunk-JBDFJW7Y.mjs

@@ -0,0 +1,50 @@
+import {
+  stylesKemetTabPanel
+} from "./chunk-5LCSEF3N.mjs";
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/tab-panel.ts
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var KemetTabPanel = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.selected = false;
+  }
+  updated() {
+    this.a11y();
+  }
+  render() {
+    return html`
+      <slot></slot>
+    `;
+  }
+  a11y() {
+    this.setAttribute("role", "tabpanel");
+    if (this.selected) {
+      this.setAttribute("tabindex", "0");
+    } else {
+      this.setAttribute("tabindex", "-1");
+    }
+  }
+};
+KemetTabPanel.styles = [stylesKemetTabPanel];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetTabPanel.prototype, "selected", 2);
+__decorateClass([
+  property({ type: String })
+], KemetTabPanel.prototype, "panel", 2);
+__decorateClass([
+  property({ type: Number })
+], KemetTabPanel.prototype, "index", 2);
+KemetTabPanel = __decorateClass([
+  customElement("kemet-tab-panel")
+], KemetTabPanel);
+
+export {
+  KemetTabPanel
+};
+//# sourceMappingURL=chunk-JBDFJW7Y.mjs.map

package/dist/chunk-JBDFJW7Y.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/tab-panel.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesKemetTabPanel } from '../styles/elements/tabs';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-tab-panel\n * @summary A panel in a set of tabs.\n *\n * @prop {boolean} selected - Is true when a panel is selected\n * @prop {string} panel - Identifies the panel to be linked by a tab\n *\n * @cssproperty --kemet-tab-panel-fade-speed - The fade speed.\n *\n */\n\n@customElement('kemet-tab-panel')\nexport default class KemetTabPanel extends LitElement {\n  static styles = [stylesKemetTabPanel];\n\n  @property({ type: Boolean, reflect: true })\n  selected: boolean = false;\n\n  @property({ type: String })\n  panel: string;\n\n  @property({ type: Number })\n  index: number;\n\n  updated() {\n    this.a11y();\n  }\n\n  render() {\n    return html`\n      <slot></slot>\n    `;\n  }\n\n  a11y() {\n    this.setAttribute('role', 'tabpanel');\n\n    if (this.selected) {\n      this.setAttribute('tabindex', '0');\n    } else {\n      this.setAttribute('tabindex', '-1');\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-tab-panel': KemetTabPanel\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,YAAY,YAAY;AACjC,SAAS,eAAe,gBAAgB;AAkBxC,IAAqB,gBAArB,cAA2C,WAAW;AAAA,EAAtD;AAAA;AAIE,oBAAoB;AAAA;AAAA,EAQpB,UAAU;AACR,SAAK,KAAK;AAAA,EACZ;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,EAGT;AAAA,EAEA,OAAO;AACL,SAAK,aAAa,QAAQ,UAAU;AAEpC,QAAI,KAAK,UAAU;AACjB,WAAK,aAAa,YAAY,GAAG;AAAA,IACnC,OAAO;AACL,WAAK,aAAa,YAAY,IAAI;AAAA,IACpC;AAAA,EACF;AACF;AA/BqB,cACZ,SAAS,CAAC,mBAAmB;AAGpC;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAHvB,cAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GANP,cAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GATP,cAUnB;AAVmB,gBAArB;AAAA,EADC,cAAc,iBAAiB;AAAA,GACX;","names":[]}

package/dist/chunk-JI5MHBCW.mjs

@@ -0,0 +1,478 @@
+import {
+  stylesKemetTabs
+} from "./chunk-5LCSEF3N.mjs";
+import {
+  emitEvent
+} from "./chunk-LHEY3UOF.mjs";
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/tabs.ts
+import { LitElement, html } from "lit";
+import {
+  customElement,
+  property,
+  query,
+  state
+} from "lit/decorators.js";
+var panelEffect = ["none", "slide", "fade", "stacked"];
+var EnumPanelEffect = /* @__PURE__ */ ((EnumPanelEffect2) => {
+  EnumPanelEffect2["None"] = "none";
+  EnumPanelEffect2["Slide"] = "slide";
+  EnumPanelEffect2["Fade"] = "fade";
+  EnumPanelEffect2["Stacked"] = "stacked";
+  return EnumPanelEffect2;
+})(EnumPanelEffect || {});
+var tabsAlign = ["center", "between", "around", "evenly", "start", "end"];
+var EnumTabsAlign = /* @__PURE__ */ ((EnumTabsAlign2) => {
+  EnumTabsAlign2["Center"] = "center";
+  EnumTabsAlign2["Between"] = "between";
+  EnumTabsAlign2["Around"] = "around";
+  EnumTabsAlign2["Evenly"] = "evenly";
+  EnumTabsAlign2["Start"] = "start";
+  EnumTabsAlign2["End"] = "end";
+  return EnumTabsAlign2;
+})(EnumTabsAlign || {});
+var KemetTabs = class extends LitElement {
+  constructor() {
+    super();
+    this.selectedIndex = 0;
+    this.panelPosition = 0;
+    this.panelEffect = "none" /* None */;
+    this.placement = "top" /* Top */;
+    this.tabsAlign = "center" /* Center */;
+    this.hideInk = false;
+    this.addEventListener("kemet-selected", this.tabSelectedChange.bind(this));
+    this.addEventListener("kemet-closed", this.handleTabClose.bind(this));
+    window.addEventListener("resize", this.handleResize.bind(this));
+  }
+  firstUpdated() {
+    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">
+        <div part='tablist' role="tablist">
+          <slot name="tab" @slotchange=${() => this.handleLinksSlotChange()}></slot>
+        </div>
+        ${this.makeInk("links")}
+      </div>
+      ${this.makeInk("host")}
+      ${this.makeDivider()}
+      <section id="panels" part="panels" style="transform:translateX(${this.panelPosition}px);">
+        <div>
+          <slot name="panel" @slotchange=${() => this.handlePanelsSlotChange()}></slot>
+        </div>
+      </section>
+    `;
+  }
+  updated(prevProps) {
+    this.determineFade();
+    this.determineStacked();
+    if (prevProps.get("selected") && prevProps.get("selected") !== this.selected) {
+      this.selectTab();
+      this.selectPanel();
+    }
+    if (typeof prevProps.get("selectedIndex") === "number" && prevProps.get("selectedIndex") !== this.selected) {
+      this.selectTab();
+      this.selectPanel();
+    }
+  }
+  handleLinksSlotChange() {
+    const tabs = this.querySelectorAll("kemet-tab");
+    let index = 0;
+    tabs.forEach((tab) => {
+      tab.index = index;
+      index += 1;
+      this.tabs = this.tabs.concat(tab);
+      tab.addEventListener("keydown", (event) => this.handleTabKeydown(event));
+    });
+    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) => {
+      panel.index = index;
+      index += 1;
+      this.panels = this.panels.concat(panel);
+    });
+    if (this.panels.length > 0) this.panels[0].selected = true;
+    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;
+    }
+    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;
+    }
+    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;
+    }
+    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;
+  }
+  makeDivider() {
+    if (this.divider) {
+      return html`<div part="divider"></div>`;
+    }
+    return null;
+  }
+  makeLeftArrow() {
+    if (this.overflow) {
+      return html`<kemet-icon-bootstrap icon='chevron-left' size="20" @click=${() => this.handleLeftArrow()}></kemet-icon-bootstrap>`;
+    }
+    return null;
+  }
+  makeRightArrow() {
+    if (this.overflow) {
+      return html`<kemet-icon-bootstrap icon='chevron-right' size="20" @click=${() => this.handleRightArrow()}></kemet-icon-bootstrap>`;
+    }
+    return null;
+  }
+  selectTab() {
+    const marginLeft = this.links ? parseInt(window.getComputedStyle(this.links).marginLeft.replace("px", ""), 10) : 0;
+    const overflowOffset = this.overflow ? marginLeft : 0;
+    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;
+        }
+      });
+    } 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;
+        }
+      });
+    }
+  }
+  selectPanel() {
+    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;
+        }
+      });
+    } 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;
+        }
+      });
+    }
+  }
+  dispatchTabChange() {
+    emitEvent(this, "kemet-change", {
+      element: this,
+      selectedName: this.selected,
+      selectedIndex: this.selectedIndex
+    });
+  }
+  tabSelectedChange(event) {
+    if (this.selected) {
+      this.selected = event.detail.getAttribute("link");
+    } else {
+      this.selectedIndex = event.detail.index;
+    }
+    this.selectTab();
+    this.selectPanel();
+    this.dispatchTabChange();
+  }
+  determineFade() {
+    this.panels.forEach((panel) => {
+      if (this.panelEffect === "fade") panel.classList.add("fade");
+    });
+  }
+  determineStacked() {
+    this.panels.forEach((panel) => {
+      if (this.panelEffect === "stacked") panel.classList.add("stacked");
+    });
+  }
+  determineOverflow() {
+    const tabsContainerWidth = this.offsetWidth;
+    const tabElements = this.querySelectorAll("kemet-tab");
+    let totalTabsWidth = 0;
+    tabElements.forEach((tab) => {
+      totalTabsWidth += tab.offsetWidth;
+    });
+    this.overflow = totalTabsWidth > tabsContainerWidth && (this.placement === "top" || this.placement === "bottom");
+  }
+  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);
+      }
+    }
+  }
+  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;
+    }
+  }
+  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();
+    }
+  }
+  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;
+    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) {
+        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.xDown = null;
+    this.yDown = null;
+  }
+};
+KemetTabs.styles = [stylesKemetTabs];
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetTabs.prototype, "selected", 2);
+__decorateClass([
+  property({ type: Number })
+], KemetTabs.prototype, "selectedIndex", 2);
+__decorateClass([
+  property({ type: Number })
+], KemetTabs.prototype, "panelPosition", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "panel-effect" })
+], KemetTabs.prototype, "panelEffect", 2);
+__decorateClass([
+  property({ type: Boolean })
+], KemetTabs.prototype, "swipe", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetTabs.prototype, "placement", 2);
+__decorateClass([
+  property({ type: Boolean })
+], KemetTabs.prototype, "divider", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "tabs-align" })
+], KemetTabs.prototype, "tabsAlign", 2);
+__decorateClass([
+  property({ type: Object })
+], KemetTabs.prototype, "ink", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "hide-ink" })
+], KemetTabs.prototype, "hideInk", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetTabs.prototype, "overflow", 2);
+__decorateClass([
+  state()
+], KemetTabs.prototype, "tabs", 2);
+__decorateClass([
+  state()
+], KemetTabs.prototype, "panels", 2);
+__decorateClass([
+  state()
+], KemetTabs.prototype, "xDown", 2);
+__decorateClass([
+  state()
+], KemetTabs.prototype, "yDown", 2);
+__decorateClass([
+  state()
+], KemetTabs.prototype, "links", 2);
+__decorateClass([
+  query("#panels")
+], KemetTabs.prototype, "panelsElement", 2);
+KemetTabs = __decorateClass([
+  customElement("kemet-tabs")
+], KemetTabs);
+
+export {
+  panelEffect,
+  EnumPanelEffect,
+  tabsAlign,
+  EnumTabsAlign,
+  KemetTabs
+};
+//# sourceMappingURL=chunk-JI5MHBCW.mjs.map

package/dist/chunk-JI5MHBCW.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/tabs.ts"],"sourcesContent":["/* eslint-disable no-case-declarations */\nimport { LitElement, html } from 'lit';\nimport {\n customElement, property, query, state,\n} from 'lit/decorators.js';\nimport { emitEvent } from '../utilities/events';\nimport { stylesKemetTabs } from '../styles/elements/tabs';\nimport { TypeDirection, EnumDirections } from '../utilities/constants';\nimport type KemetTab from './tab';\nimport type KemetTabPanel from './tab-panel';\nimport './icon-bootstrap';\n\n\n\ninterface InterfaceLink {\n  width: string;\n  height: string;\n  positionX: string;\n  positionY: string;\n}\n\nexport interface InterfaceTabsDetails {\n  element: KemetTabs;\n  selectedName: string;\n  selectedIndex: number;\n}\n\nexport const panelEffect = ['none', 'slide', 'fade', 'stacked'] as const;\nexport enum EnumPanelEffect {\n  None = 'none',\n  Slide = 'slide',\n  Fade = 'fade',\n  Stacked = 'stacked'\n}\nexport type TypePanelEffect = typeof panelEffect[number];\n\n\nexport const tabsAlign = ['center', 'between', 'around', 'evenly', 'start', 'end'] as const;\nexport enum EnumTabsAlign {\n  Center = 'center',\n  Between = 'between',\n  Around = 'around',\n  Evenly = 'evenly',\n  Start = 'start',\n  End = 'end'\n}\nexport type TypeTabsAlign = typeof tabsAlign[number];\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-tabs\n * @summary A group of tabs and panels.\n *\n * @prop {string} selected - The selected tab by name\n * @prop {number} selectedIndex - The selected tab by index\n * @prop {number} panelPosition - Positions the current panel\n * @prop {string} panelEffect - The transition effect for panels\n * @prop {boolean} swipe - Determines whether to enable swipe behavior\n * @prop {TypeDirection} placement - Places the tabs to the top, right, bottom, or left\n * @prop {boolean} divider - Determines whether to show a divider line\n * @prop {TypeTabsAlign} tabsAlign - Spacing alignment of the tabs\n * @prop {object} ink - An object that contains information about the ink\n * @prop {boolean} hideInk - Determines whether to hide the ink\n * @prop {boolean} overflow - Is true when the space of the tabs is larger than it's container\n *\n * @slot tab - Place the tabs here.\n * @slot panel - Place the panels here.\n *\n * @csspart links - The container for the tablist.\n * @csspart tablist - Contains the tabs.\n * @csspart panels - Contains the panels.\n * @csspart ink - The ink element.\n * @csspart divider - The divider element.\n *\n * @cssproperty --kemet-tabs-ink-size - The thickness of the ink.\n * @cssproperty --kemet-tabs-ink-radius - The radius on the ink.\n * @cssproperty --kemet-tabs-ink-color - The color of the ink.\n * @cssproperty --kemet-tabs-divider-size - The thickness of the divider.\n * @cssproperty --kemet-tabs-divider-color - The color of the divider.\n * @cssproperty --kemet-tabs-transition-speed - The transition speed of the panels.\n * @cssproperty --kemet-tabs-spacer - The space between tabs and panels.\n *\n * @event kemet-change - Fires when a tab is changed\n *\n */\n\n@customElement('kemet-tabs')\nexport default class KemetTabs extends LitElement {\n  static styles = [stylesKemetTabs];\n\n  @property({ type: String, reflect: true })\n  selected: string;\n\n  @property({ type: Number })\n  selectedIndex: number = 0;\n\n  @property({ type: Number })\n  panelPosition: number = 0;\n\n  @property({ type: String, reflect: true, attribute: 'panel-effect' })\n  panelEffect: TypePanelEffect = EnumPanelEffect.None;\n\n  @property({ type: Boolean })\n  swipe: boolean;\n\n  @property({ type: String, reflect: true })\n  placement: TypeDirection = EnumDirections.Top;\n\n  @property({ type: Boolean })\n  divider: boolean;\n\n  @property({ type: String, reflect: true, attribute: 'tabs-align' })\n  tabsAlign: TypeTabsAlign = EnumTabsAlign.Center;\n\n  @property({ type: Object })\n  ink: InterfaceLink;\n\n  @property({ type: Boolean, attribute: 'hide-ink' })\n  hideInk: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  overflow: boolean;\n\n  @state()\n  tabs: KemetTab[];\n\n  @state()\n  panels: KemetTabPanel[];\n\n  @state()\n  xDown: number | null;\n\n  @state()\n  yDown: number | null;\n\n  @state()\n  links: HTMLElement;\n\n  @query('#panels')\n  panelsElement: HTMLElement;\n\n  constructor() {\n    super();\n\n    this.addEventListener('kemet-selected', this.tabSelectedChange.bind(this));\n    this.addEventListener('kemet-closed', this.handleTabClose.bind(this));\n    window.addEventListener('resize', this.handleResize.bind(this));\n  }\n\n  firstUpdated() {\n    // standard properties\n    this.tabs = [];\n    this.panels = [];\n    this.xDown = null;\n    this.yDown = null;\n\n    this.links = this.shadowRoot.getElementById('links');\n  }\n\n  render() {\n    return html`\n      ${this.makeLeftArrow()}\n      ${this.makeRightArrow()}\n      <div id=\"links\" part=\"links\">\n        <div part='tablist' role=\"tablist\">\n          <slot name=\"tab\" @slotchange=${() => this.handleLinksSlotChange()}></slot>\n        </div>\n        ${this.makeInk('links')}\n      </div>\n      ${this.makeInk('host')}\n      ${this.makeDivider()}\n      <section id=\"panels\" part=\"panels\" style=\"transform:translateX(${this.panelPosition}px);\">\n        <div>\n          <slot name=\"panel\" @slotchange=${() => this.handlePanelsSlotChange()}></slot>\n        </div>\n      </section>\n    `;\n  }\n\n  updated(prevProps: Map<string, never>) {\n    this.determineFade();\n    this.determineStacked();\n\n    if (prevProps.get('selected') && prevProps.get('selected') !== this.selected) {\n      this.selectTab();\n      this.selectPanel();\n    }\n\n    if (typeof prevProps.get('selectedIndex') === 'number' && prevProps.get('selectedIndex') !== this.selected) {\n      this.selectTab();\n      this.selectPanel();\n    }\n  }\n\n  handleLinksSlotChange() {\n    const tabs = this.querySelectorAll('kemet-tab');\n    let index = 0;\n\n    tabs.forEach((tab: KemetTab) => {\n      // give each tab an index to select by if link/panel is not used\n      tab.index = index;\n      index += 1;\n\n      // store the list of tabs\n      this.tabs = this.tabs.concat(tab);\n\n      // add keyboard support\n      tab.addEventListener('keydown', event => this.handleTabKeydown(event));\n    });\n\n    // default to the first tab/panel selected\n    if (this.tabs.length > 0) this.tabs[0].selected = true;\n\n    setTimeout(() => {\n      this.selectTab();\n    }, 1);\n    this.determineOverflow();\n  }\n\n  handlePanelsSlotChange() {\n    const panels = this.querySelectorAll('kemet-tab-panel');\n    const panelElement = this.shadowRoot.getElementById('panels');\n    let index = 0;\n\n    panels.forEach((panel: KemetTabPanel) => {\n      // give each panel an index to select by if link/panel is not used\n      panel.index = index;\n      index += 1;\n\n      // store the list of panels\n      this.panels = this.panels.concat(panel);\n    });\n\n    // default to the first tab/panel selected\n    if (this.panels.length > 0) this.panels[0].selected = true;\n\n    // add swipe support\n    if (this.swipe) {\n      panelElement.addEventListener('touchstart', event => this.handleTouchStart(event), false);\n      panelElement.addEventListener('touchmove', event => this.handleTouchMove(event), false);\n    }\n\n    this.selectPanel();\n  }\n\n  handleLeftArrow() {\n    const selectedElement = this.tabs.find(tab => tab.selected) || this.tabs[0];\n    const previousElement = selectedElement.previousElementSibling as KemetTab;\n    const selectedIndex = this.tabs.findIndex(tab => tab.selected);\n\n    if (this.selected) {\n      this.selected = previousElement ? previousElement.link : selectedElement.link;\n    } else {\n      this.selectedIndex = selectedIndex > 0 ? selectedIndex - 1 : 0;\n    }\n\n    if (previousElement) {\n      this.links.scrollLeft = previousElement.offsetLeft - 20;\n    }\n\n    this.selectTab();\n    this.selectPanel();\n  }\n\n  handleRightArrow() {\n    const selectedElement = this.tabs.find(tab => tab.selected) || this.tabs[this.tabs.length - 1];\n    const nextElement = selectedElement.nextElementSibling as KemetTab;\n    const selectedIndex = this.tabs.findIndex(tab => tab.selected);\n\n    if (this.selected) {\n      this.selected = nextElement ? nextElement.link : selectedElement.link;\n    } else {\n      this.selectedIndex = selectedIndex < this.tabs.length - 1\n        ? selectedIndex + 1\n        : this.tabs.length - 1;\n    }\n\n    if (nextElement) {\n      this.links.scrollLeft = nextElement.offsetLeft - 20;\n    }\n\n    this.selectTab();\n    this.selectPanel();\n  }\n\n  handleTabClose(event: CustomEvent) {\n    const tab = event.detail;\n    const panel = this.panels[tab.index];\n\n    this.selected = this.tabs[0].link;\n    this.selectedIndex = 0;\n\n    panel.remove();\n    tab.remove();\n  }\n\n  makeInk(location: string) {\n    if (this.hideInk) {\n      return null;\n    }\n\n    if ((this.placement === 'top' || this.placement === 'bottom') && this.ink && location === 'links') {\n      return html`<div part=\"ink\" style=\"width:${this.ink.width}; transform:translateX(${this.ink.positionX})\"></div>`;\n    }\n\n    if ((this.placement === 'left' || this.placement === 'right') && this.ink && location === 'host') {\n      return html`<div part=\"ink\" style=\"height:${this.ink.height}; transform:translateY(${this.ink.positionY})\"></div>`;\n    }\n\n    return null;\n  }\n\n  makeDivider() {\n    if (this.divider) {\n      return html`<div part=\"divider\"></div>`;\n    }\n\n    return null;\n  }\n\n  makeLeftArrow() {\n    if (this.overflow) {\n      return html`<kemet-icon-bootstrap icon='chevron-left' size=\"20\" @click=${() => this.handleLeftArrow()}></kemet-icon-bootstrap>`;\n    }\n\n    return null;\n  }\n\n  makeRightArrow() {\n    if (this.overflow) {\n      return html`<kemet-icon-bootstrap icon='chevron-right' size=\"20\" @click=${() => this.handleRightArrow()}></kemet-icon-bootstrap>`;\n    }\n\n    return null;\n  }\n\n  selectTab() {\n    const marginLeft = this.links ? parseInt(window.getComputedStyle(this.links).marginLeft.replace('px', ''), 10) : 0;\n    const overflowOffset = this.overflow ? marginLeft : 0;\n\n    // if the user uses the selected attribute select by it\n    if (this.selected) {\n      this.tabs.forEach((tab) => {\n        const tabName = tab.getAttribute('link');\n\n        if (tabName === this.selected) {\n          tab.selected = true;\n          this.selected = tabName;\n\n          this.ink = {\n            width: `${tab.offsetWidth}px`,\n            height: `${tab.offsetHeight}px`,\n            positionX: `${tab.offsetLeft - overflowOffset}px`,\n            positionY: `${tab.offsetTop}px`,\n          };\n\n          this.links.scrollLeft = tab.offsetLeft - overflowOffset;\n        } else {\n          tab.selected = false;\n        }\n      });\n\n      // otherwise select by index\n    } else {\n      this.tabs.forEach((tab) => {\n        if (this.selectedIndex === tab.index) {\n          tab.selected = true;\n\n          this.ink = {\n            width: `${tab.offsetWidth}px`,\n            height: `${tab.offsetHeight}px`,\n            positionX: `${tab.offsetLeft - overflowOffset}px`,\n            positionY: `${tab.offsetTop}px`,\n          };\n\n          this.links.scrollLeft = tab.offsetLeft - overflowOffset;\n        } else {\n          tab.selected = false;\n        }\n      });\n    }\n  }\n\n  selectPanel() {\n    // if the user uses the selected attribute select by it\n    if (this.selected) {\n      this.panels.forEach((panel) => {\n        const panelName = panel.getAttribute('panel');\n\n        if (this.panelEffect === 'fade' && panel.index !== 0) {\n          panel.classList.add('push');\n        }\n\n        if (this.placement === 'left' || this.placement === 'right') {\n          panel.classList.add('vertical');\n        }\n\n        if (panelName === this.selected) {\n          panel.selected = true;\n          this.animatePanel(panelName, null);\n        } else {\n          panel.selected = false;\n        }\n      });\n\n      // otherwise select by index\n    } else {\n      this.panels.forEach((panel) => {\n        if (this.panelEffect === 'fade' && panel.index !== 0) {\n          panel.classList.add('push');\n        }\n\n        if (this.placement === 'left' || this.placement === 'right') {\n          panel.classList.add('vertical');\n        }\n\n        if (this.selectedIndex === panel.index) {\n          panel.selected = true;\n          this.animatePanel(null, panel.index);\n        } else {\n          panel.selected = false;\n        }\n      });\n    }\n  }\n\n  dispatchTabChange() {\n    emitEvent(this, 'kemet-change', {\n      element: this,\n      selectedName: this.selected,\n      selectedIndex: this.selectedIndex\n    });\n  }\n\n  tabSelectedChange(event: CustomEvent) {\n    if (this.selected) {\n      // if selected has been set, use the string attribute\n      this.selected = event.detail.getAttribute('link');\n    } else {\n      // otherwise use the generated index\n      this.selectedIndex = event.detail.index;\n    }\n\n    this.selectTab();\n    this.selectPanel();\n    this.dispatchTabChange();\n  }\n\n  determineFade() {\n    this.panels.forEach((panel) => {\n      // add fade class if panel effect is fade\n      if (this.panelEffect === 'fade') panel.classList.add('fade');\n    });\n  }\n\n  determineStacked() {\n    this.panels.forEach((panel) => {\n      // add fade class if panel effect is fade\n      if (this.panelEffect === 'stacked') panel.classList.add('stacked');\n    });\n  }\n\n  determineOverflow() {\n    const tabsContainerWidth = this.offsetWidth;\n    const tabElements = this.querySelectorAll('kemet-tab');\n\n    let totalTabsWidth = 0;\n\n    tabElements.forEach((tab) => {\n      totalTabsWidth += tab.offsetWidth;\n    });\n\n    this.overflow = totalTabsWidth > tabsContainerWidth && (this.placement === 'top' || this.placement === 'bottom');\n  }\n\n  handleResize() {\n    if (this.tabs && this.panels) {\n      const marginLeft = this.links ? parseInt(window.getComputedStyle(this.links).marginLeft.replace('px', ''), 10) : 0;\n      const overflowOffset = this.overflow ? marginLeft : 0;\n      const selectedElement = this.tabs.find(tab => tab.selected);\n\n      if (selectedElement) {\n        this.ink = {\n          width: `${selectedElement.offsetWidth}px`,\n          height: `${selectedElement.offsetHeight}px`,\n          positionX: `${selectedElement.offsetLeft - overflowOffset}px`,\n          positionY: `${selectedElement.offsetTop}px`,\n        };\n      }\n\n      this.determineOverflow();\n\n      if (this.selected) {\n        this.animatePanel(this.selected, null);\n      } else {\n        this.animatePanel(null, this.selectedIndex);\n      }\n    }\n  }\n\n  animatePanel(panelName: string, panelIndex: number) {\n    if (panelName) {\n      const selectedPanel = this.querySelector(`[panel=\"${panelName}\"]`) as KemetTabPanel;\n      if (selectedPanel) this.panelPosition = selectedPanel.offsetLeft * -1;\n    } else {\n      if (this.panels[panelIndex]) this.panelPosition = this.panels[panelIndex].offsetLeft * -1;\n    }\n  }\n\n  handleTabKeydown(event: KeyboardEvent) {\n    if (this.selected) {\n      switch (event.key) {\n        case 'Home':\n          this.selected = this.tabs[0].getAttribute('link');\n          break;\n        case 'End':\n          this.selected = this.tabs[this.tabs.length - 1].getAttribute('link');\n          break;\n        case 'ArrowRight':\n          const nextLinkElement = this.querySelector('kemet-tab[selected]').nextElementSibling;\n          const nextLink = nextLinkElement ? nextLinkElement.getAttribute('link') : false;\n\n          if (nextLink) {\n            this.selected = nextLink;\n          }\n          break;\n        case 'ArrowLeft':\n          const previousLinkElement = this.querySelector('kemet-tab[selected]').previousElementSibling;\n          const previousLink = previousLinkElement ? previousLinkElement.getAttribute('link') : false;\n\n          if (previousLink) {\n            this.selected = previousLink;\n          }\n          break;\n        default: break;\n      }\n\n      this.tabs.find(tab => tab.link === this.selected).focus();\n    } else {\n      switch (event.key) {\n        case 'Home':\n          this.selectedIndex = 0;\n          break;\n        case 'End':\n          this.selectedIndex = this.tabs.length - 1;\n          break;\n        case 'ArrowRight':\n          if (this.selectedIndex < this.tabs.length - 1) {\n            this.selectedIndex += 1;\n          } else {\n            this.selectedIndex = this.tabs.length - 1;\n          }\n          break;\n        case 'ArrowLeft':\n          if (this.selectedIndex < 1) {\n            this.selectedIndex = 0;\n          } else {\n            this.selectedIndex -= 1;\n          }\n          break;\n        default: break;\n      }\n\n      this.tabs[this.selectedIndex].focus();\n    }\n  }\n\n  handleTouchStart(event: TouchEvent) {\n    this.xDown = event.touches[0].clientX;\n    this.yDown = event.touches[0].clientY;\n  }\n\n  handleTouchMove(event: TouchEvent) {\n    if (!this.xDown || !this.yDown) {\n      return;\n    }\n\n    const xUp = event.touches[0].clientX;\n    const yUp = event.touches[0].clientY;\n    const xDiff = this.xDown - xUp;\n    const yDiff = this.yDown - yUp;\n\n    const nextElement = this.querySelector('kemet-tab-panel[selected]')?.nextElementSibling;\n    const next = nextElement ? nextElement.getAttribute('panel') : false;\n    const previousElement = this.querySelector('kemet-tab-panel[selected]')?.previousElementSibling;\n    const previous = previousElement ? previousElement.getAttribute('panel') : false;\n\n    if (Math.abs(xDiff) > Math.abs(yDiff)) {\n      if (xDiff > 0) {\n        if (this.selected) {\n          if (next) this.selected = next;\n        } else {\n          if (this.selectedIndex < this.tabs.length) this.selectedIndex += 1;\n        }\n      } else {\n        if (this.selected) {\n          if (previous) this.selected = previous;\n        } else {\n          if (this.selectedIndex > 0) this.selectedIndex -= 1;\n        }\n      }\n\n      this.selectTab();\n      this.selectPanel();\n    }\n\n    this.xDown = null;\n    this.yDown = null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-tabs': KemetTabs\n  }\n}\n"],"mappings":"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","names":["EnumPanelEffect","EnumTabsAlign"]}