suis 0.11.0 → 0.13.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.
Files changed (45) hide show
  1. package/README.md +2 -0
  2. package/esm2022/lib/components/index.mjs +3 -1
  3. package/esm2022/lib/components/suis-alert/suis-alert.component.mjs +2 -2
  4. package/esm2022/lib/components/suis-button/suis-button.component.mjs +2 -2
  5. package/esm2022/lib/components/suis-chip/suis-chip.component.mjs +3 -3
  6. package/esm2022/lib/components/suis-input-chips/suis-input-chips.component.mjs +2 -2
  7. package/esm2022/lib/components/suis-input-number/index.mjs +2 -0
  8. package/esm2022/lib/components/suis-input-number/suis-input-number.component.mjs +51 -0
  9. package/esm2022/lib/components/suis-input-text/suis-input-text.component.mjs +4 -4
  10. package/esm2022/lib/components/suis-progress-bar/index.mjs +2 -0
  11. package/esm2022/lib/components/suis-progress-bar/suis-progress-bar.component.mjs +52 -0
  12. package/esm2022/lib/components/suis-progress-bar/suis-progress-bar.pipe.mjs +18 -0
  13. package/esm2022/lib/components/suis-select/suis-select.component.mjs +11 -65
  14. package/esm2022/lib/components/suis-select-option/suis-select-option.component.mjs +10 -4
  15. package/esm2022/lib/shared/classes/index.mjs +4 -0
  16. package/esm2022/lib/shared/classes/suis-button.base.mjs +35 -0
  17. package/esm2022/lib/shared/classes/suis-input.base.mjs +60 -0
  18. package/esm2022/lib/shared/classes/suis-select.base.mjs +80 -0
  19. package/esm2022/lib/shared/pipes/suis-select-filter-options.pipe.mjs +20 -0
  20. package/esm2022/lib/shared/pipes/suis-select-sort-options.pipe.mjs +18 -0
  21. package/fesm2022/suis.mjs +219 -87
  22. package/fesm2022/suis.mjs.map +1 -1
  23. package/lib/components/index.d.ts +2 -0
  24. package/lib/components/suis-button/suis-button.component.d.ts +1 -1
  25. package/lib/components/suis-input-chips/suis-input-chips.component.d.ts +1 -1
  26. package/lib/components/suis-input-number/index.d.ts +1 -0
  27. package/lib/components/suis-input-number/suis-input-number.component.d.ts +14 -0
  28. package/lib/components/suis-input-text/suis-input-text.component.d.ts +1 -1
  29. package/lib/components/suis-progress-bar/index.d.ts +1 -0
  30. package/lib/components/suis-progress-bar/suis-progress-bar.component.d.ts +22 -0
  31. package/lib/components/suis-progress-bar/suis-progress-bar.pipe.d.ts +7 -0
  32. package/lib/components/suis-select/suis-select.component.d.ts +3 -34
  33. package/lib/components/suis-select-option/suis-select-option.component.d.ts +6 -2
  34. package/lib/{classes → shared/classes}/index.d.ts +1 -0
  35. package/lib/{classes → shared/classes}/suis-button.base.d.ts +1 -1
  36. package/lib/shared/classes/suis-select.base.d.ts +46 -0
  37. package/lib/{components/suis-select → shared/pipes}/suis-select-filter-options.pipe.d.ts +1 -1
  38. package/lib/{components/suis-select → shared/pipes}/suis-select-sort-options.pipe.d.ts +1 -1
  39. package/package.json +1 -1
  40. package/esm2022/lib/classes/index.mjs +0 -3
  41. package/esm2022/lib/classes/suis-button.base.mjs +0 -35
  42. package/esm2022/lib/classes/suis-input.base.mjs +0 -60
  43. package/esm2022/lib/components/suis-select/suis-select-filter-options.pipe.mjs +0 -20
  44. package/esm2022/lib/components/suis-select/suis-select-sort-options.pipe.mjs +0 -18
  45. /package/lib/{classes → shared/classes}/suis-input.base.d.ts +0 -0
