@digital-realty/ix-tabs 1.0.25 → 1.0.28-alpha.0

package/dist/IxPrimaryTab.d.ts

@@ -1,8 +1,8 @@
-import { LitElement } from 'lit';
-import './mdtabs/primary-tab.js';
-export declare class IxPrimaryTab extends LitElement {
-    static styles: import("lit").CSSResult;
-    active: boolean;
-    inlineIcon: boolean;
-    render(): import("lit").TemplateResult<1>;
-}
+import { LitElement } from 'lit';
+import './mdtabs/primary-tab.js';
+export declare class IxPrimaryTab extends LitElement {
+    static styles: import("lit").CSSResult;
+    active: boolean;
+    inlineIcon: boolean;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/IxPrimaryTab.js

@@ -1,23 +1,23 @@
-import { __decorate } from "tslib";
-import { html, css, LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
-import './mdtabs/primary-tab.js';
-export class IxPrimaryTab extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.active = false;
-        this.inlineIcon = false;
-    }
-    render() {
+import { __decorate } from "tslib";
+import { html, css, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import './mdtabs/primary-tab.js';
+export class IxPrimaryTab extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.active = false;
+        this.inlineIcon = false;
+    }
+    render() {
         return html `<md-primary-tab
       ?active=${this.active}
       ?inline-icon=${this.inlineIcon}
     >
       <slot slot="icon" name="icon"></slot>
       <slot></slot
-    ></md-primary-tab> `;
-    }
-}
+    ></md-primary-tab> `;
+    }
+}
 IxPrimaryTab.styles = css `
     :host {
       display: flex;
@@ -35,11 +35,11 @@ IxPrimaryTab.styles = css `
     md-primary-tab {
       flex: 1 1 0%;
     }
-  `;
-__decorate([
-    property({ type: Boolean, reflect: true })
-], IxPrimaryTab.prototype, "active", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'inline-icon' })
-], IxPrimaryTab.prototype, "inlineIcon", void 0);
+  `;
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IxPrimaryTab.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'inline-icon' })
+], IxPrimaryTab.prototype, "inlineIcon", void 0);
 //# sourceMappingURL=IxPrimaryTab.js.map

package/dist/IxSecondaryTab.d.ts

@@ -1,7 +1,7 @@
-import { LitElement } from 'lit';
-import './mdtabs/secondary-tab.js';
-export declare class IxSecondaryTab extends LitElement {
-    static styles: import("lit").CSSResult;
-    active: boolean;
-    render(): import("lit").TemplateResult<1>;
-}
+import { LitElement } from 'lit';
+import './mdtabs/secondary-tab.js';
+export declare class IxSecondaryTab extends LitElement {
+    static styles: import("lit").CSSResult;
+    active: boolean;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/IxSecondaryTab.js

@@ -1,19 +1,19 @@
-import { __decorate } from "tslib";
-import { html, css, LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
-import './mdtabs/secondary-tab.js';
-export class IxSecondaryTab extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.active = false;
-    }
-    render() {
+import { __decorate } from "tslib";
+import { html, css, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import './mdtabs/secondary-tab.js';
+export class IxSecondaryTab extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.active = false;
+    }
+    render() {
         return html `<md-secondary-tab ?active=${this.active}>
       <slot slot="icon" name="icon"></slot>
       <slot></slot
-    ></md-secondary-tab>`;
-    }
-}
+    ></md-secondary-tab>`;
+    }
+}
 IxSecondaryTab.styles = css `
     :host {
       display: flex;
@@ -31,8 +31,8 @@ IxSecondaryTab.styles = css `
     md-secondary-tab {
       flex: 1 1 0%;
     }
-  `;
-__decorate([
-    property({ type: Boolean, reflect: true })
-], IxSecondaryTab.prototype, "active", void 0);
+  `;
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IxSecondaryTab.prototype, "active", void 0);
 //# sourceMappingURL=IxSecondaryTab.js.map

package/dist/IxTabs.d.ts

