kemet-ui 1.4.0 → 2.0.1

package/dist/components/kemet-tabs/kemet-tab-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-tab-panel.js","sourceRoot":"","sources":["../../../src/components/kemet-tabs/kemet-tab-panel.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAE/C;;;;;;;;;;;;GAYG;AAGH,IAAqB,aAAa,GAAlC,MAAqB,aAAc,SAAQ,UAAU;IAArD;;QAIE,aAAQ,GAAY,KAAK,CAAC;IAwB5B,CAAC;IAnBC,OAAO;QACL,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;IAED,IAAI;QACF,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QAEtC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;SACpC;aAAM;YACL,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;SACrC;IACH,CAAC;CACF,CAAA;AA3BQ,oBAAM,GAAG,CAAC,mBAAmB,CAAC,CAAC;AAGtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACjB;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACb;AAPK,aAAa;IADjC,aAAa,CAAC,iBAAiB,CAAC;GACZ,aAAa,CA4BjC;eA5BoB,aAAa","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesKemetTabPanel } from './styles';\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. Default: 0.5s.\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  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\n"]}

package/dist/components/kemet-tabs/kemet-tab.d.ts

@@ -0,0 +1,37 @@
+import { LitElement } from 'lit';
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-tab
+ * @summary A tab in a set of tabs.
+ *
+ * @prop {boolean} selected - Is true when the tab is selected
+ * @prop {string} link - Links to a panel name
+ * @prop {boolean} closable - Determines if the tab can be closed
+ *
+ * @cssproperty --kemet-tab-padding - The padding of the tab. Default: 1rem.
+ * @cssproperty --kemet-tab-color - The color of the selected tab. Default: var(--kemet-color-background).
+ *
+ * @event kemet-tab-selected - Fires when a tab is selected
+ * @event kemet-tab-close - Fires when the tab should close
+ *
+ */
+export default class KemetTab extends LitElement {
+    static styles: import("lit").CSSResult[];
+    selected: boolean;
+    link: string;
+    closable: boolean;
+    firstUpdated(): void;
+    updated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    select(): void;
+    a11y(): void;
+    makeCloseable(): import("lit-html").TemplateResult<1>;
+    handleClosable(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-tab': KemetTab;
+    }
+}

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

@@ -1,6 +1,8 @@
-import { LitElement, html, css } from 'lit';
-import { emitEvent } from '../../utilities/misc/events.js';
-
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { emitEvent } from '../../utilities/misc/events';
+import { customElement, property } from 'lit/decorators.js';
+import { stylesKemetTab } from './styles';
 /**
  * @since 1.0.0
  * @status stable
@@ -13,102 +15,65 @@ import { emitEvent } from '../../utilities/misc/events.js';
  * @prop {boolean} closable - Determines if the tab can be closed
  *
  * @cssproperty --kemet-tab-padding - The padding of the tab. Default: 1rem.
- * @cssproperty --kemet-tab-color - The color of the selected tab. Default: var(--kemet-color-primary).
+ * @cssproperty --kemet-tab-color - The color of the selected tab. Default: var(--kemet-color-background).
  *
  * @event kemet-tab-selected - Fires when a tab is selected
  * @event kemet-tab-close - Fires when the tab should close
  *
  */
