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

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

@@ -1,12 +1,12 @@
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { Tab } from './tab.js';
-/**
- * A secondary tab component.
- */
-export declare class SecondaryTab extends Tab {
-    protected fullWidthIndicator: boolean;
-}
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Tab } from './tab.js';
+/**
+ * A secondary tab component.
+ */
+export declare class SecondaryTab extends Tab {
+    protected fullWidthIndicator: boolean;
+}

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

@@ -1,16 +1,16 @@
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { Tab } from './tab.js';
-/**
- * A secondary tab component.
- */
-export class SecondaryTab extends Tab {
-    constructor() {
-        super(...arguments);
-        this.fullWidthIndicator = true;
-    }
-}
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Tab } from './tab.js';
+/**
+ * A secondary tab component.
+ */
+export class SecondaryTab extends Tab {
+    constructor() {
+        super(...arguments);
+        this.fullWidthIndicator = true;
+    }
+}
 //# sourceMappingURL=secondary-tab.js.map

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

@@ -1,67 +1,67 @@
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import '@material/web/elevation/elevation.js';
-import '@material/web/focus/md-focus-ring.js';
-import '@material/web/ripple/ripple.js';
-import { LitElement } from 'lit';
-/**
- * Symbol for tabs to use to animate their indicators based off another tab's
- * indicator.
- */
-declare const INDICATOR: unique symbol;
-/**
- * Symbol used by the tab bar to request a tab to animate its indicator from a
- * previously selected tab.
- */
-export declare const ANIMATE_INDICATOR: unique symbol;
-/**
- * Tab component.
- */
-export declare class Tab extends LitElement {
-    /**
-     * The attribute `md-tab` indicates that the element is a tab for the parent
-     * element, `<md-tabs>`. Make sure if you're implementing your own `md-tab`
-     * component that you have an `md-tab` attribute set.
-     */
-    readonly isTab = true;
-    /**
-     * Whether or not the tab is selected.
-     */
-    active: boolean;
-    /**
-     * TODO(b/293476210): remove after migrating
-     * @deprecated use `active`
-     */
-    get selected(): boolean;
-    set selected(active: boolean);
-    /**
-     * In SSR, set this to true when an icon is present.
-     */
-    hasIcon: boolean;
-    /**
-     * In SSR, set this to true when there is no label and only an icon.
-     */
-    iconOnly: boolean;
-    readonly [INDICATOR]: HTMLElement | null;
-    protected fullWidthIndicator: boolean;
-    private readonly assignedDefaultNodes;
-    private readonly assignedIcons;
-    private readonly internals;
-    constructor();
-    protected render(): import("lit").TemplateResult<1>;
-    protected getContentClasses(): {
-        'has-icon': boolean;
-        'has-label': boolean;
-    };
-    protected updated(): void;
-    private handleKeydown;
-    private handleContentClick;
-    [ANIMATE_INDICATOR](previousTab: Tab): void;
-    private getKeyframes;
-    private handleSlotChange;
-    private handleIconSlotChange;
-}
-export {};
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '@material/web/elevation/elevation.js';
+import '@material/web/focus/md-focus-ring.js';
+import '@material/web/ripple/ripple.js';
+import { LitElement } from 'lit';
+/**
+ * Symbol for tabs to use to animate their indicators based off another tab's
+ * indicator.
+ */
+declare const INDICATOR: unique symbol;
+/**
+ * Symbol used by the tab bar to request a tab to animate its indicator from a
+ * previously selected tab.
+ */
+export declare const ANIMATE_INDICATOR: unique symbol;
+/**
+ * Tab component.
+ */
+export declare class Tab extends LitElement {
+    /**
+     * The attribute `md-tab` indicates that the element is a tab for the parent
+     * element, `<md-tabs>`. Make sure if you're implementing your own `md-tab`
+     * component that you have an `md-tab` attribute set.
+     */
+    readonly isTab = true;
+    /**
+     * Whether or not the tab is selected.
+     */
+    active: boolean;
+    /**
+     * TODO(b/293476210): remove after migrating
+     * @deprecated use `active`
+     */
+    get selected(): boolean;
+    set selected(active: boolean);
+    /**
+     * In SSR, set this to true when an icon is present.
+     */
+    hasIcon: boolean;
+    /**
+     * In SSR, set this to true when there is no label and only an icon.
+     */
+    iconOnly: boolean;
+    readonly [INDICATOR]: HTMLElement | null;
+    protected fullWidthIndicator: boolean;
+    private readonly assignedDefaultNodes;
+    private readonly assignedIcons;
+    private readonly internals;
+    constructor();
+    protected render(): import("lit").TemplateResult<1>;
+    protected getContentClasses(): {
+        'has-icon': boolean;
+        'has-label': boolean;
+    };
+    protected updated(): void;
+    private handleKeydown;
+    private handleContentClick;
+    [ANIMATE_INDICATOR](previousTab: Tab): void;
+    private getKeyframes;
+    private handleSlotChange;
+    private handleIconSlotChange;
+}
+export {};

