@omegagrid/form 0.9.38 → 0.9.39

package/dist/constants.d.ts

@@ -43,7 +43,9 @@ declare const _default: {
     BUTTON_HEIGHT: number;
     FONT_SIZE: number;
     FLOATING_WINDOW_MAX_WIDTH: number;
-    FORM_CONTROL_HEIGHT: number;
+    DEFAULT_FORM_CELL_PADDING: number;
+    DEFAULT_FORM_ROW_HEIGHT: number;
+    DEFAULT_FORM_LINE_HEIGHT: number;
     BUTTON_CONFIG: Map<FormButtonType, FormButtonConfig>;
 };
 export default _default;

package/dist/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAE3D,wBAUC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAE3D,wBAYC"}

package/dist/constants.js

@@ -1,6 +1,8 @@
 import { constants as coreConstants, ColorTypes } from '@omegagrid/core';
 export default {
-    FORM_CONTROL_HEIGHT: 20,
+    DEFAULT_FORM_CELL_PADDING: 2,
+    DEFAULT_FORM_ROW_HEIGHT: 24,
+    DEFAULT_FORM_LINE_HEIGHT: 22,
     BUTTON_CONFIG: new Map([
         ['save', { text: 'Save', color: ColorTypes.Accent, default: true }],
         ['reset', { text: 'Reset', color: ColorTypes.Gray }],

package/dist/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,aAAa,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGzE,eAAe;IACd,mBAAmB,EAAE,EAAE;IACvB,aAAa,EAAE,IAAI,GAAG,CAAmC;QACxD,CAAC,MAAM,EAAE,EAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;QACjE,CAAC,OAAO,EAAE,EAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,IAAI,EAAC,CAAC;QAClD,CAAC,UAAU,EAAE,EAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,CAAC,IAAI,EAAC,CAAC;QACxD,CAAC,QAAQ,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,IAAI,EAAC,CAAC;QACpD,CAAC,OAAO,EAAE,EAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,IAAI,EAAC,CAAC;KAClD,CAAC;IACF,GAAG,aAAa;CAChB,CAAA","sourcesContent":["import { constants as coreConstants, ColorTypes } from '@omegagrid/core';\nimport { FormButtonConfig, FormButtonType } from './types';\n\nexport default {\n\tFORM_CONTROL_HEIGHT: 20,\n\tBUTTON_CONFIG: new Map<FormButtonType, FormButtonConfig>([\n\t\t['save', {text: 'Save', color: ColorTypes.Accent, default: true}],\n\t\t['reset', {text: 'Reset', color: ColorTypes.Gray}],\n\t\t['validate', {text: 'Validate', color: ColorTypes.Gray}],\n\t\t['storno', {text: 'Storno', color: ColorTypes.Gray}],\n\t\t['close', {text: 'Close', color: ColorTypes.Gray}]\n\t]),\n\t...coreConstants\n}"]}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,aAAa,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGzE,eAAe;IACd,yBAAyB,EAAE,CAAC;IAC5B,uBAAuB,EAAE,EAAE;IAC3B,wBAAwB,EAAE,EAAE;IAC5B,aAAa,EAAE,IAAI,GAAG,CAAmC;QACxD,CAAC,MAAM,EAAE,EAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;QACjE,CAAC,OAAO,EAAE,EAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,IAAI,EAAC,CAAC;QAClD,CAAC,UAAU,EAAE,EAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,CAAC,IAAI,EAAC,CAAC;QACxD,CAAC,QAAQ,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,IAAI,EAAC,CAAC;QACpD,CAAC,OAAO,EAAE,EAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,IAAI,EAAC,CAAC;KAClD,CAAC;IACF,GAAG,aAAa;CAChB,CAAA","sourcesContent":["import { constants as coreConstants, ColorTypes } from '@omegagrid/core';\nimport { FormButtonConfig, FormButtonType } from './types';\n\nexport default {\n\tDEFAULT_FORM_CELL_PADDING: 2,\n\tDEFAULT_FORM_ROW_HEIGHT: 24,\n\tDEFAULT_FORM_LINE_HEIGHT: 22,\n\tBUTTON_CONFIG: new Map<FormButtonType, FormButtonConfig>([\n\t\t['save', {text: 'Save', color: ColorTypes.Accent, default: true}],\n\t\t['reset', {text: 'Reset', color: ColorTypes.Gray}],\n\t\t['validate', {text: 'Validate', color: ColorTypes.Gray}],\n\t\t['storno', {text: 'Storno', color: ColorTypes.Gray}],\n\t\t['close', {text: 'Close', color: ColorTypes.Gray}]\n\t]),\n\t...coreConstants\n}"]}

package/dist/ui/controls/calendarDateInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calendarDateInput.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/calendarDateInput.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAS,MAAM,EAAS,MAAM,iBAAiB,CAAC;AAGvD,qBACa,iBAAkB,SAAQ,WAAW,CAAC,IAAI,GAAC,MAAM,CAAC;IAE9D,MAAM,CAAC,MAAM,4BAA2B;IAExC,IAAI,cAAc,sBAUjB;IAED,SAAS,GAAI,GAAG,MAAM,CAAC,WAAW,UAEjC;IAED,IAAI,IAAI,SASP;IAED,MAAM,6CAaJ;CAEF"}
+{"version":3,"file":"calendarDateInput.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/calendarDateInput.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAS,MAAM,EAAS,MAAM,iBAAiB,CAAC;AAGvD,qBACa,iBAAkB,SAAQ,WAAW,CAAC,IAAI,GAAC,MAAM,CAAC;IAE9D,MAAM,CAAC,MAAM,4BAIV;IAEH,IAAI,cAAc,sBAUjB;IAED,SAAS,GAAI,GAAG,MAAM,CAAC,WAAW,UAEjC;IAED,IAAI,IAAI,SASP;IAED,MAAM,6CAaJ;CAEF"}

package/dist/ui/controls/calendarDateInput.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html } from "lit";
+import { css, html } from "lit";
 import { customElement } from "lit/decorators.js";
 import { BaseControl } from "./baseControl";
 import { dates, utils } from "@omegagrid/core";
@@ -55,7 +55,11 @@ let CalendarDateInput = class CalendarDateInput extends BaseControl {
         }
     }
 };
-CalendarDateInput.styles = [...BaseControl.styles];
+CalendarDateInput.styles = [...BaseControl.styles, css `
+		og-calendar-dropdown {
+			height: 100%;
+		}	
+	`];
 CalendarDateInput = __decorate([
     customElement('og-form-calendardateinput')
 ], CalendarDateInput);