-
-export default class KemetTab extends LitElement {
-  static get styles() {
-    return css`
-      :host {
-        cursor: pointer;
-        display: inline-flex;
-        flex: 0 0 auto;
-        align-items: center;
-        justify-content: center;
-        white-space: nowrap;
-        padding: var(--kemet-tab-padding, 1rem);
-      }
-
-      :host([selected]) {
-        cursor: auto;
-        color: var(--kemet-tab-color, var(--kemet-color-primary));
-      }
-
-      kemet-icon {
-        cursor: pointer;
-        margin-left: 0.5rem;
-      }
-    `;
-  }
-
-  static get properties() {
-    return {
-      selected: {
-        type: Boolean,
-        reflect: true,
-      },
-      link: {
-        type: String,
-      },
-      closable: {
-        type: Boolean,
-      },
-    };
-  }
-
-  constructor() {
-    super();
-
-    // property defaults
-    this.selected = false;
-  }
-
-  firstUpdated() {
-    this.addEventListener('click', this.select.bind(this));
-  }
-
-  updated() {
-    this.a11y();
-  }
-
-  render() {
-    return html`
+let KemetTab = class KemetTab extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.selected = false;
+    }
+    firstUpdated() {
+        this.addEventListener('click', this.select.bind(this));
+    }
+    updated() {
+        this.a11y();
+    }
+    render() {
+        return html `
       <slot></slot>
       ${this.makeCloseable()}
     `;
-  }
-
-  select() {
-    emitEvent(this, 'kemet-tab-selected', this);
-  }
-
-  a11y() {
-    this.setAttribute('role', 'tab');
-
-    if (this.selected) {
-      this.setAttribute('aria-selected', 'true');
-      this.setAttribute('tabindex', '0');
-    } else {
-      this.setAttribute('aria-selected', 'false');
-      this.setAttribute('tabindex', '-1');
     }
-  }
-
-  makeCloseable() {
-    if (this.closable) {
-      return html`<kemet-icon icon="x-lg" @click=${() => this.handleClosable()}></kemet-icon>`;
+    select() {
+        emitEvent(this, 'kemet-tab-selected', this);
+    }
+    a11y() {
+        this.setAttribute('role', 'tab');
+        if (this.selected) {
+            this.setAttribute('aria-selected', 'true');
+            this.setAttribute('tabindex', '0');
+        }
+        else {
+            this.setAttribute('aria-selected', 'false');
+            this.setAttribute('tabindex', '-1');
+        }
+    }
+    makeCloseable() {
+        if (this.closable) {
+            return html `<kemet-icon icon="x-lg" @click=${() => this.handleClosable()}></kemet-icon>`;
+        }
+        return null;
+    }
+    handleClosable() {
+        emitEvent(this, 'kemet-tab-close', this);
     }
-
-    return null;
-  }
-
-  handleClosable() {
-    emitEvent(this, 'kemet-tab-close', this);
-  }
-}
-
-customElements.define('kemet-tab', KemetTab);
+};
+KemetTab.styles = [stylesKemetTab];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetTab.prototype, "selected", void 0);
+__decorate([
+    property({ type: String })
+], KemetTab.prototype, "link", void 0);
+__decorate([
+    property({ type: Boolean })
+], KemetTab.prototype, "closable", void 0);
+KemetTab = __decorate([
+    customElement('kemet-tab')
+], KemetTab);
+export default KemetTab;
+//# sourceMappingURL=kemet-tab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-tab.js","sourceRoot":"","sources":["../../../src/components/kemet-tabs/kemet-tab.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAG1C;;;;;;;;;;;;;;;;;GAiBG;AAGH,IAAqB,QAAQ,GAA7B,MAAqB,QAAS,SAAQ,UAAU;IAAhD;;QAIE,aAAQ,GAAY,KAAK,CAAC;IAmD5B,CAAC;IA1CC,YAAY;QACV,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACzD,CAAC;IAED,OAAO;QACL,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;QAEP,IAAI,CAAC,aAAa,EAAE;KACvB,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,SAAS,CAAC,IAAI,EAAE,oBAAoB,EAAE,IAAI,CAAC,CAAC;IAC9C,CAAC;IAED,IAAI;QACF,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QAEjC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;YAC3C,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;SACpC;aAAM;YACL,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;YAC5C,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;SACrC;IACH,CAAC;IAED,aAAa;QACX,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO,IAAI,CAAA,kCAAkC,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,gBAAgB,CAAC;SAC1F;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED,cAAc;QACZ,SAAS,CAAC,IAAI,EAAE,iBAAiB,EAAE,IAAI,CAAC,CAAC;IAC3C,CAAC;CACF,CAAA;AAtDQ,eAAM,GAAG,CAAC,cAAc,CAAC,CAAC;AAGjC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACjB;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACV;AAVC,QAAQ;IAD5B,aAAa,CAAC,WAAW,CAAC;GACN,QAAQ,CAuD5B;eAvDoB,QAAQ","sourcesContent":["import { LitElement, html } from 'lit';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesKemetTab } from './styles';\n\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-tab\n * @summary A tab in a set of tabs.\n *\n * @prop {boolean} selected - Is true when the tab is selected\n * @prop {string} link - Links to a panel name\n * @prop {boolean} closable - Determines if the tab can be closed\n *\n * @cssproperty --kemet-tab-padding - The padding of the tab. Default: 1rem.\n * @cssproperty --kemet-tab-color - The color of the selected tab. Default: var(--kemet-color-background).\n *\n * @event kemet-tab-selected - Fires when a tab is selected\n * @event kemet-tab-close - Fires when the tab should close\n *\n */\n\n@customElement('kemet-tab')\nexport default class KemetTab extends LitElement {\n  static styles = [stylesKemetTab];\n\n  @property({ type: Boolean, reflect: true })\n  selected: boolean = false;\n\n  @property({ type: String })\n  link: string;\n\n  @property({ type: Boolean })\n  closable: boolean;\n\n\n  firstUpdated() {\n    this.addEventListener('click', this.select.bind(this));\n  }\n\n  updated() {\n    this.a11y();\n  }\n\n  render() {\n    return html`\n      <slot></slot>\n      ${this.makeCloseable()}\n    `;\n  }\n\n  select() {\n    emitEvent(this, 'kemet-tab-selected', this);\n  }\n\n  a11y() {\n    this.setAttribute('role', 'tab');\n\n    if (this.selected) {\n      this.setAttribute('aria-selected', 'true');\n      this.setAttribute('tabindex', '0');\n    } else {\n      this.setAttribute('aria-selected', 'false');\n      this.setAttribute('tabindex', '-1');\n    }\n  }\n\n  makeCloseable() {\n    if (this.closable) {\n      return html`<kemet-icon icon=\"x-lg\" @click=${() => this.handleClosable()}></kemet-icon>`;\n    }\n\n    return null;\n  }\n\n  handleClosable() {\n    emitEvent(this, 'kemet-tab-close', this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-tab': KemetTab\n  }\n}\n\n"]}