@@ -1,25 +1,25 @@
-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;
-    inline: boolean;
-    alignLeft: 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>;
-}
+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;
+    inline: boolean;
+    alignLeft: 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,110 +1,110 @@
-import { __decorate } from "tslib";
-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.inline = false;
-        this.alignLeft = 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() {
-        var _a;
-        if (this.tabContainer) {
-            const { clientWidth, scrollWidth, scrollLeft } = this.tabContainer;
-            this.enableLeftScroll = scrollLeft !== 0;
-            this.enableRightScroll = scrollLeft !== scrollWidth - clientWidth;
-            if (this.alignLeft) {
-                const parent = (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.clientWidth;
-                if (parent && scrollWidth > parent) {
-                    this.inline = false;
-                }
-                else {
-                    this.inline = true;
-                }
-            }
-        }
-    }
-    async slotChange() {
-        var _a, _b;
-        await 0;
-        (_a = this.querySelector('ix-primary-tab[active]')) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
-        this.tabContainer = (_b = this.mdTabs.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.tabs');
-        if (this.tabContainer) {
-            if (this.scrollButtons) {
-                if (this.hideScrollBar) {
-                    this.tabContainer.classList.add('no-scrollbar');
-                }
-                this.calculateScrollButtonsEnabled();
-                window.addEventListener('resize', this.updateScrollButtonState);
-                this.tabContainer.addEventListener('scroll', this.updateScrollButtonState);
-            }
-            const { clientWidth, scrollWidth } = this.tabContainer;
-            if (this.alignLeft && scrollWidth <= clientWidth) {
-                this.inline = true;
-            }
-        }
-    }
-    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() {
+import { __decorate } from "tslib";
+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.inline = false;
+        this.alignLeft = 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() {
+        var _a;
+        if (this.tabContainer) {
+            const { clientWidth, scrollWidth, scrollLeft } = this.tabContainer;
+            this.enableLeftScroll = scrollLeft !== 0;
+            this.enableRightScroll = scrollLeft !== scrollWidth - clientWidth;
+            if (this.alignLeft) {
+                const parent = (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.clientWidth;
+                if (parent && scrollWidth > parent) {
+                    this.inline = false;
+                }
+                else {
+                    this.inline = true;
+                }
+            }
+        }
+    }
+    async slotChange() {
+        var _a, _b;
+        await 0;
+        (_a = this.querySelector('ix-primary-tab[active]')) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
+        this.tabContainer = (_b = this.mdTabs.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.tabs');
+        if (this.tabContainer) {
+            if (this.scrollButtons) {
+                if (this.hideScrollBar) {
+                    this.tabContainer.classList.add('no-scrollbar');
+                }
+                this.calculateScrollButtonsEnabled();
+                window.addEventListener('resize', this.updateScrollButtonState);
+                this.tabContainer.addEventListener('scroll', this.updateScrollButtonState);
+            }
+            const { clientWidth, scrollWidth } = this.tabContainer;
+            if (this.alignLeft && scrollWidth <= clientWidth) {
+                this.inline = true;
+            }
+        }
+    }
+    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
+      ${this.scrollButtons
             ? html `<ix-icon-button
             icon="chevron_left"
             @click=${() => this.scrollTabs('left')}
             ?disabled=${!this.enableLeftScroll}
-          ></ix-icon-button>`
+          ></ix-icon-button>`
             : nothing}
       <md-tabs>
         <slot @slotchange=${this.slotChange}></slot>
       </md-tabs>
-      ${this.scrollButtons
+      ${this.scrollButtons
             ? html `<ix-icon-button
             icon="chevron_right"
             @click=${() => this.scrollTabs('right')}
             ?disabled=${!this.enableRightScroll}
-          ></ix-icon-button>`
+          ></ix-icon-button>`
             : nothing}
-    `;
-    }
-}
+    `;
+    }
+}
 IxTabs.styles = css `
     :host {
       display: flex;
@@ -133,29 +133,29 @@ IxTabs.styles = css `
     .scroll {
       cursor: pointer;
     }
-  `;
-__decorate([
-    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, reflect: true })
-], IxTabs.prototype, "inline", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'left-align' })
-], IxTabs.prototype, "alignLeft", void 0);
-__decorate([
-    property({ type: Boolean })
-], IxTabs.prototype, "enableLeftScroll", void 0);
-__decorate([
-    property({ type: Boolean })
-], IxTabs.prototype, "enableRightScroll", void 0);
+  `;
+__decorate([
+    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, reflect: true })
+], IxTabs.prototype, "inline", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'left-align' })
+], IxTabs.prototype, "alignLeft", 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/index.d.ts

@@ -1,2 +1,2 @@
-export { IxTabs } from './IxTabs.js';
-export { IxPrimaryTab } from './IxPrimaryTab.js';
+export { IxTabs } from './IxTabs.js';
+export { IxPrimaryTab } from './IxPrimaryTab.js';

package/dist/index.js

@@ -1,3 +1,3 @@
-export { IxTabs } from './IxTabs.js';
-export { IxPrimaryTab } from './IxPrimaryTab.js';
+export { IxTabs } from './IxTabs.js';
+export { IxPrimaryTab } from './IxPrimaryTab.js';
 //# sourceMappingURL=index.js.map

