@fmsim/board 1.0.35 → 1.0.38

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 (69) hide show
  1. package/.storybook/main.ts +58 -0
  2. package/.storybook/preview.ts +15 -0
  3. package/custom-elements.json +1947 -874
  4. package/dist/src/component/index.d.ts +3 -1
  5. package/dist/src/component/index.js +3 -1
  6. package/dist/src/component/index.js.map +1 -1
  7. package/dist/src/component/restful-attachment-creation-card.d.ts +18 -0
  8. package/dist/src/component/restful-attachment-creation-card.js +264 -0
  9. package/dist/src/component/restful-attachment-creation-card.js.map +1 -0
  10. package/dist/src/component/restful-attachment-selector.d.ts +36 -0
  11. package/dist/src/component/restful-attachment-selector.js +663 -0
  12. package/dist/src/component/restful-attachment-selector.js.map +1 -0
  13. package/dist/src/component/restful-file-selector.d.ts +14 -0
  14. package/dist/src/component/restful-file-selector.js +181 -0
  15. package/dist/src/component/restful-file-selector.js.map +1 -0
  16. package/dist/src/component/restful-input-attachment-selector.d.ts +16 -0
  17. package/dist/src/component/restful-input-attachment-selector.js +110 -0
  18. package/dist/src/component/restful-input-attachment-selector.js.map +1 -0
  19. package/dist/src/component/restful-input-fill-style.d.ts +45 -0
  20. package/dist/src/component/restful-input-fill-style.js +344 -0
  21. package/dist/src/component/restful-input-fill-style.js.map +1 -0
  22. package/dist/src/component/restrul-input-background-pattern.d.ts +35 -0
  23. package/dist/src/component/restrul-input-background-pattern.js +183 -0
  24. package/dist/src/component/restrul-input-background-pattern.js.map +1 -0
  25. package/dist/src/index.d.ts +1 -0
  26. package/dist/src/index.js +1 -0
  27. package/dist/src/index.js.map +1 -1
  28. package/dist/src/modeller/property-sidebar/styles/styles.d.ts +1 -0
  29. package/dist/src/modeller/property-sidebar/styles/styles.js +5 -1
  30. package/dist/src/modeller/property-sidebar/styles/styles.js.map +1 -1
  31. package/dist/stories/restful-attachment-selector.stories.d.ts +30 -0
  32. package/dist/stories/restful-attachment-selector.stories.js +104 -0
  33. package/dist/stories/restful-attachment-selector.stories.js.map +1 -0
  34. package/dist/tsconfig.tsbuildinfo +1 -1
  35. package/icons/attachment/btn-copy-link-hover.svg +4 -0
  36. package/icons/attachment/btn-copy-link.svg +4 -0
  37. package/icons/attachment/btn-delete-hover.svg +4 -0
  38. package/icons/attachment/btn-delete.svg +4 -0
  39. package/icons/attachment/btn-download-hover.svg +4 -0
  40. package/icons/attachment/btn-download.svg +4 -0
  41. package/icons/attachment/btn-zoom-hover.svg +4 -0
  42. package/icons/attachment/btn-zoom.svg +4 -0
  43. package/icons/attachment/file.svg +3 -0
  44. package/icons/board/btn-add-board.svg +5 -0
  45. package/icons/board/btn-add-list.svg +5 -0
  46. package/icons/board/btn-close-dropbox.svg +3 -0
  47. package/icons/board/btn-edit-hover.svg +4 -0
  48. package/icons/board/btn-edit.svg +4 -0
  49. package/icons/board/btn-favorite-hover-on.svg +4 -0
  50. package/icons/board/btn-favorite-hover.svg +4 -0
  51. package/icons/board/btn-favorite-on.svg +4 -0
  52. package/icons/board/btn-favorite.svg +4 -0
  53. package/icons/board/btn-info-hover.svg +3 -0
  54. package/icons/board/btn-info.svg +3 -0
  55. package/icons/board/btn-open-dropbox.svg +3 -0
  56. package/icons/board/btn-users.svg +4 -0
  57. package/icons/board/favorite_black.svg +1 -0
  58. package/icons/group-bar/btn-add-list.png +0 -0
  59. package/icons/group-bar/btn-close-dropbox.png +0 -0
  60. package/icons/group-bar/btn-edit.png +0 -0
  61. package/icons/group-bar/btn-open-dropbox-color.png +0 -0
  62. package/icons/group-bar/btn-search-name.png +0 -0
  63. package/package.json +11 -7
  64. package/stories/restful-attachment-selector.stories.ts +113 -0
  65. package/.storybook/main.js +0 -3
  66. package/dist/stories/index.stories.d.ts +0 -33
  67. package/dist/stories/index.stories.js +0 -33
  68. package/dist/stories/index.stories.js.map +0 -1
  69. package/stories/index.stories.ts +0 -52
