suis 0.20.0 → 0.21.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/fesm2022/suis.mjs CHANGED
@@ -38,6 +38,8 @@ var SuisIconType;
38
38
  SuisIconType["ARROW_DOWN"] = "arrow-down";
39
39
  SuisIconType["CHEVRON_UP"] = "chevron-up";
40
40
  SuisIconType["CHEVRON_DOWN"] = "chevron-down";
41
+ SuisIconType["CHEVRON_LEFT"] = "chevron-left";
42
+ SuisIconType["CHEVRON_RIGHT"] = "chevron-right";
41
43
  })(SuisIconType || (SuisIconType = {}));
42
44
 
43
45
  class SuisIconTypePipe {
@@ -64,8 +66,10 @@ class SuisIconTypePipe {
64
66
  case SuisIconType.ARROW_DOWN:
65
67
  return '↓';
66
68
  case SuisIconType.CHEVRON_UP:
69
+ case SuisIconType.CHEVRON_LEFT:
67
70
  return '‹';
68
71
  case SuisIconType.CHEVRON_DOWN:
72
+ case SuisIconType.CHEVRON_RIGHT:
69
73
  return '›';
70
74
  }
71
75
  }
@@ -232,9 +236,13 @@ class SuisButtonBase {
232
236
  * Shows loading spinner instead of content projection. By default set to false.
233
237
  */
234
238
  this.loading = false;
239
+ /**
240
+ * Sets width to fit-content instead of 100%. By default set to false.
241
+ */
242
+ this.fitContent = false;
235
243
  }
236
244
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisButtonBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
237
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: SuisButtonBase, inputs: { color: "color", disabled: "disabled", loading: "loading" }, ngImport: i0 }); }
245
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: SuisButtonBase, inputs: { color: "color", disabled: "disabled", loading: "loading", fitContent: "fitContent" }, ngImport: i0 }); }
238
246
  }
239
247
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisButtonBase, decorators: [{
240
248
  type: Directive
@@ -244,6 +252,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
244
252
  type: Input
245
253
  }], loading: [{
246
254
  type: Input
255
+ }], fitContent: [{
256
+ type: Input
247
257
  }] } });
248
258
 
249
259
  class SuisInputBase {
@@ -404,31 +414,35 @@ class SuisButtonComponent extends SuisButtonBase {
404
414
  ngAfterViewInit() {
405
415
  this.renderer2.addClass(this.elementRef.nativeElement, 'suis-button');
406
416
  this.renderer2.addClass(this.elementRef.nativeElement, `suis-button--${this.color}`);
417
+ if (this.fitContent)
418
+ this.renderer2.addClass(this.elementRef.nativeElement, 'suis-button--fit-content');
407
419
  }
408
420
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
409
- 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 }); }
421
+ 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-radius:.25rem;font-size:500;text-align:center;text-decoration:none;border:none;transition:background-color .25s ease-in-out}.suis-button--fit-content{width:-moz-fit-content;width:fit-content}.suis-button:disabled{opacity:.5}.suis-button:hover:not(:disabled){cursor:pointer}.suis-button:hover:disabled{cursor:not-allowed}.suis-button:focus,.suis-button:focus-within{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 }); }
410
422
  }
411
423
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisButtonComponent, decorators: [{
412
424
  type: Component,
413
425
  args: [{ selector: 'button[suisButton]', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
414
426
  '[attr.disabled]': 'disabled || null',
415
427
  '[attr.tabindex]': 'disabled ? -1 : 0',
416
- }, 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"] }]
428
+ }, 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-radius:.25rem;font-size:500;text-align:center;text-decoration:none;border:none;transition:background-color .25s ease-in-out}.suis-button--fit-content{width:-moz-fit-content;width:fit-content}.suis-button:disabled{opacity:.5}.suis-button:hover:not(:disabled){cursor:pointer}.suis-button:hover:disabled{cursor:not-allowed}.suis-button:focus,.suis-button:focus-within{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"] }]
417
429
  }] });