package/dist/ix-primary-tab.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/dist/ix-primary-tab.js

@@ -1,3 +1,3 @@
-import { IxPrimaryTab } from './IxPrimaryTab.js';
-window.customElements.define('ix-primary-tab', IxPrimaryTab);
+import { IxPrimaryTab } from './IxPrimaryTab.js';
+window.customElements.define('ix-primary-tab', IxPrimaryTab);
 //# sourceMappingURL=ix-primary-tab.js.map

package/dist/ix-secondary-tab.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/dist/ix-secondary-tab.js

@@ -1,3 +1,3 @@
-import { IxSecondaryTab } from './IxSecondaryTab.js';
-window.customElements.define('ix-secondary-tab', IxSecondaryTab);
+import { IxSecondaryTab } from './IxSecondaryTab.js';
+window.customElements.define('ix-secondary-tab', IxSecondaryTab);
 //# sourceMappingURL=ix-secondary-tab.js.map

package/dist/ix-tabs.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/dist/ix-tabs.js

@@ -1,3 +1,3 @@
-import { IxTabs } from './IxTabs.js';
-window.customElements.define('ix-tabs', IxTabs);
+import { IxTabs } from './IxTabs.js';
+window.customElements.define('ix-tabs', IxTabs);
 //# sourceMappingURL=ix-tabs.js.map

package/dist/ix-tabs.min.js

