suis 0.31.2 → 0.32.1
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +1 -0
- package/esm2022/lib/components/index.mjs +2 -1
- package/esm2022/lib/components/suis-divider/index.mjs +2 -0
- package/esm2022/lib/components/suis-divider/suis-divider.component.mjs +22 -0
- package/fesm2022/suis.mjs +25 -7
- package/fesm2022/suis.mjs.map +1 -1
- package/lib/components/index.d.ts +1 -0
- package/lib/components/suis-divider/index.d.ts +1 -0
- package/lib/components/suis-divider/suis-divider.component.d.ts +10 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -52,6 +52,7 @@ Modern UI component library for quick development of editor dashboard systems. S
|
|
|
52
52
|
| Accordion | SuisAccordion | suis-accordion | 0.30.0 |
|
|
53
53
|
| Dialog | SuisDialog | suis-dialog | 0.31.0 |
|
|
54
54
|
| DialogContainer | SuisDialogContainer | suis-dialog-container | 0.31.0 |
|
|
55
|
+
| Divider | SuisDivider | suis-divider | 0.32.0 |
|
|
55
56
|
|
|
56
57
|
## Pipes
|
|
57
58
|
|
|
@@ -9,6 +9,7 @@ export * from './suis-chip';
|
|
|
9
9
|
export * from './suis-container';
|
|
10
10
|
export * from './suis-dialog';
|
|
11
11
|
export * from './suis-dialog-container';
|
|
12
|
+
export * from './suis-divider';
|
|
12
13
|
export * from './suis-form-field';
|
|
13
14
|
export * from './suis-icon';
|
|
14
15
|
export * from './suis-input';
|
|
@@ -38,4 +39,4 @@ export * from './suis-text-area';
|
|
|
38
39
|
export * from './suis-title';
|
|
39
40
|
export * from './suis-toggle';
|
|
40
41
|
export * from './suis-toolbar';
|
|
41
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
42
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL3N1aXMvc3JjL2xpYi9jb21wb25lbnRzL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsa0JBQWtCLENBQUM7QUFDakMsY0FBYyxjQUFjLENBQUM7QUFDN0IsY0FBYyxZQUFZLENBQUM7QUFDM0IsY0FBYyxvQkFBb0IsQ0FBQztBQUNuQyxjQUFjLGVBQWUsQ0FBQztBQUM5QixjQUFjLG9CQUFvQixDQUFDO0FBQ25DLGNBQWMsd0JBQXdCLENBQUM7QUFDdkMsY0FBYyxhQUFhLENBQUM7QUFDNUIsY0FBYyxrQkFBa0IsQ0FBQztBQUNqQyxjQUFjLGVBQWUsQ0FBQztBQUM5QixjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMsZ0JBQWdCLENBQUM7QUFDL0IsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxjQUFjLGFBQWEsQ0FBQztBQUM1QixjQUFjLGNBQWMsQ0FBQztBQUM3QixjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsb0JBQW9CLENBQUM7QUFDbkMsY0FBYyxvQkFBb0IsQ0FBQztBQUNuQyxjQUFjLHFCQUFxQixDQUFDO0FBQ3BDLGNBQWMsb0JBQW9CLENBQUM7QUFDbkMsY0FBYyxhQUFhLENBQUM7QUFDNUIsY0FBYyxjQUFjLENBQUM7QUFDN0IsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMsOEJBQThCLENBQUM7QUFDN0MsY0FBYyx3QkFBd0IsQ0FBQztBQUN2QyxjQUFjLHFCQUFxQixDQUFDO0FBQ3BDLGNBQWMsc0JBQXNCLENBQUM7QUFDckMsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxjQUFjLHFCQUFxQixDQUFDO0FBQ3BDLGNBQWMsZUFBZSxDQUFDO0FBQzlCLGNBQWMsc0JBQXNCLENBQUM7QUFDckMsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLGdCQUFnQixDQUFDO0FBQy9CLGNBQWMsMEJBQTBCLENBQUM7QUFDekMsY0FBYyxjQUFjLENBQUM7QUFDN0IsY0FBYyxhQUFhLENBQUM7QUFDNUIsY0FBYyxrQkFBa0IsQ0FBQztBQUNqQyxjQUFjLGNBQWMsQ0FBQztBQUM3QixjQUFjLGVBQWUsQ0FBQztBQUM5QixjQUFjLGdCQUFnQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9zdWlzLWFjY29yZGlvbic7XG5leHBvcnQgKiBmcm9tICcuL3N1aXMtYWxlcnQnO1xuZXhwb3J0ICogZnJvbSAnLi9zdWlzLWJveCc7XG5leHBvcnQgKiBmcm9tICcuL3N1aXMtYnJlYWRjcnVtYnMnO1xuZXhwb3J0ICogZnJvbSAnLi9zdWlzLWJ1dHRvbic7XG5leHBvcnQgKiBmcm9tICcuL3N1aXMtYnV0dG9uLWxpbmsnO1xuZXhwb3J0ICogZnJvbSAnLi9zdWlzLWJ1dHRvbi1vdXRsaW5lZCc7XG5leHBvcnQgKiBmcm9tICcuL3N1aXMtY2hpcCc7XG5leHBvcnQgKiBmcm9tICcuL3N1aXMtY29udGFpbmVyJztcbmV4cG9ydCAqIGZyb20gJy4vc3Vpcy1kaWFsb2cnO1xuZXhwb3J0ICogZnJvbSAnLi9zdWlzLWRpYWxvZy1jb250YWluZXInO1xuZXhwb3J0ICogZnJvbSAnLi9zdWlzLWRpdmlkZXInO1xuZXhwb3J0ICogZnJvbSAnLi9zdWlzLWZvcm0tZmllbGQnO1xuZXhwb3J0ICogZnJvbSAnLi9zdWlzLWljb24nO1xuZXhwb3J0ICogZnJvbSAnLi9zdWlzLWlucHV0JztcbmV4cG9ydCAqIGZyb20gJy4vc3Vpcy1pbnB1dC1jaGVja2JveCc7XG5leHBvcnQgKiBmcm9tICcuL3N1aXMtaW5wdXQtY2hpcHMnO1xuZXhwb3J0ICogZnJvbSAnLi9zdWlzLWlucHV0LWltYWdlJztcbmV4cG9ydCAqIGZyb20gJy4vc3Vpcy1pbnB1dC1udW1iZXInO1xuZXhwb3J0ICogZnJvbSAnLi9zdWlzLWlucHV0LXJhZGlvJztcbmV4cG9ydCAqIGZyb20gJy4vc3Vpcy1pdGVtJztcbmV4cG9ydCAqIGZyb20gJy4vc3Vpcy1sYWJlbCc7XG5leHBvcnQgKiBmcm9tICcuL3N1aXMtbmF2aWdhdGlvbic7XG5leHBvcnQgKiBmcm9tICcuL3N1aXMtbmF2aWdhdGlvbi1ncm91cCc7XG5leHBvcnQgKiBmcm9tICcuL3N1aXMtbmF2aWdhdGlvbi1ncm91cC1pdGVtJztcbmV4cG9ydCAqIGZyb20gJy4vc3Vpcy1uYXZpZ2F0aW9uLWl0ZW0nO1xuZXhwb3J0ICogZnJvbSAnLi9zdWlzLW5vdGlmaWNhdGlvbic7XG5leHBvcnQgKiBmcm9tICcuL3N1aXMtbm90aWZpY2F0aW9ucyc7XG5leHBvcnQgKiBmcm9tICcuL3N1aXMtcGFnaW5hdGlvbic7XG5leHBvcnQgKiBmcm9tICcuL3N1aXMtcHJvZ3Jlc3MtYmFyJztcbmV4cG9ydCAqIGZyb20gJy4vc3Vpcy1zZWxlY3QnO1xuZXhwb3J0ICogZnJvbSAnLi9zdWlzLXNlbGVjdC1vcHRpb24nO1xuZXhwb3J0ICogZnJvbSAnLi9zdWlzLXNlbGVjdC1tdWx0aSc7XG5leHBvcnQgKiBmcm9tICcuL3N1aXMtc3Bpbm5lcic7XG5leHBvcnQgKiBmcm9tICcuL3N1aXMtc3Bpbm5lci1jb250YWluZXInO1xuZXhwb3J0ICogZnJvbSAnLi9zdWlzLXRhYmxlJztcbmV4cG9ydCAqIGZyb20gJy4vc3Vpcy10YWJzJztcbmV4cG9ydCAqIGZyb20gJy4vc3Vpcy10ZXh0LWFyZWEnO1xuZXhwb3J0ICogZnJvbSAnLi9zdWlzLXRpdGxlJztcbmV4cG9ydCAqIGZyb20gJy4vc3Vpcy10b2dnbGUnO1xuZXhwb3J0ICogZnJvbSAnLi9zdWlzLXRvb2xiYXInO1xuIl19
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export * from './suis-divider.component';
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL3N1aXMvc3JjL2xpYi9jb21wb25lbnRzL3N1aXMtZGl2aWRlci9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUFjLDBCQUEwQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9zdWlzLWRpdmlkZXIuY29tcG9uZW50JztcbiJdfQ==
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
|
|
2
|
+
import { CommonModule } from '@angular/common';
|
|
3
|
+
import { SuisNgClassPipe } from '../../pipes';
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
import * as i1 from "@angular/common";
|
|
6
|
+
export class SuisDividerComponent {
|
|
7
|
+
constructor() {
|
|
8
|
+
/**
|
|
9
|
+
* Sets the color of the divider. Type of SuisColor. By default set to 'tertiary'.
|
|
10
|
+
*/
|
|
11
|
+
this.color = 'tertiary';
|
|
12
|
+
}
|
|
13
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14
|
+
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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
15
|
+
}
|
|
16
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisDividerComponent, decorators: [{
|
|
17
|
+
type: Component,
|
|
18
|
+
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"] }]
|
|
19
|
+
}], propDecorators: { color: [{
|
|
20
|
+
type: Input
|
|
21
|
+
}] } });
|
|
22
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Vpcy1kaXZpZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvc3Vpcy9zcmMvbGliL2NvbXBvbmVudHMvc3Vpcy1kaXZpZGVyL3N1aXMtZGl2aWRlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL3N1aXMvc3JjL2xpYi9jb21wb25lbnRzL3N1aXMtZGl2aWRlci9zdWlzLWRpdmlkZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUUsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxhQUFhLENBQUM7OztBQVc5QyxNQUFNLE9BQU8sb0JBQW9CO0lBUmpDO1FBU0U7O1dBRUc7UUFDTSxVQUFLLEdBQWMsVUFBVSxDQUFDO0tBQ3hDOytHQUxZLG9CQUFvQjttR0FBcEIsb0JBQW9CLG9HQ2JqQyxpR0FJQSx1ckJESVksWUFBWSx3SEFBRSxlQUFlOzs0RkFLNUIsb0JBQW9CO2tCQVJoQyxTQUFTOytCQUNFLGNBQWMsY0FDWixJQUFJLFdBQ1AsQ0FBQyxZQUFZLEVBQUUsZUFBZSxDQUFDLG1CQUd2Qix1QkFBdUIsQ0FBQyxNQUFNOzhCQU10QyxLQUFLO3NCQUFiLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IFN1aXNOZ0NsYXNzUGlwZSB9IGZyb20gJy4uLy4uL3BpcGVzJztcbmltcG9ydCB7IFN1aXNDb2xvciB9IGZyb20gJy4uLy4uL3R5cGVzL3N1aXMtY29sb3IudHlwZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3N1aXMtZGl2aWRlcicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIFN1aXNOZ0NsYXNzUGlwZV0sXG4gIHRlbXBsYXRlVXJsOiAnLi9zdWlzLWRpdmlkZXIuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9zdWlzLWRpdmlkZXIuY29tcG9uZW50LnNjc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIFN1aXNEaXZpZGVyQ29tcG9uZW50IHtcbiAgLyoqXG4gICAqIFNldHMgdGhlIGNvbG9yIG9mIHRoZSBkaXZpZGVyLiBUeXBlIG9mIFN1aXNDb2xvci4gQnkgZGVmYXVsdCBzZXQgdG8gJ3RlcnRpYXJ5Jy5cbiAgICovXG4gIEBJbnB1dCgpIGNvbG9yOiBTdWlzQ29sb3IgPSAndGVydGlhcnknO1xufVxuIiwiPGRpdlxuICBjbGFzcz1cInN1aXMtZGl2aWRlclwiXG4gIFtuZ0NsYXNzXT1cIidzdWlzLWRpdmlkZXInIHwgc3Vpc05nQ2xhc3MgOiBjb2xvclwiXG4+PC9kaXY+XG4iXX0=
|
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
|
|
3
|
+
import * as i1$1 from '@angular/common';
|
|
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
|
|
|
@@ -571,6 +572,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
571
572
|
args: [{ selector: 'suis-dialog-container', standalone: true, imports: [NgIf, NgComponentOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-dialog-container\" *ngIf=\"dialog()\">\n <ng-container\n *ngComponentOutlet=\"dialog()!.component; inputs: dialog()!.inputs\"\n ></ng-container>\n</div>\n", styles: [".suis-dialog-container{position:absolute;inset:0;z-index:20}\n"] }]
|
|
572
573
|
}] });
|
|
573
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
|
+
}
|
|
582
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
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 }); }
|
|
584
|
+
}
|
|
585
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisDividerComponent, decorators: [{
|
|
586
|
+
type: Component,
|
|
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
|
+
}] } });
|
|
591
|
+
|
|
574
592
|
class SuisFormFieldComponent {
|
|
575
593
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
576
594
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisFormFieldComponent, isStandalone: true, selector: "suis-form-field", inputs: { errorTemplate: "errorTemplate" }, ngImport: i0, template: "<div class=\"suis-form-field\">\n <ng-content></ng-content>\n <div *ngIf=\"errorTemplate\" class=\"suis-form-field__error\">\n <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-form-field{width:100%}.suis-form-field__error{color:#ff4757;margin-top:.375rem;font-size:.75rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
@@ -845,7 +863,7 @@ class SuisInputChipsComponent extends SuisInputBase {
|
|
|
845
863
|
multi: true,
|
|
846
864
|
useExisting: forwardRef(() => SuisInputChipsComponent),
|
|
847
865
|
},
|
|
848
|
-
], 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 }); }
|
|
849
867
|
}
|
|
850
868
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisInputChipsComponent, decorators: [{
|
|
851
869
|
type: Component,
|
|
@@ -1551,7 +1569,7 @@ class SuisSelectComponent extends SuisSelectBase {
|
|
|
1551
1569
|
multi: true,
|
|
1552
1570
|
useExisting: forwardRef(() => SuisSelectComponent),
|
|
1553
1571
|
},
|
|
1554
|
-
], 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 }); }
|
|
1555
1573
|
}
|
|
1556
1574
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectComponent, decorators: [{
|
|
1557
1575
|
type: Component,
|
|
@@ -1683,7 +1701,7 @@ class SuisPaginationComponent {
|
|
|
1683
1701
|
this.perPageChange.emit(this.perPage);
|
|
1684
1702
|
}
|
|
1685
1703
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1686
|
-
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$
|
|
1704
|
+
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 }); }
|
|
1687
1705
|
}
|
|
1688
1706
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisPaginationComponent, decorators: [{
|
|
1689
1707
|
type: Component,
|
|
@@ -1866,7 +1884,7 @@ class SuisSelectMultiComponent extends SuisSelectBase {
|
|
|
1866
1884
|
multi: true,
|
|
1867
1885
|
useExisting: forwardRef(() => SuisSelectMultiComponent),
|
|
1868
1886
|
},
|
|
1869
|
-
], 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$
|
|
1887
|
+
], 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 }); }
|
|
1870
1888
|
}
|
|
1871
1889
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectMultiComponent, decorators: [{
|
|
1872
1890
|
type: Component,
|
|
@@ -2292,5 +2310,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2292
2310
|
* Generated bundle index. Do not edit.
|
|
2293
2311
|
*/
|
|
2294
2312
|
|
|
2295
|
-
export { SuisAccordionComponent, SuisAlertComponent, SuisBoxComponent, SuisBreadcrumbsComponent, SuisButtonComponent, SuisButtonLinkComponent, SuisButtonOutlinedComponent, SuisChipComponent, SuisContainerComponent, SuisDialogComponent, SuisDialogContainerComponent, SuisDialogService, 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, SuisSelectMultiModule, SuisSelectOptionComponent, SuisSelectOptionDirective, SuisSpinnerComponent, SuisSpinnerContainerComponent, SuisTabDirective, SuisTableCellDirective, SuisTableColumnDirective, SuisTableComponent, SuisTableModule, SuisTabsComponent, SuisTabsModule, SuisTextAreaComponent, SuisTitleComponent, SuisToggleComponent, SuisToolbarComponent };
|
|
2313
|
+
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, SuisSelectMultiModule, SuisSelectOptionComponent, SuisSelectOptionDirective, SuisSpinnerComponent, SuisSpinnerContainerComponent, SuisTabDirective, SuisTableCellDirective, SuisTableColumnDirective, SuisTableComponent, SuisTableModule, SuisTabsComponent, SuisTabsModule, SuisTextAreaComponent, SuisTitleComponent, SuisToggleComponent, SuisToolbarComponent };
|
|
2296
2314
|
//# sourceMappingURL=suis.mjs.map
|