kemet-ui 3.0.1 → 4.0.0

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

@@ -1,38 +0,0 @@
-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.
- * @cssproperty --kemet-tab-color - The color of the selected tab.
- *
- * @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[];
-    index: number;
-    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,82 +0,0 @@
-import { __decorate } from "tslib";
-import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { emitEvent } from '../../utilities/misc/events';
-import { stylesKemetTab } from './styles';
-/**
- * @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.
- * @cssproperty --kemet-tab-color - The color of the selected tab.
- *
- * @event kemet-tab-selected - Fires when a tab is selected
- * @event kemet-tab-close - Fires when the tab should close
- *
- */
-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>`;
-        }
-        return null;
-    }
-    handleClosable() {
-        emitEvent(this, 'kemet-tab-close', this);
-    }
-};
-KemetTab.styles = [stylesKemetTab];
-__decorate([
-    property({ type: Number })
-], KemetTab.prototype, "index", void 0);
-__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

@@ -1 +0,0 @@
-{"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,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C;;;;;;;;;;;;;;;;;GAiBG;AAGH,IAAqB,QAAQ,GAA7B,MAAqB,QAAS,SAAQ,UAAU;IAAhD;;QAOE,aAAQ,GAAY,KAAK,CAAC;IAkD5B,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;AAxDQ,eAAM,GAAG,CAAC,cAAc,CAAC,CAAC;AAGjC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACb;AAGd;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;AAbC,QAAQ;IAD5B,aAAa,CAAC,WAAW,CAAC;GACN,QAAQ,CAyD5B;eAzDoB,QAAQ","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesKemetTab } from './styles';\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.\n * @cssproperty --kemet-tab-color - The color of the selected tab.\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: Number })\n  index: number;\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  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"]}

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

@@ -1,100 +0,0 @@
-import { LitElement } from 'lit';
-import { TypePanelEffect, TypePlacement, TypeTabsAlign } from './types';
-import type KemetTab from './kemet-tab';
-import type KemetTabPanel from './kemet-tab-panel';
-/**
- * @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 to enable swipe behavior
- * @prop {string} placement - Places the tabs to the top, right, bottom, or left
- * @prop {boolean} divider - Determines whether 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 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.
- * @cssproperty --kemet-tabs-ink-radius - The radius on the ink.
- * @cssproperty --kemet-tabs-ink-color - The color of the ink.
- * @cssproperty --kemet-tabs-divider-size - The thickness of the divider.
- * @cssproperty --kemet-tabs-divider-color - The color of the divider.
- * @cssproperty --kemet-tabs-transition-speed - The transition speed of the panels.
- * @cssproperty --kemet-tabs-spacer - The space between tabs and panels.
- *
- * @event kemet-tab-changed - Fires when a tab is changed
- *
- */
-interface Iink {
-    width: string;
-    height: string;
-    positionX: string;
-    positionY: string;
-}
-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: Iink;
-    hideInk: boolean;
-    overflow: boolean;
-    tabs: KemetTab[];
-    panels: KemetTabPanel[];
-    xDown: number | null;
-    yDown: number | null;
-    links: HTMLElement;
-    panelsElement: HTMLElement;
-    constructor();
-    firstUpdated(): void;
-    render(): import("lit-html").TemplateResult<1>;
-    updated(prevProps: Map<string, never>): void;
-    handleLinksSlotChange(): void;
-    handlePanelsSlotChange(): void;
-    handleLeftArrow(): void;
-    handleRightArrow(): void;
-    handleTabClose(event: CustomEvent): void;
-    makeInk(location: string): 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: CustomEvent): void;
-    determineFade(): void;
-    determineStacked(): void;
-    determineOverflow(): void;
-    handleResize(): void;
-    animatePanel(panelName: string, panelIndex: number): void;
-    handleTabKeydown(event: KeyboardEvent): void;
-    handleTouchStart(event: TouchEvent): void;
-    handleTouchMove(event: TouchEvent): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-tabs': KemetTabs;
-    }
-}
-export {};