package/fesm2022/suis.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Pipe, Component, ChangeDetectionStrategy, Input, EventEmitter, Output, inject, ElementRef, Renderer2, Directive, ChangeDetectorRef, ViewEncapsulation, HostListener, forwardRef, ViewChild, TemplateRef, ContentChild } from '@angular/core';
2
+ import { Pipe, Component, ChangeDetectionStrategy, Input, EventEmitter, Output, inject, ElementRef, Renderer2, Directive, ChangeDetectorRef, TemplateRef, ContentChild, HostListener, ViewEncapsulation, forwardRef, ViewChild } 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/forms';
@@ -155,11 +155,11 @@ class SuisAlertComponent {
155
155
  this.hiddenChange.emit(true);
156
156
  }
157
157
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
158
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisAlertComponent, isStandalone: true, selector: "suis-alert", inputs: { hidden: "hidden", color: "color" }, outputs: { hiddenChange: "hiddenChange" }, ngImport: i0, template: "<div\n *ngIf=\"!hidden\"\n class=\"suis-alert\"\n [ngClass]=\"'suis-alert' | suisNgClass : color\"\n>\n <ng-content></ng-content>\n <button class=\"suis-alert__cancel\" type=\"button\" (click)=\"onCancel()\">\n <suis-icon\n [type]=\"SuisIconType.CROSS\"\n [color]=\"'white'\"\n [size]=\"'lg'\"\n ></suis-icon>\n </button>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-alert{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.75rem 1.25rem;border-radius:.25rem;color:#fff;font-weight:500}.suis-alert__cancel{background-color:transparent;border:none;cursor:pointer}.suis-alert--success{background-color:#2ed573}.suis-alert--warning{background-color:#ffa502}.suis-alert--danger{background-color:#ff4757}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
158
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisAlertComponent, isStandalone: true, selector: "suis-alert", inputs: { hidden: "hidden", color: "color" }, outputs: { hiddenChange: "hiddenChange" }, ngImport: i0, template: "<div\n *ngIf=\"!hidden\"\n class=\"suis-alert\"\n [ngClass]=\"'suis-alert' | suisNgClass : color\"\n>\n <ng-content></ng-content>\n <button class=\"suis-alert__cancel\" type=\"button\" (click)=\"onCancel()\">\n <suis-icon\n [type]=\"SuisIconType.CROSS\"\n [color]=\"'white'\"\n [size]=\"'lg'\"\n ></suis-icon>\n </button>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-alert{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.75rem 1.25rem;border-radius:.25rem;color:#fff;font-weight:500}.suis-alert--success{background-color:#2ed573}.suis-alert--warning{background-color:#ffa502}.suis-alert--danger{background-color:#ff4757}.suis-alert__cancel{background-color:transparent;border:none;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
159
159
  }
160
160
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisAlertComponent, decorators: [{
161
161
  type: Component,
162
- args: [{ selector: 'suis-alert', standalone: true, imports: [CommonModule, SuisNgClassPipe, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"!hidden\"\n class=\"suis-alert\"\n [ngClass]=\"'suis-alert' | suisNgClass : color\"\n>\n <ng-content></ng-content>\n <button class=\"suis-alert__cancel\" type=\"button\" (click)=\"onCancel()\">\n <suis-icon\n [type]=\"SuisIconType.CROSS\"\n [color]=\"'white'\"\n [size]=\"'lg'\"\n ></suis-icon>\n </button>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-alert{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.75rem 1.25rem;border-radius:.25rem;color:#fff;font-weight:500}.suis-alert__cancel{background-color:transparent;border:none;cursor:pointer}.suis-alert--success{background-color:#2ed573}.suis-alert--warning{background-color:#ffa502}.suis-alert--danger{background-color:#ff4757}\n"] }]
162
+ args: [{ selector: 'suis-alert', standalone: true, imports: [CommonModule, SuisNgClassPipe, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"!hidden\"\n class=\"suis-alert\"\n [ngClass]=\"'suis-alert' | suisNgClass : color\"\n>\n <ng-content></ng-content>\n <button class=\"suis-alert__cancel\" type=\"button\" (click)=\"onCancel()\">\n <suis-icon\n [type]=\"SuisIconType.CROSS\"\n [color]=\"'white'\"\n [size]=\"'lg'\"\n ></suis-icon>\n </button>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-alert{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.75rem 1.25rem;border-radius:.25rem;color:#fff;font-weight:500}.suis-alert--success{background-color:#2ed573}.suis-alert--warning{background-color:#ffa502}.suis-alert--danger{background-color:#ff4757}.suis-alert__cancel{background-color:transparent;border:none;cursor:pointer}\n"] }]
163
163
  }], propDecorators: { hidden: [{
164
164
  type: Input
165
165
  }], hiddenChange: [{
@@ -274,6 +274,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
274
274
  type: Output
275
275
  }] } });
