suis 0.24.0 → 0.25.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 +1 -0
- package/esm2022/lib/components/index.mjs +2 -1
- package/esm2022/lib/components/suis-box/suis-box.component.mjs +2 -2
- package/esm2022/lib/components/suis-breadcrumbs/suis-breadcrumbs.component.mjs +3 -9
- package/esm2022/lib/components/suis-form-field/suis-form-field.component.mjs +3 -11
- package/esm2022/lib/components/suis-label/suis-label.component.mjs +3 -9
- package/esm2022/lib/components/suis-pagination/suis-pagination.component.mjs +3 -9
- package/esm2022/lib/components/suis-table/suis-table.component.mjs +3 -3
- package/esm2022/lib/components/suis-title/suis-title.component.mjs +5 -13
- package/esm2022/lib/components/suis-toolbar/index.mjs +2 -0
- package/esm2022/lib/components/suis-toolbar/suis-toolbar.component.mjs +21 -0
- package/fesm2022/suis.mjs +27 -44
- package/fesm2022/suis.mjs.map +1 -1
- package/lib/components/index.d.ts +1 -0
- package/lib/components/suis-breadcrumbs/suis-breadcrumbs.component.d.ts +1 -5
- package/lib/components/suis-form-field/suis-form-field.component.d.ts +1 -5
- package/lib/components/suis-label/suis-label.component.d.ts +1 -5
- package/lib/components/suis-pagination/suis-pagination.component.d.ts +1 -5
- package/lib/components/suis-title/suis-title.component.d.ts +1 -5
- package/lib/components/suis-toolbar/index.d.ts +1 -0
- package/lib/components/suis-toolbar/suis-toolbar.component.d.ts +9 -0
- package/package.json +1 -1
package/fesm2022/suis.mjs
CHANGED
|
@@ -183,11 +183,11 @@ class SuisBoxComponent {
|
|
|
183
183
|
this.spacing = false;
|
|
184
184
|
}
|
|
185
185
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
186
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisBoxComponent, isStandalone: true, selector: "suis-box", inputs: { spacing: "spacing" }, ngImport: i0, template: "<div class=\"suis-box\" [class.suis-box--spacing]=\"spacing\">\n <ng-content></ng-content>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-box{background-color:#fff;box-shadow:0 2px 5px #00000040;border-radius:.25rem}.suis-box--spacing{padding:1.25rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
186
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisBoxComponent, isStandalone: true, selector: "suis-box", inputs: { spacing: "spacing" }, ngImport: i0, template: "<div class=\"suis-box\" [class.suis-box--spacing]=\"spacing\">\n <ng-content></ng-content>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-box{background-color:#fff;box-shadow:0 2px 5px #00000040;border-radius:.25rem}.suis-box--spacing{padding:1rem}@media (min-width: 768px){.suis-box--spacing{padding:1.25rem}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
187
187
|
}
|
|
188
188
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisBoxComponent, decorators: [{
|
|
189
189
|
type: Component,
|
|
190
|
-
args: [{ selector: 'suis-box', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-box\" [class.suis-box--spacing]=\"spacing\">\n <ng-content></ng-content>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-box{background-color:#fff;box-shadow:0 2px 5px #00000040;border-radius:.25rem}.suis-box--spacing{padding:1.25rem}\n"] }]
|
|
190
|
+
args: [{ selector: 'suis-box', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-box\" [class.suis-box--spacing]=\"spacing\">\n <ng-content></ng-content>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-box{background-color:#fff;box-shadow:0 2px 5px #00000040;border-radius:.25rem}.suis-box--spacing{padding:1rem}@media (min-width: 768px){.suis-box--spacing{padding:1.25rem}}\n"] }]
|
|
191
191
|
}], propDecorators: { spacing: [{
|
|
192
192
|
type: Input
|
|
193
193
|
}] } });
|
|
@@ -198,25 +198,19 @@ class SuisBreadcrumbsComponent {
|
|
|
198
198
|
* List of breadcrumbs items. Type of SuisBreadcrumbItem[]. By default set to empty array.
|
|
199
199
|
*/
|
|
200
200
|
this.items = [];
|
|
201
|
-
/**
|
|
202
|
-
* Adds a bottom margin below the breadcrumbs. By default set to false.
|
|
203
|
-
*/
|
|
204
|
-
this.spacing = false;
|
|
205
201
|
}
|
|
206
202
|
/** @internal */
|
|
207
203
|
itemTrackBy(index, item) {
|
|
208
204
|
return `${item.label}-${index}`;
|
|
209
205
|
}
|
|
210
206
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisBreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
211
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisBreadcrumbsComponent, isStandalone: true, selector: "suis-breadcrumbs", inputs: { items: "items"
|
|
207
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisBreadcrumbsComponent, isStandalone: true, selector: "suis-breadcrumbs", inputs: { items: "items" }, ngImport: i0, template: "<div class=\"suis-breadcrumbs\">\n <ng-container\n *ngFor=\"let item of items; let last = last; trackBy: itemTrackBy\"\n >\n <a [routerLink]=\"last ? undefined : item.link\">\n {{ item.label }}\n </a>\n <span *ngIf=\"!last\">/</span>\n </ng-container>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-breadcrumbs a{text-decoration:none;color:#2f3640;font-weight:400}.suis-breadcrumbs a:not(:last-of-type){font-weight:600;color:#40739e}\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: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
212
208
|
}
|
|
213
209
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisBreadcrumbsComponent, decorators: [{
|
|
214
210
|
type: Component,
|
|
215
|
-
args: [{ selector: 'suis-breadcrumbs', standalone: true, imports: [CommonModule, RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-breadcrumbs\"
|
|
211
|
+
args: [{ selector: 'suis-breadcrumbs', standalone: true, imports: [CommonModule, RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-breadcrumbs\">\n <ng-container\n *ngFor=\"let item of items; let last = last; trackBy: itemTrackBy\"\n >\n <a [routerLink]=\"last ? undefined : item.link\">\n {{ item.label }}\n </a>\n <span *ngIf=\"!last\">/</span>\n </ng-container>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-breadcrumbs a{text-decoration:none;color:#2f3640;font-weight:400}.suis-breadcrumbs a:not(:last-of-type){font-weight:600;color:#40739e}\n"] }]
|
|
216
212
|
}], propDecorators: { items: [{
|
|
217
213
|
type: Input
|
|
218
|
-
}], spacing: [{
|
|
219
|
-
type: Input
|
|
220
214
|
}] } });
|
|
221
215
|
|
|
222
216
|
class SuisSpinnerComponent {
|
|
@@ -398,22 +392,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
398
392
|
}] } });
|
|
399
393
|
|
|
400
394
|
class SuisFormFieldComponent {
|
|
401
|
-
constructor() {
|
|
402
|
-
/**
|
|
403
|
-
* Adds a bottom margin below the field. By default set to false.
|
|
404
|
-
*/
|
|
405
|
-
this.spacing = false;
|
|
406
|
-
}
|
|
407
395
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
408
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisFormFieldComponent, isStandalone: true, selector: "suis-form-field", inputs: { errorTemplate: "errorTemplate"
|
|
396
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisFormFieldComponent, isStandalone: true, selector: "suis-form-field", inputs: { errorTemplate: "errorTemplate" }, ngImport: i0, template: "<div class=\"suis-form-field\">\n <ng-content></ng-content>\n <div *ngIf=\"errorTemplate\" class=\"suis-form-field__error\">\n <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-form-field{width:100%}.suis-form-field__error{color:#ff4757;margin-top:.375rem;font-size:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
409
397
|
}
|
|
410
398
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisFormFieldComponent, decorators: [{
|
|
411
399
|
type: Component,
|
|
412
|
-
args: [{ selector: 'suis-form-field', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-form-field\"
|
|
400
|
+
args: [{ selector: 'suis-form-field', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-form-field\">\n <ng-content></ng-content>\n <div *ngIf=\"errorTemplate\" class=\"suis-form-field__error\">\n <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-form-field{width:100%}.suis-form-field__error{color:#ff4757;margin-top:.375rem;font-size:.75rem}\n"] }]
|
|
413
401
|
}], propDecorators: { errorTemplate: [{
|
|
414
402
|
type: Input
|
|
415
|
-
}], spacing: [{
|
|
416
|
-
type: Input
|
|
417
403
|
}] } });
|
|
418
404
|
|
|
419
405
|
class SuisInputBase {
|
|
@@ -763,21 +749,15 @@ class SuisLabelComponent {
|
|
|
763
749
|
* Adds a red colored asterisk after the label. By default set to false.
|
|
764
750
|
*/
|
|
765
751
|
this.required = false;
|
|
766
|
-
/**
|
|
767
|
-
* Adds a bottom margin below the label. By default set to false.
|
|
768
|
-
*/
|
|
769
|
-
this.spacing = false;
|
|
770
752
|
}
|
|
771
753
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
772
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisLabelComponent, isStandalone: true, selector: "suis-label", inputs: { required: "required"
|
|
754
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisLabelComponent, isStandalone: true, selector: "suis-label", inputs: { required: "required" }, ngImport: i0, template: "<label class=\"suis-label\">\n <ng-content></ng-content>\n <span *ngIf=\"required\" class=\"suis-label__asterisk\">*</span>\n <ng-content select=\"[suisLabelAside]\"></ng-content>\n</label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-label{font-size:.875rem;display:flex}.suis-label__asterisk{color:#ff4757;margin-left:.0625rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
773
755
|
}
|
|
774
756
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisLabelComponent, decorators: [{
|
|
775
757
|
type: Component,
|
|
776
|
-
args: [{ selector: 'suis-label', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"suis-label\"
|
|
758
|
+
args: [{ selector: 'suis-label', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"suis-label\">\n <ng-content></ng-content>\n <span *ngIf=\"required\" class=\"suis-label__asterisk\">*</span>\n <ng-content select=\"[suisLabelAside]\"></ng-content>\n</label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-label{font-size:.875rem;display:flex}.suis-label__asterisk{color:#ff4757;margin-left:.0625rem}\n"] }]
|
|
777
759
|
}], propDecorators: { required: [{
|
|
778
760
|
type: Input
|
|
779
|
-
}], spacing: [{
|
|
780
|
-
type: Input
|
|
781
761
|
}] } });
|
|
782
762
|
|
|
783
763
|
class SuisNavigationItemComponent {
|
|
@@ -1323,10 +1303,6 @@ class SuisPaginationComponent {
|
|
|
1323
1303
|
* Number of total items in data source. By default set to 0.
|
|
1324
1304
|
*/
|
|
1325
1305
|
this.totalItems = 0;
|
|
1326
|
-
/**
|
|
1327
|
-
* Adds margin top above the pagination. By default set to false.
|
|
1328
|
-
*/
|
|
1329
|
-
this.spacing = false;
|
|
1330
1306
|
/**
|
|
1331
1307
|
* Sets the of label "1 'of' 25". By default set to 'of'.
|
|
1332
1308
|
*/
|
|
@@ -1380,7 +1356,7 @@ class SuisPaginationComponent {
|
|
|
1380
1356
|
this.perPageChange.emit(this.perPage);
|
|
1381
1357
|
}
|
|
1382
1358
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1383
|
-
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", perPageOptions: "perPageOptions", totalItems: "totalItems",
|
|
1359
|
+
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", perPageOptions: "perPageOptions", totalItems: "totalItems", ofLabel: "ofLabel", itemsLabel: "itemsLabel" }, outputs: { pageChange: "pageChange", perPageChange: "perPageChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"suis-pagination\">\n <div>\n <suis-select\n [formControl]=\"perPageControl\"\n [options]=\"perPageOptions | suisPaginationPerPageOptions\"\n [search]=\"false\"\n [nullable]=\"false\"\n ></suis-select>\n </div>\n <div class=\"suis-pagination__actions\">\n <suis-button color=\"secondary\" [disabled]=\"page === 1\" (click)=\"previous()\">\n <suis-icon [type]=\"SuisIconType.CHEVRON_LEFT\" color=\"white\"></suis-icon>\n </suis-button>\n <div>\n {{ ofLabel | suisPaginationPage : page : perPage : totalItems }}\n </div>\n <suis-button\n color=\"secondary\"\n [disabled]=\"page === maxPage\"\n (click)=\"next()\"\n >\n <suis-icon [type]=\"SuisIconType.CHEVRON_RIGHT\" color=\"white\"></suis-icon>\n </suis-button>\n </div>\n <div class=\"suis-pagination__items\">\n {{\n ofLabel | suisPaginationItems : page : perPage : totalItems : itemsLabel\n }}\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-pagination{display:flex;align-items:center;justify-content:space-between;font-size:.875rem}.suis-pagination__actions{display:flex;align-items:center;justify-content:center}.suis-pagination__items{color:#a4a7b0}.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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }, { kind: "component", type: SuisButtonComponent, selector: "suis-button" }, { kind: "pipe", type: SuisPaginationPagePipe, name: "suisPaginationPage" }, { kind: "pipe", type: SuisPaginationItemsPipe, name: "suisPaginationItems" }, { kind: "pipe", type: SuisPaginationPerPageOptionsPipe, name: "suisPaginationPerPageOptions" }, { kind: "ngmodule", type: SuisSelectModule }, { kind: "component", type: SuisSelectComponent, selector: "suis-select", inputs: ["nullable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1384
1360
|
}
|
|
1385
1361
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisPaginationComponent, decorators: [{
|
|
1386
1362
|
type: Component,
|
|
@@ -1393,7 +1369,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
1393
1369
|
SuisPaginationItemsPipe,
|
|
1394
1370
|
SuisPaginationPerPageOptionsPipe,
|
|
1395
1371
|
SuisSelectModule,
|
|
1396
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-pagination\"
|
|
1372
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-pagination\">\n <div>\n <suis-select\n [formControl]=\"perPageControl\"\n [options]=\"perPageOptions | suisPaginationPerPageOptions\"\n [search]=\"false\"\n [nullable]=\"false\"\n ></suis-select>\n </div>\n <div class=\"suis-pagination__actions\">\n <suis-button color=\"secondary\" [disabled]=\"page === 1\" (click)=\"previous()\">\n <suis-icon [type]=\"SuisIconType.CHEVRON_LEFT\" color=\"white\"></suis-icon>\n </suis-button>\n <div>\n {{ ofLabel | suisPaginationPage : page : perPage : totalItems }}\n </div>\n <suis-button\n color=\"secondary\"\n [disabled]=\"page === maxPage\"\n (click)=\"next()\"\n >\n <suis-icon [type]=\"SuisIconType.CHEVRON_RIGHT\" color=\"white\"></suis-icon>\n </suis-button>\n </div>\n <div class=\"suis-pagination__items\">\n {{\n ofLabel | suisPaginationItems : page : perPage : totalItems : itemsLabel\n }}\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-pagination{display:flex;align-items:center;justify-content:space-between;font-size:.875rem}.suis-pagination__actions{display:flex;align-items:center;justify-content:center}.suis-pagination__items{color:#a4a7b0}.suis-pagination suis-button:first-child{margin-right:1rem}.suis-pagination suis-button:last-child{margin-left:1rem}\n"] }]
|
|
1397
1373
|
}], propDecorators: { page: [{
|
|
1398
1374
|
type: Input
|
|
1399
1375
|
}], perPage: [{
|
|
@@ -1402,8 +1378,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
1402
1378
|
type: Input
|
|
1403
1379
|
}], totalItems: [{
|
|
1404
1380
|
type: Input
|
|
1405
|
-
}], spacing: [{
|
|
1406
|
-
type: Input
|
|
1407
1381
|
}], ofLabel: [{
|
|
1408
1382
|
type: Input
|
|
1409
1383
|
}], itemsLabel: [{
|
|
@@ -1744,11 +1718,11 @@ class SuisTableComponent {
|
|
|
1744
1718
|
}
|
|
1745
1719
|
}
|
|
1746
1720
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1747
|
-
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", emptyMessage: "emptyMessage" }, 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 && 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 <th *ngIf=\"!columns?.length\"></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 <tr *ngIf=\"!data?.length\">\n <td class=\"empty\" [attr.colspan]=\"columns ? columns.length : 1\">\n {{ loading ? '' : emptyMessage }}\n </td>\n </tr>\n <suis-spinner-container\n *ngIf=\"loading\"\n [absolute]=\"true\"\n [blur]=\"true\"\n [color]=\"'secondary'\"\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)}}:host{display:block}.suis-table{width:100%;border-collapse:collapse}.suis-table thead{background-color:#273c75;color:#fff}.suis-table thead tr th{font-weight:500;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
|
|
1721
|
+
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", emptyMessage: "emptyMessage" }, 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 && 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 <th *ngIf=\"!columns?.length\"></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 <tr *ngIf=\"!data?.length\">\n <td class=\"empty\" [attr.colspan]=\"columns ? columns.length : 1\">\n {{ loading ? '' : emptyMessage }}\n </td>\n </tr>\n <suis-spinner-container\n *ngIf=\"loading\"\n [absolute]=\"true\"\n [blur]=\"true\"\n [color]=\"'secondary'\"\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)}}:host{display:block}.suis-table{width:100%;border-collapse:collapse}.suis-table thead{background-color:#273c75;color:#fff}.suis-table thead tr th{font-weight:500;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 td{padding:.375rem 1rem}.suis-table tbody tr td.empty{text-align:center;padding:1.5rem 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 }); }
|
|
1748
1722
|
}
|
|
1749
1723
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisTableComponent, decorators: [{
|
|
1750
1724
|
type: Component,
|
|
1751
|
-
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 && 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 <th *ngIf=\"!columns?.length\"></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 <tr *ngIf=\"!data?.length\">\n <td class=\"empty\" [attr.colspan]=\"columns ? columns.length : 1\">\n {{ loading ? '' : emptyMessage }}\n </td>\n </tr>\n <suis-spinner-container\n *ngIf=\"loading\"\n [absolute]=\"true\"\n [blur]=\"true\"\n [color]=\"'secondary'\"\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)}}:host{display:block}.suis-table{width:100%;border-collapse:collapse}.suis-table thead{background-color:#273c75;color:#fff}.suis-table thead tr th{font-weight:500;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
|
|
1725
|
+
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 && 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 <th *ngIf=\"!columns?.length\"></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 <tr *ngIf=\"!data?.length\">\n <td class=\"empty\" [attr.colspan]=\"columns ? columns.length : 1\">\n {{ loading ? '' : emptyMessage }}\n </td>\n </tr>\n <suis-spinner-container\n *ngIf=\"loading\"\n [absolute]=\"true\"\n [blur]=\"true\"\n [color]=\"'secondary'\"\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)}}:host{display:block}.suis-table{width:100%;border-collapse:collapse}.suis-table thead{background-color:#273c75;color:#fff}.suis-table thead tr th{font-weight:500;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 td{padding:.375rem 1rem}.suis-table tbody tr td.empty{text-align:center;padding:1.5rem 1rem}\n"] }]
|
|
1752
1726
|
}], propDecorators: { columns: [{
|
|
1753
1727
|
type: ContentChildren,
|
|
1754
1728
|
args: [SuisTableColumnDirective]
|
|
@@ -1892,18 +1866,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
1892
1866
|
}] });
|
|
1893
1867
|
|
|
1894
1868
|
class SuisTitleComponent {
|
|
1869
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1870
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisTitleComponent, isStandalone: true, selector: "suis-title", ngImport: i0, template: "<h1 class=\"suis-title\">\n <ng-content></ng-content>\n</h1>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-title{color:#192a56;font-weight:600;font-size:1.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1871
|
+
}
|
|
1872
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisTitleComponent, decorators: [{
|
|
1873
|
+
type: Component,
|
|
1874
|
+
args: [{ selector: 'suis-title', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<h1 class=\"suis-title\">\n <ng-content></ng-content>\n</h1>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-title{color:#192a56;font-weight:600;font-size:1.5rem}\n"] }]
|
|
1875
|
+
}] });
|
|
1876
|
+
|
|
1877
|
+
class SuisToolbarComponent {
|
|
1895
1878
|
constructor() {
|
|
1896
1879
|
/**
|
|
1897
|
-
* Adds a
|
|
1880
|
+
* Adds a padding around the content. By default set to false.
|
|
1898
1881
|
*/
|
|
1899
1882
|
this.spacing = false;
|
|
1900
1883
|
}
|
|
1901
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type:
|
|
1902
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type:
|
|
1884
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1885
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisToolbarComponent, isStandalone: true, selector: "suis-toolbar", inputs: { spacing: "spacing" }, ngImport: i0, template: "<div class=\"suis-toolbar\" [class.suis-toolbar--spacing]=\"spacing\">\n <div>\n <ng-content select=\"[suisToolbarLeft]\"></ng-content>\n </div>\n <div>\n <ng-content select=\"[suisToolbarCenter]\"></ng-content>\n </div>\n <div>\n <ng-content select=\"[suisToolbarRight]\"></ng-content>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-toolbar{width:100%;display:flex;align-items:center;justify-content:space-between;background-color:#fff;box-shadow:0 2px 5px #00000040}.suis-toolbar--spacing{padding:.75rem 1rem}@media (min-width: 768px){.suis-toolbar--spacing{padding:1rem 1.25rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1903
1886
|
}
|
|
1904
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type:
|
|
1887
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisToolbarComponent, decorators: [{
|
|
1905
1888
|
type: Component,
|
|
1906
|
-
args: [{ selector: 'suis-
|
|
1889
|
+
args: [{ selector: 'suis-toolbar', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-toolbar\" [class.suis-toolbar--spacing]=\"spacing\">\n <div>\n <ng-content select=\"[suisToolbarLeft]\"></ng-content>\n </div>\n <div>\n <ng-content select=\"[suisToolbarCenter]\"></ng-content>\n </div>\n <div>\n <ng-content select=\"[suisToolbarRight]\"></ng-content>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-toolbar{width:100%;display:flex;align-items:center;justify-content:space-between;background-color:#fff;box-shadow:0 2px 5px #00000040}.suis-toolbar--spacing{padding:.75rem 1rem}@media (min-width: 768px){.suis-toolbar--spacing{padding:1rem 1.25rem}}\n"] }]
|
|
1907
1890
|
}], propDecorators: { spacing: [{
|
|
1908
1891
|
type: Input
|
|
1909
1892
|
}] } });
|
|
@@ -1912,5 +1895,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
1912
1895
|
* Generated bundle index. Do not edit.
|
|
1913
1896
|
*/
|
|
1914
1897
|
|
|
1915
|
-
export { SuisAlertComponent, SuisBoxComponent, SuisBreadcrumbsComponent, SuisButtonComponent, SuisButtonLinkComponent, SuisButtonOutlinedComponent, SuisChipComponent, SuisContainerComponent, SuisFormFieldComponent, SuisIconComponent, SuisIconType, SuisInputChipsComponent, SuisInputNumberComponent, SuisInputTextComponent, SuisLabelComponent, SuisNavigationComponent, SuisNavigationGroupComponent, SuisNavigationGroupItemComponent, SuisNavigationItemComponent, SuisNavigationItemDirective, SuisNavigationModule, SuisNgClassPipe, SuisNotificationComponent, SuisNotificationService, SuisNotificationsComponent, SuisPaginationComponent, SuisProgressBarComponent, SuisSelectComponent, SuisSelectModule, SuisSelectMultiComponent, SuisSelectMultiModule, SuisSelectOptionComponent, SuisSelectOptionDirective, SuisSpinnerComponent, SuisSpinnerContainerComponent, SuisTabDirective, SuisTableCellDirective, SuisTableColumnDirective, SuisTableComponent, SuisTableModule, SuisTabsComponent, SuisTabsModule, SuisTitleComponent };
|
|
1898
|
+
export { SuisAlertComponent, SuisBoxComponent, SuisBreadcrumbsComponent, SuisButtonComponent, SuisButtonLinkComponent, SuisButtonOutlinedComponent, SuisChipComponent, SuisContainerComponent, SuisFormFieldComponent, SuisIconComponent, SuisIconType, SuisInputChipsComponent, SuisInputNumberComponent, SuisInputTextComponent, SuisLabelComponent, SuisNavigationComponent, SuisNavigationGroupComponent, SuisNavigationGroupItemComponent, SuisNavigationItemComponent, SuisNavigationItemDirective, SuisNavigationModule, SuisNgClassPipe, SuisNotificationComponent, SuisNotificationService, SuisNotificationsComponent, SuisPaginationComponent, SuisProgressBarComponent, SuisSelectComponent, SuisSelectModule, SuisSelectMultiComponent, SuisSelectMultiModule, SuisSelectOptionComponent, SuisSelectOptionDirective, SuisSpinnerComponent, SuisSpinnerContainerComponent, SuisTabDirective, SuisTableCellDirective, SuisTableColumnDirective, SuisTableComponent, SuisTableModule, SuisTabsComponent, SuisTabsModule, SuisTitleComponent, SuisToolbarComponent };
|
|
1916
1899
|
//# sourceMappingURL=suis.mjs.map
|