@operato/menu 2.0.0-alpha.55

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 (56) hide show
  1. package/.editorconfig +29 -0
  2. package/.storybook/main.js +3 -0
  3. package/.storybook/server.mjs +8 -0
  4. package/CHANGELOG.md +12 -0
  5. package/README.md +75 -0
  6. package/demo/index.html +40 -0
  7. package/dist/src/index.d.ts +0 -0
  8. package/dist/src/index.js +2 -0
  9. package/dist/src/index.js.map +1 -0
  10. package/dist/src/menu-landscape-styles.d.ts +1 -0
  11. package/dist/src/menu-landscape-styles.js +149 -0
  12. package/dist/src/menu-landscape-styles.js.map +1 -0
  13. package/dist/src/menu-portrait-styles.d.ts +1 -0
  14. package/dist/src/menu-portrait-styles.js +147 -0
  15. package/dist/src/menu-portrait-styles.js.map +1 -0
  16. package/dist/src/ox-menu-landscape.d.ts +21 -0
  17. package/dist/src/ox-menu-landscape.js +99 -0
  18. package/dist/src/ox-menu-landscape.js.map +1 -0
  19. package/dist/src/ox-menu-part.d.ts +29 -0
  20. package/dist/src/ox-menu-part.js +135 -0
  21. package/dist/src/ox-menu-part.js.map +1 -0
  22. package/dist/src/ox-menu-portrait.d.ts +13 -0
  23. package/dist/src/ox-menu-portrait.js +85 -0
  24. package/dist/src/ox-menu-portrait.js.map +1 -0
  25. package/dist/src/ox-top-menu-bar.d.ts +23 -0
  26. package/dist/src/ox-top-menu-bar.js +145 -0
  27. package/dist/src/ox-top-menu-bar.js.map +1 -0
  28. package/dist/src/types.d.ts +10 -0
  29. package/dist/src/types.js +2 -0
  30. package/dist/src/types.js.map +1 -0
  31. package/dist/stories/ox-menu-container.d.ts +15 -0
  32. package/dist/stories/ox-menu-container.js +94 -0
  33. package/dist/stories/ox-menu-container.js.map +1 -0
  34. package/dist/stories/ox-menu-portrait.stories.d.ts +17 -0
  35. package/dist/stories/ox-menu-portrait.stories.js +35 -0
  36. package/dist/stories/ox-menu-portrait.stories.js.map +1 -0
  37. package/dist/stories/test-menus.d.ts +2 -0
  38. package/dist/stories/test-menus.js +179 -0
  39. package/dist/stories/test-menus.js.map +1 -0
  40. package/dist/tsconfig.tsbuildinfo +1 -0
  41. package/package.json +100 -0
  42. package/src/index.ts +0 -0
  43. package/src/menu-landscape-styles.ts +149 -0
  44. package/src/menu-portrait-styles.ts +147 -0
  45. package/src/ox-menu-landscape.ts +105 -0
  46. package/src/ox-menu-part.ts +131 -0
  47. package/src/ox-menu-portrait.ts +87 -0
  48. package/src/ox-top-menu-bar.ts +147 -0
  49. package/src/types.ts +10 -0
  50. package/stories/ox-menu-container.ts +97 -0
  51. package/stories/ox-menu-portrait.stories.ts +46 -0
  52. package/stories/test-menus.ts +180 -0
  53. package/themes/app-theme.css +145 -0
  54. package/tsconfig.json +23 -0
  55. package/web-dev-server.config.mjs +27 -0
  56. package/web-test-runner.config.mjs +41 -0