276
276
 
277
+ class SuisSelectOptionDirective {
278
+ constructor() {
279
+ /**
280
+ * Custom template of the option.
281
+ */
282
+ this.templateRef = inject((TemplateRef));
283
+ }
284
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
285
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: SuisSelectOptionDirective, isStandalone: true, selector: "[suisSelectOption]", ngImport: i0 }); }
286
+ }
287
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectOptionDirective, decorators: [{
288
+ type: Directive,
289
+ args: [{
290
+ selector: '[suisSelectOption]',
291
+ standalone: true,
292
+ }]
293
+ }] });
294
+
295
+ class SuisSelectBase extends SuisInputBase {
296
+ constructor() {
297
+ super(...arguments);
298
+ /** @internal */
299
+ this.SuisIconType = SuisIconType;
300
+ /** @internal */
301
+ this.searchPhrase = '';
302
+ /** @internal */
303
+ this.expanded = false;
304
+ /**
305
+ * Options displayed in dropdown list. Type of SuisSelectOption[].
306
+ */
307
+ this.options = [];
308
+ /**
309
+ * Displays search input above options. By default set to true.
310
+ */
311
+ this.search = true;
312
+ /**
313
+ * Placeholder text displayed in options search. By default set to 'Search...'.
314
+ */
315
+ this.searchPlaceholder = 'Search...';
316
+ /**
317
+ * Placeholder text displayed when value is not selected. By default set to 'Select option...'.
318
+ */
319
+ this.placeholder = 'Select option...';
320
+ /**
321
+ * Emits on search phrase changed.
322
+ */
323
+ this.searchPhraseChanged = new EventEmitter();
324
+ }
325
+ onClear(event) {
326
+ this.clearValue();
327
+ event.stopPropagation();
328
+ }
329
+ onSearchPhraseChange(text) {
330
+ this.searchPhrase = text;
331
+ this.searchPhraseChanged.emit(text);
332
+ }
333
+ onExpand() {
334
+ this.toggle(!this.expanded);
335
+ this.onTouch();
336
+ }
337
+ toggle(value) {
338
+ this.expanded = value;
339
+ this.searchPhrase = '';
340
+ }
341
+ onDocumentClick(event) {
342
+ if (!this.elRef.nativeElement.contains(event.target)) {
343
+ this.expanded = false;
344
+ }
345
+ }
346
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
347
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", 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 }], usesInheritance: true, ngImport: i0 }); }
348
+ }
349
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectBase, decorators: [{
350
+ type: Directive
351
+ }], propDecorators: { suisSelectOption: [{
352
+ type: ContentChild,
353
+ args: [SuisSelectOptionDirective]
354
+ }], options: [{
355
+ type: Input
356
+ }], search: [{
357
+ type: Input
358
+ }], searchPlaceholder: [{
359
+ type: Input
360
+ }], placeholder: [{
361
+ type: Input
362
+ }], searchPhraseChanged: [{
363
+ type: Output
364
+ }], onDocumentClick: [{
365
+ type: HostListener,
366
+ args: ['document:click', ['$event']]
367
+ }] } });
368
+
277
369
  class SuisButtonComponent extends SuisButtonBase {
278
370
  ngAfterViewInit() {
279
371
  this.renderer2.addClass(this.elementRef.nativeElement, 'suis-button');
@@ -354,11 +446,11 @@ class SuisChipComponent {
354
446
  this.remove.emit();
355
447
  }
356
448
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
357
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisChipComponent, isStandalone: true, selector: "suis-chip", inputs: { color: "color", iconColor: "iconColor", removable: "removable" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"suis-chip\" [ngClass]=\"'suis-chip' | suisNgClass : color\">\n <ng-content></ng-content>\n <button\n *ngIf=\"removable\"\n class=\"suis-chip__remove\"\n type=\"button\"\n (click)=\"onRemove()\"\n >\n <suis-icon\n [color]=\"iconColor\"\n [type]=\"SuisIconType.CROSS\"\n [pointer]=\"true\"\n [size]=\"'md'\"\n ></suis-icon>\n </button>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-chip{display:flex;align-items:center;justify-content:center;width:-moz-fit-content;width:fit-content;border-radius:1rem;font-size:.875rem;padding:.25rem .5rem;color:#fff}.suis-chip__remove{border:none;background-color:transparent}.suis-chip--primary{background-color:#192a56}.suis-chip--secondary{background-color:#273c75}.suis-chip--tertiary{background-color:#dcdde1;color:#2f3640}.suis-chip--complementary{background-color:#f5f6fa;color:#2f3640}.suis-chip--success{background-color:#2ed573}.suis-chip--warning{background-color:#ffa502}.suis-chip--danger{background-color:#ff4757}.suis-chip--gray{background-color:#bcbcbc}.suis-chip--white{background-color:#fff;color:#2f3640}.suis-chip--dark{background-color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
449
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisChipComponent, isStandalone: true, selector: "suis-chip", inputs: { color: "color", iconColor: "iconColor", removable: "removable" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"suis-chip\" [ngClass]=\"'suis-chip' | suisNgClass : color\">\n <ng-content></ng-content>\n <button\n *ngIf=\"removable\"\n class=\"suis-chip__remove\"\n type=\"button\"\n (click)=\"onRemove()\"\n >\n <suis-icon\n [color]=\"iconColor\"\n [type]=\"SuisIconType.CROSS\"\n [pointer]=\"true\"\n [size]=\"'md'\"\n ></suis-icon>\n </button>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-chip{display:flex;align-items:center;justify-content:center;width:-moz-fit-content;width:fit-content;border-radius:1rem;font-size:.875rem;padding:.25rem .5rem;color:#fff}.suis-chip--primary{background-color:#192a56}.suis-chip--secondary{background-color:#273c75}.suis-chip--tertiary{background-color:#dcdde1}.suis-chip--complementary{background-color:#f5f6fa}.suis-chip--success{background-color:#2ed573}.suis-chip--warning{background-color:#ffa502}.suis-chip--danger{background-color:#ff4757}.suis-chip--white{background-color:#fff}.suis-chip--gray{background-color:#bcbcbc}.suis-chip--dark{background-color:#000}.suis-chip__remove{border:none;background-color:transparent}.suis-chip--tertiary,.suis-chip--complementary,.suis-chip--white{color:#2f3640}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
358
450
  }
359
451
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisChipComponent, decorators: [{
360
452
  type: Component,
361
- args: [{ selector: 'suis-chip', standalone: true, imports: [CommonModule, SuisIconComponent, SuisNgClassPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-chip\" [ngClass]=\"'suis-chip' | suisNgClass : color\">\n <ng-content></ng-content>\n <button\n *ngIf=\"removable\"\n class=\"suis-chip__remove\"\n type=\"button\"\n (click)=\"onRemove()\"\n >\n <suis-icon\n [color]=\"iconColor\"\n [type]=\"SuisIconType.CROSS\"\n [pointer]=\"true\"\n [size]=\"'md'\"\n ></suis-icon>\n </button>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-chip{display:flex;align-items:center;justify-content:center;width:-moz-fit-content;width:fit-content;border-radius:1rem;font-size:.875rem;padding:.25rem .5rem;color:#fff}.suis-chip__remove{border:none;background-color:transparent}.suis-chip--primary{background-color:#192a56}.suis-chip--secondary{background-color:#273c75}.suis-chip--tertiary{background-color:#dcdde1;color:#2f3640}.suis-chip--complementary{background-color:#f5f6fa;color:#2f3640}.suis-chip--success{background-color:#2ed573}.suis-chip--warning{background-color:#ffa502}.suis-chip--danger{background-color:#ff4757}.suis-chip--gray{background-color:#bcbcbc}.suis-chip--white{background-color:#fff;color:#2f3640}.suis-chip--dark{background-color:#000}\n"] }]
453
+ args: [{ selector: 'suis-chip', standalone: true, imports: [CommonModule, SuisIconComponent, SuisNgClassPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-chip\" [ngClass]=\"'suis-chip' | suisNgClass : color\">\n <ng-content></ng-content>\n <button\n *ngIf=\"removable\"\n class=\"suis-chip__remove\"\n type=\"button\"\n (click)=\"onRemove()\"\n >\n <suis-icon\n [color]=\"iconColor\"\n [type]=\"SuisIconType.CROSS\"\n [pointer]=\"true\"\n [size]=\"'md'\"\n ></suis-icon>\n </button>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-chip{display:flex;align-items:center;justify-content:center;width:-moz-fit-content;width:fit-content;border-radius:1rem;font-size:.875rem;padding:.25rem .5rem;color:#fff}.suis-chip--primary{background-color:#192a56}.suis-chip--secondary{background-color:#273c75}.suis-chip--tertiary{background-color:#dcdde1}.suis-chip--complementary{background-color:#f5f6fa}.suis-chip--success{background-color:#2ed573}.suis-chip--warning{background-color:#ffa502}.suis-chip--danger{background-color:#ff4757}.suis-chip--white{background-color:#fff}.suis-chip--gray{background-color:#bcbcbc}.suis-chip--dark{background-color:#000}.suis-chip__remove{border:none;background-color:transparent}.suis-chip--tertiary,.suis-chip--complementary,.suis-chip--white{color:#2f3640}\n"] }]
362
454
  }], propDecorators: { color: [{
363
455
  type: Input
364
456
  }], iconColor: [{
@@ -429,7 +521,7 @@ class SuisInputTextComponent extends SuisInputBase {
429
521
  multi: true,
430
522
  useExisting: forwardRef(() => SuisInputTextComponent),
431
523
  },
432
- ], usesInheritance: true, ngImport: i0, template: "<input\n class=\"suis-input\"\n [class.suis-input--invalid]=\"invalid\"\n [type]=\"type\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n (keydown.enter)=\"onEnter()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-input{background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 1rem;border:0;width:100%;height:2rem}.suis-input:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input--invalid{box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
524
+ ], usesInheritance: true, ngImport: i0, template: "<input\n class=\"suis-input-text\"\n [class.suis-input-text--invalid]=\"invalid\"\n [type]=\"type\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n (keydown.enter)=\"onEnter()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-input-text{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem}.suis-input-text:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-text--invalid{box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
433
525
  }
434
526
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputTextComponent, decorators: [{
435
527
  type: Component,
@@ -439,7 +531,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
439
531
  multi: true,
440
532
  useExisting: forwardRef(() => SuisInputTextComponent),
441
533
  },
442
- ], template: "<input\n class=\"suis-input\"\n [class.suis-input--invalid]=\"invalid\"\n [type]=\"type\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n (keydown.enter)=\"onEnter()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-input{background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 1rem;border:0;width:100%;height:2rem}.suis-input:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input--invalid{box-shadow:0 2px 5px #ff4757bf}\n"] }]
534
+ ], template: "<input\n class=\"suis-input-text\"\n [class.suis-input-text--invalid]=\"invalid\"\n [type]=\"type\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n (keydown.enter)=\"onEnter()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-input-text{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem}.suis-input-text:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-text--invalid{box-shadow:0 2px 5px #ff4757bf}\n"] }]
443
535
  }], propDecorators: { type: [{
444
536
  type: Input
445
537
  }], placeholder: [{
@@ -530,6 +622,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
530
622
  args: ['document:click', ['$event']]
531
623
  }] } });
