@operato/menu 2.0.0-alpha.146 → 2.0.0-alpha.148

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 (28) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/src/menu-landscape-styles.js +5 -5
  3. package/dist/src/menu-landscape-styles.js.map +1 -1
  4. package/dist/src/menu-portrait-styles.js +35 -30
  5. package/dist/src/menu-portrait-styles.js.map +1 -1
  6. package/dist/src/ox-menu-part.js +1 -1
  7. package/dist/src/ox-menu-part.js.map +1 -1
  8. package/dist/stories/ox-menu-container.js +1 -1
  9. package/dist/stories/ox-menu-container.js.map +1 -1
  10. package/dist/stories/ox-menu-portrait.stories.d.ts +7 -1
  11. package/dist/stories/ox-menu-portrait.stories.js +12 -2
  12. package/dist/stories/ox-menu-portrait.stories.js.map +1 -1
  13. package/dist/tsconfig.tsbuildinfo +1 -1
  14. package/package.json +9 -9
  15. package/src/menu-landscape-styles.ts +5 -5
  16. package/src/menu-portrait-styles.ts +35 -30
  17. package/src/ox-menu-part.ts +1 -1
  18. package/stories/ox-menu-container.ts +1 -1
  19. package/stories/ox-menu-portrait.stories.ts +15 -3
  20. package/themes/dark-hc.css +151 -0
  21. package/themes/dark-mc.css +151 -0
  22. package/themes/dark.css +151 -0
  23. package/themes/light-hc.css +151 -0
  24. package/themes/light-mc.css +151 -0
  25. package/themes/light.css +151 -0
  26. package/themes/md-typescale-styles.css +100 -0
  27. package/themes/spacing.css +43 -0
  28. package/themes/state-color.css +6 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,21 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [2.0.0-alpha.148](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.147...v2.0.0-alpha.148) (2024-05-30)
