@operato/context 2.0.0-alpha.64 → 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 (40) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/src/layouts/ox-context-toolbar.js +49 -58
  3. package/dist/src/layouts/ox-context-toolbar.js.map +1 -1
  4. package/dist/src/tools/ox-page-action-context-bar.js +20 -23
  5. package/dist/src/tools/ox-page-action-context-bar.js.map +1 -1
  6. package/dist/stories/ox-context-page-toolbar-select-buttons.stories.js +1 -1
  7. package/dist/stories/ox-context-page-toolbar-select-buttons.stories.js.map +1 -1
  8. package/dist/stories/ox-context-page-toolbar-select.stories.js +1 -1
  9. package/dist/stories/ox-context-page-toolbar-select.stories.js.map +1 -1
  10. package/dist/stories/ox-context-page-toolbar.stories.js +1 -1
  11. package/dist/stories/ox-context-page-toolbar.stories.js.map +1 -1
  12. package/dist/stories/ox-context-toolbar-complex-2.stories.d.ts +19 -0
  13. package/dist/stories/ox-context-toolbar-complex-2.stories.js +136 -0
  14. package/dist/stories/ox-context-toolbar-complex-2.stories.js.map +1 -0
  15. package/dist/stories/ox-context-toolbar-complex.stories copy.d.ts +19 -0
  16. package/dist/stories/ox-context-toolbar-complex.stories copy.js +146 -0
  17. package/dist/stories/ox-context-toolbar-complex.stories copy.js.map +1 -0
  18. package/dist/stories/ox-context-toolbar-complex.stories.d.ts +19 -0
  19. package/dist/stories/ox-context-toolbar-complex.stories.js +146 -0
  20. package/dist/stories/ox-context-toolbar-complex.stories.js.map +1 -0
  21. package/dist/stories/ox-context-toolbar-overflow.stories.d.ts +19 -0
  22. package/dist/stories/ox-context-toolbar-overflow.stories.js +127 -0
  23. package/dist/stories/ox-context-toolbar-overflow.stories.js.map +1 -0
  24. package/dist/stories/ox-context-toolbar.stories copy.d.ts +19 -0
  25. package/dist/stories/ox-context-toolbar.stories copy.js +82 -0
  26. package/dist/stories/ox-context-toolbar.stories copy.js.map +1 -0
  27. package/dist/stories/ox-context-toolbar.stories.d.ts +1 -6
  28. package/dist/stories/ox-context-toolbar.stories.js +23 -31
  29. package/dist/stories/ox-context-toolbar.stories.js.map +1 -1
  30. package/dist/tsconfig.tsbuildinfo +1 -1
  31. package/package.json +2 -2
  32. package/src/layouts/ox-context-toolbar.ts +49 -58
  33. package/src/tools/ox-page-action-context-bar.ts +20 -23
  34. package/stories/ox-context-page-toolbar-select-buttons.stories.ts +1 -1
  35. package/stories/ox-context-page-toolbar-select.stories.ts +1 -1
  36. package/stories/ox-context-page-toolbar.stories.ts +1 -1
  37. package/stories/ox-context-toolbar-complex.stories.ts +158 -0
  38. package/stories/ox-context-toolbar-overflow.stories.ts +139 -0
  39. package/stories/ox-context-toolbar.stories.ts +24 -34
  40. package/themes/context-theme.css +74 -0
