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