@omegagrid/toolbar 0.10.25 → 0.10.27
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.
- package/dist/ui/controls/toolbarButton.d.ts.map +1 -1
- package/dist/ui/controls/toolbarButton.js +0 -1
- package/dist/ui/controls/toolbarButton.js.map +1 -1
- package/dist/ui/controls/toolbarColorPicker.d.ts.map +1 -1
- package/dist/ui/controls/toolbarColorPicker.js +2 -5
- package/dist/ui/controls/toolbarColorPicker.js.map +1 -1
- package/dist/ui/controls/toolbarCustomDropdown.d.ts.map +1 -1
- package/dist/ui/controls/toolbarCustomDropdown.js +0 -2
- package/dist/ui/controls/toolbarCustomDropdown.js.map +1 -1
- package/dist/ui/controls/toolbarDropdown.d.ts.map +1 -1
- package/dist/ui/controls/toolbarDropdown.js +0 -2
- package/dist/ui/controls/toolbarDropdown.js.map +1 -1
- package/dist/ui/controls/toolbarDropdownButton.d.ts.map +1 -1
- package/dist/ui/controls/toolbarDropdownButton.js +3 -2
- package/dist/ui/controls/toolbarDropdownButton.js.map +1 -1
- package/dist/ui/controls/toolbarDropdownMenu.d.ts.map +1 -1
- package/dist/ui/controls/toolbarDropdownMenu.js +0 -2
- package/dist/ui/controls/toolbarDropdownMenu.js.map +1 -1
- package/dist/ui/controls/toolbarText.d.ts.map +1 -1
- package/dist/ui/controls/toolbarText.js +0 -2
- package/dist/ui/controls/toolbarText.js.map +1 -1
- package/dist/ui/toolbar.style.d.ts.map +1 -1
- package/dist/ui/toolbar.style.js +9 -13
- package/dist/ui/toolbar.style.js.map +1 -1
- package/package.json +4 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toolbarButton.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/toolbarButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAc,MAAM,iBAAiB,CAAC;AAIrD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG1C,qBACa,aAAc,SAAQ,MAAM;IAExC,MAAM,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"toolbarButton.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/toolbarButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAc,MAAM,iBAAiB,CAAC;AAIrD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG1C,qBACa,aAAc,SAAQ,MAAM;IAExC,MAAM,CAAC,MAAM,4BAMV;IAGH,IAAI,EAAE,WAAW,CAAC;;IAOlB,YAAY;IAUZ,UAAU,CAAC,YAAY,EAAE,GAAG,CAAC,WAAW,EAAE,SAAS,CAAC;CAepD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toolbarButton.js","sourceRoot":"","sources":["../../../src/ui/controls/toolbarButton.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,SAAS,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAGnC,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,MAAM;
|
|
1
|
+
{"version":3,"file":"toolbarButton.js","sourceRoot":"","sources":["../../../src/ui/controls/toolbarButton.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,SAAS,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAGnC,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,MAAM;IAaxC;QACC,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;IACnB,CAAC;IAED,YAAY;QACX,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;YACnC,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,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK;aAC1E,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;IACJ,CAAC;IAED,UAAU,CAAC,YAAyC;QACnD,IAAI,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YAC3C,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;YAC3B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;YAC3B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;YAC/G,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC;YAE5C,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;gBACvB,MAAM,CAAC,IAAI,CAAA,uBAAuB,IAAI,CAAC,IAAI,CAAC,OAAO,QAAQ,EAAE,IAAI,CAAC,CAAC;YACpE,CAAC;QACF,CAAC;QAED,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAChC,CAAC;;AAvCM,oBAAM,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAA;;;;gBAIvB,SAAS,CAAC,2BAA2B;;EAEnD,CAAC,AANW,CAMV;AAGH;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;2CACP;AAXN,aAAa;IADzB,aAAa,CAAC,mBAAmB,CAAC;GACtB,aAAa,CA2CzB","sourcesContent":["import { Button, ColorTypes } from '@omegagrid/core';\nimport constants from '../../constants';\nimport { css, render, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ToolbarItem } from '../../types';\nimport { actions } from '@omegagrid/core';\n\n@customElement('og-toolbar-button')\nexport class ToolbarButton extends Button {\n\n\tstatic styles = [...Button.styles, css`\n\t\t:host {\n\t\t\tbox-sizing: border-box;\n\t\t\tdisplay: block;\n\t\t\tmin-width: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;\n\t\t}\n\t`];\n\n\t@property({type: Object})\n\titem: ToolbarItem;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.color = null;\n\t}\n\n\tfirstUpdated() {\n\t\tthis.addEventListener('click', () => {\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.type == 'toggle' ? (this.state == 'checked') : this.item.value\n\t\t\t});\n\t\t});\n\t}\n\n\twillUpdate(changedProps: Map<PropertyKey, undefined>) {\n\t\tif (changedProps.has('item') && this.item) {\n\t\t\tthis.icon = this.item.icon;\n\t\t\tthis.text = this.item.text;\n\t\t\tthis.color = this.item.color ? this.item.color : (this.type == 'normal' ? ColorTypes.Gray : ColorTypes.Accent);\n\t\t\tthis.disabled = this.item.disabled || false;\n\n\t\t\tif (this.item.content) {\n\t\t\t\trender(html`<div slot=\"content\">${this.item.content}</div>`, this);\n\t\t\t}\n\t\t}\n\n\t\tsuper.willUpdate(changedProps);\n\t}\n\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toolbarColorPicker.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/toolbarColorPicker.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,UAAU,EAAQ,MAAM,KAAK,CAAC;AAG5C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAG7E,qBACa,kBAAmB,SAAQ,UAAU;IAEjD,MAAM,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"toolbarColorPicker.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/toolbarColorPicker.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,UAAU,EAAQ,MAAM,KAAK,CAAC;AAG5C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAG7E,qBACa,kBAAmB,SAAQ,UAAU;IAEjD,MAAM,CAAC,MAAM,4BAgCV;IAGH,IAAI,EAAE,WAAW,CAAC;IAGlB,KAAK,EAAE,MAAM,CAAC;IAGd,QAAQ,EAAE,QAAQ,CAAC;IAGnB,MAAM,EAAE,MAAM,CAAC;IAGf,UAAU,EAAE,cAAc,CAAC;IAE3B,SAAS,GAAI,GAAG,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,UAIzC;IAED,UAAU,GAAI,GAAG,gBAAgB,UAGhC;IAED,aAAa,GAAI,GAAG,gBAAgB,UAGnC;IAED,MAAM,6CAyBJ;CAEF"}
|
|
@@ -26,7 +26,7 @@ let ToolbarColorPicker = class ToolbarColorPicker extends LitElement {
|
|
|
26
26
|
actions.dispatchActionEvent(this, 'toolbar', { type: 'previewEnd', key: this.item.id, value: e.color });
|
|
27
27
|
};
|
|
28
28
|
this.render = () => html `
|
|
29
|
-
<og-button
|
|
29
|
+
<og-button
|
|
30
30
|
mode="toggle"
|
|
31
31
|
color="gray"
|
|
32
32
|
style="${styleMap({ backgroundColor: this.value })}"
|
|
@@ -57,21 +57,18 @@ ToolbarColorPicker.styles = [css `
|
|
|
57
57
|
:host {
|
|
58
58
|
display: flex;
|
|
59
59
|
flex-direction: row;
|
|
60
|
-
max-height: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;
|
|
61
60
|
}
|
|
62
61
|
|
|
63
62
|
og-button {
|
|
64
63
|
box-sizing: border-box;
|
|
65
64
|
display: block;
|
|
66
65
|
width: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;
|
|
67
|
-
height: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;
|
|
68
|
-
max-height: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;
|
|
69
66
|
min-width: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;
|
|
70
|
-
line-height: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;
|
|
71
67
|
padding: 0;
|
|
72
68
|
flex: 0;
|
|
73
69
|
border-top-right-radius: 0;
|
|
74
70
|
border-bottom-right-radius: 0;
|
|
71
|
+
height: 100%;
|
|
75
72
|
}
|
|
76
73
|
|
|
77
74
|
.btn-content {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toolbarColorPicker.js","sourceRoot":"","sources":["../../../src/ui/controls/toolbarColorPicker.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,SAAS,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAGvD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAGnC,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;
|
|
1
|
+
{"version":3,"file":"toolbarColorPicker.js","sourceRoot":"","sources":["../../../src/ui/controls/toolbarColorPicker.ts"],"names":[],"mappings":"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","sourcesContent":["import constants from '../../constants';\nimport { css, LitElement, html } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { ToolbarItem } from '../../types';\nimport { Button, ColorPickerEvent, Dropdown, events } from '@omegagrid/core';\nimport { actions } from '@omegagrid/core';\n\n@customElement('og-toolbar-colorpicker')\nexport class ToolbarColorPicker 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}\n\n\t\tog-button {\n\t\t\tbox-sizing: border-box;\n\t\t\tdisplay: block;\n\t\t\twidth: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;\n\t\t\tmin-width: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;\n\t\t\tpadding: 0;\n\t\t\tflex: 0;\n\t\t\tborder-top-right-radius: 0;\n\t\t\tborder-bottom-right-radius: 0;\n\t\t\theight: 100%;\n\t\t}\n\n\t\t.btn-content {\n\t\t\ttext-align: center;\n\t\t\tmargin-left: 1px;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t}\n\n\t\tog-button+og-dropdown {\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\t@property({type: Object})\n\titem: ToolbarItem;\n\n\t@property({type: String})\n\tvalue: string;\n\n\t@query('og-dropdown')\n\tdropdown: Dropdown;\n\n\t@query('og-button')\n\tbutton: Button;\n\n\t@query('.btn-content')\n\tbtnContent: HTMLDivElement;\n\n\t_onChange = (e: events.ChangeEvent<string>) => {\n\t\tthis.button.style.backgroundColor = e.value;\n\t\tactions.dispatchActionEvent(this, 'toolbar', {type: 'select', key: this.item.id, value: e.value});\n\t\tthis.dropdown.close();\n\t}\n\n\t_onPreview = (e: ColorPickerEvent) => {\n\t\tthis.button.style.backgroundColor = e.color;\n\t\tactions.dispatchActionEvent(this, 'toolbar', {type: 'preview', key: this.item.id, value: e.color});\n\t}\n\n\t_onPreviewEnd = (e: ColorPickerEvent) => {\n\t\tthis.button.style.backgroundColor = e.color;\n\t\tactions.dispatchActionEvent(this, 'toolbar', {type: 'previewEnd', key: this.item.id, value: e.color});\n\t}\n\n\trender = () => html`\n\t\t<og-button\n\t\t\tmode=\"toggle\"\n\t\t\tcolor=\"gray\"\n\t\t\tstyle=\"${styleMap({backgroundColor: this.value})}\"\n\t\t\t?disabled=\"${!!this.item.disabled}\">\n\t\t\t<div class=\"btn-content\" slot=\"content\">\n\t\t\t\t${this.item.icon ? html`<og-icon .icon=\"${this.item.icon}\"></og-icon>` : ``}\n\t\t\t</div>\n\t\t</og-button>\n\n\t\t<og-dropdown\n\t\t\tstyle=\"min-width: 14px; flex: 0\"\n\t\t\tcolor=\"gray\"\n\t\t\talignment=\"left\"\n\t\t\t?disabled=\"${!!this.item.disabled}\"\n\t\t\t.positionOffset=\"${-constants.TOOLBAR_COMPONENT_SIZE_BASE}\">\n\t\t\t<og-colorpicker\n\t\t\t\tslot=\"content\"\n\t\t\t\t@change=\"${this._onChange}\"\n\t\t\t\t@preview=\"${this._onPreview}\"\n\t\t\t\t@previewEnd=\"${this._onPreviewEnd}\"\n\t\t\t\t@mousedown=\"${(e: MouseEvent) => e.stopPropagation()}\">\n\t\t\t</og-colorpicker>\n\t\t</og-dropdown>\n\t`;\n\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toolbarCustomDropdown.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/toolbarCustomDropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,QAAQ,EAAU,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"toolbarCustomDropdown.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/toolbarCustomDropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,QAAQ,EAAU,MAAM,iBAAiB,CAAC;AAGpE,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG1C,qBACa,qBAAsB,SAAQ,QAAQ;IAElD,MAAM,CAAC,MAAM,4BAKV;IAGH,IAAI,EAAE,WAAW,CAAC;IAGlB,KAAK,EAAE,MAAM,CAAC;IAEd,UAAU,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAShC,YAAY;IAaZ,IAAI;CASV"}
|
|
@@ -5,7 +5,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
7
|
import { ColorTypes, dom, Dropdown } from '@omegagrid/core';
|
|
8
|
-
import constants from '../../constants';
|
|
9
8
|
import { css } from 'lit';
|
|
10
9
|
import { customElement, property } from 'lit/decorators.js';
|
|
11
10
|
import { actions } from '@omegagrid/core';
|
|
@@ -42,7 +41,6 @@ ToolbarCustomDropdown.styles = [...Dropdown.styles, css `
|
|
|
42
41
|
:host {
|
|
43
42
|
display: flex;
|
|
44
43
|
flex-direction: row;
|
|
45
|
-
height: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;
|
|
46
44
|
}
|
|
47
45
|
`];
|
|
48
46
|
__decorate([
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toolbarCustomDropdown.js","sourceRoot":"","sources":["../../../src/ui/controls/toolbarCustomDropdown.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,QAAQ,EAAU,MAAM,iBAAiB,CAAC;AACpE,OAAO,
|
|
1
|
+
{"version":3,"file":"toolbarCustomDropdown.js","sourceRoot":"","sources":["../../../src/ui/controls/toolbarCustomDropdown.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,QAAQ,EAAU,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAGnC,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,QAAQ;IAelD,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,UAAU,CAAC,IAAI,CAAC;QAC7B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACrB,CAAC;IAED,KAAK,CAAC,YAAY;QACjB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe;YAAE,OAAO,IAAI,CAAC;QAC5C,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QAC5E,SAAS,CAAC,IAAI,GAAG,eAAe,CAAC;QAEjC,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAqB,EAAE,EAAE;YAC9D,IAAI,CAAC,KAAK,EAAE,CAAC;YACb,OAAO,CAAC,mBAAmB,CAAC,IAAI,EAAE,SAAS,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAC,CAAC,CAAC;QACnG,CAAC,CAAC,CAAC;QAEH,OAAO,SAAS,CAAC;IAClB,CAAC;IAED,KAAK,CAAC,IAAI;QACT,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC;QAC5C,IAAI,SAAS,CAAC,aAAa,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC9C,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YACzB,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;QACtC,CAAC;QACD,MAAM,KAAK,CAAC,IAAI,EAAE,CAAC;IACpB,CAAC;;AA1CM,4BAAM,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,GAAG,CAAA;;;;;EAKvC,CAAC,AALW,CAKV;AAGH;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;mDACP;AAGlB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;oDACX;AAbF,qBAAqB;IADjC,aAAa,CAAC,2BAA2B,CAAC;GAC9B,qBAAqB,CA8CjC","sourcesContent":["import { ColorTypes, dom, Dropdown, events } from '@omegagrid/core';\nimport { css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ToolbarItem } from '../../types';\nimport { actions } from '@omegagrid/core';\n\n@customElement('og-toolbar-customdropdown')\nexport class ToolbarCustomDropdown extends Dropdown {\n\n\tstatic styles = [...Dropdown.styles, css`\n\t\t:host {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\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 = ColorTypes.Gray;\n\t\tthis.noCaret = true;\n\t}\n\n\tasync getComponent() {\n\t\tif (!this.item.createComponent) return null;\n\t\tconst component = await this.item.createComponent(this.item.id, this.value);\n\t\tcomponent.slot = 'inner-content';\n\n\t\tcomponent.addEventListener('change', (e: events.ChangeEvent) => {\n\t\t\tthis.close();\n\t\t\tactions.dispatchActionEvent(this, 'toolbar', {type: 'select', key: this.item.id, value: e.value});\n\t\t});\n\n\t\treturn component;\n\t}\n\n\tasync open() {\n\t\tconst component = await this.getComponent();\n\t\tif (component.parentElement != this.dropdown) {\n\t\t\tdom.empty(this.dropdown);\n\t\t\tthis.dropdown.appendChild(component);\n\t\t}\n\t\tawait super.open();\n\t}\n\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toolbarDropdown.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/toolbarDropdown.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"toolbarDropdown.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/toolbarDropdown.ts"],"names":[],"mappings":"AACA,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,4BASV;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"}
|
|
@@ -5,7 +5,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
7
|
import { dom } from '@omegagrid/core';
|
|
8
|
-
import constants from '../../constants';
|
|
9
8
|
import { LitElement, html, css } from 'lit';
|
|
10
9
|
import { customElement, property, query } from 'lit/decorators.js';
|
|
11
10
|
import { SelectMode } from '@omegagrid/tree';
|
|
@@ -55,7 +54,6 @@ ToolbarDropdown.styles = [css `
|
|
|
55
54
|
:host {
|
|
56
55
|
display: flex;
|
|
57
56
|
flex-direction: row;
|
|
58
|
-
height: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;
|
|
59
57
|
}
|
|
60
58
|
|
|
61
59
|
og-tree-dropdown {
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,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;;QAmCN,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;;AAhDM,sBAAM,GAAG,CAAC,GAAG,CAAA;;;;;;;;;EASnB,CAAC,AATW,CASV;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;AApBF,eAAe;IAD3B,aAAa,CAAC,qBAAqB,CAAC;GACxB,eAAe,CAgE3B","sourcesContent":["import { dom } from '@omegagrid/core';\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}\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\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}\n"]}
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,4BAuBV;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"}
|
|
@@ -23,7 +23,7 @@ let ToolbarDropdownButton = class ToolbarDropdownButton extends LitElement {
|
|
|
23
23
|
.item="${this.isGridDropdown ? this.currentItem : this.item}">
|
|
24
24
|
</og-toolbar-button>
|
|
25
25
|
` : null}
|
|
26
|
-
|
|
26
|
+
|
|
27
27
|
<og-dropdown ${ref(this.dropdownRef)}
|
|
28
28
|
@dropdown.open="${() => this.adjustWidth()}"
|
|
29
29
|
?disabled="${!!this.item.disabled}"
|
|
@@ -118,7 +118,7 @@ ToolbarDropdownButton.styles = [css `
|
|
|
118
118
|
:host {
|
|
119
119
|
display: flex;
|
|
120
120
|
flex-direction: row;
|
|
121
|
-
|
|
121
|
+
height: 100%;
|
|
122
122
|
}
|
|
123
123
|
|
|
124
124
|
og-toolbar-button {
|
|
@@ -126,6 +126,7 @@ ToolbarDropdownButton.styles = [css `
|
|
|
126
126
|
border-top-right-radius: 0;
|
|
127
127
|
border-bottom-right-radius: 0;
|
|
128
128
|
min-width: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;
|
|
129
|
+
height: 100%;
|
|
129
130
|
}
|
|
130
131
|
|
|
131
132
|
og-toolbar-button+og-dropdown {
|
|
@@ -1 +1 @@
|
|
|
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
|
+
{"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\theight: 100%;\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\theight: 100%;\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\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\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\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\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}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toolbarDropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/toolbarDropdownMenu.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAuB,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"toolbarDropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/toolbarDropdownMenu.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAuB,MAAM,iBAAiB,CAAC;AAG9F,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,qBACa,mBAAoB,SAAQ,YAAY;IAEpD,MAAM,CAAC,MAAM,4BAKV;IAGH,IAAI,EAAE,WAAW,CAAC;IAGlB,KAAK,EAAE,MAAM,CAAC;IAEd,UAAU,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;;CA0BtC"}
|
|
@@ -5,7 +5,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
7
|
import { actions, ColorTypes, dom, DropdownMenu } from '@omegagrid/core';
|
|
8
|
-
import constants from '../../constants';
|
|
9
8
|
import { css } from 'lit';
|
|
10
9
|
import { customElement, property } from 'lit/decorators.js';
|
|
11
10
|
let ToolbarDropdownMenu = class ToolbarDropdownMenu extends DropdownMenu {
|
|
@@ -39,7 +38,6 @@ ToolbarDropdownMenu.styles = [...DropdownMenu.styles, css `
|
|
|
39
38
|
:host {
|
|
40
39
|
display: flex;
|
|
41
40
|
flex-direction: row;
|
|
42
|
-
height: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;
|
|
43
41
|
}
|
|
44
42
|
`];
|
|
45
43
|
__decorate([
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAIrD,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,YAAY;IAepD,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;;AArCM,0BAAM,GAAG,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,GAAG,CAAA;;;;;EAK3C,CAAC,AALW,CAKV;AAGH;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;iDACP;AAGlB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;kDACX;AAbF,mBAAmB;IAD/B,aAAa,CAAC,yBAAyB,CAAC;GAC5B,mBAAmB,CAyC/B","sourcesContent":["import { actions, ColorTypes, dom, DropdownMenu, MenuEvent, MenuItem } from '@omegagrid/core';\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}\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}\n"]}
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
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;AAClF,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAK1C,qBAEa,WAAY,SAAQ,UAAU;IAE1C,MAAM,CAAC,MAAM,4BAyBV;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"}
|
|
@@ -5,7 +5,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
7
|
import { dom, colorable } from '@omegagrid/core';
|
|
8
|
-
import constants from '../../constants';
|
|
9
8
|
import { LitElement, html, css } from 'lit';
|
|
10
9
|
import { customElement, property, query } from 'lit/decorators.js';
|
|
11
10
|
import { actions } from '@omegagrid/core';
|
|
@@ -76,7 +75,6 @@ ToolbarText.styles = [css `
|
|
|
76
75
|
:host {
|
|
77
76
|
display: flex;
|
|
78
77
|
flex-direction: row;
|
|
79
|
-
height: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;
|
|
80
78
|
}
|
|
81
79
|
|
|
82
80
|
input {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toolbarText.js","sourceRoot":"","sources":["../../../src/ui/controls/toolbarText.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAmC,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAClF,OAAO,
|
|
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 { 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}\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}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toolbar.style.d.ts","sourceRoot":"","sources":["../../src/ui/toolbar.style.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,KAAK,
|
|
1
|
+
{"version":3,"file":"toolbar.style.d.ts","sourceRoot":"","sources":["../../src/ui/toolbar.style.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,KAAK,yBAyDjB,CAAC"}
|
package/dist/ui/toolbar.style.js
CHANGED
|
@@ -7,10 +7,9 @@ export const style = css `
|
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
:host {
|
|
10
|
-
display: block;
|
|
11
10
|
height: ${constants.TOOLBAR_HEIGHT}px;
|
|
12
11
|
background-color: var(--og-background-color-2);
|
|
13
|
-
display:
|
|
12
|
+
display: block;
|
|
14
13
|
font-size: var(--og-font-size);
|
|
15
14
|
font-family: var(--og-font-family);
|
|
16
15
|
}
|
|
@@ -21,16 +20,19 @@ export const style = css `
|
|
|
21
20
|
flex: 0;
|
|
22
21
|
display: flex;
|
|
23
22
|
flex-direction: row;
|
|
24
|
-
align-items:
|
|
23
|
+
align-items: stretch;
|
|
25
24
|
gap: ${gap}px;
|
|
26
|
-
padding
|
|
27
|
-
padding-right: ${gap}px;
|
|
25
|
+
padding: ${gap}px;
|
|
28
26
|
}
|
|
29
27
|
|
|
30
|
-
.inner
|
|
28
|
+
.inner > * {
|
|
31
29
|
flex: 0;
|
|
32
30
|
}
|
|
33
31
|
|
|
32
|
+
.inner > * > * {
|
|
33
|
+
height: 100%;
|
|
34
|
+
}
|
|
35
|
+
|
|
34
36
|
.empty {
|
|
35
37
|
flex: 1;
|
|
36
38
|
}
|
|
@@ -39,23 +41,17 @@ export const style = css `
|
|
|
39
41
|
box-sizing: border-box;
|
|
40
42
|
display: block;
|
|
41
43
|
width: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;
|
|
42
|
-
height: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;
|
|
43
|
-
max-height: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;
|
|
44
|
-
line-height: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;
|
|
45
44
|
min-width: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;
|
|
46
45
|
padding: 0;
|
|
47
46
|
}
|
|
48
47
|
|
|
49
48
|
og-toolbar-dropdownbutton, og-toolbar-colorpicker {
|
|
49
|
+
height: 100%;0
|
|
50
50
|
min-width: ${constants.TOOLBAR_COMPONENT_SIZE_BASE + 14}px;
|
|
51
|
-
height: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;
|
|
52
|
-
max-height: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;
|
|
53
51
|
}
|
|
54
52
|
|
|
55
53
|
og-dropdown {
|
|
56
54
|
min-width: 100px;
|
|
57
|
-
height: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;
|
|
58
|
-
max-height: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;
|
|
59
55
|
}
|
|
60
56
|
|
|
61
57
|
label {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toolbar.style.js","sourceRoot":"","sources":["../../src/ui/toolbar.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,SAAS,MAAM,cAAc,CAAC;AAErC,MAAM,GAAG,GAAG,CAAC,SAAS,CAAC,cAAc,GAAG,SAAS,CAAC,2BAA2B,CAAC,GAAG,CAAC,CAAC;AAEnF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"toolbar.style.js","sourceRoot":"","sources":["../../src/ui/toolbar.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,SAAS,MAAM,cAAc,CAAC;AAErC,MAAM,GAAG,GAAG,CAAC,SAAS,CAAC,cAAc,GAAG,SAAS,CAAC,2BAA2B,CAAC,GAAG,CAAC,CAAC;AAEnF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;YAMZ,SAAS,CAAC,cAAc;;;;;;;;;;;;;;SAc3B,GAAG;aACC,GAAG;;;;;;;;;;;;;;;;;;WAkBL,SAAS,CAAC,2BAA2B;eACjC,SAAS,CAAC,2BAA2B;;;;;;eAMrC,SAAS,CAAC,2BAA2B,GAAG,EAAE;;;;;;;;;;;CAWxD,CAAC","sourcesContent":["import { css } from 'lit';\nimport constants from '../constants';\n\nconst gap = (constants.TOOLBAR_HEIGHT - constants.TOOLBAR_COMPONENT_SIZE_BASE) / 2;\n\nexport const style = css`\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\n\t:host {\n\t\theight: ${constants.TOOLBAR_HEIGHT}px;\n\t\tbackground-color: var(--og-background-color-2);\n\t\tdisplay: block;\n\t\tfont-size: var(--og-font-size);\n\t\tfont-family: var(--og-font-family);\n\t}\n\n\t.inner {\n\t\theight: 100%;\n\t\tposition: relative;\n\t\tflex: 0;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: stretch;\n\t\tgap: ${gap}px;\n\t\tpadding: ${gap}px;\n\t}\n\n\t.inner > * {\n\t\tflex: 0;\n\t}\n\n\t.inner > * > * {\n\t\theight: 100%;\n\t}\n\n\t.empty {\n\t\tflex: 1;\n\t}\n\n\tog-button {\n\t\tbox-sizing: border-box;\n\t\tdisplay: block;\n\t\twidth: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;\n\t\tmin-width: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;\n\t\tpadding: 0;\n\t}\n\n\tog-toolbar-dropdownbutton, og-toolbar-colorpicker {\n\t\theight: 100%;0\n\t\tmin-width: ${constants.TOOLBAR_COMPONENT_SIZE_BASE + 14}px;\n\t}\n\n\tog-dropdown {\n\t\tmin-width: 100px;\n\t}\n\n\tlabel {\n\t\twhite-space: nowrap;\n\t}\n\n`;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@omegagrid/toolbar",
|
|
3
|
-
"version": "0.10.
|
|
3
|
+
"version": "0.10.27",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"description": "Toolbar component",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -27,9 +27,9 @@
|
|
|
27
27
|
"_prepublish": "yarn test && yarn lint"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@omegagrid/core": "^0.10.
|
|
31
|
-
"@omegagrid/localize": "^0.10.
|
|
32
|
-
"@omegagrid/tree": "^0.10.
|
|
30
|
+
"@omegagrid/core": "^0.10.27",
|
|
31
|
+
"@omegagrid/localize": "^0.10.27",
|
|
32
|
+
"@omegagrid/tree": "^0.10.27",
|
|
33
33
|
"lit": "^3.1.1",
|
|
34
34
|
"lit-html": "^3.1.1",
|
|
35
35
|
"ts-debounce": "^4.0.0"
|