@operato/context 2.0.0-alpha.63 → 2.0.0-alpha.65

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 (50) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/src/layouts/ox-context-page-toolbar.js +11 -2
  3. package/dist/src/layouts/ox-context-page-toolbar.js.map +1 -1
  4. package/dist/src/layouts/ox-context-toolbar.d.ts +1 -1
  5. package/dist/src/layouts/ox-context-toolbar.js +62 -52
  6. package/dist/src/layouts/ox-context-toolbar.js.map +1 -1
  7. package/dist/src/tools/ox-page-action-context-bar.js +39 -18
  8. package/dist/src/tools/ox-page-action-context-bar.js.map +1 -1
  9. package/dist/src/tools/ox-title-bar.js +1 -1
  10. package/dist/src/tools/ox-title-bar.js.map +1 -1
  11. package/dist/stories/ox-context-page-toolbar-select-buttons.stories.js +22 -6
  12. package/dist/stories/ox-context-page-toolbar-select-buttons.stories.js.map +1 -1
  13. package/dist/stories/ox-context-page-toolbar-select.stories.js +1 -1
  14. package/dist/stories/ox-context-page-toolbar-select.stories.js.map +1 -1
  15. package/dist/stories/ox-context-page-toolbar.stories copy.d.ts +24 -0
  16. package/dist/stories/ox-context-page-toolbar.stories copy.js +90 -0
  17. package/dist/stories/ox-context-page-toolbar.stories copy.js.map +1 -0
  18. package/dist/stories/ox-context-page-toolbar.stories.js +1 -1
  19. package/dist/stories/ox-context-page-toolbar.stories.js.map +1 -1
  20. package/dist/stories/ox-context-toolbar-complex-2.stories.d.ts +19 -0
  21. package/dist/stories/ox-context-toolbar-complex-2.stories.js +136 -0
  22. package/dist/stories/ox-context-toolbar-complex-2.stories.js.map +1 -0
  23. package/dist/stories/ox-context-toolbar-complex.stories copy.d.ts +19 -0
  24. package/dist/stories/ox-context-toolbar-complex.stories copy.js +146 -0
  25. package/dist/stories/ox-context-toolbar-complex.stories copy.js.map +1 -0
  26. package/dist/stories/ox-context-toolbar-complex.stories.d.ts +19 -0
  27. package/dist/stories/ox-context-toolbar-complex.stories.js +146 -0
  28. package/dist/stories/ox-context-toolbar-complex.stories.js.map +1 -0
  29. package/dist/stories/ox-context-toolbar-overflow.stories.d.ts +19 -0
  30. package/dist/stories/ox-context-toolbar-overflow.stories.js +127 -0
  31. package/dist/stories/ox-context-toolbar-overflow.stories.js.map +1 -0
  32. package/dist/stories/ox-context-toolbar.stories copy.d.ts +19 -0
  33. package/dist/stories/ox-context-toolbar.stories copy.js +82 -0
  34. package/dist/stories/ox-context-toolbar.stories copy.js.map +1 -0
  35. package/dist/stories/ox-context-toolbar.stories.d.ts +19 -0
  36. package/dist/stories/ox-context-toolbar.stories.js +82 -0
  37. package/dist/stories/ox-context-toolbar.stories.js.map +1 -0
  38. package/dist/tsconfig.tsbuildinfo +1 -1
  39. package/package.json +4 -4
  40. package/src/layouts/ox-context-page-toolbar.ts +11 -2
  41. package/src/layouts/ox-context-toolbar.ts +62 -52
  42. package/src/tools/ox-page-action-context-bar.ts +39 -18
  43. package/src/tools/ox-title-bar.ts +1 -1
  44. package/stories/ox-context-page-toolbar-select-buttons.stories.ts +22 -6
  45. package/stories/ox-context-page-toolbar-select.stories.ts +1 -1
  46. package/stories/ox-context-page-toolbar.stories.ts +1 -1
  47. package/stories/ox-context-toolbar-complex.stories.ts +158 -0
  48. package/stories/ox-context-toolbar-overflow.stories.ts +139 -0
  49. package/stories/ox-context-toolbar.stories.ts +94 -0
  50. package/themes/context-theme.css +74 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,26 @@
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.65](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.64...v2.0.0-alpha.65) (2024-04-13)
7
+
8
+
9
+ ### :bug: Bug Fix
10
+
11
+ * mwc=>md for context ([2b1a13b](https://github.com/hatiolab/operato/commit/2b1a13b9a214836ac7135717afd2dda536f1f487))
12
+
13
+
14
+
15
+ ## [2.0.0-alpha.64](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.63...v2.0.0-alpha.64) (2024-04-13)
16
+
17
+
18
+ ### :bug: Bug Fix
19
+
20
+ * context button style ([8b169de](https://github.com/hatiolab/operato/commit/8b169de8c18919c36e9e8a69059046046fb5293a))
21
+ * icon size ([b2e93e0](https://github.com/hatiolab/operato/commit/b2e93e04200145b2547edd11208ed6c895c156bc))
22
+ * mwc=>md for context ([269d5fe](https://github.com/hatiolab/operato/commit/269d5fedca38096ce41850afe88a17ed1fd656dd))
23
+
24
+
25
+
6
26
  ## [2.0.0-alpha.63](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.62...v2.0.0-alpha.63) (2024-04-12)
7
27
 
8
28
  **Note:** Version bump only for package @operato/context
package/dist/src/layouts/ox-context-page-toolbar.js CHANGED
@@ -30,6 +30,7 @@ let ContextPageToolbar = class ContextPageToolbar extends connect(store)(LitElem
30
30
  flex-direction: row;
31
31
 
32
32
  align-items: center;
33
+ gap:var(--padding-narrow);
33
34
  }
34
35
 
35
36
  * {
@@ -37,10 +38,18 @@ let ContextPageToolbar = class ContextPageToolbar extends connect(store)(LitElem
37
38
  }
38
39
 
39
40
  md-icon {
40
- background-color: var(--theme-white-color);
41
+ background-color: var(--button-background-color,#fafbfc);
41
42
  border: 1px solid rgba(var(--primary-color-rgb), 0.5);
42
- padding: 1px 2px;
43
+ border-radius:var(--button-border-radius);
44
+ padding: var(--iconbtn-padding, 2px);
45
+
43
46
  color: var(--primary-color);
47
+
48
+ &:hover{
49
+ background-color: var(--primary-color);
50
+
51
+ color: var(--theme-white-color);
52
+ }
44
53
  }
45
54
  `
46
55
  ];
package/dist/src/layouts/ox-context-page-toolbar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-context-page-toolbar.js","sourceRoot":"","sources":["../../../src/layouts/ox-context-page-toolbar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, TemplateResult, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { TOOL_POSITION } from '@operato/layout'\nimport { store } from '@operato/shell'\n\n@customElement('ox-context-page-toolbar')\nexport class ContextPageToolbar extends connect(store)(LitElement) {\n static get styles() {\n return [\n css`\n :host {\n display: flex;\n flex-direction: row-reverse;\n position: relative;\n\n justify-content: end;\n align-items: center;\n\n --context-action-bar-button-margin: 0px;\n --context-action-bar-more-button-border-radius: 2px;\n\n --mdc-icon-size: 20px;\n --mdc-button-height: 20px;\n --mdc-button-horizontal-padding: 2px;\n }\n\n :host > div {\n display: flex;\n flex-direction: row;\n\n align-items: center;\n }\n\n * {\n cursor: pointer;\n }\n\n md-icon {\n background-color: var(--theme-white-color);\n border: 1px solid rgba(var(--primary-color-rgb), 0.5);\n padding: 1px 2px;\n color: var(--primary-color);\n }\n `\n ]\n }\n\n @property({ type: Object }) context: any\n @property({ type: Array }) tools?: {\n position: TOOL_POSITION\n template: TemplateResult\n context?: string\n }[]\n\n render() {\n let contextKeys = Object.keys(this.context).filter(key => !!this.context[key])\n let tools = (this.tools || []).filter(tool => {\n if (!tool.context || contextKeys.includes(tool.context)) {\n return tool\n }\n })\n\n let frontEndTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT_END)\n let frontTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT)\n let centerTools = tools.filter(tool => tool.position == TOOL_POSITION.CENTER)\n let rearTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR)\n let rearEndTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR_END)\n\n return html`\n ${frontEndTools.length > 0\n ? html`<div id=\"front-end\">${frontEndTools.map(tool => html` ${tool.template} `)}</div>`\n : nothing}\n ${frontTools.length > 0\n ? html`<div id=\"front\">${frontTools.map(tool => html` ${tool.template} `)}</div>`\n : nothing}\n ${centerTools.length > 0\n ? html`<div id=\"center\">${centerTools.map(tool => html` ${tool.template} `)}</div>`\n : nothing}\n ${rearTools.length > 0 ? html`<div id=\"rear\">${rearTools.map(tool => html` ${tool.template} `)}</div>` : nothing}\n ${rearEndTools.length > 0\n ? html`<div id=\"rear-end\">${rearEndTools.map(tool => html` ${tool.template} `)}</div>`\n : nothing}\n `\n }\n\n stateChanged(state: any) {\n if (state.context) {\n this.tools = state.context?.tools\n }\n }\n}\n"]}
1
+ {"version":3,"file":"ox-context-page-toolbar.js","sourceRoot":"","sources":["../../../src/layouts/ox-context-page-toolbar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, TemplateResult, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { TOOL_POSITION } from '@operato/layout'\nimport { store } from '@operato/shell'\n\n@customElement('ox-context-page-toolbar')\nexport class ContextPageToolbar extends connect(store)(LitElement) {\n static get styles() {\n return [\n css`\n :host {\n display: flex;\n flex-direction: row-reverse;\n position: relative;\n\n justify-content: end;\n align-items: center;\n\n --context-action-bar-button-margin: 0px;\n --context-action-bar-more-button-border-radius: 2px;\n\n --mdc-icon-size: 20px;\n --mdc-button-height: 20px;\n --mdc-button-horizontal-padding: 2px;\n }\n\n :host > div {\n display: flex;\n flex-direction: row;\n\n align-items: center;\n gap:var(--padding-narrow);\n }\n\n * {\n cursor: pointer;\n }\n\n md-icon {\n background-color: var(--button-background-color,#fafbfc);\n border: 1px solid rgba(var(--primary-color-rgb), 0.5);\n border-radius:var(--button-border-radius);\n padding: var(--iconbtn-padding, 2px);\n\n color: var(--primary-color);\n \n &:hover{\n background-color: var(--primary-color);\n\n color: var(--theme-white-color);\n }\n }\n `\n ]\n }\n\n @property({ type: Object }) context: any\n @property({ type: Array }) tools?: {\n position: TOOL_POSITION\n template: TemplateResult\n context?: string\n }[]\n\n render() {\n let contextKeys = Object.keys(this.context).filter(key => !!this.context[key])\n let tools = (this.tools || []).filter(tool => {\n if (!tool.context || contextKeys.includes(tool.context)) {\n return tool\n }\n })\n\n let frontEndTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT_END)\n let frontTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT)\n let centerTools = tools.filter(tool => tool.position == TOOL_POSITION.CENTER)\n let rearTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR)\n let rearEndTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR_END)\n\n return html`\n ${frontEndTools.length > 0\n ? html`<div id=\"front-end\">${frontEndTools.map(tool => html` ${tool.template} `)}</div>`\n : nothing}\n ${frontTools.length > 0\n ? html`<div id=\"front\">${frontTools.map(tool => html` ${tool.template} `)}</div>`\n : nothing}\n ${centerTools.length > 0\n ? html`<div id=\"center\">${centerTools.map(tool => html` ${tool.template} `)}</div>`\n : nothing}\n ${rearTools.length > 0 ? html`<div id=\"rear\">${rearTools.map(tool => html` ${tool.template} `)}</div>` : nothing}\n ${rearEndTools.length > 0\n ? html`<div id=\"rear-end\">${rearEndTools.map(tool => html` ${tool.template} `)}</div>`\n : nothing}\n `\n }\n\n stateChanged(state: any) {\n if (state.context) {\n this.tools = state.context?.tools\n }\n }\n}\n"]}
package/dist/src/layouts/ox-context-toolbar.d.ts CHANGED
@@ -11,7 +11,7 @@ export declare class ContextToolbar extends ContextToolbar_base {
11
11
  static get styles(): import("lit").CSSResult[];
12
12
  private context;
13
13
  private tools?;
14
- render(): import("lit-html").TemplateResult<1> | typeof nothing;
14
+ render(): typeof nothing | import("lit-html").TemplateResult<1>;
15
15
  stateChanged(state: any): void;
16
16
  }
17
17
  export {};
package/dist/src/layouts/ox-context-toolbar.js CHANGED
@@ -16,72 +16,78 @@ let ContextToolbar = class ContextToolbar extends connect(store)(LitElement) {
16
16
  background-color: var(--context-toolbar-background-color);
17
17
  justify-content: space-between;
18
18
  box-shadow: var(--context-toolbar-shadow-line);
19
+
20
+ padding: 6px 10px;
21
+ gap: 4px;
19
22
  }
20
- #front-end {
21
- padding-left: var(--context-toolbar-side-padding);
22
- }
23
- #rear-end {
24
- padding-right: var(--context-toolbar-side-padding);
23
+
24
+ div {
25
+ display: flex;
26
+ flex-direction: row;
27
+ flex-wrap: nowrap;
28
+
29
+ align-items: center;
30
+ overflow: hidden;
31
+ padding: 0;
25
32
  }
26
- #front-end mwc-icon,
27
- #front mwc-icon {
33
+
34
+ #front-end md-icon,
35
+ #front md-icon {
28
36
  background-color: var(--context-toolbar-function-button-background-color);
29
37
  border: var(--context-toolbar-function-button-border);
30
- height: var(--context-toolbar-function-button-height);
31
- margin: var(--context-toolbar-button-margin);
32
- padding: var(--context-toolbar-function-button-padding);
33
38
  color: var(--context-toolbar-function-button-color);
34
- line-height: var(--context-toolbar-function-button-lineheight);
35
- cursor: pointer;
36
- }
37
- #front-end mwc-icon:first-child,
38
- #front mwc-icon:first-child {
39
- border-top-left-radius: var(--context-toolbar-function-button-radius);
40
- border-bottom-left-radius: var(--context-toolbar-function-button-radius);
41
- }
42
- #front-end mwc-icon:last-child,
43
- #front mwc-icon:last-child {
44
- border-top-right-radius: var(--context-toolbar-function-button-radius);
45
- border-bottom-right-radius: var(--context-toolbar-function-button-radius);
46
39
  }
47
40
 
48
- #front-end mwc-icon {
41
+ #front-end md-icon {
49
42
  background-color: var(--primary-color);
50
43
  }
51
- #front-end mwc-icon:hover {
44
+ #front-end md-icon:hover {
52
45
  background-color: var(--context-toolbar-function-button-background-color);
53
46
  }
54
- #front mwc-icon:hover {
47
+ #front md-icon:hover {
55
48
  background-color: var(--context-toolbar-function-button-hover-background-color);
56
49
  }
57
50
 
51
+ div md-icon:first-child {
52
+ border-radius: 0;
53
+ border-top-left-radius: var(--context-toolbar-function-button-radius);
54
+ border-bottom-left-radius: var(--context-toolbar-function-button-radius);
55
+ }
56
+ div md-icon:last-child {
57
+ border-radius: 0;
58
+ border-top-right-radius: var(--context-toolbar-function-button-radius);
59
+ border-bottom-right-radius: var(--context-toolbar-function-button-radius);
60
+ }
61
+
58
62
  #center {
59
63
  flex: 1;
60
- align-items: center;
61
64
  justify-content: end;
62
65
  }
63
66
 
64
- #center > * {
65
- align-items: center;
66
- }
67
- #rear-end > *,
68
- #rear > * {
69
- margin: var(--context-toolbar-button-margin);
70
- }
71
- #rear-end {
72
- align-items: start;
67
+ * {
68
+ cursor: pointer;
73
69
  }
74
70
 
75
- div > * {
76
- align-items: center;
71
+ md-icon {
72
+ background-color: var(--button-background-color, #fafbfc);
73
+ border: 1px solid rgba(var(--primary-color-rgb), 0.5);
74
+ border-radius: var(--button-border-radius);
75
+ padding: var(--iconbtn-padding, 2px);
76
+
77
+ color: var(--primary-color);
78
+
79
+ &:hover {
80
+ background-color: var(--primary-color);
81
+
82
+ color: var(--theme-white-color);
83
+ }
77
84
  }
78
85
 
79
- div {
80
- display: flex;
81
- flex-wrap: nowrap;
82
- align-items: center;
83
- overflow: hidden;
84
- padding: 0;
86
+ @media only screen and (max-width: 460px) {
87
+ :host {
88
+ padding: 0;
89
+ gap: 0;
90
+ }
85
91
  }
86
92
  `
87
93
  ];
@@ -102,15 +108,19 @@ let ContextToolbar = class ContextToolbar extends connect(store)(LitElement) {
102
108
  let rearTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR);
103
109
  let rearEndTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR_END);
104
110
  return html `
105
- <div id="front-end">${frontEndTools.map(tool => html ` ${tool.template} `)}</div>
106
-
107
- <div id="front">${frontTools.map(tool => html ` ${tool.template} `)}</div>
108
-
109
- <div id="center">${centerTools.map(tool => html ` ${tool.template} `)}</div>
110
-
111
- <div id="rear">${rearTools.map(tool => html ` ${tool.template} `)}</div>
112
-
113
- <div id="rear-end">${rearEndTools.map(tool => html ` ${tool.template} `)}</div>
111
+ ${frontEndTools.length > 0
112
+ ? html `<div id="front-end">${frontEndTools.map(tool => html ` ${tool.template} `)}</div>`
113
+ : nothing}
114
+ ${frontTools.length > 0
115
+ ? html `<div id="front">${frontTools.map(tool => html ` ${tool.template} `)}</div>`
116
+ : nothing}
117
+ ${centerTools.length > 0
118
+ ? html `<div id="center">${centerTools.map(tool => html ` ${tool.template} `)}</div>`
119
+ : nothing}
120
+ ${rearTools.length > 0 ? html `<div id="rear">${rearTools.map(tool => html ` ${tool.template} `)}</div>` : nothing}
121
+ ${rearEndTools.length > 0
122
+ ? html `<div id="rear-end">${rearEndTools.map(tool => html ` ${tool.template} `)}</div>`
123
+ : nothing}
114
124
  `;
115
125
  }
116
126
  stateChanged(state) {
package/dist/src/layouts/ox-context-toolbar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-context-toolbar.js","sourceRoot":"","sources":["../../../src/layouts/ox-context-toolbar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { TOOL_POSITION } from '@operato/layout'\nimport { store } from '@operato/shell'\n\n@customElement('ox-context-toolbar')\nexport class ContextToolbar extends connect(store)(LitElement) {\n static get styles() {\n return [\n css`\n :host {\n display: flex;\n position: relative;\n\n background-color: var(--context-toolbar-background-color);\n justify-content: space-between;\n box-shadow: var(--context-toolbar-shadow-line);\n }\n #front-end {\n padding-left: var(--context-toolbar-side-padding);\n }\n #rear-end {\n padding-right: var(--context-toolbar-side-padding);\n }\n #front-end mwc-icon,\n #front mwc-icon {\n background-color: var(--context-toolbar-function-button-background-color);\n border: var(--context-toolbar-function-button-border);\n height: var(--context-toolbar-function-button-height);\n margin: var(--context-toolbar-button-margin);\n padding: var(--context-toolbar-function-button-padding);\n color: var(--context-toolbar-function-button-color);\n line-height: var(--context-toolbar-function-button-lineheight);\n cursor: pointer;\n }\n #front-end mwc-icon:first-child,\n #front mwc-icon:first-child {\n border-top-left-radius: var(--context-toolbar-function-button-radius);\n border-bottom-left-radius: var(--context-toolbar-function-button-radius);\n }\n #front-end mwc-icon:last-child,\n #front mwc-icon:last-child {\n border-top-right-radius: var(--context-toolbar-function-button-radius);\n border-bottom-right-radius: var(--context-toolbar-function-button-radius);\n }\n\n #front-end mwc-icon {\n background-color: var(--primary-color);\n }\n #front-end mwc-icon:hover {\n background-color: var(--context-toolbar-function-button-background-color);\n }\n #front mwc-icon:hover {\n background-color: var(--context-toolbar-function-button-hover-background-color);\n }\n\n #center {\n flex: 1;\n align-items: center;\n justify-content: end;\n }\n\n #center > * {\n align-items: center;\n }\n #rear-end > *,\n #rear > * {\n margin: var(--context-toolbar-button-margin);\n }\n #rear-end {\n align-items: start;\n }\n\n div > * {\n align-items: center;\n }\n\n div {\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n overflow: hidden;\n padding: 0;\n }\n `\n ]\n }\n\n @state() private context: any\n @state() private tools?: any[]\n\n render() {\n if (this.context.toolbar === false) {\n return nothing\n }\n\n let contextKeys = Object.keys(this.context).filter(key => !!this.context[key])\n let tools = (this.tools || []).filter(tool => {\n if (!tool.context || contextKeys.includes(tool.context)) {\n return tool\n }\n })\n\n let frontEndTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT_END)\n let frontTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT)\n let centerTools = tools.filter(tool => tool.position == TOOL_POSITION.CENTER)\n let rearTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR)\n let rearEndTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR_END)\n\n return html`\n <div id=\"front-end\">${frontEndTools.map(tool => html` ${tool.template} `)}</div>\n\n <div id=\"front\">${frontTools.map(tool => html` ${tool.template} `)}</div>\n\n <div id=\"center\">${centerTools.map(tool => html` ${tool.template} `)}</div>\n\n <div id=\"rear\">${rearTools.map(tool => html` ${tool.template} `)}</div>\n\n <div id=\"rear-end\">${rearEndTools.map(tool => html` ${tool.template} `)}</div>\n `\n }\n\n stateChanged(state: any) {\n this.tools = state.context.tools\n this.context = state.route.context\n }\n}\n"]}
1
+ {"version":3,"file":"ox-context-toolbar.js","sourceRoot":"","sources":["../../../src/layouts/ox-context-toolbar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { TOOL_POSITION } from '@operato/layout'\nimport { store } from '@operato/shell'\n\n@customElement('ox-context-toolbar')\nexport class ContextToolbar extends connect(store)(LitElement) {\n static get styles() {\n return [\n css`\n :host {\n display: flex;\n position: relative;\n\n background-color: var(--context-toolbar-background-color);\n justify-content: space-between;\n box-shadow: var(--context-toolbar-shadow-line);\n\n padding: 6px 10px;\n gap: 4px;\n }\n\n div {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n\n align-items: center;\n overflow: hidden;\n padding: 0;\n }\n\n #front-end md-icon,\n #front md-icon {\n background-color: var(--context-toolbar-function-button-background-color);\n border: var(--context-toolbar-function-button-border);\n color: var(--context-toolbar-function-button-color);\n }\n\n #front-end md-icon {\n background-color: var(--primary-color);\n }\n #front-end md-icon:hover {\n background-color: var(--context-toolbar-function-button-background-color);\n }\n #front md-icon:hover {\n background-color: var(--context-toolbar-function-button-hover-background-color);\n }\n\n div md-icon:first-child {\n border-radius: 0;\n border-top-left-radius: var(--context-toolbar-function-button-radius);\n border-bottom-left-radius: var(--context-toolbar-function-button-radius);\n }\n div md-icon:last-child {\n border-radius: 0;\n border-top-right-radius: var(--context-toolbar-function-button-radius);\n border-bottom-right-radius: var(--context-toolbar-function-button-radius);\n }\n\n #center {\n flex: 1;\n justify-content: end;\n }\n\n * {\n cursor: pointer;\n }\n\n md-icon {\n background-color: var(--button-background-color, #fafbfc);\n border: 1px solid rgba(var(--primary-color-rgb), 0.5);\n border-radius: var(--button-border-radius);\n padding: var(--iconbtn-padding, 2px);\n\n color: var(--primary-color);\n\n &:hover {\n background-color: var(--primary-color);\n\n color: var(--theme-white-color);\n }\n }\n\n @media only screen and (max-width: 460px) {\n :host {\n padding: 0;\n gap: 0;\n }\n }\n `\n ]\n }\n\n @state() private context: any\n @state() private tools?: any[]\n\n render() {\n if (this.context.toolbar === false) {\n return nothing\n }\n\n let contextKeys = Object.keys(this.context).filter(key => !!this.context[key])\n let tools = (this.tools || []).filter(tool => {\n if (!tool.context || contextKeys.includes(tool.context)) {\n return tool\n }\n })\n\n let frontEndTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT_END)\n let frontTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT)\n let centerTools = tools.filter(tool => tool.position == TOOL_POSITION.CENTER)\n let rearTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR)\n let rearEndTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR_END)\n\n return html`\n ${frontEndTools.length > 0\n ? html`<div id=\"front-end\">${frontEndTools.map(tool => html` ${tool.template} `)}</div>`\n : nothing}\n ${frontTools.length > 0\n ? html`<div id=\"front\">${frontTools.map(tool => html` ${tool.template} `)}</div>`\n : nothing}\n ${centerTools.length > 0\n ? html`<div id=\"center\">${centerTools.map(tool => html` ${tool.template} `)}</div>`\n : nothing}\n ${rearTools.length > 0 ? html`<div id=\"rear\">${rearTools.map(tool => html` ${tool.template} `)}</div>` : nothing}\n ${rearEndTools.length > 0\n ? html`<div id=\"rear-end\">${rearEndTools.map(tool => html` ${tool.template} `)}</div>`\n : nothing}\n `\n }\n\n stateChanged(state: any) {\n this.tools = state.context.tools\n this.context = state.route.context\n }\n}\n"]}
package/dist/src/tools/ox-page-action-context-bar.js CHANGED
@@ -20,7 +20,7 @@ let PageActionContextBar = class PageActionContextBar extends connect(store)(Lit
20
20
  :host {
21
21
  display: flex;
22
22
  overflow: hidden;
23
- position: relative;
23
+ gap: var(--padding-narrow);
24
24
  }
25
25
 
26
26
  :host *:focus {
@@ -28,16 +28,30 @@ let PageActionContextBar = class PageActionContextBar extends connect(store)(Lit
28
28
  }
29
29
 
30
30
  button {
31
- white-space: nowrap;
32
- margin: var(--context-action-bar-button-margin);
33
- border-radius: var(--context-action-bar-more-button-border-radius);
34
- }
35
-
36
- md-icon {
37
- background-color: var(--theme-white-color);
31
+ display: flex;
32
+ align-items: center;
33
+ background-color: var(--button-background-color, #fafbfc);
38
34
  border: 1px solid rgba(var(--primary-color-rgb), 0.5);
39
- padding: 1px 2px;
40
- color: var(--primary-color);
35
+ border-radius: var(--button-border-radius);
36
+
37
+ font-size: var(--fontsize-default);
38
+ color: var(--secondary-color);
39
+
40
+ md-icon {
41
+ margin: 4px 1px;
42
+
43
+ --md-icon-size: 18px;
44
+ color: var(--primary-color);
45
+ }
46
+ &:hover {
47
+ background-color: var(--primary-color);
48
+
49
+ color: var(--theme-white-color);
50
+
51
+ md-icon {
52
+ color: var(--white-theme-color);
53
+ }
54
+ }
41
55
  }
42
56
 
43
57
  [filled] {
@@ -47,31 +61,38 @@ let PageActionContextBar = class PageActionContextBar extends connect(store)(Lit
47
61
  [danger] {
48
62
  color: var(--mdc-danger-button-primary-color);
49
63
  border-color: var(--mdc-danger-button-outline-color);
64
+
65
+ md-icon {
66
+ color: var(--mdc-danger-button-primary-color);
67
+ }
68
+ &:hover {
69
+ background-color: var(--mdc-danger-button-primary-color);
70
+ }
50
71
  }
51
72
 
52
73
  [more] {
53
74
  position: absolute;
54
75
  top: 0;
55
- right: 38px;
76
+ right: 0;
56
77
  background-color: var(--context-action-bar-more-button-background-color);
57
78
  box-shadow: -2px 0px 2px 1px rgba(0, 0, 0, 0.2);
58
79
  padding: var(--context-action-bar-more-button-padding);
59
80
  color: var(--context-action-bar-more-button-color);
81
+ padding: 10px;
60
82
  font-size: 2rem;
61
83
  }
62
84
 
63
85
  @media screen and (max-width: 460px) {
64
- button {
65
- --mdc-button-horizontal-padding: var(--padding-default);
66
- --mdc-shape-small: var(--context-action-bar-more-button-border-radius);
86
+ :host {
87
+ gap: 0;
67
88
  }
68
89
 
69
90
  [more] {
70
- position: absolute;
71
91
  margin-top: -10px;
72
- right: 0px;
73
- padding: var(--padding-default);
74
- font-size: 2rem;
92
+ }
93
+
94
+ button {
95
+ border-radius: 0;
75
96
  }
76
97
  }
77
98
 
package/dist/src/tools/ox-page-action-context-bar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-page-action-context-bar.js","sourceRoot":"","sources":["../../../src/tools/ox-page-action-context-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport './ox-page-action-overlay-template.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport throttle from 'lodash-es/throttle'\nimport { connect } from 'pwa-helpers/connect-mixin'\n\nimport { openOverlay } from '@operato/layout'\nimport { store } from '@operato/shell'\nimport { sleep } from '@operato/utils'\n\n@customElement('ox-page-action-context-bar')\nexport class PageActionContextBar extends connect(store)(LitElement) {\n static get styles() {\n return [\n css`\n :host {\n display: flex;\n overflow: hidden;\n position: relative;\n }\n\n :host *:focus {\n outline: none;\n }\n\n button {\n white-space: nowrap;\n margin: var(--context-action-bar-button-margin);\n border-radius: var(--context-action-bar-more-button-border-radius);\n }\n\n md-icon {\n background-color: var(--theme-white-color);\n border: 1px solid rgba(var(--primary-color-rgb), 0.5);\n padding: 1px 2px;\n color: var(--primary-color);\n }\n\n [filled] {\n font-variation-settings: 'FILL' 1;\n }\n\n [danger] {\n color: var(--mdc-danger-button-primary-color);\n border-color: var(--mdc-danger-button-outline-color);\n }\n\n [more] {\n position: absolute;\n top: 0;\n right: 38px;\n background-color: var(--context-action-bar-more-button-background-color);\n box-shadow: -2px 0px 2px 1px rgba(0, 0, 0, 0.2);\n padding: var(--context-action-bar-more-button-padding);\n color: var(--context-action-bar-more-button-color);\n font-size: 2rem;\n }\n\n @media screen and (max-width: 460px) {\n button {\n --mdc-button-horizontal-padding: var(--padding-default);\n --mdc-shape-small: var(--context-action-bar-more-button-border-radius);\n }\n\n [more] {\n position: absolute;\n margin-top: -10px;\n right: 0px;\n padding: var(--padding-default);\n font-size: 2rem;\n }\n }\n\n @keyframes rotate {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n `\n ]\n }\n\n @property({ type: Array }) actions: {\n title: string\n action: () => void\n icon: string\n type: string\n select: string[]\n href?: string\n emphasis?: boolean\n }[] = []\n @state() private overflown: boolean = false\n\n private overflownUpdaterThrottle: any\n private resizeCallback: any\n\n get overflownUpdater() {\n if (!this.overflownUpdaterThrottle) {\n this.overflownUpdaterThrottle = throttle(() => {\n this.overflown = this.scrollWidth > this.clientWidth\n }, 100)\n }\n\n return this.overflownUpdaterThrottle\n }\n\n connectedCallback() {\n super.connectedCallback()\n\n this.resizeCallback = () => this.overflownUpdater()\n\n window.addEventListener('resize', this.resizeCallback)\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n\n window.removeEventListener('resize', this.resizeCallback)\n }\n\n render() {\n return html`\n ${this.renderActions()}\n ${this.overflown ? html` <md-icon more @click=${this.showMore.bind(this)}>more_horiz</md-icon> ` : html``}\n `\n }\n\n renderActions() {\n return html`\n ${this.actions.map(($action, idx) => {\n let { type, title, icon, action, select, href, emphasis } = $action as any\n let { outlined, raised, dense, danger, filled } = emphasis || {}\n\n return type == 'text'\n ? html` <span @click=${action}>${title}</span> `\n : type == 'select' || (select && select.length > 0)\n ? html`\n <select @change=${action}>\n ${select.map((option: any) => html` <option>${option}</option> `)}\n </select>\n `\n : type == 'link'\n ? html` <a href=${href}>${title}</a> `\n : type == 'icon'\n ? html`<md-icon @click=${action}>${icon}</md-icon>`\n : html`\n <button\n ?dense=${dense}\n ?raised=${raised}\n ?outlined=${outlined}\n ?danger=${danger}\n ?filled=${filled}\n @click=${async (e: MouseEvent) => {\n /* all actions should be bloked for a second */\n const button = e.currentTarget as any\n button.icon = 'rotate_right'\n button.setAttribute('working', true)\n button.disabled = true\n\n try {\n await action()\n } finally {\n await sleep(1000)\n button.disabled = false\n /* because icon can be changed after sleep, don't use closure 'icon'. */\n button.icon = this.actions[idx]?.icon || 'done_all'\n button.removeAttribute('working')\n }\n }}\n >\n <md-icon>${icon || 'done_all'}</md-icon>\n ${title}\n </button>\n `\n })}\n `\n }\n\n async updated(changed: PropertyValues<this>) {\n if (changed.has('actions')) {\n requestAnimationFrame(this.overflownUpdater)\n }\n }\n\n stateChanged(state: any) {\n const { actions } = state.route?.context || {}\n\n if (actions) {\n this.actions = actions.filter((action: any) => !!action)\n }\n }\n\n showMore() {\n openOverlay('context-toolbar-overlay', {\n template: html`<ox-page-action-overlay-template></ox-page-action-overlay-template>`\n })\n }\n}\n"]}
1
+ {"version":3,"file":"ox-page-action-context-bar.js","sourceRoot":"","sources":["../../../src/tools/ox-page-action-context-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport './ox-page-action-overlay-template.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport throttle from 'lodash-es/throttle'\nimport { connect } from 'pwa-helpers/connect-mixin'\n\nimport { openOverlay } from '@operato/layout'\nimport { store } from '@operato/shell'\nimport { sleep } from '@operato/utils'\n\n@customElement('ox-page-action-context-bar')\nexport class PageActionContextBar extends connect(store)(LitElement) {\n static get styles() {\n return [\n css`\n :host {\n display: flex;\n overflow: hidden;\n gap: var(--padding-narrow);\n }\n\n :host *:focus {\n outline: none;\n }\n\n button {\n display: flex;\n align-items: center;\n background-color: var(--button-background-color, #fafbfc);\n border: 1px solid rgba(var(--primary-color-rgb), 0.5);\n border-radius: var(--button-border-radius);\n\n font-size: var(--fontsize-default);\n color: var(--secondary-color);\n\n md-icon {\n margin: 4px 1px;\n\n --md-icon-size: 18px;\n color: var(--primary-color);\n }\n &:hover {\n background-color: var(--primary-color);\n\n color: var(--theme-white-color);\n\n md-icon {\n color: var(--white-theme-color);\n }\n }\n }\n\n [filled] {\n font-variation-settings: 'FILL' 1;\n }\n\n [danger] {\n color: var(--mdc-danger-button-primary-color);\n border-color: var(--mdc-danger-button-outline-color);\n\n md-icon {\n color: var(--mdc-danger-button-primary-color);\n }\n &:hover {\n background-color: var(--mdc-danger-button-primary-color);\n }\n }\n\n [more] {\n position: absolute;\n top: 0;\n right: 0;\n background-color: var(--context-action-bar-more-button-background-color);\n box-shadow: -2px 0px 2px 1px rgba(0, 0, 0, 0.2);\n padding: var(--context-action-bar-more-button-padding);\n color: var(--context-action-bar-more-button-color);\n padding: 10px;\n font-size: 2rem;\n }\n\n @media screen and (max-width: 460px) {\n :host {\n gap: 0;\n }\n\n [more] {\n margin-top: -10px;\n }\n\n button {\n border-radius: 0;\n }\n }\n\n @keyframes rotate {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n `\n ]\n }\n\n @property({ type: Array }) actions: {\n title: string\n action: () => void\n icon: string\n type: string\n select: string[]\n href?: string\n emphasis?: boolean\n }[] = []\n @state() private overflown: boolean = false\n\n private overflownUpdaterThrottle: any\n private resizeCallback: any\n\n get overflownUpdater() {\n if (!this.overflownUpdaterThrottle) {\n this.overflownUpdaterThrottle = throttle(() => {\n this.overflown = this.scrollWidth > this.clientWidth\n }, 100)\n }\n\n return this.overflownUpdaterThrottle\n }\n\n connectedCallback() {\n super.connectedCallback()\n\n this.resizeCallback = () => this.overflownUpdater()\n\n window.addEventListener('resize', this.resizeCallback)\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n\n window.removeEventListener('resize', this.resizeCallback)\n }\n\n render() {\n return html`\n ${this.renderActions()}\n ${this.overflown ? html` <md-icon more @click=${this.showMore.bind(this)}>more_horiz</md-icon> ` : html``}\n `\n }\n\n renderActions() {\n return html`\n ${this.actions.map(($action, idx) => {\n let { type, title, icon, action, select, href, emphasis } = $action as any\n let { outlined, raised, dense, danger, filled } = emphasis || {}\n\n return type == 'text'\n ? html` <span @click=${action}>${title}</span> `\n : type == 'select' || (select && select.length > 0)\n ? html`\n <select @change=${action}>\n ${select.map((option: any) => html` <option>${option}</option> `)}\n </select>\n `\n : type == 'link'\n ? html` <a href=${href}>${title}</a> `\n : type == 'icon'\n ? html`<md-icon @click=${action}>${icon}</md-icon>`\n : html`\n <button\n ?dense=${dense}\n ?raised=${raised}\n ?outlined=${outlined}\n ?danger=${danger}\n ?filled=${filled}\n @click=${async (e: MouseEvent) => {\n /* all actions should be bloked for a second */\n const button = e.currentTarget as any\n button.icon = 'rotate_right'\n button.setAttribute('working', true)\n button.disabled = true\n\n try {\n await action()\n } finally {\n await sleep(1000)\n button.disabled = false\n /* because icon can be changed after sleep, don't use closure 'icon'. */\n button.icon = this.actions[idx]?.icon || 'done_all'\n button.removeAttribute('working')\n }\n }}\n >\n <md-icon>${icon || 'done_all'}</md-icon>\n ${title}\n </button>\n `\n })}\n `\n }\n\n async updated(changed: PropertyValues<this>) {\n if (changed.has('actions')) {\n requestAnimationFrame(this.overflownUpdater)\n }\n }\n\n stateChanged(state: any) {\n const { actions } = state.route?.context || {}\n\n if (actions) {\n this.actions = actions.filter((action: any) => !!action)\n }\n }\n\n showMore() {\n openOverlay('context-toolbar-overlay', {\n template: html`<ox-page-action-overlay-template></ox-page-action-overlay-template>`\n })\n }\n}\n"]}
package/dist/src/tools/ox-title-bar.js CHANGED
@@ -58,7 +58,7 @@ TitleBar.styles = [
58
58
  --help-icon-opacity: 0.2;
59
59
  --help-icon-size: 20px;
60
60
 
61
- --mdc-icon-size: 20px;
61
+ --md-icon-size: 20px;
62
62
 
63
63
  --input-search-padding: 7px;
64
64
  --input-search-border-bottom: none;
package/dist/src/tools/ox-title-bar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-title-bar.js","sourceRoot":"","sources":["../../../src/tools/ox-title-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/input/ox-input-search.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers'\n\nimport { openHelp } from '@operato/help'\nimport { store } from '@operato/shell'\n\n@customElement('ox-title-bar')\nexport class TitleBar extends connect(store)(LitElement) {\n static styles = [\n css`\n :host {\n display: flex;\n align-items: center;\n\n --help-icon-color: #fff;\n --help-icon-hover-color: #fff;\n --help-icon-opacity: 0.2;\n --help-icon-size: 20px;\n\n --mdc-icon-size: 20px;\n\n --input-search-padding: 7px;\n --input-search-border-bottom: none;\n --input-search-focus-border-bottom: none;\n --input-search-font: normal 16px var(--theme-font);\n }\n\n [titler] {\n display: flex;\n font: var(--context-toolbar-title);\n }\n\n [titler] > * {\n align-self: center;\n }\n\n [help] {\n opacity: var(--help-icon-opacity);\n font-size: var(--help-icon-size);\n color: var(--help-icon-color);\n }\n\n [help]:hover {\n cursor: help;\n opacity: var(--help-icon-hover-opacity);\n color: var(--help-icon-hover-color);\n }\n\n [search] [help] {\n color: var(--secondary-color);\n }\n\n [search] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n align-self: center;\n color: var(--secondary-color);\n background-color: var(--opacity-light-color);\n border-radius: 999em;\n padding: 0 10px;\n }\n\n [search] > * {\n align-self: center;\n }\n `\n ]\n\n @state() private context: any\n\n render() {\n var { search, filter, title, help } = this.context || ({} as any)\n var { value = '', handler: searchHandler, placeholder = '', autofocus = true } = search || ({} as any)\n const { handler: filterHandler } = filter || ({} as any)\n const { icon, text = title } = typeof title === 'object' ? title : ({} as any)\n const searchable = typeof searchHandler == 'function'\n const filterable = typeof filterHandler == 'function'\n\n if (searchable && title) {\n placeholder ||= text\n title = ''\n }\n\n return html`\n ${title ? html` <div titler>${icon ? html`<md-icon>${icon}</md-icon>&nbsp;` : html``}${text}</div> ` : html``}\n ${help && title ? html` &nbsp;<md-icon @click=${(e: MouseEvent) => openHelp(help)} help>help</md-icon> ` : html``}\n ${searchable || filterable\n ? html`\n <div search>\n ${searchable\n ? html` <ox-input-search\n .placeholder=${placeholder}\n .value=${value || ''}\n ?autofocus=${autofocus}\n @change=${(e: Event) => {\n searchHandler((e.target as any).value)\n }}\n ></ox-input-search>`\n : html``}\n ${!title && help && searchable\n ? html`<md-icon @click=${(e: MouseEvent) => openHelp(help)} help>help</md-icon>`\n : html``}\n ${filterable ? html`<md-icon @click=${(e: MouseEvent) => filterHandler()}>tune</md-icon>` : html``}\n </div>\n `\n : html``}\n `\n }\n\n stateChanged(state: any) {\n this.context = state.route.context\n }\n}\n"]}
1
+ {"version":3,"file":"ox-title-bar.js","sourceRoot":"","sources":["../../../src/tools/ox-title-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/input/ox-input-search.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers'\n\nimport { openHelp } from '@operato/help'\nimport { store } from '@operato/shell'\n\n@customElement('ox-title-bar')\nexport class TitleBar extends connect(store)(LitElement) {\n static styles = [\n css`\n :host {\n display: flex;\n align-items: center;\n\n --help-icon-color: #fff;\n --help-icon-hover-color: #fff;\n --help-icon-opacity: 0.2;\n --help-icon-size: 20px;\n\n --md-icon-size: 20px;\n\n --input-search-padding: 7px;\n --input-search-border-bottom: none;\n --input-search-focus-border-bottom: none;\n --input-search-font: normal 16px var(--theme-font);\n }\n\n [titler] {\n display: flex;\n font: var(--context-toolbar-title);\n }\n\n [titler] > * {\n align-self: center;\n }\n\n [help] {\n opacity: var(--help-icon-opacity);\n font-size: var(--help-icon-size);\n color: var(--help-icon-color);\n }\n\n [help]:hover {\n cursor: help;\n opacity: var(--help-icon-hover-opacity);\n color: var(--help-icon-hover-color);\n }\n\n [search] [help] {\n color: var(--secondary-color);\n }\n\n [search] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n align-self: center;\n color: var(--secondary-color);\n background-color: var(--opacity-light-color);\n border-radius: 999em;\n padding: 0 10px;\n }\n\n [search] > * {\n align-self: center;\n }\n `\n ]\n\n @state() private context: any\n\n render() {\n var { search, filter, title, help } = this.context || ({} as any)\n var { value = '', handler: searchHandler, placeholder = '', autofocus = true } = search || ({} as any)\n const { handler: filterHandler } = filter || ({} as any)\n const { icon, text = title } = typeof title === 'object' ? title : ({} as any)\n const searchable = typeof searchHandler == 'function'\n const filterable = typeof filterHandler == 'function'\n\n if (searchable && title) {\n placeholder ||= text\n title = ''\n }\n\n return html`\n ${title ? html` <div titler>${icon ? html`<md-icon>${icon}</md-icon>&nbsp;` : html``}${text}</div> ` : html``}\n ${help && title ? html` &nbsp;<md-icon @click=${(e: MouseEvent) => openHelp(help)} help>help</md-icon> ` : html``}\n ${searchable || filterable\n ? html`\n <div search>\n ${searchable\n ? html` <ox-input-search\n .placeholder=${placeholder}\n .value=${value || ''}\n ?autofocus=${autofocus}\n @change=${(e: Event) => {\n searchHandler((e.target as any).value)\n }}\n ></ox-input-search>`\n : html``}\n ${!title && help && searchable\n ? html`<md-icon @click=${(e: MouseEvent) => openHelp(help)} help>help</md-icon>`\n : html``}\n ${filterable ? html`<md-icon @click=${(e: MouseEvent) => filterHandler()}>tune</md-icon>` : html``}\n </div>\n `\n : html``}\n `\n }\n\n stateChanged(state: any) {\n this.context = state.route.context\n }\n}\n"]}
package/dist/stories/ox-context-page-toolbar-select-buttons.stories.js CHANGED
@@ -31,7 +31,7 @@ const Template = ({ label = '' }) => html `
31
31
  <div style="height:600px;">
32
32
  <div class="header">
33
33
  <div class="title">
34
- <md-icon>summarize</md-icon>
34
+ <md-icon>apps</md-icon>
35
35
  ${label}
36
36
  </div>
37
37
 
@@ -71,24 +71,40 @@ const Template = ({ label = '' }) => html `
71
71
  {
72
72
  title: 'save',
73
73
  action: () => { },
74
- icon: 'save',
74
+ icon: 'save'
75
+ },
76
+ {
77
+ title: 'copy',
78
+ action: () => { },
79
+ icon: 'content_copy',
75
80
  emphasis: {
76
- danger: true,
77
- filled: true
81
+ outlined: true
78
82
  }
79
83
  },
80
84
  {
81
- title: 'copy',
85
+ title: 'edit',
82
86
  action: () => { },
83
87
  icon: 'content_copy',
84
88
  emphasis: {
85
89
  outlined: true
86
90
  }
87
91
  },
92
+ {
93
+ title: 'hoppaang',
94
+ action: () => { },
95
+ icon: '',
96
+ emphasis: {
97
+ outlined: true
98
+ }
99
+ },
88
100
  {
89
101
  title: 'delete',
90
102
  action: () => { },
91
- icon: 'delete'
103
+ icon: 'delete',
104
+ emphasis: {
105
+ danger: true,
106
+ filled: true
107
+ }
92
108
  }
93
109
  ]}
94
110
  ></ox-page-action-context-bar>`
package/dist/stories/ox-context-page-toolbar-select-buttons.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-context-page-toolbar-select-buttons.stories.js","sourceRoot":"","sources":["../../stories/ox-context-page-toolbar-select-buttons.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,2CAA2C,CAAA;AAClD,OAAO,4CAA4C,CAAA;AACnD,OAAO,2CAA2C,CAAA;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,OAAO,iBAAiB,CAAA;AAExB,OAAO,EAAO,IAAI,EAA0B,MAAM,KAAK,CAAA;AAEvD,eAAe;IACb,KAAK,EAAE,wCAAwC;IAC/C,SAAS,EAAE,yBAAyB;IACpC,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC7B;CACF,CAAA;AAYD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,GAAG,EAAE,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;MAY9D,kBAAkB,CAAC,OAAO;;;;;;;UAOtB,KAAK;;;;;;kBAMG,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;;iBAEQ,QAAQ;mBACN;IACT,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;IACtC,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;IACxC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;CACvC;;;;;;eAMM;IACP;QACE,QAAQ,EAAE,aAAa,CAAC,KAAK;QAC7B,QAAQ,EAAE,IAAI,CAAA,+BAA+B;QAC7C,OAAO,EAAE,YAAY;KACtB;IACD;QACE,QAAQ,EAAE,aAAa,CAAC,KAAK;QAC7B,QAAQ,EAAE,IAAI,CAAA,6BAA6B;QAC3C,OAAO,EAAE,YAAY;KACtB;IACD;QACE,QAAQ,EAAE,aAAa,CAAC,MAAM;QAC9B,QAAQ,EAAE,IAAI,CAAA;uBACD;YACT;gBACE,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,IAAI,EAAE,MAAM;gBACZ,QAAQ,EAAE;oBACR,MAAM,EAAE,IAAI;oBACZ,MAAM,EAAE,IAAI;iBACb;aACF;YACD;gBACE,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,IAAI,EAAE,cAAc;gBACpB,QAAQ,EAAE;oBACR,QAAQ,EAAE,IAAI;iBACf;aACF;YACD;gBACE,KAAK,EAAE,QAAQ;gBACf,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,IAAI,EAAE,QAAQ;aACf;SACF;yCAC4B;KAChC;CACF;iBACU;IACT,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,KAAK;CACf;;;;;CAKN,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,sBAAsB;CAC9B,CAAA","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../src/layouts/ox-context-page-toolbar.js'\nimport '../src/tools/ox-page-action-context-bar.js'\nimport '@operato/input/ox-input-select-buttons.js'\nimport { CommonHeaderStyles } from '@operato/styles'\nimport { TOOL_POSITION } from '@operato/layout'\n\nimport '@operato/styles'\n\nimport { css, html, render, TemplateResult } from 'lit'\n\nexport default {\n title: 'ox-context-page-toolbar select buttons',\n component: 'ox-context-page-toolbar',\n argTypes: {\n label: { control: 'string' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n label?: string\n}\n\nconst Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n \n <link href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\" rel=\"stylesheet\">\n <link href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\" rel=\"stylesheet\">\n <link href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\" rel=\"stylesheet\">\n\n <style>\n body {\n background-color: white;\n }\n\n ${CommonHeaderStyles.cssText}\n </style>\n\n <div style=\"height:600px;\">\n <div class=\"header\">\n <div class=\"title\">\n <md-icon>summarize</md-icon>\n ${label}\n </div>\n\n <div class=\"filters\">\n <label>Filter-X</label><input type=\"text\" name=\"name\"></input>\n <ox-input-select-buttons\n @change=${(e: Event) => {\n console.log((e.target as HTMLInputElement).value)\n }}\n name=\"wearables\"\n .value=${'Gloves'}\n .options=${[\n { display: 'SHOOSE', value: 'Shoose' },\n { display: 'CHOTHES', value: 'Clothes' },\n { display: 'GLOVES', value: 'Gloves' }\n ]}\n multiple\n ></ox-input-select-buttons>\n </div>\n\n <ox-context-page-toolbar class=\"actions\" \n .tools=${[\n {\n position: TOOL_POSITION.FRONT,\n template: html` <md-icon>download</md-icon> `,\n context: 'exportable'\n },\n {\n position: TOOL_POSITION.FRONT,\n template: html` <md-icon>upload</md-icon> `,\n context: 'importable'\n },\n {\n position: TOOL_POSITION.CENTER,\n template: html`<ox-page-action-context-bar\n .actions=${[\n {\n title: 'save',\n action: () => {},\n icon: 'save',\n emphasis: {\n danger: true,\n filled: true\n }\n },\n {\n title: 'copy',\n action: () => {},\n icon: 'content_copy',\n emphasis: {\n outlined: true\n }\n },\n {\n title: 'delete',\n action: () => {},\n icon: 'delete'\n }\n ]}\n ></ox-page-action-context-bar>`\n }\n ]}\n .context=${{\n exportable: true,\n importable: true,\n toolbar: false\n }}\n \n }> </ox-context-page-toolbar>\n </div>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n label: 'common header styles'\n}\n"]}
1
+ {"version":3,"file":"ox-context-page-toolbar-select-buttons.stories.js","sourceRoot":"","sources":["../../stories/ox-context-page-toolbar-select-buttons.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,2CAA2C,CAAA;AAClD,OAAO,4CAA4C,CAAA;AACnD,OAAO,2CAA2C,CAAA;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,OAAO,iBAAiB,CAAA;AAExB,OAAO,EAAO,IAAI,EAA0B,MAAM,KAAK,CAAA;AAEvD,eAAe;IACb,KAAK,EAAE,wCAAwC;IAC/C,SAAS,EAAE,yBAAyB;IACpC,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC7B;CACF,CAAA;AAYD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,GAAG,EAAE,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;MAY9D,kBAAkB,CAAC,OAAO;;;;;;;UAOtB,KAAK;;;;;;kBAMG,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;;iBAEQ,QAAQ;mBACN;IACT,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;IACtC,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;IACxC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;CACvC;;;;;;eAMM;IACP;QACE,QAAQ,EAAE,aAAa,CAAC,KAAK;QAC7B,QAAQ,EAAE,IAAI,CAAA,+BAA+B;QAC7C,OAAO,EAAE,YAAY;KACtB;IACD;QACE,QAAQ,EAAE,aAAa,CAAC,KAAK;QAC7B,QAAQ,EAAE,IAAI,CAAA,6BAA6B;QAC3C,OAAO,EAAE,YAAY;KACtB;IACD;QACE,QAAQ,EAAE,aAAa,CAAC,MAAM;QAC9B,QAAQ,EAAE,IAAI,CAAA;uBACD;YACT;gBACE,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,IAAI,EAAE,MAAM;aACb;YACD;gBACE,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,IAAI,EAAE,cAAc;gBACpB,QAAQ,EAAE;oBACR,QAAQ,EAAE,IAAI;iBACf;aACF;YACD;gBACE,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,IAAI,EAAE,cAAc;gBACpB,QAAQ,EAAE;oBACR,QAAQ,EAAE,IAAI;iBACf;aACF;YACD;gBACE,KAAK,EAAE,UAAU;gBACjB,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,IAAI,EAAE,EAAE;gBACR,QAAQ,EAAE;oBACR,QAAQ,EAAE,IAAI;iBACf;aACF;YACD;gBACE,KAAK,EAAE,QAAQ;gBACf,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,IAAI,EAAE,QAAQ;gBACd,QAAQ,EAAE;oBACR,MAAM,EAAE,IAAI;oBACZ,MAAM,EAAE,IAAI;iBACb;aACF;SACF;yCAC4B;KAChC;CACF;iBACU;IACT,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,KAAK;CACf;;;;;CAKN,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,sBAAsB;CAC9B,CAAA","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../src/layouts/ox-context-page-toolbar.js'\nimport '../src/tools/ox-page-action-context-bar.js'\nimport '@operato/input/ox-input-select-buttons.js'\nimport { CommonHeaderStyles } from '@operato/styles'\nimport { TOOL_POSITION } from '@operato/layout'\n\nimport '@operato/styles'\n\nimport { css, html, render, TemplateResult } from 'lit'\n\nexport default {\n title: 'ox-context-page-toolbar select buttons',\n component: 'ox-context-page-toolbar',\n argTypes: {\n label: { control: 'string' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n label?: string\n}\n\nconst Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n \n <link href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\" rel=\"stylesheet\">\n <link href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\" rel=\"stylesheet\">\n <link href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\" rel=\"stylesheet\">\n\n <style>\n body {\n background-color: white;\n }\n\n ${CommonHeaderStyles.cssText}\n </style>\n\n <div style=\"height:600px;\">\n <div class=\"header\">\n <div class=\"title\">\n <md-icon>apps</md-icon>\n ${label}\n </div>\n\n <div class=\"filters\">\n <label>Filter-X</label><input type=\"text\" name=\"name\"></input>\n <ox-input-select-buttons\n @change=${(e: Event) => {\n console.log((e.target as HTMLInputElement).value)\n }}\n name=\"wearables\"\n .value=${'Gloves'}\n .options=${[\n { display: 'SHOOSE', value: 'Shoose' },\n { display: 'CHOTHES', value: 'Clothes' },\n { display: 'GLOVES', value: 'Gloves' }\n ]}\n multiple\n ></ox-input-select-buttons>\n </div>\n\n <ox-context-page-toolbar class=\"actions\" \n .tools=${[\n {\n position: TOOL_POSITION.FRONT,\n template: html` <md-icon>download</md-icon> `,\n context: 'exportable'\n },\n {\n position: TOOL_POSITION.FRONT,\n template: html` <md-icon>upload</md-icon> `,\n context: 'importable'\n },\n {\n position: TOOL_POSITION.CENTER,\n template: html`<ox-page-action-context-bar\n .actions=${[\n {\n title: 'save',\n action: () => {},\n icon: 'save'\n },\n {\n title: 'copy',\n action: () => {},\n icon: 'content_copy',\n emphasis: {\n outlined: true\n }\n },\n {\n title: 'edit',\n action: () => {},\n icon: 'content_copy',\n emphasis: {\n outlined: true\n }\n },\n {\n title: 'hoppaang',\n action: () => {},\n icon: '',\n emphasis: {\n outlined: true\n }\n },\n {\n title: 'delete',\n action: () => {},\n icon: 'delete',\n emphasis: {\n danger: true,\n filled: true\n }\n }\n ]}\n ></ox-page-action-context-bar>`\n }\n ]}\n .context=${{\n exportable: true,\n importable: true,\n toolbar: false\n }}\n \n }> </ox-context-page-toolbar>\n </div>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n label: 'common header styles'\n}\n"]}
package/dist/stories/ox-context-page-toolbar-select.stories.js CHANGED
@@ -30,7 +30,7 @@ const Template = ({ label = '' }) => html `
30
30
  <div style="height:600px;">
31
31
  <div class="header">
32
32
  <div class="title">
33
- <md-icon>summarize</md-icon>
33
+ <md-icon>apps</md-icon>
34
34
  ${label}
35
35
  </div>
36
36
 
package/dist/stories/ox-context-page-toolbar-select.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-context-page-toolbar-select.stories.js","sourceRoot":"","sources":["../../stories/ox-context-page-toolbar-select.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,2CAA2C,CAAA;AAClD,OAAO,4CAA4C,CAAA;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,OAAO,iBAAiB,CAAA;AAExB,OAAO,EAAO,IAAI,EAA0B,MAAM,KAAK,CAAA;AAEvD,eAAe;IACb,KAAK,EAAE,gCAAgC;IACvC,SAAS,EAAE,yBAAyB;IACpC,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC7B;CACF,CAAA;AAYD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,GAAG,EAAE,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;MAY9D,kBAAkB,CAAC,OAAO;;;;;;;UAOtB,KAAK;;;;;;;;eAQA;IACP;QACE,QAAQ,EAAE,aAAa,CAAC,KAAK;QAC7B,QAAQ,EAAE,IAAI,CAAA,+BAA+B;QAC7C,OAAO,EAAE,YAAY;KACtB;IACD;QACE,QAAQ,EAAE,aAAa,CAAC,KAAK;QAC7B,QAAQ,EAAE,IAAI,CAAA,6BAA6B;QAC3C,OAAO,EAAE,YAAY;KACtB;IACD;QACE,QAAQ,EAAE,aAAa,CAAC,MAAM;QAC9B,QAAQ,EAAE,IAAI,CAAA;uBACD;YACT;gBACE,KAAK,EAAE,OAAO;gBACd,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,MAAM,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC;aAC3C;YACD;gBACE,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,IAAI,EAAE,MAAM;aACb;SACF;yCAC4B;KAChC;CACF;iBACU;IACT,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,KAAK;CACf;;;;;CAKN,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,sBAAsB;CAC9B,CAAA","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../src/layouts/ox-context-page-toolbar.js'\nimport '../src/tools/ox-page-action-context-bar.js'\nimport { CommonHeaderStyles } from '@operato/styles'\nimport { TOOL_POSITION } from '@operato/layout'\n\nimport '@operato/styles'\n\nimport { css, html, render, TemplateResult } from 'lit'\n\nexport default {\n title: 'ox-context-page-toolbar-select',\n component: 'ox-context-page-toolbar',\n argTypes: {\n label: { control: 'string' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n label?: string\n}\n\nconst Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n\n <link href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\" rel=\"stylesheet\">\n <link href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\" rel=\"stylesheet\">\n <link href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\" rel=\"stylesheet\">\n\n <style>\n body {\n background-color: white;\n }\n\n ${CommonHeaderStyles.cssText}\n </style>\n\n <div style=\"height:600px;\">\n <div class=\"header\">\n <div class=\"title\">\n <md-icon>summarize</md-icon>\n ${label}\n </div>\n\n <div class=\"filters\">\n <label>Filter</label><input type=\"text\"></input>\n </div>\n\n <ox-context-page-toolbar class=\"actions\" \n .tools=${[\n {\n position: TOOL_POSITION.FRONT,\n template: html` <md-icon>download</md-icon> `,\n context: 'exportable'\n },\n {\n position: TOOL_POSITION.FRONT,\n template: html` <md-icon>upload</md-icon> `,\n context: 'importable'\n },\n {\n position: TOOL_POSITION.CENTER,\n template: html`<ox-page-action-context-bar\n .actions=${[\n {\n title: 'smile',\n action: () => {},\n select: ['', 'delete', 'hahaha', 'hohoho']\n },\n {\n title: 'save',\n action: () => {},\n icon: 'save'\n }\n ]}\n ></ox-page-action-context-bar>`\n }\n ]}\n .context=${{\n exportable: true,\n importable: true,\n toolbar: false\n }}\n \n }> </ox-context-page-toolbar>\n </div>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n label: 'common header styles'\n}\n"]}
1
+ {"version":3,"file":"ox-context-page-toolbar-select.stories.js","sourceRoot":"","sources":["../../stories/ox-context-page-toolbar-select.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,2CAA2C,CAAA;AAClD,OAAO,4CAA4C,CAAA;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,OAAO,iBAAiB,CAAA;AAExB,OAAO,EAAO,IAAI,EAA0B,MAAM,KAAK,CAAA;AAEvD,eAAe;IACb,KAAK,EAAE,gCAAgC;IACvC,SAAS,EAAE,yBAAyB;IACpC,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC7B;CACF,CAAA;AAYD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,GAAG,EAAE,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;MAY9D,kBAAkB,CAAC,OAAO;;;;;;;UAOtB,KAAK;;;;;;;;eAQA;IACP;QACE,QAAQ,EAAE,aAAa,CAAC,KAAK;QAC7B,QAAQ,EAAE,IAAI,CAAA,+BAA+B;QAC7C,OAAO,EAAE,YAAY;KACtB;IACD;QACE,QAAQ,EAAE,aAAa,CAAC,KAAK;QAC7B,QAAQ,EAAE,IAAI,CAAA,6BAA6B;QAC3C,OAAO,EAAE,YAAY;KACtB;IACD;QACE,QAAQ,EAAE,aAAa,CAAC,MAAM;QAC9B,QAAQ,EAAE,IAAI,CAAA;uBACD;YACT;gBACE,KAAK,EAAE,OAAO;gBACd,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,MAAM,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC;aAC3C;YACD;gBACE,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,IAAI,EAAE,MAAM;aACb;SACF;yCAC4B;KAChC;CACF;iBACU;IACT,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,KAAK;CACf;;;;;CAKN,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,sBAAsB;CAC9B,CAAA","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../src/layouts/ox-context-page-toolbar.js'\nimport '../src/tools/ox-page-action-context-bar.js'\nimport { CommonHeaderStyles } from '@operato/styles'\nimport { TOOL_POSITION } from '@operato/layout'\n\nimport '@operato/styles'\n\nimport { css, html, render, TemplateResult } from 'lit'\n\nexport default {\n title: 'ox-context-page-toolbar-select',\n component: 'ox-context-page-toolbar',\n argTypes: {\n label: { control: 'string' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n label?: string\n}\n\nconst Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n\n <link href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\" rel=\"stylesheet\">\n <link href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\" rel=\"stylesheet\">\n <link href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\" rel=\"stylesheet\">\n\n <style>\n body {\n background-color: white;\n }\n\n ${CommonHeaderStyles.cssText}\n </style>\n\n <div style=\"height:600px;\">\n <div class=\"header\">\n <div class=\"title\">\n <md-icon>apps</md-icon>\n ${label}\n </div>\n\n <div class=\"filters\">\n <label>Filter</label><input type=\"text\"></input>\n </div>\n\n <ox-context-page-toolbar class=\"actions\" \n .tools=${[\n {\n position: TOOL_POSITION.FRONT,\n template: html` <md-icon>download</md-icon> `,\n context: 'exportable'\n },\n {\n position: TOOL_POSITION.FRONT,\n template: html` <md-icon>upload</md-icon> `,\n context: 'importable'\n },\n {\n position: TOOL_POSITION.CENTER,\n template: html`<ox-page-action-context-bar\n .actions=${[\n {\n title: 'smile',\n action: () => {},\n select: ['', 'delete', 'hahaha', 'hohoho']\n },\n {\n title: 'save',\n action: () => {},\n icon: 'save'\n }\n ]}\n ></ox-page-action-context-bar>`\n }\n ]}\n .context=${{\n exportable: true,\n importable: true,\n toolbar: false\n }}\n \n }> </ox-context-page-toolbar>\n </div>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n label: 'common header styles'\n}\n"]}
package/dist/stories/ox-context-page-toolbar.stories copy.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ import '@material/web/icon/icon.js';
2
+ import '../src/layouts/ox-context-page-toolbar.js';
3
+ import '../src/tools/ox-page-action-context-bar.js';
4
+ import '@operato/styles';
5
+ import { TemplateResult } from 'lit';
6
+ declare const _default: {
7
+ title: string;
8
+ component: string;
9
+ argTypes: {
10
+ label: {
11
+ control: string;
12
+ };
13
+ };
14
+ };
15
+ export default _default;
16
+ interface Story<T> {
17
+ (args: T): TemplateResult;
18
+ args?: Partial<T>;
19
+ argTypes?: Record<string, unknown>;
20
+ }
21
+ interface ArgTypes {
22
+ label?: string;
23
+ }
24
+ export declare const Regular: Story<ArgTypes>;