suis 0.8.0 → 0.10.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 +3 -0
  2. package/esm2022/lib/classes/suis-button.base.mjs +2 -2
  3. package/esm2022/lib/components/index.mjs +4 -1
  4. package/esm2022/lib/components/suis-alert/index.mjs +2 -0
  5. package/esm2022/lib/components/suis-alert/suis-alert.component.mjs +42 -0
  6. package/esm2022/lib/components/suis-box/suis-box.component.mjs +2 -2
  7. package/esm2022/lib/components/suis-button/suis-button.component.mjs +7 -7
  8. package/esm2022/lib/components/suis-chip/index.mjs +1 -2
  9. package/esm2022/lib/components/suis-chip/suis-chip.component.mjs +5 -5
  10. package/esm2022/lib/components/suis-form-field/suis-form-field.component.mjs +3 -3
  11. package/esm2022/lib/components/suis-icon/index.mjs +1 -2
  12. package/esm2022/lib/components/suis-icon/suis-icon.component.mjs +5 -5
  13. package/esm2022/lib/components/suis-input-chips/suis-input-chips.component.mjs +3 -3
  14. package/esm2022/lib/components/suis-input-text/suis-input-text.component.mjs +3 -3
  15. package/esm2022/lib/components/suis-label/suis-label.component.mjs +3 -3
  16. package/esm2022/lib/components/suis-spinner/index.mjs +2 -0
  17. package/esm2022/lib/components/suis-spinner/suis-spinner.component.mjs +29 -0
  18. package/esm2022/lib/components/suis-spinner-container/index.mjs +2 -0
  19. package/esm2022/lib/components/suis-spinner-container/suis-spinner-container.component.mjs +40 -0
  20. package/esm2022/lib/types/index.mjs +2 -1
  21. package/esm2022/lib/types/suis-color.type.mjs +1 -1
  22. package/esm2022/lib/types/suis-size.type.mjs +2 -0
  23. package/fesm2022/suis.mjs +232 -139
  24. package/fesm2022/suis.mjs.map +1 -1
  25. package/lib/classes/suis-button.base.d.ts +3 -3
  26. package/lib/components/index.d.ts +3 -0
  27. package/lib/components/suis-alert/index.d.ts +1 -0
  28. package/lib/components/suis-alert/suis-alert.component.d.ts +23 -0
  29. package/lib/components/suis-chip/index.d.ts +0 -1
  30. package/lib/components/suis-chip/suis-chip.component.d.ts +6 -6
  31. package/lib/components/suis-icon/index.d.ts +0 -1
  32. package/lib/components/suis-icon/suis-icon.component.d.ts +6 -5
  33. package/lib/components/suis-input-chips/suis-input-chips.component.d.ts +5 -6
  34. package/lib/components/suis-spinner/index.d.ts +1 -0
  35. package/lib/components/suis-spinner/suis-spinner.component.d.ts +15 -0
  36. package/lib/components/suis-spinner-container/index.d.ts +1 -0
  37. package/lib/components/suis-spinner-container/suis-spinner-container.component.d.ts +23 -0
  38. package/lib/types/index.d.ts +1 -0
  39. package/lib/types/suis-color.type.d.ts +4 -1
  40. package/lib/types/suis-size.type.d.ts +1 -0
  41. package/package.json +1 -1
  42. package/esm2022/lib/components/suis-chip/suis-chip.types.mjs +0 -2
  43. package/esm2022/lib/components/suis-icon/suis-icon.types.mjs +0 -2
  44. package/lib/components/suis-chip/suis-chip.types.d.ts +0 -2
  45. package/lib/components/suis-icon/suis-icon.types.d.ts +0 -3
