@limetech/lime-elements 37.8.2 → 37.10.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 (140) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/cjs/{_arrayIncludesWith-29083f83.js → _arrayIncludesWith-8705cfc6.js} +4 -4
  3. package/dist/cjs/{_arrayIncludesWith-29083f83.js.map → _arrayIncludesWith-8705cfc6.js.map} +1 -1
  4. package/dist/cjs/_baseForOwn-fc9c8906.js +56 -0
  5. package/dist/cjs/_baseForOwn-fc9c8906.js.map +1 -0
  6. package/dist/cjs/{isEqual-d2a13a24.js → _baseIsEqual-2b4442b5.js} +1 -34
  7. package/dist/cjs/_baseIsEqual-2b4442b5.js.map +1 -0
  8. package/dist/cjs/{pickBy-3ef47bf2.js → _baseIteratee-5f8a72f6.js} +16 -313
  9. package/dist/cjs/_baseIteratee-5f8a72f6.js.map +1 -0
  10. package/dist/cjs/file-metadata-f259bba5.js +396 -0
  11. package/dist/cjs/file-metadata-f259bba5.js.map +1 -0
  12. package/dist/cjs/isEqual-a3bb68c4.js +39 -0
  13. package/dist/cjs/isEqual-a3bb68c4.js.map +1 -0
  14. package/dist/cjs/lime-elements.cjs.js +1 -1
  15. package/dist/cjs/limel-chip_2.cjs.entry.js +2 -1
  16. package/dist/cjs/limel-chip_2.cjs.entry.js.map +1 -1
  17. package/dist/cjs/limel-dialog.cjs.entry.js +2 -1
  18. package/dist/cjs/limel-dialog.cjs.entry.js.map +1 -1
  19. package/dist/cjs/limel-file-dropzone.cjs.entry.js +255 -0
  20. package/dist/cjs/limel-file-dropzone.cjs.entry.js.map +1 -0
  21. package/dist/cjs/limel-file.cjs.entry.js +6 -391
  22. package/dist/cjs/limel-file.cjs.entry.js.map +1 -1
  23. package/dist/cjs/limel-form.cjs.entry.js +27 -73
  24. package/dist/cjs/limel-form.cjs.entry.js.map +1 -1
  25. package/dist/cjs/limel-picker.cjs.entry.js +6 -3
  26. package/dist/cjs/limel-picker.cjs.entry.js.map +1 -1
  27. package/dist/cjs/limel-tab-bar.cjs.entry.js +6 -5
  28. package/dist/cjs/limel-tab-bar.cjs.entry.js.map +1 -1
  29. package/dist/cjs/limel-table.cjs.entry.js +8 -6
  30. package/dist/cjs/limel-table.cjs.entry.js.map +1 -1
  31. package/dist/cjs/loader.cjs.js +1 -1
  32. package/dist/cjs/pickBy-1e9455c7.js +311 -0
  33. package/dist/cjs/pickBy-1e9455c7.js.map +1 -0
  34. package/dist/collection/collection-manifest.json +1 -0
  35. package/dist/collection/components/file/file.js +3 -3
  36. package/dist/collection/components/file/file.js.map +1 -1
  37. package/dist/collection/components/file-dropzone/file-dropzone.css +59 -0
  38. package/dist/collection/components/file-dropzone/file-dropzone.js +217 -0
  39. package/dist/collection/components/file-dropzone/file-dropzone.js.map +1 -0
  40. package/dist/collection/components/picker/picker.js +25 -10
  41. package/dist/collection/components/picker/picker.js.map +1 -1
  42. package/dist/collection/components/picker/searcher.types.js.map +1 -1
  43. package/dist/collection/components/picker/value.types.js +2 -0
  44. package/dist/collection/components/picker/value.types.js.map +1 -0
  45. package/dist/collection/global/shared-types/file.types.js.map +1 -0
  46. package/dist/collection/interface.js +1 -1
  47. package/dist/collection/interface.js.map +1 -1
  48. package/dist/collection/{components/file → util}/file-metadata.js +4 -4
  49. package/dist/collection/util/file-metadata.js.map +1 -0
  50. package/dist/collection/util/files.js +37 -0
  51. package/dist/collection/util/files.js.map +1 -0
  52. package/dist/esm/{_arrayIncludesWith-969bccda.js → _arrayIncludesWith-8b8a8b46.js} +2 -2
  53. package/dist/esm/{_arrayIncludesWith-969bccda.js.map → _arrayIncludesWith-8b8a8b46.js.map} +1 -1
  54. package/dist/esm/_baseForOwn-3dd6837f.js +54 -0
  55. package/dist/esm/_baseForOwn-3dd6837f.js.map +1 -0
  56. package/dist/esm/{isEqual-c5a636a4.js → _baseIsEqual-633b7929.js} +2 -34
  57. package/dist/esm/_baseIsEqual-633b7929.js.map +1 -0
  58. package/dist/esm/{pickBy-d359eb12.js → _baseIteratee-2b2723f9.js} +7 -304
  59. package/dist/esm/_baseIteratee-2b2723f9.js.map +1 -0
  60. package/dist/esm/file-metadata-9a4780e2.js +391 -0
  61. package/dist/esm/file-metadata-9a4780e2.js.map +1 -0
  62. package/dist/esm/isEqual-d8fb9edc.js +37 -0
  63. package/dist/esm/isEqual-d8fb9edc.js.map +1 -0
  64. package/dist/esm/lime-elements.js +1 -1
  65. package/dist/esm/limel-chip_2.entry.js +2 -1
  66. package/dist/esm/limel-chip_2.entry.js.map +1 -1
  67. package/dist/esm/limel-dialog.entry.js +2 -1
  68. package/dist/esm/limel-dialog.entry.js.map +1 -1
  69. package/dist/esm/limel-file-dropzone.entry.js +251 -0
  70. package/dist/esm/limel-file-dropzone.entry.js.map +1 -0
  71. package/dist/esm/limel-file.entry.js +2 -387
  72. package/dist/esm/limel-file.entry.js.map +1 -1
  73. package/dist/esm/limel-form.entry.js +6 -52
  74. package/dist/esm/limel-form.entry.js.map +1 -1
  75. package/dist/esm/limel-picker.entry.js +6 -3
  76. package/dist/esm/limel-picker.entry.js.map +1 -1
  77. package/dist/esm/limel-tab-bar.entry.js +3 -2
  78. package/dist/esm/limel-tab-bar.entry.js.map +1 -1
  79. package/dist/esm/limel-table.entry.js +8 -6
  80. package/dist/esm/limel-table.entry.js.map +1 -1
  81. package/dist/esm/loader.js +1 -1
  82. package/dist/esm/pickBy-240917e2.js +306 -0
  83. package/dist/esm/pickBy-240917e2.js.map +1 -0
  84. package/dist/lime-elements/lime-elements.esm.js +1 -1
  85. package/dist/lime-elements/lime-elements.esm.js.map +1 -1
  86. package/dist/lime-elements/p-0c24c682.entry.js +2 -0
  87. package/dist/lime-elements/p-0c24c682.entry.js.map +1 -0
  88. package/dist/lime-elements/p-2e9fe8fd.js +2 -0
  89. package/dist/lime-elements/p-2e9fe8fd.js.map +1 -0
  90. package/dist/lime-elements/p-4cd3360b.entry.js +2 -0
  91. package/dist/lime-elements/p-4cd3360b.entry.js.map +1 -0
  92. package/dist/lime-elements/p-51ec4f02.js +2 -0
  93. package/dist/lime-elements/p-51ec4f02.js.map +1 -0
  94. package/dist/lime-elements/p-5def744e.js +2 -0
  95. package/dist/lime-elements/p-5def744e.js.map +1 -0
  96. package/dist/lime-elements/{p-b51fd0c7.entry.js → p-862f048d.entry.js} +15 -15
  97. package/dist/lime-elements/{p-b51fd0c7.entry.js.map → p-862f048d.entry.js.map} +1 -1
  98. package/dist/lime-elements/p-8bc1584b.js +2 -0
  99. package/dist/lime-elements/p-8bc1584b.js.map +1 -0
  100. package/dist/lime-elements/p-8d13a44f.entry.js.map +1 -1
  101. package/dist/lime-elements/{p-a88039bf.entry.js → p-a20848fc.entry.js} +5 -5
  102. package/dist/lime-elements/p-a20848fc.entry.js.map +1 -0
  103. package/dist/lime-elements/p-aaf6dada.entry.js +2 -0
  104. package/dist/lime-elements/{p-1c67a941.entry.js.map → p-aaf6dada.entry.js.map} +1 -1
  105. package/dist/lime-elements/{p-82077942.entry.js → p-b2439774.entry.js} +2 -2
  106. package/dist/lime-elements/p-c5db5254.entry.js +2 -0
  107. package/dist/lime-elements/{p-fb54539a.entry.js.map → p-c5db5254.entry.js.map} +1 -1
  108. package/dist/lime-elements/{p-ade76f1d.js → p-cb91d37d.js} +2 -2
  109. package/dist/lime-elements/p-cb91d37d.js.map +1 -0
  110. package/dist/lime-elements/p-ce1c1f74.js +2 -0
  111. package/dist/lime-elements/p-ce1c1f74.js.map +1 -0
  112. package/dist/lime-elements/{p-fa607ed3.js → p-f4d83226.js} +2 -2
  113. package/dist/types/components/file/file.d.ts +1 -1
  114. package/dist/types/components/file-dropzone/file-dropzone.d.ts +71 -0
  115. package/dist/types/components/picker/picker.d.ts +2 -7
  116. package/dist/types/components/picker/searcher.types.d.ts +2 -1
  117. package/dist/types/components/picker/value.types.d.ts +9 -0
  118. package/dist/types/components.d.ts +120 -20
  119. package/dist/types/interface.d.ts +1 -1
  120. package/dist/types/{components/file → util}/file-metadata.d.ts +1 -1
  121. package/dist/types/util/files.d.ts +4 -0
  122. package/package.json +1 -1
  123. package/dist/cjs/isEqual-d2a13a24.js.map +0 -1
  124. package/dist/cjs/pickBy-3ef47bf2.js.map +0 -1
  125. package/dist/collection/components/file/file-metadata.js.map +0 -1
  126. package/dist/collection/components/file/file.types.js.map +0 -1
  127. package/dist/esm/isEqual-c5a636a4.js.map +0 -1
  128. package/dist/esm/pickBy-d359eb12.js.map +0 -1
  129. package/dist/lime-elements/p-1c67a941.entry.js +0 -2
  130. package/dist/lime-elements/p-a88039bf.entry.js.map +0 -1
  131. package/dist/lime-elements/p-ad8cb388.js +0 -2
  132. package/dist/lime-elements/p-ad8cb388.js.map +0 -1
  133. package/dist/lime-elements/p-ade76f1d.js.map +0 -1
  134. package/dist/lime-elements/p-b106a23e.entry.js +0 -2
  135. package/dist/lime-elements/p-b106a23e.entry.js.map +0 -1
  136. package/dist/lime-elements/p-fb54539a.entry.js +0 -2
  137. /package/dist/collection/{components/file → global/shared-types}/file.types.js +0 -0
  138. /package/dist/lime-elements/{p-82077942.entry.js.map → p-b2439774.entry.js.map} +0 -0
  139. /package/dist/lime-elements/{p-fa607ed3.js.map → p-f4d83226.js.map} +0 -0
  140. /package/dist/types/{components/file → global/shared-types}/file.types.d.ts +0 -0