418
430
  class SuisButtonOutlinedComponent extends SuisButtonBase {
419
431
  ngAfterViewInit() {
420
432
  this.renderer2.addClass(this.elementRef.nativeElement, 'suis-button-outlined');
421
433
  this.renderer2.addClass(this.elementRef.nativeElement, `suis-button-outlined--${this.color}`);
434
+ if (this.fitContent)
435
+ this.renderer2.addClass(this.elementRef.nativeElement, 'suis-button-outlined--fit-content');
422
436
  }
423
437
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisButtonOutlinedComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
424
- 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 }); }
438
+ 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-radius:.25rem;font-size:500;text-align:center;text-decoration:none;border-width:.125rem;border-style:solid;background-color:transparent;transition:background-color .5s ease-in-out}.suis-button-outlined--fit-content{width:-moz-fit-content;width:fit-content}.suis-button-outlined:disabled{opacity:.5}.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 }); }
425
439
  }
426
440
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisButtonOutlinedComponent, decorators: [{
427
441
  type: Component,
428
442
  args: [{ selector: 'button[suisButtonOutlined]', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
429
443
  '[attr.disabled]': 'disabled || null',
430
444
  '[attr.tabindex]': 'disabled ? -1 : 0',
431
- }, 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"] }]
445
+ }, 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-radius:.25rem;font-size:500;text-align:center;text-decoration:none;border-width:.125rem;border-style:solid;background-color:transparent;transition:background-color .5s ease-in-out}.suis-button-outlined--fit-content{width:-moz-fit-content;width:fit-content}.suis-button-outlined:disabled{opacity:.5}.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"] }]
432
446
  }] });
433
447
  class SuisAnchorButtonComponent extends SuisButtonBase {
434
448
  ngAfterViewInit() {
@@ -442,13 +456,13 @@ class SuisAnchorButtonComponent extends SuisButtonBase {
442
456
  }
443
457
  }
444
458
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisAnchorButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
445
- 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 }); }
459
+ 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-radius:.25rem;font-size:500;text-align:center;text-decoration:none;border:none;transition:background-color .25s ease-in-out}.suis-button--fit-content{width:-moz-fit-content;width:fit-content}.suis-button:disabled{opacity:.5}.suis-button:hover:not(:disabled){cursor:pointer}.suis-button:hover:disabled{cursor:not-allowed}.suis-button:focus,.suis-button:focus-within{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 }); }
446
460
  }
447
461
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisAnchorButtonComponent, decorators: [{
448
462
  type: Component,
449
463
  args: [{ selector: 'a[suisButton]', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
450
464
  '[attr.tabindex]': 'disabled ? -1 : 0',
451
- }, 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"] }]
465
+ }, 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-radius:.25rem;font-size:500;text-align:center;text-decoration:none;border:none;transition:background-color .25s ease-in-out}.suis-button--fit-content{width:-moz-fit-content;width:fit-content}.suis-button:disabled{opacity:.5}.suis-button:hover:not(:disabled){cursor:pointer}.suis-button:hover:disabled{cursor:not-allowed}.suis-button:focus,.suis-button:focus-within{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"] }]
452
466
  }], propDecorators: { onClick: [{
453
467
  type: HostListener,
454
468
  args: ['click']
@@ -1006,6 +1020,102 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
1006
1020
  args: [{ selector: 'suis-notifications', standalone: true, imports: [CommonModule, SuisNotificationComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<suis-notification\n *ngFor=\"let notification of notifications(); trackBy: notificationTrackBy\"\n [notification]=\"notification\"\n (closed)=\"remove(notification.id)\"\n></suis-notification>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{position:absolute;bottom:0;right:0;padding:1rem}:host suis-notification{display:block;margin-top:.75rem}\n"] }]
1007
1021
  }] });
1008
1022
 
