@m3e/nav-rail 1.0.6 → 1.1.1
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/dist/index.js +430 -174
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -47
- package/dist/index.min.js.map +1 -1
- package/package.json +3 -17
package/dist/index.js
CHANGED
|
@@ -21,26 +21,24 @@ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
|
21
21
|
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
22
22
|
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
23
23
|
PERFORMANCE OF THIS SOFTWARE.
|
|
24
|
-
***************************************************************************** */
|
|
25
|
-
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
var e = new Error(message);
|
|
43
|
-
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
24
|
+
***************************************************************************** */
|
|
25
|
+
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
|
|
26
|
+
|
|
27
|
+
function __decorate(decorators, target, key, desc) {
|
|
28
|
+
var c = arguments.length,
|
|
29
|
+
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
|
|
30
|
+
d;
|
|
31
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
32
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
33
|
+
}
|
|
34
|
+
function __classPrivateFieldGet(receiver, state, kind, f) {
|
|
35
|
+
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
|
|
36
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
37
|
+
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
38
|
+
}
|
|
39
|
+
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
40
|
+
var e = new Error(message);
|
|
41
|
+
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
44
42
|
};
|
|
45
43
|
|
|
46
44
|
/**
|
|
@@ -48,20 +46,322 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
48
46
|
* Copyright 2017 Google LLC
|
|
49
47
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
50
48
|
*/
|
|
51
|
-
const t$1=t=>(e,o)=>
|
|
49
|
+
const t$1 = t => (e, o) => {
|
|
50
|
+
void 0 !== o ? o.addInitializer(() => {
|
|
51
|
+
customElements.define(t, e);
|
|
52
|
+
}) : customElements.define(t, e);
|
|
53
|
+
};
|
|
52
54
|
|
|
53
55
|
/**
|
|
54
56
|
* @license
|
|
55
57
|
* Copyright 2019 Google LLC
|
|
56
58
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
57
59
|
*/
|
|
58
|
-
const t
|
|
60
|
+
const t = globalThis,
|
|
61
|
+
e$1 = t.ShadowRoot && (void 0 === t.ShadyCSS || t.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype,
|
|
62
|
+
s = Symbol(),
|
|
63
|
+
o$1 = new WeakMap();
|
|
64
|
+
let n$1 = class n {
|
|
65
|
+
constructor(t, e, o) {
|
|
66
|
+
if (this._$cssResult$ = true, o !== s) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
|
|
67
|
+
this.cssText = t, this.t = e;
|
|
68
|
+
}
|
|
69
|
+
get styleSheet() {
|
|
70
|
+
let t = this.o;
|
|
71
|
+
const s = this.t;
|
|
72
|
+
if (e$1 && void 0 === t) {
|
|
73
|
+
const e = void 0 !== s && 1 === s.length;
|
|
74
|
+
e && (t = o$1.get(s)), void 0 === t && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), e && o$1.set(s, t));
|
|
75
|
+
}
|
|
76
|
+
return t;
|
|
77
|
+
}
|
|
78
|
+
toString() {
|
|
79
|
+
return this.cssText;
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
const r$1 = t => new n$1("string" == typeof t ? t : t + "", void 0, s),
|
|
83
|
+
S = (s, o) => {
|
|
84
|
+
if (e$1) s.adoptedStyleSheets = o.map(t => t instanceof CSSStyleSheet ? t : t.styleSheet);else for (const e of o) {
|
|
85
|
+
const o = document.createElement("style"),
|
|
86
|
+
n = t.litNonce;
|
|
87
|
+
void 0 !== n && o.setAttribute("nonce", n), o.textContent = e.cssText, s.appendChild(o);
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
c$1 = e$1 ? t => t : t => t instanceof CSSStyleSheet ? (t => {
|
|
91
|
+
let e = "";
|
|
92
|
+
for (const s of t.cssRules) e += s.cssText;
|
|
93
|
+
return r$1(e);
|
|
94
|
+
})(t) : t;
|
|
59
95
|
|
|
60
96
|
/**
|
|
61
97
|
* @license
|
|
62
98
|
* Copyright 2017 Google LLC
|
|
63
99
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
64
|
-
*/
|
|
100
|
+
*/
|
|
101
|
+
const {
|
|
102
|
+
is: i,
|
|
103
|
+
defineProperty: e,
|
|
104
|
+
getOwnPropertyDescriptor: h,
|
|
105
|
+
getOwnPropertyNames: r,
|
|
106
|
+
getOwnPropertySymbols: o,
|
|
107
|
+
getPrototypeOf: n
|
|
108
|
+
} = Object,
|
|
109
|
+
a = globalThis,
|
|
110
|
+
c = a.trustedTypes,
|
|
111
|
+
l = c ? c.emptyScript : "",
|
|
112
|
+
p = a.reactiveElementPolyfillSupport,
|
|
113
|
+
d = (t, s) => t,
|
|
114
|
+
u = {
|
|
115
|
+
toAttribute(t, s) {
|
|
116
|
+
switch (s) {
|
|
117
|
+
case Boolean:
|
|
118
|
+
t = t ? l : null;
|
|
119
|
+
break;
|
|
120
|
+
case Object:
|
|
121
|
+
case Array:
|
|
122
|
+
t = null == t ? t : JSON.stringify(t);
|
|
123
|
+
}
|
|
124
|
+
return t;
|
|
125
|
+
},
|
|
126
|
+
fromAttribute(t, s) {
|
|
127
|
+
let i = t;
|
|
128
|
+
switch (s) {
|
|
129
|
+
case Boolean:
|
|
130
|
+
i = null !== t;
|
|
131
|
+
break;
|
|
132
|
+
case Number:
|
|
133
|
+
i = null === t ? null : Number(t);
|
|
134
|
+
break;
|
|
135
|
+
case Object:
|
|
136
|
+
case Array:
|
|
137
|
+
try {
|
|
138
|
+
i = JSON.parse(t);
|
|
139
|
+
} catch (t) {
|
|
140
|
+
i = null;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
return i;
|
|
144
|
+
}
|
|
145
|
+
},
|
|
146
|
+
f = (t, s) => !i(t, s),
|
|
147
|
+
b = {
|
|
148
|
+
attribute: true,
|
|
149
|
+
type: String,
|
|
150
|
+
converter: u,
|
|
151
|
+
reflect: false,
|
|
152
|
+
useDefault: false,
|
|
153
|
+
hasChanged: f
|
|
154
|
+
};
|
|
155
|
+
Symbol.metadata ??= Symbol("metadata"), a.litPropertyMetadata ??= new WeakMap();
|
|
156
|
+
class y extends HTMLElement {
|
|
157
|
+
static addInitializer(t) {
|
|
158
|
+
this._$Ei(), (this.l ??= []).push(t);
|
|
159
|
+
}
|
|
160
|
+
static get observedAttributes() {
|
|
161
|
+
return this.finalize(), this._$Eh && [...this._$Eh.keys()];
|
|
162
|
+
}
|
|
163
|
+
static createProperty(t, s = b) {
|
|
164
|
+
if (s.state && (s.attribute = false), this._$Ei(), this.prototype.hasOwnProperty(t) && ((s = Object.create(s)).wrapped = true), this.elementProperties.set(t, s), !s.noAccessor) {
|
|
165
|
+
const i = Symbol(),
|
|
166
|
+
h = this.getPropertyDescriptor(t, i, s);
|
|
167
|
+
void 0 !== h && e(this.prototype, t, h);
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
static getPropertyDescriptor(t, s, i) {
|
|
171
|
+
const {
|
|
172
|
+
get: e,
|
|
173
|
+
set: r
|
|
174
|
+
} = h(this.prototype, t) ?? {
|
|
175
|
+
get() {
|
|
176
|
+
return this[s];
|
|
177
|
+
},
|
|
178
|
+
set(t) {
|
|
179
|
+
this[s] = t;
|
|
180
|
+
}
|
|
181
|
+
};
|
|
182
|
+
return {
|
|
183
|
+
get: e,
|
|
184
|
+
set(s) {
|
|
185
|
+
const h = e?.call(this);
|
|
186
|
+
r?.call(this, s), this.requestUpdate(t, h, i);
|
|
187
|
+
},
|
|
188
|
+
configurable: true,
|
|
189
|
+
enumerable: true
|
|
190
|
+
};
|
|
191
|
+
}
|
|
192
|
+
static getPropertyOptions(t) {
|
|
193
|
+
return this.elementProperties.get(t) ?? b;
|
|
194
|
+
}
|
|
195
|
+
static _$Ei() {
|
|
196
|
+
if (this.hasOwnProperty(d("elementProperties"))) return;
|
|
197
|
+
const t = n(this);
|
|
198
|
+
t.finalize(), void 0 !== t.l && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
|
|
199
|
+
}
|
|
200
|
+
static finalize() {
|
|
201
|
+
if (this.hasOwnProperty(d("finalized"))) return;
|
|
202
|
+
if (this.finalized = true, this._$Ei(), this.hasOwnProperty(d("properties"))) {
|
|
203
|
+
const t = this.properties,
|
|
204
|
+
s = [...r(t), ...o(t)];
|
|
205
|
+
for (const i of s) this.createProperty(i, t[i]);
|
|
206
|
+
}
|
|
207
|
+
const t = this[Symbol.metadata];
|
|
208
|
+
if (null !== t) {
|
|
209
|
+
const s = litPropertyMetadata.get(t);
|
|
210
|
+
if (void 0 !== s) for (const [t, i] of s) this.elementProperties.set(t, i);
|
|
211
|
+
}
|
|
212
|
+
this._$Eh = new Map();
|
|
213
|
+
for (const [t, s] of this.elementProperties) {
|
|
214
|
+
const i = this._$Eu(t, s);
|
|
215
|
+
void 0 !== i && this._$Eh.set(i, t);
|
|
216
|
+
}
|
|
217
|
+
this.elementStyles = this.finalizeStyles(this.styles);
|
|
218
|
+
}
|
|
219
|
+
static finalizeStyles(s) {
|
|
220
|
+
const i = [];
|
|
221
|
+
if (Array.isArray(s)) {
|
|
222
|
+
const e = new Set(s.flat(1 / 0).reverse());
|
|
223
|
+
for (const s of e) i.unshift(c$1(s));
|
|
224
|
+
} else void 0 !== s && i.push(c$1(s));
|
|
225
|
+
return i;
|
|
226
|
+
}
|
|
227
|
+
static _$Eu(t, s) {
|
|
228
|
+
const i = s.attribute;
|
|
229
|
+
return false === i ? void 0 : "string" == typeof i ? i : "string" == typeof t ? t.toLowerCase() : void 0;
|
|
230
|
+
}
|
|
231
|
+
constructor() {
|
|
232
|
+
super(), this._$Ep = void 0, this.isUpdatePending = false, this.hasUpdated = false, this._$Em = null, this._$Ev();
|
|
233
|
+
}
|
|
234
|
+
_$Ev() {
|
|
235
|
+
this._$ES = new Promise(t => this.enableUpdating = t), this._$AL = new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach(t => t(this));
|
|
236
|
+
}
|
|
237
|
+
addController(t) {
|
|
238
|
+
(this._$EO ??= new Set()).add(t), void 0 !== this.renderRoot && this.isConnected && t.hostConnected?.();
|
|
239
|
+
}
|
|
240
|
+
removeController(t) {
|
|
241
|
+
this._$EO?.delete(t);
|
|
242
|
+
}
|
|
243
|
+
_$E_() {
|
|
244
|
+
const t = new Map(),
|
|
245
|
+
s = this.constructor.elementProperties;
|
|
246
|
+
for (const i of s.keys()) this.hasOwnProperty(i) && (t.set(i, this[i]), delete this[i]);
|
|
247
|
+
t.size > 0 && (this._$Ep = t);
|
|
248
|
+
}
|
|
249
|
+
createRenderRoot() {
|
|
250
|
+
const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
|
|
251
|
+
return S(t, this.constructor.elementStyles), t;
|
|
252
|
+
}
|
|
253
|
+
connectedCallback() {
|
|
254
|
+
this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(true), this._$EO?.forEach(t => t.hostConnected?.());
|
|
255
|
+
}
|
|
256
|
+
enableUpdating(t) {}
|
|
257
|
+
disconnectedCallback() {
|
|
258
|
+
this._$EO?.forEach(t => t.hostDisconnected?.());
|
|
259
|
+
}
|
|
260
|
+
attributeChangedCallback(t, s, i) {
|
|
261
|
+
this._$AK(t, i);
|
|
262
|
+
}
|
|
263
|
+
_$ET(t, s) {
|
|
264
|
+
const i = this.constructor.elementProperties.get(t),
|
|
265
|
+
e = this.constructor._$Eu(t, i);
|
|
266
|
+
if (void 0 !== e && true === i.reflect) {
|
|
267
|
+
const h = (void 0 !== i.converter?.toAttribute ? i.converter : u).toAttribute(s, i.type);
|
|
268
|
+
this._$Em = t, null == h ? this.removeAttribute(e) : this.setAttribute(e, h), this._$Em = null;
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
_$AK(t, s) {
|
|
272
|
+
const i = this.constructor,
|
|
273
|
+
e = i._$Eh.get(t);
|
|
274
|
+
if (void 0 !== e && this._$Em !== e) {
|
|
275
|
+
const t = i.getPropertyOptions(e),
|
|
276
|
+
h = "function" == typeof t.converter ? {
|
|
277
|
+
fromAttribute: t.converter
|
|
278
|
+
} : void 0 !== t.converter?.fromAttribute ? t.converter : u;
|
|
279
|
+
this._$Em = e;
|
|
280
|
+
const r = h.fromAttribute(s, t.type);
|
|
281
|
+
this[e] = r ?? this._$Ej?.get(e) ?? r, this._$Em = null;
|
|
282
|
+
}
|
|
283
|
+
}
|
|
284
|
+
requestUpdate(t, s, i) {
|
|
285
|
+
if (void 0 !== t) {
|
|
286
|
+
const e = this.constructor,
|
|
287
|
+
h = this[t];
|
|
288
|
+
if (i ??= e.getPropertyOptions(t), !((i.hasChanged ?? f)(h, s) || i.useDefault && i.reflect && h === this._$Ej?.get(t) && !this.hasAttribute(e._$Eu(t, i)))) return;
|
|
289
|
+
this.C(t, s, i);
|
|
290
|
+
}
|
|
291
|
+
false === this.isUpdatePending && (this._$ES = this._$EP());
|
|
292
|
+
}
|
|
293
|
+
C(t, s, {
|
|
294
|
+
useDefault: i,
|
|
295
|
+
reflect: e,
|
|
296
|
+
wrapped: h
|
|
297
|
+
}, r) {
|
|
298
|
+
i && !(this._$Ej ??= new Map()).has(t) && (this._$Ej.set(t, r ?? s ?? this[t]), true !== h || void 0 !== r) || (this._$AL.has(t) || (this.hasUpdated || i || (s = void 0), this._$AL.set(t, s)), true === e && this._$Em !== t && (this._$Eq ??= new Set()).add(t));
|
|
299
|
+
}
|
|
300
|
+
async _$EP() {
|
|
301
|
+
this.isUpdatePending = true;
|
|
302
|
+
try {
|
|
303
|
+
await this._$ES;
|
|
304
|
+
} catch (t) {
|
|
305
|
+
Promise.reject(t);
|
|
306
|
+
}
|
|
307
|
+
const t = this.scheduleUpdate();
|
|
308
|
+
return null != t && (await t), !this.isUpdatePending;
|
|
309
|
+
}
|
|
310
|
+
scheduleUpdate() {
|
|
311
|
+
return this.performUpdate();
|
|
312
|
+
}
|
|
313
|
+
performUpdate() {
|
|
314
|
+
if (!this.isUpdatePending) return;
|
|
315
|
+
if (!this.hasUpdated) {
|
|
316
|
+
if (this.renderRoot ??= this.createRenderRoot(), this._$Ep) {
|
|
317
|
+
for (const [t, s] of this._$Ep) this[t] = s;
|
|
318
|
+
this._$Ep = void 0;
|
|
319
|
+
}
|
|
320
|
+
const t = this.constructor.elementProperties;
|
|
321
|
+
if (t.size > 0) for (const [s, i] of t) {
|
|
322
|
+
const {
|
|
323
|
+
wrapped: t
|
|
324
|
+
} = i,
|
|
325
|
+
e = this[s];
|
|
326
|
+
true !== t || this._$AL.has(s) || void 0 === e || this.C(s, void 0, i, e);
|
|
327
|
+
}
|
|
328
|
+
}
|
|
329
|
+
let t = false;
|
|
330
|
+
const s = this._$AL;
|
|
331
|
+
try {
|
|
332
|
+
t = this.shouldUpdate(s), t ? (this.willUpdate(s), this._$EO?.forEach(t => t.hostUpdate?.()), this.update(s)) : this._$EM();
|
|
333
|
+
} catch (s) {
|
|
334
|
+
throw t = false, this._$EM(), s;
|
|
335
|
+
}
|
|
336
|
+
t && this._$AE(s);
|
|
337
|
+
}
|
|
338
|
+
willUpdate(t) {}
|
|
339
|
+
_$AE(t) {
|
|
340
|
+
this._$EO?.forEach(t => t.hostUpdated?.()), this.hasUpdated || (this.hasUpdated = true, this.firstUpdated(t)), this.updated(t);
|
|
341
|
+
}
|
|
342
|
+
_$EM() {
|
|
343
|
+
this._$AL = new Map(), this.isUpdatePending = false;
|
|
344
|
+
}
|
|
345
|
+
get updateComplete() {
|
|
346
|
+
return this.getUpdateComplete();
|
|
347
|
+
}
|
|
348
|
+
getUpdateComplete() {
|
|
349
|
+
return this._$ES;
|
|
350
|
+
}
|
|
351
|
+
shouldUpdate(t) {
|
|
352
|
+
return true;
|
|
353
|
+
}
|
|
354
|
+
update(t) {
|
|
355
|
+
this._$Eq &&= this._$Eq.forEach(t => this._$ET(t, this[t])), this._$EM();
|
|
356
|
+
}
|
|
357
|
+
updated(t) {}
|
|
358
|
+
firstUpdated(t) {}
|
|
359
|
+
}
|
|
360
|
+
y.elementStyles = [], y.shadowRootOptions = {
|
|
361
|
+
mode: "open"
|
|
362
|
+
}, y[d("elementProperties")] = new Map(), y[d("finalized")] = new Map(), p?.({
|
|
363
|
+
ReactiveElement: y
|
|
364
|
+
}), (a.reactiveElementVersions ??= []).push("2.1.1");
|
|
65
365
|
|
|
66
366
|
var _M3eNavRailElement_instances, _M3eNavRailElement_focusKeyManager, _M3eNavRailElement_keyDownHandler, _M3eNavRailElement_handleKeyDown;
|
|
67
367
|
/**
|
|
@@ -112,93 +412,56 @@ var _M3eNavRailElement_instances, _M3eNavRailElement_focusKeyManager, _M3eNavRai
|
|
|
112
412
|
* @cssprop --m3e-nav-rail-expanded-icon-button-inset - Inset for icon buttons in expanded mode.
|
|
113
413
|
*/
|
|
114
414
|
let M3eNavRailElement = class M3eNavRailElement extends M3eNavBarElement {
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
_updateOrientation(orientation) {
|
|
148
|
-
super._updateOrientation(orientation);
|
|
149
|
-
this.querySelectorAll("m3e-fab").forEach((x) => x.toggleAttribute("extended", orientation === "horizontal"));
|
|
415
|
+
constructor() {
|
|
416
|
+
super();
|
|
417
|
+
_M3eNavRailElement_instances.add(this);
|
|
418
|
+
/** @private */
|
|
419
|
+
_M3eNavRailElement_focusKeyManager.set(this, new RovingTabIndexManager().withHomeAndEnd().withWrap());
|
|
420
|
+
/** @private */
|
|
421
|
+
_M3eNavRailElement_keyDownHandler.set(this, e => __classPrivateFieldGet(this, _M3eNavRailElement_instances, "m", _M3eNavRailElement_handleKeyDown).call(this, e));
|
|
422
|
+
this[selectionManager].onSelectedItemsChange(() => {
|
|
423
|
+
__classPrivateFieldGet(this, _M3eNavRailElement_focusKeyManager, "f").updateActiveItem(this[selectionManager].activeItem);
|
|
424
|
+
});
|
|
425
|
+
}
|
|
426
|
+
/** @inheritdoc */
|
|
427
|
+
connectedCallback() {
|
|
428
|
+
super.connectedCallback();
|
|
429
|
+
this.addEventListener("keydown", __classPrivateFieldGet(this, _M3eNavRailElement_keyDownHandler, "f"));
|
|
430
|
+
}
|
|
431
|
+
/** @inheritdoc */
|
|
432
|
+
disconnectedCallback() {
|
|
433
|
+
super.disconnectedCallback();
|
|
434
|
+
this.removeEventListener("keydown", __classPrivateFieldGet(this, _M3eNavRailElement_keyDownHandler, "f"));
|
|
435
|
+
}
|
|
436
|
+
/** @inheritdoc @internal */
|
|
437
|
+
_updateItems() {
|
|
438
|
+
const items = M3eInteractivityChecker.findInteractiveElements(this);
|
|
439
|
+
const {
|
|
440
|
+
added
|
|
441
|
+
} = __classPrivateFieldGet(this, _M3eNavRailElement_focusKeyManager, "f").setItems(items);
|
|
442
|
+
if (!__classPrivateFieldGet(this, _M3eNavRailElement_focusKeyManager, "f").activeItem) {
|
|
443
|
+
const active = added.find(x => !x.hasAttribute("disabled"));
|
|
444
|
+
if (active) {
|
|
445
|
+
__classPrivateFieldGet(this, _M3eNavRailElement_focusKeyManager, "f").updateActiveItem(active);
|
|
446
|
+
}
|
|
150
447
|
}
|
|
448
|
+
super._updateItems();
|
|
449
|
+
}
|
|
450
|
+
/** @inheritdoc @internal */
|
|
451
|
+
_updateOrientation(orientation) {
|
|
452
|
+
super._updateOrientation(orientation);
|
|
453
|
+
this.querySelectorAll("m3e-fab").forEach(x => x.toggleAttribute("extended", orientation === "horizontal"));
|
|
454
|
+
}
|
|
151
455
|
};
|
|
152
456
|
_M3eNavRailElement_focusKeyManager = new WeakMap();
|
|
153
457
|
_M3eNavRailElement_keyDownHandler = new WeakMap();
|
|
154
458
|
_M3eNavRailElement_instances = new WeakSet();
|
|
155
459
|
_M3eNavRailElement_handleKeyDown = function _M3eNavRailElement_handleKeyDown(e) {
|
|
156
|
-
|
|
460
|
+
__classPrivateFieldGet(this, _M3eNavRailElement_focusKeyManager, "f").onKeyDown(e);
|
|
157
461
|
};
|
|
158
462
|
/** The styles of the element. */
|
|
159
|
-
M3eNavRailElement.styles = css
|
|
160
|
-
|
|
161
|
-
display: flex;
|
|
162
|
-
flex-direction: column;
|
|
163
|
-
overflow-x: hidden;
|
|
164
|
-
overflow-y: auto;
|
|
165
|
-
scrollbar-width: ${DesignToken.scrollbar.thinWidth};
|
|
166
|
-
scrollbar-color: ${DesignToken.scrollbar.color};
|
|
167
|
-
padding-block-start: var(--m3e-nav-rail-top-space, 2.75rem);
|
|
168
|
-
padding-block-end: var(--m3e-nav-rail-bottom-space, 0.5rem);
|
|
169
|
-
}
|
|
170
|
-
:host(.-compact) {
|
|
171
|
-
width: var(--m3e-nav-rail-compact-width, 6rem);
|
|
172
|
-
}
|
|
173
|
-
:host(.-compact) ::slotted(m3e-fab) {
|
|
174
|
-
align-self: center;
|
|
175
|
-
}
|
|
176
|
-
:host(:not(.-compact)) {
|
|
177
|
-
padding-inline: var(--m3e-nav-rail-expanded-inline-padding, 1.25rem);
|
|
178
|
-
min-width: var(--m3e-nav-rail-expanded-min-width, 13.75rem);
|
|
179
|
-
max-width: var(--m3e-nav-rail-expanded-max-width, 22.5rem);
|
|
180
|
-
align-items: flex-start;
|
|
181
|
-
--m3e-horizontal-nav-item-active-indicator-height: var(--m3e-nav-rail-expanded-item-height, 3.5rem);
|
|
182
|
-
--_nav-item-align-self: stretch;
|
|
183
|
-
--_nav-item-justify-content: flex-start;
|
|
184
|
-
}
|
|
185
|
-
::slotted(*) {
|
|
186
|
-
flex: none;
|
|
187
|
-
}
|
|
188
|
-
::slotted(m3e-icon-button),
|
|
189
|
-
::slotted(m3e-fab) {
|
|
190
|
-
margin-block-end: var(--m3e-nav-rail-button-item-space, 1rem);
|
|
191
|
-
}
|
|
192
|
-
:host(.-compact) ::slotted(m3e-icon-button) {
|
|
193
|
-
align-self: center;
|
|
194
|
-
}
|
|
195
|
-
:host(:not(.-compact)) ::slotted(m3e-icon-button) {
|
|
196
|
-
margin-inline-start: var(--m3e-nav-rail-expanded-icon-button-inset, 0.5rem);
|
|
197
|
-
}
|
|
198
|
-
`;
|
|
199
|
-
M3eNavRailElement = __decorate([
|
|
200
|
-
t$1("m3e-nav-rail")
|
|
201
|
-
], M3eNavRailElement);
|
|
463
|
+
M3eNavRailElement.styles = css`:host { display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; padding-block-start: var(--m3e-nav-rail-top-space, 2.75rem); padding-block-end: var(--m3e-nav-rail-bottom-space, 0.5rem); } :host(.-compact) { width: var(--m3e-nav-rail-compact-width, 6rem); } :host(.-compact) ::slotted(m3e-fab) { align-self: center; } :host(:not(.-compact)) { padding-inline: var(--m3e-nav-rail-expanded-inline-padding, 1.25rem); min-width: var(--m3e-nav-rail-expanded-min-width, 13.75rem); max-width: var(--m3e-nav-rail-expanded-max-width, 22.5rem); align-items: flex-start; --m3e-horizontal-nav-item-active-indicator-height: var(--m3e-nav-rail-expanded-item-height, 3.5rem); --_nav-item-align-self: stretch; --_nav-item-justify-content: flex-start; } ::slotted(*) { flex: none; } ::slotted(m3e-icon-button), ::slotted(m3e-fab) { margin-block-end: var(--m3e-nav-rail-button-item-space, 1rem); } :host(.-compact) ::slotted(m3e-icon-button) { align-self: center; } :host(:not(.-compact)) ::slotted(m3e-icon-button) { margin-inline-start: var(--m3e-nav-rail-expanded-icon-button-inset, 0.5rem); }`;
|
|
464
|
+
M3eNavRailElement = __decorate([t$1("m3e-nav-rail")], M3eNavRailElement);
|
|
202
465
|
|
|
203
466
|
var _M3eNavRailToggleElement_instances, _M3eNavRailToggleElement_clickHandler, _M3eNavRailToggleElement_mutationController, _M3eNavRailToggleElement_handleClick, _M3eNavRailToggleElement_updateToggle;
|
|
204
467
|
/**
|
|
@@ -230,91 +493,84 @@ var _M3eNavRailToggleElement_instances, _M3eNavRailToggleElement_clickHandler, _
|
|
|
230
493
|
* @tag m3e-nav-rail-toggle
|
|
231
494
|
*/
|
|
232
495
|
let M3eNavRailToggleElement = class M3eNavRailToggleElement extends HtmlFor(LitElement) {
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
496
|
+
constructor() {
|
|
497
|
+
super(...arguments);
|
|
498
|
+
_M3eNavRailToggleElement_instances.add(this);
|
|
499
|
+
/** @private */
|
|
500
|
+
_M3eNavRailToggleElement_clickHandler.set(this, e => __classPrivateFieldGet(this, _M3eNavRailToggleElement_instances, "m", _M3eNavRailToggleElement_handleClick).call(this, e));
|
|
501
|
+
/** @private */
|
|
502
|
+
_M3eNavRailToggleElement_mutationController.set(this, new MutationController(this, {
|
|
503
|
+
target: null,
|
|
504
|
+
config: {
|
|
505
|
+
attributeFilter: ["class"]
|
|
506
|
+
},
|
|
507
|
+
callback: () => __classPrivateFieldGet(this, _M3eNavRailToggleElement_instances, "m", _M3eNavRailToggleElement_updateToggle).call(this)
|
|
508
|
+
}));
|
|
509
|
+
}
|
|
510
|
+
/** @inheritdoc */
|
|
511
|
+
connectedCallback() {
|
|
512
|
+
super.connectedCallback();
|
|
513
|
+
this.parentElement?.addEventListener("click", __classPrivateFieldGet(this, _M3eNavRailToggleElement_clickHandler, "f"));
|
|
514
|
+
}
|
|
515
|
+
/** @inheritdoc */
|
|
516
|
+
disconnectedCallback() {
|
|
517
|
+
super.disconnectedCallback();
|
|
518
|
+
this.parentElement?.removeEventListener("click", __classPrivateFieldGet(this, _M3eNavRailToggleElement_clickHandler, "f"));
|
|
519
|
+
}
|
|
520
|
+
/** @inheritdoc */
|
|
521
|
+
attach(control) {
|
|
522
|
+
if (control instanceof M3eNavRailElement) {
|
|
523
|
+
__classPrivateFieldGet(this, _M3eNavRailToggleElement_mutationController, "f").observe(control);
|
|
252
524
|
}
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
if (control instanceof M3eNavRailElement) {
|
|
256
|
-
__classPrivateFieldGet(this, _M3eNavRailToggleElement_mutationController, "f").observe(control);
|
|
257
|
-
}
|
|
258
|
-
if (this.htmlFor && this.parentElement) {
|
|
259
|
-
addAriaReferencedId(this.parentElement, "aria-controls", this.htmlFor);
|
|
260
|
-
}
|
|
261
|
-
super.attach(control);
|
|
262
|
-
__classPrivateFieldGet(this, _M3eNavRailToggleElement_instances, "m", _M3eNavRailToggleElement_updateToggle).call(this);
|
|
525
|
+
if (this.htmlFor && this.parentElement) {
|
|
526
|
+
addAriaReferencedId(this.parentElement, "aria-controls", this.htmlFor);
|
|
263
527
|
}
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
removeAriaReferencedId(this.parentElement, "aria-controls", this.htmlFor);
|
|
272
|
-
}
|
|
273
|
-
this.parentElement.ariaExpanded = null;
|
|
274
|
-
}
|
|
275
|
-
super.detach();
|
|
528
|
+
super.attach(control);
|
|
529
|
+
__classPrivateFieldGet(this, _M3eNavRailToggleElement_instances, "m", _M3eNavRailToggleElement_updateToggle).call(this);
|
|
530
|
+
}
|
|
531
|
+
/** @inheritdoc */
|
|
532
|
+
detach() {
|
|
533
|
+
for (const target of __classPrivateFieldGet(this, _M3eNavRailToggleElement_mutationController, "f").targets) {
|
|
534
|
+
__classPrivateFieldGet(this, _M3eNavRailToggleElement_mutationController, "f").unobserve(target);
|
|
276
535
|
}
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
536
|
+
if (this.parentElement) {
|
|
537
|
+
if (this.htmlFor) {
|
|
538
|
+
removeAriaReferencedId(this.parentElement, "aria-controls", this.htmlFor);
|
|
539
|
+
}
|
|
540
|
+
this.parentElement.ariaExpanded = null;
|
|
280
541
|
}
|
|
542
|
+
super.detach();
|
|
543
|
+
}
|
|
544
|
+
/** @inheritdoc */
|
|
545
|
+
render() {
|
|
546
|
+
return html`<slot></slot>`;
|
|
547
|
+
}
|
|
281
548
|
};
|
|
282
549
|
_M3eNavRailToggleElement_clickHandler = new WeakMap();
|
|
283
550
|
_M3eNavRailToggleElement_mutationController = new WeakMap();
|
|
284
551
|
_M3eNavRailToggleElement_instances = new WeakSet();
|
|
285
552
|
_M3eNavRailToggleElement_handleClick = function _M3eNavRailToggleElement_handleClick(e) {
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
553
|
+
if (!e.defaultPrevented && this.control instanceof M3eNavRailElement) {
|
|
554
|
+
this.control.currentMode = this.control.currentMode === "compact" ? "expanded" : "compact";
|
|
555
|
+
}
|
|
289
556
|
};
|
|
290
|
-
_M3eNavRailToggleElement_updateToggle =
|
|
291
|
-
/** @private */
|
|
557
|
+
_M3eNavRailToggleElement_updateToggle = /** @private */
|
|
292
558
|
async function _M3eNavRailToggleElement_updateToggle() {
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
}
|
|
559
|
+
if (!this.parentElement) return;
|
|
560
|
+
const selected = this.control instanceof M3eNavRailElement && this.control.currentMode === "expanded";
|
|
561
|
+
this.parentElement.ariaExpanded = `${selected}`;
|
|
562
|
+
if (this.parentElement.hasAttribute("toggle")) {
|
|
563
|
+
this.parentElement.toggleAttribute("selected", selected);
|
|
564
|
+
}
|
|
565
|
+
if (this.parentElement instanceof LitElement) {
|
|
566
|
+
// Wait for update and remove aria-pressed due to use of aria-expanded.
|
|
567
|
+
await this.parentElement.updateComplete;
|
|
568
|
+
this.parentElement.ariaPressed = null;
|
|
569
|
+
}
|
|
305
570
|
};
|
|
306
571
|
/** The styles of the element. */
|
|
307
|
-
M3eNavRailToggleElement.styles = css
|
|
308
|
-
|
|
309
|
-
display: contents;
|
|
310
|
-
}
|
|
311
|
-
::slotted(.material-icons) {
|
|
312
|
-
font-size: inherit !important;
|
|
313
|
-
}
|
|
314
|
-
`;
|
|
315
|
-
M3eNavRailToggleElement = __decorate([
|
|
316
|
-
t$1("m3e-nav-rail-toggle")
|
|
317
|
-
], M3eNavRailToggleElement);
|
|
572
|
+
M3eNavRailToggleElement.styles = css`:host { display: contents; } ::slotted(.material-icons) { font-size: inherit !important; }`;
|
|
573
|
+
M3eNavRailToggleElement = __decorate([t$1("m3e-nav-rail-toggle")], M3eNavRailToggleElement);
|
|
318
574
|
|
|
319
575
|
export { M3eNavRailElement, M3eNavRailToggleElement };
|
|
320
576
|
//# sourceMappingURL=index.js.map
|