package/dist/ui/controls/calendarDateInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendarDateInput.js","sourceRoot":"","sources":["../../../src/ui/controls/calendarDateInput.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,EAAE,KAAK,EAAU,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAGzC,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,WAAwB;IAAxD;;QAgBN,cAAS,GAAG,CAAC,CAAqB,EAAE,EAAE;YACrC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC,CAAA;QAaD,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;cAEN,IAAI,CAAC,SAAS;eACb;YACX,UAAU,EAAE,QAAQ;YACpB,SAAS,EAAE,IAAI;YACf,UAAU,EAAE,IAAI;SAChB;aACS,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ;aAC1B,IAAI,CAAC,IAAI;eACP,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO;mBACpB,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW;;EAE7C,CAAC;IAEH,CAAC;IA1CA,IAAI,cAAc;QACjB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAC;QAC7B,IAAI,IAAI,CAAC,KAAK,YAAY,IAAI,EAAE,CAAC;YAChC,IAAI,CAAC,KAAK,GAAG;gBACZ,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE;gBACxB,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;gBACvD,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;aAChD,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACZ,CAAC;QACD,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAsB,CAAC;IAClD,CAAC;IAMD,IAAI,IAAI;QACP,IAAI,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YAChC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,KAAe,EAAE,SAAS,EAAE,CAAC,CAAC;YAC/C,OAAO,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC7B,CAAC;aAAM,IAAI,IAAI,CAAC,KAAK,YAAY,IAAI,EAAE,CAAC;YACvC,OAAO,IAAI,CAAC,KAAK,CAAC;QACnB,CAAC;aAAM,CAAC;YACP,OAAO,IAAI,CAAC;QACb,CAAC;IACF,CAAC;;AA3BM,wBAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,CAAC,AAA1B,CAA2B;AAF5B,iBAAiB;IAD7B,aAAa,CAAC,2BAA2B,CAAC;GAC9B,iBAAiB,CA8C7B","sourcesContent":["import { html } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\nimport { BaseControl } from \"./baseControl\";\nimport { SerializedValue } from \"@omegagrid/tree\";\nimport { dates, events, utils } from \"@omegagrid/core\";\nimport { getLocale } from \"@omegagrid/localize\";\n\n@customElement('og-form-calendardateinput')\nexport class CalendarDateInput extends BaseControl<Date|string> {\n\n\tstatic styles = [...BaseControl.styles];\n\n\tget formattedValue() {\n\t\tif (!this.value) return null;\n\t\tif (this.value instanceof Date) {\n\t\t\tthis.value = [\n\t\t\t\tthis.value.getFullYear(),\n\t\t\t\t(this.value.getMonth() + 1).toString().padStart(2, '0'),\n\t\t\t\tthis.value.getDate().toString().padStart(2, '0')\n\t\t\t].join('');\n\t\t} \n\t\treturn [[this.value, 0, 1]] as SerializedValue[];\n\t}\n\n\t_onChange = (e: events.ChangeEvent) => {\n\t\tthis.updateValue(e.value);\n\t}\n\n\tget date() {\n\t\tif (utils.isString(this.value)) {\n\t\t\tdates.parse(this.value as string, getLocale());\n\t\t\treturn new Date(this.value);\n\t\t} else if (this.value instanceof Date) {\n\t\t\treturn this.value;\n\t\t} else {\n\t\t\treturn null;\n\t\t}\n\t}\n\n\trender = () => html`\n\t\t<og-calendar-dropdown\n\t\t\t@change=\"${this._onChange}\"\n\t\t\t.options=\"${{\n\t\t\t\tselectMode: 'single', \n\t\t\t\tautoClose: true, \n\t\t\t\tallowEmpty: true\n\t\t\t}}\"\n\t\t\t?cross=\"${!this.model.props.required}\"\n\t\t\t.value=\"${this.date}\"\n\t\t\t.caption=\"${this.model.props.caption}\"\n\t\t\t.placeholder=\"${this.model.props.placeholder}\">\n\t\t</og-calendar-dropdown>\n\t`;\n\t\n}"]}
+{"version":3,"file":"calendarDateInput.js","sourceRoot":"","sources":["../../../src/ui/controls/calendarDateInput.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,EAAE,KAAK,EAAU,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAGzC,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,WAAwB;IAAxD;;QAoBN,cAAS,GAAG,CAAC,CAAqB,EAAE,EAAE;YACrC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC,CAAA;QAaD,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;cAEN,IAAI,CAAC,SAAS;eACb;YACX,UAAU,EAAE,QAAQ;YACpB,SAAS,EAAE,IAAI;YACf,UAAU,EAAE,IAAI;SAChB;aACS,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ;aAC1B,IAAI,CAAC,IAAI;eACP,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO;mBACpB,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW;;EAE7C,CAAC;IAEH,CAAC;IA1CA,IAAI,cAAc;QACjB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAC;QAC7B,IAAI,IAAI,CAAC,KAAK,YAAY,IAAI,EAAE,CAAC;YAChC,IAAI,CAAC,KAAK,GAAG;gBACZ,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE;gBACxB,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;gBACvD,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;aAChD,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACZ,CAAC;QACD,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAsB,CAAC;IAClD,CAAC;IAMD,IAAI,IAAI;QACP,IAAI,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YAChC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,KAAe,EAAE,SAAS,EAAE,CAAC,CAAC;YAC/C,OAAO,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC7B,CAAC;aAAM,IAAI,IAAI,CAAC,KAAK,YAAY,IAAI,EAAE,CAAC;YACvC,OAAO,IAAI,CAAC,KAAK,CAAC;QACnB,CAAC;aAAM,CAAC;YACP,OAAO,IAAI,CAAC;QACb,CAAC;IACF,CAAC;;AA/BM,wBAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,GAAG,CAAA;;;;EAI1C,CAAC,AAJW,CAIV;AANS,iBAAiB;IAD7B,aAAa,CAAC,2BAA2B,CAAC;GAC9B,iBAAiB,CAkD7B","sourcesContent":["import { css, html } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\nimport { BaseControl } from \"./baseControl\";\nimport { SerializedValue } from \"@omegagrid/tree\";\nimport { dates, events, utils } from \"@omegagrid/core\";\nimport { getLocale } from \"@omegagrid/localize\";\n\n@customElement('og-form-calendardateinput')\nexport class CalendarDateInput extends BaseControl<Date|string> {\n\n\tstatic styles = [...BaseControl.styles, css`\n\t\tog-calendar-dropdown {\n\t\t\theight: 100%;\n\t\t}\t\n\t`];\n\n\tget formattedValue() {\n\t\tif (!this.value) return null;\n\t\tif (this.value instanceof Date) {\n\t\t\tthis.value = [\n\t\t\t\tthis.value.getFullYear(),\n\t\t\t\t(this.value.getMonth() + 1).toString().padStart(2, '0'),\n\t\t\t\tthis.value.getDate().toString().padStart(2, '0')\n\t\t\t].join('');\n\t\t} \n\t\treturn [[this.value, 0, 1]] as SerializedValue[];\n\t}\n\n\t_onChange = (e: events.ChangeEvent) => {\n\t\tthis.updateValue(e.value);\n\t}\n\n\tget date() {\n\t\tif (utils.isString(this.value)) {\n\t\t\tdates.parse(this.value as string, getLocale());\n\t\t\treturn new Date(this.value);\n\t\t} else if (this.value instanceof Date) {\n\t\t\treturn this.value;\n\t\t} else {\n\t\t\treturn null;\n\t\t}\n\t}\n\n\trender = () => html`\n\t\t<og-calendar-dropdown\n\t\t\t@change=\"${this._onChange}\"\n\t\t\t.options=\"${{\n\t\t\t\tselectMode: 'single', \n\t\t\t\tautoClose: true, \n\t\t\t\tallowEmpty: true\n\t\t\t}}\"\n\t\t\t?cross=\"${!this.model.props.required}\"\n\t\t\t.value=\"${this.date}\"\n\t\t\t.caption=\"${this.model.props.caption}\"\n\t\t\t.placeholder=\"${this.model.props.placeholder}\">\n\t\t</og-calendar-dropdown>\n\t`;\n\t\n}"]}

package/dist/ui/controls/checkbox.d.ts

@@ -1,5 +1,6 @@
 import { BaseControl } from "./baseControl";
 export declare class FormCheckbox extends BaseControl<boolean> {
+    static styles: import("lit").CSSResult[];
     get isValid(): boolean;
     constructor();
     render: () => import("lit-html").TemplateResult<1>;

package/dist/ui/controls/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/checkbox.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,qBACa,YAAa,SAAQ,WAAW,CAAC,OAAO,CAAC;IAErD,IAAI,OAAO,YAAkB;;IAU7B,MAAM,6CAEJ;CAEF"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/checkbox.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,qBACa,YAAa,SAAQ,WAAW,CAAC,OAAO,CAAC;IAErD,MAAM,CAAC,MAAM,4BAUV;IAEH,IAAI,OAAO,YAAkB;;IAU7B,MAAM,6CAEJ;CAEF"}

package/dist/ui/controls/checkbox.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html } from "lit";
+import { css, html } from "lit";
 import { customElement } from "lit/decorators.js";
 import { BaseControl } from "./baseControl";
 let FormCheckbox = class FormCheckbox extends BaseControl {
@@ -20,6 +20,17 @@ let FormCheckbox = class FormCheckbox extends BaseControl {
         });
     }
 };
+FormCheckbox.styles = [...BaseControl.styles, css `
+		:host {
+			display: inline-flex;
+			align-items: center;
+			height: 100%;
+		}
+		
+		og-checkbox {
+			cursor: pointer;
+		}
+	`];
 FormCheckbox = __decorate([
     customElement('og-form-checkbox')
 ], FormCheckbox);

package/dist/ui/controls/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/ui/controls/checkbox.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAGrC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAoB;IAErD,IAAI,OAAO,KAAK,OAAO,IAAI,CAAA,CAAC,CAAC;IAE7B;QACC,KAAK,EAAE,CAAC;QAOT,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;yBACK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM;EACtD,CAAC;QARD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;YACnC,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC9B,IAAI,CAAC,aAAa,EAAE,CAAC;QACtB,CAAC,CAAC,CAAC;IACJ,CAAC;CAMD,CAAA;AAhBY,YAAY;IADxB,aAAa,CAAC,kBAAkB,CAAC;GACrB,YAAY,CAgBxB","sourcesContent":["import { html } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\nimport { BaseControl } from \"./baseControl\";\n\n@customElement('og-form-checkbox')\nexport class FormCheckbox extends BaseControl<boolean> {\n\n\tget isValid() { return true }\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.addEventListener('click', () => {\n\t\t\tthis.updateValue(!this.value);\n\t\t\tthis.requestUpdate();\n\t\t});\n\t}\n\n\trender = () => html`\n\t\t<og-checkbox .value=\"${this.value ? 'checked' : 'none'}\"></og-checkbox>\n\t`;\n\t\n}"]}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/ui/controls/checkbox.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAGrC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAoB;IAcrD,IAAI,OAAO,KAAK,OAAO,IAAI,CAAA,CAAC,CAAC;IAE7B;QACC,KAAK,EAAE,CAAC;QAOT,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;yBACK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM;EACtD,CAAC;QARD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;YACnC,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC9B,IAAI,CAAC,aAAa,EAAE,CAAC;QACtB,CAAC,CAAC,CAAC;IACJ,CAAC;;AApBM,mBAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,GAAG,CAAA;;;;;;;;;;EAU1C,CAAC,AAVW,CAUV;AAZS,YAAY;IADxB,aAAa,CAAC,kBAAkB,CAAC;GACrB,YAAY,CA4BxB","sourcesContent":["import { css, html } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\nimport { BaseControl } from \"./baseControl\";\n\n@customElement('og-form-checkbox')\nexport class FormCheckbox extends BaseControl<boolean> {\n\n\tstatic styles = [...BaseControl.styles, css`\n\t\t:host {\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: center;\n\t\t\theight: 100%;\n\t\t}\n\t\t\n\t\tog-checkbox {\n\t\t\tcursor: pointer;\n\t\t}\n\t`];\n\n\tget isValid() { return true }\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.addEventListener('click', () => {\n\t\t\tthis.updateValue(!this.value);\n\t\t\tthis.requestUpdate();\n\t\t});\n\t}\n\n\trender = () => html`\n\t\t<og-checkbox .value=\"${this.value ? 'checked' : 'none'}\"></og-checkbox>\n\t`;\n\t\n}"]}

package/dist/ui/controls/dateInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dateInput.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/dateInput.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI9E,qBACa,aAAc,SAAQ,WAAW,CAAC,IAAI,GAAC,MAAM,CAAC;;IAE1D,MAAM,CAAC,MAAM,4BAA2B;IAGxC,IAAI,WAAW,oBAA8F;IAE7G,IAAI,SAAS,sBAeZ;IAED,SAAS,GAAI,GAAG,SAAS,UASxB;IAED,MAAM,6CAcJ;CAEF"}
+{"version":3,"file":"dateInput.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/dateInput.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI9E,qBACa,aAAc,SAAQ,WAAW,CAAC,IAAI,GAAC,MAAM,CAAC;;IAE1D,MAAM,CAAC,MAAM,4BAIV;IAGH,IAAI,WAAW,oBAA8F;IAE7G,IAAI,SAAS,sBAeZ;IAED,SAAS,GAAI,GAAG,SAAS,UASxB;IAED,MAAM,6CAcJ;CAEF"}

package/dist/ui/controls/dateInput.js

@@ -16,7 +16,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
 var _FormDateInput_adapter;
-import { html } from "lit";
+import { css, html } from "lit";
 import { customElement } from "lit/decorators.js";
 import { BaseControl } from "./baseControl";
 import { DateTreeAdapter } from "@omegagrid/tree";
@@ -68,7 +68,11 @@ let FormDateInput = class FormDateInput extends BaseControl {
     }
 };
 _FormDateInput_adapter = new WeakMap();
-FormDateInput.styles = [...BaseControl.styles];
+FormDateInput.styles = [...BaseControl.styles, css `
+		og-tree-dropdown {
+			height: 100%;
+		}	
+	`];
 FormDateInput = __decorate([
     customElement('og-form-dateinput')
 ], FormDateInput);