@@ -0,0 +1,217 @@
1
+ import { h, Host, } from '@stencil/core';
2
+ import { createFileInfo, isTypeAccepted } from '../../util/files';
3
+ import { partition } from 'lodash-es';
4
+ /**
5
+ * This component enables you to seamlessly convert any region of the user interface into
6
+ * a file dropzone area, just by wrapping it inside the `limel-file-dropzone`.
7
+ *
8
+ * The file dropzone can then be used to allow end-users to upload files
9
+ * by dragging and dropping them into the specified area, for example to trigger an upload process.
10
+ *
11
+ * After receiving the files, the component emits a `filesSelected` event. For unsupported
12
+ * files (specified with the `accept` prop) a `filesRejected` event will be emitted.
13
+ *
14
+ * The event detail would be an array of `FileInfo` objects,
15
+ * each representing a file dropped into the dropzone.
16
+ *
17
+ * @exampleComponent limel-example-file-dropzone
18
+ * @exampleComponent limel-example-file-dropzone-type-filtering
19
+ * @private
20
+ */
21
+ export class FileDropzone {
22
+ constructor() {
23
+ this.renderOnDragLayout = () => {
24
+ if (!this.hasFileToDrop) {
25
+ return;
26
+ }
27
+ return (h("div", { class: "has-file-to-drop" }, h("limel-icon", { class: "icon", name: "upload_2" }), h("div", { class: "text-helpertext" }, this.renderText(), this.renderHelperText())));
28
+ };
29
+ this.renderText = () => {
30
+ if (!this.text) {
31
+ return;
32
+ }
33
+ return h("span", { class: "text" }, this.text);
34
+ };
35
+ this.renderHelperText = () => {
36
+ if (!this.helperText) {
37
+ return;
38
+ }
39
+ return h("span", { class: "helper-text" }, this.helperText);
40
+ };
41
+ this.handleDrop = (event) => {
42
+ event.stopPropagation();
43
+ event.preventDefault();
44
+ this.hasFileToDrop = false;
45
+ if (this.disabled) {
46
+ return;
47
+ }
48
+ const files = Array.from(event.dataTransfer.files);
49
+ const fileInfos = files.map(createFileInfo);
50
+ const [acceptedFileInfos, rejectedFileInfos] = partition(fileInfos, (file) => isTypeAccepted(file, this.accept));
51
+ if (acceptedFileInfos.length > 0) {
52
+ this.filesSelected.emit(acceptedFileInfos);
53
+ }
54
+ if (rejectedFileInfos.length > 0) {
55
+ this.filesRejected.emit(rejectedFileInfos);
56
+ }
57
+ };
58
+ this.handleDragOver = (event) => {
59
+ this.hasFileToDrop = true;
60
+ event.preventDefault();
61
+ };
62
+ this.handleDragLeave = (event) => {
63
+ this.hasFileToDrop = false;
64
+ event.preventDefault();
65
+ };
66
+ this.accept = '*';
67
+ this.disabled = false;
68
+ this.text = undefined;
69
+ this.helperText = '';
70
+ this.hasFileToDrop = false;
71
+ }
72
+ render() {
73
+ return (h(Host, { onDrop: this.handleDrop, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave }, h("slot", null), this.renderOnDragLayout()));
74
+ }
75
+ static get is() { return "limel-file-dropzone"; }
76
+ static get encapsulation() { return "shadow"; }
77
+ static get originalStyleUrls() {
78
+ return {
79
+ "$": ["file-dropzone.scss"]
80
+ };
81
+ }
82
+ static get styleUrls() {
83
+ return {
84
+ "$": ["file-dropzone.css"]
85
+ };
86
+ }
87
+ static get properties() {
88
+ return {
89
+ "accept": {
90
+ "type": "string",
91
+ "mutable": false,
92
+ "complexType": {
93
+ "original": "string",
94
+ "resolved": "string",
95
+ "references": {}
96
+ },
97
+ "required": false,
98
+ "optional": false,
99
+ "docs": {
100
+ "tags": [{
101
+ "name": "see",
102
+ "text": "[HTML attribute: accept](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept) for more\ndetails."
103
+ }],
104
+ "text": "Specifies the types of files that the dropzone will accept. By default, all file types are accepted.\n\nFor media files, formats can be specified using: `audio/*`, `video/*`, `image/*`.\nUnique file type specifiers can also be used, for example: `.jpg`, `.pdf`.\nA comma-separated list of file extensions or MIME types is also acceptable, e.g., `image/png, image/jpeg` or\n`.png, .jpg, .jpeg`."
105
+ },
106
+ "attribute": "accept",
107
+ "reflect": true,
108
+ "defaultValue": "'*'"
109
+ },
110
+ "disabled": {
111
+ "type": "boolean",
112
+ "mutable": false,
113
+ "complexType": {
114
+ "original": "boolean",
115
+ "resolved": "boolean",
116
+ "references": {}
117
+ },
118
+ "required": false,
119
+ "optional": false,
120
+ "docs": {
121
+ "tags": [],
122
+ "text": "Set to `true` to disable the file dropzone."
123
+ },
124
+ "attribute": "disabled",
125
+ "reflect": false,
126
+ "defaultValue": "false"
127
+ },
128
+ "text": {
129
+ "type": "string",
130
+ "mutable": false,
131
+ "complexType": {
132
+ "original": "string",
133
+ "resolved": "string",
134
+ "references": {}
135
+ },
136
+ "required": false,
137
+ "optional": false,
138
+ "docs": {
139
+ "tags": [],
140
+ "text": "Is displayed when the user is dragging a file over the dropzone.\nA suitable text could for instance be \"Drop your files here\"."
141
+ },
142
+ "attribute": "text",
143
+ "reflect": false
144
+ },
145
+ "helperText": {
146
+ "type": "string",
147
+ "mutable": false,
148
+ "complexType": {
149
+ "original": "string",
150
+ "resolved": "string",
151
+ "references": {}
152
+ },
153
+ "required": false,
154
+ "optional": true,
155
+ "docs": {
156
+ "tags": [],
157
+ "text": "Is displayed to provide supplementary information to the end users,\nfor instance, which filetypes or file sizes are accepted."
158
+ },
159
+ "attribute": "helper-text",
160
+ "reflect": false,
161
+ "defaultValue": "''"
162
+ }
163
+ };
164
+ }
165
+ static get states() {
166
+ return {
167
+ "hasFileToDrop": {}
168
+ };
169
+ }
170
+ static get events() {
171
+ return [{
172
+ "method": "filesSelected",
173
+ "name": "filesSelected",
174
+ "bubbles": true,
175
+ "cancelable": true,
176
+ "composed": true,
177
+ "docs": {
178
+ "tags": [],
179
+ "text": "Emitted when files are selected"
180
+ },
181
+ "complexType": {
182
+ "original": "FileInfo[]",
183
+ "resolved": "FileInfo[]",
184
+ "references": {
185
+ "FileInfo": {
186
+ "location": "import",
187
+ "path": "../../global/shared-types/file.types"
188
+ }
189
+ }
190
+ }
191
+ }, {
192
+ "method": "filesRejected",
193
+ "name": "filesRejected",
194
+ "bubbles": true,
195
+ "cancelable": true,
196
+ "composed": true,
197
+ "docs": {
198
+ "tags": [{
199
+ "name": "see",
200
+ "text": " `accept` for details on how to specify acceptable file types."
201
+ }],
202
+ "text": "Emitted when files are selected but do not conform with the `accept` property specifications.\nThis can happen when the file types or formats of the selected files are not among the ones allowed by the dropzone,\nas defined by the `accept` property."
203
+ },
204
+ "complexType": {
205
+ "original": "FileInfo[]",
206
+ "resolved": "FileInfo[]",
207
+ "references": {
208
+ "FileInfo": {
209
+ "location": "import",
210
+ "path": "../../global/shared-types/file.types"
211
+ }
212
+ }
213
+ }
214
+ }];
215
+ }
216
+ }
217
+ //# sourceMappingURL=file-dropzone.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"file-dropzone.js","sourceRoot":"","sources":["../../../src/components/file-dropzone/file-dropzone.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Event,\n EventEmitter,\n Host,\n Prop,\n State,\n} from '@stencil/core';\nimport { FileInfo } from '../../global/shared-types/file.types';\nimport { createFileInfo, isTypeAccepted } from '../../util/files';\nimport { partition } from 'lodash-es';\n\n/**\n * This component enables you to seamlessly convert any region of the user interface into\n * a file dropzone area, just by wrapping it inside the `limel-file-dropzone`.\n *\n * The file dropzone can then be used to allow end-users to upload files\n * by dragging and dropping them into the specified area, for example to trigger an upload process.\n *\n * After receiving the files, the component emits a `filesSelected` event. For unsupported\n * files (specified with the `accept` prop) a `filesRejected` event will be emitted.\n *\n * The event detail would be an array of `FileInfo` objects,\n * each representing a file dropped into the dropzone.\n *\n * @exampleComponent limel-example-file-dropzone\n * @exampleComponent limel-example-file-dropzone-type-filtering\n * @private\n */\n@Component({\n tag: 'limel-file-dropzone',\n shadow: true,\n styleUrl: 'file-dropzone.scss',\n})\nexport class FileDropzone {\n /**\n * Specifies the types of files that the dropzone will accept. By default, all file types are accepted.\n *\n * For media files, formats can be specified using: `audio/*`, `video/*`, `image/*`.\n * Unique file type specifiers can also be used, for example: `.jpg`, `.pdf`.\n * A comma-separated list of file extensions or MIME types is also acceptable, e.g., `image/png, image/jpeg` or\n * `.png, .jpg, .jpeg`.\n *\n * @see [HTML attribute: accept](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept) for more\n * details.\n */\n @Prop({ reflect: true })\n public accept: string = '*';\n\n /**\n * Set to `true` to disable the file dropzone.\n */\n @Prop()\n public disabled: boolean = false;\n\n /**\n * Is displayed when the user is dragging a file over the dropzone.\n * A suitable text could for instance be \"Drop your files here\".\n */\n @Prop()\n public text: string;\n\n /**\n * Is displayed to provide supplementary information to the end users,\n * for instance, which filetypes or file sizes are accepted.\n */\n @Prop()\n public helperText?: string = '';\n\n /**\n * Sets to true when there is a file to drop\n */\n @State()\n private hasFileToDrop: boolean = false;\n\n /**\n * Emitted when files are selected\n */\n @Event()\n filesSelected: EventEmitter<FileInfo[]>;\n\n /**\n * Emitted when files are selected but do not conform with the `accept` property specifications.\n * This can happen when the file types or formats of the selected files are not among the ones allowed by the dropzone,\n * as defined by the `accept` property.\n *\n * @see `accept` for details on how to specify acceptable file types.\n */\n @Event()\n filesRejected: EventEmitter<FileInfo[]>;\n\n public render() {\n return (\n <Host\n onDrop={this.handleDrop}\n onDragOver={this.handleDragOver}\n onDragLeave={this.handleDragLeave}\n >\n <slot />\n {this.renderOnDragLayout()}\n </Host>\n );\n }\n\n private renderOnDragLayout = () => {\n if (!this.hasFileToDrop) {\n return;\n }\n\n return (\n <div class=\"has-file-to-drop\">\n <limel-icon class=\"icon\" name=\"upload_2\" />\n <div class=\"text-helpertext\">\n {this.renderText()}\n {this.renderHelperText()}\n </div>\n </div>\n );\n };\n\n private renderText = () => {\n if (!this.text) {\n return;\n }\n\n return <span class=\"text\">{this.text}</span>;\n };\n\n private renderHelperText = () => {\n if (!this.helperText) {\n return;\n }\n\n return <span class=\"helper-text\">{this.helperText}</span>;\n };\n\n private handleDrop = (event: DragEvent) => {\n event.stopPropagation();\n event.preventDefault();\n this.hasFileToDrop = false;\n\n if (this.disabled) {\n return;\n }\n\n const files: File[] = Array.from(event.dataTransfer.files);\n const fileInfos: FileInfo[] = files.map(createFileInfo);\n\n const [acceptedFileInfos, rejectedFileInfos] = partition(\n fileInfos,\n (file) => isTypeAccepted(file, this.accept),\n );\n\n if (acceptedFileInfos.length > 0) {\n this.filesSelected.emit(acceptedFileInfos);\n }\n\n if (rejectedFileInfos.length > 0) {\n this.filesRejected.emit(rejectedFileInfos);\n }\n };\n\n private handleDragOver = (event: DragEvent) => {\n this.hasFileToDrop = true;\n event.preventDefault();\n };\n\n private handleDragLeave = (event: DragEvent) => {\n this.hasFileToDrop = false;\n event.preventDefault();\n };\n}\n"]}
@@ -260,7 +260,7 @@ export class Picker {
260
260
  this.loading = true;
261
261
  // If the search-query is an empty string, bypass debouncing.
262
262
  const searchFn = query === '' ? this.searcher : this.debouncedSearch;
263
- const result = await searchFn(query);
263
+ const result = (await searchFn(query));
264
264
  this.handleSearchResult(query, result);
265
265
  }
