@verisoft/ui-govcz 20.0.0 → 20.1.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 (228) hide show
  1. package/.eslintrc.json +60 -0
  2. package/assets/i18n/cs.json +2 -0
  3. package/assets/i18n/en.json +2 -0
  4. package/jest.config.ts +21 -0
  5. package/ng-package.json +28 -0
  6. package/package.json +9 -19
  7. package/project.json +49 -0
  8. package/src/config.d.ts +10 -0
  9. package/src/index.ts +1 -0
  10. package/src/lib/components/breadcrumb/breadcrumb.component.html +25 -0
  11. package/src/lib/components/breadcrumb/breadcrumb.component.scss +0 -0
  12. package/src/lib/components/breadcrumb/breadcrumb.component.spec.ts +21 -0
  13. package/src/lib/components/breadcrumb/breadcrumb.component.ts +28 -0
  14. package/src/lib/components/breadcrumb/index.ts +1 -0
  15. package/src/lib/components/button/button.component.html +28 -0
  16. package/src/lib/components/button/button.component.scss +21 -0
  17. package/src/lib/components/button/button.component.ts +77 -0
  18. package/src/lib/components/button/index.ts +1 -0
  19. package/src/lib/components/calendar/calendar.component.html +28 -0
  20. package/src/lib/components/calendar/calendar.component.scss +0 -0
  21. package/src/lib/components/calendar/calendar.component.ts +77 -0
  22. package/src/lib/components/calendar/index.ts +1 -0
  23. package/src/lib/components/checkbox/checkbox.component.html +23 -0
  24. package/src/lib/components/checkbox/checkbox.component.scss +0 -0
  25. package/src/lib/components/checkbox/checkbox.component.ts +61 -0
  26. package/src/lib/components/checkbox/index.ts +1 -0
  27. package/src/lib/components/confirm-dialog/confirm-dialog.component.html +50 -0
  28. package/src/lib/components/confirm-dialog/confirm-dialog.component.scss +4 -0
  29. package/src/lib/components/confirm-dialog/confirm-dialog.component.ts +79 -0
  30. package/src/lib/components/confirm-dialog/index.ts +1 -0
  31. package/src/lib/components/dropdown/dropdown-item.component.html +8 -0
  32. package/src/lib/components/dropdown/dropdown-item.component.ts +18 -0
  33. package/src/lib/components/dropdown/dropdown.component.html +91 -0
  34. package/src/lib/components/dropdown/dropdown.component.scss +108 -0
  35. package/src/lib/components/dropdown/dropdown.component.spec.ts +21 -0
  36. package/src/lib/components/dropdown/dropdown.component.ts +296 -0
  37. package/src/lib/components/dropdown/dropdown.model.ts +6 -0
  38. package/src/lib/components/dropdown/index.ts +1 -0
  39. package/src/lib/components/dropdown-button/dropdown-button.component.html +31 -0
  40. package/src/lib/components/dropdown-button/dropdown-button.component.ts +34 -0
  41. package/src/lib/components/dropdown-button/index.ts +1 -0
  42. package/src/lib/components/errors/error.component.html +11 -0
  43. package/src/lib/components/errors/error.component.scss +0 -0
  44. package/src/lib/components/errors/error.component.spec.ts +19 -0
  45. package/src/lib/components/errors/error.component.ts +29 -0
  46. package/src/lib/components/errors/index.ts +1 -0
  47. package/src/lib/components/feature-list/directives/feature-list-column.directive.ts +32 -0
  48. package/src/lib/components/feature-list/directives/feature-list-filter-field.directive.ts +8 -0
  49. package/src/lib/components/feature-list/feature-list-filter.pipe.ts +20 -0
  50. package/src/lib/components/feature-list/feature-list-page.component.ts +30 -0
  51. package/src/lib/components/feature-list/feature-list-page.model.ts +42 -0
  52. package/src/lib/components/feature-list/feature-list.component.html +67 -0
  53. package/src/lib/components/feature-list/feature-list.component.scss +10 -0
  54. package/src/lib/components/feature-list/feature-list.component.ts +360 -0
  55. package/src/lib/components/feature-list/index.ts +5 -0
  56. package/src/lib/components/filter/directives/filter-field.directive.ts +35 -0
  57. package/src/lib/components/filter/filter.component.html +78 -0
  58. package/src/lib/components/filter/filter.component.scss +32 -0
  59. package/src/lib/components/filter/filter.component.spec.ts +21 -0
  60. package/src/lib/components/filter/filter.component.stories.ts +23 -0
  61. package/src/lib/components/filter/filter.component.ts +286 -0
  62. package/src/lib/components/filter/filter.model.ts +18 -0
  63. package/src/lib/components/filter/index.ts +2 -0
  64. package/src/lib/components/form-field/form-field.component.html +14 -0
  65. package/src/lib/components/form-field/form-field.component.scss +0 -0
  66. package/src/lib/components/form-field/form-field.component.spec.ts +21 -0
  67. package/src/lib/components/form-field/form-field.component.ts +76 -0
  68. package/src/lib/components/form-field/index.ts +1 -0
  69. package/src/lib/components/header/header.component.html +122 -0
  70. package/src/lib/components/header/header.component.scss +0 -0
  71. package/src/lib/components/header/header.component.ts +90 -0
  72. package/src/lib/components/header/index.ts +1 -0
  73. package/src/lib/components/icon/icon.component.html +11 -0
  74. package/src/lib/components/icon/icon.component.scss +20 -0
  75. package/src/lib/components/icon/icon.component.ts +110 -0
  76. package/src/lib/components/icon/index.ts +2 -0
  77. package/src/lib/components/index.ts +37 -0
  78. package/src/lib/components/input-group/index.ts +1 -0
  79. package/src/lib/components/input-group/input-group.component.html +41 -0
  80. package/src/lib/components/input-group/input-group.component.scss +0 -0
  81. package/src/lib/components/input-group/input-group.component.ts +75 -0
  82. package/src/lib/components/loader/index.ts +1 -0
  83. package/src/lib/components/loader/loader.component.html +7 -0
  84. package/src/lib/components/loader/loader.component.scss +0 -0
  85. package/src/lib/components/loader/loader.component.spec.ts +21 -0
  86. package/src/lib/components/loader/loader.component.ts +33 -0
  87. package/src/lib/components/multiselect/index.ts +1 -0
  88. package/src/lib/components/multiselect/multiselect.component.html +21 -0
  89. package/src/lib/components/multiselect/multiselect.component.scss +0 -0
  90. package/src/lib/components/multiselect/multiselect.component.spec.ts +21 -0
  91. package/src/lib/components/multiselect/multiselect.component.ts +117 -0
  92. package/src/lib/components/number-input/index.ts +1 -0
  93. package/src/lib/components/number-input/number-input.component.html +48 -0
  94. package/src/lib/components/number-input/number-input.component.scss +0 -0
  95. package/src/lib/components/number-input/number-input.component.ts +80 -0
  96. package/src/lib/components/page-header/index.ts +1 -0
  97. package/src/lib/components/page-header/page-header.component.html +3 -0
  98. package/src/lib/components/page-header/page-header.component.scss +11 -0
  99. package/src/lib/components/page-header/page-header.component.spec.ts +21 -0
  100. package/src/lib/components/page-header/page-header.component.ts +27 -0
  101. package/src/lib/components/password/index.ts +1 -0
  102. package/src/lib/components/password/password.component.html +31 -0
  103. package/src/lib/components/password/password.component.scss +0 -0
  104. package/src/lib/components/password/password.component.spec.ts +21 -0
  105. package/src/lib/components/password/password.component.ts +83 -0
  106. package/src/lib/components/radiobutton/index.ts +1 -0
  107. package/src/lib/components/radiobutton/radiobutton.component.html +23 -0
  108. package/src/lib/components/radiobutton/radiobutton.component.scss +0 -0
  109. package/src/lib/components/radiobutton/radiobutton.component.ts +61 -0
  110. package/src/lib/components/search/index.ts +1 -0
  111. package/src/lib/components/search/search.component.html +23 -0
  112. package/src/lib/components/search/search.component.scss +0 -0
  113. package/src/lib/components/search/search.component.ts +45 -0
  114. package/src/lib/components/section/index.ts +1 -0
  115. package/src/lib/components/section/section.component.html +26 -0
  116. package/src/lib/components/section/section.component.scss +0 -0
  117. package/src/lib/components/section/section.component.ts +55 -0
  118. package/src/lib/components/side-menu/index.ts +2 -0
  119. package/src/lib/components/side-menu/side-menu.component.html +22 -0
  120. package/src/lib/components/side-menu/side-menu.component.scss +17 -0
  121. package/src/lib/components/side-menu/side-menu.component.ts +42 -0
  122. package/src/lib/components/side-menu/side-menu.module.ts +56 -0
  123. package/src/lib/components/snackbar/index.ts +2 -0
  124. package/src/lib/components/snackbar/services/snackbar.service.ts +73 -0
  125. package/src/lib/components/snackbar/snackbar.component.html +14 -0
  126. package/src/lib/components/snackbar/snackbar.component.scss +0 -0
  127. package/src/lib/components/snackbar/snackbar.component.spec.ts +21 -0
  128. package/src/lib/components/snackbar/snackbar.component.ts +44 -0
  129. package/src/lib/components/snackbar/snackbar.model.ts +10 -0
  130. package/src/lib/components/stepper/index.ts +1 -0
  131. package/src/lib/components/stepper/stepper.component.html +35 -0
  132. package/src/lib/components/stepper/stepper.component.scss +9 -0
  133. package/src/lib/components/stepper/stepper.component.ts +60 -0
  134. package/src/lib/components/switch/index.ts +1 -0
  135. package/src/lib/components/switch/switch.component.html +16 -0
  136. package/src/lib/components/switch/switch.component.scss +0 -0
  137. package/src/lib/components/switch/switch.component.ts +39 -0
  138. package/src/lib/components/tab-view/index.ts +2 -0
  139. package/src/lib/components/tab-view/tab-view-item.component.ts +23 -0
  140. package/src/lib/components/tab-view/tab-view.component.html +51 -0
  141. package/src/lib/components/tab-view/tab-view.component.scss +43 -0
  142. package/src/lib/components/tab-view/tab-view.component.ts +64 -0
  143. package/src/lib/components/tab-view/tab-view.module.ts +25 -0
  144. package/src/lib/components/table/index.ts +1 -0
  145. package/src/lib/components/table/table-pagination-info.component.html +9 -0
  146. package/src/lib/components/table/table-pagination-info.component.ts +22 -0
  147. package/src/lib/components/table/table.component.html +199 -0
  148. package/src/lib/components/table/table.component.scss +192 -0
  149. package/src/lib/components/table/table.component.ts +390 -0
  150. package/src/lib/components/table/table.model.ts +17 -0
  151. package/src/lib/components/table/table.models.ts +12 -0
  152. package/src/lib/components/tag/index.ts +3 -0
  153. package/src/lib/components/tag/tag.component.html +12 -0
  154. package/src/lib/components/tag/tag.component.scss +4 -0
  155. package/src/lib/components/tag/tag.component.ts +44 -0
  156. package/src/lib/components/tag/tag.model.ts +7 -0
  157. package/src/lib/components/textarea/index.ts +1 -0
  158. package/src/lib/components/textarea/textarea.component.html +50 -0
  159. package/src/lib/components/textarea/textarea.component.scss +0 -0
  160. package/src/lib/components/textarea/textarea.component.ts +77 -0
  161. package/src/lib/components/textfield/index.ts +1 -0
  162. package/src/lib/components/textfield/textfield.component.html +34 -0
  163. package/src/lib/components/textfield/textfield.component.scss +0 -0
  164. package/src/lib/components/textfield/textfield.component.ts +112 -0
  165. package/src/lib/components/tooltip/index.ts +1 -0
  166. package/src/lib/components/tooltip/tooltip.component.html +9 -0
  167. package/src/lib/components/tooltip/tooltip.component.ts +19 -0
  168. package/src/lib/icons.ts +36 -0
  169. package/src/lib/index.ts +5 -0
  170. package/src/lib/init.service.ts +11 -0
  171. package/src/lib/interceptors/http-error-message.interceptor.ts +45 -0
  172. package/src/lib/pages/bad-request-page/bad-request-page.component.html +5 -0
  173. package/src/lib/pages/bad-request-page/bad-request-page.component.scss +0 -0
  174. package/src/lib/pages/bad-request-page/bad-request-page.component.ts +14 -0
  175. package/src/lib/pages/error-page/error-page.component.html +5 -0
  176. package/src/lib/pages/error-page/error-page.component.scss +0 -0
  177. package/src/lib/pages/error-page/error-page.component.ts +31 -0
  178. package/src/lib/pages/error-page/error-page.constants.ts +19 -0
  179. package/src/lib/pages/index.ts +3 -0
  180. package/src/lib/pages/internal-server-error-page/internal-server-error-page.component.html +5 -0
  181. package/src/lib/pages/internal-server-error-page/internal-server-error-page.component.scss +0 -0
  182. package/src/lib/pages/internal-server-error-page/internal-server-error-page.component.ts +15 -0
  183. package/src/lib/pages/not-authenticated/index.ts +1 -0
  184. package/src/lib/pages/not-authenticated/not-authenticated.component.html +5 -0
  185. package/src/lib/pages/not-authenticated/not-authenticated.component.ts +13 -0
  186. package/src/lib/pages/not-authorized/index.ts +1 -0
  187. package/src/lib/pages/not-authorized/not-authorized.component.html +5 -0
  188. package/src/lib/pages/not-authorized/not-authorized.component.ts +17 -0
  189. package/src/lib/pages/not-found/index.ts +1 -0
  190. package/src/lib/pages/not-found/not-found.component.html +5 -0
  191. package/src/lib/pages/not-found/not-found.component.ts +17 -0
  192. package/src/lib/pages/not-found-page/not-found-page.component.html +6 -0
  193. package/src/lib/pages/not-found-page/not-found-page.component.scss +0 -0
  194. package/src/lib/pages/not-found-page/not-found-page.component.ts +15 -0
  195. package/src/lib/pipes/color/color.pipe.ts +24 -0
  196. package/src/lib/pipes/index.ts +3 -0
  197. package/src/lib/pipes/multiselect/multiselect-options.pipe.ts +61 -0
  198. package/src/lib/pipes/size/size.pipe.ts +24 -0
  199. package/src/sass/foundations/_colors.scss +4 -0
  200. package/src/sass/foundations/index.scss +1 -0
  201. package/src/sass/integrations/_bootstrap.scss +4 -0
  202. package/src/sass/integrations/index.scss +1 -0
  203. package/src/sass/main.scss +12 -0
  204. package/src/sass/overrides/_gov.scss +4 -0
  205. package/src/sass/overrides/index.scss +1 -0
  206. package/src/sass/tokens/_theme-dark.scss +18 -0
  207. package/src/sass/tokens/_theme-light.scss +9 -0
  208. package/src/sass/tokens/index.scss +3 -0
  209. package/src/sass/utils/_table_filter.scss +4 -0
  210. package/src/sass/utils/index.scss +2 -0
  211. package/{styles → src}/sass/vendors/_bootstrap.scss +1 -0
  212. package/src/test-setup.ts +8 -0
  213. package/tsconfig.json +30 -0
  214. package/tsconfig.lib.json +17 -0
  215. package/tsconfig.lib.prod.json +9 -0
  216. package/tsconfig.spec.json +16 -0
  217. package/fesm2022/verisoft-ui-govcz.mjs +0 -3582
  218. package/fesm2022/verisoft-ui-govcz.mjs.map +0 -1
  219. package/index.d.ts +0 -955
  220. package/styles/dist/main.css +0 -9
  221. package/styles/dist/main.css.map +0 -1
  222. package/styles/sass/main.scss +0 -10
  223. package/styles/sass/utils/_variables.scss +0 -3
  224. package/styles/sass/utils/index.scss +0 -2
  225. /package/{styles → src}/sass/header.css +0 -0
  226. /package/{styles → src}/sass/header.scss +0 -0
  227. /package/{styles → src}/sass/scrollbar.scss +0 -0
  228. /package/{styles → src}/sass/utils/_utils.scss +0 -0