7
+
8
+
9
+ ### :rocket: New Features
10
+
11
+ * md3 ([55b7496](https://github.com/hatiolab/operato/commit/55b7496ea46a6b65ac6ab71bc1be7c89d1ba91e5))
12
+
13
+
14
+ ### :sparkles: Styling
15
+
16
+ * menu theme ([84c219d](https://github.com/hatiolab/operato/commit/84c219dd69770f57168c70a8f5ee4a189c9f7e4a))
17
+ * menu theme ([9325844](https://github.com/hatiolab/operato/commit/93258447801275e147a518dc81fa4f113b2e7c16))
18
+
19
+
20
+
6
21
  ## [2.0.0-alpha.146](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.145...v2.0.0-alpha.146) (2024-05-29)
7
22
 
8
23
  **Note:** Version bump only for package @operato/menu
package/dist/src/menu-landscape-styles.js CHANGED
@@ -2,7 +2,7 @@ import { css } from 'lit';
2
2
  export const MenuLandscapeStyles = css `
3
3
  :host {
4
4
  overflow-x: auto;
5
- background-color: var(--secondary-text-color);
5
+ background-color: var(--md-sys-color-on-secondary-container);
6
6
  --focus-anchor-color: #e6ffa2;
7
7
  }
8
8
 
@@ -37,7 +37,7 @@ export const MenuLandscapeStyles = css `
37
37
  flex: 1;
38
38
  list-style: none;
39
39
  overflow-y: hidden;
40
- background-color: var(--primary-color);
40
+ background-color: var(--md-sys-color-on-primary-container);
41
41
  margin: 0;
42
42
  padding: 0;
43
43
  border-left: var(--border-dark-color);
@@ -53,7 +53,7 @@ export const MenuLandscapeStyles = css `
53
53
  padding: var(--padding-default) var(--padding-default) var(--padding-narrow) var(--padding-wide);
54
54
  text-decoration: none;
55
55
  font: normal 14px var(--theme-font);
56
- color: var(--theme-white-color);
56
+ color: var(--md-sys-color-surface);
57
57
  text-transform: capitalize;
58
58
 
59
59
  overflow: hidden;
@@ -72,7 +72,7 @@ export const MenuLandscapeStyles = css `
72
72
  top: -1px;
73
73
  width: 5px;
74
74
  height: 5px;
75
- border: 1px solid var(--theme-white-color);
75
+ border: 1px solid var(--md-sys-color-surface);
76
76
  border-radius: 50%;
77
77
  background-color: transparent;
78
78
  margin-right: 3px;
@@ -85,7 +85,7 @@ export const MenuLandscapeStyles = css `
85
85
  }
86
86
 
87
87
  [description] {
88
- background-color: var(--primary-color);
88
+ background-color: var(--md-sys-color-on-primary-container);
89
89
  margin: 0;
90
90
  padding: var(--padding-default) 0;
91
91
  border-left: 1px solid rgba(0, 0, 0, 0.1);
package/dist/src/menu-landscape-styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"menu-landscape-styles.js","sourceRoot":"","sources":["../../src/menu-landscape-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkJrC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const MenuLandscapeStyles = css`\n :host {\n overflow-x: auto;\n background-color: var(--secondary-text-color);\n --focus-anchor-color: #e6ffa2;\n }\n\n :host > div {\n overflow-x: auto;\n }\n\n :host > div > ul {\n display: flex;\n flex-direction: row;\n list-style: none;\n margin: auto;\n padding: 0;\n border: var(--border-dark-color);\n border-width: 0 1px;\n max-width: 1250px;\n }\n\n :host > div > ul > li {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n }\n :host > div > ul > li > a {\n display: none;\n font-weight: bold;\n font-size: var(--fontsize-large);\n }\n\n ul[submenus] {\n flex: 1;\n list-style: none;\n overflow-y: hidden;\n background-color: var(--primary-color);\n margin: 0;\n padding: 0;\n border-left: var(--border-dark-color);\n }\n\n ul[submenus] li {\n min-width: 120px;\n max-width: 180px;\n }\n\n a {\n display: block;\n padding: var(--padding-default) var(--padding-default) var(--padding-narrow) var(--padding-wide);\n text-decoration: none;\n font: normal 14px var(--theme-font);\n color: var(--theme-white-color);\n text-transform: capitalize;\n\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n a:hover {\n font-weight: bold;\n }\n\n ul[submenus] a::before {\n content: '';\n display: inline-block;\n position: relative;\n top: -1px;\n width: 5px;\n height: 5px;\n border: 1px solid var(--theme-white-color);\n border-radius: 50%;\n background-color: transparent;\n margin-right: 3px;\n }\n ul[submenus] a:hover,\n ul[submenus] li[active] a {\n background-color: rgba(var(--secondary-color-rgb), 0.3);\n color: var(--focus-anchor-color);\n font-weight: bold;\n }\n\n [description] {\n background-color: var(--primary-color);\n margin: 0;\n padding: var(--padding-default) 0;\n border-left: 1px solid rgba(0, 0, 0, 0.1);\n color: var(--focus-anchor-color);\n font-size: 11px;\n }\n [description] md-icon {\n background-color: rgba(0, 0, 0, 0.15);\n margin-right: 4px;\n padding: var(--padding-narrow);\n border-radius: 0 5px 5px 0;\n float: left;\n font-size: 26px;\n }\n\n @media only screen and (max-width: 460px) {\n :host {\n min-width: 100vw;\n }\n :host > div {\n display: initial;\n }\n :host > div > ul {\n flex-direction: column;\n }\n a {\n padding: var(--padding-wide);\n font: normal 15px var(--theme-font);\n }\n li[active] ul {\n border-bottom: 2px solid rgba(0, 0, 0, 0.1);\n }\n li li a {\n display: block;\n padding: var(--padding-wide) var(--padding-default) var(--padding-wide) 35px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font: normal 14px var(--theme-font);\n }\n li li[active] a {\n font: bold 14px var(--theme-font);\n }\n :host > div > ul > li > a {\n display: block;\n }\n :host > div > ul > li > a md-icon {\n font-size: 1em;\n position: relative;\n top: 2px;\n }\n [description] {\n display: none;\n }\n ul[submenus] a:hover,\n ul[submenus] li[active] a {\n background-color: rgba(var(--secondary-color-rgb), 0.3);\n }\n }\n`\n"]}
1
+ {"version":3,"file":"menu-landscape-styles.js","sourceRoot":"","sources":["../../src/menu-landscape-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkJrC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const MenuLandscapeStyles = css`\n :host {\n overflow-x: auto;\n background-color: var(--md-sys-color-on-secondary-container);\n --focus-anchor-color: #e6ffa2;\n }\n\n :host > div {\n overflow-x: auto;\n }\n\n :host > div > ul {\n display: flex;\n flex-direction: row;\n list-style: none;\n margin: auto;\n padding: 0;\n border: var(--border-dark-color);\n border-width: 0 1px;\n max-width: 1250px;\n }\n\n :host > div > ul > li {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n }\n :host > div > ul > li > a {\n display: none;\n font-weight: bold;\n font-size: var(--fontsize-large);\n }\n\n ul[submenus] {\n flex: 1;\n list-style: none;\n overflow-y: hidden;\n background-color: var(--md-sys-color-on-primary-container);\n margin: 0;\n padding: 0;\n border-left: var(--border-dark-color);\n }\n\n ul[submenus] li {\n min-width: 120px;\n max-width: 180px;\n }\n\n a {\n display: block;\n padding: var(--padding-default) var(--padding-default) var(--padding-narrow) var(--padding-wide);\n text-decoration: none;\n font: normal 14px var(--theme-font);\n color: var(--md-sys-color-surface);\n text-transform: capitalize;\n\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n a:hover {\n font-weight: bold;\n }\n\n ul[submenus] a::before {\n content: '';\n display: inline-block;\n position: relative;\n top: -1px;\n width: 5px;\n height: 5px;\n border: 1px solid var(--md-sys-color-surface);\n border-radius: 50%;\n background-color: transparent;\n margin-right: 3px;\n }\n ul[submenus] a:hover,\n ul[submenus] li[active] a {\n background-color: rgba(var(--secondary-color-rgb), 0.3);\n color: var(--focus-anchor-color);\n font-weight: bold;\n }\n\n [description] {\n background-color: var(--md-sys-color-on-primary-container);\n margin: 0;\n padding: var(--padding-default) 0;\n border-left: 1px solid rgba(0, 0, 0, 0.1);\n color: var(--focus-anchor-color);\n font-size: 11px;\n }\n [description] md-icon {\n background-color: rgba(0, 0, 0, 0.15);\n margin-right: 4px;\n padding: var(--padding-narrow);\n border-radius: 0 5px 5px 0;\n float: left;\n font-size: 26px;\n }\n\n @media only screen and (max-width: 460px) {\n :host {\n min-width: 100vw;\n }\n :host > div {\n display: initial;\n }\n :host > div > ul {\n flex-direction: column;\n }\n a {\n padding: var(--padding-wide);\n font: normal 15px var(--theme-font);\n }\n li[active] ul {\n border-bottom: 2px solid rgba(0, 0, 0, 0.1);\n }\n li li a {\n display: block;\n padding: var(--padding-wide) var(--padding-default) var(--padding-wide) 35px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font: normal 14px var(--theme-font);\n }\n li li[active] a {\n font: bold 14px var(--theme-font);\n }\n :host > div > ul > li > a {\n display: block;\n }\n :host > div > ul > li > a md-icon {\n font-size: 1em;\n position: relative;\n top: 2px;\n }\n [description] {\n display: none;\n }\n ul[submenus] a:hover,\n ul[submenus] li[active] a {\n background-color: rgba(var(--secondary-color-rgb), 0.3);\n }\n }\n`\n"]}
package/dist/src/menu-portrait-styles.js CHANGED
@@ -5,6 +5,7 @@ export const MenuPortraitStyles = css `
5
5
  overflow-y: auto;
6
6
  flex-direction: column;
7
7
  height: 100%;
8
+ background-color:var(--md-sys-color-on-primary);
8
9
  }
9
10
 
10
11
  :host > ul {
@@ -13,15 +14,15 @@ export const MenuPortraitStyles = css `
13
14
 
14
15
  ul {
15
16
  list-style: none;
16
- margin: 0;
17
- padding: 0;
17
+ margin: var(--spacing-none);
18
+ padding: var(--spacing-none);
18
19
  }
19
20
 
20
21
  [group-label] {
21
- padding: 25px 0 var(--padding-narrow) var(--padding-wide);
22
+ padding: var(--spacing-huge) var(--spacing-none) var(--spacing-small) var(--spacing-large);
22
23
  border-bottom: var(--border-dark-color);
23
- font: bold 12px var(--theme-font);
24
- color: rgba(var(--primary-color-rgb), 0.9);
24
+ font: var(--md-sys-typescale-label-large-weight) 12px var(--theme-font);
25
+ color: var(--md-sys-color-primary);
25
26
  text-transform: uppercase;
26
27
  }
27
28
 
@@ -29,10 +30,11 @@ export const MenuPortraitStyles = css `
29
30
  display: flex;
30
31
  align-items: center;
31
32
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
32
- padding: var(--padding-default) var(--padding-default) var(--padding-default) var(--padding-wide);
33
+ padding: var(--spacing-medium);
34
+ padding-left:var(--spacing-large);
33
35
  text-decoration: none;
34
- font: normal 14px var(--theme-font);
35
- color: var(--secondary-color);
36
+ font: normal var(--md-sys-typescale-label-medium-size) var(--theme-font);
37
+ color: var(--md-sys-color-on-surface-variant);
36
38
  text-transform: capitalize;
37
39
 
38
40
  overflow: hidden;
@@ -41,7 +43,7 @@ export const MenuPortraitStyles = css `
41
43
  }
42
44
 
43
45
  a:hover {
44
- color: var(--primary-color);
46
+ color: var(--md-sys-color-primary);
45
47
  font-weight: bold;
46
48
  }
47
49
 
@@ -50,10 +52,10 @@ export const MenuPortraitStyles = css `
50
52
  }
51
53
 
52
54
  a md-icon {
53
- --md-icon-size: 1em;
54
-
55
- margin-right: var(--margin-narrow);
56
- color: rgba(var(--secondary-color-rgb), 0.7);
55
+ --md-icon-size: var(--icon-size-tiny);
56
+ opacity:.7;
57
+ margin-right: var(--spacing-small);
58
+ color: var(--md-sys-color-primary);
57
59
  }
58
60
 
59
61
  md-icon[filled] {
@@ -61,7 +63,7 @@ export const MenuPortraitStyles = css `
61
63
  }
62
64
 
63
65
  a [submenu-button] {
64
- --md-icon-size: 1em;
66
+ --md-icon-size: var(--icon-size-tiny);
65
67
  max-height: 1em;
66
68
  margin-left: auto;
67
69
  }
@@ -83,27 +85,28 @@ export const MenuPortraitStyles = css `
83
85
  }
84
86
 
85
87
  li[active] > a {
86
- border-left: 3px solid var(--primary-color);
88
+ border-left: 3px solid var(--md-ref-palette-primary50);
87
89
  font-weight: bold;
88
- color: var(--primary-color);
90
+ color: var(--md-ref-palette-primary50);
89
91
  }
90
92
 
91
93
  li li a {
92
- padding: 7px 0 7px 35px;
94
+ padding: var(--spacing-medium);
95
+ padding-left:var(--spacing-huge);
93
96
  font: normal 13px var(--theme-font);
94
- color: var(--secondary-color);
97
+ color: var(--md-sys-color-on-surface-variant);
95
98
  }
96
99
 
97
100
  li li[active] a {
98
- background-color: rgba(var(--primary-color-rgb), 0.15);
99
- font: bold 13px var(--theme-font);
100
- color: var(--primary-color);
101
+ background-color: var(--md-sys-color-primary-container);
102
+ font: var(--md-sys-typescale-label-large-weight) var(--md-sys-typescale-label-small-size) var(--theme-font);
103
+ color: var(--md-sys-color-primary);
101
104
  }
102
105
 
103
106
  li > ul {
104
107
  overflow-y: hidden;
105
108
  max-height: 0;
106
- background-color: #f6f6f6;
109
+ background-color: var(--md-sys-color-surface-container-low);
107
110
 
108
111
  transition-property: all;
109
112
  transition-duration: 0.7s;
@@ -123,10 +126,11 @@ export const MenuPortraitStyles = css `
123
126
 
124
127
  a [badge] {
125
128
  margin-left: auto;
126
- background-color: var(--primary-background-color);
127
- color: white;
128
- border-radius: 999em;
129
- padding: 0px 6px;
129
+ background-color: var(--md-sys-color-primary);
130
+ border-radius: var(--md-sys-shape-corner-small);
131
+ padding: 0 var(--spacing-small);
132
+ color: var(--md-sys-color-on-primary);
133
+ font-size:.9em;
130
134
  }
131
135
 
132
136
  @media only screen and (max-width: 460px) {
@@ -135,21 +139,22 @@ export const MenuPortraitStyles = css `
135
139
  }
136
140
 
137
141
  a {
138
- padding: var(--padding-wide);
142
+ padding: var(--spacing-large);
139
143
  font: normal 15px var(--theme-font);
140
144
  }
141
145
 
142
146
  li li a {
143
147
  display: block;
144
- padding: var(--padding-wide) var(--padding-default) var(--padding-wide) 35px;
148
+ padding: var(--spacing-medium);
149
+ padding-left:var(--spacing-huge);
145
150
  overflow: hidden;
146
151
  text-overflow: ellipsis;
147
152
  white-space: nowrap;
148
- font: normal 14px var(--theme-font);
153
+ font: normal var(--md-sys-typescale-label-medium-size) var(--theme-font);
149
154
  }
150
155
 
151
156
  li li[active] a {
152
- font: bold 14px var(--theme-font);
157
+ font: var(--md-sys-typescale-label-large-weight) var(--md-sys-typescale-label-medium-size) var(--theme-font);
153
158
  }
154
159
  }
155
160
  `;
package/dist/src/menu-portrait-styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"menu-portrait-styles.js","sourceRoot":"","sources":["../../src/menu-portrait-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyJpC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const MenuPortraitStyles = css`\n :host {\n display: flex;\n overflow-y: auto;\n flex-direction: column;\n height: 100%;\n }\n\n :host > ul {\n margin-block-end: 1.5em;\n }\n\n ul {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n [group-label] {\n padding: 25px 0 var(--padding-narrow) var(--padding-wide);\n border-bottom: var(--border-dark-color);\n font: bold 12px var(--theme-font);\n color: rgba(var(--primary-color-rgb), 0.9);\n text-transform: uppercase;\n }\n\n a {\n display: flex;\n align-items: center;\n border-bottom: 1px solid rgba(0, 0, 0, 0.07);\n padding: var(--padding-default) var(--padding-default) var(--padding-default) var(--padding-wide);\n text-decoration: none;\n font: normal 14px var(--theme-font);\n color: var(--secondary-color);\n text-transform: capitalize;\n\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n a:hover {\n color: var(--primary-color);\n font-weight: bold;\n }\n\n a * {\n vertical-align: middle;\n }\n\n a md-icon {\n --md-icon-size: 1em;\n\n margin-right: var(--margin-narrow);\n color: rgba(var(--secondary-color-rgb), 0.7);\n }\n\n md-icon[filled] {\n font-variation-settings: 'FILL' 1;\n }\n\n a [submenu-button] {\n --md-icon-size: 1em;\n max-height: 1em;\n margin-left: auto;\n }\n\n a [submenu-button]::before {\n content: 'chevron_right';\n }\n\n a > span {\n flex: 1;\n display: block;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n li[active] > a [submenu-button]::before {\n content: 'expand_more';\n }\n\n li[active] > a {\n border-left: 3px solid var(--primary-color);\n font-weight: bold;\n color: var(--primary-color);\n }\n\n li li a {\n padding: 7px 0 7px 35px;\n font: normal 13px var(--theme-font);\n color: var(--secondary-color);\n }\n\n li li[active] a {\n background-color: rgba(var(--primary-color-rgb), 0.15);\n font: bold 13px var(--theme-font);\n color: var(--primary-color);\n }\n\n li > ul {\n overflow-y: hidden;\n max-height: 0;\n background-color: #f6f6f6;\n\n transition-property: all;\n transition-duration: 0.7s;\n }\n\n li[active] > ul {\n max-height: 500px;\n }\n\n li[active] > ul[settled] {\n overflow-y: auto;\n }\n\n li li a::before {\n margin-right: var(--margin-narrow);\n }\n\n a [badge] {\n margin-left: auto;\n background-color: var(--primary-background-color);\n color: white;\n border-radius: 999em;\n padding: 0px 6px;\n }\n\n @media only screen and (max-width: 460px) {\n :host {\n min-width: 100vw;\n }\n\n a {\n padding: var(--padding-wide);\n font: normal 15px var(--theme-font);\n }\n\n li li a {\n display: block;\n padding: var(--padding-wide) var(--padding-default) var(--padding-wide) 35px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font: normal 14px var(--theme-font);\n }\n\n li li[active] a {\n font: bold 14px var(--theme-font);\n }\n }\n`\n"]}
1
+ {"version":3,"file":"menu-portrait-styles.js","sourceRoot":"","sources":["../../src/menu-portrait-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8JpC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const MenuPortraitStyles = css`\n :host {\n display: flex;\n overflow-y: auto;\n flex-direction: column;\n height: 100%;\n background-color:var(--md-sys-color-on-primary);\n }\n\n :host > ul {\n margin-block-end: 1.5em;\n }\n\n ul {\n list-style: none;\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n }\n\n [group-label] {\n padding: var(--spacing-huge) var(--spacing-none) var(--spacing-small) var(--spacing-large);\n border-bottom: var(--border-dark-color);\n font: var(--md-sys-typescale-label-large-weight) 12px var(--theme-font);\n color: var(--md-sys-color-primary);\n text-transform: uppercase;\n }\n\n a {\n display: flex;\n align-items: center;\n border-bottom: 1px solid rgba(0, 0, 0, 0.07);\n padding: var(--spacing-medium);\n padding-left:var(--spacing-large);\n text-decoration: none;\n font: normal var(--md-sys-typescale-label-medium-size) var(--theme-font);\n color: var(--md-sys-color-on-surface-variant);\n text-transform: capitalize;\n\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n a:hover {\n color: var(--md-sys-color-primary);\n font-weight: bold;\n }\n\n a * {\n vertical-align: middle;\n }\n\n a md-icon {\n --md-icon-size: var(--icon-size-tiny);\n opacity:.7;\n margin-right: var(--spacing-small);\n color: var(--md-sys-color-primary);\n }\n\n md-icon[filled] {\n font-variation-settings: 'FILL' 1;\n }\n\n a [submenu-button] {\n --md-icon-size: var(--icon-size-tiny);\n max-height: 1em;\n margin-left: auto;\n }\n\n a [submenu-button]::before {\n content: 'chevron_right';\n }\n\n a > span {\n flex: 1;\n display: block;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n li[active] > a [submenu-button]::before {\n content: 'expand_more';\n }\n\n li[active] > a {\n border-left: 3px solid var(--md-ref-palette-primary50);\n font-weight: bold;\n color: var(--md-ref-palette-primary50);\n }\n\n li li a {\n padding: var(--spacing-medium);\n padding-left:var(--spacing-huge);\n font: normal 13px var(--theme-font);\n color: var(--md-sys-color-on-surface-variant);\n }\n\n li li[active] a {\n background-color: var(--md-sys-color-primary-container);\n font: var(--md-sys-typescale-label-large-weight) var(--md-sys-typescale-label-small-size) var(--theme-font);\n color: var(--md-sys-color-primary);\n }\n\n li > ul {\n overflow-y: hidden;\n max-height: 0;\n background-color: var(--md-sys-color-surface-container-low);\n\n transition-property: all;\n transition-duration: 0.7s;\n }\n\n li[active] > ul {\n max-height: 500px;\n }\n\n li[active] > ul[settled] {\n overflow-y: auto;\n }\n\n li li a::before {\n margin-right: var(--margin-narrow);\n }\n\n a [badge] {\n margin-left: auto;\n background-color: var(--md-sys-color-primary);\n border-radius: var(--md-sys-shape-corner-small);\n padding: 0 var(--spacing-small);\n color: var(--md-sys-color-on-primary);\n font-size:.9em;\n }\n\n @media only screen and (max-width: 460px) {\n :host {\n min-width: 100vw;\n }\n\n a {\n padding: var(--spacing-large);\n font: normal 15px var(--theme-font);\n }\n\n li li a {\n display: block;\n padding: var(--spacing-medium);\n padding-left:var(--spacing-huge);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font: normal var(--md-sys-typescale-label-medium-size) var(--theme-font);\n }\n\n li li[active] a {\n font: var(--md-sys-typescale-label-large-weight) var(--md-sys-typescale-label-medium-size) var(--theme-font);\n }\n }\n`\n"]}
package/dist/src/ox-menu-part.js CHANGED
@@ -88,7 +88,7 @@ OxMenuPart.styles = [
88
88
  flex-direction: column;
89
89
  height: 100%;
90
90
  min-width: 200px;
91
- background-color: var(--theme-white-color);
91
+ background-color: var(--md-sys-color-surface);
92
92
  }
93
93
 
94
94
  :host([landscape]) {
package/dist/src/ox-menu-part.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-menu-part.js","sourceRoot":"","sources":["../../src/ox-menu-part.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport './ox-menu-portrait'\nimport './ox-menu-landscape'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers'\n\nimport { store } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { Menu } from './types'\n\nfunction isActiveMenu(menu: Menu, path: string) {\n return (\n menu.path?.split('?')[0] === path ||\n (menu.active && typeof menu.active === 'function' && menu.active.call(menu, { path }))\n )\n}\n\n@customElement('ox-menu-part')\nexport class OxMenuPart extends connect(store)(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n overflow-y: auto;\n flex-direction: column;\n height: 100%;\n min-width: 200px;\n background-color: var(--theme-white-color);\n }\n\n :host([landscape]) {\n overflow-x: auto;\n flex-direction: row;\n width: 100%;\n min-height: 20px;\n }\n\n ox-menu-portrait,\n ox-menu-landscape {\n flex: 1;\n }\n `\n ]\n\n @property({ type: String }) page!: string\n @property({ type: String }) resourceId?: string\n @property({ type: Array }) menus?: Menu[]\n @property({ type: String }) orientation?: 'landscape' | 'portrait'\n\n @state() slotTemplate: any\n @state() _activeTopLevel?: Menu\n @state() _activeMenu?: Menu\n @state() _path?: string\n\n render() {\n return html`\n <slot name=\"head\"></slot>\n ${this.orientation !== 'landscape'\n ? html`<ox-menu-portrait\n .menus=${this.menus}\n .activeTopLevel=${this._activeTopLevel}\n .activeMenu=${this._activeMenu}\n .path=${this._path}\n ></ox-menu-portrait>`\n : html`<ox-menu-landscape\n .menus=${this.menus}\n .activeTopLevel=${this._activeTopLevel}\n .activeMenu=${this._activeMenu}\n .path=${this._path}\n ></ox-menu-landscape>`}\n <slot name=\"tail\"></slot>\n `\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('active-toplevel', (e: Event) => {\n e.stopPropagation()\n e.preventDefault()\n\n this._activeTopLevel = (e as CustomEvent).detail\n })\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('menus') || changes.has('page') || changes.has('resourceId')) {\n this.findActivePage()\n }\n\n if (changes.has('orientation')) {\n if (this.orientation == 'portrait') {\n this.removeAttribute('landscape')\n } else {\n this.setAttribute('landscape', '')\n }\n }\n\n if (changes.has('slotTemplate')) {\n this.replaceChild(this.slotTemplate, this.renderRoot)\n }\n }\n\n stateChanged(state: any): void {\n this.page = state.route.page\n this.resourceId = state.route.resourceId\n this.menus = state.liteMenu.menus || []\n this.slotTemplate = state.liteMenu.slotTemplate\n }\n\n private findActivePage() {\n var path = this.resourceId ? `${this.page}/${this.resourceId}` : this.page\n var menus = this.menus || []\n var activeMenu\n\n this._activeTopLevel = menus.find(menu => {\n if (isActiveMenu(menu, path)) {\n activeMenu = menu\n return true\n } else if (menu.menus) {\n activeMenu = menu.menus.find(menu => isActiveMenu(menu, path))\n return !!activeMenu\n }\n })\n\n this._path = path\n this._activeMenu = activeMenu || this._activeTopLevel\n }\n}\n"]}
1
+ {"version":3,"file":"ox-menu-part.js","sourceRoot":"","sources":["../../src/ox-menu-part.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport './ox-menu-portrait'\nimport './ox-menu-landscape'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers'\n\nimport { store } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { Menu } from './types'\n\nfunction isActiveMenu(menu: Menu, path: string) {\n return (\n menu.path?.split('?')[0] === path ||\n (menu.active && typeof menu.active === 'function' && menu.active.call(menu, { path }))\n )\n}\n\n@customElement('ox-menu-part')\nexport class OxMenuPart extends connect(store)(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n overflow-y: auto;\n flex-direction: column;\n height: 100%;\n min-width: 200px;\n background-color: var(--md-sys-color-surface);\n }\n\n :host([landscape]) {\n overflow-x: auto;\n flex-direction: row;\n width: 100%;\n min-height: 20px;\n }\n\n ox-menu-portrait,\n ox-menu-landscape {\n flex: 1;\n }\n `\n ]\n\n @property({ type: String }) page!: string\n @property({ type: String }) resourceId?: string\n @property({ type: Array }) menus?: Menu[]\n @property({ type: String }) orientation?: 'landscape' | 'portrait'\n\n @state() slotTemplate: any\n @state() _activeTopLevel?: Menu\n @state() _activeMenu?: Menu\n @state() _path?: string\n\n render() {\n return html`\n <slot name=\"head\"></slot>\n ${this.orientation !== 'landscape'\n ? html`<ox-menu-portrait\n .menus=${this.menus}\n .activeTopLevel=${this._activeTopLevel}\n .activeMenu=${this._activeMenu}\n .path=${this._path}\n ></ox-menu-portrait>`\n : html`<ox-menu-landscape\n .menus=${this.menus}\n .activeTopLevel=${this._activeTopLevel}\n .activeMenu=${this._activeMenu}\n .path=${this._path}\n ></ox-menu-landscape>`}\n <slot name=\"tail\"></slot>\n `\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('active-toplevel', (e: Event) => {\n e.stopPropagation()\n e.preventDefault()\n\n this._activeTopLevel = (e as CustomEvent).detail\n })\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('menus') || changes.has('page') || changes.has('resourceId')) {\n this.findActivePage()\n }\n\n if (changes.has('orientation')) {\n if (this.orientation == 'portrait') {\n this.removeAttribute('landscape')\n } else {\n this.setAttribute('landscape', '')\n }\n }\n\n if (changes.has('slotTemplate')) {\n this.replaceChild(this.slotTemplate, this.renderRoot)\n }\n }\n\n stateChanged(state: any): void {\n this.page = state.route.page\n this.resourceId = state.route.resourceId\n this.menus = state.liteMenu.menus || []\n this.slotTemplate = state.liteMenu.slotTemplate\n }\n\n private findActivePage() {\n var path = this.resourceId ? `${this.page}/${this.resourceId}` : this.page\n var menus = this.menus || []\n var activeMenu\n\n this._activeTopLevel = menus.find(menu => {\n if (isActiveMenu(menu, path)) {\n activeMenu = menu\n return true\n } else if (menu.menus) {\n activeMenu = menu.menus.find(menu => isActiveMenu(menu, path))\n return !!activeMenu\n }\n })\n\n this._path = path\n this._activeMenu = activeMenu || this._activeTopLevel\n }\n}\n"]}
package/dist/stories/ox-menu-container.js CHANGED
@@ -71,7 +71,7 @@ OxMenuContainer.styles = [
71
71
  display: flex;
72
72
  overflow-y: auto;
73
73
  flex-direction: column;
74
- background-color: var(--theme-white-color);
74
+ background-color: var(--md-sys-color-surface);
75
75
  }
76
76
  `
77
77
  ];
package/dist/stories/ox-menu-container.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-menu-container.js","sourceRoot":"","sources":["../../stories/ox-menu-container.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../src/ox-menu-portrait'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { Menu } from '../src/types'\n\nfunction isActiveMenu(menu: Menu, path?: string) {\n return (\n menu.path?.split('?')[0] === path ||\n (menu.active && typeof menu.active === 'function' && menu.active.call(menu, { path }))\n )\n}\n\n@customElement('ox-menu-container')\nexport class OxMenuContainer extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n overflow-y: auto;\n flex-direction: column;\n background-color: var(--theme-white-color);\n }\n `\n ]\n\n @property({ type: Array }) menus?: Menu[]\n\n @state() activeMenu?: Menu\n @state() activeTopLevel?: Menu\n @state() path?: string\n\n render() {\n return html`\n <div\n @click=${(e: MouseEvent) => {\n if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey) {\n return\n }\n const anchor: HTMLAnchorElement = e.composedPath().filter((n: any) => n.tagName === 'A')[0] as any\n if (!anchor) {\n return\n }\n const href = anchor.href\n e.preventDefault()\n\n var [_, path, ...others] = new URL(href).pathname.split('/')\n this.path = path\n }}\n >\n <ox-menu-portrait\n .menus=${this.menus}\n .activeTopLevel=${this.activeTopLevel}\n .activeMenu=${this.activeMenu}\n .path=${this.path || ''}\n ></ox-menu-portrait>\n </div>\n `\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('active-toplevel', (e: Event) => {\n e.stopPropagation()\n e.preventDefault()\n\n this.activeTopLevel = (e as CustomEvent).detail\n })\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('menus') || changes.has('path')) {\n this.findActivePage()\n }\n }\n\n private findActivePage() {\n var menus = this.menus || []\n var activeMenu\n\n this.activeTopLevel = menus.find(menu => {\n if (isActiveMenu(menu, this.path)) {\n activeMenu = menu\n return true\n } else if (menu.menus) {\n activeMenu = menu.menus.find((menu: Menu) => isActiveMenu(menu, this.path))\n return !!activeMenu\n }\n })\n\n this.activeMenu = activeMenu || this.activeTopLevel\n }\n}\n"]}
1
+ {"version":3,"file":"ox-menu-container.js","sourceRoot":"","sources":["../../stories/ox-menu-container.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../src/ox-menu-portrait'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { Menu } from '../src/types'\n\nfunction isActiveMenu(menu: Menu, path?: string) {\n return (\n menu.path?.split('?')[0] === path ||\n (menu.active && typeof menu.active === 'function' && menu.active.call(menu, { path }))\n )\n}\n\n@customElement('ox-menu-container')\nexport class OxMenuContainer extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n overflow-y: auto;\n flex-direction: column;\n background-color: var(--md-sys-color-surface);\n }\n `\n ]\n\n @property({ type: Array }) menus?: Menu[]\n\n @state() activeMenu?: Menu\n @state() activeTopLevel?: Menu\n @state() path?: string\n\n render() {\n return html`\n <div\n @click=${(e: MouseEvent) => {\n if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey) {\n return\n }\n const anchor: HTMLAnchorElement = e.composedPath().filter((n: any) => n.tagName === 'A')[0] as any\n if (!anchor) {\n return\n }\n const href = anchor.href\n e.preventDefault()\n\n var [_, path, ...others] = new URL(href).pathname.split('/')\n this.path = path\n }}\n >\n <ox-menu-portrait\n .menus=${this.menus}\n .activeTopLevel=${this.activeTopLevel}\n .activeMenu=${this.activeMenu}\n .path=${this.path || ''}\n ></ox-menu-portrait>\n </div>\n `\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('active-toplevel', (e: Event) => {\n e.stopPropagation()\n e.preventDefault()\n\n this.activeTopLevel = (e as CustomEvent).detail\n })\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('menus') || changes.has('path')) {\n this.findActivePage()\n }\n }\n\n private findActivePage() {\n var menus = this.menus || []\n var activeMenu\n\n this.activeTopLevel = menus.find(menu => {\n if (isActiveMenu(menu, this.path)) {\n activeMenu = menu\n return true\n } else if (menu.menus) {\n activeMenu = menu.menus.find((menu: Menu) => isActiveMenu(menu, this.path))\n return !!activeMenu\n }\n })\n\n this.activeMenu = activeMenu || this.activeTopLevel\n }\n}\n"]}
package/dist/stories/ox-menu-portrait.stories.d.ts CHANGED
@@ -4,7 +4,12 @@ import './ox-menu-container';
4
4
  declare const _default: {
5
5
  title: string;
6
6
  component: string;
7
- argTypes: {};
7
+ argTypes: {
8
+ theme: {
9
+ control: string;
10
+ options: string[];
11
+ };
12
+ };
8
13
  };
9
14
  export default _default;
10
15
  interface Story<T> {
@@ -13,5 +18,6 @@ interface Story<T> {
13
18
  argTypes?: Record<string, unknown>;
14
19
  }
15
20
  interface ArgTypes {
21
+ theme: 'light' | 'dark';
16
22
  }
17
23
  export declare const Regular: Story<ArgTypes>;
package/dist/stories/ox-menu-portrait.stories.js CHANGED
@@ -5,10 +5,16 @@ import './ox-menu-container';
5
5
  export default {
6
6
  title: 'OxMenuPortrait',
7
7
  component: 'ox-menu-portrait',
8
- argTypes: {}
8
+ argTypes: {
9
+ theme: { control: 'select', options: ['light', 'dark'] }
10
+ }
9
11
  };
10
- const Template = ({}) => html `
12
+ const Template = ({ theme = 'light' }) => html `
11
13
  <link href="/themes/app-theme.css" rel="stylesheet" />
14
+
15
+ <link href="/themes/light.css" rel="stylesheet" />
16
+ <link href="/themes/dark.css" rel="stylesheet" />
17
+ <link href="/themes/spacing.css" rel="stylesheet" />
12
18
  <link
13
19
  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
14
20
  rel="stylesheet"
@@ -22,6 +28,10 @@ const Template = ({}) => html `
22
28
  rel="stylesheet"
23
29
  />
24
30
 
31
+
32
+ <script>
33
+ document.body.classList.add('${theme}')
34
+ </script>
25
35
  <style>
26
36
  body {
27
37
  background-color: cyan;
package/dist/stories/ox-menu-portrait.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-menu-portrait.stories.js","sourceRoot":"","sources":["../../stories/ox-menu-portrait.stories.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AACpC,OAAO,qBAAqB,CAAA;AAE5B,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ,EAAE,EAAE;CACb,CAAA;AAUD,MAAM,QAAQ,GAAoB,CAAC,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAgCxB,KAAK;;CAEpC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA","sourcesContent":["import '../src/ox-menu-portrait'\n\nimport { html, TemplateResult } from 'lit'\nimport { menus } from './test-menus'\nimport './ox-menu-container'\n\nexport default {\n title: 'OxMenuPortrait',\n component: 'ox-menu-portrait',\n argTypes: {}\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {}\n\nconst Template: Story<ArgTypes> = ({}: ArgTypes) => html`\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n body {\n background-color: cyan;\n }\n\n .container {\n display: flex;\n width: 260px;\n height: 500px;\n }\n\n ox-menu-container {\n flex: 1;\n }\n </style>\n\n <div class=\"container\">\n <ox-menu-container .menus=${menus}></ox-menu-container>\n </div>\n`\n\nexport const Regular = Template.bind({})\n"]}
1
+ {"version":3,"file":"ox-menu-portrait.stories.js","sourceRoot":"","sources":["../../stories/ox-menu-portrait.stories.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AACpC,OAAO,qBAAqB,CAAA;AAE5B,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KAAC;CAC5D,CAAA;AAaD,MAAM,QAAQ,GAAoB,CAAC,EAAC,KAAK,GAAG,OAAO,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;mCAqBrC,KAAK;;;;;;;;;;;;;;;;;;;gCAmBR,KAAK;;CAEpC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA","sourcesContent":["import '../src/ox-menu-portrait'\n\nimport { html, TemplateResult } from 'lit'\nimport { menus } from './test-menus'\nimport './ox-menu-container'\n\nexport default {\n title: 'OxMenuPortrait',\n component: 'ox-menu-portrait',\n argTypes: {\n theme: { control: 'select', options: ['light', 'dark'] }}\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n theme: 'light' | 'dark'\n\n}\n\nconst Template: Story<ArgTypes> = ({theme = 'light' }: ArgTypes) => html`\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n\n <script>\n document.body.classList.add('${theme}')\n </script>\n <style>\n body {\n background-color: cyan;\n }\n\n .container {\n display: flex;\n width: 260px;\n height: 500px;\n }\n\n ox-menu-container {\n flex: 1;\n }\n </style>\n\n <div class=\"container\">\n <ox-menu-container .menus=${menus}></ox-menu-container>\n </div>\n`\n\nexport const Regular = Template.bind({})\n"]}