@record-evolution/widget-switch 1.1.5 → 1.1.9

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 +67 -44
  2. package/dist/widget-switch.js.map +1 -1
  3. package/package.json +6 -2
  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 +30 -10
package/dist/widget-switch.js CHANGED
@@ -1,15 +1,15 @@
1
- import { css as d, LitElement as u, html as h } from "lit";
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";
1
+ import { css as m, LitElement as v, html as p } from "lit";
2
+ import { repeat as u } from "lit/directives/repeat.js";
3
+ import { property as d, 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, b = Object.getOwnPropertyDescriptor, c = (t, e, r, o) => {
6
+ for (var l = o > 1 ? void 0 : o ? b(e, r) : e, h = t.length - 1, i; h >= 0; h--)
7
+ (i = t[h]) && (l = (o ? i(e, r, l) : i(l)) || l);
8
+ return o && l && f(e, r, l), l;
9
9
  };
10
- let a = class extends u {
10
+ let a = class extends v {
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.9", 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();
@@ -21,8 +21,7 @@ let a = class extends u {
21
21
  t.has("inputData") && (this.transformData(), this.applyData()), t.has("theme") && this.registerTheme(this.theme), super.update(t);
22
22
  }
23
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";
24
+ this.themeBgColor = `var(--re-tile-background-color, ${this.theme?.theme_object?.backgroundColor || "transparent"})`, this.themeTitleColor = `var(--re-text-color, ${this.theme?.theme_object?.title?.textStyle?.color || "inherit"})`, this.themeSubtitleColor = `var(--re-text-color, ${this.theme?.theme_object?.title?.subtextStyle?.color || this.theme?.theme_object?.title?.textStyle?.color || "inherit"})`, this.themePrimaryColor = `var(--re-primary-color, ${this.theme?.theme_object?.color?.[0] || "#5470c6"})`;
26
25
  }
27
26
  applyData() {
28
27
  }
@@ -33,16 +32,16 @@ let a = class extends u {
33
32
  t.selected = void 0;
34
33
  let r = t.label;
35
34
  this.dataSets.has(r ?? "") && (r += "-" + e);
36
- const s = {
35
+ const o = {
37
36
  label: r,
37
+ description: t?.description,
38
38
  actionApp: t?.actionApp,
39
39
  actionDevice: t?.actionDevice,
40
40
  actionTopic: t?.actionTopic,
41
41
  multiChart: t.multiChart,
42
- styling: t.styling,
43
42
  selected: this.isSelected(t)
44
43
  };
45
- this.dataSets.set(s.label ?? "", s);
44
+ this.dataSets.set(o.label ?? "", o);
46
45
  }));
47
46
  }
