npm - @spectrum-web-components/sidenav - Versions diffs - 0.12.2 → 0.12.4 - Mend

@spectrum-web-components/sidenav 0.12.2 → 0.12.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/custom-elements.json CHANGED Viewed

@@ -104,6 +104,11 @@
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "rovingTabindexController",
+              "default": "new RovingTabindexController<SideNavItem>(this, {\n        focusInIndex: (elements: SideNavItem[]) => {\n            return elements.findIndex((el) => {\n                return this.value\n                    ? !el.disabled &&\n                          !this.isDisabledChild(el) &&\n                          el.value === this.value\n                    : !el.disabled && !this.isDisabledChild(el);\n            });\n        },\n        direction: 'vertical',\n        elements: () => [...this.querySelectorAll('sp-sidenav-item')],\n        isFocusableElement: (el: SideNavItem) =>\n            !el.disabled && !this.isDisabledChild(el),\n    })"
+            },
             {
               "kind": "field",
               "name": "manageTabIndex",
@@ -182,62 +187,6 @@
               },
               "privacy": "public"
             },
-            {
-              "kind": "method",
-              "name": "startListeningToKeyboard",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "stopListeningToKeyboard",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "handleKeydown",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "focusItemByOffset",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "direction",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
             {
               "kind": "method",
               "name": "isDisabledChild",
@@ -265,16 +214,6 @@
                   "text": "void"
                 }
               }
-            },
-            {
-              "kind": "method",
-              "name": "manageTabIndexes",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
-                }
-              }
             }
           ],
           "events": [
@@ -407,15 +346,6 @@
               "default": "undefined",
               "attribute": "value"
             },
-            {
-              "kind": "field",
-              "name": "manageTabIndex",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false"
-            },
             {
               "kind": "field",
               "name": "selected",

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/sidenav",
-    "version": "0.12.2",
+    "version": "0.12.4",
     "publishConfig": {
         "access": "public"
     },
@@ -49,16 +49,17 @@
     ],
     "dependencies": {
         "@spectrum-web-components/base": "^0.5.1",
-        "@spectrum-web-components/shared": "^0.13.2",
+        "@spectrum-web-components/reactive-controllers": "^0.2.0",
+        "@spectrum-web-components/shared": "^0.13.3",
         "tslib": "^2.0.0"
     },
     "devDependencies": {
-        "@spectrum-css/sidenav": "^3.0.10"
+        "@spectrum-css/sidenav": "^3.0.12"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
     "sideEffects": [
         "./sp-*.js"
     ],
-    "gitHead": "5ad16bd185710525afa48bd76099cb0ebde4c4cb"
+    "gitHead": "f23b15ec952d7450272a8275524c905e028b4ddc"
 }

