@digital-realty/ix-tabs 0.0.4 → 0.0.6

package/README.md

@@ -31,6 +31,21 @@ or
   <ix-secondary-tab>Tab 2</ix-secondary-tab>
   <ix-secondary-tab>Tab 3</ix-secondary-tab>
 </ix-tabs>
+
+or 
+
+scrollButton property can be set on ix-tabs to enable
+left and right scroll buttons for overflowing tab sets
+
+active property can be set on individual tabs to set initial active state
+
+<ix-tabs scrollButtons>
+  <ix-primary-tab>Tab 1</ix-primary-tab>
+  <ix-primary-tab active>Tab 2</ix-primary-tab>
+  <ix-primary-tab>Tab 3</ix-primary-tab>
+  <ix-primary-tab>Tab 4</ix-primary-tab>
+</ix-tabs>
+
 ```
 
 ### In React

package/dist/IxPrimaryTab.js

@@ -8,7 +8,9 @@ export class IxPrimaryTab extends LitElement {
         this.active = false;
     }
     render() {
-        return html `<md-primary-tab ?active=${this.active}><slot></slot></md-primary-tab> `;
+        return html `<md-primary-tab ?active=${this.active}
+      ><slot></slot
+    ></md-primary-tab> `;
     }
 }
 IxPrimaryTab.styles = css `

package/dist/IxPrimaryTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"IxPrimaryTab.js","sourceRoot":"","sources":["../src/IxPrimaryTab.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,yBAAyB,CAAC;AAEjC,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;QAa8C,WAAM,GAAG,KAAK,CAAC;IAK7D,CAAC;IAHC,MAAM;QACJ,OAAO,IAAI,CAAA,2BAA2B,IAAI,CAAC,MAAM,kCAAkC,CAAC;IACtF,CAAC;;AAhBM,mBAAM,GAAG,GAAG,CAAA;;;;;;;;;;GAUlB,CAAC;AAE0C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAgB","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport './mdtabs/primary-tab.js';\n\nexport class IxPrimaryTab extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n    }\n    ::slotted(*) {\n      flex: 1 1 0%;\n    }\n    md-primary-tab {\n      flex: 1 1 0%;\n    }\n  `;\n\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  render() {\n    return html`<md-primary-tab ?active=${this.active}><slot></slot></md-primary-tab> `;\n  }\n}\n"]}
+{"version":3,"file":"IxPrimaryTab.js","sourceRoot":"","sources":["../src/IxPrimaryTab.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,yBAAyB,CAAC;AAEjC,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;QAa8C,WAAM,GAAG,KAAK,CAAC;IAO7D,CAAC;IALC,MAAM;QACJ,OAAO,IAAI,CAAA,2BAA2B,IAAI,CAAC,MAAM;;wBAE7B,CAAC;IACvB,CAAC;;AAlBM,mBAAM,GAAG,GAAG,CAAA;;;;;;;;;;GAUlB,CAAC;AAE0C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAgB","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport './mdtabs/primary-tab.js';\n\nexport class IxPrimaryTab extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n    }\n    ::slotted(*) {\n      flex: 1 1 0%;\n    }\n    md-primary-tab {\n      flex: 1 1 0%;\n    }\n  `;\n\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  render() {\n    return html`<md-primary-tab ?active=${this.active}\n      ><slot></slot\n    ></md-primary-tab> `;\n  }\n}\n"]}

package/dist/IxSecondaryTab.js

