@limetech/lime-elements 36.3.1-next.1 → 36.3.1

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 (172) hide show
  1. package/dist/cjs/{checkbox.template-ac867c17.js → checkbox.template-60ed3ee2.js} +1 -2
  2. package/dist/cjs/{dom-20826de0.js → dom-eb080f70.js} +0 -1
  3. package/dist/cjs/{format-c0047dfb.js → format-5b928cf3.js} +0 -1
  4. package/dist/cjs/lime-elements.cjs.js +1 -1
  5. package/dist/cjs/limel-badge.cjs.entry.js +1 -1
  6. package/dist/cjs/limel-checkbox.cjs.entry.js +2 -2
  7. package/dist/cjs/limel-chip-set.cjs.entry.js +6 -22
  8. package/dist/cjs/limel-circular-progress_2.cjs.entry.js +1 -1
  9. package/dist/cjs/limel-form.cjs.entry.js +1 -20
  10. package/dist/cjs/limel-helper-line.cjs.entry.js +48 -0
  11. package/dist/cjs/limel-icon.cjs.entry.js +0 -2
  12. package/dist/cjs/limel-input-field.cjs.entry.js +4 -21
  13. package/dist/cjs/limel-list_2.cjs.entry.js +3 -7
  14. package/dist/cjs/limel-menu-list.cjs.entry.js +1 -5
  15. package/dist/cjs/limel-picker.cjs.entry.js +1 -10
  16. package/dist/cjs/limel-popover_4.cjs.entry.js +0 -1
  17. package/dist/cjs/limel-select.cjs.entry.js +4 -5
  18. package/dist/cjs/limel-slider.cjs.entry.js +2 -2
  19. package/dist/cjs/limel-snackbar.cjs.entry.js +1 -1
  20. package/dist/cjs/limel-tab-bar.cjs.entry.js +0 -1
  21. package/dist/cjs/limel-table.cjs.entry.js +0 -19
  22. package/dist/cjs/loader.cjs.js +1 -1
  23. package/dist/cjs/{multiple-8fab83eb.js → multiple-2af83b6d.js} +0 -1
  24. package/dist/collection/collection-manifest.json +1 -0
  25. package/dist/collection/components/badge/badge.js +0 -1
  26. package/dist/collection/components/badge/format.js +0 -1
  27. package/dist/collection/components/button-group/button-group.js +0 -1
  28. package/dist/collection/components/callout/callout.js +0 -1
  29. package/dist/collection/components/checkbox/checkbox.css +8 -92
  30. package/dist/collection/components/checkbox/checkbox.template.js +1 -1
  31. package/dist/collection/components/chip-set/chip-set-input-helpers.js +0 -1
  32. package/dist/collection/components/chip-set/chip-set.css +4 -18
  33. package/dist/collection/components/chip-set/chip-set.js +5 -20
  34. package/dist/collection/components/circular-progress/circular-progress.js +0 -1
  35. package/dist/collection/components/code-editor/code-editor.js +1 -2
  36. package/dist/collection/components/color-picker/color-picker.js +0 -1
  37. package/dist/collection/components/date-picker/flatpickr-adapter/flatpickr-adapter.js +0 -1
  38. package/dist/collection/components/dialog/dialog.js +0 -1
  39. package/dist/collection/components/file/file.js +2 -3
  40. package/dist/collection/components/flex-container/flex-container.js +0 -1
  41. package/dist/collection/components/form/adapters/base-adapter.js +0 -12
  42. package/dist/collection/components/form/fields/field-helpers.js +0 -3
  43. package/dist/collection/components/form/fields/schema-field.js +0 -3
  44. package/dist/collection/components/form/templates/common.js +0 -1
  45. package/dist/collection/components/grid/grid.js +0 -1
  46. package/dist/collection/components/header/header.js +0 -1
  47. package/dist/collection/components/helper-line/helper-line.css +30 -0
  48. package/dist/collection/components/helper-line/helper-line.js +166 -0
  49. package/dist/collection/components/icon/icon.js +0 -2
  50. package/dist/collection/components/info-tile/info-tile.js +0 -1
  51. package/dist/collection/components/input-field/input-field.css +3 -15
  52. package/dist/collection/components/input-field/input-field.js +3 -20
  53. package/dist/collection/components/list/list-renderer.js +0 -4
  54. package/dist/collection/components/list/list.css +16 -184
  55. package/dist/collection/components/menu-list/menu-list-renderer.js +0 -4
  56. package/dist/collection/components/menu-list/menu-list.css +16 -185
  57. package/dist/collection/components/picker/picker.js +0 -9
  58. package/dist/collection/components/popover/popover.js +0 -2
  59. package/dist/collection/components/portal/contains.js +0 -1
  60. package/dist/collection/components/portal/portal.js +10 -11
  61. package/dist/collection/components/select/select.css +10 -40
  62. package/dist/collection/components/select/select.template.js +2 -2
  63. package/dist/collection/components/shortcut/shortcut.js +0 -1
  64. package/dist/collection/components/slider/slider.css +6 -33
  65. package/dist/collection/components/slider/slider.js +1 -1
  66. package/dist/collection/components/snackbar/snackbar.js +26 -3
  67. package/dist/collection/components/split-button/split-button.js +0 -1
  68. package/dist/collection/components/tab-bar/tab-bar.js +1 -2
  69. package/dist/collection/components/tab-bar/tabs.js +0 -1
  70. package/dist/collection/components/tab-panel/tab-panel.js +0 -1
  71. package/dist/collection/components/table/columns.js +0 -9
  72. package/dist/collection/components/table/element-pool.js +0 -2
  73. package/dist/collection/components/table/selection.js +0 -4
  74. package/dist/collection/components/table/table-selection.js +0 -4
  75. package/dist/collection/components/tooltip/tooltip-content.js +0 -1
  76. package/dist/collection/components/tooltip/tooltip.js +0 -1
  77. package/dist/collection/global/icon-cache.js +0 -1
  78. package/dist/collection/util/dom.js +0 -1
  79. package/dist/collection/util/multiple.js +0 -1
  80. package/dist/esm/{checkbox.template-fc7fcd06.js → checkbox.template-4ce8d92f.js} +1 -2
  81. package/dist/esm/{dom-0f79cbe7.js → dom-2fe617e7.js} +0 -1
  82. package/dist/esm/{format-a0e2d949.js → format-c76733cb.js} +0 -1
  83. package/dist/esm/lime-elements.js +1 -1
  84. package/dist/esm/limel-badge.entry.js +1 -1
  85. package/dist/esm/limel-checkbox.entry.js +2 -2
  86. package/dist/esm/limel-chip-set.entry.js +6 -22
  87. package/dist/esm/limel-circular-progress_2.entry.js +1 -1
  88. package/dist/esm/limel-form.entry.js +1 -20
  89. package/dist/esm/limel-helper-line.entry.js +44 -0
  90. package/dist/esm/limel-icon.entry.js +0 -2
  91. package/dist/esm/limel-input-field.entry.js +4 -21
  92. package/dist/esm/limel-list_2.entry.js +3 -7
  93. package/dist/esm/limel-menu-list.entry.js +1 -5
  94. package/dist/esm/limel-picker.entry.js +1 -10
  95. package/dist/esm/limel-popover_4.entry.js +0 -1
  96. package/dist/esm/limel-select.entry.js +4 -5
  97. package/dist/esm/limel-slider.entry.js +2 -2
  98. package/dist/esm/limel-snackbar.entry.js +1 -1
  99. package/dist/esm/limel-tab-bar.entry.js +0 -1
  100. package/dist/esm/limel-table.entry.js +0 -19
  101. package/dist/esm/loader.js +1 -1
  102. package/dist/esm/{multiple-254f4b61.js → multiple-0bd62427.js} +0 -1
  103. package/dist/lime-elements/lime-elements.esm.js +1 -1
  104. package/dist/lime-elements/p-094dd76a.entry.js +126 -0
  105. package/dist/lime-elements/p-20059fcf.entry.js +82 -0
  106. package/dist/lime-elements/{p-157e0417.entry.js → p-5ab179b4.entry.js} +3 -3
  107. package/dist/lime-elements/{p-eed2a202.entry.js → p-6b8142ba.entry.js} +5 -5
  108. package/dist/lime-elements/{p-05d88196.entry.js → p-727fd4ea.entry.js} +2 -2
  109. package/dist/lime-elements/p-803cc4b7.entry.js +1 -0
  110. package/dist/lime-elements/{p-8178b348.entry.js → p-8a2d1761.entry.js} +1 -1
  111. package/dist/lime-elements/{p-d955c169.entry.js → p-8acabe02.entry.js} +1 -1
  112. package/dist/lime-elements/{p-a88f2922.entry.js → p-8d3a9e2c.entry.js} +1 -1
  113. package/dist/lime-elements/p-ba7661f6.entry.js +1 -0
  114. package/dist/lime-elements/p-d034bbcf.entry.js +1 -0
  115. package/dist/lime-elements/{p-1af8258b.js → p-d2a3d50b.js} +1 -1
  116. package/dist/lime-elements/{p-2fd478df.entry.js → p-ef93fd3e.entry.js} +1 -1
  117. package/dist/lime-elements/{p-58e9df30.entry.js → p-f4cbcdcf.entry.js} +1 -1
  118. package/dist/types/components/badge/badge.d.ts +0 -1
  119. package/dist/types/components/badge/format.d.ts +0 -1
  120. package/dist/types/components/button-group/button-group.d.ts +0 -1
  121. package/dist/types/components/callout/callout.d.ts +0 -1
  122. package/dist/types/components/chip-set/chip-set-input-helpers.d.ts +0 -1
  123. package/dist/types/components/chip-set/chip-set.d.ts +1 -7
  124. package/dist/types/components/circular-progress/circular-progress.d.ts +0 -1
  125. package/dist/types/components/code-editor/code-editor.d.ts +1 -2
  126. package/dist/types/components/color-picker/color-picker.d.ts +0 -1
  127. package/dist/types/components/date-picker/flatpickr-adapter/flatpickr-adapter.d.ts +0 -1
  128. package/dist/types/components/dialog/dialog.d.ts +0 -1
  129. package/dist/types/components/file/file.d.ts +2 -3
  130. package/dist/types/components/flex-container/flex-container.d.ts +0 -1
  131. package/dist/types/components/form/adapters/base-adapter.d.ts +0 -11
  132. package/dist/types/components/form/fields/field-helpers.d.ts +0 -2
  133. package/dist/types/components/form/fields/schema-field.d.ts +0 -2
  134. package/dist/types/components/form/templates/common.d.ts +0 -1
  135. package/dist/types/components/grid/grid.d.ts +0 -1
  136. package/dist/types/components/header/header.d.ts +0 -1
  137. package/dist/types/components/helper-line/helper-line.d.ts +57 -0
  138. package/dist/types/components/icon/icon.d.ts +0 -2
  139. package/dist/types/components/info-tile/info-tile.d.ts +0 -1
  140. package/dist/types/components/input-field/input-field.d.ts +0 -3
  141. package/dist/types/components/list/list-renderer.d.ts +0 -4
  142. package/dist/types/components/menu-list/menu-list-renderer.d.ts +0 -4
  143. package/dist/types/components/picker/picker.d.ts +0 -9
  144. package/dist/types/components/picker/searcher.types.d.ts +0 -1
  145. package/dist/types/components/popover/popover.d.ts +0 -2
  146. package/dist/types/components/portal/contains.d.ts +0 -1
  147. package/dist/types/components/portal/portal.d.ts +10 -11
  148. package/dist/types/components/shortcut/shortcut.d.ts +0 -1
  149. package/dist/types/components/snackbar/snackbar.d.ts +23 -1
  150. package/dist/types/components/split-button/split-button.d.ts +0 -1
  151. package/dist/types/components/tab-bar/tab-bar.d.ts +1 -2
  152. package/dist/types/components/tab-bar/tabs.d.ts +0 -1
  153. package/dist/types/components/tab-panel/tab-panel.d.ts +0 -1
  154. package/dist/types/components/table/columns.d.ts +0 -7
  155. package/dist/types/components/table/element-pool.d.ts +0 -2
  156. package/dist/types/components/table/selection.d.ts +0 -4
  157. package/dist/types/components/table/table-selection.d.ts +0 -4
  158. package/dist/types/components/table/table.types.d.ts +0 -3
  159. package/dist/types/components/tooltip/tooltip-content.d.ts +0 -1
  160. package/dist/types/components/tooltip/tooltip.d.ts +0 -1
  161. package/dist/types/components.d.ts +54 -1
  162. package/dist/types/global/icon-cache.d.ts +0 -1
  163. package/dist/types/util/dom.d.ts +0 -1
  164. package/dist/types/util/multiple.d.ts +0 -1
  165. package/package.json +7 -7
  166. package/dist/lime-elements/p-142910d8.entry.js +0 -126
  167. package/dist/lime-elements/p-73613abb.entry.js +0 -82
  168. package/dist/lime-elements/p-d0084a70.entry.js +0 -1
  169. package/dist/lime-elements/p-ff0e407a.entry.js +0 -1
  170. /package/dist/lime-elements/{p-f08f504b.js → p-0eabb204.js} +0 -0
  171. /package/dist/lime-elements/{p-0534b23b.js → p-5f020b3c.js} +0 -0
  172. /package/dist/lime-elements/{p-af8d4fe7.js → p-acf307d9.js} +0 -0
