suis 0.32.3 → 0.33.0
Sign up to get free protection for your applications and to get access to all the features.
- package/esm2022/lib/components/suis-navigation/suis-navigation.component.mjs +5 -5
- package/esm2022/lib/components/suis-notification/suis-notification.component.mjs +8 -3
- package/esm2022/lib/components/suis-notification/suis-notification.interfaces.mjs +1 -1
- package/esm2022/lib/components/suis-pagination/suis-pagination.component.mjs +4 -4
- package/esm2022/lib/components/suis-text-area/suis-text-area.component.mjs +3 -3
- package/esm2022/lib/components/suis-title/index.mjs +2 -1
- package/esm2022/lib/components/suis-title/suis-title.component.mjs +17 -5
- package/esm2022/lib/components/suis-title/suis-title.enum.mjs +7 -0
- package/esm2022/lib/services/suis-notification.service.mjs +15 -11
- package/fesm2022/suis.mjs +52 -26
- package/fesm2022/suis.mjs.map +1 -1
- package/lib/components/suis-navigation/suis-navigation.component.d.ts +2 -2
- package/lib/components/suis-notification/suis-notification.component.d.ts +1 -1
- package/lib/components/suis-notification/suis-notification.interfaces.d.ts +1 -0
- package/lib/components/suis-pagination/suis-pagination.component.d.ts +3 -3
- package/lib/components/suis-title/index.d.ts +1 -0
- package/lib/components/suis-title/suis-title.component.d.ts +8 -1
- package/lib/components/suis-title/suis-title.enum.d.ts +5 -0
- package/lib/services/suis-notification.service.d.ts +9 -6
- package/package.json +1 -1
package/fesm2022/suis.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { Pipe, Component, ChangeDetectionStrategy, Input, EventEmitter, Output, Directive, signal, Injectable, inject, ChangeDetectorRef, ElementRef, forwardRef, ViewChild, HostListener, TemplateRef, ContentChild, NgModule, DestroyRef, ContentChildren } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
|
-
import { NgClass, NgIf, NgFor, NgComponentOutlet, CommonModule, NgTemplateOutlet } from '@angular/common';
|
|
4
|
+
import { NgClass, NgIf, NgFor, NgComponentOutlet, CommonModule, NgTemplateOutlet, NgSwitch, NgSwitchCase } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/router';
|
|
6
6
|
import { RouterModule } from '@angular/router';
|
|
7
7
|
import * as i1$2 from '@angular/forms';
|
|
@@ -496,27 +496,30 @@ class SuisNotificationService {
|
|
|
496
496
|
}
|
|
497
497
|
/**
|
|
498
498
|
* Adds success notification
|
|
499
|
-
* @param
|
|
499
|
+
* @param header text displayed in the notification header
|
|
500
|
+
* @param message text displayed in the notification message
|
|
500
501
|
* @param delay time in ms after notification will be destroyed
|
|
501
502
|
*/
|
|
502
|
-
success(message, delay = 2500) {
|
|
503
|
-
this.addNotification(message, delay, 'success');
|
|
503
|
+
success(header, message, delay = 2500) {
|
|
504
|
+
this.addNotification(header, message, delay, 'success');
|
|
504
505
|
}
|
|
505
506
|
/**
|
|
506
507
|
* Adds warning notification
|
|
507
|
-
* @param
|
|
508
|
+
* @param header text displayed in the notification header
|
|
509
|
+
* @param message text displayed in the notification message
|
|
508
510
|
* @param delay time in ms after notification will be destroyed
|
|
509
511
|
*/
|
|
510
|
-
warning(message, delay = 2500) {
|
|
511
|
-
this.addNotification(message, delay, 'warning');
|
|
512
|
+
warning(header, message, delay = 2500) {
|
|
513
|
+
this.addNotification(header, message, delay, 'warning');
|
|
512
514
|
}
|
|
513
515
|
/**
|
|
514
516
|
* Adds danger notification
|
|
515
|
-
* @param
|
|
517
|
+
* @param header text displayed in the notification header
|
|
518
|
+
* @param message text displayed in the notification message
|
|
516
519
|
* @param delay time in ms after notification will be destroyed
|
|
517
520
|
*/
|
|
518
|
-
danger(message, delay = 2500) {
|
|
519
|
-
this.addNotification(message, delay, 'danger');
|
|
521
|
+
danger(header, message, delay = 2500) {
|
|
522
|
+
this.addNotification(header, message, delay, 'danger');
|
|
520
523
|
}
|
|
521
524
|
/**
|
|
522
525
|
* Removes notification immediately
|
|
@@ -530,9 +533,10 @@ class SuisNotificationService {
|
|
|
530
533
|
return `suis-notification--${UNIQUE_ID++}`;
|
|
531
534
|
}
|
|
532
535
|
/** @internal */
|
|
533
|
-
addNotification(message, delay, type) {
|
|
536
|
+
addNotification(header, message, delay, type) {
|
|
534
537
|
const notification = {
|
|
535
538
|
id: this.getId(),
|
|
539
|
+
header: header,
|
|
536
540
|
message: message,
|
|
537
541
|
delay: delay,
|
|
538
542
|
type: type,
|
|
@@ -1287,11 +1291,11 @@ class SuisNavigationComponent {
|
|
|
1287
1291
|
*/
|
|
1288
1292
|
this.expandable = false;
|
|
1289
1293
|
/**
|
|
1290
|
-
* Adds collapse /
|
|
1294
|
+
* Adds collapse / expand logic to navigiaton. By default set to false.
|
|
1291
1295
|
*/
|
|
1292
1296
|
this.collapsable = false;
|
|
1293
1297
|
/**
|
|
1294
|
-
* Collapses the navigiation. By default set to false.
|
|
1298
|
+
* Collapses the navigiation, when collapsable is enabled. By default set to false.
|
|
1295
1299
|
*/
|
|
1296
1300
|
this.collapsed = false;
|
|
1297
1301
|
/**
|
|
@@ -1308,11 +1312,11 @@ class SuisNavigationComponent {
|
|
|
1308
1312
|
return `${groupItem.label}-${index}`;
|
|
1309
1313
|
}
|
|
1310
1314
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1311
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisNavigationComponent, isStandalone: true, selector: "suis-navigation", inputs: { items: "items", expandedGroups: "expandedGroups", expandable: "expandable", collapsable: "collapsable", collapsed: "collapsed", collaspedChange: "collaspedChange" }, queries: [{ propertyName: "suisNavigationItem", first: true, predicate: SuisNavigationItemDirective, descendants: true }], ngImport: i0, template: "<div\n class=\"suis-navigation\"\n [class.suis-navigation--collapsed]=\"collapsable && collapsed\"\n>\n <div class=\"suis-navigation__actions\">\n <button *ngIf=\"collapsable\" type=\"button\" (click)=\"onToggle()\">\n <suis-icon\n [type]=\"collapsed ? 'arrow-right' : 'arrow-left'\"\n color=\"white\"\n size=\"lg\"\n ></suis-icon>\n </button>\n </div>\n <div class=\"suis-navigation__groups\">\n <ng-container *ngIf=\"!collapsed\">\n <suis-navigation-group\n *ngFor=\"let groupItem of items; trackBy: groupItemTrackBy\"\n [item]=\"groupItem\"\n [templateRef]=\"suisNavigationItem?.templateRef\"\n [expanded]=\"expandedGroups\"\n [expandable]=\"expandable\"\n ></suis-navigation-group>\n </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;height:100%}.suis-navigation{width:100%;min-width:16rem;max-width:16rem;background-color:#192a56;color:#fff;height:100%;min-height:100vh;padding:1rem;display:flex;flex-direction:column}.suis-navigation--collapsed{min-width:3.25rem;max-width:3.25rem}.suis-navigation__groups{overflow-y:auto}.suis-navigation__actions{display:flex;justify-content:flex-end
|
|
1315
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisNavigationComponent, isStandalone: true, selector: "suis-navigation", inputs: { items: "items", expandedGroups: "expandedGroups", expandable: "expandable", collapsable: "collapsable", collapsed: "collapsed", collaspedChange: "collaspedChange" }, queries: [{ propertyName: "suisNavigationItem", first: true, predicate: SuisNavigationItemDirective, descendants: true }], ngImport: i0, template: "<div\n class=\"suis-navigation\"\n [class.suis-navigation--collapsed]=\"collapsable && collapsed\"\n>\n <div class=\"suis-navigation__actions\">\n <button *ngIf=\"collapsable\" type=\"button\" (click)=\"onToggle()\">\n <suis-icon\n [type]=\"collapsed ? 'arrow-right' : 'arrow-left'\"\n color=\"white\"\n size=\"lg\"\n ></suis-icon>\n </button>\n </div>\n <div class=\"suis-navigation__groups\">\n <ng-container *ngIf=\"!collapsed\">\n <suis-navigation-group\n *ngFor=\"let groupItem of items; trackBy: groupItemTrackBy\"\n [item]=\"groupItem\"\n [templateRef]=\"suisNavigationItem?.templateRef\"\n [expanded]=\"expandedGroups\"\n [expandable]=\"expandable\"\n ></suis-navigation-group>\n </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;height:100%}.suis-navigation{width:100%;min-width:16rem;max-width:16rem;background-color:#192a56;color:#fff;height:100%;min-height:100vh;padding:1rem;display:flex;flex-direction:column}.suis-navigation--collapsed{min-width:3.25rem;max-width:3.25rem}.suis-navigation__groups{overflow-y:auto}.suis-navigation__actions{display:flex;justify-content:flex-end}.suis-navigation__actions button{margin-bottom:1.5rem;background-color:transparent;border-radius:.25rem;border:0}.suis-navigation__actions button:hover{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SuisNavigationGroupComponent, selector: "suis-navigation-group", inputs: ["item", "templateRef", "expanded", "expandable"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1312
1316
|
}
|
|
1313
1317
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisNavigationComponent, decorators: [{
|
|
1314
1318
|
type: Component,
|
|
1315
|
-
args: [{ selector: 'suis-navigation', standalone: true, imports: [NgIf, NgFor, SuisNavigationGroupComponent, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-navigation\"\n [class.suis-navigation--collapsed]=\"collapsable && collapsed\"\n>\n <div class=\"suis-navigation__actions\">\n <button *ngIf=\"collapsable\" type=\"button\" (click)=\"onToggle()\">\n <suis-icon\n [type]=\"collapsed ? 'arrow-right' : 'arrow-left'\"\n color=\"white\"\n size=\"lg\"\n ></suis-icon>\n </button>\n </div>\n <div class=\"suis-navigation__groups\">\n <ng-container *ngIf=\"!collapsed\">\n <suis-navigation-group\n *ngFor=\"let groupItem of items; trackBy: groupItemTrackBy\"\n [item]=\"groupItem\"\n [templateRef]=\"suisNavigationItem?.templateRef\"\n [expanded]=\"expandedGroups\"\n [expandable]=\"expandable\"\n ></suis-navigation-group>\n </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;height:100%}.suis-navigation{width:100%;min-width:16rem;max-width:16rem;background-color:#192a56;color:#fff;height:100%;min-height:100vh;padding:1rem;display:flex;flex-direction:column}.suis-navigation--collapsed{min-width:3.25rem;max-width:3.25rem}.suis-navigation__groups{overflow-y:auto}.suis-navigation__actions{display:flex;justify-content:flex-end
|
|
1319
|
+
args: [{ selector: 'suis-navigation', standalone: true, imports: [NgIf, NgFor, SuisNavigationGroupComponent, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"suis-navigation\"\n [class.suis-navigation--collapsed]=\"collapsable && collapsed\"\n>\n <div class=\"suis-navigation__actions\">\n <button *ngIf=\"collapsable\" type=\"button\" (click)=\"onToggle()\">\n <suis-icon\n [type]=\"collapsed ? 'arrow-right' : 'arrow-left'\"\n color=\"white\"\n size=\"lg\"\n ></suis-icon>\n </button>\n </div>\n <div class=\"suis-navigation__groups\">\n <ng-container *ngIf=\"!collapsed\">\n <suis-navigation-group\n *ngFor=\"let groupItem of items; trackBy: groupItemTrackBy\"\n [item]=\"groupItem\"\n [templateRef]=\"suisNavigationItem?.templateRef\"\n [expanded]=\"expandedGroups\"\n [expandable]=\"expandable\"\n ></suis-navigation-group>\n </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;height:100%}.suis-navigation{width:100%;min-width:16rem;max-width:16rem;background-color:#192a56;color:#fff;height:100%;min-height:100vh;padding:1rem;display:flex;flex-direction:column}.suis-navigation--collapsed{min-width:3.25rem;max-width:3.25rem}.suis-navigation__groups{overflow-y:auto}.suis-navigation__actions{display:flex;justify-content:flex-end}.suis-navigation__actions button{margin-bottom:1.5rem;background-color:transparent;border-radius:.25rem;border:0}.suis-navigation__actions button:hover{cursor:pointer}\n"] }]
|
|
1316
1320
|
}], propDecorators: { suisNavigationItem: [{
|
|
1317
1321
|
type: ContentChild,
|
|
1318
1322
|
args: [SuisNavigationItemDirective]
|
|
@@ -1345,20 +1349,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1345
1349
|
|
|
1346
1350
|
class SuisNotificationComponent {
|
|
1347
1351
|
constructor() {
|
|
1352
|
+
/**
|
|
1353
|
+
* Notification item data. Type of SuisNotification.
|
|
1354
|
+
*/
|
|
1355
|
+
this.notification = null;
|
|
1348
1356
|
/**
|
|
1349
1357
|
* Emits on close button action.
|
|
1350
1358
|
*/
|
|
1351
1359
|
this.closed = new EventEmitter();
|
|
1352
1360
|
}
|
|
1353
1361
|
onClose() {
|
|
1362
|
+
this.notification = null;
|
|
1354
1363
|
this.closed.emit();
|
|
1355
1364
|
}
|
|
1356
1365
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1357
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisNotificationComponent, isStandalone: true, selector: "suis-notification", inputs: { notification: "notification" }, outputs: { closed: "closed" }, ngImport: i0, template: "<div\n *ngIf=\"notification\"\n class=\"suis-notification\"\n [ngClass]=\"'suis-notification' | suisNgClass : notification.type\"\n>\n <
|
|
1366
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisNotificationComponent, isStandalone: true, selector: "suis-notification", inputs: { notification: "notification" }, outputs: { closed: "closed" }, ngImport: i0, template: "<div\n *ngIf=\"notification\"\n class=\"suis-notification\"\n [ngClass]=\"'suis-notification' | suisNgClass : notification.type\"\n>\n <div class=\"suis-notification__header\">\n <span>\n {{ notification.header }}\n </span>\n <button\n class=\"suis-notification__header__close\"\n type=\"button\"\n (click)=\"onClose()\"\n >\n <suis-icon type=\"cross\" [color]=\"'white'\" [size]=\"'lg'\"></suis-icon>\n </button>\n </div>\n <div class=\"suis-notification__message\">\n {{ notification.message }}\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-notification{min-width:15rem;max-width:15rem;padding:1rem;border-radius:.25rem;color:#fff;position:relative;font-size:.875rem}.suis-notification--success{background-color:#2ed573}.suis-notification--warning{background-color:#ffa502}.suis-notification--danger{background-color:#ff4757}.suis-notification__header{display:flex;justify-content:space-between;font-size:1rem;font-weight:700;margin-bottom:1rem}.suis-notification__header__close{background-color:transparent;border:none;cursor:pointer}.suis-notification__header__close:hover{opacity:.75}.suis-notification__message{font-size:.875rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1358
1367
|
}
|
|
1359
1368
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisNotificationComponent, decorators: [{
|
|
1360
1369
|
type: Component,
|
|
1361
|
-
args: [{ selector: 'suis-notification', standalone: true, imports: [NgIf, NgClass, SuisNgClassPipe, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"notification\"\n class=\"suis-notification\"\n [ngClass]=\"'suis-notification' | suisNgClass : notification.type\"\n>\n <
|
|
1370
|
+
args: [{ selector: 'suis-notification', standalone: true, imports: [NgIf, NgClass, SuisNgClassPipe, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"notification\"\n class=\"suis-notification\"\n [ngClass]=\"'suis-notification' | suisNgClass : notification.type\"\n>\n <div class=\"suis-notification__header\">\n <span>\n {{ notification.header }}\n </span>\n <button\n class=\"suis-notification__header__close\"\n type=\"button\"\n (click)=\"onClose()\"\n >\n <suis-icon type=\"cross\" [color]=\"'white'\" [size]=\"'lg'\"></suis-icon>\n </button>\n </div>\n <div class=\"suis-notification__message\">\n {{ notification.message }}\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-notification{min-width:15rem;max-width:15rem;padding:1rem;border-radius:.25rem;color:#fff;position:relative;font-size:.875rem}.suis-notification--success{background-color:#2ed573}.suis-notification--warning{background-color:#ffa502}.suis-notification--danger{background-color:#ff4757}.suis-notification__header{display:flex;justify-content:space-between;font-size:1rem;font-weight:700;margin-bottom:1rem}.suis-notification__header__close{background-color:transparent;border:none;cursor:pointer}.suis-notification__header__close:hover{opacity:.75}.suis-notification__message{font-size:.875rem}\n"] }]
|
|
1362
1371
|
}], propDecorators: { notification: [{
|
|
1363
1372
|
type: Input,
|
|
1364
1373
|
args: [{ required: true }]
|
|
@@ -1772,7 +1781,7 @@ class SuisPaginationComponent {
|
|
|
1772
1781
|
*/
|
|
1773
1782
|
this.page = 1;
|
|
1774
1783
|
/**
|
|
1775
|
-
* Number of items presented per page. By default set to 15.
|
|
1784
|
+
* Number of items presented per page. Value must be included in perPageOptions. By default set to 15.
|
|
1776
1785
|
*/
|
|
1777
1786
|
this.perPage = 15;
|
|
1778
1787
|
/**
|
|
@@ -1784,11 +1793,11 @@ class SuisPaginationComponent {
|
|
|
1784
1793
|
*/
|
|
1785
1794
|
this.totalItems = 0;
|
|
1786
1795
|
/**
|
|
1787
|
-
* Sets the of label "1 'of' 25". By default set to 'of'.
|
|
1796
|
+
* Sets the of label in "1 'of' 25". By default set to 'of'.
|
|
1788
1797
|
*/
|
|
1789
1798
|
this.ofLabel = 'of';
|
|
1790
1799
|
/**
|
|
1791
|
-
* Sets the
|
|
1800
|
+
* Sets the items label in "1-10 'of' 25 'items'". By default set to 'Page'.
|
|
1792
1801
|
*/
|
|
1793
1802
|
this.itemsLabel = 'items';
|
|
1794
1803
|
/**
|
|
@@ -2257,7 +2266,7 @@ class SuisTextAreaComponent extends SuisInputBase {
|
|
|
2257
2266
|
multi: true,
|
|
2258
2267
|
useExisting: forwardRef(() => SuisTextAreaComponent),
|
|
2259
2268
|
},
|
|
2260
|
-
], usesInheritance: true, ngImport: i0, template: "<textarea\n class=\"suis-text-area\"\n [class.suis-text-area--invalid]=\"invalid\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n></textarea>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-text-area{width:100%;background-color:#fff;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.625rem;min-height:6.25rem}.suis-text-area:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-text-area--invalid{border:.0625rem solid #ff4757}.suis-text-area--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}.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 }); }
|
|
2269
|
+
], 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 }); }
|
|
2261
2270
|
}
|
|
2262
2271
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisTextAreaComponent, decorators: [{
|
|
2263
2272
|
type: Component,
|
|
@@ -2267,19 +2276,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2267
2276
|
multi: true,
|
|
2268
2277
|
useExisting: forwardRef(() => SuisTextAreaComponent),
|
|
2269
2278
|
},
|
|
2270
|
-
], template: "<textarea\n class=\"suis-text-area\"\n [class.suis-text-area--invalid]=\"invalid\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n></textarea>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-text-area{width:100%;background-color:#fff;border-radius:.25rem;padding:.5rem 1rem;border:.0625rem solid #dcdde1;min-height:2.625rem;min-height:6.25rem}.suis-text-area:focus{border:.0625rem solid #192a56;box-shadow:0 2px 5px #192a56bf;outline:none}.suis-text-area--invalid{border:.0625rem solid #ff4757}.suis-text-area--invalid:focus{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}.suis-text-area--readonly{cursor:not-allowed}.suis-text-area--readonly:focus{border:.0625rem solid #dcdde1;box-shadow:none;outline:none}\n"] }]
|
|
2279
|
+
], 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"] }]
|
|
2271
2280
|
}], propDecorators: { placeholder: [{
|
|
2272
2281
|
type: Input
|
|
2273
2282
|
}] } });
|
|
2274
2283
|
|
|
2284
|
+
var SuisTitle;
|
|
2285
|
+
(function (SuisTitle) {
|
|
2286
|
+
SuisTitle[SuisTitle["H1"] = 1] = "H1";
|
|
2287
|
+
SuisTitle[SuisTitle["H2"] = 2] = "H2";
|
|
2288
|
+
SuisTitle[SuisTitle["H3"] = 3] = "H3";
|
|
2289
|
+
})(SuisTitle || (SuisTitle = {}));
|
|
2290
|
+
|
|
2275
2291
|
class SuisTitleComponent {
|
|
2292
|
+
constructor() {
|
|
2293
|
+
/** @internal */
|
|
2294
|
+
this.SuisTitle = SuisTitle;
|
|
2295
|
+
/**
|
|
2296
|
+
* Sets level of the header tag. Type of SuisTitle. By default set to H1.
|
|
2297
|
+
*/
|
|
2298
|
+
this.level = SuisTitle.H1;
|
|
2299
|
+
}
|
|
2276
2300
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2277
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisTitleComponent, isStandalone: true, selector: "suis-title", ngImport: i0, template: "<h1 class=\"suis-title\">\n <ng-content></ng-content>\n</
|
|
2301
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisTitleComponent, isStandalone: true, selector: "suis-title", inputs: { level: "level" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"level\">\n <h1 *ngSwitchCase=\"SuisTitle.H1\" class=\"suis-title--h1\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </h1>\n <h2 *ngSwitchCase=\"SuisTitle.H2\" class=\"suis-title--h2\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </h2>\n <h3 *ngSwitchCase=\"SuisTitle.H3\" class=\"suis-title--h3\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </h3>\n</ng-container>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-title--h1{color:#192a56;font-weight:600;font-size:1.25rem}.suis-title--h2{color:#273c75;font-weight:500;font-size:1.125rem}.suis-title--h3{color:#bcbcbc;font-weight:400;font-size:1rem}\n"], dependencies: [{ kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2278
2302
|
}
|
|
2279
2303
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisTitleComponent, decorators: [{
|
|
2280
2304
|
type: Component,
|
|
2281
|
-
args: [{ selector: 'suis-title', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<h1 class=\"suis-title\">\n <ng-content></ng-content>\n</
|
|
2282
|
-
}]
|
|
2305
|
+
args: [{ selector: 'suis-title', standalone: true, imports: [NgSwitch, NgSwitchCase, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"level\">\n <h1 *ngSwitchCase=\"SuisTitle.H1\" class=\"suis-title--h1\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </h1>\n <h2 *ngSwitchCase=\"SuisTitle.H2\" class=\"suis-title--h2\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </h2>\n <h3 *ngSwitchCase=\"SuisTitle.H3\" class=\"suis-title--h3\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </h3>\n</ng-container>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-title--h1{color:#192a56;font-weight:600;font-size:1.25rem}.suis-title--h2{color:#273c75;font-weight:500;font-size:1.125rem}.suis-title--h3{color:#bcbcbc;font-weight:400;font-size:1rem}\n"] }]
|
|
2306
|
+
}], propDecorators: { level: [{
|
|
2307
|
+
type: Input
|
|
2308
|
+
}] } });
|
|
2283
2309
|
|
|
2284
2310
|
class SuisToggleComponent extends SuisCheckboxBase {
|
|
2285
2311
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -2323,5 +2349,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2323
2349
|
* Generated bundle index. Do not edit.
|
|
2324
2350
|
*/
|
|
2325
2351
|
|
|
2326
|
-
export { SuisAccordionComponent, SuisAlertComponent, SuisBoxComponent, SuisBreadcrumbsComponent, SuisButtonComponent, SuisButtonLinkComponent, SuisButtonOutlinedComponent, SuisChipComponent, SuisContainerComponent, SuisDialogComponent, SuisDialogContainerComponent, SuisDialogService, SuisDividerComponent, SuisFormFieldComponent, SuisIconComponent, SuisInputCheckboxComponent, SuisInputChipsComponent, SuisInputComponent, SuisInputImageComponent, SuisInputNumberComponent, SuisInputRadioComponent, SuisItemComponent, SuisLabelComponent, SuisNavigationComponent, SuisNavigationGroupComponent, SuisNavigationGroupItemComponent, SuisNavigationItemComponent, SuisNavigationItemDirective, SuisNavigationModule, SuisNgClassPipe, SuisNotificationComponent, SuisNotificationService, SuisNotificationsComponent, SuisPaginationComponent, SuisProgressBarComponent, SuisSelectComponent, SuisSelectModule, SuisSelectMultiComponent, SuisSelectOptionComponent, SuisSelectOptionDirective, SuisSpinnerComponent, SuisSpinnerContainerComponent, SuisTabDirective, SuisTableCellDirective, SuisTableColumnDirective, SuisTableComponent, SuisTableModule, SuisTabsComponent, SuisTabsModule, SuisTextAreaComponent, SuisTitleComponent, SuisToggleComponent, SuisToolbarComponent };
|
|
2352
|
+
export { SuisAccordionComponent, SuisAlertComponent, SuisBoxComponent, SuisBreadcrumbsComponent, SuisButtonComponent, SuisButtonLinkComponent, SuisButtonOutlinedComponent, SuisChipComponent, SuisContainerComponent, SuisDialogComponent, SuisDialogContainerComponent, SuisDialogService, SuisDividerComponent, SuisFormFieldComponent, SuisIconComponent, SuisInputCheckboxComponent, SuisInputChipsComponent, SuisInputComponent, SuisInputImageComponent, SuisInputNumberComponent, SuisInputRadioComponent, SuisItemComponent, SuisLabelComponent, SuisNavigationComponent, SuisNavigationGroupComponent, SuisNavigationGroupItemComponent, SuisNavigationItemComponent, SuisNavigationItemDirective, SuisNavigationModule, SuisNgClassPipe, SuisNotificationComponent, SuisNotificationService, SuisNotificationsComponent, SuisPaginationComponent, SuisProgressBarComponent, SuisSelectComponent, SuisSelectModule, SuisSelectMultiComponent, SuisSelectOptionComponent, SuisSelectOptionDirective, SuisSpinnerComponent, SuisSpinnerContainerComponent, SuisTabDirective, SuisTableCellDirective, SuisTableColumnDirective, SuisTableComponent, SuisTableModule, SuisTabsComponent, SuisTabsModule, SuisTextAreaComponent, SuisTitle, SuisTitleComponent, SuisToggleComponent, SuisToolbarComponent };
|
|
2327
2353
|
//# sourceMappingURL=suis.mjs.map
|