suis 0.32.0 → 0.32.2
Sign up to get free protection for your applications and to get access to all the features.
- 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-container/suis-container.component.mjs +2 -2
- package/esm2022/lib/components/suis-divider/suis-divider.component.mjs +15 -5
- package/esm2022/lib/components/suis-select/suis-select.module.mjs +19 -5
- package/esm2022/lib/components/suis-select-multi/index.mjs +1 -2
- package/esm2022/lib/components/suis-select-multi/suis-select-multi.component.mjs +3 -3
- package/esm2022/lib/components/suis-spinner-container/suis-spinner-container.component.mjs +5 -5
- package/esm2022/lib/components/suis-tabs/suis-tabs.component.mjs +10 -3
- package/fesm2022/suis.mjs +175 -159
- package/fesm2022/suis.mjs.map +1 -1
- package/lib/components/suis-container/suis-container.component.d.ts +1 -1
- package/lib/components/suis-divider/suis-divider.component.d.ts +6 -1
- package/lib/components/suis-select/suis-select.module.d.ts +3 -2
- package/lib/components/suis-select-multi/index.d.ts +0 -1
- package/lib/components/suis-spinner-container/suis-spinner-container.component.d.ts +1 -1
- package/lib/components/suis-tabs/suis-tabs.component.d.ts +6 -2
- package/package.json +1 -1
- package/esm2022/lib/components/suis-select-multi/suis-select-multi.module.mjs +0 -17
- package/lib/components/suis-select-multi/suis-select-multi.module.d.ts +0 -8
package/fesm2022/suis.mjs
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { Pipe, Component, ChangeDetectionStrategy, Input, EventEmitter, Output, Directive, signal, Injectable, inject, ChangeDetectorRef, ElementRef, forwardRef, ViewChild, HostListener, TemplateRef, ContentChild, NgModule, DestroyRef, ContentChildren } from '@angular/core';
|
|
3
|
+
import * as i1$1 from '@angular/common';
|
|
3
4
|
import { NgClass, NgIf, NgFor, NgComponentOutlet, CommonModule, NgTemplateOutlet } from '@angular/common';
|
|
4
5
|
import * as i1 from '@angular/router';
|
|
5
6
|
import { RouterModule } from '@angular/router';
|
|
6
|
-
import * as i1$
|
|
7
|
+
import * as i1$2 from '@angular/forms';
|
|
7
8
|
import { NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule, RadioControlValueAccessor, FormsModule } from '@angular/forms';
|
|
8
9
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
9
10
|
|
|
@@ -292,11 +293,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
292
293
|
|
|
293
294
|
class SuisButtonComponent extends SuisButtonBase {
|
|
294
295
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
295
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }, { kind: "component", type: SuisSpinnerComponent, selector: "suis-spinner", inputs: ["size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
296
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }, { kind: "component", type: SuisSpinnerComponent, selector: "suis-spinner", inputs: ["size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
296
297
|
}
|
|
297
298
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisButtonComponent, decorators: [{
|
|
298
299
|
type: Component,
|
|
299
|
-
args: [{ selector: 'suis-button', standalone: true, imports: [NgIf, NgClass, 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"] }]
|
|
300
|
+
args: [{ selector: 'suis-button', standalone: true, imports: [NgIf, NgClass, 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: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"] }]
|
|
300
301
|
}] });
|
|
301
302
|
|
|
302
303
|
class SuisButtonLinkComponent extends SuisButtonBase {
|
|
@@ -310,11 +311,11 @@ class SuisButtonLinkComponent extends SuisButtonBase {
|
|
|
310
311
|
}
|
|
311
312
|
}
|
|
312
313
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisButtonLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
313
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.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 }); }
|
|
314
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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-link--full-width]=\"fullWidth\"\n [class.suis-button-link--disabled]=\"disabled || loading ? true : undefined\"\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: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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.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 }); }
|
|
314
315
|
}
|
|
315
316
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisButtonLinkComponent, decorators: [{
|
|
316
317
|
type: Component,
|
|
317
|
-
args: [{ selector: 'suis-button-link', standalone: true, imports: [NgIf, NgClass, 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"] }]
|
|
318
|
+
args: [{ selector: 'suis-button-link', standalone: true, imports: [NgIf, NgClass, RouterModule, SuisNgClassPipe, SuisSpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n class=\"suis-button-link\"\n [class.suis-button-link--full-width]=\"fullWidth\"\n [class.suis-button-link--disabled]=\"disabled || loading ? true : undefined\"\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: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"] }]
|
|
318
319
|
}], propDecorators: { routerLink: [{
|
|
319
320
|
type: Input,
|
|
320
321
|
args: [{ required: true }]
|
|
@@ -330,11 +331,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
330
331
|
|
|
331
332
|
class SuisButtonOutlinedComponent extends SuisButtonBase {
|
|
332
333
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisButtonOutlinedComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
333
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }, { kind: "component", type: SuisSpinnerComponent, selector: "suis-spinner", inputs: ["size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
334
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisButtonOutlinedComponent, isStandalone: true, selector: "suis-button-outlined", usesInheritance: true, ngImport: i0, template: "<button\n class=\"suis-button-outlined\"\n [class.suis-button-outlined--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: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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }, { kind: "component", type: SuisSpinnerComponent, selector: "suis-spinner", inputs: ["size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
334
335
|
}
|
|
335
336
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisButtonOutlinedComponent, decorators: [{
|
|
336
337
|
type: Component,
|
|
337
|
-
args: [{ selector: 'suis-button-outlined', standalone: true, imports: [NgIf, NgClass, 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"] }]
|
|
338
|
+
args: [{ selector: 'suis-button-outlined', standalone: true, imports: [NgIf, NgClass, SuisNgClassPipe, SuisSpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n class=\"suis-button-outlined\"\n [class.suis-button-outlined--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: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"] }]
|
|
338
339
|
}] });
|
|
339
340
|
|
|
340
341
|
class SuisChipComponent {
|
|
@@ -379,7 +380,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
379
380
|
class SuisContainerComponent {
|
|
380
381
|
constructor() {
|
|
381
382
|
/**
|
|
382
|
-
* Adds a padding around the
|
|
383
|
+
* Adds a padding around the content. By default set to false.
|
|
383
384
|
*/
|
|
384
385
|
this.spacing = false;
|
|
385
386
|
}
|
|
@@ -572,13 +573,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
572
573
|
}] });
|
|
573
574
|
|
|
574
575
|
class SuisDividerComponent {
|
|
576
|
+
constructor() {
|
|
577
|
+
/**
|
|
578
|
+
* Sets the color of the divider. Type of SuisColor. By default set to 'tertiary'.
|
|
579
|
+
*/
|
|
580
|
+
this.color = 'tertiary';
|
|
581
|
+
}
|
|
575
582
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
576
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisDividerComponent, isStandalone: true, selector: "suis-divider", ngImport: i0, template: "<div
|
|
583
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisDividerComponent, isStandalone: true, selector: "suis-divider", inputs: { color: "color" }, ngImport: i0, template: "<div\n class=\"suis-divider\"\n [ngClass]=\"'suis-divider' | suisNgClass : 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-divider{border:0;border-bottom-width:.0625rem;border-style:solid}.suis-divider--primary{border-color:#192a56}.suis-divider--secondary{border-color:#273c75}.suis-divider--tertiary{border-color:#dcdde1}.suis-divider--complementary{border-color:#f5f6fa}.suis-divider--success{border-color:#2ed573}.suis-divider--warning{border-color:#ffa502}.suis-divider--danger{border-color:#ff4757}.suis-divider--white{border-color:#fff}.suis-divider--gray{border-color:#bcbcbc}.suis-divider--dark{border-color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
577
584
|
}
|
|
578
585
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisDividerComponent, decorators: [{
|
|
579
586
|
type: Component,
|
|
580
|
-
args: [{ selector: 'suis-divider', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div
|
|
581
|
-
}]
|
|
587
|
+
args: [{ selector: 'suis-divider', standalone: true, imports: [CommonModule, SuisNgClassPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-divider\"\n [ngClass]=\"'suis-divider' | suisNgClass : 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-divider{border:0;border-bottom-width:.0625rem;border-style:solid}.suis-divider--primary{border-color:#192a56}.suis-divider--secondary{border-color:#273c75}.suis-divider--tertiary{border-color:#dcdde1}.suis-divider--complementary{border-color:#f5f6fa}.suis-divider--success{border-color:#2ed573}.suis-divider--warning{border-color:#ffa502}.suis-divider--danger{border-color:#ff4757}.suis-divider--white{border-color:#fff}.suis-divider--gray{border-color:#bcbcbc}.suis-divider--dark{border-color:#000}\n"] }]
|
|
588
|
+
}], propDecorators: { color: [{
|
|
589
|
+
type: Input
|
|
590
|
+
}] } });
|
|
582
591
|
|
|
583
592
|
class SuisFormFieldComponent {
|
|
584
593
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -854,7 +863,7 @@ class SuisInputChipsComponent extends SuisInputBase {
|
|
|
854
863
|
multi: true,
|
|
855
864
|
useExisting: forwardRef(() => SuisInputChipsComponent),
|
|
856
865
|
},
|
|
857
|
-
], 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\n [id]=\"id\"\n [name]=\"name\"\n [formControl]=\"inputControl\"\n [readonly]=\"readonly\"\n [invalid]=\"invalid\"\n [placeholder]=\"placeholder\"\n (touched)=\"onTouch()\"\n (enterPressed)=\"submitValue()\"\n ></suis-input>\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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$
|
|
866
|
+
], 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\n [id]=\"id\"\n [name]=\"name\"\n [formControl]=\"inputControl\"\n [readonly]=\"readonly\"\n [invalid]=\"invalid\"\n [placeholder]=\"placeholder\"\n (touched)=\"onTouch()\"\n (enterPressed)=\"submitValue()\"\n ></suis-input>\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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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: SuisInputComponent, selector: "suis-input", inputs: ["type", "placeholder"], outputs: ["enterPressed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
858
867
|
}
|
|
859
868
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisInputChipsComponent, decorators: [{
|
|
860
869
|
type: Component,
|
|
@@ -1560,7 +1569,7 @@ class SuisSelectComponent extends SuisSelectBase {
|
|
|
1560
1569
|
multi: true,
|
|
1561
1570
|
useExisting: forwardRef(() => SuisSelectComponent),
|
|
1562
1571
|
},
|
|
1563
|
-
], 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=\"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 ? 'chevron-up' : '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;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.625rem;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{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-select__button--invalid{border:.0625rem solid #ff4757}.suis-select__button--invalid:focus{border:.0625rem solid #ff4757;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::-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}.suis-select__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem}.suis-select__list__search:focus{outline:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$
|
|
1572
|
+
], 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=\"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 ? 'chevron-up' : '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;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.625rem;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{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-select__button--invalid{border:.0625rem solid #ff4757}.suis-select__button--invalid:focus{border:.0625rem solid #ff4757;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::-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}.suis-select__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem}.suis-select__list__search:focus{outline:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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 }); }
|
|
1564
1573
|
}
|
|
1565
1574
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectComponent, decorators: [{
|
|
1566
1575
|
type: Component,
|
|
@@ -1585,16 +1594,151 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1585
1594
|
type: Input
|
|
1586
1595
|
}] } });
|
|
1587
1596
|
|
|
1597
|
+
class SuisSelectMultiChipsPipe {
|
|
1598
|
+
transform(values, options) {
|
|
1599
|
+
const selectedOptions = [];
|
|
1600
|
+
values.forEach((value) => {
|
|
1601
|
+
const selectedOption = options.find((option) => JSON.stringify(option.value) === JSON.stringify(value));
|
|
1602
|
+
if (!selectedOption)
|
|
1603
|
+
throw Error('[SuisSelectMultiLabelPipe] Provided value does not belong to valid values');
|
|
1604
|
+
selectedOptions.push(selectedOption.label);
|
|
1605
|
+
});
|
|
1606
|
+
return selectedOptions;
|
|
1607
|
+
}
|
|
1608
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectMultiChipsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1609
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectMultiChipsPipe, isStandalone: true, name: "suisSelectMultiChips" }); }
|
|
1610
|
+
}
|
|
1611
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectMultiChipsPipe, decorators: [{
|
|
1612
|
+
type: Pipe,
|
|
1613
|
+
args: [{
|
|
1614
|
+
standalone: true,
|
|
1615
|
+
name: 'suisSelectMultiChips',
|
|
1616
|
+
}]
|
|
1617
|
+
}] });
|
|
1618
|
+
|
|
1619
|
+
class SuisSelectMultiIsSelectedPipe {
|
|
1620
|
+
transform(optionValue, values) {
|
|
1621
|
+
return values.some((value) => JSON.stringify(value) === JSON.stringify(optionValue));
|
|
1622
|
+
}
|
|
1623
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectMultiIsSelectedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1624
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectMultiIsSelectedPipe, isStandalone: true, name: "suisSelectMultiIsSelected" }); }
|
|
1625
|
+
}
|
|
1626
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectMultiIsSelectedPipe, decorators: [{
|
|
1627
|
+
type: Pipe,
|
|
1628
|
+
args: [{
|
|
1629
|
+
standalone: true,
|
|
1630
|
+
name: 'suisSelectMultiIsSelected',
|
|
1631
|
+
}]
|
|
1632
|
+
}] });
|
|
1633
|
+
|
|
1634
|
+
class SuisSelectMultiComponent extends SuisSelectBase {
|
|
1635
|
+
constructor() {
|
|
1636
|
+
super(...arguments);
|
|
1637
|
+
/** @internal */
|
|
1638
|
+
this.values = [];
|
|
1639
|
+
/**
|
|
1640
|
+
* Allows to select duplicated values and remove checkboxes next to options' label. By default set to false.
|
|
1641
|
+
*/
|
|
1642
|
+
this.duplicate = false;
|
|
1643
|
+
/**
|
|
1644
|
+
* Sets the color pallette of the chips. Type of SuisColor. By default set to 'primary'.
|
|
1645
|
+
*/
|
|
1646
|
+
this.chipColor = 'primary';
|
|
1647
|
+
/**
|
|
1648
|
+
* Sets the color of the chips' cross icon. Type of SuisColor. By default set to 'white'.
|
|
1649
|
+
*/
|
|
1650
|
+
this.chipIconColor = 'white';
|
|
1651
|
+
}
|
|
1652
|
+
writeValue(obj) {
|
|
1653
|
+
this.values = obj;
|
|
1654
|
+
this._onChange(this.values);
|
|
1655
|
+
this.cdRef.markForCheck();
|
|
1656
|
+
}
|
|
1657
|
+
onSelect(value) {
|
|
1658
|
+
if (this.duplicate ||
|
|
1659
|
+
!this.values.some((v) => JSON.stringify(v) === JSON.stringify(value))) {
|
|
1660
|
+
this.setValue([...this.values, value]);
|
|
1661
|
+
}
|
|
1662
|
+
else {
|
|
1663
|
+
this.setValue([
|
|
1664
|
+
...this.values.filter((v) => JSON.stringify(v) !== JSON.stringify(value)),
|
|
1665
|
+
]);
|
|
1666
|
+
}
|
|
1667
|
+
}
|
|
1668
|
+
onRemove(index) {
|
|
1669
|
+
const values = [...this.values];
|
|
1670
|
+
values.splice(index, 1);
|
|
1671
|
+
this.setValue([...values]);
|
|
1672
|
+
}
|
|
1673
|
+
clearValue() {
|
|
1674
|
+
this.setValue([]);
|
|
1675
|
+
}
|
|
1676
|
+
setValue(value) {
|
|
1677
|
+
this.values = value;
|
|
1678
|
+
this._onChange(this.values);
|
|
1679
|
+
this.changed.emit();
|
|
1680
|
+
this.cdRef.markForCheck();
|
|
1681
|
+
}
|
|
1682
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectMultiComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1683
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisSelectMultiComponent, isStandalone: true, selector: "suis-select-multi", inputs: { duplicate: "duplicate", chipColor: "chipColor", chipIconColor: "chipIconColor" }, providers: [
|
|
1684
|
+
{
|
|
1685
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1686
|
+
multi: true,
|
|
1687
|
+
useExisting: forwardRef(() => SuisSelectMultiComponent),
|
|
1688
|
+
},
|
|
1689
|
+
], 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=\"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 ? 'chevron-up' : '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;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.625rem;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{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-select-multi__button--invalid{border:.0625rem solid #ff4757}.suis-select-multi__button--invalid:focus{border:.0625rem solid #ff4757;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::-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}.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}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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 }); }
|
|
1690
|
+
}
|
|
1691
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectMultiComponent, decorators: [{
|
|
1692
|
+
type: Component,
|
|
1693
|
+
args: [{ selector: 'suis-select-multi', standalone: true, imports: [
|
|
1694
|
+
NgFor,
|
|
1695
|
+
NgIf,
|
|
1696
|
+
FormsModule,
|
|
1697
|
+
SuisIconComponent,
|
|
1698
|
+
SuisChipComponent,
|
|
1699
|
+
SuisSelectOptionComponent,
|
|
1700
|
+
SuisSelectMultiChipsPipe,
|
|
1701
|
+
SuisSelectMultiIsSelectedPipe,
|
|
1702
|
+
SuisSelectSortOptionsPipe,
|
|
1703
|
+
SuisSelectFilterOptionsPipe,
|
|
1704
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
1705
|
+
{
|
|
1706
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1707
|
+
multi: true,
|
|
1708
|
+
useExisting: forwardRef(() => SuisSelectMultiComponent),
|
|
1709
|
+
},
|
|
1710
|
+
], 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=\"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 ? 'chevron-up' : '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;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.625rem;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{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-select-multi__button--invalid{border:.0625rem solid #ff4757}.suis-select-multi__button--invalid:focus{border:.0625rem solid #ff4757;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::-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}.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}\n"] }]
|
|
1711
|
+
}], propDecorators: { duplicate: [{
|
|
1712
|
+
type: Input
|
|
1713
|
+
}], chipColor: [{
|
|
1714
|
+
type: Input
|
|
1715
|
+
}], chipIconColor: [{
|
|
1716
|
+
type: Input
|
|
1717
|
+
}] } });
|
|
1718
|
+
|
|
1588
1719
|
class SuisSelectModule {
|
|
1589
1720
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1590
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectModule, imports: [SuisSelectComponent,
|
|
1591
|
-
|
|
1721
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectModule, imports: [SuisSelectComponent,
|
|
1722
|
+
SuisSelectMultiComponent,
|
|
1723
|
+
SuisSelectOptionDirective], exports: [SuisSelectComponent,
|
|
1724
|
+
SuisSelectMultiComponent,
|
|
1725
|
+
SuisSelectOptionDirective] }); }
|
|
1726
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectModule, imports: [SuisSelectComponent,
|
|
1727
|
+
SuisSelectMultiComponent] }); }
|
|
1592
1728
|
}
|
|
1593
1729
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectModule, decorators: [{
|
|
1594
1730
|
type: NgModule,
|
|
1595
1731
|
args: [{
|
|
1596
|
-
imports: [
|
|
1597
|
-
|
|
1732
|
+
imports: [
|
|
1733
|
+
SuisSelectComponent,
|
|
1734
|
+
SuisSelectMultiComponent,
|
|
1735
|
+
SuisSelectOptionDirective,
|
|
1736
|
+
],
|
|
1737
|
+
exports: [
|
|
1738
|
+
SuisSelectComponent,
|
|
1739
|
+
SuisSelectMultiComponent,
|
|
1740
|
+
SuisSelectOptionDirective,
|
|
1741
|
+
],
|
|
1598
1742
|
}]
|
|
1599
1743
|
}] });
|
|
1600
1744
|
|
|
@@ -1692,7 +1836,7 @@ class SuisPaginationComponent {
|
|
|
1692
1836
|
this.perPageChange.emit(this.perPage);
|
|
1693
1837
|
}
|
|
1694
1838
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1695
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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]=\"'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]=\"'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: ReactiveFormsModule }, { kind: "directive", type: i1$
|
|
1839
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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]=\"'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]=\"'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: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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 }); }
|
|
1696
1840
|
}
|
|
1697
1841
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisPaginationComponent, decorators: [{
|
|
1698
1842
|
type: Component,
|
|
@@ -1783,147 +1927,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1783
1927
|
type: Input
|
|
1784
1928
|
}] } });
|
|
1785
1929
|
|
|
1786
|
-
class SuisSelectMultiChipsPipe {
|
|
1787
|
-
transform(values, options) {
|
|
1788
|
-
const selectedOptions = [];
|
|
1789
|
-
values.forEach((value) => {
|
|
1790
|
-
const selectedOption = options.find((option) => JSON.stringify(option.value) === JSON.stringify(value));
|
|
1791
|
-
if (!selectedOption)
|
|
1792
|
-
throw Error('[SuisSelectMultiLabelPipe] Provided value does not belong to valid values');
|
|
1793
|
-
selectedOptions.push(selectedOption.label);
|
|
1794
|
-
});
|
|
1795
|
-
return selectedOptions;
|
|
1796
|
-
}
|
|
1797
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectMultiChipsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1798
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectMultiChipsPipe, isStandalone: true, name: "suisSelectMultiChips" }); }
|
|
1799
|
-
}
|
|
1800
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectMultiChipsPipe, decorators: [{
|
|
1801
|
-
type: Pipe,
|
|
1802
|
-
args: [{
|
|
1803
|
-
standalone: true,
|
|
1804
|
-
name: 'suisSelectMultiChips',
|
|
1805
|
-
}]
|
|
1806
|
-
}] });
|
|
1807
|
-
|
|
1808
|
-
class SuisSelectMultiIsSelectedPipe {
|
|
1809
|
-
transform(optionValue, values) {
|
|
1810
|
-
return values.some((value) => JSON.stringify(value) === JSON.stringify(optionValue));
|
|
1811
|
-
}
|
|
1812
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectMultiIsSelectedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1813
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectMultiIsSelectedPipe, isStandalone: true, name: "suisSelectMultiIsSelected" }); }
|
|
1814
|
-
}
|
|
1815
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectMultiIsSelectedPipe, decorators: [{
|
|
1816
|
-
type: Pipe,
|
|
1817
|
-
args: [{
|
|
1818
|
-
standalone: true,
|
|
1819
|
-
name: 'suisSelectMultiIsSelected',
|
|
1820
|
-
}]
|
|
1821
|
-
}] });
|
|
1822
|
-
|
|
1823
|
-
class SuisSelectMultiComponent extends SuisSelectBase {
|
|
1824
|
-
constructor() {
|
|
1825
|
-
super(...arguments);
|
|
1826
|
-
/** @internal */
|
|
1827
|
-
this.values = [];
|
|
1828
|
-
/**
|
|
1829
|
-
* Allows to select duplicated values and remove checkboxes next to options' label. By default set to false.
|
|
1830
|
-
*/
|
|
1831
|
-
this.duplicate = false;
|
|
1832
|
-
/**
|
|
1833
|
-
* Sets the color pallette of the chips. Type of SuisColor. By default set to 'primary'.
|
|
1834
|
-
*/
|
|
1835
|
-
this.chipColor = 'primary';
|
|
1836
|
-
/**
|
|
1837
|
-
* Sets the color of the chips' cross icon. Type of SuisColor. By default set to 'white'.
|
|
1838
|
-
*/
|
|
1839
|
-
this.chipIconColor = 'white';
|
|
1840
|
-
}
|
|
1841
|
-
writeValue(obj) {
|
|
1842
|
-
this.values = obj;
|
|
1843
|
-
this._onChange(this.values);
|
|
1844
|
-
this.cdRef.markForCheck();
|
|
1845
|
-
}
|
|
1846
|
-
onSelect(value) {
|
|
1847
|
-
if (this.duplicate ||
|
|
1848
|
-
!this.values.some((value) => JSON.stringify(value) === JSON.stringify(value))) {
|
|
1849
|
-
this.setValue([...this.values, value]);
|
|
1850
|
-
}
|
|
1851
|
-
else {
|
|
1852
|
-
this.setValue([
|
|
1853
|
-
...this.values.filter((value) => JSON.stringify(value) !== JSON.stringify(value)),
|
|
1854
|
-
]);
|
|
1855
|
-
}
|
|
1856
|
-
}
|
|
1857
|
-
onRemove(index) {
|
|
1858
|
-
const values = [...this.values];
|
|
1859
|
-
values.splice(index, 1);
|
|
1860
|
-
this.setValue([...values]);
|
|
1861
|
-
}
|
|
1862
|
-
clearValue() {
|
|
1863
|
-
this.setValue([]);
|
|
1864
|
-
}
|
|
1865
|
-
setValue(value) {
|
|
1866
|
-
this.values = value;
|
|
1867
|
-
this._onChange(this.values);
|
|
1868
|
-
this.changed.emit();
|
|
1869
|
-
this.cdRef.markForCheck();
|
|
1870
|
-
}
|
|
1871
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectMultiComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1872
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisSelectMultiComponent, isStandalone: true, selector: "suis-select-multi", inputs: { duplicate: "duplicate", chipColor: "chipColor", chipIconColor: "chipIconColor" }, providers: [
|
|
1873
|
-
{
|
|
1874
|
-
provide: NG_VALUE_ACCESSOR,
|
|
1875
|
-
multi: true,
|
|
1876
|
-
useExisting: forwardRef(() => SuisSelectMultiComponent),
|
|
1877
|
-
},
|
|
1878
|
-
], 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=\"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 ? 'chevron-up' : '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;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.625rem;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{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-select-multi__button--invalid{border:.0625rem solid #ff4757}.suis-select-multi__button--invalid:focus{border:.0625rem solid #ff4757;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::-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}.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}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$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 }); }
|
|
1879
|
-
}
|
|
1880
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectMultiComponent, decorators: [{
|
|
1881
|
-
type: Component,
|
|
1882
|
-
args: [{ selector: 'suis-select-multi', standalone: true, imports: [
|
|
1883
|
-
NgFor,
|
|
1884
|
-
NgIf,
|
|
1885
|
-
FormsModule,
|
|
1886
|
-
SuisIconComponent,
|
|
1887
|
-
SuisChipComponent,
|
|
1888
|
-
SuisSelectOptionComponent,
|
|
1889
|
-
SuisSelectMultiChipsPipe,
|
|
1890
|
-
SuisSelectMultiIsSelectedPipe,
|
|
1891
|
-
SuisSelectSortOptionsPipe,
|
|
1892
|
-
SuisSelectFilterOptionsPipe,
|
|
1893
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
1894
|
-
{
|
|
1895
|
-
provide: NG_VALUE_ACCESSOR,
|
|
1896
|
-
multi: true,
|
|
1897
|
-
useExisting: forwardRef(() => SuisSelectMultiComponent),
|
|
1898
|
-
},
|
|
1899
|
-
], 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=\"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 ? 'chevron-up' : '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;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.625rem;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{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-select-multi__button--invalid{border:.0625rem solid #ff4757}.suis-select-multi__button--invalid:focus{border:.0625rem solid #ff4757;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::-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}.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}\n"] }]
|
|
1900
|
-
}], propDecorators: { duplicate: [{
|
|
1901
|
-
type: Input
|
|
1902
|
-
}], chipColor: [{
|
|
1903
|
-
type: Input
|
|
1904
|
-
}], chipIconColor: [{
|
|
1905
|
-
type: Input
|
|
1906
|
-
}] } });
|
|
1907
|
-
|
|
1908
|
-
class SuisSelectMultiModule {
|
|
1909
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectMultiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1910
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectMultiModule, imports: [SuisSelectMultiComponent, SuisSelectOptionDirective], exports: [SuisSelectMultiComponent, SuisSelectOptionDirective] }); }
|
|
1911
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectMultiModule, imports: [SuisSelectMultiComponent] }); }
|
|
1912
|
-
}
|
|
1913
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectMultiModule, decorators: [{
|
|
1914
|
-
type: NgModule,
|
|
1915
|
-
args: [{
|
|
1916
|
-
imports: [SuisSelectMultiComponent, SuisSelectOptionDirective],
|
|
1917
|
-
exports: [SuisSelectMultiComponent, SuisSelectOptionDirective],
|
|
1918
|
-
}]
|
|
1919
|
-
}] });
|
|
1920
|
-
|
|
1921
1930
|
class SuisSpinnerContainerComponent {
|
|
1922
1931
|
constructor() {
|
|
1923
1932
|
/**
|
|
1924
|
-
* Sets the size of the spinner. Type of SuisSize. By default set to '
|
|
1933
|
+
* Sets the size of the spinner. Type of SuisSize. By default set to 'md'.
|
|
1925
1934
|
*/
|
|
1926
|
-
this.size = '
|
|
1935
|
+
this.size = 'md';
|
|
1927
1936
|
/**
|
|
1928
1937
|
* Sets the color of the spinner. Type of SuisColor. By default set to 'primary'.
|
|
1929
1938
|
*/
|
|
@@ -1938,11 +1947,11 @@ class SuisSpinnerContainerComponent {
|
|
|
1938
1947
|
this.absolute = false;
|
|
1939
1948
|
}
|
|
1940
1949
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSpinnerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1941
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: "component", type: SuisSpinnerComponent, selector: "suis-spinner", inputs: ["size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1950
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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;height:100%}.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: "component", type: SuisSpinnerComponent, selector: "suis-spinner", inputs: ["size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1942
1951
|
}
|
|
1943
1952
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSpinnerContainerComponent, decorators: [{
|
|
1944
1953
|
type: Component,
|
|
1945
|
-
args: [{ selector: 'suis-spinner-container', standalone: true, imports: [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"] }]
|
|
1954
|
+
args: [{ selector: 'suis-spinner-container', standalone: true, imports: [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;height:100%}.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"] }]
|
|
1946
1955
|
}], propDecorators: { size: [{
|
|
1947
1956
|
type: Input
|
|
1948
1957
|
}], color: [{
|
|
@@ -2175,12 +2184,17 @@ class SuisTabsComponent {
|
|
|
2175
2184
|
* Name of the current displayed tab. Must correspond with the name passed into suisTab directive. By default set to empty string.
|
|
2176
2185
|
*/
|
|
2177
2186
|
this.currentTab = '';
|
|
2187
|
+
/**
|
|
2188
|
+
* Emits name of the clicked tab.
|
|
2189
|
+
*/
|
|
2190
|
+
this.tabClicked = new EventEmitter();
|
|
2178
2191
|
}
|
|
2179
2192
|
onTabActionClick(name) {
|
|
2180
2193
|
this.currentTab = name;
|
|
2194
|
+
this.tabClicked.emit(name);
|
|
2181
2195
|
}
|
|
2182
2196
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2183
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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{font-weight:500;color:#192a56;border-bottom-color:#192a56}.suis-tabs__actions button:hover{border-bottom-color:#273c75;cursor:pointer}.suis-tabs__content{margin-top:1rem}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SuisTabActionsPipe, name: "suisTabActions" }, { kind: "pipe", type: SuisTabTemplatePipe, name: "suisTabTemplate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2197
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisTabsComponent, isStandalone: true, selector: "suis-tabs", inputs: { currentTab: "currentTab" }, outputs: { tabClicked: "tabClicked" }, 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{font-weight:500;color:#192a56;border-bottom-color:#192a56}.suis-tabs__actions button:hover{border-bottom-color:#273c75;cursor:pointer}.suis-tabs__content{margin-top:1rem}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SuisTabActionsPipe, name: "suisTabActions" }, { kind: "pipe", type: SuisTabTemplatePipe, name: "suisTabTemplate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2184
2198
|
}
|
|
2185
2199
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisTabsComponent, decorators: [{
|
|
2186
2200
|
type: Component,
|
|
@@ -2190,6 +2204,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2190
2204
|
args: [SuisTabDirective]
|
|
2191
2205
|
}], currentTab: [{
|
|
2192
2206
|
type: Input
|
|
2207
|
+
}], tabClicked: [{
|
|
2208
|
+
type: Output
|
|
2193
2209
|
}] } });
|
|
2194
2210
|
|
|
2195
2211
|
class SuisTabsModule {
|
|
@@ -2301,5 +2317,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2301
2317
|
* Generated bundle index. Do not edit.
|
|
2302
2318
|
*/
|
|
2303
2319
|
|
|
2304
|
-
export { SuisAccordionComponent, SuisAlertComponent, SuisBoxComponent, SuisBreadcrumbsComponent, SuisButtonComponent, SuisButtonLinkComponent, SuisButtonOutlinedComponent, SuisChipComponent, SuisContainerComponent, SuisDialogComponent, SuisDialogContainerComponent, SuisDialogService, SuisDividerComponent, SuisFormFieldComponent, SuisIconComponent, SuisInputCheckboxComponent, SuisInputChipsComponent, SuisInputComponent, SuisInputImageComponent, SuisInputNumberComponent, SuisInputRadioComponent, SuisItemComponent, SuisLabelComponent, SuisNavigationComponent, SuisNavigationGroupComponent, SuisNavigationGroupItemComponent, SuisNavigationItemComponent, SuisNavigationItemDirective, SuisNavigationModule, SuisNgClassPipe, SuisNotificationComponent, SuisNotificationService, SuisNotificationsComponent, SuisPaginationComponent, SuisProgressBarComponent, SuisSelectComponent, SuisSelectModule, SuisSelectMultiComponent,
|
|
2320
|
+
export { SuisAccordionComponent, SuisAlertComponent, SuisBoxComponent, SuisBreadcrumbsComponent, SuisButtonComponent, SuisButtonLinkComponent, SuisButtonOutlinedComponent, SuisChipComponent, SuisContainerComponent, SuisDialogComponent, SuisDialogContainerComponent, SuisDialogService, SuisDividerComponent, SuisFormFieldComponent, SuisIconComponent, SuisInputCheckboxComponent, SuisInputChipsComponent, SuisInputComponent, SuisInputImageComponent, SuisInputNumberComponent, SuisInputRadioComponent, SuisItemComponent, SuisLabelComponent, SuisNavigationComponent, SuisNavigationGroupComponent, SuisNavigationGroupItemComponent, SuisNavigationItemComponent, SuisNavigationItemDirective, SuisNavigationModule, SuisNgClassPipe, SuisNotificationComponent, SuisNotificationService, SuisNotificationsComponent, SuisPaginationComponent, SuisProgressBarComponent, SuisSelectComponent, SuisSelectModule, SuisSelectMultiComponent, SuisSelectOptionComponent, SuisSelectOptionDirective, SuisSpinnerComponent, SuisSpinnerContainerComponent, SuisTabDirective, SuisTableCellDirective, SuisTableColumnDirective, SuisTableComponent, SuisTableModule, SuisTabsComponent, SuisTabsModule, SuisTextAreaComponent, SuisTitleComponent, SuisToggleComponent, SuisToolbarComponent };
|
|
2305
2321
|
//# sourceMappingURL=suis.mjs.map
|