suis 0.23.3 → 0.25.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-alert/suis-alert.component.mjs +3 -3
- 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-button/suis-button.component.mjs +3 -3
- package/esm2022/lib/components/suis-button-link/suis-button-link.component.mjs +3 -3
- package/esm2022/lib/components/suis-button-outlined/suis-button-outlined.component.mjs +3 -3
- package/esm2022/lib/components/suis-chip/suis-chip.component.mjs +3 -3
- package/esm2022/lib/components/suis-form-field/suis-form-field.component.mjs +3 -11
- package/esm2022/lib/components/suis-icon/suis-icon.component.mjs +3 -3
- package/esm2022/lib/components/suis-input-chips/suis-input-chips.component.mjs +3 -3
- package/esm2022/lib/components/suis-input-number/suis-input-number.component.mjs +3 -3
- package/esm2022/lib/components/suis-input-text/suis-input-text.component.mjs +3 -3
- package/esm2022/lib/components/suis-label/suis-label.component.mjs +3 -9
- package/esm2022/lib/components/suis-navigation/index.mjs +2 -1
- package/esm2022/lib/components/suis-navigation/suis-navigation.component.mjs +3 -3
- package/esm2022/lib/components/suis-navigation/suis-navigation.module.mjs +18 -0
- package/esm2022/lib/components/suis-navigation-group/suis-navigation-group.component.mjs +3 -3
- package/esm2022/lib/components/suis-notification/suis-notification.component.mjs +3 -3
- package/esm2022/lib/components/suis-pagination/suis-pagination.component.mjs +7 -11
- package/esm2022/lib/components/suis-progress-bar/suis-progress-bar.component.mjs +3 -3
- package/esm2022/lib/components/suis-select/index.mjs +2 -1
- package/esm2022/lib/components/suis-select/suis-select.component.mjs +3 -3
- package/esm2022/lib/components/suis-select/suis-select.module.mjs +18 -0
- package/esm2022/lib/components/suis-select-multi/index.mjs +2 -1
- package/esm2022/lib/components/suis-select-multi/suis-select-multi.component.mjs +3 -3
- package/esm2022/lib/components/suis-select-multi/suis-select-multi.module.mjs +18 -0
- package/esm2022/lib/components/suis-select-option/suis-select-option.component.mjs +3 -3
- package/esm2022/lib/components/suis-spinner/suis-spinner.component.mjs +3 -3
- package/esm2022/lib/components/suis-spinner-container/suis-spinner-container.component.mjs +3 -3
- package/esm2022/lib/components/suis-table/index.mjs +3 -2
- package/esm2022/lib/components/suis-table/suis-table.component.mjs +3 -3
- package/esm2022/lib/components/suis-table/suis-table.module.mjs +31 -0
- package/esm2022/lib/components/suis-tabs/index.mjs +4 -0
- package/esm2022/lib/components/suis-tabs/suis-tab-actions.pipe.mjs +20 -0
- package/esm2022/lib/components/suis-tabs/suis-tab-template.pipe.mjs +24 -0
- package/esm2022/lib/components/suis-tabs/suis-tab.directive.mjs +26 -0
- package/esm2022/lib/components/suis-tabs/suis-tabs.component.mjs +31 -0
- package/esm2022/lib/components/suis-tabs/suis-tabs.module.mjs +18 -0
- 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/esm2022/lib/shared/classes/suis-select.base.mjs +1 -1
- package/fesm2022/suis.mjs +227 -82
- package/fesm2022/suis.mjs.map +1 -1
- package/lib/components/index.d.ts +2 -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-navigation/index.d.ts +1 -0
- package/lib/components/suis-navigation/suis-navigation.module.d.ts +8 -0
- package/lib/components/suis-pagination/suis-pagination.component.d.ts +1 -5
- package/lib/components/suis-select/index.d.ts +1 -0
- package/lib/components/suis-select/suis-select.module.d.ts +8 -0
- package/lib/components/suis-select-multi/index.d.ts +1 -0
- package/lib/components/suis-select-multi/suis-select-multi.module.d.ts +8 -0
- package/lib/components/suis-table/index.d.ts +2 -1
- package/lib/components/suis-table/suis-table.module.d.ts +9 -0
- package/lib/components/suis-tabs/index.d.ts +3 -0
- package/lib/components/suis-tabs/suis-tab-actions.pipe.d.ts +8 -0
- package/lib/components/suis-tabs/suis-tab-template.pipe.d.ts +8 -0
- package/lib/components/suis-tabs/suis-tab.directive.d.ts +11 -0
- package/lib/components/suis-tabs/suis-tabs.component.d.ts +14 -0
- package/lib/components/suis-tabs/suis-tabs.module.d.ts +8 -0
- 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 +2 -2
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, Directive, inject, ChangeDetectorRef, ElementRef, forwardRef, ViewChild, HostListener, TemplateRef, ContentChild, signal, Injectable, DestroyRef, ContentChildren } from '@angular/core';
|
|
2
|
+
import { Pipe, Component, ChangeDetectionStrategy, Input, EventEmitter, Output, Directive, inject, ChangeDetectorRef, ElementRef, forwardRef, ViewChild, HostListener, TemplateRef, ContentChild, NgModule, signal, Injectable, DestroyRef, 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';
|
|
@@ -119,11 +119,11 @@ class SuisIconComponent {
|
|
|
119
119
|
this.bold = false;
|
|
120
120
|
}
|
|
121
121
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
122
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisIconComponent, isStandalone: true, selector: "suis-icon", inputs: { size: "size", color: "color", type: "type", outlined: "outlined", filled: "filled", pointer: "pointer", bold: "bold" }, ngImport: i0, template: "<div\n class=\"suis-icon\"\n [class.suis-icon--outlined]=\"outlined\"\n [class.suis-icon--filled]=\"filled\"\n [class.suis-icon--pointer]=\"pointer\"\n [class.suis-icon--bold]=\"bold\"\n [class.suis-icon--rotate]=\"\n type === SuisIconType.CHEVRON_UP || type === SuisIconType.CHEVRON_DOWN\n \"\n [ngClass]=\"'suis-icon' | suisNgClass : color : size\"\n>\n <span [innerHTML]=\"type | suisIconType\"></span>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-icon{display:flex;justify-content:center;align-items:center;width:1rem;height:1rem;border-radius:100%;line-height:1rem;background-color:transparent;border:none}.suis-icon--rotate{transform:rotate(90deg)}.suis-icon--outlined{border-width:.0625rem;border-style:solid}.suis-icon--bold{font-weight:700}.suis-icon--pointer{cursor:pointer}.suis-icon--xs{font-size:.5rem}.suis-icon--sm{font-size:.75rem}.suis-icon--md{font-size:1rem}.suis-icon--lg{font-size:1.25rem;width:1.25rem;height:1.25rem}.suis-icon--xl{font-size:2rem;width:2rem;height:2rem}.suis-icon--primary{color:#192a56;border-color:#192a56}.suis-icon--secondary{color:#273c75;border-color:#273c75}.suis-icon--tertiary{color:#dcdde1;border-color:#dcdde1}.suis-icon--complementary{color:#f5f6fa;border-color:#f5f6fa}.suis-icon--success{color:#2ed573;border-color:#2ed573}.suis-icon--warning{color:#ffa502;border-color:#ffa502}.suis-icon--danger{color:#ff4757;border-color:#ff4757}.suis-icon--white{color:#fff;border-color:#fff}.suis-icon--gray{color:#bcbcbc;border-color:#bcbcbc}.suis-icon--dark{color:#000;border-color:#000}.suis-icon--filled{border:none;background-color:#000;color:#fff}.suis-icon--filled.suis-icon--primary{background-color:#192a56}.suis-icon--filled.suis-icon--secondary{background-color:#273c75}.suis-icon--filled.suis-icon--tertiary{background-color:#dcdde1;color:#2f3640}.suis-icon--filled.suis-icon--complementary{background-color:#f5f6fa;color:#2f3640}.suis-icon--filled.suis-icon--success{background-color:#2ed573}.suis-icon--filled.suis-icon--warning{background-color:#ffa502}.suis-icon--filled.suis-icon--danger{background-color:#ff4757}.suis-icon--filled.suis-icon--white{background-color:#fff;color:#2f3640}.suis-icon--filled.suis-icon--gray{background-color:#bcbcbc}.suis-icon--filled.suis-icon--dark{background-color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisIconTypePipe, name: "suisIconType" }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
122
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisIconComponent, isStandalone: true, selector: "suis-icon", inputs: { size: "size", color: "color", type: "type", outlined: "outlined", filled: "filled", pointer: "pointer", bold: "bold" }, ngImport: i0, template: "<div\n class=\"suis-icon\"\n [class.suis-icon--outlined]=\"outlined\"\n [class.suis-icon--filled]=\"filled\"\n [class.suis-icon--pointer]=\"pointer\"\n [class.suis-icon--bold]=\"bold\"\n [class.suis-icon--rotate]=\"\n type === SuisIconType.CHEVRON_UP || type === SuisIconType.CHEVRON_DOWN\n \"\n [ngClass]=\"'suis-icon' | suisNgClass : color : size\"\n>\n <span [innerHTML]=\"type | suisIconType\"></span>\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-icon{display:flex;justify-content:center;align-items:center;width:1rem;height:1rem;border-radius:100%;line-height:1rem;background-color:transparent;border:none}.suis-icon--rotate{transform:rotate(90deg)}.suis-icon--outlined{border-width:.0625rem;border-style:solid}.suis-icon--bold{font-weight:700}.suis-icon--pointer{cursor:pointer}.suis-icon--xs{font-size:.5rem}.suis-icon--sm{font-size:.75rem}.suis-icon--md{font-size:1rem}.suis-icon--lg{font-size:1.25rem;width:1.25rem;height:1.25rem}.suis-icon--xl{font-size:2rem;width:2rem;height:2rem}.suis-icon--primary{color:#192a56;border-color:#192a56}.suis-icon--secondary{color:#273c75;border-color:#273c75}.suis-icon--tertiary{color:#dcdde1;border-color:#dcdde1}.suis-icon--complementary{color:#f5f6fa;border-color:#f5f6fa}.suis-icon--success{color:#2ed573;border-color:#2ed573}.suis-icon--warning{color:#ffa502;border-color:#ffa502}.suis-icon--danger{color:#ff4757;border-color:#ff4757}.suis-icon--white{color:#fff;border-color:#fff}.suis-icon--gray{color:#bcbcbc;border-color:#bcbcbc}.suis-icon--dark{color:#000;border-color:#000}.suis-icon--filled{border:none;background-color:#000;color:#fff}.suis-icon--filled.suis-icon--primary{background-color:#192a56}.suis-icon--filled.suis-icon--secondary{background-color:#273c75}.suis-icon--filled.suis-icon--tertiary{background-color:#dcdde1;color:#2f3640}.suis-icon--filled.suis-icon--complementary{background-color:#f5f6fa;color:#2f3640}.suis-icon--filled.suis-icon--success{background-color:#2ed573}.suis-icon--filled.suis-icon--warning{background-color:#ffa502}.suis-icon--filled.suis-icon--danger{background-color:#ff4757}.suis-icon--filled.suis-icon--white{background-color:#fff;color:#2f3640}.suis-icon--filled.suis-icon--gray{background-color:#bcbcbc}.suis-icon--filled.suis-icon--dark{background-color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisIconTypePipe, name: "suisIconType" }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
123
123
|
}
|
|
124
124
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisIconComponent, decorators: [{
|
|
125
125
|
type: Component,
|
|
126
|
-
args: [{ selector: 'suis-icon', standalone: true, imports: [CommonModule, SuisIconTypePipe, SuisNgClassPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-icon\"\n [class.suis-icon--outlined]=\"outlined\"\n [class.suis-icon--filled]=\"filled\"\n [class.suis-icon--pointer]=\"pointer\"\n [class.suis-icon--bold]=\"bold\"\n [class.suis-icon--rotate]=\"\n type === SuisIconType.CHEVRON_UP || type === SuisIconType.CHEVRON_DOWN\n \"\n [ngClass]=\"'suis-icon' | suisNgClass : color : size\"\n>\n <span [innerHTML]=\"type | suisIconType\"></span>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-icon{display:flex;justify-content:center;align-items:center;width:1rem;height:1rem;border-radius:100%;line-height:1rem;background-color:transparent;border:none}.suis-icon--rotate{transform:rotate(90deg)}.suis-icon--outlined{border-width:.0625rem;border-style:solid}.suis-icon--bold{font-weight:700}.suis-icon--pointer{cursor:pointer}.suis-icon--xs{font-size:.5rem}.suis-icon--sm{font-size:.75rem}.suis-icon--md{font-size:1rem}.suis-icon--lg{font-size:1.25rem;width:1.25rem;height:1.25rem}.suis-icon--xl{font-size:2rem;width:2rem;height:2rem}.suis-icon--primary{color:#192a56;border-color:#192a56}.suis-icon--secondary{color:#273c75;border-color:#273c75}.suis-icon--tertiary{color:#dcdde1;border-color:#dcdde1}.suis-icon--complementary{color:#f5f6fa;border-color:#f5f6fa}.suis-icon--success{color:#2ed573;border-color:#2ed573}.suis-icon--warning{color:#ffa502;border-color:#ffa502}.suis-icon--danger{color:#ff4757;border-color:#ff4757}.suis-icon--white{color:#fff;border-color:#fff}.suis-icon--gray{color:#bcbcbc;border-color:#bcbcbc}.suis-icon--dark{color:#000;border-color:#000}.suis-icon--filled{border:none;background-color:#000;color:#fff}.suis-icon--filled.suis-icon--primary{background-color:#192a56}.suis-icon--filled.suis-icon--secondary{background-color:#273c75}.suis-icon--filled.suis-icon--tertiary{background-color:#dcdde1;color:#2f3640}.suis-icon--filled.suis-icon--complementary{background-color:#f5f6fa;color:#2f3640}.suis-icon--filled.suis-icon--success{background-color:#2ed573}.suis-icon--filled.suis-icon--warning{background-color:#ffa502}.suis-icon--filled.suis-icon--danger{background-color:#ff4757}.suis-icon--filled.suis-icon--white{background-color:#fff;color:#2f3640}.suis-icon--filled.suis-icon--gray{background-color:#bcbcbc}.suis-icon--filled.suis-icon--dark{background-color:#000}\n"] }]
|
|
126
|
+
args: [{ selector: 'suis-icon', standalone: true, imports: [CommonModule, SuisIconTypePipe, SuisNgClassPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-icon\"\n [class.suis-icon--outlined]=\"outlined\"\n [class.suis-icon--filled]=\"filled\"\n [class.suis-icon--pointer]=\"pointer\"\n [class.suis-icon--bold]=\"bold\"\n [class.suis-icon--rotate]=\"\n type === SuisIconType.CHEVRON_UP || type === SuisIconType.CHEVRON_DOWN\n \"\n [ngClass]=\"'suis-icon' | suisNgClass : color : size\"\n>\n <span [innerHTML]=\"type | suisIconType\"></span>\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-icon{display:flex;justify-content:center;align-items:center;width:1rem;height:1rem;border-radius:100%;line-height:1rem;background-color:transparent;border:none}.suis-icon--rotate{transform:rotate(90deg)}.suis-icon--outlined{border-width:.0625rem;border-style:solid}.suis-icon--bold{font-weight:700}.suis-icon--pointer{cursor:pointer}.suis-icon--xs{font-size:.5rem}.suis-icon--sm{font-size:.75rem}.suis-icon--md{font-size:1rem}.suis-icon--lg{font-size:1.25rem;width:1.25rem;height:1.25rem}.suis-icon--xl{font-size:2rem;width:2rem;height:2rem}.suis-icon--primary{color:#192a56;border-color:#192a56}.suis-icon--secondary{color:#273c75;border-color:#273c75}.suis-icon--tertiary{color:#dcdde1;border-color:#dcdde1}.suis-icon--complementary{color:#f5f6fa;border-color:#f5f6fa}.suis-icon--success{color:#2ed573;border-color:#2ed573}.suis-icon--warning{color:#ffa502;border-color:#ffa502}.suis-icon--danger{color:#ff4757;border-color:#ff4757}.suis-icon--white{color:#fff;border-color:#fff}.suis-icon--gray{color:#bcbcbc;border-color:#bcbcbc}.suis-icon--dark{color:#000;border-color:#000}.suis-icon--filled{border:none;background-color:#000;color:#fff}.suis-icon--filled.suis-icon--primary{background-color:#192a56}.suis-icon--filled.suis-icon--secondary{background-color:#273c75}.suis-icon--filled.suis-icon--tertiary{background-color:#dcdde1;color:#2f3640}.suis-icon--filled.suis-icon--complementary{background-color:#f5f6fa;color:#2f3640}.suis-icon--filled.suis-icon--success{background-color:#2ed573}.suis-icon--filled.suis-icon--warning{background-color:#ffa502}.suis-icon--filled.suis-icon--danger{background-color:#ff4757}.suis-icon--filled.suis-icon--white{background-color:#fff;color:#2f3640}.suis-icon--filled.suis-icon--gray{background-color:#bcbcbc}.suis-icon--filled.suis-icon--dark{background-color:#000}\n"] }]
|
|
127
127
|
}], propDecorators: { size: [{
|
|
128
128
|
type: Input
|
|
129
129
|
}], color: [{
|
|
@@ -162,11 +162,11 @@ class SuisAlertComponent {
|
|
|
162
162
|
this.hiddenChange.emit(true);
|
|
163
163
|
}
|
|
164
164
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
165
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisAlertComponent, isStandalone: true, selector: "suis-alert", inputs: { hidden: "hidden", color: "color" }, outputs: { hiddenChange: "hiddenChange" }, ngImport: i0, template: "<div\n *ngIf=\"!hidden\"\n class=\"suis-alert\"\n [ngClass]=\"'suis-alert' | suisNgClass : color\"\n>\n <ng-content></ng-content>\n <button class=\"suis-alert__cancel\" type=\"button\" (click)=\"onCancel()\">\n <suis-icon\n [type]=\"SuisIconType.CROSS\"\n [color]=\"'white'\"\n [size]=\"'lg'\"\n ></suis-icon>\n </button>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-alert{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.75rem 1.25rem;border-radius:.25rem;color:#fff;font-weight:500}.suis-alert--success{background-color:#2ed573}.suis-alert--warning{background-color:#ffa502}.suis-alert--danger{background-color:#ff4757}.suis-alert__cancel{background-color:transparent;border:none;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
165
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisAlertComponent, isStandalone: true, selector: "suis-alert", inputs: { hidden: "hidden", color: "color" }, outputs: { hiddenChange: "hiddenChange" }, ngImport: i0, template: "<div\n *ngIf=\"!hidden\"\n class=\"suis-alert\"\n [ngClass]=\"'suis-alert' | suisNgClass : color\"\n>\n <ng-content></ng-content>\n <button class=\"suis-alert__cancel\" type=\"button\" (click)=\"onCancel()\">\n <suis-icon\n [type]=\"SuisIconType.CROSS\"\n [color]=\"'white'\"\n [size]=\"'lg'\"\n ></suis-icon>\n </button>\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-alert{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.75rem 1.25rem;border-radius:.25rem;color:#fff;font-weight:500}.suis-alert--success{background-color:#2ed573}.suis-alert--warning{background-color:#ffa502}.suis-alert--danger{background-color:#ff4757}.suis-alert__cancel{background-color:transparent;border:none;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
166
166
|
}
|
|
167
167
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisAlertComponent, decorators: [{
|
|
168
168
|
type: Component,
|
|
169
|
-
args: [{ selector: 'suis-alert', standalone: true, imports: [CommonModule, SuisNgClassPipe, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"!hidden\"\n class=\"suis-alert\"\n [ngClass]=\"'suis-alert' | suisNgClass : color\"\n>\n <ng-content></ng-content>\n <button class=\"suis-alert__cancel\" type=\"button\" (click)=\"onCancel()\">\n <suis-icon\n [type]=\"SuisIconType.CROSS\"\n [color]=\"'white'\"\n [size]=\"'lg'\"\n ></suis-icon>\n </button>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-alert{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.75rem 1.25rem;border-radius:.25rem;color:#fff;font-weight:500}.suis-alert--success{background-color:#2ed573}.suis-alert--warning{background-color:#ffa502}.suis-alert--danger{background-color:#ff4757}.suis-alert__cancel{background-color:transparent;border:none;cursor:pointer}\n"] }]
|
|
169
|
+
args: [{ selector: 'suis-alert', standalone: true, imports: [CommonModule, SuisNgClassPipe, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"!hidden\"\n class=\"suis-alert\"\n [ngClass]=\"'suis-alert' | suisNgClass : color\"\n>\n <ng-content></ng-content>\n <button class=\"suis-alert__cancel\" type=\"button\" (click)=\"onCancel()\">\n <suis-icon\n [type]=\"SuisIconType.CROSS\"\n [color]=\"'white'\"\n [size]=\"'lg'\"\n ></suis-icon>\n </button>\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-alert{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.75rem 1.25rem;border-radius:.25rem;color:#fff;font-weight:500}.suis-alert--success{background-color:#2ed573}.suis-alert--warning{background-color:#ffa502}.suis-alert--danger{background-color:#ff4757}.suis-alert__cancel{background-color:transparent;border:none;cursor:pointer}\n"] }]
|
|
170
170
|
}], propDecorators: { hidden: [{
|
|
171
171
|
type: Input
|
|
172
172
|
}], hiddenChange: [{
|
|
@@ -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)}}.suis-box{background-color:#fff;box-shadow:0 2px 5px #
|
|
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)}}.suis-box{background-color:#fff;box-shadow:0 2px 5px #
|
|
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 {
|
|
@@ -231,11 +225,11 @@ class SuisSpinnerComponent {
|
|
|
231
225
|
this.color = 'primary';
|
|
232
226
|
}
|
|
233
227
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
234
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisSpinnerComponent, isStandalone: true, selector: "suis-spinner", inputs: { size: "size", color: "color" }, ngImport: i0, template: "<div\n class=\"suis-spinner\"\n [ngClass]=\"'suis-spinner' | suisNgClass : size : color\"\n></div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-spinner{animation:spin .5s infinite linear;border-style:solid;border-radius:50%;border-left-color:transparent!important}.suis-spinner--primary{border-color:#192a56}.suis-spinner--secondary{border-color:#273c75}.suis-spinner--tertiary{border-color:#dcdde1}.suis-spinner--complementary{border-color:#f5f6fa}.suis-spinner--success{border-color:#2ed573}.suis-spinner--warning{border-color:#ffa502}.suis-spinner--danger{border-color:#ff4757}.suis-spinner--dark{border-color:#000}.suis-spinner--gray{border-color:#bcbcbc}.suis-spinner--white{border-color:#fff}.suis-spinner--xs{width:1rem;height:1rem;border-width:.1875rem}.suis-spinner--sm{width:1.5rem;height:1.5rem;border-width:.25rem}.suis-spinner--md{width:2rem;height:2rem;border-width:.375rem}.suis-spinner--lg{width:3rem;height:3rem;border-width:.5rem}.suis-spinner--xl{width:4rem;height:4rem;border-width:.625rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
228
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisSpinnerComponent, isStandalone: true, selector: "suis-spinner", inputs: { size: "size", color: "color" }, ngImport: i0, template: "<div\n class=\"suis-spinner\"\n [ngClass]=\"'suis-spinner' | suisNgClass : size : color\"\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-spinner{animation:spin .5s infinite linear;border-style:solid;border-radius:50%;border-left-color:transparent!important}.suis-spinner--primary{border-color:#192a56}.suis-spinner--secondary{border-color:#273c75}.suis-spinner--tertiary{border-color:#dcdde1}.suis-spinner--complementary{border-color:#f5f6fa}.suis-spinner--success{border-color:#2ed573}.suis-spinner--warning{border-color:#ffa502}.suis-spinner--danger{border-color:#ff4757}.suis-spinner--dark{border-color:#000}.suis-spinner--gray{border-color:#bcbcbc}.suis-spinner--white{border-color:#fff}.suis-spinner--xs{width:1rem;height:1rem;border-width:.1875rem}.suis-spinner--sm{width:1.5rem;height:1.5rem;border-width:.25rem}.suis-spinner--md{width:2rem;height:2rem;border-width:.375rem}.suis-spinner--lg{width:3rem;height:3rem;border-width:.5rem}.suis-spinner--xl{width:4rem;height:4rem;border-width:.625rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
235
229
|
}
|
|
236
230
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSpinnerComponent, decorators: [{
|
|
237
231
|
type: Component,
|
|
238
|
-
args: [{ selector: 'suis-spinner', standalone: true, imports: [CommonModule, SuisNgClassPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-spinner\"\n [ngClass]=\"'suis-spinner' | suisNgClass : size : color\"\n></div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-spinner{animation:spin .5s infinite linear;border-style:solid;border-radius:50%;border-left-color:transparent!important}.suis-spinner--primary{border-color:#192a56}.suis-spinner--secondary{border-color:#273c75}.suis-spinner--tertiary{border-color:#dcdde1}.suis-spinner--complementary{border-color:#f5f6fa}.suis-spinner--success{border-color:#2ed573}.suis-spinner--warning{border-color:#ffa502}.suis-spinner--danger{border-color:#ff4757}.suis-spinner--dark{border-color:#000}.suis-spinner--gray{border-color:#bcbcbc}.suis-spinner--white{border-color:#fff}.suis-spinner--xs{width:1rem;height:1rem;border-width:.1875rem}.suis-spinner--sm{width:1.5rem;height:1.5rem;border-width:.25rem}.suis-spinner--md{width:2rem;height:2rem;border-width:.375rem}.suis-spinner--lg{width:3rem;height:3rem;border-width:.5rem}.suis-spinner--xl{width:4rem;height:4rem;border-width:.625rem}\n"] }]
|
|
232
|
+
args: [{ selector: 'suis-spinner', standalone: true, imports: [CommonModule, SuisNgClassPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-spinner\"\n [ngClass]=\"'suis-spinner' | suisNgClass : size : color\"\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-spinner{animation:spin .5s infinite linear;border-style:solid;border-radius:50%;border-left-color:transparent!important}.suis-spinner--primary{border-color:#192a56}.suis-spinner--secondary{border-color:#273c75}.suis-spinner--tertiary{border-color:#dcdde1}.suis-spinner--complementary{border-color:#f5f6fa}.suis-spinner--success{border-color:#2ed573}.suis-spinner--warning{border-color:#ffa502}.suis-spinner--danger{border-color:#ff4757}.suis-spinner--dark{border-color:#000}.suis-spinner--gray{border-color:#bcbcbc}.suis-spinner--white{border-color:#fff}.suis-spinner--xs{width:1rem;height:1rem;border-width:.1875rem}.suis-spinner--sm{width:1.5rem;height:1.5rem;border-width:.25rem}.suis-spinner--md{width:2rem;height:2rem;border-width:.375rem}.suis-spinner--lg{width:3rem;height:3rem;border-width:.5rem}.suis-spinner--xl{width:4rem;height:4rem;border-width:.625rem}\n"] }]
|
|
239
233
|
}], propDecorators: { size: [{
|
|
240
234
|
type: Input
|
|
241
235
|
}], color: [{
|
|
@@ -294,11 +288,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
294
288
|
|
|
295
289
|
class SuisButtonComponent extends SuisButtonBase {
|
|
296
290
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
297
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisButtonComponent, isStandalone: true, selector: "suis-button", usesInheritance: true, ngImport: i0, template: "<button\n class=\"suis-button\"\n [class.suis-button--full-width]=\"fullWidth\"\n [ngClass]=\"'suis-button' | suisNgClass : color\"\n [attr.disabled]=\"disabled || loading ? true : undefined\"\n [attr.tabindex]=\"disabled || loading ? -1 : 0\"\n [attr.type]=\"type\"\n (click)=\"onClick()\"\n>\n <ng-container *ngIf=\"!loading; else spinner\">\n <ng-content></ng-content>\n </ng-container>\n <ng-template #spinner>\n <suis-spinner size=\"xs\" color=\"white\"></suis-spinner>\n </ng-template>\n</button>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-button{width:-moz-fit-content;width:fit-content;display:flex;align-items:center;justify-content:center;padding:.375rem 1rem;border-radius:.25rem;text-align:center;text-decoration:none;transition:background-color .25s ease-in-out;border-width:.125rem;border-style:solid;font-size:.875rem}.suis-button--full-width{width:100%}.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;border-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;border-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;border-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;border-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;border-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;border-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;border-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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }, { kind: "component", type: SuisSpinnerComponent, selector: "suis-spinner", inputs: ["size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
291
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisButtonComponent, isStandalone: true, selector: "suis-button", usesInheritance: true, ngImport: i0, template: "<button\n class=\"suis-button\"\n [class.suis-button--full-width]=\"fullWidth\"\n [ngClass]=\"'suis-button' | suisNgClass : color\"\n [attr.disabled]=\"disabled || loading ? true : undefined\"\n [attr.tabindex]=\"disabled || loading ? -1 : 0\"\n [attr.type]=\"type\"\n (click)=\"onClick()\"\n>\n <ng-container *ngIf=\"!loading; else spinner\">\n <ng-content></ng-content>\n </ng-container>\n <ng-template #spinner>\n <suis-spinner size=\"xs\" color=\"white\"></suis-spinner>\n </ng-template>\n</button>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-button{width:-moz-fit-content;width:fit-content;display:flex;align-items:center;justify-content:center;padding:.375rem 1rem;border-radius:.25rem;text-align:center;text-decoration:none;transition:background-color .25s ease-in-out;border-width:.125rem;border-style:solid;font-size:.875rem}.suis-button--full-width{width:100%}.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;border-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;border-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;border-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;border-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;border-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;border-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;border-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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }, { kind: "component", type: SuisSpinnerComponent, selector: "suis-spinner", inputs: ["size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
298
292
|
}
|
|
299
293
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisButtonComponent, decorators: [{
|
|
300
294
|
type: Component,
|
|
301
|
-
args: [{ selector: 'suis-button', standalone: true, imports: [CommonModule, SuisNgClassPipe, SuisSpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n class=\"suis-button\"\n [class.suis-button--full-width]=\"fullWidth\"\n [ngClass]=\"'suis-button' | suisNgClass : color\"\n [attr.disabled]=\"disabled || loading ? true : undefined\"\n [attr.tabindex]=\"disabled || loading ? -1 : 0\"\n [attr.type]=\"type\"\n (click)=\"onClick()\"\n>\n <ng-container *ngIf=\"!loading; else spinner\">\n <ng-content></ng-content>\n </ng-container>\n <ng-template #spinner>\n <suis-spinner size=\"xs\" color=\"white\"></suis-spinner>\n </ng-template>\n</button>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-button{width:-moz-fit-content;width:fit-content;display:flex;align-items:center;justify-content:center;padding:.375rem 1rem;border-radius:.25rem;text-align:center;text-decoration:none;transition:background-color .25s ease-in-out;border-width:.125rem;border-style:solid;font-size:.875rem}.suis-button--full-width{width:100%}.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;border-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;border-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;border-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;border-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;border-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;border-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;border-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"] }]
|
|
295
|
+
args: [{ selector: 'suis-button', standalone: true, imports: [CommonModule, SuisNgClassPipe, SuisSpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n class=\"suis-button\"\n [class.suis-button--full-width]=\"fullWidth\"\n [ngClass]=\"'suis-button' | suisNgClass : color\"\n [attr.disabled]=\"disabled || loading ? true : undefined\"\n [attr.tabindex]=\"disabled || loading ? -1 : 0\"\n [attr.type]=\"type\"\n (click)=\"onClick()\"\n>\n <ng-container *ngIf=\"!loading; else spinner\">\n <ng-content></ng-content>\n </ng-container>\n <ng-template #spinner>\n <suis-spinner size=\"xs\" color=\"white\"></suis-spinner>\n </ng-template>\n</button>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-button{width:-moz-fit-content;width:fit-content;display:flex;align-items:center;justify-content:center;padding:.375rem 1rem;border-radius:.25rem;text-align:center;text-decoration:none;transition:background-color .25s ease-in-out;border-width:.125rem;border-style:solid;font-size:.875rem}.suis-button--full-width{width:100%}.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;border-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;border-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;border-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;border-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;border-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;border-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;border-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"] }]
|
|
302
296
|
}] });
|
|
303
297
|
|
|
304
298
|
class SuisButtonLinkComponent extends SuisButtonBase {
|
|
@@ -312,11 +306,11 @@ class SuisButtonLinkComponent extends SuisButtonBase {
|
|
|
312
306
|
}
|
|
313
307
|
}
|
|
314
308
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisButtonLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
315
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisButtonLinkComponent, isStandalone: true, selector: "suis-button-link", inputs: { routerLink: "routerLink", target: "target", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", relativeTo: "relativeTo" }, usesInheritance: true, ngImport: i0, template: "<a\n class=\"suis-button-link\"\n [class.suis-button--full-width]=\"fullWidth\"\n [routerLink]=\"routerLink\"\n [target]=\"target\"\n [queryParams]=\"queryParams\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [relativeTo]=\"relativeTo\"\n [ngClass]=\"'suis-button-link' | suisNgClass : color\"\n [attr.tabindex]=\"disabled || loading ? -1 : 0\"\n (click)=\"onClick($event)\"\n>\n <ng-container *ngIf=\"!loading; else spinner\">\n <ng-content></ng-content>\n </ng-container>\n <ng-template #spinner>\n <suis-spinner size=\"xs\" color=\"white\"></suis-spinner>\n </ng-template>\n</a>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-button-link{width:-moz-fit-content;width:fit-content;display:flex;align-items:center;justify-content:center;padding:.375rem 1rem;border-radius:.25rem;text-align:center;text-decoration:none;transition:background-color .25s ease-in-out;border-width:.125rem;border-style:solid;font-size:.875rem}.suis-button-link--full-width{width:100%}.suis-button-link:disabled{opacity:.5}.suis-button-link:hover:not(:disabled){cursor:pointer}.suis-button-link:hover:disabled{cursor:not-allowed}.suis-button-link:focus,.suis-button-link:focus-within{outline:none}.suis-button-link--primary{background-color:#192a56;border-color:#192a56;color:#fff}.suis-button-link--primary:hover:not(:disabled){background-color:#192a56d9}.suis-button-link--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button-link--secondary{background-color:#273c75;border-color:#273c75;color:#fff}.suis-button-link--secondary:hover:not(:disabled){background-color:#273c75d9}.suis-button-link--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button-link--tertiary{background-color:#dcdde1;border-color:#dcdde1;color:#2f3640}.suis-button-link--tertiary:hover:not(:disabled){background-color:#dcdde1d9}.suis-button-link--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button-link--complementary{background-color:#f5f6fa;border-color:#f5f6fa;color:#2f3640}.suis-button-link--complementary:hover:not(:disabled){background-color:#f5f6fad9}.suis-button-link--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button-link--success{background-color:#2ed573;border-color:#2ed573;color:#fff}.suis-button-link--success:hover:not(:disabled){background-color:#2ed573d9}.suis-button-link--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button-link--warning{background-color:#ffa502;border-color:#ffa502;color:#fff}.suis-button-link--warning:hover:not(:disabled){background-color:#ffa502d9}.suis-button-link--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button-link--danger{background-color:#ff4757;border-color:#ff4757;color:#fff}.suis-button-link--danger:hover:not(:disabled){background-color:#ff4757d9}.suis-button-link--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }, { kind: "component", type: SuisSpinnerComponent, selector: "suis-spinner", inputs: ["size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
309
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisButtonLinkComponent, isStandalone: true, selector: "suis-button-link", inputs: { routerLink: "routerLink", target: "target", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", relativeTo: "relativeTo" }, usesInheritance: true, ngImport: i0, template: "<a\n class=\"suis-button-link\"\n [class.suis-button--full-width]=\"fullWidth\"\n [routerLink]=\"routerLink\"\n [target]=\"target\"\n [queryParams]=\"queryParams\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [relativeTo]=\"relativeTo\"\n [ngClass]=\"'suis-button-link' | suisNgClass : color\"\n [attr.tabindex]=\"disabled || loading ? -1 : 0\"\n (click)=\"onClick($event)\"\n>\n <ng-container *ngIf=\"!loading; else spinner\">\n <ng-content></ng-content>\n </ng-container>\n <ng-template #spinner>\n <suis-spinner size=\"xs\" color=\"white\"></suis-spinner>\n </ng-template>\n</a>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-button-link{width:-moz-fit-content;width:fit-content;display:flex;align-items:center;justify-content:center;padding:.375rem 1rem;border-radius:.25rem;text-align:center;text-decoration:none;transition:background-color .25s ease-in-out;border-width:.125rem;border-style:solid;font-size:.875rem}.suis-button-link--full-width{width:100%}.suis-button-link:disabled{opacity:.5}.suis-button-link:hover:not(:disabled){cursor:pointer}.suis-button-link:hover:disabled{cursor:not-allowed}.suis-button-link:focus,.suis-button-link:focus-within{outline:none}.suis-button-link--primary{background-color:#192a56;border-color:#192a56;color:#fff}.suis-button-link--primary:hover:not(:disabled){background-color:#192a56d9}.suis-button-link--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button-link--secondary{background-color:#273c75;border-color:#273c75;color:#fff}.suis-button-link--secondary:hover:not(:disabled){background-color:#273c75d9}.suis-button-link--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button-link--tertiary{background-color:#dcdde1;border-color:#dcdde1;color:#2f3640}.suis-button-link--tertiary:hover:not(:disabled){background-color:#dcdde1d9}.suis-button-link--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button-link--complementary{background-color:#f5f6fa;border-color:#f5f6fa;color:#2f3640}.suis-button-link--complementary:hover:not(:disabled){background-color:#f5f6fad9}.suis-button-link--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button-link--success{background-color:#2ed573;border-color:#2ed573;color:#fff}.suis-button-link--success:hover:not(:disabled){background-color:#2ed573d9}.suis-button-link--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button-link--warning{background-color:#ffa502;border-color:#ffa502;color:#fff}.suis-button-link--warning:hover:not(:disabled){background-color:#ffa502d9}.suis-button-link--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button-link--danger{background-color:#ff4757;border-color:#ff4757;color:#fff}.suis-button-link--danger:hover:not(:disabled){background-color:#ff4757d9}.suis-button-link--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }, { kind: "component", type: SuisSpinnerComponent, selector: "suis-spinner", inputs: ["size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
316
310
|
}
|
|
317
311
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisButtonLinkComponent, decorators: [{
|
|
318
312
|
type: Component,
|
|
319
|
-
args: [{ selector: 'suis-button-link', standalone: true, imports: [CommonModule, RouterModule, SuisNgClassPipe, SuisSpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n class=\"suis-button-link\"\n [class.suis-button--full-width]=\"fullWidth\"\n [routerLink]=\"routerLink\"\n [target]=\"target\"\n [queryParams]=\"queryParams\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [relativeTo]=\"relativeTo\"\n [ngClass]=\"'suis-button-link' | suisNgClass : color\"\n [attr.tabindex]=\"disabled || loading ? -1 : 0\"\n (click)=\"onClick($event)\"\n>\n <ng-container *ngIf=\"!loading; else spinner\">\n <ng-content></ng-content>\n </ng-container>\n <ng-template #spinner>\n <suis-spinner size=\"xs\" color=\"white\"></suis-spinner>\n </ng-template>\n</a>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-button-link{width:-moz-fit-content;width:fit-content;display:flex;align-items:center;justify-content:center;padding:.375rem 1rem;border-radius:.25rem;text-align:center;text-decoration:none;transition:background-color .25s ease-in-out;border-width:.125rem;border-style:solid;font-size:.875rem}.suis-button-link--full-width{width:100%}.suis-button-link:disabled{opacity:.5}.suis-button-link:hover:not(:disabled){cursor:pointer}.suis-button-link:hover:disabled{cursor:not-allowed}.suis-button-link:focus,.suis-button-link:focus-within{outline:none}.suis-button-link--primary{background-color:#192a56;border-color:#192a56;color:#fff}.suis-button-link--primary:hover:not(:disabled){background-color:#192a56d9}.suis-button-link--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button-link--secondary{background-color:#273c75;border-color:#273c75;color:#fff}.suis-button-link--secondary:hover:not(:disabled){background-color:#273c75d9}.suis-button-link--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button-link--tertiary{background-color:#dcdde1;border-color:#dcdde1;color:#2f3640}.suis-button-link--tertiary:hover:not(:disabled){background-color:#dcdde1d9}.suis-button-link--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button-link--complementary{background-color:#f5f6fa;border-color:#f5f6fa;color:#2f3640}.suis-button-link--complementary:hover:not(:disabled){background-color:#f5f6fad9}.suis-button-link--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button-link--success{background-color:#2ed573;border-color:#2ed573;color:#fff}.suis-button-link--success:hover:not(:disabled){background-color:#2ed573d9}.suis-button-link--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button-link--warning{background-color:#ffa502;border-color:#ffa502;color:#fff}.suis-button-link--warning:hover:not(:disabled){background-color:#ffa502d9}.suis-button-link--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button-link--danger{background-color:#ff4757;border-color:#ff4757;color:#fff}.suis-button-link--danger:hover:not(:disabled){background-color:#ff4757d9}.suis-button-link--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"] }]
|
|
313
|
+
args: [{ selector: 'suis-button-link', standalone: true, imports: [CommonModule, RouterModule, SuisNgClassPipe, SuisSpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n class=\"suis-button-link\"\n [class.suis-button--full-width]=\"fullWidth\"\n [routerLink]=\"routerLink\"\n [target]=\"target\"\n [queryParams]=\"queryParams\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [relativeTo]=\"relativeTo\"\n [ngClass]=\"'suis-button-link' | suisNgClass : color\"\n [attr.tabindex]=\"disabled || loading ? -1 : 0\"\n (click)=\"onClick($event)\"\n>\n <ng-container *ngIf=\"!loading; else spinner\">\n <ng-content></ng-content>\n </ng-container>\n <ng-template #spinner>\n <suis-spinner size=\"xs\" color=\"white\"></suis-spinner>\n </ng-template>\n</a>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-button-link{width:-moz-fit-content;width:fit-content;display:flex;align-items:center;justify-content:center;padding:.375rem 1rem;border-radius:.25rem;text-align:center;text-decoration:none;transition:background-color .25s ease-in-out;border-width:.125rem;border-style:solid;font-size:.875rem}.suis-button-link--full-width{width:100%}.suis-button-link:disabled{opacity:.5}.suis-button-link:hover:not(:disabled){cursor:pointer}.suis-button-link:hover:disabled{cursor:not-allowed}.suis-button-link:focus,.suis-button-link:focus-within{outline:none}.suis-button-link--primary{background-color:#192a56;border-color:#192a56;color:#fff}.suis-button-link--primary:hover:not(:disabled){background-color:#192a56d9}.suis-button-link--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button-link--secondary{background-color:#273c75;border-color:#273c75;color:#fff}.suis-button-link--secondary:hover:not(:disabled){background-color:#273c75d9}.suis-button-link--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button-link--tertiary{background-color:#dcdde1;border-color:#dcdde1;color:#2f3640}.suis-button-link--tertiary:hover:not(:disabled){background-color:#dcdde1d9}.suis-button-link--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button-link--complementary{background-color:#f5f6fa;border-color:#f5f6fa;color:#2f3640}.suis-button-link--complementary:hover:not(:disabled){background-color:#f5f6fad9}.suis-button-link--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button-link--success{background-color:#2ed573;border-color:#2ed573;color:#fff}.suis-button-link--success:hover:not(:disabled){background-color:#2ed573d9}.suis-button-link--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button-link--warning{background-color:#ffa502;border-color:#ffa502;color:#fff}.suis-button-link--warning:hover:not(:disabled){background-color:#ffa502d9}.suis-button-link--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button-link--danger{background-color:#ff4757;border-color:#ff4757;color:#fff}.suis-button-link--danger:hover:not(:disabled){background-color:#ff4757d9}.suis-button-link--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"] }]
|
|
320
314
|
}], propDecorators: { routerLink: [{
|
|
321
315
|
type: Input,
|
|
322
316
|
args: [{ required: true }]
|
|
@@ -332,11 +326,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
332
326
|
|
|
333
327
|
class SuisButtonOutlinedComponent extends SuisButtonBase {
|
|
334
328
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisButtonOutlinedComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
335
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisButtonOutlinedComponent, isStandalone: true, selector: "suis-button-outlined", usesInheritance: true, ngImport: i0, template: "<button\n class=\"suis-button-outlined\"\n [class.suis-button--full-width]=\"fullWidth\"\n [ngClass]=\"'suis-button-outlined' | suisNgClass : color\"\n [attr.disabled]=\"disabled || loading ? true : undefined\"\n [attr.tabindex]=\"disabled || loading ? -1 : 0\"\n [attr.type]=\"type\"\n (click)=\"onClick()\"\n>\n <ng-container *ngIf=\"!loading; else spinner\">\n <ng-content></ng-content>\n </ng-container>\n <ng-template #spinner>\n <suis-spinner size=\"xs\" [color]=\"color\"></suis-spinner>\n </ng-template>\n</button>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-button-outlined{width:-moz-fit-content;width:fit-content;display:flex;align-items:center;justify-content:center;padding:.375rem 1rem;border-radius:.25rem;text-align:center;text-decoration:none;transition:background-color .25s ease-in-out;font-size:.875rem;border-width:.125rem;border-style:solid;background-color:transparent}.suis-button-outlined--full-width{width:100%}.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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }, { kind: "component", type: SuisSpinnerComponent, selector: "suis-spinner", inputs: ["size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
329
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisButtonOutlinedComponent, isStandalone: true, selector: "suis-button-outlined", usesInheritance: true, ngImport: i0, template: "<button\n class=\"suis-button-outlined\"\n [class.suis-button--full-width]=\"fullWidth\"\n [ngClass]=\"'suis-button-outlined' | suisNgClass : color\"\n [attr.disabled]=\"disabled || loading ? true : undefined\"\n [attr.tabindex]=\"disabled || loading ? -1 : 0\"\n [attr.type]=\"type\"\n (click)=\"onClick()\"\n>\n <ng-container *ngIf=\"!loading; else spinner\">\n <ng-content></ng-content>\n </ng-container>\n <ng-template #spinner>\n <suis-spinner size=\"xs\" [color]=\"color\"></suis-spinner>\n </ng-template>\n</button>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-button-outlined{width:-moz-fit-content;width:fit-content;display:flex;align-items:center;justify-content:center;padding:.375rem 1rem;border-radius:.25rem;text-align:center;text-decoration:none;transition:background-color .25s ease-in-out;font-size:.875rem;border-width:.125rem;border-style:solid;background-color:transparent}.suis-button-outlined--full-width{width:100%}.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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }, { kind: "component", type: SuisSpinnerComponent, selector: "suis-spinner", inputs: ["size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
336
330
|
}
|
|
337
331
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisButtonOutlinedComponent, decorators: [{
|
|
338
332
|
type: Component,
|
|
339
|
-
args: [{ selector: 'suis-button-outlined', standalone: true, imports: [CommonModule, SuisNgClassPipe, SuisSpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n class=\"suis-button-outlined\"\n [class.suis-button--full-width]=\"fullWidth\"\n [ngClass]=\"'suis-button-outlined' | suisNgClass : color\"\n [attr.disabled]=\"disabled || loading ? true : undefined\"\n [attr.tabindex]=\"disabled || loading ? -1 : 0\"\n [attr.type]=\"type\"\n (click)=\"onClick()\"\n>\n <ng-container *ngIf=\"!loading; else spinner\">\n <ng-content></ng-content>\n </ng-container>\n <ng-template #spinner>\n <suis-spinner size=\"xs\" [color]=\"color\"></suis-spinner>\n </ng-template>\n</button>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-button-outlined{width:-moz-fit-content;width:fit-content;display:flex;align-items:center;justify-content:center;padding:.375rem 1rem;border-radius:.25rem;text-align:center;text-decoration:none;transition:background-color .25s ease-in-out;font-size:.875rem;border-width:.125rem;border-style:solid;background-color:transparent}.suis-button-outlined--full-width{width:100%}.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"] }]
|
|
333
|
+
args: [{ selector: 'suis-button-outlined', standalone: true, imports: [CommonModule, SuisNgClassPipe, SuisSpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n class=\"suis-button-outlined\"\n [class.suis-button--full-width]=\"fullWidth\"\n [ngClass]=\"'suis-button-outlined' | suisNgClass : color\"\n [attr.disabled]=\"disabled || loading ? true : undefined\"\n [attr.tabindex]=\"disabled || loading ? -1 : 0\"\n [attr.type]=\"type\"\n (click)=\"onClick()\"\n>\n <ng-container *ngIf=\"!loading; else spinner\">\n <ng-content></ng-content>\n </ng-container>\n <ng-template #spinner>\n <suis-spinner size=\"xs\" [color]=\"color\"></suis-spinner>\n </ng-template>\n</button>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-button-outlined{width:-moz-fit-content;width:fit-content;display:flex;align-items:center;justify-content:center;padding:.375rem 1rem;border-radius:.25rem;text-align:center;text-decoration:none;transition:background-color .25s ease-in-out;font-size:.875rem;border-width:.125rem;border-style:solid;background-color:transparent}.suis-button-outlined--full-width{width:100%}.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"] }]
|
|
340
334
|
}] });
|
|
341
335
|
|
|
342
336
|
class SuisChipComponent {
|
|
@@ -365,11 +359,11 @@ class SuisChipComponent {
|
|
|
365
359
|
this.remove.emit();
|
|
366
360
|
}
|
|
367
361
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
368
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisChipComponent, isStandalone: true, selector: "suis-chip", inputs: { color: "color", iconColor: "iconColor", removable: "removable" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"suis-chip\" [ngClass]=\"'suis-chip' | suisNgClass : color\">\n <ng-content></ng-content>\n <button\n *ngIf=\"removable\"\n class=\"suis-chip__remove\"\n type=\"button\"\n (click)=\"onRemove()\"\n >\n <suis-icon\n [color]=\"iconColor\"\n [type]=\"SuisIconType.CROSS\"\n [pointer]=\"true\"\n [size]=\"'md'\"\n ></suis-icon>\n </button>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-chip{display:flex;align-items:center;justify-content:center;width:-moz-fit-content;width:fit-content;border-radius:1rem;font-size:.875rem;padding:.25rem .5rem;color:#fff}.suis-chip--primary{background-color:#192a56}.suis-chip--secondary{background-color:#273c75}.suis-chip--tertiary{background-color:#dcdde1}.suis-chip--complementary{background-color:#f5f6fa}.suis-chip--success{background-color:#2ed573}.suis-chip--warning{background-color:#ffa502}.suis-chip--danger{background-color:#ff4757}.suis-chip--white{background-color:#fff}.suis-chip--gray{background-color:#bcbcbc}.suis-chip--dark{background-color:#000}.suis-chip__remove{border:none;background-color:transparent}.suis-chip--tertiary,.suis-chip--complementary,.suis-chip--white{color:#2f3640}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
362
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisChipComponent, isStandalone: true, selector: "suis-chip", inputs: { color: "color", iconColor: "iconColor", removable: "removable" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"suis-chip\" [ngClass]=\"'suis-chip' | suisNgClass : color\">\n <ng-content></ng-content>\n <button\n *ngIf=\"removable\"\n class=\"suis-chip__remove\"\n type=\"button\"\n (click)=\"onRemove()\"\n >\n <suis-icon\n [color]=\"iconColor\"\n [type]=\"SuisIconType.CROSS\"\n [pointer]=\"true\"\n [size]=\"'md'\"\n ></suis-icon>\n </button>\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-chip{display:flex;align-items:center;justify-content:center;width:-moz-fit-content;width:fit-content;border-radius:1rem;font-size:.875rem;padding:.25rem .5rem;color:#fff}.suis-chip--primary{background-color:#192a56}.suis-chip--secondary{background-color:#273c75}.suis-chip--tertiary{background-color:#dcdde1}.suis-chip--complementary{background-color:#f5f6fa}.suis-chip--success{background-color:#2ed573}.suis-chip--warning{background-color:#ffa502}.suis-chip--danger{background-color:#ff4757}.suis-chip--white{background-color:#fff}.suis-chip--gray{background-color:#bcbcbc}.suis-chip--dark{background-color:#000}.suis-chip__remove{border:none;background-color:transparent}.suis-chip--tertiary,.suis-chip--complementary,.suis-chip--white{color:#2f3640}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
369
363
|
}
|
|
370
364
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisChipComponent, decorators: [{
|
|
371
365
|
type: Component,
|
|
372
|
-
args: [{ selector: 'suis-chip', standalone: true, imports: [CommonModule, SuisIconComponent, SuisNgClassPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-chip\" [ngClass]=\"'suis-chip' | suisNgClass : color\">\n <ng-content></ng-content>\n <button\n *ngIf=\"removable\"\n class=\"suis-chip__remove\"\n type=\"button\"\n (click)=\"onRemove()\"\n >\n <suis-icon\n [color]=\"iconColor\"\n [type]=\"SuisIconType.CROSS\"\n [pointer]=\"true\"\n [size]=\"'md'\"\n ></suis-icon>\n </button>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-chip{display:flex;align-items:center;justify-content:center;width:-moz-fit-content;width:fit-content;border-radius:1rem;font-size:.875rem;padding:.25rem .5rem;color:#fff}.suis-chip--primary{background-color:#192a56}.suis-chip--secondary{background-color:#273c75}.suis-chip--tertiary{background-color:#dcdde1}.suis-chip--complementary{background-color:#f5f6fa}.suis-chip--success{background-color:#2ed573}.suis-chip--warning{background-color:#ffa502}.suis-chip--danger{background-color:#ff4757}.suis-chip--white{background-color:#fff}.suis-chip--gray{background-color:#bcbcbc}.suis-chip--dark{background-color:#000}.suis-chip__remove{border:none;background-color:transparent}.suis-chip--tertiary,.suis-chip--complementary,.suis-chip--white{color:#2f3640}\n"] }]
|
|
366
|
+
args: [{ selector: 'suis-chip', standalone: true, imports: [CommonModule, SuisIconComponent, SuisNgClassPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-chip\" [ngClass]=\"'suis-chip' | suisNgClass : color\">\n <ng-content></ng-content>\n <button\n *ngIf=\"removable\"\n class=\"suis-chip__remove\"\n type=\"button\"\n (click)=\"onRemove()\"\n >\n <suis-icon\n [color]=\"iconColor\"\n [type]=\"SuisIconType.CROSS\"\n [pointer]=\"true\"\n [size]=\"'md'\"\n ></suis-icon>\n </button>\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-chip{display:flex;align-items:center;justify-content:center;width:-moz-fit-content;width:fit-content;border-radius:1rem;font-size:.875rem;padding:.25rem .5rem;color:#fff}.suis-chip--primary{background-color:#192a56}.suis-chip--secondary{background-color:#273c75}.suis-chip--tertiary{background-color:#dcdde1}.suis-chip--complementary{background-color:#f5f6fa}.suis-chip--success{background-color:#2ed573}.suis-chip--warning{background-color:#ffa502}.suis-chip--danger{background-color:#ff4757}.suis-chip--white{background-color:#fff}.suis-chip--gray{background-color:#bcbcbc}.suis-chip--dark{background-color:#000}.suis-chip__remove{border:none;background-color:transparent}.suis-chip--tertiary,.suis-chip--complementary,.suis-chip--white{color:#2f3640}\n"] }]
|
|
373
367
|
}], propDecorators: { color: [{
|
|
374
368
|
type: Input
|
|
375
369
|
}], iconColor: [{
|
|
@@ -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 {
|
|
@@ -514,7 +500,7 @@ class SuisInputTextComponent extends SuisInputBase {
|
|
|
514
500
|
multi: true,
|
|
515
501
|
useExisting: forwardRef(() => SuisInputTextComponent),
|
|
516
502
|
},
|
|
517
|
-
], usesInheritance: true, ngImport: i0, template: "<input\n class=\"suis-input-text\"\n [class.suis-input-text--invalid]=\"invalid\"\n [type]=\"type\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n (keydown.enter)=\"onEnter()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-input-text{width:100%;background-color:#fff;box-shadow:0 2px 5px #
|
|
503
|
+
], usesInheritance: true, ngImport: i0, template: "<input\n class=\"suis-input-text\"\n [class.suis-input-text--invalid]=\"invalid\"\n [type]=\"type\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n (keydown.enter)=\"onEnter()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-input-text{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000040;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem}.suis-input-text:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-text--invalid{box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
518
504
|
}
|
|
519
505
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputTextComponent, decorators: [{
|
|
520
506
|
type: Component,
|
|
@@ -524,7 +510,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
524
510
|
multi: true,
|
|
525
511
|
useExisting: forwardRef(() => SuisInputTextComponent),
|
|
526
512
|
},
|
|
527
|
-
], template: "<input\n class=\"suis-input-text\"\n [class.suis-input-text--invalid]=\"invalid\"\n [type]=\"type\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n (keydown.enter)=\"onEnter()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-input-text{width:100%;background-color:#fff;box-shadow:0 2px 5px #
|
|
513
|
+
], template: "<input\n class=\"suis-input-text\"\n [class.suis-input-text--invalid]=\"invalid\"\n [type]=\"type\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n (keydown.enter)=\"onEnter()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-input-text{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000040;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem}.suis-input-text:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-text--invalid{box-shadow:0 2px 5px #ff4757bf}\n"] }]
|
|
528
514
|
}], propDecorators: { type: [{
|
|
529
515
|
type: Input
|
|
530
516
|
}], placeholder: [{
|
|
@@ -585,7 +571,7 @@ class SuisInputChipsComponent extends SuisInputBase {
|
|
|
585
571
|
multi: true,
|
|
586
572
|
useExisting: forwardRef(() => SuisInputChipsComponent),
|
|
587
573
|
},
|
|
588
|
-
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-input-chips\">\n <div #input class=\"suis-input-chips__input\">\n <suis-input-text\n [formControl]=\"inputControl\"\n [readonly]=\"readonly\"\n [invalid]=\"invalid\"\n [placeholder]=\"placeholder\"\n (touched)=\"onTouch()\"\n (enterPressed)=\"submitValue()\"\n ></suis-input-text>\n </div>\n <div *ngIf=\"value.length\" class=\"suis-input-chips__chips\">\n <suis-chip\n [removable]=\"readonly ? false : true\"\n [color]=\"chipColor\"\n [iconColor]=\"chipIconColor\"\n (remove)=\"removeItem(item)\"\n *ngFor=\"let item of value\"\n >\n {{ item }}\n </suis-chip>\n </div>\n</div>\n", styles: [".suis-input-chips__chips{margin-top:.375rem;display:flex;flex-wrap:wrap}.suis-input-chips__chips suis-chip:not(:last-child){margin-right:.25rem}\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: 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: SuisChipComponent, selector: "suis-chip", inputs: ["color", "iconColor", "removable"], outputs: ["remove"] }, { kind: "component", type: SuisInputTextComponent, selector: "suis-input-text", inputs: ["type", "placeholder"], outputs: ["enterPressed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
574
|
+
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-input-chips\">\n <div #input class=\"suis-input-chips__input\">\n <suis-input-text\n [formControl]=\"inputControl\"\n [readonly]=\"readonly\"\n [invalid]=\"invalid\"\n [placeholder]=\"placeholder\"\n (touched)=\"onTouch()\"\n (enterPressed)=\"submitValue()\"\n ></suis-input-text>\n </div>\n <div *ngIf=\"value.length\" class=\"suis-input-chips__chips\">\n <suis-chip\n [removable]=\"readonly ? false : true\"\n [color]=\"chipColor\"\n [iconColor]=\"chipIconColor\"\n (remove)=\"removeItem(item)\"\n *ngFor=\"let item of value\"\n >\n {{ item }}\n </suis-chip>\n </div>\n</div>\n", styles: [":host{display:block}.suis-input-chips__chips{margin-top:.375rem;display:flex;flex-wrap:wrap}.suis-input-chips__chips suis-chip:not(:last-child){margin-right:.25rem}\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: 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: SuisChipComponent, selector: "suis-chip", inputs: ["color", "iconColor", "removable"], outputs: ["remove"] }, { kind: "component", type: SuisInputTextComponent, selector: "suis-input-text", inputs: ["type", "placeholder"], outputs: ["enterPressed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
589
575
|
}
|
|
590
576
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputChipsComponent, decorators: [{
|
|
591
577
|
type: Component,
|
|
@@ -600,7 +586,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
600
586
|
multi: true,
|
|
601
587
|
useExisting: forwardRef(() => SuisInputChipsComponent),
|
|
602
588
|
},
|
|
603
|
-
], template: "<div class=\"suis-input-chips\">\n <div #input class=\"suis-input-chips__input\">\n <suis-input-text\n [formControl]=\"inputControl\"\n [readonly]=\"readonly\"\n [invalid]=\"invalid\"\n [placeholder]=\"placeholder\"\n (touched)=\"onTouch()\"\n (enterPressed)=\"submitValue()\"\n ></suis-input-text>\n </div>\n <div *ngIf=\"value.length\" class=\"suis-input-chips__chips\">\n <suis-chip\n [removable]=\"readonly ? false : true\"\n [color]=\"chipColor\"\n [iconColor]=\"chipIconColor\"\n (remove)=\"removeItem(item)\"\n *ngFor=\"let item of value\"\n >\n {{ item }}\n </suis-chip>\n </div>\n</div>\n", styles: [".suis-input-chips__chips{margin-top:.375rem;display:flex;flex-wrap:wrap}.suis-input-chips__chips suis-chip:not(:last-child){margin-right:.25rem}\n"] }]
|
|
589
|
+
], template: "<div class=\"suis-input-chips\">\n <div #input class=\"suis-input-chips__input\">\n <suis-input-text\n [formControl]=\"inputControl\"\n [readonly]=\"readonly\"\n [invalid]=\"invalid\"\n [placeholder]=\"placeholder\"\n (touched)=\"onTouch()\"\n (enterPressed)=\"submitValue()\"\n ></suis-input-text>\n </div>\n <div *ngIf=\"value.length\" class=\"suis-input-chips__chips\">\n <suis-chip\n [removable]=\"readonly ? false : true\"\n [color]=\"chipColor\"\n [iconColor]=\"chipIconColor\"\n (remove)=\"removeItem(item)\"\n *ngFor=\"let item of value\"\n >\n {{ item }}\n </suis-chip>\n </div>\n</div>\n", styles: [":host{display:block}.suis-input-chips__chips{margin-top:.375rem;display:flex;flex-wrap:wrap}.suis-input-chips__chips suis-chip:not(:last-child){margin-right:.25rem}\n"] }]
|
|
604
590
|
}], propDecorators: { inputEl: [{
|
|
605
591
|
type: ViewChild,
|
|
606
592
|
args: ['input']
|
|
@@ -742,7 +728,7 @@ class SuisInputNumberComponent extends SuisInputBase {
|
|
|
742
728
|
multi: true,
|
|
743
729
|
useExisting: forwardRef(() => SuisInputNumberComponent),
|
|
744
730
|
},
|
|
745
|
-
], usesInheritance: true, ngImport: i0, template: "<input\n class=\"suis-input-number\"\n [class.suis-input-number--invalid]=\"invalid\"\n type=\"number\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-input-number{width:100%;background-color:#fff;box-shadow:0 2px 5px #
|
|
731
|
+
], usesInheritance: true, ngImport: i0, template: "<input\n class=\"suis-input-number\"\n [class.suis-input-number--invalid]=\"invalid\"\n type=\"number\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-input-number{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000040;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;-moz-appearance:textfield}.suis-input-number:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-number--invalid{box-shadow:0 2px 5px #ff4757bf}.suis-input-number::-webkit-outer-spin-button,.suis-input-number::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
746
732
|
}
|
|
747
733
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputNumberComponent, decorators: [{
|
|
748
734
|
type: Component,
|
|
@@ -752,7 +738,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
752
738
|
multi: true,
|
|
753
739
|
useExisting: forwardRef(() => SuisInputNumberComponent),
|
|
754
740
|
},
|
|
755
|
-
], template: "<input\n class=\"suis-input-number\"\n [class.suis-input-number--invalid]=\"invalid\"\n type=\"number\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-input-number{width:100%;background-color:#fff;box-shadow:0 2px 5px #
|
|
741
|
+
], template: "<input\n class=\"suis-input-number\"\n [class.suis-input-number--invalid]=\"invalid\"\n type=\"number\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-input-number{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000040;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;-moz-appearance:textfield}.suis-input-number:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-number--invalid{box-shadow:0 2px 5px #ff4757bf}.suis-input-number::-webkit-outer-spin-button,.suis-input-number::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
|
|
756
742
|
}], propDecorators: { placeholder: [{
|
|
757
743
|
type: Input
|
|
758
744
|
}] } });
|
|
@@ -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 {
|
|
@@ -868,7 +848,7 @@ class SuisNavigationGroupComponent {
|
|
|
868
848
|
return `${item.label}-${index}`;
|
|
869
849
|
}
|
|
870
850
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisNavigationGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
871
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisNavigationGroupComponent, isStandalone: true, selector: "suis-navigation-group", inputs: { item: "item", templateRef: "templateRef", expanded: "expanded", expandable: "expandable" }, ngImport: i0, template: "<div *ngIf=\"item\" class=\"suis-navigation-group\">\n <div class=\"suis-navigation-group__header\">\n <suis-navigation-group-item\n [item]=\"item\"\n [templateRef]=\"templateRef\"\n [expandable]=\"expandable && !!item.children\"\n [(expanded)]=\"expanded\"\n ></suis-navigation-group-item>\n </div>\n <div *ngIf=\"expanded\" class=\"suis-navigation-group__children\">\n <suis-navigation-item\n *ngFor=\"let childItem of item.children; trackBy: itemTrackBy\"\n [item]=\"childItem\"\n [templateRef]=\"templateRef\"\n ></suis-navigation-item>\n </div>\n</div>\n", styles: [".suis-navigation-group__header{display:flex;justify-content:space-between}\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: "component", type: SuisNavigationItemComponent, selector: "suis-navigation-item", inputs: ["item", "templateRef"] }, { kind: "component", type: SuisNavigationGroupItemComponent, selector: "suis-navigation-group-item", inputs: ["item", "templateRef", "expanded", "expandable"], outputs: ["expandedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
851
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisNavigationGroupComponent, isStandalone: true, selector: "suis-navigation-group", inputs: { item: "item", templateRef: "templateRef", expanded: "expanded", expandable: "expandable" }, ngImport: i0, template: "<div *ngIf=\"item\" class=\"suis-navigation-group\">\n <div class=\"suis-navigation-group__header\">\n <suis-navigation-group-item\n [item]=\"item\"\n [templateRef]=\"templateRef\"\n [expandable]=\"expandable && !!item.children\"\n [(expanded)]=\"expanded\"\n ></suis-navigation-group-item>\n </div>\n <div *ngIf=\"expanded\" class=\"suis-navigation-group__children\">\n <suis-navigation-item\n *ngFor=\"let childItem of item.children; trackBy: itemTrackBy\"\n [item]=\"childItem\"\n [templateRef]=\"templateRef\"\n ></suis-navigation-item>\n </div>\n</div>\n", styles: [":host{display:block}.suis-navigation-group__header{display:flex;justify-content:space-between}\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: "component", type: SuisNavigationItemComponent, selector: "suis-navigation-item", inputs: ["item", "templateRef"] }, { kind: "component", type: SuisNavigationGroupItemComponent, selector: "suis-navigation-group-item", inputs: ["item", "templateRef", "expanded", "expandable"], outputs: ["expandedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
872
852
|
}
|
|
873
853
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisNavigationGroupComponent, decorators: [{
|
|
874
854
|
type: Component,
|
|
@@ -877,7 +857,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
877
857
|
RouterModule,
|
|
878
858
|
SuisNavigationItemComponent,
|
|
879
859
|
SuisNavigationGroupItemComponent,
|
|
880
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"item\" class=\"suis-navigation-group\">\n <div class=\"suis-navigation-group__header\">\n <suis-navigation-group-item\n [item]=\"item\"\n [templateRef]=\"templateRef\"\n [expandable]=\"expandable && !!item.children\"\n [(expanded)]=\"expanded\"\n ></suis-navigation-group-item>\n </div>\n <div *ngIf=\"expanded\" class=\"suis-navigation-group__children\">\n <suis-navigation-item\n *ngFor=\"let childItem of item.children; trackBy: itemTrackBy\"\n [item]=\"childItem\"\n [templateRef]=\"templateRef\"\n ></suis-navigation-item>\n </div>\n</div>\n", styles: [".suis-navigation-group__header{display:flex;justify-content:space-between}\n"] }]
|
|
860
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"item\" class=\"suis-navigation-group\">\n <div class=\"suis-navigation-group__header\">\n <suis-navigation-group-item\n [item]=\"item\"\n [templateRef]=\"templateRef\"\n [expandable]=\"expandable && !!item.children\"\n [(expanded)]=\"expanded\"\n ></suis-navigation-group-item>\n </div>\n <div *ngIf=\"expanded\" class=\"suis-navigation-group__children\">\n <suis-navigation-item\n *ngFor=\"let childItem of item.children; trackBy: itemTrackBy\"\n [item]=\"childItem\"\n [templateRef]=\"templateRef\"\n ></suis-navigation-item>\n </div>\n</div>\n", styles: [":host{display:block}.suis-navigation-group__header{display:flex;justify-content:space-between}\n"] }]
|
|
881
861
|
}], propDecorators: { item: [{
|
|
882
862
|
type: Input
|
|
883
863
|
}], templateRef: [{
|
|
@@ -908,11 +888,11 @@ class SuisNavigationComponent {
|
|
|
908
888
|
return `${groupItem.label}-${index}`;
|
|
909
889
|
}
|
|
910
890
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
911
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisNavigationComponent, isStandalone: true, selector: "suis-navigation", inputs: { items: "items", expandedGroups: "expandedGroups", expandable: "expandable" }, queries: [{ propertyName: "suisNavigationItem", first: true, predicate: SuisNavigationItemDirective, descendants: true }], ngImport: i0, template: "<div class=\"suis-navigation\">\n <suis-navigation-group\n *ngFor=\"let groupItem of items; trackBy: groupItemTrackBy\"\n [item]=\"groupItem\"\n [templateRef]=\"suisNavigationItem?.templateRef\"\n [expanded]=\"expandedGroups\"\n [expandable]=\"expandable\"\n ></suis-navigation-group>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-navigation{width:100%;min-width:15rem;max-width:15rem;background-color:#192a56;color:#fff;height:100%;min-height:100vh;max-height:100vh;overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SuisNavigationGroupComponent, selector: "suis-navigation-group", inputs: ["item", "templateRef", "expanded", "expandable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
891
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisNavigationComponent, isStandalone: true, selector: "suis-navigation", inputs: { items: "items", expandedGroups: "expandedGroups", expandable: "expandable" }, queries: [{ propertyName: "suisNavigationItem", first: true, predicate: SuisNavigationItemDirective, descendants: true }], ngImport: i0, template: "<div class=\"suis-navigation\">\n <suis-navigation-group\n *ngFor=\"let groupItem of items; trackBy: groupItemTrackBy\"\n [item]=\"groupItem\"\n [templateRef]=\"suisNavigationItem?.templateRef\"\n [expanded]=\"expandedGroups\"\n [expandable]=\"expandable\"\n ></suis-navigation-group>\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-navigation{width:100%;min-width:15rem;max-width:15rem;background-color:#192a56;color:#fff;height:100%;min-height:100vh;max-height:100vh;overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SuisNavigationGroupComponent, selector: "suis-navigation-group", inputs: ["item", "templateRef", "expanded", "expandable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
912
892
|
}
|
|
913
893
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisNavigationComponent, decorators: [{
|
|
914
894
|
type: Component,
|
|
915
|
-
args: [{ selector: 'suis-navigation', standalone: true, imports: [CommonModule, SuisNavigationGroupComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-navigation\">\n <suis-navigation-group\n *ngFor=\"let groupItem of items; trackBy: groupItemTrackBy\"\n [item]=\"groupItem\"\n [templateRef]=\"suisNavigationItem?.templateRef\"\n [expanded]=\"expandedGroups\"\n [expandable]=\"expandable\"\n ></suis-navigation-group>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-navigation{width:100%;min-width:15rem;max-width:15rem;background-color:#192a56;color:#fff;height:100%;min-height:100vh;max-height:100vh;overflow-y:auto}\n"] }]
|
|
895
|
+
args: [{ selector: 'suis-navigation', standalone: true, imports: [CommonModule, SuisNavigationGroupComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-navigation\">\n <suis-navigation-group\n *ngFor=\"let groupItem of items; trackBy: groupItemTrackBy\"\n [item]=\"groupItem\"\n [templateRef]=\"suisNavigationItem?.templateRef\"\n [expanded]=\"expandedGroups\"\n [expandable]=\"expandable\"\n ></suis-navigation-group>\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-navigation{width:100%;min-width:15rem;max-width:15rem;background-color:#192a56;color:#fff;height:100%;min-height:100vh;max-height:100vh;overflow-y:auto}\n"] }]
|
|
916
896
|
}], propDecorators: { suisNavigationItem: [{
|
|
917
897
|
type: ContentChild,
|
|
918
898
|
args: [SuisNavigationItemDirective]
|
|
@@ -924,6 +904,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
924
904
|
type: Input
|
|
925
905
|
}] } });
|
|
926
906
|
|
|
907
|
+
class SuisNavigationModule {
|
|
908
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
909
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: SuisNavigationModule, imports: [SuisNavigationComponent, SuisNavigationItemDirective], exports: [SuisNavigationComponent, SuisNavigationItemDirective] }); }
|
|
910
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisNavigationModule, imports: [SuisNavigationComponent] }); }
|
|
911
|
+
}
|
|
912
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisNavigationModule, decorators: [{
|
|
913
|
+
type: NgModule,
|
|
914
|
+
args: [{
|
|
915
|
+
imports: [SuisNavigationComponent, SuisNavigationItemDirective],
|
|
916
|
+
exports: [SuisNavigationComponent, SuisNavigationItemDirective],
|
|
917
|
+
}]
|
|
918
|
+
}] });
|
|
919
|
+
|
|
927
920
|
class SuisNotificationComponent {
|
|
928
921
|
constructor() {
|
|
929
922
|
/** @internal */
|
|
@@ -937,11 +930,11 @@ class SuisNotificationComponent {
|
|
|
937
930
|
this.closed.emit();
|
|
938
931
|
}
|
|
939
932
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
940
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisNotificationComponent, isStandalone: true, selector: "suis-notification", inputs: { notification: "notification" }, outputs: { closed: "closed" }, ngImport: i0, template: "<div\n *ngIf=\"notification\"\n class=\"suis-notification\"\n [ngClass]=\"'suis-notification' | suisNgClass : notification.type\"\n>\n <button class=\"suis-notification__close\" type=\"button\" (click)=\"onClose()\">\n <suis-icon\n [type]=\"SuisIconType.CROSS\"\n [color]=\"'white'\"\n [size]=\"'lg'\"\n ></suis-icon>\n </button>\n <div class=\"suis-notification__message\">\n {{ notification.message }}\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-notification{min-width:15rem;max-width:15rem;padding:1rem;border-radius:.25rem;color:#fff;position:relative}.suis-notification--success{background-color:#2ed573}.suis-notification--warning{background-color:#ffa502}.suis-notification--danger{background-color:#ff4757}.suis-notification__close{position:absolute;top:0;right:0;width:100%;padding:.75rem;background-color:transparent;border:none;cursor:pointer;display:flex;justify-content:flex-end}.suis-notification__message{margin-top:1.25rem;text-align:justify}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
933
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisNotificationComponent, isStandalone: true, selector: "suis-notification", inputs: { notification: "notification" }, outputs: { closed: "closed" }, ngImport: i0, template: "<div\n *ngIf=\"notification\"\n class=\"suis-notification\"\n [ngClass]=\"'suis-notification' | suisNgClass : notification.type\"\n>\n <button class=\"suis-notification__close\" type=\"button\" (click)=\"onClose()\">\n <suis-icon\n [type]=\"SuisIconType.CROSS\"\n [color]=\"'white'\"\n [size]=\"'lg'\"\n ></suis-icon>\n </button>\n <div class=\"suis-notification__message\">\n {{ notification.message }}\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-notification{min-width:15rem;max-width:15rem;padding:1rem;border-radius:.25rem;color:#fff;position:relative}.suis-notification--success{background-color:#2ed573}.suis-notification--warning{background-color:#ffa502}.suis-notification--danger{background-color:#ff4757}.suis-notification__close{position:absolute;top:0;right:0;width:100%;padding:.75rem;background-color:transparent;border:none;cursor:pointer;display:flex;justify-content:flex-end}.suis-notification__message{margin-top:1.25rem;text-align:justify}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
941
934
|
}
|
|
942
935
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisNotificationComponent, decorators: [{
|
|
943
936
|
type: Component,
|
|
944
|
-
args: [{ selector: 'suis-notification', standalone: true, imports: [CommonModule, SuisNgClassPipe, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"notification\"\n class=\"suis-notification\"\n [ngClass]=\"'suis-notification' | suisNgClass : notification.type\"\n>\n <button class=\"suis-notification__close\" type=\"button\" (click)=\"onClose()\">\n <suis-icon\n [type]=\"SuisIconType.CROSS\"\n [color]=\"'white'\"\n [size]=\"'lg'\"\n ></suis-icon>\n </button>\n <div class=\"suis-notification__message\">\n {{ notification.message }}\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-notification{min-width:15rem;max-width:15rem;padding:1rem;border-radius:.25rem;color:#fff;position:relative}.suis-notification--success{background-color:#2ed573}.suis-notification--warning{background-color:#ffa502}.suis-notification--danger{background-color:#ff4757}.suis-notification__close{position:absolute;top:0;right:0;width:100%;padding:.75rem;background-color:transparent;border:none;cursor:pointer;display:flex;justify-content:flex-end}.suis-notification__message{margin-top:1.25rem;text-align:justify}\n"] }]
|
|
937
|
+
args: [{ selector: 'suis-notification', standalone: true, imports: [CommonModule, SuisNgClassPipe, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"notification\"\n class=\"suis-notification\"\n [ngClass]=\"'suis-notification' | suisNgClass : notification.type\"\n>\n <button class=\"suis-notification__close\" type=\"button\" (click)=\"onClose()\">\n <suis-icon\n [type]=\"SuisIconType.CROSS\"\n [color]=\"'white'\"\n [size]=\"'lg'\"\n ></suis-icon>\n </button>\n <div class=\"suis-notification__message\">\n {{ notification.message }}\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-notification{min-width:15rem;max-width:15rem;padding:1rem;border-radius:.25rem;color:#fff;position:relative}.suis-notification--success{background-color:#2ed573}.suis-notification--warning{background-color:#ffa502}.suis-notification--danger{background-color:#ff4757}.suis-notification__close{position:absolute;top:0;right:0;width:100%;padding:.75rem;background-color:transparent;border:none;cursor:pointer;display:flex;justify-content:flex-end}.suis-notification__message{margin-top:1.25rem;text-align:justify}\n"] }]
|
|
945
938
|
}], propDecorators: { notification: [{
|
|
946
939
|
type: Input,
|
|
947
940
|
args: [{ required: true }]
|
|
@@ -1139,11 +1132,11 @@ class SuisSelectOptionComponent {
|
|
|
1139
1132
|
this.clicked.emit();
|
|
1140
1133
|
}
|
|
1141
1134
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1142
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisSelectOptionComponent, isStandalone: true, selector: "suis-select-option", inputs: { option: "option", templateRef: "templateRef", selected: "selected", checkbox: "checkbox" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n class=\"suis-select-option\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"onClick()\"\n>\n <span\n class=\"suis-select-option__checkbox\"\n [class.suis-select-option__checkbox--selected]=\"selected\"\n *ngIf=\"checkbox\"\n >\n <suis-icon\n *ngIf=\"selected\"\n [bold]=\"true\"\n color=\"primary\"\n [type]=\"SuisIconType.CHECK\"\n size=\"sm\"\n ></suis-icon>\n </span>\n <span class=\"suis-select-option__label\">\n <ng-container *ngIf=\"templateRef; else label\">\n <ng-container\n *ngTemplateOutlet=\"templateRef; context: { $implicit: option }\"\n ></ng-container>\n </ng-container>\n <ng-template #label>\n {{ option?.label }}\n </ng-template>\n </span>\n</button>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-select-option{width:100%;display:flex;align-items:center;background-color:transparent;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;cursor:pointer}.suis-select-option:hover{background-color:#f5f6fa}.suis-select-option__checkbox{min-width:1rem;min-height:1rem;border:.0625rem solid #dcdde1;margin-right:.75rem;display:flex;justify-content:center;align-items:center}.suis-select-option__checkbox--selected{border:.0625rem solid #bcbcbc}.suis-select-option__label{display:flex;justify-content:left;align-items:center;text-align:left}\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"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1135
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisSelectOptionComponent, isStandalone: true, selector: "suis-select-option", inputs: { option: "option", templateRef: "templateRef", selected: "selected", checkbox: "checkbox" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n class=\"suis-select-option\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"onClick()\"\n>\n <span\n class=\"suis-select-option__checkbox\"\n [class.suis-select-option__checkbox--selected]=\"selected\"\n *ngIf=\"checkbox\"\n >\n <suis-icon\n *ngIf=\"selected\"\n [bold]=\"true\"\n color=\"primary\"\n [type]=\"SuisIconType.CHECK\"\n size=\"sm\"\n ></suis-icon>\n </span>\n <span class=\"suis-select-option__label\">\n <ng-container *ngIf=\"templateRef; else label\">\n <ng-container\n *ngTemplateOutlet=\"templateRef; context: { $implicit: option }\"\n ></ng-container>\n </ng-container>\n <ng-template #label>\n {{ option?.label }}\n </ng-template>\n </span>\n</button>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select-option{width:100%;display:flex;align-items:center;background-color:transparent;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;cursor:pointer}.suis-select-option:hover{background-color:#f5f6fa}.suis-select-option__checkbox{min-width:1rem;min-height:1rem;border:.0625rem solid #dcdde1;margin-right:.75rem;display:flex;justify-content:center;align-items:center}.suis-select-option__checkbox--selected{border:.0625rem solid #bcbcbc}.suis-select-option__label{display:flex;justify-content:left;align-items:center;text-align:left}\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"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1143
1136
|
}
|
|
1144
1137
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectOptionComponent, decorators: [{
|
|
1145
1138
|
type: Component,
|
|
1146
|
-
args: [{ selector: 'suis-select-option', standalone: true, imports: [CommonModule, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n class=\"suis-select-option\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"onClick()\"\n>\n <span\n class=\"suis-select-option__checkbox\"\n [class.suis-select-option__checkbox--selected]=\"selected\"\n *ngIf=\"checkbox\"\n >\n <suis-icon\n *ngIf=\"selected\"\n [bold]=\"true\"\n color=\"primary\"\n [type]=\"SuisIconType.CHECK\"\n size=\"sm\"\n ></suis-icon>\n </span>\n <span class=\"suis-select-option__label\">\n <ng-container *ngIf=\"templateRef; else label\">\n <ng-container\n *ngTemplateOutlet=\"templateRef; context: { $implicit: option }\"\n ></ng-container>\n </ng-container>\n <ng-template #label>\n {{ option?.label }}\n </ng-template>\n </span>\n</button>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-select-option{width:100%;display:flex;align-items:center;background-color:transparent;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;cursor:pointer}.suis-select-option:hover{background-color:#f5f6fa}.suis-select-option__checkbox{min-width:1rem;min-height:1rem;border:.0625rem solid #dcdde1;margin-right:.75rem;display:flex;justify-content:center;align-items:center}.suis-select-option__checkbox--selected{border:.0625rem solid #bcbcbc}.suis-select-option__label{display:flex;justify-content:left;align-items:center;text-align:left}\n"] }]
|
|
1139
|
+
args: [{ selector: 'suis-select-option', standalone: true, imports: [CommonModule, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n class=\"suis-select-option\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"onClick()\"\n>\n <span\n class=\"suis-select-option__checkbox\"\n [class.suis-select-option__checkbox--selected]=\"selected\"\n *ngIf=\"checkbox\"\n >\n <suis-icon\n *ngIf=\"selected\"\n [bold]=\"true\"\n color=\"primary\"\n [type]=\"SuisIconType.CHECK\"\n size=\"sm\"\n ></suis-icon>\n </span>\n <span class=\"suis-select-option__label\">\n <ng-container *ngIf=\"templateRef; else label\">\n <ng-container\n *ngTemplateOutlet=\"templateRef; context: { $implicit: option }\"\n ></ng-container>\n </ng-container>\n <ng-template #label>\n {{ option?.label }}\n </ng-template>\n </span>\n</button>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select-option{width:100%;display:flex;align-items:center;background-color:transparent;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;cursor:pointer}.suis-select-option:hover{background-color:#f5f6fa}.suis-select-option__checkbox{min-width:1rem;min-height:1rem;border:.0625rem solid #dcdde1;margin-right:.75rem;display:flex;justify-content:center;align-items:center}.suis-select-option__checkbox--selected{border:.0625rem solid #bcbcbc}.suis-select-option__label{display:flex;justify-content:left;align-items:center;text-align:left}\n"] }]
|
|
1147
1140
|
}], propDecorators: { option: [{
|
|
1148
1141
|
type: Input,
|
|
1149
1142
|
args: [{ required: true }]
|
|
@@ -1230,7 +1223,7 @@ class SuisSelectComponent extends SuisSelectBase {
|
|
|
1230
1223
|
multi: true,
|
|
1231
1224
|
useExisting: forwardRef(() => SuisSelectComponent),
|
|
1232
1225
|
},
|
|
1233
|
-
], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select\">\n <button\n type=\"button\"\n (click)=\"onExpand()\"\n class=\"suis-select__button\"\n [class.suis-select__button--invalid]=\"invalid\"\n [disabled]=\"readonly\"\n >\n <span class=\"suis-select__button__value\">\n {{ value | suisSelectLabel : options : placeholder }}\n </span>\n <span class=\"suis-select__button__actions\">\n <suis-icon\n *ngIf=\"nullable && value\"\n class=\"suis-select__button__cross\"\n [type]=\"SuisIconType.CROSS\"\n size=\"lg\"\n color=\"primary\"\n (click)=\"onClear($event)\"\n ></suis-icon>\n <suis-icon\n class=\"suis-select__button__chevron\"\n [type]=\"expanded ? SuisIconType.CHEVRON_UP : SuisIconType.CHEVRON_DOWN\"\n size=\"lg\"\n color=\"primary\"\n ></suis-icon>\n </span>\n </button>\n <div *ngIf=\"expanded\" class=\"suis-select__list\">\n <input\n *ngIf=\"search\"\n [ngModel]=\"searchPhrase\"\n (ngModelChange)=\"onSearchPhraseChange($event)\"\n class=\"suis-select__list__search\"\n type=\"search\"\n [placeholder]=\"searchPlaceholder\"\n />\n <suis-select-option\n *ngFor=\"\n let option of options\n | suisSelectSortOptions\n | suisSelectFilterOptions : searchPhrase;\n trackBy: optionTrackBy\n \"\n [option]=\"option\"\n [templateRef]=\"suisSelectOption?.templateRef\"\n [selected]=\"option.value | suisSelectIsSelected : value\"\n (clicked)=\"onSelect(option.value)\"\n ></suis-select-option>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-select{position:relative}.suis-select__button{width:100%;background-color:#fff;box-shadow:0 2px 5px #
|
|
1226
|
+
], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select\">\n <button\n type=\"button\"\n (click)=\"onExpand()\"\n class=\"suis-select__button\"\n [class.suis-select__button--invalid]=\"invalid\"\n [disabled]=\"readonly\"\n >\n <span class=\"suis-select__button__value\">\n {{ value | suisSelectLabel : options : placeholder }}\n </span>\n <span class=\"suis-select__button__actions\">\n <suis-icon\n *ngIf=\"nullable && value\"\n class=\"suis-select__button__cross\"\n [type]=\"SuisIconType.CROSS\"\n size=\"lg\"\n color=\"primary\"\n (click)=\"onClear($event)\"\n ></suis-icon>\n <suis-icon\n class=\"suis-select__button__chevron\"\n [type]=\"expanded ? SuisIconType.CHEVRON_UP : SuisIconType.CHEVRON_DOWN\"\n size=\"lg\"\n color=\"primary\"\n ></suis-icon>\n </span>\n </button>\n <div *ngIf=\"expanded\" class=\"suis-select__list\">\n <input\n *ngIf=\"search\"\n [ngModel]=\"searchPhrase\"\n (ngModelChange)=\"onSearchPhraseChange($event)\"\n class=\"suis-select__list__search\"\n type=\"search\"\n [placeholder]=\"searchPlaceholder\"\n />\n <suis-select-option\n *ngFor=\"\n let option of options\n | suisSelectSortOptions\n | suisSelectFilterOptions : searchPhrase;\n trackBy: optionTrackBy\n \"\n [option]=\"option\"\n [templateRef]=\"suisSelectOption?.templateRef\"\n [selected]=\"option.value | suisSelectIsSelected : value\"\n (clicked)=\"onSelect(option.value)\"\n ></suis-select-option>\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-select{position:relative}.suis-select__button{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000040;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;min-width:5rem;position:relative;display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem .25rem 1rem;cursor:pointer}.suis-select__button:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-select__button--invalid{box-shadow:0 2px 5px #ff4757bf}.suis-select__button__value{width:100%;text-align:left;text-overflow:ellipsis;text-wrap:nowrap;overflow:hidden}.suis-select__button__actions{margin-left:.25rem;display:flex;justify-content:right;align-items:center}.suis-select__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000040;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2rem;left:0;max-height:12.25rem;overflow-y:auto}.suis-select__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem}.suis-select__list__search:focus{outline:none}.suis-select__list::-webkit-scrollbar{width:.5rem}.suis-select__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}\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: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }, { kind: "component", type: SuisSelectOptionComponent, selector: "suis-select-option", inputs: ["option", "templateRef", "selected", "checkbox"], outputs: ["clicked"] }, { kind: "pipe", type: SuisSelectLabelPipe, name: "suisSelectLabel" }, { kind: "pipe", type: SuisSelectIsSelectedPipe, name: "suisSelectIsSelected" }, { kind: "pipe", type: SuisSelectSortOptionsPipe, name: "suisSelectSortOptions" }, { kind: "pipe", type: SuisSelectFilterOptionsPipe, name: "suisSelectFilterOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1234
1227
|
}
|
|
1235
1228
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectComponent, decorators: [{
|
|
1236
1229
|
type: Component,
|
|
@@ -1249,11 +1242,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
1249
1242
|
multi: true,
|
|
1250
1243
|
useExisting: forwardRef(() => SuisSelectComponent),
|
|
1251
1244
|
},
|
|
1252
|
-
], template: "<div class=\"suis-select\">\n <button\n type=\"button\"\n (click)=\"onExpand()\"\n class=\"suis-select__button\"\n [class.suis-select__button--invalid]=\"invalid\"\n [disabled]=\"readonly\"\n >\n <span class=\"suis-select__button__value\">\n {{ value | suisSelectLabel : options : placeholder }}\n </span>\n <span class=\"suis-select__button__actions\">\n <suis-icon\n *ngIf=\"nullable && value\"\n class=\"suis-select__button__cross\"\n [type]=\"SuisIconType.CROSS\"\n size=\"lg\"\n color=\"primary\"\n (click)=\"onClear($event)\"\n ></suis-icon>\n <suis-icon\n class=\"suis-select__button__chevron\"\n [type]=\"expanded ? SuisIconType.CHEVRON_UP : SuisIconType.CHEVRON_DOWN\"\n size=\"lg\"\n color=\"primary\"\n ></suis-icon>\n </span>\n </button>\n <div *ngIf=\"expanded\" class=\"suis-select__list\">\n <input\n *ngIf=\"search\"\n [ngModel]=\"searchPhrase\"\n (ngModelChange)=\"onSearchPhraseChange($event)\"\n class=\"suis-select__list__search\"\n type=\"search\"\n [placeholder]=\"searchPlaceholder\"\n />\n <suis-select-option\n *ngFor=\"\n let option of options\n | suisSelectSortOptions\n | suisSelectFilterOptions : searchPhrase;\n trackBy: optionTrackBy\n \"\n [option]=\"option\"\n [templateRef]=\"suisSelectOption?.templateRef\"\n [selected]=\"option.value | suisSelectIsSelected : value\"\n (clicked)=\"onSelect(option.value)\"\n ></suis-select-option>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-select{position:relative}.suis-select__button{width:100%;background-color:#fff;box-shadow:0 2px 5px #
|
|
1245
|
+
], template: "<div class=\"suis-select\">\n <button\n type=\"button\"\n (click)=\"onExpand()\"\n class=\"suis-select__button\"\n [class.suis-select__button--invalid]=\"invalid\"\n [disabled]=\"readonly\"\n >\n <span class=\"suis-select__button__value\">\n {{ value | suisSelectLabel : options : placeholder }}\n </span>\n <span class=\"suis-select__button__actions\">\n <suis-icon\n *ngIf=\"nullable && value\"\n class=\"suis-select__button__cross\"\n [type]=\"SuisIconType.CROSS\"\n size=\"lg\"\n color=\"primary\"\n (click)=\"onClear($event)\"\n ></suis-icon>\n <suis-icon\n class=\"suis-select__button__chevron\"\n [type]=\"expanded ? SuisIconType.CHEVRON_UP : SuisIconType.CHEVRON_DOWN\"\n size=\"lg\"\n color=\"primary\"\n ></suis-icon>\n </span>\n </button>\n <div *ngIf=\"expanded\" class=\"suis-select__list\">\n <input\n *ngIf=\"search\"\n [ngModel]=\"searchPhrase\"\n (ngModelChange)=\"onSearchPhraseChange($event)\"\n class=\"suis-select__list__search\"\n type=\"search\"\n [placeholder]=\"searchPlaceholder\"\n />\n <suis-select-option\n *ngFor=\"\n let option of options\n | suisSelectSortOptions\n | suisSelectFilterOptions : searchPhrase;\n trackBy: optionTrackBy\n \"\n [option]=\"option\"\n [templateRef]=\"suisSelectOption?.templateRef\"\n [selected]=\"option.value | suisSelectIsSelected : value\"\n (clicked)=\"onSelect(option.value)\"\n ></suis-select-option>\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-select{position:relative}.suis-select__button{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000040;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;min-width:5rem;position:relative;display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem .25rem 1rem;cursor:pointer}.suis-select__button:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-select__button--invalid{box-shadow:0 2px 5px #ff4757bf}.suis-select__button__value{width:100%;text-align:left;text-overflow:ellipsis;text-wrap:nowrap;overflow:hidden}.suis-select__button__actions{margin-left:.25rem;display:flex;justify-content:right;align-items:center}.suis-select__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000040;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2rem;left:0;max-height:12.25rem;overflow-y:auto}.suis-select__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem}.suis-select__list__search:focus{outline:none}.suis-select__list::-webkit-scrollbar{width:.5rem}.suis-select__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}\n"] }]
|
|
1253
1246
|
}], propDecorators: { nullable: [{
|
|
1254
1247
|
type: Input
|
|
1255
1248
|
}] } });
|
|
1256
1249
|
|
|
1250
|
+
class SuisSelectModule {
|
|
1251
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1252
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectModule, imports: [SuisSelectComponent, SuisSelectOptionDirective], exports: [SuisSelectComponent, SuisSelectOptionDirective] }); }
|
|
1253
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectModule, imports: [SuisSelectComponent] }); }
|
|
1254
|
+
}
|
|
1255
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectModule, decorators: [{
|
|
1256
|
+
type: NgModule,
|
|
1257
|
+
args: [{
|
|
1258
|
+
imports: [SuisSelectComponent, SuisSelectOptionDirective],
|
|
1259
|
+
exports: [SuisSelectComponent, SuisSelectOptionDirective],
|
|
1260
|
+
}]
|
|
1261
|
+
}] });
|
|
1262
|
+
|
|
1257
1263
|
class SuisPaginationPerPageOptionsPipe {
|
|
1258
1264
|
transform(options) {
|
|
1259
1265
|
return options.map((option) => {
|
|
@@ -1297,10 +1303,6 @@ class SuisPaginationComponent {
|
|
|
1297
1303
|
* Number of total items in data source. By default set to 0.
|
|
1298
1304
|
*/
|
|
1299
1305
|
this.totalItems = 0;
|
|
1300
|
-
/**
|
|
1301
|
-
* Adds margin top above the pagination. By default set to true.
|
|
1302
|
-
*/
|
|
1303
|
-
this.spacing = false;
|
|
1304
1306
|
/**
|
|
1305
1307
|
* Sets the of label "1 'of' 25". By default set to 'of'.
|
|
1306
1308
|
*/
|
|
@@ -1332,6 +1334,7 @@ class SuisPaginationComponent {
|
|
|
1332
1334
|
ngOnChanges(changes) {
|
|
1333
1335
|
if (changes['totalItems'] || changes['perPage']) {
|
|
1334
1336
|
this.maxPage = Math.ceil(this.totalItems / this.perPage);
|
|
1337
|
+
this.perPageControl.setValue(this.perPage);
|
|
1335
1338
|
}
|
|
1336
1339
|
}
|
|
1337
1340
|
next() {
|
|
@@ -1353,7 +1356,7 @@ class SuisPaginationComponent {
|
|
|
1353
1356
|
this.perPageChange.emit(this.perPage);
|
|
1354
1357
|
}
|
|
1355
1358
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1356
|
-
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 }); }
|
|
1357
1360
|
}
|
|
1358
1361
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisPaginationComponent, decorators: [{
|
|
1359
1362
|
type: Component,
|
|
@@ -1365,8 +1368,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
1365
1368
|
SuisPaginationPagePipe,
|
|
1366
1369
|
SuisPaginationItemsPipe,
|
|
1367
1370
|
SuisPaginationPerPageOptionsPipe,
|
|
1368
|
-
|
|
1369
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-pagination\"
|
|
1371
|
+
SuisSelectModule,
|
|
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"] }]
|
|
1370
1373
|
}], propDecorators: { page: [{
|
|
1371
1374
|
type: Input
|
|
1372
1375
|
}], perPage: [{
|
|
@@ -1375,8 +1378,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
1375
1378
|
type: Input
|
|
1376
1379
|
}], totalItems: [{
|
|
1377
1380
|
type: Input
|
|
1378
|
-
}], spacing: [{
|
|
1379
|
-
type: Input
|
|
1380
1381
|
}], ofLabel: [{
|
|
1381
1382
|
type: Input
|
|
1382
1383
|
}], itemsLabel: [{
|
|
@@ -1434,11 +1435,11 @@ class SuisProgressBarComponent {
|
|
|
1434
1435
|
}
|
|
1435
1436
|
}
|
|
1436
1437
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1437
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisProgressBarComponent, isStandalone: true, selector: "suis-progress-bar", inputs: { value: "value", color: "color", backgroundColor: "backgroundColor" }, ngImport: i0, template: "<div\n class=\"suis-progress-bar\"\n [ngClass]=\"'suis-progress-bar' | suisNgClass : backgroundColor\"\n>\n <div\n class=\"suis-progress-bar__progress\"\n [style]=\"{ width: value | suisProgressBar }\"\n [ngClass]=\"'suis-progress-bar__progress' | suisNgClass : color\"\n ></div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-progress-bar{width:100%;border-radius:1rem;height:1rem}.suis-progress-bar--primary{background-color:#192a56}.suis-progress-bar--secondary{background-color:#273c75}.suis-progress-bar--tertiary{background-color:#dcdde1}.suis-progress-bar--complementary{background-color:#f5f6fa}.suis-progress-bar--success{background-color:#2ed573}.suis-progress-bar--warning{background-color:#ffa502}.suis-progress-bar--danger{background-color:#ff4757}.suis-progress-bar--white{background-color:#fff}.suis-progress-bar--gray{background-color:#bcbcbc}.suis-progress-bar--dark{background-color:#000}.suis-progress-bar__progress{border-radius:1rem;height:1rem}.suis-progress-bar__progress--primary{background-color:#192a56}.suis-progress-bar__progress--secondary{background-color:#273c75}.suis-progress-bar__progress--tertiary{background-color:#dcdde1}.suis-progress-bar__progress--complementary{background-color:#f5f6fa}.suis-progress-bar__progress--success{background-color:#2ed573}.suis-progress-bar__progress--warning{background-color:#ffa502}.suis-progress-bar__progress--danger{background-color:#ff4757}.suis-progress-bar__progress--white{background-color:#fff}.suis-progress-bar__progress--gray{background-color:#bcbcbc}.suis-progress-bar__progress--dark{background-color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }, { kind: "pipe", type: SuisProgressBarPipe, name: "suisProgressBar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1438
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisProgressBarComponent, isStandalone: true, selector: "suis-progress-bar", inputs: { value: "value", color: "color", backgroundColor: "backgroundColor" }, ngImport: i0, template: "<div\n class=\"suis-progress-bar\"\n [ngClass]=\"'suis-progress-bar' | suisNgClass : backgroundColor\"\n>\n <div\n class=\"suis-progress-bar__progress\"\n [style]=\"{ width: value | suisProgressBar }\"\n [ngClass]=\"'suis-progress-bar__progress' | suisNgClass : color\"\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-progress-bar{width:100%;border-radius:1rem;height:1rem}.suis-progress-bar--primary{background-color:#192a56}.suis-progress-bar--secondary{background-color:#273c75}.suis-progress-bar--tertiary{background-color:#dcdde1}.suis-progress-bar--complementary{background-color:#f5f6fa}.suis-progress-bar--success{background-color:#2ed573}.suis-progress-bar--warning{background-color:#ffa502}.suis-progress-bar--danger{background-color:#ff4757}.suis-progress-bar--white{background-color:#fff}.suis-progress-bar--gray{background-color:#bcbcbc}.suis-progress-bar--dark{background-color:#000}.suis-progress-bar__progress{border-radius:1rem;height:1rem}.suis-progress-bar__progress--primary{background-color:#192a56}.suis-progress-bar__progress--secondary{background-color:#273c75}.suis-progress-bar__progress--tertiary{background-color:#dcdde1}.suis-progress-bar__progress--complementary{background-color:#f5f6fa}.suis-progress-bar__progress--success{background-color:#2ed573}.suis-progress-bar__progress--warning{background-color:#ffa502}.suis-progress-bar__progress--danger{background-color:#ff4757}.suis-progress-bar__progress--white{background-color:#fff}.suis-progress-bar__progress--gray{background-color:#bcbcbc}.suis-progress-bar__progress--dark{background-color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }, { kind: "pipe", type: SuisProgressBarPipe, name: "suisProgressBar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1438
1439
|
}
|
|
1439
1440
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisProgressBarComponent, decorators: [{
|
|
1440
1441
|
type: Component,
|
|
1441
|
-
args: [{ selector: 'suis-progress-bar', standalone: true, imports: [CommonModule, SuisNgClassPipe, SuisProgressBarPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-progress-bar\"\n [ngClass]=\"'suis-progress-bar' | suisNgClass : backgroundColor\"\n>\n <div\n class=\"suis-progress-bar__progress\"\n [style]=\"{ width: value | suisProgressBar }\"\n [ngClass]=\"'suis-progress-bar__progress' | suisNgClass : color\"\n ></div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-progress-bar{width:100%;border-radius:1rem;height:1rem}.suis-progress-bar--primary{background-color:#192a56}.suis-progress-bar--secondary{background-color:#273c75}.suis-progress-bar--tertiary{background-color:#dcdde1}.suis-progress-bar--complementary{background-color:#f5f6fa}.suis-progress-bar--success{background-color:#2ed573}.suis-progress-bar--warning{background-color:#ffa502}.suis-progress-bar--danger{background-color:#ff4757}.suis-progress-bar--white{background-color:#fff}.suis-progress-bar--gray{background-color:#bcbcbc}.suis-progress-bar--dark{background-color:#000}.suis-progress-bar__progress{border-radius:1rem;height:1rem}.suis-progress-bar__progress--primary{background-color:#192a56}.suis-progress-bar__progress--secondary{background-color:#273c75}.suis-progress-bar__progress--tertiary{background-color:#dcdde1}.suis-progress-bar__progress--complementary{background-color:#f5f6fa}.suis-progress-bar__progress--success{background-color:#2ed573}.suis-progress-bar__progress--warning{background-color:#ffa502}.suis-progress-bar__progress--danger{background-color:#ff4757}.suis-progress-bar__progress--white{background-color:#fff}.suis-progress-bar__progress--gray{background-color:#bcbcbc}.suis-progress-bar__progress--dark{background-color:#000}\n"] }]
|
|
1442
|
+
args: [{ selector: 'suis-progress-bar', standalone: true, imports: [CommonModule, SuisNgClassPipe, SuisProgressBarPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-progress-bar\"\n [ngClass]=\"'suis-progress-bar' | suisNgClass : backgroundColor\"\n>\n <div\n class=\"suis-progress-bar__progress\"\n [style]=\"{ width: value | suisProgressBar }\"\n [ngClass]=\"'suis-progress-bar__progress' | suisNgClass : color\"\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-progress-bar{width:100%;border-radius:1rem;height:1rem}.suis-progress-bar--primary{background-color:#192a56}.suis-progress-bar--secondary{background-color:#273c75}.suis-progress-bar--tertiary{background-color:#dcdde1}.suis-progress-bar--complementary{background-color:#f5f6fa}.suis-progress-bar--success{background-color:#2ed573}.suis-progress-bar--warning{background-color:#ffa502}.suis-progress-bar--danger{background-color:#ff4757}.suis-progress-bar--white{background-color:#fff}.suis-progress-bar--gray{background-color:#bcbcbc}.suis-progress-bar--dark{background-color:#000}.suis-progress-bar__progress{border-radius:1rem;height:1rem}.suis-progress-bar__progress--primary{background-color:#192a56}.suis-progress-bar__progress--secondary{background-color:#273c75}.suis-progress-bar__progress--tertiary{background-color:#dcdde1}.suis-progress-bar__progress--complementary{background-color:#f5f6fa}.suis-progress-bar__progress--success{background-color:#2ed573}.suis-progress-bar__progress--warning{background-color:#ffa502}.suis-progress-bar__progress--danger{background-color:#ff4757}.suis-progress-bar__progress--white{background-color:#fff}.suis-progress-bar__progress--gray{background-color:#bcbcbc}.suis-progress-bar__progress--dark{background-color:#000}\n"] }]
|
|
1442
1443
|
}], propDecorators: { value: [{
|
|
1443
1444
|
type: Input
|
|
1444
1445
|
}], color: [{
|
|
@@ -1539,7 +1540,7 @@ class SuisSelectMultiComponent extends SuisSelectBase {
|
|
|
1539
1540
|
multi: true,
|
|
1540
1541
|
useExisting: forwardRef(() => SuisSelectMultiComponent),
|
|
1541
1542
|
},
|
|
1542
|
-
], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select-multi\">\n <button\n type=\"button\"\n (click)=\"onExpand()\"\n class=\"suis-select-multi__button\"\n [class.suis-select-multi__button--invalid]=\"invalid\"\n [class.suis-select-multi__button--valid]=\"values.length > 0\"\n [disabled]=\"readonly\"\n >\n <span class=\"suis-select-multi__button__value\">\n <ng-container *ngIf=\"!values?.length\">\n {{ placeholder }}\n </ng-container>\n <ng-container *ngIf=\"values?.length\">\n <suis-chip\n *ngFor=\"\n let value of values | suisSelectMultiChips : options;\n let index = index\n \"\n [removable]=\"true\"\n [color]=\"chipColor\"\n [iconColor]=\"chipIconColor\"\n (remove)=\"onRemove(index)\"\n >\n {{ value }}\n </suis-chip>\n </ng-container>\n </span>\n <span class=\"suis-select-multi__button__actions\">\n <suis-icon\n *ngIf=\"values?.length\"\n class=\"suis-select-multi__button__cross\"\n [type]=\"SuisIconType.CROSS\"\n size=\"lg\"\n color=\"primary\"\n (click)=\"onClear($event)\"\n tabindex=\"0\"\n ></suis-icon>\n <suis-icon\n class=\"suis-select-multi__button__chevron\"\n [type]=\"expanded ? SuisIconType.CHEVRON_UP : SuisIconType.CHEVRON_DOWN\"\n size=\"lg\"\n color=\"primary\"\n tabindex=\"0\"\n ></suis-icon>\n </span>\n </button>\n <div *ngIf=\"expanded\" class=\"suis-select-multi__list\">\n <input\n *ngIf=\"search\"\n [ngModel]=\"searchPhrase\"\n (ngModelChange)=\"onSearchPhraseChange($event)\"\n class=\"suis-select-multi__list__search\"\n type=\"search\"\n [placeholder]=\"searchPlaceholder\"\n />\n <suis-select-option\n *ngFor=\"\n let option of options\n | suisSelectSortOptions\n | suisSelectFilterOptions : searchPhrase;\n trackBy: optionTrackBy\n \"\n [option]=\"option\"\n [templateRef]=\"suisSelectOption?.templateRef\"\n [selected]=\"option.value | suisSelectMultiIsSelected : values\"\n [checkbox]=\"!duplicate\"\n (clicked)=\"onSelect(option.value)\"\n ></suis-select-option>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-select-multi{position:relative}.suis-select-multi__button{width:100%;background-color:#fff;box-shadow:0 2px 5px #
|
|
1543
|
+
], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select-multi\">\n <button\n type=\"button\"\n (click)=\"onExpand()\"\n class=\"suis-select-multi__button\"\n [class.suis-select-multi__button--invalid]=\"invalid\"\n [class.suis-select-multi__button--valid]=\"values.length > 0\"\n [disabled]=\"readonly\"\n >\n <span class=\"suis-select-multi__button__value\">\n <ng-container *ngIf=\"!values?.length\">\n {{ placeholder }}\n </ng-container>\n <ng-container *ngIf=\"values?.length\">\n <suis-chip\n *ngFor=\"\n let value of values | suisSelectMultiChips : options;\n let index = index\n \"\n [removable]=\"true\"\n [color]=\"chipColor\"\n [iconColor]=\"chipIconColor\"\n (remove)=\"onRemove(index)\"\n >\n {{ value }}\n </suis-chip>\n </ng-container>\n </span>\n <span class=\"suis-select-multi__button__actions\">\n <suis-icon\n *ngIf=\"values?.length\"\n class=\"suis-select-multi__button__cross\"\n [type]=\"SuisIconType.CROSS\"\n size=\"lg\"\n color=\"primary\"\n (click)=\"onClear($event)\"\n tabindex=\"0\"\n ></suis-icon>\n <suis-icon\n class=\"suis-select-multi__button__chevron\"\n [type]=\"expanded ? SuisIconType.CHEVRON_UP : SuisIconType.CHEVRON_DOWN\"\n size=\"lg\"\n color=\"primary\"\n tabindex=\"0\"\n ></suis-icon>\n </span>\n </button>\n <div *ngIf=\"expanded\" class=\"suis-select-multi__list\">\n <input\n *ngIf=\"search\"\n [ngModel]=\"searchPhrase\"\n (ngModelChange)=\"onSearchPhraseChange($event)\"\n class=\"suis-select-multi__list__search\"\n type=\"search\"\n [placeholder]=\"searchPlaceholder\"\n />\n <suis-select-option\n *ngFor=\"\n let option of options\n | suisSelectSortOptions\n | suisSelectFilterOptions : searchPhrase;\n trackBy: optionTrackBy\n \"\n [option]=\"option\"\n [templateRef]=\"suisSelectOption?.templateRef\"\n [selected]=\"option.value | suisSelectMultiIsSelected : values\"\n [checkbox]=\"!duplicate\"\n (clicked)=\"onSelect(option.value)\"\n ></suis-select-option>\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-select-multi{position:relative}.suis-select-multi__button{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000040;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;min-width:5rem;position:relative;display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem .25rem 1rem;cursor:pointer}.suis-select-multi__button:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-select-multi__button--invalid{box-shadow:0 2px 5px #ff4757bf}.suis-select-multi__button__value{width:100%;text-align:left;text-overflow:ellipsis;text-wrap:nowrap;overflow:hidden}.suis-select-multi__button__actions{margin-left:.25rem;display:flex;justify-content:right;align-items:center}.suis-select-multi__button--valid{padding-bottom:.125rem}.suis-select-multi__button suis-chip{margin-right:.25rem;margin-bottom:.125rem}.suis-select-multi__button suis-chip:last-child{margin-right:0}.suis-select-multi__button__value{display:flex;flex-wrap:wrap}.suis-select-multi__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000040;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2rem;left:0;max-height:12.25rem;overflow-y:auto}.suis-select-multi__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem}.suis-select-multi__list__search:focus{outline:none}.suis-select-multi__list::-webkit-scrollbar{width:.5rem}.suis-select-multi__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select-multi__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select-multi__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}\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: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }, { kind: "component", type: SuisChipComponent, selector: "suis-chip", inputs: ["color", "iconColor", "removable"], outputs: ["remove"] }, { kind: "component", type: SuisSelectOptionComponent, selector: "suis-select-option", inputs: ["option", "templateRef", "selected", "checkbox"], outputs: ["clicked"] }, { kind: "pipe", type: SuisSelectMultiChipsPipe, name: "suisSelectMultiChips" }, { kind: "pipe", type: SuisSelectMultiIsSelectedPipe, name: "suisSelectMultiIsSelected" }, { kind: "pipe", type: SuisSelectSortOptionsPipe, name: "suisSelectSortOptions" }, { kind: "pipe", type: SuisSelectFilterOptionsPipe, name: "suisSelectFilterOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1543
1544
|
}
|
|
1544
1545
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectMultiComponent, decorators: [{
|
|
1545
1546
|
type: Component,
|
|
@@ -1559,7 +1560,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
1559
1560
|
multi: true,
|
|
1560
1561
|
useExisting: forwardRef(() => SuisSelectMultiComponent),
|
|
1561
1562
|
},
|
|
1562
|
-
], template: "<div class=\"suis-select-multi\">\n <button\n type=\"button\"\n (click)=\"onExpand()\"\n class=\"suis-select-multi__button\"\n [class.suis-select-multi__button--invalid]=\"invalid\"\n [class.suis-select-multi__button--valid]=\"values.length > 0\"\n [disabled]=\"readonly\"\n >\n <span class=\"suis-select-multi__button__value\">\n <ng-container *ngIf=\"!values?.length\">\n {{ placeholder }}\n </ng-container>\n <ng-container *ngIf=\"values?.length\">\n <suis-chip\n *ngFor=\"\n let value of values | suisSelectMultiChips : options;\n let index = index\n \"\n [removable]=\"true\"\n [color]=\"chipColor\"\n [iconColor]=\"chipIconColor\"\n (remove)=\"onRemove(index)\"\n >\n {{ value }}\n </suis-chip>\n </ng-container>\n </span>\n <span class=\"suis-select-multi__button__actions\">\n <suis-icon\n *ngIf=\"values?.length\"\n class=\"suis-select-multi__button__cross\"\n [type]=\"SuisIconType.CROSS\"\n size=\"lg\"\n color=\"primary\"\n (click)=\"onClear($event)\"\n tabindex=\"0\"\n ></suis-icon>\n <suis-icon\n class=\"suis-select-multi__button__chevron\"\n [type]=\"expanded ? SuisIconType.CHEVRON_UP : SuisIconType.CHEVRON_DOWN\"\n size=\"lg\"\n color=\"primary\"\n tabindex=\"0\"\n ></suis-icon>\n </span>\n </button>\n <div *ngIf=\"expanded\" class=\"suis-select-multi__list\">\n <input\n *ngIf=\"search\"\n [ngModel]=\"searchPhrase\"\n (ngModelChange)=\"onSearchPhraseChange($event)\"\n class=\"suis-select-multi__list__search\"\n type=\"search\"\n [placeholder]=\"searchPlaceholder\"\n />\n <suis-select-option\n *ngFor=\"\n let option of options\n | suisSelectSortOptions\n | suisSelectFilterOptions : searchPhrase;\n trackBy: optionTrackBy\n \"\n [option]=\"option\"\n [templateRef]=\"suisSelectOption?.templateRef\"\n [selected]=\"option.value | suisSelectMultiIsSelected : values\"\n [checkbox]=\"!duplicate\"\n (clicked)=\"onSelect(option.value)\"\n ></suis-select-option>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-select-multi{position:relative}.suis-select-multi__button{width:100%;background-color:#fff;box-shadow:0 2px 5px #
|
|
1563
|
+
], template: "<div class=\"suis-select-multi\">\n <button\n type=\"button\"\n (click)=\"onExpand()\"\n class=\"suis-select-multi__button\"\n [class.suis-select-multi__button--invalid]=\"invalid\"\n [class.suis-select-multi__button--valid]=\"values.length > 0\"\n [disabled]=\"readonly\"\n >\n <span class=\"suis-select-multi__button__value\">\n <ng-container *ngIf=\"!values?.length\">\n {{ placeholder }}\n </ng-container>\n <ng-container *ngIf=\"values?.length\">\n <suis-chip\n *ngFor=\"\n let value of values | suisSelectMultiChips : options;\n let index = index\n \"\n [removable]=\"true\"\n [color]=\"chipColor\"\n [iconColor]=\"chipIconColor\"\n (remove)=\"onRemove(index)\"\n >\n {{ value }}\n </suis-chip>\n </ng-container>\n </span>\n <span class=\"suis-select-multi__button__actions\">\n <suis-icon\n *ngIf=\"values?.length\"\n class=\"suis-select-multi__button__cross\"\n [type]=\"SuisIconType.CROSS\"\n size=\"lg\"\n color=\"primary\"\n (click)=\"onClear($event)\"\n tabindex=\"0\"\n ></suis-icon>\n <suis-icon\n class=\"suis-select-multi__button__chevron\"\n [type]=\"expanded ? SuisIconType.CHEVRON_UP : SuisIconType.CHEVRON_DOWN\"\n size=\"lg\"\n color=\"primary\"\n tabindex=\"0\"\n ></suis-icon>\n </span>\n </button>\n <div *ngIf=\"expanded\" class=\"suis-select-multi__list\">\n <input\n *ngIf=\"search\"\n [ngModel]=\"searchPhrase\"\n (ngModelChange)=\"onSearchPhraseChange($event)\"\n class=\"suis-select-multi__list__search\"\n type=\"search\"\n [placeholder]=\"searchPlaceholder\"\n />\n <suis-select-option\n *ngFor=\"\n let option of options\n | suisSelectSortOptions\n | suisSelectFilterOptions : searchPhrase;\n trackBy: optionTrackBy\n \"\n [option]=\"option\"\n [templateRef]=\"suisSelectOption?.templateRef\"\n [selected]=\"option.value | suisSelectMultiIsSelected : values\"\n [checkbox]=\"!duplicate\"\n (clicked)=\"onSelect(option.value)\"\n ></suis-select-option>\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-select-multi{position:relative}.suis-select-multi__button{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000040;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;min-width:5rem;position:relative;display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem .25rem 1rem;cursor:pointer}.suis-select-multi__button:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-select-multi__button--invalid{box-shadow:0 2px 5px #ff4757bf}.suis-select-multi__button__value{width:100%;text-align:left;text-overflow:ellipsis;text-wrap:nowrap;overflow:hidden}.suis-select-multi__button__actions{margin-left:.25rem;display:flex;justify-content:right;align-items:center}.suis-select-multi__button--valid{padding-bottom:.125rem}.suis-select-multi__button suis-chip{margin-right:.25rem;margin-bottom:.125rem}.suis-select-multi__button suis-chip:last-child{margin-right:0}.suis-select-multi__button__value{display:flex;flex-wrap:wrap}.suis-select-multi__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000040;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2rem;left:0;max-height:12.25rem;overflow-y:auto}.suis-select-multi__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem}.suis-select-multi__list__search:focus{outline:none}.suis-select-multi__list::-webkit-scrollbar{width:.5rem}.suis-select-multi__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select-multi__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select-multi__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}\n"] }]
|
|
1563
1564
|
}], propDecorators: { duplicate: [{
|
|
1564
1565
|
type: Input
|
|
1565
1566
|
}], chipColor: [{
|
|
@@ -1568,6 +1569,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
1568
1569
|
type: Input
|
|
1569
1570
|
}] } });
|
|
1570
1571
|
|
|
1572
|
+
class SuisSelectMultiModule {
|
|
1573
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectMultiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1574
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectMultiModule, imports: [SuisSelectMultiComponent, SuisSelectOptionDirective], exports: [SuisSelectMultiComponent, SuisSelectOptionDirective] }); }
|
|
1575
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectMultiModule, imports: [SuisSelectMultiComponent] }); }
|
|
1576
|
+
}
|
|
1577
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectMultiModule, decorators: [{
|
|
1578
|
+
type: NgModule,
|
|
1579
|
+
args: [{
|
|
1580
|
+
imports: [SuisSelectMultiComponent, SuisSelectOptionDirective],
|
|
1581
|
+
exports: [SuisSelectMultiComponent, SuisSelectOptionDirective],
|
|
1582
|
+
}]
|
|
1583
|
+
}] });
|
|
1584
|
+
|
|
1571
1585
|
class SuisSpinnerContainerComponent {
|
|
1572
1586
|
constructor() {
|
|
1573
1587
|
/**
|
|
@@ -1588,11 +1602,11 @@ class SuisSpinnerContainerComponent {
|
|
|
1588
1602
|
this.absolute = false;
|
|
1589
1603
|
}
|
|
1590
1604
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSpinnerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1591
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisSpinnerContainerComponent, isStandalone: true, selector: "suis-spinner-container", inputs: { size: "size", color: "color", blur: "blur", absolute: "absolute" }, ngImport: i0, template: "<div\n class=\"suis-spinner-container\"\n [class.suis-spinner-container--blur]=\"blur\"\n [class.suis-spinner-container--absolute]=\"absolute\"\n>\n <suis-spinner [size]=\"size\" [color]=\"color\"></suis-spinner>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-spinner-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.suis-spinner-container--blur{background-color:#ffffff20;-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem)}.suis-spinner-container--absolute{position:absolute;inset:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SuisSpinnerComponent, selector: "suis-spinner", inputs: ["size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1605
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisSpinnerContainerComponent, isStandalone: true, selector: "suis-spinner-container", inputs: { size: "size", color: "color", blur: "blur", absolute: "absolute" }, ngImport: i0, template: "<div\n class=\"suis-spinner-container\"\n [class.suis-spinner-container--blur]=\"blur\"\n [class.suis-spinner-container--absolute]=\"absolute\"\n>\n <suis-spinner [size]=\"size\" [color]=\"color\"></suis-spinner>\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-spinner-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.suis-spinner-container--blur{background-color:#ffffff20;-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem)}.suis-spinner-container--absolute{position:absolute;inset:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SuisSpinnerComponent, selector: "suis-spinner", inputs: ["size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1592
1606
|
}
|
|
1593
1607
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSpinnerContainerComponent, decorators: [{
|
|
1594
1608
|
type: Component,
|
|
1595
|
-
args: [{ selector: 'suis-spinner-container', standalone: true, imports: [CommonModule, SuisSpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-spinner-container\"\n [class.suis-spinner-container--blur]=\"blur\"\n [class.suis-spinner-container--absolute]=\"absolute\"\n>\n <suis-spinner [size]=\"size\" [color]=\"color\"></suis-spinner>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-spinner-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.suis-spinner-container--blur{background-color:#ffffff20;-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem)}.suis-spinner-container--absolute{position:absolute;inset:0}\n"] }]
|
|
1609
|
+
args: [{ selector: 'suis-spinner-container', standalone: true, imports: [CommonModule, SuisSpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-spinner-container\"\n [class.suis-spinner-container--blur]=\"blur\"\n [class.suis-spinner-container--absolute]=\"absolute\"\n>\n <suis-spinner [size]=\"size\" [color]=\"color\"></suis-spinner>\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-spinner-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.suis-spinner-container--blur{background-color:#ffffff20;-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem)}.suis-spinner-container--absolute{position:absolute;inset:0}\n"] }]
|
|
1596
1610
|
}], propDecorators: { size: [{
|
|
1597
1611
|
type: Input
|
|
1598
1612
|
}], color: [{
|
|
@@ -1704,11 +1718,11 @@ class SuisTableComponent {
|
|
|
1704
1718
|
}
|
|
1705
1719
|
}
|
|
1706
1720
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1707
|
-
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)}}.suis-table{width:100%;border-collapse:collapse}.suis-table thead{background-color:#273c75;color:#fff}.suis-table thead tr th{font-weight:
|
|
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 }); }
|
|
1708
1722
|
}
|
|
1709
1723
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisTableComponent, decorators: [{
|
|
1710
1724
|
type: Component,
|
|
1711
|
-
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)}}.suis-table{width:100%;border-collapse:collapse}.suis-table thead{background-color:#273c75;color:#fff}.suis-table thead tr th{font-weight:
|
|
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"] }]
|
|
1712
1726
|
}], propDecorators: { columns: [{
|
|
1713
1727
|
type: ContentChildren,
|
|
1714
1728
|
args: [SuisTableColumnDirective]
|
|
@@ -1729,19 +1743,150 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
1729
1743
|
type: Output
|
|
1730
1744
|
}] } });
|
|
1731
1745
|
|
|
1732
|
-
class
|
|
1746
|
+
class SuisTableModule {
|
|
1747
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1748
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: SuisTableModule, imports: [SuisTableComponent,
|
|
1749
|
+
SuisTableCellDirective,
|
|
1750
|
+
SuisTableColumnDirective], exports: [SuisTableComponent,
|
|
1751
|
+
SuisTableCellDirective,
|
|
1752
|
+
SuisTableColumnDirective] }); }
|
|
1753
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisTableModule, imports: [SuisTableComponent] }); }
|
|
1754
|
+
}
|
|
1755
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisTableModule, decorators: [{
|
|
1756
|
+
type: NgModule,
|
|
1757
|
+
args: [{
|
|
1758
|
+
imports: [
|
|
1759
|
+
SuisTableComponent,
|
|
1760
|
+
SuisTableCellDirective,
|
|
1761
|
+
SuisTableColumnDirective,
|
|
1762
|
+
],
|
|
1763
|
+
exports: [
|
|
1764
|
+
SuisTableComponent,
|
|
1765
|
+
SuisTableCellDirective,
|
|
1766
|
+
SuisTableColumnDirective,
|
|
1767
|
+
],
|
|
1768
|
+
}]
|
|
1769
|
+
}] });
|
|
1770
|
+
|
|
1771
|
+
class SuisTabDirective {
|
|
1733
1772
|
constructor() {
|
|
1734
1773
|
/**
|
|
1735
|
-
*
|
|
1774
|
+
* Template of the tab.
|
|
1736
1775
|
*/
|
|
1737
|
-
|
|
1776
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1777
|
+
this.templateRef = inject((TemplateRef));
|
|
1778
|
+
this.name = '';
|
|
1779
|
+
}
|
|
1780
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisTabDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1781
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: SuisTabDirective, isStandalone: true, selector: "[suisTab]", inputs: { name: ["suisTab", "name"] }, ngImport: i0 }); }
|
|
1782
|
+
}
|
|
1783
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisTabDirective, decorators: [{
|
|
1784
|
+
type: Directive,
|
|
1785
|
+
args: [{
|
|
1786
|
+
selector: '[suisTab]',
|
|
1787
|
+
standalone: true,
|
|
1788
|
+
}]
|
|
1789
|
+
}], propDecorators: { name: [{
|
|
1790
|
+
type: Input,
|
|
1791
|
+
args: [{ required: true, alias: 'suisTab' }]
|
|
1792
|
+
}] } });
|
|
1793
|
+
|
|
1794
|
+
class SuisTabActionsPipe {
|
|
1795
|
+
transform(tabs) {
|
|
1796
|
+
if (!tabs)
|
|
1797
|
+
return [];
|
|
1798
|
+
return tabs.toArray().map((tab) => tab.name);
|
|
1799
|
+
}
|
|
1800
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisTabActionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1801
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: SuisTabActionsPipe, isStandalone: true, name: "suisTabActions" }); }
|
|
1802
|
+
}
|
|
1803
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisTabActionsPipe, decorators: [{
|
|
1804
|
+
type: Pipe,
|
|
1805
|
+
args: [{
|
|
1806
|
+
standalone: true,
|
|
1807
|
+
name: 'suisTabActions',
|
|
1808
|
+
}]
|
|
1809
|
+
}] });
|
|
1810
|
+
|
|
1811
|
+
class SuisTabTemplatePipe {
|
|
1812
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1813
|
+
transform(tabs, currentTab) {
|
|
1814
|
+
if (!tabs)
|
|
1815
|
+
return null;
|
|
1816
|
+
const tab = tabs.toArray().find((tab) => tab.name === currentTab);
|
|
1817
|
+
if (!tab)
|
|
1818
|
+
return null;
|
|
1819
|
+
return tab.templateRef;
|
|
1820
|
+
}
|
|
1821
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisTabTemplatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1822
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: SuisTabTemplatePipe, isStandalone: true, name: "suisTabTemplate" }); }
|
|
1823
|
+
}
|
|
1824
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisTabTemplatePipe, decorators: [{
|
|
1825
|
+
type: Pipe,
|
|
1826
|
+
args: [{
|
|
1827
|
+
standalone: true,
|
|
1828
|
+
name: 'suisTabTemplate',
|
|
1829
|
+
}]
|
|
1830
|
+
}] });
|
|
1831
|
+
|
|
1832
|
+
class SuisTabsComponent {
|
|
1833
|
+
constructor() {
|
|
1834
|
+
/**
|
|
1835
|
+
* Name of the current displayed tab. Must correspond with the name passed into suisTab directive. By default set to empty string.
|
|
1836
|
+
*/
|
|
1837
|
+
this.currentTab = '';
|
|
1738
1838
|
}
|
|
1839
|
+
onTabActionClick(name) {
|
|
1840
|
+
this.currentTab = name;
|
|
1841
|
+
}
|
|
1842
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1843
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisTabsComponent, isStandalone: true, selector: "suis-tabs", inputs: { currentTab: "currentTab" }, queries: [{ propertyName: "tabs", predicate: SuisTabDirective }], ngImport: i0, template: "<div class=\"suis-tabs\">\n <div class=\"suis-tabs__actions\">\n <button\n *ngFor=\"let name of tabs | suisTabActions\"\n [class.active]=\"name === currentTab\"\n (click)=\"onTabActionClick(name)\"\n >\n {{ name }}\n </button>\n </div>\n <div class=\"suis-tabs__content\">\n <ng-container\n *ngTemplateOutlet=\"tabs | suisTabTemplate : currentTab\"\n ></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-tabs__actions{width:100%;display:flex}.suis-tabs__actions button{flex:1;border:0;background-color:#fff;border-bottom:.1875rem solid #f5f6fa;margin:0 .5rem;padding:1rem;transition:.5s border-bottom-color ease-in-out}.suis-tabs__actions button:first-child{margin-left:0}.suis-tabs__actions button:last-child{margin-right:0}.suis-tabs__actions button.active{border-bottom-color:#192a56}.suis-tabs__actions button:hover{border-bottom-color:#273c75;cursor:pointer}.suis-tabs__content{margin-top:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SuisTabActionsPipe, name: "suisTabActions" }, { kind: "pipe", type: SuisTabTemplatePipe, name: "suisTabTemplate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1844
|
+
}
|
|
1845
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisTabsComponent, decorators: [{
|
|
1846
|
+
type: Component,
|
|
1847
|
+
args: [{ selector: 'suis-tabs', standalone: true, imports: [CommonModule, SuisTabActionsPipe, SuisTabTemplatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-tabs\">\n <div class=\"suis-tabs__actions\">\n <button\n *ngFor=\"let name of tabs | suisTabActions\"\n [class.active]=\"name === currentTab\"\n (click)=\"onTabActionClick(name)\"\n >\n {{ name }}\n </button>\n </div>\n <div class=\"suis-tabs__content\">\n <ng-container\n *ngTemplateOutlet=\"tabs | suisTabTemplate : currentTab\"\n ></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-tabs__actions{width:100%;display:flex}.suis-tabs__actions button{flex:1;border:0;background-color:#fff;border-bottom:.1875rem solid #f5f6fa;margin:0 .5rem;padding:1rem;transition:.5s border-bottom-color ease-in-out}.suis-tabs__actions button:first-child{margin-left:0}.suis-tabs__actions button:last-child{margin-right:0}.suis-tabs__actions button.active{border-bottom-color:#192a56}.suis-tabs__actions button:hover{border-bottom-color:#273c75;cursor:pointer}.suis-tabs__content{margin-top:1rem}\n"] }]
|
|
1848
|
+
}], propDecorators: { tabs: [{
|
|
1849
|
+
type: ContentChildren,
|
|
1850
|
+
args: [SuisTabDirective]
|
|
1851
|
+
}], currentTab: [{
|
|
1852
|
+
type: Input
|
|
1853
|
+
}] } });
|
|
1854
|
+
|
|
1855
|
+
class SuisTabsModule {
|
|
1856
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1857
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: SuisTabsModule, imports: [SuisTabsComponent, SuisTabDirective], exports: [SuisTabsComponent, SuisTabDirective] }); }
|
|
1858
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisTabsModule, imports: [SuisTabsComponent] }); }
|
|
1859
|
+
}
|
|
1860
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisTabsModule, decorators: [{
|
|
1861
|
+
type: NgModule,
|
|
1862
|
+
args: [{
|
|
1863
|
+
imports: [SuisTabsComponent, SuisTabDirective],
|
|
1864
|
+
exports: [SuisTabsComponent, SuisTabDirective],
|
|
1865
|
+
}]
|
|
1866
|
+
}] });
|
|
1867
|
+
|
|
1868
|
+
class SuisTitleComponent {
|
|
1739
1869
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1740
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisTitleComponent, isStandalone: true, selector: "suis-title",
|
|
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 }); }
|
|
1741
1871
|
}
|
|
1742
1872
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisTitleComponent, decorators: [{
|
|
1743
1873
|
type: Component,
|
|
1744
|
-
args: [{ selector: 'suis-title', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<h1 class=\"suis-title\"
|
|
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 {
|
|
1878
|
+
constructor() {
|
|
1879
|
+
/**
|
|
1880
|
+
* Adds a padding around the content. By default set to false.
|
|
1881
|
+
*/
|
|
1882
|
+
this.spacing = false;
|
|
1883
|
+
}
|
|
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 }); }
|
|
1886
|
+
}
|
|
1887
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisToolbarComponent, decorators: [{
|
|
1888
|
+
type: Component,
|
|
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"] }]
|
|
1745
1890
|
}], propDecorators: { spacing: [{
|
|
1746
1891
|
type: Input
|
|
1747
1892
|
}] } });
|
|
@@ -1750,5 +1895,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
1750
1895
|
* Generated bundle index. Do not edit.
|
|
1751
1896
|
*/
|
|
1752
1897
|
|
|
1753
|
-
export { SuisAlertComponent, SuisBoxComponent, SuisBreadcrumbsComponent, SuisButtonComponent, SuisButtonLinkComponent, 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 };
|
|
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 };
|
|
1754
1899
|
//# sourceMappingURL=suis.mjs.map
|