@refinitiv-ui/elements 5.7.0 → 5.8.0

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 (161) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/lib/autosuggest/custom-elements.json +14 -4
  3. package/lib/autosuggest/custom-elements.md +21 -14
  4. package/lib/autosuggest/index.d.ts +4 -0
  5. package/lib/autosuggest/index.js +4 -0
  6. package/lib/calendar/custom-elements.json +4 -2
  7. package/lib/calendar/custom-elements.md +2 -2
  8. package/lib/calendar/index.d.ts +2 -0
  9. package/lib/calendar/index.js +2 -0
  10. package/lib/canvas/custom-elements.json +7 -5
  11. package/lib/canvas/custom-elements.md +8 -8
  12. package/lib/canvas/index.d.ts +1 -0
  13. package/lib/canvas/index.js +1 -0
  14. package/lib/card/custom-elements.json +3 -1
  15. package/lib/card/custom-elements.md +5 -5
  16. package/lib/card/index.d.ts +2 -0
  17. package/lib/card/index.js +2 -0
  18. package/lib/chart/custom-elements.json +1 -1
  19. package/lib/chart/custom-elements.md +4 -4
  20. package/lib/checkbox/custom-elements.json +8 -4
  21. package/lib/checkbox/custom-elements.md +2 -2
  22. package/lib/checkbox/index.d.ts +3 -1
  23. package/lib/checkbox/index.js +2 -0
  24. package/lib/clock/custom-elements.json +8 -4
  25. package/lib/clock/custom-elements.md +9 -9
  26. package/lib/clock/index.d.ts +2 -0
  27. package/lib/clock/index.js +2 -0
  28. package/lib/clock/themes/halo/dark/index.js +1 -1
  29. package/lib/clock/themes/halo/light/index.js +1 -1
  30. package/lib/clock/themes/solar/charcoal/index.js +1 -1
  31. package/lib/clock/themes/solar/pearl/index.js +1 -1
  32. package/lib/color-dialog/custom-elements.json +21 -8
  33. package/lib/color-dialog/custom-elements.md +22 -22
  34. package/lib/color-dialog/index.d.ts +8 -8
  35. package/lib/color-dialog/index.js +8 -8
  36. package/lib/combo-box/custom-elements.json +19 -10
  37. package/lib/combo-box/custom-elements.md +20 -20
  38. package/lib/combo-box/index.d.ts +10 -2
  39. package/lib/combo-box/index.js +10 -1
  40. package/lib/combo-box/themes/halo/dark/index.js +1 -1
  41. package/lib/combo-box/themes/halo/light/index.js +1 -1
  42. package/lib/combo-box/themes/solar/charcoal/index.js +1 -1
  43. package/lib/combo-box/themes/solar/pearl/index.js +1 -1
  44. package/lib/counter/custom-elements.json +8 -4
  45. package/lib/counter/custom-elements.md +4 -4
  46. package/lib/counter/index.d.ts +2 -0
  47. package/lib/counter/index.js +2 -0
  48. package/lib/datetime-picker/custom-elements.json +48 -19
  49. package/lib/datetime-picker/custom-elements.md +36 -28
  50. package/lib/datetime-picker/index.d.ts +15 -4
  51. package/lib/datetime-picker/index.js +15 -4
  52. package/lib/dialog/custom-elements.json +30 -8
  53. package/lib/dialog/custom-elements.md +16 -16
  54. package/lib/dialog/index.d.ts +7 -10
  55. package/lib/dialog/index.js +7 -10
  56. package/lib/email-field/custom-elements.json +80 -93
  57. package/lib/email-field/custom-elements.md +22 -20
  58. package/lib/email-field/index.d.ts +43 -115
  59. package/lib/email-field/index.js +44 -244
  60. package/lib/flag/custom-elements.md +4 -4
  61. package/lib/flag/index.d.ts +2 -0
  62. package/lib/flag/index.js +2 -0
  63. package/lib/icon/custom-elements.md +4 -4
  64. package/lib/icon/index.d.ts +2 -0
  65. package/lib/icon/index.js +2 -0
  66. package/lib/interactive-chart/custom-elements.json +6 -10
  67. package/lib/interactive-chart/custom-elements.md +6 -7
  68. package/lib/interactive-chart/index.d.ts +5 -2
  69. package/lib/interactive-chart/index.js +5 -2
  70. package/lib/item/custom-elements.json +8 -6
  71. package/lib/item/custom-elements.md +14 -14
  72. package/lib/item/index.d.ts +2 -1
  73. package/lib/item/index.js +2 -1
  74. package/lib/led-gauge/custom-elements.json +4 -4
  75. package/lib/led-gauge/custom-elements.md +2 -2
  76. package/lib/led-gauge/index.d.ts +1 -0
  77. package/lib/led-gauge/index.js +1 -0
  78. package/lib/list/custom-elements.json +18 -5
  79. package/lib/list/custom-elements.md +12 -10
  80. package/lib/list/helpers/list-renderer.js +2 -0
  81. package/lib/list/index.d.ts +19 -2
  82. package/lib/list/index.js +34 -1
  83. package/lib/multi-input/custom-elements.json +3 -2
  84. package/lib/multi-input/custom-elements.md +16 -16
  85. package/lib/multi-input/index.d.ts +4 -0
  86. package/lib/multi-input/index.js +4 -0
  87. package/lib/number-field/custom-elements.json +97 -52
  88. package/lib/number-field/custom-elements.md +27 -22
  89. package/lib/number-field/index.d.ts +92 -47
  90. package/lib/number-field/index.js +113 -80
  91. package/lib/overlay/custom-elements.json +23 -13
  92. package/lib/overlay/custom-elements.md +29 -29
  93. package/lib/overlay/elements/overlay.d.ts +5 -0
  94. package/lib/overlay-menu/custom-elements.json +66 -14
  95. package/lib/overlay-menu/custom-elements.md +19 -19
  96. package/lib/overlay-menu/index.d.ts +13 -11
  97. package/lib/overlay-menu/index.js +13 -11
  98. package/lib/password-field/custom-elements.json +62 -67
  99. package/lib/password-field/custom-elements.md +19 -11
  100. package/lib/password-field/index.d.ts +42 -94
  101. package/lib/password-field/index.js +48 -194
  102. package/lib/pill/custom-elements.json +4 -2
  103. package/lib/pill/custom-elements.md +1 -1
  104. package/lib/pill/index.d.ts +1 -1
  105. package/lib/pill/index.js +1 -1
  106. package/lib/radio-button/custom-elements.json +8 -6
  107. package/lib/radio-button/custom-elements.md +3 -3
  108. package/lib/radio-button/index.d.ts +6 -5
  109. package/lib/radio-button/index.js +5 -4
  110. package/lib/search-field/custom-elements.json +70 -74
  111. package/lib/search-field/custom-elements.md +24 -16
  112. package/lib/search-field/index.d.ts +43 -100
  113. package/lib/search-field/index.js +46 -215
  114. package/lib/select/custom-elements.json +3 -2
  115. package/lib/select/custom-elements.md +10 -10
  116. package/lib/select/index.d.ts +11 -3
  117. package/lib/select/index.js +65 -26
  118. package/lib/sidebar-layout/custom-elements.json +2 -6
  119. package/lib/sidebar-layout/custom-elements.md +5 -6
  120. package/lib/sidebar-layout/index.d.ts +2 -1
  121. package/lib/slider/custom-elements.json +2 -2
  122. package/lib/slider/custom-elements.md +1 -1
  123. package/lib/slider/index.d.ts +1 -1
  124. package/lib/slider/index.js +1 -1
  125. package/lib/sparkline/custom-elements.json +4 -4
  126. package/lib/sparkline/custom-elements.md +2 -2
  127. package/lib/sparkline/index.d.ts +3 -1
  128. package/lib/sparkline/index.js +2 -0
  129. package/lib/swing-gauge/custom-elements.json +5 -3
  130. package/lib/swing-gauge/custom-elements.md +11 -11
  131. package/lib/swing-gauge/index.d.ts +3 -1
  132. package/lib/swing-gauge/index.js +3 -1
  133. package/lib/text-field/custom-elements.json +76 -87
  134. package/lib/text-field/custom-elements.md +24 -26
  135. package/lib/text-field/index.d.ts +50 -92
  136. package/lib/text-field/index.js +81 -230
  137. package/lib/time-picker/custom-elements.md +3 -3
  138. package/lib/time-picker/index.d.ts +3 -0
  139. package/lib/time-picker/index.js +3 -0
  140. package/lib/toggle/custom-elements.json +4 -2
  141. package/lib/toggle/custom-elements.md +1 -1
  142. package/lib/toggle/index.d.ts +2 -1
  143. package/lib/toggle/index.js +1 -0
  144. package/lib/tree/custom-elements.json +2 -1
  145. package/lib/tree/custom-elements.md +1 -1
  146. package/lib/tree/elements/tree.d.ts +1 -0
  147. package/lib/tree/elements/tree.js +1 -0
  148. package/lib/tree/themes/halo/dark/index.js +1 -1
  149. package/lib/tree/themes/halo/light/index.js +1 -1
  150. package/lib/tree/themes/solar/charcoal/index.js +1 -1
  151. package/lib/tree/themes/solar/pearl/index.js +1 -1
  152. package/lib/tree-select/custom-elements.json +8 -4
  153. package/lib/tree-select/custom-elements.md +3 -3
  154. package/lib/tree-select/index.d.ts +5 -3
  155. package/lib/tree-select/index.js +3 -2
  156. package/lib/tree-select/themes/halo/dark/index.js +1 -1
  157. package/lib/tree-select/themes/halo/light/index.js +1 -1
  158. package/lib/tree-select/themes/solar/charcoal/index.js +1 -1
  159. package/lib/tree-select/themes/solar/pearl/index.js +1 -1
  160. package/lib/version.js +1 -1
  161. package/package.json +10 -10
