suis 0.23.1 → 0.23.3

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/fesm2022/suis.mjs CHANGED
@@ -1,11 +1,12 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Pipe, Component, ChangeDetectionStrategy, Input, EventEmitter, Output, Directive, inject, ChangeDetectorRef, ElementRef, forwardRef, ViewChild, HostListener, TemplateRef, ContentChild, signal, Injectable, ContentChildren } from '@angular/core';
2
+ import { Pipe, Component, ChangeDetectionStrategy, Input, EventEmitter, Output, Directive, inject, ChangeDetectorRef, ElementRef, forwardRef, ViewChild, HostListener, TemplateRef, ContentChild, signal, Injectable, DestroyRef, ContentChildren } from '@angular/core';
3
3
  import * as i1 from '@angular/common';
4
4
  import { CommonModule } from '@angular/common';
5
5
  import * as i2 from '@angular/router';
6
6
  import { RouterModule } from '@angular/router';
7
7
  import * as i2$1 from '@angular/forms';
8
8
  import { NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
9
+ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
9
10
 
10
11
  class SuisNgClassPipe {
11
12
  transform(prefix, ...args) {
@@ -1045,13 +1046,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
1045
1046
  }] });
1046
1047
 
1047
1048
  class SuisPaginationPagePipe {
1048
- transform(pageLabel, page, perPage, totalItems) {
1049
+ transform(ofLabel, page, perPage, totalItems) {
1049
1050
  if (totalItems <= 0)
1050
- return `${pageLabel}: 1 / 1 (0 / 0)`;
1051
+ return `1 ${ofLabel} 1`;
1051
1052
  const maxPage = Math.ceil(totalItems / perPage);
1052
- const minItem = page * perPage - perPage + 1;
1053
- const maxItem = page * perPage > totalItems ? totalItems : page * perPage;
1054
- return `${pageLabel}: ${page} / ${maxPage} (${minItem}-${maxItem} / ${totalItems})`;
1053
+ return `${page} ${ofLabel} ${maxPage}`;
1055
1054
  }
1056
1055
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisPaginationPagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
1057
1056
  static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: SuisPaginationPagePipe, isStandalone: true, name: "suisPaginationPage" }); }
@@ -1064,142 +1063,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
1064
1063
  }]
1065
1064
  }] });
1066
1065
 
1067
- class SuisPaginationComponent {
1068
- constructor() {
1069
- /** @internal */
1070
- this.SuisIconType = SuisIconType;
1071
- /** @internal */
1072
- /**
1073
- * Number of the maximum page that can be reached based on totalItems and perPage values.
1074
- */
1075
- this.maxPage = 1;
1076
- /**
1077
- * Number of the page presented. By default set to 1.
1078
- */
1079
- this.page = 1;
1080
- /**
1081
- * Number of items presented per page. By default set to 15.
1082
- */
1083
- this.perPage = 15;
1084
- /**
1085
- * Number of total items in data source. By default set to 0.
1086
- */
1087
- this.totalItems = 0;
1088
- /**
1089
- * Adds margin top above the pagination. By default set to true.
1090
- */
1091
- this.spacing = false;
1092
- /**
1093
- * Sets the page label between the buttons. By default set to 'Page'.
1094
- */
1095
- this.pageLabel = 'Page';
1096
- /**
1097
- * Emits on page value change.
1098
- */
1099
- this.pageChange = new EventEmitter();
1100
- }
1101
- ngOnChanges(changes) {
1102
- if (changes['totalItems'] || changes['perPage']) {
1103
- this.maxPage = Math.ceil(this.totalItems / this.perPage);
1104
- }
1105
- }
1106
- next() {
1107
- if (this.page < this.maxPage) {
1108
- this.page++;
1109
- this.pageChange.emit(this.page);
1110
- }
1111
- }
1112
- previous() {
1113
- if (this.page > 1) {
1114
- this.page--;
1115
- this.pageChange.emit(this.page);
1116
- }
1117
- }
1118
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1119
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisPaginationComponent, isStandalone: true, selector: "suis-pagination", inputs: { page: "page", perPage: "perPage", totalItems: "totalItems", spacing: "spacing", pageLabel: "pageLabel" }, outputs: { pageChange: "pageChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"suis-pagination\" [class.suis-pagination--spacing]=\"true\">\n <suis-button color=\"secondary\" [disabled]=\"page === 1\" (click)=\"previous()\">\n <suis-icon [type]=\"SuisIconType.CHEVRON_LEFT\" color=\"white\"></suis-icon>\n </suis-button>\n <div>\n {{ pageLabel | suisPaginationPage : page : perPage : totalItems }}\n </div>\n <suis-button color=\"secondary\" [disabled]=\"page === maxPage\" (click)=\"next()\">\n <suis-icon [type]=\"SuisIconType.CHEVRON_RIGHT\" color=\"white\"></suis-icon>\n </suis-button>\n</div>\n", styles: [".suis-pagination{display:flex;align-items:center;justify-content:center}.suis-pagination--spacing{margin-top:1rem}.suis-pagination suis-button:first-child{margin-right:1rem}.suis-pagination suis-button:last-child{margin-left:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }, { kind: "component", type: SuisButtonComponent, selector: "suis-button" }, { kind: "pipe", type: SuisPaginationPagePipe, name: "suisPaginationPage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1120
- }
1121
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisPaginationComponent, decorators: [{
1122
- type: Component,
1123
- args: [{ selector: 'suis-pagination', standalone: true, imports: [
1124
- CommonModule,
1125
- SuisIconComponent,
1126
- SuisButtonComponent,
1127
- SuisPaginationPagePipe,
1128
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-pagination\" [class.suis-pagination--spacing]=\"true\">\n <suis-button color=\"secondary\" [disabled]=\"page === 1\" (click)=\"previous()\">\n <suis-icon [type]=\"SuisIconType.CHEVRON_LEFT\" color=\"white\"></suis-icon>\n </suis-button>\n <div>\n {{ pageLabel | suisPaginationPage : page : perPage : totalItems }}\n </div>\n <suis-button color=\"secondary\" [disabled]=\"page === maxPage\" (click)=\"next()\">\n <suis-icon [type]=\"SuisIconType.CHEVRON_RIGHT\" color=\"white\"></suis-icon>\n </suis-button>\n</div>\n", styles: [".suis-pagination{display:flex;align-items:center;justify-content:center}.suis-pagination--spacing{margin-top:1rem}.suis-pagination suis-button:first-child{margin-right:1rem}.suis-pagination suis-button:last-child{margin-left:1rem}\n"] }]
1129
- }], propDecorators: { page: [{
1130
- type: Input
1131
- }], perPage: [{
1132
- type: Input
1133
- }], totalItems: [{
1134
- type: Input
1135
- }], spacing: [{
1136
- type: Input
1137
- }], pageLabel: [{
1138
- type: Input
1139
- }], pageChange: [{
1140
- type: Output
1141
- }] } });
1142
-
1143
- class SuisProgressBarPipe {
1144
- transform(value) {
1145
- return `${(value / 100) * 100}%`;
1066
+ class SuisPaginationItemsPipe {
1067
+ transform(ofLabel, page, perPage, totalItems, itemsLabel) {
1068
+ if (totalItems <= 0)
1069
+ return `0-0 ${ofLabel} 0 ${itemsLabel}`;
1070
+ const minItem = page * perPage - perPage + 1;
1071
+ const maxItem = page * perPage > totalItems ? totalItems : page * perPage;
1072
+ return `${minItem}-${maxItem} ${ofLabel} ${totalItems} ${itemsLabel}`;
1146
1073
  }
1147
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisProgressBarPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
1148
- static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: SuisProgressBarPipe, isStandalone: true, name: "suisProgressBar" }); }
1074
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisPaginationItemsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
1075
+ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: SuisPaginationItemsPipe, isStandalone: true, name: "suisPaginationItems" }); }
1149
1076
  }
