@cds/core 5.8.1 → 5.8.2

package/custom-elements.json

@@ -42254,17 +42254,6 @@
               "privacy": "protected",
               "description": "query for all groups (including any nested groups), used ot pass state down"
             },
-            {
-              "kind": "method",
-              "name": "toggle",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "currentActiveItem",
-              "privacy": "private",
-              "readonly": true
-            },
             {
               "kind": "field",
               "name": "endTemplate",
@@ -42277,6 +42266,18 @@
               "privacy": "protected",
               "readonly": true
             },
+            {
+              "kind": "method",
+              "name": "onStartItemSlotChange"
+            },
+            {
+              "kind": "method",
+              "name": "onItemSlotChange"
+            },
+            {
+              "kind": "method",
+              "name": "updateChildrenProps"
+            },
             {
               "kind": "field",
               "name": "visibleChildren",
@@ -42288,7 +42289,14 @@
             },
             {
               "kind": "method",
-              "name": "addStartEventListener"
+              "name": "toggle",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "currentActiveItem",
+              "privacy": "private",
+              "readonly": true
             },
             {
               "kind": "method",
@@ -42341,10 +42349,6 @@
                   }
                 }
               ]
-            },
-            {
-              "kind": "method",
-              "name": "updateChildrenProps"
             }
           ],
           "events": [
@@ -45599,7 +45603,16 @@
             {
               "kind": "method",
               "name": "setTrackWidth",
-              "privacy": "private"
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "val",
+                  "optional": true,
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
               "kind": "field",

package/internal/utils/global.js

@@ -1,2 +1,2 @@
-import{isBrowser as e}from"./environment.js";import{getAngularVersion as n,getAngularJSVersion as o,getReactVersion as t,getVueVersion as i}from"./framework.js";import{browserFeatures as s}from"./supports.js";import{LogService as r}from"../services/log.service.js";function w(){e()&&(window.CDS=window.CDS||{_version:[],_react:{version:void 0},_supports:s.supports,_isStateProxied:!1,_state:{focusTrapItems:[],i18nRegistry:{},elementRegistry:{},iconRegistry:{},motionRegistry:{}},environment:{production:!1},getDetails:a,logDetails:d},function(){var e;const n="5.8.1";window.CDS._version.indexOf(n)<0&&(window.CDS._version.push(n),null===(e=document.querySelector("body"))||void 0===e||e.setAttribute("cds-version",window.CDS._version.join(" "))),window.CDS._version.length>1&&r.warn("Running more than one version of Clarity can cause unexpected issues. Please ensure only one version is loaded.")}(),window.CDS._isStateProxied||(window.CDS._isStateProxied=!0,window.CDS._state=new Proxy(window.CDS._state,{set:(e,n,o)=>{const t={key:n,prev:window.CDS._state[n],current:o};return e[n]=o,document.dispatchEvent(new CustomEvent("CDS_STATE_UPDATE",{detail:t})),!0}})))}function a(){return{versions:window.CDS._version,environment:window.CDS.environment,userAgent:navigator.userAgent,supports:window.CDS._supports,angularVersion:n(!1),angularJSVersion:o(!1),reactVersion:t(!1),vueVersion:i(!1),state:{...window.CDS._state,iconRegistry:Object.keys(window.CDS._state.iconRegistry),motionRegistry:Object.keys(window.CDS._state.motionRegistry),focusTrapRegistry:Object.keys(window.CDS._state.focusTrapItems.map((e=>e.focusTrapId)))}}}function d(){r.log(JSON.stringify(a(),null,2))}export{w as setupCDSGlobal};
+import{isBrowser as e}from"./environment.js";import{getAngularVersion as n,getAngularJSVersion as o,getReactVersion as t,getVueVersion as i}from"./framework.js";import{browserFeatures as s}from"./supports.js";import{LogService as r}from"../services/log.service.js";function w(){e()&&(window.CDS=window.CDS||{_version:[],_react:{version:void 0},_supports:s.supports,_isStateProxied:!1,_state:{focusTrapItems:[],i18nRegistry:{},elementRegistry:{},iconRegistry:{},motionRegistry:{}},environment:{production:!1},getDetails:a,logDetails:d},function(){var e;const n="5.8.2";window.CDS._version.indexOf(n)<0&&(window.CDS._version.push(n),null===(e=document.querySelector("body"))||void 0===e||e.setAttribute("cds-version",window.CDS._version.join(" "))),window.CDS._version.length>1&&r.warn("Running more than one version of Clarity can cause unexpected issues. Please ensure only one version is loaded.")}(),window.CDS._isStateProxied||(window.CDS._isStateProxied=!0,window.CDS._state=new Proxy(window.CDS._state,{set:(e,n,o)=>{const t={key:n,prev:window.CDS._state[n],current:o};return e[n]=o,document.dispatchEvent(new CustomEvent("CDS_STATE_UPDATE",{detail:t})),!0}})))}function a(){return{versions:window.CDS._version,environment:window.CDS.environment,userAgent:navigator.userAgent,supports:window.CDS._supports,angularVersion:n(!1),angularJSVersion:o(!1),reactVersion:t(!1),vueVersion:i(!1),state:{...window.CDS._state,iconRegistry:Object.keys(window.CDS._state.iconRegistry),motionRegistry:Object.keys(window.CDS._state.motionRegistry),focusTrapRegistry:Object.keys(window.CDS._state.focusTrapItems.map((e=>e.focusTrapId)))}}}function d(){r.log(JSON.stringify(a(),null,2))}export{w as setupCDSGlobal};
 //# sourceMappingURL=global.js.map

package/navigation/navigation.element.d.ts

@@ -103,13 +103,20 @@ export declare class CdsNavigation extends LitElement implements Animatable {
      * query for all groups (including any nested groups), used ot pass state down
      */
     protected navigationGroupRefs: NodeListOf<CdsNavigationGroup>;
-    private toggle;
-    private get currentActiveItem();
+    static get styles(): import("lit").CSSResultGroup[];
     protected get endTemplate(): "" | import("lit-html").TemplateResult<1>;
     protected get startTemplate(): string | import("lit-html").TemplateResult<1>;
-    protected get visibleChildren(): FocusableElement[];
-    addStartEventListener(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     firstUpdated(props: PropertyValues): void;
+    updated(props: PropertyValues<this>): void;
+    onStartItemSlotChange(): void;
+    onItemSlotChange(): void;
+    updateChildrenProps(): void;
+    protected get visibleChildren(): FocusableElement[];
+    private toggle;
+    private get currentActiveItem();
     private blurItemKeys;
     private focusRootStart;
     private blurRootStart;
@@ -117,10 +124,4 @@ export declare class CdsNavigation extends LitElement implements Animatable {
     private get focusableElements();
     private handleItemKeys;
     private handleRootStartKeys;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    render(): import("lit-html").TemplateResult<1>;
-    updated(props: PropertyValues<this>): void;
-    updateChildrenProps(): void;
-    static get styles(): import("lit").CSSResultGroup[];
 }

package/navigation/navigation.element.js

@@ -1,2 +1,2 @@
-import{__decorate as t}from"tslib";import{LitElement as i,html as e}from"lit";import{I18nService as a,isVisible as n,setAttributes as o,onKey as s,syncPropsForAllItems as r,syncProps as d,baseStyles as v,property as c,event as l,state as h,i18n as p,querySlot as u,querySlotAll as g,animate as m,reverseAnimation as f}from"@cds/core/internal";import y from"./navigation.element.scss.js";import{removeFocus as I,setFocus as A,visibleElement as b,getNextFocusElement as E,getPreviousFocusElement as S}from"./utils/index.js";import{AnimationNavigationOpenName as x}from"../internal/motion/animations/cds-navigation-open.js";const N="cds-navigation";let R=class extends i{constructor(){super(...arguments);this.expandedRoot=!1,this.cdsMotion="on",this.groupItem=!0,this.expanded=!1,this.i18n=a.keys.navigation}toggle(){this.expandedChange.emit(!this.expanded)}get currentActiveItem(){return this.visibleChildren.find((t=>t.id===this.ariaActiveDescendant))}get endTemplate(){return this.navigationEnd?e`<div class="navigation-end" cds-layout="vertical align:horizontal-stretch"><slot name="cds-navigation-end"></slot></div>`:""}get startTemplate(){let t;return t=this.rootNavigationStart?e`<div class="navigation-start" cds-layout="vertical align:horizontal-stretch"><slot @slotchange="${()=>this.addStartEventListener()}" name="navigation-start"></slot><cds-divider class="start-divider"></cds-divider></div>`:"",t}get visibleChildren(){return Array.from(this.allNavigationElements).filter((t=>n(t)))}addStartEventListener(){this.rootNavigationStart&&this.rootNavigationStart.addEventListener("click",this.toggle.bind(this))}firstUpdated(t){var i;super.firstUpdated(t),this.allNavigationElements.forEach((t=>{o(t,["tabindex","-1"])}));const e=null===(i=this.shadowRoot)||void 0===i?void 0:i.querySelector("#item-container");null==e||e.addEventListener("focus",this.initItemKeys.bind(this)),null==e||e.addEventListener("keydown",this.handleItemKeys.bind(this)),null==e||e.addEventListener("blur",this.blurItemKeys.bind(this))}blurItemKeys(){this.currentActiveItem&&I(this.currentActiveItem)}focusRootStart(){this.rootNavigationStart&&A(this.rootNavigationStart)}blurRootStart(){this.rootNavigationStart&&I(this.rootNavigationStart)}initItemKeys(){if(this.currentActiveItem){const t=this.currentActiveItem?this.currentActiveItem:this.allNavigationElements[0];A(t),this.ariaActiveDescendant=t.id}else A(this.focusableElements[0]),this.ariaActiveDescendant=this.focusableElements[0].id}get focusableElements(){return Array.from(this.allNavigationElements).filter(b)}handleItemKeys(t){s("arrow-down",t,(()=>{if(this.currentActiveItem){I(this.currentActiveItem);const i=E(this.currentActiveItem,this.focusableElements);this.ariaActiveDescendant=i.id,A(i),t.preventDefault()}})),s("arrow-up",t,(()=>{if(this.currentActiveItem){I(this.currentActiveItem);const i=S(this.currentActiveItem,this.focusableElements);this.ariaActiveDescendant=i.id,A(i),t.preventDefault()}})),s("arrow-right",t,(()=>{var t;const i=null===(t=this.currentActiveItem)||void 0===t?void 0:t.closest("cds-navigation-group");!i||i.expanded||i.expandedChange.emit(!i.expanded)})),s("arrow-left",t,(()=>{var t,i,e;const a=null===(t=this.currentActiveItem)||void 0===t?void 0:t.closest("cds-navigation-group");if("CDS-NAVIGATION-ITEM"===(null===(i=this.currentActiveItem)||void 0===i?void 0:i.tagName)&&a){const t=null==a?void 0:a.querySelector("cds-navigation-start");return I(this.currentActiveItem),this.ariaActiveDescendant=null!==(e=null==t?void 0:t.id)&&void 0!==e?e:null,void A(t)}a&&a.expanded&&a.expandedChange.emit(!a.expanded)})),s("home",t,(()=>{if(this.currentActiveItem){I(this.currentActiveItem);const t=this.focusableElements[0];this.ariaActiveDescendant=t.id,A(t)}})),s("end",t,(()=>{if(this.currentActiveItem){I(this.currentActiveItem);const t=this.focusableElements[this.focusableElements.length-1];this.ariaActiveDescendant=t.id,A(t)}})),s("enter",t,(()=>{var t,i;(null===(t=this.currentActiveItem)||void 0===t?void 0:t.focusElement)&&(null===(i=this.currentActiveItem)||void 0===i||i.focusElement.click())})),s("space",t,(()=>{var t,i;(null===(t=this.currentActiveItem)||void 0===t?void 0:t.focusElement)&&(null===(i=this.currentActiveItem)||void 0===i||i.focusElement.click())}))}handleRootStartKeys(t){s("arrow-right",t,(()=>{this.expanded||this.toggle()})),s("arrow-left",t,(()=>{this.expanded&&this.toggle()}))}connectedCallback(){var t,i,e;super.connectedCallback(),this.role="list",null===(t=this.rootNavigationStart)||void 0===t||t.addEventListener("focus",this.focusRootStart.bind(this)),null===(i=this.rootNavigationStart)||void 0===i||i.addEventListener("blur",this.blurRootStart.bind(this)),null===(e=this.rootNavigationStart)||void 0===e||e.addEventListener("keydown",this.handleRootStartKeys.bind(this))}disconnectedCallback(){super.disconnectedCallback(),this.rootNavigationStart&&this.rootNavigationStart.removeEventListener("click",this.toggle.bind(this))}render(){return e`<div class="private-host" aria-label="${this.i18n.navigationLabel}" cds-layout="vertical wrap:none">${this.startTemplate}<slot name="cds-navigation-substart"></slot><nav class="navigation-body-wrapper"><div .ariaActiveDescendant="${this.ariaActiveDescendant}" tabindex="0" id="item-container"><div class="navigation-body" cds-layout="vertical wrap:none align:horizontal-stretch"><slot></slot></div></div></nav>${this.endTemplate}</div>`}updated(t){super.updated(t),t.has("expanded")&&(this.expandedRoot=this.expanded),this.updateChildrenProps()}updateChildrenProps(){this.navigationGroupItems&&r(Array.from(this.navigationGroupItems),this,{groupItem:!0}),this.navigationItemRefs&&r(Array.from(this.navigationItemRefs),this,{expanded:!0}),this.navigationStartRefs&&r(Array.from(this.navigationStartRefs),this,{expandedRoot:!0}),this.rootNavigationStart&&d(this.rootNavigationStart,this,{expanded:this.expanded}),this.rootNavigationItems.length>0&&r(Array.from(this.rootNavigationItems),this,{expanded:this.expanded}),this.navigationGroupRefs.length>0&&r(Array.from(this.navigationGroupRefs),this,{layout:!0})}static get styles(){return[v,y]}};t([c({type:String})],R.prototype,"cdsMotion",void 0),t([l()],R.prototype,"expandedChange",void 0),t([l()],R.prototype,"cdsMotionChange",void 0),t([h({type:Boolean})],R.prototype,"groupItem",void 0),t([c({type:Boolean})],R.prototype,"expanded",void 0),t([p()],R.prototype,"i18n",void 0),t([u('[slot="cds-navigation-end"]',{assign:"cds-navigation-end"})],R.prototype,"navigationEnd",void 0),t([g("cds-navigation-group > cds-navigation-start, cds-navigation-item:not([disabled])")],R.prototype,"allNavigationElements",void 0),t([g("cds-navigation-start")],R.prototype,"navigationStartRefs",void 0),t([g(":scope > cds-divider")],R.prototype,"rootDividers",void 0),t([g(":scope > cds-navigation-group")],R.prototype,"rootNavigationGroups",void 0),t([g(":scope > cds-navigation-item")],R.prototype,"rootNavigationItems",void 0),t([u(":scope > cds-navigation-start",{assign:"navigation-start"})],R.prototype,"rootNavigationStart",void 0),t([g(":scope > cds-navigation-group > cds-navigation-item")],R.prototype,"navigationGroupItems",void 0),t([g("cds-navigation-item")],R.prototype,"navigationItemRefs",void 0),t([g("cds-navigation-group")],R.prototype,"navigationGroupRefs",void 0),R=t([m({expanded:{true:x,false:f(x)}})],R);export{R as CdsNavigation,N as CdsNavigationTagName};
+import{__decorate as t}from"tslib";import{LitElement as i,html as e}from"lit";import{I18nService as n,baseStyles as a,setAttributes as o,syncPropsForAllItems as s,syncProps as r,isVisible as d,onKey as l,property as c,event as v,state as h,i18n as g,querySlot as p,querySlotAll as u,animate as m,reverseAnimation as f}from"@cds/core/internal";import I from"./navigation.element.scss.js";import{removeFocus as y,setFocus as A,visibleElement as b,getNextFocusElement as S,getPreviousFocusElement as x}from"./utils/index.js";import{AnimationNavigationOpenName as E}from"../internal/motion/animations/cds-navigation-open.js";const N="cds-navigation";let C=class extends i{constructor(){super(...arguments);this.expandedRoot=!1,this.cdsMotion="on",this.groupItem=!0,this.expanded=!1,this.i18n=n.keys.navigation}static get styles(){return[a,I]}get endTemplate(){return this.navigationEnd?e`<div class="navigation-end" cds-layout="vertical align:horizontal-stretch"><slot name="cds-navigation-end" @slotchange="${this.onItemSlotChange}"></slot></div>`:""}get startTemplate(){let t;return t=this.rootNavigationStart?e`<div class="navigation-start" cds-layout="vertical align:horizontal-stretch"><slot @slotchange="${()=>this.onStartItemSlotChange()}" name="navigation-start"></slot><cds-divider class="start-divider"></cds-divider></div>`:"",t}render(){return e`<div class="private-host" aria-label="${this.i18n.navigationLabel}" cds-layout="vertical wrap:none">${this.startTemplate}<slot name="cds-navigation-substart"></slot><nav class="navigation-body-wrapper"><div .ariaActiveDescendant="${this.ariaActiveDescendant}" tabindex="0" id="item-container"><div class="navigation-body" cds-layout="vertical wrap:none align:horizontal-stretch"><slot @slotchange="${this.onItemSlotChange}"></slot></div></div></nav>${this.endTemplate}</div>`}connectedCallback(){var t,i,e;super.connectedCallback(),this.role="list",null===(t=this.rootNavigationStart)||void 0===t||t.addEventListener("focus",this.focusRootStart.bind(this)),null===(i=this.rootNavigationStart)||void 0===i||i.addEventListener("blur",this.blurRootStart.bind(this)),null===(e=this.rootNavigationStart)||void 0===e||e.addEventListener("keydown",this.handleRootStartKeys.bind(this))}disconnectedCallback(){super.disconnectedCallback(),this.rootNavigationStart&&this.rootNavigationStart.removeEventListener("click",this.toggle.bind(this))}firstUpdated(t){var i;super.firstUpdated(t);const e=null===(i=this.shadowRoot)||void 0===i?void 0:i.querySelector("#item-container");null==e||e.addEventListener("focus",this.initItemKeys.bind(this)),null==e||e.addEventListener("keydown",this.handleItemKeys.bind(this)),null==e||e.addEventListener("blur",this.blurItemKeys.bind(this))}updated(t){super.updated(t),t.has("expanded")&&(this.expandedRoot=this.expanded),this.updateChildrenProps()}onStartItemSlotChange(){this.onItemSlotChange(),this.rootNavigationStart&&this.rootNavigationStart.addEventListener("click",this.toggle.bind(this))}onItemSlotChange(){this.updateChildrenProps(),this.allNavigationElements.forEach((t=>{o(t,["tabindex","-1"])}))}updateChildrenProps(){this.navigationGroupItems&&s(Array.from(this.navigationGroupItems),this,{groupItem:!0}),this.navigationItemRefs&&s(Array.from(this.navigationItemRefs),this,{expanded:!0}),this.navigationStartRefs&&s(Array.from(this.navigationStartRefs),this,{expandedRoot:!0}),this.rootNavigationStart&&r(this.rootNavigationStart,this,{expanded:this.expanded}),this.rootNavigationItems.length>0&&s(Array.from(this.rootNavigationItems),this,{expanded:this.expanded}),this.navigationGroupRefs.length>0&&s(Array.from(this.navigationGroupRefs),this,{layout:!0})}get visibleChildren(){return Array.from(this.allNavigationElements).filter((t=>d(t)))}toggle(){this.expandedChange.emit(!this.expanded)}get currentActiveItem(){return this.visibleChildren.find((t=>t.id===this.ariaActiveDescendant))}blurItemKeys(){this.currentActiveItem&&y(this.currentActiveItem)}focusRootStart(){this.rootNavigationStart&&A(this.rootNavigationStart)}blurRootStart(){this.rootNavigationStart&&y(this.rootNavigationStart)}initItemKeys(){if(this.currentActiveItem){const t=this.currentActiveItem?this.currentActiveItem:this.allNavigationElements[0];A(t),this.ariaActiveDescendant=t.id}else A(this.focusableElements[0]),this.ariaActiveDescendant=this.focusableElements[0].id}get focusableElements(){return Array.from(this.allNavigationElements).filter(b)}handleItemKeys(t){l("arrow-down",t,(()=>{if(this.currentActiveItem){y(this.currentActiveItem);const i=S(this.currentActiveItem,this.focusableElements);this.ariaActiveDescendant=i.id,A(i),t.preventDefault()}})),l("arrow-up",t,(()=>{if(this.currentActiveItem){y(this.currentActiveItem);const i=x(this.currentActiveItem,this.focusableElements);this.ariaActiveDescendant=i.id,A(i),t.preventDefault()}})),l("arrow-right",t,(()=>{var t;const i=null===(t=this.currentActiveItem)||void 0===t?void 0:t.closest("cds-navigation-group");!i||i.expanded||i.expandedChange.emit(!i.expanded)})),l("arrow-left",t,(()=>{var t,i,e;const n=null===(t=this.currentActiveItem)||void 0===t?void 0:t.closest("cds-navigation-group");if("CDS-NAVIGATION-ITEM"===(null===(i=this.currentActiveItem)||void 0===i?void 0:i.tagName)&&n){const t=null==n?void 0:n.querySelector("cds-navigation-start");return y(this.currentActiveItem),this.ariaActiveDescendant=null!==(e=null==t?void 0:t.id)&&void 0!==e?e:null,void A(t)}n&&n.expanded&&n.expandedChange.emit(!n.expanded)})),l("home",t,(()=>{if(this.currentActiveItem){y(this.currentActiveItem);const t=this.focusableElements[0];this.ariaActiveDescendant=t.id,A(t)}})),l("end",t,(()=>{if(this.currentActiveItem){y(this.currentActiveItem);const t=this.focusableElements[this.focusableElements.length-1];this.ariaActiveDescendant=t.id,A(t)}})),l("enter",t,(()=>{var t,i;(null===(t=this.currentActiveItem)||void 0===t?void 0:t.focusElement)&&(null===(i=this.currentActiveItem)||void 0===i||i.focusElement.click())})),l("space",t,(()=>{var t,i;(null===(t=this.currentActiveItem)||void 0===t?void 0:t.focusElement)&&(null===(i=this.currentActiveItem)||void 0===i||i.focusElement.click())}))}handleRootStartKeys(t){l("arrow-right",t,(()=>{this.expanded||this.toggle()})),l("arrow-left",t,(()=>{this.expanded&&this.toggle()}))}};t([c({type:String})],C.prototype,"cdsMotion",void 0),t([v()],C.prototype,"expandedChange",void 0),t([v()],C.prototype,"cdsMotionChange",void 0),t([h({type:Boolean})],C.prototype,"groupItem",void 0),t([c({type:Boolean})],C.prototype,"expanded",void 0),t([g()],C.prototype,"i18n",void 0),t([p('[slot="cds-navigation-end"]',{assign:"cds-navigation-end"})],C.prototype,"navigationEnd",void 0),t([u("cds-navigation-group > cds-navigation-start, cds-navigation-item:not([disabled])")],C.prototype,"allNavigationElements",void 0),t([u("cds-navigation-start")],C.prototype,"navigationStartRefs",void 0),t([u(":scope > cds-divider")],C.prototype,"rootDividers",void 0),t([u(":scope > cds-navigation-group")],C.prototype,"rootNavigationGroups",void 0),t([u(":scope > cds-navigation-item")],C.prototype,"rootNavigationItems",void 0),t([p(":scope > cds-navigation-start",{assign:"navigation-start"})],C.prototype,"rootNavigationStart",void 0),t([u(":scope > cds-navigation-group > cds-navigation-item")],C.prototype,"navigationGroupItems",void 0),t([u("cds-navigation-item")],C.prototype,"navigationItemRefs",void 0),t([u("cds-navigation-group")],C.prototype,"navigationGroupRefs",void 0),C=t([m({expanded:{true:E,false:f(E)}})],C);export{C as CdsNavigation,N as CdsNavigationTagName};
 //# sourceMappingURL=navigation.element.js.map

package/navigation/navigation.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.element.js","sources":["../../../src/navigation/navigation.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { html, LitElement } from 'lit';\nimport { animate, baseStyles, event, i18n, I18nService, state, isVisible, onKey, property, querySlot, querySlotAll, reverseAnimation, setAttributes, syncProps, syncPropsForAllItems, } from '@cds/core/internal';\nimport styles from './navigation.element.scss';\nimport { getNextFocusElement, getPreviousFocusElement, removeFocus, setFocus, visibleElement, } from './utils/index.js';\nimport { AnimationNavigationOpenName } from '../internal/motion/animations/cds-navigation-open.js';\nexport const CdsNavigationTagName = 'cds-navigation';\n/**\n * ```typescript\n * import '@cds/core/navigation/register.js';\n * ```\n *\n * ```html\n *  <cds-navigation>\n *    <cds-navigation-item><a href=\"/home\">Home</cds-navigation-item>\n *    <cds-navigation-item><a href=\"/account\">Account</cds-navigation-item>\n *  </cds-navigation>\n * ```\n *\n * @beta\n * @element cds-navigation\n * @event expandedChange - notify when the user has clicked the navigation expand/collapse button\n * @cssprop --animation-duration\n * @cssprop --animation-easing\n * @cssprop --background\n * @cssprop --collapsed-width\n * @cssprop --expanded-width\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --letter-spacing\n * @cssprop --line-height\n * @cssprop --nested-padding\n * @cssprop --padding\n * @slot\n * @slot - cds-navigation-substart - project content below the navigation toggle button\n * @slot - cds-navigation-end - project content below the scrollable section\n */\nlet CdsNavigation = class CdsNavigation extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.expandedRoot = false;\n        this.cdsMotion = 'on';\n        /**\n         * This is used to sync down the information to this.navigationGroupItems\n         *\n         * @type { boolean }\n         * @protected\n         */\n        this.groupItem = true;\n        /**\n         *\n         * Vertical navigation elements can be either wide or narrow. Expanded indicates it should be wide.\n         * When navigation is wide cds-navigation-start button elements and cds-navigation-item a elements display\n         * text. When it is narrow they do not (consumer should provide an icon that stays visible).\n      \n         * @type {boolean}\n         */\n        this.expanded = false;\n        this.i18n = I18nService.keys.navigation;\n    }\n    toggle() {\n        this.expandedChange.emit(!this.expanded);\n    }\n    get currentActiveItem() {\n        return this.visibleChildren.find(c => c.id === this.ariaActiveDescendant);\n    }\n    get endTemplate() {\n        return this.navigationEnd\n            ? html `\n          <div class=\"navigation-end\" cds-layout=\"vertical align:horizontal-stretch\">\n            <slot name=\"cds-navigation-end\"></slot>\n          </div>\n        `\n            : '';\n    }\n    get startTemplate() {\n        let returnHTML;\n        this.rootNavigationStart\n            ? (returnHTML = html `\n          <div class=\"navigation-start\" cds-layout=\"vertical align:horizontal-stretch\">\n            <slot @slotchange=\"${() => this.addStartEventListener()}\" name=\"navigation-start\"></slot>\n            <cds-divider class=\"start-divider\"></cds-divider>\n          </div>\n        `)\n            : (returnHTML = '');\n        return returnHTML;\n    }\n    get visibleChildren() {\n        return Array.from(this.allNavigationElements).filter(n => isVisible(n));\n    }\n    addStartEventListener() {\n        // This is controlled by the slotchange event on the navigation-start slot\n        // Make sure we reattach the click handler for toggle if consumer changes the start element (e.g *ngIf)\n        if (this.rootNavigationStart) {\n            this.rootNavigationStart.addEventListener('click', this.toggle.bind(this));\n        }\n    }\n    firstUpdated(props) {\n        var _a;\n        super.firstUpdated(props);\n        // set all visible navigation elements to tabindex = -1\n        this.allNavigationElements.forEach(item => {\n            setAttributes(item, ['tabindex', '-1']);\n        });\n        const itemWrapper = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#item-container');\n        itemWrapper === null || itemWrapper === void 0 ? void 0 : itemWrapper.addEventListener('focus', this.initItemKeys.bind(this));\n        itemWrapper === null || itemWrapper === void 0 ? void 0 : itemWrapper.addEventListener('keydown', this.handleItemKeys.bind(this));\n        itemWrapper === null || itemWrapper === void 0 ? void 0 : itemWrapper.addEventListener('blur', this.blurItemKeys.bind(this));\n    }\n    blurItemKeys() {\n        if (this.currentActiveItem) {\n            removeFocus(this.currentActiveItem);\n        }\n    }\n    focusRootStart() {\n        if (this.rootNavigationStart) {\n            setFocus(this.rootNavigationStart);\n        }\n    }\n    blurRootStart() {\n        if (this.rootNavigationStart) {\n            removeFocus(this.rootNavigationStart);\n        }\n    }\n    initItemKeys() {\n        if (!this.currentActiveItem) {\n            setFocus(this.focusableElements[0]);\n            this.ariaActiveDescendant = this.focusableElements[0].id;\n        }\n        else {\n            const focusElement = this.currentActiveItem ? this.currentActiveItem : this.allNavigationElements[0];\n            setFocus(focusElement);\n            this.ariaActiveDescendant = focusElement.id;\n        }\n    }\n    get focusableElements() {\n        return Array.from(this.allNavigationElements).filter(visibleElement);\n    }\n    handleItemKeys(event) {\n        onKey('arrow-down', event, () => {\n            if (this.currentActiveItem) {\n                removeFocus(this.currentActiveItem);\n                const next = getNextFocusElement(this.currentActiveItem, this.focusableElements);\n                this.ariaActiveDescendant = next.id;\n                setFocus(next);\n                event.preventDefault();\n            }\n        });\n        onKey('arrow-up', event, () => {\n            if (this.currentActiveItem) {\n                removeFocus(this.currentActiveItem);\n                const previous = getPreviousFocusElement(this.currentActiveItem, this.focusableElements);\n                this.ariaActiveDescendant = previous.id;\n                setFocus(previous);\n                event.preventDefault();\n            }\n        });\n        onKey('arrow-right', event, () => {\n            var _a;\n            const groupParent = (_a = this.currentActiveItem) === null || _a === void 0 ? void 0 : _a.closest('cds-navigation-group');\n            if (groupParent && !groupParent.expanded) {\n                groupParent.expandedChange.emit(!groupParent.expanded);\n                return;\n            }\n        });\n        onKey('arrow-left', event, () => {\n            var _a, _b, _c;\n            const groupParent = (_a = this.currentActiveItem) === null || _a === void 0 ? void 0 : _a.closest('cds-navigation-group');\n            if (((_b = this.currentActiveItem) === null || _b === void 0 ? void 0 : _b.tagName) === 'CDS-NAVIGATION-ITEM' && !!groupParent) {\n                const groupStartElement = groupParent === null || groupParent === void 0 ? void 0 : groupParent.querySelector('cds-navigation-start');\n                removeFocus(this.currentActiveItem);\n                this.ariaActiveDescendant = (_c = groupStartElement === null || groupStartElement === void 0 ? void 0 : groupStartElement.id) !== null && _c !== void 0 ? _c : null;\n                setFocus(groupStartElement);\n                return;\n            }\n            if (groupParent && groupParent.expanded) {\n                groupParent.expandedChange.emit(!groupParent.expanded);\n                return;\n            }\n        });\n        onKey('home', event, () => {\n            if (this.currentActiveItem) {\n                removeFocus(this.currentActiveItem);\n                const home = this.focusableElements[0];\n                this.ariaActiveDescendant = home.id;\n                setFocus(home);\n            }\n        });\n        onKey('end', event, () => {\n            if (this.currentActiveItem) {\n                removeFocus(this.currentActiveItem);\n                const end = this.focusableElements[this.focusableElements.length - 1];\n                this.ariaActiveDescendant = end.id;\n                setFocus(end);\n            }\n        });\n        onKey('enter', event, () => {\n            var _a, _b;\n            // focusElement is either an Anchor or a button and we want to click it here\n            if ((_a = this.currentActiveItem) === null || _a === void 0 ? void 0 : _a.focusElement) {\n                (_b = this.currentActiveItem) === null || _b === void 0 ? void 0 : _b.focusElement.click();\n            }\n        });\n        onKey('space', event, () => {\n            var _a, _b;\n            // focusElement is either an Anchor or a button and we want to click it here\n            if ((_a = this.currentActiveItem) === null || _a === void 0 ? void 0 : _a.focusElement) {\n                (_b = this.currentActiveItem) === null || _b === void 0 ? void 0 : _b.focusElement.click();\n            }\n        });\n    }\n    handleRootStartKeys(event) {\n        onKey('arrow-right', event, () => {\n            if (!this.expanded) {\n                this.toggle();\n                return;\n            }\n        });\n        onKey('arrow-left', event, () => {\n            if (this.expanded) {\n                this.toggle();\n                return;\n            }\n        });\n    }\n    connectedCallback() {\n        var _a, _b, _c;\n        super.connectedCallback();\n        this.role = 'list';\n        (_a = this.rootNavigationStart) === null || _a === void 0 ? void 0 : _a.addEventListener('focus', this.focusRootStart.bind(this));\n        (_b = this.rootNavigationStart) === null || _b === void 0 ? void 0 : _b.addEventListener('blur', this.blurRootStart.bind(this));\n        (_c = this.rootNavigationStart) === null || _c === void 0 ? void 0 : _c.addEventListener('keydown', this.handleRootStartKeys.bind(this));\n    }\n    disconnectedCallback() {\n        super.disconnectedCallback();\n        if (this.rootNavigationStart) {\n            this.rootNavigationStart.removeEventListener('click', this.toggle.bind(this));\n        }\n    }\n    render() {\n        return html `<div class=\"private-host\" aria-label=\"${this.i18n.navigationLabel}\" cds-layout=\"vertical wrap:none\">\n      ${this.startTemplate}\n      <slot name=\"cds-navigation-substart\"></slot>\n      <nav class=\"navigation-body-wrapper\">\n        <div .ariaActiveDescendant=${this.ariaActiveDescendant} tabindex=\"0\" id=\"item-container\">\n          <div class=\"navigation-body\" cds-layout=\"vertical wrap:none align:horizontal-stretch\">\n            <slot></slot>\n          </div>\n        </div>\n      </nav>\n      ${this.endTemplate}\n    </div>`;\n    }\n    updated(props) {\n        super.updated(props);\n        if (props.has('expanded')) {\n            this.expandedRoot = this.expanded;\n        }\n        this.updateChildrenProps();\n    }\n    updateChildrenProps() {\n        if (this.navigationGroupItems) {\n            syncPropsForAllItems(Array.from(this.navigationGroupItems), this, { groupItem: true });\n        }\n        if (this.navigationItemRefs) {\n            syncPropsForAllItems(Array.from(this.navigationItemRefs), this, {\n                expanded: true,\n            });\n        }\n        if (this.navigationStartRefs) {\n            syncPropsForAllItems(Array.from(this.navigationStartRefs), this, {\n                expandedRoot: true,\n            });\n        }\n        if (this.rootNavigationStart) {\n            syncProps(this.rootNavigationStart, this, {\n                expanded: this.expanded,\n            });\n        }\n        if (this.rootNavigationItems.length > 0) {\n            syncPropsForAllItems(Array.from(this.rootNavigationItems), this, {\n                expanded: this.expanded,\n            });\n        }\n        if (this.navigationGroupRefs.length > 0) {\n            syncPropsForAllItems(Array.from(this.navigationGroupRefs), this, {\n                layout: true,\n            });\n        }\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n};\n__decorate([\n    property({ type: String })\n], CdsNavigation.prototype, \"cdsMotion\", void 0);\n__decorate([\n    event()\n], CdsNavigation.prototype, \"expandedChange\", void 0);\n__decorate([\n    event()\n], CdsNavigation.prototype, \"cdsMotionChange\", void 0);\n__decorate([\n    state({ type: Boolean })\n], CdsNavigation.prototype, \"groupItem\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsNavigation.prototype, \"expanded\", void 0);\n__decorate([\n    i18n()\n], CdsNavigation.prototype, \"i18n\", void 0);\n__decorate([\n    querySlot('[slot=\"cds-navigation-end\"]', { assign: 'cds-navigation-end' })\n], CdsNavigation.prototype, \"navigationEnd\", void 0);\n__decorate([\n    querySlotAll('cds-navigation-group > cds-navigation-start, cds-navigation-item:not([disabled])')\n], CdsNavigation.prototype, \"allNavigationElements\", void 0);\n__decorate([\n    querySlotAll('cds-navigation-start')\n], CdsNavigation.prototype, \"navigationStartRefs\", void 0);\n__decorate([\n    querySlotAll(':scope > cds-divider')\n], CdsNavigation.prototype, \"rootDividers\", void 0);\n__decorate([\n    querySlotAll(':scope > cds-navigation-group')\n], CdsNavigation.prototype, \"rootNavigationGroups\", void 0);\n__decorate([\n    querySlotAll(':scope > cds-navigation-item')\n], CdsNavigation.prototype, \"rootNavigationItems\", void 0);\n__decorate([\n    querySlot(':scope > cds-navigation-start', { assign: 'navigation-start' })\n], CdsNavigation.prototype, \"rootNavigationStart\", void 0);\n__decorate([\n    querySlotAll(':scope > cds-navigation-group > cds-navigation-item')\n], CdsNavigation.prototype, \"navigationGroupItems\", void 0);\n__decorate([\n    querySlotAll('cds-navigation-item')\n], CdsNavigation.prototype, \"navigationItemRefs\", void 0);\n__decorate([\n    querySlotAll('cds-navigation-group')\n], CdsNavigation.prototype, \"navigationGroupRefs\", void 0);\nCdsNavigation = __decorate([\n    animate({\n        expanded: {\n            true: AnimationNavigationOpenName,\n            false: reverseAnimation(AnimationNavigationOpenName),\n        },\n    })\n], CdsNavigation);\nexport { CdsNavigation };\n"],"names":["CdsNavigationTagName","CdsNavigation","LitElement","constructor","super","this","expandedRoot","cdsMotion","groupItem","expanded","i18n","I18nService","keys","navigation","toggle","expandedChange","emit","currentActiveItem","visibleChildren","find","c","id","ariaActiveDescendant","endTemplate","navigationEnd","html","startTemplate","returnHTML","rootNavigationStart","addStartEventListener","Array","from","allNavigationElements","filter","n","isVisible","addEventListener","bind","firstUpdated","props","_a","forEach","item","setAttributes","itemWrapper","shadowRoot","querySelector","initItemKeys","handleItemKeys","blurItemKeys","removeFocus","focusRootStart","setFocus","blurRootStart","focusElement","focusableElements","visibleElement","event","onKey","next","getNextFocusElement","preventDefault","previous","getPreviousFocusElement","groupParent","closest","_b","_c","tagName","groupStartElement","home","end","length","click","handleRootStartKeys","connectedCallback","role","disconnectedCallback","removeEventListener","render","navigationLabel","updated","has","updateChildrenProps","navigationGroupItems","syncPropsForAllItems","navigationItemRefs","navigationStartRefs","syncProps","rootNavigationItems","navigationGroupRefs","layout","styles","baseStyles","__decorate","property","type","String","prototype","state","Boolean","querySlot","assign","querySlotAll","animate","true","AnimationNavigationOpenName","false","reverseAnimation"],"mappings":"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"}
+{"version":3,"file":"navigation.element.js","sources":["../../../src/navigation/navigation.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { html, LitElement } from 'lit';\nimport { animate, baseStyles, event, i18n, I18nService, state, isVisible, onKey, property, querySlot, querySlotAll, reverseAnimation, setAttributes, syncProps, syncPropsForAllItems, } from '@cds/core/internal';\nimport styles from './navigation.element.scss';\nimport { getNextFocusElement, getPreviousFocusElement, removeFocus, setFocus, visibleElement, } from './utils/index.js';\nimport { AnimationNavigationOpenName } from '../internal/motion/animations/cds-navigation-open.js';\nexport const CdsNavigationTagName = 'cds-navigation';\n/**\n * ```typescript\n * import '@cds/core/navigation/register.js';\n * ```\n *\n * ```html\n *  <cds-navigation>\n *    <cds-navigation-item><a href=\"/home\">Home</cds-navigation-item>\n *    <cds-navigation-item><a href=\"/account\">Account</cds-navigation-item>\n *  </cds-navigation>\n * ```\n *\n * @beta\n * @element cds-navigation\n * @event expandedChange - notify when the user has clicked the navigation expand/collapse button\n * @cssprop --animation-duration\n * @cssprop --animation-easing\n * @cssprop --background\n * @cssprop --collapsed-width\n * @cssprop --expanded-width\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --letter-spacing\n * @cssprop --line-height\n * @cssprop --nested-padding\n * @cssprop --padding\n * @slot\n * @slot - cds-navigation-substart - project content below the navigation toggle button\n * @slot - cds-navigation-end - project content below the scrollable section\n */\nlet CdsNavigation = class CdsNavigation extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.expandedRoot = false;\n        this.cdsMotion = 'on';\n        /**\n         * This is used to sync down the information to this.navigationGroupItems\n         *\n         * @type { boolean }\n         * @protected\n         */\n        this.groupItem = true;\n        /**\n         *\n         * Vertical navigation elements can be either wide or narrow. Expanded indicates it should be wide.\n         * When navigation is wide cds-navigation-start button elements and cds-navigation-item a elements display\n         * text. When it is narrow they do not (consumer should provide an icon that stays visible).\n      \n         * @type {boolean}\n         */\n        this.expanded = false;\n        this.i18n = I18nService.keys.navigation;\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n    get endTemplate() {\n        return this.navigationEnd\n            ? html `\n          <div class=\"navigation-end\" cds-layout=\"vertical align:horizontal-stretch\">\n            <slot name=\"cds-navigation-end\" @slotchange=${this.onItemSlotChange}></slot>\n          </div>\n        `\n            : '';\n    }\n    get startTemplate() {\n        let returnHTML;\n        this.rootNavigationStart\n            ? (returnHTML = html `\n          <div class=\"navigation-start\" cds-layout=\"vertical align:horizontal-stretch\">\n            <slot @slotchange=\"${() => this.onStartItemSlotChange()}\" name=\"navigation-start\"></slot>\n            <cds-divider class=\"start-divider\"></cds-divider>\n          </div>\n        `)\n            : (returnHTML = '');\n        return returnHTML;\n    }\n    render() {\n        return html `<div class=\"private-host\" aria-label=\"${this.i18n.navigationLabel}\" cds-layout=\"vertical wrap:none\">\n      ${this.startTemplate}\n      <slot name=\"cds-navigation-substart\"></slot>\n      <nav class=\"navigation-body-wrapper\">\n        <div .ariaActiveDescendant=${this.ariaActiveDescendant} tabindex=\"0\" id=\"item-container\">\n          <div class=\"navigation-body\" cds-layout=\"vertical wrap:none align:horizontal-stretch\">\n            <slot @slotchange=${this.onItemSlotChange}></slot>\n          </div>\n        </div>\n      </nav>\n      ${this.endTemplate}\n    </div>`;\n    }\n    connectedCallback() {\n        var _a, _b, _c;\n        super.connectedCallback();\n        this.role = 'list';\n        (_a = this.rootNavigationStart) === null || _a === void 0 ? void 0 : _a.addEventListener('focus', this.focusRootStart.bind(this));\n        (_b = this.rootNavigationStart) === null || _b === void 0 ? void 0 : _b.addEventListener('blur', this.blurRootStart.bind(this));\n        (_c = this.rootNavigationStart) === null || _c === void 0 ? void 0 : _c.addEventListener('keydown', this.handleRootStartKeys.bind(this));\n    }\n    disconnectedCallback() {\n        super.disconnectedCallback();\n        if (this.rootNavigationStart) {\n            this.rootNavigationStart.removeEventListener('click', this.toggle.bind(this));\n        }\n    }\n    firstUpdated(props) {\n        var _a;\n        super.firstUpdated(props);\n        const itemWrapper = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#item-container');\n        itemWrapper === null || itemWrapper === void 0 ? void 0 : itemWrapper.addEventListener('focus', this.initItemKeys.bind(this));\n        itemWrapper === null || itemWrapper === void 0 ? void 0 : itemWrapper.addEventListener('keydown', this.handleItemKeys.bind(this));\n        itemWrapper === null || itemWrapper === void 0 ? void 0 : itemWrapper.addEventListener('blur', this.blurItemKeys.bind(this));\n    }\n    updated(props) {\n        super.updated(props);\n        if (props.has('expanded')) {\n            this.expandedRoot = this.expanded;\n        }\n        this.updateChildrenProps();\n    }\n    onStartItemSlotChange() {\n        this.onItemSlotChange();\n        // This is controlled by the slotchange event on the navigation-start slot\n        // Make sure we reattach the click handler for toggle if consumer changes the start element (e.g *ngIf)\n        if (this.rootNavigationStart) {\n            this.rootNavigationStart.addEventListener('click', this.toggle.bind(this));\n        }\n    }\n    onItemSlotChange() {\n        this.updateChildrenProps();\n        // set all visible navigation elements to tabindex = -1\n        this.allNavigationElements.forEach(item => {\n            setAttributes(item, ['tabindex', '-1']);\n        });\n    }\n    updateChildrenProps() {\n        if (this.navigationGroupItems) {\n            syncPropsForAllItems(Array.from(this.navigationGroupItems), this, { groupItem: true });\n        }\n        if (this.navigationItemRefs) {\n            syncPropsForAllItems(Array.from(this.navigationItemRefs), this, {\n                expanded: true,\n            });\n        }\n        if (this.navigationStartRefs) {\n            syncPropsForAllItems(Array.from(this.navigationStartRefs), this, {\n                expandedRoot: true,\n            });\n        }\n        if (this.rootNavigationStart) {\n            syncProps(this.rootNavigationStart, this, {\n                expanded: this.expanded,\n            });\n        }\n        if (this.rootNavigationItems.length > 0) {\n            syncPropsForAllItems(Array.from(this.rootNavigationItems), this, {\n                expanded: this.expanded,\n            });\n        }\n        if (this.navigationGroupRefs.length > 0) {\n            syncPropsForAllItems(Array.from(this.navigationGroupRefs), this, {\n                layout: true,\n            });\n        }\n    }\n    get visibleChildren() {\n        return Array.from(this.allNavigationElements).filter(n => isVisible(n));\n    }\n    toggle() {\n        this.expandedChange.emit(!this.expanded);\n    }\n    get currentActiveItem() {\n        return this.visibleChildren.find(c => c.id === this.ariaActiveDescendant);\n    }\n    blurItemKeys() {\n        if (this.currentActiveItem) {\n            removeFocus(this.currentActiveItem);\n        }\n    }\n    focusRootStart() {\n        if (this.rootNavigationStart) {\n            setFocus(this.rootNavigationStart);\n        }\n    }\n    blurRootStart() {\n        if (this.rootNavigationStart) {\n            removeFocus(this.rootNavigationStart);\n        }\n    }\n    initItemKeys() {\n        if (!this.currentActiveItem) {\n            setFocus(this.focusableElements[0]);\n            this.ariaActiveDescendant = this.focusableElements[0].id;\n        }\n        else {\n            const focusElement = this.currentActiveItem ? this.currentActiveItem : this.allNavigationElements[0];\n            setFocus(focusElement);\n            this.ariaActiveDescendant = focusElement.id;\n        }\n    }\n    get focusableElements() {\n        return Array.from(this.allNavigationElements).filter(visibleElement);\n    }\n    handleItemKeys(event) {\n        onKey('arrow-down', event, () => {\n            if (this.currentActiveItem) {\n                removeFocus(this.currentActiveItem);\n                const next = getNextFocusElement(this.currentActiveItem, this.focusableElements);\n                this.ariaActiveDescendant = next.id;\n                setFocus(next);\n                event.preventDefault();\n            }\n        });\n        onKey('arrow-up', event, () => {\n            if (this.currentActiveItem) {\n                removeFocus(this.currentActiveItem);\n                const previous = getPreviousFocusElement(this.currentActiveItem, this.focusableElements);\n                this.ariaActiveDescendant = previous.id;\n                setFocus(previous);\n                event.preventDefault();\n            }\n        });\n        onKey('arrow-right', event, () => {\n            var _a;\n            const groupParent = (_a = this.currentActiveItem) === null || _a === void 0 ? void 0 : _a.closest('cds-navigation-group');\n            if (groupParent && !groupParent.expanded) {\n                groupParent.expandedChange.emit(!groupParent.expanded);\n                return;\n            }\n        });\n        onKey('arrow-left', event, () => {\n            var _a, _b, _c;\n            const groupParent = (_a = this.currentActiveItem) === null || _a === void 0 ? void 0 : _a.closest('cds-navigation-group');\n            if (((_b = this.currentActiveItem) === null || _b === void 0 ? void 0 : _b.tagName) === 'CDS-NAVIGATION-ITEM' && !!groupParent) {\n                const groupStartElement = groupParent === null || groupParent === void 0 ? void 0 : groupParent.querySelector('cds-navigation-start');\n                removeFocus(this.currentActiveItem);\n                this.ariaActiveDescendant = (_c = groupStartElement === null || groupStartElement === void 0 ? void 0 : groupStartElement.id) !== null && _c !== void 0 ? _c : null;\n                setFocus(groupStartElement);\n                return;\n            }\n            if (groupParent && groupParent.expanded) {\n                groupParent.expandedChange.emit(!groupParent.expanded);\n                return;\n            }\n        });\n        onKey('home', event, () => {\n            if (this.currentActiveItem) {\n                removeFocus(this.currentActiveItem);\n                const home = this.focusableElements[0];\n                this.ariaActiveDescendant = home.id;\n                setFocus(home);\n            }\n        });\n        onKey('end', event, () => {\n            if (this.currentActiveItem) {\n                removeFocus(this.currentActiveItem);\n                const end = this.focusableElements[this.focusableElements.length - 1];\n                this.ariaActiveDescendant = end.id;\n                setFocus(end);\n            }\n        });\n        onKey('enter', event, () => {\n            var _a, _b;\n            // focusElement is either an Anchor or a button and we want to click it here\n            if ((_a = this.currentActiveItem) === null || _a === void 0 ? void 0 : _a.focusElement) {\n                (_b = this.currentActiveItem) === null || _b === void 0 ? void 0 : _b.focusElement.click();\n            }\n        });\n        onKey('space', event, () => {\n            var _a, _b;\n            // focusElement is either an Anchor or a button and we want to click it here\n            if ((_a = this.currentActiveItem) === null || _a === void 0 ? void 0 : _a.focusElement) {\n                (_b = this.currentActiveItem) === null || _b === void 0 ? void 0 : _b.focusElement.click();\n            }\n        });\n    }\n    handleRootStartKeys(event) {\n        onKey('arrow-right', event, () => {\n            if (!this.expanded) {\n                this.toggle();\n                return;\n            }\n        });\n        onKey('arrow-left', event, () => {\n            if (this.expanded) {\n                this.toggle();\n                return;\n            }\n        });\n    }\n};\n__decorate([\n    property({ type: String })\n], CdsNavigation.prototype, \"cdsMotion\", void 0);\n__decorate([\n    event()\n], CdsNavigation.prototype, \"expandedChange\", void 0);\n__decorate([\n    event()\n], CdsNavigation.prototype, \"cdsMotionChange\", void 0);\n__decorate([\n    state({ type: Boolean })\n], CdsNavigation.prototype, \"groupItem\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsNavigation.prototype, \"expanded\", void 0);\n__decorate([\n    i18n()\n], CdsNavigation.prototype, \"i18n\", void 0);\n__decorate([\n    querySlot('[slot=\"cds-navigation-end\"]', { assign: 'cds-navigation-end' })\n], CdsNavigation.prototype, \"navigationEnd\", void 0);\n__decorate([\n    querySlotAll('cds-navigation-group > cds-navigation-start, cds-navigation-item:not([disabled])')\n], CdsNavigation.prototype, \"allNavigationElements\", void 0);\n__decorate([\n    querySlotAll('cds-navigation-start')\n], CdsNavigation.prototype, \"navigationStartRefs\", void 0);\n__decorate([\n    querySlotAll(':scope > cds-divider')\n], CdsNavigation.prototype, \"rootDividers\", void 0);\n__decorate([\n    querySlotAll(':scope > cds-navigation-group')\n], CdsNavigation.prototype, \"rootNavigationGroups\", void 0);\n__decorate([\n    querySlotAll(':scope > cds-navigation-item')\n], CdsNavigation.prototype, \"rootNavigationItems\", void 0);\n__decorate([\n    querySlot(':scope > cds-navigation-start', { assign: 'navigation-start' })\n], CdsNavigation.prototype, \"rootNavigationStart\", void 0);\n__decorate([\n    querySlotAll(':scope > cds-navigation-group > cds-navigation-item')\n], CdsNavigation.prototype, \"navigationGroupItems\", void 0);\n__decorate([\n    querySlotAll('cds-navigation-item')\n], CdsNavigation.prototype, \"navigationItemRefs\", void 0);\n__decorate([\n    querySlotAll('cds-navigation-group')\n], CdsNavigation.prototype, \"navigationGroupRefs\", void 0);\nCdsNavigation = __decorate([\n    animate({\n        expanded: {\n            true: AnimationNavigationOpenName,\n            false: reverseAnimation(AnimationNavigationOpenName),\n        },\n    })\n], CdsNavigation);\nexport { CdsNavigation };\n"],"names":["CdsNavigationTagName","CdsNavigation","LitElement","constructor","super","this","expandedRoot","cdsMotion","groupItem","expanded","i18n","I18nService","keys","navigation","styles","baseStyles","endTemplate","navigationEnd","html","onItemSlotChange","startTemplate","returnHTML","rootNavigationStart","onStartItemSlotChange","render","navigationLabel","ariaActiveDescendant","connectedCallback","_a","_b","_c","role","addEventListener","focusRootStart","bind","blurRootStart","handleRootStartKeys","disconnectedCallback","removeEventListener","toggle","firstUpdated","props","itemWrapper","shadowRoot","querySelector","initItemKeys","handleItemKeys","blurItemKeys","updated","has","updateChildrenProps","allNavigationElements","forEach","item","setAttributes","navigationGroupItems","syncPropsForAllItems","Array","from","navigationItemRefs","navigationStartRefs","syncProps","rootNavigationItems","length","navigationGroupRefs","layout","visibleChildren","filter","n","isVisible","expandedChange","emit","currentActiveItem","find","c","id","removeFocus","setFocus","focusElement","focusableElements","visibleElement","event","onKey","next","getNextFocusElement","preventDefault","previous","getPreviousFocusElement","groupParent","closest","tagName","groupStartElement","home","end","click","__decorate","property","type","String","prototype","state","Boolean","querySlot","assign","querySlotAll","animate","true","AnimationNavigationOpenName","false","reverseAnimation"],"mappings":"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"}

package/package.json

@@ -216,5 +216,5 @@
     "./tokens/tokens.ios.swift": "./tokens/tokens.ios.swift",
     "./tokens/tokens.android.xml": "./tokens/tokens.android.xml"
   },
-  "version": "5.8.1"
+  "version": "5.8.2"
 }

package/range/range.element.js

@@ -1,2 +1,2 @@
-import{__decorate as t}from"tslib";import{html as s}from"lit";import{globalStyle as r}from"@cds/core/internal";import{CdsControl as i}from"@cds/core/forms";import e from"./range.global.scss.js";import o from"./range.element.scss.js";class n extends i{constructor(){super(...arguments);this.globalStyles=e}static get styles(){return[...super.styles,o]}get inputTemplate(){return s`<div class="input-track"></div>`}firstUpdated(t){super.firstUpdated(t),this.setTrackWidth(),this.inputControl.addEventListener("input",(()=>this.setTrackWidth()))}setTrackWidth(){const t=this.inputControl.valueAsNumber,s=this.inputControl.min?parseInt(this.inputControl.min):0,r=this.inputControl.max?parseInt(this.inputControl.max):100;this.style.setProperty("--track-width",Math.floor((t-s)/(r-s)*100)+"%")}}t([r()],n.prototype,"globalStyles",void 0);export{n as CdsRange};
+import{__decorate as t}from"tslib";import{html as s}from"lit";import{getElementUpdates as r,globalStyle as i}from"@cds/core/internal";import{CdsControl as e}from"@cds/core/forms";import o from"./range.global.scss.js";import n from"./range.element.scss.js";class l extends e{constructor(){super(...arguments);this.globalStyles=o}static get styles(){return[...super.styles,n]}get inputTemplate(){return s`<div class="input-track"></div>`}firstUpdated(t){super.firstUpdated(t),this.setTrackWidth(),this.inputControl.addEventListener("input",(()=>this.setTrackWidth())),this.observers.push(r(this.inputControl,"value",(t=>{this.setTrackWidth(t)})))}setTrackWidth(t){const s=null!=t?t:this.inputControl.valueAsNumber,r=this.inputControl.min?parseInt(this.inputControl.min):0,i=this.inputControl.max?parseInt(this.inputControl.max):100;this.style.setProperty("--track-width",Math.floor((s-r)/(i-r)*100)+"%")}}t([i()],l.prototype,"globalStyles",void 0);export{l as CdsRange};
 //# sourceMappingURL=range.element.js.map

package/range/range.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"range.element.js","sources":["../../../src/range/range.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { html } from 'lit';\nimport { globalStyle } from '@cds/core/internal';\nimport { CdsControl } from '@cds/core/forms';\nimport globalStyles from './range.global.scss';\nimport styles from './range.element.scss';\n/**\n * Range\n *\n * ```typescript\n * import '@cds/core/range/register.js';\n * ```\n *\n * ```html\n * <cds-range>\n *   <label>range</label>\n *   <input type=\"range\" />\n *   <cds-control-message>message text</cds-control-message>\n * </cds-range>\n * ```\n *\n * @element cds-range\n * @slot - For projecting range input\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --track-background\n * @cssprop --track-fill-background\n * @cssprop --track-height\n * @cssprop --thumb-background\n * @cssprop --thumb-width\n * @cssprop --thumb-height\n */\nexport class CdsRange extends CdsControl {\n    constructor() {\n        super(...arguments);\n        this.globalStyles = globalStyles;\n    }\n    static get styles() {\n        return [...super.styles, styles];\n    }\n    get inputTemplate() {\n        return html `<div class=\"input-track\"></div>`;\n    }\n    firstUpdated(props) {\n        super.firstUpdated(props);\n        this.setTrackWidth();\n        this.inputControl.addEventListener('input', () => this.setTrackWidth());\n    }\n    setTrackWidth() {\n        const value = this.inputControl.valueAsNumber;\n        const min = this.inputControl.min ? parseInt(this.inputControl.min) : 0;\n        const max = this.inputControl.max ? parseInt(this.inputControl.max) : 100;\n        this.style.setProperty('--track-width', `${Math.floor(((value - min) / (max - min)) * 100)}%`);\n    }\n}\n__decorate([\n    globalStyle()\n], CdsRange.prototype, \"globalStyles\", void 0);\n"],"names":["CdsRange","CdsControl","constructor","super","this","globalStyles","styles","inputTemplate","html","firstUpdated","props","setTrackWidth","inputControl","addEventListener","value","valueAsNumber","min","parseInt","max","style","setProperty","Math","floor","__decorate","globalStyle","prototype"],"mappings":"yOAqCO,MAAMA,UAAiBC,EAC1BC,cACIC,oBACAC,KAAKC,aAAeA,EAEbC,oBACP,MAAO,IAAIH,MAAMG,OAAQA,GAEzBC,oBACA,OAAOC,CAAK,kCAEhBC,aAAaC,GACTP,MAAMM,aAAaC,GACnBN,KAAKO,gBACLP,KAAKQ,aAAaC,iBAAiB,SAAS,IAAMT,KAAKO,kBAE3DA,gBACI,MAAMG,EAAQV,KAAKQ,aAAaG,cAC1BC,EAAMZ,KAAKQ,aAAaI,IAAMC,SAASb,KAAKQ,aAAaI,KAAO,EAChEE,EAAMd,KAAKQ,aAAaM,IAAMD,SAASb,KAAKQ,aAAaM,KAAO,IACtEd,KAAKe,MAAMC,YAAY,gBAAoBC,KAAKC,OAAQR,EAAQE,IAAQE,EAAMF,GAAQ,KAA9C,MAGhDO,EAAW,CACPC,KACDxB,EAASyB,UAAW,oBAAgB"}
+{"version":3,"file":"range.element.js","sources":["../../../src/range/range.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { html } from 'lit';\nimport { getElementUpdates, globalStyle } from '@cds/core/internal';\nimport { CdsControl } from '@cds/core/forms';\nimport globalStyles from './range.global.scss';\nimport styles from './range.element.scss';\n/**\n * Range\n *\n * ```typescript\n * import '@cds/core/range/register.js';\n * ```\n *\n * ```html\n * <cds-range>\n *   <label>range</label>\n *   <input type=\"range\" />\n *   <cds-control-message>message text</cds-control-message>\n * </cds-range>\n * ```\n *\n * @element cds-range\n * @slot - For projecting range input\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --track-background\n * @cssprop --track-fill-background\n * @cssprop --track-height\n * @cssprop --thumb-background\n * @cssprop --thumb-width\n * @cssprop --thumb-height\n */\nexport class CdsRange extends CdsControl {\n    constructor() {\n        super(...arguments);\n        this.globalStyles = globalStyles;\n    }\n    static get styles() {\n        return [...super.styles, styles];\n    }\n    get inputTemplate() {\n        return html `<div class=\"input-track\"></div>`;\n    }\n    firstUpdated(props) {\n        super.firstUpdated(props);\n        this.setTrackWidth();\n        this.inputControl.addEventListener('input', () => this.setTrackWidth());\n        // `input` event doesnt fire when the value is changed programmatically\n        // at this point, inputControl.valueAsNumber is still the old value\n        // https://github.com/vmware-clarity/core/issues/157\n        this.observers.push(getElementUpdates(this.inputControl, 'value', (value) => {\n            this.setTrackWidth(value);\n        }));\n    }\n    setTrackWidth(val) {\n        const value = val !== null && val !== void 0 ? val : this.inputControl.valueAsNumber;\n        const min = this.inputControl.min ? parseInt(this.inputControl.min) : 0;\n        const max = this.inputControl.max ? parseInt(this.inputControl.max) : 100;\n        this.style.setProperty('--track-width', `${Math.floor(((value - min) / (max - min)) * 100)}%`);\n    }\n}\n__decorate([\n    globalStyle()\n], CdsRange.prototype, \"globalStyles\", void 0);\n"],"names":["CdsRange","CdsControl","constructor","super","this","globalStyles","styles","inputTemplate","html","firstUpdated","props","setTrackWidth","inputControl","addEventListener","observers","push","getElementUpdates","value","val","valueAsNumber","min","parseInt","max","style","setProperty","Math","floor","__decorate","globalStyle","prototype"],"mappings":"gQAqCO,MAAMA,UAAiBC,EAC1BC,cACIC,oBACAC,KAAKC,aAAeA,EAEbC,oBACP,MAAO,IAAIH,MAAMG,OAAQA,GAEzBC,oBACA,OAAOC,CAAK,kCAEhBC,aAAaC,GACTP,MAAMM,aAAaC,GACnBN,KAAKO,gBACLP,KAAKQ,aAAaC,iBAAiB,SAAS,IAAMT,KAAKO,kBAIvDP,KAAKU,UAAUC,KAAKC,EAAkBZ,KAAKQ,aAAc,SAAUK,IAC/Db,KAAKO,cAAcM,OAG3BN,cAAcO,GACV,MAAMD,EAAQC,MAAAA,EAAiCA,EAAMd,KAAKQ,aAAaO,cACjEC,EAAMhB,KAAKQ,aAAaQ,IAAMC,SAASjB,KAAKQ,aAAaQ,KAAO,EAChEE,EAAMlB,KAAKQ,aAAaU,IAAMD,SAASjB,KAAKQ,aAAaU,KAAO,IACtElB,KAAKmB,MAAMC,YAAY,gBAAoBC,KAAKC,OAAQT,EAAQG,IAAQE,EAAMF,GAAQ,KAA9C,MAGhDO,EAAW,CACPC,KACD5B,EAAS6B,UAAW,oBAAgB"}