package/dist/stories/ox-context-toolbar-complex-2.stories.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ox-context-toolbar-complex-2.stories.js","sourceRoot":"","sources":["../../stories/ox-context-toolbar-complex-2.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,sCAAsC,CAAA;AAC7C,OAAO,4CAA4C,CAAA;AACnD,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,8BAA8B;IACrC,SAAS,EAAE,oBAAoB;IAC/B,QAAQ,EAAE,EAAE;CACb,CAAA;AAUD,MAAM,QAAQ,GAAoB,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;eAyB7B;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;aACrB;YACD;gBACE,KAAK,EAAE,QAAQ;gBACf,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,IAAI,EAAE,QAAQ;aACf;SACF;yCAC4B;KAChC;IACD;QACE,QAAQ,EAAE,aAAa,CAAC,IAAI;QAC5B,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;aACrB;YACD;gBACE,KAAK,EAAE,QAAQ;gBACf,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,IAAI,EAAE,QAAQ;aACf;SACF;yCAC4B;KAChC;IACD;QACE,QAAQ,EAAE,aAAa,CAAC,QAAQ;QAChC,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;aACrB;YACD;gBACE,KAAK,EAAE,QAAQ;gBACf,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,IAAI,EAAE,QAAQ;aACf;SACF;yCAC4B;KAChC;IACD;QACE,QAAQ,EAAE,aAAa,CAAC,QAAQ;QAChC,QAAQ,EAAE,IAAI,CAAA,+BAA+B;QAC7C,OAAO,EAAE,YAAY;KACtB;IACD;QACE,QAAQ,EAAE,aAAa,CAAC,QAAQ;QAChC,QAAQ,EAAE,IAAI,CAAA,6BAA6B;QAC3C,OAAO,EAAE,YAAY;KACtB;CACF;iBACU;IACT,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,IAAI;CACd;;;;CAIN,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../src/layouts/ox-context-toolbar.js'\nimport '../src/tools/ox-page-action-context-bar.js'\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-toolbar complex-2',\n component: 'ox-context-toolbar',\n argTypes: {}\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {}\n\nconst Template: Story<ArgTypes> = () => html`\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/context-theme.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n body {\n background-color: white;\n }\n </style>\n\n <div style=\"height:100px; padding: 10px; background-color: black;\">\n <ox-context-toolbar\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 },\n {\n title: 'delete',\n action: () => {},\n icon: 'delete'\n }\n ]}\n ></ox-page-action-context-bar>`\n },\n {\n position: TOOL_POSITION.REAR,\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 },\n {\n title: 'delete',\n action: () => {},\n icon: 'delete'\n }\n ]}\n ></ox-page-action-context-bar>`\n },\n {\n position: TOOL_POSITION.REAR_END,\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 },\n {\n title: 'delete',\n action: () => {},\n icon: 'delete'\n }\n ]}\n ></ox-page-action-context-bar>`\n },\n {\n position: TOOL_POSITION.REAR_END,\n template: html` <md-icon>download</md-icon> `,\n context: 'exportable'\n },\n {\n position: TOOL_POSITION.REAR_END,\n template: html` <md-icon>upload</md-icon> `,\n context: 'importable'\n }\n ]}\n .context=${{\n exportable: true,\n importable: true,\n toolbar: true\n }}\n >\n </ox-context-toolbar>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}
package/dist/stories/ox-context-toolbar-complex.stories copy.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ import '@material/web/icon/icon.js';
2
+ import '../src/layouts/ox-context-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
+ };
11
+ export default _default;
12
+ interface Story<T> {
13
+ (args: T): TemplateResult;
14
+ args?: Partial<T>;
15
+ argTypes?: Record<string, unknown>;
16
+ }
17
+ interface ArgTypes {
18
+ }
19
+ export declare const Regular: Story<ArgTypes>;
package/dist/stories/ox-context-toolbar-complex.stories copy.js ADDED
@@ -0,0 +1,146 @@
1
+ import '@material/web/icon/icon.js';
2
+ import '../src/layouts/ox-context-toolbar.js';
3
+ import '../src/tools/ox-page-action-context-bar.js';
4
+ import { TOOL_POSITION } from '@operato/layout';
5
+ import '@operato/styles';
6
+ import { html } from 'lit';
7
+ export default {
8
+ title: 'ox-context-toolbar complex',
9
+ component: 'ox-context-toolbar',
10
+ argTypes: {}
11
+ };
12
+ const Template = () => html `
13
+ <link href="/themes/app-theme.css" rel="stylesheet" />
14
+ <link href="/themes/context-theme.css" rel="stylesheet" />
15
+
16
+ <link
17
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
18
+ rel="stylesheet"
19
+ />
20
+ <link
21
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
22
+ rel="stylesheet"
23
+ />
24
+ <link
25
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
26
+ rel="stylesheet"
27
+ />
28
+
29
+ <style>
30
+ body {
31
+ background-color: white;
32
+ }
33
+ </style>
34
+
35
+ <div style="height:100px; padding: 10px; background-color: black;">
36
+ <ox-context-toolbar
37
+ .tools=${[
38
+ {
39
+ position: TOOL_POSITION.FRONT_END,
40
+ template: html ` <md-icon>download</md-icon> `,
41
+ context: 'exportable'
42
+ },
43
+ {
44
+ position: TOOL_POSITION.FRONT_END,
45
+ template: html ` <md-icon>upload</md-icon> `,
46
+ context: 'importable'
47
+ },
48
+ {
49
+ position: TOOL_POSITION.FRONT,
50
+ template: html ` <md-icon>download</md-icon> `,
51
+ context: 'exportable'
52
+ },
53
+ {
54
+ position: TOOL_POSITION.FRONT,
55
+ template: html ` <md-icon>upload</md-icon> `,
56
+ context: 'importable'
57
+ },
58
+ {
59
+ position: TOOL_POSITION.CENTER,
60
+ template: html `<ox-page-action-context-bar
61
+ .actions=${[
62
+ {
63
+ title: 'save',
64
+ action: () => { },
65
+ icon: 'save'
66
+ },
67
+ {
68
+ title: 'copy',
69
+ action: () => { },
70
+ icon: 'content_copy'
71
+ },
72
+ {
73
+ title: 'delete',
74
+ action: () => { },
75
+ icon: 'delete'
76
+ }
77
+ ]}
78
+ ></ox-page-action-context-bar>`
79
+ },
80
+ {
81
+ position: TOOL_POSITION.REAR,
82
+ template: html `<ox-page-action-context-bar
83
+ .actions=${[
84
+ {
85
+ title: 'save',
86
+ action: () => { },
87
+ icon: 'save'
88
+ },
89
+ {
90
+ title: 'copy',
91
+ action: () => { },
92
+ icon: 'content_copy'
93
+ },
94
+ {
95
+ title: 'delete',
96
+ action: () => { },
97
+ icon: 'delete'
98
+ }
99
+ ]}
100
+ ></ox-page-action-context-bar>`
101
+ },
102
+ {
103
+ position: TOOL_POSITION.REAR_END,
104
+ template: html `<ox-page-action-context-bar
105
+ .actions=${[
106
+ {
107
+ title: 'save',
108
+ action: () => { },
109
+ icon: 'save'
110
+ },
111
+ {
112
+ title: 'copy',
113
+ action: () => { },
114
+ icon: 'content_copy'
115
+ },
116
+ {
117
+ title: 'delete',
118
+ action: () => { },
119
+ icon: 'delete'
120
+ }
121
+ ]}
122
+ ></ox-page-action-context-bar>`
123
+ },
124
+ {
125
+ position: TOOL_POSITION.REAR_END,
126
+ template: html ` <md-icon>download</md-icon> `,
127
+ context: 'exportable'
128
+ },
129
+ {
130
+ position: TOOL_POSITION.REAR_END,
131
+ template: html ` <md-icon>upload</md-icon> `,
132
+ context: 'importable'
133
+ }
134
+ ]}
135
+ .context=${{
136
+ exportable: true,
137
+ importable: true,
138
+ toolbar: true
139
+ }}
140
+ >
141
+ </ox-context-toolbar>
142
+ </div>
143
+ `;
144
+ export const Regular = Template.bind({});
145
+ Regular.args = {};
146
+ //# sourceMappingURL=ox-context-toolbar-complex.stories%20copy.js.map
package/dist/stories/ox-context-toolbar-complex.stories copy.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ox-context-toolbar-complex.stories copy.js","sourceRoot":"","sources":["../../stories/ox-context-toolbar-complex.stories copy.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../src/layouts/ox-context-toolbar.js'\nimport '../src/tools/ox-page-action-context-bar.js'\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-toolbar complex',\n component: 'ox-context-toolbar',\n argTypes: {}\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {}\n\nconst Template: Story<ArgTypes> = () => html`\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/context-theme.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n body {\n background-color: white;\n }\n </style>\n\n <div style=\"height:100px; padding: 10px; background-color: black;\">\n <ox-context-toolbar\n .tools=${[\n {\n position: TOOL_POSITION.FRONT_END,\n template: html` <md-icon>download</md-icon> `,\n context: 'exportable'\n },\n {\n position: TOOL_POSITION.FRONT_END,\n template: html` <md-icon>upload</md-icon> `,\n context: 'importable'\n },\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 },\n {\n title: 'delete',\n action: () => {},\n icon: 'delete'\n }\n ]}\n ></ox-page-action-context-bar>`\n },\n {\n position: TOOL_POSITION.REAR,\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 },\n {\n title: 'delete',\n action: () => {},\n icon: 'delete'\n }\n ]}\n ></ox-page-action-context-bar>`\n },\n {\n position: TOOL_POSITION.REAR_END,\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 },\n {\n title: 'delete',\n action: () => {},\n icon: 'delete'\n }\n ]}\n ></ox-page-action-context-bar>`\n },\n {\n position: TOOL_POSITION.REAR_END,\n template: html` <md-icon>download</md-icon> `,\n context: 'exportable'\n },\n {\n position: TOOL_POSITION.REAR_END,\n template: html` <md-icon>upload</md-icon> `,\n context: 'importable'\n }\n ]}\n .context=${{\n exportable: true,\n importable: true,\n toolbar: true\n }}\n >\n </ox-context-toolbar>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}
package/dist/stories/ox-context-toolbar-complex.stories.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ import '@material/web/icon/icon.js';
2
+ import '../src/layouts/ox-context-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
+ };
11
+ export default _default;
12
+ interface Story<T> {
13
+ (args: T): TemplateResult;
14
+ args?: Partial<T>;
15
+ argTypes?: Record<string, unknown>;
16
+ }
17
+ interface ArgTypes {
18
+ }
19
+ export declare const Regular: Story<ArgTypes>;
package/dist/stories/ox-context-toolbar-complex.stories.js ADDED
@@ -0,0 +1,146 @@
1
+ import '@material/web/icon/icon.js';
2
+ import '../src/layouts/ox-context-toolbar.js';
3
+ import '../src/tools/ox-page-action-context-bar.js';
4
+ import { TOOL_POSITION } from '@operato/layout';
5
+ import '@operato/styles';
6
+ import { html } from 'lit';
7
+ export default {
8
+ title: 'ox-context-toolbar complex',
9
+ component: 'ox-context-toolbar',
10
+ argTypes: {}
11
+ };
12
+ const Template = () => html `
13
+ <link href="/themes/app-theme.css" rel="stylesheet" />
14
+ <link href="/themes/context-theme.css" rel="stylesheet" />
15
+
16
+ <link
17
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
18
+ rel="stylesheet"
19
+ />
20
+ <link
21
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
22
+ rel="stylesheet"
23
+ />
24
+ <link
25
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
26
+ rel="stylesheet"
27
+ />
28
+
29
+ <style>
30
+ body {
31
+ background-color: white;
32
+ }
33
+ </style>
34
+
35
+ <div style="height:100px; padding: 10px; background-color: black;">
36
+ <ox-context-toolbar
37
+ .tools=${[
38
+ {
39
+ position: TOOL_POSITION.FRONT_END,
40
+ template: html ` <md-icon>download</md-icon> `,
41
+ context: 'exportable'
42
+ },
43
+ {
44
+ position: TOOL_POSITION.FRONT_END,
45
+ template: html ` <md-icon>upload</md-icon> `,
46
+ context: 'importable'
47
+ },
48
+ {
49
+ position: TOOL_POSITION.FRONT,
50
+ template: html ` <md-icon>download</md-icon> `,
51
+ context: 'exportable'
52
+ },
53
+ {
54
+ position: TOOL_POSITION.FRONT,
55
+ template: html ` <md-icon>upload</md-icon> `,
56
+ context: 'importable'
57
+ },
58
+ {
59
+ position: TOOL_POSITION.CENTER,
60
+ template: html `<ox-page-action-context-bar
61
+ .actions=${[
62
+ {
63
+ title: 'save',
64
+ action: () => { },
65
+ icon: 'save'
66
+ },
67
+ {
68
+ title: 'copy',
69
+ action: () => { },
70
+ icon: 'content_copy'
71
+ },
72
+ {
73
+ title: 'delete',
74
+ action: () => { },
75
+ icon: 'delete'
76
+ }
77
+ ]}
78
+ ></ox-page-action-context-bar>`
79
+ },
80
+ {
81
+ position: TOOL_POSITION.REAR,
82
+ template: html `<ox-page-action-context-bar
83
+ .actions=${[
84
+ {
85
+ title: 'save',
86
+ action: () => { },
87
+ icon: 'save'
88
+ },
89
+ {
90
+ title: 'copy',
91
+ action: () => { },
92
+ icon: 'content_copy'
93
+ },
94
+ {
95
+ title: 'delete',
96
+ action: () => { },
97
+ icon: 'delete'
98
+ }
99
+ ]}
100
+ ></ox-page-action-context-bar>`
101
+ },
102
+ {
103
+ position: TOOL_POSITION.REAR_END,
104
+ template: html `<ox-page-action-context-bar
105
+ .actions=${[
106
+ {
107
+ title: 'save',
108
+ action: () => { },
109
+ icon: 'save'
110
+ },
111
+ {
112
+ title: 'copy',
113
+ action: () => { },
114
+ icon: 'content_copy'
115
+ },
116
+ {
117
+ title: 'delete',
118
+ action: () => { },
119
+ icon: 'delete'
120
+ }
121
+ ]}
122
+ ></ox-page-action-context-bar>`
123
+ },
124
+ {
125
+ position: TOOL_POSITION.REAR_END,
126
+ template: html ` <md-icon>download</md-icon> `,
127
+ context: 'exportable'
128
+ },
129
+ {
130
+ position: TOOL_POSITION.REAR_END,
131
+ template: html ` <md-icon>upload</md-icon> `,
132
+ context: 'importable'
133
+ }
134
+ ]}
135
+ .context=${{
136
+ exportable: true,
137
+ importable: true,
138
+ toolbar: true
139
+ }}
140
+ >
141
+ </ox-context-toolbar>
142
+ </div>
143
+ `;
144
+ export const Regular = Template.bind({});
145
+ Regular.args = {};
146
+ //# sourceMappingURL=ox-context-toolbar-complex.stories.js.map
package/dist/stories/ox-context-toolbar-complex.stories.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ox-context-toolbar-complex.stories.js","sourceRoot":"","sources":["../../stories/ox-context-toolbar-complex.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../src/layouts/ox-context-toolbar.js'\nimport '../src/tools/ox-page-action-context-bar.js'\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-toolbar complex',\n component: 'ox-context-toolbar',\n argTypes: {}\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {}\n\nconst Template: Story<ArgTypes> = () => html`\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/context-theme.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n body {\n background-color: white;\n }\n </style>\n\n <div style=\"height:100px; padding: 10px; background-color: black;\">\n <ox-context-toolbar\n .tools=${[\n {\n position: TOOL_POSITION.FRONT_END,\n template: html` <md-icon>download</md-icon> `,\n context: 'exportable'\n },\n {\n position: TOOL_POSITION.FRONT_END,\n template: html` <md-icon>upload</md-icon> `,\n context: 'importable'\n },\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 },\n {\n title: 'delete',\n action: () => {},\n icon: 'delete'\n }\n ]}\n ></ox-page-action-context-bar>`\n },\n {\n position: TOOL_POSITION.REAR,\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 },\n {\n title: 'delete',\n action: () => {},\n icon: 'delete'\n }\n ]}\n ></ox-page-action-context-bar>`\n },\n {\n position: TOOL_POSITION.REAR_END,\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 },\n {\n title: 'delete',\n action: () => {},\n icon: 'delete'\n }\n ]}\n ></ox-page-action-context-bar>`\n },\n {\n position: TOOL_POSITION.REAR_END,\n template: html` <md-icon>download</md-icon> `,\n context: 'exportable'\n },\n {\n position: TOOL_POSITION.REAR_END,\n template: html` <md-icon>upload</md-icon> `,\n context: 'importable'\n }\n ]}\n .context=${{\n exportable: true,\n importable: true,\n toolbar: true\n }}\n >\n </ox-context-toolbar>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}
package/dist/stories/ox-context-toolbar-overflow.stories.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ import '@material/web/icon/icon.js';
2
+ import '../src/layouts/ox-context-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
+ };
11
+ export default _default;
12
+ interface Story<T> {
13
+ (args: T): TemplateResult;
14
+ args?: Partial<T>;
15
+ argTypes?: Record<string, unknown>;
16
+ }
17
+ interface ArgTypes {
18
+ }
19
+ export declare const Regular: Story<ArgTypes>;
package/dist/stories/ox-context-toolbar-overflow.stories.js ADDED
@@ -0,0 +1,127 @@
1
+ import '@material/web/icon/icon.js';
2
+ import '../src/layouts/ox-context-toolbar.js';
3
+ import '../src/tools/ox-page-action-context-bar.js';
4
+ import { TOOL_POSITION } from '@operato/layout';
5
+ import '@operato/styles';
6
+ import { html } from 'lit';
7
+ export default {
8
+ title: 'ox-context-toolbar overflow',
9
+ component: 'ox-context-toolbar',
10
+ argTypes: {}
11
+ };
12
+ const Template = () => html `
13
+ <link href="/themes/app-theme.css" rel="stylesheet" />
14
+ <link href="/themes/context-theme.css" rel="stylesheet" />
15
+
16
+ <link
17
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
18
+ rel="stylesheet"
19
+ />
20
+ <link
21
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
22
+ rel="stylesheet"
23
+ />
24
+ <link
25
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
26
+ rel="stylesheet"
27
+ />
28
+
29
+ <style>
30
+ body {
31
+ background-color: white;
32
+ }
33
+ </style>
34
+
35
+ <div style="height:100px; padding: 10px; background-color: yellow;">
36
+ <ox-context-toolbar
37
+ .tools=${[
38
+ {
39
+ position: TOOL_POSITION.FRONT,
40
+ template: html ` <md-icon>download</md-icon> `,
41
+ context: 'exportable'
42
+ },
43
+ {
44
+ position: TOOL_POSITION.FRONT,
45
+ template: html ` <md-icon>upload</md-icon> `,
46
+ context: 'importable'
47
+ },
48
+ {
49
+ position: TOOL_POSITION.CENTER,
50
+ template: html `<ox-page-action-context-bar
51
+ .actions=${[
52
+ {
53
+ title: 'save',
54
+ action: () => { },
55
+ icon: 'save'
56
+ },
57
+ {
58
+ title: 'copy',
59
+ action: () => { },
60
+ icon: 'content_copy'
61
+ },
62
+ {
63
+ title: 'delete',
64
+ action: () => { },
65
+ icon: 'delete'
66
+ },
67
+ {
68
+ title: 'save',
69
+ action: () => { },
70
+ icon: 'save'
71
+ },
72
+ {
73
+ title: 'copy',
74
+ action: () => { },
75
+ icon: 'content_copy'
76
+ },
77
+ {
78
+ title: 'delete',
79
+ action: () => { },
80
+ icon: 'delete'
81
+ },
82
+ {
83
+ title: 'save',
84
+ action: () => { },
85
+ icon: 'save'
86
+ },
87
+ {
88
+ title: 'copy',
89
+ action: () => { },
90
+ icon: 'content_copy'
91
+ },
92
+ {
93
+ title: 'delete',
94
+ action: () => { },
95
+ icon: 'delete'
96
+ },
97
+ {
98
+ title: 'save',
99
+ action: () => { },
100
+ icon: 'save'
101
+ },
102
+ {
103
+ title: 'copy',
104
+ action: () => { },
105
+ icon: 'content_copy'
106
+ },
107
+ {
108
+ title: 'delete',
109
+ action: () => { },
110
+ icon: 'delete'
111
+ }
112
+ ]}
113
+ ></ox-page-action-context-bar>`
114
+ }
115
+ ]}
116
+ .context=${{
117
+ exportable: true,
118
+ importable: true,
119
+ toolbar: true
120
+ }}
121
+ >
122
+ </ox-context-toolbar>
123
+ </div>
124
+ `;
125
+ export const Regular = Template.bind({});
126
+ Regular.args = {};
127
+ //# sourceMappingURL=ox-context-toolbar-overflow.stories.js.map
package/dist/stories/ox-context-toolbar-overflow.stories.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ox-context-toolbar-overflow.stories.js","sourceRoot":"","sources":["../../stories/ox-context-toolbar-overflow.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,sCAAsC,CAAA;AAC7C,OAAO,4CAA4C,CAAA;AACnD,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,6BAA6B;IACpC,SAAS,EAAE,oBAAoB;IAC/B,QAAQ,EAAE,EAAE;CACb,CAAA;AAUD,MAAM,QAAQ,GAAoB,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;eAyB7B;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;aACrB;YACD;gBACE,KAAK,EAAE,QAAQ;gBACf,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,IAAI,EAAE,QAAQ;aACf;YACD;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;aACrB;YACD;gBACE,KAAK,EAAE,QAAQ;gBACf,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,IAAI,EAAE,QAAQ;aACf;YACD;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;aACrB;YACD;gBACE,KAAK,EAAE,QAAQ;gBACf,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,IAAI,EAAE,QAAQ;aACf;YACD;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;aACrB;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,IAAI;CACd;;;;CAIN,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../src/layouts/ox-context-toolbar.js'\nimport '../src/tools/ox-page-action-context-bar.js'\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-toolbar overflow',\n component: 'ox-context-toolbar',\n argTypes: {}\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {}\n\nconst Template: Story<ArgTypes> = () => html`\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/context-theme.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n body {\n background-color: white;\n }\n </style>\n\n <div style=\"height:100px; padding: 10px; background-color: yellow;\">\n <ox-context-toolbar\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 },\n {\n title: 'delete',\n action: () => {},\n icon: 'delete'\n },\n {\n title: 'save',\n action: () => {},\n icon: 'save'\n },\n {\n title: 'copy',\n action: () => {},\n icon: 'content_copy'\n },\n {\n title: 'delete',\n action: () => {},\n icon: 'delete'\n },\n {\n title: 'save',\n action: () => {},\n icon: 'save'\n },\n {\n title: 'copy',\n action: () => {},\n icon: 'content_copy'\n },\n {\n title: 'delete',\n action: () => {},\n icon: 'delete'\n },\n {\n title: 'save',\n action: () => {},\n icon: 'save'\n },\n {\n title: 'copy',\n action: () => {},\n icon: 'content_copy'\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: true\n }}\n >\n </ox-context-toolbar>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}
package/dist/stories/ox-context-toolbar.stories copy.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ import '@material/web/icon/icon.js';
2
+ import '../src/layouts/ox-context-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
+ };
11
+ export default _default;
12
+ interface Story<T> {
13
+ (args: T): TemplateResult;
14
+ args?: Partial<T>;
15
+ argTypes?: Record<string, unknown>;
16
+ }
17
+ interface ArgTypes {
18
+ }
19
+ export declare const Regular: Story<ArgTypes>;
package/dist/stories/ox-context-toolbar.stories copy.js ADDED
@@ -0,0 +1,82 @@
1
+ import '@material/web/icon/icon.js';
2
+ import '../src/layouts/ox-context-toolbar.js';
3
+ import '../src/tools/ox-page-action-context-bar.js';
4
+ import { TOOL_POSITION } from '@operato/layout';
5
+ import '@operato/styles';
6
+ import { html } from 'lit';
7
+ export default {
8
+ title: 'ox-context-toolbar',
9
+ component: 'ox-context-toolbar',
10
+ argTypes: {}
11
+ };
12
+ const Template = () => html `
13
+ <link href="/themes/app-theme.css" rel="stylesheet" />
14
+ <link href="/themes/context-theme.css" rel="stylesheet" />
15
+
16
+ <link
17
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
18
+ rel="stylesheet"
19
+ />
20
+ <link
21
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
22
+ rel="stylesheet"
23
+ />
24
+ <link
25
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
26
+ rel="stylesheet"
27
+ />
28
+
29
+ <style>
30
+ body {
31
+ background-color: white;
32
+ }
33
+ </style>
34
+
35
+ <div style="height:100px; padding: 10px; background-color: black;">
36
+ <ox-context-toolbar
37
+ .tools=${[
38
+ {
39
+ position: TOOL_POSITION.FRONT,
40
+ template: html ` <md-icon>download</md-icon> `,
41
+ context: 'exportable'
42
+ },
43
+ {
44
+ position: TOOL_POSITION.FRONT,
45
+ template: html ` <md-icon>upload</md-icon> `,
46
+ context: 'importable'
47
+ },
48
+ {
49
+ position: TOOL_POSITION.CENTER,
50
+ template: html `<ox-page-action-context-bar
51
+ .actions=${[
52
+ {
53
+ title: 'save',
54
+ action: () => { },
55
+ icon: 'save'
56
+ },
57
+ {
58
+ title: 'copy',
59
+ action: () => { },
60
+ icon: 'content_copy'
61
+ },
62
+ {
63
+ title: 'delete',
64
+ action: () => { },
65
+ icon: 'delete'
66
+ }
67
+ ]}
68
+ ></ox-page-action-context-bar>`
69
+ }
70
+ ]}
71
+ .context=${{
72
+ exportable: true,
73
+ importable: true,
74
+ toolbar: true
75
+ }}
76
+ >
77
+ </ox-context-toolbar>
78
+ </div>
79
+ `;
80
+ export const Regular = Template.bind({});
81
+ Regular.args = {};
82
+ //# sourceMappingURL=ox-context-toolbar.stories%20copy.js.map
package/dist/stories/ox-context-toolbar.stories copy.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ox-context-toolbar.stories copy.js","sourceRoot":"","sources":["../../stories/ox-context-toolbar.stories copy.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,sCAAsC,CAAA;AAC7C,OAAO,4CAA4C,CAAA;AAEnD,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,oBAAoB;IAC3B,SAAS,EAAE,oBAAoB;IAC/B,QAAQ,EAAE,EAAE;CACb,CAAA;AAUD,MAAM,QAAQ,GAAoB,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;eAyB7B;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;aACrB;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,IAAI;CACd;;;;CAIN,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../src/layouts/ox-context-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-toolbar',\n component: 'ox-context-toolbar',\n argTypes: {}\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {}\n\nconst Template: Story<ArgTypes> = () => html`\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/context-theme.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n body {\n background-color: white;\n }\n </style>\n\n <div style=\"height:100px; padding: 10px; background-color: black;\">\n <ox-context-toolbar\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 },\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: true\n }}\n >\n </ox-context-toolbar>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}