@omegagrid/toolbar 0.10.100 → 0.10.102
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/toolbar.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../src/ui/toolbar.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../src/ui/toolbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,MAAM,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAChE,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAGvC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAOvC,qBACa,OAAQ,SAAQ,UAAW,YAAW,MAAM;IAExD,MAAM,CAAC,MAAM,4BAAW;IAGxB,KAAK,EAAE,WAAW,EAAE,CAAC;IAGrB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAM;IAErC,QAAQ,CAAC,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAAa;IAExD,UAAU,iDAAwB;IAClC,IAAI,OAAO,YAAmC;IAE9C,eAAe,EAAE,MAAM,CAAC;;IAaxB,MAAM;IAIN,iBAAiB,GAAI,GAAG,UAAU,UASjC;IAED,iBAAiB,aAGhB;IAED,oBAAoB;IASpB,OAAO;IAOP,MAAM,6CAeJ;CAEF"}
|
package/dist/ui/toolbar.js
CHANGED
|
@@ -4,6 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
4
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
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
|
+
import { dom } from '@omegagrid/core';
|
|
7
8
|
import { LitElement, html } from 'lit';
|
|
8
9
|
import { customElement, property } from 'lit/decorators.js';
|
|
9
10
|
import { map } from 'lit/directives/map.js';
|
|
@@ -50,6 +51,7 @@ let Toolbar = class Toolbar extends LitElement {
|
|
|
50
51
|
</div>
|
|
51
52
|
<div class="empty"></div>
|
|
52
53
|
`;
|
|
54
|
+
dom.wheelScrollHorizontally(this);
|
|
53
55
|
this.addEventListener('toolbar.action', (e) => {
|
|
54
56
|
if (e.action.type == 'change') {
|
|
55
57
|
this.values = this.values || {};
|
package/dist/ui/toolbar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toolbar.js","sourceRoot":"","sources":["../../src/ui/toolbar.ts"],"names":[],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"toolbar.js","sourceRoot":"","sources":["../../src/ui/toolbar.ts"],"names":[],"mappings":"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","sourcesContent":["import { actions, dom, Layout, Tooltip } from '@omegagrid/core';\nimport { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { map } from 'lit/directives/map.js';\nimport { ToolbarItem } from '../types';\nimport { renderers } from './controls/renderers';\nimport { style } from './toolbar.style';\nimport { ref, createRef } from \"lit/directives/ref.js\";\nimport constants from '../constants';\nimport { msg } from '@omegagrid/localize';\n\n@customElement('og-toolbar')\nexport class Toolbar extends LitElement implements Layout {\n\n\tstatic styles = [style];\n\n\t@property({type: Array})\n\titems: ToolbarItem[];\n\n\t@property({type: Object})\n\tvalues: Record<string, unknown> = {};\n\n\treadonly controls: Map<string, HTMLElement> = new Map();\n\n\ttooltipRef = createRef<Tooltip>();\n\tget tooltip() { return this.tooltipRef.value }\n\n\t_tooltipTimeout: number;\n\n\tconstructor() {\n\t\tsuper();\n\t\tdom.wheelScrollHorizontally(this);\n\t\tthis.addEventListener('toolbar.action', (e: actions.ActionEvent) => {\n\t\t\tif (e.action.type == 'change') {\n\t\t\t\tthis.values = this.values || {};\n\t\t\t\tthis.values[e.action.key] = e.action.value;\n\t\t\t}\n\t\t});\n\t}\n\n\tlayout() {\n\t\t//empty\n\t}\n\n\t_onItemMouseEnter = (e: MouseEvent) => {\n\t\tconst target = e.target as HTMLElement;\n\t\tif (target.dataset.tooltip) {\n\t\t\tthis.tooltip.content = target.dataset.tooltip;\n\t\t\tthis._tooltipTimeout = window.setTimeout(() => {\n\t\t\t\tif (this.tooltip.parentElement != document.body) document.body.appendChild(this.tooltip);\n\t\t\t\tthis.tooltip.attachTo(target, 'bottom');\n\t\t\t}, constants.TOOLBAR_TOOLTIP_DELAY);\n\t\t}\n\t}\n\n\t_onItemMouseLeave = () => {\n\t\tthis.tooltip.hide();\n\t\twindow.clearTimeout(this._tooltipTimeout);\n\t}\n\n\tdisconnectedCallback() {\n\t\twindow.clearTimeout(this._tooltipTimeout);\n\t\tif (this.tooltip && this.tooltip.parentElement == document.body) {\n\t\t\tthis.tooltip.deatach();\n\t\t\tthis.shadowRoot.querySelector('.inner').appendChild(this.tooltip);\n\t\t}\n\t\tsuper.disconnectedCallback();\n\t}\n\n\tupdated() {\n\t\tthis.controls.clear();\n\t\tthis.shadowRoot.querySelectorAll('.control').forEach((control: HTMLElement) =>\n\t\t\tthis.controls.set(control.dataset.id, control)\n\t\t);\n\t}\n\n\trender = () => html`\n\t\t<div class=\"inner\">\n\t\t\t${map(this.items, item => html`\n\t\t\t\t<div\n\t\t\t\t\tclass=\"item\"\n\t\t\t\t\tdata-tooltip=\"${msg(item.title)}\"\n\t\t\t\t\t@mouseenter=\"${this._onItemMouseEnter}\"\n\t\t\t\t\t@mouseleave=\"${this._onItemMouseLeave}\">\n\t\t\t\t\t${renderers.get(item.type)(item, (this.values ? this.values[item.id] : undefined) ?? item.value)}\n\t\t\t\t</div>\n\t\t\t`)}\n\n\t\t\t<og-tooltip id=\"tooltip\" style=\"display: none\" color=\"accent\" ${ref(this.tooltipRef)}></og-tooltip>\n\t\t</div>\n\t\t<div class=\"empty\"></div>\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,yBAmEjB,CAAC"}
|
package/dist/ui/toolbar.style.js
CHANGED
|
@@ -12,6 +12,14 @@ export const style = css `
|
|
|
12
12
|
display: block;
|
|
13
13
|
font-size: var(--og-font-size);
|
|
14
14
|
font-family: var(--og-font-family);
|
|
15
|
+
min-width: 0;
|
|
16
|
+
overflow-x: auto;
|
|
17
|
+
overflow-y: hidden;
|
|
18
|
+
scrollbar-width: none;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
:host::-webkit-scrollbar {
|
|
22
|
+
display: none;
|
|
15
23
|
}
|
|
16
24
|
|
|
17
25
|
.inner {
|
|
@@ -23,10 +31,12 @@ export const style = css `
|
|
|
23
31
|
align-items: stretch;
|
|
24
32
|
gap: ${gap}px;
|
|
25
33
|
padding: ${gap}px;
|
|
34
|
+
width: max-content;
|
|
35
|
+
min-width: 100%;
|
|
26
36
|
}
|
|
27
37
|
|
|
28
38
|
.inner > * {
|
|
29
|
-
flex: 0;
|
|
39
|
+
flex: 0 0 auto;
|
|
30
40
|
}
|
|
31
41
|
|
|
32
42
|
.inner > * > * {
|
|
@@ -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;;;;;;YAMZ,SAAS,CAAC,cAAc
|
|
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;;;;;;;;;;;;;;;;;;;;;;SAsB3B,GAAG;aACC,GAAG;;;;;;;;;;;;;;;;;;;;WAoBL,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\tmin-width: 0;\n\t\toverflow-x: auto;\n\t\toverflow-y: hidden;\n\t\tscrollbar-width: none;\n\t}\n\n\t:host::-webkit-scrollbar {\n\t\tdisplay: none;\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\twidth: max-content;\n\t\tmin-width: 100%;\n\t}\n\n\t.inner > * {\n\t\tflex: 0 0 auto;\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.102",
|
|
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.102",
|
|
31
|
+
"@omegagrid/localize": "^0.10.102",
|
|
32
|
+
"@omegagrid/tree": "^0.10.102",
|
|
33
33
|
"lit": "^3.1.1",
|
|
34
34
|
"lit-html": "^3.1.1",
|
|
35
35
|
"ts-debounce": "^4.0.0"
|