@operato/context 9.0.0-beta.7 → 9.0.0-beta.85

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 (27) hide show
  1. package/CHANGELOG.md +284 -0
  2. package/dist/tsconfig.tsbuildinfo +1 -1
  3. package/package.json +8 -8
  4. package/dist/stories/ox-context-page-toolbar-select-buttons.stories.d.ts +0 -25
  5. package/dist/stories/ox-context-page-toolbar-select-buttons.stories.js +0 -151
  6. package/dist/stories/ox-context-page-toolbar-select-buttons.stories.js.map +0 -1
  7. package/dist/stories/ox-context-page-toolbar-select.stories.d.ts +0 -24
  8. package/dist/stories/ox-context-page-toolbar-select.stories.js +0 -115
  9. package/dist/stories/ox-context-page-toolbar-select.stories.js.map +0 -1
  10. package/dist/stories/ox-context-page-toolbar.stories.d.ts +0 -24
  11. package/dist/stories/ox-context-page-toolbar.stories.js +0 -115
  12. package/dist/stories/ox-context-page-toolbar.stories.js.map +0 -1
  13. package/dist/stories/ox-context-toolbar-complex.stories.d.ts +0 -24
  14. package/dist/stories/ox-context-toolbar-complex.stories.js +0 -169
  15. package/dist/stories/ox-context-toolbar-complex.stories.js.map +0 -1
  16. package/dist/stories/ox-context-toolbar-cooldown.stories.d.ts +0 -18
  17. package/dist/stories/ox-context-toolbar-cooldown.stories.js +0 -100
  18. package/dist/stories/ox-context-toolbar-cooldown.stories.js.map +0 -1
  19. package/dist/stories/ox-context-toolbar-empty.stories.d.ts +0 -23
  20. package/dist/stories/ox-context-toolbar-empty.stories.js +0 -98
  21. package/dist/stories/ox-context-toolbar-empty.stories.js.map +0 -1
  22. package/dist/stories/ox-context-toolbar-overflow.stories.d.ts +0 -24
  23. package/dist/stories/ox-context-toolbar-overflow.stories.js +0 -153
  24. package/dist/stories/ox-context-toolbar-overflow.stories.js.map +0 -1
  25. package/dist/stories/ox-context-toolbar.stories.d.ts +0 -19
  26. package/dist/stories/ox-context-toolbar.stories.js +0 -209
  27. package/dist/stories/ox-context-toolbar.stories.js.map +0 -1
