suis 0.19.0 → 0.21.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/esm2022/lib/components/index.mjs +3 -1
- package/esm2022/lib/components/suis-button/suis-button.component.mjs +11 -7
- package/esm2022/lib/components/suis-icon/suis-icon-type.pipe.mjs +3 -1
- package/esm2022/lib/components/suis-icon/suis-icon.enums.mjs +3 -1
- package/esm2022/lib/components/suis-pagination/index.mjs +2 -0
- package/esm2022/lib/components/suis-pagination/suis-pagination-page.pipe.mjs +23 -0
- package/esm2022/lib/components/suis-pagination/suis-pagination.component.mjs +83 -0
- package/esm2022/lib/components/suis-table/index.mjs +5 -0
- package/esm2022/lib/components/suis-table/suis-table-cell.directive.mjs +22 -0
- package/esm2022/lib/components/suis-table/suis-table-column.directive.mjs +42 -0
- package/esm2022/lib/components/suis-table/suis-table.component.mjs +71 -0
- package/esm2022/lib/components/suis-table/suis-table.interfaces.mjs +2 -0
- package/esm2022/lib/shared/classes/suis-button.base.mjs +8 -2
- package/fesm2022/suis.mjs +239 -9
- package/fesm2022/suis.mjs.map +1 -1
- package/lib/components/index.d.ts +2 -0
- package/lib/components/suis-icon/suis-icon.enums.d.ts +3 -1
- package/lib/components/suis-pagination/index.d.ts +1 -0
- package/lib/components/suis-pagination/suis-pagination-page.pipe.d.ts +7 -0
- package/lib/components/suis-pagination/suis-pagination.component.d.ts +41 -0
- package/lib/components/suis-table/index.d.ts +4 -0
- package/lib/components/suis-table/suis-table-cell.directive.d.ts +10 -0
- package/lib/components/suis-table/suis-table-column.directive.d.ts +14 -0
- package/lib/components/suis-table/suis-table.component.d.ts +38 -0
- package/lib/components/suis-table/suis-table.interfaces.d.ts +3 -0
- package/lib/shared/classes/suis-button.base.d.ts +5 -1
- package/package.json +4 -4
package/fesm2022/suis.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Pipe, Component, ChangeDetectionStrategy, Input, EventEmitter, Output, inject, ElementRef, Renderer2, Directive, ChangeDetectorRef, TemplateRef, ContentChild, HostListener, ViewEncapsulation, forwardRef, ViewChild, signal, Injectable } from '@angular/core';
|
|
2
|
+
import { Pipe, Component, ChangeDetectionStrategy, Input, EventEmitter, Output, inject, ElementRef, Renderer2, Directive, ChangeDetectorRef, TemplateRef, ContentChild, HostListener, ViewEncapsulation, forwardRef, ViewChild, signal, Injectable, ContentChildren } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i2 from '@angular/router';
|
|
@@ -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
|
|
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
|
|
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;
|
|
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;
|
|
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
|
|
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
|
|
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}%`;
|
|
@@ -1407,6 +1517,126 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
1407
1517
|
type: Input
|
|
1408
1518
|
}] } });
|
|
1409
1519
|
|
|
1520
|
+
class SuisTableCellDirective {
|
|
1521
|
+
constructor() {
|
|
1522
|
+
/**
|
|
1523
|
+
* Template of the table cell.
|
|
1524
|
+
*/
|
|
1525
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1526
|
+
this.templateRef = inject((TemplateRef));
|
|
1527
|
+
}
|
|
1528
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisTableCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1529
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: SuisTableCellDirective, isStandalone: true, selector: "[suisTableCell]", ngImport: i0 }); }
|
|
1530
|
+
}
|
|
1531
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisTableCellDirective, decorators: [{
|
|
1532
|
+
type: Directive,
|
|
1533
|
+
args: [{
|
|
1534
|
+
selector: '[suisTableCell]',
|
|
1535
|
+
standalone: true,
|
|
1536
|
+
}]
|
|
1537
|
+
}] });
|
|
1538
|
+
|
|
1539
|
+
class SuisTableColumnDirective {
|
|
1540
|
+
constructor() {
|
|
1541
|
+
this._name = '';
|
|
1542
|
+
this._orderProperty = '';
|
|
1543
|
+
}
|
|
1544
|
+
/** Unique name for this column. */
|
|
1545
|
+
get name() {
|
|
1546
|
+
return this._name;
|
|
1547
|
+
}
|
|
1548
|
+
set name(name) {
|
|
1549
|
+
this._name = name;
|
|
1550
|
+
}
|
|
1551
|
+
get orderProperty() {
|
|
1552
|
+
return this._orderProperty;
|
|
1553
|
+
}
|
|
1554
|
+
set orderProperty(orderProperty) {
|
|
1555
|
+
this._orderProperty = orderProperty;
|
|
1556
|
+
}
|
|
1557
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisTableColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1558
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: SuisTableColumnDirective, isStandalone: true, selector: "[suisTableColumn]", inputs: { name: ["suisTableColumn", "name"], orderProperty: ["suisTableColumnOrderProperty", "orderProperty"] }, queries: [{ propertyName: "cell", first: true, predicate: SuisTableCellDirective, descendants: true }], ngImport: i0 }); }
|
|
1559
|
+
}
|
|
1560
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisTableColumnDirective, decorators: [{
|
|
1561
|
+
type: Directive,
|
|
1562
|
+
args: [{
|
|
1563
|
+
selector: '[suisTableColumn]',
|
|
1564
|
+
standalone: true,
|
|
1565
|
+
}]
|
|
1566
|
+
}], propDecorators: { cell: [{
|
|
1567
|
+
type: ContentChild,
|
|
1568
|
+
args: [SuisTableCellDirective]
|
|
1569
|
+
}], name: [{
|
|
1570
|
+
type: Input,
|
|
1571
|
+
args: ['suisTableColumn']
|
|
1572
|
+
}], orderProperty: [{
|
|
1573
|
+
type: Input,
|
|
1574
|
+
args: ['suisTableColumnOrderProperty']
|
|
1575
|
+
}] } });
|
|
1576
|
+
|
|
1577
|
+
class SuisTableComponent {
|
|
1578
|
+
constructor() {
|
|
1579
|
+
/** @internal */
|
|
1580
|
+
this.SuisIconType = SuisIconType;
|
|
1581
|
+
/**
|
|
1582
|
+
* Data items collection. Type of SuisTableDataItem[]. By default set to empty array. Required input.
|
|
1583
|
+
*/
|
|
1584
|
+
this.data = [];
|
|
1585
|
+
/**
|
|
1586
|
+
* Specifies property that data is ordered. By default set to empty string.
|
|
1587
|
+
*/
|
|
1588
|
+
this.orderBy = '';
|
|
1589
|
+
/**
|
|
1590
|
+
* Specifies sort condition. Accepted values - 'asc' and 'desc'. By default set to 'asc'.
|
|
1591
|
+
*/
|
|
1592
|
+
this.sortBy = 'asc';
|
|
1593
|
+
/**
|
|
1594
|
+
* Shows loading spinner and blurs data. By default set to false.
|
|
1595
|
+
*/
|
|
1596
|
+
this.loading = false;
|
|
1597
|
+
/**
|
|
1598
|
+
* Emits value on sort condition change.
|
|
1599
|
+
*/
|
|
1600
|
+
this.sortByChange = new EventEmitter();
|
|
1601
|
+
/**
|
|
1602
|
+
* Emits value on order property change.
|
|
1603
|
+
*/
|
|
1604
|
+
this.orderByChange = new EventEmitter();
|
|
1605
|
+
}
|
|
1606
|
+
onColumnClick(property) {
|
|
1607
|
+
if (this.orderBy !== property) {
|
|
1608
|
+
this.orderBy = property;
|
|
1609
|
+
this.orderByChange.emit(this.orderBy);
|
|
1610
|
+
}
|
|
1611
|
+
else {
|
|
1612
|
+
this.sortBy = this.sortBy === 'asc' ? 'desc' : 'asc';
|
|
1613
|
+
this.sortByChange.emit(this.sortBy);
|
|
1614
|
+
}
|
|
1615
|
+
}
|
|
1616
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
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 }); }
|
|
1618
|
+
}
|
|
1619
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisTableComponent, decorators: [{
|
|
1620
|
+
type: Component,
|
|
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"] }]
|
|
1622
|
+
}], propDecorators: { columns: [{
|
|
1623
|
+
type: ContentChildren,
|
|
1624
|
+
args: [SuisTableColumnDirective]
|
|
1625
|
+
}], data: [{
|
|
1626
|
+
type: Input,
|
|
1627
|
+
args: [{ required: true }]
|
|
1628
|
+
}], orderBy: [{
|
|
1629
|
+
type: Input
|
|
1630
|
+
}], sortBy: [{
|
|
1631
|
+
type: Input
|
|
1632
|
+
}], loading: [{
|
|
1633
|
+
type: Input
|
|
1634
|
+
}], sortByChange: [{
|
|
1635
|
+
type: Output
|
|
1636
|
+
}], orderByChange: [{
|
|
1637
|
+
type: Output
|
|
1638
|
+
}] } });
|
|
1639
|
+
|
|
1410
1640
|
class SuisTitleComponent {
|
|
1411
1641
|
constructor() {
|
|
1412
1642
|
/**
|
|
@@ -1428,5 +1658,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
1428
1658
|
* Generated bundle index. Do not edit.
|
|
1429
1659
|
*/
|
|
1430
1660
|
|
|
1431
|
-
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, 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 };
|
|
1432
1662
|
//# sourceMappingURL=suis.mjs.map
|