@@ -8,7 +8,9 @@ export class IxSecondaryTab extends LitElement {
         this.active = false;
     }
     render() {
-        return html `<md-secondary-tab ?active=${this.active}><slot></slot></md-secondary-tab>`;
+        return html `<md-secondary-tab ?active=${this.active}
+      ><slot></slot
+    ></md-secondary-tab>`;
     }
 }
 IxSecondaryTab.styles = css `

package/dist/IxSecondaryTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"IxSecondaryTab.js","sourceRoot":"","sources":["../src/IxSecondaryTab.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,2BAA2B,CAAC;AAEnC,MAAM,OAAO,cAAe,SAAQ,UAAU;IAA9C;;QAa8C,WAAM,GAAG,KAAK,CAAC;IAK7D,CAAC;IAHC,MAAM;QACJ,OAAO,IAAI,CAAA,6BAA6B,IAAI,CAAC,MAAM,mCAAmC,CAAC;IACzF,CAAC;;AAhBM,qBAAM,GAAG,GAAG,CAAA;;;;;;;;;;GAUlB,CAAC;AAE0C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAgB","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport './mdtabs/secondary-tab.js';\n\nexport class IxSecondaryTab extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n    }\n    ::slotted(*) {\n      flex: 1 1 0%;\n    }\n    md-secondary-tab {\n      flex: 1 1 0%;\n    }\n  `;\n\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  render() {\n    return html`<md-secondary-tab ?active=${this.active}><slot></slot></md-secondary-tab>`;\n  }\n}\n"]}
+{"version":3,"file":"IxSecondaryTab.js","sourceRoot":"","sources":["../src/IxSecondaryTab.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,2BAA2B,CAAC;AAEnC,MAAM,OAAO,cAAe,SAAQ,UAAU;IAA9C;;QAa8C,WAAM,GAAG,KAAK,CAAC;IAO7D,CAAC;IALC,MAAM;QACJ,OAAO,IAAI,CAAA,6BAA6B,IAAI,CAAC,MAAM;;yBAE9B,CAAC;IACxB,CAAC;;AAlBM,qBAAM,GAAG,GAAG,CAAA;;;;;;;;;;GAUlB,CAAC;AAE0C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAgB","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport './mdtabs/secondary-tab.js';\n\nexport class IxSecondaryTab extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n    }\n    ::slotted(*) {\n      flex: 1 1 0%;\n    }\n    md-secondary-tab {\n      flex: 1 1 0%;\n    }\n  `;\n\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  render() {\n    return html`<md-secondary-tab ?active=${this.active}\n      ><slot></slot\n    ></md-secondary-tab>`;\n  }\n}\n"]}

package/dist/IxTabs.d.ts

@@ -1,9 +1,23 @@
 import { LitElement } from 'lit';
 import './mdtabs/tabs.js';
 import type { MdTabs } from './mdtabs/tabs.js';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
 export declare class IxTabs extends LitElement {
+    static styles: import("lit").CSSResult;
     mdTabs: MdTabs;
+    activeTab: Element;
+    scrollButtons: boolean;
+    hideScrollBar: boolean;
+    private enableLeftScroll;
+    private enableRightScroll;
+    private tabContainer;
     get activeTabIndex(): number;
     set activeTabIndex(index: number);
+    private calculateScrollButtonsEnabled;
+    private debounceEvent;
+    private updateScrollButtonState;
+    slotChange(): Promise<void>;
+    disconnectedCallback(): void;
+    private scrollTabs;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/IxTabs.js

@@ -1,23 +1,127 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { query } from 'lit/decorators.js';
+import { html, css, nothing, LitElement } from 'lit';
+import { property, query } from 'lit/decorators.js';
 import './mdtabs/tabs.js';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
 export class IxTabs extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.scrollButtons = false;
+        this.hideScrollBar = false;
+        this.enableLeftScroll = true;
+        this.enableRightScroll = true;
+        this.tabContainer = null;
+        this.updateScrollButtonState = () => {
+            clearTimeout(this.debounceEvent);
+            this.debounceEvent = setTimeout(this.calculateScrollButtonsEnabled.bind(this), 100);
+        };
+    }
     get activeTabIndex() {
         return this.mdTabs.activeTabIndex;
     }
     set activeTabIndex(index) {
         this.mdTabs.activeTabIndex = index;
     }
