@omegagrid/form 0.10.2 → 0.10.4

package/dist/ui/formContainer.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+import { Overlay } from '@omegagrid/core';
+import { FormAlert, FormButtonConfig, FormButtonType, FormContainerOptions, FormSettings, FormValues } from '../types';
+import { FormAdapter } from '../model';
+import { Form } from './form';
+export declare class FormContainer extends LitElement {
+    static styles: import("lit").CSSResult[];
+    config: FormSettings[];
+    options: FormContainerOptions;
+    collapsibleForms: boolean;
+    adapter: FormAdapter;
+    alerts: FormAlert[];
+    overlay: Overlay;
+    forms: NodeListOf<Form>;
+    private _saving;
+    constructor();
+    connectedCallback(): void;
+    showOverlay: () => void;
+    hideOverlay: () => HTMLElement;
+    get values(): Map<string | number, FormValues>;
+    setSourceData(config: FormSettings[], options?: Partial<FormContainerOptions>): void;
+    reset(dispatchEvent?: boolean): void;
+    isValid(): boolean;
+    save(dispatchEvent?: boolean): Promise<boolean>;
+    _onButtonClick: (btn: FormButtonConfig) => void;
+    initAdapter(): Promise<void>;
+    updated(changedProps: Map<PropertyKey, unknown>): Promise<void>;
+    renderButton: (type: FormButtonType) => import("lit-html").TemplateResult<1>;
+    render: () => import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=formContainer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"formContainer.d.ts","sourceRoot":"","sources":["../../src/ui/formContainer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAGvC,OAAO,EAAuB,OAAO,EAAS,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,cAAc,EAAE,oBAAoB,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACvH,OAAO,EAAE,WAAW,EAAa,MAAM,UAAU,CAAC;AAGlD,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAC;AAGzC,qBACa,aAAc,SAAQ,UAAU;IAE5C,MAAM,CAAC,MAAM,4BAAW;IAGxB,MAAM,EAAE,YAAY,EAAE,CAAC;IAGvB,OAAO,EAAE,oBAAoB,CAAiB;IAG9C,gBAAgB,UAAS;IAGzB,OAAO,EAAE,WAAW,CAAC;IAGrB,MAAM,EAAE,SAAS,EAAE,CAAC;IAGpB,OAAO,EAAE,OAAO,CAAC;IAGjB,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAExB,OAAO,CAAC,OAAO,CAAS;;IASxB,iBAAiB;IAKjB,WAAW,aAAkC;IAC7C,WAAW,oBAA8B;IAEzC,IAAI,MAAM,qCAIT;IAED,aAAa,CAAC,MAAM,EAAE,YAAY,EAAE,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC;IAK7E,KAAK,CAAC,aAAa,UAAO;IAK1B,OAAO;IAID,IAAI,CAAC,aAAa,UAAO;IA6B/B,cAAc,GAAI,KAAK,gBAAgB,UActC;IAEK,WAAW;IAOX,OAAO,CAAC,YAAY,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAMrD,YAAY,GAAI,MAAM,cAAc,0CAalC;IAEF,MAAM,6CAyCL;CAED"}

package/dist/ui/formContainer.js

@@ -0,0 +1,197 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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, LitElement } from 'lit';
+import { customElement, property, query, queryAll } from "lit/decorators.js";
+import { map } from "lit/directives/map.js";
+import { actions, ColorTypes, utils } from '@omegagrid/core';
+import { FormModel } from '../model';
+import constants from '../constants';
+import { initOptions } from '../options';
+import { FormEvent } from './form';
+import { style } from './formContainer.style';
+let FormContainer = class FormContainer extends LitElement {
+    constructor() {
+        super();
+        this.options = initOptions();
+        this.collapsibleForms = false;
+        this._saving = false;
+        this.showOverlay = () => this.overlay?.show(this);
+        this.hideOverlay = () => this.overlay?.hide();
+        this._onButtonClick = (btn) => {
+            switch (btn.key) {
+                case 'save':
+                    this.save();
+                    break;
+                case 'reset':
+                    this.reset();
+                    break;
+                case 'close':
+                    this.dispatchEvent(new Event('close'));
+                    break;
+                default:
+                    this.adapter?.onAction(btn.key);
+                    this.dispatchEvent(new actions.ActionEvent('form', { key: btn.key }, null, {
+                        bubbles: true,
+                        composed: true,
+                        common: true
+                    }));
+                    break;
+            }
+        };
+        this.renderButton = (type) => {
+            const btn = utils.isObject(type) ? type : constants.BUTTON_CONFIG.get(type);
+            btn.key = btn.key ?? (utils.isString(type) ? type : null);
+            btn.color = btn.color || ColorTypes.Gray;
+            return html `
+			<og-button 
+				.text="${btn.text}"
+				.color="${btn.color}"
+				.icon="${btn.icon}"
+				@click="${() => this._onButtonClick(btn)}"
+				?default="${btn.default}">
+			</og-button>
+		`;
+        };
+        this.render = () => {
+            const buttons = this.options.buttons.length > 0
+                ? html `<div class="buttons">${map(this.options.buttons, type => this.renderButton(type))}</div>`
+                : null;
+            const alerts = map(this.alerts, alert => html `
+			<og-alert .text="${alert.text}" .type="${alert.type}"></og-alert>
+		`);
+            return html `
+			${this.options.caption ? html `<div class="title">${this.options.caption}</div>` : ``}
+			${this.options.buttonsPosition == 'top' ? buttons : ``}
+			${this.options.alertsPosition == 'top' ? alerts : ``}
+			<og-overlay defaultLoader></og-overlay>
+			<og-container>
+				<div slot="content">
+					${map(this.config, (f, index) => {
+                const form = html `
+							<og-form
+								slot="body"
+								key=${f.key ?? index.toString()}
+								.adapter=${this.adapter}
+								.model=${this.adapter == null ? new FormModel(f) : null}
+								.rows=${f.rows}
+								.columns=${f.columns}>
+							</og-form>
+						`;
+                return f.caption ? html `
+							<og-panel ?collapsible="${this.collapsibleForms}">
+								${f.caption ? html `<div slot="header">${f.caption}</div>` : ``}
+								${form}
+							</og-panel>
+						` : html `
+							<div>${form}</div>
+						`;
+            })}
+				</div>
+			</og-container>
+			${this.options.alertsPosition == 'bottom' ? alerts : ``}
+			${this.options.buttonsPosition == 'bottom' ? buttons : ``}
+		`;
+        };
+        this.addEventListener('keydown', (e) => {
+            if (e.key == 'Enter')
+                this.save();
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.tabIndex = 0;
+    }
+    get values() {
+        const values = new Map();
+        this.forms.forEach((f, i) => values.set(this.config[i].key ?? i, f.values));
+        return values;
+    }
+    setSourceData(config, options) {
+        this.config = config;
+        this.options = initOptions(options, this.options);
+    }
+    reset(dispatchEvent = true) {
+        this.forms.forEach(f => f.reset());
+        if (dispatchEvent)
+            this.dispatchEvent(new FormEvent('reset'));
+    }
+    isValid() {
+        return Array.from(this.forms.values()).every(f => f.isValid());
+    }
+    async save(dispatchEvent = true) {
+        if (this._saving)
+            return false;
+        if (!this.isValid())
+            return false;
+        this._saving = true;
+        if (this.adapter) {
+            this.showOverlay();
+            let success = true;
+            try {
+                const result = await this.adapter.save(this.values);
+                if (result === false) {
+                    success = false;
+                }
+                else if (Array.isArray(result)) {
+                    this.alerts = result;
+                }
+            }
+            catch (error) {
+                success = false;
+                this.alerts = [{ text: error.message, type: 'danger' }];
+            }
+            this.hideOverlay();
+            if (dispatchEvent && success) {
+                this.dispatchEvent(new FormEvent('save'));
+                if (this.options.closeAfterSave)
+                    this.dispatchEvent(new Event('close'));
+            }
+        }
+        else if (dispatchEvent)
+            this.dispatchEvent(new FormEvent('save'));
+        this._saving = false;
+        return true;
+    }
+    async initAdapter() {
+        this.showOverlay();
+        this.config = await this.adapter.getForms();
+        this.options = initOptions(await this.adapter.getOptions(), this.options);
+        this.hideOverlay();
+    }
+    async updated(changedProps) {
+        if (changedProps.has('adapter')) {
+            await this.initAdapter();
+        }
+    }
+};
+FormContainer.styles = [style];
+__decorate([
+    property({ type: Array })
+], FormContainer.prototype, "config", void 0);
+__decorate([
+    property({ type: Object })
+], FormContainer.prototype, "options", void 0);
+__decorate([
+    property({ type: Boolean })
+], FormContainer.prototype, "collapsibleForms", void 0);
+__decorate([
+    property({ type: Object })
+], FormContainer.prototype, "adapter", void 0);
+__decorate([
+    property({ type: Array })
+], FormContainer.prototype, "alerts", void 0);
+__decorate([
+    query('og-overlay')
+], FormContainer.prototype, "overlay", void 0);
+__decorate([
+    queryAll('og-form')
+], FormContainer.prototype, "forms", void 0);
+FormContainer = __decorate([
+    customElement('og-form-container')
+], FormContainer);
+export { FormContainer };
+//# sourceMappingURL=formContainer.js.map

package/dist/ui/formContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formContainer.js","sourceRoot":"","sources":["../../src/ui/formContainer.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query, queryAll } from \"lit/decorators.js\";\nimport { map } from \"lit/directives/map.js\";\nimport { actions, ColorTypes, Overlay, utils } from '@omegagrid/core';\nimport { FormAlert, FormButtonConfig, FormButtonType, FormContainerOptions, FormSettings, FormValues } from '../types';\nimport { FormAdapter, FormModel } from '../model';\nimport constants from '../constants';\nimport { initOptions } from '../options';\nimport { Form, FormEvent } from './form'; \nimport { style } from './formContainer.style';\n\n@customElement('og-form-container')\nexport class FormContainer extends LitElement {\n\n\tstatic styles = [style];\n\n\t@property({type: Array})\n\tconfig: FormSettings[];\n\n\t@property({type: Object})\n\toptions: FormContainerOptions = initOptions();\n\n\t@property({type: Boolean})\n\tcollapsibleForms = false;\n\n\t@property({type: Object})\n\tadapter: FormAdapter;\n\n\t@property({type: Array})\n\talerts: FormAlert[];\n\n\t@query('og-overlay')\n\toverlay: Overlay;\n\n\t@queryAll('og-form')\n\tforms: NodeListOf<Form>;\n\n\tprivate _saving = false;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.addEventListener('keydown', (e: KeyboardEvent) => {\n\t\t\tif (e.key == 'Enter') this.save();\n\t\t});\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis.tabIndex = 0;\n\t}\n\n\tshowOverlay = () => this.overlay?.show(this);\n\thideOverlay = () => this.overlay?.hide();\n\n\tget values() {\n\t\tconst values = new Map<string|number, FormValues>(); \n\t\tthis.forms.forEach((f, i) => values.set(this.config[i].key ?? i, f.values));\n\t\treturn values;\n\t}\n\t\n\tsetSourceData(config: FormSettings[], options?: Partial<FormContainerOptions>) {\n\t\tthis.config = config;\n\t\tthis.options = initOptions(options, this.options);\n\t}\n\n\treset(dispatchEvent = true) {\n\t\tthis.forms.forEach(f => f.reset());\n\t\tif (dispatchEvent) this.dispatchEvent(new FormEvent('reset'));\n\t}\n\t\n\tisValid() {\n\t\treturn Array.from(this.forms.values()).every(f => f.isValid());\n\t}\n\n\tasync save(dispatchEvent = true) {\n\t\tif (this._saving) return false;\n\t\tif (!this.isValid()) return false;\n\t\tthis._saving = true;\n\t\tif (this.adapter) {\n\t\t\tthis.showOverlay();\n\t\t\tlet success = true;\n\t\t\ttry {\n\t\t\t\tconst result = await this.adapter.save(this.values);\n\t\t\t\tif (result === false) {\n\t\t\t\t\tsuccess = false;\n\t\t\t\t} else if (Array.isArray(result)) {\n\t\t\t\t\tthis.alerts = result;\n\t\t\t\t}\n\t\t\t} catch (error) {\n\t\t\t\tsuccess = false;\n\t\t\t\tthis.alerts = [{text: error.message, type: 'danger'}];\n\t\t\t}\n\t\t\t\n\t\t\tthis.hideOverlay();\n\t\t\tif (dispatchEvent && success) {\n\t\t\t\tthis.dispatchEvent(new FormEvent('save'));\n\t\t\t\tif (this.options.closeAfterSave) this.dispatchEvent(new Event('close'));\n\t\t\t}\n\t\t} else if (dispatchEvent) this.dispatchEvent(new FormEvent('save'));\n\t\tthis._saving = false\n\t\treturn true;\n\t}\n\n\t_onButtonClick = (btn: FormButtonConfig) => {\n\t\tswitch (btn.key) {\n\t\t\tcase 'save': this.save(); break;\n\t\t\tcase 'reset': this.reset(); break;\n\t\t\tcase 'close': this.dispatchEvent(new Event('close')); break;\n\t\t\tdefault:\n\t\t\t\tthis.adapter?.onAction(btn.key);\n\t\t\t\tthis.dispatchEvent(new actions.ActionEvent('form', {key: btn.key}, null, {\n\t\t\t\t\tbubbles: true, \n\t\t\t\t\tcomposed: true,\n\t\t\t\t\tcommon: true\n\t\t\t\t}));\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\tasync initAdapter() {\n\t\tthis.showOverlay();\n\t\tthis.config = await this.adapter.getForms();\n\t\tthis.options = initOptions(await this.adapter.getOptions(), this.options);\n\t\tthis.hideOverlay();\n\t}\n\n\tasync updated(changedProps: Map<PropertyKey, unknown>) {\n\t\tif (changedProps.has('adapter')) {\n\t\t\tawait this.initAdapter();\n\t\t}\n\t}\n\n\trenderButton = (type: FormButtonType) => {\n\t\tconst btn = utils.isObject(type) ? (type as FormButtonConfig) : constants.BUTTON_CONFIG.get(type);\n\t\tbtn.key = btn.key ?? (utils.isString(type) ? (type as string) : null);\n\t\tbtn.color = btn.color || ColorTypes.Gray;\n\t\treturn html`\n\t\t\t<og-button \n\t\t\t\t.text=\"${btn.text}\"\n\t\t\t\t.color=\"${btn.color}\"\n\t\t\t\t.icon=\"${btn.icon}\"\n\t\t\t\t@click=\"${() => this._onButtonClick(btn)}\"\n\t\t\t\t?default=\"${btn.default}\">\n\t\t\t</og-button>\n\t\t`;\n\t};\n\n\trender = () => {\n\t\tconst buttons = this.options.buttons.length > 0\n\t\t\t? html`<div class=\"buttons\">${map(this.options.buttons, type => this.renderButton(type))}</div>`\n\t\t\t: null;\n\n\t\tconst alerts = map(this.alerts, alert => html`\n\t\t\t<og-alert .text=\"${alert.text}\" .type=\"${alert.type}\"></og-alert>\n\t\t`);\n\n\t\treturn html`\n\t\t\t${this.options.caption ? html`<div class=\"title\">${this.options.caption}</div>`: ``}\n\t\t\t${this.options.buttonsPosition == 'top' ? buttons : ``}\n\t\t\t${this.options.alertsPosition == 'top' ? alerts : ``}\n\t\t\t<og-overlay defaultLoader></og-overlay>\n\t\t\t<og-container>\n\t\t\t\t<div slot=\"content\">\n\t\t\t\t\t${map(this.config, (f, index) => {\n\t\t\t\t\t\tconst form = html`\n\t\t\t\t\t\t\t<og-form\n\t\t\t\t\t\t\t\tslot=\"body\"\n\t\t\t\t\t\t\t\tkey=${f.key ?? index.toString()}\n\t\t\t\t\t\t\t\t.adapter=${this.adapter}\n\t\t\t\t\t\t\t\t.model=${this.adapter == null ? new FormModel(f) : null}\n\t\t\t\t\t\t\t\t.rows=${f.rows}\n\t\t\t\t\t\t\t\t.columns=${f.columns}>\n\t\t\t\t\t\t\t</og-form>\n\t\t\t\t\t\t`;\n\t\t\t\t\t\treturn f.caption ? html`\n\t\t\t\t\t\t\t<og-panel ?collapsible=\"${this.collapsibleForms}\">\n\t\t\t\t\t\t\t\t${f.caption ? html`<div slot=\"header\">${f.caption}</div>` : ``}\n\t\t\t\t\t\t\t\t${form}\n\t\t\t\t\t\t\t</og-panel>\n\t\t\t\t\t\t` : html`\n\t\t\t\t\t\t\t<div>${form}</div>\n\t\t\t\t\t\t`;\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t</og-container>\n\t\t\t${this.options.alertsPosition == 'bottom' ? alerts : ``}\n\t\t\t${this.options.buttonsPosition == 'bottom' ? buttons : ``}\n\t\t`;\n\t}\n\n}"]}

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

