@m3e/expansion-panel 1.0.6 → 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/custom-elements.json +18 -0
- package/dist/index.js +616 -445
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +6 -216
- package/dist/index.min.js.map +1 -1
- package/dist/src/ExpansionPanelElement.d.ts +7 -1
- package/dist/src/ExpansionPanelElement.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{css as e,LitElement as t,html as o,unsafeCSS as i,nothing as s}from"lit";import{DesignToken as n,KeyboardClick as r,Focusable as a,Disabled as l,AttachInternals as d,Role as h,EventAttribute as c}from"@m3e/core";function
|
|
6
|
+
import{css as e,LitElement as t,html as o,unsafeCSS as i,nothing as s}from"lit";import{DesignToken as n,KeyboardClick as r,Focusable as a,Disabled as l,AttachInternals as d,Role as h,EventAttribute as c}from"@m3e/core";import{M3eDirectionality as p}from"@m3e/core/bidi";function u(e,t,o,i){var s,n=arguments.length,r=n<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(s=e[a])&&(r=(n<3?s(r):n>3?s(t,o,r):s(t,o))||r);return n>3&&r&&Object.defineProperty(t,o,r),r}function g(e,t,o,i){if("a"===o&&!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"===o?i:"a"===o?i.call(e):i?i.value:t.get(e)}function m(e,t,o,i,s){if("m"===i)throw new TypeError("Private method is not writable");if("a"===i&&!s)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!s:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===i?s.call(e,o):s?s.value=o:t.set(e,o),o}"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 f=e=>(t,o)=>{void 0!==o?o.addInitializer(()=>{customElements.define(e,t)}):customElements.define(e,t)},v=globalThis,y=v.ShadowRoot&&(void 0===v.ShadyCSS||v.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,$=Symbol(),b=new WeakMap;
|
|
13
13
|
/**
|
|
14
14
|
* @license
|
|
15
15
|
* Copyright 2019 Google LLC
|
|
16
16
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
17
|
-
*/let
|
|
17
|
+
*/let x=class{constructor(e,t,o){if(this._$cssResult$=!0,o!==$)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(y&&void 0===e){const o=void 0!==t&&1===t.length;o&&(e=b.get(t)),void 0===e&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),o&&b.set(t,e))}return e}toString(){return this.cssText}};const w=(e,t)=>{if(y)e.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(const o of t){const t=document.createElement("style"),i=v.litNonce;void 0!==i&&t.setAttribute("nonce",i),t.textContent=o.cssText,e.appendChild(t)}},_=y?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t="";for(const o of e.cssRules)t+=o.cssText;return(e=>new x("string"==typeof e?e:e+"",void 0,$))(t)})(e):e,{is:E,defineProperty:S,getOwnPropertyDescriptor:P,getOwnPropertyNames:C,getOwnPropertySymbols:U,getPrototypeOf:k}=Object,O=globalThis,A=O.trustedTypes,M=A?A.emptyScript:"",T=O.reactiveElementPolyfillSupport,z=(e,t)=>e,R={toAttribute(e,t){switch(t){case Boolean:e=e?M:null;break;case Object:case Array:e=null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){let o=e;switch(t){case Boolean:o=null!==e;break;case Number:o=null===e?null:Number(e);break;case Object:case Array:try{o=JSON.parse(e)}catch(e){o=null}}return o}},j=(e,t)=>!E(e,t),D={attribute:!0,type:String,converter:R,reflect:!1,useDefault:!1,hasChanged:j};
|
|
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"),O.litPropertyMetadata??=new WeakMap;class q 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=D){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 o=Symbol(),i=this.getPropertyDescriptor(e,o,t);void 0!==i&&S(this.prototype,e,i)}}static getPropertyDescriptor(e,t,o){const{get:i,set:s}=P(this.prototype,e)??{get(){return this[t]},set(e){this[t]=e}};return{get:i,set(t){const n=i?.call(this);s?.call(this,t),this.requestUpdate(e,n,o)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??D}static _$Ei(){if(this.hasOwnProperty(z("elementProperties")))return;const e=k(this);e.finalize(),void 0!==e.l&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(z("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(z("properties"))){const e=this.properties,t=[...C(e),...U(e)];for(const o of t)this.createProperty(o,e[o])}const e=this[Symbol.metadata];if(null!==e){const t=litPropertyMetadata.get(e);if(void 0!==t)for(const[e,o]of t)this.elementProperties.set(e,o)}this._$Eh=new Map;for(const[e,t]of this.elementProperties){const o=this._$Eu(e,t);void 0!==o&&this._$Eh.set(o,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){const t=[];if(Array.isArray(e)){const o=new Set(e.flat(1/0).reverse());for(const e of o)t.unshift(_(e))}else void 0!==e&&t.push(_(e));return t}static _$Eu(e,t){const o=t.attribute;return!1===o?void 0:"string"==typeof o?o:"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 o of t.keys())this.hasOwnProperty(o)&&(e.set(o,this[o]),delete this[o]);e.size>0&&(this._$Ep=e)}createRenderRoot(){const e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return w(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,o){this._$AK(e,o)}_$ET(e,t){const o=this.constructor.elementProperties.get(e),i=this.constructor._$Eu(e,o);if(void 0!==i&&!0===o.reflect){const s=(void 0!==o.converter?.toAttribute?o.converter:R).toAttribute(t,o.type);this._$Em=e,null==s?this.removeAttribute(i):this.setAttribute(i,s),this._$Em=null}}_$AK(e,t){const o=this.constructor,i=o._$Eh.get(e);if(void 0!==i&&this._$Em!==i){const e=o.getPropertyOptions(i),s="function"==typeof e.converter?{fromAttribute:e.converter}:void 0!==e.converter?.fromAttribute?e.converter:R;this._$Em=i;const n=s.fromAttribute(t,e.type);this[i]=n??this._$Ej?.get(i)??n,this._$Em=null}}requestUpdate(e,t,o){if(void 0!==e){const i=this.constructor,s=this[e];if(o??=i.getPropertyOptions(e),!((o.hasChanged??j)(s,t)||o.useDefault&&o.reflect&&s===this._$Ej?.get(e)&&!this.hasAttribute(i._$Eu(e,o))))return;this.C(e,t,o)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(e,t,{useDefault:o,reflect:i,wrapped:s},n){o&&!(this._$Ej??=new Map).has(e)&&(this._$Ej.set(e,n??t??this[e]),!0!==s||void 0!==n)||(this._$AL.has(e)||(this.hasUpdated||o||(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,o]of e){const{wrapped:e}=o,i=this[t];!0!==e||this._$AL.has(t)||void 0===i||this.C(t,void 0,o,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){}}q.elementStyles=[],q.shadowRootOptions={mode:"open"},q[z("elementProperties")]=new Map,q[z("finalized")]=new Map,T?.({ReactiveElement:q}),(O.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 L={attribute:!0,type:String,converter:R,reflect:!1,hasChanged:j},W=(e=L,t,o)=>{const{kind:i,metadata:s}=o;let n=globalThis.litPropertyMetadata.get(s);if(void 0===n&&globalThis.litPropertyMetadata.set(s,n=new Map),"setter"===i&&((e=Object.create(e)).wrapped=!0),n.set(o.name,e),"accessor"===i){const{name:i}=o;return{set(o){const s=t.get.call(this);t.set.call(this,o),this.requestUpdate(i,s,e)},init(t){return void 0!==t&&this.C(i,void 0,e,t),t}}}if("setter"===i){const{name:i}=o;return function(o){const s=this[i];t.call(this,o),this.requestUpdate(i,s,e)}}throw Error("Unsupported decorator location: "+i)};function B(e){return(t,o)=>"object"==typeof o?W(e,t,o):((e,t,o)=>{const i=t.hasOwnProperty(o);return t.constructor.createProperty(o,e),i?Object.getOwnPropertyDescriptor(t,o):void 0})(e,t,o)}
|
|
29
29
|
/**
|
|
30
30
|
* @license
|
|
31
31
|
* Copyright 2017 Google LLC
|
|
@@ -36,215 +36,5 @@ const D={attribute:!0,type:String,converter:T,reflect:!1,hasChanged:R},L=(e=D,t,
|
|
|
36
36
|
* Copyright 2017 Google LLC
|
|
37
37
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
38
38
|
*/
|
|
39
|
-
function W(e,t){return(t,o,i)=>((e,t,o)=>(o.configurable=!0,o.enumerable=!0,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,o),o))(t,o,{get(){return(t=>t.renderRoot?.querySelector(e)??null)(this)}})}var B,N,I,G;let H=class extends t{constructor(){super(...arguments),B.add(this),N.set(this,[]),this.multi=!1}get panels(){return u(this,N,"f")}render(){return o`<slot @slotchange="${u(this,B,"m",I)}" @opening="${u(this,B,"m",G)}"></slot>`}};N=new WeakMap,B=new WeakSet,I=function(){if(function(e,t,o,i,s){if("m"===i)throw new TypeError("Private method is not writable");if("a"===i&&!s)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!s:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");"a"===i?s.call(e,o):s?s.value=o:t.set(e,o)}(this,N,[...this.querySelectorAll("m3e-expansion-panel")],"f"),this.multi)return;let e=!1;for(const t of u(this,N,"f").filter(e=>!e.open))e&&(t.open=!1),e=!0},G=function(e){if(!this.multi)for(const t of u(this,N,"f").filter(t=>t!==e.target&&t.open))t.open=!1},H.styles=e`
|
|
40
|
-
:host {
|
|
41
|
-
display: block;
|
|
42
|
-
}
|
|
43
|
-
::slotted(m3e-expansion-panel) {
|
|
44
|
-
--m3e-expansion-panel-container-color: ${n.color.surfaceContainerLow};
|
|
45
|
-
--m3e-expansion-panel-elevation: ${n.elevation.level2};
|
|
46
|
-
--m3e-expansion-panel-open-shape: ${n.shape.corner.medium};
|
|
47
|
-
--_expansion-panel-open-spacing: 1rem;
|
|
48
|
-
}
|
|
49
|
-
::slotted(m3e-expansion-panel:first-of-type:last-of-type) {
|
|
50
|
-
--m3e-expansion-panel-shape: ${n.shape.corner.medium};
|
|
51
|
-
}
|
|
52
|
-
::slotted(m3e-expansion-panel:first-of-type:not(:last-of-type)) {
|
|
53
|
-
--m3e-expansion-panel-shape: ${n.shape.corner.value.medium} ${n.shape.corner.value.medium}
|
|
54
|
-
${n.shape.corner.value.none} ${n.shape.corner.value.none};
|
|
55
|
-
}
|
|
56
|
-
::slotted(m3e-expansion-panel:last-of-type:not(:first-of-type)) {
|
|
57
|
-
--m3e-expansion-panel-shape: ${n.shape.corner.value.none} ${n.shape.corner.value.none}
|
|
58
|
-
${n.shape.corner.value.medium} ${n.shape.corner.value.medium};
|
|
59
|
-
}
|
|
60
|
-
`,p([q({type:Boolean})],H.prototype,"multi",void 0),H=p([g("m3e-accordion")],H);const J=i("var(--m3e-expansion-header-collapsed-height, 3rem)"),K=i("var(--m3e-expansion-header-expanded-height, 4rem)"),V=i("var(--m3e-expansion-header-padding-left, 1.5rem)"),Z=i("var(--m3e-expansion-header-padding-right, 1.5rem)"),F=i("var(--m3e-expansion-header-spacing, 0.5rem)"),Q=i("var(--m3e-expansion-header-toggle-icon-size, 1.5rem)"),X=e`
|
|
61
|
-
:host {
|
|
62
|
-
display: flex;
|
|
63
|
-
border-radius: inherit;
|
|
64
|
-
outline: none;
|
|
65
|
-
user-select: none;
|
|
66
|
-
position: relative;
|
|
67
|
-
height: ${J};
|
|
68
|
-
padding-inline-start: ${V};
|
|
69
|
-
padding-inline-end: ${Z};
|
|
70
|
-
font-size: ${i(`var(--m3e-expansion-header-font-size, ${n.typescale.standard.title.medium.fontSize})`)};
|
|
71
|
-
font-weight: ${i(`var(--m3e-expansion-header-font-weight, ${n.typescale.standard.title.medium.fontWeight})`)};
|
|
72
|
-
line-height: ${i(`var(--m3e-expansion-header-line-height, ${n.typescale.standard.title.medium.lineHeight})`)};
|
|
73
|
-
letter-spacing: ${i(`var(--m3e-expansion-header-tracking, ${n.typescale.standard.title.medium.tracking})`)};
|
|
74
|
-
transition: ${i(`height var(--m3e-collapsible-animation-duration, ${n.motion.duration.medium1})\n ${n.motion.easing.standard}`)};
|
|
75
|
-
|
|
76
|
-
column-gap: ${F};
|
|
77
|
-
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
78
|
-
}
|
|
79
|
-
:host(:not(:disabled)) {
|
|
80
|
-
cursor: pointer;
|
|
81
|
-
}
|
|
82
|
-
:host([aria-expanded="true"]) {
|
|
83
|
-
height: ${K};
|
|
84
|
-
}
|
|
85
|
-
:host(:not(:focus-visible)) .state-layer {
|
|
86
|
-
--m3e-state-layer-focus-color: transparent;
|
|
87
|
-
}
|
|
88
|
-
:host([aria-expanded="true"]) .state-layer {
|
|
89
|
-
--m3e-state-layer-hover-color: transparent;
|
|
90
|
-
}
|
|
91
|
-
:host([aria-expanded="true"]) [part="background"],
|
|
92
|
-
.content {
|
|
93
|
-
flex: 1 1 auto;
|
|
94
|
-
display: flex;
|
|
95
|
-
align-items: center;
|
|
96
|
-
}
|
|
97
|
-
.toggle {
|
|
98
|
-
display: flex;
|
|
99
|
-
align-items: center;
|
|
100
|
-
justify-content: center;
|
|
101
|
-
vertical-align: middle;
|
|
102
|
-
font-size: ${Q};
|
|
103
|
-
transition: ${i(`transform var(--m3e-collapsible-animation-duration, ${n.motion.duration.medium1})\n ${n.motion.easing.standard}`)};
|
|
104
|
-
}
|
|
105
|
-
:host([toggle-direction="vertical"][aria-expanded="true"]) .toggle {
|
|
106
|
-
transform: rotate(180deg);
|
|
107
|
-
}
|
|
108
|
-
:host([toggle-direction="horizontal"][aria-expanded="true"]) .toggle {
|
|
109
|
-
transform: rotate(90deg);
|
|
110
|
-
}
|
|
111
|
-
:host([toggle-position="before"]) .toggle {
|
|
112
|
-
margin-inline-start: calc(0px - ${F});
|
|
113
|
-
}
|
|
114
|
-
:host([toggle-position="after"]) .toggle {
|
|
115
|
-
margin-inline-end: calc(0px - ${F});
|
|
116
|
-
}
|
|
117
|
-
:host([hide-toggle]) .toggle {
|
|
118
|
-
display: none;
|
|
119
|
-
}
|
|
120
|
-
::slotted([slot="toggle-icon"]) {
|
|
121
|
-
font-size: inherit !important;
|
|
122
|
-
flex: none;
|
|
123
|
-
}
|
|
124
|
-
::slotted(svg[slot="toggle-icon"]) {
|
|
125
|
-
width: 1em;
|
|
126
|
-
height: 1em;
|
|
127
|
-
}
|
|
128
|
-
@media (prefers-reduced-motion) {
|
|
129
|
-
:host,
|
|
130
|
-
.toggle {
|
|
131
|
-
transition: none;
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
`,Y=i(`var(--m3e-expansion-panel-text-color, ${n.color.onSurface})`),ee=i(`var(--m3e-expansion-panel-disabled-text-color, ${n.color.onSurface})`),te=i("var(--m3e-expansion-panel-disabled-text-opacity, 38%)"),oe=i("var(--m3e-expansion-panel-container-color)"),ie=i("var(--m3e-expansion-panel-elevation)"),se=i("var(--m3e-expansion-panel-shape)"),ne=i("var(--m3e-expansion-panel-open-elevation, var(--m3e-expansion-panel-elevation))"),re=i("var(--m3e-expansion-panel-open-shape, var(--m3e-expansion-panel-shape))"),ae=i("var(--_expansion-panel-open-spacing)"),le=i("var(--m3e-expansion-panel-content-padding, 0 1.5rem 1rem 1.5rem)"),de=i("var(--m3e-expansion-panel-actions-spacing, 0.5rem)"),he=i("var(--m3e-expansion-panel-actions-padding, 1rem 1.5rem 1rem 1.5rem)"),ce=i("var(--m3e-expansion-panel-actions-divider-thickness, var(--m3e-divider-thickness, 1px))"),pe=i(`var(--m3e-expansion-panel-actions-divider-color, var(--m3e-divider-color, ${n.color.outlineVariant}))`),ue=e`
|
|
135
|
-
:host {
|
|
136
|
-
display: block;
|
|
137
|
-
background-color: ${oe};
|
|
138
|
-
transition: ${i(`box-shadow var(--m3e-collapsible-animation-duration, ${n.motion.duration.medium1})\n ${n.motion.easing.standard}`)};
|
|
139
|
-
}
|
|
140
|
-
:host(:not(:disabled)) {
|
|
141
|
-
color: ${Y};
|
|
142
|
-
}
|
|
143
|
-
:host(:disabled) {
|
|
144
|
-
color: color-mix(
|
|
145
|
-
in srgb,
|
|
146
|
-
${ee} ${te},
|
|
147
|
-
transparent
|
|
148
|
-
);
|
|
149
|
-
}
|
|
150
|
-
:host(:not([open])) {
|
|
151
|
-
box-shadow: ${ie};
|
|
152
|
-
border-radius: ${se};
|
|
153
|
-
}
|
|
154
|
-
:host([open]) {
|
|
155
|
-
box-shadow: ${ne};
|
|
156
|
-
border-radius: ${re};
|
|
157
|
-
margin-block: ${ae};
|
|
158
|
-
}
|
|
159
|
-
.toggle {
|
|
160
|
-
display: flex;
|
|
161
|
-
align-items: center;
|
|
162
|
-
justify-content: center;
|
|
163
|
-
font-size: ${Q};
|
|
164
|
-
}
|
|
165
|
-
::slotted([slot="toggle-icon"]) {
|
|
166
|
-
font-size: inherit !important;
|
|
167
|
-
flex: none;
|
|
168
|
-
}
|
|
169
|
-
.toggle svg,
|
|
170
|
-
::slotted(svg[slot="toggle-icon"]) {
|
|
171
|
-
width: 1em;
|
|
172
|
-
height: 1em;
|
|
173
|
-
}
|
|
174
|
-
.content {
|
|
175
|
-
padding: ${le};
|
|
176
|
-
}
|
|
177
|
-
::slotted([slot="actions"]) {
|
|
178
|
-
flex: none;
|
|
179
|
-
display: flex;
|
|
180
|
-
align-items: center;
|
|
181
|
-
column-gap: ${de};
|
|
182
|
-
padding: ${he};
|
|
183
|
-
border-top-style: solid;
|
|
184
|
-
border-top-width: ${ce};
|
|
185
|
-
border-top-color: ${pe};
|
|
186
|
-
}
|
|
187
|
-
::slotted([slot="actions"][end]) {
|
|
188
|
-
justify-content: flex-end;
|
|
189
|
-
}
|
|
190
|
-
@media (prefers-reduced-motion) {
|
|
191
|
-
:host {
|
|
192
|
-
transition: none;
|
|
193
|
-
}
|
|
194
|
-
}
|
|
195
|
-
@media (forced-colors: active) {
|
|
196
|
-
:host {
|
|
197
|
-
border: 1px solid CanvasText;
|
|
198
|
-
}
|
|
199
|
-
:host(:disabled) {
|
|
200
|
-
color: GrayText;
|
|
201
|
-
}
|
|
202
|
-
::slotted([slot="actions"]) {
|
|
203
|
-
border-top-color: GrayText;
|
|
204
|
-
}
|
|
205
|
-
}
|
|
206
|
-
`;var ge,me;let fe=class extends(r(a(l(d(h(t,"button"),!0))))){constructor(){super(...arguments),ge.add(this),this.toggleDirection="vertical",this.togglePosition="after",this.hideToggle=!1}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer].forEach(e=>e?.attach(this))}render(){return o`<m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring>
|
|
207
|
-
<m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer>
|
|
208
|
-
${"before"===this.togglePosition?u(this,ge,"m",me).call(this):s}
|
|
209
|
-
<div class="content">
|
|
210
|
-
<slot></slot>
|
|
211
|
-
</div>
|
|
212
|
-
${"after"===this.togglePosition?u(this,ge,"m",me).call(this):s}`}};var ve,ye,$e,be,xe,we,Ee,_e,Se;ge=new WeakSet,me=function(){return o`<div class="toggle" aria-hidden="true">
|
|
213
|
-
<slot name="toggle-icon"></slot>
|
|
214
|
-
</div>`},fe.styles=X,p([W(".focus-ring")],fe.prototype,"_focusRing",void 0),p([W(".state-layer")],fe.prototype,"_stateLayer",void 0),p([q({attribute:"toggle-direction",reflect:!0})],fe.prototype,"toggleDirection",void 0),p([q({attribute:"toggle-position",reflect:!0})],fe.prototype,"togglePosition",void 0),p([q({attribute:"hide-toggle",type:Boolean,reflect:!0})],fe.prototype,"hideToggle",void 0),fe=p([g("m3e-expansion-header")],fe);let Pe=Se=class extends(c(l(d(t,!0)),"opening","opened","closing","closed")){constructor(){super(...arguments),ve.add(this),ye.set(this,Se.__nextId++),$e.set(this,`m3e-expansion-panel-${u(this,ye,"f")}-content`),be.set(this,`m3e-expansion-panel-${u(this,ye,"f")}-header`),this.open=!1,this.toggleDirection="vertical",this.togglePosition="after",this.hideToggle=!1}render(){return o` <m3e-expansion-header
|
|
215
|
-
id="${u(this,be,"f")}"
|
|
216
|
-
toggle-direction="${this.toggleDirection}"
|
|
217
|
-
toggle-position="${this.togglePosition}"
|
|
218
|
-
?hide-toggle="${this.hideToggle}"
|
|
219
|
-
?disabled="${this.disabled}"
|
|
220
|
-
aria-expanded="${this.open}"
|
|
221
|
-
aria-controls="${u(this,$e,"f")}"
|
|
222
|
-
@click="${u(this,ve,"m",we)}"
|
|
223
|
-
@keydown="${u(this,ve,"m",Ee)}"
|
|
224
|
-
>
|
|
225
|
-
<div slot="toggle-icon" class="toggle">
|
|
226
|
-
<slot name="toggle-icon">${u(this,ve,"m",xe).call(this)}</slot>
|
|
227
|
-
</div>
|
|
228
|
-
<slot name="header"></slot>
|
|
229
|
-
</m3e-expansion-header>
|
|
230
|
-
<m3e-collapsible
|
|
231
|
-
id="${u(this,$e,"f")}"
|
|
232
|
-
role="region"
|
|
233
|
-
aria-labelledby="${u(this,be,"f")}"
|
|
234
|
-
aria-hidden="${!this.open}"
|
|
235
|
-
?open="${this.open}"
|
|
236
|
-
@opening="${u(this,ve,"m",_e)}"
|
|
237
|
-
@opened="${u(this,ve,"m",_e)}"
|
|
238
|
-
@closing="${u(this,ve,"m",_e)}"
|
|
239
|
-
@closed="${u(this,ve,"m",_e)}"
|
|
240
|
-
>
|
|
241
|
-
<div class="content">
|
|
242
|
-
<slot></slot>
|
|
243
|
-
</div>
|
|
244
|
-
<slot name="actions"></slot>
|
|
245
|
-
</m3e-collapsible>`}};ye=new WeakMap,$e=new WeakMap,be=new WeakMap,ve=new WeakSet,xe=function(){return"vertical"===this.toggleDirection?o`<svg viewBox="0 -960 960 960" fill="currentColor">
|
|
246
|
-
<path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z" />
|
|
247
|
-
</svg>`:o`<svg viewBox="0 -960 960 960" fill="currentColor">
|
|
248
|
-
<path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z" />
|
|
249
|
-
</svg>`},we=function(){this.open=!this.open},Ee=function(e){switch(e.key){case"ArrowUp":{e.preventDefault();const t=this.closest("m3e-accordion");if(t){const e=[...t.panels].reverse(),o=e.indexOf(this);(e.find((e,t)=>!e.disabled&&t>o)??e.find((e,t)=>!e.disabled&&t<o))?._header?.focus()}else this.open=!1}break;case"ArrowDown":{e.preventDefault();const t=this.closest("m3e-accordion");if(t){const e=t.panels.indexOf(this);(t.panels.find((t,o)=>!t.disabled&&o>e)??t.panels.find((t,o)=>!t.disabled&&o<e))?._header?.focus()}else this.open=!0}}},_e=function(e){e.stopPropagation(),this.dispatchEvent(new Event(e.type,{bubbles:!0}))},Pe.styles=ue,Pe.__nextId=0,p([W("m3e-expansion-header")],Pe.prototype,"_header",void 0),p([q({type:Boolean,reflect:!0})],Pe.prototype,"open",void 0),p([q({attribute:"toggle-direction",reflect:!0})],Pe.prototype,"toggleDirection",void 0),p([q({attribute:"toggle-position",reflect:!0})],Pe.prototype,"togglePosition",void 0),p([q({attribute:"hide-toggle",type:Boolean,reflect:!0})],Pe.prototype,"hideToggle",void 0),Pe=Se=p([g("m3e-expansion-panel")],Pe);export{H as M3eAccordionElement,fe as M3eExpansionHeaderElement,Pe as M3eExpansionPanelElement};
|
|
39
|
+
function N(e,t){return(t,o,i)=>((e,t,o)=>(o.configurable=!0,o.enumerable=!0,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,o),o))(t,o,{get(){return(t=>t.renderRoot?.querySelector(e)??null)(this)}})}var I,Z,G,H;let J=class extends t{constructor(){super(...arguments),I.add(this),Z.set(this,[]),this.multi=!1}get panels(){return g(this,Z,"f")}render(){return o`<slot @slotchange="${g(this,I,"m",G)}" @opening="${g(this,I,"m",H)}"></slot>`}};Z=new WeakMap,I=new WeakSet,G=function(){if(m(this,Z,[...this.querySelectorAll("m3e-expansion-panel")],"f"),this.multi)return;let e=!1;for(const t of g(this,Z,"f").filter(e=>!e.open))e&&(t.open=!1),e=!0},H=function(e){if(!this.multi)for(const t of g(this,Z,"f").filter(t=>t!==e.target&&t.open))t.open=!1},J.styles=e`:host { display: block; } ::slotted(m3e-expansion-panel) { --m3e-expansion-panel-container-color: ${n.color.surfaceContainerLow}; --m3e-expansion-panel-elevation: ${n.elevation.level2}; --m3e-expansion-panel-open-shape: ${n.shape.corner.medium}; --_expansion-panel-open-spacing: 1rem; } ::slotted(m3e-expansion-panel:first-of-type:last-of-type) { --m3e-expansion-panel-shape: ${n.shape.corner.medium}; } ::slotted(m3e-expansion-panel:first-of-type:not(:last-of-type)) { --m3e-expansion-panel-shape: ${n.shape.corner.value.medium} ${n.shape.corner.value.medium} ${n.shape.corner.value.none} ${n.shape.corner.value.none}; } ::slotted(m3e-expansion-panel:last-of-type:not(:first-of-type)) { --m3e-expansion-panel-shape: ${n.shape.corner.value.none} ${n.shape.corner.value.none} ${n.shape.corner.value.medium} ${n.shape.corner.value.medium}; }`,u([B({type:Boolean})],J.prototype,"multi",void 0),J=u([f("m3e-accordion")],J);const K=i("var(--m3e-expansion-header-collapsed-height, 3rem)"),V=i("var(--m3e-expansion-header-expanded-height, 4rem)"),F=i("var(--m3e-expansion-header-padding-left, 1.5rem)"),Q=i("var(--m3e-expansion-header-padding-right, 1.5rem)"),X=i("var(--m3e-expansion-header-spacing, 0.5rem)"),Y=i("var(--m3e-expansion-header-toggle-icon-size, 1.5rem)"),ee=e`:host { display: flex; border-radius: inherit; outline: none; user-select: none; position: relative; height: ${K}; padding-inline-start: ${F}; padding-inline-end: ${Q}; font-size: ${i(`var(--m3e-expansion-header-font-size, ${n.typescale.standard.title.medium.fontSize})`)}; font-weight: ${i(`var(--m3e-expansion-header-font-weight, ${n.typescale.standard.title.medium.fontWeight})`)}; line-height: ${i(`var(--m3e-expansion-header-line-height, ${n.typescale.standard.title.medium.lineHeight})`)}; letter-spacing: ${i(`var(--m3e-expansion-header-tracking, ${n.typescale.standard.title.medium.tracking})`)}; transition: ${i(`height var(--m3e-collapsible-animation-duration, ${n.motion.duration.medium1})\n ${n.motion.easing.standard}`)}; column-gap: ${X}; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:disabled)) { cursor: pointer; } :host([aria-expanded="true"]) { height: ${V}; } :host(:not(:focus-visible)) .state-layer { --m3e-state-layer-focus-color: transparent; } :host([aria-expanded="true"]) .state-layer { --m3e-state-layer-hover-color: transparent; } :host([aria-expanded="true"]) [part="background"], .content { flex: 1 1 auto; display: flex; align-items: center; } .toggle { display: flex; align-items: center; justify-content: center; vertical-align: middle; font-size: ${Y}; transition: ${i(`transform var(--m3e-collapsible-animation-duration, ${n.motion.duration.medium1})\n ${n.motion.easing.standard}`)}; } :host([toggle-direction="vertical"][aria-expanded="true"]) .toggle { transform: rotate(180deg); } :host([toggle-direction="horizontal"][aria-expanded="true"]) .toggle { transform: rotate(var(--_expansion-header-horizontal-expanded-toggle-rotation, 90deg)); } :host([toggle-position="before"]) .toggle { margin-inline-start: calc(0px - ${X}); } :host([toggle-position="after"]) .toggle { margin-inline-end: calc(0px - ${X}); } :host([hide-toggle]) .toggle { display: none; } ::slotted([slot="toggle-icon"]) { font-size: inherit !important; flex: none; } ::slotted(svg[slot="toggle-icon"]) { width: 1em; height: 1em; } @media (prefers-reduced-motion) { :host, .toggle { transition: none; } }`,te=i(`var(--m3e-expansion-panel-text-color, ${n.color.onSurface})`),oe=i(`var(--m3e-expansion-panel-disabled-text-color, ${n.color.onSurface})`),ie=i("var(--m3e-expansion-panel-disabled-text-opacity, 38%)"),se=i("var(--m3e-expansion-panel-container-color)"),ne=i("var(--m3e-expansion-panel-elevation)"),re=i("var(--m3e-expansion-panel-shape)"),ae=i("var(--m3e-expansion-panel-open-elevation, var(--m3e-expansion-panel-elevation))"),le=i("var(--m3e-expansion-panel-open-shape, var(--m3e-expansion-panel-shape))"),de=i("var(--_expansion-panel-open-spacing)"),he=i("var(--m3e-expansion-panel-content-padding, 0 1.5rem 1rem 1.5rem)"),ce=i("var(--m3e-expansion-panel-actions-spacing, 0.5rem)"),pe=i("var(--m3e-expansion-panel-actions-padding, 1rem 1.5rem 1rem 1.5rem)"),ue=i("var(--m3e-expansion-panel-actions-divider-thickness, var(--m3e-divider-thickness, 1px))"),ge=i(`var(--m3e-expansion-panel-actions-divider-color, var(--m3e-divider-color, ${n.color.outlineVariant}))`),me=e`:host { display: block; background-color: ${se}; transition: ${i(`box-shadow var(--m3e-collapsible-animation-duration, ${n.motion.duration.medium1})\n ${n.motion.easing.standard}`)}; } :host(:not(:disabled)) { color: ${te}; } :host(:disabled) { color: color-mix( in srgb, ${oe} ${ie}, transparent ); } :host(:not([open])) { box-shadow: ${ne}; border-radius: ${re}; } :host([open]) { box-shadow: ${ae}; border-radius: ${le}; margin-block: ${de}; } .toggle { display: flex; align-items: center; justify-content: center; font-size: ${Y}; } ::slotted([slot="toggle-icon"]) { font-size: inherit !important; flex: none; } .toggle svg, ::slotted(svg[slot="toggle-icon"]) { width: 1em; height: 1em; } .content { padding: ${he}; } ::slotted([slot="actions"]) { flex: none; display: flex; align-items: center; column-gap: ${ce}; padding: ${pe}; border-top-style: solid; border-top-width: ${ue}; border-top-color: ${ge}; } ::slotted([slot="actions"][end]) { justify-content: flex-end; } @media (prefers-reduced-motion) { :host { transition: none; } } @media (forced-colors: active) { :host { border: 1px solid CanvasText; } :host(:disabled) { color: GrayText; } ::slotted([slot="actions"]) { border-top-color: GrayText; } }`;var fe,ve;let ye=class extends(r(a(l(d(h(t,"button"),!0))))){constructor(){super(...arguments),fe.add(this),this.toggleDirection="vertical",this.togglePosition="after",this.hideToggle=!1}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer].forEach(e=>e?.attach(this))}render(){return o`<m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer>${"before"===this.togglePosition?g(this,fe,"m",ve).call(this):s}<div class="content"><slot></slot></div>${"after"===this.togglePosition?g(this,fe,"m",ve).call(this):s}`}};var $e,be,xe,we,_e,Ee,Se,Pe,Ce,Ue,ke;fe=new WeakSet,ve=function(){return o`<div class="toggle" aria-hidden="true"><slot name="toggle-icon"></slot></div>`},ye.styles=ee,u([N(".focus-ring")],ye.prototype,"_focusRing",void 0),u([N(".state-layer")],ye.prototype,"_stateLayer",void 0),u([B({attribute:"toggle-direction",reflect:!0})],ye.prototype,"toggleDirection",void 0),u([B({attribute:"toggle-position",reflect:!0})],ye.prototype,"togglePosition",void 0),u([B({attribute:"hide-toggle",type:Boolean,reflect:!0})],ye.prototype,"hideToggle",void 0),ye=u([f("m3e-expansion-header")],ye);let Oe=ke=class extends(c(l(d(t,!0)),"opening","opened","closing","closed")){constructor(){super(...arguments),$e.add(this),be.set(this,ke.__nextId++),xe.set(this,`m3e-expansion-panel-${g(this,be,"f")}-content`),we.set(this,`m3e-expansion-panel-${g(this,be,"f")}-header`),_e.set(this,void 0),this.open=!1,this.toggleDirection="vertical",this.togglePosition="after",this.hideToggle=!1}connectedCallback(){super.connectedCallback(),m(this,_e,p.observe(()=>{this.requestUpdate(),g(this,$e,"m",Ue).call(this)}),"f")}disconnectedCallback(){super.disconnectedCallback(),g(this,_e,"f")?.call(this)}firstUpdated(e){super.firstUpdated(e),g(this,$e,"m",Ue).call(this)}render(){return o`<m3e-expansion-header id="${g(this,we,"f")}" toggle-direction="${this.toggleDirection}" toggle-position="${this.togglePosition}" ?hide-toggle="${this.hideToggle}" ?disabled="${this.disabled}" aria-expanded="${this.open}" aria-controls="${g(this,xe,"f")}" @click="${g(this,$e,"m",Se)}" @keydown="${g(this,$e,"m",Pe)}"><div slot="toggle-icon" class="toggle"><slot name="toggle-icon">${g(this,$e,"m",Ee).call(this)}</slot></div><slot name="header"></slot></m3e-expansion-header><m3e-collapsible id="${g(this,xe,"f")}" role="region" aria-labelledby="${g(this,we,"f")}" aria-hidden="${!this.open}" ?open="${this.open}" @opening="${g(this,$e,"m",Ce)}" @opened="${g(this,$e,"m",Ce)}" @closing="${g(this,$e,"m",Ce)}" @closed="${g(this,$e,"m",Ce)}"><div class="content"><slot></slot></div><slot name="actions"></slot></m3e-collapsible>`}};be=new WeakMap,xe=new WeakMap,we=new WeakMap,_e=new WeakMap,$e=new WeakSet,Ee=function(){return"vertical"===this.toggleDirection?o`<svg viewBox="0 -960 960 960" fill="currentColor"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg>`:"ltr"===p.current?o`<svg viewBox="0 -960 960 960" fill="currentColor"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>`:o`<svg viewBox="0 -960 960 960" fill="currentColor"><path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"/></svg>`},Se=function(){this.open=!this.open},Pe=function(e){switch(e.key){case"ArrowUp":{e.preventDefault();const t=this.closest("m3e-accordion");if(t){const e=[...t.panels].reverse(),o=e.indexOf(this);(e.find((e,t)=>!e.disabled&&t>o)??e.find((e,t)=>!e.disabled&&t<o))?._header?.focus()}else this.open=!1}break;case"ArrowDown":{e.preventDefault();const t=this.closest("m3e-accordion");if(t){const e=t.panels.indexOf(this);(t.panels.find((t,o)=>!t.disabled&&o>e)??t.panels.find((t,o)=>!t.disabled&&o<e))?._header?.focus()}else this.open=!0}}},Ce=function(e){e.stopPropagation(),this.dispatchEvent(new Event(e.type,{bubbles:!0}))},Ue=function(){"rtl"===p.current?this._header?.style.setProperty("--_expansion-header-horizontal-expanded-toggle-rotation","-90deg"):this._header?.style.removeProperty("--_expansion-header-horizontal-expanded-toggle-rotation")},Oe.styles=me,Oe.__nextId=0,u([N("m3e-expansion-header")],Oe.prototype,"_header",void 0),u([B({type:Boolean,reflect:!0})],Oe.prototype,"open",void 0),u([B({attribute:"toggle-direction",reflect:!0})],Oe.prototype,"toggleDirection",void 0),u([B({attribute:"toggle-position",reflect:!0})],Oe.prototype,"togglePosition",void 0),u([B({attribute:"hide-toggle",type:Boolean,reflect:!0})],Oe.prototype,"hideToggle",void 0),Oe=ke=u([f("m3e-expansion-panel")],Oe);export{J as M3eAccordionElement,ye as M3eExpansionHeaderElement,Oe as M3eExpansionPanelElement};
|
|
250
40
|
//# sourceMappingURL=index.min.js.map
|