package/dist/ui/controls/dateInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"dateInput.js","sourceRoot":"","sources":["../../../src/ui/controls/dateInput.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\nimport { BaseControl } from \"./baseControl\";\nimport { DateTreeAdapter, SerializedValue, TreeEvent } from \"@omegagrid/tree\";\nimport { dates } from \"@omegagrid/core\";\nimport { getLocale } from \"@omegagrid/localize\";\n\n@customElement('og-form-dateinput')\nexport class FormDateInput extends BaseControl<Date|string> {\n\n\tstatic styles = [...BaseControl.styles];\n\n\t#adapter: DateTreeAdapter;\n\tget dateAdapter() { return this.#adapter ?? (this.#adapter = new DateTreeAdapter(this.model.props.options)) }\n\n\tget treeValue() {\n\t\tif (!this.value) return null;\n\t\tlet date: Date;\n\t\tif (this.value instanceof Date) {\n\t\t\tdate = this.value;\n\t\t\tthis.value = [\n\t\t\t\tthis.value.getFullYear(),\n\t\t\t\t(this.value.getMonth() + 1).toString().padStart(2, '0'),\n\t\t\t\tthis.value.getDate().toString().padStart(2, '0')\n\t\t\t].join('-');\n\t\t} else {\n\t\t\tdate = dates.parse(this.value as string, getLocale());\n\t\t}\n\n\t\treturn [[this.value, 0, 1, {value: dates.getDateFormatter(getLocale())(date)}]] as SerializedValue[];\n\t}\n\n\t_onChange = (e: TreeEvent) => {\n\t\tif (!e.node) return;\n\t\tconst strDate = e.node.key;\n\t\tthis.updateValue(new Date(\n\t\t\tparseInt(strDate.substring(0, 4)), \n\t\t\tparseInt(strDate.substring(4, 6)) - 1, \n\t\t\tparseInt(strDate.substring(6, 8)),\n\t\t\t0, 0, 0\n\t\t));\n\t}\n\n\trender = () => html`\n\t\t<og-tree-dropdown\n\t\t\t@change=\"${this._onChange}\"\n\t\t\t.adapter=\"${this.dateAdapter}\"\n\t\t\t.options=\"${{\n\t\t\t\tselectMode: 'single', \n\t\t\t\tautoClose: true, \n\t\t\t\tallowEmpty: true\n\t\t\t}}\"\n\t\t\t?cross=\"${!this.model.props.required}\"\n\t\t\t.value=\"${this.treeValue}\"\n\t\t\t.caption=\"${this.model.props.caption}\"\n\t\t\t.placeholder=\"${this.model.props.placeholder}\">\n\t\t</og-tree-dropdown>\n\t`;\n\t\n}"]}
+{"version":3,"file":"dateInput.js","sourceRoot":"","sources":["../../../src/ui/controls/dateInput.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\nimport { BaseControl } from \"./baseControl\";\nimport { DateTreeAdapter, SerializedValue, TreeEvent } from \"@omegagrid/tree\";\nimport { dates } from \"@omegagrid/core\";\nimport { getLocale } from \"@omegagrid/localize\";\n\n@customElement('og-form-dateinput')\nexport class FormDateInput extends BaseControl<Date|string> {\n\n\tstatic styles = [...BaseControl.styles, css`\n\t\tog-tree-dropdown {\n\t\t\theight: 100%;\n\t\t}\t\n\t`];\n\n\t#adapter: DateTreeAdapter;\n\tget dateAdapter() { return this.#adapter ?? (this.#adapter = new DateTreeAdapter(this.model.props.options)) }\n\n\tget treeValue() {\n\t\tif (!this.value) return null;\n\t\tlet date: Date;\n\t\tif (this.value instanceof Date) {\n\t\t\tdate = this.value;\n\t\t\tthis.value = [\n\t\t\t\tthis.value.getFullYear(),\n\t\t\t\t(this.value.getMonth() + 1).toString().padStart(2, '0'),\n\t\t\t\tthis.value.getDate().toString().padStart(2, '0')\n\t\t\t].join('-');\n\t\t} else {\n\t\t\tdate = dates.parse(this.value as string, getLocale());\n\t\t}\n\n\t\treturn [[this.value, 0, 1, {value: dates.getDateFormatter(getLocale())(date)}]] as SerializedValue[];\n\t}\n\n\t_onChange = (e: TreeEvent) => {\n\t\tif (!e.node) return;\n\t\tconst strDate = e.node.key;\n\t\tthis.updateValue(new Date(\n\t\t\tparseInt(strDate.substring(0, 4)), \n\t\t\tparseInt(strDate.substring(4, 6)) - 1, \n\t\t\tparseInt(strDate.substring(6, 8)),\n\t\t\t0, 0, 0\n\t\t));\n\t}\n\n\trender = () => html`\n\t\t<og-tree-dropdown\n\t\t\t@change=\"${this._onChange}\"\n\t\t\t.adapter=\"${this.dateAdapter}\"\n\t\t\t.options=\"${{\n\t\t\t\tselectMode: 'single', \n\t\t\t\tautoClose: true, \n\t\t\t\tallowEmpty: true\n\t\t\t}}\"\n\t\t\t?cross=\"${!this.model.props.required}\"\n\t\t\t.value=\"${this.treeValue}\"\n\t\t\t.caption=\"${this.model.props.caption}\"\n\t\t\t.placeholder=\"${this.model.props.placeholder}\">\n\t\t</og-tree-dropdown>\n\t`;\n\t\n}"]}

package/dist/ui/controls/label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/label.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,qBACa,SAAU,SAAQ,WAAW,CAAC,MAAM,CAAC;IAEjD,MAAM,CAAC,MAAM,4BAuBV;IAEH,MAAM,6CAMJ;CAEF"}
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/label.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,qBACa,SAAU,SAAQ,WAAW,CAAC,MAAM,CAAC;IAEjD,MAAM,CAAC,MAAM,4BAyBV;IAEH,MAAM,6CAMJ;CAEF"}

package/dist/ui/controls/label.js

@@ -24,10 +24,12 @@ FormLabel.styles = [...BaseControl.styles, css `
 		:host {
 			width: 100%;
 			border: none !important;
+			display: flex;
+			align-items: center;
+			flex-direction: row;
 		}
 
 		label {
-			display: block;
 			padding-right: 10px;
 			width: 100%;
 			text-align: right;

package/dist/ui/controls/label.js.map

@@ -1 +1 @@
-{"version":3,"file":"label.js","sourceRoot":"","sources":["../../../src/ui/controls/label.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAGrC,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,WAAmB;IAA3C;;QA2BN,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;UAEV,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG;YAClB,QAAQ,CAAC,EAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAC,CAAC;KACtD,IAAI,CAAC,KAAK;;EAEb,CAAC;IAEH,CAAC;;AAjCO,gBAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;EAuB1C,CAAC,AAvBW,CAuBV;AAzBS,SAAS;IADrB,aAAa,CAAC,eAAe,CAAC;GAClB,SAAS,CAmCrB","sourcesContent":["import { css, html } from \"lit\";\nimport { classMap } from \"lit-html/directives/class-map.js\";\nimport { customElement } from \"lit/decorators.js\";\nimport { BaseControl } from \"./baseControl\";\n\n@customElement('og-form-label')\nexport class FormLabel extends BaseControl<string> {\n\n\tstatic styles = [...BaseControl.styles, css`\n\t\t:host {\n\t\t\twidth: 100%;\n\t\t\tborder: none !important;\n\t\t}\n\n\t\tlabel {\n\t\t\tdisplay: block;\n\t\t\tpadding-right: 10px;\n\t\t\twidth: 100%;\n\t\t\ttext-align: right;\n\t\t\tcolor: var(--og-text-color);\n\t\t}\n\n\t\t/*label.required::after {\n\t\t\tcontent: '*';\n\t\t\tcolor: red;\n\t\t}\n\t\tlabel.required {\n\t\t\tfont-weight: bold;\n\t\t}\n\t\t*/\n\n\t`];\n\n\trender = () => html`\n\t\t<label\n\t\t\tfor=\"${this.model.props.for}\"\n\t\t\tclass=\"${classMap({required: this.model.props.required})}\">\n\t\t\t${this.value}\n\t\t</label>\n\t`;\n\t\n}"]}
+{"version":3,"file":"label.js","sourceRoot":"","sources":["../../../src/ui/controls/label.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAGrC,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,WAAmB;IAA3C;;QA6BN,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;UAEV,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG;YAClB,QAAQ,CAAC,EAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAC,CAAC;KACtD,IAAI,CAAC,KAAK;;EAEb,CAAC;IAEH,CAAC;;AAnCO,gBAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;EAyB1C,CAAC,AAzBW,CAyBV;AA3BS,SAAS;IADrB,aAAa,CAAC,eAAe,CAAC;GAClB,SAAS,CAqCrB","sourcesContent":["import { css, html } from \"lit\";\nimport { classMap } from \"lit-html/directives/class-map.js\";\nimport { customElement } from \"lit/decorators.js\";\nimport { BaseControl } from \"./baseControl\";\n\n@customElement('og-form-label')\nexport class FormLabel extends BaseControl<string> {\n\n\tstatic styles = [...BaseControl.styles, css`\n\t\t:host {\n\t\t\twidth: 100%;\n\t\t\tborder: none !important;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tflex-direction: row;\n\t\t}\n\n\t\tlabel {\n\t\t\tpadding-right: 10px;\n\t\t\twidth: 100%;\n\t\t\ttext-align: right;\n\t\t\tcolor: var(--og-text-color);\n\t\t}\n\n\t\t/*label.required::after {\n\t\t\tcontent: '*';\n\t\t\tcolor: red;\n\t\t}\n\t\tlabel.required {\n\t\t\tfont-weight: bold;\n\t\t}\n\t\t*/\n\n\t`];\n\n\trender = () => html`\n\t\t<label\n\t\t\tfor=\"${this.model.props.for}\"\n\t\t\tclass=\"${classMap({required: this.model.props.required})}\">\n\t\t\t${this.value}\n\t\t</label>\n\t`;\n\t\n}"]}

package/dist/ui/controls/list.d.ts

@@ -1,6 +1,7 @@
 import { BaseControl } from "./baseControl";
 import { TreeAdapter, SerializedValue, TreeDropdown, TreeEvent } from "@omegagrid/tree";
 export declare class FormList extends BaseControl<SerializedValue[] | string, TreeAdapter> {
+    static styles: import("lit").CSSResult[];
     dropdown: TreeDropdown;
     private _firstOpen;
     get isValid(): boolean;

package/dist/ui/controls/list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/list.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,SAAS,EAAuC,MAAM,iBAAiB,CAAC;AAE7H,qBACa,QAAS,SAAQ,WAAW,CAAC,eAAe,EAAE,GAAC,MAAM,EAAE,WAAW,CAAC;IAG/E,QAAQ,EAAE,YAAY,CAAC;IAEvB,OAAO,CAAC,UAAU,CAAQ;IAE1B,IAAI,OAAO,YAAkB;IAE7B,OAAO,CAAC,WAAW;IAInB,KAAK;IAQL,SAAS,GAAI,GAAG,SAAS,UAMxB;IAED,eAAe,aAGd;IAED,UAAU;IAIJ,UAAU;IAWV,OAAO;IAOb,MAAM,6CAUJ;CAEF"}
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/list.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,SAAS,EAAuC,MAAM,iBAAiB,CAAC;AAE7H,qBACa,QAAS,SAAQ,WAAW,CAAC,eAAe,EAAE,GAAC,MAAM,EAAE,WAAW,CAAC;IAE/E,MAAM,CAAC,MAAM,4BAIV;IAGH,QAAQ,EAAE,YAAY,CAAC;IAEvB,OAAO,CAAC,UAAU,CAAQ;IAE1B,IAAI,OAAO,YAAkB;IAE7B,OAAO,CAAC,WAAW;IAInB,KAAK;IAQL,SAAS,GAAI,GAAG,SAAS,UAMxB;IAED,eAAe,aAGd;IAED,UAAU;IAIJ,UAAU;IAWV,OAAO;IAOb,MAAM,6CAUJ;CAEF"}

package/dist/ui/controls/list.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html } from "lit";
+import { css, html } from "lit";
 import { customElement, query } from "lit/decorators.js";
 import { BaseControl } from "./baseControl";
 import { SelectMode } from "@omegagrid/tree";
@@ -68,6 +68,11 @@ let FormList = class FormList extends BaseControl {
         }
     }
 };