48
47
  isSelected(t) {
@@ -50,40 +49,40 @@ let a = class extends u {
50
49
  if (e === void 0) return;
51
50
  const r = t?.stateMap?.on;
52
51
  if (r?.startsWith("<=")) {
53
- const i = parseFloat(e ?? ""), o = parseFloat(r.substring(2));
54
- return isNaN(i) || isNaN(o) ? void 0 : i <= o;
52
+ const i = parseFloat(e ?? ""), s = parseFloat(r.substring(2));
53
+ return isNaN(i) || isNaN(s) ? void 0 : i <= s;
55
54
  }
56
55
  if (r?.startsWith("<")) {
57
- const i = parseFloat(e ?? ""), o = parseFloat(r.substring(1));
58
- return isNaN(i) || isNaN(o) ? void 0 : i < o;
56
+ const i = parseFloat(e ?? ""), s = parseFloat(r.substring(1));
57
+ return isNaN(i) || isNaN(s) ? void 0 : i < s;
59
58
  }
60
59
  if (r?.startsWith(">=")) {
61
- const i = parseFloat(e ?? ""), o = parseFloat(r.substring(2));
62
- return isNaN(i) || isNaN(o) ? void 0 : i >= o;
60
+ const i = parseFloat(e ?? ""), s = parseFloat(r.substring(2));
61
+ return isNaN(i) || isNaN(s) ? void 0 : i >= s;
63
62
  }
64
63
  if (r?.startsWith(">")) {
65
- const i = parseFloat(e ?? ""), o = parseFloat(r.substring(1));
66
- return isNaN(i) || isNaN(o) ? void 0 : i > o;
64
+ const i = parseFloat(e ?? ""), s = parseFloat(r.substring(1));
65
+ return isNaN(i) || isNaN(s) ? void 0 : i > s;
67
66
  }
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;
67
+ const o = t?.stateMap?.off;
68
+ if (o?.startsWith("<=")) {
69
+ const i = parseFloat(e ?? ""), s = parseFloat(o.substring(2));
70
+ return isNaN(i) || isNaN(s) ? void 0 : i > s;
72
71
  }
73
- if (s?.startsWith("<")) {
74
- const i = parseFloat(e ?? ""), o = parseFloat(s.substring(1));
75
- return isNaN(i) || isNaN(o) ? void 0 : i <= o;
72
+ if (o?.startsWith("<")) {
73
+ const i = parseFloat(e ?? ""), s = parseFloat(o.substring(1));
74
+ return isNaN(i) || isNaN(s) ? void 0 : i <= s;
76
75
  }
77
- if (s?.startsWith(">=")) {
78
- const i = parseFloat(e ?? ""), o = parseFloat(s.substring(2));
79
- return isNaN(i) || isNaN(o) ? void 0 : i < o;
76
+ if (o?.startsWith(">=")) {
77
+ const i = parseFloat(e ?? ""), s = parseFloat(o.substring(2));
78
+ return isNaN(i) || isNaN(s) ? void 0 : i < s;
80
79
  }
81
- if (s?.startsWith(">")) {
82
- const i = parseFloat(e ?? ""), o = parseFloat(s.substring(1));
83
- return isNaN(i) || isNaN(o) ? void 0 : i <= o;
80
+ if (o?.startsWith(">")) {
81
+ const i = parseFloat(e ?? ""), s = parseFloat(o.substring(1));
82
+ return isNaN(i) || isNaN(s) ? void 0 : i <= s;
84
83
  }
85
84
  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(e) ?? "")) return !1;
87
86
  }
88
87
  handleActionSubmit(t) {
89
88
  const e = t.target, r = {
@@ -102,7 +101,7 @@ let a = class extends u {
102
101
  );
103
102
  }
104
103
  render() {
105
- return h`
104
+ return p`
106
105
  <div
107
106
  class="wrapper"
108
107
  style="background-color: ${this.themeBgColor}; color: ${this.themeTitleColor}; --switch-primary-color: ${this.themePrimaryColor}; --switch-text-color: ${this.themeTitleColor}"
@@ -119,12 +118,20 @@ let a = class extends u {
119
118
  </header>
120
119
 
121
120
  <div class="value-container">
122
- ${v(
121
+ ${u(
123
122
  [...this.dataSets.entries()].sort(),
124
123
  ([t]) => t,
125
- ([t, e]) => h`
124
+ ([t, e]) => p`
126
125
  <div class="switch" label="${t}">
127
- ${t}
126
+ <div class="switch-text">
127
+ <span class="switch-label">${t}</span>
128
+ <span
129
+ class="switch-hint paging"
130
+ ?active=${!!e.description}
131
+ style="color: ${this.themeSubtitleColor}"
132
+ >${e.description}</span
133
+ >
134
+ </div>
128
135
  <label
129
136
  ><md-switch
130
137
  aria-label="${t}"
@@ -144,7 +151,7 @@ let a = class extends u {
144
151
  `;
145
152
  }
146
153
  };
147
- a.styles = d`
154
+ a.styles = m`
148
155
  :host {
149
156
  display: block;
150
157
  font-family: sans-serif;
@@ -203,6 +210,22 @@ a.styles = d`
203
210
  box-sizing: border-box;
204
211
  }
205
212
 
213
+ .switch-text {
214
+ display: flex;
215
+ flex-direction: column;
216
+ gap: 2px;
217
+ min-width: 0;
218
+ max-width: 300px;
219
+ line-height: 1.2;
220
+ }
221
+
222
+ .switch-hint {
223
+ font-size: 12px;
224
+ line-height: 15px;
225
+ opacity: 0.75;
226
+ overflow-wrap: anywhere;
227
+ }
228
+
206
229
  md-switch {
207
230
  --md-switch-selected-handle-color: var(--switch-primary-color, #5470c6);
208
231
  --md-switch-selected-hover-handle-color: var(--switch-primary-color, #5470c6);
@@ -248,10 +271,10 @@ a.styles = d`
248
271
  }
249
272
  `;
250
273
  c([
251
- m({ type: Object })
274
+ d({ type: Object })
252
275
  ], a.prototype, "inputData", 2);
253
276
  c([
254
- m({ type: Object })
277
+ d({ type: Object })
255
278
  ], a.prototype, "theme", 2);
256
279
  c([
257
280
  n()
@@ -272,7 +295,7 @@ c([
272
295
  n()
273
296
  ], a.prototype, "themePrimaryColor", 2);
274
297
  a = c([
275
- b("widget-switch-1.1.5")
298
+ w("widget-switch-1.1.9")
276
299
  ], a);
277
300
  export {
278
301
  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 this.themeBgColor = `var(--re-tile-background-color, ${this.theme?.theme_object?.backgroundColor || 'transparent'})`\n this.themeTitleColor = `var(--re-text-color, ${this.theme?.theme_object?.title?.textStyle?.color || 'inherit'})`\n this.themeSubtitleColor = `var(--re-text-color, ${this.theme?.theme_object?.title?.subtextStyle?.color || this.theme?.theme_object?.title?.textStyle?.color || 'inherit'})`\n this.themePrimaryColor = `var(--re-primary-color, ${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","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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"}
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.9",
7
7
  "engines": {
8
8
  "node": ">=24.9.0",
9
9
  "npm": ">=10.0.2"
@@ -26,7 +26,11 @@
26
26
  "link": "npm run build && npm link && cd ../RESWARM/frontend && npm link @record-evolution/widget-switch",
27
27
  "unlink": "npm unlink --global && cd ../RESWARM/frontend && npm unlink @record-evolution/widget-switch && npm i @record-evolution/widget-switch",
28
28
  "types": "cat src/definition-schema.json | json2ts --style.tabWidth=4 > src/definition-schema.d.ts",
29
- "release": "npm run build && npm run types && npm version patch --tag-version-prefix='' && git push && git push --tag && npm run build"
29
+ "preversion": "sh scripts/release-preflight.sh",
30
+ "postversion": "git push --follow-tags && sh scripts/release-verify.sh",
31
+ "release": "npm version patch",
32
+ "release:minor": "npm version minor",
33
+ "release:major": "npm version major"
30
34
  },
31
35
  "dependencies": {
32
36
  "lit": "^3.3.3",
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
@@ -72,14 +72,10 @@ export class WidgetSwitch extends LitElement {
72
72
  }
73
73
 
74
74
  registerTheme(theme?: Theme) {
75
- const cssTextColor = getComputedStyle(this).getPropertyValue('--re-text-color').trim()
76
- const cssBgColor = getComputedStyle(this).getPropertyValue('--re-tile-background-color').trim()
77
- const cssPrimaryColor = getComputedStyle(this).getPropertyValue('--re-primary-color').trim()
78
- this.themeBgColor = cssBgColor || this.theme?.theme_object?.backgroundColor
79
- this.themeTitleColor = cssTextColor || this.theme?.theme_object?.title?.textStyle?.color
80
- this.themeSubtitleColor =
81
- cssTextColor || this.theme?.theme_object?.title?.subtextStyle?.color || this.themeTitleColor
82
- this.themePrimaryColor = cssPrimaryColor || this.theme?.theme_object?.color?.[0] || '#5470c6'
75
+ this.themeBgColor = `var(--re-tile-background-color, ${this.theme?.theme_object?.backgroundColor || 'transparent'})`
76
+ this.themeTitleColor = `var(--re-text-color, ${this.theme?.theme_object?.title?.textStyle?.color || 'inherit'})`
77
+ this.themeSubtitleColor = `var(--re-text-color, ${this.theme?.theme_object?.title?.subtextStyle?.color || this.theme?.theme_object?.title?.textStyle?.color || 'inherit'})`
78
+ this.themePrimaryColor = `var(--re-primary-color, ${this.theme?.theme_object?.color?.[0] || '#5470c6'})`
83
79
  }
84
80
 
85
81
  applyData() {}
@@ -101,11 +97,11 @@ export class WidgetSwitch extends LitElement {
101
97
  }
102
98
  const pds: Dataseries = {
103
99
  label: label,
100
+ description: ds?.description,
104
101
  actionApp: ds?.actionApp,
105
102
  actionDevice: ds?.actionDevice,
106
103
  actionTopic: ds?.actionTopic,
107
104
  multiChart: ds.multiChart,
108
- styling: ds.styling,
109
105
  selected: this.isSelected(ds)
110
106
  }
111
107
  this.dataSets.set(pds.label ?? '', pds)
@@ -246,6 +242,22 @@ export class WidgetSwitch extends LitElement {
246
242
  box-sizing: border-box;
247
243
  }
248
244
 
245
+ .switch-text {
246
+ display: flex;
247
+ flex-direction: column;
248
+ gap: 2px;
249
+ min-width: 0;
250
+ max-width: 300px;
251
+ line-height: 1.2;
252
+ }
253
+
254
+ .switch-hint {
255
+ font-size: 12px;
256
+ line-height: 15px;
257
+ opacity: 0.75;
258
+ overflow-wrap: anywhere;
259
+ }
260
+
249
261
  md-switch {
250
262
  --md-switch-selected-handle-color: var(--switch-primary-color, #5470c6);
251
263
  --md-switch-selected-hover-handle-color: var(--switch-primary-color, #5470c6);
@@ -317,7 +329,15 @@ export class WidgetSwitch extends LitElement {
317
329
  ([label, ds]) => {
318
330
  return html`
319
331
  <div class="switch" label="${label}">
320
- ${label}
332
+ <div class="switch-text">
333
+ <span class="switch-label">${label}</span>
334
+ <span
335
+ class="switch-hint paging"
336
+ ?active=${!!ds.description}
337
+ style="color: ${this.themeSubtitleColor}"
338
+ >${ds.description}</span
339
+ >
340
+ </div>
321
341
  <label
322
342
  ><md-switch
323
343
  aria-label="${label}"