suis 1.2.1 → 1.3.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +0 -4
- package/esm2022/lib/components/suis-box/suis-box.component.mjs +9 -3
- package/esm2022/lib/components/suis-chart/suis-chart.component.mjs +3 -3
- package/esm2022/lib/components/suis-container/suis-container.component.mjs +2 -2
- package/esm2022/lib/components/suis-form-field/suis-form-field.component.mjs +2 -2
- package/esm2022/lib/components/suis-input/suis-input.component.mjs +2 -2
- 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 +2 -2
- 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-table/suis-table.component.mjs +3 -3
- package/esm2022/lib/components/suis-text-area/suis-text-area.component.mjs +2 -2
- package/fesm2022/suis.mjs +28 -22
- package/fesm2022/suis.mjs.map +1 -1
- package/lib/components/suis-box/suis-box.component.d.ts +5 -1
- package/lib/components/suis-table/suis-table.component.d.ts +1 -1
- package/package.json +1 -2
|
@@ -46,7 +46,7 @@ export class SuisTableComponent {
|
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
48
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
49
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisTableComponent, isStandalone: true, selector: "suis-table", inputs: { data: "data", orderBy: "orderBy", sortBy: "sortBy", loading: "loading", emptyMessage: "emptyMessage" }, outputs: { sortByChange: "sortByChange", orderByChange: "orderByChange" }, queries: [{ propertyName: "columns", predicate: SuisTableColumnDirective }], ngImport: i0, template: "<table *ngIf=\"columns\" class=\"suis-table\">\n <thead>\n <tr>\n <th\n *ngFor=\"let column of columns\"\n [class.pointer]=\"column.orderProperty\"\n (click)=\"\n column.orderProperty ? onColumnClick(column.orderProperty) : undefined\n \"\n >\n <div class=\"suis-table__header\">\n <span>\n {{ column.name }}\n </span>\n <suis-icon\n *ngIf=\"column.orderProperty && column.orderProperty === orderBy\"\n [type]=\"sortBy === 'asc' ? 'chevron-down' : 'chevron-up'\"\n size=\"lg\"\n color=\"white\"\n ></suis-icon>\n </div>\n </th>\n <th *ngIf=\"!columns?.length\"></th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let item of data\">\n <td *ngFor=\"let column of columns\">\n <ng-container\n *ngTemplateOutlet=\"\n column.cell!.templateRef;\n context: { $implicit: item }\n \"\n ></ng-container>\n </td>\n </tr>\n <tr *ngIf=\"!data?.length\">\n <td class=\"empty\" [attr.colspan]=\"columns ? columns.length : 1\">\n {{ loading ? '' : emptyMessage }}\n </td>\n </tr>\n <suis-spinner-container\n *ngIf=\"loading\"\n [absolute]=\"true\"\n [blur]=\"true\"\n [color]=\"'secondary'\"\n ></suis-spinner-container>\n </tbody>\n</table>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-table{width:100%;border-collapse:collapse}.suis-table thead tr th{font-weight:500;padding:.75rem 1rem;background-color:#273c75;color:#fff}.suis-table thead tr th:first-child{border-top-left-radius:.25rem}.suis-table thead tr th:last-child{border-top-right-radius:.25rem}.suis-table thead tr th.pointer{cursor:pointer}.suis-table thead tr th.pointer:hover{background-color:#273c75d9}.suis-table thead tr th>.suis-table__header{display:flex;align-items:center}.suis-table thead tr th>.suis-table__header suis-icon{display:block;margin-left:.125rem}.suis-table tbody{position:relative;background-color:#f5f6fa}.suis-table tbody tr{border-bottom:.0625rem solid #dcdde1}.suis-table tbody tr td{padding:.375rem 1rem}.suis-table tbody tr td.empty{text-align:center;padding:1.5rem 1rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }, { kind: "component", type: SuisSpinnerContainerComponent, selector: "suis-spinner-container", inputs: ["size", "color", "blur", "absolute"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
49
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisTableComponent, isStandalone: true, selector: "suis-table", inputs: { data: "data", orderBy: "orderBy", sortBy: "sortBy", loading: "loading", emptyMessage: "emptyMessage" }, outputs: { sortByChange: "sortByChange", orderByChange: "orderByChange" }, queries: [{ propertyName: "columns", predicate: SuisTableColumnDirective }], ngImport: i0, template: "<table *ngIf=\"columns\" class=\"suis-table\">\n <thead>\n <tr>\n <th\n *ngFor=\"let column of columns\"\n [class.pointer]=\"column.orderProperty\"\n (click)=\"\n column.orderProperty ? onColumnClick(column.orderProperty) : undefined\n \"\n >\n <div class=\"suis-table__header\">\n <span>\n {{ column.name }}\n </span>\n <suis-icon\n *ngIf=\"column.orderProperty && column.orderProperty === orderBy\"\n [type]=\"sortBy === 'asc' ? 'chevron-down' : 'chevron-up'\"\n size=\"lg\"\n color=\"white\"\n ></suis-icon>\n </div>\n </th>\n <th *ngIf=\"!columns?.length\"></th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let item of data || []\">\n <td *ngFor=\"let column of columns\">\n <ng-container\n *ngTemplateOutlet=\"\n column.cell!.templateRef;\n context: { $implicit: item }\n \"\n ></ng-container>\n </td>\n </tr>\n <tr *ngIf=\"!data?.length\">\n <td class=\"empty\" [attr.colspan]=\"columns ? columns.length : 1\">\n {{ loading ? '' : emptyMessage }}\n </td>\n </tr>\n <suis-spinner-container\n *ngIf=\"loading\"\n [absolute]=\"true\"\n [blur]=\"true\"\n [color]=\"'secondary'\"\n ></suis-spinner-container>\n </tbody>\n</table>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-table{width:100%;border-collapse:collapse}.suis-table thead tr th{font-weight:500;padding:.75rem 1rem;background-color:#273c75;color:#fff}.suis-table thead tr th:first-child{border-top-left-radius:.25rem}.suis-table thead tr th:last-child{border-top-right-radius:.25rem}.suis-table thead tr th.pointer{cursor:pointer}.suis-table thead tr th.pointer:hover{background-color:#273c75d9}.suis-table thead tr th>.suis-table__header{display:flex;align-items:center}.suis-table thead tr th>.suis-table__header suis-icon{display:block;margin-left:.125rem}.suis-table tbody{position:relative;background-color:#f5f6fa}.suis-table tbody tr{border-bottom:.0625rem solid #dcdde1}.suis-table tbody tr td{padding:.375rem 1rem}.suis-table tbody tr td.empty{text-align:center;padding:1.5rem 1rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }, { kind: "component", type: SuisSpinnerContainerComponent, selector: "suis-spinner-container", inputs: ["size", "color", "blur", "absolute"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
50
50
|
}
|
|
51
51
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisTableComponent, decorators: [{
|
|
52
52
|
type: Component,
|
|
@@ -56,7 +56,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
56
56
|
NgTemplateOutlet,
|
|
57
57
|
SuisIconComponent,
|
|
58
58
|
SuisSpinnerContainerComponent,
|
|
59
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<table *ngIf=\"columns\" class=\"suis-table\">\n <thead>\n <tr>\n <th\n *ngFor=\"let column of columns\"\n [class.pointer]=\"column.orderProperty\"\n (click)=\"\n column.orderProperty ? onColumnClick(column.orderProperty) : undefined\n \"\n >\n <div class=\"suis-table__header\">\n <span>\n {{ column.name }}\n </span>\n <suis-icon\n *ngIf=\"column.orderProperty && column.orderProperty === orderBy\"\n [type]=\"sortBy === 'asc' ? 'chevron-down' : 'chevron-up'\"\n size=\"lg\"\n color=\"white\"\n ></suis-icon>\n </div>\n </th>\n <th *ngIf=\"!columns?.length\"></th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let item of data\">\n <td *ngFor=\"let column of columns\">\n <ng-container\n *ngTemplateOutlet=\"\n column.cell!.templateRef;\n context: { $implicit: item }\n \"\n ></ng-container>\n </td>\n </tr>\n <tr *ngIf=\"!data?.length\">\n <td class=\"empty\" [attr.colspan]=\"columns ? columns.length : 1\">\n {{ loading ? '' : emptyMessage }}\n </td>\n </tr>\n <suis-spinner-container\n *ngIf=\"loading\"\n [absolute]=\"true\"\n [blur]=\"true\"\n [color]=\"'secondary'\"\n ></suis-spinner-container>\n </tbody>\n</table>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-table{width:100%;border-collapse:collapse}.suis-table thead tr th{font-weight:500;padding:.75rem 1rem;background-color:#273c75;color:#fff}.suis-table thead tr th:first-child{border-top-left-radius:.25rem}.suis-table thead tr th:last-child{border-top-right-radius:.25rem}.suis-table thead tr th.pointer{cursor:pointer}.suis-table thead tr th.pointer:hover{background-color:#273c75d9}.suis-table thead tr th>.suis-table__header{display:flex;align-items:center}.suis-table thead tr th>.suis-table__header suis-icon{display:block;margin-left:.125rem}.suis-table tbody{position:relative;background-color:#f5f6fa}.suis-table tbody tr{border-bottom:.0625rem solid #dcdde1}.suis-table tbody tr td{padding:.375rem 1rem}.suis-table tbody tr td.empty{text-align:center;padding:1.5rem 1rem}\n"] }]
|
|
59
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<table *ngIf=\"columns\" class=\"suis-table\">\n <thead>\n <tr>\n <th\n *ngFor=\"let column of columns\"\n [class.pointer]=\"column.orderProperty\"\n (click)=\"\n column.orderProperty ? onColumnClick(column.orderProperty) : undefined\n \"\n >\n <div class=\"suis-table__header\">\n <span>\n {{ column.name }}\n </span>\n <suis-icon\n *ngIf=\"column.orderProperty && column.orderProperty === orderBy\"\n [type]=\"sortBy === 'asc' ? 'chevron-down' : 'chevron-up'\"\n size=\"lg\"\n color=\"white\"\n ></suis-icon>\n </div>\n </th>\n <th *ngIf=\"!columns?.length\"></th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let item of data || []\">\n <td *ngFor=\"let column of columns\">\n <ng-container\n *ngTemplateOutlet=\"\n column.cell!.templateRef;\n context: { $implicit: item }\n \"\n ></ng-container>\n </td>\n </tr>\n <tr *ngIf=\"!data?.length\">\n <td class=\"empty\" [attr.colspan]=\"columns ? columns.length : 1\">\n {{ loading ? '' : emptyMessage }}\n </td>\n </tr>\n <suis-spinner-container\n *ngIf=\"loading\"\n [absolute]=\"true\"\n [blur]=\"true\"\n [color]=\"'secondary'\"\n ></suis-spinner-container>\n </tbody>\n</table>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-table{width:100%;border-collapse:collapse}.suis-table thead tr th{font-weight:500;padding:.75rem 1rem;background-color:#273c75;color:#fff}.suis-table thead tr th:first-child{border-top-left-radius:.25rem}.suis-table thead tr th:last-child{border-top-right-radius:.25rem}.suis-table thead tr th.pointer{cursor:pointer}.suis-table thead tr th.pointer:hover{background-color:#273c75d9}.suis-table thead tr th>.suis-table__header{display:flex;align-items:center}.suis-table thead tr th>.suis-table__header suis-icon{display:block;margin-left:.125rem}.suis-table tbody{position:relative;background-color:#f5f6fa}.suis-table tbody tr{border-bottom:.0625rem solid #dcdde1}.suis-table tbody tr td{padding:.375rem 1rem}.suis-table tbody tr td.empty{text-align:center;padding:1.5rem 1rem}\n"] }]
|
|
60
60
|
}], propDecorators: { columns: [{
|
|
61
61
|
type: ContentChildren,
|
|
62
62
|
args: [SuisTableColumnDirective]
|
|
@@ -76,4 +76,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
76
76
|
}], orderByChange: [{
|
|
77
77
|
type: Output
|
|
78
78
|
}] } });
|
|
79
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
79
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Vpcy10YWJsZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL3N1aXMvc3JjL2xpYi9jb21wb25lbnRzL3N1aXMtdGFibGUvc3Vpcy10YWJsZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL3N1aXMvc3JjL2xpYi9jb21wb25lbnRzL3N1aXMtdGFibGUvc3Vpcy10YWJsZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxlQUFlLEVBQ2YsWUFBWSxFQUNaLEtBQUssRUFDTCxNQUFNLEVBQ04sU0FBUyxHQUNWLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxLQUFLLEVBQUUsSUFBSSxFQUFFLGdCQUFnQixFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDaEUsT0FBTyxFQUFFLDZCQUE2QixFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFFMUUsT0FBTyxFQUFFLHdCQUF3QixFQUFFLE1BQU0sK0JBQStCLENBQUM7QUFDekUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7O0FBaUJyRSxNQUFNLE9BQU8sa0JBQWtCO0lBZC9CO1FBbUJFOztXQUVHO1FBQ3dCLFNBQUksR0FBK0IsRUFBRSxDQUFDO1FBRWpFOztXQUVHO1FBQ00sWUFBTyxHQUFXLEVBQUUsQ0FBQztRQUU5Qjs7V0FFRztRQUNNLFdBQU0sR0FBYSxLQUFLLENBQUM7UUFFbEM7O1dBRUc7UUFDTSxZQUFPLEdBQVksS0FBSyxDQUFDO1FBRWxDOztXQUVHO1FBQ00saUJBQVksR0FDbkIsK0NBQStDLENBQUM7UUFFbEQ7O1dBRUc7UUFDTyxpQkFBWSxHQUFHLElBQUksWUFBWSxFQUFZLENBQUM7UUFFdEQ7O1dBRUc7UUFDTyxrQkFBYSxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7S0FXdEQ7SUFUQyxhQUFhLENBQUMsUUFBZ0I7UUFDNUIsSUFBSSxJQUFJLENBQUMsT0FBTyxLQUFLLFFBQVEsRUFBRTtZQUM3QixJQUFJLENBQUMsT0FBTyxHQUFHLFFBQVEsQ0FBQztZQUN4QixJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7U0FDdkM7YUFBTTtZQUNMLElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLE1BQU0sS0FBSyxLQUFLLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDO1lBQ3JELElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztTQUNyQztJQUNILENBQUM7K0dBakRVLGtCQUFrQjttR0FBbEIsa0JBQWtCLDJSQUVaLHdCQUF3Qiw2QkNoQzNDLGk1Q0FpREEsKzhCRDdCSSxJQUFJLDZGQUNKLEtBQUssbUhBQ0wsZ0JBQWdCLG9KQUNoQixpQkFBaUIsa0lBQ2pCLDZCQUE2Qjs7NEZBTXBCLGtCQUFrQjtrQkFkOUIsU0FBUzsrQkFDRSxZQUFZLGNBQ1YsSUFBSSxXQUNQO3dCQUNQLElBQUk7d0JBQ0osS0FBSzt3QkFDTCxnQkFBZ0I7d0JBQ2hCLGlCQUFpQjt3QkFDakIsNkJBQTZCO3FCQUM5QixtQkFHZ0IsdUJBQXVCLENBQUMsTUFBTTs4QkFLL0MsT0FBTztzQkFETixlQUFlO3VCQUFDLHdCQUF3QjtnQkFNZCxJQUFJO3NCQUE5QixLQUFLO3VCQUFDLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRTtnQkFLaEIsT0FBTztzQkFBZixLQUFLO2dCQUtHLE1BQU07c0JBQWQsS0FBSztnQkFLRyxPQUFPO3NCQUFmLEtBQUs7Z0JBS0csWUFBWTtzQkFBcEIsS0FBSztnQkFNSSxZQUFZO3NCQUFyQixNQUFNO2dCQUtHLGFBQWE7c0JBQXRCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBDb250ZW50Q2hpbGRyZW4sXG4gIEV2ZW50RW1pdHRlcixcbiAgSW5wdXQsXG4gIE91dHB1dCxcbiAgUXVlcnlMaXN0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5nRm9yLCBOZ0lmLCBOZ1RlbXBsYXRlT3V0bGV0IH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IFN1aXNTcGlubmVyQ29udGFpbmVyQ29tcG9uZW50IH0gZnJvbSAnLi4vc3Vpcy1zcGlubmVyLWNvbnRhaW5lcic7XG5pbXBvcnQgeyBTdWlzVGFibGVEYXRhSXRlbSB9IGZyb20gJy4vc3Vpcy10YWJsZS5pbnRlcmZhY2VzJztcbmltcG9ydCB7IFN1aXNUYWJsZUNvbHVtbkRpcmVjdGl2ZSB9IGZyb20gJy4vc3Vpcy10YWJsZS1jb2x1bW4uZGlyZWN0aXZlJztcbmltcG9ydCB7IFN1aXNJY29uQ29tcG9uZW50IH0gZnJvbSAnLi4vc3Vpcy1pY29uL3N1aXMtaWNvbi5jb21wb25lbnQnO1xuaW1wb3J0IHsgU3Vpc1NvcnQgfSBmcm9tICcuLi8uLi90eXBlcy9zdWlzLXNvcnQudHlwZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3N1aXMtdGFibGUnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXG4gICAgTmdJZixcbiAgICBOZ0ZvcixcbiAgICBOZ1RlbXBsYXRlT3V0bGV0LFxuICAgIFN1aXNJY29uQ29tcG9uZW50LFxuICAgIFN1aXNTcGlubmVyQ29udGFpbmVyQ29tcG9uZW50LFxuICBdLFxuICB0ZW1wbGF0ZVVybDogJy4vc3Vpcy10YWJsZS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3N1aXMtdGFibGUuY29tcG9uZW50LnNjc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIFN1aXNUYWJsZUNvbXBvbmVudCB7XG4gIC8qKiBAaW50ZXJuYWwgKi9cbiAgQENvbnRlbnRDaGlsZHJlbihTdWlzVGFibGVDb2x1bW5EaXJlY3RpdmUpXG4gIGNvbHVtbnM/OiBRdWVyeUxpc3Q8U3Vpc1RhYmxlQ29sdW1uRGlyZWN0aXZlPjtcblxuICAvKipcbiAgICogRGF0YSBpdGVtcyBjb2xsZWN0aW9uLiBUeXBlIG9mIFN1aXNUYWJsZURhdGFJdGVtW10uIEJ5IGRlZmF1bHQgc2V0IHRvIGVtcHR5IGFycmF5LiBSZXF1aXJlZCBpbnB1dC5cbiAgICovXG4gIEBJbnB1dCh7IHJlcXVpcmVkOiB0cnVlIH0pIGRhdGE6IFN1aXNUYWJsZURhdGFJdGVtW10gfCBudWxsID0gW107XG5cbiAgLyoqXG4gICAqIFNwZWNpZmllcyBwcm9wZXJ0eSB0aGF0IGRhdGEgaXMgb3JkZXJlZC4gQnkgZGVmYXVsdCBzZXQgdG8gZW1wdHkgc3RyaW5nLlxuICAgKi9cbiAgQElucHV0KCkgb3JkZXJCeTogc3RyaW5nID0gJyc7XG5cbiAgLyoqXG4gICAqIFNwZWNpZmllcyBzb3J0IGNvbmRpdGlvbi4gVHlwZSBvZiBTdWlzU29ydCAtICdhc2MnIGFuZCAnZGVzYycuIEJ5IGRlZmF1bHQgc2V0IHRvICdhc2MnLlxuICAgKi9cbiAgQElucHV0KCkgc29ydEJ5OiBTdWlzU29ydCA9ICdhc2MnO1xuXG4gIC8qKlxuICAgKiBTaG93cyBsb2FkaW5nIHNwaW5uZXIgYW5kIGJsdXJzIGRhdGEuIEJ5IGRlZmF1bHQgc2V0IHRvIGZhbHNlLlxuICAgKi9cbiAgQElucHV0KCkgbG9hZGluZzogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBNZXNzYWdlIHNob3duIGluIHRhYmxlIHdoZW4gdGhlcmUgaXMgbm8gZGF0YSB0byBkaXNwbGF5LlxuICAgKi9cbiAgQElucHV0KCkgZW1wdHlNZXNzYWdlOiBzdHJpbmcgPVxuICAgICdUaGVyZSBpcyBubyBkYXRhIHRvIGJlIGRpc3BsYXllZCBpbiB0aGUgdGFibGUnO1xuXG4gIC8qKlxuICAgKiBFbWl0cyB2YWx1ZSBvbiBzb3J0IGNvbmRpdGlvbiBjaGFuZ2UuXG4gICAqL1xuICBAT3V0cHV0KCkgc29ydEJ5Q2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxTdWlzU29ydD4oKTtcblxuICAvKipcbiAgICogRW1pdHMgdmFsdWUgb24gb3JkZXIgcHJvcGVydHkgY2hhbmdlLlxuICAgKi9cbiAgQE91dHB1dCgpIG9yZGVyQnlDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcblxuICBvbkNvbHVtbkNsaWNrKHByb3BlcnR5OiBzdHJpbmcpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5vcmRlckJ5ICE9PSBwcm9wZXJ0eSkge1xuICAgICAgdGhpcy5vcmRlckJ5ID0gcHJvcGVydHk7XG4gICAgICB0aGlzLm9yZGVyQnlDaGFuZ2UuZW1pdCh0aGlzLm9yZGVyQnkpO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLnNvcnRCeSA9IHRoaXMuc29ydEJ5ID09PSAnYXNjJyA/ICdkZXNjJyA6ICdhc2MnO1xuICAgICAgdGhpcy5zb3J0QnlDaGFuZ2UuZW1pdCh0aGlzLnNvcnRCeSk7XG4gICAgfVxuICB9XG59XG4iLCI8dGFibGUgKm5nSWY9XCJjb2x1bW5zXCIgY2xhc3M9XCJzdWlzLXRhYmxlXCI+XG4gIDx0aGVhZD5cbiAgICA8dHI+XG4gICAgICA8dGhcbiAgICAgICAgKm5nRm9yPVwibGV0IGNvbHVtbiBvZiBjb2x1bW5zXCJcbiAgICAgICAgW2NsYXNzLnBvaW50ZXJdPVwiY29sdW1uLm9yZGVyUHJvcGVydHlcIlxuICAgICAgICAoY2xpY2spPVwiXG4gICAgICAgICAgY29sdW1uLm9yZGVyUHJvcGVydHkgPyBvbkNvbHVtbkNsaWNrKGNvbHVtbi5vcmRlclByb3BlcnR5KSA6IHVuZGVmaW5lZFxuICAgICAgICBcIlxuICAgICAgPlxuICAgICAgICA8ZGl2IGNsYXNzPVwic3Vpcy10YWJsZV9faGVhZGVyXCI+XG4gICAgICAgICAgPHNwYW4+XG4gICAgICAgICAgICB7eyBjb2x1bW4ubmFtZSB9fVxuICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgICA8c3Vpcy1pY29uXG4gICAgICAgICAgICAqbmdJZj1cImNvbHVtbi5vcmRlclByb3BlcnR5ICYmIGNvbHVtbi5vcmRlclByb3BlcnR5ID09PSBvcmRlckJ5XCJcbiAgICAgICAgICAgIFt0eXBlXT1cInNvcnRCeSA9PT0gJ2FzYycgPyAnY2hldnJvbi1kb3duJyA6ICdjaGV2cm9uLXVwJ1wiXG4gICAgICAgICAgICBzaXplPVwibGdcIlxuICAgICAgICAgICAgY29sb3I9XCJ3aGl0ZVwiXG4gICAgICAgICAgPjwvc3Vpcy1pY29uPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvdGg+XG4gICAgICA8dGggKm5nSWY9XCIhY29sdW1ucz8ubGVuZ3RoXCI+PC90aD5cbiAgICA8L3RyPlxuICA8L3RoZWFkPlxuICA8dGJvZHk+XG4gICAgPHRyICpuZ0Zvcj1cImxldCBpdGVtIG9mIGRhdGEgfHwgW11cIj5cbiAgICAgIDx0ZCAqbmdGb3I9XCJsZXQgY29sdW1uIG9mIGNvbHVtbnNcIj5cbiAgICAgICAgPG5nLWNvbnRhaW5lclxuICAgICAgICAgICpuZ1RlbXBsYXRlT3V0bGV0PVwiXG4gICAgICAgICAgICBjb2x1bW4uY2VsbCEudGVtcGxhdGVSZWY7XG4gICAgICAgICAgICBjb250ZXh0OiB7ICRpbXBsaWNpdDogaXRlbSB9XG4gICAgICAgICAgXCJcbiAgICAgICAgPjwvbmctY29udGFpbmVyPlxuICAgICAgPC90ZD5cbiAgICA8L3RyPlxuICAgIDx0ciAqbmdJZj1cIiFkYXRhPy5sZW5ndGhcIj5cbiAgICAgIDx0ZCBjbGFzcz1cImVtcHR5XCIgW2F0dHIuY29sc3Bhbl09XCJjb2x1bW5zID8gY29sdW1ucy5sZW5ndGggOiAxXCI+XG4gICAgICAgIHt7IGxvYWRpbmcgPyAnJyA6IGVtcHR5TWVzc2FnZSB9fVxuICAgICAgPC90ZD5cbiAgICA8L3RyPlxuICAgIDxzdWlzLXNwaW5uZXItY29udGFpbmVyXG4gICAgICAqbmdJZj1cImxvYWRpbmdcIlxuICAgICAgW2Fic29sdXRlXT1cInRydWVcIlxuICAgICAgW2JsdXJdPVwidHJ1ZVwiXG4gICAgICBbY29sb3JdPVwiJ3NlY29uZGFyeSdcIlxuICAgID48L3N1aXMtc3Bpbm5lci1jb250YWluZXI+XG4gIDwvdGJvZHk+XG48L3RhYmxlPlxuIl19
|
|
@@ -32,7 +32,7 @@ export class SuisTextAreaComponent extends SuisInputBase {
|
|
|
32
32
|
multi: true,
|
|
33
33
|
useExisting: forwardRef(() => SuisTextAreaComponent),
|
|
34
34
|
},
|
|
35
|
-
], 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 }); }
|
|
35
|
+
], 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{background-color:#f5f6fa;cursor:not-allowed}.suis-text-area--readonly:focus{border:.0625rem solid #dcdde1;box-shadow:none;outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
36
36
|
}
|
|
37
37
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisTextAreaComponent, decorators: [{
|
|
38
38
|
type: Component,
|
|
@@ -42,7 +42,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
42
42
|
multi: true,
|
|
43
43
|
useExisting: forwardRef(() => SuisTextAreaComponent),
|
|
44
44
|
},
|
|
45
|
-
], 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"] }]
|
|
45
|
+
], 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{background-color:#f5f6fa;cursor:not-allowed}.suis-text-area--readonly:focus{border:.0625rem solid #dcdde1;box-shadow:none;outline:none}\n"] }]
|
|
46
46
|
}], propDecorators: { placeholder: [{
|
|
47
47
|
type: Input
|
|
48
48
|
}] } });
|
package/fesm2022/suis.mjs
CHANGED
|
@@ -186,15 +186,21 @@ class SuisBoxComponent {
|
|
|
186
186
|
* Adds a padding around the content. By default set to false.
|
|
187
187
|
*/
|
|
188
188
|
this.spacing = false;
|
|
189
|
+
/**
|
|
190
|
+
* Sets box height to 100%. By default set to false.
|
|
191
|
+
*/
|
|
192
|
+
this.fullHeight = false;
|
|
189
193
|
}
|
|
190
194
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
191
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisBoxComponent, isStandalone: true, selector: "suis-box", inputs: { spacing: "spacing" }, ngImport: i0, template: "<div
|
|
195
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisBoxComponent, isStandalone: true, selector: "suis-box", inputs: { spacing: "spacing", fullHeight: "fullHeight" }, ngImport: i0, template: "<div\n class=\"suis-box\"\n [class.suis-box--spacing]=\"spacing\"\n [class.suis-box--full-height]=\"fullHeight\"\n>\n <ng-content></ng-content>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-box{background-color:#fff;border:.0625rem solid #dcdde1;border-radius:.25rem}.suis-box--full-height{height:100%}.suis-box--spacing{padding:1rem}@media (min-width: 768px){.suis-box--spacing{padding:1.25rem}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
192
196
|
}
|
|
193
197
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisBoxComponent, decorators: [{
|
|
194
198
|
type: Component,
|
|
195
|
-
args: [{ selector: 'suis-box', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div
|
|
199
|
+
args: [{ selector: 'suis-box', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-box\"\n [class.suis-box--spacing]=\"spacing\"\n [class.suis-box--full-height]=\"fullHeight\"\n>\n <ng-content></ng-content>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-box{background-color:#fff;border:.0625rem solid #dcdde1;border-radius:.25rem}.suis-box--full-height{height:100%}.suis-box--spacing{padding:1rem}@media (min-width: 768px){.suis-box--spacing{padding:1.25rem}}\n"] }]
|
|
196
200
|
}], propDecorators: { spacing: [{
|
|
197
201
|
type: Input
|
|
202
|
+
}], fullHeight: [{
|
|
203
|
+
type: Input
|
|
198
204
|
}] } });
|
|
199
205
|
|
|
200
206
|
class SuisBreadcrumbsComponent {
|
|
@@ -434,7 +440,7 @@ class SuisChartComponent {
|
|
|
434
440
|
this._maxValue = value;
|
|
435
441
|
}
|
|
436
442
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
437
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisChartComponent, isStandalone: true, selector: "suis-chart", inputs: { maxValue: "maxValue", labels: "labels", data: "data", color: "color", size: "size", autoMax: "autoMax", compareData: "compareData", compareColor: "compareColor" }, ngImport: i0, template: "<div class=\"suis-chart\">\n <div\n class=\"suis-chart__content\"\n [ngClass]=\"'suis-chart__content' | suisNgClass : size\"\n >\n <div\n *ngFor=\"let item of data | suisChartData : compareData\"\n class=\"suis-chart__content__item\"\n [ngClass]=\"\n 'suis-chart__content__item'\n | suisNgClass\n : (item.compare ? item.color || compareColor : item.color || color)\n : (item.compare ? 'compare' : 'single')\n \"\n [style.height]=\"item.value | suisChartHeight : maxValue\"\n >\n <div class=\"suis-chart__content__item__value\">\n {{ item.value }}\n </div>\n </div>\n </div>\n <div\n class=\"suis-chart__labels\"\n [ngClass]=\"'suis-chart__labels' | suisNgClass : size\"\n >\n <div\n *ngFor=\"let label of labels\"\n class=\"suis-chart__labels__item\"\n [class.suis-chart__labels__item--double]=\"compareData.length\"\n >\n {{ label }}\n </div>\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;height:100%}.suis-chart{height:100%}.suis-chart__content,.suis-chart__labels{display:flex;align-items:flex-end;justify-content:center}.suis-chart__content--xs .suis-chart__content__item,.suis-chart__content--xs .suis-chart__labels__item,.suis-chart__labels--xs .suis-chart__content__item,.suis-chart__labels--xs .suis-chart__labels__item{width:1rem}.suis-chart__content--xs .suis-chart__content__item:not(:last-child),.suis-chart__content--xs .suis-chart__labels__item:not(:last-child),.suis-chart__labels--xs .suis-chart__content__item:not(:last-child),.suis-chart__labels--xs .suis-chart__labels__item:not(:last-child){margin-right:.5rem}.suis-chart__content--xs .suis-chart__content__item--compare,.suis-chart__content--xs .suis-chart__labels__item--compare,.suis-chart__labels--xs .suis-chart__content__item--compare,.suis-chart__labels--xs .suis-chart__labels__item--compare{margin-left:-.5rem}.suis-chart__content--xs .suis-chart__content__item--double,.suis-chart__content--xs .suis-chart__labels__item--double,.suis-chart__labels--xs .suis-chart__content__item--double,.suis-chart__labels--xs .suis-chart__labels__item--double{width:2rem}.suis-chart__content--sm .suis-chart__content__item,.suis-chart__content--sm .suis-chart__labels__item,.suis-chart__labels--sm .suis-chart__content__item,.suis-chart__labels--sm .suis-chart__labels__item{width:1.25rem}.suis-chart__content--sm .suis-chart__content__item:not(:last-child),.suis-chart__content--sm .suis-chart__labels__item:not(:last-child),.suis-chart__labels--sm .suis-chart__content__item:not(:last-child),.suis-chart__labels--sm .suis-chart__labels__item:not(:last-child){margin-right:.625rem}.suis-chart__content--sm .suis-chart__content__item--compare,.suis-chart__content--sm .suis-chart__labels__item--compare,.suis-chart__labels--sm .suis-chart__content__item--compare,.suis-chart__labels--sm .suis-chart__labels__item--compare{margin-left:-.625rem}.suis-chart__content--sm .suis-chart__content__item--double,.suis-chart__content--sm .suis-chart__labels__item--double,.suis-chart__labels--sm .suis-chart__content__item--double,.suis-chart__labels--sm .suis-chart__labels__item--double{width:2.5rem}.suis-chart__content--md .suis-chart__content__item,.suis-chart__content--md .suis-chart__labels__item,.suis-chart__labels--md .suis-chart__content__item,.suis-chart__labels--md .suis-chart__labels__item{width:1.5rem}.suis-chart__content--md .suis-chart__content__item:not(:last-child),.suis-chart__content--md .suis-chart__labels__item:not(:last-child),.suis-chart__labels--md .suis-chart__content__item:not(:last-child),.suis-chart__labels--md .suis-chart__labels__item:not(:last-child){margin-right:.75rem}.suis-chart__content--md .suis-chart__content__item--compare,.suis-chart__content--md .suis-chart__labels__item--compare,.suis-chart__labels--md .suis-chart__content__item--compare,.suis-chart__labels--md .suis-chart__labels__item--compare{margin-left:-.75rem}.suis-chart__content--md .suis-chart__content__item--double,.suis-chart__content--md .suis-chart__labels__item--double,.suis-chart__labels--md .suis-chart__content__item--double,.suis-chart__labels--md .suis-chart__labels__item--double{width:3rem}.suis-chart__content--lg .suis-chart__content__item,.suis-chart__content--lg .suis-chart__labels__item,.suis-chart__labels--lg .suis-chart__content__item,.suis-chart__labels--lg .suis-chart__labels__item{width:1.75rem}.suis-chart__content--lg .suis-chart__content__item:not(:last-child),.suis-chart__content--lg .suis-chart__labels__item:not(:last-child),.suis-chart__labels--lg .suis-chart__content__item:not(:last-child),.suis-chart__labels--lg .suis-chart__labels__item:not(:last-child){margin-right:.875rem}.suis-chart__content--lg .suis-chart__content__item--compare,.suis-chart__content--lg .suis-chart__labels__item--compare,.suis-chart__labels--lg .suis-chart__content__item--compare,.suis-chart__labels--lg .suis-chart__labels__item--compare{margin-left:-1rem}.suis-chart__content--lg .suis-chart__content__item--double,.suis-chart__content--lg .suis-chart__labels__item--double,.suis-chart__labels--lg .suis-chart__content__item--double,.suis-chart__labels--lg .suis-chart__labels__item--double{width:3.5rem}.suis-chart__content--xl .suis-chart__content__item,.suis-chart__content--xl .suis-chart__labels__item,.suis-chart__labels--xl .suis-chart__content__item,.suis-chart__labels--xl .suis-chart__labels__item{width:2rem}.suis-chart__content--xl .suis-chart__content__item:not(:last-child),.suis-chart__content--xl .suis-chart__labels__item:not(:last-child),.suis-chart__labels--xl .suis-chart__content__item:not(:last-child),.suis-chart__labels--xl .suis-chart__labels__item:not(:last-child){margin-right:1rem}.suis-chart__content--xl .suis-chart__content__item--compare,.suis-chart__content--xl .suis-chart__labels__item--compare,.suis-chart__labels--xl .suis-chart__content__item--compare,.suis-chart__labels--xl .suis-chart__labels__item--compare{margin-left:-1rem}.suis-chart__content--xl .suis-chart__content__item--double,.suis-chart__content--xl .suis-chart__labels__item--double,.suis-chart__labels--xl .suis-chart__content__item--double,.suis-chart__labels--xl .suis-chart__labels__item--double{width:4rem}.suis-chart__content{height:100%}.suis-chart__content__item{background-color:#192a56;min-height:.0625rem;position:relative}.suis-chart__content__item--primary{background-color:#192a56}.suis-chart__content__item--secondary{background-color:#273c75}.suis-chart__content__item--tertiary{background-color:#dcdde1}.suis-chart__content__item--complementary{background-color:#f5f6fa}.suis-chart__content__item--success{background-color:#2ed573}.suis-chart__content__item--warning{background-color:#ffa502}.suis-chart__content__item--danger{background-color:#ff4757}.suis-chart__content__item--white{background-color:#fff}.suis-chart__content__item--gray{background-color:#bcbcbc}.suis-chart__content__item--dark{background-color:#000}.suis-chart__content__item__value{position:absolute;top:-1rem;text-align:center;width:100%;font-size:.75rem;color:#a4a7b0}.suis-chart__labels__item{margin-top:.25rem;font-size:.75rem;color:#a4a7b0;text-align:center}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisChartHeightPipe, name: "suisChartHeight" }, { kind: "pipe", type: SuisChartDataPipe, name: "suisChartData" }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
443
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisChartComponent, isStandalone: true, selector: "suis-chart", inputs: { maxValue: "maxValue", labels: "labels", data: "data", color: "color", size: "size", autoMax: "autoMax", compareData: "compareData", compareColor: "compareColor" }, ngImport: i0, template: "<div class=\"suis-chart\">\n <div\n class=\"suis-chart__content\"\n [ngClass]=\"'suis-chart__content' | suisNgClass : size\"\n >\n <div\n *ngFor=\"let item of data | suisChartData : compareData\"\n class=\"suis-chart__content__item\"\n [ngClass]=\"\n 'suis-chart__content__item'\n | suisNgClass\n : (item.compare ? item.color || compareColor : item.color || color)\n : (item.compare ? 'compare' : 'single')\n \"\n [style.height]=\"item.value | suisChartHeight : maxValue\"\n >\n <div class=\"suis-chart__content__item__value\">\n {{ item.value }}\n </div>\n </div>\n </div>\n <div\n class=\"suis-chart__labels\"\n [ngClass]=\"'suis-chart__labels' | suisNgClass : size\"\n >\n <div\n *ngFor=\"let label of labels\"\n class=\"suis-chart__labels__item\"\n [class.suis-chart__labels__item--double]=\"compareData.length\"\n >\n {{ label }}\n </div>\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;height:100%}.suis-chart{height:100%}.suis-chart__content,.suis-chart__labels{display:flex;align-items:flex-end;justify-content:center}.suis-chart__content--xs .suis-chart__content__item,.suis-chart__content--xs .suis-chart__labels__item,.suis-chart__labels--xs .suis-chart__content__item,.suis-chart__labels--xs .suis-chart__labels__item{width:1rem}.suis-chart__content--xs .suis-chart__content__item:not(:last-child),.suis-chart__content--xs .suis-chart__labels__item:not(:last-child),.suis-chart__labels--xs .suis-chart__content__item:not(:last-child),.suis-chart__labels--xs .suis-chart__labels__item:not(:last-child){margin-right:.5rem}.suis-chart__content--xs .suis-chart__content__item--compare,.suis-chart__content--xs .suis-chart__labels__item--compare,.suis-chart__labels--xs .suis-chart__content__item--compare,.suis-chart__labels--xs .suis-chart__labels__item--compare{margin-left:-.5rem}.suis-chart__content--xs .suis-chart__content__item--double,.suis-chart__content--xs .suis-chart__labels__item--double,.suis-chart__labels--xs .suis-chart__content__item--double,.suis-chart__labels--xs .suis-chart__labels__item--double{width:2rem}.suis-chart__content--sm .suis-chart__content__item,.suis-chart__content--sm .suis-chart__labels__item,.suis-chart__labels--sm .suis-chart__content__item,.suis-chart__labels--sm .suis-chart__labels__item{width:1.25rem}.suis-chart__content--sm .suis-chart__content__item:not(:last-child),.suis-chart__content--sm .suis-chart__labels__item:not(:last-child),.suis-chart__labels--sm .suis-chart__content__item:not(:last-child),.suis-chart__labels--sm .suis-chart__labels__item:not(:last-child){margin-right:.625rem}.suis-chart__content--sm .suis-chart__content__item--compare,.suis-chart__content--sm .suis-chart__labels__item--compare,.suis-chart__labels--sm .suis-chart__content__item--compare,.suis-chart__labels--sm .suis-chart__labels__item--compare{margin-left:-.625rem}.suis-chart__content--sm .suis-chart__content__item--double,.suis-chart__content--sm .suis-chart__labels__item--double,.suis-chart__labels--sm .suis-chart__content__item--double,.suis-chart__labels--sm .suis-chart__labels__item--double{width:2.5rem}.suis-chart__content--md .suis-chart__content__item,.suis-chart__content--md .suis-chart__labels__item,.suis-chart__labels--md .suis-chart__content__item,.suis-chart__labels--md .suis-chart__labels__item{width:1.5rem}.suis-chart__content--md .suis-chart__content__item:not(:last-child),.suis-chart__content--md .suis-chart__labels__item:not(:last-child),.suis-chart__labels--md .suis-chart__content__item:not(:last-child),.suis-chart__labels--md .suis-chart__labels__item:not(:last-child){margin-right:.75rem}.suis-chart__content--md .suis-chart__content__item--compare,.suis-chart__content--md .suis-chart__labels__item--compare,.suis-chart__labels--md .suis-chart__content__item--compare,.suis-chart__labels--md .suis-chart__labels__item--compare{margin-left:-.75rem}.suis-chart__content--md .suis-chart__content__item--double,.suis-chart__content--md .suis-chart__labels__item--double,.suis-chart__labels--md .suis-chart__content__item--double,.suis-chart__labels--md .suis-chart__labels__item--double{width:3rem}.suis-chart__content--lg .suis-chart__content__item,.suis-chart__content--lg .suis-chart__labels__item,.suis-chart__labels--lg .suis-chart__content__item,.suis-chart__labels--lg .suis-chart__labels__item{width:1.75rem}.suis-chart__content--lg .suis-chart__content__item:not(:last-child),.suis-chart__content--lg .suis-chart__labels__item:not(:last-child),.suis-chart__labels--lg .suis-chart__content__item:not(:last-child),.suis-chart__labels--lg .suis-chart__labels__item:not(:last-child){margin-right:.875rem}.suis-chart__content--lg .suis-chart__content__item--compare,.suis-chart__content--lg .suis-chart__labels__item--compare,.suis-chart__labels--lg .suis-chart__content__item--compare,.suis-chart__labels--lg .suis-chart__labels__item--compare{margin-left:-1rem}.suis-chart__content--lg .suis-chart__content__item--double,.suis-chart__content--lg .suis-chart__labels__item--double,.suis-chart__labels--lg .suis-chart__content__item--double,.suis-chart__labels--lg .suis-chart__labels__item--double{width:3.5rem}.suis-chart__content--xl .suis-chart__content__item,.suis-chart__content--xl .suis-chart__labels__item,.suis-chart__labels--xl .suis-chart__content__item,.suis-chart__labels--xl .suis-chart__labels__item{width:2rem}.suis-chart__content--xl .suis-chart__content__item:not(:last-child),.suis-chart__content--xl .suis-chart__labels__item:not(:last-child),.suis-chart__labels--xl .suis-chart__content__item:not(:last-child),.suis-chart__labels--xl .suis-chart__labels__item:not(:last-child){margin-right:1rem}.suis-chart__content--xl .suis-chart__content__item--compare,.suis-chart__content--xl .suis-chart__labels__item--compare,.suis-chart__labels--xl .suis-chart__content__item--compare,.suis-chart__labels--xl .suis-chart__labels__item--compare{margin-left:-1rem}.suis-chart__content--xl .suis-chart__content__item--double,.suis-chart__content--xl .suis-chart__labels__item--double,.suis-chart__labels--xl .suis-chart__content__item--double,.suis-chart__labels--xl .suis-chart__labels__item--double{width:4rem}.suis-chart__content{height:calc(100% - 1.25rem)}.suis-chart__content__item{background-color:#192a56;min-height:.0625rem;position:relative}.suis-chart__content__item--primary{background-color:#192a56}.suis-chart__content__item--secondary{background-color:#273c75}.suis-chart__content__item--tertiary{background-color:#dcdde1}.suis-chart__content__item--complementary{background-color:#f5f6fa}.suis-chart__content__item--success{background-color:#2ed573}.suis-chart__content__item--warning{background-color:#ffa502}.suis-chart__content__item--danger{background-color:#ff4757}.suis-chart__content__item--white{background-color:#fff}.suis-chart__content__item--gray{background-color:#bcbcbc}.suis-chart__content__item--dark{background-color:#000}.suis-chart__content__item__value{position:absolute;top:-1rem;text-align:center;width:100%;font-size:.75rem;color:#a4a7b0}.suis-chart__labels__item{margin-top:.25rem;font-size:.75rem;color:#a4a7b0;text-align:center}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisChartHeightPipe, name: "suisChartHeight" }, { kind: "pipe", type: SuisChartDataPipe, name: "suisChartData" }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
438
444
|
}
|
|
439
445
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisChartComponent, decorators: [{
|
|
440
446
|
type: Component,
|
|
@@ -445,7 +451,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
445
451
|
SuisChartHeightPipe,
|
|
446
452
|
SuisChartDataPipe,
|
|
447
453
|
SuisNgClassPipe,
|
|
448
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-chart\">\n <div\n class=\"suis-chart__content\"\n [ngClass]=\"'suis-chart__content' | suisNgClass : size\"\n >\n <div\n *ngFor=\"let item of data | suisChartData : compareData\"\n class=\"suis-chart__content__item\"\n [ngClass]=\"\n 'suis-chart__content__item'\n | suisNgClass\n : (item.compare ? item.color || compareColor : item.color || color)\n : (item.compare ? 'compare' : 'single')\n \"\n [style.height]=\"item.value | suisChartHeight : maxValue\"\n >\n <div class=\"suis-chart__content__item__value\">\n {{ item.value }}\n </div>\n </div>\n </div>\n <div\n class=\"suis-chart__labels\"\n [ngClass]=\"'suis-chart__labels' | suisNgClass : size\"\n >\n <div\n *ngFor=\"let label of labels\"\n class=\"suis-chart__labels__item\"\n [class.suis-chart__labels__item--double]=\"compareData.length\"\n >\n {{ label }}\n </div>\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;height:100%}.suis-chart{height:100%}.suis-chart__content,.suis-chart__labels{display:flex;align-items:flex-end;justify-content:center}.suis-chart__content--xs .suis-chart__content__item,.suis-chart__content--xs .suis-chart__labels__item,.suis-chart__labels--xs .suis-chart__content__item,.suis-chart__labels--xs .suis-chart__labels__item{width:1rem}.suis-chart__content--xs .suis-chart__content__item:not(:last-child),.suis-chart__content--xs .suis-chart__labels__item:not(:last-child),.suis-chart__labels--xs .suis-chart__content__item:not(:last-child),.suis-chart__labels--xs .suis-chart__labels__item:not(:last-child){margin-right:.5rem}.suis-chart__content--xs .suis-chart__content__item--compare,.suis-chart__content--xs .suis-chart__labels__item--compare,.suis-chart__labels--xs .suis-chart__content__item--compare,.suis-chart__labels--xs .suis-chart__labels__item--compare{margin-left:-.5rem}.suis-chart__content--xs .suis-chart__content__item--double,.suis-chart__content--xs .suis-chart__labels__item--double,.suis-chart__labels--xs .suis-chart__content__item--double,.suis-chart__labels--xs .suis-chart__labels__item--double{width:2rem}.suis-chart__content--sm .suis-chart__content__item,.suis-chart__content--sm .suis-chart__labels__item,.suis-chart__labels--sm .suis-chart__content__item,.suis-chart__labels--sm .suis-chart__labels__item{width:1.25rem}.suis-chart__content--sm .suis-chart__content__item:not(:last-child),.suis-chart__content--sm .suis-chart__labels__item:not(:last-child),.suis-chart__labels--sm .suis-chart__content__item:not(:last-child),.suis-chart__labels--sm .suis-chart__labels__item:not(:last-child){margin-right:.625rem}.suis-chart__content--sm .suis-chart__content__item--compare,.suis-chart__content--sm .suis-chart__labels__item--compare,.suis-chart__labels--sm .suis-chart__content__item--compare,.suis-chart__labels--sm .suis-chart__labels__item--compare{margin-left:-.625rem}.suis-chart__content--sm .suis-chart__content__item--double,.suis-chart__content--sm .suis-chart__labels__item--double,.suis-chart__labels--sm .suis-chart__content__item--double,.suis-chart__labels--sm .suis-chart__labels__item--double{width:2.5rem}.suis-chart__content--md .suis-chart__content__item,.suis-chart__content--md .suis-chart__labels__item,.suis-chart__labels--md .suis-chart__content__item,.suis-chart__labels--md .suis-chart__labels__item{width:1.5rem}.suis-chart__content--md .suis-chart__content__item:not(:last-child),.suis-chart__content--md .suis-chart__labels__item:not(:last-child),.suis-chart__labels--md .suis-chart__content__item:not(:last-child),.suis-chart__labels--md .suis-chart__labels__item:not(:last-child){margin-right:.75rem}.suis-chart__content--md .suis-chart__content__item--compare,.suis-chart__content--md .suis-chart__labels__item--compare,.suis-chart__labels--md .suis-chart__content__item--compare,.suis-chart__labels--md .suis-chart__labels__item--compare{margin-left:-.75rem}.suis-chart__content--md .suis-chart__content__item--double,.suis-chart__content--md .suis-chart__labels__item--double,.suis-chart__labels--md .suis-chart__content__item--double,.suis-chart__labels--md .suis-chart__labels__item--double{width:3rem}.suis-chart__content--lg .suis-chart__content__item,.suis-chart__content--lg .suis-chart__labels__item,.suis-chart__labels--lg .suis-chart__content__item,.suis-chart__labels--lg .suis-chart__labels__item{width:1.75rem}.suis-chart__content--lg .suis-chart__content__item:not(:last-child),.suis-chart__content--lg .suis-chart__labels__item:not(:last-child),.suis-chart__labels--lg .suis-chart__content__item:not(:last-child),.suis-chart__labels--lg .suis-chart__labels__item:not(:last-child){margin-right:.875rem}.suis-chart__content--lg .suis-chart__content__item--compare,.suis-chart__content--lg .suis-chart__labels__item--compare,.suis-chart__labels--lg .suis-chart__content__item--compare,.suis-chart__labels--lg .suis-chart__labels__item--compare{margin-left:-1rem}.suis-chart__content--lg .suis-chart__content__item--double,.suis-chart__content--lg .suis-chart__labels__item--double,.suis-chart__labels--lg .suis-chart__content__item--double,.suis-chart__labels--lg .suis-chart__labels__item--double{width:3.5rem}.suis-chart__content--xl .suis-chart__content__item,.suis-chart__content--xl .suis-chart__labels__item,.suis-chart__labels--xl .suis-chart__content__item,.suis-chart__labels--xl .suis-chart__labels__item{width:2rem}.suis-chart__content--xl .suis-chart__content__item:not(:last-child),.suis-chart__content--xl .suis-chart__labels__item:not(:last-child),.suis-chart__labels--xl .suis-chart__content__item:not(:last-child),.suis-chart__labels--xl .suis-chart__labels__item:not(:last-child){margin-right:1rem}.suis-chart__content--xl .suis-chart__content__item--compare,.suis-chart__content--xl .suis-chart__labels__item--compare,.suis-chart__labels--xl .suis-chart__content__item--compare,.suis-chart__labels--xl .suis-chart__labels__item--compare{margin-left:-1rem}.suis-chart__content--xl .suis-chart__content__item--double,.suis-chart__content--xl .suis-chart__labels__item--double,.suis-chart__labels--xl .suis-chart__content__item--double,.suis-chart__labels--xl .suis-chart__labels__item--double{width:4rem}.suis-chart__content{height:100%}.suis-chart__content__item{background-color:#192a56;min-height:.0625rem;position:relative}.suis-chart__content__item--primary{background-color:#192a56}.suis-chart__content__item--secondary{background-color:#273c75}.suis-chart__content__item--tertiary{background-color:#dcdde1}.suis-chart__content__item--complementary{background-color:#f5f6fa}.suis-chart__content__item--success{background-color:#2ed573}.suis-chart__content__item--warning{background-color:#ffa502}.suis-chart__content__item--danger{background-color:#ff4757}.suis-chart__content__item--white{background-color:#fff}.suis-chart__content__item--gray{background-color:#bcbcbc}.suis-chart__content__item--dark{background-color:#000}.suis-chart__content__item__value{position:absolute;top:-1rem;text-align:center;width:100%;font-size:.75rem;color:#a4a7b0}.suis-chart__labels__item{margin-top:.25rem;font-size:.75rem;color:#a4a7b0;text-align:center}\n"] }]
|
|
454
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-chart\">\n <div\n class=\"suis-chart__content\"\n [ngClass]=\"'suis-chart__content' | suisNgClass : size\"\n >\n <div\n *ngFor=\"let item of data | suisChartData : compareData\"\n class=\"suis-chart__content__item\"\n [ngClass]=\"\n 'suis-chart__content__item'\n | suisNgClass\n : (item.compare ? item.color || compareColor : item.color || color)\n : (item.compare ? 'compare' : 'single')\n \"\n [style.height]=\"item.value | suisChartHeight : maxValue\"\n >\n <div class=\"suis-chart__content__item__value\">\n {{ item.value }}\n </div>\n </div>\n </div>\n <div\n class=\"suis-chart__labels\"\n [ngClass]=\"'suis-chart__labels' | suisNgClass : size\"\n >\n <div\n *ngFor=\"let label of labels\"\n class=\"suis-chart__labels__item\"\n [class.suis-chart__labels__item--double]=\"compareData.length\"\n >\n {{ label }}\n </div>\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;height:100%}.suis-chart{height:100%}.suis-chart__content,.suis-chart__labels{display:flex;align-items:flex-end;justify-content:center}.suis-chart__content--xs .suis-chart__content__item,.suis-chart__content--xs .suis-chart__labels__item,.suis-chart__labels--xs .suis-chart__content__item,.suis-chart__labels--xs .suis-chart__labels__item{width:1rem}.suis-chart__content--xs .suis-chart__content__item:not(:last-child),.suis-chart__content--xs .suis-chart__labels__item:not(:last-child),.suis-chart__labels--xs .suis-chart__content__item:not(:last-child),.suis-chart__labels--xs .suis-chart__labels__item:not(:last-child){margin-right:.5rem}.suis-chart__content--xs .suis-chart__content__item--compare,.suis-chart__content--xs .suis-chart__labels__item--compare,.suis-chart__labels--xs .suis-chart__content__item--compare,.suis-chart__labels--xs .suis-chart__labels__item--compare{margin-left:-.5rem}.suis-chart__content--xs .suis-chart__content__item--double,.suis-chart__content--xs .suis-chart__labels__item--double,.suis-chart__labels--xs .suis-chart__content__item--double,.suis-chart__labels--xs .suis-chart__labels__item--double{width:2rem}.suis-chart__content--sm .suis-chart__content__item,.suis-chart__content--sm .suis-chart__labels__item,.suis-chart__labels--sm .suis-chart__content__item,.suis-chart__labels--sm .suis-chart__labels__item{width:1.25rem}.suis-chart__content--sm .suis-chart__content__item:not(:last-child),.suis-chart__content--sm .suis-chart__labels__item:not(:last-child),.suis-chart__labels--sm .suis-chart__content__item:not(:last-child),.suis-chart__labels--sm .suis-chart__labels__item:not(:last-child){margin-right:.625rem}.suis-chart__content--sm .suis-chart__content__item--compare,.suis-chart__content--sm .suis-chart__labels__item--compare,.suis-chart__labels--sm .suis-chart__content__item--compare,.suis-chart__labels--sm .suis-chart__labels__item--compare{margin-left:-.625rem}.suis-chart__content--sm .suis-chart__content__item--double,.suis-chart__content--sm .suis-chart__labels__item--double,.suis-chart__labels--sm .suis-chart__content__item--double,.suis-chart__labels--sm .suis-chart__labels__item--double{width:2.5rem}.suis-chart__content--md .suis-chart__content__item,.suis-chart__content--md .suis-chart__labels__item,.suis-chart__labels--md .suis-chart__content__item,.suis-chart__labels--md .suis-chart__labels__item{width:1.5rem}.suis-chart__content--md .suis-chart__content__item:not(:last-child),.suis-chart__content--md .suis-chart__labels__item:not(:last-child),.suis-chart__labels--md .suis-chart__content__item:not(:last-child),.suis-chart__labels--md .suis-chart__labels__item:not(:last-child){margin-right:.75rem}.suis-chart__content--md .suis-chart__content__item--compare,.suis-chart__content--md .suis-chart__labels__item--compare,.suis-chart__labels--md .suis-chart__content__item--compare,.suis-chart__labels--md .suis-chart__labels__item--compare{margin-left:-.75rem}.suis-chart__content--md .suis-chart__content__item--double,.suis-chart__content--md .suis-chart__labels__item--double,.suis-chart__labels--md .suis-chart__content__item--double,.suis-chart__labels--md .suis-chart__labels__item--double{width:3rem}.suis-chart__content--lg .suis-chart__content__item,.suis-chart__content--lg .suis-chart__labels__item,.suis-chart__labels--lg .suis-chart__content__item,.suis-chart__labels--lg .suis-chart__labels__item{width:1.75rem}.suis-chart__content--lg .suis-chart__content__item:not(:last-child),.suis-chart__content--lg .suis-chart__labels__item:not(:last-child),.suis-chart__labels--lg .suis-chart__content__item:not(:last-child),.suis-chart__labels--lg .suis-chart__labels__item:not(:last-child){margin-right:.875rem}.suis-chart__content--lg .suis-chart__content__item--compare,.suis-chart__content--lg .suis-chart__labels__item--compare,.suis-chart__labels--lg .suis-chart__content__item--compare,.suis-chart__labels--lg .suis-chart__labels__item--compare{margin-left:-1rem}.suis-chart__content--lg .suis-chart__content__item--double,.suis-chart__content--lg .suis-chart__labels__item--double,.suis-chart__labels--lg .suis-chart__content__item--double,.suis-chart__labels--lg .suis-chart__labels__item--double{width:3.5rem}.suis-chart__content--xl .suis-chart__content__item,.suis-chart__content--xl .suis-chart__labels__item,.suis-chart__labels--xl .suis-chart__content__item,.suis-chart__labels--xl .suis-chart__labels__item{width:2rem}.suis-chart__content--xl .suis-chart__content__item:not(:last-child),.suis-chart__content--xl .suis-chart__labels__item:not(:last-child),.suis-chart__labels--xl .suis-chart__content__item:not(:last-child),.suis-chart__labels--xl .suis-chart__labels__item:not(:last-child){margin-right:1rem}.suis-chart__content--xl .suis-chart__content__item--compare,.suis-chart__content--xl .suis-chart__labels__item--compare,.suis-chart__labels--xl .suis-chart__content__item--compare,.suis-chart__labels--xl .suis-chart__labels__item--compare{margin-left:-1rem}.suis-chart__content--xl .suis-chart__content__item--double,.suis-chart__content--xl .suis-chart__labels__item--double,.suis-chart__labels--xl .suis-chart__content__item--double,.suis-chart__labels--xl .suis-chart__labels__item--double{width:4rem}.suis-chart__content{height:calc(100% - 1.25rem)}.suis-chart__content__item{background-color:#192a56;min-height:.0625rem;position:relative}.suis-chart__content__item--primary{background-color:#192a56}.suis-chart__content__item--secondary{background-color:#273c75}.suis-chart__content__item--tertiary{background-color:#dcdde1}.suis-chart__content__item--complementary{background-color:#f5f6fa}.suis-chart__content__item--success{background-color:#2ed573}.suis-chart__content__item--warning{background-color:#ffa502}.suis-chart__content__item--danger{background-color:#ff4757}.suis-chart__content__item--white{background-color:#fff}.suis-chart__content__item--gray{background-color:#bcbcbc}.suis-chart__content__item--dark{background-color:#000}.suis-chart__content__item__value{position:absolute;top:-1rem;text-align:center;width:100%;font-size:.75rem;color:#a4a7b0}.suis-chart__labels__item{margin-top:.25rem;font-size:.75rem;color:#a4a7b0;text-align:center}\n"] }]
|
|
449
455
|
}], propDecorators: { maxValue: [{
|
|
450
456
|
type: Input
|
|
451
457
|
}], labels: [{
|
|
@@ -511,11 +517,11 @@ class SuisContainerComponent {
|
|
|
511
517
|
this.spacing = false;
|
|
512
518
|
}
|
|
513
519
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
514
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisContainerComponent, isStandalone: true, selector: "suis-container", inputs: { spacing: "spacing" }, ngImport: i0, template: "<div class=\"suis-container\" [class.suis-container--spacing]=\"spacing\">\n <ng-content></ng-content>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block;width:100%}.suis-container{width:100%;margin:auto}.suis-container--spacing{padding:1rem}@media (min-width: 768px){.suis-container
|
|
520
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisContainerComponent, isStandalone: true, selector: "suis-container", inputs: { spacing: "spacing" }, ngImport: i0, template: "<div class=\"suis-container\" [class.suis-container--spacing]=\"spacing\">\n <ng-content></ng-content>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block;width:100%}.suis-container{width:100%;max-width:1440px;margin:auto}.suis-container--spacing{padding:1rem}@media (min-width: 768px){.suis-container--spacing{padding:1.25rem}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
515
521
|
}
|
|
516
522
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisContainerComponent, decorators: [{
|
|
517
523
|
type: Component,
|
|
518
|
-
args: [{ selector: 'suis-container', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-container\" [class.suis-container--spacing]=\"spacing\">\n <ng-content></ng-content>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block;width:100%}.suis-container{width:100%;margin:auto}.suis-container--spacing{padding:1rem}@media (min-width: 768px){.suis-container
|
|
524
|
+
args: [{ selector: 'suis-container', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-container\" [class.suis-container--spacing]=\"spacing\">\n <ng-content></ng-content>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block;width:100%}.suis-container{width:100%;max-width:1440px;margin:auto}.suis-container--spacing{padding:1rem}@media (min-width: 768px){.suis-container--spacing{padding:1.25rem}}\n"] }]
|
|
519
525
|
}], propDecorators: { spacing: [{
|
|
520
526
|
type: Input
|
|
521
527
|
}] } });
|
|
@@ -721,11 +727,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
721
727
|
|
|
722
728
|
class SuisFormFieldComponent {
|
|
723
729
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
724
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisFormFieldComponent, isStandalone: true, selector: "suis-form-field", inputs: { errorTemplate: "errorTemplate" }, ngImport: i0, template: "<div class=\"suis-form-field\">\n <ng-content></ng-content>\n <div *ngIf=\"errorTemplate\" class=\"suis-form-field__error\">\n <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-form-field{width:100%}.suis-form-field__error{color:#ff4757;margin-top:.
|
|
730
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisFormFieldComponent, isStandalone: true, selector: "suis-form-field", inputs: { errorTemplate: "errorTemplate" }, ngImport: i0, template: "<div class=\"suis-form-field\">\n <ng-content></ng-content>\n <div *ngIf=\"errorTemplate\" class=\"suis-form-field__error\">\n <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-form-field{width:100%}.suis-form-field__error{color:#ff4757;margin-top:.125rem;font-size:.75rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
725
731
|
}
|
|
726
732
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisFormFieldComponent, decorators: [{
|
|
727
733
|
type: Component,
|
|
728
|
-
args: [{ selector: 'suis-form-field', standalone: true, imports: [NgIf, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-form-field\">\n <ng-content></ng-content>\n <div *ngIf=\"errorTemplate\" class=\"suis-form-field__error\">\n <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-form-field{width:100%}.suis-form-field__error{color:#ff4757;margin-top:.
|
|
734
|
+
args: [{ selector: 'suis-form-field', standalone: true, imports: [NgIf, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-form-field\">\n <ng-content></ng-content>\n <div *ngIf=\"errorTemplate\" class=\"suis-form-field__error\">\n <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-form-field{width:100%}.suis-form-field__error{color:#ff4757;margin-top:.125rem;font-size:.75rem}\n"] }]
|
|
729
735
|
}], propDecorators: { errorTemplate: [{
|
|
730
736
|
type: Input
|
|
731
737
|
}] } });
|
|
@@ -832,7 +838,7 @@ class SuisInputComponent extends SuisInputBase {
|
|
|
832
838
|
multi: true,
|
|
833
839
|
useExisting: forwardRef(() => SuisInputComponent),
|
|
834
840
|
},
|
|
835
|
-
], 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 }); }
|
|
841
|
+
], 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{background-color:#f5f6fa;cursor:not-allowed}.suis-input--readonly:focus{border:.0625rem solid #dcdde1;box-shadow:none;outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
836
842
|
}
|
|
837
843
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisInputComponent, decorators: [{
|
|
838
844
|
type: Component,
|
|
@@ -842,7 +848,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
842
848
|
multi: true,
|
|
843
849
|
useExisting: forwardRef(() => SuisInputComponent),
|
|
844
850
|
},
|
|
845
|
-
], 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"] }]
|
|
851
|
+
], 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{background-color:#f5f6fa;cursor:not-allowed}.suis-input--readonly:focus{border:.0625rem solid #dcdde1;box-shadow:none;outline:none}\n"] }]
|
|
846
852
|
}], propDecorators: { type: [{
|
|
847
853
|
type: Input
|
|
848
854
|
}], placeholder: [{
|
|
@@ -1058,7 +1064,7 @@ class SuisInputImageComponent extends SuisInputBase {
|
|
|
1058
1064
|
multi: true,
|
|
1059
1065
|
useExisting: forwardRef(() => SuisInputImageComponent),
|
|
1060
1066
|
},
|
|
1061
|
-
], 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=\"times\"\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 }); }
|
|
1067
|
+
], 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=\"times\"\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{background-color:#f5f6fa;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 }); }
|
|
1062
1068
|
}
|
|
1063
1069
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisInputImageComponent, decorators: [{
|
|
1064
1070
|
type: Component,
|
|
@@ -1068,7 +1074,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1068
1074
|
multi: true,
|
|
1069
1075
|
useExisting: forwardRef(() => SuisInputImageComponent),
|
|
1070
1076
|
},
|
|
1071
|
-
], 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=\"times\"\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"] }]
|
|
1077
|
+
], 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=\"times\"\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{background-color:#f5f6fa;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"] }]
|
|
1072
1078
|
}], propDecorators: { fileInput: [{
|
|
1073
1079
|
type: ViewChild,
|
|
1074
1080
|
args: ['input']
|
|
@@ -1199,7 +1205,7 @@ class SuisInputNumberComponent extends SuisInputBase {
|
|
|
1199
1205
|
multi: true,
|
|
1200
1206
|
useExisting: forwardRef(() => SuisInputNumberComponent),
|
|
1201
1207
|
},
|
|
1202
|
-
], 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 }); }
|
|
1208
|
+
], 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{background-color:#f5f6fa;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 }); }
|
|
1203
1209
|
}
|
|
1204
1210
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisInputNumberComponent, decorators: [{
|
|
1205
1211
|
type: Component,
|
|
@@ -1209,7 +1215,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1209
1215
|
multi: true,
|
|
1210
1216
|
useExisting: forwardRef(() => SuisInputNumberComponent),
|
|
1211
1217
|
},
|
|
1212
|
-
], 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"] }]
|
|
1218
|
+
], 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{background-color:#f5f6fa;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"] }]
|
|
1213
1219
|
}], propDecorators: { placeholder: [{
|
|
1214
1220
|
type: Input
|
|
1215
1221
|
}] } });
|
|
@@ -1704,7 +1710,7 @@ class SuisSelectComponent extends SuisSelectBase {
|
|
|
1704
1710
|
multi: true,
|
|
1705
1711
|
useExisting: forwardRef(() => SuisSelectComponent),
|
|
1706
1712
|
},
|
|
1707
|
-
], 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=\"times\"\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:2.625rem;left:0;max-height:13.375rem;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;font-size:.875rem}.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 }); }
|
|
1713
|
+
], 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=\"times\"\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{background-color:#f5f6fa;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:2.625rem;left:0;max-height:13.375rem;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;font-size:.875rem}.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 }); }
|
|
1708
1714
|
}
|
|
1709
1715
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectComponent, decorators: [{
|
|
1710
1716
|
type: Component,
|
|
@@ -1724,7 +1730,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1724
1730
|
multi: true,
|
|
1725
1731
|
useExisting: forwardRef(() => SuisSelectComponent),
|
|
1726
1732
|
},
|
|
1727
|
-
], 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=\"times\"\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:2.625rem;left:0;max-height:13.375rem;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;font-size:.875rem}.suis-select__list__search:focus{outline:none}\n"] }]
|
|
1733
|
+
], 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=\"times\"\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{background-color:#f5f6fa;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:2.625rem;left:0;max-height:13.375rem;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;font-size:.875rem}.suis-select__list__search:focus{outline:none}\n"] }]
|
|
1728
1734
|
}], propDecorators: { nullable: [{
|
|
1729
1735
|
type: Input
|
|
1730
1736
|
}] } });
|
|
@@ -1821,7 +1827,7 @@ class SuisSelectMultiComponent extends SuisSelectBase {
|
|
|
1821
1827
|
multi: true,
|
|
1822
1828
|
useExisting: forwardRef(() => SuisSelectMultiComponent),
|
|
1823
1829
|
},
|
|
1824
|
-
], 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=\"times\"\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:2.625rem;left:0;max-height:13.375rem;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;font-size:.875rem}.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 }); }
|
|
1830
|
+
], 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=\"times\"\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{background-color:#f5f6fa;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:2.625rem;left:0;max-height:13.375rem;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;font-size:.875rem}.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 }); }
|
|
1825
1831
|
}
|
|
1826
1832
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectMultiComponent, decorators: [{
|
|
1827
1833
|
type: Component,
|
|
@@ -1842,7 +1848,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1842
1848
|
multi: true,
|
|
1843
1849
|
useExisting: forwardRef(() => SuisSelectMultiComponent),
|
|
1844
1850
|
},
|
|
1845
|
-
], 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=\"times\"\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:2.625rem;left:0;max-height:13.375rem;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;font-size:.875rem}.suis-select-multi__list__search:focus{outline:none}\n"] }]
|
|
1851
|
+
], 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=\"times\"\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{background-color:#f5f6fa;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:2.625rem;left:0;max-height:13.375rem;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;font-size:.875rem}.suis-select-multi__list__search:focus{outline:none}\n"] }]
|
|
1846
1852
|
}], propDecorators: { duplicate: [{
|
|
1847
1853
|
type: Input
|
|
1848
1854
|
}], chipColor: [{
|
|
@@ -2194,7 +2200,7 @@ class SuisTableComponent {
|
|
|
2194
2200
|
}
|
|
2195
2201
|
}
|
|
2196
2202
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2197
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisTableComponent, isStandalone: true, selector: "suis-table", inputs: { data: "data", orderBy: "orderBy", sortBy: "sortBy", loading: "loading", emptyMessage: "emptyMessage" }, outputs: { sortByChange: "sortByChange", orderByChange: "orderByChange" }, queries: [{ propertyName: "columns", predicate: SuisTableColumnDirective }], ngImport: i0, template: "<table *ngIf=\"columns\" class=\"suis-table\">\n <thead>\n <tr>\n <th\n *ngFor=\"let column of columns\"\n [class.pointer]=\"column.orderProperty\"\n (click)=\"\n column.orderProperty ? onColumnClick(column.orderProperty) : undefined\n \"\n >\n <div class=\"suis-table__header\">\n <span>\n {{ column.name }}\n </span>\n <suis-icon\n *ngIf=\"column.orderProperty && column.orderProperty === orderBy\"\n [type]=\"sortBy === 'asc' ? 'chevron-down' : 'chevron-up'\"\n size=\"lg\"\n color=\"white\"\n ></suis-icon>\n </div>\n </th>\n <th *ngIf=\"!columns?.length\"></th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let item of data\">\n <td *ngFor=\"let column of columns\">\n <ng-container\n *ngTemplateOutlet=\"\n column.cell!.templateRef;\n context: { $implicit: item }\n \"\n ></ng-container>\n </td>\n </tr>\n <tr *ngIf=\"!data?.length\">\n <td class=\"empty\" [attr.colspan]=\"columns ? columns.length : 1\">\n {{ loading ? '' : emptyMessage }}\n </td>\n </tr>\n <suis-spinner-container\n *ngIf=\"loading\"\n [absolute]=\"true\"\n [blur]=\"true\"\n [color]=\"'secondary'\"\n ></suis-spinner-container>\n </tbody>\n</table>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-table{width:100%;border-collapse:collapse}.suis-table thead tr th{font-weight:500;padding:.75rem 1rem;background-color:#273c75;color:#fff}.suis-table thead tr th:first-child{border-top-left-radius:.25rem}.suis-table thead tr th:last-child{border-top-right-radius:.25rem}.suis-table thead tr th.pointer{cursor:pointer}.suis-table thead tr th.pointer:hover{background-color:#273c75d9}.suis-table thead tr th>.suis-table__header{display:flex;align-items:center}.suis-table thead tr th>.suis-table__header suis-icon{display:block;margin-left:.125rem}.suis-table tbody{position:relative;background-color:#f5f6fa}.suis-table tbody tr{border-bottom:.0625rem solid #dcdde1}.suis-table tbody tr td{padding:.375rem 1rem}.suis-table tbody tr td.empty{text-align:center;padding:1.5rem 1rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }, { kind: "component", type: SuisSpinnerContainerComponent, selector: "suis-spinner-container", inputs: ["size", "color", "blur", "absolute"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2203
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisTableComponent, isStandalone: true, selector: "suis-table", inputs: { data: "data", orderBy: "orderBy", sortBy: "sortBy", loading: "loading", emptyMessage: "emptyMessage" }, outputs: { sortByChange: "sortByChange", orderByChange: "orderByChange" }, queries: [{ propertyName: "columns", predicate: SuisTableColumnDirective }], ngImport: i0, template: "<table *ngIf=\"columns\" class=\"suis-table\">\n <thead>\n <tr>\n <th\n *ngFor=\"let column of columns\"\n [class.pointer]=\"column.orderProperty\"\n (click)=\"\n column.orderProperty ? onColumnClick(column.orderProperty) : undefined\n \"\n >\n <div class=\"suis-table__header\">\n <span>\n {{ column.name }}\n </span>\n <suis-icon\n *ngIf=\"column.orderProperty && column.orderProperty === orderBy\"\n [type]=\"sortBy === 'asc' ? 'chevron-down' : 'chevron-up'\"\n size=\"lg\"\n color=\"white\"\n ></suis-icon>\n </div>\n </th>\n <th *ngIf=\"!columns?.length\"></th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let item of data || []\">\n <td *ngFor=\"let column of columns\">\n <ng-container\n *ngTemplateOutlet=\"\n column.cell!.templateRef;\n context: { $implicit: item }\n \"\n ></ng-container>\n </td>\n </tr>\n <tr *ngIf=\"!data?.length\">\n <td class=\"empty\" [attr.colspan]=\"columns ? columns.length : 1\">\n {{ loading ? '' : emptyMessage }}\n </td>\n </tr>\n <suis-spinner-container\n *ngIf=\"loading\"\n [absolute]=\"true\"\n [blur]=\"true\"\n [color]=\"'secondary'\"\n ></suis-spinner-container>\n </tbody>\n</table>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-table{width:100%;border-collapse:collapse}.suis-table thead tr th{font-weight:500;padding:.75rem 1rem;background-color:#273c75;color:#fff}.suis-table thead tr th:first-child{border-top-left-radius:.25rem}.suis-table thead tr th:last-child{border-top-right-radius:.25rem}.suis-table thead tr th.pointer{cursor:pointer}.suis-table thead tr th.pointer:hover{background-color:#273c75d9}.suis-table thead tr th>.suis-table__header{display:flex;align-items:center}.suis-table thead tr th>.suis-table__header suis-icon{display:block;margin-left:.125rem}.suis-table tbody{position:relative;background-color:#f5f6fa}.suis-table tbody tr{border-bottom:.0625rem solid #dcdde1}.suis-table tbody tr td{padding:.375rem 1rem}.suis-table tbody tr td.empty{text-align:center;padding:1.5rem 1rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }, { kind: "component", type: SuisSpinnerContainerComponent, selector: "suis-spinner-container", inputs: ["size", "color", "blur", "absolute"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2198
2204
|
}
|
|
2199
2205
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisTableComponent, decorators: [{
|
|
2200
2206
|
type: Component,
|
|
@@ -2204,7 +2210,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2204
2210
|
NgTemplateOutlet,
|
|
2205
2211
|
SuisIconComponent,
|
|
2206
2212
|
SuisSpinnerContainerComponent,
|
|
2207
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<table *ngIf=\"columns\" class=\"suis-table\">\n <thead>\n <tr>\n <th\n *ngFor=\"let column of columns\"\n [class.pointer]=\"column.orderProperty\"\n (click)=\"\n column.orderProperty ? onColumnClick(column.orderProperty) : undefined\n \"\n >\n <div class=\"suis-table__header\">\n <span>\n {{ column.name }}\n </span>\n <suis-icon\n *ngIf=\"column.orderProperty && column.orderProperty === orderBy\"\n [type]=\"sortBy === 'asc' ? 'chevron-down' : 'chevron-up'\"\n size=\"lg\"\n color=\"white\"\n ></suis-icon>\n </div>\n </th>\n <th *ngIf=\"!columns?.length\"></th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let item of data\">\n <td *ngFor=\"let column of columns\">\n <ng-container\n *ngTemplateOutlet=\"\n column.cell!.templateRef;\n context: { $implicit: item }\n \"\n ></ng-container>\n </td>\n </tr>\n <tr *ngIf=\"!data?.length\">\n <td class=\"empty\" [attr.colspan]=\"columns ? columns.length : 1\">\n {{ loading ? '' : emptyMessage }}\n </td>\n </tr>\n <suis-spinner-container\n *ngIf=\"loading\"\n [absolute]=\"true\"\n [blur]=\"true\"\n [color]=\"'secondary'\"\n ></suis-spinner-container>\n </tbody>\n</table>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-table{width:100%;border-collapse:collapse}.suis-table thead tr th{font-weight:500;padding:.75rem 1rem;background-color:#273c75;color:#fff}.suis-table thead tr th:first-child{border-top-left-radius:.25rem}.suis-table thead tr th:last-child{border-top-right-radius:.25rem}.suis-table thead tr th.pointer{cursor:pointer}.suis-table thead tr th.pointer:hover{background-color:#273c75d9}.suis-table thead tr th>.suis-table__header{display:flex;align-items:center}.suis-table thead tr th>.suis-table__header suis-icon{display:block;margin-left:.125rem}.suis-table tbody{position:relative;background-color:#f5f6fa}.suis-table tbody tr{border-bottom:.0625rem solid #dcdde1}.suis-table tbody tr td{padding:.375rem 1rem}.suis-table tbody tr td.empty{text-align:center;padding:1.5rem 1rem}\n"] }]
|
|
2213
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<table *ngIf=\"columns\" class=\"suis-table\">\n <thead>\n <tr>\n <th\n *ngFor=\"let column of columns\"\n [class.pointer]=\"column.orderProperty\"\n (click)=\"\n column.orderProperty ? onColumnClick(column.orderProperty) : undefined\n \"\n >\n <div class=\"suis-table__header\">\n <span>\n {{ column.name }}\n </span>\n <suis-icon\n *ngIf=\"column.orderProperty && column.orderProperty === orderBy\"\n [type]=\"sortBy === 'asc' ? 'chevron-down' : 'chevron-up'\"\n size=\"lg\"\n color=\"white\"\n ></suis-icon>\n </div>\n </th>\n <th *ngIf=\"!columns?.length\"></th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let item of data || []\">\n <td *ngFor=\"let column of columns\">\n <ng-container\n *ngTemplateOutlet=\"\n column.cell!.templateRef;\n context: { $implicit: item }\n \"\n ></ng-container>\n </td>\n </tr>\n <tr *ngIf=\"!data?.length\">\n <td class=\"empty\" [attr.colspan]=\"columns ? columns.length : 1\">\n {{ loading ? '' : emptyMessage }}\n </td>\n </tr>\n <suis-spinner-container\n *ngIf=\"loading\"\n [absolute]=\"true\"\n [blur]=\"true\"\n [color]=\"'secondary'\"\n ></suis-spinner-container>\n </tbody>\n</table>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-table{width:100%;border-collapse:collapse}.suis-table thead tr th{font-weight:500;padding:.75rem 1rem;background-color:#273c75;color:#fff}.suis-table thead tr th:first-child{border-top-left-radius:.25rem}.suis-table thead tr th:last-child{border-top-right-radius:.25rem}.suis-table thead tr th.pointer{cursor:pointer}.suis-table thead tr th.pointer:hover{background-color:#273c75d9}.suis-table thead tr th>.suis-table__header{display:flex;align-items:center}.suis-table thead tr th>.suis-table__header suis-icon{display:block;margin-left:.125rem}.suis-table tbody{position:relative;background-color:#f5f6fa}.suis-table tbody tr{border-bottom:.0625rem solid #dcdde1}.suis-table tbody tr td{padding:.375rem 1rem}.suis-table tbody tr td.empty{text-align:center;padding:1.5rem 1rem}\n"] }]
|
|
2208
2214
|
}], propDecorators: { columns: [{
|
|
2209
2215
|
type: ContentChildren,
|
|
2210
2216
|
args: [SuisTableColumnDirective]
|
|
@@ -2384,7 +2390,7 @@ class SuisTextAreaComponent extends SuisInputBase {
|
|
|
2384
2390
|
multi: true,
|
|
2385
2391
|
useExisting: forwardRef(() => SuisTextAreaComponent),
|
|
2386
2392
|
},
|
|
2387
|
-
], 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 }); }
|
|
2393
|
+
], 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{background-color:#f5f6fa;cursor:not-allowed}.suis-text-area--readonly:focus{border:.0625rem solid #dcdde1;box-shadow:none;outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2388
2394
|
}
|
|
2389
2395
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisTextAreaComponent, decorators: [{
|
|
2390
2396
|
type: Component,
|
|
@@ -2394,7 +2400,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2394
2400
|
multi: true,
|
|
2395
2401
|
useExisting: forwardRef(() => SuisTextAreaComponent),
|
|
2396
2402
|
},
|
|
2397
|
-
], 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"] }]
|
|
2403
|
+
], 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{background-color:#f5f6fa;cursor:not-allowed}.suis-text-area--readonly:focus{border:.0625rem solid #dcdde1;box-shadow:none;outline:none}\n"] }]
|
|
2398
2404
|
}], propDecorators: { placeholder: [{
|
|
2399
2405
|
type: Input
|
|
2400
2406
|
}] } });
|