suis 0.20.0 → 0.21.1
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +1 -0
- package/esm2022/lib/components/index.mjs +2 -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/suis-table.component.mjs +3 -3
- package/esm2022/lib/shared/classes/suis-button.base.mjs +8 -2
- package/fesm2022/suis.mjs +120 -10
- package/fesm2022/suis.mjs.map +1 -1
- package/lib/components/index.d.ts +1 -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/shared/classes/suis-button.base.d.ts +5 -1
- package/package.json +4 -4
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
|
|
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}%`;
|
|
@@ -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
|
|
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
|
|
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
|