1150
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisProgressBarPipe, decorators: [{
1077
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisPaginationItemsPipe, decorators: [{
1151
1078
  type: Pipe,
1152
1079
  args: [{
1153
1080
  standalone: true,
1154
- name: 'suisProgressBar',
1081
+ name: 'suisPaginationItems',
1155
1082
  }]
1156
1083
  }] });
1157
1084
 
1158
- class SuisProgressBarComponent {
1159
- constructor() {
1160
- /** @internal */
1161
- this._value = 0;
1162
- /**
1163
- * Sets the color of the progress bar. Type of SuisColor. By default set to 'primary'.
1164
- */
1165
- this.color = 'primary';
1166
- /**
1167
- * Sets the background color of the progress bar. Type of SuisColor. By default set to 'tertiary'.
1168
- */
1169
- this.backgroundColor = 'tertiary';
1170
- }
1171
- /** @internal */
1172
- get value() {
1173
- return this._value;
1174
- }
1175
- /**
1176
- * Width of the progress bar in percentage (value >= 0 && value <= 100). By default set to 0.
1177
- */
1178
- set value(value) {
1179
- if (value >= 0 && value <= 100) {
1180
- this._value = value;
1181
- }
1182
- else if (value > 100) {
1183
- this._value = 100;
1184
- }
1185
- else {
1186
- this._value = 0;
1187
- }
1188
- }
1189
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1190
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisProgressBarComponent, isStandalone: true, selector: "suis-progress-bar", inputs: { value: "value", color: "color", backgroundColor: "backgroundColor" }, ngImport: i0, template: "<div\n class=\"suis-progress-bar\"\n [ngClass]=\"'suis-progress-bar' | suisNgClass : backgroundColor\"\n>\n <div\n class=\"suis-progress-bar__progress\"\n [style]=\"{ width: value | suisProgressBar }\"\n [ngClass]=\"'suis-progress-bar__progress' | suisNgClass : color\"\n ></div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-progress-bar{width:100%;border-radius:1rem;height:1rem}.suis-progress-bar--primary{background-color:#192a56}.suis-progress-bar--secondary{background-color:#273c75}.suis-progress-bar--tertiary{background-color:#dcdde1}.suis-progress-bar--complementary{background-color:#f5f6fa}.suis-progress-bar--success{background-color:#2ed573}.suis-progress-bar--warning{background-color:#ffa502}.suis-progress-bar--danger{background-color:#ff4757}.suis-progress-bar--white{background-color:#fff}.suis-progress-bar--gray{background-color:#bcbcbc}.suis-progress-bar--dark{background-color:#000}.suis-progress-bar__progress{border-radius:1rem;height:1rem}.suis-progress-bar__progress--primary{background-color:#192a56}.suis-progress-bar__progress--secondary{background-color:#273c75}.suis-progress-bar__progress--tertiary{background-color:#dcdde1}.suis-progress-bar__progress--complementary{background-color:#f5f6fa}.suis-progress-bar__progress--success{background-color:#2ed573}.suis-progress-bar__progress--warning{background-color:#ffa502}.suis-progress-bar__progress--danger{background-color:#ff4757}.suis-progress-bar__progress--white{background-color:#fff}.suis-progress-bar__progress--gray{background-color:#bcbcbc}.suis-progress-bar__progress--dark{background-color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }, { kind: "pipe", type: SuisProgressBarPipe, name: "suisProgressBar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1191
- }
1192
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisProgressBarComponent, decorators: [{
1193
- type: Component,
1194
- args: [{ selector: 'suis-progress-bar', standalone: true, imports: [CommonModule, SuisNgClassPipe, SuisProgressBarPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-progress-bar\"\n [ngClass]=\"'suis-progress-bar' | suisNgClass : backgroundColor\"\n>\n <div\n class=\"suis-progress-bar__progress\"\n [style]=\"{ width: value | suisProgressBar }\"\n [ngClass]=\"'suis-progress-bar__progress' | suisNgClass : color\"\n ></div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-progress-bar{width:100%;border-radius:1rem;height:1rem}.suis-progress-bar--primary{background-color:#192a56}.suis-progress-bar--secondary{background-color:#273c75}.suis-progress-bar--tertiary{background-color:#dcdde1}.suis-progress-bar--complementary{background-color:#f5f6fa}.suis-progress-bar--success{background-color:#2ed573}.suis-progress-bar--warning{background-color:#ffa502}.suis-progress-bar--danger{background-color:#ff4757}.suis-progress-bar--white{background-color:#fff}.suis-progress-bar--gray{background-color:#bcbcbc}.suis-progress-bar--dark{background-color:#000}.suis-progress-bar__progress{border-radius:1rem;height:1rem}.suis-progress-bar__progress--primary{background-color:#192a56}.suis-progress-bar__progress--secondary{background-color:#273c75}.suis-progress-bar__progress--tertiary{background-color:#dcdde1}.suis-progress-bar__progress--complementary{background-color:#f5f6fa}.suis-progress-bar__progress--success{background-color:#2ed573}.suis-progress-bar__progress--warning{background-color:#ffa502}.suis-progress-bar__progress--danger{background-color:#ff4757}.suis-progress-bar__progress--white{background-color:#fff}.suis-progress-bar__progress--gray{background-color:#bcbcbc}.suis-progress-bar__progress--dark{background-color:#000}\n"] }]
1195
- }], propDecorators: { value: [{
1196
- type: Input
1197
- }], color: [{
1198
- type: Input
1199
- }], backgroundColor: [{
1200
- type: Input
1201
- }] } });
1202
-
1203
1085
  class SuisSelectLabelPipe {
1204
1086
  transform(value, options, placeholder) {
1205
1087
  if (!value)
@@ -1312,6 +1194,10 @@ class SuisSelectComponent extends SuisSelectBase {
1312
1194
  super(...arguments);
1313
1195
  /** @internal */
1314
1196
  this.value = null;
1197
+ /**
1198
+ * Allows mechanism of clearing value. By default set to true.
1199
+ */
1200
+ this.nullable = true;
1315
1201
  }
1316
1202
  writeValue(obj) {
1317
1203
  this.value = obj;
@@ -1319,9 +1205,13 @@ class SuisSelectComponent extends SuisSelectBase {
1319
1205
  this.cdRef.markForCheck();
1320
1206
  }
1321
1207
  onSelect(value) {
1322
- if (JSON.stringify(this.value) === JSON.stringify(value))
1323
- return this.clearValue();
1324
- this.setValue(value);
1208
+ if (JSON.stringify(this.value) === JSON.stringify(value)) {
1209
+ if (this.nullable)
1210
+ this.clearValue();
1211
+ }
1212
+ else {
1213
+ this.setValue(value);
1214
+ }
1325
1215
  }
1326
1216
  clearValue() {
1327
1217
  this.setValue(null);
@@ -1334,13 +1224,13 @@ class SuisSelectComponent extends SuisSelectBase {
1334
1224
  this.cdRef.markForCheck();
1335
1225
  }
1336
1226
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
1337
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisSelectComponent, isStandalone: true, selector: "suis-select", providers: [
1227
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisSelectComponent, isStandalone: true, selector: "suis-select", inputs: { nullable: "nullable" }, providers: [
1338
1228
  {
1339
1229
  provide: NG_VALUE_ACCESSOR,
1340
1230
  multi: true,
1341
1231
  useExisting: forwardRef(() => SuisSelectComponent),
1342
1232
  },
1343
- ], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select\">\n <button\n type=\"button\"\n (click)=\"onExpand()\"\n class=\"suis-select__button\"\n [class.suis-select__button--invalid]=\"invalid\"\n [disabled]=\"readonly\"\n >\n <span class=\"suis-select__button__value\">\n {{ value | suisSelectLabel : options : placeholder }}\n </span>\n <span class=\"suis-select__button__actions\">\n <suis-icon\n *ngIf=\"value\"\n class=\"suis-select__button__cross\"\n [type]=\"SuisIconType.CROSS\"\n size=\"lg\"\n color=\"primary\"\n (click)=\"onClear($event)\"\n ></suis-icon>\n <suis-icon\n class=\"suis-select__button__chevron\"\n [type]=\"expanded ? SuisIconType.CHEVRON_UP : SuisIconType.CHEVRON_DOWN\"\n size=\"lg\"\n color=\"primary\"\n ></suis-icon>\n </span>\n </button>\n <div *ngIf=\"expanded\" class=\"suis-select__list\">\n <input\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\n | suisSelectFilterOptions : searchPhrase;\n trackBy: optionTrackBy\n \"\n [option]=\"option\"\n [templateRef]=\"suisSelectOption?.templateRef\"\n [selected]=\"option.value | suisSelectIsSelected : value\"\n (clicked)=\"onSelect(option.value)\"\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)}}.suis-select{position:relative}.suis-select__button{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;position:relative;display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem .25rem 1rem;cursor:pointer}.suis-select__button:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-select__button--invalid{box-shadow:0 2px 5px #ff4757bf}.suis-select__button__value{width:100%;text-align:left;text-overflow:ellipsis;text-wrap:nowrap;overflow:hidden}.suis-select__button__actions{margin-left:.25rem;display:flex;justify-content:right;align-items:center}.suis-select__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000080;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2rem;left:0;max-height:12.25rem;overflow-y:auto}.suis-select__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem}.suis-select__list__search:focus{outline:none}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }, { kind: "component", type: SuisSelectOptionComponent, selector: "suis-select-option", inputs: ["option", "templateRef", "selected", "checkbox"], outputs: ["clicked"] }, { 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 }); }
1233
+ ], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select\">\n <button\n type=\"button\"\n (click)=\"onExpand()\"\n class=\"suis-select__button\"\n [class.suis-select__button--invalid]=\"invalid\"\n [disabled]=\"readonly\"\n >\n <span class=\"suis-select__button__value\">\n {{ value | suisSelectLabel : options : placeholder }}\n </span>\n <span class=\"suis-select__button__actions\">\n <suis-icon\n *ngIf=\"nullable && value\"\n class=\"suis-select__button__cross\"\n [type]=\"SuisIconType.CROSS\"\n size=\"lg\"\n color=\"primary\"\n (click)=\"onClear($event)\"\n ></suis-icon>\n <suis-icon\n class=\"suis-select__button__chevron\"\n [type]=\"expanded ? SuisIconType.CHEVRON_UP : SuisIconType.CHEVRON_DOWN\"\n size=\"lg\"\n color=\"primary\"\n ></suis-icon>\n </span>\n </button>\n <div *ngIf=\"expanded\" class=\"suis-select__list\">\n <input\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\n | suisSelectFilterOptions : searchPhrase;\n trackBy: optionTrackBy\n \"\n [option]=\"option\"\n [templateRef]=\"suisSelectOption?.templateRef\"\n [selected]=\"option.value | suisSelectIsSelected : value\"\n (clicked)=\"onSelect(option.value)\"\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)}}.suis-select{position:relative}.suis-select__button{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;min-width:5rem;position:relative;display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem .25rem 1rem;cursor:pointer}.suis-select__button:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-select__button--invalid{box-shadow:0 2px 5px #ff4757bf}.suis-select__button__value{width:100%;text-align:left;text-overflow:ellipsis;text-wrap:nowrap;overflow:hidden}.suis-select__button__actions{margin-left:.25rem;display:flex;justify-content:right;align-items:center}.suis-select__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000080;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2rem;left:0;max-height:12.25rem;overflow-y:auto}.suis-select__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem}.suis-select__list__search:focus{outline:none}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }, { kind: "component", type: SuisSelectOptionComponent, selector: "suis-select-option", inputs: ["option", "templateRef", "selected", "checkbox"], outputs: ["clicked"] }, { 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 }); }
1344
1234
  }
1345
1235
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectComponent, decorators: [{
1346
1236
  type: Component,
@@ -1359,9 +1249,204 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
1359
1249
  multi: true,
1360
1250
  useExisting: forwardRef(() => SuisSelectComponent),
1361
1251
  },
1362
- ], template: "<div class=\"suis-select\">\n <button\n type=\"button\"\n (click)=\"onExpand()\"\n class=\"suis-select__button\"\n [class.suis-select__button--invalid]=\"invalid\"\n [disabled]=\"readonly\"\n >\n <span class=\"suis-select__button__value\">\n {{ value | suisSelectLabel : options : placeholder }}\n </span>\n <span class=\"suis-select__button__actions\">\n <suis-icon\n *ngIf=\"value\"\n class=\"suis-select__button__cross\"\n [type]=\"SuisIconType.CROSS\"\n size=\"lg\"\n color=\"primary\"\n (click)=\"onClear($event)\"\n ></suis-icon>\n <suis-icon\n class=\"suis-select__button__chevron\"\n [type]=\"expanded ? SuisIconType.CHEVRON_UP : SuisIconType.CHEVRON_DOWN\"\n size=\"lg\"\n color=\"primary\"\n ></suis-icon>\n </span>\n </button>\n <div *ngIf=\"expanded\" class=\"suis-select__list\">\n <input\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\n | suisSelectFilterOptions : searchPhrase;\n trackBy: optionTrackBy\n \"\n [option]=\"option\"\n [templateRef]=\"suisSelectOption?.templateRef\"\n [selected]=\"option.value | suisSelectIsSelected : value\"\n (clicked)=\"onSelect(option.value)\"\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)}}.suis-select{position:relative}.suis-select__button{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;position:relative;display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem .25rem 1rem;cursor:pointer}.suis-select__button:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-select__button--invalid{box-shadow:0 2px 5px #ff4757bf}.suis-select__button__value{width:100%;text-align:left;text-overflow:ellipsis;text-wrap:nowrap;overflow:hidden}.suis-select__button__actions{margin-left:.25rem;display:flex;justify-content:right;align-items:center}.suis-select__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000080;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2rem;left:0;max-height:12.25rem;overflow-y:auto}.suis-select__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem}.suis-select__list__search:focus{outline:none}.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}\n"] }]
1252
+ ], template: "<div class=\"suis-select\">\n <button\n type=\"button\"\n (click)=\"onExpand()\"\n class=\"suis-select__button\"\n [class.suis-select__button--invalid]=\"invalid\"\n [disabled]=\"readonly\"\n >\n <span class=\"suis-select__button__value\">\n {{ value | suisSelectLabel : options : placeholder }}\n </span>\n <span class=\"suis-select__button__actions\">\n <suis-icon\n *ngIf=\"nullable && value\"\n class=\"suis-select__button__cross\"\n [type]=\"SuisIconType.CROSS\"\n size=\"lg\"\n color=\"primary\"\n (click)=\"onClear($event)\"\n ></suis-icon>\n <suis-icon\n class=\"suis-select__button__chevron\"\n [type]=\"expanded ? SuisIconType.CHEVRON_UP : SuisIconType.CHEVRON_DOWN\"\n size=\"lg\"\n color=\"primary\"\n ></suis-icon>\n </span>\n </button>\n <div *ngIf=\"expanded\" class=\"suis-select__list\">\n <input\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\n | suisSelectFilterOptions : searchPhrase;\n trackBy: optionTrackBy\n \"\n [option]=\"option\"\n [templateRef]=\"suisSelectOption?.templateRef\"\n [selected]=\"option.value | suisSelectIsSelected : value\"\n (clicked)=\"onSelect(option.value)\"\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)}}.suis-select{position:relative}.suis-select__button{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;min-width:5rem;position:relative;display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem .25rem 1rem;cursor:pointer}.suis-select__button:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-select__button--invalid{box-shadow:0 2px 5px #ff4757bf}.suis-select__button__value{width:100%;text-align:left;text-overflow:ellipsis;text-wrap:nowrap;overflow:hidden}.suis-select__button__actions{margin-left:.25rem;display:flex;justify-content:right;align-items:center}.suis-select__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000080;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2rem;left:0;max-height:12.25rem;overflow-y:auto}.suis-select__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem}.suis-select__list__search:focus{outline:none}.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}\n"] }]
1253
+ }], propDecorators: { nullable: [{
1254
+ type: Input
1255
+ }] } });
1256
+
1257
+ class SuisPaginationPerPageOptionsPipe {
1258
+ transform(options) {
1259
+ return options.map((option) => {
1260
+ return { value: option, label: option.toString() };
1261
+ });
1262
+ }
1263
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisPaginationPerPageOptionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
1264
+ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: SuisPaginationPerPageOptionsPipe, isStandalone: true, name: "suisPaginationPerPageOptions" }); }
1265
+ }
1266
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisPaginationPerPageOptionsPipe, decorators: [{
1267
+ type: Pipe,
1268
+ args: [{
1269
+ standalone: true,
1270
+ name: 'suisPaginationPerPageOptions',
1271
+ }]
1363
1272
  }] });