@@ -1 +1,3 @@
1
- export * from './etc';
1
+ export * from './restful-attachment-selector.js';
2
+ export * from './etc.js';
3
+ export * from './restful-input-fill-style.js';
@@ -1,2 +1,4 @@
1
- export * from './etc';
1
+ export * from './restful-attachment-selector.js';
2
+ export * from './etc.js';
3
+ export * from './restful-input-fill-style.js';
2
4
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/component/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAA","sourcesContent":["export * from './etc'\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/component/index.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAA;AAChD,cAAc,UAAU,CAAA;AACxB,cAAc,+BAA+B,CAAA","sourcesContent":["export * from './restful-attachment-selector.js'\nexport * from './etc.js'\nexport * from './restful-input-fill-style.js'\n"]}
@@ -0,0 +1,18 @@
1
+ import '@things-factory/image-uploader-ui/client/image-upload-previewer';
2
+ import './restful-file-selector';
3
+ import { LitElement } from 'lit';
4
+ declare const RestfulAttachmentCreationCard_base: (new (...args: any[]) => LitElement) & typeof LitElement;
5
+ export declare class RestfulAttachmentCreationCard extends RestfulAttachmentCreationCard_base {
6
+ static styles: import("lit").CSSResult[];
7
+ defaultCategory?: string;
8
+ categories: string[];
9
+ _files: any[];
10
+ _currentCategory?: string;
11
+ fileId?: string;
12
+ render(): import("lit-html").TemplateResult<1>;
13
+ firstUpdated(): void;
14
+ onClickFlip(e: Event): void;
15
+ onClickSubmit(e: Event): void;
16
+ reset(): void;
17
+ }
18
+ export {};
@@ -0,0 +1,264 @@
1
+ import { __decorate } from "tslib";
2
+ import '@things-factory/image-uploader-ui/client/image-upload-previewer';
3
+ import './restful-file-selector';
4
+ import { LitElement, html, css, unsafeCSS } from 'lit';
5
+ import { customElement, property } from 'lit/decorators.js';
6
+ import { i18next, localize } from '@operato/i18n';
7
+ import { FileDropHelper } from '@operato/utils';
8
+ const btnAddBoard = require('../../../icons/board/btn-add-board.svg');
9
+ let RestfulAttachmentCreationCard = class RestfulAttachmentCreationCard extends localize(i18next)(LitElement) {
10
+ constructor() {
11
+ super(...arguments);
12
+ this.categories = [];
13
+ this._files = [];
14
+ }
15
+ render() {
16
+ var categories = this.categories || [];
17
+ return html `
18
+ <div @click=${(e) => this.onClickFlip(e)} front>
19
+ <i class="btn-add-board"></i>
20
+ ${i18next.t('text.create attachment')}
21
+ </div>
22
+
23
+ <div @click=${(e) => this.onClickFlip(e)} back>
24
+ <form @submit=${(e) => this.onClickSubmit(e)}>
25
+ <label>${i18next.t('label.category')}</label>
26
+ <select
27
+ .value=${String(this.defaultCategory)}
28
+ name="category"
29
+ @change=${(e) => {
30
+ this._currentCategory = e.currentTarget.value;
31
+ }}
32
+ >
33
+ <option value="">--${i18next.t('text.please choose a category')}--</option>
34
+ ${categories.map(category => html `
35
+ <option value=${category} ?selected=${this.defaultCategory == category}>${category}</option>
36
+ `)}
37
+ </select>
38
+
39
+ <label>${i18next.t('label.file')}</label>
40
+ <restful-file-selector
41
+ name="file"
42
+ label=${String(i18next.t('label.select file'))}
43
+ accept="${this._currentCategory || '*'}/*"
44
+ multiple
45
+ @file-change=${(e) => {
46
+ this.fileId = e.detail.fileId;
47
+ this._files = Array.from(e.detail.files);
48
+ }}
49
+ ></restful-file-selector>
50
+
51
+ <div id="thumbnail-area">
52
+ ${this._files.map(file => html ` <image-upload-previewer .file=${file}></image-upload-previewer> `)}
53
+ </div>
54
+
55
+ <input type="submit" value=${String(i18next.t('button.create'))} />
56
+ </form>
57
+ </div>
58
+ `;
59
+ }
60
+ firstUpdated() {
61
+ FileDropHelper.set(this);
62
+ }
63
+ onClickFlip(e) {
64
+ const currentTarget = e.currentTarget;
65
+ const target = e.target;
66
+ if (currentTarget.hasAttribute('front') ||
67
+ (currentTarget.hasAttribute('back') && target.tagName != 'INPUT' && target.tagName != 'SELECT')) {
68
+ this.classList.toggle('flipped');
69
+ }
70
+ e.stopPropagation();
71
+ }
72
+ onClickSubmit(e) {
73
+ e.preventDefault();
74
+ e.stopPropagation();
75
+ var form = e.target;
76
+ var category = form.elements['category'].value;
77
+ var files = this._files;
78
+ var fileId = this.fileId;
79
+ const extension = fileId === null || fileId === void 0 ? void 0 : fileId.substring(fileId.length - 3);
80
+ if (!extension || extension !== (extension === null || extension === void 0 ? void 0 : extension.toLowerCase())) {
81
+ document.dispatchEvent(new CustomEvent('notify', {
82
+ detail: {
83
+ level: 'error',
84
+ message: 'Error : File extension is not available.',
85
+ ex: 'Error : File extension is not available.'
86
+ }
87
+ }));
88
+ return;
89
+ }
90
+ this.dispatchEvent(new CustomEvent('create-attachment', {
91
+ detail: {
92
+ category,
93
+ files,
94
+ fileId
95
+ }
96
+ }));
97
+ }
98
+ reset() {
99
+ var form = this.renderRoot.querySelector('form');
100
+ if (form) {
101
+ form.reset();
102
+ this._files = [];
103
+ }
104
+ this.classList.remove('flipped');
105
+ }
106
+ };
107
+ RestfulAttachmentCreationCard.styles = [
108
+ css `
109
+ :host {
110
+ position: relative;
111
+
112
+ padding: 0;
113
+ margin: 0;
114
+ height: 100%;
115
+
116
+ -webkit-transform-style: preserve-3d;
117
+ transform-style: preserve-3d;
118
+ -webkit-transition: all 0.5s ease-in-out;
119
+ transition: all 0.5s ease-in-out;
120
+ box-shadow: var(--box-shadow);
121
+ }
122
+
123
+ :host(.flipped) {
124
+ -webkit-transform: var(--card-list-flip-transform);
125
+ transform: var(--card-list-flip-transform);
126
+ }
127
+
128
+ [front],
129
+ [back] {
130
+ position: absolute;
131
+
132
+ width: 100%;
133
+ height: 100%;
134
+ margin: 0;
135
+ padding: 0;
136
+
137
+ border: var(--card-list-create-border);
138
+ border-radius: var(--card-list-create-border-radius);
139
+
140
+ background-color: #fff;
141
+
142
+ -webkit-backface-visibility: hidden;
143
+ backface-visibility: hidden;
144
+ }
145
+
146
+ [front] {
147
+ text-align: center;
148
+ font-size: 0.8em;
149
+ color: var(--card-list-create-color);
150
+ text-transform: capitalize;
151
+ }
152
+
153
+ :host(.candrop) [front],
154
+ :host(.candrop) [back] {
155
+ border-width: 2px;
156
+ background-color: #fffde9;
157
+ }
158
+
159
+ [front] mwc-icon {
160
+ margin-top: 55px;
161
+ display: block;
162
+ font-size: 3.5em;
163
+ color: var(--card-list-create-icon-color);
164
+ }
165
+
166
+ [back] {
167
+ -webkit-transform: var(--card-list-flip-transform);
168
+ transform: var(--card-list-flip-transform);
169
+ }
170
+
171
+ [back] form {
172
+ padding: var(--card-list-create-form-padding);
173
+ width: 100%;
174
+ height: 100%;
175
+ box-sizing: border-box;
176
+ display: grid;
177
+ grid-template-columns: repeat(10, 1fr);
178
+ grid-template-rows: min-content min-content 1fr min-content;
179
+ grid-row-gap: 7px;
180
+ justify-content: center;
181
+ align-items: center;
182
+ }
183
+
184
+ [back] form label {
185
+ grid-column: span 4;
186
+ font: var(--card-list-create-label-font);
187
+ color: var(--card-list-create-label-color);
188
+ }
189
+
190
+ [back] form input,
191
+ [back] form select {
192
+ grid-column: span 6;
193
+ background-color: #fff;
194
+ border: var(--card-list-create-input-border);
195
+ border-radius: var(--card-list-create-input-border-radius);
196
+ padding: var(--card-list-create-input-padding);
197
+ font: var(--card-list-create-input-font);
198
+ color: var(--card-list-create-input-color);
199
+ }
200
+
201
+ restful-file-selector {
202
+ grid-column: span 6;
203
+ font: var(--card-list-create-input-font);
204
+ border: none;
205
+ box-sizing: border-box;
206
+ padding: 0;
207
+ }
208
+
209
+ #thumbnail-area {
210
+ grid-column: span 10;
211
+ align-self: stretch;
212
+ text-align: center;
213
+ overflow: hidden;
214
+ overflow-x: auto;
215
+ white-space: nowrap;
216
+ }
217
+
218
+ image-upload-previewer {
219
+ display: inline-block;
220
+ height: 100%;
221
+ }
222
+
223
+ [back] input[type='submit'] {
224
+ background-color: var(--button-background-color) !important;
225
+ margin: var(--button-margin);
226
+ font: var(--button-font);
227
+ color: var(--button-color) !important;
228
+ border-radius: var(--button-radius);
229
+ border: var(--button-border);
230
+ grid-column: span 10;
231
+ grid-row: auto / -1;
232
+ margin: 0;
233
+ }
234
+
235
+ .btn-add-board {
236
+ width: 3.8em;
237
+ height: 3.8em;
238
+ margin: auto;
239
+ margin-top: 20%;
240
+ background: url(${unsafeCSS(btnAddBoard)}) no-repeat;
241
+ display: block;
242
+ }
243
+ `
244
+ ];
245
+ __decorate([
246
+ property({ type: String })
247
+ ], RestfulAttachmentCreationCard.prototype, "defaultCategory", void 0);
248
+ __decorate([
249
+ property({ type: Array })
250
+ ], RestfulAttachmentCreationCard.prototype, "categories", void 0);
251
+ __decorate([
252
+ property({ type: Array })
253
+ ], RestfulAttachmentCreationCard.prototype, "_files", void 0);
254
+ __decorate([
255
+ property({ type: String })
256
+ ], RestfulAttachmentCreationCard.prototype, "_currentCategory", void 0);
257
+ __decorate([
258
+ property({ type: String })
259
+ ], RestfulAttachmentCreationCard.prototype, "fileId", void 0);
260
+ RestfulAttachmentCreationCard = __decorate([
261
+ customElement('restful-attachment-creation-card')
262
+ ], RestfulAttachmentCreationCard);
263
+ export { RestfulAttachmentCreationCard };
264
+ //# sourceMappingURL=restful-attachment-creation-card.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"restful-attachment-creation-card.js","sourceRoot":"","sources":["../../../src/component/restful-attachment-creation-card.ts"],"names":[],"mappings":"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","sourcesContent":["import '@things-factory/image-uploader-ui/client/image-upload-previewer'\nimport './restful-file-selector'\n\nimport { LitElement, html, css, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { FileDropHelper } from '@operato/utils'\n\nconst btnAddBoard = require('../../../icons/board/btn-add-board.svg')\n\n@customElement('restful-attachment-creation-card')\nexport class RestfulAttachmentCreationCard extends localize(i18next)(LitElement) {\n static styles = [\n css`\n :host {\n position: relative;\n\n padding: 0;\n margin: 0;\n height: 100%;\n\n -webkit-transform-style: preserve-3d;\n transform-style: preserve-3d;\n -webkit-transition: all 0.5s ease-in-out;\n transition: all 0.5s ease-in-out;\n box-shadow: var(--box-shadow);\n }\n\n :host(.flipped) {\n -webkit-transform: var(--card-list-flip-transform);\n transform: var(--card-list-flip-transform);\n }\n\n [front],\n [back] {\n position: absolute;\n\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n\n border: var(--card-list-create-border);\n border-radius: var(--card-list-create-border-radius);\n\n background-color: #fff;\n\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n }\n\n [front] {\n text-align: center;\n font-size: 0.8em;\n color: var(--card-list-create-color);\n text-transform: capitalize;\n }\n\n :host(.candrop) [front],\n :host(.candrop) [back] {\n border-width: 2px;\n background-color: #fffde9;\n }\n\n [front] mwc-icon {\n margin-top: 55px;\n display: block;\n font-size: 3.5em;\n color: var(--card-list-create-icon-color);\n }\n\n [back] {\n -webkit-transform: var(--card-list-flip-transform);\n transform: var(--card-list-flip-transform);\n }\n\n [back] form {\n padding: var(--card-list-create-form-padding);\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n display: grid;\n grid-template-columns: repeat(10, 1fr);\n grid-template-rows: min-content min-content 1fr min-content;\n grid-row-gap: 7px;\n justify-content: center;\n align-items: center;\n }\n\n [back] form label {\n grid-column: span 4;\n font: var(--card-list-create-label-font);\n color: var(--card-list-create-label-color);\n }\n\n [back] form input,\n [back] form select {\n grid-column: span 6;\n background-color: #fff;\n border: var(--card-list-create-input-border);\n border-radius: var(--card-list-create-input-border-radius);\n padding: var(--card-list-create-input-padding);\n font: var(--card-list-create-input-font);\n color: var(--card-list-create-input-color);\n }\n\n restful-file-selector {\n grid-column: span 6;\n font: var(--card-list-create-input-font);\n border: none;\n box-sizing: border-box;\n padding: 0;\n }\n\n #thumbnail-area {\n grid-column: span 10;\n align-self: stretch;\n text-align: center;\n overflow: hidden;\n overflow-x: auto;\n white-space: nowrap;\n }\n\n image-upload-previewer {\n display: inline-block;\n height: 100%;\n }\n\n [back] input[type='submit'] {\n background-color: var(--button-background-color) !important;\n margin: var(--button-margin);\n font: var(--button-font);\n color: var(--button-color) !important;\n border-radius: var(--button-radius);\n border: var(--button-border);\n grid-column: span 10;\n grid-row: auto / -1;\n margin: 0;\n }\n\n .btn-add-board {\n width: 3.8em;\n height: 3.8em;\n margin: auto;\n margin-top: 20%;\n background: url(${unsafeCSS(btnAddBoard)}) no-repeat;\n display: block;\n }\n `\n ]\n\n @property({ type: String }) defaultCategory?: string\n @property({ type: Array }) categories: string[] = []\n @property({ type: Array }) _files: any[] = []\n @property({ type: String }) _currentCategory?: string\n @property({ type: String }) fileId?: string\n\n render() {\n var categories = this.categories || []\n\n return html`\n <div @click=${(e: Event) => this.onClickFlip(e)} front>\n <i class=\"btn-add-board\"></i>\n ${i18next.t('text.create attachment')}\n </div>\n\n <div @click=${(e: Event) => this.onClickFlip(e)} back>\n <form @submit=${(e: Event) => this.onClickSubmit(e)}>\n <label>${i18next.t('label.category')}</label>\n <select\n .value=${String(this.defaultCategory)}\n name=\"category\"\n @change=${(e: Event) => {\n this._currentCategory = (e.currentTarget as HTMLSelectElement).value\n }}\n >\n <option value=\"\">--${i18next.t('text.please choose a category')}--</option>\n ${categories.map(\n category => html`\n <option value=${category} ?selected=${this.defaultCategory == category}>${category}</option>\n `\n )}\n </select>\n\n <label>${i18next.t('label.file')}</label>\n <restful-file-selector\n name=\"file\"\n label=${String(i18next.t('label.select file'))}\n accept=\"${this._currentCategory || '*'}/*\"\n multiple\n @file-change=${(e: Event) => {\n this.fileId = (e as CustomEvent).detail.fileId\n this._files = Array.from((e as CustomEvent).detail.files)\n }}\n ></restful-file-selector>\n\n <div id=\"thumbnail-area\">\n ${this._files.map(file => html` <image-upload-previewer .file=${file}></image-upload-previewer> `)}\n </div>\n\n <input type=\"submit\" value=${String(i18next.t('button.create'))} />\n </form>\n </div>\n `\n }\n\n firstUpdated() {\n FileDropHelper.set(this)\n }\n\n onClickFlip(e: Event) {\n const currentTarget = e.currentTarget as HTMLElement\n const target = e.target as HTMLElement\n\n if (\n currentTarget.hasAttribute('front') ||\n (currentTarget.hasAttribute('back') && target.tagName != 'INPUT' && target.tagName != 'SELECT')\n ) {\n this.classList.toggle('flipped')\n }\n\n e.stopPropagation()\n }\n\n onClickSubmit(e: Event) {\n e.preventDefault()\n e.stopPropagation()\n\n var form = e.target as HTMLFormElement\n\n var category = ((form.elements as any)['category'] as HTMLSelectElement).value\n var files = this._files\n var fileId = this.fileId\n\n const extension = fileId?.substring(fileId.length - 3)\n if (!extension || extension !== extension?.toLowerCase()) {\n document.dispatchEvent(\n new CustomEvent('notify', {\n detail: {\n level: 'error',\n message: 'Error : File extension is not available.',\n ex: 'Error : File extension is not available.'\n }\n })\n )\n return\n }\n\n this.dispatchEvent(\n new CustomEvent('create-attachment', {\n detail: {\n category,\n files,\n fileId\n }\n })\n )\n }\n\n reset() {\n var form = this.renderRoot.querySelector('form')\n if (form) {\n form.reset()\n this._files = []\n }\n\n this.classList.remove('flipped')\n }\n}\n"]}
@@ -0,0 +1,36 @@
1
+ import './restful-attachment-creation-card.js';
2
+ import { LitElement, PropertyValues } from 'lit';
3
+ import { RestfulAttachmentCreationCard } from './restful-attachment-creation-card.js';
4
+ declare const RestfulAttachmentSelector_base: (new (...args: any[]) => LitElement) & typeof LitElement;
5
+ export declare class RestfulAttachmentSelector extends RestfulAttachmentSelector_base {
6
+ static styles: import("lit").CSSResult[];
7
+ categories: string[];
8
+ attachments: any[];
9
+ category?: string;
10
+ _page: number;
11
+ _total: number;
12
+ creatable?: boolean;
13
+ selectBoxToggle?: string | null;
14
+ btnDropBoxIcon: string;
15
+ userName?: string;
16
+ main: HTMLDivElement;
17
+ creationCard: RestfulAttachmentCreationCard;
18
+ render(): import("lit-html").TemplateResult<1>;
19
+ toggleSelectBox(): void;
20
+ firstUpdated(): Promise<void>;
21
+ updated(changed: PropertyValues<this>): void;
22
+ onClickSelect(attachment: any): void;
23
+ onAttachmentDropped(e: Event): Promise<void>;
24
+ onCreateAttachment(e: Event): Promise<void>;
25
+ onDeleteAttachment(id: string): Promise<void>;
26
+ refreshAttachments(): Promise<void>;
27
+ appendAttachments(): Promise<void>;
28
+ getAttachments({ page, limit }?: {
29
+ page?: number | undefined;
30
+ limit?: number | undefined;
31
+ }): Promise<any>;
32
+ createAttachments(category: string, files: any[], fileId?: string): Promise<void>;
33
+ deleteAttachment(id: string): Promise<void>;
34
+ copy(copied: any): Promise<void>;
35
+ }
36
+ export {};