@operato/input 9.0.1 → 9.0.8
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/CHANGELOG.md +18 -0
- package/dist/src/ox-input-data.d.ts +1 -0
- package/dist/src/ox-input-data.js +13 -1
- package/dist/src/ox-input-data.js.map +1 -1
- package/dist/src/ox-input-formula.d.ts +67 -0
- package/dist/src/ox-input-formula.js +970 -0
- package/dist/src/ox-input-formula.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +6 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,24 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
### [9.0.8](https://github.com/hatiolab/operato/compare/v9.0.7...v9.0.8) (2025-07-23)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* add ox-input-formula ([d567309](https://github.com/hatiolab/operato/commit/d56730975288cf665622f184ba8fc4086b860b87))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### [9.0.5](https://github.com/hatiolab/operato/compare/v9.0.4...v9.0.5) (2025-07-04)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### :bug: Bug Fix
|
|
19
|
+
|
|
20
|
+
* ox-grist-editor-data ([0e46763](https://github.com/hatiolab/operato/commit/0e46763cd8bacf5268a9be80d0722c6e78373f7b))
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
6
24
|
### [9.0.1](https://github.com/hatiolab/operato/compare/v9.0.0...v9.0.1) (2025-07-01)
|
|
7
25
|
|
|
8
26
|
**Note:** Version bump only for package @operato/input
|
|
@@ -11,6 +11,7 @@ Example:
|
|
|
11
11
|
*/
|
|
12
12
|
export declare class OxInputData extends OxFormField {
|
|
13
13
|
static styles: import("lit").CSSResult[];
|
|
14
|
+
fullWidth: boolean;
|
|
14
15
|
render(): import("lit-html").TemplateResult<1>;
|
|
15
16
|
firstUpdated(): void;
|
|
16
17
|
_setDataTypeAndValue(type: string | undefined | null, value: any): void;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import './ox-input-code.js';
|
|
3
3
|
import { css, html } from 'lit';
|
|
4
|
-
import { customElement } from 'lit/decorators.js';
|
|
4
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
5
5
|
import { live } from 'lit/directives/live.js';
|
|
6
6
|
import { OxFormField } from './ox-form-field.js';
|
|
7
7
|
import { isEqual } from 'lodash-es';
|
|
@@ -15,6 +15,10 @@ Example:
|
|
|
15
15
|
</ox-input-data>
|
|
16
16
|
*/
|
|
17
17
|
let OxInputData = class OxInputData extends OxFormField {
|
|
18
|
+
constructor() {
|
|
19
|
+
super(...arguments);
|
|
20
|
+
this.fullWidth = false;
|
|
21
|
+
}
|
|
18
22
|
static { this.styles = [
|
|
19
23
|
css `
|
|
20
24
|
:host {
|
|
@@ -49,6 +53,10 @@ let OxInputData = class OxInputData extends OxFormField {
|
|
|
49
53
|
max-width: 260px;
|
|
50
54
|
overflow: auto;
|
|
51
55
|
}
|
|
56
|
+
|
|
57
|
+
ox-input-code[full-width] {
|
|
58
|
+
max-width: 100%;
|
|
59
|
+
}
|
|
52
60
|
`
|
|
53
61
|
]; }
|
|
54
62
|
render() {
|
|
@@ -95,6 +103,7 @@ let OxInputData = class OxInputData extends OxFormField {
|
|
|
95
103
|
.value=${this._getStringData(this.value)}
|
|
96
104
|
language="text"
|
|
97
105
|
editor
|
|
106
|
+
?full-width=${this.fullWidth}
|
|
98
107
|
?disabled=${this.disabled}
|
|
99
108
|
@change=${(e) => {
|
|
100
109
|
e.stopPropagation();
|
|
@@ -195,6 +204,9 @@ let OxInputData = class OxInputData extends OxFormField {
|
|
|
195
204
|
}));
|
|
196
205
|
}
|
|
197
206
|
};
|
|
207
|
+
__decorate([
|
|
208
|
+
property({ type: Boolean, attribute: 'full-width' })
|
|
209
|
+
], OxInputData.prototype, "fullWidth", void 0);
|
|
198
210
|
OxInputData = __decorate([
|
|
199
211
|
customElement('ox-input-data')
|
|
200
212
|
], OxInputData);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-data.js","sourceRoot":"","sources":["../../src/ox-input-data.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"ox-input-data.js","sourceRoot":"","sources":["../../src/ox-input-data.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAEhD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,KAAK,CAAA;AAEZ;;;;;;;EAOE;AAEK,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,WAAW;IAArC;;QA0CiD,cAAS,GAAY,KAAK,CAAA;IAmKlF,CAAC;aA5MQ,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqCF;KACF,AAvCY,CAuCZ;IAID,MAAM;QACJ,MAAM,SAAS,GAAG,OAAO,IAAI,CAAC,KAAK,CAAA;QAEnC,OAAO,IAAI,CAAA;;;;;;;qBAOM,IAAI,CAAC,SAAS,IAAI,QAAQ,CAAC;mBAC7B,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;sBAC9B,IAAI,CAAC,QAAQ;;;;;;;;;qBASd,IAAI,CAAC,SAAS,IAAI,QAAQ,CAAC;mBAC7B,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;sBAC9B,IAAI,CAAC,QAAQ;;;;;;;;;qBASd,IAAI,CAAC,SAAS,IAAI,QAAQ,CAAC;mBAC7B,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;sBAC9B,IAAI,CAAC,QAAQ;;;;0BAIT,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE;;;;iBAIhC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC;;;sBAG1B,IAAI,CAAC,SAAS;oBAChB,IAAI,CAAC,QAAQ;kBACf,CAAC,CAAc,EAAE,EAAE;YAC3B,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,CAAC,oBAAoB,CAAC,SAAS,EAAG,CAAC,CAAC,MAAc,CAAC,KAAK,CAAC,CAAA;QAC/D,CAAC;;;KAGJ,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE;YAC7C,CAAC,CAAC,eAAe,EAAE,CAAA;YAEnB,MAAM,MAAM,GAAG,CAAC,CAAC,MAAqB,CAAA;YACtC,IAAI,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,CAAC;gBAClC,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,MAAM,CAAC,KAAK,IAAI,EAAE,EAAE,CAAC;oBACnD,OAAM;gBACR,CAAC;gBACD,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;YAC3B,CAAC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,oBAAoB,CAAC,IAA+B,EAAE,KAAU;QAC9D,4BAA4B;QAC5B,IAAI,CAAC;YACH,QAAQ,IAAI,EAAE,CAAC;gBACb,KAAK,QAAQ;oBACX,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;wBAC1B,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;oBACvB,CAAC;oBACD,MAAK;gBACP,KAAK,QAAQ;oBACX,MAAM,WAAW,GAAG,IAAI,WAAW,EAAE,CAAA;oBACrC,KAAK,GAAG,WAAW,CAAC,QAAQ,CAAC,IAAI,KAAK,GAAG,CAAC,CAAA;oBAC1C,MAAK;YACT,CAAC;QACH,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,OAAO,CAAC,KAAK,CAAC,sBAAsB,EAAE,CAAC,CAAC,CAAA;QAC1C,CAAC;QAED,IAAI,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC;YAC/B,OAAM;QACR,CAAC;QAED,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QAElB,IAAI,CAAC,aAAa,EAAE,CAAA;QACpB,IAAI,CAAC,mBAAmB,EAAE,CAAA;IAC5B,CAAC;IAED,YAAY,CAAC,IAA+B;QAC1C,IAAI,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,EAAE,CAAC;YAC9B,OAAM;QACR,CAAC;QAED,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QAEtB,IAAI,CAAC;YACH,QAAQ,IAAI,EAAE,CAAC;gBACb,KAAK,QAAQ;oBACX,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;oBAClC,MAAK;gBACP,KAAK,QAAQ;oBACX,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;wBAClB,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;oBACvB,CAAC;oBACD,MAAK;gBACP,KAAK,QAAQ;oBACX,MAAM,WAAW,GAAG,IAAI,WAAW,EAAE,CAAA;oBACrC,KAAK,GAAG,WAAW,CAAC,QAAQ,CAAC,IAAI,KAAK,GAAG,CAAC,CAAA;oBAC1C,MAAK;YACT,CAAC;QACH,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,OAAO,CAAC,KAAK,CAAC,0BAA0B,EAAE,CAAC,CAAC,CAAA;QAC9C,CAAC;QAED,IAAI,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC;YAC/B,IAAI,CAAC,aAAa,EAAE,CAAA;YACpB,OAAM;QACR,CAAC;QAED,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QAElB,IAAI,CAAC,aAAa,EAAE,CAAA;QACpB,IAAI,CAAC,mBAAmB,EAAE,CAAA;IAC5B,CAAC;IAED,UAAU;QACR,IAAI,CAAC,KAAK,GAAG,SAAS,CAAA;QACtB,IAAI,CAAC,mBAAmB,EAAE,CAAA;IAC5B,CAAC;IAED,cAAc,CAAC,IAAS;QACtB,MAAM,IAAI,GAAG,OAAO,IAAI,CAAA;QAExB,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,QAAQ;gBACX,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;YACtC,KAAK,WAAW;gBACd,OAAO,EAAE,CAAA;YACX;gBACE,OAAO,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,CAAA;QAC7B,CAAC;IACH,CAAC;IAED,KAAK,CAAC,mBAAmB;QACvB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAA;IACH,CAAC;;AAlKqD;IAArD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;8CAA2B;AA1CrE,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CA6MvB","sourcesContent":["import './ox-input-code.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { live } from 'lit/directives/live.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { OxInputCode } from './ox-input-code.js'\nimport { isEqual } from 'lodash-es'\nimport 'ses'\n\n/**\nWEB Component for code-mirror based data editor.\n\nExample:\n\n <ox-input-data value=${text}>\n </ox-input-data>\n*/\n@customElement('ox-input-data')\nexport class OxInputData extends OxFormField {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n position: relative;\n }\n\n div.datatype {\n display: flex;\n align-items: center;\n margin-bottom: var(--spacing-small);\n padding: var(--spacing-small);\n background-color: var(--md-sys-color-primary-container);\n border: 1px solid var(--md-sys-color-primary-fixed-dim);\n border-radius: var(--md-sys-shape-corner-small);\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-on-primary-container);\n }\n\n div.datatype md-icon {\n margin-left: auto;\n color: var(--md-sys-color-primary);\n cursor: pointer;\n }\n div.datatype label {\n margin-right: var(--spacing-small);\n }\n\n ox-input-code {\n flex: 1;\n max-width: 260px;\n overflow: auto;\n }\n\n ox-input-code[full-width] {\n max-width: 100%;\n }\n `\n ]\n\n @property({ type: Boolean, attribute: 'full-width' }) fullWidth: boolean = false\n\n render() {\n const valueType = typeof this.value\n\n return html`\n <div class=\"datatype\">\n <input\n id=\"string\"\n type=\"radio\"\n name=\"data-type\"\n data-value=\"string\"\n .checked=${live(valueType == 'string')}\n @click=${() => this._setDataType('string')}\n ?disabled=${this.disabled}\n />\n <label for=\"string\">string</label>\n\n <input\n id=\"number\"\n type=\"radio\"\n name=\"data-type\"\n data-value=\"number\"\n .checked=${live(valueType == 'number')}\n @click=${() => this._setDataType('number')}\n ?disabled=${this.disabled}\n />\n <label for=\"number\">number</label>\n\n <input\n id=\"object\"\n type=\"radio\"\n name=\"data-type\"\n data-value=\"object\"\n .checked=${live(valueType == 'object')}\n @click=${() => this._setDataType('object')}\n ?disabled=${this.disabled}\n />\n <label for=\"object\">object</label>\n\n <md-icon @click=${() => this._clearData()} title=\"delete\">delete_forever</md-icon>\n </div>\n\n <ox-input-code\n .value=${this._getStringData(this.value)}\n language=\"text\"\n editor\n ?full-width=${this.fullWidth}\n ?disabled=${this.disabled}\n @change=${(e: CustomEvent) => {\n e.stopPropagation()\n this._setDataTypeAndValue(valueType, (e.target as any).value)\n }}\n >\n </ox-input-code>\n `\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', e => {\n e.stopPropagation()\n\n const target = e.target as OxInputCode\n if (target.hasAttribute('editor')) {\n if (this.value === undefined && target.value == '') {\n return\n }\n this.value = target.value\n }\n })\n }\n\n _setDataTypeAndValue(type: string | undefined | null, value: any) {\n /* value must be a string */\n try {\n switch (type) {\n case 'number':\n if (!isNaN(Number(value))) {\n value = Number(value)\n }\n break\n case 'object':\n const compartment = new Compartment()\n value = compartment.evaluate(`(${value})`)\n break\n }\n } catch (e) {\n console.error('Error parsing value:', e)\n }\n\n if (isEqual(this.value, value)) {\n return\n }\n\n this.value = value\n\n this.requestUpdate()\n this._onAfterValueChange()\n }\n\n _setDataType(type: string | undefined | null) {\n if (typeof this.value == type) {\n return\n }\n\n var value = this.value\n\n try {\n switch (type) {\n case 'string':\n value = this._getStringData(value)\n break\n case 'number':\n if (!isNaN(value)) {\n value = Number(value)\n }\n break\n case 'object':\n const compartment = new Compartment()\n value = compartment.evaluate(`(${value})`)\n break\n }\n } catch (e) {\n console.error('Error setting data type:', e)\n }\n\n if (isEqual(this.value, value)) {\n this.requestUpdate()\n return\n }\n\n this.value = value\n\n this.requestUpdate()\n this._onAfterValueChange()\n }\n\n _clearData() {\n this.value = undefined\n this._onAfterValueChange()\n }\n\n _getStringData(data: any) {\n const type = typeof data\n\n switch (type) {\n case 'object':\n return JSON.stringify(data, null, 1)\n case 'undefined':\n return ''\n default:\n return String(data) || ''\n }\n }\n\n async _onAfterValueChange() {\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true\n })\n )\n }\n}\n"]}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
|
+
*/
|
|
4
|
+
import '@material/web/icon/icon.js';
|
|
5
|
+
import '@material/web/button/elevated-button.js';
|
|
6
|
+
import '@operato/i18n/ox-i18n.js';
|
|
7
|
+
import { OxFormField } from '@operato/input';
|
|
8
|
+
type FormulaVariable = {
|
|
9
|
+
name: string;
|
|
10
|
+
description?: string;
|
|
11
|
+
type?: 'number' | 'string' | 'date' | 'metric' | 'kpi';
|
|
12
|
+
unit?: string;
|
|
13
|
+
help?: string;
|
|
14
|
+
example?: string;
|
|
15
|
+
};
|
|
16
|
+
type FormulaFunction = {
|
|
17
|
+
name: string;
|
|
18
|
+
description: string;
|
|
19
|
+
template: string;
|
|
20
|
+
syntax: string;
|
|
21
|
+
parameters: string[];
|
|
22
|
+
returnType: string;
|
|
23
|
+
help?: string;
|
|
24
|
+
examples?: string[];
|
|
25
|
+
};
|
|
26
|
+
/**
|
|
27
|
+
* Formula editor component for KPI calculations
|
|
28
|
+
*
|
|
29
|
+
* Example:
|
|
30
|
+
*
|
|
31
|
+
* <ox-input-formula
|
|
32
|
+
* .value=${formulaValue}
|
|
33
|
+
* .availableVariables=${variables}
|
|
34
|
+
* ></ox-input-formula>
|
|
35
|
+
*/
|
|
36
|
+
export declare class KpiFormulaEditor extends OxFormField {
|
|
37
|
+
static styles: import("lit").CSSResult[];
|
|
38
|
+
value: string;
|
|
39
|
+
availableVariables: FormulaVariable[];
|
|
40
|
+
private errorMessage;
|
|
41
|
+
private isValid;
|
|
42
|
+
editor: HTMLTextAreaElement;
|
|
43
|
+
private _changingNow;
|
|
44
|
+
getValue(): any;
|
|
45
|
+
setValue(value: any): void;
|
|
46
|
+
validate(): boolean;
|
|
47
|
+
getErrorMessage(): string;
|
|
48
|
+
focus(): void;
|
|
49
|
+
blur(): void;
|
|
50
|
+
reset(): void;
|
|
51
|
+
private readonly operators;
|
|
52
|
+
private readonly functions;
|
|
53
|
+
private _normalizeVariableName;
|
|
54
|
+
firstUpdated(): void;
|
|
55
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
56
|
+
updated(changes: any): void;
|
|
57
|
+
_onChange(e: Event): void;
|
|
58
|
+
_onFormulaInput(e: Event): void;
|
|
59
|
+
_insertVariable(variableName: string): void;
|
|
60
|
+
_insertOperator(operator: string): void;
|
|
61
|
+
_insertFunction(template: string): void;
|
|
62
|
+
_showVariableHelp(e: Event, variable: FormulaVariable): void;
|
|
63
|
+
_showFunctionHelp(e: Event, func: FormulaFunction): void;
|
|
64
|
+
_validateFormula(): void;
|
|
65
|
+
_updateValue(): void;
|
|
66
|
+
}
|
|
67
|
+
export {};
|