@omegagrid/toolbar 0.10.0 → 0.10.2

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 (65) hide show
  1. package/package.json +4 -4
  2. package/dist/constants.d.ts +0 -50
  3. package/dist/constants.d.ts.map +0 -1
  4. package/dist/constants.js +0 -8
  5. package/dist/constants.js.map +0 -1
  6. package/dist/index.d.ts +0 -3
  7. package/dist/index.d.ts.map +0 -1
  8. package/dist/index.js +0 -3
  9. package/dist/index.js.map +0 -1
  10. package/dist/types.d.ts +0 -29
  11. package/dist/types.d.ts.map +0 -1
  12. package/dist/types.js +0 -2
  13. package/dist/types.js.map +0 -1
  14. package/dist/ui/controls/index.d.ts +0 -9
  15. package/dist/ui/controls/index.d.ts.map +0 -1
  16. package/dist/ui/controls/index.js +0 -9
  17. package/dist/ui/controls/index.js.map +0 -1
  18. package/dist/ui/controls/renderers.d.ts +0 -4
  19. package/dist/ui/controls/renderers.d.ts.map +0 -1
  20. package/dist/ui/controls/renderers.js +0 -96
  21. package/dist/ui/controls/renderers.js.map +0 -1
  22. package/dist/ui/controls/toolbarButton.d.ts +0 -10
  23. package/dist/ui/controls/toolbarButton.d.ts.map +0 -1
  24. package/dist/ui/controls/toolbarButton.js +0 -54
  25. package/dist/ui/controls/toolbarButton.js.map +0 -1
  26. package/dist/ui/controls/toolbarColorPicker.d.ts +0 -16
  27. package/dist/ui/controls/toolbarColorPicker.d.ts.map +0 -1
  28. package/dist/ui/controls/toolbarColorPicker.js +0 -111
  29. package/dist/ui/controls/toolbarColorPicker.js.map +0 -1
  30. package/dist/ui/controls/toolbarCustomDropdown.d.ts +0 -11
  31. package/dist/ui/controls/toolbarCustomDropdown.d.ts.map +0 -1
  32. package/dist/ui/controls/toolbarCustomDropdown.js +0 -58
  33. package/dist/ui/controls/toolbarCustomDropdown.js.map +0 -1
  34. package/dist/ui/controls/toolbarDropdown.d.ts +0 -14
  35. package/dist/ui/controls/toolbarDropdown.d.ts.map +0 -1
  36. package/dist/ui/controls/toolbarDropdown.js +0 -78
  37. package/dist/ui/controls/toolbarDropdown.js.map +0 -1
  38. package/dist/ui/controls/toolbarDropdownButton.d.ts +0 -25
  39. package/dist/ui/controls/toolbarDropdownButton.d.ts.map +0 -1
  40. package/dist/ui/controls/toolbarDropdownButton.js +0 -156
  41. package/dist/ui/controls/toolbarDropdownButton.js.map +0 -1
  42. package/dist/ui/controls/toolbarDropdownMenu.d.ts +0 -10
  43. package/dist/ui/controls/toolbarDropdownMenu.d.ts.map +0 -1
  44. package/dist/ui/controls/toolbarDropdownMenu.js +0 -55
  45. package/dist/ui/controls/toolbarDropdownMenu.js.map +0 -1
  46. package/dist/ui/controls/toolbarGrid.d.ts +0 -8
  47. package/dist/ui/controls/toolbarGrid.d.ts.map +0 -1
  48. package/dist/ui/controls/toolbarGrid.js +0 -40
  49. package/dist/ui/controls/toolbarGrid.js.map +0 -1
  50. package/dist/ui/controls/toolbarText.d.ts +0 -19
  51. package/dist/ui/controls/toolbarText.d.ts.map +0 -1
  52. package/dist/ui/controls/toolbarText.js +0 -119
  53. package/dist/ui/controls/toolbarText.js.map +0 -1
  54. package/dist/ui/index.d.ts +0 -3
  55. package/dist/ui/index.d.ts.map +0 -1
  56. package/dist/ui/index.js +0 -3
  57. package/dist/ui/index.js.map +0 -1
  58. package/dist/ui/toolbar.d.ts +0 -19
  59. package/dist/ui/toolbar.d.ts.map +0 -1
  60. package/dist/ui/toolbar.js +0 -75
  61. package/dist/ui/toolbar.js.map +0 -1
  62. package/dist/ui/toolbar.style.d.ts +0 -2
  63. package/dist/ui/toolbar.style.d.ts.map +0 -1
  64. package/dist/ui/toolbar.style.js +0 -65
  65. package/dist/ui/toolbar.style.js.map +0 -1