package/dist/components/kemet-tabs/kemet-tabs.d.ts

@@ -0,0 +1,91 @@
+import { LitElement } from 'lit';
+import { TypePanelEffect, TypePlacement, TypeTabsAlign } from './types';
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-tabs
+ * @summary A group of tabs and panels.
+ *
+ * @prop {string} selected - The selected tab by name
+ * @prop {number} selectedIndex - The selected tab by index
+ * @prop {number} panelPosition - Positions the current panel
+ * @prop {string} panelEffect - The transition effect for panels
+ * @prop {boolean} swipe - Determines whether or not to enable swipe behavior
+ * @prop {string} placement - Places the tabs to the top, right, bottom, or left
+ * @prop {boolean} divider - Determines whether or not to show a divider line
+ * @prop {string} tabsAlign - Spacing alignment of the tabs
+ * @prop {object} ink - An object that contains information about the ink
+ * @prop {boolean} hideInk - Determines whether or not to hide the ink
+ * @prop {boolean} overflow - Is true when the space of the tabs is larger than it's container
+ *
+ * @slot tab - Place the tabs here.
+ * @slot panel - Place the panels here.
+ *
+ * @csspart links - The container for the tablist.
+ * @csspart tablist - Contains the tabs.
+ * @csspart panels - Contains the panels.
+ * @csspart ink - The ink element.
+ * @csspart divider - The divider element.
+ *
+ * @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-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.
+ * @cssproperty --kemet-tabs-spacer - The space between tabs and panels. Default:  1rem.
+ *
+ * @event kemet-tab-changed - Fires when a tab is changed
+ *
+ */
+export default class KemetTabs extends LitElement {
+    static styles: import("lit").CSSResult[];
+    selected: string;
+    selectedIndex: number;
+    panelPosition: number;
+    panelEffect: TypePanelEffect;
+    swipe: boolean;
+    placement: TypePlacement;
+    divider: boolean;
+    tabsAlign: TypeTabsAlign;
+    ink: any;
+    hideInk: boolean;
+    overflow: boolean;
+    tabs: any[];
+    panels: any[];
+    xDown: number | null;
+    yDown: number | null;
+    links: HTMLElement;
+    panelsElement: HTMLElement;
+    constructor();
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    updated(): void;
+    handleLinksSlotChange(): void;
+    handlePanelsSlotChange(): void;
+    handleLeftArrow(): void;
+    handleRightArrow(): void;
+    handleTabClose(event: any): void;
+    makeInk(location: any): import("lit-html").TemplateResult<1>;
+    makeDivider(): import("lit-html").TemplateResult<1>;
+    makeLeftArrow(): import("lit-html").TemplateResult<1>;
+    makeRightArrow(): import("lit-html").TemplateResult<1>;
+    selectTab(): void;
+    selectPanel(): void;
+    dispatchTabChange(): void;
+    tabSelectedChange(event: any): void;
+    determineFade(): void;
+    determineStacked(): void;
+    determineOverflow(): void;
+    handleResize(): void;
+    animatePanel(panelName: any, panelIndex: any): void;
+    handleTabKeydown(event: any): void;
+    handleTouchStart(event: any): void;
+    handleTouchMove(event: any): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-tabs': KemetTabs;
+    }
+}