532
624
 
625
+ class SuisInputNumberComponent extends SuisInputBase {
626
+ constructor() {
627
+ super(...arguments);
628
+ /**
629
+ * Placeholder text displayed in input. By default set to empty string.
630
+ */
631
+ this.placeholder = '';
632
+ /** @internal */
633
+ this.value = null;
634
+ }
635
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
636
+ writeValue(obj) {
637
+ this.value = obj;
638
+ this._onChange(this.value);
639
+ this.cdRef.markForCheck();
640
+ }
641
+ onChange(event) {
642
+ const target = event.target;
643
+ this.value = target.value ? Number(target.value) : null;
644
+ this._onChange(this.value);
645
+ this.changed.emit(this.value);
646
+ this.cdRef.markForCheck();
647
+ }
648
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputNumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
649
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisInputNumberComponent, isStandalone: true, selector: "suis-input-number", inputs: { placeholder: "placeholder" }, providers: [
650
+ {
651
+ provide: NG_VALUE_ACCESSOR,
652
+ multi: true,
653
+ useExisting: forwardRef(() => SuisInputNumberComponent),
654
+ },
655
+ ], usesInheritance: true, ngImport: i0, template: "<input\n class=\"suis-input-number\"\n [class.suis-input-number--invalid]=\"invalid\"\n type=\"number\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-input-number{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;-moz-appearance:textfield}.suis-input-number:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-number--invalid{box-shadow:0 2px 5px #ff4757bf}.suis-input-number::-webkit-outer-spin-button,.suis-input-number::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
656
+ }
657
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputNumberComponent, decorators: [{
658
+ type: Component,
659
+ args: [{ selector: 'suis-input-number', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
660
+ {
661
+ provide: NG_VALUE_ACCESSOR,
662
+ multi: true,
663
+ useExisting: forwardRef(() => SuisInputNumberComponent),
664
+ },
665
+ ], template: "<input\n class=\"suis-input-number\"\n [class.suis-input-number--invalid]=\"invalid\"\n type=\"number\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-input-number{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;-moz-appearance:textfield}.suis-input-number:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-number--invalid{box-shadow:0 2px 5px #ff4757bf}.suis-input-number::-webkit-outer-spin-button,.suis-input-number::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
666
+ }], propDecorators: { placeholder: [{
667
+ type: Input
668
+ }] } });
669
+
533
670
  class SuisLabelComponent {
534
671
  constructor() {
535
672
  /**
@@ -553,6 +690,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
553
690
  type: Input
554
691
  }] } });
555
692
 
693
+ class SuisProgressBarPipe {
694
+ transform(value) {
695
+ return `${(value / 100) * 100}%`;
696
+ }
697
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisProgressBarPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
698
+ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: SuisProgressBarPipe, isStandalone: true, name: "suisProgressBar" }); }
699
+ }
700
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisProgressBarPipe, decorators: [{
701
+ type: Pipe,
702
+ args: [{
703
+ standalone: true,
704
+ name: 'suisProgressBar',
705
+ }]
706
+ }] });
707
+
708
+ class SuisProgressBarComponent {
709
+ constructor() {
710
+ /** @internal */
711
+ this._value = 0;
712
+ /**
713
+ * Sets the color of the progress bar. Type of SuisColor. By default set to 'primary'.
714
+ */
715
+ this.color = 'primary';
716
+ /**
717
+ * Sets the background color of the progress bar. Type of SuisColor. By default set to 'tertiary'.
718
+ */
719
+ this.backgroundColor = 'tertiary';
720
+ }
721
+ /** @internal */
722
+ get value() {
723
+ return this._value;
724
+ }
725
+ /**
726
+ * Width of the progress bar in percentage (value >= 0 && value <= 100). By default set to 0.
727
+ */
728
+ set value(value) {
729
+ if (value >= 0 && value <= 100) {
730
+ this._value = value;
731
+ }
732
+ else if (value > 100) {
733
+ this._value = 100;
734
+ }
735
+ else {
736
+ this._value = 0;
737
+ }
738
+ }
739
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
740
+ 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 }); }
741
+ }
742
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisProgressBarComponent, decorators: [{
743
+ type: Component,
744
+ 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"] }]
745
+ }], propDecorators: { value: [{
746
+ type: Input
747
+ }], color: [{
748
+ type: Input
749
+ }], backgroundColor: [{
750
+ type: Input
751
+ }] } });
752
+
556
753
  class SuisSelectLabelPipe {
557
754
  transform(value, options, placeholder) {
558
755
  if (!value)
@@ -588,32 +785,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
588
785
  }]