+    calculateScrollButtonsEnabled() {
+        if (this.tabContainer) {
+            const { clientWidth, scrollWidth, scrollLeft } = this.tabContainer;
+            this.enableLeftScroll = scrollLeft !== 0;
+            this.enableRightScroll = scrollLeft !== scrollWidth - clientWidth;
+        }
+    }
+    async slotChange() {
+        var _a, _b;
+        await 0;
+        (_a = this.querySelector('ix-primary-tab[active]')) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
+        if (this.scrollButtons) {
+            this.tabContainer = (_b = this.mdTabs.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.tabs');
+            if (this.tabContainer) {
+                if (this.hideScrollBar) {
+                    this.tabContainer.style.paddingBottom = '2rem';
+                    this.mdTabs.style.marginBottom = '-2rem';
+                }
+                this.calculateScrollButtonsEnabled();
+                window.addEventListener('resize', this.updateScrollButtonState);
+                this.tabContainer.addEventListener('scroll', this.updateScrollButtonState);
+            }
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        if (this.scrollButtons) {
+            window.removeEventListener('resize', this.updateScrollButtonState);
+            (_a = this.tabContainer) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', this.updateScrollButtonState);
+        }
+    }
+    scrollTabs(direction = 'left', scrollAmount = 0.75) {
+        if (this.tabContainer) {
+            const { clientWidth, scrollLeft } = this.tabContainer;
+            const offset = direction === 'left'
+                ? clientWidth * -scrollAmount
+                : clientWidth * scrollAmount;
+            const scrollToPosition = scrollLeft + offset;
+            this.tabContainer.scrollTo({
+                top: 0,
+                left: scrollToPosition,
+                behavior: 'smooth',
+            });
+        }
+    }
     render() {
         return html `
+      ${this.scrollButtons
+            ? html `<ix-icon-button
+            appearance="filled"
+            icon="arrow_left"
+            @click=${() => this.scrollTabs('left')}
+            ?disabled=${!this.enableLeftScroll}
+          ></ix-icon-button>`
+            : nothing}
       <md-tabs>
-        <slot></slot>
+        <slot @slotchange=${this.slotChange}></slot>
       </md-tabs>
+      ${this.scrollButtons
+            ? html `<ix-icon-button
+            appearance="filled"
+            icon="arrow_right"
+            @click=${() => this.scrollTabs('right')}
+            ?disabled=${!this.enableRightScroll}
+          ></ix-icon-button>`
+            : nothing}
     `;
     }
 }
+IxTabs.styles = css `
+    :host {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+    }
+    md-tabs {
+      flex-grow: 1;
+    }
+    .scroll {
+      cursor: pointer;
+    }
+  `;
 __decorate([
-    query('md-tabs')
+    query('md-Tabs')
 ], IxTabs.prototype, "mdTabs", void 0);
+__decorate([
+    query('ix-primary-tab[active]')
+], IxTabs.prototype, "activeTab", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxTabs.prototype, "scrollButtons", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxTabs.prototype, "hideScrollBar", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxTabs.prototype, "enableLeftScroll", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxTabs.prototype, "enableRightScroll", void 0);
 //# sourceMappingURL=IxTabs.js.map

package/dist/IxTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"IxTabs.js","sourceRoot":"","sources":["../src/IxTabs.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,kBAAkB,CAAC;AAG1B,MAAM,OAAO,MAAO,SAAQ,UAAU;IAGpC,IAAI,cAAc;QAChB,OAAO,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC;IACpC,CAAC;IAED,IAAI,cAAc,CAAC,KAAa;QAC9B,IAAI,CAAC,MAAM,CAAC,cAAc,GAAG,KAAK,CAAC;IACrC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;CACF;AAjBmB;IAAjB,KAAK,CAAC,SAAS,CAAC;sCAAiB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { query } from 'lit/decorators.js';\nimport './mdtabs/tabs.js';\nimport type { MdTabs } from './mdtabs/tabs.js';\n\nexport class IxTabs extends LitElement {\n  @query('md-tabs') mdTabs!: MdTabs;\n\n  get activeTabIndex() {\n    return this.mdTabs.activeTabIndex;\n  }\n\n  set activeTabIndex(index: number) {\n    this.mdTabs.activeTabIndex = index;\n  }\n\n  render() {\n    return html`\n      <md-tabs>\n        <slot></slot>\n      </md-tabs>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"IxTabs.js","sourceRoot":"","sources":["../src/IxTabs.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, nothing, LitElement } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport './mdtabs/tabs.js';\nimport type { MdTabs } from './mdtabs/tabs.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\n\ntype ScrollDirection = 'left' | 'right';\n\nexport class IxTabs extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      overflow: hidden;\n    }\n    md-tabs {\n      flex-grow: 1;\n    }\n    .scroll {\n      cursor: pointer;\n    }\n  `;\n\n  @query('md-Tabs') mdTabs!: MdTabs;\n\n  @query('ix-primary-tab[active]') activeTab!: Element;\n\n  @property({ type: Boolean }) scrollButtons = false;\n\n  @property({ type: Boolean }) hideScrollBar = false;\n\n  @property({ type: Boolean }) private enableLeftScroll = true;\n\n  @property({ type: Boolean }) private enableRightScroll = true;\n\n  private tabContainer: HTMLElement | null | undefined = null;\n\n  get activeTabIndex() {\n    return this.mdTabs.activeTabIndex;\n  }\n\n  set activeTabIndex(index: number) {\n    this.mdTabs.activeTabIndex = index;\n  }\n\n  private calculateScrollButtonsEnabled() {\n    if (this.tabContainer) {\n      const { clientWidth, scrollWidth, scrollLeft } = this.tabContainer;\n      this.enableLeftScroll = scrollLeft !== 0;\n      this.enableRightScroll = scrollLeft !== scrollWidth - clientWidth;\n    }\n  }\n\n  private debounceEvent: ReturnType<typeof setTimeout> | undefined;\n\n  private updateScrollButtonState = () => {\n    clearTimeout(this.debounceEvent);\n    this.debounceEvent = setTimeout(\n      this.calculateScrollButtonsEnabled.bind(this),\n      100\n    );\n  };\n\n  async slotChange() {\n    await 0;\n\n    this.querySelector('ix-primary-tab[active]')?.scrollIntoView();\n\n    if (this.scrollButtons) {\n      this.tabContainer = this.mdTabs.shadowRoot?.querySelector('.tabs');\n      if (this.tabContainer) {\n        if (this.hideScrollBar) {\n          this.tabContainer.style.paddingBottom = '2rem';\n          this.mdTabs.style.marginBottom = '-2rem';\n        }\n        this.calculateScrollButtonsEnabled();\n        window.addEventListener('resize', this.updateScrollButtonState);\n        this.tabContainer.addEventListener(\n          'scroll',\n          this.updateScrollButtonState\n        );\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this.scrollButtons) {\n      window.removeEventListener('resize', this.updateScrollButtonState);\n      this.tabContainer?.removeEventListener(\n        'scroll',\n        this.updateScrollButtonState\n      );\n    }\n  }\n\n  private scrollTabs(direction: ScrollDirection = 'left', scrollAmount = 0.75) {\n    if (this.tabContainer) {\n      const { clientWidth, scrollLeft } = this.tabContainer;\n      const offset =\n        direction === 'left'\n          ? clientWidth * -scrollAmount\n          : clientWidth * scrollAmount;\n      const scrollToPosition = scrollLeft + offset;\n      this.tabContainer.scrollTo({\n        top: 0,\n        left: scrollToPosition,\n        behavior: 'smooth',\n      });\n    }\n  }\n\n  render() {\n    return html`\n      ${this.scrollButtons\n        ? html`<ix-icon-button\n            appearance=\"filled\"\n            icon=\"arrow_left\"\n            @click=${() => this.scrollTabs('left')}\n            ?disabled=${!this.enableLeftScroll}\n          ></ix-icon-button>`\n        : nothing}\n      <md-tabs>\n        <slot @slotchange=${this.slotChange}></slot>\n      </md-tabs>\n      ${this.scrollButtons\n        ? html`<ix-icon-button\n            appearance=\"filled\"\n            icon=\"arrow_right\"\n            @click=${() => this.scrollTabs('right')}\n            ?disabled=${!this.enableRightScroll}\n          ></ix-icon-button>`\n        : nothing}\n    `;\n  }\n}\n"]}

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent ix-tabs following open-wc recommendations",
   "license": "MIT",
   "author": "Digital Realty",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -30,6 +30,7 @@
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
   "dependencies": {
+    "@digital-realty/ix-icon-button": "^1.0.11",
     "@lit-labs/react": "^2.0.3",
     "@material/web": "^1.0.0",
     "lit": "^2.0.2",
@@ -99,5 +100,5 @@
     "README.md",
     "LICENSE"
   ],
-  "gitHead": "3f03e0e887e1a3fdbeeba66e270abbb74ae7a95b"
+  "gitHead": "ffa2859da968f850be397ea99249bd8ace1cefcc"
 }