@vaadin/app-layout 24.4.0-alpha1 → 24.4.0-alpha2

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.
Files changed (10) hide show
  1. package/package.json +10 -9
  2. package/src/detect-ios-navbar.js +1 -1
  3. package/src/vaadin-app-layout.d.ts +1 -1
  4. package/src/vaadin-app-layout.js +1 -1
  5. package/src/vaadin-drawer-toggle-styles.d.ts +8 -0
  6. package/src/vaadin-drawer-toggle-styles.js +43 -0
  7. package/src/vaadin-drawer-toggle.d.ts +5 -3
  8. package/src/vaadin-drawer-toggle.js +13 -51
  9. package/web-types.json +1 -1
  10. package/web-types.lit.json +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/app-layout",
3
- "version": "24.4.0-alpha1",
3
+ "version": "24.4.0-alpha2",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -36,16 +36,17 @@
36
36
  ],
37
37
  "dependencies": {
38
38
  "@polymer/polymer": "^3.0.0",
39
- "@vaadin/a11y-base": "24.4.0-alpha1",
40
- "@vaadin/button": "24.4.0-alpha1",
41
- "@vaadin/component-base": "24.4.0-alpha1",
42
- "@vaadin/vaadin-lumo-styles": "24.4.0-alpha1",
43
- "@vaadin/vaadin-material-styles": "24.4.0-alpha1",
44
- "@vaadin/vaadin-themable-mixin": "24.4.0-alpha1"
39
+ "@vaadin/a11y-base": "24.4.0-alpha2",
40
+ "@vaadin/button": "24.4.0-alpha2",
41
+ "@vaadin/component-base": "24.4.0-alpha2",
42
+ "@vaadin/vaadin-lumo-styles": "24.4.0-alpha2",
43
+ "@vaadin/vaadin-material-styles": "24.4.0-alpha2",
44
+ "@vaadin/vaadin-themable-mixin": "24.4.0-alpha2",
45
+ "lit": "^3.0.0"
45
46
  },
46
47
  "devDependencies": {
47
48
  "@esm-bundle/chai": "^4.3.4",
48
- "@vaadin/tabs": "24.4.0-alpha1",
49
+ "@vaadin/tabs": "24.4.0-alpha2",
49
50
  "@vaadin/testing-helpers": "^0.6.0",
50
51
  "sinon": "^13.0.2"
51
52
  },
@@ -53,5 +54,5 @@
53
54
  "web-types.json",
54
55
  "web-types.lit.json"
55
56
  ],
56
- "gitHead": "3e2ed41c99d618ff7def2734fd863c21c85775a3"
57
+ "gitHead": "f303ead58d27e15d81a55db0559611fb77c0e421"
57
58
  }
package/src/detect-ios-navbar.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2018 - 2023 Vaadin Ltd.
3
+ * Copyright (c) 2018 - 2024 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
package/src/vaadin-app-layout.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2018 - 2023 Vaadin Ltd.
3
+ * Copyright (c) 2018 - 2024 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
package/src/vaadin-app-layout.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2018 - 2023 Vaadin Ltd.
3
+ * Copyright (c) 2018 - 2024 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import './detect-ios-navbar.js';
package/src/vaadin-drawer-toggle-styles.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ /**
2
+ * @license
3
+ * Copyright (c) 2018 - 2024 Vaadin Ltd.
4
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
6
+ import type { CSSResult } from 'lit';
7
+
8
+ export const drawerToggle: CSSResult;
package/src/vaadin-drawer-toggle-styles.js ADDED
@@ -0,0 +1,43 @@
1
+ /**
2
+ * @license
3
+ * Copyright (c) 2018 - 2024 Vaadin Ltd.
4
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
6
+ import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
7
+
8
+ export const drawerToggle = css`
9
+ :host {
10
+ display: inline-flex;
11
+ align-items: center;
12
+ justify-content: center;
13
+ cursor: default;
14
+ position: relative;
15
+ outline: none;
16
+ height: 24px;
17
+ width: 24px;
18
+ padding: 4px;
19
+ }
20
+
21
+ [part='icon'],
22
+ [part='icon']::after,
23
+ [part='icon']::before {
24
+ position: absolute;
25
+ top: 8px;
26
+ height: 3px;
27
+ width: 24px;
28
+ background-color: #000;
29
+ }
30
+
31
+ [part='icon']::after,
32
+ [part='icon']::before {
33
+ content: '';
34
+ }
35
+
36
+ [part='icon']::after {
37
+ top: 6px;
38
+ }
39
+
40
+ [part='icon']::before {
41
+ top: 12px;
42
+ }
43
+ `;
package/src/vaadin-drawer-toggle.d.ts CHANGED
@@ -1,9 +1,11 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2018 - 2023 Vaadin Ltd.
3
+ * Copyright (c) 2018 - 2024 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
- import { Button } from '@vaadin/button/src/vaadin-button.js';
6
+ import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
7
+ import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
8
+ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
7
9
 
8
10
  /**
9
11
  * The Drawer Toggle component controls the drawer in App Layout component.
@@ -14,7 +16,7 @@ import { Button } from '@vaadin/button/src/vaadin-button.js';
14
16
  * </vaadin-app-layout>
15
17
  * ```
16
18
  */