589
786
  }] });
590
787
 
591
- class SuisSelectOptionDirective {
592
- constructor() {
593
- /**
594
- * Custom template of the option.
595
- */
596
- this.templateRef = inject((TemplateRef));
597
- }
598
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
599
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: SuisSelectOptionDirective, isStandalone: true, selector: "[suisSelectOption]", ngImport: i0 }); }
600
- }
601
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectOptionDirective, decorators: [{
602
- type: Directive,
603
- args: [{
604
- selector: '[suisSelectOption]',
605
- standalone: true,
606
- }]
607
- }] });
608
-
609
788
  class SuisSelectOptionComponent {
610
789
  constructor() {
611
790
  /** @internal */
612
791
  this.SuisIconType = SuisIconType;
613
792
  /**
614
- * Adds checkmark icon to checkbox.
793
+ * Adds checkmark icon to checkbox (if checkbox input set to true). By default set to false.
615
794
  */
616
795
  this.selected = false;
796
+ /**
797
+ * Display checkbox next to option label. By default set to true.
798
+ */
799
+ this.checkbox = true;
617
800
  /**
618
801
  * Emits on option selected.
619
802
  */
@@ -624,11 +807,11 @@ class SuisSelectOptionComponent {
624
807
  this.clicked.emit();
625
808
  }
626
809
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
627
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisSelectOptionComponent, isStandalone: true, selector: "suis-select-option", inputs: { option: "option", templateRef: "templateRef", selected: "selected" }, 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 >\n <suis-icon\n *ngIf=\"selected\"\n [bold]=\"true\"\n color=\"primary\"\n [type]=\"SuisIconType.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?.label }}\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)}}.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{width:1rem;height:1rem;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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.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 }); }
810
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", 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]=\"SuisIconType.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?.label }}\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)}}.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:1rem;min-height:1rem;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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.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 }); }
628
811
  }
629
812
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectOptionComponent, decorators: [{
630
813
  type: Component,
631
- args: [{ selector: 'suis-select-option', standalone: true, imports: [CommonModule, 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 >\n <suis-icon\n *ngIf=\"selected\"\n [bold]=\"true\"\n color=\"primary\"\n [type]=\"SuisIconType.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?.label }}\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)}}.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{width:1rem;height:1rem;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}\n"] }]
814
+ args: [{ selector: 'suis-select-option', standalone: true, imports: [CommonModule, 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]=\"SuisIconType.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?.label }}\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)}}.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:1rem;min-height:1rem;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}\n"] }]
632
815
  }], propDecorators: { option: [{
633
816
  type: Input,
634
817
  args: [{ required: true }]
@@ -636,6 +819,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
636
819
  type: Input
637
820
  }], selected: [{
638
821
  type: Input
822
+ }], checkbox: [{
823
+ type: Input
639
824
  }], clicked: [{
640
825
  type: Output
641
826
  }] } });
