@omegagrid/form 0.10.1 → 0.10.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +5 -5
- package/dist/constants.d.ts +0 -52
- package/dist/constants.d.ts.map +0 -1
- package/dist/constants.js +0 -15
- package/dist/constants.js.map +0 -1
- package/dist/index.d.ts +0 -4
- package/dist/index.d.ts.map +0 -1
- package/dist/index.js +0 -4
- package/dist/index.js.map +0 -1
- package/dist/model/formAdapter.d.ts +0 -14
- package/dist/model/formAdapter.d.ts.map +0 -1
- package/dist/model/formAdapter.js +0 -21
- package/dist/model/formAdapter.js.map +0 -1
- package/dist/model/formControlModel.d.ts +0 -9
- package/dist/model/formControlModel.d.ts.map +0 -1
- package/dist/model/formControlModel.js +0 -9
- package/dist/model/formControlModel.js.map +0 -1
- package/dist/model/formModel.d.ts +0 -17
- package/dist/model/formModel.d.ts.map +0 -1
- package/dist/model/formModel.js +0 -42
- package/dist/model/formModel.js.map +0 -1
- package/dist/model/index.d.ts +0 -4
- package/dist/model/index.d.ts.map +0 -1
- package/dist/model/index.js +0 -4
- package/dist/model/index.js.map +0 -1
- package/dist/options.d.ts +0 -3
- package/dist/options.d.ts.map +0 -1
- package/dist/options.js +0 -17
- package/dist/options.js.map +0 -1
- package/dist/types.d.ts +0 -99
- package/dist/types.d.ts.map +0 -1
- package/dist/types.js +0 -14
- package/dist/types.js.map +0 -1
- package/dist/ui/controls/baseControl.d.ts +0 -32
- package/dist/ui/controls/baseControl.d.ts.map +0 -1
- package/dist/ui/controls/baseControl.js +0 -97
- package/dist/ui/controls/baseControl.js.map +0 -1
- package/dist/ui/controls/button.d.ts +0 -16
- package/dist/ui/controls/button.d.ts.map +0 -1
- package/dist/ui/controls/button.js +0 -80
- package/dist/ui/controls/button.js.map +0 -1
- package/dist/ui/controls/calendarDateInput.d.ts +0 -11
- package/dist/ui/controls/calendarDateInput.d.ts.map +0 -1
- package/dist/ui/controls/calendarDateInput.js +0 -67
- package/dist/ui/controls/calendarDateInput.js.map +0 -1
- package/dist/ui/controls/checkbox.d.ts +0 -8
- package/dist/ui/controls/checkbox.d.ts.map +0 -1
- package/dist/ui/controls/checkbox.js +0 -38
- package/dist/ui/controls/checkbox.js.map +0 -1
- package/dist/ui/controls/colorInput.d.ts +0 -9
- package/dist/ui/controls/colorInput.d.ts.map +0 -1
- package/dist/ui/controls/colorInput.js +0 -48
- package/dist/ui/controls/colorInput.js.map +0 -1
- package/dist/ui/controls/dateInput.d.ts +0 -11
- package/dist/ui/controls/dateInput.d.ts.map +0 -1
- package/dist/ui/controls/dateInput.js +0 -80
- package/dist/ui/controls/dateInput.js.map +0 -1
- package/dist/ui/controls/fileInput.d.ts +0 -6
- package/dist/ui/controls/fileInput.d.ts.map +0 -1
- package/dist/ui/controls/fileInput.js +0 -28
- package/dist/ui/controls/fileInput.js.map +0 -1
- package/dist/ui/controls/index.d.ts +0 -11
- package/dist/ui/controls/index.d.ts.map +0 -1
- package/dist/ui/controls/index.js +0 -11
- package/dist/ui/controls/index.js.map +0 -1
- package/dist/ui/controls/label.d.ts +0 -6
- package/dist/ui/controls/label.d.ts.map +0 -1
- package/dist/ui/controls/label.js +0 -53
- package/dist/ui/controls/label.js.map +0 -1
- package/dist/ui/controls/list.d.ts +0 -17
- package/dist/ui/controls/list.d.ts.map +0 -1
- package/dist/ui/controls/list.js +0 -83
- package/dist/ui/controls/list.js.map +0 -1
- package/dist/ui/controls/numericInput.d.ts +0 -14
- package/dist/ui/controls/numericInput.d.ts.map +0 -1
- package/dist/ui/controls/numericInput.js +0 -81
- package/dist/ui/controls/numericInput.js.map +0 -1
- package/dist/ui/controls/textInput.d.ts +0 -11
- package/dist/ui/controls/textInput.d.ts.map +0 -1
- package/dist/ui/controls/textInput.js +0 -67
- package/dist/ui/controls/textInput.js.map +0 -1
- package/dist/ui/form.d.ts +0 -38
- package/dist/ui/form.d.ts.map +0 -1
- package/dist/ui/form.js +0 -201
- package/dist/ui/form.js.map +0 -1
- package/dist/ui/form.style.d.ts +0 -2
- package/dist/ui/form.style.d.ts.map +0 -1
- package/dist/ui/form.style.js +0 -45
- package/dist/ui/form.style.js.map +0 -1
- package/dist/ui/formContainer.d.ts +0 -31
- package/dist/ui/formContainer.d.ts.map +0 -1
- package/dist/ui/formContainer.js +0 -197
- package/dist/ui/formContainer.js.map +0 -1
- package/dist/ui/formContainer.style.d.ts +0 -2
- package/dist/ui/formContainer.style.d.ts.map +0 -1
- package/dist/ui/formContainer.style.js +0 -39
- package/dist/ui/formContainer.style.js.map +0 -1
- package/dist/ui/index.d.ts +0 -4
- package/dist/ui/index.d.ts.map +0 -1
- package/dist/ui/index.js +0 -4
- package/dist/ui/index.js.map +0 -1
package/dist/ui/controls/list.js
DELETED
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
-
};
|
|
7
|
-
import { css, html } from "lit";
|
|
8
|
-
import { customElement, query } from "lit/decorators.js";
|
|
9
|
-
import { BaseControl } from "./baseControl";
|
|
10
|
-
import { SelectMode } from "@omegagrid/tree";
|
|
11
|
-
let FormList = class FormList extends BaseControl {
|
|
12
|
-
constructor() {
|
|
13
|
-
super(...arguments);
|
|
14
|
-
this._firstOpen = true;
|
|
15
|
-
this._onChange = (e) => {
|
|
16
|
-
const values = e.component.selection.serialize(['v']);
|
|
17
|
-
if (this.dropdown.tree.options.selectMode == SelectMode.Single)
|
|
18
|
-
this.updateValue(values.length > 0 ? values[0][0] : null, true);
|
|
19
|
-
else
|
|
20
|
-
this.updateValue(values, true);
|
|
21
|
-
};
|
|
22
|
-
this._onDropdownOpen = () => {
|
|
23
|
-
if (this._firstOpen)
|
|
24
|
-
this._firstOpen = false;
|
|
25
|
-
else
|
|
26
|
-
this.adapter?.attach(this.dropdown.tree);
|
|
27
|
-
};
|
|
28
|
-
this.render = () => html `
|
|
29
|
-
<og-tree-dropdown
|
|
30
|
-
@change="${this._onChange}"
|
|
31
|
-
@dropdown.open="${this._onDropdownOpen}"
|
|
32
|
-
?cross="${!this.model.props.required}"
|
|
33
|
-
.adapter="${this.getAdapter()}"
|
|
34
|
-
.value="${this.formatValue(this.value)}"
|
|
35
|
-
.caption="${this.model.props.caption}"
|
|
36
|
-
.placeholder="${this.model.props.placeholder}">
|
|
37
|
-
</og-tree-dropdown>
|
|
38
|
-
`;
|
|
39
|
-
}
|
|
40
|
-
get isValid() { return true; }
|
|
41
|
-
formatValue(value) {
|
|
42
|
-
return Array.isArray(value) ? value : (value == null ? null : [[value, 0, 1]]);
|
|
43
|
-
}
|
|
44
|
-
async reset(dispatchEvent = true) {
|
|
45
|
-
await super.reset(dispatchEvent);
|
|
46
|
-
if (this.dropdown) {
|
|
47
|
-
this.dropdown.value = null;
|
|
48
|
-
this.dropdown.value = this.formatValue(this.model.props.value);
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
getAdapter() {
|
|
52
|
-
return this.adapter ?? this.formModel.options?.treeAdapter;
|
|
53
|
-
}
|
|
54
|
-
async willUpdate() {
|
|
55
|
-
if (this.value) {
|
|
56
|
-
const adapter = this.getAdapter();
|
|
57
|
-
if (adapter) {
|
|
58
|
-
const [options] = await Promise.all([adapter.getOptions()]);
|
|
59
|
-
if (options && options.selectMode == SelectMode.Single)
|
|
60
|
-
this.updateValue(Array.isArray(this.value) && this.value.length > 0 ? this.value[0][0] : this.value);
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
async updated() {
|
|
65
|
-
if (this.model.props.content) {
|
|
66
|
-
const content = this.model.props.content;
|
|
67
|
-
this.dropdown.setSourceData(content.sourceData, content.options);
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
};
|
|
71
|
-
FormList.styles = [...BaseControl.styles, css `
|
|
72
|
-
og-tree-dropdown {
|
|
73
|
-
height: 100%;
|
|
74
|
-
}
|
|
75
|
-
`];
|
|
76
|
-
__decorate([
|
|
77
|
-
query('og-tree-dropdown')
|
|
78
|
-
], FormList.prototype, "dropdown", void 0);
|
|
79
|
-
FormList = __decorate([
|
|
80
|
-
customElement('og-form-list')
|
|
81
|
-
], FormList);
|
|
82
|
-
export { FormList };
|
|
83
|
-
//# sourceMappingURL=list.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"list.js","sourceRoot":"","sources":["../../../src/ui/controls/list.ts"],"names":[],"mappings":"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","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\tasync reset(dispatchEvent = true) {\n\t\tawait super.reset(dispatchEvent);\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}"]}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { BaseControl } from "./baseControl";
|
|
2
|
-
export declare class FormNumericInput extends BaseControl<number> {
|
|
3
|
-
static styles: import("lit").CSSResult[];
|
|
4
|
-
min: number;
|
|
5
|
-
max: number;
|
|
6
|
-
validate(): Promise<void>;
|
|
7
|
-
constructor();
|
|
8
|
-
_onChange: (e: InputEvent) => void;
|
|
9
|
-
updateValue(value: number, dispatchEvent?: boolean): Promise<void>;
|
|
10
|
-
up: () => Promise<void>;
|
|
11
|
-
down: () => Promise<void>;
|
|
12
|
-
render: () => import("lit-html").TemplateResult<1>;
|
|
13
|
-
}
|
|
14
|
-
//# sourceMappingURL=numericInput.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
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;IAEN,QAAQ;;IAQd,SAAS,GAAI,GAAG,UAAU,UAEzB;IAEK,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,aAAa,UAAO;IASrD,EAAE,sBAAkD;IACpD,IAAI,sBAAiD;IAErD,MAAM,6CASJ;CAEF"}
|
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
-
};
|
|
7
|
-
import constants from "../../constants";
|
|
8
|
-
import { css, html } from "lit";
|
|
9
|
-
import { customElement, property } from "lit/decorators.js";
|
|
10
|
-
import { BaseControl } from "./baseControl";
|
|
11
|
-
let FormNumericInput = class FormNumericInput extends BaseControl {
|
|
12
|
-
async validate() {
|
|
13
|
-
await super.validate();
|
|
14
|
-
}
|
|
15
|
-
constructor() {
|
|
16
|
-
super();
|
|
17
|
-
this._onChange = (e) => {
|
|
18
|
-
this.updateValue(parseFloat(e.target.value));
|
|
19
|
-
};
|
|
20
|
-
this.up = () => this.updateValue((this.value ?? -1) + 1);
|
|
21
|
-
this.down = () => this.updateValue((this.value ?? 1) - 1);
|
|
22
|
-
this.render = () => html `
|
|
23
|
-
<og-numericinput
|
|
24
|
-
?buttons="${true}"
|
|
25
|
-
.min="${this.min}"
|
|
26
|
-
.max="${this.max}"
|
|
27
|
-
.value="${this.value}"
|
|
28
|
-
.placeholder="${this.model?.props.placeholder}"
|
|
29
|
-
@change="${this._onChange}">
|
|
30
|
-
</og-numericinput>
|
|
31
|
-
`;
|
|
32
|
-
}
|
|
33
|
-
async updateValue(value, dispatchEvent = true) {
|
|
34
|
-
if (value != null) {
|
|
35
|
-
value = isNaN(this.min) ? value : Math.max(value, this.min);
|
|
36
|
-
value = isNaN(this.max) ? value : Math.min(value, this.max);
|
|
37
|
-
}
|
|
38
|
-
await super.updateValue(value, dispatchEvent);
|
|
39
|
-
this.requestUpdate();
|
|
40
|
-
}
|
|
41
|
-
};
|
|
42
|
-
FormNumericInput.styles = [...BaseControl.styles, css `
|
|
43
|
-
og-numericinput {
|
|
44
|
-
border: 1px solid var(--og-accent-color);
|
|
45
|
-
background-color: var(--og-form-background-color);
|
|
46
|
-
color: var(--og-text-color);
|
|
47
|
-
height: 100%;
|
|
48
|
-
line-height: ${constants.DEFAULT_FORM_LINE_HEIGHT}px;
|
|
49
|
-
width: 100%;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
.buttons {
|
|
53
|
-
display: none;
|
|
54
|
-
position: absolute;
|
|
55
|
-
top: 0;
|
|
56
|
-
right: 0;
|
|
57
|
-
bottom: 0;
|
|
58
|
-
width: 15px;
|
|
59
|
-
background-color: var(--og-accent-color);
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
:host {
|
|
63
|
-
position: relative;
|
|
64
|
-
box-sizing: border-box;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
:host(:hover) .buttons {
|
|
68
|
-
display: block;
|
|
69
|
-
}
|
|
70
|
-
`];
|
|
71
|
-
__decorate([
|
|
72
|
-
property({ type: Number })
|
|
73
|
-
], FormNumericInput.prototype, "min", void 0);
|
|
74
|
-
__decorate([
|
|
75
|
-
property({ type: Number })
|
|
76
|
-
], FormNumericInput.prototype, "max", void 0);
|
|
77
|
-
FormNumericInput = __decorate([
|
|
78
|
-
customElement('og-form-numericinput')
|
|
79
|
-
], FormNumericInput);
|
|
80
|
-
export { FormNumericInput };
|
|
81
|
-
//# sourceMappingURL=numericInput.js.map
|
|
@@ -1 +0,0 @@
|
|
|
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,KAAK,CAAC,QAAQ;QACb,MAAM,KAAK,CAAC,QAAQ,EAAE,CAAC;IACxB,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,KAAK,CAAC,WAAW,CAAC,KAAa,EAAE,aAAa,GAAG,IAAI;QACpD,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,MAAM,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;QAC9C,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\tasync validate() {\n\t\tawait super.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\tasync updateValue(value: number, dispatchEvent = true) {\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\tawait super.updateValue(value, dispatchEvent);\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}"]}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { BaseControl } from "./baseControl";
|
|
2
|
-
export declare class FormTextInput extends BaseControl<string> {
|
|
3
|
-
static styles: import("lit").CSSResult[];
|
|
4
|
-
input: HTMLInputElement;
|
|
5
|
-
validate(): Promise<void>;
|
|
6
|
-
_onChange: (e: InputEvent) => void;
|
|
7
|
-
_onKeyDown: (e: KeyboardEvent) => void;
|
|
8
|
-
updated(): void;
|
|
9
|
-
render: () => import("lit-html").TemplateResult<1>;
|
|
10
|
-
}
|
|
11
|
-
//# sourceMappingURL=textInput.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"textInput.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/textInput.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,qBACa,aAAc,SAAQ,WAAW,CAAC,MAAM,CAAC;IAErD,MAAM,CAAC,MAAM,4BAgBV;IAGH,KAAK,EAAE,gBAAgB,CAAC;IAElB,QAAQ;IAQd,SAAS,GAAI,GAAG,UAAU,UAEzB;IAED,UAAU,GAAI,GAAG,aAAa,UAI7B;IAED,OAAO;IAIP,MAAM,6CAOJ;CAEF"}
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
-
};
|
|
7
|
-
import constants from "../../constants";
|
|
8
|
-
import { css, html } from "lit";
|
|
9
|
-
import { customElement, query } from "lit/decorators.js";
|
|
10
|
-
import { BaseControl } from "./baseControl";
|
|
11
|
-
let FormTextInput = class FormTextInput extends BaseControl {
|
|
12
|
-
constructor() {
|
|
13
|
-
super(...arguments);
|
|
14
|
-
this._onChange = (e) => {
|
|
15
|
-
this.updateValue(e.target.value);
|
|
16
|
-
};
|
|
17
|
-
this._onKeyDown = (e) => {
|
|
18
|
-
if (e.key == 'Enter') {
|
|
19
|
-
this.updateValue(e.target.value);
|
|
20
|
-
}
|
|
21
|
-
};
|
|
22
|
-
this.render = () => html `
|
|
23
|
-
<input
|
|
24
|
-
type="text"
|
|
25
|
-
placeholder="${this.model?.props.placeholder ?? ''}"
|
|
26
|
-
@change="${this._onChange}"
|
|
27
|
-
@keydown="${this._onKeyDown}"
|
|
28
|
-
>
|
|
29
|
-
`;
|
|
30
|
-
}
|
|
31
|
-
async validate() {
|
|
32
|
-
await super.validate();
|
|
33
|
-
if (!this.model)
|
|
34
|
-
return;
|
|
35
|
-
if (this.model.props.pattern && !this.model.props.pattern.test(this.value ?? "")) {
|
|
36
|
-
this.model.errors.push('invalid value');
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
updated() {
|
|
40
|
-
this.input.value = this.value == null ? '' : this.value;
|
|
41
|
-
}
|
|
42
|
-
};
|
|
43
|
-
FormTextInput.styles = [...BaseControl.styles, css `
|
|
44
|
-
input {
|
|
45
|
-
border: 1px solid var(--og-accent-color);
|
|
46
|
-
background-color: var(--og-form-background-color);
|
|
47
|
-
color: var(--og-text-color);
|
|
48
|
-
font-size: var(--og-font-size);
|
|
49
|
-
height: 100%;
|
|
50
|
-
line-height: ${constants.DEFAULT_FORM_ROW_HEIGHT}px;
|
|
51
|
-
outline: none;
|
|
52
|
-
width: 100%;
|
|
53
|
-
border-radius: var(--og-base-radius);
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
:host([required]) input {
|
|
57
|
-
border: none;
|
|
58
|
-
}
|
|
59
|
-
`];
|
|
60
|
-
__decorate([
|
|
61
|
-
query('input')
|
|
62
|
-
], FormTextInput.prototype, "input", void 0);
|
|
63
|
-
FormTextInput = __decorate([
|
|
64
|
-
customElement('og-form-textinput')
|
|
65
|
-
], FormTextInput);
|
|
66
|
-
export { FormTextInput };
|
|
67
|
-
//# sourceMappingURL=textInput.js.map
|
|
@@ -1 +0,0 @@
|
|
|
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,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAGrC,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,WAAmB;IAA/C;;QA+BN,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;QAMD,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;kBAGF,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,IAAI,EAAE;cACvC,IAAI,CAAC,SAAS;eACb,IAAI,CAAC,UAAU;;EAE5B,CAAC;IAEH,CAAC;IA/BA,KAAK,CAAC,QAAQ;QACb,MAAM,KAAK,CAAC,QAAQ,EAAE,CAAC;QACvB,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;IAYD,OAAO;QACN,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;IACzD,CAAC;;AAzCM,oBAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,GAAG,CAAA;;;;;;;kBAO1B,SAAS,CAAC,uBAAuB;;;;;;;;;EASjD,CAAC,AAhBW,CAgBV;AAGH;IADC,KAAK,CAAC,OAAO,CAAC;4CACS;AArBZ,aAAa;IADzB,aAAa,CAAC,mBAAmB,CAAC;GACtB,aAAa,CAsDzB","sourcesContent":["import constants from \"../../constants\";\nimport { css, html } from \"lit\";\nimport { customElement, query } 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\t@query('input')\n\tinput: HTMLInputElement;\n\n\tasync validate() {\n\t\tawait super.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\tupdated() {\n\t\tthis.input.value = this.value == null ? '' : this.value;\n\t}\n\n\trender = () => html`\n\t\t<input\n\t\t\ttype=\"text\"\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.d.ts
DELETED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { LitElement } from "lit";
|
|
2
|
-
import { FormSettings, FormValues } from "../types";
|
|
3
|
-
import { FormModel } from "../model/formModel";
|
|
4
|
-
import { Overlay } from '@omegagrid/core';
|
|
5
|
-
import { IControl, ControlEvent } from "./controls/baseControl";
|
|
6
|
-
import { FormAdapter } from "../model";
|
|
7
|
-
export declare class FormEvent extends Event {
|
|
8
|
-
readonly key: string;
|
|
9
|
-
readonly value: unknown;
|
|
10
|
-
readonly valid?: boolean;
|
|
11
|
-
constructor(type: string, args?: Partial<FormEvent>);
|
|
12
|
-
}
|
|
13
|
-
export declare class Form extends LitElement {
|
|
14
|
-
static styles: import("lit").CSSResult[];
|
|
15
|
-
key: string | number;
|
|
16
|
-
adapter: FormAdapter;
|
|
17
|
-
model: FormModel;
|
|
18
|
-
caption: string;
|
|
19
|
-
controlNodes: NodeListOf<IControl>;
|
|
20
|
-
controls: Map<string, IControl>;
|
|
21
|
-
rowElms: HTMLTableRowElement[];
|
|
22
|
-
overlay: Overlay;
|
|
23
|
-
values: FormValues;
|
|
24
|
-
private errorCounts;
|
|
25
|
-
showOverlay: () => void;
|
|
26
|
-
hideOverlay: () => HTMLElement;
|
|
27
|
-
setSourceData(sourceData: FormSettings): void;
|
|
28
|
-
resetValues(): void;
|
|
29
|
-
setValue(key: string, value: unknown): void;
|
|
30
|
-
reset(): Promise<void>;
|
|
31
|
-
validate(): void;
|
|
32
|
-
isValid(): boolean;
|
|
33
|
-
initAdapter(): Promise<void>;
|
|
34
|
-
updated(changedProps: Map<PropertyKey, unknown>): Promise<void>;
|
|
35
|
-
_onValueChange(e: ControlEvent<unknown>): void;
|
|
36
|
-
render: () => import("lit-html").TemplateResult;
|
|
37
|
-
}
|
|
38
|
-
//# sourceMappingURL=form.d.ts.map
|
package/dist/ui/form.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../src/ui/form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,OAAO,EAAmB,YAAY,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAO,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAEhE,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAgBvC,qBAAa,SAAU,SAAQ,KAAK;IAEnC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;gBAEb,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC;CAInD;AAED,qBACa,IAAK,SAAQ,UAAU;IAEnC,MAAM,CAAC,MAAM,4BAAW;IAGxB,GAAG,EAAE,MAAM,GAAC,MAAM,CAAC;IAGnB,OAAO,EAAE,WAAW,CAAC;IAGrB,KAAK,EAAE,SAAS,CAAC;IAGjB,OAAO,EAAE,MAAM,CAAC;IAGhB,YAAY,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAEnC,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAGhC,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAG/B,OAAO,EAAE,OAAO,CAAC;IAGjB,MAAM,EAAE,UAAU,CAAM;IAExB,OAAO,CAAC,WAAW,CAA8B;IAEjD,WAAW,aAAkC;IAC7C,WAAW,oBAA8B;IAEzC,aAAa,CAAC,UAAU,EAAE,YAAY;IAItC,WAAW;IAMX,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO;IAM9B,KAAK;IAKX,QAAQ;IAKR,OAAO;IAQD,WAAW;IAUX,OAAO,CAAC,YAAY,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IA+BrD,cAAc,CAAC,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC;IAavC,MAAM,0CA+CJ;CAEF"}
|
package/dist/ui/form.js
DELETED
|
@@ -1,201 +0,0 @@
|
|
|
1
|
-
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
-
};
|
|
7
|
-
import { LitElement } from "lit";
|
|
8
|
-
import { literal, html } from 'lit/static-html.js';
|
|
9
|
-
import { customElement, property, query, queryAll } from "lit/decorators.js";
|
|
10
|
-
import { styleMap } from "lit/directives/style-map.js";
|
|
11
|
-
import { map } from "lit/directives/map.js";
|
|
12
|
-
import { FormControlType } from "../types";
|
|
13
|
-
import { FormModel } from "../model/formModel";
|
|
14
|
-
import { dom } from '@omegagrid/core';
|
|
15
|
-
import { style } from './form.style';
|
|
16
|
-
import { msg } from '@omegagrid/localize';
|
|
17
|
-
const controlTypeMap = new Map([
|
|
18
|
-
[FormControlType.Label, literal `og-form-label`],
|
|
19
|
-
[FormControlType.TextInput, literal `og-form-textinput`],
|
|
20
|
-
[FormControlType.ColorInput, literal `og-form-colorinput`],
|
|
21
|
-
[FormControlType.Checkbox, literal `og-form-checkbox`],
|
|
22
|
-
[FormControlType.List, literal `og-form-list`],
|
|
23
|
-
[FormControlType.Button, literal `og-form-button`],
|
|
24
|
-
[FormControlType.NumericInput, literal `og-form-numericinput`],
|
|
25
|
-
[FormControlType.FileInput, literal `og-form-fileinput`],
|
|
26
|
-
[FormControlType.DateInput, literal `og-form-dateinput`],
|
|
27
|
-
[FormControlType.CalendarDateInput, literal `og-form-calendardateinput`],
|
|
28
|
-
]);
|
|
29
|
-
export class FormEvent extends Event {
|
|
30
|
-
constructor(type, args) {
|
|
31
|
-
super(`form.${type}`, { bubbles: true, cancelable: true, composed: true });
|
|
32
|
-
Object.assign(this, args || {});
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
let Form = class Form extends LitElement {
|
|
36
|
-
constructor() {
|
|
37
|
-
super(...arguments);
|
|
38
|
-
this.values = {};
|
|
39
|
-
this.errorCounts = {};
|
|
40
|
-
this.showOverlay = () => this.overlay?.show(this);
|
|
41
|
-
this.hideOverlay = () => this.overlay?.hide();
|
|
42
|
-
this.render = () => {
|
|
43
|
-
const overlay = html `<og-overlay defaultLoader></og-overlay>`;
|
|
44
|
-
if (!this.model)
|
|
45
|
-
return overlay;
|
|
46
|
-
const columns = map(this.model.columns, column => {
|
|
47
|
-
const colStyle = styleMap({ width: column?.width ? dom.numToPixels(column.width) : 'auto' });
|
|
48
|
-
return html `<col style="${colStyle}">`;
|
|
49
|
-
});
|
|
50
|
-
const rows = map(this.model.controls, (row, r) => {
|
|
51
|
-
const cellStyle = styleMap({
|
|
52
|
-
height: (this.model.rows && this.model.rows[r] && this.model.rows[r].height
|
|
53
|
-
? dom.numToPixels(this.model.rows[r].height) : null)
|
|
54
|
-
});
|
|
55
|
-
return html `
|
|
56
|
-
<tr class="row">
|
|
57
|
-
${map(row, (control) => html `
|
|
58
|
-
<td colspan="${control?.props.cs || 1}" rowspan="${control?.props.rs || 1}" style="${cellStyle}">
|
|
59
|
-
${control ? html `
|
|
60
|
-
<${controlTypeMap.get(control.props.type)}
|
|
61
|
-
id="${control.props.key}"
|
|
62
|
-
@change=${this._onValueChange}
|
|
63
|
-
class="control"
|
|
64
|
-
.value="${this.values && this.values[control.props.key] != null ? this.values[control.props.key] : control.props.value}"
|
|
65
|
-
.model="${control}"
|
|
66
|
-
.formModel="${this.model}"
|
|
67
|
-
.adapter="${control.props.adapter || this.model.options.treeAdapter}">
|
|
68
|
-
</${controlTypeMap.get(control.props.type)}>
|
|
69
|
-
${map(control.errors, err => html `
|
|
70
|
-
<div class="error">${msg(err)}</div>
|
|
71
|
-
`)}
|
|
72
|
-
` : ``}
|
|
73
|
-
</td>
|
|
74
|
-
`)}
|
|
75
|
-
</tr>
|
|
76
|
-
`;
|
|
77
|
-
});
|
|
78
|
-
return html `
|
|
79
|
-
${overlay}
|
|
80
|
-
${this.caption ? html `<div class="title">${this.caption}</div>` : ``}
|
|
81
|
-
<div class="body">${this.model ? html `
|
|
82
|
-
<table>
|
|
83
|
-
<colgroup>${columns}</colgroup>
|
|
84
|
-
<tbody>${rows}</tbody>
|
|
85
|
-
</table>
|
|
86
|
-
` : ``}</div>
|
|
87
|
-
`;
|
|
88
|
-
};
|
|
89
|
-
}
|
|
90
|
-
setSourceData(sourceData) {
|
|
91
|
-
this.model = new FormModel(sourceData);
|
|
92
|
-
}
|
|
93
|
-
resetValues() {
|
|
94
|
-
const values = {};
|
|
95
|
-
this.model?.controlMap.forEach(c => values[c.key] = c.props.value);
|
|
96
|
-
this.values = values;
|
|
97
|
-
}
|
|
98
|
-
setValue(key, value) {
|
|
99
|
-
this.values[key] = value;
|
|
100
|
-
const control = this.shadowRoot.querySelector(`#${key}`);
|
|
101
|
-
control.value = value;
|
|
102
|
-
}
|
|
103
|
-
async reset() {
|
|
104
|
-
this.resetValues();
|
|
105
|
-
this.controls.forEach(c => c.reset(false));
|
|
106
|
-
}
|
|
107
|
-
validate() {
|
|
108
|
-
this.controls.forEach(c => c.validate());
|
|
109
|
-
this.requestUpdate();
|
|
110
|
-
}
|
|
111
|
-
isValid() {
|
|
112
|
-
this.validate();
|
|
113
|
-
for (const c of this.controlNodes) {
|
|
114
|
-
if (!c.isValid)
|
|
115
|
-
return false;
|
|
116
|
-
}
|
|
117
|
-
return true;
|
|
118
|
-
}
|
|
119
|
-
async initAdapter() {
|
|
120
|
-
this.showOverlay();
|
|
121
|
-
this.model = new FormModel({
|
|
122
|
-
rows: await this.adapter.getRows(this.key),
|
|
123
|
-
columns: await this.adapter.getColumns(this.key),
|
|
124
|
-
controls: await this.adapter.getControls(this.key)
|
|
125
|
-
});
|
|
126
|
-
this.hideOverlay();
|
|
127
|
-
}
|
|
128
|
-
async updated(changedProps) {
|
|
129
|
-
if (changedProps.has('adapter')) {
|
|
130
|
-
this.adapter?.attach(this);
|
|
131
|
-
await this.initAdapter();
|
|
132
|
-
}
|
|
133
|
-
if (changedProps.has('model')) {
|
|
134
|
-
this.resetValues();
|
|
135
|
-
}
|
|
136
|
-
this.controls = new Map();
|
|
137
|
-
this.controlNodes.forEach(c => this.controls.set(c.id, c));
|
|
138
|
-
this.model?.controls.forEach((row, r) => row.forEach((control, c) => {
|
|
139
|
-
const cs = control.props.cs || 1;
|
|
140
|
-
const rs = control.props.rs || 1;
|
|
141
|
-
if (cs > 1 || rs > 1) {
|
|
142
|
-
for (let ri = r; ri <= r + rs - 1; ri++) {
|
|
143
|
-
for (let ci = c; ci <= c + cs - 1; ci++) {
|
|
144
|
-
const cell = this.rowElms[ri].children[ci];
|
|
145
|
-
if (cell) {
|
|
146
|
-
if (ci != c || ri != r)
|
|
147
|
-
dom.hideCell(cell);
|
|
148
|
-
else
|
|
149
|
-
dom.showCell(cell);
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
else {
|
|
155
|
-
dom.showCell(this.rowElms[r].children[c]);
|
|
156
|
-
}
|
|
157
|
-
}));
|
|
158
|
-
}
|
|
159
|
-
_onValueChange(e) {
|
|
160
|
-
this.values[e.model.key] = e.value;
|
|
161
|
-
if (this.errorCounts[e.model.key] != e.model.errors.length) {
|
|
162
|
-
this.requestUpdate();
|
|
163
|
-
}
|
|
164
|
-
this.errorCounts[e.model.key] = e.model.errors.length;
|
|
165
|
-
this.dispatchEvent(new FormEvent('change', {
|
|
166
|
-
key: e.model.key,
|
|
167
|
-
value: e.value,
|
|
168
|
-
valid: e.model.errors.length == 0
|
|
169
|
-
}));
|
|
170
|
-
}
|
|
171
|
-
};
|
|
172
|
-
Form.styles = [style];
|
|
173
|
-
__decorate([
|
|
174
|
-
property()
|
|
175
|
-
], Form.prototype, "key", void 0);
|
|
176
|
-
__decorate([
|
|
177
|
-
property({ type: Object })
|
|
178
|
-
], Form.prototype, "adapter", void 0);
|
|
179
|
-
__decorate([
|
|
180
|
-
property({ type: Object })
|
|
181
|
-
], Form.prototype, "model", void 0);
|
|
182
|
-
__decorate([
|
|
183
|
-
property({ type: String })
|
|
184
|
-
], Form.prototype, "caption", void 0);
|
|
185
|
-
__decorate([
|
|
186
|
-
queryAll('.control')
|
|
187
|
-
], Form.prototype, "controlNodes", void 0);
|
|
188
|
-
__decorate([
|
|
189
|
-
queryAll('.row')
|
|
190
|
-
], Form.prototype, "rowElms", void 0);
|
|
191
|
-
__decorate([
|
|
192
|
-
query('og-overlay')
|
|
193
|
-
], Form.prototype, "overlay", void 0);
|
|
194
|
-
__decorate([
|
|
195
|
-
property({ type: Object })
|
|
196
|
-
], Form.prototype, "values", void 0);
|
|
197
|
-
Form = __decorate([
|
|
198
|
-
customElement('og-form')
|
|
199
|
-
], Form);
|
|
200
|
-
export { Form };
|
|
201
|
-
//# sourceMappingURL=form.js.map
|
package/dist/ui/form.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
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(false));\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
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"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
DELETED
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import constants from "../constants";
|
|
2
|
-
import { css } from "lit";
|
|
3
|
-
export const style = css `
|
|
4
|
-
:host {
|
|
5
|
-
display: block;
|
|
6
|
-
font-size: var(--og-font-size);
|
|
7
|
-
position: relative;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
* {
|
|
11
|
-
box-sizing: border-box;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.body {
|
|
15
|
-
padding: 11px;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
table {
|
|
19
|
-
border-collapse: collapse;
|
|
20
|
-
width: 100%;
|
|
21
|
-
table-layout: fixed;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
table tr td {
|
|
25
|
-
height: ${constants.DEFAULT_FORM_ROW_HEIGHT}px;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
table td {
|
|
29
|
-
padding: ${constants.DEFAULT_FORM_CELL_PADDING}px;
|
|
30
|
-
overflow: hidden;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
table td > * {
|
|
34
|
-
height: 22px;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.error {
|
|
38
|
-
color: red;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
og-overlay {
|
|
42
|
-
min-height: 200px;
|
|
43
|
-
}
|
|
44
|
-
`;
|
|
45
|
-
//# sourceMappingURL=form.style.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"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: 22px;\n\t}\n\n\t.error {\n\t\tcolor: red;\n\t}\n\n\tog-overlay {\n\t\tmin-height: 200px;\n\t}\n`;"]}
|