package/CHANGELOG.md CHANGED
@@ -3,6 +3,25 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [5.8.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.7.0...@refinitiv-ui/elements@5.8.0) (2021-12-03)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * change default role to more generic type for better extendibility ([#100](https://github.com/Refinitiv/refinitiv-ui/issues/100)) ([fe999dc](https://github.com/Refinitiv/refinitiv-ui/commit/fe999dc66b5f42581a37329ced697ae6ac2dc929))
12
+ * **combo-box:** fix arrow icon not show in Solar when disabled ([55c1008](https://github.com/Refinitiv/refinitiv-ui/commit/55c1008b7b63f915a7575059c6539e63a757e389))
13
+ * **combo-box:** import counter instead of pill ([6410c03](https://github.com/Refinitiv/refinitiv-ui/commit/6410c03dd12077f25347dddb249b6a6700186abc))
14
+
15
+
16
+ ### Features
17
+
18
+ * **list:** improve screen reader ([0bc3a8c](https://github.com/Refinitiv/refinitiv-ui/commit/0bc3a8c9c4051200cd1a5c8ed655d1d3ebbd9021))
19
+ * **select:** improve screen reader support ([#80](https://github.com/Refinitiv/refinitiv-ui/issues/80)) ([a43fbcd](https://github.com/Refinitiv/refinitiv-ui/commit/a43fbcd4b23b2f508ddc94b8007913f66da1ae89))
20
+
21
+
22
+
23
+
24
+
6
25
  # [5.7.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.6.0...@refinitiv-ui/elements@5.7.0) (2021-11-22)
7
26
 
8
27
 
@@ -26,7 +26,7 @@
26
26
  "name": "more-search-text",
27
27
  "description": "Custom text for More Search",
28
28
  "type": "string",
29
- "default": "\"defaultMoreSearchText\""
29
+ "default": "\"More results for {0}\""
30
30
  },
31
31
  {
32
32
  "name": "loading",
@@ -55,12 +55,12 @@
55
55
  ],
56
56
  "properties": [
57
57
  {
58
- "name": "defaultDebounceRate",
58
+ "name": "defaultDebounceRate (readonly)",
59
59
  "type": "100",
60
60
  "default": "100"
61
61
  },
62
62
  {
63
- "name": "defaultMoreSearchText",
63
+ "name": "defaultMoreSearchText (readonly)",
64
64
  "type": "\"More results for {0}\"",
65
65
  "default": "\"More results for {0}\""
66
66
  },
@@ -89,7 +89,7 @@
89
89
  "attribute": "more-search-text",
90
90
  "description": "Custom text for More Search",
91
91
  "type": "string",
92
- "default": "\"defaultMoreSearchText\""
92
+ "default": "\"More results for {0}\""
93
93
  },
94
94
  {
95
95
  "name": "loading",
@@ -177,6 +177,16 @@
177
177
  "description": "Fired when suggestions changed"
178
178
  }
179
179
  ],
180
+ "slots": [
181
+ {
182
+ "name": "header",
183
+ "description": "Slot to add custom contents at the top of autosuggest popup"
184
+ },
185
+ {
186
+ "name": "footer",
187
+ "description": "Slot to add custom contents at the bottom of autosuggest popup"
188
+ }
189
+ ],
180
190
  "methods": [
181
191
  {
182
192
  "name": "onInputValueChange",
@@ -8,20 +8,20 @@ custom rendering, pagination, asynchronous data request, etc.
8
8
 
9
9
  ## Properties
10
10
 
11
- | Property | Attribute | Type | Default | Description |
12
- |------------------|--------------------|----------------------------------------------|-------------------------|--------------------------------------------------|
13
- | `attach` | `attach` | `AutosuggestTargetElement \| string \| null` | null | An HTML Element or CSS selector |
14
- | `debounceRate` | `debounce-rate` | `number` | "100" | Debounce rate in ms of the filter as a number.<br />Used to throttle the filter rate so as not to trigger unneeded filtering |
15
- | `highlightable` | | `AutosuggestHighlightable` | "itemHighlightable" | A function that is applied to every suggestion during the render process<br />to say whether the item can be highlighted and selected. Only items that return true are considered.<br />By default the function checks for `item` `highlightable` property. |
16
- | `htmlRenderer` | `html-renderer` | `boolean` | false | If set to true, the render function is not called. Instead the wrapper element<br />should populate and destroy suggestion elements. Rendering items manually<br />may have performance benefits in frameworks that use virtual DOM (such as `Vue`, `React`, `hyperHTML` and others) |
17
- | `loading` | `loading` | `boolean` | false | If set to true show loading mask |
18
- | `moreResults` | `more-results` | `boolean` | false | If set to true display 'Has more results' item |
19
- | `moreSearchText` | `more-search-text` | `string` | "defaultMoreSearchText" | Custom text for More Search |
20
- | `opened` | `opened` | `boolean` | false | Auto suggest popup's open state |
21
- | `query` | | `AutosuggestQuery \| null` | null | An object that represents a query from attach target |
22
- | `renderer` | | `AutosuggestRenderer` | "itemRenderer" | A renderer applied to suggestion.<br />By default a render maps data to item attributes |
23
- | `requestOnFocus` | `request-on-focus` | `boolean` | false | Request suggestions when attach target is focused |
24
- | `suggestions` | | `AutosuggestItem[]` | [] | A list of suggestion items |
11
+ | Property | Attribute | Type | Default | Description |
12
+ |------------------|--------------------|----------------------------------------------|------------------------|--------------------------------------------------|
13
+ | `attach` | `attach` | `AutosuggestTargetElement \| string \| null` | null | An HTML Element or CSS selector |
14
+ | `debounceRate` | `debounce-rate` | `number` | "100" | Debounce rate in ms of the filter as a number.<br />Used to throttle the filter rate so as not to trigger unneeded filtering |
15
+ | `highlightable` | | `AutosuggestHighlightable` | "itemHighlightable" | A function that is applied to every suggestion during the render process<br />to say whether the item can be highlighted and selected. Only items that return true are considered.<br />By default the function checks for `item` `highlightable` property. |
16
+ | `htmlRenderer` | `html-renderer` | `boolean` | false | If set to true, the render function is not called. Instead the wrapper element<br />should populate and destroy suggestion elements. Rendering items manually<br />may have performance benefits in frameworks that use virtual DOM (such as `Vue`, `React`, `hyperHTML` and others) |
17
+ | `loading` | `loading` | `boolean` | false | If set to true show loading mask |
18
+ | `moreResults` | `more-results` | `boolean` | false | If set to true display 'Has more results' item |
19
+ | `moreSearchText` | `more-search-text` | `string` | "More results for {0}" | Custom text for More Search |
20
+ | `opened` | `opened` | `boolean` | false | Auto suggest popup's open state |
21
+ | `query` | | `AutosuggestQuery \| null` | null | An object that represents a query from attach target |
22
+ | `renderer` | | `AutosuggestRenderer` | "itemRenderer" | A renderer applied to suggestion.<br />By default a render maps data to item attributes |
23
+ | `requestOnFocus` | `request-on-focus` | `boolean` | false | Request suggestions when attach target is focused |
24
+ | `suggestions` | | `AutosuggestItem[]` | [] | A list of suggestion items |
25
25
 
26
26
  ## Methods
27
27
 
@@ -45,3 +45,10 @@ custom rendering, pagination, asynchronous data request, etc.
45
45
  | `suggestions-clear-requested` | Fired when auto suggest requests to clear the data. If used in reactive application, prevent default and set suggestions to [] |
46
46
  | `suggestions-fetch-requested` | Fired when auto suggest requests the data |
47
47
  | `suggestions-query` | Fired when input value has changed and the query must be set |
48
+
49
+ ## Slots
50
+
51
+ | Name | Description |
52
+ |----------|--------------------------------------------------|
53
+ | `footer` | Slot to add custom contents at the bottom of autosuggest popup |
54
+ | `header` | Slot to add custom contents at the top of autosuggest popup |
@@ -24,6 +24,9 @@ export { queryWordSelect, itemRenderer, escapeRegExp, itemHighlightable, updateE
24
24
  *
25
25
  * @attr {boolean} opened - Set to open auto suggest popup
26
26
  * @prop {boolean} [opened=false] - Auto suggest popup's open state
27
+ *
28
+ * @slot header - Slot to add custom contents at the top of autosuggest popup
29
+ * @slot footer - Slot to add custom contents at the bottom of autosuggest popup
27
30
  */
28
31
  export declare class Autosuggest extends Overlay {
29
32
  /**
@@ -83,6 +86,7 @@ export declare class Autosuggest extends Overlay {
83
86
  moreResults: boolean;
84
87
  /**
85
88
  * Custom text for More Search
89
+ * @default More results for {0}
86
90
  */
87
91
  moreSearchText: string;
88
92
  /**
@@ -31,6 +31,9 @@ export { queryWordSelect, itemRenderer, escapeRegExp, itemHighlightable, updateE
31
31
  *
32
32
  * @attr {boolean} opened - Set to open auto suggest popup
33
33
  * @prop {boolean} [opened=false] - Auto suggest popup's open state
34
+ *
35
+ * @slot header - Slot to add custom contents at the top of autosuggest popup
36
+ * @slot footer - Slot to add custom contents at the bottom of autosuggest popup
34
37
  */
35
38
  let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
36
39
  /**
@@ -53,6 +56,7 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
53
56
  this.moreResults = false;
54
57
  /**
55
58
  * Custom text for More Search
59
+ * @default More results for {0}
56
60
  */
57
61
  this.moreSearchText = Autosuggest_1.defaultMoreSearchText;
58
62
  /**
@@ -61,7 +61,8 @@
61
61
  {
62
62
  "name": "values",
63
63
  "description": "Set multiple selected values",
64
- "type": "string[]"
64
+ "type": "string[]",
65
+ "default": "[]"
65
66
  },
66
67
  {
67
68
  "name": "fill-cells",
@@ -154,7 +155,8 @@
154
155
  "name": "values",
155
156
  "attribute": "values",
156
157
  "description": "Set multiple selected values",
157
- "type": "string[]"
158
+ "type": "string[]",
159
+ "default": "[]"
158
160
  },
159
161
  {
160
162
  "name": "fillCells",
@@ -9,14 +9,14 @@ Standard calendar element
9
9
  | `disabled` | `disabled` | `boolean` | false | Set disabled state |
10
10
  | `fillCells` | `fill-cells` | `boolean` | false | Fill head and tail cell dates |
11
11
  | `filter` | | `CalendarFilter \| null` | null | Custom filter, used for enabling/disabling certain dates |
12
- | `firstDayOfWeek` | `first-day-of-week` | `number \| null` | | Set the first day of the week.<br />0 - for Sunday, 6 - for Saturday |
12
+ | `firstDayOfWeek` | `first-day-of-week` | `number \| null` | null | Set the first day of the week.<br />0 - for Sunday, 6 - for Saturday |
13
13
  | `max` | `max` | `string` | "" | Set maximum date |
14
14
  | `min` | `min` | `string` | "" | Set minimum date |
15
15
  | `multiple` | `multiple` | `boolean` | false | Set to switch to multiple select mode |
16
16
  | `range` | `range` | `boolean` | false | Set to switch to range select mode |
17
17
  | `readonly` | `readonly` | `boolean` | false | Set readonly state |
18
18
  | `value` | `value` | `string` | "" | Current date time value |
19
- | `values` | `values` | `string[]` | | Set multiple selected values |
19
+ | `values` | `values` | `string[]` | [] | Set multiple selected values |
20
20
  | `view` | `view` | `string` | "" | Current calendar view date |
21
21
  | `weekdaysOnly` | `weekdays-only` | `boolean` | false | Only enable weekdays |
22
22
  | `weekendsOnly` | `weekends-only` | `boolean` | false | Only enable weekends |
@@ -78,6 +78,7 @@ export declare class Calendar extends ControlElement implements MultiValue {
78
78
  * 0 - for Sunday, 6 - for Saturday
79
79
  * @param firstDayOfWeek The first day of the week
80
80
  * @type {number | null}
81
+ * @default null
81
82
  */
82
83
  set firstDayOfWeek(firstDayOfWeek: number);
83
84
  get firstDayOfWeek(): number;
@@ -101,6 +102,7 @@ export declare class Calendar extends ControlElement implements MultiValue {
101
102
  * Set multiple selected values
102
103
  * @param values Values to set
103
104
  * @type {string[]}
105
+ * @default []
104
106
  */
105
107
  set values(values: string[]);
106
108
  get values(): string[];
@@ -199,6 +199,7 @@ let Calendar = class Calendar extends ControlElement {
199
199
  * 0 - for Sunday, 6 - for Saturday
200
200
  * @param firstDayOfWeek The first day of the week
201
201
  * @type {number | null}
202
+ * @default null
202
203
  */
203
204
  set firstDayOfWeek(firstDayOfWeek) {
204
205
  firstDayOfWeek %= 7;
@@ -226,6 +227,7 @@ let Calendar = class Calendar extends ControlElement {
226
227
  * Set multiple selected values
227
228
  * @param values Values to set
228
229
  * @type {string[]}
230
+ * @default []
229
231
  */
230
232
  set values(values) {
231
233
  const oldValues = this._values;
@@ -8,7 +8,8 @@
8
8
  {
9
9
  "name": "autoloop",
10
10
  "description": "Starts an automatic animation loop.\nEnabling the frame event.",
11
- "type": "boolean"
11
+ "type": "boolean",
12
+ "default": "false"
12
13
  }
13
14
  ],
14
15
  "properties": [
@@ -16,20 +17,21 @@
16
17
  "name": "autoloop",
17
18
  "attribute": "autoloop",
18
19
  "description": "Starts an automatic animation loop.\nEnabling the frame event.",
19
- "type": "boolean"
20
+ "type": "boolean",
21
+ "default": "false"
20
22
  },
21
23
  {
22
- "name": "canvas",
24
+ "name": "canvas (readonly)",
23
25
  "description": "Html canvas element",
24
26
  "type": "HTMLCanvasElement"
25
27
  },
26
28
  {
27
- "name": "ctx",
29
+ "name": "ctx (readonly)",
28
30
  "description": "Alias of context",
29
31
  "type": "CanvasRenderingContext2D | null"
30
32
  },
31
33
  {
32
- "name": "context",
34
+ "name": "context (readonly)",
33
35
  "description": "The 2 dimensional context of the canvas, used for drawing",
34
36
  "type": "CanvasRenderingContext2D | null"
35
37
  },
@@ -5,14 +5,14 @@ it works similarly to the normal HTML5 Canvas element.
5
5
 
6
6
  ## Properties
7
7
 
8
- | Property | Attribute | Modifiers | Type | Default | Description |
9
- |------------|------------|-----------|------------------------------------|---------|--------------------------------------------------|
10
- | `autoloop` | `autoloop` | | `boolean` | | Starts an automatic animation loop.<br />Enabling the frame event. |
11
- | `canvas` | | readonly | `HTMLCanvasElement` | | Html canvas element |
12
- | `context` | | readonly | `CanvasRenderingContext2D \| null` | | The 2 dimensional context of the canvas, used for drawing |
13
- | `ctx` | | readonly | `CanvasRenderingContext2D \| null` | | Alias of context |
14
- | `height` | | | `number` | 0 | Height of canvas |
15
- | `width` | | | `number` | 0 | Width of canvas |
8
+ | Property | Attribute | Type | Default | Description |
9
+ |----------------------|------------|------------------------------------|---------|--------------------------------------------------|
10
+ | `autoloop` | `autoloop` | `boolean` | false | Starts an automatic animation loop.<br />Enabling the frame event. |
11
+ | `canvas (readonly)` | | `HTMLCanvasElement` | | Html canvas element |
12
+ | `context (readonly)` | | `CanvasRenderingContext2D \| null` | | The 2 dimensional context of the canvas, used for drawing |
13
+ | `ctx (readonly)` | | `CanvasRenderingContext2D \| null` | | Alias of context |
14
+ | `height` | | `number` | 0 | Height of canvas |
15
+ | `width` | | `number` | 0 | Width of canvas |
16
16
 
17
17
  ## Methods
18
18
 
@@ -26,6 +26,7 @@ export declare class Canvas extends ResponsiveElement {
26
26
  /**
27
27
  * Starts an automatic animation loop.
28
28
  * Enabling the frame event.
29
+ * @default false
29
30
  */
30
31
  get autoloop(): boolean;
31
32
  set autoloop(val: boolean);
@@ -48,6 +48,7 @@ let Canvas = class Canvas extends ResponsiveElement {
48
48
  /**
49
49
  * Starts an automatic animation loop.
50
50
  * Enabling the frame event.
51
+ * @default false
51
52
  */
52
53
  get autoloop() {
53
54
  return this._autoloop;
@@ -35,7 +35,9 @@
35
35
  },
36
36
  {
37
37
  "name": "config",
38
- "description": "Set card configurations"
38
+ "description": "Set card configurations",
39
+ "type": "CardConfig",
40
+ "default": "{}"
39
41
  }
40
42
  ],
41
43
  "events": [
@@ -4,11 +4,11 @@ A card frame component.
4
4
 
5
5
  ## Properties
6
6
 
7
- | Property | Attribute | Type | Default | Description |
8
- |----------|-----------|----------|---------|-------------------------|
9
- | `config` | | | | Set card configurations |
10
- | `footer` | `footer` | `string` | "" | Set text on the footer |
11
- | `header` | `header` | `string` | "" | Set text on the header |
7
+ | Property | Attribute | Type | Default | Description |
8
+ |----------|-----------|--------------|---------|-------------------------|
9
+ | `config` | | `CardConfig` | {} | Set card configurations |
10
+ | `footer` | `footer` | `string` | "" | Set text on the footer |
11
+ | `header` | `header` | `string` | "" | Set text on the header |
12
12
 
13
13
  ## Events
14
14
 
@@ -37,6 +37,8 @@ export declare class Card extends BasicElement {
37
37
  footer: string;
38
38
  /**
39
39
  * Set card configurations
40
+ * @type {CardConfig}
41
+ * @default {}
40
42
  */
41
43
  get config(): CardConfig;
42
44
  set config(config: CardConfig);
package/lib/card/index.js CHANGED
@@ -71,6 +71,8 @@ let Card = class Card extends BasicElement {
71
71
  }
72
72
  /**
73
73
  * Set card configurations
74
+ * @type {CardConfig}
75
+ * @default {}
74
76
  */
75
77
  get config() {
76
78
  return this._config;
@@ -19,7 +19,7 @@
19
19
  "type": "ChartConfig"
20
20
  },
21
21
  {
22
- "name": "colors",
22
+ "name": "colors (readonly)",
23
23
  "description": "List of available chart colors",
24
24
  "type": "string[]"
25
25
  }
@@ -4,10 +4,10 @@ Charting component that use ChartJS library
4
4
 
5
5
  ## Properties
6
6
 
7
- | Property | Attribute | Modifiers | Type | Default | Description |
8
- |----------|-----------|-----------|---------------|---------|--------------------------------------------------|
9
- | `colors` | | readonly | `string[]` | | List of available chart colors |
10
- | `config` | `config` | | `ChartConfig` | null | Chart configurations. Same configuration as ChartJS |
7
+ | Property | Attribute | Type | Default | Description |
8
+ |---------------------|-----------|---------------|---------|--------------------------------------------------|
9
+ | `colors (readonly)` | | `string[]` | | List of available chart colors |
10
+ | `config` | `config` | `ChartConfig` | null | Chart configurations. Same configuration as ChartJS |
11
11
 
12
12
  ## Methods
13
13
 
@@ -8,12 +8,14 @@
8
8
  {
9
9
  "name": "checked",
10
10
  "description": "Value of checkbox",
11
- "type": "boolean"
11
+ "type": "boolean",
12
+ "default": "false"
12
13
  },
13
14
  {
14
15
  "name": "indeterminate",
15
16
  "description": "Set state to indeterminate",
16
- "type": "boolean"
17
+ "type": "boolean",
18
+ "default": "false"
17
19
  },
18
20
  {
19
21
  "name": "readonly",
@@ -33,13 +35,15 @@
33
35
  "name": "checked",
34
36
  "attribute": "checked",
35
37
  "description": "Value of checkbox",
36
- "type": "boolean"
38
+ "type": "boolean",
39
+ "default": "false"
37
40
  },
38
41
  {
39
42
  "name": "indeterminate",
40
43
  "attribute": "indeterminate",
41
44
  "description": "Set state to indeterminate",
42
- "type": "boolean"
45
+ "type": "boolean",
46
+ "default": "false"
43
47
  },
44
48
  {
45
49
  "name": "readonly",
@@ -6,9 +6,9 @@ Form control for selecting one or several options
6
6
 
7
7
  | Property | Attribute | Type | Default | Description |
8
8
  |-----------------|-----------------|-----------|---------|----------------------------|
9
- | `checked` | `checked` | `boolean` | | Value of checkbox |
9
+ | `checked` | `checked` | `boolean` | false | Value of checkbox |
10
10
  | `disabled` | `disabled` | `boolean` | false | Set disabled state |
11
- | `indeterminate` | `indeterminate` | `boolean` | | Set state to indeterminate |
11
+ | `indeterminate` | `indeterminate` | `boolean` | false | Set state to indeterminate |
12
12
  | `readonly` | `readonly` | `boolean` | false | Set readonly state |
13
13
 
14
14
  ## Events
@@ -17,7 +17,7 @@ export declare class Checkbox extends ControlElement {
17
17
  * @returns version number
18
18
  */
19
19
  static get version(): string;
20
- protected readonly defaultRole = "checkbox";
20
+ protected readonly defaultRole: string | null;
21
21
  /**
22
22
  * A `CSSResultGroup` that will be used
23
23
  * to style the host, slotted children
@@ -29,6 +29,7 @@ export declare class Checkbox extends ControlElement {
29
29
  /**
30
30
  * Value of checkbox
31
31
  * @param value new checked value
32
+ * @default false
32
33
  */
33
34
  set checked(value: boolean);
34
35
  get checked(): boolean;
@@ -36,6 +37,7 @@ export declare class Checkbox extends ControlElement {
36
37
  /**
37
38
  * Set state to indeterminate
38
39
  * @param value new indeterminate value
40
+ * @default false
39
41
  */
40
42
  set indeterminate(value: boolean);
41
43
  get indeterminate(): boolean;
@@ -71,6 +71,7 @@ let Checkbox = class Checkbox extends ControlElement {
71
71
  /**
72
72
  * Value of checkbox
73
73
  * @param value new checked value
74
+ * @default false
74
75
  */
75
76
  set checked(value) {
76
77
  const oldValue = this._checked;
@@ -90,6 +91,7 @@ let Checkbox = class Checkbox extends ControlElement {
90
91
  /**
91
92
  * Set state to indeterminate
92
93
  * @param value new indeterminate value
94
+ * @default false
93
95
  */
94
96
  set indeterminate(value) {
95
97
  const oldValue = this._indeterminate;
@@ -8,7 +8,8 @@
8
8
  {
9
9
  "name": "value",
10
10
  "description": "Get time value in format `hh:mm:ss`",
11
- "type": "string"
11
+ "type": "string",
12
+ "default": "\"00:00:00\""
12
13
  },
13
14
  {
14
15
  "name": "offset",
@@ -18,7 +19,8 @@
18
19
  {
19
20
  "name": "tick",
20
21
  "description": "Toggles clock ticking function.",
21
- "type": "boolean"
22
+ "type": "boolean",
23
+ "default": "false"
22
24
  },
23
25
  {
24
26
  "name": "am-pm",
@@ -50,7 +52,8 @@
50
52
  "name": "value",
51
53
  "attribute": "value",
52
54
  "description": "Get time value in format `hh:mm:ss`",
53
- "type": "string"
55
+ "type": "string",
56
+ "default": "\"00:00:00\""
54
57
  },
55
58
  {
56
59
  "name": "offset",
@@ -62,7 +65,8 @@
62
65
  "name": "tick",
63
66
  "attribute": "tick",
64
67
  "description": "Toggles clock ticking function.",
65
- "type": "boolean"
68
+ "type": "boolean",
69
+ "default": "false"
66
70
  },
67
71
  {
68
72
  "name": "amPm",
@@ -4,15 +4,15 @@ Display hours, minutes and seconds as clock interface
4
4
 
5
5
  ## Properties
6
6
 
7
- | Property | Attribute | Type | Default | Description |
8
- |---------------|----------------|-----------|---------|--------------------------------------------------|
9
- | `amPm` | `am-pm` | `boolean` | false | Display the digital clock in 12hr format. |
10
- | `analogue` | `analogue` | `boolean` | false | Display clock in analogue style. |
11
- | `interactive` | `interactive` | `boolean` | false | Enabled interactive mode. Allowing the user to offset the value. |
12
- | `offset` | `offset` | `number` | | Get offset value |
13
- | `showSeconds` | `show-seconds` | `boolean` | false | Display the seconds segment. |
14
- | `tick` | `tick` | `boolean` | | Toggles clock ticking function. |
15
- | `value` | `value` | `string` | | Get time value in format `hh:mm:ss` |
7
+ | Property | Attribute | Type | Default | Description |
8
+ |---------------|----------------|-----------|------------|--------------------------------------------------|
9
+ | `amPm` | `am-pm` | `boolean` | false | Display the digital clock in 12hr format. |
10
+ | `analogue` | `analogue` | `boolean` | false | Display clock in analogue style. |
11
+ | `interactive` | `interactive` | `boolean` | false | Enabled interactive mode. Allowing the user to offset the value. |
12
+ | `offset` | `offset` | `number` | | Get offset value |
13
+ | `showSeconds` | `show-seconds` | `boolean` | false | Display the seconds segment. |
14
+ | `tick` | `tick` | `boolean` | false | Toggles clock ticking function. |
15
+ | `value` | `value` | `string` | "00:00:00" | Get time value in format `hh:mm:ss` |
16
16
 
17
17
  ## Methods
18
18
 
@@ -44,6 +44,7 @@ export declare class Clock extends ResponsiveElement {
44
44
  private tickTimestamp;
45
45
  /**
46
46
  * Get time value in format `hh:mm:ss`
47
+ * @default 00:00:00
47
48
  * @returns value
48
49
  */
49
50
  get value(): string;
@@ -68,6 +69,7 @@ export declare class Clock extends ResponsiveElement {
68
69
  private _tick;
69
70
  /**
70
71
  * Toggles clock ticking function.
72
+ * @default false
71
73
  */
72
74
  get tick(): boolean;
73
75
  set tick(value: boolean);
@@ -110,6 +110,7 @@ let Clock = class Clock extends ResponsiveElement {
110
110
  }
111
111
  /**
112
112
  * Get time value in format `hh:mm:ss`
113
+ * @default 00:00:00
113
114
  * @returns value
114
115
  */
115
116
  get value() {
@@ -164,6 +165,7 @@ let Clock = class Clock extends ResponsiveElement {
164
165
  }
165
166
  /**
166
167
  * Toggles clock ticking function.
168
+ * @default false
167
169
  */
168
170
  get tick() {
169
171
  return this._tick;