@m3e/nav-menu 1.0.0-rc.1 → 1.0.0-rc.3
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.
- package/README.md +1 -2
- package/dist/custom-elements.json +2629 -8
- package/dist/html-custom-data.json +1 -1
- package/dist/index.js +21 -4
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +37 -37
- package/dist/index.min.js.map +1 -1
- package/dist/src/NavMenuElement.d.ts +0 -1
- package/dist/src/NavMenuElement.d.ts.map +1 -1
- package/dist/src/NavMenuItemElement.d.ts +3 -1
- package/dist/src/NavMenuItemElement.d.ts.map +1 -1
- package/package.json +4 -4
- package/cem.config.mjs +0 -16
- package/demo/index.html +0 -64
- package/eslint.config.mjs +0 -13
- package/rollup.config.js +0 -32
- package/src/NavMenuElement.ts +0 -325
- package/src/NavMenuItemElement.ts +0 -560
- package/src/index.ts +0 -2
- package/tsconfig.json +0 -9
package/dist/index.min.js
CHANGED
|
@@ -3,23 +3,23 @@
|
|
|
3
3
|
* Copyright (c) 2025 matraic
|
|
4
4
|
* See LICENSE file in the project root for full license text.
|
|
5
5
|
*/
|
|
6
|
-
import{LitElement as t,html as e,css as s,unsafeCSS as i}from"lit";import{Role as n,
|
|
6
|
+
import{LitElement as t,html as e,css as s,unsafeCSS as i}from"lit";import{Role as n,scrollIntoViewIfNeeded as o,PressedController as r,FocusController as a,DesignToken as l,Selected as h,Disabled as c,EventAttribute as d,AttachInternals as m,hasAssignedNodes as p}from"@m3e/core";import{SelectionManager as u,selectionManager as f}from"@m3e/core/a11y";function v(t,e,s,i){var n,o=arguments.length,r=o<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,s,i);else for(var a=t.length-1;a>=0;a--)(n=t[a])&&(r=(o<3?n(r):o>3?n(e,s,r):n(e,s))||r);return o>3&&r&&Object.defineProperty(e,s,r),r}function g(t,e,s,i){if("a"===s&&!i)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!i:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===s?i:"a"===s?i.call(t):i?i.value:e.get(t)}function $(t,e,s,i,n){if("m"===i)throw new TypeError("Private method is not writable");if("a"===i&&!n)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?t!==e||!n:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===i?n.call(t,s):n?n.value=s:e.set(t,s),s}"function"==typeof SuppressedError&&SuppressedError;
|
|
7
7
|
/**
|
|
8
8
|
* @license
|
|
9
9
|
* Copyright 2017 Google LLC
|
|
10
10
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
11
11
|
*/
|
|
12
|
-
const
|
|
12
|
+
const b=t=>(e,s)=>{void 0!==s?s.addInitializer(()=>{customElements.define(t,e)}):customElements.define(t,e)},y=globalThis,_=y.ShadowRoot&&(void 0===y.ShadyCSS||y.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,A=Symbol(),w=new WeakMap;
|
|
13
13
|
/**
|
|
14
14
|
* @license
|
|
15
15
|
* Copyright 2019 Google LLC
|
|
16
16
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
17
|
-
*/let E=class{constructor(t,e,s){if(this._$cssResult$=!0,s!==A)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(_&&void 0===t){const s=void 0!==e&&1===e.length;s&&(t=w.get(e)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),s&&w.set(e,t))}return t}toString(){return this.cssText}};const S=_?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return(t=>new E("string"==typeof t?t:t+"",void 0,A))(e)})(t):t,{is:C,defineProperty:k,getOwnPropertyDescriptor:x,getOwnPropertyNames:P,getOwnPropertySymbols:I,getPrototypeOf:M}=Object,
|
|
17
|
+
*/let E=class{constructor(t,e,s){if(this._$cssResult$=!0,s!==A)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(_&&void 0===t){const s=void 0!==e&&1===e.length;s&&(t=w.get(e)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),s&&w.set(e,t))}return t}toString(){return this.cssText}};const S=_?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return(t=>new E("string"==typeof t?t:t+"",void 0,A))(e)})(t):t,{is:C,defineProperty:k,getOwnPropertyDescriptor:x,getOwnPropertyNames:P,getOwnPropertySymbols:I,getPrototypeOf:M}=Object,T=globalThis,U=T.trustedTypes,O=U?U.emptyScript:"",H=T.reactiveElementPolyfillSupport,R=(t,e)=>t,N={toAttribute(t,e){switch(e){case Boolean:t=t?O:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let s=t;switch(e){case Boolean:s=null!==t;break;case Number:s=null===t?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t)}catch(t){s=null}}return s}},L=(t,e)=>!C(t,e),j={attribute:!0,type:String,converter:N,reflect:!1,useDefault:!1,hasChanged:L};
|
|
18
18
|
/**
|
|
19
19
|
* @license
|
|
20
20
|
* Copyright 2017 Google LLC
|
|
21
21
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
22
|
-
*/Symbol.metadata??=Symbol("metadata"),
|
|
22
|
+
*/Symbol.metadata??=Symbol("metadata"),T.litPropertyMetadata??=new WeakMap;class z extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=j){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const s=Symbol(),i=this.getPropertyDescriptor(t,s,e);void 0!==i&&k(this.prototype,t,i)}}static getPropertyDescriptor(t,e,s){const{get:i,set:n}=x(this.prototype,t)??{get(){return this[e]},set(t){this[e]=t}};return{get:i,set(e){const o=i?.call(this);n?.call(this,e),this.requestUpdate(t,o,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??j}static _$Ei(){if(this.hasOwnProperty(R("elementProperties")))return;const t=M(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(R("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(R("properties"))){const t=this.properties,e=[...P(t),...I(t)];for(const s of e)this.createProperty(s,t[s])}const t=this[Symbol.metadata];if(null!==t){const e=litPropertyMetadata.get(t);if(void 0!==e)for(const[t,s]of e)this.elementProperties.set(t,s)}this._$Eh=new Map;for(const[t,e]of this.elementProperties){const s=this._$Eu(t,e);void 0!==s&&this._$Eh.set(s,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const s=new Set(t.flat(1/0).reverse());for(const t of s)e.unshift(S(t))}else void 0!==t&&e.push(S(t));return e}static _$Eu(t,e){const s=e.attribute;return!1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(t=>t(this))}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$EO?.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const s of e.keys())this.hasOwnProperty(s)&&(t.set(s,this[s]),delete this[s]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return((t,e)=>{if(_)t.adoptedStyleSheets=e.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const s of e){const e=document.createElement("style"),i=y.litNonce;void 0!==i&&e.setAttribute("nonce",i),e.textContent=s.cssText,t.appendChild(e)}})(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(t=>t.hostConnected?.())}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach(t=>t.hostDisconnected?.())}attributeChangedCallback(t,e,s){this._$AK(t,s)}_$ET(t,e){const s=this.constructor.elementProperties.get(t),i=this.constructor._$Eu(t,s);if(void 0!==i&&!0===s.reflect){const n=(void 0!==s.converter?.toAttribute?s.converter:N).toAttribute(e,s.type);this._$Em=t,null==n?this.removeAttribute(i):this.setAttribute(i,n),this._$Em=null}}_$AK(t,e){const s=this.constructor,i=s._$Eh.get(t);if(void 0!==i&&this._$Em!==i){const t=s.getPropertyOptions(i),n="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:N;this._$Em=i;const o=n.fromAttribute(e,t.type);this[i]=o??this._$Ej?.get(i)??o,this._$Em=null}}requestUpdate(t,e,s){if(void 0!==t){const i=this.constructor,n=this[t];if(s??=i.getPropertyOptions(t),!((s.hasChanged??L)(n,e)||s.useDefault&&s.reflect&&n===this._$Ej?.get(t)&&!this.hasAttribute(i._$Eu(t,s))))return;this.C(t,e,s)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(t,e,{useDefault:s,reflect:i,wrapped:n},o){s&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,o??e??this[t]),!0!==n||void 0!==o)||(this._$AL.has(t)||(this.hasUpdated||s||(e=void 0),this._$AL.set(t,e)),!0===i&&this._$Em!==t&&(this._$Eq??=new Set).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,e]of this._$Ep)this[t]=e;this._$Ep=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[e,s]of t){const{wrapped:t}=s,i=this[e];!0!==t||this._$AL.has(e)||void 0===i||this.C(e,void 0,s,i)}}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),this._$EO?.forEach(t=>t.hostUpdate?.()),this.update(e)):this._$EM()}catch(e){throw t=!1,this._$EM(),e}t&&this._$AE(e)}willUpdate(t){}_$AE(t){this._$EO?.forEach(t=>t.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&=this._$Eq.forEach(t=>this._$ET(t,this[t])),this._$EM()}updated(t){}firstUpdated(t){}}z.elementStyles=[],z.shadowRootOptions={mode:"open"},z[R("elementProperties")]=new Map,z[R("finalized")]=new Map,H?.({ReactiveElement:z}),(T.reactiveElementVersions??=[]).push("2.1.1");
|
|
23
23
|
/**
|
|
24
24
|
* @license
|
|
25
25
|
* Copyright 2017 Google LLC
|
|
@@ -36,7 +36,7 @@ const D={attribute:!0,type:String,converter:N,reflect:!1,hasChanged:L},W=(t=D,e,
|
|
|
36
36
|
* Copyright 2017 Google LLC
|
|
37
37
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
38
38
|
*/
|
|
39
|
-
function q(t,e){return(e,s,i)=>((t,e,s)=>(s.configurable=!0,s.enumerable=!0,Reflect.decorate&&"object"!=typeof e&&Object.defineProperty(t,e,s),s))(e,s,{get(){return(e=>e.renderRoot?.querySelector(t)??null)(this)}})}var V,K,Z,F,J,G,Q,X,Y,tt,et,st,it,nt,ot;let rt=ot=class extends(n(t,"tree")){constructor(){super(),V.add(this),K.set(this,!1),Z.set(this,!1),this[nt]=(new u).withVerticalOrientation().withHomeAndEnd().withTypeahead().withSkipPredicate(t=>t.disabled||!t.visible).disableRovingTabIndex().onActiveItemChange(()=>{this[f].activeItem&&g(this,V,"m",et).call(this,this[f].activeItem)}).onSelectedItemsChange(()=>{const t=this.selected;for(const e of this.items)e!==t&&g(this,V,"m",it).call(this,e,!1,!1)}),F.set(this,t=>g(this,V,"m",X).call(this,t)),J.set(this,t=>g(this,V,"m",Y).call(this,t)),G.set(this,t=>g(this,V,"m",tt).call(this,t)),new
|
|
39
|
+
function q(t,e){return(e,s,i)=>((t,e,s)=>(s.configurable=!0,s.enumerable=!0,Reflect.decorate&&"object"!=typeof e&&Object.defineProperty(t,e,s),s))(e,s,{get(){return(e=>e.renderRoot?.querySelector(t)??null)(this)}})}var V,K,Z,F,J,G,Q,X,Y,tt,et,st,it,nt,ot;let rt=ot=class extends(n(t,"tree")){constructor(){super(),V.add(this),K.set(this,!1),Z.set(this,!1),this[nt]=(new u).withVerticalOrientation().withHomeAndEnd().withTypeahead().withSkipPredicate(t=>t.disabled||!t.visible).disableRovingTabIndex().onActiveItemChange(()=>{this[f].activeItem&&g(this,V,"m",et).call(this,this[f].activeItem)}).onSelectedItemsChange(()=>{const t=this.selected;for(const e of this.items)e!==t&&g(this,V,"m",it).call(this,e,!1,!1);t?.label&&o(t.label,this,{block:"start",behavior:"smooth"})}),F.set(this,t=>g(this,V,"m",X).call(this,t)),J.set(this,t=>g(this,V,"m",Y).call(this,t)),G.set(this,t=>g(this,V,"m",tt).call(this,t)),new r(this,{callback:t=>$(this,Z,t,"f")}),new a(this,{callback:()=>{g(this,Z,"f")||g(this,V,"m",st).call(this)}})}get selected(){return this[f].selectedItems[0]??null}get items(){return this[f].items}expand(t){(t??this[f].items).forEach(t=>t.expand())}collapse(t){(t??this[f].items).forEach(t=>t.collapse());const e=this[f].activeItem;if(e&&!e.visible)for(let t=e.parentItem;t;t=t.parentItem)if(t.visible){this[f].setActiveItem(t);break}}connectedCallback(){super.connectedCallback(),this.setAttribute("tabindex","0"),this.addEventListener("keydown",g(this,F,"f")),this.addEventListener("keyup",g(this,J,"f")),this.addEventListener("pointerdown",g(this,G,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",g(this,F,"f")),this.removeEventListener("keyup",g(this,J,"f")),this.removeEventListener("pointerdown",g(this,G,"f"))}render(){return e`<slot @slotchange="${g(this,V,"m",Q)}"></slot>`}};K=new WeakMap,Z=new WeakMap,F=new WeakMap,J=new WeakMap,G=new WeakMap,V=new WeakSet,nt=f,Q=function(){const{added:t}=this[f].setItems([...this.querySelectorAll("m3e-nav-menu-item")]);for(const e of t)e.id=e.id||"m3e-nav-menu-item-"+ot.__nextId++;this[f].activeItem?(this.setAttribute("aria-activedescendant",this[f].activeItem.id),g(this,V,"m",st).call(this)):this.removeAttribute("aria-activedescendant")},X=function(t){$(this,K,!1,"f"),g(this,V,"m",st).call(this);const e=this[f].activeItem;if(!t.defaultPrevented&&e&&!e.disabled)switch(t.key){case"Enter":case" ":t.preventDefault(),e.ripple&&!e.ripple.visible&&e.ripple.show(0,0,!0),e.hasChildItems?e.toggle():e.selected||(this[f].select(e),e.link?.click());break;case"*":t.preventDefault(),e.expand(!0);break;case"Left":case"ArrowLeft":if(t.preventDefault(),e.hasChildItems&&e.open)e.collapse();else{const t=e.parentItem;t&&(t.collapse(),this[f].setActiveItem(t))}break;case"Right":case"ArrowRight":if(e.hasChildItems)if(e.open)try{this[f].vertical=!1,this[f].onKeyDown(t)}finally{this[f].vertical=!0}else t.preventDefault(),e.expand();else t.preventDefault();break;default:this[f].onKeyDown(t)}},Y=function(t){const e=this[f].activeItem;if(!t.defaultPrevented&&e&&!e.disabled)switch(t.key){case"Enter":case" ":e.ripple?.hide()}},tt=function(t){t.defaultPrevented||g(this,K,"f")||($(this,K,!0,"f"),this[f].activeItem&&g(this,V,"m",it).call(this,this[f].activeItem,!0,!1))},et=function(t){this.setAttribute("aria-activedescendant",t.id),t.label&&o(t.label,this,{block:"nearest",behavior:"smooth"}),g(this,V,"m",st).call(this)},st=function(){const t=this.matches(":focus")||this.matches(":focus-within"),e=!g(this,K,"f")&&this.matches(":focus-visible");this[f].items.forEach(s=>{const i=s===this[f].activeItem;g(this,V,"m",it).call(this,s,i&&t,i&&e)})},it=function(t,e,s){e?t.stateLayer?.show("focused"):t.stateLayer?.hide("focused"),s?t.focusRing?.show():t.focusRing?.hide()},rt.styles=s`
|
|
40
40
|
:host {
|
|
41
41
|
display: flex;
|
|
42
42
|
flex-direction: column;
|
|
@@ -49,19 +49,19 @@ function q(t,e){return(e,s,i)=>((t,e,s)=>(s.configurable=!0,s.enumerable=!0,Refl
|
|
|
49
49
|
padding-block-end: var(--m3e-nav-menu-padding-bottom, 0.5rem);
|
|
50
50
|
padding-inline-start: var(--m3e-nav-menu-padding-left, 0.75rem);
|
|
51
51
|
padding-inline-end: var(--m3e-nav-menu-padding-right, 0.75rem);
|
|
52
|
-
scrollbar-width: ${
|
|
53
|
-
scrollbar-color: ${
|
|
52
|
+
scrollbar-width: ${l.scrollbar.width};
|
|
53
|
+
scrollbar-color: ${l.scrollbar.color};
|
|
54
54
|
}
|
|
55
55
|
::slotted(m3e-divider) {
|
|
56
56
|
margin-block: var(--m3e-nav-menu-divider-margin, 0.25rem);
|
|
57
57
|
}
|
|
58
|
-
`,rt.__nextId=0,rt=ot=v([
|
|
58
|
+
`,rt.__nextId=0,rt=ot=v([b("m3e-nav-menu")],rt);
|
|
59
59
|
/**
|
|
60
60
|
* @license
|
|
61
61
|
* Copyright 2017 Google LLC
|
|
62
62
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
63
63
|
*/
|
|
64
|
-
const at=globalThis,lt=at.trustedTypes,ht=lt?lt.createPolicy("lit-html",{createHTML:t=>t}):void 0,ct="$lit$",dt=`lit$${Math.random().toFixed(9).slice(2)}$`,mt="?"+dt,pt=`<${mt}>`,ut=document,ft=()=>ut.createComment(""),vt=t=>null===t||"object"!=typeof t&&"function"!=typeof t,gt=Array.isArray,$t="[ \t\n\f\r]",
|
|
64
|
+
const at=globalThis,lt=at.trustedTypes,ht=lt?lt.createPolicy("lit-html",{createHTML:t=>t}):void 0,ct="$lit$",dt=`lit$${Math.random().toFixed(9).slice(2)}$`,mt="?"+dt,pt=`<${mt}>`,ut=document,ft=()=>ut.createComment(""),vt=t=>null===t||"object"!=typeof t&&"function"!=typeof t,gt=Array.isArray,$t="[ \t\n\f\r]",bt=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,yt=/-->/g,_t=/>/g,At=RegExp(`>|${$t}(?:([^\\s"'>=/]+)(${$t}*=${$t}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),wt=/'/g,Et=/"/g,St=/^(?:script|style|textarea|title)$/i,Ct=Symbol.for("lit-noChange"),kt=Symbol.for("lit-nothing"),xt=new WeakMap,Pt=ut.createTreeWalker(ut,129);function It(t,e){if(!gt(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==ht?ht.createHTML(e):e}const Mt=(t,e)=>{const s=t.length-1,i=[];let n,o=2===e?"<svg>":3===e?"<math>":"",r=bt;for(let e=0;e<s;e++){const s=t[e];let a,l,h=-1,c=0;for(;c<s.length&&(r.lastIndex=c,l=r.exec(s),null!==l);)c=r.lastIndex,r===bt?"!--"===l[1]?r=yt:void 0!==l[1]?r=_t:void 0!==l[2]?(St.test(l[2])&&(n=RegExp("</"+l[2],"g")),r=At):void 0!==l[3]&&(r=At):r===At?">"===l[0]?(r=n??bt,h=-1):void 0===l[1]?h=-2:(h=r.lastIndex-l[2].length,a=l[1],r=void 0===l[3]?At:'"'===l[3]?Et:wt):r===Et||r===wt?r=At:r===yt||r===_t?r=bt:(r=At,n=void 0);const d=r===At&&t[e+1].startsWith("/>")?" ":"";o+=r===bt?s+pt:h>=0?(i.push(a),s.slice(0,h)+ct+s.slice(h)+dt+d):s+dt+(-2===h?e:d)}return[It(t,o+(t[s]||"<?>")+(2===e?"</svg>":3===e?"</math>":"")),i]};class Tt{constructor({strings:t,_$litType$:e},s){let i;this.parts=[];let n=0,o=0;const r=t.length-1,a=this.parts,[l,h]=Mt(t,e);if(this.el=Tt.createElement(l,s),Pt.currentNode=this.el.content,2===e||3===e){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(i=Pt.nextNode())&&a.length<r;){if(1===i.nodeType){if(i.hasAttributes())for(const t of i.getAttributeNames())if(t.endsWith(ct)){const e=h[o++],s=i.getAttribute(t).split(dt),r=/([.?@])?(.*)/.exec(e);a.push({type:1,index:n,name:r[2],strings:s,ctor:"."===r[1]?Nt:"?"===r[1]?Lt:"@"===r[1]?jt:Rt}),i.removeAttribute(t)}else t.startsWith(dt)&&(a.push({type:6,index:n}),i.removeAttribute(t));if(St.test(i.tagName)){const t=i.textContent.split(dt),e=t.length-1;if(e>0){i.textContent=lt?lt.emptyScript:"";for(let s=0;s<e;s++)i.append(t[s],ft()),Pt.nextNode(),a.push({type:2,index:++n});i.append(t[e],ft())}}}else if(8===i.nodeType)if(i.data===mt)a.push({type:2,index:n});else{let t=-1;for(;-1!==(t=i.data.indexOf(dt,t+1));)a.push({type:7,index:n}),t+=dt.length-1}n++}}static createElement(t,e){const s=ut.createElement("template");return s.innerHTML=t,s}}function Ut(t,e,s=t,i){if(e===Ct)return e;let n=void 0!==i?s._$Co?.[i]:s._$Cl;const o=vt(e)?void 0:e._$litDirective$;return n?.constructor!==o&&(n?._$AO?.(!1),void 0===o?n=void 0:(n=new o(t),n._$AT(t,s,i)),void 0!==i?(s._$Co??=[])[i]=n:s._$Cl=n),void 0!==n&&(e=Ut(t,n._$AS(t,e.values),n,i)),e}class Ot{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:e},parts:s}=this._$AD,i=(t?.creationScope??ut).importNode(e,!0);Pt.currentNode=i;let n=Pt.nextNode(),o=0,r=0,a=s[0];for(;void 0!==a;){if(o===a.index){let e;2===a.type?e=new Ht(n,n.nextSibling,this,t):1===a.type?e=new a.ctor(n,a.name,a.strings,this,t):6===a.type&&(e=new zt(n,this,t)),this._$AV.push(e),a=s[++r]}o!==a?.index&&(n=Pt.nextNode(),o++)}return Pt.currentNode=ut,i}p(t){let e=0;for(const s of this._$AV)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,e),e+=s.strings.length-2):s._$AI(t[e])),e++}}class Ht{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,e,s,i){this.type=2,this._$AH=kt,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=s,this.options=i,this._$Cv=i?.isConnected??!0}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===t?.nodeType&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=Ut(this,t,e),vt(t)?t===kt||null==t||""===t?(this._$AH!==kt&&this._$AR(),this._$AH=kt):t!==this._$AH&&t!==Ct&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):(t=>gt(t)||"function"==typeof t?.[Symbol.iterator])(t)?this.k(t):this._(t)}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}_(t){this._$AH!==kt&&vt(this._$AH)?this._$AA.nextSibling.data=t:this.T(ut.createTextNode(t)),this._$AH=t}$(t){const{values:e,_$litType$:s}=t,i="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=Tt.createElement(It(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===i)this._$AH.p(e);else{const t=new Ot(i,this),s=t.u(this.options);t.p(e),this.T(s),this._$AH=t}}_$AC(t){let e=xt.get(t.strings);return void 0===e&&xt.set(t.strings,e=new Tt(t)),e}k(t){gt(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let s,i=0;for(const n of t)i===e.length?e.push(s=new Ht(this.O(ft()),this.O(ft()),this,this.options)):s=e[i],s._$AI(n),i++;i<e.length&&(this._$AR(s&&s._$AB.nextSibling,i),e.length=i)}_$AR(t=this._$AA.nextSibling,e){for(this._$AP?.(!1,!0,e);t!==this._$AB;){const e=t.nextSibling;t.remove(),t=e}}setConnected(t){void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t))}}class Rt{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,s,i,n){this.type=1,this._$AH=kt,this._$AN=void 0,this.element=t,this.name=e,this._$AM=i,this.options=n,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=kt}_$AI(t,e=this,s,i){const n=this.strings;let o=!1;if(void 0===n)t=Ut(this,t,e,0),o=!vt(t)||t!==this._$AH&&t!==Ct,o&&(this._$AH=t);else{const i=t;let r,a;for(t=n[0],r=0;r<n.length-1;r++)a=Ut(this,i[s+r],e,r),a===Ct&&(a=this._$AH[r]),o||=!vt(a)||a!==this._$AH[r],a===kt?t=kt:t!==kt&&(t+=(a??"")+n[r+1]),this._$AH[r]=a}o&&!i&&this.j(t)}j(t){t===kt?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class Nt extends Rt{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===kt?void 0:t}}class Lt extends Rt{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==kt)}}class jt extends Rt{constructor(t,e,s,i,n){super(t,e,s,i,n),this.type=5}_$AI(t,e=this){if((t=Ut(this,t,e,0)??kt)===Ct)return;const s=this._$AH,i=t===kt&&s!==kt||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,n=t!==kt&&(s===kt||i);i&&this.element.removeEventListener(this.name,this,s),n&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t)}}class zt{constructor(t,e,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){Ut(this,t)}}const Dt=at.litHtmlPolyfillSupport;Dt?.(Tt,Ht),(at.litHtmlVersions??=[]).push("3.3.1");var Wt,Bt,qt,Vt,Kt,Zt,Ft,Jt,Gt,Qt,Xt,Yt;let te=Yt=class extends(h(c(d(m(n(t,"treeitem"),!0),"opening","opened","closing","closed")))){constructor(){super(...arguments),Wt.add(this),this._hasChildItems=!1,Bt.set(this,[]),qt.set(this,null),Vt.set(this,new Array),Kt.set(this,null),this.open=!1}get link(){return g(this,Kt,"f")}get label(){return this._base??null}get visible(){return!g(this,Vt,"f").some(t=>!t.open)}get path(){return[...g(this,Vt,"f"),this]}get hasChildItems(){return this._hasChildItems}get parentItem(){return g(this,Vt,"f")[g(this,Vt,"f").length-1]??null}get childItems(){return g(this,Bt,"f")}get level(){return g(this,Vt,"f").length+1}expand(t=!1){this.hasChildItems&&(this.open=!0,t&&this.childItems.forEach(t=>t.expand(!0)))}collapse(t=!1){this.hasChildItems&&(this.open=!1,t&&this.childItems.forEach(t=>t.collapse(!0)))}toggle(){this.hasChildItems&&(this.open=!this.open)}connectedCallback(){super.connectedCallback(),g(this,Vt,"f").length=0;for(let t=this.parentElement?.closest("m3e-nav-menu-item");t;t=t.parentElement?.closest("m3e-nav-menu-item"))g(this,Vt,"f").push(t);g(this,Vt,"f").reverse(),this.style.setProperty("--_nav-menu-item-level",`${this.level}`),$(this,qt,this.closest("m3e-nav-menu"),"f")}disconnectedCallback(){super.disconnectedCallback(),g(this,Vt,"f").length=0}update(t){if(super.update(t),t.has("selected")){this.ariaCurrent=this.hasChildItems?null:`${this.selected}`;for(const t of this.querySelectorAll(":scope > m3e-icon[slot]"))t.toggleAttribute("filled",this.selected);g(this,Vt,"f").forEach(t=>t.selected=this.selected),this.selected&&!this.hasChildItems&&this.closest("m3e-nav-menu")?.[f].notifySelectionChange(this)}}firstUpdated(t){super.firstUpdated(t);const e=this._base;e&&[this.focusRing,this.stateLayer,this.ripple].forEach(t=>t?.attach(e))}render(){return e`<div class="base" @click="${g(this,Wt,"m",Qt)}">
|
|
65
65
|
<m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer>
|
|
66
66
|
<m3e-focus-ring class="focus-ring" inward ?disabled="${this.disabled}"></m3e-focus-ring>
|
|
67
67
|
<m3e-ripple class="ripple" centered ?disabled="${this.disabled}"></m3e-ripple>
|
|
@@ -89,29 +89,29 @@ const at=globalThis,lt=at.trustedTypes,ht=lt?lt.createPolicy("lit-html",{createH
|
|
|
89
89
|
@closed="${g(this,Wt,"m",Xt)}"
|
|
90
90
|
>
|
|
91
91
|
<slot @slotchange="${g(this,Wt,"m",Gt)}"></slot>
|
|
92
|
-
</m3e-collapsible>`}};Bt=new WeakMap,qt=new WeakMap,Vt=new WeakMap,Kt=new WeakMap,Wt=new WeakSet,Zt=function(){const t=e`<slot name="icon" @slotchange="${g(this,Wt,"m",Ft)}"></slot>`;return this.selected&&!this.hasChildItems?e`<slot name="selected-icon" @slotchange="${g(this,Wt,"m",Ft)}">${t}</slot>`:t},Ft=function(t){this.classList.toggle("-with-icon",p(t.target))},Jt=function(t){$(this,Kt,t.target.assignedElements({flatten:!0}).find(t=>t instanceof HTMLAnchorElement)??null,"f"),g(this,Kt,"f")?.setAttribute("tabindex","-1")},Gt=function(t){$(this,Bt,t.target.assignedElements({flatten:!0}).filter(t=>t instanceof Yt),"f");const e=this._hasChildItems;this._hasChildItems=g(this,Bt,"f").length>0,this.classList.toggle("-has-items",this._hasChildItems),(e||this._hasChildItems)&&(this.selected=g(this,Bt,"f").some(t=>t.selected))},Qt=function(){this.disabled
|
|
92
|
+
</m3e-collapsible>`}};Bt=new WeakMap,qt=new WeakMap,Vt=new WeakMap,Kt=new WeakMap,Wt=new WeakSet,Zt=function(){const t=e`<slot name="icon" @slotchange="${g(this,Wt,"m",Ft)}"></slot>`;return this.selected&&!this.hasChildItems?e`<slot name="selected-icon" @slotchange="${g(this,Wt,"m",Ft)}">${t}</slot>`:t},Ft=function(t){this.classList.toggle("-with-icon",p(t.target))},Jt=function(t){$(this,Kt,t.target.assignedElements({flatten:!0}).find(t=>t instanceof HTMLAnchorElement)??null,"f"),g(this,Kt,"f")?.setAttribute("tabindex","-1")},Gt=function(t){$(this,Bt,t.target.assignedElements({flatten:!0}).filter(t=>t instanceof Yt),"f");const e=this._hasChildItems;this._hasChildItems=g(this,Bt,"f").length>0,this.classList.toggle("-has-items",this._hasChildItems),(e||this._hasChildItems)&&(this.selected=g(this,Bt,"f").some(t=>t.selected))},Qt=function(){if(!this.disabled)if(g(this,qt,"f")?.[f].setActiveItem(this),this._hasChildItems)this.toggle();else{g(this,qt,"f")?.[f].select(this),g(this,Vt,"f").forEach(t=>t.selected=this.selected),g(this,Kt,"f")?.click();const t=this.closest("m3e-drawer-container");if(t){const e=this.closest("[slot='start']")??this.closest("[slot='end')");e&&(t.classList.contains(`-${e.slot}-push`)||t.classList.contains(`-${e.slot}-over`))&&setTimeout(()=>t.removeAttribute(e.slot),300)}}},Xt=function(t){t.stopPropagation(),this.dispatchEvent(new Event(t.type,{bubbles:!0}))},te.styles=s`
|
|
93
93
|
:host {
|
|
94
94
|
display: block;
|
|
95
95
|
flex: none;
|
|
96
96
|
outline: none;
|
|
97
97
|
position: relative;
|
|
98
|
-
font-size: var(--m3e-nav-menu-item-font-size, ${
|
|
99
|
-
font-weight: var(--m3e-nav-menu-item-font-weight, ${
|
|
100
|
-
line-height: var(--m3e-nav-menu-item-line-height, ${
|
|
101
|
-
letter-spacing: var(--m3e-nav-menu-item-tracking, ${
|
|
98
|
+
font-size: var(--m3e-nav-menu-item-font-size, ${l.typescale.standard.label.large.fontSize});
|
|
99
|
+
font-weight: var(--m3e-nav-menu-item-font-weight, ${l.typescale.standard.label.large.fontWeight});
|
|
100
|
+
line-height: var(--m3e-nav-menu-item-line-height, ${l.typescale.standard.label.large.lineHeight});
|
|
101
|
+
letter-spacing: var(--m3e-nav-menu-item-tracking, ${l.typescale.standard.label.large.tracking});
|
|
102
102
|
}
|
|
103
103
|
.base {
|
|
104
104
|
display: flex;
|
|
105
105
|
align-items: center;
|
|
106
106
|
position: relative;
|
|
107
107
|
padding-inline: var(--m3e-nav-menu-item-padding, 1.5rem);
|
|
108
|
-
height: calc(var(--m3e-nav-menu-item-height, 3.5rem) + ${
|
|
108
|
+
height: calc(var(--m3e-nav-menu-item-height, 3.5rem) + ${l.density.calc(-3)});
|
|
109
109
|
column-gap: var(--m3e-nav-menu-item-spacing, 0.75rem);
|
|
110
|
-
transition: ${i(`color ${
|
|
110
|
+
transition: ${i(`color ${l.motion.duration.short4} ${l.motion.easing.standard},\n background-color ${l.motion.duration.short4} ${l.motion.easing.standard}`)};
|
|
111
111
|
}
|
|
112
112
|
.base,
|
|
113
113
|
.focus-ring {
|
|
114
|
-
border-radius: var(--m3e-nav-menu-item-shape, ${
|
|
114
|
+
border-radius: var(--m3e-nav-menu-item-shape, ${l.shape.corner.full});
|
|
115
115
|
}
|
|
116
116
|
.label {
|
|
117
117
|
flex: 1 1 auto;
|
|
@@ -133,13 +133,13 @@ const at=globalThis,lt=at.trustedTypes,ht=lt?lt.createPolicy("lit-html",{createH
|
|
|
133
133
|
::slotted([slot="badge"]) {
|
|
134
134
|
flex: none;
|
|
135
135
|
position: relative;
|
|
136
|
-
font-size: var(--m3e-nav-menu-item-badge-font-size, ${
|
|
137
|
-
font-weight: var(--m3e-nav-menu-item-badge-font-weight, ${
|
|
138
|
-
line-height: var(--m3e-nav-menu-item-badge-line-height, ${
|
|
139
|
-
letter-spacing: var(--m3e-nav-menu-badge-item-tracking, ${
|
|
136
|
+
font-size: var(--m3e-nav-menu-item-badge-font-size, ${l.typescale.standard.label.large.fontSize});
|
|
137
|
+
font-weight: var(--m3e-nav-menu-item-badge-font-weight, ${l.typescale.standard.label.large.fontWeight});
|
|
138
|
+
line-height: var(--m3e-nav-menu-item-badge-line-height, ${l.typescale.standard.label.large.lineHeight});
|
|
139
|
+
letter-spacing: var(--m3e-nav-menu-badge-item-tracking, ${l.typescale.standard.label.large.tracking});
|
|
140
140
|
}
|
|
141
141
|
.toggle {
|
|
142
|
-
transition: ${i(`transform var(--m3e-collapsible-animation-duration, ${
|
|
142
|
+
transition: ${i(`transform var(--m3e-collapsible-animation-duration, ${l.motion.duration.medium1})\n ${l.motion.easing.standard}`)};
|
|
143
143
|
}
|
|
144
144
|
:host(:not(.-with-icon)) .icon {
|
|
145
145
|
display: none;
|
|
@@ -173,54 +173,54 @@ const at=globalThis,lt=at.trustedTypes,ht=lt?lt.createPolicy("lit-html",{createH
|
|
|
173
173
|
cursor: pointer;
|
|
174
174
|
}
|
|
175
175
|
:host(:not(:disabled)) .base {
|
|
176
|
-
color: var(--m3e-nav-menu-item-label-color, ${
|
|
176
|
+
color: var(--m3e-nav-menu-item-label-color, ${l.color.onSurfaceVariant});
|
|
177
177
|
}
|
|
178
178
|
:host(:disabled) .base {
|
|
179
179
|
color: color-mix(
|
|
180
180
|
in srgb,
|
|
181
|
-
var(--m3e-nav-menu-item-disabled-color, ${
|
|
181
|
+
var(--m3e-nav-menu-item-disabled-color, ${l.color.onSurface})
|
|
182
182
|
var(--m3e-nav-menu-item-disabled-color-opacity, 38%),
|
|
183
183
|
transparent
|
|
184
184
|
);
|
|
185
185
|
}
|
|
186
186
|
:host([selected]:not(.-has-items):not(:disabled)) .base {
|
|
187
|
-
color: var(--m3e-nav-menu-item-selected-label-color, ${
|
|
188
|
-
background-color: var(--m3e-nav-menu-item-selected-container-color, ${
|
|
187
|
+
color: var(--m3e-nav-menu-item-selected-label-color, ${l.color.onSecondaryContainer});
|
|
188
|
+
background-color: var(--m3e-nav-menu-item-selected-container-color, ${l.color.secondaryContainer});
|
|
189
189
|
--m3e-state-layer-focus-color: var(
|
|
190
190
|
--m3e-nav-menu-item-selected-container-focus-color,
|
|
191
|
-
${
|
|
191
|
+
${l.color.onSecondaryContainer}
|
|
192
192
|
);
|
|
193
193
|
--m3e-state-layer-hover-color: var(
|
|
194
194
|
--m3e-nav-menu-item-selected-container-hover-color,
|
|
195
|
-
${
|
|
195
|
+
${l.color.onSecondaryContainer}
|
|
196
196
|
);
|
|
197
|
-
--m3e-ripple-color: var(--m3e-nav-menu-item-selected-ripple-color, ${
|
|
197
|
+
--m3e-ripple-color: var(--m3e-nav-menu-item-selected-ripple-color, ${l.color.onSecondaryContainer});
|
|
198
198
|
}
|
|
199
199
|
:host(:not([selected]):not(.-has-items):not(:disabled)) .base {
|
|
200
200
|
--m3e-state-layer-focus-color: var(
|
|
201
201
|
--m3e-nav-menu-item-unselected-container-focus-color,
|
|
202
|
-
${
|
|
202
|
+
${l.color.onSurface}
|
|
203
203
|
);
|
|
204
204
|
--m3e-state-layer-hover-color: var(
|
|
205
205
|
--m3e-nav-menu-item-unselected-container-hover-color,
|
|
206
|
-
${
|
|
206
|
+
${l.color.onSurface}
|
|
207
207
|
);
|
|
208
|
-
--m3e-ripple-color: var(--m3e-nav-menu-item-unselected-ripple-color, ${
|
|
208
|
+
--m3e-ripple-color: var(--m3e-nav-menu-item-unselected-ripple-color, ${l.color.onSurface});
|
|
209
209
|
}
|
|
210
210
|
.state-layer {
|
|
211
211
|
margin-inline: auto;
|
|
212
212
|
}
|
|
213
213
|
:host([selected].-has-items:not(:disabled)) .base {
|
|
214
|
-
background-color: var(--m3e-nav-menu-item-open-container-color, ${
|
|
214
|
+
background-color: var(--m3e-nav-menu-item-open-container-color, ${l.color.surfaceContainerHighest});
|
|
215
215
|
--m3e-state-layer-focus-color: var(
|
|
216
216
|
--m3e-nav-menu-item-open-container-focus-color,
|
|
217
|
-
${
|
|
217
|
+
${l.color.onSurface}
|
|
218
218
|
);
|
|
219
219
|
--m3e-state-layer-hover-color: var(
|
|
220
220
|
--m3e-nav-menu-item-open-container-hover-color,
|
|
221
|
-
${
|
|
221
|
+
${l.color.onSurface}
|
|
222
222
|
);
|
|
223
|
-
--m3e-ripple-color: var(--m3e-nav-menu-item-open-ripple-color, ${
|
|
223
|
+
--m3e-ripple-color: var(--m3e-nav-menu-item-open-ripple-color, ${l.color.onSurface});
|
|
224
224
|
}
|
|
225
225
|
::slotted(a[slot="label"]) {
|
|
226
226
|
all: unset;
|
|
@@ -268,5 +268,5 @@ const at=globalThis,lt=at.trustedTypes,ht=lt?lt.createPolicy("lit-html",{createH
|
|
|
268
268
|
* @license
|
|
269
269
|
* Copyright 2017 Google LLC
|
|
270
270
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
271
|
-
*/()],te.prototype,"_hasChildItems",void 0),v([B({type:Boolean,reflect:!0})],te.prototype,"open",void 0),te=Yt=v([
|
|
271
|
+
*/()],te.prototype,"_hasChildItems",void 0),v([B({type:Boolean,reflect:!0})],te.prototype,"open",void 0),te=Yt=v([b("m3e-nav-menu-item")],te);export{rt as M3eNavMenuElement,te as M3eNavMenuItemElement};
|
|
272
272
|
//# sourceMappingURL=index.min.js.map
|