@spectrum-web-components/tabs 0.8.14 → 0.8.15-devmode.0

package/src/Tabs.js

@@ -1,208 +1,184 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import { __decorate } from "tslib";
-import { html, SizedMixin, } from '@spectrum-web-components/base';
-import { property, query, } from '@spectrum-web-components/base/src/decorators.js';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
-import { Focusable } from '@spectrum-web-components/shared';
-import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
-import tabStyles from './tabs.css.js';
-const noSelectionStyle = 'transform: translateX(0px) scaleX(0) scaleY(0)';
-/**
- * @element sp-tabs
- *
- * @slot - Tab elements to manage as a group
- * @slot tab-panel - Tab Panel elements related to the listed Tab elements
- * @attr {Boolean} quiet - The tabs border is a lot smaller
- * @attr {Boolean} compact - The collection of tabs take up less space
- *
- * @fires change - The selected Tab child has changed.
- */
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+import {
+  html,
+  SizedMixin
+} from "@spectrum-web-components/base";
+import {
+  property,
+  query
+} from "@spectrum-web-components/base/src/decorators.js";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+import { Focusable } from "@spectrum-web-components/shared";
+import { RovingTabindexController } from "@spectrum-web-components/reactive-controllers/src/RovingTabindex.js";
+import tabStyles from "./tabs.css.js";
+const noSelectionStyle = "transform: translateX(0px) scaleX(0) scaleY(0)";
 export class Tabs extends SizedMixin(Focusable) {
-    constructor() {
-        super(...arguments);
-        /**
-         * Whether to activate a tab on keyboard focus or not.
-         *
-         * By default a tab is activated via a "click" interaction. This is specifically intended for when
-         * tab content cannot be displayed instantly, e.g. not all of the DOM content is available, etc.
-         * To learn more about "Deciding When to Make Selection Automatically Follow Focus", visit:
-         * https://w3c.github.io/aria-practices/#kbd_selection_follows_focus
-         */
-        this.auto = false;
-        this.direction = 'horizontal';
-        this.emphasized = false;
-        this.label = '';
-        this.selectionIndicatorStyle = noSelectionStyle;
-        this.shouldAnimate = false;
-        this._selected = '';
-        this._tabs = [];
-        this.rovingTabindexController = new RovingTabindexController(this, {
-            focusInIndex: (elements) => {
-                let focusInIndex = 0;
-                const firstFocusableElement = elements.find((el, index) => {
-                    const focusInElement = this.selected
-                        ? !el.disabled && el.value === this.selected
-                        : !el.disabled;
-                    focusInIndex = index;
-                    return focusInElement;
-                });
-                return firstFocusableElement ? focusInIndex : -1;
-            },
-            direction: () => this.direction === 'horizontal' ? 'horizontal' : 'vertical',
-            elementEnterAction: (el) => {
-                if (!this.auto)
-                    return;
-                this.shouldAnimate = true;
-                this.selectTarget(el);
-            },
-            elements: () => this.tabs,
-            isFocusableElement: (el) => !el.disabled,
-            listenerScope: () => this.tabList,
+  constructor() {
+    super(...arguments);
+    this.auto = false;
+    this.direction = "horizontal";
+    this.emphasized = false;
+    this.label = "";
+    this.selectionIndicatorStyle = noSelectionStyle;
+    this.shouldAnimate = false;
+    this._selected = "";
+    this._tabs = [];
+    this.rovingTabindexController = new RovingTabindexController(this, {
+      focusInIndex: (elements) => {
+        let focusInIndex = 0;
+        const firstFocusableElement = elements.find((el, index) => {
+          const focusInElement = this.selected ? !el.disabled && el.value === this.selected : !el.disabled;
+          focusInIndex = index;
+          return focusInElement;
         });
-        this.onClick = (event) => {
-            if (this.disabled) {
-                return;
-            }
-            const target = event
-                .composedPath()
-                .find((el) => el.parentElement === this);
-            if (!target || target.disabled) {
-                return;
-            }
-            this.shouldAnimate = true;
-            this.selectTarget(target);
-        };
-        this.onKeyDown = (event) => {
-            if (event.code === 'Enter' || event.code === 'Space') {
-                event.preventDefault();
-                const target = event.target;
-                if (target) {
-                    this.selectTarget(target);
-                }
-            }
-        };
-        this.updateCheckedState = () => {
-            if (!this.tabs.length) {
-                this.tabs = [...this.querySelectorAll('[role="tab"]')];
-            }
-            this.tabs.forEach((element) => {
-                element.removeAttribute('selected');
-            });
-            if (this.selected) {
-                const currentChecked = this.tabs.find((el) => el.value === this.selected);
-                if (currentChecked) {
-                    currentChecked.selected = true;
-                }
-                else {
-                    this.selected = '';
-                }
-            }
-            else {
-                const firstTab = this.tabs[0];
-                if (firstTab) {
-                    firstTab.setAttribute('tabindex', '0');
-                }
-            }
-            this.updateSelectionIndicator();
-            this.tabChangeResolver();
-        };
-        this.updateSelectionIndicator = async () => {
-            const selectedElement = this.tabs.find((el) => el.selected);
-            if (!selectedElement) {
-                this.selectionIndicatorStyle = noSelectionStyle;
-                return;
-            }
-            await Promise.all([
-                selectedElement.updateComplete,
-                document.fonts ? document.fonts.ready : Promise.resolve(),
-            ]);
-            const tabBoundingClientRect = selectedElement.getBoundingClientRect();
-            const parentBoundingClientRect = this.getBoundingClientRect();
-            if (this.direction === 'horizontal') {
-                const width = tabBoundingClientRect.width;
-                const offset = this.dir === 'ltr'
-                    ? tabBoundingClientRect.left - parentBoundingClientRect.left
-                    : tabBoundingClientRect.right -
-                        parentBoundingClientRect.right;
-                this.selectionIndicatorStyle = `transform: translateX(${offset}px) scaleX(${this.dir === 'ltr' ? width : -1 * width});`;
-            }
-            else {
-                const height = tabBoundingClientRect.height;
-                const offset = tabBoundingClientRect.top - parentBoundingClientRect.top;
-                this.selectionIndicatorStyle = `transform: translateY(${offset}px) scaleY(${height});`;
-            }
-        };
-        this.tabChangePromise = Promise.resolve();
-        this.tabChangeResolver = function () {
-            return;
-        };
-    }
-    static get styles() {
-        return [tabStyles];
-    }
-    get selected() {
-        return this._selected;
-    }
-    set selected(value) {
-        const oldValue = this.selected;
-        if (value === oldValue) {
-            return;
+        return firstFocusableElement ? focusInIndex : -1;
+      },
+      direction: () => this.direction === "horizontal" ? "horizontal" : "vertical",
+      elementEnterAction: (el) => {
+        if (!this.auto)
+          return;
+        this.shouldAnimate = true;
+        this.selectTarget(el);
+      },
+      elements: () => this.tabs,
+      isFocusableElement: (el) => !el.disabled,
+      listenerScope: () => this.tabList
+    });
+    this.onClick = (event) => {
+      if (this.disabled) {
+        return;
+      }
+      const target = event.composedPath().find((el) => el.parentElement === this);
+      if (!target || target.disabled) {
+        return;
+      }
+      this.shouldAnimate = true;
+      this.selectTarget(target);
+    };
+    this.onKeyDown = (event) => {
+      if (event.code === "Enter" || event.code === "Space") {
+        event.preventDefault();
+        const target = event.target;
+        if (target) {
+          this.selectTarget(target);
         }
-        this._selected = value;
-        this.shouldUpdateCheckedState();
-        this.requestUpdate('selected', oldValue);
-    }
-    set tabs(tabs) {
-        if (tabs === this.tabs)
-            return;
-        this._tabs = tabs;
-        this.rovingTabindexController.clearElementCache();
-    }
-    get tabs() {
-        return this._tabs;
-    }
-    /**
-     * @private
-     */
-    get focusElement() {
-        return this.rovingTabindexController.focusInElement || this;
-    }
-    manageAutoFocus() {
-        const tabs = [...this.children];
-        const tabUpdateCompletes = tabs.map((tab) => {
-            if (typeof tab.updateComplete !== 'undefined') {
-                return tab.updateComplete;
-            }
-            return Promise.resolve(true);
-        });
-        Promise.all(tabUpdateCompletes).then(() => super.manageAutoFocus());
-    }
-    managePanels({ target, }) {
-        const panels = target.assignedElements();
-        panels.map((panel) => {
-            const { value, id } = panel;
-            const tab = this.querySelector(`[role="tab"][value="${value}"]`);
-            if (tab) {
-                tab.setAttribute('aria-controls', id);
-                panel.setAttribute('aria-labelledby', tab.id);
-            }
-            panel.selected = value === this.selected;
-        });
+      }
+    };
+    this.updateCheckedState = () => {
+      if (!this.tabs.length) {
+        this.tabs = [...this.querySelectorAll('[role="tab"]')];
+      }
+      this.tabs.forEach((element) => {
+        element.removeAttribute("selected");
+      });
+      if (this.selected) {
+        const currentChecked = this.tabs.find((el) => el.value === this.selected);
+        if (currentChecked) {
+          currentChecked.selected = true;
+        } else {
+          this.selected = "";
+        }
+      } else {
+        const firstTab = this.tabs[0];
+        if (firstTab) {
+          firstTab.setAttribute("tabindex", "0");
+        }
+      }
+      this.updateSelectionIndicator();
+      this.tabChangeResolver();
+    };
+    this.updateSelectionIndicator = async () => {
+      const selectedElement = this.tabs.find((el) => el.selected);
+      if (!selectedElement) {
+        this.selectionIndicatorStyle = noSelectionStyle;
+        return;
+      }
+      await Promise.all([
+        selectedElement.updateComplete,
+        document.fonts ? document.fonts.ready : Promise.resolve()
+      ]);
+      const tabBoundingClientRect = selectedElement.getBoundingClientRect();
+      const parentBoundingClientRect = this.getBoundingClientRect();
+      if (this.direction === "horizontal") {
+        const width = tabBoundingClientRect.width;
+        const offset = this.dir === "ltr" ? tabBoundingClientRect.left - parentBoundingClientRect.left : tabBoundingClientRect.right - parentBoundingClientRect.right;
+        this.selectionIndicatorStyle = `transform: translateX(${offset}px) scaleX(${this.dir === "ltr" ? width : -1 * width});`;
+      } else {
+        const height = tabBoundingClientRect.height;
+        const offset = tabBoundingClientRect.top - parentBoundingClientRect.top;
+        this.selectionIndicatorStyle = `transform: translateY(${offset}px) scaleY(${height});`;
+      }
+    };
+    this.tabChangePromise = Promise.resolve();
+    this.tabChangeResolver = function() {
+      return;
+    };
+  }
+  static get styles() {
+    return [tabStyles];
+  }
+  get selected() {
+    return this._selected;
+  }
+  set selected(value) {
+    const oldValue = this.selected;
+    if (value === oldValue) {
+      return;
     }
-    render() {
-        return html `
+    this._selected = value;
+    this.shouldUpdateCheckedState();
+    this.requestUpdate("selected", oldValue);
+  }
+  set tabs(tabs) {
+    if (tabs === this.tabs)
+      return;
+    this._tabs = tabs;
+    this.rovingTabindexController.clearElementCache();
+  }
+  get tabs() {
+    return this._tabs;
+  }
+  get focusElement() {
+    return this.rovingTabindexController.focusInElement || this;
+  }
+  manageAutoFocus() {
+    const tabs = [...this.children];
+    const tabUpdateCompletes = tabs.map((tab) => {
+      if (typeof tab.updateComplete !== "undefined") {
+        return tab.updateComplete;
+      }
+      return Promise.resolve(true);
+    });
+    Promise.all(tabUpdateCompletes).then(() => super.manageAutoFocus());
+  }
+  managePanels({
+    target
+  }) {
+    const panels = target.assignedElements();
+    panels.map((panel) => {
+      const { value, id } = panel;
+      const tab = this.querySelector(`[role="tab"][value="${value}"]`);
+      if (tab) {
+        tab.setAttribute("aria-controls", id);
+        panel.setAttribute("aria-labelledby", tab.id);
+      }
+      panel.selected = value === this.selected;
+    });
+  }
+  render() {
+    return html`
             <div
-                aria-label=${ifDefined(this.label ? this.label : undefined)}
+                aria-label=${ifDefined(this.label ? this.label : void 0)}
                 @click=${this.onClick}
                 @keydown=${this.onKeyDown}
                 @sp-tab-contentchange=${this.updateSelectionIndicator}
@@ -212,120 +188,117 @@ export class Tabs extends SizedMixin(Focusable) {
                 <slot @slotchange=${this.onSlotChange}></slot>
                 <div
                     id="selection-indicator"
-                    class=${ifDefined(this.shouldAnimate ? undefined : 'first-position')}
+                    class=${ifDefined(this.shouldAnimate ? void 0 : "first-position")}
                     style=${this.selectionIndicatorStyle}
                     role="presentation"
                 ></div>
             </div>
             <slot name="tab-panel" @slotchange=${this.managePanels}></slot>
         `;
+  }
+  willUpdate(changes) {
+    if (!this.hasUpdated) {
+      const selectedChild = this.querySelector(":scope > [selected]");
+      if (selectedChild) {
+        this.selectTarget(selectedChild);
+      }
     }
-    willUpdate(changes) {
-        if (!this.hasUpdated) {
-            const selectedChild = this.querySelector(':scope > [selected]');
-            if (selectedChild) {
-                this.selectTarget(selectedChild);
-            }
-        }
-        super.updated(changes);
-        if (changes.has('selected')) {
-            if (changes.get('selected')) {
-                const previous = this.querySelector(`[role="tabpanel"][value="${changes.get('selected')}"]`);
-                if (previous)
-                    previous.selected = false;
-            }
-            const next = this.querySelector(`[role="tabpanel"][value="${this.selected}"]`);
-            if (next)
-                next.selected = true;
-        }
-        if (changes.has('direction')) {
-            if (this.direction === 'horizontal') {
-                this.removeAttribute('aria-orientation');
-            }
-            else {
-                this.setAttribute('aria-orientation', 'vertical');
-            }
-        }
-        if (changes.has('dir')) {
-            this.updateSelectionIndicator();
-        }
-        if (changes.has('disabled')) {
-            if (this.disabled) {
-                this.setAttribute('aria-disabled', 'true');
-            }
-            else {
-                this.removeAttribute('aria-disabled');
-            }
-        }
-        if (!this.shouldAnimate &&
-            typeof changes.get('shouldAnimate') !== 'undefined') {
-            this.shouldAnimate = true;
-        }
+    super.updated(changes);
+    if (changes.has("selected")) {
+      if (changes.get("selected")) {
+        const previous = this.querySelector(`[role="tabpanel"][value="${changes.get("selected")}"]`);
+        if (previous)
+          previous.selected = false;
+      }
+      const next = this.querySelector(`[role="tabpanel"][value="${this.selected}"]`);
+      if (next)
+        next.selected = true;
     }
-    selectTarget(target) {
-        const value = target.getAttribute('value');
-        if (value) {
-            const selected = this.selected;
-            this.selected = value;
-            const applyDefault = this.dispatchEvent(new Event('change', {
-                cancelable: true,
-            }));
-            if (!applyDefault) {
-                this.selected = selected;
-            }
-        }
+    if (changes.has("direction")) {
+      if (this.direction === "horizontal") {
+        this.removeAttribute("aria-orientation");
+      } else {
+        this.setAttribute("aria-orientation", "vertical");
+      }
     }
-    onSlotChange() {
-        this.tabs = [...this.querySelectorAll('[role="tab"]')];
-        this.shouldUpdateCheckedState();
+    if (changes.has("dir")) {
+      this.updateSelectionIndicator();
     }
-    shouldUpdateCheckedState() {
-        this.tabChangeResolver();
-        this.tabChangePromise = new Promise((res) => (this.tabChangeResolver = res));
-        setTimeout(this.updateCheckedState);
+    if (changes.has("disabled")) {
+      if (this.disabled) {
+        this.setAttribute("aria-disabled", "true");
+      } else {
+        this.removeAttribute("aria-disabled");
+      }
     }
-    async getUpdateComplete() {
-        const complete = (await super.getUpdateComplete());
-        await this.tabChangePromise;
-        return complete;
+    if (!this.shouldAnimate && typeof changes.get("shouldAnimate") !== "undefined") {
+      this.shouldAnimate = true;
     }
-    connectedCallback() {
-        super.connectedCallback();
-        window.addEventListener('resize', this.updateSelectionIndicator);
-        if ('fonts' in document) {
-            document.fonts.addEventListener('loadingdone', this.updateSelectionIndicator);
-        }
+  }
+  selectTarget(target) {
+    const value = target.getAttribute("value");
+    if (value) {
+      const selected = this.selected;
+      this.selected = value;
+      const applyDefault = this.dispatchEvent(new Event("change", {
+        cancelable: true
+      }));
+      if (!applyDefault) {
+        this.selected = selected;
+      }
     }
-    disconnectedCallback() {
-        window.removeEventListener('resize', this.updateSelectionIndicator);
-        if ('fonts' in document) {
-            document.fonts.removeEventListener('loadingdone', this.updateSelectionIndicator);
-        }
-        super.disconnectedCallback();
+  }
+  onSlotChange() {
+    this.tabs = [...this.querySelectorAll('[role="tab"]')];
+    this.shouldUpdateCheckedState();
+  }
+  shouldUpdateCheckedState() {
+    this.tabChangeResolver();
+    this.tabChangePromise = new Promise((res) => this.tabChangeResolver = res);
+    setTimeout(this.updateCheckedState);
+  }
+  async getUpdateComplete() {
+    const complete = await super.getUpdateComplete();
+    await this.tabChangePromise;
+    return complete;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("resize", this.updateSelectionIndicator);
+    if ("fonts" in document) {
+      document.fonts.addEventListener("loadingdone", this.updateSelectionIndicator);
+    }
+  }
+  disconnectedCallback() {
+    window.removeEventListener("resize", this.updateSelectionIndicator);
+    if ("fonts" in document) {
+      document.fonts.removeEventListener("loadingdone", this.updateSelectionIndicator);
     }
+    super.disconnectedCallback();
+  }
 }
-__decorate([
-    property({ type: Boolean })
-], Tabs.prototype, "auto", void 0);
-__decorate([
-    property({ reflect: true })
-], Tabs.prototype, "direction", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Tabs.prototype, "emphasized", void 0);
-__decorate([
-    property()
-], Tabs.prototype, "label", void 0);
-__decorate([
-    property({ attribute: false })
-], Tabs.prototype, "selectionIndicatorStyle", void 0);
-__decorate([
-    property({ attribute: false })
-], Tabs.prototype, "shouldAnimate", void 0);
-__decorate([
-    query('#list')
-], Tabs.prototype, "tabList", void 0);
-__decorate([
-    property({ reflect: true })
-], Tabs.prototype, "selected", null);
-//# sourceMappingURL=Tabs.js.map
+__decorateClass([
+  property({ type: Boolean })
+], Tabs.prototype, "auto", 2);
+__decorateClass([
+  property({ reflect: true })
+], Tabs.prototype, "direction", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Tabs.prototype, "emphasized", 2);
+__decorateClass([
+  property()
+], Tabs.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: false })
+], Tabs.prototype, "selectionIndicatorStyle", 2);
+__decorateClass([
+  property({ attribute: false })
+], Tabs.prototype, "shouldAnimate", 2);
+__decorateClass([
+  query("#list")
+], Tabs.prototype, "tabList", 2);
+__decorateClass([
+  property({ reflect: true })
+], Tabs.prototype, "selected", 1);
+//# sourceMappingURL=Tabs.js.map