suis 1.4.0 → 1.6.0
Sign up to get free protection for your applications and to get access to all the features.
- package/esm2022/lib/components/suis-input-image/suis-input-image.component.mjs +14 -8
- 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 +90 -40
- package/fesm2022/suis.mjs.map +1 -1
- package/lib/components/suis-input-image/suis-input-image.component.d.ts +6 -2
- 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
|
@@ -995,6 +995,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
995
995
|
class SuisInputImageComponent extends SuisInputBase {
|
|
996
996
|
constructor() {
|
|
997
997
|
super(...arguments);
|
|
998
|
+
/**
|
|
999
|
+
* Emits value on FileList upload.
|
|
1000
|
+
*/
|
|
1001
|
+
this.uploaded = new EventEmitter();
|
|
998
1002
|
/** @internal */
|
|
999
1003
|
this.value = null;
|
|
1000
1004
|
/** @internal */
|
|
@@ -1003,12 +1007,12 @@ class SuisInputImageComponent extends SuisInputBase {
|
|
|
1003
1007
|
writeValue(obj) {
|
|
1004
1008
|
if (typeof obj === 'string')
|
|
1005
1009
|
this.imageUrl = obj;
|
|
1010
|
+
this.cdRef.markForCheck();
|
|
1006
1011
|
}
|
|
1007
1012
|
onChange(event) {
|
|
1008
1013
|
const target = event.target;
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
this.changed.emit(this.value);
|
|
1014
|
+
if (target.files)
|
|
1015
|
+
this.uploaded.emit(target.files);
|
|
1012
1016
|
this.cdRef.markForCheck();
|
|
1013
1017
|
}
|
|
1014
1018
|
onRemove() {
|
|
@@ -1020,13 +1024,13 @@ class SuisInputImageComponent extends SuisInputBase {
|
|
|
1020
1024
|
this.cdRef.markForCheck();
|
|
1021
1025
|
}
|
|
1022
1026
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisInputImageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1023
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisInputImageComponent, isStandalone: true, selector: "suis-input-image", providers: [
|
|
1027
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisInputImageComponent, isStandalone: true, selector: "suis-input-image", outputs: { uploaded: "uploaded" }, providers: [
|
|
1024
1028
|
{
|
|
1025
1029
|
provide: NG_VALUE_ACCESSOR,
|
|
1026
1030
|
multi: true,
|
|
1027
1031
|
useExisting: forwardRef(() => SuisInputImageComponent),
|
|
1028
1032
|
},
|
|
1029
|
-
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"suis-input-image\"\n [class.suis-input-image--invalid]=\"invalid\"\n [class.suis-input-image--readonly]=\"readonly\"\n>\n <figure *ngIf=\"imageUrl\" class=\"suis-input-image__preview\">\n <img [src]=\"imageUrl\" alt=\"Uploaded image\" />\n <button type=\"button\" (click)=\"onRemove()\" [disabled]=\"readonly\">\n <suis-icon\n type=\"times\"\n color=\"danger\"\n size=\"md\"\n [filled]=\"true\"\n ></suis-icon>\n </button>\n </figure>\n <input\n #input\n type=\"file\"\n class=\"suis-input-image__input\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n />\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-input-image{width:100%;background-color:#fff;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.625rem;display:flex;align-items:center}.suis-input-image:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-image--invalid{border:.0625rem solid #ff4757}.suis-input-image--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}.suis-input-image--readonly{background-color:#f5f6fa;cursor:not-allowed}.suis-input-image--readonly:focus{border:.0625rem solid #dcdde1;box-shadow:none;outline:none}.suis-input-image__preview{position:relative;margin-right:1rem}.suis-input-image__preview img{display:block;min-width:6.25rem;min-height:6.25rem;max-width:6.25rem;max-height:6.25rem;border-radius:.25rem;object-fit:contain
|
|
1033
|
+
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"suis-input-image\"\n [class.suis-input-image--invalid]=\"invalid\"\n [class.suis-input-image--readonly]=\"readonly\"\n>\n <figure *ngIf=\"imageUrl\" class=\"suis-input-image__preview\">\n <img [src]=\"imageUrl\" alt=\"Uploaded image\" />\n <button type=\"button\" (click)=\"onRemove()\" [disabled]=\"readonly\">\n <suis-icon\n type=\"times\"\n color=\"danger\"\n size=\"md\"\n [filled]=\"true\"\n ></suis-icon>\n </button>\n </figure>\n <input\n #input\n type=\"file\"\n class=\"suis-input-image__input\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n />\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-input-image{width:100%;background-color:#fff;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.625rem;display:flex;align-items:center}.suis-input-image:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-image--invalid{border:.0625rem solid #ff4757}.suis-input-image--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}.suis-input-image--readonly{background-color:#f5f6fa;cursor:not-allowed}.suis-input-image--readonly:focus{border:.0625rem solid #dcdde1;box-shadow:none;outline:none}.suis-input-image__preview{position:relative;margin-right:1rem}.suis-input-image__preview img{display:block;min-width:6.25rem;min-height:6.25rem;max-width:6.25rem;max-height:6.25rem;border-radius:.25rem;object-fit:contain}.suis-input-image__preview button{position:absolute;top:.1875rem;right:.1875rem;border:0;background-color:transparent;cursor:pointer}.suis-input-image--invalid{color:#ff4757}.suis-input-image__input::file-selector-button{color:#fff;background-color:#273c75;border-radius:.25rem;transition:background-color .25s ease-in-out;padding:.25rem .75rem;border:0;font-size:.75rem}.suis-input-image__input:not(:disabled)::file-selector-button:hover{background-color:#273c75d9;cursor:pointer}.suis-input-image__input:disabled::file-selector-button,.suis-input-image__input:disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1030
1034
|
}
|
|
1031
1035
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisInputImageComponent, decorators: [{
|
|
1032
1036
|
type: Component,
|
|
@@ -1036,10 +1040,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1036
1040
|
multi: true,
|
|
1037
1041
|
useExisting: forwardRef(() => SuisInputImageComponent),
|
|
1038
1042
|
},
|
|
1039
|
-
], template: "<div\n class=\"suis-input-image\"\n [class.suis-input-image--invalid]=\"invalid\"\n [class.suis-input-image--readonly]=\"readonly\"\n>\n <figure *ngIf=\"imageUrl\" class=\"suis-input-image__preview\">\n <img [src]=\"imageUrl\" alt=\"Uploaded image\" />\n <button type=\"button\" (click)=\"onRemove()\" [disabled]=\"readonly\">\n <suis-icon\n type=\"times\"\n color=\"danger\"\n size=\"md\"\n [filled]=\"true\"\n ></suis-icon>\n </button>\n </figure>\n <input\n #input\n type=\"file\"\n class=\"suis-input-image__input\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n />\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-input-image{width:100%;background-color:#fff;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.625rem;display:flex;align-items:center}.suis-input-image:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-image--invalid{border:.0625rem solid #ff4757}.suis-input-image--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}.suis-input-image--readonly{background-color:#f5f6fa;cursor:not-allowed}.suis-input-image--readonly:focus{border:.0625rem solid #dcdde1;box-shadow:none;outline:none}.suis-input-image__preview{position:relative;margin-right:1rem}.suis-input-image__preview img{display:block;min-width:6.25rem;min-height:6.25rem;max-width:6.25rem;max-height:6.25rem;border-radius:.25rem;object-fit:contain
|
|
1043
|
+
], template: "<div\n class=\"suis-input-image\"\n [class.suis-input-image--invalid]=\"invalid\"\n [class.suis-input-image--readonly]=\"readonly\"\n>\n <figure *ngIf=\"imageUrl\" class=\"suis-input-image__preview\">\n <img [src]=\"imageUrl\" alt=\"Uploaded image\" />\n <button type=\"button\" (click)=\"onRemove()\" [disabled]=\"readonly\">\n <suis-icon\n type=\"times\"\n color=\"danger\"\n size=\"md\"\n [filled]=\"true\"\n ></suis-icon>\n </button>\n </figure>\n <input\n #input\n type=\"file\"\n class=\"suis-input-image__input\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n />\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-input-image{width:100%;background-color:#fff;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.625rem;display:flex;align-items:center}.suis-input-image:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-image--invalid{border:.0625rem solid #ff4757}.suis-input-image--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}.suis-input-image--readonly{background-color:#f5f6fa;cursor:not-allowed}.suis-input-image--readonly:focus{border:.0625rem solid #dcdde1;box-shadow:none;outline:none}.suis-input-image__preview{position:relative;margin-right:1rem}.suis-input-image__preview img{display:block;min-width:6.25rem;min-height:6.25rem;max-width:6.25rem;max-height:6.25rem;border-radius:.25rem;object-fit:contain}.suis-input-image__preview button{position:absolute;top:.1875rem;right:.1875rem;border:0;background-color:transparent;cursor:pointer}.suis-input-image--invalid{color:#ff4757}.suis-input-image__input::file-selector-button{color:#fff;background-color:#273c75;border-radius:.25rem;transition:background-color .25s ease-in-out;padding:.25rem .75rem;border:0;font-size:.75rem}.suis-input-image__input:not(:disabled)::file-selector-button:hover{background-color:#273c75d9;cursor:pointer}.suis-input-image__input:disabled::file-selector-button,.suis-input-image__input:disabled{cursor:not-allowed}\n"] }]
|
|
1040
1044
|
}], propDecorators: { fileInput: [{
|
|
1041
1045
|
type: ViewChild,
|
|
1042
1046
|
args: ['input']
|
|
1047
|
+
}], uploaded: [{
|
|
1048
|
+
type: Output
|
|
1043
1049
|
}] } });
|
|
1044
1050
|
|
|
1045
1051
|
class SuisInputNumberComponent extends SuisInputBase {
|
|
@@ -1254,13 +1260,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1254
1260
|
}] });
|
|
1255
1261
|
|
|
1256
1262
|
class SuisSelectLabelPipe {
|
|
1257
|
-
transform(value, options, placeholder) {
|
|
1263
|
+
transform(value, options, placeholder, optionValue, optionLabel) {
|
|
1258
1264
|
if (!value)
|
|
1259
1265
|
return placeholder;
|
|
1260
|
-
const selectedOption = options.find((option) => JSON.stringify(option
|
|
1266
|
+
const selectedOption = options.find((option) => JSON.stringify(option[optionValue]) === JSON.stringify(value));
|
|
1261
1267
|
if (!selectedOption)
|
|
1262
1268
|
throw Error('[SuisSelectLabelPipe] Provided value does not belong to valid values');
|
|
1263
|
-
return selectedOption
|
|
1269
|
+
return selectedOption[optionLabel];
|
|
1264
1270
|
}
|
|
1265
1271
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1266
1272
|
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectLabelPipe, isStandalone: true, name: "suisSelectLabel" }); }
|
|
@@ -1290,6 +1296,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1290
1296
|
|
|
1291
1297
|
class SuisSelectOptionComponent {
|
|
1292
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';
|
|
1293
1307
|
/**
|
|
1294
1308
|
* Adds checkmark icon to checkbox (if checkbox input set to true). By default set to false.
|
|
1295
1309
|
*/
|
|
@@ -1308,16 +1322,20 @@ class SuisSelectOptionComponent {
|
|
|
1308
1322
|
this.clicked.emit();
|
|
1309
1323
|
}
|
|
1310
1324
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1311
|
-
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 }); }
|
|
1312
1326
|
}
|
|
1313
1327
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectOptionComponent, decorators: [{
|
|
1314
1328
|
type: Component,
|
|
1315
|
-
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"] }]
|
|
1316
1330
|
}], propDecorators: { option: [{
|
|
1317
1331
|
type: Input,
|
|
1318
1332
|
args: [{ required: true }]
|
|
1319
1333
|
}], templateRef: [{
|
|
1320
1334
|
type: Input
|
|
1335
|
+
}], optionValue: [{
|
|
1336
|
+
type: Input
|
|
1337
|
+
}], optionLabel: [{
|
|
1338
|
+
type: Input
|
|
1321
1339
|
}], selected: [{
|
|
1322
1340
|
type: Input
|
|
1323
1341
|
}], checkbox: [{
|
|
@@ -1327,8 +1345,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1327
1345
|
}] } });
|
|
1328
1346
|
|
|
1329
1347
|
class SuisSelectSortOptionsPipe {
|
|
1330
|
-
transform(options) {
|
|
1331
|
-
return options.sort((a, b) => a.
|
|
1348
|
+
transform(options, optionLabel) {
|
|
1349
|
+
return options.sort((a, b) => a[optionLabel].localeCompare(b[optionLabel]));
|
|
1332
1350
|
}
|
|
1333
1351
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectSortOptionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1334
1352
|
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectSortOptionsPipe, isStandalone: true, name: "suisSelectSortOptions" }); }
|
|
@@ -1342,10 +1360,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1342
1360
|
}] });
|
|
1343
1361
|
|
|
1344
1362
|
class SuisSelectFilterOptionsPipe {
|
|
1345
|
-
transform(options, phrase) {
|
|
1363
|
+
transform(options, phrase, optionLabel) {
|
|
1346
1364
|
if (!phrase)
|
|
1347
1365
|
return options;
|
|
1348
|
-
return options.filter((option) => option
|
|
1366
|
+
return options.filter((option) => option[optionLabel]
|
|
1367
|
+
.toLocaleLowerCase()
|
|
1368
|
+
.includes(phrase.toLocaleLowerCase()));
|
|
1349
1369
|
}
|
|
1350
1370
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectFilterOptionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1351
1371
|
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectFilterOptionsPipe, isStandalone: true, name: "suisSelectFilterOptions" }); }
|
|
@@ -1462,6 +1482,14 @@ class SuisSelectBase extends SuisInputBase {
|
|
|
1462
1482
|
* Placeholder text displayed when value is not selected. By default set to 'Select option...'.
|
|
1463
1483
|
*/
|
|
1464
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';
|
|
1465
1493
|
/**
|
|
1466
1494
|
* Emits on search phrase changed.
|
|
1467
1495
|
*/
|
|
@@ -1493,12 +1521,11 @@ class SuisSelectBase extends SuisInputBase {
|
|
|
1493
1521
|
}
|
|
1494
1522
|
}
|
|
1495
1523
|
/** @internal */
|
|
1496
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1497
1524
|
optionTrackBy(index, option) {
|
|
1498
|
-
return `${JSON.stringify(option.
|
|
1525
|
+
return `${JSON.stringify(option[this.optionValue])}`;
|
|
1499
1526
|
}
|
|
1500
1527
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1501
|
-
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 }); }
|
|
1502
1529
|
}
|
|
1503
1530
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectBase, decorators: [{
|
|
1504
1531
|
type: Directive
|
|
@@ -1516,6 +1543,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1516
1543
|
type: Input
|
|
1517
1544
|
}], placeholder: [{
|
|
1518
1545
|
type: Input
|
|
1546
|
+
}], optionValue: [{
|
|
1547
|
+
type: Input
|
|
1548
|
+
}], optionLabel: [{
|
|
1549
|
+
type: Input
|
|
1519
1550
|
}], searchPhraseChanged: [{
|
|
1520
1551
|
type: Output
|
|
1521
1552
|
}], onDocumentClick: [{
|
|
@@ -1574,7 +1605,7 @@ class SuisSelectComponent extends SuisSelectSingleBase {
|
|
|
1574
1605
|
multi: true,
|
|
1575
1606
|
useExisting: forwardRef(() => SuisSelectComponent),
|
|
1576
1607
|
},
|
|
1577
|
-
], 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 [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 }); }
|
|
1578
1609
|
}
|
|
1579
1610
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectComponent, decorators: [{
|
|
1580
1611
|
type: Component,
|
|
@@ -1594,7 +1625,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1594
1625
|
multi: true,
|
|
1595
1626
|
useExisting: forwardRef(() => SuisSelectComponent),
|
|
1596
1627
|
},
|
|
1597
|
-
], 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 [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"] }]
|
|
1598
1629
|
}] });
|
|
1599
1630
|
|
|
1600
1631
|
class SuisSelectGroupOptionComponent {
|
|
@@ -1612,10 +1643,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1612
1643
|
}] } });
|
|
1613
1644
|
|
|
1614
1645
|
class SuisSelectFilterGroupOptionsPipe {
|
|
1615
|
-
transform(groupOptions, phrase) {
|
|
1646
|
+
transform(groupOptions, phrase, optionLabel) {
|
|
1616
1647
|
if (!phrase)
|
|
1617
1648
|
return groupOptions;
|
|
1618
|
-
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())));
|
|
1619
1652
|
}
|
|
1620
1653
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectFilterGroupOptionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1621
1654
|
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectFilterGroupOptionsPipe, isStandalone: true, name: "suisSelectFilterGroupOptions" }); }
|
|
@@ -1629,14 +1662,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1629
1662
|
}] });
|
|
1630
1663
|
|
|
1631
1664
|
class SuisSelectGroupLabelPipe {
|
|
1632
|
-
transform(value, groupOptions, placeholder) {
|
|
1665
|
+
transform(value, groupOptions, placeholder, optionValue, optionLabel) {
|
|
1633
1666
|
if (!value)
|
|
1634
1667
|
return placeholder;
|
|
1635
1668
|
const options = groupOptions.map((go) => go.children).flat();
|
|
1636
|
-
const selectedOption = options.find((option) => JSON.stringify(option
|
|
1669
|
+
const selectedOption = options.find((option) => JSON.stringify(option[optionValue]) === JSON.stringify(value));
|
|
1637
1670
|
if (!selectedOption)
|
|
1638
|
-
throw Error('[
|
|
1639
|
-
return selectedOption
|
|
1671
|
+
throw Error('[SuisSelectGroupLabelPipe] Provided value does not belong to valid values');
|
|
1672
|
+
return selectedOption[optionLabel];
|
|
1640
1673
|
}
|
|
1641
1674
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectGroupLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1642
1675
|
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectGroupLabelPipe, isStandalone: true, name: "suisSelectGroupLabel" }); }
|
|
@@ -1667,6 +1700,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1667
1700
|
}]
|
|
1668
1701
|
}] });
|
|
1669
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
|
+
|
|
1670
1718
|
class SuisSelectGroupComponent extends SuisSelectSingleBase {
|
|
1671
1719
|
constructor() {
|
|
1672
1720
|
super(...arguments);
|
|
@@ -1682,7 +1730,7 @@ class SuisSelectGroupComponent extends SuisSelectSingleBase {
|
|
|
1682
1730
|
multi: true,
|
|
1683
1731
|
useExisting: forwardRef(() => SuisSelectGroupComponent),
|
|
1684
1732
|
},
|
|
1685
|
-
], 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 [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 }); }
|
|
1686
1734
|
}
|
|
1687
1735
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectGroupComponent, decorators: [{
|
|
1688
1736
|
type: Component,
|
|
@@ -1697,13 +1745,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1697
1745
|
SuisSelectFilterGroupOptionsPipe,
|
|
1698
1746
|
SuisSelectGroupLabelPipe,
|
|
1699
1747
|
SuisSelectButtonComponent,
|
|
1748
|
+
SuisSelectSortGroupOptionsPipe,
|
|
1700
1749
|
], providers: [
|
|
1701
1750
|
{
|
|
1702
1751
|
provide: NG_VALUE_ACCESSOR,
|
|
1703
1752
|
multi: true,
|
|
1704
1753
|
useExisting: forwardRef(() => SuisSelectGroupComponent),
|
|
1705
1754
|
},
|
|
1706
|
-
], 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 [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"] }]
|
|
1707
1756
|
}], propDecorators: { suisSelectGroupOption: [{
|
|
1708
1757
|
type: ContentChild,
|
|
1709
1758
|
args: [SuisSelectGroupOptionDirective]
|
|
@@ -1712,13 +1761,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1712
1761
|
}] } });
|
|
1713
1762
|
|
|
1714
1763
|
class SuisSelectMultiChipsPipe {
|
|
1715
|
-
transform(values, options) {
|
|
1764
|
+
transform(values, options, optionValue, optionLabel) {
|
|
1716
1765
|
const selectedOptions = [];
|
|
1717
1766
|
values.forEach((value) => {
|
|
1718
|
-
const selectedOption = options.find((option) => JSON.stringify(option
|
|
1767
|
+
const selectedOption = options.find((option) => JSON.stringify(option[optionValue]) === JSON.stringify(value));
|
|
1719
1768
|
if (!selectedOption)
|
|
1720
|
-
throw Error('[
|
|
1721
|
-
selectedOptions.push(selectedOption
|
|
1769
|
+
throw Error('[SuisSelectMultiChips] Provided value does not belong to valid values');
|
|
1770
|
+
selectedOptions.push(selectedOption[optionLabel]);
|
|
1722
1771
|
});
|
|
1723
1772
|
return selectedOptions;
|
|
1724
1773
|
}
|
|
@@ -1827,7 +1876,7 @@ class SuisSelectMultiComponent extends SuisSelectMultiBase {
|
|
|
1827
1876
|
multi: true,
|
|
1828
1877
|
useExisting: forwardRef(() => SuisSelectMultiComponent),
|
|
1829
1878
|
},
|
|
1830
|
-
], 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 [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 }); }
|
|
1831
1880
|
}
|
|
1832
1881
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectMultiComponent, decorators: [{
|
|
1833
1882
|
type: Component,
|
|
@@ -1848,18 +1897,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1848
1897
|
multi: true,
|
|
1849
1898
|
useExisting: forwardRef(() => SuisSelectMultiComponent),
|
|
1850
1899
|
},
|
|
1851
|
-
], 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 [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"] }]
|
|
1852
1901
|
}] });
|
|
1853
1902
|
|
|
1854
1903
|
class SuisSelectMultiGroupChipsPipe {
|
|
1855
|
-
transform(values, groupOptions) {
|
|
1904
|
+
transform(values, groupOptions, optionValue, optionLabel) {
|
|
1856
1905
|
const selectedOptions = [];
|
|
1857
1906
|
const options = groupOptions.map((go) => go.children).flat();
|
|
1858
1907
|
values.forEach((value) => {
|
|
1859
|
-
const selectedOption = options.find((option) => JSON.stringify(option
|
|
1908
|
+
const selectedOption = options.find((option) => JSON.stringify(option[optionValue]) === JSON.stringify(value));
|
|
1860
1909
|
if (!selectedOption)
|
|
1861
|
-
throw Error('[
|
|
1862
|
-
selectedOptions.push(selectedOption
|
|
1910
|
+
throw Error('[SuisSelectMultiGroupChips] Provided value does not belong to valid values');
|
|
1911
|
+
selectedOptions.push(selectedOption[optionLabel]);
|
|
1863
1912
|
});
|
|
1864
1913
|
return selectedOptions;
|
|
1865
1914
|
}
|
|
@@ -1889,7 +1938,7 @@ class SuisSelectMultiGroupComponent extends SuisSelectMultiBase {
|
|
|
1889
1938
|
multi: true,
|
|
1890
1939
|
useExisting: forwardRef(() => SuisSelectMultiGroupComponent),
|
|
1891
1940
|
},
|
|
1892
|
-
], 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 [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 }); }
|
|
1893
1942
|
}
|
|
1894
1943
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectMultiGroupComponent, decorators: [{
|
|
1895
1944
|
type: Component,
|
|
@@ -1905,13 +1954,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1905
1954
|
SuisSelectFilterOptionsPipe,
|
|
1906
1955
|
SuisSelectFilterGroupOptionsPipe,
|
|
1907
1956
|
SuisSelectMultiIsSelectedPipe,
|
|
1957
|
+
SuisSelectSortGroupOptionsPipe,
|
|
1908
1958
|
], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
1909
1959
|
{
|
|
1910
1960
|
provide: NG_VALUE_ACCESSOR,
|
|
1911
1961
|
multi: true,
|
|
1912
1962
|
useExisting: forwardRef(() => SuisSelectMultiGroupComponent),
|
|
1913
1963
|
},
|
|
1914
|
-
], 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 [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"] }]
|
|
1915
1965
|
}], propDecorators: { suisSelectGroupOption: [{
|
|
1916
1966
|
type: ContentChild,
|
|
1917
1967
|
args: [SuisSelectGroupOptionDirective]
|