@softpak/components 0.0.0-beta.22 → 0.0.0-beta.221
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/esm2022/spx-button/spx-button.component.mjs +18 -5
- package/esm2022/spx-change-details/public-api.mjs +2 -0
- package/esm2022/spx-change-details/softpak-components-spx-change-details.mjs +5 -0
- package/esm2022/spx-change-details/spx-change-details-value.interface.mjs +2 -0
- package/esm2022/spx-change-details/spx-change-details.component.mjs +199 -0
- package/esm2022/spx-channel-selection/src/spx-channel-selection.component.mjs +1 -1
- package/esm2022/spx-channel-selection/src/spx-company-selection.component.mjs +2 -2
- package/esm2022/spx-channel-selection/src/spx-welcome.component.mjs +112 -19
- package/esm2022/spx-check-digit/spx-check-digit.component.mjs +14 -7
- package/esm2022/spx-form-section/spx-form-section.component.mjs +11 -11
- package/esm2022/spx-form-view/public-api.mjs +4 -0
- package/esm2022/spx-form-view/softpak-components-spx-form-view.mjs +5 -0
- package/esm2022/spx-form-view/spx-autocomplete-search.component.mjs +119 -0
- package/esm2022/spx-form-view/spx-form-field.interface.mjs +2 -0
- package/esm2022/spx-form-view/spx-form-section.interface.mjs +2 -0
- package/esm2022/spx-form-view/spx-form-view.component.mjs +268 -0
- package/esm2022/spx-inputs/spx-dropdown.component.mjs +94 -0
- package/esm2022/spx-inputs/spx-input-box.component.mjs +70 -46
- package/esm2022/spx-inputs/spx-input-date.component.mjs +1 -1
- package/esm2022/spx-inputs/spx-input-float.component.mjs +10 -5
- package/esm2022/spx-inputs/spx-input-number.component.mjs +10 -5
- package/esm2022/spx-inputs/spx-input-radio.component.mjs +93 -27
- package/esm2022/spx-inputs/spx-input-text.component.mjs +25 -32
- package/esm2022/spx-inputs/spx-input-type.enum.mjs +4 -1
- package/esm2022/spx-inputs/spx-input.component.mjs +48 -13
- package/esm2022/spx-navigation/spx-home-tile.component.mjs +31 -12
- package/esm2022/spx-navigation/spx-home-tiles.component.mjs +14 -5
- package/esm2022/spx-navigation/spx-navigation-item.interface.mjs +1 -1
- package/esm2022/spx-navigation/spx-navigation.component.mjs +14 -5
- package/esm2022/spx-number-check/spx-number-check.component.mjs +87 -20
- package/esm2022/spx-suggestion/spx-suggestion.component.mjs +28 -10
- package/esm2022/spx-update/src/spx-update-info.component.mjs +1 -1
- package/esm2022/spx-validation/public-api.mjs +1 -2
- package/esm2022/spx-validation/spx-validate-control.component.mjs +8 -3
- package/fesm2022/softpak-components-spx-button.mjs +17 -4
- package/fesm2022/softpak-components-spx-button.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-change-details.mjs +206 -0
- package/fesm2022/softpak-components-spx-change-details.mjs.map +1 -0
- package/fesm2022/softpak-components-spx-channel-selection.mjs +110 -21
- package/fesm2022/softpak-components-spx-channel-selection.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-check-digit.mjs +13 -6
- package/fesm2022/softpak-components-spx-check-digit.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-form-section.mjs +10 -10
- package/fesm2022/softpak-components-spx-form-section.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-form-view.mjs +385 -0
- package/fesm2022/softpak-components-spx-form-view.mjs.map +1 -0
- package/fesm2022/softpak-components-spx-inputs.mjs +337 -118
- package/fesm2022/softpak-components-spx-inputs.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-navigation.mjs +54 -17
- package/fesm2022/softpak-components-spx-navigation.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-number-check.mjs +86 -19
- package/fesm2022/softpak-components-spx-number-check.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-suggestion.mjs +27 -9
- package/fesm2022/softpak-components-spx-suggestion.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-update.mjs +1 -1
- package/fesm2022/softpak-components-spx-update.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-validation.mjs +8 -28
- package/fesm2022/softpak-components-spx-validation.mjs.map +1 -1
- package/package.json +23 -10
- package/spx-button/spx-button.component.d.ts +4 -2
- package/spx-change-details/index.d.ts +5 -0
- package/spx-change-details/public-api.d.ts +1 -0
- package/spx-change-details/spx-change-details-value.interface.d.ts +7 -0
- package/spx-change-details/spx-change-details.component.d.ts +63 -0
- package/spx-channel-selection/src/spx-welcome.component.d.ts +37 -8
- package/spx-check-digit/spx-check-digit.component.d.ts +3 -1
- package/spx-form-view/index.d.ts +5 -0
- package/spx-form-view/public-api.d.ts +3 -0
- package/spx-form-view/spx-autocomplete-search.component.d.ts +43 -0
- package/spx-form-view/spx-form-field.interface.d.ts +18 -0
- package/spx-form-view/spx-form-section.interface.d.ts +9 -0
- package/spx-form-view/spx-form-view.component.d.ts +48 -0
- package/spx-inputs/spx-dropdown.component.d.ts +18 -0
- package/spx-inputs/spx-input-box.component.d.ts +14 -7
- package/spx-inputs/spx-input-float.component.d.ts +3 -2
- package/spx-inputs/spx-input-number.component.d.ts +3 -2
- package/spx-inputs/spx-input-radio.component.d.ts +13 -5
- package/spx-inputs/spx-input-text.component.d.ts +3 -2
- package/spx-inputs/spx-input-type.enum.d.ts +4 -1
- package/spx-inputs/spx-input.component.d.ts +11 -3
- package/spx-navigation/spx-home-tile.component.d.ts +5 -1
- package/spx-navigation/spx-home-tiles.component.d.ts +2 -1
- package/spx-navigation/spx-navigation-item.interface.d.ts +1 -0
- package/spx-navigation/spx-navigation.component.d.ts +6 -2
- package/spx-number-check/spx-number-check.component.d.ts +15 -3
- package/spx-suggestion/spx-suggestion.component.d.ts +3 -1
- package/spx-validation/public-api.d.ts +0 -1
- package/spx-validation/spx-validate-control.component.d.ts +1 -1
- package/tailwind.css +1 -1
- package/esm2022/spx-validation/spx-validation.module.mjs +0 -28
- package/spx-validation/spx-validation.module.d.ts +0 -9
|
@@ -0,0 +1,268 @@
|
|
|
1
|
+
import { JsonPipe, NgFor, NgIf } from '@angular/common';
|
|
2
|
+
import { Component, EventEmitter, Input, Output, ViewChildren } from '@angular/core';
|
|
3
|
+
import { SpxFormSectionComponent } from '@softpak/components/spx-form-section';
|
|
4
|
+
import { SpxInputComponent, SpxInputTypeEnum } from '@softpak/components/spx-inputs';
|
|
5
|
+
import { SpxCapitalizePipe } from '@softpak/components/spx-capitalize';
|
|
6
|
+
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
7
|
+
import { SpxAutocompleteSearchComponent } from './spx-autocomplete-search.component';
|
|
8
|
+
import { SpxValidateControlComponent } from '@softpak/components/spx-validation';
|
|
9
|
+
import { TranslateModule } from '@ngx-translate/core';
|
|
10
|
+
import { SpxButtonComponent } from '@softpak/components/spx-button';
|
|
11
|
+
import * as i0 from "@angular/core";
|
|
12
|
+
import * as i1 from "@angular/forms";
|
|
13
|
+
import * as i2 from "@ngx-translate/core";
|
|
14
|
+
export class SpxFormViewComponent {
|
|
15
|
+
setAutofocus(key) {
|
|
16
|
+
const field = this.spxInputs.find(input => input.spxName === key);
|
|
17
|
+
if (field) {
|
|
18
|
+
field.setFocusIn();
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
onBlur(field) {
|
|
22
|
+
this.spxBlur.emit({
|
|
23
|
+
field,
|
|
24
|
+
valuePair: this.spxFormGroup.get(field.key).value,
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
onClick(field) {
|
|
28
|
+
this.spxClick.emit({
|
|
29
|
+
field,
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
onAutocompleteCancel() {
|
|
33
|
+
this.autocompleteField = undefined;
|
|
34
|
+
}
|
|
35
|
+
onAutocompleteSearch(valuePair) {
|
|
36
|
+
console.log('spxFormView - onAutocompleteSearch: ', valuePair, this.autocompleteField);
|
|
37
|
+
if (this.autocompleteField) {
|
|
38
|
+
this.spxSearch.emit({
|
|
39
|
+
field: this.autocompleteField,
|
|
40
|
+
valuePair,
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
onAutocompleteSave(valuePair) {
|
|
45
|
+
this.spxFormGroup.get(this.autocompleteField.key)?.setValue(valuePair);
|
|
46
|
+
this.autocompleteField = undefined;
|
|
47
|
+
}
|
|
48
|
+
onSearch(field) {
|
|
49
|
+
this.autocompleteField = field;
|
|
50
|
+
}
|
|
51
|
+
getRawValidators(formControl) {
|
|
52
|
+
// eslint-disable-next-line no-underscore-dangle
|
|
53
|
+
return formControl._rawValidators;
|
|
54
|
+
}
|
|
55
|
+
hasRequiredField(abstractControl) {
|
|
56
|
+
if (abstractControl.validator) {
|
|
57
|
+
const validator = abstractControl.validator({});
|
|
58
|
+
if (validator && validator['required']) {
|
|
59
|
+
return true;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
if (abstractControl['controls']) {
|
|
63
|
+
for (const controlName in abstractControl['controls']) {
|
|
64
|
+
if (abstractControl['controls'][controlName]) {
|
|
65
|
+
if (this.hasRequiredField(abstractControl['controls'][controlName])) {
|
|
66
|
+
return true;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
return false;
|
|
72
|
+
}
|
|
73
|
+
static initialFormValue(sections) {
|
|
74
|
+
const formObject = {};
|
|
75
|
+
sections.forEach(section => {
|
|
76
|
+
section.fields.forEach(field => {
|
|
77
|
+
formObject[field.key] = [field.defaultValue ? field.defaultValue() : null, field.validators ? [...field.validators()] : []];
|
|
78
|
+
});
|
|
79
|
+
});
|
|
80
|
+
return formObject;
|
|
81
|
+
}
|
|
82
|
+
static createForm(formBuilder, sections) {
|
|
83
|
+
return formBuilder.group(this.initialFormValue(sections));
|
|
84
|
+
}
|
|
85
|
+
constructor(formBuilder) {
|
|
86
|
+
this.formBuilder = formBuilder;
|
|
87
|
+
this.spxBlur = new EventEmitter();
|
|
88
|
+
this.spxClick = new EventEmitter();
|
|
89
|
+
this.spxSearch = new EventEmitter();
|
|
90
|
+
this.typeAutocomplete = SpxInputTypeEnum.autocomplete;
|
|
91
|
+
this.typeButton = SpxInputTypeEnum.button;
|
|
92
|
+
this.typeFloat = SpxInputTypeEnum.float;
|
|
93
|
+
this.typeNumber = SpxInputTypeEnum.number;
|
|
94
|
+
this.typeRadio = SpxInputTypeEnum.radio;
|
|
95
|
+
this.typeText = SpxInputTypeEnum.text;
|
|
96
|
+
this.typeNumericKeyboard = SpxInputTypeEnum.textNumericKeyboard;
|
|
97
|
+
this.typeOverlay = SpxInputTypeEnum.overlay;
|
|
98
|
+
this.typeOverlayNumber = SpxInputTypeEnum.overlayNumber;
|
|
99
|
+
}
|
|
100
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxFormViewComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
101
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxFormViewComponent, isStandalone: true, selector: "spx-form-view", inputs: { spxFormGroup: "spxFormGroup", spxSections: "spxSections", spxSuggestions: "spxSuggestions" }, outputs: { spxBlur: "spxBlur", spxClick: "spxClick", spxSearch: "spxSearch" }, viewQueries: [{ propertyName: "spxInputs", predicate: SpxInputComponent, descendants: true }], ngImport: i0, template: `<spx-autocomplete-search
|
|
102
|
+
*ngIf="autocompleteField"
|
|
103
|
+
[spxField]="autocompleteField"
|
|
104
|
+
[spxSuggestions]="this.spxSuggestions[autocompleteField.key]"
|
|
105
|
+
[spxValuePair]="$any(this.spxFormGroup.get(autocompleteField.key)).value"
|
|
106
|
+
[txtOptions]="'Options'"
|
|
107
|
+
[txtQuery]="'Query'"
|
|
108
|
+
[txtSubmit]="'Save'"
|
|
109
|
+
(spxCancel)="onAutocompleteCancel()"
|
|
110
|
+
(spxSearch)="onAutocompleteSearch($event)"
|
|
111
|
+
(spxSubmit)="onAutocompleteSave($event)">
|
|
112
|
+
</spx-autocomplete-search>
|
|
113
|
+
<spx-form-section
|
|
114
|
+
*ngFor="let spxSection of spxSections; let spxSectionIndex = index;"
|
|
115
|
+
[spxShowTitle]="!spxSection.showTitle || spxSection.showTitle()"
|
|
116
|
+
[spxIndex]="spxSectionIndex + 1"
|
|
117
|
+
[spxTitle]="spxSection.title ? (spxSection.title() | translate | capitalize) : undefined">
|
|
118
|
+
<ng-container *ngFor="let spxField of spxSection.fields; let spxFieldIndex = index;">
|
|
119
|
+
<ng-container *ngIf="spxField.show === undefined || spxField.show()">
|
|
120
|
+
<spx-button *ngIf="spxField.type() === typeButton"
|
|
121
|
+
[spxFullWidth]="true"
|
|
122
|
+
[spxSeverity]="spxField.severity ? spxField.severity() : undefined"
|
|
123
|
+
[spxType]="'button'"
|
|
124
|
+
(spxClick)="onClick(spxField)"
|
|
125
|
+
>{{ (spxField.label ? spxField.label() : spxField.key) | translate | capitalize }}</spx-button>
|
|
126
|
+
|
|
127
|
+
<spx-input
|
|
128
|
+
*ngIf="spxField.type() === typeOverlay || spxField.type() === typeOverlayNumber || spxField.type() === typeFloat || spxField.type() === typeNumber || spxField.type() === typeText || spxField.type() === typeAutocomplete || spxField.type() === typeNumericKeyboard"
|
|
129
|
+
[formControl]="$any(this.spxFormGroup.get(spxField.key))"
|
|
130
|
+
[spxAutofocus]="spxField.autofocus ? spxField.autofocus() : false"
|
|
131
|
+
[spxCapitalize]="spxField.capitalize ? spxField.capitalize() : false"
|
|
132
|
+
[spxLabel]="(spxField.label ? spxField.label() : spxField.key) | translate | capitalize"
|
|
133
|
+
[spxName]="spxField.key"
|
|
134
|
+
[spxPattern]="spxField.type() === typeNumericKeyboard ? '\\d*' : undefined"
|
|
135
|
+
[spxReadonly]="spxField.readonly ? spxField.readonly() : false"
|
|
136
|
+
[spxRequired]="hasRequiredField(this.spxFormGroup.get(spxField.key)!)"
|
|
137
|
+
[spxShowSearch]="spxField.type() === typeAutocomplete"
|
|
138
|
+
[spxShowHelp]="false"
|
|
139
|
+
[spxShowValidationMessages]="this.spxFormGroup.get(spxField.key)! && this.spxFormGroup.get(spxField.key)!.errors && this.spxFormGroup.get(spxField.key)!.touched"
|
|
140
|
+
[spxStep]="spxField.step ? spxField.step() : undefined"
|
|
141
|
+
[spxType]="spxField.type()"
|
|
142
|
+
[spxValidators]="getRawValidators(this.spxFormGroup.get(spxField.key)!)"
|
|
143
|
+
[spxSuggestions]="spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions[spxField.key]"
|
|
144
|
+
(spxBlur)="onBlur(spxField)"
|
|
145
|
+
(spxSearch)="onSearch(spxField)">
|
|
146
|
+
<spx-validate-control [control]="$any(this.spxFormGroup.get(spxField.key))" [label]="(spxField.label ? spxField.label() : spxField.key)| translate | capitalize"></spx-validate-control>
|
|
147
|
+
</spx-input>
|
|
148
|
+
|
|
149
|
+
<spx-input
|
|
150
|
+
*ngIf="spxField.type() === typeRadio"
|
|
151
|
+
[formControl]="$any(this.spxFormGroup.get(spxField.key))"
|
|
152
|
+
[spxLabel]="(spxField.label ? spxField.label() : spxField.key) | translate | capitalize"
|
|
153
|
+
[spxName]="spxField.key"
|
|
154
|
+
[spxReadonly]="spxField.readonly ? spxField.readonly() : false"
|
|
155
|
+
[spxRequired]="hasRequiredField(this.spxFormGroup.get(spxField.key)!)"
|
|
156
|
+
[spxShowHelp]="false"
|
|
157
|
+
[spxShowValidationMessages]="this.spxFormGroup.get(spxField.key)! && this.spxFormGroup.get(spxField.key)!.errors && this.spxFormGroup.get(spxField.key)!.touched"
|
|
158
|
+
[spxSuggestions]="spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions[spxField.key]"
|
|
159
|
+
[spxType]="typeRadio"
|
|
160
|
+
[spxValidators]="getRawValidators(this.spxFormGroup.get(spxField.key)!)">
|
|
161
|
+
<spx-validate-control [control]="$any(this.spxFormGroup.get(spxField.key))" [label]="(spxField.label ? spxField.label() : spxField.key) | translate | capitalize"></spx-validate-control>
|
|
162
|
+
</spx-input>
|
|
163
|
+
</ng-container>
|
|
164
|
+
</ng-container>
|
|
165
|
+
</spx-form-section>`, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SpxAutocompleteSearchComponent, selector: "spx-autocomplete-search", inputs: ["spxSuggestions", "spxField", "txtOptions", "txtQuery", "txtSubmit", "spxValuePair"], outputs: ["spxCancel", "spxSearch", "spxSubmit"] }, { kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }, { kind: "pipe", type: SpxCapitalizePipe, name: "capitalize" }, { kind: "component", type: SpxFormSectionComponent, selector: "spx-form-section", inputs: ["spxIndex", "spxIndexSecondary", "spxTitle", "spxShowTitle"] }, { kind: "component", type: SpxInputComponent, selector: "spx-input", inputs: ["spxLabel", "spxMax", "spxMin", "spxName", "spxReadonly", "spxAutofocus", "spxInputMode", "spxPattern", "spxRequired", "spxSelectMonth", "spxSelectDay", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxCompact", "spxShowClear", "spxShowSearch", "spxShowValidationMessages", "spxStep", "spxSuggestions", "spxType", "spxValidators", "value", "spxCapitalize", "spxFocused"], outputs: ["spxBlur", "spxClear", "spxChange", "spxFocus", "spxEdit", "spxHelp", "spxSearch"] }, { kind: "component", type: SpxValidateControlComponent, selector: "spx-validate-control", inputs: ["control", "label", "submitTried"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
|
|
166
|
+
}
|
|
167
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxFormViewComponent, decorators: [{
|
|
168
|
+
type: Component,
|
|
169
|
+
args: [{
|
|
170
|
+
selector: 'spx-form-view',
|
|
171
|
+
standalone: true,
|
|
172
|
+
imports: [
|
|
173
|
+
FormsModule,
|
|
174
|
+
ReactiveFormsModule,
|
|
175
|
+
JsonPipe,
|
|
176
|
+
NgIf,
|
|
177
|
+
NgFor,
|
|
178
|
+
SpxAutocompleteSearchComponent,
|
|
179
|
+
SpxButtonComponent,
|
|
180
|
+
SpxCapitalizePipe,
|
|
181
|
+
SpxFormSectionComponent,
|
|
182
|
+
SpxInputComponent,
|
|
183
|
+
SpxValidateControlComponent,
|
|
184
|
+
TranslateModule,
|
|
185
|
+
],
|
|
186
|
+
template: `<spx-autocomplete-search
|
|
187
|
+
*ngIf="autocompleteField"
|
|
188
|
+
[spxField]="autocompleteField"
|
|
189
|
+
[spxSuggestions]="this.spxSuggestions[autocompleteField.key]"
|
|
190
|
+
[spxValuePair]="$any(this.spxFormGroup.get(autocompleteField.key)).value"
|
|
191
|
+
[txtOptions]="'Options'"
|
|
192
|
+
[txtQuery]="'Query'"
|
|
193
|
+
[txtSubmit]="'Save'"
|
|
194
|
+
(spxCancel)="onAutocompleteCancel()"
|
|
195
|
+
(spxSearch)="onAutocompleteSearch($event)"
|
|
196
|
+
(spxSubmit)="onAutocompleteSave($event)">
|
|
197
|
+
</spx-autocomplete-search>
|
|
198
|
+
<spx-form-section
|
|
199
|
+
*ngFor="let spxSection of spxSections; let spxSectionIndex = index;"
|
|
200
|
+
[spxShowTitle]="!spxSection.showTitle || spxSection.showTitle()"
|
|
201
|
+
[spxIndex]="spxSectionIndex + 1"
|
|
202
|
+
[spxTitle]="spxSection.title ? (spxSection.title() | translate | capitalize) : undefined">
|
|
203
|
+
<ng-container *ngFor="let spxField of spxSection.fields; let spxFieldIndex = index;">
|
|
204
|
+
<ng-container *ngIf="spxField.show === undefined || spxField.show()">
|
|
205
|
+
<spx-button *ngIf="spxField.type() === typeButton"
|
|
206
|
+
[spxFullWidth]="true"
|
|
207
|
+
[spxSeverity]="spxField.severity ? spxField.severity() : undefined"
|
|
208
|
+
[spxType]="'button'"
|
|
209
|
+
(spxClick)="onClick(spxField)"
|
|
210
|
+
>{{ (spxField.label ? spxField.label() : spxField.key) | translate | capitalize }}</spx-button>
|
|
211
|
+
|
|
212
|
+
<spx-input
|
|
213
|
+
*ngIf="spxField.type() === typeOverlay || spxField.type() === typeOverlayNumber || spxField.type() === typeFloat || spxField.type() === typeNumber || spxField.type() === typeText || spxField.type() === typeAutocomplete || spxField.type() === typeNumericKeyboard"
|
|
214
|
+
[formControl]="$any(this.spxFormGroup.get(spxField.key))"
|
|
215
|
+
[spxAutofocus]="spxField.autofocus ? spxField.autofocus() : false"
|
|
216
|
+
[spxCapitalize]="spxField.capitalize ? spxField.capitalize() : false"
|
|
217
|
+
[spxLabel]="(spxField.label ? spxField.label() : spxField.key) | translate | capitalize"
|
|
218
|
+
[spxName]="spxField.key"
|
|
219
|
+
[spxPattern]="spxField.type() === typeNumericKeyboard ? '\\d*' : undefined"
|
|
220
|
+
[spxReadonly]="spxField.readonly ? spxField.readonly() : false"
|
|
221
|
+
[spxRequired]="hasRequiredField(this.spxFormGroup.get(spxField.key)!)"
|
|
222
|
+
[spxShowSearch]="spxField.type() === typeAutocomplete"
|
|
223
|
+
[spxShowHelp]="false"
|
|
224
|
+
[spxShowValidationMessages]="this.spxFormGroup.get(spxField.key)! && this.spxFormGroup.get(spxField.key)!.errors && this.spxFormGroup.get(spxField.key)!.touched"
|
|
225
|
+
[spxStep]="spxField.step ? spxField.step() : undefined"
|
|
226
|
+
[spxType]="spxField.type()"
|
|
227
|
+
[spxValidators]="getRawValidators(this.spxFormGroup.get(spxField.key)!)"
|
|
228
|
+
[spxSuggestions]="spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions[spxField.key]"
|
|
229
|
+
(spxBlur)="onBlur(spxField)"
|
|
230
|
+
(spxSearch)="onSearch(spxField)">
|
|
231
|
+
<spx-validate-control [control]="$any(this.spxFormGroup.get(spxField.key))" [label]="(spxField.label ? spxField.label() : spxField.key)| translate | capitalize"></spx-validate-control>
|
|
232
|
+
</spx-input>
|
|
233
|
+
|
|
234
|
+
<spx-input
|
|
235
|
+
*ngIf="spxField.type() === typeRadio"
|
|
236
|
+
[formControl]="$any(this.spxFormGroup.get(spxField.key))"
|
|
237
|
+
[spxLabel]="(spxField.label ? spxField.label() : spxField.key) | translate | capitalize"
|
|
238
|
+
[spxName]="spxField.key"
|
|
239
|
+
[spxReadonly]="spxField.readonly ? spxField.readonly() : false"
|
|
240
|
+
[spxRequired]="hasRequiredField(this.spxFormGroup.get(spxField.key)!)"
|
|
241
|
+
[spxShowHelp]="false"
|
|
242
|
+
[spxShowValidationMessages]="this.spxFormGroup.get(spxField.key)! && this.spxFormGroup.get(spxField.key)!.errors && this.spxFormGroup.get(spxField.key)!.touched"
|
|
243
|
+
[spxSuggestions]="spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions[spxField.key]"
|
|
244
|
+
[spxType]="typeRadio"
|
|
245
|
+
[spxValidators]="getRawValidators(this.spxFormGroup.get(spxField.key)!)">
|
|
246
|
+
<spx-validate-control [control]="$any(this.spxFormGroup.get(spxField.key))" [label]="(spxField.label ? spxField.label() : spxField.key) | translate | capitalize"></spx-validate-control>
|
|
247
|
+
</spx-input>
|
|
248
|
+
</ng-container>
|
|
249
|
+
</ng-container>
|
|
250
|
+
</spx-form-section>`,
|
|
251
|
+
}]
|
|
252
|
+
}], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { spxFormGroup: [{
|
|
253
|
+
type: Input
|
|
254
|
+
}], spxSections: [{
|
|
255
|
+
type: Input
|
|
256
|
+
}], spxSuggestions: [{
|
|
257
|
+
type: Input
|
|
258
|
+
}], spxBlur: [{
|
|
259
|
+
type: Output
|
|
260
|
+
}], spxClick: [{
|
|
261
|
+
type: Output
|
|
262
|
+
}], spxSearch: [{
|
|
263
|
+
type: Output
|
|
264
|
+
}], spxInputs: [{
|
|
265
|
+
type: ViewChildren,
|
|
266
|
+
args: [SpxInputComponent]
|
|
267
|
+
}] } });
|
|
268
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3B4LWZvcm0tdmlldy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zb2Z0cGFrL2NvbXBvbmVudHMvc3B4LWZvcm0tdmlldy9zcHgtZm9ybS12aWV3LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUN4RCxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUF3QixZQUFZLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFM0csT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sc0NBQXNDLENBQUM7QUFDL0UsT0FBTyxFQUFFLGlCQUFpQixFQUFFLGdCQUFnQixFQUFnQixNQUFNLGdDQUFnQyxDQUFDO0FBQ25HLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLG9DQUFvQyxDQUFDO0FBQ3ZFLE9BQU8sRUFBMkMsV0FBVyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFFM0csT0FBTyxFQUFFLDhCQUE4QixFQUFFLE1BQU0scUNBQXFDLENBQUM7QUFDckYsT0FBTyxFQUFFLDJCQUEyQixFQUFFLE1BQU0sb0NBQW9DLENBQUM7QUFDakYsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBQ3RELE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLGdDQUFnQyxDQUFDOzs7O0FBcUZwRSxNQUFNLE9BQU8sb0JBQW9CO0lBb0IvQixZQUFZLENBQUMsR0FBVztRQUN0QixNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLEtBQUssQ0FBQyxPQUFPLEtBQUssR0FBRyxDQUFDLENBQUM7UUFDbEUsSUFBSSxLQUFLLEVBQUUsQ0FBQztZQUNWLEtB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RWxCLFdBQVcsc0lBQ1gsbUJBQW1CLGtOQUVuQixJQUFJLDZGQUNKLEtBQUssbUhBQ0wsOEJBQThCLHFOQUM5QixrQkFBa0IsZ09BQ2xCLGlCQUFpQixtREFDakIsdUJBQXVCLG9JQUN2QixpQkFBaUIsa2hCQUNqQiwyQkFBMkIsNkdBQzNCLGVBQWU7OzJGQW9FTixvQkFBb0I7a0JBbkZoQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxlQUFlO29CQUN6QixVQUFVLEVBQUUsSUFBSTtvQkFDaEIsT0FBTyxFQUFFO3dCQUNQLFdBQVc7d0JBQ1gsbUJBQW1CO3dCQUNuQixRQUFRO3dCQUNSLElBQUk7d0JBQ0osS0FBSzt3QkFDTCw4QkFBOEI7d0JBQzlCLGtCQUFrQjt3QkFDbEIsaUJBQWlCO3dCQUNqQix1QkFBdUI7d0JBQ3ZCLGlCQUFpQjt3QkFDakIsMkJBQTJCO3dCQUMzQixlQUFlO3FCQUNoQjtvQkFDRCxRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7c0JBZ0VVO2lCQUNyQjtnRkFFVSxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csY0FBYztzQkFBdEIsS0FBSztnQkFDSSxPQUFPO3NCQUFoQixNQUFNO2dCQUNHLFFBQVE7c0JBQWpCLE1BQU07Z0JBQ0csU0FBUztzQkFBbEIsTUFBTTtnQkFDMEIsU0FBUztzQkFBekMsWUFBWTt1QkFBQyxpQkFBaUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBKc29uUGlwZSwgTmdGb3IsIE5nSWYgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQsIFF1ZXJ5TGlzdCwgVmlld0NoaWxkLCBWaWV3Q2hpbGRyZW4gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFNweEZvcm1TZWN0aW9uSSB9IGZyb20gJy4vc3B4LWZvcm0tc2VjdGlvbi5pbnRlcmZhY2UnO1xuaW1wb3J0IHsgU3B4Rm9ybVNlY3Rpb25Db21wb25lbnQgfSBmcm9tICdAc29mdHBhay9jb21wb25lbnRzL3NweC1mb3JtLXNlY3Rpb24nO1xuaW1wb3J0IHsgU3B4SW5wdXRDb21wb25lbnQsIFNweElucHV0VHlwZUVudW0sIFNweFZhbHVlUGFpciB9IGZyb20gJ0Bzb2Z0cGFrL2NvbXBvbmVudHMvc3B4LWlucHV0cyc7XG5pbXBvcnQgeyBTcHhDYXBpdGFsaXplUGlwZSB9IGZyb20gJ0Bzb2Z0cGFrL2NvbXBvbmVudHMvc3B4LWNhcGl0YWxpemUnO1xuaW1wb3J0IHsgQWJzdHJhY3RDb250cm9sLCBGb3JtQnVpbGRlciwgRm9ybUdyb3VwLCBGb3Jtc01vZHVsZSwgUmVhY3RpdmVGb3Jtc01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IFNweEZvcm1GaWVsZEkgfSBmcm9tICcuL3NweC1mb3JtLWZpZWxkLmludGVyZmFjZSc7XG5pbXBvcnQgeyBTcHhBdXRvY29tcGxldGVTZWFyY2hDb21wb25lbnQgfSBmcm9tICcuL3NweC1hdXRvY29tcGxldGUtc2VhcmNoLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBTcHhWYWxpZGF0ZUNvbnRyb2xDb21wb25lbnQgfSBmcm9tICdAc29mdHBhay9jb21wb25lbnRzL3NweC12YWxpZGF0aW9uJztcbmltcG9ydCB7IFRyYW5zbGF0ZU1vZHVsZSB9IGZyb20gJ0BuZ3gtdHJhbnNsYXRlL2NvcmUnO1xuaW1wb3J0IHsgU3B4QnV0dG9uQ29tcG9uZW50IH0gZnJvbSAnQHNvZnRwYWsvY29tcG9uZW50cy9zcHgtYnV0dG9uJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc3B4LWZvcm0tdmlldycsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtcbiAgICBGb3Jtc01vZHVsZSxcbiAgICBSZWFjdGl2ZUZvcm1zTW9kdWxlLFxuICAgIEpzb25QaXBlLFxuICAgIE5nSWYsXG4gICAgTmdGb3IsXG4gICAgU3B4QXV0b2NvbXBsZXRlU2VhcmNoQ29tcG9uZW50LFxuICAgIFNweEJ1dHRvbkNvbXBvbmVudCxcbiAgICBTcHhDYXBpdGFsaXplUGlwZSxcbiAgICBTcHhGb3JtU2VjdGlvbkNvbXBvbmVudCxcbiAgICBTcHhJbnB1dENvbXBvbmVudCxcbiAgICBTcHhWYWxpZGF0ZUNvbnRyb2xDb21wb25lbnQsXG4gICAgVHJhbnNsYXRlTW9kdWxlLFxuICBdLFxuICB0ZW1wbGF0ZTogYDxzcHgtYXV0b2NvbXBsZXRlLXNlYXJjaFxuICAgICpuZ0lmPVwiYXV0b2NvbXBsZXRlRmllbGRcIlxuICAgIFtzcHhGaWVsZF09XCJhdXRvY29tcGxldGVGaWVsZFwiXG4gICAgW3NweFN1Z2dlc3Rpb25zXT1cInRoaXMuc3B4U3VnZ2VzdGlvbnNbYXV0b2NvbXBsZXRlRmllbGQua2V5XVwiXG4gICAgW3NweFZhbHVlUGFpcl09XCIkYW55KHRoaXMuc3B4Rm9ybUdyb3VwLmdldChhdXRvY29tcGxldGVGaWVsZC5rZXkpKS52YWx1ZVwiXG4gICAgW3R4dE9wdGlvbnNdPVwiJ09wdGlvbnMnXCJcbiAgICBbdHh0UXVlcnldPVwiJ1F1ZXJ5J1wiXG4gICAgW3R4dFN1Ym1pdF09XCInU2F2ZSdcIlxuICAgIChzcHhDYW5jZWwpPVwib25BdXRvY29tcGxldGVDYW5jZWwoKVwiXG4gICAgKHNweFNlYXJjaCk9XCJvbkF1dG9jb21wbGV0ZVNlYXJjaCgkZXZlbnQpXCJcbiAgICAoc3B4U3VibWl0KT1cIm9uQXV0b2NvbXBsZXRlU2F2ZSgkZXZlbnQpXCI+XG4gIDwvc3B4LWF1dG9jb21wbGV0ZS1zZWFyY2g+XG4gICAgPHNweC1mb3JtLXNlY3Rpb25cbiAgICAqbmdGb3I9XCJsZXQgc3B4U2VjdGlvbiBvZiBzcHhTZWN0aW9uczsgbGV0IHNweFNlY3Rpb25JbmRleCA9IGluZGV4O1wiXG4gICAgW3NweFNob3dUaXRsZV09XCIhc3B4U2VjdGlvbi5zaG93VGl0bGUgfHwgc3B4U2VjdGlvbi5zaG93VGl0bGUoKVwiXG4gICAgW3NweEluZGV4XT1cInNweFNlY3Rpb25JbmRleCArIDFcIlxuICAgIFtzcHhUaXRsZV09XCJzcHhTZWN0aW9uLnRpdGxlID8gKHNweFNlY3Rpb24udGl0bGUoKSB8IHRyYW5zbGF0ZSB8IGNhcGl0YWxpemUpIDogdW5kZWZpbmVkXCI+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgc3B4RmllbGQgb2Ygc3B4U2VjdGlvbi5maWVsZHM7IGxldCBzcHhGaWVsZEluZGV4ID0gaW5kZXg7XCI+XG4gICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwic3B4RmllbGQuc2hvdyA9PT0gdW5kZWZpbmVkIHx8IHNweEZpZWxkLnNob3coKVwiPlxuICAgICAgICA8c3B4LWJ1dHRvbiAqbmdJZj1cInNweEZpZWxkLnR5cGUoKSA9PT0gdHlwZUJ1dHRvblwiXG4gICAgICAgICAgW3NweEZ1bGxXaWR0aF09XCJ0cnVlXCJcbiAgICAgICAgICBbc3B4U2V2ZXJpdHldPVwic3B4RmllbGQuc2V2ZXJpdHkgPyBzcHhGaWVsZC5zZXZlcml0eSgpIDogdW5kZWZpbmVkXCJcbiAgICAgICAgICBbc3B4VHlwZV09XCInYnV0dG9uJ1wiXG4gICAgICAgICAgKHNweENsaWNrKT1cIm9uQ2xpY2soc3B4RmllbGQpXCJcbiAgICAgICAgICA+e3sgKHNweEZpZWxkLmxhYmVsID8gc3B4RmllbGQubGFiZWwoKSA6IHNweEZpZWxkLmtleSkgfCB0cmFuc2xhdGUgIHwgY2FwaXRhbGl6ZSB9fTwvc3B4LWJ1dHRvbj5cblxuICAgICAgICA8c3B4LWlucHV0XG4gICAgICAgICAgKm5nSWY9XCJzcHhGaWVsZC50eXBlKCkgPT09IHR5cGVPdmVybGF5IHx8IHNweEZpZWxkLnR5cGUoKSA9PT0gdHlwZU92ZXJsYXlOdW1iZXIgfHwgc3B4RmllbGQudHlwZSgpID09PSB0eXBlRmxvYXQgfHwgc3B4RmllbGQudHlwZSgpID09PSB0eXBlTnVtYmVyIHx8IHNweEZpZWxkLnR5cGUoKSA9PT0gdHlwZVRleHQgfHwgc3B4RmllbGQudHlwZSgpID09PSB0eXBlQXV0b2NvbXBsZXRlIHx8IHNweEZpZWxkLnR5cGUoKSA9PT0gdHlwZU51bWVyaWNLZXlib2FyZFwiXG4gICAgICAgICAgW2Zvcm1Db250cm9sXT1cIiRhbnkodGhpcy5zcHhGb3JtR3JvdXAuZ2V0KHNweEZpZWxkLmtleSkpXCJcbiAgICAgICAgICBbc3B4QXV0b2ZvY3VzXT1cInNweEZpZWxkLmF1dG9mb2N1cyA/IHNweEZpZWxkLmF1dG9mb2N1cygpIDogZmFsc2VcIlxuICAgICAgICAgIFtzcHhDYXBpdGFsaXplXT1cInNweEZpZWxkLmNhcGl0YWxpemUgPyBzcHhGaWVsZC5jYXBpdGFsaXplKCkgOiBmYWxzZVwiXG4gICAgICAgICAgW3NweExhYmVsXT1cIihzcHhGaWVsZC5sYWJlbCA/IHNweEZpZWxkLmxhYmVsKCkgOiBzcHhGaWVsZC5rZXkpIHwgdHJhbnNsYXRlICB8IGNhcGl0YWxpemVcIlxuICAgICAgICAgIFtzcHhOYW1lXT1cInNweEZpZWxkLmtleVwiXG4gICAgICAgICAgW3NweFBhdHRlcm5dPVwic3B4RmllbGQudHlwZSgpID09PSB0eXBlTnVtZXJpY0tleWJvYXJkID8gJ1xcXFxkKicgOiB1bmRlZmluZWRcIlxuICAgICAgICAgIFtzcHhSZWFkb25seV09XCJzcHhGaWVsZC5yZWFkb25seSA/IHNweEZpZWxkLnJlYWRvbmx5KCkgOiBmYWxzZVwiXG4gICAgICAgICAgW3NweFJlcXVpcmVkXT1cImhhc1JlcXVpcmVkRmllbGQodGhpcy5zcHhGb3JtR3JvdXAuZ2V0KHNweEZpZWxkLmtleSkhKVwiXG4gICAgICAgICAgW3NweFNob3dTZWFyY2hdPVwic3B4RmllbGQudHlwZSgpID09PSB0eXBlQXV0b2NvbXBsZXRlXCJcbiAgICAgICAgICBbc3B4U2hvd0hlbHBdPVwiZmFsc2VcIlxuICAgICAgICAgIFtzcHhTaG93VmFsaWRhdGlvbk1lc3NhZ2VzXT1cInRoaXMuc3B4Rm9ybUdyb3VwLmdldChzcHhGaWVsZC5rZXkpISAmJiB0aGlzLnNweEZvcm1Hcm91cC5nZXQoc3B4RmllbGQua2V5KSEuZXJyb3JzICYmIHRoaXMuc3B4Rm9ybUdyb3VwLmdldChzcHhGaWVsZC5rZXkpIS50b3VjaGVkXCJcbiAgICAgICAgICBbc3B4U3RlcF09XCJzcHhGaWVsZC5zdGVwID8gc3B4RmllbGQuc3RlcCgpIDogdW5kZWZpbmVkXCJcbiAgICAgICAgICBbc3B4VHlwZV09XCJzcHhGaWVsZC50eXBlKClcIlxuICAgICAgICAgIFtzcHhWYWxpZGF0b3JzXT1cImdldFJhd1ZhbGlkYXRvcnModGhpcy5zcHhGb3JtR3JvdXAuZ2V0KHNweEZpZWxkLmtleSkhKVwiXG4gICAgICAgICAgW3NweFN1Z2dlc3Rpb25zXT1cInNweEZpZWxkLnN1Z2dlc3Rpb25zRml4ZWQgPyBzcHhGaWVsZC5zdWdnZXN0aW9uc0ZpeGVkKCkgOiB0aGlzLnNweFN1Z2dlc3Rpb25zW3NweEZpZWxkLmtleV1cIlxuICAgICAgICAgIChzcHhCbHVyKT1cIm9uQmx1cihzcHhGaWVsZClcIlxuICAgICAgICAgIChzcHhTZWFyY2gpPVwib25TZWFyY2goc3B4RmllbGQpXCI+XG4gICAgICAgICAgPHNweC12YWxpZGF0ZS1jb250cm9sIFtjb250cm9sXT1cIiRhbnkodGhpcy5zcHhGb3JtR3JvdXAuZ2V0KHNweEZpZWxkLmtleSkpXCIgW2xhYmVsXT1cIihzcHhGaWVsZC5sYWJlbCA/IHNweEZpZWxkLmxhYmVsKCkgOiBzcHhGaWVsZC5rZXkpfCB0cmFuc2xhdGUgIHwgY2FwaXRhbGl6ZVwiPjwvc3B4LXZhbGlkYXRlLWNvbnRyb2w+XG4gICAgICAgIDwvc3B4LWlucHV0PlxuXG4gICAgICAgIDxzcHgtaW5wdXRcbiAgICAgICAgICAqbmdJZj1cInNweEZpZWxkLnR5cGUoKSA9PT0gdHlwZVJhZGlvXCJcbiAgICAgICAgICBbZm9ybUNvbnRyb2xdPVwiJGFueSh0aGlzLnNweEZvcm1Hcm91cC5nZXQoc3B4RmllbGQua2V5KSlcIlxuICAgICAgICAgIFtzcHhMYWJlbF09XCIoc3B4RmllbGQubGFiZWwgPyBzcHhGaWVsZC5sYWJlbCgpIDogc3B4RmllbGQua2V5KSB8IHRyYW5zbGF0ZSAgfCBjYXBpdGFsaXplXCJcbiAgICAgICAgICBbc3B4TmFtZV09XCJzcHhGaWVsZC5rZXlcIlxuICAgICAgICAgIFtzcHhSZWFkb25seV09XCJzcHhGaWVsZC5yZWFkb25seSA/IHNweEZpZWxkLnJlYWRvbmx5KCkgOiBmYWxzZVwiXG4gICAgICAgICAgW3NweFJlcXVpcmVkXT1cImhhc1JlcXVpcmVkRmllbGQodGhpcy5zcHhGb3JtR3JvdXAuZ2V0KHNweEZpZWxkLmtleSkhKVwiXG4gICAgICAgICAgW3NweFNob3dIZWxwXT1cImZhbHNlXCJcbiAgICAgICAgICBbc3B4U2hvd1ZhbGlkYXRpb25NZXNzYWdlc109XCJ0aGlzLnNweEZvcm1Hcm91cC5nZXQoc3B4RmllbGQua2V5KSEgJiYgdGhpcy5zcHhGb3JtR3JvdXAuZ2V0KHNweEZpZWxkLmtleSkhLmVycm9ycyAmJiB0aGlzLnNweEZvcm1Hcm91cC5nZXQoc3B4RmllbGQua2V5KSEudG91Y2hlZFwiXG4gICAgICAgICAgW3NweFN1Z2dlc3Rpb25zXT1cInNweEZpZWxkLnN1Z2dlc3Rpb25zRml4ZWQgPyBzcHhGaWVsZC5zdWdnZXN0aW9uc0ZpeGVkKCkgOiB0aGlzLnNweFN1Z2dlc3Rpb25zW3NweEZpZWxkLmtleV1cIlxuICAgICAgICAgIFtzcHhUeXBlXT1cInR5cGVSYWRpb1wiXG4gICAgICAgICAgW3NweFZhbGlkYXRvcnNdPVwiZ2V0UmF3VmFsaWRhdG9ycyh0aGlzLnNweEZvcm1Hcm91cC5nZXQoc3B4RmllbGQua2V5KSEpXCI+XG4gICAgICAgICAgPHNweC12YWxpZGF0ZS1jb250cm9sIFtjb250cm9sXT1cIiRhbnkodGhpcy5zcHhGb3JtR3JvdXAuZ2V0KHNweEZpZWxkLmtleSkpXCIgW2xhYmVsXT1cIihzcHhGaWVsZC5sYWJlbCA/IHNweEZpZWxkLmxhYmVsKCkgOiBzcHhGaWVsZC5rZXkpIHwgdHJhbnNsYXRlIHwgY2FwaXRhbGl6ZVwiPjwvc3B4LXZhbGlkYXRlLWNvbnRyb2w+XG4gICAgICAgIDwvc3B4LWlucHV0PlxuICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgPC9uZy1jb250YWluZXI+XG4gIDwvc3B4LWZvcm0tc2VjdGlvbj5gLFxufSlcbmV4cG9ydCBjbGFzcyBTcHhGb3JtVmlld0NvbXBvbmVudCB7XG4gIEBJbnB1dCgpIHNweEZvcm1Hcm91cCE6IEZvcm1Hcm91cDtcbiAgQElucHV0KCkgc3B4U2VjdGlvbnMhOiBTcHhGb3JtU2VjdGlvbklbXTtcbiAgQElucHV0KCkgc3B4U3VnZ2VzdGlvbnMhOiBhbnk7XG4gIEBPdXRwdXQoKSBzcHhCbHVyOiBFdmVudEVtaXR0ZXI8eyBmaWVsZDogU3B4Rm9ybUZpZWxkSSwgdmFsdWVQYWlyOiBTcHhWYWx1ZVBhaXI8YW55PiB9PiA9IG5ldyBFdmVudEVtaXR0ZXI8eyBmaWVsZDogU3B4Rm9ybUZpZWxkSSwgdmFsdWVQYWlyOiBTcHhWYWx1ZVBhaXI8YW55PiB9PigpO1xuICBAT3V0cHV0KCkgc3B4Q2xpY2s6IEV2ZW50RW1pdHRlcjx7IGZpZWxkOiBTcHhGb3JtRmllbGRJIH0+ID0gbmV3IEV2ZW50RW1pdHRlcjx7IGZpZWxkOiBTcHhGb3JtRmllbGRJIH0+KCk7XG4gIEBPdXRwdXQoKSBzcHhTZWFyY2g6IEV2ZW50RW1pdHRlcjx7IGZpZWxkOiBTcHhGb3JtRmllbGRJLCB2YWx1ZVBhaXI6IFNweFZhbHVlUGFpcjxhbnk+IH0+ID0gbmV3IEV2ZW50RW1pdHRlcjx7IGZpZWxkOiBTcHhGb3JtRmllbGRJLCB2YWx1ZVBhaXI6IFNweFZhbHVlUGFpcjxhbnk+IH0+KCk7XG4gIEBWaWV3Q2hpbGRyZW4oU3B4SW5wdXRDb21wb25lbnQpIHNweElucHV0cyE6IFF1ZXJ5TGlzdDxTcHhJbnB1dENvbXBvbmVudD47XG4gIGF1dG9jb21wbGV0ZUZpZWxkPzogU3B4Rm9ybUZpZWxkSTtcblxuICB0eXBlQXV0b2NvbXBsZXRlID0gU3B4SW5wdXRUeXBlRW51bS5hdXRvY29tcGxldGU7XG4gIHR5cGVCdXR0b24gPSBTcHhJbnB1dFR5cGVFbnVtLmJ1dHRvbjtcbiAgdHlwZUZsb2F0ID0gU3B4SW5wdXRUeXBlRW51bS5mbG9hdDtcbiAgdHlwZU51bWJlciA9IFNweElucHV0VHlwZUVudW0ubnVtYmVyO1xuICB0eXBlUmFkaW8gPSBTcHhJbnB1dFR5cGVFbnVtLnJhZGlvO1xuICB0eXBlVGV4dCA9IFNweElucHV0VHlwZUVudW0udGV4dDtcbiAgdHlwZU51bWVyaWNLZXlib2FyZCA9IFNweElucHV0VHlwZUVudW0udGV4dE51bWVyaWNLZXlib2FyZDtcbiAgdHlwZU92ZXJsYXkgPSBTcHhJbnB1dFR5cGVFbnVtLm92ZXJsYXk7XG4gIHR5cGVPdmVybGF5TnVtYmVyID0gU3B4SW5wdXRUeXBlRW51bS5vdmVybGF5TnVtYmVyO1xuXG4gIHNldEF1dG9mb2N1cyhrZXk6IHN0cmluZyk6IHZvaWQge1xuICAgIGNvbnN0IGZpZWxkID0gdGhpcy5zcHhJbnB1dHMuZmluZChpbnB1dCA9PiBpbnB1dC5zcHhOYW1lID09PSBrZXkpO1xuICAgIGlmIChmaWVsZCkge1xuICAgICAgZmllbGQuc2V0Rm9jdXNJbigpO1xuICAgIH1cbiAgfVxuXG4gIG9uQmx1cihmaWVsZDogU3B4Rm9ybUZpZWxkSSkge1xuICAgIHRoaXMuc3B4Qmx1ci5lbWl0KHtcbiAgICAgIGZpZWxkLFxuICAgICAgdmFsdWVQYWlyOiB0aGlzLnNweEZvcm1Hcm91cC5nZXQoZmllbGQua2V5KSEudmFsdWUsXG4gICAgfSk7XG4gIH1cblxuICBvbkNsaWNrKGZpZWxkOiBTcHhGb3JtRmllbGRJKSB7XG4gICAgdGhpcy5zcHhDbGljay5lbWl0KHtcbiAgICAgIGZpZWxkLFxuICAgIH0pO1xuICB9XG5cbiAgb25BdXRvY29tcGxldGVDYW5jZWwoKTogdm9pZCB7XG4gICAgdGhpcy5hdXRvY29tcGxldGVGaWVsZCA9IHVuZGVmaW5lZDtcbiAgfVxuXG4gIG9uQXV0b2NvbXBsZXRlU2VhcmNoKHZhbHVlUGFpcjogU3B4VmFsdWVQYWlyPGFueT4pOiB2b2lkIHtcbiAgICBjb25zb2xlLmxvZygnc3B4Rm9ybVZpZXcgLSBvbkF1dG9jb21wbGV0ZVNlYXJjaDogJywgdmFsdWVQYWlyLCB0aGlzLmF1dG9jb21wbGV0ZUZpZWxkKTtcbiAgICBpZiAodGhpcy5hdXRvY29tcGxldGVGaWVsZCkge1xuICAgICAgdGhpcy5zcHhTZWFyY2guZW1pdCh7XG4gICAgICAgIGZpZWxkOiB0aGlzLmF1dG9jb21wbGV0ZUZpZWxkLFxuICAgICAgICB2YWx1ZVBhaXIsXG4gICAgICB9KTtcbiAgICB9XG4gIH1cblxuICBvbkF1dG9jb21wbGV0ZVNhdmUodmFsdWVQYWlyOiBTcHhWYWx1ZVBhaXI8YW55Pikge1xuICAgIHRoaXMuc3B4Rm9ybUdyb3VwLmdldCh0aGlzLmF1dG9jb21wbGV0ZUZpZWxkIS5rZXkpPy5zZXRWYWx1ZSh2YWx1ZVBhaXIpO1xuICAgIHRoaXMuYXV0b2NvbXBsZXRlRmllbGQgPSB1bmRlZmluZWQ7XG4gIH1cblxuICBvblNlYXJjaChmaWVsZDogU3B4Rm9ybUZpZWxkSSkge1xuICAgIHRoaXMuYXV0b2NvbXBsZXRlRmllbGQgPSBmaWVsZDtcbiAgfVxuXG4gIGdldFJhd1ZhbGlkYXRvcnMoZm9ybUNvbnRyb2w6IEFic3RyYWN0Q29udHJvbCkge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBuby11bmRlcnNjb3JlLWRhbmdsZVxuICAgIHJldHVybiAoZm9ybUNvbnRyb2wgYXMgYW55KS5fcmF3VmFsaWRhdG9ycztcbiAgfVxuXG4gIGhhc1JlcXVpcmVkRmllbGQoYWJzdHJhY3RDb250cm9sOiBBYnN0cmFjdENvbnRyb2wpOiBib29sZWFuIHtcbiAgICBpZiAoYWJzdHJhY3RDb250cm9sLnZhbGlkYXRvcikge1xuICAgICAgY29uc3QgdmFsaWRhdG9yID0gYWJzdHJhY3RDb250cm9sLnZhbGlkYXRvcih7fSBhcyBBYnN0cmFjdENvbnRyb2wpO1xuICAgICAgaWYgKHZhbGlkYXRvciAmJiB2YWxpZGF0b3JbJ3JlcXVpcmVkJ10pIHtcbiAgICAgICAgcmV0dXJuIHRydWU7XG4gICAgICB9XG4gICAgfVxuICAgIGlmICgoYWJzdHJhY3RDb250cm9sIGFzIGFueSlbJ2NvbnRyb2xzJ10pIHtcbiAgICAgIGZvciAoY29uc3QgY29udHJvbE5hbWUgaW4gKGFic3RyYWN0Q29udHJvbCBhcyBhbnkpWydjb250cm9scyddKSB7XG4gICAgICAgIGlmICgoYWJzdHJhY3RDb250cm9sIGFzIGFueSlbJ2NvbnRyb2xzJ11bY29udHJvbE5hbWVdKSB7XG4gICAgICAgICAgaWYgKHRoaXMuaGFzUmVxdWlyZWRGaWVsZCgoYWJzdHJhY3RDb250cm9sIGFzIGFueSlbJ2NvbnRyb2xzJ11bY29udHJvbE5hbWVdKSkge1xuICAgICAgICAgICAgcmV0dXJuIHRydWU7XG4gICAgICAgICAgfVxuICAgICAgICB9XG4gICAgICB9XG4gICAgfVxuICAgIHJldHVybiBmYWxzZTtcbiAgfVxuXG4gIHN0YXRpYyBpbml0aWFsRm9ybVZhbHVlKHNlY3Rpb25zOiBTcHhGb3JtU2VjdGlvbklbXSkge1xuICAgIGNvbnN0IGZvcm1PYmplY3Q6IGFueSA9IHt9O1xuICAgIHNlY3Rpb25zLmZvckVhY2goc2VjdGlvbiA9PiB7XG4gICAgICBzZWN0aW9uLmZpZWxkcy5mb3JFYWNoKGZpZWxkID0+IHtcbiAgICAgICAgZm9ybU9iamVjdFtmaWVsZC5rZXldID0gW2ZpZWxkLmRlZmF1bHRWYWx1ZSA/IGZpZWxkLmRlZmF1bHRWYWx1ZSgpIDogbnVsbCwgZmllbGQudmFsaWRhdG9ycyA/IFsuLi5maWVsZC52YWxpZGF0b3JzKCldIDogW11dO1xuICAgICAgfSk7XG4gICAgfSk7XG4gICAgcmV0dXJuIGZvcm1PYmplY3Q7XG4gIH1cblxuICBzdGF0aWMgY3JlYXRlRm9ybShmb3JtQnVpbGRlcjogRm9ybUJ1aWxkZXIsIHNlY3Rpb25zOiBTcHhGb3JtU2VjdGlvbklbXSk6IEZvcm1Hcm91cCB7XG4gICAgcmV0dXJuIGZvcm1CdWlsZGVyLmdyb3VwKHRoaXMuaW5pdGlhbEZvcm1WYWx1ZShzZWN0aW9ucykpO1xuICB9XG5cbiAgY29uc3RydWN0b3IocmVhZG9ubHkgZm9ybUJ1aWxkZXI6IEZvcm1CdWlsZGVyKSB7XG4gIH1cbn1cbiJdfQ==
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import { NgFor, NgIf } from '@angular/common';
|
|
2
|
+
import { Component, EventEmitter, Input, Output } from '@angular/core';
|
|
3
|
+
import { SpxButtonComponent } from '@softpak/components/spx-button';
|
|
4
|
+
import { fromEvent } from 'rxjs';
|
|
5
|
+
import * as i0 from "@angular/core";
|
|
6
|
+
export class SpxDropdownComponent {
|
|
7
|
+
constructor() {
|
|
8
|
+
this.focusPosition = 0;
|
|
9
|
+
this.spxSuggestions = [];
|
|
10
|
+
this.spxSelect = new EventEmitter();
|
|
11
|
+
}
|
|
12
|
+
ngOnInit() {
|
|
13
|
+
this.listenToKeyUp();
|
|
14
|
+
}
|
|
15
|
+
ngOnChanges(changes) {
|
|
16
|
+
this.focusPosition = 0;
|
|
17
|
+
}
|
|
18
|
+
ngOnDestroy() {
|
|
19
|
+
this.subscriptionKeyUp?.unsubscribe();
|
|
20
|
+
}
|
|
21
|
+
handleSuggestionClick(valuePair) {
|
|
22
|
+
this.select(valuePair);
|
|
23
|
+
}
|
|
24
|
+
listenToKeyUp() {
|
|
25
|
+
this.subscriptionKeyUp = fromEvent(window, 'keyup').subscribe((event) => {
|
|
26
|
+
if (event.key === 'ArrowUp' && this.focusPosition > 0) {
|
|
27
|
+
this.focusPosition = this.focusPosition - 1;
|
|
28
|
+
event.preventDefault();
|
|
29
|
+
}
|
|
30
|
+
if (event.key === 'ArrowDown' && this.focusPosition < this.spxSuggestions.length - 1) {
|
|
31
|
+
this.focusPosition = this.focusPosition + 1;
|
|
32
|
+
event.preventDefault();
|
|
33
|
+
}
|
|
34
|
+
if (event.key === 'Enter' && this.spxSuggestions.length > 0) {
|
|
35
|
+
this.select(this.spxSuggestions.at(this.focusPosition));
|
|
36
|
+
event.preventDefault();
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
select(valuePair) {
|
|
41
|
+
this.focusPosition = 0;
|
|
42
|
+
this.spxSelect.emit(valuePair);
|
|
43
|
+
}
|
|
44
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
45
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxDropdownComponent, isStandalone: true, selector: "spx-dropdown", inputs: { spxSuggestions: "spxSuggestions" }, outputs: { spxSelect: "spxSelect" }, usesOnChanges: true, ngImport: i0, template: `<div class="relative text-black">
|
|
46
|
+
<div
|
|
47
|
+
class="absolute bg-gray-100 left-0 right-0 z-20">
|
|
48
|
+
<button
|
|
49
|
+
*ngFor="let valuePair of this.spxSuggestions; let i = index"
|
|
50
|
+
class="text-black block w-full p-2 border border-gray-200 rounded-lg shadow hover:bg-gray-200 flex items-center text-left"
|
|
51
|
+
[class.bg-gray-100]="i === this.focusPosition"
|
|
52
|
+
[class.bg-white]="i !== this.focusPosition"
|
|
53
|
+
(click)="this.handleSuggestionClick(valuePair)"
|
|
54
|
+
[attr.tabindex]="-1"
|
|
55
|
+
[attr.type]="'button'">
|
|
56
|
+
<div class="flex-1 p-1 font-bold text-lg">{{valuePair?.description}}</div>
|
|
57
|
+
<spx-button (spxClick)="this.handleSuggestionClick(valuePair)" [spxType]="'button'" [spxTabIndex]="-1">Select</spx-button>
|
|
58
|
+
</button>
|
|
59
|
+
</div>
|
|
60
|
+
</div>`, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }] }); }
|
|
61
|
+
}
|
|
62
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxDropdownComponent, decorators: [{
|
|
63
|
+
type: Component,
|
|
64
|
+
args: [{
|
|
65
|
+
selector: 'spx-dropdown',
|
|
66
|
+
standalone: true,
|
|
67
|
+
imports: [
|
|
68
|
+
NgIf,
|
|
69
|
+
NgFor,
|
|
70
|
+
SpxButtonComponent,
|
|
71
|
+
],
|
|
72
|
+
template: `<div class="relative text-black">
|
|
73
|
+
<div
|
|
74
|
+
class="absolute bg-gray-100 left-0 right-0 z-20">
|
|
75
|
+
<button
|
|
76
|
+
*ngFor="let valuePair of this.spxSuggestions; let i = index"
|
|
77
|
+
class="text-black block w-full p-2 border border-gray-200 rounded-lg shadow hover:bg-gray-200 flex items-center text-left"
|
|
78
|
+
[class.bg-gray-100]="i === this.focusPosition"
|
|
79
|
+
[class.bg-white]="i !== this.focusPosition"
|
|
80
|
+
(click)="this.handleSuggestionClick(valuePair)"
|
|
81
|
+
[attr.tabindex]="-1"
|
|
82
|
+
[attr.type]="'button'">
|
|
83
|
+
<div class="flex-1 p-1 font-bold text-lg">{{valuePair?.description}}</div>
|
|
84
|
+
<spx-button (spxClick)="this.handleSuggestionClick(valuePair)" [spxType]="'button'" [spxTabIndex]="-1">Select</spx-button>
|
|
85
|
+
</button>
|
|
86
|
+
</div>
|
|
87
|
+
</div>`,
|
|
88
|
+
}]
|
|
89
|
+
}], propDecorators: { spxSuggestions: [{
|
|
90
|
+
type: Input
|
|
91
|
+
}], spxSelect: [{
|
|
92
|
+
type: Output
|
|
93
|
+
}] } });
|
|
94
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3B4LWRyb3Bkb3duLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NvZnRwYWsvY29tcG9uZW50cy9zcHgtaW5wdXRzL3NweC1kcm9wZG93bi5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUM5QyxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQWdDLE1BQU0sRUFBaUIsTUFBTSxlQUFlLENBQUM7QUFFcEgsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFDcEUsT0FBTyxFQUFnQixTQUFTLEVBQUUsTUFBTSxNQUFNLENBQUM7O0FBMkIvQyxNQUFNLE9BQU8sb0JBQW9CO0lBekJqQztRQTBCWSxrQkFBYSxHQUFHLENBQUMsQ0FBQztRQUNuQixtQkFBYyxHQUE4QyxFQUFFLENBQUM7UUFDOUQsY0FBUyxHQUFvQyxJQUFJLFlBQVksRUFBcUIsQ0FBQztLQXdDOUY7SUFyQ0MsUUFBUTtRQUNOLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztJQUN2QixDQUFDO0lBRUQsV0FBVyxDQUFDLE9BQXNCO1FBQ2hDLElBQUksQ0FBQyxhQUFhLEdBQUcsQ0FBQyxDQUFDO0lBQ3pCLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLGlCQUFpQixFQUFFLFdBQVcsRUFBRSxDQUFDO0lBQ3hDLENBQUM7SUFFRCxxQkFBcUIsQ0FBQyxTQUFrRDtRQUN0RSxJQUFJLENBQUMsTUFBTSxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQ3pCLENBQUM7SUFFTyxhQUFhO1FBQ25CLElBQUksQ0FBQyxpQkFBaUIsR0FBRyxTQUFTLENBQUMsTUFBTSxFQUFFLE9BQU8sQ0FBQyxDQUFDLFNBQVMsQ0FBQyxDQUFDLEtBQUssRUFBRSxFQUFFO1lBQ3RFLElBQUssS0FBdUIsQ0FBQyxHQUFHLEtBQUssU0FBUyxJQUFJLElBQUksQ0FBQyxhQUFhLEdBQUcsQ0FBQyxFQUFFLENBQUM7Z0JBQ3pFLElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDLGFBQWEsR0FBRyxDQUFDLENBQUM7Z0JBQzVDLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztZQUN6QixDQUFDO1lBQ0QsSUFBSyxLQUF1QixDQUFDLEdBQUcsS0FBSyxXQUFXLElBQUksSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDLE1BQU0sR0FBRyxDQUFDLEVBQUUsQ0FBQztnQkFDeEcsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsYUFBYSxHQUFHLENBQUMsQ0FBQztnQkFDNUMsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1lBQ3pCLENBQUM7WUFDRCxJQUFLLEtBQXVCLENBQUMsR0FBRyxLQUFLLE9BQU8sSUFBSSxJQUFJLENBQUMsY0FBYyxDQUFDLE1BQU0sR0FBRyxDQUFDLEVBQUUsQ0FBQztnQkFDL0UsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLEVBQUUsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFFLENBQUMsQ0FBQztnQkFDekQsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1lBQ3pCLENBQUM7UUFDSCxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFTyxNQUFNLENBQUMsU0FBa0Q7UUFDL0QsSUFBSSxDQUFDLGFBQWEsR0FBRyxDQUFDLENBQUM7UUFDdkIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7SUFDakMsQ0FBQzs4R0ExQ1Usb0JBQW9CO2tHQUFwQixvQkFBb0IsZ0xBakJyQjs7Ozs7Ozs7Ozs7Ozs7O09BZUwsNERBbEJILEtBQUssbUhBQ0wsa0JBQWtCOzsyRkFtQlQsb0JBQW9CO2tCQXpCaEMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsY0FBYztvQkFDeEIsVUFBVSxFQUFFLElBQUk7b0JBQ2hCLE9BQU8sRUFBRTt3QkFDUCxJQUFJO3dCQUNKLEtBQUs7d0JBQ0wsa0JBQWtCO3FCQUNuQjtvQkFDRCxRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7OztPQWVMO2lCQUNOOzhCQUdVLGNBQWM7c0JBQXRCLEtBQUs7Z0JBQ0ksU0FBUztzQkFBbEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nRm9yLCBOZ0lmIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25DaGFuZ2VzLCBPbkRlc3Ryb3ksIE9uSW5pdCwgT3V0cHV0LCBTaW1wbGVDaGFuZ2VzIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTcHhWYWx1ZVBhaXIgfSBmcm9tICcuL3NweC12YWx1ZS1pbnRlcmZhY2UnO1xuaW1wb3J0IHsgU3B4QnV0dG9uQ29tcG9uZW50IH0gZnJvbSAnQHNvZnRwYWsvY29tcG9uZW50cy9zcHgtYnV0dG9uJztcbmltcG9ydCB7IFN1YnNjcmlwdGlvbiwgZnJvbUV2ZW50IH0gZnJvbSAncnhqcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3NweC1kcm9wZG93bicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtcbiAgICBOZ0lmLFxuICAgIE5nRm9yLFxuICAgIFNweEJ1dHRvbkNvbXBvbmVudCxcbiAgXSxcbiAgdGVtcGxhdGU6IGA8ZGl2IGNsYXNzPVwicmVsYXRpdmUgdGV4dC1ibGFja1wiPlxuICA8ZGl2XG4gICAgY2xhc3M9XCJhYnNvbHV0ZSBiZy1ncmF5LTEwMCBsZWZ0LTAgcmlnaHQtMCB6LTIwXCI+XG4gICAgICA8YnV0dG9uXG4gICAgICAgICpuZ0Zvcj1cImxldCB2YWx1ZVBhaXIgb2YgdGhpcy5zcHhTdWdnZXN0aW9uczsgbGV0IGkgPSBpbmRleFwiXG4gICAgICAgIGNsYXNzPVwidGV4dC1ibGFjayBibG9jayB3LWZ1bGwgcC0yIGJvcmRlciBib3JkZXItZ3JheS0yMDAgcm91bmRlZC1sZyBzaGFkb3cgaG92ZXI6YmctZ3JheS0yMDAgZmxleCBpdGVtcy1jZW50ZXIgdGV4dC1sZWZ0XCJcbiAgICAgICAgW2NsYXNzLmJnLWdyYXktMTAwXT1cImkgPT09IHRoaXMuZm9jdXNQb3NpdGlvblwiXG4gICAgICAgIFtjbGFzcy5iZy13aGl0ZV09XCJpICE9PSB0aGlzLmZvY3VzUG9zaXRpb25cIlxuICAgICAgICAoY2xpY2spPVwidGhpcy5oYW5kbGVTdWdnZXN0aW9uQ2xpY2sodmFsdWVQYWlyKVwiXG4gICAgICAgIFthdHRyLnRhYmluZGV4XT1cIi0xXCJcbiAgICAgICAgW2F0dHIudHlwZV09XCInYnV0dG9uJ1wiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiZmxleC0xIHAtMSBmb250LWJvbGQgdGV4dC1sZ1wiPnt7dmFsdWVQYWlyPy5kZXNjcmlwdGlvbn19PC9kaXY+XG4gICAgICA8c3B4LWJ1dHRvbiAoc3B4Q2xpY2spPVwidGhpcy5oYW5kbGVTdWdnZXN0aW9uQ2xpY2sodmFsdWVQYWlyKVwiIFtzcHhUeXBlXT1cIididXR0b24nXCIgW3NweFRhYkluZGV4XT1cIi0xXCI+U2VsZWN0PC9zcHgtYnV0dG9uPlxuICAgIDwvYnV0dG9uPlxuICA8L2Rpdj5cbjwvZGl2PmAsXG59KVxuZXhwb3J0IGNsYXNzIFNweERyb3Bkb3duQ29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzLCBPbkluaXQsIE9uRGVzdHJveSB7XG4gIHByb3RlY3RlZCBmb2N1c1Bvc2l0aW9uID0gMDtcbiAgQElucHV0KCkgc3B4U3VnZ2VzdGlvbnM6IFNweFZhbHVlUGFpcjxib29sZWFuIHwgbnVtYmVyIHwgc3RyaW5nPltdID0gW107XG4gIEBPdXRwdXQoKSBzcHhTZWxlY3Q6IEV2ZW50RW1pdHRlcjxTcHhWYWx1ZVBhaXI8YW55Pj4gPSBuZXcgRXZlbnRFbWl0dGVyPFNweFZhbHVlUGFpcjxhbnk+PigpO1xuICBzdWJzY3JpcHRpb25LZXlVcD86IFN1YnNjcmlwdGlvbjtcblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLmxpc3RlblRvS2V5VXAoKTtcbiAgfVxuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcbiAgICB0aGlzLmZvY3VzUG9zaXRpb24gPSAwO1xuICB9XG5cbiAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgdGhpcy5zdWJzY3JpcHRpb25LZXlVcD8udW5zdWJzY3JpYmUoKTtcbiAgfVxuXG4gIGhhbmRsZVN1Z2dlc3Rpb25DbGljayh2YWx1ZVBhaXI6IFNweFZhbHVlUGFpcjxzdHJpbmcgfCBudW1iZXIgfCBib29sZWFuPikge1xuICAgIHRoaXMuc2VsZWN0KHZhbHVlUGFpcik7XG4gIH1cblxuICBwcml2YXRlIGxpc3RlblRvS2V5VXAoKTogdm9pZCB7XG4gICAgdGhpcy5zdWJzY3JpcHRpb25LZXlVcCA9IGZyb21FdmVudCh3aW5kb3csICdrZXl1cCcpLnN1YnNjcmliZSgoZXZlbnQpID0+IHtcbiAgICAgIGlmICgoZXZlbnQgYXMgS2V5Ym9hcmRFdmVudCkua2V5ID09PSAnQXJyb3dVcCcgJiYgdGhpcy5mb2N1c1Bvc2l0aW9uID4gMCkge1xuICAgICAgICB0aGlzLmZvY3VzUG9zaXRpb24gPSB0aGlzLmZvY3VzUG9zaXRpb24gLSAxO1xuICAgICAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgfVxuICAgICAgaWYgKChldmVudCBhcyBLZXlib2FyZEV2ZW50KS5rZXkgPT09ICdBcnJvd0Rvd24nICYmIHRoaXMuZm9jdXNQb3NpdGlvbiA8IHRoaXMuc3B4U3VnZ2VzdGlvbnMubGVuZ3RoIC0gMSkge1xuICAgICAgICB0aGlzLmZvY3VzUG9zaXRpb24gPSB0aGlzLmZvY3VzUG9zaXRpb24gKyAxO1xuICAgICAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgfVxuICAgICAgaWYgKChldmVudCBhcyBLZXlib2FyZEV2ZW50KS5rZXkgPT09ICdFbnRlcicgJiYgdGhpcy5zcHhTdWdnZXN0aW9ucy5sZW5ndGggPiAwKSB7XG4gICAgICAgIHRoaXMuc2VsZWN0KHRoaXMuc3B4U3VnZ2VzdGlvbnMuYXQodGhpcy5mb2N1c1Bvc2l0aW9uKSEpO1xuICAgICAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgfVxuICAgIH0pO1xuICB9XG5cbiAgcHJpdmF0ZSBzZWxlY3QodmFsdWVQYWlyOiBTcHhWYWx1ZVBhaXI8c3RyaW5nIHwgbnVtYmVyIHwgYm9vbGVhbj4pOiB2b2lkIHtcbiAgICB0aGlzLmZvY3VzUG9zaXRpb24gPSAwO1xuICAgIHRoaXMuc3B4U2VsZWN0LmVtaXQodmFsdWVQYWlyKTtcbiAgfVxufVxuIl19
|