266
266
  /**
@@ -274,7 +274,10 @@ export class Picker {
274
274
  if (!this.value || this.value !== event.detail) {
275
275
  let newValue = event.detail;
276
276
  if (this.multiple) {
277
- newValue = [...this.value, event.detail];
277
+ newValue = [
278
+ ...this.value,
279
+ event.detail,
280
+ ];
278
281
  }
279
282
  this.change.emit(newValue);
280
283
  this.items = [];
@@ -303,7 +306,7 @@ export class Picker {
303
306
  async handleInputFieldFocus() {
304
307
  this.loading = true;
305
308
  const query = this.textValue;
306
- const result = await this.searcher(query);
309
+ const result = (await this.searcher(query));
307
310
  this.handleSearchResult(query, result);
308
311
  }
309
312
  handleChange(event) {
@@ -566,13 +569,17 @@ export class Picker {
566
569
  "type": "unknown",
567
570
  "mutable": false,
568
571
  "complexType": {
569
- "original": "| ListItem<\n number | string | { id: string | number; [key: string]: any }\n >\n | Array<\n ListItem<\n number | string | { id: string | number; [key: string]: any }\n >\n >",
570
- "resolved": "ListItem<string | number | { [key: string]: any; id: string | number; }> | ListItem<string | number | { [key: string]: any; id: string | number; }>[]",
572
+ "original": "ListItem<PickerValue> | Array<ListItem<PickerValue>>",
573
+ "resolved": "ListItem<PickerValue> | ListItem<PickerValue>[]",
571
574
  "references": {
572
575
  "ListItem": {
573
576
  "location": "import",
574
577
  "path": "../list/list-item.types"
575
578
  },
579
+ "PickerValue": {
580
+ "location": "import",
581
+ "path": "./value.types"
582
+ },
576
583
  "Array": {
577
584
  "location": "global"
578
585
  }
@@ -590,7 +597,7 @@ export class Picker {
590
597
  "mutable": false,
591
598
  "complexType": {
592
599
  "original": "Searcher",
593
- "resolved": "(query: string) => Promise<ListItem<any>[]>",
600
+ "resolved": "(query: string) => Promise<ListSeparator | ListItem<any>[]>",
594
601
  "references": {
595
602
  "Searcher": {
596
603
  "location": "import",
@@ -755,13 +762,17 @@ export class Picker {
755
762
  "text": "Fired when a new value has been selected from the picker"
756
763
  },
757
764
  "complexType": {
758
- "original": "ListItem<number | string> | Array<ListItem<number | string>>",
759
- "resolved": "ListItem<string | number> | ListItem<string | number>[]",
765
+ "original": "ListItem<PickerValue> | Array<ListItem<PickerValue>>",
766
+ "resolved": "ListItem<PickerValue> | ListItem<PickerValue>[]",
760
767
  "references": {
761
768
  "ListItem": {
762
769
  "location": "import",
763
770
  "path": "../list/list-item.types"
764
771
  },
772
+ "PickerValue": {
773
+ "location": "import",
774
+ "path": "./value.types"
775
+ },
765
776
  "Array": {
766
777
  "location": "global"
767
778
  }
@@ -778,12 +789,16 @@ export class Picker {
778
789
  "text": "Fired when clicking on a selected value"
779
790
  },
780
791
  "complexType": {
781
- "original": "ListItem<number | string>",
782
- "resolved": "ListItem<string | number>",
792
+ "original": "ListItem<PickerValue>",
793
+ "resolved": "ListItem<PickerValue>",
783
794
  "references": {
784
795
  "ListItem": {
785
796
  "location": "import",
786
797
  "path": "../list/list-item.types"
798
+ },
799
+ "PickerValue": {
800
+ "location": "import",
801
+ "path": "./value.types"
787
802
  }
788
803
  }
789
804
  }
@@ -1 +1 @@
1
- {"version":3,"file":"picker.js","sourceRoot":"","sources":["../../../src/components/picker/picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Action } from '../collapsible-section/action';\nimport { ActionPosition, ActionScrollBehavior } from '../picker/actions.types';\nimport { Chip } from '../chip-set/chip.types';\nimport { ListItem } from '../list/list-item.types';\nimport { Searcher } from '../picker/searcher.types';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport AwesomeDebouncePromise from 'awesome-debounce-promise';\nimport { isDescendant } from '../../util/dom';\nimport {\n ARROW_DOWN,\n ARROW_DOWN_KEY_CODE,\n ARROW_UP,\n ARROW_UP_KEY_CODE,\n ENTER,\n ENTER_KEY_CODE,\n ESCAPE,\n ESCAPE_KEY_CODE,\n TAB,\n TAB_KEY_CODE,\n} from '../../util/keycodes';\nimport { createRandomString } from '../../util/random-string';\nimport {\n LimelChipSetCustomEvent,\n LimelListCustomEvent,\n} from '../../components';\nimport { getIconFillColor, getIconName } from '../icon/get-icon-props';\n\nconst SEARCH_DEBOUNCE = 500;\nconst CHIP_SET_TAG_NAME = 'limel-chip-set';\n\n/**\n * @exampleComponent limel-example-picker-single\n * @exampleComponent limel-example-picker-multiple\n * @exampleComponent limel-example-picker-icons\n * @exampleComponent limel-example-picker-value-as-object\n * @exampleComponent limel-example-picker-empty-suggestions\n * @exampleComponent limel-example-picker-leading-icon\n * @exampleComponent limel-example-picker-static-actions\n * @exampleComponent limel-example-picker-composite\n */\n@Component({\n tag: 'limel-picker',\n shadow: true,\n styleUrl: 'picker.scss',\n})\nexport class Picker {\n /**\n * True if the picker should be disabled\n */\n @Prop()\n public disabled: boolean = false;\n\n /**\n * Set to `true` to disable adding and removing items,\n * but allow interaction with existing items.\n */\n @Prop({ reflect: true })\n public readonly: boolean = false;\n\n /**\n * Text to display for the input field of the picker\n */\n @Prop()\n public label: string;\n\n /**\n * Search label to display in the input field when searching\n */\n @Prop()\n public searchLabel: string;\n\n /**\n * Optional helper text to display below the input field when it has focus\n */\n @Prop({ reflect: true })\n public helperText: string;\n\n /**\n * Leading icon to show to the far left in the text field\n */\n @Prop()\n public leadingIcon: string;\n\n /**\n * A message to display when the search returned an empty result\n */\n @Prop()\n public emptyResultMessage: string;\n\n /**\n * True if the control requires a value\n */\n @Prop()\n public required: boolean = false;\n\n /**\n * Set to `true` to indicate that the current value of the input field is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid = false;\n\n /**\n * Currently selected value or values. Where the value can be an object.\n */\n @Prop()\n public value:\n | ListItem<\n number | string | { id: string | number; [key: string]: any }\n >\n | Array<\n ListItem<\n number | string | { id: string | number; [key: string]: any }\n >\n >;\n\n /**\n * A search function that takes a search-string as an argument,\n * and returns a promise that will eventually be resolved with\n * an array of `ListItem`:s.\n *\n * See the docs for the type `Searcher` for type information on\n * the searcher function itself.\n */\n @Prop()\n public searcher: Searcher;\n\n /**\n * True if multiple values are allowed\n */\n @Prop()\n public multiple: boolean = false;\n\n /**\n * Sets delimiters between chips. Works only when `multiple` is `true`.\n */\n @Prop({ reflect: true })\n public delimiter: string = null;\n\n /**\n * Static actions that can be clicked by the user.\n */\n @Prop()\n public actions: Array<ListItem<Action>> = [];\n\n /**\n * Position of the custom static actions in the picker's results dropdown.\n * Can be set to `'top'` or `'bottom'`.\n */\n @Prop()\n public actionPosition: ActionPosition = 'bottom';\n\n /**\n * Scroll behavior of the custom static actions, when user scrolls\n * in the picker's results dropdown. Can be set to `'scroll'` which means\n * the action items will scroll together with the list, or `'sticky'` which\n * retains their position at the top or bottom of the drop down while\n * scrolling.\n */\n @Prop()\n public actionScrollBehavior: ActionScrollBehavior = 'sticky';\n\n /**\n * Whether badge icons should be used in the result list or not\n */\n @Prop({ reflect: true })\n public badgeIcons: boolean = false;\n\n /**\n * Fired when a new value has been selected from the picker\n */\n @Event()\n private change: EventEmitter<\n ListItem<number | string> | Array<ListItem<number | string>>\n >;\n\n /**\n * Fired when clicking on a selected value\n */\n @Event()\n private interact: EventEmitter<ListItem<number | string>>;\n\n /**\n * Emitted when the user selects an action.\n */\n @Event()\n private action: EventEmitter<Action>;\n\n @State()\n private items: Array<ListItem<number | string>>;\n\n @State()\n private textValue: string = '';\n\n @State()\n private loading: boolean = false;\n\n @State()\n private chips: Chip[] = [];\n\n @Element()\n private host: HTMLLimelPickerElement;\n\n // Should NOT be decorated with State(), since this\n // should not trigger a re-render by itself.\n private chipSetEditMode = false;\n\n private debouncedSearch: Searcher;\n private chipSet: HTMLLimelChipSetElement;\n private portalId: string;\n\n constructor() {\n this.handleTextInput = this.handleTextInput.bind(this);\n this.handleInputKeyDown = this.handleInputKeyDown.bind(this);\n this.handleDropdownKeyDown = this.handleDropdownKeyDown.bind(this);\n this.handleInputFieldFocus = this.handleInputFieldFocus.bind(this);\n this.handleChange = this.handleChange.bind(this);\n this.handleInteract = this.handleInteract.bind(this);\n this.handleListChange = this.handleListChange.bind(this);\n this.handleActionListChange = this.handleActionListChange.bind(this);\n this.handleStopEditAndBlur = this.handleStopEditAndBlur.bind(this);\n this.createDebouncedSearcher = this.createDebouncedSearcher.bind(this);\n this.handleCloseMenu = this.handleCloseMenu.bind(this);\n this.onListKeyDown = this.onListKeyDown.bind(this);\n\n this.portalId = createRandomString();\n }\n\n public componentWillLoad() {\n this.chips = this.createChips(this.value);\n }\n\n public componentDidLoad() {\n this.createDebouncedSearcher(this.searcher);\n this.chipSet = this.host.shadowRoot.querySelector(CHIP_SET_TAG_NAME);\n }\n\n public async componentWillUpdate() {\n this.chipSetEditMode = false;\n if (this.chipSet) {\n this.chipSetEditMode = await this.chipSet.getEditMode();\n }\n }\n\n public render() {\n const props: {\n maxItems?: number;\n } = {};\n\n if (!this.multiple) {\n props.maxItems = 1;\n }\n\n return [\n <limel-chip-set\n type=\"input\"\n inputType=\"search\"\n label={this.label}\n helperText={this.helperText}\n leadingIcon={this.leadingIcon}\n value={this.chips}\n disabled={this.disabled}\n invalid={this.invalid}\n delimiter={this.renderDelimiter()}\n readonly={this.readonly}\n required={this.required}\n searchLabel={this.searchLabel}\n onInput={this.handleTextInput}\n onKeyDown={this.handleInputKeyDown}\n onChange={this.handleChange}\n onInteract={this.handleInteract}\n onStartEdit={this.handleInputFieldFocus}\n onStopEdit={this.handleStopEditAndBlur}\n emptyInputOnBlur={false}\n clearAllButton={this.multiple && !this.chipSetEditMode}\n {...props}\n />,\n this.renderDropdown(),\n ];\n }\n\n @Watch('value')\n protected onChangeValue() {\n this.chips = this.createChips(this.value);\n }\n\n @Watch('searcher')\n protected createDebouncedSearcher(newValue: Searcher) {\n if (typeof newValue !== 'function') {\n return;\n }\n\n this.debouncedSearch = AwesomeDebouncePromise(\n newValue,\n SEARCH_DEBOUNCE,\n );\n }\n\n private renderDelimiter() {\n if (this.multiple) {\n return this.delimiter;\n }\n\n return null;\n }\n\n private getValueId = (item: ListItem) => {\n const value = item.value;\n if (!!value && typeof value === 'object') {\n return value.id;\n }\n\n return value;\n };\n\n private createChips = (value: ListItem | ListItem[]): Chip[] => {\n if (!value) {\n return [];\n }\n\n if (this.multiple) {\n const listItems: ListItem[] = value as ListItem[];\n\n return listItems.map(this.createChip);\n }\n\n const listItem: ListItem = value as ListItem;\n\n return [this.createChip(listItem)];\n };\n\n private createChip = (listItem: ListItem): Chip => {\n const name = getIconName(listItem.icon);\n const color = getIconFillColor(listItem.icon, listItem.iconColor);\n const valueId = this.getValueId(listItem);\n\n return {\n id: `${valueId}`,\n text: listItem.text,\n removable: true,\n icon: name ? { name: name, color: color } : undefined,\n value: listItem,\n };\n };\n\n /**\n * Renders the dropdown with the items to pick from, or a spinner if the picker\n * is waiting for items to be received\n *\n * @returns picker dropdown\n */\n private renderDropdown() {\n const dropDownContent = this.getDropdownContent();\n\n const content = [];\n\n if (this.shouldShowDropDownContent()) {\n const actionContent = this.getActionContent();\n if (this.actionPosition === 'top') {\n content.push(actionContent);\n }\n\n if (dropDownContent) {\n content.push(dropDownContent);\n }\n\n if (this.actionPosition === 'bottom') {\n content.push(actionContent);\n }\n }\n\n return this.renderPortal(content);\n }\n\n private getActionContent() {\n const actionCount = this.actions?.length ?? 0;\n if (actionCount === 0) {\n return null;\n }\n\n return [\n <limel-list\n class={{\n 'static-actions-list': true,\n 'is-on-top': this.actionPosition === 'top',\n 'is-at-bottom': this.actionPosition === 'bottom',\n 'has-position-sticky':\n this.actionScrollBehavior === 'sticky',\n }}\n badgeIcons={true}\n type={'selectable'}\n onChange={this.handleActionListChange}\n items={this.actions.map(this.removeUnusedPropertiesOnAction)}\n />,\n ];\n }\n\n private removeUnusedPropertiesOnAction(\n action: ListItem<Action>,\n ): ListItem<Action> {\n return {\n ...action,\n actions: [],\n };\n }\n\n private shouldShowDropDownContent() {\n if (this.isFull()) {\n return false;\n }\n\n return !!this.chipSetEditMode;\n }\n\n private getDropdownContent() {\n if (!this.shouldShowDropDownContent()) {\n return;\n }\n\n if (this.loading) {\n return this.renderSpinner();\n }\n\n if (!this.items || !this.items.length) {\n return this.renderEmptyMessage();\n }\n\n return this.renderListResult();\n }\n\n /**\n * Returns true if the picker is \"full\"\n * The picker is considered to be full if it has a value and only one is allowed\n *\n * @returns true if the picker is full\n */\n private isFull(): boolean {\n return !this.multiple && !!this.value;\n }\n\n private renderSpinner() {\n return (\n <div\n style={{\n width: '100%',\n display: 'flex',\n 'align-items': 'center',\n 'justify-content': 'center',\n padding: '1rem 0',\n }}\n >\n <limel-spinner limeBranded={false} />\n </div>\n );\n }\n\n private renderEmptyMessage() {\n if (!this.emptyResultMessage) {\n return;\n }\n\n const style = {\n color: 'rgb(var(--contrast-1100))',\n 'text-align': 'center',\n margin: '0.5rem 1rem',\n };\n\n return <p style={style}>{this.emptyResultMessage}</p>;\n }\n\n private renderListResult() {\n return (\n <limel-list\n badgeIcons={this.badgeIcons}\n onChange={this.handleListChange}\n onKeyDown={this.onListKeyDown}\n type=\"selectable\"\n items={this.items}\n />\n );\n }\n\n private onListKeyDown(event: KeyboardEvent) {\n const keyFound = [TAB, ESCAPE, ENTER].includes(event.key);\n const keyCodeFound = [\n TAB_KEY_CODE,\n ESCAPE_KEY_CODE,\n ENTER_KEY_CODE,\n ].includes(event.keyCode);\n if (keyFound || keyCodeFound) {\n this.chipSet.setFocus();\n }\n }\n\n private renderPortal(content: any[] = []) {\n const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n '--dropdown-z-index',\n );\n\n return (\n <limel-portal\n visible={content.length > 0}\n containerId={this.portalId}\n inheritParentWidth={true}\n containerStyle={{ 'z-index': dropdownZIndex }}\n >\n <limel-menu-surface\n open={content.length > 0}\n allowClicksElement={this.host}\n style={{\n '--mdc-menu-min-width': '100%',\n 'max-height': 'inherit',\n display: 'flex',\n }}\n onDismiss={this.handleCloseMenu}\n >\n {content}\n </limel-menu-surface>\n </limel-portal>\n );\n }\n\n /**\n * Check if a descendant still has focus. If not, reset text value and search result.\n */\n private handleStopEditAndBlur() {\n // In browsers where shadow DOM is not supported activeElement on shadowRoot will return null\n // However, document.activeElement will return the actual focused element instead of the outermost shadow host\n const element =\n this.host.shadowRoot.activeElement || document.activeElement;\n const portalElement = document.querySelector(`#${this.portalId}`);\n if (\n isDescendant(element as HTMLElement, this.host) ||\n isDescendant(element as HTMLElement, portalElement as HTMLElement)\n ) {\n return;\n }\n\n this.clearInputField();\n }\n\n /**\n * Input handler for the input field\n *\n * @param event - event\n */\n private async handleTextInput(event) {\n event.stopPropagation();\n\n const query = event.detail;\n this.textValue = query;\n this.loading = true;\n\n // If the search-query is an empty string, bypass debouncing.\n const searchFn = query === '' ? this.searcher : this.debouncedSearch;\n const result = await searchFn(query);\n this.handleSearchResult(query, result);\n }\n\n /**\n * Change handler for the list\n *\n * @param event - event\n */\n private handleListChange(event: LimelListCustomEvent<ListItem>) {\n event.stopPropagation();\n if (!this.value || this.value !== event.detail) {\n let newValue: ListItem | ListItem[] = event.detail;\n if (this.multiple) {\n newValue = [...(this.value as ListItem[]), event.detail];\n }\n\n this.change.emit(newValue);\n this.items = [];\n }\n\n if (this.multiple) {\n this.chipSet?.setFocus(true);\n }\n }\n\n /**\n * Change handler for the list\n *\n * @param event - event\n */\n private handleActionListChange(\n event: LimelListCustomEvent<ListItem<Action>>,\n ) {\n event.stopPropagation();\n if (!event.detail) {\n return;\n }\n\n this.action.emit(event.detail.value);\n this.items = [];\n }\n\n /**\n * Focus handler for the chip set\n * Prevent focus if the picker has a value and does not support multiple values\n */\n private async handleInputFieldFocus() {\n this.loading = true;\n const query = this.textValue;\n const result = await this.searcher(query);\n this.handleSearchResult(query, result);\n }\n\n private handleChange(event: LimelChipSetCustomEvent<Chip | Chip[]>) {\n event.stopPropagation();\n\n let newValue = null;\n if (this.multiple) {\n const chips = event.detail as Chip[];\n newValue = chips.map((chip) => {\n return (this.value as ListItem[]).find((item) => {\n const valueId = this.getValueId(item);\n\n return `${valueId}` === chip.id;\n });\n });\n }\n\n this.change.emit(newValue);\n }\n\n private handleInteract(event: LimelChipSetCustomEvent<Chip>) {\n event.stopPropagation();\n this.interact.emit(event.detail ? event.detail.value : event.detail);\n }\n\n /**\n * Key handler for the input field\n * Will change focus to the first/last item in the dropdown list to enable selection with the keyboard\n *\n * @param event - event\n */\n private handleInputKeyDown(event: KeyboardEvent) {\n const isForwardTab =\n (event.key === TAB || event.keyCode === TAB_KEY_CODE) &&\n !event.altKey &&\n !event.metaKey &&\n !event.shiftKey;\n const isUp =\n event.key === ARROW_UP || event.keyCode === ARROW_UP_KEY_CODE;\n const isDown =\n event.key === ARROW_DOWN || event.keyCode === ARROW_DOWN_KEY_CODE;\n\n if (!isForwardTab && !isUp && !isDown) {\n return;\n }\n\n const list = document.querySelector(` #${this.portalId} limel-list`);\n if (!list) {\n return;\n }\n\n event.preventDefault();\n\n if (isForwardTab || isDown) {\n const listElement: HTMLElement = list.shadowRoot.querySelector(\n '.mdc-deprecated-list-item:first-child',\n );\n listElement.focus();\n\n return;\n }\n\n if (isUp) {\n const listElement: HTMLElement = list.shadowRoot.querySelector(\n '.mdc-deprecated-list-item:last-child',\n );\n listElement.focus();\n }\n }\n\n /**\n * Key handler for the dropdown\n *\n * @param event - event\n */\n private handleDropdownKeyDown(event: KeyboardEvent) {\n const isEscape =\n event.key === ESCAPE || event.keyCode === ESCAPE_KEY_CODE;\n\n if (isEscape) {\n event.preventDefault();\n this.textValue = '';\n this.chipSet.setFocus(true);\n }\n }\n\n private handleSearchResult(query: string, result: ListItem[]) {\n if (query === this.textValue) {\n this.items = result;\n if (this.multiple) {\n const values = this.value as ListItem[];\n this.items = result.filter((item) => {\n return !values.includes(item);\n });\n }\n\n this.loading = false;\n }\n }\n\n private handleCloseMenu() {\n if (this.items.length > 0) {\n return;\n }\n\n this.clearInputField();\n }\n\n private clearInputField() {\n this.chipSet.emptyInput();\n this.textValue = '';\n this.handleSearchResult('', []);\n }\n}\n"]}
1
+ {"version":3,"file":"picker.js","sourceRoot":"","sources":["../../../src/components/picker/picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Action } from '../collapsible-section/action';\nimport { ActionPosition, ActionScrollBehavior } from '../picker/actions.types';\nimport { Chip } from '../chip-set/chip.types';\nimport { ListItem } from '../list/list-item.types';\nimport { Searcher } from '../picker/searcher.types';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport AwesomeDebouncePromise from 'awesome-debounce-promise';\nimport { isDescendant } from '../../util/dom';\nimport {\n ARROW_DOWN,\n ARROW_DOWN_KEY_CODE,\n ARROW_UP,\n ARROW_UP_KEY_CODE,\n ENTER,\n ENTER_KEY_CODE,\n ESCAPE,\n ESCAPE_KEY_CODE,\n TAB,\n TAB_KEY_CODE,\n} from '../../util/keycodes';\nimport { createRandomString } from '../../util/random-string';\nimport {\n LimelChipSetCustomEvent,\n LimelListCustomEvent,\n} from '../../components';\nimport { getIconFillColor, getIconName } from '../icon/get-icon-props';\nimport { PickerValue } from './value.types';\n\nconst SEARCH_DEBOUNCE = 500;\nconst CHIP_SET_TAG_NAME = 'limel-chip-set';\n\n/**\n * @exampleComponent limel-example-picker-single\n * @exampleComponent limel-example-picker-multiple\n * @exampleComponent limel-example-picker-icons\n * @exampleComponent limel-example-picker-value-as-object\n * @exampleComponent limel-example-picker-empty-suggestions\n * @exampleComponent limel-example-picker-leading-icon\n * @exampleComponent limel-example-picker-static-actions\n * @exampleComponent limel-example-picker-composite\n */\n@Component({\n tag: 'limel-picker',\n shadow: true,\n styleUrl: 'picker.scss',\n})\nexport class Picker {\n /**\n * True if the picker should be disabled\n */\n @Prop()\n public disabled: boolean = false;\n\n /**\n * Set to `true` to disable adding and removing items,\n * but allow interaction with existing items.\n */\n @Prop({ reflect: true })\n public readonly: boolean = false;\n\n /**\n * Text to display for the input field of the picker\n */\n @Prop()\n public label: string;\n\n /**\n * Search label to display in the input field when searching\n */\n @Prop()\n public searchLabel: string;\n\n /**\n * Optional helper text to display below the input field when it has focus\n */\n @Prop({ reflect: true })\n public helperText: string;\n\n /**\n * Leading icon to show to the far left in the text field\n */\n @Prop()\n public leadingIcon: string;\n\n /**\n * A message to display when the search returned an empty result\n */\n @Prop()\n public emptyResultMessage: string;\n\n /**\n * True if the control requires a value\n */\n @Prop()\n public required: boolean = false;\n\n /**\n * Set to `true` to indicate that the current value of the input field is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid = false;\n\n /**\n * Currently selected value or values. Where the value can be an object.\n */\n @Prop()\n public value: ListItem<PickerValue> | Array<ListItem<PickerValue>>;\n\n /**\n * A search function that takes a search-string as an argument,\n * and returns a promise that will eventually be resolved with\n * an array of `ListItem`:s.\n *\n * See the docs for the type `Searcher` for type information on\n * the searcher function itself.\n */\n @Prop()\n public searcher: Searcher;\n\n /**\n * True if multiple values are allowed\n */\n @Prop()\n public multiple: boolean = false;\n\n /**\n * Sets delimiters between chips. Works only when `multiple` is `true`.\n */\n @Prop({ reflect: true })\n public delimiter: string = null;\n\n /**\n * Static actions that can be clicked by the user.\n */\n @Prop()\n public actions: Array<ListItem<Action>> = [];\n\n /**\n * Position of the custom static actions in the picker's results dropdown.\n * Can be set to `'top'` or `'bottom'`.\n */\n @Prop()\n public actionPosition: ActionPosition = 'bottom';\n\n /**\n * Scroll behavior of the custom static actions, when user scrolls\n * in the picker's results dropdown. Can be set to `'scroll'` which means\n * the action items will scroll together with the list, or `'sticky'` which\n * retains their position at the top or bottom of the drop down while\n * scrolling.\n */\n @Prop()\n public actionScrollBehavior: ActionScrollBehavior = 'sticky';\n\n /**\n * Whether badge icons should be used in the result list or not\n */\n @Prop({ reflect: true })\n public badgeIcons: boolean = false;\n\n /**\n * Fired when a new value has been selected from the picker\n */\n @Event()\n private change: EventEmitter<\n ListItem<PickerValue> | Array<ListItem<PickerValue>>\n >;\n\n /**\n * Fired when clicking on a selected value\n */\n @Event()\n private interact: EventEmitter<ListItem<PickerValue>>;\n\n /**\n * Emitted when the user selects an action.\n */\n @Event()\n private action: EventEmitter<Action>;\n\n @State()\n private items: Array<ListItem<number | string>>;\n\n @State()\n private textValue: string = '';\n\n @State()\n private loading: boolean = false;\n\n @State()\n private chips: Chip[] = [];\n\n @Element()\n private host: HTMLLimelPickerElement;\n\n // Should NOT be decorated with State(), since this\n // should not trigger a re-render by itself.\n private chipSetEditMode = false;\n\n private debouncedSearch: Searcher;\n private chipSet: HTMLLimelChipSetElement;\n private portalId: string;\n\n constructor() {\n this.handleTextInput = this.handleTextInput.bind(this);\n this.handleInputKeyDown = this.handleInputKeyDown.bind(this);\n this.handleDropdownKeyDown = this.handleDropdownKeyDown.bind(this);\n this.handleInputFieldFocus = this.handleInputFieldFocus.bind(this);\n this.handleChange = this.handleChange.bind(this);\n this.handleInteract = this.handleInteract.bind(this);\n this.handleListChange = this.handleListChange.bind(this);\n this.handleActionListChange = this.handleActionListChange.bind(this);\n this.handleStopEditAndBlur = this.handleStopEditAndBlur.bind(this);\n this.createDebouncedSearcher = this.createDebouncedSearcher.bind(this);\n this.handleCloseMenu = this.handleCloseMenu.bind(this);\n this.onListKeyDown = this.onListKeyDown.bind(this);\n\n this.portalId = createRandomString();\n }\n\n public componentWillLoad() {\n this.chips = this.createChips(this.value);\n }\n\n public componentDidLoad() {\n this.createDebouncedSearcher(this.searcher);\n this.chipSet = this.host.shadowRoot.querySelector(CHIP_SET_TAG_NAME);\n }\n\n public async componentWillUpdate() {\n this.chipSetEditMode = false;\n if (this.chipSet) {\n this.chipSetEditMode = await this.chipSet.getEditMode();\n }\n }\n\n public render() {\n const props: {\n maxItems?: number;\n } = {};\n\n if (!this.multiple) {\n props.maxItems = 1;\n }\n\n return [\n <limel-chip-set\n type=\"input\"\n inputType=\"search\"\n label={this.label}\n helperText={this.helperText}\n leadingIcon={this.leadingIcon}\n value={this.chips}\n disabled={this.disabled}\n invalid={this.invalid}\n delimiter={this.renderDelimiter()}\n readonly={this.readonly}\n required={this.required}\n searchLabel={this.searchLabel}\n onInput={this.handleTextInput}\n onKeyDown={this.handleInputKeyDown}\n onChange={this.handleChange}\n onInteract={this.handleInteract}\n onStartEdit={this.handleInputFieldFocus}\n onStopEdit={this.handleStopEditAndBlur}\n emptyInputOnBlur={false}\n clearAllButton={this.multiple && !this.chipSetEditMode}\n {...props}\n />,\n this.renderDropdown(),\n ];\n }\n\n @Watch('value')\n protected onChangeValue() {\n this.chips = this.createChips(this.value);\n }\n\n @Watch('searcher')\n protected createDebouncedSearcher(newValue: Searcher) {\n if (typeof newValue !== 'function') {\n return;\n }\n\n this.debouncedSearch = AwesomeDebouncePromise(\n newValue,\n SEARCH_DEBOUNCE,\n );\n }\n\n private renderDelimiter() {\n if (this.multiple) {\n return this.delimiter;\n }\n\n return null;\n }\n\n private getValueId = (item: ListItem) => {\n const value = item.value;\n if (!!value && typeof value === 'object') {\n return value.id;\n }\n\n return value;\n };\n\n private createChips = (value: ListItem | ListItem[]): Chip[] => {\n if (!value) {\n return [];\n }\n\n if (this.multiple) {\n const listItems: ListItem[] = value as ListItem[];\n\n return listItems.map(this.createChip);\n }\n\n const listItem: ListItem = value as ListItem;\n\n return [this.createChip(listItem)];\n };\n\n private createChip = (listItem: ListItem): Chip => {\n const name = getIconName(listItem.icon);\n const color = getIconFillColor(listItem.icon, listItem.iconColor);\n const valueId = this.getValueId(listItem);\n\n return {\n id: `${valueId}`,\n text: listItem.text,\n removable: true,\n icon: name ? { name: name, color: color } : undefined,\n value: listItem,\n };\n };\n\n /**\n * Renders the dropdown with the items to pick from, or a spinner if the picker\n * is waiting for items to be received\n *\n * @returns picker dropdown\n */\n private renderDropdown() {\n const dropDownContent = this.getDropdownContent();\n\n const content = [];\n\n if (this.shouldShowDropDownContent()) {\n const actionContent = this.getActionContent();\n if (this.actionPosition === 'top') {\n content.push(actionContent);\n }\n\n if (dropDownContent) {\n content.push(dropDownContent);\n }\n\n if (this.actionPosition === 'bottom') {\n content.push(actionContent);\n }\n }\n\n return this.renderPortal(content);\n }\n\n private getActionContent() {\n const actionCount = this.actions?.length ?? 0;\n if (actionCount === 0) {\n return null;\n }\n\n return [\n <limel-list\n class={{\n 'static-actions-list': true,\n 'is-on-top': this.actionPosition === 'top',\n 'is-at-bottom': this.actionPosition === 'bottom',\n 'has-position-sticky':\n this.actionScrollBehavior === 'sticky',\n }}\n badgeIcons={true}\n type={'selectable'}\n onChange={this.handleActionListChange}\n items={this.actions.map(this.removeUnusedPropertiesOnAction)}\n />,\n ];\n }\n\n private removeUnusedPropertiesOnAction(\n action: ListItem<Action>,\n ): ListItem<Action> {\n return {\n ...action,\n actions: [],\n };\n }\n\n private shouldShowDropDownContent() {\n if (this.isFull()) {\n return false;\n }\n\n return !!this.chipSetEditMode;\n }\n\n private getDropdownContent() {\n if (!this.shouldShowDropDownContent()) {\n return;\n }\n\n if (this.loading) {\n return this.renderSpinner();\n }\n\n if (!this.items || !this.items.length) {\n return this.renderEmptyMessage();\n }\n\n return this.renderListResult();\n }\n\n /**\n * Returns true if the picker is \"full\"\n * The picker is considered to be full if it has a value and only one is allowed\n *\n * @returns true if the picker is full\n */\n private isFull(): boolean {\n return !this.multiple && !!this.value;\n }\n\n private renderSpinner() {\n return (\n <div\n style={{\n width: '100%',\n display: 'flex',\n 'align-items': 'center',\n 'justify-content': 'center',\n padding: '1rem 0',\n }}\n >\n <limel-spinner limeBranded={false} />\n </div>\n );\n }\n\n private renderEmptyMessage() {\n if (!this.emptyResultMessage) {\n return;\n }\n\n const style = {\n color: 'rgb(var(--contrast-1100))',\n 'text-align': 'center',\n margin: '0.5rem 1rem',\n };\n\n return <p style={style}>{this.emptyResultMessage}</p>;\n }\n\n private renderListResult() {\n return (\n <limel-list\n badgeIcons={this.badgeIcons}\n onChange={this.handleListChange}\n onKeyDown={this.onListKeyDown}\n type=\"selectable\"\n items={this.items}\n />\n );\n }\n\n private onListKeyDown(event: KeyboardEvent) {\n const keyFound = [TAB, ESCAPE, ENTER].includes(event.key);\n const keyCodeFound = [\n TAB_KEY_CODE,\n ESCAPE_KEY_CODE,\n ENTER_KEY_CODE,\n ].includes(event.keyCode);\n if (keyFound || keyCodeFound) {\n this.chipSet.setFocus();\n }\n }\n\n private renderPortal(content: any[] = []) {\n const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n '--dropdown-z-index',\n );\n\n return (\n <limel-portal\n visible={content.length > 0}\n containerId={this.portalId}\n inheritParentWidth={true}\n containerStyle={{ 'z-index': dropdownZIndex }}\n >\n <limel-menu-surface\n open={content.length > 0}\n allowClicksElement={this.host}\n style={{\n '--mdc-menu-min-width': '100%',\n 'max-height': 'inherit',\n display: 'flex',\n }}\n onDismiss={this.handleCloseMenu}\n >\n {content}\n </limel-menu-surface>\n </limel-portal>\n );\n }\n\n /**\n * Check if a descendant still has focus. If not, reset text value and search result.\n */\n private handleStopEditAndBlur() {\n // In browsers where shadow DOM is not supported activeElement on shadowRoot will return null\n // However, document.activeElement will return the actual focused element instead of the outermost shadow host\n const element =\n this.host.shadowRoot.activeElement || document.activeElement;\n const portalElement = document.querySelector(`#${this.portalId}`);\n if (\n isDescendant(element as HTMLElement, this.host) ||\n isDescendant(element as HTMLElement, portalElement as HTMLElement)\n ) {\n return;\n }\n\n this.clearInputField();\n }\n\n /**\n * Input handler for the input field\n *\n * @param event - event\n */\n private async handleTextInput(event) {\n event.stopPropagation();\n\n const query = event.detail;\n this.textValue = query;\n this.loading = true;\n\n // If the search-query is an empty string, bypass debouncing.\n const searchFn = query === '' ? this.searcher : this.debouncedSearch;\n const result = (await searchFn(query)) as Array<ListItem<PickerValue>>;\n this.handleSearchResult(query, result);\n }\n\n /**\n * Change handler for the list\n *\n * @param event - event\n */\n private handleListChange(\n event: LimelListCustomEvent<ListItem<PickerValue>>,\n ) {\n event.stopPropagation();\n if (!this.value || this.value !== event.detail) {\n let newValue: ListItem<PickerValue> | Array<ListItem<PickerValue>> =\n event.detail;\n if (this.multiple) {\n newValue = [\n ...(this.value as Array<ListItem<PickerValue>>),\n event.detail,\n ];\n }\n\n this.change.emit(newValue);\n this.items = [];\n }\n\n if (this.multiple) {\n this.chipSet?.setFocus(true);\n }\n }\n\n /**\n * Change handler for the list\n *\n * @param event - event\n */\n private handleActionListChange(\n event: LimelListCustomEvent<ListItem<Action>>,\n ) {\n event.stopPropagation();\n if (!event.detail) {\n return;\n }\n\n this.action.emit(event.detail.value);\n this.items = [];\n }\n\n /**\n * Focus handler for the chip set\n * Prevent focus if the picker has a value and does not support multiple values\n */\n private async handleInputFieldFocus() {\n this.loading = true;\n const query = this.textValue;\n const result = (await this.searcher(query)) as Array<\n ListItem<PickerValue>\n >;\n this.handleSearchResult(query, result);\n }\n\n private handleChange(event: LimelChipSetCustomEvent<Chip | Chip[]>) {\n event.stopPropagation();\n\n let newValue = null;\n if (this.multiple) {\n const chips = event.detail as Chip[];\n newValue = chips.map((chip) => {\n return (this.value as ListItem[]).find((item) => {\n const valueId = this.getValueId(item);\n\n return `${valueId}` === chip.id;\n });\n });\n }\n\n this.change.emit(newValue);\n }\n\n private handleInteract(event: LimelChipSetCustomEvent<Chip>) {\n event.stopPropagation();\n this.interact.emit(event.detail ? event.detail.value : event.detail);\n }\n\n /**\n * Key handler for the input field\n * Will change focus to the first/last item in the dropdown list to enable selection with the keyboard\n *\n * @param event - event\n */\n private handleInputKeyDown(event: KeyboardEvent) {\n const isForwardTab =\n (event.key === TAB || event.keyCode === TAB_KEY_CODE) &&\n !event.altKey &&\n !event.metaKey &&\n !event.shiftKey;\n const isUp =\n event.key === ARROW_UP || event.keyCode === ARROW_UP_KEY_CODE;\n const isDown =\n event.key === ARROW_DOWN || event.keyCode === ARROW_DOWN_KEY_CODE;\n\n if (!isForwardTab && !isUp && !isDown) {\n return;\n }\n\n const list = document.querySelector(` #${this.portalId} limel-list`);\n if (!list) {\n return;\n }\n\n event.preventDefault();\n\n if (isForwardTab || isDown) {\n const listElement: HTMLElement = list.shadowRoot.querySelector(\n '.mdc-deprecated-list-item:first-child',\n );\n listElement.focus();\n\n return;\n }\n\n if (isUp) {\n const listElement: HTMLElement = list.shadowRoot.querySelector(\n '.mdc-deprecated-list-item:last-child',\n );\n listElement.focus();\n }\n }\n\n /**\n * Key handler for the dropdown\n *\n * @param event - event\n */\n private handleDropdownKeyDown(event: KeyboardEvent) {\n const isEscape =\n event.key === ESCAPE || event.keyCode === ESCAPE_KEY_CODE;\n\n if (isEscape) {\n event.preventDefault();\n this.textValue = '';\n this.chipSet.setFocus(true);\n }\n }\n\n private handleSearchResult(query: string, result: ListItem[]) {\n if (query === this.textValue) {\n this.items = result;\n if (this.multiple) {\n const values = this.value as ListItem[];\n this.items = result.filter((item) => {\n return !values.includes(item);\n });\n }\n\n this.loading = false;\n }\n }\n\n private handleCloseMenu() {\n if (this.items.length > 0) {\n return;\n }\n\n this.clearInputField();\n }\n\n private clearInputField() {\n this.chipSet.emptyInput();\n this.textValue = '';\n this.handleSearchResult('', []);\n }\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"searcher.types.js","sourceRoot":"","sources":["../../../src/components/picker/searcher.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ListItem } from '../list/list-item.types';\n\n/**\n * A search function that takes a search-string as an argument, and returns\n * a promise that will eventually be resolved with an array of `ListItem`:s.\n *\n * @param query - A search query. Typically what the user has written\n * in the input field of a limel-picker.\n * @returns The search result.\n * @public\n */\nexport type Searcher = (query: string) => Promise<ListItem[]>;\n"]}
1
+ {"version":3,"file":"searcher.types.js","sourceRoot":"","sources":["../../../src/components/picker/searcher.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ListItem } from '../list/list-item.types';\nimport { ListSeparator } from '../../global/shared-types/separator.types';\n\n/**\n * A search function that takes a search-string as an argument, and returns\n * a promise that will eventually be resolved with an array of `ListItem`:s.\n *\n * @param query - A search query. Typically what the user has written\n * in the input field of a limel-picker.\n * @returns The search result.\n * @public\n */\nexport type Searcher = (query: string) => Promise<ListItem[] | ListSeparator>;\n"]}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=value.types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"value.types.js","sourceRoot":"","sources":["../../../src/components/picker/value.types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * The type of the value that the picker can handle\n * @public\n */\nexport type PickerValue =\n | number\n | string\n | { id: string | number; [key: string]: any };\n"]}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"file.types.js","sourceRoot":"","sources":["../../../src/global/shared-types/file.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Icon } from '../../global/shared-types/icon.types';\n\n/**\n * @public\n */\nexport interface FileInfo {\n /**\n * ID of the file. Must be unique.\n */\n id: number | string;\n\n /**\n * Name of file.\n */\n filename: string;\n\n /**\n * Extension of file.\n */\n extension?: string;\n\n /**\n * Content type of file.\n */\n contentType?: string;\n\n /**\n * Date of last modification.\n */\n lastModified?: Date;\n\n /**\n * Size of file.\n */\n size?: number;\n\n /**\n * the file content\n */\n fileContent?: File;\n\n /**\n * Name of the icon to use.\n */\n icon?: string | Icon;\n\n /**\n * Icon color. Overrides `--icon-color`.\n *\n * @deprecated This property is deprecated and will be removed soon!\n *\n * Use the new `Icon` interface instead and write:\n * ```ts\n * icon: {\n * name: string,\n * color: string,\n * },\n * ```\n */\n iconColor?: string;\n\n /**\n * Background color of the icon. Overrides `--icon-background-color`.\n *\n * @deprecated This property is deprecated and will be removed soon!\n *\n * Use the new `Icon` interface instead and write:\n * ```ts\n * icon: {\n * name: string,\n * backgroundColor: string,\n * },\n * ```\n */\n iconBackgroundColor?: string;\n\n /**\n * URL where the file can be downloaded. Note that this is optional. If the\n * file cannot be directly accessed via a unique url, this property should\n * be left undefined or set to `null`.\n */\n href?: string;\n}\n"]}
@@ -9,7 +9,7 @@ export * from './components/collapsible-section/action';
9
9
  export * from './components/date-picker/date.types';
