@jsekulowicz/ds-components 0.9.13 → 0.10.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 +72 -2
- 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 +164 -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 +10 -3
|
@@ -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,yBAiKxB,CAAC"}
|
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const drawerStyles = css `
|
|
3
|
+
/* Interpolatable colors so the scroll-driven keyframes can crossfade
|
|
4
|
+
the gradient stops instead of jumping between values. */
|
|
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
|
+
/* Slide in on open, slide out on close. allow-discrete lets the
|
|
29
|
+
display/overlay properties (which can't normally transition)
|
|
30
|
+
hold their open values for the duration. */
|
|
31
|
+
transition:
|
|
32
|
+
transform var(--ds-duration-slow) var(--ds-easing-standard),
|
|
33
|
+
display var(--ds-duration-slow) allow-discrete,
|
|
34
|
+
overlay var(--ds-duration-slow) allow-discrete;
|
|
35
|
+
}
|
|
36
|
+
/* Scope flex-column to the open state so the UA's display:none
|
|
37
|
+
keeps the closed dialog out of layout. Same fix and rationale as
|
|
38
|
+
ds-dialog — the flex column is needed for the body's height cap to
|
|
39
|
+
propagate, but unscoped it makes the closed drawer render inline
|
|
40
|
+
alongside its opener. */
|
|
41
|
+
dialog[open] {
|
|
42
|
+
display: flex;
|
|
43
|
+
flex-direction: column;
|
|
44
|
+
}
|
|
45
|
+
:host([side='start']) dialog {
|
|
46
|
+
margin: 0;
|
|
47
|
+
margin-inline-end: auto;
|
|
48
|
+
transform: translateX(-100%);
|
|
49
|
+
}
|
|
50
|
+
:host([side='end']) dialog {
|
|
51
|
+
margin: 0;
|
|
52
|
+
margin-inline-start: auto;
|
|
53
|
+
transform: translateX(100%);
|
|
54
|
+
}
|
|
55
|
+
:host([side='start']) dialog[open],
|
|
56
|
+
:host([side='end']) dialog[open] {
|
|
57
|
+
transform: translateX(0);
|
|
58
|
+
}
|
|
59
|
+
@starting-style {
|
|
60
|
+
:host([side='start']) dialog[open] {
|
|
61
|
+
transform: translateX(-100%);
|
|
62
|
+
}
|
|
63
|
+
:host([side='end']) dialog[open] {
|
|
64
|
+
transform: translateX(100%);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
:host([size='sm']) dialog {
|
|
68
|
+
width: min(20rem, 90vw);
|
|
69
|
+
}
|
|
70
|
+
:host([size='md']) dialog {
|
|
71
|
+
width: min(24rem, 90vw);
|
|
72
|
+
}
|
|
73
|
+
:host([size='lg']) dialog {
|
|
74
|
+
width: min(28rem, 90vw);
|
|
75
|
+
}
|
|
76
|
+
dialog::backdrop {
|
|
77
|
+
background: rgb(15 23 42 / 0.55);
|
|
78
|
+
}
|
|
79
|
+
ds-card {
|
|
80
|
+
flex: 1;
|
|
81
|
+
min-height: 0;
|
|
82
|
+
min-width: 0;
|
|
83
|
+
}
|
|
84
|
+
ds-card::part(card) {
|
|
85
|
+
height: 100%;
|
|
86
|
+
max-height: 100%;
|
|
87
|
+
box-shadow: none;
|
|
88
|
+
border-color: transparent;
|
|
89
|
+
border-radius: 0;
|
|
90
|
+
gap: var(--ds-space-3);
|
|
91
|
+
}
|
|
92
|
+
ds-card::part(body) {
|
|
93
|
+
flex: 1;
|
|
94
|
+
min-height: 0;
|
|
95
|
+
overflow-x: clip;
|
|
96
|
+
overflow-y: auto;
|
|
97
|
+
/* Don't chain scroll up to the page when the body reaches its
|
|
98
|
+
top/bottom boundary or has no overflow. Same rationale as
|
|
99
|
+
ds-dialog — modal surfaces shouldn't let scroll leak through. */
|
|
100
|
+
overscroll-behavior: contain;
|
|
101
|
+
padding-inline: var(--ds-space-2);
|
|
102
|
+
margin-inline: calc(var(--ds-space-2) * -1);
|
|
103
|
+
/* Same scroll-driven fade trick as ds-dialog — see comments
|
|
104
|
+
there. No padding-block buffer; the fades only kick in once
|
|
105
|
+
there's actual scroll progress to drive them. */
|
|
106
|
+
scrollbar-width: none;
|
|
107
|
+
mask-image: linear-gradient(
|
|
108
|
+
to bottom,
|
|
109
|
+
var(--ds-drawer-body-top-fade, rgb(0 0 0)) 0,
|
|
110
|
+
rgb(0 0 0) var(--ds-space-6),
|
|
111
|
+
rgb(0 0 0) calc(100% - var(--ds-space-6)),
|
|
112
|
+
var(--ds-drawer-body-bottom-fade, rgb(0 0 0)) 100%
|
|
113
|
+
);
|
|
114
|
+
animation: ds-drawer-body-scroll-fade linear;
|
|
115
|
+
animation-timeline: scroll(self);
|
|
116
|
+
}
|
|
117
|
+
ds-card::part(body)::-webkit-scrollbar {
|
|
118
|
+
display: none;
|
|
119
|
+
}
|
|
120
|
+
@keyframes ds-drawer-body-scroll-fade {
|
|
121
|
+
0% {
|
|
122
|
+
--ds-drawer-body-top-fade: rgb(0 0 0);
|
|
123
|
+
--ds-drawer-body-bottom-fade: rgb(0 0 0 / 0);
|
|
124
|
+
}
|
|
125
|
+
0.001%, 99.999% {
|
|
126
|
+
--ds-drawer-body-top-fade: rgb(0 0 0 / 0);
|
|
127
|
+
--ds-drawer-body-bottom-fade: rgb(0 0 0 / 0);
|
|
128
|
+
}
|
|
129
|
+
100% {
|
|
130
|
+
--ds-drawer-body-top-fade: rgb(0 0 0 / 0);
|
|
131
|
+
--ds-drawer-body-bottom-fade: rgb(0 0 0);
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
.title-row {
|
|
135
|
+
display: flex;
|
|
136
|
+
align-items: flex-start;
|
|
137
|
+
justify-content: space-between;
|
|
138
|
+
gap: var(--ds-space-3);
|
|
139
|
+
}
|
|
140
|
+
.title-text {
|
|
141
|
+
margin: 0;
|
|
142
|
+
flex: 1;
|
|
143
|
+
font-family: var(--ds-font-display);
|
|
144
|
+
font-size: var(--ds-font-size-xl);
|
|
145
|
+
font-weight: var(--ds-font-weight-semibold);
|
|
146
|
+
letter-spacing: var(--ds-letter-spacing-display);
|
|
147
|
+
}
|
|
148
|
+
.title-text ::slotted(*) {
|
|
149
|
+
font: inherit;
|
|
150
|
+
margin: 0;
|
|
151
|
+
letter-spacing: inherit;
|
|
152
|
+
}
|
|
153
|
+
.close-btn {
|
|
154
|
+
margin-block-start: calc(var(--ds-space-3) * -1);
|
|
155
|
+
margin-inline-end: calc(var(--ds-space-3) * -1);
|
|
156
|
+
}
|
|
157
|
+
.footer {
|
|
158
|
+
display: flex;
|
|
159
|
+
flex-wrap: wrap;
|
|
160
|
+
justify-content: flex-end;
|
|
161
|
+
gap: var(--ds-space-2);
|
|
162
|
+
}
|
|
163
|
+
`;
|
|
164
|
+
//# 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiK9B,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":";;;;;;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,kBAAa,GAAG,KAAK,CAAC;QACtB,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;QAoC9C,sBAAiB,GAAG,GAAS,EAAE;YAC7B,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAkB,oBAAoB,CAAC,CAAC;YACpF,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAkB,wBAAwB,CAAC,CAAC;YAC3F,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAkB,qBAAqB,CAAC,CAAC;YACtF,IAAI,CAAC,SAAS,GAAG,mBAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;YAC3D,IAAI,CAAC,YAAY,GAAG,mBAAmB,CAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC;YACrE,IAAI,CAAC,UAAU,GAAG,mBAAmB,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;YAC9D,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YACrD,IAAI,CAAC,eAAe,CAAC,iBAAiB,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YAC5D,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACzD,CAAC,CAAC;QAEF,gBAAW,GAAG,CAAC,KAAa,EAAQ,EAAE;YACpC,IAAI,CAAC,aAAa,GAAG,KAAK,GAAG,GAAG,CAAC;YACjC,IAAI,CAAC,eAAe,CAAC,eAAe,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;YAC1D,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;gBAC/C,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC5B,CAAC;QACH,CAAC,CAAC;QAEF,kBAAa,GAAG,CAAC,IAAa,EAAQ,EAAE;YACtC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YAC3B,IAAI,CAAC,eAAe,CAAC,sBAAsB,EAAE,IAAI,CAAC,CAAC;YACnD,IAAI,IAAI,EAAE,CAAC;gBACT,IAAI,CAAC,aAAa,CAAc,gBAAgB,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;YAClF,CAAC;QACH,CAAC,CAAC;QAEF,qBAAgB,GAAG,GAAS,EAAE;YAC5B,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAC3C,CAAC,CAAC;QAEF,oBAAe,GAAG,GAAS,EAAE;YAC3B,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC5B,CAAC,CAAC;QAEF,kBAAa,GAAG,CAAC,KAAY,EAAQ,EAAE;YACrC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;gBACxB,OAAO;YACT,CAAC;YACD,MAAM,cAAc,GAAG,KAAK;iBACzB,YAAY,EAAE;iBACd,IAAI,CACH,CAAC,IAAI,EAAE,EAAE,CACP,IAAI,YAAY,WAAW;gBAC3B,CAAC,IAAI,CAAC,OAAO,KAAK,aAAa;oBAC7B,IAAI,CAAC,OAAO,KAAK,GAAG;oBACpB,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,CACxC,CAAC;YACJ,IAAI,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,CAAC;QACH,CAAC,CAAC;QAEF,uBAAkB,GAAG,CAAC,KAAY,EAAQ,EAAE;YAC1C,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;YAC7C,IAAI,CAAC,SAAS,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAC;YAC1C,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACvD,CAAC,CAAC;QAEF,0BAAqB,GAAG,CAAC,KAAY,EAAQ,EAAE;YAC7C,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;YAC7C,IAAI,CAAC,YAAY,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAC;YAC7C,IAAI,CAAC,eAAe,CAAC,iBAAiB,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC9D,CAAC,CAAC;QAEF,wBAAmB,GAAG,CAAC,KAAY,EAAQ,EAAE;YAC3C,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;YAC7C,IAAI,CAAC,UAAU,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAC;YAC3C,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACzD,CAAC,CAAC;IAyEJ,CAAC;aA9LiB,WAAM,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,eAAe,CAAC,AAAzC,CAA0C;IAUhE,eAAe,CAA+B;IAC9C,aAAa,CAAiC;IAErC,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,aAAa,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAClE,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,IAAI,EAAE;YAC/B,eAAe,EAAE,CAAC,MAAM,CAAC;YACzB,UAAU,EAAE,IAAI;YAChB,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1B,IAAI,CAAC,eAAe,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;YACpD,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;YACzB,IAAI,CAAC,KAAK,EAAE,CAAC;gBACX,OAAO;YACT,CAAC;YACD,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAC5C,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QACnC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC,CAAC;IACvD,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,eAAe,EAAE,UAAU,EAAE,CAAC;QACnC,IAAI,CAAC,aAAa,EAAE,UAAU,EAAE,CAAC;QACjC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;QAC5B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;IAC5B,CAAC;IAEQ,YAAY;QACnB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAED,iBAAiB,CAUf;IAEF,WAAW,CAMT;IAEF,aAAa,CAMX;IAEF,gBAAgB,CAEd;IAEF,eAAe,CAEb;IAEF,aAAa,CAgBX;IAEF,kBAAkB,CAIhB;IAEF,qBAAqB,CAInB;IAEF,mBAAmB,CAIjB;IAEO,MAAM;QACb,MAAM,YAAY,GAAqB,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QAC9E,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,IAAI,mBAAmB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;QACzE,OAAO,IAAI,CAAA;2CAC4B,IAAI,CAAC,SAAS;4CACb,IAAI,CAAC,KAAK;;YAE1C,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA;;;;;wBAKM,IAAI,CAAC,SAAS;6BACT,IAAI,CAAC,SAAS;gCACX,YAAY;;yBAEnB,IAAI,CAAC,gBAAgB;;;2BAGnB;YACf,CAAC,CAAC,IAAI;;;;UAIR,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,mBAAmB,EAAE;;;;;;uBAM9D,IAAI,CAAC,QAAQ;oBAChB,CAAC,IAAI,CAAC,YAAY;;+CAES,IAAI,CAAC,qBAAqB;;;QAGjE,SAAS;YACT,CAAC,CAAC,IAAI,CAAA;8CACgC,IAAI,CAAC,mBAAmB;oBAClD;YACZ,CAAC,CAAC,IAAI,EAAE,CAAC;IACf,CAAC;IAED,mBAAmB;QACjB,OAAO,IAAI,CAAA;;;mBAGI,IAAI,CAAC,SAAS;eAClB,IAAI,CAAC,aAAa;;uCAEM,IAAI,CAAC,kBAAkB;aACjD,CAAC;IACZ,CAAC;IAED,kBAAkB;QAChB,OAAO,IAAI,CAAA;;;;;cAKD,IAAI,CAAC,cAAc;cACnB,IAAI,CAAC,SAAS;kBACV,IAAI,CAAC,eAAe;mBACnB,IAAI,CAAC,eAAe;eACxB,IAAI,CAAC,aAAa;;+CAEc,IAAI,CAAC,KAAK;uCAClB,IAAI,CAAC,kBAAkB;iBAC7C,CAAC;IAChB,CAAC;;AA3LW;IAAX,QAAQ,EAAE;0CAAY;AACgB;IAAtC,QAAQ,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;8CAA+B;AAC/B;IAArC,QAAQ,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;6CAAmC;AACvD;IAAhB,KAAK,EAAE;kDAA+B;AACtB;IAAhB,KAAK,EAAE;mDAAgC;AACvB;IAAhB,KAAK,EAAE;8CAA2B;AAClB;IAAhB,KAAK,EAAE;iDAA8B;AACrB;IAAhB,KAAK,EAAE;+CAA4B;AAuLtC,SAAS,mBAAmB,CAC1B,IAAiB,EACjB,IAAY,EACZ,IAA6B;IAE7B,IAAI,IAAI,EAAE,CAAC;QACT,OAAO,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC;IACD,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC;AACxE,CAAC;AAED,SAAS,kBAAkB,CAAC,IAAqB;IAC/C,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IACpD,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE;QACzB,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;YACxC,OAAO,IAAI,CAAC;QACd,CAAC;QACD,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,EAAE,CAAC;YACrC,OAAO,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;QACpD,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC,CAAC,CAAC;AACL,CAAC"}
|
|
@@ -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"}
|