list-selection-input 15.0.4 → 15.0.5
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/README.md +1069 -13
- package/fesm2022/list-selection-input.mjs +34 -34
- package/fesm2022/list-selection-input.mjs.map +1 -1
- package/list-selection-input-15.0.5.tgz +0 -0
- package/package.json +12 -5
- package/types/list-selection-input.d.ts +215 -0
- package/esm2022/lib/list-selection-demo/list-selection-demo.component.mjs +0 -167
- package/esm2022/lib/list-selection-input/list-selection-input.component.mjs +0 -265
- package/esm2022/lib/list-selection-input.module.mjs +0 -101
- package/esm2022/lib/models/index.mjs +0 -6
- package/esm2022/lib/models/selection-basic.model.mjs +0 -10
- package/esm2022/lib/models/selection-item.model.mjs +0 -12
- package/esm2022/lib/multi-selection-demo/multi-selection-demo.component.mjs +0 -167
- package/esm2022/lib/pipes/remove-underscore.pipe.mjs +0 -17
- package/esm2022/list-selection-input.mjs +0 -5
- package/esm2022/public-api.mjs +0 -10
- package/index.d.ts +0 -5
- package/lib/list-selection-demo/list-selection-demo.component.d.ts +0 -54
- package/lib/list-selection-input/list-selection-input.component.d.ts +0 -53
- package/lib/list-selection-input.module.d.ts +0 -27
- package/lib/models/index.d.ts +0 -2
- package/lib/models/selection-basic.model.d.ts +0 -10
- package/lib/models/selection-item.model.d.ts +0 -14
- package/lib/multi-selection-demo/multi-selection-demo.component.d.ts +0 -54
- package/lib/pipes/remove-underscore.pipe.d.ts +0 -7
- package/list-selection-input-15.0.4.tgz +0 -0
- package/public-api.d.ts +0 -6
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Pipe, inject, EventEmitter, forwardRef,
|
|
3
|
-
import * as
|
|
2
|
+
import { Pipe, inject, EventEmitter, forwardRef, Output, Input, Component, NgModule } from '@angular/core';
|
|
3
|
+
import * as i1 from '@angular/forms';
|
|
4
4
|
import { FormBuilder, Validators, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
5
|
-
import * as
|
|
6
|
-
import { CommonModule } from '@angular/common';
|
|
7
|
-
import * as i3$1 from '@angular/material/button';
|
|
5
|
+
import * as i2$1 from '@angular/material/button';
|
|
8
6
|
import { MatButtonModule } from '@angular/material/button';
|
|
9
|
-
import * as
|
|
7
|
+
import * as i2 from '@angular/material/form-field';
|
|
10
8
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
11
|
-
import * as
|
|
9
|
+
import * as i4$1 from '@angular/material/button-toggle';
|
|
12
10
|
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
|
13
|
-
import * as
|
|
11
|
+
import * as i5 from '@angular/material/divider';
|
|
14
12
|
import { MatDividerModule } from '@angular/material/divider';
|
|
15
|
-
import * as
|
|
13
|
+
import * as i6 from '@angular/material/slide-toggle';
|
|
16
14
|
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
|
17
|
-
import * as
|
|
15
|
+
import * as i3 from '@angular/material/core';
|
|
18
16
|
import { MatOptionModule } from '@angular/material/core';
|
|
19
|
-
import * as
|
|
17
|
+
import * as i4 from '@angular/material/select';
|
|
20
18
|
import { MatSelectModule } from '@angular/material/select';
|
|
19
|
+
import * as i8 from '@angular/common';
|
|
20
|
+
import { CommonModule } from '@angular/common';
|
|
21
21
|
import { MatSliderModule } from '@angular/material/slider';
|
|
22
22
|
import { MatIconModule } from '@angular/material/icon';
|
|
23
23
|
import { MatMenuModule } from '@angular/material/menu';
|
|
@@ -57,10 +57,10 @@ class RemoveUnderscorePipe {
|
|
|
57
57
|
transform(value) {
|
|
58
58
|
return value ? value.replace(/_/g, " ") : value;
|
|
59
59
|
}
|
|
60
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
61
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
60
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RemoveUnderscorePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
61
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: RemoveUnderscorePipe, isStandalone: true, name: "removeUnderscore" }); }
|
|
62
62
|
}
|
|
63
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
63
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RemoveUnderscorePipe, decorators: [{
|
|
64
64
|
type: Pipe,
|
|
65
65
|
args: [{
|
|
66
66
|
name: 'removeUnderscore',
|
|
@@ -278,8 +278,8 @@ class ListSelectionInputComponent {
|
|
|
278
278
|
selectedValues(obj, state = false) {
|
|
279
279
|
return Object.entries(obj).filter(([key, value]) => value === state).map(([key, _]) => key);
|
|
280
280
|
}
|
|
281
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
282
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
281
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListSelectionInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
282
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ListSelectionInputComponent, selector: "app-list-selection-input", inputs: { label: "label", placeholder: "placeholder", minSelection: "minSelection", maxSelection: "maxSelection", multiple: "multiple", appearance: "appearance", data: "data" }, outputs: { selectionChange: "selectionChange" }, providers: [
|
|
283
283
|
{
|
|
284
284
|
provide: NG_VALUE_ACCESSOR,
|
|
285
285
|
useExisting: forwardRef(() => ListSelectionInputComponent),
|
|
@@ -290,9 +290,9 @@ class ListSelectionInputComponent {
|
|
|
290
290
|
useExisting: forwardRef(() => ListSelectionInputComponent),
|
|
291
291
|
multi: true
|
|
292
292
|
}
|
|
293
|
-
], ngImport: i0, template: "<div style=\"display: flex; flex-direction: column;\">\n <div style=\"margin-bottom: .5rem; display: flex; flex-direction: column;\">\n <mat-label style=\"font-size: larger;\">\n {{ label }}\n </mat-label>\n </div>\n
|
|
293
|
+
], ngImport: i0, template: "<div style=\"display: flex; flex-direction: column;\">\n <div style=\"margin-bottom: .5rem; display: flex; flex-direction: column;\">\n <mat-label style=\"font-size: larger;\">\n {{ label }}\n </mat-label>\n </div>\n @if (data && data.length > 0) {\n <mat-form-field\n style=\"display: flex;\"\n [appearance]=\"appearance\"\n >\n <mat-select\n [formControl]=\"selectionControl\"\n (selectionChange)=\"onSelection($event)\"\n [multiple]=\"multiple\"\n [placeholder]=\"placeholder||''\"\n >\n @for (option of data; track option) {\n <mat-option\n [value]=\"option.value\"\n [disabled]=\"option.disabled\"\n >\n {{option.value}}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n } @else {\n <div class=\"wrapper\">\n <ng-content></ng-content>\n </div>\n }\n</div>\n\n", styles: [".wrapper:not(:empty)+.default{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }] }); }
|
|
294
294
|
}
|
|
295
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
295
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListSelectionInputComponent, decorators: [{
|
|
296
296
|
type: Component,
|
|
297
297
|
args: [{ selector: 'app-list-selection-input', providers: [
|
|
298
298
|
{
|
|
@@ -305,8 +305,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
305
305
|
useExisting: forwardRef(() => ListSelectionInputComponent),
|
|
306
306
|
multi: true
|
|
307
307
|
}
|
|
308
|
-
], template: "<div style=\"display: flex; flex-direction: column;\">\n <div style=\"margin-bottom: .5rem; display: flex; flex-direction: column;\">\n <mat-label style=\"font-size: larger;\">\n {{ label }}\n </mat-label>\n </div>\n
|
|
309
|
-
}], ctorParameters:
|
|
308
|
+
], standalone: false, template: "<div style=\"display: flex; flex-direction: column;\">\n <div style=\"margin-bottom: .5rem; display: flex; flex-direction: column;\">\n <mat-label style=\"font-size: larger;\">\n {{ label }}\n </mat-label>\n </div>\n @if (data && data.length > 0) {\n <mat-form-field\n style=\"display: flex;\"\n [appearance]=\"appearance\"\n >\n <mat-select\n [formControl]=\"selectionControl\"\n (selectionChange)=\"onSelection($event)\"\n [multiple]=\"multiple\"\n [placeholder]=\"placeholder||''\"\n >\n @for (option of data; track option) {\n <mat-option\n [value]=\"option.value\"\n [disabled]=\"option.disabled\"\n >\n {{option.value}}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n } @else {\n <div class=\"wrapper\">\n <ng-content></ng-content>\n </div>\n }\n</div>\n\n", styles: [".wrapper:not(:empty)+.default{display:none}\n"] }]
|
|
309
|
+
}], ctorParameters: () => [], propDecorators: { label: [{
|
|
310
310
|
type: Input
|
|
311
311
|
}], placeholder: [{
|
|
312
312
|
type: Input
|
|
@@ -472,13 +472,13 @@ class ListSelectionInputDemoComponent {
|
|
|
472
472
|
this.selectionControl_8.enable();
|
|
473
473
|
}
|
|
474
474
|
}
|
|
475
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
476
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
475
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListSelectionInputDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
476
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ListSelectionInputDemoComponent, selector: "app-list-selection-demo", ngImport: i0, template: "<div style=\"display: flex;\">\n <h1>List Selection FormControl</h1>\n <div style=\"flex:1; text-align: right;\">\n <div style=\"display: flex; gap: 2rem; flex-direction: row-reverse;\">\n <mat-button-toggle (click)=\"onPerformPatch()\">Patch</mat-button-toggle>\n\n <mat-button-toggle-group #varTypes=\"matButtonToggleGroup\" (change)=\"onChangeDataType(varTypes.value)\">\n <mat-button-toggle value=\"strings\" checked=\"true\">Strings</mat-button-toggle>\n <mat-button-toggle value=\"objects\" checked=\"false\">Objects</mat-button-toggle>\n </mat-button-toggle-group>\n </div>\n </div>\n</div>\n\n<h3>No Data - Projection of Error</h3>\n<app-list-selection-input error=\"No Data Provided\">\n <h3 style=\"color: red; margin-top: 0; margin-bottom: 0;\">No Data</h3>\n</app-list-selection-input>\n\n<div style=\"margin-top: 2rem; margin-bottom: 1rem;\">\n <mat-divider></mat-divider>\n</div>\n\n<div>\n <h3 style=\"margin-bottom: 0;\">Single Selection - {{ varTypes.value | uppercase }}</h3>\n <div>\n <div style=\"display: flex;\">\n <span style=\"flex:1\"></span>\n <button mat-button (click)=\"selectionControl_1.reset()\">Reset</button>\n </div>\n <app-list-selection-input\n [data]=\"data\"\n [formControl]=\"selectionControl_1\"\n ></app-list-selection-input>\n @if (error1.checked) {\n <div>\n @if (selectionControl_1.hasError('minRequired')) {\n <mat-error>You must have a minimun of 1 selected</mat-error>\n }\n @if (selectionControl_1.hasError('maxExceeded')) {\n <mat-error>maximum reached</mat-error>\n }\n @if (selectionControl_1.hasError('required')) {\n <mat-error>This field is Required</mat-error>\n }\n </div>\n }\n <div style=\"display: flex; gap: 2rem; margin-top: 1rem;\">\n <mat-slide-toggle [formControl]=\"changeDetection_1\">Change Detection</mat-slide-toggle>\n <mat-slide-toggle #error1>Display Error</mat-slide-toggle>\n <mat-slide-toggle #disable1 (change)=\"onDisabled_1(disable1.checked)\">Disable</mat-slide-toggle>\n <span style=\"flex:1\"></span>\n </div>\n <div style=\"margin-top: 2rem;\">\n No Label or Placeholder<br>\n Required<br>\n Valid {{ selectionControl_1.valid }}<br>\n </div>\n </div>\n\n <div style=\"margin-top: 2rem; margin-bottom: 1rem;\">\n <mat-divider></mat-divider>\n </div>\n\n <div>\n <div style=\"display: flex;\">\n <span style=\"flex:1\"></span>\n <button mat-button (click)=\"selectionControl_2.reset()\">Reset</button>\n </div>\n <app-list-selection-input\n [data]=\"data\"\n [formControl]=\"selectionControl_2\"\n label=\"Providers\"\n placeholder=\"Select Provider\"\n ></app-list-selection-input>\n @if (error2.checked) {\n <div>\n @if (selectionControl_2.hasError('minRequired')) {\n <mat-error>You must have a minimum of 1 selected</mat-error>\n }\n @if (selectionControl_2.hasError('maxExceeded')) {\n <mat-error>maximum reached</mat-error>\n }\n @if (selectionControl_2.hasError('required')) {\n <mat-error>This field is Required</mat-error>\n }\n </div>\n }\n <div style=\"display: flex; gap: 2rem; margin-top: 1rem;\">\n <mat-slide-toggle [formControl]=\"changeDetection_2\">Change Detection</mat-slide-toggle>\n <mat-slide-toggle #error2>Display Error</mat-slide-toggle>\n <mat-slide-toggle #disable2 (change)=\"onDisabled_2(disable2.checked)\">Disable</mat-slide-toggle>\n <span style=\"flex:1\"></span>\n </div>\n <div style=\"margin-top: 2rem;\">\n Label and Placeholder<br>\n Required<br>\n Valid {{ selectionControl_2.valid }}<br>\n </div>\n <div style=\"margin-top: .5rem; margin-bottom: 1rem;\">\n <mat-divider></mat-divider>\n </div>\n </div>\n\n <div>\n <div style=\"display: flex;\">\n <span style=\"flex:1\"></span>\n <button mat-button (click)=\"selectionControl_3.reset()\">Reset</button>\n </div>\n <app-list-selection-input\n [data]=\"data\"\n [formControl]=\"selectionControl_3\"\n label=\"Providers\"\n placeholder=\"Select Provider\"\n appearance=\"fill\"\n ></app-list-selection-input>\n @if (error3.checked) {\n <div>\n @if (selectionControl_3.hasError('minRequired')) {\n <mat-error>You must have a minimum of 1 selected</mat-error>\n }\n @if (selectionControl_3.hasError('maxExceeded')) {\n <mat-error>maximum reached</mat-error>\n }\n @if (selectionControl_3.hasError('required')) {\n <mat-error>This field is Required</mat-error>\n }\n </div>\n }\n <div style=\"display: flex; gap: 2rem; margin-top: 1rem;\">\n <mat-slide-toggle [formControl]=\"changeDetection_3\">Change Detection</mat-slide-toggle>\n <mat-slide-toggle #error3>Display Error</mat-slide-toggle>\n <mat-slide-toggle #disable3 (change)=\"onDisabled_3(disable3.checked)\">Disable</mat-slide-toggle>\n <span style=\"flex:1\"></span>\n </div>\n <div style=\"margin-top: 2rem;\">\n Label and Placeholder<br>\n Appearance is Fill<br>\n Required<br>\n Valid {{ selectionControl_3.valid }}<br>\n </div>\n <div style=\"margin-top: .5rem; margin-bottom: 1rem;\">\n <mat-divider></mat-divider>\n </div>\n </div>\n\n</div>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i6.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: ListSelectionInputComponent, selector: "app-list-selection-input", inputs: ["label", "placeholder", "minSelection", "maxSelection", "multiple", "appearance", "data"], outputs: ["selectionChange"] }, { kind: "pipe", type: i8.UpperCasePipe, name: "uppercase" }] }); }
|
|
477
477
|
}
|
|
478
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
478
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListSelectionInputDemoComponent, decorators: [{
|
|
479
479
|
type: Component,
|
|
480
|
-
args: [{ selector: 'app-list-selection-demo', template: "<div style=\"display: flex;\">\n <h1>List Selection FormControl</h1>\n <div style=\"flex:1; text-align: right;\">\n <div style=\"display: flex; gap: 2rem; flex-direction: row-reverse;\">\n <mat-button-toggle (click)=\"onPerformPatch()\">Patch</mat-button-toggle>\n\n <mat-button-toggle-group #varTypes=\"matButtonToggleGroup\" (change)=\"onChangeDataType(varTypes.value)\">\n <mat-button-toggle value=\"strings\" checked=\"true\">Strings</mat-button-toggle>\n <mat-button-toggle value=\"objects\" checked=\"false\">Objects</mat-button-toggle>\n </mat-button-toggle-group>\n </div>\n </div>\n</div>\n\n<h3>No Data - Projection of Error</h3>\n<app-list-selection-input error=\"No Data Provided\">\n <h3 style=\"color: red; margin-top: 0; margin-bottom: 0;\">No Data</h3>\n</app-list-selection-input>\n\n<div style=\"margin-top: 2rem; margin-bottom: 1rem;\">\n <mat-divider></mat-divider>\n</div>\n\n<div>\n <h3 style=\"margin-bottom: 0;\">Single Selection - {{ varTypes.value | uppercase }}</h3>\n <div>\n <div style=\"display: flex;\">\n <span style=\"flex:1\"></span>\n <button mat-button (click)=\"selectionControl_1.reset()\">Reset</button>\n </div>\n <app-list-selection-input\n [data]=\"data\"\n [formControl]=\"selectionControl_1\"\n ></app-list-selection-input>\n
|
|
481
|
-
}], ctorParameters:
|
|
480
|
+
args: [{ selector: 'app-list-selection-demo', standalone: false, template: "<div style=\"display: flex;\">\n <h1>List Selection FormControl</h1>\n <div style=\"flex:1; text-align: right;\">\n <div style=\"display: flex; gap: 2rem; flex-direction: row-reverse;\">\n <mat-button-toggle (click)=\"onPerformPatch()\">Patch</mat-button-toggle>\n\n <mat-button-toggle-group #varTypes=\"matButtonToggleGroup\" (change)=\"onChangeDataType(varTypes.value)\">\n <mat-button-toggle value=\"strings\" checked=\"true\">Strings</mat-button-toggle>\n <mat-button-toggle value=\"objects\" checked=\"false\">Objects</mat-button-toggle>\n </mat-button-toggle-group>\n </div>\n </div>\n</div>\n\n<h3>No Data - Projection of Error</h3>\n<app-list-selection-input error=\"No Data Provided\">\n <h3 style=\"color: red; margin-top: 0; margin-bottom: 0;\">No Data</h3>\n</app-list-selection-input>\n\n<div style=\"margin-top: 2rem; margin-bottom: 1rem;\">\n <mat-divider></mat-divider>\n</div>\n\n<div>\n <h3 style=\"margin-bottom: 0;\">Single Selection - {{ varTypes.value | uppercase }}</h3>\n <div>\n <div style=\"display: flex;\">\n <span style=\"flex:1\"></span>\n <button mat-button (click)=\"selectionControl_1.reset()\">Reset</button>\n </div>\n <app-list-selection-input\n [data]=\"data\"\n [formControl]=\"selectionControl_1\"\n ></app-list-selection-input>\n @if (error1.checked) {\n <div>\n @if (selectionControl_1.hasError('minRequired')) {\n <mat-error>You must have a minimun of 1 selected</mat-error>\n }\n @if (selectionControl_1.hasError('maxExceeded')) {\n <mat-error>maximum reached</mat-error>\n }\n @if (selectionControl_1.hasError('required')) {\n <mat-error>This field is Required</mat-error>\n }\n </div>\n }\n <div style=\"display: flex; gap: 2rem; margin-top: 1rem;\">\n <mat-slide-toggle [formControl]=\"changeDetection_1\">Change Detection</mat-slide-toggle>\n <mat-slide-toggle #error1>Display Error</mat-slide-toggle>\n <mat-slide-toggle #disable1 (change)=\"onDisabled_1(disable1.checked)\">Disable</mat-slide-toggle>\n <span style=\"flex:1\"></span>\n </div>\n <div style=\"margin-top: 2rem;\">\n No Label or Placeholder<br>\n Required<br>\n Valid {{ selectionControl_1.valid }}<br>\n </div>\n </div>\n\n <div style=\"margin-top: 2rem; margin-bottom: 1rem;\">\n <mat-divider></mat-divider>\n </div>\n\n <div>\n <div style=\"display: flex;\">\n <span style=\"flex:1\"></span>\n <button mat-button (click)=\"selectionControl_2.reset()\">Reset</button>\n </div>\n <app-list-selection-input\n [data]=\"data\"\n [formControl]=\"selectionControl_2\"\n label=\"Providers\"\n placeholder=\"Select Provider\"\n ></app-list-selection-input>\n @if (error2.checked) {\n <div>\n @if (selectionControl_2.hasError('minRequired')) {\n <mat-error>You must have a minimum of 1 selected</mat-error>\n }\n @if (selectionControl_2.hasError('maxExceeded')) {\n <mat-error>maximum reached</mat-error>\n }\n @if (selectionControl_2.hasError('required')) {\n <mat-error>This field is Required</mat-error>\n }\n </div>\n }\n <div style=\"display: flex; gap: 2rem; margin-top: 1rem;\">\n <mat-slide-toggle [formControl]=\"changeDetection_2\">Change Detection</mat-slide-toggle>\n <mat-slide-toggle #error2>Display Error</mat-slide-toggle>\n <mat-slide-toggle #disable2 (change)=\"onDisabled_2(disable2.checked)\">Disable</mat-slide-toggle>\n <span style=\"flex:1\"></span>\n </div>\n <div style=\"margin-top: 2rem;\">\n Label and Placeholder<br>\n Required<br>\n Valid {{ selectionControl_2.valid }}<br>\n </div>\n <div style=\"margin-top: .5rem; margin-bottom: 1rem;\">\n <mat-divider></mat-divider>\n </div>\n </div>\n\n <div>\n <div style=\"display: flex;\">\n <span style=\"flex:1\"></span>\n <button mat-button (click)=\"selectionControl_3.reset()\">Reset</button>\n </div>\n <app-list-selection-input\n [data]=\"data\"\n [formControl]=\"selectionControl_3\"\n label=\"Providers\"\n placeholder=\"Select Provider\"\n appearance=\"fill\"\n ></app-list-selection-input>\n @if (error3.checked) {\n <div>\n @if (selectionControl_3.hasError('minRequired')) {\n <mat-error>You must have a minimum of 1 selected</mat-error>\n }\n @if (selectionControl_3.hasError('maxExceeded')) {\n <mat-error>maximum reached</mat-error>\n }\n @if (selectionControl_3.hasError('required')) {\n <mat-error>This field is Required</mat-error>\n }\n </div>\n }\n <div style=\"display: flex; gap: 2rem; margin-top: 1rem;\">\n <mat-slide-toggle [formControl]=\"changeDetection_3\">Change Detection</mat-slide-toggle>\n <mat-slide-toggle #error3>Display Error</mat-slide-toggle>\n <mat-slide-toggle #disable3 (change)=\"onDisabled_3(disable3.checked)\">Disable</mat-slide-toggle>\n <span style=\"flex:1\"></span>\n </div>\n <div style=\"margin-top: 2rem;\">\n Label and Placeholder<br>\n Appearance is Fill<br>\n Required<br>\n Valid {{ selectionControl_3.valid }}<br>\n </div>\n <div style=\"margin-top: .5rem; margin-bottom: 1rem;\">\n <mat-divider></mat-divider>\n </div>\n </div>\n\n</div>\n\n" }]
|
|
481
|
+
}], ctorParameters: () => [] });
|
|
482
482
|
|
|
483
483
|
class ListMultiSelectionDemoComponent {
|
|
484
484
|
constructor() {
|
|
@@ -628,17 +628,17 @@ class ListMultiSelectionDemoComponent {
|
|
|
628
628
|
this.selectionControl_8.enable();
|
|
629
629
|
}
|
|
630
630
|
}
|
|
631
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
632
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListMultiSelectionDemoComponent, selector: "app-list-multi-selection-demo", ngImport: i0, template: "<div style=\"display: flex;\">\n <h1>Multi List Selection FormControl</h1>\n <div style=\"flex:1; text-align: right;\">\n <div style=\"display: flex; gap: 2rem; flex-direction: row-reverse;\">\n <mat-button-toggle (click)=\"onPerformPatch()\">Patch</mat-button-toggle>\n\n <mat-button-toggle-group #varTypes=\"matButtonToggleGroup\" (change)=\"onChangeDataType(varTypes.value)\">\n <mat-button-toggle value=\"strings\" checked=\"true\">Strings</mat-button-toggle>\n <mat-button-toggle value=\"objects\" checked=\"false\">Objects</mat-button-toggle>\n </mat-button-toggle-group>\n </div>\n </div>\n</div>\n\n<h3>No Data - Projection of Error</h3>\n<app-list-selection-input error=\"No Data Provided\">\n <h3 style=\"color: red; margin-top: 0; margin-bottom: 0;\">No Data</h3>\n</app-list-selection-input>\n\n<div style=\"margin-top: 2rem; margin-bottom: 1rem;\">\n <mat-divider></mat-divider>\n</div>\n\n<div>\n <h3 style=\"margin-bottom: 0;\">Multi Selection - {{ varTypes.value | uppercase }}</h3>\n\n <div>\n <div style=\"display: flex;\">\n <span style=\"flex:1\"></span>\n <button mat-button (click)=\"selectionControl_4.reset()\">Reset</button>\n </div>\n <app-list-selection-input\n [data]=\"data\"\n [formControl]=\"selectionControl_4\"\n [multiple]=\"true\"\n ></app-list-selection-input>\n <div *ngIf=\"error4.checked\">\n <mat-error *ngIf=\"selectionControl_4.hasError('minRequired')\">You must have a minimum of 1 selected</mat-error>\n <mat-error *ngIf=\"selectionControl_4.hasError('maxExceeded')\">maximum reached</mat-error>\n <mat-error *ngIf=\"selectionControl_4.hasError('required')\">This field is Required</mat-error>\n </div>\n <div style=\"display: flex; gap: 2rem; margin-top: 1rem;\">\n <mat-slide-toggle [formControl]=\"changeDetection_4\">Change Detection</mat-slide-toggle>\n <mat-slide-toggle #error4>Display Error</mat-slide-toggle>\n <mat-slide-toggle #disable4 (change)=\"onDisabled_4(disable4.checked)\">Disable</mat-slide-toggle>\n <span style=\"flex:1\"></span>\n </div>\n <div style=\"margin-top: 2rem;\">\n No Label and Placeholder<br>\n Not Required<br>\n Valid {{ selectionControl_4.valid }}<br>\n </div>\n <div style=\"margin-top: .5rem; margin-bottom: 1rem;\">\n <mat-divider></mat-divider>\n </div>\n </div>\n\n <div>\n <div style=\"display: flex;\">\n <span style=\"flex:1\"></span>\n <button mat-button (click)=\"selectionControl_5.reset()\">Reset</button>\n </div>\n <app-list-selection-input\n [formControl]=\"selectionControl_5\"\n [multiple]=\"true\"\n [data]=\"data\"\n label=\"Sample Selection\"\n placeholder=\"Select Provider\"\n ></app-list-selection-input>\n <div *ngIf=\"error5.checked\">\n <mat-error *ngIf=\"selectionControl_5.hasError('minRequired')\">You must have a minimum of 1 selected</mat-error>\n <mat-error *ngIf=\"selectionControl_5.hasError('maxExceeded')\">maximum reached</mat-error>\n <mat-error *ngIf=\"selectionControl_5.hasError('required')\">This field is Required</mat-error>\n </div>\n <div style=\"display: flex; gap: 2rem; margin-top: 2rem;\">\n <mat-slide-toggle [formControl]=\"changeDetection_5\">Change Detection</mat-slide-toggle>\n <mat-slide-toggle #error5>Display Error</mat-slide-toggle>\n <mat-slide-toggle #disable5 (change)=\"onDisabled_5(disable5.checked)\">Disable</mat-slide-toggle>\n <span style=\"flex:1\"></span>\n </div>\n <div style=\"margin-top: 2rem;\">\n Label and Placeholder<br>\n Not Required<br>\n Valid {{ selectionControl_5.valid }}<br>\n </div>\n <div style=\"margin-top: .5rem; margin-bottom: 1rem;\">\n <mat-divider></mat-divider>\n </div>\n </div>\n\n <div>\n <div style=\"display: flex;\">\n <span style=\"flex:1\"></span>\n <button mat-button (click)=\"selectionControl_6.reset()\">Reset</button>\n </div>\n <app-list-selection-input\n [formControl]=\"selectionControl_6\"\n [multiple]=\"true\"\n [data]=\"data\"\n placeholder=\"Select Provider\"\n [minSelection]=\"2\"\n ></app-list-selection-input>\n <div *ngIf=\"error6.checked\">\n <mat-error *ngIf=\"selectionControl_6.hasError('minRequired')\">You must have a minimum of 1 selected</mat-error>\n <mat-error *ngIf=\"selectionControl_6.hasError('maxExceeded')\">maximum reached</mat-error>\n <mat-error *ngIf=\"selectionControl_6.hasError('required')\">This field is Required</mat-error>\n </div>\n <div style=\"display: flex; gap: 2rem; margin-top: 2rem;\">\n <mat-slide-toggle [formControl]=\"changeDetection_6\">Change Detection</mat-slide-toggle>\n <mat-slide-toggle #error6>Display Error</mat-slide-toggle>\n <mat-slide-toggle #disable6 (change)=\"onDisabled_6(disable6.checked)\">Disable</mat-slide-toggle>\n <span style=\"flex:1\"></span>\n </div>\n <div style=\"margin-top: 2rem;\">\n Placeholder<br>\n Required<br>\n Minimum of 2 Required<br>\n Valid {{ selectionControl_6.valid }}<br>\n </div>\n <div style=\"margin-top: .5rem; margin-bottom: 1rem;\">\n <mat-divider></mat-divider>\n </div>\n </div>\n\n <div>\n <div style=\"display: flex;\">\n <span style=\"flex:1\"></span>\n <button mat-button (click)=\"selectionControl_7.reset()\">Reset</button>\n </div>\n <app-list-selection-input\n [formControl]=\"selectionControl_7\"\n [multiple]=\"true\"\n [data]=\"data\"\n [maxSelection]=\"2\"\n placeholder=\"Select Provider\"\n ></app-list-selection-input>\n <div *ngIf=\"error7.checked\">\n <mat-error *ngIf=\"selectionControl_7.hasError('minRequired')\">You must have a minimum of 1 selected</mat-error>\n <mat-error *ngIf=\"selectionControl_7.hasError('maxExceeded')\">maximum reached</mat-error>\n <mat-error *ngIf=\"selectionControl_7.hasError('required')\">This field is Required</mat-error>\n </div>\n <div style=\"display: flex; gap: 2rem; margin-top: 2rem;\">\n <mat-slide-toggle [formControl]=\"changeDetection_7\">Change Detection</mat-slide-toggle>\n <mat-slide-toggle #error7>Display Error</mat-slide-toggle>\n <mat-slide-toggle #disable7 (change)=\"onDisabled_7(disable7.checked)\">Disable</mat-slide-toggle>\n <span style=\"flex:1\"></span>\n </div>\n <div style=\"margin-top: 2rem;\">\n Placeholder<br>\n Required<br>\n Maximum of 2 Required<br>\n Valid {{ selectionControl_7.valid }}<br>\n </div>\n <div style=\"margin-top: .5rem; margin-bottom: 1rem;\">\n <mat-divider></mat-divider>\n </div>\n </div>\n\n <div>\n <div style=\"display: flex;\">\n <span style=\"flex:1\"></span>\n <button mat-button (click)=\"selectionControl_8.reset()\">Reset</button>\n </div>\n <app-list-selection-input\n [formControl]=\"selectionControl_8\"\n [multiple]=\"true\"\n [data]=\"data\"\n [minSelection]=\"1\"\n [maxSelection]=\"2\"\n placeholder=\"Select Provider\"\n ></app-list-selection-input>\n <div *ngIf=\"error8.checked\">\n <mat-error *ngIf=\"selectionControl_8.hasError('minRequired')\">You must have a minimum of 1 selected</mat-error>\n <mat-error *ngIf=\"selectionControl_8.hasError('maxExceeded')\">maximum reached</mat-error>\n <mat-error *ngIf=\"selectionControl_8.hasError('required')\">This field is Required</mat-error>\n </div>\n <div style=\"display: flex; gap: 2rem; margin-top: 2rem;\">\n <mat-slide-toggle [formControl]=\"changeDetection_8\">Change Detection</mat-slide-toggle>\n <mat-slide-toggle #error8>Display Error</mat-slide-toggle>\n <mat-slide-toggle #disable8 (change)=\"onDisabled_8(disable8.checked)\">Disable</mat-slide-toggle>\n <span style=\"flex:1\"></span>\n </div>\n <div style=\"margin-top: 2rem;\">\n Placeholder<br>\n Required<br>\n Minimum of 1 Required<br>\n Maximum of 2 Required<br>\n Valid {{ selectionControl_8.valid }}<br>\n </div>\n <div style=\"margin-top: .5rem; margin-bottom: 1rem;\">\n <mat-divider></mat-divider>\n </div>\n </div>\n\n</div>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i5$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: ListSelectionInputComponent, selector: "app-list-selection-input", inputs: ["label", "placeholder", "minSelection", "maxSelection", "multiple", "appearance", "data"], outputs: ["selectionChange"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }] }); }
|
|
631
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListMultiSelectionDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
632
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ListMultiSelectionDemoComponent, selector: "app-list-multi-selection-demo", ngImport: i0, template: "<div style=\"display: flex;\">\n <h1>Multi List Selection FormControl</h1>\n <div style=\"flex:1; text-align: right;\">\n <div style=\"display: flex; gap: 2rem; flex-direction: row-reverse;\">\n <mat-button-toggle (click)=\"onPerformPatch()\">Patch</mat-button-toggle>\n\n <mat-button-toggle-group #varTypes=\"matButtonToggleGroup\" (change)=\"onChangeDataType(varTypes.value)\">\n <mat-button-toggle value=\"strings\" checked=\"true\">Strings</mat-button-toggle>\n <mat-button-toggle value=\"objects\" checked=\"false\">Objects</mat-button-toggle>\n </mat-button-toggle-group>\n </div>\n </div>\n</div>\n\n<h3>No Data - Projection of Error</h3>\n<app-list-selection-input error=\"No Data Provided\">\n <h3 style=\"color: red; margin-top: 0; margin-bottom: 0;\">No Data</h3>\n</app-list-selection-input>\n\n<div style=\"margin-top: 2rem; margin-bottom: 1rem;\">\n <mat-divider></mat-divider>\n</div>\n\n<div>\n <h3 style=\"margin-bottom: 0;\">Multi Selection - {{ varTypes.value | uppercase }}</h3>\n\n <div>\n <div style=\"display: flex;\">\n <span style=\"flex:1\"></span>\n <button mat-button (click)=\"selectionControl_4.reset()\">Reset</button>\n </div>\n <app-list-selection-input\n [data]=\"data\"\n [formControl]=\"selectionControl_4\"\n [multiple]=\"true\"\n ></app-list-selection-input>\n @if (error4.checked) {\n <div>\n @if (selectionControl_4.hasError('minRequired')) {\n <mat-error>You must have a minimum of 1 selected</mat-error>\n }\n @if (selectionControl_4.hasError('maxExceeded')) {\n <mat-error>maximum reached</mat-error>\n }\n @if (selectionControl_4.hasError('required')) {\n <mat-error>This field is Required</mat-error>\n }\n </div>\n }\n <div style=\"display: flex; gap: 2rem; margin-top: 1rem;\">\n <mat-slide-toggle [formControl]=\"changeDetection_4\">Change Detection</mat-slide-toggle>\n <mat-slide-toggle #error4>Display Error</mat-slide-toggle>\n <mat-slide-toggle #disable4 (change)=\"onDisabled_4(disable4.checked)\">Disable</mat-slide-toggle>\n <span style=\"flex:1\"></span>\n </div>\n <div style=\"margin-top: 2rem;\">\n No Label and Placeholder<br>\n Not Required<br>\n Valid {{ selectionControl_4.valid }}<br>\n </div>\n <div style=\"margin-top: .5rem; margin-bottom: 1rem;\">\n <mat-divider></mat-divider>\n </div>\n </div>\n\n <div>\n <div style=\"display: flex;\">\n <span style=\"flex:1\"></span>\n <button mat-button (click)=\"selectionControl_5.reset()\">Reset</button>\n </div>\n <app-list-selection-input\n [formControl]=\"selectionControl_5\"\n [multiple]=\"true\"\n [data]=\"data\"\n label=\"Sample Selection\"\n placeholder=\"Select Provider\"\n ></app-list-selection-input>\n @if (error5.checked) {\n <div>\n @if (selectionControl_5.hasError('minRequired')) {\n <mat-error>You must have a minimum of 1 selected</mat-error>\n }\n @if (selectionControl_5.hasError('maxExceeded')) {\n <mat-error>maximum reached</mat-error>\n }\n @if (selectionControl_5.hasError('required')) {\n <mat-error>This field is Required</mat-error>\n }\n </div>\n }\n <div style=\"display: flex; gap: 2rem; margin-top: 2rem;\">\n <mat-slide-toggle [formControl]=\"changeDetection_5\">Change Detection</mat-slide-toggle>\n <mat-slide-toggle #error5>Display Error</mat-slide-toggle>\n <mat-slide-toggle #disable5 (change)=\"onDisabled_5(disable5.checked)\">Disable</mat-slide-toggle>\n <span style=\"flex:1\"></span>\n </div>\n <div style=\"margin-top: 2rem;\">\n Label and Placeholder<br>\n Not Required<br>\n Valid {{ selectionControl_5.valid }}<br>\n </div>\n <div style=\"margin-top: .5rem; margin-bottom: 1rem;\">\n <mat-divider></mat-divider>\n </div>\n </div>\n\n <div>\n <div style=\"display: flex;\">\n <span style=\"flex:1\"></span>\n <button mat-button (click)=\"selectionControl_6.reset()\">Reset</button>\n </div>\n <app-list-selection-input\n [formControl]=\"selectionControl_6\"\n [multiple]=\"true\"\n [data]=\"data\"\n placeholder=\"Select Provider\"\n [minSelection]=\"2\"\n ></app-list-selection-input>\n @if (error6.checked) {\n <div>\n @if (selectionControl_6.hasError('minRequired')) {\n <mat-error>You must have a minimum of 1 selected</mat-error>\n }\n @if (selectionControl_6.hasError('maxExceeded')) {\n <mat-error>maximum reached</mat-error>\n }\n @if (selectionControl_6.hasError('required')) {\n <mat-error>This field is Required</mat-error>\n }\n </div>\n }\n <div style=\"display: flex; gap: 2rem; margin-top: 2rem;\">\n <mat-slide-toggle [formControl]=\"changeDetection_6\">Change Detection</mat-slide-toggle>\n <mat-slide-toggle #error6>Display Error</mat-slide-toggle>\n <mat-slide-toggle #disable6 (change)=\"onDisabled_6(disable6.checked)\">Disable</mat-slide-toggle>\n <span style=\"flex:1\"></span>\n </div>\n <div style=\"margin-top: 2rem;\">\n Placeholder<br>\n Required<br>\n Minimum of 2 Required<br>\n Valid {{ selectionControl_6.valid }}<br>\n </div>\n <div style=\"margin-top: .5rem; margin-bottom: 1rem;\">\n <mat-divider></mat-divider>\n </div>\n </div>\n\n <div>\n <div style=\"display: flex;\">\n <span style=\"flex:1\"></span>\n <button mat-button (click)=\"selectionControl_7.reset()\">Reset</button>\n </div>\n <app-list-selection-input\n [formControl]=\"selectionControl_7\"\n [multiple]=\"true\"\n [data]=\"data\"\n [maxSelection]=\"2\"\n placeholder=\"Select Provider\"\n ></app-list-selection-input>\n @if (error7.checked) {\n <div>\n @if (selectionControl_7.hasError('minRequired')) {\n <mat-error>You must have a minimum of 1 selected</mat-error>\n }\n @if (selectionControl_7.hasError('maxExceeded')) {\n <mat-error>maximum reached</mat-error>\n }\n @if (selectionControl_7.hasError('required')) {\n <mat-error>This field is Required</mat-error>\n }\n </div>\n }\n <div style=\"display: flex; gap: 2rem; margin-top: 2rem;\">\n <mat-slide-toggle [formControl]=\"changeDetection_7\">Change Detection</mat-slide-toggle>\n <mat-slide-toggle #error7>Display Error</mat-slide-toggle>\n <mat-slide-toggle #disable7 (change)=\"onDisabled_7(disable7.checked)\">Disable</mat-slide-toggle>\n <span style=\"flex:1\"></span>\n </div>\n <div style=\"margin-top: 2rem;\">\n Placeholder<br>\n Required<br>\n Maximum of 2 Required<br>\n Valid {{ selectionControl_7.valid }}<br>\n </div>\n <div style=\"margin-top: .5rem; margin-bottom: 1rem;\">\n <mat-divider></mat-divider>\n </div>\n </div>\n\n <div>\n <div style=\"display: flex;\">\n <span style=\"flex:1\"></span>\n <button mat-button (click)=\"selectionControl_8.reset()\">Reset</button>\n </div>\n <app-list-selection-input\n [formControl]=\"selectionControl_8\"\n [multiple]=\"true\"\n [data]=\"data\"\n [minSelection]=\"1\"\n [maxSelection]=\"2\"\n placeholder=\"Select Provider\"\n ></app-list-selection-input>\n @if (error8.checked) {\n <div>\n @if (selectionControl_8.hasError('minRequired')) {\n <mat-error>You must have a minimum of 1 selected</mat-error>\n }\n @if (selectionControl_8.hasError('maxExceeded')) {\n <mat-error>maximum reached</mat-error>\n }\n @if (selectionControl_8.hasError('required')) {\n <mat-error>This field is Required</mat-error>\n }\n </div>\n }\n <div style=\"display: flex; gap: 2rem; margin-top: 2rem;\">\n <mat-slide-toggle [formControl]=\"changeDetection_8\">Change Detection</mat-slide-toggle>\n <mat-slide-toggle #error8>Display Error</mat-slide-toggle>\n <mat-slide-toggle #disable8 (change)=\"onDisabled_8(disable8.checked)\">Disable</mat-slide-toggle>\n <span style=\"flex:1\"></span>\n </div>\n <div style=\"margin-top: 2rem;\">\n Placeholder<br>\n Required<br>\n Minimum of 1 Required<br>\n Maximum of 2 Required<br>\n Valid {{ selectionControl_8.valid }}<br>\n </div>\n <div style=\"margin-top: .5rem; margin-bottom: 1rem;\">\n <mat-divider></mat-divider>\n </div>\n </div>\n\n</div>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i6.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: ListSelectionInputComponent, selector: "app-list-selection-input", inputs: ["label", "placeholder", "minSelection", "maxSelection", "multiple", "appearance", "data"], outputs: ["selectionChange"] }, { kind: "pipe", type: i8.UpperCasePipe, name: "uppercase" }] }); }
|
|
633
633
|
}
|
|
634
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
634
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListMultiSelectionDemoComponent, decorators: [{
|
|
635
635
|
type: Component,
|
|
636
|
-
args: [{ selector: 'app-list-multi-selection-demo', template: "<div style=\"display: flex;\">\n <h1>Multi List Selection FormControl</h1>\n <div style=\"flex:1; text-align: right;\">\n <div style=\"display: flex; gap: 2rem; flex-direction: row-reverse;\">\n <mat-button-toggle (click)=\"onPerformPatch()\">Patch</mat-button-toggle>\n\n <mat-button-toggle-group #varTypes=\"matButtonToggleGroup\" (change)=\"onChangeDataType(varTypes.value)\">\n <mat-button-toggle value=\"strings\" checked=\"true\">Strings</mat-button-toggle>\n <mat-button-toggle value=\"objects\" checked=\"false\">Objects</mat-button-toggle>\n </mat-button-toggle-group>\n </div>\n </div>\n</div>\n\n<h3>No Data - Projection of Error</h3>\n<app-list-selection-input error=\"No Data Provided\">\n <h3 style=\"color: red; margin-top: 0; margin-bottom: 0;\">No Data</h3>\n</app-list-selection-input>\n\n<div style=\"margin-top: 2rem; margin-bottom: 1rem;\">\n <mat-divider></mat-divider>\n</div>\n\n<div>\n <h3 style=\"margin-bottom: 0;\">Multi Selection - {{ varTypes.value | uppercase }}</h3>\n\n <div>\n <div style=\"display: flex;\">\n <span style=\"flex:1\"></span>\n <button mat-button (click)=\"selectionControl_4.reset()\">Reset</button>\n </div>\n <app-list-selection-input\n [data]=\"data\"\n [formControl]=\"selectionControl_4\"\n [multiple]=\"true\"\n ></app-list-selection-input>\n
|
|
637
|
-
}], ctorParameters:
|
|
636
|
+
args: [{ selector: 'app-list-multi-selection-demo', standalone: false, template: "<div style=\"display: flex;\">\n <h1>Multi List Selection FormControl</h1>\n <div style=\"flex:1; text-align: right;\">\n <div style=\"display: flex; gap: 2rem; flex-direction: row-reverse;\">\n <mat-button-toggle (click)=\"onPerformPatch()\">Patch</mat-button-toggle>\n\n <mat-button-toggle-group #varTypes=\"matButtonToggleGroup\" (change)=\"onChangeDataType(varTypes.value)\">\n <mat-button-toggle value=\"strings\" checked=\"true\">Strings</mat-button-toggle>\n <mat-button-toggle value=\"objects\" checked=\"false\">Objects</mat-button-toggle>\n </mat-button-toggle-group>\n </div>\n </div>\n</div>\n\n<h3>No Data - Projection of Error</h3>\n<app-list-selection-input error=\"No Data Provided\">\n <h3 style=\"color: red; margin-top: 0; margin-bottom: 0;\">No Data</h3>\n</app-list-selection-input>\n\n<div style=\"margin-top: 2rem; margin-bottom: 1rem;\">\n <mat-divider></mat-divider>\n</div>\n\n<div>\n <h3 style=\"margin-bottom: 0;\">Multi Selection - {{ varTypes.value | uppercase }}</h3>\n\n <div>\n <div style=\"display: flex;\">\n <span style=\"flex:1\"></span>\n <button mat-button (click)=\"selectionControl_4.reset()\">Reset</button>\n </div>\n <app-list-selection-input\n [data]=\"data\"\n [formControl]=\"selectionControl_4\"\n [multiple]=\"true\"\n ></app-list-selection-input>\n @if (error4.checked) {\n <div>\n @if (selectionControl_4.hasError('minRequired')) {\n <mat-error>You must have a minimum of 1 selected</mat-error>\n }\n @if (selectionControl_4.hasError('maxExceeded')) {\n <mat-error>maximum reached</mat-error>\n }\n @if (selectionControl_4.hasError('required')) {\n <mat-error>This field is Required</mat-error>\n }\n </div>\n }\n <div style=\"display: flex; gap: 2rem; margin-top: 1rem;\">\n <mat-slide-toggle [formControl]=\"changeDetection_4\">Change Detection</mat-slide-toggle>\n <mat-slide-toggle #error4>Display Error</mat-slide-toggle>\n <mat-slide-toggle #disable4 (change)=\"onDisabled_4(disable4.checked)\">Disable</mat-slide-toggle>\n <span style=\"flex:1\"></span>\n </div>\n <div style=\"margin-top: 2rem;\">\n No Label and Placeholder<br>\n Not Required<br>\n Valid {{ selectionControl_4.valid }}<br>\n </div>\n <div style=\"margin-top: .5rem; margin-bottom: 1rem;\">\n <mat-divider></mat-divider>\n </div>\n </div>\n\n <div>\n <div style=\"display: flex;\">\n <span style=\"flex:1\"></span>\n <button mat-button (click)=\"selectionControl_5.reset()\">Reset</button>\n </div>\n <app-list-selection-input\n [formControl]=\"selectionControl_5\"\n [multiple]=\"true\"\n [data]=\"data\"\n label=\"Sample Selection\"\n placeholder=\"Select Provider\"\n ></app-list-selection-input>\n @if (error5.checked) {\n <div>\n @if (selectionControl_5.hasError('minRequired')) {\n <mat-error>You must have a minimum of 1 selected</mat-error>\n }\n @if (selectionControl_5.hasError('maxExceeded')) {\n <mat-error>maximum reached</mat-error>\n }\n @if (selectionControl_5.hasError('required')) {\n <mat-error>This field is Required</mat-error>\n }\n </div>\n }\n <div style=\"display: flex; gap: 2rem; margin-top: 2rem;\">\n <mat-slide-toggle [formControl]=\"changeDetection_5\">Change Detection</mat-slide-toggle>\n <mat-slide-toggle #error5>Display Error</mat-slide-toggle>\n <mat-slide-toggle #disable5 (change)=\"onDisabled_5(disable5.checked)\">Disable</mat-slide-toggle>\n <span style=\"flex:1\"></span>\n </div>\n <div style=\"margin-top: 2rem;\">\n Label and Placeholder<br>\n Not Required<br>\n Valid {{ selectionControl_5.valid }}<br>\n </div>\n <div style=\"margin-top: .5rem; margin-bottom: 1rem;\">\n <mat-divider></mat-divider>\n </div>\n </div>\n\n <div>\n <div style=\"display: flex;\">\n <span style=\"flex:1\"></span>\n <button mat-button (click)=\"selectionControl_6.reset()\">Reset</button>\n </div>\n <app-list-selection-input\n [formControl]=\"selectionControl_6\"\n [multiple]=\"true\"\n [data]=\"data\"\n placeholder=\"Select Provider\"\n [minSelection]=\"2\"\n ></app-list-selection-input>\n @if (error6.checked) {\n <div>\n @if (selectionControl_6.hasError('minRequired')) {\n <mat-error>You must have a minimum of 1 selected</mat-error>\n }\n @if (selectionControl_6.hasError('maxExceeded')) {\n <mat-error>maximum reached</mat-error>\n }\n @if (selectionControl_6.hasError('required')) {\n <mat-error>This field is Required</mat-error>\n }\n </div>\n }\n <div style=\"display: flex; gap: 2rem; margin-top: 2rem;\">\n <mat-slide-toggle [formControl]=\"changeDetection_6\">Change Detection</mat-slide-toggle>\n <mat-slide-toggle #error6>Display Error</mat-slide-toggle>\n <mat-slide-toggle #disable6 (change)=\"onDisabled_6(disable6.checked)\">Disable</mat-slide-toggle>\n <span style=\"flex:1\"></span>\n </div>\n <div style=\"margin-top: 2rem;\">\n Placeholder<br>\n Required<br>\n Minimum of 2 Required<br>\n Valid {{ selectionControl_6.valid }}<br>\n </div>\n <div style=\"margin-top: .5rem; margin-bottom: 1rem;\">\n <mat-divider></mat-divider>\n </div>\n </div>\n\n <div>\n <div style=\"display: flex;\">\n <span style=\"flex:1\"></span>\n <button mat-button (click)=\"selectionControl_7.reset()\">Reset</button>\n </div>\n <app-list-selection-input\n [formControl]=\"selectionControl_7\"\n [multiple]=\"true\"\n [data]=\"data\"\n [maxSelection]=\"2\"\n placeholder=\"Select Provider\"\n ></app-list-selection-input>\n @if (error7.checked) {\n <div>\n @if (selectionControl_7.hasError('minRequired')) {\n <mat-error>You must have a minimum of 1 selected</mat-error>\n }\n @if (selectionControl_7.hasError('maxExceeded')) {\n <mat-error>maximum reached</mat-error>\n }\n @if (selectionControl_7.hasError('required')) {\n <mat-error>This field is Required</mat-error>\n }\n </div>\n }\n <div style=\"display: flex; gap: 2rem; margin-top: 2rem;\">\n <mat-slide-toggle [formControl]=\"changeDetection_7\">Change Detection</mat-slide-toggle>\n <mat-slide-toggle #error7>Display Error</mat-slide-toggle>\n <mat-slide-toggle #disable7 (change)=\"onDisabled_7(disable7.checked)\">Disable</mat-slide-toggle>\n <span style=\"flex:1\"></span>\n </div>\n <div style=\"margin-top: 2rem;\">\n Placeholder<br>\n Required<br>\n Maximum of 2 Required<br>\n Valid {{ selectionControl_7.valid }}<br>\n </div>\n <div style=\"margin-top: .5rem; margin-bottom: 1rem;\">\n <mat-divider></mat-divider>\n </div>\n </div>\n\n <div>\n <div style=\"display: flex;\">\n <span style=\"flex:1\"></span>\n <button mat-button (click)=\"selectionControl_8.reset()\">Reset</button>\n </div>\n <app-list-selection-input\n [formControl]=\"selectionControl_8\"\n [multiple]=\"true\"\n [data]=\"data\"\n [minSelection]=\"1\"\n [maxSelection]=\"2\"\n placeholder=\"Select Provider\"\n ></app-list-selection-input>\n @if (error8.checked) {\n <div>\n @if (selectionControl_8.hasError('minRequired')) {\n <mat-error>You must have a minimum of 1 selected</mat-error>\n }\n @if (selectionControl_8.hasError('maxExceeded')) {\n <mat-error>maximum reached</mat-error>\n }\n @if (selectionControl_8.hasError('required')) {\n <mat-error>This field is Required</mat-error>\n }\n </div>\n }\n <div style=\"display: flex; gap: 2rem; margin-top: 2rem;\">\n <mat-slide-toggle [formControl]=\"changeDetection_8\">Change Detection</mat-slide-toggle>\n <mat-slide-toggle #error8>Display Error</mat-slide-toggle>\n <mat-slide-toggle #disable8 (change)=\"onDisabled_8(disable8.checked)\">Disable</mat-slide-toggle>\n <span style=\"flex:1\"></span>\n </div>\n <div style=\"margin-top: 2rem;\">\n Placeholder<br>\n Required<br>\n Minimum of 1 Required<br>\n Maximum of 2 Required<br>\n Valid {{ selectionControl_8.valid }}<br>\n </div>\n <div style=\"margin-top: .5rem; margin-bottom: 1rem;\">\n <mat-divider></mat-divider>\n </div>\n </div>\n\n</div>\n\n" }]
|
|
637
|
+
}], ctorParameters: () => [] });
|
|
638
638
|
|
|
639
639
|
class ListSelectionInputModule {
|
|
640
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
641
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
640
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListSelectionInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
641
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ListSelectionInputModule, declarations: [ListSelectionInputDemoComponent,
|
|
642
642
|
ListMultiSelectionDemoComponent,
|
|
643
643
|
ListSelectionInputComponent], imports: [CommonModule,
|
|
644
644
|
FormsModule,
|
|
@@ -661,7 +661,7 @@ class ListSelectionInputModule {
|
|
|
661
661
|
MatSlideToggleModule], exports: [ListSelectionInputDemoComponent,
|
|
662
662
|
ListMultiSelectionDemoComponent,
|
|
663
663
|
ListSelectionInputComponent] }); }
|
|
664
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
664
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListSelectionInputModule, imports: [CommonModule,
|
|
665
665
|
FormsModule,
|
|
666
666
|
ReactiveFormsModule,
|
|
667
667
|
MatSliderModule,
|
|
@@ -680,7 +680,7 @@ class ListSelectionInputModule {
|
|
|
680
680
|
MatOptionModule,
|
|
681
681
|
MatSlideToggleModule] }); }
|
|
682
682
|
}
|
|
683
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
683
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListSelectionInputModule, decorators: [{
|
|
684
684
|
type: NgModule,
|
|
685
685
|
args: [{
|
|
686
686
|
imports: [
|