@record-evolution/widget-switch 1.1.5 → 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 (7) hide show
  1. package/dist/widget-switch.js +101 -77
  2. package/dist/widget-switch.js.map +1 -1
  3. package/package.json +1 -1
  4. package/src/default-data.json +4 -10
  5. package/src/definition-schema.d.ts +5 -21
  6. package/src/definition-schema.json +11 -27
  7. package/src/widget-switch.ts +26 -2
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.5", 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.5")
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 { 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 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.5",
6
+ "version": "1.1.8",
7
7
  "engines": {
8
8
  "node": ">=24.9.0",
9
9
  "npm": ">=10.0.2"
package/src/default-data.json CHANGED
@@ -4,6 +4,7 @@
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"
@@ -11,14 +12,11 @@
11
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,12 +42,12 @@ 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
 
@@ -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
@@ -44,12 +44,18 @@
44
44
  "type": "string",
45
45
  "order": 1
46
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
+ },
47
53
  "stateMap": {
48
54
  "title": "State Map",
49
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).",
50
56
  "type": "object",
51
57
  "required": true,
52
- "order": 2,
58
+ "order": 3,
53
59
  "properties": {
54
60
  "on": {
55
61
  "title": "ON Values",
@@ -70,48 +76,26 @@
70
76
  "type": "string",
71
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.",
72
78
  "required": false,
73
- "order": 3
79
+ "order": 4
74
80
  },
75
81
  "actionDevice": {
76
82
  "title": "Action Device Target",
77
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.",
78
84
  "type": "actionDevice",
79
- "order": 4
85
+ "order": 5
80
86
  },
81
87
  "actionApp": {
82
88
  "title": "Action App",
83
89
  "description": "The application/service on the target device that handles the switch command. Select from available apps installed on the device.",
84
90
  "dataDrivenDisabled": true,
85
91
  "type": "actionApp",
86
- "order": 5
92
+ "order": 6
87
93
  },
88
94
  "actionTopic": {
89
95
  "title": "Action App Topic",
90
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.",
91
97
  "type": "string",
92
- "order": 6
93
- },
94
- "styling": {
95
- "title": "Styling",
96
- "description": "Visual styling options for the switch and its label.",
97
- "type": "object",
98
- "order": 9,
99
- "properties": {
100
- "labelColor": {
101
- "title": "Label Color",
102
- "description": "Color of the switch label text.",
103
- "type": "color",
104
- "color": true,
105
- "order": 4
106
- },
107
- "valueColor": {
108
- "title": "Value Color",
109
- "description": "Color of the state value text displayed with the switch.",
110
- "type": "color",
111
- "color": true,
112
- "order": 5
113
- }
114
- }
98
+ "order": 7
115
99
  }
116
100
  }
117
101
  }
package/src/widget-switch.ts CHANGED
@@ -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}"