1364
1273
 
1274
+ class SuisPaginationComponent {
1275
+ constructor() {
1276
+ this.destroyRef = inject(DestroyRef);
1277
+ /** @internal */
1278
+ this.SuisIconType = SuisIconType;
1279
+ /** @internal */
1280
+ /**
1281
+ * Number of the maximum page that can be reached based on totalItems and perPage values.
1282
+ */
1283
+ this.maxPage = 1;
1284
+ /**
1285
+ * Number of the page presented. By default set to 1.
1286
+ */
1287
+ this.page = 1;
1288
+ /**
1289
+ * Number of items presented per page. By default set to 15.
1290
+ */
1291
+ this.perPage = 15;
1292
+ /**
1293
+ * Options of perPage dropdown. Be default set to [10, 15, 20, 25].
1294
+ */
1295
+ this.perPageOptions = [10, 15, 20, 25];
1296
+ /**
1297
+ * Number of total items in data source. By default set to 0.
1298
+ */
1299
+ this.totalItems = 0;
1300
+ /**
1301
+ * Adds margin top above the pagination. By default set to true.
1302
+ */
1303
+ this.spacing = false;
1304
+ /**
1305
+ * Sets the of label "1 'of' 25". By default set to 'of'.
1306
+ */
1307
+ this.ofLabel = 'of';
1308
+ /**
1309
+ * Sets the page label "1-10 'of' 25 'items'". By default set to 'Page'.
1310
+ */
1311
+ this.itemsLabel = 'items';
1312
+ /**
1313
+ * Emits on page value change.
1314
+ */
1315
+ this.pageChange = new EventEmitter();
1316
+ /**
1317
+ * Emits on perPage value change.
1318
+ */
1319
+ this.perPageChange = new EventEmitter();
1320
+ /** @internal */
1321
+ this.perPageControl = new FormControl(this.perPage, {
1322
+ nonNullable: true,
1323
+ });
1324
+ }
1325
+ ngOnInit() {
1326
+ this.perPageControl.valueChanges
1327
+ .pipe(takeUntilDestroyed(this.destroyRef))
1328
+ .subscribe((value) => {
1329
+ this.onPerPageChange(value);
1330
+ });
1331
+ }
1332
+ ngOnChanges(changes) {
1333
+ if (changes['totalItems'] || changes['perPage']) {
1334
+ this.maxPage = Math.ceil(this.totalItems / this.perPage);
1335
+ }
1336
+ }
1337
+ next() {
1338
+ if (this.page < this.maxPage) {
1339
+ this.page++;
1340
+ this.pageChange.emit(this.page);
1341
+ }
1342
+ }
1343
+ previous() {
1344
+ if (this.page > 1) {
1345
+ this.page--;
1346
+ this.pageChange.emit(this.page);
1347
+ }
1348
+ }
1349
+ onPerPageChange(value) {
1350
+ this.page = 1;
1351
+ this.perPage = value;
1352
+ this.pageChange.emit(this.page);
1353
+ this.perPageChange.emit(this.perPage);
1354
+ }
1355
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1356
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisPaginationComponent, isStandalone: true, selector: "suis-pagination", inputs: { page: "page", perPage: "perPage", perPageOptions: "perPageOptions", totalItems: "totalItems", spacing: "spacing", ofLabel: "ofLabel", itemsLabel: "itemsLabel" }, outputs: { pageChange: "pageChange", perPageChange: "perPageChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"suis-pagination\" [class.suis-pagination--spacing]=\"true\">\n <div>\n <suis-select\n [formControl]=\"perPageControl\"\n [options]=\"perPageOptions | suisPaginationPerPageOptions\"\n [search]=\"false\"\n [nullable]=\"false\"\n ></suis-select>\n </div>\n <div class=\"suis-pagination__actions\">\n <suis-button color=\"secondary\" [disabled]=\"page === 1\" (click)=\"previous()\">\n <suis-icon [type]=\"SuisIconType.CHEVRON_LEFT\" color=\"white\"></suis-icon>\n </suis-button>\n <div>\n {{ ofLabel | suisPaginationPage : page : perPage : totalItems }}\n </div>\n <suis-button color=\"secondary\" [disabled]=\"page === maxPage\" (click)=\"next()\">\n <suis-icon [type]=\"SuisIconType.CHEVRON_RIGHT\" color=\"white\"></suis-icon>\n </suis-button>\n </div>\n <div class=\"suis-pagination__items\">\n {{ ofLabel | suisPaginationItems : page : perPage : totalItems : itemsLabel }}\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-pagination{display:flex;align-items:center;justify-content:space-between;padding:0 1rem;font-size:.875rem}.suis-pagination__actions{display:flex;align-items:center;justify-content:center}.suis-pagination__items{color:#a4a7b0}.suis-pagination--spacing{margin-top:1rem}.suis-pagination suis-button:first-child{margin-right:1rem}.suis-pagination suis-button:last-child{margin-left:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }, { kind: "component", type: SuisButtonComponent, selector: "suis-button" }, { kind: "pipe", type: SuisPaginationPagePipe, name: "suisPaginationPage" }, { kind: "pipe", type: SuisPaginationItemsPipe, name: "suisPaginationItems" }, { kind: "pipe", type: SuisPaginationPerPageOptionsPipe, name: "suisPaginationPerPageOptions" }, { kind: "component", type: SuisSelectComponent, selector: "suis-select", inputs: ["nullable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1357
+ }
1358
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisPaginationComponent, decorators: [{
1359
+ type: Component,
1360
+ args: [{ selector: 'suis-pagination', standalone: true, imports: [
1361
+ CommonModule,
1362
+ ReactiveFormsModule,
1363
+ SuisIconComponent,
1364
+ SuisButtonComponent,
1365
+ SuisPaginationPagePipe,
1366
+ SuisPaginationItemsPipe,
1367
+ SuisPaginationPerPageOptionsPipe,
1368
+ SuisSelectComponent,
1369
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-pagination\" [class.suis-pagination--spacing]=\"true\">\n <div>\n <suis-select\n [formControl]=\"perPageControl\"\n [options]=\"perPageOptions | suisPaginationPerPageOptions\"\n [search]=\"false\"\n [nullable]=\"false\"\n ></suis-select>\n </div>\n <div class=\"suis-pagination__actions\">\n <suis-button color=\"secondary\" [disabled]=\"page === 1\" (click)=\"previous()\">\n <suis-icon [type]=\"SuisIconType.CHEVRON_LEFT\" color=\"white\"></suis-icon>\n </suis-button>\n <div>\n {{ ofLabel | suisPaginationPage : page : perPage : totalItems }}\n </div>\n <suis-button color=\"secondary\" [disabled]=\"page === maxPage\" (click)=\"next()\">\n <suis-icon [type]=\"SuisIconType.CHEVRON_RIGHT\" color=\"white\"></suis-icon>\n </suis-button>\n </div>\n <div class=\"suis-pagination__items\">\n {{ ofLabel | suisPaginationItems : page : perPage : totalItems : itemsLabel }}\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-pagination{display:flex;align-items:center;justify-content:space-between;padding:0 1rem;font-size:.875rem}.suis-pagination__actions{display:flex;align-items:center;justify-content:center}.suis-pagination__items{color:#a4a7b0}.suis-pagination--spacing{margin-top:1rem}.suis-pagination suis-button:first-child{margin-right:1rem}.suis-pagination suis-button:last-child{margin-left:1rem}\n"] }]
1370
+ }], propDecorators: { page: [{
1371
+ type: Input
1372
+ }], perPage: [{
1373
+ type: Input
1374
+ }], perPageOptions: [{
1375
+ type: Input
1376
+ }], totalItems: [{
1377
+ type: Input
1378
+ }], spacing: [{
1379
+ type: Input
1380
+ }], ofLabel: [{
1381
+ type: Input
1382
+ }], itemsLabel: [{
1383
+ type: Input
1384
+ }], pageChange: [{
1385
+ type: Output
1386
+ }], perPageChange: [{
1387
+ type: Output
1388
+ }] } });
1389
+
1390
+ class SuisProgressBarPipe {
1391
+ transform(value) {
1392
+ return `${(value / 100) * 100}%`;
1393
+ }
1394
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisProgressBarPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
1395
+ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: SuisProgressBarPipe, isStandalone: true, name: "suisProgressBar" }); }
1396
+ }
1397
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisProgressBarPipe, decorators: [{
1398
+ type: Pipe,
1399
+ args: [{
1400
+ standalone: true,
1401
+ name: 'suisProgressBar',
1402
+ }]
1403
+ }] });
1404
+
1405
+ class SuisProgressBarComponent {
1406
+ constructor() {
1407
+ /** @internal */
1408
+ this._value = 0;
1409
+ /**
1410
+ * Sets the color of the progress bar. Type of SuisColor. By default set to 'primary'.
1411
+ */
1412
+ this.color = 'primary';
1413
+ /**
1414
+ * Sets the background color of the progress bar. Type of SuisColor. By default set to 'tertiary'.
1415
+ */
1416
+ this.backgroundColor = 'tertiary';
1417
+ }
1418
+ /** @internal */
1419
+ get value() {
1420
+ return this._value;
1421
+ }
1422
+ /**
1423
+ * Width of the progress bar in percentage (value >= 0 && value <= 100). By default set to 0.
1424
+ */
1425
+ set value(value) {
1426
+ if (value >= 0 && value <= 100) {
1427
+ this._value = value;
1428
+ }
1429
+ else if (value > 100) {
1430
+ this._value = 100;
1431
+ }
1432
+ else {
1433
+ this._value = 0;
1434
+ }
1435
+ }
1436
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1437
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisProgressBarComponent, isStandalone: true, selector: "suis-progress-bar", inputs: { value: "value", color: "color", backgroundColor: "backgroundColor" }, ngImport: i0, template: "<div\n class=\"suis-progress-bar\"\n [ngClass]=\"'suis-progress-bar' | suisNgClass : backgroundColor\"\n>\n <div\n class=\"suis-progress-bar__progress\"\n [style]=\"{ width: value | suisProgressBar }\"\n [ngClass]=\"'suis-progress-bar__progress' | suisNgClass : color\"\n ></div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-progress-bar{width:100%;border-radius:1rem;height:1rem}.suis-progress-bar--primary{background-color:#192a56}.suis-progress-bar--secondary{background-color:#273c75}.suis-progress-bar--tertiary{background-color:#dcdde1}.suis-progress-bar--complementary{background-color:#f5f6fa}.suis-progress-bar--success{background-color:#2ed573}.suis-progress-bar--warning{background-color:#ffa502}.suis-progress-bar--danger{background-color:#ff4757}.suis-progress-bar--white{background-color:#fff}.suis-progress-bar--gray{background-color:#bcbcbc}.suis-progress-bar--dark{background-color:#000}.suis-progress-bar__progress{border-radius:1rem;height:1rem}.suis-progress-bar__progress--primary{background-color:#192a56}.suis-progress-bar__progress--secondary{background-color:#273c75}.suis-progress-bar__progress--tertiary{background-color:#dcdde1}.suis-progress-bar__progress--complementary{background-color:#f5f6fa}.suis-progress-bar__progress--success{background-color:#2ed573}.suis-progress-bar__progress--warning{background-color:#ffa502}.suis-progress-bar__progress--danger{background-color:#ff4757}.suis-progress-bar__progress--white{background-color:#fff}.suis-progress-bar__progress--gray{background-color:#bcbcbc}.suis-progress-bar__progress--dark{background-color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }, { kind: "pipe", type: SuisProgressBarPipe, name: "suisProgressBar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1438
+ }
1439
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisProgressBarComponent, decorators: [{
1440
+ type: Component,
1441
+ args: [{ selector: 'suis-progress-bar', standalone: true, imports: [CommonModule, SuisNgClassPipe, SuisProgressBarPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-progress-bar\"\n [ngClass]=\"'suis-progress-bar' | suisNgClass : backgroundColor\"\n>\n <div\n class=\"suis-progress-bar__progress\"\n [style]=\"{ width: value | suisProgressBar }\"\n [ngClass]=\"'suis-progress-bar__progress' | suisNgClass : color\"\n ></div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-progress-bar{width:100%;border-radius:1rem;height:1rem}.suis-progress-bar--primary{background-color:#192a56}.suis-progress-bar--secondary{background-color:#273c75}.suis-progress-bar--tertiary{background-color:#dcdde1}.suis-progress-bar--complementary{background-color:#f5f6fa}.suis-progress-bar--success{background-color:#2ed573}.suis-progress-bar--warning{background-color:#ffa502}.suis-progress-bar--danger{background-color:#ff4757}.suis-progress-bar--white{background-color:#fff}.suis-progress-bar--gray{background-color:#bcbcbc}.suis-progress-bar--dark{background-color:#000}.suis-progress-bar__progress{border-radius:1rem;height:1rem}.suis-progress-bar__progress--primary{background-color:#192a56}.suis-progress-bar__progress--secondary{background-color:#273c75}.suis-progress-bar__progress--tertiary{background-color:#dcdde1}.suis-progress-bar__progress--complementary{background-color:#f5f6fa}.suis-progress-bar__progress--success{background-color:#2ed573}.suis-progress-bar__progress--warning{background-color:#ffa502}.suis-progress-bar__progress--danger{background-color:#ff4757}.suis-progress-bar__progress--white{background-color:#fff}.suis-progress-bar__progress--gray{background-color:#bcbcbc}.suis-progress-bar__progress--dark{background-color:#000}\n"] }]
1442
+ }], propDecorators: { value: [{
1443
+ type: Input
1444
+ }], color: [{
1445
+ type: Input
1446
+ }], backgroundColor: [{
1447
+ type: Input
1448
+ }] } });
1449
+
1365
1450
  class SuisSelectMultiChipsPipe {
1366
1451
  transform(values, options) {
1367
1452
  const selectedOptions = [];
@@ -1454,7 +1539,7 @@ class SuisSelectMultiComponent extends SuisSelectBase {
1454
1539
  multi: true,
1455
1540
  useExisting: forwardRef(() => SuisSelectMultiComponent),
1456
1541
  },
1457
- ], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select-multi\">\n <button\n type=\"button\"\n (click)=\"onExpand()\"\n class=\"suis-select-multi__button\"\n [class.suis-select-multi__button--invalid]=\"invalid\"\n [class.suis-select-multi__button--valid]=\"values.length > 0\"\n [disabled]=\"readonly\"\n >\n <span class=\"suis-select-multi__button__value\">\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 | suisSelectMultiChips : options;\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 </span>\n <span class=\"suis-select-multi__button__actions\">\n <suis-icon\n *ngIf=\"values?.length\"\n class=\"suis-select-multi__button__cross\"\n [type]=\"SuisIconType.CROSS\"\n size=\"lg\"\n color=\"primary\"\n (click)=\"onClear($event)\"\n tabindex=\"0\"\n ></suis-icon>\n <suis-icon\n class=\"suis-select-multi__button__chevron\"\n [type]=\"expanded ? SuisIconType.CHEVRON_UP : SuisIconType.CHEVRON_DOWN\"\n size=\"lg\"\n color=\"primary\"\n tabindex=\"0\"\n ></suis-icon>\n </span>\n </button>\n <div *ngIf=\"expanded\" class=\"suis-select-multi__list\">\n <input\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\n | suisSelectFilterOptions : searchPhrase;\n trackBy: optionTrackBy\n \"\n [option]=\"option\"\n [templateRef]=\"suisSelectOption?.templateRef\"\n [selected]=\"option.value | suisSelectMultiIsSelected : values\"\n [checkbox]=\"!duplicate\"\n (clicked)=\"onSelect(option.value)\"\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)}}.suis-select-multi{position:relative}.suis-select-multi__button{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;position:relative;display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem .25rem 1rem;cursor:pointer}.suis-select-multi__button:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-select-multi__button--invalid{box-shadow:0 2px 5px #ff4757bf}.suis-select-multi__button__value{width:100%;text-align:left;text-overflow:ellipsis;text-wrap:nowrap;overflow:hidden}.suis-select-multi__button__actions{margin-left:.25rem;display:flex;justify-content:right;align-items:center}.suis-select-multi__button--valid{padding-bottom:.125rem}.suis-select-multi__button suis-chip{margin-right:.25rem;margin-bottom:.125rem}.suis-select-multi__button suis-chip:last-child{margin-right:0}.suis-select-multi__button__value{display:flex;flex-wrap:wrap}.suis-select-multi__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000080;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2rem;left:0;max-height:12.25rem;overflow-y:auto}.suis-select-multi__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem}.suis-select-multi__list__search:focus{outline:none}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }, { kind: "component", type: SuisChipComponent, selector: "suis-chip", inputs: ["color", "iconColor", "removable"], outputs: ["remove"] }, { kind: "component", type: SuisSelectOptionComponent, selector: "suis-select-option", inputs: ["option", "templateRef", "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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1542
+ ], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select-multi\">\n <button\n type=\"button\"\n (click)=\"onExpand()\"\n class=\"suis-select-multi__button\"\n [class.suis-select-multi__button--invalid]=\"invalid\"\n [class.suis-select-multi__button--valid]=\"values.length > 0\"\n [disabled]=\"readonly\"\n >\n <span class=\"suis-select-multi__button__value\">\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 | suisSelectMultiChips : options;\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 </span>\n <span class=\"suis-select-multi__button__actions\">\n <suis-icon\n *ngIf=\"values?.length\"\n class=\"suis-select-multi__button__cross\"\n [type]=\"SuisIconType.CROSS\"\n size=\"lg\"\n color=\"primary\"\n (click)=\"onClear($event)\"\n tabindex=\"0\"\n ></suis-icon>\n <suis-icon\n class=\"suis-select-multi__button__chevron\"\n [type]=\"expanded ? SuisIconType.CHEVRON_UP : SuisIconType.CHEVRON_DOWN\"\n size=\"lg\"\n color=\"primary\"\n tabindex=\"0\"\n ></suis-icon>\n </span>\n </button>\n <div *ngIf=\"expanded\" class=\"suis-select-multi__list\">\n <input\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\n | suisSelectFilterOptions : searchPhrase;\n trackBy: optionTrackBy\n \"\n [option]=\"option\"\n [templateRef]=\"suisSelectOption?.templateRef\"\n [selected]=\"option.value | suisSelectMultiIsSelected : values\"\n [checkbox]=\"!duplicate\"\n (clicked)=\"onSelect(option.value)\"\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)}}.suis-select-multi{position:relative}.suis-select-multi__button{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;min-width:5rem;position:relative;display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem .25rem 1rem;cursor:pointer}.suis-select-multi__button:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-select-multi__button--invalid{box-shadow:0 2px 5px #ff4757bf}.suis-select-multi__button__value{width:100%;text-align:left;text-overflow:ellipsis;text-wrap:nowrap;overflow:hidden}.suis-select-multi__button__actions{margin-left:.25rem;display:flex;justify-content:right;align-items:center}.suis-select-multi__button--valid{padding-bottom:.125rem}.suis-select-multi__button suis-chip{margin-right:.25rem;margin-bottom:.125rem}.suis-select-multi__button suis-chip:last-child{margin-right:0}.suis-select-multi__button__value{display:flex;flex-wrap:wrap}.suis-select-multi__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000080;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2rem;left:0;max-height:12.25rem;overflow-y:auto}.suis-select-multi__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem}.suis-select-multi__list__search:focus{outline:none}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }, { kind: "component", type: SuisChipComponent, selector: "suis-chip", inputs: ["color", "iconColor", "removable"], outputs: ["remove"] }, { kind: "component", type: SuisSelectOptionComponent, selector: "suis-select-option", inputs: ["option", "templateRef", "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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1458
1543
  }