@@ -1 +0,0 @@
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'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n title: 'ox-context-toolbar complex',\n component: 'ox-context-toolbar',\n argTypes: {\n theme: { control: 'select', options: ['light', 'dark'] }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {}\n\nconst Template: Story<ArgTypes> = ({}: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\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 ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n .container {\n height: 500px;\n text-align: center;\n padding: 20px;\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n\n padding: 20px;\n }\n\n ox-buttons-radio {\n padding: 20px;\n }\n </style>\n\n <div class=\"container md-typescale-body-large-prominent\">\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 emphasis: {\n danger: true\n }\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"]}
@@ -1,18 +0,0 @@
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 { TemplateResult } from 'lit';
5
- declare const _default: {
6
- title: string;
7
- component: string;
8
- argTypes: {};
9
- };
10
- export default _default;
11
- interface Story<T> {
12
- (args: T): TemplateResult;
13
- args?: Partial<T>;
14
- argTypes?: Record<string, unknown>;
15
- }
16
- interface ArgTypes {
17
- }
18
- export declare const Regular: Story<ArgTypes>;
@@ -1,100 +0,0 @@
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 { sleep } from '@operato/utils';
6
- import { html } from 'lit';
7
- export default {
8
- title: 'ox-context-toolbar empty',
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/material-theme.css" rel="stylesheet" />
15
- <link href="/themes/context-theme.css" rel="stylesheet" />
16
-
17
- <link
18
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
19
- rel="stylesheet"
20
- />
21
- <link
22
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
23
- rel="stylesheet"
24
- />
25
- <link
26
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
27
- rel="stylesheet"
28
- />
29
-
30
- <style>
31
- body {
32
- background-color: var(--md-sys-color-surface);
33
- }
34
- </style>
35
-
36
- <div style="display: flex; flex-direction: column; gap: 10px; padding: 10px; background-color: black;">
37
- <ox-context-toolbar
38
- .tools=${[]}
39
- .context=${{
40
- exportable: true,
41
- importable: true,
42
- toolbar: true
43
- }}
44
- >
45
- </ox-context-toolbar>
46
-
47
- <ox-context-toolbar
48
- .tools=${[
49
- {
50
- position: TOOL_POSITION.CENTER,
51
- template: html `<ox-page-action-context-bar .actions=${[]}></ox-page-action-context-bar>`
52
- }
53
- ]}
54
- .context=${{
55
- exportable: true,
56
- importable: true,
57
- toolbar: true
58
- }}
59
- >
60
- </ox-context-toolbar>
61
-
62
- <ox-context-toolbar
63
- .tools=${[
64
- {
65
- position: TOOL_POSITION.CENTER,
66
- template: html `<ox-page-action-context-bar
67
- .actions=${[
68
- {
69
- type: 'icon',
70
- action: async () => { },
71
- icon: 'check'
72
- },
73
- {
74
- title: 'short-take(0secs)',
75
- action: async () => { },
76
- icon: 'delete'
77
- },
78
- {
79
- title: 'long-take(3secs)',
80
- action: async () => {
81
- await sleep(3000);
82
- },
83
- icon: 'save'
84
- }
85
- ]}
86
- ></ox-page-action-context-bar>`
87
- }
88
- ]}
89
- .context=${{
90
- exportable: true,
91
- importable: true,
92
- toolbar: true
93
- }}
94
- >
95
- </ox-context-toolbar>
96
- </div>
97
- `;
98
- export const Regular = Template.bind({});
99
- Regular.args = {};
100
- //# sourceMappingURL=ox-context-toolbar-cooldown.stories.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ox-context-toolbar-cooldown.stories.js","sourceRoot":"","sources":["../../stories/ox-context-toolbar-cooldown.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,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAEtC,OAAO,EAAO,IAAI,EAA0B,MAAM,KAAK,CAAA;AAEvD,eAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,oBAAoB;IAC/B,QAAQ,EAAE,EAAE;CACb,CAAA;AAUD,MAAM,QAAQ,GAAoB,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;eA0B7B,EAAE;iBACA;IACT,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,IAAI;CACd;;;;;eAKQ;IACP;QACE,QAAQ,EAAE,aAAa,CAAC,MAAM;QAC9B,QAAQ,EAAE,IAAI,CAAA,wCAAwC,EAAE,gCAAgC;KACzF;CACF;iBACU;IACT,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,IAAI;CACd;;;;;eAKQ;IACP;QACE,QAAQ,EAAE,aAAa,CAAC,MAAM;QAC9B,QAAQ,EAAE,IAAI,CAAA;uBACD;YACT;gBACE,IAAI,EAAE,MAAM;gBACZ,MAAM,EAAE,KAAK,IAAI,EAAE,GAAE,CAAC;gBACtB,IAAI,EAAE,OAAO;aACd;YACD;gBACE,KAAK,EAAE,mBAAmB;gBAC1B,MAAM,EAAE,KAAK,IAAI,EAAE,GAAE,CAAC;gBACtB,IAAI,EAAE,QAAQ;aACf;YACD;gBACE,KAAK,EAAE,kBAAkB;gBACzB,MAAM,EAAE,KAAK,IAAI,EAAE;oBACjB,MAAM,KAAK,CAAC,IAAI,CAAC,CAAA;gBACnB,CAAC;gBACD,IAAI,EAAE,MAAM;aACb;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 { sleep } from '@operato/utils'\n\nimport { css, html, render, TemplateResult } from 'lit'\n\nexport default {\n title: 'ox-context-toolbar empty',\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/material-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: var(--md-sys-color-surface);\n }\n </style>\n\n <div style=\"display: flex; flex-direction: column; gap: 10px; padding: 10px; background-color: black;\">\n <ox-context-toolbar\n .tools=${[]}\n .context=${{\n exportable: true,\n importable: true,\n toolbar: true\n }}\n >\n </ox-context-toolbar>\n\n <ox-context-toolbar\n .tools=${[\n {\n position: TOOL_POSITION.CENTER,\n template: html`<ox-page-action-context-bar .actions=${[]}></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\n <ox-context-toolbar\n .tools=${[\n {\n position: TOOL_POSITION.CENTER,\n template: html`<ox-page-action-context-bar\n .actions=${[\n {\n type: 'icon',\n action: async () => {},\n icon: 'check'\n },\n {\n title: 'short-take(0secs)',\n action: async () => {},\n icon: 'delete'\n },\n {\n title: 'long-take(3secs)',\n action: async () => {\n await sleep(3000)\n },\n icon: 'save'\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"]}
@@ -1,23 +0,0 @@
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 { TemplateResult } from 'lit';
5
- declare const _default: {
6
- title: string;
7
- component: string;
8
- argTypes: {
9
- theme: {
10
- control: string;
11
- options: 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
- }
23
- export declare const Regular: Story<ArgTypes>;
@@ -1,98 +0,0 @@
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 { html } from 'lit';
6
- import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
7
- export default {
8
- title: 'ox-context-toolbar empty',
9
- component: 'ox-context-toolbar',
10
- argTypes: {
11
- theme: { control: 'select', options: ['light', 'dark'] }
12
- }
13
- };
14
- const Template = ({}) => html `
15
- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
16
-
17
- <link href="/themes/light.css" rel="stylesheet" />
18
- <link href="/themes/dark.css" rel="stylesheet" />
19
- <link href="/themes/spacing.css" rel="stylesheet" />
20
-
21
- <link
22
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
23
- rel="stylesheet"
24
- />
25
- <link
26
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
27
- rel="stylesheet"
28
- />
29
- <link
30
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
31
- rel="stylesheet"
32
- />
33
-
34
- <style>
35
- ${MDTypeScaleStyles.cssText}
36
- </style>
37
-
38
- <style>
39
- .container {
40
- height: 500px;
41
- text-align: center;
42
- padding: 20px;
43
- background-color: var(--md-sys-color-primary-container);
44
- color: var(--md-sys-color-on-primary-container);
45
-
46
- padding: 20px;
47
- }
48
-
49
- ox-buttons-radio {
50
- padding: 20px;
51
- }
52
- </style>
53
-
54
- <div class="container md-typescale-body-large-prominent">
55
- <ox-context-toolbar
56
- .tools=${[]}
57
- .context=${{
58
- exportable: true,
59
- importable: true,
60
- toolbar: true
61
- }}
62
- >
63
- </ox-context-toolbar>
64
-
65
- <ox-context-toolbar
66
- .tools=${[
67
- {
68
- position: TOOL_POSITION.CENTER,
69
- template: html `<ox-page-action-context-bar .actions=${[]}></ox-page-action-context-bar>`
70
- }
71
- ]}
72
- .context=${{
73
- exportable: true,
74
- importable: true,
75
- toolbar: true
76
- }}
77
- >
78
- </ox-context-toolbar>
79
-
80
- <ox-context-toolbar
81
- .tools=${[
82
- {
83
- position: TOOL_POSITION.CENTER,
84
- template: html `<ox-page-action-context-bar .actions=${[]}></ox-page-action-context-bar>`
85
- }
86
- ]}
87
- .context=${{
88
- exportable: true,
89
- importable: true,
90
- toolbar: true
91
- }}
92
- >
93
- </ox-context-toolbar>
94
- </div>
95
- `;
96
- export const Regular = Template.bind({});
97
- Regular.args = {};
98
- //# sourceMappingURL=ox-context-toolbar-empty.stories.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ox-context-toolbar-empty.stories.js","sourceRoot":"","sources":["../../stories/ox-context-toolbar-empty.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,sCAAsC,CAAA;AAC7C,OAAO,4CAA4C,CAAA;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAI/C,OAAO,EAAO,IAAI,EAA0B,MAAM,KAAK,CAAA;AACvD,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,oBAAoB;IAC/B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAUD,MAAM,QAAQ,GAAoB,CAAC,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBlD,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;eAqBhB,EAAE;iBACA;IACT,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,IAAI;CACd;;;;;eAKQ;IACP;QACE,QAAQ,EAAE,aAAa,CAAC,MAAM;QAC9B,QAAQ,EAAE,IAAI,CAAA,wCAAwC,EAAE,gCAAgC;KACzF;CACF;iBACU;IACT,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,IAAI;CACd;;;;;eAKQ;IACP;QACE,QAAQ,EAAE,aAAa,CAAC,MAAM;QAC9B,QAAQ,EAAE,IAAI,CAAA,wCAAwC,EAAE,gCAAgC;KACzF;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 { sleep } from '@operato/utils'\n\nimport { css, html, render, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n title: 'ox-context-toolbar empty',\n component: 'ox-context-toolbar',\n argTypes: {\n theme: { control: 'select', options: ['light', 'dark'] }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {}\n\nconst Template: Story<ArgTypes> = ({}: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\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 ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n .container {\n height: 500px;\n text-align: center;\n padding: 20px;\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n\n padding: 20px;\n }\n\n ox-buttons-radio {\n padding: 20px;\n }\n </style>\n\n <div class=\"container md-typescale-body-large-prominent\">\n <ox-context-toolbar\n .tools=${[]}\n .context=${{\n exportable: true,\n importable: true,\n toolbar: true\n }}\n >\n </ox-context-toolbar>\n\n <ox-context-toolbar\n .tools=${[\n {\n position: TOOL_POSITION.CENTER,\n template: html`<ox-page-action-context-bar .actions=${[]}></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\n <ox-context-toolbar\n .tools=${[\n {\n position: TOOL_POSITION.CENTER,\n template: html`<ox-page-action-context-bar .actions=${[]}></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"]}
@@ -1,24 +0,0 @@
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
- theme: {
11
- control: string;
12
- options: 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
- }
24
- export declare const Regular: Story<ArgTypes>;
@@ -1,153 +0,0 @@
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
- import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
8
- export default {
9
- title: 'ox-context-toolbar overflow',
10
- component: 'ox-context-toolbar',
11
- argTypes: {
12
- theme: { control: 'select', options: ['light', 'dark'] }
13
- }
14
- };
15
- const Template = ({}) => html `
16
- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
17
-
18
- <link href="/themes/light.css" rel="stylesheet" />
19
- <link href="/themes/dark.css" rel="stylesheet" />
20
- <link href="/themes/spacing.css" rel="stylesheet" />
21
-
22
- <link
23
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
24
- rel="stylesheet"
25
- />
26
- <link
27
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
28
- rel="stylesheet"
29
- />
30
- <link
31
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
32
- rel="stylesheet"
33
- />
34
-
35
- <style>
36
- ${MDTypeScaleStyles.cssText}
37
- </style>
38
-
39
- <style>
40
- .container {
41
- height: 500px;
42
- text-align: center;
43
- padding: 20px;
44
- background-color: var(--md-sys-color-primary-container);
45
- color: var(--md-sys-color-on-primary-container);
46
-
47
- padding: 20px;
48
- }
49
-
50
- ox-buttons-radio {
51
- padding: 20px;
52
- }
53
- </style>
54
-
55
- <div class="container md-typescale-body-large-prominent">
56
- <ox-context-toolbar
57
- .tools=${[
58
- {
59
- position: TOOL_POSITION.FRONT,
60
- template: html ` <md-icon>download</md-icon> `,
61
- context: 'exportable'
62
- },
63
- {
64
- position: TOOL_POSITION.FRONT,
65
- template: html ` <md-icon>upload</md-icon> `,
66
- context: 'importable'
67
- },
68
- {
69
- position: TOOL_POSITION.CENTER,
70
- template: html `<ox-page-action-context-bar
71
- .actions=${[
72
- {
73
- title: 'save',
74
- action: () => { },
75
- icon: 'save'
76
- },
77
- {
78
- title: 'copy',
79
- action: () => { },
80
- icon: 'content_copy'
81
- },
82
- {
83
- title: 'delete',
84
- action: () => { },
85
- icon: 'delete'
86
- },
87
- {
88
- title: 'save',
89
- action: () => { },
90
- icon: 'save',
91
- emphasis: {
92
- raised: true
93
- }
94
- },
95
- {
96
- title: 'copy',
97
- action: () => { },
98
- icon: 'content_copy'
99
- },
100
- {
101
- title: 'delete',
102
- action: () => { },
103
- icon: 'delete'
104
- },
105
- {
106
- title: 'save',
107
- action: () => { },
108
- icon: 'save'
109
- },
110
- {
111
- title: 'copy',
112
- action: () => { },
113
- icon: 'content_copy'
114
- },
115
- {
116
- title: 'delete',
117
- action: () => { },
118
- icon: 'delete'
119
- },
120
- {
121
- title: 'save',
122
- action: () => { },
123
- icon: 'save'
124
- },
125
- {
126
- title: 'copy',
127
- action: () => { },
128
- icon: 'content_copy'
129
- },
130
- {
131
- title: 'delete',
132
- action: () => { },
133
- icon: 'delete',
134
- emphasis: {
135
- danger: true
136
- }
137
- }
138
- ]}
139
- ></ox-page-action-context-bar>`
140
- }
141
- ]}
142
- .context=${{
143
- exportable: true,
144
- importable: true,
145
- toolbar: true
146
- }}
147
- >
148
- </ox-context-toolbar>
149
- </div>
150
- `;
151
- export const Regular = Template.bind({});
152
- Regular.args = {};
153
- //# sourceMappingURL=ox-context-toolbar-overflow.stories.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ox-context-toolbar-overflow.stories.js","sourceRoot":"","sources":["../../stories/ox-context-toolbar-overflow.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'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n title: 'ox-context-toolbar overflow',\n component: 'ox-context-toolbar',\n argTypes: {\n theme: { control: 'select', options: ['light', 'dark'] }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {}\n\nconst Template: Story<ArgTypes> = ({}: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\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 ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n .container {\n height: 500px;\n text-align: center;\n padding: 20px;\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n\n padding: 20px;\n }\n\n ox-buttons-radio {\n padding: 20px;\n }\n </style>\n\n <div class=\"container md-typescale-body-large-prominent\">\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 emphasis: {\n raised: true\n }\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 emphasis: {\n danger: true\n }\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"]}
@@ -1,19 +0,0 @@
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>;