@@ -1 +0,0 @@
1
- {"version":3,"file":"toolbarDropdown.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/toolbarDropdown.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAA0B,eAAe,EAAe,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGrG,qBACa,eAAgB,SAAQ,UAAU;IAE9C,MAAM,CAAC,MAAM,4BAUV;IAGH,IAAI,EAAE,YAAY,CAAC;IAGnB,IAAI,EAAE,WAAW,CAAC;IAGlB,KAAK,EAAE,MAAM,CAAC;IAEd,OAAO;IAaP,SAAS,aASR;IAED,QAAQ;IAMR,MAAM,6CAUJ;CAEF"}
@@ -1,78 +0,0 @@
1
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
- return c > 3 && r && Object.defineProperty(target, key, r), r;
6
- };
7
- import { dom } from '@omegagrid/core';
8
- import constants from '../../constants';
9
- import { LitElement, html, css } from 'lit';
10
- import { customElement, property, query } from 'lit/decorators.js';
11
- import { SelectMode } from '@omegagrid/tree';
12
- import { actions } from '@omegagrid/core';
13
- let ToolbarDropdown = class ToolbarDropdown extends LitElement {
14
- constructor() {
15
- super(...arguments);
16
- this._onChange = () => {
17
- this.tree.close();
18
- const serializedValue = this.tree.value;
19
- this.value = serializedValue && serializedValue[0] && serializedValue[0][0] ? serializedValue[0][0] : null;
20
- actions.dispatchActionEvent(this, 'toolbar', {
21
- type: 'change',
22
- key: this.item.id,
23
- value: this.value
24
- });
25
- };
26
- this.render = () => html `
27
- <og-tree-dropdown
28
- color="gray"
29
- ?disabled="${!!this.item.disabled}"
30
- @change="${this._onChange}"
31
- .alignment="${this.item.alignment || 'right'}"
32
- .adapter="${this.item.adapter}"
33
- .caption="${this.item.caption}"
34
- .value="${this.getValue()}">
35
- </og-tree-dropdown>
36
- `;
37
- }
38
- updated() {
39
- if (this.item.width)
40
- dom.setSize(this.tree, { w: this.item.width });
41
- if (!this.item.adapter) {
42
- this.tree.setSourceData(this.item.items, {
43
- globalLevels: false,
44
- selectMode: SelectMode.Single,
45
- checkboxes: false,
46
- expanders: false
47
- });
48
- }
49
- }
50
- getValue() {
51
- return Array.isArray(this.value) ? this.value : (this.value == null ? null : [[this.value, 0, 1]]);
52
- }
53
- };
54
- ToolbarDropdown.styles = [css `
55
- :host {
56
- display: flex;
57
- flex-direction: row;
58
- height: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;
59
- }
60
-
61
- og-tree-dropdown {
62
- height: 100%;
63
- }
64
- `];
65
- __decorate([
66
- query('og-tree-dropdown')
67
- ], ToolbarDropdown.prototype, "tree", void 0);
68
- __decorate([
69
- property({ type: Object })
70
- ], ToolbarDropdown.prototype, "item", void 0);
71
- __decorate([
72
- property({ type: String })
73
- ], ToolbarDropdown.prototype, "value", void 0);
74
- ToolbarDropdown = __decorate([
75
- customElement('og-toolbar-dropdown')
76
- ], ToolbarDropdown);
77
- export { ToolbarDropdown };
78
- //# sourceMappingURL=toolbarDropdown.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"toolbarDropdown.js","sourceRoot":"","sources":["../../../src/ui/controls/toolbarDropdown.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AACtC,OAAO,SAAS,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAc,UAAU,EAA8C,MAAM,iBAAiB,CAAC;AACrG,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAGnC,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAoCN,cAAS,GAAG,GAAG,EAAE;YAChB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAClB,MAAM,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;YACxC,IAAI,CAAC,KAAK,GAAG,eAAe,IAAI,eAAe,CAAC,CAAC,CAAC,IAAI,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;YAC3G,OAAO,CAAC,mBAAmB,CAAC,IAAI,EAAE,SAAS,EAAE;gBAC5C,IAAI,EAAE,QAAQ;gBACd,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE;gBACjB,KAAK,EAAE,IAAI,CAAC,KAAK;aACjB,CAAC,CAAC;QACJ,CAAC,CAAA;QAQD,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;gBAGJ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ;cACtB,IAAI,CAAC,SAAS;iBACX,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,OAAO;eAChC,IAAI,CAAC,IAAI,CAAC,OAAsB;eAChC,IAAI,CAAC,IAAI,CAAC,OAAO;aACnB,IAAI,CAAC,QAAQ,EAAE;;EAE1B,CAAC;IAEH,CAAC;IA1CA,OAAO;QACN,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,EAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,EAAC,CAAC,CAAC;QAElE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YACxB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,KAAqB,EAAE;gBACxD,YAAY,EAAE,KAAK;gBACnB,UAAU,EAAE,UAAU,CAAC,MAAM;gBAC7B,UAAU,EAAE,KAAK;gBACjB,SAAS,EAAE,KAAK;aAChB,CAAC,CAAC;QACJ,CAAC;IACF,CAAC;IAaD,QAAQ;QACP,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAC/C,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAsB,CACrE,CAAC;IACH,CAAC;;AAjDM,sBAAM,GAAG,CAAC,GAAG,CAAA;;;;aAIR,SAAS,CAAC,2BAA2B;;;;;;EAMhD,CAAC,AAVW,CAUV;AAGH;IADC,KAAK,CAAC,kBAAkB,CAAC;6CACP;AAGnB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;6CACP;AAGlB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;8CACX;AArBF,eAAe;IAD3B,aAAa,CAAC,qBAAqB,CAAC;GACxB,eAAe,CAiE3B","sourcesContent":["import { dom } from '@omegagrid/core';\nimport constants from '../../constants';\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ToolbarItem } from '../../types';\nimport { NodeSource, SelectMode, SerializedValue, TreeAdapter, TreeDropdown } from '@omegagrid/tree';\nimport { actions } from '@omegagrid/core';\n\n@customElement('og-toolbar-dropdown')\nexport class ToolbarDropdown extends LitElement {\n\n\tstatic styles = [css`\n\t\t:host {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\theight: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;\n\t\t}\n\n\t\tog-tree-dropdown {\n\t\t\theight: 100%;\n\t\t}\n\t`];\n\n\t@query('og-tree-dropdown')\n\ttree: TreeDropdown;\n\n\t@property({type: Object})\n\titem: ToolbarItem;\n\n\t@property({type: String})\n\tvalue: string;\n\n\tupdated() {\n\t\tif (this.item.width) dom.setSize(this.tree, {w: this.item.width});\n\t\t\n\t\tif (!this.item.adapter) {\n\t\t\tthis.tree.setSourceData(this.item.items as NodeSource[], {\n\t\t\t\tglobalLevels: false,\n\t\t\t\tselectMode: SelectMode.Single,\n\t\t\t\tcheckboxes: false,\n\t\t\t\texpanders: false\n\t\t\t});\n\t\t}\n\t}\n\n\t_onChange = () => {\n\t\tthis.tree.close();\n\t\tconst serializedValue = this.tree.value;\n\t\tthis.value = serializedValue && serializedValue[0] && serializedValue[0][0] ? serializedValue[0][0] : null;\n\t\tactions.dispatchActionEvent(this, 'toolbar', {\n\t\t\ttype: 'change',\n\t\t\tkey: this.item.id,\n\t\t\tvalue: this.value\n\t\t});\n\t}\n\n\tgetValue() {\n\t\treturn Array.isArray(this.value) ? this.value : (\n\t\t\tthis.value == null ? null : [[this.value, 0, 1]] as SerializedValue[]\n\t\t);\n\t}\n\n\trender = () => html`\n\t\t<og-tree-dropdown\n\t\t\tcolor=\"gray\"\n\t\t\t?disabled=\"${!!this.item.disabled}\"\n\t\t\t@change=\"${this._onChange}\"\n\t\t\t.alignment=\"${this.item.alignment || 'right'}\"\n\t\t\t.adapter=\"${this.item.adapter as TreeAdapter}\"\n\t\t\t.caption=\"${this.item.caption}\"\n\t\t\t.value=\"${this.getValue()}\">\n\t\t</og-tree-dropdown>\n\t`;\n\n}"]}
@@ -1,25 +0,0 @@
1
- import { Dropdown } from '@omegagrid/core';
2
- import { LitElement } from 'lit';
3
- import { ToolbarItem } from '../../types';
4
- import { ToolbarGrid } from './toolbarGrid';
5
- import { ToolbarButton } from './toolbarButton';
6
- import { Tree } from '@omegagrid/tree';
7
- export declare class ToolbarDropdownButton extends LitElement {
8
- static styles: import("lit").CSSResult[];
9
- gridRef: import("lit-html/directives/ref.js").Ref<ToolbarGrid>;
10
- get grid(): ToolbarGrid;
11
- treeRef: import("lit-html/directives/ref.js").Ref<Tree>;
12
- get tree(): Tree;
13
- dropdownRef: import("lit-html/directives/ref.js").Ref<Dropdown>;
14
- get dropdown(): Dropdown;
15
- button: ToolbarButton;
16
- item: ToolbarItem;
17
- currentItem: ToolbarItem;
18
- mode: 'dropdown' | 'button';
19
- willUpdate(): void;
20
- firstUpdated(): void;
21
- adjustWidth(): void;
22
- get isGridDropdown(): boolean;
23
- render: () => import("lit-html").TemplateResult<1>;
24
- }
25
- //# sourceMappingURL=toolbarDropdownButton.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"toolbarDropdownButton.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/toolbarDropdownButton.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAyB,MAAM,iBAAiB,CAAC;AAE9D,qBACa,qBAAsB,SAAQ,UAAU;IAEpD,MAAM,CAAC,MAAM,4BAsBV;IAEH,OAAO,wDAA4B;IACnC,IAAI,IAAI,gBAAgC;IAExC,OAAO,iDAAqB;IAC5B,IAAI,IAAI,SAAgC;IAExC,WAAW,qDAAyB;IACpC,IAAI,QAAQ,aAAoC;IAGhD,MAAM,EAAE,aAAa,CAAC;IAGtB,IAAI,EAAE,WAAW,CAAC;IAGlB,WAAW,EAAE,WAAW,CAAC;IAGzB,IAAI,EAAE,UAAU,GAAC,QAAQ,CAAY;IAErC,UAAU;IAUV,YAAY;IAgDZ,WAAW;IAWX,IAAI,cAAc,YAEjB;IAED,MAAM,6CA2BJ;CAEF"}
@@ -1,156 +0,0 @@
1
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
- return c > 3 && r && Object.defineProperty(target, key, r), r;
6
- };
7
- import constants from '../../constants';
8
- import { dom } from '@omegagrid/core';
9
- import { LitElement, html, css } from 'lit';
10
- import { customElement, property, query } from 'lit/decorators.js';
11
- import { createRef, ref } from 'lit-html/directives/ref.js';
12
- import { actions } from '@omegagrid/core';
13
- let ToolbarDropdownButton = class ToolbarDropdownButton extends LitElement {
14
- constructor() {
15
- super(...arguments);
16
- this.gridRef = createRef();
17
- this.treeRef = createRef();
18
- this.dropdownRef = createRef();
19
- this.mode = 'button';
20
- this.render = () => html `
21
- ${this.mode == 'button' ? html `
22
- <og-toolbar-button
23
- .item="${this.isGridDropdown ? this.currentItem : this.item}">
24
- </og-toolbar-button>
25
- ` : null}
26
-
27
- <og-dropdown ${ref(this.dropdownRef)}
28
- @dropdown.open="${() => this.adjustWidth()}"
29
- ?disabled="${!!this.item.disabled}"
30
- .alignment="${this.item.alignment || (this.isGridDropdown ? "left" : "right")}"
31
- .width="${this.isGridDropdown ? 0 : this.item.width}"
32
- .color="${this.item.color || 'gray'}"
33
- .icon="${this.mode == 'button' ? null : this.item.icon}"
34
- .positionOffset="${this.isGridDropdown ? -constants.TOOLBAR_COMPONENT_SIZE_BASE : 0}">
35
- ${this.isGridDropdown ? html `
36
- <og-toolbar-grid ${ref(this.gridRef)}
37
- slot="content"
38
- .items="${this.item.items}">
39
- </og-toolbar-grid>
40
- ` : html `
41
- <og-tree ${ref(this.treeRef)}
42
- maxHeight="300"
43
- slot="content">
44
- </og-tree>
45
- `}
46
- </og-dropdown>
47
- `;
48
- }
49
- get grid() { return this.gridRef.value; }
50
- get tree() { return this.treeRef.value; }
51
- get dropdown() { return this.dropdownRef.value; }
52
- willUpdate() {
53
- if (!this.currentItem && this.item?.items) {
54
- const items = this.item.items;
55
- this.currentItem = items.flatMap(row => row).find(item => item.default);
56
- if (!this.currentItem)
57
- this.currentItem = items[0][0];
58
- }
59
- if (this.item?.options)
60
- Object.assign(this, this.item.options);
61
- }
62
- firstUpdated() {
63
- if (this.grid) {
64
- dom.on(this.grid, 'click', 'og-toolbar-button', (e, elm) => {
65
- this.currentItem = elm.item;
66
- this.dropdown.close();
67
- });
68
- let previewId = null;
69
- dom.on(this.grid, 'mousemove', 'og-toolbar-button', (_e, elm) => {
70
- if (previewId != elm.item.id) {
71
- previewId = elm.item.id;
72
- actions.dispatchActionEvent(this, 'toolbar', { type: 'preview', key: elm.item.id, value: elm.item.value });
73
- }
74
- });
75
- this.grid.addEventListener('mouseleave', () => {
76
- actions.dispatchActionEvent(this, 'toolbar', { type: 'previewEnd', key: previewId, value: null });
77
- previewId = null;
78
- });
79
- this.grid.addEventListener('toolbar.action', (e) => {
80
- actions.dispatchActionEvent(this, 'toolbar', e.action);
81
- });
82
- }
83
- else {
84
- this.tree.setSourceData((this.item.items || []), {
85
- checkboxes: false
86
- });
87
- this.tree.addEventListener('select', (e) => {
88
- this.dropdown.close();
89
- actions.dispatchActionEvent(this, 'toolbar', { type: 'select', key: e.node.key, value: e.node.value });
90
- });
91
- }
92
- this.button?.addEventListener('click', () => {
93
- actions.dispatchActionEvent(this, 'toolbar', {
94
- type: 'select',
95
- key: (this.currentItem || this.item).id,
96
- value: (this.currentItem || this.item).value
97
- });
98
- });
99
- this.dropdown.addEventListener('mousedown', e => {
100
- e.stopPropagation();
101
- });
102
- }
103
- adjustWidth() {
104
- const dropdown = this.dropdown?.dropdown;
105
- if (this.tree?.list && dropdown) {
106
- dom.setSize(dropdown, { w: this.offsetWidth });
107
- const width = Math.max(this.tree.list.calculateViewportMaxItemWidth(), this.offsetWidth);
108
- if (width > dropdown.offsetWidth) {
109
- dom.setSize(dropdown, { w: width });
110
- }
111
- }
112
- }
113
- get isGridDropdown() {
114
- return this.item?.items && Array.isArray(this.item.items[0]) && this.item.items[0].length > 1;
115
- }
116
- };
117
- ToolbarDropdownButton.styles = [css `
118
- :host {
119
- display: flex;
120
- flex-direction: row;
121
- max-height: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;
122
- }
123
-
124
- og-toolbar-button {
125
- flex: 1;
126
- border-top-right-radius: 0;
127
- border-bottom-right-radius: 0;
128
- min-width: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;
129
- }
130
-
131
- og-toolbar-button+og-dropdown {
132
- flex: 0 0 14px;
133
- max-width: 14px;
134
- border-top-left-radius: 0;
135
- border-bottom-left-radius: 0;
136
- border-left: none;
137
- height: 100%;
138
- }
139
- `];
140
- __decorate([
141
- query('og-toolbar-button')
142
- ], ToolbarDropdownButton.prototype, "button", void 0);
143
- __decorate([
144
- property({ type: Object })
145
- ], ToolbarDropdownButton.prototype, "item", void 0);
146
- __decorate([
147
- property({ type: Object })
148
- ], ToolbarDropdownButton.prototype, "currentItem", void 0);
149
- __decorate([
150
- property({ type: String })
151
- ], ToolbarDropdownButton.prototype, "mode", void 0);
152
- ToolbarDropdownButton = __decorate([
153
- customElement('og-toolbar-dropdownbutton')
154
- ], ToolbarDropdownButton);
155
- export { ToolbarDropdownButton };
156
- //# sourceMappingURL=toolbarDropdownButton.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"toolbarDropdownButton.js","sourceRoot":"","sources":["../../../src/ui/controls/toolbarDropdownButton.ts"],"names":[],"mappings":"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","sourcesContent":["import constants from '../../constants';\nimport { dom, Dropdown } from '@omegagrid/core';\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ToolbarItem } from '../../types';\nimport { ToolbarGrid } from './toolbarGrid';\nimport { createRef, ref } from 'lit-html/directives/ref.js';\nimport { ToolbarButton } from './toolbarButton';\nimport { actions } from '@omegagrid/core';\nimport { Tree, TreeEvent, TreeSource } from '@omegagrid/tree';\n\n@customElement('og-toolbar-dropdownbutton')\nexport class ToolbarDropdownButton extends LitElement {\n\n\tstatic styles = [css`\n\t\t:host {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\tmax-height: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;\n\t\t}\n\n\t\tog-toolbar-button {\n\t\t\tflex: 1;\n\t\t\tborder-top-right-radius: 0;\n\t\t\tborder-bottom-right-radius: 0;\n\t\t\tmin-width: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;\n\t\t}\n\n\t\tog-toolbar-button+og-dropdown {\n\t\t\tflex: 0 0 14px;\n\t\t\tmax-width: 14px;\n\t\t\tborder-top-left-radius: 0;\n\t\t\tborder-bottom-left-radius: 0;\n\t\t\tborder-left: none;\n\t\t\theight: 100%;\n\t\t}\n\t`];\n\n\tgridRef = createRef<ToolbarGrid>();\n\tget grid() { return this.gridRef.value }\n\n\ttreeRef = createRef<Tree>();\n\tget tree() { return this.treeRef.value }\n\n\tdropdownRef = createRef<Dropdown>();\n\tget dropdown() { return this.dropdownRef.value }\n\n\t@query('og-toolbar-button')\n\tbutton: ToolbarButton;\n\n\t@property({type: Object})\n\titem: ToolbarItem;\n\n\t@property({type: Object})\n\tcurrentItem: ToolbarItem;\n\n\t@property({type: String})\n\tmode: 'dropdown'|'button' = 'button';\n\n\twillUpdate() {\n\t\tif (!this.currentItem && this.item?.items) {\n\t\t\tconst items = this.item.items as ToolbarItem[][];\n\t\t\tthis.currentItem = items.flatMap(row => row).find(item => item.default);\n\t\t\tif (!this.currentItem) this.currentItem = items[0][0];\n\t\t}\n\n\t\tif (this.item?.options) Object.assign(this, this.item.options);\n\t}\n\n\tfirstUpdated() {\n\t\tif (this.grid) {\n\t\t\tdom.on(this.grid, 'click', 'og-toolbar-button', (e: PointerEvent, elm: ToolbarButton) => {\n\t\t\t\tthis.currentItem = elm.item;\n\t\t\t\tthis.dropdown.close();\n\t\t\t});\n\n\t\t\tlet previewId: string = null;\n\t\t\t\n\t\t\tdom.on(this.grid, 'mousemove', 'og-toolbar-button', (_e: MouseEvent, elm: ToolbarButton) => {\n\t\t\t\tif (previewId != elm.item.id) {\n\t\t\t\t\tpreviewId = elm.item.id;\n\t\t\t\t\tactions.dispatchActionEvent(this, 'toolbar', {type: 'preview', key: elm.item.id, value: elm.item.value});\n\t\t\t\t}\n\t\t\t});\n\n\t\t\tthis.grid.addEventListener('mouseleave', () => {\n\t\t\t\tactions.dispatchActionEvent(this, 'toolbar', {type: 'previewEnd', key: previewId, value: null});\n\t\t\t\tpreviewId = null;\n\t\t\t});\n\n\t\t\tthis.grid.addEventListener('toolbar.action', (e: actions.ActionEvent) => {\n\t\t\t\tactions.dispatchActionEvent(this, 'toolbar', e.action);\n\t\t\t});\n\t\t} else {\n\t\t\tthis.tree.setSourceData((this.item.items || []) as TreeSource, {\n\t\t\t\tcheckboxes: false\n\t\t\t});\n\n\t\t\tthis.tree.addEventListener('select', (e: TreeEvent) => {\n\t\t\t\tthis.dropdown.close();\n\t\t\t\tactions.dispatchActionEvent(this, 'toolbar', {type: 'select', key: e.node.key, value: e.node.value});\n\t\t\t});\n\t\t}\n\t\t\n\t\tthis.button?.addEventListener('click', () => {\n\t\t\tactions.dispatchActionEvent(this, 'toolbar', {\n\t\t\t\ttype: 'select', \n\t\t\t\tkey: (this.currentItem || this.item).id, \n\t\t\t\tvalue: (this.currentItem || this.item).value\n\t\t\t});\n\t\t});\n\n\t\tthis.dropdown.addEventListener('mousedown', e => {\n\t\t\te.stopPropagation();\n\t\t});\n\t}\n\n\tadjustWidth() {\n\t\tconst dropdown = this.dropdown?.dropdown;\n\t\tif (this.tree?.list && dropdown) {\n\t\t\tdom.setSize(dropdown, {w: this.offsetWidth});\n\t\t\tconst width = Math.max(this.tree.list.calculateViewportMaxItemWidth(), this.offsetWidth);\n\t\t\tif (width > dropdown.offsetWidth) {\n\t\t\t\tdom.setSize(dropdown, {w: width});\n\t\t\t}\n\t\t}\n\t}\n\n\tget isGridDropdown() {\n\t\treturn this.item?.items && Array.isArray(this.item.items[0]) && this.item.items[0].length > 1;\n\t}\n\t\n\trender = () => html`\n\t\t${this.mode == 'button' ? html`\n\t\t\t<og-toolbar-button\n\t\t\t\t.item=\"${this.isGridDropdown ? this.currentItem : this.item}\">\n\t\t\t</og-toolbar-button>\n\t\t` : null}\n\t\t\n\t\t<og-dropdown ${ref(this.dropdownRef)}\n\t\t\t@dropdown.open=\"${() => this.adjustWidth()}\"\n\t\t\t?disabled=\"${!!this.item.disabled}\"\n\t\t\t.alignment=\"${this.item.alignment || (this.isGridDropdown ? \"left\" : \"right\")}\"\n\t\t\t.width=\"${this.isGridDropdown ? 0 : this.item.width}\"\n\t\t\t.color=\"${this.item.color || 'gray'}\"\n\t\t\t.icon=\"${this.mode == 'button' ? null : this.item.icon}\"\n\t\t\t.positionOffset=\"${this.isGridDropdown ? -constants.TOOLBAR_COMPONENT_SIZE_BASE : 0}\">\n\t\t\t${this.isGridDropdown ? html`\n\t\t\t\t<og-toolbar-grid ${ref(this.gridRef)}\n\t\t\t\t\tslot=\"content\"\n\t\t\t\t\t.items=\"${this.item.items}\">\n\t\t\t\t</og-toolbar-grid>\n\t\t\t` : html`\n\t\t\t\t<og-tree ${ref(this.treeRef)}\n\t\t\t\t\tmaxHeight=\"300\"\n\t\t\t\t\tslot=\"content\">\n\t\t\t\t</og-tree>\n\t\t\t`}\n\t\t</og-dropdown>\n\t`;\n\n}"]}
@@ -1,10 +0,0 @@
1
- import { DropdownMenu } from '@omegagrid/core';
2
- import { ToolbarItem } from '../../types';
3
- export declare class ToolbarDropdownMenu extends DropdownMenu {
4
- static styles: import("lit").CSSResult[];
5
- item: ToolbarItem;
6
- value: string;
7
- willUpdate(props: Map<string, unknown>): void;
8
- constructor();
9
- }
10
- //# sourceMappingURL=toolbarDropdownMenu.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"toolbarDropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/toolbarDropdownMenu.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAuB,MAAM,iBAAiB,CAAC;AAI9F,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,qBACa,mBAAoB,SAAQ,YAAY;IAEpD,MAAM,CAAC,MAAM,4BAMV;IAGH,IAAI,EAAE,WAAW,CAAC;IAGlB,KAAK,EAAE,MAAM,CAAC;IAEd,UAAU,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;;CA0BtC"}
@@ -1,55 +0,0 @@
1
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
- return c > 3 && r && Object.defineProperty(target, key, r), r;
6
- };
7
- import { actions, ColorTypes, dom, DropdownMenu } from '@omegagrid/core';
8
- import constants from '../../constants';
9
- import { css } from 'lit';
10
- import { customElement, property } from 'lit/decorators.js';
11
- let ToolbarDropdownMenu = class ToolbarDropdownMenu extends DropdownMenu {
12
- willUpdate(props) {
13
- super.willUpdate(props);
14
- this.style.width = dom.numToPixels(this.item.width || (this.item.text ? null : 23));
15
- this.style.textAlign = this.item.text ? 'left' : 'center';
16
- this.icon = this.item.icon;
17
- this.color = this.item.color || ColorTypes.Gray;
18
- this.label = this.item.caption ?? this.item.text;
19
- this.noCaret = false;
20
- this.disabled = !!this.item.disabled;
21
- this.alignment = this.item.alignment || 'right';
22
- this.items = (this.item.items || []);
23
- this.dynamicWidth = true;
24
- if (this.item?.options)
25
- Object.assign(this, this.item.options);
26
- }
27
- constructor() {
28
- super();
29
- this.addEventListener('menu.select', (e) => {
30
- actions.dispatchActionEvent(this, 'toolbar', {
31
- type: 'select',
32
- key: (e.item.key ?? e.item.k)?.toString(),
33
- value: (e.item.value ?? e.item.v)?.toString()
34
- });
35
- });
36
- }
37
- };
38
- ToolbarDropdownMenu.styles = [...DropdownMenu.styles, css `
39
- :host {
40
- display: flex;
41
- flex-direction: row;
42
- height: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;
43
- }
44
- `];
45
- __decorate([
46
- property({ type: Object })
47
- ], ToolbarDropdownMenu.prototype, "item", void 0);
48
- __decorate([
49
- property({ type: String })
50
- ], ToolbarDropdownMenu.prototype, "value", void 0);
51
- ToolbarDropdownMenu = __decorate([
52
- customElement('og-toolbar-dropdownmenu')
53
- ], ToolbarDropdownMenu);
54
- export { ToolbarDropdownMenu };
55
- //# sourceMappingURL=toolbarDropdownMenu.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"toolbarDropdownMenu.js","sourceRoot":"","sources":["../../../src/ui/controls/toolbarDropdownMenu.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,YAAY,EAAuB,MAAM,iBAAiB,CAAC;AAC9F,OAAO,SAAS,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAIrD,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,YAAY;IAgBpD,UAAU,CAAC,KAA2B;QACrC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QACxB,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACpF,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;QAC1D,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;QAC3B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,UAAU,CAAC,IAAI,CAAC;QAChD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;QACjD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;QACrC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,OAAO,CAAC;QAChD,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAe,CAAC;QACnD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,IAAI,IAAI,CAAC,IAAI,EAAE,OAAO;YAAE,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAChE,CAAC;IAED;QACC,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,CAAC,CAAY,EAAE,EAAE;YACrD,OAAO,CAAC,mBAAmB,CAAC,IAAI,EAAE,SAAS,EAAE;gBAC5C,IAAI,EAAE,QAAQ;gBACd,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE;gBACzC,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE;aAC7C,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;IACJ,CAAC;;AAtCM,0BAAM,GAAG,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,GAAG,CAAA;;;;aAIhC,SAAS,CAAC,2BAA2B;;EAEhD,CAAC,AANW,CAMV;AAGH;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;iDACP;AAGlB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;kDACX;AAdF,mBAAmB;IAD/B,aAAa,CAAC,yBAAyB,CAAC;GAC5B,mBAAmB,CA0C/B","sourcesContent":["import { actions, ColorTypes, dom, DropdownMenu, MenuEvent, MenuItem } from '@omegagrid/core';\nimport constants from '../../constants';\nimport { css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ToolbarItem } from '../../types';\n\n@customElement('og-toolbar-dropdownmenu')\nexport class ToolbarDropdownMenu extends DropdownMenu {\n\n\tstatic styles = [...DropdownMenu.styles, css`\n\t\t:host {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\theight: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;\n\t\t}\n\t`];\n\n\t@property({type: Object})\n\titem: ToolbarItem;\n\n\t@property({type: String})\n\tvalue: string;\n\n\twillUpdate(props: Map<string, unknown>) {\n\t\tsuper.willUpdate(props);\n\t\tthis.style.width = dom.numToPixels(this.item.width || (this.item.text ? null : 23));\n\t\tthis.style.textAlign = this.item.text ? 'left' : 'center';\n\t\tthis.icon = this.item.icon;\n\t\tthis.color = this.item.color || ColorTypes.Gray;\n\t\tthis.label = this.item.caption ?? this.item.text;\n\t\tthis.noCaret = false;\n\t\tthis.disabled = !!this.item.disabled;\n\t\tthis.alignment = this.item.alignment || 'right';\n\t\tthis.items = (this.item.items || []) as MenuItem[];\n\t\tthis.dynamicWidth = true;\n\t\tif (this.item?.options) Object.assign(this, this.item.options);\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.addEventListener('menu.select', (e: MenuEvent) => {\n\t\t\tactions.dispatchActionEvent(this, 'toolbar', {\n\t\t\t\ttype: 'select', \n\t\t\t\tkey: (e.item.key ?? e.item.k)?.toString(), \n\t\t\t\tvalue: (e.item.value ?? e.item.v)?.toString()\n\t\t\t});\n\t\t});\n\t}\n\n}"]}
@@ -1,8 +0,0 @@
1
- import { LitElement } from 'lit';
2
- import { ToolbarItem } from '../../types';
3
- export declare class ToolbarGrid extends LitElement {
4
- static styles: import("lit").CSSResult[];
5
- items: ToolbarItem[][];
6
- render: () => import("lit-html").TemplateResult<1>;
7
- }
8
- //# sourceMappingURL=toolbarGrid.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"toolbarGrid.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/toolbarGrid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAK1C,qBACa,WAAY,SAAQ,UAAU;IAE1C,MAAM,CAAC,MAAM,4BAMV;IAGH,KAAK,EAAE,WAAW,EAAE,EAAE,CAAC;IAEvB,MAAM,6CAQJ;CAEF"}
@@ -1,40 +0,0 @@
1
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
- return c > 3 && r && Object.defineProperty(target, key, r), r;
6
- };
7
- import { css, html, LitElement } from 'lit';
8
- import { customElement, property } from 'lit/decorators.js';
9
- import { map } from 'lit/directives/map.js';
10
- import { renderers } from './renderers';
11
- import { ifDefined } from 'lit/directives/if-defined.js';
12
- let ToolbarGrid = class ToolbarGrid extends LitElement {
13
- constructor() {
14
- super(...arguments);
15
- this.render = () => html `
16
- <table>
17
- ${map(this.items, row => html `
18
- <tr>
19
- ${map(row, item => html `<td colspan=${ifDefined(item.colspan)}>${renderers.get(item.type)(item)}</td>`)}
20
- </tr>
21
- `)}
22
- </table>
23
- `;
24
- }
25
- };
26
- ToolbarGrid.styles = [css `
27
- :host {
28
- box-sizing: border-box;
29
- display: block;
30
- background-color: var(--og-background-color);
31
- }
32
- `];
33
- __decorate([
34
- property({ type: Array })
35
- ], ToolbarGrid.prototype, "items", void 0);
36
- ToolbarGrid = __decorate([
37
- customElement('og-toolbar-grid')
38
- ], ToolbarGrid);
39
- export { ToolbarGrid };
40
- //# sourceMappingURL=toolbarGrid.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"toolbarGrid.js","sourceRoot":"","sources":["../../../src/ui/controls/toolbarGrid.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGlD,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAaN,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;KAEf,GAAG,CAAC,IAAI,CAAC,KAAwB,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA;;OAE5C,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,eAAe,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;;IAExG,CAAC;;EAEH,CAAC;IAEH,CAAC;;AArBO,kBAAM,GAAG,CAAC,GAAG,CAAA;;;;;;EAMnB,CAAC,AANW,CAMV;AAGH;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,KAAK,EAAC,CAAC;0CACD;AAXX,WAAW;IADvB,aAAa,CAAC,iBAAiB,CAAC;GACpB,WAAW,CAuBvB","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ToolbarItem } from '../../types';\nimport { map } from 'lit/directives/map.js';\nimport { renderers } from './renderers';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\n@customElement('og-toolbar-grid')\nexport class ToolbarGrid extends LitElement {\n\n\tstatic styles = [css`\n\t\t:host {\n\t\t\tbox-sizing: border-box;\n\t\t\tdisplay: block;\n\t\t\tbackground-color: var(--og-background-color);\n\t\t}\n\t`];\n\n\t@property({type: Array})\n\titems: ToolbarItem[][];\n\n\trender = () => html`\n\t\t<table>\n\t\t\t${map(this.items as ToolbarItem[][], row => html`\n\t\t\t\t<tr>\n\t\t\t\t\t${map(row, item => html`<td colspan=${ifDefined(item.colspan)}>${renderers.get(item.type)(item)}</td>`)}\n\t\t\t\t</tr>\n\t\t\t`)}\n\t\t</table>\n\t`;\n\n}"]}
@@ -1,19 +0,0 @@
1
- import { Dropdown, List, ListSelectEvent } from '@omegagrid/core';
2
- import { LitElement } from 'lit';
3
- import { ToolbarItem } from '../../types';
4
- export declare class ToolbarText extends LitElement {
5
- static styles: import("lit").CSSResult[];
6
- color: string;
7
- item: ToolbarItem;
8
- value: string;
9
- input: HTMLInputElement;
10
- dropdownRef: import("lit-html/directives/ref.js").Ref<Dropdown>;
11
- get dropdown(): Dropdown;
12
- listRef: import("lit-html/directives/ref.js").Ref<List>;
13
- get list(): List;
14
- updated(): void;
15
- _onSelect: (e: ListSelectEvent) => void;
16
- _onKeyUp: () => void;
17
- render: () => import("lit-html").TemplateResult<1>;
18
- }
19
- //# sourceMappingURL=toolbarText.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"toolbarText.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/toolbarText.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAE,IAAI,EAAE,eAAe,EAAa,MAAM,iBAAiB,CAAC;AAElF,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAK1C,qBAEa,WAAY,SAAQ,UAAU;IAE1C,MAAM,CAAC,MAAM,4BA0BV;IAGH,KAAK,SAAU;IAGf,IAAI,EAAE,WAAW,CAAC;IAGlB,KAAK,EAAE,MAAM,CAAC;IAGd,KAAK,EAAE,gBAAgB,CAAC;IAExB,WAAW,qDAAyB;IACpC,IAAI,QAAQ,aAAoC;IAEhD,OAAO,iDAAqB;IAC5B,IAAI,IAAI,SAAgC;IAExC,OAAO;IAUP,SAAS,GAAI,GAAG,eAAe,UAQ9B;IAED,QAAQ,aAUP;IAED,MAAM,6CAsBJ;CAEF"}
@@ -1,119 +0,0 @@
1
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
- return c > 3 && r && Object.defineProperty(target, key, r), r;
6
- };
7
- import { dom, colorable } from '@omegagrid/core';
8
- import constants from '../../constants';
9
- import { LitElement, html, css } from 'lit';
10
- import { customElement, property, query } from 'lit/decorators.js';
11
- import { actions } from '@omegagrid/core';
12
- import { createRef, ref } from 'lit-html/directives/ref.js';
13
- let ToolbarText = class ToolbarText extends LitElement {
14
- constructor() {
15
- super(...arguments);
16
- this.color = 'gray';
17
- this.dropdownRef = createRef();
18
- this.listRef = createRef();
19
- this._onSelect = (e) => {
20
- this.dropdown.close();
21
- this.value = this.item.items[e.index].k;
22
- actions.dispatchActionEvent(this, 'toolbar', {
23
- type: 'change',
24
- key: this.item.id,
25
- value: this.value
26
- });
27
- };
28
- this._onKeyUp = () => {
29
- if (this.value != this.input.value) {
30
- this.value = this.input.value;
31
- actions.dispatchActionEvent(this, 'toolbar', {
32
- type: 'change',
33
- key: this.item.id,
34
- value: this.value
35
- });
36
- this.input.focus();
37
- }
38
- };
39
- this.render = () => html `
40
- <input
41
- class="${this.item.items && this.item.items.length > 0 ? 'has-dropdown' : ''}"
42
- type="text"
43
- .value="${this.value ?? ''}"
44
- placeholder="${this.item.placeholder}"
45
- ?disabled="${!!this.item.disabled}"
46
- @keyup="${this._onKeyUp}">
47
- ${this.item.items && this.item.items.length > 0 ? html `
48
- <og-dropdown ${ref(this.dropdownRef)}
49
- style="min-width: 14px; flex: 0"
50
- color="gray"
51
- alignment="right"
52
- ?disabled="${!!this.item.disabled}">
53
- <og-list ${ref(this.listRef)}
54
- slot="content"
55
- size="${this.item.items.length}"
56
- maxHeight="220"
57
- @select="${this._onSelect}">
58
- </og-list>
59
- </og-dropdown>
60
- ` : ``}
61
- `;
62
- }
63
- get dropdown() { return this.dropdownRef.value; }
64
- get list() { return this.listRef.value; }
65
- updated() {
66
- if (this.list) {
67
- this.list.itemRenderer = (div, index) => {
68
- div.style.paddingLeft = dom.numToPixels(5);
69
- return this.item.items[index].v;
70
- };
71
- dom.setSize(this.list, { w: this.clientWidth });
72
- }
73
- }
74
- };
75
- ToolbarText.styles = [css `
76
- :host {
77
- display: flex;
78
- flex-direction: row;
79
- height: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;
80
- }
81
-
82
- input {
83
- font-size: var(--og-font-size);
84
- flex: 1;
85
- min-width: 10px;
86
- outline: none;
87
- border-radius: var(--og-base-radius);
88
- }
89
-
90
- input.has-dropdown {
91
- border-top-right-radius: 0;
92
- border-bottom-right-radius: 0;
93
- }
94
-
95
- og-dropdown {
96
- border-top-left-radius: 0;
97
- border-bottom-left-radius: 0;
98
- height: 100%;
99
- border-left: none;
100
- }
101
- `];
102
- __decorate([
103
- property({ type: String, reflect: true })
104
- ], ToolbarText.prototype, "color", void 0);
105
- __decorate([
106
- property({ type: Object })
107
- ], ToolbarText.prototype, "item", void 0);
108
- __decorate([
109
- property({ type: String })
110
- ], ToolbarText.prototype, "value", void 0);
111
- __decorate([
112
- query('input')
113
- ], ToolbarText.prototype, "input", void 0);
114
- ToolbarText = __decorate([
115
- customElement('og-toolbar-text'),
116
- colorable({ props: ['color', 'border', 'background'], selector: 'input' })
117
- ], ToolbarText);
118
- export { ToolbarText };
119
- //# sourceMappingURL=toolbarText.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"toolbarText.js","sourceRoot":"","sources":["../../../src/ui/controls/toolbarText.ts"],"names":[],"mappings":"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","sourcesContent":["import { dom, Dropdown, List, ListSelectEvent, colorable } from '@omegagrid/core';\nimport constants from '../../constants';\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ToolbarItem } from '../../types';\nimport { NodeSource } from '@omegagrid/tree';\nimport { actions } from '@omegagrid/core';\nimport { createRef, ref } from 'lit-html/directives/ref.js';\n\n@customElement('og-toolbar-text')\n@colorable({props: ['color', 'border', 'background'], selector: 'input'})\nexport class ToolbarText extends LitElement {\n\n\tstatic styles = [css`\n\t\t:host {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\theight: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;\n\t\t}\n\n\t\tinput {\n\t\t\tfont-size: var(--og-font-size);\n\t\t\tflex: 1;\n\t\t\tmin-width: 10px;\n\t\t\toutline: none;\n\t\t\tborder-radius: var(--og-base-radius);\n\t\t}\n\n\t\tinput.has-dropdown {\n\t\t\tborder-top-right-radius: 0;\n\t\t\tborder-bottom-right-radius: 0;\n\t\t}\n\n\t\tog-dropdown {\n\t\t\tborder-top-left-radius: 0;\n\t\t\tborder-bottom-left-radius: 0;\n\t\t\theight: 100%;\n\t\t\tborder-left: none;\n\t\t}\n\t`];\n\n\t@property({type: String, reflect: true})\n\tcolor = 'gray';\n\n\t@property({type: Object})\n\titem: ToolbarItem;\n\n\t@property({type: String})\n\tvalue: string;\n\n\t@query('input')\n\tinput: HTMLInputElement;\n\n\tdropdownRef = createRef<Dropdown>();\n\tget dropdown() { return this.dropdownRef.value }\n\n\tlistRef = createRef<List>();\n\tget list() { return this.listRef.value }\n\n\tupdated() {\n\t\tif (this.list) {\n\t\t\tthis.list.itemRenderer = (div: HTMLDivElement, index: number) => {\n\t\t\t\tdiv.style.paddingLeft = dom.numToPixels(5);\n\t\t\t\treturn (this.item.items[index] as NodeSource).v;\n\t\t\t}\n\t\t\tdom.setSize(this.list, {w: this.clientWidth});\n\t\t}\n\t}\n\n\t_onSelect = (e: ListSelectEvent) => {\n\t\tthis.dropdown.close();\n\t\tthis.value = (this.item.items[e.index] as NodeSource).k;\n\t\tactions.dispatchActionEvent(this, 'toolbar', {\n\t\t\ttype: 'change',\n\t\t\tkey: this.item.id,\n\t\t\tvalue: this.value\n\t\t});\n\t}\n\n\t_onKeyUp = () => {\n\t\tif (this.value != this.input.value) {\n\t\t\tthis.value = this.input.value;\n\t\t\tactions.dispatchActionEvent(this, 'toolbar', {\n\t\t\t\ttype: 'change',\n\t\t\t\tkey: this.item.id,\n\t\t\t\tvalue: this.value\n\t\t\t});\n\t\t\tthis.input.focus();\n\t\t}\n\t}\n\n\trender = () => html`\n\t\t<input\n\t\t\tclass=\"${this.item.items && this.item.items.length > 0 ? 'has-dropdown' : ''}\"\n\t\t\ttype=\"text\"\n\t\t\t.value=\"${this.value ?? ''}\"\n\t\t\tplaceholder=\"${this.item.placeholder}\"\n\t\t\t?disabled=\"${!!this.item.disabled}\"\n\t\t\t@keyup=\"${this._onKeyUp}\">\n\t\t${this.item.items && this.item.items.length > 0 ? html`\n\t\t\t<og-dropdown ${ref(this.dropdownRef)}\n\t\t\t\tstyle=\"min-width: 14px; flex: 0\"\n\t\t\t\tcolor=\"gray\"\n\t\t\t\talignment=\"right\"\n\t\t\t\t?disabled=\"${!!this.item.disabled}\">\n\t\t\t\t<og-list ${ref(this.listRef)}\n\t\t\t\t\tslot=\"content\"\n\t\t\t\t\tsize=\"${this.item.items.length}\"\n\t\t\t\t\tmaxHeight=\"220\"\n\t\t\t\t\t@select=\"${this._onSelect}\">\n\t\t\t\t</og-list>\n\t\t\t</og-dropdown>\n\t\t` : ``}\n\t`;\n\n}"]}
@@ -1,3 +0,0 @@
1
- export * from './toolbar';
2
- export * from './controls';
3
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC"}
package/dist/ui/index.js DELETED
@@ -1,3 +0,0 @@
1
- export * from './toolbar';
2
- export * from './controls';
3
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC","sourcesContent":["export * from './toolbar';\nexport * from './controls';"]}
@@ -1,19 +0,0 @@
1
- import { Layout, Tooltip } from '@omegagrid/core';
2
- import { LitElement } from 'lit';
3
- import { ToolbarItem } from '../types';
4
- export declare class Toolbar extends LitElement implements Layout {
5
- static styles: import("lit").CSSResult[];
6
- items: ToolbarItem[];
7
- values: Record<string, unknown>;
8
- readonly controls: Map<string, HTMLElement>;
9
- tooltipRef: import("lit-html/directives/ref").Ref<Tooltip>;
10
- get tooltip(): Tooltip;
11
- _tooltipTimeout: number;
12
- constructor();
13
- layout(): void;
14
- _onItemMouseEnter: (e: MouseEvent) => void;
15
- _onItemMouseLeave: () => void;
16
- updated(): void;
17
- render: () => import("lit-html").TemplateResult<1>;
18
- }
19
- //# sourceMappingURL=toolbar.d.ts.map