@@ -1,3 +1,3 @@
-import{__decorate}from"tslib";import{LitElement,isServer,html,nothing,css}from"lit";import{property,query,state,queryAssignedNodes,queryAssignedElements,customElement}from"lit/decorators.js";import{styles}from"@material/web/tabs/internal/tabs-styles.css.js";import"@material/web/divider/divider.js";import"@material/web/elevation/elevation.js";import"@material/web/focus/md-focus-ring.js";import"@material/web/ripple/ripple.js";import{classMap}from"lit/directives/class-map.js";import{EASING}from"@material/web/internal/motion/animation.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";var _a;const INDICATOR=Symbol("indicator"),ANIMATE_INDICATOR=Symbol("animateIndicator");function shouldReduceMotion(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}class Tab extends LitElement{get selected(){return this.active}set selected(t){this.active=t}constructor(){super(),this.isTab=!0,this.active=!1,this.hasIcon=!1,this.iconOnly=!1,this.fullWidthIndicator=!0,this.internals=this.attachInternals(),isServer||(this.internals.role="tab",this.addEventListener("keydown",this.handleKeydown.bind(this)))}render(){var t=html`<div class="indicator"></div>`;return html`<div class="button" role="presentation" @click="${this.handleContentClick}"><md-focus-ring part="focus-ring" inward .control="${this}"></md-focus-ring><md-elevation></md-elevation><md-ripple .control="${this}"></md-ripple><div class="content ${classMap(this.getContentClasses())}" role="presentation"><slot name="icon" @slotchange="${this.handleIconSlotChange}"></slot><slot @slotchange="${this.handleSlotChange}"></slot>${this.fullWidthIndicator?nothing:t}</div>${this.fullWidthIndicator?t:nothing}</div>`}getContentClasses(){return{"has-icon":this.hasIcon,"has-label":!this.iconOnly}}updated(){this.internals.ariaSelected=String(this.active)}async handleKeydown(t){await 0,t.defaultPrevented||"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.click())}handleContentClick(t){t.stopPropagation(),this.click()}[(_a=INDICATOR,ANIMATE_INDICATOR)](t){this[INDICATOR]&&(this[INDICATOR].getAnimations().forEach(t=>{t.cancel()}),t=null==(t=null==t?void 0:t.shadowRoot)?void 0:t.querySelector("*"),null!==(t=this.getKeyframes(t)))&&this[INDICATOR].animate(t,{duration:250,easing:EASING.EMPHASIZED})}getKeyframes(t){var e,i,a,o,s=shouldReduceMotion();return this.active?(e={},i=(t=null!=(t=null==(t=t[INDICATOR])?void 0:t.getBoundingClientRect())?t:{}).left,t=t.width,o=(a=this[INDICATOR].getBoundingClientRect()).left,t=t/a.width,!s&&void 0!==i&&void 0!==o&&Number(t)?e.transform=`translateX(${(i-o).toFixed(4)}px) scaleX(${t.toFixed(4)})`:e.opacity=0,[e,{transform:"none"}]):s?[{opacity:1},{transform:"none"}]:null}handleSlotChange(){this.iconOnly=!1;for(const e of this.assignedDefaultNodes){var t=e.nodeType===Node.TEXT_NODE&&!!e.wholeText.match(/\S/);if(e.nodeType===Node.ELEMENT_NODE||t)return}this.iconOnly=!0}handleIconSlotChange(){this.hasIcon=0<this.assignedIcons.length}}function isTab(t){return t instanceof HTMLElement&&("IX-PRIMARY-TAB"===t.tagName||"IX-SECONDARY-TAB"===t.tagName)}__decorate([property({type:Boolean,reflect:!0,attribute:"md-tab"})],Tab.prototype,"isTab",void 0),__decorate([property({type:Boolean,reflect:!0})],Tab.prototype,"active",void 0),__decorate([property({type:Boolean})],Tab.prototype,"selected",null),__decorate([property({type:Boolean,attribute:"has-icon"})],Tab.prototype,"hasIcon",void 0),__decorate([property({type:Boolean,attribute:"icon-only"})],Tab.prototype,"iconOnly",void 0),__decorate([query(".indicator")],Tab.prototype,_a,void 0),__decorate([state()],Tab.prototype,"fullWidthIndicator",void 0),__decorate([queryAssignedNodes({flatten:!0})],Tab.prototype,"assignedDefaultNodes",void 0),__decorate([queryAssignedElements({slot:"icon",flatten:!0})],Tab.prototype,"assignedIcons",void 0);class Tabs extends LitElement{get activeTab(){var t;return null!=(t=this.tabs.find(t=>t.active))?t:null}set activeTab(t){t&&this.activateTab(t)}get activeTabIndex(){return this.tabs.findIndex(t=>t.active)}set activeTabIndex(e){var t=()=>{var t=this.tabs[e];t&&this.activateTab(t)};this.slotElement?t():this.updateComplete.then(t)}get focusedTab(){return this.tabs.find(t=>t.matches(":focus-within"))}constructor(){super(),this.autoActivate=!1,this.internals=this.attachInternals(),isServer||(this.internals.role="tablist",this.addEventListener("keydown",this.handleKeydown.bind(this)),this.addEventListener("keyup",this.handleKeyup.bind(this)),this.addEventListener("focusout",this.handleFocusout.bind(this)))}async scrollToTab(t){await this.updateComplete;var e=this["tabs"];if((t=null!=t?t:this.activeTab)&&e.includes(t)){for(const o of this.tabs)await o.updateComplete;var e=t.offsetLeft,t=t.offsetWidth,i=this.scrollLeft,a=this.offsetWidth,e=Math.min(e-48,Math.max(e+t-a+48,i)),t=this.focusedTab?"instant":"smooth";this.scrollTo({behavior:t,top:0,left:e})}}render(){return html`<div class="tabs"><slot @slotchange="${this.handleSlotChange}" @click="${this.handleTabClick}" @keydown="${this.handleTabClick}"></slot></div><md-divider part="divider"></md-divider>`}async handleTabClick(t){var e=t.target;await 0,t.defaultPrevented||!isTab(e)||e.active||this.activateTab(e)}activateTab(t){var e=this["tabs"],i=this.activeTab;if(e.includes(t)&&i!==t){for(const o of e){o.active=o===t;var a=null==(a=o.shadowRoot)?void 0:a.querySelector("*");a&&(a.active=o.active)}if(i){if(!this.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0,composed:!0}))){for(const s of e)s.active=s===i;return}(null==(e=t.shadowRoot)?void 0:e.querySelector("*"))[ANIMATE_INDICATOR](i)}this.updateFocusableTab(t),this.scrollToTab(t)}}updateFocusableTab(t){for(const e of this.tabs)e.tabIndex=e===t?0:-1}async handleKeydown(e){await 0;var i="ArrowLeft"===e.key,a="ArrowRight"===e.key,o="Home"===e.key,s="End"===e.key;if(!e.defaultPrevented&&(i||a||o||s)){var n=this["tabs"];if(!(n.length<2)){e.preventDefault();let t;o||s?t=o?0:n.length-1:(e="rtl"===getComputedStyle(this).direction?i:a,s=this["focusedTab"],s?(o=this.tabs.indexOf(s),(t=e?o+1:o-1)>=n.length?t=0:t<0&&(t=n.length-1)):t=e?0:n.length-1);i=n[t];i.focus(),this.autoActivate?this.activateTab(i):this.updateFocusableTab(i)}}}handleKeyup(){var t;this.scrollToTab(null!=(t=this.focusedTab)?t:this.activeTab)}handleFocusout(){var t;this.matches(":focus-within")||(t=this["activeTab"],t&&this.updateFocusableTab(t))}handleSlotChange(){var t=this.tabs[0];!this.activeTab&&t&&this.activateTab(t),this.scrollToTab(this.activeTab)}}__decorate([queryAssignedElements({flatten:!0})],Tabs.prototype,"tabs",void 0),__decorate([property({type:Boolean,attribute:"auto-activate"})],Tabs.prototype,"autoActivate",void 0),__decorate([query("slot")],Tabs.prototype,"slotElement",void 0);let MdTabs=class extends Tabs{};MdTabs.styles=[styles,css`.tabs.no-scrollbar::-webkit-scrollbar{display:none}`],MdTabs=__decorate([customElement("md-tabs")],MdTabs);class IxTabs extends LitElement{constructor(){super(...arguments),this.scrollButtons=!1,this.hideScrollBar=!1,this.inline=!1,this.alignLeft=!1,this.enableLeftScroll=!0,this.enableRightScroll=!0,this.tabContainer=null,this.updateScrollButtonState=()=>{clearTimeout(this.debounceEvent),this.debounceEvent=setTimeout(this.calculateScrollButtonsEnabled.bind(this),100)}}get activeTabIndex(){return this.mdTabs.activeTabIndex}set activeTabIndex(t){this.mdTabs.activeTabIndex=t}calculateScrollButtonsEnabled(){var t,e,i;this.tabContainer&&({clientWidth:i,scrollWidth:t,scrollLeft:e}=this.tabContainer,this.enableLeftScroll=0!==e,this.enableRightScroll=e!==t-i,this.alignLeft)&&(i=null==(e=this.parentElement)?void 0:e.clientWidth,this.inline=!(i&&i<t))}async slotChange(){var t,e;await 0,null!=(t=this.querySelector("ix-primary-tab[active]"))&&t.scrollIntoView(),this.tabContainer=null==(t=this.mdTabs.shadowRoot)?void 0:t.querySelector(".tabs"),this.tabContainer&&(this.scrollButtons&&(this.hideScrollBar&&this.tabContainer.classList.add("no-scrollbar"),this.calculateScrollButtonsEnabled(),window.addEventListener("resize",this.updateScrollButtonState),this.tabContainer.addEventListener("scroll",this.updateScrollButtonState)),{clientWidth:t,scrollWidth:e}=this.tabContainer,this.alignLeft)&&e<=t&&(this.inline=!0)}disconnectedCallback(){var t;super.disconnectedCallback(),this.scrollButtons&&(window.removeEventListener("resize",this.updateScrollButtonState),null!=(t=this.tabContainer))&&t.removeEventListener("scroll",this.updateScrollButtonState)}scrollTabs(t="left",e=.75){var i,a;this.tabContainer&&({clientWidth:i,scrollLeft:a}=this.tabContainer,this.tabContainer.scrollTo({top:0,left:a+("left"===t?i*-e:i*e),behavior:"smooth"}))}render(){return html`${this.scrollButtons?html`<ix-icon-button icon="chevron_left" @click="${()=>this.scrollTabs("left")}" ?disabled="${!this.enableLeftScroll}"></ix-icon-button>`:nothing}<md-tabs><slot @slotchange="${this.slotChange}"></slot></md-tabs>${this.scrollButtons?html`<ix-icon-button icon="chevron_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}:host(ix-tabs[inline]){display:inline-flex}:host(ix-tabs[inline]) ix-icon-button[disabled]{display:none}md-tabs{flex-grow:1;--md-primary-tab-container-color:transparent}ix-icon-button{--md-icon-button-hover-state-layer-opacity:0;--md-icon-button-pressed-state-layer-opacity:0;--md-icon-button-icon-color:var(--md-sys-text-color-secondary);--md-icon-button-pressed-state-layer-color:var(
+import{__decorate}from"tslib";import{LitElement,isServer,html,nothing,css}from"lit";import{property,query,state,queryAssignedNodes,queryAssignedElements,customElement}from"lit/decorators.js";import{styles}from"@material/web/tabs/internal/tabs-styles.css.js";import"@material/web/divider/divider.js";import"@material/web/elevation/elevation.js";import"@material/web/focus/md-focus-ring.js";import"@material/web/ripple/ripple.js";import{classMap}from"lit/directives/class-map.js";import{EASING}from"@material/web/internal/motion/animation.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";var _a;let INDICATOR=Symbol("indicator"),ANIMATE_INDICATOR=Symbol("animateIndicator");function shouldReduceMotion(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}class Tab extends LitElement{get selected(){return this.active}set selected(t){this.active=t}constructor(){super(),this.isTab=!0,this.active=!1,this.hasIcon=!1,this.iconOnly=!1,this.fullWidthIndicator=!0,this.internals=this.attachInternals(),isServer||(this.internals.role="tab",this.addEventListener("keydown",this.handleKeydown.bind(this)))}render(){var t=html`<div class="indicator"></div>`;return html`<div class="button" role="presentation" @click="${this.handleContentClick}"><md-focus-ring part="focus-ring" inward .control="${this}"></md-focus-ring><md-elevation></md-elevation><md-ripple .control="${this}"></md-ripple><div class="content ${classMap(this.getContentClasses())}" role="presentation"><slot name="icon" @slotchange="${this.handleIconSlotChange}"></slot><slot @slotchange="${this.handleSlotChange}"></slot>${this.fullWidthIndicator?nothing:t}</div>${this.fullWidthIndicator?t:nothing}</div>`}getContentClasses(){return{"has-icon":this.hasIcon,"has-label":!this.iconOnly}}updated(){this.internals.ariaSelected=String(this.active)}async handleKeydown(t){await 0,t.defaultPrevented||"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.click())}handleContentClick(t){t.stopPropagation(),this.click()}[(_a=INDICATOR,ANIMATE_INDICATOR)](t){this[INDICATOR]&&(this[INDICATOR].getAnimations().forEach(t=>{t.cancel()}),t=null==(t=null==t?void 0:t.shadowRoot)?void 0:t.querySelector("*"),null!==(t=this.getKeyframes(t)))&&this[INDICATOR].animate(t,{duration:250,easing:EASING.EMPHASIZED})}getKeyframes(t){var e,i,a,o,s=shouldReduceMotion();return this.active?(e={},i=(t=null!=(t=null==(t=t[INDICATOR])?void 0:t.getBoundingClientRect())?t:{}).left,t=t.width,o=(a=this[INDICATOR].getBoundingClientRect()).left,t=t/a.width,!s&&void 0!==i&&void 0!==o&&Number(t)?e.transform=`translateX(${(i-o).toFixed(4)}px) scaleX(${t.toFixed(4)})`:e.opacity=0,[e,{transform:"none"}]):s?[{opacity:1},{transform:"none"}]:null}handleSlotChange(){this.iconOnly=!1;for(var t of this.assignedDefaultNodes){var e=t.nodeType===Node.TEXT_NODE&&!!t.wholeText.match(/\S/);if(t.nodeType===Node.ELEMENT_NODE||e)return}this.iconOnly=!0}handleIconSlotChange(){this.hasIcon=0<this.assignedIcons.length}}function isTab(t){return t instanceof HTMLElement&&("IX-PRIMARY-TAB"===t.tagName||"IX-SECONDARY-TAB"===t.tagName)}__decorate([property({type:Boolean,reflect:!0,attribute:"md-tab"})],Tab.prototype,"isTab",void 0),__decorate([property({type:Boolean,reflect:!0})],Tab.prototype,"active",void 0),__decorate([property({type:Boolean})],Tab.prototype,"selected",null),__decorate([property({type:Boolean,attribute:"has-icon"})],Tab.prototype,"hasIcon",void 0),__decorate([property({type:Boolean,attribute:"icon-only"})],Tab.prototype,"iconOnly",void 0),__decorate([query(".indicator")],Tab.prototype,_a,void 0),__decorate([state()],Tab.prototype,"fullWidthIndicator",void 0),__decorate([queryAssignedNodes({flatten:!0})],Tab.prototype,"assignedDefaultNodes",void 0),__decorate([queryAssignedElements({slot:"icon",flatten:!0})],Tab.prototype,"assignedIcons",void 0);class Tabs extends LitElement{get activeTab(){var t;return null!=(t=this.tabs.find(t=>t.active))?t:null}set activeTab(t){t&&this.activateTab(t)}get activeTabIndex(){return this.tabs.findIndex(t=>t.active)}set activeTabIndex(e){var t=()=>{var t=this.tabs[e];t&&this.activateTab(t)};this.slotElement?t():this.updateComplete.then(t)}get focusedTab(){return this.tabs.find(t=>t.matches(":focus-within"))}constructor(){super(),this.autoActivate=!1,this.internals=this.attachInternals(),isServer||(this.internals.role="tablist",this.addEventListener("keydown",this.handleKeydown.bind(this)),this.addEventListener("keyup",this.handleKeyup.bind(this)),this.addEventListener("focusout",this.handleFocusout.bind(this)))}async scrollToTab(t){await this.updateComplete;var e=this.tabs;if((t=null!=t?t:this.activeTab)&&e.includes(t)){for(var i of this.tabs)await i.updateComplete;var e=t.offsetLeft,t=t.offsetWidth,a=this.scrollLeft,o=this.offsetWidth,e=Math.min(e-48,Math.max(e+t-o+48,a)),t=this.focusedTab?"instant":"smooth";this.scrollTo({behavior:t,top:0,left:e})}}render(){return html`<div class="tabs"><slot @slotchange="${this.handleSlotChange}" @click="${this.handleTabClick}" @keydown="${this.handleTabClick}"></slot></div><md-divider part="divider"></md-divider>`}async handleTabClick(t){var e=t.target;await 0,t.defaultPrevented||!isTab(e)||e.active||this.activateTab(e)}activateTab(t){var e=this.tabs,i=this.activeTab;if(e.includes(t)&&i!==t){for(var a of e){a.active=a===t;var o=null==(o=a.shadowRoot)?void 0:o.querySelector("*");o&&(o.active=a.active)}if(i){if(!this.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0,composed:!0}))){for(var s of e)s.active=s===i;return}(null==(e=t.shadowRoot)?void 0:e.querySelector("*"))[ANIMATE_INDICATOR](i)}this.updateFocusableTab(t),this.scrollToTab(t)}}updateFocusableTab(t){for(var e of this.tabs)e.tabIndex=e===t?0:-1}async handleKeydown(e){await 0;var i="ArrowLeft"===e.key,a="ArrowRight"===e.key,o="Home"===e.key,s="End"===e.key;if(!e.defaultPrevented&&(i||a||o||s)){var n=this.tabs;if(!(n.length<2)){e.preventDefault();let t;o||s?t=o?0:n.length-1:(e="rtl"===getComputedStyle(this).direction?i:a,s=this.focusedTab,s?(o=this.tabs.indexOf(s),(t=e?o+1:o-1)>=n.length?t=0:t<0&&(t=n.length-1)):t=e?0:n.length-1);i=n[t];i.focus(),this.autoActivate?this.activateTab(i):this.updateFocusableTab(i)}}}handleKeyup(){var t;this.scrollToTab(null!=(t=this.focusedTab)?t:this.activeTab)}handleFocusout(){var t;this.matches(":focus-within")||(t=this.activeTab,t&&this.updateFocusableTab(t))}handleSlotChange(){var t=this.tabs[0];!this.activeTab&&t&&this.activateTab(t),this.scrollToTab(this.activeTab)}}__decorate([queryAssignedElements({flatten:!0})],Tabs.prototype,"tabs",void 0),__decorate([property({type:Boolean,attribute:"auto-activate"})],Tabs.prototype,"autoActivate",void 0),__decorate([query("slot")],Tabs.prototype,"slotElement",void 0);let MdTabs=class extends Tabs{};MdTabs.styles=[styles,css`.tabs.no-scrollbar::-webkit-scrollbar{display:none}`],MdTabs=__decorate([customElement("md-tabs")],MdTabs);class IxTabs extends LitElement{constructor(){super(...arguments),this.scrollButtons=!1,this.hideScrollBar=!1,this.inline=!1,this.alignLeft=!1,this.enableLeftScroll=!0,this.enableRightScroll=!0,this.tabContainer=null,this.updateScrollButtonState=()=>{clearTimeout(this.debounceEvent),this.debounceEvent=setTimeout(this.calculateScrollButtonsEnabled.bind(this),100)}}get activeTabIndex(){return this.mdTabs.activeTabIndex}set activeTabIndex(t){this.mdTabs.activeTabIndex=t}calculateScrollButtonsEnabled(){var t,e,i;this.tabContainer&&({clientWidth:i,scrollWidth:t,scrollLeft:e}=this.tabContainer,this.enableLeftScroll=0!==e,this.enableRightScroll=e!==t-i,this.alignLeft)&&(i=null==(e=this.parentElement)?void 0:e.clientWidth,this.inline=!(i&&i<t))}async slotChange(){var t,e;await 0,null!=(t=this.querySelector("ix-primary-tab[active]"))&&t.scrollIntoView(),this.tabContainer=null==(t=this.mdTabs.shadowRoot)?void 0:t.querySelector(".tabs"),this.tabContainer&&(this.scrollButtons&&(this.hideScrollBar&&this.tabContainer.classList.add("no-scrollbar"),this.calculateScrollButtonsEnabled(),window.addEventListener("resize",this.updateScrollButtonState),this.tabContainer.addEventListener("scroll",this.updateScrollButtonState)),{clientWidth:t,scrollWidth:e}=this.tabContainer,this.alignLeft)&&e<=t&&(this.inline=!0)}disconnectedCallback(){var t;super.disconnectedCallback(),this.scrollButtons&&(window.removeEventListener("resize",this.updateScrollButtonState),null!=(t=this.tabContainer))&&t.removeEventListener("scroll",this.updateScrollButtonState)}scrollTabs(t="left",e=.75){var i,a;this.tabContainer&&({clientWidth:i,scrollLeft:a}=this.tabContainer,this.tabContainer.scrollTo({top:0,left:a+("left"===t?i*-e:i*e),behavior:"smooth"}))}render(){return html`${this.scrollButtons?html`<ix-icon-button icon="chevron_left" @click="${()=>this.scrollTabs("left")}" ?disabled="${!this.enableLeftScroll}"></ix-icon-button>`:nothing}<md-tabs><slot @slotchange="${this.slotChange}"></slot></md-tabs>${this.scrollButtons?html`<ix-icon-button icon="chevron_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}:host(ix-tabs[inline]){display:inline-flex}:host(ix-tabs[inline]) ix-icon-button[disabled]{display:none}md-tabs{flex-grow:1;--md-primary-tab-container-color:transparent}ix-icon-button{--md-icon-button-hover-state-layer-opacity:0;--md-icon-button-pressed-state-layer-opacity:0;--md-icon-button-icon-color:var(--md-sys-text-color-secondary);--md-icon-button-pressed-state-layer-color:var(
         --md-sys-text-color-secondary
       )}.scroll{cursor:pointer}`,__decorate([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,reflect:!0})],IxTabs.prototype,"inline",void 0),__decorate([property({type:Boolean,attribute:"left-align"})],IxTabs.prototype,"alignLeft",void 0),__decorate([property({type:Boolean})],IxTabs.prototype,"enableLeftScroll",void 0),__decorate([property({type:Boolean})],IxTabs.prototype,"enableRightScroll",void 0),window.customElements.define("ix-tabs",IxTabs);

package/dist/mdtabs/internal/primary-tab.d.ts

@@ -1,20 +1,20 @@
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { Tab } from './tab.js';
-/**
- * A primary tab component.
- */
-export declare class PrimaryTab extends Tab {
-    /**
-     * Whether or not the icon renders inline with label or stacked vertically.
-     */
-    inlineIcon: boolean;
-    protected getContentClasses(): {
-        stacked: boolean;
-        'has-icon': boolean;
-        'has-label': boolean;
-    };
-}
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Tab } from './tab.js';
+/**
+ * A primary tab component.
+ */
+export declare class PrimaryTab extends Tab {
+    /**
+     * Whether or not the icon renders inline with label or stacked vertically.
+     */
+    inlineIcon: boolean;
+    protected getContentClasses(): {
+        stacked: boolean;
+        'has-icon': boolean;
+        'has-label': boolean;
+    };
+}

package/dist/mdtabs/internal/primary-tab.js

@@ -1,30 +1,30 @@
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { __decorate } from "tslib";
-import { property } from 'lit/decorators.js';
-import { Tab } from './tab.js';
-/**
- * A primary tab component.
- */
-export class PrimaryTab extends Tab {
-    constructor() {
-        super(...arguments);
-        /**
-         * Whether or not the icon renders inline with label or stacked vertically.
-         */
-        this.inlineIcon = false;
-    }
-    getContentClasses() {
-        return {
-            ...super.getContentClasses(),
-            stacked: !this.inlineIcon,
-        };
-    }
-}
-__decorate([
-    property({ type: Boolean, attribute: 'inline-icon' })
-], PrimaryTab.prototype, "inlineIcon", void 0);
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { property } from 'lit/decorators.js';
+import { Tab } from './tab.js';
+/**
+ * A primary tab component.
+ */
+export class PrimaryTab extends Tab {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether or not the icon renders inline with label or stacked vertically.
+         */
+        this.inlineIcon = false;
+    }
+    getContentClasses() {
+        return {
+            ...super.getContentClasses(),
+            stacked: !this.inlineIcon,
+        };
+    }
+}
+__decorate([
+    property({ type: Boolean, attribute: 'inline-icon' })
+], PrimaryTab.prototype, "inlineIcon", void 0);
 //# sourceMappingURL=primary-tab.js.map