@record-evolution/widget-switch 1.1.4 → 1.1.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.
Files changed (8) hide show
  1. package/README.md +1 -1
  2. package/dist/widget-switch.js +101 -77
  3. package/dist/widget-switch.js.map +1 -1
  4. package/package.json +2 -2
  5. package/src/default-data.json +5 -11
  6. package/src/definition-schema.d.ts +6 -22
  7. package/src/definition-schema.json +27 -28
  8. package/src/widget-switch.ts +29 -5
package/README.md CHANGED
@@ -29,7 +29,7 @@ npm i @record-evolution/widget-switch
29
29
  The widget accepts an `inputData` property with the following structure:
30
30
 
31
31
  ```typescript
32
- interface InputData {
32
+ interface SwitchConfiguration {
33
33
  title?: string
34
34
  subTitle?: string
35
35
  dataseries?: Array<{
package/dist/widget-switch.js CHANGED
@@ -1,101 +1,101 @@
1
1
  import { css as d, LitElement as u, html as h } from "lit";
2
2
  import { repeat as v } from "lit/directives/repeat.js";
3
- import { property as m, state as n, customElement as b } from "lit/decorators.js";
3
+ import { property as m, state as n, customElement as w } from "lit/decorators.js";
4
4
  import "@material/web/switch/switch.js";
5
- var f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, c = (t, e, r, s) => {
6
- for (var l = s > 1 ? void 0 : s ? g(e, r) : e, p = t.length - 1, i; p >= 0; p--)
7
- (i = t[p]) && (l = (s ? i(e, r, l) : i(l)) || l);
8
- return s && l && f(e, r, l), l;
5
+ var f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, c = (e, t, o, r) => {
6
+ for (var l = r > 1 ? void 0 : r ? g(t, o) : t, p = e.length - 1, i; p >= 0; p--)
7
+ (i = e[p]) && (l = (r ? i(t, o, l) : i(l)) || l);
8
+ return r && l && f(t, o, l), l;
9
9
  };
10
10
  let a = class extends u {
11
11
  constructor() {
12
- super(), this.dataSets = /* @__PURE__ */ new Map(), this.textActive = !0, this.version = "1.1.4", this.origWidth = 0, this.origHeight = 0, this.resizeObserver = new ResizeObserver(this.applyData.bind(this)), this.resizeObserver.observe(this);
12
+ super(), this.dataSets = /* @__PURE__ */ new Map(), this.textActive = !0, this.version = "1.1.8", this.origWidth = 0, this.origHeight = 0, this.resizeObserver = new ResizeObserver(this.applyData.bind(this)), this.resizeObserver.observe(this);
13
13
  }
14
14
  disconnectedCallback() {
15
15
  super.disconnectedCallback(), this.resizeObserver && this.resizeObserver.disconnect();
16
16
  }
17
- firstUpdated(t) {
17
+ firstUpdated(e) {
18
18
  this.valueContainer = this?.shadowRoot?.querySelector(".value-container"), this.registerTheme(this.theme), this.transformData(), this.applyData();
19
19
  }
20
- update(t) {
21
- t.has("inputData") && (this.transformData(), this.applyData()), t.has("theme") && this.registerTheme(this.theme), super.update(t);
20
+ update(e) {
21
+ e.has("inputData") && (this.transformData(), this.applyData()), e.has("theme") && this.registerTheme(this.theme), super.update(e);
22
22
  }
23
- registerTheme(t) {
24
- const e = getComputedStyle(this).getPropertyValue("--re-text-color").trim(), r = getComputedStyle(this).getPropertyValue("--re-tile-background-color").trim(), s = getComputedStyle(this).getPropertyValue("--re-primary-color").trim();
25
- this.themeBgColor = r || this.theme?.theme_object?.backgroundColor, this.themeTitleColor = e || this.theme?.theme_object?.title?.textStyle?.color, this.themeSubtitleColor = e || this.theme?.theme_object?.title?.subtextStyle?.color || this.themeTitleColor, this.themePrimaryColor = s || this.theme?.theme_object?.color?.[0] || "#5470c6";
23
+ registerTheme(e) {
24
+ const t = getComputedStyle(this).getPropertyValue("--re-text-color").trim(), o = getComputedStyle(this).getPropertyValue("--re-tile-background-color").trim(), r = getComputedStyle(this).getPropertyValue("--re-primary-color").trim();
25
+ this.themeBgColor = o || this.theme?.theme_object?.backgroundColor, this.themeTitleColor = t || this.theme?.theme_object?.title?.textStyle?.color, this.themeSubtitleColor = t || this.theme?.theme_object?.title?.subtextStyle?.color || this.themeTitleColor, this.themePrimaryColor = r || this.theme?.theme_object?.color?.[0] || "#5470c6";
26
26
  }
27
27
  applyData() {
28
28
  }
29
29
  async transformData() {
30
- this.inputData && (this.dataSets.forEach((t) => {
31
- t.label ??= "";
32
- }), this.dataSets = /* @__PURE__ */ new Map(), this.inputData?.dataseries?.forEach((t, e) => {
33
- t.selected = void 0;
34
- let r = t.label;
35
- this.dataSets.has(r ?? "") && (r += "-" + e);
36
- const s = {
37
- label: r,
38
- actionApp: t?.actionApp,
39
- actionDevice: t?.actionDevice,
40
- actionTopic: t?.actionTopic,
41
- multiChart: t.multiChart,
42
- styling: t.styling,
43
- selected: this.isSelected(t)
30
+ this.inputData && (this.dataSets.forEach((e) => {
31
+ e.label ??= "";
32
+ }), this.dataSets = /* @__PURE__ */ new Map(), this.inputData?.dataseries?.forEach((e, t) => {
33
+ e.selected = void 0;
34
+ let o = e.label;
35
+ this.dataSets.has(o ?? "") && (o += "-" + t);
36
+ const r = {
37
+ label: o,
38
+ description: e?.description,
39
+ actionApp: e?.actionApp,
40
+ actionDevice: e?.actionDevice,
41
+ actionTopic: e?.actionTopic,
42
+ multiChart: e.multiChart,
43
+ selected: this.isSelected(e)
44
44
  };
45
- this.dataSets.set(s.label ?? "", s);
45
+ this.dataSets.set(r.label ?? "", r);
46
46
  }));
47
47
  }
48
- isSelected(t) {
49
- const e = t.value;
50
- if (e === void 0) return;
51
- const r = t?.stateMap?.on;
52
- if (r?.startsWith("<=")) {
53
- const i = parseFloat(e ?? ""), o = parseFloat(r.substring(2));
54
- return isNaN(i) || isNaN(o) ? void 0 : i <= o;
48
+ isSelected(e) {
49
+ const t = e.value;
50
+ if (t === void 0) return;
51
+ const o = e?.stateMap?.on;
52
+ if (o?.startsWith("<=")) {
53
+ const i = parseFloat(t ?? ""), s = parseFloat(o.substring(2));
54
+ return isNaN(i) || isNaN(s) ? void 0 : i <= s;
55
55
  }
56
- if (r?.startsWith("<")) {
57
- const i = parseFloat(e ?? ""), o = parseFloat(r.substring(1));
58
- return isNaN(i) || isNaN(o) ? void 0 : i < o;
56
+ if (o?.startsWith("<")) {
57
+ const i = parseFloat(t ?? ""), s = parseFloat(o.substring(1));
58
+ return isNaN(i) || isNaN(s) ? void 0 : i < s;
59
59
  }
60
- if (r?.startsWith(">=")) {
61
- const i = parseFloat(e ?? ""), o = parseFloat(r.substring(2));
62
- return isNaN(i) || isNaN(o) ? void 0 : i >= o;
60
+ if (o?.startsWith(">=")) {
61
+ const i = parseFloat(t ?? ""), s = parseFloat(o.substring(2));
62
+ return isNaN(i) || isNaN(s) ? void 0 : i >= s;
63
63
  }
64
- if (r?.startsWith(">")) {
65
- const i = parseFloat(e ?? ""), o = parseFloat(r.substring(1));
66
- return isNaN(i) || isNaN(o) ? void 0 : i > o;
64
+ if (o?.startsWith(">")) {
65
+ const i = parseFloat(t ?? ""), s = parseFloat(o.substring(1));
66
+ return isNaN(i) || isNaN(s) ? void 0 : i > s;
67
67
  }
68
- const s = t?.stateMap?.off;
69
- if (s?.startsWith("<=")) {
70
- const i = parseFloat(e ?? ""), o = parseFloat(s.substring(2));
71
- return isNaN(i) || isNaN(o) ? void 0 : i > o;
68
+ const r = e?.stateMap?.off;
69
+ if (r?.startsWith("<=")) {
70
+ const i = parseFloat(t ?? ""), s = parseFloat(r.substring(2));
71
+ return isNaN(i) || isNaN(s) ? void 0 : i > s;
72
72
  }
73
- if (s?.startsWith("<")) {
74
- const i = parseFloat(e ?? ""), o = parseFloat(s.substring(1));
75
- return isNaN(i) || isNaN(o) ? void 0 : i <= o;
73
+ if (r?.startsWith("<")) {
74
+ const i = parseFloat(t ?? ""), s = parseFloat(r.substring(1));
75
+ return isNaN(i) || isNaN(s) ? void 0 : i <= s;
76
76
  }
77
- if (s?.startsWith(">=")) {
78
- const i = parseFloat(e ?? ""), o = parseFloat(s.substring(2));
79
- return isNaN(i) || isNaN(o) ? void 0 : i < o;
77
+ if (r?.startsWith(">=")) {
78
+ const i = parseFloat(t ?? ""), s = parseFloat(r.substring(2));
79
+ return isNaN(i) || isNaN(s) ? void 0 : i < s;
80
80
  }
81
- if (s?.startsWith(">")) {
82
- const i = parseFloat(e ?? ""), o = parseFloat(s.substring(1));
83
- return isNaN(i) || isNaN(o) ? void 0 : i <= o;
81
+ if (r?.startsWith(">")) {
82
+ const i = parseFloat(t ?? ""), s = parseFloat(r.substring(1));
83
+ return isNaN(i) || isNaN(s) ? void 0 : i <= s;
84
84
  }
85
- if ((r?.split(",").map((i) => i.trim().replace('"', "").replace("'", "")) ?? []).includes(String(e) ?? "")) return !0;
86
- if ((s?.split(",").map((i) => i.trim().replace('"', "").replace("'", "")) ?? []).includes(String(e) ?? "")) return !1;
85
+ if ((o?.split(",").map((i) => i.trim().replace('"', "").replace("'", "")) ?? []).includes(String(t) ?? "")) return !0;
86
+ if ((r?.split(",").map((i) => i.trim().replace('"', "").replace("'", "")) ?? []).includes(String(t) ?? "")) return !1;
87
87
  }
88
- handleActionSubmit(t) {
89
- const e = t.target, r = {
90
- args: e?.selected,
91
- actionApp: e?.actionApp,
92
- actionDevice: e?.actionDevice,
93
- actionTopic: e?.actionTopic,
94
- label: e?.label
88
+ handleActionSubmit(e) {
89
+ const t = e.target, o = {
90
+ args: t?.selected,
91
+ actionApp: t?.actionApp,
92
+ actionDevice: t?.actionDevice,
93
+ actionTopic: t?.actionTopic,
94
+ label: t?.label
95
95
  };
96
96
  this.dispatchEvent(
97
97
  new CustomEvent("action-submit", {
98
- detail: r,
98
+ detail: o,
99
99
  bubbles: !1,
100
100
  composed: !1
101
101
  })
@@ -121,18 +121,26 @@ let a = class extends u {
121
121
  <div class="value-container">
122
122
  ${v(
123
123
  [...this.dataSets.entries()].sort(),
124
- ([t]) => t,
125
- ([t, e]) => h`
126
- <div class="switch" label="${t}">
127
- ${t}
124
+ ([e]) => e,
125
+ ([e, t]) => h`
126
+ <div class="switch" label="${e}">
127
+ <div class="switch-text">
128
+ <span class="switch-label">${e}</span>
129
+ <span
130
+ class="switch-hint paging"
131
+ ?active=${!!t.description}
132
+ style="color: ${this.themeSubtitleColor}"
133
+ >${t.description}</span
134
+ >
135
+ </div>
128
136
  <label
129
137
  ><md-switch
130
- aria-label="${t}"
131
- ?selected="${!!e.selected}"
132
- .actionApp="${e?.actionApp}"
133
- .actionDevice="${e?.actionDevice}"
134
- .actionTopic="${e?.actionTopic}"
135
- .label="${t}"
138
+ aria-label="${e}"
139
+ ?selected="${!!t.selected}"
140
+ .actionApp="${t?.actionApp}"
141
+ .actionDevice="${t?.actionDevice}"
142
+ .actionTopic="${t?.actionTopic}"
143
+ .label="${e}"
136
144
  @change="${this.handleActionSubmit}"
137
145
  ></md-switch
138
146
  ></label>
@@ -203,6 +211,22 @@ a.styles = d`
203
211
  box-sizing: border-box;
