suis 0.32.2 → 0.32.4
Sign up to get free protection for your applications and to get access to all the features.
- package/esm2022/lib/components/suis-input/suis-input.component.mjs +3 -3
- package/esm2022/lib/components/suis-input-checkbox/suis-input-checkbox.component.mjs +3 -3
- package/esm2022/lib/components/suis-input-chips/suis-input-chips.component.mjs +3 -3
- package/esm2022/lib/components/suis-input-image/suis-input-image.component.mjs +3 -3
- package/esm2022/lib/components/suis-input-number/suis-input-number.component.mjs +3 -3
- package/esm2022/lib/components/suis-input-radio/suis-input-radio.component.mjs +3 -3
- package/esm2022/lib/components/suis-progress-bar/suis-progress-bar.component.mjs +9 -3
- package/esm2022/lib/components/suis-select/suis-select.component.mjs +3 -3
- package/esm2022/lib/components/suis-select-multi/suis-select-multi.component.mjs +3 -3
- package/esm2022/lib/components/suis-text-area/suis-text-area.component.mjs +3 -3
- package/esm2022/lib/components/suis-title/index.mjs +2 -1
- package/esm2022/lib/components/suis-title/suis-title.component.mjs +17 -5
- package/esm2022/lib/components/suis-title/suis-title.enum.mjs +7 -0
- package/esm2022/lib/components/suis-toggle/suis-toggle.component.mjs +3 -3
- package/fesm2022/suis.mjs +50 -27
- package/fesm2022/suis.mjs.map +1 -1
- package/lib/components/suis-progress-bar/suis-progress-bar.component.d.ts +6 -2
- package/lib/components/suis-title/index.d.ts +1 -0
- package/lib/components/suis-title/suis-title.component.d.ts +8 -1
- package/lib/components/suis-title/suis-title.enum.d.ts +5 -0
- package/package.json +1 -1
package/fesm2022/suis.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
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
3
|
import * as i1$1 from '@angular/common';
|
|
4
|
-
import { NgClass, NgIf, NgFor, NgComponentOutlet, CommonModule, NgTemplateOutlet } from '@angular/common';
|
|
4
|
+
import { NgClass, NgIf, NgFor, NgComponentOutlet, CommonModule, NgTemplateOutlet, NgSwitch, NgSwitchCase } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/router';
|
|
6
6
|
import { RouterModule } from '@angular/router';
|
|
7
7
|
import * as i1$2 from '@angular/forms';
|
|
@@ -702,7 +702,7 @@ class SuisInputComponent extends SuisInputBase {
|
|
|
702
702
|
multi: true,
|
|
703
703
|
useExisting: forwardRef(() => SuisInputComponent),
|
|
704
704
|
},
|
|
705
|
-
], usesInheritance: true, ngImport: i0, template: "<input\n class=\"suis-input\"\n [class.suis-input--invalid]=\"invalid\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [type]=\"type\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n (keydown.enter)=\"onEnter()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-input{width:100%;background-color:#fff;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.625rem}.suis-input:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input--invalid{border:.0625rem solid #ff4757}.suis-input--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
705
|
+
], usesInheritance: true, ngImport: i0, template: "<input\n class=\"suis-input\"\n [class.suis-input--invalid]=\"invalid\"\n [class.suis-input--readonly]=\"readonly\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [type]=\"type\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n (keydown.enter)=\"onEnter()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-input{width:100%;background-color:#fff;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.625rem}.suis-input:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input--invalid{border:.0625rem solid #ff4757}.suis-input--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}.suis-input--readonly{cursor:not-allowed}.suis-input--readonly:focus{border:.0625rem solid #dcdde1;box-shadow:none;outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
706
706
|
}
|
|
707
707
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisInputComponent, decorators: [{
|
|
708
708
|
type: Component,
|
|
@@ -712,7 +712,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
712
712
|
multi: true,
|
|
713
713
|
useExisting: forwardRef(() => SuisInputComponent),
|
|
714
714
|
},
|
|
715
|
-
], template: "<input\n class=\"suis-input\"\n [class.suis-input--invalid]=\"invalid\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [type]=\"type\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n (keydown.enter)=\"onEnter()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-input{width:100%;background-color:#fff;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.625rem}.suis-input:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input--invalid{border:.0625rem solid #ff4757}.suis-input--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}\n"] }]
|
|
715
|
+
], template: "<input\n class=\"suis-input\"\n [class.suis-input--invalid]=\"invalid\"\n [class.suis-input--readonly]=\"readonly\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [type]=\"type\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n (keydown.enter)=\"onEnter()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-input{width:100%;background-color:#fff;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.625rem}.suis-input:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input--invalid{border:.0625rem solid #ff4757}.suis-input--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}.suis-input--readonly{cursor:not-allowed}.suis-input--readonly:focus{border:.0625rem solid #dcdde1;box-shadow:none;outline:none}\n"] }]
|
|
716
716
|
}], propDecorators: { type: [{
|
|
717
717
|
type: Input
|
|
718
718
|
}], placeholder: [{
|
|
@@ -798,7 +798,7 @@ class SuisInputCheckboxComponent extends SuisCheckboxBase {
|
|
|
798
798
|
multi: true,
|
|
799
799
|
useExisting: forwardRef(() => SuisInputCheckboxComponent),
|
|
800
800
|
},
|
|
801
|
-
], usesInheritance: true, ngImport: i0, template: "<input\n #input\n type=\"checkbox\"\n class=\"suis-input-checkbox\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n/>\n\n<suis-label\n [for]=\"id\"\n [required]=\"required\"\n [pointer]=\"true\"\n [readonly]=\"readonly\"\n>\n <div\n [tabindex]=\"readonly ? -1 : 0\"\n class=\"suis-input-checkbox__check\"\n [class.suis-input-checkbox__check--invalid]=\"invalid\"\n [class.suis-input-checkbox__check--readonly]=\"readonly\"\n >\n <suis-icon\n *ngIf=\"value\"\n type=\"check\"\n [color]=\"readonly ? 'tertiary' : 'primary'\"\n ></suis-icon>\n </div>\n <ng-content></ng-content>\n</suis-label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:flex}.suis-input-checkbox{display:none}.suis-input-
|
|
801
|
+
], usesInheritance: true, ngImport: i0, template: "<input\n #input\n type=\"checkbox\"\n class=\"suis-input-checkbox\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n/>\n\n<suis-label\n class=\"suis-input-checkbox__label\"\n [class.suis-input-checkbox__label--invalid]=\"invalid\"\n [class.suis-input-checkbox__label--readonly]=\"readonly\"\n [for]=\"id\"\n [required]=\"required\"\n [pointer]=\"true\"\n [readonly]=\"readonly\"\n>\n <div\n [tabindex]=\"readonly ? -1 : 0\"\n class=\"suis-input-checkbox__check\"\n [class.suis-input-checkbox__check--invalid]=\"invalid\"\n [class.suis-input-checkbox__check--readonly]=\"readonly\"\n >\n <suis-icon\n *ngIf=\"value\"\n type=\"check\"\n [color]=\"readonly ? 'tertiary' : 'primary'\"\n ></suis-icon>\n </div>\n <ng-content></ng-content>\n</suis-label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:flex}.suis-input-checkbox{display:none}.suis-input-checkbox__label--invalid{color:#ff4757}.suis-input-checkbox__label--readonly{cursor:not-allowed}.suis-input-checkbox__check{width:1.25rem;height:1.25rem;border:.0625rem solid #dcdde1;display:flex;justify-content:center;align-items:center;margin-right:.5rem;background-color:#fff;border-radius:.25rem}.suis-input-checkbox__check:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-checkbox__check--readonly{border:.0625rem solid #dcdde1;cursor:not-allowed}.suis-input-checkbox__check--readonly:focus{box-shadow:none}.suis-input-checkbox__check--invalid{border:.0625rem solid #ff4757;color:#ff4757}.suis-input-checkbox__check--invalid:focus{box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SuisLabelComponent, selector: "suis-label", inputs: ["for", "required", "pointer", "readonly"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
802
802
|
}
|
|
803
803
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisInputCheckboxComponent, decorators: [{
|
|
804
804
|
type: Component,
|
|
@@ -808,7 +808,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
808
808
|
multi: true,
|
|
809
809
|
useExisting: forwardRef(() => SuisInputCheckboxComponent),
|
|
810
810
|
},
|
|
811
|
-
], template: "<input\n #input\n type=\"checkbox\"\n class=\"suis-input-checkbox\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n/>\n\n<suis-label\n [for]=\"id\"\n [required]=\"required\"\n [pointer]=\"true\"\n [readonly]=\"readonly\"\n>\n <div\n [tabindex]=\"readonly ? -1 : 0\"\n class=\"suis-input-checkbox__check\"\n [class.suis-input-checkbox__check--invalid]=\"invalid\"\n [class.suis-input-checkbox__check--readonly]=\"readonly\"\n >\n <suis-icon\n *ngIf=\"value\"\n type=\"check\"\n [color]=\"readonly ? 'tertiary' : 'primary'\"\n ></suis-icon>\n </div>\n <ng-content></ng-content>\n</suis-label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:flex}.suis-input-checkbox{display:none}.suis-input-
|
|
811
|
+
], template: "<input\n #input\n type=\"checkbox\"\n class=\"suis-input-checkbox\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n/>\n\n<suis-label\n class=\"suis-input-checkbox__label\"\n [class.suis-input-checkbox__label--invalid]=\"invalid\"\n [class.suis-input-checkbox__label--readonly]=\"readonly\"\n [for]=\"id\"\n [required]=\"required\"\n [pointer]=\"true\"\n [readonly]=\"readonly\"\n>\n <div\n [tabindex]=\"readonly ? -1 : 0\"\n class=\"suis-input-checkbox__check\"\n [class.suis-input-checkbox__check--invalid]=\"invalid\"\n [class.suis-input-checkbox__check--readonly]=\"readonly\"\n >\n <suis-icon\n *ngIf=\"value\"\n type=\"check\"\n [color]=\"readonly ? 'tertiary' : 'primary'\"\n ></suis-icon>\n </div>\n <ng-content></ng-content>\n</suis-label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:flex}.suis-input-checkbox{display:none}.suis-input-checkbox__label--invalid{color:#ff4757}.suis-input-checkbox__label--readonly{cursor:not-allowed}.suis-input-checkbox__check{width:1.25rem;height:1.25rem;border:.0625rem solid #dcdde1;display:flex;justify-content:center;align-items:center;margin-right:.5rem;background-color:#fff;border-radius:.25rem}.suis-input-checkbox__check:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-checkbox__check--readonly{border:.0625rem solid #dcdde1;cursor:not-allowed}.suis-input-checkbox__check--readonly:focus{box-shadow:none}.suis-input-checkbox__check--invalid{border:.0625rem solid #ff4757;color:#ff4757}.suis-input-checkbox__check--invalid:focus{box-shadow:0 2px 5px #ff4757bf}\n"] }]
|
|
812
812
|
}] });
|
|
813
813
|
|
|
814
814
|
class SuisInputChipsComponent extends SuisInputBase {
|
|
@@ -863,7 +863,7 @@ class SuisInputChipsComponent extends SuisInputBase {
|
|
|
863
863
|
multi: true,
|
|
864
864
|
useExisting: forwardRef(() => SuisInputChipsComponent),
|
|
865
865
|
},
|
|
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 }); }
|
|
866
|
+
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-input-chips\">\n <div *ngIf=\"!readonly\" #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 }); }
|
|
867
867
|
}
|
|
868
868
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisInputChipsComponent, decorators: [{
|
|
869
869
|
type: Component,
|
|
@@ -879,7 +879,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
879
879
|
multi: true,
|
|
880
880
|
useExisting: forwardRef(() => SuisInputChipsComponent),
|
|
881
881
|
},
|
|
882
|
-
], 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"] }]
|
|
882
|
+
], template: "<div class=\"suis-input-chips\">\n <div *ngIf=\"!readonly\" #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"] }]
|
|
883
883
|
}], propDecorators: { inputEl: [{
|
|
884
884
|
type: ViewChild,
|
|
885
885
|
args: ['input']
|
|
@@ -928,7 +928,7 @@ class SuisInputImageComponent extends SuisInputBase {
|
|
|
928
928
|
multi: true,
|
|
929
929
|
useExisting: forwardRef(() => SuisInputImageComponent),
|
|
930
930
|
},
|
|
931
|
-
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div
|
|
931
|
+
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"suis-input-image\"\n [class.suis-input-image--invalid]=\"invalid\"\n [class.suis-input-image--readonly]=\"readonly\"\n>\n <figure *ngIf=\"imageUrl\" class=\"suis-input-image__preview\">\n <img [src]=\"imageUrl\" alt=\"Uploaded image\" />\n <button type=\"button\" (click)=\"onRemove()\" [disabled]=\"readonly\">\n <suis-icon\n type=\"cross\"\n color=\"danger\"\n size=\"md\"\n [filled]=\"true\"\n ></suis-icon>\n </button>\n </figure>\n <input\n #input\n type=\"file\"\n class=\"suis-input-image__input\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n />\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-input-image{width:100%;background-color:#fff;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.625rem;display:flex;align-items:center}.suis-input-image:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-image--invalid{border:.0625rem solid #ff4757}.suis-input-image--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}.suis-input-image--readonly{cursor:not-allowed}.suis-input-image--readonly:focus{border:.0625rem solid #dcdde1;box-shadow:none;outline:none}.suis-input-image__preview{position:relative;margin-right:1rem}.suis-input-image__preview img{display:block;min-width:6.25rem;min-height:6.25rem;max-width:6.25rem;max-height:6.25rem;border-radius:.25rem;object-fit:contain;background-color:#dcdde1d9}.suis-input-image__preview button{position:absolute;top:.1875rem;right:.1875rem;border:0;background-color:transparent;cursor:pointer}.suis-input-image--invalid{color:#ff4757}.suis-input-image__input::file-selector-button{color:#fff;background-color:#273c75;border-radius:.25rem;transition:background-color .25s ease-in-out;padding:.25rem .75rem;border:0;font-size:.75rem}.suis-input-image__input:not(:disabled)::file-selector-button:hover{background-color:#273c75d9;cursor:pointer}.suis-input-image__input:disabled::file-selector-button,.suis-input-image__input:disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
932
932
|
}
|
|
933
933
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisInputImageComponent, decorators: [{
|
|
934
934
|
type: Component,
|
|
@@ -938,7 +938,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
938
938
|
multi: true,
|
|
939
939
|
useExisting: forwardRef(() => SuisInputImageComponent),
|
|
940
940
|
},
|
|
941
|
-
], template: "<div
|
|
941
|
+
], template: "<div\n class=\"suis-input-image\"\n [class.suis-input-image--invalid]=\"invalid\"\n [class.suis-input-image--readonly]=\"readonly\"\n>\n <figure *ngIf=\"imageUrl\" class=\"suis-input-image__preview\">\n <img [src]=\"imageUrl\" alt=\"Uploaded image\" />\n <button type=\"button\" (click)=\"onRemove()\" [disabled]=\"readonly\">\n <suis-icon\n type=\"cross\"\n color=\"danger\"\n size=\"md\"\n [filled]=\"true\"\n ></suis-icon>\n </button>\n </figure>\n <input\n #input\n type=\"file\"\n class=\"suis-input-image__input\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n />\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-input-image{width:100%;background-color:#fff;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.625rem;display:flex;align-items:center}.suis-input-image:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-image--invalid{border:.0625rem solid #ff4757}.suis-input-image--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}.suis-input-image--readonly{cursor:not-allowed}.suis-input-image--readonly:focus{border:.0625rem solid #dcdde1;box-shadow:none;outline:none}.suis-input-image__preview{position:relative;margin-right:1rem}.suis-input-image__preview img{display:block;min-width:6.25rem;min-height:6.25rem;max-width:6.25rem;max-height:6.25rem;border-radius:.25rem;object-fit:contain;background-color:#dcdde1d9}.suis-input-image__preview button{position:absolute;top:.1875rem;right:.1875rem;border:0;background-color:transparent;cursor:pointer}.suis-input-image--invalid{color:#ff4757}.suis-input-image__input::file-selector-button{color:#fff;background-color:#273c75;border-radius:.25rem;transition:background-color .25s ease-in-out;padding:.25rem .75rem;border:0;font-size:.75rem}.suis-input-image__input:not(:disabled)::file-selector-button:hover{background-color:#273c75d9;cursor:pointer}.suis-input-image__input:disabled::file-selector-button,.suis-input-image__input:disabled{cursor:not-allowed}\n"] }]
|
|
942
942
|
}], propDecorators: { fileInput: [{
|
|
943
943
|
type: ViewChild,
|
|
944
944
|
args: ['input']
|
|
@@ -1069,7 +1069,7 @@ class SuisInputNumberComponent extends SuisInputBase {
|
|
|
1069
1069
|
multi: true,
|
|
1070
1070
|
useExisting: forwardRef(() => SuisInputNumberComponent),
|
|
1071
1071
|
},
|
|
1072
|
-
], usesInheritance: true, ngImport: i0, template: "<input\n type=\"number\"\n class=\"suis-input-number\"\n [class.suis-input-number--invalid]=\"invalid\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-input-number{width:100%;background-color:#fff;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.625rem;-moz-appearance:textfield}.suis-input-number:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-number--invalid{border:.0625rem solid #ff4757}.suis-input-number--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}.suis-input-number::-webkit-outer-spin-button,.suis-input-number::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1072
|
+
], usesInheritance: true, ngImport: i0, template: "<input\n type=\"number\"\n class=\"suis-input-number\"\n [class.suis-input-number--invalid]=\"invalid\"\n [class.suis-input-number--readonly]=\"readonly\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-input-number{width:100%;background-color:#fff;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.625rem;-moz-appearance:textfield}.suis-input-number:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-number--invalid{border:.0625rem solid #ff4757}.suis-input-number--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}.suis-input-number--readonly{cursor:not-allowed}.suis-input-number--readonly:focus{border:.0625rem solid #dcdde1;box-shadow:none;outline:none}.suis-input-number::-webkit-outer-spin-button,.suis-input-number::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1073
1073
|
}
|
|
1074
1074
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisInputNumberComponent, decorators: [{
|
|
1075
1075
|
type: Component,
|
|
@@ -1079,7 +1079,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1079
1079
|
multi: true,
|
|
1080
1080
|
useExisting: forwardRef(() => SuisInputNumberComponent),
|
|
1081
1081
|
},
|
|
1082
|
-
], template: "<input\n type=\"number\"\n class=\"suis-input-number\"\n [class.suis-input-number--invalid]=\"invalid\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-input-number{width:100%;background-color:#fff;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.625rem;-moz-appearance:textfield}.suis-input-number:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-number--invalid{border:.0625rem solid #ff4757}.suis-input-number--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}.suis-input-number::-webkit-outer-spin-button,.suis-input-number::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
|
|
1082
|
+
], template: "<input\n type=\"number\"\n class=\"suis-input-number\"\n [class.suis-input-number--invalid]=\"invalid\"\n [class.suis-input-number--readonly]=\"readonly\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-input-number{width:100%;background-color:#fff;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.625rem;-moz-appearance:textfield}.suis-input-number:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-number--invalid{border:.0625rem solid #ff4757}.suis-input-number--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}.suis-input-number--readonly{cursor:not-allowed}.suis-input-number--readonly:focus{border:.0625rem solid #dcdde1;box-shadow:none;outline:none}.suis-input-number::-webkit-outer-spin-button,.suis-input-number::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
|
|
1083
1083
|
}], propDecorators: { placeholder: [{
|
|
1084
1084
|
type: Input
|
|
1085
1085
|
}] } });
|
|
@@ -1111,7 +1111,7 @@ class SuisInputRadioComponent extends RadioControlValueAccessor {
|
|
|
1111
1111
|
multi: true,
|
|
1112
1112
|
useExisting: forwardRef(() => SuisInputRadioComponent),
|
|
1113
1113
|
},
|
|
1114
|
-
], viewQueries: [{ propertyName: "radioInput", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<input\n #input\n type=\"radio\"\n class=\"suis-input-radio\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [disabled]=\"readonly\"\n/>\n\n<suis-label
|
|
1114
|
+
], viewQueries: [{ propertyName: "radioInput", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<input\n #input\n type=\"radio\"\n class=\"suis-input-radio\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [disabled]=\"readonly\"\n/>\n\n<suis-label\n class=\"suis-input-radio__label\"\n [class.suis-input-radio__label--invalid]=\"invalid\"\n [class.suis-input-radio__label--readonly]=\"readonly\"\n [for]=\"id\"\n [pointer]=\"true\"\n [readonly]=\"readonly\"\n>\n <div\n [tabindex]=\"readonly ? -1 : 0\"\n class=\"suis-input-radio__circle\"\n [class.suis-input-radio__circle--invalid]=\"invalid\"\n [class.suis-input-radio__circle--readonly]=\"readonly\"\n >\n <div class=\"suis-input-radio__circle__fill\"></div>\n </div>\n <ng-content></ng-content>\n</suis-label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:flex}.suis-input-radio{display:none}.suis-input-radio:checked~suis-label ::ng-deep .suis-input-radio__circle{border:.0625rem solid #192a56}.suis-input-radio:checked~suis-label ::ng-deep .suis-input-radio__circle__fill{border-radius:100%;height:.75rem;width:.75rem;background-color:#273c75}.suis-input-radio:checked~suis-label ::ng-deep .suis-input-radio__circle--readonly{border:.0625rem solid #dcdde1}.suis-input-radio:checked~suis-label ::ng-deep .suis-input-radio__circle--readonly .suis-input-radio__circle__fill{background-color:#dcdde1}.suis-input-radio__label--invalid{color:#ff4757}.suis-input-radio__label--readonly{cursor:not-allowed}.suis-input-radio__circle{margin-right:.5rem;border:.0625rem solid #dcdde1;border-radius:100%;height:1.25rem;width:1.25rem;display:flex;justify-content:center;align-items:center}.suis-input-radio__circle:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-radio__circle--readonly{border:.0625rem solid #dcdde1;cursor:not-allowed}.suis-input-radio__circle--readonly:focus{box-shadow:none}.suis-input-radio__circle--invalid{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "component", type: SuisLabelComponent, selector: "suis-label", inputs: ["for", "required", "pointer", "readonly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1115
1115
|
}
|
|
1116
1116
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisInputRadioComponent, decorators: [{
|
|
1117
1117
|
type: Component,
|
|
@@ -1121,7 +1121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1121
1121
|
multi: true,
|
|
1122
1122
|
useExisting: forwardRef(() => SuisInputRadioComponent),
|
|
1123
1123
|
},
|
|
1124
|
-
], template: "<input\n #input\n type=\"radio\"\n class=\"suis-input-radio\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [disabled]=\"readonly\"\n/>\n\n<suis-label
|
|
1124
|
+
], template: "<input\n #input\n type=\"radio\"\n class=\"suis-input-radio\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [disabled]=\"readonly\"\n/>\n\n<suis-label\n class=\"suis-input-radio__label\"\n [class.suis-input-radio__label--invalid]=\"invalid\"\n [class.suis-input-radio__label--readonly]=\"readonly\"\n [for]=\"id\"\n [pointer]=\"true\"\n [readonly]=\"readonly\"\n>\n <div\n [tabindex]=\"readonly ? -1 : 0\"\n class=\"suis-input-radio__circle\"\n [class.suis-input-radio__circle--invalid]=\"invalid\"\n [class.suis-input-radio__circle--readonly]=\"readonly\"\n >\n <div class=\"suis-input-radio__circle__fill\"></div>\n </div>\n <ng-content></ng-content>\n</suis-label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:flex}.suis-input-radio{display:none}.suis-input-radio:checked~suis-label ::ng-deep .suis-input-radio__circle{border:.0625rem solid #192a56}.suis-input-radio:checked~suis-label ::ng-deep .suis-input-radio__circle__fill{border-radius:100%;height:.75rem;width:.75rem;background-color:#273c75}.suis-input-radio:checked~suis-label ::ng-deep .suis-input-radio__circle--readonly{border:.0625rem solid #dcdde1}.suis-input-radio:checked~suis-label ::ng-deep .suis-input-radio__circle--readonly .suis-input-radio__circle__fill{background-color:#dcdde1}.suis-input-radio__label--invalid{color:#ff4757}.suis-input-radio__label--readonly{cursor:not-allowed}.suis-input-radio__circle{margin-right:.5rem;border:.0625rem solid #dcdde1;border-radius:100%;height:1.25rem;width:1.25rem;display:flex;justify-content:center;align-items:center}.suis-input-radio__circle:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-radio__circle--readonly{border:.0625rem solid #dcdde1;cursor:not-allowed}.suis-input-radio__circle--readonly:focus{box-shadow:none}.suis-input-radio__circle--invalid{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}\n"] }]
|
|
1125
1125
|
}], propDecorators: { radioInput: [{
|
|
1126
1126
|
type: ViewChild,
|
|
1127
1127
|
args: ['input']
|
|
@@ -1569,7 +1569,7 @@ class SuisSelectComponent extends SuisSelectBase {
|
|
|
1569
1569
|
multi: true,
|
|
1570
1570
|
useExisting: forwardRef(() => SuisSelectComponent),
|
|
1571
1571
|
},
|
|
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 }); }
|
|
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 [class.suis-select__button--readonly]=\"readonly\"\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--readonly{cursor:not-allowed}.suis-select__button--readonly:focus{border:.0625rem solid #dcdde1;box-shadow:none;outline:none}.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 }); }
|
|
1573
1573
|
}
|
|
1574
1574
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectComponent, decorators: [{
|
|
1575
1575
|
type: Component,
|
|
@@ -1589,7 +1589,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1589
1589
|
multi: true,
|
|
1590
1590
|
useExisting: forwardRef(() => SuisSelectComponent),
|
|
1591
1591
|
},
|
|
1592
|
-
], 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"] }]
|
|
1592
|
+
], 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 [class.suis-select__button--readonly]=\"readonly\"\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--readonly{cursor:not-allowed}.suis-select__button--readonly:focus{border:.0625rem solid #dcdde1;box-shadow:none;outline:none}.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"] }]
|
|
1593
1593
|
}], propDecorators: { nullable: [{
|
|
1594
1594
|
type: Input
|
|
1595
1595
|
}] } });
|
|
@@ -1686,7 +1686,7 @@ class SuisSelectMultiComponent extends SuisSelectBase {
|
|
|
1686
1686
|
multi: true,
|
|
1687
1687
|
useExisting: forwardRef(() => SuisSelectMultiComponent),
|
|
1688
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 }); }
|
|
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--readonly]=\"readonly\"\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--readonly{cursor:not-allowed}.suis-select-multi__button--readonly:focus{border:.0625rem solid #dcdde1;box-shadow:none;outline:none}.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
1690
|
}
|
|
1691
1691
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectMultiComponent, decorators: [{
|
|
1692
1692
|
type: Component,
|
|
@@ -1707,7 +1707,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1707
1707
|
multi: true,
|
|
1708
1708
|
useExisting: forwardRef(() => SuisSelectMultiComponent),
|
|
1709
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"] }]
|
|
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--readonly]=\"readonly\"\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--readonly{cursor:not-allowed}.suis-select-multi__button--readonly:focus{border:.0625rem solid #dcdde1;box-shadow:none;outline:none}.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
1711
|
}], propDecorators: { duplicate: [{
|
|
1712
1712
|
type: Input
|
|
1713
1713
|
}], chipColor: [{
|
|
@@ -1894,6 +1894,10 @@ class SuisProgressBarComponent {
|
|
|
1894
1894
|
* Sets the background color of the progress bar. Type of SuisColor. By default set to 'tertiary'.
|
|
1895
1895
|
*/
|
|
1896
1896
|
this.backgroundColor = 'tertiary';
|
|
1897
|
+
/**
|
|
1898
|
+
* Sets the height of the progress bar. Type of SuisSize. By default set to 'md'.
|
|
1899
|
+
*/
|
|
1900
|
+
this.size = 'md';
|
|
1897
1901
|
}
|
|
1898
1902
|
/** @internal */
|
|
1899
1903
|
get value() {
|
|
@@ -1914,17 +1918,19 @@ class SuisProgressBarComponent {
|
|
|
1914
1918
|
}
|
|
1915
1919
|
}
|
|
1916
1920
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1917
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisProgressBarComponent, isStandalone: true, selector: "suis-progress-bar", inputs: { value: "value", color: "color", backgroundColor: "backgroundColor" }, ngImport: i0, template: "<div\n class=\"suis-progress-bar\"\n [ngClass]=\"'suis-progress-bar' | suisNgClass : backgroundColor\"\n>\n <div\n class=\"suis-progress-bar__progress\"\n [style]=\"{ width: value | suisProgressBar }\"\n [ngClass]=\"'suis-progress-bar__progress' | suisNgClass : color\"\n ></div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-progress-bar{width:100
|
|
1921
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisProgressBarComponent, isStandalone: true, selector: "suis-progress-bar", inputs: { value: "value", color: "color", backgroundColor: "backgroundColor", size: "size" }, ngImport: i0, template: "<div\n class=\"suis-progress-bar\"\n [ngClass]=\"'suis-progress-bar' | suisNgClass : backgroundColor : size\"\n>\n <div\n class=\"suis-progress-bar__progress\"\n [style]=\"{ width: value | suisProgressBar }\"\n [ngClass]=\"'suis-progress-bar__progress' | suisNgClass : color : size\"\n ></div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-progress-bar{width:100%}.suis-progress-bar,.suis-progress-bar__progress{border-radius:1rem}.suis-progress-bar--primary,.suis-progress-bar__progress--primary{background-color:#192a56}.suis-progress-bar--secondary,.suis-progress-bar__progress--secondary{background-color:#273c75}.suis-progress-bar--tertiary,.suis-progress-bar__progress--tertiary{background-color:#dcdde1}.suis-progress-bar--complementary,.suis-progress-bar__progress--complementary{background-color:#f5f6fa}.suis-progress-bar--success,.suis-progress-bar__progress--success{background-color:#2ed573}.suis-progress-bar--warning,.suis-progress-bar__progress--warning{background-color:#ffa502}.suis-progress-bar--danger,.suis-progress-bar__progress--danger{background-color:#ff4757}.suis-progress-bar--white,.suis-progress-bar__progress--white{background-color:#fff}.suis-progress-bar--gray,.suis-progress-bar__progress--gray{background-color:#bcbcbc}.suis-progress-bar--dark,.suis-progress-bar__progress--dark{background-color:#000}.suis-progress-bar--xs,.suis-progress-bar__progress--xs{height:.375rem}.suis-progress-bar--sm,.suis-progress-bar__progress--sm{height:.5rem}.suis-progress-bar--md,.suis-progress-bar__progress--md{height:.625rem}.suis-progress-bar--lg,.suis-progress-bar__progress--lg{height:.75rem}.suis-progress-bar--xl,.suis-progress-bar__progress--xl{height:1rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }, { kind: "pipe", type: SuisProgressBarPipe, name: "suisProgressBar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1918
1922
|
}
|
|
1919
1923
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisProgressBarComponent, decorators: [{
|
|
1920
1924
|
type: Component,
|
|
1921
|
-
args: [{ selector: 'suis-progress-bar', standalone: true, imports: [NgClass, SuisNgClassPipe, SuisProgressBarPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-progress-bar\"\n [ngClass]=\"'suis-progress-bar' | suisNgClass : backgroundColor\"\n>\n <div\n class=\"suis-progress-bar__progress\"\n [style]=\"{ width: value | suisProgressBar }\"\n [ngClass]=\"'suis-progress-bar__progress' | suisNgClass : color\"\n ></div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-progress-bar{width:100
|
|
1925
|
+
args: [{ selector: 'suis-progress-bar', standalone: true, imports: [NgClass, SuisNgClassPipe, SuisProgressBarPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-progress-bar\"\n [ngClass]=\"'suis-progress-bar' | suisNgClass : backgroundColor : size\"\n>\n <div\n class=\"suis-progress-bar__progress\"\n [style]=\"{ width: value | suisProgressBar }\"\n [ngClass]=\"'suis-progress-bar__progress' | suisNgClass : color : size\"\n ></div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-progress-bar{width:100%}.suis-progress-bar,.suis-progress-bar__progress{border-radius:1rem}.suis-progress-bar--primary,.suis-progress-bar__progress--primary{background-color:#192a56}.suis-progress-bar--secondary,.suis-progress-bar__progress--secondary{background-color:#273c75}.suis-progress-bar--tertiary,.suis-progress-bar__progress--tertiary{background-color:#dcdde1}.suis-progress-bar--complementary,.suis-progress-bar__progress--complementary{background-color:#f5f6fa}.suis-progress-bar--success,.suis-progress-bar__progress--success{background-color:#2ed573}.suis-progress-bar--warning,.suis-progress-bar__progress--warning{background-color:#ffa502}.suis-progress-bar--danger,.suis-progress-bar__progress--danger{background-color:#ff4757}.suis-progress-bar--white,.suis-progress-bar__progress--white{background-color:#fff}.suis-progress-bar--gray,.suis-progress-bar__progress--gray{background-color:#bcbcbc}.suis-progress-bar--dark,.suis-progress-bar__progress--dark{background-color:#000}.suis-progress-bar--xs,.suis-progress-bar__progress--xs{height:.375rem}.suis-progress-bar--sm,.suis-progress-bar__progress--sm{height:.5rem}.suis-progress-bar--md,.suis-progress-bar__progress--md{height:.625rem}.suis-progress-bar--lg,.suis-progress-bar__progress--lg{height:.75rem}.suis-progress-bar--xl,.suis-progress-bar__progress--xl{height:1rem}\n"] }]
|
|
1922
1926
|
}], propDecorators: { value: [{
|
|
1923
1927
|
type: Input
|
|
1924
1928
|
}], color: [{
|
|
1925
1929
|
type: Input
|
|
1926
1930
|
}], backgroundColor: [{
|
|
1927
1931
|
type: Input
|
|
1932
|
+
}], size: [{
|
|
1933
|
+
type: Input
|
|
1928
1934
|
}] } });
|
|
1929
1935
|
|
|
1930
1936
|
class SuisSpinnerContainerComponent {
|
|
@@ -2251,7 +2257,7 @@ class SuisTextAreaComponent extends SuisInputBase {
|
|
|
2251
2257
|
multi: true,
|
|
2252
2258
|
useExisting: forwardRef(() => SuisTextAreaComponent),
|
|
2253
2259
|
},
|
|
2254
|
-
], usesInheritance: true, ngImport: i0, template: "<textarea\n class=\"suis-text-area\"\n [class.suis-text-area--invalid]=\"invalid\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n></textarea>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-text-area{width:100%;background-color:#fff;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.625rem;min-height:6.25rem}.suis-text-area:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-text-area--invalid{border:.0625rem solid #ff4757}.suis-text-area--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2260
|
+
], usesInheritance: true, ngImport: i0, template: "<textarea\n class=\"suis-text-area\"\n [class.suis-text-area--invalid]=\"invalid\"\n [class.suis-text-area--readonly]=\"readonly\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n></textarea>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-text-area{width:100%;background-color:#fff;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.625rem;min-height:6.25rem}.suis-text-area:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-text-area--invalid{border:.0625rem solid #ff4757}.suis-text-area--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}.suis-text-area--readonly{cursor:not-allowed}.suis-text-area--readonly:focus{border:.0625rem solid #dcdde1;box-shadow:none;outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2255
2261
|
}
|
|
2256
2262
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisTextAreaComponent, decorators: [{
|
|
2257
2263
|
type: Component,
|
|
@@ -2261,19 +2267,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2261
2267
|
multi: true,
|
|
2262
2268
|
useExisting: forwardRef(() => SuisTextAreaComponent),
|
|
2263
2269
|
},
|
|
2264
|
-
], template: "<textarea\n class=\"suis-text-area\"\n [class.suis-text-area--invalid]=\"invalid\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n></textarea>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-text-area{width:100%;background-color:#fff;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.625rem;min-height:6.25rem}.suis-text-area:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-text-area--invalid{border:.0625rem solid #ff4757}.suis-text-area--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}\n"] }]
|
|
2270
|
+
], template: "<textarea\n class=\"suis-text-area\"\n [class.suis-text-area--invalid]=\"invalid\"\n [class.suis-text-area--readonly]=\"readonly\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n></textarea>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-text-area{width:100%;background-color:#fff;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.625rem;min-height:6.25rem}.suis-text-area:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-text-area--invalid{border:.0625rem solid #ff4757}.suis-text-area--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}.suis-text-area--readonly{cursor:not-allowed}.suis-text-area--readonly:focus{border:.0625rem solid #dcdde1;box-shadow:none;outline:none}\n"] }]
|
|
2265
2271
|
}], propDecorators: { placeholder: [{
|
|
2266
2272
|
type: Input
|
|
2267
2273
|
}] } });
|
|
2268
2274
|
|
|
2275
|
+
var SuisTitle;
|
|
2276
|
+
(function (SuisTitle) {
|
|
2277
|
+
SuisTitle[SuisTitle["H1"] = 1] = "H1";
|
|
2278
|
+
SuisTitle[SuisTitle["H2"] = 2] = "H2";
|
|
2279
|
+
SuisTitle[SuisTitle["H3"] = 3] = "H3";
|
|
2280
|
+
})(SuisTitle || (SuisTitle = {}));
|
|
2281
|
+
|
|
2269
2282
|
class SuisTitleComponent {
|
|
2283
|
+
constructor() {
|
|
2284
|
+
/** @internal */
|
|
2285
|
+
this.SuisTitle = SuisTitle;
|
|
2286
|
+
/**
|
|
2287
|
+
* Sets level of the header tag. Type of SuisTitle. By default set to H1.
|
|
2288
|
+
*/
|
|
2289
|
+
this.level = SuisTitle.H1;
|
|
2290
|
+
}
|
|
2270
2291
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2271
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisTitleComponent, isStandalone: true, selector: "suis-title", ngImport: i0, template: "<h1 class=\"suis-title\">\n <ng-content></ng-content>\n</
|
|
2292
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisTitleComponent, isStandalone: true, selector: "suis-title", inputs: { level: "level" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"level\">\n <h1 *ngSwitchCase=\"SuisTitle.H1\" class=\"suis-title--h1\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </h1>\n <h2 *ngSwitchCase=\"SuisTitle.H2\" class=\"suis-title--h2\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </h2>\n <h3 *ngSwitchCase=\"SuisTitle.H3\" class=\"suis-title--h3\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </h3>\n</ng-container>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-title--h1{color:#192a56;font-weight:600;font-size:1.25rem}.suis-title--h2{color:#273c75;font-weight:500;font-size:1.125rem}.suis-title--h3{color:#bcbcbc;font-weight:400;font-size:1rem}\n"], dependencies: [{ kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2272
2293
|
}
|
|
2273
2294
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisTitleComponent, decorators: [{
|
|
2274
2295
|
type: Component,
|
|
2275
|
-
args: [{ selector: 'suis-title', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<h1 class=\"suis-title\">\n <ng-content></ng-content>\n</
|
|
2276
|
-
}]
|
|
2296
|
+
args: [{ selector: 'suis-title', standalone: true, imports: [NgSwitch, NgSwitchCase, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"level\">\n <h1 *ngSwitchCase=\"SuisTitle.H1\" class=\"suis-title--h1\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </h1>\n <h2 *ngSwitchCase=\"SuisTitle.H2\" class=\"suis-title--h2\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </h2>\n <h3 *ngSwitchCase=\"SuisTitle.H3\" class=\"suis-title--h3\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </h3>\n</ng-container>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-title--h1{color:#192a56;font-weight:600;font-size:1.25rem}.suis-title--h2{color:#273c75;font-weight:500;font-size:1.125rem}.suis-title--h3{color:#bcbcbc;font-weight:400;font-size:1rem}\n"] }]
|
|
2297
|
+
}], propDecorators: { level: [{
|
|
2298
|
+
type: Input
|
|
2299
|
+
}] } });
|
|
2277
2300
|
|
|
2278
2301
|
class SuisToggleComponent extends SuisCheckboxBase {
|
|
2279
2302
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -2283,7 +2306,7 @@ class SuisToggleComponent extends SuisCheckboxBase {
|
|
|
2283
2306
|
multi: true,
|
|
2284
2307
|
useExisting: forwardRef(() => SuisToggleComponent),
|
|
2285
2308
|
},
|
|
2286
|
-
], usesInheritance: true, ngImport: i0, template: "<input\n #input\n type=\"checkbox\"\n class=\"suis-toggle\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n/>\n\n<suis-label\n [for]=\"id\"\n [required]=\"required\"\n [pointer]=\"true\"\n [readonly]=\"readonly\"\n>\n <div\n [tabindex]=\"readonly ? -1 : 0\"\n class=\"suis-toggle__container\"\n [class.suis-toggle__container--invalid]=\"invalid\"\n [class.suis-toggle__container--readonly]=\"readonly\"\n >\n <div\n class=\"suis-toggle__container__thumb\"\n [class.suis-toggle__container__thumb--active]=\"value\"\n ></div>\n </div>\n <ng-content></ng-content>\n</suis-label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:flex}.suis-toggle{display:none}.suis-toggle:checked~suis-label ::ng-deep .suis-toggle__container{border:.0625rem solid #192a56}.suis-toggle__container{width:2.25rem;height:1.25rem;border:.0625rem solid #dcdde1;border-radius:1rem;display:flex;align-items:center;margin-right:.5rem;background-color:#fff}.suis-toggle__container:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-toggle__container--readonly{border:.0625rem solid #dcdde1}.suis-toggle__container--readonly:focus{box-shadow:none}.suis-toggle__container--invalid{border:.0625rem solid #ff4757}.suis-toggle__container--invalid:focus{box-shadow:0 2px 5px #ff4757bf}.suis-toggle__container__thumb{border-radius:100%;height:.75rem;width:.75rem;background-color:#dcdde1;transform:translate(.25rem);transition:.25s ease-in-out}.suis-toggle__container__thumb--active{background-color:#192a56;transform:translate(1.125rem)}\n"], dependencies: [{ kind: "component", type: SuisLabelComponent, selector: "suis-label", inputs: ["for", "required", "pointer", "readonly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2309
|
+
], usesInheritance: true, ngImport: i0, template: "<input\n #input\n type=\"checkbox\"\n class=\"suis-toggle\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n/>\n\n<suis-label\n class=\"suis-toggle__label\"\n [class.suis-toggle__label--invalid]=\"invalid\"\n [class.suis-toggle__label--readonly]=\"readonly\"\n [for]=\"id\"\n [required]=\"required\"\n [pointer]=\"true\"\n [readonly]=\"readonly\"\n>\n <div\n [tabindex]=\"readonly ? -1 : 0\"\n class=\"suis-toggle__container\"\n [class.suis-toggle__container--invalid]=\"invalid\"\n [class.suis-toggle__container--readonly]=\"readonly\"\n >\n <div\n class=\"suis-toggle__container__thumb\"\n [class.suis-toggle__container__thumb--active]=\"value\"\n [class.suis-toggle__container__thumb--invalid]=\"invalid\"\n [class.suis-toggle__container__thumb--readonly]=\"readonly\"\n ></div>\n </div>\n <ng-content></ng-content>\n</suis-label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:flex}.suis-toggle{display:none}.suis-toggle:checked~suis-label ::ng-deep .suis-toggle__container{border:.0625rem solid #192a56}.suis-toggle__label--invalid{color:#ff4757}.suis-toggle__label--readonly{cursor:not-allowed}.suis-toggle__container{width:2.25rem;height:1.25rem;border:.0625rem solid #dcdde1;border-radius:1rem;display:flex;align-items:center;margin-right:.5rem;background-color:#fff}.suis-toggle__container:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-toggle__container--readonly{border:.0625rem solid #dcdde1;cursor:not-allowed}.suis-toggle__container--readonly:focus{box-shadow:none}.suis-toggle__container--invalid{border:.0625rem solid #ff4757}.suis-toggle__container--invalid:focus{box-shadow:0 2px 5px #ff4757bf}.suis-toggle__container__thumb{border-radius:100%;height:.75rem;width:.75rem;background-color:#dcdde1;transform:translate(.25rem);transition:.25s ease-in-out}.suis-toggle__container__thumb--invalid{background-color:#ff4757d9}.suis-toggle__container__thumb--active{background-color:#192a56;transform:translate(1.125rem)}.suis-toggle__container__thumb--readonly{background-color:#dcdde1}\n"], dependencies: [{ kind: "component", type: SuisLabelComponent, selector: "suis-label", inputs: ["for", "required", "pointer", "readonly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2287
2310
|
}
|
|
2288
2311
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisToggleComponent, decorators: [{
|
|
2289
2312
|
type: Component,
|
|
@@ -2293,7 +2316,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2293
2316
|
multi: true,
|
|
2294
2317
|
useExisting: forwardRef(() => SuisToggleComponent),
|
|
2295
2318
|
},
|
|
2296
|
-
], template: "<input\n #input\n type=\"checkbox\"\n class=\"suis-toggle\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n/>\n\n<suis-label\n [for]=\"id\"\n [required]=\"required\"\n [pointer]=\"true\"\n [readonly]=\"readonly\"\n>\n <div\n [tabindex]=\"readonly ? -1 : 0\"\n class=\"suis-toggle__container\"\n [class.suis-toggle__container--invalid]=\"invalid\"\n [class.suis-toggle__container--readonly]=\"readonly\"\n >\n <div\n class=\"suis-toggle__container__thumb\"\n [class.suis-toggle__container__thumb--active]=\"value\"\n ></div>\n </div>\n <ng-content></ng-content>\n</suis-label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:flex}.suis-toggle{display:none}.suis-toggle:checked~suis-label ::ng-deep .suis-toggle__container{border:.0625rem solid #192a56}.suis-toggle__container{width:2.25rem;height:1.25rem;border:.0625rem solid #dcdde1;border-radius:1rem;display:flex;align-items:center;margin-right:.5rem;background-color:#fff}.suis-toggle__container:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-toggle__container--readonly{border:.0625rem solid #dcdde1}.suis-toggle__container--readonly:focus{box-shadow:none}.suis-toggle__container--invalid{border:.0625rem solid #ff4757}.suis-toggle__container--invalid:focus{box-shadow:0 2px 5px #ff4757bf}.suis-toggle__container__thumb{border-radius:100%;height:.75rem;width:.75rem;background-color:#dcdde1;transform:translate(.25rem);transition:.25s ease-in-out}.suis-toggle__container__thumb--active{background-color:#192a56;transform:translate(1.125rem)}\n"] }]
|
|
2319
|
+
], template: "<input\n #input\n type=\"checkbox\"\n class=\"suis-toggle\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n/>\n\n<suis-label\n class=\"suis-toggle__label\"\n [class.suis-toggle__label--invalid]=\"invalid\"\n [class.suis-toggle__label--readonly]=\"readonly\"\n [for]=\"id\"\n [required]=\"required\"\n [pointer]=\"true\"\n [readonly]=\"readonly\"\n>\n <div\n [tabindex]=\"readonly ? -1 : 0\"\n class=\"suis-toggle__container\"\n [class.suis-toggle__container--invalid]=\"invalid\"\n [class.suis-toggle__container--readonly]=\"readonly\"\n >\n <div\n class=\"suis-toggle__container__thumb\"\n [class.suis-toggle__container__thumb--active]=\"value\"\n [class.suis-toggle__container__thumb--invalid]=\"invalid\"\n [class.suis-toggle__container__thumb--readonly]=\"readonly\"\n ></div>\n </div>\n <ng-content></ng-content>\n</suis-label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:flex}.suis-toggle{display:none}.suis-toggle:checked~suis-label ::ng-deep .suis-toggle__container{border:.0625rem solid #192a56}.suis-toggle__label--invalid{color:#ff4757}.suis-toggle__label--readonly{cursor:not-allowed}.suis-toggle__container{width:2.25rem;height:1.25rem;border:.0625rem solid #dcdde1;border-radius:1rem;display:flex;align-items:center;margin-right:.5rem;background-color:#fff}.suis-toggle__container:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-toggle__container--readonly{border:.0625rem solid #dcdde1;cursor:not-allowed}.suis-toggle__container--readonly:focus{box-shadow:none}.suis-toggle__container--invalid{border:.0625rem solid #ff4757}.suis-toggle__container--invalid:focus{box-shadow:0 2px 5px #ff4757bf}.suis-toggle__container__thumb{border-radius:100%;height:.75rem;width:.75rem;background-color:#dcdde1;transform:translate(.25rem);transition:.25s ease-in-out}.suis-toggle__container__thumb--invalid{background-color:#ff4757d9}.suis-toggle__container__thumb--active{background-color:#192a56;transform:translate(1.125rem)}.suis-toggle__container__thumb--readonly{background-color:#dcdde1}\n"] }]
|
|
2297
2320
|
}] });
|
|
2298
2321
|
|
|
2299
2322
|
class SuisToolbarComponent {
|
|
@@ -2317,5 +2340,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2317
2340
|
* Generated bundle index. Do not edit.
|
|
2318
2341
|
*/
|
|
2319
2342
|
|
|
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 };
|
|
2343
|
+
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, SuisTitle, SuisTitleComponent, SuisToggleComponent, SuisToolbarComponent };
|
|
2321
2344
|
//# sourceMappingURL=suis.mjs.map
|