package/src/Sidenav.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { CSSResultArray, PropertyValues, TemplateResult } from '@spectrum-web-components/base';
+import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
 import { Focusable } from '@spectrum-web-components/shared';
 import { SideNavItem } from './SidenavItem.js';
 export interface SidenavSelectDetail {
@@ -16,21 +17,16 @@ export declare class SideNav extends Focusable {
     private items;
     startTrackingSelectionForItem(item: SideNavItem): void;
     stopTrackingSelectionForItem(item: SideNavItem): void;
+    rovingTabindexController: RovingTabindexController<SideNavItem>;
     manageTabIndex: boolean;
     value: string | undefined;
     private handleSelect;
-    constructor();
     focus(): void;
     blur(): void;
     click(): void;
     get focusElement(): SideNavItem | SideNav;
-    private startListeningToKeyboard;
-    private stopListeningToKeyboard;
-    private handleKeydown;
-    private focusItemByOffset;
     private isDisabledChild;
     private handleSlotchange;
-    private manageTabIndexes;
     protected render(): TemplateResult;
     protected firstUpdated(changes: PropertyValues): void;
     protected updated(changes: PropertyValues): void;

package/src/Sidenav.js CHANGED Viewed

@@ -12,8 +12,9 @@ governing permissions and limitations under the License.
 import { __decorate } from "tslib";
 import { html, } 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 sidenavStyles from './sidenav.css.js';
-import { Focusable, getActiveElement } from '@spectrum-web-components/shared';
+import { Focusable } from '@spectrum-web-components/shared';
 import { SideNavItem } from './SidenavItem.js';
 import { SideNavHeading } from './SidenavHeading.js';
 /**
@@ -25,20 +26,35 @@ import { SideNavHeading } from './SidenavHeading.js';
  */
 export class SideNav extends Focusable {
     constructor() {
-        super();
+        super(...arguments);
         this.items = new Set();
+        this.rovingTabindexController = new RovingTabindexController(this, {
+            focusInIndex: (elements) => {
+                return elements.findIndex((el) => {
+                    return this.value
+                        ? !el.disabled &&
+                            !this.isDisabledChild(el) &&
+                            el.value === this.value
+                        : !el.disabled && !this.isDisabledChild(el);
+                });
+            },
+            direction: 'vertical',
+            elements: () => [...this.querySelectorAll('sp-sidenav-item')],
+            isFocusableElement: (el) => !el.disabled && !this.isDisabledChild(el),
+        });
         this.manageTabIndex = false;
         this.value = undefined;
-        this.addEventListener('focusin', this.startListeningToKeyboard);
     }
     static get styles() {
         return [sidenavStyles];
     }
     startTrackingSelectionForItem(item) {
         this.items.add(item);
+        this.rovingTabindexController.clearElementCache();
     }
     stopTrackingSelectionForItem(item) {
         this.items.delete(item);
+        this.rovingTabindexController.clearElementCache();
     }
     handleSelect(event) {
         event.stopPropagation();
@@ -62,10 +78,7 @@ export class SideNav extends Focusable {
         }
     }
     focus() {
-        if (this.focusElement === this) {
-            return;
-        }
-        super.focus();
+        this.rovingTabindexController.focus();
     }
     blur() {
         if (this.focusElement === this) {
@@ -80,69 +93,7 @@ export class SideNav extends Focusable {
         super.click();
     }
     get focusElement() {
-        const selected = this.querySelector('[selected]');
-        if (selected && !this.isDisabledChild(selected)) {
-            return selected;
-        }
-        const items = [...this.querySelectorAll('sp-sidenav-item')];
-        let index = 0;
-        while (index < items.length &&
-            items[index] &&
-            this.isDisabledChild(items[index])) {
-            index += 1;
-        }
-        if (items[index]) {
-            return items[index];
-        }
-        /* c8 ignore next */
-        return this;
-    }
-    startListeningToKeyboard() {
-        this.addEventListener('keydown', this.handleKeydown);
-        this.addEventListener('focusout', this.stopListeningToKeyboard);
-        if (this.value && this.manageTabIndex) {
-            const selected = this.querySelector(`[value="${this.value}"]`);
-            if (selected) {
-                selected.tabIndex = -1;
-            }
-        }
-    }
-    stopListeningToKeyboard() {
-        this.removeEventListener('keydown', this.handleKeydown);
-        this.removeEventListener('focusout', this.stopListeningToKeyboard);
-        if (this.value && this.manageTabIndex) {
-            const selected = this.querySelector(`[value="${this.value}"]`);
-            if (selected) {
-                selected.tabIndex = 0;
-            }
-        }
-    }
-    handleKeydown(event) {
-        const { code } = event;
-        /* c8 ignore next */
-        if (code !== 'ArrowDown' && code !== 'ArrowUp') {
-            return;
-        }
-        event.preventDefault();
-        const direction = code === 'ArrowDown' ? 1 : -1;
-        this.focusItemByOffset(direction);
-    }
-    focusItemByOffset(direction) {
-        const items = [...this.querySelectorAll('sp-sidenav-item')];
-        const focused = items.indexOf(getActiveElement(this));
-        let next = focused;
-        next = (items.length + next + direction) % items.length;
-        let nextItem = items[next];
-        // cycle through the available items in the directions of the offset to find the next non-disabled item
-        while (nextItem && this.isDisabledChild(nextItem)) {
-            next = (items.length + next + direction) % items.length;
-            nextItem = items[next];
-        }
-        // if there are no non-disabled items, skip the work to focus a child
-        if (!nextItem || this.isDisabledChild(nextItem)) {
-            return;
-        }
-        nextItem.focus();
+        return this.rovingTabindexController.focusInElement || this;
     }
     isDisabledChild(child) {
         if (child.disabled) {
@@ -158,19 +109,11 @@ export class SideNav extends Focusable {
         return parent !== this;
     }
     handleSlotchange() {
-        this.manageTabIndexes();
-    }
-    async manageTabIndexes() {
-        if (!this.value && this.manageTabIndex) {
-            const managed = this.querySelector('sp-sidenav-item:not([tabindex])');
-            if (managed) {
-                managed.tabIndex = -1;
-            }
-            const first = this.querySelector('sp-sidenav-item');
-            if (first) {
-                await first.updateComplete;
-                first.tabIndex = 0;
-            }
+        if (this.manageTabIndex) {
+            this.rovingTabindexController.manage();
+        }
+        else {
+            this.rovingTabindexController.unmanage();
         }
     }
     render() {
@@ -189,15 +132,16 @@ export class SideNav extends Focusable {
         if (selectedChild) {
             this.value = selectedChild.value;
         }
-        else {
-            this.manageTabIndexes();
-        }
     }
     updated(changes) {
         super.updated(changes);
         if (changes.has('manageTabIndex')) {
-            const items = [...this.querySelectorAll('sp-sidenav-item')];
-            items.map((item) => (item.manageTabIndex = this.manageTabIndex));
+            if (this.manageTabIndex) {
+                this.rovingTabindexController.manage();
+            }
+            else {
+                this.rovingTabindexController.unmanage();
+            }
         }
     }
 }

package/src/Sidenav.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Sidenav.js","sourceRoot":"","sources":["Sidenav.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;;AAEF,OAAO,EAEH,IAAI,GAGP,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,iDAAiD,CAAC;AAE3E,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAC9E,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAMrD;;;;;;GAMG;AACH,MAAM,OAAO,OAAQ,SAAQ,SAAS;IA8ClC;QACI,KAAK,EAAE,CAAC;QA1CJ,UAAK,GAAG,IAAI,GAAG,EAAe,CAAC;QAWhC,mBAAc,GAAG,KAAK,CAAC;QAGvB,UAAK,GAAuB,SAAS,CAAC;QA6BzC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,wBAAwB,CAAC,CAAC;IACpE,CAAC;IAhDM,MAAM,KAAK,MAAM;QACpB,OAAO,CAAC,aAAa,CAAC,CAAC;IAC3B,CAAC;IAIM,6BAA6B,CAAC,IAAiB;QAClD,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC;IAEM,4BAA4B,CAAC,IAAiB;QACjD,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;IAQO,YAAY,CAChB,KAAiE;QAEjE,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE;YACnC,OAAO;SACV;QACD,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC;QAC5B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QAChC,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,CACnC,IAAI,KAAK,CAAC,QAAQ,EAAE;YAChB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,UAAU,EAAE,IAAI;SACnB,CAAC,CACL,CAAC;QACF,IAAI,CAAC,YAAY,EAAE;YACf,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;YACtB,KAAK,CAAC,MAAM,CAAC,QAAQ,GAAG,KAAK,CAAC;YAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;SAC1B;aAAM;YACH,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC;SACjE;IACL,CAAC;IAOM,KAAK;QACR,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,EAAE;YAC5B,OAAO;SACV;QAED,KAAK,CAAC,KAAK,EAAE,CAAC;IAClB,CAAC;IAEM,IAAI;QACP,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,EAAE;YAC5B,OAAO;SACV;QAED,KAAK,CAAC,IAAI,EAAE,CAAC;IACjB,CAAC;IAEM,KAAK;QACR,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,EAAE;YAC5B,OAAO;SACV;QAED,KAAK,CAAC,KAAK,EAAE,CAAC;IAClB,CAAC;IAED,IAAW,YAAY;QACnB,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,YAAY,CAAgB,CAAC;QACjE,IAAI,QAAQ,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,EAAE;YAC7C,OAAO,QAAQ,CAAC;SACnB;QACD,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,CAAC;QAC5D,IAAI,KAAK,GAAG,CAAC,CAAC;QACd,OACI,KAAK,GAAG,KAAK,CAAC,MAAM;YACpB,KAAK,CAAC,KAAK,CAAC;YACZ,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EACpC;YACE,KAAK,IAAI,CAAC,CAAC;SACd;QACD,IAAI,KAAK,CAAC,KAAK,CAAC,EAAE;YACd,OAAO,KAAK,CAAC,KAAK,CAAC,CAAC;SACvB;QACD,oBAAoB;QACpB,OAAO,IAAI,CAAC;IAChB,CAAC;IAEO,wBAAwB;QAC5B,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACrD,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;QAChE,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,cAAc,EAAE;YACnC,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,CAC/B,WAAW,IAAI,CAAC,KAAK,IAAI,CACb,CAAC;YACjB,IAAI,QAAQ,EAAE;gBACV,QAAQ,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;aAC1B;SACJ;IACL,CAAC;IAEO,uBAAuB;QAC3B,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACxD,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;QACnE,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,cAAc,EAAE;YACnC,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,CAC/B,WAAW,IAAI,CAAC,KAAK,IAAI,CACb,CAAC;YACjB,IAAI,QAAQ,EAAE;gBACV,QAAQ,CAAC,QAAQ,GAAG,CAAC,CAAC;aACzB;SACJ;IACL,CAAC;IAEO,aAAa,CAAC,KAAoB;QACtC,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;QACvB,oBAAoB;QACpB,IAAI,IAAI,KAAK,WAAW,IAAI,IAAI,KAAK,SAAS,EAAE;YAC5C,OAAO;SACV;QACD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,MAAM,SAAS,GAAG,IAAI,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAChD,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACtC,CAAC;IAEO,iBAAiB,CAAC,SAAiB;QACvC,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,CAAC;QAC5D,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,IAAI,CAAgB,CAAC,CAAC;QACrE,IAAI,IAAI,GAAG,OAAO,CAAC;QACnB,IAAI,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC;QACxD,IAAI,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;QAC3B,uGAAuG;QACvG,OAAO,QAAQ,IAAI,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,EAAE;YAC/C,IAAI,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC;YACxD,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;SAC1B;QACD,qEAAqE;QACrE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,EAAE;YAC7C,OAAO;SACV;QACD,QAAQ,CAAC,KAAK,EAAE,CAAC;IACrB,CAAC;IAEO,eAAe,CAAC,KAAkB;QACtC,IAAI,KAAK,CAAC,QAAQ,EAAE;YAChB,OAAO,IAAI,CAAC;SACf;QACD,IAAI,MAAM,GAAG,KAAK,CAAC,aAGC,CAAC;QACrB,OACI,MAAM,YAAY,cAAc;YAChC,CAAC,CAAE,MAAsB,CAAC,QAAQ;gBAC9B,MAAM,YAAY,WAAW;gBAC7B,MAAM,CAAC,QAAQ,CAAC,EACtB;YACE,MAAM,GAAG,MAAM,CAAC,aAGI,CAAC;SACxB;QACD,OAAO,MAAM,KAAK,IAAI,CAAC;IAC3B,CAAC;IAEO,gBAAgB;QACpB,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC5B,CAAC;IAEO,KAAK,CAAC,gBAAgB;QAC1B,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,cAAc,EAAE;YACpC,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAC9B,iCAAiC,CACrB,CAAC;YACjB,IAAI,OAAO,EAAE;gBACT,OAAO,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;aACzB;YACD,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;YACpD,IAAI,KAAK,EAAE;gBACP,MAAM,KAAK,CAAC,cAAc,CAAC;gBAC3B,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC;aACtB;SACJ;IACL,CAAC;IAES,MAAM;QACZ,OAAO,IAAI,CAAA;mCACgB,IAAI,CAAC,YAAY;;;kCAGlB,IAAI,CAAC,gBAAgB;;;SAG9C,CAAC;IACN,CAAC;IAES,YAAY,CAAC,OAAuB;QAC1C,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAC5B,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,YAAY,CAAgB,CAAC;QACtE,IAAI,aAAa,EAAE;YACf,IAAI,CAAC,KAAK,GAAG,aAAa,CAAC,KAAK,CAAC;SACpC;aAAM;YACH,IAAI,CAAC,gBAAgB,EAAE,CAAC;SAC3B;IACL,CAAC;IAES,OAAO,CAAC,OAAuB;QACrC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,EAAE;YAC/B,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,CAAC;YAC5D,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;SACpE;IACL,CAAC;CACJ;AA7MG;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;+CAC5C;AAG9B;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCACiB","sourcesContent":["/\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport sidenavStyles from './sidenav.css.js';\nimport { Focusable, getActiveElement } from '@spectrum-web-components/shared';\nimport { SideNavItem } from './SidenavItem.js';\nimport { SideNavHeading } from './SidenavHeading.js';\n\nexport interface SidenavSelectDetail {\n value: string;\n}\n\n/*\n @element sp-sidenav\n \n @slot - the Sidenav Items to display\n * @fires change - Announces a change in the `value` property of the navigation element.\n * This change can be \"canceled\" via `event.preventDefault()`.\n /\nexport class SideNav extends Focusable {\n public static get styles(): CSSResultArray {\n return [sidenavStyles];\n }\n\n private items = new Set<SideNavItem>();\n\n public startTrackingSelectionForItem(item: SideNavItem): void {\n this.items.add(item);\n }\n\n public stopTrackingSelectionForItem(item: SideNavItem): void {\n this.items.delete(item);\n }\n\n @property({ type: Boolean, reflect: true, attribute: 'manage-tab-index' })\n public manageTabIndex = false;\n\n @property({ reflect: true })\n public value: string \| undefined = undefined;\n\n private handleSelect(\n event: CustomEvent<SidenavSelectDetail> & { target: SideNavItem }\n ): void {\n event.stopPropagation();\n if (this.value === event.detail.value) {\n return;\n }\n const oldValue = this.value;\n this.value = event.detail.value;\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n if (!applyDefault) {\n this.value = oldValue;\n event.target.selected = false;\n event.preventDefault();\n } else {\n this.items.forEach((item) => item.handleSideNavSelect(event));\n }\n }\n\n public constructor() {\n super();\n this.addEventListener('focusin', this.startListeningToKeyboard);\n }\n\n public focus(): void {\n if (this.focusElement === this) {\n return;\n }\n\n super.focus();\n }\n\n public blur(): void {\n if (this.focusElement === this) {\n return;\n }\n\n super.blur();\n }\n\n public click(): void {\n if (this.focusElement === this) {\n return;\n }\n\n super.click();\n }\n\n public get focusElement(): SideNavItem \| SideNav {\n const selected = this.querySelector('[selected]') as SideNavItem;\n if (selected && !this.isDisabledChild(selected)) {\n return selected;\n }\n const items = [...this.querySelectorAll('sp-sidenav-item')];\n let index = 0;\n while (\n index < items.length &&\n items[index] &&\n this.isDisabledChild(items[index])\n ) {\n index += 1;\n }\n if (items[index]) {\n return items[index];\n }\n / c8 ignore next /\n return this;\n }\n\n private startListeningToKeyboard(): void {\n this.addEventListener('keydown', this.handleKeydown);\n this.addEventListener('focusout', this.stopListeningToKeyboard);\n if (this.value && this.manageTabIndex) {\n const selected = this.querySelector(\n `[value=\"${this.value}\"]`\n ) as SideNavItem;\n if (selected) {\n selected.tabIndex = -1;\n }\n }\n }\n\n private stopListeningToKeyboard(): void {\n this.removeEventListener('keydown', this.handleKeydown);\n this.removeEventListener('focusout', this.stopListeningToKeyboard);\n if (this.value && this.manageTabIndex) {\n const selected = this.querySelector(\n `[value=\"${this.value}\"]`\n ) as SideNavItem;\n if (selected) {\n selected.tabIndex = 0;\n }\n }\n }\n\n private handleKeydown(event: KeyboardEvent): void {\n const { code } = event;\n / c8 ignore next */\n if (code !== 'ArrowDown' && code !== 'ArrowUp') {\n return;\n }\n event.preventDefault();\n const direction = code === 'ArrowDown' ? 1 : -1;\n this.focusItemByOffset(direction);\n }\n\n private focusItemByOffset(direction: number): void {\n const items = [...this.querySelectorAll('sp-sidenav-item')];\n const focused = items.indexOf(getActiveElement(this) as SideNavItem);\n let next = focused;\n next = (items.length + next + direction) % items.length;\n let nextItem = items[next];\n // cycle through the available items in the directions of the offset to find the next non-disabled item\n while (nextItem && this.isDisabledChild(nextItem)) {\n next = (items.length + next + direction) % items.length;\n nextItem = items[next];\n }\n // if there are no non-disabled items, skip the work to focus a child\n if (!nextItem \|\| this.isDisabledChild(nextItem)) {\n return;\n }\n nextItem.focus();\n }\n\n private isDisabledChild(child: SideNavItem): boolean {\n if (child.disabled) {\n return true;\n }\n let parent = child.parentElement as\n \| SideNavItem\n \| SideNav\n \| SideNavHeading;\n while (\n parent instanceof SideNavHeading \|\|\n (!(parent as SideNavItem).disabled &&\n parent instanceof SideNavItem &&\n parent.expanded)\n ) {\n parent = parent.parentElement as\n \| SideNavItem\n \| SideNav\n \| SideNavHeading;\n }\n return parent !== this;\n }\n\n private handleSlotchange(): void {\n this.manageTabIndexes();\n }\n\n private async manageTabIndexes(): Promise<void> {\n if (!this.value && this.manageTabIndex) {\n const managed = this.querySelector(\n 'sp-sidenav-item:not([tabindex])'\n ) as SideNavItem;\n if (managed) {\n managed.tabIndex = -1;\n }\n const first = this.querySelector('sp-sidenav-item');\n if (first) {\n await first.updateComplete;\n first.tabIndex = 0;\n }\n }\n }\n\n protected render(): TemplateResult {\n return html`\n <nav @sidenav-select=${this.handleSelect}>\n <slot\n name=\"descendant\"\n @slotchange=${this.handleSlotchange}\n ></slot>\n </nav>\n `;\n }\n\n protected firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n const selectedChild = this.querySelector('[selected]') as SideNavItem;\n if (selectedChild) {\n this.value = selectedChild.value;\n } else {\n this.manageTabIndexes();\n }\n }\n\n protected updated(changes: PropertyValues): void {\n super.updated(changes);\n if (changes.has('manageTabIndex')) {\n const items = [...this.querySelectorAll('sp-sidenav-item')];\n items.map((item) => (item.manageTabIndex = this.manageTabIndex));\n }\n }\n}\n\ndeclare global {\n interface GlobalEventHandlersEventMap {\n 'sp-sidenav:select': CustomEvent<SidenavSelectDetail>;\n }\n}\n"]}
1	+ {"version":3,"file":"Sidenav.js","sourceRoot":"","sources":["Sidenav.ts"],"names":[],"mappings":"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","sourcesContent":["/\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';\n\nimport sidenavStyles from './sidenav.css.js';\nimport { Focusable } from '@spectrum-web-components/shared';\nimport { SideNavItem } from './SidenavItem.js';\nimport { SideNavHeading } from './SidenavHeading.js';\n\nexport interface SidenavSelectDetail {\n value: string;\n}\n\n/*\n @element sp-sidenav\n \n @slot - the Sidenav Items to display\n * @fires change - Announces a change in the `value` property of the navigation element.\n * This change can be \"canceled\" via `event.preventDefault()`.\n */\nexport class SideNav extends Focusable {\n public static get styles(): CSSResultArray {\n return [sidenavStyles];\n }\n\n private items = new Set<SideNavItem>();\n\n public startTrackingSelectionForItem(item: SideNavItem): void {\n this.items.add(item);\n this.rovingTabindexController.clearElementCache();\n }\n\n public stopTrackingSelectionForItem(item: SideNavItem): void {\n this.items.delete(item);\n this.rovingTabindexController.clearElementCache();\n }\n\n rovingTabindexController = new RovingTabindexController<SideNavItem>(this, {\n focusInIndex: (elements: SideNavItem[]) => {\n return elements.findIndex((el) => {\n return this.value\n ? !el.disabled &&\n !this.isDisabledChild(el) &&\n el.value === this.value\n : !el.disabled && !this.isDisabledChild(el);\n });\n },\n direction: 'vertical',\n elements: () => [...this.querySelectorAll('sp-sidenav-item')],\n isFocusableElement: (el: SideNavItem) =>\n !el.disabled && !this.isDisabledChild(el),\n });\n\n @property({ type: Boolean, reflect: true, attribute: 'manage-tab-index' })\n public manageTabIndex = false;\n\n @property({ reflect: true })\n public value: string \| undefined = undefined;\n\n private handleSelect(\n event: CustomEvent<SidenavSelectDetail> & { target: SideNavItem }\n ): void {\n event.stopPropagation();\n if (this.value === event.detail.value) {\n return;\n }\n const oldValue = this.value;\n this.value = event.detail.value;\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n if (!applyDefault) {\n this.value = oldValue;\n event.target.selected = false;\n event.preventDefault();\n } else {\n this.items.forEach((item) => item.handleSideNavSelect(event));\n }\n }\n\n public focus(): void {\n this.rovingTabindexController.focus();\n }\n\n public blur(): void {\n if (this.focusElement === this) {\n return;\n }\n\n super.blur();\n }\n\n public click(): void {\n if (this.focusElement === this) {\n return;\n }\n\n super.click();\n }\n\n public get focusElement(): SideNavItem \| SideNav {\n return this.rovingTabindexController.focusInElement \|\| this;\n }\n\n private isDisabledChild(child: SideNavItem): boolean {\n if (child.disabled) {\n return true;\n }\n let parent = child.parentElement as\n \| SideNavItem\n \| SideNav\n \| SideNavHeading;\n while (\n parent instanceof SideNavHeading \|\|\n (!(parent as SideNavItem).disabled &&\n parent instanceof SideNavItem &&\n parent.expanded)\n ) {\n parent = parent.parentElement as\n \| SideNavItem\n \| SideNav\n \| SideNavHeading;\n }\n return parent !== this;\n }\n\n private handleSlotchange(): void {\n if (this.manageTabIndex) {\n this.rovingTabindexController.manage();\n } else {\n this.rovingTabindexController.unmanage();\n }\n }\n\n protected render(): TemplateResult {\n return html`\n <nav @sidenav-select=${this.handleSelect}>\n <slot\n name=\"descendant\"\n @slotchange=${this.handleSlotchange}\n ></slot>\n </nav>\n `;\n }\n\n protected firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n const selectedChild = this.querySelector('[selected]') as SideNavItem;\n if (selectedChild) {\n this.value = selectedChild.value;\n }\n }\n\n protected updated(changes: PropertyValues): void {\n super.updated(changes);\n if (changes.has('manageTabIndex')) {\n if (this.manageTabIndex) {\n this.rovingTabindexController.manage();\n } else {\n this.rovingTabindexController.unmanage();\n }\n }\n }\n}\n\ndeclare global {\n interface GlobalEventHandlersEventMap {\n 'sp-sidenav:select': CustomEvent<SidenavSelectDetail>;\n }\n}\n"]}

package/src/SidenavItem.d.ts CHANGED Viewed

@@ -13,7 +13,6 @@ declare const SideNavItem_base: typeof Focusable & {
 export declare class SideNavItem extends SideNavItem_base {
     static get styles(): CSSResultArray;
     value: string | undefined;
-    manageTabIndex: boolean;
     selected: boolean;
     expanded: boolean;
     protected get parentSideNav(): SideNav | undefined;

package/src/SidenavItem.js CHANGED Viewed

@@ -25,7 +25,6 @@ export class SideNavItem extends LikeAnchor(Focusable) {
     constructor() {
         super(...arguments);
         this.value = undefined;
-        this.manageTabIndex = false;
         this.selected = false;
         this.expanded = false;
     }
@@ -113,9 +112,8 @@ export class SideNavItem extends LikeAnchor(Focusable) {
         `;
     }
     updated(changes) {
-        if (changes.has('selected') || changes.has('manageTabIndex')) {
-            const tabIndexForSelectedState = this.selected ? 0 : -1;
-            this.tabIndex = this.manageTabIndex ? tabIndexForSelectedState : 0;
+        if (this.hasChildren && this.expanded && !this.selected) {
+            this.focusElement.tabIndex = -1;
         }
         super.updated(changes);
     }
@@ -131,7 +129,6 @@ export class SideNavItem extends LikeAnchor(Focusable) {
         const parentSideNav = this.parentSideNav;
         if (parentSideNav) {
             await parentSideNav.updateComplete;
-            this.manageTabIndex = parentSideNav.manageTabIndex;
             parentSideNav.startTrackingSelectionForItem(this);
             this.selected =
                 this.value != null && this.value === parentSideNav.value;
@@ -148,9 +145,6 @@ export class SideNavItem extends LikeAnchor(Focusable) {
 __decorate([
     property()
 ], SideNavItem.prototype, "value", void 0);
-__decorate([
-    property({ type: Boolean, attribute: false })
-], SideNavItem.prototype, "manageTabIndex", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SideNavItem.prototype, "selected", void 0);

package/src/SidenavItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SidenavItem.js","sourceRoot":"","sources":["SidenavItem.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;;AAEF,OAAO,EAEH,IAAI,GAGP,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,iDAAiD,CAAC;AAC3E,OAAO,EAAE,SAAS,EAAE,MAAM,iDAAiD,CAAC;AAC5E,OAAO,EAAE,UAAU,EAAE,MAAM,oDAAoD,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,MAAM,kDAAkD,CAAC;AAI7E,OAAO,iBAAiB,MAAM,uBAAuB,CAAC;AAEtD;;;;GAIG;AACH,MAAM,OAAO,WAAY,SAAQ,UAAU,CAAC,SAAS,CAAC;IAAtD;;QAMW,UAAK,GAAuB,SAAS,CAAC;QAGtC,~~mBAAc,GAAG,KAAK,CAAC;QAGvB,~~aAAQ,GAAG,KAAK,CAAC;QAGjB,aAAQ,GAAG,KAAK,CAAC;~~IAuI5B~~,CAAC;~~IArJU~~,MAAM,KAAK,MAAM;QACpB,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAC/B,CAAC;~~IAcD~~,IAAc,aAAa;QACvB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;YACtB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,CAEhC,CAAC;SACnB;QACD,OAAO,IAAI,CAAC,cAAc,CAAC;IAC/B,CAAC;IAID,IAAc,WAAW;QACrB,OAAO,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACnD,CAAC;IAED,IAAc,KAAK;QACf,IAAI,KAAK,GAAG,CAAC,CAAC;QACd,IAAI,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC;QACjC,OAAO,OAAO,YAAY,WAAW,EAAE;YACnC,KAAK,EAAE,CAAC;YACR,OAAO,GAAG,OAAO,CAAC,aAAa,CAAC;SACnC;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;IAEM,mBAAmB,CAAC,KAAY;QACnC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC;IAC1C,CAAC;IAES,WAAW,CAAC,KAAa;QAC/B,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,KAAK,EAAE;YACrB,KAAK,CAAC,cAAc,EAAE,CAAC;SAC1B;QACD,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAChB,IAAI,IAAI,CAAC,WAAW,EAAE;gBAClB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;aAClC;iBAAM,IAAI,IAAI,CAAC,KAAK,EAAE;gBACnB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;aACrC;SACJ;IACL,CAAC;IAEO,gBAAgB,CAAC,KAAa;QAClC,MAAM,YAAY,GAAwB;YACtC,KAAK;SACR,CAAC;QAEF,MAAM,cAAc,GAAG,IAAI,WAAW,CAAC,gBAAgB,EAAE;YACrD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,YAAY;SACvB,CAAC,CAAC;QAEH,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IACvC,CAAC;IAEM,KAAK;QACR,IAAI,CAAC,WAAW,EAAE,CAAC;IACvB,CAAC;IAED,IAAW,YAAY;QACnB,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAgB,CAAC;IACtE,CAAC;IAES,MAAM,CAAC,OAAuB;QACpC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;YAC5B,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC;SAC5B;QACD,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAC1B,CAAC;IAES,MAAM;QACZ,OAAO,IAAI,CAAA;;uBAEI,IAAI,CAAC,IAAI,IAAI,GAAG;yBACd,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC;2BACpB,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;sBAC7B,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;8BACX,IAAI,CAAC,KAAK;0BACd,IAAI,CAAC,WAAW;;+BAEX,SAAS,CACpB,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAClD;;;kBAGC,IAAI,CAAC,KAAK;;;cAGd,IAAI,CAAC,QAAQ;YACX,CAAC,CAAC,IAAI,CAAA;;mBAEH;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;SACf,CAAC;IACN,CAAC;IAES,OAAO,CAAC,OAAuB;QACrC,IAAI,~~OAAO~~,CAAC,~~GAAG~~,~~CAAC,UAAU,CAAC,~~IAAI,~~OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,EAAE;YAC1D,MAAM,wBAAwB,GAAG,~~IAAI,CAAC,QAAQ,~~CAAC~~,CAAC,~~CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACxD,~~IAAI,CAAC,QAAQ,~~GAAG~~,IAAI,CAAC,~~cAAc~~,CAAC,~~CAAC~~,~~CAAC~~,~~wBAAwB,~~CAAC,CAAC,CAAC~~,CAAC,CAAC~~;~~SACtE~~;QACD,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAC3B,CAAC;IAEM,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,sBAAsB,EAAE,CAAC;IAClC,CAAC;IAEM,oBAAoB;QACvB,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC7B,KAAK,CAAC,oBAAoB,EAAE,CAAC;IACjC,CAAC;IAEO,KAAK,CAAC,sBAAsB;QAChC,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;QACzC,IAAI,aAAa,EAAE;YACf,MAAM,aAAa,CAAC,cAAc,CAAC;YACnC,~~IAAI,CAAC,cAAc,GAAG,~~aAAa,CAAC,~~cAAc,CAAC;YACnD,aAAa,CAAC,~~6BAA6B,CAAC,IAAI,CAAC,CAAC;YAClD,IAAI,CAAC,QAAQ;gBACT,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,aAAa,CAAC,KAAK,CAAC;SAChE;IACL,CAAC;IAEO,qBAAqB;QACzB,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;QACzC,IAAI,aAAa,EAAE;YACf,aAAa,CAAC,4BAA4B,CAAC,IAAI,CAAC,CAAC;SACpD;QACD,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;IACpC,CAAC;CACJ;~~AAhJG~~;IADC,QAAQ,EAAE;0CACkC;AAG7C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,~~SAAS,EAAE,KAAK,EAAE,CAAC;mDAChB;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,~~OAAO,EAAE,~~OAAO,EAAE,~~IAAI,EAAE,CAAC;6CACnB;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACnB","sourcesContent":["/\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\n\nimport { SideNav, SidenavSelectDetail } from './Sidenav.js';\n\nimport sidenavItemStyles from './sidenav-item.css.js';\n\n/*\n @element sp-sidenav-item\n \n @slot - the Sidenav Items to display as children of this item\n */\nexport class SideNavItem extends LikeAnchor(Focusable) {\n public static get styles(): CSSResultArray {\n return [sidenavItemStyles];\n }\n\n @property()\n public value: string \| undefined = undefined;\n\n @property({ type: Boolean, ~~attribute: false })\n public manageTabIndex = false;\n\n @property({ type: Boolean,~~ reflect: true })\n public selected = false;\n\n @property({ type: Boolean, reflect: true })\n public expanded = false;\n\n protected get parentSideNav(): SideNav \| undefined {\n if (!this._parentSidenav) {\n this._parentSidenav = this.closest('sp-sidenav') as\n \| SideNav\n \| undefined;\n }\n return this._parentSidenav;\n }\n\n protected _parentSidenav?: SideNav;\n\n protected get hasChildren(): boolean {\n return !!this.querySelector('sp-sidenav-item');\n }\n\n protected get depth(): number {\n let depth = 0;\n let element = this.parentElement;\n while (element instanceof SideNavItem) {\n depth++;\n element = element.parentElement;\n }\n return depth;\n }\n\n public handleSideNavSelect(event: Event): void {\n this.selected = event.target === this;\n }\n\n protected handleClick(event?: Event): void {\n if (!this.href && event) {\n event.preventDefault();\n }\n if (!this.disabled) {\n if (this.hasChildren) {\n this.expanded = !this.expanded;\n } else if (this.value) {\n this.announceSelected(this.value);\n }\n }\n }\n\n private announceSelected(value: string): void {\n const selectDetail: SidenavSelectDetail = {\n value,\n };\n\n const selectionEvent = new CustomEvent('sidenav-select', {\n bubbles: true,\n composed: true,\n detail: selectDetail,\n });\n\n this.dispatchEvent(selectionEvent);\n }\n\n public click(): void {\n this.handleClick();\n }\n\n public get focusElement(): HTMLElement {\n return this.shadowRoot.querySelector('#item-link') as HTMLElement;\n }\n\n protected update(changes: PropertyValues): void {\n if (!this.hasAttribute('slot')) {\n this.slot = 'descendant';\n }\n super.update(changes);\n }\n\n protected render(): TemplateResult {\n return html`\n <a\n href=${this.href \|\| '#'}\n target=${ifDefined(this.target)}\n download=${ifDefined(this.download)}\n rel=${ifDefined(this.rel)}\n data-level=\"${this.depth}\"\n @click=\"${this.handleClick}\"\n id=\"item-link\"\n aria-current=${ifDefined(\n this.selected && this.href ? 'page' : undefined\n )}\n >\n <slot name=\"icon\"></slot>\n ${this.label}\n <slot></slot>\n </a>\n ${this.expanded\n ? html`\n <slot name=\"descendant\"></slot>\n `\n : html``}\n `;\n }\n\n protected updated(changes: PropertyValues): void {\n if (~~changes~~.~~has('selected')~~ \|\| ~~changes~~.~~has('manageTabIndex'))~~ ~~{\n const~~ ~~tabIndexForSelectedState =~~ this.selected ~~? 0 : -1;\~~n this.tabIndex = ~~this.manageTabIndex ? tabIndexForSelectedState : 0~~;\n }\n super.updated(changes);\n }\n\n public connectedCallback(): void {\n super.connectedCallback();\n this.startTrackingSelection();\n }\n\n public disconnectedCallback(): void {\n this.stopTrackingSelection();\n super.disconnectedCallback();\n }\n\n private async startTrackingSelection(): Promise<void> {\n const parentSideNav = this.parentSideNav;\n if (parentSideNav) {\n await parentSideNav.updateComplete;\n ~~this.manageTabIndex =~~ parentSideNav.~~manageTabIndex;\n parentSideNav.~~startTrackingSelectionForItem(this);\n this.selected =\n this.value != null && this.value === parentSideNav.value;\n }\n }\n\n private stopTrackingSelection(): void {\n const parentSideNav = this.parentSideNav;\n if (parentSideNav) {\n parentSideNav.stopTrackingSelectionForItem(this);\n }\n this._parentSidenav = undefined;\n }\n}\n"]}
1	+ {"version":3,"file":"SidenavItem.js","sourceRoot":"","sources":["SidenavItem.ts"],"names":[],"mappings":"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","sourcesContent":["/\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\n\nimport { SideNav, SidenavSelectDetail } from './Sidenav.js';\n\nimport sidenavItemStyles from './sidenav-item.css.js';\n\n/*\n @element sp-sidenav-item\n \n @slot - the Sidenav Items to display as children of this item\n */\nexport class SideNavItem extends LikeAnchor(Focusable) {\n public static get styles(): CSSResultArray {\n return [sidenavItemStyles];\n }\n\n @property()\n public value: string \| undefined = undefined;\n\n @property({ type: Boolean, reflect: true })\n public selected = false;\n\n @property({ type: Boolean, reflect: true })\n public expanded = false;\n\n protected get parentSideNav(): SideNav \| undefined {\n if (!this._parentSidenav) {\n this._parentSidenav = this.closest('sp-sidenav') as\n \| SideNav\n \| undefined;\n }\n return this._parentSidenav;\n }\n\n protected _parentSidenav?: SideNav;\n\n protected get hasChildren(): boolean {\n return !!this.querySelector('sp-sidenav-item');\n }\n\n protected get depth(): number {\n let depth = 0;\n let element = this.parentElement;\n while (element instanceof SideNavItem) {\n depth++;\n element = element.parentElement;\n }\n return depth;\n }\n\n public handleSideNavSelect(event: Event): void {\n this.selected = event.target === this;\n }\n\n protected handleClick(event?: Event): void {\n if (!this.href && event) {\n event.preventDefault();\n }\n if (!this.disabled) {\n if (this.hasChildren) {\n this.expanded = !this.expanded;\n } else if (this.value) {\n this.announceSelected(this.value);\n }\n }\n }\n\n private announceSelected(value: string): void {\n const selectDetail: SidenavSelectDetail = {\n value,\n };\n\n const selectionEvent = new CustomEvent('sidenav-select', {\n bubbles: true,\n composed: true,\n detail: selectDetail,\n });\n\n this.dispatchEvent(selectionEvent);\n }\n\n public click(): void {\n this.handleClick();\n }\n\n public get focusElement(): HTMLElement {\n return this.shadowRoot.querySelector('#item-link') as HTMLElement;\n }\n\n protected update(changes: PropertyValues): void {\n if (!this.hasAttribute('slot')) {\n this.slot = 'descendant';\n }\n super.update(changes);\n }\n\n protected render(): TemplateResult {\n return html`\n <a\n href=${this.href \|\| '#'}\n target=${ifDefined(this.target)}\n download=${ifDefined(this.download)}\n rel=${ifDefined(this.rel)}\n data-level=\"${this.depth}\"\n @click=\"${this.handleClick}\"\n id=\"item-link\"\n aria-current=${ifDefined(\n this.selected && this.href ? 'page' : undefined\n )}\n >\n <slot name=\"icon\"></slot>\n ${this.label}\n <slot></slot>\n </a>\n ${this.expanded\n ? html`\n <slot name=\"descendant\"></slot>\n `\n : html``}\n `;\n }\n\n protected updated(changes: PropertyValues): void {\n if (this.hasChildren && this.expanded && !this.selected) {\n this.focusElement.tabIndex = -1;\n }\n super.updated(changes);\n }\n\n public connectedCallback(): void {\n super.connectedCallback();\n this.startTrackingSelection();\n }\n\n public disconnectedCallback(): void {\n this.stopTrackingSelection();\n super.disconnectedCallback();\n }\n\n private async startTrackingSelection(): Promise<void> {\n const parentSideNav = this.parentSideNav;\n if (parentSideNav) {\n await parentSideNav.updateComplete;\n parentSideNav.startTrackingSelectionForItem(this);\n this.selected =\n this.value != null && this.value === parentSideNav.value;\n }\n }\n\n private stopTrackingSelection(): void {\n const parentSideNav = this.parentSideNav;\n if (parentSideNav) {\n parentSideNav.stopTrackingSelectionForItem(this);\n }\n this._parentSidenav = undefined;\n }\n}\n"]}