@operato/context 2.0.0-alpha.6 → 2.0.0-alpha.61

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/CHANGELOG.md +301 -0
  2. package/dist/src/layouts/ox-context-page-toolbar.d.ts +8 -3
  3. package/dist/src/layouts/ox-context-page-toolbar.js +6 -3
  4. package/dist/src/layouts/ox-context-page-toolbar.js.map +1 -1
  5. package/dist/src/layouts/ox-context-toolbar.d.ts +1 -1
  6. package/dist/src/tools/ox-page-action-context-bar.d.ts +11 -3
  7. package/dist/src/tools/ox-page-action-context-bar.js +21 -18
  8. package/dist/src/tools/ox-page-action-context-bar.js.map +1 -1
  9. package/dist/src/tools/ox-page-action-overlay-template.d.ts +1 -1
  10. package/dist/src/tools/ox-page-title-bar.d.ts +1 -1
  11. package/dist/src/tools/ox-title-bar.d.ts +1 -1
  12. package/dist/stories/ox-context-page-toolbar-select-buttons.stories.d.ts +25 -0
  13. package/dist/stories/ox-context-page-toolbar-select-buttons.stories.js +101 -0
  14. package/dist/stories/ox-context-page-toolbar-select-buttons.stories.js.map +1 -0
  15. package/dist/stories/ox-context-page-toolbar-select.stories.d.ts +24 -0
  16. package/dist/stories/ox-context-page-toolbar-select.stories.js +82 -0
  17. package/dist/stories/ox-context-page-toolbar-select.stories.js.map +1 -0
  18. package/dist/stories/ox-context-page-toolbar.stories.d.ts +24 -0
  19. package/dist/stories/ox-context-page-toolbar.stories.js +87 -0
  20. package/dist/stories/ox-context-page-toolbar.stories.js.map +1 -0
  21. package/dist/tsconfig.tsbuildinfo +1 -1
  22. package/package.json +19 -19
  23. package/src/layouts/ox-context-page-toolbar.ts +9 -3
  24. package/src/tools/ox-page-action-context-bar.ts +50 -38
  25. package/stories/ox-context-page-toolbar-select-buttons.stories.ts +115 -0
  26. package/stories/ox-context-page-toolbar-select.stories.ts +96 -0
  27. package/stories/ox-context-page-toolbar.stories.ts +101 -0
  28. package/themes/app-theme.css +145 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,307 @@
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.61](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.60...v2.0.0-alpha.61) (2024-04-11)
7
+
8
+ **Note:** Version bump only for package @operato/context
9
+
10
+
11
+
12
+
13
+
14
+ ## [2.0.0-alpha.60](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.59...v2.0.0-alpha.60) (2024-04-11)
15
+
16
+ **Note:** Version bump only for package @operato/context
17
+
18
+
19
+
20
+
21
+
22
+ ## [2.0.0-alpha.59](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.58...v2.0.0-alpha.59) (2024-04-11)
23
+
24
+ **Note:** Version bump only for package @operato/context
25
+
26
+
27
+
28
+
29
+
30
+ ## [2.0.0-alpha.57](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.56...v2.0.0-alpha.57) (2024-04-07)
31
+
32
+ **Note:** Version bump only for package @operato/context
33
+
34
+
35
+
36
+
37
+
38
+
39
+
40
+ **Note:** Version bump only for package @operato/context
41
+
42
+
43
+
44
+
45
+
46
+ ## [2.0.0-alpha.54](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.53...v2.0.0-alpha.54) (2024-04-01)
47
+
48
+ **Note:** Version bump only for package @operato/context
49
+
50
+
51
+
52
+
53
+
54
+ ## [2.0.0-alpha.53](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.52...v2.0.0-alpha.53) (2024-04-01)
55
+
56
+
57
+ ### :bug: Bug Fix
58
+
59
+ * storybook for ox-context-page-toolbar ([fa5b32d](https://github.com/hatiolab/operato/commit/fa5b32dfffd36db262e51c2706a5fbd719eed8ba))
60
+
61
+
62
+
63
+ ## [2.0.0-alpha.52](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.51...v2.0.0-alpha.52) (2024-03-29)
64
+
65
+ **Note:** Version bump only for package @operato/context
66
+
67
+
68
+
69
+
70
+
71
+ ## [2.0.0-alpha.51](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.50...v2.0.0-alpha.51) (2024-03-29)
72
+
73
+
74
+ ### :bug: Bug Fix
75
+
76
+ * upgrade lit ([e661c33](https://github.com/hatiolab/operato/commit/e661c333d2bb97f784b5ac2c0e365714ee5e80ff))
77
+
78
+
79
+
80
+ ## [2.0.0-alpha.49](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.48...v2.0.0-alpha.49) (2024-03-28)
81
+
82
+ **Note:** Version bump only for package @operato/context
83
+
84
+
85
+
86
+
87
+
88
+ ## [2.0.0-alpha.48](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.47...v2.0.0-alpha.48) (2024-03-28)
89
+
90
+
91
+ ### :bug: Bug Fix
92
+
93
+ * context module stories ([052ac6a](https://github.com/hatiolab/operato/commit/052ac6adc0c7cae6ddaff2babc3b344302e2aca8))
94
+
95
+
96
+
97
+ ## [2.0.0-alpha.47](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.46...v2.0.0-alpha.47) (2024-03-27)
98
+
99
+
100
+ ### :bug: Bug Fix
101
+
102
+ * storybook 실행 환경 ([6a2940f](https://github.com/hatiolab/operato/commit/6a2940fb89dc26566acdce7cf1781a71cbad61c5))
103
+
104
+
105
+
106
+ ## [2.0.0-alpha.46](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.45...v2.0.0-alpha.46) (2024-03-26)
107
+
108
+ **Note:** Version bump only for package @operato/context
109
+
110
+
111
+
112
+
113
+
114
+ ## [2.0.0-alpha.44](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.43...v2.0.0-alpha.44) (2024-03-24)
115
+
116
+ **Note:** Version bump only for package @operato/context
117
+
118
+
119
+
120
+
121
+
122
+ ## [2.0.0-alpha.43](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.42...v2.0.0-alpha.43) (2024-03-24)
123
+
124
+ **Note:** Version bump only for package @operato/context
125
+
126
+
127
+
128
+
129
+
130
+ ## [2.0.0-alpha.37](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.36...v2.0.0-alpha.37) (2024-03-18)
131
+
132
+ **Note:** Version bump only for package @operato/context
133
+
134
+
135
+
136
+
137
+
138
+ ## [2.0.0-alpha.35](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.34...v2.0.0-alpha.35) (2024-03-13)
139
+
140
+ **Note:** Version bump only for package @operato/context
141
+
142
+
143
+
144
+
145
+
146
+ ## [2.0.0-alpha.34](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.33...v2.0.0-alpha.34) (2024-03-12)
147
+
148
+ **Note:** Version bump only for package @operato/context
149
+
150
+
151
+
152
+
153
+
154
+ ## [2.0.0-alpha.32](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.31...v2.0.0-alpha.32) (2024-03-12)
155
+
156
+ **Note:** Version bump only for package @operato/context
157
+
158
+
159
+
160
+
161
+
162
+ ## [2.0.0-alpha.31](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.30...v2.0.0-alpha.31) (2024-03-03)
163
+
164
+ **Note:** Version bump only for package @operato/context
165
+
166
+
167
+
168
+
169
+
170
+ ## [2.0.0-alpha.30](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.29...v2.0.0-alpha.30) (2024-03-03)
171
+
172
+ **Note:** Version bump only for package @operato/context
173
+
174
+
175
+
176
+
177
+
178
+ ## [2.0.0-alpha.28](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.27...v2.0.0-alpha.28) (2024-02-20)
179
+
180
+
181
+ ### :bug: Bug Fix
182
+
183
+ * upgrade devDependencies for webcomponents ([1489b8b](https://github.com/hatiolab/operato/commit/1489b8b790d9bcee779a070a630697f25c01728f))
184
+
185
+
186
+
187
+ ## [2.0.0-alpha.27](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.26...v2.0.0-alpha.27) (2024-02-17)
188
+
189
+ **Note:** Version bump only for package @operato/context
190
+
191
+
192
+
193
+
194
+
195
+ ## [2.0.0-alpha.23](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.22...v2.0.0-alpha.23) (2024-02-10)
196
+
197
+ **Note:** Version bump only for package @operato/context
198
+
199
+
200
+
201
+
202
+
203
+ ## [2.0.0-alpha.22](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.21...v2.0.0-alpha.22) (2024-02-10)
204
+
205
+ **Note:** Version bump only for package @operato/context
206
+
207
+
208
+
209
+
210
+
211
+ ## [2.0.0-alpha.21](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.20...v2.0.0-alpha.21) (2024-02-09)
212
+
213
+ **Note:** Version bump only for package @operato/context
214
+
215
+
216
+
217
+
218
+
219
+ ## [2.0.0-alpha.20](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.19...v2.0.0-alpha.20) (2024-02-05)
220
+
221
+ **Note:** Version bump only for package @operato/context
222
+
223
+
224
+
225
+
226
+
227
+ ## [2.0.0-alpha.19](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.18...v2.0.0-alpha.19) (2024-02-05)
228
+
229
+ **Note:** Version bump only for package @operato/context
230
+
231
+
232
+
233
+
234
+
235
+ ## [2.0.0-alpha.17](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.16...v2.0.0-alpha.17) (2024-02-04)
236
+
237
+ **Note:** Version bump only for package @operato/context
238
+
239
+
240
+
241
+
242
+
243
+ ## [2.0.0-alpha.16](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.15...v2.0.0-alpha.16) (2024-02-03)
244
+
245
+ **Note:** Version bump only for package @operato/context
246
+
247
+
248
+
249
+
250
+
251
+ ## [2.0.0-alpha.13](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.12...v2.0.0-alpha.13) (2024-01-28)
252
+
253
+ **Note:** Version bump only for package @operato/context
254
+
255
+
256
+
257
+
258
+
259
+ ## [2.0.0-alpha.12](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.11...v2.0.0-alpha.12) (2024-01-24)
260
+
261
+ **Note:** Version bump only for package @operato/context
262
+
263
+
264
+
265
+
266
+
267
+ ## [2.0.0-alpha.11](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.10...v2.0.0-alpha.11) (2024-01-24)
268
+
269
+ **Note:** Version bump only for package @operato/context
270
+
271
+
272
+
273
+
274
+
275
+ ## [2.0.0-alpha.10](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.9...v2.0.0-alpha.10) (2024-01-22)
276
+
277
+ **Note:** Version bump only for package @operato/context
278
+
279
+
280
+
281
+
282
+
283
+ ## [2.0.0-alpha.9](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.8...v2.0.0-alpha.9) (2024-01-20)
284
+
285
+ **Note:** Version bump only for package @operato/context
286
+
287
+
288
+
289
+
290
+
291
+ ## [2.0.0-alpha.8](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.7...v2.0.0-alpha.8) (2024-01-20)
292
+
293
+ **Note:** Version bump only for package @operato/context
294
+
295
+
296
+
297
+
298
+
299
+ ## [2.0.0-alpha.7](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.6...v2.0.0-alpha.7) (2024-01-15)
300
+
301
+ **Note:** Version bump only for package @operato/context
302
+
303
+
304
+
305
+
306
+
6
307
  ## [2.0.0-alpha.6](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.5...v2.0.0-alpha.6) (2024-01-15)
7
308
 
8
309
  **Note:** Version bump only for package @operato/context
@@ -1,5 +1,6 @@
1
1
  import '@material/mwc-icon';
2
- import { LitElement } from 'lit';
2
+ import { LitElement, TemplateResult } from 'lit';
3
+ import { TOOL_POSITION } from '@operato/layout';
3
4
  declare const ContextPageToolbar_base: (new (...args: any[]) => {
4
5
  _storeUnsubscribe: import("redux").Unsubscribe;
5
6
  connectedCallback(): void;
@@ -10,8 +11,12 @@ declare const ContextPageToolbar_base: (new (...args: any[]) => {
10
11
  export declare class ContextPageToolbar extends ContextPageToolbar_base {
11
12
  static get styles(): import("lit").CSSResult[];
12
13
  context: any;
13
- private tools?;
14
- render(): import("lit").TemplateResult<1>;
14
+ tools?: {
15
+ position: TOOL_POSITION;
16
+ template: TemplateResult;
17
+ context?: string;
18
+ }[];
19
+ render(): TemplateResult<1>;
15
20
  stateChanged(state: any): void;
16
21
  }
17
22
  export {};
@@ -1,7 +1,7 @@
1
1
  import { __decorate } from "tslib";
2
2
  import '@material/mwc-icon';
3
3
  import { css, html, LitElement, nothing } from 'lit';
4
- import { customElement, property, state } from 'lit/decorators.js';
4
+ import { customElement, property } from 'lit/decorators.js';
5
5
  import { connect } from 'pwa-helpers/connect-mixin.js';
6
6
  import { TOOL_POSITION } from '@operato/layout';
7
7
  import { store } from '@operato/shell';
@@ -74,14 +74,17 @@ let ContextPageToolbar = class ContextPageToolbar extends connect(store)(LitElem
74
74
  `;
75
75
  }
76
76
  stateChanged(state) {
77
- this.tools = state.context.tools;
77
+ var _a;
78
+ if (state.context) {
79
+ this.tools = (_a = state.context) === null || _a === void 0 ? void 0 : _a.tools;
80
+ }
78
81
  }
79
82
  };
80
83
  __decorate([
81
84
  property({ type: Object })
82
85
  ], ContextPageToolbar.prototype, "context", void 0);
83
86
  __decorate([
84
- state()
87
+ property({ type: Array })
85
88
  ], ContextPageToolbar.prototype, "tools", void 0);
86
89
  ContextPageToolbar = __decorate([
87
90
  customElement('ox-context-page-toolbar')
@@ -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/mwc-icon'\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-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 mwc-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 @state() private tools?: any[]\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 this.tools = state.context.tools\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/mwc-icon'\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 mwc-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"]}
@@ -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").TemplateResult<1> | typeof nothing;
14
+ render(): import("lit-html").TemplateResult<1> | typeof nothing;
15
15
  stateChanged(state: any): void;
16
16
  }
17
17
  export {};
@@ -11,15 +11,23 @@ declare const PageActionContextBar_base: (new (...args: any[]) => {
11
11
  }) & typeof LitElement;
12
12
  export declare class PageActionContextBar extends PageActionContextBar_base {
13
13
  static get styles(): import("lit").CSSResult[];
14
- actions: any[];
14
+ actions: {
15
+ title: string;
16
+ action: () => void;
17
+ icon: string;
18
+ type: string;
19
+ select: string[];
20
+ href?: string;
21
+ emphasis?: boolean;
22
+ }[];
15
23
  private overflown;
16
24
  private overflownUpdaterThrottle;
17
25
  private resizeCallback;
18
26
  get overflownUpdater(): any;
19
27
  connectedCallback(): void;
20
28
  disconnectedCallback(): void;
21
- render(): import("lit").TemplateResult<1>;
22
- renderActions(): import("lit").TemplateResult<1>;
29
+ render(): import("lit-html").TemplateResult<1>;
30
+ renderActions(): import("lit-html").TemplateResult<1>;
23
31
  updated(changed: PropertyValues<this>): Promise<void>;
24
32
  stateChanged(state: any): void;
25
33
  showMore(): void;
@@ -3,7 +3,7 @@ import '@material/mwc-button';
3
3
  import '@material/mwc-icon';
4
4
  import './ox-page-action-overlay-template.js';
5
5
  import { css, html, LitElement } from 'lit';
6
- import { customElement, state } from 'lit/decorators.js';
6
+ import { customElement, property, state } from 'lit/decorators.js';
7
7
  import throttle from 'lodash-es/throttle';
8
8
  import { connect } from 'pwa-helpers/connect-mixin';
9
9
  import { openOverlay } from '@operato/layout';
@@ -115,23 +115,23 @@ let PageActionContextBar = class PageActionContextBar extends connect(store)(Lit
115
115
  ? html ` <span @click=${action}>${title}</span> `
116
116
  : type == 'select' || (select && select.length > 0)
117
117
  ? html `
118
- <select @change=${action}>
119
- ${select.map((option) => html ` <option>${option}</option> `)}
120
- </select>
121
- `
118
+ <select @change=${action}>
119
+ ${select.map((option) => html ` <option>${option}</option> `)}
120
+ </select>
121
+ `
122
122
  : type == 'link'
123
123
  ? html ` <a href=${href}>${title}</a> `
124
124
  : type == 'icon'
125
125
  ? html `<mwc-icon @click=${action}>${icon}</mwc-icon>`
126
126
  : html `
127
- <mwc-button
128
- label=${title}
129
- icon=${icon || 'done_all'}
130
- ?dense=${dense}
131
- ?raised=${raised}
132
- ?outlined=${outlined}
133
- ?danger=${danger}
134
- @click=${async (e) => {
127
+ <mwc-button
128
+ label=${title}
129
+ icon=${icon || 'done_all'}
130
+ ?dense=${dense}
131
+ ?raised=${raised}
132
+ ?outlined=${outlined}
133
+ ?danger=${danger}
134
+ @click=${async (e) => {
135
135
  var _a;
136
136
  /* all actions should be bloked for a second */
137
137
  const button = e.currentTarget;
@@ -149,8 +149,8 @@ let PageActionContextBar = class PageActionContextBar extends connect(store)(Lit
149
149
  button.removeAttribute('working');
150
150
  }
151
151
  }}
152
- ></mwc-button>
153
- `;
152
+ ></mwc-button>
153
+ `;
154
154
  })}
155
155
  `;
156
156
  }
@@ -160,8 +160,11 @@ let PageActionContextBar = class PageActionContextBar extends connect(store)(Lit
160
160
  }
161
161
  }
162
162
  stateChanged(state) {
163
- var _a, _b, _c;
164
- this.actions = ((_c = (_b = (_a = state.route) === null || _a === void 0 ? void 0 : _a.context) === null || _b === void 0 ? void 0 : _b.actions) === null || _c === void 0 ? void 0 : _c.filter((action) => !!action)) || [];
163
+ var _a;
164
+ const { actions } = ((_a = state.route) === null || _a === void 0 ? void 0 : _a.context) || {};
165
+ if (actions) {
166
+ this.actions = actions.filter((action) => !!action);
167
+ }
165
168
  }
166
169
  showMore() {
167
170
  openOverlay('context-toolbar-overlay', {
@@ -170,7 +173,7 @@ let PageActionContextBar = class PageActionContextBar extends connect(store)(Lit
170
173
  }
171
174
  };
172
175
  __decorate([
173
- state()
176
+ property({ type: Array })
174
177
  ], PageActionContextBar.prototype, "actions", void 0);
175
178
  __decorate([
176
179
  state()
@@ -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/mwc-button'\nimport '@material/mwc-icon'\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 mwc-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 [danger] {\n --mdc-theme-primary: var(--mdc-danger-button-primary-color);\n --mdc-button-outline-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 mwc-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 @media screen and (max-width: 460px) {\n mwc-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 @state() actions: any[] = []\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` <mwc-icon more @click=${this.showMore.bind(this)}>more_horiz</mwc-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 } = 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`<mwc-icon @click=${action}>${icon}</mwc-icon>`\n : html`\n <mwc-button\n label=${title}\n icon=${icon || 'done_all'}\n ?dense=${dense}\n ?raised=${raised}\n ?outlined=${outlined}\n ?danger=${danger}\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 ></mwc-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 this.actions = state.route?.context?.actions?.filter((action: any) => !!action) || []\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/mwc-button'\nimport '@material/mwc-icon'\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 mwc-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 [danger] {\n --mdc-theme-primary: var(--mdc-danger-button-primary-color);\n --mdc-button-outline-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 mwc-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 @media screen and (max-width: 460px) {\n mwc-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` <mwc-icon more @click=${this.showMore.bind(this)}>more_horiz</mwc-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 } = 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`<mwc-icon @click=${action}>${icon}</mwc-icon>`\n : html`\n <mwc-button\n label=${title}\n icon=${icon || 'done_all'}\n ?dense=${dense}\n ?raised=${raised}\n ?outlined=${outlined}\n ?danger=${danger}\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 ></mwc-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"]}
@@ -10,7 +10,7 @@ declare const PageActionOverlayTemplate_base: (new (...args: any[]) => {
10
10
  export declare class PageActionOverlayTemplate extends PageActionOverlayTemplate_base {
11
11
  static get styles(): import("lit").CSSResult[];
12
12
  private actions;
13
- render(): import("lit").TemplateResult<1>;
13
+ render(): import("lit-html").TemplateResult<1>;
14
14
  stateChanged(state: any): void;
15
15
  }
16
16
  export {};
@@ -12,7 +12,7 @@ export declare class PageTitleBar extends PageTitleBar_base {
12
12
  static styles: import("lit").CSSResult[];
13
13
  private context;
14
14
  mobile: boolean;
15
- render(): import("lit").TemplateResult<1>;
15
+ render(): import("lit-html").TemplateResult<1>;
16
16
  stateChanged(state: any): void;
17
17
  }
18
18
  export {};
@@ -11,7 +11,7 @@ declare const TitleBar_base: (new (...args: any[]) => {
11
11
  export declare class TitleBar extends TitleBar_base {
12
12
  static styles: import("lit").CSSResult[];
13
13
  private context;
14
- render(): import("lit").TemplateResult<1>;
14
+ render(): import("lit-html").TemplateResult<1>;
15
15
  stateChanged(state: any): void;
16
16
  }
17
17
  export {};
@@ -0,0 +1,25 @@
1
+ import '@material/mwc-icon';
2
+ import '../src/layouts/ox-context-page-toolbar.js';
3
+ import '../src/tools/ox-page-action-context-bar.js';
4
+ import '@operato/input/ox-input-select-buttons.js';
5
+ import '@operato/styles';
6
+ import { TemplateResult } from 'lit';
7
+ declare const _default: {
8
+ title: string;
9
+ component: string;
10
+ argTypes: {
11
+ label: {
12
+ control: string;
13
+ };
14
+ };
15
+ };
16
+ export default _default;
17
+ interface Story<T> {
18
+ (args: T): TemplateResult;
19
+ args?: Partial<T>;
20
+ argTypes?: Record<string, unknown>;
21
+ }
22
+ interface ArgTypes {
23
+ label?: string;
24
+ }
25
+ export declare const Regular: Story<ArgTypes>;