@@ -672,33 +857,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
672
857
  }]
673
858
  }] });
674
859
 
675
- class SuisSelectComponent extends SuisInputBase {
860
+ class SuisSelectComponent extends SuisSelectBase {
676
861
  constructor() {
677
862
  super(...arguments);
678
863
  /** @internal */
679
- this.SuisIconType = SuisIconType;
680
- /** @internal */
681
864
  this.value = null;
682
- /** @internal */
683
- this.searchPhrase = '';
684
- /** @internal */
685
- this.expanded = false;
686
- /**
687
- * Options displayed in dropdown list. Type of SuisSelectOption[].
688
- */
689
- this.options = [];
690
- /**
691
- * Displays search input above options. By default set to true.
692
- */
693
- this.search = true;
694
- /**
695
- * Placeholder text displayed in options search. By default set to 'Search...'.
696
- */
697
- this.searchPlaceholder = 'Search...';
698
- /**
699
- * Placeholder text displayed when value is not selected. By default set to 'Select option...'.
700
- */
701
- this.placeholder = 'Select option...';
702
865
  }
703
866
  writeValue(obj) {
704
867
  this.value = obj;
@@ -710,10 +873,6 @@ class SuisSelectComponent extends SuisInputBase {
710
873
  return this.clearValue();
711
874
  this.setValue(value);
712
875
  }
713
- onExpand() {
714
- this.toggle(!this.expanded);
715
- this.onTouch();
716
- }
717
876
  clearValue() {
718
877
  this.setValue(null);
719
878
  }
@@ -724,27 +883,14 @@ class SuisSelectComponent extends SuisInputBase {
724
883
  this.changed.emit();
725
884
  this.cdRef.markForCheck();
726
885
  }
727
- onClear(event) {
728
- this.clearValue();
729
- event.stopPropagation();
730
- }
731
- toggle(value) {
732
- this.expanded = value;
733
- this.searchPhrase = '';
734
- }
735
- onDocumentClick(event) {
736
- if (!this.elRef.nativeElement.contains(event.target)) {
737
- this.expanded = false;
738
- }
739
- }
740
886
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
741
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisSelectComponent, isStandalone: true, selector: "suis-select", inputs: { options: "options", search: "search", searchPlaceholder: "searchPlaceholder", placeholder: "placeholder" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
887
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisSelectComponent, isStandalone: true, selector: "suis-select", providers: [
742
888
  {
743
889
  provide: NG_VALUE_ACCESSOR,
744
890
  multi: true,
745
891
  useExisting: forwardRef(() => SuisSelectComponent),
746
892
  },
747
- ], queries: [{ propertyName: "suisSelectOption", first: true, predicate: SuisSelectOptionDirective, descendants: true }], 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 <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 </button>\n <div *ngIf=\"expanded\" class=\"suis-select__list\">\n <input\n *ngIf=\"search\"\n [(ngModel)]=\"searchPhrase\"\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 \"\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{position:relative;width:100%;background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 2.75rem .5rem 1rem;border:0;cursor:pointer;height:2rem}.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;display:block}.suis-select__button__chevron{position:absolute;right:.5rem;top:.375rem}.suis-select__button__cross{position:absolute;right:1.75rem;top:.375rem}.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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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"], 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 }); }
893
+ ], 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 \"\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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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 }); }
748
894
  }