1459
1544
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectMultiComponent, decorators: [{
1460
1545
  type: Component,
@@ -1474,7 +1559,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
1474
1559
  multi: true,
1475
1560
  useExisting: forwardRef(() => SuisSelectMultiComponent),
1476
1561
  },
1477
- ], template: "<div class=\"suis-select-multi\">\n <button\n type=\"button\"\n (click)=\"onExpand()\"\n class=\"suis-select-multi__button\"\n [class.suis-select-multi__button--invalid]=\"invalid\"\n [class.suis-select-multi__button--valid]=\"values.length > 0\"\n [disabled]=\"readonly\"\n >\n <span class=\"suis-select-multi__button__value\">\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 | suisSelectMultiChips : options;\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 </span>\n <span class=\"suis-select-multi__button__actions\">\n <suis-icon\n *ngIf=\"values?.length\"\n class=\"suis-select-multi__button__cross\"\n [type]=\"SuisIconType.CROSS\"\n size=\"lg\"\n color=\"primary\"\n (click)=\"onClear($event)\"\n tabindex=\"0\"\n ></suis-icon>\n <suis-icon\n class=\"suis-select-multi__button__chevron\"\n [type]=\"expanded ? SuisIconType.CHEVRON_UP : SuisIconType.CHEVRON_DOWN\"\n size=\"lg\"\n color=\"primary\"\n tabindex=\"0\"\n ></suis-icon>\n </span>\n </button>\n <div *ngIf=\"expanded\" class=\"suis-select-multi__list\">\n <input\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\n | suisSelectFilterOptions : searchPhrase;\n trackBy: optionTrackBy\n \"\n [option]=\"option\"\n [templateRef]=\"suisSelectOption?.templateRef\"\n [selected]=\"option.value | suisSelectMultiIsSelected : values\"\n [checkbox]=\"!duplicate\"\n (clicked)=\"onSelect(option.value)\"\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)}}.suis-select-multi{position:relative}.suis-select-multi__button{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;position:relative;display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem .25rem 1rem;cursor:pointer}.suis-select-multi__button:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-select-multi__button--invalid{box-shadow:0 2px 5px #ff4757bf}.suis-select-multi__button__value{width:100%;text-align:left;text-overflow:ellipsis;text-wrap:nowrap;overflow:hidden}.suis-select-multi__button__actions{margin-left:.25rem;display:flex;justify-content:right;align-items:center}.suis-select-multi__button--valid{padding-bottom:.125rem}.suis-select-multi__button suis-chip{margin-right:.25rem;margin-bottom:.125rem}.suis-select-multi__button suis-chip:last-child{margin-right:0}.suis-select-multi__button__value{display:flex;flex-wrap:wrap}.suis-select-multi__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000080;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2rem;left:0;max-height:12.25rem;overflow-y:auto}.suis-select-multi__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem}.suis-select-multi__list__search:focus{outline:none}.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}\n"] }]
1562
+ ], template: "<div class=\"suis-select-multi\">\n <button\n type=\"button\"\n (click)=\"onExpand()\"\n class=\"suis-select-multi__button\"\n [class.suis-select-multi__button--invalid]=\"invalid\"\n [class.suis-select-multi__button--valid]=\"values.length > 0\"\n [disabled]=\"readonly\"\n >\n <span class=\"suis-select-multi__button__value\">\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 | suisSelectMultiChips : options;\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 </span>\n <span class=\"suis-select-multi__button__actions\">\n <suis-icon\n *ngIf=\"values?.length\"\n class=\"suis-select-multi__button__cross\"\n [type]=\"SuisIconType.CROSS\"\n size=\"lg\"\n color=\"primary\"\n (click)=\"onClear($event)\"\n tabindex=\"0\"\n ></suis-icon>\n <suis-icon\n class=\"suis-select-multi__button__chevron\"\n [type]=\"expanded ? SuisIconType.CHEVRON_UP : SuisIconType.CHEVRON_DOWN\"\n size=\"lg\"\n color=\"primary\"\n tabindex=\"0\"\n ></suis-icon>\n </span>\n </button>\n <div *ngIf=\"expanded\" class=\"suis-select-multi__list\">\n <input\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\n | suisSelectFilterOptions : searchPhrase;\n trackBy: optionTrackBy\n \"\n [option]=\"option\"\n [templateRef]=\"suisSelectOption?.templateRef\"\n [selected]=\"option.value | suisSelectMultiIsSelected : values\"\n [checkbox]=\"!duplicate\"\n (clicked)=\"onSelect(option.value)\"\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)}}.suis-select-multi{position:relative}.suis-select-multi__button{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;min-width:5rem;position:relative;display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem .25rem 1rem;cursor:pointer}.suis-select-multi__button:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-select-multi__button--invalid{box-shadow:0 2px 5px #ff4757bf}.suis-select-multi__button__value{width:100%;text-align:left;text-overflow:ellipsis;text-wrap:nowrap;overflow:hidden}.suis-select-multi__button__actions{margin-left:.25rem;display:flex;justify-content:right;align-items:center}.suis-select-multi__button--valid{padding-bottom:.125rem}.suis-select-multi__button suis-chip{margin-right:.25rem;margin-bottom:.125rem}.suis-select-multi__button suis-chip:last-child{margin-right:0}.suis-select-multi__button__value{display:flex;flex-wrap:wrap}.suis-select-multi__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000080;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2rem;left:0;max-height:12.25rem;overflow-y:auto}.suis-select-multi__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem}.suis-select-multi__list__search:focus{outline:none}.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}\n"] }]
1478
1563
  }], propDecorators: { duplicate: [{
1479
1564
  type: Input
1480
1565
  }], chipColor: [{
@@ -1588,7 +1673,7 @@ class SuisTableComponent {
1588
1673
  */
1589
1674
  this.orderBy = '';
1590
1675
  /**
1591
- * Specifies sort condition. Accepted values - 'asc' and 'desc'. By default set to 'asc'.
1676
+ * Specifies sort condition. Type of SuisSort - 'asc' and 'desc'. By default set to 'asc'.
1592
1677
  */
1593
1678
  this.sortBy = 'asc';
1594
1679
  /**