10
10
  export * from './components/dialog/dialog.types';
11
11
  export * from './components/dock/dock.types';
12
- export * from './components/file/file.types';
12
+ export * from './global/shared-types/file.types';
13
13
  export * from './components/flex-container/flex-container.types';
14
14
  export { FormLayoutType, } from './components/form/form.types';
15
15
  export * from './components/help/help.types';
@@ -1 +1 @@
1
- {"version":3,"file":"interface.js","sourceRoot":"","sources":["../src/interface.ts"],"names":[],"mappings":"AAAA,cAAc,0CAA0C,CAAC;AACzD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AACnD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wDAAwD,CAAC;AACvE,cAAc,4CAA4C,CAAC;AAC3D,cAAc,yCAAyC,CAAC;AACxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kDAAkD,CAAC;AACjE,OAAO,EAaH,cAAc,GAIjB,MAAM,8BAA8B,CAAC;AACtC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,wCAAwC,CAAC;AACvD,cAAc,4CAA4C,CAAC;AAE3D,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,wCAAwC,CAAC;AACvD,cAAc,mCAAmC,CAAC;AAClD,cAAc,oCAAoC,CAAC;AACnD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AACnD,cAAc,wCAAwC,CAAC;AACvD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uCAAuC,CAAC","sourcesContent":["export * from './components/action-bar/action-bar.types';\nexport * from './components/breadcrumbs/breadcrumbs.types';\nexport * from './components/button/button.types';\nexport * from './components/callout/callout.types';\nexport * from './components/chip-set/chip.types';\nexport * from './components/circular-progress/circular-progress.types';\nexport * from './components/code-editor/code-editor.types';\nexport * from './components/collapsible-section/action';\nexport * from './components/date-picker/date.types';\nexport * from './components/dialog/dialog.types';\nexport * from './components/dock/dock.types';\nexport * from './components/file/file.types';\nexport * from './components/flex-container/flex-container.types';\nexport {\n EventEmitter,\n ValidationStatus,\n FormError,\n ValidationError,\n FormComponent,\n FormInfo,\n LimeSchemaOptions,\n LimeLayoutOptions,\n FormComponentOptions,\n FormLayoutOptions,\n GridLayoutOptions,\n RowLayoutOptions,\n FormLayoutType,\n ReplaceObjectType,\n FormSchemaArrayItem,\n FormSubKeySchema,\n} from './components/form/form.types';\nexport * from './components/help/help.types';\nexport * from './components/icon/icon.types';\nexport * from './components/info-tile/info-tile.types';\nexport * from './components/input-field/input-field.types';\nexport { ListComponent } from './components/list/list-item.types';\nexport * from './components/list/list.types';\nexport * from './components/menu/menu.types';\nexport * from './components/menu-list/menu-list.types';\nexport * from './components/picker/actions.types';\nexport * from './components/picker/searcher.types';\nexport * from './components/progress-flow/progress-flow.types';\nexport * from './components/select/option.types';\nexport * from './components/spinner/spinner.types';\nexport * from './components/tab-panel/tab-panel.types';\nexport * from './components/table/table.types';\nexport * from './global/shared-types/separator.types';\n"]}
1
+ {"version":3,"file":"interface.js","sourceRoot":"","sources":["../src/interface.ts"],"names":[],"mappings":"AAAA,cAAc,0CAA0C,CAAC;AACzD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AACnD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wDAAwD,CAAC;AACvE,cAAc,4CAA4C,CAAC;AAC3D,cAAc,yCAAyC,CAAC;AACxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,kDAAkD,CAAC;AACjE,OAAO,EAaH,cAAc,GAIjB,MAAM,8BAA8B,CAAC;AACtC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,wCAAwC,CAAC;AACvD,cAAc,4CAA4C,CAAC;AAE3D,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,wCAAwC,CAAC;AACvD,cAAc,mCAAmC,CAAC;AAClD,cAAc,oCAAoC,CAAC;AACnD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AACnD,cAAc,wCAAwC,CAAC;AACvD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uCAAuC,CAAC","sourcesContent":["export * from './components/action-bar/action-bar.types';\nexport * from './components/breadcrumbs/breadcrumbs.types';\nexport * from './components/button/button.types';\nexport * from './components/callout/callout.types';\nexport * from './components/chip-set/chip.types';\nexport * from './components/circular-progress/circular-progress.types';\nexport * from './components/code-editor/code-editor.types';\nexport * from './components/collapsible-section/action';\nexport * from './components/date-picker/date.types';\nexport * from './components/dialog/dialog.types';\nexport * from './components/dock/dock.types';\nexport * from './global/shared-types/file.types';\nexport * from './components/flex-container/flex-container.types';\nexport {\n EventEmitter,\n ValidationStatus,\n FormError,\n ValidationError,\n FormComponent,\n FormInfo,\n LimeSchemaOptions,\n LimeLayoutOptions,\n FormComponentOptions,\n FormLayoutOptions,\n GridLayoutOptions,\n RowLayoutOptions,\n FormLayoutType,\n ReplaceObjectType,\n FormSchemaArrayItem,\n FormSubKeySchema,\n} from './components/form/form.types';\nexport * from './components/help/help.types';\nexport * from './components/icon/icon.types';\nexport * from './components/info-tile/info-tile.types';\nexport * from './components/input-field/input-field.types';\nexport { ListComponent } from './components/list/list-item.types';\nexport * from './components/list/list.types';\nexport * from './components/menu/menu.types';\nexport * from './components/menu-list/menu-list.types';\nexport * from './components/picker/actions.types';\nexport * from './components/picker/searcher.types';\nexport * from './components/progress-flow/progress-flow.types';\nexport * from './components/select/option.types';\nexport * from './components/spinner/spinner.types';\nexport * from './components/tab-panel/tab-panel.types';\nexport * from './components/table/table.types';\nexport * from './global/shared-types/separator.types';\n"]}
@@ -1,7 +1,7 @@
1
- import { getIconForFile } from './icons';
2
- import { getIconFillColorForFile } from './icon-fill-colors';
3
- import { getIconBackgroundColorForFile } from './icon-background-colors';
4
- import { getIconBackgroundColor, getIconColor, getIconName, } from '../icon/get-icon-props';
1
+ import { getIconBackgroundColorForFile } from '../components/file/icon-background-colors';
2
+ import { getIconFillColorForFile } from '../components/file/icon-fill-colors';
3
+ import { getIconForFile } from '../components/file/icons';
4
+ import { getIconBackgroundColor, getIconColor, getIconName, } from '../components/icon/get-icon-props';
5
5
  export function getFileIcon(file) {
6
6
  const name = getIconName(file.icon);
7
7
  if (name) {
@@ -0,0 +1 @@
1
+ {"version":3,"file":"file-metadata.js","sourceRoot":"","sources":["../../src/util/file-metadata.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,6BAA6B,EAAE,MAAM,2CAA2C,CAAC;AAC1F,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EACH,sBAAsB,EACtB,YAAY,EACZ,WAAW,GACd,MAAM,mCAAmC,CAAC;AAE3C,MAAM,UAAU,WAAW,CAAC,IAAc;EACtC,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAEpC,IAAI,IAAI,EAAE;IACN,OAAO,IAAI,CAAC;GACf;EAED,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;EACrC,IAAI,CAAC,SAAS,EAAE;IACZ,OAAO;GACV;EAED,OAAO,cAAc,CAAC,SAAS,CAAC,CAAC;AACrC,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,IAAc;EACvC,MAAM,KAAK,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;EAEtD,IAAI,KAAK,EAAE;IACP,OAAO,KAAK,CAAC;GAChB;EAED,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;EACrC,IAAI,CAAC,SAAS,EAAE;IACZ,OAAO;GACV;EAED,OAAO,uBAAuB,CAAC,SAAS,CAAC,CAAC;AAC9C,CAAC;AAED,MAAM,UAAU,sBAAsB,CAAC,IAAc;EACjD,MAAM,eAAe,GAAG,sBAAsB,CAC1C,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,mBAAmB,CAC3B,CAAC;EAEF,IAAI,eAAe,EAAE;IACjB,OAAO,eAAe,CAAC;GAC1B;EAED,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;EACrC,IAAI,CAAC,SAAS,EAAE;IACZ,OAAO;GACV;EAED,OAAO,6BAA6B,CAAC,SAAS,CAAC,CAAC;AACpD,CAAC;AAED,MAAM,UAAU,qBAAqB,CAAC,IAAc;EAChD,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAEpC,IAAI,IAAI,EAAE;IACN,OAAO,IAAI,CAAC;GACf;EAED,OAAO,YAAY,CAAC,IAAI,CAAC,CAAC;AAC9B,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,IAAc;EACvC,IAAI,CAAC,IAAI,EAAE;IACP,OAAO;GACV;EAED,OAAO,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC;AAC1C,CAAC","sourcesContent":["import { FileInfo } from '../global/shared-types/file.types';\nimport { getIconBackgroundColorForFile } from '../components/file/icon-background-colors';\nimport { getIconFillColorForFile } from '../components/file/icon-fill-colors';\nimport { getIconForFile } from '../components/file/icons';\nimport {\n getIconBackgroundColor,\n getIconColor,\n getIconName,\n} from '../components/icon/get-icon-props';\n\nexport function getFileIcon(file: FileInfo) {\n const name = getIconName(file.icon);\n\n if (name) {\n return name;\n }\n\n const extension = getExtension(file);\n if (!extension) {\n return;\n }\n\n return getIconForFile(extension);\n}\n\nexport function getFileColor(file: FileInfo) {\n const color = getIconColor(file.icon, file.iconColor);\n\n if (color) {\n return color;\n }\n\n const extension = getExtension(file);\n if (!extension) {\n return;\n }\n\n return getIconFillColorForFile(extension);\n}\n\nexport function getFileBackgroundColor(file: FileInfo) {\n const backgroundColor = getIconBackgroundColor(\n file.icon,\n file.iconBackgroundColor,\n );\n\n if (backgroundColor) {\n return backgroundColor;\n }\n\n const extension = getExtension(file);\n if (!extension) {\n return;\n }\n\n return getIconBackgroundColorForFile(extension);\n}\n\nexport function getFileExtensionTitle(file: FileInfo) {\n const name = getIconName(file.icon);\n\n if (name) {\n return name;\n }\n\n return getExtension(file);\n}\n\nexport function getExtension(file: FileInfo) {\n if (!file) {\n return;\n }\n\n return file.filename.split('.').pop();\n}\n"]}
@@ -0,0 +1,37 @@
1
+ import { getFileBackgroundColor, getFileColor, getFileExtensionTitle, getFileIcon, } from './file-metadata';
2
+ export function createFileInfo(file) {
3
+ const limeFile = {
4
+ id: crypto.randomUUID(),
5
+ filename: file.name,
6
+ contentType: file.type,
7
+ size: file.size,
8
+ fileContent: file,
9
+ };
10
+ limeFile.icon = {
11
+ name: getFileIcon(limeFile),
12
+ title: getFileExtensionTitle(limeFile),
13
+ color: getFileColor(limeFile),
14
+ backgroundColor: getFileBackgroundColor(limeFile),
15
+ };
16
+ return limeFile;
17
+ }
18
+ export function isTypeAccepted(file, accept) {
19
+ if (accept === undefined || accept === '*') {
20
+ return true;
21
+ }
22
+ const acceptList = accept.split(',').map((raw) => raw.trim());
23
+ return acceptList.some((acceptedType) => {
24
+ if (acceptedType === file.contentType) {
25
+ return true;
26
+ }
27
+ if (acceptedType.endsWith('/*')) {
28
+ const baseType = acceptedType.split('/')[0];
29
+ return file.contentType.startsWith(`${baseType}/`);
30
+ }
31
+ if (acceptedType.startsWith('.')) {
32
+ const fileType = acceptedType.split('.')[1];
33
+ return file.contentType.endsWith(`/${fileType}`);
34
+ }
35
+ });
36
+ }
37
+ //# sourceMappingURL=files.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"files.js","sourceRoot":"","sources":["../../src/util/files.ts"],"names":[],"mappings":"AACA,OAAO,EACH,sBAAsB,EACtB,YAAY,EACZ,qBAAqB,EACrB,WAAW,GACd,MAAM,iBAAiB,CAAC;AAEzB,MAAM,UAAU,cAAc,CAAC,IAAU;EACrC,MAAM,QAAQ,GAAa;IACvB,EAAE,EAAE,MAAM,CAAC,UAAU,EAAE;IACvB,QAAQ,EAAE,IAAI,CAAC,IAAI;IACnB,WAAW,EAAE,IAAI,CAAC,IAAI;IACtB,IAAI,EAAE,IAAI,CAAC,IAAI;IACf,WAAW,EAAE,IAAI;GACpB,CAAC;EACF,QAAQ,CAAC,IAAI,GAAG;IACZ,IAAI,EAAE,WAAW,CAAC,QAAQ,CAAC;IAC3B,KAAK,EAAE,qBAAqB,CAAC,QAAQ,CAAC;IACtC,KAAK,EAAE,YAAY,CAAC,QAAQ,CAAC;IAC7B,eAAe,EAAE,sBAAsB,CAAC,QAAQ,CAAC;GACpD,CAAC;EAEF,OAAO,QAAQ,CAAC;AACpB,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,IAAc,EAAE,MAAe;EAC1D,IAAI,MAAM,KAAK,SAAS,IAAI,MAAM,KAAK,GAAG,EAAE;IACxC,OAAO,IAAI,CAAC;GACf;EAED,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC;EAE9D,OAAO,UAAU,CAAC,IAAI,CAAC,CAAC,YAAoB,EAAE,EAAE;IAC5C,IAAI,YAAY,KAAK,IAAI,CAAC,WAAW,EAAE;MACnC,OAAO,IAAI,CAAC;KACf;IAED,IAAI,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;MAC7B,MAAM,QAAQ,GAAG,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;MAE5C,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,GAAG,QAAQ,GAAG,CAAC,CAAC;KACtD;IAED,IAAI,YAAY,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;MAC9B,MAAM,QAAQ,GAAG,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;MAE5C,OAAO,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,QAAQ,EAAE,CAAC,CAAC;KACpD;EACL,CAAC,CAAC,CAAC;AACP,CAAC","sourcesContent":["import { FileInfo } from '../global/shared-types/file.types';\nimport {\n getFileBackgroundColor,\n getFileColor,\n getFileExtensionTitle,\n getFileIcon,\n} from './file-metadata';\n\nexport function createFileInfo(file: File): FileInfo {\n const limeFile: FileInfo = {\n id: crypto.randomUUID(),\n filename: file.name,\n contentType: file.type,\n size: file.size,\n fileContent: file,\n };\n limeFile.icon = {\n name: getFileIcon(limeFile),\n title: getFileExtensionTitle(limeFile),\n color: getFileColor(limeFile),\n backgroundColor: getFileBackgroundColor(limeFile),\n };\n\n return limeFile;\n}\n\nexport function isTypeAccepted(file: FileInfo, accept?: string): boolean {\n if (accept === undefined || accept === '*') {\n return true;\n }\n\n const acceptList = accept.split(',').map((raw) => raw.trim());\n\n return acceptList.some((acceptedType: string) => {\n if (acceptedType === file.contentType) {\n return true;\n }\n\n if (acceptedType.endsWith('/*')) {\n const baseType = acceptedType.split('/')[0];\n\n return file.contentType.startsWith(`${baseType}/`);\n }\n\n if (acceptedType.startsWith('.')) {\n const fileType = acceptedType.split('.')[1];\n\n return file.contentType.endsWith(`/${fileType}`);\n }\n });\n}\n"]}