749
895
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectComponent, decorators: [{
750
896
  type: Component,
@@ -763,22 +909,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
763
909
  multi: true,
764
910
  useExisting: forwardRef(() => SuisSelectComponent),
765
911
  },
766
- ], 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 <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 </button>\n <div *ngIf=\"expanded\" class=\"suis-select__list\">\n <input\n *ngIf=\"search\"\n [(ngModel)]=\"searchPhrase\"\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 \"\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{position:relative;width:100%;background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 2.75rem .5rem 1rem;border:0;cursor:pointer;height:2rem}.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;display:block}.suis-select__button__chevron{position:absolute;right:.5rem;top:.375rem}.suis-select__button__cross{position:absolute;right:1.75rem;top:.375rem}.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"] }]
767
- }], propDecorators: { suisSelectOption: [{
768
- type: ContentChild,
769
- args: [SuisSelectOptionDirective]
770
- }], options: [{
771
- type: Input
772
- }], search: [{
773
- type: Input
774
- }], searchPlaceholder: [{
775
- type: Input
776
- }], placeholder: [{
777
- type: Input
778
- }], onDocumentClick: [{
779
- type: HostListener,
780
- args: ['document:click', ['$event']]
781
- }] } });
912
+ ], 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 \"\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"] }]
913
+ }] });
782
914
 
