suis 1.4.0 → 1.6.0
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-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]
|