1023
+ class SuisPaginationPagePipe {
1024
+ transform(pageLabel, page, perPage, totalItems) {
1025
+ if (totalItems <= 0)
1026
+ return `${pageLabel}: 1 / 1 (0 / 0)`;
1027
+ const maxPage = Math.ceil(totalItems / perPage);
1028
+ const minItem = page * perPage - perPage + 1;
1029
+ const maxItem = page * perPage > totalItems ? totalItems : page * perPage;
1030
+ return `${pageLabel}: ${page} / ${maxPage} (${minItem}-${maxItem} / ${totalItems})`;
1031
+ }
1032
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisPaginationPagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
1033
+ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: SuisPaginationPagePipe, isStandalone: true, name: "suisPaginationPage" }); }
1034
+ }
1035
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisPaginationPagePipe, decorators: [{
1036
+ type: Pipe,
1037
+ args: [{
1038
+ standalone: true,
1039
+ name: 'suisPaginationPage',
1040
+ }]
1041
+ }] });
1042
+
1043
+ class SuisPaginationComponent {
1044
+ constructor() {
1045
+ /** @internal */
1046
+ this.SuisIconType = SuisIconType;
1047
+ /** @internal */
1048
+ /**
1049
+ * Number of the maximum page that can be reached based on totalItems and perPage values.
1050
+ */
1051
+ this.maxPage = 1;
1052
+ /**
1053
+ * Number of the page presented. By default set to 1.
1054
+ */
1055
+ this.page = 1;
1056
+ /**
1057
+ * Number of items presented per page. By default set to 15.
1058
+ */
1059
+ this.perPage = 15;
1060
+ /**
1061
+ * Number of total items in data source. By default set to 0.
1062
+ */
1063
+ this.totalItems = 0;
1064
+ /**
1065
+ * Adds margin top above the pagination. By default set to true.
1066
+ */
1067
+ this.spacing = false;
1068
+ /**
1069
+ * Sets the page label between the buttons. By default set to 'Page'.
1070
+ */
1071
+ this.pageLabel = 'Page';
1072
+ /**
1073
+ * Emits on page value change.
1074
+ */
1075
+ this.pageChange = new EventEmitter();
1076
+ }
1077
+ ngOnChanges(changes) {
1078
+ if (changes['totalItems'] || changes['perPage']) {
1079
+ this.maxPage = Math.ceil(this.totalItems / this.perPage);
1080
+ }
1081
+ }
1082
+ next() {
1083
+ if (this.page < this.maxPage) {
1084
+ this.page++;
1085
+ this.pageChange.emit(this.page);
1086
+ }
1087
+ }
1088
+ previous() {
1089
+ if (this.page > 1) {
1090
+ this.page--;
1091
+ this.pageChange.emit(this.page);
1092
+ }
1093
+ }
1094
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1095
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisPaginationComponent, isStandalone: true, selector: "suis-pagination", inputs: { page: "page", perPage: "perPage", totalItems: "totalItems", spacing: "spacing", pageLabel: "pageLabel" }, outputs: { pageChange: "pageChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"suis-pagination\" [class.suis-pagination--spacing]=\"true\">\n <button\n suisButton\n color=\"secondary\"\n [fitContent]=\"true\"\n [disabled]=\"page === 1\"\n (click)=\"previous()\"\n >\n <suis-icon [type]=\"SuisIconType.CHEVRON_LEFT\" color=\"white\"></suis-icon>\n </button>\n <div>\n {{ pageLabel | suisPaginationPage : page : perPage : totalItems }}\n </div>\n <button\n suisButton\n color=\"secondary\"\n [fitContent]=\"true\"\n [disabled]=\"page === maxPage\"\n (click)=\"next()\"\n >\n <suis-icon [type]=\"SuisIconType.CHEVRON_RIGHT\" color=\"white\"></suis-icon>\n </button>\n</div>\n", styles: [".suis-pagination{display:flex;align-items:center;justify-content:center}.suis-pagination--spacing{margin-top:1rem}.suis-pagination .suis-button:first-child{margin-right:1rem}.suis-pagination .suis-button:last-child{margin-left:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }, { kind: "component", type: SuisButtonComponent, selector: "button[suisButton]" }, { kind: "pipe", type: SuisPaginationPagePipe, name: "suisPaginationPage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1096
+ }
1097
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisPaginationComponent, decorators: [{
1098
+ type: Component,
1099
+ args: [{ selector: 'suis-pagination', standalone: true, imports: [
1100
+ CommonModule,
1101
+ SuisIconComponent,
1102
+ SuisButtonComponent,
1103
+ SuisPaginationPagePipe,
1104
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-pagination\" [class.suis-pagination--spacing]=\"true\">\n <button\n suisButton\n color=\"secondary\"\n [fitContent]=\"true\"\n [disabled]=\"page === 1\"\n (click)=\"previous()\"\n >\n <suis-icon [type]=\"SuisIconType.CHEVRON_LEFT\" color=\"white\"></suis-icon>\n </button>\n <div>\n {{ pageLabel | suisPaginationPage : page : perPage : totalItems }}\n </div>\n <button\n suisButton\n color=\"secondary\"\n [fitContent]=\"true\"\n [disabled]=\"page === maxPage\"\n (click)=\"next()\"\n >\n <suis-icon [type]=\"SuisIconType.CHEVRON_RIGHT\" color=\"white\"></suis-icon>\n </button>\n</div>\n", styles: [".suis-pagination{display:flex;align-items:center;justify-content:center}.suis-pagination--spacing{margin-top:1rem}.suis-pagination .suis-button:first-child{margin-right:1rem}.suis-pagination .suis-button:last-child{margin-left:1rem}\n"] }]
1105
+ }], propDecorators: { page: [{
1106
+ type: Input
1107
+ }], perPage: [{
1108
+ type: Input
1109
+ }], totalItems: [{
1110
+ type: Input
1111
+ }], spacing: [{
1112
+ type: Input
1113
+ }], pageLabel: [{
1114
+ type: Input
1115
+ }], pageChange: [{
1116
+ type: Output
1117
+ }] } });
1118
+
1009
1119
  class SuisProgressBarPipe {
1010
1120
  transform(value) {
1011
1121
  return `${(value / 100) * 100}%`;
@@ -1504,11 +1614,11 @@ class SuisTableComponent {
1504
1614
  }
1505
1615
  }
1506
1616
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1507
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisTableComponent, isStandalone: true, selector: "suis-table", inputs: { data: "data", orderBy: "orderBy", sortBy: "sortBy", loading: "loading" }, outputs: { sortByChange: "sortByChange", orderByChange: "orderByChange" }, queries: [{ propertyName: "columns", predicate: SuisTableColumnDirective }], ngImport: i0, template: "<table *ngIf=\"columns\" class=\"suis-table\">\n <thead>\n <tr>\n <th\n *ngFor=\"let column of columns\"\n [class.pointer]=\"column.orderProperty\"\n (click)=\"\n column.orderProperty ? onColumnClick(column.orderProperty) : undefined\n \"\n >\n <div class=\"suis-table__header\">\n <span>\n {{ column.name }}\n </span>\n <suis-icon\n *ngIf=\"column.orderProperty === orderBy\"\n [type]=\"\n sortBy === 'asc'\n ? SuisIconType.CHEVRON_DOWN\n : SuisIconType.CHEVRON_UP\n \"\n size=\"lg\"\n color=\"white\"\n ></suis-icon>\n </div>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let item of data\">\n <td *ngFor=\"let column of columns\">\n <ng-container\n *ngTemplateOutlet=\"\n column.cell!.templateRef;\n context: { $implicit: item }\n \"\n ></ng-container>\n </td>\n </tr>\n <suis-spinner-container\n *ngIf=\"loading\"\n [absolute]=\"true\"\n [blur]=\"true\"\n ></suis-spinner-container>\n </tbody>\n</table>\n\n<!-- TODO: <suis-pagination></suis-pagination> -->\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-table{width:100%;border-collapse:collapse}.suis-table thead{background-color:#273c75;color:#fff}.suis-table thead tr th{font-weight:600;padding:.75rem 1rem}.suis-table thead tr th:first-child{border-top-left-radius:.25rem}.suis-table thead tr th:last-child{border-top-right-radius:.25rem}.suis-table thead tr th.pointer{cursor:pointer}.suis-table thead tr th>.suis-table__header{display:flex;align-items:center}.suis-table thead tr th>.suis-table__header suis-icon{display:block;margin-left:.125rem}.suis-table tbody{position:relative;background-color:#f5f6fa}.suis-table tbody tr{border-bottom:.0625rem solid #dcdde1}.suis-table tbody tr:hover{background-color:#dcdde1d9}.suis-table tbody tr td{padding:.375rem 1rem}\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: "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"] }, { kind: "component", type: SuisSpinnerContainerComponent, selector: "suis-spinner-container", inputs: ["size", "color", "blur", "absolute"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1617
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisTableComponent, isStandalone: true, selector: "suis-table", inputs: { data: "data", orderBy: "orderBy", sortBy: "sortBy", loading: "loading" }, outputs: { sortByChange: "sortByChange", orderByChange: "orderByChange" }, queries: [{ propertyName: "columns", predicate: SuisTableColumnDirective }], ngImport: i0, template: "<table *ngIf=\"columns\" class=\"suis-table\">\n <thead>\n <tr>\n <th\n *ngFor=\"let column of columns\"\n [class.pointer]=\"column.orderProperty\"\n (click)=\"\n column.orderProperty ? onColumnClick(column.orderProperty) : undefined\n \"\n >\n <div class=\"suis-table__header\">\n <span>\n {{ column.name }}\n </span>\n <suis-icon\n *ngIf=\"column.orderProperty === orderBy\"\n [type]=\"\n sortBy === 'asc'\n ? SuisIconType.CHEVRON_DOWN\n : SuisIconType.CHEVRON_UP\n \"\n size=\"lg\"\n color=\"white\"\n ></suis-icon>\n </div>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let item of data\">\n <td *ngFor=\"let column of columns\">\n <ng-container\n *ngTemplateOutlet=\"\n column.cell!.templateRef;\n context: { $implicit: item }\n \"\n ></ng-container>\n </td>\n </tr>\n <suis-spinner-container\n *ngIf=\"loading\"\n [absolute]=\"true\"\n [blur]=\"true\"\n ></suis-spinner-container>\n </tbody>\n</table>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-table{width:100%;border-collapse:collapse}.suis-table thead{background-color:#273c75;color:#fff}.suis-table thead tr th{font-weight:600;padding:.75rem 1rem}.suis-table thead tr th:first-child{border-top-left-radius:.25rem}.suis-table thead tr th:last-child{border-top-right-radius:.25rem}.suis-table thead tr th.pointer{cursor:pointer}.suis-table thead tr th>.suis-table__header{display:flex;align-items:center}.suis-table thead tr th>.suis-table__header suis-icon{display:block;margin-left:.125rem}.suis-table tbody{position:relative;background-color:#f5f6fa}.suis-table tbody tr{border-bottom:.0625rem solid #dcdde1}.suis-table tbody tr:hover{background-color:#dcdde1d9}.suis-table tbody tr td{padding:.375rem 1rem}\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: "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"] }, { kind: "component", type: SuisSpinnerContainerComponent, selector: "suis-spinner-container", inputs: ["size", "color", "blur", "absolute"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1508
1618
  }
1509
1619
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisTableComponent, decorators: [{
1510
1620
  type: Component,
1511
- args: [{ selector: 'suis-table', standalone: true, imports: [CommonModule, SuisIconComponent, SuisSpinnerContainerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<table *ngIf=\"columns\" class=\"suis-table\">\n <thead>\n <tr>\n <th\n *ngFor=\"let column of columns\"\n [class.pointer]=\"column.orderProperty\"\n (click)=\"\n column.orderProperty ? onColumnClick(column.orderProperty) : undefined\n \"\n >\n <div class=\"suis-table__header\">\n <span>\n {{ column.name }}\n </span>\n <suis-icon\n *ngIf=\"column.orderProperty === orderBy\"\n [type]=\"\n sortBy === 'asc'\n ? SuisIconType.CHEVRON_DOWN\n : SuisIconType.CHEVRON_UP\n \"\n size=\"lg\"\n color=\"white\"\n ></suis-icon>\n </div>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let item of data\">\n <td *ngFor=\"let column of columns\">\n <ng-container\n *ngTemplateOutlet=\"\n column.cell!.templateRef;\n context: { $implicit: item }\n \"\n ></ng-container>\n </td>\n </tr>\n <suis-spinner-container\n *ngIf=\"loading\"\n [absolute]=\"true\"\n [blur]=\"true\"\n ></suis-spinner-container>\n </tbody>\n</table>\n\n<!-- TODO: <suis-pagination></suis-pagination> -->\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-table{width:100%;border-collapse:collapse}.suis-table thead{background-color:#273c75;color:#fff}.suis-table thead tr th{font-weight:600;padding:.75rem 1rem}.suis-table thead tr th:first-child{border-top-left-radius:.25rem}.suis-table thead tr th:last-child{border-top-right-radius:.25rem}.suis-table thead tr th.pointer{cursor:pointer}.suis-table thead tr th>.suis-table__header{display:flex;align-items:center}.suis-table thead tr th>.suis-table__header suis-icon{display:block;margin-left:.125rem}.suis-table tbody{position:relative;background-color:#f5f6fa}.suis-table tbody tr{border-bottom:.0625rem solid #dcdde1}.suis-table tbody tr:hover{background-color:#dcdde1d9}.suis-table tbody tr td{padding:.375rem 1rem}\n"] }]
1621
+ args: [{ selector: 'suis-table', standalone: true, imports: [CommonModule, SuisIconComponent, SuisSpinnerContainerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<table *ngIf=\"columns\" class=\"suis-table\">\n <thead>\n <tr>\n <th\n *ngFor=\"let column of columns\"\n [class.pointer]=\"column.orderProperty\"\n (click)=\"\n column.orderProperty ? onColumnClick(column.orderProperty) : undefined\n \"\n >\n <div class=\"suis-table__header\">\n <span>\n {{ column.name }}\n </span>\n <suis-icon\n *ngIf=\"column.orderProperty === orderBy\"\n [type]=\"\n sortBy === 'asc'\n ? SuisIconType.CHEVRON_DOWN\n : SuisIconType.CHEVRON_UP\n \"\n size=\"lg\"\n color=\"white\"\n ></suis-icon>\n </div>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let item of data\">\n <td *ngFor=\"let column of columns\">\n <ng-container\n *ngTemplateOutlet=\"\n column.cell!.templateRef;\n context: { $implicit: item }\n \"\n ></ng-container>\n </td>\n </tr>\n <suis-spinner-container\n *ngIf=\"loading\"\n [absolute]=\"true\"\n [blur]=\"true\"\n ></suis-spinner-container>\n </tbody>\n</table>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-table{width:100%;border-collapse:collapse}.suis-table thead{background-color:#273c75;color:#fff}.suis-table thead tr th{font-weight:600;padding:.75rem 1rem}.suis-table thead tr th:first-child{border-top-left-radius:.25rem}.suis-table thead tr th:last-child{border-top-right-radius:.25rem}.suis-table thead tr th.pointer{cursor:pointer}.suis-table thead tr th>.suis-table__header{display:flex;align-items:center}.suis-table thead tr th>.suis-table__header suis-icon{display:block;margin-left:.125rem}.suis-table tbody{position:relative;background-color:#f5f6fa}.suis-table tbody tr{border-bottom:.0625rem solid #dcdde1}.suis-table tbody tr:hover{background-color:#dcdde1d9}.suis-table tbody tr td{padding:.375rem 1rem}\n"] }]
1512
1622
  }], propDecorators: { columns: [{
1513
1623
  type: ContentChildren,
1514
1624
  args: [SuisTableColumnDirective]
@@ -1548,5 +1658,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
1548
1658
  * Generated bundle index. Do not edit.
1549
1659
  */
1550
1660
 
1551
- export { SuisAlertComponent, SuisAnchorButtonComponent, SuisBoxComponent, SuisBreadcrumbsComponent, SuisButtonComponent, SuisButtonOutlinedComponent, SuisChipComponent, SuisContainerComponent, SuisFormFieldComponent, SuisIconComponent, SuisIconType, SuisInputChipsComponent, SuisInputNumberComponent, SuisInputTextComponent, SuisLabelComponent, SuisNavigationComponent, SuisNavigationGroupComponent, SuisNavigationGroupItemComponent, SuisNavigationItemComponent, SuisNavigationItemDirective, SuisNgClassPipe, SuisNotificationComponent, SuisNotificationService, SuisNotificationsComponent, SuisProgressBarComponent, SuisSelectComponent, SuisSelectMultiComponent, SuisSelectOptionComponent, SuisSelectOptionDirective, SuisSpinnerComponent, SuisSpinnerContainerComponent, SuisTableCellDirective, SuisTableColumnDirective, SuisTableComponent, SuisTitleComponent };
1661
+ export { SuisAlertComponent, SuisAnchorButtonComponent, SuisBoxComponent, SuisBreadcrumbsComponent, SuisButtonComponent, SuisButtonOutlinedComponent, SuisChipComponent, SuisContainerComponent, SuisFormFieldComponent, SuisIconComponent, SuisIconType, SuisInputChipsComponent, SuisInputNumberComponent, SuisInputTextComponent, SuisLabelComponent, SuisNavigationComponent, SuisNavigationGroupComponent, SuisNavigationGroupItemComponent, SuisNavigationItemComponent, SuisNavigationItemDirective, SuisNgClassPipe, SuisNotificationComponent, SuisNotificationService, SuisNotificationsComponent, SuisPaginationComponent, SuisProgressBarComponent, SuisSelectComponent, SuisSelectMultiComponent, SuisSelectOptionComponent, SuisSelectOptionDirective, SuisSpinnerComponent, SuisSpinnerContainerComponent, SuisTableCellDirective, SuisTableColumnDirective, SuisTableComponent, SuisTitleComponent };
1552
1662
  //# sourceMappingURL=suis.mjs.map