783
915
  class SuisSpinnerComponent {
784
916
  constructor() {
@@ -842,5 +974,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
842
974
  * Generated bundle index. Do not edit.
843
975
  */
844
976
 
845
- export { SuisAlertComponent, SuisAnchorButtonComponent, SuisBoxComponent, SuisButtonComponent, SuisButtonOutlinedComponent, SuisChipComponent, SuisFormFieldComponent, SuisIconComponent, SuisIconType, SuisInputChipsComponent, SuisInputTextComponent, SuisLabelComponent, SuisNgClassPipe, SuisSelectComponent, SuisSelectOptionComponent, SuisSelectOptionDirective, SuisSpinnerComponent, SuisSpinnerContainerComponent };
977
+ export { SuisAlertComponent, SuisAnchorButtonComponent, SuisBoxComponent, SuisButtonComponent, SuisButtonOutlinedComponent, SuisChipComponent, SuisFormFieldComponent, SuisIconComponent, SuisIconType, SuisInputChipsComponent, SuisInputNumberComponent, SuisInputTextComponent, SuisLabelComponent, SuisNgClassPipe, SuisProgressBarComponent, SuisSelectComponent, SuisSelectOptionComponent, SuisSelectOptionDirective, SuisSpinnerComponent, SuisSpinnerContainerComponent };
846
978
  //# sourceMappingURL=suis.mjs.map