package/dist/mdtabs/internal/tab.js

@@ -1,74 +1,74 @@
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-var _a;
-import { __decorate } from "tslib";
-import '@material/web/elevation/elevation.js';
-import '@material/web/focus/md-focus-ring.js';
-import '@material/web/ripple/ripple.js';
-import { html, isServer, LitElement, nothing } from 'lit';
-import { property, query, queryAssignedElements, queryAssignedNodes, state, } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { EASING } from '@material/web/internal/motion/animation.js';
-/**
- * Symbol for tabs to use to animate their indicators based off another tab's
- * indicator.
- */
-const INDICATOR = Symbol('indicator');
-/**
- * Symbol used by the tab bar to request a tab to animate its indicator from a
- * previously selected tab.
- */
-export const ANIMATE_INDICATOR = Symbol('animateIndicator');
-function shouldReduceMotion() {
-    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-}
-/**
- * Tab component.
- */
-export class Tab extends LitElement {
-    /**
-     * TODO(b/293476210): remove after migrating
-     * @deprecated use `active`
-     */
-    get selected() {
-        return this.active;
-    }
-    set selected(active) {
-        this.active = active;
-    }
-    constructor() {
-        super();
-        /**
-         * The attribute `md-tab` indicates that the element is a tab for the parent
-         * element, `<md-tabs>`. Make sure if you're implementing your own `md-tab`
-         * component that you have an `md-tab` attribute set.
-         */
-        this.isTab = true;
-        /**
-         * Whether or not the tab is selected.
-         */
-        this.active = false;
-        /**
-         * In SSR, set this to true when an icon is present.
-         */
-        this.hasIcon = false;
-        /**
-         * In SSR, set this to true when there is no label and only an icon.
-         */
-        this.iconOnly = false;
-        this.fullWidthIndicator = true;
-        this.internals = this /* needed for closure */
-            .attachInternals();
-        if (!isServer) {
-            this.internals.role = 'tab';
-            this.addEventListener('keydown', this.handleKeydown.bind(this));
-        }
-    }
-    render() {
-        const indicator = html `<div class="indicator"></div>`;
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var _a;
+import { __decorate } from "tslib";
+import '@material/web/elevation/elevation.js';
+import '@material/web/focus/md-focus-ring.js';
+import '@material/web/ripple/ripple.js';
+import { html, isServer, LitElement, nothing } from 'lit';
+import { property, query, queryAssignedElements, queryAssignedNodes, state, } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { EASING } from '@material/web/internal/motion/animation.js';
+/**
+ * Symbol for tabs to use to animate their indicators based off another tab's
+ * indicator.
+ */
+const INDICATOR = Symbol('indicator');
+/**
+ * Symbol used by the tab bar to request a tab to animate its indicator from a
+ * previously selected tab.
+ */
+export const ANIMATE_INDICATOR = Symbol('animateIndicator');
+function shouldReduceMotion() {
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+/**
+ * Tab component.
+ */
+export class Tab extends LitElement {
+    /**
+     * TODO(b/293476210): remove after migrating
+     * @deprecated use `active`
+     */
+    get selected() {
+        return this.active;
+    }
+    set selected(active) {
+        this.active = active;
+    }
+    constructor() {
+        super();
+        /**
+         * The attribute `md-tab` indicates that the element is a tab for the parent
+         * element, `<md-tabs>`. Make sure if you're implementing your own `md-tab`
+         * component that you have an `md-tab` attribute set.
+         */
+        this.isTab = true;
+        /**
+         * Whether or not the tab is selected.
+         */
+        this.active = false;
+        /**
+         * In SSR, set this to true when an icon is present.
+         */
+        this.hasIcon = false;
+        /**
+         * In SSR, set this to true when there is no label and only an icon.
+         */
+        this.iconOnly = false;
+        this.fullWidthIndicator = true;
+        this.internals = this /* needed for closure */
+            .attachInternals();
+        if (!isServer) {
+            this.internals.role = 'tab';
+            this.addEventListener('keydown', this.handleKeydown.bind(this));
+        }
+    }
+    render() {
+        const indicator = html `<div class="indicator"></div>`;
         return html ` <div
       class="button"
       role="presentation"
@@ -86,121 +86,121 @@ export class Tab extends LitElement {
         ${this.fullWidthIndicator ? nothing : indicator}
       </div>
       ${this.fullWidthIndicator ? indicator : nothing}
-    </div>`;
-    }
-    getContentClasses() {
-        return {
-            'has-icon': this.hasIcon,
-            'has-label': !this.iconOnly,
-        };
-    }
-    updated() {
-        this.internals.ariaSelected = String(this.active);
-    }
-    async handleKeydown(event) {
-        // Allow event to bubble.
-        await 0;
-        if (event.defaultPrevented) {
-            return;
-        }
-        if (event.key === 'Enter' || event.key === ' ') {
-            // Prevent default behavior such as scrolling when pressing spacebar.
-            event.preventDefault();
-            this.click();
-        }
-    }
-    handleContentClick(event) {
-        // Ensure the "click" target is always the tab, and not content, by stopping
-        // propagation of content clicks and re-clicking the host.
-        event.stopPropagation();
-        this.click();
-    }
-    [(_a = INDICATOR, ANIMATE_INDICATOR)](previousTab) {
-        var _b;
-        if (!this[INDICATOR]) {
-            return;
-        }
-        this[INDICATOR].getAnimations().forEach(a => {
-            a.cancel();
-        });
-        const previousTabInner = (_b = previousTab === null || previousTab === void 0 ? void 0 : previousTab.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('*');
-        const frames = this.getKeyframes(previousTabInner);
-        if (frames !== null) {
-            this[INDICATOR].animate(frames, {
-                duration: 250,
-                easing: EASING.EMPHASIZED,
-            });
-        }
-    }
-    getKeyframes(previousTab) {
-        var _b, _c;
-        const reduceMotion = shouldReduceMotion();
-        if (!this.active) {
-            return reduceMotion ? [{ opacity: 1 }, { transform: 'none' }] : null;
-        }
-        const from = {};
-        const fromRect = (_c = (_b = previousTab[INDICATOR]) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) !== null && _c !== void 0 ? _c : {};
-        const fromPos = fromRect.left;
-        const fromExtent = fromRect.width;
-        const toRect = this[INDICATOR].getBoundingClientRect();
-        const toPos = toRect.left;
-        const toExtent = toRect.width;
-        const scale = fromExtent / toExtent;
-        if (!reduceMotion &&
-            fromPos !== undefined &&
-            toPos !== undefined &&
-            Number(scale)) {
-            from.transform = `translateX(${(fromPos - toPos).toFixed(4)}px) scaleX(${scale.toFixed(4)})`;
-        }
-        else {
-            from.opacity = 0;
-        }
-        // note, including `transform: none` avoids quirky Safari behavior
-        // that can hide the animation.
-        return [from, { transform: 'none' }];
-    }
-    handleSlotChange() {
-        this.iconOnly = false;
-        // Check if there's any label text or elements. If not, then there is only
-        // an icon.
-        for (const node of this.assignedDefaultNodes) {
-            const hasTextContent = node.nodeType === Node.TEXT_NODE &&
-                !!node.wholeText.match(/\S/);
-            if (node.nodeType === Node.ELEMENT_NODE || hasTextContent) {
-                return;
-            }
-        }
-        this.iconOnly = true;
-    }
-    handleIconSlotChange() {
-        this.hasIcon = this.assignedIcons.length > 0;
-    }
-}
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'md-tab' })
-], Tab.prototype, "isTab", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], 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: true })
-], Tab.prototype, "assignedDefaultNodes", void 0);
-__decorate([
-    queryAssignedElements({ slot: 'icon', flatten: true })
-], Tab.prototype, "assignedIcons", void 0);
+    </div>`;
+    }
+    getContentClasses() {
+        return {
+            'has-icon': this.hasIcon,
+            'has-label': !this.iconOnly,
+        };
+    }
+    updated() {
+        this.internals.ariaSelected = String(this.active);
+    }
+    async handleKeydown(event) {
+        // Allow event to bubble.
+        await 0;
+        if (event.defaultPrevented) {
+            return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+            // Prevent default behavior such as scrolling when pressing spacebar.
+            event.preventDefault();
+            this.click();
+        }
+    }
+    handleContentClick(event) {
+        // Ensure the "click" target is always the tab, and not content, by stopping
+        // propagation of content clicks and re-clicking the host.
+        event.stopPropagation();
+        this.click();
+    }
+    [(_a = INDICATOR, ANIMATE_INDICATOR)](previousTab) {
+        var _b;
+        if (!this[INDICATOR]) {
+            return;
+        }
+        this[INDICATOR].getAnimations().forEach(a => {
+            a.cancel();
+        });
+        const previousTabInner = (_b = previousTab === null || previousTab === void 0 ? void 0 : previousTab.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('*');
+        const frames = this.getKeyframes(previousTabInner);
+        if (frames !== null) {
+            this[INDICATOR].animate(frames, {
+                duration: 250,
+                easing: EASING.EMPHASIZED,
+            });
+        }
+    }
+    getKeyframes(previousTab) {
+        var _b, _c;
+        const reduceMotion = shouldReduceMotion();
+        if (!this.active) {
+            return reduceMotion ? [{ opacity: 1 }, { transform: 'none' }] : null;
+        }
+        const from = {};
+        const fromRect = (_c = (_b = previousTab[INDICATOR]) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) !== null && _c !== void 0 ? _c : {};
+        const fromPos = fromRect.left;
+        const fromExtent = fromRect.width;
+        const toRect = this[INDICATOR].getBoundingClientRect();
+        const toPos = toRect.left;
+        const toExtent = toRect.width;
+        const scale = fromExtent / toExtent;
+        if (!reduceMotion &&
+            fromPos !== undefined &&
+            toPos !== undefined &&
+            Number(scale)) {
+            from.transform = `translateX(${(fromPos - toPos).toFixed(4)}px) scaleX(${scale.toFixed(4)})`;
+        }
+        else {
+            from.opacity = 0;
+        }
+        // note, including `transform: none` avoids quirky Safari behavior
+        // that can hide the animation.
+        return [from, { transform: 'none' }];
+    }
+    handleSlotChange() {
+        this.iconOnly = false;
+        // Check if there's any label text or elements. If not, then there is only
+        // an icon.
+        for (const node of this.assignedDefaultNodes) {
+            const hasTextContent = node.nodeType === Node.TEXT_NODE &&
+                !!node.wholeText.match(/\S/);
+            if (node.nodeType === Node.ELEMENT_NODE || hasTextContent) {
+                return;
+            }
+        }
+        this.iconOnly = true;
+    }
+    handleIconSlotChange() {
+        this.hasIcon = this.assignedIcons.length > 0;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'md-tab' })
+], Tab.prototype, "isTab", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], 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: true })
+], Tab.prototype, "assignedDefaultNodes", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'icon', flatten: true })
+], Tab.prototype, "assignedIcons", void 0);
 //# sourceMappingURL=tab.js.map