@jsekulowicz/ds-components 0.9.13 → 0.11.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/custom-elements.json +323 -10
- package/dist/define.d.ts +1 -0
- package/dist/define.d.ts.map +1 -1
- package/dist/define.js +1 -0
- package/dist/define.js.map +1 -1
- package/dist/molecules/dialog/dialog.styles.d.ts.map +1 -1
- package/dist/molecules/dialog/dialog.styles.js +64 -13
- package/dist/molecules/dialog/dialog.styles.js.map +1 -1
- package/dist/molecules/drawer/define.d.ts +8 -0
- package/dist/molecules/drawer/define.d.ts.map +1 -0
- package/dist/molecules/drawer/define.js +6 -0
- package/dist/molecules/drawer/define.js.map +1 -0
- package/dist/molecules/drawer/drawer.d.ts +37 -0
- package/dist/molecules/drawer/drawer.d.ts.map +1 -0
- package/dist/molecules/drawer/drawer.js +144 -0
- package/dist/molecules/drawer/drawer.js.map +1 -0
- package/dist/molecules/drawer/drawer.styles.d.ts +2 -0
- package/dist/molecules/drawer/drawer.styles.d.ts.map +1 -0
- package/dist/molecules/drawer/drawer.styles.js +165 -0
- package/dist/molecules/drawer/drawer.styles.js.map +1 -0
- package/dist/molecules/drawer/index.d.ts +2 -0
- package/dist/molecules/drawer/index.d.ts.map +1 -0
- package/dist/molecules/drawer/index.js +2 -0
- package/dist/molecules/drawer/index.js.map +1 -0
- package/dist/templates/page-shell/page-shell.d.ts +6 -5
- package/dist/templates/page-shell/page-shell.d.ts.map +1 -1
- package/dist/templates/page-shell/page-shell.js +40 -47
- package/dist/templates/page-shell/page-shell.js.map +1 -1
- package/dist/templates/page-shell/page-shell.styles.d.ts.map +1 -1
- package/dist/templates/page-shell/page-shell.styles.js +12 -73
- package/dist/templates/page-shell/page-shell.styles.js.map +1 -1
- package/package.json +8 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/molecules/drawer/drawer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,8BAA8B,CAAC;AACtC,OAAO,kCAAkC,CAAC;AAG1C,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;AAEzC;;;;;;;;;;;;;GAaG;AACH,qBAAa,QAAS,SAAQ,SAAS;;IACrC,OAAgB,MAAM,4BAAuC;IAEjB,IAAI,UAAS;IAC7C,KAAK,SAAM;IACqB,WAAW,UAAQ;IAClC,IAAI,EAAE,UAAU,CAAQ;IACxB,IAAI,EAAE,UAAU,CAAW;IAEvC,OAAO,CAAC,SAAS,CAAC,CAAoB;IAEvD,IAAI,IAAI,IAAI;IAIZ,KAAK,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI;IAOxB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAUtC,oBAAoB,IAAI,IAAI;IA6B5B,MAAM,IAAI,cAAc;CAmClC"}
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
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;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { html } from 'lit';
|
|
8
|
+
import { property, query } from 'lit/decorators.js';
|
|
9
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
10
|
+
import { DsElement } from '@jsekulowicz/ds-core';
|
|
11
|
+
import '../card/define.js';
|
|
12
|
+
import '../../atoms/button/define.js';
|
|
13
|
+
import '../../atoms/icon/icons/x-mark.js';
|
|
14
|
+
import { drawerStyles } from './drawer.styles.js';
|
|
15
|
+
/**
|
|
16
|
+
* @tag ds-drawer
|
|
17
|
+
* @summary Edge-anchored modal panel built on the native `<dialog>` element. Slides in from the inline start or end with a sticky header (title + close) and a scrolling body.
|
|
18
|
+
* @slot title - Heading content rendered in the header row.
|
|
19
|
+
* @slot default - Body content. Scrolls when it overflows.
|
|
20
|
+
* @slot footer - Footer content, typically `<ds-button>` actions.
|
|
21
|
+
* @csspart dialog - The native `<dialog>` element.
|
|
22
|
+
* @csspart card - The inner `ds-card` container.
|
|
23
|
+
* @csspart body - The scrolling body region (forwarded from `ds-card`).
|
|
24
|
+
* @csspart close-button - The header close button.
|
|
25
|
+
* @event ds-open - Fires after the drawer opens.
|
|
26
|
+
* @event ds-close - Fires after the drawer closes. Detail: `{ returnValue: string }`.
|
|
27
|
+
* @event ds-cancel - Fires when the drawer is dismissed via Escape or backdrop click.
|
|
28
|
+
*/
|
|
29
|
+
export class DsDrawer extends DsElement {
|
|
30
|
+
constructor() {
|
|
31
|
+
super(...arguments);
|
|
32
|
+
this.open = false;
|
|
33
|
+
this.label = '';
|
|
34
|
+
this.dismissible = true;
|
|
35
|
+
this.size = 'sm';
|
|
36
|
+
this.side = 'start';
|
|
37
|
+
this.#onBackdropClick = (event) => {
|
|
38
|
+
if (!this.dismissible)
|
|
39
|
+
return;
|
|
40
|
+
if (event.target === this._dialogEl)
|
|
41
|
+
this.close();
|
|
42
|
+
};
|
|
43
|
+
this.#onCancel = (event) => {
|
|
44
|
+
if (!this.dismissible) {
|
|
45
|
+
event.preventDefault();
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
this.emit('ds-cancel', { detail: null });
|
|
49
|
+
};
|
|
50
|
+
this.#onNativeClose = () => {
|
|
51
|
+
this.open = false;
|
|
52
|
+
this.emit('ds-close', {
|
|
53
|
+
detail: { returnValue: this._dialogEl?.returnValue ?? '' },
|
|
54
|
+
});
|
|
55
|
+
};
|
|
56
|
+
this.#onCloseButtonClick = () => {
|
|
57
|
+
this.close();
|
|
58
|
+
};
|
|
59
|
+
}
|
|
60
|
+
static { this.styles = [...DsElement.styles, drawerStyles]; }
|
|
61
|
+
show() {
|
|
62
|
+
this.open = true;
|
|
63
|
+
}
|
|
64
|
+
close(returnValue) {
|
|
65
|
+
if (returnValue !== undefined && this._dialogEl) {
|
|
66
|
+
this._dialogEl.returnValue = returnValue;
|
|
67
|
+
}
|
|
68
|
+
this.open = false;
|
|
69
|
+
}
|
|
70
|
+
updated(changed) {
|
|
71
|
+
if (!changed.has('open') || !this._dialogEl)
|
|
72
|
+
return;
|
|
73
|
+
if (this.open && !this._dialogEl.open) {
|
|
74
|
+
this._dialogEl.showModal();
|
|
75
|
+
this.emit('ds-open', { detail: null });
|
|
76
|
+
}
|
|
77
|
+
else if (!this.open && this._dialogEl.open) {
|
|
78
|
+
this._dialogEl.close();
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
disconnectedCallback() {
|
|
82
|
+
super.disconnectedCallback();
|
|
83
|
+
if (this._dialogEl?.open)
|
|
84
|
+
this._dialogEl.close();
|
|
85
|
+
}
|
|
86
|
+
#onBackdropClick;
|
|
87
|
+
#onCancel;
|
|
88
|
+
#onNativeClose;
|
|
89
|
+
#onCloseButtonClick;
|
|
90
|
+
render() {
|
|
91
|
+
const titleId = `${this.uid}-title`;
|
|
92
|
+
const useLabelledBy = !this.label;
|
|
93
|
+
return html `<dialog
|
|
94
|
+
part="dialog"
|
|
95
|
+
aria-labelledby=${ifDefined(useLabelledBy ? titleId : undefined)}
|
|
96
|
+
aria-label=${ifDefined(this.label || undefined)}
|
|
97
|
+
@click=${this.#onBackdropClick}
|
|
98
|
+
@cancel=${this.#onCancel}
|
|
99
|
+
@close=${this.#onNativeClose}
|
|
100
|
+
>
|
|
101
|
+
<ds-card elevation="none" part="card">
|
|
102
|
+
<div slot="title" class="title-row">
|
|
103
|
+
<h2 id=${titleId} class="title-text"><slot name="title"></slot></h2>
|
|
104
|
+
<ds-button
|
|
105
|
+
class="close-btn"
|
|
106
|
+
part="close-button"
|
|
107
|
+
variant="ghost"
|
|
108
|
+
size="sm"
|
|
109
|
+
square
|
|
110
|
+
label="Close"
|
|
111
|
+
@click=${this.#onCloseButtonClick}
|
|
112
|
+
>
|
|
113
|
+
<ds-icon
|
|
114
|
+
slot="leading"
|
|
115
|
+
name="x-mark"
|
|
116
|
+
size="2xl"
|
|
117
|
+
></ds-icon>
|
|
118
|
+
</ds-button>
|
|
119
|
+
</div>
|
|
120
|
+
<slot></slot>
|
|
121
|
+
<div slot="footer" class="footer"><slot name="footer"></slot></div>
|
|
122
|
+
</ds-card>
|
|
123
|
+
</dialog>`;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
__decorate([
|
|
127
|
+
property({ type: Boolean, reflect: true })
|
|
128
|
+
], DsDrawer.prototype, "open", void 0);
|
|
129
|
+
__decorate([
|
|
130
|
+
property()
|
|
131
|
+
], DsDrawer.prototype, "label", void 0);
|
|
132
|
+
__decorate([
|
|
133
|
+
property({ type: Boolean, reflect: true })
|
|
134
|
+
], DsDrawer.prototype, "dismissible", void 0);
|
|
135
|
+
__decorate([
|
|
136
|
+
property({ reflect: true })
|
|
137
|
+
], DsDrawer.prototype, "size", void 0);
|
|
138
|
+
__decorate([
|
|
139
|
+
property({ reflect: true })
|
|
140
|
+
], DsDrawer.prototype, "side", void 0);
|
|
141
|
+
__decorate([
|
|
142
|
+
query('dialog')
|
|
143
|
+
], DsDrawer.prototype, "_dialogEl", void 0);
|
|
144
|
+
//# sourceMappingURL=drawer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/molecules/drawer/drawer.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"drawer.styles.d.ts","sourceRoot":"","sources":["../../../src/molecules/drawer/drawer.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBAkKxB,CAAC"}
|
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const drawerStyles = css `
|
|
3
|
+
/* @property registration so the scroll-driven keyframes can
|
|
4
|
+
interpolate these as colors. */
|
|
5
|
+
@property --ds-drawer-body-top-fade {
|
|
6
|
+
syntax: '<color>';
|
|
7
|
+
inherits: false;
|
|
8
|
+
initial-value: rgb(0 0 0);
|
|
9
|
+
}
|
|
10
|
+
@property --ds-drawer-body-bottom-fade {
|
|
11
|
+
syntax: '<color>';
|
|
12
|
+
inherits: false;
|
|
13
|
+
initial-value: rgb(0 0 0);
|
|
14
|
+
}
|
|
15
|
+
:host {
|
|
16
|
+
display: contents;
|
|
17
|
+
}
|
|
18
|
+
dialog {
|
|
19
|
+
padding: 0;
|
|
20
|
+
border: 0;
|
|
21
|
+
background: transparent;
|
|
22
|
+
color: inherit;
|
|
23
|
+
box-shadow: var(--ds-shadow-lg);
|
|
24
|
+
overflow: visible;
|
|
25
|
+
height: 100vh;
|
|
26
|
+
height: 100dvh;
|
|
27
|
+
max-height: 100%;
|
|
28
|
+
/* allow-discrete lets display/overlay hold their open values for
|
|
29
|
+
the slide-in / slide-out duration. */
|
|
30
|
+
transition:
|
|
31
|
+
transform var(--ds-duration-slow) var(--ds-easing-standard),
|
|
32
|
+
display var(--ds-duration-slow) allow-discrete,
|
|
33
|
+
overlay var(--ds-duration-slow) allow-discrete;
|
|
34
|
+
}
|
|
35
|
+
/* Scope to [open] so closed dialogs stay display:none per UA. */
|
|
36
|
+
dialog[open] {
|
|
37
|
+
display: flex;
|
|
38
|
+
flex-direction: column;
|
|
39
|
+
}
|
|
40
|
+
:host([side='start']) dialog {
|
|
41
|
+
margin: 0;
|
|
42
|
+
margin-inline-end: auto;
|
|
43
|
+
transform: translateX(-100%);
|
|
44
|
+
}
|
|
45
|
+
:host([side='end']) dialog {
|
|
46
|
+
margin: 0;
|
|
47
|
+
margin-inline-start: auto;
|
|
48
|
+
transform: translateX(100%);
|
|
49
|
+
}
|
|
50
|
+
:host([side='start']) dialog[open],
|
|
51
|
+
:host([side='end']) dialog[open] {
|
|
52
|
+
transform: translateX(0);
|
|
53
|
+
}
|
|
54
|
+
@starting-style {
|
|
55
|
+
:host([side='start']) dialog[open] {
|
|
56
|
+
transform: translateX(-100%);
|
|
57
|
+
}
|
|
58
|
+
:host([side='end']) dialog[open] {
|
|
59
|
+
transform: translateX(100%);
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
:host([size='sm']) dialog {
|
|
63
|
+
width: min(20rem, 90vw);
|
|
64
|
+
}
|
|
65
|
+
:host([size='md']) dialog {
|
|
66
|
+
width: min(24rem, 90vw);
|
|
67
|
+
}
|
|
68
|
+
:host([size='lg']) dialog {
|
|
69
|
+
width: min(28rem, 90vw);
|
|
70
|
+
}
|
|
71
|
+
dialog::backdrop {
|
|
72
|
+
background: rgb(15 23 42 / 0.55);
|
|
73
|
+
}
|
|
74
|
+
ds-card {
|
|
75
|
+
flex: 1;
|
|
76
|
+
min-height: 0;
|
|
77
|
+
min-width: 0;
|
|
78
|
+
}
|
|
79
|
+
ds-card::part(card) {
|
|
80
|
+
/* Explicit cap; percentage heights don't resolve reliably through
|
|
81
|
+
ds-card's display:block host. */
|
|
82
|
+
max-height: 100vh;
|
|
83
|
+
max-height: 100dvh;
|
|
84
|
+
box-shadow: none;
|
|
85
|
+
border-color: transparent;
|
|
86
|
+
border-radius: 0;
|
|
87
|
+
gap: var(--ds-space-3);
|
|
88
|
+
padding: var(--ds-drawer-card-padding, var(--ds-space-6));
|
|
89
|
+
}
|
|
90
|
+
ds-card::part(body) {
|
|
91
|
+
flex: 1;
|
|
92
|
+
min-height: 0;
|
|
93
|
+
overflow-x: clip;
|
|
94
|
+
overflow-y: auto;
|
|
95
|
+
overscroll-behavior: contain;
|
|
96
|
+
/* Inline padding + negative margin lets focus rings on full-width
|
|
97
|
+
children paint outside the body's clip box. */
|
|
98
|
+
padding-inline: var(--ds-space-2);
|
|
99
|
+
margin-inline: calc(var(--ds-space-2) * -1);
|
|
100
|
+
scrollbar-width: none;
|
|
101
|
+
mask-image: linear-gradient(
|
|
102
|
+
to bottom,
|
|
103
|
+
var(--ds-drawer-body-top-fade, rgb(0 0 0)) 0,
|
|
104
|
+
rgb(0 0 0) var(--ds-space-6),
|
|
105
|
+
rgb(0 0 0) calc(100% - var(--ds-space-6)),
|
|
106
|
+
var(--ds-drawer-body-bottom-fade, rgb(0 0 0)) 100%
|
|
107
|
+
);
|
|
108
|
+
animation: ds-drawer-body-scroll-fade linear;
|
|
109
|
+
animation-timeline: scroll(self);
|
|
110
|
+
}
|
|
111
|
+
ds-card::part(body)::-webkit-scrollbar {
|
|
112
|
+
display: none;
|
|
113
|
+
}
|
|
114
|
+
@keyframes ds-drawer-body-scroll-fade {
|
|
115
|
+
0% {
|
|
116
|
+
--ds-drawer-body-top-fade: rgb(0 0 0);
|
|
117
|
+
--ds-drawer-body-bottom-fade: rgb(0 0 0 / 0);
|
|
118
|
+
}
|
|
119
|
+
0.001%, 99.999% {
|
|
120
|
+
--ds-drawer-body-top-fade: rgb(0 0 0 / 0);
|
|
121
|
+
--ds-drawer-body-bottom-fade: rgb(0 0 0 / 0);
|
|
122
|
+
}
|
|
123
|
+
100% {
|
|
124
|
+
--ds-drawer-body-top-fade: rgb(0 0 0 / 0);
|
|
125
|
+
--ds-drawer-body-bottom-fade: rgb(0 0 0);
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
.title-row {
|
|
129
|
+
display: flex;
|
|
130
|
+
align-items: center;
|
|
131
|
+
justify-content: space-between;
|
|
132
|
+
gap: var(--ds-space-3);
|
|
133
|
+
background: var(--ds-drawer-title-bg, transparent);
|
|
134
|
+
color: var(--ds-drawer-title-fg, inherit);
|
|
135
|
+
border-bottom: 1px solid var(--ds-drawer-title-border-color, transparent);
|
|
136
|
+
padding: var(--ds-drawer-title-padding, 0);
|
|
137
|
+
}
|
|
138
|
+
.title-text {
|
|
139
|
+
margin: 0;
|
|
140
|
+
flex: 1;
|
|
141
|
+
font-family: var(--ds-font-display);
|
|
142
|
+
font-size: var(--ds-font-size-xl);
|
|
143
|
+
font-weight: var(--ds-font-weight-semibold);
|
|
144
|
+
letter-spacing: var(--ds-letter-spacing-display);
|
|
145
|
+
}
|
|
146
|
+
.title-text ::slotted(*) {
|
|
147
|
+
font: inherit;
|
|
148
|
+
margin: 0;
|
|
149
|
+
letter-spacing: inherit;
|
|
150
|
+
}
|
|
151
|
+
.close-btn {
|
|
152
|
+
margin-block-start: calc(var(--ds-space-3) * -1);
|
|
153
|
+
margin-inline-end: calc(var(--ds-space-3) * -1);
|
|
154
|
+
}
|
|
155
|
+
.close-btn::part(button) {
|
|
156
|
+
color: var(--ds-drawer-title-fg, inherit);
|
|
157
|
+
}
|
|
158
|
+
.footer {
|
|
159
|
+
display: flex;
|
|
160
|
+
flex-wrap: wrap;
|
|
161
|
+
justify-content: flex-end;
|
|
162
|
+
gap: var(--ds-space-2);
|
|
163
|
+
}
|
|
164
|
+
`;
|
|
165
|
+
//# sourceMappingURL=drawer.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"drawer.styles.js","sourceRoot":"","sources":["../../../src/molecules/drawer/drawer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkK9B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecules/drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/molecules/drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAoC,MAAM,aAAa,CAAC"}
|
|
@@ -3,21 +3,21 @@ import { DsElement } from '@jsekulowicz/ds-core';
|
|
|
3
3
|
import '../../atoms/button/define.js';
|
|
4
4
|
import '../../atoms/icon/define.js';
|
|
5
5
|
import '../../atoms/icon/icons/bars-3.js';
|
|
6
|
-
import '../../
|
|
6
|
+
import '../../molecules/drawer/define.js';
|
|
7
7
|
import '../../organisms/top-bar/define.js';
|
|
8
8
|
/**
|
|
9
9
|
* @tag ds-page-shell
|
|
10
10
|
* @summary Application frame: header + aside + main + optional footer with responsive collapse.
|
|
11
11
|
* @slot brand - Top-left brand/logo.
|
|
12
|
-
* @slot drawer-brand - Brand/logo shown
|
|
12
|
+
* @slot drawer-brand - Brand/logo shown in the mobile navigation drawer's title row. Falls back to the `brand` prop.
|
|
13
13
|
* @slot header-actions - Top-right actions.
|
|
14
|
-
* @slot aside - Primary side navigation (inline-start). When empty, the column and hamburger toggle are not rendered.
|
|
14
|
+
* @slot aside - Primary side navigation (inline-start). On mobile, rendered inside a `ds-drawer` opened by the hamburger toggle. When empty, the column and hamburger toggle are not rendered.
|
|
15
15
|
* @slot aside-end - Secondary side region (inline-end), e.g. table of contents, contextual help. Hidden on mobile.
|
|
16
16
|
* @slot default - Main content.
|
|
17
17
|
* @slot footer - Footer content.
|
|
18
18
|
* @cssprop --ds-page-shell-max-width - Outer cap for the shell's content column. Header inner
|
|
19
|
-
* content and the aside + main row centre at this width and align vertically. Defaults to `
|
|
20
|
-
*
|
|
19
|
+
* content and the aside + main row centre at this width and align vertically. Defaults to `none`.
|
|
20
|
+
* Header chrome remains full-bleed.
|
|
21
21
|
*/
|
|
22
22
|
export declare class DsPageShell extends DsElement {
|
|
23
23
|
#private;
|
|
@@ -25,6 +25,7 @@ export declare class DsPageShell extends DsElement {
|
|
|
25
25
|
brand: string;
|
|
26
26
|
menuLabel: string;
|
|
27
27
|
endLabel: string;
|
|
28
|
+
private _mobileLayout;
|
|
28
29
|
private _mobileNavOpen;
|
|
29
30
|
private _hasAside;
|
|
30
31
|
private _hasAsideEnd;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page-shell.d.ts","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,kCAAkC,CAAC;AAC1C,OAAO,mCAAmC,CAAC;AAE3C;;;;;;;;;;;;;GAaG;AACH,qBAAa,WAAY,SAAQ,SAAS;;IACxC,OAAgB,MAAM,4BAA0C;IAEpD,KAAK,SAAM;IACgB,SAAS,SAAqB;IAC/B,QAAQ,SAA0B;IAC/D,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,UAAU,CAAS;IAI3B,iBAAiB,IAAI,IAAI;
|
|
1
|
+
{"version":3,"file":"page-shell.d.ts","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,kCAAkC,CAAC;AAC1C,OAAO,mCAAmC,CAAC;AAE3C;;;;;;;;;;;;;GAaG;AACH,qBAAa,WAAY,SAAQ,SAAS;;IACxC,OAAgB,MAAM,4BAA0C;IAEpD,KAAK,SAAM;IACgB,SAAS,SAAqB;IAC/B,QAAQ,SAA0B;IAC/D,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,UAAU,CAAS;IAI3B,iBAAiB,IAAI,IAAI;IAsBzB,oBAAoB,IAAI,IAAI;IAQ5B,YAAY,IAAI,IAAI;IA4EpB,MAAM,IAAI,cAAc;CAuElC"}
|
|
@@ -11,21 +11,21 @@ import { pageShellStyles } from './page-shell.styles.js';
|
|
|
11
11
|
import '../../atoms/button/define.js';
|
|
12
12
|
import '../../atoms/icon/define.js';
|
|
13
13
|
import '../../atoms/icon/icons/bars-3.js';
|
|
14
|
-
import '../../
|
|
14
|
+
import '../../molecules/drawer/define.js';
|
|
15
15
|
import '../../organisms/top-bar/define.js';
|
|
16
16
|
/**
|
|
17
17
|
* @tag ds-page-shell
|
|
18
18
|
* @summary Application frame: header + aside + main + optional footer with responsive collapse.
|
|
19
19
|
* @slot brand - Top-left brand/logo.
|
|
20
|
-
* @slot drawer-brand - Brand/logo shown
|
|
20
|
+
* @slot drawer-brand - Brand/logo shown in the mobile navigation drawer's title row. Falls back to the `brand` prop.
|
|
21
21
|
* @slot header-actions - Top-right actions.
|
|
22
|
-
* @slot aside - Primary side navigation (inline-start). When empty, the column and hamburger toggle are not rendered.
|
|
22
|
+
* @slot aside - Primary side navigation (inline-start). On mobile, rendered inside a `ds-drawer` opened by the hamburger toggle. When empty, the column and hamburger toggle are not rendered.
|
|
23
23
|
* @slot aside-end - Secondary side region (inline-end), e.g. table of contents, contextual help. Hidden on mobile.
|
|
24
24
|
* @slot default - Main content.
|
|
25
25
|
* @slot footer - Footer content.
|
|
26
26
|
* @cssprop --ds-page-shell-max-width - Outer cap for the shell's content column. Header inner
|
|
27
|
-
* content and the aside + main row centre at this width and align vertically. Defaults to `
|
|
28
|
-
*
|
|
27
|
+
* content and the aside + main row centre at this width and align vertically. Defaults to `none`.
|
|
28
|
+
* Header chrome remains full-bleed.
|
|
29
29
|
*/
|
|
30
30
|
export class DsPageShell extends DsElement {
|
|
31
31
|
constructor() {
|
|
@@ -33,6 +33,7 @@ export class DsPageShell extends DsElement {
|
|
|
33
33
|
this.brand = '';
|
|
34
34
|
this.menuLabel = 'Navigation menu';
|
|
35
35
|
this.endLabel = 'Secondary navigation';
|
|
36
|
+
this._mobileLayout = false;
|
|
36
37
|
this._mobileNavOpen = false;
|
|
37
38
|
this._hasAside = false;
|
|
38
39
|
this._hasAsideEnd = false;
|
|
@@ -51,14 +52,9 @@ export class DsPageShell extends DsElement {
|
|
|
51
52
|
this.toggleAttribute('footer-empty', !this._hasFooter);
|
|
52
53
|
};
|
|
53
54
|
this.#syncLayout = (width) => {
|
|
54
|
-
|
|
55
|
-
this.toggleAttribute('mobile-layout',
|
|
56
|
-
if (!
|
|
57
|
-
this.#setMobileNav(false);
|
|
58
|
-
}
|
|
59
|
-
};
|
|
60
|
-
this.#onDocumentKeydown = (event) => {
|
|
61
|
-
if (event.key === 'Escape' && this._mobileNavOpen) {
|
|
55
|
+
this._mobileLayout = width < 768;
|
|
56
|
+
this.toggleAttribute('mobile-layout', this._mobileLayout);
|
|
57
|
+
if (!this._mobileLayout && this._mobileNavOpen) {
|
|
62
58
|
this.#setMobileNav(false);
|
|
63
59
|
}
|
|
64
60
|
};
|
|
@@ -76,7 +72,7 @@ export class DsPageShell extends DsElement {
|
|
|
76
72
|
this.#setMobileNav(false);
|
|
77
73
|
};
|
|
78
74
|
this.#onAsideClick = (event) => {
|
|
79
|
-
if (!this.
|
|
75
|
+
if (!this._mobileLayout) {
|
|
80
76
|
return;
|
|
81
77
|
}
|
|
82
78
|
const clickedNavItem = event
|
|
@@ -119,7 +115,6 @@ export class DsPageShell extends DsElement {
|
|
|
119
115
|
subtree: true,
|
|
120
116
|
});
|
|
121
117
|
this.#setMobileNav(false);
|
|
122
|
-
document.addEventListener('keydown', this.#onDocumentKeydown);
|
|
123
118
|
this.#resizeObserver = new ResizeObserver((entries) => {
|
|
124
119
|
const entry = entries[0];
|
|
125
120
|
if (!entry) {
|
|
@@ -132,7 +127,6 @@ export class DsPageShell extends DsElement {
|
|
|
132
127
|
}
|
|
133
128
|
disconnectedCallback() {
|
|
134
129
|
super.disconnectedCallback();
|
|
135
|
-
document.removeEventListener('keydown', this.#onDocumentKeydown);
|
|
136
130
|
this.#resizeObserver?.disconnect();
|
|
137
131
|
this.#slotObserver?.disconnect();
|
|
138
132
|
this.#resizeObserver = null;
|
|
@@ -143,7 +137,6 @@ export class DsPageShell extends DsElement {
|
|
|
143
137
|
}
|
|
144
138
|
#syncSlotPresence;
|
|
145
139
|
#syncLayout;
|
|
146
|
-
#onDocumentKeydown;
|
|
147
140
|
#setMobileNav;
|
|
148
141
|
#toggleMobileNav;
|
|
149
142
|
#closeMobileNav;
|
|
@@ -175,37 +168,8 @@ export class DsPageShell extends DsElement {
|
|
|
175
168
|
: null}
|
|
176
169
|
</ds-top-bar>
|
|
177
170
|
</header>
|
|
178
|
-
<button
|
|
179
|
-
class="mobile-backdrop"
|
|
180
|
-
type="button"
|
|
181
|
-
aria-label="Close navigation"
|
|
182
|
-
?hidden=${!this._mobileNavOpen}
|
|
183
|
-
@click=${this.#closeMobileNav}
|
|
184
|
-
></button>
|
|
185
171
|
<div class="shell-body" part="body">
|
|
186
|
-
|
|
187
|
-
id="mobile-aside"
|
|
188
|
-
part="aside"
|
|
189
|
-
aria-label=${this.menuLabel}
|
|
190
|
-
@click=${this.#onAsideClick}
|
|
191
|
-
>
|
|
192
|
-
<div class="drawer-header">
|
|
193
|
-
<div class="drawer-brand">
|
|
194
|
-
<slot name="drawer-brand">${this.brand}</slot>
|
|
195
|
-
</div>
|
|
196
|
-
<ds-button
|
|
197
|
-
class="drawer-close"
|
|
198
|
-
variant="ghost"
|
|
199
|
-
size="sm"
|
|
200
|
-
label="Close navigation"
|
|
201
|
-
aria-label="Close navigation"
|
|
202
|
-
@click=${this.#closeMobileNav}
|
|
203
|
-
>
|
|
204
|
-
<ds-icon slot="leading" name="x-mark" size="xl"></ds-icon>
|
|
205
|
-
</ds-button>
|
|
206
|
-
</div>
|
|
207
|
-
<slot name="aside" @slotchange=${this.#onAsideSlotChange}></slot>
|
|
208
|
-
</aside>
|
|
172
|
+
${this._mobileLayout ? this.#renderMobileAside() : this.#renderDesktopAside()}
|
|
209
173
|
<main part="main">
|
|
210
174
|
<slot></slot>
|
|
211
175
|
</main>
|
|
@@ -223,6 +187,32 @@ export class DsPageShell extends DsElement {
|
|
|
223
187
|
</footer>`
|
|
224
188
|
: null}`;
|
|
225
189
|
}
|
|
190
|
+
#renderDesktopAside() {
|
|
191
|
+
return html `<aside
|
|
192
|
+
id="mobile-aside"
|
|
193
|
+
part="aside"
|
|
194
|
+
aria-label=${this.menuLabel}
|
|
195
|
+
@click=${this.#onAsideClick}
|
|
196
|
+
>
|
|
197
|
+
<slot name="aside" @slotchange=${this.#onAsideSlotChange}></slot>
|
|
198
|
+
</aside>`;
|
|
199
|
+
}
|
|
200
|
+
#renderMobileAside() {
|
|
201
|
+
return html `<ds-drawer
|
|
202
|
+
id="mobile-aside"
|
|
203
|
+
part="aside"
|
|
204
|
+
side="start"
|
|
205
|
+
size="sm"
|
|
206
|
+
?open=${this._mobileNavOpen}
|
|
207
|
+
label=${this.menuLabel}
|
|
208
|
+
@ds-close=${this.#closeMobileNav}
|
|
209
|
+
@ds-cancel=${this.#closeMobileNav}
|
|
210
|
+
@click=${this.#onAsideClick}
|
|
211
|
+
>
|
|
212
|
+
<slot name="drawer-brand" slot="title">${this.brand}</slot>
|
|
213
|
+
<slot name="aside" @slotchange=${this.#onAsideSlotChange}></slot>
|
|
214
|
+
</ds-drawer>`;
|
|
215
|
+
}
|
|
226
216
|
}
|
|
227
217
|
__decorate([
|
|
228
218
|
property()
|
|
@@ -233,6 +223,9 @@ __decorate([
|
|
|
233
223
|
__decorate([
|
|
234
224
|
property({ attribute: 'end-label' })
|
|
235
225
|
], DsPageShell.prototype, "endLabel", void 0);
|
|
226
|
+
__decorate([
|
|
227
|
+
state()
|
|
228
|
+
], DsPageShell.prototype, "_mobileLayout", void 0);
|
|
236
229
|
__decorate([
|
|
237
230
|
state()
|
|
238
231
|
], DsPageShell.prototype, "_mobileNavOpen", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page-shell.js","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,kCAAkC,CAAC;AAC1C,OAAO,mCAAmC,CAAC;AAE3C;;;;;;;;;;;;;GAaG;AACH,MAAM,OAAO,WAAY,SAAQ,SAAS;IAA1C;;QAGc,UAAK,GAAG,EAAE,CAAC;QACgB,cAAS,GAAG,iBAAiB,CAAC;QAC/B,aAAQ,GAAG,sBAAsB,CAAC;QACvD,mBAAc,GAAG,KAAK,CAAC;QACvB,cAAS,GAAG,KAAK,CAAC;QAClB,iBAAY,GAAG,KAAK,CAAC;QACrB,eAAU,GAAG,KAAK,CAAC;QACpC,oBAAe,GAA0B,IAAI,CAAC;QAC9C,kBAAa,GAA4B,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"page-shell.js","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page-shell.styles.d.ts","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,eAAe,
|
|
1
|
+
{"version":3,"file":"page-shell.styles.d.ts","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,eAAe,yBAoJ3B,CAAC"}
|