package/fesm2022/suis.mjs CHANGED
@@ -1,10 +1,161 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Component, ChangeDetectionStrategy, Input, inject, ElementRef, Renderer2, Directive, ChangeDetectorRef, EventEmitter, Output, ViewEncapsulation, HostListener, Pipe, forwardRef, ViewChild } from '@angular/core';
2
+ import { Pipe, Component, ChangeDetectionStrategy, Input, EventEmitter, Output, inject, ElementRef, Renderer2, Directive, ChangeDetectorRef, ViewEncapsulation, HostListener, 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';
6
6
  import { NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule } from '@angular/forms';
7
7
 
8
+ class SuisNgClassPipe {
9
+ transform(prefix, ...args) {
10
+ const classes = [];
11
+ args.forEach((arg) => classes.push(`${prefix}--${arg}`));
12
+ return classes;
13
+ }
14
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisNgClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
15
+ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: SuisNgClassPipe, isStandalone: true, name: "suisNgClass" }); }
16
+ }
17
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisNgClassPipe, decorators: [{
18
+ type: Pipe,
19
+ args: [{
20
+ standalone: true,
21
+ name: 'suisNgClass',
22
+ }]
23
+ }] });
24
+
25
+ var SuisIconType;
26
+ (function (SuisIconType) {
27
+ SuisIconType["INFO"] = "info";
28
+ SuisIconType["WARNING"] = "warning";
29
+ SuisIconType["CHECK"] = "check";
30
+ SuisIconType["CROSS"] = "cross";
31
+ SuisIconType["PLUS"] = "plus";
32
+ SuisIconType["MINUS"] = "minus";
33
+ SuisIconType["ARROW_UP"] = "arrow-up";
34
+ SuisIconType["ARROW_LEFT"] = "arrow-left";
35
+ SuisIconType["ARROW_RIGHT"] = "arrow-right";
36
+ SuisIconType["ARROW_DOWN"] = "arrow-down";
37
+ })(SuisIconType || (SuisIconType = {}));
38
+
39
+ class SuisIconTypePipe {
40
+ transform(type) {
41
+ switch (type) {
42
+ case SuisIconType.INFO:
43
+ return '?';
44
+ case SuisIconType.WARNING:
45
+ return '!';
46
+ case SuisIconType.CHECK:
47
+ return '✓';
48
+ case SuisIconType.CROSS:
49
+ return '×';
50
+ case SuisIconType.PLUS:
51
+ return '+';
52
+ case SuisIconType.MINUS:
53
+ return '−';
54
+ case SuisIconType.ARROW_LEFT:
55
+ return '←';
56
+ case SuisIconType.ARROW_UP:
57
+ return '↑';
58
+ case SuisIconType.ARROW_RIGHT:
59
+ return '→';
60
+ case SuisIconType.ARROW_DOWN:
61
+ return '↓';
62
+ }
63
+ }
64
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisIconTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
65
+ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: SuisIconTypePipe, isStandalone: true, name: "suisIconType" }); }
66
+ }
67
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisIconTypePipe, decorators: [{
68
+ type: Pipe,
69
+ args: [{
70
+ standalone: true,
71
+ name: 'suisIconType',
72
+ }]
73
+ }] });
74
+
75
+ class SuisIconComponent {
76
+ constructor() {
77
+ /** @internal */
78
+ this.SuisIconType = SuisIconType;
79
+ /**
80
+ * Sets the font size of the HTML Entity itself. Type of SuisSize. By default set to 'md'.
81
+ */
82
+ this.size = 'md';
83
+ /**
84
+ * Sets the color pallette of the icon and surroundings. Type of SuisColor. By default set to 'dark'.
85
+ */
86
+ this.color = 'dark';
87
+ /**
88
+ * Sets the HTML Entity displayed in content. Type of SuisIconType. By default set to SuisIconType.INFO.
89
+ */
90
+ this.type = SuisIconType.INFO;
91
+ /**
92
+ * Shows the circled border around the icon. By default set to false. Can not be combined with filled (will be overriden then).
93
+ */
94
+ this.outlined = false;
95
+ /**
96
+ * Shows the circled background behind the icon. By default set to false. Overrides outlined behavior if used at the sime time.
97
+ */
98
+ this.filled = false;
99
+ /**
100
+ * Shows the pointer cursor when hovered. By defauly set to false.
101
+ */
102
+ this.pointer = false;
103
+ }
104
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
105
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisIconComponent, isStandalone: true, selector: "suis-icon", inputs: { size: "size", color: "color", type: "type", outlined: "outlined", filled: "filled", pointer: "pointer" }, ngImport: i0, template: "<div\n class=\"suis-icon\"\n [class.suis-icon--outlined]=\"outlined\"\n [class.suis-icon--filled]=\"filled\"\n [class.suis-icon--pointer]=\"pointer\"\n [ngClass]=\"'suis-icon' | suisNgClass : color : size\"\n>\n <span [innerHTML]=\"type | suisIconType\"></span>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-icon{display:flex;justify-content:center;align-items:center;width:1rem;height:1rem;border-radius:100%;line-height:1rem;background-color:transparent;border:none}.suis-icon--outlined{border-width:.0625rem;border-style:solid}.suis-icon--pointer{cursor:pointer}.suis-icon--xs{font-size:.5rem}.suis-icon--sm{font-size:.75rem}.suis-icon--md{font-size:1rem}.suis-icon--lg{font-size:1.5rem;width:1.5rem;height:1.5rem}.suis-icon--xl{font-size:2rem;width:2rem;height:2rem}.suis-icon--primary{color:#192a56;border-color:#192a56}.suis-icon--secondary{color:#273c75;border-color:#273c75}.suis-icon--tertiary{color:#dcdde1;border-color:#dcdde1}.suis-icon--complementary{color:#f5f6fa;border-color:#f5f6fa}.suis-icon--success{color:#2ed573;border-color:#2ed573}.suis-icon--warning{color:#ffa502;border-color:#ffa502}.suis-icon--danger{color:#ff4757;border-color:#ff4757}.suis-icon--white{color:#fff;border-color:#fff}.suis-icon--gray{color:#bcbcbc;border-color:#bcbcbc}.suis-icon--dark{color:#000;border-color:#000}.suis-icon--filled{border:none;background-color:#000;color:#fff}.suis-icon--filled.suis-icon--primary{background-color:#192a56}.suis-icon--filled.suis-icon--secondary{background-color:#273c75}.suis-icon--filled.suis-icon--tertiary{background-color:#dcdde1;color:#2f3640}.suis-icon--filled.suis-icon--complementary{background-color:#f5f6fa;color:#2f3640}.suis-icon--filled.suis-icon--success{background-color:#2ed573}.suis-icon--filled.suis-icon--warning{background-color:#ffa502}.suis-icon--filled.suis-icon--danger{background-color:#ff4757}.suis-icon--filled.suis-icon--white{background-color:#fff;color:#2f3640}.suis-icon--filled.suis-icon--gray{background-color:#bcbcbc}.suis-icon--filled.suis-icon--dark{background-color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisIconTypePipe, name: "suisIconType" }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
106
+ }
107
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisIconComponent, decorators: [{
108
+ type: Component,
109
+ args: [{ selector: 'suis-icon', standalone: true, imports: [CommonModule, SuisIconTypePipe, SuisNgClassPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-icon\"\n [class.suis-icon--outlined]=\"outlined\"\n [class.suis-icon--filled]=\"filled\"\n [class.suis-icon--pointer]=\"pointer\"\n [ngClass]=\"'suis-icon' | suisNgClass : color : size\"\n>\n <span [innerHTML]=\"type | suisIconType\"></span>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-icon{display:flex;justify-content:center;align-items:center;width:1rem;height:1rem;border-radius:100%;line-height:1rem;background-color:transparent;border:none}.suis-icon--outlined{border-width:.0625rem;border-style:solid}.suis-icon--pointer{cursor:pointer}.suis-icon--xs{font-size:.5rem}.suis-icon--sm{font-size:.75rem}.suis-icon--md{font-size:1rem}.suis-icon--lg{font-size:1.5rem;width:1.5rem;height:1.5rem}.suis-icon--xl{font-size:2rem;width:2rem;height:2rem}.suis-icon--primary{color:#192a56;border-color:#192a56}.suis-icon--secondary{color:#273c75;border-color:#273c75}.suis-icon--tertiary{color:#dcdde1;border-color:#dcdde1}.suis-icon--complementary{color:#f5f6fa;border-color:#f5f6fa}.suis-icon--success{color:#2ed573;border-color:#2ed573}.suis-icon--warning{color:#ffa502;border-color:#ffa502}.suis-icon--danger{color:#ff4757;border-color:#ff4757}.suis-icon--white{color:#fff;border-color:#fff}.suis-icon--gray{color:#bcbcbc;border-color:#bcbcbc}.suis-icon--dark{color:#000;border-color:#000}.suis-icon--filled{border:none;background-color:#000;color:#fff}.suis-icon--filled.suis-icon--primary{background-color:#192a56}.suis-icon--filled.suis-icon--secondary{background-color:#273c75}.suis-icon--filled.suis-icon--tertiary{background-color:#dcdde1;color:#2f3640}.suis-icon--filled.suis-icon--complementary{background-color:#f5f6fa;color:#2f3640}.suis-icon--filled.suis-icon--success{background-color:#2ed573}.suis-icon--filled.suis-icon--warning{background-color:#ffa502}.suis-icon--filled.suis-icon--danger{background-color:#ff4757}.suis-icon--filled.suis-icon--white{background-color:#fff;color:#2f3640}.suis-icon--filled.suis-icon--gray{background-color:#bcbcbc}.suis-icon--filled.suis-icon--dark{background-color:#000}\n"] }]
110
+ }], propDecorators: { size: [{
111
+ type: Input
112
+ }], color: [{
113
+ type: Input
114
+ }], type: [{
115
+ type: Input
116
+ }], outlined: [{
117
+ type: Input
118
+ }], filled: [{
119
+ type: Input
120
+ }], pointer: [{
121
+ type: Input
122
+ }] } });
123
+
124
+ class SuisAlertComponent {
125
+ constructor() {
126
+ /** @internal */
127
+ this.SuisIconType = SuisIconType;
128
+ /**
129
+ * Controls visibilty of the alert. By default set to false.
130
+ */
131
+ this.hidden = false;
132
+ /**
133
+ * Emits change of hidden state.
134
+ */
135
+ this.hiddenChange = new EventEmitter();
136
+ /**
137
+ * Sets the color pallette of the alert. Type of SuisInfoColor. By default set to 'danger'.
138
+ */
139
+ this.color = 'danger';
140
+ }
141
+ onCancel() {
142
+ this.hidden = true;
143
+ this.hiddenChange.emit(true);
144
+ }
145
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
146
+ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
147
+ }
148
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisAlertComponent, decorators: [{
149
+ type: Component,
150
+ 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"] }]
151
+ }], propDecorators: { hidden: [{
152
+ type: Input
153
+ }], hiddenChange: [{
154
+ type: Output
155
+ }], color: [{
156
+ type: Input
157
+ }] } });
158
+
8
159
  class SuisBoxComponent {
9
160
  constructor() {
10
161
  /**
@@ -13,11 +164,11 @@ class SuisBoxComponent {
13
164
  this.spacing = false;
14
165
  }
15
166
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
16
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisBoxComponent, isStandalone: true, selector: "suis-box", inputs: { spacing: "spacing" }, ngImport: i0, template: "<div class=\"suis-box\" [class.suis-box--spacing]=\"spacing\">\n <ng-content></ng-content>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-box{background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem}.suis-box--spacing{padding:1.25rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
167
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisBoxComponent, isStandalone: true, selector: "suis-box", inputs: { spacing: "spacing" }, ngImport: i0, template: "<div class=\"suis-box\" [class.suis-box--spacing]=\"spacing\">\n <ng-content></ng-content>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-box{background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem}.suis-box--spacing{padding:1.25rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
17
168
  }
18
169
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisBoxComponent, decorators: [{
19
170
  type: Component,
20
- args: [{ selector: 'suis-box', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-box\" [class.suis-box--spacing]=\"spacing\">\n <ng-content></ng-content>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-box{background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem}.suis-box--spacing{padding:1.25rem}\n"] }]
171
+ args: [{ selector: 'suis-box', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-box\" [class.suis-box--spacing]=\"spacing\">\n <ng-content></ng-content>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-box{background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem}.suis-box--spacing{padding:1.25rem}\n"] }]
21
172
  }], propDecorators: { spacing: [{
22
173
  type: Input
23
174
  }] } });
@@ -29,7 +180,7 @@ class SuisButtonBase {
29
180
  /** @internal */
30
181
  this.renderer2 = inject(Renderer2);
31
182
  /**
32
- * Sets button's color theme. Type of SuisColor. By default set to 'primary'.
183
+ * Sets button's color theme. Type of SuisPalleteColor | SuisInfoColor. By default set to 'primary'.
33
184
  */
34
185
  this.color = 'primary';
35
186
  /**
@@ -115,14 +266,14 @@ class SuisButtonComponent extends SuisButtonBase {
115
266
  this.renderer2.addClass(this.elementRef.nativeElement, `suis-button--${this.color}`);
116
267
  }
117
268
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
118
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisButtonComponent, isStandalone: true, selector: "button[suisButton]", host: { properties: { "attr.disabled": "disabled || null", "attr.tabindex": "disabled ? -1 : 0" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!loading; else spinner\">\n <ng-content></ng-content>\n</ng-container>\n<ng-template #spinner>\n <!-- TODO: <suis-spinner></suis-spinner> -->\n</ng-template>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-button{width:100%;display:block;padding:.5rem 1rem;border:none;border-radius:.25rem;transition:background-color .25s ease-in-out;font-size:500;text-decoration:none;text-align:center}.suis-button:hover:not(:disabled){cursor:pointer}.suis-button:hover:disabled{cursor:not-allowed}.suis-button:focus{outline:none}.suis-button--primary{background-color:#192a56;color:#fff}.suis-button--primary:hover:not(:disabled){background-color:#192a56d9}.suis-button--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button--secondary{background-color:#273c75;color:#fff}.suis-button--secondary:hover:not(:disabled){background-color:#273c75d9}.suis-button--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button--tertiary{background-color:#dcdde1;color:#2f3640}.suis-button--tertiary:hover:not(:disabled){background-color:#dcdde1d9}.suis-button--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button--complementary{background-color:#f5f6fa;color:#2f3640}.suis-button--complementary:hover:not(:disabled){background-color:#f5f6fad9}.suis-button--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button--success{background-color:#2ed573;color:#fff}.suis-button--success:hover:not(:disabled){background-color:#2ed573d9}.suis-button--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button--warning{background-color:#ffa502;color:#fff}.suis-button--warning:hover:not(:disabled){background-color:#ffa502d9}.suis-button--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button--danger{background-color:#ff4757;color:#fff}.suis-button--danger:hover:not(:disabled){background-color:#ff4757d9}.suis-button--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
269
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisButtonComponent, isStandalone: true, selector: "button[suisButton]", host: { properties: { "attr.disabled": "disabled || null", "attr.tabindex": "disabled ? -1 : 0" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!loading; else spinner\">\r\n <ng-content></ng-content>\r\n</ng-container>\r\n<ng-template #spinner>\r\n <!-- TODO: <suis-spinner></suis-spinner> -->\r\n</ng-template>\r\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-button{width:100%;display:block;padding:.5rem 1rem;border:none;border-radius:.25rem;transition:background-color .25s ease-in-out;font-size:500;text-decoration:none;text-align:center}.suis-button:hover:not(:disabled){cursor:pointer}.suis-button:hover:disabled{cursor:not-allowed}.suis-button:focus{outline:none}.suis-button--primary{background-color:#192a56;color:#fff}.suis-button--primary:hover:not(:disabled){background-color:#192a56d9}.suis-button--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button--secondary{background-color:#273c75;color:#fff}.suis-button--secondary:hover:not(:disabled){background-color:#273c75d9}.suis-button--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button--tertiary{background-color:#dcdde1;color:#2f3640}.suis-button--tertiary:hover:not(:disabled){background-color:#dcdde1d9}.suis-button--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button--complementary{background-color:#f5f6fa;color:#2f3640}.suis-button--complementary:hover:not(:disabled){background-color:#f5f6fad9}.suis-button--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button--success{background-color:#2ed573;color:#fff}.suis-button--success:hover:not(:disabled){background-color:#2ed573d9}.suis-button--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button--warning{background-color:#ffa502;color:#fff}.suis-button--warning:hover:not(:disabled){background-color:#ffa502d9}.suis-button--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button--danger{background-color:#ff4757;color:#fff}.suis-button--danger:hover:not(:disabled){background-color:#ff4757d9}.suis-button--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
119
270
  }
120
271
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisButtonComponent, decorators: [{
121
272
  type: Component,
122
273
  args: [{ selector: 'button[suisButton]', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
123
274
  '[attr.disabled]': 'disabled || null',
124
275
  '[attr.tabindex]': 'disabled ? -1 : 0',
125
- }, template: "<ng-container *ngIf=\"!loading; else spinner\">\n <ng-content></ng-content>\n</ng-container>\n<ng-template #spinner>\n <!-- TODO: <suis-spinner></suis-spinner> -->\n</ng-template>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-button{width:100%;display:block;padding:.5rem 1rem;border:none;border-radius:.25rem;transition:background-color .25s ease-in-out;font-size:500;text-decoration:none;text-align:center}.suis-button:hover:not(:disabled){cursor:pointer}.suis-button:hover:disabled{cursor:not-allowed}.suis-button:focus{outline:none}.suis-button--primary{background-color:#192a56;color:#fff}.suis-button--primary:hover:not(:disabled){background-color:#192a56d9}.suis-button--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button--secondary{background-color:#273c75;color:#fff}.suis-button--secondary:hover:not(:disabled){background-color:#273c75d9}.suis-button--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button--tertiary{background-color:#dcdde1;color:#2f3640}.suis-button--tertiary:hover:not(:disabled){background-color:#dcdde1d9}.suis-button--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button--complementary{background-color:#f5f6fa;color:#2f3640}.suis-button--complementary:hover:not(:disabled){background-color:#f5f6fad9}.suis-button--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button--success{background-color:#2ed573;color:#fff}.suis-button--success:hover:not(:disabled){background-color:#2ed573d9}.suis-button--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button--warning{background-color:#ffa502;color:#fff}.suis-button--warning:hover:not(:disabled){background-color:#ffa502d9}.suis-button--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button--danger{background-color:#ff4757;color:#fff}.suis-button--danger:hover:not(:disabled){background-color:#ff4757d9}.suis-button--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"] }]
276
+ }, template: "<ng-container *ngIf=\"!loading; else spinner\">\r\n <ng-content></ng-content>\r\n</ng-container>\r\n<ng-template #spinner>\r\n <!-- TODO: <suis-spinner></suis-spinner> -->\r\n</ng-template>\r\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-button{width:100%;display:block;padding:.5rem 1rem;border:none;border-radius:.25rem;transition:background-color .25s ease-in-out;font-size:500;text-decoration:none;text-align:center}.suis-button:hover:not(:disabled){cursor:pointer}.suis-button:hover:disabled{cursor:not-allowed}.suis-button:focus{outline:none}.suis-button--primary{background-color:#192a56;color:#fff}.suis-button--primary:hover:not(:disabled){background-color:#192a56d9}.suis-button--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button--secondary{background-color:#273c75;color:#fff}.suis-button--secondary:hover:not(:disabled){background-color:#273c75d9}.suis-button--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button--tertiary{background-color:#dcdde1;color:#2f3640}.suis-button--tertiary:hover:not(:disabled){background-color:#dcdde1d9}.suis-button--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button--complementary{background-color:#f5f6fa;color:#2f3640}.suis-button--complementary:hover:not(:disabled){background-color:#f5f6fad9}.suis-button--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button--success{background-color:#2ed573;color:#fff}.suis-button--success:hover:not(:disabled){background-color:#2ed573d9}.suis-button--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button--warning{background-color:#ffa502;color:#fff}.suis-button--warning:hover:not(:disabled){background-color:#ffa502d9}.suis-button--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button--danger{background-color:#ff4757;color:#fff}.suis-button--danger:hover:not(:disabled){background-color:#ff4757d9}.suis-button--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"] }]
126
277
  }] });
127
278
  class SuisButtonOutlinedComponent extends SuisButtonBase {
128
279
  ngAfterViewInit() {
@@ -130,14 +281,14 @@ class SuisButtonOutlinedComponent extends SuisButtonBase {
130
281
  this.renderer2.addClass(this.elementRef.nativeElement, `suis-button-outlined--${this.color}`);
131
282
  }
132
283
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisButtonOutlinedComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
133
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisButtonOutlinedComponent, isStandalone: true, selector: "button[suisButtonOutlined]", host: { properties: { "attr.disabled": "disabled || null", "attr.tabindex": "disabled ? -1 : 0" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!loading; else spinner\">\n <ng-content></ng-content>\n</ng-container>\n<ng-template #spinner>\n <!-- TODO: <suis-spinner></suis-spinner> -->\n</ng-template>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-button-outlined{width:100%;display:block;padding:.5rem 1rem;border-width:.125rem;border-style:solid;border-radius:.25rem;background-color:transparent;transition:background-color .5s ease-in-out;font-size:500}.suis-button-outlined:hover:not(:disabled){cursor:pointer}.suis-button-outlined:hover:disabled{cursor:not-allowed}.suis-button-outlined:focus,.suis-button-outlined:focus-within{outline:none}.suis-button-outlined--primary{border-color:#192a56;color:#192a56}.suis-button-outlined--primary:hover:not(:disabled){background-color:#192a56;color:#fff}.suis-button-outlined--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button-outlined--secondary{border-color:#273c75;color:#273c75}.suis-button-outlined--secondary:hover:not(:disabled){background-color:#273c75;color:#fff}.suis-button-outlined--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button-outlined--tertiary{border-color:#dcdde1;color:#dcdde1}.suis-button-outlined--tertiary:hover:not(:disabled){background-color:#dcdde1;color:#2f3640}.suis-button-outlined--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button-outlined--complementary{border-color:#f5f6fa;color:#f5f6fa}.suis-button-outlined--complementary:hover:not(:disabled){background-color:#f5f6fa;color:#2f3640}.suis-button-outlined--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button-outlined--success{border-color:#2ed573;color:#2ed573}.suis-button-outlined--success:hover:not(:disabled){background-color:#2ed573;color:#fff}.suis-button-outlined--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button-outlined--warning{border-color:#ffa502;color:#ffa502}.suis-button-outlined--warning:hover:not(:disabled){background-color:#ffa502;color:#fff}.suis-button-outlined--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button-outlined--danger{border-color:#ff4757;color:#ff4757}.suis-button-outlined--danger:hover:not(:disabled){background-color:#ff4757;color:#fff}.suis-button-outlined--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
284
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisButtonOutlinedComponent, isStandalone: true, selector: "button[suisButtonOutlined]", host: { properties: { "attr.disabled": "disabled || null", "attr.tabindex": "disabled ? -1 : 0" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!loading; else spinner\">\r\n <ng-content></ng-content>\r\n</ng-container>\r\n<ng-template #spinner>\r\n <!-- TODO: <suis-spinner></suis-spinner> -->\r\n</ng-template>\r\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-button-outlined{width:100%;display:block;padding:.5rem 1rem;border-width:.125rem;border-style:solid;border-radius:.25rem;background-color:transparent;transition:background-color .5s ease-in-out;font-size:500}.suis-button-outlined:hover:not(:disabled){cursor:pointer}.suis-button-outlined:hover:disabled{cursor:not-allowed}.suis-button-outlined:focus,.suis-button-outlined:focus-within{outline:none}.suis-button-outlined--primary{border-color:#192a56;color:#192a56}.suis-button-outlined--primary:hover:not(:disabled){background-color:#192a56;color:#fff}.suis-button-outlined--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button-outlined--secondary{border-color:#273c75;color:#273c75}.suis-button-outlined--secondary:hover:not(:disabled){background-color:#273c75;color:#fff}.suis-button-outlined--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button-outlined--tertiary{border-color:#dcdde1;color:#dcdde1}.suis-button-outlined--tertiary:hover:not(:disabled){background-color:#dcdde1;color:#2f3640}.suis-button-outlined--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button-outlined--complementary{border-color:#f5f6fa;color:#f5f6fa}.suis-button-outlined--complementary:hover:not(:disabled){background-color:#f5f6fa;color:#2f3640}.suis-button-outlined--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button-outlined--success{border-color:#2ed573;color:#2ed573}.suis-button-outlined--success:hover:not(:disabled){background-color:#2ed573;color:#fff}.suis-button-outlined--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button-outlined--warning{border-color:#ffa502;color:#ffa502}.suis-button-outlined--warning:hover:not(:disabled){background-color:#ffa502;color:#fff}.suis-button-outlined--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button-outlined--danger{border-color:#ff4757;color:#ff4757}.suis-button-outlined--danger:hover:not(:disabled){background-color:#ff4757;color:#fff}.suis-button-outlined--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
134
285
  }
135
286
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisButtonOutlinedComponent, decorators: [{
136
287
  type: Component,
137
288
  args: [{ selector: 'button[suisButtonOutlined]', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
138
289
  '[attr.disabled]': 'disabled || null',
139
290
  '[attr.tabindex]': 'disabled ? -1 : 0',
140
- }, template: "<ng-container *ngIf=\"!loading; else spinner\">\n <ng-content></ng-content>\n</ng-container>\n<ng-template #spinner>\n <!-- TODO: <suis-spinner></suis-spinner> -->\n</ng-template>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-button-outlined{width:100%;display:block;padding:.5rem 1rem;border-width:.125rem;border-style:solid;border-radius:.25rem;background-color:transparent;transition:background-color .5s ease-in-out;font-size:500}.suis-button-outlined:hover:not(:disabled){cursor:pointer}.suis-button-outlined:hover:disabled{cursor:not-allowed}.suis-button-outlined:focus,.suis-button-outlined:focus-within{outline:none}.suis-button-outlined--primary{border-color:#192a56;color:#192a56}.suis-button-outlined--primary:hover:not(:disabled){background-color:#192a56;color:#fff}.suis-button-outlined--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button-outlined--secondary{border-color:#273c75;color:#273c75}.suis-button-outlined--secondary:hover:not(:disabled){background-color:#273c75;color:#fff}.suis-button-outlined--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button-outlined--tertiary{border-color:#dcdde1;color:#dcdde1}.suis-button-outlined--tertiary:hover:not(:disabled){background-color:#dcdde1;color:#2f3640}.suis-button-outlined--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button-outlined--complementary{border-color:#f5f6fa;color:#f5f6fa}.suis-button-outlined--complementary:hover:not(:disabled){background-color:#f5f6fa;color:#2f3640}.suis-button-outlined--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button-outlined--success{border-color:#2ed573;color:#2ed573}.suis-button-outlined--success:hover:not(:disabled){background-color:#2ed573;color:#fff}.suis-button-outlined--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button-outlined--warning{border-color:#ffa502;color:#ffa502}.suis-button-outlined--warning:hover:not(:disabled){background-color:#ffa502;color:#fff}.suis-button-outlined--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button-outlined--danger{border-color:#ff4757;color:#ff4757}.suis-button-outlined--danger:hover:not(:disabled){background-color:#ff4757;color:#fff}.suis-button-outlined--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"] }]
291
+ }, template: "<ng-container *ngIf=\"!loading; else spinner\">\r\n <ng-content></ng-content>\r\n</ng-container>\r\n<ng-template #spinner>\r\n <!-- TODO: <suis-spinner></suis-spinner> -->\r\n</ng-template>\r\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-button-outlined{width:100%;display:block;padding:.5rem 1rem;border-width:.125rem;border-style:solid;border-radius:.25rem;background-color:transparent;transition:background-color .5s ease-in-out;font-size:500}.suis-button-outlined:hover:not(:disabled){cursor:pointer}.suis-button-outlined:hover:disabled{cursor:not-allowed}.suis-button-outlined:focus,.suis-button-outlined:focus-within{outline:none}.suis-button-outlined--primary{border-color:#192a56;color:#192a56}.suis-button-outlined--primary:hover:not(:disabled){background-color:#192a56;color:#fff}.suis-button-outlined--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button-outlined--secondary{border-color:#273c75;color:#273c75}.suis-button-outlined--secondary:hover:not(:disabled){background-color:#273c75;color:#fff}.suis-button-outlined--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button-outlined--tertiary{border-color:#dcdde1;color:#dcdde1}.suis-button-outlined--tertiary:hover:not(:disabled){background-color:#dcdde1;color:#2f3640}.suis-button-outlined--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button-outlined--complementary{border-color:#f5f6fa;color:#f5f6fa}.suis-button-outlined--complementary:hover:not(:disabled){background-color:#f5f6fa;color:#2f3640}.suis-button-outlined--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button-outlined--success{border-color:#2ed573;color:#2ed573}.suis-button-outlined--success:hover:not(:disabled){background-color:#2ed573;color:#fff}.suis-button-outlined--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button-outlined--warning{border-color:#ffa502;color:#ffa502}.suis-button-outlined--warning:hover:not(:disabled){background-color:#ffa502;color:#fff}.suis-button-outlined--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button-outlined--danger{border-color:#ff4757;color:#ff4757}.suis-button-outlined--danger:hover:not(:disabled){background-color:#ff4757;color:#fff}.suis-button-outlined--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"] }]
141
292
  }] });
142
293
  class SuisAnchorButtonComponent extends SuisButtonBase {
143
294
  ngAfterViewInit() {
@@ -151,144 +302,28 @@ class SuisAnchorButtonComponent extends SuisButtonBase {
151
302
  }
152
303
  }
153
304
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisAnchorButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
154
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisAnchorButtonComponent, isStandalone: true, selector: "a[suisButton]", host: { listeners: { "click": "onClick()" }, properties: { "attr.tabindex": "disabled ? -1 : 0" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!loading; else spinner\">\n <ng-content></ng-content>\n</ng-container>\n<ng-template #spinner>\n <!-- TODO: <suis-spinner></suis-spinner> -->\n</ng-template>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-button{width:100%;display:block;padding:.5rem 1rem;border:none;border-radius:.25rem;transition:background-color .25s ease-in-out;font-size:500;text-decoration:none;text-align:center}.suis-button:hover:not(:disabled){cursor:pointer}.suis-button:hover:disabled{cursor:not-allowed}.suis-button:focus{outline:none}.suis-button--primary{background-color:#192a56;color:#fff}.suis-button--primary:hover:not(:disabled){background-color:#192a56d9}.suis-button--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button--secondary{background-color:#273c75;color:#fff}.suis-button--secondary:hover:not(:disabled){background-color:#273c75d9}.suis-button--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button--tertiary{background-color:#dcdde1;color:#2f3640}.suis-button--tertiary:hover:not(:disabled){background-color:#dcdde1d9}.suis-button--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button--complementary{background-color:#f5f6fa;color:#2f3640}.suis-button--complementary:hover:not(:disabled){background-color:#f5f6fad9}.suis-button--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button--success{background-color:#2ed573;color:#fff}.suis-button--success:hover:not(:disabled){background-color:#2ed573d9}.suis-button--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button--warning{background-color:#ffa502;color:#fff}.suis-button--warning:hover:not(:disabled){background-color:#ffa502d9}.suis-button--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button--danger{background-color:#ff4757;color:#fff}.suis-button--danger:hover:not(:disabled){background-color:#ff4757d9}.suis-button--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
305
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisAnchorButtonComponent, isStandalone: true, selector: "a[suisButton]", host: { listeners: { "click": "onClick()" }, properties: { "attr.tabindex": "disabled ? -1 : 0" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!loading; else spinner\">\r\n <ng-content></ng-content>\r\n</ng-container>\r\n<ng-template #spinner>\r\n <!-- TODO: <suis-spinner></suis-spinner> -->\r\n</ng-template>\r\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-button{width:100%;display:block;padding:.5rem 1rem;border:none;border-radius:.25rem;transition:background-color .25s ease-in-out;font-size:500;text-decoration:none;text-align:center}.suis-button:hover:not(:disabled){cursor:pointer}.suis-button:hover:disabled{cursor:not-allowed}.suis-button:focus{outline:none}.suis-button--primary{background-color:#192a56;color:#fff}.suis-button--primary:hover:not(:disabled){background-color:#192a56d9}.suis-button--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button--secondary{background-color:#273c75;color:#fff}.suis-button--secondary:hover:not(:disabled){background-color:#273c75d9}.suis-button--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button--tertiary{background-color:#dcdde1;color:#2f3640}.suis-button--tertiary:hover:not(:disabled){background-color:#dcdde1d9}.suis-button--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button--complementary{background-color:#f5f6fa;color:#2f3640}.suis-button--complementary:hover:not(:disabled){background-color:#f5f6fad9}.suis-button--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button--success{background-color:#2ed573;color:#fff}.suis-button--success:hover:not(:disabled){background-color:#2ed573d9}.suis-button--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button--warning{background-color:#ffa502;color:#fff}.suis-button--warning:hover:not(:disabled){background-color:#ffa502d9}.suis-button--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button--danger{background-color:#ff4757;color:#fff}.suis-button--danger:hover:not(:disabled){background-color:#ff4757d9}.suis-button--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
155
306
  }
156
307
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisAnchorButtonComponent, decorators: [{
157
308
  type: Component,
158
309
  args: [{ selector: 'a[suisButton]', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
159
310
  '[attr.tabindex]': 'disabled ? -1 : 0',
160
- }, template: "<ng-container *ngIf=\"!loading; else spinner\">\n <ng-content></ng-content>\n</ng-container>\n<ng-template #spinner>\n <!-- TODO: <suis-spinner></suis-spinner> -->\n</ng-template>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-button{width:100%;display:block;padding:.5rem 1rem;border:none;border-radius:.25rem;transition:background-color .25s ease-in-out;font-size:500;text-decoration:none;text-align:center}.suis-button:hover:not(:disabled){cursor:pointer}.suis-button:hover:disabled{cursor:not-allowed}.suis-button:focus{outline:none}.suis-button--primary{background-color:#192a56;color:#fff}.suis-button--primary:hover:not(:disabled){background-color:#192a56d9}.suis-button--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button--secondary{background-color:#273c75;color:#fff}.suis-button--secondary:hover:not(:disabled){background-color:#273c75d9}.suis-button--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button--tertiary{background-color:#dcdde1;color:#2f3640}.suis-button--tertiary:hover:not(:disabled){background-color:#dcdde1d9}.suis-button--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button--complementary{background-color:#f5f6fa;color:#2f3640}.suis-button--complementary:hover:not(:disabled){background-color:#f5f6fad9}.suis-button--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button--success{background-color:#2ed573;color:#fff}.suis-button--success:hover:not(:disabled){background-color:#2ed573d9}.suis-button--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button--warning{background-color:#ffa502;color:#fff}.suis-button--warning:hover:not(:disabled){background-color:#ffa502d9}.suis-button--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button--danger{background-color:#ff4757;color:#fff}.suis-button--danger:hover:not(:disabled){background-color:#ff4757d9}.suis-button--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"] }]
311
+ }, template: "<ng-container *ngIf=\"!loading; else spinner\">\r\n <ng-content></ng-content>\r\n</ng-container>\r\n<ng-template #spinner>\r\n <!-- TODO: <suis-spinner></suis-spinner> -->\r\n</ng-template>\r\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-button{width:100%;display:block;padding:.5rem 1rem;border:none;border-radius:.25rem;transition:background-color .25s ease-in-out;font-size:500;text-decoration:none;text-align:center}.suis-button:hover:not(:disabled){cursor:pointer}.suis-button:hover:disabled{cursor:not-allowed}.suis-button:focus{outline:none}.suis-button--primary{background-color:#192a56;color:#fff}.suis-button--primary:hover:not(:disabled){background-color:#192a56d9}.suis-button--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button--secondary{background-color:#273c75;color:#fff}.suis-button--secondary:hover:not(:disabled){background-color:#273c75d9}.suis-button--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button--tertiary{background-color:#dcdde1;color:#2f3640}.suis-button--tertiary:hover:not(:disabled){background-color:#dcdde1d9}.suis-button--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button--complementary{background-color:#f5f6fa;color:#2f3640}.suis-button--complementary:hover:not(:disabled){background-color:#f5f6fad9}.suis-button--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button--success{background-color:#2ed573;color:#fff}.suis-button--success:hover:not(:disabled){background-color:#2ed573d9}.suis-button--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button--warning{background-color:#ffa502;color:#fff}.suis-button--warning:hover:not(:disabled){background-color:#ffa502d9}.suis-button--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button--danger{background-color:#ff4757;color:#fff}.suis-button--danger:hover:not(:disabled){background-color:#ff4757d9}.suis-button--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"] }]
161
312
  }], propDecorators: { onClick: [{
162
313
  type: HostListener,
163
314
  args: ['click']
164
315
  }] } });
165
316
 
166
- var SuisIconType;
167
- (function (SuisIconType) {
168
- SuisIconType["INFO"] = "info";
169
- SuisIconType["WARNING"] = "warning";
170
- SuisIconType["CHECK"] = "check";
171
- SuisIconType["CROSS"] = "cross";
172
- SuisIconType["PLUS"] = "plus";
173
- SuisIconType["MINUS"] = "minus";
174
- SuisIconType["ARROW_UP"] = "arrow-up";
175
- SuisIconType["ARROW_LEFT"] = "arrow-left";
176
- SuisIconType["ARROW_RIGHT"] = "arrow-right";
177
- SuisIconType["ARROW_DOWN"] = "arrow-down";
178
- })(SuisIconType || (SuisIconType = {}));
179
-
180
- class SuisIconTypePipe {
181
- transform(type) {
182
- switch (type) {
183
- case SuisIconType.INFO:
184
- return '&quest;';
185
- case SuisIconType.WARNING:
186
- return '&excl;';
187
- case SuisIconType.CHECK:
188
- return '&check;';
189
- case SuisIconType.CROSS:
190
- return '&times;';
191
- case SuisIconType.PLUS:
192
- return '&plus;';
193
- case SuisIconType.MINUS:
194
- return '&minus;';
195
- case SuisIconType.ARROW_LEFT:
196
- return '&#8592;';
197
- case SuisIconType.ARROW_UP:
198
- return '&#8593;';
199
- case SuisIconType.ARROW_RIGHT:
200
- return '&#8594;';
201
- case SuisIconType.ARROW_DOWN:
202
- return '&#8595;';
203
- }
204
- }
205
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisIconTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
206
- static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: SuisIconTypePipe, isStandalone: true, name: "suisIconType" }); }
207
- }
208
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisIconTypePipe, decorators: [{
209
- type: Pipe,
210
- args: [{
211
- standalone: true,
212
- name: 'suisIconType',
213
- }]
214
- }] });
215
-
216
- class SuisNgClassPipe {
217
- transform(prefix, ...args) {
218
- const classes = [];
219
- args.forEach((arg) => classes.push(`${prefix}--${arg}`));
220
- return classes;
221
- }
222
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisNgClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
223
- static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: SuisNgClassPipe, isStandalone: true, name: "suisNgClass" }); }
224
- }
225
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisNgClassPipe, decorators: [{
226
- type: Pipe,
227
- args: [{
228
- standalone: true,
229
- name: 'suisNgClass',
230
- }]
231
- }] });
232
-
233
- class SuisIconComponent {
234
- constructor() {
235
- /** @internal */
236
- this.SuisIconType = SuisIconType;
237
- /**
238
- * Sets the font size of the HTML Entity itself. Type of SuisIconSize. By default set to 'md'.
239
- */
240
- this.size = 'md';
241
- /**
242
- * Sets the color pallette of the icon and surroundings. Type of SuisIconColor. By default set to 'dark'.
243
- */
244
- this.color = 'dark';
245
- /**
246
- * Sets the HTML Entity displayed in content. Type of SuisIconType. By default set to SuisIconType.INFO.
247
- */
248
- this.type = SuisIconType.INFO;
249
- /**
250
- * Shows the circled border around the icon. By default set to false. Can not be combined with filled (will be overriden then).
251
- */
252
- this.outlined = false;
253
- /**
254
- * Shows the circled background behind the icon. By default set to false. Overrides outlined behavior if used at the sime time.
255
- */
256
- this.filled = false;
257
- /**
258
- * Shows the pointer cursor when hovered. By defauly set to false.
259
- */
260
- this.pointer = false;
261
- }
262
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
263
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisIconComponent, isStandalone: true, selector: "suis-icon", inputs: { size: "size", color: "color", type: "type", outlined: "outlined", filled: "filled", pointer: "pointer" }, ngImport: i0, template: "<div\n class=\"suis-icon\"\n [class.suis-icon--outlined]=\"outlined\"\n [class.suis-icon--filled]=\"filled\"\n [class.suis-icon--pointer]=\"pointer\"\n [ngClass]=\"'suis-icon' | suisNgClass : color : size\"\n>\n <span [innerHTML]=\"type | suisIconType\"></span>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-icon{display:flex;justify-content:center;align-items:center;width:1rem;height:1rem;border-radius:100%;line-height:1rem;background-color:transparent;border:none}.suis-icon--outlined{border-width:.0625rem;border-style:solid}.suis-icon--pointer{cursor:pointer}.suis-icon--sm{font-size:.5rem}.suis-icon--md{font-size:.75rem}.suis-icon--lg{font-size:1rem}.suis-icon--primary{color:#192a56;border-color:#192a56}.suis-icon--secondary{color:#273c75;border-color:#273c75}.suis-icon--tertiary{color:#dcdde1;border-color:#dcdde1}.suis-icon--complementary{color:#f5f6fa;border-color:#f5f6fa}.suis-icon--success{color:#2ed573;border-color:#2ed573}.suis-icon--warning{color:#ffa502;border-color:#ffa502}.suis-icon--danger{color:#ff4757;border-color:#ff4757}.suis-icon--white{color:#fff;border-color:#fff}.suis-icon--gray{color:#bcbcbc;border-color:#bcbcbc}.suis-icon--dark{color:#000;border-color:#000}.suis-icon--filled{border:none;background-color:#000;color:#fff}.suis-icon--filled.suis-icon--primary{background-color:#192a56}.suis-icon--filled.suis-icon--secondary{background-color:#273c75}.suis-icon--filled.suis-icon--tertiary{background-color:#dcdde1;color:#2f3640}.suis-icon--filled.suis-icon--complementary{background-color:#f5f6fa;color:#2f3640}.suis-icon--filled.suis-icon--success{background-color:#2ed573}.suis-icon--filled.suis-icon--warning{background-color:#ffa502}.suis-icon--filled.suis-icon--danger{background-color:#ff4757}.suis-icon--filled.suis-icon--white{background-color:#fff;color:#2f3640}.suis-icon--filled.suis-icon--gray{background-color:#bcbcbc}.suis-icon--filled.suis-icon--dark{background-color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisIconTypePipe, name: "suisIconType" }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
264
- }
265
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisIconComponent, decorators: [{
266
- type: Component,
267
- args: [{ selector: 'suis-icon', standalone: true, imports: [CommonModule, SuisIconTypePipe, SuisNgClassPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-icon\"\n [class.suis-icon--outlined]=\"outlined\"\n [class.suis-icon--filled]=\"filled\"\n [class.suis-icon--pointer]=\"pointer\"\n [ngClass]=\"'suis-icon' | suisNgClass : color : size\"\n>\n <span [innerHTML]=\"type | suisIconType\"></span>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-icon{display:flex;justify-content:center;align-items:center;width:1rem;height:1rem;border-radius:100%;line-height:1rem;background-color:transparent;border:none}.suis-icon--outlined{border-width:.0625rem;border-style:solid}.suis-icon--pointer{cursor:pointer}.suis-icon--sm{font-size:.5rem}.suis-icon--md{font-size:.75rem}.suis-icon--lg{font-size:1rem}.suis-icon--primary{color:#192a56;border-color:#192a56}.suis-icon--secondary{color:#273c75;border-color:#273c75}.suis-icon--tertiary{color:#dcdde1;border-color:#dcdde1}.suis-icon--complementary{color:#f5f6fa;border-color:#f5f6fa}.suis-icon--success{color:#2ed573;border-color:#2ed573}.suis-icon--warning{color:#ffa502;border-color:#ffa502}.suis-icon--danger{color:#ff4757;border-color:#ff4757}.suis-icon--white{color:#fff;border-color:#fff}.suis-icon--gray{color:#bcbcbc;border-color:#bcbcbc}.suis-icon--dark{color:#000;border-color:#000}.suis-icon--filled{border:none;background-color:#000;color:#fff}.suis-icon--filled.suis-icon--primary{background-color:#192a56}.suis-icon--filled.suis-icon--secondary{background-color:#273c75}.suis-icon--filled.suis-icon--tertiary{background-color:#dcdde1;color:#2f3640}.suis-icon--filled.suis-icon--complementary{background-color:#f5f6fa;color:#2f3640}.suis-icon--filled.suis-icon--success{background-color:#2ed573}.suis-icon--filled.suis-icon--warning{background-color:#ffa502}.suis-icon--filled.suis-icon--danger{background-color:#ff4757}.suis-icon--filled.suis-icon--white{background-color:#fff;color:#2f3640}.suis-icon--filled.suis-icon--gray{background-color:#bcbcbc}.suis-icon--filled.suis-icon--dark{background-color:#000}\n"] }]
268
- }], propDecorators: { size: [{
269
- type: Input
270
- }], color: [{
271
- type: Input
272
- }], type: [{
273
- type: Input
274
- }], outlined: [{
275
- type: Input
276
- }], filled: [{
277
- type: Input
278
- }], pointer: [{
279
- type: Input
280
- }] } });
281
-
282
317
  class SuisChipComponent {
283
318
  constructor() {
284
319
  /** @internal */
285
320
  this.SuisIconType = SuisIconType;
286
321
  /**
287
- * Sets the color pallette of the chip. Type of SuisChipColor. By default set to 'primary'.
322
+ * Sets the color pallette of the chip. Type of SuisColor. By default set to 'primary'.
288
323
  */
289
324
  this.color = 'primary';
290
325
  /**
291
- * Sets the color of the cross icon. Visible only if removable set to true. Type of SuisIconColor. By default set to 'white'.
326
+ * Sets the color of the cross icon. Visible only if removable set to true. Type of SuisColor. By default set to 'white'.
292
327
  */
293
328
  this.iconColor = 'white';
294
329
  /**
@@ -305,11 +340,11 @@ class SuisChipComponent {
305
340
  this.remove.emit();
306
341
  }
307
342
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
308
- 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]=\"'lg'\"\n ></suis-icon>\n </button>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.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"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
343
+ 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"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
309
344
  }
310
345
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisChipComponent, decorators: [{
311
346
  type: Component,
312
- 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]=\"'lg'\"\n ></suis-icon>\n </button>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.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"] }]
347
+ 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"] }]
313
348
  }], propDecorators: { color: [{
314
349
  type: Input
315
350
  }], iconColor: [{
@@ -328,11 +363,11 @@ class SuisFormFieldComponent {
328
363
  this.spacing = false;
329
364
  }
330
365
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
331
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisFormFieldComponent, isStandalone: true, selector: "suis-form-field", inputs: { errorTemplate: "errorTemplate", spacing: "spacing" }, ngImport: i0, template: "<div class=\"suis-form-field\" [class.suis-form-field--spacing]=\"spacing\">\n <ng-content></ng-content>\n <div *ngIf=\"errorTemplate\" class=\"suis-form-field__error\">\n <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-form-field{width:100%}.suis-form-field__error{color:#ff4757;margin-top:.25rem;font-size:.75rem}.suis-form-field--spacing{margin-bottom:.75rem}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
366
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisFormFieldComponent, isStandalone: true, selector: "suis-form-field", inputs: { errorTemplate: "errorTemplate", spacing: "spacing" }, ngImport: i0, template: "<div class=\"suis-form-field\" [class.suis-form-field--spacing]=\"spacing\">\n <ng-content></ng-content>\n <div *ngIf=\"errorTemplate\" class=\"suis-form-field__error\">\n <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-form-field{width:100%}.suis-form-field__error{color:#ff4757;margin-top:.25rem;font-size:.75rem}.suis-form-field--spacing{margin-bottom:.75rem}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
332
367
  }
333
368
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisFormFieldComponent, decorators: [{
334
369
  type: Component,
335
- args: [{ selector: 'suis-form-field', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-form-field\" [class.suis-form-field--spacing]=\"spacing\">\n <ng-content></ng-content>\n <div *ngIf=\"errorTemplate\" class=\"suis-form-field__error\">\n <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-form-field{width:100%}.suis-form-field__error{color:#ff4757;margin-top:.25rem;font-size:.75rem}.suis-form-field--spacing{margin-bottom:.75rem}\n"] }]
370
+ args: [{ selector: 'suis-form-field', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-form-field\" [class.suis-form-field--spacing]=\"spacing\">\n <ng-content></ng-content>\n <div *ngIf=\"errorTemplate\" class=\"suis-form-field__error\">\n <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-form-field{width:100%}.suis-form-field__error{color:#ff4757;margin-top:.25rem;font-size:.75rem}.suis-form-field--spacing{margin-bottom:.75rem}\n"] }]
336
371
  }], propDecorators: { errorTemplate: [{
337
372
  type: Input
338
373
  }], spacing: [{
@@ -380,7 +415,7 @@ class SuisInputTextComponent extends SuisInputBase {
380
415
  multi: true,
381
416
  useExisting: forwardRef(() => SuisInputTextComponent),
382
417
  },
383
- ], 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}.suis-input{background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 1rem;border:0;width:100%}.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 }); }
418
+ ], 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%}.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 }); }
384
419
  }
385
420
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputTextComponent, decorators: [{
386
421
  type: Component,
@@ -390,7 +425,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
390
425
  multi: true,
391
426
  useExisting: forwardRef(() => SuisInputTextComponent),
392
427
  },
393
- ], 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}.suis-input{background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 1rem;border:0;width:100%}.suis-input:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input--invalid{box-shadow:0 2px 5px #ff4757bf}\n"] }]
428
+ ], 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%}.suis-input:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input--invalid{box-shadow:0 2px 5px #ff4757bf}\n"] }]
394
429
  }], propDecorators: { type: [{
395
430
  type: Input
396
431
  }], placeholder: [{
@@ -407,11 +442,11 @@ class SuisInputChipsComponent extends SuisInputBase {
407
442
  */
408
443
  this.placeholder = '';
409
444
  /**
410
- * Sets the color pallette of the chips. Type of SuisChipColor. By default set to 'primary'.
445
+ * Sets the color pallette of the chips. Type of SuisColor. By default set to 'primary'.
411
446
  */
412
447
  this.chipColor = 'primary';
413
448
  /**
414
- * Sets the color of the chips' cross icon. Type of SuisIconColor. By default set to 'white'.
449
+ * Sets the color of the chips' cross icon. Type of SuisColor. By default set to 'white'.
415
450
  */
416
451
  this.chipIconColor = 'white';
417
452
  /** @internal */
@@ -493,20 +528,78 @@ class SuisLabelComponent {
493
528
  this.spacing = false;
494
529
  }
495
530
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
496
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisLabelComponent, isStandalone: true, selector: "suis-label", inputs: { required: "required", spacing: "spacing" }, ngImport: i0, template: "<label class=\"suis-label\" [class.suis-label--spacing]=\"spacing\">\n <ng-content></ng-content>\n <span *ngIf=\"required\" class=\"suis-label__asterisk\">*</span>\n <ng-content select=\"[suisLabelAside]\"></ng-content>\n</label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-label{font-size:.875rem;display:flex}.suis-label--spacing{margin-bottom:.25rem}.suis-label__asterisk{color:#ff4757;margin-left:.0625rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
531
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisLabelComponent, isStandalone: true, selector: "suis-label", inputs: { required: "required", spacing: "spacing" }, ngImport: i0, template: "<label class=\"suis-label\" [class.suis-label--spacing]=\"spacing\">\n <ng-content></ng-content>\n <span *ngIf=\"required\" class=\"suis-label__asterisk\">*</span>\n <ng-content select=\"[suisLabelAside]\"></ng-content>\n</label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-label{font-size:.875rem;display:flex}.suis-label--spacing{margin-bottom:.25rem}.suis-label__asterisk{color:#ff4757;margin-left:.0625rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
497
532
  }
498
533
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisLabelComponent, decorators: [{
499
534
  type: Component,
500
- args: [{ selector: 'suis-label', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"suis-label\" [class.suis-label--spacing]=\"spacing\">\n <ng-content></ng-content>\n <span *ngIf=\"required\" class=\"suis-label__asterisk\">*</span>\n <ng-content select=\"[suisLabelAside]\"></ng-content>\n</label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-label{font-size:.875rem;display:flex}.suis-label--spacing{margin-bottom:.25rem}.suis-label__asterisk{color:#ff4757;margin-left:.0625rem}\n"] }]
535
+ args: [{ selector: 'suis-label', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"suis-label\" [class.suis-label--spacing]=\"spacing\">\n <ng-content></ng-content>\n <span *ngIf=\"required\" class=\"suis-label__asterisk\">*</span>\n <ng-content select=\"[suisLabelAside]\"></ng-content>\n</label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-label{font-size:.875rem;display:flex}.suis-label--spacing{margin-bottom:.25rem}.suis-label__asterisk{color:#ff4757;margin-left:.0625rem}\n"] }]
501
536
  }], propDecorators: { required: [{
502
537
  type: Input
503
538
  }], spacing: [{
504
539
  type: Input
505
540
  }] } });
