@omegagrid/core 0.7.14 → 0.8.1

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.
@@ -40,6 +40,7 @@ declare const _default: {
40
40
  MENU_ITEM_HEIGHT: number;
41
41
  COLORPICKER_COLOR_SIZE: number;
42
42
  DEFAULT_NUMBER_FORMAT: string;
43
+ BUTTON_HEIGHT: number;
43
44
  FONT_SIZE: number;
44
45
  };
45
46
  export default _default;
@@ -1 +1 @@
1
- {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAI1B,wBAkBC"}
1
+ {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAI1B,wBAmBC"}
package/dist/constants.js CHANGED
@@ -17,6 +17,7 @@ export default {
17
17
  MENU_ITEM_HEIGHT: 25,
18
18
  COLORPICKER_COLOR_SIZE: 16,
19
19
  DEFAULT_NUMBER_FORMAT: '#,0.#####',
20
+ BUTTON_HEIGHT: 22,
20
21
  FONT_SIZE: 12,
21
22
  };
22
23
  //# sourceMappingURL=constants.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,oBAAoB,GAAG,SAAS,CAAC;AAEvC,eAAe;IACd,MAAM,EAAE,IAAI;IACZ,oBAAoB,EAAE,oBAAoB;IAC1C,sBAAsB,EAAE,KAAK,CAAC,oBAAoB,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC;IAC/D,UAAU,EAAE,CAAC;IACb,WAAW,EAAE,EAAE;IACf,iBAAiB,EAAE,EAAE;IACrB,aAAa,EAAE,EAAE;IACjB,gBAAgB,EAAE,EAAE;IACpB,uBAAuB,EAAE,EAAE;IAC3B,wBAAwB,EAAE,EAAE;IAC5B,qBAAqB,EAAE,GAAG;IAC1B,4BAA4B,EAAE,gCAAgC;IAC9D,cAAc,EAAE,CAAC;IACjB,gBAAgB,EAAE,EAAE;IACpB,sBAAsB,EAAE,EAAE;IAC1B,qBAAqB,EAAE,WAAW;IAClC,SAAS,EAAE,EAAE;CACb,CAAA","sourcesContent":["import Color from 'color';\n\nconst DEFAULT_ACCENT_COLOR = '#00955d';\n\nexport default {\n\tPREFIX: 'og',\n\tDEFAULT_ACCENT_COLOR: DEFAULT_ACCENT_COLOR,\n\tDEFAULT_ACCENT_COLOR_2: Color(DEFAULT_ACCENT_COLOR).darken(0.6),\n\tSIZER_SIZE: 5,\n\tSLIDER_SIZE: 12,\n\tSLIDER_MIN_LENGTH: 30,\n\tEXPANDER_SIZE: 13,\n\tLIST_ITEM_HEIGHT: 22,\n\tLIST_RENDERING_TRESHOLD: 30,\n\tLIST_AUTOSCROLL_TRESHOLD: 30,\n\tLIST_AUTOSCROLL_DELAY: 100,\n\tDEFAULT_TEXT_HIGHLIGHT_COLOR: 'var(--og-text-highlight-color)',\n\tTOOLTIP_MARGIN: 8,\n\tMENU_ITEM_HEIGHT: 25,\n\tCOLORPICKER_COLOR_SIZE: 16,\n\tDEFAULT_NUMBER_FORMAT: '#,0.#####',\n\tFONT_SIZE: 12,\n}"]}
1
+ {"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,oBAAoB,GAAG,SAAS,CAAC;AAEvC,eAAe;IACd,MAAM,EAAE,IAAI;IACZ,oBAAoB,EAAE,oBAAoB;IAC1C,sBAAsB,EAAE,KAAK,CAAC,oBAAoB,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC;IAC/D,UAAU,EAAE,CAAC;IACb,WAAW,EAAE,EAAE;IACf,iBAAiB,EAAE,EAAE;IACrB,aAAa,EAAE,EAAE;IACjB,gBAAgB,EAAE,EAAE;IACpB,uBAAuB,EAAE,EAAE;IAC3B,wBAAwB,EAAE,EAAE;IAC5B,qBAAqB,EAAE,GAAG;IAC1B,4BAA4B,EAAE,gCAAgC;IAC9D,cAAc,EAAE,CAAC;IACjB,gBAAgB,EAAE,EAAE;IACpB,sBAAsB,EAAE,EAAE;IAC1B,qBAAqB,EAAE,WAAW;IAClC,aAAa,EAAE,EAAE;IACjB,SAAS,EAAE,EAAE;CACb,CAAA","sourcesContent":["import Color from 'color';\n\nconst DEFAULT_ACCENT_COLOR = '#00955d';\n\nexport default {\n\tPREFIX: 'og',\n\tDEFAULT_ACCENT_COLOR: DEFAULT_ACCENT_COLOR,\n\tDEFAULT_ACCENT_COLOR_2: Color(DEFAULT_ACCENT_COLOR).darken(0.6),\n\tSIZER_SIZE: 5,\n\tSLIDER_SIZE: 12,\n\tSLIDER_MIN_LENGTH: 30,\n\tEXPANDER_SIZE: 13,\n\tLIST_ITEM_HEIGHT: 22,\n\tLIST_RENDERING_TRESHOLD: 30,\n\tLIST_AUTOSCROLL_TRESHOLD: 30,\n\tLIST_AUTOSCROLL_DELAY: 100,\n\tDEFAULT_TEXT_HIGHLIGHT_COLOR: 'var(--og-text-highlight-color)',\n\tTOOLTIP_MARGIN: 8,\n\tMENU_ITEM_HEIGHT: 25,\n\tCOLORPICKER_COLOR_SIZE: 16,\n\tDEFAULT_NUMBER_FORMAT: '#,0.#####',\n\tBUTTON_HEIGHT: 22,\n\tFONT_SIZE: 12,\n}"]}
@@ -1 +1 @@
1
- {"version":3,"file":"button.style.d.ts","sourceRoot":"","sources":["../../src/ui/button.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,yBAmEjB,CAAC"}
1
+ {"version":3,"file":"button.style.d.ts","sourceRoot":"","sources":["../../src/ui/button.style.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,yBAwDjB,CAAC"}
@@ -1,16 +1,14 @@
1
1
  import { css } from 'lit';
2
+ import constants from '../constants';
2
3
  export const style = css `
3
- * {
4
- box-sizing: border-box;
5
- }
6
-
7
4
  :host {
5
+ box-sizing: border-box;
8
6
  font-size: var(--og-font-size);
9
7
  cursor: pointer;
10
8
  display: inline-block;
11
9
  vertical-align: middle;
12
10
  overflow: hidden;
13
- padding: 2px;
11
+ height: ${constants.BUTTON_HEIGHT}px;
14
12
  outline: none;
15
13
  user-select: none;
16
14
  border-radius: var(--og-base-radius);
@@ -43,6 +41,7 @@ export const style = css `
43
41
  flex-direction: row;
44
42
  align-items: center;
45
43
  justify-content: center;
44
+ width: 100%;
46
45
  height: 100%;
47
46
  }
48
47
 
@@ -50,21 +49,12 @@ export const style = css `
50
49
  flex: 1 0;
51
50
  white-space: nowrap;
52
51
  overflow: hidden;
53
- text-overflow: ellipsis;
52
+ padding: 0 4px;
54
53
  }
55
54
 
56
55
  .has-content og-icon {
57
- margin: 0 4px;
56
+ margin-left: 2px;
58
57
  }
59
58
 
60
- og-icon {
61
- flex: 0;
62
- }
63
-
64
- og-icon+.content {
65
- margin-left: 4px;
66
- margin-right: 4px;
67
- }
68
-
69
59
  `;
70
60
  //# sourceMappingURL=button.style.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"button.style.js","sourceRoot":"","sources":["../../src/ui/button.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmEvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\n\t:host {\n\t\tfont-size: var(--og-font-size);\n\t\tcursor: pointer;\n\t\tdisplay: inline-block;\n\t\tvertical-align: middle;\n\t\toverflow: hidden;\n\t\tpadding: 2px;\n\t\toutline: none;\n\t\tuser-select: none;\n\t\tborder-radius: var(--og-base-radius);\n\t}\n\n\t:host([default]) {\n\t\tfont-weight: bold;\n\t\ttext-decoration: underline;\n\t}\n\n\t:host([state=unchecked]) {\n\t\tborder-color: var(--og-background-color);\n\t\tbackground-color: var(--og-background-color);\n\t\tcolor: var(--og-text-color);\n\t}\n\n\t:host([disabled]), :host([disabled]:hover) {\n\t\tbackground-color: gray;\n\t\tborder-color: var(--og-border-color);\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n\n\t:host(:hover) {\n\t\topacity: 0.8;\n\t}\n\n\tdiv.inner {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\theight: 100%;\n\t}\n\n\tdiv.content {\n\t\tflex: 1 0;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\n\t.has-content og-icon {\n\t\tmargin: 0 4px;\n\t}\n\n\tog-icon {\n\t\tflex: 0;\n\t}\n\n\tog-icon+.content {\n\t\tmargin-left: 4px;\n\t\tmargin-right: 4px;\n\t}\n\t\n`;"]}
1
+ {"version":3,"file":"button.style.js","sourceRoot":"","sources":["../../src/ui/button.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,SAAS,MAAM,cAAc,CAAC;AAErC,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;YAQZ,SAAS,CAAC,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDlC,CAAC","sourcesContent":["import { css } from 'lit';\nimport constants from '../constants';\n\nexport const style = css`\n\t:host {\n\t\tbox-sizing: border-box;\n\t\tfont-size: var(--og-font-size);\n\t\tcursor: pointer;\n\t\tdisplay: inline-block;\n\t\tvertical-align: middle;\n\t\toverflow: hidden;\n\t\theight: ${constants.BUTTON_HEIGHT}px;\n\t\toutline: none;\n\t\tuser-select: none;\n\t\tborder-radius: var(--og-base-radius);\n\t}\n\n\t:host([default]) {\n\t\tfont-weight: bold;\n\t\ttext-decoration: underline;\n\t}\n\n\t:host([state=unchecked]) {\n\t\tborder-color: var(--og-background-color);\n\t\tbackground-color: var(--og-background-color);\n\t\tcolor: var(--og-text-color);\n\t}\n\n\t:host([disabled]), :host([disabled]:hover) {\n\t\tbackground-color: gray;\n\t\tborder-color: var(--og-border-color);\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n\n\t:host(:hover) {\n\t\topacity: 0.8;\n\t}\n\n\tdiv.inner {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\tdiv.content {\n\t\tflex: 1 0;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\tpadding: 0 4px;\n\t}\n\n\t.has-content og-icon {\n\t\tmargin-left: 2px;\n\t}\n\n`;"]}
@@ -6,6 +6,7 @@ export declare class Container extends OmegaComponent {
6
6
  componentId: ComponentId;
7
7
  createComponent: ComponentFactory;
8
8
  overscroll: boolean;
9
+ sliderSize: number;
9
10
  scrollbarPadding: boolean;
10
11
  inner: HTMLDivElement;
11
12
  private verticalSliderRef;
@@ -1 +1 @@
1
- {"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../src/ui/container.ts"],"names":[],"mappings":"AAGA,OAAO,EAAc,MAAM,EAAE,MAAM,UAAU,CAAC;AAE9C,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAGzD,qBACa,SAAU,SAAQ,cAAc;IAE5C,MAAM,CAAC,MAAM,0BAiCX;IAGF,WAAW,EAAE,WAAW,CAAC;IAGzB,eAAe,EAAE,gBAAgB,CAAC;IAGlC,UAAU,UAAS;IAGnB,gBAAgB,UAAS;IAGzB,KAAK,EAAE,cAAc,CAAC;IAEtB,OAAO,CAAC,iBAAiB,CAA4B;IACrD,IAAI,cAAc,WAA0C;IAE5D,OAAO,CAAC,mBAAmB,CAA4B;IACvD,IAAI,gBAAgB,WAA4C;IAEhE,OAAO,CAAC,cAAc,CAAiB;IACvC,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,QAAQ,CAAS;IAEzB,IAAI,WAAW,YAA6F;IAE5G,iBAAiB;IAQjB,iBAAiB;IAKjB,oBAAoB;IAKpB,gBAAgB;IAUhB,mBAAmB;IAKnB,sBAAsB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO;IAc/C,gBAAgB,CAAC,GAAG,EAAE,MAAM;IAS5B,wBAAwB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO;IAQjD,kBAAkB,CAAC,IAAI,EAAE,MAAM;IAO/B,YAAY;IA2DN,OAAO;IAOb,MAAM,6CAWJ;IAEF,IAAI,YAAY,WAEf;IAED,IAAI,WAAW,WAEd;IAED,aAAa;CAoCb"}
1
+ {"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../src/ui/container.ts"],"names":[],"mappings":"AAGA,OAAO,EAAc,MAAM,EAAE,MAAM,UAAU,CAAC;AAE9C,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAIzD,qBACa,SAAU,SAAQ,cAAc;IAE5C,MAAM,CAAC,MAAM,0BAoCX;IAGF,WAAW,EAAE,WAAW,CAAC;IAGzB,eAAe,EAAE,gBAAgB,CAAC;IAGlC,UAAU,UAAS;IAGnB,UAAU,SAAK;IAGf,gBAAgB,UAAS;IAGzB,KAAK,EAAE,cAAc,CAAC;IAEtB,OAAO,CAAC,iBAAiB,CAA4B;IACrD,IAAI,cAAc,WAA0C;IAE5D,OAAO,CAAC,mBAAmB,CAA4B;IACvD,IAAI,gBAAgB,WAA4C;IAEhE,OAAO,CAAC,cAAc,CAAiB;IACvC,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,QAAQ,CAAS;IAEzB,IAAI,WAAW,YAA6F;IAE5G,iBAAiB;IAQjB,iBAAiB;IAKjB,oBAAoB;IAKpB,gBAAgB;IAUhB,mBAAmB;IAKnB,sBAAsB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO;IAc/C,gBAAgB,CAAC,GAAG,EAAE,MAAM;IAS5B,wBAAwB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO;IAQjD,kBAAkB,CAAC,IAAI,EAAE,MAAM;IAO/B,YAAY;IA2DN,OAAO;IAOb,MAAM,6CAoBJ;IAEF,IAAI,YAAY,WAEf;IAED,IAAI,WAAW,WAEd;IAED,aAAa;CAoCb"}
@@ -11,10 +11,12 @@ import { SlideEvent } from "./slider";
11
11
  import { createRef, ref } from "lit/directives/ref.js";
12
12
  import { OmegaComponent } from "../model";
13
13
  import constants from "../constants";
14
+ import { styleMap } from "lit-html/directives/style-map.js";
14
15
  let Container = class Container extends OmegaComponent {
15
16
  constructor() {
16
17
  super(...arguments);
17
18
  this.overscroll = false;
19
+ this.sliderSize = 0;
18
20
  this.scrollbarPadding = false;
19
21
  this.verticalSliderRef = createRef();
20
22
  this.horizontalSliderRef = createRef();
@@ -28,8 +30,17 @@ let Container = class Container extends OmegaComponent {
28
30
  </div>
29
31
  `}
30
32
 
31
- <og-slider direction="vertical" ${ref(this.verticalSliderRef)} hidden></og-slider>
32
- <og-slider direction="horizontal" ${ref(this.horizontalSliderRef)} hidden></og-slider>
33
+ <og-slider ${ref(this.verticalSliderRef)}
34
+ style="${styleMap(this.sliderSize > 0 ? { width: `${this.sliderSize}px` } : {})}"
35
+ direction="vertical"
36
+ hidden>
37
+ </og-slider>
38
+
39
+ <og-slider ${ref(this.horizontalSliderRef)}
40
+ style="${styleMap(this.sliderSize > 0 ? { height: `${this.sliderSize}px` } : {})}"
41
+ direction="horizontal"
42
+ hidden>
43
+ </og-slider>
33
44
  `;
34
45
  }
35
46
  get verticalSlider() { return this.verticalSliderRef.value; }
@@ -223,7 +234,10 @@ Container.styles = css `
223
234
  }
224
235
 
225
236
  .inner {
226
- width: 100%;
237
+ min-width: 100%;
238
+ position: absolute;
239
+ top: 0;
240
+ left: 0;
227
241
  }
228
242
 
229
243
  :host([scrollbarPadding]) .inner {
@@ -243,6 +257,9 @@ __decorate([
243
257
  __decorate([
244
258
  property({ type: Boolean })
245
259
  ], Container.prototype, "overscroll", void 0);
260
+ __decorate([
261
+ property({ type: Number })
262
+ ], Container.prototype, "sliderSize", void 0);
246
263
  __decorate([
247
264
  property({ type: Boolean, reflect: true })
248
265
  ], Container.prototype, "scrollbarPadding", void 0);
@@ -1 +1 @@
1
- {"version":3,"file":"container.js","sourceRoot":"","sources":["../../src/ui/container.ts"],"names":[],"mappings":"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","sourcesContent":["import * as dom from \"../common/dom\";\nimport { html, css } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { SlideEvent, Slider } from \"./slider\";\nimport { createRef, Ref, ref } from \"lit/directives/ref.js\";\nimport { OmegaComponent } from \"../model\";\nimport { ComponentFactory, ComponentId } from \"../types\";\nimport constants from \"../constants\";\n\n@customElement('og-container')\nexport class Container extends OmegaComponent {\n\n\tstatic styles = css`\n\t\t* {\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\t:host {\n\t\t\tposition: relative;\n\t\t\tdisplay: block;\n\t\t\toverflow: hidden;\n\t\t\tbox-shadow: inset 0px 4px 3px -2px var(--og-inset-shadow-color);\n\t\t}\n\n\t\t:host(.scroll-top-0) {\n\t\t\tbox-shadow: none;\n\t\t}\n\n\t\tog-slider[direction=\"vertical\"] {\n\t\t\tright: 0;\n\t\t\ttop: 0;\n\t\t\tbottom: 0;\n\t\t}\n\n\t\t.inner {\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t:host([scrollbarPadding]) .inner {\n\t\t\tright: ${constants.SLIDER_SIZE}px;\n\t\t}\n\n\t\t:host([scrollbarPadding]) {\t\n\t\t\tpadding-right: ${constants.SLIDER_SIZE}px;\n\t\t}\n\t`;\n\n\t@property({type: String})\n\tcomponentId: ComponentId;\n\n\t@property({type: Object})\n\tcreateComponent: ComponentFactory;\n\n\t@property({type: Boolean})\n\toverscroll = false;\n\n\t@property({type: Boolean, reflect: true})\n\tscrollbarPadding = false;\n\n\t@query('.inner')\n\tinner: HTMLDivElement;\n\n\tprivate verticalSliderRef: Ref<Slider> = createRef();\n\tget verticalSlider() { return this.verticalSliderRef.value }\n\t\n\tprivate horizontalSliderRef: Ref<Slider> = createRef();\n\tget horizontalSlider() { return this.horizontalSliderRef.value }\n\n\tprivate resizeObserver: ResizeObserver;\n\tprivate touchStart: Touch;\n\tprivate _mouseIn = false;\n\t\n\tget isScrolling() { return this.verticalSliderRef.value.sliding || this.horizontalSliderRef.value.sliding; }\n\n\tfixScrollPosition() {\n\t\tif (this.inner.offsetTop < 0) {\n\t\t\tif (this.clientHeight - this.inner.offsetHeight - this.inner.offsetTop > 0) {\n\t\t\t\tthis.scrollVerticalTo(Math.max(0, this.inner.offsetHeight - this.clientHeight));\n\t\t\t}\n\t\t}\n\t}\n\t\n\tconnectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis.connectObservers();\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback();\n\t\tthis.disconnectObservers();\n\t}\n\n\tconnectObservers() {\n\t\tthis.resizeObserver = this.resizeObserver ?? new ResizeObserver(() => {\n\t\t\tthis.updateSliders();\n\t\t\tthis.fixScrollPosition();\n\t\t});\n\n\t\tthis.resizeObserver.observe(this);\n\t\tif (this.inner)\tthis.resizeObserver.observe(this.inner);\n\t}\n\n\tdisconnectObservers() {\n\t\tthis.resizeObserver.disconnect();\n\t\tthis.resizeObserver = null;\n\t}\n\n\tscrollVerticalByPixels(deltaY: number): boolean {\n\t\tif (this.inner.offsetHeight <= this.clientHeight) return false;\n\t\tconst top = this.scrollHeight > 0\n\t\t\t? (Math.max(-this.verticalSlider.maxValue, Math.min(0, this.inner.offsetTop - deltaY)) ?? 0)\n\t\t\t: 0;\n\n\t\tif (this.inner.offsetTop === top) return false;\n\t\tdom.setPosition(this.inner, {t: top});\n\t\tthis.verticalSlider.value = -top;\n\t\tthis.classList.toggle('scroll-top-0', top === 0);\n\t\tthis.dispatchEvent(new SlideEvent('verticalscroll', -top));\n\t\treturn true;\n\t}\n\n\tscrollVerticalTo(top: number) {\n\t\tif (this.inner) {\n\t\t\ttop = Math.min(this.verticalSlider?.maxValue || 0, Math.max(0, top));\n\t\t\tdom.setPosition(this.inner, {t: -top});\n\t\t\tthis.classList.toggle('scroll-top-0', top === 0);\n\t\t\tif (this.verticalSlider) this.verticalSlider.value = top;\n\t\t}\n\t}\n\t\n\tscrollHorizontalByPixels(deltaX: number): boolean {\n\t\tconst left = Math.max(-this.horizontalSliderRef.value.maxValue, Math.min(0, this.inner.offsetLeft - deltaX)) ?? 0;\n\t\tif (this.inner.offsetLeft == left) return false;\n\t\tdom.setPosition(this.inner, {l: left});\n\t\tthis.horizontalSliderRef.value.value = left;\n\t\treturn true;\n\t}\n\t\n\tscrollHorizontalTo(left: number) {\n\t\tif (this.inner) {\n\t\t\tdom.setPosition(this.inner, {l: -left});\n\t\t\tif (this.horizontalSlider) this.horizontalSlider.value = left;\n\t\t}\n\t}\n\t\n\tfirstUpdated() {\n\t\tthis.connectObservers();\n\t\tthis.classList.add('scroll-top-0');\n\t\tthis.verticalSlider?.hide();\n\t\tthis.horizontalSlider?.hide();\n\t\t\n\t\tthis.verticalSlider?.addEventListener('slide', (e: SlideEvent) => {\n\t\t\tthis.scrollVerticalTo(e.value);\n\t\t\tthis.dispatchEvent(new SlideEvent('verticalscroll', e.value));\n\t\t});\n\t\tthis.horizontalSlider?.addEventListener('slide', (e: SlideEvent) => {\n\t\t\tthis.scrollHorizontalTo(e.value);\n\t\t\tthis.dispatchEvent(new SlideEvent('horizontalscroll', e.value));\n\t\t});\n\n\t\tthis.verticalSlider?.addEventListener('slideEnd', () => {\n\t\t\tthis.updateSliders();\n\t\t});\n\n\t\tthis.addEventListener('mouseenter', () => {\n\t\t\tthis._mouseIn = true;\n\t\t\tthis.updateSliders();\n\t\t});\n\n\t\tthis.addEventListener('mouseleave', () => {\n\t\t\tthis._mouseIn = false;\n\t\t\tthis.updateSliders();\n\t\t});\n\n\t\tthis.addEventListener('wheel', (e) => {\n\t\t\tif (e.deltaY != 0) {\n\t\t\t\tif (this.scrollVerticalByPixels(e.deltaY)) {\n\t\t\t\t\te.stopPropagation();\n\t\t\t\t}\n\t\t\t}\n\t\t}, {passive: true});\n\n\t\tthis.addEventListener('touchstart', e => {\n\t\t\tthis.touchStart = e.touches[0];\n\t\t\tthis._mouseIn = true;\n\t\t}, {passive: true});\n\n\t\tthis.addEventListener('touchend', () => {\n\t\t\tthis.touchStart = null;\n\t\t\tthis._mouseIn = false;\n\t\t\tthis.updateSliders();\n\t\t}, {passive: true});\n\n\t\tthis.addEventListener('touchmove', (e: TouchEvent) => {\n\t\t\tif (this.touchStart) {\n\t\t\t\tconst touch = e.touches[0];\n\t\t\t\tthis.scrollVerticalByPixels(this.touchStart.clientY - touch.clientY);\n\t\t\t\tthis.scrollVerticalByPixels(this.touchStart.clientX - touch.clientX);\n\t\t\t\tthis.updateSliders();\n\t\t\t\tthis.touchStart = touch;\n\t\t\t}\n\t\t}, {passive: true});\n\t}\n\n\tasync updated() {\n\t\tif (this.createComponent) {\n\t\t\tdom.empty(this.inner);\n\t\t\tthis.inner.appendChild(await this.createComponent(this.componentId));\n\t\t}\n\t}\n\n\trender = () => html`\n\t\t${this.createComponent ? html`\n\t\t\t<div class=\"inner\"></div>\n\t\t` : html`\n\t\t\t<div class=\"inner\">\n\t\t\t\t<slot name=\"content\"></slot>\n\t\t\t</div>\n\t\t`}\n\t\t\n\t\t<og-slider direction=\"vertical\" ${ref(this.verticalSliderRef)} hidden></og-slider>\n\t\t<og-slider direction=\"horizontal\" ${ref(this.horizontalSliderRef)} hidden></og-slider>\n\t`;\n\n\tget scrollHeight() {\n\t\treturn this.inner?.clientHeight - (this.overscroll ? 0 : this.clientHeight);\n\t}\n\n\tget scrollWidth() {\n\t\treturn this.inner?.clientWidth - this.clientWidth;\n\t}\n\n\tupdateSliders() {\t\n\t\tif (this.verticalSliderRef.value) {\n\t\t\tconst containerHeight = this.clientHeight;\n\t\t\t\n\t\t\tif (containerHeight < this.inner.clientHeight) {\n\t\t\t\tthis.verticalSliderRef.value.pageSize = containerHeight;\n\t\t\t\tthis.verticalSliderRef.value.maxValue = this.scrollHeight;\n\t\t\t\tthis.verticalSliderRef.value.requestUpdate();\n\t\t\t\tif (this._mouseIn || this.verticalSliderRef.value.sliding) {\n\t\t\t\t\tthis.verticalSliderRef.value.show();\n\t\t\t\t} else {\n\t\t\t\t\tthis.verticalSliderRef.value.hide();\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tthis.verticalSliderRef.value.hide();\n\t\t\t}\n\t\t}\n\n\t\tif (this.horizontalSliderRef.value) {\n\t\t\tconst containerWidth = this.clientWidth;\n\t\t\t\n\t\t\tif (containerWidth < this.inner.clientWidth) {\n\t\t\t\tthis.horizontalSliderRef.value.pageSize = containerWidth;\n\t\t\t\tthis.horizontalSliderRef.value.maxValue = this.scrollWidth;\n\t\t\t\tthis.horizontalSliderRef.value.requestUpdate();\n\t\t\t\tif (this._mouseIn || this.horizontalSliderRef.value.sliding) {\n\t\t\t\t\tthis.horizontalSliderRef.value.show();\n\t\t\t\t} else {\n\t\t\t\t\tthis.horizontalSliderRef.value.hide();\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tthis.horizontalSliderRef.value.hide();\n\t\t\t}\n\t\t}\n\t}\n\n}"]}
1
+ {"version":3,"file":"container.js","sourceRoot":"","sources":["../../src/ui/container.ts"],"names":[],"mappings":"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","sourcesContent":["import * as dom from \"../common/dom\";\nimport { html, css } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { SlideEvent, Slider } from \"./slider\";\nimport { createRef, Ref, ref } from \"lit/directives/ref.js\";\nimport { OmegaComponent } from \"../model\";\nimport { ComponentFactory, ComponentId } from \"../types\";\nimport constants from \"../constants\";\nimport { styleMap } from \"lit-html/directives/style-map.js\";\n\n@customElement('og-container')\nexport class Container extends OmegaComponent {\n\n\tstatic styles = css`\n\t\t* {\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\t:host {\n\t\t\tposition: relative;\n\t\t\tdisplay: block;\n\t\t\toverflow: hidden;\n\t\t\tbox-shadow: inset 0px 4px 3px -2px var(--og-inset-shadow-color);\n\t\t}\n\n\t\t:host(.scroll-top-0) {\n\t\t\tbox-shadow: none;\n\t\t}\n\n\t\tog-slider[direction=\"vertical\"] {\n\t\t\tright: 0;\n\t\t\ttop: 0;\n\t\t\tbottom: 0;\n\t\t}\n\n\t\t.inner {\n\t\t\tmin-width: 100%;\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t}\n\n\t\t:host([scrollbarPadding]) .inner {\n\t\t\tright: ${constants.SLIDER_SIZE}px;\n\t\t}\n\n\t\t:host([scrollbarPadding]) {\t\n\t\t\tpadding-right: ${constants.SLIDER_SIZE}px;\n\t\t}\n\t`;\n\n\t@property({type: String})\n\tcomponentId: ComponentId;\n\n\t@property({type: Object})\n\tcreateComponent: ComponentFactory;\n\n\t@property({type: Boolean})\n\toverscroll = false;\n\n\t@property({type: Number})\n\tsliderSize = 0;\n\n\t@property({type: Boolean, reflect: true})\n\tscrollbarPadding = false;\n\n\t@query('.inner')\n\tinner: HTMLDivElement;\n\n\tprivate verticalSliderRef: Ref<Slider> = createRef();\n\tget verticalSlider() { return this.verticalSliderRef.value }\n\t\n\tprivate horizontalSliderRef: Ref<Slider> = createRef();\n\tget horizontalSlider() { return this.horizontalSliderRef.value }\n\n\tprivate resizeObserver: ResizeObserver;\n\tprivate touchStart: Touch;\n\tprivate _mouseIn = false;\n\t\n\tget isScrolling() { return this.verticalSliderRef.value.sliding || this.horizontalSliderRef.value.sliding; }\n\n\tfixScrollPosition() {\n\t\tif (this.inner.offsetTop < 0) {\n\t\t\tif (this.clientHeight - this.inner.offsetHeight - this.inner.offsetTop > 0) {\n\t\t\t\tthis.scrollVerticalTo(Math.max(0, this.inner.offsetHeight - this.clientHeight));\n\t\t\t}\n\t\t}\n\t}\n\t\n\tconnectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis.connectObservers();\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback();\n\t\tthis.disconnectObservers();\n\t}\n\n\tconnectObservers() {\n\t\tthis.resizeObserver = this.resizeObserver ?? new ResizeObserver(() => {\n\t\t\tthis.updateSliders();\n\t\t\tthis.fixScrollPosition();\n\t\t});\n\n\t\tthis.resizeObserver.observe(this);\n\t\tif (this.inner)\tthis.resizeObserver.observe(this.inner);\n\t}\n\n\tdisconnectObservers() {\n\t\tthis.resizeObserver.disconnect();\n\t\tthis.resizeObserver = null;\n\t}\n\n\tscrollVerticalByPixels(deltaY: number): boolean {\n\t\tif (this.inner.offsetHeight <= this.clientHeight) return false;\n\t\tconst top = this.scrollHeight > 0\n\t\t\t? (Math.max(-this.verticalSlider.maxValue, Math.min(0, this.inner.offsetTop - deltaY)) ?? 0)\n\t\t\t: 0;\n\n\t\tif (this.inner.offsetTop === top) return false;\n\t\tdom.setPosition(this.inner, {t: top});\n\t\tthis.verticalSlider.value = -top;\n\t\tthis.classList.toggle('scroll-top-0', top === 0);\n\t\tthis.dispatchEvent(new SlideEvent('verticalscroll', -top));\n\t\treturn true;\n\t}\n\n\tscrollVerticalTo(top: number) {\n\t\tif (this.inner) {\n\t\t\ttop = Math.min(this.verticalSlider?.maxValue || 0, Math.max(0, top));\n\t\t\tdom.setPosition(this.inner, {t: -top});\n\t\t\tthis.classList.toggle('scroll-top-0', top === 0);\n\t\t\tif (this.verticalSlider) this.verticalSlider.value = top;\n\t\t}\n\t}\n\t\n\tscrollHorizontalByPixels(deltaX: number): boolean {\n\t\tconst left = Math.max(-this.horizontalSliderRef.value.maxValue, Math.min(0, this.inner.offsetLeft - deltaX)) ?? 0;\n\t\tif (this.inner.offsetLeft == left) return false;\n\t\tdom.setPosition(this.inner, {l: left});\n\t\tthis.horizontalSliderRef.value.value = left;\n\t\treturn true;\n\t}\n\t\n\tscrollHorizontalTo(left: number) {\n\t\tif (this.inner) {\n\t\t\tdom.setPosition(this.inner, {l: -left});\n\t\t\tif (this.horizontalSlider) this.horizontalSlider.value = left;\n\t\t}\n\t}\n\t\n\tfirstUpdated() {\n\t\tthis.connectObservers();\n\t\tthis.classList.add('scroll-top-0');\n\t\tthis.verticalSlider?.hide();\n\t\tthis.horizontalSlider?.hide();\n\t\t\n\t\tthis.verticalSlider?.addEventListener('slide', (e: SlideEvent) => {\n\t\t\tthis.scrollVerticalTo(e.value);\n\t\t\tthis.dispatchEvent(new SlideEvent('verticalscroll', e.value));\n\t\t});\n\t\tthis.horizontalSlider?.addEventListener('slide', (e: SlideEvent) => {\n\t\t\tthis.scrollHorizontalTo(e.value);\n\t\t\tthis.dispatchEvent(new SlideEvent('horizontalscroll', e.value));\n\t\t});\n\n\t\tthis.verticalSlider?.addEventListener('slideEnd', () => {\n\t\t\tthis.updateSliders();\n\t\t});\n\n\t\tthis.addEventListener('mouseenter', () => {\n\t\t\tthis._mouseIn = true;\n\t\t\tthis.updateSliders();\n\t\t});\n\n\t\tthis.addEventListener('mouseleave', () => {\n\t\t\tthis._mouseIn = false;\n\t\t\tthis.updateSliders();\n\t\t});\n\n\t\tthis.addEventListener('wheel', (e) => {\n\t\t\tif (e.deltaY != 0) {\n\t\t\t\tif (this.scrollVerticalByPixels(e.deltaY)) {\n\t\t\t\t\te.stopPropagation();\n\t\t\t\t}\n\t\t\t}\n\t\t}, {passive: true});\n\n\t\tthis.addEventListener('touchstart', e => {\n\t\t\tthis.touchStart = e.touches[0];\n\t\t\tthis._mouseIn = true;\n\t\t}, {passive: true});\n\n\t\tthis.addEventListener('touchend', () => {\n\t\t\tthis.touchStart = null;\n\t\t\tthis._mouseIn = false;\n\t\t\tthis.updateSliders();\n\t\t}, {passive: true});\n\n\t\tthis.addEventListener('touchmove', (e: TouchEvent) => {\n\t\t\tif (this.touchStart) {\n\t\t\t\tconst touch = e.touches[0];\n\t\t\t\tthis.scrollVerticalByPixels(this.touchStart.clientY - touch.clientY);\n\t\t\t\tthis.scrollVerticalByPixels(this.touchStart.clientX - touch.clientX);\n\t\t\t\tthis.updateSliders();\n\t\t\t\tthis.touchStart = touch;\n\t\t\t}\n\t\t}, {passive: true});\n\t}\n\n\tasync updated() {\n\t\tif (this.createComponent) {\n\t\t\tdom.empty(this.inner);\n\t\t\tthis.inner.appendChild(await this.createComponent(this.componentId));\n\t\t}\n\t}\n\n\trender = () => html`\n\t\t${this.createComponent ? html`\n\t\t\t<div class=\"inner\"></div>\n\t\t` : html`\n\t\t\t<div class=\"inner\">\n\t\t\t\t<slot name=\"content\"></slot>\n\t\t\t</div>\n\t\t`}\n\t\t\n\t\t<og-slider ${ref(this.verticalSliderRef)}\n\t\t\tstyle=\"${styleMap(this.sliderSize > 0 ? {width: `${this.sliderSize}px`} : {})}\"\n\t\t\tdirection=\"vertical\"\n\t\t\thidden>\n\t\t</og-slider>\n\t\t\n\t\t<og-slider ${ref(this.horizontalSliderRef)}\n\t\t\tstyle=\"${styleMap(this.sliderSize > 0 ? {height: `${this.sliderSize}px`} : {})}\"\n\t\t\tdirection=\"horizontal\" \n\t\t\thidden>\n\t\t</og-slider>\n\t`;\n\n\tget scrollHeight() {\n\t\treturn this.inner?.clientHeight - (this.overscroll ? 0 : this.clientHeight);\n\t}\n\n\tget scrollWidth() {\n\t\treturn this.inner?.clientWidth - this.clientWidth;\n\t}\n\n\tupdateSliders() {\t\n\t\tif (this.verticalSliderRef.value) {\n\t\t\tconst containerHeight = this.clientHeight;\n\t\t\t\n\t\t\tif (containerHeight < this.inner.clientHeight) {\n\t\t\t\tthis.verticalSliderRef.value.pageSize = containerHeight;\n\t\t\t\tthis.verticalSliderRef.value.maxValue = this.scrollHeight;\n\t\t\t\tthis.verticalSliderRef.value.requestUpdate();\n\t\t\t\tif (this._mouseIn || this.verticalSliderRef.value.sliding) {\n\t\t\t\t\tthis.verticalSliderRef.value.show();\n\t\t\t\t} else {\n\t\t\t\t\tthis.verticalSliderRef.value.hide();\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tthis.verticalSliderRef.value.hide();\n\t\t\t}\n\t\t}\n\n\t\tif (this.horizontalSliderRef.value) {\n\t\t\tconst containerWidth = this.clientWidth;\n\t\t\t\n\t\t\tif (containerWidth < this.inner.clientWidth) {\n\t\t\t\tthis.horizontalSliderRef.value.pageSize = containerWidth;\n\t\t\t\tthis.horizontalSliderRef.value.maxValue = this.scrollWidth;\n\t\t\t\tthis.horizontalSliderRef.value.requestUpdate();\n\t\t\t\tif (this._mouseIn || this.horizontalSliderRef.value.sliding) {\n\t\t\t\t\tthis.horizontalSliderRef.value.show();\n\t\t\t\t} else {\n\t\t\t\t\tthis.horizontalSliderRef.value.hide();\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tthis.horizontalSliderRef.value.hide();\n\t\t\t}\n\t\t}\n\t}\n\n}"]}
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../src/ui/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAK9C,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAIlC,qBAAa,aAAc,SAAQ,KAAK;gBAE3B,KAAK,EAAE,MAAM;CAGzB;AAED,qBACa,iBAAkB,SAAQ,UAAU;IAEhD,MAAM,CAAC,MAAM,0BAmBX;;IAOF,MAAM,0BAA6D;CACnE;AAED,qBAEa,QAAS,SAAQ,UAAW,YAAW,MAAM;IAEzD,MAAM,CAAC,MAAM,4BAoCV;IAGH,SAAS,EAAE,MAAM,GAAC,OAAO,CAAW;IAGpC,cAAc,SAAK;IAGnB,cAAc,EAAE,WAAW,CAAiB;IAG5C,KAAK,EAAE,MAAM,GAAC,WAAW,GAAC,cAAc,CAAC;IAGzC,IAAI,EAAE,QAAQ,GAAC,MAAM,CAAC;IAGtB,KAAK,EAAE,MAAM,CAAC;IAGd,KAAK,aAAqB;IAG1B,OAAO,UAAS;IAGhB,QAAQ,EAAE,cAAc,CAAC;IAEzB,OAAO,CAAC,WAAW,CAAc;IAEjC,SAAS,CAAC,WAAW,8DAAkC;IACvD,IAAI,QAAQ,sBAAqC;IAEjD,IAAI,MAAM,YAA2D;IAErE,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,GAAI,GAAG,UAAU,UAKpC;IAEK,IAAI;IAyBV,KAAK;IAML,MAAM;IAKN,YAAY,sBAA6B;IAEzC,oBAAoB;IAKpB,cAAc,0BAIZ;IAEF,WAAW,2HAMT;IAEF,IAAI,YAAY,YAEf;IAED,IAAI,QAAQ,YAEX;IAED,MAAM,0BAeJ;IAEF,MAAM;CAiBN"}
1
+ {"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../src/ui/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAK9C,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAKlC,qBAAa,aAAc,SAAQ,KAAK;gBAE3B,KAAK,EAAE,MAAM;CAGzB;AAED,qBACa,iBAAkB,SAAQ,UAAU;IAEhD,MAAM,CAAC,MAAM,0BAkBX;;IAOF,MAAM,0BAA6D;CACnE;AAED,qBAEa,QAAS,SAAQ,UAAW,YAAW,MAAM;IAEzD,MAAM,CAAC,MAAM,4BAmCV;IAGH,SAAS,EAAE,MAAM,GAAC,OAAO,CAAW;IAGpC,cAAc,SAAK;IAGnB,cAAc,EAAE,WAAW,CAAiB;IAG5C,KAAK,EAAE,MAAM,GAAC,WAAW,GAAC,cAAc,CAAC;IAGzC,IAAI,EAAE,QAAQ,GAAC,MAAM,CAAC;IAGtB,KAAK,EAAE,MAAM,CAAC;IAGd,KAAK,aAAqB;IAG1B,OAAO,UAAS;IAGhB,QAAQ,EAAE,cAAc,CAAC;IAEzB,OAAO,CAAC,WAAW,CAAc;IAEjC,SAAS,CAAC,WAAW,8DAAkC;IACvD,IAAI,QAAQ,sBAAqC;IAEjD,IAAI,MAAM,YAA2D;IAErE,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,GAAI,GAAG,UAAU,UAKpC;IAEK,IAAI;IAyBV,KAAK;IAML,MAAM;IAKN,YAAY,sBAA6B;IAEzC,oBAAoB;IAKpB,cAAc,0BAIZ;IAEF,WAAW,2HAMT;IAEF,IAAI,YAAY,YAEf;IAED,IAAI,QAAQ,YAEX;IAED,MAAM,0BAeJ;IAEF,MAAM;CAiBN"}
@@ -13,6 +13,7 @@ import { createRef, ref } from 'lit-html/directives/ref.js';
13
13
  import { guard } from 'lit/directives/guard.js';
14
14
  import { utils } from '../common';
15
15
  import { colorable } from '../themes';
16
+ import constants from '../constants';
16
17
  export class DropdownEvent extends Event {
17
18
  constructor(event) {
18
19
  super(`dropdown.${event}`);
@@ -36,7 +37,6 @@ DropdownContainer.styles = css `
36
37
  z-index: 60000;
37
38
  font-size: var(--og-font-size);
38
39
  font-family: var(--og-font-family);
39
- line-height: 1;
40
40
  border-radius: var(--og-base-radius);
41
41
  }
42
42
 
@@ -82,14 +82,14 @@ let Dropdown = class Dropdown extends LitElement {
82
82
  this.render = () => html `
83
83
  <og-button
84
84
  @mousedown="${this._onMousedown}"
85
- id="main"
85
+ class="main"
86
86
  color="${this.color}"
87
87
  .icon="${this.icon}"
88
88
  ?caret="${!this.noCaret}">
89
89
  ${this.hasLabelSlot ? html `
90
- <div id="label" slot="content"><slot name="label"></slot></div>
90
+ <div class="label" slot="content"><slot name="label"></slot></div>
91
91
  ` : guard([this.label], () => (this.hasLabel ? html `
92
- <div id="label" slot="content">${this.renderLabel()}</div>
92
+ <div class="label" slot="content">${this.renderLabel()}</div>
93
93
  ` : ''))}
94
94
  </og-button>
95
95
 
@@ -164,11 +164,8 @@ let Dropdown = class Dropdown extends LitElement {
164
164
  }
165
165
  };
166
166
  Dropdown.styles = [css `
167
- * {
168
- box-sizing: border-box;
169
- }
170
-
171
167
  :host {
168
+ box-sizing: border-box;
172
169
  display: flex;
173
170
  align-items: stretch;
174
171
  flex-direction: row;
@@ -178,6 +175,7 @@ Dropdown.styles = [css `
178
175
  user-select: none;
179
176
  outline: none;
180
177
  border-radius: var(--og-base-radius);
178
+ height: ${constants.BUTTON_HEIGHT}px;
181
179
  }
182
180
 
183
181
  :host(.radiusfix) {
@@ -198,6 +196,7 @@ Dropdown.styles = [css `
198
196
  flex: 1;
199
197
  border-radius: 0;
200
198
  border: none;
199
+ height: 100%;
201
200
  }
202
201
  `];
203
202
  __decorate([
@@ -225,7 +224,7 @@ __decorate([
225
224
  property({ type: Boolean })
226
225
  ], Dropdown.prototype, "noCaret", void 0);
227
226
  __decorate([
228
- query('#label')
227
+ query('.label')
229
228
  ], Dropdown.prototype, "labelElm", void 0);
230
229
  Dropdown = __decorate([
231
230
  customElement('og-dropdown'),
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../src/ui/dropdown.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ColorTypes, Layout } from '../types';\nimport * as dom from '../common/dom';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { createRef, ref } from 'lit-html/directives/ref.js';\nimport { guard } from 'lit/directives/guard.js';\nimport { IconSpec } from './icon';\nimport { utils } from '../common';\nimport { colorable } from '../themes';\n\nexport class DropdownEvent extends Event {\n\n\tconstructor(event: string) {\n\t\tsuper(`dropdown.${event}`);\n\t}\n}\n\n@customElement('og-dropdown-container')\nexport class DropdownContainer extends LitElement {\n\n\tstatic styles = css`\n\t\t:host {\n\t\t\tborder: 1px solid var(--og-accent-color);\n\t\t\tbackground-color: var(--og-background-color);\n\t\t\tposition: absolute;\n\t\t\toverflow: hidden;\n\t\t\tbox-sizing: border-box;\n\t\t\tcolor: var(--og-text-color);\n\t\t\tz-index: 60000;\n\t\t\tfont-size: var(--og-font-size);\n\t\t\tfont-family: var(--og-font-family);\n\t\t\tline-height: 1;\n\t\t\tborder-radius: var(--og-base-radius);\n\t\t}\n\n\t\t:host(.radiusfix) {\n\t\t\tborder-top-left-radius: 0;\n\t\t\tborder-top-right-radius: 0;\n\t\t}\n\t`;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.addEventListener('mousedown', (e: MouseEvent) => e.stopPropagation());\n\t}\n\n\trender = () => html`<div><slot name=\"inner-content\"></slot></div>`;\n}\n\n@customElement('og-dropdown')\n@colorable({props: ['border']})\nexport class Dropdown extends LitElement implements Layout {\n\n\tstatic styles = [css`\n\t\t* {\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\t:host {\n\t\t\tdisplay: flex;\n\t\t\talign-items: stretch;\n\t\t\tflex-direction: row;\n\t\t\tfont-size: var(--og-font-size);\n\t\t\tfont-family: var(--og-font-family);\n\t\t\tcursor: pointer;\n\t\t\tuser-select: none;\n\t\t\toutline: none;\n\t\t\tborder-radius: var(--og-base-radius);\n\t\t}\n\n\t\t:host(.radiusfix) {\n\t\t\tborder-bottom-left-radius: 0;\n\t\t\tborder-bottom-right-radius: 0;\n\t\t}\n\n\t\tdiv.text {\n\t\t\tflex: 1;\n\t\t\tcolor: var(--og-text-color-2);\n\t\t\tpadding-left: 2px;\n\t\t\twhite-space: nowrap;\n\t\t\ttext-overflow: ellipsis;\n\t\t\toverflow: hidden;\n\t\t}\n\n\t\tog-button {\n\t\t\tflex: 1;\n\t\t\tborder-radius: 0;\n\t\t\tborder: none;\n\t\t}\n\t`];\n\n\t@property({type: String})\n\talignment: 'left'|'right' = 'right';\n\n\t@property({type: Number})\n\tpositionOffset = 0;\n\n\t@property({type: Object})\n\tdropdownParent: HTMLElement = document.body;\n\n\t@property()\n\tlabel: string|HTMLElement|TemplateResult;\n\n\t@property()\n\ticon: IconSpec|string;\n\n\t@property({type: Number})\n\twidth: number;\n\n\t@property({type: String, reflect: true})\n\tcolor = ColorTypes.Accent;\n\n\t@property({type: Boolean})\n\tnoCaret = false;\n\n\t@query('#label')\n\tlabelElm: HTMLDivElement;\n\n\tprivate _contentElm: HTMLElement;\n\n\tprotected dropdownRef = createRef<DropdownContainer>();\n\tget dropdown() { return this.dropdownRef?.value }\n\n\tget isOpen() { return this.dropdown && !dom.isHidden(this.dropdown) }\n\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback();\n\t\tthis.tabIndex = 0;\n\t}\n\n\t_onDocumentMouseDown = (e: MouseEvent) => {\n\t\tfor (const elm of e.composedPath()) {\n\t\t\tif (elm == this.dropdown || elm == this) return;\n\t\t}\n\t\tthis.close();\n\t}\n\n\tasync open() {\n\t\tthis.dispatchEvent(new DropdownEvent('beforeOpen'));\n\t\tawait this.updateComplete;\n\t\t\n\t\tif (this.dropdown.parentElement !== this.dropdownParent) {\n\t\t\tthis.dropdownParent.appendChild(this.dropdown);\n\t\t}\n\n\t\tif (this.children.length > 0 && !this._contentElm) {\n\t\t\tthis._contentElm = [...this.children].find(elm => elm.slot == 'content') as HTMLElement;\n\t\t\tif (this._contentElm) {\n\t\t\t\tthis._contentElm.slot = 'inner-content';\n\t\t\t\tthis.dropdown.appendChild(this._contentElm);\n\t\t\t}\n\t\t}\n\n\t\tif (this.width > 0) dom.setSize(this.dropdown, {w: this.width});\n\t\tdom.showElement(this.dropdown);\n\t\tthis.requestUpdate();\n\t\tawait this.dropdown.updateComplete;\n\t\tthis.dispatchEvent(new DropdownEvent('open'));\n\t\tthis.layout();\n\t\tdocument.body.addEventListener('mousedown', this._onDocumentMouseDown);\n\t}\n\n\tclose() {\n\t\tif (this.dropdown) dom.hideElement(this.dropdown);\n\t\tthis.layout();\n\t\tdocument.body.removeEventListener('mousedown', this._onDocumentMouseDown);\n\t}\n\n\ttoggle() {\n\t\tif (this.isOpen) this.close();\n\t\telse this.open();\n\t}\n\n\t_onMousedown = async () => this.toggle();\n\n\tdisconnectedCallback() {\n\t\tthis.dropdown?.remove();\n\t\tsuper.disconnectedCallback();\n\t}\n\n\trenderDropdown = () => html`\n\t\t<og-dropdown-container ${ref(this.dropdownRef)}\n\t\t\tstyle=\"display: none\">\n\t\t</og-dropdown-container>\n\t`;\n\n\trenderLabel = () => {\n\t\tif (utils.isString(this.label)) {\n\t\t\treturn this.label === '' ? unsafeHTML('&nbsp;') : html`<div class=\"text\">${this.label}</div>`;\n\t\t} else {\n\t\t\treturn this.label;\n\t\t}\n\t};\n\n\tget hasLabelSlot() {\n\t\treturn this.querySelector('[slot=\"label\"]') != null;\n\t}\n\n\tget hasLabel() {\n\t\treturn this.label !== '' && this.label != null;\n\t}\n\n\trender = () => html`\n\t\t<og-button\n\t\t\t@mousedown=\"${this._onMousedown}\"\n\t\t\tid=\"main\"\n\t\t\tcolor=\"${this.color}\"\n\t\t\t.icon=\"${this.icon}\"\n\t\t\t?caret=\"${!this.noCaret}\">\n\t\t\t${this.hasLabelSlot ? html`\n\t\t\t\t<div id=\"label\" slot=\"content\"><slot name=\"label\"></slot></div>\n\t\t\t` : guard([this.label], () => (this.hasLabel ? html`\n\t\t\t\t<div id=\"label\" slot=\"content\">${this.renderLabel()}</div>\n\t\t\t` : ''))}\n\t\t</og-button>\n\n\t\t${this.renderDropdown()}\n\t`;\n\n\tlayout() {\n\t\tthis.classList.toggle('radiusfix', this.isOpen);\n\t\tif (!this.dropdown) return;\n\t\tthis.dropdown.classList.toggle('radiusfix', this.isOpen);\n\t\tif (!this.isOpen) return;\n\n\t\tconst offset = dom.getElementOffset(this, this.dropdownParent);\n\t\tdom.setSize(this.dropdown, {w: this.offsetWidth}, true);\n\t\tdom.setPosition(this.dropdown, {\n\t\t\tt: offset.top + this.offsetHeight - 1, \n\t\t\tl: this.positionOffset + (this.alignment == 'left' \n\t\t\t\t? offset.left : (offset.left + this.offsetWidth - this.dropdown.offsetWidth ))\n\t\t});\n\n\t\tdom.fixElementPosition(this.dropdown);\n\t}\n\n}"]}
1
+ {"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../src/ui/dropdown.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ColorTypes, Layout } from '../types';\nimport * as dom from '../common/dom';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { createRef, ref } from 'lit-html/directives/ref.js';\nimport { guard } from 'lit/directives/guard.js';\nimport { IconSpec } from './icon';\nimport { utils } from '../common';\nimport { colorable } from '../themes';\nimport constants from '../constants';\n\nexport class DropdownEvent extends Event {\n\n\tconstructor(event: string) {\n\t\tsuper(`dropdown.${event}`);\n\t}\n}\n\n@customElement('og-dropdown-container')\nexport class DropdownContainer extends LitElement {\n\n\tstatic styles = css`\n\t\t:host {\n\t\t\tborder: 1px solid var(--og-accent-color);\n\t\t\tbackground-color: var(--og-background-color);\n\t\t\tposition: absolute;\n\t\t\toverflow: hidden;\n\t\t\tbox-sizing: border-box;\n\t\t\tcolor: var(--og-text-color);\n\t\t\tz-index: 60000;\n\t\t\tfont-size: var(--og-font-size);\n\t\t\tfont-family: var(--og-font-family);\n\t\t\tborder-radius: var(--og-base-radius);\n\t\t}\n\n\t\t:host(.radiusfix) {\n\t\t\tborder-top-left-radius: 0;\n\t\t\tborder-top-right-radius: 0;\n\t\t}\n\t`;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.addEventListener('mousedown', (e: MouseEvent) => e.stopPropagation());\n\t}\n\n\trender = () => html`<div><slot name=\"inner-content\"></slot></div>`;\n}\n\n@customElement('og-dropdown')\n@colorable({props: ['border']})\nexport class Dropdown extends LitElement implements Layout {\n\n\tstatic styles = [css`\n\t\t:host {\n\t\t\tbox-sizing: border-box;\n\t\t\tdisplay: flex;\n\t\t\talign-items: stretch;\n\t\t\tflex-direction: row;\n\t\t\tfont-size: var(--og-font-size);\n\t\t\tfont-family: var(--og-font-family);\n\t\t\tcursor: pointer;\n\t\t\tuser-select: none;\n\t\t\toutline: none;\n\t\t\tborder-radius: var(--og-base-radius);\n\t\t\theight: ${constants.BUTTON_HEIGHT}px;\n\t\t}\n\n\t\t:host(.radiusfix) {\n\t\t\tborder-bottom-left-radius: 0;\n\t\t\tborder-bottom-right-radius: 0;\n\t\t}\n\n\t\tdiv.text {\n\t\t\tflex: 1;\n\t\t\tcolor: var(--og-text-color-2);\n\t\t\tpadding-left: 2px;\n\t\t\twhite-space: nowrap;\n\t\t\ttext-overflow: ellipsis;\n\t\t\toverflow: hidden;\n\t\t}\n\n\t\tog-button {\n\t\t\tflex: 1;\n\t\t\tborder-radius: 0;\n\t\t\tborder: none;\n\t\t\theight: 100%;\n\t\t}\n\t`];\n\n\t@property({type: String})\n\talignment: 'left'|'right' = 'right';\n\n\t@property({type: Number})\n\tpositionOffset = 0;\n\n\t@property({type: Object})\n\tdropdownParent: HTMLElement = document.body;\n\n\t@property()\n\tlabel: string|HTMLElement|TemplateResult;\n\n\t@property()\n\ticon: IconSpec|string;\n\n\t@property({type: Number})\n\twidth: number;\n\n\t@property({type: String, reflect: true})\n\tcolor = ColorTypes.Accent;\n\n\t@property({type: Boolean})\n\tnoCaret = false;\n\n\t@query('.label')\n\tlabelElm: HTMLDivElement;\n\n\tprivate _contentElm: HTMLElement;\n\n\tprotected dropdownRef = createRef<DropdownContainer>();\n\tget dropdown() { return this.dropdownRef?.value }\n\n\tget isOpen() { return this.dropdown && !dom.isHidden(this.dropdown) }\n\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback();\n\t\tthis.tabIndex = 0;\n\t}\n\n\t_onDocumentMouseDown = (e: MouseEvent) => {\n\t\tfor (const elm of e.composedPath()) {\n\t\t\tif (elm == this.dropdown || elm == this) return;\n\t\t}\n\t\tthis.close();\n\t}\n\n\tasync open() {\n\t\tthis.dispatchEvent(new DropdownEvent('beforeOpen'));\n\t\tawait this.updateComplete;\n\t\t\n\t\tif (this.dropdown.parentElement !== this.dropdownParent) {\n\t\t\tthis.dropdownParent.appendChild(this.dropdown);\n\t\t}\n\n\t\tif (this.children.length > 0 && !this._contentElm) {\n\t\t\tthis._contentElm = [...this.children].find(elm => elm.slot == 'content') as HTMLElement;\n\t\t\tif (this._contentElm) {\n\t\t\t\tthis._contentElm.slot = 'inner-content';\n\t\t\t\tthis.dropdown.appendChild(this._contentElm);\n\t\t\t}\n\t\t}\n\n\t\tif (this.width > 0) dom.setSize(this.dropdown, {w: this.width});\n\t\tdom.showElement(this.dropdown);\n\t\tthis.requestUpdate();\n\t\tawait this.dropdown.updateComplete;\n\t\tthis.dispatchEvent(new DropdownEvent('open'));\n\t\tthis.layout();\n\t\tdocument.body.addEventListener('mousedown', this._onDocumentMouseDown);\n\t}\n\n\tclose() {\n\t\tif (this.dropdown) dom.hideElement(this.dropdown);\n\t\tthis.layout();\n\t\tdocument.body.removeEventListener('mousedown', this._onDocumentMouseDown);\n\t}\n\n\ttoggle() {\n\t\tif (this.isOpen) this.close();\n\t\telse this.open();\n\t}\n\n\t_onMousedown = async () => this.toggle();\n\n\tdisconnectedCallback() {\n\t\tthis.dropdown?.remove();\n\t\tsuper.disconnectedCallback();\n\t}\n\n\trenderDropdown = () => html`\n\t\t<og-dropdown-container ${ref(this.dropdownRef)}\n\t\t\tstyle=\"display: none\">\n\t\t</og-dropdown-container>\n\t`;\n\n\trenderLabel = () => {\n\t\tif (utils.isString(this.label)) {\n\t\t\treturn this.label === '' ? unsafeHTML('&nbsp;') : html`<div class=\"text\">${this.label}</div>`;\n\t\t} else {\n\t\t\treturn this.label;\n\t\t}\n\t};\n\n\tget hasLabelSlot() {\n\t\treturn this.querySelector('[slot=\"label\"]') != null;\n\t}\n\n\tget hasLabel() {\n\t\treturn this.label !== '' && this.label != null;\n\t}\n\n\trender = () => html`\n\t\t<og-button\n\t\t\t@mousedown=\"${this._onMousedown}\"\n\t\t\tclass=\"main\"\n\t\t\tcolor=\"${this.color}\"\n\t\t\t.icon=\"${this.icon}\"\n\t\t\t?caret=\"${!this.noCaret}\">\n\t\t\t${this.hasLabelSlot ? html`\n\t\t\t\t<div class=\"label\" slot=\"content\"><slot name=\"label\"></slot></div>\n\t\t\t` : guard([this.label], () => (this.hasLabel ? html`\n\t\t\t\t<div class=\"label\" slot=\"content\">${this.renderLabel()}</div>\n\t\t\t` : ''))}\n\t\t</og-button>\n\n\t\t${this.renderDropdown()}\n\t`;\n\n\tlayout() {\n\t\tthis.classList.toggle('radiusfix', this.isOpen);\n\t\tif (!this.dropdown) return;\n\t\tthis.dropdown.classList.toggle('radiusfix', this.isOpen);\n\t\tif (!this.isOpen) return;\n\n\t\tconst offset = dom.getElementOffset(this, this.dropdownParent);\n\t\tdom.setSize(this.dropdown, {w: this.offsetWidth}, true);\n\t\tdom.setPosition(this.dropdown, {\n\t\t\tt: offset.top + this.offsetHeight - 1, \n\t\t\tl: this.positionOffset + (this.alignment == 'left' \n\t\t\t\t? offset.left : (offset.left + this.offsetWidth - this.dropdown.offsetWidth ))\n\t\t});\n\n\t\tdom.fixElementPosition(this.dropdown);\n\t}\n\n}"]}
@@ -1 +1 @@
1
- {"version":3,"file":"input.style.d.ts","sourceRoot":"","sources":["../../src/ui/input.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,yBAgCjB,CAAC"}
1
+ {"version":3,"file":"input.style.d.ts","sourceRoot":"","sources":["../../src/ui/input.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,yBAiCjB,CAAC"}
@@ -1,6 +1,7 @@
1
1
  import { css } from 'lit';
2
2
  export const style = css `
3
3
  :host {
4
+ box-sizing: border-box;
4
5
  background-color: var(--og-colortype-gray-background-color);
5
6
  border: 1px solid var(--og-colortype-gray-border-color);
6
7
  height: 20px;
@@ -1 +1 @@
1
- {"version":3,"file":"input.style.js","sourceRoot":"","sources":["../../src/ui/input.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`\n\t:host {\n\t\tbackground-color: var(--og-colortype-gray-background-color);\n\t\tborder: 1px solid var(--og-colortype-gray-border-color);\n\t\theight: 20px;\n\t\tline-height: 20px;\n\t\tdisplay: inline-block;\n\t\tborder-radius: var(--og-base-radius);\n\t}\n\t\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\t\n\tinput {\n\t\tdisplay: block;\n\t\tcolor: var(--og-text-color-3);\n\t\tfont-size: var(--og-font-size);\n\t\tfont-family: var(--og-font-family);\n\t\tborder: none;\n\t\tbackground-color: inherit;\n\t\toutline: none;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\ttext-align: inherit;\n\t\tpadding: 0 4px;\n\t}\n\n\tinput[disabled] {\n\t\topacity: 0.5;\n\t\tcursor: not-allowed;\n\t}\n`;\n"]}
1
+ {"version":3,"file":"input.style.js","sourceRoot":"","sources":["../../src/ui/input.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`\n\t:host {\n\t\tbox-sizing: border-box;\n\t\tbackground-color: var(--og-colortype-gray-background-color);\n\t\tborder: 1px solid var(--og-colortype-gray-border-color);\n\t\theight: 20px;\n\t\tline-height: 20px;\n\t\tdisplay: inline-block;\n\t\tborder-radius: var(--og-base-radius);\n\t}\n\t\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\t\n\tinput {\n\t\tdisplay: block;\n\t\tcolor: var(--og-text-color-3);\n\t\tfont-size: var(--og-font-size);\n\t\tfont-family: var(--og-font-family);\n\t\tborder: none;\n\t\tbackground-color: inherit;\n\t\toutline: none;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\ttext-align: inherit;\n\t\tpadding: 0 4px;\n\t}\n\n\tinput[disabled] {\n\t\topacity: 0.5;\n\t\tcursor: not-allowed;\n\t}\n`;\n"]}
@@ -91,7 +91,7 @@ let NumericInput = class NumericInput extends LitElement {
91
91
  <div>
92
92
  ${this.hasButtons ? html `
93
93
  <og-button
94
- text="-"
94
+ icon="minus"
95
95
  data-increment="${-this.increment}"
96
96
  @click="${this._onButtonClick}"
97
97
  @focus="${(e) => e.stopPropagation()}">
@@ -109,7 +109,7 @@ let NumericInput = class NumericInput extends LitElement {
109
109
 
110
110
  ${this.hasButtons ? html `
111
111
  <og-button
112
- text="+"
112
+ icon="plus"
113
113
  data-increment="${this.increment}"
114
114
  @click="${this._onButtonClick}"
115
115
  @focus="${(e) => e.stopPropagation()}">
@@ -1 +1 @@
1
- {"version":3,"file":"numericInput.js","sourceRoot":"","sources":["../../src/ui/numericInput.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { getLocale } from '@omegagrid/localize';\nimport constants from '../constants';\nimport { numbers } from '../common';\nimport { style } from './numericInput.style';\n\n@customElement(`og-numericinput`)\nexport class NumericInput extends LitElement {\n\n\tstatic styles = style;\n\n\t@property({type: String})\n\tformat = constants.DEFAULT_NUMBER_FORMAT;\n\n\t@property({type: Number})\n\tvalue: number;\n\n\t@property({type: Number})\n\tmin: number;\n\n\t@property({type: Number})\n\tmax: number;\n\n\t@property({type: String})\n\tlocale = getLocale();\n\n\t@property({type: Boolean})\n\tdisabled = false;\n\n\t@property({type: Boolean})\n\tbuttons = false;\n\n\t@property({type: Number})\n\tincrement = 1;\n\n\t@query('input')\n\tinput: HTMLInputElement;\n\n\t@state()\n\tediting = false;\n\n\tprivate _lastInputValue: string;\n\tprivate _lastValue: number;\n\n\tprivate _formatter: numbers.NumberFormatterFunction;\n\tget formatter() {\n\t\tif (!this._formatter) this._formatter = numbers.getNumberFormatter(this.locale, this.format);\n\t\treturn this._formatter;\n\t}\n\n\tprivate _editingFormatter: numbers.NumberFormatterFunction;\n\tget editingFormatter() {\n\t\tif (!this._editingFormatter) {\n\t\t\tthis._editingFormatter = Intl.NumberFormat(this.locale, {useGrouping: false, maximumFractionDigits: 20}).format;\n\t\t}\n\t\treturn this._editingFormatter;\n\t}\n\n\tget formattedValue() {\n\t\treturn this.value == null ? '' : (this.editing\n\t\t\t? this.editingFormatter(this.value)\n\t\t\t: this.formatter(this.value)\n\t\t);\n\t}\n\n\tget hasButtons() { return this.buttons && !this.disabled }\n\n\tresetFormatters() {\n\t\tthis._formatter = null;\n\t\tthis._editingFormatter = null;\n\t}\n\t\n\twillUpdate(props: Map<PropertyKey, unknown>) {\n\t\tif (props.has('locale') || props.has('format')) {\n\t\t\tthis.resetFormatters();\n\t\t}\n\n\t\tif (props.has('value')) {\n\t\t\tif (!this.isValidNumber(this.value)) {\n\t\t\t\tthis.value = props.get('value') as number;\n\t\t\t}\n\t\t}\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.tabIndex = 1;\n\t}\n\n\tfocus() {\n\t\tthis.input?.focus();\n\t}\n\n\tinc(value: number = this.increment) {\n\t\tconst v = (this.value || 0) + value;\n\t\tif (this.isValidNumber(v)) this.value = v;\n\t}\n\n\tprivate _dispatchChangeEvent() {\n\t\tif (this.value != this._lastValue) {\n\t\t\tthis._lastValue = this.value;\n\t\t\tthis.dispatchEvent(new Event('change'));\n\t\t}\n\t}\n\n\tprivate isValidNumber(value: number) {\n\t\treturn (this.min == null || value >= this.min) && (this.max == null || value <= this.max);\n\t}\n\n\t_onKeyDown = (e: KeyboardEvent) => {\n\t\tif (['ArrowUp', 'ArrowDown'].includes(e.key)) {\n\t\t\te.preventDefault();\n\t\t\tthis.inc(e.key == 'ArrowUp' ? this.increment : -this.increment);\n\t\t\tthis._dispatchChangeEvent();\n\t\t}\n\t}\n\n\t_onInput = (e: InputEvent) => {\n\t\tif (/^-?(0|[1-9]\\d*)([,.]\\d*)?$/.test(this.input.value)) {\n\t\t\tthis.value = parseFloat(this.input.value.replace(',', '.'));\n\t\t} else if (this.input.value == '') {\n\t\t\tthis.value = null;\n\t\t} else {\n\t\t\tconst s = this.input.selectionStart - (e.data?.length || 0);\n\t\t\tthis.input.value = this.formattedValue;\n\t\t\tthis.input.selectionStart = this.input.selectionEnd = s;\n\t\t}\n\n\t\tif (this.input.value != this._lastInputValue) {\n\t\t\tthis._lastInputValue = this.input.value;\n\t\t\tthis.dispatchEvent(new InputEvent('input', e));\n\t\t}\n\t}\n\n\t_onFocus = () => {\n\t\tthis._lastValue = this.value;\n\t\tthis.editing = true;\n\t};\n\n\t_onBlur = () => {\n\t\tthis.editing = false;\n\t\tthis._dispatchChangeEvent();\n\t};\n\n\t_onButtonClick = (e: MouseEvent) => {\n\t\te.stopPropagation();\n\t\tthis.inc(parseFloat((e.target as HTMLElement).dataset.increment));\n\t\tthis._dispatchChangeEvent();\n\t}\n\n\trender = () => html`\n\t\t<div>\n\t\t\t${this.hasButtons ? html`\n\t\t\t\t<og-button\n\t\t\t\t\ttext=\"-\"\n\t\t\t\t\tdata-increment=\"${-this.increment}\"\n\t\t\t\t\t@click=\"${this._onButtonClick}\"\n\t\t\t\t\t@focus=\"${(e: Event) => e.stopPropagation()}\">\n\t\t\t\t</og-button>\n\t\t\t` : null}\n\n\t\t\t<input\n\t\t\t\ttype=\"text\"\n\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t.value=\"${this.formattedValue}\"\n\t\t\t\t@focus=\"${this._onFocus}\"\n\t\t\t\t@blur=\"${this._onBlur}\"\n\t\t\t\t@input=\"${this._onInput}\"\n\t\t\t\t@keydown=\"${this._onKeyDown}\">\n\n\t\t\t${this.hasButtons ? html`\n\t\t\t\t<og-button\n\t\t\t\t\ttext=\"+\"\n\t\t\t\t\tdata-increment=\"${this.increment}\"\n\t\t\t\t\t@click=\"${this._onButtonClick}\"\n\t\t\t\t\t@focus=\"${(e: Event) => e.stopPropagation()}\">\n\t\t\t\t</og-button>\n\t\t\t` : null}\n\t\t</div>\n\t`;\n\t\n}"]}
1
+ {"version":3,"file":"numericInput.js","sourceRoot":"","sources":["../../src/ui/numericInput.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { getLocale } from '@omegagrid/localize';\nimport constants from '../constants';\nimport { numbers } from '../common';\nimport { style } from './numericInput.style';\n\n@customElement(`og-numericinput`)\nexport class NumericInput extends LitElement {\n\n\tstatic styles = style;\n\n\t@property({type: String})\n\tformat = constants.DEFAULT_NUMBER_FORMAT;\n\n\t@property({type: Number})\n\tvalue: number;\n\n\t@property({type: Number})\n\tmin: number;\n\n\t@property({type: Number})\n\tmax: number;\n\n\t@property({type: String})\n\tlocale = getLocale();\n\n\t@property({type: Boolean})\n\tdisabled = false;\n\n\t@property({type: Boolean})\n\tbuttons = false;\n\n\t@property({type: Number})\n\tincrement = 1;\n\n\t@query('input')\n\tinput: HTMLInputElement;\n\n\t@state()\n\tediting = false;\n\n\tprivate _lastInputValue: string;\n\tprivate _lastValue: number;\n\n\tprivate _formatter: numbers.NumberFormatterFunction;\n\tget formatter() {\n\t\tif (!this._formatter) this._formatter = numbers.getNumberFormatter(this.locale, this.format);\n\t\treturn this._formatter;\n\t}\n\n\tprivate _editingFormatter: numbers.NumberFormatterFunction;\n\tget editingFormatter() {\n\t\tif (!this._editingFormatter) {\n\t\t\tthis._editingFormatter = Intl.NumberFormat(this.locale, {useGrouping: false, maximumFractionDigits: 20}).format;\n\t\t}\n\t\treturn this._editingFormatter;\n\t}\n\n\tget formattedValue() {\n\t\treturn this.value == null ? '' : (this.editing\n\t\t\t? this.editingFormatter(this.value)\n\t\t\t: this.formatter(this.value)\n\t\t);\n\t}\n\n\tget hasButtons() { return this.buttons && !this.disabled }\n\n\tresetFormatters() {\n\t\tthis._formatter = null;\n\t\tthis._editingFormatter = null;\n\t}\n\t\n\twillUpdate(props: Map<PropertyKey, unknown>) {\n\t\tif (props.has('locale') || props.has('format')) {\n\t\t\tthis.resetFormatters();\n\t\t}\n\n\t\tif (props.has('value')) {\n\t\t\tif (!this.isValidNumber(this.value)) {\n\t\t\t\tthis.value = props.get('value') as number;\n\t\t\t}\n\t\t}\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.tabIndex = 1;\n\t}\n\n\tfocus() {\n\t\tthis.input?.focus();\n\t}\n\n\tinc(value: number = this.increment) {\n\t\tconst v = (this.value || 0) + value;\n\t\tif (this.isValidNumber(v)) this.value = v;\n\t}\n\n\tprivate _dispatchChangeEvent() {\n\t\tif (this.value != this._lastValue) {\n\t\t\tthis._lastValue = this.value;\n\t\t\tthis.dispatchEvent(new Event('change'));\n\t\t}\n\t}\n\n\tprivate isValidNumber(value: number) {\n\t\treturn (this.min == null || value >= this.min) && (this.max == null || value <= this.max);\n\t}\n\n\t_onKeyDown = (e: KeyboardEvent) => {\n\t\tif (['ArrowUp', 'ArrowDown'].includes(e.key)) {\n\t\t\te.preventDefault();\n\t\t\tthis.inc(e.key == 'ArrowUp' ? this.increment : -this.increment);\n\t\t\tthis._dispatchChangeEvent();\n\t\t}\n\t}\n\n\t_onInput = (e: InputEvent) => {\n\t\tif (/^-?(0|[1-9]\\d*)([,.]\\d*)?$/.test(this.input.value)) {\n\t\t\tthis.value = parseFloat(this.input.value.replace(',', '.'));\n\t\t} else if (this.input.value == '') {\n\t\t\tthis.value = null;\n\t\t} else {\n\t\t\tconst s = this.input.selectionStart - (e.data?.length || 0);\n\t\t\tthis.input.value = this.formattedValue;\n\t\t\tthis.input.selectionStart = this.input.selectionEnd = s;\n\t\t}\n\n\t\tif (this.input.value != this._lastInputValue) {\n\t\t\tthis._lastInputValue = this.input.value;\n\t\t\tthis.dispatchEvent(new InputEvent('input', e));\n\t\t}\n\t}\n\n\t_onFocus = () => {\n\t\tthis._lastValue = this.value;\n\t\tthis.editing = true;\n\t};\n\n\t_onBlur = () => {\n\t\tthis.editing = false;\n\t\tthis._dispatchChangeEvent();\n\t};\n\n\t_onButtonClick = (e: MouseEvent) => {\n\t\te.stopPropagation();\n\t\tthis.inc(parseFloat((e.target as HTMLElement).dataset.increment));\n\t\tthis._dispatchChangeEvent();\n\t}\n\n\trender = () => html`\n\t\t<div>\n\t\t\t${this.hasButtons ? html`\n\t\t\t\t<og-button\n\t\t\t\t\ticon=\"minus\"\n\t\t\t\t\tdata-increment=\"${-this.increment}\"\n\t\t\t\t\t@click=\"${this._onButtonClick}\"\n\t\t\t\t\t@focus=\"${(e: Event) => e.stopPropagation()}\">\n\t\t\t\t</og-button>\n\t\t\t` : null}\n\n\t\t\t<input\n\t\t\t\ttype=\"text\"\n\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t.value=\"${this.formattedValue}\"\n\t\t\t\t@focus=\"${this._onFocus}\"\n\t\t\t\t@blur=\"${this._onBlur}\"\n\t\t\t\t@input=\"${this._onInput}\"\n\t\t\t\t@keydown=\"${this._onKeyDown}\">\n\n\t\t\t${this.hasButtons ? html`\n\t\t\t\t<og-button\n\t\t\t\t\ticon=\"plus\"\n\t\t\t\t\tdata-increment=\"${this.increment}\"\n\t\t\t\t\t@click=\"${this._onButtonClick}\"\n\t\t\t\t\t@focus=\"${(e: Event) => e.stopPropagation()}\">\n\t\t\t\t</og-button>\n\t\t\t` : null}\n\t\t</div>\n\t`;\n\t\n}"]}
@@ -1 +1 @@
1
- {"version":3,"file":"numericInput.style.d.ts","sourceRoot":"","sources":["../../src/ui/numericInput.style.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,2BAuBhB,CAAC"}
1
+ {"version":3,"file":"numericInput.style.d.ts","sourceRoot":"","sources":["../../src/ui/numericInput.style.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,2BAyBhB,CAAC"}
@@ -22,6 +22,8 @@ export const style = [inputStyle, css `
22
22
  padding-right: 0;
23
23
  border-radius: 0;
24
24
  user-select: none;
25
+ height: 100%;
26
+ font-size: 10px;
25
27
  }
26
28
  `];
27
29
  //# sourceMappingURL=numericInput.style.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"numericInput.style.js","sourceRoot":"","sources":["../../src/ui/numericInput.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC;AAEpD,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,UAAU,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;CAuBpC,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\nimport { style as inputStyle } from './input.style';\n\nexport const style = [inputStyle, css`\n\t:host {\n\t\ttext-align: right;\n\t\toverflow: hidden;\n\t}\n\n\t:host > div {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\ttext-align: inherit;\n\t}\n\n\tog-button {\n\t\tborder: none;\n\t\ttext-align: center;\n\t\twidth: 16px;\n\t\tpadding-left: 0;\n\t\tpadding-right: 0;\n\t\tborder-radius: 0;\n\t\tuser-select: none;\n\t}\n`];\n"]}
1
+ {"version":3,"file":"numericInput.style.js","sourceRoot":"","sources":["../../src/ui/numericInput.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC;AAEpD,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,UAAU,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;CAyBpC,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\nimport { style as inputStyle } from './input.style';\n\nexport const style = [inputStyle, css`\n\t:host {\n\t\ttext-align: right;\n\t\toverflow: hidden;\n\t}\n\n\t:host > div {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\ttext-align: inherit;\n\t}\n\n\tog-button {\n\t\tborder: none;\n\t\ttext-align: center;\n\t\twidth: 16px;\n\t\tpadding-left: 0;\n\t\tpadding-right: 0;\n\t\tborder-radius: 0;\n\t\tuser-select: none;\n\t\theight: 100%;\n\t\tfont-size: 10px;\n\t}\n`];\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@omegagrid/core",
3
- "version": "0.7.14",
3
+ "version": "0.8.1",
4
4
  "license": "UNLICENSED",
5
5
  "description": "Core components",
6
6
  "main": "./dist/index.js",
@@ -36,7 +36,7 @@
36
36
  },
37
37
  "dependencies": {
38
38
  "@fortawesome/fontawesome-svg-core": "^7.0.1",
39
- "@omegagrid/localize": "^0.7.14",
39
+ "@omegagrid/localize": "^0.8.1",
40
40
  "color": "^4.2.3",
41
41
  "date-fns": "^3.2.0",
42
42
  "lit": "^3.1.1",