@m3e/menu 1.0.5 → 1.1.0
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 +3 -2
- package/dist/index.js +886 -748
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +7 -241
- package/dist/index.min.js.map +1 -1
- package/dist/src/MenuElement.d.ts.map +1 -1
- package/dist/src/MenuItemElement.d.ts.map +1 -1
- package/package.json +2 -16
package/dist/index.min.js
CHANGED
|
@@ -3,29 +3,29 @@
|
|
|
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 e,nothing as t,html as s,css as i,unsafeCSS as n}from"lit";import{KeyboardClick as o,Focusable as r,AttachInternals as a,Disabled as l,isLinkButtonMixin as c,renderPseudoLink as h,DesignToken as d,HtmlFor as u,LinkButton as m,Role as p,HoverController as f,hasAssignedNodes as v,ScrollController as b,Checked as g}from"@m3e/core";import{addAriaReferencedId as y,removeAriaReferencedId as w,RovingTabIndexManager as E}from"@m3e/core/a11y";import{positionAnchor as k}from"@m3e/core/anchoring";function
|
|
6
|
+
import{LitElement as e,nothing as t,html as s,css as i,unsafeCSS as n}from"lit";import{KeyboardClick as o,Focusable as r,AttachInternals as a,Disabled as l,isLinkButtonMixin as c,renderPseudoLink as h,DesignToken as d,HtmlFor as u,LinkButton as m,Role as p,HoverController as f,hasAssignedNodes as v,ScrollController as b,Checked as g}from"@m3e/core";import{addAriaReferencedId as y,removeAriaReferencedId as w,RovingTabIndexManager as E}from"@m3e/core/a11y";import{positionAnchor as k}from"@m3e/core/anchoring";import{M3eDirectionality as $}from"@m3e/core/bidi";function S(e,t,s,i){var n,o=arguments.length,r=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,s,i);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(r=(o<3?n(r):o>3?n(t,s,r):n(t,s))||r);return o>3&&r&&Object.defineProperty(t,s,r),r}function _(e,t,s,i){if("a"===s&&!i)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!i:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===s?i:"a"===s?i.call(e):i?i.value:t.get(e)}function C(e,t,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 t?e!==t||!n:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===i?n.call(e,s):n?n.value=s:t.set(e,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 x=e=>(t,s)=>{void 0!==s?s.addInitializer(()=>{customElements.define(e,t)}):customElements.define(e,t)},P=globalThis,L=P.ShadowRoot&&(void 0===P.ShadyCSS||P.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,M=Symbol(),A=new WeakMap;
|
|
13
13
|
/**
|
|
14
14
|
* @license
|
|
15
15
|
* Copyright 2019 Google LLC
|
|
16
16
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
17
|
-
*/let U=class{constructor(e,t,s){if(this._$cssResult$=!0,s!==
|
|
17
|
+
*/let U=class{constructor(e,t,s){if(this._$cssResult$=!0,s!==M)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o;const t=this.t;if(L&&void 0===e){const s=void 0!==t&&1===t.length;s&&(e=A.get(t)),void 0===e&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),s&&A.set(t,e))}return e}toString(){return this.cssText}};const O=(e,t)=>{if(L)e.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(const s of t){const t=document.createElement("style"),i=P.litNonce;void 0!==i&&t.setAttribute("nonce",i),t.textContent=s.cssText,e.appendChild(t)}},W=L?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t="";for(const s of e.cssRules)t+=s.cssText;return(e=>new U("string"==typeof e?e:e+"",void 0,M))(t)})(e):e,{is:T,defineProperty:R,getOwnPropertyDescriptor:z,getOwnPropertyNames:j,getOwnPropertySymbols:D,getPrototypeOf:q}=Object,N=globalThis,I=N.trustedTypes,B=I?I.emptyScript:"",K=N.reactiveElementPolyfillSupport,H=(e,t)=>e,Y={toAttribute(e,t){switch(t){case Boolean:e=e?B:null;break;case Object:case Array:e=null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){let s=e;switch(t){case Boolean:s=null!==e;break;case Number:s=null===e?null:Number(e);break;case Object:case Array:try{s=JSON.parse(e)}catch(e){s=null}}return s}},Z=(e,t)=>!T(e,t),X={attribute:!0,type:String,converter:Y,reflect:!1,useDefault:!1,hasChanged:Z};
|
|
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"),N.litPropertyMetadata??=new WeakMap;class J extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??=[]).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,t=X){if(t.state&&(t.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(e)&&((t=Object.create(t)).wrapped=!0),this.elementProperties.set(e,t),!t.noAccessor){const s=Symbol(),i=this.getPropertyDescriptor(e,s,t);void 0!==i&&R(this.prototype,e,i)}}static getPropertyDescriptor(e,t,s){const{get:i,set:n}=z(this.prototype,e)??{get(){return this[t]},set(e){this[t]=e}};return{get:i,set(t){const o=i?.call(this);n?.call(this,t),this.requestUpdate(e,o,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??X}static _$Ei(){if(this.hasOwnProperty(H("elementProperties")))return;const e=q(this);e.finalize(),void 0!==e.l&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(H("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(H("properties"))){const e=this.properties,t=[...j(e),...D(e)];for(const s of t)this.createProperty(s,e[s])}const e=this[Symbol.metadata];if(null!==e){const t=litPropertyMetadata.get(e);if(void 0!==t)for(const[e,s]of t)this.elementProperties.set(e,s)}this._$Eh=new Map;for(const[e,t]of this.elementProperties){const s=this._$Eu(e,t);void 0!==s&&this._$Eh.set(s,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){const t=[];if(Array.isArray(e)){const s=new Set(e.flat(1/0).reverse());for(const e of s)t.unshift(W(e))}else void 0!==e&&t.push(W(e));return t}static _$Eu(e,t){const s=t.attribute;return!1===s?void 0:"string"==typeof s?s:"string"==typeof e?e.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(e=>this.enableUpdating=e),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(e=>e(this))}addController(e){(this._$EO??=new Set).add(e),void 0!==this.renderRoot&&this.isConnected&&e.hostConnected?.()}removeController(e){this._$EO?.delete(e)}_$E_(){const e=new Map,t=this.constructor.elementProperties;for(const s of t.keys())this.hasOwnProperty(s)&&(e.set(s,this[s]),delete this[s]);e.size>0&&(this._$Ep=e)}createRenderRoot(){const e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return O(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(e=>e.hostConnected?.())}enableUpdating(e){}disconnectedCallback(){this._$EO?.forEach(e=>e.hostDisconnected?.())}attributeChangedCallback(e,t,s){this._$AK(e,s)}_$ET(e,t){const s=this.constructor.elementProperties.get(e),i=this.constructor._$Eu(e,s);if(void 0!==i&&!0===s.reflect){const n=(void 0!==s.converter?.toAttribute?s.converter:Y).toAttribute(t,s.type);this._$Em=e,null==n?this.removeAttribute(i):this.setAttribute(i,n),this._$Em=null}}_$AK(e,t){const s=this.constructor,i=s._$Eh.get(e);if(void 0!==i&&this._$Em!==i){const e=s.getPropertyOptions(i),n="function"==typeof e.converter?{fromAttribute:e.converter}:void 0!==e.converter?.fromAttribute?e.converter:Y;this._$Em=i;const o=n.fromAttribute(t,e.type);this[i]=o??this._$Ej?.get(i)??o,this._$Em=null}}requestUpdate(e,t,s){if(void 0!==e){const i=this.constructor,n=this[e];if(s??=i.getPropertyOptions(e),!((s.hasChanged??Z)(n,t)||s.useDefault&&s.reflect&&n===this._$Ej?.get(e)&&!this.hasAttribute(i._$Eu(e,s))))return;this.C(e,t,s)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(e,t,{useDefault:s,reflect:i,wrapped:n},o){s&&!(this._$Ej??=new Map).has(e)&&(this._$Ej.set(e,o??t??this[e]),!0!==n||void 0!==o)||(this._$AL.has(e)||(this.hasUpdated||s||(t=void 0),this._$AL.set(e,t)),!0===i&&this._$Em!==e&&(this._$Eq??=new Set).add(e))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const e=this.scheduleUpdate();return null!=e&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[e,t]of this._$Ep)this[e]=t;this._$Ep=void 0}const e=this.constructor.elementProperties;if(e.size>0)for(const[t,s]of e){const{wrapped:e}=s,i=this[t];!0!==e||this._$AL.has(t)||void 0===i||this.C(t,void 0,s,i)}}let e=!1;const t=this._$AL;try{e=this.shouldUpdate(t),e?(this.willUpdate(t),this._$EO?.forEach(e=>e.hostUpdate?.()),this.update(t)):this._$EM()}catch(t){throw e=!1,this._$EM(),t}e&&this._$AE(t)}willUpdate(e){}_$AE(e){this._$EO?.forEach(e=>e.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return!0}update(e){this._$Eq&&=this._$Eq.forEach(e=>this._$ET(e,this[e])),this._$EM()}updated(e){}firstUpdated(e){}}J.elementStyles=[],J.shadowRootOptions={mode:"open"},J[H("elementProperties")]=new Map,J[H("finalized")]=new Map,K?.({ReactiveElement:J}),(N.reactiveElementVersions??=[]).push("2.1.1");
|
|
23
23
|
/**
|
|
24
24
|
* @license
|
|
25
25
|
* Copyright 2017 Google LLC
|
|
26
26
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
27
27
|
*/
|
|
28
|
-
const
|
|
28
|
+
const V={attribute:!0,type:String,converter:Y,reflect:!1,hasChanged:Z},F=(e=V,t,s)=>{const{kind:i,metadata:n}=s;let o=globalThis.litPropertyMetadata.get(n);if(void 0===o&&globalThis.litPropertyMetadata.set(n,o=new Map),"setter"===i&&((e=Object.create(e)).wrapped=!0),o.set(s.name,e),"accessor"===i){const{name:i}=s;return{set(s){const n=t.get.call(this);t.set.call(this,s),this.requestUpdate(i,n,e)},init(t){return void 0!==t&&this.C(i,void 0,e,t),t}}}if("setter"===i){const{name:i}=s;return function(s){const n=this[i];t.call(this,s),this.requestUpdate(i,n,e)}}throw Error("Unsupported decorator location: "+i)};function G(e){return(t,s)=>"object"==typeof s?F(e,t,s):((e,t,s)=>{const i=t.hasOwnProperty(s);return t.constructor.createProperty(s,e),i?Object.getOwnPropertyDescriptor(t,s):void 0})(e,t,s)}
|
|
29
29
|
/**
|
|
30
30
|
* @license
|
|
31
31
|
* Copyright 2017 Google LLC
|
|
@@ -36,244 +36,10 @@ const J={attribute:!0,type:String,converter:Y,reflect:!1,hasChanged:K},V=(e=J,t,
|
|
|
36
36
|
* Copyright 2017 Google LLC
|
|
37
37
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
38
38
|
*/
|
|
39
|
-
function
|
|
40
|
-
<m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer>
|
|
41
|
-
<m3e-focus-ring class="focus-ring" inward ?disabled="${this.disabled}"></m3e-focus-ring>
|
|
42
|
-
<m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple>
|
|
43
|
-
<div class="touch" aria-hidden="true"></div>
|
|
44
|
-
${c(this)?this[h]():t}
|
|
45
|
-
<div class="wrapper">${this._renderContent()}</div>
|
|
46
|
-
</div>`}}var ee,te,se;Q.styles=i`
|
|
47
|
-
:host {
|
|
48
|
-
display: inline-block;
|
|
49
|
-
outline: none;
|
|
50
|
-
user-select: none;
|
|
51
|
-
flex: none;
|
|
52
|
-
height: var(--m3e-menu-item-container-height, 3rem);
|
|
53
|
-
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
54
|
-
}
|
|
55
|
-
:host(:not(:focus-visible)) .base {
|
|
56
|
-
--m3e-state-layer-focus-opacity: 0;
|
|
57
|
-
}
|
|
58
|
-
:host(:not(:disabled):not([aria-expanded="true"])) .base {
|
|
59
|
-
color: var(--m3e-menu-item-color, ${d.color.onSurface});
|
|
60
|
-
}
|
|
61
|
-
:host(:not([aria-expanded="true"])) .base {
|
|
62
|
-
--m3e-state-layer-hover-color: var(--m3e-menu-item-container-hover-color, ${d.color.onSurface});
|
|
63
|
-
--m3e-state-layer-focus-color: var(--m3e-menu-item-container-focus-color, ${d.color.onSurface});
|
|
64
|
-
--m3e-ripple-color: var(--m3e-menu-item-ripple-color, ${d.color.onSurface});
|
|
65
|
-
}
|
|
66
|
-
:host(:not(:disabled)[checked]) .base,
|
|
67
|
-
:host(:not(:disabled)[aria-expanded="true"]) .base {
|
|
68
|
-
color: var(--m3e-menu-selected-color, ${d.color.onSecondaryContainer});
|
|
69
|
-
background-color: var(--m3e-menu-selected-container-color, ${d.color.secondaryContainer});
|
|
70
|
-
}
|
|
71
|
-
:host([checked]) .base,
|
|
72
|
-
:host([aria-expanded="true"]) .base {
|
|
73
|
-
--m3e-state-layer-hover-color: var(
|
|
74
|
-
--m3e-menu-item-selected-container-hover-color,
|
|
75
|
-
${d.color.onSecondaryContainer}
|
|
76
|
-
);
|
|
77
|
-
--m3e-state-layer-focus-color: var(
|
|
78
|
-
--m3e-menu-item-selected-container-focus-color,
|
|
79
|
-
${d.color.onSecondaryContainer}
|
|
80
|
-
);
|
|
81
|
-
--m3e-ripple-color: var(--m3e-menu-item-selected-ripple-color, ${d.color.onSecondaryContainer});
|
|
82
|
-
}
|
|
83
|
-
:host(:not(:disabled)) {
|
|
84
|
-
cursor: pointer;
|
|
85
|
-
}
|
|
86
|
-
:host(:disabled) .base {
|
|
87
|
-
color: color-mix(
|
|
88
|
-
in srgb,
|
|
89
|
-
var(--m3e-menu-item-disabled-color, ${d.color.onSurface}) var(--m3e-menu-item-disabled-opacity, 38%),
|
|
90
|
-
transparent
|
|
91
|
-
);
|
|
92
|
-
}
|
|
93
|
-
.base {
|
|
94
|
-
box-sizing: border-box;
|
|
95
|
-
vertical-align: middle;
|
|
96
|
-
display: inline-flex;
|
|
97
|
-
align-items: center;
|
|
98
|
-
position: relative;
|
|
99
|
-
width: 100%;
|
|
100
|
-
height: 100%;
|
|
101
|
-
}
|
|
102
|
-
.touch {
|
|
103
|
-
position: absolute;
|
|
104
|
-
height: 3rem;
|
|
105
|
-
left: 0;
|
|
106
|
-
right: 0;
|
|
107
|
-
}
|
|
108
|
-
.wrapper {
|
|
109
|
-
display: inline-flex;
|
|
110
|
-
align-items: center;
|
|
111
|
-
column-gap: var(--m3e-menu-item-icon-label-space, 0.75rem);
|
|
112
|
-
padding-inline-start: var(--m3e-menu-item-padding-start, 0.75rem);
|
|
113
|
-
padding-inline-end: var(--m3e-menu-item-padding-end, 0.75rem);
|
|
114
|
-
font-size: var(--m3e-menu-item-label-text-font-size, ${d.typescale.standard.label.large.fontSize});
|
|
115
|
-
font-weight: var(
|
|
116
|
-
--m3e-menu-item-label-text-font-weight,
|
|
117
|
-
${d.typescale.standard.label.large.fontWeight}
|
|
118
|
-
);
|
|
119
|
-
line-height: var(
|
|
120
|
-
--m3e-menu-item-label-text-line-height,
|
|
121
|
-
${d.typescale.standard.label.large.lineHeight}
|
|
122
|
-
);
|
|
123
|
-
letter-spacing: var(--m3e-menu-item-label-text-tracking, ${d.typescale.standard.label.large.tracking});
|
|
124
|
-
}
|
|
125
|
-
.focus-ring {
|
|
126
|
-
border-radius: var(--m3e-menu-item-focus-ring-shape, ${d.shape.corner.medium});
|
|
127
|
-
}
|
|
128
|
-
.content {
|
|
129
|
-
flex: 1 1 auto;
|
|
130
|
-
overflow: hidden;
|
|
131
|
-
text-overflow: ellipsis;
|
|
132
|
-
white-space: nowrap;
|
|
133
|
-
}
|
|
134
|
-
::slotted([slot="icon"]),
|
|
135
|
-
::slotted([slot="trailing-icon"]),
|
|
136
|
-
.trailing-icon {
|
|
137
|
-
flex: none;
|
|
138
|
-
width: 1em;
|
|
139
|
-
font-size: var(--m3e-menu-item-icon-size, 1.5rem) !important;
|
|
140
|
-
}
|
|
141
|
-
@media (forced-colors: active) {
|
|
142
|
-
.base {
|
|
143
|
-
background-color: Menu;
|
|
144
|
-
color: MenuText;
|
|
145
|
-
}
|
|
146
|
-
:host(:disabled) .base {
|
|
147
|
-
color: GrayText;
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
`,$([G(".focus-ring")],Q.prototype,"_focusRing",void 0),$([G(".state-layer")],Q.prototype,"_stateLayer",void 0),$([G(".ripple")],Q.prototype,"_ripple",void 0);let ie=class extends(u(e)){constructor(){super(...arguments),ee.add(this),te.set(this,async e=>S(this,ee,"m",se).call(this,e))}get menu(){return"M3E-MENU"===this.control?.tagName?this.control:null}connectedCallback(){super.connectedCallback(),this.parentElement?.addEventListener("click",S(this,te,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.parentElement?.removeEventListener("click",S(this,te,"f"))}attach(e){super.attach(e);const t=this.menu;t&&(this.parentElement&&(this.parentElement.ariaHasPopup="menu",this.parentElement.ariaExpanded="false",t.id&&y(this.parentElement,"aria-controls",t.id)),this.closest("m3e-menu")&&(t.submenu=!0))}detach(){if(this.parentElement){this.parentElement.ariaHasPopup=null,this.parentElement.ariaExpanded=null;const e=this.menu;e?.id&&w(this.parentElement,"aria-controls",e.id)}super.detach()}render(){return s`<slot></slot>`}};var ne,oe,re,ae,le,ce,he,de,ue,me,pe,fe;te=new WeakMap,ee=new WeakSet,se=function(e){!e.defaultPrevented&&this.parentElement&&("M3E-MENU-ITEM"===this.parentElement.tagName?this.menu?.show(this.parentElement):this.menu?.toggle(this.parentElement))},ie.styles=i`
|
|
151
|
-
:host {
|
|
152
|
-
display: contents;
|
|
153
|
-
}
|
|
154
|
-
::slotted(.material-icons) {
|
|
155
|
-
font-size: inherit !important;
|
|
156
|
-
}
|
|
157
|
-
`,ie=$([C("m3e-menu-trigger")],ie);let ve=fe=class extends(m(p(Q,"menuitem"))){constructor(){super(),ne.add(this),oe.set(this,e=>S(this,ne,"m",ue).call(this,e)),re.set(this,e=>S(this,ne,"m",me).call(this,e)),ae.set(this,()=>S(this,ne,"m",pe).call(this)),this._hasSubmenu=!1,le.set(this,void 0),new f(this,{startDelay:500,endDelay:500,callback:e=>{e&&!this.disabled&&S(this,le,"f")&&S(this,le,"f").menu?.show(this)}})}get submenu(){return S(this,le,"f")?.menu??null}connectedCallback(){super.connectedCallback(),this.addEventListener("click",S(this,oe,"f")),this.addEventListener("keydown",S(this,re,"f")),this.addEventListener("mouseenter",S(this,ae,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",S(this,oe,"f")),this.removeEventListener("keydown",S(this,re,"f")),this.removeEventListener("mouseenter",S(this,ae,"f"))}_renderContent(){return s`<slot name="icon" aria-hidden="true" @slotchange="${S(this,ne,"m",he)}"></slot>
|
|
158
|
-
<span class="content"><slot @slotchange="${S(this,ne,"m",ce)}"></slot></span>
|
|
159
|
-
${this._hasSubmenu?s`<svg class="trailing-icon" aria-hidden="true" viewBox="0 -960 960 960" fill="currentColor">
|
|
160
|
-
<path d="M400-280v-400l200 200-200 200Z" />
|
|
161
|
-
</svg>`:s`<slot name="trailing-icon" aria-hidden="true" @slotchange="${S(this,ne,"m",de)}">
|
|
162
|
-
</slot>`}`}};var be,ge,ye,we,Ee,ke,$e,Se,_e,Ce,Pe,xe,Le;oe=new WeakMap,re=new WeakMap,ae=new WeakMap,le=new WeakMap,ne=new WeakSet,ce=function(e){_(this,le,e.target.assignedElements({flatten:!0}).find(e=>e instanceof ie),"f"),this._hasSubmenu=void 0!==S(this,le,"f")},he=function(e){this.classList.toggle("-with-icon",v(e.target))},de=function(e){this.classList.toggle("-with-trailing-icon",v(e.target))},ue=function(e){e.defaultPrevented||this._hasSubmenu||this.menu?.hideAll(!0)},me=function(e){if(!e.defaultPrevented&&!this.disabled)switch(e.key){case"Right":case"ArrowRight":e.preventDefault(),this.submenu?.show(this)}},pe=function(){this.menu?.items.forEach(e=>{e instanceof fe&&e!==this&&e.submenu?.isOpen&&e.submenu.hide()})},$([function(e){return F({...e,state:!0,attribute:!1})}
|
|
39
|
+
function Q(e,t){return(t,s,i)=>((e,t,s)=>(s.configurable=!0,s.enumerable=!0,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,s),s))(t,s,{get(){return(t=>t.renderRoot?.querySelector(e)??null)(this)}})}class ee extends(o(r(a(l(e),!0)))){get menu(){return this.closest("m3e-menu")}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}render(){return s`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" inward ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div>${c(this)?this[h]():t}<div class="wrapper">${this._renderContent()}</div></div>`}}var te,se,ie;ee.styles=i`:host { display: inline-block; outline: none; user-select: none; flex: none; height: var(--m3e-menu-item-container-height, 3rem); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:focus-visible)) .base { --m3e-state-layer-focus-opacity: 0; } :host(:not(:disabled):not([aria-expanded="true"])) .base { color: var(--m3e-menu-item-color, ${d.color.onSurface}); } :host(:not([aria-expanded="true"])) .base { --m3e-state-layer-hover-color: var(--m3e-menu-item-container-hover-color, ${d.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-menu-item-container-focus-color, ${d.color.onSurface}); --m3e-ripple-color: var(--m3e-menu-item-ripple-color, ${d.color.onSurface}); } :host(:not(:disabled)[checked]) .base, :host(:not(:disabled)[aria-expanded="true"]) .base { color: var(--m3e-menu-selected-color, ${d.color.onSecondaryContainer}); background-color: var(--m3e-menu-selected-container-color, ${d.color.secondaryContainer}); } :host([checked]) .base, :host([aria-expanded="true"]) .base { --m3e-state-layer-hover-color: var( --m3e-menu-item-selected-container-hover-color, ${d.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-menu-item-selected-container-focus-color, ${d.color.onSecondaryContainer} ); --m3e-ripple-color: var(--m3e-menu-item-selected-ripple-color, ${d.color.onSecondaryContainer}); } :host(:not(:disabled)) { cursor: pointer; } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-menu-item-disabled-color, ${d.color.onSurface}) var(--m3e-menu-item-disabled-opacity, 38%), transparent ); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; position: relative; width: 100%; height: 100%; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { display: inline-flex; align-items: center; column-gap: var(--m3e-menu-item-icon-label-space, 0.75rem); padding-inline-start: var(--m3e-menu-item-padding-start, 0.75rem); padding-inline-end: var(--m3e-menu-item-padding-end, 0.75rem); font-size: var(--m3e-menu-item-label-text-font-size, ${d.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-menu-item-label-text-font-weight, ${d.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-menu-item-label-text-line-height, ${d.typescale.standard.label.large.lineHeight} ); letter-spacing: var(--m3e-menu-item-label-text-tracking, ${d.typescale.standard.label.large.tracking}); } .focus-ring { border-radius: var(--m3e-menu-item-focus-ring-shape, ${d.shape.corner.medium}); } .content { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ::slotted([slot="icon"]), ::slotted([slot="trailing-icon"]), .trailing-icon { flex: none; width: 1em; font-size: var(--m3e-menu-item-icon-size, 1.5rem) !important; } @media (forced-colors: active) { .base { background-color: Menu; color: MenuText; } :host(:disabled) .base { color: GrayText; } }`,S([Q(".focus-ring")],ee.prototype,"_focusRing",void 0),S([Q(".state-layer")],ee.prototype,"_stateLayer",void 0),S([Q(".ripple")],ee.prototype,"_ripple",void 0);let ne=class extends(u(e)){constructor(){super(...arguments),te.add(this),se.set(this,async e=>_(this,te,"m",ie).call(this,e))}get menu(){return"M3E-MENU"===this.control?.tagName?this.control:null}connectedCallback(){super.connectedCallback(),this.parentElement?.addEventListener("click",_(this,se,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.parentElement?.removeEventListener("click",_(this,se,"f"))}attach(e){super.attach(e);const t=this.menu;t&&(this.parentElement&&(this.parentElement.ariaHasPopup="menu",this.parentElement.ariaExpanded="false",t.id&&y(this.parentElement,"aria-controls",t.id)),this.closest("m3e-menu")&&(t.submenu=!0))}detach(){if(this.parentElement){this.parentElement.ariaHasPopup=null,this.parentElement.ariaExpanded=null;const e=this.menu;e?.id&&w(this.parentElement,"aria-controls",e.id)}super.detach()}render(){return s`<slot></slot>`}};var oe,re,ae,le,ce,he,de,ue,me,pe,fe,ve;se=new WeakMap,te=new WeakSet,ie=function(e){!e.defaultPrevented&&this.parentElement&&("M3E-MENU-ITEM"===this.parentElement.tagName?this.menu?.show(this.parentElement):this.menu?.toggle(this.parentElement))},ne.styles=i`:host { display: contents; } ::slotted(.material-icons) { font-size: inherit !important; }`,ne=S([x("m3e-menu-trigger")],ne);let be=ve=class extends(m(p(ee,"menuitem"))){constructor(){super(),oe.add(this),re.set(this,e=>_(this,oe,"m",me).call(this,e)),ae.set(this,e=>_(this,oe,"m",pe).call(this,e)),le.set(this,()=>_(this,oe,"m",fe).call(this)),this._hasSubmenu=!1,ce.set(this,void 0),new f(this,{startDelay:500,endDelay:500,callback:e=>{e&&!this.disabled&&_(this,ce,"f")&&_(this,ce,"f").menu?.show(this)}})}get submenu(){return _(this,ce,"f")?.menu??null}connectedCallback(){super.connectedCallback(),this.addEventListener("click",_(this,re,"f")),this.addEventListener("keydown",_(this,ae,"f")),this.addEventListener("mouseenter",_(this,le,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",_(this,re,"f")),this.removeEventListener("keydown",_(this,ae,"f")),this.removeEventListener("mouseenter",_(this,le,"f"))}_renderContent(){return s`<slot name="icon" aria-hidden="true" @slotchange="${_(this,oe,"m",de)}"></slot><span class="content"><slot @slotchange="${_(this,oe,"m",he)}"></slot></span>${this._hasSubmenu?"ltr"===$.current?s`<svg class="trailing-icon" aria-hidden="true" viewBox="0 -960 960 960" fill="currentColor"><path d="M400-280v-400l200 200-200 200Z"/></svg>`:s`<svg class="trailing-icon" aria-hidden="true" viewBox="0 -960 960 960" fill="currentColor"><path d="M560-280 360-480l200-200v400Z"/></svg>`:s`<slot name="trailing-icon" aria-hidden="true" @slotchange="${_(this,oe,"m",ue)}"></slot>`}`}};var ge,ye,we,Ee,ke,$e,Se,_e,Ce,xe,Pe,Le,Me;re=new WeakMap,ae=new WeakMap,le=new WeakMap,ce=new WeakMap,oe=new WeakSet,he=function(e){C(this,ce,e.target.assignedElements({flatten:!0}).find(e=>e instanceof ne),"f"),this._hasSubmenu=void 0!==_(this,ce,"f")},de=function(e){this.classList.toggle("-with-icon",v(e.target))},ue=function(e){this.classList.toggle("-with-trailing-icon",v(e.target))},me=function(e){e.defaultPrevented||this._hasSubmenu||this.menu?.hideAll(!0)},pe=function(e){if(!e.defaultPrevented&&!this.disabled)switch(e.key){case"Right":case"ArrowRight":"ltr"===$.current&&(e.preventDefault(),this.submenu?.show(this));break;case"Left":case"ArrowLeft":"rtl"===$.current&&(e.preventDefault(),this.submenu?.show(this))}},fe=function(){this.menu?.items.forEach(e=>{e instanceof ve&&e!==this&&e.submenu?.isOpen&&e.submenu.hide()})},S([function(e){return G({...e,state:!0,attribute:!1})}
|
|
163
40
|
/**
|
|
164
41
|
* @license
|
|
165
42
|
* Copyright 2017 Google LLC
|
|
166
43
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
167
|
-
*/()],ve.prototype,"_hasSubmenu",void 0),ve=fe=$([C("m3e-menu-item")],ve);let Me=Le=class extends(p(e,"menu")){constructor(){super(...arguments),be.add(this),ge.set(this,void 0),ye.set(this,void 0),we.set(this,(new E).withWrap().withHomeAndEnd().withVerticalOrientation()),Ee.set(this,e=>S(this,be,"m",Ce).call(this,e)),ke.set(this,e=>S(this,be,"m",Pe).call(this,e)),$e.set(this,new b(this,{target:null,callback:e=>e instanceof Le?e.items.filter(e=>e instanceof ve).forEach(e=>e.submenu?.hide()):this.hideAll()})),Se.set(this,e=>{"closed"===e.newState?(S(this,ye,"f")?.call(this),_(this,ye,void 0,"f")):setTimeout(()=>{S(this,we,"f").setActiveItem(S(this,we,"f").items.find(e=>!e.disabled))},40)}),this.positionX="after",this.positionY="below",this.submenu=!1}get items(){return S(this,we,"f").items}get isOpen(){return void 0!==S(this,ge,"f")}connectedCallback(){super.connectedCallback(),this.tabIndex=-1,this.classList.add("-no-animate"),this.setAttribute("popover","manual"),this.addEventListener("keydown",S(this,Ee,"f")),this.addEventListener("toggle",S(this,Se,"f")),document.addEventListener("click",S(this,ke,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",S(this,Ee,"f")),this.removeEventListener("toggle",S(this,Se,"f")),document.removeEventListener("click",S(this,ke,"f"))}async show(e){S(this,ge,"f")&&S(this,ge,"f")!==e&&this.hide(),_(this,ye,await k(this,e,{position:this.submenu?"before"===this.positionX?"left-start":"right-start":"above"===this.positionY?"before"===this.positionX?"top-end":"top-start":"before"===this.positionX?"bottom-end":"bottom-start",inline:!0,flip:!0,shift:!0,offset:this.submenu?void 0:4},(e,t,s)=>{if(this.submenu){if(S(this,ge,"f")){const e=S(this,be,"m",xe).call(this,S(this,ge,"f")).y;this.classList.toggle("-shift-down",!1),this.classList.toggle("-shift-up",!1),this.classList.toggle(Math.round(t)===Math.round(e)?"-shift-down":"-shift-up",!0)}}else this.classList.toggle("-top",s.includes("top")),this.classList.toggle("-bottom",s.includes("bottom"));this.style.left=`${e}px`,this.style.top=`${t}px`}),"f"),this.showPopover(),_(this,ge,e,"f"),S(this,ge,"f").ariaExpanded="true",S(this,$e,"f").observe(S(this,ge,"f"))}hide(e=!1){for(const e of S(this,we,"f").items){const t=e.submenu;t&&t.isOpen&&t.hide()}this.hidePopover(),S(this,ge,"f")&&(S(this,ge,"f").ariaExpanded="false",e&&S(this,ge,"f").focus(),S(this,$e,"f").unobserve(S(this,ge,"f")),_(this,ge,void 0,"f"))}hideAll(e=!1){let t=this;for(;S(t,ge,"f");){const e=S(t,ge,"f").closest("m3e-menu");if(!e)break;t=e}t.hide(e)}async toggle(e){S(this,ge,"f")?this.hide():await this.show(e)}render(){return s`<slot @slotchange="${S(this,be,"m",_e)}"></slot>`}firstUpdated(e){super.firstUpdated(e),requestAnimationFrame(()=>this.classList.remove("-no-animate"))}};var Ue,Ae,Oe,We,Te,Re,ze,je,De,qe,Ne,Ie;ge=new WeakMap,ye=new WeakMap,we=new WeakMap,Ee=new WeakMap,ke=new WeakMap,$e=new WeakMap,Se=new WeakMap,be=new WeakSet,_e=function(){const{added:e}=S(this,we,"f").setItems([...this.querySelectorAll("m3e-menu-item,m3e-menu-item-checkbox,m3e-menu-item-radio")].filter(e=>e.closest("m3e-menu")===this));S(this,we,"f").activeItem||S(this,we,"f").updateActiveItem(e.find(e=>!e.disabled))},Ce=function(e){switch(e.key){case"Left":case"ArrowLeft":e.preventDefault(),this.hide(!0);break;case"Tab":this.hideAll();break;case"Escape":e.shiftKey||e.ctrlKey||this.hide(!0);break;default:S(this,we,"f").onKeyDown(e)}},Pe=function(e){this.submenu||e.composedPath().some(e=>e instanceof Le||e===S(this,ge,"f"))||this.hide()},xe=function(e){let t=0,s=0;for(let i=e;i;i=i.offsetParent instanceof HTMLElement?i.offsetParent:null)t+=i.offsetLeft-i.scrollLeft+i.clientLeft,s+=i.offsetTop-i.scrollTop+i.clientTop;return{x:t,y:s}},Me.styles=i`
|
|
168
|
-
:host {
|
|
169
|
-
position: absolute;
|
|
170
|
-
flex-direction: column;
|
|
171
|
-
padding: unset;
|
|
172
|
-
margin: unset;
|
|
173
|
-
border: unset;
|
|
174
|
-
overflow-y: auto;
|
|
175
|
-
scrollbar-width: ${d.scrollbar.thinWidth};
|
|
176
|
-
scrollbar-color: ${d.scrollbar.color};
|
|
177
|
-
border-radius: var(--m3e-menu-container-shape, ${d.shape.corner.extraSmall});
|
|
178
|
-
min-width: var(--m3e-menu-container-min-width, 7rem);
|
|
179
|
-
max-width: var(--m3e-menu-container-max-width, 17.5rem);
|
|
180
|
-
max-height: var(--m3e-menu-container-max-height, 17.5rem);
|
|
181
|
-
padding-block: var(--m3e-menu-container-padding-block, 0.5rem);
|
|
182
|
-
background-color: var(--m3e-menu-container-color, ${d.color.surfaceContainer});
|
|
183
|
-
box-shadow: var(--m3e-menu-container-elevation, ${d.elevation.level3});
|
|
184
|
-
opacity: 0;
|
|
185
|
-
display: none;
|
|
186
|
-
}
|
|
187
|
-
:host(:not(.-no-animate)) {
|
|
188
|
-
transition: ${n(`opacity ${d.motion.duration.short2} ${d.motion.easing.standard}, \n transform ${d.motion.duration.short2} ${d.motion.easing.standard},\n overlay ${d.motion.duration.short2} ${d.motion.easing.standard} allow-discrete,\n display ${d.motion.duration.short2} ${d.motion.easing.standard} allow-discrete`)};
|
|
189
|
-
}
|
|
190
|
-
:host(:not([submenu])) {
|
|
191
|
-
transform: scaleY(0.8);
|
|
192
|
-
}
|
|
193
|
-
:host(:not([submenu]):popover-open) {
|
|
194
|
-
transform: scaleY(1);
|
|
195
|
-
}
|
|
196
|
-
:host::backdrop {
|
|
197
|
-
background-color: transparent;
|
|
198
|
-
}
|
|
199
|
-
:host(:popover-open) {
|
|
200
|
-
display: inline-flex;
|
|
201
|
-
opacity: 1;
|
|
202
|
-
}
|
|
203
|
-
:host(.-bottom) {
|
|
204
|
-
transform-origin: top;
|
|
205
|
-
}
|
|
206
|
-
:host(.-top) {
|
|
207
|
-
transform-origin: bottom;
|
|
208
|
-
}
|
|
209
|
-
:host(.-shift-down) {
|
|
210
|
-
margin-top: calc(0px - var(--m3e-menu-container-padding-block, 0.5rem));
|
|
211
|
-
}
|
|
212
|
-
:host(.-shift-up) {
|
|
213
|
-
margin-top: var(--m3e-menu-container-padding-block, 0.5rem);
|
|
214
|
-
}
|
|
215
|
-
::slotted(m3e-divider) {
|
|
216
|
-
margin-block: var(--m3e-menu-divider-spacing, 0.5rem);
|
|
217
|
-
}
|
|
218
|
-
@starting-style {
|
|
219
|
-
:host(:popover-open) {
|
|
220
|
-
opacity: 0;
|
|
221
|
-
}
|
|
222
|
-
:host(:not([submenu]):popover-open) {
|
|
223
|
-
transform: scaleY(0.8);
|
|
224
|
-
}
|
|
225
|
-
}
|
|
226
|
-
@media (prefers-reduced-motion) {
|
|
227
|
-
:host(:not(.-no-animate)) {
|
|
228
|
-
transition: none;
|
|
229
|
-
}
|
|
230
|
-
}
|
|
231
|
-
@media (forced-colors: active) {
|
|
232
|
-
:host {
|
|
233
|
-
background-color: Menu;
|
|
234
|
-
color: MenuText;
|
|
235
|
-
border: 1px solid CanvasText;
|
|
236
|
-
}
|
|
237
|
-
}
|
|
238
|
-
`,$([F({attribute:"position-x"})],Me.prototype,"positionX",void 0),$([F({attribute:"position-y"})],Me.prototype,"positionY",void 0),$([F({type:Boolean,reflect:!0})],Me.prototype,"submenu",void 0),Me=Le=$([C("m3e-menu")],Me);let Be=class extends(g(p(Q,"menuitemcheckbox"))){constructor(){super(...arguments),Ue.add(this),Ae.set(this,e=>S(this,Ue,"m",De).call(this,e)),Oe.set(this,e=>S(this,Ue,"m",qe).call(this,e)),We.set(this,()=>S(this,Ue,"m",Ne).call(this)),Te.set(this,()=>S(this,Ue,"m",Ie).call(this)),Re.set(this,!1)}connectedCallback(){super.connectedCallback(),this.addEventListener("click",S(this,Ae,"f")),this.addEventListener("keydown",S(this,Oe,"f")),this.addEventListener("keyup",S(this,We,"f")),this.addEventListener("mouseenter",S(this,Te,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",S(this,Ae,"f")),this.removeEventListener("keydown",S(this,Oe,"f")),this.removeEventListener("keyup",S(this,We,"f")),this.removeEventListener("mouseenter",S(this,Te,"f"))}_renderContent(){return s` <div class="icon">
|
|
239
|
-
<svg class="check" viewBox="0 -960 960 960" aria-hidden="true">
|
|
240
|
-
<path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" />
|
|
241
|
-
</svg>
|
|
242
|
-
<slot name="icon" @slotchange="${S(this,Ue,"m",ze)}"></slot>
|
|
243
|
-
</div>
|
|
244
|
-
<slot></slot>
|
|
245
|
-
<slot name="trailing-icon" aria-hidden="true" @slotchange="${S(this,Ue,"m",je)}"></slot>`}};Ae=new WeakMap,Oe=new WeakMap,We=new WeakMap,Te=new WeakMap,Re=new WeakMap,Ue=new WeakSet,ze=function(e){this.classList.toggle("-with-icon",v(e.target))},je=function(e){this.classList.toggle("-with-trailing-icon",v(e.target))},De=function(e){e.defaultPrevented||(this.checked=!this.checked,this.performUpdate(),S(this,Re,"f")||this.menu?.hideAll(!0))},qe=function(e){_(this,Re," "===e.key,"f")},Ne=function(){_(this,Re,!1,"f")},Ie=function(){this.menu?.items.forEach(e=>{e instanceof ve&&e.submenu?.isOpen&&e.submenu.hide()})},Be.styles=[Q.styles,i`
|
|
246
|
-
.icon {
|
|
247
|
-
display: flex;
|
|
248
|
-
align-items: center;
|
|
249
|
-
justify-content: center;
|
|
250
|
-
}
|
|
251
|
-
:host(:not(.-with-icon)) .icon {
|
|
252
|
-
margin-inline-start: calc(0px - var(--m3e-menu-item-icon-label-space, 0.75rem));
|
|
253
|
-
}
|
|
254
|
-
.check {
|
|
255
|
-
width: 1em;
|
|
256
|
-
font-size: var(--m3e-menu-item-icon-size, 1.5rem) !important;
|
|
257
|
-
}
|
|
258
|
-
:host(:not([checked])) .check {
|
|
259
|
-
display: none;
|
|
260
|
-
}
|
|
261
|
-
:host([checked]) .icon {
|
|
262
|
-
margin-inline-start: 0;
|
|
263
|
-
}
|
|
264
|
-
:host([checked]) ::slotted([slot="icon"]) {
|
|
265
|
-
display: none !important;
|
|
266
|
-
}
|
|
267
|
-
`],Be=$([C("m3e-menu-item-checkbox")],Be);let He=class extends(p(e,"group")){render(){return s`<slot></slot>`}};var Ye,Ke,Xe,Ze,Je,Ve,Fe,Ge,Qe,et,tt,st;He.styles=i`
|
|
268
|
-
:host {
|
|
269
|
-
display: contents;
|
|
270
|
-
}
|
|
271
|
-
`,He=$([C("m3e-menu-item-group")],He);let it=class extends(g(p(Q,"menuitemradio"))){constructor(){super(...arguments),Ye.add(this),Ke.set(this,e=>S(this,Ye,"m",Qe).call(this,e)),Xe.set(this,e=>S(this,Ye,"m",et).call(this,e)),Ze.set(this,()=>S(this,Ye,"m",tt).call(this)),Je.set(this,()=>S(this,Ye,"m",st).call(this)),Ve.set(this,!1)}connectedCallback(){super.connectedCallback(),this.addEventListener("click",S(this,Ke,"f")),this.addEventListener("keydown",S(this,Xe,"f")),this.addEventListener("keyup",S(this,Ze,"f")),this.addEventListener("mouseenter",S(this,Je,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",S(this,Ke,"f")),this.removeEventListener("keydown",S(this,Xe,"f")),this.removeEventListener("keyup",S(this,Ze,"f")),this.removeEventListener("mouseenter",S(this,Je,"f"))}update(e){super.update(e),e.has("checked")&&this.checked&&(this.closest("[role='group']")??this.closest("m3e-menu"))?.querySelectorAll("m3e-menu-item-radio").forEach(e=>{e!==this&&e.checked&&(e.checked=!1)})}_renderContent(){return s` <div class="icon">
|
|
272
|
-
<svg class="check" viewBox="0 -960 960 960" aria-hidden="true">
|
|
273
|
-
<path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" />
|
|
274
|
-
</svg>
|
|
275
|
-
<slot name="icon" @slotchange="${S(this,Ye,"m",Fe)}"></slot>
|
|
276
|
-
</div>
|
|
277
|
-
<slot></slot>
|
|
278
|
-
<slot name="trailing-icon" aria-hidden="true" @slotchange="${S(this,Ye,"m",Ge)}"></slot>`}};Ke=new WeakMap,Xe=new WeakMap,Ze=new WeakMap,Je=new WeakMap,Ve=new WeakMap,Ye=new WeakSet,Fe=function(e){this.classList.toggle("-with-icon",v(e.target))},Ge=function(e){this.classList.toggle("-with-trailing-icon",v(e.target))},Qe=function(e){e.defaultPrevented||(this.checked=!0,this.performUpdate(),S(this,Ve,"f")||this.menu?.hideAll(!0))},et=function(e){_(this,Ve," "===e.key,"f")},tt=function(){_(this,Ve,!1,"f")},st=function(){this.menu?.items.forEach(e=>{e instanceof ve&&e.submenu?.isOpen&&e.submenu.hide()})},it.styles=Be.styles,it=$([C("m3e-menu-item-radio")],it);export{Me as M3eMenuElement,Be as M3eMenuItemCheckboxElement,ve as M3eMenuItemElement,He as M3eMenuItemGroupElement,it as M3eMenuItemRadioElement,ie as M3eMenuTriggerElement};
|
|
44
|
+
*/()],be.prototype,"_hasSubmenu",void 0),be=ve=S([x("m3e-menu-item")],be);let Ae=Me=class extends(p(e,"menu")){constructor(){super(...arguments),ge.add(this),ye.set(this,void 0),we.set(this,void 0),Ee.set(this,(new E).withWrap().withHomeAndEnd().withVerticalOrientation()),ke.set(this,e=>_(this,ge,"m",xe).call(this,e)),$e.set(this,e=>_(this,ge,"m",Pe).call(this,e)),Se.set(this,new b(this,{target:null,callback:e=>e instanceof Me?e.items.filter(e=>e instanceof be).forEach(e=>e.submenu?.hide()):this.hideAll()})),_e.set(this,e=>{"closed"===e.newState?(_(this,we,"f")?.call(this),C(this,we,void 0,"f")):setTimeout(()=>{_(this,Ee,"f").setActiveItem(_(this,Ee,"f").items.find(e=>!e.disabled))},40)}),this.positionX="after",this.positionY="below",this.submenu=!1}get items(){return _(this,Ee,"f").items}get isOpen(){return void 0!==_(this,ye,"f")}connectedCallback(){super.connectedCallback(),this.tabIndex=-1,this.classList.add("-no-animate"),this.setAttribute("popover","manual"),this.addEventListener("keydown",_(this,ke,"f")),this.addEventListener("toggle",_(this,_e,"f")),document.addEventListener("click",_(this,$e,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",_(this,ke,"f")),this.removeEventListener("toggle",_(this,_e,"f")),document.removeEventListener("click",_(this,$e,"f"))}async show(e){_(this,ye,"f")&&_(this,ye,"f")!==e&&this.hide();let t=this.positionX;"rtl"===$.current&&(t="before"===t?"after":"before"),C(this,we,await k(this,e,{position:this.submenu?"before"===t?"left-start":"right-start":"above"===this.positionY?"before"===t?"top-end":"top-start":"before"===t?"bottom-end":"bottom-start",inline:!0,flip:!0,shift:!0,offset:this.submenu?void 0:4},(e,t,s)=>{if(this.submenu){if(_(this,ye,"f")){const e=_(this,ge,"m",Le).call(this,_(this,ye,"f")).y;this.classList.toggle("-shift-down",!1),this.classList.toggle("-shift-up",!1),this.classList.toggle(Math.round(t)===Math.round(e)?"-shift-down":"-shift-up",!0)}}else this.classList.toggle("-top",s.includes("top")),this.classList.toggle("-bottom",s.includes("bottom"));"rtl"===$.current?this.style.right=window.innerWidth-e-this.clientWidth+"px":this.style.left=`${e}px`,this.style.top=`${t}px`}),"f"),this.showPopover(),C(this,ye,e,"f"),_(this,ye,"f").ariaExpanded="true",_(this,Se,"f").observe(_(this,ye,"f"))}hide(e=!1){for(const e of _(this,Ee,"f").items){const t=e.submenu;t&&t.isOpen&&t.hide()}this.hidePopover(),_(this,ye,"f")&&(_(this,ye,"f").ariaExpanded="false",e&&_(this,ye,"f").focus(),_(this,Se,"f").unobserve(_(this,ye,"f")),C(this,ye,void 0,"f"))}hideAll(e=!1){let t=this;for(;_(t,ye,"f");){const e=_(t,ye,"f").closest("m3e-menu");if(!e)break;t=e}t.hide(e)}async toggle(e){_(this,ye,"f")?this.hide():await this.show(e)}render(){return s`<slot @slotchange="${_(this,ge,"m",Ce)}"></slot>`}firstUpdated(e){super.firstUpdated(e),requestAnimationFrame(()=>this.classList.remove("-no-animate"))}};var Ue,Oe,We,Te,Re,ze,je,De,qe,Ne,Ie,Be;ye=new WeakMap,we=new WeakMap,Ee=new WeakMap,ke=new WeakMap,$e=new WeakMap,Se=new WeakMap,_e=new WeakMap,ge=new WeakSet,Ce=function(){const{added:e}=_(this,Ee,"f").setItems([...this.querySelectorAll("m3e-menu-item,m3e-menu-item-checkbox,m3e-menu-item-radio")].filter(e=>e.closest("m3e-menu")===this));_(this,Ee,"f").activeItem||_(this,Ee,"f").updateActiveItem(e.find(e=>!e.disabled))},xe=function(e){switch(e.key){case"Right":case"ArrowRight":"rtl"===$.current?(e.preventDefault(),this.hide(!0)):_(this,Ee,"f").onKeyDown(e);break;case"Left":case"ArrowLeft":"ltr"===$.current?(e.preventDefault(),this.hide(!0)):_(this,Ee,"f").onKeyDown(e);break;case"Tab":this.hideAll();break;case"Escape":e.shiftKey||e.ctrlKey||this.hide(!0);break;default:_(this,Ee,"f").onKeyDown(e)}},Pe=function(e){this.submenu||e.composedPath().some(e=>e instanceof Me||e===_(this,ye,"f"))||this.hide()},Le=function(e){let t=0,s=0;for(let i=e;i;i=i.offsetParent instanceof HTMLElement?i.offsetParent:null)t+=i.offsetLeft-i.scrollLeft+i.clientLeft,s+=i.offsetTop-i.scrollTop+i.clientTop;return{x:t,y:s}},Ae.styles=i`:host { position: absolute; flex-direction: column; padding: unset; margin: unset; border: unset; overflow-y: auto; scrollbar-width: ${d.scrollbar.thinWidth}; scrollbar-color: ${d.scrollbar.color}; border-radius: var(--m3e-menu-container-shape, ${d.shape.corner.extraSmall}); min-width: var(--m3e-menu-container-min-width, 7rem); max-width: var(--m3e-menu-container-max-width, 17.5rem); max-height: var(--m3e-menu-container-max-height, 17.5rem); padding-block: var(--m3e-menu-container-padding-block, 0.5rem); background-color: var(--m3e-menu-container-color, ${d.color.surfaceContainer}); box-shadow: var(--m3e-menu-container-elevation, ${d.elevation.level3}); opacity: 0; display: none; } :host(:not(.-no-animate)) { transition: ${n(`opacity ${d.motion.duration.short2} ${d.motion.easing.standard}, \n transform ${d.motion.duration.short2} ${d.motion.easing.standard},\n overlay ${d.motion.duration.short2} ${d.motion.easing.standard} allow-discrete,\n display ${d.motion.duration.short2} ${d.motion.easing.standard} allow-discrete`)}; } :host(:not([submenu])) { transform: scaleY(0.8); } :host(:not([submenu]):popover-open) { transform: scaleY(1); } :host::backdrop { background-color: transparent; } :host(:popover-open) { display: inline-flex; opacity: 1; } :host(.-bottom) { transform-origin: top; } :host(.-top) { transform-origin: bottom; } :host(.-shift-down) { margin-top: calc(0px - var(--m3e-menu-container-padding-block, 0.5rem)); } :host(.-shift-up) { margin-top: var(--m3e-menu-container-padding-block, 0.5rem); } ::slotted(m3e-divider) { margin-block: var(--m3e-menu-divider-spacing, 0.5rem); } @starting-style { :host(:popover-open) { opacity: 0; } :host(:not([submenu]):popover-open) { transform: scaleY(0.8); } } @media (prefers-reduced-motion) { :host(:not(.-no-animate)) { transition: none; } } @media (forced-colors: active) { :host { background-color: Menu; color: MenuText; border: 1px solid CanvasText; } }`,S([G({attribute:"position-x"})],Ae.prototype,"positionX",void 0),S([G({attribute:"position-y"})],Ae.prototype,"positionY",void 0),S([G({type:Boolean,reflect:!0})],Ae.prototype,"submenu",void 0),Ae=Me=S([x("m3e-menu")],Ae);let Ke=class extends(g(p(ee,"menuitemcheckbox"))){constructor(){super(...arguments),Ue.add(this),Oe.set(this,e=>_(this,Ue,"m",qe).call(this,e)),We.set(this,e=>_(this,Ue,"m",Ne).call(this,e)),Te.set(this,()=>_(this,Ue,"m",Ie).call(this)),Re.set(this,()=>_(this,Ue,"m",Be).call(this)),ze.set(this,!1)}connectedCallback(){super.connectedCallback(),this.addEventListener("click",_(this,Oe,"f")),this.addEventListener("keydown",_(this,We,"f")),this.addEventListener("keyup",_(this,Te,"f")),this.addEventListener("mouseenter",_(this,Re,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",_(this,Oe,"f")),this.removeEventListener("keydown",_(this,We,"f")),this.removeEventListener("keyup",_(this,Te,"f")),this.removeEventListener("mouseenter",_(this,Re,"f"))}_renderContent(){return s`<div class="icon"><svg class="check" viewBox="0 -960 960 960" aria-hidden="true"><path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg><slot name="icon" @slotchange="${_(this,Ue,"m",je)}"></slot></div><slot></slot><slot name="trailing-icon" aria-hidden="true" @slotchange="${_(this,Ue,"m",De)}"></slot>`}};Oe=new WeakMap,We=new WeakMap,Te=new WeakMap,Re=new WeakMap,ze=new WeakMap,Ue=new WeakSet,je=function(e){this.classList.toggle("-with-icon",v(e.target))},De=function(e){this.classList.toggle("-with-trailing-icon",v(e.target))},qe=function(e){e.defaultPrevented||(this.checked=!this.checked,this.performUpdate(),_(this,ze,"f")||this.menu?.hideAll(!0))},Ne=function(e){C(this,ze," "===e.key,"f")},Ie=function(){C(this,ze,!1,"f")},Be=function(){this.menu?.items.forEach(e=>{e instanceof be&&e.submenu?.isOpen&&e.submenu.hide()})},Ke.styles=[ee.styles,i`.icon { display: flex; align-items: center; justify-content: center; } :host(:not(.-with-icon)) .icon { margin-inline-start: calc(0px - var(--m3e-menu-item-icon-label-space, 0.75rem)); } .check { width: 1em; font-size: var(--m3e-menu-item-icon-size, 1.5rem) !important; } :host(:not([checked])) .check { display: none; } :host([checked]) .icon { margin-inline-start: 0; } :host([checked]) ::slotted([slot="icon"]) { display: none !important; }`],Ke=S([x("m3e-menu-item-checkbox")],Ke);let He=class extends(p(e,"group")){render(){return s`<slot></slot>`}};var Ye,Ze,Xe,Je,Ve,Fe,Ge,Qe,et,tt,st,it;He.styles=i`:host { display: contents; }`,He=S([x("m3e-menu-item-group")],He);let nt=class extends(g(p(ee,"menuitemradio"))){constructor(){super(...arguments),Ye.add(this),Ze.set(this,e=>_(this,Ye,"m",et).call(this,e)),Xe.set(this,e=>_(this,Ye,"m",tt).call(this,e)),Je.set(this,()=>_(this,Ye,"m",st).call(this)),Ve.set(this,()=>_(this,Ye,"m",it).call(this)),Fe.set(this,!1)}connectedCallback(){super.connectedCallback(),this.addEventListener("click",_(this,Ze,"f")),this.addEventListener("keydown",_(this,Xe,"f")),this.addEventListener("keyup",_(this,Je,"f")),this.addEventListener("mouseenter",_(this,Ve,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",_(this,Ze,"f")),this.removeEventListener("keydown",_(this,Xe,"f")),this.removeEventListener("keyup",_(this,Je,"f")),this.removeEventListener("mouseenter",_(this,Ve,"f"))}update(e){super.update(e),e.has("checked")&&this.checked&&(this.closest("[role='group']")??this.closest("m3e-menu"))?.querySelectorAll("m3e-menu-item-radio").forEach(e=>{e!==this&&e.checked&&(e.checked=!1)})}_renderContent(){return s`<div class="icon"><svg class="check" viewBox="0 -960 960 960" aria-hidden="true"><path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg><slot name="icon" @slotchange="${_(this,Ye,"m",Ge)}"></slot></div><slot></slot><slot name="trailing-icon" aria-hidden="true" @slotchange="${_(this,Ye,"m",Qe)}"></slot>`}};Ze=new WeakMap,Xe=new WeakMap,Je=new WeakMap,Ve=new WeakMap,Fe=new WeakMap,Ye=new WeakSet,Ge=function(e){this.classList.toggle("-with-icon",v(e.target))},Qe=function(e){this.classList.toggle("-with-trailing-icon",v(e.target))},et=function(e){e.defaultPrevented||(this.checked=!0,this.performUpdate(),_(this,Fe,"f")||this.menu?.hideAll(!0))},tt=function(e){C(this,Fe," "===e.key,"f")},st=function(){C(this,Fe,!1,"f")},it=function(){this.menu?.items.forEach(e=>{e instanceof be&&e.submenu?.isOpen&&e.submenu.hide()})},nt.styles=Ke.styles,nt=S([x("m3e-menu-item-radio")],nt);export{Ae as M3eMenuElement,Ke as M3eMenuItemCheckboxElement,be as M3eMenuItemElement,He as M3eMenuItemGroupElement,nt as M3eMenuItemRadioElement,ne as M3eMenuTriggerElement};
|
|
279
45
|
//# sourceMappingURL=index.min.js.map
|