506
541
 
542
+ class SuisSpinnerComponent {
543
+ constructor() {
544
+ /**
545
+ * Sets the size of the spinner. Type of SuisSize. By default set to 'sm'.
546
+ */
547
+ this.size = 'sm';
548
+ /**
549
+ * Sets the color of the spinner. Type of SuisColor. By default set to 'primary'.
550
+ */
551
+ this.color = 'primary';
552
+ }
553
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
554
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisSpinnerComponent, isStandalone: true, selector: "suis-spinner", inputs: { size: "size", color: "color" }, ngImport: i0, template: "<div\n class=\"suis-spinner\"\n [ngClass]=\"'suis-spinner' | suisNgClass : size : color\"\n></div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-spinner{animation:spin .5s infinite linear;border-style:solid;border-radius:50%;border-left-color:transparent!important}.suis-spinner--primary{border-color:#192a56}.suis-spinner--secondary{border-color:#273c75}.suis-spinner--tertiary{border-color:#dcdde1}.suis-spinner--complementary{border-color:#f5f6fa}.suis-spinner--success{border-color:#2ed573}.suis-spinner--warning{border-color:#ffa502}.suis-spinner--danger{border-color:#ff4757}.suis-spinner--dark{border-color:#000}.suis-spinner--gray{border-color:#bcbcbc}.suis-spinner--white{border-color:#fff}.suis-spinner--xs{width:1rem;height:1rem;border-width:.1875rem}.suis-spinner--sm{width:1.5rem;height:1.5rem;border-width:.25rem}.suis-spinner--md{width:2rem;height:2rem;border-width:.375rem}.suis-spinner--lg{width:3rem;height:3rem;border-width:.5rem}.suis-spinner--xl{width:4rem;height:4rem;border-width:.625rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
555
+ }
556
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSpinnerComponent, decorators: [{
557
+ type: Component,
558
+ args: [{ selector: 'suis-spinner', standalone: true, imports: [CommonModule, SuisNgClassPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-spinner\"\n [ngClass]=\"'suis-spinner' | suisNgClass : size : color\"\n></div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-spinner{animation:spin .5s infinite linear;border-style:solid;border-radius:50%;border-left-color:transparent!important}.suis-spinner--primary{border-color:#192a56}.suis-spinner--secondary{border-color:#273c75}.suis-spinner--tertiary{border-color:#dcdde1}.suis-spinner--complementary{border-color:#f5f6fa}.suis-spinner--success{border-color:#2ed573}.suis-spinner--warning{border-color:#ffa502}.suis-spinner--danger{border-color:#ff4757}.suis-spinner--dark{border-color:#000}.suis-spinner--gray{border-color:#bcbcbc}.suis-spinner--white{border-color:#fff}.suis-spinner--xs{width:1rem;height:1rem;border-width:.1875rem}.suis-spinner--sm{width:1.5rem;height:1.5rem;border-width:.25rem}.suis-spinner--md{width:2rem;height:2rem;border-width:.375rem}.suis-spinner--lg{width:3rem;height:3rem;border-width:.5rem}.suis-spinner--xl{width:4rem;height:4rem;border-width:.625rem}\n"] }]
559
+ }], propDecorators: { size: [{
560
+ type: Input
561
+ }], color: [{
562
+ type: Input
563
+ }] } });
564
+
565
+ class SuisSpinnerContainerComponent {
566
+ constructor() {
567
+ /**
568
+ * Sets the size of the spinner. Type of SuisSize. By default set to 'sm'.
569
+ */
570
+ this.size = 'sm';
571
+ /**
572
+ * Sets the color of the spinner. Type of SuisColor. By default set to 'primary'.
573
+ */
574
+ this.color = 'primary';
575
+ /**
576
+ * Adds blur effect to the container background. By default set to false.
577
+ */
578
+ this.blur = false;
579
+ /**
580
+ * Position absolute to the parent element (must have relative position). By default set to false.
581
+ */
582
+ this.absolute = false;
583
+ }
584
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSpinnerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
585
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisSpinnerContainerComponent, isStandalone: true, selector: "suis-spinner-container", inputs: { size: "size", color: "color", blur: "blur", absolute: "absolute" }, ngImport: i0, template: "<div\n class=\"suis-spinner-container\"\n [class.suis-spinner-container--blur]=\"blur\"\n [class.suis-spinner-container--absolute]=\"absolute\"\n>\n <suis-spinner [size]=\"size\" [color]=\"color\"></suis-spinner>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-spinner-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.suis-spinner-container--blur{background-color:#ffffff20;-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem)}.suis-spinner-container--absolute{position:absolute;inset:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SuisSpinnerComponent, selector: "suis-spinner", inputs: ["size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
586
+ }
587
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSpinnerContainerComponent, decorators: [{
588
+ type: Component,
589
+ args: [{ selector: 'suis-spinner-container', standalone: true, imports: [CommonModule, SuisSpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-spinner-container\"\n [class.suis-spinner-container--blur]=\"blur\"\n [class.suis-spinner-container--absolute]=\"absolute\"\n>\n <suis-spinner [size]=\"size\" [color]=\"color\"></suis-spinner>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-spinner-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.suis-spinner-container--blur{background-color:#ffffff20;-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem)}.suis-spinner-container--absolute{position:absolute;inset:0}\n"] }]
590
+ }], propDecorators: { size: [{
591
+ type: Input
592
+ }], color: [{
593
+ type: Input
594
+ }], blur: [{
595
+ type: Input
596
+ }], absolute: [{
597
+ type: Input
598
+ }] } });
599
+
507
600
  /**
508
601
  * Generated bundle index. Do not edit.
509
602
  */
510
603
 
511
- export { SuisAnchorButtonComponent, SuisBoxComponent, SuisButtonComponent, SuisButtonOutlinedComponent, SuisChipComponent, SuisFormFieldComponent, SuisIconComponent, SuisIconType, SuisInputChipsComponent, SuisInputTextComponent, SuisLabelComponent, SuisNgClassPipe };
604
+ export { SuisAlertComponent, SuisAnchorButtonComponent, SuisBoxComponent, SuisButtonComponent, SuisButtonOutlinedComponent, SuisChipComponent, SuisFormFieldComponent, SuisIconComponent, SuisIconType, SuisInputChipsComponent, SuisInputTextComponent, SuisLabelComponent, SuisNgClassPipe, SuisSpinnerComponent, SuisSpinnerContainerComponent };
512
605
  //# sourceMappingURL=suis.mjs.map