package/.editorconfig ADDED
@@ -0,0 +1,29 @@
1
+ # EditorConfig helps developers define and maintain consistent
2
+ # coding styles between different editors and IDEs
3
+ # editorconfig.org
4
+
5
+ root = true
6
+
7
+
8
+ [*]
9
+
10
+ # Change these settings to your own preference
11
+ indent_style = space
12
+ indent_size = 2
13
+
14
+ # We recommend you to keep these unchanged
15
+ end_of_line = lf
16
+ charset = utf-8
17
+ trim_trailing_whitespace = true
18
+ insert_final_newline = true
19
+
20
+ [*.md]
21
+ trim_trailing_whitespace = false
22
+
23
+ [*.json]
24
+ indent_size = 2
25
+
26
+ [*.{html,js,md}]
27
+ block_comment_start = /**
28
+ block_comment = *
29
+ block_comment_end = */
package/.storybook/main.js ADDED
@@ -0,0 +1,3 @@
1
+ module.exports = {
2
+ stories: ['../dist/stories/**/*.stories.{js,md,mdx}'],
3
+ };
package/.storybook/server.mjs ADDED
@@ -0,0 +1,8 @@
1
+ import { storybookPlugin } from '@web/dev-server-storybook';
2
+ import baseConfig from '../web-dev-server.config.mjs';
3
+
4
+ export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
5
+ ...baseConfig,
6
+ open: '/',
7
+ plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
8
+ });
package/CHANGELOG.md ADDED
@@ -0,0 +1,12 @@
1
+ # Change Log
2
+
3
+ All notable changes to this project will be documented in this file.
4
+ See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
+
6
+ ## [2.0.0-alpha.55](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.54...v2.0.0-alpha.55) (2024-04-02)
7
+
8
+
9
+ ### :bug: Bug Fix
10
+
11
+ * menu module ([bdf77c0](https://github.com/hatiolab/operato/commit/bdf77c0bca2e760061e47cdb3f3e62dccf29f7d0))
12
+ * migrate menu component module from things-factory ([81bf12e](https://github.com/hatiolab/operato/commit/81bf12e60e592f9cce696d5bad9b6e979f79c4ac))
package/README.md ADDED
@@ -0,0 +1,75 @@
1
+ # \<ox-menu>
2
+
3
+ This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm i menu
9
+ ```
10
+
11
+ ## Usage
12
+
13
+ ```html
14
+ <script type="module">
15
+ import '@operato/menu'
16
+ </script>
17
+
18
+ <ox-menu></ox-menu>
19
+ ```
20
+
21
+ ## Linting and formatting
22
+
23
+ To scan the project for linting and formatting errors, run
24
+
25
+ ```bash
26
+ npm run lint
27
+ ```
28
+
29
+ To automatically fix linting and formatting errors, run
30
+
31
+ ```bash
32
+ npm run format
33
+ ```
34
+
35
+ ## Testing with Web Test Runner
36
+
37
+ To execute a single test run:
38
+
39
+ ```bash
40
+ npm run test
41
+ ```
42
+
43
+ To run the tests in interactive watch mode run:
44
+
45
+ ```bash
46
+ npm run test:watch
47
+ ```
48
+
49
+ ## Demoing with Storybook
50
+
51
+ To run a local instance of Storybook for your component, run
52
+
53
+ ```bash
54
+ npm run storybook
55
+ ```
56
+
57
+ To build a production version of Storybook, run
58
+
59
+ ```bash
60
+ npm run storybook:build
61
+ ```
62
+
63
+ ## Tooling configs
64
+
65
+ For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
66
+
67
+ If you customize the configuration a lot, you can consider moving them to individual files.
68
+
69
+ ## Local Demo with `web-dev-server`
70
+
71
+ ```bash
72
+ npm start
73
+ ```
74
+
75
+ To run a local development server that serves the basic demo located in `demo/index.html`
package/demo/index.html ADDED
@@ -0,0 +1,40 @@
1
+ <!doctype html>
2
+ <html lang="en-GB">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <style>
6
+ body {
7
+ background: #fafafa;
8
+ }
9
+
10
+ #demo {
11
+ position: relative;
12
+ height: 100px;
13
+ background-color: lightgray;
14
+ text-align: center;
15
+ vertical-align: middle;
16
+ }
17
+ </style>
18
+ </head>
19
+ <body>
20
+ <div id="demo"></div>
21
+
22
+ <script type="module">
23
+ import { html, render } from 'lit'
24
+ import '../dist/src/ox-menu.js'
25
+ import { OxMenu } from '../dist/src/ox-menu.js'
26
+
27
+ const parent = document.querySelector('#demo')
28
+ parent.addEventListener('click', function (e) {
29
+ OxMenu.open({
30
+ template: html``,
31
+ top: e.pageY,
32
+ left: e.pageX,
33
+ parent
34
+ })
35
+ })
36
+
37
+ render(html`clike anywhere in this box to menu mini.`, parent)
38
+ </script>
39
+ </body>
40
+ </html>
package/dist/src/index.d.ts ADDED
File without changes
package/dist/src/index.js ADDED
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ //# sourceMappingURL=index.js.map
package/dist/src/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"","sourcesContent":[""]}
package/dist/src/menu-landscape-styles.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const MenuLandscapeStyles: import("lit").CSSResult;
package/dist/src/menu-landscape-styles.js ADDED
@@ -0,0 +1,149 @@
1
+ import { css } from 'lit';
2
+ export const MenuLandscapeStyles = css `
3
+ :host {
4
+ overflow-x: auto;
5
+ background-color: var(--secondary-text-color);
6
+ --focus-anchor-color: #e6ffa2;
7
+ }
8
+
9
+ :host > div {
10
+ overflow-x: auto;
11
+ }
12
+
13
+ :host > div > ul {
14
+ display: flex;
15
+ flex-direction: row;
16
+ list-style: none;
17
+ margin: auto;
18
+ padding: 0;
19
+ border: var(--border-dark-color);
20
+ border-width: 0 1px;
21
+ max-width: 1250px;
22
+ }
23
+
24
+ :host > div > ul > li {
25
+ flex: 1;
26
+
27
+ display: flex;
28
+ flex-direction: column;
29
+ }
30
+ :host > div > ul > li > a {
31
+ display: none;
32
+ font-weight: bold;
33
+ font-size: var(--fontsize-large);
34
+ }
35
+
36
+ ul[submenus] {
37
+ flex: 1;
38
+ list-style: none;
39
+ overflow-y: hidden;
40
+ background-color: var(--primary-color);
41
+ margin: 0;
42
+ padding: 0;
43
+ border-left: var(--border-dark-color);
44
+ }
45
+
46
+ ul[submenus] li {
47
+ min-width: 120px;
48
+ max-width: 180px;
49
+ }
50
+
51
+ a {
52
+ display: block;
53
+ padding: var(--padding-default) var(--padding-default) var(--padding-narrow) var(--padding-wide);
54
+ text-decoration: none;
55
+ font: normal 14px var(--theme-font);
56
+ color: var(--theme-white-color);
57
+ text-transform: capitalize;
58
+
59
+ overflow: hidden;
60
+ white-space: nowrap;
61
+ text-overflow: ellipsis;
62
+ }
63
+
64
+ a:hover {
65
+ font-weight: bold;
66
+ }
67
+
68
+ ul[submenus] a::before {
69
+ content: '';
70
+ display: inline-block;
71
+ position: relative;
72
+ top: -1px;
73
+ width: 5px;
74
+ height: 5px;
75
+ border: 1px solid var(--theme-white-color);
76
+ border-radius: 50%;
77
+ background-color: transparent;
78
+ margin-right: 3px;
79
+ }
80
+ ul[submenus] a:hover,
81
+ ul[submenus] li[active] a {
82
+ background-color: rgba(var(--secondary-color-rgb), 0.3);
83
+ color: var(--focus-anchor-color);
84
+ font-weight: bold;
85
+ }
86
+
87
+ [description] {
88
+ background-color: var(--primary-color);
89
+ margin: 0;
90
+ padding: var(--padding-default) 0;
91
+ border-left: 1px solid rgba(0, 0, 0, 0.1);
92
+ color: var(--focus-anchor-color);
93
+ font-size: 11px;
94
+ }
95
+ [description] mwc-icon {
96
+ background-color: rgba(0, 0, 0, 0.15);
97
+ margin-right: 4px;
98
+ padding: var(--padding-narrow);
99
+ border-radius: 0 5px 5px 0;
100
+ float: left;
101
+ font-size: 26px;
102
+ }
103
+
104
+ @media only screen and (max-width: 460px) {
105
+ :host {
106
+ min-width: 100vw;
107
+ }
108
+ :host > div {
109
+ display: initial;
110
+ }
111
+ :host > div > ul {
112
+ flex-direction: column;
113
+ }
114
+ a {
115
+ padding: var(--padding-wide);
116
+ font: normal 15px var(--theme-font);
117
+ }
118
+ li[active] ul {
119
+ border-bottom: 2px solid rgba(0, 0, 0, 0.1);
120
+ }
121
+ li li a {
122
+ display: block;
123
+ padding: var(--padding-wide) var(--padding-default) var(--padding-wide) 35px;
124
+ overflow: hidden;
125
+ text-overflow: ellipsis;
126
+ white-space: nowrap;
127
+ font: normal 14px var(--theme-font);
128
+ }
129
+ li li[active] a {
130
+ font: bold 14px var(--theme-font);
131
+ }
132
+ :host > div > ul > li > a {
133
+ display: block;
134
+ }
135
+ :host > div > ul > li > a mwc-icon {
136
+ font-size: 1em;
137
+ position: relative;
138
+ top: 2px;
139
+ }
140
+ [description] {
141
+ display: none;
142
+ }
143
+ ul[submenus] a:hover,
144
+ ul[submenus] li[active] a {
145
+ background-color: rgba(var(--secondary-color-rgb), 0.3);
146
+ }
147
+ }
148
+ `;
149
+ //# sourceMappingURL=menu-landscape-styles.js.map
package/dist/src/menu-landscape-styles.js.map ADDED
@@ -0,0 +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] mwc-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 mwc-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.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const MenuPortraitStyles: import("lit").CSSResult;
package/dist/src/menu-portrait-styles.js ADDED
@@ -0,0 +1,147 @@
1
+ import { css } from 'lit';
2
+ export const MenuPortraitStyles = css `
3
+ :host {
4
+ display: flex;
5
+ overflow-y: auto;
6
+ flex-direction: column;
7
+ height: 100%;
8
+ }
9
+
10
+ :host > ul {
11
+ margin-block-end: 1.5em;
12
+ }
13
+
14
+ ul {
15
+ list-style: none;
16
+ margin: 0;
17
+ padding: 0;
18
+ }
19
+
20
+ [group-label] {
21
+ padding: 25px 0 var(--padding-narrow) var(--padding-wide);
22
+ border-bottom: var(--border-dark-color);
23
+ font: bold 12px var(--theme-font);
24
+ color: rgba(var(--primary-color-rgb), 0.9);
25
+ text-transform: uppercase;
26
+ }
27
+
28
+ a {
29
+ display: flex;
30
+ align-items: center;
31
+ 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
+ text-decoration: none;
34
+ font: normal 14px var(--theme-font);
35
+ color: var(--secondary-color);
36
+ text-transform: capitalize;
37
+
38
+ overflow: hidden;
39
+ white-space: nowrap;
40
+ text-overflow: ellipsis;
41
+ }
42
+
43
+ a:hover {
44
+ color: var(--primary-color);
45
+ font-weight: bold;
46
+ }
47
+
48
+ a * {
49
+ vertical-align: middle;
50
+ }
51
+
52
+ a mwc-icon {
53
+ margin-right: var(--margin-narrow);
54
+ font-size: 15px;
55
+ color: rgba(var(--secondary-color-rgb), 0.7);
56
+ }
57
+
58
+ a [submenu-button] {
59
+ float: left;
60
+ font-size: 15px;
61
+ max-height: 20px;
62
+ }
63
+
64
+ a [submenu-button]::before {
65
+ content: 'add_box';
66
+ }
67
+
68
+ li[active] > a [submenu-button]::before {
69
+ content: 'indeterminate_check_box';
70
+ }
71
+
72
+ li[active] > a {
73
+ border-left: 3px solid var(--primary-color);
74
+ font-weight: bold;
75
+ color: var(--primary-color);
76
+ }
77
+
78
+ li li a {
79
+ padding: 7px 0 7px 35px;
80
+ font: normal 13px var(--theme-font);
81
+ color: var(--secondary-color);
82
+ }
83
+
84
+ li li[active] a {
85
+ background-color: rgba(var(--primary-color-rgb), 0.15);
86
+ font: bold 13px var(--theme-font);
87
+ color: var(--primary-color);
88
+ }
89
+
90
+ li > ul {
91
+ overflow-y: hidden;
92
+ max-height: 0;
93
+ background-color: #f6f6f6;
94
+
95
+ transition-property: all;
96
+ transition-duration: 0.7s;
97
+ }
98
+
99
+ li[active] > ul {
100
+ max-height: 500px;
101
+ }
102
+
103
+ li[active] > ul[settled] {
104
+ overflow-y: auto;
105
+ }
106
+
107
+ li li a::before {
108
+ margin-right: var(--margin-narrow);
109
+ }
110
+
111
+ a [badge] {
112
+ margin-left: auto;
113
+ background-color: var(--primary-background-color);
114
+ color: white;
115
+ border-radius: 999em;
116
+ padding: 0px 6px;
117
+ }
118
+
119
+ @media only screen and (max-width: 460px) {
120
+ :host {
121
+ min-width: 100vw;
122
+ }
123
+
124
+ a {
125
+ padding: var(--padding-wide);
126
+ font: normal 15px var(--theme-font);
127
+ }
128
+
129
+ li[active] ul {
130
+ border-bottom: 2px solid rgba(0, 0, 0, 0.1);
131
+ }
132
+
133
+ li li a {
134
+ display: block;
135
+ padding: var(--padding-wide) var(--padding-default) var(--padding-wide) 35px;
136
+ overflow: hidden;
137
+ text-overflow: ellipsis;
138
+ white-space: nowrap;
139
+ font: normal 14px var(--theme-font);
140
+ }
141
+
142
+ li li[active] a {
143
+ font: bold 14px var(--theme-font);
144
+ }
145
+ }
146
+ `;
147
+ //# sourceMappingURL=menu-portrait-styles.js.map
package/dist/src/menu-portrait-styles.js.map ADDED
@@ -0,0 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgJpC,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 mwc-icon {\n margin-right: var(--margin-narrow);\n font-size: 15px;\n color: rgba(var(--secondary-color-rgb), 0.7);\n }\n\n a [submenu-button] {\n float: left;\n font-size: 15px;\n max-height: 20px;\n }\n\n a [submenu-button]::before {\n content: 'add_box';\n }\n\n li[active] > a [submenu-button]::before {\n content: 'indeterminate_check_box';\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[active] ul {\n border-bottom: 2px solid rgba(0, 0, 0, 0.1);\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"]}
package/dist/src/ox-menu-landscape.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ import '@material/mwc-icon';
2
+ import { LitElement } from 'lit';
3
+ import { Menu } from './types';
4
+ declare const OxMenuLandscape_base: (new (...args: any[]) => {
5
+ _storeUnsubscribe: import("redux").Unsubscribe;
6
+ connectedCallback(): void;
7
+ disconnectedCallback(): void;
8
+ stateChanged(_state: unknown): void;
9
+ readonly isConnected: boolean;
10
+ }) & typeof LitElement;
11
+ export declare class OxMenuLandscape extends OxMenuLandscape_base {
12
+ static styles: import("lit").CSSResult[];
13
+ menus?: Menu[];
14
+ activeTopLevel?: Menu;
15
+ activeMenu: Menu;
16
+ path?: string;
17
+ render(): import("lit-html").TemplateResult<1>;
18
+ firstUpdated(): void;
19
+ onWheelEvent(e: WheelEvent): void;
20
+ }
21
+ export {};
package/dist/src/ox-menu-landscape.js ADDED
@@ -0,0 +1,99 @@
1
+ import { __decorate } from "tslib";
2
+ import '@material/mwc-icon';
3
+ import { html, LitElement } from 'lit';
4
+ import { customElement, property } from 'lit/decorators.js';
5
+ import { connect } from 'pwa-helpers';
6
+ import { navigate, store } from '@operato/shell';
7
+ import { ScrollbarStyles } from '@operato/styles';
8
+ import { MenuLandscapeStyles } from './menu-landscape-styles';
9
+ let OxMenuLandscape = class OxMenuLandscape extends connect(store)(LitElement) {
10
+ render() {
11
+ const { menus = [], activeTopLevel, activeMenu } = this;
12
+ return html `
13
+ <div id="wrap" @mousewheel=${this.onWheelEvent.bind(this)}>
14
+ <ul>
15
+ ${menus.map(menu => {
16
+ var _a;
17
+ return menu.type == 'group'
18
+ ? html ``
19
+ : html `
20
+ <li ?active=${menu === activeTopLevel}>
21
+ <a href=${menu.path || '#'}>
22
+ ${menu.icon ? html `<mwc-icon>${menu.icon}</mwc-icon>` : html ``} ${menu.name}
23
+ </a>
24
+
25
+ <ul submenus>
26
+ ${(_a = menu.menus) === null || _a === void 0 ? void 0 : _a.map(menu => html `
27
+ <li ?active=${menu === activeMenu}>
28
+ <a href=${menu.path || '#'}> ${menu.name} </a>
29
+ </li>
30
+ `)}
31
+ </ul>
32
+
33
+ <div description>
34
+ ${menu.icon ? html `<mwc-icon>${menu.icon}</mwc-icon>` : html ``} ${menu.description || ''}
35
+ </div>
36
+ </li>
37
+ `;
38
+ })}
39
+ </ul>
40
+ </div>
41
+ `;
42
+ }
43
+ firstUpdated() {
44
+ this.renderRoot.addEventListener('click', (e) => {
45
+ //@ts-ignore
46
+ if (e.target.submenu) {
47
+ /* protect to act move to href. */
48
+ e.stopPropagation();
49
+ e.preventDefault();
50
+ //@ts-ignore
51
+ let menu = e.target.submenu;
52
+ this.dispatchEvent(new CustomEvent('active-toplevel', {
53
+ bubbles: true,
54
+ detail: this.activeTopLevel === menu ? undefined : menu
55
+ }));
56
+ return;
57
+ }
58
+ /* to respond even if current acting menu is selected */
59
+ let href = e.target.href;
60
+ href && location.href === href && navigate(href + '#force', true);
61
+ });
62
+ /* to hide scrollbar during transition */
63
+ this.renderRoot.addEventListener('transitionstart', e => {
64
+ ;
65
+ e.target.removeAttribute('settled');
66
+ });
67
+ this.renderRoot.addEventListener('transitionend', e => {
68
+ ;
69
+ e.target.setAttribute('settled', '');
70
+ });
71
+ }
72
+ onWheelEvent(e) {
73
+ const { target, deltaY, detail } = e;
74
+ if (!(target instanceof HTMLElement)) {
75
+ return;
76
+ }
77
+ const delta = deltaY || -detail;
78
+ target.scrollLeft -= (delta / Math.abs(delta)) * 10;
79
+ e.preventDefault();
80
+ }
81
+ };
82
+ OxMenuLandscape.styles = [ScrollbarStyles, MenuLandscapeStyles];
83
+ __decorate([
84
+ property({ type: Array })
85
+ ], OxMenuLandscape.prototype, "menus", void 0);
86
+ __decorate([
87
+ property({ type: Object })
88
+ ], OxMenuLandscape.prototype, "activeTopLevel", void 0);
89
+ __decorate([
90
+ property({ type: Object })
91
+ ], OxMenuLandscape.prototype, "activeMenu", void 0);
92
+ __decorate([
93
+ property({ type: String })
94
+ ], OxMenuLandscape.prototype, "path", void 0);
95
+ OxMenuLandscape = __decorate([
96
+ customElement('ox-menu-landscape')
97
+ ], OxMenuLandscape);
98
+ export { OxMenuLandscape };
99
+ //# sourceMappingURL=ox-menu-landscape.js.map
package/dist/src/ox-menu-landscape.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ox-menu-landscape.js","sourceRoot":"","sources":["../../src/ox-menu-landscape.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers'\n\nimport { navigate, store } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { Menu } from './types'\nimport { MenuLandscapeStyles } from './menu-landscape-styles'\n\n@customElement('ox-menu-landscape')\nexport class OxMenuLandscape extends connect(store)(LitElement) {\n static styles = [ScrollbarStyles, MenuLandscapeStyles]\n\n @property({ type: Array }) menus?: Menu[]\n @property({ type: Object }) activeTopLevel?: Menu\n @property({ type: Object }) activeMenu!: Menu\n @property({ type: String }) path?: string\n\n render() {\n const { menus = [], activeTopLevel, activeMenu } = this\n\n return html`\n <div id=\"wrap\" @mousewheel=${this.onWheelEvent.bind(this)}>\n <ul>\n ${menus.map(menu =>\n menu.type == 'group'\n ? html``\n : html`\n <li ?active=${menu === activeTopLevel}>\n <a href=${menu.path || '#'}>\n ${menu.icon ? html`<mwc-icon>${menu.icon}</mwc-icon>` : html``} ${menu.name}\n </a>\n\n <ul submenus>\n ${menu.menus?.map(\n menu => html`\n <li ?active=${menu === activeMenu}>\n <a href=${menu.path || '#'}> ${menu.name} </a>\n </li>\n `\n )}\n </ul>\n\n <div description>\n ${menu.icon ? html`<mwc-icon>${menu.icon}</mwc-icon>` : html``} ${menu.description || ''}\n </div>\n </li>\n `\n )}\n </ul>\n </div>\n `\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('click', (e: Event) => {\n //@ts-ignore\n if (e.target.submenu) {\n /* protect to act move to href. */\n e.stopPropagation()\n e.preventDefault()\n\n //@ts-ignore\n let menu = e.target.submenu\n\n this.dispatchEvent(\n new CustomEvent('active-toplevel', {\n bubbles: true,\n detail: this.activeTopLevel === menu ? undefined : menu\n })\n )\n\n return\n }\n\n /* to respond even if current acting menu is selected */\n let href = (e.target as HTMLAnchorElement).href\n href && location.href === href && navigate(href + '#force', true)\n })\n\n /* to hide scrollbar during transition */\n this.renderRoot.addEventListener('transitionstart', e => {\n ;(e.target as HTMLElement).removeAttribute('settled')\n })\n this.renderRoot.addEventListener('transitionend', e => {\n ;(e.target as HTMLElement).setAttribute('settled', '')\n })\n }\n\n onWheelEvent(e: WheelEvent) {\n const { target, deltaY, detail } = e\n\n if (!(target instanceof HTMLElement)) {\n return\n }\n\n const delta = deltaY || -detail\n target.scrollLeft -= (delta / Math.abs(delta)) * 10\n\n e.preventDefault()\n }\n}\n"]}
package/dist/src/ox-menu-part.d.ts ADDED
@@ -0,0 +1,29 @@
1
+ import '@material/mwc-icon';
2
+ import './ox-menu-portrait';
3
+ import './ox-menu-landscape';
4
+ import { LitElement, PropertyValues } from 'lit';
5
+ import { Menu } from './types';
6
+ declare const OxMenuPart_base: (new (...args: any[]) => {
7
+ _storeUnsubscribe: import("redux").Unsubscribe;
8
+ connectedCallback(): void;
9
+ disconnectedCallback(): void;
10
+ stateChanged(_state: unknown): void;
11
+ readonly isConnected: boolean;
12
+ }) & typeof LitElement;
13
+ export declare class OxMenuPart extends OxMenuPart_base {
14
+ static styles: import("lit").CSSResult[];
15
+ page: string;
16
+ resourceId?: string;
17
+ menus?: Menu[];
18
+ orientation?: 'landscape' | 'portrait';
19
+ slotTemplate: any;
20
+ _activeTopLevel?: Menu;
21
+ _activeMenu?: Menu;
22
+ _path?: string;
23
+ render(): import("lit-html").TemplateResult<1>;
24
+ firstUpdated(): void;
25
+ updated(changes: PropertyValues<this>): void;
26
+ stateChanged(state: any): void;
27
+ private findActivePage;
28
+ }
29
+ export {};