17
- declare class DrawerToggle extends Button {
19
+ declare class DrawerToggle extends ButtonMixin(DirMixin(ThemableMixin(HTMLElement))) {
18
20
  ariaLabel: string;
19
21
  }
20
22
 
package/src/vaadin-drawer-toggle.js CHANGED
@@ -1,58 +1,18 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2018 - 2023 Vaadin Ltd.
3
+ * Copyright (c) 2018 - 2024 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
- import { html } from '@polymer/polymer/lib/utils/html-tag.js';
7
- import { Button } from '@vaadin/button/src/vaadin-button.js';
6
+ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
7
+ import { buttonStyles } from '@vaadin/button/src/vaadin-button-base.js';
8
+ import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
8
9
  import { defineCustomElement } from '@vaadin/component-base/src/define.js';
10
+ import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
9
11
  import { isEmptyTextNode } from '@vaadin/component-base/src/dom-utils.js';
10
- import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
12
+ import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
13
+ import { drawerToggle } from './vaadin-drawer-toggle-styles.js';
11
14
 
12
- /**
13
- * Use registerStyles instead of the `<style>` tag to make sure
14
- * that this CSS will override core styles of `vaadin-button`.
15
- */
16
- registerStyles(
17
- 'vaadin-drawer-toggle',
18
- css`
19
- :host {
20
- display: inline-flex;
21
- align-items: center;
22
- justify-content: center;
23
- cursor: default;
24
- position: relative;
25
- outline: none;
26
- height: 24px;
27
- width: 24px;
28
- padding: 4px;
29
- }
30
-
31
- [part='icon'],
32
- [part='icon']::after,
33
- [part='icon']::before {
34
- position: absolute;
35
- top: 8px;
36
- height: 3px;
37
- width: 24px;
38
- background-color: #000;
39
- }
40
-
41
- [part='icon']::after,
42
- [part='icon']::before {
43
- content: '';
44
- }
45
-
46
- [part='icon']::after {
47
- top: 6px;
48
- }
49
-
50
- [part='icon']::before {
51
- top: 12px;
52
- }
53
- `,
54
- { moduleId: 'vaadin-drawer-toggle-styles' },
55
- );
15
+ registerStyles('vaadin-drawer-toggle', [buttonStyles, drawerToggle], { moduleId: 'vaadin-drawer-toggle-styles' });
56
16
 
57
17
  /**
58
18
  * The Drawer Toggle component controls the drawer in App Layout component.
@@ -64,16 +24,18 @@ registerStyles(
64
24
  * ```
65
25
  *
66
26
  * @customElement
67
- * @extends Button
27
+ * @extends HTMLElement
28
+ * @mixes ButtonMixin
29
+ * @mixes DirMixin
30
+ * @mixes ThemableMixin
68
31
  */
69
- class DrawerToggle extends Button {
32
+ class DrawerToggle extends ButtonMixin(DirMixin(ThemableMixin(PolymerElement))) {
70
33
  static get template() {
71
34
  return html`
72
35
  <slot id="slot">
73
36
  <div part="icon"></div>
74
37
  </slot>
75
38
  <div part="icon" hidden$="[[!_showFallbackIcon]]"></div>
76
- <slot name="tooltip"></slot>
77
39
  `;
78
40
  }
79
41
 
package/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/app-layout",
4
- "version": "24.4.0-alpha1",
4
+ "version": "24.4.0-alpha2",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
package/web-types.lit.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/app-layout",
4
- "version": "24.4.0-alpha1",
4
+ "version": "24.4.0-alpha2",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {