@spectrum-web-components/action-group 0.8.6 → 0.10.1-devmode.0

package/src/ActionGroup.js

@@ -1,328 +1,309 @@
-/*
-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, SpectrumElement, } from '@spectrum-web-components/base';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
-import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
-import styles from './action-group.css.js';
+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,
+  SpectrumElement
+} from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
+import { RovingTabindexController } from "@spectrum-web-components/reactive-controllers/src/RovingTabindex.js";
+import { MutationController } from "@lit-labs/observers/mutation_controller.js";
+import styles from "./action-group.css.js";
 const EMPTY_SELECTION = [];
-/**
- * @element sp-action-group
- * @slot - the sp-action-button elements that make up the group
- *
- * @fires change - Announces that selection state has been changed by user
- */
 export class ActionGroup extends SpectrumElement {
-    constructor() {
-        super(...arguments);
-        this._buttons = [];
-        this._buttonSelector = 'sp-action-button';
-        this.rovingTabindexController = new RovingTabindexController(this, {
-            focusInIndex: (elements) => {
-                let firstEnabledIndex = -1;
-                const firstSelectedIndex = elements.findIndex((el, index) => {
-                    if (!elements[firstEnabledIndex] && !el.disabled) {
-                        firstEnabledIndex = index;
-                    }
-                    return el.selected && !el.disabled;
-                });
-                return elements[firstSelectedIndex]
-                    ? firstSelectedIndex
-                    : firstEnabledIndex;
-            },
-            elements: () => this.buttons,
-            isFocusableElement: (el) => !el.disabled,
+  constructor() {
+    super();
+    this._buttons = [];
+    this._buttonSelector = "sp-action-button";
+    this.rovingTabindexController = new RovingTabindexController(this, {
+      focusInIndex: (elements) => {
+        let firstEnabledIndex = -1;
+        const firstSelectedIndex = elements.findIndex((el, index) => {
+          if (!elements[firstEnabledIndex] && !el.disabled) {
+            firstEnabledIndex = index;
+          }
+          return el.selected && !el.disabled;
         });
-        this.compact = false;
-        this.emphasized = false;
-        this.justified = false;
-        this.label = '';
-        this.quiet = false;
-        this.vertical = false;
-        this._selected = EMPTY_SELECTION;
-        this.manageButtons = () => {
-            const slot = this.shadowRoot.querySelector('slot');
-            if (!slot)
-                return;
-            const assignedElements = slot.assignedElements({ flatten: true });
-            const buttons = assignedElements.reduce((acc, el) => {
-                if (el.matches(this._buttonSelector)) {
-                    acc.push(el);
-                }
-                else {
-                    const buttonDescendents = Array.from(el.querySelectorAll(`:scope > ${this._buttonSelector}`));
-                    acc.push(...buttonDescendents);
-                }
-                return acc;
-            }, []);
-            this.buttons = buttons;
-            // <selected> element merges selected so following paradigm here
-            const currentlySelectedButtons = [];
-            this.buttons.forEach((button) => {
-                if (button.selected) {
-                    currentlySelectedButtons.push(button.value);
-                }
-            });
-            this.setSelected(this.selected.concat(currentlySelectedButtons));
-            this.manageChildren();
-            this.manageSelects();
-        };
-    }
-    static get styles() {
-        return [styles];
-    }
-    set buttons(tabs) {
-        if (tabs === this.buttons)
-            return;
-        this._buttons = tabs;
-        this.rovingTabindexController.clearElementCache();
-    }
-    get buttons() {
-        return this._buttons;
-    }
-    set selected(selected) {
-        this.requestUpdate('selected', this._selected);
-        this._selected = selected;
-        this.updateComplete.then(() => {
-            this.applySelects();
-            this.manageChildren();
-        });
-    }
-    get selected() {
-        return this._selected;
-    }
-    dispatchChange(old) {
-        const applyDefault = this.dispatchEvent(new Event('change', {
-            bubbles: true,
-            composed: true,
-            cancelable: true,
-        }));
-        if (!applyDefault) {
-            this.setSelected(old);
-            this.buttons.map((button) => {
-                button.selected = this.selected.includes(button.value);
-            });
+        return elements[firstSelectedIndex] ? firstSelectedIndex : firstEnabledIndex;
+      },
+      elements: () => this.buttons,
+      isFocusableElement: (el) => !el.disabled
+    });
+    this.compact = false;
+    this.emphasized = false;
+    this.justified = false;
+    this.label = "";
+    this.quiet = false;
+    this.vertical = false;
+    this._selected = EMPTY_SELECTION;
+    this.manageButtons = () => {
+      const slot = this.shadowRoot.querySelector("slot");
+      if (!slot)
+        return;
+      const assignedElements = slot.assignedElements({ flatten: true });
+      const buttons = assignedElements.reduce((acc, el) => {
+        if (el.matches(this._buttonSelector)) {
+          acc.push(el);
+        } else {
+          const buttonDescendents = Array.from(el.querySelectorAll(`:scope > ${this._buttonSelector}`));
+          acc.push(...buttonDescendents);
         }
+        return acc;
+      }, []);
+      this.buttons = buttons;
+      const currentlySelectedButtons = [];
+      this.buttons.forEach((button) => {
+        if (button.selected) {
+          currentlySelectedButtons.push(button.value);
+        }
+      });
+      this.setSelected(this.selected.concat(currentlySelectedButtons));
+      this.manageChildren();
+      this.manageSelects();
+    };
+    new MutationController(this, {
+      config: {
+        childList: true,
+        subtree: true
+      },
+      callback: () => {
+        this.manageButtons();
+      }
+    });
+  }
+  static get styles() {
+    return [styles];
+  }
+  set buttons(tabs) {
+    if (tabs === this.buttons)
+      return;
+    this._buttons = tabs;
+    this.rovingTabindexController.clearElementCache();
+  }
+  get buttons() {
+    return this._buttons;
+  }
+  set selected(selected) {
+    this.requestUpdate("selected", this._selected);
+    this._selected = selected;
+    this.updateComplete.then(() => {
+      this.applySelects();
+      this.manageChildren();
+    });
+  }
+  get selected() {
+    return this._selected;
+  }
+  dispatchChange(old) {
+    const applyDefault = this.dispatchEvent(new Event("change", {
+      bubbles: true,
+      composed: true,
+      cancelable: true
+    }));
+    if (!applyDefault) {
+      this.setSelected(old);
+      this.buttons.map((button) => {
+        button.selected = this.selected.includes(button.value);
+      });
     }
-    setSelected(selected, announce) {
-        if (selected === this.selected)
-            return;
-        const old = this.selected;
-        this.requestUpdate('selected', old);
-        this._selected = selected;
-        if (!announce)
-            return;
-        this.dispatchChange(old);
-    }
-    focus(options) {
-        this.rovingTabindexController.focus(options);
-    }
-    deselectSelectedButtons() {
-        const selected = [
-            ...this.querySelectorAll('[selected]'),
-        ];
-        selected.forEach((el) => {
-            el.selected = false;
-            el.tabIndex = -1;
-            el.setAttribute('aria-checked', 'false');
-        });
+  }
+  setSelected(selected, announce) {
+    if (selected === this.selected)
+      return;
+    const old = this.selected;
+    this.requestUpdate("selected", old);
+    this._selected = selected;
+    if (!announce)
+      return;
+    this.dispatchChange(old);
+  }
+  focus(options) {
+    this.rovingTabindexController.focus(options);
+  }
+  deselectSelectedButtons() {
+    const selected = [
+      ...this.querySelectorAll("[selected]")
+    ];
+    selected.forEach((el) => {
+      el.selected = false;
+      el.tabIndex = -1;
+      el.setAttribute("aria-checked", "false");
+    });
+  }
+  handleClick(event) {
+    const target = event.target;
+    if (typeof target.value === "undefined") {
+      return;
     }
-    handleClick(event) {
-        const target = event.target;
-        if (typeof target.value === 'undefined') {
-            return;
-        }
-        switch (this.selects) {
-            case 'single': {
-                this.deselectSelectedButtons();
-                target.selected = true;
-                target.tabIndex = 0;
-                target.setAttribute('aria-checked', 'true');
-                this.setSelected([target.value], true);
-                target.focus();
-                break;
-            }
-            case 'multiple': {
-                const selected = [...this.selected];
-                target.selected = !target.selected;
-                target.setAttribute('aria-checked', target.selected ? 'true' : 'false');
-                if (target.selected) {
-                    selected.push(target.value);
-                }
-                else {
-                    selected.splice(this.selected.indexOf(target.value), 1);
-                }
-                this.setSelected(selected, true);
-                this.buttons.forEach((button) => {
-                    button.tabIndex = -1;
-                });
-                target.tabIndex = 0;
-                break;
-            }
-            default:
-                break;
+    switch (this.selects) {
+      case "single": {
+        this.deselectSelectedButtons();
+        target.selected = true;
+        target.tabIndex = 0;
+        target.setAttribute("aria-checked", "true");
+        this.setSelected([target.value], true);
+        target.focus();
+        break;
+      }
+      case "multiple": {
+        const selected = [...this.selected];
+        target.selected = !target.selected;
+        target.setAttribute("aria-checked", target.selected ? "true" : "false");
+        if (target.selected) {
+          selected.push(target.value);
+        } else {
+          selected.splice(this.selected.indexOf(target.value), 1);
         }
+        this.setSelected(selected, true);
+        this.buttons.forEach((button) => {
+          button.tabIndex = -1;
+        });
+        target.tabIndex = 0;
+        break;
+      }
+      default:
+        break;
     }
-    async applySelects() {
-        await this.manageSelects(true);
+  }
+  async applySelects() {
+    await this.manageSelects(true);
+  }
+  async manageSelects(applied) {
+    if (!this.buttons.length) {
+      return;
     }
-    async manageSelects(applied) {
-        if (!this.buttons.length) {
-            return;
-        }
-        const options = this.buttons;
-        switch (this.selects) {
-            case 'single': {
-                this.setAttribute('role', 'radiogroup');
-                const selections = [];
-                const updates = options.map(async (option) => {
-                    await option.updateComplete;
-                    option.setAttribute('role', 'radio');
-                    option.setAttribute('aria-checked', option.selected ? 'true' : 'false');
-                    if (option.selected) {
-                        selections.push(option);
-                    }
-                });
-                if (applied)
-                    break;
-                await Promise.all(updates);
-                const selected = selections.map((button) => {
-                    return button.value;
-                });
-                this.setSelected(selected || EMPTY_SELECTION);
-                break;
-            }
-            case 'multiple': {
-                this.setAttribute('role', 'group');
-                const selection = [];
-                const selections = [];
-                const updates = options.map(async (option) => {
-                    await option.updateComplete;
-                    option.setAttribute('role', 'checkbox');
-                    option.setAttribute('aria-checked', option.selected ? 'true' : 'false');
-                    if (option.selected) {
-                        selection.push(option.value);
-                        selections.push(option);
-                    }
-                });
-                if (applied)
-                    break;
-                await Promise.all(updates);
-                const selected = !!selection.length
-                    ? selection
-                    : EMPTY_SELECTION;
-                this.setSelected(selected);
-                break;
+    const options = this.buttons;
+    switch (this.selects) {
+      case "single": {
+        this.setAttribute("role", "radiogroup");
+        const selections = [];
+        const updates = options.map(async (option) => {
+          await option.updateComplete;
+          option.setAttribute("role", "radio");
+          option.setAttribute("aria-checked", option.selected ? "true" : "false");
+          if (option.selected) {
+            selections.push(option);
+          }
+        });
+        if (applied)
+          break;
+        await Promise.all(updates);
+        const selected = selections.map((button) => {
+          return button.value;
+        });
+        this.setSelected(selected || EMPTY_SELECTION);
+        break;
+      }
+      case "multiple": {
+        this.setAttribute("role", "group");
+        const selection = [];
+        const selections = [];
+        const updates = options.map(async (option) => {
+          await option.updateComplete;
+          option.setAttribute("role", "checkbox");
+          option.setAttribute("aria-checked", option.selected ? "true" : "false");
+          if (option.selected) {
+            selection.push(option.value);
+            selections.push(option);
+          }
+        });
+        if (applied)
+          break;
+        await Promise.all(updates);
+        const selected = !!selection.length ? selection : EMPTY_SELECTION;
+        this.setSelected(selected);
+        break;
+      }
+      default:
+        if (this.selected.length) {
+          const selections = [];
+          const updates = options.map(async (option) => {
+            await option.updateComplete;
+            option.setAttribute("aria-checked", option.selected ? "true" : "false");
+            option.setAttribute("role", "button");
+            if (option.selected) {
+              selections.push(option);
             }
-            default:
-                // if user defines .selected
-                if (this.selected.length) {
-                    const selections = [];
-                    const updates = options.map(async (option) => {
-                        await option.updateComplete;
-                        option.setAttribute('aria-checked', option.selected ? 'true' : 'false');
-                        option.setAttribute('role', 'button');
-                        if (option.selected) {
-                            selections.push(option);
-                        }
-                    });
-                    if (applied)
-                        break;
-                    await Promise.all(updates);
-                    this.setSelected(selections.map((button) => {
-                        return button.value;
-                    }));
-                }
-                else {
-                    this.buttons.forEach((option) => {
-                        option.setAttribute('role', 'button');
-                    });
-                    this.removeAttribute('role');
-                    break;
-                }
+          });
+          if (applied)
+            break;
+          await Promise.all(updates);
+          this.setSelected(selections.map((button) => {
+            return button.value;
+          }));
+        } else {
+          this.buttons.forEach((option) => {
+            option.setAttribute("role", "button");
+          });
+          this.removeAttribute("role");
+          break;
         }
     }
-    render() {
-        return html `
+  }
+  render() {
+    return html`
             <slot role="presentation" @slotchange=${this.manageButtons}></slot>
         `;
+  }
+  firstUpdated(changes) {
+    super.firstUpdated(changes);
+    this.addEventListener("click", this.handleClick);
+  }
+  updated(changes) {
+    super.updated(changes);
+    if (changes.has("selects")) {
+      this.manageSelects();
+      this.manageChildren();
     }
-    firstUpdated(changes) {
-        super.firstUpdated(changes);
-        this.addEventListener('click', this.handleClick);
-    }
-    updated(changes) {
-        super.updated(changes);
-        if (changes.has('selects')) {
-            this.manageSelects();
-            this.manageChildren();
-        }
-        if ((changes.has('quiet') && this.quiet) ||
-            (changes.has('emphasized') && this.emphasized)) {
-            this.manageChildren();
-        }
-        // Update `aria-label` when `label` available or not first `updated`
-        if (changes.has('label') &&
-            (this.label || typeof changes.get('label') !== 'undefined')) {
-            if (this.label.length) {
-                this.setAttribute('aria-label', this.label);
-            }
-            else {
-                this.removeAttribute('aria-label');
-            }
-        }
-    }
-    manageChildren() {
-        this.buttons.forEach((button) => {
-            button.quiet = this.quiet;
-            button.emphasized = this.emphasized;
-            button.selected = this.selected.includes(button.value);
-        });
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        if (!this.observer) {
-            this.observer = new MutationObserver(this.manageButtons);
-            this.manageButtons();
-        }
-        this.observer.observe(this, { childList: true, subtree: true });
+    if (changes.has("quiet") && this.quiet || changes.has("emphasized") && this.emphasized) {
+      this.manageChildren();
     }
-    disconnectedCallback() {
-        this.observer.disconnect();
-        super.disconnectedCallback();
+    if (changes.has("label") && (this.label || typeof changes.get("label") !== "undefined")) {
+      if (this.label.length) {
+        this.setAttribute("aria-label", this.label);
+      } else {
+        this.removeAttribute("aria-label");
+      }
     }
+  }
+  manageChildren() {
+    this.buttons.forEach((button) => {
+      button.quiet = this.quiet;
+      button.emphasized = this.emphasized;
+      button.selected = this.selected.includes(button.value);
+    });
+  }
 }
-__decorate([
-    property({ type: Boolean, reflect: true })
-], ActionGroup.prototype, "compact", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], ActionGroup.prototype, "emphasized", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], ActionGroup.prototype, "justified", void 0);
-__decorate([
-    property({ type: String })
-], ActionGroup.prototype, "label", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], ActionGroup.prototype, "quiet", void 0);
-__decorate([
-    property({ type: String })
-], ActionGroup.prototype, "selects", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], ActionGroup.prototype, "vertical", void 0);
-__decorate([
-    property({ type: Array })
-], ActionGroup.prototype, "selected", null);
-//# sourceMappingURL=ActionGroup.js.map
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ActionGroup.prototype, "compact", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ActionGroup.prototype, "emphasized", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ActionGroup.prototype, "justified", 2);
+__decorateClass([
+  property({ type: String })
+], ActionGroup.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ActionGroup.prototype, "quiet", 2);
+__decorateClass([
+  property({ type: String })
+], ActionGroup.prototype, "selects", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ActionGroup.prototype, "vertical", 2);
+__decorateClass([
+  property({ type: Array })
+], ActionGroup.prototype, "selected", 1);
+//# sourceMappingURL=ActionGroup.js.map