@record-evolution/widget-image 1.1.16 → 1.1.17

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 (4) hide show
  1. package/dist/widget-image.js +2 -2
  2. package/package.json +1 -1
  3. package/src/definition-schema.d.ts +24 -9
  4. package/src/definition-schema.json +14 -9
package/dist/widget-image.js CHANGED
@@ -645,7 +645,7 @@ var te = Object.defineProperty, ee = Object.getOwnPropertyDescriptor, g = (r, t,
645
645
  };
646
646
  let m = class extends H {
647
647
  constructor() {
648
- super(...arguments), this.elementWidth = 0, this.elementHeight = 0, this.version = "1.1.16";
648
+ super(...arguments), this.elementWidth = 0, this.elementHeight = 0, this.version = "1.1.17";
649
649
  }
650
650
  disconnectedCallback() {
651
651
  super.disconnectedCallback(), this.resizeObserver && this.resizeObserver.disconnect();
@@ -905,7 +905,7 @@ g([
905
905
  Yt(".wrapper")
906
906
  ], m.prototype, "wrapper", 2);
907
907
  m = g([
908
- Jt("widget-image-1.1.16")
908
+ Jt("widget-image-1.1.17")
909
909
  ], m);
910
910
  export {
911
911
  m as WidgetImage
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Webcomponent widget-image following open-wc recommendations",
4
4
  "license": "MIT",
5
5
  "author": "widget-image",
6
- "version": "1.1.16",
6
+ "version": "1.1.17",
7
7
  "engines": {
8
8
  "node": ">=24.9.0",
9
9
  "npm": ">=10.0.2"
package/src/definition-schema.d.ts CHANGED
@@ -5,43 +5,52 @@
5
5
  * and run json-schema-to-typescript to regenerate this file.
6
6
  */
7
7
 
8
+ /**
9
+ * The main heading displayed above the image in single-image mode. Use to describe or label the image content.
10
+ */
8
11
  export type Title = string;
12
+ /**
13
+ * Secondary text displayed below the title in single-image mode. Use for additional context, timestamps, or source information.
14
+ */
9
15
  export type Subtitle = string;
10
16
  /**
11
- * If enabled, the image will stretch to fill the entire widget area. If disabled, the image will maintain its aspect ratio.
17
+ * When enabled, images stretch to fill the entire widget area, potentially distorting aspect ratio. When disabled, images maintain their original aspect ratio and are contained within the widget bounds with letterboxing if needed.
12
18
  */
13
19
  export type StretchToFill = boolean;
14
20
  /**
15
- * Display multiple images based on URLs in a list.
21
+ * When enabled, displays multiple images in a responsive grid layout from the data array. When disabled, shows a single image from imageUrl or uploaded file. Enable for galleries, camera grids, or comparing multiple visual assets.
16
22
  */
17
23
  export type MultiImage = boolean;
18
24
  /**
19
- * The gap between images in pixels.
25
+ * Spacing between images in pixels when using multi-image mode. Increase for visual separation, decrease for compact grids. The gap scales proportionally with image size.
20
26
  */
21
27
  export type Gap = number;
22
28
  /**
23
- * Font size for the image label in pixels.
29
+ * Font size in pixels for image labels displayed below each image. Applies to both single and multi-image modes when labels are provided.
24
30
  */
25
31
  export type ImageLabelFontSize = number;
32
+ /**
33
+ * Direct URL to the image file for single-image mode (e.g., 'https://example.com/image.jpg'). Can be bound to a data column for dynamic image sources. Used when 'Use image upload' is disabled.
34
+ */
26
35
  export type ImageURL = string;
27
36
  /**
28
- * If true, the image upload will be used instead of the image URL
37
+ * When enabled, displays an uploaded image file instead of loading from URL. Use for static images that don't change or when the image isn't accessible via URL.
29
38
  */
30
39
  export type UseImageUpload = boolean;
31
40
  /**
32
- * Unix timestamp in milliseconds for time-based filtering.
41
+ * Unix timestamp in milliseconds for time-based filtering. When a timeRange filter is active, only images with timestamps within the range are displayed. Images without timestamps are always shown.
33
42
  */
34
43
  export type Timestamp = number;
35
44
  /**
36
- * This should be a valid URL string.
45
+ * Full URL to the image file. Must be a valid, accessible URL starting with http:// or https://.
37
46
  */
38
47
  export type ImageURL1 = string;
39
48
  /**
40
- * Optionally provide a label for this image.
49
+ * Text label displayed below this image. Use for identification, captions, or metadata like camera name or timestamp.
41
50
  */
42
51
  export type ImageLabel = string;
43
52
  /**
44
- * A list of image URLs to layout.
53
+ * Array of images for multi-image mode. Each entry specifies an image URL, optional label, and optional timestamp for time-based filtering. Images are arranged in an optimized responsive grid.
45
54
  */
46
55
  export type Images = {
47
56
  timestamp?: Timestamp;
@@ -50,6 +59,9 @@ export type Images = {
50
59
  [k: string]: unknown;
51
60
  }[];
52
61
 
62
+ /**
63
+ * An image display widget for showing single or multiple images from URLs or uploads. Use this widget to display photos, diagrams, camera feeds, or any visual content on dashboards. Supports single image mode with direct URL or file upload, and multi-image mode for grid layouts of multiple images with optional labels. Features time-based filtering for displaying images within a selected time range and responsive grid layouts that optimize image arrangement based on available space.
64
+ */
53
65
  export interface InputData {
54
66
  title?: Title;
55
67
  subTitle?: Subtitle;
@@ -63,6 +75,9 @@ export interface InputData {
63
75
  data?: Images;
64
76
  [k: string]: unknown;
65
77
  }
78
+ /**
79
+ * Upload an image file directly to the dashboard. Supports common formats (PNG, JPG, GIF, SVG). The image is stored with the dashboard configuration.
80
+ */
66
81
  export interface UploadImageFile {
67
82
  [k: string]: unknown;
68
83
  }
package/src/definition-schema.json CHANGED
@@ -1,27 +1,30 @@
1
1
  {
2
2
  "title": "InputData",
3
+ "description": "An image display widget for showing single or multiple images from URLs or uploads. Use this widget to display photos, diagrams, camera feeds, or any visual content on dashboards. Supports single image mode with direct URL or file upload, and multi-image mode for grid layouts of multiple images with optional labels. Features time-based filtering for displaying images within a selected time range and responsive grid layouts that optimize image arrangement based on available space.",
3
4
  "type": "object",
4
5
  "properties": {
5
6
  "title": {
6
7
  "title": "Title",
8
+ "description": "The main heading displayed above the image in single-image mode. Use to describe or label the image content.",
7
9
  "order": 1,
8
10
  "type": "string"
9
11
  },
10
12
  "subTitle": {
11
13
  "title": "Subtitle",
14
+ "description": "Secondary text displayed below the title in single-image mode. Use for additional context, timestamps, or source information.",
12
15
  "order": 2,
13
16
  "type": "string"
14
17
  },
15
18
  "stretchToFit": {
16
19
  "title": "Stretch to fill",
17
20
  "type": "boolean",
18
- "description": "If enabled, the image will stretch to fill the entire widget area. If disabled, the image will maintain its aspect ratio.",
21
+ "description": "When enabled, images stretch to fill the entire widget area, potentially distorting aspect ratio. When disabled, images maintain their original aspect ratio and are contained within the widget bounds with letterboxing if needed.",
19
22
  "dataDrivenDisabled": true,
20
23
  "order": 3
21
24
  },
22
25
  "multiImage": {
23
26
  "title": "Multi Image",
24
- "description": "Display multiple images based on URLs in a list.",
27
+ "description": "When enabled, displays multiple images in a responsive grid layout from the data array. When disabled, shows a single image from imageUrl or uploaded file. Enable for galleries, camera grids, or comparing multiple visual assets.",
25
28
  "type": "boolean",
26
29
  "dataDrivenDisabled": true,
27
30
  "order": 4
@@ -29,7 +32,7 @@
29
32
  "gap": {
30
33
  "title": "Gap",
31
34
  "type": "number",
32
- "description": "The gap between images in pixels.",
35
+ "description": "Spacing between images in pixels when using multi-image mode. Increase for visual separation, decrease for compact grids. The gap scales proportionally with image size.",
33
36
  "order": 5,
34
37
  "condition": {
35
38
  "relativePath": "../multiImage",
@@ -39,11 +42,12 @@
39
42
  "labelFontSize": {
40
43
  "title": "Image Label Font Size",
41
44
  "type": "number",
42
- "description": "Font size for the image label in pixels.",
45
+ "description": "Font size in pixels for image labels displayed below each image. Applies to both single and multi-image modes when labels are provided.",
43
46
  "order": 6
44
47
  },
45
48
  "imageUrl": {
46
49
  "title": "Image URL",
50
+ "description": "Direct URL to the image file for single-image mode (e.g., 'https://example.com/image.jpg'). Can be bound to a data column for dynamic image sources. Used when 'Use image upload' is disabled.",
47
51
  "order": 7,
48
52
  "condition": {
49
53
  "relativePath": "../multiImage",
@@ -53,7 +57,7 @@
53
57
  },
54
58
  "useUpload": {
55
59
  "title": "Use image upload",
56
- "description": "If true, the image upload will be used instead of the image URL",
60
+ "description": "When enabled, displays an uploaded image file instead of loading from URL. Use for static images that don't change or when the image isn't accessible via URL.",
57
61
  "dataDrivenDisabled": true,
58
62
  "order": 8,
59
63
  "condition": {
@@ -64,6 +68,7 @@
64
68
  },
65
69
  "image": {
66
70
  "title": "Upload image file",
71
+ "description": "Upload an image file directly to the dashboard. Supports common formats (PNG, JPG, GIF, SVG). The image is stored with the dashboard configuration.",
67
72
  "order": 9,
68
73
  "dataDrivenDisabled": true,
69
74
  "condition": {
@@ -74,7 +79,7 @@
74
79
  },
75
80
  "data": {
76
81
  "title": "Images",
77
- "description": "A list of image URLs to layout.",
82
+ "description": "Array of images for multi-image mode. Each entry specifies an image URL, optional label, and optional timestamp for time-based filtering. Images are arranged in an optimized responsive grid.",
78
83
  "type": "array",
79
84
  "condition": {
80
85
  "relativePath": "../multiImage",
@@ -86,19 +91,19 @@
86
91
  "properties": {
87
92
  "timestamp": {
88
93
  "title": "Timestamp",
89
- "description": "Unix timestamp in milliseconds for time-based filtering.",
94
+ "description": "Unix timestamp in milliseconds for time-based filtering. When a timeRange filter is active, only images with timestamps within the range are displayed. Images without timestamps are always shown.",
90
95
  "type": "number",
91
96
  "order": 1
92
97
  },
93
98
  "imageUrl": {
94
99
  "title": "Image URL",
95
- "description": "This should be a valid URL string.",
100
+ "description": "Full URL to the image file. Must be a valid, accessible URL starting with http:// or https://.",
96
101
  "type": "string",
97
102
  "order": 2
98
103
  },
99
104
  "label": {
100
105
  "title": "Image Label",
101
- "description": "Optionally provide a label for this image.",
106
+ "description": "Text label displayed below this image. Use for identification, captions, or metadata like camera name or timestamp.",
102
107
  "type": "string",
103
108
  "order": 3
104
109
  }