@@ -1,3582 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { Pipe, EventEmitter, Output, Input, ChangeDetectionStrategy, Component, inject, Optional, Self, input, ContentChildren, ViewEncapsulation, HostListener, ViewChild, NO_ERRORS_SCHEMA, ChangeDetectorRef, Directive, forwardRef, effect, ContentChild, InjectionToken, SimpleChange, Injectable, Injector, ViewContainerRef, NgModule, Inject } from '@angular/core';
3
- import * as i1 from '@angular/router';
4
- import { RouterModule, Router, ActivatedRoute, RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
5
- import * as i2 from '@gov-design-system-ce/angular';
6
- import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
7
- import * as i3 from '@ngx-translate/core';
8
- import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
9
- import * as i1$3 from '@verisoft/ui-core';
10
- import { ControlSeverity, GovControlSeverity, IconPosition, FieldSize, GovButtonType, BUTTON_COMPONENT_TOKEN, BreadcrumbCoreComponent, BREADCRUMB_COMPONENT_TOKEN, SlotPosition, BaseFormInputComponent, FieldType, CALENDAR_COMPONENT_TOKEN, CHECKBOX_COMPONENT_TOKEN, DROPDOWN_BUTTON_COMPONENT_TOKEN, ACTION_BUTTON_GROUP_COMPONENT_TOKEN, UnsubscribeComponent, queryListChanged, TEXTFIELD_COMPONENT_TOKEN, DROPDOWN_COMPONENT_TOKEN, MULTISELECT_COMPONENT_TOKEN, GenericFieldType, DatasourceDirective, GENERIC_FIELD_COMPONENT_TOKEN, DEFAULT_DEBOUNCE_TIME, ScreenSizeService, DialogService, isFilterEmpty, ButtonShortCutDirective, FILTER_COMPONENT_TOKEN, LOADER_COMPONENT_TOKEN, MAX_COLUMN_CHAR_COUNT, TableService, DEFAULT_PAGINATION, ColumnModel, RowModel, TableSelectionMode, TABLE_COLUMN_PROVIDER, TABLE_COMPONENT_TOKEN, downloadFile, TableDatasourceDirective, TableFilterDirective, TableColumnDirective, CONFIRM_DIALOG_COMPONENT_TOKEN, SideMenuService, HEADER_COMPONENT_TOKEN, PasswordStrength, PASSWORD_COMPONENT_TOKEN, RADIOBUTTON_COMPONENT_TOKEN, SWITCH_COMPONENT_TOKEN, SECTION_COMPONENT_TOKEN, SIDE_MENU_COMPONENT_TOKEN, MENU_TOKEN, SideMenuProviderService, SNACKBAR_COMPONENT_TOKEN, TEXTAREA_COMPONENT_TOKEN, FORM_FIELD_COMPONENT_TOKEN, INPUT_GROUP_COMPONENT_TOKEN, NUMBER_INPUT_COMPONENT_TOKEN, LayoutType, STEPPER_COMPONENT_TOKEN } from '@verisoft/ui-core';
11
- import * as i1$2 from '@angular/forms';
12
- import { ReactiveFormsModule, Validators, FormControl, UntypedFormGroup, UntypedFormControl, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
13
- import * as i1$1 from '@angular/common';
14
- import { CommonModule, AsyncPipe, NgTemplateOutlet } from '@angular/common';
15
- import { ERROR_PROVIDER_TOKEN, DEFAULT_PAGE_SIZE, getValueByPath, SortDirection, DEFAULT_SEARCH_LIMIT, multiSort, BASE_URL_PATH, BaseHttpService, convertDatasource } from '@verisoft/core';
16
- import { v4 } from 'uuid';
17
- import { Subject, takeUntil, combineLatestWith, debounceTime, distinctUntilChanged, BehaviorSubject, startWith, map, take, switchMap, forkJoin, of } from 'rxjs';
18
- import * as i4 from '@angular/cdk/scrolling';
19
- import { ScrollingModule } from '@angular/cdk/scrolling';
20
- import { HttpClient } from '@angular/common/http';
21
- import { HasPermissionDirective } from '@verisoft/security-core';
22
- import zxcvbn from 'zxcvbn';
23
- import * as i1$4 from '@angular/cdk/overlay';
24
- import * as portal from '@angular/cdk/portal';
25
- import { defineCustomElements } from '@gov-design-system-ce/components/loader';
26
-
27
- class GovColorPipe {
28
- transform(color) {
29
- switch (color) {
30
- case ControlSeverity.danger:
31
- return GovControlSeverity.error;
32
- case ControlSeverity.info:
33
- return GovControlSeverity.neutral;
34
- case ControlSeverity.help:
35
- case ControlSeverity.contrast:
36
- return GovControlSeverity.primary;
37
- }
38
- return color;
39
- }
40
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: GovColorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
41
- static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.1", ngImport: i0, type: GovColorPipe, isStandalone: true, name: "govColor" });
42
- }
43
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: GovColorPipe, decorators: [{
44
- type: Pipe,
45
- args: [{
46
- name: 'govColor',
47
- standalone: true,
48
- }]
49
- }] });
50
-
51
- class GovMultiselectOptionsPipe {
52
- transform(options, optionLabel, optionValue, addEmptyOption = false) {
53
- if (!options?.length)
54
- return [];
55
- return this.convertToGovOption(options, addEmptyOption, optionLabel, optionValue);
56
- }
57
- convertToGovOption(options, addEmptyOption, optionLabel, optionValue) {
58
- const convertedOptions = [];
59
- options.forEach((obj) => {
60
- let stringKey = '';
61
- let numberKey = '';
62
- if (optionLabel && optionValue) {
63
- stringKey = optionLabel;
64
- numberKey = optionValue;
65
- }
66
- else {
67
- const keys = Object.keys(obj);
68
- keys.forEach((key) => {
69
- if (typeof obj[key] === 'string') {
70
- stringKey = key;
71
- }
72
- else if (typeof obj[key] === 'number') {
73
- numberKey = key;
74
- }
75
- });
76
- }
77
- convertedOptions.push({
78
- label: obj[stringKey],
79
- value: obj[numberKey]?.toString() ?? 'VALUE NOT SET',
80
- });
81
- });
82
- if (addEmptyOption) {
83
- convertedOptions.unshift({
84
- label: '',
85
- value: 'null',
86
- });
87
- }
88
- return convertedOptions;
89
- }
90
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: GovMultiselectOptionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
91
- static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.1", ngImport: i0, type: GovMultiselectOptionsPipe, isStandalone: true, name: "govMultiselectOptions" });
92
- }
93
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: GovMultiselectOptionsPipe, decorators: [{
94
- type: Pipe,
95
- args: [{
96
- name: 'govMultiselectOptions',
97
- standalone: true,
98
- }]
99
- }] });
100
-
101
- class GovSizePipe {
102
- transform(size) {
103
- if (size) {
104
- return size.substring(0, 1);
105
- }
106
- if (typeof (size) === 'undefined') {
107
- return 'm';
108
- }
109
- return size;
110
- }
111
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: GovSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
112
- static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.1", ngImport: i0, type: GovSizePipe, isStandalone: true, name: "govSize" });
113
- }
114
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: GovSizePipe, decorators: [{
115
- type: Pipe,
116
- args: [{
117
- name: 'govSize',
118
- standalone: true,
119
- }]
120
- }] });
121
-
122
- class ButtonComponent {
123
- label;
124
- icon;
125
- badge;
126
- iconPos = IconPosition.left;
127
- disabled = false;
128
- rounded;
129
- outlined;
130
- raised;
131
- routerLink;
132
- size = FieldSize.medium;
133
- queryParams;
134
- severity = ControlSeverity.primary;
135
- type = GovButtonType.solid;
136
- expanded = false;
137
- name;
138
- // eslint-disable-next-line @angular-eslint/no-output-native
139
- click = new EventEmitter();
140
- handleClick(event) {
141
- if (this.disabled) {
142
- event.stopPropagation();
143
- return;
144
- }
145
- this.click.emit(event);
146
- }
147
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
148
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: ButtonComponent, isStandalone: true, selector: "v-button", inputs: { label: "label", icon: "icon", badge: "badge", iconPos: "iconPos", disabled: "disabled", rounded: "rounded", outlined: "outlined", raised: "raised", routerLink: "routerLink", size: "size", queryParams: "queryParams", severity: "severity", type: "type", expanded: "expanded", name: "name" }, outputs: { click: "click" }, providers: [
149
- {
150
- provide: BUTTON_COMPONENT_TOKEN,
151
- useExisting: ButtonComponent,
152
- }
153
- ], ngImport: i0, template: "<div class=\"v-button d-inline-block\">\n <a\n [routerLink]=\"routerLink ? routerLink : undefined\"\n [queryParams]=\"queryParams ? queryParams : undefined\"\n >\n <gov-button\n [type]=\"outlined === true ? 'outlined' : type\"\n [class.v-button--rounded]=\"rounded\"\n [color]=\"severity | govColor\"\n [disabled]=\"disabled\"\n [size]=\"size | govSize\"\n [name]=\"name\"\n [expanded]=\"expanded\"\n (gov-click)=\"handleClick($event)\"\n (click)=\"handleClick($event)\"\n >\n @if (icon) {\n <gov-icon \n [name]=\"icon\"\n [slot]=\"iconPos === 'left' ? 'icon-start' : 'icon-end'\"\n />\n } @if (label) {\n {{ label | translate }}\n }\n </gov-button>\n </a>\n</div>\n", styles: [".v-button--rounded{border-radius:5rem}\n"], dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovButton, selector: "gov-button", inputs: ["color", "disabled", "download", "expanded", "expandedMobile", "focusable", "href", "hreflang", "identifier", "loading", "name", "nativeType", "referrerpolicy", "rel", "size", "target", "type"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "pipe", type: GovColorPipe, name: "govColor" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
154
- }
155
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ButtonComponent, decorators: [{
156
- type: Component,
157
- args: [{ selector: "v-button", imports: [
158
- GovDesignSystemModule, RouterModule, GovSizePipe, GovColorPipe, TranslateModule
159
- ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
160
- {
161
- provide: BUTTON_COMPONENT_TOKEN,
162
- useExisting: ButtonComponent,
163
- }
164
- ], template: "<div class=\"v-button d-inline-block\">\n <a\n [routerLink]=\"routerLink ? routerLink : undefined\"\n [queryParams]=\"queryParams ? queryParams : undefined\"\n >\n <gov-button\n [type]=\"outlined === true ? 'outlined' : type\"\n [class.v-button--rounded]=\"rounded\"\n [color]=\"severity | govColor\"\n [disabled]=\"disabled\"\n [size]=\"size | govSize\"\n [name]=\"name\"\n [expanded]=\"expanded\"\n (gov-click)=\"handleClick($event)\"\n (click)=\"handleClick($event)\"\n >\n @if (icon) {\n <gov-icon \n [name]=\"icon\"\n [slot]=\"iconPos === 'left' ? 'icon-start' : 'icon-end'\"\n />\n } @if (label) {\n {{ label | translate }}\n }\n </gov-button>\n </a>\n</div>\n", styles: [".v-button--rounded{border-radius:5rem}\n"] }]
165
- }], propDecorators: { label: [{
166
- type: Input
167
- }], icon: [{
168
- type: Input
169
- }], badge: [{
170
- type: Input
171
- }], iconPos: [{
172
- type: Input
173
- }], disabled: [{
174
- type: Input
175
- }], rounded: [{
176
- type: Input
177
- }], outlined: [{
178
- type: Input
179
- }], raised: [{
180
- type: Input
181
- }], routerLink: [{
182
- type: Input
183
- }], size: [{
184
- type: Input
185
- }], queryParams: [{
186
- type: Input
187
- }], severity: [{
188
- type: Input
189
- }], type: [{
190
- type: Input
191
- }], expanded: [{
192
- type: Input
193
- }], name: [{
194
- type: Input
195
- }], click: [{
196
- type: Output
197
- }] } });
198
-
199
- const Icons = {
200
- add: 'plus-lg',
201
- minus: 'dash',
202
- delete: 'trash',
203
- filter: 'filter',
204
- download: 'upload',
205
- save: 'download',
206
- print: 'print-fill',
207
- edit: 'pencil',
208
- calendar: 'calendar',
209
- settings: 'gear',
210
- house: 'house-door-fill',
211
- chevronRight: 'chevron-right',
212
- chevronDown: 'chevron-down',
213
- chevronLeft: 'chevron-left',
214
- chevronUp: 'chevron-up',
215
- checkbox: 'check-square',
216
- warning: 'exclamation-triangle-fill',
217
- search: 'search',
218
- action: 'bars',
219
- user: 'user',
220
- logout: 'logout',
221
- crossCircle: 'x-circle',
222
- infoCircle: 'info-circle',
223
- cross: 'x-lg',
224
- arrowLeft: 'arrow-left',
225
- arrowRight: 'arrow-right',
226
- questionCircle: 'question-circle',
227
- checkCircle: 'check-circle',
228
- sitemap: 'diagram',
229
- check: 'check-lg',
230
- envelope: 'envelope',
231
- loader: 'loader',
232
- };
233
-
234
- class BreadcrumbComponent extends BreadcrumbCoreComponent {
235
- icons = Icons;
236
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: BreadcrumbComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
237
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: BreadcrumbComponent, isStandalone: true, selector: "v-breadcrumb", providers: [
238
- {
239
- provide: BREADCRUMB_COMPONENT_TOKEN,
240
- useExisting: BreadcrumbComponent
241
- },
242
- ], usesInheritance: true, ngImport: i0, template: "<div class=\"gov-breadcrums mt-3 mb-3\">\n <gov-breadcrumbs accessible-label=\"gov-breadcrums\">\n <ul>\n @if (useHomeRoute) {\n <li>\n <gov-icon [name]=\"icons.house\" />\n <a [routerLink]=\"'/'\">Home</a>\n </li>\n }\n @if (items) { @for (item of items; track item; let index = $index) {\n <li>\n @if (index > 0 || useHomeRoute) {\n <gov-icon [name]=\"icons.chevronRight\" />\n }\n @if (item.icon) {\n <gov-icon [name]=\"item.icon\" />\n }\n <a [routerLink]=\"item.routerLink\">\n {{ item.label }}\n </a>\n </li>\n } }\n </ul>\n </gov-breadcrumbs>\n </div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovBreadcrumbs, selector: "gov-breadcrumbs", inputs: ["accessibleLabel", "accessibleLabelledBy", "accessibleToggleLabel", "collapsible", "isExpanded"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
243
- }
244
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: BreadcrumbComponent, decorators: [{
245
- type: Component,
246
- args: [{ selector: 'v-breadcrumb', imports: [
247
- GovDesignSystemModule,
248
- RouterModule
249
- ], providers: [
250
- {
251
- provide: BREADCRUMB_COMPONENT_TOKEN,
252
- useExisting: BreadcrumbComponent
253
- },
254
- ], template: "<div class=\"gov-breadcrums mt-3 mb-3\">\n <gov-breadcrumbs accessible-label=\"gov-breadcrums\">\n <ul>\n @if (useHomeRoute) {\n <li>\n <gov-icon [name]=\"icons.house\" />\n <a [routerLink]=\"'/'\">Home</a>\n </li>\n }\n @if (items) { @for (item of items; track item; let index = $index) {\n <li>\n @if (index > 0 || useHomeRoute) {\n <gov-icon [name]=\"icons.chevronRight\" />\n }\n @if (item.icon) {\n <gov-icon [name]=\"item.icon\" />\n }\n <a [routerLink]=\"item.routerLink\">\n {{ item.label }}\n </a>\n </li>\n } }\n </ul>\n </gov-breadcrumbs>\n </div>\n" }]
255
- }] });
256
-
257
- class ErrorComponent {
258
- ngControl;
259
- errorSlot = SlotPosition.bottom;
260
- messageSlot = SlotPosition.bottom;
261
- errorService = inject(ERROR_PROVIDER_TOKEN);
262
- icons = Icons;
263
- getErrorMessage(errors) {
264
- return this.errorService.mapError(errors);
265
- }
266
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
267
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: ErrorComponent, isStandalone: true, selector: "v-validation-message", inputs: { ngControl: "ngControl", errorSlot: "errorSlot", messageSlot: "messageSlot" }, ngImport: i0, template: "@if (ngControl && ngControl.errors) {\n<gov-form-message \n [slot]=\"errorSlot\" \n color=\"error\"\n>\n {{ getErrorMessage(ngControl.errors) | async }}\n <gov-icon \n [name]=\"icons.warning\" \n slot=\"validation-icon\" />\n</gov-form-message>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormMessage, selector: "gov-form-message", inputs: ["color", "size"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
268
- }
269
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ErrorComponent, decorators: [{
270
- type: Component,
271
- args: [{ selector: "v-validation-message", imports: [CommonModule, GovDesignSystemModule], template: "@if (ngControl && ngControl.errors) {\n<gov-form-message \n [slot]=\"errorSlot\" \n color=\"error\"\n>\n {{ getErrorMessage(ngControl.errors) | async }}\n <gov-icon \n [name]=\"icons.warning\" \n slot=\"validation-icon\" />\n</gov-form-message>\n}\n" }]
272
- }], propDecorators: { ngControl: [{
273
- type: Input,
274
- args: [{ required: true }]
275
- }], errorSlot: [{
276
- type: Input
277
- }], messageSlot: [{
278
- type: Input
279
- }] } });
280
-
281
- class CalendarComponent extends BaseFormInputComponent {
282
- icon;
283
- floatLabel;
284
- maxDate;
285
- minDate;
286
- header;
287
- footer;
288
- selectionMode;
289
- size = FieldSize.medium;
290
- errorSlot = SlotPosition.bottom;
291
- labelSlot = SlotPosition.top;
292
- messageSlot = SlotPosition.bottom;
293
- message;
294
- name;
295
- type = FieldType.date;
296
- icons = Icons;
297
- constructor(ngControl) {
298
- super(ngControl);
299
- }
300
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CalendarComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
301
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: CalendarComponent, isStandalone: true, selector: "v-calendar", inputs: { icon: "icon", floatLabel: "floatLabel", maxDate: "maxDate", minDate: "minDate", header: "header", footer: "footer", selectionMode: "selectionMode", size: "size", errorSlot: "errorSlot", labelSlot: "labelSlot", messageSlot: "messageSlot", message: "message", name: "name" }, providers: [
302
- {
303
- provide: CALENDAR_COMPONENT_TOKEN,
304
- useExisting: CalendarComponent
305
- }
306
- ], usesInheritance: true, ngImport: i0, template: "<gov-form-control class=\"mb-3\">\n @if (label) {\n <gov-form-label [slot]=\"labelSlot\" [size]=\"size | govSize\">\n {{ label | translate}}\n </gov-form-label>\n }\n <gov-form-group>\n <gov-form-input\n [formControl]=\"formControl\"\n [attr.input-type]=\"type\"\n [invalid]=\"ngControl?.errors ? true : false\"\n [size]=\"size | govSize\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [attr.disabled]=\"readonly ? 'true' : 'false'\"\n [name]=\"name\"\n />\n </gov-form-group>\n <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n @if (message) {\n <gov-form-message \n [slot]=\"messageSlot\" \n color=\"neutral\"\n >\n {{ message }}\n </gov-form-message>\n }\n</gov-form-control>", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormGroup, selector: "gov-form-group", inputs: ["gap", "orientation"] }, { kind: "component", type: i2.GovFormInput, selector: "gov-form-input", inputs: ["accessibleHidePasswordLabel", "accessibleShowPasswordLabel", "autocomplete", "autocorrect", "cols", "disabled", "identifier", "inputLang", "inputType", "invalid", "max", "maxlength", "min", "minlength", "multiline", "name", "placeholder", "readonly", "required", "role", "rows", "size", "spellcheck", "success", "type", "value"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i2.GovFormMessage, selector: "gov-form-message", inputs: ["color", "size"] }, { kind: "directive", type: i2.TextValueAccessor, selector: "gov-form-input:not([input-type=number]),gov-form-autocomplete" }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
307
- }
308
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CalendarComponent, decorators: [{
309
- type: Component,
310
- args: [{ selector: 'v-calendar', imports: [
311
- ReactiveFormsModule,
312
- GovDesignSystemModule,
313
- GovSizePipe,
314
- ErrorComponent,
315
- TranslateModule
316
- ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
317
- {
318
- provide: CALENDAR_COMPONENT_TOKEN,
319
- useExisting: CalendarComponent
320
- }
321
- ], template: "<gov-form-control class=\"mb-3\">\n @if (label) {\n <gov-form-label [slot]=\"labelSlot\" [size]=\"size | govSize\">\n {{ label | translate}}\n </gov-form-label>\n }\n <gov-form-group>\n <gov-form-input\n [formControl]=\"formControl\"\n [attr.input-type]=\"type\"\n [invalid]=\"ngControl?.errors ? true : false\"\n [size]=\"size | govSize\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [attr.disabled]=\"readonly ? 'true' : 'false'\"\n [name]=\"name\"\n />\n </gov-form-group>\n <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n @if (message) {\n <gov-form-message \n [slot]=\"messageSlot\" \n color=\"neutral\"\n >\n {{ message }}\n </gov-form-message>\n }\n</gov-form-control>" }]
322
- }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
323
- type: Optional
324
- }, {
325
- type: Self
326
- }] }], propDecorators: { icon: [{
327
- type: Input
328
- }], floatLabel: [{
329
- type: Input
330
- }], maxDate: [{
331
- type: Input
332
- }], minDate: [{
333
- type: Input
334
- }], header: [{
335
- type: Input
336
- }], footer: [{
337
- type: Input
338
- }], selectionMode: [{
339
- type: Input
340
- }], size: [{
341
- type: Input
342
- }], errorSlot: [{
343
- type: Input
344
- }], labelSlot: [{
345
- type: Input
346
- }], messageSlot: [{
347
- type: Input
348
- }], message: [{
349
- type: Input
350
- }], name: [{
351
- type: Input
352
- }] } });
353
-
354
- class CheckboxComponent extends BaseFormInputComponent {
355
- size = FieldSize.medium;
356
- value;
357
- name;
358
- indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : []));
359
- noLabel = false;
360
- icons = Icons;
361
- constructor(ngControl) {
362
- super(ngControl);
363
- }
364
- id = v4();
365
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CheckboxComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
366
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.1", type: CheckboxComponent, isStandalone: true, selector: "v-checkbox", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, noLabel: { classPropertyName: "noLabel", publicName: "noLabel", isSignal: false, isRequired: false, transformFunction: null } }, providers: [{
367
- provide: CHECKBOX_COMPONENT_TOKEN,
368
- useExisting: CheckboxComponent,
369
- }], usesInheritance: true, ngImport: i0, template: "<gov-form-control class=\"mt-3\">\n <gov-form-checkbox \n [formControl]=\"formControl\"\n [size]=\"size | govSize\"\n [value]=\"value\"\n [required]=\"required\"\n [attr.disabled]=\"disabled ? 'true' : 'false'\"\n [identifier]=\"id\"\n [indeterminate]=\"indeterminate\"\n [name]=\"name\"\n [invalid]=\"ngControl?.errors\"\n [noLabel]=\"noLabel\"\n [disabled]=\"disabled\"\n > \n <gov-form-label\n [size]=\"size\"\n slot=\"label\"\n >\n {{ label ?? '' | translate }}\n </gov-form-label>\n </gov-form-checkbox>\n <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n</gov-form-control>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormCheckbox, selector: "gov-form-checkbox", inputs: ["checked", "disabled", "identifier", "indeterminate", "invalid", "name", "noLabel", "required", "size", "value"] }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "directive", type: i2.BooleanValueAccessor, selector: "gov-form-checkbox,gov-form-switch" }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
370
- }
371
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CheckboxComponent, decorators: [{
372
- type: Component,
373
- args: [{ selector: "v-checkbox", imports: [
374
- GovDesignSystemModule,
375
- RouterModule,
376
- ReactiveFormsModule,
377
- GovSizePipe,
378
- ErrorComponent,
379
- TranslateModule
380
- ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
381
- provide: CHECKBOX_COMPONENT_TOKEN,
382
- useExisting: CheckboxComponent,
383
- }], template: "<gov-form-control class=\"mt-3\">\n <gov-form-checkbox \n [formControl]=\"formControl\"\n [size]=\"size | govSize\"\n [value]=\"value\"\n [required]=\"required\"\n [attr.disabled]=\"disabled ? 'true' : 'false'\"\n [identifier]=\"id\"\n [indeterminate]=\"indeterminate\"\n [name]=\"name\"\n [invalid]=\"ngControl?.errors\"\n [noLabel]=\"noLabel\"\n [disabled]=\"disabled\"\n > \n <gov-form-label\n [size]=\"size\"\n slot=\"label\"\n >\n {{ label ?? '' | translate }}\n </gov-form-label>\n </gov-form-checkbox>\n <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n</gov-form-control>\n" }]
384
- }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
385
- type: Optional
386
- }, {
387
- type: Self
388
- }] }], propDecorators: { size: [{
389
- type: Input
390
- }], value: [{
391
- type: Input
392
- }], name: [{
393
- type: Input
394
- }], noLabel: [{
395
- type: Input
396
- }] } });
397
-
398
- class DropdownButtonComponent {
399
- label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
400
- icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
401
- rounded = input(false, ...(ngDevMode ? [{ debugName: "rounded" }] : []));
402
- raised = input(false, ...(ngDevMode ? [{ debugName: "raised" }] : []));
403
- outlined = input(false, ...(ngDevMode ? [{ debugName: "outlined" }] : []));
404
- severity = input(ControlSeverity.primary, ...(ngDevMode ? [{ debugName: "severity" }] : []));
405
- size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
406
- items = input(undefined, ...(ngDevMode ? [{ debugName: "items" }] : []));
407
- fireClick(item) {
408
- item.command?.();
409
- }
410
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DropdownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
411
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: DropdownButtonComponent, isStandalone: true, selector: "v-dropdown-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
412
- { provide: DROPDOWN_BUTTON_COMPONENT_TOKEN, useExisting: DropdownButtonComponent }
413
- ], ngImport: i0, template: "<gov-dropdown position=\"left\">\r\n <v-button [label]=\"label()\" [icon]=\"icon()\" [rounded]=\"rounded() ?? false\" [outlined]=\"outlined() ?? false\" [raised]=\"raised() ?? false\"\r\n [severity]=\"severity()\" [size]=\"size()\" >\r\n </v-button>\r\n @if (items() && $any(items()).length > 0) {\r\n <ul slot=\"list\">\r\n @for (item of items(); track item) {\r\n <li>\r\n <v-button [label]=\"item.label\" [icon]=\"item.icon\" [severity]=\"$any('normal')\"\r\n [size]=\"'medium'\" (click)=\"fireClick(item)\" class=\"w-100\"></v-button>\r\n </li>\r\n }\r\n </ul>\r\n }\r\n</gov-dropdown>", dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovDropdown, selector: "gov-dropdown", inputs: ["identifier", "open", "position"] }, { kind: "component", type: ButtonComponent, selector: "v-button", inputs: ["label", "icon", "badge", "iconPos", "disabled", "rounded", "outlined", "raised", "routerLink", "size", "queryParams", "severity", "type", "expanded", "name"], outputs: ["click"] }] });
414
- }
415
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DropdownButtonComponent, decorators: [{
416
- type: Component,
417
- args: [{ selector: 'v-dropdown-button', imports: [GovDesignSystemModule, ButtonComponent], providers: [
418
- { provide: DROPDOWN_BUTTON_COMPONENT_TOKEN, useExisting: DropdownButtonComponent }
419
- ], template: "<gov-dropdown position=\"left\">\r\n <v-button [label]=\"label()\" [icon]=\"icon()\" [rounded]=\"rounded() ?? false\" [outlined]=\"outlined() ?? false\" [raised]=\"raised() ?? false\"\r\n [severity]=\"severity()\" [size]=\"size()\" >\r\n </v-button>\r\n @if (items() && $any(items()).length > 0) {\r\n <ul slot=\"list\">\r\n @for (item of items(); track item) {\r\n <li>\r\n <v-button [label]=\"item.label\" [icon]=\"item.icon\" [severity]=\"$any('normal')\"\r\n [size]=\"'medium'\" (click)=\"fireClick(item)\" class=\"w-100\"></v-button>\r\n </li>\r\n }\r\n </ul>\r\n }\r\n</gov-dropdown>" }]
420
- }] });
421
-
422
- class ActionButtonComponent {
423
- disabled = false;
424
- toolTip;
425
- id;
426
- icon;
427
- outlined = false;
428
- raised = false;
429
- severity;
430
- label;
431
- size;
432
- // eslint-disable-next-line @angular-eslint/no-output-native
433
- click = new EventEmitter();
434
- icons = Icons;
435
- propertyChangeSubject = new Subject();
436
- propertyChanged = this.propertyChangeSubject.asObservable();
437
- buttonGroup = inject(ACTION_BUTTON_GROUP_COMPONENT_TOKEN, {
438
- optional: true,
439
- });
440
- ngOnChanges(changes) {
441
- const isValueChange = Object.keys(changes).some((x) => !changes[x].firstChange);
442
- if (isValueChange) {
443
- this.propertyChangeSubject.next(null);
444
- }
445
- }
446
- handleClick(event) {
447
- event.stopPropagation();
448
- this.click.emit(event);
449
- }
450
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
451
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: ActionButtonComponent, isStandalone: true, selector: "v-action-button", inputs: { disabled: "disabled", toolTip: "toolTip", id: "id", icon: "icon", outlined: "outlined", raised: "raised", severity: "severity", label: "label", size: "size" }, outputs: { click: "click" }, usesOnChanges: true, ngImport: i0, template: "<v-button\n [label]=\"label\"\n [disabled]=\"disabled\"\n [icon]=\"icon\"\n [outlined]=\"outlined\"\n tooltipPosition=\"bottom\"\n [size]=\"size\"\n [severity]=\"severity\"\n (click)=\"handleClick($event)\"\n></v-button>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "v-button", inputs: ["label", "icon", "badge", "iconPos", "disabled", "rounded", "outlined", "raised", "routerLink", "size", "queryParams", "severity", "type", "expanded", "name"], outputs: ["click"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
452
- }
453
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ActionButtonComponent, decorators: [{
454
- type: Component,
455
- args: [{ selector: 'v-action-button', imports: [ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<v-button\n [label]=\"label\"\n [disabled]=\"disabled\"\n [icon]=\"icon\"\n [outlined]=\"outlined\"\n tooltipPosition=\"bottom\"\n [size]=\"size\"\n [severity]=\"severity\"\n (click)=\"handleClick($event)\"\n></v-button>\n" }]
456
- }], propDecorators: { disabled: [{
457
- type: Input
458
- }], toolTip: [{
459
- type: Input
460
- }], id: [{
461
- type: Input
462
- }], icon: [{
463
- type: Input
464
- }], outlined: [{
465
- type: Input
466
- }], raised: [{
467
- type: Input
468
- }], severity: [{
469
- type: Input
470
- }], label: [{
471
- type: Input
472
- }], size: [{
473
- type: Input
474
- }], click: [{
475
- type: Output
476
- }] } });
477
-
478
- class ActionButtonGroupComponent extends UnsubscribeComponent {
479
- changeDetectorRef;
480
- screenSizeService;
481
- actions;
482
- maxItems = 3;
483
- maxItemsMobile = 0;
484
- items = [];
485
- menuIconPos = 'right';
486
- menuIcon = Icons.action;
487
- label;
488
- icon;
489
- icons = Icons;
490
- allItems = [];
491
- visibleActions = [];
492
- menuItems = [];
493
- constructor(changeDetectorRef, screenSizeService) {
494
- super();
495
- this.changeDetectorRef = changeDetectorRef;
496
- this.screenSizeService = screenSizeService;
497
- }
498
- ngAfterContentInit() {
499
- this.subscribeItemChange();
500
- }
501
- fireClick(item, event) {
502
- event.stopPropagation();
503
- item.click.emit();
504
- }
505
- subscribeItemChange() {
506
- const screenResize$ = this.screenSizeService.isMobileBlock;
507
- const actions$ = queryListChanged(this.actions);
508
- screenResize$
509
- .pipe(takeUntil(this.destroyed$), combineLatestWith(actions$))
510
- .subscribe(([isMobile, actions]) => {
511
- this.computeItems(actions, isMobile);
512
- });
513
- }
514
- computeItems(actions, isMobile) {
515
- const allItems = [...(this.items ?? []), ...actions];
516
- const maxItems = isMobile ? this.maxItemsMobile : this.maxItems;
517
- this.visibleActions = allItems.slice(0, maxItems);
518
- this.menuItems = allItems.slice(maxItems).map(this.convertToMenuItem);
519
- this.changeDetectorRef.detectChanges();
520
- }
521
- convertToMenuItem(item) {
522
- return {
523
- label: item.label,
524
- icon: item.icon,
525
- command: () => {
526
- item.click.emit();
527
- },
528
- };
529
- }
530
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ActionButtonGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$3.ScreenSizeService }], target: i0.ɵɵFactoryTarget.Component });
531
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: ActionButtonGroupComponent, isStandalone: true, selector: "v-action-button-group", inputs: { maxItems: "maxItems", maxItemsMobile: "maxItemsMobile", items: "items", menuIconPos: "menuIconPos", menuIcon: "menuIcon", label: "label", icon: "icon" }, providers: [
532
- {
533
- provide: ACTION_BUTTON_GROUP_COMPONENT_TOKEN,
534
- useExisting: ActionButtonGroupComponent,
535
- },
536
- ], queries: [{ propertyName: "actions", predicate: ActionButtonComponent }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"v-action-button-group align-items-center justify-content-center justify-content-md-end\"\n>\n <div class=\"v-action-button-group__actions d-flex gap-2\">\n @for (action of visibleActions; track action) {\n <v-action-button\n [disabled]=\"action.disabled\"\n [icon]=\"action.icon\"\n [id]=\"action.id\"\n [outlined]=\"action.outlined\"\n [raised]=\"action.raised\"\n [toolTip]=\"action.toolTip || action.label\"\n [severity]=\"action.severity\"\n [size]=\"action.size\"\n (click)=\"fireClick(action, $event)\"\n ></v-action-button>\n } @if (actions.length > visibleActions.length) {\n <v-dropdown-button\n [label]=\"label\"\n [icon]=\"menuIcon\"\n [items]=\"menuItems\"\n />\n }\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ActionButtonComponent, selector: "v-action-button", inputs: ["disabled", "toolTip", "id", "icon", "outlined", "raised", "severity", "label", "size"], outputs: ["click"] }, { kind: "component", type: DropdownButtonComponent, selector: "v-dropdown-button", inputs: ["label", "icon", "rounded", "raised", "outlined", "severity", "size", "items"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
537
- }
538
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ActionButtonGroupComponent, decorators: [{
539
- type: Component,
540
- args: [{ selector: 'v-action-button-group', imports: [ActionButtonComponent, DropdownButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
541
- {
542
- provide: ACTION_BUTTON_GROUP_COMPONENT_TOKEN,
543
- useExisting: ActionButtonGroupComponent,
544
- },
545
- ], template: "<div\n class=\"v-action-button-group align-items-center justify-content-center justify-content-md-end\"\n>\n <div class=\"v-action-button-group__actions d-flex gap-2\">\n @for (action of visibleActions; track action) {\n <v-action-button\n [disabled]=\"action.disabled\"\n [icon]=\"action.icon\"\n [id]=\"action.id\"\n [outlined]=\"action.outlined\"\n [raised]=\"action.raised\"\n [toolTip]=\"action.toolTip || action.label\"\n [severity]=\"action.severity\"\n [size]=\"action.size\"\n (click)=\"fireClick(action, $event)\"\n ></v-action-button>\n } @if (actions.length > visibleActions.length) {\n <v-dropdown-button\n [label]=\"label\"\n [icon]=\"menuIcon\"\n [items]=\"menuItems\"\n />\n }\n </div>\n</div>\n" }]
546
- }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$3.ScreenSizeService }], propDecorators: { actions: [{
547
- type: ContentChildren,
548
- args: [ActionButtonComponent]
549
- }], maxItems: [{
550
- type: Input
551
- }], maxItemsMobile: [{
552
- type: Input
553
- }], items: [{
554
- type: Input
555
- }], menuIconPos: [{
556
- type: Input
557
- }], menuIcon: [{
558
- type: Input
559
- }], label: [{
560
- type: Input
561
- }], icon: [{
562
- type: Input
563
- }] } });
564
-
565
- class TooltipComponent {
566
- color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : []));
567
- position = input(undefined, ...(ngDevMode ? [{ debugName: "position" }] : []));
568
- size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : []));
569
- tooltipText = input(undefined, ...(ngDevMode ? [{ debugName: "tooltipText" }] : []));
570
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
571
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.1", type: TooltipComponent, isStandalone: true, selector: "v-tooltip", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<gov-tooltip\n class=\"ms-2\"\n [color]=\"color\"\n [size]=\"size() | govSize\"\n [position]=\"position()\"\n [message]=\"tooltipText()\"\n>\n <ng-content></ng-content>\n</gov-tooltip>", dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovTooltip, selector: "gov-tooltip", inputs: ["color", "icon", "identifier", "message", "position", "size"] }, { kind: "pipe", type: GovSizePipe, name: "govSize" }] });
572
- }
573
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: TooltipComponent, decorators: [{
574
- type: Component,
575
- args: [{ selector: "v-tooltip", imports: [
576
- GovDesignSystemModule,
577
- GovSizePipe
578
- ], template: "<gov-tooltip\n class=\"ms-2\"\n [color]=\"color\"\n [size]=\"size() | govSize\"\n [position]=\"position()\"\n [message]=\"tooltipText()\"\n>\n <ng-content></ng-content>\n</gov-tooltip>" }]
579
- }] });
580
-
581
- class TextfieldComponent extends BaseFormInputComponent {
582
- floatLabel;
583
- type = FieldType.text;
584
- minlength = 0;
585
- maxlength = 524288;
586
- min = -2147483648;
587
- max = 2147483647;
588
- prefix;
589
- sufix;
590
- message;
591
- name;
592
- role;
593
- size = FieldSize.medium;
594
- icon;
595
- iconPos = IconPosition.right;
596
- labelSlot = SlotPosition.top;
597
- errorSlot = SlotPosition.bottom;
598
- messageSlot = SlotPosition.bottom;
599
- constructor(ngControl) {
600
- super(ngControl);
601
- if (ngControl) {
602
- ngControl.valueAccessor = this;
603
- }
604
- }
605
- ngOnInit() {
606
- super.ngOnInit();
607
- if (!this.formControl && this.ngControl) {
608
- this.formControl = this.ngControl.control;
609
- }
610
- if (this.formControl && this.type === FieldType.number) {
611
- this.setMinMaxNumberInputValidators();
612
- }
613
- }
614
- setMinMaxNumberInputValidators() {
615
- if (!this.formControl) {
616
- return;
617
- }
618
- const validators = [];
619
- if (this.min !== undefined && this.min !== null) {
620
- validators.push(Validators.min(this.min));
621
- }
622
- if (this.max !== undefined && this.max !== null) {
623
- validators.push(Validators.max(this.max));
624
- }
625
- this.formControl.addValidators(validators);
626
- this.formControl.updateValueAndValidity({ onlySelf: true, emitEvent: true });
627
- }
628
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: TextfieldComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
629
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: TextfieldComponent, isStandalone: true, selector: "v-textfield", inputs: { floatLabel: "floatLabel", type: "type", minlength: "minlength", maxlength: "maxlength", min: "min", max: "max", prefix: "prefix", sufix: "sufix", message: "message", name: "name", role: "role", size: "size", icon: "icon", iconPos: "iconPos", labelSlot: "labelSlot", errorSlot: "errorSlot", messageSlot: "messageSlot" }, providers: [
630
- {
631
- provide: TEXTFIELD_COMPONENT_TOKEN,
632
- useExisting: TextfieldComponent,
633
- },
634
- ], usesInheritance: true, ngImport: i0, template: "<gov-form-control class=\"mb-3\">\n @if (label) {\n <gov-form-label [slot]=\"labelSlot\" [size]=\"size | govSize\">\n {{ label | translate }}\n @if (tooltip) {\n <v-tooltip [tooltipText]=\"tooltip | translate\" />\n }\n </gov-form-label>\n }\n <gov-form-group>\n <gov-form-input [inputType]=\"type\" [formControl]=\"formControl\" [minlength]=\"minlength\" [maxlength]=\"maxlength\"\n [min]=\"min\" [max]=\"max\" [size]='size | govSize' [name]='name' [role]='role' [required]=\"required\"\n [attr.disabled]=\"disabled ? 'true' : 'false'\" [invalid]=\"ngControl?.errors ? true : false\"\n [placeholder]=\"placeholder\">\n @if (icon) {\n <gov-icon [name]=\"icon\" [slot]=\"iconPos === 'left' ? 'icon-start' : 'icon-end'\" />\n } @if (prefix) {\n <p slot=\"prefix\">\n {{ prefix }}\n </p>\n } @if (sufix) {\n <p slot=\"sufix\">\n {{ sufix }}\n </p>\n }\n </gov-form-input>\n <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n @if (message) {\n <gov-form-message [slot]=\"messageSlot\" color=\"neutral\">\n {{ message }}\n </gov-form-message>\n }\n </gov-form-group>\n</gov-form-control>", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormGroup, selector: "gov-form-group", inputs: ["gap", "orientation"] }, { kind: "component", type: i2.GovFormInput, selector: "gov-form-input", inputs: ["accessibleHidePasswordLabel", "accessibleShowPasswordLabel", "autocomplete", "autocorrect", "cols", "disabled", "identifier", "inputLang", "inputType", "invalid", "max", "maxlength", "min", "minlength", "multiline", "name", "placeholder", "readonly", "required", "role", "rows", "size", "spellcheck", "success", "type", "value"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i2.GovFormMessage, selector: "gov-form-message", inputs: ["color", "size"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "directive", type: i2.TextValueAccessor, selector: "gov-form-input:not([input-type=number]),gov-form-autocomplete" }, { kind: "component", type: TooltipComponent, selector: "v-tooltip", inputs: ["color", "position", "size", "tooltipText"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
635
- }
636
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: TextfieldComponent, decorators: [{
637
- type: Component,
638
- args: [{ selector: 'v-textfield', imports: [
639
- ReactiveFormsModule,
640
- GovDesignSystemModule,
641
- TooltipComponent,
642
- GovSizePipe,
643
- TranslateModule,
644
- ErrorComponent
645
- ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
646
- {
647
- provide: TEXTFIELD_COMPONENT_TOKEN,
648
- useExisting: TextfieldComponent,
649
- },
650
- ], template: "<gov-form-control class=\"mb-3\">\n @if (label) {\n <gov-form-label [slot]=\"labelSlot\" [size]=\"size | govSize\">\n {{ label | translate }}\n @if (tooltip) {\n <v-tooltip [tooltipText]=\"tooltip | translate\" />\n }\n </gov-form-label>\n }\n <gov-form-group>\n <gov-form-input [inputType]=\"type\" [formControl]=\"formControl\" [minlength]=\"minlength\" [maxlength]=\"maxlength\"\n [min]=\"min\" [max]=\"max\" [size]='size | govSize' [name]='name' [role]='role' [required]=\"required\"\n [attr.disabled]=\"disabled ? 'true' : 'false'\" [invalid]=\"ngControl?.errors ? true : false\"\n [placeholder]=\"placeholder\">\n @if (icon) {\n <gov-icon [name]=\"icon\" [slot]=\"iconPos === 'left' ? 'icon-start' : 'icon-end'\" />\n } @if (prefix) {\n <p slot=\"prefix\">\n {{ prefix }}\n </p>\n } @if (sufix) {\n <p slot=\"sufix\">\n {{ sufix }}\n </p>\n }\n </gov-form-input>\n <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n @if (message) {\n <gov-form-message [slot]=\"messageSlot\" color=\"neutral\">\n {{ message }}\n </gov-form-message>\n }\n </gov-form-group>\n</gov-form-control>" }]
651
- }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
652
- type: Optional
653
- }, {
654
- type: Self
655
- }] }], propDecorators: { floatLabel: [{
656
- type: Input
657
- }], type: [{
658
- type: Input
659
- }], minlength: [{
660
- type: Input
661
- }], maxlength: [{
662
- type: Input
663
- }], min: [{
664
- type: Input
665
- }], max: [{
666
- type: Input
667
- }], prefix: [{
668
- type: Input
669
- }], sufix: [{
670
- type: Input
671
- }], message: [{
672
- type: Input
673
- }], name: [{
674
- type: Input
675
- }], role: [{
676
- type: Input
677
- }], size: [{
678
- type: Input
679
- }], icon: [{
680
- type: Input
681
- }], iconPos: [{
682
- type: Input
683
- }], labelSlot: [{
684
- type: Input
685
- }], errorSlot: [{
686
- type: Input
687
- }], messageSlot: [{
688
- type: Input
689
- }] } });
690
-
691
- class DropdownItemComponent {
692
- item;
693
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
694
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: DropdownItemComponent, isStandalone: true, selector: "v-dropdown-item", inputs: { item: "item" }, ngImport: i0, template: "<li\r\n role=\"option\"\r\n class=\"v-dropdown__item\"\r\n [attr.aria-selected]=\"item?.selected\"\r\n [class.is-active]=\"item?.selected\"\r\n>\r\n {{item?.label}}\r\n</li>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
695
- }
696
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DropdownItemComponent, decorators: [{
697
- type: Component,
698
- args: [{ selector: 'v-dropdown-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<li\r\n role=\"option\"\r\n class=\"v-dropdown__item\"\r\n [attr.aria-selected]=\"item?.selected\"\r\n [class.is-active]=\"item?.selected\"\r\n>\r\n {{item?.label}}\r\n</li>" }]
699
- }], propDecorators: { item: [{
700
- type: Input
701
- }] } });
702
-
703
- class DropdownComponent extends BaseFormInputComponent {
704
- changeDetectorRef;
705
- filterTextField;
706
- options = [];
707
- optionLabel;
708
- optionValue;
709
- dropdownIcon;
710
- floatLabel;
711
- lazy;
712
- filter;
713
- editable;
714
- loading;
715
- size = FieldSize.medium;
716
- showFilter = true;
717
- localSearch = true;
718
- forceMinWidth = false;
719
- changed = new EventEmitter();
720
- showed = new EventEmitter();
721
- cleared = new EventEmitter();
722
- lazyLoad = new EventEmitter();
723
- filtered = new EventEmitter();
724
- opened = false;
725
- icons = Icons;
726
- selectedItem;
727
- filterControl = new FormControl('');
728
- filterSub;
729
- dropdownOptions;
730
- pageSize = DEFAULT_PAGE_SIZE;
731
- lastPage;
732
- get labelClasses() {
733
- return {
734
- disabled: this.ngControl?.disabled,
735
- error: this.ngControl?.invalid
736
- };
737
- }
738
- get inputClasses() {
739
- return {
740
- 'disabled-input': this.ngControl?.disabled,
741
- 'error-input': this.ngControl?.invalid
742
- };
743
- }
744
- constructor(ngControl, changeDetectorRef) {
745
- super(ngControl);
746
- this.changeDetectorRef = changeDetectorRef;
747
- }
748
- ngOnInit() {
749
- super.ngOnInit();
750
- this.filterSub = this.filterControl.valueChanges.pipe(debounceTime(300), distinctUntilChanged()).subscribe((value) => {
751
- this.filterOptions(value);
752
- });
753
- }
754
- writeValue(value) {
755
- const selectedItem = (value == undefined || value === "") ? undefined : (this.dropdownOptions?.find(x => x.value === value)
756
- ?? { value, label: '', option: undefined, selected: false });
757
- this.selectItem(selectedItem, false);
758
- this.changeDetectorRef.detectChanges();
759
- }
760
- ngOnChanges(changes) {
761
- if (changes['options'] || changes['loading']) {
762
- this.dropdownOptions = this.convertToOptions();
763
- if (this.selectedItem && !this.selectedItem?.item) {
764
- const item = this.dropdownOptions?.find(x => this.selectedItem?.value === x.value);
765
- if (item) {
766
- this.selectItem(item, false);
767
- }
768
- }
769
- }
770
- this.changeDetectorRef.detectChanges();
771
- }
772
- convertToOptions() {
773
- return this.options?.map((option) => ({
774
- label: (this.optionLabel ? getValueByPath(option, this.optionLabel) : option),
775
- value: this.optionValue ? getValueByPath(option, this.optionValue) : option,
776
- item: option,
777
- selected: false,
778
- }));
779
- }
780
- ngOnDestroy() {
781
- this.filterSub?.unsubscribe();
782
- }
783
- toggleDropdown() {
784
- if (this.ngControl?.disabled) {
785
- return;
786
- }
787
- if (!this.opened) {
788
- this.openDropdown();
789
- }
790
- else {
791
- this.closeDropdown();
792
- }
793
- }
794
- clearSelection(event) {
795
- event.stopPropagation();
796
- this.changed.emit(null);
797
- this.dropdownOptions = this.dropdownOptions?.map(x => ({ ...x, selected: false })) ?? [];
798
- this.ngControl?.control?.setValue(null);
799
- }
800
- openDropdown() {
801
- this.opened = true;
802
- this.setFilterFocus();
803
- this.showed.emit();
804
- }
805
- selectItem(option, emitChange) {
806
- if (option == undefined) {
807
- this.selectedItem = undefined;
808
- this.closeDropdown();
809
- return;
810
- }
811
- if (this.selectedItem && this.selectedItem != option) {
812
- this.selectedItem.selected = false;
813
- }
814
- option.selected = true;
815
- this.selectedItem = option;
816
- if (emitChange) {
817
- if (this.ngControl?.control?.value !== option.value) {
818
- this.changed.emit(option.value);
819
- this.ngControl?.control?.setValue(option?.value);
820
- }
821
- }
822
- this.closeDropdown();
823
- }
824
- onDocumentClick(event) {
825
- const target = event.target;
826
- if (!target.closest('v-dropdown')) {
827
- this.opened = false;
828
- }
829
- }
830
- onScroll(index) {
831
- this.loadDataForIndex(index);
832
- }
833
- onKeyDown(event) {
834
- if (this.formControl.disabled || this.readonly || this.loading || !this.opened) {
835
- return;
836
- }
837
- switch (event.code) {
838
- case 'ArrowDown':
839
- break;
840
- case 'ArrowUp':
841
- break;
842
- case 'ArrowLeft':
843
- case 'ArrowRight':
844
- break;
845
- }
846
- }
847
- loadDataForIndex(index) {
848
- if (this.lazy) {
849
- const currentPage = Math.floor(index / this.pageSize);
850
- const shouldLazyLoad = currentPage !== this.lastPage;
851
- if (shouldLazyLoad) {
852
- this.lastPage = currentPage;
853
- this.lazyLoad.emit({
854
- filter: this.createFilterObject(this.filterControl.value),
855
- offset: currentPage * this.pageSize,
856
- limit: this.pageSize,
857
- });
858
- }
859
- }
860
- }
861
- setFilterFocus() {
862
- setTimeout(() => {
863
- this.filterTextField?.nativeElement?.querySelector("input").focus();
864
- }, 200);
865
- }
866
- closeDropdown() {
867
- this.opened = false;
868
- }
869
- filterOptions(value) {
870
- if (!this.localSearch) {
871
- this.filtered.emit({
872
- filter: !value ? undefined : value,
873
- });
874
- }
875
- if (this.lazy) {
876
- this.loadDataForIndex(0);
877
- }
878
- else {
879
- const loweredFilterValue = value?.toLocaleLowerCase();
880
- this.dropdownOptions = !loweredFilterValue ?
881
- this.convertToOptions()
882
- : this.convertToOptions()?.filter(x => x.label?.toLocaleLowerCase()?.indexOf(loweredFilterValue) !== -1);
883
- this.changeDetectorRef.detectChanges();
884
- }
885
- }
886
- createFilterObject(filterValue) {
887
- return (this.optionLabel ? { [this.optionLabel]: filterValue } : filterValue);
888
- }
889
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DropdownComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
890
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: DropdownComponent, isStandalone: true, selector: "v-dropdown", inputs: { options: "options", optionLabel: "optionLabel", optionValue: "optionValue", dropdownIcon: "dropdownIcon", floatLabel: "floatLabel", lazy: "lazy", filter: "filter", editable: "editable", loading: "loading", size: "size", showFilter: "showFilter", localSearch: "localSearch", forceMinWidth: "forceMinWidth" }, outputs: { changed: "changed", showed: "showed", cleared: "cleared", lazyLoad: "lazyLoad", filtered: "filtered" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
891
- {
892
- provide: DROPDOWN_COMPONENT_TOKEN,
893
- useExisting: DropdownComponent,
894
- },
895
- ], viewQueries: [{ propertyName: "filterTextField", first: true, predicate: ["filterTextField"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"v-dropdown mb-3\"\n (keydown)=\"onKeyDown($event)\"\n>\n <gov-form-control [disabled]=\"this.ngControl?.disabled\">\n <gov-form-label\n [slot]=\"label\"\n [ngClass]=\"labelClasses\"\n >\n <span [ngClass]=\"labelClasses\">\n {{ label ?? '' | translate }}\n @if (tooltip) {\n <v-tooltip [message]=\"tooltip | translate\" />\n }\n </span>\n </gov-form-label>\n <div\n class=\"gov-form-input\"\n [ngStyle]=\"forceMinWidth ? {'min-width': '16rem'} : {}\"\n [ngClass]=\"inputClasses\"\n >\n <div\n class=\"element d-flex gov-form-input-child\"\n [ngClass]=\"labelClasses\"\n (click)=\"toggleDropdown()\"\n >\n <div class=\"v-dropdown__value flex-grow-1 me-1\">{{ selectedItem?.label ?? placeholder }}</div>\n @if (clearable && ngControl?.enabled && selectedItem !== undefined && selectedItem !== null) {\n <gov-icon\n [name]=\"icons.cross\"\n size=\"m\"\n class=\"v-dropdown__clear me-1\"\n color=\"error\"\n (click)=\"clearSelection($event)\"\n />\n }\n @if (loading) {\n <div class=\"v-dropdown__loader\">\n <gov-icon [name]=\"icons.loader\" />\n </div>\n }\n <div class=\"v-dropdown__trigger\">\n <gov-icon [name]=\"opened ? icons.chevronUp : icons.chevronDown\" />\n </div>\n </div>\n </div>\n <div class=\"position-relative\">\n @if (opened) {\n <div class=\"v-dropdown__container\">\n @if (showFilter) {\n <div\n class=\"v-dropdown__filter\"\n #filterTextField\n (keydown)=\"onKeyDown($event)\"\n >\n <v-textfield\n placeholder=\"Search\"\n [formControl]=\"filterControl\"\n iconPos=\"right\"\n [icon]=\"icons.search\"\n />\n </div>\n }\n @if (!dropdownOptions?.length) {\n <div class=\"v-dropdown__no-item\">No option was found.</div>\n } @else {\n <ul\n role=\"listbox\"\n class=\"v-dropdown__list\"\n >\n <cdk-virtual-scroll-viewport\n [itemSize]=\"30\"\n class=\"v-dropdown__scroll\"\n (scrolledIndexChange)=\"onScroll($event)\"\n >\n <v-dropdown-item\n *cdkVirtualFor=\"let option of dropdownOptions;\"\n [item]=\"option\"\n (click)=\"selectItem(option, true)\"\n >\n </v-dropdown-item>\n </cdk-virtual-scroll-viewport>\n </ul>\n }\n </div>\n }\n </div>\n <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n </gov-form-control>\n</div>\n", styles: [".v-dropdown__container{position:absolute;z-index:100;background-color:var(--button-outlined-primary-hover);min-width:100%;border-radius:var(--border-radius, var(--corner-radius-s));border:var(--border-width, .0625rem) solid var(--form-border-color, var(--border-neutral))}.v-dropdown__trigger{min-height:1.5rem;display:flex}.disabled{color:var(--form-state-value-disabled, var(--text-disabled));cursor:default!important;pointer-events:none}.disabled-input{border-color:var(--form-state-border-disabled, var(--border-subtlest))!important;background:var(--form-state-bg-disabled, transparent)}.error{color:var(--form-state-label-error, var(--text-status-error))}.error-input{border-color:var(--form-state-border-error, var(--status-error))!important}.gov-form-input-child{padding:.5rem .75rem;border:0px!important}.v-dropdown__no-item{padding:.5rem}.v-dropdown__list{margin:0;padding:0;list-style-type:none;display:flex;flex-direction:column;overflow:auto}.v-dropdown__scroll{height:10rem}.v-dropdown__filter{padding:.5rem}.v-dropdown__item{padding:.25rem .5rem;cursor:pointer}.v-dropdown__item.is-active{background-color:var(--background-primary);color:var(--text-white)}.v-dropdown__item.is-active:hover{opacity:.8}.v-dropdown__item:hover{background-color:var(--background-primary);color:var(--text-white)}.v-dropdown__loader{width:1.5rem;height:1.5rem;margin-right:1rem;animation:rotate 1s linear infinite;display:inline-block;transform-origin:center;color:var(--color-neutral-300)}.v-dropdown__clear{z-index:99;cursor:pointer}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}::ng-deep .cdk-virtual-scrollable{contain:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }, { kind: "component", type: DropdownItemComponent, selector: "v-dropdown-item", inputs: ["item"] }, { kind: "component", type: TextfieldComponent, selector: "v-textfield", inputs: ["floatLabel", "type", "minlength", "maxlength", "min", "max", "prefix", "sufix", "message", "name", "role", "size", "icon", "iconPos", "labelSlot", "errorSlot", "messageSlot"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i4.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i4.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
896
- }
897
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DropdownComponent, decorators: [{
898
- type: Component,
899
- args: [{ selector: 'v-dropdown', imports: [
900
- CommonModule,
901
- ReactiveFormsModule,
902
- GovDesignSystemModule,
903
- ErrorComponent,
904
- DropdownItemComponent,
905
- TextfieldComponent,
906
- ScrollingModule,
907
- TranslateModule,
908
- ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
909
- {
910
- provide: DROPDOWN_COMPONENT_TOKEN,
911
- useExisting: DropdownComponent,
912
- },
913
- ], schemas: [
914
- NO_ERRORS_SCHEMA
915
- ], template: "<div\n class=\"v-dropdown mb-3\"\n (keydown)=\"onKeyDown($event)\"\n>\n <gov-form-control [disabled]=\"this.ngControl?.disabled\">\n <gov-form-label\n [slot]=\"label\"\n [ngClass]=\"labelClasses\"\n >\n <span [ngClass]=\"labelClasses\">\n {{ label ?? '' | translate }}\n @if (tooltip) {\n <v-tooltip [message]=\"tooltip | translate\" />\n }\n </span>\n </gov-form-label>\n <div\n class=\"gov-form-input\"\n [ngStyle]=\"forceMinWidth ? {'min-width': '16rem'} : {}\"\n [ngClass]=\"inputClasses\"\n >\n <div\n class=\"element d-flex gov-form-input-child\"\n [ngClass]=\"labelClasses\"\n (click)=\"toggleDropdown()\"\n >\n <div class=\"v-dropdown__value flex-grow-1 me-1\">{{ selectedItem?.label ?? placeholder }}</div>\n @if (clearable && ngControl?.enabled && selectedItem !== undefined && selectedItem !== null) {\n <gov-icon\n [name]=\"icons.cross\"\n size=\"m\"\n class=\"v-dropdown__clear me-1\"\n color=\"error\"\n (click)=\"clearSelection($event)\"\n />\n }\n @if (loading) {\n <div class=\"v-dropdown__loader\">\n <gov-icon [name]=\"icons.loader\" />\n </div>\n }\n <div class=\"v-dropdown__trigger\">\n <gov-icon [name]=\"opened ? icons.chevronUp : icons.chevronDown\" />\n </div>\n </div>\n </div>\n <div class=\"position-relative\">\n @if (opened) {\n <div class=\"v-dropdown__container\">\n @if (showFilter) {\n <div\n class=\"v-dropdown__filter\"\n #filterTextField\n (keydown)=\"onKeyDown($event)\"\n >\n <v-textfield\n placeholder=\"Search\"\n [formControl]=\"filterControl\"\n iconPos=\"right\"\n [icon]=\"icons.search\"\n />\n </div>\n }\n @if (!dropdownOptions?.length) {\n <div class=\"v-dropdown__no-item\">No option was found.</div>\n } @else {\n <ul\n role=\"listbox\"\n class=\"v-dropdown__list\"\n >\n <cdk-virtual-scroll-viewport\n [itemSize]=\"30\"\n class=\"v-dropdown__scroll\"\n (scrolledIndexChange)=\"onScroll($event)\"\n >\n <v-dropdown-item\n *cdkVirtualFor=\"let option of dropdownOptions;\"\n [item]=\"option\"\n (click)=\"selectItem(option, true)\"\n >\n </v-dropdown-item>\n </cdk-virtual-scroll-viewport>\n </ul>\n }\n </div>\n }\n </div>\n <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n </gov-form-control>\n</div>\n", styles: [".v-dropdown__container{position:absolute;z-index:100;background-color:var(--button-outlined-primary-hover);min-width:100%;border-radius:var(--border-radius, var(--corner-radius-s));border:var(--border-width, .0625rem) solid var(--form-border-color, var(--border-neutral))}.v-dropdown__trigger{min-height:1.5rem;display:flex}.disabled{color:var(--form-state-value-disabled, var(--text-disabled));cursor:default!important;pointer-events:none}.disabled-input{border-color:var(--form-state-border-disabled, var(--border-subtlest))!important;background:var(--form-state-bg-disabled, transparent)}.error{color:var(--form-state-label-error, var(--text-status-error))}.error-input{border-color:var(--form-state-border-error, var(--status-error))!important}.gov-form-input-child{padding:.5rem .75rem;border:0px!important}.v-dropdown__no-item{padding:.5rem}.v-dropdown__list{margin:0;padding:0;list-style-type:none;display:flex;flex-direction:column;overflow:auto}.v-dropdown__scroll{height:10rem}.v-dropdown__filter{padding:.5rem}.v-dropdown__item{padding:.25rem .5rem;cursor:pointer}.v-dropdown__item.is-active{background-color:var(--background-primary);color:var(--text-white)}.v-dropdown__item.is-active:hover{opacity:.8}.v-dropdown__item:hover{background-color:var(--background-primary);color:var(--text-white)}.v-dropdown__loader{width:1.5rem;height:1.5rem;margin-right:1rem;animation:rotate 1s linear infinite;display:inline-block;transform-origin:center;color:var(--color-neutral-300)}.v-dropdown__clear{z-index:99;cursor:pointer}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}::ng-deep .cdk-virtual-scrollable{contain:none}\n"] }]
916
- }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
917
- type: Optional
918
- }, {
919
- type: Self
920
- }] }, { type: i0.ChangeDetectorRef }], propDecorators: { filterTextField: [{
921
- type: ViewChild,
922
- args: ['filterTextField', { static: false }]
923
- }], options: [{
924
- type: Input
925
- }], optionLabel: [{
926
- type: Input
927
- }], optionValue: [{
928
- type: Input
929
- }], dropdownIcon: [{
930
- type: Input
931
- }], floatLabel: [{
932
- type: Input
933
- }], lazy: [{
934
- type: Input
935
- }], filter: [{
936
- type: Input
937
- }], editable: [{
938
- type: Input
939
- }], loading: [{
940
- type: Input
941
- }], size: [{
942
- type: Input
943
- }], showFilter: [{
944
- type: Input
945
- }], localSearch: [{
946
- type: Input
947
- }], forceMinWidth: [{
948
- type: Input
949
- }], changed: [{
950
- type: Output
951
- }], showed: [{
952
- type: Output
953
- }], cleared: [{
954
- type: Output
955
- }], lazyLoad: [{
956
- type: Output
957
- }], filtered: [{
958
- type: Output
959
- }], onDocumentClick: [{
960
- type: HostListener,
961
- args: ['document:click', ['$event']]
962
- }] } });
963
-
964
- class MultiselectComponent extends BaseFormInputComponent {
965
- constructor(ngControl) {
966
- super(ngControl);
967
- }
968
- options = [];
969
- optionLabel;
970
- optionValue;
971
- dropdownIcon;
972
- floatLabel;
973
- editable = true;
974
- display;
975
- errorSlot = SlotPosition.bottom;
976
- lazy;
977
- filter;
978
- loading = false;
979
- size = FieldSize.medium;
980
- changed = new EventEmitter();
981
- showed = new EventEmitter();
982
- cleared = new EventEmitter();
983
- lazyLoad = new EventEmitter();
984
- filtered = new EventEmitter();
985
- icons = Icons;
986
- lazyLoadOptions = {
987
- limit: 50,
988
- offset: 0,
989
- };
990
- cdRef = inject(ChangeDetectorRef);
991
- ngOnChanges(changes) {
992
- if (changes['options'] && !changes['options'].firstChange) {
993
- this.cdRef.detectChanges();
994
- }
995
- }
996
- onLazyLoad(event) {
997
- if (this.options && this.options.length - event.last <= 0) {
998
- this.lazyLoadOptions.offset = event.last;
999
- this.lazyLoad.emit(this.lazyLoadOptions);
1000
- }
1001
- }
1002
- selectionChange(event) {
1003
- this.cleared.emit(event);
1004
- }
1005
- onDropdownShow() {
1006
- this.showed.emit();
1007
- }
1008
- onDropdownClear() {
1009
- this.cleared.emit();
1010
- }
1011
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MultiselectComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
1012
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: MultiselectComponent, isStandalone: true, selector: "v-multiselect", inputs: { options: "options", optionLabel: "optionLabel", optionValue: "optionValue", dropdownIcon: "dropdownIcon", floatLabel: "floatLabel", editable: "editable", display: "display", errorSlot: "errorSlot", lazy: "lazy", filter: "filter", loading: "loading", size: "size" }, outputs: { changed: "changed", showed: "showed", cleared: "cleared", lazyLoad: "lazyLoad", filtered: "filtered" }, providers: [
1013
- {
1014
- provide: MULTISELECT_COMPONENT_TOKEN,
1015
- useExisting: MultiselectComponent,
1016
- },
1017
- ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<gov-form-control>\n <gov-form-label \n [slot]=\"label\"\n [size]=\"size | govSize\"\n >\n {{ label }}\n </gov-form-label>\n <gov-form-multi-select\n [size]=\"size | govSize\"\n [formControl]=\"formControl\"\n [required]=\"required\"\n [invalid]=\"ngControl && ngControl.errors\"\n [options]=\"options | govMultiselectOptions : optionLabel : optionValue\"\n [placeholder]=\"placeholder ?? ''\"\n (gov-focus)=\"onDropdownShow()\"\n (gov-remove)=\"onDropdownClear()\"\n (gov-change)=\"selectionChange($event)\"\n (lazyLoadEvent)=\"onLazyLoad($any($event))\"\n />\n <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n</gov-form-control>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i2.GovFormMultiSelect, selector: "gov-form-multi-select", inputs: ["disabled", "hideSelectedList", "identifier", "invalid", "messageEmpty", "messageLoading", "name", "options", "placeholder", "required", "size", "success", "value"] }, { kind: "directive", type: i2.SelectValueAccessor, selector: "gov-form-select, gov-form-multi-select" }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "pipe", type: GovMultiselectOptionsPipe, name: "govMultiselectOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1018
- }
1019
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: MultiselectComponent, decorators: [{
1020
- type: Component,
1021
- args: [{ selector: 'v-multiselect', imports: [
1022
- ReactiveFormsModule,
1023
- GovDesignSystemModule,
1024
- GovSizePipe,
1025
- GovMultiselectOptionsPipe,
1026
- ErrorComponent
1027
- ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
1028
- {
1029
- provide: MULTISELECT_COMPONENT_TOKEN,
1030
- useExisting: MultiselectComponent,
1031
- },
1032
- ], template: "<gov-form-control>\n <gov-form-label \n [slot]=\"label\"\n [size]=\"size | govSize\"\n >\n {{ label }}\n </gov-form-label>\n <gov-form-multi-select\n [size]=\"size | govSize\"\n [formControl]=\"formControl\"\n [required]=\"required\"\n [invalid]=\"ngControl && ngControl.errors\"\n [options]=\"options | govMultiselectOptions : optionLabel : optionValue\"\n [placeholder]=\"placeholder ?? ''\"\n (gov-focus)=\"onDropdownShow()\"\n (gov-remove)=\"onDropdownClear()\"\n (gov-change)=\"selectionChange($event)\"\n (lazyLoadEvent)=\"onLazyLoad($any($event))\"\n />\n <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n</gov-form-control>\n" }]
1033
- }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
1034
- type: Optional
1035
- }, {
1036
- type: Self
1037
- }] }], propDecorators: { options: [{
1038
- type: Input
1039
- }], optionLabel: [{
1040
- type: Input
1041
- }], optionValue: [{
1042
- type: Input
1043
- }], dropdownIcon: [{
1044
- type: Input
1045
- }], floatLabel: [{
1046
- type: Input
1047
- }], editable: [{
1048
- type: Input
1049
- }], display: [{
1050
- type: Input
1051
- }], errorSlot: [{
1052
- type: Input
1053
- }], lazy: [{
1054
- type: Input
1055
- }], filter: [{
1056
- type: Input
1057
- }], loading: [{
1058
- type: Input
1059
- }], size: [{
1060
- type: Input
1061
- }], changed: [{
1062
- type: Output
1063
- }], showed: [{
1064
- type: Output
1065
- }], cleared: [{
1066
- type: Output
1067
- }], lazyLoad: [{
1068
- type: Output
1069
- }], filtered: [{
1070
- type: Output
1071
- }] } });
1072
-
1073
- class GenericFieldComponent extends BaseFormInputComponent {
1074
- type = GenericFieldType.text;
1075
- floatLabel;
1076
- optionLabel;
1077
- optionValue;
1078
- options;
1079
- size = FieldSize.medium;
1080
- loading = false;
1081
- lazy = false;
1082
- filter = true;
1083
- datasource;
1084
- filterField;
1085
- showFilter;
1086
- localSearch;
1087
- changed = new EventEmitter();
1088
- showed = new EventEmitter();
1089
- cleared = new EventEmitter();
1090
- lazyLoad = new EventEmitter();
1091
- filtered = new EventEmitter();
1092
- fieldTypes = GenericFieldType;
1093
- icons = Icons;
1094
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: GenericFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1095
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: GenericFieldComponent, isStandalone: true, selector: "v-generic-field", inputs: { type: "type", floatLabel: "floatLabel", optionLabel: "optionLabel", optionValue: "optionValue", options: "options", size: "size", loading: "loading", lazy: "lazy", filter: "filter", datasource: "datasource", filterField: "filterField", showFilter: "showFilter", localSearch: "localSearch" }, outputs: { changed: "changed", showed: "showed", cleared: "cleared", lazyLoad: "lazyLoad", filtered: "filtered" }, providers: [
1096
- {
1097
- provide: GENERIC_FIELD_COMPONENT_TOKEN,
1098
- useExisting: GenericFieldComponent,
1099
- },
1100
- ], usesInheritance: true, ngImport: i0, template: "@if (!type || type === fieldTypes.text) {\n<v-textfield\n [label]=\"label\"\n [floatLabel]=\"floatLabel === true\"\n [size]=\"size\"\n [formControl]=\"formControl\"\n/>\n} @else if (type === fieldTypes.dropdown && !datasource) {\n<v-dropdown\n [label]=\"!floatLabel ? label : ''\"\n [floatLabel]=\"floatLabel ? label : ''\"\n [testId]=\"testId\"\n [options]=\"options\"\n [optionLabel]=\"optionLabel\"\n [optionValue]=\"optionValue ?? optionLabel\"\n [loading]=\"loading\"\n [forceMinWidth]=\"true\"\n [formControl]=\"formControl\"\n [showFilter]=\"showFilter ?? false\"\n [localSearch]=\"localSearch ?? false\"\n (changeEvent)=\"changed.emit($event)\"\n (clearEvent)=\"cleared.emit($event)\"\n (lazyLoadEvent)=\"lazyLoad.emit($any($event))\"\n (showEvent)=\"showed.emit($event)\"\n/> \n} @else if (type === fieldTypes.dropdown && datasource) {\n <v-dropdown\n useDatasource\n [forceMinWidth]=\"true\"\n [datasource]=\"datasource\"\n [optionLabel]=\"optionLabel\"\n [optionValue]=\"optionValue ?? optionLabel\"\n [label]=\"!floatLabel ? label : ''\"\n [floatLabel]=\"floatLabel ? label : ''\"\n [testId]=\"testId\"\n [loading]=\"loading\"\n [formControl]=\"formControl\"\n [showFilter]=\"showFilter ?? false\"\n [filterField]=\"filterField ?? 'fulltext'\"\n [localSearch]=\"localSearch ?? false\"\n (changeEvent)=\"changed.emit($event)\"\n (clearEvent)=\"cleared.emit($event)\"\n (lazyLoadEvent)=\"lazyLoad.emit($any($event))\"\n (showEvent)=\"showed.emit($event)\"\n />\n} @else if (type === fieldTypes.multiselect && !datasource) {\n<v-multiselect\n [label]=\"!floatLabel ? label : ''\"\n [floatLabel]=\"floatLabel ? label : ''\"\n [testId]=\"testId\"\n [options]=\"options\"\n [optionLabel]=\"optionLabel\"\n [optionValue]=\"optionValue ?? optionLabel\"\n [loading]=\"loading\"\n [formControl]=\"formControl\"\n (changeEvent)=\"changed.emit($event)\"\n (clearEvent)=\"cleared.emit($event)\"\n (lazyLoadEvent)=\"lazyLoad.emit($any($event))\"\n (showEvent)=\"showed.emit($event)\"\n/>\n} @else if (type === fieldTypes.multiselect && datasource) {\n<v-multiselect\n useDatasource\n [datasource]=\"datasource\"\n [optionLabel]=\"optionLabel\"\n [optionValue]=\"optionValue ?? optionLabel\"\n [label]=\"!floatLabel ? label : ''\"\n [floatLabel]=\"floatLabel ? label : ''\"\n [testId]=\"testId\"\n [loading]=\"loading\"\n [formControl]=\"formControl\"\n (changeEvent)=\"changed.emit($event)\"\n (clearEvent)=\"cleared.emit($event)\"\n (lazyLoadEvent)=\"lazyLoad.emit($any($event))\"\n (showEvent)=\"showed.emit($event)\"\n/>\n} @else if (type === fieldTypes.checkbox) {\n<v-checkbox\n [label]=\"label\"\n [testId]=\"testId\"\n [formControl]=\"formControl\"\n [indeterminate]=\"true\"\n/>\n} @else if (type === fieldTypes.simplecheckbox) {\n<v-checkbox\n [label]=\"label\"\n [testId]=\"testId\"\n [formControl]=\"formControl\"\n/>\n} @else if (type === fieldTypes.calendar) {\n<v-calendar\n [label]=\"!floatLabel ? label : ''\"\n [floatLabel]=\"floatLabel ? label : ''\"\n [testId]=\"testId\"\n [formControl]=\"formControl\"\n [icon]=\"icons.calendar\"\n/>\n}\n", dependencies: [{ kind: "component", type: DropdownComponent, selector: "v-dropdown", inputs: ["options", "optionLabel", "optionValue", "dropdownIcon", "floatLabel", "lazy", "filter", "editable", "loading", "size", "showFilter", "localSearch", "forceMinWidth"], outputs: ["changed", "showed", "cleared", "lazyLoad", "filtered"] }, { kind: "component", type: CalendarComponent, selector: "v-calendar", inputs: ["icon", "floatLabel", "maxDate", "minDate", "header", "footer", "selectionMode", "size", "errorSlot", "labelSlot", "messageSlot", "message", "name"] }, { kind: "component", type: MultiselectComponent, selector: "v-multiselect", inputs: ["options", "optionLabel", "optionValue", "dropdownIcon", "floatLabel", "editable", "display", "errorSlot", "lazy", "filter", "loading", "size"], outputs: ["changed", "showed", "cleared", "lazyLoad", "filtered"] }, { kind: "component", type: TextfieldComponent, selector: "v-textfield", inputs: ["floatLabel", "type", "minlength", "maxlength", "min", "max", "prefix", "sufix", "message", "name", "role", "size", "icon", "iconPos", "labelSlot", "errorSlot", "messageSlot"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CheckboxComponent, selector: "v-checkbox", inputs: ["size", "value", "name", "indeterminate", "noLabel"] }, { kind: "directive", type: DatasourceDirective, selector: "v-dropdown[useDatasource], v-multiselect[useDatasource], v-generic-field[useDatasource]", inputs: ["datasource", "autoBind", "loadingText", "filterField", "transformFn", "extraFilter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1101
- }
1102
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: GenericFieldComponent, decorators: [{
1103
- type: Component,
1104
- args: [{ selector: 'v-generic-field', imports: [
1105
- DropdownComponent,
1106
- CalendarComponent,
1107
- MultiselectComponent,
1108
- TextfieldComponent,
1109
- ReactiveFormsModule,
1110
- CheckboxComponent,
1111
- DatasourceDirective
1112
- ], providers: [
1113
- {
1114
- provide: GENERIC_FIELD_COMPONENT_TOKEN,
1115
- useExisting: GenericFieldComponent,
1116
- },
1117
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!type || type === fieldTypes.text) {\n<v-textfield\n [label]=\"label\"\n [floatLabel]=\"floatLabel === true\"\n [size]=\"size\"\n [formControl]=\"formControl\"\n/>\n} @else if (type === fieldTypes.dropdown && !datasource) {\n<v-dropdown\n [label]=\"!floatLabel ? label : ''\"\n [floatLabel]=\"floatLabel ? label : ''\"\n [testId]=\"testId\"\n [options]=\"options\"\n [optionLabel]=\"optionLabel\"\n [optionValue]=\"optionValue ?? optionLabel\"\n [loading]=\"loading\"\n [forceMinWidth]=\"true\"\n [formControl]=\"formControl\"\n [showFilter]=\"showFilter ?? false\"\n [localSearch]=\"localSearch ?? false\"\n (changeEvent)=\"changed.emit($event)\"\n (clearEvent)=\"cleared.emit($event)\"\n (lazyLoadEvent)=\"lazyLoad.emit($any($event))\"\n (showEvent)=\"showed.emit($event)\"\n/> \n} @else if (type === fieldTypes.dropdown && datasource) {\n <v-dropdown\n useDatasource\n [forceMinWidth]=\"true\"\n [datasource]=\"datasource\"\n [optionLabel]=\"optionLabel\"\n [optionValue]=\"optionValue ?? optionLabel\"\n [label]=\"!floatLabel ? label : ''\"\n [floatLabel]=\"floatLabel ? label : ''\"\n [testId]=\"testId\"\n [loading]=\"loading\"\n [formControl]=\"formControl\"\n [showFilter]=\"showFilter ?? false\"\n [filterField]=\"filterField ?? 'fulltext'\"\n [localSearch]=\"localSearch ?? false\"\n (changeEvent)=\"changed.emit($event)\"\n (clearEvent)=\"cleared.emit($event)\"\n (lazyLoadEvent)=\"lazyLoad.emit($any($event))\"\n (showEvent)=\"showed.emit($event)\"\n />\n} @else if (type === fieldTypes.multiselect && !datasource) {\n<v-multiselect\n [label]=\"!floatLabel ? label : ''\"\n [floatLabel]=\"floatLabel ? label : ''\"\n [testId]=\"testId\"\n [options]=\"options\"\n [optionLabel]=\"optionLabel\"\n [optionValue]=\"optionValue ?? optionLabel\"\n [loading]=\"loading\"\n [formControl]=\"formControl\"\n (changeEvent)=\"changed.emit($event)\"\n (clearEvent)=\"cleared.emit($event)\"\n (lazyLoadEvent)=\"lazyLoad.emit($any($event))\"\n (showEvent)=\"showed.emit($event)\"\n/>\n} @else if (type === fieldTypes.multiselect && datasource) {\n<v-multiselect\n useDatasource\n [datasource]=\"datasource\"\n [optionLabel]=\"optionLabel\"\n [optionValue]=\"optionValue ?? optionLabel\"\n [label]=\"!floatLabel ? label : ''\"\n [floatLabel]=\"floatLabel ? label : ''\"\n [testId]=\"testId\"\n [loading]=\"loading\"\n [formControl]=\"formControl\"\n (changeEvent)=\"changed.emit($event)\"\n (clearEvent)=\"cleared.emit($event)\"\n (lazyLoadEvent)=\"lazyLoad.emit($any($event))\"\n (showEvent)=\"showed.emit($event)\"\n/>\n} @else if (type === fieldTypes.checkbox) {\n<v-checkbox\n [label]=\"label\"\n [testId]=\"testId\"\n [formControl]=\"formControl\"\n [indeterminate]=\"true\"\n/>\n} @else if (type === fieldTypes.simplecheckbox) {\n<v-checkbox\n [label]=\"label\"\n [testId]=\"testId\"\n [formControl]=\"formControl\"\n/>\n} @else if (type === fieldTypes.calendar) {\n<v-calendar\n [label]=\"!floatLabel ? label : ''\"\n [floatLabel]=\"floatLabel ? label : ''\"\n [testId]=\"testId\"\n [formControl]=\"formControl\"\n [icon]=\"icons.calendar\"\n/>\n}\n" }]
1118
- }], propDecorators: { type: [{
1119
- type: Input
1120
- }], floatLabel: [{
1121
- type: Input
1122
- }], optionLabel: [{
1123
- type: Input
1124
- }], optionValue: [{
1125
- type: Input
1126
- }], options: [{
1127
- type: Input
1128
- }], size: [{
1129
- type: Input
1130
- }], loading: [{
1131
- type: Input
1132
- }], lazy: [{
1133
- type: Input
1134
- }], filter: [{
1135
- type: Input
1136
- }], datasource: [{
1137
- type: Input
1138
- }], filterField: [{
1139
- type: Input
1140
- }], showFilter: [{
1141
- type: Input
1142
- }], localSearch: [{
1143
- type: Input
1144
- }], changed: [{
1145
- type: Output
1146
- }], showed: [{
1147
- type: Output
1148
- }], cleared: [{
1149
- type: Output
1150
- }], lazyLoad: [{
1151
- type: Output
1152
- }], filtered: [{
1153
- type: Output
1154
- }] } });
1155
-
1156
- function generateFormGroup(fields, lastGroupValue, inputGroup, inputGroupChanged = false) {
1157
- const formGroup = (inputGroupChanged
1158
- ? inputGroup ?? lastGroupValue
1159
- : lastGroupValue ?? inputGroup) ?? new UntypedFormGroup({});
1160
- fields?.forEach((field) => {
1161
- const control = formGroup.get(field.name);
1162
- if (!control) {
1163
- formGroup.addControl(field.name, new UntypedFormControl(field.value, field.validator));
1164
- }
1165
- else if (control && control.value !== field.value) {
1166
- control.setValue(field.value);
1167
- control.setValidators(field.validator ?? null);
1168
- }
1169
- else {
1170
- control.setValidators(field.validator ?? null);
1171
- }
1172
- if (field.readonly && (control || formGroup.get(field.name))) {
1173
- formGroup.get(field.name)?.disable();
1174
- }
1175
- });
1176
- if (!inputGroupChanged) {
1177
- for (const field in formGroup.controls) {
1178
- const control = fields?.find((x) => x.name == field);
1179
- if (!control) {
1180
- formGroup.removeControl(field);
1181
- }
1182
- }
1183
- }
1184
- return formGroup;
1185
- }
1186
- function getColumnClass(value) {
1187
- if (!value) {
1188
- return undefined;
1189
- }
1190
- switch (value) {
1191
- case 1:
1192
- return 'col-12';
1193
- case 2:
1194
- return 'col-12 col-md-6';
1195
- case 3:
1196
- return 'col-12 col-md-4';
1197
- case 4:
1198
- return 'col-12 col-md-3';
1199
- case 6:
1200
- return 'col-12 col-md-2';
1201
- }
1202
- return 'col-12 col-md-1';
1203
- }
1204
-
1205
- class GenericFormComponent {
1206
- formGroup;
1207
- fields;
1208
- columns;
1209
- showAsRow;
1210
- formGroupComputed;
1211
- columnClass;
1212
- ngOnChanges(changes) {
1213
- if (changes['fields'] || changes['formGroup']) {
1214
- this.formGroupComputed = generateFormGroup(this.fields, this.formGroupComputed, this.formGroup, !!changes['formGroup']);
1215
- }
1216
- if (changes['columns']) {
1217
- this.columnClass = getColumnClass(this.columns);
1218
- }
1219
- }
1220
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: GenericFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1221
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: GenericFormComponent, isStandalone: true, selector: "v-generic-form", inputs: { formGroup: "formGroup", fields: "fields", columns: "columns", showAsRow: "showAsRow" }, usesOnChanges: true, ngImport: i0, template: "@if (formGroupComputed) {\r\n <div\r\n class=\"v-generic-form\"\r\n [ngClass]=\"showAsRow ? 'd-flex flex-row' : 'row'\"\r\n [formGroup]=\"formGroupComputed\"\r\n >\r\n @for(field of fields; track field) { @if (columnClass) {\r\n <div class=\"v-generic-form__column {{ columnClass }}\">\r\n <v-generic-field\r\n [type]=\"field.type\"\r\n [label]=\"field.label ?? 'NOT SET' | translate\"\r\n [floatLabel]=\"field.floatLabel\"\r\n [testId]=\"field.testId\"\r\n [options]=\"field.options\"\r\n [optionLabel]=\"field.optionLabel\"\r\n [optionValue]=\"field.optionValue ?? field.optionLabel\"\r\n [options]=\"field.options\"\r\n [size]=\"field.size\"\r\n [formControlName]=\"field.name\"\r\n [datasource]=\"field.datasource\"\r\n [showFilter]=\"field.showFilter\"\r\n [filterField]=\"field.filterField\"\r\n [localSearch]=\"field.localSearch\"\r\n ></v-generic-field>\r\n </div>\r\n } @else {\r\n <v-generic-field\r\n class=\"me-4\"\r\n [type]=\"field.type\"\r\n [label]=\"field.label ?? 'NOT SET' | translate\"\r\n [floatLabel]=\"field.floatLabel\"\r\n [testId]=\"field.testId\"\r\n [options]=\"field.options\"\r\n [optionLabel]=\"field.optionLabel\"\r\n [optionValue]=\"field.optionValue ?? field.optionLabel\"\r\n [options]=\"field.options\"\r\n [size]=\"field.size\"\r\n [formControlName]=\"field.name\"\r\n [datasource]=\"field.datasource\"\r\n [showFilter]=\"field.showFilter\"\r\n [filterField]=\"field.filterField\"\r\n [localSearch]=\"field.localSearch\"\r\n ></v-generic-field>\r\n } }\r\n </div>\r\n }\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: GenericFieldComponent, selector: "v-generic-field", inputs: ["type", "floatLabel", "optionLabel", "optionValue", "options", "size", "loading", "lazy", "filter", "datasource", "filterField", "showFilter", "localSearch"], outputs: ["changed", "showed", "cleared", "lazyLoad", "filtered"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1222
- }
1223
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: GenericFormComponent, decorators: [{
1224
- type: Component,
1225
- args: [{ selector: 'v-generic-form', imports: [
1226
- CommonModule,
1227
- GenericFieldComponent,
1228
- ReactiveFormsModule,
1229
- TranslateModule,
1230
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (formGroupComputed) {\r\n <div\r\n class=\"v-generic-form\"\r\n [ngClass]=\"showAsRow ? 'd-flex flex-row' : 'row'\"\r\n [formGroup]=\"formGroupComputed\"\r\n >\r\n @for(field of fields; track field) { @if (columnClass) {\r\n <div class=\"v-generic-form__column {{ columnClass }}\">\r\n <v-generic-field\r\n [type]=\"field.type\"\r\n [label]=\"field.label ?? 'NOT SET' | translate\"\r\n [floatLabel]=\"field.floatLabel\"\r\n [testId]=\"field.testId\"\r\n [options]=\"field.options\"\r\n [optionLabel]=\"field.optionLabel\"\r\n [optionValue]=\"field.optionValue ?? field.optionLabel\"\r\n [options]=\"field.options\"\r\n [size]=\"field.size\"\r\n [formControlName]=\"field.name\"\r\n [datasource]=\"field.datasource\"\r\n [showFilter]=\"field.showFilter\"\r\n [filterField]=\"field.filterField\"\r\n [localSearch]=\"field.localSearch\"\r\n ></v-generic-field>\r\n </div>\r\n } @else {\r\n <v-generic-field\r\n class=\"me-4\"\r\n [type]=\"field.type\"\r\n [label]=\"field.label ?? 'NOT SET' | translate\"\r\n [floatLabel]=\"field.floatLabel\"\r\n [testId]=\"field.testId\"\r\n [options]=\"field.options\"\r\n [optionLabel]=\"field.optionLabel\"\r\n [optionValue]=\"field.optionValue ?? field.optionLabel\"\r\n [options]=\"field.options\"\r\n [size]=\"field.size\"\r\n [formControlName]=\"field.name\"\r\n [datasource]=\"field.datasource\"\r\n [showFilter]=\"field.showFilter\"\r\n [filterField]=\"field.filterField\"\r\n [localSearch]=\"field.localSearch\"\r\n ></v-generic-field>\r\n } }\r\n </div>\r\n }\r\n" }]
1231
- }], propDecorators: { formGroup: [{
1232
- type: Input
1233
- }], fields: [{
1234
- type: Input
1235
- }], columns: [{
1236
- type: Input
1237
- }], showAsRow: [{
1238
- type: Input
1239
- }] } });
1240
-
1241
- class FilterFieldDirective {
1242
- name;
1243
- type = GenericFieldType.text;
1244
- label;
1245
- optionLabel;
1246
- optionValue;
1247
- options;
1248
- value;
1249
- validator;
1250
- datasource;
1251
- filterField;
1252
- showFilter;
1253
- localSearch;
1254
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: FilterFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1255
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.1", type: FilterFieldDirective, isStandalone: true, selector: "v-filter-field", inputs: { name: "name", type: "type", label: "label", optionLabel: "optionLabel", optionValue: "optionValue", options: "options", value: "value", validator: "validator", datasource: "datasource", filterField: "filterField", showFilter: "showFilter", localSearch: "localSearch" }, ngImport: i0 });
1256
- }
1257
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: FilterFieldDirective, decorators: [{
1258
- type: Directive,
1259
- args: [{
1260
- // eslint-disable-next-line @angular-eslint/directive-selector
1261
- selector: 'v-filter-field',
1262
- standalone: true,
1263
- }]
1264
- }], propDecorators: { name: [{
1265
- type: Input,
1266
- args: [{ required: true }]
1267
- }], type: [{
1268
- type: Input
1269
- }], label: [{
1270
- type: Input
1271
- }], optionLabel: [{
1272
- type: Input
1273
- }], optionValue: [{
1274
- type: Input
1275
- }], options: [{
1276
- type: Input
1277
- }], value: [{
1278
- type: Input
1279
- }], validator: [{
1280
- type: Input
1281
- }], datasource: [{
1282
- type: Input
1283
- }], filterField: [{
1284
- type: Input
1285
- }], showFilter: [{
1286
- type: Input
1287
- }], localSearch: [{
1288
- type: Input
1289
- }] } });
1290
-
1291
- function getFilledControlCount(formGroup) {
1292
- let count = 0;
1293
- Object.keys(formGroup.controls).forEach((key) => {
1294
- const control = formGroup.get(key);
1295
- if (control?.value) {
1296
- if (typeof control.value === 'boolean') {
1297
- count++;
1298
- }
1299
- if (typeof control.value === 'string' && control.value.trim() !== '') {
1300
- count++;
1301
- }
1302
- }
1303
- });
1304
- return count;
1305
- }
1306
-
1307
- class FilterComponent extends UnsubscribeComponent {
1308
- fieldDeclarations;
1309
- fields = [];
1310
- filters = [];
1311
- title;
1312
- fulltextFieldName = 'searchField';
1313
- showFulltext = true;
1314
- showFilters = true;
1315
- autoBind = true;
1316
- debounceTime = DEFAULT_DEBOUNCE_TIME;
1317
- icons = Icons;
1318
- fieldDefinitios$;
1319
- formGroup$;
1320
- simpleFormFieldDefinitions$;
1321
- searchField = {
1322
- name: this.fulltextFieldName,
1323
- };
1324
- onTouch;
1325
- onChange;
1326
- inputFields$ = new BehaviorSubject([...this.fields ?? [], ...this.filters ?? []]);
1327
- FieldSize = FieldSize;
1328
- screenSizeService = inject(ScreenSizeService);
1329
- changeDetectorRef = inject(ChangeDetectorRef);
1330
- dialogService = inject(DialogService);
1331
- service;
1332
- formGroup = new FormGroup({});
1333
- filledFiltersCount$ = this.formGroup.valueChanges.pipe(startWith(this.formGroup), map(() => getFilledControlCount(this.formGroup).toString()));
1334
- lastFormFields = [];
1335
- ngOnInit() {
1336
- this.formGroup.valueChanges
1337
- .pipe(takeUntil(this.destroyed$), debounceTime(this.debounceTime ?? DEFAULT_DEBOUNCE_TIME), map((x) => this.convertFilter(x)), distinctUntilChanged())
1338
- .subscribe((value) => this.onChange?.(value));
1339
- }
1340
- ngOnChanges(changes) {
1341
- if (changes['fields'] || changes['filters']) {
1342
- this.inputFields$.next([...this.fields ?? [], ...this.filters ?? []]);
1343
- }
1344
- }
1345
- ngAfterContentInit() {
1346
- const fieldDeclaratios$ = this.fieldDeclarations.changes.pipe(startWith({}), map(() => this.fieldDeclarations.toArray()));
1347
- this.fieldDefinitios$ = this.inputFields$.pipe(combineLatestWith(fieldDeclaratios$), map(([inputs, views]) => {
1348
- this.searchField.name = this.fulltextFieldName;
1349
- this.lastFormFields = [this.searchField, ...(inputs ?? []), ...views];
1350
- return this.lastFormFields;
1351
- }));
1352
- this.simpleFormFieldDefinitions$ = this.fieldDefinitios$.pipe(map((fields) => {
1353
- return fields
1354
- .filter((x) => x.name !== this.fulltextFieldName)
1355
- .map((x) => ({ ...x, floatLabel: true, size: FieldSize.large }));
1356
- }));
1357
- this.formGroup$ = this.fieldDefinitios$.pipe(map((fields) => generateFormGroup(fields, this.formGroup, undefined, false)));
1358
- this.changeDetectorRef.detectChanges();
1359
- }
1360
- openFilter() {
1361
- const fields = this.lastFormFields.map((x) => ({
1362
- ...x,
1363
- label: x.name === this.fulltextFieldName ? 'Fulltext' : x.label ?? x.name,
1364
- }));
1365
- const formGroup = generateFormGroup(this.lastFormFields, undefined, undefined, false);
1366
- formGroup.patchValue(this.formGroup.value);
1367
- this.dialogService.showDialog({
1368
- title: 'Set filters',
1369
- headerIcon: this.icons.filter,
1370
- severity: 'primary',
1371
- componentType: GenericFormComponent,
1372
- data: {
1373
- formGroup,
1374
- fields: fields,
1375
- columns: 1,
1376
- },
1377
- confirmButtonFn: () => this.setFilterValues(formGroup),
1378
- confirmButtonText: 'Apply',
1379
- cancelButtonFn: () => this.clear(),
1380
- cancelButtonText: 'Clear all',
1381
- showCancelButton: true,
1382
- closable: false,
1383
- });
1384
- }
1385
- openSearch() {
1386
- this.dialogService.showDialog({
1387
- headerIcon: 'pi pi-search',
1388
- severity: 'primary',
1389
- innerHTML: '<p>Search</p>',
1390
- confirmButtonFn: () => this.submitValue(),
1391
- confirmButtonText: 'Apply',
1392
- cancelButtonFn: () => this.clear(),
1393
- cancelButtonText: 'Clear all',
1394
- showCancelButton: true,
1395
- closable: false,
1396
- });
1397
- }
1398
- writeValue(data) {
1399
- this.formGroup.patchValue(data);
1400
- }
1401
- registerOnChange(fn) {
1402
- this.onChange = fn;
1403
- }
1404
- registerOnTouched(fn) {
1405
- this.onTouch = fn;
1406
- }
1407
- setDisabledState(isDisabled) {
1408
- isDisabled ? this.formGroup.disable() : this.formGroup.enable();
1409
- }
1410
- submitValue() {
1411
- if (!this.autoBind) {
1412
- this.onChange?.(this.formGroup.value);
1413
- }
1414
- }
1415
- setFilterValues(dialogFormGroup) {
1416
- this.formGroup.setValue(dialogFormGroup.value);
1417
- this.submitValue();
1418
- }
1419
- clear() {
1420
- this.formGroup.reset();
1421
- this.submitValue();
1422
- }
1423
- convertFilter(value) {
1424
- if (value == undefined) {
1425
- return undefined;
1426
- }
1427
- const isEmpty = isFilterEmpty(value);
1428
- if (isEmpty) {
1429
- return undefined;
1430
- }
1431
- return value;
1432
- }
1433
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: FilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1434
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: FilterComponent, isStandalone: true, selector: "v-filter", inputs: { fields: "fields", filters: "filters", title: "title", fulltextFieldName: "fulltextFieldName", showFulltext: "showFulltext", showFilters: "showFilters", autoBind: "autoBind", debounceTime: "debounceTime" }, providers: [
1435
- {
1436
- provide: NG_VALUE_ACCESSOR,
1437
- useExisting: forwardRef(() => FilterComponent),
1438
- multi: true,
1439
- },
1440
- {
1441
- provide: FILTER_COMPONENT_TOKEN,
1442
- useExisting: FilterComponent,
1443
- },
1444
- ], queries: [{ propertyName: "fieldDeclarations", predicate: FilterFieldDirective }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"v-filter w-100 p-3 bg-primary\">\n @if (formGroup$ | async; as formGroup){\n <form [formGroup]=\"formGroup\" class=\"d-flex align-items-center\">\n @if (title) {\n <div class=\"v-filter_title pe-4\">\n <h2 class=\"text-white m-0\">{{ title }}</h2>\n </div>\n }\n <div class=\"v-filter__fulltext flex-grow-1 pe-4\">\n @if (showFulltext){\n <v-textfield\n class=\"d-none d-lg-block\"\n placeholder=\"Search\"\n size=\"large\"\n formControlName=\"searchField\"\n type=\"search\"\n [clearable]=\"true\"\n >\n </v-textfield>\n }\n </div>\n @if (simpleFormFieldDefinitions$ | async; as declaration){\n @if (showFilters)\n {\n <div class=\"v-filter_filters d-none d-sm-block me-2\">\n <v-generic-form\n [fields]=\"declaration\"\n [formGroup]=\"formGroup\"\n ></v-generic-form>\n <v-button label=\"X\" class=\"mt-3\" (click)=\"clear()\" />\n </div>\n }\n <div class=\"v-filter_action-buttons d-flex\">\n @if (declaration.length && !showFilters) {\n <v-button \n class=\"me-4\"\n [icon]=\"icons.filter\"\n [label]=\"$any(filledFiltersCount$ | async)\"\n (click)=\"openFilter()\"\n />\n } @if (!autoBind) {\n <v-button\n useShortCut\n [shortCutFn]=\"submitValue.bind(this)\"\n shortCutKey=\"Enter\"\n class=\"text-white mx-2\"\n [outlined]=\"true\"\n size=\"small\"\n label=\"Apply\"\n (click)=\"submitValue()\"\n ></v-button>\n <v-button\n useShortCut\n [shortCutFn]=\"clear.bind(this)\"\n shortCutKey=\"Escape\"\n class=\"text-white\"\n [outlined]=\"true\"\n size=\"small\"\n label=\"Clear\"\n (click)=\"clear()\"\n ></v-button>\n } \n </div>\n }\n <ng-content select=\"v-action-button-group\"></ng-content>\n </form>\n }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TextfieldComponent, selector: "v-textfield", inputs: ["floatLabel", "type", "minlength", "maxlength", "min", "max", "prefix", "sufix", "message", "name", "role", "size", "icon", "iconPos", "labelSlot", "errorSlot", "messageSlot"] }, { kind: "component", type: GenericFormComponent, selector: "v-generic-form", inputs: ["formGroup", "fields", "columns", "showAsRow"] }, { kind: "component", type: ButtonComponent, selector: "v-button", inputs: ["label", "icon", "badge", "iconPos", "disabled", "rounded", "outlined", "raised", "routerLink", "size", "queryParams", "severity", "type", "expanded", "name"], outputs: ["click"] }, { kind: "directive", type: ButtonShortCutDirective, selector: "v-button[useShortCut]", inputs: ["shortCutFn", "shortCutKey"], exportAs: ["useShortCut"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1445
- }
1446
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: FilterComponent, decorators: [{
1447
- type: Component,
1448
- args: [{ selector: 'v-filter', imports: [
1449
- AsyncPipe,
1450
- ReactiveFormsModule,
1451
- TextfieldComponent,
1452
- GenericFormComponent,
1453
- ButtonComponent,
1454
- ButtonShortCutDirective,
1455
- ], providers: [
1456
- {
1457
- provide: NG_VALUE_ACCESSOR,
1458
- useExisting: forwardRef(() => FilterComponent),
1459
- multi: true,
1460
- },
1461
- {
1462
- provide: FILTER_COMPONENT_TOKEN,
1463
- useExisting: FilterComponent,
1464
- },
1465
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"v-filter w-100 p-3 bg-primary\">\n @if (formGroup$ | async; as formGroup){\n <form [formGroup]=\"formGroup\" class=\"d-flex align-items-center\">\n @if (title) {\n <div class=\"v-filter_title pe-4\">\n <h2 class=\"text-white m-0\">{{ title }}</h2>\n </div>\n }\n <div class=\"v-filter__fulltext flex-grow-1 pe-4\">\n @if (showFulltext){\n <v-textfield\n class=\"d-none d-lg-block\"\n placeholder=\"Search\"\n size=\"large\"\n formControlName=\"searchField\"\n type=\"search\"\n [clearable]=\"true\"\n >\n </v-textfield>\n }\n </div>\n @if (simpleFormFieldDefinitions$ | async; as declaration){\n @if (showFilters)\n {\n <div class=\"v-filter_filters d-none d-sm-block me-2\">\n <v-generic-form\n [fields]=\"declaration\"\n [formGroup]=\"formGroup\"\n ></v-generic-form>\n <v-button label=\"X\" class=\"mt-3\" (click)=\"clear()\" />\n </div>\n }\n <div class=\"v-filter_action-buttons d-flex\">\n @if (declaration.length && !showFilters) {\n <v-button \n class=\"me-4\"\n [icon]=\"icons.filter\"\n [label]=\"$any(filledFiltersCount$ | async)\"\n (click)=\"openFilter()\"\n />\n } @if (!autoBind) {\n <v-button\n useShortCut\n [shortCutFn]=\"submitValue.bind(this)\"\n shortCutKey=\"Enter\"\n class=\"text-white mx-2\"\n [outlined]=\"true\"\n size=\"small\"\n label=\"Apply\"\n (click)=\"submitValue()\"\n ></v-button>\n <v-button\n useShortCut\n [shortCutFn]=\"clear.bind(this)\"\n shortCutKey=\"Escape\"\n class=\"text-white\"\n [outlined]=\"true\"\n size=\"small\"\n label=\"Clear\"\n (click)=\"clear()\"\n ></v-button>\n } \n </div>\n }\n <ng-content select=\"v-action-button-group\"></ng-content>\n </form>\n }\n</div>\n" }]
1466
- }], propDecorators: { fieldDeclarations: [{
1467
- type: ContentChildren,
1468
- args: [FilterFieldDirective]
1469
- }], fields: [{
1470
- type: Input
1471
- }], filters: [{
1472
- type: Input
1473
- }], title: [{
1474
- type: Input
1475
- }], fulltextFieldName: [{
1476
- type: Input
1477
- }], showFulltext: [{
1478
- type: Input
1479
- }], showFilters: [{
1480
- type: Input
1481
- }], autoBind: [{
1482
- type: Input
1483
- }], debounceTime: [{
1484
- type: Input
1485
- }] } });
1486
-
1487
- class LoaderComponent {
1488
- size = FieldSize.medium;
1489
- message;
1490
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1491
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: LoaderComponent, isStandalone: true, selector: "v-loader", inputs: { size: "size", message: "message" }, providers: [
1492
- {
1493
- provide: LOADER_COMPONENT_TOKEN,
1494
- useExisting: LoaderComponent,
1495
- }
1496
- ], ngImport: i0, template: "<div style=\"min-height: 300px;\">\n <gov-loading\n [size]=\"size | govSize\"\n >\n {{ message }}\n </gov-loading>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovLoading, selector: "gov-loading", inputs: ["size"] }, { kind: "pipe", type: GovSizePipe, name: "govSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1497
- }
1498
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: LoaderComponent, decorators: [{
1499
- type: Component,
1500
- args: [{ selector: 'v-loader', imports: [
1501
- GovDesignSystemModule,
1502
- GovSizePipe
1503
- ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
1504
- {
1505
- provide: LOADER_COMPONENT_TOKEN,
1506
- useExisting: LoaderComponent,
1507
- }
1508
- ], template: "<div style=\"min-height: 300px;\">\n <gov-loading\n [size]=\"size | govSize\"\n >\n {{ message }}\n </gov-loading>\n</div>" }]
1509
- }], propDecorators: { size: [{
1510
- type: Input
1511
- }], message: [{
1512
- type: Input
1513
- }] } });
1514
-
1515
- class TablePaginationInfoComponent {
1516
- showingText = 'Showing';
1517
- toText = 'to';
1518
- ofText = 'of';
1519
- entriesText = 'entries';
1520
- currentPage = 0;
1521
- pageSize = 0;
1522
- total = 0;
1523
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: TablePaginationInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1524
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: TablePaginationInfoComponent, isStandalone: true, selector: "v-table-pagination-info", inputs: { showingText: "showingText", toText: "toText", ofText: "ofText", entriesText: "entriesText", currentPage: "currentPage", pageSize: "pageSize", total: "total" }, ngImport: i0, template: "<span>\n {{ showingText }} {{ (currentPage - 1) * pageSize + 1 }} {{ toText }}\n {{\n currentPage * pageSize < total\n ? currentPage * pageSize\n : total\n }}\n {{ ofText }} {{ total }} {{ entriesText }}\n</span>" });
1525
- }
1526
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: TablePaginationInfoComponent, decorators: [{
1527
- type: Component,
1528
- args: [{ standalone: true, selector: "v-table-pagination-info", template: "<span>\n {{ showingText }} {{ (currentPage - 1) * pageSize + 1 }} {{ toText }}\n {{\n currentPage * pageSize < total\n ? currentPage * pageSize\n : total\n }}\n {{ ofText }} {{ total }} {{ entriesText }}\n</span>" }]
1529
- }], propDecorators: { showingText: [{
1530
- type: Input
1531
- }], toText: [{
1532
- type: Input
1533
- }], ofText: [{
1534
- type: Input
1535
- }], entriesText: [{
1536
- type: Input
1537
- }], currentPage: [{
1538
- type: Input
1539
- }], pageSize: [{
1540
- type: Input
1541
- }], total: [{
1542
- type: Input
1543
- }] } });
1544
-
1545
- function getNextSortDirection(sortDirection, isNullable = false) {
1546
- return isNullable && sortDirection === SortDirection.desc
1547
- ? undefined
1548
- : !sortDirection || sortDirection === SortDirection.desc
1549
- ? SortDirection.asc
1550
- : SortDirection.desc;
1551
- }
1552
- function createCustomRoute(row, entityKey, customRoute) {
1553
- return customRoute && entityKey
1554
- ? customRoute + row[entityKey]
1555
- : undefined;
1556
- }
1557
-
1558
- class TableComponent {
1559
- viewColumns;
1560
- rowDetailTemplate;
1561
- rowDetailButtonTemplate;
1562
- sorters;
1563
- data;
1564
- total = 0;
1565
- filter;
1566
- extraFilter;
1567
- loading = false;
1568
- scrollable = true;
1569
- pageSize = DEFAULT_SEARCH_LIMIT;
1570
- currentPage = 1;
1571
- showPaginator = true;
1572
- userTableWrapper = true;
1573
- sortMultiple = false;
1574
- lazy = false;
1575
- selectionMode;
1576
- selection = [];
1577
- showPageSizePicker = true;
1578
- entityKey;
1579
- customRoute;
1580
- disableCustomClicks = false;
1581
- tableName;
1582
- size = FieldSize.medium;
1583
- showActionButtons = false;
1584
- maximumColumnLength = MAX_COLUMN_CHAR_COUNT;
1585
- set columns(value) {
1586
- this._columns = value;
1587
- this.updateColumnModels();
1588
- }
1589
- get columns() {
1590
- return this._columns;
1591
- }
1592
- selectionChange = new EventEmitter();
1593
- lazyLoad = new EventEmitter();
1594
- download = new EventEmitter();
1595
- delete = new EventEmitter();
1596
- save = new EventEmitter();
1597
- cdRef = inject(ChangeDetectorRef);
1598
- router = inject(Router);
1599
- route = inject(ActivatedRoute);
1600
- service = inject(TableService);
1601
- _columns = [];
1602
- tableColumns = [];
1603
- tableRows = [];
1604
- pageSizeOptions = DEFAULT_PAGINATION.map((x) => ({ value: x.toString() }));
1605
- allSelected = false;
1606
- icons = Icons;
1607
- get govPageSize() {
1608
- return this.pageSize.toString();
1609
- }
1610
- get tableRowView() {
1611
- if (this.lazy) {
1612
- return this.tableRows;
1613
- }
1614
- else {
1615
- const start = (this.currentPage - 1) * this.pageSize;
1616
- const end = start + this.pageSize;
1617
- return this.tableRows.slice(start, end);
1618
- }
1619
- }
1620
- get selected() {
1621
- return this.tableRows.filter(r => r.selected);
1622
- }
1623
- get selectedCount() {
1624
- return this.selected.length;
1625
- }
1626
- constructor() {
1627
- effect(() => {
1628
- this.reactToSignals();
1629
- });
1630
- }
1631
- ngOnChanges(changes) {
1632
- if (changes['data']) {
1633
- this.updateRowModels();
1634
- if (!this.lazy && this.data) {
1635
- this.total = this.data.length;
1636
- }
1637
- }
1638
- if (changes['selection']) {
1639
- this.selectSelected();
1640
- }
1641
- if (changes['filter']) {
1642
- this.updateFilter();
1643
- }
1644
- }
1645
- ngAfterViewInit() {
1646
- if (this.viewColumns?.length) {
1647
- this.updateColumnModels();
1648
- this.cdRef.detectChanges();
1649
- }
1650
- }
1651
- sortColumn(column) {
1652
- if (column.sortable) {
1653
- column.sortDirection = getNextSortDirection(column.sortDirection, this.sortMultiple);
1654
- if (!this.sortMultiple) {
1655
- this.tableColumns
1656
- .filter((x) => x !== column)
1657
- .forEach((x) => {
1658
- x.sortDirection = undefined;
1659
- });
1660
- }
1661
- const sorts = this.getSorts().map((x) => ({
1662
- field: 'row.' + x.field,
1663
- direction: x.direction,
1664
- }));
1665
- if (!this.lazy) {
1666
- this.tableRows = multiSort(this.tableRows, sorts);
1667
- }
1668
- else {
1669
- this.fireLazyLoad();
1670
- }
1671
- }
1672
- }
1673
- changePage(event) {
1674
- this.currentPage = event.detail.pagination.currentPage;
1675
- this.fireLazyLoad();
1676
- }
1677
- changePageSize(event) {
1678
- this.pageSize = parseInt(event.detail.value);
1679
- this.currentPage = 1;
1680
- this.fireLazyLoad();
1681
- }
1682
- selectRow(row, event) {
1683
- if (event.ctrlKey || event.metaKey) {
1684
- this.navigate(row, event);
1685
- return;
1686
- }
1687
- if (this.selectionMode === 'single') {
1688
- row.selected = !row.selected;
1689
- this.tableRows.forEach((x) => (x !== row ? (x.selected = false) : null));
1690
- this.fireSelectionChange();
1691
- }
1692
- else if (this.selectionMode === 'multiple') {
1693
- row.selected = !row.selected;
1694
- this.fireSelectionChange();
1695
- }
1696
- }
1697
- navigate(row, event) {
1698
- if (this.disableCustomClicks) {
1699
- return;
1700
- }
1701
- event.preventDefault();
1702
- const targetUrl = this.createUrl(row);
1703
- if (event.ctrlKey || event.metaKey) {
1704
- setTimeout(() => {
1705
- window.open(this.router.serializeUrl(this.router.createUrlTree([targetUrl], { relativeTo: this.route })), '_blank');
1706
- }, 0);
1707
- }
1708
- else {
1709
- this.router.navigate([targetUrl], { relativeTo: this.route });
1710
- }
1711
- }
1712
- navigateNewWindow(row, event) {
1713
- if (this.disableCustomClicks || event.button !== 1) {
1714
- return;
1715
- }
1716
- event.preventDefault();
1717
- const targetUrl = this.createUrl(row);
1718
- window.open(this.router.serializeUrl(this.router.createUrlTree([targetUrl], { relativeTo: this.route })), '_blank');
1719
- }
1720
- toggleAll(event) {
1721
- this.allSelected = event.detail.checked;
1722
- this.tableRows.forEach((x) => (x.selected = this.allSelected));
1723
- this.fireSelectionChange();
1724
- }
1725
- toggleDetail(row) {
1726
- row.expanded = !row.expanded;
1727
- this.cdRef.detectChanges();
1728
- }
1729
- selectRowCheckbox(row, event) {
1730
- row.selected = event.detail.checked;
1731
- this.allSelected = this.tableRows.every((x) => x.selected);
1732
- this.fireSelectionChange();
1733
- }
1734
- truncate(text) {
1735
- return text.length > this.maximumColumnLength
1736
- ? text.slice(0, this.maximumColumnLength) + '...'
1737
- : text;
1738
- }
1739
- deselectAll() {
1740
- this.allSelected = false;
1741
- this.tableRows.forEach(x => (x.selected = this.allSelected));
1742
- }
1743
- createUrl(row) {
1744
- if (row.customRoute) {
1745
- return row.customRoute;
1746
- }
1747
- return row.id.toString();
1748
- }
1749
- reactToSignals() {
1750
- const reload = this.service.reload();
1751
- if (typeof reload === 'symbol') {
1752
- this.fireLazyLoad();
1753
- }
1754
- else if (reload.name === this.tableName) {
1755
- this.fireLazyLoad();
1756
- }
1757
- this.deselectAll();
1758
- }
1759
- updateColumnModels() {
1760
- const viewColumns = this.viewColumns
1761
- ?.toArray()
1762
- .map((x) => x.getDefinition());
1763
- this.tableColumns = [...(this._columns ?? []), ...(viewColumns ?? [])].map((x) => new ColumnModel(x));
1764
- }
1765
- updateRowModels() {
1766
- this.tableRows = (this.data ?? []).map((x) => new RowModel(x, false, false, undefined, undefined, undefined, this.customRoute, this.entityKey));
1767
- }
1768
- fireSelectionChange() {
1769
- const selectedRows = this.tableRows
1770
- .filter((x) => x.selected)
1771
- .map((x) => x.row);
1772
- this.selectionChange.emit(selectedRows);
1773
- }
1774
- selectSelected() {
1775
- if (this.selection?.length && this.selectionMode) {
1776
- const selection = this.selectionMode === TableSelectionMode.single
1777
- ? [this.selection[0]]
1778
- : this.selection;
1779
- const selectionSet = new Set(selection);
1780
- this.tableRows.forEach((item) => {
1781
- item.selected = selectionSet.has(item.row);
1782
- });
1783
- this.allSelected = this.tableRows.every((x) => x.selected);
1784
- }
1785
- }
1786
- fireLazyLoad() {
1787
- const lazyLoadEvent = {
1788
- sort: this.getSorts(),
1789
- offset: (this.currentPage - 1) * this.pageSize,
1790
- limit: this.pageSize,
1791
- filter: this.filter,
1792
- };
1793
- this.lazyLoad.emit(lazyLoadEvent);
1794
- }
1795
- updateFilter() {
1796
- this.fireLazyLoad();
1797
- }
1798
- getSorts() {
1799
- return this.tableColumns
1800
- .filter((x) => x.sortable && x.sortDirection)
1801
- .map((x) => ({
1802
- field: x.id,
1803
- direction: x.sortDirection,
1804
- }));
1805
- }
1806
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1807
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: TableComponent, isStandalone: true, selector: "v-table", inputs: { sorters: "sorters", data: "data", total: "total", filter: "filter", extraFilter: "extraFilter", loading: "loading", scrollable: "scrollable", pageSize: "pageSize", currentPage: "currentPage", showPaginator: "showPaginator", userTableWrapper: "userTableWrapper", sortMultiple: "sortMultiple", lazy: "lazy", selectionMode: "selectionMode", selection: "selection", showPageSizePicker: "showPageSizePicker", entityKey: "entityKey", customRoute: "customRoute", disableCustomClicks: "disableCustomClicks", tableName: "tableName", size: "size", showActionButtons: "showActionButtons", maximumColumnLength: "maximumColumnLength", columns: "columns" }, outputs: { selectionChange: "selectionChange", lazyLoad: "lazyLoad", download: "download", delete: "delete", save: "save" }, providers: [
1808
- {
1809
- provide: TABLE_COMPONENT_TOKEN,
1810
- useExisting: TableComponent,
1811
- },
1812
- ], queries: [{ propertyName: "rowDetailTemplate", first: true, predicate: ["rowDetail"], descendants: true }, { propertyName: "rowDetailButtonTemplate", first: true, predicate: ["rowDetailButton"], descendants: true }, { propertyName: "viewColumns", predicate: TABLE_COLUMN_PROVIDER }], usesOnChanges: true, ngImport: i0, template: "@if (selectionMode === 'multiple' && showActionButtons) {\n<gov-flex\n class=\"gov-table-complex__actions mt-2\"\n justify-content=\"space-between\"\n align-items=\"center\"\n>\n <div class=\"gov-table-complex__records-selected\">\n {{ selectedCount }} {{ ('TABLES.CHOSEN_RECORDS' | translate) ?? 'chosen records'}}\n </div>\n <div>\n <gov-button color=\"primary\" size=\"s\" type=\"solid\" (gov-click)=\"delete.emit(selected)\">\n {{ ('BUTTONS.DELETE' | translate) ?? 'Delete'}}\n </gov-button>\n <gov-button color=\"primary\" size=\"s\" type=\"solid\" (gov-click)=\"save.emit(selected)\">\n {{ ('BUTTONS.SAVE' | translate) ?? 'Save'}}\n </gov-button>\n <gov-button color=\"primary\" size=\"s\" type=\"solid\" (gov-click)=\"download.emit(selected)\">\n {{ ('BUTTONS.DOWNLOAD' | translate) ?? 'Download'}}\n </gov-button>\n <gov-button color=\"primary\" size=\"s\" type=\"solid\" (gov-click)=\"deselectAll()\">\n {{ ('BUTTONS.CANCEL' | translate) ?? 'Cancel'}}\n </gov-button>\n </div>\n</gov-flex>\n}\n\n<div\n class=\" v-table gov-table\"\n [attr.size]=\"size | govSize\"\n>\n <table class=\"v-table__table\">\n <thead class=\"v-table__head\">\n <tr class=\"v-table__header\">\n @if (this.rowDetailTemplate) {\n <th></th>\n } @if (selectionMode === 'multiple') {\n <th scope=\"col\">\n <gov-form-checkbox\n [checked]=\"allSelected\"\n (gov-change)=\"toggleAll($event)\"\n />\n </th>\n }\n @for (column of tableColumns; track column; let index = $index) {\n @if (column.visible && column.forceVisibility !== 'hidden') {\n <th\n scope=\"col\"\n [style]=\"{'text-align': column.textAlign}\"\n >\n <span\n class=\"gov-table--fit-width\"\n [class.v-table__sortable]=\"column.sortable\"\n [class.v-table__sortable--desc]=\"column.sortable && column.sortDirection === 'desc'\"\n [class.v-table__sortable--asc]=\"column.sortable && column.sortDirection === 'asc'\"\n (click)=\"sortColumn(column)\"\n >\n {{ column.headerGetter(column.id, index) | translate }}\n </span>\n </th>\n } @if (this.rowDetailButtonTemplate) {\n <th></th>\n }}\n </tr>\n </thead>\n @if (loading) {\n <v-loader />\n } @else {\n <tbody class=\"v-table__body\">\n @for (data of tableRowView; track data.id; let rowIndex = $index) {\n <tr\n class=\"v-table__row\"\n [class.gov-table--highlight]=\"data.selected && selectionMode\"\n (click)=\"selectRow(data, $event)\"\n (dblclick)=\"navigate(data, $event)\"\n (mousedown)=\"navigateNewWindow(data, $event)\"\n >\n @if (this.rowDetailTemplate) {\n <td>\n <gov-button\n [size]=\"size | govSize\"\n color=\"primary\"\n type=\"solid\"\n (gov-click)=\"toggleDetail(data)\"\n >\n <gov-icon\n [name]=\"data.expanded ? 'chevron-up' : 'chevron-down'\"\n [size]=\"size | govSize\"\n slot=\"icon-start\"\n ></gov-icon>\n </gov-button>\n </td>\n } @if (selectionMode === 'multiple') {\n <td class=\"gov-table--fit-content gov-table--border-right\">\n <gov-form-checkbox\n no-label\n [checked]=\"data.selected\"\n [size]=\"size | govSize\"\n (gov-change)=\"selectRowCheckbox(data, $event)\"\n ></gov-form-checkbox>\n </td>\n }\n @for (column of tableColumns; track column; let columnIndex = $index) {\n @if (column.visible && column.forceVisibility !== 'hidden') {\n <td\n [style]=\"{'text-align': column.textAlign}\"\n [class]=\"column.columnClass!\"\n [class.v-auto-cell]=\"column.template\"\n >\n @if (column.template) {\n <ng-container\n *ngTemplateOutlet=\"\n column.template;\n context: { $implicit: data.row }\n \"\n ></ng-container>\n } @else {\n <span\n [queryParams]=\"column.queryParams ? column.queryParams : undefined\"\n [routerLink]=\"column.routerLink ? column.routerLink(data.row) : undefined\"\n [innerHTML]=\"truncate(column.valueGetter(data.row, rowIndex))\"\n [attr.title]=\"\n column.valueGetter(data.row, rowIndex).length > maximumColumnLength\n ? column.valueGetter(data.row, rowIndex)\n : null\n \"\n ></span>\n }\n </td>\n @if (this.rowDetailButtonTemplate) {\n <td scope=\"\">\n <ng-container\n *ngTemplateOutlet=\"\n this.rowDetailButtonTemplate;\n context: { $implicit: data.row }\n \"\n ></ng-container>\n </td>\n }}}\n </tr>\n @if (this.rowDetailTemplate && data.expanded) {\n <tr>\n <td [attr.colspan]=\"tableColumns.length + 1\">\n <ng-container\n class=\"w-100\"\n *ngTemplateOutlet=\"\n this.rowDetailTemplate;\n context: { $implicit: data.row }\n \"\n ></ng-container>\n </td>\n </tr>\n } } @if (!tableRows.length && !loading){\n <td [attr.colspan]=\"tableColumns.length\">\n <gov-empty align=\"center\" [size]=\"size | govSize\">\n <gov-icon slot=\"icon\" name=\"empty-file\" type=\"colored\"/>\n <p slot=\"headline\">\n {{ ('TABLES.EMPTY' | translate) ?? 'No records were found!' }}\n </p>\n </gov-empty>\n </td>\n }\n </tbody>\n }\n </table>\n @if(showPaginator) {\n <div class=\"v-table__paginator d-flex pt-3 pb-3\">\n @if (tableRows.length) {\n <div class=\"mt-2\">\n <v-table-pagination-info\n [showingText]=\"'TABLES.PAGINATION.SHOWING' | translate\"\n [toText]=\"'TABLES.PAGINATION.TO' | translate\"\n [ofText]=\"'TABLES.PAGINATION.OF' | translate\"\n [entriesText]=\"'TABLES.PAGINATION.ENTRIES' | translate\"\n [currentPage]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [total]=\"total\"\n />\n </div>\n <div class=\"ms-4\">\n <gov-form-select\n [options]=\"pageSizeOptions\"\n [value]=\"govPageSize\"\n (gov-change)=\"changePageSize($event)\"\n ></gov-form-select>\n </div>\n }\n <div class=\"ms-4\">\n <gov-pagination\n [current]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [total]=\"total\"\n [type]=\"'button'\"\n (gov-page)=\"changePage($event)\"\n ></gov-pagination>\n </div>\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";.v-table{position:relative;height:100%;display:flex;flex-direction:column}.v-table__sortable{color:var(--text-primary-color);text-decoration:underline;transition:color .15s ease-in-out;cursor:pointer}.v-table__sortable:after{content:\"\\2191\\2193\";margin-left:.5rem;text-decoration:none;display:inline-block}.v-table__sortable--asc:after{content:\"\\2191\"}.v-table__sortable--desc:after{content:\"\\2193\"}.v-table__header{background-color:var(--background-block-primary);position:sticky;top:0;z-index:2}.v-table__table{width:100%}.v-table__paginator{background-color:var(--background-neutral-white);justify-content:end;position:sticky;bottom:0;z-index:3}.gov-table{width:100%;overflow-x:auto}.gov-table table{table-layout:auto;min-width:100%;border-collapse:collapse}.gov-table table tr.gov-table--highlight td{background-color:var(--background-primary-subtle)}.gov-table table th,.gov-table table td{border-bottom:1px solid var(--border-subtlest);text-align:left}.gov-table table th.gov-table--align-right,.gov-table table td.gov-table--align-right{text-align:right}.gov-table table th.gov-table--vertical-align-top,.gov-table table td.gov-table--vertical-align-top{vertical-align:top}.gov-table table th.gov-table--border-right,.gov-table table td.gov-table--border-right{border-right:1px solid var(--border-subtlest)}.gov-table table th.gov-table--border-left,.gov-table table td.gov-table--border-left{border-left:1px solid var(--border-subtlest)}.gov-table table th.gov-table--border-bottom-none,.gov-table table td.gov-table--border-bottom-none{border-bottom:none}.gov-table table th.gov-table--nowrap,.gov-table table td.gov-table--nowrap{white-space:nowrap}.gov-table table th.gov-table--fit-width,.gov-table table td.gov-table--fit-width{width:1px}.gov-table table th{color:var(--text-primary);background-color:var(--background-neutral-subtlest)}.gov-table table td{background-color:var(--background-neutral-white)}.gov-table table tr.open td{padding:var(--spacing-s) var(--spacing-m)}.gov-table summary::-webkit-details-marker{display:none}.gov-table[size=s] table{border-bottom-left-radius:var(--corner-radius-s);border-bottom-right-radius:var(--corner-radius-s)}.gov-table[size=s] table th,.gov-table[size=s] table td{height:var(--height-2xl);padding:0 var(--spacing-s);font-size:var(--font-size-body-s);line-height:150%;font-weight:400}.gov-table[size=s] table th{font-weight:700}.gov-table[size=m] table{border-bottom-left-radius:var(--corner-radius-m);border-bottom-right-radius:var(--corner-radius-m)}.gov-table[size=m] table th,.gov-table[size=m] table td{height:var(--height-3xl);padding:0 var(--spacing-m);font-size:var(--font-size-body-m);line-height:150%;font-weight:400}.gov-table[size=m] table th{font-weight:700}.gov-table[size=l] table{border-bottom-left-radius:var(--corner-radius-l);border-bottom-right-radius:var(--corner-radius-l)}.gov-table[size=l] table th,.gov-table[size=l] table td{height:var(--height-4xl);padding:0 var(--spacing-l);font-size:var(--font-size-body-l);line-height:150%;font-weight:400}.gov-table[size=l] table th{font-weight:700}.gov-table-complex__name,.gov-table-complex__description{margin:0;color:var(--text-primary)}.gov-table-complex__actions{color:var(--text-white-fixed);background-color:var(--background-primary);padding:var(--spacing-xs) var(--spacing-s)}.gov-table-complex__per-page{width:185px;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovButton, selector: "gov-button", inputs: ["color", "disabled", "download", "expanded", "expandedMobile", "focusable", "href", "hreflang", "identifier", "loading", "name", "nativeType", "referrerpolicy", "rel", "size", "target", "type"] }, { kind: "component", type: i2.GovEmpty, selector: "gov-empty", inputs: ["direction", "size"] }, { kind: "component", type: i2.GovFlex, selector: "gov-flex", inputs: ["alignContent", "alignItems", "alignSelf", "direction", "gap", "justifyContent", "responsive", "wrap"] }, { kind: "component", type: i2.GovFormCheckbox, selector: "gov-form-checkbox", inputs: ["checked", "disabled", "identifier", "indeterminate", "invalid", "name", "noLabel", "required", "size", "value"] }, { kind: "component", type: i2.GovFormSelect, selector: "gov-form-select", inputs: ["disabled", "identifier", "invalid", "name", "options", "required", "size", "success", "value"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "component", type: i2.GovPagination, selector: "gov-pagination", inputs: ["accessiblePageLabel", "accessibleSelectLabel", "color", "current", "labelEnd", "labelNext", "labelPrev", "labelStart", "link", "maxPages", "pageSize", "selectIdentifier", "size", "total", "type"] }, { kind: "directive", type: i2.BooleanValueAccessor, selector: "gov-form-checkbox,gov-form-switch" }, { kind: "directive", type: i2.SelectValueAccessor, selector: "gov-form-select, gov-form-multi-select" }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: LoaderComponent, selector: "v-loader", inputs: ["size", "message"] }, { kind: "component", type: TablePaginationInfoComponent, selector: "v-table-pagination-info", inputs: ["showingText", "toText", "ofText", "entriesText", "currentPage", "pageSize", "total"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: GovSizePipe, name: "govSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1813
- }
1814
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: TableComponent, decorators: [{
1815
- type: Component,
1816
- args: [{ selector: 'v-table', imports: [
1817
- CommonModule,
1818
- RouterModule,
1819
- GovDesignSystemModule,
1820
- NgTemplateOutlet,
1821
- TranslateModule,
1822
- GovSizePipe,
1823
- LoaderComponent,
1824
- TablePaginationInfoComponent,
1825
- ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
1826
- {
1827
- provide: TABLE_COMPONENT_TOKEN,
1828
- useExisting: TableComponent,
1829
- },
1830
- ], template: "@if (selectionMode === 'multiple' && showActionButtons) {\n<gov-flex\n class=\"gov-table-complex__actions mt-2\"\n justify-content=\"space-between\"\n align-items=\"center\"\n>\n <div class=\"gov-table-complex__records-selected\">\n {{ selectedCount }} {{ ('TABLES.CHOSEN_RECORDS' | translate) ?? 'chosen records'}}\n </div>\n <div>\n <gov-button color=\"primary\" size=\"s\" type=\"solid\" (gov-click)=\"delete.emit(selected)\">\n {{ ('BUTTONS.DELETE' | translate) ?? 'Delete'}}\n </gov-button>\n <gov-button color=\"primary\" size=\"s\" type=\"solid\" (gov-click)=\"save.emit(selected)\">\n {{ ('BUTTONS.SAVE' | translate) ?? 'Save'}}\n </gov-button>\n <gov-button color=\"primary\" size=\"s\" type=\"solid\" (gov-click)=\"download.emit(selected)\">\n {{ ('BUTTONS.DOWNLOAD' | translate) ?? 'Download'}}\n </gov-button>\n <gov-button color=\"primary\" size=\"s\" type=\"solid\" (gov-click)=\"deselectAll()\">\n {{ ('BUTTONS.CANCEL' | translate) ?? 'Cancel'}}\n </gov-button>\n </div>\n</gov-flex>\n}\n\n<div\n class=\" v-table gov-table\"\n [attr.size]=\"size | govSize\"\n>\n <table class=\"v-table__table\">\n <thead class=\"v-table__head\">\n <tr class=\"v-table__header\">\n @if (this.rowDetailTemplate) {\n <th></th>\n } @if (selectionMode === 'multiple') {\n <th scope=\"col\">\n <gov-form-checkbox\n [checked]=\"allSelected\"\n (gov-change)=\"toggleAll($event)\"\n />\n </th>\n }\n @for (column of tableColumns; track column; let index = $index) {\n @if (column.visible && column.forceVisibility !== 'hidden') {\n <th\n scope=\"col\"\n [style]=\"{'text-align': column.textAlign}\"\n >\n <span\n class=\"gov-table--fit-width\"\n [class.v-table__sortable]=\"column.sortable\"\n [class.v-table__sortable--desc]=\"column.sortable && column.sortDirection === 'desc'\"\n [class.v-table__sortable--asc]=\"column.sortable && column.sortDirection === 'asc'\"\n (click)=\"sortColumn(column)\"\n >\n {{ column.headerGetter(column.id, index) | translate }}\n </span>\n </th>\n } @if (this.rowDetailButtonTemplate) {\n <th></th>\n }}\n </tr>\n </thead>\n @if (loading) {\n <v-loader />\n } @else {\n <tbody class=\"v-table__body\">\n @for (data of tableRowView; track data.id; let rowIndex = $index) {\n <tr\n class=\"v-table__row\"\n [class.gov-table--highlight]=\"data.selected && selectionMode\"\n (click)=\"selectRow(data, $event)\"\n (dblclick)=\"navigate(data, $event)\"\n (mousedown)=\"navigateNewWindow(data, $event)\"\n >\n @if (this.rowDetailTemplate) {\n <td>\n <gov-button\n [size]=\"size | govSize\"\n color=\"primary\"\n type=\"solid\"\n (gov-click)=\"toggleDetail(data)\"\n >\n <gov-icon\n [name]=\"data.expanded ? 'chevron-up' : 'chevron-down'\"\n [size]=\"size | govSize\"\n slot=\"icon-start\"\n ></gov-icon>\n </gov-button>\n </td>\n } @if (selectionMode === 'multiple') {\n <td class=\"gov-table--fit-content gov-table--border-right\">\n <gov-form-checkbox\n no-label\n [checked]=\"data.selected\"\n [size]=\"size | govSize\"\n (gov-change)=\"selectRowCheckbox(data, $event)\"\n ></gov-form-checkbox>\n </td>\n }\n @for (column of tableColumns; track column; let columnIndex = $index) {\n @if (column.visible && column.forceVisibility !== 'hidden') {\n <td\n [style]=\"{'text-align': column.textAlign}\"\n [class]=\"column.columnClass!\"\n [class.v-auto-cell]=\"column.template\"\n >\n @if (column.template) {\n <ng-container\n *ngTemplateOutlet=\"\n column.template;\n context: { $implicit: data.row }\n \"\n ></ng-container>\n } @else {\n <span\n [queryParams]=\"column.queryParams ? column.queryParams : undefined\"\n [routerLink]=\"column.routerLink ? column.routerLink(data.row) : undefined\"\n [innerHTML]=\"truncate(column.valueGetter(data.row, rowIndex))\"\n [attr.title]=\"\n column.valueGetter(data.row, rowIndex).length > maximumColumnLength\n ? column.valueGetter(data.row, rowIndex)\n : null\n \"\n ></span>\n }\n </td>\n @if (this.rowDetailButtonTemplate) {\n <td scope=\"\">\n <ng-container\n *ngTemplateOutlet=\"\n this.rowDetailButtonTemplate;\n context: { $implicit: data.row }\n \"\n ></ng-container>\n </td>\n }}}\n </tr>\n @if (this.rowDetailTemplate && data.expanded) {\n <tr>\n <td [attr.colspan]=\"tableColumns.length + 1\">\n <ng-container\n class=\"w-100\"\n *ngTemplateOutlet=\"\n this.rowDetailTemplate;\n context: { $implicit: data.row }\n \"\n ></ng-container>\n </td>\n </tr>\n } } @if (!tableRows.length && !loading){\n <td [attr.colspan]=\"tableColumns.length\">\n <gov-empty align=\"center\" [size]=\"size | govSize\">\n <gov-icon slot=\"icon\" name=\"empty-file\" type=\"colored\"/>\n <p slot=\"headline\">\n {{ ('TABLES.EMPTY' | translate) ?? 'No records were found!' }}\n </p>\n </gov-empty>\n </td>\n }\n </tbody>\n }\n </table>\n @if(showPaginator) {\n <div class=\"v-table__paginator d-flex pt-3 pb-3\">\n @if (tableRows.length) {\n <div class=\"mt-2\">\n <v-table-pagination-info\n [showingText]=\"'TABLES.PAGINATION.SHOWING' | translate\"\n [toText]=\"'TABLES.PAGINATION.TO' | translate\"\n [ofText]=\"'TABLES.PAGINATION.OF' | translate\"\n [entriesText]=\"'TABLES.PAGINATION.ENTRIES' | translate\"\n [currentPage]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [total]=\"total\"\n />\n </div>\n <div class=\"ms-4\">\n <gov-form-select\n [options]=\"pageSizeOptions\"\n [value]=\"govPageSize\"\n (gov-change)=\"changePageSize($event)\"\n ></gov-form-select>\n </div>\n }\n <div class=\"ms-4\">\n <gov-pagination\n [current]=\"currentPage\"\n [pageSize]=\"pageSize\"\n [total]=\"total\"\n [type]=\"'button'\"\n (gov-page)=\"changePage($event)\"\n ></gov-pagination>\n </div>\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";.v-table{position:relative;height:100%;display:flex;flex-direction:column}.v-table__sortable{color:var(--text-primary-color);text-decoration:underline;transition:color .15s ease-in-out;cursor:pointer}.v-table__sortable:after{content:\"\\2191\\2193\";margin-left:.5rem;text-decoration:none;display:inline-block}.v-table__sortable--asc:after{content:\"\\2191\"}.v-table__sortable--desc:after{content:\"\\2193\"}.v-table__header{background-color:var(--background-block-primary);position:sticky;top:0;z-index:2}.v-table__table{width:100%}.v-table__paginator{background-color:var(--background-neutral-white);justify-content:end;position:sticky;bottom:0;z-index:3}.gov-table{width:100%;overflow-x:auto}.gov-table table{table-layout:auto;min-width:100%;border-collapse:collapse}.gov-table table tr.gov-table--highlight td{background-color:var(--background-primary-subtle)}.gov-table table th,.gov-table table td{border-bottom:1px solid var(--border-subtlest);text-align:left}.gov-table table th.gov-table--align-right,.gov-table table td.gov-table--align-right{text-align:right}.gov-table table th.gov-table--vertical-align-top,.gov-table table td.gov-table--vertical-align-top{vertical-align:top}.gov-table table th.gov-table--border-right,.gov-table table td.gov-table--border-right{border-right:1px solid var(--border-subtlest)}.gov-table table th.gov-table--border-left,.gov-table table td.gov-table--border-left{border-left:1px solid var(--border-subtlest)}.gov-table table th.gov-table--border-bottom-none,.gov-table table td.gov-table--border-bottom-none{border-bottom:none}.gov-table table th.gov-table--nowrap,.gov-table table td.gov-table--nowrap{white-space:nowrap}.gov-table table th.gov-table--fit-width,.gov-table table td.gov-table--fit-width{width:1px}.gov-table table th{color:var(--text-primary);background-color:var(--background-neutral-subtlest)}.gov-table table td{background-color:var(--background-neutral-white)}.gov-table table tr.open td{padding:var(--spacing-s) var(--spacing-m)}.gov-table summary::-webkit-details-marker{display:none}.gov-table[size=s] table{border-bottom-left-radius:var(--corner-radius-s);border-bottom-right-radius:var(--corner-radius-s)}.gov-table[size=s] table th,.gov-table[size=s] table td{height:var(--height-2xl);padding:0 var(--spacing-s);font-size:var(--font-size-body-s);line-height:150%;font-weight:400}.gov-table[size=s] table th{font-weight:700}.gov-table[size=m] table{border-bottom-left-radius:var(--corner-radius-m);border-bottom-right-radius:var(--corner-radius-m)}.gov-table[size=m] table th,.gov-table[size=m] table td{height:var(--height-3xl);padding:0 var(--spacing-m);font-size:var(--font-size-body-m);line-height:150%;font-weight:400}.gov-table[size=m] table th{font-weight:700}.gov-table[size=l] table{border-bottom-left-radius:var(--corner-radius-l);border-bottom-right-radius:var(--corner-radius-l)}.gov-table[size=l] table th,.gov-table[size=l] table td{height:var(--height-4xl);padding:0 var(--spacing-l);font-size:var(--font-size-body-l);line-height:150%;font-weight:400}.gov-table[size=l] table th{font-weight:700}.gov-table-complex__name,.gov-table-complex__description{margin:0;color:var(--text-primary)}.gov-table-complex__actions{color:var(--text-white-fixed);background-color:var(--background-primary);padding:var(--spacing-xs) var(--spacing-s)}.gov-table-complex__per-page{width:185px;white-space:nowrap}\n"] }]
1831
- }], ctorParameters: () => [], propDecorators: { viewColumns: [{
1832
- type: ContentChildren,
1833
- args: [TABLE_COLUMN_PROVIDER]
1834
- }], rowDetailTemplate: [{
1835
- type: ContentChild,
1836
- args: ['rowDetail', { static: false }]
1837
- }], rowDetailButtonTemplate: [{
1838
- type: ContentChild,
1839
- args: ['rowDetailButton', { static: false }]
1840
- }], sorters: [{
1841
- type: Input
1842
- }], data: [{
1843
- type: Input
1844
- }], total: [{
1845
- type: Input
1846
- }], filter: [{
1847
- type: Input
1848
- }], extraFilter: [{
1849
- type: Input
1850
- }], loading: [{
1851
- type: Input
1852
- }], scrollable: [{
1853
- type: Input
1854
- }], pageSize: [{
1855
- type: Input
1856
- }], currentPage: [{
1857
- type: Input
1858
- }], showPaginator: [{
1859
- type: Input
1860
- }], userTableWrapper: [{
1861
- type: Input
1862
- }], sortMultiple: [{
1863
- type: Input
1864
- }], lazy: [{
1865
- type: Input
1866
- }], selectionMode: [{
1867
- type: Input
1868
- }], selection: [{
1869
- type: Input
1870
- }], showPageSizePicker: [{
1871
- type: Input
1872
- }], entityKey: [{
1873
- type: Input
1874
- }], customRoute: [{
1875
- type: Input
1876
- }], disableCustomClicks: [{
1877
- type: Input
1878
- }], tableName: [{
1879
- type: Input
1880
- }], size: [{
1881
- type: Input
1882
- }], showActionButtons: [{
1883
- type: Input
1884
- }], maximumColumnLength: [{
1885
- type: Input
1886
- }], columns: [{
1887
- type: Input
1888
- }], selectionChange: [{
1889
- type: Output
1890
- }], lazyLoad: [{
1891
- type: Output
1892
- }], download: [{
1893
- type: Output
1894
- }], delete: [{
1895
- type: Output
1896
- }], save: [{
1897
- type: Output
1898
- }] } });
1899
-
1900
- class FeatureListFilterFieldDirective extends FilterFieldDirective {
1901
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: FeatureListFilterFieldDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
1902
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.1", type: FeatureListFilterFieldDirective, isStandalone: true, selector: "v-feature-list-filter-field", usesInheritance: true, ngImport: i0 });
1903
- }
1904
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: FeatureListFilterFieldDirective, decorators: [{
1905
- type: Directive,
1906
- args: [{
1907
- // eslint-disable-next-line @angular-eslint/directive-selector
1908
- selector: 'v-feature-list-filter-field',
1909
- standalone: true,
1910
- }]
1911
- }] });
1912
-
1913
- class FeatureListFilterPipe {
1914
- transform(value) {
1915
- if (!value) {
1916
- return undefined;
1917
- }
1918
- return value.filter(x => x.filter).map((x, index) => ({
1919
- name: x.id,
1920
- label: typeof x.headerName === 'function' ? x.headerName(x.id, index) : x.headerName ?? '',
1921
- type: x.type,
1922
- }));
1923
- }
1924
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: FeatureListFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
1925
- static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.1", ngImport: i0, type: FeatureListFilterPipe, isStandalone: true, name: "featureListColumn" });
1926
- }
1927
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: FeatureListFilterPipe, decorators: [{
1928
- type: Pipe,
1929
- args: [{
1930
- name: 'featureListColumn',
1931
- standalone: true,
1932
- }]
1933
- }] });
1934
-
1935
- class FeatureListPageComponent {
1936
- config;
1937
- constructor(activatedRoute) {
1938
- this.config =
1939
- activatedRoute.snapshot.data[FEATURE_LIST_PAGE_CONFIG_PROPERTY];
1940
- }
1941
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: FeatureListPageComponent, deps: [{ token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
1942
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: FeatureListPageComponent, isStandalone: true, selector: "v-feature-list-page", ngImport: i0, template: `
1943
- <v-feature-list
1944
- [title]="config.title"
1945
- [tableName]="config.tableName"
1946
- [showAdd]="config.showAdd ?? true"
1947
- [showDownload]="config.showDownload ?? true"
1948
- [showDelete]="config.showDelete ?? true"
1949
- >
1950
- </v-feature-list>
1951
- `, isInline: true, dependencies: [{ kind: "component", type: FeatureListComponent, selector: "v-feature-list", inputs: ["autoBind", "title", "columns", "filters", "maxVisibleActions", "tableName", "ngrxFeatureKey", "maxVisibleMobileActions", "showExtendedFilter", "showDownload", "showDelete", "showAdd", "canDownload", "canDelete", "canAdd", "useRouterFilter", "fulltextFieldName", "showFulltext", "deleteConfirmMessage", "autoDeleteEnabled", "autoDownloadEnabled", "downloadFileName", "datasource", "extraFilter", "disableCustomClicks", "maximumColumnLength", "selectionMode"], outputs: ["addClick", "downloadClick", "deleteClick", "selectionChange"] }] });
1952
- }
1953
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: FeatureListPageComponent, decorators: [{
1954
- type: Component,
1955
- args: [{
1956
- selector: 'v-feature-list-page',
1957
- imports: [FeatureListComponent],
1958
- template: `
1959
- <v-feature-list
1960
- [title]="config.title"
1961
- [tableName]="config.tableName"
1962
- [showAdd]="config.showAdd ?? true"
1963
- [showDownload]="config.showDownload ?? true"
1964
- [showDelete]="config.showDelete ?? true"
1965
- >
1966
- </v-feature-list>
1967
- `
1968
- }]
1969
- }], ctorParameters: () => [{ type: i1.ActivatedRoute }] });
1970
-
1971
- const FEATURE_LIST_PAGE_CONFIG_PROPERTY = 'feature_list_config';
1972
- function addFeatureListPage(value) {
1973
- const { config, ...route } = value;
1974
- return {
1975
- component: FeatureListPageComponent,
1976
- ...route,
1977
- data: {
1978
- [FEATURE_LIST_PAGE_CONFIG_PROPERTY]: config,
1979
- ...(route.data ?? {}),
1980
- },
1981
- };
1982
- }
1983
- const FEATURE_LIST_COLUMN_PROVIDER = new InjectionToken('FEATURE_LIST_COLUMN_PROVIDER');
1984
-
1985
- class FeatureListComponent {
1986
- viewColumns;
1987
- fieldDeclarations;
1988
- tableDatasourceDirective;
1989
- autoBind = true;
1990
- title;
1991
- columns;
1992
- filters;
1993
- maxVisibleActions = 2;
1994
- tableName;
1995
- ngrxFeatureKey;
1996
- maxVisibleMobileActions = 0;
1997
- showExtendedFilter = false;
1998
- showDownload = false;
1999
- showDelete = false;
2000
- showAdd = false;
2001
- canDownload = true;
2002
- canDelete = true;
2003
- canAdd = true;
2004
- useRouterFilter = true;
2005
- fulltextFieldName = 'searchField';
2006
- showFulltext = true;
2007
- deleteConfirmMessage;
2008
- autoDeleteEnabled = true;
2009
- autoDownloadEnabled = true;
2010
- downloadFileName = 'export.csv';
2011
- datasource;
2012
- extraFilter;
2013
- disableCustomClicks = false;
2014
- maximumColumnLength = MAX_COLUMN_CHAR_COUNT;
2015
- addClick = new EventEmitter();
2016
- downloadClick = new EventEmitter();
2017
- deleteClick = new EventEmitter();
2018
- selectionChange = new EventEmitter();
2019
- set selectionMode(mode) {
2020
- this._selectionMode = mode;
2021
- }
2022
- get selectionMode() {
2023
- return this.canDelete
2024
- ? TableSelectionMode.single
2025
- : this._selectionMode;
2026
- }
2027
- icons = Icons;
2028
- httpClient = inject(HttpClient);
2029
- baseUrl = inject(BASE_URL_PATH);
2030
- _selectionMode;
2031
- cdRef = inject(ChangeDetectorRef);
2032
- dialogService = inject(DialogService);
2033
- selection = [];
2034
- ngAfterViewInit() {
2035
- if (this.viewColumns?.length) {
2036
- const vewColumns = this.viewColumns
2037
- ?.toArray()
2038
- .map((x) => x.getDefinition());
2039
- this.columns = [...(this.columns ?? []), ...(vewColumns ?? [])];
2040
- this.cdRef.detectChanges();
2041
- }
2042
- if (this.fieldDeclarations?.length) {
2043
- this.filters = this.fieldDeclarations?.toArray();
2044
- }
2045
- this.cdRef.detectChanges();
2046
- }
2047
- selectItems(items) {
2048
- this.selection = items ?? [];
2049
- if (this.selectionMode !== undefined) {
2050
- this.selectionChange.emit(this.selectionMode === 'multiple'
2051
- ? this.selection
2052
- : this.selection[0]);
2053
- }
2054
- }
2055
- startDeleteItems() {
2056
- if (!this.selection.length) {
2057
- return;
2058
- }
2059
- if (this.deleteConfirmMessage) {
2060
- const message = this.deleteConfirmMessage;
2061
- this.dialogService.showDialog({
2062
- innerHTML: message,
2063
- confirmButtonFn: () => this.deleteItems(this.selection),
2064
- });
2065
- }
2066
- else {
2067
- this.deleteItems(this.selection);
2068
- }
2069
- }
2070
- startDownload() {
2071
- this.downloadClick.emit();
2072
- if (!this.autoDownloadEnabled) {
2073
- return;
2074
- }
2075
- const dowloadFn = this.createDownloadFn(this.datasource);
2076
- if (dowloadFn) {
2077
- this.tableDatasourceDirective.params$
2078
- .pipe(take(1), switchMap((params) => dowloadFn(params)))
2079
- .subscribe((blob) => {
2080
- downloadFile(this.downloadFileName, blob);
2081
- });
2082
- }
2083
- }
2084
- deleteItems(items) {
2085
- if (!this.autoDeleteEnabled) {
2086
- this.deleteClick.emit(items);
2087
- }
2088
- else {
2089
- this.forceDelete(items);
2090
- }
2091
- }
2092
- forceDelete(items) {
2093
- const deleteFn = this.createDeleteFn(this.datasource);
2094
- if (deleteFn) {
2095
- const deleteMethods = items.map((x) => deleteFn(x));
2096
- forkJoin(deleteMethods)
2097
- .pipe(take(1))
2098
- .subscribe(() => this.finishDeletion(items));
2099
- }
2100
- else {
2101
- this.finishDeletion(items);
2102
- }
2103
- }
2104
- createDeleteFn(datasource) {
2105
- if (!datasource) {
2106
- return undefined;
2107
- }
2108
- if (typeof datasource === 'string') {
2109
- const service = new BaseHttpService(this.httpClient, this.baseUrl, datasource);
2110
- return (item) => service.delete(item.id);
2111
- }
2112
- if (datasource instanceof BaseHttpService) {
2113
- return (item) => datasource.delete(item.id);
2114
- }
2115
- return undefined;
2116
- }
2117
- createDownloadFn(datasource) {
2118
- if (!datasource) {
2119
- return undefined;
2120
- }
2121
- if (typeof datasource === 'string') {
2122
- const service = new BaseHttpService(this.httpClient, this.baseUrl, datasource);
2123
- return (request) => service.export(request);
2124
- }
2125
- if (datasource instanceof BaseHttpService) {
2126
- return (request) => datasource.export(request);
2127
- }
2128
- const fetchFunction = convertDatasource(datasource, this.baseUrl, this.httpClient);
2129
- return (request) => {
2130
- const allData = [];
2131
- let offset = 0;
2132
- const fetchAllData = () => {
2133
- return fetchFunction({
2134
- ...request,
2135
- offset,
2136
- limit: DEFAULT_PAGE_SIZE,
2137
- }).pipe(take(1), switchMap((response) => {
2138
- allData.push(...response.data);
2139
- if (allData.length < response.total) {
2140
- offset = offset + DEFAULT_PAGE_SIZE;
2141
- return fetchAllData();
2142
- }
2143
- else {
2144
- return of(this.convertToBlob(allData));
2145
- }
2146
- }));
2147
- };
2148
- return fetchAllData();
2149
- };
2150
- }
2151
- finishDeletion(items) {
2152
- if (this.datasource && Array.isArray(this.datasource)) {
2153
- this.datasource = this.datasource.filter((x) => !items.includes(x));
2154
- }
2155
- else {
2156
- this.tableDatasourceDirective.reload();
2157
- }
2158
- this.deleteClick.emit(items);
2159
- }
2160
- convertToBlob(data) {
2161
- const columnModel = this.columns.map((x) => new ColumnModel(x));
2162
- const headers = columnModel.map((x, index) => x.headerGetter(x.id, index));
2163
- const dataValues = data.map((row, rowIndex) => columnModel.map((column) => column.valueGetter(row, rowIndex)));
2164
- const csvData = [headers, ...dataValues]
2165
- .map((row) => row.join(','))
2166
- .join('\n');
2167
- return new Blob([csvData], { type: 'text/csv' });
2168
- }
2169
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: FeatureListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2170
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: FeatureListComponent, isStandalone: true, selector: "v-feature-list", inputs: { autoBind: "autoBind", title: "title", columns: "columns", filters: "filters", maxVisibleActions: "maxVisibleActions", tableName: "tableName", ngrxFeatureKey: "ngrxFeatureKey", maxVisibleMobileActions: "maxVisibleMobileActions", showExtendedFilter: "showExtendedFilter", showDownload: "showDownload", showDelete: "showDelete", showAdd: "showAdd", canDownload: "canDownload", canDelete: "canDelete", canAdd: "canAdd", useRouterFilter: "useRouterFilter", fulltextFieldName: "fulltextFieldName", showFulltext: "showFulltext", deleteConfirmMessage: "deleteConfirmMessage", autoDeleteEnabled: "autoDeleteEnabled", autoDownloadEnabled: "autoDownloadEnabled", downloadFileName: "downloadFileName", datasource: "datasource", extraFilter: "extraFilter", disableCustomClicks: "disableCustomClicks", maximumColumnLength: "maximumColumnLength", selectionMode: "selectionMode" }, outputs: { addClick: "addClick", downloadClick: "downloadClick", deleteClick: "deleteClick", selectionChange: "selectionChange" }, queries: [{ propertyName: "viewColumns", predicate: FEATURE_LIST_COLUMN_PROVIDER }, { propertyName: "fieldDeclarations", predicate: FeatureListFilterFieldDirective }], viewQueries: [{ propertyName: "tableDatasourceDirective", first: true, predicate: TableDatasourceDirective, descendants: true }], ngImport: i0, template: "<div class=\"feature-list__container full-height-container\">\n <v-filter\n #filter\n [title]=\"title\"\n [fields]=\"columns | featureListColumn\"\n [filters]=\"filters\"\n [fulltextFieldName]=\"fulltextFieldName\"\n [showFulltext]=\"showFulltext\"\n [showFilters]=\"showExtendedFilter\"\n >\n <v-action-button-group\n [maxItems]=\"maxVisibleActions\"\n [maxItemsMobile]=\"maxVisibleMobileActions\"\n >\n @if (showAdd) {\n <v-action-button\n [icon]=\"icons.add\"\n label=\"Add\"\n [disabled]=\"!canAdd\"\n (click)=\"addClick.emit()\"\n ></v-action-button>\n } @if (showDelete){\n <v-action-button\n [icon]=\"icons.delete\"\n label=\"Delete\"\n [disabled]=\"!canDelete || !selection.length\"\n (click)=\"startDeleteItems()\"\n ></v-action-button>\n } @if (showDownload){\n <v-action-button\n [icon]=\"icons.download\"\n label=\"Download\"\n [disabled]=\"!canDownload\"\n (click)=\"startDownload()\"\n ></v-action-button>\n }\n </v-action-button-group>\n </v-filter>\n <div class=\"feature-list__table-container full-height-container\">\n <div class=\"full-height-container\">\n <v-table\n useDatasource\n useFilter\n [filterComponent]=\"filter\"\n class=\"full-height-container\"\n [selectionMode]=\"selectionMode\"\n [tableName]=\"tableName\"\n [autoBind]=\"true\"\n [datasource]=\"datasource\"\n [columns]=\"columns\"\n [extraFilter]=\"extraFilter\"\n [maximumColumnLength]=\"maximumColumnLength\"\n [disableCustomClicks]=\"disableCustomClicks\"\n (selectionChange)=\"selectItems($event)\"\n >\n </v-table>\n </div>\n </div>\n</div>\n", styles: [".full-height-container,:host{display:flex;flex-direction:column;flex-grow:1;height:100%}\n"], dependencies: [{ kind: "component", type: TableComponent, selector: "v-table", inputs: ["sorters", "data", "total", "filter", "extraFilter", "loading", "scrollable", "pageSize", "currentPage", "showPaginator", "userTableWrapper", "sortMultiple", "lazy", "selectionMode", "selection", "showPageSizePicker", "entityKey", "customRoute", "disableCustomClicks", "tableName", "size", "showActionButtons", "maximumColumnLength", "columns"], outputs: ["selectionChange", "lazyLoad", "download", "delete", "save"] }, { kind: "directive", type: TableDatasourceDirective, selector: "v-table[useDatasource]", inputs: ["autoBind", "tableName", "debounceTime", "datasource", "extraFilter", "transformFn"], exportAs: ["useDatasource"] }, { kind: "component", type: FilterComponent, selector: "v-filter", inputs: ["fields", "filters", "title", "fulltextFieldName", "showFulltext", "showFilters", "autoBind", "debounceTime"] }, { kind: "directive", type: TableFilterDirective, selector: "v-table[useFilter]", inputs: ["filterComponent"], exportAs: ["tableFilterDirective"] }, { kind: "component", type: ActionButtonGroupComponent, selector: "v-action-button-group", inputs: ["maxItems", "maxItemsMobile", "items", "menuIconPos", "menuIcon", "label", "icon"] }, { kind: "component", type: ActionButtonComponent, selector: "v-action-button", inputs: ["disabled", "toolTip", "id", "icon", "outlined", "raised", "severity", "label", "size"], outputs: ["click"] }, { kind: "pipe", type: FeatureListFilterPipe, name: "featureListColumn" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2171
- }
2172
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: FeatureListComponent, decorators: [{
2173
- type: Component,
2174
- args: [{ selector: 'v-feature-list', imports: [
2175
- TableComponent,
2176
- TableDatasourceDirective,
2177
- FilterComponent,
2178
- TableFilterDirective,
2179
- ActionButtonGroupComponent,
2180
- ActionButtonComponent,
2181
- FeatureListFilterPipe,
2182
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"feature-list__container full-height-container\">\n <v-filter\n #filter\n [title]=\"title\"\n [fields]=\"columns | featureListColumn\"\n [filters]=\"filters\"\n [fulltextFieldName]=\"fulltextFieldName\"\n [showFulltext]=\"showFulltext\"\n [showFilters]=\"showExtendedFilter\"\n >\n <v-action-button-group\n [maxItems]=\"maxVisibleActions\"\n [maxItemsMobile]=\"maxVisibleMobileActions\"\n >\n @if (showAdd) {\n <v-action-button\n [icon]=\"icons.add\"\n label=\"Add\"\n [disabled]=\"!canAdd\"\n (click)=\"addClick.emit()\"\n ></v-action-button>\n } @if (showDelete){\n <v-action-button\n [icon]=\"icons.delete\"\n label=\"Delete\"\n [disabled]=\"!canDelete || !selection.length\"\n (click)=\"startDeleteItems()\"\n ></v-action-button>\n } @if (showDownload){\n <v-action-button\n [icon]=\"icons.download\"\n label=\"Download\"\n [disabled]=\"!canDownload\"\n (click)=\"startDownload()\"\n ></v-action-button>\n }\n </v-action-button-group>\n </v-filter>\n <div class=\"feature-list__table-container full-height-container\">\n <div class=\"full-height-container\">\n <v-table\n useDatasource\n useFilter\n [filterComponent]=\"filter\"\n class=\"full-height-container\"\n [selectionMode]=\"selectionMode\"\n [tableName]=\"tableName\"\n [autoBind]=\"true\"\n [datasource]=\"datasource\"\n [columns]=\"columns\"\n [extraFilter]=\"extraFilter\"\n [maximumColumnLength]=\"maximumColumnLength\"\n [disableCustomClicks]=\"disableCustomClicks\"\n (selectionChange)=\"selectItems($event)\"\n >\n </v-table>\n </div>\n </div>\n</div>\n", styles: [".full-height-container,:host{display:flex;flex-direction:column;flex-grow:1;height:100%}\n"] }]
2183
- }], propDecorators: { viewColumns: [{
2184
- type: ContentChildren,
2185
- args: [FEATURE_LIST_COLUMN_PROVIDER]
2186
- }], fieldDeclarations: [{
2187
- type: ContentChildren,
2188
- args: [FeatureListFilterFieldDirective]
2189
- }], tableDatasourceDirective: [{
2190
- type: ViewChild,
2191
- args: [TableDatasourceDirective]
2192
- }], autoBind: [{
2193
- type: Input
2194
- }], title: [{
2195
- type: Input
2196
- }], columns: [{
2197
- type: Input
2198
- }], filters: [{
2199
- type: Input
2200
- }], maxVisibleActions: [{
2201
- type: Input
2202
- }], tableName: [{
2203
- type: Input,
2204
- args: [{ required: true }]
2205
- }], ngrxFeatureKey: [{
2206
- type: Input
2207
- }], maxVisibleMobileActions: [{
2208
- type: Input
2209
- }], showExtendedFilter: [{
2210
- type: Input
2211
- }], showDownload: [{
2212
- type: Input
2213
- }], showDelete: [{
2214
- type: Input
2215
- }], showAdd: [{
2216
- type: Input
2217
- }], canDownload: [{
2218
- type: Input
2219
- }], canDelete: [{
2220
- type: Input
2221
- }], canAdd: [{
2222
- type: Input
2223
- }], useRouterFilter: [{
2224
- type: Input
2225
- }], fulltextFieldName: [{
2226
- type: Input
2227
- }], showFulltext: [{
2228
- type: Input
2229
- }], deleteConfirmMessage: [{
2230
- type: Input
2231
- }], autoDeleteEnabled: [{
2232
- type: Input
2233
- }], autoDownloadEnabled: [{
2234
- type: Input
2235
- }], downloadFileName: [{
2236
- type: Input
2237
- }], datasource: [{
2238
- type: Input
2239
- }], extraFilter: [{
2240
- type: Input
2241
- }], disableCustomClicks: [{
2242
- type: Input
2243
- }], maximumColumnLength: [{
2244
- type: Input
2245
- }], addClick: [{
2246
- type: Output
2247
- }], downloadClick: [{
2248
- type: Output
2249
- }], deleteClick: [{
2250
- type: Output
2251
- }], selectionChange: [{
2252
- type: Output
2253
- }], selectionMode: [{
2254
- type: Input
2255
- }] } });
2256
-
2257
- class FeatureListColumnDirective extends TableColumnDirective {
2258
- filter = false;
2259
- type = GenericFieldType.text;
2260
- getDefinition() {
2261
- const definition = super.getDefinition();
2262
- definition.filter = this.filter;
2263
- definition.type = this.type;
2264
- definition.format = this.format;
2265
- return definition;
2266
- }
2267
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: FeatureListColumnDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
2268
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.1", type: FeatureListColumnDirective, isStandalone: true, selector: "v-feature-list-column", inputs: { filter: "filter", type: "type" }, providers: [
2269
- {
2270
- provide: FEATURE_LIST_COLUMN_PROVIDER,
2271
- useExisting: FeatureListColumnDirective,
2272
- multi: true,
2273
- },
2274
- ], usesInheritance: true, ngImport: i0 });
2275
- }
2276
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: FeatureListColumnDirective, decorators: [{
2277
- type: Directive,
2278
- args: [{
2279
- // eslint-disable-next-line @angular-eslint/directive-selector
2280
- selector: 'v-feature-list-column',
2281
- standalone: true,
2282
- providers: [
2283
- {
2284
- provide: FEATURE_LIST_COLUMN_PROVIDER,
2285
- useExisting: FeatureListColumnDirective,
2286
- multi: true,
2287
- },
2288
- ],
2289
- }]
2290
- }], propDecorators: { filter: [{
2291
- type: Input
2292
- }], type: [{
2293
- type: Input
2294
- }] } });
2295
-
2296
- /* eslint-disable @typescript-eslint/no-explicit-any */
2297
- class DynamicComponentFactoryService {
2298
- componentFactoryResolver;
2299
- constructor(componentFactoryResolver) {
2300
- this.componentFactoryResolver = componentFactoryResolver;
2301
- }
2302
- ngOnDestroy() {
2303
- this.unsubscribeComponentEvents(this);
2304
- }
2305
- async createDynamicComponent(componentType, viewContainerRef, inputs, injector = undefined) {
2306
- const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentType);
2307
- viewContainerRef.clear();
2308
- const component = viewContainerRef.createComponent(componentFactory, undefined, injector);
2309
- this.setComponentDataInt(componentFactory, component, inputs);
2310
- this.fireComponentEvents(component.instance, inputs);
2311
- return component;
2312
- }
2313
- setComponentData(component, inputs) {
2314
- const factory = this.componentFactoryResolver.resolveComponentFactory(component.componentType);
2315
- this.setComponentDataInt(factory, component, inputs);
2316
- }
2317
- unsubscribeComponentEvents(instance) {
2318
- const subscriptionStoreKey = '__outputSubscriptions__';
2319
- const subscriptions = instance[subscriptionStoreKey];
2320
- if (subscriptions) {
2321
- subscriptions.forEach((sub) => sub.unsubscribe());
2322
- subscriptions.clear();
2323
- }
2324
- }
2325
- fireComponentEvents(instance, inputs) {
2326
- if (!instance || typeof instance !== 'object')
2327
- return;
2328
- this.fireInputComponentEvents(instance, inputs);
2329
- this.fireOutputComponentEvents(instance, inputs);
2330
- }
2331
- setComponentDataInt(factory, component, inputs) {
2332
- if (inputs) {
2333
- const propertyNames = factory.inputs.map((x) => x.propName);
2334
- const inputsHash = new Set(propertyNames);
2335
- Object.keys(inputs)
2336
- .filter((x) => inputsHash.has(x))
2337
- .forEach((x) => {
2338
- component.instance[x] = inputs[x];
2339
- });
2340
- }
2341
- }
2342
- fireInputComponentEvents(instance, inputs) {
2343
- const onChangeComponent = instance;
2344
- if (onChangeComponent.ngOnChanges && inputs) {
2345
- const changeEventArgs = Object.keys(inputs).reduce((changes, key) => {
2346
- const inputValue = inputs[key];
2347
- changes[key] = new SimpleChange(undefined, inputValue, true);
2348
- return changes;
2349
- }, {});
2350
- onChangeComponent.ngOnChanges(changeEventArgs);
2351
- }
2352
- }
2353
- fireOutputComponentEvents(instance, inputs) {
2354
- const outputs = Object.keys(inputs).filter((key) => {
2355
- const emitter = instance[key];
2356
- return emitter instanceof EventEmitter;
2357
- });
2358
- const subscriptionStoreKey = '__outputSubscriptions__';
2359
- if (!(subscriptionStoreKey in instance)) {
2360
- instance[subscriptionStoreKey] = new Map();
2361
- }
2362
- const subscriptions = instance[subscriptionStoreKey];
2363
- for (const outputKey of outputs) {
2364
- const eventEmitter = instance[outputKey];
2365
- const callback = inputs[outputKey];
2366
- if (eventEmitter && typeof callback === 'function') {
2367
- if (subscriptions.has(outputKey)) {
2368
- subscriptions.get(outputKey).unsubscribe();
2369
- }
2370
- const subscription = eventEmitter.subscribe((value) => callback(value));
2371
- subscriptions.set(outputKey, subscription);
2372
- }
2373
- }
2374
- }
2375
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DynamicComponentFactoryService, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Injectable });
2376
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DynamicComponentFactoryService, providedIn: 'root' });
2377
- }
2378
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DynamicComponentFactoryService, decorators: [{
2379
- type: Injectable,
2380
- args: [{
2381
- providedIn: 'root',
2382
- }]
2383
- }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }] });
2384
-
2385
- class DynamicComponent {
2386
- componentType;
2387
- data;
2388
- container;
2389
- factoryServices = inject(DynamicComponentFactoryService);
2390
- changeDetectorRef = inject(ChangeDetectorRef);
2391
- injector = inject(Injector);
2392
- ngOnChanges() {
2393
- this.createComponent();
2394
- }
2395
- ngAfterViewInit() {
2396
- this.createComponent();
2397
- this.changeDetectorRef.detectChanges();
2398
- }
2399
- createComponent() {
2400
- if (this.container) {
2401
- this.factoryServices.createDynamicComponent(this.componentType, this.container, this.data, this.injector);
2402
- }
2403
- }
2404
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DynamicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2405
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: DynamicComponent, isStandalone: true, selector: "v-dynamic-component", inputs: { componentType: "componentType", data: "data" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["dynamicContainer"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: `<ng-container #dynamicContainer></ng-container>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
2406
- }
2407
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DynamicComponent, decorators: [{
2408
- type: Component,
2409
- args: [{
2410
- selector: 'v-dynamic-component',
2411
- standalone: true,
2412
- changeDetection: ChangeDetectionStrategy.OnPush,
2413
- template: `<ng-container #dynamicContainer></ng-container>`,
2414
- }]
2415
- }], propDecorators: { componentType: [{
2416
- type: Input
2417
- }], data: [{
2418
- type: Input
2419
- }], container: [{
2420
- type: ViewChild,
2421
- args: ['dynamicContainer', { read: ViewContainerRef, static: true }]
2422
- }] } });
2423
-
2424
- class ConfirmDialogComponent extends UnsubscribeComponent {
2425
- dialogService;
2426
- cdr;
2427
- constructor(dialogService, cdr) {
2428
- super();
2429
- this.dialogService = dialogService;
2430
- this.cdr = cdr;
2431
- }
2432
- visible = false;
2433
- closable = false;
2434
- data = { severity: 'primary', headerIcon: 'info-circle' };
2435
- ngOnInit() {
2436
- this.dialogService.showEvent
2437
- .pipe(takeUntil(this.destroyed$))
2438
- .subscribe((x) => {
2439
- this.data = x;
2440
- this.visible = true;
2441
- this.cdr.detectChanges();
2442
- });
2443
- this.dialogService.closeEvent
2444
- .pipe(takeUntil(this.destroyed$))
2445
- .subscribe(() => {
2446
- this.data = {};
2447
- this.visible = false;
2448
- this.cdr.detectChanges();
2449
- });
2450
- }
2451
- dialogClick(confirm) {
2452
- const { confirmButtonFn, cancelButtonFn } = this.data;
2453
- if (confirm && confirmButtonFn) {
2454
- confirmButtonFn();
2455
- }
2456
- if (!confirm && cancelButtonFn) {
2457
- cancelButtonFn();
2458
- }
2459
- this.visible = false;
2460
- this.cdr.detectChanges();
2461
- }
2462
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: i1$3.DialogService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
2463
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: ConfirmDialogComponent, isStandalone: true, selector: "v-confirm-dialog", providers: [
2464
- {
2465
- provide: CONFIRM_DIALOG_COMPONENT_TOKEN,
2466
- useExisting: ConfirmDialogComponent,
2467
- },
2468
- ], usesInheritance: true, ngImport: i0, template: "<gov-dialog\n [open]=\"visible\"\n [attr.block-close]=\"data.closable !== undefined ? !data.closable : false\"\n [attr.block-backdrop-close]=\"data.closable !== undefined ? !data.closable : false\" \n [style.--dialog-max-width]=\"data.width\"\n [style.--dialog-max-height]=\"data.height\"\n role=\"dialog\"\n accessible-close-label=\"Close dialog box with more information\"\n (gov-close)=\"data.cancelButtonFn ? dialogClick(false) : (visible = false)\"\n>\n <gov-icon\n type=\"components\"\n [name]=\"data.headerIcon\"\n slot=\"icon\"\n [color]=\"data.severity | govColor\"\n />\n \n <h2 slot=\"title\">{{ data.title ?? 'Title' }}</h2>\n\n @if (data && data.innerHTML) {\n <div [innerHTML]=\"data.innerHTML\"></div>\n } @else if (data.componentType) {\n <v-dynamic-component\n [componentType]=\"data.componentType\"\n [data]=\"$any(data.data)\"\n ></v-dynamic-component>\n }\n\n <gov-button\n color=\"primary\"\n size=\"m\"\n type=\"solid\"\n slot=\"footer\"\n (gov-click)=\"data.confirmButtonFn ? dialogClick(true) : (visible = false)\"\n >\n {{ data.confirmButtonText ?? 'Yes'}}\n </gov-button>\n \n <gov-button\n [ngClass]=\"!data.showCancelButton ? 'd-none' : ''\"\n color=\"primary\"\n size=\"m\"\n type=\"outlined\"\n slot=\"footer\"\n [disabled]=\"!data.showCancelButton\"\n (gov-click)=\"data.cancelButtonFn ? dialogClick(false) : (visible = false)\"\n >\n {{ data.cancelButtonText ?? 'No' }}\n </gov-button>\n</gov-dialog>\n", styles: [":host ::ng-deep dialog{max-width:var(--dialog-max-width, 95%);max-height:var(--dialog-max-height, 95%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovButton, selector: "gov-button", inputs: ["color", "disabled", "download", "expanded", "expandedMobile", "focusable", "href", "hreflang", "identifier", "loading", "name", "nativeType", "referrerpolicy", "rel", "size", "target", "type"] }, { kind: "component", type: i2.GovDialog, selector: "gov-dialog", inputs: ["accessibleCloseLabel", "accessibleCloseLabelledBy", "accessibleDescribedBy", "accessibleLabelledBy", "blockBackdropClose", "blockClose", "labelTag", "open", "role"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "component", type: DynamicComponent, selector: "v-dynamic-component", inputs: ["componentType", "data"] }, { kind: "pipe", type: GovColorPipe, name: "govColor" }] });
2469
- }
2470
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
2471
- type: Component,
2472
- args: [{ selector: 'v-confirm-dialog', imports: [
2473
- CommonModule,
2474
- GovDesignSystemModule,
2475
- GovColorPipe,
2476
- DynamicComponent,
2477
- ], providers: [
2478
- {
2479
- provide: CONFIRM_DIALOG_COMPONENT_TOKEN,
2480
- useExisting: ConfirmDialogComponent,
2481
- },
2482
- ], template: "<gov-dialog\n [open]=\"visible\"\n [attr.block-close]=\"data.closable !== undefined ? !data.closable : false\"\n [attr.block-backdrop-close]=\"data.closable !== undefined ? !data.closable : false\" \n [style.--dialog-max-width]=\"data.width\"\n [style.--dialog-max-height]=\"data.height\"\n role=\"dialog\"\n accessible-close-label=\"Close dialog box with more information\"\n (gov-close)=\"data.cancelButtonFn ? dialogClick(false) : (visible = false)\"\n>\n <gov-icon\n type=\"components\"\n [name]=\"data.headerIcon\"\n slot=\"icon\"\n [color]=\"data.severity | govColor\"\n />\n \n <h2 slot=\"title\">{{ data.title ?? 'Title' }}</h2>\n\n @if (data && data.innerHTML) {\n <div [innerHTML]=\"data.innerHTML\"></div>\n } @else if (data.componentType) {\n <v-dynamic-component\n [componentType]=\"data.componentType\"\n [data]=\"$any(data.data)\"\n ></v-dynamic-component>\n }\n\n <gov-button\n color=\"primary\"\n size=\"m\"\n type=\"solid\"\n slot=\"footer\"\n (gov-click)=\"data.confirmButtonFn ? dialogClick(true) : (visible = false)\"\n >\n {{ data.confirmButtonText ?? 'Yes'}}\n </gov-button>\n \n <gov-button\n [ngClass]=\"!data.showCancelButton ? 'd-none' : ''\"\n color=\"primary\"\n size=\"m\"\n type=\"outlined\"\n slot=\"footer\"\n [disabled]=\"!data.showCancelButton\"\n (gov-click)=\"data.cancelButtonFn ? dialogClick(false) : (visible = false)\"\n >\n {{ data.cancelButtonText ?? 'No' }}\n </gov-button>\n</gov-dialog>\n", styles: [":host ::ng-deep dialog{max-width:var(--dialog-max-width, 95%);max-height:var(--dialog-max-height, 95%)}\n"] }]
2483
- }], ctorParameters: () => [{ type: i1$3.DialogService }, { type: i0.ChangeDetectorRef }] });
2484
-
2485
- class HeaderComponent {
2486
- title;
2487
- userName;
2488
- logoUrl;
2489
- userRole;
2490
- menuRef;
2491
- items = [];
2492
- actionTemplate;
2493
- icons = Icons;
2494
- menuVisible = false;
2495
- openedIndexes = [];
2496
- tabsService = inject(SideMenuService);
2497
- router = inject(Router);
2498
- toggleMenu() {
2499
- this.menuVisible = !this.menuVisible;
2500
- }
2501
- canRedirect(url, canRedirect) {
2502
- if (url && canRedirect) {
2503
- this.router.navigateByUrl(url);
2504
- }
2505
- }
2506
- showOrHide(index, children) {
2507
- if (children === 0) {
2508
- return;
2509
- }
2510
- if (!this.openedIndexes.includes(index)) {
2511
- this.openedIndexes = [...[], index];
2512
- }
2513
- else if (this.openedIndexes.includes(index)) {
2514
- this.openedIndexes = this.openedIndexes.filter(x => x !== index);
2515
- }
2516
- }
2517
- canBeShown(index) {
2518
- return this.openedIndexes.includes(index);
2519
- }
2520
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2521
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: HeaderComponent, isStandalone: true, selector: "v-header", inputs: { title: "title", userName: "userName", logoUrl: "logoUrl", userRole: "userRole", menuRef: "menuRef", items: "items" }, providers: [
2522
- {
2523
- provide: HEADER_COMPONENT_TOKEN,
2524
- useExisting: HeaderComponent
2525
- }
2526
- ], queries: [{ propertyName: "actionTemplate", first: true, predicate: ["action"], descendants: true }], ngImport: i0, template: "<header class=\"gov-header\">\n <div class=\"gov-header__divider\">\n <div class=\"gov-header__content\">\n <gov-flex\n justify-content=\"space-between\"\n align-items=\"center\"\n responsive=\"false\"\n >\n <a\n href=\"/\"\n class=\"gov-header__logo\"\n aria-label=\"Zp\u011Bt na \u00FAvodn\u00ED str\u00E1nku\"\n >\n <gov-flex\n align-items=\"center\"\n gap=\"s\"\n responsive=\"false\"\n >\n @if (logoUrl) {\n <img\n class=\"gov-header__logo-img\"\n src=\"{{ logoUrl }}\"\n width=\"125px\"\n height=\"43px\"\n alt=\"GA\u010CR Logo\"\n >\n }\n </gov-flex>\n </a>\n </gov-flex>\n <gov-flex\n class=\"gov-header__action\"\n justify-content=\"space-between\"\n align-items=\"center\"\n gap=\"s\"\n >\n <gov-button\n color=\"primary\"\n size=\"m\"\n type=\"base\"\n >{{ userName }}</gov-button>\n <ng-content></ng-content>\n <ng-container *ngTemplateOutlet=\"\n this.actionTemplate;\n \"></ng-container>\n </gov-flex>\n </div>\n </div>\n <div class=\"gov-header__navigation\">\n <nav\n class=\"gov-navigation\"\n aria-label=\"Main navigation\"\n id=\"main-navigation\"\n >\n <ul>\n @for (tab of tabsService.menuItems$ | async; track tab; let index = $index) {\n <li\n *hasPermission=\"tab.data?.permissions ?? []\"\n class=\"gov-navigation--has-megamenu\"\n >\n <gov-button\n type=\"base\"\n color=\"primary\"\n size=\"l\"\n [attr.aria-label]=\"tab.label\"\n (gov-click)=\"\n showOrHide(index, tab.children?.length ?? 0);\n canRedirect(tab.url, !tab.children?.length)\n \"\n >\n {{ tab.label }}\n @if (tab.children?.length) {\n <gov-icon\n slot=\"icon-end\"\n size=\"s\"\n [name]=\"canBeShown(index) ? 'chevron-up' : 'chevron-down'\"\n ></gov-icon>\n }\n </gov-button>\n @if (canBeShown(index)) {\n <ul\n id=\"megamenu{{index}}\"\n class=\"gov-mega-menu gov-header__submenu\"\n [attr.aria-hidden]=\"canBeShown(index)\"\n >\n @for (child of tab.children; track child) {\n <li\n *hasPermission=\"child.data?.permissions ?? []\"\n class=\"gov-mega-menu__heading\"\n >\n <a\n [routerLink]=\"child.url\"\n (click)=\"showOrHide(index)\"\n >\n @if (child.icon) {\n <gov-icon\n [name]=\"child.icon\"\n size=\"m\"\n ></gov-icon>\n }\n <span>{{ child.label }}</span>\n </a>\n @if (child.children) { @for(miniChild of child.children; track miniChild) {\n <ul>\n <li *hasPermission=\"miniChild.data?.permissions ?? []\">\n <a\n [routerLink]=\"miniChild.url\"\n (click)=\"showOrHide(index)\"\n >{{ miniChild.label }}</a>\n </li>\n </ul>\n } }\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n </nav>\n </div>\n</header>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovButton, selector: "gov-button", inputs: ["color", "disabled", "download", "expanded", "expandedMobile", "focusable", "href", "hreflang", "identifier", "loading", "name", "nativeType", "referrerpolicy", "rel", "size", "target", "type"] }, { kind: "component", type: i2.GovFlex, selector: "gov-flex", inputs: ["alignContent", "alignItems", "alignSelf", "direction", "gap", "justifyContent", "responsive", "wrap"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2527
- }
2528
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: HeaderComponent, decorators: [{
2529
- type: Component,
2530
- args: [{ selector: "v-header", imports: [
2531
- CommonModule,
2532
- GovDesignSystemModule,
2533
- AsyncPipe,
2534
- RouterModule,
2535
- HasPermissionDirective,
2536
- ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
2537
- {
2538
- provide: HEADER_COMPONENT_TOKEN,
2539
- useExisting: HeaderComponent
2540
- }
2541
- ], template: "<header class=\"gov-header\">\n <div class=\"gov-header__divider\">\n <div class=\"gov-header__content\">\n <gov-flex\n justify-content=\"space-between\"\n align-items=\"center\"\n responsive=\"false\"\n >\n <a\n href=\"/\"\n class=\"gov-header__logo\"\n aria-label=\"Zp\u011Bt na \u00FAvodn\u00ED str\u00E1nku\"\n >\n <gov-flex\n align-items=\"center\"\n gap=\"s\"\n responsive=\"false\"\n >\n @if (logoUrl) {\n <img\n class=\"gov-header__logo-img\"\n src=\"{{ logoUrl }}\"\n width=\"125px\"\n height=\"43px\"\n alt=\"GA\u010CR Logo\"\n >\n }\n </gov-flex>\n </a>\n </gov-flex>\n <gov-flex\n class=\"gov-header__action\"\n justify-content=\"space-between\"\n align-items=\"center\"\n gap=\"s\"\n >\n <gov-button\n color=\"primary\"\n size=\"m\"\n type=\"base\"\n >{{ userName }}</gov-button>\n <ng-content></ng-content>\n <ng-container *ngTemplateOutlet=\"\n this.actionTemplate;\n \"></ng-container>\n </gov-flex>\n </div>\n </div>\n <div class=\"gov-header__navigation\">\n <nav\n class=\"gov-navigation\"\n aria-label=\"Main navigation\"\n id=\"main-navigation\"\n >\n <ul>\n @for (tab of tabsService.menuItems$ | async; track tab; let index = $index) {\n <li\n *hasPermission=\"tab.data?.permissions ?? []\"\n class=\"gov-navigation--has-megamenu\"\n >\n <gov-button\n type=\"base\"\n color=\"primary\"\n size=\"l\"\n [attr.aria-label]=\"tab.label\"\n (gov-click)=\"\n showOrHide(index, tab.children?.length ?? 0);\n canRedirect(tab.url, !tab.children?.length)\n \"\n >\n {{ tab.label }}\n @if (tab.children?.length) {\n <gov-icon\n slot=\"icon-end\"\n size=\"s\"\n [name]=\"canBeShown(index) ? 'chevron-up' : 'chevron-down'\"\n ></gov-icon>\n }\n </gov-button>\n @if (canBeShown(index)) {\n <ul\n id=\"megamenu{{index}}\"\n class=\"gov-mega-menu gov-header__submenu\"\n [attr.aria-hidden]=\"canBeShown(index)\"\n >\n @for (child of tab.children; track child) {\n <li\n *hasPermission=\"child.data?.permissions ?? []\"\n class=\"gov-mega-menu__heading\"\n >\n <a\n [routerLink]=\"child.url\"\n (click)=\"showOrHide(index)\"\n >\n @if (child.icon) {\n <gov-icon\n [name]=\"child.icon\"\n size=\"m\"\n ></gov-icon>\n }\n <span>{{ child.label }}</span>\n </a>\n @if (child.children) { @for(miniChild of child.children; track miniChild) {\n <ul>\n <li *hasPermission=\"miniChild.data?.permissions ?? []\">\n <a\n [routerLink]=\"miniChild.url\"\n (click)=\"showOrHide(index)\"\n >{{ miniChild.label }}</a>\n </li>\n </ul>\n } }\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n </nav>\n </div>\n</header>" }]
2542
- }], propDecorators: { title: [{
2543
- type: Input
2544
- }], userName: [{
2545
- type: Input
2546
- }], logoUrl: [{
2547
- type: Input
2548
- }], userRole: [{
2549
- type: Input
2550
- }], menuRef: [{
2551
- type: Input
2552
- }], items: [{
2553
- type: Input
2554
- }], actionTemplate: [{
2555
- type: ContentChild,
2556
- args: ['action', { static: false }]
2557
- }] } });
2558
-
2559
- class PasswordComponent extends BaseFormInputComponent {
2560
- toggleMask = true;
2561
- feedback = false;
2562
- labelSlot = SlotPosition.top;
2563
- requiredStrength = PasswordStrength.None;
2564
- message;
2565
- name;
2566
- role;
2567
- icon;
2568
- iconPos = IconPosition.right;
2569
- size = FieldSize.medium;
2570
- messageSlot = SlotPosition.bottom;
2571
- icons = Icons;
2572
- passwordStrength = PasswordStrength.None;
2573
- type = FieldType.password;
2574
- constructor(ngControl) {
2575
- super(ngControl);
2576
- }
2577
- valueChange(value) {
2578
- if (!value) {
2579
- this.passwordStrength = 0;
2580
- return;
2581
- }
2582
- const result = zxcvbn(value);
2583
- this.passwordStrength = result.score;
2584
- if (!this.formControl) {
2585
- return;
2586
- }
2587
- if (result.score < this.requiredStrength) {
2588
- this.formControl.setErrors({ passwordLowStrength: true }, { emitEvent: false });
2589
- }
2590
- }
2591
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: PasswordComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
2592
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: PasswordComponent, isStandalone: true, selector: "v-password", inputs: { toggleMask: "toggleMask", feedback: "feedback", labelSlot: "labelSlot", requiredStrength: "requiredStrength", message: "message", name: "name", role: "role", icon: "icon", iconPos: "iconPos", size: "size", messageSlot: "messageSlot" }, providers: [
2593
- {
2594
- provide: PASSWORD_COMPONENT_TOKEN,
2595
- useExisting: PasswordComponent
2596
- }
2597
- ], usesInheritance: true, ngImport: i0, template: "<gov-form-control class=\"mb-3\">\n @if (label) {\n <gov-form-label \n [slot]=\"labelSlot\"\n [size]=\"size | govSize\"\n >\n {{ label }}\n </gov-form-label>\n }\n <gov-form-group>\n @if (feedback) {\n <gov-form-password-power [power]=\"passwordStrength - 1\" />\n }\n <gov-form-input\n [formControl]=\"formControl\"\n [attr.input-type]=\"type\"\n [placeholder]=\"placeholder\"\n [invalid]=\"ngControl?.errors\"\n (ngModelChange)=\"valueChange($event)\"\n />\n </gov-form-group>\n <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n @if (message) {\n <gov-form-message \n [slot]=\"messageSlot\" \n color=\"neutral\"\n >\n {{ message }}\n </gov-form-message>\n }\n</gov-form-control>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormGroup, selector: "gov-form-group", inputs: ["gap", "orientation"] }, { kind: "component", type: i2.GovFormInput, selector: "gov-form-input", inputs: ["accessibleHidePasswordLabel", "accessibleShowPasswordLabel", "autocomplete", "autocorrect", "cols", "disabled", "identifier", "inputLang", "inputType", "invalid", "max", "maxlength", "min", "minlength", "multiline", "name", "placeholder", "readonly", "required", "role", "rows", "size", "spellcheck", "success", "type", "value"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i2.GovFormMessage, selector: "gov-form-message", inputs: ["color", "size"] }, { kind: "component", type: i2.GovFormPasswordPower, selector: "gov-form-password-power", inputs: ["power"] }, { kind: "directive", type: i2.TextValueAccessor, selector: "gov-form-input:not([input-type=number]),gov-form-autocomplete" }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }, { kind: "pipe", type: GovSizePipe, name: "govSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2598
- }
2599
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: PasswordComponent, decorators: [{
2600
- type: Component,
2601
- args: [{ selector: 'v-password', imports: [
2602
- ReactiveFormsModule,
2603
- GovDesignSystemModule,
2604
- GovSizePipe,
2605
- ErrorComponent
2606
- ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
2607
- {
2608
- provide: PASSWORD_COMPONENT_TOKEN,
2609
- useExisting: PasswordComponent
2610
- }
2611
- ], template: "<gov-form-control class=\"mb-3\">\n @if (label) {\n <gov-form-label \n [slot]=\"labelSlot\"\n [size]=\"size | govSize\"\n >\n {{ label }}\n </gov-form-label>\n }\n <gov-form-group>\n @if (feedback) {\n <gov-form-password-power [power]=\"passwordStrength - 1\" />\n }\n <gov-form-input\n [formControl]=\"formControl\"\n [attr.input-type]=\"type\"\n [placeholder]=\"placeholder\"\n [invalid]=\"ngControl?.errors\"\n (ngModelChange)=\"valueChange($event)\"\n />\n </gov-form-group>\n <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n @if (message) {\n <gov-form-message \n [slot]=\"messageSlot\" \n color=\"neutral\"\n >\n {{ message }}\n </gov-form-message>\n }\n</gov-form-control>\n" }]
2612
- }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
2613
- type: Optional
2614
- }, {
2615
- type: Self
2616
- }] }], propDecorators: { toggleMask: [{
2617
- type: Input
2618
- }], feedback: [{
2619
- type: Input
2620
- }], labelSlot: [{
2621
- type: Input
2622
- }], requiredStrength: [{
2623
- type: Input
2624
- }], message: [{
2625
- type: Input
2626
- }], name: [{
2627
- type: Input
2628
- }], role: [{
2629
- type: Input
2630
- }], icon: [{
2631
- type: Input
2632
- }], iconPos: [{
2633
- type: Input
2634
- }], size: [{
2635
- type: Input
2636
- }], messageSlot: [{
2637
- type: Input
2638
- }] } });
2639
-
2640
- class RadioButtonComponent extends BaseFormInputComponent {
2641
- radioGroupName = Math.random().toString();
2642
- items = [];
2643
- size = FieldSize.medium;
2644
- icons = Icons;
2645
- constructor(ngControl) {
2646
- super(ngControl);
2647
- }
2648
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: RadioButtonComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
2649
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: RadioButtonComponent, isStandalone: true, selector: "v-radiobutton", inputs: { radioGroupName: "radioGroupName", items: "items", size: "size" }, providers: [
2650
- {
2651
- provide: RADIOBUTTON_COMPONENT_TOKEN,
2652
- useExisting: RadioButtonComponent,
2653
- },
2654
- ], usesInheritance: true, ngImport: i0, template: "<gov-form-control>\n <gov-form-radio-group [formControl]=\"formControl\">\n @if (items) { @for(item of items; track item) {\n <gov-form-radio\n [size]=\"size | govSize\"\n [value]=\"item.value\"\n [required]=\"required\"\n [identifier]=\"item.id\"\n [name]=\"radioGroupName\"\n [invalid]=\"ngControl?.errors\"\n [disabled]=\"formControl.disabled\"\n >\n <gov-form-label\n [size]=\"size | govSize\"\n slot=\"label\"\n >\n {{ label }}\n </gov-form-label>\n </gov-form-radio>\n } }\n </gov-form-radio-group>\n <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n</gov-form-control>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i2.GovFormRadio, selector: "gov-form-radio", inputs: ["checked", "disabled", "identifier", "invalid", "name", "noLabel", "required", "size", "value"] }, { kind: "component", type: i2.GovFormRadioGroup, selector: "gov-form-radio-group", inputs: ["gap", "orientation", "value"] }, { kind: "directive", type: i2.RadioValueAccessor, selector: "gov-form-radio" }, { kind: "directive", type: i2.GroupValueAccessor, selector: "gov-form-radio-group,gov-form-checkbox-group" }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }, { kind: "pipe", type: GovSizePipe, name: "govSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2655
- }
2656
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: RadioButtonComponent, decorators: [{
2657
- type: Component,
2658
- args: [{ selector: "v-radiobutton", imports: [
2659
- GovDesignSystemModule,
2660
- RouterModule,
2661
- ReactiveFormsModule,
2662
- GovSizePipe,
2663
- ErrorComponent
2664
- ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
2665
- {
2666
- provide: RADIOBUTTON_COMPONENT_TOKEN,
2667
- useExisting: RadioButtonComponent,
2668
- },
2669
- ], template: "<gov-form-control>\n <gov-form-radio-group [formControl]=\"formControl\">\n @if (items) { @for(item of items; track item) {\n <gov-form-radio\n [size]=\"size | govSize\"\n [value]=\"item.value\"\n [required]=\"required\"\n [identifier]=\"item.id\"\n [name]=\"radioGroupName\"\n [invalid]=\"ngControl?.errors\"\n [disabled]=\"formControl.disabled\"\n >\n <gov-form-label\n [size]=\"size | govSize\"\n slot=\"label\"\n >\n {{ label }}\n </gov-form-label>\n </gov-form-radio>\n } }\n </gov-form-radio-group>\n <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n</gov-form-control>\n" }]
2670
- }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
2671
- type: Optional
2672
- }, {
2673
- type: Self
2674
- }] }], propDecorators: { radioGroupName: [{
2675
- type: Input
2676
- }], items: [{
2677
- type: Input
2678
- }], size: [{
2679
- type: Input
2680
- }] } });
2681
-
2682
- class SwitchComponent extends BaseFormInputComponent {
2683
- size = FieldSize.medium;
2684
- noLabel = false;
2685
- name;
2686
- icons = Icons;
2687
- constructor(ngControl) {
2688
- super(ngControl);
2689
- }
2690
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: SwitchComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
2691
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: SwitchComponent, isStandalone: true, selector: "v-switch", inputs: { size: "size", noLabel: "noLabel", name: "name" }, providers: [{
2692
- provide: SWITCH_COMPONENT_TOKEN,
2693
- useExisting: SwitchComponent,
2694
- }], usesInheritance: true, ngImport: i0, template: "<gov-form-control>\n <gov-form-switch\n [formControl]=\"formControl\"\n [size]=\"size | govSize\"\n [required]=\"required\"\n [name]=\"name\"\n [invalid]=\"ngControl?.errors\"\n >\n @if (label && !noLabel) {\n <gov-form-label [size]=\"size\" slot=\"label\">\n {{ label }}\n </gov-form-label>\n }\n </gov-form-switch>\n <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n</gov-form-control>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i2.GovFormSwitch, selector: "gov-form-switch", inputs: ["checked", "disabled", "identifier", "invalid", "name", "noLabel", "required", "size", "value"] }, { kind: "directive", type: i2.BooleanValueAccessor, selector: "gov-form-checkbox,gov-form-switch" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }, { kind: "pipe", type: GovSizePipe, name: "govSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2695
- }
2696
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: SwitchComponent, decorators: [{
2697
- type: Component,
2698
- args: [{ selector: "v-switch", imports: [
2699
- GovDesignSystemModule,
2700
- ReactiveFormsModule,
2701
- GovSizePipe,
2702
- ErrorComponent
2703
- ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
2704
- provide: SWITCH_COMPONENT_TOKEN,
2705
- useExisting: SwitchComponent,
2706
- }], template: "<gov-form-control>\n <gov-form-switch\n [formControl]=\"formControl\"\n [size]=\"size | govSize\"\n [required]=\"required\"\n [name]=\"name\"\n [invalid]=\"ngControl?.errors\"\n >\n @if (label && !noLabel) {\n <gov-form-label [size]=\"size\" slot=\"label\">\n {{ label }}\n </gov-form-label>\n }\n </gov-form-switch>\n <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n</gov-form-control>\n" }]
2707
- }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
2708
- type: Optional
2709
- }, {
2710
- type: Self
2711
- }] }], propDecorators: { size: [{
2712
- type: Input
2713
- }], noLabel: [{
2714
- type: Input
2715
- }], name: [{
2716
- type: Input
2717
- }] } });
2718
-
2719
- class SearchComponent {
2720
- placeholder;
2721
- size = FieldSize.medium;
2722
- searchTerm = new EventEmitter();
2723
- value;
2724
- icons = Icons;
2725
- setValue(event) {
2726
- this.value = event.detail.value;
2727
- }
2728
- search() {
2729
- this.searchTerm.emit(this.value);
2730
- }
2731
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: SearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2732
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: SearchComponent, isStandalone: true, selector: "v-search", inputs: { placeholder: "placeholder", size: "size" }, outputs: { searchTerm: "searchTerm" }, ngImport: i0, template: "<gov-form-control>\n <gov-form-group>\n <gov-form-search color=\"neutral\">\n <gov-form-input \n [placeholder]=\"placeholder\"\n [size]=\"size | govSize\"\n slot=\"input\"\n (gov-input)=\"setValue($event)\"\n />\n <gov-button\n [size]=\"size | govSize\"\n color=\"primary\"\n type=\"solid\"\n slot=\"button\"\n (gov-click)=\"search()\"\n >\n <gov-icon\n [name]=\"icons.search\"\n />\n </gov-button>\n </gov-form-search>\n </gov-form-group>\n</gov-form-control>", styles: [""], dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovButton, selector: "gov-button", inputs: ["color", "disabled", "download", "expanded", "expandedMobile", "focusable", "href", "hreflang", "identifier", "loading", "name", "nativeType", "referrerpolicy", "rel", "size", "target", "type"] }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormGroup, selector: "gov-form-group", inputs: ["gap", "orientation"] }, { kind: "component", type: i2.GovFormInput, selector: "gov-form-input", inputs: ["accessibleHidePasswordLabel", "accessibleShowPasswordLabel", "autocomplete", "autocorrect", "cols", "disabled", "identifier", "inputLang", "inputType", "invalid", "max", "maxlength", "min", "minlength", "multiline", "name", "placeholder", "readonly", "required", "role", "rows", "size", "spellcheck", "success", "type", "value"] }, { kind: "component", type: i2.GovFormSearch, selector: "gov-form-search", inputs: ["color", "size"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "directive", type: i2.TextValueAccessor, selector: "gov-form-input:not([input-type=number]),gov-form-autocomplete" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: GovSizePipe, name: "govSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2733
- }
2734
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: SearchComponent, decorators: [{
2735
- type: Component,
2736
- args: [{ selector: 'v-search', imports: [
2737
- GovDesignSystemModule,
2738
- GovSizePipe,
2739
- ReactiveFormsModule
2740
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<gov-form-control>\n <gov-form-group>\n <gov-form-search color=\"neutral\">\n <gov-form-input \n [placeholder]=\"placeholder\"\n [size]=\"size | govSize\"\n slot=\"input\"\n (gov-input)=\"setValue($event)\"\n />\n <gov-button\n [size]=\"size | govSize\"\n color=\"primary\"\n type=\"solid\"\n slot=\"button\"\n (gov-click)=\"search()\"\n >\n <gov-icon\n [name]=\"icons.search\"\n />\n </gov-button>\n </gov-form-search>\n </gov-form-group>\n</gov-form-control>" }]
2741
- }], propDecorators: { placeholder: [{
2742
- type: Input
2743
- }], size: [{
2744
- type: Input
2745
- }], searchTerm: [{
2746
- type: Output
2747
- }] } });
2748
-
2749
- class SectionComponent {
2750
- title;
2751
- badge;
2752
- showContent = false;
2753
- backgroundColor;
2754
- annotation;
2755
- identifier;
2756
- icon;
2757
- iconType;
2758
- size = FieldSize.medium;
2759
- badgeSlot = 'sufix';
2760
- open = false;
2761
- icons = Icons;
2762
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: SectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2763
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: SectionComponent, isStandalone: true, selector: "v-section", inputs: { title: "title", badge: "badge", showContent: "showContent", backgroundColor: "backgroundColor", annotation: "annotation", identifier: "identifier", icon: "icon", iconType: "iconType", size: "size", badgeSlot: "badgeSlot", open: "open" }, providers: [
2764
- {
2765
- provide: SECTION_COMPONENT_TOKEN,
2766
- useExisting: SectionComponent,
2767
- },
2768
- ], ngImport: i0, template: "<gov-accordion>\n <gov-accordion-item \n [size]=\"size | govSize\"\n [identifier]=\"identifier\"\n [open]=\"open\"\n >\n @if (icon) {\n <gov-icon\n [name]=\"icons.chevronDown\"\n />\n } @if (title) {\n <h2 slot=\"label\">{{ title | translate }}</h2>\n } @if (badge) {\n <gov-badge \n inverse=\"true\"\n size=\"s\"\n [slot]=\"badgeSlot\"\n >\n {{ badge }}\n </gov-badge>\n } @if (annotation) {\n <p slot=\"annotation\">{{ annotation | translate }}</p>\n }\n <ng-content></ng-content>\n </gov-accordion-item>\n</gov-accordion>", styles: [""], dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovAccordion, selector: "gov-accordion", inputs: ["noBorder", "size"] }, { kind: "component", type: i2.GovAccordionItem, selector: "gov-accordion-item", inputs: ["disabled", "identifier", "open", "size"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2769
- }
2770
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: SectionComponent, decorators: [{
2771
- type: Component,
2772
- args: [{ selector: 'v-section', imports: [
2773
- GovDesignSystemModule,
2774
- GovSizePipe,
2775
- TranslateModule
2776
- ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
2777
- {
2778
- provide: SECTION_COMPONENT_TOKEN,
2779
- useExisting: SectionComponent,
2780
- },
2781
- ], schemas: [
2782
- NO_ERRORS_SCHEMA
2783
- ], template: "<gov-accordion>\n <gov-accordion-item \n [size]=\"size | govSize\"\n [identifier]=\"identifier\"\n [open]=\"open\"\n >\n @if (icon) {\n <gov-icon\n [name]=\"icons.chevronDown\"\n />\n } @if (title) {\n <h2 slot=\"label\">{{ title | translate }}</h2>\n } @if (badge) {\n <gov-badge \n inverse=\"true\"\n size=\"s\"\n [slot]=\"badgeSlot\"\n >\n {{ badge }}\n </gov-badge>\n } @if (annotation) {\n <p slot=\"annotation\">{{ annotation | translate }}</p>\n }\n <ng-content></ng-content>\n </gov-accordion-item>\n</gov-accordion>" }]
2784
- }], propDecorators: { title: [{
2785
- type: Input
2786
- }], badge: [{
2787
- type: Input
2788
- }], showContent: [{
2789
- type: Input
2790
- }], backgroundColor: [{
2791
- type: Input
2792
- }], annotation: [{
2793
- type: Input
2794
- }], identifier: [{
2795
- type: Input
2796
- }], icon: [{
2797
- type: Input
2798
- }], iconType: [{
2799
- type: Input
2800
- }], size: [{
2801
- type: Input
2802
- }], badgeSlot: [{
2803
- type: Input
2804
- }], open: [{
2805
- type: Input
2806
- }] } });
2807
-
2808
- class SideMenuComponent {
2809
- menuService = inject(SideMenuService);
2810
- items = [];
2811
- logoUrl = '';
2812
- userName;
2813
- userRole;
2814
- minimalized = new EventEmitter();
2815
- itemSelected = new EventEmitter();
2816
- icons = Icons;
2817
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: SideMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2818
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: SideMenuComponent, isStandalone: true, selector: "v-side-menu", inputs: { items: "items", logoUrl: "logoUrl", userName: "userName", userRole: "userRole" }, outputs: { minimalized: "minimalized", itemSelected: "itemSelected" }, providers: [
2819
- {
2820
- provide: SIDE_MENU_COMPONENT_TOKEN,
2821
- useExisting: SideMenuComponent,
2822
- },
2823
- ], ngImport: i0, template: "<div class=\"v-side-menu\">\n <div class=\"gov-category-list__col gov-category-list__categories\">\n <div class=\"gov-category-list__col-inner\">\n <ul class=\"main-nav gov-list--plain gov-category-list__nav\">\n @for (item of items; track item) {\n @for (child of item.children; track child) {\n <li class=\"gov-category-list__nav\">\n <a class=\"gov-category-list__nav-link p-2 d-flex align-items-center\" [routerLink]=\"child.url\"\n routerLinkActive=\"is-active\" title=\"{{child.label}}\">\n <p class=\"gov-text--body-s\">{{child.label}}\n @if (child.children) {\n <gov-icon [name]=\"icons.chevronDown\" />\n }\n </p>\n </a>\n </li>\n }\n }\n </ul>\n </div>\n </div>\n</div>", styles: [".v-side-menu a:hover{background-color:var(--background-primary-subtle);text-decoration:underline}.v-side-menu a.is-active{background-color:var(--background-primary);color:var(--text-white)}.v-side-menu a.is-active>*{color:var(--text-white)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }], encapsulation: i0.ViewEncapsulation.None });
2824
- }
2825
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: SideMenuComponent, decorators: [{
2826
- type: Component,
2827
- args: [{ selector: 'v-side-menu', imports: [RouterModule, GovDesignSystemModule], providers: [
2828
- {
2829
- provide: SIDE_MENU_COMPONENT_TOKEN,
2830
- useExisting: SideMenuComponent,
2831
- },
2832
- ], encapsulation: ViewEncapsulation.None, template: "<div class=\"v-side-menu\">\n <div class=\"gov-category-list__col gov-category-list__categories\">\n <div class=\"gov-category-list__col-inner\">\n <ul class=\"main-nav gov-list--plain gov-category-list__nav\">\n @for (item of items; track item) {\n @for (child of item.children; track child) {\n <li class=\"gov-category-list__nav\">\n <a class=\"gov-category-list__nav-link p-2 d-flex align-items-center\" [routerLink]=\"child.url\"\n routerLinkActive=\"is-active\" title=\"{{child.label}}\">\n <p class=\"gov-text--body-s\">{{child.label}}\n @if (child.children) {\n <gov-icon [name]=\"icons.chevronDown\" />\n }\n </p>\n </a>\n </li>\n }\n }\n </ul>\n </div>\n </div>\n</div>", styles: [".v-side-menu a:hover{background-color:var(--background-primary-subtle);text-decoration:underline}.v-side-menu a.is-active{background-color:var(--background-primary);color:var(--text-white)}.v-side-menu a.is-active>*{color:var(--text-white)}\n"] }]
2833
- }], propDecorators: { items: [{
2834
- type: Input
2835
- }], logoUrl: [{
2836
- type: Input
2837
- }], userName: [{
2838
- type: Input
2839
- }], userRole: [{
2840
- type: Input
2841
- }], minimalized: [{
2842
- type: Output
2843
- }], itemSelected: [{
2844
- type: Output
2845
- }] } });
2846
-
2847
- class SideMenuModule extends UnsubscribeComponent {
2848
- service;
2849
- constructor(service) {
2850
- super();
2851
- this.service = service;
2852
- }
2853
- static forRoot(config) {
2854
- const moduleWithProvider = {
2855
- ngModule: SideMenuModule,
2856
- };
2857
- if (config?.items) {
2858
- moduleWithProvider.providers = [
2859
- {
2860
- provide: MENU_TOKEN,
2861
- useValue: config.items,
2862
- },
2863
- ];
2864
- }
2865
- return moduleWithProvider;
2866
- }
2867
- static forChild(menu) {
2868
- return {
2869
- ngModule: SideMenuModule,
2870
- providers: [
2871
- {
2872
- provide: MENU_TOKEN,
2873
- useValue: menu,
2874
- },
2875
- ],
2876
- };
2877
- }
2878
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: SideMenuModule, deps: [{ token: i1$3.SideMenuProviderService }], target: i0.ɵɵFactoryTarget.NgModule });
2879
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.1", ngImport: i0, type: SideMenuModule });
2880
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: SideMenuModule, providers: [
2881
- SideMenuProviderService,
2882
- {
2883
- provide: SIDE_MENU_COMPONENT_TOKEN,
2884
- useExisting: SideMenuComponent,
2885
- }
2886
- ] });
2887
- }
2888
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: SideMenuModule, decorators: [{
2889
- type: NgModule,
2890
- args: [{
2891
- providers: [
2892
- SideMenuProviderService,
2893
- {
2894
- provide: SIDE_MENU_COMPONENT_TOKEN,
2895
- useExisting: SideMenuComponent,
2896
- }
2897
- ],
2898
- }]
2899
- }], ctorParameters: () => [{ type: i1$3.SideMenuProviderService }] });
2900
-
2901
- class SnackbarComponent {
2902
- config;
2903
- message;
2904
- icon;
2905
- closeLabel;
2906
- color = "primary";
2907
- gravity = "top";
2908
- position = "right";
2909
- time = 4000;
2910
- type = "subtle";
2911
- icons = Icons;
2912
- constructor(config) {
2913
- this.config = config;
2914
- }
2915
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: SnackbarComponent, deps: [{ token: 'TOAST_CONFIG', optional: true }], target: i0.ɵɵFactoryTarget.Component });
2916
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: SnackbarComponent, isStandalone: true, selector: "v-snackbar", inputs: { message: "message", icon: "icon", closeLabel: "closeLabel", color: "color", gravity: "gravity", position: "position", time: "time", type: "type" }, providers: [
2917
- {
2918
- provide: SNACKBAR_COMPONENT_TOKEN,
2919
- useExisting: SnackbarComponent,
2920
- },
2921
- ], ngImport: i0, template: "<gov-toast\n [closeLabel]=\"config.closeLabel ?? closeLabel\"\n [color]=\"config.color || color\"\n [gravity]=\"config.gravity || gravity\"\n [position]=\"config.position || position\"\n [time]=\"config.time ?? time\"\n [type]=\"config.type || type\"\n>\n @if (config.icon || icon) {\n <gov-icon\n [name]=\"config.icon || icon\"\n />\n } {{ config.message || message }}\n</gov-toast>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "component", type: i2.GovToast, selector: "gov-toast", inputs: ["accessibleCloseLabel", "closeLabel", "color", "gravity", "position", "time", "type"] }] });
2922
- }
2923
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: SnackbarComponent, decorators: [{
2924
- type: Component,
2925
- args: [{ selector: 'v-snackbar', imports: [GovDesignSystemModule], providers: [
2926
- {
2927
- provide: SNACKBAR_COMPONENT_TOKEN,
2928
- useExisting: SnackbarComponent,
2929
- },
2930
- ], template: "<gov-toast\n [closeLabel]=\"config.closeLabel ?? closeLabel\"\n [color]=\"config.color || color\"\n [gravity]=\"config.gravity || gravity\"\n [position]=\"config.position || position\"\n [time]=\"config.time ?? time\"\n [type]=\"config.type || type\"\n>\n @if (config.icon || icon) {\n <gov-icon\n [name]=\"config.icon || icon\"\n />\n } {{ config.message || message }}\n</gov-toast>\n" }]
2931
- }], ctorParameters: () => [{ type: undefined, decorators: [{
2932
- type: Optional
2933
- }, {
2934
- type: Inject,
2935
- args: ['TOAST_CONFIG']
2936
- }] }], propDecorators: { message: [{
2937
- type: Input,
2938
- args: [{ required: true }]
2939
- }], icon: [{
2940
- type: Input
2941
- }], closeLabel: [{
2942
- type: Input
2943
- }], color: [{
2944
- type: Input
2945
- }], gravity: [{
2946
- type: Input
2947
- }], position: [{
2948
- type: Input
2949
- }], time: [{
2950
- type: Input
2951
- }], type: [{
2952
- type: Input
2953
- }] } });
2954
-
2955
- class SnackbarService {
2956
- overlay;
2957
- translate;
2958
- injector;
2959
- constructor(overlay, translate, injector) {
2960
- this.overlay = overlay;
2961
- this.translate = translate;
2962
- this.injector = injector;
2963
- }
2964
- showSuccess(message, icon) {
2965
- this.showToast({
2966
- message: this.translate.instant(message),
2967
- icon: icon,
2968
- color: 'success',
2969
- });
2970
- }
2971
- showInfo(message, icon) {
2972
- this.showToast({
2973
- message: this.translate.instant(message),
2974
- icon: icon,
2975
- color: 'primary',
2976
- });
2977
- }
2978
- showWarn(message, icon) {
2979
- this.showToast({
2980
- message: this.translate.instant(message),
2981
- icon: icon,
2982
- color: 'warning',
2983
- });
2984
- }
2985
- showError(message, icon) {
2986
- this.showToast({
2987
- message: this.translate.instant(message),
2988
- icon: icon,
2989
- color: 'error',
2990
- });
2991
- }
2992
- showToast(config) {
2993
- const positionStrategy = this.overlay
2994
- .position()
2995
- .global();
2996
- const overlayRef = this.overlay.create({
2997
- positionStrategy,
2998
- hasBackdrop: false,
2999
- scrollStrategy: this.overlay.scrollStrategies.noop(),
3000
- });
3001
- const toastPortal = new portal.ComponentPortal(SnackbarComponent, null, this.createInjector(config));
3002
- overlayRef.attach(toastPortal);
3003
- }
3004
- createInjector(config) {
3005
- return Injector.create({
3006
- providers: [
3007
- { provide: 'TOAST_CONFIG', useValue: config },
3008
- ],
3009
- parent: this.injector,
3010
- });
3011
- }
3012
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: SnackbarService, deps: [{ token: i1$4.Overlay }, { token: i3.TranslateService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
3013
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: SnackbarService, providedIn: 'root' });
3014
- }
3015
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: SnackbarService, decorators: [{
3016
- type: Injectable,
3017
- args: [{
3018
- providedIn: 'root',
3019
- }]
3020
- }], ctorParameters: () => [{ type: i1$4.Overlay }, { type: i3.TranslateService }, { type: i0.Injector }] });
3021
-
3022
- class TextareaComponent extends BaseFormInputComponent {
3023
- floatLabel;
3024
- type = FieldType.text;
3025
- minlength = 0;
3026
- maxlength = 524288;
3027
- prefix;
3028
- sufix;
3029
- message;
3030
- name;
3031
- role;
3032
- size = FieldSize.medium;
3033
- icon;
3034
- iconPos = IconPosition.right;
3035
- labelSlot = SlotPosition.top;
3036
- messageSlot = SlotPosition.bottom;
3037
- rows = 0;
3038
- cols = 0;
3039
- autoResize = false;
3040
- icons = Icons;
3041
- constructor(ngControl) {
3042
- super(ngControl);
3043
- }
3044
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: TextareaComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
3045
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: TextareaComponent, isStandalone: true, selector: "v-textarea", inputs: { floatLabel: "floatLabel", type: "type", minlength: "minlength", maxlength: "maxlength", prefix: "prefix", sufix: "sufix", message: "message", name: "name", role: "role", size: "size", icon: "icon", iconPos: "iconPos", labelSlot: "labelSlot", messageSlot: "messageSlot", rows: "rows", cols: "cols", autoResize: "autoResize" }, providers: [
3046
- {
3047
- provide: TEXTAREA_COMPONENT_TOKEN,
3048
- useExisting: TextareaComponent,
3049
- },
3050
- ], usesInheritance: true, ngImport: i0, template: "<gov-form-control class=\"mb-3\">\n @if (label) {\n <gov-form-label \n [slot]=\"labelSlot\"\n [size]=\"size | govSize\"\n >\n {{ label | translate }}\n </gov-form-label>\n }\n <gov-form-group>\n <gov-form-input [type]=\"type\"\n [formControl]=\"formControl\"\n [minlength]=\"minlength\" \n [maxlength]=\"maxlength\" \n [size]='size | govSize' \n [name]='name' \n [role]='role'\n [required]=\"required\"\n [readonly]=\"readonly\"\n [invalid]=\"ngControl?.errors ? true : false\"\n [multiline]=\"true\"\n [rows]=\"rows\"\n [cols]=\"cols\"\n >\n @if (icon) {\n <gov-icon\n [name]=\"icon\"\n [slot]=\"iconPos === 'left' ? 'icon-start' : 'icon-end'\"\n />\n } @if (prefix) {\n <p slot=\"prefix\">\n {{ prefix }}\n </p>\n } @if (sufix) {\n <p slot=\"sufix\">\n {{ sufix }}\n </p>\n }\n </gov-form-input>\n </gov-form-group>\n <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n @if (message) {\n <gov-form-message \n [slot]=\"messageSlot\" \n color=\"neutral\"\n >\n {{ message | translate }}\n </gov-form-message>\n }\n</gov-form-control>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormGroup, selector: "gov-form-group", inputs: ["gap", "orientation"] }, { kind: "component", type: i2.GovFormInput, selector: "gov-form-input", inputs: ["accessibleHidePasswordLabel", "accessibleShowPasswordLabel", "autocomplete", "autocorrect", "cols", "disabled", "identifier", "inputLang", "inputType", "invalid", "max", "maxlength", "min", "minlength", "multiline", "name", "placeholder", "readonly", "required", "role", "rows", "size", "spellcheck", "success", "type", "value"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i2.GovFormMessage, selector: "gov-form-message", inputs: ["color", "size"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "directive", type: i2.TextValueAccessor, selector: "gov-form-input:not([input-type=number]),gov-form-autocomplete" }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: GovSizePipe, name: "govSize" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3051
- }
3052
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: TextareaComponent, decorators: [{
3053
- type: Component,
3054
- args: [{ selector: 'v-textarea', imports: [
3055
- ReactiveFormsModule,
3056
- GovDesignSystemModule,
3057
- GovSizePipe,
3058
- ErrorComponent,
3059
- TranslateModule
3060
- ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
3061
- {
3062
- provide: TEXTAREA_COMPONENT_TOKEN,
3063
- useExisting: TextareaComponent,
3064
- },
3065
- ], template: "<gov-form-control class=\"mb-3\">\n @if (label) {\n <gov-form-label \n [slot]=\"labelSlot\"\n [size]=\"size | govSize\"\n >\n {{ label | translate }}\n </gov-form-label>\n }\n <gov-form-group>\n <gov-form-input [type]=\"type\"\n [formControl]=\"formControl\"\n [minlength]=\"minlength\" \n [maxlength]=\"maxlength\" \n [size]='size | govSize' \n [name]='name' \n [role]='role'\n [required]=\"required\"\n [readonly]=\"readonly\"\n [invalid]=\"ngControl?.errors ? true : false\"\n [multiline]=\"true\"\n [rows]=\"rows\"\n [cols]=\"cols\"\n >\n @if (icon) {\n <gov-icon\n [name]=\"icon\"\n [slot]=\"iconPos === 'left' ? 'icon-start' : 'icon-end'\"\n />\n } @if (prefix) {\n <p slot=\"prefix\">\n {{ prefix }}\n </p>\n } @if (sufix) {\n <p slot=\"sufix\">\n {{ sufix }}\n </p>\n }\n </gov-form-input>\n </gov-form-group>\n <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n @if (message) {\n <gov-form-message \n [slot]=\"messageSlot\" \n color=\"neutral\"\n >\n {{ message | translate }}\n </gov-form-message>\n }\n</gov-form-control>\n" }]
3066
- }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
3067
- type: Optional
3068
- }, {
3069
- type: Self
3070
- }] }], propDecorators: { floatLabel: [{
3071
- type: Input
3072
- }], type: [{
3073
- type: Input
3074
- }], minlength: [{
3075
- type: Input
3076
- }], maxlength: [{
3077
- type: Input
3078
- }], prefix: [{
3079
- type: Input
3080
- }], sufix: [{
3081
- type: Input
3082
- }], message: [{
3083
- type: Input
3084
- }], name: [{
3085
- type: Input
3086
- }], role: [{
3087
- type: Input
3088
- }], size: [{
3089
- type: Input
3090
- }], icon: [{
3091
- type: Input
3092
- }], iconPos: [{
3093
- type: Input
3094
- }], labelSlot: [{
3095
- type: Input
3096
- }], messageSlot: [{
3097
- type: Input
3098
- }], rows: [{
3099
- type: Input
3100
- }], cols: [{
3101
- type: Input
3102
- }], autoResize: [{
3103
- type: Input
3104
- }] } });
3105
-
3106
- class FormFieldComponent extends BaseFormInputComponent {
3107
- constructor(ngControl) {
3108
- super(ngControl);
3109
- }
3110
- floatLabel;
3111
- type = FieldType.text;
3112
- minlength = 0;
3113
- maxlength = 524288;
3114
- prefix;
3115
- sufix;
3116
- message;
3117
- name;
3118
- role;
3119
- autocorrect = 'on';
3120
- size = FieldSize.medium;
3121
- icon;
3122
- iconPos = IconPosition.right;
3123
- display;
3124
- labelSlot = SlotPosition.top;
3125
- messageSlot = SlotPosition.bottom;
3126
- icons = Icons;
3127
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: FormFieldComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
3128
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: FormFieldComponent, isStandalone: true, selector: "v-form-field", inputs: { floatLabel: "floatLabel", type: "type", minlength: "minlength", maxlength: "maxlength", prefix: "prefix", sufix: "sufix", message: "message", name: "name", role: "role", autocorrect: "autocorrect", size: "size", icon: "icon", iconPos: "iconPos", display: "display", labelSlot: "labelSlot", messageSlot: "messageSlot" }, providers: [
3129
- {
3130
- provide: FORM_FIELD_COMPONENT_TOKEN,
3131
- useExisting: FormFieldComponent,
3132
- },
3133
- ], usesInheritance: true, ngImport: i0, template: "<gov-form-control>\n @if (label) {\n <gov-form-label \n [slot]=\"labelSlot\"\n [size]=\"size | govSize\"\n >\n {{ label }}\n </gov-form-label>\n }\n <gov-form-group>\n <ng-content />\n </gov-form-group>\n <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n</gov-form-control>", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormGroup, selector: "gov-form-group", inputs: ["gap", "orientation"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }, { kind: "pipe", type: GovSizePipe, name: "govSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3134
- }
3135
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: FormFieldComponent, decorators: [{
3136
- type: Component,
3137
- args: [{ selector: 'v-form-field', imports: [
3138
- ReactiveFormsModule,
3139
- GovDesignSystemModule,
3140
- GovSizePipe,
3141
- ErrorComponent
3142
- ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
3143
- {
3144
- provide: FORM_FIELD_COMPONENT_TOKEN,
3145
- useExisting: FormFieldComponent,
3146
- },
3147
- ], template: "<gov-form-control>\n @if (label) {\n <gov-form-label \n [slot]=\"labelSlot\"\n [size]=\"size | govSize\"\n >\n {{ label }}\n </gov-form-label>\n }\n <gov-form-group>\n <ng-content />\n </gov-form-group>\n <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n</gov-form-control>" }]
3148
- }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
3149
- type: Optional
3150
- }, {
3151
- type: Self
3152
- }] }], propDecorators: { floatLabel: [{
3153
- type: Input
3154
- }], type: [{
3155
- type: Input
3156
- }], minlength: [{
3157
- type: Input
3158
- }], maxlength: [{
3159
- type: Input
3160
- }], prefix: [{
3161
- type: Input
3162
- }], sufix: [{
3163
- type: Input
3164
- }], message: [{
3165
- type: Input
3166
- }], name: [{
3167
- type: Input
3168
- }], role: [{
3169
- type: Input
3170
- }], autocorrect: [{
3171
- type: Input
3172
- }], size: [{
3173
- type: Input
3174
- }], icon: [{
3175
- type: Input
3176
- }], iconPos: [{
3177
- type: Input
3178
- }], display: [{
3179
- type: Input
3180
- }], labelSlot: [{
3181
- type: Input
3182
- }], messageSlot: [{
3183
- type: Input
3184
- }] } });
3185
-
3186
- class InputGroupComponent extends BaseFormInputComponent {
3187
- floatLabel;
3188
- type = FieldType.text;
3189
- minlength = 0;
3190
- items;
3191
- prefix;
3192
- sufix;
3193
- maxlength = 524288;
3194
- name;
3195
- role;
3196
- message;
3197
- size = FieldSize.medium;
3198
- icon;
3199
- iconPos = IconPosition.right;
3200
- labelSlot = SlotPosition.top;
3201
- messageSlot = SlotPosition.bottom;
3202
- icons = Icons;
3203
- constructor(ngControl) {
3204
- super(ngControl);
3205
- }
3206
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: InputGroupComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
3207
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: InputGroupComponent, isStandalone: true, selector: "v-input-group", inputs: { floatLabel: "floatLabel", type: "type", minlength: "minlength", items: "items", prefix: "prefix", sufix: "sufix", maxlength: "maxlength", name: "name", role: "role", message: "message", size: "size", icon: "icon", iconPos: "iconPos", labelSlot: "labelSlot", messageSlot: "messageSlot" }, providers: [
3208
- {
3209
- provide: INPUT_GROUP_COMPONENT_TOKEN,
3210
- useExisting: InputGroupComponent,
3211
- },
3212
- ], usesInheritance: true, ngImport: i0, template: "<gov-form-control>\n @if (label) {\n <gov-form-label \n [slot]=\"labelSlot\"\n [size]=\"size | govSize\"\n >\n {{ label }}\n </gov-form-label>\n }\n @if(prefix) {\n <gov-icon\n [name]=\"name\"\n />\n }\n <gov-form-input \n input-type=\"input-type\"\n [formControl]=\"formControl\"\n [minlength]=\"minlength\" \n [maxlength]=\"maxlength\" \n [size]='size | govSize' \n [name]='name' \n [role]='role'\n [required]=\"required\"\n [readonly]=\"readonly\"\n [invalid]=\"ngControl?.errors ? true : false\"\n />\n @if(sufix) {\n <gov-icon\n [name]=\"name\"\n />\n }\n <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n @if (message) {\n <gov-form-message \n [slot]=\"messageSlot\" \n color=\"neutral\"\n >\n {{ message }}\n </gov-form-message>\n }\n</gov-form-control>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormInput, selector: "gov-form-input", inputs: ["accessibleHidePasswordLabel", "accessibleShowPasswordLabel", "autocomplete", "autocorrect", "cols", "disabled", "identifier", "inputLang", "inputType", "invalid", "max", "maxlength", "min", "minlength", "multiline", "name", "placeholder", "readonly", "required", "role", "rows", "size", "spellcheck", "success", "type", "value"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i2.GovFormMessage, selector: "gov-form-message", inputs: ["color", "size"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "directive", type: i2.TextValueAccessor, selector: "gov-form-input:not([input-type=number]),gov-form-autocomplete" }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }, { kind: "pipe", type: GovSizePipe, name: "govSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3213
- }
3214
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: InputGroupComponent, decorators: [{
3215
- type: Component,
3216
- args: [{ selector: 'v-input-group', imports: [
3217
- ReactiveFormsModule,
3218
- GovDesignSystemModule,
3219
- GovSizePipe,
3220
- ErrorComponent
3221
- ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
3222
- {
3223
- provide: INPUT_GROUP_COMPONENT_TOKEN,
3224
- useExisting: InputGroupComponent,
3225
- },
3226
- ], template: "<gov-form-control>\n @if (label) {\n <gov-form-label \n [slot]=\"labelSlot\"\n [size]=\"size | govSize\"\n >\n {{ label }}\n </gov-form-label>\n }\n @if(prefix) {\n <gov-icon\n [name]=\"name\"\n />\n }\n <gov-form-input \n input-type=\"input-type\"\n [formControl]=\"formControl\"\n [minlength]=\"minlength\" \n [maxlength]=\"maxlength\" \n [size]='size | govSize' \n [name]='name' \n [role]='role'\n [required]=\"required\"\n [readonly]=\"readonly\"\n [invalid]=\"ngControl?.errors ? true : false\"\n />\n @if(sufix) {\n <gov-icon\n [name]=\"name\"\n />\n }\n <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n @if (message) {\n <gov-form-message \n [slot]=\"messageSlot\" \n color=\"neutral\"\n >\n {{ message }}\n </gov-form-message>\n }\n</gov-form-control>\n" }]
3227
- }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
3228
- type: Optional
3229
- }, {
3230
- type: Self
3231
- }] }], propDecorators: { floatLabel: [{
3232
- type: Input
3233
- }], type: [{
3234
- type: Input
3235
- }], minlength: [{
3236
- type: Input
3237
- }], items: [{
3238
- type: Input
3239
- }], prefix: [{
3240
- type: Input
3241
- }], sufix: [{
3242
- type: Input
3243
- }], maxlength: [{
3244
- type: Input
3245
- }], name: [{
3246
- type: Input
3247
- }], role: [{
3248
- type: Input
3249
- }], message: [{
3250
- type: Input
3251
- }], size: [{
3252
- type: Input
3253
- }], icon: [{
3254
- type: Input
3255
- }], iconPos: [{
3256
- type: Input
3257
- }], labelSlot: [{
3258
- type: Input
3259
- }], messageSlot: [{
3260
- type: Input
3261
- }] } });
3262
-
3263
- class NumberInputComponent extends BaseFormInputComponent {
3264
- mode;
3265
- currency;
3266
- min;
3267
- max;
3268
- step = 1;
3269
- floatLabel;
3270
- type = FieldType.number;
3271
- minlength = 0;
3272
- maxlength = 524288;
3273
- prefix;
3274
- sufix;
3275
- message;
3276
- name;
3277
- role;
3278
- size = FieldSize.medium;
3279
- icon;
3280
- iconPos = IconPosition.right;
3281
- labelSlot = SlotPosition.top;
3282
- errorSlot = SlotPosition.bottom;
3283
- messageSlot = SlotPosition.bottom;
3284
- icons = Icons;
3285
- constructor(ngControl) {
3286
- super(ngControl);
3287
- }
3288
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NumberInputComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
3289
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: NumberInputComponent, isStandalone: true, selector: "v-number-input", inputs: { mode: "mode", currency: "currency", min: "min", max: "max", step: "step", floatLabel: "floatLabel", type: "type", minlength: "minlength", maxlength: "maxlength", prefix: "prefix", sufix: "sufix", message: "message", name: "name", role: "role", size: "size", icon: "icon", iconPos: "iconPos", labelSlot: "labelSlot", errorSlot: "errorSlot", messageSlot: "messageSlot" }, providers: [
3290
- {
3291
- provide: NUMBER_INPUT_COMPONENT_TOKEN,
3292
- useExisting: NumberInputComponent,
3293
- },
3294
- ], usesInheritance: true, ngImport: i0, template: "<gov-form-control>\n @if (label) {\n <gov-form-label \n [slot]=\"labelSlot\"\n [size]=\"size | govSize\"\n >\n {{ label }}\n </gov-form-label>\n }\n <gov-form-group>\n <gov-form-input \n [attr.input-type]=\"type\"\n [formControl]=\"formControl\"\n [minlength]=\"minlength\" \n [maxlength]=\"maxlength\" \n [size]='size | govSize' \n [name]='name' \n [role]='role'\n [required]=\"required\"\n [readonly]=\"readonly\"\n [invalid]=\"ngControl?.errors ? true : false\"\n >\n @if (icon) {\n <gov-icon\n [name]=\"icon\"\n [slot]=\"iconPos === 'left' ? 'icon-start' : 'icon-end'\"\n />\n } @if (prefix) {\n <p slot=\"prefix\">\n {{ prefix }}\n </p>\n } @if (sufix) {\n <p slot=\"sufix\">\n {{ sufix }}\n </p>\n }\n </gov-form-input>\n <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n @if (message) {\n <gov-form-message \n [slot]=\"messageSlot\" \n color=\"neutral\"\n >\n {{ message }}\n </gov-form-message>\n }\n </gov-form-group>\n</gov-form-control>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovFormControl, selector: "gov-form-control", inputs: ["disabled", "fieldset", "identifier", "invalid", "size", "success"] }, { kind: "component", type: i2.GovFormGroup, selector: "gov-form-group", inputs: ["gap", "orientation"] }, { kind: "component", type: i2.GovFormInput, selector: "gov-form-input", inputs: ["accessibleHidePasswordLabel", "accessibleShowPasswordLabel", "autocomplete", "autocorrect", "cols", "disabled", "identifier", "inputLang", "inputType", "invalid", "max", "maxlength", "min", "minlength", "multiline", "name", "placeholder", "readonly", "required", "role", "rows", "size", "spellcheck", "success", "type", "value"] }, { kind: "component", type: i2.GovFormLabel, selector: "gov-form-label", inputs: ["identifier", "legend", "required", "size"] }, { kind: "component", type: i2.GovFormMessage, selector: "gov-form-message", inputs: ["color", "size"] }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "directive", type: i2.TextValueAccessor, selector: "gov-form-input:not([input-type=number]),gov-form-autocomplete" }, { kind: "component", type: ErrorComponent, selector: "v-validation-message", inputs: ["ngControl", "errorSlot", "messageSlot"] }, { kind: "pipe", type: GovSizePipe, name: "govSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3295
- }
3296
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NumberInputComponent, decorators: [{
3297
- type: Component,
3298
- args: [{ selector: 'v-number-input', imports: [
3299
- ReactiveFormsModule,
3300
- GovDesignSystemModule,
3301
- GovSizePipe,
3302
- ErrorComponent
3303
- ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
3304
- {
3305
- provide: NUMBER_INPUT_COMPONENT_TOKEN,
3306
- useExisting: NumberInputComponent,
3307
- },
3308
- ], template: "<gov-form-control>\n @if (label) {\n <gov-form-label \n [slot]=\"labelSlot\"\n [size]=\"size | govSize\"\n >\n {{ label }}\n </gov-form-label>\n }\n <gov-form-group>\n <gov-form-input \n [attr.input-type]=\"type\"\n [formControl]=\"formControl\"\n [minlength]=\"minlength\" \n [maxlength]=\"maxlength\" \n [size]='size | govSize' \n [name]='name' \n [role]='role'\n [required]=\"required\"\n [readonly]=\"readonly\"\n [invalid]=\"ngControl?.errors ? true : false\"\n >\n @if (icon) {\n <gov-icon\n [name]=\"icon\"\n [slot]=\"iconPos === 'left' ? 'icon-start' : 'icon-end'\"\n />\n } @if (prefix) {\n <p slot=\"prefix\">\n {{ prefix }}\n </p>\n } @if (sufix) {\n <p slot=\"sufix\">\n {{ sufix }}\n </p>\n }\n </gov-form-input>\n <v-validation-message [ngControl]=\"ngControl\"></v-validation-message>\n @if (message) {\n <gov-form-message \n [slot]=\"messageSlot\" \n color=\"neutral\"\n >\n {{ message }}\n </gov-form-message>\n }\n </gov-form-group>\n</gov-form-control>\n" }]
3309
- }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
3310
- type: Optional
3311
- }, {
3312
- type: Self
3313
- }] }], propDecorators: { mode: [{
3314
- type: Input
3315
- }], currency: [{
3316
- type: Input
3317
- }], min: [{
3318
- type: Input
3319
- }], max: [{
3320
- type: Input
3321
- }], step: [{
3322
- type: Input
3323
- }], floatLabel: [{
3324
- type: Input
3325
- }], type: [{
3326
- type: Input
3327
- }], minlength: [{
3328
- type: Input
3329
- }], maxlength: [{
3330
- type: Input
3331
- }], prefix: [{
3332
- type: Input
3333
- }], sufix: [{
3334
- type: Input
3335
- }], message: [{
3336
- type: Input
3337
- }], name: [{
3338
- type: Input
3339
- }], role: [{
3340
- type: Input
3341
- }], size: [{
3342
- type: Input
3343
- }], icon: [{
3344
- type: Input
3345
- }], iconPos: [{
3346
- type: Input
3347
- }], labelSlot: [{
3348
- type: Input
3349
- }], errorSlot: [{
3350
- type: Input
3351
- }], messageSlot: [{
3352
- type: Input
3353
- }] } });
3354
-
3355
- class PageHeaderComponent {
3356
- title = '';
3357
- subtitle;
3358
- showBackButton;
3359
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3360
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: PageHeaderComponent, isStandalone: true, selector: "v-page-header", inputs: { title: "title", subtitle: "subtitle", showBackButton: "showBackButton" }, ngImport: i0, template: "<div class=\"d-flex gap-3 align-items-center\">\n <h2>{{ title | translate }}</h2>\n</div>", styles: ["h2{font-size:1.5rem;color:var(--color-neutral-700);margin:0}.d-flex{display:flex;align-items:center;gap:1rem}\n"], dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3361
- }
3362
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: PageHeaderComponent, decorators: [{
3363
- type: Component,
3364
- args: [{ selector: 'v-page-header', imports: [
3365
- GovDesignSystemModule,
3366
- TranslateModule
3367
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-flex gap-3 align-items-center\">\n <h2>{{ title | translate }}</h2>\n</div>", styles: ["h2{font-size:1.5rem;color:var(--color-neutral-700);margin:0}.d-flex{display:flex;align-items:center;gap:1rem}\n"] }]
3368
- }], propDecorators: { title: [{
3369
- type: Input
3370
- }], subtitle: [{
3371
- type: Input
3372
- }], showBackButton: [{
3373
- type: Input
3374
- }] } });
3375
-
3376
- class StepperComponent {
3377
- items = [];
3378
- size = FieldSize.medium;
3379
- icon;
3380
- prefix;
3381
- annotation;
3382
- label;
3383
- layout = LayoutType.horizontal;
3384
- activeIndexChange = new EventEmitter();
3385
- steps = 0;
3386
- currentStep = 0;
3387
- ngOnInit() {
3388
- this.steps = this.items.length;
3389
- }
3390
- previousStep() {
3391
- if (this.currentStep > 0) {
3392
- this.currentStep--;
3393
- }
3394
- }
3395
- nextStep() {
3396
- if (this.currentStep < this.items.length - 1) {
3397
- this.currentStep++;
3398
- }
3399
- }
3400
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3401
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: StepperComponent, isStandalone: true, selector: "v-stepper", inputs: { items: "items", size: "size", icon: "icon", prefix: "prefix", annotation: "annotation", label: "label", layout: "layout" }, outputs: { activeIndexChange: "activeIndexChange" }, providers: [
3402
- { provide: STEPPER_COMPONENT_TOKEN, useExisting: StepperComponent },
3403
- ], ngImport: i0, template: "<gov-stepper \n [ngClass]=\"layout === 'vertical' ? 'd-block' : 'd-flex justify-content-between'\"\n [size]=\"size | govSize\"\n>\n @for (item of items; track item; let index = $index) {\n <gov-stepper-item\n [ngClass]=\"{ 'active-step': index === currentStep }\"\n >\n <span \n slot=\"prefix\"\n [ngStyle]=\"{ 'background-color': index === currentStep ? 'var(--gov-color-primary-300)' : 'var(--gov-color-primary)' }\"\n >\n {{ item.prefix }}\n </span>\n <p slot=\"headline\">{{ item.header }}</p>\n <p slot=\"annotation\">{{ item.annotation }}</p>\n </gov-stepper-item>\n }\n</gov-stepper>\n<div class=\"d-flex pt-4 justify-content-between\">\n @if (currentStep > 0) {\n <v-button\n [label]=\"'Back'\"\n [size]=\"size\"\n (click)=\"previousStep()\"\n />\n }\n @if (currentStep < steps - 1) {\n <v-button\n [label]=\"'Next'\"\n [size]=\"size\"\n (click)=\"nextStep()\"\n />\n }\n</div>", styles: ["gov-stepper-item,.gov-stepper-item{width:auto!important}.active-step{background-color:var(--color-primary-300);border:1px solid var(--color-primary-600);border-radius:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "v-button", inputs: ["label", "icon", "badge", "iconPos", "disabled", "rounded", "outlined", "raised", "routerLink", "size", "queryParams", "severity", "type", "expanded", "name"], outputs: ["click"] }, { kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovStepper, selector: "gov-stepper", inputs: ["size"] }, { kind: "component", type: i2.GovStepperItem, selector: "gov-stepper-item", inputs: ["color", "identifier", "size"] }, { kind: "pipe", type: GovSizePipe, name: "govSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3404
- }
3405
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: StepperComponent, decorators: [{
3406
- type: Component,
3407
- args: [{ selector: 'v-stepper', imports: [
3408
- CommonModule,
3409
- ButtonComponent,
3410
- GovDesignSystemModule,
3411
- GovSizePipe,
3412
- ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
3413
- { provide: STEPPER_COMPONENT_TOKEN, useExisting: StepperComponent },
3414
- ], template: "<gov-stepper \n [ngClass]=\"layout === 'vertical' ? 'd-block' : 'd-flex justify-content-between'\"\n [size]=\"size | govSize\"\n>\n @for (item of items; track item; let index = $index) {\n <gov-stepper-item\n [ngClass]=\"{ 'active-step': index === currentStep }\"\n >\n <span \n slot=\"prefix\"\n [ngStyle]=\"{ 'background-color': index === currentStep ? 'var(--gov-color-primary-300)' : 'var(--gov-color-primary)' }\"\n >\n {{ item.prefix }}\n </span>\n <p slot=\"headline\">{{ item.header }}</p>\n <p slot=\"annotation\">{{ item.annotation }}</p>\n </gov-stepper-item>\n }\n</gov-stepper>\n<div class=\"d-flex pt-4 justify-content-between\">\n @if (currentStep > 0) {\n <v-button\n [label]=\"'Back'\"\n [size]=\"size\"\n (click)=\"previousStep()\"\n />\n }\n @if (currentStep < steps - 1) {\n <v-button\n [label]=\"'Next'\"\n [size]=\"size\"\n (click)=\"nextStep()\"\n />\n }\n</div>", styles: ["gov-stepper-item,.gov-stepper-item{width:auto!important}.active-step{background-color:var(--color-primary-300);border:1px solid var(--color-primary-600);border-radius:.5rem}\n"] }]
3415
- }], propDecorators: { items: [{
3416
- type: Input
3417
- }], size: [{
3418
- type: Input
3419
- }], icon: [{
3420
- type: Input
3421
- }], prefix: [{
3422
- type: Input
3423
- }], annotation: [{
3424
- type: Input
3425
- }], label: [{
3426
- type: Input
3427
- }], layout: [{
3428
- type: Input
3429
- }], activeIndexChange: [{
3430
- type: Output
3431
- }] } });
3432
-
3433
- class TabViewItemComponent {
3434
- id;
3435
- index;
3436
- disabled = false;
3437
- title;
3438
- content;
3439
- url;
3440
- contentTemplate;
3441
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: TabViewItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3442
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: TabViewItemComponent, isStandalone: true, selector: "v-tab-view-item", inputs: { id: "id", index: "index", disabled: "disabled", title: "title", content: "content", url: "url" }, viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, static: true }], ngImport: i0, template: `<ng-template #contentTemplate>
3443
- <ng-content></ng-content>
3444
- </ng-template>`, isInline: true });
3445
- }
3446
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: TabViewItemComponent, decorators: [{
3447
- type: Component,
3448
- args: [{
3449
- selector: 'v-tab-view-item',
3450
- template: `<ng-template #contentTemplate>
3451
- <ng-content></ng-content>
3452
- </ng-template>`
3453
- }]
3454
- }], propDecorators: { id: [{
3455
- type: Input
3456
- }], index: [{
3457
- type: Input
3458
- }], disabled: [{
3459
- type: Input
3460
- }], title: [{
3461
- type: Input
3462
- }], content: [{
3463
- type: Input
3464
- }], url: [{
3465
- type: Input
3466
- }], contentTemplate: [{
3467
- type: ViewChild,
3468
- args: ['contentTemplate', { static: true }]
3469
- }] } });
3470
-
3471
- class TabViewComponent {
3472
- tabs;
3473
- highlight = false;
3474
- useRouting = false;
3475
- items = [];
3476
- activeIndex = 0;
3477
- activeIndexChange = new EventEmitter();
3478
- cd = inject(ChangeDetectorRef);
3479
- ngAfterContentInit() {
3480
- this.initTabs();
3481
- }
3482
- initTabs() {
3483
- this.items = [...this.tabs.toArray(), ...this.items];
3484
- this.cd.detectChanges();
3485
- }
3486
- changeTabIndex(index) {
3487
- if (this.activeIndex !== index) {
3488
- this.activeIndex = index;
3489
- this.activeIndexChange.emit(this.activeIndex);
3490
- }
3491
- this.activeIndexChange.emit(index);
3492
- this.cd.detectChanges();
3493
- }
3494
- setTabActive(options) {
3495
- options.forEach((_, index) => {
3496
- index === this.activeIndex;
3497
- });
3498
- this.cd.detectChanges();
3499
- }
3500
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: TabViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3501
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: TabViewComponent, isStandalone: true, selector: "v-tab-view", inputs: { highlight: "highlight", useRouting: "useRouting", items: "items", activeIndex: "activeIndex" }, outputs: { activeIndexChange: "activeIndexChange" }, queries: [{ propertyName: "tabs", predicate: TabViewItemComponent }], ngImport: i0, template: "<div class=\"gov-tabs\">\n <div class=\"gov-tabs__tabs\" role=\"tablist\">\n @for (item of items; track item; let index = $index) {\n @if (useRouting) {\n <button\n [attr.index]=\"index\"\n class=\"gov-tabs__btn\"\n [routerLink]=\"item.url\"\n [routerLinkActive]=\"'active'\"\n #rls=\"routerLinkActive\"\n [attr.aria-selected]=\"rls.isActive\"\n [disabled]=\"item.disabled\"\n role=\"tab\"\n [attr.activeIndex]=\"activeIndex\"\n (click)=\"changeTabIndex(index)\"\n >\n {{ item.title | translate }}\n </button>\n } @else {\n <button\n [attr.index]=\"index\"\n class=\"gov-tabs__btn\"\n [attr.aria-selected]=\"activeIndex === index\"\n [disabled]=\"item.disabled\"\n role=\"tab\"\n [attr.activeIndex]=\"activeIndex\"\n (click)=\"changeTabIndex(index)\"\n >\n {{ item.title | translate }}\n </button>}\n }\n </div>\n <div class=\"gov-tabs__tabs\">\n @for (item of items; track item; let index = $index) {\n <div class=\"gov-tabs__tab\" [class.active]=\"activeIndex === index\" >\n <div class=\"gov-tabs__list\">\n <div class=\"gov-tabs__content\">\n @if (item.contentTemplate) {\n <ng-container *ngTemplateOutlet=\"item.contentTemplate\"></ng-container>\n } @else if (item.content) {\n {{ item.content }}\n }\n </div>\n </div>\n </div>\n }\n @if (useRouting) {\n <router-outlet class=\"gov-tabs__content\"></router-outlet>\n }\n </div>\n</div>", styles: [".gov-tabs__tabs{position:relative;width:100%;margin-bottom:0%;overflow-x:clip}.gov-tabs__tab{display:none;opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease}.gov-tabs__tab.active{display:block;opacity:1;transform:translateY(0)}.gov-tabs__btn{font-size:medium;padding:10px 20px;border:none;border-bottom:2px solid transparent;font-weight:700}.gov-tabs__btn[aria-selected=true]:after{display:block;width:100%;height:2px;background-color:var(--border-primary);position:absolute;bottom:-2px;left:0}.gov-tabs__content{margin-top:var(--spacing-m-nudge);flex-wrap:wrap;width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
3502
- }
3503
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: TabViewComponent, decorators: [{
3504
- type: Component,
3505
- args: [{ selector: 'v-tab-view', imports: [NgTemplateOutlet, RouterOutlet, RouterLink, RouterLinkActive, TranslatePipe], encapsulation: ViewEncapsulation.None, template: "<div class=\"gov-tabs\">\n <div class=\"gov-tabs__tabs\" role=\"tablist\">\n @for (item of items; track item; let index = $index) {\n @if (useRouting) {\n <button\n [attr.index]=\"index\"\n class=\"gov-tabs__btn\"\n [routerLink]=\"item.url\"\n [routerLinkActive]=\"'active'\"\n #rls=\"routerLinkActive\"\n [attr.aria-selected]=\"rls.isActive\"\n [disabled]=\"item.disabled\"\n role=\"tab\"\n [attr.activeIndex]=\"activeIndex\"\n (click)=\"changeTabIndex(index)\"\n >\n {{ item.title | translate }}\n </button>\n } @else {\n <button\n [attr.index]=\"index\"\n class=\"gov-tabs__btn\"\n [attr.aria-selected]=\"activeIndex === index\"\n [disabled]=\"item.disabled\"\n role=\"tab\"\n [attr.activeIndex]=\"activeIndex\"\n (click)=\"changeTabIndex(index)\"\n >\n {{ item.title | translate }}\n </button>}\n }\n </div>\n <div class=\"gov-tabs__tabs\">\n @for (item of items; track item; let index = $index) {\n <div class=\"gov-tabs__tab\" [class.active]=\"activeIndex === index\" >\n <div class=\"gov-tabs__list\">\n <div class=\"gov-tabs__content\">\n @if (item.contentTemplate) {\n <ng-container *ngTemplateOutlet=\"item.contentTemplate\"></ng-container>\n } @else if (item.content) {\n {{ item.content }}\n }\n </div>\n </div>\n </div>\n }\n @if (useRouting) {\n <router-outlet class=\"gov-tabs__content\"></router-outlet>\n }\n </div>\n</div>", styles: [".gov-tabs__tabs{position:relative;width:100%;margin-bottom:0%;overflow-x:clip}.gov-tabs__tab{display:none;opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease}.gov-tabs__tab.active{display:block;opacity:1;transform:translateY(0)}.gov-tabs__btn{font-size:medium;padding:10px 20px;border:none;border-bottom:2px solid transparent;font-weight:700}.gov-tabs__btn[aria-selected=true]:after{display:block;width:100%;height:2px;background-color:var(--border-primary);position:absolute;bottom:-2px;left:0}.gov-tabs__content{margin-top:var(--spacing-m-nudge);flex-wrap:wrap;width:100%}\n"] }]
3506
- }], propDecorators: { tabs: [{
3507
- type: ContentChildren,
3508
- args: [TabViewItemComponent]
3509
- }], highlight: [{
3510
- type: Input
3511
- }], useRouting: [{
3512
- type: Input
3513
- }], items: [{
3514
- type: Input
3515
- }], activeIndex: [{
3516
- type: Input
3517
- }], activeIndexChange: [{
3518
- type: Output
3519
- }] } });
3520
-
3521
- class GovInitService {
3522
- constructor() {
3523
- defineCustomElements(window);
3524
- }
3525
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: GovInitService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
3526
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: GovInitService, providedIn: 'root' });
3527
- }
3528
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: GovInitService, decorators: [{
3529
- type: Injectable,
3530
- args: [{
3531
- providedIn: 'root',
3532
- }]
3533
- }], ctorParameters: () => [] });
3534
-
3535
- class NotAuthenticatedComponent {
3536
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NotAuthenticatedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3537
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: NotAuthenticatedComponent, isStandalone: true, selector: "v-not-authenticated", ngImport: i0, template: "<gov-error-code>\n <gov-icon type=\"complex\" name=\"card-401\" slot=\"icon\"></gov-icon>\n <p>You are not logged in, please do so.</p>\n <v-button color=\"primary\" size=\"medium\" type=\"solid\" label=\"Login\" [routerLink]=\"['/login']\" />\n</gov-error-code>\n", dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovErrorCode, selector: "gov-error-code" }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "component", type: ButtonComponent, selector: "v-button", inputs: ["label", "icon", "badge", "iconPos", "disabled", "rounded", "outlined", "raised", "routerLink", "size", "queryParams", "severity", "type", "expanded", "name"], outputs: ["click"] }] });
3538
- }
3539
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NotAuthenticatedComponent, decorators: [{
3540
- type: Component,
3541
- args: [{ selector: 'v-not-authenticated', imports: [
3542
- GovDesignSystemModule,
3543
- ButtonComponent,
3544
- ], template: "<gov-error-code>\n <gov-icon type=\"complex\" name=\"card-401\" slot=\"icon\"></gov-icon>\n <p>You are not logged in, please do so.</p>\n <v-button color=\"primary\" size=\"medium\" type=\"solid\" label=\"Login\" [routerLink]=\"['/login']\" />\n</gov-error-code>\n" }]
3545
- }] });
3546
-
3547
- class NotAuthorizedComponent {
3548
- goBack() {
3549
- history.back();
3550
- }
3551
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NotAuthorizedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3552
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: NotAuthorizedComponent, isStandalone: true, selector: "v-not-authorized", ngImport: i0, template: "<gov-error-code>\n <gov-icon type=\"complex\" name=\"card-403\" slot=\"icon\"></gov-icon>\n <p>You are not authorized to view this content.</p>\n <v-button color=\"primary\" size=\"medium\" type=\"solid\" label=\"Go back\" (click)=\"goBack()\" />\n</gov-error-code>\n", dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovErrorCode, selector: "gov-error-code" }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "component", type: ButtonComponent, selector: "v-button", inputs: ["label", "icon", "badge", "iconPos", "disabled", "rounded", "outlined", "raised", "routerLink", "size", "queryParams", "severity", "type", "expanded", "name"], outputs: ["click"] }] });
3553
- }
3554
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NotAuthorizedComponent, decorators: [{
3555
- type: Component,
3556
- args: [{ selector: 'v-not-authorized', imports: [
3557
- GovDesignSystemModule,
3558
- ButtonComponent,
3559
- ], template: "<gov-error-code>\n <gov-icon type=\"complex\" name=\"card-403\" slot=\"icon\"></gov-icon>\n <p>You are not authorized to view this content.</p>\n <v-button color=\"primary\" size=\"medium\" type=\"solid\" label=\"Go back\" (click)=\"goBack()\" />\n</gov-error-code>\n" }]
3560
- }] });
3561
-
3562
- class NotFoundComponent {
3563
- goBack() {
3564
- history.back();
3565
- }
3566
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3567
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: NotFoundComponent, isStandalone: true, selector: "v-not-found", ngImport: i0, template: "<gov-error-code>\n <gov-icon type=\"complex\" name=\"card-404\" slot=\"icon\"></gov-icon>\n <p>The item you are looking for does not exist.</p>\n <v-button color=\"primary\" size=\"medium\" type=\"solid\" label=\"Go back\" (click)=\"goBack()\" />\n</gov-error-code>\n", dependencies: [{ kind: "ngmodule", type: GovDesignSystemModule }, { kind: "component", type: i2.GovErrorCode, selector: "gov-error-code" }, { kind: "component", type: i2.GovIcon, selector: "gov-icon", inputs: ["color", "name", "size", "type"] }, { kind: "component", type: ButtonComponent, selector: "v-button", inputs: ["label", "icon", "badge", "iconPos", "disabled", "rounded", "outlined", "raised", "routerLink", "size", "queryParams", "severity", "type", "expanded", "name"], outputs: ["click"] }] });
3568
- }
3569
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NotFoundComponent, decorators: [{
3570
- type: Component,
3571
- args: [{ selector: 'v-not-found', imports: [
3572
- GovDesignSystemModule,
3573
- ButtonComponent
3574
- ], template: "<gov-error-code>\n <gov-icon type=\"complex\" name=\"card-404\" slot=\"icon\"></gov-icon>\n <p>The item you are looking for does not exist.</p>\n <v-button color=\"primary\" size=\"medium\" type=\"solid\" label=\"Go back\" (click)=\"goBack()\" />\n</gov-error-code>\n" }]
3575
- }] });
3576
-
3577
- /**
3578
- * Generated bundle index. Do not edit.
3579
- */
3580
-
3581
- export { ActionButtonComponent, ActionButtonGroupComponent, BreadcrumbComponent, ButtonComponent, CalendarComponent, CheckboxComponent, ConfirmDialogComponent, DropdownButtonComponent, DropdownComponent, DynamicComponent, DynamicComponentFactoryService, FEATURE_LIST_COLUMN_PROVIDER, FEATURE_LIST_PAGE_CONFIG_PROPERTY, FeatureListColumnDirective, FeatureListComponent, FeatureListFilterFieldDirective, FeatureListFilterPipe, FilterComponent, FilterFieldDirective, FormFieldComponent, GenericFieldComponent, GenericFormComponent, GovColorPipe, GovInitService, GovMultiselectOptionsPipe, GovSizePipe, HeaderComponent, Icons, InputGroupComponent, LoaderComponent, MultiselectComponent, NotAuthenticatedComponent, NotAuthorizedComponent, NotFoundComponent, NumberInputComponent, PageHeaderComponent, PasswordComponent, RadioButtonComponent, SearchComponent, SectionComponent, SideMenuComponent, SideMenuModule, SnackbarComponent, SnackbarService, StepperComponent, SwitchComponent, TabViewComponent, TabViewItemComponent, TableComponent, TextareaComponent, TextfieldComponent, TooltipComponent, addFeatureListPage, generateFormGroup, getColumnClass };
3582
- //# sourceMappingURL=verisoft-ui-govcz.mjs.map