@vaadin/vaadin-app-layout 22.0.0-alpha5 → 22.0.0-alpha9
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/package.json +23 -31
- package/src/vaadin-app-layout.d.ts +9 -165
- package/src/vaadin-app-layout.js +4 -622
- package/src/vaadin-drawer-toggle.d.ts +13 -17
- package/src/vaadin-drawer-toggle.js +4 -81
- package/theme/lumo/vaadin-app-layout.js +1 -2
- package/theme/lumo/vaadin-drawer-toggle.js +1 -2
- package/theme/material/vaadin-app-layout.js +1 -2
- package/theme/material/vaadin-drawer-toggle.js +1 -2
- package/src/detect-ios-navbar.js +0 -17
- package/src/safe-area-inset.js +0 -24
- package/theme/lumo/vaadin-app-layout-styles.js +0 -72
- package/theme/lumo/vaadin-drawer-toggle-styles.js +0 -32
- package/theme/material/vaadin-app-layout-styles.js +0 -60
- package/theme/material/vaadin-drawer-toggle-styles.js +0 -51
package/package.json
CHANGED
|
@@ -1,10 +1,29 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/vaadin-app-layout",
|
|
3
|
-
"version": "22.0.0-
|
|
3
|
+
"version": "22.0.0-alpha9",
|
|
4
|
+
"publishConfig": {
|
|
5
|
+
"access": "public"
|
|
6
|
+
},
|
|
4
7
|
"description": "vaadin-app-layout",
|
|
8
|
+
"license": "Apache-2.0",
|
|
9
|
+
"repository": {
|
|
10
|
+
"type": "git",
|
|
11
|
+
"url": "https://github.com/vaadin/web-components.git",
|
|
12
|
+
"directory": "packages/vaadin-app-layout"
|
|
13
|
+
},
|
|
14
|
+
"author": "Vaadin Ltd",
|
|
15
|
+
"homepage": "https://vaadin.com/components",
|
|
16
|
+
"bugs": {
|
|
17
|
+
"url": "https://github.com/vaadin/vaadin-app-layout/issues"
|
|
18
|
+
},
|
|
5
19
|
"main": "vaadin-app-layout.js",
|
|
6
20
|
"module": "vaadin-app-layout.js",
|
|
7
|
-
"
|
|
21
|
+
"files": [
|
|
22
|
+
"src",
|
|
23
|
+
"theme",
|
|
24
|
+
"vaadin-*.d.ts",
|
|
25
|
+
"vaadin-*.js"
|
|
26
|
+
],
|
|
8
27
|
"keywords": [
|
|
9
28
|
"Vaadin",
|
|
10
29
|
"vaadin-app-layout",
|
|
@@ -12,35 +31,8 @@
|
|
|
12
31
|
"web-component",
|
|
13
32
|
"polymer"
|
|
14
33
|
],
|
|
15
|
-
"author": "Vaadin Ltd",
|
|
16
|
-
"license": "Apache-2.0",
|
|
17
|
-
"bugs": {
|
|
18
|
-
"url": "https://github.com/vaadin/vaadin-app-layout/issues"
|
|
19
|
-
},
|
|
20
|
-
"homepage": "https://vaadin.com/components",
|
|
21
|
-
"files": [
|
|
22
|
-
"vaadin-*.d.ts",
|
|
23
|
-
"vaadin-*.js",
|
|
24
|
-
"src",
|
|
25
|
-
"theme"
|
|
26
|
-
],
|
|
27
34
|
"dependencies": {
|
|
28
|
-
"@
|
|
29
|
-
"@polymer/polymer": "^3.0.0",
|
|
30
|
-
"@vaadin/button": "^22.0.0-alpha5",
|
|
31
|
-
"@vaadin/vaadin-element-mixin": "^22.0.0-alpha5",
|
|
32
|
-
"@vaadin/vaadin-lumo-styles": "^22.0.0-alpha5",
|
|
33
|
-
"@vaadin/vaadin-material-styles": "^22.0.0-alpha5",
|
|
34
|
-
"@vaadin/vaadin-themable-mixin": "^22.0.0-alpha5"
|
|
35
|
-
},
|
|
36
|
-
"devDependencies": {
|
|
37
|
-
"@esm-bundle/chai": "^4.3.4",
|
|
38
|
-
"@vaadin/testing-helpers": "^0.2.1",
|
|
39
|
-
"@vaadin/vaadin-tabs": "^22.0.0-alpha5",
|
|
40
|
-
"sinon": "^9.2.1"
|
|
41
|
-
},
|
|
42
|
-
"publishConfig": {
|
|
43
|
-
"access": "public"
|
|
35
|
+
"@vaadin/app-layout": "22.0.0-alpha9"
|
|
44
36
|
},
|
|
45
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "6e8c899dc65918f97e3c0acb2076122c4b2ef274"
|
|
46
38
|
}
|
|
@@ -1,174 +1,18 @@
|
|
|
1
|
-
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
2
|
-
|
|
3
|
-
import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* Fired when the `drawerOpened` property changes.
|
|
7
|
-
*/
|
|
8
|
-
export type AppLayoutDrawerOpenedChangedEvent = CustomEvent<{ value: boolean }>;
|
|
9
|
-
|
|
10
1
|
/**
|
|
11
|
-
*
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2021 Vaadin Ltd.
|
|
4
|
+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
12
5
|
*/
|
|
13
|
-
|
|
6
|
+
import { AppLayout } from '@vaadin/app-layout/src/vaadin-app-layout.js';
|
|
14
7
|
|
|
15
8
|
/**
|
|
16
|
-
*
|
|
9
|
+
* @deprecated Import `AppLayout` from `@vaadin/app-layout` instead.
|
|
17
10
|
*/
|
|
18
|
-
export type
|
|
19
|
-
|
|
20
|
-
export interface AppLayoutElementEventMap {
|
|
21
|
-
'drawer-opened-changed': AppLayoutDrawerOpenedChangedEvent;
|
|
22
|
-
|
|
23
|
-
'overlay-changed': AppLayoutOverlayChangedEvent;
|
|
24
|
-
|
|
25
|
-
'primary-section-changed': AppLayoutPrimarySectionChangedEvent;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
export type AppLayoutEventMap = HTMLElementEventMap & AppLayoutElementEventMap;
|
|
11
|
+
export type AppLayoutElement = AppLayout;
|
|
29
12
|
|
|
30
13
|
/**
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
* ```
|
|
34
|
-
* <vaadin-app-layout primary-section="navbar|drawer">
|
|
35
|
-
* <vaadin-drawer-toggle slot="navbar [touch-optimized]"></vaadin-drawer-toggle>
|
|
36
|
-
* <h3 slot="navbar [touch-optimized]">Company Name</h3>
|
|
37
|
-
* <vaadin-tabs orientation="vertical" slot="drawer">
|
|
38
|
-
* <vaadin-tab>Menu item 1</vaadin-tab>
|
|
39
|
-
* </vaadin-tabs>
|
|
40
|
-
* <!-- Everything else will be the page content -->
|
|
41
|
-
* <div>
|
|
42
|
-
* <h3>Page title</h3>
|
|
43
|
-
* <p>Page content</p>
|
|
44
|
-
* </div>
|
|
45
|
-
* </vaadin-app-layout>
|
|
46
|
-
* ```
|
|
47
|
-
*
|
|
48
|
-
* For best results, the component should be added to the root level of your application (i.e., as a direct child of `<body>`).
|
|
49
|
-
*
|
|
50
|
-
* The page should include a viewport meta tag which contains `viewport-fit=cover`, like the following:
|
|
51
|
-
* ```
|
|
52
|
-
* <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
53
|
-
* ```
|
|
54
|
-
* This causes the viewport to be scaled to fill the device display.
|
|
55
|
-
* To ensure that important content is displayed, use the provided css variables.
|
|
56
|
-
* ```
|
|
57
|
-
* --safe-area-inset-top
|
|
58
|
-
* --safe-area-inset-right
|
|
59
|
-
* --safe-area-inset-bottom
|
|
60
|
-
* --safe-area-inset-left
|
|
61
|
-
* ```
|
|
62
|
-
*
|
|
63
|
-
* ### Styling
|
|
64
|
-
*
|
|
65
|
-
* The following Shadow DOM parts of the `<vaadin-app-layout>` are available for styling:
|
|
66
|
-
*
|
|
67
|
-
* Part name | Description
|
|
68
|
-
* --------------|---------------------------------------------------------|
|
|
69
|
-
* `navbar` | Container for the navigation bar
|
|
70
|
-
* `drawer` | Container for the drawer area
|
|
71
|
-
* `content` | Container for page content.
|
|
72
|
-
*
|
|
73
|
-
* See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
|
|
74
|
-
*
|
|
75
|
-
* ### Component's slots
|
|
76
|
-
*
|
|
77
|
-
* The following slots are available to be set
|
|
78
|
-
*
|
|
79
|
-
* Slot name | Description
|
|
80
|
-
* -------------------|---------------------------------------------------|
|
|
81
|
-
* no name | Default container for the page content
|
|
82
|
-
* `navbar ` | Container for the top navbar area
|
|
83
|
-
* `drawer` | Container for an application menu
|
|
84
|
-
* `touch-optimized` | Container for the bottom navbar area (only visible for mobile devices)
|
|
85
|
-
*
|
|
86
|
-
* #### Touch optimized
|
|
87
|
-
*
|
|
88
|
-
* App Layout has a pseudo-slot `touch-optimized` in order to give more control of the presentation of
|
|
89
|
-
* elements with `slot[navbar]`. Internally, when the user is interacting with App Layout from a
|
|
90
|
-
* touchscreen device, the component will search for elements with `slot[navbar touch-optimized]` and move
|
|
91
|
-
* them to the bottom of the page.
|
|
92
|
-
*
|
|
93
|
-
* ### Navigation
|
|
94
|
-
*
|
|
95
|
-
* As the drawer opens as an overlay in small devices, it makes sense to close it once a navigation happens.
|
|
96
|
-
* If you are using Vaadin Router, this will happen automatically unless you change the `closeDrawerOn` event name.
|
|
97
|
-
*
|
|
98
|
-
* In order to do so, there are two options:
|
|
99
|
-
* - If the `vaadin-app-layout` instance is available, then `drawerOpened` can be set to `false`
|
|
100
|
-
* - If not, a custom event `close-overlay-drawer` can be dispatched either by calling
|
|
101
|
-
* `window.dispatchEvent(new CustomEvent('close-overlay-drawer'))` or by calling
|
|
102
|
-
* `AppLayoutElement.dispatchCloseOverlayDrawerEvent()`
|
|
103
|
-
*
|
|
104
|
-
* ### Scrolling areas
|
|
105
|
-
*
|
|
106
|
-
* By default, the component will act with the "body scrolling", so on mobile (iOS Safari and Android Chrome),
|
|
107
|
-
* the toolbars will collapse when a scroll happens.
|
|
108
|
-
*
|
|
109
|
-
* To use the "content scrolling", in case of the content of the page relies on a pre-defined height (for instance,
|
|
110
|
-
* it has a `height:100%`), then the developer can set `height: 100%` to both `html` and `body`.
|
|
111
|
-
* That will make the `[content]` element of app layout scrollable.
|
|
112
|
-
* On this case, the toolbars on mobile device won't collapse.
|
|
113
|
-
*
|
|
114
|
-
* @fires {CustomEvent} drawer-opened-changed - Fired when the `drawerOpened` property changes.
|
|
115
|
-
* @fires {CustomEvent} overlay-changed - Fired when the `overlay` property changes.
|
|
116
|
-
* @fires {CustomEvent} primary-section-changed - Fired when the `primarySection` property changes.
|
|
14
|
+
* @deprecated Import `AppLayout` from `@vaadin/app-layout` instead.
|
|
117
15
|
*/
|
|
118
|
-
|
|
119
|
-
/**
|
|
120
|
-
* Defines whether navbar or drawer will come first visually.
|
|
121
|
-
* - By default (`primary-section="navbar"`), the navbar takes the full available width and moves the drawer down.
|
|
122
|
-
* - If `primary-section="drawer"` is set, then the drawer will move the navbar, taking the full available height.
|
|
123
|
-
* @attr {navbar|drawer} primary-section
|
|
124
|
-
*/
|
|
125
|
-
primarySection: 'navbar' | 'drawer';
|
|
126
|
-
|
|
127
|
-
/**
|
|
128
|
-
* Controls whether the drawer is opened (visible) or not.
|
|
129
|
-
* Its default value depends on the viewport:
|
|
130
|
-
* - `true`, for desktop size views
|
|
131
|
-
* - `false`, for mobile size views
|
|
132
|
-
* @attr {boolean} drawer-opened
|
|
133
|
-
*/
|
|
134
|
-
drawerOpened: boolean;
|
|
135
|
-
|
|
136
|
-
/**
|
|
137
|
-
* Drawer is an overlay on top of the content
|
|
138
|
-
* Controlled via CSS using `--vaadin-app-layout-drawer-overlay: true|false`;
|
|
139
|
-
*/
|
|
140
|
-
readonly overlay: boolean;
|
|
141
|
-
|
|
142
|
-
/**
|
|
143
|
-
* A global event that causes the drawer to close (be hidden) when it is in overlay mode.
|
|
144
|
-
* - The default is `vaadin-router-location-changed` dispatched by Vaadin Router
|
|
145
|
-
*
|
|
146
|
-
* @attr {string} close-drawer-on
|
|
147
|
-
*/
|
|
148
|
-
closeDrawerOn: string;
|
|
149
|
-
|
|
150
|
-
/**
|
|
151
|
-
* Helper static method that dispatches a `close-overlay-drawer` event
|
|
152
|
-
*/
|
|
153
|
-
static dispatchCloseOverlayDrawerEvent(): void;
|
|
154
|
-
|
|
155
|
-
addEventListener<K extends keyof AppLayoutEventMap>(
|
|
156
|
-
type: K,
|
|
157
|
-
listener: (this: AppLayoutElement, ev: AppLayoutEventMap[K]) => void,
|
|
158
|
-
options?: boolean | AddEventListenerOptions
|
|
159
|
-
): void;
|
|
160
|
-
|
|
161
|
-
removeEventListener<K extends keyof AppLayoutEventMap>(
|
|
162
|
-
type: K,
|
|
163
|
-
listener: (this: AppLayoutElement, ev: AppLayoutEventMap[K]) => void,
|
|
164
|
-
options?: boolean | EventListenerOptions
|
|
165
|
-
): void;
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
declare global {
|
|
169
|
-
interface HTMLElementTagNameMap {
|
|
170
|
-
'vaadin-app-layout': AppLayoutElement;
|
|
171
|
-
}
|
|
172
|
-
}
|
|
16
|
+
export const AppLayoutElement: typeof AppLayout;
|
|
173
17
|
|
|
174
|
-
export
|
|
18
|
+
export * from '@vaadin/app-layout/src/vaadin-app-layout.js';
|
package/src/vaadin-app-layout.js
CHANGED
|
@@ -3,629 +3,11 @@
|
|
|
3
3
|
* Copyright (c) 2021 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
import {
|
|
7
|
-
import { beforeNextRender, afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
|
|
8
|
-
import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
|
|
9
|
-
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
10
|
-
import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
|
|
11
|
-
import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
|
|
12
|
-
import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
|
|
13
|
-
import './safe-area-inset.js';
|
|
14
|
-
import './detect-ios-navbar.js';
|
|
6
|
+
import { AppLayout } from '@vaadin/app-layout/src/vaadin-app-layout.js';
|
|
15
7
|
|
|
16
8
|
/**
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
* ```
|
|
20
|
-
* <vaadin-app-layout primary-section="navbar|drawer">
|
|
21
|
-
* <vaadin-drawer-toggle slot="navbar [touch-optimized]"></vaadin-drawer-toggle>
|
|
22
|
-
* <h3 slot="navbar [touch-optimized]">Company Name</h3>
|
|
23
|
-
* <vaadin-tabs orientation="vertical" slot="drawer">
|
|
24
|
-
* <vaadin-tab>Menu item 1</vaadin-tab>
|
|
25
|
-
* </vaadin-tabs>
|
|
26
|
-
* <!-- Everything else will be the page content -->
|
|
27
|
-
* <div>
|
|
28
|
-
* <h3>Page title</h3>
|
|
29
|
-
* <p>Page content</p>
|
|
30
|
-
* </div>
|
|
31
|
-
* </vaadin-app-layout>
|
|
32
|
-
* ```
|
|
33
|
-
*
|
|
34
|
-
* For best results, the component should be added to the root level of your application (i.e., as a direct child of `<body>`).
|
|
35
|
-
*
|
|
36
|
-
* The page should include a viewport meta tag which contains `viewport-fit=cover`, like the following:
|
|
37
|
-
* ```
|
|
38
|
-
* <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
39
|
-
* ```
|
|
40
|
-
* This causes the viewport to be scaled to fill the device display.
|
|
41
|
-
* To ensure that important content is displayed, use the provided css variables.
|
|
42
|
-
* ```
|
|
43
|
-
* --safe-area-inset-top
|
|
44
|
-
* --safe-area-inset-right
|
|
45
|
-
* --safe-area-inset-bottom
|
|
46
|
-
* --safe-area-inset-left
|
|
47
|
-
* ```
|
|
48
|
-
*
|
|
49
|
-
* ### Styling
|
|
50
|
-
*
|
|
51
|
-
* The following Shadow DOM parts of the `<vaadin-app-layout>` are available for styling:
|
|
52
|
-
*
|
|
53
|
-
* Part name | Description
|
|
54
|
-
* --------------|---------------------------------------------------------|
|
|
55
|
-
* `navbar` | Container for the navigation bar
|
|
56
|
-
* `drawer` | Container for the drawer area
|
|
57
|
-
* `content` | Container for page content.
|
|
58
|
-
*
|
|
59
|
-
* See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
|
|
60
|
-
*
|
|
61
|
-
* ### Component's slots
|
|
62
|
-
*
|
|
63
|
-
* The following slots are available to be set
|
|
64
|
-
*
|
|
65
|
-
* Slot name | Description
|
|
66
|
-
* -------------------|---------------------------------------------------|
|
|
67
|
-
* no name | Default container for the page content
|
|
68
|
-
* `navbar ` | Container for the top navbar area
|
|
69
|
-
* `drawer` | Container for an application menu
|
|
70
|
-
* `touch-optimized` | Container for the bottom navbar area (only visible for mobile devices)
|
|
71
|
-
*
|
|
72
|
-
* #### Touch optimized
|
|
73
|
-
*
|
|
74
|
-
* App Layout has a pseudo-slot `touch-optimized` in order to give more control of the presentation of
|
|
75
|
-
* elements with `slot[navbar]`. Internally, when the user is interacting with App Layout from a
|
|
76
|
-
* touchscreen device, the component will search for elements with `slot[navbar touch-optimized]` and move
|
|
77
|
-
* them to the bottom of the page.
|
|
78
|
-
*
|
|
79
|
-
* ### Navigation
|
|
80
|
-
*
|
|
81
|
-
* As the drawer opens as an overlay in small devices, it makes sense to close it once a navigation happens.
|
|
82
|
-
* If you are using Vaadin Router, this will happen automatically unless you change the `closeDrawerOn` event name.
|
|
83
|
-
*
|
|
84
|
-
* In order to do so, there are two options:
|
|
85
|
-
* - If the `vaadin-app-layout` instance is available, then `drawerOpened` can be set to `false`
|
|
86
|
-
* - If not, a custom event `close-overlay-drawer` can be dispatched either by calling
|
|
87
|
-
* `window.dispatchEvent(new CustomEvent('close-overlay-drawer'))` or by calling
|
|
88
|
-
* `AppLayoutElement.dispatchCloseOverlayDrawerEvent()`
|
|
89
|
-
*
|
|
90
|
-
* ### Scrolling areas
|
|
91
|
-
*
|
|
92
|
-
* By default, the component will act with the "body scrolling", so on mobile (iOS Safari and Android Chrome),
|
|
93
|
-
* the toolbars will collapse when a scroll happens.
|
|
94
|
-
*
|
|
95
|
-
* To use the "content scrolling", in case of the content of the page relies on a pre-defined height (for instance,
|
|
96
|
-
* it has a `height:100%`), then the developer can set `height: 100%` to both `html` and `body`.
|
|
97
|
-
* That will make the `[content]` element of app layout scrollable.
|
|
98
|
-
* On this case, the toolbars on mobile device won't collapse.
|
|
99
|
-
*
|
|
100
|
-
* @fires {CustomEvent} drawer-opened-changed - Fired when the `drawerOpened` property changes.
|
|
101
|
-
* @fires {CustomEvent} overlay-changed - Fired when the `overlay` property changes.
|
|
102
|
-
* @fires {CustomEvent} primary-section-changed - Fired when the `primarySection` property changes.
|
|
103
|
-
*
|
|
104
|
-
* @extends HTMLElement
|
|
105
|
-
* @mixes ElementMixin
|
|
106
|
-
* @mixes ThemableMixin
|
|
9
|
+
* @deprecated Import `AppLayout` from `@vaadin/app-layout` instead.
|
|
107
10
|
*/
|
|
108
|
-
|
|
109
|
-
static get template() {
|
|
110
|
-
return html`
|
|
111
|
-
<style>
|
|
112
|
-
:host {
|
|
113
|
-
display: block;
|
|
114
|
-
box-sizing: border-box;
|
|
115
|
-
height: 100%;
|
|
116
|
-
--vaadin-app-layout-transition: 200ms;
|
|
117
|
-
transition: padding var(--vaadin-app-layout-transition);
|
|
118
|
-
--vaadin-app-layout-touch-optimized: false;
|
|
119
|
-
--vaadin-app-layout-navbar-offset-top: var(--_vaadin-app-layout-navbar-offset-size);
|
|
120
|
-
--vaadin-app-layout-navbar-offset-bottom: var(--_vaadin-app-layout-navbar-offset-size-bottom);
|
|
121
|
-
padding-top: var(--vaadin-app-layout-navbar-offset-top);
|
|
122
|
-
padding-bottom: var(--vaadin-app-layout-navbar-offset-bottom);
|
|
123
|
-
padding-left: var(--vaadin-app-layout-navbar-offset-left);
|
|
124
|
-
}
|
|
11
|
+
export const AppLayoutElement = AppLayout;
|
|
125
12
|
|
|
126
|
-
|
|
127
|
-
padding-left: 0;
|
|
128
|
-
padding-right: var(--vaadin-app-layout-navbar-offset-left);
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
:host([hidden]),
|
|
132
|
-
[hidden] {
|
|
133
|
-
display: none !important;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
:host([no-anim]) {
|
|
137
|
-
--vaadin-app-layout-transition: none !important;
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
:host([drawer-opened]) {
|
|
141
|
-
--vaadin-app-layout-drawer-offset-left: var(--_vaadin-app-layout-drawer-offset-size);
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
:host([overlay]) {
|
|
145
|
-
--vaadin-app-layout-drawer-offset-left: 0;
|
|
146
|
-
--vaadin-app-layout-navbar-offset-left: 0;
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
:host(:not([no-scroll])) [content] {
|
|
150
|
-
overflow: auto;
|
|
151
|
-
-webkit-overflow-scrolling: touch;
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
[content] {
|
|
155
|
-
height: 100%;
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
@media (pointer: coarse) and (max-width: 800px) and (min-height: 500px) {
|
|
159
|
-
:host {
|
|
160
|
-
--vaadin-app-layout-touch-optimized: true;
|
|
161
|
-
}
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
[part='navbar'],
|
|
165
|
-
[part='navbar']::before {
|
|
166
|
-
position: fixed;
|
|
167
|
-
display: flex;
|
|
168
|
-
align-items: center;
|
|
169
|
-
top: 0;
|
|
170
|
-
right: 0;
|
|
171
|
-
left: 0;
|
|
172
|
-
transition: left var(--vaadin-app-layout-transition);
|
|
173
|
-
padding-top: var(--safe-area-inset-top);
|
|
174
|
-
padding-left: var(--safe-area-inset-left);
|
|
175
|
-
padding-right: var(--safe-area-inset-right);
|
|
176
|
-
z-index: 1;
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
:host(:not([dir='rtl'])[primary-section='drawer'][drawer-opened]:not([overlay])) [part='navbar'] {
|
|
180
|
-
left: var(--vaadin-app-layout-drawer-offset-left, 0);
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
:host([dir='rtl'][primary-section='drawer'][drawer-opened]:not([overlay])) [part='navbar'] {
|
|
184
|
-
right: var(--vaadin-app-layout-drawer-offset-left, 0);
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
:host([primary-section='drawer']) [part='drawer'] {
|
|
188
|
-
top: 0;
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
[part='navbar'][bottom] {
|
|
192
|
-
top: auto;
|
|
193
|
-
bottom: 0;
|
|
194
|
-
padding-bottom: var(--safe-area-inset-bottom);
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
[part='drawer'] {
|
|
198
|
-
overflow: auto;
|
|
199
|
-
position: fixed;
|
|
200
|
-
top: var(--vaadin-app-layout-navbar-offset-top, 0);
|
|
201
|
-
right: auto;
|
|
202
|
-
bottom: var(--vaadin-app-layout-navbar-offset-bottom, var(--vaadin-viewport-offset-bottom, 0));
|
|
203
|
-
left: var(--vaadin-app-layout-navbar-offset-left, 0);
|
|
204
|
-
transition: transform var(--vaadin-app-layout-transition);
|
|
205
|
-
transform: translateX(-100%);
|
|
206
|
-
max-width: 90%;
|
|
207
|
-
width: 16em;
|
|
208
|
-
box-sizing: border-box;
|
|
209
|
-
padding: var(--safe-area-inset-top) 0 var(--safe-area-inset-bottom) var(--safe-area-inset-left);
|
|
210
|
-
outline: none;
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
:host([drawer-opened]) [part='drawer'] {
|
|
214
|
-
transform: translateX(0%);
|
|
215
|
-
touch-action: manipulation;
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
[part='backdrop'] {
|
|
219
|
-
background-color: #000;
|
|
220
|
-
opacity: 0.3;
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
:host(:not([drawer-opened])) [part='backdrop'] {
|
|
224
|
-
opacity: 0;
|
|
225
|
-
}
|
|
226
|
-
|
|
227
|
-
:host([overlay]) [part='backdrop'] {
|
|
228
|
-
position: fixed;
|
|
229
|
-
top: 0;
|
|
230
|
-
right: 0;
|
|
231
|
-
bottom: 0;
|
|
232
|
-
left: 0;
|
|
233
|
-
pointer-events: none;
|
|
234
|
-
transition: opacity var(--vaadin-app-layout-transition);
|
|
235
|
-
-webkit-tap-highlight-color: transparent;
|
|
236
|
-
}
|
|
237
|
-
|
|
238
|
-
:host([overlay]) [part='drawer'] {
|
|
239
|
-
top: 0;
|
|
240
|
-
bottom: 0;
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
:host([overlay]) [part='drawer'],
|
|
244
|
-
:host([overlay]) [part='backdrop'] {
|
|
245
|
-
z-index: 2;
|
|
246
|
-
}
|
|
247
|
-
|
|
248
|
-
:host([drawer-opened][overlay]) [part='backdrop'] {
|
|
249
|
-
pointer-events: auto;
|
|
250
|
-
touch-action: manipulation;
|
|
251
|
-
}
|
|
252
|
-
|
|
253
|
-
:host([dir='rtl']) [part='drawer'] {
|
|
254
|
-
left: auto;
|
|
255
|
-
right: var(--vaadin-app-layout-navbar-offset-start, 0);
|
|
256
|
-
transform: translateX(100%);
|
|
257
|
-
}
|
|
258
|
-
|
|
259
|
-
:host([dir='rtl']) [part='navbar'],
|
|
260
|
-
:host([dir='rtl']) [part='navbar']::before {
|
|
261
|
-
transition: right var(--vaadin-app-layout-transition);
|
|
262
|
-
}
|
|
263
|
-
|
|
264
|
-
:host([dir='rtl'][drawer-opened]) [part='drawer'] {
|
|
265
|
-
transform: translateX(0%);
|
|
266
|
-
}
|
|
267
|
-
|
|
268
|
-
:host(:not([dir='rtl'])[drawer-opened]:not([overlay])) {
|
|
269
|
-
padding-left: var(--vaadin-app-layout-drawer-offset-left);
|
|
270
|
-
}
|
|
271
|
-
|
|
272
|
-
:host([dir='rtl'][drawer-opened]:not([overlay])) {
|
|
273
|
-
padding-right: var(--vaadin-app-layout-drawer-offset-left);
|
|
274
|
-
}
|
|
275
|
-
|
|
276
|
-
@media (max-width: 800px), (max-height: 600px) {
|
|
277
|
-
:host {
|
|
278
|
-
--vaadin-app-layout-drawer-overlay: true;
|
|
279
|
-
}
|
|
280
|
-
|
|
281
|
-
[part='drawer'] {
|
|
282
|
-
width: 20em;
|
|
283
|
-
}
|
|
284
|
-
}
|
|
285
|
-
</style>
|
|
286
|
-
<div part="navbar" id="navbarTop">
|
|
287
|
-
<slot name="navbar"></slot>
|
|
288
|
-
</div>
|
|
289
|
-
<div part="backdrop" on-click="_close" on-touchstart="_close"></div>
|
|
290
|
-
<div part="drawer" id="drawer">
|
|
291
|
-
<slot name="drawer" id="drawerSlot"></slot>
|
|
292
|
-
</div>
|
|
293
|
-
<div content>
|
|
294
|
-
<slot></slot>
|
|
295
|
-
</div>
|
|
296
|
-
<div part="navbar" id="navbarBottom" bottom hidden>
|
|
297
|
-
<slot name="navbar-bottom"></slot>
|
|
298
|
-
</div>
|
|
299
|
-
<div hidden><slot id="touchSlot" name="navbar touch-optimized"></slot></div>
|
|
300
|
-
`;
|
|
301
|
-
}
|
|
302
|
-
|
|
303
|
-
static get is() {
|
|
304
|
-
return 'vaadin-app-layout';
|
|
305
|
-
}
|
|
306
|
-
|
|
307
|
-
static get properties() {
|
|
308
|
-
return {
|
|
309
|
-
/**
|
|
310
|
-
* Defines whether navbar or drawer will come first visually.
|
|
311
|
-
* - By default (`primary-section="navbar"`), the navbar takes the full available width and moves the drawer down.
|
|
312
|
-
* - If `primary-section="drawer"` is set, then the drawer will move the navbar, taking the full available height.
|
|
313
|
-
* @attr {navbar|drawer} primary-section
|
|
314
|
-
* @type {!PrimarySection}
|
|
315
|
-
*/
|
|
316
|
-
primarySection: {
|
|
317
|
-
type: String,
|
|
318
|
-
value: 'navbar',
|
|
319
|
-
notify: true,
|
|
320
|
-
reflectToAttribute: true,
|
|
321
|
-
observer: '_primarySectionObserver'
|
|
322
|
-
},
|
|
323
|
-
|
|
324
|
-
/**
|
|
325
|
-
* Controls whether the drawer is opened (visible) or not.
|
|
326
|
-
* Its default value depends on the viewport:
|
|
327
|
-
* - `true`, for desktop size views
|
|
328
|
-
* - `false`, for mobile size views
|
|
329
|
-
* @attr {boolean} drawer-opened
|
|
330
|
-
* @type {boolean}
|
|
331
|
-
*/
|
|
332
|
-
drawerOpened: {
|
|
333
|
-
type: Boolean,
|
|
334
|
-
notify: true,
|
|
335
|
-
value: true,
|
|
336
|
-
reflectToAttribute: true,
|
|
337
|
-
observer: '_drawerOpenedObserver'
|
|
338
|
-
},
|
|
339
|
-
|
|
340
|
-
/**
|
|
341
|
-
* Drawer is an overlay on top of the content
|
|
342
|
-
* Controlled via CSS using `--vaadin-app-layout-drawer-overlay: true|false`;
|
|
343
|
-
* @type {boolean}
|
|
344
|
-
*/
|
|
345
|
-
overlay: {
|
|
346
|
-
type: Boolean,
|
|
347
|
-
notify: true,
|
|
348
|
-
readOnly: true,
|
|
349
|
-
value: false,
|
|
350
|
-
reflectToAttribute: true
|
|
351
|
-
},
|
|
352
|
-
|
|
353
|
-
/**
|
|
354
|
-
* A global event that causes the drawer to close (be hidden) when it is in overlay mode.
|
|
355
|
-
* - The default is `vaadin-router-location-changed` dispatched by Vaadin Router
|
|
356
|
-
*
|
|
357
|
-
* @attr {string} close-drawer-on
|
|
358
|
-
* @type {string}
|
|
359
|
-
*/
|
|
360
|
-
closeDrawerOn: {
|
|
361
|
-
type: String,
|
|
362
|
-
value: 'vaadin-router-location-changed',
|
|
363
|
-
observer: '_closeDrawerOnChanged'
|
|
364
|
-
}
|
|
365
|
-
};
|
|
366
|
-
}
|
|
367
|
-
|
|
368
|
-
constructor() {
|
|
369
|
-
super();
|
|
370
|
-
// TODO(jouni): might want to debounce
|
|
371
|
-
this.__boundResizeListener = this._resize.bind(this);
|
|
372
|
-
this.__drawerToggleClickListener = this._drawerToggleClick.bind(this);
|
|
373
|
-
this.__closeOverlayDrawerListener = this.__closeOverlayDrawer.bind(this);
|
|
374
|
-
}
|
|
375
|
-
|
|
376
|
-
/** @protected */
|
|
377
|
-
connectedCallback() {
|
|
378
|
-
super.connectedCallback();
|
|
379
|
-
|
|
380
|
-
this._blockAnimationUntilAfterNextRender();
|
|
381
|
-
|
|
382
|
-
window.addEventListener('resize', this.__boundResizeListener);
|
|
383
|
-
this.addEventListener('drawer-toggle-click', this.__drawerToggleClickListener);
|
|
384
|
-
|
|
385
|
-
beforeNextRender(this, this._afterFirstRender);
|
|
386
|
-
|
|
387
|
-
this._updateTouchOptimizedMode();
|
|
388
|
-
|
|
389
|
-
const navbarSlot = this.$.navbarTop.firstElementChild;
|
|
390
|
-
this._navbarChildObserver = new FlattenedNodesObserver(navbarSlot, () => {
|
|
391
|
-
this._updateTouchOptimizedMode();
|
|
392
|
-
});
|
|
393
|
-
|
|
394
|
-
this._touchChildObserver = new FlattenedNodesObserver(this.$.touchSlot, () => {
|
|
395
|
-
this._updateTouchOptimizedMode();
|
|
396
|
-
});
|
|
397
|
-
|
|
398
|
-
this._drawerChildObserver = new FlattenedNodesObserver(this.$.drawerSlot, () => {
|
|
399
|
-
this._updateDrawerSize();
|
|
400
|
-
});
|
|
401
|
-
this._updateDrawerSize();
|
|
402
|
-
this._updateOverlayMode();
|
|
403
|
-
|
|
404
|
-
window.addEventListener('close-overlay-drawer', this.__closeOverlayDrawerListener);
|
|
405
|
-
}
|
|
406
|
-
|
|
407
|
-
/** @protected */
|
|
408
|
-
disconnectedCallback() {
|
|
409
|
-
super.disconnectedCallback();
|
|
410
|
-
|
|
411
|
-
this._navbarChildObserver && this._navbarChildObserver.disconnect();
|
|
412
|
-
this._drawerChildObserver && this._drawerChildObserver.disconnect();
|
|
413
|
-
this._touchChildObserver && this._touchChildObserver.disconnect();
|
|
414
|
-
window.removeEventListener('resize', this.__boundResizeListener);
|
|
415
|
-
this.removeEventListener('drawer-toggle-click', this.__drawerToggleClickListener);
|
|
416
|
-
window.removeEventListener('close-overlay-drawer', this.__drawerToggleClickListener);
|
|
417
|
-
}
|
|
418
|
-
|
|
419
|
-
/**
|
|
420
|
-
* Helper static method that dispatches a `close-overlay-drawer` event
|
|
421
|
-
*/
|
|
422
|
-
static dispatchCloseOverlayDrawerEvent() {
|
|
423
|
-
window.dispatchEvent(new CustomEvent('close-overlay-drawer'));
|
|
424
|
-
}
|
|
425
|
-
|
|
426
|
-
/** @private */
|
|
427
|
-
_primarySectionObserver(value) {
|
|
428
|
-
const isValid = ['navbar', 'drawer'].indexOf(value) !== -1;
|
|
429
|
-
if (!isValid) {
|
|
430
|
-
this.set('primarySection', 'navbar');
|
|
431
|
-
}
|
|
432
|
-
}
|
|
433
|
-
|
|
434
|
-
/** @private */
|
|
435
|
-
_drawerOpenedObserver() {
|
|
436
|
-
const drawer = this.$.drawer;
|
|
437
|
-
|
|
438
|
-
drawer.removeAttribute('tabindex');
|
|
439
|
-
|
|
440
|
-
if (this.overlay) {
|
|
441
|
-
if (this.drawerOpened) {
|
|
442
|
-
drawer.setAttribute('tabindex', 0);
|
|
443
|
-
drawer.focus();
|
|
444
|
-
this._updateDrawerHeight();
|
|
445
|
-
}
|
|
446
|
-
}
|
|
447
|
-
|
|
448
|
-
this.notifyResize();
|
|
449
|
-
}
|
|
450
|
-
|
|
451
|
-
/** @protected */
|
|
452
|
-
_afterFirstRender() {
|
|
453
|
-
this._blockAnimationUntilAfterNextRender();
|
|
454
|
-
this._updateOffsetSize();
|
|
455
|
-
}
|
|
456
|
-
|
|
457
|
-
/** @private */
|
|
458
|
-
_drawerToggleClick(e) {
|
|
459
|
-
e.stopPropagation();
|
|
460
|
-
this.drawerOpened = !this.drawerOpened;
|
|
461
|
-
}
|
|
462
|
-
|
|
463
|
-
/** @private */
|
|
464
|
-
__closeOverlayDrawer() {
|
|
465
|
-
if (this.overlay) {
|
|
466
|
-
this.drawerOpened = false;
|
|
467
|
-
}
|
|
468
|
-
}
|
|
469
|
-
|
|
470
|
-
/** @protected */
|
|
471
|
-
_updateDrawerSize() {
|
|
472
|
-
const childCount = this.querySelectorAll('[slot=drawer]').length;
|
|
473
|
-
const drawer = this.$.drawer;
|
|
474
|
-
|
|
475
|
-
if (childCount === 0) {
|
|
476
|
-
drawer.setAttribute('hidden', '');
|
|
477
|
-
} else {
|
|
478
|
-
drawer.removeAttribute('hidden');
|
|
479
|
-
}
|
|
480
|
-
this._updateOffsetSize();
|
|
481
|
-
}
|
|
482
|
-
|
|
483
|
-
/** @private */
|
|
484
|
-
_resize() {
|
|
485
|
-
this._blockAnimationUntilAfterNextRender();
|
|
486
|
-
this._updateTouchOptimizedMode();
|
|
487
|
-
this._updateOverlayMode();
|
|
488
|
-
}
|
|
489
|
-
|
|
490
|
-
/** @protected */
|
|
491
|
-
_updateOffsetSize() {
|
|
492
|
-
const navbar = this.$.navbarTop;
|
|
493
|
-
const navbarRect = navbar.getBoundingClientRect();
|
|
494
|
-
|
|
495
|
-
const navbarBottom = this.$.navbarBottom;
|
|
496
|
-
const navbarBottomRect = navbarBottom.getBoundingClientRect();
|
|
497
|
-
|
|
498
|
-
this.style.setProperty('--_vaadin-app-layout-navbar-offset-size', navbarRect.height + 'px');
|
|
499
|
-
this.style.setProperty('--_vaadin-app-layout-navbar-offset-size-bottom', navbarBottomRect.height + 'px');
|
|
500
|
-
|
|
501
|
-
const drawer = this.$.drawer;
|
|
502
|
-
const drawerRect = drawer.getBoundingClientRect();
|
|
503
|
-
|
|
504
|
-
this.style.setProperty('--_vaadin-app-layout-drawer-offset-size', drawerRect.width + 'px');
|
|
505
|
-
|
|
506
|
-
this.notifyResize();
|
|
507
|
-
}
|
|
508
|
-
|
|
509
|
-
/** @protected */
|
|
510
|
-
_updateDrawerHeight() {
|
|
511
|
-
const { scrollHeight, offsetHeight } = this.$.drawer;
|
|
512
|
-
const height = scrollHeight > offsetHeight ? `${scrollHeight}px` : '100%';
|
|
513
|
-
this.style.setProperty('--_vaadin-app-layout-drawer-scroll-size', height);
|
|
514
|
-
}
|
|
515
|
-
|
|
516
|
-
/** @protected */
|
|
517
|
-
_updateOverlayMode() {
|
|
518
|
-
const overlay = this._getCustomPropertyValue('--vaadin-app-layout-drawer-overlay') == 'true';
|
|
519
|
-
const drawer = this.$.drawer;
|
|
520
|
-
|
|
521
|
-
if (!this.overlay && overlay) {
|
|
522
|
-
// Changed from not overlay to overlay
|
|
523
|
-
this._drawerStateSaved = this.drawerOpened;
|
|
524
|
-
this.drawerOpened = false;
|
|
525
|
-
}
|
|
526
|
-
|
|
527
|
-
this._setOverlay(overlay);
|
|
528
|
-
|
|
529
|
-
if (this.overlay) {
|
|
530
|
-
drawer.setAttribute('role', 'dialog');
|
|
531
|
-
drawer.setAttribute('aria-modal', 'true');
|
|
532
|
-
drawer.setAttribute('aria-label', 'drawer');
|
|
533
|
-
} else {
|
|
534
|
-
if (this._drawerStateSaved) {
|
|
535
|
-
this.drawerOpened = this._drawerStateSaved;
|
|
536
|
-
this._drawerStateSaved = null;
|
|
537
|
-
}
|
|
538
|
-
|
|
539
|
-
drawer.removeAttribute('role');
|
|
540
|
-
drawer.removeAttribute('aria-modal');
|
|
541
|
-
drawer.removeAttribute('aria-label');
|
|
542
|
-
}
|
|
543
|
-
|
|
544
|
-
this._updateDrawerHeight();
|
|
545
|
-
|
|
546
|
-
if (this.overlay !== overlay) {
|
|
547
|
-
this.notifyResize();
|
|
548
|
-
}
|
|
549
|
-
|
|
550
|
-
// TODO(jouni): ARIA attributes. The drawer should act similar to a modal dialog when in ”overlay” mode
|
|
551
|
-
}
|
|
552
|
-
|
|
553
|
-
/** @private */
|
|
554
|
-
_closeDrawerOnChanged(closeDrawerOn, oldCloseDrawerOn) {
|
|
555
|
-
if (oldCloseDrawerOn) {
|
|
556
|
-
window.removeEventListener(oldCloseDrawerOn, this.__closeOverlayDrawerListener);
|
|
557
|
-
}
|
|
558
|
-
if (closeDrawerOn) {
|
|
559
|
-
window.addEventListener(closeDrawerOn, this.__closeOverlayDrawerListener);
|
|
560
|
-
}
|
|
561
|
-
}
|
|
562
|
-
|
|
563
|
-
/** @protected */
|
|
564
|
-
_close() {
|
|
565
|
-
this.drawerOpened = false;
|
|
566
|
-
}
|
|
567
|
-
|
|
568
|
-
/** @private */
|
|
569
|
-
_getCustomPropertyValue(customProperty) {
|
|
570
|
-
const customPropertyValue = getComputedStyle(this).getPropertyValue(customProperty);
|
|
571
|
-
return (customPropertyValue || '').trim().toLowerCase();
|
|
572
|
-
}
|
|
573
|
-
|
|
574
|
-
/** @protected */
|
|
575
|
-
_updateTouchOptimizedMode() {
|
|
576
|
-
const touchOptimized = this._getCustomPropertyValue('--vaadin-app-layout-touch-optimized') == 'true';
|
|
577
|
-
|
|
578
|
-
const navbarItems = this.querySelectorAll('[slot*="navbar"]');
|
|
579
|
-
|
|
580
|
-
if (navbarItems.length > 0) {
|
|
581
|
-
Array.from(navbarItems).forEach((navbar) => {
|
|
582
|
-
if (navbar.getAttribute('slot').indexOf('touch-optimized') > -1) {
|
|
583
|
-
navbar.__touchOptimized = true;
|
|
584
|
-
}
|
|
585
|
-
|
|
586
|
-
if (touchOptimized && navbar.__touchOptimized) {
|
|
587
|
-
navbar.setAttribute('slot', 'navbar-bottom');
|
|
588
|
-
} else {
|
|
589
|
-
navbar.setAttribute('slot', 'navbar');
|
|
590
|
-
}
|
|
591
|
-
});
|
|
592
|
-
}
|
|
593
|
-
|
|
594
|
-
if (this.$.navbarTop.querySelector('[name=navbar]').assignedNodes().length === 0) {
|
|
595
|
-
this.$.navbarTop.setAttribute('hidden', '');
|
|
596
|
-
} else {
|
|
597
|
-
this.$.navbarTop.removeAttribute('hidden');
|
|
598
|
-
}
|
|
599
|
-
|
|
600
|
-
if (touchOptimized) {
|
|
601
|
-
this.$.navbarBottom.removeAttribute('hidden');
|
|
602
|
-
} else {
|
|
603
|
-
this.$.navbarBottom.setAttribute('hidden', '');
|
|
604
|
-
}
|
|
605
|
-
|
|
606
|
-
this._updateOffsetSize();
|
|
607
|
-
}
|
|
608
|
-
|
|
609
|
-
/** @protected */
|
|
610
|
-
_blockAnimationUntilAfterNextRender() {
|
|
611
|
-
this.setAttribute('no-anim', '');
|
|
612
|
-
afterNextRender(this, () => {
|
|
613
|
-
this.removeAttribute('no-anim');
|
|
614
|
-
});
|
|
615
|
-
}
|
|
616
|
-
|
|
617
|
-
/**
|
|
618
|
-
* App Layout listens to `close-overlay-drawer` on the window level.
|
|
619
|
-
* A custom event can be dispatched and the App Layout will close the drawer in overlay.
|
|
620
|
-
*
|
|
621
|
-
* That can be used, for instance, when a navigation occurs when user clicks in a menu item inside the drawer.
|
|
622
|
-
*
|
|
623
|
-
* See `dispatchCloseOverlayDrawerEvent()` helper method.
|
|
624
|
-
*
|
|
625
|
-
* @event close-overlay-drawer
|
|
626
|
-
*/
|
|
627
|
-
}
|
|
628
|
-
|
|
629
|
-
customElements.define(AppLayoutElement.is, AppLayoutElement);
|
|
630
|
-
|
|
631
|
-
export { AppLayoutElement };
|
|
13
|
+
export * from '@vaadin/app-layout/src/vaadin-app-layout.js';
|
|
@@ -1,22 +1,18 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2021 Vaadin Ltd.
|
|
4
|
+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
+
*/
|
|
6
|
+
import { DrawerToggle } from '@vaadin/app-layout/src/vaadin-drawer-toggle.js';
|
|
2
7
|
|
|
3
8
|
/**
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
* ```
|
|
7
|
-
* <vaadin-app-layout>
|
|
8
|
-
* <vaadin-drawer-toggle slot="navbar">Toggle drawer</vaadin-drawer-toggle>
|
|
9
|
-
* </vaadin-app-layout>
|
|
10
|
-
* ```
|
|
9
|
+
* @deprecated Import `DrawerToggle` from `@vaadin/app-layout/vaadin-drawer-toggle` instead.
|
|
11
10
|
*/
|
|
12
|
-
|
|
13
|
-
ariaLabel: string | null | undefined;
|
|
14
|
-
}
|
|
11
|
+
export type DrawerToggleElement = DrawerToggle;
|
|
15
12
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
}
|
|
13
|
+
/**
|
|
14
|
+
* @deprecated Import `DrawerToggle` from `@vaadin/app-layout/vaadin-drawer-toggle` instead.
|
|
15
|
+
*/
|
|
16
|
+
export const DrawerToggleElement: typeof DrawerToggle;
|
|
21
17
|
|
|
22
|
-
export
|
|
18
|
+
export * from '@vaadin/app-layout/src/vaadin-drawer-toggle.js';
|
|
@@ -3,88 +3,11 @@
|
|
|
3
3
|
* Copyright (c) 2021 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
import {
|
|
7
|
-
import { Button } from '@vaadin/button/src/vaadin-button.js';
|
|
6
|
+
import { DrawerToggle } from '@vaadin/app-layout/src/vaadin-drawer-toggle.js';
|
|
8
7
|
|
|
9
8
|
/**
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
* ```
|
|
13
|
-
* <vaadin-app-layout>
|
|
14
|
-
* <vaadin-drawer-toggle slot="navbar">Toggle drawer</vaadin-drawer-toggle>
|
|
15
|
-
* </vaadin-app-layout>
|
|
16
|
-
* ```
|
|
17
|
-
*
|
|
18
|
-
* @extends Button
|
|
9
|
+
* @deprecated Import `DrawerToggle` from `@vaadin/app-layout/vaadin-drawer-toggle` instead.
|
|
19
10
|
*/
|
|
20
|
-
|
|
21
|
-
static get template() {
|
|
22
|
-
return html`
|
|
23
|
-
<style>
|
|
24
|
-
:host {
|
|
25
|
-
display: inline-flex;
|
|
26
|
-
align-items: center;
|
|
27
|
-
justify-content: center;
|
|
28
|
-
cursor: default;
|
|
29
|
-
position: relative;
|
|
30
|
-
outline: none;
|
|
31
|
-
height: 24px;
|
|
32
|
-
width: 24px;
|
|
33
|
-
padding: 4px;
|
|
34
|
-
}
|
|
11
|
+
export const DrawerToggleElement = DrawerToggle;
|
|
35
12
|
|
|
36
|
-
|
|
37
|
-
[part='icon']::after,
|
|
38
|
-
[part='icon']::before {
|
|
39
|
-
position: absolute;
|
|
40
|
-
top: 8px;
|
|
41
|
-
height: 3px;
|
|
42
|
-
width: 24px;
|
|
43
|
-
background-color: #000;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
[part='icon']::after,
|
|
47
|
-
[part='icon']::before {
|
|
48
|
-
content: '';
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
[part='icon']::after {
|
|
52
|
-
top: 6px;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
[part='icon']::before {
|
|
56
|
-
top: 12px;
|
|
57
|
-
}
|
|
58
|
-
</style>
|
|
59
|
-
<slot>
|
|
60
|
-
<div part="icon"></div>
|
|
61
|
-
</slot>
|
|
62
|
-
`;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
static get is() {
|
|
66
|
-
return 'vaadin-drawer-toggle';
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
static get properties() {
|
|
70
|
-
return {
|
|
71
|
-
ariaLabel: {
|
|
72
|
-
type: String,
|
|
73
|
-
value: 'Toggle',
|
|
74
|
-
reflectToAttribute: true
|
|
75
|
-
}
|
|
76
|
-
};
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
constructor() {
|
|
80
|
-
super();
|
|
81
|
-
|
|
82
|
-
this.addEventListener('click', () => {
|
|
83
|
-
this.dispatchEvent(new CustomEvent('drawer-toggle-click', { bubbles: true, composed: true }));
|
|
84
|
-
});
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
customElements.define(DrawerToggleElement.is, DrawerToggleElement);
|
|
89
|
-
|
|
90
|
-
export { DrawerToggleElement };
|
|
13
|
+
export * from '@vaadin/app-layout/src/vaadin-drawer-toggle.js';
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
import '
|
|
2
|
-
import '../../src/vaadin-app-layout.js';
|
|
1
|
+
import '@vaadin/app-layout/theme/lumo/vaadin-app-layout.js';
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
import '
|
|
2
|
-
import '../../src/vaadin-drawer-toggle.js';
|
|
1
|
+
import '@vaadin/app-layout/theme/lumo/vaadin-drawer-toggle.js';
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
import '
|
|
2
|
-
import '../../src/vaadin-app-layout.js';
|
|
1
|
+
import '@vaadin/app-layout/theme/material/vaadin-app-layout.js';
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
import '
|
|
2
|
-
import '../../src/vaadin-drawer-toggle.js';
|
|
1
|
+
import '@vaadin/app-layout/theme/material/vaadin-drawer-toggle.js';
|
package/src/detect-ios-navbar.js
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
export const _detectIosNavbar = function () {
|
|
2
|
-
/* c8 ignore next 11 */
|
|
3
|
-
if (window.navigator.userAgent.match(/iPhone|iPad/i)) {
|
|
4
|
-
const innerHeight = window.innerHeight;
|
|
5
|
-
const innerWidth = window.innerWidth;
|
|
6
|
-
const landscape = innerWidth > innerHeight;
|
|
7
|
-
const clientHeight = document.documentElement.clientHeight;
|
|
8
|
-
if (landscape && clientHeight > innerHeight) {
|
|
9
|
-
document.documentElement.style.setProperty('--vaadin-viewport-offset-bottom', clientHeight - innerHeight + 'px');
|
|
10
|
-
} else {
|
|
11
|
-
document.documentElement.style.setProperty('--vaadin-viewport-offset-bottom', '');
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
_detectIosNavbar();
|
|
17
|
-
window.addEventListener('resize', _detectIosNavbar);
|
package/src/safe-area-inset.js
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
const $_documentContainer = document.createElement('template');
|
|
2
|
-
|
|
3
|
-
$_documentContainer.innerHTML = `
|
|
4
|
-
<style>
|
|
5
|
-
/* Use units so that the values can be used in calc() */
|
|
6
|
-
html {
|
|
7
|
-
--safe-area-inset-top: constant(safe-area-inset-top, 0px);
|
|
8
|
-
--safe-area-inset-right: constant(safe-area-inset-right, 0px);
|
|
9
|
-
--safe-area-inset-bottom: constant(safe-area-inset-bottom, 0px);
|
|
10
|
-
--safe-area-inset-left: constant(safe-area-inset-left, 0px);
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
@supports (padding-left: env(safe-area-inset-left)) {
|
|
14
|
-
html {
|
|
15
|
-
--safe-area-inset-top: env(safe-area-inset-top, 0px);
|
|
16
|
-
--safe-area-inset-right: env(safe-area-inset-right, 0px);
|
|
17
|
-
--safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
|
|
18
|
-
--safe-area-inset-left: env(safe-area-inset-left, 0px);
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
</style>
|
|
22
|
-
`;
|
|
23
|
-
|
|
24
|
-
document.head.appendChild($_documentContainer.content);
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
|
|
2
|
-
import '@vaadin/vaadin-lumo-styles/color.js';
|
|
3
|
-
import '@vaadin/vaadin-lumo-styles/spacing.js';
|
|
4
|
-
import '@vaadin/vaadin-lumo-styles/typography.js';
|
|
5
|
-
|
|
6
|
-
registerStyles(
|
|
7
|
-
'vaadin-app-layout',
|
|
8
|
-
css`
|
|
9
|
-
[part='navbar']::before {
|
|
10
|
-
background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
:host(:not([dir='rtl']):not([overlay])) [part='drawer'] {
|
|
14
|
-
border-right: 1px solid var(--lumo-contrast-10pct);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
:host([dir='rtl']:not([overlay])) [part='drawer'] {
|
|
18
|
-
border-left: 1px solid var(--lumo-contrast-10pct);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
:host([overlay]) [part='drawer']::before {
|
|
22
|
-
background: var(--lumo-base-color);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
[part='navbar']::before,
|
|
26
|
-
:host([overlay]) [part='drawer']::before {
|
|
27
|
-
position: absolute;
|
|
28
|
-
content: '';
|
|
29
|
-
width: 100%;
|
|
30
|
-
height: 100%;
|
|
31
|
-
z-index: -1;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
:host([overlay]) [part='drawer']::before {
|
|
35
|
-
background: var(--lumo-base-color);
|
|
36
|
-
height: var(--_vaadin-app-layout-drawer-scroll-size, 100%);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
[part='backdrop'] {
|
|
40
|
-
background-color: var(--lumo-shade-20pct);
|
|
41
|
-
opacity: 1;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
[part] ::slotted(h2),
|
|
45
|
-
[part] ::slotted(h3),
|
|
46
|
-
[part] ::slotted(h4) {
|
|
47
|
-
margin-top: var(--lumo-space-xs) !important;
|
|
48
|
-
margin-bottom: var(--lumo-space-xs) !important;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
@supports (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px)) {
|
|
52
|
-
[part='navbar']::before {
|
|
53
|
-
opacity: 0.8;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
[part='navbar'] {
|
|
57
|
-
-webkit-backdrop-filter: blur(24px);
|
|
58
|
-
backdrop-filter: blur(24px);
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
:host([overlay]) [part='drawer']::before {
|
|
62
|
-
opacity: 0.9;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
:host([overlay]) [part='drawer'] {
|
|
66
|
-
-webkit-backdrop-filter: blur(24px);
|
|
67
|
-
backdrop-filter: blur(24px);
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
`,
|
|
71
|
-
{ moduleId: 'lumo-app-layout' }
|
|
72
|
-
);
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
|
|
2
|
-
import { button } from '@vaadin/button/theme/lumo/vaadin-button-styles.js';
|
|
3
|
-
import '@vaadin/vaadin-lumo-styles/font-icons.js';
|
|
4
|
-
|
|
5
|
-
const drawerToggle = css`
|
|
6
|
-
:host {
|
|
7
|
-
width: var(--lumo-size-l);
|
|
8
|
-
height: var(--lumo-size-l);
|
|
9
|
-
min-width: auto;
|
|
10
|
-
margin: 0 var(--lumo-space-s);
|
|
11
|
-
padding: 0;
|
|
12
|
-
background: transparent;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
[part='icon'],
|
|
16
|
-
[part='icon']::after,
|
|
17
|
-
[part='icon']::before {
|
|
18
|
-
position: inherit;
|
|
19
|
-
height: auto;
|
|
20
|
-
width: auto;
|
|
21
|
-
background: transparent;
|
|
22
|
-
top: auto;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
[part='icon']::before {
|
|
26
|
-
font-family: lumo-icons;
|
|
27
|
-
font-size: var(--lumo-icon-size-m);
|
|
28
|
-
content: var(--lumo-icons-menu);
|
|
29
|
-
}
|
|
30
|
-
`;
|
|
31
|
-
|
|
32
|
-
registerStyles('vaadin-drawer-toggle', [button, drawerToggle], { moduleId: 'lumo-drawer-toggle' });
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
|
|
2
|
-
import '@vaadin/vaadin-material-styles/color.js';
|
|
3
|
-
import '@vaadin/vaadin-material-styles/shadow.js';
|
|
4
|
-
import '@vaadin/vaadin-material-styles/typography.js';
|
|
5
|
-
|
|
6
|
-
registerStyles(
|
|
7
|
-
'vaadin-app-layout',
|
|
8
|
-
css`
|
|
9
|
-
:host {
|
|
10
|
-
background-color: var(--material-background-color);
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
[part='navbar'] {
|
|
14
|
-
padding: 0.25em 0.5em;
|
|
15
|
-
background: var(--vaadin-app-layout-navbar-background, var(--material-secondary-background-color));
|
|
16
|
-
box-shadow: var(--material-shadow-elevation-8dp);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
[part='drawer'] {
|
|
20
|
-
background: var(--material-background-color);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
:host(:not([dir='rtl'])) [part='drawer'] {
|
|
24
|
-
border-right: 1px solid var(--material-secondary-background-color);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
:host([dir='rtl']) [part='drawer'] {
|
|
28
|
-
border-left: 1px solid var(--material-secondary-background-color);
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
:host([primary-section='drawer']) [part='drawer'] {
|
|
32
|
-
z-index: 1;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
:host([primary-section='navbar']:not([overlay])) [part='navbar'] {
|
|
36
|
-
z-index: 1;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
[part] ::slotted(h2),
|
|
40
|
-
[part] ::slotted(h3),
|
|
41
|
-
[part] ::slotted(h4) {
|
|
42
|
-
line-height: 2.5rem;
|
|
43
|
-
margin-top: 0.25rem !important;
|
|
44
|
-
margin-bottom: 0.25rem !important;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
[part='navbar'][bottom] {
|
|
48
|
-
padding: 0 1em;
|
|
49
|
-
box-shadow: var(--material-shadow-elevation-4dp);
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
@media (min-width: 700px) {
|
|
53
|
-
[part='navbar'] {
|
|
54
|
-
padding: 0.5em 0.75em;
|
|
55
|
-
box-shadow: var(--material-shadow-elevation-4dp);
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
`,
|
|
59
|
-
{ moduleId: 'material-app-layout' }
|
|
60
|
-
);
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
|
|
2
|
-
import { button } from '@vaadin/button/theme/material/vaadin-button-styles.js';
|
|
3
|
-
import '@vaadin/vaadin-material-styles/color.js';
|
|
4
|
-
|
|
5
|
-
const drawerToggle = css`
|
|
6
|
-
:host {
|
|
7
|
-
min-width: 0 !important;
|
|
8
|
-
width: 48px;
|
|
9
|
-
height: 48px;
|
|
10
|
-
padding: 0;
|
|
11
|
-
border-radius: 50%;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
:host(:not([dir='rtl'])) {
|
|
15
|
-
margin-right: 1em;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
:host([dir='rtl']) {
|
|
19
|
-
margin-left: 1em;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
[part='icon'],
|
|
23
|
-
[part='icon']::after,
|
|
24
|
-
[part='icon']::before {
|
|
25
|
-
background-color: currentColor;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
[part='icon'] {
|
|
29
|
-
top: 18px;
|
|
30
|
-
left: 15px;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
[part='icon'],
|
|
34
|
-
[part='icon']::after,
|
|
35
|
-
[part='icon']::before {
|
|
36
|
-
height: 2px;
|
|
37
|
-
width: 18px;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
[part='icon']::after {
|
|
41
|
-
top: 5px;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
[part='icon']::before {
|
|
45
|
-
top: 10px;
|
|
46
|
-
}
|
|
47
|
-
`;
|
|
48
|
-
|
|
49
|
-
registerStyles('vaadin-drawer-toggle', [button, drawerToggle], {
|
|
50
|
-
moduleId: 'material-drawer-toggle'
|
|
51
|
-
});
|