suis 1.5.0 → 1.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/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]
|