@odx/foundation 1.0.0-beta.100 → 1.0.0-beta.101
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CustomElement } from '../../lib/main.js';
|
|
2
|
-
import { TemplateResult } from 'lit';
|
|
2
|
+
import { PropertyValues, TemplateResult } from 'lit';
|
|
3
3
|
declare global {
|
|
4
4
|
interface HTMLElementTagNameMap {
|
|
5
5
|
'odx-main-menu': OdxMainMenu;
|
|
@@ -8,9 +8,9 @@ declare global {
|
|
|
8
8
|
export declare class OdxMainMenu extends CustomElement {
|
|
9
9
|
#private;
|
|
10
10
|
private links;
|
|
11
|
+
open: boolean;
|
|
12
|
+
constructor();
|
|
11
13
|
connectedCallback(): void;
|
|
12
|
-
toggle(): void;
|
|
13
|
-
open(): void;
|
|
14
|
-
close(): void;
|
|
15
14
|
protected render(): TemplateResult;
|
|
15
|
+
protected willUpdate(props: PropertyValues<this>): void;
|
|
16
16
|
}
|
package/dist/components.js
CHANGED
|
@@ -2403,9 +2403,31 @@ __decorateClass([
|
|
|
2403
2403
|
], _OdxLogo.prototype, "compact", 2);
|
|
2404
2404
|
let OdxLogo = _OdxLogo;
|
|
2405
2405
|
|
|
2406
|
-
const styles$E = ":host{--
|
|
2406
|
+
const styles$E = ":host{transition:var(--odx-motion-duration-default) var(--odx-motion-easing-default) allow-discrete;visibility:hidden;margin:0;background-color:transparent;padding:0;block-size:100%}:host::backdrop{display:none}.base{display:grid;grid-template-rows:auto 1fr auto;transform:translate(-100%);transition:var(--odx-motion-duration-default) var(--odx-motion-easing-default);border:none;box-shadow:var(--odx-shadow-level-2);background-color:var(--odx-color-background-brand);block-size:100%;inline-size:var(--odx-main-menu-max-width, min(100dvw, 384px));color:var(--odx-color-foreground-inverse-static)}.header,.link-navigation{padding:var(--odx-size-75) var(--odx-size-150)}.navigation{padding:var(--odx-size-75);overflow-y:auto}.link-navigation{column-gap:var(--odx-size-100)}.backdrop{position:fixed;inset:0;transition:all var(--odx-motion-duration-default) linear;opacity:0;z-index:-1;background-color:var(--odx-color-backdrop);cursor:default;backdrop-filter:blur(0)}::slotted(:is(odx-link,a)[slot=\"link-navigation\"][disabled]){color:var(--odx-color-foreground-disabled-brand)}:host(:popover-open){visibility:visible;@starting-style{visibility:hidden}.base{transform:translate(0);@starting-style{transform:translate(-100%)}}}:host(:popover-open) .backdrop{backdrop-filter:blur(var(--odx-elevation-blur));opacity:1;@starting-style{backdrop-filter:blur(0);opacity:0}}";
|
|
2407
2407
|
|
|
2408
2408
|
const _OdxMainMenu = class _OdxMainMenu extends CustomElement {
|
|
2409
|
+
constructor() {
|
|
2410
|
+
super();
|
|
2411
|
+
this.open = false;
|
|
2412
|
+
this.#handleSlotChange = () => {
|
|
2413
|
+
for (const link of this.links) {
|
|
2414
|
+
link.slot ||= "link-navigation";
|
|
2415
|
+
link.subtle = true;
|
|
2416
|
+
}
|
|
2417
|
+
};
|
|
2418
|
+
this.#handleToggle = (event) => {
|
|
2419
|
+
const shouldOpen = event.newState === "open";
|
|
2420
|
+
if (this.open === shouldOpen) return;
|
|
2421
|
+
this.open = shouldOpen;
|
|
2422
|
+
if (!this.open) return;
|
|
2423
|
+
waitForAnimations(this).then(() => {
|
|
2424
|
+
this.shadowRoot?.querySelector("[autofocus]")?.focus();
|
|
2425
|
+
});
|
|
2426
|
+
};
|
|
2427
|
+
if (!isServer) {
|
|
2428
|
+
this.addEventListener("toggle", this.#handleToggle);
|
|
2429
|
+
}
|
|
2430
|
+
}
|
|
2409
2431
|
static {
|
|
2410
2432
|
customElement("odx-main-menu", styles$E)(_OdxMainMenu);
|
|
2411
2433
|
}
|
|
@@ -2413,45 +2435,44 @@ const _OdxMainMenu = class _OdxMainMenu extends CustomElement {
|
|
|
2413
2435
|
super.connectedCallback();
|
|
2414
2436
|
this.popover = "auto";
|
|
2415
2437
|
}
|
|
2416
|
-
toggle() {
|
|
2417
|
-
this.togglePopover();
|
|
2418
|
-
}
|
|
2419
|
-
open() {
|
|
2420
|
-
this.showPopover();
|
|
2421
|
-
}
|
|
2422
|
-
close() {
|
|
2423
|
-
this.hidePopover();
|
|
2424
|
-
}
|
|
2425
2438
|
render() {
|
|
2426
2439
|
return html`
|
|
2427
|
-
<
|
|
2428
|
-
<odx-stack
|
|
2429
|
-
<odx-
|
|
2430
|
-
|
|
2440
|
+
<div class="base">
|
|
2441
|
+
<odx-stack class="header">
|
|
2442
|
+
<odx-stack horizontal justify="space-between">
|
|
2443
|
+
<odx-logo size="sm"></odx-logo>
|
|
2444
|
+
<odx-icon-button icon="core::close" variant="primary" @click=${this.hidePopover} autofocus></odx-icon-button>
|
|
2445
|
+
</odx-stack>
|
|
2446
|
+
<odx-stack gap="xs">
|
|
2447
|
+
<slot name="title"></slot>
|
|
2448
|
+
<slot name="subtitle"></slot>
|
|
2449
|
+
</odx-stack>
|
|
2431
2450
|
</odx-stack>
|
|
2432
|
-
<odx-stack
|
|
2433
|
-
<slot
|
|
2434
|
-
<slot name="subtitle"></slot>
|
|
2451
|
+
<odx-stack role="navigation" class="navigation">
|
|
2452
|
+
<slot @slotchange=${this.#handleSlotChange}></slot>
|
|
2435
2453
|
</odx-stack>
|
|
2436
|
-
|
|
2437
|
-
|
|
2438
|
-
|
|
2439
|
-
</
|
|
2440
|
-
<
|
|
2441
|
-
<slot name="link-navigation"></slot>
|
|
2442
|
-
</odx-stack>
|
|
2454
|
+
<odx-stack class="link-navigation" gap="xs" horizontal wrap>
|
|
2455
|
+
<slot name="link-navigation"></slot>
|
|
2456
|
+
</odx-stack>
|
|
2457
|
+
</div>
|
|
2458
|
+
<div class="backdrop" @click=${this.hidePopover}></div>
|
|
2443
2459
|
`;
|
|
2444
2460
|
}
|
|
2445
|
-
|
|
2446
|
-
|
|
2447
|
-
|
|
2448
|
-
|
|
2461
|
+
willUpdate(props) {
|
|
2462
|
+
super.willUpdate(props);
|
|
2463
|
+
if (props.has("open")) {
|
|
2464
|
+
this.togglePopover(this.open);
|
|
2449
2465
|
}
|
|
2450
|
-
}
|
|
2466
|
+
}
|
|
2467
|
+
#handleSlotChange;
|
|
2468
|
+
#handleToggle;
|
|
2451
2469
|
};
|
|
2452
2470
|
__decorateClass([
|
|
2453
2471
|
queryAssignedElements({ selector: "odx-link", flatten: true })
|
|
2454
2472
|
], _OdxMainMenu.prototype, "links", 2);
|
|
2473
|
+
__decorateClass([
|
|
2474
|
+
property({ type: Boolean, reflect: true, useDefault: true })
|
|
2475
|
+
], _OdxMainMenu.prototype, "open", 2);
|
|
2455
2476
|
let OdxMainMenu = _OdxMainMenu;
|
|
2456
2477
|
|
|
2457
2478
|
class OdxMainMenuButton extends CustomElement {
|
|
@@ -2465,7 +2486,7 @@ class OdxMainMenuButton extends CustomElement {
|
|
|
2465
2486
|
`;
|
|
2466
2487
|
}
|
|
2467
2488
|
#handleClick = () => {
|
|
2468
|
-
document.querySelector("odx-main-menu")?.
|
|
2489
|
+
document.querySelector("odx-main-menu")?.showPopover();
|
|
2469
2490
|
};
|
|
2470
2491
|
}
|
|
2471
2492
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@odx/foundation",
|
|
3
3
|
"description": "A library of Web Component building blocks for ODX",
|
|
4
|
-
"version": "1.0.0-beta.
|
|
4
|
+
"version": "1.0.0-beta.101",
|
|
5
5
|
"author": "Drägerwerk AG & Co.KGaA",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE",
|
|
7
7
|
"homepage": "https://odx.draeger.com",
|
|
@@ -16,11 +16,12 @@
|
|
|
16
16
|
"type": "module",
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"@preact/signals-core": "1.8.0",
|
|
19
|
+
"@odx/assets-utils": "^3.1.1",
|
|
19
20
|
"lit": "3.3.0"
|
|
20
21
|
},
|
|
21
22
|
"peerDependencies": {
|
|
22
23
|
"@odx/design-tokens": "^1.0.2",
|
|
23
|
-
"@odx/icons": "^4.0.0-rc.
|
|
24
|
+
"@odx/icons": "^4.0.0-rc.32"
|
|
24
25
|
},
|
|
25
26
|
"devDependencies": {
|
|
26
27
|
"@custom-elements-manifest/analyzer": "0.10.4",
|