@@ -0,0 +1,2 @@
+export declare const style: import("lit").CSSResult;
+//# sourceMappingURL=formContainer.style.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,39 @@
+import { css } from "lit";
+export const style = css `
+	* {
+		box-sizing: border-box;
+	}
+
+	:host {
+		display: flex;
+		flex-direction: column;
+		position: relative;
+		border-radius: var(--og-base-radius);
+	}
+
+	.title {
+		background-color: var(--og-accent-color);
+		padding: 5px;
+		color: var(--og-text-color-reversed);
+		flex: 0;
+	}
+
+	og-container {
+		flex: 1;
+	}
+
+	.buttons {
+		display: flex;
+		flex-direction: row;
+		gap: 4px;
+		justify-content: flex-end;
+		border-top: 1px solid var(--og-border-color);
+		padding: 4px;
+	}
+
+	.buttons og-button {
+		min-width: 80px;
+		text-align: center;
+	}
+`;
+//# sourceMappingURL=formContainer.style.js.map

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

@@ -0,0 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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/dist/ui/index.d.ts

@@ -0,0 +1,4 @@
+export * from './form';
+export * from './formContainer';
+export * from './controls';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC"}

package/dist/ui/index.js

@@ -0,0 +1,4 @@
+export * from './form';
+export * from './formContainer';
+export * from './controls';
+//# sourceMappingURL=index.js.map

package/dist/ui/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC","sourcesContent":["export * from './form';\nexport * from './formContainer';\nexport * from './controls';"]}

package/package.json

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