@skyux/forms 5.9.4 → 6.0.0-beta.10

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 (168) hide show
  1. package/documentation.json +693 -693
  2. package/esm2020/index.mjs +43 -0
  3. package/esm2020/lib/modules/character-counter/character-counter-indicator.component.mjs +32 -0
  4. package/esm2020/lib/modules/character-counter/character-counter.directive.mjs +84 -0
  5. package/esm2020/lib/modules/character-counter/character-counter.module.mjs +46 -0
  6. package/esm2020/lib/modules/checkbox/checkbox-change.mjs +6 -0
  7. package/esm2020/lib/modules/checkbox/checkbox-label.component.mjs +14 -0
  8. package/esm2020/lib/modules/checkbox/checkbox-required-validator.directive.mjs +30 -0
  9. package/esm2020/lib/modules/checkbox/checkbox.component.mjs +237 -0
  10. package/esm2020/lib/modules/checkbox/checkbox.module.mjs +34 -0
  11. package/esm2020/lib/modules/file-attachment/file-attachment-label.component.mjs +14 -0
  12. package/esm2020/lib/modules/file-attachment/file-attachment.component.mjs +326 -0
  13. package/esm2020/lib/modules/file-attachment/file-attachment.service.mjs +94 -0
  14. package/esm2020/lib/modules/file-attachment/file-attachments.module.mjs +68 -0
  15. package/esm2020/lib/modules/file-attachment/file-drop.component.mjs +216 -0
  16. package/esm2020/lib/modules/file-attachment/file-item-error-type.mjs +2 -0
  17. package/esm2020/lib/modules/file-attachment/file-item.component.mjs +112 -0
  18. package/esm2020/lib/modules/file-attachment/file-item.mjs +2 -0
  19. package/esm2020/lib/modules/file-attachment/file-item.service.mjs +70 -0
  20. package/esm2020/lib/modules/file-attachment/file-link.mjs +2 -0
  21. package/esm2020/lib/modules/file-attachment/file-size.pipe.mjs +58 -0
  22. package/esm2020/lib/modules/file-attachment/types/file-attachment-change.mjs +2 -0
  23. package/esm2020/lib/modules/file-attachment/types/file-attachment-click.mjs +2 -0
  24. package/esm2020/lib/modules/file-attachment/types/file-drop-change.mjs +2 -0
  25. package/esm2020/lib/modules/input-box/input-box-adapter.service.mjs +35 -0
  26. package/esm2020/lib/modules/input-box/input-box-host.service.mjs +19 -0
  27. package/esm2020/lib/modules/input-box/input-box-populate-args.mjs +2 -0
  28. package/esm2020/lib/modules/input-box/input-box.component.mjs +89 -0
  29. package/esm2020/lib/modules/input-box/input-box.module.mjs +19 -0
  30. package/esm2020/lib/modules/radio/radio-group.component.mjs +220 -0
  31. package/esm2020/lib/modules/radio/radio-label.component.mjs +23 -0
  32. package/esm2020/lib/modules/radio/radio.component.mjs +254 -0
  33. package/esm2020/lib/modules/radio/radio.module.mjs +28 -0
  34. package/esm2020/lib/modules/radio/types/radio-change.mjs +2 -0
  35. package/esm2020/lib/modules/selection-box/selection-box-adapter.service.mjs +123 -0
  36. package/esm2020/lib/modules/selection-box/selection-box-description.component.mjs +14 -0
  37. package/esm2020/lib/modules/selection-box/selection-box-grid.component.mjs +128 -0
  38. package/esm2020/lib/modules/selection-box/selection-box-header.component.mjs +14 -0
  39. package/esm2020/lib/modules/selection-box/selection-box.component.mjs +101 -0
  40. package/esm2020/lib/modules/selection-box/selection-box.module.mjs +40 -0
  41. package/esm2020/lib/modules/selection-box/types/selection-box-grid-align-items-type.mjs +2 -0
  42. package/esm2020/lib/modules/selection-box/types/selection-box-grid-align-items.mjs +2 -0
  43. package/esm2020/lib/modules/shared/forms-utility.mjs +26 -0
  44. package/esm2020/lib/modules/shared/sky-forms-resources.module.mjs +89 -0
  45. package/esm2020/lib/modules/toggle-switch/toggle-switch-label.component.mjs +14 -0
  46. package/esm2020/lib/modules/toggle-switch/toggle-switch.component.mjs +151 -0
  47. package/esm2020/lib/modules/toggle-switch/toggle-switch.module.mjs +20 -0
  48. package/esm2020/lib/modules/toggle-switch/types/toggle-switch-change.mjs +2 -0
  49. package/esm2020/skyux-forms.mjs +5 -0
  50. package/esm2020/testing/checkbox-fixture.mjs +88 -0
  51. package/esm2020/testing/public-api.mjs +2 -0
  52. package/esm2020/testing/skyux-forms-testing.mjs +5 -0
  53. package/fesm2015/{skyux-forms-testing.js → skyux-forms-testing.mjs} +1 -1
  54. package/fesm2015/skyux-forms-testing.mjs.map +1 -0
  55. package/fesm2015/skyux-forms.mjs +2684 -0
  56. package/fesm2015/skyux-forms.mjs.map +1 -0
  57. package/{esm2015/testing/checkbox-fixture.js → fesm2020/skyux-forms-testing.mjs} +9 -2
  58. package/fesm2020/skyux-forms-testing.mjs.map +1 -0
  59. package/fesm2020/skyux-forms.mjs +2676 -0
  60. package/fesm2020/skyux-forms.mjs.map +1 -0
  61. package/package.json +39 -15
  62. package/testing/package.json +5 -5
  63. package/bundles/skyux-forms-testing.umd.js +0 -123
  64. package/bundles/skyux-forms.umd.js +0 -3430
  65. package/esm2015/index.js +0 -43
  66. package/esm2015/index.js.map +0 -1
  67. package/esm2015/lib/modules/character-counter/character-counter-indicator.component.js +0 -37
  68. package/esm2015/lib/modules/character-counter/character-counter-indicator.component.js.map +0 -1
  69. package/esm2015/lib/modules/character-counter/character-counter.directive.js +0 -84
  70. package/esm2015/lib/modules/character-counter/character-counter.directive.js.map +0 -1
  71. package/esm2015/lib/modules/character-counter/character-counter.module.js +0 -46
  72. package/esm2015/lib/modules/character-counter/character-counter.module.js.map +0 -1
  73. package/esm2015/lib/modules/checkbox/checkbox-change.js +0 -6
  74. package/esm2015/lib/modules/checkbox/checkbox-change.js.map +0 -1
  75. package/esm2015/lib/modules/checkbox/checkbox-label.component.js +0 -17
  76. package/esm2015/lib/modules/checkbox/checkbox-label.component.js.map +0 -1
  77. package/esm2015/lib/modules/checkbox/checkbox-required-validator.directive.js +0 -32
  78. package/esm2015/lib/modules/checkbox/checkbox-required-validator.directive.js.map +0 -1
  79. package/esm2015/lib/modules/checkbox/checkbox.component.js +0 -241
  80. package/esm2015/lib/modules/checkbox/checkbox.component.js.map +0 -1
  81. package/esm2015/lib/modules/checkbox/checkbox.module.js +0 -34
  82. package/esm2015/lib/modules/checkbox/checkbox.module.js.map +0 -1
  83. package/esm2015/lib/modules/file-attachment/file-attachment-label.component.js +0 -19
  84. package/esm2015/lib/modules/file-attachment/file-attachment-label.component.js.map +0 -1
  85. package/esm2015/lib/modules/file-attachment/file-attachment.component.js +0 -335
  86. package/esm2015/lib/modules/file-attachment/file-attachment.component.js.map +0 -1
  87. package/esm2015/lib/modules/file-attachment/file-attachment.service.js +0 -94
  88. package/esm2015/lib/modules/file-attachment/file-attachment.service.js.map +0 -1
  89. package/esm2015/lib/modules/file-attachment/file-attachments.module.js +0 -68
  90. package/esm2015/lib/modules/file-attachment/file-attachments.module.js.map +0 -1
  91. package/esm2015/lib/modules/file-attachment/file-drop.component.js +0 -222
  92. package/esm2015/lib/modules/file-attachment/file-drop.component.js.map +0 -1
  93. package/esm2015/lib/modules/file-attachment/file-item-error-type.js +0 -2
  94. package/esm2015/lib/modules/file-attachment/file-item-error-type.js.map +0 -1
  95. package/esm2015/lib/modules/file-attachment/file-item.component.js +0 -116
  96. package/esm2015/lib/modules/file-attachment/file-item.component.js.map +0 -1
  97. package/esm2015/lib/modules/file-attachment/file-item.js +0 -2
  98. package/esm2015/lib/modules/file-attachment/file-item.js.map +0 -1
  99. package/esm2015/lib/modules/file-attachment/file-item.service.js +0 -72
  100. package/esm2015/lib/modules/file-attachment/file-item.service.js.map +0 -1
  101. package/esm2015/lib/modules/file-attachment/file-link.js +0 -2
  102. package/esm2015/lib/modules/file-attachment/file-link.js.map +0 -1
  103. package/esm2015/lib/modules/file-attachment/file-size.pipe.js +0 -60
  104. package/esm2015/lib/modules/file-attachment/file-size.pipe.js.map +0 -1
  105. package/esm2015/lib/modules/file-attachment/types/file-attachment-change.js +0 -2
  106. package/esm2015/lib/modules/file-attachment/types/file-attachment-change.js.map +0 -1
  107. package/esm2015/lib/modules/file-attachment/types/file-attachment-click.js +0 -2
  108. package/esm2015/lib/modules/file-attachment/types/file-attachment-click.js.map +0 -1
  109. package/esm2015/lib/modules/file-attachment/types/file-drop-change.js +0 -2
  110. package/esm2015/lib/modules/file-attachment/types/file-drop-change.js.map +0 -1
  111. package/esm2015/lib/modules/input-box/input-box-adapter.service.js +0 -35
  112. package/esm2015/lib/modules/input-box/input-box-adapter.service.js.map +0 -1
  113. package/esm2015/lib/modules/input-box/input-box-host.service.js +0 -19
  114. package/esm2015/lib/modules/input-box/input-box-host.service.js.map +0 -1
  115. package/esm2015/lib/modules/input-box/input-box-populate-args.js +0 -2
  116. package/esm2015/lib/modules/input-box/input-box-populate-args.js.map +0 -1
  117. package/esm2015/lib/modules/input-box/input-box.component.js +0 -97
  118. package/esm2015/lib/modules/input-box/input-box.component.js.map +0 -1
  119. package/esm2015/lib/modules/input-box/input-box.module.js +0 -19
  120. package/esm2015/lib/modules/input-box/input-box.module.js.map +0 -1
  121. package/esm2015/lib/modules/radio/radio-group.component.js +0 -223
  122. package/esm2015/lib/modules/radio/radio-group.component.js.map +0 -1
  123. package/esm2015/lib/modules/radio/radio-label.component.js +0 -26
  124. package/esm2015/lib/modules/radio/radio-label.component.js.map +0 -1
  125. package/esm2015/lib/modules/radio/radio.component.js +0 -262
  126. package/esm2015/lib/modules/radio/radio.component.js.map +0 -1
  127. package/esm2015/lib/modules/radio/radio.module.js +0 -28
  128. package/esm2015/lib/modules/radio/radio.module.js.map +0 -1
  129. package/esm2015/lib/modules/radio/types/radio-change.js +0 -2
  130. package/esm2015/lib/modules/radio/types/radio-change.js.map +0 -1
  131. package/esm2015/lib/modules/selection-box/selection-box-adapter.service.js +0 -124
  132. package/esm2015/lib/modules/selection-box/selection-box-adapter.service.js.map +0 -1
  133. package/esm2015/lib/modules/selection-box/selection-box-description.component.js +0 -17
  134. package/esm2015/lib/modules/selection-box/selection-box-description.component.js.map +0 -1
  135. package/esm2015/lib/modules/selection-box/selection-box-grid.component.js +0 -134
  136. package/esm2015/lib/modules/selection-box/selection-box-grid.component.js.map +0 -1
  137. package/esm2015/lib/modules/selection-box/selection-box-header.component.js +0 -17
  138. package/esm2015/lib/modules/selection-box/selection-box-header.component.js.map +0 -1
  139. package/esm2015/lib/modules/selection-box/selection-box.component.js +0 -107
  140. package/esm2015/lib/modules/selection-box/selection-box.component.js.map +0 -1
  141. package/esm2015/lib/modules/selection-box/selection-box.module.js +0 -40
  142. package/esm2015/lib/modules/selection-box/selection-box.module.js.map +0 -1
  143. package/esm2015/lib/modules/selection-box/types/selection-box-grid-align-items-type.js +0 -2
  144. package/esm2015/lib/modules/selection-box/types/selection-box-grid-align-items-type.js.map +0 -1
  145. package/esm2015/lib/modules/selection-box/types/selection-box-grid-align-items.js +0 -2
  146. package/esm2015/lib/modules/selection-box/types/selection-box-grid-align-items.js.map +0 -1
  147. package/esm2015/lib/modules/shared/forms-utility.js +0 -26
  148. package/esm2015/lib/modules/shared/forms-utility.js.map +0 -1
  149. package/esm2015/lib/modules/shared/sky-forms-resources.module.js +0 -89
  150. package/esm2015/lib/modules/shared/sky-forms-resources.module.js.map +0 -1
  151. package/esm2015/lib/modules/toggle-switch/toggle-switch-label.component.js +0 -18
  152. package/esm2015/lib/modules/toggle-switch/toggle-switch-label.component.js.map +0 -1
  153. package/esm2015/lib/modules/toggle-switch/toggle-switch.component.js +0 -159
  154. package/esm2015/lib/modules/toggle-switch/toggle-switch.component.js.map +0 -1
  155. package/esm2015/lib/modules/toggle-switch/toggle-switch.module.js +0 -20
  156. package/esm2015/lib/modules/toggle-switch/toggle-switch.module.js.map +0 -1
  157. package/esm2015/lib/modules/toggle-switch/types/toggle-switch-change.js +0 -2
  158. package/esm2015/lib/modules/toggle-switch/types/toggle-switch-change.js.map +0 -1
  159. package/esm2015/skyux-forms.js +0 -5
  160. package/esm2015/skyux-forms.js.map +0 -1
  161. package/esm2015/testing/checkbox-fixture.js.map +0 -1
  162. package/esm2015/testing/public-api.js +0 -2
  163. package/esm2015/testing/public-api.js.map +0 -1
  164. package/esm2015/testing/skyux-forms-testing.js +0 -5
  165. package/esm2015/testing/skyux-forms-testing.js.map +0 -1
  166. package/fesm2015/skyux-forms-testing.js.map +0 -1
  167. package/fesm2015/skyux-forms.js +0 -2771
  168. package/fesm2015/skyux-forms.js.map +0 -1