+FormList.styles = [...BaseControl.styles, css `
+		og-tree-dropdown {
+			height: 100%;
+		}	
+	`];
 __decorate([
     query('og-tree-dropdown')
 ], FormList.prototype, "dropdown", void 0);

package/dist/ui/controls/list.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.js","sourceRoot":"","sources":["../../../src/ui/controls/list.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from \"lit\";\nimport { customElement, query } from \"lit/decorators.js\";\nimport { BaseControl } from \"./baseControl\";\nimport { TreeAdapter, SerializedValue, TreeDropdown, TreeEvent, TreeSource, TreeOptions, SelectMode } from \"@omegagrid/tree\";\n\n@customElement('og-form-list')\nexport class FormList extends BaseControl<SerializedValue[]|string, TreeAdapter> {\n\n\t@query('og-tree-dropdown')\n\tdropdown: TreeDropdown;\n\n\tprivate _firstOpen = true;\n\n\tget isValid() { return true }\n\n\tprivate formatValue(value: unknown) {\n\t\treturn Array.isArray(value) ? value : (value == null ? null : [[value, 0, 1]]) as SerializedValue[];\n\t}\n\n\treset() {\n\t\tsuper.reset();\n\t\tif (this.dropdown) {\n\t\t\tthis.dropdown.value = null;\n\t\t\tthis.dropdown.value = this.formatValue(this.model.props.value);\n\t\t}\n\t}\n\n\t_onChange = (e: TreeEvent) => {\n\t\tconst values = e.component.selection.serialize(['v']);\n\t\tif (this.dropdown.tree.options.selectMode == SelectMode.Single)\n\t\t\tthis.updateValue(values.length > 0 ? values[0][0] : null, true);\n\t\telse\n\t\t\tthis.updateValue(values, true);\n\t}\n\n\t_onDropdownOpen = () => {\n\t\tif (this._firstOpen) this._firstOpen = false;\n\t\telse this.adapter?.attach(this.dropdown.tree);\n\t}\n\n\tgetAdapter() {\n\t\treturn this.adapter ?? this.formModel.options?.treeAdapter;\n\t}\n\n\tasync willUpdate() {\n\t\tif (this.value) {\n\t\t\tconst adapter = this.getAdapter();\n\t\t\tif (adapter) {\n\t\t\t\tconst [options] = await Promise.all([adapter.getOptions()]);\n\t\t\t\tif (options && options.selectMode == SelectMode.Single)\n\t\t\t\t\tthis.updateValue(Array.isArray(this.value) && this.value.length > 0 ? this.value[0][0] : this.value);\n\t\t\t}\n\t\t}\n\t}\n\n\tasync updated() {\n\t\tif (this.model.props.content) {\n\t\t\tconst content: {sourceData: TreeSource, options: TreeOptions} = this.model.props.content as {sourceData: TreeSource, options: TreeOptions};\n\t\t\tthis.dropdown.setSourceData(content.sourceData, content.options);\n\t\t}\n\t}\n\n\trender = () => html`\n\t\t<og-tree-dropdown \n\t\t\t@change=\"${this._onChange}\"\n\t\t\t@dropdown.open=\"${this._onDropdownOpen}\"\n\t\t\t?cross=\"${!this.model.props.required}\"\n\t\t\t.adapter=\"${this.getAdapter()}\"\n\t\t\t.value=\"${this.formatValue(this.value)}\"\n\t\t\t.caption=\"${this.model.props.caption}\"\n\t\t\t.placeholder=\"${this.model.props.placeholder}\">\n\t\t</og-tree-dropdown>\n\t`;\n\t\n}"]}
+{"version":3,"file":"list.js","sourceRoot":"","sources":["../../../src/ui/controls/list.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAkF,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGtH,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,WAAkD;IAAzE;;QAWE,eAAU,GAAG,IAAI,CAAC;QAgB1B,cAAS,GAAG,CAAC,CAAY,EAAE,EAAE;YAC5B,MAAM,MAAM,GAAG,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;YACtD,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,IAAI,UAAU,CAAC,MAAM;gBAC7D,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;;gBAEhE,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;QACjC,CAAC,CAAA;QAED,oBAAe,GAAG,GAAG,EAAE;YACtB,IAAI,IAAI,CAAC,UAAU;gBAAE,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;;gBACxC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QAC/C,CAAC,CAAA;QAwBD,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;cAEN,IAAI,CAAC,SAAS;qBACP,IAAI,CAAC,eAAe;aAC5B,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ;eACxB,IAAI,CAAC,UAAU,EAAE;aACnB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;eAC1B,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO;mBACpB,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW;;EAE7C,CAAC;IAEH,CAAC;IA7DA,IAAI,OAAO,KAAK,OAAO,IAAI,CAAA,CAAC,CAAC;IAErB,WAAW,CAAC,KAAc;QACjC,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAsB,CAAC;IACrG,CAAC;IAED,KAAK;QACJ,KAAK,CAAC,KAAK,EAAE,CAAC;QACd,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC;YAC3B,IAAI,CAAC,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAChE,CAAC;IACF,CAAC;IAeD,UAAU;QACT,OAAO,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,WAAW,CAAC;IAC5D,CAAC;IAED,KAAK,CAAC,UAAU;QACf,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;YAClC,IAAI,OAAO,EAAE,CAAC;gBACb,MAAM,CAAC,OAAO,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC;gBAC5D,IAAI,OAAO,IAAI,OAAO,CAAC,UAAU,IAAI,UAAU,CAAC,MAAM;oBACrD,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACvG,CAAC;QACF,CAAC;IACF,CAAC;IAED,KAAK,CAAC,OAAO;QACZ,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;YAC9B,MAAM,OAAO,GAAmD,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAyD,CAAC;YAC3I,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,UAAU,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;QAClE,CAAC;IACF,CAAC;;AA1DM,eAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,GAAG,CAAA;;;;EAI1C,CAAC,AAJW,CAIV;AAGH;IADC,KAAK,CAAC,kBAAkB,CAAC;0CACH;AATX,QAAQ;IADpB,aAAa,CAAC,cAAc,CAAC;GACjB,QAAQ,CA0EpB","sourcesContent":["import { css, html } from \"lit\";\nimport { customElement, query } from \"lit/decorators.js\";\nimport { BaseControl } from \"./baseControl\";\nimport { TreeAdapter, SerializedValue, TreeDropdown, TreeEvent, TreeSource, TreeOptions, SelectMode } from \"@omegagrid/tree\";\n\n@customElement('og-form-list')\nexport class FormList extends BaseControl<SerializedValue[]|string, TreeAdapter> {\n\n\tstatic styles = [...BaseControl.styles, css`\n\t\tog-tree-dropdown {\n\t\t\theight: 100%;\n\t\t}\t\n\t`];\n\n\t@query('og-tree-dropdown')\n\tdropdown: TreeDropdown;\n\n\tprivate _firstOpen = true;\n\n\tget isValid() { return true }\n\n\tprivate formatValue(value: unknown) {\n\t\treturn Array.isArray(value) ? value : (value == null ? null : [[value, 0, 1]]) as SerializedValue[];\n\t}\n\n\treset() {\n\t\tsuper.reset();\n\t\tif (this.dropdown) {\n\t\t\tthis.dropdown.value = null;\n\t\t\tthis.dropdown.value = this.formatValue(this.model.props.value);\n\t\t}\n\t}\n\n\t_onChange = (e: TreeEvent) => {\n\t\tconst values = e.component.selection.serialize(['v']);\n\t\tif (this.dropdown.tree.options.selectMode == SelectMode.Single)\n\t\t\tthis.updateValue(values.length > 0 ? values[0][0] : null, true);\n\t\telse\n\t\t\tthis.updateValue(values, true);\n\t}\n\n\t_onDropdownOpen = () => {\n\t\tif (this._firstOpen) this._firstOpen = false;\n\t\telse this.adapter?.attach(this.dropdown.tree);\n\t}\n\n\tgetAdapter() {\n\t\treturn this.adapter ?? this.formModel.options?.treeAdapter;\n\t}\n\n\tasync willUpdate() {\n\t\tif (this.value) {\n\t\t\tconst adapter = this.getAdapter();\n\t\t\tif (adapter) {\n\t\t\t\tconst [options] = await Promise.all([adapter.getOptions()]);\n\t\t\t\tif (options && options.selectMode == SelectMode.Single)\n\t\t\t\t\tthis.updateValue(Array.isArray(this.value) && this.value.length > 0 ? this.value[0][0] : this.value);\n\t\t\t}\n\t\t}\n\t}\n\n\tasync updated() {\n\t\tif (this.model.props.content) {\n\t\t\tconst content: {sourceData: TreeSource, options: TreeOptions} = this.model.props.content as {sourceData: TreeSource, options: TreeOptions};\n\t\t\tthis.dropdown.setSourceData(content.sourceData, content.options);\n\t\t}\n\t}\n\n\trender = () => html`\n\t\t<og-tree-dropdown \n\t\t\t@change=\"${this._onChange}\"\n\t\t\t@dropdown.open=\"${this._onDropdownOpen}\"\n\t\t\t?cross=\"${!this.model.props.required}\"\n\t\t\t.adapter=\"${this.getAdapter()}\"\n\t\t\t.value=\"${this.formatValue(this.value)}\"\n\t\t\t.caption=\"${this.model.props.caption}\"\n\t\t\t.placeholder=\"${this.model.props.placeholder}\">\n\t\t</og-tree-dropdown>\n\t`;\n\t\n}"]}

package/dist/ui/controls/numericInput.d.ts

@@ -5,7 +5,6 @@ export declare class FormNumericInput extends BaseControl<number> {
     max: number;
     validate(): void;
     constructor();
-    _onKeydown: (e: KeyboardEvent) => void;
     _onChange: (e: InputEvent) => void;
     updateValue(value: number): void;
     up: () => void;

package/dist/ui/controls/numericInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"numericInput.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/numericInput.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,qBACa,gBAAiB,SAAQ,WAAW,CAAC,MAAM,CAAC;IAExD,MAAM,CAAC,MAAM,4BA4BV;IAGH,GAAG,EAAE,MAAM,CAAC;IAGZ,GAAG,EAAE,MAAM,CAAC;IAEZ,QAAQ;;IASR,UAAU,GAAI,GAAG,aAAa,UAW7B;IAED,SAAS,GAAI,GAAG,UAAU,UAEzB;IAED,WAAW,CAAC,KAAK,EAAE,MAAM;IASzB,EAAE,aAAkD;IACpD,IAAI,aAAiD;IAErD,MAAM,6CASJ;CAEF"}
+{"version":3,"file":"numericInput.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/numericInput.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,qBACa,gBAAiB,SAAQ,WAAW,CAAC,MAAM,CAAC;IAExD,MAAM,CAAC,MAAM,4BA4BV;IAGH,GAAG,EAAE,MAAM,CAAC;IAGZ,GAAG,EAAE,MAAM,CAAC;IAEZ,QAAQ;;IAQR,SAAS,GAAI,GAAG,UAAU,UAEzB;IAED,WAAW,CAAC,KAAK,EAAE,MAAM;IASzB,EAAE,aAAkD;IACpD,IAAI,aAAiD;IAErD,MAAM,6CASJ;CAEF"}

package/dist/ui/controls/numericInput.js

@@ -14,18 +14,6 @@ let FormNumericInput = class FormNumericInput extends BaseControl {
     }
     constructor() {
         super();
-        this._onKeydown = (e) => {
-            switch (e.key) {
-                case 'ArrowUp':
-                    e.preventDefault();
-                    this.up();
-                    break;
-                case 'ArrowDown':
-                    e.preventDefault();
-                    this.down();
-                    break;
-            }
-        };
         this._onChange = (e) => {
             this.updateValue(parseFloat(e.target.value));
         };
@@ -41,7 +29,6 @@ let FormNumericInput = class FormNumericInput extends BaseControl {
 			@change="${this._onChange}">
 		</og-numericinput>
 	`;
-        this.addEventListener('keydown', this._onKeydown);
     }
     updateValue(value) {
         if (value != null) {
@@ -57,8 +44,8 @@ FormNumericInput.styles = [...BaseControl.styles, css `
 			border: 1px solid var(--og-accent-color);
 			background-color: var(--og-form-background-color);
 			color: var(--og-text-color);
-			height: ${constants.FORM_CONTROL_HEIGHT}px;
-			line-height: ${constants.FORM_CONTROL_HEIGHT}px;
+			height: 100%;
+			line-height: ${constants.DEFAULT_FORM_LINE_HEIGHT}px;
 			width: 100%;
 		}
 

package/dist/ui/controls/numericInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"numericInput.js","sourceRoot":"","sources":["../../../src/ui/controls/numericInput.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,SAAS,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAGrC,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,WAAmB;IAsCxD,QAAQ;QACP,KAAK,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAED;QACC,KAAK,EAAE,CAAC;QAIT,eAAU,GAAG,CAAC,CAAgB,EAAE,EAAE;YACjC,QAAQ,CAAC,CAAC,GAAG,EAAE,CAAC;gBACf,KAAK,SAAS;oBACb,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,IAAI,CAAC,EAAE,EAAE,CAAC;oBACV,MAAM;gBACP,KAAK,WAAW;oBACf,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,IAAI,CAAC,IAAI,EAAE,CAAC;oBACZ,MAAM;YACR,CAAC;QACF,CAAC,CAAA;QAED,cAAS,GAAG,CAAC,CAAa,EAAE,EAAE;YAC7B,IAAI,CAAC,WAAW,CAAC,UAAU,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC,CAAC;QACpE,CAAC,CAAA;QAWD,OAAE,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QACpD,SAAI,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QAErD,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;eAEL,IAAI;WACR,IAAI,CAAC,GAAG;WACR,IAAI,CAAC,GAAG;aACN,IAAI,CAAC,KAAK;mBACJ,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW;cAClC,IAAI,CAAC,SAAS;;EAE1B,CAAC;QAzCD,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IACnD,CAAC;IAmBD,WAAW,CAAC,KAAa;QACxB,IAAI,KAAK,IAAI,IAAI,EAAE,CAAC;YACnB,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;YAC5D,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;QAC7D,CAAC;QACD,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QACzB,IAAI,CAAC,aAAa,EAAE,CAAC;IACtB,CAAC;;AArEM,uBAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,GAAG,CAAA;;;;;aAK/B,SAAS,CAAC,mBAAmB;kBACxB,SAAS,CAAC,mBAAmB;;;;;;;;;;;;;;;;;;;;;;EAsB7C,CAAC,AA5BW,CA4BV;AAGH;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;6CACb;AAGZ;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;6CACb;AApCA,gBAAgB;IAD5B,aAAa,CAAC,sBAAsB,CAAC;GACzB,gBAAgB,CAuF5B","sourcesContent":["import constants from \"../../constants\";\nimport { css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { BaseControl } from \"./baseControl\";\n\n@customElement('og-form-numericinput')\nexport class FormNumericInput extends BaseControl<number> {\n\n\tstatic styles = [...BaseControl.styles, css`\n\t\tog-numericinput {\n\t\t\tborder: 1px solid var(--og-accent-color);\n\t\t\tbackground-color: var(--og-form-background-color);\n\t\t\tcolor: var(--og-text-color);\n\t\t\theight: ${constants.FORM_CONTROL_HEIGHT}px;\n\t\t\tline-height: ${constants.FORM_CONTROL_HEIGHT}px;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.buttons {\n\t\t\tdisplay: none;\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\tbottom: 0;\n\t\t\twidth: 15px;\n\t\t\tbackground-color: var(--og-accent-color);\n\t\t}\n\n\t\t:host {\n\t\t\tposition: relative;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\t:host(:hover) .buttons {\n\t\t\tdisplay: block;\n\t\t}\n\t`];\n\n\t@property({type: Number})\n\tmin: number;\n\n\t@property({type: Number})\n\tmax: number;\n\n\tvalidate() {\n\t\tsuper.validate();\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.addEventListener('keydown', this._onKeydown);\n\t}\n\n\t_onKeydown = (e: KeyboardEvent) => {\n\t\tswitch (e.key) {\n\t\t\tcase 'ArrowUp':\n\t\t\t\te.preventDefault();\n\t\t\t\tthis.up();\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowDown':\n\t\t\t\te.preventDefault();\n\t\t\t\tthis.down();\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\t_onChange = (e: InputEvent) => {\n\t\tthis.updateValue(parseFloat((e.target as HTMLInputElement).value));\n\t}\n\n\tupdateValue(value: number) {\n\t\tif (value != null) {\n\t\t\tvalue = isNaN(this.min) ? value : Math.max(value, this.min);\n\t\t\tvalue = isNaN(this.max) ? value : Math.min(value, this.max);\n\t\t}\n\t\tsuper.updateValue(value);\n\t\tthis.requestUpdate();\n\t}\n\n\tup = () => this.updateValue((this.value ?? -1) + 1);\n\tdown = () => this.updateValue((this.value ?? 1) - 1);\n\n\trender = () => html`\n\t\t<og-numericinput\n\t\t\t?buttons=\"${true}\"\n\t\t\t.min=\"${this.min}\"\n\t\t\t.max=\"${this.max}\"\n\t\t\t.value=\"${this.value}\"\n\t\t\t.placeholder=\"${this.model?.props.placeholder}\"\n\t\t\t@change=\"${this._onChange}\">\n\t\t</og-numericinput>\n\t`;\n\t\n}"]}
+{"version":3,"file":"numericInput.js","sourceRoot":"","sources":["../../../src/ui/controls/numericInput.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,SAAS,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAGrC,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,WAAmB;IAsCxD,QAAQ;QACP,KAAK,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAED;QACC,KAAK,EAAE,CAAC;QAGT,cAAS,GAAG,CAAC,CAAa,EAAE,EAAE;YAC7B,IAAI,CAAC,WAAW,CAAC,UAAU,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC,CAAC;QACpE,CAAC,CAAA;QAWD,OAAE,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QACpD,SAAI,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QAErD,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;eAEL,IAAI;WACR,IAAI,CAAC,GAAG;WACR,IAAI,CAAC,GAAG;aACN,IAAI,CAAC,KAAK;mBACJ,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW;cAClC,IAAI,CAAC,SAAS;;EAE1B,CAAC;IA3BF,CAAC;IAMD,WAAW,CAAC,KAAa;QACxB,IAAI,KAAK,IAAI,IAAI,EAAE,CAAC;YACnB,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;YAC5D,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;QAC7D,CAAC;QACD,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QACzB,IAAI,CAAC,aAAa,EAAE,CAAC;IACtB,CAAC;;AAvDM,uBAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,GAAG,CAAA;;;;;;kBAM1B,SAAS,CAAC,wBAAwB;;;;;;;;;;;;;;;;;;;;;;EAsBlD,CAAC,AA5BW,CA4BV;AAGH;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;6CACb;AAGZ;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;6CACb;AApCA,gBAAgB;IAD5B,aAAa,CAAC,sBAAsB,CAAC;GACzB,gBAAgB,CAyE5B","sourcesContent":["import constants from \"../../constants\";\nimport { css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { BaseControl } from \"./baseControl\";\n\n@customElement('og-form-numericinput')\nexport class FormNumericInput extends BaseControl<number> {\n\n\tstatic styles = [...BaseControl.styles, css`\n\t\tog-numericinput {\n\t\t\tborder: 1px solid var(--og-accent-color);\n\t\t\tbackground-color: var(--og-form-background-color);\n\t\t\tcolor: var(--og-text-color);\n\t\t\theight: 100%;\n\t\t\tline-height: ${constants.DEFAULT_FORM_LINE_HEIGHT}px;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.buttons {\n\t\t\tdisplay: none;\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\tbottom: 0;\n\t\t\twidth: 15px;\n\t\t\tbackground-color: var(--og-accent-color);\n\t\t}\n\n\t\t:host {\n\t\t\tposition: relative;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\t:host(:hover) .buttons {\n\t\t\tdisplay: block;\n\t\t}\n\t`];\n\n\t@property({type: Number})\n\tmin: number;\n\n\t@property({type: Number})\n\tmax: number;\n\n\tvalidate() {\n\t\tsuper.validate();\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\t_onChange = (e: InputEvent) => {\n\t\tthis.updateValue(parseFloat((e.target as HTMLInputElement).value));\n\t}\n\n\tupdateValue(value: number) {\n\t\tif (value != null) {\n\t\t\tvalue = isNaN(this.min) ? value : Math.max(value, this.min);\n\t\t\tvalue = isNaN(this.max) ? value : Math.min(value, this.max);\n\t\t}\n\t\tsuper.updateValue(value);\n\t\tthis.requestUpdate();\n\t}\n\n\tup = () => this.updateValue((this.value ?? -1) + 1);\n\tdown = () => this.updateValue((this.value ?? 1) - 1);\n\n\trender = () => html`\n\t\t<og-numericinput\n\t\t\t?buttons=\"${true}\"\n\t\t\t.min=\"${this.min}\"\n\t\t\t.max=\"${this.max}\"\n\t\t\t.value=\"${this.value}\"\n\t\t\t.placeholder=\"${this.model?.props.placeholder}\"\n\t\t\t@change=\"${this._onChange}\">\n\t\t</og-numericinput>\n\t`;\n\t\n}"]}

package/dist/ui/controls/textInput.js

@@ -44,8 +44,8 @@ FormTextInput.styles = [...BaseControl.styles, css `
 			background-color: var(--og-form-background-color);
 			color: var(--og-text-color);
 			font-size: var(--og-font-size);
-			height: ${constants.FORM_CONTROL_HEIGHT}px;
-			line-height: ${constants.FORM_CONTROL_HEIGHT}px;
+			height: 100%;
+			line-height: ${constants.DEFAULT_FORM_ROW_HEIGHT}px;
 			outline: none;
 			width: 100%;
 			border-radius: var(--og-base-radius);

package/dist/ui/controls/textInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"textInput.js","sourceRoot":"","sources":["../../../src/ui/controls/textInput.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,SAAS,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAGrC,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,WAAmB;IAA/C;;QA4BN,cAAS,GAAG,CAAC,CAAa,EAAE,EAAE;YAC7B,IAAI,CAAC,WAAW,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;QACxD,CAAC,CAAA;QAED,eAAU,GAAG,CAAC,CAAgB,EAAE,EAAE;YACjC,IAAI,CAAC,CAAC,GAAG,IAAI,OAAO,EAAE,CAAC;gBACtB,IAAI,CAAC,WAAW,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;YACxD,CAAC;QACF,CAAC,CAAA;QAED,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;aAGP,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK;kBAC/B,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,IAAI,EAAE;cACvC,IAAI,CAAC,SAAS;eACb,IAAI,CAAC,UAAU;;EAE5B,CAAC;IAEH,CAAC;IA5BA,QAAQ;QACP,KAAK,CAAC,QAAQ,EAAE,CAAC;QACjB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO;QACxB,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,CAAC;YAClF,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QACzC,CAAC;IACF,CAAC;;AAxBM,oBAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,GAAG,CAAA;;;;;;aAM/B,SAAS,CAAC,mBAAmB;kBACxB,SAAS,CAAC,mBAAmB;;;;;;;;;EAS7C,CAAC,AAhBW,CAgBV;AAlBS,aAAa;IADzB,aAAa,CAAC,mBAAmB,CAAC;GACtB,aAAa,CAgDzB","sourcesContent":["import constants from \"../../constants\";\nimport { css, html } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\nimport { BaseControl } from \"./baseControl\";\n\n@customElement('og-form-textinput')\nexport class FormTextInput extends BaseControl<string> {\n\n\tstatic styles = [...BaseControl.styles, css`\n\t\tinput {\n\t\t\tborder: 1px solid var(--og-accent-color);\n\t\t\tbackground-color: var(--og-form-background-color);\n\t\t\tcolor: var(--og-text-color);\n\t\t\tfont-size: var(--og-font-size);\n\t\t\theight: ${constants.FORM_CONTROL_HEIGHT}px;\n\t\t\tline-height: ${constants.FORM_CONTROL_HEIGHT}px;\n\t\t\toutline: none;\n\t\t\twidth: 100%;\n\t\t\tborder-radius: var(--og-base-radius);\n\t\t}\n\n\t\t:host([required]) input {\n\t\t\tborder: none;\n\t\t}\n\t`];\n\n\tvalidate() {\n\t\tsuper.validate();\n\t\tif (!this.model) return;\n\t\tif (this.model.props.pattern && !this.model.props.pattern.test(this.value ?? \"\")) {\n\t\t\tthis.model.errors.push('invalid value');\n\t\t}\n\t}\n\n\t_onChange = (e: InputEvent) => {\n\t\tthis.updateValue((e.target as HTMLInputElement).value);\n\t}\n\n\t_onKeyDown = (e: KeyboardEvent) => {\n\t\tif (e.key == 'Enter') {\n\t\t\tthis.updateValue((e.target as HTMLInputElement).value);\n\t\t}\n\t}\n\n\trender = () => html`\n\t\t<input\n\t\t\ttype=\"text\"\n\t\t\t.value=\"${this.value == null ? '' : this.value}\"\n\t\t\tplaceholder=\"${this.model?.props.placeholder ?? ''}\"\n\t\t\t@change=\"${this._onChange}\"\n\t\t\t@keydown=\"${this._onKeyDown}\"\n\t\t>\n\t`;\n\t\n}"]}
+{"version":3,"file":"textInput.js","sourceRoot":"","sources":["../../../src/ui/controls/textInput.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,SAAS,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAGrC,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,WAAmB;IAA/C;;QA4BN,cAAS,GAAG,CAAC,CAAa,EAAE,EAAE;YAC7B,IAAI,CAAC,WAAW,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;QACxD,CAAC,CAAA;QAED,eAAU,GAAG,CAAC,CAAgB,EAAE,EAAE;YACjC,IAAI,CAAC,CAAC,GAAG,IAAI,OAAO,EAAE,CAAC;gBACtB,IAAI,CAAC,WAAW,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;YACxD,CAAC;QACF,CAAC,CAAA;QAED,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;aAGP,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK;kBAC/B,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,IAAI,EAAE;cACvC,IAAI,CAAC,SAAS;eACb,IAAI,CAAC,UAAU;;EAE5B,CAAC;IAEH,CAAC;IA5BA,QAAQ;QACP,KAAK,CAAC,QAAQ,EAAE,CAAC;QACjB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO;QACxB,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,CAAC;YAClF,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QACzC,CAAC;IACF,CAAC;;AAxBM,oBAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,GAAG,CAAA;;;;;;;kBAO1B,SAAS,CAAC,uBAAuB;;;;;;;;;EASjD,CAAC,AAhBW,CAgBV;AAlBS,aAAa;IADzB,aAAa,CAAC,mBAAmB,CAAC;GACtB,aAAa,CAgDzB","sourcesContent":["import constants from \"../../constants\";\nimport { css, html } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\nimport { BaseControl } from \"./baseControl\";\n\n@customElement('og-form-textinput')\nexport class FormTextInput extends BaseControl<string> {\n\n\tstatic styles = [...BaseControl.styles, css`\n\t\tinput {\n\t\t\tborder: 1px solid var(--og-accent-color);\n\t\t\tbackground-color: var(--og-form-background-color);\n\t\t\tcolor: var(--og-text-color);\n\t\t\tfont-size: var(--og-font-size);\n\t\t\theight: 100%;\n\t\t\tline-height: ${constants.DEFAULT_FORM_ROW_HEIGHT}px;\n\t\t\toutline: none;\n\t\t\twidth: 100%;\n\t\t\tborder-radius: var(--og-base-radius);\n\t\t}\n\n\t\t:host([required]) input {\n\t\t\tborder: none;\n\t\t}\n\t`];\n\n\tvalidate() {\n\t\tsuper.validate();\n\t\tif (!this.model) return;\n\t\tif (this.model.props.pattern && !this.model.props.pattern.test(this.value ?? \"\")) {\n\t\t\tthis.model.errors.push('invalid value');\n\t\t}\n\t}\n\n\t_onChange = (e: InputEvent) => {\n\t\tthis.updateValue((e.target as HTMLInputElement).value);\n\t}\n\n\t_onKeyDown = (e: KeyboardEvent) => {\n\t\tif (e.key == 'Enter') {\n\t\t\tthis.updateValue((e.target as HTMLInputElement).value);\n\t\t}\n\t}\n\n\trender = () => html`\n\t\t<input\n\t\t\ttype=\"text\"\n\t\t\t.value=\"${this.value == null ? '' : this.value}\"\n\t\t\tplaceholder=\"${this.model?.props.placeholder ?? ''}\"\n\t\t\t@change=\"${this._onChange}\"\n\t\t\t@keydown=\"${this._onKeyDown}\"\n\t\t>\n\t`;\n\t\n}"]}

package/dist/ui/form.js

@@ -48,14 +48,14 @@ let Form = class Form extends LitElement {
                 return html `<col style="${colStyle}">`;
             });
             const rows = map(this.model.controls, (row, r) => {
-                const rowStyle = styleMap({
+                const cellStyle = styleMap({
                     height: (this.model.rows && this.model.rows[r] && this.model.rows[r].height
                         ? dom.numToPixels(this.model.rows[r].height) : null)
                 });
                 return html `
-				<tr class="row" style="${rowStyle}">
+				<tr class="row">
 					${map(row, (control) => html `
-					<td colspan="${control?.props.cs || 1}" rowspan="${control?.props.rs || 1}">
+					<td colspan="${control?.props.cs || 1}" rowspan="${control?.props.rs || 1}" style="${cellStyle}">
 						${control ? html `
 							<${controlTypeMap.get(control.props.type)}
 								id="${control.props.key}"

package/dist/ui/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","sourceRoot":"","sources":["../../src/ui/form.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement } from \"lit\";\nimport { literal, html, StaticValue } from 'lit/static-html.js';\nimport { customElement, property, query, queryAll } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { map } from \"lit/directives/map.js\";\nimport { FormControlType, FormSettings, FormValues } from \"../types\";\nimport { FormModel } from \"../model/formModel\";\nimport { dom, Overlay } from '@omegagrid/core';\nimport { IControl, ControlEvent } from \"./controls/baseControl\";\nimport { style } from './form.style';\nimport { FormAdapter } from \"../model\";\nimport { msg } from '@omegagrid/localize';\n\nconst controlTypeMap = new Map<FormControlType, StaticValue>([\n\t[FormControlType.Label, literal`og-form-label`],\n\t[FormControlType.TextInput, literal`og-form-textinput`],\n\t[FormControlType.ColorInput, literal`og-form-colorinput`],\n\t[FormControlType.Checkbox, literal`og-form-checkbox`],\n\t[FormControlType.List, literal`og-form-list`],\n\t[FormControlType.Button, literal`og-form-button`],\n\t[FormControlType.NumericInput, literal`og-form-numericinput`],\n\t[FormControlType.FileInput, literal`og-form-fileinput`],\n\t[FormControlType.DateInput, literal`og-form-dateinput`],\n\t[FormControlType.CalendarDateInput, literal`og-form-calendardateinput`],\n]);\n\nexport class FormEvent extends Event {\n\n\treadonly key: string;\n\treadonly value: unknown;\n\treadonly valid?: boolean;\n\n\tconstructor(type: string, args?: Partial<FormEvent>) {\n\t\tsuper(`form.${type}`, {bubbles: true, cancelable: true, composed: true});\n\t\tObject.assign(this, args || {});\n\t}\n}\n\n@customElement('og-form')\nexport class Form extends LitElement {\n\n\tstatic styles = [style];\n\n\t@property()\n\tkey: string|number;\n\n\t@property({type: Object})\n\tadapter: FormAdapter;\n\n\t@property({type: Object})\n\tmodel: FormModel;\n\n\t@property({type: String})\n\tcaption: string;\n\n\t@queryAll('.control')\n\tcontrolNodes: NodeListOf<IControl>;\n\n\tcontrols: Map<string, IControl>;\n\n\t@queryAll('.row')\n\trowElms: HTMLTableRowElement[];\n\n\t@query('og-overlay')\n\toverlay: Overlay;\n\n\t@property({type: Object})\n\tvalues: FormValues = {};\n\n\tprivate errorCounts: Record<string, number> = {};\n\n\tshowOverlay = () => this.overlay?.show(this);\n\thideOverlay = () => this.overlay?.hide();\n\t\n\tsetSourceData(sourceData: FormSettings) {\n\t\tthis.model = new FormModel(sourceData);\n\t}\n\n\tresetValues() {\n\t\tconst values: FormValues = {}\n\t\tthis.model?.controlMap.forEach(c => values[c.key] = c.props.value);\n\t\tthis.values = values;\n\t}\n\n\tsetValue(key: string, value: unknown) {\n\t\tthis.values[key] = value;\n\t\tconst control = this.shadowRoot.querySelector(`#${key}`) as unknown as IControl;\n\t\tcontrol.value = value;\n\t}\n\n\tasync reset() {\n\t\tthis.resetValues();\n\t\tthis.controls.forEach(c => c.reset());\n\t}\n\t\n\tvalidate() {\n\t\tthis.controls.forEach(c => c.validate());\n\t\tthis.requestUpdate();\n\t}\n\n\tisValid() {\n\t\tthis.validate();\n\t\tfor (const c of this.controlNodes) {\n\t\t\tif (!c.isValid) return false;\n\t\t}\n\t\treturn true;\n\t}\n\n\tasync initAdapter() {\n\t\tthis.showOverlay();\n\t\tthis.model = new FormModel({\n\t\t\trows: await this.adapter.getRows(this.key),\n\t\t\tcolumns: await this.adapter.getColumns(this.key),\n\t\t\tcontrols: await this.adapter.getControls(this.key)\n\t\t});\n\t\tthis.hideOverlay();\n\t}\n\n\tasync updated(changedProps: Map<PropertyKey, unknown>) {\n\t\tif (changedProps.has('adapter')) {\n\t\t\tthis.adapter?.attach(this);\n\t\t\tawait this.initAdapter();\n\t\t}\n\n\t\tif (changedProps.has('model')) {\n\t\t\tthis.resetValues();\n\t\t}\n\n\t\tthis.controls = new Map();\n\t\tthis.controlNodes.forEach(c => this.controls.set(c.id, c));\n\t\tthis.model?.controls.forEach((row, r) => row.forEach((control, c) => {\n\t\t\tconst cs = control.props.cs || 1;\n\t\t\tconst rs = control.props.rs || 1;\n\t\t\tif (cs > 1 || rs > 1) {\n\t\t\t\tfor (let ri = r; ri <= r + rs - 1; ri++) {\n\t\t\t\t\tfor (let ci = c; ci <= c + cs - 1; ci++) {\n\t\t\t\t\t\tconst cell = this.rowElms[ri].children[ci] as HTMLTableCellElement;\n\t\t\t\t\t\tif (cell) {\n\t\t\t\t\t\t\tif (ci != c || ri != r) dom.hideCell(cell);\n\t\t\t\t\t\t\telse dom.showCell(cell);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tdom.showCell(this.rowElms[r].children[c] as HTMLTableCellElement);\n\t\t\t}\n\t\t}));\n\t}\n\n\t_onValueChange(e: ControlEvent<unknown>) {\n\t\tthis.values[e.model.key] = e.value;\n\t\tif (this.errorCounts[e.model.key] != e.model.errors.length) {\n\t\t\tthis.requestUpdate();\n\t\t}\n\t\tthis.errorCounts[e.model.key] = e.model.errors.length;\n\t\tthis.dispatchEvent(new FormEvent('change', {\n\t\t\tkey: e.model.key, \n\t\t\tvalue: e.value,\n\t\t\tvalid: e.model.errors.length == 0\n\t\t}));\n\t}\n\n\trender = () => {\n\t\tconst overlay = html`<og-overlay defaultLoader></og-overlay>`;\n\t\tif (!this.model) return overlay;\n\t\tconst columns = map(this.model.columns, column => { \n\t\t\tconst colStyle = styleMap({width: column?.width ? dom.numToPixels(column.width) : 'auto'});\n\t\t\treturn html`<col style=\"${colStyle}\">`; \n\t\t});\n\n\t\tconst rows = map(this.model.controls, (row, r) => {\n\t\t\tconst rowStyle = styleMap({\n\t\t\t\theight: (this.model.rows && this.model.rows[r] && this.model.rows[r].height \n\t\t\t\t\t? dom.numToPixels(this.model.rows[r].height) : null)\n\t\t\t});\n\t\t\treturn html`\n\t\t\t\t<tr class=\"row\" style=\"${rowStyle}\">\n\t\t\t\t\t${map(row, (control) => html`\n\t\t\t\t\t<td colspan=\"${control?.props.cs || 1}\" rowspan=\"${control?.props.rs || 1}\">\n\t\t\t\t\t\t${control ? html`\n\t\t\t\t\t\t\t<${controlTypeMap.get(control.props.type)}\n\t\t\t\t\t\t\t\tid=\"${control.props.key}\"\n\t\t\t\t\t\t\t\t@change=${this._onValueChange}\n\t\t\t\t\t\t\t\tclass=\"control\"\n\t\t\t\t\t\t\t\t.value=\"${this.values && this.values[control.props.key] != null ? this.values[control.props.key] : control.props.value}\"\n\t\t\t\t\t\t\t\t.model=\"${control}\"\n\t\t\t\t\t\t\t\t.formModel=\"${this.model}\"\n\t\t\t\t\t\t\t\t.adapter=\"${control.props.adapter || this.model.options.treeAdapter}\">\n\t\t\t\t\t\t\t</${controlTypeMap.get(control.props.type)}>\n\t\t\t\t\t\t\t${map(control.errors, err => html`\n\t\t\t\t\t\t\t\t<div class=\"error\">${msg(err)}</div>\n\t\t\t\t\t\t\t`)}\n\t\t\t\t\t\t` : ``}\n\t\t\t\t\t</td>\n\t\t\t\t\t`)}\n\t\t\t\t</tr>\n\t\t\t`\n\t\t});\n\n\t\treturn html`\n\t\t\t${overlay}\n\t\t\t${this.caption ? html`<div class=\"title\">${this.caption}</div>` : ``}\n\t\t\t<div class=\"body\">${this.model ? html`\n\t\t\t\t<table>\n\t\t\t\t\t<colgroup>${columns}</colgroup>\n\t\t\t\t\t<tbody>${rows}</tbody>\n\t\t\t\t</table>\n\t\t\t` : ``}</div>\n\t\t`;\n\t};\n\n}"]}
+{"version":3,"file":"form.js","sourceRoot":"","sources":["../../src/ui/form.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement } from \"lit\";\nimport { literal, html, StaticValue } from 'lit/static-html.js';\nimport { customElement, property, query, queryAll } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { map } from \"lit/directives/map.js\";\nimport { FormControlType, FormSettings, FormValues } from \"../types\";\nimport { FormModel } from \"../model/formModel\";\nimport { dom, Overlay } from '@omegagrid/core';\nimport { IControl, ControlEvent } from \"./controls/baseControl\";\nimport { style } from './form.style';\nimport { FormAdapter } from \"../model\";\nimport { msg } from '@omegagrid/localize';\n\nconst controlTypeMap = new Map<FormControlType, StaticValue>([\n\t[FormControlType.Label, literal`og-form-label`],\n\t[FormControlType.TextInput, literal`og-form-textinput`],\n\t[FormControlType.ColorInput, literal`og-form-colorinput`],\n\t[FormControlType.Checkbox, literal`og-form-checkbox`],\n\t[FormControlType.List, literal`og-form-list`],\n\t[FormControlType.Button, literal`og-form-button`],\n\t[FormControlType.NumericInput, literal`og-form-numericinput`],\n\t[FormControlType.FileInput, literal`og-form-fileinput`],\n\t[FormControlType.DateInput, literal`og-form-dateinput`],\n\t[FormControlType.CalendarDateInput, literal`og-form-calendardateinput`],\n]);\n\nexport class FormEvent extends Event {\n\n\treadonly key: string;\n\treadonly value: unknown;\n\treadonly valid?: boolean;\n\n\tconstructor(type: string, args?: Partial<FormEvent>) {\n\t\tsuper(`form.${type}`, {bubbles: true, cancelable: true, composed: true});\n\t\tObject.assign(this, args || {});\n\t}\n}\n\n@customElement('og-form')\nexport class Form extends LitElement {\n\n\tstatic styles = [style];\n\n\t@property()\n\tkey: string|number;\n\n\t@property({type: Object})\n\tadapter: FormAdapter;\n\n\t@property({type: Object})\n\tmodel: FormModel;\n\n\t@property({type: String})\n\tcaption: string;\n\n\t@queryAll('.control')\n\tcontrolNodes: NodeListOf<IControl>;\n\n\tcontrols: Map<string, IControl>;\n\n\t@queryAll('.row')\n\trowElms: HTMLTableRowElement[];\n\n\t@query('og-overlay')\n\toverlay: Overlay;\n\n\t@property({type: Object})\n\tvalues: FormValues = {};\n\n\tprivate errorCounts: Record<string, number> = {};\n\n\tshowOverlay = () => this.overlay?.show(this);\n\thideOverlay = () => this.overlay?.hide();\n\t\n\tsetSourceData(sourceData: FormSettings) {\n\t\tthis.model = new FormModel(sourceData);\n\t}\n\n\tresetValues() {\n\t\tconst values: FormValues = {}\n\t\tthis.model?.controlMap.forEach(c => values[c.key] = c.props.value);\n\t\tthis.values = values;\n\t}\n\n\tsetValue(key: string, value: unknown) {\n\t\tthis.values[key] = value;\n\t\tconst control = this.shadowRoot.querySelector(`#${key}`) as unknown as IControl;\n\t\tcontrol.value = value;\n\t}\n\n\tasync reset() {\n\t\tthis.resetValues();\n\t\tthis.controls.forEach(c => c.reset());\n\t}\n\t\n\tvalidate() {\n\t\tthis.controls.forEach(c => c.validate());\n\t\tthis.requestUpdate();\n\t}\n\n\tisValid() {\n\t\tthis.validate();\n\t\tfor (const c of this.controlNodes) {\n\t\t\tif (!c.isValid) return false;\n\t\t}\n\t\treturn true;\n\t}\n\n\tasync initAdapter() {\n\t\tthis.showOverlay();\n\t\tthis.model = new FormModel({\n\t\t\trows: await this.adapter.getRows(this.key),\n\t\t\tcolumns: await this.adapter.getColumns(this.key),\n\t\t\tcontrols: await this.adapter.getControls(this.key)\n\t\t});\n\t\tthis.hideOverlay();\n\t}\n\n\tasync updated(changedProps: Map<PropertyKey, unknown>) {\n\t\tif (changedProps.has('adapter')) {\n\t\t\tthis.adapter?.attach(this);\n\t\t\tawait this.initAdapter();\n\t\t}\n\n\t\tif (changedProps.has('model')) {\n\t\t\tthis.resetValues();\n\t\t}\n\n\t\tthis.controls = new Map();\n\t\tthis.controlNodes.forEach(c => this.controls.set(c.id, c));\n\t\tthis.model?.controls.forEach((row, r) => row.forEach((control, c) => {\n\t\t\tconst cs = control.props.cs || 1;\n\t\t\tconst rs = control.props.rs || 1;\n\t\t\tif (cs > 1 || rs > 1) {\n\t\t\t\tfor (let ri = r; ri <= r + rs - 1; ri++) {\n\t\t\t\t\tfor (let ci = c; ci <= c + cs - 1; ci++) {\n\t\t\t\t\t\tconst cell = this.rowElms[ri].children[ci] as HTMLTableCellElement;\n\t\t\t\t\t\tif (cell) {\n\t\t\t\t\t\t\tif (ci != c || ri != r) dom.hideCell(cell);\n\t\t\t\t\t\t\telse dom.showCell(cell);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tdom.showCell(this.rowElms[r].children[c] as HTMLTableCellElement);\n\t\t\t}\n\t\t}));\n\t}\n\n\t_onValueChange(e: ControlEvent<unknown>) {\n\t\tthis.values[e.model.key] = e.value;\n\t\tif (this.errorCounts[e.model.key] != e.model.errors.length) {\n\t\t\tthis.requestUpdate();\n\t\t}\n\t\tthis.errorCounts[e.model.key] = e.model.errors.length;\n\t\tthis.dispatchEvent(new FormEvent('change', {\n\t\t\tkey: e.model.key, \n\t\t\tvalue: e.value,\n\t\t\tvalid: e.model.errors.length == 0\n\t\t}));\n\t}\n\n\trender = () => {\n\t\tconst overlay = html`<og-overlay defaultLoader></og-overlay>`;\n\t\tif (!this.model) return overlay;\n\t\tconst columns = map(this.model.columns, column => { \n\t\t\tconst colStyle = styleMap({width: column?.width ? dom.numToPixels(column.width) : 'auto'});\n\t\t\treturn html`<col style=\"${colStyle}\">`; \n\t\t});\n\n\t\tconst rows = map(this.model.controls, (row, r) => {\n\t\t\tconst cellStyle = styleMap({\n\t\t\t\theight: (this.model.rows && this.model.rows[r] && this.model.rows[r].height \n\t\t\t\t\t? dom.numToPixels(this.model.rows[r].height) : null)\n\t\t\t});\n\t\t\treturn html`\n\t\t\t\t<tr class=\"row\">\n\t\t\t\t\t${map(row, (control) => html`\n\t\t\t\t\t<td colspan=\"${control?.props.cs || 1}\" rowspan=\"${control?.props.rs || 1}\" style=\"${cellStyle}\">\n\t\t\t\t\t\t${control ? html`\n\t\t\t\t\t\t\t<${controlTypeMap.get(control.props.type)}\n\t\t\t\t\t\t\t\tid=\"${control.props.key}\"\n\t\t\t\t\t\t\t\t@change=${this._onValueChange}\n\t\t\t\t\t\t\t\tclass=\"control\"\n\t\t\t\t\t\t\t\t.value=\"${this.values && this.values[control.props.key] != null ? this.values[control.props.key] : control.props.value}\"\n\t\t\t\t\t\t\t\t.model=\"${control}\"\n\t\t\t\t\t\t\t\t.formModel=\"${this.model}\"\n\t\t\t\t\t\t\t\t.adapter=\"${control.props.adapter || this.model.options.treeAdapter}\">\n\t\t\t\t\t\t\t</${controlTypeMap.get(control.props.type)}>\n\t\t\t\t\t\t\t${map(control.errors, err => html`\n\t\t\t\t\t\t\t\t<div class=\"error\">${msg(err)}</div>\n\t\t\t\t\t\t\t`)}\n\t\t\t\t\t\t` : ``}\n\t\t\t\t\t</td>\n\t\t\t\t\t`)}\n\t\t\t\t</tr>\n\t\t\t`\n\t\t});\n\n\t\treturn html`\n\t\t\t${overlay}\n\t\t\t${this.caption ? html`<div class=\"title\">${this.caption}</div>` : ``}\n\t\t\t<div class=\"body\">${this.model ? html`\n\t\t\t\t<table>\n\t\t\t\t\t<colgroup>${columns}</colgroup>\n\t\t\t\t\t<tbody>${rows}</tbody>\n\t\t\t\t</table>\n\t\t\t` : ``}</div>\n\t\t`;\n\t};\n\n}"]}

package/dist/ui/form.style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form.style.d.ts","sourceRoot":"","sources":["../../src/ui/form.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,yBAqCjB,CAAC"}
+{"version":3,"file":"form.style.d.ts","sourceRoot":"","sources":["../../src/ui/form.style.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,yBAyCjB,CAAC"}

package/dist/ui/form.style.js

@@ -1,3 +1,4 @@
+import constants from "../constants";
 import { css } from "lit";
 export const style = css `
 	:host {
@@ -20,15 +21,19 @@ export const style = css `
 		table-layout: fixed;
 	}
 
-	table tr {
-		height: 20px;
+	table tr td {
+		height: ${constants.DEFAULT_FORM_ROW_HEIGHT}px;
 	}
 
 	table td {
-		padding: 2px 0;
+		padding: ${constants.DEFAULT_FORM_CELL_PADDING}px;
 		overflow: hidden;
 	}
 
+	table td > * {
+		height: 100%;
+	}
+
 	.error {
 		color: red;
 	}

package/dist/ui/form.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.style.js","sourceRoot":"","sources":["../../src/ui/form.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCvB,CAAC","sourcesContent":["import { css } from \"lit\";\n\nexport const style = css`\n\t:host {\n\t\tdisplay: block;\n\t\tfont-size: var(--og-font-size);\n\t\tposition: relative;\n\t}\n\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.body {\n\t\tpadding: 11px;\n\t}\n\n\ttable {\n\t\tborder-collapse: collapse;\n\t\twidth: 100%;\n\t\ttable-layout: fixed;\n\t}\n\n\ttable tr {\n\t\theight: 20px;\n\t}\n\n\ttable td {\n\t\tpadding: 2px 0;\n\t\toverflow: hidden;\n\t}\n\n\t.error {\n\t\tcolor: red;\n\t}\n\n\tog-overlay {\n\t\tmin-height: 200px;\n\t}\n`;"]}
+{"version":3,"file":"form.style.js","sourceRoot":"","sources":["../../src/ui/form.style.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;YAsBZ,SAAS,CAAC,uBAAuB;;;;aAIhC,SAAS,CAAC,yBAAyB;;;;;;;;;;;;;;;CAe/C,CAAC","sourcesContent":["import constants from \"../constants\";\nimport { css } from \"lit\";\n\nexport const style = css`\n\t:host {\n\t\tdisplay: block;\n\t\tfont-size: var(--og-font-size);\n\t\tposition: relative;\n\t}\n\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.body {\n\t\tpadding: 11px;\n\t}\n\n\ttable {\n\t\tborder-collapse: collapse;\n\t\twidth: 100%;\n\t\ttable-layout: fixed;\n\t}\n\n\ttable tr td {\n\t\theight: ${constants.DEFAULT_FORM_ROW_HEIGHT}px;\n\t}\n\n\ttable td {\n\t\tpadding: ${constants.DEFAULT_FORM_CELL_PADDING}px;\n\t\toverflow: hidden;\n\t}\n\n\ttable td > * {\n\t\theight: 100%;\n\t}\n\n\t.error {\n\t\tcolor: red;\n\t}\n\n\tog-overlay {\n\t\tmin-height: 200px;\n\t}\n`;"]}

package/dist/ui/formContainer.style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"formContainer.style.d.ts","sourceRoot":"","sources":["../../src/ui/formContainer.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,yBAyCjB,CAAC"}
+{"version":3,"file":"formContainer.style.d.ts","sourceRoot":"","sources":["../../src/ui/formContainer.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,yBAoCjB,CAAC"}

package/dist/ui/formContainer.style.js

@@ -13,8 +13,7 @@ export const style = css `
 
 	.title {
 		background-color: var(--og-accent-color);
-		line-height: 40px;
-		padding: 0 10px;
+		padding: 5px;
 		color: var(--og-text-color-reversed);
 		flex: 0;
 	}
@@ -23,10 +22,6 @@ export const style = css `
 		flex: 1;
 	}
 
-	.form-title {
-		padding: 5px;
-	}
-
 	.buttons {
 		display: flex;
 		flex-direction: row;

package/dist/ui/formContainer.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"formContainer.style.js","sourceRoot":"","sources":["../../src/ui/formContainer.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCvB,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\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tposition: relative;\n\t\tborder-radius: var(--og-base-radius);\n\t}\n\n\t.title {\n\t\tbackground-color: var(--og-accent-color);\n\t\tline-height: 40px;\n\t\tpadding: 0 10px;\n\t\tcolor: var(--og-text-color-reversed);\n\t\tflex: 0;\n\t}\n\n\tog-container {\n\t\tflex: 1;\n\t}\n\n\t.form-title {\n\t\tpadding: 5px;\n\t}\n\n\t.buttons {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tgap: 4px;\n\t\tjustify-content: flex-end;\n\t\tborder-top: 1px solid var(--og-border-color);\n\t\tpadding: 4px;\n\t}\n\n\t.buttons og-button {\n\t\tmin-width: 80px;\n\t\ttext-align: center;\n\t}\n`;"]}
+{"version":3,"file":"formContainer.style.js","sourceRoot":"","sources":["../../src/ui/formContainer.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCvB,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\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tposition: relative;\n\t\tborder-radius: var(--og-base-radius);\n\t}\n\n\t.title {\n\t\tbackground-color: var(--og-accent-color);\n\t\tpadding: 5px;\n\t\tcolor: var(--og-text-color-reversed);\n\t\tflex: 0;\n\t}\n\n\tog-container {\n\t\tflex: 1;\n\t}\n\n\t.buttons {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tgap: 4px;\n\t\tjustify-content: flex-end;\n\t\tborder-top: 1px solid var(--og-border-color);\n\t\tpadding: 4px;\n\t}\n\n\t.buttons og-button {\n\t\tmin-width: 80px;\n\t\ttext-align: center;\n\t}\n`;"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omegagrid/form",
-  "version": "0.9.38",
+  "version": "0.9.39",
   "license": "UNLICENSED",
   "description": "Universal form component",
   "main": "./dist/index.js",
@@ -27,10 +27,10 @@
     "_prepublish": "yarn test && yarn lint"
   },
   "dependencies": {
-    "@omegagrid/calendar": "^0.9.38",
-    "@omegagrid/core": "^0.9.38",
-    "@omegagrid/localize": "^0.9.38",
-    "@omegagrid/tree": "^0.9.38",
+    "@omegagrid/calendar": "^0.9.39",
+    "@omegagrid/core": "^0.9.39",
+    "@omegagrid/localize": "^0.9.39",
+    "@omegagrid/tree": "^0.9.39",
     "lit": "^3.1.1",
     "lit-html": "^3.1.1",
     "ts-debounce": "^4.0.0"