suis 1.5.0 → 1.6.1
Sign up to get free protection for your applications and to get access to all the features.
- package/esm2022/lib/components/suis-pagination/suis-pagination-per-page-options.pipe.mjs +1 -1
- package/esm2022/lib/modules/suis-select/classes/suis-select.base.mjs +15 -4
- package/esm2022/lib/modules/suis-select/components/suis-select/suis-select.component.mjs +3 -3
- package/esm2022/lib/modules/suis-select/components/suis-select-group/suis-select-group.component.mjs +5 -3
- package/esm2022/lib/modules/suis-select/components/suis-select-group-option/suis-select-group-option.component.mjs +1 -1
- package/esm2022/lib/modules/suis-select/components/suis-select-multi/suis-select-multi.component.mjs +3 -3
- package/esm2022/lib/modules/suis-select/components/suis-select-multi-group/suis-select-multi-group.component.mjs +5 -3
- package/esm2022/lib/modules/suis-select/components/suis-select-option/suis-select-option.component.mjs +15 -3
- package/esm2022/lib/modules/suis-select/directives/suis-select-group-option.directive.mjs +1 -1
- package/esm2022/lib/modules/suis-select/directives/suis-select-option.directive.mjs +1 -1
- package/esm2022/lib/modules/suis-select/interfaces/suis-select-group-option.interfaces.mjs +1 -1
- package/esm2022/lib/modules/suis-select/interfaces/suis-select-option.interfaces.mjs +1 -1
- package/esm2022/lib/modules/suis-select/pipes/suis-select-filter-group-options.pipe.mjs +5 -3
- package/esm2022/lib/modules/suis-select/pipes/suis-select-filter-options.pipe.mjs +5 -3
- package/esm2022/lib/modules/suis-select/pipes/suis-select-group-label.pipe.mjs +5 -5
- package/esm2022/lib/modules/suis-select/pipes/suis-select-label.pipe.mjs +4 -4
- package/esm2022/lib/modules/suis-select/pipes/suis-select-multi-chips.pipe.mjs +5 -5
- package/esm2022/lib/modules/suis-select/pipes/suis-select-multi-group-chips.pipe.mjs +5 -5
- package/esm2022/lib/modules/suis-select/pipes/suis-select-sort-group-options.pipe.mjs +17 -0
- package/esm2022/lib/modules/suis-select/pipes/suis-select-sort-options.pipe.mjs +3 -3
- package/fesm2022/suis.mjs +78 -34
- package/fesm2022/suis.mjs.map +1 -1
- package/lib/components/suis-pagination/suis-pagination-per-page-options.pipe.d.ts +1 -1
- package/lib/modules/suis-select/classes/suis-select.base.d.ts +12 -4
- package/lib/modules/suis-select/components/suis-select-group/suis-select-group.component.d.ts +2 -2
- package/lib/modules/suis-select/components/suis-select-group-option/suis-select-group-option.component.d.ts +6 -6
- package/lib/modules/suis-select/components/suis-select-multi-group/suis-select-multi-group.component.d.ts +2 -2
- package/lib/modules/suis-select/components/suis-select-option/suis-select-option.component.d.ts +14 -6
- package/lib/modules/suis-select/directives/suis-select-group-option.directive.d.ts +3 -3
- package/lib/modules/suis-select/directives/suis-select-option.directive.d.ts +3 -3
- package/lib/modules/suis-select/interfaces/suis-select-group-option.interfaces.d.ts +2 -2
- package/lib/modules/suis-select/interfaces/suis-select-option.interfaces.d.ts +1 -3
- package/lib/modules/suis-select/pipes/suis-select-filter-group-options.pipe.d.ts +4 -4
- package/lib/modules/suis-select/pipes/suis-select-filter-options.pipe.d.ts +4 -4
- package/lib/modules/suis-select/pipes/suis-select-group-label.pipe.d.ts +1 -1
- package/lib/modules/suis-select/pipes/suis-select-label.pipe.d.ts +1 -1
- package/lib/modules/suis-select/pipes/suis-select-multi-chips.pipe.d.ts +1 -1
- package/lib/modules/suis-select/pipes/suis-select-multi-group-chips.pipe.d.ts +1 -1
- package/lib/modules/suis-select/pipes/suis-select-sort-group-options.pipe.d.ts +8 -0
- package/lib/modules/suis-select/pipes/suis-select-sort-options.pipe.d.ts +4 -4
- package/package.json +1 -1
package/fesm2022/suis.mjs
CHANGED
|
@@ -1260,13 +1260,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1260
1260
|
}] });
|
|
1261
1261
|
|
|
1262
1262
|
class SuisSelectLabelPipe {
|
|
1263
|
-
transform(value, options, placeholder) {
|
|
1263
|
+
transform(value, options, placeholder, optionValue, optionLabel) {
|
|
1264
1264
|
if (!value)
|
|
1265
1265
|
return placeholder;
|
|
1266
|
-
const selectedOption = options.find((option) => JSON.stringify(option
|
|
1266
|
+
const selectedOption = options.find((option) => JSON.stringify(option[optionValue]) === JSON.stringify(value));
|
|
1267
1267
|
if (!selectedOption)
|
|
1268
1268
|
throw Error('[SuisSelectLabelPipe] Provided value does not belong to valid values');
|
|
1269
|
-
return selectedOption
|
|
1269
|
+
return selectedOption[optionLabel];
|
|
1270
1270
|
}
|
|
1271
1271
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1272
1272
|
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectLabelPipe, isStandalone: true, name: "suisSelectLabel" }); }
|
|
@@ -1296,6 +1296,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1296
1296
|
|
|
1297
1297
|
class SuisSelectOptionComponent {
|
|
1298
1298
|
constructor() {
|
|
1299
|
+
/**
|
|
1300
|
+
* Option value property name in options. By default set to 'value'.
|
|
1301
|
+
*/
|
|
1302
|
+
this.optionValue = 'value';
|
|
1303
|
+
/**
|
|
1304
|
+
* Option label property name in options. By default set to 'label'.
|
|
1305
|
+
*/
|
|
1306
|
+
this.optionLabel = 'label';
|
|
1299
1307
|
/**
|
|
1300
1308
|
* Adds checkmark icon to checkbox (if checkbox input set to true). By default set to false.
|
|
1301
1309
|
*/
|
|
@@ -1314,16 +1322,20 @@ class SuisSelectOptionComponent {
|
|
|
1314
1322
|
this.clicked.emit();
|
|
1315
1323
|
}
|
|
1316
1324
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1317
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisSelectOptionComponent, isStandalone: true, selector: "suis-select-option", inputs: { option: "option", templateRef: "templateRef", selected: "selected", checkbox: "checkbox" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n class=\"suis-select-option\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"onClick()\"\n>\n <span\n class=\"suis-select-option__checkbox\"\n [class.suis-select-option__checkbox--selected]=\"selected\"\n *ngIf=\"checkbox\"\n >\n <suis-icon\n *ngIf=\"selected\"\n [bold]=\"true\"\n color=\"primary\"\n type=\"check\"\n size=\"sm\"\n ></suis-icon>\n </span>\n <span class=\"suis-select-option__label\">\n <ng-container *ngIf=\"templateRef; else label\">\n <ng-container\n *ngTemplateOutlet=\"templateRef; context: { $implicit: option }\"\n ></ng-container>\n </ng-container>\n <ng-template #label>\n {{ option
|
|
1325
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisSelectOptionComponent, isStandalone: true, selector: "suis-select-option", inputs: { option: "option", templateRef: "templateRef", optionValue: "optionValue", optionLabel: "optionLabel", selected: "selected", checkbox: "checkbox" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n class=\"suis-select-option\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"onClick()\"\n>\n <span\n class=\"suis-select-option__checkbox\"\n [class.suis-select-option__checkbox--selected]=\"selected\"\n *ngIf=\"checkbox\"\n >\n <suis-icon\n *ngIf=\"selected\"\n [bold]=\"true\"\n color=\"primary\"\n type=\"check\"\n size=\"sm\"\n ></suis-icon>\n </span>\n <span class=\"suis-select-option__label\">\n <ng-container *ngIf=\"templateRef; else label\">\n <ng-container\n *ngTemplateOutlet=\"templateRef; context: { $implicit: option }\"\n ></ng-container>\n </ng-container>\n <ng-template #label>\n {{ option ? option[optionLabel] : '' }}\n </ng-template>\n </span>\n</button>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select-option{width:100%;display:flex;align-items:center;background-color:transparent;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;cursor:pointer}.suis-select-option:hover{background-color:#f5f6fa}.suis-select-option__checkbox{min-width:1.125rem;min-height:1.125rem;border:.0625rem solid #dcdde1;margin-right:.75rem;display:flex;justify-content:center;align-items:center}.suis-select-option__checkbox--selected{border:.0625rem solid #bcbcbc}.suis-select-option__label{display:flex;justify-content:left;align-items:center;text-align:left;font-size:.875rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1318
1326
|
}
|
|
1319
1327
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectOptionComponent, decorators: [{
|
|
1320
1328
|
type: Component,
|
|
1321
|
-
args: [{ selector: 'suis-select-option', standalone: true, imports: [NgIf, NgTemplateOutlet, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n class=\"suis-select-option\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"onClick()\"\n>\n <span\n class=\"suis-select-option__checkbox\"\n [class.suis-select-option__checkbox--selected]=\"selected\"\n *ngIf=\"checkbox\"\n >\n <suis-icon\n *ngIf=\"selected\"\n [bold]=\"true\"\n color=\"primary\"\n type=\"check\"\n size=\"sm\"\n ></suis-icon>\n </span>\n <span class=\"suis-select-option__label\">\n <ng-container *ngIf=\"templateRef; else label\">\n <ng-container\n *ngTemplateOutlet=\"templateRef; context: { $implicit: option }\"\n ></ng-container>\n </ng-container>\n <ng-template #label>\n {{ option
|
|
1329
|
+
args: [{ selector: 'suis-select-option', standalone: true, imports: [NgIf, NgTemplateOutlet, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n class=\"suis-select-option\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"onClick()\"\n>\n <span\n class=\"suis-select-option__checkbox\"\n [class.suis-select-option__checkbox--selected]=\"selected\"\n *ngIf=\"checkbox\"\n >\n <suis-icon\n *ngIf=\"selected\"\n [bold]=\"true\"\n color=\"primary\"\n type=\"check\"\n size=\"sm\"\n ></suis-icon>\n </span>\n <span class=\"suis-select-option__label\">\n <ng-container *ngIf=\"templateRef; else label\">\n <ng-container\n *ngTemplateOutlet=\"templateRef; context: { $implicit: option }\"\n ></ng-container>\n </ng-container>\n <ng-template #label>\n {{ option ? option[optionLabel] : '' }}\n </ng-template>\n </span>\n</button>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select-option{width:100%;display:flex;align-items:center;background-color:transparent;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;cursor:pointer}.suis-select-option:hover{background-color:#f5f6fa}.suis-select-option__checkbox{min-width:1.125rem;min-height:1.125rem;border:.0625rem solid #dcdde1;margin-right:.75rem;display:flex;justify-content:center;align-items:center}.suis-select-option__checkbox--selected{border:.0625rem solid #bcbcbc}.suis-select-option__label{display:flex;justify-content:left;align-items:center;text-align:left;font-size:.875rem}\n"] }]
|
|
1322
1330
|
}], propDecorators: { option: [{
|
|
1323
1331
|
type: Input,
|
|
1324
1332
|
args: [{ required: true }]
|
|
1325
1333
|
}], templateRef: [{
|
|
1326
1334
|
type: Input
|
|
1335
|
+
}], optionValue: [{
|
|
1336
|
+
type: Input
|
|
1337
|
+
}], optionLabel: [{
|
|
1338
|
+
type: Input
|
|
1327
1339
|
}], selected: [{
|
|
1328
1340
|
type: Input
|
|
1329
1341
|
}], checkbox: [{
|
|
@@ -1333,8 +1345,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1333
1345
|
}] } });
|
|
1334
1346
|
|
|
1335
1347
|
class SuisSelectSortOptionsPipe {
|
|
1336
|
-
transform(options) {
|
|
1337
|
-
return options.sort((a, b) => a.
|
|
1348
|
+
transform(options, optionLabel) {
|
|
1349
|
+
return options.sort((a, b) => a[optionLabel].localeCompare(b[optionLabel]));
|
|
1338
1350
|
}
|
|
1339
1351
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectSortOptionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1340
1352
|
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectSortOptionsPipe, isStandalone: true, name: "suisSelectSortOptions" }); }
|
|
@@ -1348,10 +1360,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1348
1360
|
}] });
|
|
1349
1361
|
|
|
1350
1362
|
class SuisSelectFilterOptionsPipe {
|
|
1351
|
-
transform(options, phrase) {
|
|
1363
|
+
transform(options, phrase, optionLabel) {
|
|
1352
1364
|
if (!phrase)
|
|
1353
1365
|
return options;
|
|
1354
|
-
return options.filter((option) => option
|
|
1366
|
+
return options.filter((option) => option[optionLabel]
|
|
1367
|
+
.toLocaleLowerCase()
|
|
1368
|
+
.includes(phrase.toLocaleLowerCase()));
|
|
1355
1369
|
}
|
|
1356
1370
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectFilterOptionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1357
1371
|
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectFilterOptionsPipe, isStandalone: true, name: "suisSelectFilterOptions" }); }
|
|
@@ -1468,6 +1482,14 @@ class SuisSelectBase extends SuisInputBase {
|
|
|
1468
1482
|
* Placeholder text displayed when value is not selected. By default set to 'Select option...'.
|
|
1469
1483
|
*/
|
|
1470
1484
|
this.placeholder = 'Select option...';
|
|
1485
|
+
/**
|
|
1486
|
+
* Option value property name in options. By default set to 'value'.
|
|
1487
|
+
*/
|
|
1488
|
+
this.optionValue = 'value';
|
|
1489
|
+
/**
|
|
1490
|
+
* Option label property name in options. By default set to 'label'.
|
|
1491
|
+
*/
|
|
1492
|
+
this.optionLabel = 'label';
|
|
1471
1493
|
/**
|
|
1472
1494
|
* Emits on search phrase changed.
|
|
1473
1495
|
*/
|
|
@@ -1499,12 +1521,11 @@ class SuisSelectBase extends SuisInputBase {
|
|
|
1499
1521
|
}
|
|
1500
1522
|
}
|
|
1501
1523
|
/** @internal */
|
|
1502
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1503
1524
|
optionTrackBy(index, option) {
|
|
1504
|
-
return `${JSON.stringify(option.
|
|
1525
|
+
return `${JSON.stringify(option[this.optionValue])}`;
|
|
1505
1526
|
}
|
|
1506
1527
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1507
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SuisSelectBase, inputs: { options: "options", search: "search", searchPlaceholder: "searchPlaceholder", placeholder: "placeholder" }, outputs: { searchPhraseChanged: "searchPhraseChanged" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, queries: [{ propertyName: "suisSelectOption", first: true, predicate: SuisSelectOptionDirective, descendants: true }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], usesInheritance: true, ngImport: i0 }); }
|
|
1528
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SuisSelectBase, inputs: { options: "options", search: "search", searchPlaceholder: "searchPlaceholder", placeholder: "placeholder", optionValue: "optionValue", optionLabel: "optionLabel" }, outputs: { searchPhraseChanged: "searchPhraseChanged" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, queries: [{ propertyName: "suisSelectOption", first: true, predicate: SuisSelectOptionDirective, descendants: true }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], usesInheritance: true, ngImport: i0 }); }
|
|
1508
1529
|
}
|
|
1509
1530
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectBase, decorators: [{
|
|
1510
1531
|
type: Directive
|
|
@@ -1522,6 +1543,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1522
1543
|
type: Input
|
|
1523
1544
|
}], placeholder: [{
|
|
1524
1545
|
type: Input
|
|
1546
|
+
}], optionValue: [{
|
|
1547
|
+
type: Input
|
|
1548
|
+
}], optionLabel: [{
|
|
1549
|
+
type: Input
|
|
1525
1550
|
}], searchPhraseChanged: [{
|
|
1526
1551
|
type: Output
|
|
1527
1552
|
}], onDocumentClick: [{
|
|
@@ -1580,7 +1605,7 @@ class SuisSelectComponent extends SuisSelectSingleBase {
|
|
|
1580
1605
|
multi: true,
|
|
1581
1606
|
useExisting: forwardRef(() => SuisSelectComponent),
|
|
1582
1607
|
},
|
|
1583
|
-
], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select\">\n <suis-select-button\n [invalid]=\"invalid\"\n [readonly]=\"readonly\"\n [clearable]=\"!!(nullable && value)\"\n [expanded]=\"expanded\"\n (expandedChange)=\"onExpand()\"\n (cleared)=\"onClear($event)\"\n >\n {{
|
|
1608
|
+
], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select\">\n <suis-select-button\n [invalid]=\"invalid\"\n [readonly]=\"readonly\"\n [clearable]=\"!!(nullable && value)\"\n [expanded]=\"expanded\"\n (expandedChange)=\"onExpand()\"\n (cleared)=\"onClear($event)\"\n >\n {{\n value\n | suisSelectLabel : options : placeholder : optionValue : optionLabel\n }}\n </suis-select-button>\n <div *ngIf=\"expanded\" class=\"suis-select__list\">\n <input\n #searchInput\n *ngIf=\"search\"\n [ngModel]=\"searchPhrase\"\n (ngModelChange)=\"onSearchPhraseChange($event)\"\n class=\"suis-select__list__search\"\n type=\"search\"\n [placeholder]=\"searchPlaceholder\"\n />\n <suis-select-option\n *ngFor=\"\n let option of options\n | suisSelectSortOptions : optionLabel\n | suisSelectFilterOptions : searchPhrase : optionLabel;\n trackBy: optionTrackBy\n \"\n [option]=\"option\"\n [optionLabel]=\"optionLabel\"\n [optionValue]=\"optionValue\"\n [templateRef]=\"suisSelectOption?.templateRef\"\n [selected]=\"option[optionValue] | suisSelectIsSelected : value\"\n (clicked)=\"onSelect(option[optionValue])\"\n ></suis-select-option>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select{position:relative}.suis-select__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000040;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2.625rem;left:0;max-height:13.375rem;overflow-y:auto}.suis-select__list::-webkit-scrollbar{width:.5rem}.suis-select__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}.suis-select__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;font-size:.875rem}.suis-select__list__search:focus{outline:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SuisSelectOptionComponent, selector: "suis-select-option", inputs: ["option", "templateRef", "optionValue", "optionLabel", "selected", "checkbox"], outputs: ["clicked"] }, { kind: "component", type: SuisSelectButtonComponent, selector: "suis-select-button" }, { kind: "pipe", type: SuisSelectLabelPipe, name: "suisSelectLabel" }, { kind: "pipe", type: SuisSelectIsSelectedPipe, name: "suisSelectIsSelected" }, { kind: "pipe", type: SuisSelectSortOptionsPipe, name: "suisSelectSortOptions" }, { kind: "pipe", type: SuisSelectFilterOptionsPipe, name: "suisSelectFilterOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1584
1609
|
}
|
|
1585
1610
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectComponent, decorators: [{
|
|
1586
1611
|
type: Component,
|
|
@@ -1600,7 +1625,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1600
1625
|
multi: true,
|
|
1601
1626
|
useExisting: forwardRef(() => SuisSelectComponent),
|
|
1602
1627
|
},
|
|
1603
|
-
], template: "<div class=\"suis-select\">\n <suis-select-button\n [invalid]=\"invalid\"\n [readonly]=\"readonly\"\n [clearable]=\"!!(nullable && value)\"\n [expanded]=\"expanded\"\n (expandedChange)=\"onExpand()\"\n (cleared)=\"onClear($event)\"\n >\n {{
|
|
1628
|
+
], template: "<div class=\"suis-select\">\n <suis-select-button\n [invalid]=\"invalid\"\n [readonly]=\"readonly\"\n [clearable]=\"!!(nullable && value)\"\n [expanded]=\"expanded\"\n (expandedChange)=\"onExpand()\"\n (cleared)=\"onClear($event)\"\n >\n {{\n value\n | suisSelectLabel : options : placeholder : optionValue : optionLabel\n }}\n </suis-select-button>\n <div *ngIf=\"expanded\" class=\"suis-select__list\">\n <input\n #searchInput\n *ngIf=\"search\"\n [ngModel]=\"searchPhrase\"\n (ngModelChange)=\"onSearchPhraseChange($event)\"\n class=\"suis-select__list__search\"\n type=\"search\"\n [placeholder]=\"searchPlaceholder\"\n />\n <suis-select-option\n *ngFor=\"\n let option of options\n | suisSelectSortOptions : optionLabel\n | suisSelectFilterOptions : searchPhrase : optionLabel;\n trackBy: optionTrackBy\n \"\n [option]=\"option\"\n [optionLabel]=\"optionLabel\"\n [optionValue]=\"optionValue\"\n [templateRef]=\"suisSelectOption?.templateRef\"\n [selected]=\"option[optionValue] | suisSelectIsSelected : value\"\n (clicked)=\"onSelect(option[optionValue])\"\n ></suis-select-option>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select{position:relative}.suis-select__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000040;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2.625rem;left:0;max-height:13.375rem;overflow-y:auto}.suis-select__list::-webkit-scrollbar{width:.5rem}.suis-select__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}.suis-select__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;font-size:.875rem}.suis-select__list__search:focus{outline:none}\n"] }]
|
|
1604
1629
|
}] });
|
|
1605
1630
|
|
|
1606
1631
|
class SuisSelectGroupOptionComponent {
|
|
@@ -1618,10 +1643,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1618
1643
|
}] } });
|
|
1619
1644
|
|
|
1620
1645
|
class SuisSelectFilterGroupOptionsPipe {
|
|
1621
|
-
transform(groupOptions, phrase) {
|
|
1646
|
+
transform(groupOptions, phrase, optionLabel) {
|
|
1622
1647
|
if (!phrase)
|
|
1623
1648
|
return groupOptions;
|
|
1624
|
-
return groupOptions.filter((groupOption) => groupOption.children.some((option) => option
|
|
1649
|
+
return groupOptions.filter((groupOption) => groupOption.children.some((option) => option[optionLabel]
|
|
1650
|
+
.toLocaleLowerCase()
|
|
1651
|
+
.includes(phrase.toLocaleLowerCase())));
|
|
1625
1652
|
}
|
|
1626
1653
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectFilterGroupOptionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1627
1654
|
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectFilterGroupOptionsPipe, isStandalone: true, name: "suisSelectFilterGroupOptions" }); }
|
|
@@ -1635,14 +1662,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1635
1662
|
}] });
|
|
1636
1663
|
|
|
1637
1664
|
class SuisSelectGroupLabelPipe {
|
|
1638
|
-
transform(value, groupOptions, placeholder) {
|
|
1665
|
+
transform(value, groupOptions, placeholder, optionValue, optionLabel) {
|
|
1639
1666
|
if (!value)
|
|
1640
1667
|
return placeholder;
|
|
1641
1668
|
const options = groupOptions.map((go) => go.children).flat();
|
|
1642
|
-
const selectedOption = options.find((option) => JSON.stringify(option
|
|
1669
|
+
const selectedOption = options.find((option) => JSON.stringify(option[optionValue]) === JSON.stringify(value));
|
|
1643
1670
|
if (!selectedOption)
|
|
1644
|
-
throw Error('[
|
|
1645
|
-
return selectedOption
|
|
1671
|
+
throw Error('[SuisSelectGroupLabelPipe] Provided value does not belong to valid values');
|
|
1672
|
+
return selectedOption[optionLabel];
|
|
1646
1673
|
}
|
|
1647
1674
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectGroupLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1648
1675
|
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectGroupLabelPipe, isStandalone: true, name: "suisSelectGroupLabel" }); }
|
|
@@ -1673,6 +1700,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1673
1700
|
}]
|
|
1674
1701
|
}] });
|
|
1675
1702
|
|
|
1703
|
+
class SuisSelectSortGroupOptionsPipe {
|
|
1704
|
+
transform(options) {
|
|
1705
|
+
return options.sort((a, b) => a.label.localeCompare(b.label));
|
|
1706
|
+
}
|
|
1707
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectSortGroupOptionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1708
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectSortGroupOptionsPipe, isStandalone: true, name: "suisSelectSortGroupOptions" }); }
|
|
1709
|
+
}
|
|
1710
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectSortGroupOptionsPipe, decorators: [{
|
|
1711
|
+
type: Pipe,
|
|
1712
|
+
args: [{
|
|
1713
|
+
standalone: true,
|
|
1714
|
+
name: 'suisSelectSortGroupOptions',
|
|
1715
|
+
}]
|
|
1716
|
+
}] });
|
|
1717
|
+
|
|
1676
1718
|
class SuisSelectGroupComponent extends SuisSelectSingleBase {
|
|
1677
1719
|
constructor() {
|
|
1678
1720
|
super(...arguments);
|
|
@@ -1688,7 +1730,7 @@ class SuisSelectGroupComponent extends SuisSelectSingleBase {
|
|
|
1688
1730
|
multi: true,
|
|
1689
1731
|
useExisting: forwardRef(() => SuisSelectGroupComponent),
|
|
1690
1732
|
},
|
|
1691
|
-
], queries: [{ propertyName: "suisSelectGroupOption", first: true, predicate: SuisSelectGroupOptionDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select-group\">\n <suis-select-button\n [invalid]=\"invalid\"\n [readonly]=\"readonly\"\n [clearable]=\"!!(nullable && value)\"\n [expanded]=\"expanded\"\n (expandedChange)=\"onExpand()\"\n (cleared)=\"onClear($event)\"\n >\n {{
|
|
1733
|
+
], queries: [{ propertyName: "suisSelectGroupOption", first: true, predicate: SuisSelectGroupOptionDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select-group\">\n <suis-select-button\n [invalid]=\"invalid\"\n [readonly]=\"readonly\"\n [clearable]=\"!!(nullable && value)\"\n [expanded]=\"expanded\"\n (expandedChange)=\"onExpand()\"\n (cleared)=\"onClear($event)\"\n >\n {{\n value\n | suisSelectGroupLabel\n : groupOptions\n : placeholder\n : optionValue\n : optionLabel\n }}\n </suis-select-button>\n <div *ngIf=\"expanded\" class=\"suis-select-group__list\">\n <input\n #searchInput\n *ngIf=\"search\"\n [ngModel]=\"searchPhrase\"\n (ngModelChange)=\"onSearchPhraseChange($event)\"\n class=\"suis-select-group__list__search\"\n type=\"search\"\n [placeholder]=\"searchPlaceholder\"\n />\n <ng-container\n *ngFor=\"\n let group of groupOptions\n | suisSelectSortGroupOptions\n | suisSelectFilterGroupOptions : searchPhrase : optionLabel\n \"\n >\n <suis-select-group-option\n [option]=\"group\"\n [templateRef]=\"suisSelectGroupOption?.templateRef\"\n ></suis-select-group-option>\n <suis-select-option\n *ngFor=\"\n let option of group.children\n | suisSelectSortOptions : optionLabel\n | suisSelectFilterOptions : searchPhrase : optionLabel;\n trackBy: optionTrackBy\n \"\n [option]=\"option\"\n [optionLabel]=\"optionLabel\"\n [optionValue]=\"optionValue\"\n [templateRef]=\"suisSelectOption?.templateRef\"\n [selected]=\"option[optionValue] | suisSelectIsSelected : value\"\n (clicked)=\"onSelect(option[optionValue])\"\n ></suis-select-option>\n </ng-container>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select-group{position:relative}.suis-select-group__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000040;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2.625rem;left:0;max-height:13.375rem;overflow-y:auto;max-height:15.25rem}.suis-select-group__list::-webkit-scrollbar{width:.5rem}.suis-select-group__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select-group__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select-group__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}.suis-select-group__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;font-size:.875rem}.suis-select-group__list__search:focus{outline:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SuisSelectOptionComponent, selector: "suis-select-option", inputs: ["option", "templateRef", "optionValue", "optionLabel", "selected", "checkbox"], outputs: ["clicked"] }, { kind: "component", type: SuisSelectGroupOptionComponent, selector: "suis-select-group-option", inputs: ["option", "templateRef"] }, { kind: "pipe", type: SuisSelectIsSelectedPipe, name: "suisSelectIsSelected" }, { kind: "pipe", type: SuisSelectSortOptionsPipe, name: "suisSelectSortOptions" }, { kind: "pipe", type: SuisSelectFilterOptionsPipe, name: "suisSelectFilterOptions" }, { kind: "pipe", type: SuisSelectFilterGroupOptionsPipe, name: "suisSelectFilterGroupOptions" }, { kind: "pipe", type: SuisSelectGroupLabelPipe, name: "suisSelectGroupLabel" }, { kind: "component", type: SuisSelectButtonComponent, selector: "suis-select-button" }, { kind: "pipe", type: SuisSelectSortGroupOptionsPipe, name: "suisSelectSortGroupOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1692
1734
|
}
|
|
1693
1735
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectGroupComponent, decorators: [{
|
|
1694
1736
|
type: Component,
|
|
@@ -1703,13 +1745,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1703
1745
|
SuisSelectFilterGroupOptionsPipe,
|
|
1704
1746
|
SuisSelectGroupLabelPipe,
|
|
1705
1747
|
SuisSelectButtonComponent,
|
|
1748
|
+
SuisSelectSortGroupOptionsPipe,
|
|
1706
1749
|
], providers: [
|
|
1707
1750
|
{
|
|
1708
1751
|
provide: NG_VALUE_ACCESSOR,
|
|
1709
1752
|
multi: true,
|
|
1710
1753
|
useExisting: forwardRef(() => SuisSelectGroupComponent),
|
|
1711
1754
|
},
|
|
1712
|
-
], template: "<div class=\"suis-select-group\">\n <suis-select-button\n [invalid]=\"invalid\"\n [readonly]=\"readonly\"\n [clearable]=\"!!(nullable && value)\"\n [expanded]=\"expanded\"\n (expandedChange)=\"onExpand()\"\n (cleared)=\"onClear($event)\"\n >\n {{
|
|
1755
|
+
], template: "<div class=\"suis-select-group\">\n <suis-select-button\n [invalid]=\"invalid\"\n [readonly]=\"readonly\"\n [clearable]=\"!!(nullable && value)\"\n [expanded]=\"expanded\"\n (expandedChange)=\"onExpand()\"\n (cleared)=\"onClear($event)\"\n >\n {{\n value\n | suisSelectGroupLabel\n : groupOptions\n : placeholder\n : optionValue\n : optionLabel\n }}\n </suis-select-button>\n <div *ngIf=\"expanded\" class=\"suis-select-group__list\">\n <input\n #searchInput\n *ngIf=\"search\"\n [ngModel]=\"searchPhrase\"\n (ngModelChange)=\"onSearchPhraseChange($event)\"\n class=\"suis-select-group__list__search\"\n type=\"search\"\n [placeholder]=\"searchPlaceholder\"\n />\n <ng-container\n *ngFor=\"\n let group of groupOptions\n | suisSelectSortGroupOptions\n | suisSelectFilterGroupOptions : searchPhrase : optionLabel\n \"\n >\n <suis-select-group-option\n [option]=\"group\"\n [templateRef]=\"suisSelectGroupOption?.templateRef\"\n ></suis-select-group-option>\n <suis-select-option\n *ngFor=\"\n let option of group.children\n | suisSelectSortOptions : optionLabel\n | suisSelectFilterOptions : searchPhrase : optionLabel;\n trackBy: optionTrackBy\n \"\n [option]=\"option\"\n [optionLabel]=\"optionLabel\"\n [optionValue]=\"optionValue\"\n [templateRef]=\"suisSelectOption?.templateRef\"\n [selected]=\"option[optionValue] | suisSelectIsSelected : value\"\n (clicked)=\"onSelect(option[optionValue])\"\n ></suis-select-option>\n </ng-container>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select-group{position:relative}.suis-select-group__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000040;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2.625rem;left:0;max-height:13.375rem;overflow-y:auto;max-height:15.25rem}.suis-select-group__list::-webkit-scrollbar{width:.5rem}.suis-select-group__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select-group__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select-group__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}.suis-select-group__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;font-size:.875rem}.suis-select-group__list__search:focus{outline:none}\n"] }]
|
|
1713
1756
|
}], propDecorators: { suisSelectGroupOption: [{
|
|
1714
1757
|
type: ContentChild,
|
|
1715
1758
|
args: [SuisSelectGroupOptionDirective]
|
|
@@ -1718,13 +1761,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1718
1761
|
}] } });
|
|
1719
1762
|
|
|
1720
1763
|
class SuisSelectMultiChipsPipe {
|
|
1721
|
-
transform(values, options) {
|
|
1764
|
+
transform(values, options, optionValue, optionLabel) {
|
|
1722
1765
|
const selectedOptions = [];
|
|
1723
1766
|
values.forEach((value) => {
|
|
1724
|
-
const selectedOption = options.find((option) => JSON.stringify(option
|
|
1767
|
+
const selectedOption = options.find((option) => JSON.stringify(option[optionValue]) === JSON.stringify(value));
|
|
1725
1768
|
if (!selectedOption)
|
|
1726
|
-
throw Error('[
|
|
1727
|
-
selectedOptions.push(selectedOption
|
|
1769
|
+
throw Error('[SuisSelectMultiChips] Provided value does not belong to valid values');
|
|
1770
|
+
selectedOptions.push(selectedOption[optionLabel]);
|
|
1728
1771
|
});
|
|
1729
1772
|
return selectedOptions;
|
|
1730
1773
|
}
|
|
@@ -1833,7 +1876,7 @@ class SuisSelectMultiComponent extends SuisSelectMultiBase {
|
|
|
1833
1876
|
multi: true,
|
|
1834
1877
|
useExisting: forwardRef(() => SuisSelectMultiComponent),
|
|
1835
1878
|
},
|
|
1836
|
-
], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select-multi\">\n <suis-select-button-multi\n [invalid]=\"invalid\"\n [readonly]=\"readonly\"\n [expanded]=\"expanded\"\n [clearable]=\"values.length > 0\"\n (expandedChange)=\"onExpand()\"\n (cleared)=\"onClear($event)\"\n >\n <ng-container *ngIf=\"!values?.length\">\n {{ placeholder }}\n </ng-container>\n <ng-container *ngIf=\"values?.length\">\n <suis-chip\n *ngFor=\"\n let value of values
|
|
1879
|
+
], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select-multi\">\n <suis-select-button-multi\n [invalid]=\"invalid\"\n [readonly]=\"readonly\"\n [expanded]=\"expanded\"\n [clearable]=\"values.length > 0\"\n (expandedChange)=\"onExpand()\"\n (cleared)=\"onClear($event)\"\n >\n <ng-container *ngIf=\"!values?.length\">\n {{ placeholder }}\n </ng-container>\n <ng-container *ngIf=\"values?.length\">\n <suis-chip\n *ngFor=\"\n let value of values\n | suisSelectMultiChips : options : optionValue : optionLabel;\n let index = index\n \"\n [removable]=\"true\"\n [color]=\"chipColor\"\n [iconColor]=\"chipIconColor\"\n (remove)=\"onRemove(index)\"\n >\n {{ value }}\n </suis-chip>\n </ng-container>\n </suis-select-button-multi>\n <div *ngIf=\"expanded\" class=\"suis-select-multi__list\">\n <input\n #searchInput\n *ngIf=\"search\"\n [ngModel]=\"searchPhrase\"\n (ngModelChange)=\"onSearchPhraseChange($event)\"\n class=\"suis-select-multi__list__search\"\n type=\"search\"\n [placeholder]=\"searchPlaceholder\"\n />\n <suis-select-option\n *ngFor=\"\n let option of options\n | suisSelectSortOptions : optionLabel\n | suisSelectFilterOptions : searchPhrase : optionLabel;\n trackBy: optionTrackBy\n \"\n [option]=\"option\"\n [optionLabel]=\"optionLabel\"\n [optionValue]=\"optionValue\"\n [templateRef]=\"suisSelectOption?.templateRef\"\n [selected]=\"option[optionValue] | suisSelectMultiIsSelected : values\"\n [checkbox]=\"!duplicate\"\n (clicked)=\"onSelect(option[optionValue])\"\n ></suis-select-option>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select-multi{position:relative}.suis-select-multi__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000040;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2.625rem;left:0;max-height:13.375rem;overflow-y:auto}.suis-select-multi__list::-webkit-scrollbar{width:.5rem}.suis-select-multi__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select-multi__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select-multi__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}.suis-select-multi__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;font-size:.875rem}.suis-select-multi__list__search:focus{outline:none}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SuisChipComponent, selector: "suis-chip", inputs: ["color", "iconColor", "removable"], outputs: ["remove"] }, { kind: "component", type: SuisSelectOptionComponent, selector: "suis-select-option", inputs: ["option", "templateRef", "optionValue", "optionLabel", "selected", "checkbox"], outputs: ["clicked"] }, { kind: "pipe", type: SuisSelectMultiChipsPipe, name: "suisSelectMultiChips" }, { kind: "pipe", type: SuisSelectMultiIsSelectedPipe, name: "suisSelectMultiIsSelected" }, { kind: "pipe", type: SuisSelectSortOptionsPipe, name: "suisSelectSortOptions" }, { kind: "pipe", type: SuisSelectFilterOptionsPipe, name: "suisSelectFilterOptions" }, { kind: "component", type: SuisSelectButtonMultiComponent, selector: "suis-select-button-multi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1837
1880
|
}
|
|
1838
1881
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectMultiComponent, decorators: [{
|
|
1839
1882
|
type: Component,
|
|
@@ -1854,18 +1897,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1854
1897
|
multi: true,
|
|
1855
1898
|
useExisting: forwardRef(() => SuisSelectMultiComponent),
|
|
1856
1899
|
},
|
|
1857
|
-
], template: "<div class=\"suis-select-multi\">\n <suis-select-button-multi\n [invalid]=\"invalid\"\n [readonly]=\"readonly\"\n [expanded]=\"expanded\"\n [clearable]=\"values.length > 0\"\n (expandedChange)=\"onExpand()\"\n (cleared)=\"onClear($event)\"\n >\n <ng-container *ngIf=\"!values?.length\">\n {{ placeholder }}\n </ng-container>\n <ng-container *ngIf=\"values?.length\">\n <suis-chip\n *ngFor=\"\n let value of values
|
|
1900
|
+
], template: "<div class=\"suis-select-multi\">\n <suis-select-button-multi\n [invalid]=\"invalid\"\n [readonly]=\"readonly\"\n [expanded]=\"expanded\"\n [clearable]=\"values.length > 0\"\n (expandedChange)=\"onExpand()\"\n (cleared)=\"onClear($event)\"\n >\n <ng-container *ngIf=\"!values?.length\">\n {{ placeholder }}\n </ng-container>\n <ng-container *ngIf=\"values?.length\">\n <suis-chip\n *ngFor=\"\n let value of values\n | suisSelectMultiChips : options : optionValue : optionLabel;\n let index = index\n \"\n [removable]=\"true\"\n [color]=\"chipColor\"\n [iconColor]=\"chipIconColor\"\n (remove)=\"onRemove(index)\"\n >\n {{ value }}\n </suis-chip>\n </ng-container>\n </suis-select-button-multi>\n <div *ngIf=\"expanded\" class=\"suis-select-multi__list\">\n <input\n #searchInput\n *ngIf=\"search\"\n [ngModel]=\"searchPhrase\"\n (ngModelChange)=\"onSearchPhraseChange($event)\"\n class=\"suis-select-multi__list__search\"\n type=\"search\"\n [placeholder]=\"searchPlaceholder\"\n />\n <suis-select-option\n *ngFor=\"\n let option of options\n | suisSelectSortOptions : optionLabel\n | suisSelectFilterOptions : searchPhrase : optionLabel;\n trackBy: optionTrackBy\n \"\n [option]=\"option\"\n [optionLabel]=\"optionLabel\"\n [optionValue]=\"optionValue\"\n [templateRef]=\"suisSelectOption?.templateRef\"\n [selected]=\"option[optionValue] | suisSelectMultiIsSelected : values\"\n [checkbox]=\"!duplicate\"\n (clicked)=\"onSelect(option[optionValue])\"\n ></suis-select-option>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select-multi{position:relative}.suis-select-multi__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000040;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2.625rem;left:0;max-height:13.375rem;overflow-y:auto}.suis-select-multi__list::-webkit-scrollbar{width:.5rem}.suis-select-multi__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select-multi__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select-multi__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}.suis-select-multi__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;font-size:.875rem}.suis-select-multi__list__search:focus{outline:none}\n"] }]
|
|
1858
1901
|
}] });
|
|
1859
1902
|
|
|
1860
1903
|
class SuisSelectMultiGroupChipsPipe {
|
|
1861
|
-
transform(values, groupOptions) {
|
|
1904
|
+
transform(values, groupOptions, optionValue, optionLabel) {
|
|
1862
1905
|
const selectedOptions = [];
|
|
1863
1906
|
const options = groupOptions.map((go) => go.children).flat();
|
|
1864
1907
|
values.forEach((value) => {
|
|
1865
|
-
const selectedOption = options.find((option) => JSON.stringify(option
|
|
1908
|
+
const selectedOption = options.find((option) => JSON.stringify(option[optionValue]) === JSON.stringify(value));
|
|
1866
1909
|
if (!selectedOption)
|
|
1867
|
-
throw Error('[
|
|
1868
|
-
selectedOptions.push(selectedOption
|
|
1910
|
+
throw Error('[SuisSelectMultiGroupChips] Provided value does not belong to valid values');
|
|
1911
|
+
selectedOptions.push(selectedOption[optionLabel]);
|
|
1869
1912
|
});
|
|
1870
1913
|
return selectedOptions;
|
|
1871
1914
|
}
|
|
@@ -1895,7 +1938,7 @@ class SuisSelectMultiGroupComponent extends SuisSelectMultiBase {
|
|
|
1895
1938
|
multi: true,
|
|
1896
1939
|
useExisting: forwardRef(() => SuisSelectMultiGroupComponent),
|
|
1897
1940
|
},
|
|
1898
|
-
], queries: [{ propertyName: "suisSelectGroupOption", first: true, predicate: SuisSelectGroupOptionDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select-multi-group\">\n <suis-select-button-multi\n [invalid]=\"invalid\"\n [readonly]=\"readonly\"\n [expanded]=\"expanded\"\n [clearable]=\"values.length > 0\"\n (expandedChange)=\"onExpand()\"\n (cleared)=\"onClear($event)\"\n >\n <ng-container *ngIf=\"!values?.length\">\n {{ placeholder }}\n </ng-container>\n <ng-container *ngIf=\"values?.length\">\n <suis-chip\n *ngFor=\"\n let value of values
|
|
1941
|
+
], queries: [{ propertyName: "suisSelectGroupOption", first: true, predicate: SuisSelectGroupOptionDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select-multi-group\">\n <suis-select-button-multi\n [invalid]=\"invalid\"\n [readonly]=\"readonly\"\n [expanded]=\"expanded\"\n [clearable]=\"values.length > 0\"\n (expandedChange)=\"onExpand()\"\n (cleared)=\"onClear($event)\"\n >\n <ng-container *ngIf=\"!values?.length\">\n {{ placeholder }}\n </ng-container>\n <ng-container *ngIf=\"values?.length\">\n <suis-chip\n *ngFor=\"\n let value of values\n | suisSelectMultiGroupChips\n : groupOptions\n : optionValue\n : optionLabel;\n let index = index\n \"\n [removable]=\"true\"\n [color]=\"chipColor\"\n [iconColor]=\"chipIconColor\"\n (remove)=\"onRemove(index)\"\n >\n {{ value }}\n </suis-chip>\n </ng-container>\n </suis-select-button-multi>\n <div *ngIf=\"expanded\" class=\"suis-select-multi-group__list\">\n <input\n #searchInput\n *ngIf=\"search\"\n [ngModel]=\"searchPhrase\"\n (ngModelChange)=\"onSearchPhraseChange($event)\"\n class=\"suis-select-multi-group__list__search\"\n type=\"search\"\n [placeholder]=\"searchPlaceholder\"\n />\n <ng-container\n *ngFor=\"\n let group of groupOptions\n | suisSelectSortGroupOptions\n | suisSelectFilterGroupOptions : searchPhrase : optionLabel\n \"\n >\n <suis-select-group-option\n [option]=\"group\"\n [templateRef]=\"suisSelectGroupOption?.templateRef\"\n ></suis-select-group-option>\n <suis-select-option\n *ngFor=\"\n let option of group.children\n | suisSelectSortOptions : optionLabel\n | suisSelectFilterOptions : searchPhrase : optionLabel;\n trackBy: optionTrackBy\n \"\n [option]=\"option\"\n [optionLabel]=\"optionLabel\"\n [optionValue]=\"optionValue\"\n [templateRef]=\"suisSelectOption?.templateRef\"\n [selected]=\"option[optionValue] | suisSelectMultiIsSelected : values\"\n [checkbox]=\"!duplicate\"\n (clicked)=\"onSelect(option[optionValue])\"\n ></suis-select-option>\n </ng-container>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select-multi-group{position:relative}.suis-select-multi-group__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000040;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2.625rem;left:0;max-height:13.375rem;overflow-y:auto}.suis-select-multi-group__list::-webkit-scrollbar{width:.5rem}.suis-select-multi-group__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select-multi-group__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select-multi-group__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}.suis-select-multi-group__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;font-size:.875rem}.suis-select-multi-group__list__search:focus{outline:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SuisChipComponent, selector: "suis-chip", inputs: ["color", "iconColor", "removable"], outputs: ["remove"] }, { kind: "component", type: SuisSelectButtonMultiComponent, selector: "suis-select-button-multi" }, { kind: "component", type: SuisSelectOptionComponent, selector: "suis-select-option", inputs: ["option", "templateRef", "optionValue", "optionLabel", "selected", "checkbox"], outputs: ["clicked"] }, { kind: "component", type: SuisSelectGroupOptionComponent, selector: "suis-select-group-option", inputs: ["option", "templateRef"] }, { kind: "pipe", type: SuisSelectSortOptionsPipe, name: "suisSelectSortOptions" }, { kind: "pipe", type: SuisSelectMultiGroupChipsPipe, name: "suisSelectMultiGroupChips" }, { kind: "pipe", type: SuisSelectFilterOptionsPipe, name: "suisSelectFilterOptions" }, { kind: "pipe", type: SuisSelectFilterGroupOptionsPipe, name: "suisSelectFilterGroupOptions" }, { kind: "pipe", type: SuisSelectMultiIsSelectedPipe, name: "suisSelectMultiIsSelected" }, { kind: "pipe", type: SuisSelectSortGroupOptionsPipe, name: "suisSelectSortGroupOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1899
1942
|
}
|
|
1900
1943
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectMultiGroupComponent, decorators: [{
|
|
1901
1944
|
type: Component,
|
|
@@ -1911,13 +1954,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1911
1954
|
SuisSelectFilterOptionsPipe,
|
|
1912
1955
|
SuisSelectFilterGroupOptionsPipe,
|
|
1913
1956
|
SuisSelectMultiIsSelectedPipe,
|
|
1957
|
+
SuisSelectSortGroupOptionsPipe,
|
|
1914
1958
|
], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
1915
1959
|
{
|
|
1916
1960
|
provide: NG_VALUE_ACCESSOR,
|
|
1917
1961
|
multi: true,
|
|
1918
1962
|
useExisting: forwardRef(() => SuisSelectMultiGroupComponent),
|
|
1919
1963
|
},
|
|
1920
|
-
], template: "<div class=\"suis-select-multi-group\">\n <suis-select-button-multi\n [invalid]=\"invalid\"\n [readonly]=\"readonly\"\n [expanded]=\"expanded\"\n [clearable]=\"values.length > 0\"\n (expandedChange)=\"onExpand()\"\n (cleared)=\"onClear($event)\"\n >\n <ng-container *ngIf=\"!values?.length\">\n {{ placeholder }}\n </ng-container>\n <ng-container *ngIf=\"values?.length\">\n <suis-chip\n *ngFor=\"\n let value of values
|
|
1964
|
+
], template: "<div class=\"suis-select-multi-group\">\n <suis-select-button-multi\n [invalid]=\"invalid\"\n [readonly]=\"readonly\"\n [expanded]=\"expanded\"\n [clearable]=\"values.length > 0\"\n (expandedChange)=\"onExpand()\"\n (cleared)=\"onClear($event)\"\n >\n <ng-container *ngIf=\"!values?.length\">\n {{ placeholder }}\n </ng-container>\n <ng-container *ngIf=\"values?.length\">\n <suis-chip\n *ngFor=\"\n let value of values\n | suisSelectMultiGroupChips\n : groupOptions\n : optionValue\n : optionLabel;\n let index = index\n \"\n [removable]=\"true\"\n [color]=\"chipColor\"\n [iconColor]=\"chipIconColor\"\n (remove)=\"onRemove(index)\"\n >\n {{ value }}\n </suis-chip>\n </ng-container>\n </suis-select-button-multi>\n <div *ngIf=\"expanded\" class=\"suis-select-multi-group__list\">\n <input\n #searchInput\n *ngIf=\"search\"\n [ngModel]=\"searchPhrase\"\n (ngModelChange)=\"onSearchPhraseChange($event)\"\n class=\"suis-select-multi-group__list__search\"\n type=\"search\"\n [placeholder]=\"searchPlaceholder\"\n />\n <ng-container\n *ngFor=\"\n let group of groupOptions\n | suisSelectSortGroupOptions\n | suisSelectFilterGroupOptions : searchPhrase : optionLabel\n \"\n >\n <suis-select-group-option\n [option]=\"group\"\n [templateRef]=\"suisSelectGroupOption?.templateRef\"\n ></suis-select-group-option>\n <suis-select-option\n *ngFor=\"\n let option of group.children\n | suisSelectSortOptions : optionLabel\n | suisSelectFilterOptions : searchPhrase : optionLabel;\n trackBy: optionTrackBy\n \"\n [option]=\"option\"\n [optionLabel]=\"optionLabel\"\n [optionValue]=\"optionValue\"\n [templateRef]=\"suisSelectOption?.templateRef\"\n [selected]=\"option[optionValue] | suisSelectMultiIsSelected : values\"\n [checkbox]=\"!duplicate\"\n (clicked)=\"onSelect(option[optionValue])\"\n ></suis-select-option>\n </ng-container>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select-multi-group{position:relative}.suis-select-multi-group__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000040;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2.625rem;left:0;max-height:13.375rem;overflow-y:auto}.suis-select-multi-group__list::-webkit-scrollbar{width:.5rem}.suis-select-multi-group__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select-multi-group__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select-multi-group__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}.suis-select-multi-group__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;font-size:.875rem}.suis-select-multi-group__list__search:focus{outline:none}\n"] }]
|
|
1921
1965
|
}], propDecorators: { suisSelectGroupOption: [{
|
|
1922
1966
|
type: ContentChild,
|
|
1923
1967
|
args: [SuisSelectGroupOptionDirective]
|