@@ -1,68 +0,0 @@
1
- import { CommonModule, DecimalPipe } from '@angular/common';
2
- import { NgModule } from '@angular/core';
3
- import { FormsModule } from '@angular/forms';
4
- import { SkyI18nModule } from '@skyux/i18n';
5
- import { SkyIconModule } from '@skyux/indicators';
6
- import { SkyThemeModule } from '@skyux/theme';
7
- import { SkyFormsResourcesModule } from '../shared/sky-forms-resources.module';
8
- import { SkyFileAttachmentLabelComponent } from './file-attachment-label.component';
9
- import { SkyFileAttachmentComponent } from './file-attachment.component';
10
- import { SkyFileDropComponent } from './file-drop.component';
11
- import { SkyFileItemComponent } from './file-item.component';
12
- import { SkyFileItemService } from './file-item.service';
13
- import { SkyFileSizePipe } from './file-size.pipe';
14
- import * as i0 from "@angular/core";
15
- export class SkyFileAttachmentsModule {
16
- }
17
- SkyFileAttachmentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFileAttachmentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
18
- SkyFileAttachmentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFileAttachmentsModule, declarations: [SkyFileAttachmentComponent,
19
- SkyFileAttachmentLabelComponent,
20
- SkyFileDropComponent,
21
- SkyFileItemComponent,
22
- SkyFileSizePipe], imports: [CommonModule,
23
- FormsModule,
24
- SkyFormsResourcesModule,
25
- SkyI18nModule,
26
- SkyIconModule,
27
- SkyThemeModule], exports: [SkyFileAttachmentComponent,
28
- SkyFileAttachmentLabelComponent,
29
- SkyFileDropComponent,
30
- SkyFileItemComponent,
31
- SkyFileSizePipe] });
32
- SkyFileAttachmentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFileAttachmentsModule, providers: [DecimalPipe, SkyFileItemService], imports: [[
33
- CommonModule,
34
- FormsModule,
35
- SkyFormsResourcesModule,
36
- SkyI18nModule,
37
- SkyIconModule,
38
- SkyThemeModule,
39
- ]] });
40
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFileAttachmentsModule, decorators: [{
41
- type: NgModule,
42
- args: [{
43
- declarations: [
44
- SkyFileAttachmentComponent,
45
- SkyFileAttachmentLabelComponent,
46
- SkyFileDropComponent,
47
- SkyFileItemComponent,
48
- SkyFileSizePipe,
49
- ],
50
- imports: [
51
- CommonModule,
52
- FormsModule,
53
- SkyFormsResourcesModule,
54
- SkyI18nModule,
55
- SkyIconModule,
56
- SkyThemeModule,
57
- ],
58
- exports: [
59
- SkyFileAttachmentComponent,
60
- SkyFileAttachmentLabelComponent,
61
- SkyFileDropComponent,
62
- SkyFileItemComponent,
63
- SkyFileSizePipe,
64
- ],
65
- providers: [DecimalPipe, SkyFileItemService],
66
- }]
67
- }] });
68
- //# sourceMappingURL=file-attachments.module.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"file-attachments.module.js","sourceRoot":"","sources":["../../../../../../../../libs/components/forms/src/lib/modules/file-attachment/file-attachments.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,EAAE,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAE/E,OAAO,EAAE,+BAA+B,EAAE,MAAM,mCAAmC,CAAC;AACpF,OAAO,EAAE,0BAA0B,EAAE,MAAM,6BAA6B,CAAC;AACzE,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;;AA2BnD,MAAM,OAAO,wBAAwB;;sHAAxB,wBAAwB;uHAAxB,wBAAwB,iBAvBjC,0BAA0B;QAC1B,+BAA+B;QAC/B,oBAAoB;QACpB,oBAAoB;QACpB,eAAe,aAGf,YAAY;QACZ,WAAW;QACX,uBAAuB;QACvB,aAAa;QACb,aAAa;QACb,cAAc,aAGd,0BAA0B;QAC1B,+BAA+B;QAC/B,oBAAoB;QACpB,oBAAoB;QACpB,eAAe;uHAIN,wBAAwB,aAFxB,CAAC,WAAW,EAAE,kBAAkB,CAAC,YAfnC;YACP,YAAY;YACZ,WAAW;YACX,uBAAuB;YACvB,aAAa;YACb,aAAa;YACb,cAAc;SACf;4FAUU,wBAAwB;kBAzBpC,QAAQ;mBAAC;oBACR,YAAY,EAAE;wBACZ,0BAA0B;wBAC1B,+BAA+B;wBAC/B,oBAAoB;wBACpB,oBAAoB;wBACpB,eAAe;qBAChB;oBACD,OAAO,EAAE;wBACP,YAAY;wBACZ,WAAW;wBACX,uBAAuB;wBACvB,aAAa;wBACb,aAAa;wBACb,cAAc;qBACf;oBACD,OAAO,EAAE;wBACP,0BAA0B;wBAC1B,+BAA+B;wBAC/B,oBAAoB;wBACpB,oBAAoB;wBACpB,eAAe;qBAChB;oBACD,SAAS,EAAE,CAAC,WAAW,EAAE,kBAAkB,CAAC;iBAC7C","sourcesContent":["import { CommonModule, DecimalPipe } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { SkyI18nModule } from '@skyux/i18n';\nimport { SkyIconModule } from '@skyux/indicators';\nimport { SkyThemeModule } from '@skyux/theme';\n\nimport { SkyFormsResourcesModule } from '../shared/sky-forms-resources.module';\n\nimport { SkyFileAttachmentLabelComponent } from './file-attachment-label.component';\nimport { SkyFileAttachmentComponent } from './file-attachment.component';\nimport { SkyFileDropComponent } from './file-drop.component';\nimport { SkyFileItemComponent } from './file-item.component';\nimport { SkyFileItemService } from './file-item.service';\nimport { SkyFileSizePipe } from './file-size.pipe';\n\n@NgModule({\n declarations: [\n SkyFileAttachmentComponent,\n SkyFileAttachmentLabelComponent,\n SkyFileDropComponent,\n SkyFileItemComponent,\n SkyFileSizePipe,\n ],\n imports: [\n CommonModule,\n FormsModule,\n SkyFormsResourcesModule,\n SkyI18nModule,\n SkyIconModule,\n SkyThemeModule,\n ],\n exports: [\n SkyFileAttachmentComponent,\n SkyFileAttachmentLabelComponent,\n SkyFileDropComponent,\n SkyFileItemComponent,\n SkyFileSizePipe,\n ],\n providers: [DecimalPipe, SkyFileItemService],\n})\nexport class SkyFileAttachmentsModule {}\n"]}
@@ -1,222 +0,0 @@
1
- import { Component, ElementRef, EventEmitter, Input, Output, ViewChild, } from '@angular/core';
2
- import { SkyFileAttachmentService } from './file-attachment.service';
3
- import * as i0 from "@angular/core";
4
- import * as i1 from "./file-attachment.service";
5
- import * as i2 from "@skyux/indicators";
6
- import * as i3 from "@angular/common";
7
- import * as i4 from "@angular/forms";
8
- import * as i5 from "@skyux/i18n";
9
- /**
10
- * Provides an element to attach multiple files where users can browse or drag and drop local files
11
- * or provide hyperlinks to external files. You can leave the contents of the component
12
- * blank to display the drop zone's default UI, or you can specify custom content to
13
- * display instead. When the module initializes, it disables the ability to drag and
14
- * drop files for the entire window to prevent the browser from opening files that are
15
- * accidentally dropped outside the target zone. If you implement your own file drop functionality
16
- * outside of the file drop component, you can place the `sky-file-drop-target` CSS class
17
- * on the element that receives drop events to exempt it from the drop exclusion rule.
18
- */
19
- export class SkyFileDropComponent {
20
- constructor(fileAttachmentService) {
21
- this.fileAttachmentService = fileAttachmentService;
22
- /**
23
- * Fires when users add or remove files.
24
- */
25
- this.filesChanged = new EventEmitter();
26
- /**
27
- * Fires when the link input box triggers a blur event.
28
- */
29
- this.linkInputBlur = new EventEmitter();
30
- /**
31
- * Fires when users add or remove links.
32
- */
33
- this.linkChanged = new EventEmitter();
34
- /**
35
- * Specifies the minimum size in bytes for valid files.
36
- */
37
- this.minFileSize = 0;
38
- /**
39
- * Specifies the maximum size in bytes for valid files.
40
- */
41
- this.maxFileSize = 500000;
42
- /**
43
- * Indicates whether users can drag and drop multiple files at the same time.
44
- */
45
- this.multiple = true;
46
- /**
47
- * Indicates whether to disable the option to browse for files to attach.
48
- */
49
- this.noClick = false;
50
- /**
51
- * Indicates whether to display the option to attach files from URLs rather than from local devices.
52
- */
53
- this.allowLinks = false;
54
- this.rejectedOver = false;
55
- this.acceptedOver = false;
56
- }
57
- ngOnDestroy() {
58
- this.filesChanged.complete();
59
- this.linkChanged.complete();
60
- this.linkInputBlur.complete();
61
- }
62
- dropClicked() {
63
- if (!this.noClick) {
64
- this.inputEl.nativeElement.click();
65
- }
66
- }
67
- fileChangeEvent(fileChangeEvent) {
68
- this.handleFiles(fileChangeEvent.target.files);
69
- }
70
- fileDragEnter(dragEnterEvent) {
71
- // Save this target to know when the drag event leaves
72
- this.enterEventTarget = dragEnterEvent.target;
73
- dragEnterEvent.stopPropagation();
74
- dragEnterEvent.preventDefault();
75
- }
76
- fileDragOver(dragOverEvent) {
77
- const transfer = dragOverEvent.dataTransfer;
78
- dragOverEvent.stopPropagation();
79
- dragOverEvent.preventDefault();
80
- if (transfer) {
81
- if (transfer.items) {
82
- const files = transfer.items;
83
- for (let index = 0; index < files.length; index++) {
84
- const file = files[index];
85
- if (file.type &&
86
- this.fileAttachmentService.fileTypeRejected(file.type, this.acceptedTypes)) {
87
- this.rejectedOver = true;
88
- this.acceptedOver = false;
89
- return;
90
- }
91
- }
92
- if (files.length > 0 && !this.acceptedOver) {
93
- this.rejectedOver = false;
94
- this.acceptedOver = true;
95
- }
96
- } /* istanbul ignore next: untestable */
97
- else if (transfer.files) {
98
- // If the browser does not support DataTransfer.items,
99
- // defer file-type checking to drop handler.
100
- // https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/items#Browser_compatibility
101
- this.rejectedOver = false;
102
- this.acceptedOver = true;
103
- }
104
- }
105
- }
106
- fileDrop(dropEvent) {
107
- dropEvent.stopPropagation();
108
- dropEvent.preventDefault();
109
- this.enterEventTarget = undefined;
110
- this.rejectedOver = false;
111
- this.acceptedOver = false;
112
- if (dropEvent.dataTransfer && dropEvent.dataTransfer.files) {
113
- const hasDirectory = this.fileAttachmentService.hasDirectory(dropEvent.dataTransfer.files);
114
- const invalidNumberOfFiles = !this.multiple && dropEvent.dataTransfer.files.length > 1;
115
- if (hasDirectory || invalidNumberOfFiles) {
116
- return;
117
- }
118
- this.handleFiles(dropEvent.dataTransfer.files);
119
- }
120
- }
121
- fileDragLeave(dragLeaveEvent) {
122
- if (this.enterEventTarget === dragLeaveEvent.target) {
123
- this.rejectedOver = false;
124
- this.acceptedOver = false;
125
- }
126
- }
127
- addLinkEnter(event) {
128
- if (event.which === 13) {
129
- this.addLink(event);
130
- }
131
- }
132
- addLink(event) {
133
- event.preventDefault();
134
- this.linkChanged.emit({ url: this.linkUrl });
135
- this.linkUrl = undefined;
136
- }
137
- onLinkBlur() {
138
- this.linkInputBlur.emit();
139
- }
140
- emitFileChangeEvent(totalFiles, rejectedFileArray, validFileArray) {
141
- if (totalFiles === rejectedFileArray.length + validFileArray.length) {
142
- this.filesChanged.emit({
143
- files: validFileArray,
144
- rejectedFiles: rejectedFileArray,
145
- });
146
- this.inputEl.nativeElement.value = '';
147
- }
148
- }
149
- filesRejected(file, validFileArray, rejectedFileArray, totalFiles) {
150
- rejectedFileArray.push(file);
151
- this.emitFileChangeEvent(totalFiles, rejectedFileArray, validFileArray);
152
- }
153
- loadFile(fileDrop, file, validFileArray, rejectedFileArray, totalFiles) {
154
- const reader = new FileReader();
155
- reader.addEventListener('load', (event) => {
156
- file.url = event.target.result;
157
- validFileArray.push(file);
158
- fileDrop.emitFileChangeEvent(totalFiles, rejectedFileArray, validFileArray);
159
- });
160
- reader.addEventListener('error', (event) => {
161
- fileDrop.filesRejected(file, validFileArray, rejectedFileArray, totalFiles);
162
- });
163
- reader.addEventListener('abort', (event) => {
164
- fileDrop.filesRejected(file, validFileArray, rejectedFileArray, totalFiles);
165
- });
166
- reader.readAsDataURL(file.file);
167
- }
168
- handleFiles(files) {
169
- const validFileArray = [];
170
- const rejectedFileArray = [];
171
- const totalFiles = files.length;
172
- // tslint:disable-next-line: max-line-length
173
- const processedFiles = this.fileAttachmentService.checkFiles(files, this.minFileSize, this.maxFileSize, this.acceptedTypes, this.validateFn);
174
- for (const file of processedFiles) {
175
- if (file.errorType) {
176
- this.filesRejected(file, validFileArray, rejectedFileArray, totalFiles);
177
- }
178
- else {
179
- this.loadFile(this, file, validFileArray, rejectedFileArray, totalFiles);
180
- }
181
- }
182
- }
183
- }
184
- SkyFileDropComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFileDropComponent, deps: [{ token: i1.SkyFileAttachmentService }], target: i0.ɵɵFactoryTarget.Component });
185
- SkyFileDropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyFileDropComponent, selector: "sky-file-drop", inputs: { fileUploadAriaLabel: "fileUploadAriaLabel", linkUploadAriaLabel: "linkUploadAriaLabel", minFileSize: "minFileSize", maxFileSize: "maxFileSize", multiple: "multiple", validateFn: "validateFn", acceptedTypes: "acceptedTypes", noClick: "noClick", allowLinks: "allowLinks" }, outputs: { filesChanged: "filesChanged", linkInputBlur: "linkInputBlur", linkChanged: "linkChanged" }, providers: [SkyFileAttachmentService], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div\n class=\"sky-file-drop-row\"\n [ngClass]=\"{ 'sky-file-drop-allow-links': allowLinks }\"\n>\n <div\n class=\"sky-file-drop-col\"\n [ngClass]=\"{\n 'sky-file-drop-accept': acceptedOver,\n 'sky-file-drop-reject': rejectedOver\n }\"\n >\n <button\n class=\"sky-file-drop sky-file-drop-target\"\n type=\"button\"\n (click)=\"dropClicked()\"\n (dragover)=\"fileDragOver($event)\"\n (dragenter)=\"fileDragEnter($event)\"\n (dragleave)=\"fileDragLeave($event)\"\n (drop)=\"fileDrop($event)\"\n [attr.aria-label]=\"\n fileUploadAriaLabel ||\n ('skyux_file_attachment_file_upload_drag_or_click' | skyLibResources)\n \"\n ></button>\n\n <input\n tabindex=\"-1\"\n aria-hidden=\"true\"\n type=\"file\"\n class=\"sky-file-input-hidden\"\n [attr.multiple]=\"multiple ? multiple : null\"\n [attr.accept]=\"acceptedTypes ? acceptedTypes : null\"\n (change)=\"fileChangeEvent($event)\"\n #fileInput\n />\n\n <div\n class=\"sky-file-drop-contents sky-padding-even-default\"\n *ngIf=\"customEl.children.length === 0\"\n >\n <div class=\"sky-file-drop-contents-not-over\">\n <div class=\"sky-file-drop-text-header sky-headline\">\n {{\n 'skyux_file_attachment_file_upload_drag_file_here' | skyLibResources\n }}\n </div>\n <div class=\"sky-file-drop-text\">\n {{\n 'skyux_file_attachment_file_upload_or_click_to_browse'\n | skyLibResources\n }}\n </div>\n <sky-icon icon=\"cloud-upload\" class=\"sky-file-upload-icon\"></sky-icon>\n </div>\n\n <!-- This will appear when file is dragged over and is valid -->\n <div class=\"sky-file-drop-contents-accept\">\n <div class=\"sky-file-drop-text-header sky-headline\">\n {{\n 'skyux_file_attachment_file_upload_drop_files_here'\n | skyLibResources\n }}\n </div>\n <sky-icon icon=\"bullseye\" class=\"sky-file-upload-icon\"></sky-icon>\n </div>\n\n <!-- This will appear when file is dragged over and is invalid -->\n <div class=\"sky-file-drop-contents-reject\">\n <div class=\"sky-file-drop-text-header sky-headline\">\n {{\n 'skyux_file_attachment_file_upload_invalid_file' | skyLibResources\n }}\n </div>\n <sky-icon icon=\"times-circle\" class=\"sky-file-upload-icon\"></sky-icon>\n </div>\n </div>\n\n <div class=\"sky-file-drop-contents-custom\" #customEl>\n <ng-content></ng-content>\n </div>\n </div>\n <div class=\"sky-file-drop-col\" *ngIf=\"allowLinks\">\n <div class=\"sky-file-drop-contents sky-padding-even-default\">\n <div class=\"sky-file-drop-link\">\n <div class=\"sky-file-drop-link-header\">\n <div class=\"sky-file-drop-text-header sky-headline\">\n {{\n 'skyux_file_attachment_file_upload_paste_link' | skyLibResources\n }}\n </div>\n </div>\n <div class=\"sky-form-group\">\n <input\n type=\"text\"\n class=\"sky-form-control\"\n [attr.aria-label]=\"\n linkUploadAriaLabel ||\n ('skyux_file_attachment_file_upload_link_input' | skyLibResources)\n \"\n [attr.placeholder]=\"\n 'skyux_file_attachment_file_upload_link_placeholder'\n | skyLibResources\n \"\n [(ngModel)]=\"linkUrl\"\n (blur)=\"onLinkBlur()\"\n (keyup)=\"addLinkEnter($event)\"\n />\n </div>\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-primary\"\n [disabled]=\"!linkUrl\"\n (click)=\"addLink($event)\"\n >\n {{\n 'skyux_file_attachment_file_upload_paste_link_done'\n | skyLibResources\n }}\n </button>\n </div>\n </div>\n </div>\n</div>\n", styles: [".sky-file-drop-col{margin-bottom:10px;padding-left:5px;padding-right:5px;position:relative}:host .sky-file-drop-row{display:block}:host .sky-file-drop-col{flex-basis:auto}:host .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:auto}:host-context(.sky-responsive-container-xs) .sky-file-drop-row,:host-context(.sky-responsive-container-sm) .sky-file-drop-row,:host-context(.sky-responsive-container-md) .sky-file-drop-row,:host-context(.sky-responsive-container-lg) .sky-file-drop-row{display:block}:host-context(.sky-responsive-container-xs) .sky-file-drop-col,:host-context(.sky-responsive-container-sm) .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-col{flex-basis:auto}:host-context(.sky-responsive-container-xs) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-sm) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:auto}@media (min-width: 768px){:host .sky-file-drop-row{display:flex}:host .sky-file-drop-col{flex-basis:100%}:host .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:50%}}:host-context(.sky-responsive-container-sm) .sky-file-drop-row,:host-context(.sky-responsive-container-md) .sky-file-drop-row,:host-context(.sky-responsive-container-lg) .sky-file-drop-row{display:flex}:host-context(.sky-responsive-container-sm) .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-col{flex-basis:100%}:host-context(.sky-responsive-container-sm) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:50%}button.sky-file-drop{height:100%;position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}button.sky-file-drop:hover{cursor:pointer}.sky-file-drop-contents{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;background-color:#eeeeef;color:#212327;cursor:pointer;width:100%;text-align:center;height:100%}.sky-file-drop-contents .sky-file-drop-link-header{margin-bottom:5px}.sky-file-drop-noclick .sky-file-drop-contents{cursor:default}.sky-file-drop-accept .sky-file-drop-contents,.sky-file-drop-reject .sky-file-drop-contents{border-style:dashed;border-width:1px}.sky-file-drop-accept .sky-file-drop-contents-not-over,.sky-file-drop-reject .sky-file-drop-contents-not-over{display:none}.sky-file-drop-accept .sky-file-drop-contents{border-color:#72bf44;color:#212327}.sky-file-drop-accept .sky-file-drop-contents-accept{display:block}.sky-file-drop-reject .sky-file-drop-contents{border-color:#ef4044;color:#212327}.sky-file-drop-reject .sky-file-drop-contents-reject{display:block}.sky-file-drop-contents-accept,.sky-file-drop-contents-reject{display:none}.sky-file-upload-icon{display:block;font-size:40px;max-height:40px;margin-top:10px}.sky-file-drop-link{cursor:default}.sky-file-drop-text-header{margin:0}.sky-file-drop-text{font-size:15px;margin-top:5px;margin-bottom:20px}.sky-file-drop-text,.sky-file-drop-text-header{line-height:1.1;display:block}.sky-file-upload-icon{color:#686c73}.sky-file-drop{background-color:transparent;border:none;display:block;-webkit-appearance:none;width:100%;padding:0}.sky-file-input-hidden{display:none}\n"], components: [{ type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "skyLibResources": i5.SkyLibResourcesPipe } });
186
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFileDropComponent, decorators: [{
187
- type: Component,
188
- args: [{
189
- selector: 'sky-file-drop',
190
- templateUrl: './file-drop.component.html',
191
- styleUrls: ['./file-drop.component.scss'],
192
- providers: [SkyFileAttachmentService],
193
- }]
194
- }], ctorParameters: function () { return [{ type: i1.SkyFileAttachmentService }]; }, propDecorators: { filesChanged: [{
195
- type: Output
196
- }], linkInputBlur: [{
197
- type: Output
198
- }], linkChanged: [{
199
- type: Output
200
- }], fileUploadAriaLabel: [{
201
- type: Input
202
- }], linkUploadAriaLabel: [{
203
- type: Input
204
- }], minFileSize: [{
205
- type: Input
206
- }], maxFileSize: [{
207
- type: Input
208
- }], multiple: [{
209
- type: Input
210
- }], validateFn: [{
211
- type: Input
212
- }], acceptedTypes: [{
213
- type: Input
214
- }], noClick: [{
215
- type: Input
216
- }], allowLinks: [{
217
- type: Input
218
- }], inputEl: [{
219
- type: ViewChild,
220
- args: ['fileInput']
221
- }] } });
222
- //# sourceMappingURL=file-drop.component.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"file-drop.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/forms/src/lib/modules/file-attachment/file-drop.component.ts","../../../../../../../../libs/components/forms/src/lib/modules/file-attachment/file-drop.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ElementRef,\n EventEmitter,\n Input,\n OnDestroy,\n Output,\n ViewChild,\n} from '@angular/core';\n\nimport { SkyFileAttachmentService } from './file-attachment.service';\nimport { SkyFileItem } from './file-item';\nimport { SkyFileLink } from './file-link';\nimport { SkyFileDropChange } from './types/file-drop-change';\n\n/**\n * Provides an element to attach multiple files where users can browse or drag and drop local files\n * or provide hyperlinks to external files. You can leave the contents of the component\n * blank to display the drop zone's default UI, or you can specify custom content to\n * display instead. When the module initializes, it disables the ability to drag and\n * drop files for the entire window to prevent the browser from opening files that are\n * accidentally dropped outside the target zone. If you implement your own file drop functionality\n * outside of the file drop component, you can place the `sky-file-drop-target` CSS class\n * on the element that receives drop events to exempt it from the drop exclusion rule.\n */\n@Component({\n selector: 'sky-file-drop',\n templateUrl: './file-drop.component.html',\n styleUrls: ['./file-drop.component.scss'],\n providers: [SkyFileAttachmentService],\n})\nexport class SkyFileDropComponent implements OnDestroy {\n /**\n * Fires when users add or remove files.\n */\n @Output()\n public filesChanged = new EventEmitter<SkyFileDropChange>();\n\n /**\n * Fires when the link input box triggers a blur event.\n */\n @Output()\n public linkInputBlur = new EventEmitter<void>();\n\n /**\n * Fires when users add or remove links.\n */\n @Output()\n public linkChanged = new EventEmitter<SkyFileLink>();\n\n /**\n * Specifies an ARIA label for the file upload button. This provides a text equivalent for\n * screen readers [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).\n */\n @Input()\n public fileUploadAriaLabel: string;\n\n /**\n * Specifies an ARIA label for the link upload input. This provides a text equivalent for\n * screen readers [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).\n */\n @Input()\n public linkUploadAriaLabel: string;\n\n /**\n * Specifies the minimum size in bytes for valid files.\n */\n @Input()\n public minFileSize = 0;\n\n /**\n * Specifies the maximum size in bytes for valid files.\n */\n @Input()\n public maxFileSize = 500000;\n\n /**\n * Indicates whether users can drag and drop multiple files at the same time.\n */\n @Input()\n public multiple = true;\n\n /**\n * Specifies a custom validation function. This validation runs alongside the internal\n * file validation. This function takes a `SkyFileItem` object as a parameter.\n */\n @Input()\n public validateFn: Function;\n\n /**\n * Specifies a comma-delimited string literal of MIME types that users can attach.\n * By default, all file types are allowed.\n * @required\n */\n @Input()\n public acceptedTypes: string;\n\n /**\n * Indicates whether to disable the option to browse for files to attach.\n */\n @Input()\n public noClick = false;\n\n /**\n * Indicates whether to display the option to attach files from URLs rather than from local devices.\n */\n @Input()\n public allowLinks = false;\n\n @ViewChild('fileInput')\n public inputEl: ElementRef;\n\n public rejectedOver = false;\n public acceptedOver = false;\n public linkUrl: string;\n\n private enterEventTarget: any;\n\n constructor(private fileAttachmentService: SkyFileAttachmentService) {}\n\n public ngOnDestroy() {\n this.filesChanged.complete();\n this.linkChanged.complete();\n this.linkInputBlur.complete();\n }\n\n public dropClicked() {\n if (!this.noClick) {\n this.inputEl.nativeElement.click();\n }\n }\n\n public fileChangeEvent(fileChangeEvent: any) {\n this.handleFiles(fileChangeEvent.target.files);\n }\n\n public fileDragEnter(dragEnterEvent: any) {\n // Save this target to know when the drag event leaves\n this.enterEventTarget = dragEnterEvent.target;\n dragEnterEvent.stopPropagation();\n dragEnterEvent.preventDefault();\n }\n\n public fileDragOver(dragOverEvent: any) {\n const transfer = dragOverEvent.dataTransfer;\n\n dragOverEvent.stopPropagation();\n dragOverEvent.preventDefault();\n\n if (transfer) {\n if (transfer.items) {\n const files = transfer.items;\n\n for (let index = 0; index < files.length; index++) {\n const file: any = files[index];\n\n if (\n file.type &&\n this.fileAttachmentService.fileTypeRejected(\n file.type,\n this.acceptedTypes\n )\n ) {\n this.rejectedOver = true;\n this.acceptedOver = false;\n return;\n }\n }\n\n if (files.length > 0 && !this.acceptedOver) {\n this.rejectedOver = false;\n this.acceptedOver = true;\n }\n } /* istanbul ignore next: untestable */ else if (transfer.files) {\n // If the browser does not support DataTransfer.items,\n // defer file-type checking to drop handler.\n // https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/items#Browser_compatibility\n this.rejectedOver = false;\n this.acceptedOver = true;\n }\n }\n }\n\n public fileDrop(dropEvent: DragEvent): void {\n dropEvent.stopPropagation();\n dropEvent.preventDefault();\n\n this.enterEventTarget = undefined;\n this.rejectedOver = false;\n this.acceptedOver = false;\n\n if (dropEvent.dataTransfer && dropEvent.dataTransfer.files) {\n const hasDirectory = this.fileAttachmentService.hasDirectory(\n dropEvent.dataTransfer.files\n );\n const invalidNumberOfFiles =\n !this.multiple && dropEvent.dataTransfer.files.length > 1;\n\n if (hasDirectory || invalidNumberOfFiles) {\n return;\n }\n\n this.handleFiles(dropEvent.dataTransfer.files);\n }\n }\n\n public fileDragLeave(dragLeaveEvent: any) {\n if (this.enterEventTarget === dragLeaveEvent.target) {\n this.rejectedOver = false;\n this.acceptedOver = false;\n }\n }\n\n public addLinkEnter(event: KeyboardEvent) {\n if (event.which === 13) {\n this.addLink(event);\n }\n }\n\n public addLink(event: Event) {\n event.preventDefault();\n this.linkChanged.emit({ url: this.linkUrl } as SkyFileLink);\n this.linkUrl = undefined;\n }\n\n public onLinkBlur(): void {\n this.linkInputBlur.emit();\n }\n\n private emitFileChangeEvent(\n totalFiles: number,\n rejectedFileArray: Array<SkyFileItem>,\n validFileArray: Array<SkyFileItem>\n ) {\n if (totalFiles === rejectedFileArray.length + validFileArray.length) {\n this.filesChanged.emit({\n files: validFileArray,\n rejectedFiles: rejectedFileArray,\n } as SkyFileDropChange);\n\n this.inputEl.nativeElement.value = '';\n }\n }\n\n private filesRejected(\n file: SkyFileItem,\n validFileArray: Array<SkyFileItem>,\n rejectedFileArray: Array<SkyFileItem>,\n totalFiles: number\n ) {\n rejectedFileArray.push(file);\n this.emitFileChangeEvent(totalFiles, rejectedFileArray, validFileArray);\n }\n\n private loadFile(\n fileDrop: SkyFileDropComponent,\n file: SkyFileItem,\n validFileArray: Array<SkyFileItem>,\n rejectedFileArray: Array<SkyFileItem>,\n totalFiles: number\n ) {\n const reader = new FileReader();\n\n reader.addEventListener('load', (event: any) => {\n file.url = event.target.result;\n validFileArray.push(file);\n fileDrop.emitFileChangeEvent(\n totalFiles,\n rejectedFileArray,\n validFileArray\n );\n });\n\n reader.addEventListener('error', (event: any) => {\n fileDrop.filesRejected(\n file,\n validFileArray,\n rejectedFileArray,\n totalFiles\n );\n });\n\n reader.addEventListener('abort', (event: any) => {\n fileDrop.filesRejected(\n file,\n validFileArray,\n rejectedFileArray,\n totalFiles\n );\n });\n\n reader.readAsDataURL(file.file);\n }\n\n private handleFiles(files: FileList) {\n const validFileArray: Array<SkyFileItem> = [];\n const rejectedFileArray: Array<SkyFileItem> = [];\n const totalFiles = files.length;\n\n // tslint:disable-next-line: max-line-length\n const processedFiles = this.fileAttachmentService.checkFiles(\n files,\n this.minFileSize,\n this.maxFileSize,\n this.acceptedTypes,\n this.validateFn\n );\n\n for (const file of processedFiles) {\n if (file.errorType) {\n this.filesRejected(file, validFileArray, rejectedFileArray, totalFiles);\n } else {\n this.loadFile(\n this,\n file,\n validFileArray,\n rejectedFileArray,\n totalFiles\n );\n }\n }\n }\n}\n","<div\n class=\"sky-file-drop-row\"\n [ngClass]=\"{ 'sky-file-drop-allow-links': allowLinks }\"\n>\n <div\n class=\"sky-file-drop-col\"\n [ngClass]=\"{\n 'sky-file-drop-accept': acceptedOver,\n 'sky-file-drop-reject': rejectedOver\n }\"\n >\n <button\n class=\"sky-file-drop sky-file-drop-target\"\n type=\"button\"\n (click)=\"dropClicked()\"\n (dragover)=\"fileDragOver($event)\"\n (dragenter)=\"fileDragEnter($event)\"\n (dragleave)=\"fileDragLeave($event)\"\n (drop)=\"fileDrop($event)\"\n [attr.aria-label]=\"\n fileUploadAriaLabel ||\n ('skyux_file_attachment_file_upload_drag_or_click' | skyLibResources)\n \"\n ></button>\n\n <input\n tabindex=\"-1\"\n aria-hidden=\"true\"\n type=\"file\"\n class=\"sky-file-input-hidden\"\n [attr.multiple]=\"multiple ? multiple : null\"\n [attr.accept]=\"acceptedTypes ? acceptedTypes : null\"\n (change)=\"fileChangeEvent($event)\"\n #fileInput\n />\n\n <div\n class=\"sky-file-drop-contents sky-padding-even-default\"\n *ngIf=\"customEl.children.length === 0\"\n >\n <div class=\"sky-file-drop-contents-not-over\">\n <div class=\"sky-file-drop-text-header sky-headline\">\n {{\n 'skyux_file_attachment_file_upload_drag_file_here' | skyLibResources\n }}\n </div>\n <div class=\"sky-file-drop-text\">\n {{\n 'skyux_file_attachment_file_upload_or_click_to_browse'\n | skyLibResources\n }}\n </div>\n <sky-icon icon=\"cloud-upload\" class=\"sky-file-upload-icon\"></sky-icon>\n </div>\n\n <!-- This will appear when file is dragged over and is valid -->\n <div class=\"sky-file-drop-contents-accept\">\n <div class=\"sky-file-drop-text-header sky-headline\">\n {{\n 'skyux_file_attachment_file_upload_drop_files_here'\n | skyLibResources\n }}\n </div>\n <sky-icon icon=\"bullseye\" class=\"sky-file-upload-icon\"></sky-icon>\n </div>\n\n <!-- This will appear when file is dragged over and is invalid -->\n <div class=\"sky-file-drop-contents-reject\">\n <div class=\"sky-file-drop-text-header sky-headline\">\n {{\n 'skyux_file_attachment_file_upload_invalid_file' | skyLibResources\n }}\n </div>\n <sky-icon icon=\"times-circle\" class=\"sky-file-upload-icon\"></sky-icon>\n </div>\n </div>\n\n <div class=\"sky-file-drop-contents-custom\" #customEl>\n <ng-content></ng-content>\n </div>\n </div>\n <div class=\"sky-file-drop-col\" *ngIf=\"allowLinks\">\n <div class=\"sky-file-drop-contents sky-padding-even-default\">\n <div class=\"sky-file-drop-link\">\n <div class=\"sky-file-drop-link-header\">\n <div class=\"sky-file-drop-text-header sky-headline\">\n {{\n 'skyux_file_attachment_file_upload_paste_link' | skyLibResources\n }}\n </div>\n </div>\n <div class=\"sky-form-group\">\n <input\n type=\"text\"\n class=\"sky-form-control\"\n [attr.aria-label]=\"\n linkUploadAriaLabel ||\n ('skyux_file_attachment_file_upload_link_input' | skyLibResources)\n \"\n [attr.placeholder]=\"\n 'skyux_file_attachment_file_upload_link_placeholder'\n | skyLibResources\n \"\n [(ngModel)]=\"linkUrl\"\n (blur)=\"onLinkBlur()\"\n (keyup)=\"addLinkEnter($event)\"\n />\n </div>\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-primary\"\n [disabled]=\"!linkUrl\"\n (click)=\"addLink($event)\"\n >\n {{\n 'skyux_file_attachment_file_upload_paste_link_done'\n | skyLibResources\n }}\n </button>\n </div>\n </div>\n </div>\n</div>\n"]}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=file-item-error-type.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"file-item-error-type.js","sourceRoot":"","sources":["../../../../../../../../libs/components/forms/src/lib/modules/file-attachment/file-item-error-type.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Specifies the type of error that was thrown.\n */\nexport type SkyFileItemErrorType =\n | 'fileType'\n | 'minFileSize'\n | 'maxFileSize'\n | 'validate';\n"]}
@@ -1,116 +0,0 @@
1
- import { Component, EventEmitter, Input, KeyValueDiffers, Output, } from '@angular/core';
2
- import { SkyFileItemService } from './file-item.service';
3
- import * as i0 from "@angular/core";
4
- import * as i1 from "./file-item.service";
5
- import * as i2 from "@skyux/indicators";
6
- import * as i3 from "@angular/common";
7
- import * as i4 from "./file-size.pipe";
8
- import * as i5 from "@skyux/i18n";
9
- export class SkyFileItemComponent {
10
- constructor(differs, fileItemService) {
11
- this.differs = differs;
12
- this.fileItemService = fileItemService;
13
- /**
14
- * Fires when users select the delete button for an item. The deleted item is passed to the
15
- * function.
16
- */
17
- this.deleteFile = new EventEmitter();
18
- this.differ = this.differs.find({}).create();
19
- }
20
- get fileName() {
21
- return this.fileItem.file.name;
22
- }
23
- get fileSize() {
24
- return this.fileItem.file.size;
25
- }
26
- get url() {
27
- return this.fileItem.url;
28
- }
29
- ngDoCheck() {
30
- const changes = this.differ.diff(this.fileItem);
31
- if (changes) {
32
- let cls;
33
- const extensionUpper = this.fileItemService.getFileExtensionUpper(this.fileItem);
34
- let fileTypeUpper;
35
- switch (extensionUpper) {
36
- case '.PDF':
37
- cls = 'pdf';
38
- break;
39
- case '.GZ':
40
- case '.RAR':
41
- case '.TGZ':
42
- case '.ZIP':
43
- cls = 'archive';
44
- break;
45
- case '.PPT':
46
- case '.PPTX':
47
- cls = 'powerpoint';
48
- break;
49
- case '.DOC':
50
- case '.DOCX':
51
- cls = 'word';
52
- break;
53
- case '.XLS':
54
- case '.XLSX':
55
- cls = 'excel';
56
- break;
57
- case '.TXT':
58
- cls = 'text';
59
- break;
60
- case '.HTM':
61
- case '.HTML':
62
- cls = 'code';
63
- break;
64
- default:
65
- break;
66
- }
67
- if (!cls) {
68
- fileTypeUpper = this.fileItemService.getFileTypeUpper(this.fileItem);
69
- switch (fileTypeUpper.substr(0, fileTypeUpper.indexOf('/'))) {
70
- case 'AUDIO':
71
- cls = 'audio';
72
- break;
73
- case 'IMAGE':
74
- // Normally images are displayed as thumbnails, but if an image type is not recognized
75
- // as being widely supported by modern browsers (e.g. TIFF files) then an icon should
76
- // be displayed instead.
77
- cls = 'image';
78
- break;
79
- case 'TEXT':
80
- cls = 'text';
81
- break;
82
- case 'VIDEO':
83
- cls = 'video';
84
- break;
85
- default:
86
- break;
87
- }
88
- }
89
- this.icon = 'file-' + (cls ? cls + '-' : '') + 'o';
90
- }
91
- }
92
- itemDelete() {
93
- this.deleteFile.emit(this.fileItem);
94
- }
95
- isFile() {
96
- return this.fileItemService.isFile(this.fileItem);
97
- }
98
- isImage() {
99
- return this.fileItemService.isImage(this.fileItem);
100
- }
101
- }
102
- SkyFileItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFileItemComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i1.SkyFileItemService }], target: i0.ɵɵFactoryTarget.Component });
103
- SkyFileItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyFileItemComponent, selector: "sky-file-item", inputs: { fileItem: "fileItem" }, outputs: { deleteFile: "deleteFile" }, ngImport: i0, template: "<div class=\"sky-file-item sky-padding-even-default\">\n <div class=\"sky-file-item-title\">\n <div class=\"sky-file-item-name-container\">\n <div class=\"sky-file-item-name\">\n <strong *ngIf=\"isFile()\">{{ fileName }}</strong>\n <strong *ngIf=\"!isFile()\">{{ url }}</strong>\n </div>\n <div class=\"sky-file-item-size\" *ngIf=\"isFile()\">\n ({{ fileSize | skyFileSize }})\n </div>\n </div>\n <div class=\"sky-file-item-controls\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-file-item-btn-delete\"\n [attr.aria-label]=\"\n 'skyux_file_attachment_file_item_delete' | skyLibResources\n \"\n (click)=\"itemDelete()\"\n >\n <sky-icon icon=\"trash-o\" size=\"lg\"></sky-icon>\n </button>\n </div>\n </div>\n <div class=\"sky-file-item-content\">\n <div class=\"sky-file-item-preview\">\n <div *ngIf=\"isImage()\" class=\"sky-file-item-preview-img-container\">\n <img\n class=\"sky-file-item-preview-img\"\n [src]=\"url\"\n [alt]=\"\n 'skyux_file_attachment_file_upload_image_preview_alt_text'\n | skyLibResources\n \"\n />\n </div>\n <div *ngIf=\"!isImage()\" class=\"sky-file-item-preview-other\">\n <sky-icon [icon]=\"icon\"></sky-icon>\n </div>\n </div>\n <div class=\"sky-file-item-content-custom\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [".sky-file-item{border-top:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;border-right:1px solid #e2e3e4;background-color:#eeeeef;margin-bottom:10px}.sky-file-item-name-container{flex:1 1 auto;overflow:hidden}.sky-file-item-controls{flex:0 1 auto;padding-left:15px}.sky-file-item-name{white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis}.sky-file-item-title{margin-bottom:10px;display:flex}.sky-file-item-content{display:flex}.sky-file-item-preview{flex-basis:25%}.sky-file-item-content-custom{flex-basis:75%}.sky-file-item-preview-img-container{text-align:center}.sky-file-item-preview-img{max-width:100%;height:auto;box-shadow:0 0 5px #666}.sky-file-item-preview-other{color:#686c73;font-size:100px;line-height:1;text-align:center;width:100%}\n"], components: [{ type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyFileSize": i4.SkyFileSizePipe, "skyLibResources": i5.SkyLibResourcesPipe } });
104
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFileItemComponent, decorators: [{
105
- type: Component,
106
- args: [{
107
- selector: 'sky-file-item',
108
- templateUrl: './file-item.component.html',
109
- styleUrls: ['./file-item.component.scss'],
110
- }]
111
- }], ctorParameters: function () { return [{ type: i0.KeyValueDiffers }, { type: i1.SkyFileItemService }]; }, propDecorators: { fileItem: [{
112
- type: Input
113
- }], deleteFile: [{
114
- type: Output
115
- }] } });
116
- //# sourceMappingURL=file-item.component.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"file-item.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/forms/src/lib/modules/file-attachment/file-item.component.ts","../../../../../../../../libs/components/forms/src/lib/modules/file-attachment/file-item.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n DoCheck,\n EventEmitter,\n Input,\n KeyValueDiffer,\n KeyValueDiffers,\n Output,\n} from '@angular/core';\n\nimport { SkyFileItem } from './file-item';\nimport { SkyFileItemService } from './file-item.service';\nimport { SkyFileLink } from './file-link';\n\n@Component({\n selector: 'sky-file-item',\n templateUrl: './file-item.component.html',\n styleUrls: ['./file-item.component.scss'],\n})\nexport class SkyFileItemComponent implements DoCheck {\n /**\n * Specifies the summary information to display about file attachments. For local files,\n * the default summary includes the file name, file size, file preview, and a delete button.\n * For external files, the default summary includes the URL and a delete button.\n * You can include additional inputs to display user-entered metadata.\n * @required\n */\n @Input()\n public fileItem: SkyFileItem | SkyFileLink;\n\n /**\n * Fires when users select the delete button for an item. The deleted item is passed to the\n * function.\n */\n @Output()\n public deleteFile = new EventEmitter<SkyFileLink | SkyFileItem>();\n\n public get fileName(): string {\n return (this.fileItem as SkyFileItem).file.name;\n }\n\n public get fileSize(): number {\n return (this.fileItem as SkyFileItem).file.size;\n }\n\n public get url(): string {\n return this.fileItem.url;\n }\n\n public icon: string;\n\n private differ: KeyValueDiffer<any, any>;\n\n public constructor(\n private differs: KeyValueDiffers,\n private fileItemService: SkyFileItemService\n ) {\n this.differ = this.differs.find({}).create();\n }\n\n public ngDoCheck() {\n const changes = this.differ.diff(this.fileItem);\n\n if (changes) {\n let cls: string;\n const extensionUpper = this.fileItemService.getFileExtensionUpper(\n this.fileItem as SkyFileItem\n );\n let fileTypeUpper: string;\n\n switch (extensionUpper) {\n case '.PDF':\n cls = 'pdf';\n break;\n case '.GZ':\n case '.RAR':\n case '.TGZ':\n case '.ZIP':\n cls = 'archive';\n break;\n case '.PPT':\n case '.PPTX':\n cls = 'powerpoint';\n break;\n case '.DOC':\n case '.DOCX':\n cls = 'word';\n break;\n case '.XLS':\n case '.XLSX':\n cls = 'excel';\n break;\n case '.TXT':\n cls = 'text';\n break;\n case '.HTM':\n case '.HTML':\n cls = 'code';\n break;\n default:\n break;\n }\n\n if (!cls) {\n fileTypeUpper = this.fileItemService.getFileTypeUpper(\n this.fileItem as SkyFileItem\n );\n\n switch (fileTypeUpper.substr(0, fileTypeUpper.indexOf('/'))) {\n case 'AUDIO':\n cls = 'audio';\n break;\n case 'IMAGE':\n // Normally images are displayed as thumbnails, but if an image type is not recognized\n // as being widely supported by modern browsers (e.g. TIFF files) then an icon should\n // be displayed instead.\n cls = 'image';\n break;\n case 'TEXT':\n cls = 'text';\n break;\n case 'VIDEO':\n cls = 'video';\n break;\n default:\n break;\n }\n }\n this.icon = 'file-' + (cls ? cls + '-' : '') + 'o';\n }\n }\n\n public itemDelete() {\n this.deleteFile.emit(this.fileItem);\n }\n\n public isFile() {\n return this.fileItemService.isFile(this.fileItem as SkyFileItem);\n }\n\n public isImage() {\n return this.fileItemService.isImage(this.fileItem as SkyFileItem);\n }\n}\n","<div class=\"sky-file-item sky-padding-even-default\">\n <div class=\"sky-file-item-title\">\n <div class=\"sky-file-item-name-container\">\n <div class=\"sky-file-item-name\">\n <strong *ngIf=\"isFile()\">{{ fileName }}</strong>\n <strong *ngIf=\"!isFile()\">{{ url }}</strong>\n </div>\n <div class=\"sky-file-item-size\" *ngIf=\"isFile()\">\n ({{ fileSize | skyFileSize }})\n </div>\n </div>\n <div class=\"sky-file-item-controls\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-file-item-btn-delete\"\n [attr.aria-label]=\"\n 'skyux_file_attachment_file_item_delete' | skyLibResources\n \"\n (click)=\"itemDelete()\"\n >\n <sky-icon icon=\"trash-o\" size=\"lg\"></sky-icon>\n </button>\n </div>\n </div>\n <div class=\"sky-file-item-content\">\n <div class=\"sky-file-item-preview\">\n <div *ngIf=\"isImage()\" class=\"sky-file-item-preview-img-container\">\n <img\n class=\"sky-file-item-preview-img\"\n [src]=\"url\"\n [alt]=\"\n 'skyux_file_attachment_file_upload_image_preview_alt_text'\n | skyLibResources\n \"\n />\n </div>\n <div *ngIf=\"!isImage()\" class=\"sky-file-item-preview-other\">\n <sky-icon [icon]=\"icon\"></sky-icon>\n </div>\n </div>\n <div class=\"sky-file-item-content-custom\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n"]}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=file-item.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"file-item.js","sourceRoot":"","sources":["../../../../../../../../libs/components/forms/src/lib/modules/file-attachment/file-item.ts"],"names":[],"mappings":"","sourcesContent":["import { SkyFileItemErrorType } from './file-item-error-type';\n\nexport interface SkyFileItem {\n /**\n * The object that was added or removed.\n */\n file: File;\n /**\n * The [data URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs)\n * for the file that was added or removed.\n */\n url: string;\n /**\n * The type of error that caused the file to be rejected.\n */\n errorType: SkyFileItemErrorType;\n /**\n * Additional parameters about the error that caused the file to be rejected.\n */\n errorParam: string;\n}\n"]}
@@ -1,72 +0,0 @@
1
- import { Injectable } from '@angular/core';
2
- import * as i0 from "@angular/core";
3
- /**
4
- * @internal
5
- */
6
- export class SkyFileItemService {
7
- isFile(fileItem) {
8
- const file = fileItem.file;
9
- /* tslint:disable */
10
- return (file &&
11
- file !== undefined &&
12
- file !== null &&
13
- file.size !== undefined &&
14
- file.size !== null);
15
- /* tslint:enable */
16
- }
17
- isImage(fileItem) {
18
- const fileTypeUpper = this.getFileTypeUpper(fileItem);
19
- const slashIndex = fileTypeUpper.indexOf('/');
20
- if (slashIndex >= 0) {
21
- switch (fileTypeUpper.substr(fileTypeUpper.indexOf('/') + 1)) {
22
- case 'BMP':
23
- case 'GIF':
24
- case 'JPEG':
25
- case 'PNG':
26
- return true;
27
- default:
28
- break;
29
- }
30
- }
31
- return false;
32
- }
33
- getFileExtensionUpper(fileItem) {
34
- let extension = '', name;
35
- /* istanbul ignore else */
36
- /* sanity check */
37
- if (fileItem) {
38
- const file = fileItem.file;
39
- if (file) {
40
- /* istanbul ignore next */
41
- name = file.name || '';
42
- /* istanbul ignore next */
43
- extension = name.substr(name.lastIndexOf('.')) || '';
44
- }
45
- else {
46
- extension = '';
47
- }
48
- }
49
- return extension.toUpperCase();
50
- }
51
- getFileTypeUpper(fileItem) {
52
- let fileType = '';
53
- /* istanbul ignore else */
54
- /* sanity check */
55
- if (fileItem) {
56
- const file = fileItem.file;
57
- if (file) {
58
- fileType = file.type || '';
59
- }
60
- else {
61
- fileType = '';
62
- }
63
- }
64
- return fileType.toUpperCase();
65
- }
66
- }
67
- SkyFileItemService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFileItemService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
68
- SkyFileItemService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFileItemService });
69
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFileItemService, decorators: [{
70
- type: Injectable
71
- }] });
72
- //# sourceMappingURL=file-item.service.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"file-item.service.js","sourceRoot":"","sources":["../../../../../../../../libs/components/forms/src/lib/modules/file-attachment/file-item.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;;AAI3C;;GAEG;AAEH,MAAM,OAAO,kBAAkB;IACtB,MAAM,CAAC,QAAqB;QACjC,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC;QAE3B,oBAAoB;QACpB,OAAO,CACL,IAAI;YACJ,IAAI,KAAK,SAAS;YAClB,IAAI,KAAK,IAAI;YACb,IAAI,CAAC,IAAI,KAAK,SAAS;YACvB,IAAI,CAAC,IAAI,KAAK,IAAI,CACnB,CAAC;QACF,mBAAmB;IACrB,CAAC;IAEM,OAAO,CAAC,QAAqB;QAClC,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QACtD,MAAM,UAAU,GAAG,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;QAE9C,IAAI,UAAU,IAAI,CAAC,EAAE;YACnB,QAAQ,aAAa,CAAC,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE;gBAC5D,KAAK,KAAK,CAAC;gBACX,KAAK,KAAK,CAAC;gBACX,KAAK,MAAM,CAAC;gBACZ,KAAK,KAAK;oBACR,OAAO,IAAI,CAAC;gBACd;oBACE,MAAM;aACT;SACF;QAED,OAAO,KAAK,CAAC;IACf,CAAC;IAEM,qBAAqB,CAAC,QAAqB;QAChD,IAAI,SAAS,GAAG,EAAE,EAChB,IAAY,CAAC;QAEf,0BAA0B;QAC1B,kBAAkB;QAClB,IAAI,QAAQ,EAAE;YACZ,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC;YAC3B,IAAI,IAAI,EAAE;gBACR,0BAA0B;gBAC1B,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC;gBACvB,0BAA0B;gBAC1B,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;aACtD;iBAAM;gBACL,SAAS,GAAG,EAAE,CAAC;aAChB;SACF;QAED,OAAO,SAAS,CAAC,WAAW,EAAE,CAAC;IACjC,CAAC;IAEM,gBAAgB,CAAC,QAAqB;QAC3C,IAAI,QAAQ,GAAG,EAAE,CAAC;QAClB,0BAA0B;QAC1B,kBAAkB;QAClB,IAAI,QAAQ,EAAE;YACZ,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC;YAC3B,IAAI,IAAI,EAAE;gBACR,QAAQ,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC;aAC5B;iBAAM;gBACL,QAAQ,GAAG,EAAE,CAAC;aACf;SACF;QAED,OAAO,QAAQ,CAAC,WAAW,EAAE,CAAC;IAChC,CAAC;;gHArEU,kBAAkB;oHAAlB,kBAAkB;4FAAlB,kBAAkB;kBAD9B,UAAU","sourcesContent":["import { Injectable } from '@angular/core';\n\nimport { SkyFileItem } from './file-item';\n\n/**\n * @internal\n */\n@Injectable()\nexport class SkyFileItemService {\n public isFile(fileItem: SkyFileItem): boolean {\n const file = fileItem.file;\n\n /* tslint:disable */\n return (\n file &&\n file !== undefined &&\n file !== null &&\n file.size !== undefined &&\n file.size !== null\n );\n /* tslint:enable */\n }\n\n public isImage(fileItem: SkyFileItem): boolean {\n const fileTypeUpper = this.getFileTypeUpper(fileItem);\n const slashIndex = fileTypeUpper.indexOf('/');\n\n if (slashIndex >= 0) {\n switch (fileTypeUpper.substr(fileTypeUpper.indexOf('/') + 1)) {\n case 'BMP':\n case 'GIF':\n case 'JPEG':\n case 'PNG':\n return true;\n default:\n break;\n }\n }\n\n return false;\n }\n\n public getFileExtensionUpper(fileItem: SkyFileItem): string {\n let extension = '',\n name: string;\n\n /* istanbul ignore else */\n /* sanity check */\n if (fileItem) {\n const file = fileItem.file;\n if (file) {\n /* istanbul ignore next */\n name = file.name || '';\n /* istanbul ignore next */\n extension = name.substr(name.lastIndexOf('.')) || '';\n } else {\n extension = '';\n }\n }\n\n return extension.toUpperCase();\n }\n\n public getFileTypeUpper(fileItem: SkyFileItem): string {\n let fileType = '';\n /* istanbul ignore else */\n /* sanity check */\n if (fileItem) {\n const file = fileItem.file;\n if (file) {\n fileType = file.type || '';\n } else {\n fileType = '';\n }\n }\n\n return fileType.toUpperCase();\n }\n}\n"]}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=file-link.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"file-link.js","sourceRoot":"","sources":["../../../../../../../../libs/components/forms/src/lib/modules/file-attachment/file-link.ts"],"names":[],"mappings":"","sourcesContent":["export interface SkyFileLink {\n /**\n * Specifies the URL for the linked file.\n */\n url: string;\n}\n"]}