@jooler/inputs 0.0.50 → 0.0.52
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/{esm2020 → esm2022}/inputs.mjs +4 -4
- package/esm2022/lib/add-asterisk.directive.mjs +42 -0
- package/esm2022/lib/ag-grid-select-mixin.mjs +73 -0
- package/esm2022/lib/choose-enum/choose-enum.component.mjs +205 -0
- package/esm2022/lib/choose-enum-renderer/choose-enum-renderer.component.mjs +45 -0
- package/esm2022/lib/choose-general-item/choose-general-item.component.mjs +149 -0
- package/esm2022/lib/choose-general-item/choose-general-item.service.mjs +45 -0
- package/esm2022/lib/choose-general-item-renderer/choose-general-item-renderer.component.mjs +37 -0
- package/esm2022/lib/choose-line-type/choose-line-type.component.mjs +53 -0
- package/esm2022/lib/choose-yes-or-no/choose-yes-or-no.component.mjs +69 -0
- package/esm2022/lib/choose-yes-or-no-renderer/choose-yes-or-no-renderer.component.mjs +33 -0
- package/{esm2020 → esm2022}/lib/dropdown-actions/dropdown-action-type.model.mjs +5 -5
- package/esm2022/lib/dropdown-actions/dropdown-actions.component.mjs +75 -0
- package/{esm2020 → esm2022}/lib/dropdown-actions/label-and-route.model.mjs +1 -1
- package/{esm2020 → esm2022}/lib/editable-savable-input/dynamicPipe.mjs +20 -20
- package/{esm2020 → esm2022}/lib/editable-savable-input/dynamicPipeMapping.mjs +4 -4
- package/esm2022/lib/editable-savable-input/editable-savable-input.component.mjs +128 -0
- package/esm2022/lib/enum-helper.model.mjs +14 -0
- package/esm2022/lib/formcontrol-validation-msg.directive.mjs +150 -0
- package/esm2022/lib/general-input-renderer/custom-decimal-point-two-digits.directive.mjs +63 -0
- package/esm2022/lib/general-input-renderer/general-input-renderer.component.mjs +50 -0
- package/{esm2020 → esm2022}/lib/inputs.module.mjs +122 -122
- package/{esm2020 → esm2022}/lib/models/label-and-field.model.mjs +5 -3
- package/esm2022/lib/models/line-type-model-helper.mjs +51 -0
- package/{esm2020 → esm2022}/lib/models/line-type.model.mjs +5 -5
- package/esm2022/lib/models/yes-or-no.model.mjs +6 -0
- package/esm2022/lib/primary-colors.mjs +12 -0
- package/esm2022/lib/services/validation-message.service.mjs +111 -0
- package/esm2022/lib/show-table-errors/show-table-errors.component.mjs +25 -0
- package/{esm2020 → esm2022}/public-api.mjs +23 -23
- package/fesm2022/inputs.mjs +1494 -0
- package/fesm2022/inputs.mjs.map +1 -0
- package/index.d.ts +5 -5
- package/lib/add-asterisk.directive.d.ts +12 -12
- package/lib/ag-grid-select-mixin.d.ts +22 -0
- package/lib/choose-enum/choose-enum.component.d.ts +57 -51
- package/lib/choose-enum-renderer/choose-enum-renderer.component.d.ts +13 -15
- package/lib/choose-general-item/choose-general-item.component.d.ts +49 -49
- package/lib/choose-general-item/choose-general-item.service.d.ts +18 -18
- package/lib/choose-general-item-renderer/choose-general-item-renderer.component.d.ts +15 -15
- package/lib/choose-line-type/choose-line-type.component.d.ts +19 -19
- package/lib/choose-yes-or-no/choose-yes-or-no.component.d.ts +24 -24
- package/lib/choose-yes-or-no-renderer/choose-yes-or-no-renderer.component.d.ts +16 -16
- package/lib/dropdown-actions/dropdown-action-type.model.d.ts +4 -4
- package/lib/dropdown-actions/dropdown-actions.component.d.ts +22 -22
- package/lib/dropdown-actions/label-and-route.model.d.ts +4 -4
- package/lib/editable-savable-input/dynamicPipe.d.ts +7 -7
- package/lib/editable-savable-input/dynamicPipeMapping.d.ts +5 -5
- package/lib/editable-savable-input/editable-savable-input.component.d.ts +37 -37
- package/lib/enum-helper.model.d.ts +8 -0
- package/lib/formcontrol-validation-msg.directive.d.ts +25 -25
- package/lib/general-input-renderer/custom-decimal-point-two-digits.directive.d.ts +13 -13
- package/lib/general-input-renderer/general-input-renderer.component.d.ts +15 -15
- package/lib/inputs.module.d.ts +29 -29
- package/lib/models/label-and-field.model.d.ts +4 -4
- package/lib/models/line-type-model-helper.d.ts +12 -12
- package/lib/models/line-type.model.d.ts +4 -4
- package/lib/models/yes-or-no.model.d.ts +5 -5
- package/lib/primary-colors.d.ts +11 -11
- package/lib/services/validation-message.service.d.ts +50 -50
- package/lib/show-table-errors/show-table-errors.component.d.ts +11 -11
- package/package.json +10 -16
- package/public-api.d.ts +20 -20
- package/esm2020/lib/add-asterisk.directive.mjs +0 -41
- package/esm2020/lib/choose-enum/choose-enum.component.mjs +0 -176
- package/esm2020/lib/choose-enum-renderer/choose-enum-renderer.component.mjs +0 -26
- package/esm2020/lib/choose-general-item/choose-general-item.component.mjs +0 -133
- package/esm2020/lib/choose-general-item/choose-general-item.service.mjs +0 -43
- package/esm2020/lib/choose-general-item-renderer/choose-general-item-renderer.component.mjs +0 -32
- package/esm2020/lib/choose-line-type/choose-line-type.component.mjs +0 -52
- package/esm2020/lib/choose-yes-or-no/choose-yes-or-no.component.mjs +0 -69
- package/esm2020/lib/choose-yes-or-no-renderer/choose-yes-or-no-renderer.component.mjs +0 -27
- package/esm2020/lib/custom-theme.mjs +0 -104
- package/esm2020/lib/dropdown-actions/dropdown-actions.component.mjs +0 -72
- package/esm2020/lib/editable-savable-input/editable-savable-input.component.mjs +0 -123
- package/esm2020/lib/formcontrol-validation-msg.directive.mjs +0 -144
- package/esm2020/lib/general-input-renderer/custom-decimal-point-two-digits.directive.mjs +0 -61
- package/esm2020/lib/general-input-renderer/general-input-renderer.component.mjs +0 -45
- package/esm2020/lib/models/enum-helper-functions.mjs +0 -57
- package/esm2020/lib/models/enum-helper.model.mjs +0 -2
- package/esm2020/lib/models/line-type-model-helper.mjs +0 -47
- package/esm2020/lib/models/yes-or-no.model.mjs +0 -3
- package/esm2020/lib/primary-colors.mjs +0 -12
- package/esm2020/lib/services/validation-message.service.mjs +0 -106
- package/esm2020/lib/show-table-errors/show-table-errors.component.mjs +0 -23
- package/fesm2015/inputs.mjs +0 -1475
- package/fesm2015/inputs.mjs.map +0 -1
- package/fesm2020/inputs.mjs +0 -1471
- package/fesm2020/inputs.mjs.map +0 -1
- package/lib/custom-theme.d.ts +0 -8
- package/lib/models/enum-helper-functions.d.ts +0 -5
- package/lib/models/enum-helper.model.d.ts +0 -6
|
@@ -0,0 +1,1494 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { EventEmitter, forwardRef, Component, Input, Output, Injectable, Inject, Pipe, Directive, HostListener, NgModule } from '@angular/core';
|
|
3
|
+
import * as i2$1 from '@angular/forms';
|
|
4
|
+
import { NG_VALUE_ACCESSOR, NgModel, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
5
|
+
import * as i4 from '@jooler/shared-general-components';
|
|
6
|
+
import { EnumHelperBaseClass, SharedGeneralComponentsModule } from '@jooler/shared-general-components';
|
|
7
|
+
import * as i1 from '@angular/common';
|
|
8
|
+
import { CurrencyPipe, DecimalPipe, CommonModule } from '@angular/common';
|
|
9
|
+
import * as i2 from '@ng-select/ng-select';
|
|
10
|
+
import { NgSelectModule } from '@ng-select/ng-select';
|
|
11
|
+
import * as i2$2 from '@fortawesome/angular-fontawesome';
|
|
12
|
+
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
|
13
|
+
import * as i1$1 from '@angular/common/http';
|
|
14
|
+
import { HttpHeaders } from '@angular/common/http';
|
|
15
|
+
import * as i3 from '@angular/material/button';
|
|
16
|
+
import { AppMaterialModule } from '@jooler/app-material';
|
|
17
|
+
import * as i1$2 from '@angular/router';
|
|
18
|
+
import * as i3$1 from '@angular/material/menu';
|
|
19
|
+
|
|
20
|
+
class ChooseEnumComponent {
|
|
21
|
+
items;
|
|
22
|
+
appendTo = 'body';
|
|
23
|
+
allowAllCapsValues = false;
|
|
24
|
+
clearable = true;
|
|
25
|
+
customColors;
|
|
26
|
+
enumChoices;
|
|
27
|
+
getValuesArrayFromEnum = EnumHelperBaseClass.getEnumOptionsFromEnumClass;
|
|
28
|
+
valuesToDisable = [];
|
|
29
|
+
valuesToHide = [];
|
|
30
|
+
isChip = true;
|
|
31
|
+
isDropdownDisabled = false;
|
|
32
|
+
isMultiple;
|
|
33
|
+
label = 'label';
|
|
34
|
+
labelTextAlign = 'left';
|
|
35
|
+
labelTextFontWeight;
|
|
36
|
+
labelTextFontSize;
|
|
37
|
+
paddingTop;
|
|
38
|
+
placeholder;
|
|
39
|
+
percentWidth = false;
|
|
40
|
+
selectedItem;
|
|
41
|
+
width;
|
|
42
|
+
isReadOnly = false;
|
|
43
|
+
virtualScroll = false;
|
|
44
|
+
change = new EventEmitter();
|
|
45
|
+
close = new EventEmitter();
|
|
46
|
+
constructor() { }
|
|
47
|
+
ngOnInit() {
|
|
48
|
+
if (this.getValuesArrayFromEnum != null) {
|
|
49
|
+
this.items = this.getValuesArrayFromEnum(this.enumChoices, this.customColors, this.allowAllCapsValues);
|
|
50
|
+
}
|
|
51
|
+
if (this.valuesToDisable.length > 0) {
|
|
52
|
+
this.disabledItems();
|
|
53
|
+
}
|
|
54
|
+
if (this.valuesToHide.length > 0) {
|
|
55
|
+
this.hideItems();
|
|
56
|
+
}
|
|
57
|
+
this.sortAndReorderItems();
|
|
58
|
+
}
|
|
59
|
+
ngOnChanges() {
|
|
60
|
+
if (this.getValuesArrayFromEnum != null) {
|
|
61
|
+
this.items = this.getValuesArrayFromEnum(this.enumChoices, this.customColors, this.allowAllCapsValues);
|
|
62
|
+
}
|
|
63
|
+
if (this.valuesToDisable.length > 0) {
|
|
64
|
+
this.disabledItems();
|
|
65
|
+
}
|
|
66
|
+
if (this.valuesToHide.length > 0) {
|
|
67
|
+
this.hideItems();
|
|
68
|
+
}
|
|
69
|
+
this.sortAndReorderItems();
|
|
70
|
+
}
|
|
71
|
+
disabledItems() {
|
|
72
|
+
for (let value of this.valuesToDisable) {
|
|
73
|
+
let index = this.items.findIndex(enumOption => enumOption.value == value);
|
|
74
|
+
if (index >= 0) {
|
|
75
|
+
this.items[index].disabled = true;
|
|
76
|
+
}
|
|
77
|
+
else {
|
|
78
|
+
throw Error('Index was not found for an enum element in the valuesToDisable array provided.');
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
hideItems() {
|
|
83
|
+
for (let value of this.valuesToHide) {
|
|
84
|
+
let index = this.items.findIndex(enumOption => enumOption.value == value);
|
|
85
|
+
if (index >= 0) {
|
|
86
|
+
this.items.splice(index, 1);
|
|
87
|
+
}
|
|
88
|
+
else {
|
|
89
|
+
throw Error('Index was not found for an enum element in the valuesToHide array provided.');
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
sortAndReorderItems() {
|
|
94
|
+
const nonDisabledItems = this.items.filter(item => !item.disabled);
|
|
95
|
+
const disabledItems = this.items.filter(item => item.disabled);
|
|
96
|
+
nonDisabledItems.sort((a, b) => a.label.localeCompare(b.label));
|
|
97
|
+
this.items = [...nonDisabledItems, ...disabledItems];
|
|
98
|
+
}
|
|
99
|
+
writeValue(type) {
|
|
100
|
+
if (type != undefined) {
|
|
101
|
+
this.selectedItem = type;
|
|
102
|
+
}
|
|
103
|
+
else if (type == null) {
|
|
104
|
+
this.selectedItem = type;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
registerOnChange(fn) {
|
|
108
|
+
this.propagateChange = fn;
|
|
109
|
+
}
|
|
110
|
+
registerOnTouched(fn) {
|
|
111
|
+
this.propogateTouch = fn;
|
|
112
|
+
}
|
|
113
|
+
propagateChange = (_) => { };
|
|
114
|
+
propogateTouch = () => { };
|
|
115
|
+
updateBlur() {
|
|
116
|
+
this.propogateTouch();
|
|
117
|
+
this.close.emit();
|
|
118
|
+
}
|
|
119
|
+
onSelectedItemChanged() {
|
|
120
|
+
this.propogateTouch();
|
|
121
|
+
this.propagateChange(this.selectedItem);
|
|
122
|
+
this.change.emit(this.selectedItem);
|
|
123
|
+
}
|
|
124
|
+
setDisabledState(isDisabled) {
|
|
125
|
+
this.isDropdownDisabled = isDisabled;
|
|
126
|
+
}
|
|
127
|
+
clear() {
|
|
128
|
+
this.selectedItem = null;
|
|
129
|
+
this.propogateTouch();
|
|
130
|
+
}
|
|
131
|
+
setStyles() {
|
|
132
|
+
let style = {
|
|
133
|
+
paddingTop: this.paddingTop + 'rem',
|
|
134
|
+
};
|
|
135
|
+
if (this.width) {
|
|
136
|
+
style['width'] = this.width + 'rem';
|
|
137
|
+
}
|
|
138
|
+
return style;
|
|
139
|
+
}
|
|
140
|
+
setLabelStyle() {
|
|
141
|
+
let style = {
|
|
142
|
+
textAlign: this.labelTextAlign,
|
|
143
|
+
fontWeight: this.labelTextFontWeight,
|
|
144
|
+
fontSize: this.labelTextFontSize + 'rem',
|
|
145
|
+
padding: '0.4rem',
|
|
146
|
+
};
|
|
147
|
+
return style;
|
|
148
|
+
}
|
|
149
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseEnumComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
150
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChooseEnumComponent, selector: "choose-enum", inputs: { appendTo: "appendTo", allowAllCapsValues: "allowAllCapsValues", clearable: "clearable", customColors: "customColors", enumChoices: "enumChoices", getValuesArrayFromEnum: "getValuesArrayFromEnum", valuesToDisable: "valuesToDisable", valuesToHide: "valuesToHide", isChip: "isChip", isDropdownDisabled: "isDropdownDisabled", isMultiple: "isMultiple", label: "label", labelTextAlign: "labelTextAlign", labelTextFontWeight: "labelTextFontWeight", labelTextFontSize: "labelTextFontSize", paddingTop: "paddingTop", placeholder: "placeholder", percentWidth: "percentWidth", selectedItem: "selectedItem", width: "width", isReadOnly: "isReadOnly", virtualScroll: "virtualScroll" }, outputs: { change: "change", close: "close" }, providers: [
|
|
151
|
+
{
|
|
152
|
+
provide: NG_VALUE_ACCESSOR,
|
|
153
|
+
useExisting: forwardRef(() => ChooseEnumComponent),
|
|
154
|
+
multi: true,
|
|
155
|
+
},
|
|
156
|
+
], usesOnChanges: true, ngImport: i0, template: "<div>\r\n <ng-select [ngStyle]=\"setStyles()\" (blur)=\"updateBlur()\" bindLabel=\"label\" bindValue=\"value\" [items]=\"items\"\r\n [virtualScroll]=\"virtualScroll\" [placeholder]=\"placeholder\" (change)=\"onSelectedItemChanged()\"\r\n [(ngModel)]=\"selectedItem\" [multiple]=\"isMultiple\" [disabled]=\"isDropdownDisabled\" [readonly]=\"isReadOnly\"\r\n [clearable]=\"clearable\" (clear)=\"clear()\" [appendTo]=\"appendTo\" dropdownPosition=\"bottom\">\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <ng-container *ngIf=\"isChip\">\r\n <ng-container [ngTemplateOutlet]=\"chip\"\r\n [ngTemplateOutletContext]=\"{ item: item, showCross: clearable, clear: clear }\">\r\n </ng-container>\r\n </ng-container>\r\n <div [ngStyle]=\"setLabelStyle()\" *ngIf=\"!isChip\">{{ item.label }}</div>\r\n </ng-template>\r\n <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\" let-clear=\"clear\">\r\n <div [ngClass]=\"{ disabled: item.disabled }\">\r\n <div *ngIf=\"isChip\" class=\"chip\">\r\n <ng-container [ngTemplateOutlet]=\"chip\"\r\n [ngTemplateOutletContext]=\"{ item: item, showCross: false, clear: clear }\">\r\n </ng-container>\r\n </div>\r\n <div [ngStyle]=\"setLabelStyle()\" *ngIf=\"!isChip\">{{ item.label }}</div>\r\n </div>\r\n </ng-template>\r\n </ng-select>\r\n</div>\r\n\r\n<ng-template #chip let-showCross=\"showCross\" let-item=\"item\" let-clear=\"clear\">\r\n <ng-chip [enumClass]=\"enumChoices\" [withCross]=\"showCross\" [enumValue]=\"item.value\" [customColors]=\"customColors\"\r\n [item]=\"item\" [clear]=\"clear\">\r\n </ng-chip>\r\n</ng-template>", styles: [".disabled{cursor:not-allowed}.disabled .chip{filter:opacity(.3)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i2.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.NgChipComponent, selector: "ng-chip", inputs: ["backgroundColor", "size", "clear", "customColors", "enumClass", "enumValue", "inputType", "item", "isClickable", "label", "width", "withCross"] }] });
|
|
157
|
+
}
|
|
158
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseEnumComponent, decorators: [{
|
|
159
|
+
type: Component,
|
|
160
|
+
args: [{ selector: 'choose-enum', providers: [
|
|
161
|
+
{
|
|
162
|
+
provide: NG_VALUE_ACCESSOR,
|
|
163
|
+
useExisting: forwardRef(() => ChooseEnumComponent),
|
|
164
|
+
multi: true,
|
|
165
|
+
},
|
|
166
|
+
], template: "<div>\r\n <ng-select [ngStyle]=\"setStyles()\" (blur)=\"updateBlur()\" bindLabel=\"label\" bindValue=\"value\" [items]=\"items\"\r\n [virtualScroll]=\"virtualScroll\" [placeholder]=\"placeholder\" (change)=\"onSelectedItemChanged()\"\r\n [(ngModel)]=\"selectedItem\" [multiple]=\"isMultiple\" [disabled]=\"isDropdownDisabled\" [readonly]=\"isReadOnly\"\r\n [clearable]=\"clearable\" (clear)=\"clear()\" [appendTo]=\"appendTo\" dropdownPosition=\"bottom\">\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <ng-container *ngIf=\"isChip\">\r\n <ng-container [ngTemplateOutlet]=\"chip\"\r\n [ngTemplateOutletContext]=\"{ item: item, showCross: clearable, clear: clear }\">\r\n </ng-container>\r\n </ng-container>\r\n <div [ngStyle]=\"setLabelStyle()\" *ngIf=\"!isChip\">{{ item.label }}</div>\r\n </ng-template>\r\n <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\" let-clear=\"clear\">\r\n <div [ngClass]=\"{ disabled: item.disabled }\">\r\n <div *ngIf=\"isChip\" class=\"chip\">\r\n <ng-container [ngTemplateOutlet]=\"chip\"\r\n [ngTemplateOutletContext]=\"{ item: item, showCross: false, clear: clear }\">\r\n </ng-container>\r\n </div>\r\n <div [ngStyle]=\"setLabelStyle()\" *ngIf=\"!isChip\">{{ item.label }}</div>\r\n </div>\r\n </ng-template>\r\n </ng-select>\r\n</div>\r\n\r\n<ng-template #chip let-showCross=\"showCross\" let-item=\"item\" let-clear=\"clear\">\r\n <ng-chip [enumClass]=\"enumChoices\" [withCross]=\"showCross\" [enumValue]=\"item.value\" [customColors]=\"customColors\"\r\n [item]=\"item\" [clear]=\"clear\">\r\n </ng-chip>\r\n</ng-template>", styles: [".disabled{cursor:not-allowed}.disabled .chip{filter:opacity(.3)}\n"] }]
|
|
167
|
+
}], ctorParameters: function () { return []; }, propDecorators: { appendTo: [{
|
|
168
|
+
type: Input
|
|
169
|
+
}], allowAllCapsValues: [{
|
|
170
|
+
type: Input
|
|
171
|
+
}], clearable: [{
|
|
172
|
+
type: Input
|
|
173
|
+
}], customColors: [{
|
|
174
|
+
type: Input
|
|
175
|
+
}], enumChoices: [{
|
|
176
|
+
type: Input
|
|
177
|
+
}], getValuesArrayFromEnum: [{
|
|
178
|
+
type: Input
|
|
179
|
+
}], valuesToDisable: [{
|
|
180
|
+
type: Input
|
|
181
|
+
}], valuesToHide: [{
|
|
182
|
+
type: Input
|
|
183
|
+
}], isChip: [{
|
|
184
|
+
type: Input
|
|
185
|
+
}], isDropdownDisabled: [{
|
|
186
|
+
type: Input
|
|
187
|
+
}], isMultiple: [{
|
|
188
|
+
type: Input
|
|
189
|
+
}], label: [{
|
|
190
|
+
type: Input
|
|
191
|
+
}], labelTextAlign: [{
|
|
192
|
+
type: Input
|
|
193
|
+
}], labelTextFontWeight: [{
|
|
194
|
+
type: Input
|
|
195
|
+
}], labelTextFontSize: [{
|
|
196
|
+
type: Input
|
|
197
|
+
}], paddingTop: [{
|
|
198
|
+
type: Input
|
|
199
|
+
}], placeholder: [{
|
|
200
|
+
type: Input
|
|
201
|
+
}], percentWidth: [{
|
|
202
|
+
type: Input
|
|
203
|
+
}], selectedItem: [{
|
|
204
|
+
type: Input
|
|
205
|
+
}], width: [{
|
|
206
|
+
type: Input
|
|
207
|
+
}], isReadOnly: [{
|
|
208
|
+
type: Input
|
|
209
|
+
}], virtualScroll: [{
|
|
210
|
+
type: Input
|
|
211
|
+
}], change: [{
|
|
212
|
+
type: Output
|
|
213
|
+
}], close: [{
|
|
214
|
+
type: Output
|
|
215
|
+
}] } });
|
|
216
|
+
|
|
217
|
+
class ShowTableErrorsComponent {
|
|
218
|
+
message;
|
|
219
|
+
showDetails;
|
|
220
|
+
ngOnInit() {
|
|
221
|
+
}
|
|
222
|
+
onMouseEnter() {
|
|
223
|
+
this.showDetails = true;
|
|
224
|
+
}
|
|
225
|
+
onMouseLeave() {
|
|
226
|
+
this.showDetails = false;
|
|
227
|
+
}
|
|
228
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ShowTableErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
229
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ShowTableErrorsComponent, selector: "show-table-errors", inputs: { message: "message" }, ngImport: i0, template: "<div (mouseenter)=\"onMouseEnter()\"(mouseleave)=\"onMouseLeave()\" class=\"icon\">\r\n <fa-icon class=\"icon\" icon=\"info-circle\" ></fa-icon>\r\n <span *ngIf=\"message\" class=\"message\"\r\n [ngClass]=\"{'no-details' : !showDetails , 'details': showDetails}\">{{message}}</span>\r\n</div>", styles: [".icon{color:#a80002;cursor:pointer;display:inline-block}.no-details{display:none}.details{display:block;z-index:100;background-color:#ffdbdb;color:#a80002;border-radius:.5rem;border:.1rem solid #A80002;border-left:.5rem solid #A80002;position:fixed;padding:1rem;bottom:45%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
|
|
230
|
+
}
|
|
231
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ShowTableErrorsComponent, decorators: [{
|
|
232
|
+
type: Component,
|
|
233
|
+
args: [{ selector: 'show-table-errors', template: "<div (mouseenter)=\"onMouseEnter()\"(mouseleave)=\"onMouseLeave()\" class=\"icon\">\r\n <fa-icon class=\"icon\" icon=\"info-circle\" ></fa-icon>\r\n <span *ngIf=\"message\" class=\"message\"\r\n [ngClass]=\"{'no-details' : !showDetails , 'details': showDetails}\">{{message}}</span>\r\n</div>", styles: [".icon{color:#a80002;cursor:pointer;display:inline-block}.no-details{display:none}.details{display:block;z-index:100;background-color:#ffdbdb;color:#a80002;border-radius:.5rem;border:.1rem solid #A80002;border-left:.5rem solid #A80002;position:fixed;padding:1rem;bottom:45%}\n"] }]
|
|
234
|
+
}], propDecorators: { message: [{
|
|
235
|
+
type: Input
|
|
236
|
+
}] } });
|
|
237
|
+
|
|
238
|
+
class AgGridSelectMixin {
|
|
239
|
+
params;
|
|
240
|
+
key;
|
|
241
|
+
value;
|
|
242
|
+
rowId;
|
|
243
|
+
isEdit;
|
|
244
|
+
index;
|
|
245
|
+
arrayKey = 'entries';
|
|
246
|
+
rowLevelFG;
|
|
247
|
+
width;
|
|
248
|
+
selectedItemId;
|
|
249
|
+
agInit(params) {
|
|
250
|
+
this.initializeRenderer(params);
|
|
251
|
+
}
|
|
252
|
+
initializeRenderer(params) {
|
|
253
|
+
this.params = params;
|
|
254
|
+
this.width = params.width;
|
|
255
|
+
this.key = params.context.createKey(params.columnApi, params.column);
|
|
256
|
+
this.value = params.value;
|
|
257
|
+
this.rowId = params.node.id;
|
|
258
|
+
this.index = params.node.rowIndex;
|
|
259
|
+
if (params.context.arrayKey) {
|
|
260
|
+
this.arrayKey = params.context.arrayKey;
|
|
261
|
+
}
|
|
262
|
+
this.setRowLevelFG();
|
|
263
|
+
}
|
|
264
|
+
setRowLevelFG() {
|
|
265
|
+
this.index = this.params.node.rowIndex;
|
|
266
|
+
let tableFG = this.params.context.formGroup;
|
|
267
|
+
let fa = tableFG.get(this.arrayKey);
|
|
268
|
+
let rowLevelFG = fa.at(this.index);
|
|
269
|
+
this.rowLevelFG = rowLevelFG;
|
|
270
|
+
}
|
|
271
|
+
getFormControl() {
|
|
272
|
+
let fc = this.rowLevelFG.get(this.key);
|
|
273
|
+
return fc;
|
|
274
|
+
}
|
|
275
|
+
updateValue(params, value) {
|
|
276
|
+
this.setRowLevelFG();
|
|
277
|
+
this.getFormControl().setValue(value);
|
|
278
|
+
let rowNode = params.node;
|
|
279
|
+
rowNode.setDataValue(this.key, value);
|
|
280
|
+
}
|
|
281
|
+
// $event here is an object.
|
|
282
|
+
onSelection($event) {
|
|
283
|
+
this.selectedItemId = $event?.id;
|
|
284
|
+
this.updateValue(this.params, $event?.id);
|
|
285
|
+
if (this.params.onSelection instanceof Function) {
|
|
286
|
+
const params = {
|
|
287
|
+
object: $event,
|
|
288
|
+
rowData: this.params.node.data,
|
|
289
|
+
value: $event.id,
|
|
290
|
+
rowNode: this.params.node,
|
|
291
|
+
};
|
|
292
|
+
this.params.onSelection(params);
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
onEnumSelected($event) {
|
|
296
|
+
this.updateValue(this.params, $event);
|
|
297
|
+
if (this.params.onSelection instanceof Function) {
|
|
298
|
+
const params = {
|
|
299
|
+
rowData: this.params.node.data,
|
|
300
|
+
value: $event,
|
|
301
|
+
rowNode: this.params.node,
|
|
302
|
+
};
|
|
303
|
+
this.params.onSelection(params);
|
|
304
|
+
}
|
|
305
|
+
}
|
|
306
|
+
refresh(param) {
|
|
307
|
+
return false;
|
|
308
|
+
}
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
class ChooseEnumRendererComponent extends AgGridSelectMixin {
|
|
312
|
+
valuesToDisable = [];
|
|
313
|
+
valuesToHide = [];
|
|
314
|
+
isChip = true;
|
|
315
|
+
clearable = true;
|
|
316
|
+
constructor() {
|
|
317
|
+
super();
|
|
318
|
+
}
|
|
319
|
+
agInit(params) {
|
|
320
|
+
super.agInit(params);
|
|
321
|
+
if (params.valuesToDisable != null) {
|
|
322
|
+
this.valuesToDisable = params.valuesToDisable;
|
|
323
|
+
}
|
|
324
|
+
if (params.valuesToHide != null) {
|
|
325
|
+
this.valuesToHide = params.valuesToHide;
|
|
326
|
+
}
|
|
327
|
+
if (params.isChip != null) {
|
|
328
|
+
this.isChip = params.isChip;
|
|
329
|
+
}
|
|
330
|
+
if (params.clearable != null) {
|
|
331
|
+
this.clearable = params.clearable;
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
get showError() {
|
|
335
|
+
if (this.rowLevelFG.get(this.key).errors && this.rowLevelFG.get(this.key).touched) {
|
|
336
|
+
return true;
|
|
337
|
+
}
|
|
338
|
+
else {
|
|
339
|
+
return false;
|
|
340
|
+
}
|
|
341
|
+
}
|
|
342
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseEnumRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
343
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChooseEnumRendererComponent, selector: "choose-enum-renderer", usesInheritance: true, ngImport: i0, template: "<div class=\"all\" [ngClass]=\"{ single: !showError, double: showError }\" *ngIf=\"rowLevelFG\" [formGroup]=\"rowLevelFG\">\r\n <choose-enum [clearable]=\"clearable\" [formControlName]=\"key\" [appendTo]=\"'body'\" [label]=\"params.label\"\r\n [labelTextAlign]=\"params.labelTextAlign\" [labelTextFontWeight]=\"params.labelTextFontWeight\"\r\n [labelTextFontSize]=\"params.labelTextFontSize\" [selectedItem]=\"params.value\" [valuesToHide]=\"valuesToHide\"\r\n [valuesToDisable]=\"valuesToDisable\" [isDropdownDisabled]=\"params.isDropdownDisabled\"\r\n [enumChoices]=\"params.enumChoices\" [placeholder]=\"params.placeholder\" [width]=\"params.width\" [isChip]=\"isChip\"\r\n [paddingTop]=\"params.paddingTop\" [customColors]=\"params.customColors\" (change)=\"onEnumSelected($event)\">\r\n </choose-enum>\r\n</div>", styles: [".all{display:grid;gap:.5rem;align-items:center;margin:auto}.single{grid-template-columns:auto}.double{grid-template-columns:auto max-content}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ChooseEnumComponent, selector: "choose-enum", inputs: ["appendTo", "allowAllCapsValues", "clearable", "customColors", "enumChoices", "getValuesArrayFromEnum", "valuesToDisable", "valuesToHide", "isChip", "isDropdownDisabled", "isMultiple", "label", "labelTextAlign", "labelTextFontWeight", "labelTextFontSize", "paddingTop", "placeholder", "percentWidth", "selectedItem", "width", "isReadOnly", "virtualScroll"], outputs: ["change", "close"] }] });
|
|
344
|
+
}
|
|
345
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseEnumRendererComponent, decorators: [{
|
|
346
|
+
type: Component,
|
|
347
|
+
args: [{ selector: 'choose-enum-renderer', template: "<div class=\"all\" [ngClass]=\"{ single: !showError, double: showError }\" *ngIf=\"rowLevelFG\" [formGroup]=\"rowLevelFG\">\r\n <choose-enum [clearable]=\"clearable\" [formControlName]=\"key\" [appendTo]=\"'body'\" [label]=\"params.label\"\r\n [labelTextAlign]=\"params.labelTextAlign\" [labelTextFontWeight]=\"params.labelTextFontWeight\"\r\n [labelTextFontSize]=\"params.labelTextFontSize\" [selectedItem]=\"params.value\" [valuesToHide]=\"valuesToHide\"\r\n [valuesToDisable]=\"valuesToDisable\" [isDropdownDisabled]=\"params.isDropdownDisabled\"\r\n [enumChoices]=\"params.enumChoices\" [placeholder]=\"params.placeholder\" [width]=\"params.width\" [isChip]=\"isChip\"\r\n [paddingTop]=\"params.paddingTop\" [customColors]=\"params.customColors\" (change)=\"onEnumSelected($event)\">\r\n </choose-enum>\r\n</div>", styles: [".all{display:grid;gap:.5rem;align-items:center;margin:auto}.single{grid-template-columns:auto}.double{grid-template-columns:auto max-content}\n"] }]
|
|
348
|
+
}], ctorParameters: function () { return []; } });
|
|
349
|
+
|
|
350
|
+
// import { environment } from '../../environments/environment';
|
|
351
|
+
class ChooseGeneralItemService {
|
|
352
|
+
http;
|
|
353
|
+
env;
|
|
354
|
+
// baseUrl: string = environment.apiURL;
|
|
355
|
+
constructor(http, env) {
|
|
356
|
+
this.http = http;
|
|
357
|
+
this.env = env;
|
|
358
|
+
} //we have an issue with this line of code...can we meet to resolve it!
|
|
359
|
+
getHeaders() {
|
|
360
|
+
const token = localStorage.getItem("token");
|
|
361
|
+
const httpHeaders = new HttpHeaders({
|
|
362
|
+
'Content-Type': "application/json",
|
|
363
|
+
'Authorization': 'Token ' + token
|
|
364
|
+
});
|
|
365
|
+
return { headers: httpHeaders };
|
|
366
|
+
}
|
|
367
|
+
getAuthenticationHeadersWithQueryParams(params) {
|
|
368
|
+
const token = localStorage.getItem("token");
|
|
369
|
+
const httpHeaders = new HttpHeaders({
|
|
370
|
+
'Content-Type': "application/json",
|
|
371
|
+
'Authorization': 'Token ' + token
|
|
372
|
+
});
|
|
373
|
+
return { headers: httpHeaders, params: params };
|
|
374
|
+
}
|
|
375
|
+
getData(apiPath) {
|
|
376
|
+
return this.http.get(`${this.env.apiURL}${apiPath}`, this.getHeaders());
|
|
377
|
+
}
|
|
378
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseGeneralItemService, deps: [{ token: i1$1.HttpClient }, { token: 'env' }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
379
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseGeneralItemService, providedIn: 'root' });
|
|
380
|
+
}
|
|
381
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseGeneralItemService, decorators: [{
|
|
382
|
+
type: Injectable,
|
|
383
|
+
args: [{
|
|
384
|
+
providedIn: 'root'
|
|
385
|
+
}]
|
|
386
|
+
}], ctorParameters: function () { return [{ type: i1$1.HttpClient }, { type: undefined, decorators: [{
|
|
387
|
+
type: Inject,
|
|
388
|
+
args: ['env']
|
|
389
|
+
}] }]; } });
|
|
390
|
+
|
|
391
|
+
class ChooseGeneralItemComponent {
|
|
392
|
+
_ChooseGeneralItemService;
|
|
393
|
+
change = new EventEmitter();
|
|
394
|
+
items;
|
|
395
|
+
label;
|
|
396
|
+
appendTo;
|
|
397
|
+
placeholder;
|
|
398
|
+
apiPath;
|
|
399
|
+
isMultiple;
|
|
400
|
+
hideSelectedItem;
|
|
401
|
+
objects;
|
|
402
|
+
showLabel;
|
|
403
|
+
separator;
|
|
404
|
+
width = 20;
|
|
405
|
+
fontWeight;
|
|
406
|
+
fontSize;
|
|
407
|
+
isChip = false;
|
|
408
|
+
isTypeDate;
|
|
409
|
+
chipColor = 'black';
|
|
410
|
+
chipTextColor = 'white';
|
|
411
|
+
chipWidth = 11;
|
|
412
|
+
selectedItemId;
|
|
413
|
+
disabled;
|
|
414
|
+
useFullObject = false;
|
|
415
|
+
constructor(_ChooseGeneralItemService) {
|
|
416
|
+
this._ChooseGeneralItemService = _ChooseGeneralItemService;
|
|
417
|
+
}
|
|
418
|
+
ngOnInit() {
|
|
419
|
+
if (!this.items)
|
|
420
|
+
this.getData();
|
|
421
|
+
}
|
|
422
|
+
writeValue(item) {
|
|
423
|
+
if (item != undefined) {
|
|
424
|
+
this.selectedItemId = item;
|
|
425
|
+
}
|
|
426
|
+
else if (item == null) {
|
|
427
|
+
this.selectedItemId = item;
|
|
428
|
+
}
|
|
429
|
+
}
|
|
430
|
+
registerOnChange(fn) {
|
|
431
|
+
this.propagateChange = fn;
|
|
432
|
+
}
|
|
433
|
+
registerOnTouched(fn) {
|
|
434
|
+
this.propogateTouch = fn;
|
|
435
|
+
}
|
|
436
|
+
propagateChange = (_) => { };
|
|
437
|
+
propogateTouch = () => { };
|
|
438
|
+
updateBlur() {
|
|
439
|
+
this.propogateTouch();
|
|
440
|
+
}
|
|
441
|
+
onSelectedItemChanged($event) {
|
|
442
|
+
this.propagateChange(this.useFullObject ? $event : this.selectedItemId);
|
|
443
|
+
this.change.emit(this.useFullObject ? $event : this.selectedItemId);
|
|
444
|
+
}
|
|
445
|
+
getData() {
|
|
446
|
+
if (this.apiPath) {
|
|
447
|
+
this._ChooseGeneralItemService.getData(this.apiPath).subscribe({
|
|
448
|
+
next: (response) => {
|
|
449
|
+
this.items = response;
|
|
450
|
+
},
|
|
451
|
+
error: (error) => console.error("error", error)
|
|
452
|
+
});
|
|
453
|
+
}
|
|
454
|
+
}
|
|
455
|
+
setWidth() {
|
|
456
|
+
let style = {
|
|
457
|
+
width: this.width + "rem"
|
|
458
|
+
};
|
|
459
|
+
return style;
|
|
460
|
+
}
|
|
461
|
+
setFontStyles() {
|
|
462
|
+
let fontStyle = {
|
|
463
|
+
fontWeight: this.fontWeight,
|
|
464
|
+
fontSize: this.fontSize + "rem",
|
|
465
|
+
};
|
|
466
|
+
return fontStyle;
|
|
467
|
+
}
|
|
468
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseGeneralItemComponent, deps: [{ token: ChooseGeneralItemService }], target: i0.ɵɵFactoryTarget.Component });
|
|
469
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChooseGeneralItemComponent, selector: "choose-general-item", inputs: { items: "items", label: "label", appendTo: "appendTo", placeholder: "placeholder", apiPath: "apiPath", isMultiple: "isMultiple", hideSelectedItem: "hideSelectedItem", objects: "objects", showLabel: "showLabel", separator: "separator", width: "width", fontWeight: "fontWeight", fontSize: "fontSize", isChip: "isChip", isTypeDate: "isTypeDate", chipColor: "chipColor", chipTextColor: "chipTextColor", chipWidth: "chipWidth", selectedItemId: "selectedItemId", disabled: "disabled", useFullObject: "useFullObject" }, outputs: { change: "change" }, providers: [
|
|
470
|
+
{
|
|
471
|
+
provide: NG_VALUE_ACCESSOR,
|
|
472
|
+
useExisting: forwardRef(() => ChooseGeneralItemComponent),
|
|
473
|
+
multi: true,
|
|
474
|
+
},
|
|
475
|
+
], ngImport: i0, template: "<div class=\"select\">\r\n <ng-select [hideSelected]=\"hideSelectedItem\" [closeOnSelect]=\"!isMultiple\" [ngStyle]=\"setWidth()\" class=\"component\"\r\n [disabled]=\"disabled\" [appendTo]=\"appendTo\" dropdownPosition=\"bottom\" (blur)=\"updateBlur()\" [bindLabel]=\"label\"\r\n bindValue=\"id\" [compareWith]=\"\" [items]=\"items\" [placeholder]=\"placeholder\"\r\n (change)=\"onSelectedItemChanged($event)\" [(ngModel)]=\"selectedItemId\" [multiple]=\"isMultiple\">\r\n <ng-template *ngIf=\"!isChip\" class=\"template\" ng-option-tmp ng-label-tmp let-item=\"item\" let-index=\"index\"\r\n let-search=\"searchTerm\">\r\n <span [ngStyle]=\"setFontStyles()\" *ngFor=\"let object of objects let isLast = last\">\r\n <span *ngIf=\"showLabel && !isTypeDate\">\r\n {{object.label}}: {{item[object.field]}} {{isLast ? \"\" : separator}}\r\n </span>\r\n <span *ngIf=\"showLabel && isTypeDate\">\r\n {{object.label}}: {{item[object.field]| date: 'mediumDate'}} {{isLast ? \"\" : separator}}\r\n </span>\r\n <span *ngIf=\"!showLabel && isTypeDate\">\r\n {{item[object.field]| date: 'mediumDate'}} {{isLast ? \"\" : separator}}\r\n </span>\r\n <span *ngIf=\"!showLabel && !isTypeDate\">{{item[object.field]}}{{isLast ? \"\" : separator}}\r\n </span>\r\n </span>\r\n </ng-template>\r\n <ng-template *ngIf=\"isChip\" ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <ng-chip (mousedown)=\"$event.stopPropagation()\" [clear]=\"clear\" [withCross]=\"isMultiple\" [item]=\"item\"\r\n class=\"chip\" [backgroundColor]=\"chipColor\" [label]=\"item[objects[0].field]\"\r\n [width]=\"chipWidth\">\r\n </ng-chip>\r\n </ng-template>\r\n <ng-template *ngIf=\"isChip\" ng-option-tmp let-clear=\"clear\" let-item=\"item\">\r\n <ng-chip (mousedown)=\"$event.stopPropagation()\" [clear]=\"clear\" [withCross]=\"false\" [item]=\"item\"\r\n class=\"chip\" [backgroundColor]=\"chipColor\" [label]=\"item[objects[0].field]\"\r\n [width]=\"chipWidth\">\r\n </ng-chip>\r\n </ng-template>\r\n </ng-select>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i2.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.NgChipComponent, selector: "ng-chip", inputs: ["backgroundColor", "size", "clear", "customColors", "enumClass", "enumValue", "inputType", "item", "isClickable", "label", "width", "withCross"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
|
|
476
|
+
}
|
|
477
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseGeneralItemComponent, decorators: [{
|
|
478
|
+
type: Component,
|
|
479
|
+
args: [{ selector: 'choose-general-item', providers: [
|
|
480
|
+
{
|
|
481
|
+
provide: NG_VALUE_ACCESSOR,
|
|
482
|
+
useExisting: forwardRef(() => ChooseGeneralItemComponent),
|
|
483
|
+
multi: true,
|
|
484
|
+
},
|
|
485
|
+
], template: "<div class=\"select\">\r\n <ng-select [hideSelected]=\"hideSelectedItem\" [closeOnSelect]=\"!isMultiple\" [ngStyle]=\"setWidth()\" class=\"component\"\r\n [disabled]=\"disabled\" [appendTo]=\"appendTo\" dropdownPosition=\"bottom\" (blur)=\"updateBlur()\" [bindLabel]=\"label\"\r\n bindValue=\"id\" [compareWith]=\"\" [items]=\"items\" [placeholder]=\"placeholder\"\r\n (change)=\"onSelectedItemChanged($event)\" [(ngModel)]=\"selectedItemId\" [multiple]=\"isMultiple\">\r\n <ng-template *ngIf=\"!isChip\" class=\"template\" ng-option-tmp ng-label-tmp let-item=\"item\" let-index=\"index\"\r\n let-search=\"searchTerm\">\r\n <span [ngStyle]=\"setFontStyles()\" *ngFor=\"let object of objects let isLast = last\">\r\n <span *ngIf=\"showLabel && !isTypeDate\">\r\n {{object.label}}: {{item[object.field]}} {{isLast ? \"\" : separator}}\r\n </span>\r\n <span *ngIf=\"showLabel && isTypeDate\">\r\n {{object.label}}: {{item[object.field]| date: 'mediumDate'}} {{isLast ? \"\" : separator}}\r\n </span>\r\n <span *ngIf=\"!showLabel && isTypeDate\">\r\n {{item[object.field]| date: 'mediumDate'}} {{isLast ? \"\" : separator}}\r\n </span>\r\n <span *ngIf=\"!showLabel && !isTypeDate\">{{item[object.field]}}{{isLast ? \"\" : separator}}\r\n </span>\r\n </span>\r\n </ng-template>\r\n <ng-template *ngIf=\"isChip\" ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <ng-chip (mousedown)=\"$event.stopPropagation()\" [clear]=\"clear\" [withCross]=\"isMultiple\" [item]=\"item\"\r\n class=\"chip\" [backgroundColor]=\"chipColor\" [label]=\"item[objects[0].field]\"\r\n [width]=\"chipWidth\">\r\n </ng-chip>\r\n </ng-template>\r\n <ng-template *ngIf=\"isChip\" ng-option-tmp let-clear=\"clear\" let-item=\"item\">\r\n <ng-chip (mousedown)=\"$event.stopPropagation()\" [clear]=\"clear\" [withCross]=\"false\" [item]=\"item\"\r\n class=\"chip\" [backgroundColor]=\"chipColor\" [label]=\"item[objects[0].field]\"\r\n [width]=\"chipWidth\">\r\n </ng-chip>\r\n </ng-template>\r\n </ng-select>\r\n</div>" }]
|
|
486
|
+
}], ctorParameters: function () { return [{ type: ChooseGeneralItemService }]; }, propDecorators: { change: [{
|
|
487
|
+
type: Output
|
|
488
|
+
}], items: [{
|
|
489
|
+
type: Input
|
|
490
|
+
}], label: [{
|
|
491
|
+
type: Input
|
|
492
|
+
}], appendTo: [{
|
|
493
|
+
type: Input
|
|
494
|
+
}], placeholder: [{
|
|
495
|
+
type: Input
|
|
496
|
+
}], apiPath: [{
|
|
497
|
+
type: Input
|
|
498
|
+
}], isMultiple: [{
|
|
499
|
+
type: Input
|
|
500
|
+
}], hideSelectedItem: [{
|
|
501
|
+
type: Input
|
|
502
|
+
}], objects: [{
|
|
503
|
+
type: Input
|
|
504
|
+
}], showLabel: [{
|
|
505
|
+
type: Input
|
|
506
|
+
}], separator: [{
|
|
507
|
+
type: Input
|
|
508
|
+
}], width: [{
|
|
509
|
+
type: Input
|
|
510
|
+
}], fontWeight: [{
|
|
511
|
+
type: Input
|
|
512
|
+
}], fontSize: [{
|
|
513
|
+
type: Input
|
|
514
|
+
}], isChip: [{
|
|
515
|
+
type: Input
|
|
516
|
+
}], isTypeDate: [{
|
|
517
|
+
type: Input
|
|
518
|
+
}], chipColor: [{
|
|
519
|
+
type: Input
|
|
520
|
+
}], chipTextColor: [{
|
|
521
|
+
type: Input
|
|
522
|
+
}], chipWidth: [{
|
|
523
|
+
type: Input
|
|
524
|
+
}], selectedItemId: [{
|
|
525
|
+
type: Input
|
|
526
|
+
}], disabled: [{
|
|
527
|
+
type: Input
|
|
528
|
+
}], useFullObject: [{
|
|
529
|
+
type: Input
|
|
530
|
+
}] } });
|
|
531
|
+
|
|
532
|
+
class ChooseGeneralItemRendererComponent {
|
|
533
|
+
params;
|
|
534
|
+
formControlValue;
|
|
535
|
+
key;
|
|
536
|
+
itemId;
|
|
537
|
+
rowId;
|
|
538
|
+
constructor() { }
|
|
539
|
+
agInit(params) {
|
|
540
|
+
this.params = params;
|
|
541
|
+
this.itemId = params.data.id;
|
|
542
|
+
this.key = params.context.createKey(params.columnApi, params.column);
|
|
543
|
+
this.rowId = params.node.id;
|
|
544
|
+
}
|
|
545
|
+
onCellDataChanged($event) {
|
|
546
|
+
let value = $event;
|
|
547
|
+
this.formControlValue = this.params.context.formGroup.get("entries").at(this.rowId);
|
|
548
|
+
this.formControlValue.get(this.key).setValue(value);
|
|
549
|
+
const params = {
|
|
550
|
+
value: value,
|
|
551
|
+
rowNode: this.params.node,
|
|
552
|
+
};
|
|
553
|
+
this.params.onCellValueChanged(params);
|
|
554
|
+
}
|
|
555
|
+
refresh(params) {
|
|
556
|
+
return true;
|
|
557
|
+
}
|
|
558
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseGeneralItemRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
559
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChooseGeneralItemRendererComponent, selector: "choose-general-item-renderer", ngImport: i0, template: "<choose-general-item [label]=\"params.label\" [appendTo]=\"'body'\" [placeholder]=\"params.placeholder\"\r\n [apiPath]=\"params.apiPath\" [isMultiple]=\"params.isMultiple\" [objects]=\"params.objects\"\r\n [showLabel]=\"params.showLabel\" [separator]=\"params.separator\" [width]=\"params.width\"\r\n [fontWeight]=\"params.fontWeight\" [fontSize]=\"params.fontSize\" [isChip]=\"params.isChip\"\r\n [isTypeDate]=\"params.isTypeDate\" [chipColor]=\"params.chipColor\" [chipTextColor]=\"params.chipTextColor\"\r\n [chipWidth]=\"params.chipWidth\" [selectedItemId]=\"itemId\" [disabled]=\"params.disabled\"\r\n (change)=\"onCellDataChanged($event)\">\r\n</choose-general-item>", styles: [""], dependencies: [{ kind: "component", type: ChooseGeneralItemComponent, selector: "choose-general-item", inputs: ["items", "label", "appendTo", "placeholder", "apiPath", "isMultiple", "hideSelectedItem", "objects", "showLabel", "separator", "width", "fontWeight", "fontSize", "isChip", "isTypeDate", "chipColor", "chipTextColor", "chipWidth", "selectedItemId", "disabled", "useFullObject"], outputs: ["change"] }] });
|
|
560
|
+
}
|
|
561
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseGeneralItemRendererComponent, decorators: [{
|
|
562
|
+
type: Component,
|
|
563
|
+
args: [{ selector: 'choose-general-item-renderer', template: "<choose-general-item [label]=\"params.label\" [appendTo]=\"'body'\" [placeholder]=\"params.placeholder\"\r\n [apiPath]=\"params.apiPath\" [isMultiple]=\"params.isMultiple\" [objects]=\"params.objects\"\r\n [showLabel]=\"params.showLabel\" [separator]=\"params.separator\" [width]=\"params.width\"\r\n [fontWeight]=\"params.fontWeight\" [fontSize]=\"params.fontSize\" [isChip]=\"params.isChip\"\r\n [isTypeDate]=\"params.isTypeDate\" [chipColor]=\"params.chipColor\" [chipTextColor]=\"params.chipTextColor\"\r\n [chipWidth]=\"params.chipWidth\" [selectedItemId]=\"itemId\" [disabled]=\"params.disabled\"\r\n (change)=\"onCellDataChanged($event)\">\r\n</choose-general-item>" }]
|
|
564
|
+
}], ctorParameters: function () { return []; } });
|
|
565
|
+
|
|
566
|
+
var LineType;
|
|
567
|
+
(function (LineType) {
|
|
568
|
+
LineType[LineType["INCLUDE"] = 0] = "INCLUDE";
|
|
569
|
+
LineType[LineType["DO_NOT_INCLUDE"] = 1] = "DO_NOT_INCLUDE";
|
|
570
|
+
})(LineType || (LineType = {}));
|
|
571
|
+
|
|
572
|
+
class LineTypeModelHelper {
|
|
573
|
+
static label;
|
|
574
|
+
static color;
|
|
575
|
+
static description;
|
|
576
|
+
static value;
|
|
577
|
+
static getItems() {
|
|
578
|
+
let items = [];
|
|
579
|
+
let values = Object.values(LineType);
|
|
580
|
+
let types = values.filter(value => typeof value === 'number');
|
|
581
|
+
for (let value of types) {
|
|
582
|
+
this.setStringValueAndColor(value);
|
|
583
|
+
items.push({ value: value, label: this.label, color: this.color, description: this.description });
|
|
584
|
+
}
|
|
585
|
+
return items;
|
|
586
|
+
}
|
|
587
|
+
static setStringValueAndColor(type) {
|
|
588
|
+
switch (type) {
|
|
589
|
+
case LineType.INCLUDE:
|
|
590
|
+
return this.label = "Include", this.color = "gold";
|
|
591
|
+
break;
|
|
592
|
+
case LineType.DO_NOT_INCLUDE:
|
|
593
|
+
return this.label = "Do Not Include", this.color = "platinum";
|
|
594
|
+
break;
|
|
595
|
+
default:
|
|
596
|
+
return this.label = "Undefined", this.color = "Gray";
|
|
597
|
+
}
|
|
598
|
+
}
|
|
599
|
+
getValue(label) {
|
|
600
|
+
let value;
|
|
601
|
+
switch (label) {
|
|
602
|
+
case "Include":
|
|
603
|
+
return value = 0;
|
|
604
|
+
break;
|
|
605
|
+
case "Do Not Include":
|
|
606
|
+
return value = 1;
|
|
607
|
+
break;
|
|
608
|
+
default:
|
|
609
|
+
return null;
|
|
610
|
+
}
|
|
611
|
+
}
|
|
612
|
+
static getLabelAndColorForValue(value) {
|
|
613
|
+
for (let item of this.getItems()) {
|
|
614
|
+
if (item.value == value) {
|
|
615
|
+
this.value = item;
|
|
616
|
+
return this.value;
|
|
617
|
+
}
|
|
618
|
+
}
|
|
619
|
+
}
|
|
620
|
+
}
|
|
621
|
+
|
|
622
|
+
class ChooseLineTypeComponent {
|
|
623
|
+
items = LineTypeModelHelper;
|
|
624
|
+
selectedItem;
|
|
625
|
+
types;
|
|
626
|
+
constructor() { }
|
|
627
|
+
ngOnInit() {
|
|
628
|
+
this.types = this.items.getItems();
|
|
629
|
+
}
|
|
630
|
+
writeValue(type) {
|
|
631
|
+
if (type != undefined || type != null) {
|
|
632
|
+
this.selectedItem = type;
|
|
633
|
+
}
|
|
634
|
+
}
|
|
635
|
+
registerOnChange(fn) {
|
|
636
|
+
this.propagateChange = fn;
|
|
637
|
+
}
|
|
638
|
+
registerOnTouched(fn) {
|
|
639
|
+
this.propogateTouch = fn;
|
|
640
|
+
}
|
|
641
|
+
propagateChange = (_) => { };
|
|
642
|
+
propogateTouch = () => { };
|
|
643
|
+
updateBlur() {
|
|
644
|
+
this.propogateTouch();
|
|
645
|
+
}
|
|
646
|
+
onSelectedItemChanged() {
|
|
647
|
+
this.propagateChange(this.selectedItem);
|
|
648
|
+
}
|
|
649
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseLineTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
650
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChooseLineTypeComponent, selector: "choose-line-type", providers: [
|
|
651
|
+
{
|
|
652
|
+
provide: NG_VALUE_ACCESSOR,
|
|
653
|
+
useExisting: forwardRef(() => ChooseLineTypeComponent),
|
|
654
|
+
multi: true,
|
|
655
|
+
},
|
|
656
|
+
], ngImport: i0, template: "<div class=\"select\">\r\n <ng-select class=\"type\" appendTo=\"body\" (blur)=\"updateBlur()\" bindLabel=\"label\" bindValue=\"label\" [items]=\"types\"\r\n [placeholder]=\"'Choose A Component'\" (change)=\"onSelectedItemChanged()\" [(ngModel)]=\"selectedItem\">\r\n <ng-template class=\"template\" ng-option-tmp ng-label-tmp let-item=\"item\" let-index=\"index\">\r\n {{item.label}}\r\n </ng-template>\r\n </ng-select>\r\n</div>", styles: [".type{width:250px}\n"], dependencies: [{ kind: "component", type: i2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i2.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
657
|
+
}
|
|
658
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseLineTypeComponent, decorators: [{
|
|
659
|
+
type: Component,
|
|
660
|
+
args: [{ selector: 'choose-line-type', providers: [
|
|
661
|
+
{
|
|
662
|
+
provide: NG_VALUE_ACCESSOR,
|
|
663
|
+
useExisting: forwardRef(() => ChooseLineTypeComponent),
|
|
664
|
+
multi: true,
|
|
665
|
+
},
|
|
666
|
+
], template: "<div class=\"select\">\r\n <ng-select class=\"type\" appendTo=\"body\" (blur)=\"updateBlur()\" bindLabel=\"label\" bindValue=\"label\" [items]=\"types\"\r\n [placeholder]=\"'Choose A Component'\" (change)=\"onSelectedItemChanged()\" [(ngModel)]=\"selectedItem\">\r\n <ng-template class=\"template\" ng-option-tmp ng-label-tmp let-item=\"item\" let-index=\"index\">\r\n {{item.label}}\r\n </ng-template>\r\n </ng-select>\r\n</div>", styles: [".type{width:250px}\n"] }]
|
|
667
|
+
}], ctorParameters: function () { return []; } });
|
|
668
|
+
|
|
669
|
+
class ChooseYesOrNoComponent {
|
|
670
|
+
change = new EventEmitter();
|
|
671
|
+
items = [{ value: true, label: "Yes", color: "green" }, { value: false, label: "No", color: "red" }];
|
|
672
|
+
width = 200;
|
|
673
|
+
selectedItemValue;
|
|
674
|
+
placeholder = "Choose either Yes or No";
|
|
675
|
+
constructor() { }
|
|
676
|
+
ngOnInit() {
|
|
677
|
+
}
|
|
678
|
+
writeValue(item) {
|
|
679
|
+
if (item != undefined || item != null) {
|
|
680
|
+
this.selectedItemValue = item;
|
|
681
|
+
}
|
|
682
|
+
}
|
|
683
|
+
registerOnChange(fn) {
|
|
684
|
+
this.propagateChange = fn;
|
|
685
|
+
}
|
|
686
|
+
registerOnTouched(fn) {
|
|
687
|
+
this.propogateTouch = fn;
|
|
688
|
+
}
|
|
689
|
+
propagateChange = (_) => { };
|
|
690
|
+
propogateTouch = () => { };
|
|
691
|
+
updateBlur() {
|
|
692
|
+
this.propogateTouch();
|
|
693
|
+
}
|
|
694
|
+
onSelectedItemChanged() {
|
|
695
|
+
this.propagateChange(this.selectedItemValue);
|
|
696
|
+
this.change.emit(this.selectedItemValue);
|
|
697
|
+
}
|
|
698
|
+
setWidth() {
|
|
699
|
+
let style = {
|
|
700
|
+
width: this.width + "px"
|
|
701
|
+
};
|
|
702
|
+
return style;
|
|
703
|
+
}
|
|
704
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseYesOrNoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
705
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChooseYesOrNoComponent, selector: "choose-yes-or-no", inputs: { width: "width", selectedItemValue: "selectedItemValue", placeholder: "placeholder" }, outputs: { change: "change" }, providers: [
|
|
706
|
+
{
|
|
707
|
+
provide: NG_VALUE_ACCESSOR,
|
|
708
|
+
useExisting: forwardRef(() => ChooseYesOrNoComponent),
|
|
709
|
+
multi: true
|
|
710
|
+
}
|
|
711
|
+
], ngImport: i0, template: "<div class=\"select\">\r\n <ng-select [ngStyle]=\"setWidth()\" class=\"component\" appendTo=\"body\" (blur)=\"updateBlur()\" [placeholder]=\"placeholder\" bindLabel=\"label\"\r\n bindValue=\"value\" [items]=\"items\" [placeholder]=\"placeholder\" (change)=\"onSelectedItemChanged()\"\r\n [(ngModel)]=\"selectedItemValue\" >\r\n <ng-template class=\"template\" ng-option-tmp ng-label-tmp let-item=\"item\" let-index=\"index\"\r\n let-search=\"searchTerm\">\r\n <span [style.color]=\"item.color\">\r\n {{item.label}}\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i2.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
712
|
+
}
|
|
713
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseYesOrNoComponent, decorators: [{
|
|
714
|
+
type: Component,
|
|
715
|
+
args: [{ selector: 'choose-yes-or-no', providers: [
|
|
716
|
+
{
|
|
717
|
+
provide: NG_VALUE_ACCESSOR,
|
|
718
|
+
useExisting: forwardRef(() => ChooseYesOrNoComponent),
|
|
719
|
+
multi: true
|
|
720
|
+
}
|
|
721
|
+
], template: "<div class=\"select\">\r\n <ng-select [ngStyle]=\"setWidth()\" class=\"component\" appendTo=\"body\" (blur)=\"updateBlur()\" [placeholder]=\"placeholder\" bindLabel=\"label\"\r\n bindValue=\"value\" [items]=\"items\" [placeholder]=\"placeholder\" (change)=\"onSelectedItemChanged()\"\r\n [(ngModel)]=\"selectedItemValue\" >\r\n <ng-template class=\"template\" ng-option-tmp ng-label-tmp let-item=\"item\" let-index=\"index\"\r\n let-search=\"searchTerm\">\r\n <span [style.color]=\"item.color\">\r\n {{item.label}}\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n</div>\r\n" }]
|
|
722
|
+
}], ctorParameters: function () { return []; }, propDecorators: { change: [{
|
|
723
|
+
type: Output
|
|
724
|
+
}], width: [{
|
|
725
|
+
type: Input
|
|
726
|
+
}], selectedItemValue: [{
|
|
727
|
+
type: Input
|
|
728
|
+
}], placeholder: [{
|
|
729
|
+
type: Input
|
|
730
|
+
}] } });
|
|
731
|
+
|
|
732
|
+
class ChooseYesOrNoRendererComponent {
|
|
733
|
+
params;
|
|
734
|
+
formControlValue;
|
|
735
|
+
key;
|
|
736
|
+
booleanValue;
|
|
737
|
+
columnName;
|
|
738
|
+
rowId;
|
|
739
|
+
constructor() { }
|
|
740
|
+
agInit(params) {
|
|
741
|
+
this.params = params;
|
|
742
|
+
this.booleanValue = params.value;
|
|
743
|
+
this.key = params.context.createKey(params.columnApi, params.column);
|
|
744
|
+
this.rowId = params.node.id;
|
|
745
|
+
}
|
|
746
|
+
onCellDataChanged($event) {
|
|
747
|
+
let value = $event;
|
|
748
|
+
this.formControlValue = this.params.context.formGroup.get("entries").at(this.rowId);
|
|
749
|
+
this.formControlValue.get(this.key).setValue(value);
|
|
750
|
+
}
|
|
751
|
+
refresh(params) {
|
|
752
|
+
return false;
|
|
753
|
+
}
|
|
754
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseYesOrNoRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
755
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChooseYesOrNoRendererComponent, selector: "choose-yes-or-no-renderer", ngImport: i0, template: "<choose-yes-or-no [selectedItemValue]=\"booleanValue\" [width]=\"params.width\" (change) =\"onCellDataChanged($event)\" [placeholder]=\"params.placeholder\" ></choose-yes-or-no>", styles: [""], dependencies: [{ kind: "component", type: ChooseYesOrNoComponent, selector: "choose-yes-or-no", inputs: ["width", "selectedItemValue", "placeholder"], outputs: ["change"] }] });
|
|
756
|
+
}
|
|
757
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseYesOrNoRendererComponent, decorators: [{
|
|
758
|
+
type: Component,
|
|
759
|
+
args: [{ selector: 'choose-yes-or-no-renderer', template: "<choose-yes-or-no [selectedItemValue]=\"booleanValue\" [width]=\"params.width\" (change) =\"onCellDataChanged($event)\" [placeholder]=\"params.placeholder\" ></choose-yes-or-no>" }]
|
|
760
|
+
}], ctorParameters: function () { return []; } });
|
|
761
|
+
|
|
762
|
+
const PIPEMAPPINGS = [
|
|
763
|
+
{ value: '$', pipe: new CurrencyPipe('en-US') }
|
|
764
|
+
];
|
|
765
|
+
|
|
766
|
+
class DynamicPipe {
|
|
767
|
+
transform(value, args) {
|
|
768
|
+
for (let val of PIPEMAPPINGS) {
|
|
769
|
+
if (val.value === args) {
|
|
770
|
+
return val.pipe.transform(value);
|
|
771
|
+
}
|
|
772
|
+
}
|
|
773
|
+
return '';
|
|
774
|
+
}
|
|
775
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
776
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DynamicPipe, name: "dynamicPipe" });
|
|
777
|
+
}
|
|
778
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicPipe, decorators: [{
|
|
779
|
+
type: Pipe,
|
|
780
|
+
args: [{ name: 'dynamicPipe' }]
|
|
781
|
+
}] });
|
|
782
|
+
|
|
783
|
+
class EditableSavableInputComponent {
|
|
784
|
+
saveWasClicked = new EventEmitter();
|
|
785
|
+
defaultvalue;
|
|
786
|
+
inputType;
|
|
787
|
+
newLabel;
|
|
788
|
+
headerLabel;
|
|
789
|
+
showUnit = false;
|
|
790
|
+
unit;
|
|
791
|
+
unitType;
|
|
792
|
+
isEditable = true;
|
|
793
|
+
showHeader = true;
|
|
794
|
+
value = "";
|
|
795
|
+
isAddClickedOn = false;
|
|
796
|
+
isUpdated = false;
|
|
797
|
+
showEdit = false;
|
|
798
|
+
constructor() { }
|
|
799
|
+
ngOnInit() {
|
|
800
|
+
this.initialize();
|
|
801
|
+
}
|
|
802
|
+
initialize() {
|
|
803
|
+
if (this.value == "") {
|
|
804
|
+
this.isUpdated = false;
|
|
805
|
+
}
|
|
806
|
+
else {
|
|
807
|
+
this.isUpdated = true;
|
|
808
|
+
}
|
|
809
|
+
}
|
|
810
|
+
onClickAdd() {
|
|
811
|
+
this.isAddClickedOn = true;
|
|
812
|
+
}
|
|
813
|
+
onClickCancel() {
|
|
814
|
+
this.isAddClickedOn = false;
|
|
815
|
+
}
|
|
816
|
+
onClickSave(input) {
|
|
817
|
+
this.isAddClickedOn = false;
|
|
818
|
+
let value = input.value;
|
|
819
|
+
if (value.trim().length == 0) {
|
|
820
|
+
this.isUpdated = false;
|
|
821
|
+
}
|
|
822
|
+
else {
|
|
823
|
+
this.isUpdated = true;
|
|
824
|
+
}
|
|
825
|
+
this.value = value;
|
|
826
|
+
this.saveWasClicked.emit(value);
|
|
827
|
+
this.propagateChange(this.value);
|
|
828
|
+
}
|
|
829
|
+
onClickEdit() {
|
|
830
|
+
this.isAddClickedOn = true;
|
|
831
|
+
}
|
|
832
|
+
onMouseEnter() {
|
|
833
|
+
this.showEdit = true;
|
|
834
|
+
}
|
|
835
|
+
onMouseLeave() {
|
|
836
|
+
this.showEdit = false;
|
|
837
|
+
}
|
|
838
|
+
writeValue(value) {
|
|
839
|
+
if (value) {
|
|
840
|
+
this.value = value;
|
|
841
|
+
this.isUpdated = true;
|
|
842
|
+
}
|
|
843
|
+
}
|
|
844
|
+
// registers 'fn' that will be fired wheb changes are made
|
|
845
|
+
// this is how we emit the changes back to the form
|
|
846
|
+
registerOnChange(fn) {
|
|
847
|
+
this.propagateChange = fn;
|
|
848
|
+
}
|
|
849
|
+
registerOnTouched(fn) {
|
|
850
|
+
this.propogateTouch = fn;
|
|
851
|
+
}
|
|
852
|
+
// the method set in registerOnChange to emit changes back to the form
|
|
853
|
+
propagateChange = (_) => { };
|
|
854
|
+
propogateTouch = () => { };
|
|
855
|
+
onChange($event) {
|
|
856
|
+
//this.propagateChange(this.value);
|
|
857
|
+
}
|
|
858
|
+
updateBlur() {
|
|
859
|
+
this.propogateTouch();
|
|
860
|
+
}
|
|
861
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditableSavableInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
862
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EditableSavableInputComponent, selector: "editable-savable-input", inputs: { defaultvalue: "defaultvalue", inputType: "inputType", newLabel: "newLabel", headerLabel: "headerLabel", showUnit: "showUnit", unit: "unit", unitType: "unitType", isEditable: "isEditable", showHeader: "showHeader", value: "value" }, outputs: { saveWasClicked: "saveWasClicked" }, providers: [DynamicPipe,
|
|
863
|
+
{
|
|
864
|
+
provide: NG_VALUE_ACCESSOR,
|
|
865
|
+
useExisting: forwardRef(() => EditableSavableInputComponent),
|
|
866
|
+
multi: true
|
|
867
|
+
}
|
|
868
|
+
], ngImport: i0, template: "<div *ngIf=\"showHeader\" class=\"header\">\r\n {{headerLabel}}\r\n</div>\r\n<div class=\"container\" [ngClass]=\"{'closed':!isAddClickedOn, 'open': isAddClickedOn}\">\r\n <div class=\"content\">\r\n <div class=\"default-content\" *ngIf=\"!isAddClickedOn && !isUpdated && isEditable\">\r\n <div class=\"add\" (click)=\"onClickAdd()\">\r\n {{defaultvalue}} </div>\r\n </div>\r\n <div class=\"edit-content\" *ngIf=\"isAddClickedOn\">\r\n <label class=\"input-label\" for=\"input\">{{newLabel}}</label>\r\n <div class=\"input \" [ngClass]=\"{'input-with-appended-unit': showUnit}\">\r\n <span *ngIf=\"showUnit\">{{unit}}</span>\r\n <input (change)=\"onChange($event)\" (blur)=\"updateBlur()\" [ngModel]=\"value\" [value]=\"value\" id=\"input\" #input\r\n class=\"form-control\" [ngClass]=\"{'input-box': showUnit}\" [type]=\"inputType\">\r\n </div>\r\n <div class=\"edit-actions\">\r\n <button type=\"button\" class=\"btn cancel\" (click)=\"onClickCancel()\" mat-raised-button>Cancel</button>\r\n <button type=\"button\" class=\"save\" (click)=\"onClickSave(input)\" mat-raised-button color=\"primary\">Save</button>\r\n </div>\r\n </div>\r\n <div class=\"updated-content closed\" *ngIf=\"!isAddClickedOn && isUpdated\" (mouseenter)=\"onMouseEnter()\"\r\n (mouseleave)=\"onMouseLeave()\">\r\n <div class=\"edit-icon-container\" *ngIf=\"showEdit && isEditable\" (click)=\"onClickEdit()\">\r\n <i class=\"fas fa-pencil-alt\"></i>\r\n </div>\r\n <div class=\"updated\">\r\n <span class=\"updated-label\">\r\n <label for=\"input\">{{newLabel}}</label>\r\n </span>\r\n <span *ngIf=\"!showUnit\">{{value}}</span>\r\n <span *ngIf=\"showUnit\" class=\"updated-value\">\r\n {{value | dynamicPipe: unitType}}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".container{display:block;width:100%}.open{height:120px}.closed{height:40px}.edit-icon-container{position:absolute;right:0%;transform:translate(0);top:0;cursor:pointer}.edit-icon-container:hover{background-color:gray;color:#fff;padding:2px}label,.updated-label{color:gray;margin-right:5px}#input{display:inline}.cancel{grid-column:1;grid-row:2;height:80%;width:80px}.save{grid-column:2;grid-row:2;height:80%;width:80px}.default-content{position:absolute}.input{width:280px;grid-column:2;grid-row:1}.input-box{width:200px}.input-label{grid-column:1;grid-row:1}.updated{position:absolute}.add{color:#00f}.add:hover{text-decoration:underline;cursor:pointer}.content{position:relative}.btn:focus{outline:none!important}.edit-content{position:absolute;left:50%;transform:translate(-50%);display:grid;grid-template-columns:150px 200px;grid-template-rows:50px 50px}.updated-content{display:block}.header{color:gray;border-bottom:1px solid grey;height:30px;font-size:20px;margin-bottom:10px;margin-top:10px}.input-with-appended-unit input{padding-left:20px;text-align:left}.input-with-appended-unit span{position:relative;left:20px;color:gray}.edit-actions{grid-column:2;grid-row:2;display:grid;grid-template-columns:50% 50%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }] });
|
|
869
|
+
}
|
|
870
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditableSavableInputComponent, decorators: [{
|
|
871
|
+
type: Component,
|
|
872
|
+
args: [{ selector: 'editable-savable-input', providers: [DynamicPipe,
|
|
873
|
+
{
|
|
874
|
+
provide: NG_VALUE_ACCESSOR,
|
|
875
|
+
useExisting: forwardRef(() => EditableSavableInputComponent),
|
|
876
|
+
multi: true
|
|
877
|
+
}
|
|
878
|
+
], template: "<div *ngIf=\"showHeader\" class=\"header\">\r\n {{headerLabel}}\r\n</div>\r\n<div class=\"container\" [ngClass]=\"{'closed':!isAddClickedOn, 'open': isAddClickedOn}\">\r\n <div class=\"content\">\r\n <div class=\"default-content\" *ngIf=\"!isAddClickedOn && !isUpdated && isEditable\">\r\n <div class=\"add\" (click)=\"onClickAdd()\">\r\n {{defaultvalue}} </div>\r\n </div>\r\n <div class=\"edit-content\" *ngIf=\"isAddClickedOn\">\r\n <label class=\"input-label\" for=\"input\">{{newLabel}}</label>\r\n <div class=\"input \" [ngClass]=\"{'input-with-appended-unit': showUnit}\">\r\n <span *ngIf=\"showUnit\">{{unit}}</span>\r\n <input (change)=\"onChange($event)\" (blur)=\"updateBlur()\" [ngModel]=\"value\" [value]=\"value\" id=\"input\" #input\r\n class=\"form-control\" [ngClass]=\"{'input-box': showUnit}\" [type]=\"inputType\">\r\n </div>\r\n <div class=\"edit-actions\">\r\n <button type=\"button\" class=\"btn cancel\" (click)=\"onClickCancel()\" mat-raised-button>Cancel</button>\r\n <button type=\"button\" class=\"save\" (click)=\"onClickSave(input)\" mat-raised-button color=\"primary\">Save</button>\r\n </div>\r\n </div>\r\n <div class=\"updated-content closed\" *ngIf=\"!isAddClickedOn && isUpdated\" (mouseenter)=\"onMouseEnter()\"\r\n (mouseleave)=\"onMouseLeave()\">\r\n <div class=\"edit-icon-container\" *ngIf=\"showEdit && isEditable\" (click)=\"onClickEdit()\">\r\n <i class=\"fas fa-pencil-alt\"></i>\r\n </div>\r\n <div class=\"updated\">\r\n <span class=\"updated-label\">\r\n <label for=\"input\">{{newLabel}}</label>\r\n </span>\r\n <span *ngIf=\"!showUnit\">{{value}}</span>\r\n <span *ngIf=\"showUnit\" class=\"updated-value\">\r\n {{value | dynamicPipe: unitType}}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".container{display:block;width:100%}.open{height:120px}.closed{height:40px}.edit-icon-container{position:absolute;right:0%;transform:translate(0);top:0;cursor:pointer}.edit-icon-container:hover{background-color:gray;color:#fff;padding:2px}label,.updated-label{color:gray;margin-right:5px}#input{display:inline}.cancel{grid-column:1;grid-row:2;height:80%;width:80px}.save{grid-column:2;grid-row:2;height:80%;width:80px}.default-content{position:absolute}.input{width:280px;grid-column:2;grid-row:1}.input-box{width:200px}.input-label{grid-column:1;grid-row:1}.updated{position:absolute}.add{color:#00f}.add:hover{text-decoration:underline;cursor:pointer}.content{position:relative}.btn:focus{outline:none!important}.edit-content{position:absolute;left:50%;transform:translate(-50%);display:grid;grid-template-columns:150px 200px;grid-template-rows:50px 50px}.updated-content{display:block}.header{color:gray;border-bottom:1px solid grey;height:30px;font-size:20px;margin-bottom:10px;margin-top:10px}.input-with-appended-unit input{padding-left:20px;text-align:left}.input-with-appended-unit span{position:relative;left:20px;color:gray}.edit-actions{grid-column:2;grid-row:2;display:grid;grid-template-columns:50% 50%}\n"] }]
|
|
879
|
+
}], ctorParameters: function () { return []; }, propDecorators: { saveWasClicked: [{
|
|
880
|
+
type: Output
|
|
881
|
+
}], defaultvalue: [{
|
|
882
|
+
type: Input
|
|
883
|
+
}], inputType: [{
|
|
884
|
+
type: Input
|
|
885
|
+
}], newLabel: [{
|
|
886
|
+
type: Input
|
|
887
|
+
}], headerLabel: [{
|
|
888
|
+
type: Input
|
|
889
|
+
}], showUnit: [{
|
|
890
|
+
type: Input
|
|
891
|
+
}], unit: [{
|
|
892
|
+
type: Input
|
|
893
|
+
}], unitType: [{
|
|
894
|
+
type: Input
|
|
895
|
+
}], isEditable: [{
|
|
896
|
+
type: Input
|
|
897
|
+
}], showHeader: [{
|
|
898
|
+
type: Input
|
|
899
|
+
}], value: [{
|
|
900
|
+
type: Input
|
|
901
|
+
}] } });
|
|
902
|
+
|
|
903
|
+
class CustomDecimalPointTwoDigitsDirective {
|
|
904
|
+
control;
|
|
905
|
+
valueSubscription;
|
|
906
|
+
constructor(control) {
|
|
907
|
+
this.control = control;
|
|
908
|
+
}
|
|
909
|
+
ngOnInit() {
|
|
910
|
+
if (this.control.value) {
|
|
911
|
+
this.control.valueAccessor.writeValue(this.transformToCommasAndPoint(this.control.value));
|
|
912
|
+
}
|
|
913
|
+
this.valueSubscription = this.control.control.valueChanges.subscribe(value => {
|
|
914
|
+
if (value.length > 0) {
|
|
915
|
+
let removeCommas = this.control.value.replace(/,/g, '');
|
|
916
|
+
this.control.control.setValue(removeCommas, { emitEvent: false, emitModelToViewChange: false });
|
|
917
|
+
}
|
|
918
|
+
else {
|
|
919
|
+
this.control.control.setValue(null, { emitEvent: false, emitModelToViewChange: false });
|
|
920
|
+
}
|
|
921
|
+
});
|
|
922
|
+
}
|
|
923
|
+
onEvent($event) {
|
|
924
|
+
if (this.control.value) {
|
|
925
|
+
const item = $event.target;
|
|
926
|
+
item.value = this.transformToCommasAndPoint(this.control.value);
|
|
927
|
+
let removeCommas = this.control.value.replace(/,/g, '');
|
|
928
|
+
this.control.control.setValue(removeCommas, { emitEvent: false, emitModelToViewChange: false });
|
|
929
|
+
}
|
|
930
|
+
}
|
|
931
|
+
transformToCommasAndPoint(value) {
|
|
932
|
+
if (value.indexOf(".") == -1) {
|
|
933
|
+
value = value.toString().replace(/\D/g, "")
|
|
934
|
+
.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
|
935
|
+
return value;
|
|
936
|
+
}
|
|
937
|
+
else {
|
|
938
|
+
let val = value.split(".");
|
|
939
|
+
let valueBeforeDecimal = val[0];
|
|
940
|
+
let valueAfterDecimal = val[1];
|
|
941
|
+
valueBeforeDecimal = valueBeforeDecimal.toString().replace(/\D/g, "")
|
|
942
|
+
.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
|
943
|
+
let newValue = `${valueBeforeDecimal}.${valueAfterDecimal}`;
|
|
944
|
+
return newValue;
|
|
945
|
+
}
|
|
946
|
+
}
|
|
947
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomDecimalPointTwoDigitsDirective, deps: [{ token: i2$1.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
|
|
948
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CustomDecimalPointTwoDigitsDirective, selector: "[customDecimalPointTwoDigits]", host: { listeners: { "input": "onEvent($event)" } }, providers: [NgModel, DecimalPipe], ngImport: i0 });
|
|
949
|
+
}
|
|
950
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomDecimalPointTwoDigitsDirective, decorators: [{
|
|
951
|
+
type: Directive,
|
|
952
|
+
args: [{
|
|
953
|
+
selector: '[customDecimalPointTwoDigits]',
|
|
954
|
+
providers: [NgModel, DecimalPipe],
|
|
955
|
+
}]
|
|
956
|
+
}], ctorParameters: function () { return [{ type: i2$1.NgControl }]; }, propDecorators: { onEvent: [{
|
|
957
|
+
type: HostListener,
|
|
958
|
+
args: ["input", ["$event"]]
|
|
959
|
+
}] } });
|
|
960
|
+
|
|
961
|
+
class ValidationMessageService {
|
|
962
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValidationMessageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
963
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValidationMessageService, providedIn: 'root' });
|
|
964
|
+
}
|
|
965
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValidationMessageService, decorators: [{
|
|
966
|
+
type: Injectable,
|
|
967
|
+
args: [{
|
|
968
|
+
providedIn: 'root'
|
|
969
|
+
}]
|
|
970
|
+
}] });
|
|
971
|
+
class MinLengthValidationError {
|
|
972
|
+
requirement;
|
|
973
|
+
constructor(requirement) {
|
|
974
|
+
this.requirement = requirement;
|
|
975
|
+
}
|
|
976
|
+
buildMessage() {
|
|
977
|
+
return "Must be a minimum length of " + this.requirement + " letters!";
|
|
978
|
+
}
|
|
979
|
+
}
|
|
980
|
+
class InvalidIntegerNumberValidatorEerror {
|
|
981
|
+
buildMessage() {
|
|
982
|
+
return "Must only contain numbers, no decimals or words allowed";
|
|
983
|
+
}
|
|
984
|
+
}
|
|
985
|
+
class PositiveIntegerNumberValidatorError {
|
|
986
|
+
buildMessage() {
|
|
987
|
+
return "Must be a positive integer";
|
|
988
|
+
}
|
|
989
|
+
}
|
|
990
|
+
class MaxLengthValidationError {
|
|
991
|
+
requirement;
|
|
992
|
+
constructor(requirement) {
|
|
993
|
+
this.requirement = requirement;
|
|
994
|
+
}
|
|
995
|
+
buildMessage() {
|
|
996
|
+
return "Must be a maximum length of " + this.requirement + " letters!";
|
|
997
|
+
}
|
|
998
|
+
}
|
|
999
|
+
class MaxValidationError {
|
|
1000
|
+
requirement;
|
|
1001
|
+
constructor(requirement) {
|
|
1002
|
+
this.requirement = requirement;
|
|
1003
|
+
}
|
|
1004
|
+
buildMessage() {
|
|
1005
|
+
return "The largest acceptable input is " + this.requirement;
|
|
1006
|
+
}
|
|
1007
|
+
}
|
|
1008
|
+
class MinValidationError {
|
|
1009
|
+
requirement;
|
|
1010
|
+
constructor(requirement) {
|
|
1011
|
+
this.requirement = requirement;
|
|
1012
|
+
}
|
|
1013
|
+
buildMessage() {
|
|
1014
|
+
return "The smallest acceptable input is " + this.requirement;
|
|
1015
|
+
}
|
|
1016
|
+
}
|
|
1017
|
+
class PatternValidatorError {
|
|
1018
|
+
requirement;
|
|
1019
|
+
constructor(requirement) {
|
|
1020
|
+
this.requirement = requirement;
|
|
1021
|
+
}
|
|
1022
|
+
buildMessage() {
|
|
1023
|
+
if (this.requirement == '^[a-zA-Z ]*$') {
|
|
1024
|
+
return "This field must only contain words ";
|
|
1025
|
+
}
|
|
1026
|
+
else if (this.requirement == '/[0-9]-[0-9]+$/') {
|
|
1027
|
+
return "This field must only contain numbers and a - " + "<br>" + "Example: 71-716971";
|
|
1028
|
+
}
|
|
1029
|
+
else if (this.requirement = 'forDate') {
|
|
1030
|
+
return "Date needs to be DD/MM/YYYY";
|
|
1031
|
+
}
|
|
1032
|
+
}
|
|
1033
|
+
}
|
|
1034
|
+
class RequiredValidatorError {
|
|
1035
|
+
buildMessage() {
|
|
1036
|
+
return "This Field Is Required";
|
|
1037
|
+
}
|
|
1038
|
+
}
|
|
1039
|
+
class EmailValidatorError {
|
|
1040
|
+
buildMessage() {
|
|
1041
|
+
return "Make Sure It Is An Email Format" + "<br>" + "example@jooler.io";
|
|
1042
|
+
}
|
|
1043
|
+
}
|
|
1044
|
+
class ValidationError {
|
|
1045
|
+
static getRelevantError(validationType, validationValue) {
|
|
1046
|
+
let validationMessage;
|
|
1047
|
+
validationMessage = this.MessageDictionary(validationValue, validationType);
|
|
1048
|
+
return validationMessage;
|
|
1049
|
+
}
|
|
1050
|
+
static MessageDictionary(value, validationType) {
|
|
1051
|
+
let ValidationMessageForInput = {
|
|
1052
|
+
'minlength': new MinLengthValidationError(value).buildMessage(),
|
|
1053
|
+
'maxlength': new MaxLengthValidationError(value).buildMessage(),
|
|
1054
|
+
'max': new MaxValidationError(value).buildMessage(),
|
|
1055
|
+
'min': new MinValidationError(value).buildMessage(),
|
|
1056
|
+
'pattern': new PatternValidatorError(value).buildMessage(),
|
|
1057
|
+
'required': new RequiredValidatorError().buildMessage(),
|
|
1058
|
+
'email': new EmailValidatorError().buildMessage(),
|
|
1059
|
+
'invalidIntegerNumber': new InvalidIntegerNumberValidatorEerror().buildMessage(),
|
|
1060
|
+
'invalidPositiveInteger': new PositiveIntegerNumberValidatorError().buildMessage(),
|
|
1061
|
+
};
|
|
1062
|
+
return ValidationMessageForInput[validationType];
|
|
1063
|
+
}
|
|
1064
|
+
static validationMessageForDate = {
|
|
1065
|
+
'required': new RequiredValidatorError().buildMessage(),
|
|
1066
|
+
'pattern': new PatternValidatorError('forDate').buildMessage(),
|
|
1067
|
+
};
|
|
1068
|
+
}
|
|
1069
|
+
|
|
1070
|
+
class FormControlValidationMsgDirectiveForInput {
|
|
1071
|
+
elRef;
|
|
1072
|
+
control;
|
|
1073
|
+
errorMessage;
|
|
1074
|
+
errorNgSelectMessage;
|
|
1075
|
+
showBoxError = true;
|
|
1076
|
+
errorDivId;
|
|
1077
|
+
beforeBegin = false;
|
|
1078
|
+
afterEnd = false;
|
|
1079
|
+
validationError = ValidationError;
|
|
1080
|
+
statusChangeSubscription;
|
|
1081
|
+
constructor(elRef, control) {
|
|
1082
|
+
this.elRef = elRef;
|
|
1083
|
+
this.control = control;
|
|
1084
|
+
}
|
|
1085
|
+
ngOnInit() {
|
|
1086
|
+
this.statusChangeSubscription = this.control.statusChanges.subscribe((status) => {
|
|
1087
|
+
if (status == 'INVALID') {
|
|
1088
|
+
this.showError();
|
|
1089
|
+
}
|
|
1090
|
+
else {
|
|
1091
|
+
this.removeError();
|
|
1092
|
+
}
|
|
1093
|
+
});
|
|
1094
|
+
this.control.valueChanges.subscribe({
|
|
1095
|
+
next: (response) => {
|
|
1096
|
+
if (this.control.errors) {
|
|
1097
|
+
this.showError();
|
|
1098
|
+
}
|
|
1099
|
+
}
|
|
1100
|
+
});
|
|
1101
|
+
}
|
|
1102
|
+
ngOnDestroy() {
|
|
1103
|
+
this.statusChangeSubscription.unsubscribe();
|
|
1104
|
+
}
|
|
1105
|
+
handleBlurEvent(event) {
|
|
1106
|
+
if (this.control.errors) {
|
|
1107
|
+
this.showError();
|
|
1108
|
+
}
|
|
1109
|
+
else {
|
|
1110
|
+
this.removeError();
|
|
1111
|
+
}
|
|
1112
|
+
}
|
|
1113
|
+
showError() {
|
|
1114
|
+
this.removeError();
|
|
1115
|
+
const valErrors = this.control.errors;
|
|
1116
|
+
const keys = Object.keys(valErrors);
|
|
1117
|
+
for (let i = 0; i < keys.length; i++) {
|
|
1118
|
+
switch (keys[i]) {
|
|
1119
|
+
case 'minlength': {
|
|
1120
|
+
let message = this.validationError.getRelevantError(keys[i], valErrors.minlength.requiredLength);
|
|
1121
|
+
this.errorMessage += ` ${this.errorMessage ? "<br>" : ""}${"\u25CF " + message}`;
|
|
1122
|
+
break;
|
|
1123
|
+
}
|
|
1124
|
+
case 'required': {
|
|
1125
|
+
let message = this.validationError.getRelevantError(keys[i], valErrors);
|
|
1126
|
+
this.errorMessage += ` ${this.errorMessage ? "<br>" : ""}${"\u25CF " + message}`;
|
|
1127
|
+
this.control.control.setErrors({ 'required': true, 'message': message }, { emitEvent: false });
|
|
1128
|
+
break;
|
|
1129
|
+
}
|
|
1130
|
+
case 'maxlength': {
|
|
1131
|
+
let message = this.validationError.getRelevantError(keys[i], valErrors.maxlength.requiredLength);
|
|
1132
|
+
this.errorMessage += ` ${this.errorMessage ? "<br>" : ""}${"\u25CF " + message}`;
|
|
1133
|
+
this.control.control.setErrors({ 'maxlength': { 'requiredLength': valErrors.maxlength.requiredLength }, 'message': message }, { emitEvent: false });
|
|
1134
|
+
break;
|
|
1135
|
+
}
|
|
1136
|
+
case 'max': {
|
|
1137
|
+
let message = this.validationError.getRelevantError(keys[i], valErrors.max.max);
|
|
1138
|
+
this.errorMessage += ` ${this.errorMessage ? "<br>" : ""}${"\u25CF " + message}`;
|
|
1139
|
+
this.control.control.setErrors({ 'message': message, 'max': { 'max': valErrors.max.max } }, { emitEvent: false });
|
|
1140
|
+
break;
|
|
1141
|
+
}
|
|
1142
|
+
case 'min': {
|
|
1143
|
+
let message = this.validationError.getRelevantError(keys[i], valErrors.min.min);
|
|
1144
|
+
this.errorMessage += ` ${this.errorMessage ? "<br>" : ""}${"\u25CF " + message}`;
|
|
1145
|
+
break;
|
|
1146
|
+
}
|
|
1147
|
+
case 'pattern': {
|
|
1148
|
+
let message = this.validationError.getRelevantError(keys[i], valErrors.pattern.requiredPattern);
|
|
1149
|
+
this.errorMessage += ` ${this.errorMessage ? "<br>" : ""}${"\u25CF " + message}`;
|
|
1150
|
+
break;
|
|
1151
|
+
}
|
|
1152
|
+
case 'email': {
|
|
1153
|
+
let message = this.validationError.getRelevantError(keys[i], valErrors);
|
|
1154
|
+
this.errorMessage += ` ${this.errorMessage ? "<br>" : ""}${"\u25CF " + message}`;
|
|
1155
|
+
break;
|
|
1156
|
+
}
|
|
1157
|
+
case 'invalidIntegerNumber': {
|
|
1158
|
+
let message = this.validationError.getRelevantError(keys[i], valErrors);
|
|
1159
|
+
this.errorMessage += ` ${this.errorMessage ? "<br>" : ""}${"\u25CF " + message}`;
|
|
1160
|
+
break;
|
|
1161
|
+
}
|
|
1162
|
+
case 'invalidPositiveInteger': {
|
|
1163
|
+
let message = this.validationError.getRelevantError(keys[i], valErrors);
|
|
1164
|
+
this.errorMessage += ` ${this.errorMessage ? "<br>" : ""}${"\u25CF " + message}`;
|
|
1165
|
+
this.control.control.setErrors({ 'invalidPositiveInteger': true, 'message': message }, { emitEvent: false });
|
|
1166
|
+
break;
|
|
1167
|
+
}
|
|
1168
|
+
}
|
|
1169
|
+
}
|
|
1170
|
+
if (this.showBoxError) {
|
|
1171
|
+
const errDiv = '<div style="color:#C34243; width=100%; background-color: #FFDBDB; padding: 1rem; border-radius: .5rem; border: .1rem solid #A80002 ;border-left: .75rem solid #A80002; margin-top:.5rem; font-size: 1.2rem; " id="' + this.errorDivId + '">' + '<h3 style= " font-size: 1.3rem; margin-bottom:.5rem; margin:0; color: #A80002; font-weight: 700; line-height: 1.6rem;">' + 'Please Complete all details' + '</h3>' + this.errorMessage + '</div>';
|
|
1172
|
+
if (!this.beforeBegin && !this.afterEnd)
|
|
1173
|
+
this.elRef.nativeElement.parentElement.parentElement.parentElement.parentElement.insertAdjacentHTML('afterend', errDiv);
|
|
1174
|
+
else if (this.beforeBegin)
|
|
1175
|
+
this.elRef.nativeElement.insertAdjacentHTML('beforebegin', errDiv);
|
|
1176
|
+
else if (this.afterEnd)
|
|
1177
|
+
this.elRef.nativeElement.insertAdjacentHTML('afterend', errDiv);
|
|
1178
|
+
else
|
|
1179
|
+
throw Error("Adjustment not specified ");
|
|
1180
|
+
}
|
|
1181
|
+
}
|
|
1182
|
+
removeError() {
|
|
1183
|
+
this.errorMessage = "";
|
|
1184
|
+
const errorElement = document.getElementById(this.errorDivId);
|
|
1185
|
+
if (errorElement) {
|
|
1186
|
+
errorElement.remove();
|
|
1187
|
+
}
|
|
1188
|
+
}
|
|
1189
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormControlValidationMsgDirectiveForInput, deps: [{ token: i0.ElementRef }, { token: i2$1.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1190
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FormControlValidationMsgDirectiveForInput, selector: "[appFormControlValidationMsgForInputs]", inputs: { showBoxError: "showBoxError", errorDivId: "errorDivId", beforeBegin: "beforeBegin", afterEnd: "afterEnd" }, host: { listeners: { "blur": "handleBlurEvent($event)" } }, providers: [NgModel], ngImport: i0 });
|
|
1191
|
+
}
|
|
1192
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormControlValidationMsgDirectiveForInput, decorators: [{
|
|
1193
|
+
type: Directive,
|
|
1194
|
+
args: [{
|
|
1195
|
+
selector: '[appFormControlValidationMsgForInputs]',
|
|
1196
|
+
providers: [NgModel],
|
|
1197
|
+
}]
|
|
1198
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i2$1.NgControl }]; }, propDecorators: { showBoxError: [{
|
|
1199
|
+
type: Input,
|
|
1200
|
+
args: ['showBoxError']
|
|
1201
|
+
}], errorDivId: [{
|
|
1202
|
+
type: Input,
|
|
1203
|
+
args: ['errorDivId']
|
|
1204
|
+
}], beforeBegin: [{
|
|
1205
|
+
type: Input,
|
|
1206
|
+
args: ['beforeBegin']
|
|
1207
|
+
}], afterEnd: [{
|
|
1208
|
+
type: Input,
|
|
1209
|
+
args: ['afterEnd']
|
|
1210
|
+
}], handleBlurEvent: [{
|
|
1211
|
+
type: HostListener,
|
|
1212
|
+
args: ['blur', ["$event"]]
|
|
1213
|
+
}] } });
|
|
1214
|
+
|
|
1215
|
+
class GeneralInputRendererComponent {
|
|
1216
|
+
params;
|
|
1217
|
+
key;
|
|
1218
|
+
value;
|
|
1219
|
+
formGroup;
|
|
1220
|
+
formControlName;
|
|
1221
|
+
constructor() { }
|
|
1222
|
+
agInit(params) {
|
|
1223
|
+
this.params = params;
|
|
1224
|
+
this.formGroup = this.params.context.formGroup.get('entries').at(params.node.rowIndex);
|
|
1225
|
+
this.key = params.context.createKey(params.columnApi, params.column);
|
|
1226
|
+
if (params.isTypeNumber) {
|
|
1227
|
+
if (params.value) {
|
|
1228
|
+
this.value = new DecimalPipe("en-US").transform(+params.value, "1.0-0");
|
|
1229
|
+
}
|
|
1230
|
+
}
|
|
1231
|
+
else {
|
|
1232
|
+
this.value = params.value;
|
|
1233
|
+
}
|
|
1234
|
+
}
|
|
1235
|
+
onCellDataChanged($event) {
|
|
1236
|
+
let value = $event.target.value;
|
|
1237
|
+
let newAndOldValue = {
|
|
1238
|
+
newValue: value,
|
|
1239
|
+
oldValue: this.params?.value
|
|
1240
|
+
};
|
|
1241
|
+
if (this.params.allowUpdateRowData) {
|
|
1242
|
+
this.params.onChange(newAndOldValue);
|
|
1243
|
+
}
|
|
1244
|
+
}
|
|
1245
|
+
refresh(params) {
|
|
1246
|
+
this.formGroup = this.params.context.formGroup.get('entries').at(params.node.rowIndex);
|
|
1247
|
+
return true;
|
|
1248
|
+
}
|
|
1249
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GeneralInputRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1250
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GeneralInputRendererComponent, selector: "general-input-renderer-test", ngImport: i0, template: "<div *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\r\n <div *ngIf=\"params.isTypeText\">\r\n <input [placeholder]=\"params.fieldLabel\"appFormControlValidationMsgForInputs [showBoxError]=\"false\"\r\n [errorDivId]=\"'text'\" \r\n (change)=\"onCellDataChanged($event)\" [formControlName]=\"key\" />\r\n <span *ngIf=\"params.showSymbol\"\r\n style=\"margin-left:-20px ;\">{{params.symbol}}</span>\r\n <show-table-errors\r\n *ngIf=\"formGroup.get(this.key).errors && formGroup.get(this.key) && formGroup.get(this.key).touched\"\r\n [message]=\"formGroup.get(this.key).errors.message\"></show-table-errors>\r\n </div>\r\n <div *ngIf=\"params.isTypeNumber\">\r\n <input customDecimalPointTwoDigits appFormControlValidationMsgForInputs [showBoxError]=\"false\"\r\n [errorDivId]=\"'number'\" [placeholder]=\"params.fieldLabel\"\r\n (change)=\"onCellDataChanged($event)\" [formControlName]=\"key\" />\r\n <span *ngIf=\"params.showSymbol\"\r\n style=\"margin-left:-20px ;\">{{params.symbol}}</span>\r\n <show-table-errors\r\n *ngIf=\"formGroup.get(this.key).errors && formGroup.get(this.key).touched\"\r\n [message]=\"formGroup.get(this.key).errors.message\"></show-table-errors>\r\n </div>\r\n <div *ngIf=\"params.isTypeIntegerNumber\">\r\n <input appFormControlValidationMsgForInputs [showBoxError]=\"false\"type=\"number\"\r\n [errorDivId]=\"'integer'\" [placeholder]=\"params.fieldLabel\"\r\n (change)=\"onCellDataChanged($event)\" [formControlName]=\"key\" />\r\n <span *ngIf=\"params.showSymbol\"\r\n style=\"margin-left:-20px ;\">{{params.symbol}}</span>\r\n <show-table-errors\r\n *ngIf=\"formGroup.get(this.key).errors && formGroup.get(this.key).touched\"\r\n [message]=\"formGroup.get(this.key).errors.message\"></show-table-errors>\r\n </div>\r\n <div *ngIf=\"params.isTypeTextArea\">\r\n <textarea class=\"text-area\" (change)=\"onCellDataChanged($event)\"\r\n [placeholder]=\"params.fieldLabel\" class=\"main-height\"\r\n [formControlName]=\"key\"></textarea>\r\n </div>\r\n</div>", styles: ["textarea{padding-left:.5rem;border-radius:.3rem;height:3.5rem;font-size:1.2rem;border:solid #BEBEBE .1rem}textarea:focus{outline:none}textarea::placeholder{color:#676767}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: CustomDecimalPointTwoDigitsDirective, selector: "[customDecimalPointTwoDigits]" }, { kind: "component", type: ShowTableErrorsComponent, selector: "show-table-errors", inputs: ["message"] }, { kind: "directive", type: FormControlValidationMsgDirectiveForInput, selector: "[appFormControlValidationMsgForInputs]", inputs: ["showBoxError", "errorDivId", "beforeBegin", "afterEnd"] }] });
|
|
1251
|
+
}
|
|
1252
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GeneralInputRendererComponent, decorators: [{
|
|
1253
|
+
type: Component,
|
|
1254
|
+
args: [{ selector: 'general-input-renderer-test', template: "<div *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\r\n <div *ngIf=\"params.isTypeText\">\r\n <input [placeholder]=\"params.fieldLabel\"appFormControlValidationMsgForInputs [showBoxError]=\"false\"\r\n [errorDivId]=\"'text'\" \r\n (change)=\"onCellDataChanged($event)\" [formControlName]=\"key\" />\r\n <span *ngIf=\"params.showSymbol\"\r\n style=\"margin-left:-20px ;\">{{params.symbol}}</span>\r\n <show-table-errors\r\n *ngIf=\"formGroup.get(this.key).errors && formGroup.get(this.key) && formGroup.get(this.key).touched\"\r\n [message]=\"formGroup.get(this.key).errors.message\"></show-table-errors>\r\n </div>\r\n <div *ngIf=\"params.isTypeNumber\">\r\n <input customDecimalPointTwoDigits appFormControlValidationMsgForInputs [showBoxError]=\"false\"\r\n [errorDivId]=\"'number'\" [placeholder]=\"params.fieldLabel\"\r\n (change)=\"onCellDataChanged($event)\" [formControlName]=\"key\" />\r\n <span *ngIf=\"params.showSymbol\"\r\n style=\"margin-left:-20px ;\">{{params.symbol}}</span>\r\n <show-table-errors\r\n *ngIf=\"formGroup.get(this.key).errors && formGroup.get(this.key).touched\"\r\n [message]=\"formGroup.get(this.key).errors.message\"></show-table-errors>\r\n </div>\r\n <div *ngIf=\"params.isTypeIntegerNumber\">\r\n <input appFormControlValidationMsgForInputs [showBoxError]=\"false\"type=\"number\"\r\n [errorDivId]=\"'integer'\" [placeholder]=\"params.fieldLabel\"\r\n (change)=\"onCellDataChanged($event)\" [formControlName]=\"key\" />\r\n <span *ngIf=\"params.showSymbol\"\r\n style=\"margin-left:-20px ;\">{{params.symbol}}</span>\r\n <show-table-errors\r\n *ngIf=\"formGroup.get(this.key).errors && formGroup.get(this.key).touched\"\r\n [message]=\"formGroup.get(this.key).errors.message\"></show-table-errors>\r\n </div>\r\n <div *ngIf=\"params.isTypeTextArea\">\r\n <textarea class=\"text-area\" (change)=\"onCellDataChanged($event)\"\r\n [placeholder]=\"params.fieldLabel\" class=\"main-height\"\r\n [formControlName]=\"key\"></textarea>\r\n </div>\r\n</div>", styles: ["textarea{padding-left:.5rem;border-radius:.3rem;height:3.5rem;font-size:1.2rem;border:solid #BEBEBE .1rem}textarea:focus{outline:none}textarea::placeholder{color:#676767}\n"] }]
|
|
1255
|
+
}], ctorParameters: function () { return []; } });
|
|
1256
|
+
|
|
1257
|
+
class LabelAndField {
|
|
1258
|
+
label;
|
|
1259
|
+
field;
|
|
1260
|
+
}
|
|
1261
|
+
|
|
1262
|
+
var DropdownActionType;
|
|
1263
|
+
(function (DropdownActionType) {
|
|
1264
|
+
DropdownActionType[DropdownActionType["ADD"] = 0] = "ADD";
|
|
1265
|
+
DropdownActionType[DropdownActionType["MENU"] = 1] = "MENU";
|
|
1266
|
+
})(DropdownActionType || (DropdownActionType = {}));
|
|
1267
|
+
|
|
1268
|
+
class DropdownActionsComponent {
|
|
1269
|
+
_Router;
|
|
1270
|
+
dropdownActionTypes = DropdownActionType;
|
|
1271
|
+
canRoute = true;
|
|
1272
|
+
disabled;
|
|
1273
|
+
labelsAndRoutes = [];
|
|
1274
|
+
route;
|
|
1275
|
+
dropdownActionType = this.dropdownActionTypes.ADD;
|
|
1276
|
+
addClicked = new EventEmitter();
|
|
1277
|
+
constructor(_Router) {
|
|
1278
|
+
this._Router = _Router;
|
|
1279
|
+
}
|
|
1280
|
+
ngOnInit() {
|
|
1281
|
+
this.validateActions();
|
|
1282
|
+
}
|
|
1283
|
+
validateActions() {
|
|
1284
|
+
if (this.dropdownActionType == this.dropdownActionTypes.ADD) {
|
|
1285
|
+
if (this.canRoute) {
|
|
1286
|
+
if (this.route == "" || this.route == undefined || this.route == null) {
|
|
1287
|
+
throw Error("Route needs to be provided.");
|
|
1288
|
+
}
|
|
1289
|
+
}
|
|
1290
|
+
else {
|
|
1291
|
+
if (this.route) {
|
|
1292
|
+
throw Error("Route shouldn't be provided since canRoute is false");
|
|
1293
|
+
}
|
|
1294
|
+
}
|
|
1295
|
+
}
|
|
1296
|
+
else if (this.dropdownActionType == this.dropdownActionTypes.MENU) {
|
|
1297
|
+
if (!this.labelsAndRoutes.length) {
|
|
1298
|
+
throw Error("A list of labels & Routes need to be provided for the actions menu.");
|
|
1299
|
+
}
|
|
1300
|
+
}
|
|
1301
|
+
else {
|
|
1302
|
+
throw Error("Dropdown Action Type is not recognized.");
|
|
1303
|
+
}
|
|
1304
|
+
}
|
|
1305
|
+
onClickAdd($event) {
|
|
1306
|
+
$event.preventDefault();
|
|
1307
|
+
if (this.canRoute && this.route) {
|
|
1308
|
+
this._Router.navigate([this.route]);
|
|
1309
|
+
}
|
|
1310
|
+
this.addClicked.emit();
|
|
1311
|
+
}
|
|
1312
|
+
onClickLabel(route, $event) {
|
|
1313
|
+
$event.preventDefault();
|
|
1314
|
+
this._Router.navigate([route]);
|
|
1315
|
+
}
|
|
1316
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownActionsComponent, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
1317
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropdownActionsComponent, selector: "dropdown-actions", inputs: { canRoute: "canRoute", disabled: "disabled", labelsAndRoutes: "labelsAndRoutes", route: "route", dropdownActionType: "dropdownActionType" }, outputs: { addClicked: "addClicked" }, ngImport: i0, template: "<div [ngSwitch]=\"dropdownActionType\">\r\n <a *ngSwitchCase=\"dropdownActionTypes.ADD\" [href]=\"route\"\r\n [ngClass]=\"{'action-enabled':!disabled, 'disabled': disabled}\"\r\n (click)=\"onClickAdd($event)\">\r\n <fa-icon icon=\"plus\"></fa-icon>\r\n </a>\r\n <fa-icon *ngSwitchCase=\"dropdownActionTypes.MENU\"\r\n [ngClass]=\"{'action-enabled':!disabled, 'disabled': disabled}\"\r\n class=\"menu\" [matMenuTriggerFor]=\"menu\"\r\n icon=\"ellipsis-vertical\"></fa-icon>\r\n <mat-menu #menu=\"matMenu\">\r\n <button *ngFor=\"let labelAndRoute of labelsAndRoutes\" mat-menu-item>\r\n <a [href]=\"labelAndRoute.route\"\r\n (click)=\"onClickLabel(labelAndRoute.route, $event)\">{{labelAndRoute.label}}</a>\r\n </button>\r\n </mat-menu>\r\n</div>", styles: [".action-enabled{cursor:pointer;color:#155ed4}.action-enabled:hover{color:#3178eb}.disabled{color:#676767;cursor:initial;pointer-events:none}.menu{font-size:1.8rem;display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i2$2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
|
|
1318
|
+
}
|
|
1319
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownActionsComponent, decorators: [{
|
|
1320
|
+
type: Component,
|
|
1321
|
+
args: [{ selector: 'dropdown-actions', template: "<div [ngSwitch]=\"dropdownActionType\">\r\n <a *ngSwitchCase=\"dropdownActionTypes.ADD\" [href]=\"route\"\r\n [ngClass]=\"{'action-enabled':!disabled, 'disabled': disabled}\"\r\n (click)=\"onClickAdd($event)\">\r\n <fa-icon icon=\"plus\"></fa-icon>\r\n </a>\r\n <fa-icon *ngSwitchCase=\"dropdownActionTypes.MENU\"\r\n [ngClass]=\"{'action-enabled':!disabled, 'disabled': disabled}\"\r\n class=\"menu\" [matMenuTriggerFor]=\"menu\"\r\n icon=\"ellipsis-vertical\"></fa-icon>\r\n <mat-menu #menu=\"matMenu\">\r\n <button *ngFor=\"let labelAndRoute of labelsAndRoutes\" mat-menu-item>\r\n <a [href]=\"labelAndRoute.route\"\r\n (click)=\"onClickLabel(labelAndRoute.route, $event)\">{{labelAndRoute.label}}</a>\r\n </button>\r\n </mat-menu>\r\n</div>", styles: [".action-enabled{cursor:pointer;color:#155ed4}.action-enabled:hover{color:#3178eb}.disabled{color:#676767;cursor:initial;pointer-events:none}.menu{font-size:1.8rem;display:flex;align-items:center}\n"] }]
|
|
1322
|
+
}], ctorParameters: function () { return [{ type: i1$2.Router }]; }, propDecorators: { canRoute: [{
|
|
1323
|
+
type: Input
|
|
1324
|
+
}], disabled: [{
|
|
1325
|
+
type: Input
|
|
1326
|
+
}], labelsAndRoutes: [{
|
|
1327
|
+
type: Input
|
|
1328
|
+
}], route: [{
|
|
1329
|
+
type: Input
|
|
1330
|
+
}], dropdownActionType: [{
|
|
1331
|
+
type: Input
|
|
1332
|
+
}], addClicked: [{
|
|
1333
|
+
type: Output
|
|
1334
|
+
}] } });
|
|
1335
|
+
|
|
1336
|
+
class PrimaryColors {
|
|
1337
|
+
static $primaryBlueColor = '#155ED4';
|
|
1338
|
+
static $primaryPinkColor = '#F0509C';
|
|
1339
|
+
static $primaryTealColor = '#12957E';
|
|
1340
|
+
static $primaryCarbonColor = '#32353B';
|
|
1341
|
+
static $primaryPurpleColor = '#E3B1EB';
|
|
1342
|
+
static $primaryRedColor = '#A80002';
|
|
1343
|
+
static $primaryLightRedColor = '#FFDBDB';
|
|
1344
|
+
static $primaryLightGrayBlueColor = '#f7f8f9';
|
|
1345
|
+
static $primaryLightGrayColor = '#f0f0f0';
|
|
1346
|
+
}
|
|
1347
|
+
|
|
1348
|
+
class AddAsteriskDirective {
|
|
1349
|
+
elem;
|
|
1350
|
+
show = true;
|
|
1351
|
+
constructor(elem) {
|
|
1352
|
+
this.elem = elem;
|
|
1353
|
+
}
|
|
1354
|
+
ngOnInit() {
|
|
1355
|
+
this.toggleAsterisk();
|
|
1356
|
+
}
|
|
1357
|
+
ngOnChanges(changes) {
|
|
1358
|
+
this.toggleAsterisk();
|
|
1359
|
+
}
|
|
1360
|
+
toggleAsterisk() {
|
|
1361
|
+
const existingAsterisk = this.elem.nativeElement.querySelector('.custom-asterisk');
|
|
1362
|
+
if (this.show) {
|
|
1363
|
+
if (!existingAsterisk) {
|
|
1364
|
+
const customAsterisk = `<span class="custom-asterisk" style="color:${PrimaryColors.$primaryRedColor};"> *</span> `;
|
|
1365
|
+
this.elem.nativeElement.insertAdjacentHTML('beforeend', customAsterisk);
|
|
1366
|
+
}
|
|
1367
|
+
}
|
|
1368
|
+
else {
|
|
1369
|
+
if (existingAsterisk) {
|
|
1370
|
+
existingAsterisk.remove();
|
|
1371
|
+
}
|
|
1372
|
+
}
|
|
1373
|
+
}
|
|
1374
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddAsteriskDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1375
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AddAsteriskDirective, selector: "[addAsterisk]", inputs: { show: "show" }, usesOnChanges: true, ngImport: i0 });
|
|
1376
|
+
}
|
|
1377
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddAsteriskDirective, decorators: [{
|
|
1378
|
+
type: Directive,
|
|
1379
|
+
args: [{
|
|
1380
|
+
selector: '[addAsterisk]'
|
|
1381
|
+
}]
|
|
1382
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { show: [{
|
|
1383
|
+
type: Input,
|
|
1384
|
+
args: ['show']
|
|
1385
|
+
}] } });
|
|
1386
|
+
|
|
1387
|
+
class InputsModule {
|
|
1388
|
+
static forRoot(environment) {
|
|
1389
|
+
return {
|
|
1390
|
+
ngModule: InputsModule,
|
|
1391
|
+
providers: [
|
|
1392
|
+
ChooseGeneralItemService,
|
|
1393
|
+
{
|
|
1394
|
+
provide: 'env',
|
|
1395
|
+
useValue: environment
|
|
1396
|
+
}
|
|
1397
|
+
]
|
|
1398
|
+
};
|
|
1399
|
+
}
|
|
1400
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1401
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, declarations: [ChooseEnumComponent,
|
|
1402
|
+
ChooseEnumRendererComponent,
|
|
1403
|
+
ChooseGeneralItemComponent,
|
|
1404
|
+
GeneralInputRendererComponent,
|
|
1405
|
+
ChooseLineTypeComponent,
|
|
1406
|
+
ChooseYesOrNoComponent,
|
|
1407
|
+
ChooseYesOrNoRendererComponent,
|
|
1408
|
+
EditableSavableInputComponent,
|
|
1409
|
+
DynamicPipe,
|
|
1410
|
+
ChooseGeneralItemRendererComponent,
|
|
1411
|
+
CustomDecimalPointTwoDigitsDirective,
|
|
1412
|
+
ShowTableErrorsComponent,
|
|
1413
|
+
FormControlValidationMsgDirectiveForInput,
|
|
1414
|
+
DropdownActionsComponent,
|
|
1415
|
+
AddAsteriskDirective], imports: [CommonModule,
|
|
1416
|
+
NgSelectModule,
|
|
1417
|
+
FormsModule,
|
|
1418
|
+
ReactiveFormsModule,
|
|
1419
|
+
AppMaterialModule,
|
|
1420
|
+
SharedGeneralComponentsModule,
|
|
1421
|
+
FontAwesomeModule], exports: [ChooseEnumComponent,
|
|
1422
|
+
ChooseEnumRendererComponent,
|
|
1423
|
+
ChooseGeneralItemComponent,
|
|
1424
|
+
GeneralInputRendererComponent,
|
|
1425
|
+
ChooseLineTypeComponent,
|
|
1426
|
+
ChooseYesOrNoComponent,
|
|
1427
|
+
ChooseYesOrNoRendererComponent,
|
|
1428
|
+
EditableSavableInputComponent,
|
|
1429
|
+
DropdownActionsComponent,
|
|
1430
|
+
DynamicPipe,
|
|
1431
|
+
AddAsteriskDirective] });
|
|
1432
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, imports: [CommonModule,
|
|
1433
|
+
NgSelectModule,
|
|
1434
|
+
FormsModule,
|
|
1435
|
+
ReactiveFormsModule,
|
|
1436
|
+
AppMaterialModule,
|
|
1437
|
+
SharedGeneralComponentsModule,
|
|
1438
|
+
FontAwesomeModule] });
|
|
1439
|
+
}
|
|
1440
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, decorators: [{
|
|
1441
|
+
type: NgModule,
|
|
1442
|
+
args: [{
|
|
1443
|
+
declarations: [
|
|
1444
|
+
ChooseEnumComponent,
|
|
1445
|
+
ChooseEnumRendererComponent,
|
|
1446
|
+
ChooseGeneralItemComponent,
|
|
1447
|
+
GeneralInputRendererComponent,
|
|
1448
|
+
ChooseLineTypeComponent,
|
|
1449
|
+
ChooseYesOrNoComponent,
|
|
1450
|
+
ChooseYesOrNoRendererComponent,
|
|
1451
|
+
EditableSavableInputComponent,
|
|
1452
|
+
DynamicPipe,
|
|
1453
|
+
ChooseGeneralItemRendererComponent,
|
|
1454
|
+
CustomDecimalPointTwoDigitsDirective,
|
|
1455
|
+
ShowTableErrorsComponent,
|
|
1456
|
+
FormControlValidationMsgDirectiveForInput,
|
|
1457
|
+
DropdownActionsComponent,
|
|
1458
|
+
AddAsteriskDirective
|
|
1459
|
+
],
|
|
1460
|
+
imports: [
|
|
1461
|
+
CommonModule,
|
|
1462
|
+
NgSelectModule,
|
|
1463
|
+
FormsModule,
|
|
1464
|
+
ReactiveFormsModule,
|
|
1465
|
+
AppMaterialModule,
|
|
1466
|
+
SharedGeneralComponentsModule,
|
|
1467
|
+
FontAwesomeModule,
|
|
1468
|
+
],
|
|
1469
|
+
exports: [
|
|
1470
|
+
ChooseEnumComponent,
|
|
1471
|
+
ChooseEnumRendererComponent,
|
|
1472
|
+
ChooseGeneralItemComponent,
|
|
1473
|
+
GeneralInputRendererComponent,
|
|
1474
|
+
ChooseLineTypeComponent,
|
|
1475
|
+
ChooseYesOrNoComponent,
|
|
1476
|
+
ChooseYesOrNoRendererComponent,
|
|
1477
|
+
EditableSavableInputComponent,
|
|
1478
|
+
DropdownActionsComponent,
|
|
1479
|
+
DynamicPipe,
|
|
1480
|
+
AddAsteriskDirective
|
|
1481
|
+
]
|
|
1482
|
+
}]
|
|
1483
|
+
}] });
|
|
1484
|
+
|
|
1485
|
+
/*
|
|
1486
|
+
* Public API Surface of inputs
|
|
1487
|
+
*/
|
|
1488
|
+
|
|
1489
|
+
/**
|
|
1490
|
+
* Generated bundle index. Do not edit.
|
|
1491
|
+
*/
|
|
1492
|
+
|
|
1493
|
+
export { AddAsteriskDirective, ChooseEnumComponent, ChooseEnumRendererComponent, ChooseGeneralItemComponent, ChooseGeneralItemRendererComponent, ChooseGeneralItemService, ChooseLineTypeComponent, ChooseYesOrNoComponent, ChooseYesOrNoRendererComponent, DropdownActionType, DropdownActionsComponent, DynamicPipe, EditableSavableInputComponent, FormControlValidationMsgDirectiveForInput, GeneralInputRendererComponent, InputsModule, LabelAndField, PrimaryColors, ShowTableErrorsComponent };
|
|
1494
|
+
//# sourceMappingURL=inputs.mjs.map
|