@@ -3,7 +3,6 @@ import { FlexContainerAlign, FlexContainerDirection, FlexContainerJustify } from
3
3
  * This component is deprecated and will be removed in a future version of
4
4
  * Lime Elements. Please use CSS for your flexible container needs 🙂
5
5
  * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
6
- *
7
6
  * @deprecated
8
7
  * @private
9
8
  * @slot - Container content
@@ -34,7 +34,6 @@ export declare class LimeElementsAdapter extends React.Component<any, any> {
34
34
  /**
35
35
  * Given a key a value set the value of property named `key` to
36
36
  * the value of `value`
37
- *
38
37
  * @param {string} key The name of the property
39
38
  * @param {any} value The value of the property
40
39
  * @returns {void}
@@ -45,28 +44,24 @@ export declare class LimeElementsAdapter extends React.Component<any, any> {
45
44
  *
46
45
  * Events must be bound using this function otherwise events will bubble up too far
47
46
  * since react events are different that native dom events
48
- *
49
47
  * @param {string} eventName the name of the event to get the handler for
50
48
  * @returns {any} the handler to bind to the component for the event name
51
49
  */
52
50
  getHandler(eventName: string): (event: any) => void;
53
51
  /**
54
52
  * Set events on the web component
55
- *
56
53
  * @param {object} events Event names to handlers
57
54
  * @returns {void}
58
55
  */
59
56
  setEvents(events: object): void;
60
57
  /**
61
58
  * Remove events on the web component
62
- *
63
59
  * @param {object} events Event names to handlers
64
60
  * @returns {void}
65
61
  */
66
62
  removeEvents(events: object): void;
67
63
  /**
68
64
  * Get the events to remove from the component
69
- *
70
65
  * @param {object} prevEvents previous events
71
66
  * @param {object} nextEvents new events
72
67
  * @returns {object} the events to remove
@@ -74,7 +69,6 @@ export declare class LimeElementsAdapter extends React.Component<any, any> {
74
69
  getEventsToRemove(prevEvents: object, nextEvents: object): object;
75
70
  /**
76
71
  * Get the events to add to the component
77
- *
78
72
  * @param {object} prevEvents previous events
79
73
  * @param {object} nextEvents new events
80
74
  * @returns {object} the events to add
@@ -84,20 +78,17 @@ export declare class LimeElementsAdapter extends React.Component<any, any> {
84
78
  * Detect if event handlers have changed. If they
85
79
  * have changed, store them in the state, and remove and
86
80
  * re-add the changed event handlers
87
- *
88
81
  * @returns {void}
89
82
  */
90
83
  updateEvents(): void;
91
84
  /**
92
85
  * Get non primitive props. i.e. object, function, array, etc
93
- *
94
86
  * @param {object} elementProps the props to pass the webcomponet
95
87
  * @returns {object} non primitive props
96
88
  */
97
89
  getNonPrimitiveProps(elementProps: object): object;
98
90
  /**
99
91
  * Get primitive props. i.e. integer, boolean, etc
100
- *
101
92
  * @param {object} elementProps the props to pass the webcomponet
102
93
  * @returns {object} primitive props
103
94
  */
@@ -106,7 +97,6 @@ export declare class LimeElementsAdapter extends React.Component<any, any> {
106
97
  * Given the previous renders props and the next renders props,
107
98
  * check if any of the property values have changed and return an
108
99
  * object with only those values
109
- *
110
100
  * @param {object} prevNonPrimitiveProps the previous renders non primitive props
111
101
  * @param {object} nextNonPrimitiveProps the current renders non primitive props
112
102
  * @returns {object} the changed primitive props
@@ -119,7 +109,6 @@ export declare class LimeElementsAdapter extends React.Component<any, any> {
119
109
  * instead of passing them as props the the React.createElement
120
110
  * function because non primitive props are not passed properly to the web
121
111
  * component via React.createElement
122
- *
123
112
  * @param {object} elementProps element props to set
124
113
  * @returns {void}
125
114
  */
@@ -3,7 +3,6 @@
3
3
  * has any other fields that are dependent on it, and if so reset those dependent fields
4
4
  * (by deleting them from the data so that their defaults are populated on the next rerender).
5
5
  * Call onChange with the updated data
6
- *
7
6
  * @param {any} oldData The previous data before a data change event
8
7
  * @param {any} newData The form data from a change event
9
8
  * @param {object} schema The schema associated with the data
@@ -13,7 +12,6 @@
13
12
  export declare const resetDependentFields: (oldData: any, newData: any, schema: any, rootSchema: any) => any;
14
13
  /**
15
14
  * Check if the schema is of type object and have no declared properties
16
- *
17
15
  * @param {any} schema the schema
18
16
  * @returns {boolean} true if the schema is for a custom object
19
17
  */
@@ -4,7 +4,6 @@ import React from 'react';
4
4
  import { FieldProps } from './types';
5
5
  /**
6
6
  * Create properties from the factory that is set on `limel-form`
7
- *
8
7
  * @param {*} formContext the form context
9
8
  * @param {*} schema the schema for the current field
10
9
  * @returns {object} the properties created by the factory
@@ -29,7 +28,6 @@ export declare class SchemaField extends React.Component<FieldProps> {
29
28
  render(): React.FunctionComponentElement<any> | React.CElement<import("@rjsf/core/lib/components/fields/SchemaField").SchemaFieldProps<any>, JSONSchemaField>;
30
29
  /**
31
30
  * Gets the path to the current property within the schema
32
- *
33
31
  * @param {string} schemaId the id of the schema
34
32
  * @returns {string[]} an array with the schema path for the current property
35
33
  * @example
@@ -11,7 +11,6 @@ export declare function renderDescription(description: string): React.DetailedRe
11
11
  * If an object has the key 'title' it will have priority, followed by the key 'name'.
12
12
  * If 'title' nor 'name' is found, a required item will be considered.
13
13
  * Otherwise the first occurrence of a nonempty string is chosen.
14
- *
15
14
  * @param {*} data the data to find the title for
16
15
  * @param {*} fieldSchema schema for the item
17
16
  * @param {*} formSchema schema for the form
@@ -2,7 +2,6 @@
2
2
  * The `limel-grid` component creates a grid which can be used to control the
3
3
  * layout of other components. It uses CSS [grid-template-areas](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas)
4
4
  * to enable easy configuration of its child-elements.
5
- *
6
5
  * @exampleComponent limel-example-grid
7
6
  * @slot - Grid content
8
7
  */
@@ -37,7 +37,6 @@
37
37
  * Background colors behind icons make them look like "call to action" buttons
38
38
  * and take a lot of attention from users.
39
39
  * :::
40
- *
41
40
  * @exampleComponent limel-example-header
42
41
  * @exampleComponent limel-example-header-colors
43
42
  * @exampleComponent limel-example-header-responsive
@@ -0,0 +1,57 @@
1
+ /**
2
+ * This is an internal and private component that many input fields
3
+ * use to display a helper text, along with a character counter below the
4
+ * input field.
5
+ *
6
+ * We created this to keep the visual styles the same everywhere
7
+ * and to avoid importing styles separately.
8
+ *
9
+ * Also this enables us to open the helper line in limel-portal,
10
+ * more easily without having to send the styles to the portal.
11
+ *
12
+ * :::note
13
+ * When the component has no content, it will get a `display: none`
14
+ * as styles to avoid creating empty holes in the UI of the parent component.
15
+ * For example, in a `flex` or `grid` component that has a `gap`,
16
+ * we don't want the empty `limel-helper-line` to render and cause unnecessary
17
+ * gaps in the UI.
18
+ * However, to be more resourceful, the parent component can choose not
19
+ * to render the helper-line as well.
20
+ * :::
21
+ * @exampleComponent limel-example-helper-line
22
+ * @exampleComponent limel-example-helper-line-invalid
23
+ * @exampleComponent limel-example-helper-line-long-text
24
+ * @exampleComponent limel-example-helper-line-long-text-no-counter
25
+ * @exampleComponent limel-example-helper-line-character-counter
26
+ * @private
27
+ */
28
+ export declare class HelperLine {
29
+ /**
30
+ * The helper text that is displayed on the left side.
31
+ */
32
+ helperText?: string;
33
+ /**
34
+ * Length of the current input value, coming from the parent component.
35
+ * Used in the character counter section on the right side.
36
+ */
37
+ length?: number;
38
+ /**
39
+ * Maximum length of the characters, defined on the parent component.
40
+ * Used in the character counter section on the right side.
41
+ */
42
+ maxLength?: number;
43
+ /**
44
+ * Turns `true`, when the parent component is invalid.
45
+ * For example, when the parent component is `required` but is left empty.
46
+ * Or when the input format is invalid.
47
+ */
48
+ invalid?: boolean;
49
+ /**
50
+ * Used by `aria-controls` and `aria-describedby` in the parent component.
51
+ */
52
+ helperTextId?: string;
53
+ render(): any;
54
+ private hasContent;
55
+ private renderHelperText;
56
+ private renderCharacterCounter;
57
+ }
@@ -49,7 +49,6 @@ import { IconSize } from './icon.types';
49
49
  * Search for an icon and **click on it to copy its name to clipboard**.
50
50
  *
51
51
  * <limel-example-icon-finder />
52
- *
53
52
  * @exampleComponent limel-example-icon
54
53
  * @exampleComponent limel-example-icon-background
55
54
  */
@@ -73,7 +72,6 @@ export declare class Icon {
73
72
  protected loadIcon(name: string): Promise<void>;
74
73
  /**
75
74
  * Load the SVG data for the icon from the icon cache
76
- *
77
75
  * @param {string} name name of the icon
78
76
  * @returns {string} the icon SVG data
79
77
  */
@@ -8,7 +8,6 @@ import { Link } from '@limetech/lime-elements';
8
8
  * If clicking on the component should navigate the user to
9
9
  * a new screen or web page, you need to provide a URL,
10
10
  * using the `link` property.
11
- *
12
11
  * @exampleComponent limel-example-info-tile
13
12
  * @exampleComponent limel-example-info-tile-badge
14
13
  * @exampleComponent limel-example-info-tile-progress
@@ -166,13 +166,11 @@ export declare class InputField {
166
166
  private onBlur;
167
167
  private renderHelperLine;
168
168
  private renderEmptyValueForReadonly;
169
- private renderHelperText;
170
169
  private hasHelperText;
171
170
  private renderSuffix;
172
171
  private hasSuffix;
173
172
  private renderPrefix;
174
173
  private hasPrefix;
175
- private renderCharacterCounter;
176
174
  private isInvalid;
177
175
  private getInputElement;
178
176
  private renderLabel;
@@ -187,7 +185,6 @@ export declare class InputField {
187
185
  /**
188
186
  * Key handler for the input field
189
187
  * Will change focus to the first/last item in the dropdown list to enable selection with the keyboard
190
- *
191
188
  * @param {KeyboardEvent} event event
192
189
  * @returns {void}
193
190
  */
@@ -14,14 +14,12 @@ export declare class ListRenderer {
14
14
  * and return the index at which that ListItem is located in `items`.
15
15
  * Returns `undefined` if no item should have the attribute set.
16
16
  * See https://github.com/material-components/material-components-web/tree/e66a43a75fef4f9179e24856649518e15e279a04/packages/mdc-list#accessibility
17
- *
18
17
  * @param {Array<ListItem | ListSeparator>} items the items of the list, including any `ListSeparator`:s
19
18
  * @returns {number} the index as per the description
20
19
  */
21
20
  private getIndexForWhichToApplyTabIndex;
22
21
  /**
23
22
  * Render a single list item
24
- *
25
23
  * @param {ListItem | ListSeparator} item the item to render
26
24
  * @param {number} index the index the item had in the `items` array
27
25
  * @returns {HTMLElement} the list item
@@ -31,7 +29,6 @@ export declare class ListRenderer {
31
29
  private hasPrimaryComponent;
32
30
  /**
33
31
  * Render the text of the list item
34
- *
35
32
  * @param {ListItem} item the list item
36
33
  * @returns {HTMLElement | string} the text for the list item
37
34
  */
@@ -39,7 +36,6 @@ export declare class ListRenderer {
39
36
  private isSimpleItem;
40
37
  /**
41
38
  * Render an icon for a list item
42
- *
43
39
  * @param {ListRendererConfig} config the config object, passed on from the `renderListItem` function
44
40
  * @param {ListItem} item the list item
45
41
  * @returns {HTMLElement} the icon element
@@ -14,14 +14,12 @@ export declare class MenuListRenderer {
14
14
  * and return the index at which that MenuItem is located in `items`.
15
15
  * Returns `undefined` if no item should have the attribute set.
16
16
  * See https://github.com/material-components/material-components-web/tree/e66a43a75fef4f9179e24856649518e15e279a04/packages/mdc-list#accessibility
17
- *
18
17
  * @param {Array<MenuItem | ListSeparator>} items the items of the list, including any `ListSeparator`:s
19
18
  * @returns {number} the index as per the description
20
19
  */
21
20
  private getIndexForWhichToApplyTabIndex;
22
21
  /**
23
22
  * Render a single list item
24
- *
25
23
  * @param {MenuItem | ListSeparator} item the item to render
26
24
  * @param {number} index the index the item had in the `items` array
27
25
  * @returns {HTMLElement} the list item
@@ -29,7 +27,6 @@ export declare class MenuListRenderer {
29
27
  private renderMenuItem;
30
28
  /**
31
29
  * Render the text of the list item
32
- *
33
30
  * @param {MenuItem} item the list item
34
31
  * @returns {HTMLElement | string} the text for the list item
35
32
  */
@@ -38,7 +35,6 @@ export declare class MenuListRenderer {
38
35
  private isSimpleItem;
39
36
  /**
40
37
  * Render an icon for a list item
41
- *
42
38
  * @param {MenuListRendererConfig} config the config object, passed on from the `renderMenuItem` function
43
39
  * @param {MenuItem} item the list item
44
40
  * @returns {HTMLElement} the icon element
@@ -119,7 +119,6 @@ export declare class Picker {
119
119
  /**
120
120
  * Renders the dropdown with the items to pick from, or a spinner if the picker
121
121
  * is waiting for items to be received
122
- *
123
122
  * @returns {HTMLElement} picker dropdown
124
123
  */
125
124
  private renderDropdown;
@@ -130,7 +129,6 @@ export declare class Picker {
130
129
  /**
131
130
  * Returns true if the picker is "full"
132
131
  * The picker is considered to be full if it has a value and only one is allowed
133
- *
134
132
  * @returns {boolean} true if the picker is full
135
133
  */
136
134
  private isFull;
@@ -141,27 +139,23 @@ export declare class Picker {
141
139
  private renderPortal;
142
140
  /**
143
141
  * Check if a descendant still has focus. If not, reset text value and search result.
144
- *
145
142
  * @returns {void}
146
143
  */
147
144
  private handleStopEditAndBlur;
148
145
  /**
149
146
  * Input handler for the input field
150
- *
151
147
  * @param {InputEvent} event event
152
148
  * @returns {void}
153
149
  */
154
150
  private handleTextInput;
155
151
  /**
156
152
  * Change handler for the list
157
- *
158
153
  * @param {LimelListCustomEvent<ListItem>} event event
159
154
  * @returns {void}
160
155
  */
161
156
  private handleListChange;
162
157
  /**
163
158
  * Change handler for the list
164
- *
165
159
  * @param {LimelChipSetCustomEvent} event event
166
160
  * @returns {void}
167
161
  */
@@ -169,7 +163,6 @@ export declare class Picker {
169
163
  /**
170
164
  * Focus handler for the chip set
171
165
  * Prevent focus if the picker has a value and does not support multiple values
172
- *
173
166
  * @returns {void}
174
167
  */
175
168
  private handleInputFieldFocus;
@@ -178,14 +171,12 @@ export declare class Picker {
178
171
  /**
179
172
  * Key handler for the input field
180
173
  * Will change focus to the first/last item in the dropdown list to enable selection with the keyboard
181
- *
182
174
  * @param {KeyboardEvent} event event
183
175
  * @returns {void}
184
176
  */
185
177
  private handleInputKeyDown;
186
178
  /**
187
179
  * Key handler for the dropdown
188
- *
189
180
  * @param {KeyboardEvent} event event
190
181
  * @returns {void}
191
182
  */
@@ -2,7 +2,6 @@ import { ListItem } from '../list/list-item.types';
2
2
  /**
3
3
  * A search function that takes a search-string as an argument, and returns
4
4
  * a promise that will eventually be resolved with an array of `ListItem`:s.
5
- *
6
5
  * @param {string} query A search query. Typically what the user has written
7
6
  * in the input field of a limel-picker.
8
7
  * @returns {Promise<ListItem[]>} The search result.
@@ -45,8 +45,6 @@ import { OpenDirection } from '../menu/menu.types';
45
45
  * Do not make a popover too big. They should never take over the entire screen.
46
46
  * If your content is that big, you should probably be using a Modal instead.
47
47
  * :::
48
- *
49
- *
50
48
  * @slot - Content to put inside the surface
51
49
  * @exampleComponent limel-example-popover
52
50
  */
@@ -3,7 +3,6 @@
3
3
  *
4
4
  * If the child element is a descendant of a limel-portal, this function will
5
5
  * go back through the portal and check the original tree recursively
6
- *
7
6
  * @param {HTMLElement} element the parent element
8
7
  * @param {HTMLElement} child the child element to check
9
8
  * @returns {boolean} `true` if child is a descendant of element, taking
@@ -6,20 +6,19 @@ import { OpenDirection } from '../menu/menu.types';
6
6
  * There are some caveats when using this component
7
7
  *
8
8
  * Events might not bubble up as expected since the content is moved out to
9
- * another DOM node.
9
+ * another DOM node.
10
10
  * Any styling that is applied to content from the parent will be lost, if the
11
- * content is just another web compoent it will work without any issues.
12
- * Alternatively, use the
13
- * `style=""` html attribute.
11
+ * content is just another web compoent it will work without any issues.
12
+ * Alternatively, use the
13
+ * `style=""` html attribute.
14
14
  * Any component that is placed inside the container must have a style of
15
- * `max-height: inherit`. This ensures that its placement is calculated
16
- * correctly in relation to the trigger, and that it never covers its own
17
- * trigger.
15
+ * `max-height: inherit`. This ensures that its placement is calculated
16
+ * correctly in relation to the trigger, and that it never covers its own
17
+ * trigger.
18
18
  * When the node is moved in the DOM, `disconnectedCallback` and
19
- * `connectedCallback` will be invoked, so if `disconnectedCallback` is used
20
- * to do any tear-down, the appropriate setup will have to be done again on
21
- * `connectedCallback`.
22
- *
19
+ * `connectedCallback` will be invoked, so if `disconnectedCallback` is used
20
+ * to do any tear-down, the appropriate setup will have to be done again on
21
+ * `connectedCallback`.
23
22
  * @slot - Content to put inside the portal
24
23
  * @private
25
24
  * @exampleComponent limel-example-portal
@@ -7,7 +7,6 @@ import { Link } from '@limetech/lime-elements';
7
7
  * By default, this navigation will happen within the same browser tab.
8
8
  * However, it is possible to override that behavior, by specifying a `target`
9
9
  * for the `link` property
10
- *
11
10
  * @exampleComponent limel-example-shortcut
12
11
  * @exampleComponent limel-example-shortcut-notification
13
12
  * @exampleComponent limel-example-shortcut-styling
@@ -1,6 +1,28 @@
1
1
  import { Languages } from '@limetech/lime-elements';
2
2
  /**
3
+ * A Snackbar –also known as "Toast"– is used to inform the end user
4
+ * about an action or a process in the system.
5
+ * The information could vary from announcing that a process has just started,
6
+ * is taking place now, has ended, or has been interrupted or canceled.
7
+ *
8
+ * The information that you provide using a snackbar should be:
9
+ * - temporary
10
+ * - contextual
11
+ * - short
12
+ * - and most importantly, ignorable.
13
+ *
14
+ * It means if the user misses the information, it shouldn't be a big deal.
15
+ *
16
+ * :::note
17
+ * If the information you want to display has a higher importance or priority,
18
+ * and you need to make sure that the user takes an action to dismiss it,
19
+ * consider using the [Banner](/#/component/limel-banner/) component instead.
20
+ * For more complex interactions and for delivering more detailed information,
21
+ * [Dialog](/#/component/limel-dialog/) is a better choice.
22
+ * :::
3
23
  * @exampleComponent limel-example-snackbar
24
+ * @exampleComponent limel-example-snackbar-with-action
25
+ * @exampleComponent limel-example-snackbar-with-changing-messages
4
26
  */
5
27
  export declare class Snackbar {
6
28
  /**
@@ -10,7 +32,7 @@ export declare class Snackbar {
10
32
  /**
11
33
  * The amount of time in milliseconds to show the snackbar.
12
34
  */
13
- timeout: number;
35
+ timeout?: number;
14
36
  /**
15
37
  * The text to display for the action button.
16
38
  */
@@ -12,7 +12,6 @@ import { ListSeparator, MenuItem } from '@limetech/lime-elements';
12
12
  * The button should only be used for performing commands!
13
13
  * - Never use this component instead of a Select or Menu component!
14
14
  * :::
15
- *
16
15
  * @exampleComponent limel-example-split-button-basic
17
16
  * @exampleComponent limel-example-split-button-repeat-default-command
18
17
  */
@@ -7,14 +7,13 @@ import { Tab } from './tab.types';
7
7
  * :::
8
8
  * An exception for using tab bars in a high level of hierarchy is their usage in modals. This is because modals are perceived as a separate place and not a part of the current context. Therefore you can use tab bars in a modal to group and organize its content.
9
9
  * A tab bar can contain an unlimited number of tabs. However, depending on the device width and width of the tabs, the number of tabs that are visible at the same time will vary. When there is limited horizontal space, the component shows a left-arrow and/or right-arrow button, which scrolls and reveals the additional tabs. The tab bar can also be swiped left and right on a touch-device.
10
- *:::tip Other things to consider
10
+ * :::tip Other things to consider
11
11
  * Never divide the content of a tab using a nested tab bar.
12
12
  * Never place two tab bars within the same screen.
13
13
  * Never use background color for icons in tabs.
14
14
  * Avoid having long labels for tabs.
15
15
  * A tab will never be removed or get disabled, even if there is no content under it.
16
16
  * :::
17
- *
18
17
  * @exampleComponent limel-example-tab-bar
19
18
  * @exampleComponent limel-example-tab-bar-with-dynamic-tab-width
20
19
  * @exampleComponent limel-example-tab-bar-with-equal-tab-width
@@ -2,7 +2,6 @@ import { Tab } from './tab.types';
2
2
  /**
3
3
  * Set a tabs `active` state to true in a list of tabs. The previous tab with
4
4
  * `active` set to true will have it set to `false` instead.
5
- *
6
5
  * @param {Tab[]} tabs list of tabs
7
6
  * @param {number} index the index of the tab to set to active
8
7
  * @returns {Tab[]} a copy of the list of tabs with the changed tabs replaced
@@ -14,7 +14,6 @@ import { Tab } from '../tab-bar/tab.types';
14
14
  *
15
15
  * The slotted components can also emit the `changeTab` event to update anything
16
16
  * inside the actual tab, e.g. to change the icon, color or badge.
17
- *
18
17
  * @slot - Content to put inside the `limel-tab-panel`. Each slotted element
19
18
  * must have the `id` attribute equal to the id of the tab it belongs to.
20
19
  * @exampleComponent limel-example-tab-panel
@@ -6,7 +6,6 @@ export declare class ColumnDefinitionFactory {
6
6
  constructor(pool: ElementPool);
7
7
  /**
8
8
  * Create Tabulator column definitions from a limel-table column configuration
9
- *
10
9
  * @param {Column} column config describing the column
11
10
  * @returns {Tabulator.ColumnDefinition} Tabulator column
12
11
  */
@@ -14,14 +13,12 @@ export declare class ColumnDefinitionFactory {
14
13
  }
15
14
  /**
16
15
  * Formats the header of the column
17
- *
18
16
  * @param {Column} column the configuration for the column
19
17
  * @returns {string | HTMLElement} custom component that renders a column header
20
18
  */
21
19
  export declare const formatHeader: (column: Column) => () => string | HTMLElement;
22
20
  /**
23
21
  * Create a formatter to be used to format values in a column
24
- *
25
22
  * @param {Column} column config describing the column
26
23
  * @param {ElementPool} pool pool to get custom components from
27
24
  * @returns {Tabulator.Formatter} Tabulator formatter
@@ -29,7 +26,6 @@ export declare const formatHeader: (column: Column) => () => string | HTMLElemen
29
26
  export declare function createFormatter(column: Column, pool: ElementPool): Tabulator.Formatter;
30
27
  /**
31
28
  * Format the value of a cell in the table
32
- *
33
29
  * @param {Tabulator.CellComponent} cell the cell being rendered in the table
34
30
  * @param {Column} column configuration for the current column
35
31
  * @returns {string} the formatted value
@@ -37,7 +33,6 @@ export declare function createFormatter(column: Column, pool: ElementPool): Tabu
37
33
  export declare function formatCell(cell: Tabulator.CellComponent, column: Column): string;
38
34
  /**
39
35
  * Create a custom component that renders a cell value
40
- *
41
36
  * @param {Tabulator.CellComponent} cell Tabulator cell
42
37
  * @param {Column} column lime-elements column configuration
43
38
  * @param {string} value the value of the cell being rendered
@@ -47,7 +42,6 @@ export declare function formatCell(cell: Tabulator.CellComponent, column: Column
47
42
  export declare function createCustomComponent(cell: Tabulator.CellComponent, column: Column, value: string, pool: ElementPool): HTMLElement;
48
43
  /**
49
44
  * Set all properties for a custom element, including event listeners
50
- *
51
45
  * @param {HTMLElement} element the custom element
52
46
  * @param {object} props object of properties and event listeners
53
47
  */
@@ -57,7 +51,6 @@ interface TabulatorSorter extends Tabulator.Sorter {
57
51
  }
58
52
  /**
59
53
  * Create a column sorter from a tabulator sorter
60
- *
61
54
  * @param {Column[]} columns all available columns in the table
62
55
  * @returns {Function} function that creates a sorter from a tabulator sorter
63
56
  */
@@ -5,7 +5,6 @@ export declare class ElementPool {
5
5
  constructor(document: Document);
6
6
  /**
7
7
  * Get an element from the pool
8
- *
9
8
  * @param {string} name tag name of the element
10
9
  * @returns {HTMLElement} the element
11
10
  */
@@ -13,7 +12,6 @@ export declare class ElementPool {
13
12
  private isFree;
14
13
  /**
15
14
  * Release an element from the pool so that it can be reused
16
- *
17
15
  * @param {HTMLElement} element the element to release from the pool
18
16
  */
19
17
  release(element: HTMLElement): void;
@@ -30,7 +30,6 @@ export declare class Selection {
30
30
  * The provided function `getDataByIndex` is used to provide data for the
31
31
  * selected items when selection is toggled by using the item index,
32
32
  * which can be the row position in a table.
33
- *
34
33
  * @param {Function} getDataByIndex A function that returns the data at the given index
35
34
  */
36
35
  constructor(getDataByIndex: (number: any) => any);
@@ -48,14 +47,12 @@ export declare class Selection {
48
47
  set items(items: any[]);
49
48
  /**
50
49
  * Checks whether the given item exist in the selection
51
- *
52
50
  * @param {any} data The data to look up
53
51
  * @returns {boolean} `true` if the given data exist in the selection, otherwise `false`
54
52
  */
55
53
  has(data: any): boolean;
56
54
  /**
57
55
  * Toggles the item at the given index in the selection
58
- *
59
56
  * @param {number} index The index of the item to toggle
60
57
  * @returns {SelectionChangeSet} The changes made to the selection
61
58
  */
@@ -66,7 +63,6 @@ export declare class Selection {
66
63
  * their current state in the selection.
67
64
  * Initially, when no last toggled index exist, this function behaves like
68
65
  * `toggleSelection`.
69
- *
70
66
  * @param {number} index The index of the item to toggle
71
67
  * @returns {SelectionChangeSet} The changes made to the selection
72
68
  */