suis 0.19.0 → 0.21.0
Sign up to get free protection for your applications and to get access to all the features.
- 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
|