204
212
  }
205
213
 
214
+ .switch-text {
215
+ display: flex;
216
+ flex-direction: column;
217
+ gap: 2px;
218
+ min-width: 0;
219
+ max-width: 300px;
220
+ line-height: 1.2;
221
+ }
222
+
223
+ .switch-hint {
224
+ font-size: 12px;
225
+ line-height: 15px;
226
+ opacity: 0.75;
227
+ overflow-wrap: anywhere;
228
+ }
229
+
206
230
  md-switch {
207
231
  --md-switch-selected-handle-color: var(--switch-primary-color, #5470c6);
208
232
  --md-switch-selected-hover-handle-color: var(--switch-primary-color, #5470c6);
@@ -272,7 +296,7 @@ c([
272
296
  n()
273
297
  ], a.prototype, "themePrimaryColor", 2);
274
298
  a = c([
275
- b("widget-switch-1.1.4")
299
+ w("widget-switch-1.1.8")
276
300
  ], a);
277
301
  export {
278
302
  a as WidgetSwitch
package/dist/widget-switch.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"widget-switch.js","sources":["../src/widget-switch.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValueMap } from 'lit'\nimport { repeat } from 'lit/directives/repeat.js'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { InputData } from './definition-schema.js'\nimport '@material/web/switch/switch.js'\nimport { MdSwitch } from '@material/web/switch/switch.js'\n\ntype Dataseries = Exclude<InputData['dataseries'], undefined>[number] & { needleValue?: number }\ntype Theme = {\n theme_name: string\n theme_object: any\n}\n@customElement('widget-switch-versionplaceholder')\nexport class WidgetSwitch extends LitElement {\n @property({ type: Object })\n inputData?: InputData\n\n @property({ type: Object })\n theme?: Theme\n\n @state()\n private dataSets: Map<string, Dataseries> = new Map()\n\n @state()\n private textActive: boolean = true\n\n @state() private themeBgColor?: string\n @state() private themeTitleColor?: string\n @state() private themeSubtitleColor?: string\n @state() private themePrimaryColor?: string\n\n version: string = 'versionplaceholder'\n\n private resizeObserver: ResizeObserver\n\n valueContainer?: HTMLDivElement\n boxes?: HTMLDivElement[]\n origWidth: number = 0\n origHeight: number = 0\n constructor() {\n super()\n this.resizeObserver = new ResizeObserver(this.applyData.bind(this))\n this.resizeObserver.observe(this)\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n if (this.resizeObserver) {\n this.resizeObserver.disconnect()\n }\n }\n\n protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>) {\n this.valueContainer = this?.shadowRoot?.querySelector('.value-container') as HTMLDivElement\n\n this.registerTheme(this.theme)\n this.transformData()\n this.applyData()\n }\n\n update(changedProperties: Map<string, any>) {\n if (changedProperties.has('inputData')) {\n this.transformData()\n this.applyData()\n }\n\n if (changedProperties.has('theme')) {\n this.registerTheme(this.theme)\n }\n\n super.update(changedProperties)\n }\n\n registerTheme(theme?: Theme) {\n const cssTextColor = getComputedStyle(this).getPropertyValue('--re-text-color').trim()\n const cssBgColor = getComputedStyle(this).getPropertyValue('--re-tile-background-color').trim()\n const cssPrimaryColor = getComputedStyle(this).getPropertyValue('--re-primary-color').trim()\n this.themeBgColor = cssBgColor || this.theme?.theme_object?.backgroundColor\n this.themeTitleColor = cssTextColor || this.theme?.theme_object?.title?.textStyle?.color\n this.themeSubtitleColor =\n cssTextColor || this.theme?.theme_object?.title?.subtextStyle?.color || this.themeTitleColor\n this.themePrimaryColor = cssPrimaryColor || this.theme?.theme_object?.color?.[0] || '#5470c6'\n }\n\n applyData() {}\n\n async transformData() {\n if (!this.inputData) return\n this.dataSets.forEach((d) => {\n d.label ??= ''\n })\n this.dataSets = new Map()\n this.inputData?.dataseries\n // ?.sort((a, b) => a.order - b.order)\n ?.forEach((ds, idx) => {\n // pivot data\n ds.selected = undefined\n let label = ds.label\n if (this.dataSets.has(label ?? '')) {\n label += '-' + idx\n }\n const pds: Dataseries = {\n label: label,\n actionApp: ds?.actionApp,\n actionDevice: ds?.actionDevice,\n actionTopic: ds?.actionTopic,\n multiChart: ds.multiChart,\n styling: ds.styling,\n selected: this.isSelected(ds)\n }\n this.dataSets.set(pds.label ?? '', pds)\n })\n // console.log('Value Datasets', this.dataSets)\n }\n\n isSelected(ds: Dataseries): boolean | undefined {\n const value = ds.value\n if (value === undefined) return undefined\n const on = ds?.stateMap?.on\n if (on?.startsWith('<=')) {\n const val = parseFloat(value ?? '')\n const comp = parseFloat(on.substring(2))\n return isNaN(val) || isNaN(comp) ? undefined : val <= comp\n }\n if (on?.startsWith('<')) {\n const val = parseFloat(value ?? '')\n const comp = parseFloat(on.substring(1))\n return isNaN(val) || isNaN(comp) ? undefined : val < comp\n }\n if (on?.startsWith('>=')) {\n const val = parseFloat(value ?? '')\n const comp = parseFloat(on.substring(2))\n return isNaN(val) || isNaN(comp) ? undefined : val >= comp\n }\n if (on?.startsWith('>')) {\n const val = parseFloat(value ?? '')\n const comp = parseFloat(on.substring(1))\n return isNaN(val) || isNaN(comp) ? undefined : val > comp\n }\n\n const off = ds?.stateMap?.off\n if (off?.startsWith('<=')) {\n const val = parseFloat(value ?? '')\n const comp = parseFloat(off.substring(2))\n return isNaN(val) || isNaN(comp) ? undefined : val > comp\n }\n if (off?.startsWith('<')) {\n const val = parseFloat(value ?? '')\n const comp = parseFloat(off.substring(1))\n return isNaN(val) || isNaN(comp) ? undefined : val <= comp\n }\n if (off?.startsWith('>=')) {\n const val = parseFloat(value ?? '')\n const comp = parseFloat(off.substring(2))\n return isNaN(val) || isNaN(comp) ? undefined : val < comp\n }\n if (off?.startsWith('>')) {\n const val = parseFloat(value ?? '')\n const comp = parseFloat(off.substring(1))\n return isNaN(val) || isNaN(comp) ? undefined : val <= comp\n }\n\n const onValues = on?.split(',').map((v) => v.trim().replace('\"', '').replace(\"'\", '')) ?? []\n if (onValues.includes(String(value) ?? '')) return true\n\n const offValues = off?.split(',').map((v) => v.trim().replace('\"', '').replace(\"'\", '')) ?? []\n if (offValues.includes(String(value) ?? '')) return false\n\n return undefined\n }\n\n handleActionSubmit(e: any) {\n const switchEl = e.target\n const payload = {\n args: switchEl?.selected,\n actionApp: switchEl?.actionApp,\n actionDevice: switchEl?.actionDevice,\n actionTopic: switchEl?.actionTopic,\n label: switchEl?.label\n }\n this.dispatchEvent(\n new CustomEvent('action-submit', {\n detail: payload,\n bubbles: false,\n composed: false\n })\n )\n }\n\n static styles = css`\n :host {\n display: block;\n font-family: sans-serif;\n box-sizing: border-box;\n position: relative;\n margin: auto;\n }\n\n .paging:not([active]) {\n display: none !important;\n }\n\n .wrapper {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n padding: 2cqh 2cqw;\n box-sizing: border-box;\n }\n\n h3 {\n margin: 0;\n max-width: 300px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n p {\n margin: 10px 0 0 0;\n max-width: 300px;\n font-size: 14px;\n line-height: 17px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .value-container {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n line-height: 0.9;\n flex: 1;\n overflow: hidden;\n position: relative;\n gap: 12px;\n }\n\n .switch {\n overflow: hidden;\n display: flex;\n align-items: center;\n gap: 12px;\n box-sizing: border-box;\n }\n\n md-switch {\n --md-switch-selected-handle-color: var(--switch-primary-color, #5470c6);\n --md-switch-selected-hover-handle-color: var(--switch-primary-color, #5470c6);\n --md-switch-selected-focus-handle-color: var(--switch-primary-color, #5470c6);\n --md-switch-selected-pressed-handle-color: var(--switch-primary-color, #5470c6);\n --md-switch-selected-track-color: color-mix(\n in srgb,\n var(--switch-primary-color, #5470c6) 40%,\n transparent\n );\n --md-switch-selected-hover-track-color: color-mix(\n in srgb,\n var(--switch-primary-color, #5470c6) 50%,\n transparent\n );\n --md-switch-selected-focus-track-color: color-mix(\n in srgb,\n var(--switch-primary-color, #5470c6) 50%,\n transparent\n );\n --md-switch-selected-pressed-track-color: color-mix(\n in srgb,\n var(--switch-primary-color, #5470c6) 50%,\n transparent\n );\n --md-switch-unselected-handle-color: var(--switch-text-color, #464646);\n --md-switch-unselected-track-color: color-mix(\n in srgb,\n var(--switch-text-color, #464646) 20%,\n transparent\n );\n --md-switch-unselected-track-outline-color: var(--switch-text-color, #464646);\n }\n\n .no-data {\n font-size: 20px;\n display: flex;\n height: 100%;\n width: 100%;\n text-align: center;\n align-items: center;\n justify-content: center;\n }\n `\n\n render() {\n return html`\n <div\n class=\"wrapper\"\n style=\"background-color: ${this.themeBgColor}; color: ${this\n .themeTitleColor}; --switch-primary-color: ${this\n .themePrimaryColor}; --switch-text-color: ${this.themeTitleColor}\"\n >\n <header>\n <h3 class=\"paging\" ?active=${this.inputData?.title}>${this.inputData?.title}</h3>\n <p\n class=\"paging\"\n ?active=${this.inputData?.subTitle}\n style=\"color: ${this.themeSubtitleColor}\"\n >\n ${this.inputData?.subTitle}\n </p>\n </header>\n\n <div class=\"value-container\">\n ${repeat(\n [...this.dataSets.entries()].sort(),\n ([label]) => label,\n ([label, ds]) => {\n return html`\n <div class=\"switch\" label=\"${label}\">\n ${label}\n <label\n ><md-switch\n aria-label=\"${label}\"\n ?selected=\"${!!ds.selected}\"\n .actionApp=\"${ds?.actionApp}\"\n .actionDevice=\"${ds?.actionDevice}\"\n .actionTopic=\"${ds?.actionTopic}\"\n .label=\"${label}\"\n @change=\"${this.handleActionSubmit}\"\n ></md-switch\n ></label>\n </div>\n `\n }\n )}\n </div>\n </div>\n `\n }\n}\n"],"names":["WidgetSwitch","LitElement","_changedProperties","changedProperties","theme","cssTextColor","cssBgColor","cssPrimaryColor","d","ds","idx","label","pds","value","on","val","comp","off","v","e","switchEl","payload","html","repeat","css","__decorateClass","property","state","customElement"],"mappings":"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"}
1
+ {"version":3,"file":"widget-switch.js","sources":["../src/widget-switch.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValueMap } from 'lit'\nimport { repeat } from 'lit/directives/repeat.js'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { SwitchConfiguration } from './definition-schema.js'\nimport '@material/web/switch/switch.js'\nimport { MdSwitch } from '@material/web/switch/switch.js'\n\ntype Dataseries = Exclude<SwitchConfiguration['dataseries'], undefined>[number] & { needleValue?: number }\ntype Theme = {\n theme_name: string\n theme_object: any\n}\n@customElement('widget-switch-versionplaceholder')\nexport class WidgetSwitch extends LitElement {\n @property({ type: Object })\n inputData?: SwitchConfiguration\n\n @property({ type: Object })\n theme?: Theme\n\n @state()\n private dataSets: Map<string, Dataseries> = new Map()\n\n @state()\n private textActive: boolean = true\n\n @state() private themeBgColor?: string\n @state() private themeTitleColor?: string\n @state() private themeSubtitleColor?: string\n @state() private themePrimaryColor?: string\n\n version: string = 'versionplaceholder'\n\n private resizeObserver: ResizeObserver\n\n valueContainer?: HTMLDivElement\n boxes?: HTMLDivElement[]\n origWidth: number = 0\n origHeight: number = 0\n constructor() {\n super()\n this.resizeObserver = new ResizeObserver(this.applyData.bind(this))\n this.resizeObserver.observe(this)\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n if (this.resizeObserver) {\n this.resizeObserver.disconnect()\n }\n }\n\n protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>) {\n this.valueContainer = this?.shadowRoot?.querySelector('.value-container') as HTMLDivElement\n\n this.registerTheme(this.theme)\n this.transformData()\n this.applyData()\n }\n\n update(changedProperties: Map<string, any>) {\n if (changedProperties.has('inputData')) {\n this.transformData()\n this.applyData()\n }\n\n if (changedProperties.has('theme')) {\n this.registerTheme(this.theme)\n }\n\n super.update(changedProperties)\n }\n\n registerTheme(theme?: Theme) {\n const cssTextColor = getComputedStyle(this).getPropertyValue('--re-text-color').trim()\n const cssBgColor = getComputedStyle(this).getPropertyValue('--re-tile-background-color').trim()\n const cssPrimaryColor = getComputedStyle(this).getPropertyValue('--re-primary-color').trim()\n this.themeBgColor = cssBgColor || this.theme?.theme_object?.backgroundColor\n this.themeTitleColor = cssTextColor || this.theme?.theme_object?.title?.textStyle?.color\n this.themeSubtitleColor =\n cssTextColor || this.theme?.theme_object?.title?.subtextStyle?.color || this.themeTitleColor\n this.themePrimaryColor = cssPrimaryColor || this.theme?.theme_object?.color?.[0] || '#5470c6'\n }\n\n applyData() {}\n\n async transformData() {\n if (!this.inputData) return\n this.dataSets.forEach((d) => {\n d.label ??= ''\n })\n this.dataSets = new Map()\n this.inputData?.dataseries\n // ?.sort((a, b) => a.order - b.order)\n ?.forEach((ds, idx) => {\n // pivot data\n ds.selected = undefined\n let label = ds.label\n if (this.dataSets.has(label ?? '')) {\n label += '-' + idx\n }\n const pds: Dataseries = {\n label: label,\n description: ds?.description,\n actionApp: ds?.actionApp,\n actionDevice: ds?.actionDevice,\n actionTopic: ds?.actionTopic,\n multiChart: ds.multiChart,\n selected: this.isSelected(ds)\n }\n this.dataSets.set(pds.label ?? '', pds)\n })\n // console.log('Value Datasets', this.dataSets)\n }\n\n isSelected(ds: Dataseries): boolean | undefined {\n const value = ds.value\n if (value === undefined) return undefined\n const on = ds?.stateMap?.on\n if (on?.startsWith('<=')) {\n const val = parseFloat(value ?? '')\n const comp = parseFloat(on.substring(2))\n return isNaN(val) || isNaN(comp) ? undefined : val <= comp\n }\n if (on?.startsWith('<')) {\n const val = parseFloat(value ?? '')\n const comp = parseFloat(on.substring(1))\n return isNaN(val) || isNaN(comp) ? undefined : val < comp\n }\n if (on?.startsWith('>=')) {\n const val = parseFloat(value ?? '')\n const comp = parseFloat(on.substring(2))\n return isNaN(val) || isNaN(comp) ? undefined : val >= comp\n }\n if (on?.startsWith('>')) {\n const val = parseFloat(value ?? '')\n const comp = parseFloat(on.substring(1))\n return isNaN(val) || isNaN(comp) ? undefined : val > comp\n }\n\n const off = ds?.stateMap?.off\n if (off?.startsWith('<=')) {\n const val = parseFloat(value ?? '')\n const comp = parseFloat(off.substring(2))\n return isNaN(val) || isNaN(comp) ? undefined : val > comp\n }\n if (off?.startsWith('<')) {\n const val = parseFloat(value ?? '')\n const comp = parseFloat(off.substring(1))\n return isNaN(val) || isNaN(comp) ? undefined : val <= comp\n }\n if (off?.startsWith('>=')) {\n const val = parseFloat(value ?? '')\n const comp = parseFloat(off.substring(2))\n return isNaN(val) || isNaN(comp) ? undefined : val < comp\n }\n if (off?.startsWith('>')) {\n const val = parseFloat(value ?? '')\n const comp = parseFloat(off.substring(1))\n return isNaN(val) || isNaN(comp) ? undefined : val <= comp\n }\n\n const onValues = on?.split(',').map((v) => v.trim().replace('\"', '').replace(\"'\", '')) ?? []\n if (onValues.includes(String(value) ?? '')) return true\n\n const offValues = off?.split(',').map((v) => v.trim().replace('\"', '').replace(\"'\", '')) ?? []\n if (offValues.includes(String(value) ?? '')) return false\n\n return undefined\n }\n\n handleActionSubmit(e: any) {\n const switchEl = e.target\n const payload = {\n args: switchEl?.selected,\n actionApp: switchEl?.actionApp,\n actionDevice: switchEl?.actionDevice,\n actionTopic: switchEl?.actionTopic,\n label: switchEl?.label\n }\n this.dispatchEvent(\n new CustomEvent('action-submit', {\n detail: payload,\n bubbles: false,\n composed: false\n })\n )\n }\n\n static styles = css`\n :host {\n display: block;\n font-family: sans-serif;\n box-sizing: border-box;\n position: relative;\n margin: auto;\n }\n\n .paging:not([active]) {\n display: none !important;\n }\n\n .wrapper {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n padding: 2cqh 2cqw;\n box-sizing: border-box;\n }\n\n h3 {\n margin: 0;\n max-width: 300px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n p {\n margin: 10px 0 0 0;\n max-width: 300px;\n font-size: 14px;\n line-height: 17px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .value-container {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n line-height: 0.9;\n flex: 1;\n overflow: hidden;\n position: relative;\n gap: 12px;\n }\n\n .switch {\n overflow: hidden;\n display: flex;\n align-items: center;\n gap: 12px;\n box-sizing: border-box;\n }\n\n .switch-text {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n max-width: 300px;\n line-height: 1.2;\n }\n\n .switch-hint {\n font-size: 12px;\n line-height: 15px;\n opacity: 0.75;\n overflow-wrap: anywhere;\n }\n\n md-switch {\n --md-switch-selected-handle-color: var(--switch-primary-color, #5470c6);\n --md-switch-selected-hover-handle-color: var(--switch-primary-color, #5470c6);\n --md-switch-selected-focus-handle-color: var(--switch-primary-color, #5470c6);\n --md-switch-selected-pressed-handle-color: var(--switch-primary-color, #5470c6);\n --md-switch-selected-track-color: color-mix(\n in srgb,\n var(--switch-primary-color, #5470c6) 40%,\n transparent\n );\n --md-switch-selected-hover-track-color: color-mix(\n in srgb,\n var(--switch-primary-color, #5470c6) 50%,\n transparent\n );\n --md-switch-selected-focus-track-color: color-mix(\n in srgb,\n var(--switch-primary-color, #5470c6) 50%,\n transparent\n );\n --md-switch-selected-pressed-track-color: color-mix(\n in srgb,\n var(--switch-primary-color, #5470c6) 50%,\n transparent\n );\n --md-switch-unselected-handle-color: var(--switch-text-color, #464646);\n --md-switch-unselected-track-color: color-mix(\n in srgb,\n var(--switch-text-color, #464646) 20%,\n transparent\n );\n --md-switch-unselected-track-outline-color: var(--switch-text-color, #464646);\n }\n\n .no-data {\n font-size: 20px;\n display: flex;\n height: 100%;\n width: 100%;\n text-align: center;\n align-items: center;\n justify-content: center;\n }\n `\n\n render() {\n return html`\n <div\n class=\"wrapper\"\n style=\"background-color: ${this.themeBgColor}; color: ${this\n .themeTitleColor}; --switch-primary-color: ${this\n .themePrimaryColor}; --switch-text-color: ${this.themeTitleColor}\"\n >\n <header>\n <h3 class=\"paging\" ?active=${this.inputData?.title}>${this.inputData?.title}</h3>\n <p\n class=\"paging\"\n ?active=${this.inputData?.subTitle}\n style=\"color: ${this.themeSubtitleColor}\"\n >\n ${this.inputData?.subTitle}\n </p>\n </header>\n\n <div class=\"value-container\">\n ${repeat(\n [...this.dataSets.entries()].sort(),\n ([label]) => label,\n ([label, ds]) => {\n return html`\n <div class=\"switch\" label=\"${label}\">\n <div class=\"switch-text\">\n <span class=\"switch-label\">${label}</span>\n <span\n class=\"switch-hint paging\"\n ?active=${!!ds.description}\n style=\"color: ${this.themeSubtitleColor}\"\n >${ds.description}</span\n >\n </div>\n <label\n ><md-switch\n aria-label=\"${label}\"\n ?selected=\"${!!ds.selected}\"\n .actionApp=\"${ds?.actionApp}\"\n .actionDevice=\"${ds?.actionDevice}\"\n .actionTopic=\"${ds?.actionTopic}\"\n .label=\"${label}\"\n @change=\"${this.handleActionSubmit}\"\n ></md-switch\n ></label>\n </div>\n `\n }\n )}\n </div>\n </div>\n `\n }\n}\n"],"names":["WidgetSwitch","LitElement","_changedProperties","changedProperties","theme","cssTextColor","cssBgColor","cssPrimaryColor","d","ds","idx","label","pds","value","on","val","comp","off","v","switchEl","payload","html","repeat","css","__decorateClass","property","state","customElement"],"mappings":"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"}
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "IronFlock Widget widget-switch",
4
4
  "license": "MIT",
5
5
  "author": "Record Evolution GmbH",
6
- "version": "1.1.4",
6
+ "version": "1.1.8",
7
7
  "engines": {
8
8
  "node": ">=24.9.0",
9
9
  "npm": ">=10.0.2"
@@ -29,7 +29,7 @@
29
29
  "release": "npm run build && npm run types && npm version patch --tag-version-prefix='' && git push && git push --tag && npm run build"
30
30
  },
31
31
  "dependencies": {
32
- "lit": "^3.3.2",
32
+ "lit": "^3.3.3",
33
33
  "tslib": "^2.8.1"
34
34
  },
35
35
  "peerDependencies": {
package/src/default-data.json CHANGED
@@ -4,21 +4,19 @@
4
4
  "dataseries": [
5
5
  {
6
6
  "label": "Lamp",
7
+ "description": "Work light above the main line. Safe to switch at any time.",
7
8
  "stateMap": {
8
9
  "on": ">=1",
9
10
  "off": "<1"
10
11
  },
11
- "value": 1,
12
+ "value": "1",
12
13
  "actionApp": "machineControlApp",
13
14
  "actionDevice": 1,
14
- "actionTopic": "lamp",
15
- "styling": {
16
- "labelColor": "#000000",
17
- "valueColor": "#00cc66"
18
- }
15
+ "actionTopic": "lamp"
19
16
  },
20
17
  {
21
18
  "label": "Cooling",
19
+ "description": "Coolant pump. Takes about 30 s to reach pressure after switching on.",
22
20
  "stateMap": {
23
21
  "on": "COOL_ON,1",
24
22
  "off": "COOL_OFF,0"
@@ -26,11 +24,7 @@
26
24
  "value": "COOL_ON",
27
25
  "actionApp": "coolingSystemApp",
28
26
  "actionDevice": 1,
29
- "actionTopic": "cooling",
30
- "styling": {
31
- "labelColor": "#0033cc",
32
- "valueColor": "#0099ff"
33
- }
27
+ "actionTopic": "cooling"
34
28
  }
35
29
  ]
36
30
  }
package/src/definition-schema.d.ts CHANGED
@@ -17,6 +17,10 @@ export type Subtitle = string;
17
17
  * Display text identifying this switch. Should clearly describe what the switch controls (e.g., 'Main Power', 'Pump 1', 'Night Mode').
18
18
  */
19
19
  export type Label = string;
20
+ /**
21
+ * Helper text displayed below the switch label to guide the operator. Use for what the switch does, when it is safe to flip it, or how long the action takes.
22
+ */
23
+ export type HintText = string;
20
24
  /**
21
25
  * Values that indicate the ON state. Can be: a single value ('1', 'true', 'ON'), comma-separated list ('1,true,ON'), or numeric expression ('<4' means values below 4 are ON, '>33' means values above 33 are ON). If a value matches both ON and OFF, ON takes precedence.
22
26
  */
@@ -38,19 +42,19 @@ export type ActionAppTopic = string;
38
42
  */
39
43
  export type Switches = {
40
44
  label?: Label;
45
+ description?: HintText;
41
46
  stateMap?: StateMap;
42
47
  value?: SwitchState;
43
48
  actionDevice?: ActionDeviceTarget;
44
49
  actionApp?: ActionApp;
45
50
  actionTopic?: ActionAppTopic;
46
- styling?: Styling;
47
51
  [k: string]: unknown;
48
52
  }[];
49
53
 
50
54
  /**
51
55
  * A toggle switch widget for displaying and controlling binary device states. Use this widget to show ON/OFF status indicators that can also trigger device actions when clicked. Supports configurable state mapping to interpret various data values as ON, OFF, or UNKNOWN states. When connected to a device action, clicking the switch sends commands to control physical devices or trigger backend operations. Multiple switches can be displayed in one widget. Ideal for IoT device control panels, smart home interfaces, equipment control dashboards, or any scenario requiring visual toggle controls with action capabilities.
52
56
  */
53
- export interface InputData {
57
+ export interface SwitchConfiguration {
54
58
  title?: Title;
55
59
  subTitle?: Subtitle;
56
60
  dataseries?: Switches;
@@ -76,23 +80,3 @@ export interface ActionDeviceTarget {
76
80
  export interface ActionApp {
77
81
  [k: string]: unknown;
78
82
  }
79
- /**
80
- * Visual styling options for the switch and its label.
81
- */
82
- export interface Styling {
83
- labelColor?: LabelColor;
84
- valueColor?: ValueColor;
85
- [k: string]: unknown;
86
- }
87
- /**
88
- * Color of the switch label text.
89
- */
90
- export interface LabelColor {
91
- [k: string]: unknown;
92
- }
93
- /**
94
- * Color of the state value text displayed with the switch.
95
- */
96
- export interface ValueColor {
97
- [k: string]: unknown;
98
- }
package/src/definition-schema.json CHANGED
@@ -1,6 +1,21 @@
1
1
  {
2
- "title": "InputData",
2
+ "title": "Switch Configuration",
3
3
  "description": "A toggle switch widget for displaying and controlling binary device states. Use this widget to show ON/OFF status indicators that can also trigger device actions when clicked. Supports configurable state mapping to interpret various data values as ON, OFF, or UNKNOWN states. When connected to a device action, clicking the switch sends commands to control physical devices or trigger backend operations. Multiple switches can be displayed in one widget. Ideal for IoT device control panels, smart home interfaces, equipment control dashboards, or any scenario requiring visual toggle controls with action capabilities.",
4
+ "aiSelection": {
5
+ "dataShape": "One value per switch, interpreted as ON or OFF through stateMap, plus an optional device or app action and topic fired on click. Both displays and controls.",
6
+ "useWhen": [
7
+ "A binary device state should be shown and changed from the dashboard — a pump, a light, a valve, an enable flag.",
8
+ "An operator needs a control, not only a readout.",
9
+ "Several related toggles belong together in one control panel."
10
+ ],
11
+ "notFor": [
12
+ "A status the user must not be able to change — use widget-signal, which is display-only.",
13
+ "More than two states — use widget-signal for the indicator, or widget-scada for an industrial symbol.",
14
+ "Values that are entered and stored rather than commanded — use widget-form.",
15
+ "The history of the switching — use widget-statehistory.",
16
+ "A tank, valve or pump that should be drawn as itself and animated — use widget-scada."
17
+ ]
18
+ },
4
19
  "type": "object",
5
20
  "properties": {
6
21
  "title": {
@@ -29,12 +44,18 @@
29
44
  "type": "string",
30
45
  "order": 1
31
46
  },
47
+ "description": {
48
+ "title": "Hint Text",
49
+ "description": "Helper text displayed below the switch label to guide the operator. Use for what the switch does, when it is safe to flip it, or how long the action takes.",
50
+ "type": "string",
51
+ "order": 2
52
+ },
32
53
  "stateMap": {
33
54
  "title": "State Map",
34
55
  "description": "Defines how data values are interpreted as switch states. Configure which values represent ON and OFF. Values not matching either state display as UNKNOWN (neutral position).",
35
56
  "type": "object",
36
57
  "required": true,
37
- "order": 2,
58
+ "order": 3,
38
59
  "properties": {
39
60
  "on": {
40
61
  "title": "ON Values",
@@ -55,48 +76,26 @@
55
76
  "type": "string",
56
77
  "description": "The current state value from the backend, used to display the correct switch position. Strongly recommended to bind this to the actual device state column to keep the visual state synchronized with the physical device state.",
57
78
  "required": false,
58
- "order": 3
79
+ "order": 4
59
80
  },
60
81
  "actionDevice": {
61
82
  "title": "Action Device Target",
62
83
  "description": "The device that receives commands when the switch is clicked. In data-driven mode, bind to a 'Device ID' column to dynamically target different devices per row.",
63
84
  "type": "actionDevice",
64
- "order": 4
85
+ "order": 5
65
86
  },
66
87
  "actionApp": {
67
88
  "title": "Action App",
68
89
  "description": "The application/service on the target device that handles the switch command. Select from available apps installed on the device.",
69
90
  "dataDrivenDisabled": true,
70
91
  "type": "actionApp",
71
- "order": 5
92
+ "order": 6
72
93
  },
73
94
  "actionTopic": {
74
95
  "title": "Action App Topic",
75
96
  "description": "The specific command/topic sent to the app when the switch is clicked. Arguments sent are: True for turning ON, False for turning OFF. Refer to the app's documentation for available topics.",
76
97
  "type": "string",
77
- "order": 6
78
- },
79
- "styling": {
80
- "title": "Styling",
81
- "description": "Visual styling options for the switch and its label.",
82
- "type": "object",
83
- "order": 9,
84
- "properties": {
85
- "labelColor": {
86
- "title": "Label Color",
87
- "description": "Color of the switch label text.",
88
- "type": "color",
89
- "color": true,
90
- "order": 4
91
- },
92
- "valueColor": {
93
- "title": "Value Color",
94
- "description": "Color of the state value text displayed with the switch.",
95
- "type": "color",
96
- "color": true,
97
- "order": 5
98
- }
99
- }
98
+ "order": 7
100
99
  }
101
100
  }
102
101
  }
package/src/widget-switch.ts CHANGED
@@ -1,11 +1,11 @@
1
1
  import { html, css, LitElement, PropertyValueMap } from 'lit'
2
2
  import { repeat } from 'lit/directives/repeat.js'
3
3
  import { customElement, property, state } from 'lit/decorators.js'
4
- import { InputData } from './definition-schema.js'
4
+ import { SwitchConfiguration } from './definition-schema.js'
5
5
  import '@material/web/switch/switch.js'
6
6
  import { MdSwitch } from '@material/web/switch/switch.js'
7
7
 
8
- type Dataseries = Exclude<InputData['dataseries'], undefined>[number] & { needleValue?: number }
8
+ type Dataseries = Exclude<SwitchConfiguration['dataseries'], undefined>[number] & { needleValue?: number }
9
9
  type Theme = {
10
10
  theme_name: string
11
11
  theme_object: any
@@ -13,7 +13,7 @@ type Theme = {
13
13
  @customElement('widget-switch-versionplaceholder')
14
14
  export class WidgetSwitch extends LitElement {
15
15
  @property({ type: Object })
16
- inputData?: InputData
16
+ inputData?: SwitchConfiguration
17
17
 
18
18
  @property({ type: Object })
19
19
  theme?: Theme
@@ -101,11 +101,11 @@ export class WidgetSwitch extends LitElement {
101
101
  }
102
102
  const pds: Dataseries = {
103
103
  label: label,
104
+ description: ds?.description,
104
105
  actionApp: ds?.actionApp,
105
106
  actionDevice: ds?.actionDevice,
106
107
  actionTopic: ds?.actionTopic,
107
108
  multiChart: ds.multiChart,
108
- styling: ds.styling,
109
109
  selected: this.isSelected(ds)
110
110
  }
111
111
  this.dataSets.set(pds.label ?? '', pds)
@@ -246,6 +246,22 @@ export class WidgetSwitch extends LitElement {
246
246
  box-sizing: border-box;
247
247
  }
248
248
 
249
+ .switch-text {
250
+ display: flex;
251
+ flex-direction: column;
252
+ gap: 2px;
253
+ min-width: 0;
254
+ max-width: 300px;
255
+ line-height: 1.2;
256
+ }
257
+
258
+ .switch-hint {
259
+ font-size: 12px;
260
+ line-height: 15px;
261
+ opacity: 0.75;
262
+ overflow-wrap: anywhere;
263
+ }
264
+
249
265
  md-switch {
250
266
  --md-switch-selected-handle-color: var(--switch-primary-color, #5470c6);
251
267
  --md-switch-selected-hover-handle-color: var(--switch-primary-color, #5470c6);
@@ -317,7 +333,15 @@ export class WidgetSwitch extends LitElement {
317
333
  ([label, ds]) => {
318
334
  return html`
319
335
  <div class="switch" label="${label}">
320
- ${label}
336
+ <div class="switch-text">
337
+ <span class="switch-label">${label}</span>
338
+ <span
339
+ class="switch-hint paging"
340
+ ?active=${!!ds.description}
341
+ style="color: ${this.themeSubtitleColor}"
342
+ >${ds.description}</span
343
+ >
344
+ </div>
321
345
  <label
322
346
  ><md-switch
323
347
  aria-label="${label}"